@charset "utf-8";

/*------------------------------------------------------------
    リストアコーディオン
*/
.acc-list-frame {
	border: 1px solid var(--site-color06);
}
.acc-list-title {
	padding: var(--s2);
	background-color: var(--site-color06);
	text-align: center;
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--site-color03);
}

.acc-list div {
	padding-bottom: var(--s2);
	display: flex;
	border-bottom: 1px solid #B1B1B1;
}
.acc-list div:last-child {
	border: none;
}
.acc-list div dt,
.acc-list div dd {
	width: 50%;
	line-height: 1.2;
}
.acc-list div dd span {
	font-size: 1.4rem;
}
/*----------------------------------------------
	more content settings
*/
.more-content-gradation {
	position: relative;
	height: auto;
	max-height: 12rem;
	overflow: hidden;
	transition: max-height 1s;
}
.more-content-gradation::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	transition: 0.3s;
	background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}
.more-content-gradation.is-open::after {
	display: none;
}
.acc-list-more-btn {
	max-width: 32rem;
	margin: 0 auto;
	position: relative;
	transform: translate3d(0, 0, 0); /* 描画対策のGPU処理 */
}
.acc-list-more-btn span {
	width: 100%;
	/* margin: var(--s2) auto; */
	padding: 2rem 6rem 2rem 3rem;
	border: .2rem solid #aeaeae;
	border-radius: 4rem;
	background: url('./img/acc-off.svg') no-repeat 95% center #fff;
	display: block;
	text-align: center;
	transform: translate(0, 0);
	transition: transform 0.3s;
	cursor: pointer;
	z-index: 1;
}
.acc-list-more-btn::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--site-color03);
	border-width: 0 1px 1px 0;
	transform: translate(.8rem, .8rem);
	border-radius: 4rem;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.acc-list-more-btn:hover span {
	transform: translate(.8rem, .8rem);
}
.acc-list-more-btn.is-open span {
	background: url('./img/acc-on.svg') no-repeat 95% center #fff;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
	.acc-list-more-btn span {
		transition: none;
		transform: none;
	}
	.acc-list-more-btn:hover span {
		transform: none;
	}
}
/*------------------------------------------------------------
sec05
*/
.cmp2{
  --cmp2-gray:#4a4a4a;
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:0 18px;
}
.cmp2 *,
.cmp2 *::before,
.cmp2 *::after{ box-sizing:border-box; }
 
/* 既存サイトのリスト装飾をリセット */
.cmp2 ul{ margin:0; padding:0; list-style:none; }
.cmp2 li{ margin:0; padding:0; }
.cmp2 li::before,
.cmp2 li::marker{ content:none; }
.cmp2 img{display:block;max-width:100%;width: 100%;height:auto;aspect-ratio: 187/124;}
.cmp2 figure{ margin:0; }
 
/* レイアウト崩れ防止のマージン調整のみ（文字サイズ・色は既存CSSのまま） */
.cmp2 p{margin-bottom:0;line-height: 1.8;text-align: center;}
 @media screen and (max-width: 767px) {
	 .cmp2 p{text-align: justify;}

 }
/* ---------- カラム ---------- */
.cmp2-col{
  --c:#1c5aa6;        /* テーマ色 */
  --c-brd:#cfe0f2;    /* 枠線 */
  --c-bg:#f4f8fd;     /* パネル背景 */
  border: 1px solid #dfe4ea;
  background:#fff;
  padding: 2rem 2rem 3rem;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cmp2-col--pulver{
  --c:#00804d;
  --c-brd:#d3e5d1;
  --c-bg:#f4f9f3;
}
 
/* ---------- 見出し（キャッチ） ---------- */
.cmp2-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.cmp2-badge{
  background:var(--c);
  color:#fff;
  font-size:24px;
  font-weight:700;
  letter-spacing:.06em;
  padding: 1.5rem 2rem;
  line-height:1.3;
  text-align: center;
  width: 100%;
}
 
/* ---------- リード文（本文は既存p / 強調のみ色指定） ---------- */
.cmp2-lead{text-align:center;padding: 2rem 0;}
.cmp2-lead .cmp2-em{ color:var(--c); font-weight:700; }
 
/* ---------- 機械写真 ＋ 処理の流れ ---------- */
.cmp2-main{
  display:flex;
  align-items:center;
  gap:12px;
  flex-direction: column;
}
.cmp2-machine{ flex:0 0 34%; }
.cmp2-machine img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
}
 
.cmp2-flow{
  flex:1 1 auto;
  overflow:hidden;
  background:#fff;
  width: 100%;
}
.cmp2-flow-ttl{
  background:var(--c-bg);
  font-size: 2.2rem;
  font-weight:700;
  text-align:center;
  padding:7px 10px;
  color: var(--c);
  line-height:1.5;
}
.cmp2-flow-ttl small{ font-size:12px; font-weight:normal; }
.cmp2-flow-body{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 1rem 0;
}
.cmp2-flow-item{text-align:center;display: flex;width: -webkit-fill-available;flex-direction: column;align-items: center;}
.cmp2-flow-cap{
  font-size: 1.8rem;
  font-weight:700;
  color:#444;
  margin-bottom: 1rem;
  display: flex;
  line-height:1.4;
  flex-direction: column;
  justify-content: center;
}
.cmp2-flow-cap small{font-size: 1.4rem;font-weight:normal;}
/* 到達後のラベルはキャッチ扱いで色付き */
.cmp2-flow-item--after .cmp2-flow-cap{ color:var(--c); }
.cmp2-arrow-s{
  flex:0 0 auto;
  width:0;
  height:0;
  margin-top: 5rem;
  border-left: 13px solid #dbe64c;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
 
/* ---------- パネル（主な対象物 / 主な役割） ---------- */
.cmp2-panel{
  background:var(--c-bg);
  padding:12px 14px 14px;
  flex: 1 1 auto;
}
.cmp2-panel-2{
  background:none;
  padding: 2rem 0 0;
  flex: 1 1 auto;
}
/* パネル見出しはキャッチ */
.cmp2-panel-ttl{
  color:var(--c);
  font-size: 2rem;
  font-weight:700;
  margin-bottom: 1.5rem;
  line-height:1.4;
  text-align: center;
}
 
/* 主な対象物 */
.cmp2-objs{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  align-items:end;
}
.cmp2-objs li{ text-align:center; }
.cmp2-obj-cap{
  font-size: 1.4rem;
  line-height:1.4;
  color:#444;
  margin-bottom: 0;
  min-height:2.8em;
  display:flex;
  align-items: center;
  justify-content:center;
}
.cmp2-objs img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
}
.cmp2-etc{
  font-size:12px;
  color:#666;
  padding-bottom:4px;
  white-space:nowrap;
}
 
/* 主な役割（本文は既存p） */
.cmp2-checks li, .cmp2-checks02 li{
  display:flex;
  align-items: center;
  gap:8px;
  margin-bottom: 1rem;
  padding-left: 4.5rem;
}
.cmp2-checks li::before {
  content: "";
  width: 4rem;
  height: 3rem;
  border-radius: 50%;
  background:url('./img/check-icon-blue.svg') no-repeat;
  background-size: 2.5rem;
  position: absolute;
  top: 0.5rem;
  left: 1rem;
}
.cmp2-checks02 li::before {
  content: "";
  width: 4rem;
  height: 3rem;
  border-radius: 50%;
  background:url('./img/check-icon.svg') no-repeat;
  background-size: 2.5rem;
  position: absolute;
  top: 0.5rem;
  left: 1rem;
}
.cmp2-checks li + li{ margin-top:6px; }
.cmp2-check{
  flex:0 0 auto;
  width:18px; height:18px;
  margin-top:7px;
  color:var(--c);
}
 
/* ---------- 中央の大きい矢印 ---------- */
.cmp2-arrow{
  align-self:center;
  width:0; height:0;
  border-left:26px solid #1e4890;
  border-top:3rem solid transparent;
  border-bottom:3rem solid transparent;
}
 
 
/* ---------- 中間幅（769〜1079px） ---------- */
@media (max-width:1079px) and (min-width:769px){
  .cmp2{ gap:0 12px; }
  .cmp2-col{ padding:18px 14px 16px; }
  .cmp2-badge{ font-size:20px; padding:6px 16px; }
  .cmp2-round{ width:88px; height:88px; }
  .cmp2-obj-cap{ font-size:11px; }
  .cmp2-arrow{ border-left-width:18px; border-top-width:15px; border-bottom-width:15px; }
}
 
