@charset "utf-8";
/* ============================================================
   男性HP 修正まとめ（2026-08-02）
   指摘事項の対応をこの1ファイルに集約する。
   元のCSSは変更していないので、この読み込みを外せば元に戻る。
   ============================================================ */

/* ------------------------------------------------------------
   [6] 店舗情報テーブルの線が見えない
   枠線が #e6ded0 で背景とほぼ同色だったため、少し濃くする。
   縦の区切り線も足して表として読めるようにする。
   ------------------------------------------------------------ */
.store__data {
  border-top-color: #cbbb9c;
}
.store__data dt,
.store__data dd {
  border-bottom-color: #cbbb9c;
}
@media screen and (min-width: 769px) {
  .store__data dt {
    border-right: 1px solid #cbbb9c;
  }
}

/* ------------------------------------------------------------
   [17] FAQ：回答が枠にくっついている（パディング不足）
   ------------------------------------------------------------ */
.faq__a {
  padding-top: 20px;
  padding-bottom: 22px;
}

/* ------------------------------------------------------------
   [17] FAQ：アコーディオン化
   質問をクリックで開閉。JSなしで動くよう details/summary に置換し、
   見た目は元の .faq__item のままにする。
   ------------------------------------------------------------ */
.faq__item[open] .faq__q::after {
  transform: translateY(-50%) rotate(-180deg);
}
.faq__q {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding-right: 52px;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid #b08f4c;
  border-bottom: 2px solid #b08f4c;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .25s ease;
}
.faq__q:hover {
  background: #fbf7f1;
}

/* ------------------------------------------------------------
   [7] FAQ：項目分け（カテゴリー見出し）
   ------------------------------------------------------------ */
.faq-group {
  max-width: 880px;
  margin: 0 auto 40px;
}
.faq-group__ttl {
  margin: 48px 0 18px;
  padding: 0 0 10px;
  border-bottom: 2px solid #b08f4c;
  color: #5b4a35;
  font-family: "Noto Serif JP", "Shippori Mincho", "游明朝", YuMincho, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .06em;
}
.faq-group:first-of-type .faq-group__ttl {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .faq-group__ttl {
    margin: 34px 0 14px;
    font-size: 17px;
  }
}

/* ------------------------------------------------------------
   [18] SALON INFO が画面幅ぴったりにくっついている
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .sec__inner,
  .store,
  .store__data {
    box-sizing: border-box;
  }
  .sec__inner {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ------------------------------------------------------------
   [8] コラム一覧をアイキャッチ付きカードにする
   ------------------------------------------------------------ */
.column--card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.column--card .column__item {
  border: 1px solid #e6ded0;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.column--card .column__item > a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}
.column--card .column__item > a:hover {
  opacity: .82;
}
.column--card .column__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: #fbf7f1;
  overflow: hidden;
}
.column--card .column__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column--card .column__body {
  display: block;
  padding: 16px 18px 20px;
}
.column--card .column__date {
  color: #b08f4c;
  font-size: 12.5px;
  letter-spacing: .06em;
}
.column--card .column__cat {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #6c9048;
  color: #fff;
  font-size: 11.5px;
}
.column--card .column__title {
  margin: 10px 0 0;
  font-family: "Noto Serif JP", "Shippori Mincho", "游明朝", YuMincho, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
}
@media screen and (max-width: 640px) {
  .column--card {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .column--card .column__title {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------
   [20] スマホ下部バーの電話アイコンが受話器に見えない
   女性サイトから移植したアイコンが曲線＋長方形の抽象形だったため、
   一般的な受話器の形に差し替える。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .c-hbtn--tel .c-ico--hand {
    display: none !important;
  }
  .c-hbtn--tel .c-hbtn__sp::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 3.2c.5-.3 1.2-.1 1.5.4l1.9 3.1c.3.5.2 1.1-.2 1.5L8.5 9.5c-.3.3-.4.7-.2 1.1a12 12 0 0 0 5.1 5.1c.4.2.8.1 1.1-.2l1.3-1.3c.4-.4 1-.5 1.5-.2l3.1 1.9c.5.3.7 1 .4 1.5l-1 1.7c-.4.7-1.2 1-2 .8C13.6 19 5 10.4 3.4 4.5c-.2-.8.1-1.6.8-2l2.4-1.3z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 3.2c.5-.3 1.2-.1 1.5.4l1.9 3.1c.3.5.2 1.1-.2 1.5L8.5 9.5c-.3.3-.4.7-.2 1.1a12 12 0 0 0 5.1 5.1c.4.2.8.1 1.1-.2l1.3-1.3c.4-.4 1-.5 1.5-.2l3.1 1.9c.5.3.7 1 .4 1.5l-1 1.7c-.4.7-1.2 1-2 .8C13.6 19 5 10.4 3.4 4.5c-.2-.8.1-1.6.8-2l2.4-1.3z'/></svg>") no-repeat center/contain;
  }
}

/* ------------------------------------------------------------
   [5] スマホ下部の追従CTAと著作表示（2026…）の間隔が空きすぎ
   固定バーぶんの余白が過剰だったため詰める。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  footer .copy,
  .ftr__copy,
  footer .copyright {
    margin-top: 8px;
    padding-bottom: 6px;
  }
  footer {
    padding-bottom: 70px;
  }
}

/* ------------------------------------------------------------
   [19] 「最後に」の帯が読みにくい（濃緑地に濃い文字）
   ------------------------------------------------------------ */
.ribbon,
[class*="ribbon"] {
  color: #fff;
}

/* ------------------------------------------------------------
   [3] 「まずは無料カウンセリング＆頭皮診断から」に丸写真が重なる
   ------------------------------------------------------------ */
.p-trial__title {
  position: relative;
  z-index: 2;
}
.p-trial__inner {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .p-trial__title {
    padding-left: 0;
    text-align: center;
  }
  .p-trial__inner > img,
  .p-trial__inner figure {
    display: none;
  }
}

/* ------------------------------------------------------------
   [12][16][21] 見出し・ボタンの改行位置
   「頭皮環 / 境に」のように語の途中で折り返していたため、
   文節単位で折り返すようにする。
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5,
.sec__ja, .sec__en, .sec__lead,
.p-trial__title,
[class*="__title"], [class*="__ttl"], [class*="-title"],
.c-ctabtn__label, .c-resv__label, .sp-fixed-cta__btn span {
  line-break: strict;
  overflow-wrap: break-word;
  /* 折り返しは BudouX に統一（ブラウザ差をなくすため） */
}

/* [21] 下部固定バー「無料カウンセリング予約」が2行になる */
@media screen and (max-width: 768px) {
  .sp-fixed-cta__btn span,
  .c-ctabtn__label {
    white-space: nowrap;
    font-size: 3.1vw;
  }
}

/* ------------------------------------------------------------
   [9] コラムの「カテゴリー」3枚並びはバランスが悪い → 2カラム
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .cards--category {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------
   CTA から入力欄へ飛んだとき、固定ヘッダーに隠れないようにする
   ------------------------------------------------------------ */
#form {
  scroll-margin-top: 150px;
}
@media screen and (max-width: 768px) {
  #form {
    scroll-margin-top: 70px;
  }
}

/* ------------------------------------------------------------
   電話番号をPCでも発信できるようにする
   元CSSは @media (min-width:769px) で a[href*="tel:"] を
   pointer-events:none にしており、PCでは押せなかった。
   （PCでクリックすると FaceTime 等の通話アプリが開く）
   ------------------------------------------------------------ */
a[href^="tel:"] {
  pointer-events: auto !important;
  cursor: pointer;
}

/* ------------------------------------------------------------
   Instagram の写真一覧
   枠の比率を Instagram のグリッド表示（縦長 3:4）に合わせる。
   すべて同じ大きさで並び、切れる部分が出ないようにする。
   写真は管理画面「Instagram写真」から追加できる。
   ------------------------------------------------------------ */
