/* ============================================================
   住宅型有料老人ホーム・デイサービス「ふじ」告知LP
   株式会社 光蓮 / kourenkaigo.com — /fuji/
   Claude Design「fuji 告知LP」からの静的実装（依存なし）
   ============================================================ */

:root{
  --font-body:'Noto Sans JP',sans-serif;               /* 本文・UI */
  --font-heading:'Shippori Mincho','Noto Serif JP',serif; /* 見出し */
}

body{margin:0;background:#dedad1;font-family:var(--font-body),system-ui,sans-serif;color:#262B2A;-webkit-font-smoothing:antialiased}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#2E5B4F;color:#fff;padding:10px 18px;font-weight:600;text-decoration:none;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.serif{font-family:'Noto Serif JP',var(--font-heading),serif}
.wrap{max-width:480px;margin:0 auto;background:#F7F5F0;min-height:100vh;position:relative;box-shadow:0 0 40px rgba(38,43,42,.10)}
.page{padding-bottom:72px}
.sec{padding:56px 24px}
.sec-band{background:#E8F0ED}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.14em;color:#8B7BB5;margin:0 0 14px}
.eyebrow::before{content:"";width:22px;height:1px;background:#8B7BB5}
.h2{font-size:26px;line-height:1.5;font-weight:600;color:#2E5B4F;letter-spacing:.02em;margin:0 0 8px}
.lead{font-size:16px;line-height:2.0;color:#262B2A;margin:0}
.muted{color:#5F6B68}
.imgph{background-color:#8f86a6;background-image:linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,transparent 1px),linear-gradient(45deg,rgba(0,0,0,.06) 0 1px,transparent 1px);background-size:26px 26px,26px 26px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* 実画像を枠いっぱいに敷く（差し込み後は市松のプレースホルダを覆う） */
.imgph>img,.fimg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* feature-12（図解）だけは全体表示（contain・高さ可変・背景は生成り） */
.imgph-contain{display:block;background:#F7F5F0;border-radius:8px;overflow:hidden}
.imgph-contain>img{display:block;width:100%;height:auto;object-fit:contain;border-radius:inherit}
/* ===== FV（ヒーロー）—— SP/タブレット：画像を幅フィットで全体表示し、藤色帯を下に続ける ===== */
.hero{position:relative;background:#8f86a6}
.hero-pic{display:block;line-height:0}
.hero-bg{display:block;width:100%;height:auto;z-index:0}
.hero-topbar{position:absolute;top:0;left:0;right:0;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 58%,rgba(255,255,255,0))}
/* ヘッダー共通配色（社名グリーン／電話ボタン 白地×緑・ホバー反転） */
.hd-brand{color:#2E5B4F}
.hd-telwrap{display:inline-flex;align-items:center;gap:12px}
.hd-tel-label{font-size:13px;font-weight:600;color:#2E5B4F}
.hd-tel{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#2E5B4F;font-weight:600;text-decoration:none;border-radius:8px;padding:9px 16px;box-shadow:0 2px 8px rgba(38,43,42,.16);transition:background .2s,color .2s}
.hd-tel:hover{background:#2E5B4F;color:#fff}
.hero-band{position:relative;z-index:1;color:#fff;margin-top:-90px;padding:110px 24px 30px;background:linear-gradient(180deg,rgba(139,123,181,0) 0,rgba(122,107,163,.55) 46px,#6B5D94 100px)}
.fv-badges{display:flex;gap:8px;margin-bottom:16px}
.fv-h1{margin:0;font-weight:inherit}
.fv-title{display:block;font-size:22px;line-height:1.4;font-weight:600;letter-spacing:0;white-space:nowrap}
.fv-sub{display:block;font-size:21px;line-height:1.5;font-weight:500;margin-top:8px;opacity:.96}
.fv-copy{font-size:16px;line-height:1.85;font-weight:500;margin-top:16px;opacity:.96}
.fv-ctawrap{display:flex;justify-content:center;margin-top:22px}
.fv-note{text-align:center;font-size:13.5px;margin-top:10px;opacity:.94}
.map{width:100%;border:0;display:block}
.card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(38,43,42,.06)}
.card-fuji{border-top:4px solid #8B7BB5}
.card-hikari{border-top:4px solid #D9A62E}
.card-ren{border-top:4px solid #C97E8F}
.tag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;line-height:1}
.tel-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:56px;padding:0 22px;border-radius:8px;background:#2E5B4F;color:#fff;font-weight:600;font-size:17px;text-decoration:none;transition:background .25s}
.tel-cta:hover{background:#4A7A6C;color:#fff}
.cat{margin-top:22px}
.cat-head{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#fff;background:#2E5B4F;padding:11px 16px;border-radius:6px 6px 0 0}
.cat-head .n{font-size:12px;font-weight:600;opacity:.8}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#DDD9CE;border:1px solid #DDD9CE;border-top:0;border-radius:0 0 6px 6px;overflow:hidden}
.fitem{background:#fff;padding:16px 14px;display:flex;flex-direction:column;gap:9px}
.fitem .ic{color:#8B7BB5}
.fitem .fimg{background-color:#8f86a6;background-image:linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,transparent 1px),linear-gradient(45deg,rgba(0,0,0,.06) 0 1px,transparent 1px);background-size:22px 22px,22px 22px;border-radius:6px;height:84px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;position:relative;overflow:hidden}
.fitem p{margin:0;font-size:13.5px;line-height:1.7;color:#262B2A}
.notice{background:#fff;border:1px solid #DDD9CE;border-radius:8px;padding:16px 18px;font-size:14px;line-height:1.9;color:#5F6B68}
.info-row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid #DDD9CE;font-size:14.5px;line-height:1.7}
.info-row:last-child{border-bottom:0}
.info-row dt{flex:none;width:88px;color:#8B7BB5;font-weight:600}
.info-row dd{margin:0;color:#262B2A}
.footer{background:#2E5B4F;color:#fff;padding:40px 24px}
.telbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;pointer-events:none}
.telbar a{pointer-events:auto;width:100%;max-width:480px;display:flex;align-items:center;justify-content:center;gap:9px;min-height:60px;background:#2E5B4F;color:#fff;font-weight:600;font-size:16px;text-decoration:none;border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -4px 18px rgba(38,43,42,.16)}
a{color:#2E5B4F}
a:hover{color:#4A7A6C}
.speclist{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#DDD9CE;border:1px solid #DDD9CE;border-radius:6px;overflow:hidden;margin-top:4px}
.speclist>div{background:#fff;padding:11px 13px}
.speclist dt{font-size:11.5px;color:#8B7BB5;font-weight:600;margin-bottom:3px}
.speclist dd{margin:0;font-size:13.5px;color:#262B2A;line-height:1.5}
.qlist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.qlist li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.75;color:#262B2A}
.qlist li::before{content:"";position:absolute;left:4px;top:4px;width:5px;height:9px;border:solid #8B7BB5;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cat-q{margin:0;font-size:13px;font-weight:500;line-height:1.55;opacity:.92}
.svc-block{margin-top:36px}
.svc-bhead{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:600;color:#2E5B4F;letter-spacing:.02em;margin-bottom:18px}
.svc-bnum{font-size:12px;font-weight:600;color:#fff;background:#8B7BB5;padding:5px 10px;border-radius:4px;line-height:1}
.svc-grid{display:grid;grid-template-columns:1fr;gap:18px}
.svc-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(38,43,42,.06);display:flex;flex-direction:column}
.svc-card .imgph{width:auto;height:150px;margin:14px 14px 2px;border-radius:6px}
.svc-body{padding:17px 19px 20px}
.svc-name{font-size:16px;font-weight:600;color:#2E5B4F;line-height:1.5;margin-bottom:8px}
.svc-desc{margin:0;font-size:13.5px;line-height:1.85;color:#5F6B68}
.svc-care{background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(38,43,42,.06);padding:20px 20px 22px}
.care-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.care-list li{position:relative;padding-left:27px;font-size:14px;line-height:1.7;color:#262B2A}
.care-list li::before{content:"";position:absolute;left:6px;top:5px;width:6px;height:10px;border:solid #8B7BB5;border-width:0 2px 2px 0;transform:rotate(45deg)}
.care-note{margin:18px 0 0;font-size:13.5px;line-height:1.9;color:#5F6B68}
.care-band{margin-top:16px;background:#2E5B4F;color:#fff;border-radius:8px;padding:17px 22px;text-align:center;font-size:15px;font-weight:600;line-height:1.65}
.care-closing{font-size:19px}
/* ===== PCヘッダー（PC・タブレットのみ） ===== */
.pc-header{display:none}
.cards2{display:flex;flex-direction:column;gap:20px}
/* ===== タブレット 768px+ ===== */
@media (min-width:768px){
  body{background:#e7e3da}
  .wrap{max-width:100%;box-shadow:none;min-height:0}
  .page{padding-bottom:0}
  .telbar{display:none}
  .hero-topbar{display:none !important}
  .pc-header{display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;right:0;z-index:60;padding:18px max(40px,calc((100% - 1080px)/2));background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 58%,rgba(255,255,255,0))}
  .sec{padding-top:76px;padding-bottom:76px;padding-left:max(48px,calc((100% - 1000px)/2));padding-right:max(48px,calc((100% - 1000px)/2))}
  .footer{padding-left:max(40px,calc((100% - 1080px)/2));padding-right:max(40px,calc((100% - 1080px)/2))}
  .cards2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .cats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start;margin-top:28px}
  .cats .cat{margin-top:0}
  .cats .fgrid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-care{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .svc-care .imgph{grid-row:span 2;height:100%;min-height:220px}
  .care-note{margin-top:0}
  .info-wide{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
  .info-wide .cta-card{margin-top:0 !important}
}
/* ===== PC 1120px+ ===== */
@media (min-width:1120px){
  .sec{padding-top:100px;padding-bottom:100px;padding-left:max(60px,calc((100% - 1080px)/2));padding-right:max(60px,calc((100% - 1080px)/2))}
  .h2{font-size:30px}
  .svc-grid{grid-template-columns:repeat(3,1fr)}

  /* FV：建物は全面カバー、情報パネルは右上寄せ（狭め・余白を詰める） */
  .hero{height:100vh;overflow:hidden}
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .hero-band{box-sizing:border-box;position:absolute;top:88px;left:auto;right:max(32px,calc((100% - 1280px)/2));transform:none;width:470px;max-width:calc(100% - 64px);margin-top:0;padding:38px 34px;border-radius:16px;background:rgba(107,93,148,.86);box-shadow:0 10px 40px rgba(38,43,42,.28)}
  .fv-title{font-size:34px;line-height:1.35;white-space:normal}
  .fv-sub{font-size:26px}
  .fv-copy{font-size:18px;margin-top:20px}
  .fv-ctawrap{margin-top:26px}

  /* 締めの帯コピーを一段拡大 */
  .care-closing{font-size:22px}

  /* PC ではモバイル用の改行（br）を無効化 */
  .pc-nobr{display:none}

  /* 先行入居のご案内：中央1カラム（見出し・リード・見学ボックス・CTAをセンター） */
  .intro-center{text-align:center}
  .intro-center .eyebrow::before{display:none}        /* PCでは線のあしらい不要 */
  .intro-center .lead{max-width:none;margin-left:auto;margin-right:auto}       /* PCでは折返さず1行 */
  .intro-center .notice{max-width:660px;margin-left:auto;margin-right:auto}
  .intro-center .intro-support{max-width:720px !important;margin-left:auto;margin-right:auto}

  /* 2カラム（運営会社）：左＝会社情報／右＝CTAカード・縦センター */
  .pc-2col{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
  .pc-2col .col-main{align-self:start}
  .pc-2col .cta-card{margin-top:0 !important;align-self:center}
}

/* ===== 光蓮マーク（装飾）2026-08-19 ===== */
.sec{position:relative;overflow:hidden}
.sec::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:150px;height:150px;
  background:url(../img/kouren-mark.png) no-repeat center/contain;
  opacity:.20;
}
.sec:nth-of-type(odd)::after{right:-34px;bottom:24px;transform:rotate(13deg)}
.sec:nth-of-type(even)::after{left:-38px;top:36px;transform:rotate(-15deg)}
.sec>*{position:relative;z-index:1}

/* FV のマーク
   ※ .hero-band の position は絶対に上書きしないこと。
      SP/タブレット = relative（margin-top:-90px で画像に食い込ませる設計）
      PC(1120px+)   = absolute（右上の情報パネル）
      どちらも positioned なので、基準としてそのまま使える。 */
.mark-fv{
  position:absolute;z-index:3;
  top:16px;right:16px;width:76px;height:auto;
  filter:drop-shadow(0 4px 10px rgba(38,43,42,.28));
}
.mark-inline{width:32px;height:32px;vertical-align:-9px;margin-right:8px;display:inline-block}
.mark-footer{width:30px;height:30px;vertical-align:-8px;margin-right:8px}

@media (min-width:768px){
  .sec::after{width:200px;height:200px}
  .mark-fv{top:20px;right:24px;width:88px}
  .mark-inline{width:38px;height:38px;vertical-align:-11px}
}
@media (min-width:1120px){
  .sec::after{width:240px;height:240px;opacity:.22}
  /* PC はパネルが浮いているので、肩に乗せる */
  .mark-fv{top:-28px;right:-22px;width:88px}
  /* 左の掲示ボードが切れないよう、左端を基準に寄せる（右はパネルが覆う） */
  .hero-bg{object-position:left center}
}

/* 極小幅（〜359px）では FVタイトルの nowrap を解除して横スクロールを防ぐ
   ※ 元からの不具合。「住宅型有料老人ホーム「ふじ」」は320px幅に収まらない */
@media (max-width:359px){
  .fv-title{white-space:normal}
}

/* ヘッダー社名の前のマーク */
.mark-brand{width:28px;height:28px;vertical-align:-9px;margin-right:8px;display:inline-block}
@media (min-width:768px){ .mark-brand{width:34px;height:34px;vertical-align:-11px} }