@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* コメント欄 */
/* 「コメントする」を非表示 */
.p-commentArea__title { display:none; }


/* ▼▼▼CF7を使ったアンケートのCSS▼▼▼ */

/* Contact Form 7 フォーム全体 */
.cf7-form {
  padding: 2rem 1rem;
	background: #f4f4f4;
}

/* 各フォーム要素 */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
	border-radius: 8px;
	border: 3px solid #81ccd4;
	padding: 0.5rem 1rem; 
	color: #545454;
}

.wpcf7 input,
.wpcf7 textarea {
		width: 100%;
}

.wpcf7 input.kakunin {
	width: auto;
}

label {
    display: inline-block;
    margin: 0.5rem 0;
    padding: 10px;
}


span.imp-check {
	color: red;

}

.wpcf7 .susoage {
	margin: 1rem 0;
}

.wpcf7 .total-cal-box {
	background: #dcca90;
	width: 100%;
	position: fixed;
	bottom: 50px;
	left: 0;
	text-align: center;
	padding: 0.5rem 5rem;
	font-weight: bold;
	color: red;
}

.wpcf7 .total-cal-box {
  display: none; /* 初期状態は非表示 */
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* フェードイン */
}

.wpcf7 .total-cal-box.show {
  display: block;
  opacity: 1;
}

.calc-total-num {
	text-align: center;
	font-weight: bold;
}

.cf7-form [type="submit"] {
  padding: 0.5rem 1rem; /* ボタンのpaddingを少し広めに */
  border-radius: 8px; 
  font-size: large;
  font-weight: bold;
  background-color: #72b9d5;
}

.wpcf7 .caution {
	color: #f33f3f;
	font-weight: bolder;
}

.wpcf7 .order-indiv {
	margin: 2rem 1rem;
}


.wpcf7 .ttl-for-whom {
	font-weight: bold;
	font-size: x-large;
	margin-top: 4rem;
	border-bottom: 1px solid black; /* 下線: 1pxの太さ、実線、黒色 */
}


.wpcf7 .ttl-for-type {
	padding: 1rem;
	font-size: x-large;
	color: #3d88d3;
	margin-top: 4rem;
}

.wpcf7 .ttl-for-type p {
	  font-weight: bold;
}

.wpcf7 .ttl-name {
	margin-bottom: 0.5rem;
	font-size: medium;
}

.wpcf7 .before-send {
	font-size: large;
	text-align: left;
	margin-top: 2rem;
	margin-bottom: 0rem;
}


/* ▼アンケート系の調整 */

.bounenkai-choice p {
	text-align: center;
}
/* CF7ラジオボタンを縦並びに */
.wpcf7-radio .wpcf7-list-item {
	margin-top: 1rem;
}

/* radioの1項目は横並び、各選択は縦並び */
.list-radio label {
	padding: 0;
	margin: 0;
}
.list-radio input {
	width: auto;
}

/* radioの選択を画像にする */
div.bounenkai .wpcf7-list-item .wpcf7-list-item-label:after {
    content: '';
	display: inline-block;
	width: 270px;/*画像の幅*/
	height: 270px;/*画像の高さ*/
	background-size: 100%;
	vertical-align: middle;
	background-position: center;
	background-repeat: no-repeat;
}
@media screen and (min-width: 740px){
	div.bounenkai .wpcf7-list-item .wpcf7-list-item-label:after {
		width: 240px;/*画像の幅*/
		height: 240px;/*画像の高さ*/
	} 
}


/* 選択肢1の画像 */
div.bounenkai .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label:after {
	background-image: url(https://portal.nt-matex.com/wp-content/uploads/2024/10/shabushabu-1.jpg);
}

/* 選択肢2の画像 */
div.bounenkai .wpcf7-list-item:nth-of-type(2) .wpcf7-list-item-label:after {
	background-image: url(https://portal.nt-matex.com/wp-content/uploads/2024/10/sukiyaki.jpg);
}

/* 選択肢3の画像 */
div.bounenkai .wpcf7-list-item:nth-of-type(3) .wpcf7-list-item-label:after {
	background-image: url(https://portal.nt-matex.com/wp-content/uploads/2024/10/fugu.jpg);
}

/* 未チェックの選択肢を薄く表示 */
div.bounenkai .wpcf7-list-item input + .wpcf7-list-item-label:after {
	opacity: 0.33;
	transition :all 1s;
}
/* チェックされた選択肢を濃く表示 */
div.bounenkai .wpcf7-list-item input:checked + .wpcf7-list-item-label:after {
    opacity: 1;
}

/* ラジオボタンを消す */
div.bounenkai input {
    display: none;
}
/* ラジオボタンの文字を消す */
div.bounenkai-choice input + span {
    font-size: 0;
}


/* SON追記@250930 */
/* 合計金額表示の基本スタイル */
/* 【PC用】合計金額表示の基本スタイル */
.total-price-display {
  /* 画面下部に固定 */
  position: fixed !important;
  bottom: 0 !important; /* ← ここに !important を追加 */
  left: 0 !important;
  width: 100%;
  
  /* 見た目の調整 */
  background-color: #CCC;
  color: #000;
  font-size: 24px;
  font-weight: bold;
  padding: 15px 0;
  text-align: center;
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000 !important;
  
  /* アニメーション効果 */
  transition: background-color 0.3s ease;
}

/* 【共通】50,000円を超えた時の警告スタイル */
.total-price-display.over-limit {
  background-color: #e60012 !important;
  color: #fff !important;
}

/* 【スマホ用】画面幅が768px以下の時の調整 */
@media (max-width: 768px) {
  .total-price-display {
    /* 画面下からの距離をスマホメニューの高さ分だけ空ける */
    bottom: 60px !important; 
  }
}