/* ============================================
   Trade Journey LP - Styles (JA)
   PC design base: 1920px / SP design base: 750px
   Breakpoint: 768px
============================================ */

/* ============================================
   Reset & Base
============================================ */
.tj-lp {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #0d0a04;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
}

.tj-lp *,
.tj-lp *::before,
.tj-lp *::after {
    box-sizing: inherit;
}

.tj-lp picture {
    display: block;
    width: 100%;
}

.tj-lp img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================
   FV
============================================ */
.tj-fv {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

/* ============================================
   ボーダー（各セクション末尾に配置）
============================================ */
.tj-border {
    width: 100%;
}

/* ============================================
   SEC1: イントロ
============================================ */
.tj-sec1 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.tj-sec1__bg {
    position: relative;
}

/* 背景画像はwrapper全幅で定義済み(picture > img) */

.tj-sec1__text-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tj-sec1__text-wrap picture {
    width: auto;
    max-width: 90%;
    display: flex;
    justify-content: center;
}

.tj-sec1__text-wrap picture img {
    width: auto;
    max-width: 85%;
    height: auto;
}

/* ============================================
   SEC2: 特典紹介
============================================ */
.tj-sec2 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.tj-sec2__bg {
    position: relative;
}

.tj-sec2__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.125vw; /* 60px @ 1920px */
    padding: 0.3vw 0 3.125vw;
}

/* div_1: 見出し + ボタン（縦積み・中央揃え） */
.tj-sec2__div1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5625vw; /* 30px @ 1920px */
}

.tj-sec2__div1-text picture {
    width: auto;
    max-width: 60vw;
    margin-top: 3vw; /* 約29px @ 1920px */
}

.tj-sec2__div1-text picture img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.tj-sec2__div1-btn {
    margin-top: -2vw; /* 上に20px詰める @ 1920px */
    display: inline-block;
    transition: transform 0.3s ease;
}

.tj-sec2__div1-btn:hover {
    transform: scale(1.05);
}

.tj-sec2__div1-btn picture {
    width: auto;
}

.tj-sec2__div1-btn picture img {
    width: auto;
    height: auto;
    max-width: 25.26vw; /* 485px @ 1920px */
}

/* div_2: サブ説明 + テキスト + ボタン2つ */
.tj-sec2__div2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5625vw; /* 30px @ 1920px */
    margin-top: 1vw; /* 30px @ 1920px */
}

.tj-sec2__div2-text1 picture {
    width: auto;
}

.tj-sec2__div2-text1 picture img {
    width: auto;
    height: auto;
    max-width: 90vw;
}

.tj-sec2__desc {
    text-align: center;
    font-size: 0.88vw; /* 17px @ 1920px */
    line-height: 1.8;
    color: #fff;
    max-width: 52vw;
}

.tj-sec2__note {
    font-size: 0.73vw; /* 14px @ 1920px */
    color: #ccc;
    margin-top: 0.5em;
}

.tj-sec2__btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0vw;
    margin-top: -1.2vw; /* 上を詰める -20px @ 1920px */
}

.tj-sec2__btn {
    display: inline-block;
    transition: transform 0.3s ease;
}

.tj-sec2__btn:hover {
    transform: scale(1.05);
}

.tj-sec2__btn picture {
    width: auto;
}

.tj-sec2__btn picture img {
    width: auto;
    height: auto;
    max-width: 25.26vw; /* 485px @ 1920px */
}

/* ============================================
   SEC3: グレード紹介
============================================ */
.tj-sec3 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.tj-sec3__bg {
    position: relative;
    background-image: url('/resources_source/images/campaign/trade_journey/en/cont_3_pc/Background.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
}

.tj-sec3__bg > picture {
    display: none;
}

.tj-sec3__inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.125vw 0 4vw;
    gap: 3.125vw;
}

/* div_1: 見出し・サブ・ボックス */
.tj-sec3__div1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5625vw;
    width: 100%;
}

/* タイトル→boxesの余白をカンプに合わせて追加 */
.tj-sec3__boxes {
    margin-top: 1.5625vw; /* 30px @ 1920px */
}

/* box-note→chara-textの余白をカンプに合わせて追加 */
.tj-sec3__chara-text {
    margin-top: 6.25vw; /* 120px @ 1920px */
}

