@charset "UTF-8";
``

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


header {
  margin-top: 0;
}

body{
    text-align:center;
    margin: 0;
    padding: 0;

}


html, body {
  margin: 0;
  padding: 0;
}



h4 span{
  font-size: 20px;
}

h3 span{
  font-size: 30px;
}
h2 span{
  font-size: 40px;
}
h1 span{
  font-size: 80px;
}




/* ✅ 段落は block が読みやすく崩れにくい */
.txt_detail{
  text-align: left;
  display: block;          /* ←ここ変更 */
  margin-bottom: 20px;
}


.title_bg{
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 24px;
    font-size: clamp(15px, 2.2vw, 28px);
    line-height: 1.3;
}


@media (max-width: 900px){
  .title_bg{
    margin-top: 30px;
  }
}


.sup {
    font-size: 70%;
    vertical-align: top;
    position: relative;
    top: -0.1em;
}





/*　フォントの種類を指定するcss　*/


/*main--------------------------------------------------------------------------*/

#main {
    line-height: 0;
    width: 100%;
    max-width: 100%;
}

#main picture,
#main picture img {
  display: block;
}




/*top--------------------------------------------------------------------------*/

#top{
    margin-top: 60px;
    margin-bottom: 80px;
}


@media (max-width: 900px){
  #top{
    margin-bottom: 0;
  }
}

/* 安定化（おすすめ） */
*, *::before, *::after{ box-sizing: border-box; }
#top img, #top iframe, #top video{ max-width: 100%; }

/* タイトル */
#top .title_txt{ 
    font-size: clamp(20px, 3.5vw, 26px); 
    line-height: 1.6; 
    font-weight: 700;
    margin: 20px;
}


@media (min-width: 1024px){
  #top .title_txt{
    font-size: 26px;
    font-weight: bold;
  }
}


#top p{
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  margin: 20px;
}

@media (min-width: 1024px){
  #top p{
    font-size: 19px;
  }
}




/* 動画 */
#top .video-item{
  width: 100%;
  max-width: 70%;
  margin: 0 auto;
}

@media (max-width: 768px){
  #top .video-item{ max-width: 100%; }
}

#top .video{
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9){
  #top .video{ height: 0; padding-bottom: 56.25%; }
}

#top .video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/*comfortable--------------------------------------------------------------------------*/


#comfortabl picture,
#comfortabl picture img {
  display: block;
}

#comfortable .sup {
    font-size: 70%;
    vertical-align: top;
    position: relative;
    top: -0.1em;
}

#comfortable{
  width: 100%;
  padding: 20px 0;
  background-color: #e6e6e6;
}

/* --- レイアウト：2カラム（PC） --- */
#sec_point01 .l_flex{
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 20px;
}


/* ✅ 動画を16:9で維持して伸縮（.videoの中央寄せflexは不要） */
#comfortable .video{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 0px; /* 任意 */
}

@supports not (aspect-ratio: 16 / 9){
  #comfortable .video{
    height: 0;
    padding-bottom: 56.25%;
  }
}

#comfortable .video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- SP：縦積み（900px以下） --- */
@media (max-width: 900px){
  #sec_point01 .l_flex{
    flex-direction: column;
    align-items: stretch;
  }

  #comfortable .side_txt,
  #comfortable .video{
    width: auto; /* or unset */
    margin: 
  }
}




/* 基本（SP含む） */
#comfortable p{
  font-size: 16px;
  line-height: 1.9;
}

/* PC（1024px以上）で大きく */
@media (min-width: 1024px){
  #comfortable p{
    font-size: 18px; /* 19pxにしてもOK */
  }
}


#comfortable .title_box{
    font-size: 22px;
}

@media (max-width: 900px) {
  #comfortable .title_box {
    font-size: 18px
  }
}


/* PCでは改行しない */
#comfortable .br-comma{
  display: none;
}

/* 画面が小さい時だけ改行 */
@media (max-width: 1058px){
  #comfortable .br-comma{
    display: inline;
  }
}


/* セクション幅の統一（3つ共通） */
#comfortable .sec_point{
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;   /* ←ここが3つの表示幅の基準 */
  margin: 1em auto 50px;
  padding: 0 20px;          /* 必要ならここで統一（ズレの原因になるので） */
  text-align: left;    /* センターにしたい要素だけ個別指定 */
}

@media (max-width: 900px){
  #comfortable .sec_point{
    margin: 1em auto 10px;
  }
}

