/* ============================================================
   結いの心 Honjo ｜ YUIコール導入施設
   共通スタイル（ネイビー × 白／モダン・リゾート系）
   ============================================================ */

:root{
  --navy:      #16263f;   /* メインのネイビー */
  --navy-dk:   #0e1b2e;
  --navy-2:    #22385a;
  --blue:      #3f6ea3;   /* アクセントの青 */
  --blue-lt:   #6f97c4;
  --ink:       #1f2a3a;   /* 本文（濃紺グレー） */
  --ink-soft:  #5c6a7d;
  --line:      #dde3ec;
  --bg:        #ffffff;
  --bg-soft:   #f4f7fb;   /* うっすら青みの白 */
  --bg-navy:   #16263f;
  --white:     #ffffff;
  --maxw:      1180px;
  --shadow:    0 24px 60px rgba(22,38,63,.12);
  --shadow-sm: 0 12px 30px rgba(22,38,63,.08);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.95;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.04em;
}
h1,h2,h3,h4{font-weight:700;line-height:1.5;letter-spacing:.05em;margin:0;color:var(--navy);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{margin:0;padding:0;list-style:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 22px;}}

/* 英字ラベル（セクション見出しの上に置く小さいラベル） */
.en-label{
  display:inline-block;font-family:"Jost","Noto Sans JP",sans-serif;
  font-size:.72rem;letter-spacing:.4em;font-weight:500;color:var(--blue);
  text-transform:uppercase;margin-bottom:18px;
}
.en-label.on-navy{color:var(--blue-lt);}

/* 三角のあしらい（参考サイト風の視線誘導） */
.tri{
  display:inline-block;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--blue);vertical-align:middle;
}

/* 仮画像タグ（実写真差し替え後に削除） */
.ph{position:relative;overflow:hidden;background:var(--bg-soft);}
.ph-tag{
  position:absolute;top:12px;left:12px;z-index:3;
  background:rgba(22,38,63,.82);color:#fff;font-size:.64rem;font-weight:700;
  letter-spacing:.14em;padding:5px 11px;border-radius:2px;
}

/* ============================================================
   HEADER
   ============================================================ */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:transform .4s var(--ease);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;flex-direction:column;line-height:1.25;}