.insta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* PCは4列。16枚なら4段でぴったり揃う */
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.insta__item {
  min-width: 0;
}
.insta__item a {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: #f2efe7;
  transition: opacity .2s;
}
.insta__item a:hover {
  opacity: .85;
}
.insta img,
.insta__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 263 / 314;   /* Instagram の写真と同じ縦長 */
  object-fit: cover;
}
.insta__more {
  margin: 32px 0 0;
  text-align: center;
}
.insta__more a {
  display: inline-block;
  padding: .8em 2em;
  border: 1px solid #b08f4c;
  border-radius: 999px;
  color: #b08f4c;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.insta__more a:hover {
  background: #b08f4c;
  color: #fff;
}
@media screen and (max-width: 480px) {
  .insta {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* ------------------------------------------------------------
   日本語の読みやすさ（案A＋B＋C）
   ・A ぶら下げ組み … 行末の「、」「。」を枠の外に逃がし、行末の凸凹を抑える
   ・B 約物のアキ詰め … 「、」「。」「（」が持つ余白を詰めて間延びを防ぐ
   ・C 文節での折り返し … 「頭皮環／境に」のような語の途中での改行をなくす
   いずれも対応していないブラウザでは無視されるだけで、崩れることはない。
   このブロックを消せば元の組みに戻る。
   ------------------------------------------------------------ */
body {
  /* ブラウザごとに対応がバラバラな指定は使わない。
     使うと Chrome と Safari で改行位置が食い違うため。
       hanging-punctuation … Safariのみ対応
       text-spacing-trim   … Chromeのみ対応
       word-break:auto-phrase … Chromeのみ対応
       text-wrap:pretty    … Safariで不具合
     折り返しは全ブラウザ共通で BudouX（inc/jp-linebreak.php）に任せる。 */
  line-break: strict;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   コース料金の「回数／施術内容」で、値の2行目以降が
   ラベルの下に回り込んで表として読めなくなっていた。
   ラベルと値を横並びの2列にして、値は値の列の中だけで折り返すようにする。
   （スマホ幅のみ。PCは元のまま）
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .course__list li {
    display: flex;
    align-items: flex-start;
    gap: .6em;
  }
  .course__list li b {
    flex: 0 0 auto;
    margin-right: 0;
  }
}


/* ------------------------------------------------------------
   タブレット幅（769〜936px）でヘッダーの予約ボタンが画面からはみ出す問題
   ヘッダーの .nav_box は最低937px必要で、iPad縦では収まらない。
   スマホ版と同じ「下部固定バー」に切り替える（スマホ用の指定を流用）。
   937px以上はPC版のまま。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) and (max-width: 936px) {
  header#siteheader div.inner div.nav_box { position:fixed;left:0;bottom:0;z-index:9997;width:100%;padding:5px 6px calc(5px + env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(255,255,255,.96);box-shadow:0 -2px 10px rgba(0,0,0,.12);justify-content:space-between;gap:6px }
  header#siteheader div.inner div.nav_box div.tel_btn { width:auto;flex:1 }
  header#siteheader div.inner div.nav_box div.reserve_btns { width:auto;flex:2;gap:6px }
  header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap a,header#siteheader div.inner div.nav_box div.tel_btn a { width:100% }
  header#siteheader div.inner div.nav_box .c-hbtn--tel,header#siteheader div.inner div.nav_box .c-hbtn--mail,header#siteheader div.inner div.nav_box .c-hbtn--line { display:flex;align-items:center;justify-content:center;gap:6px;height:52px;aspect-ratio:auto;border-radius:6px }
  header#siteheader div.inner div.nav_box .c-hbtn__sp { display:flex !important;align-items:center;justify-content:center;gap:6px }
  header#siteheader div.inner div.nav_box .c-hbtn__ico,header#siteheader div.inner div.nav_box .c-ico--hand { position:static !important;left:auto !important;top:auto !important;width:20px !important;transform:none !important }
  header#siteheader div.inner div.nav_box .c-hbtn__label,header#siteheader div.inner div.nav_box .c-hbtn__splabel { position:static !important;left:auto !important;top:auto !important;transform:none !important;font-size:13px !important;letter-spacing:0 !important }
  header#siteheader div.inner div.nav_box { position:fixed;left:0;bottom:0;z-index:9997;width:100%;padding:5px 6px calc(5px + env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(255,255,255,.96);box-shadow:0 -2px 10px rgba(0,0,0,.12);display:flex;justify-content:space-between;gap:6px }
  header#siteheader div.inner div.nav_box { align-items:stretch;gap:7px }
  header#siteheader div.inner div.nav_box .reserve_btns { flex:2 1 0;min-width:0 }
  header#siteheader div.inner div.nav_box .reserve_btn_wrap { display:flex;gap:7px;height:100% }
  header#siteheader div.inner div.nav_box .reserve_btn_wrap>a { flex:1 1 0;min-width:0 }
  header#siteheader div.inner div.nav_box .tel_btn { flex:1 1 0;min-width:0;order:2 }
  header#siteheader div.inner div.nav_box .tel_btn>a { display:block;height:100% }
  header#siteheader div.inner div.nav_box a.mail_btn, header#siteheader div.inner div.nav_box a.line_btn, header#siteheader div.inner div.nav_box .tel_btn>a { height:57px;border-radius:4px;color:#fff;text-decoration:none;overflow:hidden }
  header#siteheader div.inner div.nav_box a.mail_btn { background:#b3523c }
  header#siteheader div.inner div.nav_box a.line_btn { background:#61ae5c }
  header#siteheader div.inner div.nav_box .tel_btn>a { background:#747171 }
  header#siteheader div.inner div.nav_box .c-hbtn { display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;aspect-ratio:auto;background:none;color:#fff }
  header#siteheader div.inner div.nav_box .c-hbtn__pc, header#siteheader div.inner div.nav_box .c-hbtn__arrow { display:none }
  header#siteheader div.inner div.nav_box .c-hbtn__sp { position:static;display:flex;align-items:center;gap:5px }
  header#siteheader div.inner div.nav_box .c-hbtn__ico, header#siteheader div.inner div.nav_box .c-ico { position:static;left:auto;top:auto;flex:0 0 auto;width:20px;height:20px;transform:none }
  header#siteheader div.inner div.nav_box .c-hbtn__label, header#siteheader div.inner div.nav_box .c-hbtn__splabel { position:static;left:auto;top:auto;font-size:14px;line-height:1;white-space:nowrap;transform:none;color:#fff }
  body { padding-bottom: 70px; }
}


/* ------------------------------------------------------------
   タブレット幅：下部固定バーの中身もスマホ版の見た目に合わせる
   （PC用と スマホ用の表示が二重に出て重なっていたため）
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) and (max-width: 936px) {
  header#siteheader div.inner div.nav_box { max-width: 430px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
  header#siteheader div.inner div.nav_box .c-hbtn--tel { aspect-ratio:1/1;background:#9c9c9c;color:#fff }
  header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__pc { display:none }
  header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__sp { display:block }
  header#siteheader div.inner div.nav_box .c-hbtn--tel .c-ico--hand { position:absolute;left:30cqw;top:16.3636cqw;width:40cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__splabel { position:absolute;left:50%;transform:translateX(-50%);top:67.4545cqw;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:17.2727cqw;font-weight:500;line-height:1;letter-spacing:-0.2273cqw;white-space:nowrap }
  header#siteheader div.inner div.nav_box .c-hbtn--mail, header#siteheader div.inner div.nav_box .c-hbtn--line { aspect-ratio:1/1;border-radius:0 }
  header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__arrow, header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__arrow { display:none }
  header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__label, header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__label { left:50% !important;transform:translateX(-50%);font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:17.2727cqw;font-weight:500;top:67.4545cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--mail { background:#ef7000 }
  header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__ico { left:30cqw;top:17.2727cqw;width:40.9091cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__label { letter-spacing:-0.3636cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--line { background:#35a500 }
  header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__ico { left:26.3636cqw;top:13.6364cqw;width:48.1818cqw }
  header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__label { letter-spacing:.8182cqw }
  /* メニュー行は2段に折り返して収める */
  .gnav__list { flex-wrap: wrap; justify-content: center; }
  .gnav__link { padding: 0 12px; font-size: 13px; }
}


/* ------------------------------------------------------------
   iPad縦向きでもスマホ用の縦長メインビジュアルを出す
   （横向きタブレット・PCは横長MVのまま）
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  #KEY figure img.switch {
    content: url("assets/images/key_sp.png?v=1786195072");
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ------------------------------------------------------------
   「薬に頼らない発毛メソッド」のビジュアル
   PC用の横長1枚しかなく、スマホでは高さ213pxまで縮んで
   文字が読めなかった。スマホとiPad縦向きは縦長版に差し替える。
   （横向きタブレット・PCは横長のまま）
   ------------------------------------------------------------ */
@media screen and (max-width: 768px),
       screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .p-method__media {
    content: url("assets/images/problem_photo02_sp.jpg?v=1786197560");
    display: block;
    width: 100%;
    /* imgタグの width/height 属性（2560×1400）で比率が決まってしまうため、
       差し替えた縦長画像の比率に上書きする */
    aspect-ratio: 1080 / 1620;
    height: auto;
    object-fit: contain;
  }
}