#comfortable .video{
  margin-left: 0;  /* 右寄せ */
  margin-right: 0; /* 中央寄せ（必要なら） */
}


@media (max-width: 480px){
  #comfortable .title_bg{
    font-size: 17px;
  }
}


#comfortable,
#comfortable *{
  box-sizing: border-box;
}


/* comfortable 　動画とテキストの比率*/
#comfortable .side_txt{ flex: 1 1 45%; min-width: 0; }
#comfortable .video{    flex: 1 1 55%; min-width: 0; }


#sec02{
  padding-top: 20px;

}


/* 既存：#comfortable .sec_point に padding: 0 20px; があるため */
@media (max-width: 900px) {
  #comfortable .sec_point {
    padding-left: 0;
    padding-right: 0;
  }
  #comfortable .video {
    border-radius: 0;         /* 角丸を消す（任意） */
    margin-left: 0;
    margin-right: 0;
  }
}

/*comfortable_変更部分--------------------------------------------------------------------------*/

#sec_point .video-item {
    width: 100%;
    max-width: 60%;
    margin: 20px auto;
}

@media (max-width: 768px){
  #sec_point .video-item{ max-width: 90%; }
}

/* ------------------------------------
  sec_point04 の外枠：inline-block/overflow:auto は外すと安定
------------------------------------ */
.point{
  position: relative;
  display: block;          /* ★変更：inline-block → block */
  margin: 20px auto 20px;
  max-width: 1600px;
  width: 100%;
  overflow: visible;       /* ★変更：auto → visible（横スクロール対策） */
  text-align: left;        /* ★変更：center → left（必要な箇所だけcenterにする） */
  padding: 0 20px;
}

/* ------------------------------------
  PC：2カラム（横並び）
------------------------------------ */
#sec_point .l_flex{
  display: flex;
  align-items: stretch;
  margin: 20px;
}

/* カード（.list）を2カラムに */
#comfortable .list{
  flex: 1 1 50%;           /* ★追加：2分割 */
  min-width: 0;            /* ★追加：はみ出し防止 */
  padding: 20px;
  box-shadow: none;        /* 任意 */
  margin: 0;
  background-color: #e6e6e6; 
}

/* ------------------------------------
  SP：1カラム（縦並び）
------------------------------------ */
@media (max-width: 768px){
  #sec_point .l_flex{
    flex-direction: column;
  }
  #comfortable .list{
    flex-basis: auto;
  }
}



/* ------------------------------------
  説明文：読みやすく（inline-block は幅が縮むので block 推奨）
------------------------------------ */
#comfortable .txt_detail{
  display: block;          /* ★変更：inline-block → block */
  text-align: left;
  margin: 0.6em 0 1em;
  padding: 0;              /* ★変更：カード内paddingがあるので不要なら0 */
  line-height: 1.8;
}

/* ------------------------------------
  画像：中央寄せ & はみ出し防止
------------------------------------ */
#sec_point .img img{
  display: block;
  width: min(100%, 520px); /* 任意：大きすぎ防止 */
  height: auto;
  margin: 0 auto;          /* ★中央寄せ */
}


/* 基本（SP含む） */
#comfortable p{
  font-size: 16px;
  line-height: 1.9;
}

/* PC（1024px以上）で大きく */
@media (min-width: 1024px){
  #comfortable p{
    font-size: 18px; /* 19pxにしてもOK */
  }
}


@media (max-width: 900px) {
  #comfortable .point {
    padding-left: 0;
    padding-right: 0;
  }
  #comfortable .video {
    border-radius: 0;         /* 角丸を消す（任意） */
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 900px) {
  #comfortable .list{
    padding-left: 0;
    padding-right: 0;
  }
}


/* スマホ（～768px）：縦並び時に要素を中央へ */
@media (max-width: 768px){
  #sec_point .l_flex{
    flex-direction: column;
    align-items: center;              /* ★縦並び時、子要素を中央に */
  }

  /* カード（.list）自体を中央に＆読みやすい最大幅を設定 */
  #comfortable .list{
    flex-basis: auto;
    width: 100%;                      /* 画面幅に追従しつつ */
    max-width: 640px;                 /* ★上限を決めて中央感を出す */
    margin-inline: auto;              /* ★中央寄せ */
  }

  /* タイトルを中央に見せたい場合（任意） */
  #sec_point .title_box{
    text-align: center;
  }

  /* 画像はすでに margin: 0 auto; で中央。但し親側の余白も整えると安定 */
  #sec_point .img{
    width: 100%;
  }
}