/* ---------- SP（768px以下）：縦積み ---------- */
@media (max-width:768px){
  .cmp2{
    grid-template-columns:1fr;
    gap:14px 0;
  }
  /* 矢印を下向きに */
  .cmp2-arrow{
    justify-self:center;
    border-left:22px solid transparent;
    border-right:22px solid transparent;
    border-top: 22px solid #1e4890;
    border-bottom:0;
  }
  .cmp2-badge{font-size: 2.2rem;padding:6px 18px;width: 100%;text-align: center;}
 
  .cmp2-main{ flex-direction:column; gap:14px; }
  .cmp2-machine{ flex:0 0 auto; width:72%; margin:0 auto; }
  .cmp2-round{ width:104px; height:104px; }
 
  .cmp2-objs{
    grid-template-columns:repeat(3,1fr);
    gap:12px 8px;
  }
  .cmp2-obj-cap{ min-height:0; }
  .cmp2-etc{
    grid-column:1 / -1;
    text-align:right;
    padding-bottom:0;
  }
}


 

.points7{
  --p7-line:#e4dbc8;
  /* 円の配色（1=緑、2=青、以降ひとつずつ後ろへ） */
  --p7-c1:#7fa84a;  /* 緑 */
  --p7-c2:#2f6eb5;  /* 青 */
  --p7-c3:#7a4e9e;  /* 紫 */
  --p7-c4:#bb50b5;  /* 薄紫 */
  --p7-c5:#c4485c;  /* 赤 */
  --p7-c6:#d9822b;  /* 橙 */
  --p7-c7:#c9992e;  /* 金 */
  max-width:1100px;
  margin:0 auto;
}
.points7 *,
.points7 *::before,
.points7 *::after{ box-sizing:border-box; }
 
/* ---------- ステージ（PC：円環） ----------
   基準幅1100pxで 円310px / 中心からの距離385px / 中央420px。
   cqw指定なのでコンテナ幅に応じて自動で拡縮します。          */
.points7-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  container-type:inline-size;
  --p7-size:28cqw;   /* = 310px @1100 */
  --p7-r:35cqw;         /* = 385px @1100 */
  --p7-offset: calc(-360deg / 7);   
}
 
/* 中心から伸びる細い連結線 */
.points7-spokes{ position:absolute; inset:0; }
.points7-spokes span{
  position:absolute;
  top:50%; left:50%;
  width:1px;
  height:calc(var(--p7-r) - 50px);
  background:linear-gradient(to bottom,transparent,var(--p7-line));
  transform-origin:top center;
  transform:rotate(calc(180deg + var(--p7-a)));
}
 
/* ---------- 中央 ---------- */
.points7-hub{
  position:absolute;
  top:50%;
  left:50%;
  width: 35.18cqw;
  height: 35.18cqw;   /* = 420px @1100 */
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  text-align:center;
  box-shadow:0 10px 30px rgba(90,75,45,.14);
}
.points7-hub img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.points7-hub::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.62);
}
.points7-hub-text{
  position:relative; z-index:1;
  margin:0;
  line-height:1.5;
  color:#333029;
}
.points7-hub-lead{
  display:block;
  font-size:21px;
  font-weight:600;
  letter-spacing:.08em;
}
.points7-hub-num{
  display:block;
  margin-top:.05em;
  font-size:66px;
  font-weight:800;
  line-height:1.15;
}
.points7-hub-num small{ font-size:29px; font-weight:700; letter-spacing:.06em; }
 
/* ---------- 各ポイント ---------- */
.points7-item{
  position:absolute;
  top:50%; left:50%;
  width:var(--p7-size); height:var(--p7-size);
  margin:calc(var(--p7-size) / -2);
  /* 配置は外側、ホバー動作は内側の .points7-card に分離 */
 transform:
    rotate(calc(var(--p7-a) + var(--p7-offset)))
    translateY(calc(var(--p7-r) * -1))
    rotate(calc((var(--p7-a) + var(--p7-offset)) * -1));}
