@charset "UTF-8";
html {
  font-size: 16px;
  overflow-y: scroll;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Osaka,
    "ＭＳ Ｐゴシック", sans-serif;
}
#body-in {
  background-color: #f3f3f3;
}
.step-wrapper {
  margin-bottom: 30px;
}
.contents-wrapper {
  width: 960px;
  margin: 0 auto;
}
body {
  font-weight: 200;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 1px;
  word-break: break-all;
}
.h1-title-wrapper {
  background-color: #20364b;
  text-align: left;
  padding: 18px 10px;
  color: #fff;
}
.h1-title-area h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto;
}
.step-area {
  padding-top: 40px;
}
.step01-now {
  display: flex;
  margin: 0;
}
.step01-now li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.step02-now {
  display: flex;
  margin: 0;
}
.step02-now li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.step03-now {
  display: flex;
  margin: 0;
}
.step03-now li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.step01 p {
  margin: 0;
  padding: 12px 20px;
  text-align: left;
}
.step02 p {
  margin: 0;
  padding: 12px 20px;
  text-align: left;
}
.step03 p {
  margin: 0;
  padding: 12px 20px;
  text-align: left;
}
.step01 p .txt {
  font-size: 18px;
  display: block;
  line-height: 1.4em;
}
.step01 p .small {
  font-size: 12px;
  display: block;
  padding-top: 14px;
  line-height: 1.4em;
}
.step01 {
  background: url(../img/step-ar003.gif) #ffffff no-repeat right 0;
  background-size: 25px 100%;
  color: #4d585b;
}
.step02 {
  background: url(../img/step-ar003.gif) #ffffff no-repeat right 0;
  background-size: 25px 100%;
  color: #4d585b;
}
.step02 p .txt {
  font-size: 18px;
  display: block;
  line-height: 1.4em;
}
.step02 p .small {
  font-size: 12px;
  display: block;
  padding-top: 14px;
  line-height: 1.4em;
}
.step03 {
  background: #ffffff;
  color: #4d585b;
}
.step03 p .txt {
  font-size: 18px;
  display: block;
  line-height: 1.4em;
}
.step03 p .small {
  font-size: 12px;
  display: block;
  padding-top: 14px;
  line-height: 1.4em;
}
.zipcode {
  display: flex;
  gap: 8px;
  align-items: flex-start; /* ← 縦方向を上寄せにする */
  flex-wrap: wrap;
}
.zipcode br {
  display: none;
}
.image-normal {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contents-area .outline-area .image-normal .img-area {
  width: 50%;
}
.contents-area .outline-area .image-normal .img-area img {
  width: 100%;
}
.contents-area .h2-title-area .h2-title-inner {
  background-color: #34495e;
  border-left: 12px solid #20364b;
  box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.2);
}
.contents-area .h2-title-area h2 {
  padding: 12px 15px;
  color: #ffffff;
}
.contents-area .h2-title-area h2 span {
  font-size: 22px;
}
.contents-area .form-box {
  background-color: #ffffff;
  border-left: none;
  border-top: none;
  box-shadow: 0px 4px 2px -3px rgba(114, 114, 114, 0.15);
  -moz-box-shadow: 0px 4px 2px -3px rgba(114, 114, 114, 0.15);
  -webkit-box-shadow: 0px 4px 2px -3px rgba(114, 114, 114, 0.15);
}
.contents-area .form-box-table {
  width: 100%;
  display: table;
  box-sizing: border-box;
}
.contents-area .form-box-table .item-title {
  background-color: #34495e;
  color: #ffffff;
  vertical-align: middle;
  border-top: 1px solid #f3f3f3;
  border-bottom: none;
  border-right: none;
}
.contents-area .form-box-table .item-title {
  word-break: break-all;
  display: table-cell;
  width: /*230px*/ 25%;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  background-color: #f1f1f1;
  padding: 15px 15px;
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.check-radio li {
  list-style: none;
}
label {
  font-size: 16px;
  font-weight: 100;
}
.contents-area .img-right-box .outline-inner .img-area {
  float: right;
  margin-left: 20px;
  padding-bottom: 30px;
}
/* 行全体 */
.confirm-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  text-align:center;
  margin-top:24px;
}

/* ボタンの共通ベース */
.confirm-actions .btn,
.confirm-actions input[type="submit"].btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8em;
  min-width:260px;          /* 横幅は好みで */
  min-height:48px;
  padding:0 22px;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:transform .05s, filter .2s, box-shadow .2s, background .2s, border-color .2s, color .2s;
}

