@charset "utf-8";

div.wpcf7 .ajax-loader {
	display: none !important;
}
.wpcf7-spinner {
	display: none !important;
}


/* top
----------------------------------------------- */
.topbnr {
	max-width: 1286px;
	margin: 60px auto 0;
	padding: 0 20px;
	display: flex;
	align-items: stretch;
}
.topbnr li {
	width: calc((100% - 60px)/3);
	margin-right: 30px;
}
.topbnr li:nth-child(3n) {
	margin-right: 0;
}
.topbnr li a {
	display: block;
	position: relative;
}
.topbnr li a:before {
	position: absolute;
	content: "";
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% - 28px);
	height: calc(100% - 28px);
	z-index: 1;
}
.topbnr .topbnrimg img {
	width: 100%;
}

.topbnr2 {
	max-width: 1286px;
	margin: 60px auto 0;
	padding: 0 20px;
	display: flex;
	align-items: stretch;
}
.topbnr2 li {
	width: calc((100% - 60px)/5);
	margin-right: 30px;
}
.topbnr2 li:nth-child(5n) {
	margin-right: 0;
}
.topbnr2 li a {
	display: block;
	position: relative;
}
.topbnr2 li a:before {
	position: absolute;
	content: "";
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% - 28px);
	height: calc(100% - 28px);
	z-index: 1;
}
.topbnr2 .topbnr2img {
	margin: 0 auto 10px auto;
	text-align: center;
	height: 60px;
}
.top_cat_txt {
	margin: 0 auto;
	text-align: center;
}
.item_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	color: #b2834b;
	padding: 10px 30px;
	border:1px dashed #b2834b;
	margin: 30px auto 0 auto;
	width: 300px;
	font-weight: 700;
}
.topbnr2_txt1 {
	font-size: 16px;
	text-align: center;
	color: #b2834b;
}
.topbnr2_txt2 {
	font-size: 18px;
	text-align: center;
	color: #b2834b;
}
.topbnr2_txt3 {
	font-size: 14px;
	text-align: left;
	padding: 0 30px;
}
.point_list {
	list-style-type: decimal;
	margin: 0 0 0 20px;
}
.point_list li {
	line-height: 2em;
}
.item_btn a {

}

@media (max-width: 1024px) {
.topbnr li {
	width: calc((100% - 40px)/3);
	margin-right: 20px;
}
.topbnr2 li {
	width: calc((100% - 40px)/5);
	margin-right: 20px;
}
}

@media (max-width: 767px) {
.topbnr {
	margin: 30px auto 0;
}
.topbnr {
	display: block;
}
.topbnr li {
	width: auto;
	margin-right: 0;
}
.topbnr li+li {
	margin-top: 30px;
}

.topbnr2 {
	margin: 30px auto 0;
}
.topbnr2 {
	display: block;
}
.topbnr2 li {
	width: auto;
	margin-right: 0;
}
.topbnr2 li+li {
	margin-top: 30px;
}
}

.toprec {
	background: #f7f8f7;
	margin-top: 80px;
	padding: 80px 0;
}
.toprec .toprecbox {
	display: flex;
	align-items: flex-start;
	margin-top: 40px;
}
.toprec .toprecbox.reverse {
	flex-direction: row-reverse;
}
.toprec .toprecimg {
	width: 50%;
	position: relative;
}

.toprec .toprecin {
	padding: 0 5% 0 0;
	flex: 1;
}
.toprec .toprecbox.reverse .toprecin {
	padding: 0 0 0 5%;
}
.toprec .toprectit {
	margin-bottom: 30px;
}
.toprec .toprectit .toprectitin {
	display: inline-block;
	font-size: 30px;
	line-height: 1.4;
	padding: 0 6px;
	font-weight: 700;
}

.top_qa {
	border-bottom: solid 1px #ddd;
	margin-bottom: 30px;
	padding: 0 0 20px 0;
}
.top_qa_q {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	position: relative;
	font-size: 20px;
	font-weight: 700;
}
.top_qa_q span.q_ico {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 34px;
	max-width: 34px;
	height: 34px;
	background: #b2834b;
	color: #fff;
	border-radius: 50%;
	margin-right: 12px;
	font-size: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}
