@charset "utf-8";

/* ===== style.css ===== */
/* -- font -- */
/* Zen Kaku Gothic New */
/* Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');

/* -- responsive display（900px 以下を SP） -- */
.sp-only {
    display: none !important;
}
@media screen and ( max-width: 900px ) {
    .pc-only {
        display: none !important;
    }
    .sp-only {
        display: revert !important;
    }
}

/* -- body -- */
body {
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 2;
    color: #000000;
    background: #E6E6E5;
}
@media screen and ( max-width: 900px ) {
    body {
        font-size: 14px;
        line-height: 1.857;
    }
}

.wrapper .mv {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
/* MV 見出し：カンプ 1366px 時 右 38px / 下 34px。画面幅に比例（100vw × 値 / 1366） */
.wrapper .mv h1 {
    position: absolute;
    right: calc(100vw * 38 / 1366);
    bottom: calc(100vw * 34 / 1366);
    z-index: 1;
    margin: 0;
    font-weight: inherit;
    line-height: 1.2;
    text-align: right;
}
.wrapper .mv h1 img {
    display: inline-block;
    height: auto;
    /* 1366px を基準にブラウザ幅へ追従 */
    width: clamp(140px, calc(100vw * 260 / 1366), 340px);
    max-width: none;
    vertical-align: bottom;
}
.wrapper .mv h1 span {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    display: inline-block;
    margin-top: clamp(8px, calc(100vw * 15 / 1366), 16px);
    font-size: clamp(16px, calc(100vw * 27 / 1366), 28px);
    font-weight: 700;
    color: #105A2D;
    letter-spacing: 0;
    line-height: 1;
}
/* MV リード文：カンプ 1366px 時 左 51px / 上 46px。画面幅に比例 */
.wrapper .mv .mv_text {
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 600;
    /* 1366px を基準にブラウザ幅へ追従 */
    font-size: clamp(14px, calc(100vw * 25 / 1366), 26px);
    letter-spacing: 0;
    line-height: 1.76;
    color: #105A2D;
    position: absolute;
    left: calc(100vw * 51 / 1366);
    top: calc(100vw * 46 / 1366);
    z-index: 1;
    margin: 0;
}
/* SP：100dvh は UI 収納で高さが増え MV が伸びる。svh（小さい方のビューポート）で初回表示の高さに固定 */
@media screen and ( max-width: 900px ) {
    .wrapper .mv {
        height: 100vh;
        height: 100svh;
    }
    /* MV h1：左右中央・下から 55px */
    .wrapper .mv h1 {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 50px;
        text-align: center;
    }
    .wrapper .mv h1 img {
        display: inline-block;
        height: auto;
        /* SP は拡大追従なし（元の挙動） */
        width: auto;
        max-width: 100%;
        vertical-align: bottom;
    }
    .wrapper .mv h1 span {
        margin-top: 11px;
        font-weight: 600;
        font-size: 19px;
        line-height: 1;
    }
    .wrapper .mv .mv_text {
        /* SP は拡大追従なし（元の挙動） */
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.83;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
        z-index: 1;
        text-align: center;
        margin: 0;
        width: 62.4%;
    }
}
/* 背景用のみ（h1 内ロゴは対象外） */
.wrapper .mv > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: relative;
    z-index: 0;
}
.wrapper .lead {
    width: 100%;
    background-color: #005221;
    padding: 115px 0;
}
.wrapper .lead .lead_text {
    font-family: "FOT-Cezanne ProN", "FOT-セザンヌ ProN", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.75;
    color: #FFF09D;
    text-align: center;
}
@media screen and ( max-width: 900px ) {
    .wrapper .lead {
        padding: 103px 0 105px;
    }
    .wrapper .lead .lead_text {
        font-size: 14px;
        line-height: 1.71;
        text-align: left;
        width: 82.4%;
        max-width: 310px;
        margin: 0 auto;
    }
}
.wrapper .item_pin_section {
    position: relative;
}
/* item_img01：基準ビュー 1366×650。幅・高さのきつい方に合わせて表示幅をスケール（400px 相当） */
.wrapper .item_pin_section .main_img img {
    width: min(calc(100vw * 400 / 1366), calc(100vh * 400 / 650));
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.wrapper .item_container {
    width: 100%;
}
.wrapper .item_01 {
    width: 100%;
    display: flex;
    background-color: #F4E9D2;
    height: 100vh;
    align-items: center;
    overflow: hidden;
}
/* PC（901px〜）：item_01 横並び＝カンプ1366px基準で 100vw 比例
   credit(100)｜border(1)｜間(92)｜mainimg(400)｜間(130)｜point(530)｜右余白(114) */
.wrapper .item_01_body {
    display: contents;
}
@media screen and ( min-width: 901px ) {
    .wrapper .item_pin_section .item_01 {
        align-items: stretch;
    }
    /* ボーダー＋価格はグループ固定の余白でまとめ、ブロックごとビュー下端から 40px（credit_border に margin-top:auto） */
    .wrapper .item_pin_section .item_01 > .item_credit {
        /* 1366px 以上ではバー幅を伸ばさず（100px 上限） */
        width: min(100px, calc(100vw * 100 / 1366));
        flex: 0 0 min(100px, calc(100vw * 100 / 1366));
        flex-shrink: 0;
        max-width: none;
        box-sizing: border-box;
        height: 100%;
        justify-content: flex-start;
        /* 上 50px＠ビュー高650（1366×650 と同じ min(vw,vh) スケールで可変） */
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .wrapper .item_pin_section .item_01 > .item_credit .credit_border {
        margin-top: auto;
        margin-bottom: 0;
    }
    .wrapper .item_01 > .item_boreder {
        flex: 0 0 1px;
        flex-shrink: 0;
        width: 1px;
    }
    .wrapper .item_01 > .item_01_body {
        display: flex;
        flex-direction: row;
        flex: 0 0 auto;
        align-items: center;
        align-self: stretch;
        min-width: 0;
        min-height: 0;
    }
    /* ボーダー〜メイン画像の間 92px＠1366 */
    .wrapper .item_01 > .item_01_body::before {
        content: '';
        flex: 0 0 calc(100vw * 92 / 1366);
        width: calc(100vw * 92 / 1366);
        min-width: 0;
        box-sizing: border-box;
    }
    /* ポイント列の右余白 114px＠1366 */
    .wrapper .item_01 > .item_01_body::after {
        content: '';
        flex: 0 0 calc(100vw * 114 / 1366);
        width: calc(100vw * 114 / 1366);
        min-width: 0;
        box-sizing: border-box;
    }
    .wrapper .item_01 > .item_01_body > .item_mainimg {
        width: calc(100vw * 400 / 1366);
        flex: 0 0 calc(100vw * 400 / 1366);
        flex-shrink: 0;
        min-width: 0;
        box-sizing: border-box;
        /* ビューポート高に対してブロック内で画像＋リードを上下中央 */
        align-self: stretch;
        justify-content: center;
    }
    .wrapper .item_01 > .item_01_body > .item_mainimg .main_img {
        margin-left: auto;
        margin-right: auto;
    }
    .wrapper .item_01 > .item_01_body > .item_width_02 {
        width: calc(100vw * 130 / 1366);
        flex: 0 0 calc(100vw * 130 / 1366);
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .wrapper .item_01 > .item_01_body > .item_point {
        flex: 0 0 calc(100vw * 530 / 1366);
        width: calc(100vw * 530 / 1366);
        max-width: calc(100vw * 530 / 1366);
        min-width: 0;
        align-self: stretch;
        min-height: 0;
        box-sizing: border-box;
    }
    /* メイン画像も列幅と同じ 1366 基準の vw（item_01 内のみ） */
    .wrapper .item_pin_section .item_01 .main_img img {
        width: calc(100vw * 400 / 1366);
        max-width: 100%;
    }
    /* item_point：画像〜上下ボーダーは同じ余白（1366×650 基準で min(vw,vh)）。テキスト列と画像の間 50px＠1366 */
    .wrapper .item_pin_section .item_point .point_container {
        box-sizing: border-box;
        --point-vpad: min(calc(100vw * 74 / 1366), calc(100vh * 74 / 650));
        padding: var(--point-vpad) 0;
        justify-content: flex-start;
        align-items: center;
        gap: 0 calc(100vw * 50 / 1366);
    }
    .wrapper .item_pin_section .item_point .point_item_text {
        flex: 0 1 calc((100% - (100vw * 50 / 1366)) * 44.9 / 94.4);
        width: calc((100% - (100vw * 50 / 1366)) * 44.9 / 94.4);
        max-width: calc((100% - (100vw * 50 / 1366)) * 44.9 / 94.4);
        min-width: 0;
    }
    .wrapper .item_pin_section .item_point .point_item_img {
        flex: 0 0 calc((100% - (100vw * 50 / 1366)) * 49.5 / 94.4);
        width: calc((100% - (100vw * 50 / 1366)) * 49.5 / 94.4);
        max-width: calc((100% - (100vw * 50 / 1366)) * 49.5 / 94.4);
        min-width: 0;
    }
}
/* クレジット〜メイン画像周り：基準 1366×650 のデザインを min(100vw/1366, 100vh/650) で追従 */
.wrapper .item_credit {
    width: 7.32%;
    max-width: min(calc(100vw * 100 / 1366), calc(100vh * 100 / 650));
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #005221;
    font-weight: 600;
    padding-top: 7%;
}
.wrapper .credit_title {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: min(calc(100vw * 9 / 1366), calc(100vh * 9 / 650));
    letter-spacing: 0.04em;
    line-height: 1.11;
    text-align: center;
}
.wrapper .credit_num {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: min(calc(100vw * 22 / 1366), calc(100vh * 22 / 650));
    letter-spacing: 0;
    line-height: 1;
    margin-top: min(calc(100vw * 9 / 1366), calc(100vh * 9 / 650));
    text-align: center;
}
.wrapper .credit_name {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: min(calc(100vw * 29 / 1366), calc(100vh * 29 / 650));
    letter-spacing: 0.04em;
    line-height: 1;
    margin-top: min(calc(100vw * 20 / 1366), calc(100vh * 20 / 650));
    writing-mode: vertical-rl;
}
.wrapper .credit_border {
    width: min(calc(100vw * 44 / 1366), calc(100vh * 44 / 650));
    height: 1px;
    margin: min(calc(100vw * 78 / 1366), calc(100vh * 78 / 650)) auto 0;
    background-color: #005221;
}
.wrapper .credit_price {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: min(calc(100vw * 22 / 1366), calc(100vh * 22 / 650));
    letter-spacing: 0.04em;
    line-height: 1;
    writing-mode: vertical-rl;
    margin-top: min(calc(100vw * 24 / 1366), calc(100vh * 24 / 650));
    margin-left: -8px;
}
.wrapper .credit_price span {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: min(calc(100vw * 12 / 1366), calc(100vh * 12 / 650));
    letter-spacing: 0;
    line-height: 1;
    /* 縦書きでは margin-top が横方向に効き列が分かれる。縦の一行に揃える */
    margin-top: 0;
    padding-inline-start: min(calc(100vw * 8.5 / 1366), calc(100vh * 8.5 / 650));
}
.wrapper .credit_price a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    writing-mode: inherit;
    /* ホバーで線色だけ変え、常に同じ枠幅で中央揃えがずれないようにする */
    border-block-end: 2px solid transparent;
    box-sizing: border-box;
}
/* 縦書き(vertical-rl)では text-decoration の下線が列の反対側になりがちなので、
   ブロック終端側＝物理左に border で一本線（価格＋span 全体の外枠に沿う） */
.wrapper .credit_price a:hover {
    text-decoration: none;
    border-block-end-color: color-mix(in srgb, currentColor 50%, transparent);
}

@media screen and ( max-width: 900px ) {
    .wrapper .item_pin_section {
    }
    /* item_img01：基準ビュー 1366×650。幅・高さのきつい方に合わせて表示幅をスケール（400px 相当） */
    .wrapper .item_pin_section .main_img img {
        width: 100%;
        max-width: unset;
    }
    .wrapper .item_container {
    }
    .wrapper .item_01 {
        width: 100%;
        display: flex;
        height: 100vh;
        align-items: center;
        overflow: hidden;
    }
    /* クレジット〜メイン画像周り：基準 1366×650 のデザインを min(100vw/1366, 100vh/650) で追従 */
    .wrapper .item_credit {
        width: 7.32%;
        max-width: min(calc(100vw * 100 / 1366), calc(100vh * 100 / 650));
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #005221;
        font-weight: bold;
    }
    .wrapper .credit_title {
        font-size: 8px;
        letter-spacing: 0.02em;
        line-height: 1.12;
    }
    .wrapper .credit_num {
        font-size: 19px;
        letter-spacing: 0;
        line-height: 1;
        margin-top: 9px;
        text-align: center;
    }
    .wrapper .credit_name {
        font-size: 25px;
        margin-top: 20px;
    }
    .wrapper .credit_border {
        width: 38px;
        height: 1px;
        margin: 167px 0 0;
    }
    .wrapper .credit_price {
        font-size: 20px;
        margin-top: 25px;
    }
    .wrapper .credit_price span {
        font-size: 12px;
        padding-inline-start: 9.5px;
    }
    .wrapper .credit_price a {
        color: inherit;
        text-decoration: none;
        display: inline-block;
        white-space: nowrap;
        writing-mode: inherit;
        /* ホバーで線色だけ変え、常に同じ枠幅で中央揃えがずれないようにする */
        border-block-end: 2px solid transparent;
        box-sizing: border-box;
    }
    /* 縦書き(vertical-rl)では text-decoration の下線が列の反対側になりがちなので、
       ブロック終端側＝物理左に border で一本線（価格＋span 全体の外枠に沿う） */
    .wrapper .credit_price a:hover {
        text-decoration: none;
        border-block-end-color: color-mix(in srgb, currentColor 50%, transparent);
    }
}

/* item_pin：SP でも左に item_credit（PC同様の縦帯）、右の item_01_body が縦に伸びてスクロールで流れる */
@media screen and ( max-width: 900px ) {
    .wrapper .item_pin_section .item_01 {
        flex-direction: row;
        align-items: stretch;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .wrapper .item_pin_section .item_01 > .item_credit {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100dvh;
        max-height: 100dvh;
        box-sizing: border-box;
        width: 16%;
        min-width: 60px;
        max-width: min(calc(100vw * 100 / 1366), calc(100vh * 100 / 650));
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* SP：価格ブロックまわり 上30px / 下30px 固定 */
        padding: 30px 0;
    }
    .wrapper .item_pin_section .item_01 > .item_credit .credit_border {
        margin-top: auto;
        margin-bottom: 0;
    }
    .wrapper .item_pin_section .item_01 > .item_boreder {
        width: 1px;
        flex-shrink: 0;
        align-self: stretch;
        height: auto;
        min-height: 100dvh;
    }
    .wrapper .item_pin_section .item_01 > .item_01_body::before {
        display: none;
    }
    .wrapper .item_pin_section .item_01 > .item_01_body::after {
        display: none;
    }
    .wrapper .item_pin_section .item_01 > .item_width_02 {
        display: none;
    }
    .wrapper .item_pin_section .item_01_body {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        width: auto;
        gap: 41px;
    }
    .wrapper .item_pin_section .item_01 > .item_01_body > .item_mainimg {
        width: 100%;
        max-width: 100%;
    }
    .wrapper .item_pin_section .item_01 > .item_01_body > .item_point {
        width: 100%;
        flex: 1 1 auto;
        align-self: stretch;
    }
    .wrapper .item_pin_section .item_01 > .item_width {
        display: none;
    }
}

.wrapper .item_boreder {
    width: 1px;
    height: 100vh;
    background-color: #005221;
}
.wrapper .item_width_01 {
    width: 6.7%;
}
.wrapper .item_width_02 {
    width: 9.5%;
}
.wrapper .item_mainimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -8px 0 0 0;
    min-height: 0;
    box-sizing: border-box;
}
.wrapper .main_img {
    width: 100%;
}
.wrapper .main_img.splide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.wrapper .main_img img {
    width: 100%;
    display: block;
}
@media screen and ( max-width: 900px ) {
    .wrapper .item_boreder {
        width: 1px;
        height: 100vh;
        background-color: #005221;
    }
    .wrapper .item_mainimg {
        width: 45.53%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .wrapper .main_img {
        max-width: 94%;
        margin: 12px auto 0;
        width: 100%;
    }
    .wrapper .main_img.splide {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .wrapper .main_img img {
        width: 100%;
        display: block;
    }
}
/* Splide：商品メイン画像＋画像下のドット（3点リーダー風） */
.wrapper .main_img.splide .splide__track {
    overflow: hidden;
    border-radius: 0;
}
.wrapper .main_img.splide .splide__list {
    margin: 0;
    padding: 0;
}
.wrapper .main_img.splide .splide__slide {
    list-style: none;
}
.wrapper .main_img.splide .splide__pagination {
    position: static;
    align-self: center;
    width: fit-content;
    max-width: 100%;
    margin: min(calc(100vw * 36 / 1366), calc(100vh * 36 / 650)) auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: min(calc(100vw * 13 / 1366), calc(100vh * 13 / 650));
    background: #ffffff;
    border-radius: 9999px;
    box-sizing: border-box;
}
.wrapper .main_img.splide .splide__pagination li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2px;
    min-height: min(calc(100vw * 25 / 1366), calc(100vh * 25 / 650));
}
.wrapper .main_img.splide .splide__pagination__page {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    width: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    height: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    min-width: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    max-width: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    min-height: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    max-height: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    opacity: 1;
    /* Splide テーマの scale でドットが拡大しないようにする */
    transform: none;
    flex: 0 0 min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    line-height: 0;
    font-size: 0;
}
.wrapper .main_img.splide .splide__pagination li:nth-child(1) .splide__pagination__page {
    background: #E0342E;
}
.wrapper .main_img.splide .splide__pagination li:nth-child(2) .splide__pagination__page {
    background: #BEA14D;
}
.wrapper .main_img.splide .splide__pagination li:nth-child(3) .splide__pagination__page {
    background: #1D1D1D;
}
/* 選択中：外側にもう一重の丸（リング） */
.wrapper .main_img.splide .splide__pagination__page.is-active {
    z-index: 1;
    transform: none;
    width: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    height: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    min-width: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    max-width: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    min-height: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
    max-height: min(calc(100vw * 8 / 1366), calc(100vh * 8 / 650));
}
.wrapper .main_img.splide .splide__pagination__page.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(calc(100vw * 16 / 1366), calc(100vh * 16 / 650));
    height: min(calc(100vw * 16 / 1366), calc(100vh * 16 / 650));
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    border: min(calc(100vw * 2 / 1366), calc(100vh * 2 / 650)) solid #5C5C5C;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
}
.wrapper .item_mainimg .item_lead {
    font-family: "FOT-Cezanne ProN", "FOT-セザンヌ ProN", sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.6;
    max-width: 64%;
    margin-top: 28px;
    color: #005221;
}
/* 1つ目（item_pin 内）のみ幅広 */
.wrapper .item_pin_section .item_mainimg .item_lead {
    max-width: 94%;
}

/* Splide ドット（SP）：PC 用ルールの後に置かないと上書きされない。画像下 35px・白ピルは padding で高さ調整 */
@media screen and ( max-width: 900px ) {
    .wrapper .main_img.splide .splide__pagination {
        margin: 35px auto 0 !important;
        gap: 16px !important;
        padding: 9px 15px !important;
        box-sizing: border-box !important;
    }
    .wrapper .main_img.splide .splide__pagination li {
        min-height: 10px !important;
    }
    .wrapper .main_img.splide .splide__pagination__page {
        width: 10px !important;
        height: 10px !important;
        min-width: 10px !important;
        max-width: 10px !important;
        min-height: 10px !important;
        max-height: 10px !important;
        flex: 0 0 10px !important;
    }
    .wrapper .main_img.splide .splide__pagination__page.is-active {
        width: 10px !important;
        height: 10px !important;
        min-width: 10px !important;
        max-width: 10px !important;
        min-height: 10px !important;
        max-height: 10px !important;
    }
    .wrapper .main_img.splide .splide__pagination__page.is-active::after {
        width: 15px !important;
        height: 15px !important;
        border: 1px solid #5C5C5C !important;
    }
    .wrapper .item_lead {
        max-width: 56%;
        margin-top: 50px;
    }
    .wrapper .item_pin_section .item_mainimg .item_lead {
        max-width: 72%;
        margin-top: 46px;
        line-height: 1.666;
    }
    .wrapper .item_mainimg .item_lead {
        max-width: 72%;
    }
}
.wrapper .item_point {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wrapper .item_point_viewport {
    overflow: visible;
    width: 100%;
    position: relative;
}
.wrapper .point_panels {
    display: flex;
    flex-direction: column;
    will-change: transform;
}
.wrapper .point_panel {
    flex-shrink: 0;
    box-sizing: border-box;
    border-top: 1px solid #005221;
    border-bottom: 1px solid #005221;
}
.wrapper .point_panel + .point_panel {
    margin-top: -1px;
}
.wrapper .point_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 55px 0;
}
.wrapper .point_item_text {
    color: #005221;
    width: 44.9%;
}
.wrapper .point_subtitle {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1;
}
.wrapper .point_title {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-top: 11px;
}
.wrapper .point_lead {
    font-family: "FOT-Cezanne ProN", "FOT-セザンヌ ProN", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.57;
    margin-top: 20px;
}
.wrapper .point_item_img {
    width: 49.5%;
}
.wrapper .point_item_img img {
    width: 100%;
}
.wrapper .item_width {
    width: 8.3%;
}
@media screen and ( max-width: 900px ) {
    .wrapper .item_point {
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .wrapper .item_point_viewport {
        overflow: visible;
        width: 73%;
        margin: 0 auto 60px;
        position: relative;
    }
    .wrapper .point_panels {
        display: flex;
        flex-direction: column;
        will-change: transform;
    }
    .wrapper .point_panel {
        flex-shrink: 0;
        box-sizing: border-box;
        border-top: 1px solid #005221;
        border-bottom: 1px solid #005221;
    }
    .wrapper .point_panel + .point_panel {
        margin-top: -1px;
    }
    .wrapper .item_point .point_panel:last-child {
        border-bottom: none;
    }
    .wrapper .point_container {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        /* 上下同じ余白（PC と同趣旨で画像〜ボーダー感を揃える） */
        padding: 40px 0;
    }
    .wrapper .point_item_text {
        width: 100%;
        margin-top: 25px;
        margin-left: 5px;
    }
    .wrapper .point_subtitle {
        font-size: 10px;
    }
    .wrapper .point_title {
        font-size: 26px;
        margin-top: 8px;
    }
    .wrapper .point_lead {
        font-size: 13px;
        line-height: 1.46;
        margin-top: 15px;
    }
    .wrapper .point_item_img {
        width: 100%;
    }
    .wrapper .point_item_img img {
        width: 100%;
    }
    .wrapper .item_width {
        width: 8.3%;
    }
}

/* 2商品横並び（ポイントなし・全画面高） */
.wrapper .item_w_container {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    background-color: #EDE8CC;
    overflow: hidden;
    box-sizing: border-box;
    border-top: 1px solid #005221;
}
.wrapper .w_container_item {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    box-sizing: border-box;
}
.wrapper .item_w_01 {
    background-color: #E2DED7;
}
.wrapper .item_w_02 {
    background-color: #DBEBE9;
}
/* item_w_01 / item_w_02：Splide ページネーションのドット色 */
.wrapper .item_w_01 .main_img.splide .splide__pagination li:nth-child(1) .splide__pagination__page {
    background: #00E18D;
}
.wrapper .item_w_01 .main_img.splide .splide__pagination li:nth-child(2) .splide__pagination__page {
    background: #6559BA;
}
.wrapper .item_w_01 .main_img.splide .splide__pagination li:nth-child(3) .splide__pagination__page {
    background: #866842;
}
.wrapper .item_w_01 .main_img.splide .splide__pagination li:nth-child(4) .splide__pagination__page {
    background: #293A71;
}
.wrapper .item_w_01 .main_img.splide .splide__pagination li:nth-child(5) .splide__pagination__page {
    background: #1D1D1D;
}
.wrapper .item_w_02 .main_img.splide .splide__pagination li:nth-child(1) .splide__pagination__page {
    background: #5D71DE;
}
.wrapper .item_w_02 .main_img.splide .splide__pagination li:nth-child(2) .splide__pagination__page {
    background: #75F09B;
}
.wrapper .item_w_02 .main_img.splide .splide__pagination li:nth-child(3) .splide__pagination__page {
    background: #1D1D1D;
}
.wrapper .w_container_item + .w_container_item {
    border-left: 1px solid #005221;
}
/* height:100% は親が intrinsic 高さのとき無効になり stretch しないため指定しない。商品01と同じ可変上余白＋下30px */
.wrapper .item_w_container .item_credit {
    width: auto;
    /* item01 の左バー（100px@1366）と同じ幅に揃える */
    /* 1366px 以上ではバー幅を伸ばさず（100px 上限） */
    width: min(100px, calc(100vw * 100 / 1366));
    flex: 0 0 min(100px, calc(100vw * 100 / 1366));
    align-self: stretch;
    min-height: 0;
    justify-content: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
    box-sizing: border-box;
}
/* item01 と同様：ボーダー〜価格をグループでビュー下端から 30px */
.wrapper .item_w_container .item_credit .credit_border {
    margin-top: auto;
    margin-bottom: 0;
}
/* 空要素 1px でも flex-shrink で幅 0 になりやすいので縮めない */
.wrapper .item_w_container .item_boreder {
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 1px;
    align-self: stretch;
    height: auto;
}
.wrapper .item_w_container .item_mainimg {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
.wrapper .item_w_container .main_img {
    max-width: 100%;
    width: 100%;
}
/*
 * item_img02 / 03：1366px幅のとき「片セクション（50%＝683px）」に対して画像400px
 * → 400 ÷ 683 ≈ 58.564%（半分幅基準）。viewport 連動は 100vw×400/1366 と同値。
 */
.wrapper .item_w_container .main_img img {
    width: min(calc(100vw * 400 / 1366), calc(100vh * 400 / 650));
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
@media screen and ( max-width: 900px ) {
    .wrapper .item_w_container .main_img img {
        width: 95.2%;
        margin-top: -17px;
        max-width: 100%;
    }
    
    .wrapper .item_w_container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    .wrapper .w_container_item {
        flex: 1 1 auto;
        min-height: min(100vh, 720px);
        height: auto;
        border-left: 0;
        align-items: stretch;
    }
    .wrapper .w_container_item + .w_container_item {
        border-left: 0;
        border-top: 1px solid #005221;
    }
    .wrapper .item_w_container .item_credit {
        flex: 0 0 16%;
        max-width: 60px;
        align-self: stretch;
        min-height: 0;
        justify-content: flex-start;
        /* SP：価格ブロックまわり 上30px / 下30px 固定（親は align-items:stretch で列全高） */
        padding: 30px 0;
        box-sizing: border-box;
    }
    /*
     * credit_border：SP 共通 .credit_border（margin:167px 等）より特異性で上書き。
     * 背景 1px は端末で潰れやすいので border-top で確実に表示。
     * margin-top:auto でライン〜価格を下端（padding-bottom 30px）から固定。
     */
    .wrapper .item_w_container .item_credit .credit_border {
        display: block;
        width: 38px;
        height: 0;
        margin-top: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        padding: 0;
        border: 0;
        border-top: 1px solid #005221;
        background: none;
        flex-shrink: 0;
        align-self: center;
        box-sizing: border-box;
    }
}

/* カットイン：ロゴ無限スクロール（2列同一幅・translate -50% で継ぎ目なし） */
.wrapper .cutin_slide {
    height: 160px;
    background-color: #005221;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.wrapper .cutin_slide_inner {
    width: 100%;
    overflow: hidden;
}
.wrapper .cutin_slide_track {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    animation: cutin_slide_marquee 32s linear infinite;
}
.wrapper .cutin_slide_container {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-items: center;
    gap: 60px;
    margin: 0;
    padding: 0 60px 0 0;
    list-style: none;
    box-sizing: border-box;
}
.wrapper .cutin_slide_container li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}
.wrapper .cutin_slide_container img {
    display: block;
    width: 180px;
    height: auto;
    max-height: 120px;
    object-fit: contain;
}
@keyframes cutin_slide_marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wrapper .cutin_slide_track {
        animation: none;
    }
}
@media screen and ( max-width: 900px ) {
    .wrapper .cutin_slide {
        height: 100px;
    }
    .wrapper .cutin_slide_container {
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        align-items: center;
        gap: 32px;
        margin: 0;
        padding: 0 32px 0 0;
        list-style: none;
        box-sizing: border-box;
    }
    .wrapper .cutin_slide_container li {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }
    .wrapper .cutin_slide_container img {
        display: block;
        width: 107px;
        height: auto;
        max-height: 120px;
        object-fit: contain;
    }
    @keyframes cutin_slide_marquee {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .wrapper .cutin_slide_track {
            animation: none;
        }
    }
}

/* インタビュー：1366px を 100% 基準 → 幅は calc(100vw * 設計px / 1366)。親より広がらないよう min(100%, …) */
.wrapper .interview {
    position: relative;
    box-sizing: border-box;
    width: min(100%, calc(100vw * 1166 / 1366));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #E8E8E8;
    color: #005221;
    border-left: 1px solid #005221;
    border-right: 1px solid #005221;
    font-family: "FOT-Cezanne ProN", "FOT-セザンヌ ProN", sans-serif;
    font-weight: 500;
}
.wrapper .interview_pin {
    width: 100%;
}
.wrapper .interview_stage {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* 1366 幅時の記事幅 1166px を超えない。max 1366 だと広ビューでステージだけ広がり % 配置がズレる */
    max-width: min(1166px, 100%);
    margin-left: auto;
    margin-right: auto;
    /* 下側カード分の余白（650 高さ時の最大 bottom 付近に比例） */
    min-height: calc(100vh * 520 / 650);
}

/* 1366 を超える幅では vh だけ追従するとステージが縦に伸びすぎるため、参照高さに上限 */
@media screen and ( min-width: 1367px ) {
    .wrapper .interview_stage {
        min-height: calc(min(100vh, 100dvh, 820px) * 520 / 650);
    }
}

.wrapper .interview_stage img {
    position: absolute;
    display: block;
    height: auto;
    opacity: 0;
    transition: none;
}

.wrapper .interview_stage img.is-visible {
    opacity: 1;
}
@media screen and ( max-width: 900px ) {
    .wrapper .interview {
        width: 92%;
    }
    .wrapper .interview_pin {
        width: 100%;
        padding-top: 49px;
    }
}

/* 1201px 以上：1366 設計の絶対配置（タブレット幅ではステージが狭く 2 左・1 右に崩れるためここだけ） */
@media screen and ( min-width: 1201px ) {
    /* 01：最大幅 550px。02：500px。left/top は 1366 設計比。ステージ幅は max 1166px のため広画面でも同じ重なり */
    .wrapper .interview_stage img:nth-child(1) {
        z-index: 1;
        width: 550px;
        left: calc(100% * 172 / 1366);
        top: calc(100vh * 132 / 650);
    }
    .wrapper .interview_stage img:nth-child(2) {
        z-index: 2;
        width: 512px;
        left: calc(100% * 197 / 1366);
        top: calc(100vh * 164 / 650);
    }
    /* 03：最大幅 412px */
    .wrapper .interview_stage img:nth-child(3) {
        z-index: 3;
        width: 412px;
        left: calc(100% * 725 / 1366);
        top: calc(100vh * 175 / 650);
    }
}

/*
 * 1200px 以下（タブレット〜SP）：ステージ幅を 375 相当に固定して中央配置。
 * vw はビューポート基準でステージが狭いとズレるため、位置は親（ステージ）に対する % で 375 の重なり感を維持。
 */
@media screen and ( max-width: 1200px ) {
    .wrapper .interview_stage {
        width: min(375px, 92vw);
        margin-left: auto;
        margin-right: auto;
        min-height: min(92vw, 400px);
        max-width: 100%;
    }
    .wrapper .interview_stage img:nth-child(1) {
        z-index: 1;
        width: min(86%, 320px);
        left: -2%;
        top: 0;
    }
    .wrapper .interview_stage img:nth-child(2) {
        z-index: 2;
        width: min(86%, 300px);
        left: 1%;
        top: 19px;
    }
    /* PC 3枚目 / SP 4枚目：どちらか一方のみ表示（pc-only / sp-only） */
    .wrapper .interview_stage img:nth-child(3),
    .wrapper .interview_stage img:nth-child(4) {
        z-index: 3;
        width: min(86%, 300px);
        left: auto;
        right: 2.5%;
        top: auto;
        bottom: -8%;
    }
}

/* SP：3枚カットインが親で欠けないよう。max-width:1200px のステージ指定より後で上書き */
@media screen and ( max-width: 900px ) {
    .wrapper .interview_pin {
        overflow: visible;
    }
    .wrapper .interview_stage {
        overflow: visible;
        padding-top: 14px;
        box-sizing: border-box;
        min-height: calc(min(92vw, 400px) + 14px);
    }
}

.wrapper .interview_lead {
    margin: 72px 0 114px;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.75;
    text-align: center;
}
.wrapper .interview_border {
    width: min(100%, calc(100vw * 800 / 1366));
    border-top: 1px solid #005221;
    margin: 0 auto;
}
.wrapper .interview_border h3 {
    font-size: 26px;
    letter-spacing: 0.02em;
    line-height: 1.53;
    text-align: center;
    padding: 73px 0 42px;
}
.wrapper .interview_img_600 {
    width: min(100%, calc(100vw * 600 / 1366));
    margin: 0 auto;
}
.wrapper .interview_img_600 img {
    width: 100%;
}
.wrapper .interview_img_text {
    margin: 14px auto 0;
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
}
.wrapper .interview_text {
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.66;
    width: min(100%, calc(100vw * 600 / 1366));
    margin: 70px auto 0;
}
.wrapper .interview_img_372 {
    width: min(100%, calc(100vw * 372 / 1366));
    margin: 0 auto;
}
.wrapper .interview_img_372 img {
    width: 100%;
}
.wrapper .mgtop_100 {
    margin-top: 100px;
}
.wrapper .mgtop_67 {
    margin-top: 62px;
}
.wrapper .mgtop_10 {
    margin-top: 10px;
}
.wrapper .interview_text_last {
    margin-bottom: 73px;
}
@media screen and ( max-width: 900px ) {
    .wrapper .interview_lead {
        margin: 68px 0 64px;
        font-size: 14px;
        line-height: 1.66;
    }
    .wrapper .interview_border {
        width: 90%;
    }
    .wrapper .interview_border h3 {
        font-size: 18px;
        letter-spacing: 0.02em;
        line-height: 1.55;
        text-align: center;
        padding: 46px 0 35px;
    }
    .wrapper .interview_img_600 {
        width: 100%;
        margin: 0 auto;
    }
    .wrapper .interview_img_600 img {
        width: 100%;
    }
    .wrapper .interview_img_text {
        margin: 13px auto 0;
        font-size: 12px;
        letter-spacing: 0.02em;
        line-height: 1;
        text-align: center;
    }
    .wrapper .interview_text {
        font-size: 14px;
        letter-spacing: 0;
        line-height: 1.66;
        width: 94.83%;
        margin: 48px auto 0;
    }
    .wrapper .interview_img_372 {
        width: 69.67%;
        margin: 0 auto;
    }
    .wrapper .interview_img_372 img {
        width: 100%;
    }
    .wrapper .mgtop_100 {
        margin-top: 70px;
    }
    .wrapper .mgtop_67 {
        margin-top: 40px;
    }
    .wrapper .mgtop_10 {
        margin-top: 7px;
    }
    .wrapper .interview_text_last {
        margin-bottom: 43px;
    }
}
.wrapper .interview_footer {
    width: min(100%, calc(100vw * 800 / 1366));
    border-top: 1px solid #005221;
    margin: 0 auto;
}
.wrapper .interview_footer_text {
    font-family: "FOT-Cezanne ProN", "FOT-セザンヌ ProN", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.75;
    width: min(100%, calc(100vw * 750 / 1366));
    margin: 96px auto 93px;
    text-align: center;
}
.wrapper .interview_info {
    width: min(100%, calc(100vw * 380 / 1366));
    border-top: 1px solid #005221;
    padding: 30px 0 96px;
    display: flex;
    justify-content: space-between;
    margin: 100px auto 0;
}
.wrapper .interview_logo {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 1;
}
.wrapper .interview_info_text {
    font-family: "FOT-Cezanne ProN", "FOT-セザンヌ ProN", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.71;
    margin-top: -6px;
}
@media screen and ( max-width: 900px ) {
    .wrapper .interview_footer {
        width: 90%;
    }
    .wrapper .interview_footer_text {
        font-size: 14px;
        line-height: 1.66;
        width: 100%;
        margin: 66px auto;
    }
    .wrapper .interview_info {
        width: 80%;
        border-top: 1px solid #005221;
        padding: 30px 0 78px;
        display: block;
        justify-content: space-between;
        margin: 69px auto 0;
    }
    .wrapper .interview_logo {
        font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1;
        margin-top: 0;
        margin-bottom: 20px;
    }
    .wrapper .interview_info_text {
        font-family: "FOT-Cezanne ProN", "FOT-セザンヌ ProN", sans-serif;
        font-weight: 500;
        font-size: 13px;
        letter-spacing: 0;
        line-height: 1.61;
    }
}
.wrapper .lineup {
    width: 100%;
    background-color: #00431C;
    padding: 129px 0 180px;
}
.wrapper .lineup_subtitle {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.08em;
    margin-bottom: 11px;
    color: #FEF19D;
    text-align: center;
    line-height: 1;
}
.wrapper .lineup_title {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 500;
    font-size: 38px;
    letter-spacing: 0.06em;
    margin-bottom: 68px;
    color: #FEF19D;
    text-align: center;
    line-height: 1;
}
.wrapper .lineup_flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2.69%;
}
.wrapper .lineup_item {
    width: 24.89%;
    height: auto;
    /* 1366 幅時 カード幅約 340px・高さ 510px の比率を維持（幅は % なので高さは自動） */
    aspect-ratio: 340 / 510;
    border-radius: 15px;
    background-color: #e8e8e8;
    position: relative;
    overflow: hidden;
}
.wrapper .lineup_item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: transform 0.45s ease;
    transform: scale(1);
    transform-origin: center center;
}
.wrapper .lineup_item:hover::before {
    transform: scale(1.06);
}
/* リンクがカード全体を覆い、矢印の基準もカードと一致（img を a 内に置いたときのずれ防止） */
.wrapper .lineup_item > a {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    box-sizing: border-box;
}
.wrapper .lineup_item_img {
    position: absolute;
    /* 右下から左へ 20px・上へ 23px（1366 基準で vw 換算） */
    right: calc(100vw * 20 / 1366);
    bottom: calc(100vw * 23 / 1366);
    z-index: 2;
    margin: 0;
    pointer-events: none;
}
.wrapper .lineup_item_img img {
    display: block;
}
.wrapper .lineup_item.lineup_item--01::before {
    background-image: url(../img01/lineup_item_01_re.webp);
}
.wrapper .lineup_item.lineup_item--02::before {
    background-image: url(../img01/lineup_item_02_re.webp);
}
.wrapper .lineup_item.lineup_item--03::before {
    background-image: url(../img01/lineup_item_03_re.webp);
}
@media (prefers-reduced-motion: reduce) {
    .wrapper .lineup_item::before {
        transition: none;
    }
    .wrapper .lineup_item:hover::before {
        transform: scale(1);
    }
}
.wrapper .lineup_item_title {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #005221;
    text-align: center;
    margin: 30px auto 7px;
}
.wrapper .lineup_item_price {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 0;
    line-height: 1;
    color: #005221;
    text-align: center;
}
.wrapper .lineup_item_tax {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1;
    margin-left: 4px;
}
@media screen and ( max-width: 900px ) {
    .wrapper .lineup {
        width: 100%;
        background-color: #00431C;
        padding: 82px 0 58px;
    }
    .wrapper .lineup_subtitle {
        font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.08em;
        margin-bottom: 7px;
        color: #FEF19D;
        text-align: center;
        line-height: 1;
    }
    .wrapper .lineup_title {
        font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
        font-weight: 500;
        font-size: 29px;
        letter-spacing: 0.06em;
        margin-bottom: 50px;
        color: #FEF19D;
        text-align: center;
        line-height: 1;
    }
    .wrapper .lineup_flex {
        display: block;
        gap: 2.6%;
    }
    .wrapper .lineup_item {
        width: 80%;
        height: auto;
        /* 1366 幅時 カード幅約 340px・高さ 510px の比率を維持（幅は % なので高さは自動） */
        aspect-ratio: 340 / 510;
        border-radius: 15px;
        background-color: #e8e8e8;
        position: relative;
        overflow: hidden;
        margin: 0 auto 41px;
    }
    .wrapper .lineup_item::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        transition: transform 0.45s ease;
        transform: scale(1);
        transform-origin: center center;
    }
    .wrapper .lineup_item:hover::before {
        transform: scale(1.06);
    }
    /* リンクがカード全体を覆い、矢印の基準もカードと一致（img を a 内に置いたときのずれ防止） */
    .wrapper .lineup_item > a {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        text-decoration: none;
        color: inherit;
        background-color: transparent;
        box-sizing: border-box;
    }
    .wrapper .lineup_item_img {
        position: absolute;
        /* 右下から左へ 20px・上へ 23px（1366 基準で vw 換算） */
        right: calc(100vw * 15 / 375);
        bottom: calc(100vw * 14 / 375);
        z-index: 2;
        margin: 0;
        pointer-events: none;
    }
    .wrapper .lineup_item_img img {
        display: block;
    }
    .wrapper .lineup_item.lineup_item--01::before {
        background-image: url(../img01/lineup_item_01.webp);
    }
    .wrapper .lineup_item.lineup_item--02::before {
        background-image: url(../img01/lineup_item_02.webp);
    }
    .wrapper .lineup_item.lineup_item--03::before {
        background-image: url(../img01/lineup_item_03.webp);
    }
    @media (prefers-reduced-motion: reduce) {
        .wrapper .lineup_item::before {
            transition: none;
        }
        .wrapper .lineup_item:hover::before {
            transform: scale(1);
        }
    }
    .wrapper .lineup_item_title {
        font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
        font-weight: 600;
        font-size: 24px;
        letter-spacing: 0.04em;
        line-height: 1;
        color: #005221;
        text-align: center;
        margin: 30px auto 7px;
    }
    .wrapper .lineup_item_price {
        font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
        font-weight: 600;
        font-size: 19px;
        letter-spacing: 0;
        line-height: 1;
        color: #005221;
        text-align: center;
    }
    .wrapper .lineup_item_tax {
        font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0;
        line-height: 1;
    }
}