/* —— メインCTA（赤） —— */
.confirm-actions .btn-cta{
  background:#ef6a5f;                 /* ベース色 */
  color:#fff;
  box-shadow:
    0 2px 0 rgba(0,0,0,.08),
    0 8px 16px rgba(239,106,95,.28);
}
.confirm-actions .btn-cta:hover{
  filter:brightness(1.03);
}
.confirm-actions .btn-cta:active{
  transform:translateY(1px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.08),
    0 6px 12px rgba(239,106,95,.22);
}
.confirm-actions .btn-cta:focus{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(239,106,95,.25),
    0 8px 16px rgba(239,106,95,.28);
}

/* 左側の白い丸＋再生（三角）アイコンを疑似要素で生成（画像不要） */
.confirm-actions .btn-cta.icon-play::before{
  content:"";
  width:28px;
  height:28px;
  margin-right:2px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* 白丸＋コーラル三角のSVG（data URI） */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23ffffff'/%3E%3Cpolygon points='11,8 20,14 11,20' fill='%23ef6a5f'/%3E%3C/svg%3E");
}

/* —— セカンダリ（修正する：アウトライン） —— */
.confirm-actions .btn-ghost{
  background:#fff;
  color:#ef6a5f;
  border-color:#ef6a5f;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.confirm-actions .btn-ghost:hover{
  background:rgba(239,106,95,.08);
}
.confirm-actions .btn-ghost:active{
  transform:translateY(1px);
}

/* 無効時（送信中など） */
.confirm-actions .btn[disabled],
.confirm-actions input[disabled].btn{
  opacity:.6;
  cursor:not-allowed;
}

/* CF7のスピナーを横並び中央に */
.confirm-actions .wpcf7-spinner{
  position:static;
  margin:0;
  align-self:center;
}

/* モバイル：縦積み＆全幅 */
@media (max-width: 480px){
  .confirm-actions{ flex-direction:column; }
  .confirm-actions .btn,
  .confirm-actions input[type="submit"].btn{ width:100%; min-width:0; }
}

