@charset "UTF-8";

/* ============================================
   海へ｜フォーム共通（XServerメールフォーム）
   サイト統一デザイン
============================================ */

:root{
  --blue:#184d6a;
  --text:#1f2937;
  --sub:#5f6f7a;
  --line:#e3eef4;
  --soft:#eef8fc;
  --paper:#ffffff;
  --bg:#f7fbfd;
  --error:#b94a48;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  color:var(--text);
  line-height:1.95;
  background:var(--bg);
  font-size:15px;
  -webkit-text-size-adjust:100%;
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ============================================
   ヘッダー
============================================ */

.form-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
  padding:14px 24px;
  text-align:left;
  position:sticky;
  top:0;
  z-index:100;
}

.form-brand{
  display:inline-block;
  font-size:19px;
  color:var(--blue);
  text-decoration:none;
  letter-spacing:.12em;
  font-weight:500;
  line-height:1.4;
}

.form-brand:hover{
  text-decoration:none;
  opacity:.85;
}

.form-brand-sub{
  font-size:12px;
  color:var(--sub);
  margin-left:8px;
  letter-spacing:.08em;
  font-weight:400;
}

/* ============================================
   フォーム本体
============================================ */

.form-wrap{
  max-width:680px;
  margin:0 auto;
  padding:48px 24px 32px;
}

.form-title{
  color:var(--blue);
  font-size:clamp(22px,3vw,28px);
  font-weight:500;
  letter-spacing:.06em;
  margin:0 0 16px;
  line-height:1.5;
  text-align:center;
}

.form-title-sub{
  display:inline-block;
  font-size:.7em;
  color:var(--sub);
  letter-spacing:.04em;
  margin-left:6px;
  font-weight:normal;
}

/* ステップ表示 */
.form-steps{
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
  padding:0;
  margin:0 0 32px;
  gap:20px;
  flex-wrap:wrap;
}

.form-step{
  position:relative;
  padding:6px 18px;
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--sub);
  background:transparent;
  border:1px solid var(--line);
  border-radius:20px;
  line-height:1.5;
}

.form-step--current{
  color:#fff;
  background:var(--blue);
  border-color:var(--blue);
  font-weight:500;
}

.form-step--done{
  color:var(--blue);
  background:var(--soft);
  border-color:var(--soft);
}

.form-step--done::after,
.form-step--current::before{
  content:none;
}

/* ステップ間の矢印（AIS自船マーク・右向き） */
.form-step + .form-step::before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:9px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' aria-hidden='true'%3e%3cpath d='M2 2 L18 6 L2 10 Z' fill='none' stroke='%23184d6a' stroke-width='1.4' stroke-linejoin='round' opacity='0.55'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

@media (max-width: 560px){
  .form-steps{gap:18px}
  .form-step{padding:5px 14px;font-size:11.5px;letter-spacing:.04em}
  .form-step + .form-step::before{left:-16px;width:12px;height:7px}
}

.form-lead{
  color:var(--sub);
  font-size:13.5px;
  line-height:2;
  margin:0 0 32px;
  text-align:center;
  letter-spacing:.04em;
}

/* ============================================
   エラー表示
============================================ */

.form-error:empty{display:none}
.form-error{
  color:var(--error);
  background:#fdf2f2;
  border:1px solid #f5d6d6;
  border-radius:6px;
  padding:14px 18px;
  margin:0 0 24px;
  font-size:14px;
  line-height:1.85;
}

.form-error:empty{display:none}

/* ============================================
   フォームテーブル（縦並びに変換）
   .form-table と .table（XServerデフォルト）の両対応
============================================ */

.form-table,
.table{
  width:100% !important;
  border:none !important;
  border-collapse:collapse;
  margin:0 0 32px;
  background:none;
}

.form-table,
.form-table tbody,
.form-table tr,
.form-table th,
.form-table td,
.table,
.table tbody,
.table tr,
.table th,
.table td{
  display:block !important;
  width:100% !important;
  border:none !important;
  background:none !important;
  padding:0;
  margin:0;
  text-align:left !important;
  vertical-align:top;
  color:var(--text);
}

.form-table tr,
.table tr{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:8px;
  padding:18px 22px !important;
  margin-bottom:14px;
  box-shadow:0 1px 4px rgba(23,74,103,.03);
}