/*comfortable_2--------------------------------------------------------------------------*/


#comfortable_2{
  width: 100%;
  padding: 20px;
}

/* ------------------------------------
  sec_point04 の外枠：inline-block/overflow:auto は外すと安定
------------------------------------ */
#sec_point04{
  position: relative;
  display: block;          /* ★変更：inline-block → block */
  margin: 2em auto 20px;
  max-width: 1600px;
  width: 100%;
  overflow: visible;       /* ★変更：auto → visible（横スクロール対策） */
  text-align: left;        /* ★変更：center → left（必要な箇所だけcenterにする） */
}

/* ------------------------------------
  PC：2カラム（横並び）
------------------------------------ */
#sec_point04 .l_flex{
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 3vw, 40px);  /* ★追加：間隔 */
  margin: 20px;
}

/* カード（.list）を2カラムに */
#comfortable_2 .list{
  flex: 1 1 50%;           /* ★追加：2分割 */
  min-width: 0;            /* ★追加：はみ出し防止 */
  background: white;
  padding: 0;
  box-shadow: none;        /* 任意 */
  margin: 0;
}

/* ------------------------------------
  SP：1カラム（縦並び）
------------------------------------ */
@media (max-width: 768px){
  #sec_point04 .l_flex{
    flex-direction: column;
  }
  #comfortable_2 .list{
    flex-basis: auto;
  }
}


#sec_point04 .title_box{
  font-size: 22px;
}

@media (max-width: 900px) {
  #sec_point04 .title_box {
    font-size: 18px
  }
}


/* ------------------------------------
  説明文：読みやすく（inline-block は幅が縮むので block 推奨）
------------------------------------ */
#comfortable_2 .txt_detail{
  display: block;          /* ★変更：inline-block → block */
  text-align: left;
  margin: 0.6em 0 1em;
  padding: 0;              /* ★変更：カード内paddingがあるので不要なら0 */
  line-height: 1.8;
}

/* ------------------------------------
  画像：中央寄せ & はみ出し防止
------------------------------------ */
#sec_point04 .img img{
  display: block;
  width: min(100%, 520px); /* 任意：大きすぎ防止 */
  height: auto;
  margin: 0 auto;          /* ★中央寄せ */
}


/* 基本（SP含む） */
#comfortable_2 p{
  font-size: 16px;
  line-height: 1.9;
}

/* PC（1024px以上）で大きく */
@media (min-width: 1024px){
  #comfortable_2 p{
    font-size: 18px; /* 19pxにしてもOK */
  }
}



@media (max-width: 900px) {
  #comfortable_2 {
    padding-left: 0;
    padding-right: 0;
  }
}




/* スマホ（～768px）：縦並び時に要素を中央へ */
@media (max-width: 768px){
  #sec_point04 .l_flex{
    flex-direction: column;
    align-items: center;              /* ★縦並び時、子要素を中央に */
  }

  /* カード（.list）自体を中央に＆読みやすい最大幅を設定 */
  #comfortable_2 .list{
    flex-basis: auto;
    width: 100%;                      /* 画面幅に追従しつつ */
    max-width: 640px;                 /* ★上限を決めて中央感を出す */
    margin-inline: auto;              /* ★中央寄せ */
  }

  /* タイトルを中央に見せたい場合（任意） */
  #sec_point04 .title_box{
    text-align: center;
  }

  /* 画像はすでに margin: 0 auto; で中央。但し親側の余白も整えると安定 */
  #sec_point04 .img{
    width: 100%;
  }
}

/*incar--------------------------------------------------------------------------*/


/* =====================================
  IN CAR 全体
===================================== */
#incar{
  width: 100%;
  padding: 20px 0 30px 0;
  background-color: #e6e6e6;
  line-height: 0;
}

/* =====================================
  sec_box：IDではなく class を使う（重要）
===================================== */
#incar .sec_box{
  position: relative;
  max-width: 1600px;
  width: 100%;
  margin: 2em auto 20px;
  padding: 0 20px;
}

/* =====================================
  2カラム：PC
===================================== */
#incar .l_flex,
#incar .l_flex_reverse{
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 20px;
}



/* カラム比率（PCで安定） */
#incar .side_txt{
  flex: 1 1 55%;
  min-width: 0;
  text-align: center; /* お好み：見出し中央にしたいならOK */
  background: transparent; /* #DDDDDD の上なので不要 */
}

