/* =========================================
   shira.css（完全整理版）
   - 青×緑 / やや暗調
   - サブナビのみ、ヒーローは <picture>
   - カード / Q&A / 番号リスト / フォーム / タイポ
   ========================================= */

/* ===== パレット ===== */
:root{
  --shira-bg:#EEF2F5;
  --shira-surface:#FFFFFF;
  --shira-text:#222;
  --shira-muted:#4A5568;
  --shira-head:#173B2D;
  --shira-link:#1E88E5;
  --shira-border:#D0D6DE;
  --shira-teal:#2A9D8F;
  --shira-indigo:#2F5AA8;
  --shira-accent:#2F5AA8;
  --indigo-rgb:47,90,168;
  --teal-rgb:42,157,143;

  /* 余白スケール */
  --gutter-sm:20px;
  --gutter:28px;
  --gutter-lg:36px;
  --card-pad-sm:22px;
  --card-pad:28px;
  --card-pad-lg:36px;
}

body.shira {
    margin: 0;
}

/* サブナビと新着は最小左右8pxを確保して中央寄せ */
.shira-nav--sub,
#news {
  max-width: 1080px;
  width: calc(100% - 16px); /* ←画面幅から左右8pxずつ引く */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* ===== ベース（丸ゴ） ===== */
html { scroll-behavior: smooth; }
body.shira{
  background:var(--shira-bg);
  color:var(--shira-text);
  font-family:"M PLUS Rounded 1c","Noto Sans JP",sans-serif;
  font-weight:400;
  font-size:1.0625rem; /* 17px */
  line-height:1.78;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body.shira a{ color:var(--shira-link); text-decoration:none; }
body.shira a:hover, body.shira a:focus{ text-decoration:underline; }
body.shira p, body.shira ul, body.shira ol, body.shira dl{
  margin-block:clamp(.7em,1.0vw,1.05em);
}
body.shira li{ margin-block:.45em; line-height:1.85; }

/* ===== 見出し ===== */
body.shira h1,body.shira h2,body.shira h3,body.shira h4,body.shira h5,body.shira h6{
  color:var(--shira-head);
  font-weight:700;
  letter-spacing:.02em;
  margin:0.55em 0 .55em;
}
body.shira h1{ font-size:clamp(28px,4.6vw,56px); }
body.shira h2{ font-size:clamp(26px,2.6vw,35px); }
body.shira h3{ font-size:clamp(22px,2.2vw,30px); }
body.shira h4{ font-size:clamp(20px,2vw,28px); }

/* 見出しと本文の光学バランス */
:where(#main h3,#main h4)+:where(p,ul,ol,dl){ margin-top:.4em; }
:where(p,ul,ol,dl)+:where(#main h3,#main h4){ margin-top:1.25em; }

/* ===== コンテナ ===== */
.shira-container{
  max-width:1080px;
  margin:0 auto;
  padding:var(--gutter);
}
@media(min-width:768px){ .shira-container{ padding:var(--gutter-lg); } }
/* body.shira #contents_r{ padding-right:8px; } */


/* ===== ヒーロー ===== */
.shira-hero-visual{
  position:relative; min-height:clamp(240px,40vw,420px);
  max-height:48svh; overflow:hidden;
}
.shira-hero-visual__bg{ position:absolute; inset:0; z-index:0; display:block; }
.shira-hero-visual__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.shira-hero-visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.28) 52%,rgba(255,255,255,0) 76%);
  pointer-events:none;
}
.shira-hero-visual__inner{ position:relative; z-index:1; padding:clamp(18px,4vw,40px) var(--gutter); }
.shira-hero-visual__title{
  margin:0 0 .2em;
  font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:clamp(24px,3.2vw,40px);
}
.shira-hero-visual__lead{ margin:0 0 .6em; font-weight:700; font-size:clamp(18px,2.5vw,28px); }
.shira-hero-visual__desc{ max-width:42ch; margin:0; color:#2b2b2b; }

/* ===== シンプルヒーロー（新着情報・プライバシー共通） ===== */
.shira-hero-simple {
  background-color: var(--shira-head); /* 深緑背景 (#173B2D) */
  color: #fff;
  font-size:clamp(18px,4.6vw,28px);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  padding: clamp(5px, 10vw, 10px) 0; /* 縦幅をコンパクトに */
}

.shira-hero-simple__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.shira-hero-simple h1 {
  font-size: clamp(24px, 3vw, 36px);
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ===== サブナビ ===== */
.shira-nav--sub{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  margin:var(--gutter) auto calc(var(--gutter) - 4px);
  padding:12px var(--gutter);
  background:var(--shira-surface);
  border:1px solid var(--shira-border);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.shira-nav__pill{
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--teal-rgb),.05);
  color:var(--shira-head);
  border-radius:999px; padding:10px 14px;
  font-weight:700;
  transition:background .2s ease, box-shadow .2s ease;
}
.shira-nav__pill:hover{ background:rgba(var(--teal-rgb),.15); box-shadow:0 2px 6px rgba(0,0,0,.08); }

/* ===== カード ===== */
.shira-card{
  background:var(--shira-surface);
  border:1px solid var(--shira-border);
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06), 0 0 0 3px rgba(var(--indigo-rgb),.04) inset;
  padding:20px;
}
@media(min-width:768px){ .shira-card{ padding:24px 28px; } }
@media(min-width:1200px){ .shira-card{ padding:28px 34px; } }

