h2{font-size:1.8rem;margin:0 0 .5rem 0;}
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');

:root{
  --btn-solid-bg: rgba(120,120,120,0.75);
  --btn-solid-bg-hover: rgba(120,120,120,0.68);
  --btn-solid-text: #fff;
}

body{font-family:"Zen Old Mincho",serif;background:#cfd9cf;color:#333;margin:0}

/* Hero */
.hero{height:100vh;width:100%;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-1;opacity:0;transition:opacity 1s ease-in-out}
.hero-bg.active{opacity:1}


/* Intro */
.intro-section{background:#5f685e;color:#fff;padding:3rem 0;text-align:center;font-size:1.1rem;line-height:2}

/* 共通セクション（客室/お風呂） */
.section{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;
  padding:4rem 2rem;max-width:1000px;margin:4rem auto 0;background:#cfd9cf;
  font-size:1rem;line-height:1.8;color:#555;box-sizing:border-box;
}
.description{flex:1 1 420px;padding-right:2rem;}
.description p{margin:0}
.slideshow-container{flex:1 1 640px;position:relative;max-width:none;padding:0;box-sizing:border-box;}
.slideshow-container img{width:100%;height:auto;display:block}
.slides-room,.slides-bath,.slides-facility,.slides-food{display:none;width:100%}


/* スライド矢印（細い白） -- スライド内に限定 */
.slideshow-container .prev,
.slideshow-container .next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; width:30px; height:30px; padding:0;
  cursor:pointer; z-index:10;
}
.slideshow-container .prev::before,
.slideshow-container .next::before{
  content:""; display:inline-block; width:12px; height:12px;
  border-top:2px solid #fff; border-right:2px solid #fff;
}
.slideshow-container .prev{ left:15px; }
.slideshow-container .prev::before{ transform:rotate(-135deg); }
.slideshow-container .next{ right:15px; }
.slideshow-container .next::before{ transform:rotate(45deg); }

/* お料理（全幅・フェード＋軽いズーム） */
.food-section{position:relative;width:100%;overflow:hidden;height:80vh}
.food-section img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition: transform 7000ms ease, opacity 1000ms ease;
  will-change: transform, opacity; transform: scale(1);
}
.food-section img.active{opacity:1}
/* PC: ホバー中のみズーム */
@media (hover:hover){ .food-section:hover .slides-food.active{ transform: scale(1.08); } }
/* タッチ環境: 可視域でズーム（JSで .touch-inview 付与） */
@media (hover:none){ .food-section:hover .slides-food.active{ transform:none; } }
.food-section.touch-inview .slides-food.active{ transform: scale(1.06); }