.form-table th,
.table th{
  font-weight:500 !important;
  color:var(--blue) !important;
  font-size:13.5px !important;
  letter-spacing:.06em;
  padding:0 0 8px !important;
  line-height:1.7;
}

.form-table td,
.table td{
  padding:0 !important;
  font-size:15px !important;
  color:var(--text) !important;
}

/* ============================================
   入力要素
============================================ */

.form-table input[type="text"],
.form-table input[type="email"],
.form-table input[type="tel"],
.form-table input[type="url"],
.form-table input[type="number"],
.form-table input[type="password"],
.form-table textarea,
.form-table select,
.table input[type="text"],
.table input[type="email"],
.table input[type="tel"],
.table input[type="url"],
.table input[type="number"],
.table input[type="password"],
.table textarea,
.table select{
  width:100% !important;
  max-width:100% !important;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fafdff;
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  line-height:1.7;
  transition:border-color .2s,background .2s;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  box-shadow:none;
}

/* 郵便番号などの短い入力欄 */
.form-table input[name*="zip"],
.form-table input[name*="zipcode"],
.form-table input[name*="postal"],
.form-table input[name*="postcode"],
.form-table input[maxlength="3"],
.form-table input[maxlength="4"],
.form-table input[maxlength="7"],
.form-table input[maxlength="8"],
.table input[name*="zip"],
.table input[name*="zipcode"],
.table input[name*="postal"],
.table input[name*="postcode"],
.table input[maxlength="3"],
.table input[maxlength="4"],
.table input[maxlength="7"],
.table input[maxlength="8"]{
  width:auto !important;
  max-width:6em !important;
  display:inline-block;
  margin:0 4px;
}

.form-table input[maxlength="3"],
.table input[maxlength="3"]{
  max-width:4em !important;
}

.form-table input[maxlength="4"],
.table input[maxlength="4"]{
  max-width:5em !important;
}

.form-table input[type="text"]:focus,
.form-table input[type="email"]:focus,
.form-table input[type="tel"]:focus,
.form-table input[type="url"]:focus,
.form-table input[type="number"]:focus,
.form-table input[type="password"]:focus,
.form-table textarea:focus,
.form-table select:focus,
.table input[type="text"]:focus,
.table input[type="email"]:focus,
.table input[type="tel"]:focus,
.table input[type="url"]:focus,
.table input[type="number"]:focus,
.table input[type="password"]:focus,
.table textarea:focus,
.table select:focus{
  border-color:var(--blue);
  background:#fff;
}

.form-table textarea,
.table textarea{
  min-height:140px;
  resize:vertical;
  line-height:1.85;
}

.form-table select,
.table select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3e%3cpath d='M1 1 L7 7 L13 1' fill='none' stroke='%23184d6a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
  padding-right:38px;
}

/* チェックボックス・ラジオボタン */
.form-table input[type="checkbox"],
.form-table input[type="radio"]{
  margin-right:6px;
  vertical-align:middle;
}

.form-table label{
  display:inline-block;
  margin-right:18px;
  margin-bottom:6px;
  cursor:pointer;
  font-size:14.5px;
  line-height:1.8;
}

/* 必須マーク（XServerメールフォーム側の生成タグに依存） */
.form-table .required,
.form-table .must{
  color:var(--error);
  font-size:12px;
  margin-left:6px;
  letter-spacing:.02em;
  font-weight:normal;
}

/* ============================================
   ボタン
============================================ */

.form-button-wrap{
  text-align:center;
  margin:32px 0 0;
}

.form-button-wrap--confirm{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.form-button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  border:none;
  padding:14px 44px;
  border-radius:8px;
  font-family:inherit;
  font-size:15px;
  letter-spacing:.1em;
  font-weight:500;
  cursor:pointer;
  transition:opacity .2s,transform .2s,background .2s,color .2s;
  -webkit-appearance:none;
  appearance:none;
  line-height:1.4;
}

.form-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  opacity:.9;
  transform:translateY(-1px);
}

/* 戻るボタン（確認画面） */
.form-button--back,
input[type="submit"][value*="戻る"],
input[type="submit"][value*="◁"]{
  background:#fff !important;
  color:var(--sub) !important;
  border:1px solid var(--line) !important;
}

.form-button--back:hover,
input[type="submit"][value*="戻る"]:hover,
input[type="submit"][value*="◁"]:hover{
  background:var(--soft) !important;
  color:var(--blue) !important;
  border-color:var(--blue) !important;
}

