@charset "UTF-8";
/*
 * お知らせアイコン 使用申請フォーム 専用スタイル
 *
 * 既存サイトCSS（reset.css / common.css）との衝突を避けるため、
 * すべてのセレクタをルートID #application（<body id="application">）配下に閉じ込める。
 * これにより読み込み順に依存せず、常に本ファイルの指定が優先される。
 */

/* ============================================================
   カラー変数
   ============================================================ */
:root {
  --app-orange: #e8893f;
  --app-orange-dark: #d97832;
  --app-orange-deep: #c96a18;
  --app-req: #d46069;
  --app-pink-deep: #d46069;
  --app-gray: #868686;
  --app-gray-deep: #4d4d4d;
  --app-text: #333;
  --app-placeholder: #b6b6b6;
}

/* ============================================================
   ベース
   ============================================================ */
#application {
  color: var(--app-text);
  font-family:
    "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Meiryo,
    sans-serif;
}
#application .bold {
  font-weight: bold;
}

/* ============================================================
   ヘッダー見出し（headline）
   ============================================================ */
#application #headline {
  background: #fcf0da;
  height: 160px;
  margin-bottom: 25px;
}
#application #headline .contents_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
#application #headline .h2_icon {
  display: inline-block;
  position: relative;
  padding-left: 25px;
}
#application #headline .h2_icon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/oshirase/h2_icon.png);
  width: 20px;
  height: 31px;
}
#application #headline .h2_br {
  display: block;
  font-size: 16px;
  font-weight: 800;
}

#application #app_main {
  padding: 36px 0 60px;
}

/* ============================================================
   セクション帯・リード文
   ============================================================ */
#application .app_section_bar {
  background: #ec7832;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 15px 20px;
  border-radius: 5px;
  margin-bottom: 30px;
  font-weight: 700;
}
#application .app_lead {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 30px;
  padding: 0 25px;
}

/* ============================================================
   申請フロー
   ============================================================ */
#application .app_flow {
  margin-bottom: 50px;
}
#application .app_flow_steps {
  margin-top: 40px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#application .app_flow_steps::before {
  content: "";
  position: absolute;
  top: 70px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: #d6d6d6;
  z-index: 0;
}
#application .app_flow_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 25%;
  max-width: 180px;
}
#application .app_flow_icon_wrap {
  position: relative;
}
#application .app_flow_label {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: var(--app-gray);
  text-align: left;
  margin-top: 20px;
}
#application .app_flow_note {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--app-gray);
  margin-top: 10px;
  text-align: left;
}
#application .app_flow_step.is_active .app_flow_label {
  color: var(--app-pink-deep);
}

/* ============================================================
   入力ボックス・グループ見出し
   ============================================================ */
#application .app_form_box {
  background: #e1e0dc;
  padding: 30px 30px 35px;
  border-radius: 10px;
}
#application .app_group + .app_group {
  margin-top: 50px;
}
#application .app_group_title {
  font-size: 23px;
  font-weight: 700;
  color: var(--app-orange-dark);
  margin-bottom: 20px;
}
#application .agreement_group .app_group_title {
  margin-bottom: 10px;
}
#application .app_sub_title {
  font-size: 17px;
  font-weight: 700;
  color: var(--app-gray-deep);
  margin-bottom: 10px;
}
#application .app_row + .app_sub_title,
#application .app_caption + .app_sub_title{
  margin-top: 30px;
}

/* ============================================================
   行（ラベル＋入力）
   ============================================================ */
#application .app_row {
  display: flex;
  align-items: flex-start;
}
#application .app_row + .app_row {
  margin-top: 15px;
}
#application .app_label {
  flex: 0 0 240px;
  font-size: 15px;
  padding-top: 5px;
}
#application .app_field {
  flex: 1 1 auto;
  min-width: 0;
}
#application .req {
  color: var(--app-req);
  font-weight: 700;
  margin-left: 2px;
}
#application .input_group + .input_group {
  margin-top: 10px;
}

/* ============================================================
   入力要素
   ============================================================ */
