@charset "UTF-8";

/* -----------------------------
変数定義
----------------------------- */
:root {
    /* カラー */
    --color-green:#006417;
    --color-primary: #70C498;
    --color-secondary: #9FD6B9;
    --color-tertiary:#E2F2EF;
    --color-accent: #d87070;
    --color-text: #333;
    --color-white: #fff;
    --color-gray: #959595;
    --color-pink: #D8BFD8;
    --color-footer: #70C498;
    
    /* レイアウト */
    --width-content: 100%;
    --width-narrow: 80%;
    --space-unit: 30px;
    --space-space: 15px;
    --space-section: 60px;
    --space-btn: 45px;
    
    /* その他 */
    --duration: 0.7s;
}

/* -----------------------------
ベース
----------------------------- */
body {
    font-family: "Yu Gothic", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* -----------------------------
レイアウト
----------------------------- */
.wrapper {
    width: var(--width-narrow);
    margin: 0 auto;
    position: relative;
    padding: 0 var(--space-unit);
    box-sizing: border-box;
    color: var(--color-text);
}

/* -----------------------------
共通コンポーネント
----------------------------- */
.sec-ttl {
    font-size: 48px;
    font-weight: bold;
    color: #666;
    font-family: Source Han Serif, serif,'Noto Serif JP','Hiragino Mincho ProN';
    text-align: center;
    padding-bottom: var(--space-unit);
}

.menu-ttl {
    text-align: left;
    font-family: Source Han Serif, serif,'Noto Serif JP','Hiragino Mincho ProN';
    font-weight: bold;
    color: #666;
    font-size: 36px;
}

.lead {
    font-size: 14px;
    line-height: calc(26 / 14);
    text-align: center;
    padding-bottom: var(--space-unit);
}

.subtxt {
    font-size: 14px;
    line-height: calc(26 / 14);
    font-weight: normal;
    font-family: 'Noto Sans JP', "Yu Gothic";
    color: #555;
    display: block;
}

.subtxt2 {
    font-size: 14px;
    line-height: calc(30 / 14);
    font-weight: normal;
    font-family: 'Noto Sans JP', "Yu Gothic";
    color: #555;
    display: block;
    text-align: left;
}

.sub {
    color: var(--color-white);
    font-size: 12px;
    line-height: calc(26 / 14);
    font-weight: normal;
    font-family: 'Noto Sans JP', "Yu Gothic";
    display: block;
    padding-bottom: var(--space-space);
}

.sub2 {
    color: var(--color-accent);
    font-size: 10px;
    line-height: calc(26 / 14);
    font-weight: normal;
    font-family: 'Noto Sans JP', "Yu Gothic";
    display: block;
    padding-bottom: var(--space-space);
}

/* ボタン共通 */
.btn {
    display: block;
    text-align: center;
    font-weight: bold;
    transition: all var(--duration);
    margin: 0 auto;
}

/* プライマリーボタン */
.btn-primary {
    width: 290px;
    height: 55px;
    line-height: 55px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 5px;
    line-height: 55px;
    border-radius: 5px;
    font-weight: normal;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* セカンダリーボタン */
.btn-secondary {
    width: 150px;
    height: 45px;
    line-height: 45px;
    border-radius: 5px;
    box-shadow: 0px 2px 3.6px 2.4px rgba(0, 0, 0, 0.16);
    font-size: 15px;
    color: var(--color-text);
    background: #fff;
}

/* Learn more ボタン共通サイズ調整 */
.btn-primary2 {
    display: inline-block;
    padding: 14px 30px;     /* ← 内側の余白で高さ調整 */
    font-size: 16px;
    border-radius: 30px;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    min-width: 200px;       /* ← ボタンの最低幅を設定 */
    text-align: center;
}

.btn-primary3 {
    display: inline-block;
    padding: 14px 30px;     /* ← 内側の余白で高さ調整 */
    font-size: 16px;
    border-radius: 30px;
    background-color: var(--color-pink);
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    min-width: 200px;       /* ← ボタンの最低幅を設定 */
    text-align: center;
}

.btn-primary4 {
    width: 290px;
    height: 55px;
    line-height: 55px;
    color: var(--color-primary);
    border-radius: 5px;
    width: 100%;
    font-weight: normal;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-white);
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
}
    
a.btn-primary4:hover {
    transition: var(--duration); 
    background: var(--color-primary); 
    color: var(--color-white);
}

.btn-row .btn {
    transition: all 0.3s ease;
}

.btn-call {
    width: 290px;
    height: 55px;
    line-height: 55px;
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-shop2 {
    border-width: 1px;
    border-style: solid;
    width: 290px;
    height: 55px;
    line-height: 55px;
    color: #AC8F69;
}

.btn-sns {
    border-width: 1px;
    border-style: solid;
    width: 290px;
    height: 55px;
    line-height: 55px;
    color: #4DC765;
}

.btn-call:hover {
    background: var(--color-white);
    border: 1px solid var(--color-primary); /* 好きな色に変更可能 */
    color: var(--color-primary);
}

.btn-sns:hover {
    background: #4DC765;
    color: #ffffff;
    opacity: 0.9;
    transition: 0.3s ease;
}

.btn-menu {
    display: inline-block;
    padding-bottom: var(--space-space);
}

/* ボタン横並び（PC用） */
.btn-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* 行を折り返すように */
    padding-bottom: var(--space-btn);
}

.btn-row .btn {
display: inline-block;
}

.btn-primary2:hover {
    background: var(--color-secondary);
    color: #ffffff;
    opacity: 0.9;
    transition: 0.3s ease;
}

.btn-primary3:hover {
    background: var(--color-pink);
    color: #ffffff;
    opacity: 0.9;
    transition: 0.3s ease;
}

/* ページトップボタン */
.pagetop {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    background-color: var(--color-tertiary);
    border-radius: 50%;
    opacity: 1;
}

.pagetop:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    border-top: 3px solid var(--color-white);
    border-right: 3px solid var(--color-white);
    translate: 0 20%;
    rotate: -45deg;
    top: calc(50% - 5px); 
    left: calc(50% - 5px);
}