#incar .video{
  flex: 1 1 45%;
  min-width: 0;
}



/* =====================================
  動画：16:9レスポンシブ（iframe対策）
  ※ここが最重要
===================================== */
#incar .video{
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 0px; /* 任意 */
}

/* 古い環境向けフォールバック */
@supports not (aspect-ratio: 16 / 9){
  #incar .video{
    height: 0;
    padding-bottom: 56.25%;
  }
}

#incar .video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =====================================
  本文（今のままでもOKだが、段落はblockが安定）
===================================== */
#incar .txt_detail{
  inline-block: block;       /* inline-block → block 推奨（幅が縮まない） */
  text-align: left;
  margin: 0;
  padding: 1em 0;
  color: black;
}

/* =====================================
  リスト：点を消して読みやすく
===================================== */
#incar ul{
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
  text-align: left;
}

#incar li{
  margin: 0.7em 0;
  line-height: 1.8;
}

/* ulの中にpがあるとHTML的に不正なので、見た目だけ整えるならこれ */
#incar ul p{
  margin: 0 0 .5em;
}

#incar ul{
  padding: 0;
  margin: 0;
}

#incar li{
  margin: 0.2em 0;
}

/* =====================================
  SP：縦積み（1カラム）
===================================== */
@media (max-width: 900px){
  #incar .l_flex,
  #incar .l_flex_reverse{
    flex-direction: column;
    align-items: stretch;
  }


 /* l_flex_reverse だけ order で順序を指定 */
  #incar .l_flex_reverse .side_txt{
    order: 1;  /* テキストを上へ */
  }
  #incar .l_flex_reverse .video{
    order: 2;  /* 動画を下へ */
  }


  #incar .side_txt,
  #incar .video{
    width: 100%;
  }
}

/* =====================================
  タブレット：文字ではなく “全体” を大きく見せる
  768〜1100px
===================================== */
@media (min-width: 901px) and (max-width: 1100px){
  /* セクション外側の余白UP＝全体が大きく見える */
  #incar{
    padding: 32px;
  }

  /* コンテンツ幅を広げる（見え面積UP） */
  #incar .sec_box{
    max-width: 92%;
  }

  /* カラム間の余白UP（窮屈さ解消） */
  #incar .l_flex,
  #incar .l_flex_reverse{
    gap: 36px;
  }

  /* テキストブロックに余白を足して“面積”を増やす */
  #incar .side_txt{
    padding: 18px;
  }
}
``

/* 逆並び */
#incar .l_flex_reverse{
  flex-direction: row-reverse;
}

#incar .title_box{
    font-size: 22px;
}

@media (max-width: 900px) {
  #incar .title_box {
    font-size: 18px
  }
}


/* PCでは改行しない */
#incar .br-comma{
  display: none;
}

/* 画面が小さい時だけ改行 */
@media (max-width: 1058px){
  #incar .br-comma{
    display: inline;
  }
}


/* incar */
#incar .side_txt{ flex: 1 1 45%; min-width: 0; }
#incar .video{    flex: 1 1 55%; min-width: 0; }

/* 基本（SP含む） */
#incar p{
  font-size: 16px;
  line-height: 1.9;
}

/* PC（1024px以上）で大きく */
@media (min-width: 1024px){
  #incar p{
    font-size: 18px; /* 19pxにしてもOK */
  }
}

@media (max-width: 900px) {
  #incar .sec_box {
    padding-left: 0;
    padding-right: 0;
  }
  #incar .video {
    border-radius: 0;         /* 角丸を消す（任意） */
    margin-left: 0;
    margin-right: 0;
  }
}




/*safety--------------------------------------------------------------------------*/

#safety{
  width: 100%;
  padding: 20px;
  padding-top: 40px;
  margin-bottom: 40px;
}

/* PCでは改行しない */
#safety .br-comma{
  display: none;
}

/* 画面が小さい時だけ改行 */
@media (max-width: 1058px){
  #safety .br-comma{
    display: inline;
  }
}

/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#title_box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
    max-width: 1600px;
    width: 100%;
    -webkit-box-pack: justify;
    justify-content: space-between;
}


/* カードレイアウト内の画像を幅いっぱいに表示 */
#title_box img {
    display: block;
    max-width: 100%;
    height: auto;
}

.list-figure {
    margin: 0;
    padding: 0;
}


