/* © 2025 YOSHIO SANGYO'S | Updated: 2025-08-25 */
:root{
  --color-primary:#17559b; --color-secondary:#0B2545; --color-accent:#D97706;
  --color-bg:#FFFFFF; --color-text:#111827; --color-muted:#6B7280;
  --color-border:#E5E7EB; --color-alert:#B91C1C;
  --frame-size:10px;
  --maxw:1200px; --radius:8px; --shadow:0 8px 24px rgba(0,0,0,.06);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px;
  --fs-base:16px; --lh:1.6; --fs-lead:1.125rem; --fs-h3:1.25rem; --fs-h2:1.5rem; --fs-h1:2rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--color-text);background:var(--color-bg);
  font:400 var(--fs-base)/var(--lh) "Yu Gothic","游ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN","Noto Sans JP","Meiryo",sans-serif;
  box-shadow:inset 0 0 0 var(--frame-size) var(--color-primary);
}

/* Typography */
.prose p{margin:0 0 var(--space-3)}
.prose h2,.prose h3{margin:0 0 var(--space-2)}
.section__title{
  position:relative; margin:0 0 var(--space-3); padding-bottom:.5em;
  display:inline-block; text-align:center;
}
.section__title::after{
  content:""; position:absolute; bottom:0; left:0; width:100%; height:3px;
  background:var(--color-primary); border-radius:2px;
}
.section{text-align:center}
.prose h3{position:relative; padding-left:12px; text-align:left}
.prose h3::before{
  content:""; position:absolute; left:0; top:.25em; width:4px; height:1.2em;
  background:var(--color-primary); border-radius:2px;
}
.section__lead{margin:0 0 var(--space-3); color:var(--color-muted)}
@media (min-width:769px){ .prose{max-width:72ch} }
.container{max-width:var(--maxw); margin-inline:auto; padding:0 var(--space-2)}
.section{padding:var(--space-6) 0}
.section--alt{background:linear-gradient(180deg,#F9FAFB,transparent)}
img{max-width:100%; height:auto; display:block}
a{color:var(--color-primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:var(--space-2); top:var(--space-2); background:#fff; padding:6px 10px; border-radius:6px; box-shadow:var(--shadow)}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:var(--color-primary); color:#fff; border-bottom:4px solid #0f3d73}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding:10px 0}
.brand img{display:block}
.site-header__info{display:flex; gap:var(--space-3); align-items:center; font-weight:600}
.tel{color:#fff}
.hours{color:#e5efff; font-weight:500}
@media (max-width:768px){
  .site-header__inner{flex-direction:column; align-items:center; gap:6px}
  .site-header .container{width:100%}
  .site-header__info{flex-direction:column; align-items:center; gap:2px; font-size:0.95rem; text-align:center}
}

/* Nav */
.nav{background:var(--color-primary)}
.nav__list{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:10px 0}
.nav__item{display:flex}
.nav__link{color:#fff; text-decoration:none}
.btnchip{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.08);
  font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.08) inset;
}
.btnchip:hover{background:rgba(255,255,255,.16); text-decoration:none}
.btnchip[aria-current="true"]{background:#fff; color:var(--color-primary); border-color:#fff}

/* --- モバイル：プルダウン化（開閉ボタン） --- */
.nav-toggle{
  display:none;
  background:var(--color-primary);
  color:#fff;
  border:2px solid rgba(255,255,255,.55);
  padding:10px 14px;
  border-radius:10px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
}
.nav-toggle:focus{outline:2px solid #fff; outline-offset:2px}
@media (max-width:768px){
  .nav-toggle{display:block; margin:6px auto 0}
  .nav__list{
    display:none;               /* 初期は隠す */
    flex-direction:column;
    padding:var(--space-2);
    gap:var(--space-2);
  }
  .nav.open .nav__list{display:flex}
  .nav__item{margin:0}
  .btnchip{width:100%; justify-content:center}
}

/* Hero */
.hero{padding:var(--space-6) 0; background:linear-gradient(180deg,#F9FAFB,transparent)}
.hero__grid{display:grid; gap:var(--space-4); grid-template-columns:1.05fr .95fr; align-items:center}
.hero__figure{grid-column:1 / -1; justify-self:center; width:90%; max-width:min(1200px,90vw); position:relative}
.hero__figure img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%; transition:opacity .6s ease; opacity:1}

/* Hero Title & Lead（中央揃え＋改行最適化） */
.hero__title,
.hero__lead {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  max-width:32rem;
}
.hero__title{
  font-size:clamp(1.75rem, 1.1rem + 2.2vw, 2.25rem);
  line-height:1.2;
  margin:0 0 var(--space-2);
  text-wrap:balance;
  line-break:strict;
  word-break:normal;
  hyphens:manual;
}
.hero__lead{
  font-size:clamp(1rem, 0.9rem + 0.6vw, 1.125rem);
  color:var(--color-muted);
  margin:0 0 var(--space-3);
  text-wrap:pretty;
  line-break:strict;
  word-break:normal;
  hyphens:manual;
}

/* Hero responsive */
@media (max-width:768px){
  .hero__grid{grid-template-columns:1fr; gap:var(--space-3)}
  .hero__content{order:1}
  .hero__figure{order:2}
  .hero .container{padding-left:calc(var(--space-2) + 8px); padding-right:calc(var(--space-2) + 8px)}
}
@media (min-width:769px) and (max-width:1100px){
  .hero__grid{grid-template-columns:1fr; gap:var(--space-3)}
  .hero__content{order:1}
  .hero__figure{order:2}
  .hero__title,
  .hero__lead{
    max-width:min(44ch, 92vw);
    margin-inline:auto;
    text-align:center;
  }
  .hero .container{padding-left:calc(var(--space-2) + 10px); padding-right:calc(var(--space-2) + 10px)}
}

/* Concept */
#concept .section__lead{text-align:center; margin-left:auto; margin-right:auto; max-width:72ch}
.gallery{display:grid; gap:var(--space-2); list-style:none; padding:0; margin:var(--space-4) 0 0}
.gallery--single{grid-template-columns:1fr; justify-items:center}
.gallery--single .gallery__item{width:min(900px,90%)}
.gallery__item img{border:1px solid var(--color-border); border-radius:6px}

/* Split */
.split{display:grid; gap:var(--space-3); grid-template-columns:1fr 1fr; align-items:start}
.split__media img{border-radius:var(--radius); box-shadow:var(--shadow)}
.split__content.prose{padding:0 var(--space-2)}
.split--reverse .split__content.prose{padding:0 var(--space-2)}
.split__content.prose > :first-child{margin-top:0}
@media (max-width:768px){.split{grid-template-columns:1fr}.split__content.prose{padding:0}}

/* About */
.about{display:grid; gap:var(--space-3); grid-template-columns:1fr 1.2fr; align-items:start}
@media (max-width:1024px){.about{grid-template-columns:1fr}}
.info{margin:0}
.info__row{display:grid; grid-template-columns:160px 1fr; gap:var(--space-2); padding:12px 0; border-bottom:1px solid var(--color-border)}
.info__term{font-weight:700}
.info__desc{color:var(--color-secondary)}
.about__note{color:var(--color-muted); margin-top:var(--space-2)}
.text-center--md .info{max-width:720px; margin-inline:auto}

/* Map */
.section--map{background:linear-gradient(180deg,transparent,#F9FAFB)}
.map-embed{border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff}
.map__cta{text-align:center; margin-top:var(--space-3)}

/* SNS */
.sns{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; padding:0; margin:var(--space-3) 0; justify-content:center}
.sns__link{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border:1px solid var(--color-border); border-radius:999px;
  font-size:0.875rem; font-weight:600; color:var(--color-secondary);
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); line-height:1.4;
}
.sns__link:hover{background:rgba(23,85,155,.05); text-decoration:none}
.sns__icon{display:inline-flex; line-height:0}
.sns__icon svg{width:16px; height:16px; fill:currentColor}
.sns__icon img{width:24px; height:24px; display:block}
.sns__label{display:inline-block}

/* CTA */
.section--cta{background:var(--color-primary); color:#fff}
.section--cta .cta__text{color:#f3f4f6}
.cta{text-align:center}
.cta__title{font-size:var(--fs-h2); margin:0 0 var(--space-2)}
.cta__text{margin:0 0 var(--space-3)}
.cta__actions{display:flex; justify-content:center; gap:var(--space-2); flex-wrap:wrap}

/* Footer */
.site-footer{border-top:4px solid #0f3d73; padding:18px 0; color:#e5efff; background:var(--color-primary)}
.site-footer__inner{display:flex; justify-content:center}

/* Buttons */
.btn{display:inline-block; border-radius:10px; padding:12px 18px; font-weight:700; box-shadow:var(--shadow); border:2px solid transparent}
.btn--primary{background:#fff; color:var(--color-primary)}
.btn--primary:hover{filter:brightness(.97); text-decoration:none}
.btn--outline{background:#fff; color:var(--color-primary); border-color:var(--color-primary)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn--lg{padding:14px 22px}

/* コンテナ：中央寄せ＋幅可変。大きい画面=50%、小さい画面=100% */
.video-container {
  position: relative;
  width: 50%;
  margin: 40px auto;
  background: #000;
  overflow: hidden;
}

/* 9:16 の比率を「padding-top」で確保（環境依存のない定番） */
.video-container::before {
  content: "";
  display: block;
  padding-top: 177.7778%; /* 9:16 → 16/9*100% ≒ 177.78% */
}

/* iframe を全面にフィット */
.video-container > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 小さい画面では全幅 */
@media (max-width: 768px) {
  .video-container {
    width: 100%;
  }
}

/* 16:9 用にここだけ変更 */
.video-container::before {
  padding-top: 56.25%; /* 9/16*100% = 56.25% */
}