/* ********************************** トピックスページ（コンセプトページ）の設定 ********************************** */

/* 防災LP用に登録 */
:root {
  --bousai_brown: #614022;
  --bousai_beige: #fff7cf;
  --bousai_yellow: #fff100;
  --bousai_liteorange: #ecc51d;
  --bousai_orange: #f39800;
  --bousai_green: #387d39;
  --bousai_turquoise: #6ea2b3;
}

/* 防災LP用に初期化 */
.bousai_goods .container{
  width: 100%;
}

/* 防災LP用に初期化 */
.bousai_goods .inner_wrapper {
  padding:0;
}

body.bousai_goods {
  scroll-behavior: smooth;
}

.bousai_goods p{
  display: inline-block;
  word-break: break-word; /* 長い単語で折り返し */
  white-space: normal;    /* 改行をブラウザ任せにする */
}

.bousai_goods_wrapper{
  width: 100%;
  overflow: hidden;
}



/* ********************************** 防災用_文字大きさ ********************************** */

.bousai_font_8em{
  font-size: 128px;
}

.bousai_font_4em{
  font-size: 64px;
}

.bousai_font_3em{
  font-size: 48px;
}

.bousai_font_2ten5em{
  font-size: 40px;
}

.bousai_font_2em{
  font-size: 32px;
}

.bousai_font_1ten5em{
  font-size: 24px;
}

.bousai_font_1ten2em{
  font-size: 19px;
}

.bousai_font_0ten9em{
  font-size: 14.4px;
}









/* ********************************** 防災用_共通パーツ ********************************** */
.bousai_goods .column_wrapper{
  max-width: 900px;
  text-align: center;
  margin: 0 auto;
}


.bousai_goods .lineBreak br,
.bousai_goods .lineBreak2{
  display: none;
}









.bousai_goods .sub_column_wrapper {
  position: relative;   /* 疑似要素の基準にする */
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.bousai_goods .section5 .sub_column_wrapper::before,
.bousai_goods .section6 .sub_column_wrapper::before,
.bousai_goods .section7 .sub_column_wrapper::before{
  content: "1";                /* 背景に置く文字 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  font-size: 9em;              /* 大きさは調整 */
  font-weight: bold;
  color: white;
  z-index: 0;                  /* 見出しより後ろに */
  pointer-events: none;        /* クリックの邪魔をしない */
}

.bousai_goods .section6 .sub_column_wrapper::before{
  content: "2";                /* 背景に置く文字 */
}

.bousai_goods .section7 .sub_column_wrapper::before{
  content: "3";                /* 背景に置く文字 */
}

.bousai_goods .sub_column_wrapper .section_title {
  position: relative;
  z-index: 1;   /* 背景の数字より前に表示 */
  font-weight: 700;
}













/* コメントのデザイン① */
.bousai_goods .bousaichi_boxstyle1{
  display: flex;
  justify-content: center;   /* 横方向の中央寄せ */
  align-items: center;       /* 縦方向の中央寄せ */
  margin-top: 1.5em;
}

.bousai_goods .bousaichi_boxstyle1 .img_wrapper{
  width: 100%;
  max-width: 220px;
}

.bousai_goods .comment_box {
  position: relative;
  background-color: var(--bousai_yellow);
  border: 4px solid var(--bousai_orange);
  display: inline-block;
  margin-left: 0.5em;
  padding: 2em;    
}

.bousai_goods .comment_box p{
  text-align: left;
  line-height: 1.5em;
}

.bousai_goods .strong{
  font-weight: 900;
  border-bottom: 1px solid black;
}

/* 外側（オレンジの枠部分） */
.bousai_goods .comment_box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -43px; /* 罫線分ずらす */
  border-style: solid;
  border-width: 13px 43px 13px 0; /* 枠のぶん少し大きめ */
  border-color: transparent var(--bousai_orange) transparent transparent;
  transform: translateY(-50%);
}

/* 内側（黄色の塗り部分） */
.bousai_goods .comment_box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  border-style: solid;
  border-width: 10px 40px 10px 0;
  border-color: transparent var(--bousai_yellow) transparent transparent;
  transform: translateY(-50%);
}

.bousai_goods .check_figure{
  position: absolute;
  top: -1.5em;
  left: 1em;
  max-width: 150px;
  transform: rotate(-8deg);
}






/* コメントのデザイン② */
.bousai_goods  .bousaichi_boxstyle2{
  display: flex;
  justify-content: center;   /* 横方向の中央寄せ */
  align-items: end;
  margin-top: 5.5em;
  width: 100%;
  border: 3px solid var(--bousai_orange);
  background-color: white;
}

.bousai_goods .bousaichi_boxstyle2 .img_wrapper{
  width: 100%;
  max-width: 140px;
}

.bousai_goods .comment_box2 {
  position: relative;
  margin-left: 0.5em;
  padding: 2em;    
}

.bousai_goods .comment_box2 p{
  text-align: left;
  line-height: 1.75em;
}





/* コメントのデザイン③ */
.bousai_goods .bousaichi_boxstyle3{
  display: flex;
  justify-content: left;
  align-items: end;
  margin: 6em 0;
  width: 100%;
  border: 3px solid var(--bousai_orange);
  background-color: white;
}

.bousai_goods .bousaichi_boxstyle3 .img_wrapper{
  width: 100%;
  max-width: 210px;
  margin-left: 1.5em;
}

.bousai_goods .comment_box3 {
  position: relative;
  margin-left: 0.5em;
  padding: 2em;    
}

.bousai_goods .comment_box3 p{
  text-align: left;
  line-height: 1.5em;
}






/* コメントのデザイン④ */
.bousai_goods .bousaichi_boxstyle4 .comment_box4{
  position: relative; /* ::before/::afterの基準にする */
  width: 100%;
  border: 4px solid var(--bousai_orange);
  background-color: white;
  text-align: center;
  border-radius: 1em;
  margin-bottom: 4em;
  padding: 2.2em;
  line-height: 1.75em; 
}

/* 外側（オレンジの枠部分） */
.bousai_goods .comment_box4::before {
  content: "";
  position: absolute;
  left: 50%;                       /* 中央に配置 */
  bottom: -48px;                   /* ボックスの下に出す */
  transform: translateX(-50%);     /* 水平方向中央寄せ */
  border-style: solid;
  border-width: 46px 17px 0 17px;  /* 下向き三角形（上辺に色が付く） */
  border-color: var(--bousai_orange) transparent transparent transparent;
}

/* 内側（黄色の塗り部分） */
.bousai_goods .comment_box4::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -38px;                   /* ::beforeより少し上に配置 */
  transform: translateX(-50%);
  border-style: solid;
  border-width: 40px 15px 0 15px;  /* 内側の小さい三角形 */
  border-color: white transparent transparent transparent;
}




.bousai_goods #section4,
.bousai_goods #section5,
.bousai_goods #section6,
.bousai_goods #section7{
  background-color: var(--bousai_liteorange);
  border: 1px solid var(--bousai_liteorange);
  padding: unset;
  margin: unset;
}


.bousai_goods .bousaichi_boxstyle4 .img_wrapper{
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}
























/* セクションの区切り */
.bousai_goods .section_title {
  display: flex;
  align-items: center;
  padding: 1.75em 0;
}

.bousai_goods .section_title::before,
.bousai_goods .section_title::after {
  border-top: 3px solid black;
  content: "";
  flex-grow: 1;
}

.bousai_goods .section_title::before {
  margin-right: 0.8em;
}

.bousai_goods .section_title::after {
  margin-left: 0.8em;
}








/* 帯の区切り文章 */
.bousai_goods .band_text{
  text-align: center;
}









/* 下からふわっと_初期状態：下にずらして透明に */
.bousai_goods .show_obj {
  transform: translateY(100px);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}

/* 表示時：位置を戻してフェードイン */
.bousai_goods .show_obj.sita_show {
  transform: translateY(0);
  opacity: 1;
}