/* カードレイアウトを1カラムで配置 */
.list {
    margin: 0.5em auto;
    padding: 0;
    width: 96%;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

#safety .slick-prev:before,
#safety .slick-next:before {
  font-size: 32px;
  color: #e6e6e6;
}


/* =========================================
  SAFETY: #title_box と .list をスコープして安定化
========================================= */

/* #title_box は他セクションにもあり得るので #safety で限定 */
#safety #title_box{
  display: flex;
  flex-wrap: wrap;                 /* 画面が狭い時に折り返せる */
  gap: clamp(12px, 2vw, 24px);     /* カード間の余白 */
  justify-content: space-between;
  align-items: stretch;
}

/* カード（.list）を flex で横並びにする */
#safety .list{
  width: auto;                     /* ← これが重要（96%を解除） */
  flex: 1 1 calc(33.333% - 24px);      /* PCは4枚並びを狙う */
  margin: 0;                       /* flexのgapで余白を作るので */
  padding: 0;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  min-width: 220px;                /* 小さすぎ防止（任意） */
}

/* 画像は中央・はみ出し防止 */
#safety #title_box .img img,
#safety #title_box img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}




/* =========================
  SAFETY（常にslick前提）
========================= */


/* slick化後は #title_box を flex にしない（slickが並べるため） */
#safety #title_box{
  display: block;           /* ← flex を上書き */
  max-width: 1600px;
  width: 100%;
  margin: 2em auto 20px;
  position: relative;
}

/* slickのトラックを縦ストレッチ（カード高さが揃いやすい） */
#safety #title_box .slick-track{
  display: flex;
}

#safety #title_box .slick-slide{
  height: auto;             /* 高さ固定を避ける */
}

#safety #title_box .slick-slide > div{
  height: 100%;
}

/* 各カード（スライドの中身） */
#safety .list{
  width: auto;              /* 96% を解除（重要） */
  margin: 0;                /* スライド内はslick側で間隔管理 */
  padding: 0;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);

  /* スライド内でカードを“フルハイト”に */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 画像 */
#safety #title_box img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 説明文 */
#safety .txt_detail{
  margin: 0;
  padding: 1em;
  color: #818181;
  text-align: left;
  line-height: 1.8;     /* いまの値に合7行分（数字は調整） */
  min-height: calc(1.8em * 8);  /* ★8行分（数字は調整） */
}

/* slick：左右の余白（スライド間隔） */
#safety #title_box .slick-slide{
  padding: 0 12px;          /* ←スライド同士の間隔 */
  box-sizing: border-box;
}

/* 矢印 */
#safety .slick-prev:before,
#safety .slick-next:before{
  font-size: 32px;
  color: #DDDDDD;
}

/* 矢印の位置（必要なら調整） */
#safety .slick-prev{ left: -10px; z-index: 2; }
#safety .slick-next{ right: -10px; z-index: 2; }

/* ドット（使うなら） */
#safety .slick-dots{
  bottom: -30px;
}
#safety .slick-dots li button:before{
  color: #999;
}
#safety .slick-dots li.slick-active button:before{
  color: #333;
}

/* タブレットで“全体を大きく見せる”＝余白を増やす */
@media (min-width: 768px) and (max-width: 1100px){
  #safety{
    padding: 32px;
  }
  #safety #title_box{
    max-width: 92%;
  }
  #safety #title_box .slick-slide{
    padding: 0 16px;
  }
}

/* SP */
@media (max-width: 767px){
  #safety #title_box{
    max-width: 100%;
  }
  #safety #title_box .slick-slide{
    padding: 0 10px;
  }
}

/* =========================================
  レスポンシブ：タブレットで“全体”を大きく見せつつ枚数調整
========================================= */

/* タブレット：2列にしてカードを大きく見せる（おすすめ） */
@media (min-width: 768px) and (max-width: 1100px){
  #safety{
    padding: 32px;                 /* 全体の面積をUP */
  }
  #safety #title_box{
    max-width: 92%;                /* コンテンツの見え面積をUP */
    gap: 28px;
  }
  #safety .list{
    flex: 1 1 calc(50% - 28px);    /* 2列にして“カードを大きく” */
  }
}

/* スマホ：1列 */
@media (max-width: 767px){
  #safety #title_box{
    flex-direction: column;
  }
  #safety .list{
    flex: 1 1 auto;
  }
}





/*usefulfunction--------------------------------------------------------------------------*/