.shira-section{ margin:18px 0; }
.shira-section:first-child{ margin-top:0; }
.shira-section:last-child{ margin-bottom:0; }

/* カード内の段落端を少し内側へ */
.shira-card .shira-section > *:not(.shira-olist):not(.qa){
  padding-inline:.5em;
}
@media(min-width:768px){
  .shira-card .shira-section > *:not(.shira-olist):not(.qa){
    padding-inline:.6em;
  }
}

/* ===== 新着 ===== */
.shira-news .item{ padding:10px 0; border-bottom:1px solid var(--shira-border); }
.shira-news .item:last-child{ border-bottom:0; }
.shira-news time{ color:var(--shira-muted); font-weight:600; margin-right:.5em; }

/* ===== 丸数字セクション ===== */
.shira-msection{
  margin:12px 0;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--shira-border);
  border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.03);
}
.shira-paranum{
  list-style:none;
  counter-reset:shira-counter;
  margin:.6em 0;
  padding:0;
}
.shira-paranum > li{
  counter-increment:shira-counter;
  position:relative;
  padding-left:2.2em;
  margin:.35em 0;
  line-height:1.8;
}
.shira-paranum > li::before{
  content:counter(shira-counter);
  position:absolute;
  left:0; top:.15em;
  width:1.6em; height:1.6em;
  line-height:1.6em;
  text-align:center;
  font-weight:700;
  color:var(--shira-head);
  background:rgba(var(--teal-rgb),.10);
  border-radius:50%;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
}