.top_qa_a span.q_content {
	color: #000;
	font-weight: 700;
}
.top_qa_a {
	padding: 10px 15px;
	display: flex;
}
.top_qa_a span.a_ico {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 34px;
	max-width: 34px;
	height: 34px;
	background: #ccc;
	color: #fff;
	border-radius: 50%;
	margin-right: 12px;
	font-size: 20px;
	margin-top: 1px;
	font-weight: 700;
}
.top_qa_a span.a_content {
	color: #000;
	margin-left: 0px;
}

@media (max-width: 767px) {
.toprec {
	margin-top: 40px;
	padding: 40px 0;
}
.toprec .toprecbox {
	display: block;
	margin-top: 20px;
}
.toprec .toprecimg {
	width: auto;
	margin-top: 30px;
}
.toprec .toprecimg img {
	width: 100%;
}

.toprec .toprecin {
	padding: 0;
}
.toprec .toprecbox.reverse .toprecin {
	padding: 0;
}

.toprec .toprectit {
	margin-bottom: 20px;
}
.toprec .toprectit .toprectitin {
	font-size: 20px;
	padding: 0 3px;
}

}












/* 特定商法取引法に関する表示
----------------------------------------------- */
.tokusho_table {
	margin: 20px 0 50px 0;
	width: 100%;
}
.tokusho_table th {
	padding: 20px;
	background-color: #f2f2f2;
}
.tokusho_table th, .tokusho_table td {
	border-bottom: none;
	padding: 20px;
	border: 1px solid #ccc;
}
.tokusho_table tr:last-child td:last-child  {
	border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 640px) {
	.tokusho_table th, .tokusho_table td {
		display: block;
		border-bottom: none;
	}
	.tokusho_table tr:last-child td:last-child  {
		border-bottom: 1px solid #ccc;
	}
}
.tokusho_txt {
	margin: 10px 0;
	lihe-height: 1.8em;;
}

/* 個人情報の取扱について
----------------------------------------------- */
.pp_ul {
	list-style-type: disk !important;
	margin: 0 0 0 20px;
}
.pp_ul li {
	line-height: 2em;
}



.grecaptcha-badge { visibility: hidden; }
.grecaptcha_txt {
	margin: 20px 0 0 0;
	font-size: 12px;
}






/* 商品一覧
----------------------------------------------- */
.product-archive {
  width: 100%;
  padding: 60px 0;
  box-sizing: border-box;
}

/* 全体の最大幅を 1180px に制限し、中央寄せにする */
.product-archive-inner {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; /* 画面端のセーフティ余白 */
  box-sizing: border-box;
}

.page-title {
  font-size: 28px;
  margin-bottom: 40px;
  text-align: center;
}

/* 商品グリッド：PC版は横に4個並べる */
.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4等分 */
  column-gap: 20px;                      /* 横の隙間 */
  row-gap: 40px;                         /* 縦の隙間 */
  width: 100%;
}

.product-item a {
  text-decoration: none;
  color: #333;
  display: block;
}

.product-item-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* 画像を強制的に正方形にして綺麗に揃える（お好みで） */
  overflow: hidden;
  background: #f5f5f5;
  margin-bottom: 12px;
}

.product-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を崩さず枠いっぱいに収める */
  display: block;
}

.product-item-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.product-item-price {
  font-size: 15px;
  color: #c00;
  font-weight: bold;
  margin: 0;
}

.product-item-price span {
  font-size: 11px;
  color: #666;
  font-weight: normal;
}

/* ページネーションの標準的なスタイル */
.pagination {
  margin-top: 50px;
  text-align: center;
}
.pagination ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}
.pagination li a,
.pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 14px;
}
.pagination li span.current {
  background: #333;
  color: #fff;
  border-color: #333;
}

@media (max-width: 768px) {
  .product-archive {
    padding: 40px 0;
  }
  
  .page-title {
    font-size: 22px;
    margin-bottom: 30px;
  }

  /* スマホ版は横に2個並べる */
  .product-list {
    grid-template-columns: repeat(2, 1fr); /* 2等分 */
    column-gap: 15px;                      /* スマホ用に隙間を少し狭く */
    row-gap: 30px;
  }

  .product-item-title {
    font-size: 14px;
  }
}