/* タイトル＆本文 */
.food-title{position:absolute;top:30%;left:50%;transform:translateX(-50%);color:#fff;font-size:2.5rem;z-index:2}
.food-desc{
  position:absolute; top:calc(30% + 3rem); left:50%; transform:translateX(-50%);
  color:#fff; font-size:1.2rem; line-height:1.8; text-align:center; z-index:2;
  max-width:900px; padding:0 2rem; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
@media (max-width:768px){
  .food-title{font-size:1.8rem}
  .food-desc{font-size:1rem; line-height:1.7; top:calc(30% + 2.4rem); max-width:92vw;}
}
@media (max-width:480px){
  .food-title{font-size:1.5rem}
  .food-desc{font-size:.95rem; line-height:1.6; top:calc(30% + 2.2rem);}
}
/* 写真の明度を少し落として可読性UP（全面・薄い黒） */
.food-section::after{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0;
  background: rgba(0,0,0,.10); pointer-events:none; z-index:1;
}

/* 歴史（横スクロール） */
.history-section{overflow:hidden;width:100vw;padding:4rem 0}
.history-title{font-size:1.8rem}
.history-description{margin-bottom:1rem;font-size:1rem;line-height:1.8}
.history-viewport{overflow:hidden;width:100%}
.history-container{display:flex;width:max-content;animation:history-scroll 100s linear infinite;will-change:transform;backface-visibility:hidden;transform:translateZ(0);gap:0}
.history-container img{display:block;margin:0;padding:0;width:calc(100vw/3);height:calc((100vw/3)*0.66);object-fit:cover;flex:0 0 calc(100vw/3)}
@keyframes history-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:1024px){.history-container img{width:40vw;flex:0 0 40vw;height:calc(40vw*0.66)}}
@media (max-width:640px){.history-container img{width:50vw;flex:0 0 50vw;height:calc(50vw*0.66)}}

/* フェード分離アニメ */
.reveal-up,.reveal-fade{opacity:0}
.reveal-up{transform:translateY(36px);transition:opacity 900ms ease,transform 900ms ease}
.reveal-fade{transition:opacity 900ms ease}
.reveal-up.visible{opacity:1;transform:translateY(0)}
.reveal-fade.visible{opacity:1}

/* === 予約バー（integrated_room2fix の設定を維持） === */
.fixed-reservation{
  position:fixed;left:0;bottom:0;width:100%;
  background:rgba(0,0,0,.7);color:#fff;padding:10px 20px;
  font-size:.95rem;text-align:center;line-height:1.6;z-index:9999;
  box-sizing:border-box;word-break:break-word
}
@media (max-width:480px){.fixed-reservation{padding-left:10px;padding-right:10px}}
.fixed-reservation .reservation-title{font-size:.95rem;font-weight:bold}
.fixed-reservation .reservation-note{font-size:.9rem;line-height:1.4}
/* 折返しの基本は許可（PC時のみノート文を1行維持） */
.fixed-reservation .reservation-title,.fixed-reservation .reservation-note{white-space:normal}
@media (min-width:641px){
  .fixed-reservation{font-size:1.33rem}
  .fixed-reservation .reservation-title{font-size:1.33rem;line-height:1.35}
  .fixed-reservation .reservation-note{font-size:1.26rem;line-height:1.35;white-space:nowrap}
}

/* 共通インナー／セクション間隔 */
.inner-1000{max-width:1000px;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.intro-section + .section{margin-top:4rem}
.section + .section{margin-top:4rem}
.section + .food-section{margin-top:4rem}
.history-container img+img{margin-left:-1px}

/* 菊の背景 */
#rooms, #bath, #facilities, #history, #access, #okami-dolls {
  background-image: url("../images/common/kiku_background.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}

/* スマホ本文左右対称 */
@media (max-width:768px){.description{padding-right:0}}

/* ===== Fixes to restore responsive reservation bar & mobile text sizing (2025-08-11) ===== */
.fixed-reservation{ padding-top:8px; padding-bottom:8px; }
.fixed-reservation .reservation-title,
.fixed-reservation .reservation-note { white-space: normal; }
@media (min-width: 641px){
  .fixed-reservation { font-size: 1.24rem; }
  .fixed-reservation .reservation-title { font-size: 1.24rem; line-height: 1.3; }
  .fixed-reservation .reservation-note  { font-size: 1.15rem; line-height: 1.3; white-space: nowrap; }
}
@media (max-width: 640px){
  .fixed-reservation { font-size: 0.80rem; }
  .fixed-reservation .reservation-title { font-size: 0.80rem; line-height: 1.15; white-space: nowrap; }
  .fixed-reservation .reservation-title br { display: none; }
  .fixed-reservation .reservation-note  { font-size: 0.72rem; line-height: 1.2; white-space: normal; }
}
@media (max-width: 380px){
  .fixed-reservation { font-size: 0.76rem; }
  .fixed-reservation .reservation-title { font-size: 0.76rem; line-height: 1.1; }
  .fixed-reservation .reservation-note  { font-size: 0.68rem; line-height: 1.15; }
}

/* ===== Food description width/position safeguards ===== */
@media (max-width: 640px){
  .food-section .food-desc{
    max-width: 94vw;
    padding-left: 1rem;
    padding-right: 1rem;
    top: calc(28% + 2.2rem);
  }
}
@media (max-width: 380px){
  .food-section .food-desc{
    max-width: calc(100vw - 1rem);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    top: calc(25% + 2rem);
  }
}

/* === Mobile adjustments for "お料理" title and description === */
@media (max-width: 640px){
  .food-section .food-title{
    line-height: 1.3;
    margin-bottom: 0.4rem;
    top: 26% !important; /* move title up */
  }
  .food-section .food-desc{
    line-height: 1.9 !important; /* more breathing space */
    top: calc(26% + 2.6rem) !important; /* move desc up with title */
  }
}
@media (max-width: 380px){
  .food-section .food-title{
    line-height: 1.3;
    top: 24% !important;
  }
  .food-section .food-desc{
    line-height: 1.85 !important;
    top: calc(24% + 2.4rem) !important;
  }
}

/* === Responsive intro paragraph font-size adjustment === */
@media (max-width: 640px){
  .intro-section p{
    font-size: 0.77rem !important;
    line-height: 1.65 !important; /* slightly tighter to match reduced size */
  }
}

/* === Responsive intro paragraph font-size adjustment (85% of PC) === */
@media (max-width: 640px){
  .intro-section p{
    font-size: 0.935rem !important;
    line-height: 1.7 !important;
  }
}

@media (max-width: 768px) {
  .section#food .description {
    max-width: 95% !important;
  }
}

/* --- Room slide captions --- */
.caption-room{
  background:#5f685e;
  color:#fff;
  padding:.6rem .8rem;
  font-size:.95rem;
  line-height:1.5;
  margin:0;
}
@media (max-width:640px){
  .caption-room{ font-size:.9rem; line-height:1.6; }
}

/* Group room image and caption together for consistent layout */
.room-slide{ display:none; }

/* Ensure room images show when wrapped */
.room-slide .slides-room{ display:block !important; }

/* Fade animation for food slideshow */
.fade{ animation-name: foodfade; animation-duration: 1s; }
@keyframes foodfade{ from{opacity:.35} to{opacity:1} }


/* === Food slideshow: restore hover/touch zoom & smooth fade === */
.slideshow-container .slides-food{
  transition: transform 7000ms ease, opacity 1000ms ease;
  will-change: transform, opacity;
  transform: scale(1);
}
/* PC hover: only current slide zooms */
@media (hover:hover){
  .slideshow-container:hover .slides-food.current{ transform: scale(1.06); }
}
/* Touch: when in-view, gently zoom current slide */
.slideshow-container.touch-inview .slides-food.current{ transform: scale(1.06); }


/* お料理セクションの画像を左右いっぱいに */
#food .slideshow-container img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto;
    display: block;
    object-fit: cover;
}
#food .slideshow-container {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%);
}