.points7-card{
  width:100%;
  height:100%;
  padding: 0 10%;
  border:2px solid var(--p7-c);
  border-radius:50%;
  background:var(--p7-bg,#fff);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 6px 16px rgba(90,75,45,.10);
  transition:transform .28s cubic-bezier(.22,.9,.32,1), box-shadow .28s ease;
}
/* レイアウト崩れ防止のマージン調整のみ（文字サイズ・色は既存CSSのまま） */
.points7-card p{ margin-bottom:0; }
 
.points7-num{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-45%);
  width:40px; height:40px;
  border-radius:50%;
  background:var(--p7-c);
  color:#fff;
  font-size:17px;
  font-weight:700;
  display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.points7-icon{ margin-bottom:10px; color:var(--p7-c); opacity:.85; line-height:0; }
.points7-icon svg{ display:block; height:30px; width:auto; }
 
.points7 .points7-ttl{
  margin:0 0 8px;
  padding:0;
  font-size: 2.2rem;
  font-weight:700;
  line-height:1.5;
  color:var(--p7-c);
  letter-spacing:.03em;
  background:none;
  border:none;
}
 
.points7-item:focus-within .points7-card{
  transform:translateY(-14px);
  box-shadow:0 20px 34px rgba(90,75,45,.20);
}
 
/* ---------- 角度と色（1が右上、時計回り） ---------- */
.points7-p1{--p7-a:26deg;--p7-c: #00804d;}
.points7-p2{ --p7-a:77.4deg;  --p7-c:var(--p7-c2); }
.points7-p3{--p7-a: 128.9deg;--p7-c:var(--p7-c3);}
.points7-p4{ --p7-a:180.3deg; --p7-c:var(--p7-c4); }
.points7-p5{ --p7-a:231.7deg; --p7-c:var(--p7-c5); }
.points7-p6{ --p7-a:283.1deg; --p7-c:var(--p7-c6); }
.points7-p7{ --p7-a:334.6deg; --p7-c:var(--p7-c7); }
 
/* ---------- ①②を強調（リード文「まず①と②を決める」に対応） ---------- */
.points7-p1{--p7-bg: #edf8d5;}  /* 緑の極薄トーン */
.points7-p2{ --p7-bg:#f1f7fd; }  /* 青の極薄トーン */
.points7-key .points7-card{
  border-width:3px;
  box-shadow: 0 8px 22px rgba(90, 75, 45, .16);
}
.points7-key .points7-num{
  width:46px;
  height:46px;
  font-size:19px;
  box-shadow: none;
}
/* 連結線も①②だけ濃く */
.points7-spokes span.points7-spoke-key{
  background:linear-gradient(to bottom,transparent,#c8bda2);
}
 
/* ---------- 中間幅（769〜1079px） ----------
   円が縮む一方で本文は16pxのままなので、この帯だけ本文を縮めます。
   不要なら削除してください。                                   */
@media (max-width:1079px) and (min-width:769px){
  .points7-card p{ font-size:13px; line-height:1.7; }
  .points7 .points7-ttl{ font-size:16px; }
  .points7-icon svg{ height:24px; }
  .points7-icon{ margin-bottom:7px; }
  .points7-hub-lead{ font-size:17px; }
  .points7-hub-num{ font-size:52px; }
  .points7-hub-num small{ font-size:23px; }
  .points7-num{ width:34px; height:34px; font-size:15px; }
  .points7-key .points7-num{ width:39px; height:39px; font-size:16px; }
}
 
/* ---------- SP（768px以下）：1〜7の縦並び ---------- */
@media (max-width:768px){
  .points7-stage{
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    container-type:normal;
    margin-top: 2rem;
  }
  .points7-spokes{ display:none; }
 
  .points7-hub{
	  display: none;
  }
  .points7-hub-lead{ font-size:17px; }
  .points7-hub-num{ font-size:46px; }
  .points7-hub-num small{ font-size:21px; }
 
  .points7-item{
    position:static;
    width:100%; height:auto;
    margin:0;
    transform:none;
  }
  .points7-card{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    text-align:left;
    border: 0;
    border-left:5px solid var(--p7-c);
    border-radius: 0;
    padding:16px 18px 16px 16px;
    box-shadow: none;
  }
  .points7-key .points7-card{
    border-width: 0;
    border-left-width:8px;
    box-shadow: none;
  }
  .points7-num{
    position:static;
    transform:none;
    flex:0 0 auto;
    width:32px; height:32px;
    font-size:15px;
  }
  .points7-key .points7-num{
    width:34px; height:34px;
    font-size:16px;
    box-shadow:0 2px 6px rgba(0,0,0,.18);
  }
  .points7-icon{ display:none; }
  .points7-body{ flex:1 1 auto; }
  .points7 .points7-ttl{ font-size:17px; margin-bottom:4px; }
.sec03 .btn-internal {
	margin-top: 3rem;
}
}
/* =============================================================
   YouTubeカスタムサムネイル（custom-thumbnail）
   ============================================================= */
.custom-thumbnail {
	width: 100%;
}

.custom-thumbnail > a {
	display: block;
	width: 100%;
	background: #000;
	cursor: pointer;
	position: relative;
	line-height: 0;
	transition: opacity .2s;
}

.custom-thumbnail > a img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* --- 再生ボタン（画像不要・CSSのみ） --- */
.custom-thumbnail > a::before {
	content: "";
	width: 6.8rem;
	height: 4.8rem;
	background: rgba(0, 0, 0, .70);
	border-radius: 1.2rem;
	transform: translate(-50%, -50%);
	transition: background .2s;
	position: absolute;
	top: 50%;
	left: 50%;
}

.custom-thumbnail > a::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.1rem 0 1.1rem 1.8rem;
	border-color: transparent transparent transparent #fff;
	transform: translate(-35%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
}

.custom-thumbnail > a:hover::before {
	background: #ff0000;
}

/* --- 読み込み中 --- */
.custom-thumbnail > a.is-loading {
	opacity: .5;
	pointer-events: none;
}

/* --- 差し替え後のiframe --- */
.custom-thumbnail iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
}

/* --- 設置箇所ごとの調整 --- */
.model-shot .custom-thumbnail {
	max-width: 56rem;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
	.custom-thumbnail > a::before {
		width: 5.4rem;
		height: 3.8rem;
	}
	.custom-thumbnail > a::after {
		border-width: .9rem 0 .9rem 1.4rem;
	}
}

/* ---------------------------------------------
まとめBOX
--------------------------------------------- */
.conclusion-area {
    padding: 0 0 var(--s4);
    background: #f6f8ed;
    margin-top: 2rem;
}

#low-page .conclusion-area {
	margin-block: 6rem;
}

.conclusion-box.l-stack-small {
	    padding: var(--s1) var(--s4);
}

.conclusion-title {
    position: relative;
    padding: var(--s3) var(--s2) var(--s3);
    padding-left: 14rem;
    border-bottom: 2px dashed #9c9c9c;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    color: #000;
    }

.conclusion-title::before {
	content: "POINT";
	position: absolute;
	top: 0;
	bottom: 0;           /* top と bottom 両指定で親の高さに追従 */
	left: 0;
	display: flex;        /* 文字を縦中央に */
	align-items: center;
	padding: 0 3rem 0 2rem;  /* 上下paddingは不要になる */
	background: linear-gradient(45deg, #043588, #5ac047);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 3rem;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
}
@media screen and (max-width: 767px) {
.conclusion-title::before{
 padding: 0 2rem 0 0rem;
 font-size: 2.2rem;
 clip-path: polygon(0 0, 100% 0, calc(100% - 2.4rem) 100%, 0 100%);
}

.conclusion-box.l-stack-small {
	    padding: 0;
}
.conclusion-box .btn-internal {
	margin-top:1rem !important;
}
	
}
.conclusion-box p{
    color: #000;
    line-height: 1.8;
}
.conclusion-catch {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #001F3E;
    text-align: left;
}
.conclusion-btn-area {
    z-index: 5;
}
.conclusion-area .btn-internal{
    margin: 0 auto;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .conclusion-area {
        padding: 0 var(--s3) var(--s6);
        background-size: 70% auto;
    }
    .conclusion-title {
        font-size: 2.4rem;
        width: 100%;
        padding: 2rem 2rem 2rem 4rem;
        background-size: 3rem;
    }
    .conclusion-title-deco {
 margin-block: 6rem 3rem;
 padding: var(--s1);
 padding-left: 5rem;
 font-size: 2.2rem;
 }
    .conclusion-box {
        padding: var(--s2) 0 var(--s1);
    }
    .conclusion-catch {
        font-size: 2rem;
        line-height: 1.6;
        margin-top: 0;
    }
    .btn-conclusion {
        width: 80%;
    }
}

/*--------------------------------------------
    icon-head01 (CHECK見出し)
*/
.icon-head01 {
	position: relative;
	margin-block: 6rem 4rem;
	padding: var(--s2) var(--s2) var(--s1);
	padding-left: 13rem;
	background: #fff;
	border-bottom: 2px dashed #9c9c9c;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: left;
	color: #000;
}

/* 左上の黒帯ラベル */
.icon-head01::before {
	content: "CHECK";
	position: absolute;
	top: 0;
	bottom: 0;           /* top と bottom 両指定で親の高さに追従 */
	left: 0;
	display: flex;        /* 文字を縦中央に */
	align-items: center;
	padding: 0 3rem 0 1rem;  /* 上下paddingは不要になる */
	background: linear-gradient(45deg, #043588, #5ac047);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 3rem;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
}

@media screen and (max-width: 767px) {
	.icon-head01 {
		margin-block: 6rem 3rem;
		padding: var(--s1);
		padding-left: 9.5rem;
		font-size: 2.2rem;
	}

	.icon-head01::before {
		padding: 0 2rem 0 0.8rem;
		font-size: 2.2rem;
		clip-path: polygon(0 0, 100% 0, calc(100% - 2.4rem) 100%, 0 100%);
	}
	/* ::after は現デザインでは未使用のため削除 */
}


/* ---------------------------------------------
index02(目次)
--------------------------------------------- */
.onb-index02-frame {
    width: 100%;
}
.onb-index02-wrap {
    margin: var(--s6) auto;
    padding: var(--s2) var(--s4) var(--s4);
    background-color: #F6F8ED;
    position: relative;
}
.onb-index02-title {
    padding: var(--s1) var(--s2) var(--s1) var(--s3);
    font-size: 2rem;
    margin: 1rem 0 2rem;
    font-weight: bold;
    line-height: 1;
    border-left: 7px solid #00804D;
    background-size: 4rem auto;
    position: relative;
}
.onb-index02-chapter {
    padding: var(--s2) var(--s2) var(--s2) var(--s6);
    font-weight: 700;
    counter-reset: number 0;
}
#toc ul.onb-index02-chapter li {
    position: relative;
}
#toc ul.onb-index02-chapter li:not(.onb-index02-chapter-h-three)::before {
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero);
    color: #001F3E;
    position: absolute;
    font-weight: 900;
    top: -1px;
    font-size: 2rem;
    left: -1.8em;
}
#toc ul li.onb-index02-chapter-h {
    margin: 0 0 0 var(--s2);
    font-size: 100%;
    line-height: 1.7;
    position: relative;
}
#toc ul li.onb-index02-chapter-h a {
    display: block;
    text-decoration: none;
    font-size: 1.6rem;
}
#toc ul li.onb-index02-chapter-h-two {
    margin-left: var(--s2);
    position: relative;
}
#toc ul li.onb-index02-chapter-h-three {
    margin-left: var(--s4);
    position: relative;
}
#toc ul li.onb-index02-chapter-h-two::before,
#toc ul li.onb-index02-chapter-h-three::before {
    position: absolute;
    top: 0;
    left: -1.8em;
}
#toc ul li.onb-index02-chapter-h-three::before {
    content: "└";
}
/*----------------------------------------------
	more content settings
*/
#toc.onb-index02-gradation {
    margin-top: 1.4rem;
    height: auto;
    max-height: 12rem;
    overflow: hidden;
    transition: max-height 1s;
    border-top: 3px double #b5b5b5;
    position: relative;
}
#toc.onb-index02-gradation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    background: linear-gradient(to bottom, transparent 0%, #f6f8ed 100%);
}
#toc.onb-index02-gradation.is-open::after {
    display: none;
}
.onb-index02-btn {
    max-width: 32rem;
    margin: 2rem auto 0 auto;
    position: relative;
    z-index: 5;
}
.onb-index02-btn span {
 width: 100%;
    margin: auto;
    padding: 2rem 6rem 2rem 3rem;
    border: .2rem solid #aeaeae;
    border-radius: 4rem;
    background: url(./img/acc-off.svg) no-repeat 95% center #fff;
    display: block;
    text-align: center;
    transform: translate(0, 0);
    transition: transform 0.3s;
    cursor: pointer;
}
.onb-index02-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-width: 0 1px 1px 0;
    transform: translate(.8rem, .8rem);
    border-radius: 4rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}
.onb-index02-btn:hover span {
    transform: translate(.8rem, .8rem);
}
.onb-index02-btn.is-open span {
    background: url('./img/acc-on.svg') no-repeat 95% center #fff;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    #toc .onb-index02-chapter {
        padding-left: var(--s4);
    }    
    .onb-index02-btn:hover span {
        transform: none;
    }
}

/* ---------------------------------------------
   検討ロードマップ（4STEP）
--------------------------------------------- */
.center-img-box .roadmap {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: subgrid;
	column-gap: 1rem;          /* 矢印を置くスペース */
	align-items: start;
}

/* --- 各ステップ（カード＋ボタンの2行） --- */
.roadmap-item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	min-width: 0;
	position: relative;
}

/* --- 矢印（項目の右外側） --- */
.roadmap-item:not(.roadmap-item--last) .roadmap-card::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3rem;
	border-color: transparent transparent transparent #1e4890;
	position: absolute;
	top: 28%;
	right: -6rem;
	z-index: 3;
}

/* --- カード本体 --- */
.roadmap-card {
	padding: 3.5rem 1.5rem 2.5rem;
	background: #fff;
	border: 1px solid #dfe4ea;
	text-align: center;
	position: relative;
	height: 100%;
}

/* --- STEPラベル --- */
.roadmap-step {
	min-width: 12rem;
	padding: .6rem 1.6rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: .08em;
	background: #1e4890;
	border-radius: 3rem;
	transform: translateX(-50%);
	position: absolute;
	top: -1.6rem;
	left: 50%;
	white-space: nowrap;
}
.roadmap-step span {
	font-size: 1.9rem;
	margin-left: .2rem;
}
/* STEP4のみグリーン */
.roadmap-item--last .roadmap-step {
	background: #00804d;
}

