:root{
  color-scheme:light;
  --cream:#FFFFFF; --cream-2:#FFFFFF; --paper:#FFFFFF;
  --ink:#2B2F2C; --ink-2:#5A6058; --line:#DCE5DC;
  --ai:#2F7AA8; --ai-2:#4A9FCB; --ai-soft:#E6F2F9;
  --sky:#5AA9D6; --sky-2:#8FC8E8; --sky-soft:#E6F2F9; --sky-deep:#2F7AA8;
  --beni:#3CB371; --beni-2:#2FA35E; --beni-soft:#E3F7EA;
  --green:#3CB371; --green-2:#63CC8D; --green-dark:#177245; --green-soft:#E3F7EA;
  --coral:#E4572E; --coral-dark:#B23C17; --coral-soft:#FDEEE6;
  --teal:#14635D; --teal-soft:#E2F0EE;
  --gold:#5AA9D6;
  --card:#FFFFFF; --shadow:0 10px 30px rgba(43,47,44,.09), 0 2px 8px rgba(43,47,44,.05);
  --radius:20px;
  --pattern-bingata:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%233A5A8C' stroke-width='1.6'%3E%3Cpath d='M32 17 L45 24.5 L45 39.5 L32 47 L19 39.5 L19 24.5 Z'/%3E%3Cpath d='M32 23.5 L39.4 27.8 L39.4 36.2 L32 40.5 L24.6 36.2 L24.6 27.8 Z' stroke-width='1'/%3E%3C/g%3E%3Cg fill='%23E79FB0'%3E%3Ccircle cx='88' cy='79' r='7'/%3E%3Ccircle cx='96.6' cy='85.2' r='7'/%3E%3Ccircle cx='93.3' cy='95.3' r='7'/%3E%3Ccircle cx='82.7' cy='95.3' r='7'/%3E%3Ccircle cx='79.4' cy='85.2' r='7'/%3E%3C/g%3E%3Ccircle cx='88' cy='88' r='3.6' fill='%23D9A441'/%3E%3Cg fill='%237BC48A'%3E%3Cpath d='M64 94 q11 -4 14 6 q-11 4 -14 -6 Z'/%3E%3Cpath d='M102 64 q4 11 -6 14 q-4 -11 6 -14 Z'/%3E%3C/g%3E%3Cg fill='%239B7EC8'%3E%3Ccircle cx='88' cy='24' r='3.2'/%3E%3Ccircle cx='94' cy='30' r='3.2'/%3E%3Ccircle cx='88' cy='36' r='3.2'/%3E%3Ccircle cx='82' cy='30' r='3.2'/%3E%3C/g%3E%3Ccircle cx='88' cy='30' r='2' fill='%23C94F3D'/%3E%3Cpath d='M30 92 L37 99 L30 106 L23 99 Z' fill='none' stroke='%23C9A227' stroke-width='1.4'/%3E%3Cg fill='%23C94F3D'%3E%3Ccircle cx='12' cy='92' r='1.8'/%3E%3Ccircle cx='56' cy='62' r='1.8'/%3E%3Ccircle cx='112' cy='58' r='1.8'/%3E%3Ccircle cx='58' cy='10' r='1.8'/%3E%3Ccircle cx='12' cy='56' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#FFFFFF}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;line-height:1.85;font-size:16px}
h1,h2,h3,.maru{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif}
img{max-width:100%;display:block}
a{color:var(--ai)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
@media(max-width:640px){.wrap{padding:0 24px}}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:#C9EED3;border-top:3px solid var(--green-2);border-bottom:1px solid #A9DDBE}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:14px 16px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none;min-width:0}
.brand b{font-family:"Zen Maru Gothic",sans-serif;font-size:19px;letter-spacing:.02em;line-height:1.2;display:block;color:var(--ink);white-space:nowrap}
.brand small{font-size:11.5px;color:var(--green-dark);letter-spacing:.08em;font-weight:700;white-space:nowrap}
.head-right{display:flex;align-items:center;gap:10px;flex:none}
nav.main{display:flex;gap:4px;flex-wrap:nowrap;align-items:center}
nav.main a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:700;padding:10px 12px;border-radius:999px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1.3}
nav.main a:hover{background:#FFFFFF;color:var(--ink)}
.head-tel{display:inline-flex;align-items:center;gap:7px;min-height:44px;background:#FFFFFF;color:var(--green-dark);text-decoration:none;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:15px;letter-spacing:.03em;line-height:1;padding:9px 15px;border:1.5px solid var(--green-dark);border-radius:999px;white-space:nowrap;flex:none}
.head-tel:hover{background:var(--green-soft)}
.head-tel svg{width:17px;height:17px;flex:none}
/* 中間サイズ：ナビは無理に1行へ押し込まず、ブランド＋電話の下に専用の段を作る */
@media(min-width:761px) and (max-width:1120px){
  .head-in{flex-wrap:wrap;padding:14px 0 12px}
  .head-right{margin-left:auto}
  nav.main{order:3;flex:1 1 100%;width:100%;justify-content:space-between;gap:2px;border-top:1px solid #A9DDBE;padding-top:8px;margin-top:2px}
  nav.main a{flex:1 1 0;font-size:14.5px;padding:10px 6px}
}
@media(max-width:480px){
  .brand b{font-size:17px}
  .brand small{display:none}
  .head-tel{font-size:13.5px;padding:9px 13px;gap:6px}
  .head-tel svg{width:15px;height:15px}
}
/* ハンバーガーメニュー（スマホのみ） */
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;cursor:pointer;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menu-btn span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .25s ease, opacity .2s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-nav{display:none;border-top:1px solid #A9DDBE;padding:10px 0 16px}
.mobile-nav.open{display:block}
.mobile-nav a{display:flex;align-items:center;color:var(--ink);text-decoration:none;font-weight:700;font-size:15.5px;padding:11px 6px;min-height:48px;border-bottom:1px dashed #A9DDBE}
.mobile-nav a:last-child{border-bottom:0}
/* スマホ：ヘッダーは2段（1段目＝施設名＋ハンバーガー、2段目＝電話ピル右寄せ） */
@media(max-width:760px){
  /* ヘッダー内側の左右余白を本文ラップ（24px）にそろえ、タイトルが左端に張り付かないようにする。
     ハンバーガーと2段目の電話ピルも同じ右端ラインにそろう */
  .site-head .wrap{padding-left:24px;padding-right:24px}
  nav.main{display:none}
  .menu-btn{display:flex}
  .head-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand menu" "tel tel";align-items:center;column-gap:12px;row-gap:10px;padding:16px 0 16px}
  .brand{grid-area:brand}
  .head-right{grid-area:tel;justify-self:end}
  .menu-btn{grid-area:menu;justify-self:end}
}

/* hero */
.hero{padding:28px 0 8px}
.hero-frame{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#3CB371}
.hero-frame img.hero-img{width:100%;height:min(62vw,540px);object-fit:cover;object-position:center 38%}
.hero-overlay{position:absolute;inset:auto 0 0 0;padding:64px 26px 22px;background:linear-gradient(transparent, rgba(20,43,48,.84) 55%);color:#fff}
.hero-overlay h1{font-size:clamp(32px,6vw,52px);line-height:1.18;margin:12px 0 6px;font-weight:900;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.hero-overlay h1 .ruby{font-size:.42em;font-weight:700;letter-spacing:.28em;display:block;margin-bottom:4px}
.hero-overlay p{margin:0;max-width:640px;font-size:15.5px;color:#E6F3EA}
@media(max-width:640px){
.hero-frame img.hero-img{height:500px}
.hero-overlay{padding:80px 20px 18px}}

/* sections */
/* 固定ヘッダーの下にアンカー先が潜らないよう、スクロール位置にヘッダー分の余白を持たせる */
section.block, main{scroll-margin-top:96px}
@media(min-width:761px) and (max-width:1120px){
  section.block, main{scroll-margin-top:156px}
}
@media(max-width:760px){
  /* 2段ヘッダー（実高さ約130px）＋ゆとり */
  section.block, main{scroll-margin-top:148px}
}
section.block{padding:52px 0 6px}
.sec-head{position:relative;border:1px solid var(--line);border-radius:18px;padding:18px 20px 16px;margin-bottom:22px;overflow:hidden;background:#FFFFFF}
.sec-head::before{content:"";position:absolute;inset:0;background-image:var(--pattern-bingata);background-size:120px 120px;opacity:.25;pointer-events:none}
.sec-head .no{position:relative;display:inline-block;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--green-dark);background:var(--green-soft);padding:3px 11px;border-radius:999px}
.sec-head h2{position:relative;margin:2px 0 4px;font-size:clamp(24px,4.4vw,32px);line-height:1.3;font-weight:900}
.sec-head p{position:relative;margin:0;color:var(--ink-2);font-size:14.5px;max-width:720px}
.sec-head.green .no{color:var(--green-dark);background:var(--green-soft)} .sec-head.ai .no{color:var(--sky-deep);background:var(--sky-soft)}
.sec-head.coral .no{color:var(--coral-dark);background:var(--coral-soft)} .sec-head.teal .no{color:var(--teal);background:var(--teal-soft)}
.lead{font-size:16.5px;max-width:820px}
.lead strong{color:var(--ink);box-shadow:inset 0 -0.5em 0 var(--green-soft)}
.fact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.fact .label{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--green-dark)}
.fact:nth-child(2) .label{color:var(--sky-deep)}
.fact:nth-child(3) .label{color:var(--coral-dark)}
.fact .value{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:19px;margin-top:2px;line-height:1.4}
.fact .note{font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.6}
@media(max-width:700px){.fact-row{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .body{padding:22px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tag{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;padding:3px 10px;border-radius:999px}
.tag.g{background:var(--green-soft);color:var(--green-dark)} .tag.r{background:var(--sky-soft);color:var(--sky-deep)} .tag.a{background:var(--coral-soft);color:var(--coral-dark)}
.card h3{margin:0;font-size:19px;line-height:1.4;color:var(--ink)}
.card p{margin:0;font-size:14.5px;color:var(--ink-2);flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;font-family:"Zen Maru Gothic",sans-serif;border-radius:999px;padding:13px 22px;font-size:15.5px;border:0;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-ai{background:var(--card);color:var(--sky-deep);border:1.5px solid var(--sky-2)}
.btn-ai:hover{background:var(--sky-soft)}
.btn-beni{background:var(--coral);color:#fff;box-shadow:0 10px 22px rgba(228,87,46,.35);font-size:17px;padding:15px 26px}
.btn-ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--green-soft)}
.btn-green{background:var(--green-soft);color:var(--green-dark);border:1.5px solid #A9DDBE}
.btn-green:hover{background:#D2F0DD}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery figure{margin:0;border-radius:18px;overflow:hidden;position:relative;box-shadow:var(--shadow);background:var(--card)}
.gallery figure.wide{grid-column:span 2}
.gallery img{width:100%;height:210px;object-fit:cover}
.gallery figure.wide img{height:210px}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 13px 10px;background:linear-gradient(transparent, rgba(20,43,48,.8));color:#fff;font-size:13px;font-weight:700}
.gallery figcaption small{display:block;font-weight:400;font-size:11.5px;color:#D8F3E2}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery figure.wide{grid-column:span 2}.gallery img{height:150px}.gallery figure.wide img{height:170px}}

/* usage */
.use-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.panel h3{margin:0 0 10px;font-size:18px;color:var(--ink)}
.use-examples{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.use-examples{grid-template-columns:1fr}}
.use-ex{border-radius:14px;background:var(--cream);border:1px solid var(--line);padding:12px 13px;font-size:13.5px;line-height:1.65}
.use-ex b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:14.5px;margin-bottom:2px;color:var(--ink)}
.use-ex:nth-child(1) b{color:var(--green-dark)} .use-ex:nth-child(2) b{color:var(--coral-dark)} .use-ex:nth-child(3) b{color:var(--sky-deep)} .use-ex:nth-child(4) b{color:var(--teal)}
.pending{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;background:var(--sky-soft);color:var(--sky-deep);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:2px}
.contact-note{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact-note p{font-size:13px;color:var(--ink-2);margin:0}
.notice{margin-top:14px;font-size:13.5px;color:var(--ink-2);background:var(--sky-soft);border-radius:12px;padding:12px 14px;line-height:1.7}

/* overview */
.info-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.info-table th,.info-table td{padding:15px 18px;text-align:left;vertical-align:top;font-size:15px}
.info-table th{width:150px;background:#FFFFFF;color:var(--ink);font-family:"Zen Maru Gothic",sans-serif;font-weight:700;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap}
.info-table td{border-bottom:1px solid var(--line)}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:0}
@media(max-width:560px){.info-table th{width:104px;white-space:normal}}
.tel-big{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:22px;letter-spacing:.04em;color:var(--coral-dark);text-decoration:none}
.addr-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.btn-map{background:#1F4266;color:#fff;box-shadow:0 6px 14px rgba(31,66,102,.25);font-size:13.5px;padding:8px 15px;line-height:1.4}
.btn-map:hover{background:#28537F}
.btn-map .map-pin{width:18px;height:18px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.tel-icon{width:20px;height:20px;flex:none}
.cta-box{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-align:center}
.cta-box p{margin:0 0 14px;color:var(--ink-2);font-size:14.5px}
.cta-box .btn-row{justify-content:center;margin-top:0}

/* footer */
footer{margin-top:64px;background:#C9EED3;color:var(--ink);position:relative;overflow:hidden}
.foot-in{position:relative;padding:44px 0 40px}
.foot-in .fname{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:22px;color:var(--ink);line-height:1.45}
.foot-in p{font-size:13.5px;color:#3E4A42;margin:10px 0 0;max-width:720px;line-height:2}
.tel-nowrap{white-space:nowrap}
@media(max-width:640px){
  .foot-in{padding:40px 10px 38px}
  .foot-in .fname{font-size:20px}
  .foot-in p{font-size:13.5px;line-height:2.05;margin-top:12px}
}


/* Scroll Reveal : フェードアップ + スタガー */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.32,1);transition-delay:calc(var(--i,0)*110ms);will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn{transition:none} .btn:hover{transform:none}
}