.pagetop:hover {
    transition: all var(--duration);
}

/* ホバー制御 */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover,
    .btn-secondary:hover,
    .pagetop a:hover {
        opacity: 0.7;
    }
}

@media (hover: none) or (pointer: coarse) {
    /* タッチデバイスでの即時反応 */
    .btn-primary:active,
    .btn-secondary:active,
    .pagetop a:hover {
        opacity: 1;
    }
}

.container {
    display: flex;
    width: 100%;
}
/* -----------------------------
サイドバー
----------------------------- */
.sidebar {
    width: 25%; /* デスクトップでは25% */
}

.fixed-area {
    height: 100vh;
    background-color: #fff;
    border-right: 1px solid #eee;
    padding: 45px;
    box-sizing: border-box;
    overflow-y: auto;
    position: fixed; /* ← 固定 */
    width: 25%; /* デスクトップでは25% */
}

/* main：残りの幅を使う */
main {
    box-sizing: border-box;
    width: 75%;
}

/* ロゴ */
.logo img {
    margin: 0 auto;
    padding-bottom: var(--space-unit);
}

/* 検索フォーム */
.search {
    position: relative;
    padding-bottom: var(--space-unit);
}

.search input {
    width: 230px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--color-gray);
    box-sizing: border-box;
    font-size: 20px;
    padding-left: 30px;
}

/* 検索フォームsp */
.search-sp {
    display: none;
}

.search-icon {
    position: absolute;
    top: 10px;
    left: 10px;
}

/* ナビゲーション */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: var(--space-unit);
}

.nav-list li {
    border-bottom: 1px solid #e0e0e0;
}

.nav-list a {
display: block;
font-family: Source Han Serif, serif,'Noto Serif JP','Hiragino Mincho ProN';
font-size: 20px;
font-weight: bold;
color: var(--color-green);
text-decoration: none;
padding: 10px 10px;
transition: var(--duration);
}

/* ホバー効果 */
.nav-list a:hover {
background-color: var(--color-secondary);
color: var(--color-white);
padding-left: 20px;
}

