@charset "utf-8";
/* ------------------------------
   Base
------------------------------ */
:root{
  --brand: #6abf4b;
  --text: #333;
  --bg: #f9f9f9;
  --card: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; } /* ← スムーススクロール */
body {
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  line-height: 1.8;
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
}
img { max-width: 100%; height: auto;  }

header {
  background-color: var(--brand);
  color: #fff;
  padding: 20px;
  text-align: center;
}
main {
  padding: 40px 20px;
  max-width: 800px;
  margin: auto;
  background-color: var(--card);
}
h1 { font-size: 1.7em; margin: 0 0 .5em; font-weight: bold;}
h2 {
  font-size: 1.5em;
  border-bottom: 2px solid var(--brand);
  padding-bottom: .3em;
  margin: 1.6em 0 .8em;
}
h3 { font-size: 1.2em; margin: 1.2em 0 .4em; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.5em; }

footer {
  background-color: #eee;
  text-align: center;
  padding: 20px;
  font-size: .9em;
  margin-top: 40px;
}


.w80 {
	max-width: 100%;
	width: 100%;
}
.w40 {
	max-width: 100%;
	width: 100%;
}

.mt00 { margin-top: 0px !important;}
.mt10 { margin-top: 10px !important;}
.mt20 { margin-top: 20px !important;}
.mt30 { margin-top: 30px !important;}
.mt40 { margin-top: 40px !important;}
.mt50 { margin-top: 50px !important;}

.t_l { text-align: left; }
.t_c { text-align: center; margin: 0 auto; }
.t_r { text-align: right; margin: 0 auto; }

.bold { font-weight: bold; }
.indent {
  padding-left: 1em;
  text-indent: -1em;
  margin: .3em 0;
}

.linebox {
    border: 1px solid black; /* 枠線 */
    padding: 10px; /* 内側の余白 */
}

.pc { display: none !important; }
.sp { display: block !important; }

/* タブレット以上 */
@media (min-width: 840px){
	h1 {
		font-size: 2em;
	}
	.w80 {
		max-width: 80%;
		width: 80%;
	}
	.w40 {
		max-width: 40%;
		width: 40%;
	}
	.pc { display: block !important; }
	.sp { display: none !important; }
}


/* ------------------------------
   ナビ（ハンバーガー）
   ------------------------------ */

/* 基本：ヘッダー右上ボタン */
.site-header{ position: relative; }

/* トグル状態保持（視覚的に隠す） */
#navcheck{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; clip:rect(0,0,0,0); overflow:hidden;
}

/* ハンバーガーボタン */
.navbutton{
  position:absolute; top:12px; right:12px;
  width:44px; height:44px; border-radius:8px;
  background:rgba(255,255,255,.18); cursor:pointer;
  display:grid; place-items:center;
}
.navbutton:focus-visible{ outline:3px solid rgba(0,0,0,.35); outline-offset:2px; }

