@charset "utf-8";
/* =========================================================================
   company-custom.css  ― 会社概要・アクセス・お問い合わせ
   ========================================================================= */

/* ==========================================================================
   1. 施設概要
   ========================================================================== */
.shine-sec-outline {
  padding-top: 66px;
}
/* 背景の輪っか（トップのブログセクションと同じ演出）
   セクション外へはみ出した分がページヒーロー画像の背面に回り込むよう z-index: -1 */
.shine-sec-outline__ring {
  position: absolute;
  width: 300px;
  height: auto;
  pointer-events: none;
  z-index: -1;
}
.shine-sec-outline__ring--tr {
  top: -60px;
  right: -110px;
  opacity: 0.35;
}
.shine-sec-outline__ring--bl {
  bottom: -80px;
  left: -130px;
  width: 360px;
  opacity: 0.25;
}
/* 見出し・表本体は輪っかより手前に */
.shine-sec-outline .shine-sec-head,
.shine-outline {
  position: relative;
  z-index: 1;
}
.shine-outline {
  margin: 36px 0 0;
  padding: 14px 34px;
  background: #fff;
  border: 2px solid #7FB8C1;
  border-radius: 28px;
}
.shine-outline__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 20px 0;
  border-bottom: 1px solid #EFF4F4;
}
.shine-outline__label {
  flex: 0 0 180px;
  margin: 0;
  font-size: 1.5rem;
  color: #3E7F8B;
}
.shine-outline__data {
  flex: 1 1 320px;
  margin: 0;
  font-size: 1.55rem;
  color: #5F6C71;
}

/* ==========================================================================
   2. アクセス
   ========================================================================== */
.shine-sec-access {
  padding-top: 56px;
}
.shine-map {
  height: 380px;
  margin-top: 34px;
  border-radius: 28px;
  box-shadow: 0 6px 18px rgba(127, 184, 193, 0.18);
}

/* ==========================================================================
   3. お問い合わせフォーム
   ========================================================================== */
.shine-sec-contact {
  padding-top: 76px;
  padding-bottom: 90px;
}
.shine-form {
  margin-top: 34px;
  padding: 40px 34px;
  background: #fff;
  border: 2px solid #7FB8C1;
  border-radius: 28px;
}
.shine-form__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.shine-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}
.shine-form__row--top {
  align-items: flex-start;
}
.shine-form__label {
  flex: 0 0 170px;
  font-size: 1.5rem;
  color: #3E7F8B;
}
.shine-form__row--top .shine-form__label {
  padding-top: 12px;
}
.shine-form__req {
  color: #E8845C;
}

.shine-input {
  flex: 1 1 320px;
  width: auto;
  padding: 13px 16px;
  border: 1.5px solid #DDE9EA;
  border-radius: 14px;
  background: #FCFEFE;
  color: #414C50;
  outline: none;
}
.shine-input:focus {
  border-color: #7FB8C1;
}
.shine-input--area {
  resize: vertical;
}
.shine-input::placeholder {
  color: #B5C4C7;
}

.shine-form__submit {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/* ==========================================================================
   4. CMSフォーム（.form-pattern-1）上書き
   ── CMS側のCSSが後勝ちで当たるため !important で固定する
   ========================================================================== */

/* 送信ボタン ― サイト共通ボタン（.btn--solid + .shine-btn--pop）に合わせる／中央配置 */
.shine-form .submit-btn,
.form-pattern-1 .submit-btn,
button.submit-btn,
input.submit-btn {
  display: block !important;
  width: -webkit-fit-content !important;
  width: fit-content !important;
  min-width: 260px !important;
  max-width: 100% !important;
  margin: 34px auto 0 !important;
  padding: 15px 56px !important;
  border: 2px solid #7FB8C1 !important;
  border-radius: 999px !important;
  background: #7FB8C1 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 0 #5E9AA5 !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  -webkit-transition: all 0.3s ease !important;
          transition: all 0.3s ease !important;
}
.shine-form .submit-btn:hover,
.form-pattern-1 .submit-btn:hover,
button.submit-btn:hover,
input.submit-btn:hover {
  background: #8FC6CE !important;
  border-color: #8FC6CE !important;
  color: #fff !important;
  opacity: 1 !important;
}
.shine-form .submit-btn:active,
.form-pattern-1 .submit-btn:active,
button.submit-btn:active,
input.submit-btn:active {
  -webkit-transform: translateY(2px) !important;
          transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #5E9AA5 !important;
}

/* 送信ボタンの親要素側に text-align 等が効いている場合の保険 */
.shine-form .form-pattern-1 .submit-area,
.shine-form .form-pattern-1 .btn-area {
  text-align: center !important;
}

/* 必須マーク ― 「必須」バッジ → サイト配色の「＊」に変更 */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: '＊' !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #E8845C !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required {
  background: transparent !important;
  color: #E8845C !important;
}

@media screen and (max-width: 639px) {
  .shine-sec-outline { padding-top: 44px; }
  .shine-sec-outline__ring--tr { width: 180px; top: -30px; right: -70px; }
  .shine-sec-outline__ring--bl { width: 200px; bottom: -50px; left: -80px; }
  .shine-outline { padding: 8px 20px; border-radius: 22px; }
  .shine-outline__row { padding: 16px 0; }
  .shine-outline__label { flex: 0 0 100%; }
  .shine-sec-access { padding-top: 40px; }
  .shine-map { height: 280px; border-radius: 22px; }
  .shine-sec-contact { padding-top: 44px; padding-bottom: 50px; }
  .shine-form { padding: 26px 20px; border-radius: 22px; }
  .shine-form__label { flex: 0 0 100%; }
  .shine-form__row--top .shine-form__label { padding-top: 0; }
  .shine-input { flex: 1 1 100%; }

  .shine-form .submit-btn,
  .form-pattern-1 .submit-btn,
  button.submit-btn,
  input.submit-btn {
    min-width: 0 !important;
    width: 100% !important;
    margin-top: 26px !important;
    padding: 14px 24px !important;
    font-size: 1.5rem !important;
  }
}