@charset "UTF-8";

/* ======================================================= */
/* product-buttons (コンポーネント) */
/* ======================================================= */
.product-buttons {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
}

/* フォーム部分 */
.contact-form{
  border: 1px solid silver;
}

.form-row{
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid silver;
  border-right: 1px solid silver;
  border-top: 1px solid silver;
}

/* form-rowの最後の行だけ下線有りにする。htmlのクラスにhas-endlineを併記する */
.has-endline{
  border-bottom: 1px solid silver; 
}

.form-label-up{
  width: 240px;
  font-weight: 700;
  padding-left: 3px;
  border-right: 1px solid silver;
  padding: .5rem .6rem;
  background-color: #f7f7f9; /* 旧 #f0f0f0 より少しニュートラル */
}

.form-label{
  width: 215px;
  font-weight: 700;
  padding-left: 3px;
  border-right: 1px solid silver;
  padding: .5rem .6rem;
  background-color: #f7f7f9; /* 旧 #f0f0f0 より少しニュートラル */
}

.form-input{
	 /* 入力項目の枠の色など） */
  flex-grow: 1;
  background: #fff; /* 入力面は白で可読性UP（旧 #efffe8 を中和） */
  padding: .5rem .6rem;
  font-size: 1rem;
}

.form-control{
  border: 2px solid #004000;
  padding: 5px;
  width: 90%;
}

.form-caption{
  text-align: center;
  border-left-width: 1px;
  border-right-width: 1px;
  border-left-style: solid;
  border-right-style: solid;
  border-left-color: silver;
  border-right-color: silver;
  background-color: #003300;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 17px;
  font-weight: 700;
  color: white;
}

.form-description{
  background-color: white;
  text-align: center;
  font-weight: 700;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 14px;
}

/* フォーム記入欄の横幅設定 clipmailの設定にも効いている。ID指定はClass指定を上回る) */
/* ▼フォーム記入欄の横幅設定（PCのみ反映）▼ */
@media (min-width: 960px){
  #subject{
    width: 450px;
  }
  #company{
    width: 250px;
  }
  #name{
    width: 250px;
  }
  #email{
    width: 250px;
  }
  #zip{
    width: 100px;
  }
  #addr1{
    width: 400px;
  }
  #addr2{
    width: 400px;
  }
  #tel{
    width: 110px;
  }
  #fax{
    width: 110px;
  }
  #clip1{
    width: 250px;
  }
  #clip2{
    width: 250px;
  }
  #texte{
    width: 600px;
    height: 400px;
  }
  #size1, #size2, #size3{
    width: 200px;
  }
  #size-nanuno1, #size-nanuno2, #size-nanuno3{
    width: 180px;
  }
}
/* ▲フォーム記入欄の横幅設定 ここまで ▲ */



/* SNSリスト */
.utility-sns-list{
	list-style: none; margin: 0; padding: 0; display: flex; gap: 15px;
}
.utility-contact .tel-link{
	font-weight: bold; font-size: 1.2em; color: white; background-color: transparent;
}

/* メイン見出し */
.main-heading{
	font-size: 24px; font-weight: 700; color: #333; margin-bottom: 15px; border-bottom: 2px solid #ccc; padding-bottom: 5px;
}

/* 特定商取引法ページ (kozinjoho-rule.html) の CSS */
.trade-law-section{
	padding: 20px 0;
}
.dl-row{
	display: flex; flex-wrap: wrap; border-top: 1px solid #ddd; background-color: #f7f7f7;
}
.tradelaw-list .dl-row:last-of-type{
	border-bottom: 1px solid #ddd;
}
.trade-term{
	width: 180px; flex-shrink: 0; background-color: #eee; font-weight: bold; padding: 10px 10px; line-height: 1.7; border-right: 1px solid #ddd;
}
.trade-description{
	flex-grow: 1; margin-left: 0; padding: 10px 15px; line-height: 1.7; background-color: white;
}
.trade-description a{
	padding: 5px; display: inline-block;
}
.trade-description ul, .trade-description ol{
	margin: 10px 0 10px 20px; padding: 0;
}
.trade-description strong u{
	font-size: 1.05em; color: #5b0000;
}

.privacy-section{
	padding: 20px 0;
}
.privacy-rules{
	list-style-type: decimal; margin: 20px 0 20px 40px; padding: 0;
}
.privacy-rules li{
	margin-bottom: 20px; padding: 10px; border-bottom: 1px dashed #ccc;
}
.privacy-rules h3{
	font-size: 1.3em; font-weight: bold; color: #004000; margin: 0 0 10px 0; padding-bottom: 5px; border-bottom: 1px solid #004000;
}
.privacy-rules p{
	margin: 10px 0; line-height: 1.7; text-indent: 1em;
}
.disclosures-list{
	margin: 10px 0 10px 25px;
}

/* s▼▼　ジェミニフォームアコーディオン　20251025▼▼ */
.contact-form{
    border: none; /* 外枠のsilverを削除 */
    background-color: #fff;
    padding: 15px;
}

/* fieldsetとlegendの調整 */
.order-fieldset{
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px 15px;
    margin-top: 15px;
}
.order-legend{
    width: auto;
    border: none;
    padding: 0 10px;
}