/* --- イラスト --- */
.roadmap-pic {
	width: 100%;
	max-width: 18rem;
	margin: 0 auto 1.5rem;
}
.roadmap-pic img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
}

/* --- 見出し --- */
.roadmap-title {
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
	font-size: 2.4rem;
	font-weight: 700;
	color: #1e4890;
	line-height: 1.3;
	border-bottom: dashed 1px #b2b872;
}
.roadmap-item--last .roadmap-title {
	color: #00804d;
	border-bottom-color: #b2b872;
}

/* --- 説明文 --- */
.roadmap-txt {
	font-size: 1.5rem;
	text-align: left;
}
.roadmap-txt p + p {
	margin-top: 1rem;
}
.roadmap-txt p:last-child {
	margin-bottom: 0;
}
.sec06 .btn-internal {
margin-block: 2rem;
	font-size: 1.4rem;
	}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
	.center-img-box .roadmap {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 4rem;
	}
	.roadmap-item {
		grid-template-rows: none;
		grid-row: auto;
		display: block;
	}
	/* 矢印を下向きに */
	.roadmap-item:not(.roadmap-item--last) .roadmap-card::after {
	display: none;
	}
	.roadmap-title {
		font-size: 2.2rem;
	}
	.roadmap-pic {
		max-width: 14rem;
	}
}

/*------------------------------------------
    2box column settings
*/
.column-medium {
    padding: var(--s4);
    border: 1px solid #ccc;
}
.twb-box-full {
    width: calc(100% + var(--s8));
    margin-left: calc(var(--s4) * -1);
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .column-medium {
        padding: var(--s2);
    }
    .twb-box-full {
        width: calc(100% + var(--s4));
        margin-left: calc(var(--s2) * -1);
    }
}
.twb-m-title03 {
	margin-block: 1rem;
	padding-left: var(--s2);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--site-color03);
	line-height: 1.5;
	border-left: 6px solid #1e4890;
}
.twb-p {
	line-height: 1.8;
}
@media screen and (max-width: 767px) {
	.twb-m-title03 {
		font-size: 2.2rem;
		background: none;
		padding: 0;
		border-left: 5px solid #1e4890;
		padding-left: 1.5rem;
		margin-top: 0.8rem;
	}
}

/* ---------------------------------------------
TOP下層パーツ
--------------------------------------------- */
.top-left-box {
	display: flow-root;
}
.top-left{
	width: 25%;
	margin-right: var(--s4);
	padding-bottom: var(--s1);
	float: left;
}
.top-left-catch {
	margin-bottom: 1.6rem;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--site-color03);
	line-height: 1.5;
}
.sec07 .btn-link {
	margin-top: 3rem;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
	.top-left {
		width: 100%;
		margin-right: 0;
		/* padding-bottom: var(--s2); */
		float: inherit;
		text-align: center;
	}
.sec07 .btn-link {
	margin-top: 1rem;
}
}

/* ---------------------------------------------
アコーディオン
--------------------------------------------- */
.acc-more-btn {
	max-width: 46rem;
  width: 100%;
	margin: var(--s5) auto;
	position: relative;
}
.acc-more-btn span {
	width: 100%;
	margin: auto;
	font-weight: 700;
	padding: 2rem 6rem 2rem 3rem;
	border: .2rem solid var(--site-color05);
	border-radius: 4rem;
	background: url('./img/acc-off.svg') no-repeat 95% center #fff;
	display: block;
	text-align: center;
	transform: translate(0, 0);
	transition: transform 0.3s;
	cursor: pointer;
	z-index: 1;
}
.acc-more-btn::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: #a0a0a0;
	border-width: 0 1px 1px 0;
	transform: translate(0, .8rem);
	border-radius: 100px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.acc-more-btn:hover span {
	transform: translate(0, .8rem);
}
.acc-more-btn.is-open span {
	background: url('./img/acc-on.svg') no-repeat 95% center #fff;
}
.more-content {
	display: none;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
	.acc-more-btn {
		margin-right: var(--s1);
	}
	.acc-more-btn span {
		transition: inherit;
		transform: none;
	}
	.acc-more-btn:hover span {
		transform: none;
	}
}

/* ---------------------------------------------
list
--------------------------------------------- */
/* ---------------------------------------------
   3BOX subgrid（行そろえ）
--------------------------------------------- */
/* ---------------------------------------------
   3BOX subgrid（行そろえ）
--------------------------------------------- */
/* ① 親グリッド：3等分を固定（これが無いと幅がバラバラになります） */
.l-grid-three {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 2rem;
	row-gap: 1.5rem;
}

/* ② 子カード：subgridで行を揃える */
.l-grid-three > .column-small {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	min-width: 0;              /* はみ出し防止 */
	margin-bottom: 1rem;
}

.l-grid-three > .column-small > * {
	min-width: 0;              /* ← 重要：ここが 100% だと崩れます */
	margin-top: 0;
	margin-bottom: 0;
}

/* ③ メディアの高さ・幅を揃える */
.list-vid {
	width: 100%;
	display: block;
}
.list-vid iframe,
.list-vid img {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* ④ フォールバック */
@supports not (grid-template-rows: subgrid) {
	.l-grid-three > .column-small {
		display: flex;
		flex-direction: column;
	}
	.l-grid-three > .column-small .btn-link {
		margin-top: auto;
	}
}

.thb-m-title04-frame {
	position: relative;
}
.thb-m-title04-wrap {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}
.thb-m-title04 {
	padding: var(--s3) var(--s1) var(--s2) var(--s1);
	font-size: 2.2rem;
	font-weight: 700;
	color: #000;
	line-height: 1.5;
	border-bottom: 5px solid rgba(var(--site-color05-rgb), .5);
	text-align: center;
}
.thb-m-title04-sub {
	padding: .8rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	background-color: #1e4890;
	position: relative;
	width: max-content;
}
.thb-m-title04-sub-green {
	padding: .8rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	background-color: #00804d;
	position: relative;
	width: max-content;
}

.list-txt02 ul{
	margin-block: 1rem;
}

.list-txt02 ul li{
	margin-bottom: 1rem;
}

.list-catch {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	padding-bottom: 1rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	border-bottom: dashed 1px #b2b872;
}
@media screen and (max-width: 768px) {
	.list-catch {
	margin-top: 2rem;
}
}

.sec04 .column-small {
 background: #fff;
 padding: var(--s3);
 margin-top: 1rem;
}

/* ---------------------------------------------
banner
--------------------------------------------- */
.banner-bottom {
	position: fixed;
	right: 0;
	bottom: 15rem !important;
	z-index: 100;
	width: 24rem;
}
.banner-bottom-link {
	display: block;
	position: relative;
	background: url(img/sp_banner.png);
	padding: 1.5rem 1rem 2rem;   /* 左paddingを増やす（斜め分の逃げ） */
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	transition: opacity .2s;

	/* ★追加: 箱の左辺を斜めにカット（上が内側、下が外側） */
	clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}

.banner-bottom-link:hover {
	opacity: .8;
}

/* 右下の白い三角形 */
.banner-bottom-link::after {
	content: "";
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 1.4rem 1.4rem;
	border-color: transparent transparent #dbe64c transparent;
}

.banner-bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	text-align: center;
}
.banner-bottom-sub {
	color: #ffd83d;              /* イエロー */
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .05em;
}

.banner-bottom-sub {
	display: inline-block;
	padding: 0.8rem;
	background: #DBE64C;
	color: #001F3E;
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
	transform: skew(-15deg);
	margin-bottom: 0.5rem;
}
.banner-bottom-sub i {
  display: inline-block;
  transform: skewX(25deg);
}

.banner-bottom-main {
	color: #ffffff;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
}

.banner-bottom,
.sp-fix-banner05 {
	transition: opacity .3s ease, visibility .3s ease;
}
.banner-bottom.is-banner-hidden,
.sp-fix-banner05.is-banner-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
		.banner-bottom {
		display: none;
	}
}

/* ---------------------------------------------
SP用固定バナー（sp-fix-banner05）
--------------------------------------------- */
.sp-fix-banner05 {
	display: none;   /* PC非表示 */
}

