@charset "UTF-8";
html,
body {
overflow-x: hidden;
overflow-x: clip;
}
#swap-calendar [v-cloak] {
display: none !important;
}
/*----------------------------------------------------
このページだけヘッダーの口座開設ボタンとログインボタンを非表示
----------------------------------------------------*/
.header__btn--list {
display: none;
}
/*----------------------------------------------------
triauto-swap-calender
----------------------------------------------------*/
/* date */
.triauto-swap-calender-date {
color: #666;
font-size: 1.8rem;
font-weight: bold;
max-width: 760px;
margin: 0 auto;
padding: 0;
}
/*----------------------------------------------------
triauto-swap-calender-list
----------------------------------------------------*/
/* 旧 margin-bottom(3rem/PC4rem) は削除済み。表の下の余白は後続要素
(.triauto-swap-table-note の margin-top: 20px) 側で作る（2026-07-07） */
.triauto-swap-calender-list table {
border-collapse: collapse;
position: relative;
text-align: center;
width: 100%;
}
/* 旧テーマの thead 要素への sticky(top:70px/90px) はここから削除済み。
要素への sticky は z-index が無く、tbody 内の position:relative な
旗アイコンが上に描画される・ヘッダー高(100px)より浅い top で重なる、
の2つの不具合源だった。現行の追従は .triauto-spread-table thead th 側
(z-index:2 + ヘッダー実高に合わせた top) で行う。 */
.triauto-swap-calender-list th,
.triauto-swap-calender-list td {
border-left: 1px solid #999;
padding: .7rem .5rem;
}
.triauto-swap-calender-list tr:first-child th:first-child,
.triauto-swap-calender-list td:first-child {
border-left: 0;
}
.triauto-swap-calender-list td:nth-child(3),
.triauto-swap-calender-list td:nth-child(4) {
text-align: right;
width: 20%;
}
.triauto-swap-calender-list tbody:nth-child(odd) {
background: #f5f5f5;
}
/* thead */
.triauto-swap-calender-list th {
background: #f2f2f2;
}
.triauto-swap-calender-list tr:nth-child(even) td {
background: #f2f2f2;
}
.triauto-swap-calender-list th img {
height: 1.8rem;
margin: 0 auto .5rem;
vertical-align: middle;
}
/* latest table: match /triauto/spread/ table theme */
.triauto-swap-latest-table-block.triauto-spread-table-block {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 760px;
margin: 16px auto 0;
width: 100%;
}
.triauto-swap-calender-list .triauto-spread-table-scroll {
filter: drop-shadow(0 4px 7px rgba(235, 243, 252, .48));
/* overflow-x:auto だとこのラッパー自身がスクロールコンテナになり、thead の
sticky がページではなく表の高さのラッパーに対して張り付いて実質追従しない。
PC(>=940px)では表(min-width:640px)がコンテナ(max-width:760px)に常に収まり
横スクロール自体が不要のため visible にする。SP(<=939px)は既存のSPブロックで
元々 visible。 */
overflow: visible;
width: 100%;
}
.triauto-swap-calender-list .triauto-spread-table {
border: 1px solid var(--border);
border-collapse: separate;
border-radius: 6px;
border-spacing: 0;
color: var(--text);
font: var(--ta-type-body);
letter-spacing: var(--ta-letter-spacing-ja, 1px);
min-width: 640px;
/* overflow:hidden だと sticky thead が親でクリップされ追従しないため visible に。
角丸は overflow で自動クリップされなくなる分、四隅のセルに個別付与して維持する
(下の thead/tbody first-child/last-child ルール参照)。 */
overflow: visible;
position: static;
table-layout: fixed;
width: 100%;
}
.triauto-swap-calender-list .triauto-spread-table th,
.triauto-swap-calender-list .triauto-spread-table td {
border: 0;
border-right: 1px solid var(--border);
border-top: 1px solid var(--border);
box-sizing: border-box;
padding: 0 12px;
vertical-align: middle;
}
.triauto-swap-calender-list .triauto-spread-table th:last-child,
.triauto-swap-calender-list .triauto-spread-table td:last-child {
border-right: 0;
}
.triauto-swap-calender-list .triauto-spread-table thead th {
background: var(--mane-color);
border-color: rgba(255, 255, 255, .75);
color: #fff;
font-family: var(--ta-font-family-ja);
font-size: 16px;
font-weight: 700;
height: 48px;
letter-spacing: 0;
line-height: normal;
position: sticky; /* 追従(sticky)。top はヘッダー確保領域に合わせる(SP48px/PC112px、下の769px以上メディアクエリで上書き) */
top: 48px;
text-align: center;
z-index: 2;
}
.triauto-swap-calender-list .triauto-spread-table thead tr:first-child th {
border-top: 0;
height: 54px;
}
/* overflow:visible化で自動クリップされなくなった四隅の角丸を個別に復元 */
.triauto-swap-calender-list .triauto-spread-table thead tr:first-child th:first-child {
border-top-left-radius: 6px;
}
.triauto-swap-calender-list .triauto-spread-table thead tr:first-child th:last-child {
border-top-right-radius: 6px;
}
.triauto-swap-calender-list .triauto-spread-table tbody tr:last-child th {
border-bottom-left-radius: 6px;
}
.triauto-swap-calender-list .triauto-spread-table tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
.triauto-swap-calender-list .triauto-spread-table .triauto-spread-table__pair-head {
background: var(--mane-color);
border-right-color: #fff;
width: 220px;
}
.triauto-swap-calender-list .triauto-spread-table thead th:nth-child(2) {
width: 159px;
}
.triauto-swap-calender-list .triauto-spread-table tbody tr {
height: 54px;
}
.triauto-swap-calender-list .triauto-spread-table tbody th {
background: var(--primary-pale);
color: var(--primary-dark);
font: var(--ta-type-h4-pc);
font-size: 16px;
height: 54px;
letter-spacing: 0;
text-align: left;
vertical-align: middle;
}
.triauto-swap-calender-list .triauto-spread-table tbody tr:nth-child(even) th {
background: #f4f8fe;
}
.triauto-swap-calender-list .triauto-spread-table tbody td,
.triauto-swap-calender-list .triauto-spread-table tbody td:nth-child(3),
.triauto-swap-calender-list .triauto-spread-table tbody td:nth-child(4) {
background: #fff;
font-size: 16px;
text-align: center;
width: auto;
}
.triauto-swap-calender-list .triauto-spread-flags {
display: inline-flex;
flex: 0 0 40px;
height: auto;
margin: 0 10px 0 0;
position: relative;
vertical-align: middle;
width: 40px;
}
.triauto-swap-calender-list .triauto-spread-table tbody th > span:last-child {
display: inline-block;
vertical-align: middle;
}
@media (min-width: 940px) {
/* title */
.triauto-swap-calender-date {
font-size: 2.1rem;
}
/* list: 旧 margin-bottom 4rem は削除済み（表下余白は .triauto-swap-table-note 側の margin-top で作る） */
/* 旧テーマ thead sticky の PC 用 top:90px はここから削除済み(上のコメント参照) */
.triauto-swap-calender-list th,
.triauto-swap-calender-list td {
font-size: 1.6rem;
padding: 1rem;
}
/* thead */
.triauto-swap-calender-list th {
font-size: 1.8rem;
vertical-align: middle;
}
.triauto-swap-calender-list th img {
display: inline-block;
height: 2.1rem;
margin: 0 1rem 0 0;
}
}
/*====================================================
Swap Calendar - Modern Theme (2026)
====================================================*/
/*----------------------------------------------------
page wrapper
----------------------------------------------------*/
.triauto-swap-page {
background: #fff;
font-family: var(--ta-font-family-ja);
}
.triauto-swap-page button,
.triauto-swap-page select,
.triauto-swap-page table {
font-family: var(--ta-font-family-ja);
}
/*----------------------------------------------------
view tabs
----------------------------------------------------*/
.triauto-swap-view-tabs {
display: flex;
gap: 0;
justify-content: center;
margin: 0 auto 4rem;
max-width: 760px;
width: 100%;
}
.triauto-swap-view-tab-btn {
background: #fff;
border: 1px solid #c8d4e3;
border-radius: 4px;
color: #1e5fad;
cursor: pointer;
flex: 1 1 50%;
font-family: var(--ta-font-family-ja);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.02em;
min-height: 3.6rem;
padding: .8rem 1.2rem;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.triauto-swap-view-tab-break {
display: none;
}
.triauto-swap-view-tab-line {
white-space: nowrap;
}
.triauto-swap-view-tab-btn:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.triauto-swap-view-tab-btn:last-child {
border-bottom-left-radius: 0;
border-left: 0;
border-top-left-radius: 0;
}
.triauto-swap-view-tab-btn:hover {
background: #fff;
color: #0a2463;
}
.triauto-swap-view-tab-btn.is-active {
background: #1e5fad;
border-color: #0a2463;
box-shadow: none;
color: #fff;
}
.triauto-swap-view-tab-btn.is-active:hover {
background: #164f95;
color: #fff;
}
@media (min-width: 940px) {
.triauto-swap-view-tabs {
margin-bottom: 4rem;
}
.triauto-swap-view-tab-btn {
font-size: 16px;
min-height: 4rem;
padding: .9rem 2rem;
}
}
/*----------------------------------------------------
view panels base
----------------------------------------------------*/
.triauto-swap-view {
background: #fff;
border-radius: 0;
box-shadow: none;
padding: 2rem 1.5rem 0;
}
@media (min-width: 940px) {
.triauto-swap-view {
padding: 3rem 2.5rem 0;
}
}
#swap-calendar.triauto-swap-view {
padding-bottom: 0;
padding-top: 0;
}
#swap-latest-view.triauto-swap-view {
padding-bottom: 0;
padding-top: 0;
}
/*----------------------------------------------------
monthly calendar select
----------------------------------------------------*/
.triauto-market-calendar-select-wrap {
margin: 0 auto 3rem;
max-width: 840px;
position: relative;
}
#swap-calendar .triauto-market-calendar-select-wrap {
margin-bottom: 1.6rem;
}
.triauto-market-calendar-select-in {
display: flex;
flex-direction: column;
gap: 3rem;
}
.triauto-market-calendar-select-each {
align-items: flex-start;
display: flex;
gap: 1rem;
}
.triauto-market-calendar-select-each > p {
color: #0a2463;
flex: 0 0 auto;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
min-width: 7em;
}
.triauto-market-calendar-select-each > div {
flex: 1 1 auto;
position: relative;
}
/* 旧