.contents-area .h2-title-area {
  background-color: transparent;
  margin-bottom: 35px;
  margin-top: 50px;
}
.contents-area .form-box-table .item-title {
  background-color: #34495e;
  color: #ffffff;
  vertical-align: middle;
  border-top: 1px solid #f3f3f3;
  border-bottom: none;
  border-right: none;
}
.contents-area .form-box-table .item-input {
  border-top: 1px solid #f3f3f3;
  border-bottom: none;
  border-right: none;
}
.contents-area .input-txt {
  border: 1px solid #edebeb;
  background: #edecec;
  padding: 10px 8px 10px 8px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
}
.contents-area .form-box-table .item-input {
  word-break: break-all;
  display: table-cell;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 15px 15px;
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.image-normal {
  margin-bottom: 150px;
}
.clearfix {
  display: block;
}
.element.style {
  font-size: 100%;
  line-height: 30px;
}
.txt-area {
  font-size: 14px;
}
.check-radio label {
  font-size: 14px;
  font-weight: 100;
}
.contents-area .outline-area {
  margin: 30px 0 30px 0;
}
.contents-area .outline-area {
  margin-bottom: 30px;
}
.contents-area .outline-area {
  margin: 30px 0 30px 0;
}
.contents-area .outline-area {
  margin-bottom: 30px;
  font-size: 14px;
}
.txt-area {
  margin-top: 20px;
  margin-bottom: 30px;
}

.contents-area .item-agreement .item-agreement-check-area {
  text-align: center;
  padding: 12px 20px 12px 80px;
  margin-top: 15px;
  background-color: #f0f7fc;
  position: relative;
}
.contents-area .bottom-btn-area p {
  text-align: center;
}
.step01-btn a {
  border-radius: 5px;
  background: url(../img/btn-ar001.png) #ed6254 no-repeat 15px 0.65em;
  background-size: 35px auto;
  padding: 20px 60px 20px 90px;
  -webkit-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.3);
  color: #fff;
  text-decoration: none;
}
.contents-area .item-textarea textarea {
  width: 100%;
}
.contents-area .bottom-btn-area p input {
  margin: 0;
  width: auto;
  display: inline-block;
  border: none;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.footer-area {
  padding: 30px 0 0;
  background-color: #ffffff;
  -moz-box-shadow: 0px -2px 8px -1px rgba(0, 0, 0, 0.03);
  -webkit-box-shadow: 0px -2px 8px -1px rgba(0, 0, 0, 0.03);
}
.sig-area {
  padding: 0 0 30px 0;
}
.name {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 6px;
}
.address {
  font-size: 14px;
  line-height: 1.6;
}
.copy-wrapper {
  background-color: #34495e;
}
.copy-area {
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
}
.contents-area .bottom-btn-area {
  margin: 50px auto 50px auto;
}
.g-recaptcha {
  margin-bottom: 50px;
}
.contents-area .agreement-area {
  margin-bottom: 30px;
  margin-top: 40px;
}
iframe {
  border: none;
}
.zipcode-search {
  align-items: center;
}
.contents-area .address-input .zipcode-search {
  padding-left: 10px;
}
.contents-area .address-input .zipcode-search input.search-btn {
  background: #757575;
}
.contents-area .address-input .zipcode-search input.search-btn {
  padding: 10px 15px 10px 15px;
  margin: 0;
  width: auto;
  display: inline-block;
  border: none;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
  line-height: 1;
}
.contents-area .form-box-table .col2-box:first-child {
  margin-top: 0;
}
.contents-area .address-input .zipcode {
  margin: 0 0 20px 0;
}
.contents-area .form-box-table .col2-box .sub-item-title {
  word-break: break-all;
  display: table-cell;
  width: /*120px*/ 20%;
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.contents-area .form-box-table .col2-box .sub-item-title span {
  padding-bottom: 0.7em;
  padding-top: 0.7em;
}
.contents-area .form-box-table .col2-box {
  width: 100%;
  display: table;
  margin-top: 20px;
  box-sizing: border-box;
}
.contents-area .form-box-table .col2-box .sub-item-title {
  word-break: break-all;
  display: table-cell;
  width: /*120px*/ 20%;
  vertical-align: top;
  box-sizing: border-box;
}
.contents-area .item-mail-box02 .mail-sub-txt {
  color: #358d04;
  font-weight: bold;
  padding-top: 10px;
  font-size: 14px;
}
.contents-area .item-mail-box02 input.width01,
.contents-area .item-mail-box02 input.width02 {
  width: 100%;
}
.contents-area .address-input input.width02,
.contents-area .address-input input.width03 {
  width: 100%;
}
.contents-area select.select-list {
  border: 1px solid #edebeb;
  background: #edecec;
  padding: 8px 8px 7px 8px;
  box-shadow: none;
  -webkit-appearance: none;
}
.contents-area .h2-title-area {
  background-color: transparent;
  margin-bottom: 35px;
  margin-top: 50px;
}
.contents-area .item-radio-txt01 ul li {
  margin-bottom: 5px;
}
/* ラッパーで縦積み & 中央揃え */
.bottom-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottom-btn-area {
  display: flex; /* ←これが効く */
  justify-content: center;
  width: 100%;
  flex-direction: column;
}
.policy-box {
  height: 260px; /* 表示高さはお好みで */
  overflow: auto; /* ここでスクロール */
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.8;
}
.policy-box h3 {
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 700;
}
.policy-box p {
  margin: 0 0 12px;
}

/* 念のため、送信ボタンの<p>も中央へ（既に中央ならそのままでOK） */
.step01-btn {
  display: flex;
  justify-content: center;
}

/* reCAPTCHA 自体を中央寄せしやすくする */
.g-recaptcha {
  display: inline-block;
  margin: 0 auto 50px auto;
}
/* STEPバーだけフル幅にする */
.step-area {
  width: 100%;
  margin: 0 auto; /* 中央寄せのautoを外す */
  padding: 50px 16px; /* 任意：左右の余白 */
}
.step02-now {
  width: 100%;
  display: flex !important;
  margin: 0;
}

/* ULを100%に、各STEPを均等幅に */
.step01-now {
  width: 100%;
}
.step01-now > li {
  flex: 1 1 0;
}
.step03-now {
  width: 100%;
}
.step03-now > li {
  flex: 1 1 0;
}
.step02-now > li {
  flex: 1 1 0;
}
/* 必須バッジ */
.badge-required {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  border-radius: 3px;
  background: #e74c3c; /* 赤 */
  color: #fff;
}

/* エラー表示（枠＆背景） */
.is-error .item-title,
.is-error .item-input {
  border-color: #e74c3c !important;
  background: #fff5f5;
}
.is-error .input-txt,
.is-error select {
  border-color: #e74c3c !important;
  background: #fffefe;
  outline: 0;
}

/* エラーメッセージ */
.error-msg {
  color: #e74c3c;
  font-size: 13px;
  margin-top: 6px;
  display: block;
}

/* ラジオやチェックのエラー時に分かりやすく */
.is-error .check-radio {
  outline: 2px solid #e74c3c;
  outline-offset: 4px;
}

/* ボタンの体裁（a要素版） */
.step01-btn a.btn {
  display: inline-block;
  border-radius: 5px;
  background: url(../img/btn-ar001.png) #ed6254 no-repeat 20px;
  background-size: 35px auto;
  padding: 20px 60px 20px 90px;
  box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.3);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.sig-wrapper {
  width: 960px;
  margin: 0 auto;
}
.badge-required {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  background: #d9534f;
  border-radius: 3px;
  vertical-align: middle;
}
footer {
  width: 100vw;
  margin-left: calc(50% - 50vw); /* 中央揃えの親からはみ出させて全幅に */
  margin-right: calc(50% - 50vw);
}
/* エラー時の装飾 */
.form-box-table.is-error .item-title {
  background: #ffecec !important;
  color: #d8000c !important;
}
.confirm-list {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 16px;
}
.confirm-list dt {
  font-weight: bold;
}
.confirm-list dd {
  margin: 0;
}

.form-box-table.is-error .item-input .input-txt,
.form-box-table.is-error .item-input input,
.form-box-table.is-error .item-input textarea,
.form-box-table.is-error .item-input select {
  border-color: #d8000c !important;
  background: #fff;
  outline: 0;
}
/* 確認サマリーを2カラムに */
#confirm-summary {
  display: grid;
  grid-template-columns: 12em 1fr; /* 左=ラベル幅 */
  column-gap: 16px;
  row-gap: 8px;
  margin: 16px 0;
}
#confirm-summary .dt {
  font-weight: 700;
}
#confirm-summary .dd {
  margin: 0;
}