.tj-sec3__div1-title {
    margin-top: 2.6vw; /* 50px @ 1920px */
    margin-bottom: 1.04vw; /* 20px @ 1920px */
}

.tj-sec3__div1-title picture {
    width: auto;
    max-width: 90vw;
}

.tj-sec3__div1-title picture img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.tj-sec3__div1-sub picture {
    width: auto;
}

.tj-sec3__div1-sub picture img {
    width: auto;
    height: auto;
}

/* ボックス: PC=2×2グリッド */
.tj-sec3__boxes {
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: 0vw;
    row-gap: 2.5vw;      /* 約29px @ 1920px */
    justify-content: center;
}

.tj-sec3__box picture {
    width: auto;
}

.tj-sec3__box picture img {
    width: auto;
    max-width: 28.3vw; /* 543px @ 1920px */
    height: auto;
}

/* ボックス下の注記 */
.tj-sec3__box-note {
    font-size: 0.833vw; /* 16px @ 1920px */
    color: #ccc;
    margin: 0;
    text-align: center;
}

.tj-sec3__box-note-link {
    color: inherit;
    text-decoration: underline;
}

/* div_2: グレード切り替えエリア */
.tj-sec3__div2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5625vw;
    width: 100%;
    padding-bottom: 2.6vw; /* 50px @ 1920px */
}

/* サムネタブ: PC=4列×2行グリッド */
.tj-sec3__tabs {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0.52vw;
    justify-content: center;
}

.tj-sec3__tab {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.15s ease;
}

.tj-sec3__tab img {
    width: 190px;
    height: auto;
    display: block;
}

/* キャラクターパネル */
.tj-sec3__chara {
    width: 100%;
    display: flex;
    justify-content: center;
}

.tj-sec3__chara-panel {
    display: none;
}

.tj-sec3__chara-panel.is-active {
    display: block;
    margin-bottom: 3.646vw; /* 70px @ 1920px */
}

.tj-sec3__chara-panel picture {
    width: auto;
}

.tj-sec3__chara-panel picture img {
    width: auto;
    max-width: 60vw; /* 1152px @ 1920px */
    height: auto;
}

/* キャラ下テキスト */
.tj-sec3__chara-text picture {
    width: auto;
}

.tj-sec3__chara-text picture img {
    width: auto;
    max-width: 65vw; /* 1248px @ 1920px */
    height: auto;
}

/* 期間ブロック */
.tj-sec3__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.04vw; /* 20px @ 1920px */
}

.tj-sec3__day-line picture {
    width: auto;
}

.tj-sec3__day-line picture img {
    width: auto;
    max-width: 33.9vw; /* 651px @ 1920px */
    height: auto;
    display: block;
}

.tj-sec3__day-line--bottom picture img {
    transform: scaleY(-1);
}

.tj-sec3__day-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.83vw; /* 16px @ 1920px */
    text-align: center;
    color: #fff;
    padding: 0 2vw;
}

.tj-sec3__day-season {
    display: flex;
    flex-direction: column;
    gap: 0.16vw; /* 3px @ 1920px */
}

.tj-sec3__day-season-title {
    font-size: 1.5625vw; /* 30px @ 1920px */
    font-weight: bold;
    color: #f5a623;
    margin: 0;
}

.tj-sec3__day-period {
    font-size: 1.25vw; /* 24px @ 1920px */
    margin: 0;
    line-height: 1.7;
}

.tj-sec3__day-note {
    font-size: 0.83vw; /* 16px @ 1920px */
    color: #ccc;
    margin: 0;
    line-height: 1.6;
}

.tj-sec3__day-outer-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.26vw;
    text-align: center;
}

/* スケジュールテキスト */
.tj-sec3__schedule {
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.78vw;
}

.tj-sec3__season-list {
    display: flex;
    flex-direction: column;
    gap: 1.04vw;
    margin: 0;
}

.tj-sec3__season {
    display: flex;
    flex-direction: column;
    gap: 0.26vw;
}

.tj-sec3__season dt {
    font-size: 0.938vw; /* 18px @ 1920px */
    font-weight: bold;
    color: #d4a84b;
}

.tj-sec3__season dd {
    font-size: 0.833vw; /* 16px @ 1920px */
    margin: 0;
    line-height: 1.7;
}

.tj-sec3__note {
    font-size: 0.729vw; /* 14px @ 1920px */
    color: #ccc;
    margin: 0;
}