/* ボタン */
.btn-group .btn {
display: block;
text-align: center;
padding: 15px;
text-decoration: none;
margin-bottom: 15px;
font-weight: bold;
letter-spacing: 0.01rem;  /* 2ピクセル間隔 */
}

.btn-tel {
    border-width: 1px;
    border-style: solid;
    color: #5dc1cf;
}

.btn-tel .subtxt {
    color: #5dc1cf; 
}

.btn-line {
    border-width: 1px;
    border-style: solid;
    color: #4DC765;
}

.btn-line .subtxt {
    color: #4DC765; 
}

.btn-shop {
    border-width: 1px;
    border-style: solid;
    color: #AC8F69;
}

.btn-shop .subtxt {
    color: #AC8F69; 
}

/* ボタン全体にアニメーションを設定（初期状態は変えない） */
.btn-group .btn {
    transition: all 0.3s ease;
}

/* 電話ボタン：ホバー時のみ変更 */
.btn-tel:hover {
    background-color: #5dc1cf;
    color: var(--color-white);
    border-color: #5dc1cf;
}

.btn-tel:hover .subtxt {
    color: var(--color-white);
}

/* LINEボタン：ホバー時のみ変更 */
.btn-line:hover {
    background-color: #4DC765;
    color: #fff;
    border-color: #4DC765;
}

.btn-line:hover .subtxt {
    color: #fff;
}

/* ショップボタン：ホバー時のみ変更 */
.btn-shop:hover {
    background-color: #AC8F69;
    color: #fff;
    border-color: #AC8F69;
}

.btn-shop2:hover {
    background-color: #AC8F69;
    color: #fff;
    border-color: #AC8F69;
}

.icon-primary2:hover {
    color: #fff;
}

.btn-shop:hover .subtxt {
    color: #fff;
}

/* ハンバーガーメニュー */
.menu {
    display: none;
}

/* -----------------------------
メインビジュアル
----------------------------- */
.slider {
    margin-bottom: var(--space-section);
}

.slider img {
    width: 100%;
    margin: 0 auto;
}

/* スライダー矢印カスタマイズ */
.slick-prev {
    left: 40px;
    z-index: 1;
    transform: rotateY(180deg);
}

.slick-next {
    right: 40px;
}

.slick-prev:before,
.slick-next:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f105";
}

/* -----------------------------
pickup セクション01
----------------------------- */
.pickup-wrapper {
    display: flex;
    gap: 16px; /* 画像の間隔を調整したい場合に使用 */
    justify-content: center; /* 中央寄せにしたい場合 */
    padding-bottom: var(--space-btn);
}

.pick-up img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------
news セクション02
----------------------------- */
.sec-02 {
    padding: var(--space-section) 0;
}

.sec-02 .wrapper {
    width: var(--width-narrow);
}

.news-list {
    padding-bottom: var(--space-btn);
}

.news-list dt {
    position: absolute;
    padding: var(--space-unit) 0;
    font-size: 14px;
    color: var(--color-primary);
}

.news-list dd {
    padding: var(--space-unit) 0 var(--space-unit) 10em;    /* 上右下左 */
    border-bottom: 1px dotted var(--color-text);
    font-size: 14px;
}

.news-list dd a {
    text-decoration: none;
    color: var(--color-link);
}

.news-list dd a:hover {
    text-decoration: underline;
    color: var(--color-text);
}

.new {
    display: inline-block;
    width: 37px;
    height: 19px;
    line-height: 19px;
    border-radius: 3px;
    background: var(--color-accent);
    text-align: center;
    font-size: 12px;
    color: var(--color-white);
    margin-left: 10px;
}

/* -----------------------------
セクション03
----------------------------- */
.sec-03 .wrapper {
    width: var(--width-narrow);
    padding-bottom: var(--space-section);
}

.cpt-wrapper {
    display: block;
}

.cpt-lead {
    font-family: Source Han Serif, serif,'Noto Serif JP','Hiragino Mincho ProN';
    padding-bottom: var(--space-space);
    font-size: 21px;
    text-align: center;
    margin: 0 auto;
}