/* お料理セクションの画像を左右いっぱいに（矢印も端に） */
#food .slideshow-container {
    width: 100vw !important;
    margin: 0 auto !important;
    position: relative;
    left: 0;
    right: 0;
}
#food .slideshow-container img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto;
    display: block;
    object-fit: cover;
}
#food .prev {
    left: 0 !important;
}
#food .next {
    right: 0 !important;
}

/* === 女将の手づくり人形ギャラリー === */
.dolls-section .dolls-visual{ flex:1 1 640px; display:flex; justify-content:center; align-items:center; }
.dolls-figure{ position:relative; margin:0; max-width: 900px; width:100%; }
.dolls-figure img{ width:100%; height:auto; display:block; }
.speech-bubble{
  position:absolute; left:6%; top:8%;
  background:#fff; color:#333; padding:.5rem .8rem;
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.18);
  font-weight:600; letter-spacing:.02em; transform:rotate(-4deg);
  border:2px solid #e5e5e5;
}
.speech-bubble:after{
  content:""; position:absolute; left:12%; top:100%;
  border-width:10px; border-style:solid;
  border-color:#e5e5e5 transparent transparent transparent;
  transform:translateY(-1px);
}
@media (max-width: 720px){
  .speech-bubble{
    transform: scale(0.8) rotate(-4deg);
    transform-origin: top left;
    left: 4%;
    top: 2%;
    font-size: .95rem;
  }
  .speech-bubble:after{ left: 16%; }
}

/* === Hero background video === */
#hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; filter:brightness(0.82); }
.hero-content-wrap{ position:relative; z-index:1; }
/* Mobile: hide video for performance */