/* - footer - */
#footer {
    padding: 44px 0;
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 500;
    color: #005221;
}
#footer .footer_inner {
    width: 85.35%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
#footer .sns_link {
    display: flex;
    gap: 45px;
    font-size: 16px;
}
.copy {
    font-family: "roc-grotesk", "Roc Grotesk", sans-serif;
    font-weight: 400;
    color: rgba(0, 82, 34, 0.5);
    font-size: 16px;
    margin-top: -2px;
}
@media screen and ( max-width: 900px ) {
    #footer {
        padding: 34px 0;
    }
    #footer .footer_inner {
        width: 84%;
        align-items: end;
    }
    #footer .sns_link {
        display: block;
        font-size: 13px;
    }
    #footer .sns_link li {
        margin-bottom: 10px;
    }
    #footer .sns_link li:last-child {
        margin-bottom: 0;
    }
    .copy {
        font-size: 13px;
        margin-top: 0;
    }
}

/* イモムシ：幅1366時 74×50 を基準に 100vw で可変。下から登場 → 角は斜めにカットして外周周回＋回転 */
.imomushi {
    --imw: max(36px, calc(100vw * 74 / 1366));
    --imh: max(24px, calc(100vw * 50 / 1366));
    --imm: clamp(6px, calc(100vw * 12 / 1366), 20px);
    --imd: clamp(12px, calc(100vw * 26 / 1366), 42px);
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    box-sizing: border-box;
    width: var(--imw);
    height: var(--imh);
    left: calc(100vw - var(--imw) - var(--imm));
    /* 下はビューポート下端に密着（左右・上は --imm でインセット） */
    top: calc(100vh - var(--imh));
    opacity: 0;
    will-change: left, top;
    /* 登場時は枠で下半分を隠して「覗き」、周回中ははみ出しを許可 */
    overflow: hidden;
}
.imomushi_inner {
    width: 100%;
    height: 100%;
    transform-origin: center center;
    /* 登場は .imomushi--peek 時の keyframes（clip では切らない） */
    transform: translateY(calc(100vh * 0.12 + var(--imh) * 0.35)) scale(0.96);
    opacity: 0;
}
.imomushi_inner img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 62%;
}
.imomushi.imomushi--orbit .imomushi_inner img {
    animation: imomushi-walk 0.38s ease-in-out infinite;
}
@media screen and (min-width: 901px) {
    .imomushi.imomushi--orbit .imomushi_inner img {
        animation: imomushi-walk 0.72s ease-in-out infinite;
    }
}
@keyframes imomushi-walk {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(calc(-1 * min(3px, 100vw * 3 / 1366))) rotate(-2.2deg);
    }
    50% {
        transform: translateY(min(2px, 100vw * 2 / 1366)) rotate(1.8deg);
    }
    75% {
        transform: translateY(calc(-1 * min(2px, 100vw * 2 / 1366))) rotate(-1.2deg);
    }
}
.imomushi.imomushi--peek {
    opacity: 1;
}
/* 覗き中は下端密着 → 全部出る区間で上に --imm ずらし、周回 0% と位置が揃う */
.imomushi.imomushi--peek:not(.imomushi--orbit) {
    animation: imomushi-slot-top 2.45s cubic-bezier(0.28, 0.82, 0.32, 1) forwards;
}
@keyframes imomushi-slot-top {
    0%,
    48% {
        top: calc(100vh - var(--imh));
    }
    100% {
        top: calc(100vh - var(--imh) - var(--imm));
    }
}
/* 半分だけ覗く（translate で下半分を枠外へ）→ 定位置へ（周回開始後は orbit 側が優先） */
.imomushi.imomushi--peek:not(.imomushi--orbit) .imomushi_inner {
    animation: imomushi-peek-in 2.45s cubic-bezier(0.28, 0.82, 0.32, 1) forwards;
}
@keyframes imomushi-peek-in {
    0% {
        transform: translateY(calc(100vh * 0.12 + var(--imh) * 0.42)) scale(0.96);
        opacity: 0;
    }
    28% {
        /* 親の overflow:hidden で下半が隠れ、上半だけ「ひょこ」 */
        transform: translateY(calc(var(--imh) * 0.52)) scale(0.98);
        opacity: 1;
    }
    48% {
        transform: translateY(calc(var(--imh) * 0.52)) scale(0.98);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}
.imomushi.imomushi--orbit {
    overflow: visible;
    opacity: 1;
    /* キーフレーム 0% と同じにして、登場アニメ終了→周回の切り替えで飛ばない */
    left: calc(100vw - var(--imw) - var(--imm));
    top: calc(100vh - var(--imh) - var(--imm));
    /* PC は 72s（SP は下記 max-width で 38s を指定） */
    animation: imomushi-orbit 72s linear infinite;
}
.imomushi.imomushi--orbit .imomushi_inner {
    opacity: 1;
    animation: imomushi-crawl 72s linear infinite;
}
@keyframes imomushi-orbit {
    /* 下辺・上辺の時間比率をやや伸ばし、横移動を縦に近いスピードに */
    /* 周回中は下も --imm インセット（登場中のみ親の top が下端密着） */
    0% {
        left: calc(100vw - var(--imw) - var(--imm));
        top: calc(100vh - var(--imh) - var(--imm));
    }
    /* PC：横（長辺）に時間を多めに割り当て、縦（短辺）が遅く見えないようにする */
    33.5% {
        left: calc(var(--imm) + var(--imd));
        top: calc(100vh - var(--imh) - var(--imm));
    }
    34.18% {
        left: calc(var(--imm) + var(--imd) * 0.5);
        top: calc(100vh - var(--imh) - var(--imm) - var(--imd) * 0.5);
    }
    34.85% {
        left: var(--imm);
        top: calc(100vh - var(--imh) - var(--imm) - var(--imd));
    }
    48.35% {
        left: var(--imm);
        top: calc(var(--imm) + var(--imd));
    }
    49.03% {
        left: calc(var(--imm) + var(--imd) * 0.5);
        top: calc(var(--imm) + var(--imd) * 0.5);
    }
    49.7% {
        left: calc(var(--imm) + var(--imd));
        top: var(--imm);
    }
    83.2% {
        left: calc(100vw - var(--imw) - var(--imm) - var(--imd));
        top: var(--imm);
    }
    83.88% {
        left: calc(100vw - var(--imw) - var(--imm) - var(--imd) * 0.5);
        top: calc(var(--imm) + var(--imd) * 0.5);
    }
    84.55% {
        left: calc(100vw - var(--imw) - var(--imm));
        top: calc(var(--imm) + var(--imd));
    }
    /* 右下：左下と同様に斜め→短辺を十分な％幅で取り、回転と位置が揃うようにする */
    98.65% {
        left: calc(100vw - var(--imw) - var(--imm));
        top: calc(100vh - var(--imh) - var(--imm) - var(--imd));
    }
    99.33% {
        left: calc(100vw - var(--imw) - var(--imm) - var(--imd) * 0.5);
        top: calc(100vh - var(--imh) - var(--imm) - var(--imd) * 0.5);
    }
    99.66% {
        left: calc(100vw - var(--imw) - var(--imm) - var(--imd));
        top: calc(100vh - var(--imh) - var(--imm));
    }
    100% {
        left: calc(100vw - var(--imw) - var(--imm));
        top: calc(100vh - var(--imh) - var(--imm));
    }
}
@keyframes imomushi-crawl {
    0% {
        transform: rotate(0deg);
    }
    33.5% {
        transform: rotate(0deg);
    }
    34.12% {
        transform: rotate(45deg);
    }
    34.85% {
        transform: rotate(90deg);
    }
    48.35% {
        transform: rotate(90deg);
    }
    49.03% {
        transform: rotate(135deg);
    }
    49.7% {
        transform: rotate(180deg);
    }
    83.2% {
        transform: rotate(180deg);
    }
    83.88% {
        transform: rotate(225deg);
    }
    84.55% {
        transform: rotate(270deg);
    }
    98.65% {
        transform: rotate(270deg);
    }
    99.33% {
        transform: rotate(292deg);
    }
    99.66% {
        transform: rotate(315deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*
 * SP 周回：縦辺の移動距離が長いのに PC と同じ％配分だと縦だけ速く見える。
 * 直線区間の時間を「下14% + 上14% + 左35% + 右31.2% + 角計2.2%」に再配分（imomushi-crawl と同一タイムライン）。
 */
@keyframes imomushi-orbit-sp {
    0% {
        left: calc(100vw - var(--imw) - var(--imm));
        top: calc(100vh - var(--imh) - var(--imm));
    }
    14% {
        left: calc(var(--imm) + var(--imd));
        top: calc(100vh - var(--imh) - var(--imm));
    }
    14.6% {
        left: calc(var(--imm) + var(--imd) * 0.5);
        top: calc(100vh - var(--imh) - var(--imm) - var(--imd) * 0.5);
    }
    15.2% {
        left: var(--imm);
        top: calc(100vh - var(--imh) - var(--imm) - var(--imd));
    }
    50.2% {
        left: var(--imm);
        top: calc(var(--imm) + var(--imd));
    }
    50.8% {
        left: calc(var(--imm) + var(--imd) * 0.5);
        top: calc(var(--imm) + var(--imd) * 0.5);
    }
    51.4% {
        left: calc(var(--imm) + var(--imd));
        top: var(--imm);
    }
    65.4% {
        left: calc(100vw - var(--imw) - var(--imm) - var(--imd));
        top: var(--imm);
    }
    66% {
        left: calc(100vw - var(--imw) - var(--imm) - var(--imd) * 0.5);
        top: calc(var(--imm) + var(--imd) * 0.5);
    }
    66.6% {
        left: calc(100vw - var(--imw) - var(--imm));
        top: calc(var(--imm) + var(--imd));
    }
    97.8% {
        left: calc(100vw - var(--imw) - var(--imm));
        top: calc(100vh - var(--imh) - var(--imm) - var(--imd));
    }
    98.4% {
        left: calc(100vw - var(--imw) - var(--imm) - var(--imd) * 0.5);
        top: calc(100vh - var(--imh) - var(--imm) - var(--imd) * 0.5);
    }
    99% {
        left: calc(100vw - var(--imw) - var(--imm) - var(--imd));
        top: calc(100vh - var(--imh) - var(--imm));
    }
    100% {
        left: calc(100vw - var(--imw) - var(--imm));
        top: calc(100vh - var(--imh) - var(--imm));
    }
}
@keyframes imomushi-crawl-sp {
    0% {
        transform: rotate(0deg);
    }
    14% {
        transform: rotate(0deg);
    }
    14.55% {
        transform: rotate(45deg);
    }
    15.2% {
        transform: rotate(90deg);
    }
    50.2% {
        transform: rotate(90deg);
    }
    50.8% {
        transform: rotate(135deg);
    }
    51.4% {
        transform: rotate(180deg);
    }
    65.4% {
        transform: rotate(180deg);
    }
    66% {
        transform: rotate(225deg);
    }
    66.6% {
        transform: rotate(270deg);
    }
    97.8% {
        transform: rotate(270deg);
    }
    98.4% {
        transform: rotate(292deg);
    }
    99% {
        transform: rotate(315deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* SP：375px 幅時に 67×45（それ以外の幅では同比率でスケール） */
@media screen and ( max-width: 900px ) {
    .imomushi {
        --imw: calc(100vw * 67 / 375);
        --imh: calc(100vw * 45 / 375);
    }
    .imomushi.imomushi--orbit {
        animation: imomushi-orbit-sp 38s linear infinite;
    }
    .imomushi.imomushi--orbit .imomushi_inner {
        animation: imomushi-crawl-sp 38s linear infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .imomushi {
        overflow: visible;
    }
    .imomushi.imomushi--peek:not(.imomushi--orbit) {
        animation: none;
        top: calc(100vh - var(--imh) - var(--imm));
    }
    .imomushi.imomushi--peek:not(.imomushi--orbit) .imomushi_inner {
        animation: none;
        transform: none;
        opacity: 1;
    }
    .imomushi.imomushi--orbit {
        animation: none;
        top: calc(100vh - var(--imh) - var(--imm));
    }
    .imomushi.imomushi--orbit .imomushi_inner {
        animation: none;
    }
    .imomushi.imomushi--orbit .imomushi_inner img {
        animation: none;
    }
}