.lead-s03 {
    font-family: 'Noto Sans JP', "Yu Gothic";
    font-size: 14px;
    line-height: calc(26 / 14);
    text-align: center;
    padding-bottom: var(--space-unit);
}

/* 動画 */
.video-section {
    padding-bottom: var(--space-section);
}
video {
    width: 100%;
    height: auto;
}

/* -----------------------------
セクション04
----------------------------- */
.sec-04 .wrapper {
    width: var(--width-narrow);
}

.sec-04 .menu-ttl {
    font-size: 28px;
    color: var(--color-white);
}

.card-list {
    --grid-gap: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--grid-gap);
}

.card {
    /*↓計算式 ((100%-gapの数×var(30px))/3)*/
    width: calc((100% - 2 * var(--grid-gap)) / 3); 
    box-sizing: border-box;
    padding: 16px;
    scroll-snap-align: start;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    min-height: 360px;  /* 高さを揃える */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--color-secondary);
}

.card-ttl {
    font-size: 18px;
    line-height: calc(30 / 18);
    font-weight: bold;
    text-align: center;
    padding-bottom: var(--space-unit);
}

.sec-04 {
    padding-bottom: var(--space-section);
}

.card p {
    font-size: 14px;
    line-height: calc(26 / 14);
    padding-bottom: var(--space-unit);
    color: var(--color-white);
}

/* -----------------------------
セクション05
----------------------------- */
.sec-05 .wrapper {
    width: var(--width-narrow);
}
.sec-05 {
    background-image: url(../img/sec04-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: var(--space-section) 0;
    color: var(--color-white);
}

.sec-05 .box-list a {
    color: var(--color-primary);
}

.box-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: var(--space-btn);
}

.box {
    width: calc(50% - var(--space-unit));
    display: flex;
    align-items: stretch;
    margin-bottom: 30px;
    background: var(--color-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.box:hover {
    transform: translateY(-10px); /* ← 浮かせる量を増やす */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); /* ← 影を強調 */
}

.box-img {
    width: 30%;
    margin: 30px 0;
}

.box-content {
    display: flex;
    align-items: center;
    padding: var(--space-space);
    width: 70%;
    color: var(--color-text);
}

.box-ttl {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: var(--space-unit);
}

.box-txt {
    font-size: 14px;
    line-height: calc(26 / 14);
}

/* -----------------------------
セクション06-------about
----------------------------- */
.sec-06 .wrapper {
    width: var(--width-narrow);
    padding-bottom: var(--space-section);
}

.card-list2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 calc(-1 * var(--space-unit));
}

.sec-06 h2 {
    padding-top: 60px;
}
.card-s06{
    width: 400px;
    box-sizing: border-box;
    padding: 0 var(--space-unit);
}

.card-s06 img {
    padding-bottom: var(--space-unit);
}

.sec06-ttl {
    font-size: 28px;
    color: #AC8F69;
    opacity: 50%;
    text-align: left;
    font-weight: bold;
    text-align: center;
    font-family: Source Han Serif, serif,'Noto Serif JP','Hiragino Mincho ProN';
    padding-bottom: var(--space-space);
}

.sec06subtxt {
    font-size: 18px;
    font-weight: bold;
    color: #AC8F69;
    font-family: Source Han Serif, serif,'Noto Serif JP','Hiragino Mincho ProN';
    padding: 5px 15px;
}

.s06-ttl {
    display: flex;
}

.card-txt {
    font-size: 14px;
    line-height: calc(26 / 14);
}
.sec-04 .wrapper {
    width: var(--width-narrow);
}

.sec-04 .menu-ttl {
    font-size: 24px;
    color: var(--color-white);
    padding: 15px 0 0;
}

.card-list2 {
    --grid-gap: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--grid-gap);
}