/* ぽよぽよと動くアニメーション */
.bousai_goods .item_animation1 {
  display: inline-block; /* transform が効くように */
  animation: poyopoyo 4s ease-in-out infinite alternate;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}









/* 横にブルブル動くアニメーション */
.bousai_goods .item_animation2{
  display: inline-block; /* transform が効くように */
  animation: fluffy2 2s ease infinite; 
}
@keyframes fluffy2 {
  0% {
  transform: translateX(3px); }
  5% {
  transform: translateX(0); }
  10% {
  transform: translateX(3px); }
  20% {
  transform: translateX(0); }
  25% {
  transform: translateX(0); }
  30% {
  transform: translateX(0); }
  50% {
  transform: translateX(0px); }
  100% {
  transform: translateX(0); }
}









/* どすんと動くアニメーション */
.bousai_goods .item_animation3 {
  display: inline-block; /* transform が効くように */
  animation-name:updown1;   /* アニメーション名の指定 */
  animation-delay:0s;   /* アニメーションの開始時間指定 */
  animation-duration: 2s;   /* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
  animation-iteration-count: infinite; 
}
    
@keyframes updown1 {
  0% {
  transform: translateY(0);
  }
  40% {
  transform: translateY(0);
  }
  50% {
  transform: translateY(-6px);
  }
  65% {
  transform: translateY(0);
  }
  100% {
  transform: translateY(0);
  }
}









/* 円状にユラユラと動くアニメーション */
.bousai_goods .item_animation4{
  display: inline-block; /* transform が効くように */
  animation: shake 2s infinite;
  transform: rotate(5deg);
}
@keyframes shake {
  50% {
      transform: rotate(-4deg);
  }

  100% {
      transform: rotate(5deg);
  }
}









/* ぴこぴこと動くアニメーション(弱) */
.bousai_goods .item_animation5{
    animation: pikopiko 1s steps(2, start) infinite;
}

@keyframes pikopiko {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-5deg);
    }
}









/* ぴこぴこと動くアニメーション（強1) */
.bousai_goods .item_animation6{
    animation: pikopiko2 1s steps(2, start) infinite;
}

@keyframes pikopiko2 {
    0% {
        transform: rotate(5deg);
    }
    to {
        transform: rotate(-5deg);
    }
}









/* ぴこぴこと動くアニメーション（強2) */
.bousai_goods .item_animation7{
    animation: pikopiko3 1s steps(2, start) infinite;
}

@keyframes pikopiko3 {
    0% {
        transform: rotate(-5deg);
    }
    to {
        transform: rotate(5deg);
    }
}














/* ********************************** ここからセクション毎に設定 ********************************** */

.bousai_goods .top_message{
  margin-top: 2em;
  line-height: 1.4em;
  padding: 1em 0;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  background-color: white;
  /* 親要素を無視してセンター揃えにする */
  position: relative;      /* ビューポート幅いっぱいにする */
  left: 50%;
  right: 50%;
  width: 100vw;            
  margin-left: -50vw;      /* 中央基準から全幅に広げる */
}

























.bousai_goods .top {
  background-image: url(../../images/systems/series/bousai_goods/top_bg4.png);
  background-color: var(--bousai_brown);
  background-position: top center; /* ← centerを追加 */
  background-repeat: repeat-x;
  background-color: var(--bousai_brown);  
  background-size: auto 100%; /* 高さ基準で拡大縮小（幅は自動） */
  position: relative;
}

.bousai_goods .top_contents{
  padding: 5em 0 2em 0;
}






.bousai_goods .top .title{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  text-align: center;
  align-items: center;   /* 縦方向の中央揃え */
}



/* ２個目の li のみ左揃えに変更 */
.bousai_goods .top .title li.midashi {
  text-align: left;      /* テキストを左寄せ */
  align-self: flex-start;/* 必要なら縦位置も上揃え */
  flex: 1;               /* 空きスペースを使って左側に広げる */
}

.bousai_goods .top .title li{
  display: block;
}

.bousai_goods .top .title > li:nth-child(1){
  padding: 2em;
}

.bousai_goods .top .title > li:nth-child(2){
  min-width: 900px;
}

.bousai_goods .bousaishi_illust1_box{
  position: relative;
}





.bousai_goods .top_text{
  color: white;
  width: 100%;  /* 必要に応じて幅を指定 */
  text-align: center; /* テキストも中央揃えしたい場合 */
  margin: 0 auto;
  padding:1em 0 0.75em 0;
  position: absolute;
  bottom: -2.5em;



  /* 背景色（上下で切り替え）+ 画像を重ねる */
  background:
    url(../../images/systems/series/bousai_goods/top_bg3.svg) repeat-x center / cover, /* ← 画像を先に書くと一番上 */
    linear-gradient(
      to bottom,
      transparent 0 50%,             /* 0〜50% は透明 */
      var(--bousai_beige) 50% 100%   /* 50〜100% はベージュ */
  );


}

.bousai_goods .top_text li p::before{
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../../images/systems/series/bousai_goods/comment_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.bousai_goods .top_text li p::after{
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../../images/systems/series/bousai_goods/comment_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  transform: scaleX(-1); /* 左右反転 */
}

.bousai_goods .top_text li:nth-child(2){
  display: none;
}

.bousai_goods .bousaishi_illust1_box .bousaishi_illust1_text{
  position: absolute;
  bottom: -1em;
  left: 50%; /* 親要素の中央を基準にする */
  transform: translateX(-50%); /* 要素自身の幅の半分だけ左にずらす */
  
  padding: 0.75em 1em;
  border-radius: 1em;
  background-color: #ebbc2e;
  color: white;
  width: 100%;
}

.bousai_goods .top .title .midashi{
  width: 100%;
  margin-left: 1em;
  font-weight: bold;
}

.bousai_goods .top .title .midashi .read{
  background-color: black;
  padding: 0.5em;
  margin: 0 auto 0.6em auto;
  color: white;
  font-weight: 700;

  display: block;
  text-align: center; /* ←親の幅の中央に配置 */
  width: fit-content;
}

.bousai_goods .top .title .midashi .catch{
  text-align: center;
}

.bousai_goods .top .title .midashi .text{
  text-shadow: 8px 8px 6px rgba(0,0,0,0.5);
  font-weight: 900;
  display: inline-block;
}

.bousai_goods .top .title .midashi .text1{
  color: #cad900;
    
}

.bousai_goods .top .title .midashi .text2{
  color: #f08300;
}

.bousai_goods .top .title .midashi .text3{
  color: white;
}

.bousai_goods .top_list_btn_wrapper{
  background-color: var(--bousai_beige);
  margin-top: 5em;
}

.bousai_goods .top_list_btn_wrapper .bousaishi_illust1_box{
  display: none;
}

.bousai_goods .top_list_btn{
  text-align: center;
  margin:0 auto;
  padding-top: 3.5em;
  max-width: 600px;

}

.bousai_goods .top_list_btn ul{
  display: flex;
  justify-content: center; /* 横方向の中央寄せ */
  align-items: center;     /* （必要なら縦方向も中央寄せ） */
}

.bousai_goods .top_list_btn li{
  margin-right: 1.5em;
  padding: 0 1.5em;
  border-right: 3px solid var(--bousai_brown);
}

.bousai_goods .top_list_btn li img {
  transition: transform 0.4s ease-in-out; /* ← 時間とイージングを調整 */
  transform-origin: center center; /* 拡大の基点を中央に */
}

.bousai_goods .top_list_btn li a:hover img {
  transform: scale(1.2); /* 1.2倍に拡大 */
  animation: wobble 0.6s ease-in-out infinite alternate;
}

/* 揺れるアニメーション */
@keyframes wobble {
  0%   { transform: scale(1.2) rotate(0deg); }
  25%  { transform: scale(1.2) rotate(3deg); }
  50%  { transform: scale(1.2) rotate(-3deg); }
  75%  { transform: scale(1.2) rotate(2deg); }
  100% { transform: scale(1.2) rotate(0deg); }
}


.bousai_goods .top_list_btn li:last-of-type{
  margin-right: 0;
  padding: 0;
  border-right: none;
}

.bousai_goods .top_list_btn ul img{
  height: 110px;

}

.bousai_goods .top_list_btn ul p{
  margin-top: 1em;
}









.bousai_goods #section1{
  background-color: var(--bousai_beige);
  position: relative;
  padding-top: 4em;
  z-index: 0;
}

