/* ===== BulueMonkeyテンプレート用CSS ===================================================================== */

html,body{
  height: 100%;
  margin: 0;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",
                "Hiragino Sans","Noto Sans JP",sans-serif;
}

body{
  display: flex;
  flex-direction: column;
  max-width: 1300px;
  min-width: 1100px;
  margin:0 auto;

}

/* 上部　FISAヘッダー */
.template_c2{
  display: none;
}

/*  上部　パンくず  */
#locator_template_c2{
  height:40px;
  flex-shrink:0;
  margin-top: 0px;
}

/* コード埋め込み部  */
main.inner,
#dcms_layoutPageBlockPasteArea,
#dcms_layoutPageBlock{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 下部　フィーサ最貧をご検討の方へ、動画資料ダウンロード、お問い合わせ */
.dlb_contact_area4{
  display: none;
}

/* 下部　お問い合わせ */
.dlb_contact_area{
  display: none;
}

/* 下部　最下部フッター　黒エリア */
footer{
  display: none;
}

/*-----------------------------------------------------------------*/
/* ぱんくず locator */
/*-----------------------------------------------------------------*/

/* dcms_media/css/base.css からの引用 */
a{
	-webkit-tap-highlight-color: rgba(0,0,0,0.3);
	margin: 0;
	padding: 0;
	color: #333333;
	text-decoration: none;
	transition: all .2s ease 0s;
}

/* dcms_media/css/common.css からの引用 */

#locator_template_c2 {
  font-size: 12px;
  line-height: 1.4;
  border-width: 1px 0 1px 0;
  border-style: solid;
  width: 100vw;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-bottom: 0;
  width: 100%;
}

#locator_template_c2 li {
  display: inline-block;
  list-style: none;
  margin-right: 6px;
  position: relative;
}

#locator_template_c2 li::after {
  content: ">";
  margin-left: 6px;
}

#locator_template_c2 li a {
  text-decoration: underline;
}

#locator_template_c2 li:last-child::after {
  display: none;
}

#locator_template_c2 li:first-child {
  margin-left: 0;
}