/* Rectangular CTA buttons: thin gothic, no rounded corners */
.rect-btn{
display:inline-block;
  padding:12px 28px;
  background:var(--btn-solid-bg);
  color:var(--btn-solid-text);
  text-decoration:none;
  border:0;
  border-radius:0;            /* 直方体 */
  font-family:"Zen Old Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; /* 明朝体 */
  font-weight:400;            /* 標準の明朝ウェイト */
  font-size:1rem;
  line-height:1.2;
  box-sizing:border-box;
  transition:background .25s ease, color .25s ease;
  margin-top:2em;
}
.rect-btn:hover{
background:#8a8a8a; /* さらに薄く */
  color:var(--c-bg, #cfd9cf);
}

/* Contact: bold gothic, no underline */
.contact{
font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  font-weight:700;
  color:var(--c-ink, #5f685e); /* 見出しと同じ色 */
  line-height:1.9;
}
.contact a{
color:inherit;
  text-decoration:none;
  font-weight:700;
}
.contact a:hover{
opacity:.85;
}
.contact .label{ margin-right:.4em; }

.contact{
font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  color: var(--c-ink, #5f685e);
  line-height: 1.9;
}

.contact a{
color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.contact a:hover{
opacity: .85;
}

.fixed-bar a{
font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  text-decoration: none;
  color: inherit;
}

.fixed-tel {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Meiryo", sans-serif;
  font-weight: 400;
  text-decoration: none !important;
  color: #333 !important;
}

/* === Mobile: show a bit more width without black bars (keep cover) === */
:root { --reserve-bar-h: 88px; } /* adjust to your fixed bar height */

@media (max-width: 640px){
  .hero{
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 10.5 / 16;
    overflow: hidden;
    background:#000;
  }
  .hero video, #heroVideo{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit: cover;            /* keep cover -> no black bars */
    object-position: 50% 50%;     /* slight vertical bias; adjust as needed */
  }
}
@supports not (aspect-ratio: 1 / 1){
  @media (max-width: 640px){
    .hero{ height:auto !important; }
    .hero::before{
      content:""; display:block;
      padding-top: 150%;          /* 10.5:16 = 高さ/幅=16/10.5=1.5 → 150% */
    }
    .hero video, #heroVideo{
      position:absolute; inset:0; width:100%; height:100%;
      object-fit: cover; object-position: 50% 48%;
    }
  }
}

:root{
    --hero-logo-w-sp: min(64vw, 420px);   /* SP時のロゴ幅 */
    --hero-logo-w-pc: min(56vw, 520px);   /* PC時のロゴ幅 */
    --hero-logo-nudge-y: 0vh;             /* 上下調整（単位つき、親=hero基準） */
  }

  /* ヒーロー本体（動画は常に中央基準でcover） */
  .hero{ position: relative; overflow: hidden; }
  .hero video, .hero #heroVideo, .hero .hero__video{
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
    display: block;
  }

  /* ロゴオーバーレイ：左右中央 + 上下は calc(50% + nudge) で一元管理 */
  .hero > .hero-logo-stack--centered{
    position: absolute;
    left: 50%;
    top: calc(50% + var(--hero-logo-nudge-y));
    transform: translate(-50%, -50%);
    display: grid; place-items: center;
    pointer-events: none; z-index: 3;
  }

  /* 子画像は「完全重ね」& transformは使わない（ブラウザ差を減らす） */
  .hero > .hero-logo-stack--centered .hero-logo-01,
  .hero > .hero-logo-stack--centered .hero-logo-02{
    grid-area: 1 / 1;
    width: var(--hero-logo-w-sp);
    height: auto;
    opacity: 0; display: block;
    transform: none !important; /* ← 子側のtranslateYは常に無効化 */
  }
  @media (min-width: 769px){
    .hero > .hero-logo-stack--centered .hero-logo-01,
    .hero > .hero-logo-stack--centered .hero-logo-02{
      width: var(--hero-logo-w-pc);
    }
  }

  /* フェード（01 → 0.5秒後に02） */
  .hero > .hero-logo-stack--centered .hero-logo-01{
    animation: heroLogoFade .8s ease forwards; animation-delay: 1s;
  }
  .hero > .hero-logo-stack--centered .hero-logo-02{
    animation: heroLogoFade .8s ease forwards; animation-delay: 1.5s;
  }
  @keyframes heroLogoFade{ from{opacity:0} to{opacity:1} }

  .hero-content-wrap{ position: static !important; }

.slideshow-container picture { display:block; }
  .history-container picture  { display:block; }
  .dolls-visual picture       { display:block; }

:root{
    /* 固定予約バーの見た目の高さを1か所で定義 */
    --reserve-bar-h: 88px; /* 実測に合わせて調整：56〜72pxが目安 */
  }

  /* 画面下に固定バーが乗るので、本文側でその分の余白を常に確保 */
  body{
    padding-bottom: calc(var(--reserve-bar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* 固定バーも同じ変数を参照（視覚の一貫性） */
  .fixed-reservation{
    min-height: var(--reserve-bar-h);
  }

  /* PCでバーが少し高い場合はメディアクエリで上書き（任意） */
  @media (min-width: 769px){
    :root{ --reserve-bar-h: 99px; }
  }

.i18n-note,
  .i18n-diet-note{
    font-size:.9em;
    line-height:1.6;
    opacity:.92;
  }
  .fixed-reservation .i18n-note{ margin-left:.75em; }
  #food .i18n-diet-note{ margin-top:.8em; }

/* === Pricing CTA (subtle outline button) === */
.btn-outline{
  display:inline-block;
  padding: 12px 18px;
  border: 1px solid rgba(95,104,94,0.55);
  border-radius: 999px;
  color: #5f685e;
  background: transparent;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-outline:hover{
  transform: translateY(-1px);
  background-color: rgba(95,104,94,0.06);
  border-color: rgba(95,104,94,0.75);
}
.pricing-cta{ margin-top: 14px; }

/* === Pricing page layout === */
.page-pricing .content{
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 18px 90px; /* leave room for fixed reservation bar */
  box-sizing: border-box;
}
.page-pricing .page-title{ font-size:1.8rem; margin: 0 0 14px; color:#333; }
.page-pricing .pricing-lead{ line-height: 1.9; margin: 0 0 24px; color:#555; }
.page-pricing .section-title{ font-size:1.4rem; margin: 30px 0 12px; color:#333; }
.page-pricing .sub-title{ margin: 18px 0 10px; font-size: 1rem; opacity: .9; color:#333; }

/* === Cancel section (only) spacing === */
.page-pricing #cancel.section-title{
  margin: 12px 0 10px;
}

.page-pricing #cancel + .section-lead{
  margin: 0 0 16px;
}


/* Tables */
.table-wrap{ margin: 10px 0 18px; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.price-table, .policy-table{
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(95,104,94,0.22);
}
.price-table th, .price-table td,
.policy-table th, .policy-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(95,104,94,0.18);
  vertical-align: top;
}
.price-table thead th,
.policy-table thead th{
  font-weight: 600;
  background: rgba(95,104,94,0.08);
}

/* Notes */
.pricing-notes ul{
  margin: 12px 0 18px;
  padding-left: 1.2em;
  line-height: 1.8;
  color:#555;
}
.note{ margin-top: 6px; opacity: .95; color:#555; }

/* Mobile cards */
.price-cards{
  display: grid;
  gap: 12px;
  margin: 12px 0 18px;
}
.price-card{
  border: 1px solid rgba(95,104,94,0.22);
  background: rgba(255,255,255,0.58);
  border-radius: 14px;
  padding: 14px 14px;
}
.price-card h3{ margin: 0 0 10px; font-size: 1.05rem; color:#333; }
.price-card dl{ margin: 0; }
.price-card dl > div{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(95,104,94,0.18);
}
.price-card dl > div:last-child{ border-bottom:none; }
.price-card dt{ opacity: .9; color:#555; }
.price-card dd{ margin:0; font-weight:600; color:#333; }

/* Responsive switch */
.show-desktop{ display:block; }
.show-mobile{ display:none; }
@media (max-width: 820px){
  .show-desktop{ display:none; }
  .show-mobile{ display:block; }
  .page-pricing .content{ padding: 28px 14px 90px; }
}

/* ===== Pricing table: header alignment ===== */
.price-table th,
.policy-table th{
  text-align: left;
}

/* ===== Pricing page: add kiku background ===== */
body.page-pricing{
  background-image: url("../images/common/kiku_background.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}

/* ===== Mobile price card: align price for long dt row ===== */
.price-card dl > div.row-holiday{
  align-items: flex-start;   /* ddを上揃えにする */
}

/* Child price tables: make header clearer */
.price-table thead th{
  white-space: nowrap;
}

/* ===== Child tables: wrap header on mobile ===== */
.price-table thead th .th-top,
.price-table thead th .th-bottom{
  display: inline;
}

/* スマホだけ2行にする */
@media (max-width: 820px){
  .price-table thead th .th-top,
  .price-table thead th .th-bottom{
    display: block;
    line-height: 1.2;
  }
  .price-table thead th .th-top{
    font-size: 0.85em;
    opacity: 0.85;
  }
  .price-table thead th .th-bottom{
    font-weight: 600;
  }
}

/* ===== Unified solid button (square) ===== */
.btn-solid{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  background: var(--btn-solid-bg);  
  color: var(--btn-solid-text);
  text-decoration: none;
  border: none;
  border-radius: 0;            
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.btn-solid:hover{
  opacity: 1;
  background: var(--btn-solid-bg-hover);
  transform: translateY(-1px);
}


.btn-solid--back{
  padding: 14px 22px;
  font-size: .95em;
}


.btn-row{
  margin: 26px 0 10px;
  display: flex;
  justify-content: center;
}


.page-pricing .section-title{
  margin-top: 36px; 
  margin-bottom: 18px;
}

.page-pricing .section-lead{
  margin: 8px 0 18px;
  color: rgba(0,0,0,0.65);
  line-height: 1.9;
}


@media (max-width: 768px) {
  .price-table th:first-child,
  .price-table td:first-child {
    white-space: nowrap;
    width: 12em;
  }

  .price-table {
    min-width: 720px;
  }
}


/* 「料金の詳細はこちら」ボタンの上下余白 */
.bun-row{
  margin: 24px 0;   /* 好みで 16〜40px */
}