.bousai_goods #section1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;           /* 親要素の横幅いっぱい */
  height: 75px;          /* SVGの高さに合わせる */

  background: url("../../images/systems/series/bousai_goods/gizagiza_bg.svg") repeat-x bottom;
  background-size: 160px 75px; /* ← 三角形のサイズを固定（SVGの幅に合わせる） */
  z-index: -1; /* ← これで親要素の背景として表示される */
}




.bousai_goods .jpan_figure_box{
  background-image: url(../../images/systems/series/bousai_goods/bg_text.png);
  background-size: 100% 100%;  /* 要素の縦横に完全フィット */
  background-repeat: no-repeat; /* 繰り返しを防止 */
  padding: 5em 0;
}

.bousai_goods .jpan_figure {
  display: flex;
  justify-content: center;   /* 横方向の中央寄せ */
  align-items: center;       /* 縦方向の中央寄せ */
  position: relative;
  text-align: left;
  line-height: 1.75em;
}

.bousai_goods .japan-map-wrapper {
  position: relative;
  display: inline-block;
}

.bousai_goods .japan-map {
  display: block;
}

.bousai_goods .japan-map-wrapper .ripple_animation{
  position: absolute;
  top: 61%;
  left: 58%;
  width: 110%;
  height: 110%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* クリックなどの邪魔をしない */
}

/* 中央の白丸 */
.bousai_goods .japan-map-wrapper .center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
  z-index: 2;
}

/* 波紋の共通設定 */
.bousai_goods .japan-map-wrapper .ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 4s infinite;
  animation-timing-function: ease-out;
}

/* 波紋ごとに線の太さ・透明度を変える */
.bousai_goods .japan-map-wrapper .ripple1 { width: 20%; height: 20%; border: 6px solid rgba(255,255,255,1); animation-delay: 0s; }
.bousai_goods .japan-map-wrapper .ripple2 { width: 40%; height: 40%; border: 5px solid rgba(255,255,255,0.8); animation-delay: 0.3s; }
.bousai_goods .japan-map-wrapper .ripple3 { width: 60%; height: 60%; border: 4px solid rgba(255,255,255,0.6); animation-delay: 0.6s; }
.bousai_goods .japan-map-wrapper .ripple4 { width: 80%; height: 80%; border: 3px solid rgba(255,255,255,0.4); animation-delay: 0.9s; }
.bousai_goods .japan-map-wrapper .ripple5 { width: 100%; height: 100%; border: 2px solid rgba(255,255,255,0.2); animation-delay: 1.2s; }

@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
}









.bousai_goods .jpan_figure li:nth-child(2){
  margin-left: 2em;
}











.bousai_goods .section2 {
  position: relative; /* 擬似要素の基準にする */
  padding-bottom: 1.5em;
  overflow: hidden; /* はみ出し防止 */
}

.bousai_goods .section2::before {
  content: "";
  position: absolute;
  right: -2em; /* background-position と同じ位置に配置 */
  bottom: -3px;
  z-index: -1;
  width: 420px;
  height: 420px;
  background-image: url(../../images/systems/series/bousai_goods/question_bg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: center center; /* 中心を軸に回転 */
  animation: rotate-bg 20s linear infinite; /* 30秒で1周、無限ループ */
}

@keyframes rotate-bg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



.bousai_goods .section2 .figure_list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  padding-top: 2em;
}

.bousai_goods .section2 .midashi {
  font-weight: 900;
  position: absolute;
  top: -0.5em;
  left: 50%;
  transform: translateX(-50%);
}

.bousai_goods .section2 .figure_list li:nth-child(1) .midashi,
.bousai_goods .section2 .figure_list li:nth-child(2) .midashi,
.bousai_goods .section2 .figure_list li:nth-child(3) .midashi{
  width: 2em;
  height: 1.3em;  
}


.bousai_goods .section2 .figure_list li:nth-child(1) .midashi {
  background: url(../../images/systems/series/bousai_goods/jyo_1.png) no-repeat;
  background-size: 100% auto;
}

.bousai_goods .section2 .figure_list li:nth-child(2) .midashi {
  background: url(../../images/systems/series/bousai_goods/jyo_2.png) no-repeat;
  background-size: 100% auto;
}

.bousai_goods .section2 .figure_list li:nth-child(3) .midashi {
  background: url(../../images/systems/series/bousai_goods/jyo_3.png) no-repeat;
  background-size: 100% auto;
}

.bousai_goods .section2 .figure_list li{
    position: relative;
    padding: 2em;
    border-radius: 1em;
}

.bousai_goods .section2 .figure_list li:nth-child(1){
    background-color: #9ec045;
}

.bousai_goods .section2 .figure_list li:nth-child(2){
    background-color: #aaddf7;
}

.bousai_goods .section2 .figure_list li:nth-child(3){
    background-color: #ffc700;
}


.bousai_goods .section2 .figure_list img{
    margin: 1em 0;
    max-height: 160px;
}

.bousai_goods .section2 .text{
    padding: 1em;
    background-color: white;
    line-height: 1.25em;
    border-radius: 0.5em;
}

.bousai_goods .section2 .figure_list li:nth-child(1) .text{
    border: 3px solid var(--bousai_green);
}

.bousai_goods .section2 .figure_list li:nth-child(2) .text{
    border: 3px solid #0040f8;
}

.bousai_goods .section2 .figure_list li:nth-child(3) .text{
    border: 3px solid var(--bousai_orange);
}

.bousai_goods .quiz_wrapper{
    margin: 1em 0;
}

.bousai_goods .quiz_wrapper p{
    margin-bottom: 1em;
}

.bousai_goods .quiz_wrapper p::before{
    content: "";
    width: 1em;
    height: 0.8em;
    background: url(../../images/systems/series/bousai_goods/arrow_blue.svg) no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
}

.bousai_goods .quiz_wrapper a{
  display: block;
  background-color: var(--bousai_green);
  border-radius: 9999px;
  color: white;
  padding: 1em 0;
}

.bousai_goods .quiz_wrapper a:hover{
  background-color: black;
}




.bousai_goods .greenBtn a{
  display: block;
  background-color: var(--bousai_green);
  border-radius: 9999px;
  color: white;
  padding: 1em 2em;
  transition: transform 0.3s ease; /* アニメーションを滑らかに */
}

.bousai_goods .greenBtn a:hover{
  background-color: var(--bousai_yellow);
  color: black;
  transform: scale(0.95); /* 90%に縮小 */
  
}




.bousai_goods #section3{
  background-color: var(--bousai_beige);
  padding-top: unset;
}

.bousai_goods .BouGen_column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.bousai_goods .BouGen_column > li {
  padding: 4em;
}

.bousai_goods .section3 .list_column {
  display: flex;
  flex-direction: column; /* 縦並び */
}

.bousai_goods .section3 .list_column .ttl {
  width: fit-content;
  padding: 0.5em 1em;
  font-weight: 900;
  border-radius: 0.25em;
  color: var(--bousai_brown);
}

.bousai_goods .section3 .list_column .txt {
  margin: 1.5em 0 0;
  line-height: 1.5em;
}

/* 左カラムは右寄せ（中央に向ける） */
.bousai_goods .section3 .BouGen_column li:nth-child(1) .list_column {
  align-items: flex-end;   /* 子要素(ttlとtxt)を右寄せ */
  text-align: right;       /* テキストも右寄せ */
}