input[type="reset"]{
  background:#fff;
  color:var(--sub);
  border:1px solid var(--line);
  margin-right:10px;
}

input[type="reset"]:hover{
  background:var(--soft);
  color:var(--blue);
}

/* 「戻る」ボタンと送信ボタンが並ぶ場合 */
.form-button-wrap input + input{
  margin-left:10px;
}

/* ============================================
   サイトに戻るリンク
============================================ */

.form-back{
  text-align:center;
  margin:24px 0 0;
  font-size:13.5px;
}

.form-back a{
  color:var(--sub);
  text-decoration:none;
  letter-spacing:.06em;
  padding:6px 12px;
  border-radius:4px;
  transition:color .2s,background .2s;
}

.form-back a:hover{
  color:var(--blue);
  background:var(--soft);
  text-decoration:none;
}

/* ============================================
   フッター
============================================ */

.form-footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:32px 24px;
  text-align:center;
  color:var(--sub);
  font-size:13px;
  line-height:2;
  margin-top:48px;
}

.form-footer p{
  margin:0;
}

/* ============================================
   確認画面・完了画面のテキスト
============================================ */

/* {$form_data} が確認画面では別の構造になる場合の備え */
.form-table .confirm-label{
  color:var(--blue);
  font-size:13px;
  letter-spacing:.04em;
}

.form-table .confirm-value{
  font-size:15px;
  color:var(--text);
}

/* 完了画面 */
.form-complete{
  max-width:600px;
  margin:0 auto;
  padding:8px 0 16px;
  text-align:center;
}

.form-complete-lead{
  font-size:16px;
  color:var(--blue);
  line-height:2;
  letter-spacing:.04em;
  margin:0 0 28px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.form-complete-note{
  background:#fafdff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px 22px;
  margin:0 0 28px;
  text-align:left;
}

.form-complete-note p{
  margin:0;
  color:var(--sub);
  font-size:13.5px;
  line-height:1.95;
  letter-spacing:.02em;
}

.form-complete-body{
  font-size:14.5px;
  color:var(--text);
  line-height:2;
  margin:0 0 32px;
  letter-spacing:.04em;
}

.form-complete-sign{
  color:var(--sub);
  font-size:13.5px;
  line-height:2;
  margin:0;
  letter-spacing:.06em;
  padding-top:24px;
  border-top:1px solid var(--line);
}

/* 完了画面の「サイトに戻る」ボタン */
.form-button--link{
  text-decoration:none;
  display:inline-block;
}

.form-button--link:hover{
  text-decoration:none;
  opacity:.9;
  color:#fff;
}

/* 完了画面のメッセージ */
.complete-message{
  text-align:center;
  font-size:15px;
  line-height:2;
  padding:24px 0;
}

/* ============================================
   ご入力にあたって（注記ブロック）
============================================ */

.form-notes{
  background:#fafdff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px 28px;
  margin:24px 0 8px;
}

.form-notes-title{
  color:var(--blue);
  font-size:14px;
  font-weight:500;
  letter-spacing:.08em;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  line-height:1.5;
}

.form-notes-list{
  margin:0;
  padding:0;
}

.form-notes-list dt{
  color:var(--blue);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  margin:14px 0 6px;
  line-height:1.7;
}

.form-notes-list dt:first-child{
  margin-top:0;
}

.form-notes-list dd{
  color:var(--sub);
  font-size:13px;
  line-height:1.9;
  margin:0 0 4px;
  padding-left:1em;
  position:relative;
  letter-spacing:.02em;
}

.form-notes-list dd::before{
  content:"※";
  position:absolute;
  left:0;
  color:var(--sub);
}

.form-notes-list dd:last-of-type{
  margin-bottom:0;
}

.form-notes-list dd a{
  color:var(--blue);
}

@media (max-width: 560px){
  .form-notes{padding:20px 22px}
  .form-notes-title{font-size:13.5px}
  .form-notes-list dt{font-size:12.5px}
  .form-notes-list dd{font-size:12.5px}
}

/* ============================================
   レスポンシブ
============================================ */

@media (max-width: 560px){
  body{font-size:14.5px}
  
  .form-header{padding:12px 18px}
  .form-brand{font-size:17px}
  .form-brand-sub{display:block;margin-left:0;margin-top:2px;font-size:11px}
  
  .form-wrap{padding:32px 18px 24px}
  
  .form-title{font-size:22px}
  .form-lead{font-size:13px}
  
  .form-table tr{padding:16px 18px}
  
  .form-button,
  input[type="submit"],
  input[type="button"]{
    padding:13px 36px;
    font-size:14.5px;
  }
  
  .form-footer{padding:24px 18px}
}

/* ============================================
   XServerメールフォーム固有のクラスへの上書き
   （XServer側で自動生成されるクラスに対応）
============================================ */

/* XServerメールフォームのデフォルトIDやクラスへの対応 */
#wrapper{
  background:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  -moz-box-shadow:none !important;
}

