/* =========================================================
   居宅介護支援事業所 まるっとけあ - style.css
   ベースカラー：オレンジ系
   ========================================================= */

:root{
  --brand:#ef7d22;        /* メインオレンジ */
  --brand-dark:#c85f13;   /* 濃いオレンジ（ホバー・強調） */
  --brand-deep:#4a2a12;   /* 濃茶オレンジ（ダーク背景セクション） */
  --ink:#3a2c22;          /* 本文の基本文字色（暖色系ダークブラウン） */
  --pale:#fff5ea;         /* 薄オレンジ背景 */
  --line:#ecd9c2;         /* ボーダー色 */
  --note:#fff3cf;         /* 注意書き背景 */
  --white:#ffffff;
  --text-sub:#6b5a4a;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.8;
  background:#fffaf5;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,p{ margin:0; }

.wrap{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

/* ===== 上部お知らせバー ===== */
.notice-bar{
  background:var(--brand-deep);
  color:#fff;
  text-align:center;
  padding:8px 12px;
  font-size:12px;
  letter-spacing:.04em;
}

/* ===== ヘッダー ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  overflow:hidden;
}
.logo{
  font-weight:900;
  font-size:20px;
  color:var(--brand-dark);
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  max-height:100%;
}
.logo .mark{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-size:16px;
}
.logo small{
  display:block;
  font-size:10px;
  color:var(--text-sub);
  font-weight:600;
}
.logo-image{
  height:52px;
  max-height:52px;
  width:auto;
  display:block;
}
.footer-grid .logo{
  display:inline-block;
  background:#fff;
  padding:10px 16px;
  border-radius:10px;
}
.footer-grid .logo-image{
  height:32px;
}
.main-nav{
  display:flex;
  gap:24px;
  align-items:center;
  font-weight:700;
  font-size:14px;
}
.main-nav a:hover{ color:var(--brand-dark); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:800;
  font-size:14px;
  border:1px solid var(--brand);
  transition:background .2s,color .2s,transform .1s;
  cursor:pointer;
}
.btn:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn.alt{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--ink);
}
.btn.alt:hover{ background:var(--ink); color:#fff; }

/* モバイルメニューボタン */
.menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  width:44px;
  height:40px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:var(--ink);
}

/* ===== ヒーロー ===== */
.hero{
  min-height:560px;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:linear-gradient(135deg,#fff1e2,#ffe3c4);
}
.hero-copy{
  padding:90px max(6vw,32px);
  align-self:center;
}
.eyebrow{
  font-size:14px;
  font-weight:800;
  color:var(--brand-dark);
  letter-spacing:.12em;
}
.hero h1{
  font-size:clamp(34px,5vw,60px);
  line-height:1.3;
  margin:14px 0 20px;
  letter-spacing:.02em;
  color:var(--ink);
}
.hero .lead{
  max-width:560px;
  font-size:19px;
  font-weight:800;
  margin-bottom:10px;
}
.hero p.body{ max-width:560px; color:var(--text-sub); }
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}
.hero-media{
  background:linear-gradient(135deg,#ffe0bb,#fff6ea);
  display:grid;
  place-items:center;
  border-left:1px dashed #d9a86a;
}
.placeholder{
  border:2px dashed #d9a86a;
  background:rgba(255,255,255,.6);
  padding:22px;
  text-align:center;
  color:#8a6633;
  font-weight:700;
  font-size:14px;
  border-radius:10px;
}
.hero-media .placeholder{
  width:75%;
  min-height:65%;
  display:grid;
  place-items:center;
}
.hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
}
.section-image{
  width:100%;
  min-height:280px;
  max-height:380px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
}

.kawasaki-image-wrap{ display:flex; flex-direction:column; gap:6px; }
.kawasaki-image{ min-height:180px; max-height:220px; }
.image-caption{
  font-size:12px;
  color:var(--text-sub);
}

/* ===== インデックス（目次バー） ===== */
.index-nav{
  margin-top:-32px;
  position:relative;
  z-index:2;
}
.index-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#fff;
  box-shadow:0 12px 30px rgba(74,42,18,.14);
  border-radius:12px;
  overflow:hidden;
}
.index-grid a{
  padding:26px 30px;
  border-right:1px solid var(--line);
  font-weight:900;
  transition:background .2s;
}
.index-grid a:hover{ background:var(--pale); }
.index-grid a:last-child{ border-right:0; }
.index-grid span{
  display:block;
  font-size:11px;
  color:var(--brand-dark);
  margin-bottom:4px;
}