.card-s06 {
    /*↓計算式 ((100%-gapの数×var(30px))/3)*/
    width: calc((100% - 2 * var(--grid-gap)) / 3); 
    box-sizing: border-box;
    padding: 16px;
    scroll-snap-align: start;
    min-height: 360px;  /* 高さを揃える */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-ttl {
    font-size: 18px;
    font-family: Source Han Serif, serif,'Noto Serif JP','Hiragino Mincho ProN';
    line-height: calc(30 / 18);
    font-weight: bold;
    text-align: center;
    padding-bottom: var(--space-unit);
}

/* -----------------------------
セクション07-----Q&Aアコーディオン
----------------------------- */
.sec-07 .wrapper {
    /* padding-bottom: var(--space-section); */
    width: var(--width-narrow);
}

.faq-accordion {
    margin: 0 auto;
    padding-bottom: var(--space-unit);
}

.sec03-btn {
    padding-bottom: var(--space-btn);
}

.panel {
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    margin-bottom: 15px;
    color: var(--color-text);
}
.panel-header {
    width: 100%;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-tertiary);
    border: none;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
}
    
.panel-header:hover {
background: var(--color-primary);
color: var(--color-white);
}
    
/* Q&Aページ */
.qa .sec-ttl {
padding-bottom: var(--space-btn);
}

.qa-ttl {
font-size: 28px;
padding-bottom: var(--space-unit);
text-align: center;
color: var(--color-primary);
}

.icon-primary {
color: var(--color-white);
}

.icon-primary2 {
    color: #AC8F69;
}

.icon {
font-size: 20px;
transition: transform 0.3s;
color: var(--color-primary);
}

.panel-header:hover .icon {
background: var(--color-primary);
color: var(--color-white);
    }

.panel-header.active .icon {
    transform: rotate(45deg);
}

.panel-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
}

.panel-body {
    line-height: calc(24 / 16);
    padding: 20px;
    border-top: 1px solid #eee;
    background: var(--color-white);
}

/* -----------------------------
フッター
----------------------------- */
.footer {
    background: var(--color-white);
}

.footer .wrapper {
    width: var(--width-narrow);
    padding: var(--space-section) 0;
    /* justify-content: space-between; */
    align-items: flex-start;
}

.address {
    width: 100%;
    font-size: 15px;
    /* display: flex; */
}

.footer .footer-ttl {
    display: block;
    /* width: 50%; */
    height: auto;
    margin: 0;
    font-weight: bold;
    color: var(--color-primary);
    padding-bottom: var(--space-space);
}

.address address {
    line-height: calc(24 / 15);
    /* margin: 0 30px; */
}

.footer-nav {
    /* display: flex; */
    width: 870px;
    justify-content: space-between;
}

.footer-nav ul + ul {
    margin-left: 30px;
}

.footer-nav li {
    font-size: 15px;
    line-height: 1.4;
}

.footer-nav li + li {
    margin-top: 8px;
}

.footer-nav a {
    color: var(--color-text);
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
}

.copyright {
    padding: 10px 0;
    background: var(--color-footer);
    color: var(--color-white);
    text-align: center;
    font-size: 12px;
}

.copyright small {
    display: block;
    margin: 0px;
    line-height: 1.4;
}

/* アニメーション関連のCSS */
.f-up {
    opacity: 0;
}

.f-up.fadeup {
    animation: fadeupanime 1s forwards;
}

@keyframes fadeupanime {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MENUページ----------------------------
カード型MENU ----------------------------*/
.menu-page .sec-01 {
    padding-bottom: var(--space-section);
}

.menu-page .slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    padding: 0 20px;
    padding-bottom: var(--space-section);
}

.menu-page .card-list {
    color: var(--color-white);
}

.carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 20px;
}

.menu-page .card {
    flex: 0 0 auto;
    width: 300px;
    min-height: 360px;
    /* padding: 20px; */
    margin: 0 0 16px 0;
    background: var(--color-tertiary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: start;
    box-sizing: border-box;
}

.menu-page .card h3 {
    font-size: 24px;
    color: var(--color-primary);
    font-weight: bold;
}

.menu-page .card h3,
.menu-page .card p {
    word-wrap: break-word;
    white-space: normal;
    padding-bottom: 0;
}

.m-ttl {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Noto Sans JP', "Yu Gothic";
    text-align: left;
    color: var(--color-primary);
    opacity: 0.8;
}
.menu-page .card p {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}

.menu-page .card img {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-space);
}

