.section {
    position: relative;
    padding: 12rem 2rem;
}

.section.-pt0 {
    padding-top: 0;
}

.section.-pb0 {
    padding-bottom: 0;
}

.bg {
    background: url("/30th/img/bg/1.webp") center / cover no-repeat;
    object-fit: cover;
}

.bg2 {
    background-color: #F5F5F5;
}

.bg-img {
    position: relative;
    background: url("/30th/img/bg/2.webp") center / cover no-repeat;
    background-attachment: fixed;
}

.bg-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    /* 指定の高さ */
    /* 上から下へ：白(0%)から透明(100%)へ */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 1) 0%, transparent 100%);
    z-index: 2;
    /* コンテンツや背景より前に出す */
}

@media screen and (max-width: 480px) {
    .section {
        padding: 6rem 2rem;
    }

    .bg {
        background: url("/30th/img/bg/1_sp.webp") center / cover no-repeat;
        background-position: top;
    }
}

/* メインコンテンツエリア */
.content-box1 {
    padding-bottom: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7rem;
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    box-sizing: border-box;
}

.content-box1.-wide {
    max-width: 134rem;
}

.firstview {
    position: relative;
}

.firstview-logo {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.firstview-logo img {
    width: 30rem;
}

.firstview-thumb {
    width: 100%;
}

.firstview-thumb img {
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .firstview {
        margin-top: 9rem;
    }

    .firstview-logo img {
        width: 24rem;
    }
}

@media screen and (max-width: 480px) {
    .firstview {
        margin-top: 0;
    }
}

/* ========================================
   セクションヘッダー
   ======================================== */

/* リード文エリア */
.lead-box1 {
    width: 100%;
    padding-bottom: 12rem;
    text-align: center;
    box-sizing: border-box;
}

.txt-l1 {
    color: #111111;
    font-size: 2.4rem;
    font-family: "Zen Old Mincho", serif;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0.24px;
}

.txt-m1 {
    color: #111111;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 2.25;
    letter-spacing: 0.2px;
}

.txt-m1.c1 {
    color: #803b20;
    font-size: 1.4rem;
}

.header-unit1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.sub-ttl-wrap1 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.line1 {
    width: 8rem;
    height: 1px;
    background-color: #A68D4B;
    display: block;
}

.ttl-en1 {
    color: #A68D4B;
    font-size: 2.6rem;
    font-family: "Cardo", serif;
    font-style: italic;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 1.2px;
}

.ttl-jp1 {
    color: #111111;
    font-size: 2.6rem;
    font-family: "Zen Old Mincho", serif;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: 0.24px;
}

.ttl-gold1 {
    color: #A68D4B;
    font-size: 26px;
    font-family: "Zen Old Mincho", serif;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

/* 本文エリア */
.body-box1 {
    width: 100%;
    max-width: 834px;
    padding: 0 2rem;
    text-align: center;
    box-sizing: border-box;
}

.tag-list1 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 110rem;
}

.tag-list1>.item {
    font-family: "Noto Sans JP", sans-serif;
}

.tag-list1>.item:nth-of-type(4) {
    border-left: unset;
}

@media screen and (max-width: 1310px) {
    .tag-list1>.item:nth-of-type(4) {
        border-left: 1px solid #333;
    }
}

@media screen and (max-width: 480px) {
    .lead-box1 {
        padding: 2rem 2rem 6rem 2rem;
    }

    .txt-l1 {
        font-size: 18px;
        line-height: 2;
    }

    .txt-m1 {
        font-size: 14px;
    }

    .content-box1 {
        padding-bottom: 5rem;
        gap: 4rem;
    }

    .line1 {
        width: 8rem;
    }

    .header-unit1 {
        gap: 1rem;
    }

    .ttl-en1 {
        font-size: 18px;
    }

    .ttl-jp1 {
        font-size: 20px;
    }

    .ttl-gold1 {
        font-size: 20px;

    }

    .tag-list1 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tag-list1>.item {
        font-size: 1.4rem;
        font-weight: 500;
        padding: 0 2.5rem;
    }
    
    .tag-list1 > .item::after {
        top: 3.4rem;
    }

    .tag-list1>.item:nth-of-type(4) {
        border-left: 1px solid #333;
    }
}

/* --- タイトル（金文字） --- */


/* --- 画像エリア --- */
.img1-box img {
    width: 30rem;
}

/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
    .container1 {
        padding: 8rem 0 10rem;
        ;
        margin-bottom: 4rem;
    }

    .img-box1 img {
        width: 24rem;
    }

    .img1 {
        width: 200px;
        /* スマホでは少し小さく */
    }

}