@media screen and (max-width: 767px) {
	.sp-fix-banner05 {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0 !important;
		z-index: 110;
		width: 75%;
	}
	.sp-fix-banner05-link {
		display: flex;
		align-items: center;
		position: static;
		background: url(img/sp_banner.png);
		padding: 2rem 5rem 1rem 2rem;   /* 左paddingは元に戻してOK */
		text-decoration: none;
		--slant: 1.6rem;
	}

	.sp-fix-banner05-inner {
		display: flex;
		flex-direction: column;
		gap: .4rem;
		z-index: 110;
	}
	.sp-fix-banner05-sub {
		color: #ffd83d;
		font-size: 1.6rem;
		font-weight: 700;
		letter-spacing: .05em;
	}

	.sp-fix-banner05-sub {
	display: inline-block;
	padding: 0.8rem;
	background: #DBE64C;
	width: max-content;
	color: #001F3E;
	font-weight: 700;
	font-size: 1.8rem;
	text-align: center;
	transform: skew(-15deg);
	margin-bottom: 0.5rem;
	position: absolute;
	top: -25%;
	z-index: 110;
}
.sp-fix-banner05-sub i {
  display: inline-block;
  transform: skewX(25deg);
}
	
	.sp-fix-banner05-main {
		color: #ffffff;
		font-size: 1.9rem;
		font-weight: 700;
		line-height: 1.3;
	}

	/* ＞ 矢印 */
	.sp-fix-banner05-arrow {
		position: absolute;
		right: calc(var(--slant) + 2.5rem);   /* 緑の帯を避けた位置 */
		top: 50%;
		width: .9rem;
		height: .9rem;
		border-top: 3px solid #ffffff;
		border-right: 3px solid #ffffff;
		transform: translateY(-50%) rotate(45deg);
	}
}


/* ---------------------------------------------
中央画像
--------------------------------------------- */
.center-img-box {
	display: flow-root;
}
.center-img {
	max-width: 90%;
	margin: 0 auto;
	padding-bottom: var(--s2);
}
.center-img-catch {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--site-color03);
	line-height: 1.5;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
	.center-img {
		max-width: 100%;
	}
}
/* ---------------------------------------------
詳細3選
--------------------------------------------- */
/*------------------------------------------
    1box column settings
*/
.column-medium {
    padding: var(--s4) var(--s4) var(--s5);
    background: #ffffff;
}
.sec08 .column-medium {
    padding: var(--s4) var(--s4) var(--s5);
    background: #ffffff;
    display: flex;
    justify-content: flex-start;
}
.onb-box-full {
    width: calc(100% + var(--s8));
    margin-left: calc(var(--s4) * -1);
}
.column-medium .btn-internal{
	margin: 2rem 0 0 0;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .column-medium {
        padding: var(--s2);
    }
	.sec02 .column-medium{
		padding: var(--s4) var(--s2) var(--s6);
	}
    .onb-box-full {
        width: calc(100% + var(--s4));
        margin-left: calc(var(--s2) * -1);
    }
}

/* ============================================================
   2. タブブロック外枠
   既存サイトの .column-medium 内に置く前提。
   幅・左右余白は既存レイアウトに任せています。
   ============================================================ */
.tabbox{ width:100%; }

 
/* ============================================================
   4. タブ
   ============================================================ */

.tab-guide{
  text-align:center;
  font-size: 2rem;
  font-weight:700;
  color: #9c9c9c;
  margin-bottom: 1.8rem;
  animation: cf-bounce 1.6s ease-in-out infinite;   /* ← 추가 */
}

@keyframes cf-bounce{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.tabs{
  display:flex;
  gap: 25px;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  margin-bottom: 3rem;
}
.tab-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex:1 1 200px;
  max-width: 100%;
  min-height:76px;
  padding:12px 10px;
  background: #001f3e;
  color: #fff;
  font-size: 2.4rem;
  font-weight:700;
  line-height:1.5;
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease, box-shadow .15s ease;
  position: relative;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
	.tab-guide{
		font-size: 1.6rem;
	}
	.tabs {
		margin-bottom: 4rem;
	}
}

/* --- 選択中タブの下向き三角 --- */
.tab-btn::after{
  content:"";
  width:0; height:0;
  border-left: 1.2rem solid transparent;
  border-right:1.2rem solid transparent;
  border-top:  1.2rem solid #001f3e;
  position:absolute;
  left:50%;
  bottom:-1.2rem;
  transform:translateX(-50%) scaleY(0);
  transform-origin:top center;
  transition:transform .15s ease;
}
#t-recycle:checked ~ .tabs [for="t-recycle"]::after,
#t-bulky:checked   ~ .tabs [for="t-bulky"]::after,
#t-reuse:checked   ~ .tabs [for="t-reuse"]::after{
  transform:translateX(-50%) scaleY(1);
  border-top: 1.2rem solid #3d7680;
}

.tab-btn .accent{ display:block; }
.tab-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(22,55,107,.18); }
 
/* --- ラジオ本体は視覚的に隠すが、フォーカス可能なまま残す --- */
.tab-radio{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
 
/* --- 選択中タブの見た目 --- */
#t-recycle:checked ~ .tabs [for="t-recycle"],
#t-bulky:checked   ~ .tabs [for="t-bulky"],
#t-reuse:checked   ~ .tabs [for="t-reuse"]{
  background: linear-gradient(45deg, #0745af, #64d44f);
  color:#fff;
  border: none;
  box-shadow:0 4px 10px rgba(22,55,107,.25);
}
#t-recycle:checked ~ .tabs [for="t-recycle"] .accent,
#t-bulky:checked   ~ .tabs [for="t-bulky"]   .accent,
#t-reuse:checked   ~ .tabs [for="t-reuse"]   .accent{ color:var(--lime); }
 
/* --- キーボードフォーカスをラベル側に表示 --- */
#t-recycle:focus-visible ~ .tabs [for="t-recycle"],
#t-bulky:focus-visible   ~ .tabs [for="t-bulky"],
#t-reuse:focus-visible   ~ .tabs [for="t-reuse"]{
  outline:3px solid var(--lime-dark);
  outline-offset:2px;
}

.tabs--bottom{margin-bottom:0;}
.tabs--bottom .tab-btn {
	font-size: 2rem;
}
.tabs--bottom .tab-btn::after{ display:none; }
 
/* ============================================================
   5. パネル（表示切り替え）
   ============================================================ */