.bousai_goods .section3 .BouGen_column li:nth-child(1) .list_column .ttl {
  background-color: var(--bousai_yellow);
}

/* 右カラムは左寄せ（中央に向ける） */
.bousai_goods .section3 .BouGen_column li:nth-child(2) .list_column {
  align-items: flex-start; /* 子要素(ttlとtxt)を左寄せ */
  text-align: left;        /* テキストも左寄せ */
}
.bousai_goods .section3 .BouGen_column li:nth-child(2) .list_column .ttl {
  background-color: white;
}

.bousai_goods .section3 .BouGen_column > li:nth-child(1){
    background-color: #e92e00;
}

.bousai_goods .section3 .BouGen_column > li:nth-child(2){
    background-color: #f1c300;
}






.bousai_goods .explanation_wrapper{
  padding: 6em 0 2.5em 0;
  background-color: var(--bousai_liteorange);
  position: relative;
}

.bousai_goods .explanation_wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%) scaleY(-1); /* ← ここで上下反転 */

  /* ▼ 下向きの三角形に修正 */
  border-style: solid;
  border-width: 0 60px 70px 60px; /* 上0、左右60、下70 → 下向き三角形 */
  border-color: transparent transparent var(--bousai_beige) transparent;
}

.bousai_goods .explanation_wrapper .midashi{
    line-height: 1.25em;
    margin-bottom: 1em;
    color: white;
}

.bousai_goods .kokuban_wrapper{
  background-image: url(../../images/systems/series/bousai_goods/bg_kokuban.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 3em;
}

.bousai_goods .kokuban{
  display: flex;
  position: relative;
  color: white;
  text-align: left;
  height: fit-content;
}

.bousai_goods .kokuban > li:nth-child(1){
    width: fit-content;
}

.bousai_goods .kokuban > li:nth-child(2){
    width: 30%;
}

.bousai_goods .kokuban .ttl{
    width: fit-content;
}

.bousai_goods .kokuban .txt{
    line-height: 1.5em;
}

.bousai_goods .kokuban .text{
    line-height: 1.75em;
}

.bousai_goods .kokuban .text > li{
    margin-bottom: 5em;
}

.bousai_goods .kokuban .kokuban_boarder {
    border-bottom: 4px solid white;
    width: 3em;
    height: 1px;
    margin: 0 auto 0.3em auto;
    padding-bottom: 0.3em;
}

.bousai_goods .kokuban_figure{
    position: relative;
    height: 100%;
}

.bousai_goods .kokuban_figure img{
    max-height: 130px;
}

.bousai_goods .kokuban_figure li:nth-child(1){
    position: absolute;
    top: -15px;
    left: -20px;
}

.bousai_goods .kokuban_figure li:nth-child(2){
  position: absolute;
  top: 30%;
  right: 0;
}

.bousai_goods .kokuban_figure li:nth-child(3){
  position: absolute;
  bottom: 15px;
  left: 10px;
}


.bousai_goods #section4{
  background: unset;
  background-color: var(--bousai_liteorange);
}

.bousai_goods .section4 .title{
  padding: 5.5em 0;
  align-items: center;
  background-color: white;
  border-top: 4px solid var(--bousai_orange);
  border-bottom: 4px solid var(--bousai_orange); 
  /* 親要素を無視してセンター揃えにする */
  position: relative;      /* ビューポート幅いっぱいにする */
  left: 50%;
  right: 50%;
  width: 100vw;            
  margin-left: -50vw;      /* 中央基準から全幅に広げる */
}

.bousai_goods .section4 .title span{
  color: white;
}

.bousai_goods .section4 .title .jishin{
  background-image: url(../../images/systems/series/bousai_goods/bg_jishin.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center 54%;
  padding: 0.8em;
  margin-right: 0.2em;
}

.bousai_goods .section4 .title .ji,
.bousai_goods .section4 .title .shin{
  display: inline-block; /* 回転する要素は inline-block が必要 */
  transform: rotate(-10deg); /* -10度だけ左に傾ける */
  color: #dab78d;
  font-weight: 800;
}

.bousai_goods .section4 .title .ji{
  margin-right: 0.3em;
}

.bousai_goods .section4 .title .shin{
  transform: rotate(10deg); /* -10度だけ左に傾ける */
}










.bousai_goods .section4 .q_list {
  text-align: left;
  line-height: 1.5em;
  list-style: none;            
  counter-reset: q-counter;    
  padding-left: 0;
  margin: 2em 0 1em 0;
}

.bousai_goods .section4 .q_list li a {
  display: block;              /* ← inline-blockからblockに変更 */
  position: relative;
  padding-left: 2.5em;         /* 番号分の余白 */
  transition: background-color 0.15s ease, color 0.15s ease;
  border-bottom: 4px solid transparent;
  margin-bottom: 1em;
  text-align: left;            /* 念のため左揃えを指定 */
  line-height: 1.5em;
}

/* ナンバリング */
.bousai_goods .section4 .q_list li a::before {
  counter-increment: q-counter;
  content: counter(q-counter);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  height: 2em;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: black;
  font-size: 1em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bousai_goods .section4 .q_list li a:hover::before {
  background: var(--bousai_orange);
  color: white;
}









.bousai_goods .section5 .tab_contents_box {
  margin-top: 1em;
  position: relative;
  margin-bottom: 0;
}

/* タブラベルを横並びに均等配置 */
.bousai_goods .section5 .tab_contents_box input {
  display: none; /* ラジオボタンは非表示 */
}



/* タブを横並びに */
.bousai_goods .section5 .tab_contents_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 4px solid black;
}

.bousai_goods .section5 .tab_contents_box .listNo{
  padding: 0.5em 0.5em 0.25em 0.5em;
  margin-bottom: 0.2em;
}

/* タブ共通 */
.bousai_goods .section5 .tab_menu {
  flex: 1;
  background: var(--bousai_orange);
  border-top: 4px solid black;
  border-bottom: none;
  border-left: 4px solid black;   /* ← 全部のタブに左線 */
  border-right: 0;                /* 右は消す */
  padding:  0.5em 0 1em 0;
  font-size: 1.6rem;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

/* タブメニューのホバー時 */
.bousai_goods .section5 .tab_menu:hover{
  background-color: black;
  color: white;
}

/* 選択中タブには hover を適用しない */
.bousai_goods .section5 input:checked + .tab_menu:hover {
  background-color: white; /* 元の背景を維持 */
  color: inherit;          /* 文字色も通常状態を維持 */
  cursor: default;         /* マウスカーソルも通常に */
}

/* 最初のタブだけ左線を二重にしないよう調整 */
.bousai_goods .section5 .tab_menu:first-of-type {
  border-left: 4px solid black;
}

/* 最後のタブに右線を追加 */
.bousai_goods .section5 .tab_menu:last-of-type {
  border-right: 4px solid black;
}

/* タブ内のリスト要素の余白をリセット */
.bousai_goods .section5 .tab_menu ul,
.bousai_goods .section5 .tab_menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 最初のタブ → 左線をつける */
.bousai_goods .section5 .tab_menu:first-of-type {
  border-left: 4px solid black;
}

/* 最後のタブ → 右線をつける */
.bousai_goods .section5 .tab_menu:last-of-type {
  border-right: 4px solid black;
}

/* 隣接部分の仕切り線 */
.bousai_goods .section5 .tab_menu + .tab_menu {
  border-left: 4px solid black;
}

/* 選択されたタブ */
.bousai_goods .section5 input:checked + .tab_menu {
  background-color: white;
  border-bottom: none; /* ← 白線ではなく完全に消す */
  z-index: 2;
}

/* コンテンツエリア */
.bousai_goods .section5 .bousai_tab_content {
  display: none;
  width: 100%;
  border: 4px solid black !important;
  padding: unset !important;
  border-top: none !important;  /* ← 上線を消すことでタブと一体化 */
  position: relative;
  z-index: 1;
  background-color: white;
}

/* 選択時に表示 */
.bousai_goods .section5 #tab_a:checked ~ #tab_a_content,
.bousai_goods .section5 #tab_b:checked ~ #tab_b_content,
.bousai_goods .section5 #tab_c:checked ~ #tab_c_content {
  display: block;
}




.bousai_goods .section5 .explanation_box {
  display: flex;
  flex-direction: column; /* 親から縦並びにする */
}


.bousai_goods .section5 .explanation_box > li:first-of-type{
  border-bottom: 4px solid black;
  position: relative;
}

.bousai_goods .section5 .explanation_box .arrow{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -40px;
  max-width: 120px;
}

.bousai_goods .section5 .explanation_contents1 {
  display: flex;
  align-items: stretch;   /* 子要素を親幅いっぱいに */
  padding: 35px 35px 0 35px;
}

.bousai_goods .section5 .explanation_contents1 > li {
  width: 100%;           /* 親幅いっぱいに広げる */
}





.bousai_goods .section5 .kiken {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../../images/systems/series/bousai_goods/bg_hukidashi.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 240px;
  line-height: 1.75em;
  width: 100%;
}

.bousai_goods .section5 .kiken .text{
  display: block;
  margin-bottom: 0.4em;
  color: var(--bousai_orange);
  line-height: 1.2em;
}

.bousai_goods .section5 .explanation_box{
  display: flex;
}

.bousai_goods .section5 .img_wrapper {
  display: flex;
  align-items: flex-end; /* 子要素（画像）を下に揃える */
  max-width: 190px;
  margin: 0 auto;
}


.bousai_goods .section5 .figure_wrapper1,
.bousai_goods .section5 .figure_wrapper2{
  position: relative;
  height: 100%;
}

.bousai_goods .section5 .figure_wrapper1 li:nth-child(1){
  position: absolute;
  top: 20px;
  right: 0;
}

.bousai_goods .section5 .figure_wrapper1 li:nth-child(2){
  position: absolute;
  bottom: 50px;
  left: 0;
}

.bousai_goods .section5 .figure_wrapper1 li:nth-child(1) .img_wrapper{
  max-width: 250px;
}

.bousai_goods .section5 .figure_wrapper1 li:nth-child(2) .img_wrapper{
  max-width: 240px;
}








.bousai_goods .section5 .explanation_contents2 {
  display: flex;
  align-items: center; /* 右カラム（テキスト）を縦中央に揃える */
  gap: 2em;            /* カラム間の余白 */
  padding: 35px;
  position: relative;
  min-height: 380px; /* 高さの目安。必要に応じて調整 */
}

.bousai_goods .section5 .explanation_contents2 > li {
  flex: 1; /* ← width:100% をやめて、flexで均等幅にする */
  min-width: 0; /* flexアイテムのはみ出し防止 */
}

/* 画像ラッパーのULを基準にする */
.bousai_goods .section5 .figure_wrapper2 {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 300px;
}

/* 角に固定配置 */
.bousai_goods .section5 .figure_wrapper2 li:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
}