#usefulfunction{
  width: 100%;
    min-height: 1px;         /* これで背景が出ることが多い */
    overflow: hidden;        /* float対策にもなる */
    background: #e6e6e6;
    padding: 20 0 60;
    box-sizing: border-box;
    
}

/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#listlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
    max-width: 1600px;
    width: 100%;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 20px;
}


/* カードレイアウト内の画像を幅いっぱいに表示 */
#listlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}



#usefulfunction .slick-prev:before,
#usefulfunction .slick-next:before {
  font-size: 32px;
  color: #AAAAAA;
}
.slick-prev {
  z-index: 1;
  left: 1px;
}
.slick-next {
  z-index: 1;
  right: 15px;
}
.slick-dots {
  bottom: 0px;
}
.slick-dots li button::before {
  color: #fff;
}


/* =========================================
  USEFULFUNCTION：SAFETYと同じ（常にslick）仕様
========================================= */

/* slick運用時はラッパーをflexにしない（slickが並べる） */
#usefulfunction #listlayout-wrap{
  display: block;                 /* ← flex を上書き */
  position: relative;
  max-width: 1600px;
  width: 100%;
  margin: 2em auto 20px;
  padding-top: ;
}

/* 高さのガタつきを抑える（SAFETYと同じ） */
#usefulfunction #listlayout-wrap .slick-track{
  display: flex;
}
#usefulfunction #listlayout-wrap .slick-slide{
  height: auto;
  padding: 0 14px;                /* ← スライド間隔（SAFETY同様） */
  box-sizing: border-box;
}
#usefulfunction #listlayout-wrap .slick-slide > div{
  height: 100%;
}

/* カード（角丸なし／幅固定解除） */
#usefulfunction .list{
  width: auto;                    /* ← 96% を打ち消す（重要） */
  margin: 0;                      /* 余白はslick-slideで作る */
  padding: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  border-radius: 0;               /* ← 角を丸めない（SAFETY同様） */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 画像：中央 */
#usefulfunction #listlayout-wrap img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 説明文：SAFETYと同じノリ */
#usefulfunction .txt_detail{
  margin: 0;
  padding: 1em;
  color: #818181;
  line-height: 1.8;
  text-align: left;
  min-height: calc(1.8em * 8);  /* ★8行分（数字は調整） */
}

/* 矢印（usefulfunction内だけに効かせる） */
#usefulfunction .slick-prev,
#usefulfunction .slick-next{
  z-index: 2;
}
#usefulfunction .slick-prev{ left: 6px; }
#usefulfunction .slick-next{ right: 6px; }

#usefulfunction .slick-prev:before,
#usefulfunction .slick-next:before{
  font-size: 32px;
  color: #AAAAAA;
}

/* ドット（usefulfunction内だけ） */
#usefulfunction .slick-dots{
  bottom: -40px;                   /* 0だと被りやすいので少し下げる */
}
#usefulfunction .slick-dots li button:before{
  color: #fff;
}

/* タブレット：文字ではなく“全体”を大きく（SAFETYと同じ考え方） */
@media (min-width: 768px) and (max-width: 1100px){
  #usefulfunction{
    padding: 32px;
  }
  #usefulfunction #listlayout-wrap{
    max-width: 92%;
  }
  #usefulfunction #listlayout-wrap .slick-slide{
    padding: 0 16px;
  }
}

/* スマホ：ガター少し詰める */
@media (max-width: 767px){
  #usefulfunction #listlayout-wrap .slick-slide{
    padding: 0 10px;
  }
}


#usefulfunction{
  background: #e6e6e6;
  padding: 20px;
  padding-bottom: 80px;
  padding-top: 40px;
}



/*取り付けについて------------------------------------------------------------------*/

/*簡単、がっちり取り付ける------------------------------------------------------------*/


#isofix .title_box{
    font-size: 22px;
}

@media (max-width: 900px) {
  #isofix .title_box {
    font-size: 18px
  }
}





/* =====================================
  sec_box：IDではなく class を使う（重要）
===================================== */
#installation .sec_box{
  position: relative;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto 20px;
  padding:0 20px
}

/* =====================================
  2カラム：PC
===================================== */
#installation .l_flex,
#installation .l_flex_reverse{
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 20px;
}



/* カラム比率（PCで安定） */
#installation .side_txt{
  flex: 1 1 55%;
  min-width: 0;
  text-align: center; /* お好み：見出し中央にしたいならOK */
  background: transparent; /* #DDDDDD の上なので不要 */
}

