@charset "utf-8";

/* 会社情報ページのデザインを参考にした新しいスタイル */
.contact__overview {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 32px;
  border-radius: 16px;
  margin-bottom: 48px;
  text-align: center;
}

.contact__overview_text {
  font-size: 18px;
  line-height: 1.7;
  color: #333;
  margin: 0;
}

@media (max-width: 992px) {
  .contact__overview_text {
    white-space: nowrap;
    font-size: clamp(13px, calc(1.75vw), 18px);
  }
}

/* セクションタイトル */
.contact__section_title {
  font-size: 24px;
  font-weight: bold;
  color: #b83937;
  margin: 16px 0 32px 0;
  text-align: center;
  position: relative;
}

.contact__section_title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #b83937;
  margin: 12px auto 0;
  border-radius: 2px;
}

/* フォームカード */
.contact__form_card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 48px;
  margin-bottom: 48px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact__form_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

/* フォームアイテム */
.contact__form_item {
  margin-bottom: 32px;
}

.contact__form_label_container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.contact__form_label {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.contact__form_required {
  background-color: #b83937;
  color: #FFF;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

.contact__form_input,
.contact__form_textarea {
  width: 100%;
  border: 2px solid #e9ecef;
  background-color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact__form_input:focus,
.contact__form_textarea:focus {
  border-color: #b83937;
  box-shadow: 0 0 0 0.2rem rgba(184, 57, 55, 0.25);
  outline: none;
}

.contact__form_textarea {
  resize: vertical;
  min-height: 120px;
}

/* チェックボックス */
.contact__checkbox_container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.contact__checkbox {
  margin-top: 4px;
  transform: scale(1.2);
}

.contact__checkbox_label {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* アラートメッセージ */
.contact__form_alert {
  color: #dc3545;
  font-weight: bold;
  font-size: 14px;
  margin-top: 8px;
  display: block;
  visibility: hidden;
}

/* 送信ボタン */
.contact__submit_container {
  text-align: center;
  margin: 48px 0 32px 0;
}

.contact__submit {
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  background: linear-gradient(135deg, #b83937 0%, #d63384 100%);
  border-radius: 32px;
  text-align: center;
  padding: 16px 48px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(184, 57, 55, 0.3);
  border: none;
  color: #FFF;
  text-decoration: none;
}

.contact__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184, 57, 55, 0.4);
  color: #FFF;
}

.contact__submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(184, 57, 55, 0.3);
}

/* 成功・エラーメッセージ */
.contact__success_box {
  background: #d4edda;
  border: 2px solid #28a745;
  border-radius: 12px;
  padding: 16px;
  margin-top: 24px;
  visibility: hidden;
}

.contact__success {
  font-weight: bold;
  color: #155724;
  margin: 0;
  text-align: center;
  display: none;
}

.contact__false_box {
  background: #f8d7da;
  border: 2px solid #dc3545;
  border-radius: 12px;
  padding: 16px;
  margin-top: 24px;
  visibility: hidden;
}

.contact__false {
  font-weight: bold;
  color: #721c24;
  margin: 0;
  text-align: center;
  display: none;
}

/* ポップアップ関連のスタイル（既存のものを維持） */
.contact__popup_background {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: white;
  opacity: 0.5;
}

.contact__popup {
  --height:640px;
  --width: 640px;
  z-index: 101;
  position: fixed;
  top : calc(50vh - calc(var(--height)/2));
  left: calc(50vw - calc(var(--width)/2));
  height: var(--height);
  width: var(--width);
  padding: 20px;
  overflow : hidden;
  background-color: white;
  border: 5px solid #b83937;
  overflow-y: scroll;
  border-radius: 12px;
  box-shadow: 10px 5px 5px gray;
  animation: 0.8s fdin;
}

.contact__popup > .contact__popup_close {
  --size:20px;
  position:sticky;
  top : calc(var(--size)/4);
  left: calc(var(--width) - var(--size)  *2* 5 /4 );
  height: var(--size);
  width: var(--size);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: #b83937;
  font-weight: bold;
  font-size: calc(var(--size) * 2);
  border-radius: calc(var(--size)/5);
}

.conctact__popup > .contact_popup_close:hover {
  background-color: red;
  color: white;
}

.contact__popup_flag {
  display: none;
}

.contact__popup_flag:not(:checked) + .contact__popup_background {
  display: none;
}

.contact__popup_flag:not(:checked) + * + .contact__popup {
  display: none;
}

.contact__popup_label {
  text-decoration:underline;
  color: #b83937;
  font-weight: bold;
  cursor: pointer;
}

#popupflag + * +.contact__popup {
  transition: 1s;
}

@keyframes fdin {
  0% {
    opacity: 0;
  }  
  100% {
    opacity: 1;
  }
}

/* 個人情報の枠の中 */
.privacy_title01 {
  position: relative;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  margin-top: 64px;
  margin-bottom: 64px;
  color: #333;
}

.privacy_title01::before {
  position: absolute;
  content: attr(data-en);
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  color: #b83937;
  opacity: .2;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.privacy_title01 span {
  position: relative;
  z-index: 1;
}

.privacy_title01::after {
  content: '';
  display: block;
  width: 120px;
  height: 4px;
  background: #b83937;
  margin: 24px auto 0;
  border-radius: 2px;
}

.nobr {
  display: none;
}

.privacy_handling_ol01{
  margin: 0;
  counter-reset: listnum;
  list-style: none;  
}

.privacy_handling_ol01 > li::before {
  counter-increment: listnum;
	content:  counter(listnum) ".";
}

.privacy_handling_ol01 > li {
  margin-top: 16px;
}

.privacy_handling_ol01 > li > p {
  margin: 0 32px 0px 0px;  
  padding-left: 2.0em;
  text-indent: -0.0em;
}

.privacy_handling_contact {
  margin-top: 16px;
  padding-left: 1.0em;
}

.privacy_handling_ol02{
  margin-top: 0;
  counter-reset: liststring;
  list-style: none;
}

privacy_handling_ol02 > li > label {
  margin: 0;  
  padding-left: 2.0em;
  text-indent: -5em;
}

/* レスポンシブ対応 */
@media (min-width: 768px) {
  .contact__section_title {
    margin: 8px 0 56px 0;
  }
}

@media (max-width: 767px) {
  .contact__form_card {
    padding: 32px 24px;
  }
  
  .contact__overview {
    padding: 24px;
  }
  
  .contact__submit {
    padding: 14px 32px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .contact__section_title {
    font-size: 20px;
  }
  
  .contact__popup {
    --width: 400px;
  }
  
  .nobr {
    display: initial;
  }

  .contact__form_card {
    padding: 24px 16px;
  }
  
  .contact__form_label {
    font-size: 14px;
  }
  
  .contact__form_required {
    font-size: 11px;
    padding: 3px 6px;
  }
  
  .contact__form_input,
  .contact__form_textarea {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  .contact__form_textarea {
    min-height: 100px;
  }
  
  .contact__checkbox_label {
    font-size: 14px;
  }
  
  .contact__submit {
    padding: 12px 24px;
    font-size: 14px;
  }
  
  .privacy_title01 {
    font-size: 32px;
  }
}

@media (max-width: 360px) {
  .contact__section_title {
    font-size: 18px;
  }
  
  .contact__popup {
    --width: 320px;
  }
  
  .contact__form_card {
    padding: 20px 12px;
  }
  
  .contact__form_item {
    margin-bottom: 24px;
  }
  
  .contact__form_label {
    font-size: 13px;
  }
  
  .contact__form_required {
    font-size: 10px;
    padding: 2px 4px;
  }
  
  .contact__form_input,
  .contact__form_textarea {
    font-size: 13px;
    padding: 8px 10px;
  }
  
  .contact__form_textarea {
    min-height: 80px;
  }
  
  .contact__checkbox_label {
    font-size: 13px;
  }
  
  .contact__submit {
    padding: 10px 20px;
    font-size: 13px;
  }
  
  .contact__submit_container {
    margin: 32px 0 24px 0;
  }
  
  .privacy_title01 {
    font-size: 28px;
  }
}

@media screen and (max-width: 695px) {
  .contact__popup {
    --width: 480px;
  }
  .nobr {
    display: initial;
  }
}

/* 古いスタイルを非表示にする */
.contact__text {
  display: none;
}

.contact__text_title {
  display: none;
}

.contact__text_required {
  display: none;
}

.contact__text_detail {
  display: none;
}

.contact__text_detail_message {
  display: none;
}

.contact_detail_div01 {
  display: none;
}

.contact_detail_div02 {
  display: none;
}

.contact__privacy_link {
  display: none;
}

.contact__text_alert {
  display: none;
}