/* 3本線 → チェックで×へ */
.navbutton .bars,
.navbutton .bars::before,
.navbutton .bars::after{
  content:""; display:block; width:22px; height:2px; background:#fff;
  position:relative; transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.navbutton .bars::before{ position:absolute; top:-7px; }
.navbutton .bars::after { position:absolute; top: 7px;  }

body:has(#navcheck:checked) .navbutton .bars{ transform:rotate(45deg); }
body:has(#navcheck:checked) .navbutton .bars::before{ top:0; opacity:0; }
body:has(#navcheck:checked) .navbutton .bars::after { top:0; transform:rotate(-90deg); }

/* ナビ本体 */
.site-nav{ position:relative; z-index:1000; }
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
body:has(#navcheck:checked) .nav-overlay{ opacity:1; visibility:visible; }

/* パネル：スマホ（右からスライドイン） */
.nav-panel{
  position:fixed; top:0; right:0;
  width:min(86vw,360px); height:100dvh;
  background:var(--card); color:var(--text);
  box-shadow:-6px 0 18px rgba(0,0,0,.18);
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; gap:16px; padding:16px;
  z-index:1001;
}
body:has(#navcheck:checked) .nav-panel{ transform:translateX(0); }

/* 開いている間はスクロール抑止 */
body:has(#navcheck:checked){ overflow:hidden; }

/* リスト体裁 */
.nav-list{ list-style:none; padding:0; margin:0; }
.nav-list li{ border-bottom:1px solid #eee; }
.nav-list a{
  display:block; padding:14px 6px; text-decoration:none; color:inherit;
}
.nav-list a:hover{ color:var(--brand); }

.nav-cta{ margin-top:auto; }
.nav-cta .btn{
  display:block; text-align:center; padding:12px 14px;
  background:var(--brand); color:#fff; text-decoration:none; border-radius:8px;
}

/* PC（840px～）：右上ドロップダウンに切替 */
@media (min-width:840px){
  .nav-panel{
    position:absolute;
    right:1px;
    top:calc(100% + 1px);
    width:480px; height:auto; max-height:min(70vh,640px); overflow:auto;
    border:1px solid #e6e6e6; border-radius:12px;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    transform:scale(.98); opacity:0; pointer-events:none;
  }
  body:has(#navcheck:checked) .nav-panel{
    transform:scale(1); opacity:1; pointer-events:auto;
  }
  .nav-overlay{ background:transparent; }
}

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 閉じる（×）ボタン：メニュー上に重ね表示 */
.nav-close{
  position:absolute; top:8px; right:8px;
  width:40px; height:40px; border:0; border-radius:8px;
  background:transparent; color:var(--text); cursor:pointer; z-index:2;
}
.nav-close:focus-visible{ outline:3px solid rgba(0,0,0,.35); outline-offset:2px; }
.nav-close:hover{ color:var(--brand); }

/* × の描画 */
.nav-close::before,
.nav-close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:22px; height:2px; background:currentColor; transform-origin:center;
}
.nav-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.nav-close::after { transform:translate(-50%,-50%) rotate(-45deg); }


/* ------------------------------
   Blocks
------------------------------ */
.steps {
  background-color: #f0f8e0;
  padding: 20px;
  border-radius: 8px;
  margin-top: 1em;
}
.steps li { margin-bottom: .5em; }

.product-info {
  margin-top: 2em;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.product-info p { margin: .5em 0; }

.contact { margin-top: 2em; text-align: center; }
.contact a {
  display: inline-block;
  margin-top: 1em;
  padding: 10px 20px;
  background-color: var(--brand);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* ------------------------------
   Q&A
------------------------------ */
.qa { margin-top: 2em; }
.qa-block {
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 1em;
}
.qa-block p { margin: .3em 0; padding-left: 1.5em; text-indent: -1.5em; }

/* 画像1枚パターン */
.answer-image { margin-top: 1em; text-align: center; }
.answer-image img {
  margin-inline: auto;
}

/* 画像2枚横並び（既存・可変） */
.answer-images {
  display: flex;
  gap: 10px;
  margin-top: 1em;
  justify-content: center;
  flex-wrap: wrap; /* 狭い時は折り返す */
}
.answer-images img {
  width: 48%;
  flex: 1 1 280px; /* 可変幅で気持ちよく折り返し */
}

/* ------------------------------
   Notice Blocks (variants)
------------------------------ */
.notice-block {
  margin-top: 2em;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.notice-block h2 { margin-top: 0; }







/* ==============================
   Notice Blocks — Bootstrap-like 7 colors
   variants: primary / secondary / success / danger / warning / info / light
   type: filled（背景色つき）, border-*（白背景＋枠だけ色）
============================== */

/* ---- Filled (背景色つき) ---- */
.notice-block.primary{
  background-color: #cfe2ff;
  border-color: #b6d4fe;
  color: #084298;
}
.notice-block.primary h2{ border-bottom: 2px solid #b6d4fe; }

.notice-block.secondary{
  background-color: #e2e3e5;
  border-color: #d3d6d8;
  color: #41464b;
}
.notice-block.secondary h2{ border-bottom: 2px solid #d3d6d8; }

.notice-block.success{
  background-color: #d1e7dd;
  border-color: #badbcc;
  color: #0f5132;
}
.notice-block.success h2{ border-bottom: 2px solid #badbcc; }

.notice-block.danger{
  background-color: #f8d7da;
  border-color: #f5c2c7;
  color: #842029;
}
.notice-block.danger h2{ border-bottom: 2px solid #f5c2c7; }

.notice-block.warning{
  background-color: #fff3cd;
  border-color: #ffecb5;
  color: #664d03;
}
.notice-block.warning h2{ border-bottom: 2px solid #ffecb5; }

.notice-block.info{
  background-color: #cff4fc;
  border-color: #b6effb;
  color: #055160;
}
.notice-block.info h2{ border-bottom: 2px solid #b6effb; }

.notice-block.light{
  background-color: #fefefe;
  border-color: #fdfdfe;
  color: #636464;
}
.notice-block.light h2{ border-bottom: 2px solid #fdfdfe; }

/* ---- Border only (白背景＋枠線のみ色) ---- */
.notice-block.border-primary{
  background-color: #fff;
  border-color: #b6d4fe;
  color: #084298;
}
.notice-block.border-primary h2{ border-bottom: 2px solid #b6d4fe; }

.notice-block.border-secondary{
  background-color: #fff;
  border-color: #d3d6d8;
  color: #41464b;
}
.notice-block.border-secondary h2{ border-bottom: 2px solid #d3d6d8; }

.notice-block.border-success{
  background-color: #fff;
  border-color: #badbcc;
  color: #0f5132;
}
.notice-block.border-success h2{ border-bottom: 2px solid #badbcc; }

.notice-block.border-danger{
  background-color: #fff;
  border-color: #f5c2c7;
  color: #842029;
}
.notice-block.border-danger h2{ border-bottom: 2px solid #f5c2c7; }

.notice-block.border-warning{
  background-color: #fff;
  border-color: #ffecb5;
  color: #664d03;
}
.notice-block.border-warning h2{ border-bottom: 2px solid #ffecb5; }

.notice-block.border-info{
  background-color: #fff;
  border-color: #b6effb;
  color: #055160;
}
.notice-block.border-info h2{ border-bottom: 2px solid #b6effb; }

.notice-block.border-light{
  background-color: #fff;
  border-color: #e9ecef; /* うっすら見える程度に */
  color: #495057;
}
.notice-block.border-light h2{ border-bottom: 2px solid #e9ecef; }


/* ------------------------------
   Global List Utilities (site-wide)
------------------------------ */
ul.list-default {
  list-style: disc;
  padding-left: 1.5em;
}

ul.list-green-circle { list-style: none; padding-left: 0; }
ul.list-green-circle li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: .6em;
}
ul.list-green-circle li::before {
  content: "\25CF"; /* ● */
  color: var(--brand);
  position: absolute;
  left: 0;
  top: 0;
}

ul.list-number {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}
ul.list-number li {
  counter-increment: step;
  margin-bottom: .6em;
  padding-left: 2em;
  position: relative;
}
ul.list-number li::before {
  content: counter(step) ".";
  position: absolute;
  left: 0;
  font-weight: bold;
  color: #856404; /* 読みやすいブラウン */
}

ul.list-check { list-style: none; padding-left: 0; }
ul.list-check li {
  margin-bottom: .6em;
  padding-left: 2em;
  position: relative;
}
ul.list-check li::before {
  content: "\2714\FE0E";/* "✔" */
  color: #28a745;
  position: absolute;
  left: 0;
  font-weight: bold;
}

ul.list-warning { list-style: none; padding-left: 0; }
ul.list-warning li {
  margin-bottom: .6em;
  padding-left: 1.5em;
  position: relative;
}
ul.list-warning li::before {
  content: "\25CF"; /* ● */
/*  content: "⚠";*/
  color: #d9534f;
  position: absolute;
  left: 0;
  font-weight: bold;
}
/* テキストだけハイライト */
ul.list-warning li.bg-highlight-y {
  background: transparent; /* li自体は塗らない */
}
ul.list-warning li.bg-highlight-y::after {
  content: attr(data-text); /* テキストを複製するのは大変なので… */
}
.bg-highlight-y {
  background: #fff59d;
  padding: 0 .2em;
  border-radius: .2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* ==============================
   list-* 系すべての <li> 内の画像を共通で整える
   対象: .list-default / .list-green-circle / .list-number
        / .list-check / .list-warning など
   ============================== */
ul[class^="list-"] li img,
ul[class*=" list-"] li img{
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 8px;                 /* テキストの下に余白 */
}

/* 画像が最初の要素の場合は上マージンをゼロに（お好みで） */
ul[class^="list-"] li > img:first-child,
ul[class*=" list-"] li > img:first-child{
  margin-top: 0;
}

/* 複数画像を縦に並べる時の間隔 */
ul[class^="list-"] li img + img,
ul[class*=" list-"] li img + img{
  margin-top: 8px;
}

/* ==============================
   オプション: “サムネ左・テキスト右”の横並び
   使いたい <li> に .li-thumb を付与し、
   画像は小さめに。テキストは .text で囲むと整う
   ============================== */
ul[class^="list-"] li.li-thumb,
ul[class*=" list-"] li.li-thumb{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* サムネイル（固定幅） */
ul[class^="list-"] li.li-thumb img,
ul[class*=" list-"] li.li-thumb img{
  width: 96px;          /* 必要なら 120px などに変更 */
  flex: 0 0 auto;
  margin-top: 0;        /* 横並びでは上余白不要 */
  border-radius: 8px;
}

/* テキスト領域 */
ul[class^="list-"] li.li-thumb .text,
ul[class*=" list-"] li.li-thumb .text{
  flex: 1 1 auto;
}

/* 小さめ端末ではサムネを少し縮める */
@media (max-width: 480px){
  ul[class^="list-"] li.li-thumb img,
  ul[class*=" list-"] li.li-thumb img{
    width: 84px;
  }
}


/* ------------------------------
   NEW: 目次（Table of Contents）
------------------------------ */
.toc {
  margin: 1.2em 0 0;
  padding: 16px;
  background: #f3fbef;
  border: 1px solid #e0f1d9;
  border-radius: 8px;
}
.toc h3 {
  margin: 0 0 .6em;
  font-size: 1.1em;
}
.toc ul {
  margin: 0;
  padding-left: 1.2em;
}
.toc a {
  color: var(--brand);
  text-decoration: none;
}
.toc a:hover { text-decoration: underline; }

/* ==============================
   Image Block（1枚用）
   ============================== */
.image-block{
  margin: 24px 0 0;
}
.image-block .image-media{
  text-align: center;
}
.image-block .image-media img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin-inline: auto;
}

/* 説明・キャプション */
.image-caption{
  margin-top: 10px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1.7;
}
.image-caption h3{
  margin: 0 0 .4em;
  font-size: 1.05rem;
}
.image-caption p{ margin: 0 0 .4em; }


.images-row-fixed{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;      /* ← 折り返さない */
  margin-top: 1em;
}
.images-row-fixed img{
  width: 50%;             /* ← つねに 2 分割 */
  height: auto;
  object-fit: cover;
}

/* ==============================
   Video Block
   ============================== */
.video-block{
  margin: 24px 0 0;
  padding: 0;
}
.video-block .video-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;     /* レスポンシブ比率 */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.video-block .video-media video,
.video-block .video-media iframe{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-block.is-hero{
  margin-top: 16px;
}

/* 説明・キャプション */
.video-caption{
  margin-top: 10px;
  padding: 12px 14px;
  background: #f3fbef;
  border: 1px solid #e0f1d9;
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1.7;
}
.video-caption h3{
  margin: 0 0 .4em;
  font-size: 1.05rem;
}
.video-caption p{
  margin: 0 0 .4em;
}
.video-caption .notes{
  margin: .4em 0 0;
  padding-left: 1.2em;
}
.video-caption .notes li{
  list-style: disc;
  margin: .2em 0;
}

/* ページ内で動画を2つ並べたい場合（PCのみ2列） */
.video-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 840px){
  .video-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------
   Responsive tweaks
------------------------------ */
@media (max-width: 480px) {
  .answer-images img { width: 100%; } 

  /* ← 固定横並びはスマホでも 50% のまま */
  .images-row-fixed{ gap: 8px; }
  .images-row-fixed img{ width: 50%; }
}


/* ==============================
   Explain Block（テキスト＋画像の説明ブロック）
   ============================== */
.explain-block{
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 1fr;   /* デフォルト縦並び */
  gap: 16px;
  align-items: start;
}
.explain-block.card{
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
}
.explain-block .text{ line-height: 1.8; }
.explain-block figure{ margin: 0; }
.explain-block .media img{
  width: 100%;
  height: auto;
  display: block;
}
.explain-block figcaption{
  margin-top: 6px;
  font-size: .9rem;
  color: #666;
  text-align: center;
}

/* 2カラム（PC幅以上で横並び） */
@media (min-width: 840px){
  .explain-block.cols-2{
    grid-template-columns: 1fr 1fr;
  }
  .explain-block.cols-2.img-left .text{ order: 2; }
  .explain-block.cols-2.img-left .media{ order: 1; }
  .explain-block.cols-2.img-right .text{ order: 1; }
  .explain-block.cols-2.img-right .media{ order: 2; }

  /* 幅比率 */
  .explain-block.cols-2.ratio-60-40{ grid-template-columns: 3fr 2fr; }
  .explain-block.cols-2.ratio-40-60{ grid-template-columns: 2fr 3fr; }
}

/* スマホでも横並び固定にしたい場合 */
.explain-block.cols-2.nowrap{
  grid-template-columns: 1fr 1fr; 
}

/* キャプションのアレンジ用ユーティリティ */
.fig-left{ text-align: left; }
.fig-small{ font-size: .85rem; color: #555; }

.img-shadow {
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  border-radius: 6px;
}