.brand b{font-size:1.06rem;font-weight:700;letter-spacing:.1em;color:var(--navy);}
.brand span{font-family:"Jost",sans-serif;font-size:.62rem;letter-spacing:.24em;color:var(--ink-soft);text-transform:uppercase;}
.brand-logo{height:46px;width:auto;max-width:60vw;display:block;}
@media(max-width:600px){.brand-logo{height:38px;}}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:.85rem;color:var(--navy);letter-spacing:.08em;position:relative;padding:6px 0;transition:color .2s;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blue);transition:right .3s var(--ease);}
.nav-links a:hover{color:var(--blue);}
.nav-links a:hover::after,.nav-links a.current::after{right:0;}
.nav-links a.current{color:var(--blue);}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue);color:#fff;font-weight:700;font-size:.88rem;
  padding:13px 28px;border-radius:2px;letter-spacing:.08em;white-space:nowrap;
  transition:transform .2s var(--ease), background .2s, box-shadow .2s;
  box-shadow:0 10px 24px rgba(63,110,163,.28);
}
.btn:hover{background:var(--navy);transform:translateY(-2px);}
.btn .tri{border-top-color:#fff;transform:rotate(-90deg);}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy);box-shadow:none;}
.btn-ghost:hover{background:var(--navy);color:#fff;}
.btn-ghost .tri{border-top-color:var(--navy);}
.btn-ghost:hover .tri{border-top-color:#fff;}
.btn-lg{padding:17px 40px;font-size:.95rem;}
.btn-white{background:#fff;color:var(--navy);}
.btn-white:hover{background:var(--bg-soft);color:var(--navy);}
.btn-white .tri{border-top-color:var(--navy);}

/* ハンバーガー */
.nav-cta{display:none;}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:9px;margin-right:-9px;border:none;background:transparent;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;transition:transform .3s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:980px){
  .header-cta{display:none;}
  .nav-toggle{display:flex;}
  .nav{height:66px;}
  .nav-links{
    position:absolute;top:66px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:transform .28s var(--ease), opacity .28s ease, visibility .28s;
  }
  .nav-links a{padding:17px 24px;font-size:1rem;border-top:1px solid var(--line);}
  .nav-links a:first-child{border-top:none;}
  .nav-links a::after{display:none;}
  header.site.open .nav-links{transform:none;opacity:1;visibility:visible;}
  .nav-cta{display:block;color:var(--blue)!important;font-weight:700;}
}

/* ページ本文をヘッダー分だけ押し下げるための余白 */
.page{padding-top:76px;}
@media(max-width:980px){.page{padding-top:66px;}}

/* ============================================================
   HERO（下層ページ共通の帯ヒーロー）
   ============================================================ */
.phero{position:relative;min-height:46vh;display:flex;align-items:center;color:#fff;overflow:hidden;}
.phero-bg{position:absolute;inset:0;z-index:0;}
.phero-bg img{width:100%;height:100%;object-fit:cover;}
.phero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,27,46,.78),rgba(14,27,46,.45));}
.phero .wrap{position:relative;z-index:2;padding-block:56px;}
.phero .en-label{color:var(--blue-lt);}
.phero h1{color:#fff;font-size:clamp(1.7rem,4.4vw,2.7rem);}
.phero p{color:rgba(255,255,255,.9);margin-top:16px;max-width:640px;font-size:1rem;}
.crumbs{margin-top:22px;font-size:.78rem;color:rgba(255,255,255,.75);letter-spacing:.06em;}
.crumbs a{color:rgba(255,255,255,.9);}
.crumbs a:hover{color:#fff;}

/* ============================================================
   SECTION 基本
   ============================================================ */
section{padding:120px 0;}
@media(max-width:860px){section{padding:80px 0;}}
.sec-soft{background:var(--bg-soft);}
.sec-navy{background:var(--navy);color:#eaf0f8;}
.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-navy h4{color:#fff;}

.section-head{max-width:720px;margin-bottom:64px;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-bottom:20px;}
.section-head .lead{color:var(--ink-soft);font-size:1.02rem;}
.sec-navy .section-head .lead{color:#b7c4d6;}
@media(max-width:860px){.section-head{margin-bottom:44px;}}

/* ============================================================
   2カラム split
   ============================================================ */
.split{display:grid;grid-template-columns:1.02fr 1fr;gap:70px;align-items:center;}
.split.reverse .col-img{order:2;}
.col-img{position:relative;overflow:hidden;box-shadow:var(--shadow);}
.col-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.col-img.ph::before{content:"";position:absolute;left:-14px;top:-14px;width:80px;height:80px;border-top:2px solid var(--blue);border-left:2px solid var(--blue);z-index:2;}
.col-text h2{font-size:clamp(1.5rem,3.2vw,2.15rem);}
.feature-list{margin:30px 0 0;display:grid;gap:22px;}
.feature-list li{display:flex;gap:18px;align-items:flex-start;}
.feature-list .ico{
  flex:0 0 34px;height:34px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:"Jost",sans-serif;font-weight:600;font-size:.86rem;
}
.feature-list b{display:block;font-weight:700;margin-bottom:2px;color:var(--navy);}
.feature-list span{color:var(--ink-soft);font-size:.93rem;}
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:40px;}
  .split.reverse .col-img{order:0;}
}

/* ============================================================
   カードグリッド（ケア体制など）
   ============================================================ */
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.grid-cards.g3{grid-template-columns:repeat(3,1fr);}
.card{
  background:#fff;border:1px solid var(--line);
  padding:42px 38px;transition:transform .3s var(--ease), box-shadow .3s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card .num{font-family:"Jost",sans-serif;font-size:.82rem;letter-spacing:.2em;color:var(--blue);font-weight:600;}
.card h3{font-size:1.3rem;margin:12px 0 6px;}
.card .c-en{font-family:"Jost",sans-serif;font-size:.74rem;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:18px;}
.card p{color:var(--ink-soft);font-size:.94rem;}
.card ul{display:grid;gap:11px;margin-top:8px;}
.card ul li{position:relative;padding-left:22px;font-size:.93rem;color:var(--ink-soft);line-height:1.75;}
.card ul li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;background:var(--blue);}
.card .tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;font-weight:700;color:var(--blue);background:rgba(63,110,163,.1);padding:6px 15px;margin-bottom:18px;}
.card ul.check li::before{content:"✓";background:none;color:var(--blue);font-weight:700;top:0;left:0;width:auto;height:auto;}
.card ul.check li{padding-left:24px;}
@media(max-width:880px){.grid-cards,.grid-cards.g3{grid-template-columns:1fr;}}

/* ============================================================
   数字バー
   ============================================================ */
.stats{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stats .wrap{padding-block:56px;}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat b{display:block;font-family:"Jost","Noto Sans JP",sans-serif;font-size:2.2rem;color:var(--navy);line-height:1.2;font-weight:600;}
.stat b small{font-size:.42em;font-weight:500;}
.stat span{font-size:.82rem;color:var(--ink-soft);}
@media(max-width:780px){.stats .grid{grid-template-columns:repeat(2,1fr);gap:34px 20px;}}

/* ============================================================
   タイムライン（夜の見守り・明るいトーン）
   ============================================================ */
.timeline{margin-top:56px;display:grid;gap:0;border-left:2px solid var(--line);}
.tl-item{position:relative;padding:0 0 42px 40px;}
.tl-item::before{content:"";position:absolute;left:-9px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px var(--bg);}
.sec-soft .tl-item::before{box-shadow:0 0 0 5px var(--bg-soft);}
.tl-item:last-child{padding-bottom:0;}
.tl-time{font-family:"Jost",sans-serif;font-size:1.1rem;color:var(--blue);font-weight:600;letter-spacing:.1em;}
.tl-item h3{font-size:1.14rem;margin:6px 0 8px;}
.tl-item p{color:var(--ink-soft);font-size:.93rem;}
.note{margin-top:44px;font-size:.8rem;color:var(--ink-soft);opacity:.85;}

/* ============================================================
   ギャラリー（暮らし・館内）
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.g-item{position:relative;overflow:hidden;box-shadow:var(--shadow-sm);}
.g-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .7s var(--ease);}
.g-item:hover img{transform:scale(1.05);}
.g-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 26px 22px;color:#fff;background:linear-gradient(180deg,transparent,rgba(14,27,46,.8));}
.g-cap b{display:block;font-size:1.1rem;font-weight:700;letter-spacing:.04em;}
.g-cap span{font-size:.82rem;opacity:.9;}
@media(max-width:780px){.gallery{grid-template-columns:1fr;}}

/* ============================================================
   料金・概要テーブル
   ============================================================ */
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
@media(max-width:880px){.ov-grid{grid-template-columns:1fr;gap:38px;}}
.info-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);}
.info-table th,.info-table td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line);font-size:.93rem;vertical-align:top;}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none;}
.info-table th{width:36%;background:var(--bg-soft);color:var(--navy);font-weight:700;white-space:nowrap;}
.info-table td{color:var(--ink-soft);}
.price-box{background:#fff;border:1px solid var(--line);padding:6px 32px;box-shadow:var(--shadow-sm);}
.price-box + .price-box{margin-top:26px;}
.price-box h4{font-size:1.02rem;padding:24px 0 14px;border-bottom:2px solid var(--navy);font-weight:700;}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);}
.price-row:last-of-type{border-bottom:none;}
.pr-name{font-size:.94rem;color:var(--ink);}
.pr-name small{display:block;color:var(--ink-soft);font-size:.76rem;}
.pr-val{font-family:"Jost","Noto Sans JP",sans-serif;font-size:1.16rem;color:var(--blue);font-weight:600;white-space:nowrap;}
.pr-val small{font-size:.62em;color:var(--ink-soft);font-weight:400;margin-left:2px;}
.price-sub{display:flex;flex-wrap:wrap;gap:12px 24px;padding:16px 0;border-bottom:1px solid var(--line);}
.price-sub span{font-size:.9rem;color:var(--ink-soft);}
.price-sub b{color:var(--blue);font-family:"Jost",sans-serif;}
.price-note{font-size:.78rem;color:var(--ink-soft);opacity:.9;margin-top:22px;line-height:1.85;}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{display:grid;gap:14px;max-width:860px;}
details.faq{background:#fff;border:1px solid var(--line);padding:4px 30px;transition:box-shadow .2s, border-color .2s;}
details.faq[open]{box-shadow:var(--shadow-sm);border-color:var(--blue);}
details.faq summary{cursor:pointer;list-style:none;padding:24px 0;font-weight:700;font-size:1.01rem;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:16px;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";font-size:1.5rem;color:var(--blue);transition:transform .25s;flex:0 0 auto;font-weight:400;}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq .a{padding:0 0 26px;color:var(--ink-soft);font-size:.94rem;}

/* ============================================================
   CTA
   ============================================================ */
.cta{position:relative;color:#fff;text-align:center;overflow:hidden;}
.cta-bg{position:absolute;inset:0;z-index:0;}
.cta-bg img{width:100%;height:100%;object-fit:cover;}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(14,27,46,.92),rgba(34,56,90,.88));}
.cta .wrap{position:relative;z-index:2;}
.cta h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:18px;}
.cta p{color:rgba(255,255,255,.9);max-width:600px;margin:0 auto 36px;}
.cta .tel{font-family:"Jost",sans-serif;font-size:clamp(1.8rem,5vw,2.4rem);font-weight:600;color:#fff;letter-spacing:.05em;}

/* ============================================================
   ページ内リンクカード（TOPのセクション誘導）
   ============================================================ */
.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.link-card{position:relative;overflow:hidden;min-height:280px;display:flex;align-items:flex-end;background:var(--navy);color:#fff;}
.link-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform .7s var(--ease), opacity .4s;}
.link-card:hover img{transform:scale(1.06);opacity:.75;}
.link-card .lc-body{position:relative;z-index:2;padding:34px 30px;width:100%;background:linear-gradient(180deg,transparent,rgba(14,27,46,.55));}
.link-card .lc-en{font-family:"Jost",sans-serif;font-size:.7rem;letter-spacing:.24em;color:var(--blue-lt);text-transform:uppercase;}
.link-card h3{color:#fff;font-size:1.3rem;margin:8px 0 4px;}
.link-card p{font-size:.84rem;color:rgba(255,255,255,.82);}
.link-card .arrow{position:absolute;top:24px;right:24px;z-index:2;width:38px;height:38px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;transition:background .3s, border-color .3s;}
.link-card:hover .arrow{background:var(--blue);border-color:var(--blue);}
.link-card .arrow .tri{border-top-color:#fff;transform:rotate(-90deg);}
@media(max-width:880px){.link-grid{grid-template-columns:1fr;}.link-card{min-height:220px;}}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{background:var(--navy-dk);color:#9fb0c6;padding:70px 0 44px;font-size:.87rem;}
footer.site .f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px;}
footer.site .brand b{color:#fff;font-size:1.14rem;}
footer.site .brand span{color:#6f819b;}
footer.site .f-brand p{margin-top:16px;color:#8598b2;font-size:.85rem;max-width:340px;}
footer.site h4{color:#fff;font-size:.82rem;letter-spacing:.14em;margin-bottom:18px;font-weight:700;}
footer.site nav{display:grid;gap:11px;}
footer.site nav a{color:#9fb0c6;font-size:.86rem;}
footer.site nav a:hover{color:#fff;}
footer.site .f-note{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;font-size:.76rem;color:#6f819b;line-height:1.9;}
footer.site a.tel-link{color:#fff;font-family:"Jost",sans-serif;font-size:1.2rem;letter-spacing:.04em;}
@media(max-width:780px){footer.site .f-top{grid-template-columns:1fr;gap:32px;}}

/* ============================================================
   お食事ページ（フードギャラリー）
   ============================================================ */
.food-meta{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:34px;}
.food-meta .fm{display:flex;gap:14px;align-items:flex-start;max-width:300px;}
.food-meta .fm-ico{flex:0 0 40px;height:40px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:1.1rem;}
.food-meta .fm b{display:block;font-weight:700;color:var(--navy);margin-bottom:2px;}
.food-meta .fm span{color:var(--ink-soft);font-size:.9rem;line-height:1.7;}

.food-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.food-item{position:relative;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);}
.food-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.food-item::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(22,38,63,.06);pointer-events:none;}
.food-item:hover img{transform:scale(1.06);}
.food-item .fnum{position:absolute;top:12px;left:12px;z-index:2;font-family:"Jost",sans-serif;font-size:.68rem;letter-spacing:.14em;color:#fff;background:rgba(22,38,63,.62);padding:4px 10px;backdrop-filter:blur(3px);}
@media(max-width:900px){.food-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(max-width:560px){.food-grid{grid-template-columns:1fr;}}

/* ============================================================
   スクロール表示アニメ
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}