/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 03 2026 | 13:06:37 */
/************************************************************
  チェックアウト
************************************************************/
/*#ship-to-different-address{padding-left:5px;}
.required{color:#CC0001;}
*/
.woocommerce-form__label-for-checkbox{
	margin-left:5px;
}

/************************************************************
  見積もりシュミレーション 全媒体非表示
************************************************************/
.hide-all {
  display: none !important;
}

.hide-textarea { display: none; } 

/************************************************************
  見積もりシュミレーション Table合計金額
************************************************************/
.table_price {
  color: #cc0000;
}

/************************************************************
  PC=4列 / SP=1列。外側 .cf7cc-scope を“本体のグリッド”にする。
  中間ラッパー（.cf7cc-grid / wpcf7cf_group / <p> / .radio-group）は透明化。
************************************************************/

/* 本体グリッド（ここにある .radio-option を全部連結） */
.cf7cc-scope {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  width: 100%;
}

/* 既存の器は“中身だけ残す” */
.cf7cc-scope .cf7cc-grid { 
  display: contents !important;
}

/* ─ 表示/非表示の扱い ─ */
/* 非表示の条件分岐グループは出さない */
.cf7cc-scope [data-class="wpcf7cf_group"].wpcf7cf-hidden,
.cf7cc-scope [data-class="wpcf7cf_group"][style*="display:none"],
.cf7cc-scope [data-class="wpcf7cf_group"][style*="display: none"] {
  display: none !important;
}
/* 表示中の条件分岐ラッパーは“透明化”（どの深さでもOK） */
.cf7cc-scope [data-class="wpcf7cf_group"]:not(.wpcf7cf-hidden):not([style*="display:none"]):not([style*="display: none"]) {
  display: contents !important;
}

/* ─ 余計な <p> / 無印<div> / .radio-group などを透明化してフラット化 ─ */
.cf7cc-scope > p,
.cf7cc-scope p:has(> .radio-option),
.cf7cc-scope p:has(> [data-class="wpcf7cf_group"]) {
  display: contents !important;
  margin: 0 !important;
}
/* 直下に .radio-option を抱える無印<div>を透明化（CF7が差し込むことがある） */
.cf7cc-scope > div:has(> .radio-option) {
  display: contents !important;
}
/* スコープ内の .radio-group は“中身だけ” */
.cf7cc-scope .radio-group {
  display: contents !important;
}

/* ─ 各カード ─ */
.cf7cc-scope .radio-option {
  display: flex;
  flex-direction: column;
/*  height: 100%;*/ /* 中央揃え */
  box-sizing: border-box;
  min-width: 0; /* 表のはみ出し防止 */
}
.cf7cc-scope .radio-image { width: 100%; }
.cf7cc-scope .radio-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* テーブル保護（任意） */
.cf7cc-scope .tb01 { width: 100%; table-layout: auto; }