/* ===== オリジナル埋め込みコード用CSS ===================================================================== */
    /* 色の定数設定 */
    :root {
      --mainColor: #066; /* メインカラー（全体の統一感） */
      --accentColor: #b60; /* アクセントカラー（見積もりボタンなど強調したい部分） */
      --subColor: #833; /* サブカラー（比較ボタンなど） */
      --cancelColor: #0a0a0a; /* キャンセルカラー（全解除ボタンなど） */
      --borderColor: #999; /* 線の色 */
      --borderHoverColor: #777; /* 左右仕切りバーのホバー色 */
      --bgColor: #fafafa; /* 背景色 */
      --hdBgColor: #ddd; /* ヘッダー背景色 */
      --attentionColor: #c00; /* 注意喚起カラー（赤） */
      --disabledColor: #bbb; /* 無効状態の背景色 */
      --disabledTextColor: #555; /* 無効状態のテキスト色 */
      --shadowColor: #666; /* ボタンの影の色 */
      --noteColor: #009; /* 注意書きの赤色 */
    }

    /* ---------- 全体 -----------*/
    .container{
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
      counter-reset: item;
    }
    
    /* チェックボックス、ラジオボタン */
    input{
      accent-color: var(--mainColor);
    }

    .container{
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
    }

    /* ヘッダー全体 */
    .header {
      flex-shrink: 0;
      padding: 5px 10px;
      background-color: var(--hdBgColor);
      border-bottom: 1px solid var(--borderColor);
      display: flex;
      flex-direction: column;
    }

    /* 上段（ボタン類） */
    .header-top {
      padding: 0px 0px;
      display: flex;
      align-items: center;
    }

    /* コメントエリア */
    .header-comment {
      margin-top: 5px;
      padding-top: 5px;
      border-top: 1px solid var(--borderColor);
      color: var(--noteColor);
      font-size: 15px;
    }

    /* 絞り込みの全解除ボタン、絞り込み商品数 */
    .flt-btn-group {
      display: flex;
      flex-direction: column; /* 縦並び */
      width: fit-content;
    }

    /* 絞り込み解除ボタン */
    #fltResetBtn {
      margin-right: 20px;
      margin-bottom: 5px;
      padding: 6px 12px;
      font-size: 16px;
      background: var(--cancelColor);
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
      box-shadow: 3px 3px 2px var(--shadowColor);
    }

    #fltResetBtn:hover {
      opacity: 0.8;
    }

    /* 全表示商品の選択ボタン、商品選択の全解除ボタン */
    .prd-btn-group {
      display: flex;
      flex-direction: column; /* 縦並び */
      margin-left: 200px;
    }
    
    /* 全表示商品の選択ボタン */
    #prdAllSelBtn {
      margin-right: 20px;
      margin-bottom: 5px;
      padding: 6px 12px;
      font-size: 16px;
      background: var(--mainColor);
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
      box-shadow: 3px 3px 2px var(--shadowColor);
    }

    #prdAllSelBtn:hover {
      opacity: 0.8;
    }

    /* 商品選択の全解除ボタン */
    #prdSelResetBtn {
      margin-right: 20px;
      margin-bottom: 5px;
      padding: 6px 12px;
      font-size: 16px;
      background: var(--cancelColor);
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
      box-shadow: 3px 3px 2px var(--shadowColor);
    }

    #prdSelResetBtn:hover {
      opacity: 0.8;
    }

    /* 見積もりボタン */
    #estimateBtn {
      padding: 6px 24px;
      font-size: 16px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      box-shadow: 3px 3px 2px var(--shadowColor);
      margin-left: 20px;
    }

    /* 見積もりボタン、比較ボタン 無効状態 */
    #estimateBtn:disabled,#compareBtn:disabled {
      background: var(--disabledColor);
      color: var(--disabledTextColor);
      cursor: not-allowed;
    }

    /* 見積もりボタン 有効状態 */
    #estimateBtn.enabled {
      background:var(--accentColor);
      color: white;
    }
    /* 見積もりボタン 有効状態 カーソルOn*/
    #estimateBtn.enabled:hover {
      opacity: 0.8;
    }

    /* 比較ボタン */
    #compareBtn {
      padding: 6px 24px;
      font-size: 16px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      box-shadow: 3px 3px 2px var(--shadowColor);
      margin-left: 20px;
      margin-left: auto;
      margin-right: 20px; /* ←右に余白 */
    }

    /* 比較ボタン 有効状態 */
    #compareBtn.enabled {
      background: var(--subColor);
      color: white;
    }

    /* 比較ボタン 有効状態 カーソルOn*/
    #compareBtn.enabled:hover {
      opacity: 0.8;
    }

    /* ---------- 下部 全体 （絞り込みと商品表示） ----------*/
    .main {
      flex: 1;
      display: flex;
      min-height: 0;
      overflow: hidden;
    }

    /* ---------- 下部 左（絞り込み） ----------*/
    /* 絞り込み全体 */
    .left {
      width: 350px;
      min-width: 200px;
      max-width: 80%;
      overflow-y: auto;
      padding: 10px;
      box-sizing: border-box;
      background-color:var(--bgColor);
      border-right: 1px solid var(--borderColor);
      font-size: 15px;
    }

    /* 絞り込み */
    .filter-group {
      border-bottom: 1px solid var(--borderColor); /* 線 */
      padding-bottom: 10px;          /* 線との余白 */
      margin-bottom: 15px;          /* 次の項目との間隔 */
    }

    /* 絞り込み 最終項目 */
    .filter-group:last-child {
      border-bottom: none;          /* 最後の項目には線を表示しない */
    }

    /* 絞り込み 項目ラベル */
    .filter-group label:first-of-type {
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }

    .filter-group label:first-of-type::before {
      counter-increment: item;
      content: counter(item) ") ";
    }

    /* 絞り込み 全体ラベル */
    .filter-group label {
      font-weight: nomal;
      display: block;
      margin-bottom: 5px;
    }

    /* 絞り込み 全体ラベル */
    .filter-memo-red  {
      font-size: 14px; ;
      color: var(--attentionColor);
    }

    /* 絞り込み テキストボックス */
    input[type="number"] {
      width: 100px; 
    }

    /* 絞り込み ゲート径 テキストボックス */
    #fltGeteDia1, #fltGeteDia2 {
      width: 80px; 
    }
    
    /* 絞り込み マニホールド形状 プルダウン */
    .filter-group select {
      width: 300px;
    }

    /* 絞り込み ?(ヘルプ)ボタン */
    .help-btn {
      display: inline-block;
      margin-left: 6px;
      width: 16px;
      height: 16px;
      line-height: 1.5;
      text-align: center;
      border-radius: 50%;
      background: var(--mainColor);
      color: white;
      font-size: 12px;
      cursor: pointer;
      user-select: none;
      box-shadow: 3px 3px 2px var(--shadowColor);
    }

    .help-btn:hover {
      opacity: 0.8;
    }

    /* ---------- 下部 右（商品表示） ----------*/
    .right {
      flex:1;
      overflow-y: auto;
      padding: 10px;
      box-sizing: border-box;
      background-color: var(--bgColor);
      font-size: 15px;
    }

    /* 商品 */
    .product {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--borderColor);
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    /* 商品 MF厚み */
    .mf-thickness-row {
      display: none; /* 内部データとして使用するので非表示 */
    }

    /* 商品 画像 */
    .product img {
      width: 220px;
      height: 180px;
      object-fit: contain;
      background: #ddd;
    }

    /* 商品 説明 */
    .product-info {
      flex: 1;
      font-size: 14px;
    }

    /* 商品 特徴のリスト */
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    /* 商品 詳細ボタン */
    .detail-btn {
      padding: 6px 12px;
      color: white;
      background: var(--mainColor);
      border: 1px solid var(--borderColor);
      cursor: pointer;
      box-shadow: 3px 3px 2px var(--shadowColor);
    }

    .detail-btn:hover {
      opacity: 0.8;
    }

/* =====保存用CSS終了===================================================================== */