/* ========================================
   これまでのあゆみセクション
   ======================================== */

/* --- カラム全体 --- */
.column-wrapper1 {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    width: 100%;
}

/* 各ブロックの基本構造 */
.column-item1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8rem;
}

/* 反転用のクラス */
.column-item1.is-reverse {
    flex-direction: row-reverse;
}

/* 画像エリア */
.column-img1 {
    width: 50%;
    max-width: 67rem;
    aspect-ratio: 620 / 413;
}

.column-img1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* テキストエリア */
.column-txt-box1 {
    width: 100%;
    max-width: 513px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ttl-m1 {
    color: #111111;
    font-size: 24px;
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.24px;
    margin: 0;
}

/* レスポンシブ対応 */
@media screen and (max-width: 480px) {

    .column-wrapper1 {
        gap: 5rem;
    }

    .column-item1,
    .column-item1.is-reverse {
        flex-direction: column;
        /* スマホ・タブレットでは縦並び */
        gap: 4rem;
    }

    .column-img1,
    .column-txt-box1 {
        width: 100%;
        max-width: 100%;
    }

    .ttl-m1 {
        font-size: 18px;
    }
}

/* 年表全体のコンテナ */
.timeline-container {
    position: relative;
    width: 100%;
    padding: 10rem 4rem;
    background-color: #EFECE3;
    box-sizing: border-box;
}

/* 中央の垂直線 */
.timeline-vertical-line {
    position: absolute;
    left: 50%;
    top: 10rem;
    bottom: 10rem;
    width: 1.5px;
    background-color: #CCCCCC;
    transform: translateX(-50%);
}

/* 行の基本設定 */
.timeline-row {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* 左寄せの時の並び替え */
.timeline-row.is-left {
    justify-content: flex-start;
}

.timeline-row.is-left .timeline-content-wrapper {
    text-align: left;
}

/* 右寄せの時の並び替え */
.timeline-row.is-right {
    justify-content: flex-end;
}

.timeline-row.is-right .timeline-content-wrapper {
    text-align: right;
}

/* コンテンツの中身 */
.timeline-content-wrapper {
    width: 44rem;
}

.timeline-content-wrapper.-up1 {
    transform: translateY(-2rem);
}

.timeline-content-wrapper.-up2 {
    transform: translateY(2rem);
}

.timeline-content-wrapper.-down2 {
    transform: translateY(-2rem);
}

.timeline-year-l1 {
    color: #77593A;
    font-size: 4rem;
    font-family: "Cardo", serif;
}

.timeline-card1 {
    background: #ffffff;
    padding: 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 3;
}

.timeline-card1.is-horizontal {
    flex-direction: row;
    align-items: center;
}

.timeline-card1 .img-single {
    width: 25rem;
    margin: 0 auto;
}

.timeline-card1 .img-single.-w1 {
    width: 15rem;
}

.timeline-img-flex1 {
    display: flex;
    gap: 1rem;
}

.timeline-img-flex1 img {
    width: calc(50% - 5px);
    height: auto;
}

.timeline-txt1 {
    color: #77593A;
    font-size: 15px;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 2;
    text-align: center;
    margin: 0;
}

/* 枝線（コネクタ）の制御 */
.timeline-connector {
    position: relative;
    width: calc(50% - 44rem + 5px);
    min-width: 5rem;
    height: 1px;
    /* 基準の高さ */
    margin-top: 6rem;
}

/* 共通の線とドットのベース */
.timeline-line {
    position: relative;
    width: 100%;
    height: 1px;
    background-color: #A68D4B;
}

/* 擬似要素でドットを作成 */
.timeline-line::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #A68D4B;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.timeline-row.is-left .timeline-line {
    transform: scale(-1);
}

/* --- 傾斜の指定 --- */
.timeline-connector.-up1 .timeline-line {
    transform: rotate(10deg) translateY(-20px);
    ;
}

.timeline-connector.-up2 .timeline-line {
    transform: rotate(20deg) translateY(-24px);
}

.timeline-connector.-down1 .timeline-line {
    transform: rotate(-10deg) translateY(20px);
}

.timeline-connector.-down2 .timeline-line {
    transform: rotate(-20deg) translateY(24px)
}

.timeline-connector.-up1,
.timeline-connector.-down1 {
    width: calc(50% - 44rem + 10px);
}

.timeline-connector.-up2,
.timeline-connector.-down2 {
    width: calc(50% - 44rem + 20px);
}

/* --- 右側コンテンツ用（ドットは中央線＝左端に固定） --- */

.timeline-row.is-left .timeline-connector.-up1 .timeline-line {
    transform: scale(-1) rotate(-10deg) translateY(20px);
}

.timeline-row.is-left .timeline-connector.-up2 .timeline-line {
    transform: scale(-1) rotate(-20deg) translateY(22px);
}

.timeline-row.is-left .timeline-connector.-down1 .timeline-line {
    transform: scale(-1) rotate(10deg) translateY(-20px)
}

.timeline-row.is-left .timeline-connector.-down2 .timeline-line {
    transform: scale(-1) rotate(20deg) translateY(-24px);
}

/* レスポンシブ */
@media screen and (max-width: 1180px) {
    .timeline-content-wrapper {
        width: 30rem;
    }

    .timeline-connector {
        width: calc(50% - 30rem + 5px);
    }

    .timeline-connector.-up1,
    .timeline-connector.-down1 {
        width: calc(50% - 30rem + 10px);
    }

    .timeline-connector.-up2,
    .timeline-connector.-down2 {
        width: calc(50% - 30rem + 20px);
    }

}

@media screen and (max-width: 768px) {
    .timeline-content-wrapper {
        width: 25rem;
    }

    .timeline-connector {
        width: calc(50% - 25rem + 5px);
    }

    .timeline-connector.-up1,
    .timeline-connector.-down1 {
        width: calc(50% - 25rem + 10px);
    }

    .timeline-connector.-up2,
    .timeline-connector.-down2 {
        width: calc(50% - 25rem + 20px);
    }

    .timeline-card1 .img-single {
        width: 18rem;
    }

    .timeline-card1 .img-single.-w1 {
        width: 12rem;
    }

    .timeline-card1.is-horizontal {
        flex-direction: column;
    }
}

@media screen and (max-width: 480px) {
    .timeline-container {
        padding: 3rem 1rem;
    }

    .timeline-vertical-line {
        left: 2rem;
    }

    .timeline-row,
    .timeline-row.is-right {
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 0.5rem;
        margin-bottom: 1rem;
    }

    .timeline-card1 {
        padding: 1rem;
        gap: 0.8rem;
    }

    .timeline-card1 .img-single {
        width: 16rem;
    }

    .timeline-card1 .img-single.-w1 {
        width: 11rem;
    }

    .timeline-card1.is-horizontal {
        flex-direction: row;
    }

    .timeline-connector {
        display: none;
        /* スマホでは枝線を隠す */
    }

    .timeline-txt1 {
        font-size: 12px;
    }

    .timeline-row.is-right .timeline-content-wrapper {
        text-align: unset;
    }

    .timeline-vertical-line {
        top: 3rem;
        bottom: 3rem;
    }

    .timeline-line-sp {
        position: relative;
        width: 9rem;
        height: 1px;
        margin-top: 6rem;
        background-color: #A68D4B;
    }

    /* 擬似要素でドットを作成 */
    .timeline-line-sp::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #A68D4B;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* タイムライン本体 */
.table-timeline-wrapper {
    width: 100%;
    padding: 8rem;
    background: rgba(255, 255, 255, 0.50);
    box-sizing: border-box;
}

.table-timeline {
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 各年の行 */
.table-timeline-item {
    display: flex;
    padding: 24px 0;
    gap: 4rem;
    border-top: 1px solid #ccc;
}

.table-timeline-item.-op1 {
    opacity: 0.7;
}

/* 最後の要素の下線 */
.table-timeline-item:last-child {
    border-bottom: 1px solid #ccc;
}

/* 年 */
.table-timeline-year {
    font-family: 'Cardo', serif;
    font-size: 2.5rem;
    flex-shrink: 0;
    margin: 0;
    line-height: 1.2;
}

/* イベントリスト全体 */
.table-timeline-event {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    gap: 1rem;
}

/* 1つのイベント */
.table-timeline-event-item {
    display: flex;
}

.table-timeline-event-item.-op2 {
    opacity: 0.5;
}

/* 日付 */
.table-timeline-event-item .date {
    width: 10rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.9;
}

/* 説明 */
.table-timeline-event-item .description {
    flex: 1;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

/* --- 非表示用のクラス --- */
.is-hidden {
    display: none;
}

/* --- つづきを読むボタン --- */
.continue-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    margin: 0 auto;
}

/* SVGを使わずCSSで作る丸と＋アイコン */
.circle-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #111;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ＋の横線 */
.circle-icon::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #111;
}

/* ＋の縦線 */
.circle-icon::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 30px;
    background-color: #111;
}

.button-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.14px;
    color: #111;
    margin: 0;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 480px) {
    .table-timeline-wrapper {
        padding: 2rem;
    }

    .table-timeline-item {
        gap: 1rem;
    }

    .timeline-content-wrapper,
    .timeline-line {
        transform: unset !important;
        width: 100%;
    }

    .table-timeline-event-item .date,
    .table-timeline-event-item .description {
        font-size: 12px;
    }

    .table-timeline-event-item .date {
        width: 8rem;
    }
}