/* ===== Q&A ===== */
.qa{
  margin:10px 0;
  border:1px solid var(--shira-border);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.qa > summary{
  list-style:none; cursor:pointer;
  padding:14px 18px;
  font-weight:700;
  position:relative;
  background:linear-gradient(180deg,rgba(var(--indigo-rgb),.08),rgba(var(--indigo-rgb),.02));
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa > summary::after{
  content:"▸"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:18px; opacity:.7;
}
.qa[open] > summary{ border-bottom:1px solid var(--shira-border); background:rgba(var(--indigo-rgb),.10); }
.qa[open] > summary::after{ content:"▾"; }
.qa__answer{ padding:14px 18px 18px; }
.qa__answer p{ margin:.7em 0; line-height:1.9; }

/* ===== 既存 .indent1 を保守的に補強 ===== */
body.shira .indent1{ display:block; text-indent:-2.1em; padding-left:2.1em; line-height:1.9; }

/* ===== フォーム UI ===== */
.shira-form__title{ margin:0 0 .25em; }
.shira-form__desc{ color:var(--shira-muted); margin:.2em 0 1em; }

.shira-form{ display:grid; gap:16px; }
.shira-form__row{ display:block; }
.shira-form__label{
  display:block; font-weight:700; margin-bottom:.35em; color:var(--shira-head);
}
.shira-form__req{
  display:inline-block; margin-left:.4em; font-size:.85em; font-weight:700;
  color:#fff; background:rgba(var(--teal-rgb), .95); border-radius:6px; padding:.05em .45em;
}
.shira-form__control{
  width:100%; padding:12px 12px; border:1px solid var(--shira-border);
  border-radius:10px; background:#fff; font:inherit; line-height:1.6;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.shira-form__control:focus{
  outline:none; border-color:rgba(var(--indigo-rgb), .45);
  box-shadow:0 0 0 3px rgba(var(--indigo-rgb), .12);
}
.shira-form__control[aria-invalid="true"],
.shira-form__control:invalid{
  border-color:#d93025; box-shadow:0 0 0 3px rgba(217,48,37,.1);
}
.shira-form__hint{ color:var(--shira-muted); font-size:.92rem; margin-top:.35em; }

.shira-form__choices{ display:flex; flex-wrap:wrap; gap:14px; }
.shira-form__choice{ display:inline-flex; align-items:center; gap:.45em; }

.shira-form__agree{ display:flex; align-items:center; gap:.6em; font-weight:600; }

.shira-form__captcha{
  height:78px; border:1px dashed var(--shira-border); border-radius:10px;
  display:grid; place-items:center; color:var(--shira-muted); background:#fff;
}

.shira-form__actions{ display:flex; align-items:center; gap:12px; }
.shira-form__note{ color:var(--shira-muted); font-size:.92rem; }

.shira-form__alert{
  margin-top:4px; padding:12px; border-radius:10px; background:#fff;
  border:1px solid var(--shira-border); color:var(--shira-head);
}

/* モバイル余白の最適化 */
@media (max-width: 560px){
  .shira-form__actions{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ===== フォーム幅のはみ出し防止 ===== */
.shira-form__control,
.shira-form textarea,
.shira-form select {
  box-sizing: border-box; /* ← これで親のpadding内に収まる */
  max-width: 100%;        /* 念のため親要素からはみ出さない */
}

/* ===== インラインリンク ===== */
.shira-inline-link{
  color:var(--shira-accent);
  font-weight:500;
  text-decoration:underline dotted;
  text-underline-offset:.2em;
  transition:color .2s ease;
}
.shira-inline-link:hover{ color:rgb(var(--indigo-rgb)); text-decoration-style:solid; }

/* ===== Thanksページ ===== */
.shira-thanks-wrap{
  min-height:60svh;
  display:grid;
  place-items:center;
  padding:clamp(20px,4vw,40px);
}
.shira-thanks{
  max-width:720px;
  margin:0 auto;
  padding:clamp(22px,3.6vw,40px) clamp(24px,4.8vw,48px);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.shira-thanks::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(500px 200px at 15% 0%,rgba(var(--teal-rgb),.08),transparent 60%),
    radial-gradient(400px 240px at 90% 80%,rgba(var(--indigo-rgb),.06),transparent 65%);
  pointer-events:none;
}
.thanks-icon{
  width:68px; height:68px;
  margin:4px auto 14px;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--shira-teal),var(--shira-indigo));
  box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 0 0 4px rgba(255,255,255,.6);
  color:#fff;
}
.shira-thanks h1{ margin:.2em 0 .25em; font-size:clamp(22px,2.4vw,30px); }
.shira-thanks .lead{ color:var(--shira-muted); margin:0 0 1em; }

/* フィールドエラー表示 */
.shira-form__error{
  margin-top:.35em; color:#d93025; font-size:.92rem;
}
.shira-form__control[aria-invalid="true"]{
  border-color:#d93025;
  box-shadow:0 0 0 3px rgba(217,48,37,.12);
}

/* ===== 記事内 写真グリッド ===== */
.shira-photo-grid {
  display: grid;
  gap: 16px;
  margin: 20px 0;
}

.shira-photo-grid figure {
  margin:auto;
  text-align: center;
}

.shira-photo-grid img {
  max-width:640px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.shira-photo-grid figcaption {
  font-size:.9rem;
  color:#666;
}

/* 2列レイアウト（4枚以上用） */
.shira-photo-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* スマホ時は1列 */
@media (max-width: 640px) {
  .shira-photo-grid--2col {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * プライバシーポリシーモーダル（白菊会）
 * ========================================================= */
.shira-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
}
.shira-modal[hidden] {
  display: none;
}
.shira-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.shira-modal__dialog {
  position: relative;
  z-index: 2;
  background: #fff;
  max-width: 90vw;
  width: 720px;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  margin: 5vh auto;
  animation: shira-fadein 0.25s ease-out;
}
.shira-modal__dialog iframe {
  width: 100%;
  height: 70vh;
  border: none;
  display: block;
}
.shira-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #444;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 3;
}
.shira-modal__close:hover {
  color: #185c4b;
}
@keyframes shira-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
 * ここまでプライバシーポリシーモーダル（白菊会共通スタイル）
 * ========================================================= */