.bousai_goods .section5 .figure_wrapper2 li:nth-child(2) {
  position: absolute;
  bottom: 0;
  right: 0;
}

.bousai_goods .section5 .figure_wrapper2 li:nth-child(1) .img_wrapper {
  max-width: 170px;
}

.bousai_goods .section5 .figure_wrapper2 li:nth-child(2) .img_wrapper {
  max-width: 280px;
}

.bousai_goods .section5 .explanation2 {
  text-align: left;
  line-height: 2em;
}

.bousai_goods .section5 .explanation2 .list {
  display: flex;
  gap: 1em; /* liの間隔をgapで調整 */
  margin: 0;
  padding: 0;
}

.bousai_goods .section5 .explanation2 .list li {
  padding: 0.2em 1em;
  background-color: var(--bousai_orange);
  border-radius: 999px;
  color: white;
}










.bousai_goods .section5 .explanation_contents3 {
  display: flex;
  align-items: center; /* 右カラム（テキスト）を縦中央に揃える */
  gap: 0em;            /* カラム間の余白 */
  padding: 35px 35px 0 35px;
  position: relative;
  min-height: 380px; /* 高さの目安。必要に応じて調整 */
}

.bousai_goods .section5 .explanation_contents3 > li {
  flex: 1; /* ← width:100% をやめて、flexで均等幅にする */
  min-width: 0; /* flexアイテムのはみ出し防止 */
}

/* 画像ラッパーのULを基準にする */
.bousai_goods .section5 .figure_wrapper3 {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 300px;
}

/* 角に固定配置 */
.bousai_goods .section5 .figure_wrapper3 li:nth-child(1) {
  position: absolute;
  top: 0;
  left: 35px;
}

.bousai_goods .section5 .figure_wrapper3 li:nth-child(2) {
  position: absolute;
  bottom: 0;
  right: 0;
}

.bousai_goods .section5 .figure_wrapper3 li:nth-child(1) .img_wrapper {
  max-width: unset;
  width: 340px;
}

.bousai_goods .section5 .figure_wrapper3 li:nth-child(2) .img_wrapper {
  max-width: 280px;
}









.bousai_goods .section5 .explanation_contents4 {
  display: flex;
  align-items: center; /* 右カラム（テキスト）を縦中央に揃える */
  gap: 4em;            /* カラム間の余白 */
  padding: 35px;
  position: relative;
  min-height: 380px; /* 高さの目安。必要に応じて調整 */
}

.bousai_goods .section5 .explanation_contents4 > li {
  flex: 1; /* ← width:100% をやめて、flexで均等幅にする */
  min-width: 0; /* flexアイテムのはみ出し防止 */
}

/* 画像ラッパーのULを基準にする */
.bousai_goods .section5 .figure_wrapper4 {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 300px;
}

/* 角に固定配置 */
.bousai_goods .section5 .figure_wrapper4 li:nth-child(1) {
  position: absolute;
  top: 0;
  left: 30px;
}

.bousai_goods .section5 .figure_wrapper4 li:nth-child(2) {
  position: absolute;
  bottom: 20px;
  right: -55px;
}

.bousai_goods .section5 .figure_wrapper4 li:nth-child(1) .img_wrapper {
  max-width: 200px;
}

.bousai_goods .section5 .figure_wrapper4 li:nth-child(2) .img_wrapper {
  max-width: 180px;
}

.bousai_goods .section5 .explanation4 {
  text-align: left;
  line-height: 2em;
}

.bousai_goods .section5 .explanation4 .list {
  display: flex;
  gap: 1em; /* liの間隔をgapで調整 */
  margin: 0;
  padding: 0;
}

.bousai_goods .section5 .explanation4 .list li {
  padding: 0.2em 1em;
  background-color: var(--bousai_orange);
  border-radius: 999px;
  color: white;
}










.bousai_goods .section5 .explanation_contents5 {
  display: flex;
  align-items: center; /* 右カラム（テキスト）を縦中央に揃える */
  gap: 0em;            /* カラム間の余白 */
  padding: 35px 35px 0 35px;
  position: relative;
  min-height: 380px; /* 高さの目安。必要に応じて調整 */
}

.bousai_goods .section5 .explanation_contents5 > li {
  flex: 1; /* ← width:100% をやめて、flexで均等幅にする */
  min-width: 0; /* flexアイテムのはみ出し防止 */
}

/* 画像ラッパーのULを基準にする */
.bousai_goods .section5 .figure_wrapper5 {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 300px;
}

/* 角に固定配置 */
.bousai_goods .section5 .figure_wrapper5 li:nth-child(1) {
  position: absolute;
  top: 0;
  left: 35px;
}

.bousai_goods .section5 .figure_wrapper5 li:nth-child(2) {
  position: absolute;
  bottom: 0;
  right: 0;
}

.bousai_goods .section5 .figure_wrapper5 li:nth-child(1) .img_wrapper {
  max-width: unset;
  width: 340px;
}

.bousai_goods .section5 .figure_wrapper5 li:nth-child(2) .img_wrapper {
  max-width: 280px;
}









