/* =====================================================
   ハッピーそよかぜ注文ページ
   必要なものだけに整理した style4.css
===================================================== */

/* 基本 */
*,
*::before,
*::after{
  box-sizing:border-box;
}

:root{
  --base-main:#4E6B5A;
  --base-accent:#A97B36;
  --text-body:#4c564f;
  --text-heading:#4E6B5A;
  --text-sub:#7f8a83;
  --bg-page:#ffffff;
  --bg-h2:#f2efe8;
  --border-main:#c8d3cc;
  --cta-color:#2F8F63;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding:0;
  background:var(--bg-page);
  color:var(--text-body);
  font-family:'メイリオ', Meiryo, sans-serif;
  font-size:15px;
  line-height:1.9;
}

img{
  max-width:100%;
  height:auto;
  border:0;
  vertical-align:bottom;
}

a{
  color:var(--base-main);
  text-decoration:underline;
}

a:hover{
  opacity:0.85;
  text-decoration:none;
}

p{
  margin:0 0 1.2em 0;
  line-height:1.9;
}

/* 全体枠 */
.main-content-frame-wide{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:0 10px;
  background:#ffffff;
}

/* H1 */
h1{
  margin:0;
  color:var(--text-heading);
  font-size:10pt;
  line-height:1.5;
  font-family:"ＭＳ 明朝", serif;
}

.site-h1{
  margin:0 0 16px 0;
  text-align:left;
  line-height:1.5;
  font-weight:700;
}

.site-h1-top{
  display:inline-block;
  margin-bottom:8px;
  font-size:0.95rem;
  line-height:1.6;
  color:var(--base-main);
  letter-spacing:0.04em;
}

.site-h1-main{
  display:inline-block;
  font-size:1.55rem;
  line-height:1.5;
  color:#3f2e21;
  letter-spacing:0.02em;
}

/* 上部右側案内 */
.fv-topline-right{
  width:100%;
  text-align:right;
  padding-top:10px;
}

.site-tel{
  margin:0;
  font-size:1rem;
  font-weight:bold;
  color:var(--base-main);
  line-height:1.7;
  white-space:normal;
}

.catch-copy{
  display:inline-block;
  font-size:70%;
  color:#666666;
  line-height:1.6;
}

.site-sub{
  margin:6px 0 0 0;
  font-size:12px;
  line-height:1.6;
  color:var(--text-sub);
}

/* H2 */
h2{
  position:relative;
  margin:24px 0 16px;
  padding:13px 12px 13px 40px;
  font-size:12pt;
  font-weight:700;
  line-height:1.4;
  color:var(--text-heading);
  background:var(--bg-h2);
  border-top:2px solid var(--border-main);
  border-bottom:2px solid var(--border-main);
  border-radius:6px;
}

h2::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:10px solid var(--base-accent);
}

/* 商品エリア */
.product-area{
  background:#2b2b2b;
  padding:18px 12px;
  border-radius:8px;
  color:#ffffff;
}

.product-area table,
.product-area tr,
.product-area td{
  display:block;
  width:100% !important;
}

.product-area td{
  padding:10px 0 !important;
  text-align:center !important;
}

.product-area img{
  width:100% !important;
  height:auto;
}

/* 商品情報ボックス */
.info-box{
  display:block;
  width:100%;
  margin:10px auto;
  border:2px solid #4f9778;
  border-radius:8px;
  overflow:hidden;
  background:#ffffff;
}

.info-label{
  display:block;
  width:100%;
  margin:0;
  padding:10px 12px;
  background:#4f9778;
  color:#ffffff;
  font-size:14px;
  font-weight:bold;
  line-height:1.4;
  text-align:center;
}

.info-text{
  display:block;   /* ←これが大事 */
  width:100%;
  margin:0;
  padding:10px 12px;
  background:#ffffff;
  color:#2f4f43;
  font-size:15px;
  line-height:1.6;
  text-align:center;
}

/* 注文フォーム */
.order-form-table{
  width:100% !important;
  border-collapse:separate;
  border-spacing:0 14px;
  background:transparent !important;
}

.order-form-table tbody,
.order-form-table tr{
  display:block;
  width:100%;
}

.order-form-table td{
  display:block;
  width:100% !important;
  vertical-align:middle;
}

