@charset "UTF-8";
  /* ③全体に文字が端にくっつかないよう15ピクセルの余白を作る */
    body, #container, .main-content, .side-menu {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
 
 /* お気に入り登録の右隣の「ファイルダウンロード」の文字変更*/
.main.main--product-detail section.__information .__secondary .__control span.__download .__button:after {
  content: "カタログダウンロード";
}

  /* 購入入力部分の品番が場所を取っているので非表示に __specだけ指定すると、レポート体裁などの表も非表示になる*/
.__description .__spec {
  display: none;
}

 /* 非会員購入からの入力画面遷移の非表示*/
.__to-order {
  display: none;
}

 /* 申し込み欄「追加オプション」の記載を「提供形態」替えようとしてうまくいかなかったので、「追加オプション」部分を非表示にした*/
.__option-heading {
  display: none;
}

 /* イレギュラー販売項目設定時の（単価×入数）を非表示に .__price を忘れるとカテゴリのリスト表示でタイトルが出なくなる*/
.__price .__detail {
  display: none;
}

 /* レポート詳細のタイトル部分の装飾*/
.report_detail {
  margin-top: 2em;
  font-size: 120%;
  border-left: double 8px #ed8617; /* 左線: 二重線・太さ・色 */
  color: #333; /* 文字色 */
  padding: .5em 1em; /* 余白 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

 /* レポート概要部分の装飾*/
#point {
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
#report_gaiyo_ {
  padding: 0.5em 1em;
  margin: 1em 0;
  background: #f5f5f5;
  border-left: solid 2px #ed8617; /* 左線: 一本線・太さ・色 */
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}

 /* レポート詳細内tableの体裁*/
.report_detail_box table td,
.report_detail_box table th {
    padding: 3px;
    border: 2px solid #cccccc; 
}

 /* 表紙画像表示の領域を規定より10%狭くした。他は変えていない */
.main.main--product-detail section.__information .__primary {
  margin-top: 1em;
  width: 20%;
  float: left;
  padding: 0 0.75em 0 0;
}

 /* 上記と組でテキスト表示の領域を規定より20%広くした。他は変えていない */
.main.main--product-detail section.__information .__secondary {
  width: 80%;
  float: right;
  padding: 0 0 0 0.75em;
  margin-top: 1em;
}

/* 非会員のみカートに入れるの前に登録・ログインを促す文言記載 */
.body-product-detail.__is-guest .__add-cart::before {
    content: "\Aお見積り・ご購入にはログインが必須となります。\A会員登録・ログインの後、お手続きにお進みください。";
    white-space: pre-wrap;
    color: red;
    font-weight: bold;
    font-size: 100%;

    /* ↓ 余白や行高変更の設定 ↓ */
    display: block; 
    line-height: 1.6;      /* 例: 行間を少し広げる */
    margin-bottom: 15px;   /* 例: 下のボタンとの間に隙間を作る */
}

 /* レポートサンプルリンク部分の文字色調整 */
.reportSampleSmall a {
  color:blue;
}

 /* サイドのカテゴリマウスオーバーでの色付け */
.__block.__block--category .__body ul li a:hover {
    text-decoration: none;
    background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
    padding-bottom: 10px; 
}



 /* トップ画像カルーセル設定 196行まで */


   /* --- CSS（スタイル設定） --- */
    :root {
      --slide-width: 240px;    /* ← 画像を大きくしたい時はここを増やす（例: 300px） */
      --slide-gap: 60px;      /* ← 隙間を狭くしたい時はここを減らす（例: 40px） */
      --animation-speed: 25s; /* ← スピードを遅くしたい時はここを増やす（例: 35s） */
    }

    .carousel-wrapper {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 0;
    }

    .loop-slider {
      width: 100%;
      overflow: hidden;
      display: flex;
      position: relative;
    }

    .loop-track {
      display: flex;
      gap: var(--slide-gap);
      width: max-content;
      /* スムーズに流れるアニメーション（JSで一時停止や制御を切り替えます） */
      animation: loop-animation var(--animation-speed) linear infinite; 
    }

    /* ドットがクリックされた時、滑らかに移動させるためのクラス */
    .loop-track.smooth-move {
      animation: none !important;
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .loop-slide {
      width: var(--slide-width);
      flex-shrink: 0;
    }

    .loop-slide img {
      width: 100%;
      height: auto;
      display: block;
      pointer-events: none; /* 画像のドラッグ誤動作を防止 */
    }

    /* メリーゴーランド風に無限に流すアニメーション */
    @keyframes loop-animation {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* マウスホバーで自動スクロールを一時停止 */
    .loop-track:hover {
      animation-play-state: paused;
    }

    /* --- ドットナビゲーションのスタイル --- */
    .dot-container {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 24px;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #ddd; /* 通常時のドットの色 */
      cursor: pointer;        /* マウスを乗せたら指先マークにする */
      transition: background-color 0.3s ease, transform 0.2s ease;
    }

    /* マウスを乗せたときに少し大きくする */
    .dot:hover {
      transform: scale(1.2);
      background-color: #bbb;
    }

    /* 現在表示されている画像に対応するドット */
    .dot.active {
      background-color: #333; /* アクティブ時のドットの色（黒） */
      transform: scale(1.1);
    }