/* ============================
  カラー設定
============================ */
.cl-000 {
  color: #000;
}

.cl-050505 {
  color: #050505;
}

.bc-000 {
  background-color: #000;
}

.bc-050505 {
  background-color: #050505;
}

.bg-150E0D {
  background-color: #150E0D;
}

.bc-FFF {
  background-color: #FFF;
}

.bg-FFF4F2 {
  background-color: #FFF4F2;
}

/* ============================
  汎用クラス
============================ */
.a-block {
  display: block;
  width: 100%;
  height: auto;
}

.d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.d-flex-st {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.fw-bold {
  font-weight: bold;
}

.t-center {
  text-align: center;
}

.page-top-under {
  padding: 2.08% 0 10.48% 0;
}

@media screen and (max-width: 768px) {
  .page-top-under {
    padding: 35.9% 0 30.77% 0;
  }
}

body {  
  .pc-only {
    display: block;
  }

  .sp-only {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  body {  
    .pc-only {
      display: none;
    }

    .sp-only {
      display: block;
    }
  }
}


/* ============================
  通常ホバー
============================ */
a:hover,
button:hover,
a img:hover,
button img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

a,
button,
a img,
button img {
  transition: transform 0.3s ease;
}


/* ============================
  横幅設定
============================ */
/* 1440x */
.container-w1440 {
  width: clamp(20.313rem, 3.398rem + 72.17vw, 90rem);
  margin: 0 auto;
}

/* 1180px */
.container-w1180 {
  width: clamp(20.25rem, 7.265rem + 55.4vw, 73.75rem);
  margin: 0 auto;
}

/* テキスト幅設定（必用に応じて） */
.section-title-wap {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .section-title-wap {
    width: 88.575%;
    margin: 0 auto;
  }

  .container-sp-w310 {
    width: 79.49%;
  }
}


/* ============================
  テキスト設定
============================ */

/* margin-topはそのままでセンターに */
.page-title-p::after {
  margin: clamp(1rem, 0.873rem + 0.52vw, 1.5rem) auto 0 auto;
}

/* コンタクトの各下層ページのmargin-topを調整 */
.lower-page-title-p::after {
  margin: clamp(1rem, 0.793rem + 0.85vw, 1.813rem) auto 0 auto;
}

/* ============================
   aboutページ　セクション見出し
============================ */
.section-heading {
    display: flex;
    align-items: center;
    gap: clamp(1.063rem, 0.82rem + 1.04vw, 2.063rem);
    margin-bottom: clamp(1.875rem, 1.268rem + 2.59vw, 4.375rem);
}

.section-heading__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3172FF;
    flex-shrink: 0;
}

.section-heading__title {
    margin: 0;
    font-size: clamp(1.25rem, 0.947rem + 1.29vw, 2.5rem);
    font-family: "ShipporiGothic";
    font-weight: 400;
    color: #333;
    white-space: nowrap;
}

.section-heading__divider {
    width: 1px;
    height: 1em;
    background: #ccc;
    flex-shrink: 0;
}

.section-heading__subtitle {
    font-size: clamp(0.75rem, 0.568rem + 0.78vw, 1.5rem);
    color: #888;
    white-space: nowrap;
}

/* ============================
    ページ共通FV
============================ */
.page-fv {
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(8rem, 1.568rem + 27.44vw, 34.5rem);
    background: url("../../images/FV_page.png") no-repeat center;
    background-size: cover;
}

.page-fv__title {
    margin: 0;
    font-family: "ShipporiGothic";
    font-weight: 400;
    font-size: clamp(3.125rem, 1.153rem + 8.41vw, 11.25rem);
    color: #fff;
}

.page-fv__subtitle {
    margin: clamp(12px, 1vw, 20px) 0;
    font-family: "ShipporiGothic";
    font-size: clamp(0.75rem, 0.204rem + 2.33vw, 3rem);
    color: #fff;
}

/* ============================
   準備中・完了ページ
============================ */
.thanks {
    padding: clamp(3.75rem, 2.5rem + 6.25vw, 7.5rem) 0;
    text-align: center;
}

.thanks__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.thanks__title {
    font-size: clamp(1.5rem, 1vw + 1.25rem, 2.25rem);
    color: #333;
    margin: 0 0 1.5rem 0;
}

.thanks__text {
    font-size: var(--fs-body, 1rem);
    line-height: 2;
    color: var(--color-body, #414141);
    margin: 0 auto clamp(2.5rem, 2vw + 2rem, 4rem) auto;
    max-width: 500px;
}

.thanks__back {
    text-align: center;
}

.thanks__back-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 3rem;
    background: #3172FF;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.3s;
}

.thanks__back-btn:hover {
    opacity: 0.8;
}

a {
    color: #3172FF;
}