.bousai_goods .section5 .explanation_contents6 {
  display: flex;
  align-items: center; /* 右カラム（テキスト）を縦中央に揃える */
  gap: 5em;            /* カラム間の余白 */
  padding: 35px;
  position: relative;
  min-height: 380px; /* 高さの目安。必要に応じて調整 */
}

.bousai_goods .section5 .explanation_contents6 > li {
  flex: 1; /* ← width:100% をやめて、flexで均等幅にする */
  min-width: 0; /* flexアイテムのはみ出し防止 */
}

/* 画像ラッパーのULを基準にする */
.bousai_goods .section5 .figure_wrapper6 {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 300px;
}

/* 角に固定配置 */
.bousai_goods .section5 .figure_wrapper6 li:nth-child(1) {
  position: absolute;
  top: -15px;
}

.bousai_goods .section5 .figure_wrapper6 li:nth-child(2) {
  position: absolute;
  bottom: 0;
  right: -65px;
}

.bousai_goods .section5 .figure_wrapper6 li:nth-child(1) .img_wrapper {
  max-width: 220px;
}

.bousai_goods .section5 .figure_wrapper6 li:nth-child(2) .img_wrapper {
  max-width: 200px;
}

.bousai_goods .section5 .explanation6 {
  text-align: left;
  line-height: 2em;
}

.bousai_goods .section5 .explanation6 .list {
  display: flex;
  gap: 1em; /* liの間隔をgapで調整 */
  margin: 0;
  padding: 0;
}

.bousai_goods .section5 .explanation6 .list li {
  padding: 0.2em 1em;
  background-color: var(--bousai_orange);
  border-radius: 999px;
  color: white;
}











.bousai_goods .hazardmap_figure {
  border: 8px solid var(--bousai_orange);
  border-radius: 2em;
  padding-top: 3em;
  position: relative; /* ←これが重要！ */
  text-align: center;
  margin-top: 6em;
  background-color: white;
}

.bousai_goods .hazardmap_figure .lineBreak {
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2em;
  background-color: var(--bousai_green);
  border-radius: 9999px;
  color: white;
  padding: 1em;
  text-align: center;
  line-height: 1.5em;
  width: max-content;
}







.bousai_goods .hazardmap_figure ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2カラム */
  gap: 2em;
}

.bousai_goods .hazardmap_figure ul li:first-of-type{
  border-right: 4px solid var(--bousai_orange);
}

.bousai_goods .hazardmap_figure ul li{
  padding: 2em;
}

.bousai_goods .hazardmap_figure p{
  line-height: 1.25em;
  display: block;
}

.bousai_goods .hazardmap_figure .img_wrapper{
  margin-bottom: 1.5em;
}

.bousai_goods .hazardmap_figure .img_wrapper img{
  max-height: 135px;
  width: auto;
  margin: 0 auto
}




.bousai_goods .mobile_operation {
  position: relative;
  display: inline-block;
  width: 200px; /* スマホ画像のサイズに合わせて調整 */
}

/* スマホは動かない */
.bousai_goods .mobile_operation .phone {
  width: 100%;
  display: block;
}

/* 手だけアニメーションする */
.bousai_goods .mobile_operation .hand {
  position: absolute;
  bottom: 0; /* 下からスタート */
  right: 0;
  width: 50%; /* スマホ画像に対しての比率 */
  animation: swipeHand 3s ease-in-out infinite;
}

@keyframes swipeHand {
  0%   { transform: translate(-50%, 0%) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translate(-50%, -25%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}




















.bousai_goods .slush_comment{
  margin: 1.8em auto 0.5em auto;
}

.bousai_goods .slush_comment p::before{
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../../images/systems/series/bousai_goods/comment_black.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.bousai_goods .slush_comment p::after{
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../../images/systems/series/bousai_goods/comment_black.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  transform: scaleX(-1); /* 左右反転 */
}

.bousai_goods .map_img{
  border: 7px solid white;
  margin-top: 3em;
  overflow: hidden;
}

.bousai_goods .map_img a:hover img{
  opacity: 0.7;
}

.bousai_goods .map_text{
  margin-top: 1.5em;
  padding-bottom: 2.5em;
  line-height: 1.5em;
}

.bousai_goods .map_text li:nth-child(1){
  margin-bottom: 1.5em;
}

.bousai_goods #section6 .column_wrapper{
  margin-top: 2em;
}

.bousai_goods #section6 .white_band{
  background-color: white;
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: 1;
}

.bousai_goods .section6 .band_wrapper{
  max-width: 900px;
  text-align: center;
  margin: 0 auto;
  padding: 5em 0 3em 0;
}


.bousai_goods .section6 .bousaichi_boxstyle2{
  margin: unset;
}

.bousai_goods .section6 .bousaichi_boxstyle2 .img_wrapper {
  max-width: 210px;
}

.bousai_goods .blackBtn{
  padding: 0.75em 0;
  background-color: black;
  margin: 1.5em 0;
  box-shadow: 0.25em 0.25em 0 lightgray; /* x方向3px、y方向3px、ぼかしなし */
}

.bousai_goods .bousai_goods_wrapper .link_btn{
  color: white;
  width: 100%;
  display: block;
  padding: 0.75em 1em;
  background-color: black;
  border: 3px solid transparent;
  border-radius: 999px;
  margin: 1.5em auto;
  box-shadow: 0.25em 0.25em 0 lightgray; /* x方向3px、y方向3px、ぼかしなし */
}

.bousai_goods .bousai_goods_wrapper .link_btn:hover{
  background-color: lightgrey;
  border: 3px solid black;
  color: black;
  box-shadow: unset;
}

.bousai_goods .section6 .map_memo{
  line-height: 1.5em;
  text-align: left;
}









.bousai_goods #section7{
  padding-bottom: 3em;
  background-color: var(--bousai_liteorange);
}

.bousai_goods .section7 .sub_column_wrapper::before {
  content: "3";
  width: 100vw;
  padding: 0.4em
}

.bousai_goods .note_figure_box{
  background-image: url(../../images/systems/series/bousai_goods/bg_text.png);
  background-size: 100% 100%;  /* 要素の縦横に完全フィット */
  background-repeat: no-repeat; /* 繰り返しを防止 */
  padding: 6em;
}

.bousai_goods .section7 .note_figure {
  display: flex;
  justify-content: center;
  align-items: baseline;
  text-align: left;
  line-height: 1.75em;
  position: relative;
}








.bousai_goods .section7 .note_figure li:nth-child(1){
  width: auto;
} 

.bousai_goods .section7 .note_figure li:nth-child(2){
  max-width: 200px;
  margin-left: 2em;
} 











/* ここから安否確認用のタブBOXを作成 */
.bousai_goods .section7 .tab_contents_box2 {
  margin-top: 3em;
  position: relative;
}

/* タブラベルを横並びに均等配置 */
.bousai_goods .section7 .tab_contents_box2 input {
  display: none; /* ラジオボタンは非表示 */
}

/* タブを横並びに */
.bousai_goods .section7 .tab_contents_box2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
  border-radius: 2em;
}

/* タブ共通 */
.bousai_goods .section7 .safety_tab_menu {
  flex: 1;
  background: var(--bousai_green);
  color: white;
  border-bottom: none;
  border-left: 4px solid white;   /* ← 全部のタブに左線 */
  border-right: 0;                /* 右は消す */
  padding: 1em 0;
  font-size: 1.6rem;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.1s ease;
  position: relative;
  z-index: 1;
}

.bousai_goods .section7 .safety_tab_menu:hover{
  background-color: var(--bousai_orange);
}

.bousai_goods .section7 .safety_tab_menu p{
  font-weight: 900;
}

/* 最初のタブだけ左線を二重にしないよう調整 */
.bousai_goods .section7 .safety_tab_menu:first-of-type {
  border-left: 4px solid transparent;
}