/* 商品詳細
----------------------------------------------- */
.product-detail {
  width: 100%;
  padding: 60px 0;
  box-sizing: border-box;
}

/* 全体の最大幅を一覧ページと同じ1180pxに制限 */
.product-detail-inner {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 商品タイトル（中央寄せ） */
.product-title {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

/* 左右50%ずつのフレックスコンテナ */
.product-flex-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px; /* 左右のエリアの間の溝 */
}

/* 左右を均等に50%ずつに割り振る（gap分を計算） */
.product-gallery-area,
.product-info-area {
  width: calc(50% - 25px);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   左エリア：画像ギャラリーのスタイル
   -------------------------------------------------------------------------- */
.main-image-window {
  width: 100%;
  aspect-ratio: 4 / 3; /* 画像比率を維持する枠（スクショの横長比率に設定） */
  overflow: hidden;
  background: #f5f5f5;
  margin-bottom: 15px;
}

.main-image-window img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠に合わせて綺麗に切り抜いて表示 */
  display: block;
}

/* サムネイルリスト */
.thumbnail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* サムネイル同士の隙間 */
}

.thumb-item {
  width: calc(20% - 6.4px); /* 横に5個並ぶ計算（gap4枚分を引く） */
  aspect-ratio: 1 / 1;     /* サムネイルはきれいな正方形 */
  overflow: hidden;
  background: #f5f5f5;
  cursor: pointer;
  border: 2px solid transparent; /* 選択されていない時は透明な枠線 */
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 現在選択されているサムネイルの枠線を黒にする */
.thumb-item.is-active {
  border-color: #333;
}

/* --------------------------------------------------------------------------
   右エリア：情報・本文のスタイル
   -------------------------------------------------------------------------- */
.product-detail-price {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 0 0;
  color: #333;
}

.product-detail-price span {
  font-size: 26px;
}

.product-detail-price small {
  font-size: 14px;
  color: #666;
  font-weight: normal;
  margin-left: 5px;
}

/* 投稿本文（Pタグなどの行間や文字サイズ） */
.product-detail-content {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 40px;
  white-space: pre-wrap;
}

.product-detail-content p {
  margin-top: 0;
  margin-bottom: 0;
}
.product-detail-content p:last-child {
  margin-bottom: 0;
}

/* お問い合わせボタン */
.product-detail-cta {
  text-align: center;
  margin-top: 30px;
}

.btn-contact {
  display: inline-block;
  width: 100%;
  max-width: 400px; /* ボタンが広がりすぎないように制限 */
  padding: 16px 20px;
  border: 1px solid #333;
  background: #fff;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* ボタンのホバー効果（黒背景に白文字に反転） */
.btn-contact:hover {
  background: #333;
  color: #fff;
}

@media (max-width: 768px) {
  .product-detail {
    padding: 40px 0;
  }

  .product-title {
    font-size: 20px;
    margin-bottom: 25px;
  }

  /* スマホでは左右の50%並びを解除して、縦一列に並べる */
  .product-flex-container {
    flex-direction: column;
    gap: 30px;
  }

  .product-gallery-area,
  .product-info-area {
    width: 100%;
  }

  .product-detail-price {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .product-detail-price span {
    font-size: 22px;
  }

  .btn-contact {
    max-width: 100%; /* スマホ時は画面いっぱいに広げる */
  }
}



/* フォーム
----------------------------------------------- */
/* 1. フォーム全体のコンテナ調整 */
.contact-form-area {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  color: #333;
}

/* ==========================================================================
   2. 各入力項目のグループ（タイ文字のポクター干渉をクリア）
   ========================================================================== */
.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 8px;
  color: #333;
  cursor: default !important; /* 【修正】ただのタイトル文字（label）ではポインターを通常の矢印に固定 */
}

/* 必須マークの装飾 */
.form-group label span.required {
  color: #c00;
  font-size: 12px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: default !important;
}


/* 3. テキスト入力欄・テキストエリア（【復活】はっきり見える薄グレーの枠線） */
.contact-form-area input[type="text"],
.contact-form-area input[type="email"],
.contact-form-area input[type="tel"],
.contact-form-area textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 15px !important;
  font-size: 15px !important;
  background-color: #fff !important; /* 背景色を確実に白に固定 */
  border: 1px solid #ccc !important; /* 視認性の高いグレーの枠線を強制適用 */
  border-radius: 0 !important;       /* シャープな角に固定 */
  box-sizing: border-box !important;
  color: #333 !important;
  cursor: text !important;           /* 入力欄の上ではテキスト選択カーソル（Iバー）にする */
  transition: all 0.3s ease;
}

/* 商品名など、自動入力されて編集不可（readonly）な入力欄のスタイル */
.contact-form-area input[readonly] {
  background-color: #f5f5f5 !important; /* 編集不可が分かりやすい薄グレー背景 */
  border-color: #ddd !important;
  color: #777 !important;
  cursor: not-allowed !important; /* 禁止マークのポインター */
}

/* 入力欄をクリック（フォーカス）したとき */
.contact-form-area input[type="text"]:focus,
.contact-form-area input[type="email"]:focus,
.contact-form-area textarea:focus {
  border-color: #333 !important; /* 枠線を黒にして引き締める */
  outline: none !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) !important;
}

