@charset "utf-8";

/* ==========================================================
   Reset / Base
========================================================== */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, form, fieldset, legend, table, th, td, caption, a, article, aside, nav, section, figure, figcaption, footer, header, main, audio, canvas, video, menu, details {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline;
}
fieldset, legend, img { border: 0; }
article, aside, nav, section, figure, figcaption, footer, header, main, menu, details { display: block; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html{
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

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

body{
  /* wedding luxury background */
  background: #f6f2ea;
  color: #222;
  font: 16px/1.75 Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
  letter-spacing: .01em;
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6{
  font-weight: normal;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  line-height: 1.25;
  color: #222;
}

p{ margin: 0 0 1em; }

a{ color: #6b5a3f; }
a:link, a.visited{ text-decoration: underline; }
a:hover, a.active{ text-decoration: none; }
a:focus{ outline: thin dotted; }
a:hover, a:active{ outline: 0; }

table{
  border-collapse: collapse;
  border-spacing: 0;
}
th, td{
  font-weight: normal;
  text-align: left;
}
th{ font-weight: 700; }

/* ==========================================================
   Forms (base)
========================================================== */
input, textarea, select{
  margin: 0;
  font-family: inherit;
  font-size: inherit;
}

input, button{
  line-height: normal;
  vertical-align: middle;
}

input[type=text],
input[type=password],
textarea,
select{
  width: 100%;
  max-width: 100%;
  padding: 12px 12px;
  background: #fff;
  border: 1px solid #d9d2c6;
  border-radius: 10px;
}

textarea{
  min-height: 120px;
  overflow: auto;
  vertical-align: top;
}

select{
  padding: 10px 12px;
  background: #fff;
}

input[type=checkbox]{
  width: 18px;
  height: 18px;
  cursor: pointer;
  vertical-align: middle;
}
label{ cursor: pointer; margin-right: 14px; }

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus{
  border-color: #b48a3c;
  box-shadow: 0 0 0 4px rgba(180,138,60,.18);
  outline: none;
}

/* ==========================================================
   Layout
========================================================== */
#wrapper{
  width: min(720px, 100%);
  margin: 16px auto 0;
  background: #ffffff;
  border: 1px solid #e6ddcf;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

#main{ padding: 22px; }

.section{ margin-bottom: 34px; }
.section:last-child{ margin-bottom: 0; }

.section__ttl{
  padding: 18px 18px;
  margin-bottom: 22px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg,#b48a3c,#d6b36a);
  font-size: 20px;
  border-radius: 0; /* bar style */
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}

.section__body{ padding: 0 12px; }

#txt_explain{
  color: #222;
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 10px;
}

.red_txt{
  color: #b03030;
  margin: 10px 0 10px;
  font-size: 15px;
}

/* ==========================================================
   Table (PC)
========================================================== */
.table{
  width: 100%;
  margin-bottom: 18px;
  table-layout: fixed;
  border: 0;
}

.table tr{
  border-bottom: 1px solid #e7dccb;
}

.table th,
.table td{
  padding: 16px;
  border: 0;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table th{
  width: 32%;
  background: #2f2a24; /* charcoal brown */
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: normal;
}

.table td{
  width: 68%;
  background: #fff;
  font-size: 16px;
}

/* ==========================================================
   Buttons
========================================================== */
.button_box{
  clear: both;
  padding: 16px 8px;
  text-align: center;
}

/* shared shape */
.button_box input[type=submit]{
  border: none;
  border-radius: 999px;
  padding: 12px 44px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  margin: 6px 10px;
  min-height: 46px;
}

/* input page "確認" (default) */
.button_box input[type=submit]{
  background: linear-gradient(90deg,#b48a3c,#d6b36a);
  color: #fff;
}

/* confirm page: distinguish */
.button_box input[type=submit][value="送信"]{
  background: linear-gradient(90deg,#8b1e2d,#b03030);
  color:#fff;
}
.button_box input[type=submit][value="戻る"]{
  background: #b9b3a8;
  color:#fff;
}

.button_box input[type=submit]:hover{ opacity: .92; }

.button_box a{
  color: #6b5a3f;
  text-decoration: none;
  font-size: 15px;
}
.button_box a:hover{ text-decoration: underline; }

/* ==========================================================
   Complete page helpers (optional)
   - Use <div class="contact-complete"> ... </div>
   - Use <a class="back-btn" href="...">...</a>
========================================================== */
.contact-complete{
  font-size: 18px;
  line-height: 1.9;
}
.contact-complete p{ margin-bottom: 18px; }

.back-btn{
  display:inline-block;
  background: linear-gradient(90deg,#b48a3c,#d6b36a);
  color:#fff;
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  font-size:16px;
  margin-top:18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.back-btn:hover{ opacity: .92; }

/* ==========================================================
   Mobile (<= 640px): table -> card stack
========================================================== */
@media (max-width: 640px){

  #main{ padding: 14px; }
  .section__ttl{ font-size: 16px; padding: 16px; }
  .section__body{ padding: 0; }

  #txt_explain{ font-size: 15px; }

  .table{
    border: 0;
    margin-bottom: 10px;
  }

  .table tr{
    display: block;
    border: 1px solid #e7dccb;
    border-radius: 14px;
    margin: 0 0 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }

  .table th,
  .table td{
    display: block;
    width: 100% !important;
    padding: 14px;
  }

  .table th{
    background: #2f2a24;
    color: #fff;
    font-size: 14px;
  }

  .table td{
    font-size: 16px;
  }

  /* buttons: stack */
  .button_box{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .button_box input[type=submit]{
    width: 100%;
    max-width: 520px;
    margin: 0;
  }
}