/* エラーメッセージ */
.error-msg {
  margin-top: 8px;
  font-size: 13px;
  color: #d8000c;
}
.copy-area p {
  font-size: 14px;
}
.clear {
  clear: both;
}
footer {
  width: 100%;
}
.item-name-box02 .item-input p {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* 折り返し可 */
  white-space: normal; /* テキストも折り返し可 */
  overflow: hidden; /* はみ出し防止 */
}

/* CF7のラッパを縮められるようにする（重要：min-width:0） */
.item-name-box02 .item-input .wpcf7-form-control-wrap {
  flex: 1 1 0;
  min-width: 0; /* ← これが肝。子要素が親幅内に収まる */
}

/* テキストボックスは親の幅を超えない */
.item-name-box02 .item-input input.width01,
.item-name-box02 .item-input input.width02 {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 960px) {
  .step01-now {
    flex-direction: column;
    gap: 8px;
  }
  .step-wrapper .step-area ul{
    display:flex;
    flex-direction:column;
    align-items:stretch;    /* これで子要素が100%幅に伸びる */
    gap:8px;
    margin:0; padding:0;
  }
  .step-wrapper .step-area ul > li{
    list-style:none;
    width:100% !important;
  }
  .step-wrapper .step-area ul > li > p{
    display:block;
    width:100% !important;
    box-sizing:border-box;
    padding:12px 16px;
    border-radius:6px;
    background-image:none !important;
    background-repeat:no-repeat !important;
    border:none !important;
    box-shadow:none !important;
  }
  .step-wrapper .step-area ul > li > p::before,
  .step-wrapper .step-area ul > li > p::after{
    content:none !important;
  }
  .step-wrapper .step-area .small,
  .step-wrapper .step-area .txt{
    color:inherit !important;
  }
  .step01-now > li {
    min-height: auto;
    width:100%;
  }
  .step01-now li p {
    text-align: left;
    padding: 12px 16px;
  }
  .step01,
  .step02 {
    background-image: none !important;
    width:100%;
  }
  .step03 {
    background: #fff;
  } /* 任意 */
  .step01-now .small {
    font-size: 12px;
  }
  .step01-now .txt {
    font-size: 16px;
  }
  .step01-now li p {
    display: flex;
    align-items: center;
    gap: 0.5em; /* 「STEP1」と本文の間隔 */
    margin: 0;
    padding: 12px 16px;
    text-align: left;
  }
  /* 既存の display:block / padding-top を打ち消す */
  .step01-now li p .small,
  .step01-now li p .txt {
    display: inline !important;
    padding-top: 0 !important;
  }
  .step01-now .is-current {
    background: #757575 !important;
    color: #000;
  }
  .step-area {
    width: 90%;
  }
  .step01 {
    display: flex;
  }
  #body-in .container-wrapper .header-area .step-area ul.step01-now li.step01 {
    background: url(../img/step-ar004.gif) #757575 no-repeat center bottom;
    background-size: 1000px auto;
  }
  .form-box {
    display: flex;
    flex-direction: column;
  }
  #body-in {
    min-width: 0;
  }

  /* 上部の画像＋テキストも縦積み */
  .image-normal {
    flex-direction: column;
    gap: 12px;
  }
  .image-normal .img-area {
    width: 100%;
    margin: 0;
  }

  /* フォームの2カラム（項目名/入力）を縦積みに変更 */
  .contents-area .form-box-table {
    display: block;
  }
  .contents-area .form-box-table .item-title,
  .contents-area .form-box-table .item-input {
    display: block;
    width: 100%;
    border-right: none;
  }
  .contents-area .form-box-table .item-title {
    padding: 10px 12px;
  }
  .contents-area .form-box-table .item-input {
    padding: 12px;
  }
  .item-input p {
    width: 100%;
  }
  /* 住所の内側2カラムも縦積みへ */
  .contents-area .form-box-table .col2-box {
    display: block;
    margin-top: 12px;
  }

  .contents-area .form-box-table .col2-box .sub-item-title,
  .contents-area .form-box-table .col2-box .sub-item-input {
    display: block;
    width: 100%;
  }

  /* 入力要素は基本フル幅に */
  .contents-area .form-box input[type="text"],
  .contents-area .form-box select-list,
  .contents-area .form-box textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .contents-area .address-input .zipcode {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .zipcode {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .contents-area .address-input .zipcode .width01 {
    flex: 1 1 140px;
  }
  .contents-area .address-input .zipcode-search {
    padding-left: 0;
  }

  /* 電話番号 3分割は折り返し可に */
  .item-tel-box02-single .item-input p {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .item-tel-box02-single .item-input input {
    flex: 1 1 110px; /* 端末幅に応じて可変 */
  }

  /* ラジオやチェックも余白を少し広めに */
  .check-radio ul {
    padding-left: 0;
  }
  .check-radio li {
    margin-bottom: 8px;
  }
  .clearfix {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .contents-area.clearfix {
    display: block;
  }
  .contents-area form {
    width: 95%;
    max-width: 680px;
    margin-inline: auto; /* 左右中央 */
    align-self: center; /* flexの横方向ストレッチを無効化 */
    box-sizing: border-box;
  }
  .contents-area .clearfix {
    width: 100%;
    margin: 0 auto;
  }
  .contents-area .form-box-table {
    display: block;
  }
  .contents-area .form-box-table .item-title,
  .contents-area .form-box-table .item-input {
    display: block;
    width: 100%;
    border-right: none;
  }
  .contents-area .form-box input[type="text"],
  .contents-area .form-box select,
  .contents-area .form-box textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .contents-area .outline-area .image-normal .img-area {
    width: 90%;
  }
  .step-wrapper {
    margin-bottom: 0;
  }
  .sub-item-input p {
    margin-top: 10px;
  }
  .item-name-box02 .item-input p {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* どうしても1行にしたい場合 */
    white-space: nowrap; /* テキストが折り返されないように */
  }
  .item-name-box02 .item-input input.width01,
  .item-name-box02 .item-input input.width02 {
    width: auto !important; /* 全体の100%指定を無効化 */
    flex: 1 1 0; /* 2つの入力を等分 */
    min-width: 110px; /* 端末が狭すぎても潰れない保険 */
    box-sizing: border-box;
  }
  .form-box {
    margin-bottom: 20px;
  }
  .sig-wrapper {
    width: 95%;
    margin: 0 auto;
  }
  .contents-wrapper {
    width: 95%;
    margin: 0 auto;
  }
  
}
@media (max-width: 500px) {
  .h1-title-area h1 {
    font-size: 20px;
  }
  .contents-area .h2-title-area h2 span {
    font-size: 16px;
  }
  .item-title {
    font-size: 14px;
  }
  .check-radio label {
    font-size: 12px;
    font-weight: 100;
  }
  .copy-area p {
    font-size: 12px;
  }
  .sig-wrapper {
    width: 95%;
    margin: 0 auto;
  }
  .name {
    font-size: 16px;
  }
  .address {
    font-size: 10px;
  }
  .footer-area {
    padding: 20px 0 0;
  }
  .sig-area {
    padding: 0 0 15px 0;
  }
  .step-area {
    margin: 0 auto 20px auto;
  }
  .step01 p .txt {
    font-size: 12px;
  }
  .step02 p .txt {
    font-size: 12px;
  }
  .step03 p .txt {
    font-size: 12px;
  }
  .step01-now li p {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    padding: 5px;
    text-align: left;
  }
  .contents-area .item-radio-txt01 ul li {
    margin-bottom: 20px;
  }
  .contents-area .item-agreement .item-agreement-check-area {
    text-align: center;
    padding: 20px;
    margin-top: 15px;
    background-color: #f0f7fc;
    position: relative;
  }
}