/* ========================================
   メニューセクション
   ======================================== */

/*アニバーサリーのレイアウト*/
.layout1 {
    display: flex;
    flex-direction: row-reverse;
    gap: 6rem;
}

.layout1 .layout1-thumb {
    position: relative;
    width: 56%;
    padding: 5rem 0 0 4rem;
}

.layout1 .layout1-thumb .icon-anniversary {
    position: absolute;
    top: 0;
    left: 0;
    width: 15rem;
    height: 15rem;
}

.layout1 .layout1-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.layout2 {
    box-sizing: border-box;
    padding: 3% 3.5%;
    border: solid 2px #6c3f2a;
}

.layout2-inner {
    display: flex;
    gap: 6rem;
}

.layout2-inner .layout2-thumb {
    width: 40%;
}

.layout2-inner .layout2-area {
    flex: 1;
}

/*つなん白純米大吟醸画像*/
.sake-img {
    display: flex;
    align-items: end;
    gap: 0.8rem;
}

.sake-img .notes {
    flex: 1;
}

.sake-img img {
    width: 9rem;
}

@media screen and (max-width:768px) {
    .layout1 {
        gap: 3rem;
    }

    .layout1 .layout1-thumb {
        width: 50%;
    }
}

@media screen and (max-width:480px) {
    .layout1 {
        flex-direction: column;
    }

    .layout1 .layout1-thumb {
        width: 100%;
        padding: 0;
    }

    .layout1 .layout1-thumb .icon-anniversary {
        position: absolute;
        top: -1.5rem;
        left: -1.8rem;
        width: 9.5rem;
        height: 9.5rem;
    }

    .layout1 .layout1-area {
        flex-direction: row;
    }

    .layout2-inner {
        flex-direction: column;
        gap: 3rem;
    }
    .layout2-inner .layout2-thumb {
        width: 100%;
    }

    .sake-img {
        display: flex;
        align-items: end;
        gap: 0.8rem;
    }

    .sake-img .notes {
        display: none;
    }

    .sake-img img {
        width: 6rem;
    }
}

