/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    line-height: 1.6;
    color: #333;
    padding-top: 50px;
    padding-bottom: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* Utility Classes */
.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.header__content {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

.header__logo {
    height: 30px;
    width: auto;
}

/* Skip to main content link */
.skip-to-main {
    position: fixed;
    top: -100px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10001;
    transition: top 0.3s;
}

.skip-to-main:focus {
    top: 50px;
}

/* Common Section Styles */
section {
    position: relative;
    width: 100%;
}

/* FV */
.fv {
    position: relative;
    width: 100%;
    padding: 30px 0;
}

.fv__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_fv_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 1;
}


/* 年会費についてリンク */
.fv__annual-fee-link {
    position: absolute;
    bottom: 17px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: #ffffff;
    text-decoration: underline;
    font-size: 14px;
    font-weight: normal;
    padding: 8px 16px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.fv__annual-fee-link-arrow {
    margin-left: 4px;
}

/* 「V」を追加 */
.fv__annual-fee-link::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: solid 2px #ffffff;
    border-left: solid 2px #ffffff;
    transform: rotate(-140deg);
    position: absolute;
    margin-left: 4px;
    top: 50%;
    transform: translateY(-60%) rotate(-135deg);
}


/* スマートフォン対応 */
/* SP Responsive */
@media (max-width: 768px) {
    
     /* .fv__itemの下に配置 */
     .fv__annual-fee-link {
        position: absolute;
        top: 95%; /* 真ん中より下に配置 */
        left: 50%;
        transform: translate(-50%, -50%);
        right: auto;
        bottom: auto;
        margin-top: 0;
        font-size: 12px;
        padding: 6px 12px;
        text-align: center;
        z-index: 3; /* .fv__content（z-index: 2）より上に表示 */
    }
    
}

/* iPad・iOS対応: background-attachment: fixed の問題を回避 */
@media screen and (min-width: 769px) and (max-width: 1400px) {
    .fv__bg {
        background-attachment: scroll;
        top: 0; /* パディングで調整したので背景画像は元の位置に戻す */
    }

    .fv__item {
        height: 300px; /* PC版（400px）より100px縮める */
        max-width: 950px; /* PC版より少し小さく */
    }

    .fv__content {
        min-height: 320px; /* タブレット用：コンテンツ領域も詰める */
        padding: 0 30px; /* 横の余白は少し確保 */
    }

    /* タブレット横向き対応: 1024px以上でも適切な表示を保つ */
}

/* iOS全般での対応（Safari特有の問題） */
@supports (-webkit-overflow-scrolling: touch) {
    .fv__bg {
        background-attachment: scroll;
    }
}

/* タブレット横向き専用対応（より大きな画面での追加調整） */
@media screen and (min-width: 1025px) and (max-width: 1400px) and (orientation: landscape) {
    .fv {
        padding: 30px 0; /* PC版と同じpadding-topに揃える */
    }

    .fv__item {
        height: 280px; /* 横向きタブレットでは更に小さく */
        max-width: 850px; /* 横向きに適した幅 */
    }

    .fv__content {
        min-height: 300px; /* 横向きタブレット：更にコンパクトに */
        padding: 0 25px; /* 横の余白も調整 */
    }
}

.fv__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    max-width: 1150px;
    margin: 0 auto;
    min-height: 350px;
}

/* 削除 - PC版では不要 */

/* 削除 - PC版では不要 */

/* 削除 - PC版では不要 */

/* 削除 - PC版では不要 */

/* 削除 - PC版では不要 */