/* テキストエリア（お問合せ本文）の高さ設定 */
.contact-form-area textarea {
  min-height: 150px !important;
  resize: vertical !important;   /* 縦方向にだけ引き伸ばせる */
}

/* ==========================================================================
   4. ラジオボタン & チェックボックス（文字ではなく、ボタンの上だけを手のマークにする）
   ========================================================================== */

/* 選択肢全体を内包するブロックを確実に横並びにする */
.contact-form-area .custom-flex-container,
.contact-form-area .custom-radio-container {
  display: block !important;
  width: 100% !important;
  margin-top: 5px !important;
}

.contact-form-area .custom-flex-container .mwform-checkbox-wrapper,
.contact-form-area .custom-radio-container .mwform-radio-wrapper {
  display: flex !important;
  flex-direction: row !important;  
  flex-wrap: wrap !important;     
  gap: 20px !important;           
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* 選択肢内の各要素（spanやlabel）が縦に潰れるのを防ぐ */
.contact-form-area .custom-flex-container span,
.contact-form-area .custom-radio-container span {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  margin: 0 20px 0 0 !important;
  padding: 0 !important;
}

/* 各選択肢のテキストラベルの横並びを徹底 */
.contact-form-area .custom-flex-container label,
.contact-form-area .custom-radio-container label {
  display: inline-flex !important; 
  align-items: center !important;  
  flex-direction: row !important;  
  font-size: 15px !important;
  font-weight: normal !important;  
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;  
  cursor: default !important; /* 【修正】「はい」「お見積もり」などの文字の箇所も矢印のままにする */
  color: #333 !important;
}

/* ラジオボタン・チェックボックス自体の見た目（白化対策の根本解決） */
.contact-form-area input[type="radio"],
.contact-form-area input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;     
  
  display: inline-block !important; 
  float: none !important;           
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid #767676 !important; 
  background-color: #fff !important;    
  margin: 0 8px 0 0 !important;     
  padding: 0 !important;
  flex-shrink: 0 !important;        
  cursor: pointer !important; /* 【重要】この丸や四角のパーツの上「だけ」手のマークにする */
  transition: all 0.2s ease;
}

/* ラジオボタンをきれいな正円にする */
.contact-form-area input[type="radio"] {
  border-radius: 50% !important;
}

/* チェックボックスは少しだけ角丸にしてスマートに */
.contact-form-area input[type="checkbox"] {
  border-radius: 2px !important;
}

/* マウスホバー時に枠線を黒く際立たせる */
.contact-form-area input[type="radio"]:hover,
.contact-form-area input[type="checkbox"]:hover {
  border-color: #333 !important;
}

/* --- 選択（チェック）が入った時の内部マークデザイン --- */