.panel{display:none;}
#t-recycle:checked ~ .column-medium #panel-recycle,
#t-bulky:checked   ~ .column-medium #panel-bulky,
#t-reuse:checked   ~ .column-medium #panel-reuse{display:block;}
.panel-head{
  background: url(img/lower_after.png) no-repeat, linear-gradient(45deg, #043588, #5ac047);
  background-size: cover;
  background-blend-mode: color-burn;
  color:#fff;
  text-align:center;
  font-size: 3rem;
  font-weight:700;
  padding: 3rem 0;
  width: calc(100% + var(--s8));
  margin-left: calc(var(--s4) * -1);
  line-height: 1.4;
  margin-top: calc(var(--s4) * -1);
}
 @media screen and (max-width: 767px) {
	 .panel-head{
  background: url(img/lower_after.png) no-repeat, linear-gradient(45deg, #043588, #5ac047);
  background-size: cover;
  background-blend-mode: color-burn;
  color:#fff;
  text-align:center;
  font-size: 2.6rem;
  font-weight:700;
  padding: 2rem 2rem;
  width: calc(100% + var(--s4));
  margin-left: calc(var(--s2) * -1);
  margin-top: calc(var(--s2) * -2);
  line-height: 1.4;
}
 }
/* ============================================================
   6. メーカー紹介
   ============================================================ */
.maker{text-align:center;}
.maker-name{font-size: 2.6rem;font-weight:700;margin-block: 4.5rem;}
.maker-shot{ max-width:340px; margin:0 auto; }
.credit{font-size: 1.2rem;color:#9c9c9c;margin-top:6px;text-align: center;}
 
/* ============================================================
   7. セクション見出し
   ============================================================ */
.sec-title{
  background: #1E4890;
  color:#fff;
  text-align:center;
  font-size: 2.6rem;
  font-weight:700;
  padding: 2rem 6rem;        /* ← 左右にアイコン分の余白を確保 */
  margin-block: 6rem 2rem;
  position: relative;         /* ← 追加 */
  line-height: 1.4;
}

/* 左側の装飾アイコン */
.sec-title::before {
  content: "";
  width: 9rem;
  height: 6rem;
  background: url('./img/h5_icon.svg') no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 20%;
  left: 2rem;
  transform: translateY(-50%);
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .sec-title{
    padding: 1.6rem 2rem 1.6rem 6rem;   /* 左だけアイコン分を確保 */
    font-size: 2.4rem;
    text-align: left;
    margin-block: 6rem 2rem;
  }
  .sec-title::before {
    width: 4.5rem;
    height: 3rem;
    left: 1rem;
  }
}
.sub-title{
  font-size: 2.4rem;
  font-weight:700;
  color:var(--navy);
  border-left: 7px solid #00804D;
  padding: 5px 12px 8px;
  margin-block: 4rem 2rem;
  line-height: 1.4;
}
 @media screen and (max-width: 767px) {
	 .sub-title{
		 margin-block: 4rem 1rem;
		}
 }
/* ============================================================
   8. おすすめ理由カード
   ============================================================ */
.reasons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.reason{
  background: #F6F8ED;
  padding: 2rem 2rem 2.5rem;
  display: inherit;
}
.reason-head {
  display:flex;
  gap: 1.4rem;
  margin-bottom: 1rem;
  align-items: center;
  min-height: 70px;
}

.reason-head h6{
  font-size: 2.2rem;
  font-weight:700;
  line-height: 1.4;
  color: #001f3e;
}
.reason-head .icon{width: 4rem;}
.reason p:last-child{ margin-bottom:0; }

@media screen and (max-width: 767px) {
.reason-head {
	margin-block: 3rem 1rem;
}
}
/* ============================================================
   9. 導入事例
   ============================================================ */
.case{margin-bottom: 4rem;}
.case-body{
  display:grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 30px;
  align-items:start;
}
.case-meta{font-size: 1.6rem;font-weight:700;background: #f0f7d0;color: #001f3e;padding: 0.8rem;width: max-content;}
.case-src, .case-src a{font-size: 1.2rem;color:#9c9c9c;margin-top:14px;word-break: break-all;}
 
.case-pic {
	display: block;
	width: 40rem;
}
@media screen and (max-width: 768px) {
	.case-pic {
	max-width: 100%;
	display: contents;
}
.sec02 ul {
	margin-block: 2rem 1rem; 
}
	.case-meta{
		width: 100%;
		line-height: 1.4;
	}
}


 .case-pic img {
	width: 100%;
}
/* ============================================================
   10. CTAボタン
   ============================================================ */
.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:340px;
  max-width:100%;
  margin:36px auto;
  padding:14px 22px;
  border-radius:34px;
  background:linear-gradient(180deg,#d3e262 0%,var(--lime) 100%);
  color:var(--navy);
  font-size:14px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  line-height:1.4;
  box-shadow:0 3px 0 var(--lime-dark);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta:hover{ transform:translateY(2px); box-shadow:0 1px 0 var(--lime-dark); }
.cta:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }
.cta-arrow{
  flex:none;
  width:24px; height:24px;
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  display:grid; place-items:center;
  font-size:12px;
}
 
/* ============================================================
   11. 代表モデル
   ============================================================ */
.model-shot{width: 100%;display: flex;margin: 4rem auto;justify-content: center;} 

.model-catch{
  text-align:center;
  font-weight:700;
  font-size:2rem;
  margin:26px 0 14px;
  color: #1e4890;
}
 
.spec-row{
  display:grid;
  grid-template-columns: 330px 1fr;
  gap:24px;
  align-items:start;
  margin-block: 3rem 2rem;
}
.spec-photo{ padding-top:8px; }
 
/* ============================================================
   12. 表
   ============================================================ */
.tbl{
  width:100%;
  border-collapse:collapse;
  font-size: 1.5rem;
  margin-top: 2rem;
}
.tbl th,.tbl td{border:1px solid #fff;padding: 1.2rem;text-align:left;vertical-align:middle;line-height: 1.7;}
.tbl th{
  background: #DDF2F9;
  font-weight: 700;
  white-space:nowrap;
  text-align:center;
}

.tbl td{
  background: #ffffff;
  border: 1px solid #dee1e4;
  width: 60%;
}

.tbl--series th{width: 30%;}
.tbl--series thead th:first-child{ width:160px; }
.tbl--company th{width: 30%;}
.tbl-p {
	margin-bottom: 1rem;
	line-height: 1.8;
}

/* ============================================================
   13. アフターサポート
   ============================================================ */
.support{
  background: #F6F8ED;
  padding: 2rem 3rem;
  display:flex;
  gap: 2rem;
  align-items: center;
}
.support .icon{width: 6rem;}
@media screen and (max-width: 767px) {
	.support {
		display: flex;
		flex-direction: column;
		padding: 2rem;
	}
	.support .icon{width: 3rem;}
}

/* ============================================================
   14. 主要取引先リスト
   ============================================================ */
.clients{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px 16px;
  margin:0;
  padding:0;
  list-style:none;
  font-size: 1.4rem;
}
.clients li{ padding-left:12px; position:relative; }
.clients li::before{
  content:"・";
  position:absolute; left:0;
}
 
/* ============================================================
   15. アイコン / 画像プレースホルダー（実画像に差し替え）
   ============================================================ */
.icon{
  flex:none;
  display:block;
  aspect-ratio:1;
  object-fit:contain;
   /* PNG差し替え後は削除 */
}
.ph{
  display:grid;
  place-items:center;
  background:#e6e8ea;
  color:#98a1a8;
  font-size:11px;
  aspect-ratio:16/10;
}
 
/* ============================================================
   16. レスポンシブ
   ============================================================ */
@media (max-width:720px){
  :root{ --gap:36px; }
  .tab-btn{flex:1 1 100%;max-width:none;min-height:0;font-size: 2.2rem;}
  .reasons,.case-body,.spec-row{grid-template-columns:1fr;display: contents;}
  .clients{grid-template-columns:1fr 1fr;display: contents;}
 .tbl{
		margin-block: 3rem 1rem;
		}
  .tbl th{width:100px;white-space:normal;border: none;}
}

@media screen and (max-width: 767px) {

  /* 탭 UI 전부 숨김 */
  .tabbox .tab-guide,
  .tabbox .tabs { display: none; }

  /* 3개 패널 모두 표시 */
  .tabbox .panel { display: block; }

  /* 감싸던 흰 상자를 해제 */
  .sec02 .tabbox .column-medium {
    padding: 0;
    background: none;
    border: none;
  }

  /* 흰 상자를 패널 하나하나로 이동 */
  .tabbox .panel {
    background: #fff;
    padding: 0 var(--s2) var(--s6);
    margin-bottom: var(--s5);
    border: 1px solid #ccc;
  }
  .tabbox .panel:last-child { margin-bottom: 0; }

  /* .panel-head를 패널 폭 끝까지 빼내기 */
  .tabbox .panel .panel-head {
    width: calc(100% + var(--s4));
    margin-left: calc(var(--s2) * -1);
    margin-top: 0;
  }
}

/* ---------------------------------------------
3BOX
--------------------------------------------- */
.sec01 .column-small {
    padding: var(--s2) var(--s2) var(--s3);
    background: #fff;
}
.sec01 .thb-box-full {
    width: calc(100% + var(--s4));
    margin-left: calc(var(--s2) * -1);
    margin-top: calc(var(--s2) * -1);
}
.sec01 .l-grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sec01 .column-small{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  z-index: 1;
}

@media screen and (max-width: 767px) {
	.sec01 .column-small{
		margin-bottom: 1rem;
		padding-bottom: var(--s6);
	}
	.sec01 .column-small .btn-web{
	margin-bottom: 1rem;
	}
}
/* 1) 아이템이 콘텐츠보다 작아질 수 있게 해제 */
.sec01 .column-small,
.sec01 .column-small > * {
  min-width: 100%;
}
/* 2) caption만 가로 스크롤 */
.sec01 .caption{
 color: #9c9c9c;
 min-width: 0;
 text-align: left;
 overflow-x: auto;
 white-space: nowrap;
 overscroll-behavior-x: auto;
 -webkit-overflow-scrolling: touch;
 word-break: break-all;
}
.sec01 .caption-bottom, .sec01 .caption-bottom a {
 color: #ffffff;
 min-width: 0;
 text-align: left;
 word-break: break-all;
 margin-top: -3rem;
 line-height: 1.4;
 font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.sec01 .caption-bottom, .sec01 .caption-bottom a {
 margin-top: 0;
}
.three-img img {
	width: -webkit-fill-available;
}
}
.sec02 .caption, .sec04 .caption {
 color: #9c9c9c;
 min-width: 0;
 overflow-x: auto;
 white-space: nowrap;
 overscroll-behavior-x: auto;
 -webkit-overflow-scrolling: touch;
 word-break: break-all;
}
.caption--left, .caption--left a {
 color: #9c9c9c;
 min-width: 0;
 white-space: nowrap;
 overscroll-behavior-x: contain;
 word-break: break-all;
 text-align: left;
 font-size: 1.2rem;
 margin-top: 1rem;
}
@media screen and (max-width: 767px) {
	.caption--left, .caption--left a {overscroll-beha;ak-all;font-size: 1.2rem;margin-top: 1rem;width: 100% !important;white-space: inherit;}

	.sec01 .caption {
		margin-top: 0;
	}
}

/* ---------------------------------------------
3BOX_catch
--------------------------------------------- */
.arrow-title {
	padding: var(--s3) 1rem;
	display: flow;
	font-size: 2.4rem;
	font-weight: 700;
	color: #fff;
	background-color: #001F3E;
	text-align: center;
	line-height: 1.5;
	height: 100%;
	position: relative;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
}
.arrow-title::after {
	content: "";
	width: 0;
	height: 0;
	border-top: 1.5rem solid transparent;
	border-left: 1.5rem solid transparent;
	border-right: 1.5rem solid var(--site-color03);
	border-bottom: 1.5rem solid var(--site-color03);
	transform: translateX(-50%) rotate(45deg);
	position: absolute;
	left: 50%;
	bottom: -1.3rem;
}
@media screen and (max-width: 767px) {
.arrow-title{
	padding: 2rem;
}
}

.arrow-title span {
	font-size: 2.6rem;
	color: #DBE64C;
}
.m-title01 {
	padding: var(--s2) var(--s1) var(--s2)var(--s1);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--site-color03);
	text-align: center;
	line-height: 1.5;
}
 .m-title03 {
	padding-left: 4rem;
	font-size: 2.2rem;
	font-weight: 700;
	color: #001F3E;
	line-height: 1.4;
	background: url('./img/check-icon.svg') no-repeat center left;
	background-size: 2.4rem auto;
}
.txt-box {
	background: #F6F8ED;
	padding: 2.5rem 2rem;
}
.txt01 {
	padding-bottom: 2rem;
	border-bottom: dashed 1px #b2b872;
}
.txt02 {
	padding-top: 2rem;
}
.column-small .btn-web {
	margin: 1rem 0 0 0;
}

/* ---------------------------------------------
H2
--------------------------------------------- */
.section-title03 {
    margin-top: 8rem;
    font-size: 3.6rem;
    font-weight: 900;
    color: #001f3e;
    text-align: center;
    position: relative;
	line-height: 1.4;
}
.section-title03::before {
    content: "";
    width: 5rem;
    height: 5rem;
    background: url('./img/h2_icon.svg') no-repeat center center;
    transform: translateX(-50%);
    background-size: 4rem;
    position: absolute;
    top: -5.8rem;
    left: 50%;
    z-index: 3;
}
.sec01 .section-title03, .sec04 .section-title03 {
	color: #fff;
}
.sec01 .section-title03::before {
   background: url('./img/h2_icon-white.svg') no-repeat center center;
   background-size: 4rem;
}
.section-title03 span {
	font-size: 2.4rem;
	color: #dbe64c;
}

@media screen and (max-width: 767px) {
	.section-title03 span {
	font-size: 2rem;
}
}
.sec01 .lead {
	color: #fff;
	line-height: 1.8;
	text-align: justify;
}

.lead {
	color: #000000;
	line-height: 1.8;
	text-align: center;
}
.lead span {
	font-weight: 700;
	color: #dbe64c;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .section-title03 {
        margin-top: 4rem;
        font-size: 2.8rem;
        line-height: 1.5;
    }
    .section-title03::before {
        top: -5rem;
        background-size: 3rem !important;
    }
	.lead {
	text-align: justify;
}
}

/* ---------------------------------------------
mainvisual
--------------------------------------------- */
#visArea {
    background: #fff;
}
#visArea .mainArea {
    min-height: 24rem;
    margin: 0 auto;
    padding: 0rem 0 3rem 0;
    background: url(img/mv.png) no-repeat right 60% center;
    background-size: cover;
}
#visArea .mainAreaInner {
	max-width: 115rem;
	margin:0 auto;
	padding-top: 4rem;
}
#visArea .mainAreaInner .text-box {
    max-width: 65rem;
}
#visArea .mainAreaInner .text-box b {
    color: #1E4890;
	font-weight: 900;
}
#visArea .mainTxtBox{
	width: 55rem;
}
#visArea .siteName {
    width: 20rem;
    margin: 0 0 1.5rem 0;
}
#visArea .title {
    margin: 0 0 1rem 0;
    font-size: 5.5rem;
    font-weight: 900;
    line-height: 1.3;
}
#visArea .logo {
    margin-bottom: 0rem;
}
#visArea .title span {
    font-size: 3.2rem;
}
#visArea p:not([class]) {
    margin: 2rem 0 3rem;
}
#visArea p:not([class]) span{
    background: linear-gradient(transparent 60%, #dbe64a 60%);
    font-weight:bold;
}
#visArea .title-sub {
	display: inline-block;
	padding: 1rem;
	background: linear-gradient(45deg, #1E4890, #74C465);
	color: #fff;
	font-weight: 700;
	font-size: 3rem;
	text-align: center;
	margin-bottom: 1rem;
	transform: skew(-15deg);
	margin-top: 1rem;
}
#visArea .title-sub i {
  display: inline-block;
  transform: skewX(25deg);
}