/* ブッフェセクション */
.buffet-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.buffet-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.buffet-image {
    aspect-ratio: 3 / 2;
    background-color: #ccc;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.buffet-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buffet-info {
    border: 1px solid #9b1d3e;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: 0.2s ease-in-out;
}

.buffet-info:hover {
    opacity: 0.7;
}

.buffet-info p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: #9b1d3e;
    letter-spacing: 0.51px;
    line-height: 1.4;
}

.buffet-item.coming-soon .buffet-image {
    background-color: rgba(217, 217, 217, 0.5);
    border: 1px solid #9b1d3e;
    height: 100%;
    aspect-ratio: auto;
}

/* ========================================
   宿泊プランセクション
   ======================================== */
.swiper-slide {
    height: auto !important;
    /* Swiperの高さに追従 */
}

.plan-card {
    background-color: #fff;
    height: 100%;
}

.plan-image-wrapper {
    position: relative;
    aspect-ratio: 407/271;
}

.plan-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plan-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #a68d4b;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.16px;
}

.plan-content {
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 32%;
}

.plan-title {
    font-family: 'Zen Old Mincho', serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 2;
    color: #111;
    letter-spacing: 0.2px;
}

.plan-button {
    box-sizing: border-box;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #9b1d3e;
    border: 1px solid #9b1d3e;
    color: #fff;
    padding: 1rem 3rem;
    border-radius: 4rem;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.8;
    transition: 0.5s ease;
}
.plan-button.w22 {
    width: 22rem;
}