/* ============================================
   SEC4: キャンペーン詳細
============================================ */
.tj-sec4 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-image: url('/resources_source/images/campaign/trade_journey/en/cont_4_pc/Background.png');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
}

.tj-sec4__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.125vw 0 4.167vw; /* 60px 80px @ 1920px */
    gap: 2.604vw; /* 50px @ 1920px */
}

/* 見出し画像 */
.tj-sec4__title picture {
    width: auto;
    margin-top: 2.6vw; /* 50px @ 1920px */
    margin-bottom: -2vw; /* 30px @ 1920px */
}

.tj-sec4__title picture img {
    width: auto;
    max-width: 90vw;
    height: auto;
}

/* 詳細ブロック群のラッパー */
.tj-sec4__blocks {
    display: flex;
    flex-direction: column;
    width: 54.89vw; /* 1200px @ 1920px */
}

/* 各ブロック */
.tj-sec4__block {
}

.tj-sec4__block:first-child {
}

/* 区切り線画像 */
.tj-sec4__block-line picture {
    width: 100%;
    margin-top: -1vw; /* 30px 上に @ 1920px */
}

.tj-sec4__block-line picture img {
    width: 100%;
    height: auto;
    display: block;
}

/* 閉じていても区切り線は表示 */
.tj-sec4__block-body.is-hidden + .tj-sec4__block,
.tj-sec4__block-body.is-hidden {
    /* body のみ非表示、lineは影響しない */
}

/* アコーディオンヘッダー */
.tj-sec4__block-head {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5625vw 0; /* 30px @ 1920px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}

.tj-sec4__block-title {
    font-size: 1.5625vw; /* 26px @ 1920px */
    font-weight: bold;
    color: #fff;
    margin-left: 1.5625vw; /* 30px @ 1920px */
    margin-top: -1.04vw; /* 20px @ 1920px */
}

/* 開閉トグル文字 */
.tj-sec4__block-toggle {
    font-size: 1.25vw; /* 24px @ 1920px */
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
    margin-right: 1.5625vw; /* 30px @ 1920px */
    margin-bottom: 0.31vw; /* 6px @ 1920px */
    width: 1.5625vw; /* 30px @ 1920px */
    text-align: center;
}

.tj-sec4__block-head[aria-expanded="false"] .tj-sec4__block-toggle::after {
    content: none;
}

/* 本文エリア */
.tj-sec4__block-body {
    display: flex;
    flex-direction: column;
    gap: 0.42vw; /* 8px @ 1920px */
    padding: 0.52vw 0 1.5625vw 1.56vw; /* 10px 0 30px 30px @ 1920px */
    overflow: hidden;
}

.tj-sec4__block-body.is-hidden {
    display: none;
}

.tj-sec4__block-body p {
    font-size: 0.938vw; /* 18px @ 1920px */
    line-height: 1.3;
    margin: 0;
    color: #e0e0e0;
}

/* 報酬サブブロック */
.tj-sec4__reward {
    display: flex;
    flex-direction: column;
    gap: 0.26vw; /* 5px @ 1920px */
    padding: 0.78vw 0; /* 15px @ 1920px */
    margin-bottom: 0.78vw;
}

.tj-sec4__reward:last-child {
    margin-bottom: 0;
}

.tj-sec4__reward-title {
    font-size: 1.25vw; /* 24px @ 1920px */
    font-weight: bold;
    color: #fff;
    margin: -0.52vw 0 0.26vw; /* 上 -10px @ 1920px */
}

/* 注意事項ラッパー */
.tj-sec4__notes-wrap {
    width: 52.08vw; /* 1000px @ 1920px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.04vw; /* 20px @ 1920px */
}

/* 注意事項見出し画像 */
.tj-sec4__notes-heading picture {
    width: auto;
    margin-bottom: 1.04vw; /* 20px @ 1920px */
}

.tj-sec4__notes-heading picture img {
    width: auto;
    max-width: 90vw;
    height: auto;
}

/* スクロールボックス */
.tj-sec4__notes-scroll {
    width: 100%;
    max-height: 25.79vw; /* 550px @ 1920px */
    overflow-y: scroll;
    border: 1px solid rgba(212, 168, 75, 0.35);
    border-radius: 4px;
    padding: 1.04vw 1.3vw; /* 20px 25px @ 1920px */
    background: rgba(0, 0, 0, 0.25);
    scrollbar-color: #d4a84b rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
}