/* 項目名 */
.order-form-table td:first-child{
  border-left:none !important;
  border-top:5px solid #059ccb !important;
  background:#f4fbfc !important;
  padding:0 !important;
  border-radius:8px 8px 0 0;
}

.order-form-table td:first-child div{
  min-height:auto !important;
  display:block !important;
  padding:12px 12px 10px !important;
  line-height:1.6 !important;
}

.order-form-table td:first-child span{
  display:block;
  font-size:15px;
  line-height:1.6;
  color:#333333;
}

/* 入力部分 */
.order-form-table td:last-child{
  padding:12px !important;
  background:#ffffff !important;
  border-radius:0 0 8px 8px;
  box-shadow:0 0 0 1px #d9e3de inset;
}

.order-form-table input[type="text"],
.order-form-table input[type="email"],
.order-form-table textarea,
.order-form-table select{
  width:100% !important;
  padding:12px 14px;
  font-size:16px !important;
  line-height:1.6;
  border:1px solid #cfd8d3;
  border-radius:6px;
  box-sizing:border-box;
  color:#333333;
  background:#ffffff;
  font-family:'メイリオ', Meiryo, sans-serif;
}

.order-form-table input[type="text"],
.order-form-table input[type="email"]{
  height:50px !important;
}

.order-form-table textarea{
  min-height:120px !important;
  resize:vertical;
}

.order-form-table label{
  display:block;
  margin-bottom:10px;
  line-height:1.8;
}

.order-form-table input[type="radio"]{
  transform:scale(1.15);
  margin-right:8px;
}

#address-candidates-wrap{
  margin-top:10px !important;
}

/* 送信ボタン */
input[type="submit"]{
  width:100%;
  max-width:100%;
  background:var(--cta-color);
  color:#ffffff;
  border:none;
  padding:16px 14px !important;
  font-size:17px !important;
  font-weight:bold;
  border-radius:8px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
}

/* フッター */
.sp-footer{
  width:100%;
  margin:28px auto 0;
  padding:18px 12px 20px;
  background:#f5f3ee;
  border-top:1px solid #d8ddd8;
  text-align:center;
}

.sp-footer-copy{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#5f665f;
  word-break:break-word;
}

.sp-footer a{
  color:var(--base-main);
  text-decoration:underline;
}

.sp-footer-byline{
  margin:8px 10px 14px;
  text-align:right;
  font-size:12px;
  line-height:1.6;
  color:#7a807a;
}

.sp-footer-byline a{
  color:#7a807a;
  text-decoration:underline;
}

/* TOPへ */
.gotop{
  display:block;
  width:52px;
  height:52px;
  background:#ffffff;
  border:1px solid #999999;
  padding-top:26px;
  text-align:center;
  letter-spacing:-1px;
  font-size:75%;
  text-decoration:none;
  color:#333333;
  opacity:0.5;
  position:fixed;
  bottom:14px;
  right:14px;
  z-index:10000;
  box-sizing:border-box;
}

.gotop::before{
  content:"";
  display:block;
  border-top:2px solid #333333;
  border-right:2px solid #333333;
  width:25%;
  height:25%;
  top:25%;
  left:0;
  right:0;
  margin:auto;
  position:absolute;
  transform:rotate(-45deg);
}

.gotop:hover{
  opacity:1;
}


.product-block{
  display:block;
  width:100%;
}

.product-image{
  width:100%;
  margin:0 0 10px 0;
}

.product-info{
  width:100%;
}

.product-size{
  width:100%;
  margin:10px 0;
}

.product-area .info-box{
  width:100%;
  margin:10px 0;
}

.product-area .info-label{
  text-align:center;
}

.product-area .info-text{
  text-align:center;
}


/* =====================================================
   お支払いとお届けの流れブロック全体
   ・外枠
   ・背景色
   ・余白
   ・読みやすさ
===================================================== */
.payment-flow-box{
  width: 92%;                         /* 横幅を少ししぼって見やすくする */
  margin: 24px auto;                  /* 上下に余白を入れて中央配置 */
  padding: 20px 18px;                 /* 箱の内側の余白 */
  background: #fffdf8;                /* やわらかい白系の背景 */
  border: 1px solid #e6ddd2;          /* 薄い枠線 */
  border-radius: 10px;                /* 角を少し丸くする */
  box-sizing: border-box;             /* paddingを含めて幅を計算する */
  line-height: 1.9;                   /* 行間を広めにして読みやすくする */
  color: #4f4a44;                     /* 本文の文字色 */
  font-size: 15px;                    /* 基本の文字サイズ */
}