/* ------------------------------------------------------------
   数字がタグで区切られている見出しが、その境目で改行される問題
   「当サロンが選ばれる3／つの理由」のように数字の直後で切れていた
   （Chromeは文節で折り返すため起きないが、Safariでは起きる）。
   ------------------------------------------------------------ */
.nowrap {
  white-space: nowrap;
}

/* ------------------------------------------------------------
   MESSAGE のキャッチをPC版だけ3行に分ける
   「髪のことで立ち止まっているすべての男性へ
     もう一度生やしたいという想いに
     本気で向き合います。」
   行末に読点が来ないよう、PCでは読点を隠して改行に置き換える。
   スマホ版は従来どおり（読点あり・自動折り返し）。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .p-message__catch .pc-hide-comma {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .p-message__catch .pc-only-br {
    display: none;
  }
}

/* ------------------------------------------------------------
   「だから実際に！」の帯をスマホ版で3行に分ける
   「当サロンにお越しになる方の多くが
     薬や医療機関でのケアに不安を
     感じていらっしゃいます。」
   1行目が15px入らなかったため、文字を20px→19pxにする。
   行末に読点が来ないよう、スマホでは読点を隠して改行に置き換える。
   PC版は従来どおり。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .p-band__text {
    font-size: 19px;
  }
  .p-band__text .sp-hide-comma {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .p-band__text .sp-only-br {
    display: none;
  }
}

/* ------------------------------------------------------------
   SP版で丸写真が白いカードのタイトルに重なる問題
   .campaign01_head の装飾写真が絶対配置（top:57px）で、
   帯の下＝カードの見出し位置に落ちていた。
   帯の中に収まるサイズ・位置に置き直す（PC版は従来どおり）。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* 元CSSが長いセレクタで幅と位置を指定しているので、同じ形で上書きする */
  div.campaign01 div.campaign01_wrapper div.campaign01_head span.pic {
    top: 7px;
    left: -8px;
    width: 40px;
    height: 40px;
  }
  div.campaign01 div.campaign01_wrapper div.campaign01_head span.pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 「当店独自の発毛専用メニューが全て／施術可能！」の改行 */
  .p-trial__menuHead .sp-only-br {
    display: inline;
  }
}
@media screen and (min-width: 769px) {
  .p-trial__menuHead .sp-only-br {
    display: none;
  }
}

/* ------------------------------------------------------------
   改行の出し分け用（共通）
   .sp-only-br … スマホだけで改行する
   .pc-only-br … PCだけで改行する
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .sp-only-br { display: none; }
}
@media screen and (max-width: 768px) {
  .pc-only-br { display: none; }
}

/* ------------------------------------------------------------
   キャンペーン部分（.campaign01）の上下の余白をなくす
   SP版のみ。PC版は従来どおり。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* 元CSSが div.campaign01 で指定しているため、同じ形で上書きする */
  div.campaign01 {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------
   「3つの理由」セクション（.p-reason）の上下の余白をなくす
   SP版のみ。PC版（96px）は従来どおり。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .p-reason {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------
   「5つのお約束」セクションの上下の余白をなくす
   外側 #PROMISE（下60px）と 内側 .p-promise（上下48px）の両方にある。
   SP版のみ。PC版は従来どおり。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  div#PROMISE {
    padding-top: 0;
    padding-bottom: 0;
  }
  .p-promise {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------
   表示の出し分け用（共通）
   .sp-hide … スマホでは隠す（PCでは表示）
   .pc-hide … PCでは隠す（スマホでは表示）
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .sp-hide { display: none; }
}
@media screen and (min-width: 769px) {
  .pc-hide { display: none; }
}

/* ------------------------------------------------------------
   「詳しくはこちら」ボタンの上に余白を入れる
   .c-more は上のpaddingが0で、直前の本文に密着していた。
   （下は40pxあるので、上は少し控えめの28pxにする）
   SP版のみ。PC版は従来どおり。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .c-more {
    padding-top: 28px;
    padding-bottom: 0;   /* 下の余白は次のセクション（.p-case の52px）に任せる */
  }
}

/* ------------------------------------------------------------
   ヘッダーのメニューを見やすくする（PC版）
   ・ロゴ行とメニュー行の境目をはっきりさせる
   ・項目の仕切り線を見える濃さにし、高さを抑えて上品に見せる
   ・マウスを乗せた項目に下線を出して現在位置を分かりやすくする
   SP版はドロワーメニューなので対象外。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .gnav-wrap {
    background: #f7f2e8;
    border-top-color: #d8cdb5;
    box-shadow: inset 0 -1px 0 #e6ded0;
  }
  /* 仕切り線：全高の線をやめ、中央に短い線を置く */
  .gnav__item + .gnav__item {
    border-left: none;
  }
  .gnav__item + .gnav__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: #cbbb9c;
  }
  /* マウスを乗せた項目に下線 */
  .gnav__link {
    position: relative;
  }
  .gnav__link::before {
    content: "";
    position: absolute;
    left: 1.15em;
    right: 1.15em;
    bottom: 7px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .18s ease;
  }
  .gnav__link:hover::before {
    transform: scaleX(1);
  }
}