@media screen and (max-width: 767px) {
#visArea{
    background: url(img/mv_sp.png) no-repeat top center;
    background-size: 100% auto;
}
#visArea .mainAreaInner {
	padding-top: 3rem;
	width: 100%;
}
#visArea .mainTxtBox{
	width: 100%;
}
#visArea .title-sub {
	font-size: 1.8rem;
	margin-top: 1rem;
}
	
#visArea .mainAreaInner .text-box {
    padding-right: calc(var(--s1) + var(--s-2));
    padding-left: calc(var(--s1) + var(--s-2));
    background: none;
}
#visArea .title{
	font-size: 3rem;
}
#visArea .title span.box {
    font-size: 2rem;
    padding: 5px;
    margin-top: 3rem;
    color: white;
    background: black;
}
#visArea .title span.color {
    font-size: 4rem;
    margin: 0px 0 2rem 0;
}
#visArea .logo {
    max-width: 16rem;
}
#visArea .mainArea {background: none;padding-bottom: 1rem;}    

#visArea p:not([class]) {
    margin: 2rem 0 0;
}
}
/* ---------------------------------------------
lower_mainvisual
--------------------------------------------- */
.mv-lower {
	height: 150px;
    background: url(img/mv_lower.png) no-repeat left top;
	background-size: cover;
}
.mv-lower .mv-inner {
	max-width: 420px;
	padding-top: 2rem;
}
.mv-lower .mv-logo {
	width: 200px;
	padding: 1.5rem 0;
}
.mv-lower .mv_box{
	max-width:1000px;
	margin:0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.mv-lower a:hover {
	opacity: .6;
}	

@media screen and (max-width: 767px) {
.mv-lower {
	height: 130px;
	background: #EFEEDE url(img/mv_sp.png) no-repeat center top;
	background-size: cover;
}
.mv-lower .mv-inner {
	max-width: 420px;
	padding-top: 2rem;
}
.mv-lower .mv-logo {
	width: 17rem;
	padding: 2rem;
}
.mv-lower .mv_box{
	max-width:1000px;
	margin:0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.mv-lower a:hover {
	opacity: .6;
}	
}

/* ---------------------------------------------
sec設定, bg設定
--------------------------------------------- */
.sec01, .sec02, .sec04, .sec06, .sec07, .sec08{
	padding-top: 8rem;
	padding-bottom: 8rem;
	width: 100%;
	position: relative !important;
}
.sec03, .sec05 {
		padding-top: 6rem;
	padding-bottom: 8rem;
}
.host {
	padding-top: 4rem;
	padding-bottom: 4rem;
}
.bg01 {
	background: url("./img/shousai.png"), linear-gradient(#1E4890, #001F3E);
	background-size: cover;
	background-attachment: fixed;
}
.bg01-low {
	background: url("./img/shousai.png"), linear-gradient(#1E4890, #001F3E);
	background-size: cover;
	background-attachment: fixed;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.bg02 {
	background: url("./img/bg02.png") repeat-y top center;
	background-size: 100%;
	background-attachment: fixed;
}
.bg03 {
	background:#F6F8ED;
    position: relative;
    z-index: 0;
}
.bg04 {
	background: #122f62;
	background-size: cover;
	z-index: 0;
}
.bg05 {
	background-color: #fafbfc;
	background-image: repeating-linear-gradient(
120deg, rgba(30, 72, 144, .035) 0 1px, transparent 1px 12px);
}
.bg06 {
	background: #f6f8ed;
	background-size: cover;
}
.bg07 {
	background: url("./img/bg07.png");
	background-size: cover;
	background-attachment: fixed;
}
.bg08 {
	background: #ffffff;
	position: relative;
	z-index: 0;
}
.bg08::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0px);
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), rgb(0 0 0 / 8%) calc(100% - 1px)), linear-gradient(90deg, #00000000 calc(100% - 1px), rgb(0 0 0 / 8%) calc(100% - 1px));
    background-size: 25px 25px;
    background-repeat: repeat;
    background-position: center top;
    width: 100vw;
    height: 100%;
    box-sizing: border-box;
    z-index: -1;
	overflow-x: clip;
}

/* ---------------------------------------------
    sec設定_SP settings
--------------------------------------------- */
@media screen and (max-width: 767px) {
.sec01 {
	padding-top: 6rem;
	padding-bottom: 8rem;
	background: url(./img/shousai.png) no-repeat top, linear-gradient(#1E4890, #001F3E);
	background-size: 100%;
}
.sec02, .sec03, .sec04, .sec05, .sec06, .sec07, .sec08 {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.host {
	padding: 2rem 2rem 4rem;
}
}

/* ---------------------------------------------
navigation02 ※TOP、下層共通
--------------------------------------------- */
.header-area-upper {
	padding: var(--s1);
	text-align: right;
}
.header-title {
	font-size: 1.2rem;
	display: inline-block;
	position: relative;
}
.header-title::before {
	content: "PR";
	padding: .2rem;
	color: #fff;
	background-color: #333;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	left: -2.4rem;
}
@media screen and (max-width: 767px) {
	.header-title {
padding-left: 3rem;
}
.header-title::before {
	left: 0rem;
}
}
.header-title a {
	text-decoration: none;
}
.header-title a:hover {
	text-decoration: underline;
}
.gnavi-btn-close {
	display: none;
}
.toggle-content {
	display: none;
}
.gnavi-ctrl {
	transition: opacity 0.6s, visibility 0.6s;
	opacity: 0;
	visibility: hidden;
}
.gnavi-ctrl.is-show {
	opacity: 1;
	visibility: visible;
}
#low-header .gnavi-ctrl {
	opacity: 1;
	visibility: visible;
}
.gnavi-btn {
	width: var(--s7);
	height: var(--s6);
	background: #333;
	display: block;
	position: fixed;
	top: var(--s3);
	right: 0;
	z-index: 200;
	cursor: pointer;
}
.gnavi-btn span {
	width: var(--s4);
	height: 0.2rem;
	display: inline-block;
	background: #fff;
	position: absolute;
	left: 1rem;
	transform: translate(0, -50%);
	transition: transform 0.4s, opacity 0.4s;
}
.gnavi-btn span:nth-of-type(1) {
	top: 1rem;
}
.gnavi-btn span:nth-of-type(2) {
	top: 1.8rem;
}
.gnavi-btn span:nth-of-type(3) {
	top: 2.5rem;
}
.gnavi-btn.is-active span:nth-of-type(1) {
	transform: translateY(0.7rem) rotate(-45deg);
}
.gnavi-btn.is-active span:nth-of-type(2) {
	opacity: 0;
}
.gnavi-btn.is-active span:nth-of-type(3) {
	transform: translateY(-0.7rem) rotate(45deg);
}
.gnavi-btn-close {
	width: 80%;
	margin: 0 auto;
	padding: var(--s2);
	background: #333;
	display: block;
	text-align: center;
}
.gnavi-btn-close__inner {
	padding: 0 0 0 var(--s3);
	display: inline-block;
	color: #fff;
	font-weight: 700;
	position: relative;
}
.gnavi-btn-close__inner::before {
	content: "";
	width: 1em;
	height: 0.2rem;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%) rotate(45deg);
}
.gnavi-btn-close__inner::after {
	content: "";
	width: 1em;
	height: 0.2rem;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%) rotate(135deg);
}
.gnavi-area {
	width: 100%;
	max-width: 37.5rem;
	height: 100vh;
	padding: var(--s3) var(--s1) var(--s10);
	display: block;
	background: #F5F5F5;
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	transform: translateX(100%);
	transition: transform 0.8s ease, opacity 0.8s ease;
	opacity: 0;
}
.gnavi-title {
	min-height: var(--s6);
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}
.gnavi-pc {
	display: none;
}
.gnavi-list {
	border-bottom: 1px solid #333;
	position: relative;
}
.gnavi-list li {
	padding-left: 0;
}
.gnavi-list__item::before {
	display: none;
}
.gnavi-list__link {
	width: 100%;
	margin: 0 auto;
	padding: var(--s2) var(--s4) var(--s2) var(--s2);
	border-top: 1px solid #333;
	display: block;
	font-weight: 700;
	line-height: 2;
	text-decoration: none;
	position: relative;
}
.gnavi-list__link::after {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	background: url("img/arrow-01-black-right.svg") no-repeat center /100% auto;
	position: absolute;
	background-size: 1rem;
	top: 50%;
	right: var(--s2);
	transform: translate(0, -50%) rotate(0);
	transition: transform 0.3s;
}
.gnavi-list__link--toggle::after {
	background-image: url("img/arrow-01-black-down.svg");
}
.gnavi-list__link--toggle.is-open::after {
	transform: translate(0, -50%) rotate(180deg);
}
.gnavi-list__sub {
	width: 100%;
	background: #fff;
}
.gnavi-list__low .gnavi-list__link {
	padding: var(--s2) var(--s4) var(--s2) var(--s4);
}
.gnavi-list__low .gnavi-list__link::after {
	content: "└";
	background: none;
	transform: translateY(-50%);
	position: absolute;
	top: 40%;
	left: 1rem;
}
.is-gnavi-open .gnavi-area {
	opacity: 1;
	transform: translateX(0);
	z-index: 110;
}

/* ---------------------------------------------
index01(目次)
--------------------------------------------- */
.onb-index01-frame {
    width: 100%;
    background-color: var(--site-color09);
}
.onb-index01-wrap {
    margin: 0 auto;
    padding: var(--s1) var(--s3);
    border: solid 0.1rem #D0D3E0;
    background-color: transparent;
    position: relative;
}
.onb-index01-title {
    padding: var(--s2) var(--s2) var(--s2) var(--s6);
    color: #333;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1;
    background: url("./img/dummy-icon.png") no-repeat left center;
    background-size: 4rem auto;
    position: relative;
    cursor: pointer;
}
.onb-index01-title::before {
    content: "";
    width: 2rem;
    height: 0.3rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translate(0, -50%);
}
.onb-index01-title::after {
    content: "";
    width: 0.3rem;
    height: 2rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: 2.9rem;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}
.onb-index01-title.is-open::after {
    transform: translate(0, -50%) rotate(270deg);
}
.onb-index01-chapter {
    padding: var(--s2) var(--s2) var(--s2) var(--s4);
    font-weight: 700;
}
.onb-index01-chapter-h {
    margin: 0 0 0 var(--s2);
    font-size: 100%;
    line-height: 1.7;
    position: relative;
}
.onb-index01-chapter-h a {
    display: block;
    text-decoration: none;
}
.onb-index01-chapter-h a:hover {
    opacity: .6;
}
.onb-index01-chapter-h-two {
    margin-left: var(--s2);
    position: relative;
}
.onb-index01-chapter-h-three {
    margin-left: var(--s4);
    position: relative;
}
.onb-index01-chapter-h-two::before,
.onb-index01-chapter-h-three::before {
    position: absolute;
    top: 0;
    left: -1.5em;
}
.onb-index01-chapter-h-two::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 2rem;
    background-color: var(--site-color02);
    transform: translateY(-50%);
    top: .8em;
}
.onb-index01-chapter-h-three::before {
    content: "└";
}
.more-content {
    display: none;
}
.onb-index01-content {
    background-color: #fff;
}