.arrow-area {
    position: absolute;
    right: 20px;
    display: flex;
    gap: 12px;
    z-index: 20;
    top: 90%;
}

.arrow {
    position: relative;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border: none;
    /* border-radius: 50%; */
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: all var(--duration);
}

.arrow::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 3px solid var(--color-white);
    border-right: 3px solid var(--color-white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.arrow.left::before {
    transform: translate(-50%, -50%) rotate(-135deg);
}


/* MENUページ----------------------------
メニュー表 ----------------------------*/
.menu-sec-02 {
    padding-bottom: var(--space-section);
}

.menu-page .table-wrap {
    padding-bottom: var(--space-btn);
}

.tableWrap {
margin: 0 auto;
}

.tableWrap th {
background: #eee;
}

.tableWrap, td, th{
border: 1px solid #ccc;
border-collapse: collapse;
}

.tableWrap th, .tableWrap td {
text-align: center;
min-width: 130px;
padding: 10px;
height: 60px;
}

.tableWrap {
    overflow-x: scroll;
    white-space: nowrap;
}

.tableWrap {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* ← 各列を均等に配分 */
}

.tableWrap th,
.tableWrap td {
padding: 16px 12px;
vertical-align: middle;
font-size: 14px;
line-height: 1.6;
}

.menu-sec-02
.tableWrap th {
text-align: center;
background: var(--color-primary);
color: var(--color-white);
}

.menu-sec-03
.tableWrap th {
text-align: center;
background: #B3A0BE;
color: var(--color-white);
}

.menu-sec-02,
.menu-sec-03,
.tableWrap td {
text-align: left;
white-space: normal;
word-break: break-word;
}

.tableWrap img {
display: block;
margin: 10px auto 0;
max-width: 100%;
height: auto;
}

.menu-name {
    background:var(--color-tertiary);
    font-weight: bold;
}

.menu-name2 {
    background: #D8BFD8;
    color: var(--color-white);
    font-weight: bold;
}

/* ACCESSページ------------
-------------------------- */
.access {
background-color: #fff;
padding: var(--space-section);
}

.access-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
padding-bottom: var(--space-btn);
}

.access-info {
flex: 1 1 30px;
}

.access-table {
width: 100%;
border-collapse: collapse;
}

.access-table th {
text-align: left;
width: 100px;
font-weight: bold;
vertical-align: top;
border-bottom: 1px solid #ccc;
}

.access-table tr {
    border-bottom: 1px solid #ccc; /* 行に下線 */
    padding-bottom: var(--space-space);
}

.access-table td {
border-bottom: 1px solid #ccc;
padding: 10px 5px 10px 5px;
}

.access-map {
flex: 1 1 320px;
position: relative;
aspect-ratio: 16/9;
}

.access-map iframe {
width: 100%;
height: 100%;
border: 0;
position: absolute;
top: 0;
left: 0;
}

.access-table th,
.access-table td {
display: block;
border: none;
padding: 0.5em 0;
border-spacing: 0;
padding: 12px 0;
text-align: left;
vertical-align: top;
border: none; /* 個々のセルには線なし */
}




.access {
    background-color: #fff;
}

.access-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
padding-bottom: var(--space-btn);
}

.access-info {
flex: 1 1 30px;
}

.access-table {
width: 100%;
border-collapse: collapse;
}

.access-table th,
.access-table td {
display: block;
border: none;
padding: 12px 0;
text-align: left;
vertical-align: top;
}

.access-table tr {
border-bottom: 1px solid #ccc;
padding-bottom: var(--space-space);
}

.access-map {
flex: 1 1 320px;
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}

.access-map iframe {
width: 100%;
height: 100%;
border: 0;
position: absolute;
top: 0;
left: 0;
}

body.single .wrapper a.btn {
    margin-bottom: var(--space-btn);
}

body.single .wrapper h3 {
    padding-bottom: var(--space-space);
    font-weight: bold;
}

body.single .wrapper p {
    padding-bottom: var(--space-unit);
}

body.single .wrapper .btn-secondary {
    padding-bottom: var(--space-unit);
}