.tj-sec4__notes-scroll::-webkit-scrollbar {
    width: 4px;
}

.tj-sec4__notes-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.tj-sec4__notes-scroll::-webkit-scrollbar-thumb {
    background: #d4a84b;
    border-radius: 2px;
}

.tj-sec4__notes-scroll p {
    font-size: 0.83vw; /* 16px @ 1920px */
    line-height: 1.8vw;
    color: #999;
    margin: 0 0 0.625vw;
}

.tj-sec4__notes-scroll p:last-child {
    margin-bottom: 0;
}

.tj-sec4__link {
    color: #d4a84b;
    text-decoration: underline;
    word-break: break-all;
}

.tj-sec4__link:hover {
    color: #e8c97a;
}

/* ============================================
   SP: max-width 768px
============================================ */
@media (max-width: 768px) {
    .tj-fv,
    .tj-border,
    .tj-sec1,
    .tj-sec2,
    .tj-sec3 {
        max-width: 100%;
    }

    /* SEC1 SP */
    .tj-sec1__text-wrap picture {
        max-width: 85%;
    }

    .tj-sec1__text-wrap picture img {
        max-width: 100%;
    }

    /* SEC2 SP */
    .tj-sec2__bg {
        background-image: url('/resources_source/images/campaign/trade_journey/en/cont_2_sp/Background.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
    }

    .tj-sec2__bg > picture {
        display: none;
    }

    .tj-sec2__inner {
        position: relative;
        height: auto;
        gap: 8vw;
        padding: 0 0 8vw;
    }

    .tj-sec2__div1 {
        gap: 4vw;
        margin-top: 18vw; /* div_1_text_01を下にずらす */
    }

    .tj-sec2__div1-text picture {
        max-width: 100%;
        margin-top: 0;
    }

    .tj-sec2__div1-btn picture img {
        max-width: 64.67vw;
        margin-top: 5vw;
    }

    .tj-sec2__div2 {
        gap: 4vw;
        margin-top: -4vw;
    }

    .tj-sec2__desc {
        font-size: 2.93vw; /* 22px @ 750px */
        max-width: 88vw;
    }

    .tj-sec2__note {
        font-size: 2.4vw; /* 18px @ 750px */
    }

    .tj-sec2__btns {
        flex-direction: column;
        gap: 0;
        margin-top: -2vw;
        margin-bottom: 10vw;
    }

    .tj-sec2__btn picture img {
        max-width: 72.4vw; /* 543px @ 750px */
        margin-bottom: -5.5vw;
    }

    /* SEC3 SP */
    .tj-sec3__bg {
        background-image: url('/resources_source/images/campaign/trade_journey/en/cont_3_sp/Background.png');
        background-size: 100% 100%;
    }

    .tj-sec3__inner {
        padding: 8vw 0 10vw;
        gap: 6vw;
    }

    .tj-sec3__div1-title {
        margin-top: 10vw;
    }

    .tj-sec3__div1 {
        gap: 4vw;
    }

    .tj-sec3__boxes {
        margin-top: 4vw;
    }

    .tj-sec3__chara-text {
        margin-top: 18vw;
        margin-bottom: 6vw;
    }

    /* ボックス: SP=1列縦積み */
    .tj-sec3__boxes {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 4vw;
    }

    .tj-sec3__box picture img {
        max-width: 72.4vw; /* 543px @ 750px */
        margin-bottom: -6vw;
    }

    .tj-sec3__box-note {
        font-size: 2.93vw; /* 22px @ 750px */
        margin-top: 4vw;
    }

    .tj-sec3__div2 {
        gap: 4vw;
    }

    /* タブ: SP=flexで折り返し */
    .tj-sec3__tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: center;
        gap: 1.5vw;
    }

    .tj-sec3__tab img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .tj-sec3__chara-panel picture img {
        max-width: 86.67vw; /* 650px @ 750px */
        margin-top: 4vw;
    }

    .tj-sec3__chara-text picture img {
        max-width: 92.13vw; /* 691px @ 750px */
    }

    .tj-sec3__day-line picture img {
        max-width: 95.33vw; /* 715px @ 750px */
    }

    .tj-sec3__day {
        margin-top: 5vw;
    }

    .tj-sec3__day-text {
        gap: 3.2vw;
        padding: 0 4vw;
    }

    .tj-sec3__day-season-title {
        font-size: 4.0vw; /* 30px @ 750px */
    }

    .tj-sec3__day-period {
        font-size: 2.6vw; /* 20px @ 750px */
    }

    .tj-sec3__day-note {
        font-size: 2.8vw; /* 21px @ 750px */
    }

    .tj-sec3__day-outer-note {
        gap: 1.5vw;
    }

    .tj-sec3__season dt {
        font-size: 3.73vw; /* 28px @ 750px */
    }

    .tj-sec3__season dd {
        font-size: 3.2vw; /* 24px @ 750px */
    }

    .tj-sec3__note {
        font-size: 2.93vw; /* 22px @ 750px */
    }

    .tj-sec3__schedule {
        gap: 3vw;
    }

    .tj-sec3__season-list {
        gap: 4vw;
    }

    /* SEC4 SP */
    .tj-sec4 {
        background-image: url('/resources_source/images/campaign/trade_journey/en/cont_4_sp/Background.png');
    }

    .tj-sec4__inner {
        padding: 8vw 0 10vw;
        gap: 6vw;
    }

    .tj-sec4__title {
        margin-top: 7vw;
    }

    .tj-sec4__title picture img {
        max-width: 70vw;
    }

    .tj-sec4__notes-heading picture img {
        max-width: 50vw;
    }

    .tj-sec4__blocks {
        width: 88vw;
    }

    .tj-sec4__block-head {
        padding: 4vw 0;
    }

    .tj-sec4__block-title {
        font-size: 4.27vw; /* 32px @ 750px */
    }

    .tj-sec4__block-toggle {
        font-size: 4.8vw; /* 36px @ 750px */
        width: 6vw;
    }

    .tj-sec4__block-body {
        gap: 2.5vw;
        padding: 1.5vw 0 4vw;
    }

    .tj-sec4__block-body p {
        font-size: 3.2vw; /* 24px @ 750px */
    }

    .tj-sec4__reward {
        padding: 2.5vw 0;
        margin-bottom: 2.5vw;
    }

    .tj-sec4__reward-title {
        font-size: 3.73vw; /* 28px @ 750px */
    }

    .tj-sec4__notes-wrap {
        width: 88vw;
        gap: 3vw;
    }

    .tj-sec4__notes-scroll {
        max-height: 80vw;
        padding: 3.5vw 4vw;
    }

    .tj-sec4__notes-scroll p {
        font-size: 2.93vw; /* 22px @ 750px */
        line-height: 2.0;
        color: #999;
        margin-bottom: 3vw;
    }
}

