/* ============================================
   応援メッセージフォーム専用スタイル
   ============================================ */

/* body要素の基本設定 */
body.messages-form {
  color: #fff;
  font-size: 1.125rem;
}

body.messages-form #main {
  font-size: 1.5rem;
}

/* ユーティリティクラス（6号機互換） */
.messages-form .align-center {
  text-align: center;
}

.messages-form .bold {
  font-weight: bold;
}

/* デバイス別表示制御（6号機から） */
.sp-only {
  display: none !important;
}

.pc-only {
  display: block !important;
}

@media screen and (max-width: 480px) {
  .sp-only {
    display: block !important;
  }
  .pc-only {
    display: none !important;
  }
}

p {
  margin: 0 0 2em 0
}


/* ヒーローセクション（6号機バナースタイル） */
.message-hero {
  background-color: #000;
  background-image: url('../../../qzs-5/images/messages/form/hero-background_form.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 5rem 0;
  text-align: center;
  color: #d8d8d8;
  position: relative;
}

.message-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

.message-hero__title {
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
  color: #fff;
  text-shadow: 
    3px 0 10px rgba(245, 145, 56, 0.5),
    -3px 0 10px rgba(245, 145, 56, 0.5),
    0 3px 10px rgba(245, 145, 56, 0.5),
    0 -3px 10px rgba(245, 145, 56, 0.5);
}

.message-hero__number {
  /*color: #ffd700;*/
  font-size: 1.8em;
  display: inline-block;
  vertical-align: -0.04em;
}

/* large */
@media screen and (min-width: 1601px) {
  .message-hero {
    background-size: auto;
    min-height: 380px;
  }
  .message-hero__title {
    margin-top: 40px;
  }
}

/* medium */
@media screen and (max-width: 980px) {
  .message-hero {
    padding: 4rem 0;
  }
  
  .message-hero__title {
    font-size: 2em;
  }
}

/* small */
@media screen and (max-width: 736px) {
  .message-hero {
    padding: 2em 0;
  }
  
  .message-hero__title {
    font-size: 1.8em;
  }
}

/* xsmall */
@media screen and (max-width: 480px) {
  .message-hero {
    padding: 1.5em 0;
  }
  
  .message-hero__title {
    font-size: 1.2em;
  }
}

/* メインコンテンツ（6号機スタイル） */
#main {
  padding: 0 0 8em 0;
}

#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
  color: #ffffff;
}

#main .container {
  max-width: 100%;
  width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
}

#main .leaf {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2%;
  background-color: transparent;
}

/* ユーティリティクラス（6号機からインポート） */
.align-center {
  text-align: center;
}

.bold {
  font-weight: 700;
}

/* 注意事項用の小さい文字 */
.messages-form .small-text {
  font-size: 0.825rem;
  line-height: 1.5;
  color: #fff;
}

/* フォームスタイル */
.messages-form label {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.5em 0;
  display: block;
}

#input_form label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #fff;
}

#input_form input[type="text"],
#input_form textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  color: #333;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

#input_form input[type="text"]:focus,
#input_form textarea:focus {
  outline: none;
  border-color: #0066cc;
}

#input_form textarea {
  min-height: 15rem;
  resize: vertical;
}

#input_form > div {
  margin: 3rem auto 5rem;
}

.messages-form #message {
  min-height: 15em;
  resize: vertical;
}


/* 送信ボタン（6号機スタイル） */
#input_form #submit input[type="submit"],
#input_form #submit input[type="button"] {
  background-color: #20b648;
  color: #ffffff;
  border: none;
  border-radius: 2em;
  padding: 1.3rem 3rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  height: auto;
  width: 460px;
  letter-spacing: 1em;
  text-indent: 0.5em;
  transition: background-color 0.3s ease;
}

#input_form #submit input[type="submit"]:hover:not(:disabled),
#input_form #submit input[type="button"]:hover:not(:disabled) {
  background-color: #25d052;
}

#input_form #submit input[type="submit"]:disabled,
#input_form #submit input[type="button"]:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* thanksページ用スタイル（6号機から） */
.thanks-message {
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.4;
}

.thanks-message .title {
  margin-top: 2rem;
}

.thanks-message .number {
  color: #ffd700;
  font-size: 1.2em;
}

.thanks-message + div {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.thanks-message ~ .backtotop {
  line-height: 5rem;
}

/* トップに戻るボタン（6号機から） */
.messages-form .button {
  display: inline-block;
  width: 460px;
  height: 73px;
  line-height: 73px;
  text-decoration: none;
  color: #ffffff;
  background: url('../../../qzs-5/images/messages/form/btn.webp') no-repeat;
  background-size: contain;
  text-align: center;
  transition: opacity 0.3s ease;
  padding: 0;
  font-size: 1.5rem;
  font-weight: bold;
}

.messages-form .button:hover {
  opacity: 0.8;
  text-decoration: none;
}

@media (max-width: 736px) {
  #main {
    padding: 1rem 0 2rem 0;
  }
  
  #main .leaf {
    padding: 1em 1%;
  }
  
  body.messages-form #main {
    font-size: 1.2rem;
  }
  
  #input_form #submit input[type="submit"] {
    width: 100%;
  }

  /* thanksページ スマホ対応 */
  .thanks-message {
    font-size: 1.8rem;
  }

  .thanks-message + div {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .thanks-message ~ .backtotop {
    line-height: 3rem;
  }

  .messages-form .button {
    width: 300px;
    height: 48px;
    line-height: 48px;
    font-size: 1.2rem;
  }
}

.thanks-message img {
  max-width: 150px;
  margin-bottom: 1rem;
}

@media (max-width: 736px) {
  .thanks-message img {
    max-width: 120px;
  }
}

/* reCAPTCHA */
.g-recaptcha {
  display: inline-block;
}