/* ===== セクション共通 ===== */
section{
  padding:94px 0;
  background:#fff;
}
section.section-alt{ background:var(--pale); }
.sec-head{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:35px;
  margin-bottom:45px;
}
.sec-num{
  font-weight:900;
  color:var(--brand-dark);
  font-size:14px;
  letter-spacing:.13em;
}
.sec-head h2{
  font-size:clamp(28px,4vw,44px);
  line-height:1.3;
  color:var(--ink);
}
.sec-head .lead{
  font-size:19px;
  font-weight:800;
  margin-top:8px;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
}
.two-col p + p{ margin-top:14px; }

/* ===== カード ===== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  border:1px solid var(--line);
  background:#fff;
  padding:26px;
  border-radius:10px;
  transition:box-shadow .2s,border-color .2s;
}
.card:hover{ box-shadow:0 8px 20px rgba(74,42,18,.1); border-color:var(--brand); }
.card b{
  display:block;
  font-size:17px;
  margin-bottom:8px;
  color:var(--brand-dark);
}
.card span{ color:var(--text-sub); font-size:15px; }

/* ===== 注記 ===== */
.note{
  background:var(--note);
  border-left:5px solid #e2ab34;
  padding:14px 18px;
  margin:18px 0;
  font-size:13px;
  color:#5d4a22;
  border-radius:0 6px 6px 0;
}

/* ===== 事業所情報テーブル ===== */
.info-table{ border-top:2px solid var(--brand); margin-top:16px; }
.info-row{
  display:grid;
  grid-template-columns:190px 1fr;
  padding:14px 12px;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.info-row b{ font-size:14px; color:var(--brand-dark); }

.office-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:36px;
}
.office-card{
  padding:28px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
}
.tag{
  display:inline-block;
  padding:5px 14px;
  border-radius:99px;
  background:var(--pale);
  color:var(--brand-dark);
  font-size:12px;
  font-weight:800;
  border:1px solid var(--brand);
}
.office-card h3{
  margin-top:12px;
  font-size:19px;
  line-height:1.5;
  color:var(--ink);
}

/* ===== ご利用までの流れ ===== */
.flow{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}
.step{
  background:#fff;
  border:1px solid var(--line);
  padding:22px 14px;
  min-height:170px;
  border-radius:10px;
}
.step em{
  font-style:normal;
  color:var(--brand-dark);
  font-weight:900;
  font-size:13px;
}
.step h3{
  font-size:16px;
  line-height:1.5;
  margin:6px 0 8px;
  color:var(--ink);
}
.step p{ font-size:14px; color:var(--text-sub); }

/* ===== ケアプラン作成申込・相談書 セクション ===== */
.careplan-request{
  margin-top:60px;
  padding:40px;
  background:var(--pale);
  border:1px solid var(--line);
  border-radius:14px;
}
.careplan-request h3{
  font-size:24px;
  color:var(--ink);
  margin-bottom:16px;
}
.careplan-request .desc-text{
  color:var(--text-sub);
  margin-bottom:26px;
}
.careplan-request .desc-text p{ margin:4px 0; }