#installation .video{
  flex: 1 1 45%;
  min-width: 0;
}

#installation .side_txt img{
  width: 70%;
}

/* =====================================
  動画：16:9レスポンシブ（iframe対策）
  ※ここが最重要
===================================== */
#installation .video{
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 0px; /* 任意 */
}

/* 古い環境向けフォールバック */
@supports not (aspect-ratio: 16 / 9){
  #installation .video{
    height: 0;
    padding-bottom: 56.25%;
  }
}

#installation .video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =====================================
  本文（今のままでもOKだが、段落はblockが安定）
===================================== */
#installation .txt_detail{
  display: block;       /* inline-block → block 推奨（幅が縮まない） */
  text-align: left;
  margin: 0;
  padding: 1em 0;
  color: black;
}

/* =====================================
  リスト：点を消して読みやすく
===================================== */
#isofix ul{
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
  text-align: left;
}

#isofix li{
  margin: 0.7em 0;
  line-height: 1.8;
}

/* ulの中にpがあるとHTML的に不正なので、見た目だけ整えるならこれ */
#isofix ul p{
  margin: 0 0 .5em;
}

#isofix ul{
  padding: 0;
  margin: 0;
}

#isofix li{
  margin: 0.2em 0;
}

/* =====================================
  SP：縦積み（1カラム）
===================================== */
@media (max-width: 900px){
  #installation .l_flex,
  #installation .l_flex_reverse{
    flex-direction: column;
    align-items: stretch;
  }

  #installation .side_txt,
  #installation .video{
    width: 100%;
  }
}

/* =====================================
  タブレット：文字ではなく “全体” を大きく見せる
  768〜1100px
===================================== */
@media (min-width: 901px) and (max-width: 1100px){
  /* セクション外側の余白UP＝全体が大きく見える */
  #installation{
    padding: 32px;
  }

  /* コンテンツ幅を広げる（見え面積UP） */
  #installation .sec_box{
    max-width: 92%;
  }

  /* カラム間の余白UP（窮屈さ解消） */
  #installation .l_flex,
  #installation .l_flex_reverse{
    gap: 36px;
  }

  /* テキストブロックに余白を足して“面積”を増やす */
  #installation .side_txt{
    padding: 18px;
  }
}


/* 逆並び */
#installation .l_flex_reverse{
  flex-direction: row-reverse;
}


/* installation 動画とテキストの比率*/
#installation .side_txt{ flex: 1 1 45%; min-width: 0; }
#installation .video{    flex: 1 1 55%; min-width: 0; }

/* 基本（SP含む） */
#installation p{
  font-size: 16px;
  line-height: 1.9;
}

/* PC（1024px以上）で大きく */
@media (min-width: 1024px){
  #installation p{
    font-size: 18px; /* 19pxにしてもOK */
  }
}

/* 基本（SP含む） */
#installation li{
  font-size: 16px;
  line-height: 1.9;
}

/* PC（1024px以上）で大きく */
@media (min-width: 1024px){
  #installation li{
    font-size: 18px; /* 19pxにしてもOK */
  }
}



/* li 全体のベース行間（本文の読みやすさを担保） */
#isofix li{
  line-height: 1.8;      /* 本文の既定行間 */
  margin: 0;             /* 項目間の余白は後述でまとめて付与 */
  padding: 0;
}

/* 見出し（太字）と説明の間を“詰める” */
#isofix li b{
  display: block;        /* 改行を保証 */
  margin-bottom: 0.15em; /* ← ここで“詰める”。0.1〜0.25emの範囲で微調整 */
  line-height: 1.6;      /* 見出し自体はやや詰め気味（任意） */
}

/* 説明はやや詰めた行間に */
#isofix li .li-desc{
  display: block;        /* 改行を保証 */
  line-height: 1.5;      /* ← 非太字の本文を詰める。1.45〜1.6で好みに調整 */
}

/* li と li の間に余白を付ける（項目間の行間） */
#isofix ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;        /* 既定のブロックレイアウト */
}

/* 項目間の“間”だけを広げる：最後の項目は余白なし */
#isofix ul > li{
  margin: 0 0 1.5em;     /* ← 項目間の間隔。0.6〜1.0emで調整可 */
}
#isofix ul > li:last-child{
  margin-bottom: 0;      /* 末尾の余白は消す */
}

@media (max-width: 900px) {
  #installation .sec_box {
    padding-left: 0;
    padding-right: 0;
  }
  #installation .video {
    border-radius: 0;         /* 角丸を消す（任意） */
    margin-left: 0;
    margin-right: 0;
  }
}