/* チェックボックスのラベルデザイン */
.check-toggle{
    display: block;
    background-color: #f7faff;
    margin-top: 10px;
    margin-bottom: -4px;
    border: 2px solid var(--c-key);
    padding: 8px 15px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
}
.note-text{
    font-weight: 400;
    color: var(--c-accent); /* 赤色で強調 */
    font-size: 0.9em;
    margin-left: 10px;
}

/* input type=checkbox のサイズと位置を調整（既存のスタイルによっては !important が必要） */
.check-toggle input[type="checkbox"]{
    transform: scale(1.3);
    margin-right: 10px;
    vertical-align: middle;
}

/* アコーディオン全体 */
.order-accordion{
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

/* summary (トグルボタン) のスタイル */
.accordion-toggle{
    cursor: pointer;
    list-style: none;
    padding: 12px 15px;
    background-color: var(--c-soft); /* 薄い色 */
    font-weight: 700;
    color: var(--c-key);
    border-bottom: 1px solid #ddd;
    /* 常に "+" が付くように調整 */
}
.accordion-toggle::-webkit-details-marker {
    display: none;
}
.accordion-toggle .plus-sign{
    font-size: 1.5em;
    margin-right: 10px;
    transition: transform 0.2s;
}
.order-accordion[open] .plus-sign{
    content: "?";
    transform: rotate(45deg); /* 開いたときに回転させる */
}
/* fieldsetをdetailsの内側（summaryより下）に配置したため、fieldsetのmargin-topを削除して詰める */
.order-accordion fieldset{
    margin-top: 0;
}

/* =========================================
   ▼ フォーム基礎（読みやすさ＆タップしやすさ）
   ========================================= */
.contact-form,
.contact-form-main-area{
  --form-fz: 16px;
  --form-gap: .65rem;
  font-size: var(--form-fz);
  line-height: 1.65;
}

/* 入力の使いやすさ（44px 高の確保・幅100%） */
.form-control,
.form-input select,
.form-input input[type="text"],
.form-input textarea{
  width: 100%;
  min-height: 36px;
  padding: .2rem .2rem;
  border: 1px solid #1B9544;   /* 旧 #004000/2px を穏やかに */
  border-radius: 6px;
  background: #fff;
}

/* 視認性の高いフォーカス */
.form-control:focus,
.form-input select:focus,
.form-input input[type="text"]:focus,
.form-input textarea:focus{
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #3b82f6;
}

/* セレクトボックスの横幅PCとモバイル */
.form-input select{
  width: auto;
  min-width: 200px;  /* 折り返し防止の下限 */
}

@media (max-width: 768px) {
  .form-input select{
    width: 100%;
  }
}


/* 小さめの注釈 */
.note-text,
.note-text-small{
  color: #666;
  font-weight: 400;
  line-height: 1.45;
}
.note-text-small{
	font-size: .9em; margin-top: .25rem;
}

/* =========================================
   ▼ オーダー内容（fieldset）を視覚的にグループ化
   ========================================= */
.order-fieldset{
  border: 1px solid #e6eef7;
  border-left: 4px solid #2b6cb0; /* アクセントバー */
  background: #F1F6FF;            /* ごく薄いブルー */
  border-radius: 8px;
  padding: .9rem 1rem;
  margin-top: 1rem;                /* 既存と大きくは変えない */
}

.check-toggle{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background-color: #f0f6ff;      /* 薄い青 */
  border: 2px solid #2b6cb0;      /* 既存 var(--c-key) 代替 */
  color: #1c3557;
  padding: .5rem .8rem;
  font-weight: 700;
  border-radius: 5px;
}

/* オーダーを無効化した時（チェックを外す）の視覚 */
.order-fieldset[disabled]{
  opacity: .55;
  filter: grayscale(.1);
}
filter: grayscale(.1);
}

/* ▼ 20251114 最後の作業　スマホ時にフォームが横にはみ出さないようにする ---------------- */
@media (max-width: 768px) {
  /* 入力欄を持つカラムが、画面幅より広がらないようにする */
  .contact-form .form-input {
    min-width: 0;
  }

  /* テキストボックス＆テキストエリアは親の中で100%に収める */
  .contact-form .form-control,
  .contact-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ================================
   スマホ用フォーム調整（幅640px以下）
   ================================ */
@media (max-width: 640px){

  /* ラベルと入力欄は縦並び（前に出したやつ） */
  .contact-form .form-row{
    display: block;
  }
  .contact-form .form-label,
  .contact-form .form-label-up{
    width: 100%;
    display: block;
    border-right: none;
  }
  .contact-form .form-input{
    width: 100%;
  }

  /* ▼ ここが今回いちばん大事：ID 幅を上書きする ▼ */
  #subject,
  #company,
  #name,
  #email,
  #zip,
  #addr1,
  #addr2,
  #tel,
  #fax,
  #clip1,
  #clip2,
  #texte {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* テキストエリアの縦だけ少し小さくする */
  #texte{
    height: 150px;
  }
}


/* ▲ ここまで --------------------------------------------------------- */