/*
  block_of_top_body 用スタイル（PSD: top_pc.psd / top_sp.psd より作成）
  すべて .op-top-feature 配下にスコープしているため、このエリア以外には影響しません。
*/
.op-top-feature {
  background: #fff;
  padding: 64px 20px 72px;
  box-sizing: border-box;
  font-family: var(--font-family-serif, "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif);
  letter-spacing: .1em;
  /* 大枠(.container)は980pxだが、このセクションは1080px幅ではみ出させてセンター寄せする */
  /* ただしビューポート幅が1080pxを下回るPC帯(960〜1080px)で横スクロールが出ないよう、幅は可変で頭打ちにする */
  width: 1080px;
  max-width: calc(100vw - 40px);
  overflow-x: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.op-top-feature * { box-sizing: border-box; }

.op-top-feature__head {
  text-align: center;
  margin: 0 0 100px;
}
.op-top-feature__title {
  display: inline-block;
  position: relative;
  margin: 0;
  padding-bottom: 15px;
  font-family: var(--font-family-serif, "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.35;
  letter-spacing: .1em;
  color: #333;
}
.op-top-feature__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 1px;
  background: var(--main-color, #171c8f);
  transform: translateX(-50%);
}
.op-top-feature__title-br-sp,
.op-top-feature__lead-br-sp { display: none; }

.op-top-feature__body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 312px 620px;
  column-gap: 108px;
  justify-content: center;
  align-items: flex-start;
}

.op-top-feature__visual-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 30px 0;
}
.op-top-feature__visual-inner img {
  display: block;
  width: 109px;
  height: auto;
  margin: 0 auto;
}

.op-top-feature__lead {
  margin: 0 0 20px;
  font-family: var(--font-family-serif, "Noto Serif JP", serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: .04em; /* カラム幅620pxに1行で収めるため、他要素の.1emより詰めている */
  color: var(--main-color, #171c8f);
}
.op-top-feature__desc {
  margin: 0 0 40px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
}
.op-top-feature__desc .op-top-feature__note {
  font-size: 13px;
  color: #666;
}

.op-top-feature__product-name {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #333;
}
.op-top-feature__product-vol {
  margin: 0 0 2px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
.op-top-feature__price {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
.op-top-feature__price-label {
  font-weight: 500;
}
.op-top-feature__price-value {
  font-size: 20px;
  font-weight: 600;
  margin-left: .25em;
}
.op-top-feature__price-tax {
  font-size: .7em;
}

.op-top-feature__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 319px;
  height: 50px;
  margin: 0 0 20px;
  background: var(--main-color, #171c8f);
  color: #fff;
  font-family: var(--font-family-serif, "Noto Serif JP", serif);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.op-top-feature__btn:hover {
  opacity: .7;
  text-decoration: none;
  color: #fff;
}

/* ログイン中ページ用: 既存ボタンの上に追加する「一般の方」ボタン */
.op-top-feature__btn--general {
  background: var(--sub-color, #e0e0e0);
  color: var(--main-color, #171c8f);
}
.op-top-feature__btn--general:hover {
  color: var(--main-color, #171c8f);
}

/* ログイン中ページの2ボタン（一般の方/理美容師の方）だけ、高さをline-height基準の可変にして揃える */
.op-top-feature__btn--login {
  height: auto;
  padding: 14px 0;
  line-height: 1.2;
  text-align: center;
}

.op-top-feature__faq {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-decoration: underline;
}
.op-top-feature__faq:hover {
  text-decoration: underline;
  opacity: .7;
}

/* ==================== SP（〜959px） ==================== */
@media screen and (max-width: 959px) {
  .op-top-feature {
    padding: 50px 0 40px;
    width: 100%;
    max-width: none;
    left: auto;
    transform: none;
  }
  .op-top-feature__head { margin: 0 0 40px; }
  .op-top-feature__title { padding-bottom: 12px; font-size: 24px; }
  .op-top-feature__title-br-sp,
  .op-top-feature__lead-br-sp { display: inline; }

  .op-top-feature__body {
    display: block;
    padding: 0 20px;
  }
  .op-top-feature__visual { margin: 0 0 50px; }
  .op-top-feature__visual-inner { padding: 10px 0; }
  .op-top-feature__visual-inner img { width: 87px; }

  .op-top-feature__lead { margin: 0 0 16px; font-size: 20px; }
  .op-top-feature__desc { margin: 0 0 24px; font-size: 14px; }
  .op-top-feature__desc .op-top-feature__note { font-size: 12px; }

  .op-top-feature__product-name { font-size: 16px; letter-spacing: -.03em; } /* 375px幅で1行に収めるため文字間を詰めている */
  .op-top-feature__product-vol { font-size: 14px; }
  .op-top-feature__price { font-size: 14px; }
  .op-top-feature__price-value { font-size: 14px; }

  .op-top-feature__btn { width: 100%; height: 61.5px; font-size: 14px; }
  .op-top-feature__btn--login { height: auto; padding: 14px 0; }
  .op-top-feature__faq { display: block; text-align: center; font-size: 14px; }
}