.fv__item {
    background-image: url('img/pc/pc_fv_item.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 1200px;
    height: 400px;
    margin: 0 auto;
    /* アニメーション初期設定 */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fv__item.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* 重要なお知らせ */
.notice {
    color: #e9e9e9;
    font-size: 70%;
    font-weight: bold;
}

.notice .notice-title {
  font-size: 1.5em !important;  /* または16px→24pxなど具体的に指定 */
  font-weight: bold !important;
}

 .cpn__content .notice span {
      line-height: 1.5; /* 行間を詰める */
      display: inline-block; /* 改行を伴う場合は必要 */
      font-size: 80%;
      padding: 1% 0;
      font-weight: normal;
    }

.cpn__content .notice a {
  color: #fff;
  text-decoration: underline;
}

.cpn__content .notice a:hover {
  opacity: 0.8;
}

/* CPN */
.cpn {
    position: relative;
    padding: 10px 20px;
}

.cpn__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: #5c5c5c;*/
    background-image: url('img/pc/pc_cpn_bg.png');
    background-color:rgba(255,255,255,0.4);
    background-blend-mode:lighten;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.cpn__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1150px;
    margin: 0 auto;
}

.cpn__banner {
    background-image: url('img/pc/pc_cpn_banner.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
    margin: 0 auto;
}

/* Fixed CTA Bottom */
.cta-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 15px 0;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.cta-fixed.cta-at-footer {
    position: absolute;
    bottom: auto;
    transform: translateY(-100%);
}

.cta-fixed__content {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-fixed__btn {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.cta-fixed__btn:hover {
    transform: scale(1.05);
}

.cta-fixed__img {
    max-width: 350px;
    height: auto;
    display: block;
}

/* Diners */
.diners {
    position: relative;
    padding: 60px 20px;
}

.diners__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_diners_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.diners__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.diners__txt {
    background-image: url('img/pc/pc_diners_txt.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 800px;
    height: 300px;
    margin: 0 auto;
}

/* Carousel Section */
.carousel-section {
    background-color: #f9f9f9;
}

.carousel-item {
    position: relative;
    padding: 30px 20px;
}

/* Food */
.food__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_food_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.food__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.food__ttl {
    background-image: url('img/pc/pc_food_ttl.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin: 0 auto 40px;
}

.food__images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.food__executive {
    background-image: url('img/pc/pc_food_executive.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
}

.food__theclubdining {
    background-image: url('img/pc/pc_food_theclubdining.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
}

/* Travel */
.travel__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_travel_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.travel__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.travel__ttl {
    background-image: url('img/pc/pc_travel_ttl.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin: 0 auto 40px;
}

.travel__images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.travel__desk {
    background-image: url('img/pc/pc_travel_desk.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
}

.travel__lounge {
    background-image: url('img/pc/pc_travel_lounge.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
}

.travel__clubhotels {
    background-image: url('img/pc/pc_travel_clubhotels.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
}

.travel__clubhotels-bottom {
    display: none;  /* PC版では非表示 */
}

/* Hobby */
.hobby__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_hobby_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.hobby__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hobby__ttl {
    background-image: url('img/pc/pc_hobby_ttl.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin: 0 auto 40px;
}

.hobby__images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.hobby__golf {
    background-image: url('img/pc/pc_hobby_golf.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
}

.hobby__lesson {
    background-image: url('img/pc/pc_hobby_lesson.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
}

.hobby__shoping {
    background-image: url('img/pc/pc_hobby_shoping.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
}

/* Carousel (SP only) */
.food__carousel,
.travel__carousel,
.hobby__carousel {
    overflow: hidden;
    margin-top: 30px;
    touch-action: pan-y pinch-zoom;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    min-width: 100%;
    text-align: center;
}

/* Payment */
.payment {
    position: relative;
    padding: 60px 20px;
    background-color: #fff;
}

/* PC版ではpaymentセクションのh3内のbrタグを非表示 */
@media (min-width: 769px) {
    .payment__q h3 br {
        display: none;
    }
}

.payment__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_payment_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.payment__content {
    position: relative;
    z-index: 2;
    max-width: 1150px;
    margin: 0 auto;
}

/* PC時にpaymentアイテムを横並び表示 */
@media (min-width: 769px) {
    .payment__items-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
    }

    .payment__item {
        flex: 1;
        min-width: calc(50% - 10px);
        margin-bottom: 0;
    }

    .payment__item:not(.payment__item--static) {
        flex: 1;
        min-width: calc(25% - 15px);
    }
}

.payment__ttl {
    background-image: url('img/pc/pc_payment_ttl.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin: 0 auto 40px;
}

.payment__item {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.payment__q {
    position: relative;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment__q:hover {
    background-color: rgba(240, 240, 240, 0.9);
}

.payment__q-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_payment_q_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.payment__q h3 {
    position: relative;
    z-index: 2;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding-right: 40px;
}

.payment__q h3 span {
    color: #fff9ae !important;
}

.payment .payment__q h3 span {
    color: #fff9ae !important;
}

.payment__item .payment__q h3 span {
    color: #fff9ae !important;
}

.highlight-gold {
    color: #fff9ae !important;
}

.payment__q::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    z-index: 3;
    transition: all 0.3s ease;
}

.payment__q.open::after {
    content: '−';
}

.payment__a {
    display: none;
    padding: 30px;
    background-color: #fff;
    border-top: none;
    margin: 0;
    border-radius: 0;
}

.payment__a.active {
    display: block;
}

.payment__a p {
    margin-bottom: 15px;
    line-height: 1.8;
    font-weight: bold;
}

.payment__note {
    font-size: 11px;
    line-height: 1.4;
}

/* paymentセクションのpタグ内のspanの色を変更 */
.payment__a p span:not(.payment__note) {
    color: #860000;
}

.payment__a-card {
    background-image: url('img/pc/pc_payment_a_card.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 400px;
    height: 200px;
    margin: 0 auto 20px;
}

.payment__item-img {
    background-image: url('img/pc/pc_payment_item.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 300px;
    margin: 0 auto;
}

/* Static payment method styles */
.payment__item--static {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 20px;
    text-align: center;
}

.payment__static-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.payment__static-img {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.payment__static-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* CPN2 */
.cpn2 {
    position: relative;
    padding: 40px 20px;
}

.cpn2__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_cpn_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.cpn2__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1150px;
    margin: 0 auto;
}

.cpn2__banner {
    background-image: url('img/pc/pc_cpn_banner.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 250px;
    margin: 0 auto;
}

/* Reword */
.reword {
    padding: 60px 20px;
    background-color: #f8f8f8;
}

.reword__content {
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
}

.reword__ttl {
    background-image: url('img/pc/pc_reward_ttl.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin: 0 auto 40px;
}

.reword__item01 {
    text-align: center;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
}

.reword__item01 img {
    max-width: 800px;
    width: 100%;
    height: auto;
}

.reword__item01-note {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin: 10px 0 40px;
    line-height: 1.4;
}

.reword__item02 {
    background-image: url('img/pc/pc_reword_02_bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 900px;
    height: 390px;
    margin: 40px auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 40px 40px;
    box-sizing: border-box;
}

.reword__item02 h3 {
    display: none;
}

.reword__item02-txt {
    margin: 0 auto 30px;
    position: relative;
    z-index: 2;
}

.reword__item02-txt img {
    max-width: 650px;
    width: 100%;
    height: auto;
}

.reword__item02-btn {
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.reword__item02-btn img {
    max-width: 650px;
    width: 100%;
    height: auto;
}

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

.reword__item03 {
    text-align: center;
    margin: 40px auto;
    display: flex;
    justify-content: center;
}

.reword__item03 img {
    max-width: 800px;
    width: 100%;
    height: auto;
}

.reword__item04 {
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.reword__item04 img {
    max-width: 800px;
    width: 100%;
    height: auto;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1001;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__overlay {
    position: relative;
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 90%;
    max-height: 90%;
    overflow: visible;
}

.modal__content {
    padding: 40px;
    position: relative;
    max-height: 80vh;
    overflow: auto;
}

.modal__close {
    display: none;
}

.modal.active .modal__close {
    display: flex;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 28px;
    cursor: pointer;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1003;
    border: 2px solid #fff;
}

.modal.active .modal__close:hover {
    background-color: rgba(255, 0, 0, 0.7);
    transform: scale(1.1);
}

.modal__content h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.modal__image {
    text-align: center;
    margin-bottom: 30px;
}

.modal__image img {
    max-width: 100%;
    height: auto;
}

.modal__notice {
    margin-top: 30px;
}

.modal__notice-title {
    background-color: #333;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
    margin: 0 0 20px;
    border-radius: 0;
    text-align: center;
}

.modal__notice-text {
    padding: 20px 0;
}

.modal__notice-text p {
    font-size: 12px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Support */
.support {
    position: relative;
    padding: 60px 20px;
}

.support__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/pc/pc_support_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.support__content {
    position: relative;
    z-index: 2;
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
}

.support__ttl {
    background-image: url('img/pc/pc_support_ttl.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin: 0 auto 40px;
}

.support__images {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.support__img01 {
    background-image: url('img/pc/pc_support_01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 400px;
    height: 250px;
}

.support__img02 {
    background-image: url('img/pc/pc_support_02.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 400px;
    height: 250px;
}

.support__img03 {
    background-image: url('img/pc/pc_support_03.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 800px;
    height: 400px;
    margin: 0 auto;
}

/* Step */
.step {
    position: relative;
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.step__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/sp/sp_step_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.step__content {
    position: relative;
    z-index: 2;
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
}

.step__ttl {
    background-image: url('img/pc/pc_step_ttl.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 100px;
    margin: 0 auto 40px;
}

.step__img {
    background-image: url('img/pc/pc_step_img.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 800px;
    height: 400px;
    margin: 0 auto;
}

/* Spec */
.spec {
    padding: 60px 20px;
    background-color: #fff;
}

.spec__content {
    max-width: 1150px;
    margin: 0 auto;
}

.spec__ttl {
    background-image: url('img/pc/pc_spec_ttl.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 400px;
    height: 80px;
    margin: 0 auto 40px;
}

.spec__card-regular,
.spec__card-companion {
    margin-bottom: 60px;
    text-align: center;
}

.spec__card-img {
    max-width: 300px;
    margin-bottom: 30px;
}

.spec__table {
    overflow-x: auto;
}

.spec__table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    table-layout: fixed;
    max-width: 800px;
}

.spec__table th {
    background-color: #5f5f5f;
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold !important;
    border-right: 1px solid #fff;
}

/* テーブル右端縦線を表示するため削除 */

.spec__table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: left;
}

.spec__table td:first-child {
    background-color: #dedede;
    font-weight: bold !important;
}

.spec__table th:first-child {
    font-weight: bold !important;
}

.spec__table th:nth-child(2) {
    font-weight: bold !important;
}

.spec__table th:nth-child(3) {
    font-weight: bold !important;
}

.spec__table th {
    font-weight: bold !important;
}

.spec__table td:nth-child(2) {
    background-color: #dedede;
    font-weight: normal;
}

.spec__table td:last-child {
    background-color: #fff;
}

/* PC版 本会員・家族会員セル */
.spec__table.pc-only .spec__member-type {
    background-color: #f4f4f4 !important;
    font-weight: bold;
}

/* PC版 年会費カテゴリセルのみ太字 */
.spec__table.pc-only .spec__category {
    font-weight: bold !important;
}

/* PC版 最後の列（料金等）を通常の太さに */
.spec__table.pc-only td:last-child {
    font-weight: normal !important;
}

/* PC版テーブルの列幅統一 */
@media (min-width: 769px) {
    .spec__table.pc-only table {
        table-layout: fixed;
    }

    .spec__table.pc-only th {
        font-weight: bold !important;
    }

    .spec__table.pc-only th:first-child,
    .spec__table.pc-only td:first-child {
        width: 25%;
    }

    .spec__table.pc-only th:nth-child(2),
    .spec__table.pc-only td:nth-child(2) {
        width: 25%;
    }

    .spec__table.pc-only th:nth-child(3),
    .spec__table.pc-only td:nth-child(3) {
        width: 50%;
    }
}

/* 削除 - 行の背景色とホバー効果を削除 */

/* Conditions */
.conditions {
    padding: 60px 20px;
    background-color: #f8f8f8;
}

.conditions__content {
    max-width: 1150px;
    margin: 0 auto;
}

.conditions__content h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 40px;
    color: #000;
}

.conditions__text h3 {
    font-size: 18px;
    margin: 30px 0 15px;
    color: #333;
}

.conditions__text p {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #555;
}

.conditions__table {
    overflow-x: auto;
    margin: 30px 0;
}

.conditions__table table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    table-layout: fixed;
}

.conditions__table th,
.conditions__table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    width: 33.33%;
}

/* テーブル右端縦線を表示するため削除 */

.conditions__table th {
    background-color: #5f5f5f;
    color: white;
    font-weight: bold;
}

.conditions__table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.conditions__id {
    text-align: right;
    margin-top: 20px;
    font-weight: normal;
    color: #666;
}

/* Notices */
.notices {
    padding: 40px 20px;
    background-color: #fff;
}

.notices__content {
    max-width: 1150px;
    margin: 0 auto;
}

.notices__content h2 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
    color: #333;
}

.notices__content p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    text-align: left;
}

/* Footer */
.l-footer {
    background: #606060;
    padding: 20px 10px;
}

.l-footer__inner {
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
}

.l-footer__inner__sns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.l-footer__inner__sns__item {
    display: inline-block;
}

.l-footer__inner__sns__item a {
    display: block;
    transition: opacity 0.3s ease;
}

.l-footer__inner__sns__item a:hover {
    opacity: 0.7;
}

.l-footer__inner__sns__item img {
    width: 32px;
    height: 32px;
}

.l-footer__inner__txt {
    color: #fff;
}

.p-txt {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.p-txt--footerSizeA {
    font-size: 12px;
}

.p-txt a {
    color: #fff;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.p-txt a:hover {
    color: #ccc;
}

.u-d-n {
    display: none;
}

.u-d-sp-b {
    display: block;
}

/* SP Responsive */
@media (max-width: 768px) {
    /* FV */
    .fv {
        padding: 150px 0 30px 0; /* 上部パディングを追加して白い余白を埋める */
    }

    .fv__bg {
        background-image: url('img/sp/sp_fv_bg.png');
        background-attachment: scroll;
        top: 0; /* パディングで調整したので背景画像は元の位置に戻す */
    }

    .fv__content {
        flex-direction: column;
        padding: 0 15px;
        align-items: center;
        justify-content: center;
        min-height: 400px;
    }

    .fv__item {
        background-image: url('img/sp/sp_fv_item.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        max-width: 500px;
        height: 470px;
        margin: -140px auto 0 auto;
        display: block;
    }

    body {
        padding-top: 50px;
        padding-bottom: 0;
    }

    /* Header SP */
    .header__content {
        padding: 0 15px;
    }

    .header__logo {
        height: 25px;
    }

    /* CPN */
    .cpn__bg {
        background-image: url('img/sp/sp_cpn_bg.png');
    }

    .cpn__banner {
        background-image: url('img/sp/sp_cpn_banner.png');
        max-width: 400px;
        height: 180px;
    }

    /* CPN2 SP */
    .cpn2__bg {
        background-image: url('img/sp/sp_cpn_bg.png');
    }

    .cpn2__banner {
        background-image: url('img/sp/sp_cpn_banner.png');
        max-width: 400px;
        height: 180px;
    }

    /* Fixed CTA SP */
    .cta-fixed {
        padding: 12px 0;
    }

    .cta-fixed__content {
        padding: 0 15px;
    }

    .cta-fixed__img {
        max-width: 280px;
    }

    .cta__img {
        max-width: 300px;
        width: 100%;
    }

    /* Diners */
    .diners {
        padding: 40px 15px;
    }

    .diners__bg {
        background-image: url('img/sp/sp_diners_bg.png');
    }

    .diners__txt {
        background-image: url('img/sp/sp_diners_txt.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        max-width: 420px;
        height: 250px;
    }

    /* Carousel Items */
    .carousel-item {
        padding: 30px 15px;
    }

    /* Carousel Dots */
    .carousel-dots {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        gap: 10px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .dot.active {
        background-color: #ffffff;
    }

    .food__bg {
        background-image: url('img/sp/sp_food_bg.png');
    }

    .food__ttl {
        background-image: url('img/sp/sp_food_ttl.png');
        max-width: 300px;
        height: 60px;
        margin-bottom: 40px;
    }

    .food__images {
        display: none;
    }

    .travel__bg {
        background-image: url('img/sp/sp_travel_bg.png');
    }

    .travel__ttl {
        background-image: url('img/sp/sp_travel_ttl.png');
        max-width: 300px;
        height: 60px;
        margin-bottom: 40px;
    }

    .travel__images {
        display: none;
    }

    .travel__clubhotels-bottom {
        display: block;  /* SP版で表示 */
        background-image: url('img/sp/sp_travel_clubhotels.png');
        max-width: 600px;
        height: 400px;
        margin: 20px auto 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
    }

    .hobby__bg {
        background-image: url('img/sp/sp_hobby_bg.png');
    }

    .hobby__ttl {
        background-image: url('img/sp/sp_hobby_ttl.png');
        max-width: 300px;
        height: 60px;
        margin-bottom: 40px;
    }

    .hobby__images {
        display: none;
    }

    /* Payment */
    .payment {
        padding: 40px 15px;
    }

    .payment__ttl {
        background-image: url('img/sp/sp_paiment_ttl.png');
        max-width: 380px;
        height: 80px;
        margin-bottom: 40px;
    }

    .payment__q-bg {
        background-image: url('img/sp/sp_paiment_q_bg.png');
    }

    .payment__a-card {
        background-image: url('img/sp/sp_payment_a_card.png');
        max-width: 380px;
        height: 190px;
    }

    .payment__item-img {
        background-image: url('img/sp/sp_paimant_item.png');
        max-width: 420px;
        height: 250px;
    }

    /* Static payment method SP */
    .payment__item--static {
        padding: 15px;
    }

    .payment__static-title {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .payment__static-img {
        max-width: 420px;
    }

    .payment__note {
        font-size: 9px;
        line-height: 1.3;
    }

    /* SP版 paymentセクションのpタグ内のspanの色を変更 */
    .payment__a p span:not(.payment__note) {
        color: #860000;
    }

    /* Reword */
    .reword {
        padding: 40px 15px;
    }

    .reword__ttl {
        background-image: url('img/sp/sp_reword_ttl.png');
        max-width: 300px;
        height: 60px;
        margin-bottom: 40px;
    }

    .reword__item01-note {
        font-size: 10px;
        margin: 10px 0 30px;
    }

    .reword__item01 img {
        max-width: 400px;
        width: 100%;
        height: auto;
    }

    .reword__item02 {
        background-image: url('img/sp/sp_reword_02_bg.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        max-width: 450px;
        height: 450px;
        margin: 0 auto;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 50px 30px 30px;
        box-sizing: border-box;
    }

    .reword__item02 h3 {
        display: none;
    }

    .reword__item02-txt {
        margin: 0 auto 25px;
        position: relative;
        z-index: 2;
    }

    .reword__item02-txt img {
        max-width: 300px;
        width: 100%;
        height: auto;
    }

    .reword__item02-btn {
        margin: 0 auto;
        cursor: pointer;
        position: relative;
        z-index: 2;
    }

    .reword__item02-btn img {
        max-width: 300px;
        width: 100%;
        height: auto;
    }

    .reword__item03 img {
        max-width: 400px;
        width: 100%;
        height: auto;
    }

    .reword__item04 img {
        max-width: 400px;
        width: 100%;
        height: auto;
    }

    /* Modal SP */
    .modal__overlay {
        max-width: 95%;
        max-height: 90%;
        margin: 10px;
    }

    .modal__content {
        padding: 20px;
        max-height: 70vh;
    }

    .modal.active .modal__close {
        top: -17px;
        right: -17px;
        width: 35px;
        height: 35px;
        font-size: 24px;
    }

    .modal__content h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .modal__image {
        margin-bottom: 20px;
    }

    .modal__notice {
        margin-top: 20px;
    }

    .modal__notice-title {
        font-size: 14px;
        padding: 10px 15px;
        text-align: center;
    }

    .modal__notice-text {
        padding: 15px 0;
    }

    .modal__notice-text p {
        font-size: 11px;
        line-height: 1.5;
    }

    /* Support */
    .support {
        padding: 40px 15px;
    }

    .support__bg {
        background-image: url('img/sp/sp_support_bg.png');
    }

    .support__ttl {
        background-image: url('img/sp/sp_support_ttl.png');
        max-width: 300px;
        height: 60px;
        margin-bottom: 40px;
    }

    .support__images {
        gap: 20px;
        flex-direction: column;
        align-items: center;
    }

    .support__img01 {
        background-image: url('img/sp/sp_support_01.png');
        width: 300px;
        height: 120px;
    }

    .support__img02 {
        background-image: url('img/sp/sp_support_02.png');
        width: 300px;
        height: 200px;
    }

    .support__img03 {
        background-image: url('img/sp/sp_support_03.png');
        max-width: 350px;
        height: 550px;
    }

    /* Step */
    .step {
        padding: 40px 15px;
    }

    .step__ttl {
        background-image: url('img/sp/sp_step_ttl.png');
        max-width: 300px;
        height: 60px;
        margin-bottom: 40px;
    }

    .step__img {
        background-image: url('img/sp/sp_step_img.png');
        max-width: 420px;
        height: 900px;
    }

    /* Spec */
    .spec {
        padding: 40px 15px;
    }

    .spec__ttl {
        background-image: url('img/sp/sp_spec_ttl.png');
        max-width: 280px;
        height: 50px;
        margin-bottom: 40px;
    }

    .spec__card-img {
        max-width: 280px;
    }

    /* PC版テーブルのSP表示調整 */
    .spec__table.pc-only th {
        background-color: #5f5f5f !important;
        border-right: 1px solid #fff;
        font-weight: bold !important;
    }

    .spec__table.pc-only td {
        border-right: 1px solid #e0e0e0;
    }

    .spec__table.pc-only td:first-child {
        background-color: #dedede !important;
        font-weight: bold !important;
    }

    .spec__table.pc-only td:nth-child(2) {
        background-color: #dedede !important;
        font-weight: normal;
    }

    .spec__table.pc-only td:last-child {
        background-color: #fff !important;
    }

    /* SP版テーブルの基本設定 */
    .spec__table.sp-only table {
        font-size: 14px;
    }

    .spec__table.sp-only td,
    .spec__table.sp-only th {
        padding: 8px 10px;
        text-align: center;
        border-left: 1px solid #e0e0e0;
    }

    /* SP版テーブルの最初のセルは左ボーダーなし */
    .spec__table.sp-only td:first-child,
    .spec__table.sp-only th:first-child {
        border-left: none;
    }

    /* SP版 カード名以外のthを年会費と同じ色に */
    .spec__table.sp-only th {
        background-color: #dedede !important;
        color: #333 !important;
        font-weight: bold !important;
    }

    /* SP版 最初の行のth（カード名）は元の色を維持 */
    .spec__table.sp-only tr:first-child th {
        background-color: #5f5f5f !important;
        color: white !important;
        font-weight: bold !important;
    }

    /* SP版 年会費カテゴリー */
    .spec__category-sp {
        background-color: #dedede !important;
        font-weight: bold !important;
        text-align: center;
    }

    /* SP版 本会員・家族会員 */
    .spec__member-type-sp {
        background-color: #f4f4f4 !important;
        font-weight: bold !important;
        text-align: center;
        font-size: 13px;
        width: 50% !important;
    }

    /* SP版テーブルの本会員・家族会員行を確実に太字に */
    .spec__table.sp-only tr:nth-child(3) td {
        font-weight: bold !important;
        background-color: #f4f4f4 !important;
    }

    /* SP版テーブルの料金セル */
    .spec__table.sp-only tr:nth-child(4) td {
        background-color: #fff;
        font-weight: normal;
        padding: 10px 8px;
    }

    /* SP版 その他のtdセルを通常の太さに */
    .spec__table.sp-only td:not(.spec__category-sp):not(.spec__member-type-sp) {
        font-weight: normal !important;
    }

    /* th要素は必ず太字（最強優先度） */
    .spec__table th,
    .spec__table.pc-only th,
    .spec__table.sp-only th {
        font-weight: bold !important;
    }

    /* Conditions & Notices */
    .conditions,
    .notices {
        padding: 40px 15px;
    }

    .conditions__content h2 {
        font-size: 20px;
    }

    .notices__content h2 {
        font-size: 18px;
    }

    /* SP版 条件テーブルの調整 */
    .conditions__table th,
    .conditions__table td {
        padding: 8px 5px;
        font-size: 13px;
        width: 33.33%;
    }

    /* Footer */
    .l-footer {
        padding: 15px 10px;
    }

    .l-footer__inner__sns {
        gap: 12px;
        margin-bottom: 15px;
    }

    .l-footer__inner__sns__item img {
        width: 28px;
        height: 28px;
    }

    .p-txt {
        font-size: 12px;
    }

    .p-txt--footerSizeA {
        font-size: 11px;
    }

    .u-d-n {
        display: none;
    }

    .u-d-sp-b {
        display: inline;
    }
}