@charset "UTF-8";

/* 既存スタイルをリセット */
#section01 { background: #fff; color: #222; }
#section01 .product_head01 { margin-bottom: 50px; }
#section01 .product_head01 h2 { all: unset; display: block; }
#section01 .product_head01 h2::before { content: none; }
#section01 .product_head01 h2.tltLv-1 { margin-bottom: 20px; padding: 10px 20px; background: #ee3844; font-size: 36px; line-height: 135%; font-weight: 600; color: #fff;}
#section01 .product_head01 h2 + p { margin: 0 60px; }

#section01 .productSection { margin: 0 60px 50px 60px; }
#section01 .productSection h3 { margin-bottom: 20px; padding-bottom: 10px; color: #ee3844; font-weight: 600; font-size: 26px; border-bottom: 1px solid #ee3844; }
#section01 .productSection ul { all: revert; padding-left: 1.5em;}
#section01 .productSection ul li { all: revert; padding-bottom: 8px; line-height: 135%; }

#section01 #productTab { margin-bottom: 50px; padding: 0 60px; position: relative; }
#section01 #productTab .resp-tabs-list li { padding: 0; align-items: flex-end; margin-right: 1px; }
#section01 #productTab .resp-tabs-list li div { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 24px; background: #f5f5f5; color: #ee3844; border: 1px solid #ee3844; border-bottom: none; border-top-left-radius: 8px; border-top-right-radius: 8px; cursor: pointer; font-weight: bold; position: relative; z-index: 1; margin: 0!important;}
#section01 #productTab .resp-tabs-list li.resp-tab-active div { height: 54px; background: #ee3844!important;  color: #fff!important;  border: 1px solid #ee3844!important;  border-bottom: none!important;  z-index: 3; }
#section01 #productTab .resp-tabs-list li span { padding: 4px 0 8px; border-bottom: 1px solid #ee3844; font-size: 16px; }
#section01 #productTab .resp-tabs-list li.resp-tab-active span { border: none; }

#section01 #productTab .resp-tabs-container { padding: 30px; background: #F5F5F5; margin-top: -1px!important; border: 1px solid #ee3844!important; z-index: 1; }
#section01 #productTab .resp-tabs-container .flex { display: table; width: 100%; }
#section01 #productTab .resp-tabs-container .flex .detail { display: table-cell; width: 648px; padding-right: 48px; vertical-align: top; }
#section01 #productTab .resp-tabs-container .flex .image { display: table-cell; width: 340px; vertical-align: top; }
#section01 #productTab .resp-tabs-container .flex .image img { width: 340px; }
#section01 #productTab .resp-tabs-container .imageSP { display: none; }

/* 内部コンテンツの簡易スタイリング */
#section01 .resp-tabs-container h4 { font-size: 22px; margin: 0 0 20px 0; font-weight: bold; line-height: 1.5; }
#section01 .resp-tabs-container ul { all: revert; padding-left: 1.5em; }
#section01 .resp-tabs-container li { all: revert; padding-bottom: 8px; line-height: 1.5; }
#section01 .resp-tabs-container table { width: 100%; margin: 0 0 25px 0; border-collapse: collapse; text-align: center; background: #fff; }
#section01 .resp-tabs-container th { background: #b0b0b0; padding: 8px; font-size: 18px; border: 1px solid #ddd; width: 20%; color: #222;  }
#section01 .resp-tabs-container td { padding: 12px 8px; font-size: 18px; border: 1px solid #ddd;  width: 20%;}
#section01 .resp-tabs-container td.name { background: #FDE8E9; }
#section01 .resp-tabs-container td.td-dl { background: #FDE8E9; padding: 0; vertical-align: middle; text-align: center; }
#section01 .resp-tabs-container td.td-dl img { width: 20px; height: auto; }
#section01 .list-dl { padding: 8px 50px 8px 20px; background: #ee3844 url(/en/asset/image/common/icon_download_w.png); background-position: right 20px center; background-repeat: no-repeat; background-size: 20px auto; text-decoration: none; font-size: 16px; color: #fff; border-radius: 8px; }
#section01 .list-dl:hover { background: #d5080f url(/en/asset/image/common/icon_download_w.png); background-position: right 20px center;  background-size: 20px auto; background-repeat: no-repeat; }
#section01 .tab03 .flex { margin: 0; }

/* ==========================================================================
   PC用スタイル (PC: 768px~) -> 横並びタブ
   ========================================================================== */
@media (min-width: 768px) {
#section01 .resp-accordion { display: none; }
  #section01 .resp-tabs-list { 
    display: flex; 
    list-style: none; 
    margin: 0!important; 
    padding: 0; 
    gap: 0px;              /* ★お好みでタブ同士の隙間を調整（0でも可） */
    align-items: flex-end; /* ★追記：これで高低差があっても下がピタッと揃います */
  }
  #section01 .resp-tabs-list li:hover { background: #f5f5f5!important; color: #ee3844; }
  #section01 .resp-tabs-container .tab01,
  #section01 .resp-tabs-container .tab02,
  #section01 .resp-tabs-container .tab03 { display: none; }
  #section01 .resp-tabs-container > div.resp-tab-content-active { display: block; }
}

/* ==========================================================================
   スマートフォン用 (SP: ~767px) -> アコーディオン（スムーズ開閉）& 1カラム化
   ========================================================================== */