/* タブ内のリスト要素の余白をリセット */
.bousai_goods .section7 .safety_tab_menu ul,
.bousai_goods .section7 .safety_tab_menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}




/* 隣接部分の仕切り線 */
.bousai_goods .section7 .safety_tab_menu + .safety_tab_menu {
  border-left: 4px solid white;
}

/* 選択されたタブ */
.bousai_goods .section7 input:checked + .safety_tab_menu {
  background-color: white;
  border-bottom: none; /* ← 白線ではなく完全に消す */
  z-index: 2;
  color: var(--bousai_green);
}

/* コンテンツエリア */
.bousai_goods .section7 .bousai_tab_content {
  display: none;
  width: 100%;
  padding: unset;
  border-top: none;  /* ← 上線を消すことでタブと一体化 */
  position: relative;
  z-index: 1;
  background-color: white;
}

/* 選択時に表示 */
.bousai_goods .section7 #safety_tab_a:checked ~ #safety_tab_a_content,
.bousai_goods .section7 #safety_tab_b:checked ~ #safety_tab_b_content,
.bousai_goods .section7 #safety_tab_c:checked ~ #safety_tab_c_content {
  display: block;
}










.bousai_goods .section7 .bousai_tab_content .howto_wrapper > li:nth-child(2){
  padding: 0 3em;
}

.bousai_goods .section7 .bousai_tab_content .hosoku{
  padding: 1.5em 3em;
  text-align: left;
}




.bousai_goods .section7 .bousai_tab_content .service{
  padding: 4em 2em 2em 2em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  align-items: center; /* ← 縦方向中央揃え */
}



.bousai_goods .section7 .bousai_tab_content .hito_img{
  display: flex;
  align-items: end;
}

.bousai_goods .section7 .bousai_tab_content .hito_img > li:first-of-type{
  max-width: 150px;
}

.bousai_goods .section7 .bousai_tab_content .comment_wrapper{
  display: block;
}

