@charset "UTF-8";

/* ===== 言語切替（ヘッダーナビ内） ===== */
.lang_switch_in {
  display: inline-block;
  white-space: nowrap;
}
.lang_switch_in i {
  font-style: normal;
  opacity: 0.4;
  margin: 0 0.5em;
}
#gloval-nav .gnav ul li.lang_switch a,
#gloval-nav ul li.lang_switch a {
  display: inline;
  height: auto;
  margin: 0;
  overflow: visible;
  letter-spacing: 0.05em;
  border-bottom: 1px solid transparent;
}
#gloval-nav .gnav ul li.lang_switch a.is_current,
#gloval-nav ul li.lang_switch a.is_current {
  border-bottom-color: currentColor;
  opacity: 0.55;
  pointer-events: none;
}

/* ===== フッターの言語切替 ===== */
.f_lang {
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  margin: 1.6rem 0 0;
}
.f_lang a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.f_lang a.is_current {
  opacity: 0.55;
  border-bottom-color: currentColor;
  pointer-events: none;
}

/* ===== 日本語版でインラインstyleだった箇所をクラス化 ===== */
.f_info {
  text-align: center;
  font-size: 13px;
  line-height: 1.9;
  color: #8a7f6f;
  margin-top: 8px;
}
.prof_wrap {
  max-width: 720px;
  margin: 0 auto;
}
.prof_name {
  text-align: center;
  font-size: 20px;
  color: #8a7f6f;
  margin-bottom: 8px;
}
.price_note {
  text-align: center;
  line-height: 2;
}
.reserve_note {
  margin-top: 26px;
  font-size: 14px;
  color: #8a7f6f;
  line-height: 2;
}
.map_mt {
  margin-top: 20px;
}

/* ===== 多言語ページ共通：長い単語の折り返し ===== */
.i18n .osusume_list li,
.i18n .parts_list li,
.i18n .med_rec li,
.i18n .feature_list li,
.i18n .effect_list dd,
.i18n .faq_q,
.i18n .faq_a,
.i18n .tl_value {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ===== 英語版：日本語向けの字送りを解除して可読性を上げる ===== */
.i18n-en {
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}
.i18n-en .txt,
.i18n-en .effect_list dd,
.i18n-en .feature_txt dd p,
.i18n-en .med_desc,
.i18n-en .fc_text,
.i18n-en .after_txt,
.i18n-en .txt_block_lead,
.i18n-en .txt_block_note,
.i18n-en .faq_a,
.i18n-en .lead_txt,
.i18n-en .lead_sub,
.i18n-en .sub_txt,
.i18n-en .catch,
.i18n-en .diet_note,
.i18n-en .price_note {
  letter-spacing: 0.01em;
  text-align: left;
}
.i18n-en .big_ttl_long,
.i18n-en .feature_ttl,
.i18n-en .txt_block_ttl,
.i18n-en .osusume_ttl,
.i18n-en .faq_cat_ttl,
.i18n-en .med_name {
  letter-spacing: 0.02em;
}
/* ナビの余白は3言語で共通にする（以前ここで英語版だけ 1.4rem に詰めていたため、
   言語ごとにボタンの間隔が違って見えていた。中国語版＝日本語版の値に統一） */

/* PCナビ：言語切替を他のリンクと同じ高さに揃える */
@media screen and (min-width: 769px) {
  #gloval-nav .gnav ul li.lang_switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #gloval-nav .gnav ul li.lang_switch .lang_switch_in {
    font-size: 1.2rem;
  }
}

/* ===== 中国語版 ===== */
.i18n-china {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.i18n-china .big_ttl_long,
.i18n-china .feature_ttl,
.i18n-china .txt_block_ttl,
.i18n-china .osusume_ttl,
.i18n-china .faq_cat_ttl,
.i18n-china .catch_ttl,
.i18n-china .sub_catch {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Serif SC", serif;
}

/* ===== 診療詳細：説明文が長い言語でも枠からはみ出さないように ===== */
@media screen and (min-width: 769px) {
  .i18n .feature_box .feature_txt {
    max-width: 42rem;
    width: 42rem;
  }
}

/* ===== SP：ナビ内の言語切替 ===== */
@media screen and (max-width: 768px) {
  /* SPだけ言語切替を「ご予約」の下へ。DOMの並びは変えずCSSのorderで入れ替える（PCは従来どおり） */
  #gloval-nav .gnav > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #gloval-nav .gnav > ul > li.lang_switch {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-top: 1.4em;
    font-size: 1.4rem;
  }
  .f_lang {
    margin-top: 1.2rem;
  }
}

/* 日本語用の明朝体（游明朝）が英文・中文に当たっていた箇所を、各言語の本文フォントに戻す。
   ※対象は style.css 側で font-family の最終指定が游明朝になっているセレクタ */
.i18n .flow_list li .num,
.i18n .osusume_ttl,
.i18n .osusume_list li,
.i18n .txt_block_ttl,
.i18n .effect_list dt,
.i18n .parts_list li,
.i18n .timeline_list li,
.i18n .med_name,
.i18n .box_text .lead_sub,
.i18n .diet_price_cap,
.i18n .sub_txt,
.i18n .catch,
.i18n .fc_label,
.i18n .tl_label,
.i18n .med_catch,
.i18n .feature_list li {
  font-family: inherit;
}

/* TOPメニュー：英語は語が長いのでカード幅に収まるサイズへ */
.i18n-en .top_menulinks li .menu_ttl span {
  font-size: 3.6rem;
}
@media screen and (max-width: 768px) {
  .i18n-en .top_menulinks li .menu_ttl span {
    font-size: 4.6vw;
  }
}

/* ===== KakaoTalk 導線（ヘッダーアイコン／フッター／予約ページ）EN・CN 2026-09-22 ===== */
:root {
  --kakao-bg: #FEE500;
  --kakao-bg-hover: #F2D900;
  --kakao-ink: #191919;
}
.reserve_box .kakao_btn {
  display: inline-block; padding: 16px 44px;
  background: var(--kakao-bg); color: var(--kakao-ink);
  border-radius: 999px; font-size: 17px; letter-spacing: .05em;
  -webkit-transition: background-color .25s; transition: background-color .25s;
}
.reserve_box .kakao_btn:hover { background: var(--kakao-bg-hover); }
@media screen and (max-width: 768px) {
  .reserve_box .kakao_btn { padding: 14px 30px; font-size: 15px; }
}
@media screen and (min-width: 769px) {
  .f_nav ul li.kakao { width: 40%; text-align: center; margin: 1rem 0; }
  .f_nav ul li.kakao a::before {
    content: ""; display: inline-block; width: 1.6rem; height: 1.6rem;
    background: url(../images/icon_kakao.svg) no-repeat center; background-size: 100%;
    margin-right: 0.5rem; margin-bottom: -0.2rem;
  }
}