@media (max-width: 767px) {
  /* 1. 全体の余白・見出しをスマホ用に最適化 */
  #section01 .product_head01 { margin-bottom: 30px; }
  #section01 .product_head01 h2.tltLv-1 { margin: 0 0.5vw 3.5vw 0.5vw; font-size: 5vw; padding: 10px; }
  #section01 .product_head01 h2 + p { margin: 0 15px; font-size: 14px; }
  #section01 .productSection { margin: 0 15px 30px 15px; }
  #section01 .productSection h3 { font-size: 18px; }
  #section01 #productTab { padding: 0 15px; margin-bottom: 30px; }

  /* 2. タブのヘッダーは非表示（アコーディオン化するため） */
  .resp-tabs-list {
    display: none;
  }
  #section01 .resp-tabs-container { border-radius: 0px!important; overflow: hidden; padding: 0 !important; }
  #section01 .resp-tabs-container .image { display: none; }
  #section01 .resp-tabs-container .imageSP { display: block!important; padding: 1vw 1vw 2vw 1vw; }
  #section01 .tab02 + h2.resp-accordion { border-bottom: none!important; }
  /* 3. アコーディオンのコンテンツ格納パネル（JS連動のスムーズ開閉用） */
  .resp-tabs-container > div {
    display: block; /* 高さと内包要素の制御のためblockに戻す */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* スムーズに変形させる transition */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out; 
  }

  /* パネル内のラッパー（余白用） */
  .resp-content-inner {
    padding: 20px 12px;
    background: #F5F5F5;
    border-bottom: 1px solid #ee3844;
  }
 #section01 .tab03 .resp-content-inner { border-bottom: none; }

  /* ★ここから追記：スマホ時のみ display: table を解除して縦並び（1カラム）に上書き */
  #section01 #productTab .resp-tabs-container .flex { 
    display: flex !important; 
    flex-direction: column !important; 
    width: 100% !important; 
  }
  #section01 #productTab .resp-tabs-container .flex .detail { 
    display: block !important; 
    width: 100% !important; 
    padding-right: 0 !important; 
    margin-bottom: 24px !important; /* テキストと画像の間の隙間 */
  }
  #section01 #productTab .resp-tabs-container .flex .image { 
    display: block !important; 
    width: 100% !important; 
    text-align: center !important; 
  }
  #section01 #productTab .resp-tabs-container .flex .image img { 
    width: 100% !important; 
    max-width: 100% !important; 
    height: auto !important; 
  }

  /* スマホ用テーブルの文字サイズ・レイアウト微調整 */
  #section01 .resp-tabs-container h4 { font-size: 16px; margin-bottom: 12px; }
  #section01 .resp-tabs-container th, 
  #section01 .resp-tabs-container td { font-size: 13px; padding: 8px 4px; }

  /* 4. SP用アコーディオン見出し（既存のスタイルを維持） */
  .resp-accordion {
    display: block;
    margin: 0;
    padding: 14px 16px;
    background: #fff0f0;
    color: #ee3844;
    font-size: 1rem;
    font-weight: bold;
    border-bottom: 1px solid #fcc;
    cursor: pointer;
    position: relative;
  }

  .resp-accordion:last-of-type {
    border-bottom: none;
  }

  /* アクティブな見出し */
  .resp-accordion.resp-tab-active {
    background: #ee3844!important;
    color: #fff!important;
    border-bottom: none;
  }
#section01 .resp-tab-active { color: #fff!important;}
#section01 h2.resp-accordion { border-color: #ee3844; }

  /* 矢印（Vマーク） */
  .resp-accordion::after {
    content: '∨';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    transition: transform 0.3s ease;
  }
  
  /* アクティブ時は矢印を反転 */
  .resp-accordion.resp-tab-active::after {
    transform: translateY(-50%) rotate(180deg);
  }
}

/* ボタンが下に移動したときに、元の場所が潰れて画面がガタガタ動くのを防ぐ */
.contact_wrapper {
  min-height: 100px; /* 元のボタンの高さに合わせて調整 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 通常時（フッター手前にあるとき）のスタイル */
.contact_box {
  width: 100%;
}

/* 【下部固定時】スクロール中に自動で付与されるスタイル */
.contact_box.is-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  /*box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);*/
  padding: 15px 0;
  margin: 0;
  display: flex;
  justify-content: center;

  /* ★ここから追記：アニメーションの準備設定 */
  opacity: 0;
  transform: translateY(20px); /* 最初は少し下に下げておく（下から出てくる演出用） */
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease; /* 0.4秒かけて変化 */
}

/* ★ここを新しく追記：固定ボタンがフワッと表示される動き */
.contact_box.is-fixed {
  /* JSで切り替わる「一瞬」だけディレイ（遅延）を入れて、カクつきを完全に消す */
  animation: smoothFadeIn 0.4s ease forwards;
}



.contact_box ul { display: flex; flex-wrap: nowrap; margin: 0 auto; justify-content: space-between; width: 850px; }
.contact_box ul li { width: 250px!important; }
.contact_box ul li a { display: block; width: 250px!important; }

@media (max-width: 767px) {
.contact_box ul { display: flex; flex-wrap: nowrap; justify-content: space-between; width: 95%; margin: 0 auto; }
.contact_box ul li { width: 30%!important; }
.contact_box ul li a { display: block; width: 100%!important;  font-size: 3vw!important; padding: 15px 0!important;}
}




@keyframes smoothFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}