.plan-button:hover {
    background-color: #fff;
    color: #9b1d3e;
    opacity: 1;
}

.plan-button::after {
    content: '›';
    font-size: 19px;
}

.plan-image-wrapper.coming-soon-wrapper {
    background-color: #ccc;
}

/* Coming Soonオーバーレイ */
.coming-soon-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coming-soon-text {
    font-family: 'Cardo', serif;
    font-size: 4rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: 2px;
    transform: rotate(-10deg);
    text-align: center;
}

.coming-soon-text.red {
    color: #9b1d3e;
}

.buffet-item.coming-soon .coming-soon-text {
    font-size: 30px;
    color: #9b1d3e;
}

@media (max-width: 1180px) {
    .plan-title {
        font-size: 1.8rem;
    }

    .plan-content {
        height: 44%;
    }
}

@media screen and (max-width:768px) {
    .buffet-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .buffet-item.coming-soon {
        min-height: 17rem;
    }

    .plan-title {
        font-size: 1.4rem;
    }

    .plan-content {
        height: 48%;
    }

    .plan-button {
        padding: 1rem 2rem;
    }
}

@media (max-width: 480px) {
    .coming-soon-text {
        font-size: 2.4rem;
    }

    .buffet-grid {
        gap: 1rem;
    }

    .buffet-info p {
        font-size: 13px;
    }

    .buffet-item.coming-soon .coming-soon-text {
        font-size: 22px;
    }

    .plan-content {
        height: 32.5%;
    }

    .plan-badge {
        font-size: 15px;
    }

    .plan-title {
        font-size: 16px;
    }

    .plan-button {
        padding: 10px 30px;
        font-size: 13px;
    }
}