/* ---------------------------------------------
related-article01(関連記事)
--------------------------------------------- */
.related-article01-frame {
    border: 1px solid var(--site-color09);
    margin: var(--s6) auto;
    padding: var(--s1)  var(--s3)  var(--s4) var(--s3);
    background: #f7f7f7;
    position: relative;
}
.related-article01-title {
    padding: var(--s2) var(--s2) var(--s3) var(--s7);
    color: #333;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1;
    background: url("./img/logo_icon.svg") no-repeat left center;
    background-size: 4rem auto;
    position: relative;
    border-bottom: 1px solid #D0D3E0;
}
.related-article01-list {
    padding: var(--s2) 0 var(--s2) var(--s2);
    font-weight: 700;
}
.related-article01-list li {
    margin: 0 0 0 var(--s2);
    padding-left: 1.5em;
    font-size: 100%;
    line-height: 1.7;
    position: relative;
}
.related-article01-list li + li {
    margin-top: 10px;
}
.related-article01-list li::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: #00804d;
  position: absolute;
  top: 0.8rem;
  left: 0;
}
.related-article01-list a {
    display: block;
    text-decoration: none;
}
.related-article01-list a:hover {
    opacity: 0.6;
}
.relations-box.relations-box--column {
    display: flex;
    gap: 10px;
}
.relations-box__pic {
    flex: 0 0 150px;
}
.is-hidden {
	display: none;
}

.related-article01-more {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 50%);
    background-color: transparent;
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: -40px;
    left: 0;
    padding: 2rem 0;
}


.related-article01-more.is-closed {
    display: none;
}

.related-article01-btn {
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 100px;
    padding: 1rem 5rem 1rem 2rem;
    position: relative;
}

  .related-article01-btn::before {
    content: "";
    width: 1.8rem;
    height: .2rem;
    background: #000;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translate(0, -50%);
}
.related-article01-btn::after {
    content: "";
    width: .2rem;
    height: 1.8rem;
    background: #000;
    position: absolute;
    top: 50%;
    right: 2.3rem;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}
.related-article01-btn:hover {
    opacity: 0.6;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
	.related-article01-frame {
    padding: var(--s3)  var(--s3)  var(--s4) var(--s3);
}
.related-article01-title {
    padding: var(--s2) var(--s2) var(--s3) var(--s7);
    color: #333;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    background: url("./img/logo_icon.svg") no-repeat left center;
    background-size: 3rem auto;
    position: relative;
    border-bottom: 1px solid #D0D3E0;
}
    .related-article01-list {
        margin-top: 1rem;
		padding: unset;
    }
    .related-article01-list li {
        margin-left: 0;
    }
    .relations-box__pic {
        flex: 0 0 100px;
    }
.related-article01-more {
    margin-bottom: 2rem;
}

}