@charset "UTF-8";

/**
* お問い合わせフォーム
-------------------------------------------------- */


/**
* メイン
-------------------------------------------------- */
.contact-form,.contact-p{
  font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  font-weight: 100;
  font-size: 1.5rem;
}

.ttl-ue{
  font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}

.contact-layout {
  width: 80%;
  display: flex;
  padding-top: 20rem;
  margin: auto;
}

.ttl-bottom{
  margin-bottom: 5rem;
}

.contact-left-column{
  width:35rem;
  margin-right: 10rem;
}

.contact-right-column{
  max-width: 89rem;
}

.add-margin-bottom01{
  margin-bottom: 10rem;
}

.add-margin-bottom02{
  margin-bottom: 20rem;
}

.add-margin-bottom03{
  margin-bottom: 4rem;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各ステップの基本デザイン */
.step {
  display: flex;
  align-items: center;
  margin-bottom: 4rem; /* ステップ間の余白 */
}

/* 丸い部分（数字が入るところ） */
.step-circle {
  display: inline-block;
  width: 24px;             /* 円の直径 */
  height: 24px;            /* 円の直径 */
  border-radius: 50%;      /* 円形にする */
  background-color: #ccc;  /* デフォルトはグレー */
  color: #fff;             /* 数字を白文字に */
  text-align: center;
  line-height: 24px;       /* 垂直方向に中央寄せ */
  margin-right: 8px;       /* テキストラベルとの間隔 */
}

/* ラベルの基本デザイン */
.step-label {
  color: #ccc /* デフォルトはグレー文字 */
}

/* アクティブなステップの色を変更 */
.step.active .step-circle {
  background-color: #91C31E;
}

.step.active .step-label {
  color: #000; /* 黒文字 */
}

.asterisk{
  color: #91C31E;
}

/* フォームの背景色 */
.contact-right-column input,
.contact-right-column textarea {
  background-color: #F5F5F5;
  padding: 1.5rem;
  width: 100%;
  border: none;
}

/* 各フォーム項目の間隔 */
.contact-right-column .form-group,
.contact-right-column fieldset {
  margin-bottom: 3rem;
}

/* fieldset自体のスタイル */
.form-section {
  position: relative;        /* legendを絶対配置するため */
  border: none;             /* 枠線を消す */
  padding: 2rem;
  background-color: #f5f5f5;
  margin-bottom: 3rem;      /* 他の要素との間隔 */
}

/* legendを背景色の上に浮かせる */
.form-section legend {
  position: absolute;       /* 絶対配置 */
  top: -2rem;                   /* fieldset上端 */
  left: 0;                  /* 左端に合わせる */
  transform: translateY(-50%); /* 枠の上に半分だけ重ねる */
  background: #fff;         /* legend部分を白背景に */
}

/* ラベルは常に上に表示 */
.contact-right-column label {
  display: block;
  margin-bottom: 0.5rem;
}

/* チェックボックスラベルをインラインフレックスにして、チェックボックスとテキストを横並びにする */
.contact-right-column fieldset label,
.privacy label {
  display: inline-flex;
  flex-direction: row;        /* 横並びに指定 */
  align-items: center;   /* 垂直方向中央揃え */
  margin-right: 3rem;    /* ラベル間の余白 */
  writing-mode: horizontal-tb; /* 横書きに固定 */
}

/* チェックボックスとラベルテキストの間に余白を追加 */
fieldset label input[type="checkbox"],
.privacy label input[type="checkbox"] {
  width: auto;
  margin-right: 1rem;
  vertical-align: middle;
}

.p-privacy{
  margin:6rem 0 0.5rem;
}

.privacy{
  width: 100%;
  border: 1px solid #ccc;
  padding: 2rem;
  display: flex;
  align-items: center;    /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
}

.privacy label{
  white-space: nowrap;
  margin-right: 0;
  margin-bottom: 0;
}

.submit-button{
  margin: 6rem auto 6rem;
  width: 70%;
}

/* ボタンのスタイル */
.contact-right-column button {
  background-color: #91C31E;
  color: #fff;
  border: none;
  border-radius: 4rem;
  cursor: pointer;
  width: 100%;
}

/* 姓・名を横並びにするためのflex設定 */
.name-row {
  display: flex;
  flex-wrap: wrap; /* 画面が狭い時は折り返し */
  gap: 1rem;       /* 隙間を1remに設定 */
}

/* 横並び時に同じ幅で広がるように */
.name-item {
  flex: 1;         /* 均等に幅を分割 */
  min-width: 0;    /* はみ出しを防ぐための指定 */
}

fieldset{
  background-color: #F5F5F5;
  border: none;
  padding: 1.5rem;
}

.contact-notice{
  padding-top: 3rem;
}


/**
* ▼▼▼ ここから確認ページ ▼▼▼
-------------------------------------------------- */
.confirm-explanation{
  margin: 4rem 0 8rem;
}

.confirm-headerlogo{
  padding:3.5rem 0 0 5rem;
}

.confirm-footerlogo{
  padding: 3rem 0 2rem;
  text-align: center;
  width: 100%;
  border-top: 0.2rem solid #aaa;
}

.confirm-headerlogo img,
.confirm-footerlogo img{
  width: 20rem;
}

.confirm-copyright{
  text-align: center;
  font-size: 1.2rem;
  font-weight: 100;
  font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
  /* 上部に横線を表示 */
  border-top: 0.2rem solid #eee;
}

td:first-child {
  width: 20rem;
  white-space: nowrap;
}

td:last-child {
  overflow-wrap: break-word;
  word-break: break-all;
}

/* 最初の行以外の各行の上側に横線を表示 */
tr:not(:first-child) td {
  border-top: 0.2rem solid #eee;
}

td {
  padding: 2rem 2rem 2rem 0;
  vertical-align: top;
}

.action {
  margin: 8rem auto;
  display: flex;
  width: 70%;
  text-align: center;
}

.btn-outer {
  color: #91C31E;;
  cursor: pointer;
  width: 30rem;
  text-align: center;
}

.bgw {
  background-color: #91C31E;
  color: #fff;
}

.btn span::before {
  background-color: #fff;
}

.btn span::after {
  background-image: url(../img/ic_arrow_yg.svg);
}

.edit-link {
  margin-left: 10px;
  width: 40%;
  padding: 1.4rem 0;
  color: #555;
  text-decoration: underline;
}

.edit-link:hover{
  color: #aaa;
}

/**
* ▼▼▼ ここからサンクスページ ▼▼▼
-------------------------------------------------- */
.thanks{
  font-size: 4.5rem;
  color: #91C31E;
}

.top-link{
  color: #000;
  text-decoration: underline;
}

.top-link:hover{
  color: #aaa;
}

.thanks-bottom{
  margin-bottom: 30rem;
}

/**
* ▼▼▼ ここからSP表示 ▼▼▼
-------------------------------------------------- */
@media screen and (max-width: 768px) {
  html {
    font-size: 62.5%;
  }
  
  .contact-form,.contact-p{
    font-size: 1.2rem;
  }

  .contact-layout {
    display: block;
    width: 100%;
    padding: 8rem 3rem 0 3rem;
    margin: auto;
  }

  .contact-left-column{
    margin: auto;
  }

  .steps{
    display: flex;
  }

  .step{
    margin-right: 2rem;
  }


/* 確認ページのレスポンシブ対応 */
  td:first-child {
    width: 15rem;
  }
}