/* ラジオボタン：中央に黒いポチ（丸）を表示 */
.contact-form-area input[type="radio"]:checked {
  border-color: #333 !important;
}
.contact-form-area input[type="radio"]:checked::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #333 !important;
}

/* チェックボックス：背景をシックな黒にして、中央に白いレ点チェックを表示 */
.contact-form-area input[type="checkbox"]:checked {
  background-color: #333 !important;
  border-color: #333 !important;
}
.contact-form-area input[type="checkbox"]:checked::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}


/* 5. 確認画面（送信前確認）の表示調整 */
/* 確認画面のときは、入力枠線を消してテキストだけが並ぶようにしてスマートに見せる */
.mwform-confirm-form .contact-form-area input[type="text"],
.mwform-confirm-form .contact-form-area input[type="email"],
.mwform-confirm-form .contact-form-area textarea {
  border: none !important;
  background: transparent !important;
  padding: 5px 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* 確認画面ではラジオ・チェックの丸や四角の枠自体を消し、選択された文字だけを見せる */
.mwform-confirm-form .contact-form-area input[type="radio"],
.mwform-confirm-form .contact-form-area input[type="checkbox"] {
  display: none !important;
}


/* 6. お問い合わせボタンエリア（重複を解消し、表示切り替えを最適化） */
.form-btn-area {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 40px !important;
}

/* すべてのボタン共通のベースデザイン */
.form-btn-area .btn-confirm,
.form-btn-area .btn-back,
.form-btn-area .btn-submit {
  padding: 15px 40px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border: 1px solid #333 !important;
  background: #fff !important;
  color: #333 !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: all 0.3s ease;
}

/* 送信ボタン：ブランドのメインCTAとして黒背景にする */
.form-btn-area input[type="submit"] {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  padding: 16px 20px;
  border: 1px solid #333;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s ease;
  cursor: pointer;
}
.form-btn-area input[type="submit"]:hover {
	background: #333;
	opacity: 0.9;
}

/* ボタンホバー時のエフェクト */
.form-btn-area .btn-confirm:hover,
.form-btn-area .btn-back:hover,
.form-btn-area .btn-submit:hover {
  opacity: 0.8 !important;
}

/* --- 【画面切り替えロジック】 --- */

/* ◆ 初期状態（入力画面） */
/* 「確認画面へ進む」のみ表示、残りのボタンは完全非表示 */
.form-btn-area .btn-confirm { display: inline-block !important; }
.form-btn-area .btn-back,
.form-btn-area .btn-submit  { display: none !important; }

/* ◆ 確認画面に切り替わった時（.mwform-confirm-form クラスが付与された時） */
/* 「確認画面へ進む」を非表示にし、「修正する」「送信する」を表示 */
.mwform-confirm-form .form-btn-area .btn-confirm { display: none !important; }
.mwform-confirm-form .form-btn-area .btn-back,
.mwform-confirm-form .form-btn-area .btn-submit  { display: inline-block !important; }


/* 7. バリデーションエラーメッセージ（入力漏れ・エラーがあったとき） */
.contact-form-area .error {
  display: block !important;
  width: 100% !important;     /* 100%幅にすることで、前の要素の後ろに回り込ませず強制改行させる */
  clear: both !important;     /* 万が一の回り込み干渉も完全にリセット */
  color: #c00 !important;
  font-size: 13px !important;
  font-weight: bold !important;
  margin-top: 10px !important; /* チェックボックスのボタンから少し隙間を空けて見やすく */
  order: 99 !important;        /* Flexbox内の並び順を一番最後に強制指定 */
}

/* ラジオボタンとチェックボックスのエリア内にあるエラーへの個別最適化 */
.contact-form-area .custom-flex-container .mwform-checkbox-wrapper .error,
.contact-form-area .custom-radio-container .mwform-radio-wrapper .error {
  flex-basis: 100% !important; /* Flexboxの中で1行丸ごと占有させる */
  margin-left: 0 !important;
}

.customization_form_txt {
	margin: 30px 0;
}
.thanks-message {
	margin: 30px 0;
}
.no-post {
	width: 100%;
}

/* XXXXXXX
----------------------------------------------- */


@media (max-width: 1024px) {

}

@media (max-width: 767px) {

}