/* 男性 実績ページ：女性側と同じカード表示にする */
.case {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.case__item {
  border: 1px solid #e6ded0;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.case__img {
  display: block;
  width: 100%;
  height: auto;
}
.case__note {
  max-width: 1080px;
  margin: 22px auto 0;
  color: #8b7a62;
  font-size: 13px;
  text-align: center;
}

/* サロン情報：本文の横に店舗案内カードを置く（PCのみ2カラム） */
.store__img { margin: 28px auto 0; max-width: 420px; }
.store__img img { width: 100%; height: auto; display: block; border-radius: 6px; }
@media (min-width: 900px) {
  .store { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; align-items: start; }
  .store__txt { min-width: 0; }
  .store__img { margin: 0; max-width: none; position: sticky; top: 100px; }
}


/* ------------------------------------------------------------
   「薬に頼らない発毛メソッド」の写真（1536×1024）に枠を合わせる。
   元の 2560/1400 のままだと上下が切れ、下部のリボンが欠ける。
   （スマホ・iPad縦向きは上の縦長差し替えルールが優先される）
   ------------------------------------------------------------ */
@media screen and (min-width: 1025px),
       screen and (min-width: 769px) and (orientation: landscape) {
  .p-method__media {
    aspect-ratio: 1536 / 1024;
    object-fit: cover;
    object-position: center;
  }
}

/* ------------------------------------------------------------
   フッターの整理（見出し＋仕切り線）
   元は4列のリンクが見出しなしで並び、どのグループが何なのか
   分からなかった。列に見出しを付け、縦の仕切り線で区切る。
   性別の切り替えは埋もれていたので丸ボタンにして独立させる。
   ------------------------------------------------------------ */
.ftr__nav { flex-wrap: wrap; }
.ftr__col { flex: 1 1 0; min-width: 0; }
/* 2列目以降に仕切り線と余白 */
.ftr__col + .ftr__col {
  padding-left: 32px;
  border-left: 1px solid rgba(139, 122, 98, .22);
}
.ftr__colTtl {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(139, 122, 98, .22);
  color: #8b7a62;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
}
/* 性別の切り替えボタン */
.ftr__cross { margin: 18px 0 0; }
.ftr__crossBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border: 1px solid #b08f4c;
  border-radius: 999px;
  color: #8a6d2f;
  font-size: 13.5px;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ftr__crossBtn::after { content: "→"; font-size: 12px; }
.ftr__crossBtn:hover { background: #b08f4c; color: #fff; text-decoration: none; }

/* タブレット以下は2列。仕切りは縦線をやめ、行間で分ける */
@media screen and (max-width: 900px) {
  .ftr__nav { gap: 24px 28px; }
  .ftr__col { flex: 1 1 calc(50% - 14px); }
  .ftr__col + .ftr__col { padding-left: 0; border-left: 0; }
}
/* スマホは1列に積む（アコーディオンにはせず全部見せる） */
@media screen and (max-width: 600px) {
  .ftr__col { flex: 1 1 100%; }
  .ftr__cross { margin-top: 16px; }
  .ftr__crossBtn { width: 100%; justify-content: center; padding: 14px 18px; }
}


/* ------------------------------------------------------------
   スタッフ紹介「お客様へ」の本文が12pxのままで小さかった。
   クラスの無い <p> に効かせて、他ページの本文（15px前後）に合わせる。
   ------------------------------------------------------------ */
.detail p:not([class]) {
  font-size: 15.5px;
  line-height: 1.95;
}
.detail p.detail__lead { font-size: 21px; line-height: 1.85; }
.detail .detail__h3 { font-size: 20px; }
@media screen and (max-width: 768px) {
  .detail p:not([class]) { font-size: 15px; line-height: 1.9; }
  .detail p.detail__lead { font-size: 17.5px; line-height: 1.8; }
  .detail .detail__h3 { font-size: 17px; }
}


/* ============================================================
   2026-08-11 修正
   ① メインビジュアル上の余白  ② 「ご存じでしょうか」1行化
   ③ 見出し・ラベルの視認性    ④ 要因図のバランス
   ============================================================ */

/* ------------------------------------------------------------
   ① 固定ヘッダーとコンテンツの間に出るベージュの帯を消す

   components.css の main_container の padding-top がヘッダーの
   実寸より大きく、その差が body の地色(#fcf7e1)の帯として見えていた。
   幅帯ごとの実測ヘッダー高にそろえる。
     〜768px    ヘッダー 55px    / padding 55px  → 元から隙間なし
     769〜936px ヘッダー 115.69px / padding 136px → 20.3px の隙間
     937px〜    ヘッダー 133px    / padding 136px → 3px の隙間
   （936/937 の境目はグローバルナビが折り返す幅。フォント環境で
     多少前後するが、ずれても最大17pxヘッダーに潜るだけで
     ベージュの帯は出ない側に倒してある）
   端数（0.3〜1px）で細い線が残らないよう、実寸より1px小さくして
   必ず「わずかに潜る」側に倒してある。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  body div.main_container { padding-top: 115px; }
}
@media screen and (min-width: 937px) {
  body div.main_container { padding-top: 132px; }
}

/* ログイン中は管理バー(32px)にヘッダー上端が潜り込むので、
   ヘッダーごと管理バーの下へ送る。
   padding-top は増やさない（html に margin-top:32px が付いて
   body ごと下がるため、増やすと32px分そのまま隙間になる）。
   管理バーが46px＋非固定になる782px以下では触らない。 */
@media screen and (min-width: 783px) {
  body.admin-bar header#siteheader { top: 32px; }
}


/* ------------------------------------------------------------
   ③-共通 リンク・ラベル・ボタンの視認性

   金色 #b08f4c は淡いベージュ地の上でコントラスト2.8〜3.0しかなく
   読みにくかったので、一段濃い #7a5f28 にそろえる。
   塗りボタンも地色を濃くして白文字が沈まないようにする。
   ※ LINEの緑はブランド色なので地色は変えず、文字を太くするだけ。
   ------------------------------------------------------------ */
.breadcrumb a,
.sec__en,
.store__data dd a,
.insta__more a,
.contact__label,
.course__num,
.course__unit,
.course__list b,
.flowlist__m,
.column__date,
.point__title small,
.formbox__privacy a,
.card__more a          { color: #7a5f28 !important; }
.course__plabel        { color: #6b5c46 !important; }
dt.clinic-list__info-ttl { color: #6d6560 !important; }

.sec__cta a,
.formbox__btn button,
.contact__item:not(.contact__item--line) .contact__val--sm a { background-color: #8a6d2f !important; }
.lpbtn                 { background-color: #55743a !important; }
.formbox__list dt .any { background-color: #6f6a5c !important; }

/* 「詳しくはこちら」系の緑ボタン・コラムのカテゴリタグ（#6c9048 は白文字で3.67） */
header#siteheader .header_right a.blank_btn--lp,
header#siteheader .header_right a.blank_btn--more,
a.c-more__btn,
.column__cat           { background-color: #55743a !important; }

dl.clinic-list__info-item > dt.clinic-list__info-ttl { color: #6d6560 !important; }

.c-hbtn__label,
.c-cta__label          { font-weight: 700 !important; }
.c-cta__badge,
.c-ctabtn--line .c-ctabtn__badge { color: #1a7a30 !important; }
.c-ctabtn--mail .c-ctabtn__badge { color: #c25400 !important; }
.clinic-list__info dt,
.clinic-list__info-item dt { color: #6d6560 !important; }

/* 男性TOPだけ padding-top が 137px（calc(90px+47px)）で指定されており
   共通指定より詳細度が高いので、ここで実測値にそろえる */
@media screen and (min-width: 769px) {
  div#INDEX.main_container { padding-top: 115px; }
}
@media screen and (min-width: 937px) {
  div#INDEX.main_container { padding-top: 132px; }
}


/* ------------------------------------------------------------
   ③-男性ページ 見出し・ラベルの視認性
   ------------------------------------------------------------ */

/* ヘッダーの「女性はこちら」。#ff6565 に白文字で 2.88 しかなかった */
header#siteheader .header_right a.blank_btn { background-color: #cc3838 !important; }

/* 注意喚起ブロック（緑地に淡黄緑） */
.p-caution__tag,
.p-caution__text      { background-color: #2a7f05 !important; }
.p-caution__text strong { color: #fff !important; }
.p-trial__qaHead      { background-color: #2a7a00 !important; }

/* 緑地(#35a500)の上の淡い黄緑文字を白にして読めるようにする */
.p-check__label,
.p-band__text em,
.campaign01_head .yellow,
.campaign01_head .yellow em { color: #fff !important; }

/* 緑地に白の小さい文字は地色を一段濃くする */
.p-check__list .p-check__name { background-color: #2a7a00 !important; }
.p-trial__menu li             { background-color: #2a7a00 !important; }

/* 淡いベージュ地の上の緑文字 */
#FLOW .common_title .en   { color: #256e00 !important; }
#FLOW .common_title > span { color: #96591a !important; }
.p-trial__shop            { color: #2a7a00 !important; }
.p-promise__title em      { color: #2a7a00 !important; }
.p-reason__title .nowrap em { color: #256f05 !important; }
.p-prob__text strong      { color: #256f05 !important; }
.p-reasonItem__no         { background-color: #2a7a00 !important; }
.p-promise__no            { background-color: #2a7a00 !important; }


/* ============================================================
   FEATURE（特徴01〜03）2026-08-11 追加
   女性ページの同セクションを土台に、色だけ男性ページの緑基調へ
   置き換えたもの。HTML構造・クラス名は女性ページと共通。
   ============================================================ */
/* ---- from components.css ---- */
.t-band{padding:30px 4% 34px;background:#2e8a06;border-top:4px solid #2e8a06;border-bottom:4px solid #2e8a06;color:#f1f8e6;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;text-align:center}
.t-band p{color:inherit;margin:0}
.t-band__no{display:inline-block;padding-bottom:6px;border-bottom:1px solid rgba(242,226,184,.8);color:#f2f8c8;font-size:26px;letter-spacing:.1em;line-height:1.2}
.t-band__no small{margin-right:.5em;font-size:13px;letter-spacing:.2em}
.t-band__sub{margin-top:14px !important;font-size:17px;letter-spacing:.06em}
.t-band__main{margin-top:6px !important;font-size:34px;font-weight:600;letter-spacing:.1em;color:#fff}
@media only screen and (max-width: 768px){
.t-band{padding:20px 5% 22px}
.t-band__no{font-size:19px}
.t-band__no small{font-size:11px}
.t-band__sub{margin-top:10px !important;font-size:13px}
.t-band__main{font-size:21px}
}
.t-award{font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;text-align:center}
.t-award p{margin:0}
.t-award__sub{color:#3e341e;font-size:20px;letter-spacing:.06em}
.t-award__main{margin-top:6px !important;color:#2e8a06;font-size:40px;font-weight:600;letter-spacing:.1em}
@media only screen and (max-width: 768px){
.t-award__sub{font-size:13px}
.t-award__main{font-size:23px}
}
.t-point{padding:26px 0 6px;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;text-align:center}
.t-point p{margin:0;color:#3e341e}
.t-point__lead{padding-bottom:10px;border-bottom:3px dotted #d9e86a;font-size:24px;letter-spacing:.04em}
.t-point__main{margin-top:14px !important;font-size:38px;font-weight:600}
.t-point__main span{color:#2e8a06}
@media only screen and (max-width: 768px){
.t-point{padding-top:16px}
.t-point__lead{font-size:14px;border-bottom-width:2px}
.t-point__main{font-size:21px}
}
.t-qa{padding:10px 0 20px;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;text-align:center}
.t-qa p{margin:0;color:#3e341e}
.t-qa__q{display:inline-block;padding:14px 40px;border-radius:999px;background:#e5dcc0;font-size:24px}
.t-qa__q span{margin-right:.3em;font-size:1.1em}
.t-qa__a{max-width:640px;margin:28px auto 0;padding:22px 26px;border:2px solid #79c447;border-radius:8px;background:#f1f8e6;text-align:left}
.t-qa__ah{color:#2e8a06 !important;font-size:26px}
.t-qa__ah span{margin-right:.3em}
.t-qa__at{margin-top:10px !important;font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;font-size:14.5px;line-height:1.9}
.t-qa__at b{color:#2e8a06}
.t-qa__lead{margin-top:40px !important;font-size:24px}
.t-qa__factors{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 0;padding:0;list-style:none}
.t-qa__factors li{padding:16px 22px;border-radius:999px;background:#5f6d7d;color:#fff;font-size:15px}
.t-qa__factors li:nth-child(2){background:#5f6d7d}
.t-qa__factors li:nth-child(4){background:#5f6d7d}
.t-qa__factors li:nth-child(5){background:#5f6d7d}
.t-qa__factors li:nth-child(6){background:#5f6d7d}
.t-qa__factors li.is-center{background:#3d4956;font-size:18px;padding:20px 30px}
@media only screen and (max-width: 768px){
.t-qa__q{font-size:14px;padding:10px 20px}
.t-qa__a{padding:16px}
.t-qa__ah{font-size:18px}
.t-qa__at{font-size:13px}
.t-qa__lead{margin-top:26px !important;font-size:15px}
.t-qa__factors{gap:8px}
.t-qa__factors li{padding:10px 14px;font-size:12.5px}
.t-qa__factors li.is-center{font-size:14px;padding:12px 18px}
}
.t-egf{padding:30px 4% 34px;border:1px solid #e5dcc0;background:#fcf7e1;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;text-align:center}
.t-egf p{margin:0;color:#3e341e}
.t-egf__flag{display:inline-block;padding:6px 22px;background:#2e8a06;color:#fff;font-size:14px;letter-spacing:.1em}
.t-egf__ttl{margin-top:14px !important;font-size:28px;line-height:1.6}
.t-egf__body{display:flex;gap:26px;margin-top:24px;text-align:left}
.t-egf__side{flex:0 0 34%;padding:16px;background:#f1f8e6;font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;font-size:12.5px;line-height:1.8}
.t-egf__side b{display:block;margin-bottom:6px;color:#2e8a06}
.t-egf__txt{flex:1;font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;font-size:13.5px;line-height:1.95}
@media only screen and (max-width: 768px){
.t-egf{padding:20px 5%}
.t-egf__ttl{font-size:17px}
.t-egf__body{flex-direction:column;gap:14px}
.t-egf__side{flex:none}
.t-egf__txt{font-size:12.5px}
}
.t-care{padding:34px 4% 38px;background:#fcf7e1;border:1px solid #e5dcc0;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;text-align:center}
.t-care p{margin:0;color:#3e341e}
.t-care__sub{font-size:15px;letter-spacing:.06em}
.t-care__main{margin-top:6px !important;font-size:30px;font-weight:600}
.t-care__flag{display:inline-block;margin-top:24px;padding:6px 24px;background:#2e8a06;color:#fff;font-size:13px}
.t-care__ttl,.t-care__ttl2{margin-top:12px !important;font-size:26px;font-weight:600}
.t-care__ttl2{margin-top:30px !important}
.t-care__txt{max-width:820px;margin:14px auto 0 !important;font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;font-size:13.5px;line-height:2;text-align:left}
.t-care__txt b{color:#2e8a06}
.t-care__flags{display:flex;justify-content:center;gap:10px;margin-top:30px}
.t-care__flags span{padding:5px 18px;background:#b9a074;color:#fff;font-size:12.5px}
.t-care__staff{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.t-care__person{padding:20px 18px;border:1px solid #e5dcc0;background:#fff;text-align:left}
.t-care__role{color:#2e8a06 !important;font-size:12px;letter-spacing:.1em;text-align:center}
.t-care__name{margin-top:2px !important;padding-bottom:10px;border-bottom:1px solid #e5dcc0;font-size:20px;text-align:center}
.t-care__msg{margin-top:12px !important;font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;font-size:12.5px;line-height:1.95}
@media only screen and (max-width: 768px){
.t-care{padding:22px 5%}
.t-care__main{font-size:19px}
.t-care__ttl,.t-care__ttl2{font-size:17px}
.t-care__txt{font-size:12.5px}
.t-care__staff{grid-template-columns:1fr;gap:12px}
}
.t-risk :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5),.t-survey :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5),.t-qa :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5),.t-egf :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5),.t-care :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5),.t-doubt :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5),.t-method2 :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5),.t-solve :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5),.t-caution :where(div,dl,dt,dd,ul,ol,li,p,span,b,em,small,h2,h3,h4,h5){color:inherit}

/* ---- from css_pc.css ---- */
@media screen and (min-width: 769px) {
div#FEATURE{width: auto;}
div#FEATURE div.inner{width: auto;
  background-color: #f1f8e6;}
div#FEATURE div.inner div.feature_container{width: auto;
  padding: 0 0 60px 0;}
div#FEATURE div.inner div.feature_container div.feature_title{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper{width: 78.2%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 0 80px 0;
  background-color: #fff;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper p.feature_text{width: 89.8%;
  margin: 0 auto;
  font-size: 18px;
  text-align: center;
  line-height: calc(30 / 18);
  letter-spacing: 0.05em;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper p.feature_text.f_txt02{padding-top: 40px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper figure.img01{width: 77.8%;
  margin: 0 auto;
  padding-top: 75px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper figure.img02{width: 50.7%;
  margin: 0 auto;
  padding-top: 60px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list{width: auto;
  padding-top: 40px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item{width: 90%;
  margin: 0 auto;
  border: 2px solid #2e8a06;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: #fff;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item:nth-child(n+2){margin-top: 30px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_title{width: auto;
  padding: 9px 0 12px 0;
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: calc(44 / 30);
  letter-spacing: 0.05em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  background-color: #2e8a06;
  border-radius: 13px 13px 0 0;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail{width: auto;
  padding: 30px 0 45px 0;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail p.feature_text{width: 91.7%;
  margin: 0 auto;
  text-align: left;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap{width: 91.7%;
  margin: 0 auto;
  padding-top: 40px;
  display: -webkit-box;
  display: flex;
  justify-content: space-between;
  position: relative;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item{width: 45.6%;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img span{width: 100%;
  display: block;
  padding: 0 0 1px 0;
  font-size: 24px;
  color: #fff;
  text-align: center;
  line-height: calc(44 / 24);
  letter-spacing: 0.05em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img span.small{width: 100%;
  font-size: 21px;
  padding: 3px 0 3px 0;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item.before div.feature_case_img span{background-color: #333333;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item.after div.feature_case_img span{background-color: #35a500;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img figure{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img figure video{width: 100%;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item p.feature_case_text{width: auto;
  padding-top: 10px;
  font-size: 20px;
  text-align: center;
  line-height: calc(25 / 16);
  letter-spacing: 0.05em;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item p.feature_case_text.small{width: auto;
  font-size: 16px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap span.case_arrow{width: 3.9%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper p.feature_text{text-align: left;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper figure.img01{width: 46.9%;
  margin: 0 auto;
  padding-top: 40px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block{width: 90%;
  margin: 0 auto;
  padding-top: 30px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block:nth-of-type(n+2){padding-top: 60px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title{width: auto;
  padding: 0 15px;
  background-color: #4f7a2a;
  display: -webkit-box;
  display: flex;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title span{width: auto;
  display: inline-block;
  font-size: 16px;
  color: #fff;
  line-height: calc(19 / 16);
  letter-spacing: 0.075em;
  font-family: 'Shippori Mincho', serif;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title span em{width: auto;
  display: inline-block;
  font-size: 44px;
  color: #fff;
  line-height: calc(19 / 16);
  letter-spacing: 0.075em;
  font-family: 'Shippori Mincho', serif;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title p{width: auto;
  padding-left: 40px;
  font-size: 32px;
  color: #fff;
  letter-spacing: 0.05em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  position: relative;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title p::before{content: "";
  width: 1px;
  height: 58.4%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list{width: auto;
  padding-top: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item{width: auto;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_subtitle{width: auto;
  font-size: 28px;
  text-align: center;
  line-height: calc(48 / 30);
  letter-spacing: 0.05em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_subtitle span{width: auto;
  display: block;
  font-size: 20px;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.025em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_subtitle span.eiyo{width: auto;
  font-size: 19px;
  letter-spacing: 0.0em;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_subtitle span.eiyo small{width: auto;
  font-size: 15px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_img{width: auto;
  margin-top: 15px;
  position: relative;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_img span.icon{width: 30.9%;
  display: block;
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 1;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_detail{width: auto;
  padding-top: 30px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_detail dl{width: auto;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_detail dl dt.accord_btn{width: auto;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: calc(48 / 20);
  letter-spacing: 0.05em;
  background-color: #7d7d7d;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_detail dl dd{width: auto;
  padding-top: 20px;
  font-size: 18px;
  line-height: calc(30 / 18);
  letter-spacing: 0.05em;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper figure.nobel_img{width: 90%;
  margin: 0 auto;
  padding-top: 85px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_fl_wrap{width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  display: flex;
  justify-content: space-between;
  align-items: center;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_fl_wrap div.feature_fl_img{width: 46.1%;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_fl_wrap div.feature_fl_detail{width: 50.2%;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_fl_wrap div.feature_fl_detail p.feature_text{width: auto;
  text-align: left;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_about{width: 90%;
  margin: 0 auto;
  margin-top: 50px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_about dl{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_about dl dt.accord_btn{width: auto;
  padding: 1px 0;
  font-size: 26px;
  color: #fff;
  text-align: center;
  line-height: calc(48 / 26);
  letter-spacing: 0.05em;
  background-color: #7d7d7d;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_about dl dd.accord_body{width: auto;
  padding-top: 15px;
  font-size: 18px;
  line-height: calc(30 / 18);
  letter-spacing: 0.05em;}
}

/* ---- from css_sp.css ---- */
@media screen and (max-width: 768px) {
div#FEATURE{width: auto;}
div#FEATURE div.inner{width: auto;
  background-color: #f1f8e6;}
div#FEATURE div.inner div.feature_container{width: auto;
  padding: 0 0 30px 0;}
div#FEATURE div.inner div.feature_container div.feature_title{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper{width: 92%;
  margin: 0 auto;
  padding: 25px 0 40px 0;
  background-color: #fff;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper p.feature_text{width: 89.8%;
  margin: 0 auto;
  font-size: 14px;
  line-height: calc(52 / 29);
  letter-spacing: 0.05em;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper p.feature_text.f_txt02{padding-top: 25px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper figure.img01{width: 94.5%;
  margin: 0 auto;
  padding-top: 60px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper figure.img02{width: 92%;
  margin: 0 auto;
  padding-top: 25px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list{width: auto;
  padding-top: 30px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item{width: 91.4%;
  margin: 0 auto;
  border: 2px solid #2e8a06;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: #fff;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item:nth-child(n+2){margin-top: 30px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_title{width: auto;
  padding: 10px 0 13px 0;
  font-size: 22px;
  color: #fff;
  text-align: center;
  line-height: 1.0;
  letter-spacing: 0.05em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  background-color: #2e8a06;
  border-radius: 13px 13px 0 0;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail{width: auto;
  padding: 15px 0 30px 0;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail p.feature_text{width: 92.1%;
  margin: 0 auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap{width: 92.1%;
  margin: 0 auto;
  padding-top: 30px;
  position: relative;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item:first-child{padding-bottom: 10px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item:nth-child(n+2){margin-top: 15px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img span{width: 100%;
  display: block;
  padding: 4px 0 7px 0;
  font-size: 18px;
  color: #fff;
  text-align: center;
  line-height: calc(44 / 36);
  letter-spacing: 0.05em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item.before div.feature_case_img span{background-color: #333333;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item.after div.feature_case_img span{background-color: #35a500;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img figure{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img figure video{width: 100%;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item p.feature_case_text{width: 95.2%;
  margin: 0 auto;
  padding-top: 5px;
  font-size: 16px;
  text-align: left;
  line-height: calc(40 / 24);
  letter-spacing: 0.05em;
  text-align: center;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item p.feature_case_text.small{width: 95.2%;
  font-size: 12px;
  text-align: left;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap span.case_arrow{width: 21.9%;
  margin: 0 auto;
  display: block;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper p.feature_text{text-align: left;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper figure.img01{width: 89.8%;
  margin: 0 auto;
  padding: 25px 0 0 0;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block{width: 90%;
  margin: 0 auto;
  padding-top: 15px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block:nth-of-type(n+2){padding-top: 35px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title{width: auto;
  padding: 0 10px;
  background-color: #4f7a2a;
  display: -webkit-box;
  display: flex;
  align-items: center;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title span{width: auto;
  display: inline-block;
  font-size: 12px;
  color: #fff;
  line-height: calc(21 / 19);
  letter-spacing: 0.075em;
  font-family: 'Shippori Mincho', serif;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title span em{width: auto;
  display: inline-block;
  font-size: 27px;
  color: #fff;
  line-height: calc(21 / 19);
  letter-spacing: 0.075em;
  font-family: 'Shippori Mincho', serif;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title p{width: auto;
  padding-left: 20px;
  font-size: 24px;
  color: #fff;
  letter-spacing: 0.05em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  position: relative;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_title p::before{content: "";
  width: 1px;
  height: 58.4%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list{width: auto;
  padding-top: 13px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item{width: auto;
  padding: 0 0 30px 0;
  border-bottom: 1px solid #afafaf;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item:nth-child(n+2){margin-top: 30px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item:last-child{border-bottom: none;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_subtitle{width: auto;
  font-size: 21px;
  text-align: center;
  line-height: calc(48 / 30);
  letter-spacing: 0.05em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_subtitle span{width: auto;
  display: block;
  font-size: 16px;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.00em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_subtitle span.eiyo{width: auto;
  font-size: 15px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_subtitle span.eiyo small{width: auto;
  font-size: 13px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_img{width: auto;
  margin-top: 15px;
  position: relative;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_img span.icon{width: 30.9%;
  display: block;
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 1;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_detail{width: auto;
  padding-top: 30px;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_detail dl{width: auto;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_detail dl dt.accord_btn{width: auto;
  padding: 9px 0;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: calc(48 / 32);
  letter-spacing: 0.05em;
  background-color: #7d7d7d;}
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block div.feature_menu_list div.feature_menu_item div.feature_menu_detail dl dd{width: auto;
  padding-top: 15px;
  font-size: 14px;
  line-height: calc(52 / 29);
  letter-spacing: 0.05em;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper figure.nobel_img{width: 90%;
  margin: 0 auto;
  padding-top: 30px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_fl_wrap{width: 91.2%;
  margin: 0 auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_fl_wrap div.feature_fl_img{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_fl_wrap div.feature_fl_detail{width: auto;
  padding-top: 15px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_fl_wrap div.feature_fl_detail p.feature_text{width: auto;
  text-align: left;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_about{width: 91.2%;
  margin: 0 auto;
  margin-top: 30px;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_about dl{width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_about dl dt.accord_btn{width: auto;
  padding: 9px 0;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: calc(48 / 32);
  letter-spacing: 0.05em;
  background-color: #7d7d7d;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_about dl dd.accord_body{width: auto;
  padding-top: 20px;
  font-size: 14px;
  line-height: calc(52 / 29);
  letter-spacing: 0.05em;}
}

/* ---- from css_common_common.css ---- */
.f_red{font-weight: bold;
  color: #2e8a06;}

/* ---- from css_common_common_pc.css ---- */
@media screen and (min-width: 769px) {
.accord_btn{position: relative;
  cursor: pointer;}
.accord_btn::after{content: "";
  width: 15px;
  height: 15px;
  display: block;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  right: 30px;
  bottom: 42%;}
.accord_btn.active::after{-webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  position: absolute;
  right: 30px;
  bottom: 28%;}
}

/* ---- from css_common_common_sp.css ---- */
@media screen and (max-width: 768px) {
.accord_btn{position: relative;
  cursor: pointer;}
.accord_btn::after{content: "";
  width: 10px;
  height: 10px;
  display: block;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  right: 20px;
  bottom: 42%;}
.accord_btn.active::after{content: "";
  width: 10px;
  height: 10px;
  display: block;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(315deg);
  position: absolute;
  right: 20px;
  bottom: 28%;}
}

/* ------------------------------------------------------------
   仕上げ：既存CSSと詳細度が競合する箇所を明示的に上書きする
   （女性ページ側で 2026-08-11 に直したのと同じ内容）
   ------------------------------------------------------------ */
/* 見出し帯・キャプション帯を緑基調にそろえる */
#FEATURE .feature_point_title      { background-color: #2e8a06 !important; }
#FEATURE .feature_menu_title       { background-color: #4f7a2a !important; color: #fff !important; }
#FEATURE .feature_menu_title p,
#FEATURE .feature_menu_title span  { color: #fff !important; }
#FEATURE .feature_case_item.after .feature_case_img span { background-color: #35a500 !important; }

/* 帯ラベル（flag）は濃い地色×白文字に */
#FEATURE .t-egf__flag,
#FEATURE .t-care__flag,
#FEATURE .t-dark__flag,
#FEATURE .t-solve__flag { background-color: #2e8a06 !important; color: #fff !important; font-weight: 500 !important; }
#FEATURE .t-care__flags span { background-color: #2e8a06 !important; color: #fff !important; }

/* 淡い地の上の強調文字 */
#FEATURE .f_red { color: #2e8a06 !important; }
#FEATURE .t-egf__side b { color: #2f6a1a !important; }
#FEATURE .t-band__no small { color: #fff !important; }

/* 要因図：要因5つ → ▼ → 男性の薄毛 の2段組（女性ページと同じ） */
#FEATURE .t-qa__factors {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
}
#FEATURE .t-qa__factors > li.is-center { order: 2; }
#FEATURE .t-qa__factors::after {
  content: "▼";
  order: 1;
  flex: 0 0 100%;
  margin: 2px 0 0;
  color: #97a3b0;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}
#FEATURE .t-qa__factors > li {
  background-color: #5f6d7d !important;
  color: #fff !important;
  min-width: 7.5em;
  justify-content: center;
  text-align: center;
}
#FEATURE .t-qa__factors > li.is-center {
  background-color: #3d4956 !important;
  min-width: 9em;
}
@media screen and (max-width: 768px) {
  #FEATURE .t-qa__factors > li,
  #FEATURE .t-qa__factors > li.is-center { min-width: 0; }
}


/* ------------------------------------------------------------
   FEATURE の余白・レイアウト是正（2026-08-12）

   男性ページの旧CSS（assets-ym3/assets/css/pc.css・sp.css）に、
   同じクラス名の古い指定が残っていた。そちらが効いてしまい
     ・Menu の帯の上下に 70〜100px の余分な余白
     ・写真の下に余白（.feature_case_img が block 化）
     ・ブロックごとに白／ベージュの地色が出る
   といったズレが出ていたので、女性ページと同じ値に戻す。
   （数値は女性ページの実測値に合わせている）
   ------------------------------------------------------------ */

/* 余分な下余白と地色を消す */
#FEATURE .feature_point_list {
  padding-bottom: 0 !important;
  background-color: transparent !important;
}
#FEATURE .feature_point_detail { background-color: transparent !important; }
#FEATURE .feature_menu_block {
  padding-bottom: 0 !important;
  background-color: transparent !important;
}
#FEATURE .feature_menu_list {
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  background-color: transparent !important;
}

/* 写真2枚＋矢印の並びを女性ページと同じグリッドに戻す */
#FEATURE .feature_case_wrap { display: grid !important; }
#FEATURE .feature_case_item { display: grid !important; }
#FEATURE .feature_case_img  { display: contents !important; }

/* 見出し帯・開閉ボタンの高さをそろえる（旧CSSの flex 化を戻す） */
#FEATURE .feature_point_title { display: block !important; }
#FEATURE .feature_menu_detail dt,
#FEATURE .accord_btn { display: block !important; }


/* ------------------------------------------------------------
   FEATURE のレイアウト（女性ページの fixes.css 由来・2026-08-12 追加）
   写真2枚＋矢印の並びをグリッドで組む指定がこちらに入っていたため、
   移植時に取りこぼしていた。同じ内容を男性ページにも入れる。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap{display: grid;
    grid-template-columns: 45.6% 45.6%;
    grid-template-rows: auto auto auto;
    justify-content: space-between;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item{display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    width: auto;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img{display: contents;}
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper div.feature_point_list div.feature_point_item div.feature_point_detail div.feature_case_wrap div.feature_case_item div.feature_case_img span{display: flex;
    align-items: center;
    justify-content: center;}
}
@media screen and (max-width: 768px) {
div#FEATURE div.inner div#FEA02.feature_container div.feature_body div.feature_wrapper div.feature_menu_block.menu03 div.feature_menu_title p{letter-spacing: 0;
    
    font-size: min(22px, 5.3vw);}
}
@media screen and (max-width: 768px) {
div#FEATURE div.inner div.feature_container div.feature_body div.feature_wrapper{padding-bottom: 0;}
}
.t-dark__flag,
.t-solve__flag,
.t-egf__flag,
.t-care__flag{color: #fff !important;
  font-weight: 500 !important;}
.t-egf__flag{background-color: #87663a !important;}
.t-care__flag{background-color: #2e8a06 !important;}
.t-care__flags span{background-color: #2e8a06 !important;}
.feature_menu_title{background-color: #2e8a06 !important;}
.feature_case_item.after .feature_case_img span{background-color: #35a500 !important;}
.t-band{background-color: #55743a !important;}
.t-band__no small{color: #fff !important;}
.t-egf__side b{color: #46612c !important;}
.f_red{color: #2e8a06 !important;}
.t-qa__factors{flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 10px;}
.t-qa__factors > li.is-center{order: 2;}
.t-qa__factors::after{content: "▼";
  order: 1;
  flex: 0 0 100%;
  margin: 2px 0 0;
  color: #97a3b0;
  font-size: 13px;
  line-height: 1;
  text-align: center;}
.t-qa__factors > li{background-color: #5f6d7d !important;
  color: #fff !important;
  min-width: 7.5em;
  justify-content: center;
  text-align: center;}
.t-qa__factors > li.is-center{background-color: #3d4956 !important;
  min-width: 9em;}
@media screen and (max-width: 768px) {
.t-qa__factors > li,
  .t-qa__factors > li.is-center{min-width: 0;}
}

/* 縦長の写真でも枠の高さがそろうようにする（支給写真は縦横比がまちまち） */
#FEATURE .feature_case_item figure { margin: 0; }
#FEATURE .feature_case_item figure img,
#FEATURE .feature_case_item figure video {
  width: 100%;
  aspect-ratio: 880 / 620;
  object-fit: cover;
  display: block;
}


/* ------------------------------------------------------------
   メインビジュアル直下のキャッチ画像（2026-08-12 追加）
   PC・SPで画像を出し分ける（.visible_pc / .visible_sp はテーマ既存）
   ------------------------------------------------------------ */
.mv-catch { line-height: 0; }
.mv-catch img { width: 100%; height: auto; margin: 0; }


/* ------------------------------------------------------------
   追従CTA（PC・右下）とヘッダーの整理（2026-08-12）

   ヘッダーに要素が多かったので、メール予約・LINE予約を
   ヘッダーから外して画面右下の追従ボタンに移した（PCのみ）。
   スマホは従来どおりヘッダー内に置いたまま（下部固定バーがないため）。
   ------------------------------------------------------------ */

/* PC：ヘッダーの予約ボタンを隠す */
@media screen and (min-width: 769px) {
  #siteheader .reserve_btns { display: none !important; }
  /* 電話ブロックが右端に来るので、右の詰まりを整える */
  #siteheader .nav_box { justify-content: flex-end !important; gap: 0 !important; }
  #siteheader .tel_btn { margin-right: 0 !important; }
}

/* 追従CTA本体 */
.side-cta {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-cta__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 208px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.side-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
  filter: brightness(1.05);
  text-decoration: none;
  color: #fff;
}
.side-cta__ico {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-cta__ico svg { width: 100%; height: 100%; display: block; }
.side-cta__txt { display: flex; flex-direction: column; line-height: 1.15; }
.side-cta__note {
  font-size: 11px;
  letter-spacing: .02em;
  opacity: .92;
}
.side-cta__label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}
.side-cta__btn--mail { background-color: #b8431f; }
.side-cta__btn--line { background-color: #06c755; }
.side-cta--men .side-cta__btn--mail { background-color: #c25400; }

/* スマホでは出さない（ヘッダー内の予約ボタンをそのまま使う） */
@media screen and (max-width: 768px) {
  .side-cta { display: none; }
}


/* ------------------------------------------------------------
   ヘッダーのUI調整（2026-08-12）
   ・ボタンの角を丸くして押せることを分かりやすく
   ・グローバルナビは区切りを整え、今いるページと
     マウスが乗った項目が分かるようにする
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  /* 「男性はこちら」「詳しくはこちら」を丸ボタンに */
  header#siteheader .header_right a.blank_btn {
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  header#siteheader .header_right a.blank_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .2);
    filter: brightness(1.06);
  }

  /* ナビ：区切り線を薄く、余白を広げる */
  .gnav-wrap { border-top: 1px solid #e6ded0; }
  .gnav__list { align-items: stretch; }
  .gnav__item + .gnav__item { border-left: 1px solid #e0d7c4; }
  .gnav__link {
    position: relative;
    padding: 0 20px !important;
    display: flex;
    align-items: center;
    transition: color .2s ease, background-color .2s ease;
  }
  .gnav__item:hover > .gnav__link { background-color: rgba(0, 0, 0, .03); }
}

@media screen and (min-width: 769px) {
  .gnav__item:hover > .gnav__link { color: #2e8a06; }
}


/* ヘッダーのバランス調整・その2（2026-08-12）
   ・ナビが横に間延びしたので、項目そのものを広げて隙間を詰めた
   ・上段はロゴ＝左／ボタン＝中央／電話＝右の3分割にして、
     真ん中に空いていた余白をなくした */
@media screen and (min-width: 769px) {
  .gnav__link { padding: 0 20px !important; }
  .gnav__item { flex: 0 1 auto; }

  header#siteheader div.inner div.header_right {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    padding-right: 56px !important;
  }
  header#siteheader div.inner div.header_right h1 { margin-right: 0 !important; }
  /* ボタン2つはひと固まりにして、ロゴと電話の中間に置く */
  header#siteheader div.inner div.header_right a.blank_btn:first-of-type { margin-left: auto !important; }
  header#siteheader div.inner div.header_right a.blank_btn + a.blank_btn { margin-left: 12px !important; }
  header#siteheader div.inner div.nav_box { flex: 0 0 auto !important; }
}


/* ------------------------------------------------------------
   追従CTA・ヘッダーの仕上げ（2026-08-12）
   ------------------------------------------------------------ */

/* --- 追従CTA --- */
.side-cta {
  right: 22px;
  bottom: 26px;
  gap: 8px;
  animation: sideCtaIn .5s .35s ease both;
}
@keyframes sideCtaIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.side-cta__btn {
  position: relative;
  min-width: 232px;
  padding: 10px 44px 10px 10px;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 10px 24px rgba(0, 0, 0, .16);
  letter-spacing: .02em;
}
.side-cta__btn::before {                 /* うっすら内側のハイライト */
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.side-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .16), 0 16px 32px rgba(0, 0, 0, .22);
}
/* アイコンは白丸に載せて見やすく */
.side-cta__ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.side-cta__ico svg { width: 20px; height: 20px; }


.side-cta--men .side-cta__btn--mail .side-cta__ico { color: #ef7000; }
.side-cta--men .side-cta__btn--line .side-cta__ico { color: #35a500; }

.side-cta__note {
  font-size: 10.5px;
  letter-spacing: .06em;
  opacity: .9;
}
.side-cta__label { font-size: 16.5px; }

/* 右端の矢印。ホバーで少し進む */
.side-cta__arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 14px;
  margin-top: -7px;
  transition: transform .22s ease;
}
.side-cta__arrow svg { width: 100%; height: 100%; display: block; }
.side-cta__btn:hover .side-cta__arrow { transform: translateX(3px); }


/* --- ヘッダー --- */
@media screen and (min-width: 769px) {

  /* 下にうっすら影を落として、コンテンツとの境目をはっきりさせる */
  header#siteheader {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .045);
  }

  /* ロゴ：ホバーでほんの少し反応させる */
  header#siteheader div.inner div.header_right h1 a {
    display: inline-block;
    transition: opacity .2s ease;
  }
  header#siteheader div.inner div.header_right h1 a:hover { opacity: .72; }

  /* ボタンの矢印をホバーで進める */
  header#siteheader .header_right a.blank_btn::after { transition: transform .22s ease; }
  header#siteheader .header_right a.blank_btn:hover::after { transform: translateX(3px); }

  /* 電話ブロック：数字と営業時間の主従をはっきりさせる */
  header#siteheader .tel_btn .c-hbtn__note {
    letter-spacing: .01em;
    opacity: .82;
  }

  /* ナビ：区切りを細く上品に */
  .gnav__item + .gnav__item { border-left: 1px solid rgba(0, 0, 0, .09); }
  .gnav__link { font-weight: 500; }

  /* ドロップダウン：角を丸め、影を付けて浮かせる */
  .gnav__sub {
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    overflow: hidden;
    border: none !important;
  }
  .gnav__sub li a {
    transition: background-color .18s ease, padding-left .18s ease;
  }
  .gnav__sub li a:hover { padding-left: 22px; }
}


/* ------------------------------------------------------------
   追従CTA：メインビジュアルを過ぎてから出す（2026-08-12）
   読み込み直後は隠しておき、#KEY（下層は .page-kv）が
   画面から出たら .is-show が付いてふわっと現れる。
   ------------------------------------------------------------ */
.side-cta {
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .38s ease, transform .38s ease, visibility .38s;
}
.side-cta.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ヘッダー：ロゴとボタンが近づきすぎないよう最小の間隔を確保 */
@media screen and (min-width: 769px) {
  header#siteheader div.inner div.header_right h1 { margin-right: 80px !important; }
  header#siteheader div.inner div.header_right a.blank_btn + a.blank_btn { margin-left: 18px !important; }
}


/* 管理バー表示中のヘッダー位置は上のJSが実測で合わせる。
   JSが動かない場合の保険として、PC幅の初期値だけ残しておく。 */
@media screen and (max-width: 782px) {
  body.admin-bar header#siteheader { top: 46px; }
}


/* 店内の様子の動画（サロン情報ページ・2026-08-12 追加） */
.salon-tour { max-width: 320px; margin: 0 auto 34px; }
.salon-tour video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  background: #000;
}
.salon-tour__note {
  margin-top: 9px;
  font-size: 12.5px;
  text-align: center;
  color: #6b6b6b;
}

/* ---- 2026-08-21 Menu04（最後にめぐりを整える）は1項目のため、他ブロックと同じ列幅のまま中央に置く ---- */
@media screen and (min-width: 769px) {
  div#FEATURE div#FEA02 div.feature_menu_block.menu04 div.feature_menu_list {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  div#FEATURE div#FEA02 div.feature_menu_block.menu04 div.feature_menu_list div.feature_menu_item {
    width: calc((100% - 20px) / 2) !important;
  }
}

/* ------------------------------------------------------------
   Menu01「脊椎マッサージ」の注釈（※当店オリジナル） 2026-09-01
   注釈が入った側だけ画像が下がるので、反対側に同じ高さの空行を作って揃える。
   ------------------------------------------------------------ */
div#FEATURE div.feature_menu_block.menu01 div.feature_menu_list div.feature_menu_item p.menu_note {
  margin: 4px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  color: #4f7a2a !important;
}
@media screen and (min-width: 769px) {
  div#FEATURE div.feature_menu_block.menu01 div.feature_menu_list div.feature_menu_item:first-child div.feature_menu_subtitle::after {
    content: "\00a0";
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* ------------------------------------------------------------
   フッターの性別切替ボタン 2026-09-01
   SP（〜600px）で width:100% に padding/border が加算され、
   右へ23pxはみ出していた。border-box で内側に収める。
   ------------------------------------------------------------ */
.ftr__crossBtn { box-sizing: border-box !important; }