@charset "UTF-8";
/* ============================================================
// index
============================================================ */
/* ------------------------------------------------------------
// Fluid Design Function
// 最小値〜最大値の間で数値を可変させる共通関数
------------------------------------------------------------ */
/* ------------------------------------------------------------
// design parts
------------------------------------------------------------ */
.page-header {
  background: url(../images/contact/bg-contact-ttl.png) no-repeat center center/cover;
}

.contact-info {
  color: #ffffff;
  margin-block: 20px clamp(60px, 5.2863436123vw + 40.1762114537px, 120px);
  padding: clamp(20px, 1.7621145374vw + 13.3920704846px, 40px) 20px;
  background: #f79646;
  border-radius: 12px;
}
.contact-info .info-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 1.7621145374vw + 13.3920704846px, 40px);
  /* 左側：白ボックス */
}
.contact-info .info-inner .label-box {
  font-size: clamp(20px, 0.704845815vw + 17.3568281938px, 28px);
  color: #f79646;
  padding: clamp(20px, 1.7621145374vw + 13.3920704846px, 40px) 20px;
  background-color: #ffffff;
  border-radius: 8px;
}
.contact-info .info-inner {
  /* 右側：電話番号エリア */
}
.contact-info .info-inner .tel-details .tel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.contact-info .info-inner .tel-details .tel-row i {
  font-size: clamp(24px, 0.704845815vw + 21.3568281938px, 32px);
  padding-top: 10px;
}
.contact-info .info-inner .tel-details .tel-row .number {
  font-size: clamp(32px, 1.2334801762vw + 27.3744493392px, 46px);
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
}
.contact-info .info-inner .tel-details .time-info {
  font-size: clamp(14px, 0.1762114537vw + 13.3392070485px, 16px);
}
@media screen and (max-width: 767px) {
  .contact-info .info-inner {
    flex-direction: column;
    text-align: center;
  }
  .contact-info .info-inner .label-box {
    width: 100%;
  }
  .contact-info .info-inner .tel-details .tel-row {
    justify-content: center;
  }
}

.contact-txt {
  margin-block: 20px 60px;
  padding: clamp(30px, 0.8810572687vw + 26.6960352423px, 40px) clamp(20px, 1.7621145374vw + 13.3920704846px, 40px);
  background: #ffffff;
  border-radius: 16px;
}

/* ------------------------------------------------------------
// contact form
------------------------------------------------------------ */
.contact-form-box {
  width: 90%;
  max-width: 800px;
  margin: 40px auto;
}

.form-dl {
  width: 100%;
}
.form-dl .form-row {
  padding: clamp(20px, 0.8810572687vw + 16.6960352423px, 30px) 0;
  transition: background-color 0.3s ease;
}
.form-dl .form-row:focus-within {
  background-color: rgba(247, 150, 70, 0.02);
}
.form-dl .form-row dt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  font-size: clamp(15px, 0.0881057269vw + 14.6696035242px, 16px);
  color: #1a1a1a;
  margin-bottom: clamp(10px, 0.3524229075vw + 8.6784140969px, 14px);
}
.form-dl .form-row dt .label-text {
  position: relative;
}
.form-dl .form-row dt .required,
.form-dl .form-row dt .optional {
  margin-left: auto;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.form-dl .form-row dt .required {
  background-color: #f79646;
  color: #fff;
}
.form-dl .form-row dt .optional {
  background-color: #f4f4f4;
  color: #888;
}
.form-dl .form-row dd {
  width: 100%;
  margin-left: 0;
  /* inputやtextareaがここに入った時の微調整 */
}
.form-dl .form-row dd > * {
  width: 100%;
  max-width: 100%;
}
.form-dl .form-row dd .postal-code span {
  padding-left: 8px;
}

.required,
.optional {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #ffffff;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.required {
  background: #e63946;
}

.optional {
  background: #999999;
}

.flex-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
}
.flex-list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
// privacy policy
------------------------------------------------------------ */
.contact-note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-top: 40px;
  padding-block: 6px;
  border-top: 2px solid #e63946;
  border-bottom: 2px solid #e63946;
}

/* ------------------------------------------------------------
// privacy policy
------------------------------------------------------------ */
.privacy-title {
  font-size: 18px;
  color: inherit;
  text-align: center;
  margin: 64px 0 24px;
}

.privacy-box {
  overflow-y: auto;
  font-size: 16px;
  color: #444444;
  height: 300px;
  padding: 32px;
  background: #fafafa;
  border: 1px solid #dddddd;
  border-radius: 4px;
}
@media screen and (max-width: 767px) {
  .privacy-box {
    height: 240px;
    padding: 20px;
  }
}
.privacy-box {
  scrollbar-width: thin;
  scrollbar-color: #cccccc #ffffff;
}
.privacy-box::-webkit-scrollbar {
  width: 8px;
}
.privacy-box::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 4px;
}
.privacy-box::-webkit-scrollbar-track {
  background-color: #ffffff;
}
.privacy-box .privacy-item-title {
  font-size: 15px;
  color: #ffffff;
  margin: 32px 0 16px;
  padding: 8px 16px;
  background: #555555;
  border-radius: 2px;
}
.privacy-box .privacy-item-title:first-child {
  margin-top: 0;
}
.privacy-box p {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 1.5em;
}
.privacy-box ul {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}
.privacy-box ul li {
  list-style-type: decimal;
  margin-bottom: 0.5em;
  font-size: 14px;
  line-height: 1.6;
}