/* 初期状態は非表示＆下に少しずらす */
.bousai_goods .section7 .bousai_tab_content .comment_wrapper li {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

/* 表示用クラスが付いたらフェードイン＋上に戻す */
.bousai_goods .section7 .bousai_tab_content .comment_wrapper li.show {
  opacity: 1;
  transform: translateY(0);
}

/* 1つ目は即表示 */
.bousai_goods .section7 .bousai_tab_content .comment_wrapper li.show:nth-child(1) {
  transition-delay: 0s;
}

/* 2つ目は1秒遅れて表示 */
.bousai_goods .section7 .bousai_tab_content .comment_wrapper li.show:nth-child(2) {
  transition-delay: 1s;
}



.bousai_goods .section7 .bousai_tab_content .text_wrapper{
  text-align: left;
  line-height: 1.5em;
}

.bousai_goods .section7 .bousai_tab_content .text_wrapper .check_list{
  margin-top: 1.5em;
}

.bousai_goods .section7 .bousai_tab_content .text_wrapper .check_list li {
  position: relative;
  padding-left: 1.25em; /* 左にスペースを作る */
}

.bousai_goods .section7 .bousai_tab_content .text_wrapper .check_list li::before {
  content: "";
  position: absolute;
  left: 0;  /* 左端に配置 */
  top: 50%;
  transform: translateY(-50%); /* 縦中央に配置 */
  width: 1em;
  height: 1em;
  background: url("../../images/systems/series/bousai_goods/check_list.svg") no-repeat center;
  background-size: contain;
}

.bousai_goods .section7 .bousai_tab_content .howto_contents{
  border: 5px solid var(--bousai_green);
  border-radius: 1em;
}

.bousai_goods .section7 .bousai_tab_content .howto_contents > li:last-of-type{
  padding: 0em 1.5em 1.5em 1.5em;
}



.bousai_goods .section7 .bousai_tab_content .howto_contents .title{
  display: block;
  background-color: var(--bousai_green);
  padding: 1em;
  color: white;
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .title::before{
  content: url("../../images/systems/series/bousai_goods/beginner_mark.svg"); /* ← 画像のパスを指定 */
  display: inline-block;                 /* インライン要素として表示 */
  width: 0.8em;                          /* 必要ならサイズ指定 */
  height: 1em;
  margin-right: 0.4em;                   /* テキストとの間隔 */
  vertical-align: bottom;                /* 文字の底辺に揃える */
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .text{
  margin: 1.75em auto 1em auto;
  display: flex;
  align-items: center;
  max-width: 250px;
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .text::before,
.bousai_goods .section7 .bousai_tab_content .howto_contents .text::after {
    border-top: 3px solid black;
    content: "";
    flex-grow: 1;
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .text::before {
    margin-right: 0.5em;
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .text::after {
    margin-left: 0.5em;
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .chart1,
.bousai_goods .section7 .bousai_tab_content .howto_contents .chart2{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* chart1 の共通スタイル */
.bousai_goods .section7 .bousai_tab_content .howto_contents .chart1 li,
.bousai_goods .section7 .bousai_tab_content .howto_contents .chart2 li{
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
  text-align: center;
  line-height: 1.25em;
}

/* 背景画像だけ個別指定 */
.bousai_goods .section7 .bousai_tab_content .howto_contents .chart1 li:nth-child(1) {
  background-image: url(../../images/systems/series/bousai_goods/arrow_blue1.svg);
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .chart1 li:nth-child(2) {
  background-image: url(../../images/systems/series/bousai_goods/arrow_blue2.svg);
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .chart1 li:nth-child(3) {
  background-image: url(../../images/systems/series/bousai_goods/arrow_blue3.svg);
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .chart1 li:nth-child(4) {
  background-image: url(../../images/systems/series/bousai_goods/arrow_blue4.svg);
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .chart2 li:nth-child(1) {
  background-image: url(../../images/systems/series/bousai_goods/arrow_yellow1.svg);
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .chart2 li:nth-child(2) {
  background-image: url(../../images/systems/series/bousai_goods/arrow_yellow2.svg);
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .chart2 li:nth-child(3) {
  background-image: url(../../images/systems/series/bousai_goods/arrow_yellow3.svg);
}

.bousai_goods .section7 .bousai_tab_content .howto_contents .chart2 li:nth-child(4) {
  background-image: url(../../images/systems/series/bousai_goods/arrow_yellow4.svg);
}

.bousai_goods .section7 .bousaichi_boxstyle3 {
  margin: 5em 0 2em 0;
}









.bousai_goods .section8 .band_text{
  padding: 1em 0;
  background-color: var(--bousai_turquoise);
  color: white;
  position: relative; /* ::before/::afterの基準にする */
}

/* 外側（オレンジの枠部分） */
.bousai_goods .section8 .band_text::before {
  content: "";
  position: absolute;
  left: 50%;                       /* 中央に配置 */
  bottom: -1.3em;                   /* ボックスの下に出す */
  transform: translateX(-50%);     /* 水平方向中央寄せ */
  border-style: solid;
  border-width: 80px 60px 0 60px;  /* 下向き三角形（上辺に色が付く） */
  border-color: var(--bousai_turquoise) transparent transparent transparent;
}

.bousai_goods .section8 .stock_text_wrapper{
  margin-top: 5em;
}

.bousai_goods .section8 .stock_text_wrapper li{
  margin-bottom: 0.5em;
}

.bousai_goods .section8 .stock_text_wrapper li:nth-child(2){
  margin-bottom: 0.3em;
  color: var(--bousai_green);
  font-weight: 900;
}

.bousai_goods .section8 .stock_img{
  max-width: 750px;
  margin: 0 auto 4em auto;
}

.bousai_goods .section8 .stock_column{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
  max-width: 800px;
}

.bousai_goods .section8 .stock_column > li{
  padding: 2.5em 1em;
}

.bousai_goods .section8 .stock_column > li:nth-child(1){
  background-color: #aaddf7;
}

.bousai_goods .section8 .stock_column > li:nth-child(2){
  background-color: var(--bousai_liteorange);
}

.bousai_goods .section8 .stock_column > li:nth-child(1) .text{
  background-color: var(--bousai_yellow);
  color: var(--bousai_brown);
}

.bousai_goods .section8 .stock_column > li:nth-child(2) .text{
  background-color: white;
  color: var(--bousai_brown);
}

.bousai_goods .section8 .stock_column > li .text{
  border-radius: 0.25em;
  padding: 0.5em 1em;
  font-weight: 900;
  line-height: 1.25em;
}


.bousai_goods .section8 .stock_column .column_contents {
  display: flex;
  flex-wrap: wrap;        /* 3個目を折り返す */
  align-items: center;    /* 高さ方向の中央揃え */
}

.bousai_goods .section8 .stock_column .column_contents > li:nth-child(1),
.bousai_goods .section8 .stock_column .column_contents > li:nth-child(2) {
  flex: 0 0 50%;          /* 横幅50%固定 */
  box-sizing: border-box;
  display: flex;          /* 中のテキストや要素を中央に寄せるなら */
  align-items: center;
}

.bousai_goods .section8 .stock_column .column_contents > li:nth-child(1){
  justify-content: right;
}

.bousai_goods .section8 .stock_column .column_contents > li:nth-child(2) {
  justify-content: flex-start; /* 画像だけ左揃えに変更 */
}

.bousai_goods .section8 .stock_column .column_contents > li:nth-child(3) {
  flex: 0 0 100%;         /* 横幅100%で改行 */
  box-sizing: border-box;
  line-height: 1.5em;
  margin-top: 1em;
}

.bousai_goods .section8 .stock_column .column_contents img{
  max-height: 120px;
}

.bousai_goods .section8 .band,
.bousai_goods .section10 .band{
  background-color: var(--bousai_beige);
  margin-top: 4em;
  padding: 4.5em 0;
}

.bousai_goods .section8 .bousaichi_boxstyle3,
.bousai_goods .section10 .bousaichi_boxstyle3{
  background-color: white;
  margin: 0;
  border: unset;
  align-items: center;
}










.bousai_goods .section9 .band_text{
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  padding: 1em 0;
}

.bousai_goods .section9 .binder{
  margin: 5em auto 3em auto;
  border: 8px solid black;
  padding: 6em 4em;
  max-width: 800px;
  position: relative;
}

.bousai_goods .section9 .binder::before{
  content: url(../../images/systems/series/bousai_goods/clip.svg);
  position: absolute;
  left: 50%;
  top: -1.5em;                 
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
}

.bousai_goods .section9 .binder .checklist{
  text-align: left;
  margin: 2em 0 3em 0;
}

.bousai_goods .section9 .binder .checklist li{
  border-top: 1px solid black;
  padding: 1em;
  position: relative;
  padding-left: 2em; /* ⬜︎分の余白を確保 */
  line-height: 1.5em;
}

.bousai_goods .section9 .binder .checklist li:last-of-type{
  border-bottom: 1px solid black;
}

.bousai_goods .section9 .binder .checklist li::before {
  content: "⬜︎"; /* 好きな記号に変更可能 */
  position: absolute;
  left: 0;
  top: 50%;                 /* 親要素の高さの50%位置 */
  transform: translateY(-50%); /* 自身の高さ分上にずらして中央揃え */
  font-size: 1.2em;         /* 大きさ調整（お好みで） */
  line-height: 1;           /* 行の高さに左右されないように */
}

.bousai_goods .section9 .blackBtn a{
  margin-bottom: 2.5em;
  background-color: var(--bousai_green);
}

.bousai_goods .bousai_goods_wrapper .section9 .link_btn{
  background-color: var(--bousai_green);
  margin: 1em auto 3em 0;
  display: block;
  width: 100%;
}

.bousai_goods .bousai_goods_wrapper .section9 .link_btn:hover{
  background-color: black;
  box-shadow: unset;
  color: white;
  min-width: 620px;
}

.bousai_goods .example_wrapper{
  padding: 4em 0;
  border-top: 4px solid var(--bousai_orange);
  background-color: var(--bousai_beige);
}

.bousai_goods .example_box{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
  line-height: 1.5em;
  align-items: center;
  justify-items: center; /* 横方向中央揃え ← 追加！ */
}



.bousai_goods .example_box .title{
  color: var(--bousai_brown);
  font-weight: 900;
  margin-bottom: 1em;
  line-height: 1.25em;
}

.bousai_goods .new_icon{
  top: -2em;
}


.bousai_goods .example_box li:nth-child(2){
  display: flex;                /* フレックスコンテナ化 */
  justify-content: center;      /* 左右中央揃え */
  align-items: center;          /* 上下中央揃え */
}

.bousai_goods .example_box .img_wrapper{
  max-width: 320px;
}


.bousai_goods .section10 .band_text{
  background-color: black;
  color: white;
  padding: 1em 0;
  font-weight: 200;
}

.bousai_goods .section10 .not_article{
  padding: 2em 0;
}

.bousai_goods .section10 .item_area{
  padding: 4em;
  overflow: hidden;
}

.bousai_goods .section10 .item_box{
  position: relative;
}












/* ここからスワイパーの設定 */
.bousai_goods .bousai_item_swiper {
  position: relative;
  overflow: unset;
  margin: 0 auto;
}


.bousai_goods .bousai_item_swiper .swiper-wrapper {
  padding: 0; /* 余計なパディングはリセット */
  margin: 0;
}

.bousai_goods .bousai_item_swiper .swiper-slide {
  box-sizing: border-box;
}

.bousai_goods .bousai_item_swiper .swiper-slide a:hover .image-box{
  background-color: var(--bousai_turquoise);
  color: white;
}


.bousai_goods .bousai-item-swiper-button-prev,
.bousai_goods .bousai-item-swiper-button-next {
  --scale: 1; /* 縮小用の変数だけ残す */

  position: absolute;
  top: 50%;
  width: 110px;
  height: 110px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;
  z-index: 1;

  transform: translateY(-50%) scale(var(--scale));
  transition: transform 0.3s ease;
}

/* 通常時の画像 */
.bousai_goods .bousai-item-swiper-button-prev {
  left: -55px;
  background-image: url("../../images/systems/series/bousai_goods/item_btn_posi_left.svg");
}

.bousai_goods .bousai-item-swiper-button-next {
  right: -55px;
  background-image: url("../../images/systems/series/bousai_goods/item_btn_posi_right.svg");
}

/* ホバー時：画像切り替えと縮小 */
.bousai_goods .bousai-item-swiper-button-prev:hover,
.bousai_goods .bousai-item-swiper-button-next:hover {
  --scale: 0.8; /* 80％に縮小 */
}

.bousai_goods .bousai-item-swiper-button-prev:hover {
  background-image: url("../../images/systems/series/bousai_goods/item_btn_nega_left.svg");
}

.bousai_goods .bousai-item-swiper-button-next:hover {
  background-image: url("../../images/systems/series/bousai_goods/item_btn_nega_right.svg");
}








.bousai_goods .section10{
  background-color: var(--bousai_liteorange);
  overflow: hidden;
}

.bousai_goods .section10 .item_list .image-box{
  background-color: var(--bousai_orange);
  border-radius: 1.5em;
  line-height: 1.5em;
  padding: 1.25em;
}

.bousai_goods .section10 .item_list .ttl{
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.25em;
}

.bousai_goods .section10 .item_list .thumbnail_image_box{
  margin-bottom: unset;
}

.bousai_goods .section10 .item_list .txt{
  margin-top: 1em;
  line-height: 1.5em;
  display: block;
  text-align: left;
}

.bousai_goods .section10 .band {
  background-color: var(--bousai_liteorange);
  margin-top: unset;
  padding-top: unset;
}

.bousai_goods .section10 .check_figure {
  display: none;
}

.bousai_goods .section10 .bousaichi_boxstyle3 .img_wrapper {
  margin-top: 2em;
}