/* ============================================
   フロートボタン
============================================ */
.tj-float-btns {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 3.125vw; /* 60px @ 1920px */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* 口座開設・マイページ：中央グループ */
.tj-float-btns__main {
    display: flex;
    align-items: center;
    gap: 1.56vw; /* 30px @ 1920px */
    pointer-events: auto;
}

.tj-float-btn--account,
.tj-float-btn--mypage {
    display: block;
    width: 20vw; /* 384px @ 1920px */
    transition: transform 0.3s ease;
}

.tj-float-btn--account img,
.tj-float-btn--mypage img {
    width: 100%;
    height: auto;
}

.tj-float-btn--account:hover,
.tj-float-btn--mypage:hover {
    transform: scale(1.05);
}

/* TOPボタン：右端に絶対配置 */
.tj-float-btn--top {
    position: absolute;
    right: 7.2vw; /* 140px @ 1920px */
    display: block;
    width: 6vw; /* 115px @ 1920px */
    pointer-events: auto;
    transition: transform 0.3s ease;
}

.tj-float-btn--top img {
    width: 100%;
    height: auto;
}

.tj-float-btn--top:hover {
    transform: scale(1.05);
}

/* ============================================
   SP: max-width 768px
============================================ */
@media (max-width: 768px) {
    .tj-float-btns {
        bottom: 4vw;
    }

    .tj-float-btns__main {
        gap: 0vw;
    }

    .tj-float-btn--account,
    .tj-float-btn--mypage {
        width: 42vw; /* 315px @ 750px */
    }

    .tj-float-btn--top {
        right: 2.5vw;
        bottom: 34vw;
        width: 17vw; /* 128px @ 750px */
    }
}