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

.cl-050505 {
  color: #050505;
}

.cl-FFF {
  color: #FFF !important;
}

.cl-DC3714 {
  color: #BA2A20;
}

.cl-F0C0B5 {
  color: #F0C0B5 !important;
}

.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;
}

.bg-DC3714 {
  background-color: #BA2A20;
}


/* ============================
  汎用クラス
============================ */
.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: 22% 0 30.77% 0;  /* 小タブレット用（600px〜768px） */
  }
}

@media screen and (max-width: 599px) {
  .page-top-under {
    padding: 35.9% 0 30.77% 0;  /* SP用（元の値） */
  }
}

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,
button,
a img,
button img {
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  a:hover,
  button:hover,
  a img:hover,
  button img:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease;
  }
}


/* ============================
  横幅設定
============================ */
/* 1600px */
.container-w1600 {
  width: clamp(21.875rem, 1.961rem + 81.7vw, 100rem);
  margin: 0 auto;
}

/* 1200px */
.container-w1200 {
  width: clamp(21.875rem, 8.333rem + 55.56vw, 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%;
  }
}


/* ============================
  テキスト設定
============================ */
.section-title-h3 {
  font-size: clamp(1.25rem, 1.059rem + 0.78vw, 2rem);
  line-height: clamp(1.5rem, 1.277rem + 0.92vw, 2.375rem);
  letter-spacing: 0.05em;
  color: #050505;
  font-weight: 500;
}

/* ノートPC帯: フォントサイズを抑える、マージン調整 */
@media screen and (min-width: 1280px) and (max-width: 1800px) {
  .section-title-h3 {
    font-size: clamp(1.25rem, 0.9rem + 0.65vw, 1.625rem);
    line-height: clamp(1.5rem, 1.1rem + 0.75vw, 2rem);
  }

  .section-title-p {
    margin-top: clamp(1rem, 0.5rem + 0.8vw, 1.5rem);
  }
}

.section-title-p {
  font-family: "raleway", sans-serif !important;
  font-size: clamp(0.875rem, 0.716rem + 0.65vw, 1.5rem);
  letter-spacing: 0.1em;
  color: #858585;
  font-weight: 400;
  margin-top: clamp(0.5rem, 0.011rem + 0.98vw, 1.188rem);
}

.section-title-p::after {
  content: '';
  display: block;
  width: clamp(4.938rem, 4.603rem + 1.37vw, 6.25rem);
  height: clamp(0.25rem, 0.218rem + 0.13vw, 0.375rem);
  background-size: contain;
  background-repeat: no-repeat;
  background: #BA2A20;
  margin: clamp(1rem, 0.873rem + 0.52vw, 1.5rem) 0 0 0;
}

/* 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;
}