/*車のシートに合わせて選べる、2種類の取り付け方法------------------------------------------------------------*/


#installation{
  display: inline-block;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.installation{
  width: 100%;
  padding: 20px;
  display: block;
  justify-content: center;
  box-sizing: border-box;
}

.img_box {
  display: flex;
  justify-content: center;
  width: 100%;
}

.img_box img{
  display: block;
  width: 50%;
  height: auto;
}

.txt_p{
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
}


.installation h4,
.installation > p {
  text-align: left;
}


#installation .title_bg{
  padding: 30px;
}

@media (max-width: 900px) {
  #installation .title_bg{
  padding: 30px 20px;
  }
}


.installation h4{
  font-size: 25px;
  padding-top: 20px;
  line-height: 1.2;   /* 見出しの行間を詰める */
}

@media (max-width: 900px) {
  .installation h4 {
  font-size: 18px;
  }
}



.installation > p {
  line-height: 1.4;   /* 説明文の行間をやや詰める */
  margin-top: 0;  
}

.img_box2{
    display: block;
    justify-content: center;
    width: 100%;
}

.img_box2 img{
  display: flex;
  width: 100%;
  height: auto;
}
  

.installation ul{
  list-style: disc;
  display: block;
  text-align: left;
  padding-left: 1.5em;   /* 黒丸の位置を自然に */
  margin: 0;

}

/* PCでは改行しない */
#installation .br-comma{
  display: none;
}

/* 画面が小さい時だけ改行 */
@media (max-width: 1058px){
  #installation .br-comma{
    display: inline;
  }
}


/* スマホ：img_boxの画像を縦並びにする */
@media (max-width: 768px){
  .img_box{
    flex-direction: column;    /* 横 → 縦 */
    align-items: center;       /* 中央寄せ（任意） */
    gap: 12px;
  }
  .img_box img{
    width: 100%;               /* 1枚を横幅いっぱいに */
    max-width: 520px;          /* 大きすぎ防止（任意） */
  }

  /* img_box2は元々縦なのでそのままでOK（念のため整えるなら） */
  .img_box2 img{
    width: 100%;
    max-width: 520px;          /* 任意 */
    margin-left: auto;
    margin-right: auto;
  }
}



/* スマホ：img_box2の画像を幅いっぱいにする */
@media (max-width: 768px){
  #installation .img_box2 img{
    width: 100%;
    max-width: none;     /* ★これが重要：上限を解除 */
    margin-left: 0;
    margin-right: 0;     /* 幅いっぱいにするため中央寄せマージンも解除 */
  }
}


/* PC表示のときだけ installation 全体をコンパクトに */
@media (min-width: 1024px){
  #installation .detail_box{
    max-width: 1200px;  /* 1600 → 1200 などに縮める */
    margin: 0 auto;
    gap: 20px;          /* 余白も少し詰める（任意） */
  }
}



#installation .installation ul {
  list-style: disc inside; /* マーカーを内容側に描く（はみ出さない） */
  padding-left: 0.8em;     /* inside のときは余白少なめでOK */
}



/*あとから追加------------------------------------------------------------------*/


.title_box {
  /* 余白：スマホでは小さく、画面が広いほど増える（上限あり） */
  padding: clamp(8px, 1.5vw, 12px) clamp(12px, 4vw, 30px);

  /* 左右マージンも可変に（狭い画面で詰める） */
  margin: clamp(8px, 2vw, 10px) clamp(12px, 4vw, 30px);

  background-color: #000;
  color: #fff;
  text-align: center;

  /* あると嬉しい：長いタイトルがはみ出しにくい */
  word-break: break-word;
  line-height: 1.4;
}



/* スマホ */
@media (max-width: 500px) {
  .title_box {
    font-size: 1rem;
  }
}





/* PC とタブレットのみ適用（スマホは除外） */
@media (min-width: 901px){
  /* comfortable と incar と installation の両方に同じマージンを付与 */
  #comfortable .side_txt,
  #comfortable .video,
  #incar .side_txt,
  #incar .video,
  #installation .side_txt,
  #installation .video{
    /* 上下8px、左右16px（お好みで） */
    margin-block: 8px;
    margin-inline: 16px;
  }
}


  /* スマホでは改行する */
  .br-comma {
    display: inline;
  }
}



/*コンテンツ------------------------------------------------------------------*/