@charset "UTF-8";

/* pc -------------------------------------------------------------------------------------*/
@media screen and (min-width: 641px) {

/* タイトル */
.title {
width: 100%;
height: 140px;
overflow: hidden;
position: relative;
}

/*タイトル部分ここから*/
.titlebar__inner{
  width: 1040px;          /* 指示：左右1040px */
/*  margin: 0 auto;*/
  padding: 18px 20px;
  display: flex;              /* flexbox */
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: absolute;
  top:0;
  left: 50%;            /* 親の左から 50% の位置へ */
  transform: translate(-50%, 0%); /* 自身の幅と高さの半分だけ戻す */
}

/* 左：タイトル（左寄せ＋下線） */
.titlebar__title{
  margin: 0;
  color: #2f6f90;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.title .txt {
  position: absolute;
  top:70%;
  left: 50%;            /* 親の左から 50% の位置へ */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
}
/*タイトル部分ここまで*/


/*---------------------------------------------------------*/

/* 共通 */
section {
border-top: 5px solid #99bed6;
  max-width:100%;
  margin:0 auto 80px;
  padding:0;
}

/*---------------------------------------------------------*/

    :root{
      --line:#c8c9ca;
      --sub:#999;
      --accent:#2f6f90;
      --req:#e60000;
      --err:#d40000;
    }

    /* 上部注記 */
    .note{
      text-align:center;
/*      font-size: 12px;*/
      margin: 2em 0;
    }
    .note .req{
      color: var(--req);
      font-weight: 800;
      margin-right: 4px;
    }

    /* dl全体（画像のように横罫線） */
    .form-dl{
      margin: 0;
      padding: 0;
      border-top: 1px solid var(--line);
    }

.row_1,
.row_2,
.row_3{
display: grid;
column-gap: 16px;
padding: 1.6em 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.row_1{
grid-template-columns: 240px 1fr 350px; /* 左：項目 / 中：入力 / 右：入力例 */
}
.row_2{
grid-template-columns: 240px 1fr 480px; /* 左：項目 / 中：入力 / 右：入力例 */
}
.row_3{
grid-template-columns: 240px 1fr 100px; /* 左：項目 / 中：入力 / 右：入力例 */
}

    dt{
      margin:0;
      padding:0 0 0 2em;
      line-height: 1;
  display: flex;
  align-items: center;
}
    dd{
      margin:0;
      padding:0;
    }

    .label{
      display:flex;
      align-items:center;
      gap: 5px;
    }

    .label-main{
/*      font-size: 13px;*/
      font-weight: 800;
      letter-spacing: .03em;
      line-height: 1.2;
      white-space: nowrap;
    }

    .label-sub{
      display:block;
      font-size: 10px;
      color: var(--sub);
      font-weight: 600;
      margin-top: 2px;
      letter-spacing: .04em;
    }

    .star{
      color: var(--req);
      font-weight: 900;
      margin-left: 6px;
    }

    /* 入力 */
    input[type="text"],
    input[type="email"],
    textarea{
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #bdbdbd;
      padding: 10px 10px;
/*      font-size: 13px;*/
      outline: none;
      background:#fff;
    }
    input:focus, textarea:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(47,111,144,.12);
    }

    .w-mid{ max-width: 420px; }
    .w-short{ max-width: 100%; }

    textarea{
      min-height: 300px;
      resize: vertical;
    }

    /* 右側の入力例 */
    .hint{
      font-size: 13px;
      line-height: 1.6;
    }

    /* エラー（各フォーム直下） */
    .field{
      display:flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-start;
    }

    .error{
      display:none;
      color: var(--err);
      font-size: 13px;
      font-weight: 700;
    }
    .field.is-error .error{
      display:block;
    }
    .field.is-error input,
    .field.is-error textarea{
      border-color: var(--err);
    }


    /* 種別（チェック群） */
    .check-head{
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 8px;
    }
    .checks{
      display:flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 2px;
    }
    .checks label{
      display:flex;
      align-items:center;
      gap: 8px;
/*      font-size: 13px;*/
    }

    /* 大きいtextarea行は中央に寄せる */
    .row.row-message{
      align-items: start;
      padding-top: 18px;
      padding-bottom: 18px;
    }
    .row.row-message .label{
      align-items: start;
      padding-top: 6px;
    }

    /* プライバシー */
    .privacy{
      padding: 2em 0 0;
/*      border-bottom: 1px solid var(--line);*/
    }

    .privacy-title{
      display:flex;
      align-items:center;
      justify-content:center;
/*      gap: 10px;
      font-weight: 900;*/
      margin: 18px 0 12px;
    }

    .privacy-agree{
      display:flex;
      justify-content:center;
      gap: 10px;
      padding: 8px 0 18px;
/*      font-size: 13px;*/
      align-items:center;
    }

    /* 送信ボタン（画像想定：スペースだけ） */
    .submit-area{
      display:flex;
      justify-content:center;
      padding: 18px 0 0;
    }

    button.image-btn{
      width: 223px;       /* 画像のボタンサイズ想定 */
      height: 52px;
      border: 0;
/*      border-radius: 10px;
/*      background: #cfd6dc; /* 仮の色（画像に置換予定） */
      cursor: pointer;
/*      position: relative;*/
    }

    button.image-btn:disabled{
      opacity: .45;
      cursor: not-allowed;
    }

/*プライバシー*/
.link_1{
  display: inline-flex;       /* アイコン＋文字を横並び */
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 0.2em;
}

.link_2{
  width: 21px;                /* 見た目に合わせて調整OK */
  height: 21px;
  display: block;
/*  flex: 0 0 auto;*/
}

}