/* =====================================================
   一番上のタイトル
   ・赤系で少し目立たせる
   ・太字で見出し化
===================================================== */
.payment-flow-title{
  margin: 0 0 14px 0;                 /* 下に少し余白を入れる */
  font-size: 16px;                    /* タイトルなので少し大きめ */
  font-weight: bold;                  /* 太字 */
  color: #b94f3c;                     /* やわらかい赤茶系 */
}

/* =====================================================
   最初の説明文
   ・少し落ち着いた色
   ・タイトルより主張しすぎない
===================================================== */
.payment-flow-lead{
  margin: 0 0 18px 0;                 /* 下に余白を入れる */
  color: #5f5851;                     /* やや落ち着いた文字色 */
}

/* =====================================================
   前払い／後払い それぞれのまとまり
   ・背景を少し変えて区切る
===================================================== */
.payment-flow-section{
  margin: 0 0 18px 0;                 /* 各ブロックの下の余白 */
  padding: 14px 14px 12px;            /* ブロック内の余白 */
  background: #fff;                   /* 中の箱は白にする */
  border: 1px solid #ece4d9;          /* 薄い枠線 */
  border-radius: 8px;                 /* 角を少し丸くする */
}

/* =====================================================
   各ブロックの小見出し
   ・前払い／後払いの見出し
===================================================== */
.payment-flow-head{
  margin: 0 0 10px 0;                 /* 下に余白 */
  font-weight: bold;                  /* 太字 */
  color: #7a4d2f;                     /* 少し落ち着いた茶系 */
  font-size: 15px;                    /* 本文より少し強い */
}

/* =====================================================
   流れの1行
   ・矢印の流れを見やすくする
===================================================== */
.payment-flow-route{
  margin: 0 0 12px 0;                 /* 下に余白 */
  padding: 10px 12px;                 /* 内側余白 */
  background: #f8f4ee;                /* 少し色を付けて目立たせる */
  border-left: 4px solid #c8a98a;     /* 左に縦線を入れて見やすくする */
  color: #4f4a44;                     /* 文字色 */
  font-weight: 500;                   /* 少しだけ強め */
}

/* =====================================================
   箇条書き全体
   ・左の余白調整
===================================================== */
.payment-flow-list{
  margin: 0;                          /* 余白をリセット */
  padding-left: 1.2em;                /* 箇条書きの左余白 */
}

/* =====================================================
   箇条書き1つずつ
   ・詰まりすぎないように少し間をあける
===================================================== */
.payment-flow-list li{
  margin-bottom: 6px;                 /* 項目ごとの下余白 */
}

/* =====================================================
   最後の相談文
   ・やわらかく目立たせる
===================================================== */
.payment-flow-note{
  margin: 14px 0 0 0;                 /* 上に余白 */
  font-size: 15px;                    /* 本文と同じくらい */
  color: #b94f3c;                     /* タイトルと合わせた赤茶系 */
  font-weight: bold;                  /* 少し強めに見せる */
}

/* =====================================================
   スマホ向け微調整
   ・文字を少し読みやすく
   ・矢印の流れを詰めすぎない
===================================================== */
@media screen and (max-width: 768px){
  .payment-flow-box{
    width: 94%;                       /* スマホでは少し広めに使う */
    padding: 18px 14px;               /* 左右余白をやや小さくする */
    font-size: 14px;                  /* 文字を少しだけ小さくする */
  }

  .payment-flow-title{
    font-size: 15px;                  /* タイトルも少し小さくする */
  }

  .payment-flow-head{
    font-size: 14px;                  /* 小見出しもスマホ向けに調整 */
  }

  .payment-flow-route{
    font-size: 14px;                  /* 流れの文字サイズ */
    line-height: 1.8;                 /* 行間を少し広めにする */
  }

  .payment-flow-note{
    font-size: 14px;                  /* 最後の注意文も調整 */
  }
}