@charset "utf-8";

:root{
  --mint:#dff2ea;
  --mint-weak:#e7f9f3;
  --green:#11b08f;
  --text:#333;
  --max:1120px;
}

html, body{ overflow-x:hidden; }

section{
  max-width:1200px;
  margin:0 auto;
  font-family:"Zen Kaku Gothic New",sans-serif;
  line-height:1.8;
  color:#333;
}

.section-title{ text-align: -webkit-center; margin-top:80px; }
.section-title h2{
  text-align:center;
  font-size:28px;
  font-weight:bold;
  color:#fff;
  background:#00a58c;
  display:inline-block;
  padding:10px 30px;
  border-radius:4px;
  margin-bottom:40px;
}

.highlight{ color:#00a58c; font-weight:bold; }
.note{ font-size:14px; color:#666; margin:10px 0; }

/* ページタイトル（ヒーロー） */
.page_ttl_wrap{
  --hero:url("../img/root_top_back.jpg");
  --tint:rgba(17,176,143,.35);
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-height:clamp(220px,28vw,360px);
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background-image:var(--hero);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.page_ttl_wrap::before{
  content:"";
  position:absolute; inset:0;
  background:var(--tint);
  z-index:-1;
}
.page_ttl{
  margin:0; color:#fff; font-weight:800;
  font-size:clamp(28px,5.2vw,56px);
  letter-spacing:.25em;
  -webkit-text-stroke:1px rgba(6,172,132,.9);
  text-shadow:0 0 17px #fff, 0 0 10px #fff;
}


:root{
  --green:#11b08f;
  --mint:#e6faf4;
  --text:#333;
}

/* 器 */
.rootcare{
  max-width:1120px;
  margin:70px auto 90px;
  padding:0 20px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  color:var(--text);
  line-height:1.9;
}

/* リボン見出し（左にクローバー、下に白ライン） */
.rootcare__heading{
  width:min(1120px,92vw);
  margin:0 auto 34px;
  background:var(--green);
  color:#fff;
  text-align:center;
  padding:14px 12px;
  font-weight:800;
  letter-spacing:.22em;
  font-size:clamp(18px,2.6vw,28px);
  position:relative;
  border-radius:3px;
  background-image:url("img/ribbon-clover.png");
  background-repeat:no-repeat;
  background-position:left 28px center;  /* クローバー */
  background-size:auto 80%;
}
.rootcare__heading::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:6px; background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.rootcare__heading > span{ position:relative; z-index:1; }

/* 2カラム */
.rootcare__grid{
  display:grid;
  grid-template-columns:1.05fr 480px;
  gap:42px;
  align-items:start;
  margin-bottom:48px;
}
.rootcare__photo img{ width:100%; height:auto; display:block; }

/* ボード（角丸＋緑枠） */
.rootcare__board{
  border:3px solid var(--green);
  border-radius:18px;
  padding:clamp(20px,3vw,30px);
  background:#fff;
}

/* ボード見出し */
.board__title{
  margin:0 0 14px;
  text-align:center;
  color:var(--green);
  font-weight:800;
  letter-spacing:.1em;
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.6;
  position:relative;
}
.board__title small{
  display:inline-block;
  font-weight:700; font-size:.9em; letter-spacing:.08em;
  color: #000000;
}
.tiny-check{
  display:inline-block; width:18px; height:18px; margin-left:6px;
  border:2px solid #23b7a4; border-radius:3px; vertical-align:-3px; position:relative;
}
.tiny-check::after{
  content:""; position:absolute; left:4px; top:3px; width:8px; height:5px;
  border-left:2px solid #23b7a4; border-bottom:2px solid #23b7a4; transform:rotate(-45deg);
}

/* チェックリスト */
.board__list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:18px; }
.board__list li{ display:grid; grid-template-columns:24px 1fr; column-gap:12px; }
.board__list .cb{
  width:20px; height:20px; border:2px solid #626262; border-radius:4px; position:relative; top:6px;
}
.board__list .cb::after{
  content:""; position:absolute; left:4px; top:3px; width:10px; height:6px;
  border-left:3px solid #23b7a4; border-bottom:3px solid #23b7a4; transform:rotate(-45deg);
}
.board__list strong{ display:block; margin-bottom:2px; }

/* レスポンシブ */
@media (max-width:980px){
  .rootcare__grid{ grid-template-columns:1fr; gap:24px; }
  .rootcare__photo{ order:2; max-width:640px; margin:0 auto; }
}
@media (max-width:560px){
  .rootcare{ margin:50px auto 70px; }
  .rootcare__heading{ margin-bottom:28px; background-position:left 14px center; }
}

@charset "utf-8";

/* ===== Root Vars ===== */
:root{
  --cream:#fff5df;   /* セクションの背景色（全幅に敷く） */
  --text:#333;
}

/* ===== Flow Section (背景だけ全幅) ===== */
.rc-flow{
  position: relative;
  isolation: isolate;          /* 背景疑似要素を背面に固定 */
  padding: 38px 0 70px;
}
.rc-flow::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0; bottom:0;
  width:100vw;                 /* 背景のみ画面幅いっぱい */
  background:var(--cream);
  z-index:-1;
}

/* 中身の幅は中央に制限 */
.rc-flow__inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  font-family:"Zen Kaku Gothic New", sans-serif;
  color:var(--text);
  line-height:1.9;
}

/* ===== Title & Meta ===== */
.rc-flow__title{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0;
  font-weight:800;
  letter-spacing:.18em;
  font-size:clamp(20px, 2.6vw, 32px);
  color:#3c3c3c;
}
.rc-flow__ic{ width:28px; height:auto; }
.rc-flow__meta{
  color: #000000;
    letter-spacing: .08em;
    margin: 30px 0 15px;
    margin-left: 40px;
}

/* ===== Steps ===== */
.rc-steps{
  width:min(1200px, 88vw);
  margin:0 auto;
  background:#fff;
  padding:clamp(18px, 3vw, 28px);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px, 2.4vw, 28px);
}
.rc-step__head{
  margin:6px 0 12px;
  text-align:center;
  letter-spacing:.16em;
  font-weight:700;
  color:#333;
}
.rc-step__fig img{
  display:block;
  width:100%;
  height:auto;
  max-width:200px;
  margin:0 auto;
}
.rc-step__cap{
  margin:10px 0 0;
  text-align:center;
  color:#666;
  font-size:14px;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .rc-steps{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .rc-steps{ grid-template-columns:1fr; }
}

/* 器 */
.prevent{
  max-width: 1120px;
  margin: 70px auto 90px;
  padding: 0 20px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #333;
  line-height: 1.95;
}

/* タイトル（中央） */
.prevent__title{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin: 0 0 28px;
  text-align:center;
}
.prevent__icon{ width:28px; height:auto; }
.prevent__title h2{
  margin:0;
  font-weight:800;
  letter-spacing:.18em;
  font-size: clamp(22px, 2.6vw, 36px);
  color:#3b3b3b;
}

/* 2カラム */
.prevent__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr; /* 画像をやや大きく */
  gap: 48px;
}
.prevent__photo img{ width:100%; height:auto; display:block; }
.prevent__text p{ margin:0 0 14px; color:#555; }

/* レスポンシブ */
@media (max-width: 960px){
  .prevent__grid{ grid-template-columns: 1fr; gap: 22px; }
  .prevent__photo{ order:-1; max-width: 720px; margin: 0 auto; }
}
@media (max-width: 560px){
  .prevent{ margin: 50px auto 70px; }
}