/* sp -------------------------------------------------------------------------------------*/
@media screen and (max-width: 640px) {

/* タイトル */
.title {
width: 100%;
height: 9em;
overflow: hidden;
position: relative;
}

/*タイトル部分ここから*/
.titlebar__inner{
  width: 100%;
/*  margin: 0 auto;*/
  padding: 0.5em 0 0 0.9em;
  display: flex;              /* flexbox */
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: absolute;
  top:0;
  left: 0;            /* 親の左から 50% の位置へ */
/*  transform: translate(-50%, 0%); /* 自身の幅と高さの半分だけ戻す */
}

/* 左：タイトル（左寄せ＋下線） */
.titlebar__title{
  margin: 0;
  color: #2f6f90;
  font-weight: 800;
  font-size: 6.5vw;
  letter-spacing: 0;
  line-height: 1;
}

.title .txt {
  width: 100%;
  font-size: 90%;
  text-align: center;
  line-height: 1.8em;
  position: absolute;
  top:63%;
  left: 50%;            /* 親の左から 50% の位置へ */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
}
/*タイトル部分ここまで*/


/*---------------------------------------------------------*/

/* 共通 */
section {
border-top: 5px solid #99bed6;
  max-width:100%;
  margin:0 auto 5em;
  padding:0;
  font-size: 90%;
}

/*---------------------------------------------------------*/

    :root{
      --line:#c8c9ca;
      --sub:#999;
      --accent:#2f6f90;
      --req:#e60000;
      --err:#d40000;
    }

    /* 上部注記 */
    .note{
      text-align:center;
/*      font-size: 12px;*/
      margin: 1.5em 0;
    }
    .note .req{
      color: var(--req);
      font-weight: 800;
      margin-right: 4px;
    }

    /* dl全体（画像のように横罫線） */
    .form-dl{
      margin: 0;
      padding: 0;
      border-top: 1px solid var(--line);
    }

.row_1,
.row_2,
.row_3{
display: block;
/*column-gap: 16px;*/
padding: 1.6em 0;
border-bottom: 1px solid var(--line);
/*align-items: center;*/
}
.row_1{
/*grid-template-columns: 240px 1fr 350px; /* 左：項目 / 中：入力 / 右：入力例 */
}
.row_2{
/*grid-template-columns: 240px 1fr 480px; /* 左：項目 / 中：入力 / 右：入力例 */
}
.row_3{
/*grid-template-columns: 240px 1fr 100px; /* 左：項目 / 中：入力 / 右：入力例 */
}

    dt{
      margin:0;
      padding:0 0 0 0.5em;
      line-height: 1;
  display: flex;
/*  align-items: center;*/
}
    dd{
      margin:0;
      padding:0;
    }

    .label{
/*      display:flex;
      align-items:center;
      gap: 5px;*/
    }

    .label-main{
/*      font-size: 13px;*/
      font-weight: 800;
      letter-spacing: .03em;
      line-height: 1.2;
      white-space: nowrap;
      font-size: 110%;
    }

    .label-sub{
      display:block;
      font-size: 80%;
      color: var(--sub);
      font-weight: 600;
      margin-top: 0.3em;
      letter-spacing: .04em;
    }

    .star{
      color: var(--req);
      font-weight: 900;
      margin-left: 6px;
    }

    /* 入力 */
    input[type="text"],
    input[type="email"],
    textarea{
      width: 97%;
      box-sizing: border-box;
      border: 1px solid #bdbdbd;
      padding: 0.8em 0.8em;
/*      font-size: 13px;*/
      outline: none;
      font-size: 110%;
      background:#fff;
      margin: 0.6em 0 0.3em 0.5em;
    }
    input:focus, textarea:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(47,111,144,.12);
    }

    .w-mid{ max-width: 100%; }
    .w-short{ max-width: 100%; }

    textarea{
      min-height: 35vh;
      resize: vertical;
    }

    /* 右側の入力例 */
    .hint{
/*      font-size: 13px;*/
      line-height: 1.6;
      margin-left: 0.5em;
    }

    /* エラー（各フォーム直下） */
    .field{
      display:flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }

    .error{
      display:none;
      color: var(--err);
/*      font-size: 13px;*/
      font-weight: 700;
    }
    .field.is-error .error{
      display:block;
      margin-left: 0.5em;
    }
    .field.is-error input,
    .field.is-error textarea{
      border-color: var(--err);
    }


    /* 種別（チェック群） */
    .check-head{
/*      font-size: 13px;*/
      font-weight: 800;
      margin:0.7em 0 0.3em 0.5em;
    }
    .checks{
      display:flex;
      flex-direction: column;
      gap: 0.3em;
      padding-top: 0;
      margin-left: 0.5em;
    }
    .checks label{
      display:flex;
      align-items:center;
      gap: 0.5em;
/*      font-size: 13px;*/
    }

    /* 大きいtextarea行は中央に寄せる */
    .row.row-message{
      align-items: start;
      padding-top: 18px;
      padding-bottom: 18px;
    }
    .row.row-message .label{
      align-items: start;
      padding-top: 6px;
    }

    /* プライバシー */
    .privacy{
      padding: 2em 0 0;
/*      border-bottom: 1px solid var(--line);*/
    }

    .privacy-title{
      display:flex;
      align-items:center;
      justify-content:center;
/*      gap: 10px;
      font-weight: 900;*/
      margin: 18px 0 12px;
    }

    .privacy-agree{
      display:flex;
      justify-content:center;
      gap: 10px;
      padding: 8px 0 18px;
/*      font-size: 13px;*/
      align-items:center;
    }

    /* 送信ボタン（画像想定：スペースだけ） */
    .submit-area{
      display:flex;
      justify-content:center;
      padding: 1.5em 0 0;
    }

    button.image-btn{
      width: 55%;       /* 画像のボタンサイズ想定 */
      border: 0;
/*      border-radius: 10px;
      background: #cfd6dc; /* 仮の色（画像に置換予定） */
      cursor: pointer;
/*      position: relative;*/
    }

    button.image-btn:disabled{
      opacity: .45;
      cursor: not-allowed;
    }

    button.image-btn img{
      width: 100%;
}

/*プライバシー*/
.link_1{
  display: inline-flex;       /* アイコン＋文字を横並び */
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 0.2em;
}

.link_2{
/*  width: 21px;                /* 見た目に合わせて調整OK */
  height: 1.6em;
  display: block;
/*  flex: 0 0 auto;*/
}

}