/* ～768pxは3カラム */
@media (max-width: 768px) {
  .cf7cc-scope { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
/* ～560pxは2カラム */
@media (max-width: 560px) {
  .cf7cc-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ～480pxは1カラム */
@media (max-width: 480px) {
  .cf7cc-scope { grid-template-columns: 1fr; }
}

/* ===== フォールバック強化（display:contents 非対応環境） ===== */
@supports not (display: contents) {
  .cf7cc-scope { display: flex; flex-wrap: wrap; gap: 20px; }

  /* 直下カード(.radio-option)も幅指定しておく */
  .cf7cc-scope > .radio-option {
    width: calc(25% - 15px);
    box-sizing: border-box;
  }

  /* 表示中ラッパー配下のカード幅（既存セレクタは活かしたまま） */
  .cf7cc-scope [data-class="wpcf7cf_group"]
    :not(.wpcf7cf-hidden):not([style*="display:none"]):not([style*="display: none"]) > *,
  .cf7cc-scope > div:has(> .radio-option) > *,
  .cf7cc-scope > p:has(> .radio-option) > * {
    width: calc(25% - 15px);
    box-sizing: border-box;
  }

  /* 段階的ブレークポイント（フォールバック側も合わせる） */
  @media (max-width: 768px) {
    .cf7cc-scope { gap: 12px; }
    .cf7cc-scope > .radio-option,
    .cf7cc-scope [data-class="wpcf7cf_group"]
      :not(.wpcf7cf-hidden):not([style*="display:none"]):not([style*="display: none"]) > *,
    .cf7cc-scope > div:has(> .radio-option) > *,
    .cf7cc-scope > p:has(> .radio-option) > * {
      width: calc(100% / 3 - 8px); /* 3列相当（gapと整合を取りたい場合の例） */
    }
  }
  @media (max-width: 560px) {
    .cf7cc-scope > .radio-option,
    .cf7cc-scope [data-class="wpcf7cf_group"]
      :not(.wpcf7cf-hidden):not([style*="display:none"]):not([style*="display: none"]) > *,
    .cf7cc-scope > div:has(> .radio-option) > *,
    .cf7cc-scope > p:has(> .radio-option) > * {
      width: calc(50% - 8px); /* 2列 */
    }
  }
  @media (max-width: 480px) {
    .cf7cc-scope > .radio-option,
    .cf7cc-scope [data-class="wpcf7cf_group"]
      :not(.wpcf7cf-hidden):not([style*="display:none"]):not([style*="display: none"]) > *,
    .cf7cc-scope > div:has(> .radio-option) > *,
    .cf7cc-scope > p:has(> .radio-option) > * {
      width: 100%; /* 1列 */
    }
  }
}


.wpcf7-form-control.wpcf7-radio {
    display: none;
}

/*==========================================================
	Contact form 7 エラー文非表示
==========================================================*/
/*
.wpcf7-not-valid-tip {
  display: none;
}
*/

/*==========================================================
	追加
==========================================================*/
/* --- 【最終決定版・改弐】入力項目・計算項目の共通レイアウト --- */

/* 「開口寸法」や「ハトメ数」の画像と入力欄のコンテナ */
.measurement-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}
.measurement-column { width: 100%; }
.image-column img { max-width: 100%; height: auto; }

/* 「ラベル」と「値エリア」を縦に並べる親要素 */
.calc-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 15px 0;
/*  border-bottom: 1px solid #f0f0f0;*/
}

/* 値エリア（入力欄/計算結果 と 単位 をまとめる） */
.calc-item-value {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight:bold;
}

/* CF7が自動生成するラッパーSPANのスタイル */
.calc-item-value .wpcf7-form-control-wrap {
  display: inline-block !important;
  width: auto;
  vertical-align: middle;
}

/* このレイアウト内の「入力欄」のスタイル */
.calc-item-value input[type="number"] {
  width: 100px !important;
  text-align: right;
  border: 1px solid #ccc;
  padding: 5px;
}

/* 計算結果のスタイル */
.calc-item-value .cf7-cost-calculator-result {
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
}

/* ▼▼▼【最重要・最終修正点】▼▼▼ */
/* 単位を囲む新しいDIV要素のスタイル */
.calc-item-value .unit {
  transform: translateY(0px); /* ★Y軸（垂直方向）に2px下にずらす */
}

/* スマホ向けのレスポンシブ対応 */
@media (max-width: 768px) {
  .measurement-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .image-column img {
    display: block;
    margin: 0 auto;
  }
}
/*==========================================================
	ラジオボタン（画像付き）
==========================================================*/

/* 共通レイアウト */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  width: 100%;
  margin: 30px auto 40px auto;
}

/* 各ボタン＋画像セット */
.radio-option {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 5px;
  margin:5px 0px 5px 0px;
}

/* 列ごとの設定 */
.columns-1 .radio-option {
  width: 98%; /* 1カラム */
}
.columns-2 .radio-option {
  width: 48%; /* 2カラム */
}

.columns-3 .radio-option {
  width: 31%; /* 3カラム */
}

.columns-4 .radio-option {
  width: 23%; /* 4カラム */
}

.columns-5 .radio-option {
  width: 18%; /* 5カラム */
}

/* ボタンのスタイル */
.radio-option label {
  display: block;
  width: 100%;
  padding: 10px 10px 13px 10px;
  margin: 10px 0px 10px 0px;
  border-radius: 5px;
  border: 2px solid #ccc;
  background-color: #EEEEEE;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-sizing: border-box;
}
.radio-option label .span{
  height
}

/* 画像のスタイル */
.radio-image {
  width: 100%;
}

.radio-image img {
  width: 100%;
  height: auto;
  display: block;
  margin:15px auto 15px auto;
}

/* 選択時のスタイル */
.radio-option label:has(input:checked) {
  background-color: #00C5F5;
  color: white;
  border: 2px solid #00C5F5;
}

/* スマホ対応（1カラム表示） */
@media screen and (max-width: 600px) {
  .radio-group {
    flex-direction: column;
  }

  /* 既存の width 指定を上書き */
  .columns-2 .radio-option,
  .columns-3 .radio-option,
  .columns-4 .radio-option,
  .columns-5 .radio-option {
    width: 100% !important;
  }
}