#main{
  background:none !important;
  width:auto !important;
  max-width:680px;
  margin:0 auto !important;
  padding:48px 24px 32px !important;
}

#header{
  display:none;
}

#footer{
  background:none !important;
  color:var(--sub) !important;
  border-top:1px solid var(--line);
  padding:32px 24px !important;
  text-align:center;
  font-size:13px !important;
  line-height:2;
  margin-top:48px !important;
}

/* 必須マーク（XServerが生成する場合） */
.form-table .item_required{
  color:var(--error);
  font-size:12px;
  font-weight:normal;
  margin-left:6px;
}

/* もし {$form_data} 内に section クラスが出る場合 */
.section{margin:0 !important;background:none !important}
.section__ttl{
  color:var(--blue) !important;
  background:none !important;
  font-size:clamp(20px,2.4vw,24px) !important;
  font-weight:500 !important;
  letter-spacing:.06em;
  margin:0 0 16px !important;
  padding:0 !important;
  line-height:1.5;
  text-align:center;
}
.section__body{padding:0 !important}

/* 説明文 */
#txt_explain{
  color:var(--sub);
  font-size:13.5px;
  line-height:2;
  margin:0 0 32px;
  text-align:center;
  letter-spacing:.04em;
}
#txt_explain p{margin:0}

/* エラーテキスト */
.red_txt{
  color:var(--error);
  background:#fdf2f2;
  border:1px solid #f5d6d6;
  border-radius:6px;
  padding:14px 18px;
  margin:0 0 24px;
  font-size:14px;
  line-height:1.85;
}
.red_txt:empty{
  background:none;
  border:none;
  padding:0;
  margin:0;
}

/* ボタン box（XServer側の class） */
.button_box{
  text-align:center;
  margin:32px 0 0;
}

.button_box input{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  border:none;
  padding:14px 44px;
  border-radius:8px;
  font-family:inherit;
  font-size:15px;
  letter-spacing:.1em;
  font-weight:500;
  cursor:pointer;
  transition:opacity .2s,transform .2s,background .2s,color .2s;
  -webkit-appearance:none;
  appearance:none;
  margin:0 6px;
}

.button_box input:hover{
  opacity:.9;
  transform:translateY(-1px);
}

/* button_box内の戻るボタン */
.button_box input[value*="戻る"],
.button_box input[value*="◁"]{
  background:#fff !important;
  color:var(--sub) !important;
  border:1px solid var(--line) !important;
}

.button_box input[value*="戻る"]:hover,
.button_box input[value*="◁"]:hover{
  background:var(--soft) !important;
  color:var(--blue) !important;
  border-color:var(--blue) !important;
}

.button_box a{
  display:inline-block;
  color:var(--sub);
  text-decoration:none;
  letter-spacing:.06em;
  padding:6px 12px;
  font-size:13.5px;
}

.button_box a:hover{
  color:var(--blue);
  text-decoration:none;
}

/* ============================================
   グループ見出し（JSで挿入する .form-group-head 行）
============================================ */

.form-table tr.form-group-head,
.table tr.form-group-head{
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:30px 0 12px !important;
}

.form-table tr.form-group-head:first-child,
.table tr.form-group-head:first-child{
  margin-top:28px !important;
}

.form-table tr.form-group-head td,
.table tr.form-group-head td{
  display:block !important;
  color:var(--blue) !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:.08em;
  line-height:1.6;
  padding:0 0 10px !important;
  border-bottom:1px solid var(--line) !important;
}

@media (max-width:560px){
  .form-table tr.form-group-head td,
  .table tr.form-group-head td{font-size:14px !important}
}