#application .app_input {
  height: 36px;
  padding: 0 10px;
  border-radius: 5px;
  border: none;
  background: #fff;
  font-size: 14px;
  width: 100%;
  max-width: 100%;
}
#application .app_input:focus {
  outline: none;
  border-color: var(--app-orange);
  box-shadow: 0 0 0 2px rgba(232, 137, 63, 0.2);
}
#application .app_input:disabled {
  background: #f0f0f0;
  color: #aaa;
}
#application input::placeholder {
  color: var(--app-placeholder);
}
#application .app_input_block {
  width: 100%;
}
#application .app_input_xs {
  width: 70px;
}
#application .app_input_sm {
  width: 95px;
}
#application .app_input_md {
  width: 235px;
}
#application .app_input_houjin,
#application .app_input_planned_publish_date {
  width: 235px;
}
#application .app_input_other {
  flex-shrink: 1;
}

/* インライン配置・補助ラベル */
#application .app_inline {
  display: flex;
  align-items: center;
  gap: 10px;
}
#application .app_inline + .app_inline {
  margin-top: 10px;
}
#application .app_inline > .app_sublabel {
  flex: 0 0 70px;
}
#application .app_sub_inline {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
}
#application .app_sublabel {
  font-size: 14px;
  color: var(--app-gray-deep);
  flex-shrink: 0;
}
#application .app_unit {
  font-size: 14px;
  color: #555;
}
#application .app_hyphen {
  color: #888;
}

/* ============================================================
   チェックボックス・ラジオ
   ============================================================ */
#application .app_checks,
#application .app_radios {
  display: flex;
  align-items: center;
  gap: 10px 20px;
}
#application .app_check,
#application .app_radio {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
#application .app_check input,
#application .app_radio input {
  display: none;
}

/* チェックボックス：四角枠＋白レ点 */
#application .app_check input[type="checkbox"] + span {
  position: relative;
  padding-left: 23px;
}
#application .app_check input[type="checkbox"] + span::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--app-gray);
  background: transparent;
  border-radius: 2px;
}
#application .app_check input[type="checkbox"]:checked + span::before {
  background: var(--app-orange-dark);
  border-color: var(--app-orange-dark);
}
#application .app_check input[type="checkbox"] + span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.1s;
}
#application .app_check input[type="checkbox"]:checked + span::after {
  opacity: 1;
}

/* big：26×26px の大きめチェックボックス（レ点・余白も比率で拡大） */
#application .app_check input[type="checkbox"].big + span {
  padding-left: 34px;
  padding-bottom: 2px;
}
#application .app_check input[type="checkbox"].big + span::before {
  width: 26px;
  height: 26px;
}
#application .app_check input[type="checkbox"].big + span::after {
  left: 9px;
  width: 7px;
  height: 14px;
  border-width: 0 3px 3px 0;
}

/* ラジオ：丸枠＋中心ドット */
#application .app_radio input[type="radio"] + span {
  position: relative;
  padding-left: 25px;
}
#application .app_radio input[type="radio"] + span::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--app-gray);
  border-radius: 50%;
  background: transparent;
}
#application .app_radio input[type="radio"]:checked + span::before {
  border-color: var(--app-orange-dark);
}
#application .app_radio input[type="radio"] + span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--app-orange-dark);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.1s;
}
#application .app_radio input[type="radio"]:checked + span::after {
  opacity: 1;
}

/* ============================================================
   補足テキスト
   ============================================================ */
#application .app_caption {
  width: 100%;
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  margin: 10px 0 15px;
}
#application .app_note {
  font-size: 12px;
  color: #4a7;
  margin-top: 6px;
}
#application .app_note.is_error {
  color: var(--app-req);
}
#application .app_note.is_warning {
  color: var(--app-orange-deep);
}

/* ============================================================
   ボタン（補助・アイコン）
   ============================================================ */
#application .app_btn_sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  background: var(--app-gray-deep);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
#application .app_btn_sub:hover {
  opacity: 0.8;
}
#application .app_btn_icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
#application .app_btn_icon_r {
  width: 12px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* ============================================================
   同意事項
   ============================================================ */
#application .app_agreement_text {
  background: #fff;
  border-radius: 10px;
  padding: 25px;
  font-size: 14px;
  line-height: 1.5;
}
#application .app_agreement_check {
  justify-content: center;
  display: flex;
  margin: 20px 0 0;
  font-size: 17px;
  font-weight: bold;
}

/* ============================================================
   送信・戻るボタン
   ============================================================ */