/*==========================================================
	商品詳細ページ
==========================================================*/
/* 説明 */
.uppercase {
	font-size:18px;
}
/* Hタグ大文字表記なし */
.section-title span{
	text-transform:none;
}
/*==========================================================
	テーブルスクロール
==========================================================*/
.table-scroll {
  overflow-x: auto;
}
.table_design10 {
  border-collapse: collapse;
  min-width: 700px;
  text-align: center;
  font-weight: normal;
}
.table_design10 th, .table_design10 td {
  padding: .5em 1em;
  border: 1px solid #dcdcdc;
  color: #333;
  text-align: center;
}
.table_design10 th {
  background: #F0F0F0;
  font-weight: bold;
  border-right: 1px solid #fff;
  border-top: 1px solid #dcdcdc;
}

.table_design10 th:last-of-type {
  border-right: 1px solid #dcdcdc;
}

/*==========================================================
	テーブル
==========================================================*/
table{
  border-collapse: collapse;
  width: 100%;
}
.tb01 th,
.tb01 td{
  padding: 10px;
  border: solid 1px #dcdcdc;
  box-sizing:border-box;
  color: #333;
  font-size:16px;
}
.tb01 th {
  width: 25%;
  background: #f0f0f0;
  text-align:center;
}
.tb01 td {
  text-align:left;
}

.tb_bold{
	font-weight: bold;
}

font-weight: bold;
@media screen and (max-width: 640px) {
  .tb01 {
    width: 100%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .tb01 tr:last-child{
    border-bottom: solid 1px #dcdcdc;
  }
}

/*==========================================================
	テーブル（SP対応）
==========================================================*/
.tb02 th,
.tb02 td{
  padding: 10px;
  border: solid 1px #dcdcdc;
  box-sizing:border-box;
  color: #333;
  font-size:16px;
}
.tb02 th {
  width: 25%;
  background: #f0f0f0;
  text-align:center;
}
.tb02 td {
  text-align:left;
}

.tb_bold{
  font-weight: bold;
}

/* ▼スマホ用（640px以下） */
@media screen and (max-width: 640px) {
  .tb02,
  .tb02 tr,
  .tb02 th,
  .tb02 td {
    display: block;
    width: 100%;
  }

  .tb02 th {
    text-align: left;   /* 中央寄せだと不自然になるので左寄せ推奨 */
  }

  .tb02 tr {
    margin-bottom: 15px; /* 行ごとの余白 */
    border: solid 1px #dcdcdc;
    border-radius: 4px;
    overflow: hidden;
  }

  .tb02 th,
  .tb02 td {
    border-bottom: 1px solid #dcdcdc;
  }

  .tb02 td:last-child {
    border-bottom: none; /* 最後のセルは不要 */
  }
}

/*==========================================================
	お問い合わせフォームの入力
==========================================================*/
#cf-tbl{
width: 100%;
}

#cf-tbl table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
color: #444;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
vertical-align: middle;
}
#cf-tbl table tr th{
width: 30%;
background: #eee;
}

.check_send{
    margin-top:20px;
	padding-left:10px;
	
}

/*-- チェックボックスボックス --*/
input[type=checkbox] {
	transform: scale(1.5);
	margin: 0 6px 0 0;
}

@media screen and (max-width:768px){
#cf-tbl{
width: 100%;
}

#cf-tbl table,
#cf-tbl table tbody,
#cf-tbl table tr,
#cf-tbl table tr th,
#cf-tbl table tr td{
display: block;
}

#cf-tbl table{
width: 100%;
border-width: 0 0 1px 0;
}

#cf-tbl table tr th,
#cf-tbl table tr td{
width: 100%;
padding: 3% 5%;
}

#cf-tbl table tr td{
border-width: 0px 1px 0px 1px;
}
}
/*「必須」文字デザイン*/
.form-required{
font-size:.8em;
padding: 5px;
background: #DD0000;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*「任意」文字デザイン*/
.optional{
font-size:.8em;
padding: 5px;
background: #000080;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
	background-color: #eff1f5;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 「送信する」ボタン */
input.wpcf7-submit {
    display: block;
    padding: 5px;
    width: 80%;
    background: #DD0000;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    border-radius: 0px;
    margin: 15px auto 0
}
@media screen and (max-width:768px){
input.wpcf7-submit {
width: 100%;
}
}

input.wpcf7-submit:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
	opacity:0.7;
}
/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

.form_note{
	line-height: 1.6;
}
/*==========================================================
	Cloudflare Turnstile
==========================================================*/
.cf-turnstile {
    display: flex;
    justify-content: center; /* 中央に配置 */
    margin: 20px 0; /* 必要に応じて上下の余白を追加 */
}

/*==========================================================
	Marginal
==========================================================*/
.mb10{
	margin-bottom:10;
}

.mb20{
	margin-bottom:20;
}

.mb30{
	margin-bottom:30;
}

.mb40{
	margin-bottom:40;
}

.mb50{
	margin-bottom:50;
}