.download-buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.download-card{
  flex:1 1 260px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  transition:box-shadow .2s,border-color .2s,transform .1s;
  cursor:pointer;
}
.download-card:hover{
  box-shadow:0 8px 20px rgba(74,42,18,.12);
  border-color:var(--brand);
  transform:translateY(-2px);
}
.file-icon{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#fff;
  font-weight:900;
  font-size:11px;
  letter-spacing:.02em;
}
.file-icon i{ font-size:18px; }
.file-icon .icon-label{ font-size:10px; }
.file-icon.word{ background:#2b579a; } /* Word=青 */
.file-icon.pdf{ background:#d93831; }  /* PDF=赤 */
.download-card .dl-text{
  display:flex;
  flex-direction:column;
}
.download-card .dl-text b{
  font-size:16px;
  color:var(--ink);
}
.download-card .dl-text span{
  font-size:13px;
  color:var(--text-sub);
}

.send-to{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 26px;
}
.send-to b{ display:block; margin-bottom:10px; color:var(--brand-dark); }
.send-to .send-row{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:15px;
  margin:6px 0;
}
.send-to .send-row .label{
  font-weight:800;
  min-width:60px;
}

/* ===== 求人情報（ダーク配色） ===== */
.recruit-section{
  background:var(--brand-deep) !important;
  color:#fff;
}
.recruit-section .sec-head h2{ color:#fff; }
.recruit-section .sec-num{ color:#ffbf85; }
.recruit-section .lead{ color:#ffe3c4; }
.recruit-section p{ color:#f2e2d2; }
.recruit-copy h3{
  font-size:30px;
  line-height:1.45;
  color:#fff;
  margin-bottom:16px;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:26px;
}
.feature{
  padding:24px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  color:#f2e2d2;
}
.feature-num{
  display:block;
  font-weight:900;
  font-size:13px;
  letter-spacing:.13em;
  color:#ffbf85;
  margin-bottom:6px;
}
.feature b{ display:block; color:#fff; margin-bottom:10px; font-size:17px; line-height:1.5; }
.feature p{ font-size:14px; color:#f2e2d2; margin:0; line-height:1.85; }

/* ===== お問い合わせCTA ===== */
.cta-section{
  padding:56px 0;
  background:linear-gradient(135deg,#ffe9d2,#fff6ea);
  text-align:center;
}
.cta-section h2{
  font-size:32px;
  margin-bottom:12px;
  color:var(--ink);
}
.cta-section p{ color:var(--text-sub); }
.cta-note{ font-size:13px; margin-top:14px; color:var(--text-sub); }

/* ===== フッター ===== */
.site-footer{
  padding:48px 0;
  background:var(--brand-deep);
  color:#fdeee0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:30px;
}
.footer-grid .logo{ color:#fff; }
.footer-grid .logo small{ color:#e5c3a0; }
.footer-grid b{ color:#fff; display:block; margin-bottom:10px; }
.footer-grid a:hover{ color:#ffbf85; }
.footer-grid p{ color:#e5c3a0; font-size:14px; }
.footer-bottom{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:12px;
  color:#c7a37f;
  text-align:center;
}

/* ===== レスポンシブ ===== */
@media (max-width:800px){
  .main-nav{ display:none; }
  .main-nav.open{
    display:flex;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:16px 20px 24px;
    gap:16px;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 20px rgba(0,0,0,.08);
  }
  .menu-toggle{ display:flex; }

  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero-copy{ padding:56px 24px 40px; }
  .hero-media{ min-height:280px; border-left:0; border-top:1px dashed #d9a86a; }

  .index-nav{ margin-top:0; }
  .index-grid{ grid-template-columns:1fr; border-radius:0; }
  .index-grid a{ border-right:0; border-bottom:1px solid var(--line); }

  .card-grid,.office-grid,.feature-grid,.footer-grid{ grid-template-columns:1fr; }
  .sec-head,.two-col{ grid-template-columns:1fr; gap:14px; }

  .flow{ display:flex; overflow-x:auto; padding-bottom:8px; }
  .step{ min-width:220px; }

  .info-row{ grid-template-columns:1fr; gap:4px; }

  section{ padding:60px 0; }
  .wrap{ width:min(100% - 28px,1120px); }

  .careplan-request{ padding:26px; }
  .download-buttons{ flex-direction:column; }
}