#application .app_submit_area {
  text-align: center;
  margin-top: 50px;
}
#application .app_submit_double {
  display: flex;
  justify-content: center;
  gap: 16px;
}
#application .app_btn_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 400px;
  height: 60px;
  padding: 0 20px;
  background: var(--app-orange-dark);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  position: relative;
}
#application .app_btn_submit:hover {
  opacity: 0.8;
}
#application .app_btn_submit:disabled {
  background: #c9c9c9;
  cursor: not-allowed;
}
#application .app_btn_back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 60px;
  padding: 0 24px;
  background: #888;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
#application .app_btn_back:hover {
  background: #6f6f6f;
}

/* ============================================================
   エラー表示
   ============================================================ */
#application .app_alert {
  background: #fdecea;
  border: 1px solid #f3b9b3;
  color: var(--app-req);
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
#application .app_input.is_error {
  border: 1px solid var(--app-req);
  background: #fff6f5;
}
#application ul.form_error {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
#application ul.form_error li {
  color: var(--app-req);
  font-size: 14px;
  line-height: 1.6;
  font-weight: bold;
}

/* ============================================================
   確認画面
   ============================================================ */
#application .app_review {
  margin: 0 0 10px;
}
#application .app_review + .app_sub_title {
  margin-top: 30px;
}
#application .app_review_row {
  display: flex;
  border-bottom: 1px dotted #c8c8c8;
  padding: 12px 0;
}
#application .app_review_row dt {
  flex: 0 0 240px;
  font-weight: 500;
  font-size: 14px;
}
#application .app_review_row dd {
  flex: 1 1 auto;
  font-size: 14px;
  word-break: break-all;
}
#application .app_review_empty {
  color: #aaa;
}

/* ============================================================
   完了・エラー画面
   ============================================================ */
#application .app_complete {
  text-align: center;
  padding: 44px 34px;
}
#application .app_complete_lead {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
#application .app_complete_no {
  font-size: 16px;
  margin-bottom: 20px;
}
#application .app_complete_no strong {
  font-size: 28px;
  color: var(--app-orange-deep);
  margin-left: 6px;
}
#application .app_complete_text {
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 24px;
}
#application .app_error_lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--app-req);
  margin-bottom: 24px;
}
#application .app_complete_back a {
  display: inline-block;
  font-size: 14px;
}

/* ============================================================
   レスポンシブ（〜840px）
   ============================================================ */
@media screen and (max-width: 840px) {
  #application .app_flow_steps {
    gap: 10px;
  }
  #application .app_flow_steps::before {
    top: 65px;
  }
  #application .app_flow_step img {
    width: 120px;
  }
  #application .app_flow_label {
    font-size: 16px;
  }
  #application .app_flow_note {
    font-size: 13px;
  }
  #application .app_form_box {
    padding: 30px 15px;
  }
  #application .app_row {
    display: block;
  }
  #application .app_label {
    flex: none;
    padding-top: 0;
    margin-bottom: 6px;
  }
  #application .app_input {
    width: 100%;
  }
  #application .app_input_xs,
  #application .app_input_sm {
    width: 30%;
  }
  #application .app_input_houjin {
    width: 60%;
  }
  #application .app_input_other {
    width: 100%;
  }
  #application .app_review_row {
    display: block;
  }
  #application .app_review_row dt {
    flex: none;
    margin-bottom: 4px;
  }
  #application .app_submit_double {
    flex-direction: column-reverse;
    align-items: center;
  }
  #application .app_btn_submit,
  #application .app_btn_back {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   レスポンシブ（〜640px）
   ============================================================ */
@media screen and (max-width: 640px) {
  #application #headline {
    height: 100px;
  }
  #application #headline h2 {
    font-size: 16px;
  }
  #application .app_checks,
  #application .app_radios {
    flex-wrap: wrap;
  }
  #application .app_flow_steps {
    flex-direction: column;
    margin-top: 0;
  }
  #application .app_flow_steps::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 43px;
    width: 2px;
    height: calc(100% - 80px);
  }
  #application .app_flow_step {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  #application .app_flow_icon_wrap {
    flex-shrink: 0;
    flex: 0 0 80px;
  }
  #application .app_txt_wrap {
    width: 100%;
    text-align: left;
  }
  #application .app_txt_wrap .app_flow_label {
    margin-top: 0;
  }
}