/* CSS Document */
.humb,.pc_none{
  display: none;
}
/* @media screen and (max-width: 768px){
* {
  outline: 1px solid red;
} */
/*

-------------------------------
共通
-------------------------------
*/
/* すべての要素のスクロールバーを非表示 */
@media screen and (max-width: 767px) {*::-webkit-scrollbar {
  width: 0;
  display: none;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.body{
  padding:0;
}
.wrapper{
  margin:0 auto 0;
  padding:40px 20px;
  box-sizing: border-box;
}
ul.nav{
  display: block;
}
ul.nav li{
  display: block;
  text-align: left;
}
.over_width,.inner_width,#wrap{
  width:100%!important;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.pc_none{
  display: block;
}
.sp_none{
  display: none !important;;
}
.index_section{
  margin-bottom:64px;
}
.lv-h2.section_title{
  font-family: var(--english-font);
  font-size:2rem;
}
.lv-h2.section_title span{
  font-size:1.4rem;
  display: block;
}
/*
-------------------------------
header
-------------------------------
*/
header{
  background-color: transparent;
}
body{
  font-size:1.5rem;
}
.sp_header{
  padding:10px 0 10px 16px;
  box-sizing: border-box;
}
a.header_logo{
  width:170px;
  height:32px;
  background-size: cover;
  position:relative;
  z-index:15;
}
.fix_btn{
  width:65%;
  margin:0 auto;
  position:fixed;
  top:0;
  left:10px;
  
  border-radius: 5px;
  display: none;
  z-index:900;
}
.fix_btn.active{
  display: block;
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
body:not(.home) header.sp_header a.header_logo{
  /* background: url(../img/common/logo_black.webp) center center no-repeat; */
  background-size: cover;
}
ul.nav li::before{
  position:absolute;
  content:"";
  width:1px;
  height:12px;
  top:50%;
  transform: translateY(-50%);
  left:0;
  background-color: var(--main-font-color);
}
/*
-------------------------------
footer
-------------------------------
*/
footer{
  padding:40px 16px;
}
.wrapper.footer_wrap{
  display: block;
  padding:0 16px;
}
.footer_wrap .footer_info a.footer_logo{
  width:100%;
}
.footer_nav{
  display: none;
}
.footer_info .info_links a{
  display: block;
  margin:0 auto 12px;
}
/* ----------------------------------
kv
---------------------------------- */
.kv_slider{
  height:100vh;
}
  .kv_info{
  margin-top:48px;
  margin-bottom:48px;
  padding:0 5%;
  box-sizing: border-box;
}
ul.kv_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin:0 auto;
  width:95%;
}
ul.kv_list li{
  width:calc((100% - 10px) / 2);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:24px;
  height:48px;
  border:1px solid #36322F;
}
ul.kv_list li a{
  font-family: var(--f-f-mincho);
  color:var(--main-font-color);
  font-size:clamp(0.8rem,1rem,1.2rem);
}

/* ----------------------------------
news_wrapper
---------------------------------- */
.news_wrapper{
  display: block;
}
.news_content{
  padding:0 5%;
  display: block;
}
.news_content .news_head{
  margin:40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news_head a{
  padding-right:20px;
}
.news_head a::after{
  right:0;
}
.news-title::after{
  right:0;
}
.news-item::after{
  width:100%;
}
.news_content::before,
.news_content::after{
  width:90%;
  left:5%;
  bottom:-60px;
}
.news_content::after{
  bottom:-66px;
}
.symptoms{
  padding-top:100px;
}
.symptoms ul{
  padding:0 5%;
  gap:8px;
}
.symptoms ul li{
  font-size:1.4rem;
  width:calc((100% - 8px) / 2);
  display: flex;
  align-items: center;
  margin-bottom:1.5em;
}
img.symptoms_arrow_line{
  width:90%;
  margin:0 auto;
  display: block;
}
/* ----------------------------------
answer
---------------------------------- */
.answer .lv-h2.section_title::before{
  font-size:4rem;
  letter-spacing:5px;
  left:50%;
  transform: translateX(-50%);
  z-index: -1;
}
.answer.index_section{
  padding:0 5%;
}
.answer_title{
  font-size:1.8rem;
}
.answer p{
  font-size:1.4rem;
  line-height: 2;
  letter-spacing: 2px;
}
.answer ul{
  display: block;
}
.answer ul li{
  margin-bottom:32px;
}
.answer ul li p{
  line-height: 1.5;
}
.answer ul li img{
  width:100%;
}
/* ----------------------------------
clinic_info
---------------------------------- */
.clinic_info.index_section{
  padding-bottom:64px;
}
.clinic_info .lv-h2.section_title::before{
  font-size:4rem;
}
.wrapper.clinic_info_wrap{
  display: block;
  width:90%;
  padding:16px;
}
.info_links{
  display: block;
}
.info_detail, .info_map{
  width:100%;
}
.info_detail table tr th, .info_detail table tr td{
  padding:18px 8px;
}
.info_map{
  margin-top:24px;
}
.info_map iframe{
  height:initial;
  aspect-ratio: 16 / 9;
}
.clinic_info::after {
  top:30px;
  height:100%;
}
.clinic_image{
  width:100%;
}
.clinic_image img{
  width:100%;
}
.clinic_image .lv-h2{
  font-size:2.8rem;
  right:12px;
}
/* ----------------------------------
about
---------------------------------- */
.about{
  margin-top:64px;
  padding-bottom:0;
  margin-bottom:0;
}
.about .lv-h2.section_title::before{
  font-size:4rem;
}
.about_index_section{
  margin-bottom:0;
}
.about::before, .about::after{
  display: none;
}
.about .section_title{
  font-size:3.2rem;
}
.about_text{
  width:90%;
  margin:1em auto;
  font-size:1.4rem;
  line-height: 1.8;
}
.wrapper.about_wrapper{
  width:90%;
  margin:24px auto;
  padding:40px 16px;
}
img.cross_icon{
  display: none;
}
.mean_head{
  padding:16px;
}
.mean_detail{
  display: block;
}
.mean_detail div{
  margin-bottom:8px;
}
.thought ul li{
  margin-bottom:16px;
}
.thought_detail{
  padding:16px;
}
.thought ul li:not(:first-child) .thought_detail::before,
.thought ul li:not(:first-child) .thought_detail::after{
  display: none;
}
/* ----------------------------------
thought
---------------------------------- */
.wrapper.thought{
  margin-top:64px;
}
.thought ul{
  display: block;
}
.thought ul li img{
  width:100%;
}
/* ----------------------------------
reason
---------------------------------- */
.reason{
  background: url(../img/index/reason_bg_sp.webp) top 180px center no-repeat;
  background-size: cover;
  padding-bottom:64px;
}
.wrapper.reason_head{
  display: block;
}
.wrapper.reason_head{
  display: block;
  
  margin-right: 0;
}
.icon_logo{
  width:74px;
  margin-left:-10px;
}
.wrapper.reason_head .lv-h2.section_title{
  font-size:3.8rem;
  text-align: center;
}
.wrapper.reason_head article img{
  width:100%;
}
.reazon_content{
  margin-top:0;
}
.reason_inner{
  display: block;
}
.reason_inner img{
  width:100%;
}
.reason_detail{
  width:100%;
}
/* ----------------------------------
medicine
---------------------------------- */
.medicine .lv-h2.section_title{
  text-align: center;
  font-size:3.8rem;
}
#trouble .lv-h2.section_title::before{
  font-size:4.8rem;
  line-height: 1.2;
  bottom:0;
  left:50%;
  text-align: center;
  transform: translateX(-50%);
  z-index: -1;
}
.others .lv-h2.section_title::before{
  font-size:4.8rem;
  bottom:0;
  left:50%;
  text-align: center;
  transform: translateX(-50%);
  z-index: -1;
}
.medicine_wrap{
  display: block;
}
.medicine_wrap .medicime_image{
  width:100%;
}
.medicine_nav{
  padding:0 5%;
  width:100%;
}
.medicine_nav ul{
  gap:16px;
}
.medicine_nav ul li{
  width:calc((100% - 16px) / 2);
}
/* ----------------------------------
menu
---------------------------------- */
section.clinic_menu{
  padding-top:64px;
  padding-bottom:64px;
}
.clinic_menu .section_title,
.medicine.others .lv-h2.section_title{
  font-size:3.8rem;
  text-align: center;
}
.clinic_menu ul.wrapper{
  display: block;
}
.clinic_menu ul.wrapper li,
.clinic_menu ul.wrapper li img.menu_list_image{
  width:100%;
}
.clinic_menu ul.wrapper li{
  margin-bottom:24px;
}
.clinic_menu ul.wrapper li article{
  height:auto;
  padding:16px 
}
/* ----------------------------------
focus
---------------------------------- */
section.clinic_menu.focus{
  margin-top:128px;
  margin-bottom:64px;
}
section.clinic_menu.focus ul.wrapper{
  margin-top:24px;
}
section.clinic_menu.focus::before{
  top:24px;
  width:90vw;
  height:100%;
}
.focus_title{
  font-size:6.4rem;
  top:-50px;
  z-index: -1;
}
.care_image{
  width:100%;
}
/* ----------------------------------
greeting
---------------------------------- */
.greeting_wrap{
  display: block;
}
.greeting_wrap img{
  width:100%;
}
.greeting_detail{
  padding:36px 5%;
  width:100%;
}
.greeting_detail .lv-h2.section_title{
  font-size:3.8rem;
  text-align: center;
}
.greeting_message{
  margin-top:32px;

}
.greeting_message{
  font-size:1.4rem;
}
.greeting_detail a.medicine_btn{
  width:100%;
}
.price_wrap a.medicine_btn{
  width:100%;
}
/* ----------------------------------
price
---------------------------------- */
.price_wrap{
  width:90%;
  padding:6px 24px 40px;
  top:0;
}
.price_wrap .lv-h2.section_title{
  font-size:3.8rem;
}
/* ----------------------------------
facility
---------------------------------- */
.facility .lv-h2.section_title{
  font-size:3.8rem;
}
.facility .lv-h2.section_title::before{
  font-size:4rem;
}
.facility article{
  margin:48px auto 0;
  width:95%;
  display: block;
  overflow: scroll;
}
.facility article img{
  width:250%;
}
/* ----------------------------------
blog
---------------------------------- */
.index_section.blog{
  padding:0 5%;
}
.blog_content{
  gap:16px;
  flex-wrap: wrap;
}
.blog_content .news-item{
  width:calc((100% - 16px) / 2);
}
p.thumbnail{
  width:100%;
  aspect-ratio: 16 / 9;
}
p.thumbnail img{
  width:100%;
  height:auto;
}
.blog_content .news-title a {
  padding-right:2em;
}
/* ----------------------------------
faq
---------------------------------- */
.index_section.faq{
  padding:0 5%;
}
.index_section.faq .lv-h2.section_title{
  font-size:3.8rem;
}
.faq .lv-h2.section_title::before{
  font-size:4.8rem;
}
.faq_wrapper dl{
  padding:16px;
  font-size:14px;
}
.faq_wrapper dl dt::before, .faq_wrapper dl dd::before{
  width:32px;
  height:32px;
  line-height: 32px;
  top:0;
}
.faq_wrapper dl dt, .faq_wrapper dl dd{
  padding-left:40px;

}
/* ----------------------------------
ぱんくず
---------------------------------- */
.breadcrumbs{
  display: flex;
  align-items: center;
  padding:8px 20px;
  font-size:1rem;
}
.arrow{
  display: block;
  width:4px;
  height:4px;
  border-right:1px solid #3e3e3e;
  border-bottom:1px solid #3e3e3e;
  margin:1px 10px 0 7px;
  transform: rotate(-45deg);
}

/* ----------------------------------
recruit-page
---------------------------------- */
.recruit_mv{
  margin-top:60px;
}
.recruit_mv .lv-h2{
  font-family: var(--f-f-mincho);
  font-size:4rem;
  margin-bottom:1.6rem;
  padding-left:8px;
}
.recruit_mv figure{
  margin:0;
}
.recruit_mv figure img{
  width:100%;
}
.message{
  position:relative;
}
.message_head{
  display: block;
  justify-content: space-between;
}
.message_head img{
  width:100%;
}
p.message_text{
  writing-mode: inherit;
  font-family: var(--f-f-mincho);
  color:var(--main-color);
  font-size:3.6rem;
  text-align: center;
  line-height: 1.5;
  margin-top:1em;
}
.message_detail{
  font-size:1.6rem;
  margin-top:3rem;
  padding:2rem;
}
.message::after{
  content:"";
  position:absolute;
  top:-50%;
  transform: translateY(50%);
  left:-100%;
  width:200%;
  height:100%;/* 参照元に存在しない画像のため削除: recruit_bg.jpg */
  background-size: contain;
  z-index: -1;
}
.condition table{
  width:100%;
  margin:60px auto;
  font-size:2rem;
}
.condition table tr th,
.condition table tr td{
  padding:16px;
  box-sizing: border-box;
}
.condition table tr th{
  font-weight:bold;
  width:30%;
}
.condition table tr:nth-child(odd){
  background-color: #e8e8e8;
}
.condition table tr:nth-child(even){
  background-color: #f7f7f7;
}

/* ARCHIVE */
.archive_news{
  margin-top:100px;
  width:100%;
  max-width: 1280px;
  padding:0 5%;
}
.news_head ul{
  display: flex;
  justify-content: flex-end;
}
.news_head ul li{
  padding-left:2em;
  font-size:1.2rem;
  font-family: var(--english-font);
}
.cp_list{
  margin-top:40px;
}

.cp_link p{
  display: block;

}
.cp_link p img{
  width:50%;
}
.taxonomy_date,.taxonomy_title{
  display: block;
}
.taxonomy_date{
  text-align: left;
  width:50%;
}

.cp_link p::after{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right:20px;
  top:63px;
  border-top: solid 1px;
  border-right: solid 1px;
  transform: rotate(45deg);
  color: inherit;
}
.post_content{
  width: 100%;
  padding:0 5%;
  box-sizing: border-box;
}
.post_content figure,
.post_content figure img{
  width:100%;
}
/* ----------------------------------
post_content
---------------------------------- */
.post_info{
  padding-right:1rem;
  font-size:1.2rem;
}
/* ----------------------------------
template
---------------------------------- */
.temp_mv{
  background: url(../img/sp/temp_title_bg.webp) center center no-repeat;
  background-size: cover;
  padding:54px 16px;
}
.temp_index ul.index_list li a{
  color:#605C5A;
  font-size:1.4rem;
}
.index_inner{
  font-size:1.4rem;
}
.index_inner li{
  position:relative;
}
.index_inner li::before{
  content:"";
  position:absolute;
  width:5px;
  height:10px;
  border-left:1px solid #303030;
  border-bottom:1px solid #303030;
  bottom:45%;
  left:-1em;
}
.temp_mv .lv-h2{
  width:100%;
  font-size:1.4rem;
  padding-top:32px;
  padding-bottom:32px;
}
.temp_mv .lv-h2 span{
  font-size:3.2rem;
}
.temp_head{
  margin:64px auto;
  padding:0 16px;
}
.temp_head p{
  font-size:1.8rem;
  line-height: 2;
}
.temp_index{
  width:calc(100% - 32px);
  margin:0 auto;
  padding:24px 16px;
}
.temp_sec{
  padding:0 16px;
}
.temp_sec img{
  margin-top:32px;
  width: 100%;
  max-width:100%;
  height: auto;
  display: block;
}
.velskar_image_flex{
  display: flex;
  flex-direction: column;
  gap:16px;
}
.temp_sec .velskar_image_flex img{
  width:100%;
}
.temp_sec .velskar_image_flex br{
  display: none;
}
.temp_sec .lv-h3{
  font-size:2rem;
  padding:8px;
}
.temp_sec .lv-h4{
  font-size:2.2rem;
}
.temp_sec .lv-h5{
  font-size:2rem;
}
.sec_inner p{
  font-size:1.8rem;
  line-height: 2;
}
.sec_link ul{
  display: block;
}
.sec_link ul li{
  width:100%;
  margin-bottom:16px;
}
.sec_inner table tbody tr th{
  width:30%;
  padding:16px 8px;
}
.sec_inner table tbody tr th,
.sec_inner table tbody tr td{
  font-size:14px;
}
.temp_card_content{
  padding:16px;
  margin-top:32px;
}
.temp_card_content ul{
  flex-direction: column;
  gap: 8px;
}
.temp_card_content ul li{
  width:100%;
}
.sec_inner dl{
  padding:24px 16px;
}
.sec_inner dl dt, .sec_inner dl dd{
  padding-left:40px;
  font-size:1.6rem;
}
.sec_inner dl dt::before, .sec_inner dl dd::before {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  text-align: center;
}
.sec_inner table.price_table thead tr th{
  width:50%;
}
/* ----------------------------------
contact
---------------------------------- */
.contact{
  padding:24px 5%;
}
.temp_wrap .mw_wp_form .lv-h3{
  font-size:1.7rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.mw_wp_form span.repuired{
  font-size:1rem;
}
.contact form input[name="name"],
.contact form input[name="rubi"],
.contact form input[name="address"],
.contact form input[type="email"],
.contact form textarea,
.contact form select{
  width:100%;
  padding:8px;
  font-size:1.6;
  border:1px solid rgba(0,0,0,0.1);
  background-color: rgb(255, 255, 255);
  border-radius:7px;
}
.contact form input[name^="tel"]{
  width:80px!important;
}
.agree_check{
  margin-bottom:16px;
}
/* ----------------------------------
投稿記事
---------------------------------- */
  main.main_single{
    padding:0 10px;
  }
  .post_title{
    margin:40px auto 0;
  }
  .post_title .lv-h2{
    font-size:16px;
    margin-top:30px;
    font-weight:bold;
  }
  .post_flex{
    display: block;
  }
  .post_flex_content{
    width:100%;
  }
  .post_sidebar{
    width:84%;
    margin:50px auto;
  }
  .single_content{
    margin-top:40px;
    padding-right:0;
  }
  .single_content img{
    width:100%;
  }
  .single_content p{
    margin-top:30px;
    padding:0 8%;
    font-size:12px;
  }
}
/* JSが動く前／動かなかったときでもキービジュアルが見えるようにする（CLAUDE.md §8-11）
   kv.js が html に .js-kv を付けたらこのルールは効かなくなる */
html:not(.js-kv) .kv_slider img:first-child{opacity:1}


/* ==================================================================
   修正指示書 タブ3
   ================================================================== */

/* 🔴「画面が白すぎる →眩しいので」
   純白(#fff)をやめて、ブランドの生成り(#FFFAEF)に寄せた極薄のアイボリーにする。
   文字色は変えていないのでコントラストは保たれる。濃さは --page-bg の1か所で調整できる。 */
:root{ --page-bg:#FCF9F4; --page-bg-soft:#FAF6EF; }
html{ background-color:var(--page-bg) }
body{ background-color:var(--page-bg) }
.temp_wrap{ background-color:var(--page-bg) }
.wrapper.clinic_info_wrap{ background-color:var(--page-bg-soft) }
.clinic_menu ul.wrapper li{ background-color:#fffdfa }
.mean_head,.mean_detail div{ background-color:#fffdfa }
.temp_card_content ul li{ background-color:#fffdfa }
.faq_wrapper dl span{ background-color:#fffdfa }

/* 🔴「WEB予約ボタンをヘッダー/ハンバーガーメニューに設置」 PCヘッダーのボタン
   ボタンを足すとヘッダーの横幅が足りなくなり、ナビと電話番号が2行に折り返す。
   ナビの余白と電話番号のサイズを詰めて**1行に収める**（実測で確認済み）。 */
a.header_reserve{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:8px 14px; margin-left:12px; flex:0 0 auto;
  background-color:#ed8599; color:#fff;
  font-family:var(--f-f-mincho); font-size:1.4rem; line-height:1.2;
  letter-spacing:1px; border-radius:4px; text-align:center; white-space:nowrap;
  transition:opacity .3s ease;
}
a.header_reserve span{ display:block; font-size:.9rem; letter-spacing:0; margin-top:3px }
a.header_reserve:hover{ opacity:.8 }

@media screen and (min-width:768px){
  .header_inner{ align-items:center; width:calc(100% - 264px); justify-content:flex-end; gap:0 }
  ul.nav{ flex:1 1 auto; justify-content:flex-end }
  ul.nav li{ padding:0 10px }
  ul.nav li a{ white-space:nowrap; font-size:1.3rem; letter-spacing:1px }
  a.header_tel{
    flex:0 0 auto; white-space:nowrap; font-size:2.1rem; padding-left:26px; margin-left:10px;
  }
  a.header_tel span{ white-space:nowrap; font-size:1.1rem }
  a.header_logo{ flex:0 0 auto }
}
/* 1290px以下は tablet.css が別レイアウトを当てるので、そこでは折り返しを許す */
@media screen and (max-width:1289px) and (min-width:768px){
  ul.nav li{ padding:0 7px }
  ul.nav li a{ font-size:1.2rem; letter-spacing:0 }
  a.header_tel{ font-size:1.8rem }
  a.header_reserve{ padding:7px 10px; font-size:1.2rem }
}

/* 🔴「SP版下部にこのようなCTAボタンを表示し、常時追従」
   position:fixed だが left/right を 0 にして幅100%にしてある（右にはみ出すと
   横スクロールが出るため。CLAUDE.md §8-9） */
/* ★注意：`display:flex` を無条件に書くと `.pc_none{display:none}` を上書きして
   PCでも出てしまう（実際に踏んだ）。既定は非表示にし、SPのみ表示する。 */
.sp_fix_cta{
  position:fixed; left:0; right:0; bottom:0; z-index:998;
  display:none; width:100%;
  box-shadow:0 -2px 8px rgba(0,0,0,.12);
}
@media screen and (max-width:767px){
  .sp_fix_cta{ display:flex }
}
.sp_fix_cta .sp_cta_item{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 4px; color:#fff; text-align:center;
  font-family:var(--f-f-mincho); line-height:1.2;
}
.sp_fix_cta .cta_main{ display:block; font-size:1.6rem; letter-spacing:1px }
.sp_fix_cta .cta_sub{ display:block; font-size:1rem; margin-top:3px; opacity:.9 }
.sp_fix_cta .cta_tel{ background-color:#30486A }
.sp_fix_cta .cta_web{ background-color:#ed8599 }
.sp_fix_cta .cta_line{ background-color:#06C755 }
/* 追従CTAの高さぶんだけ下に余白を作って、フッターが隠れないようにする */
@media screen and (max-width:767px){
  body{ padding-bottom:64px }
  #fix_scroll{ bottom:72px }
}

/* 🔴「自費：保険をバナーをTOPに設置」 支給画像2枚を横並び（2026-07-31 支給） */
.menu_banner{ margin-top:64px; margin-bottom:64px }
.menu_banner_wrap{
  display:flex; gap:24px; justify-content:center; align-items:flex-start;
  padding:0 5%; max-width:1200px; margin:0 auto;
}
.menu_banner_card{ flex:1 1 0; min-width:0; max-width:460px; display:block; transition:opacity .3s ease }
.menu_banner_card:hover{ opacity:.85 }
.menu_banner_card img{ width:100%; height:auto; display:block }
@media screen and (max-width:767px){
  /* ★2026-08-04 修正#3：SPの切り抜きをやめた。
     以前は高さを抑えるため aspect-ratio:7/5 + object-fit:cover で横長に切り抜いていたが、
     支給バナーは外周の枠線・葉の装飾まで含めて1枚の完成デザインなので、切り抜くと
     枠が途中で切れて不自然に見える（＝「SP版でサイズが変」）。
     正方形のまま等倍で表示し、歪み・切れをゼロにする。 */
  .menu_banner{ margin-top:32px; margin-bottom:32px }
  .menu_banner_wrap{ flex-direction:column; gap:16px; padding:0 4% }
  .menu_banner_card{ max-width:none }
  /* aspect-ratio / object-fit は指定しない＝画像本来の比率（1:1）でそのまま描画される */
  .menu_banner_card img{ width:100%; height:auto }
}

/* 「お悩みに応じた診療メニュー」 保険＝ピンク／自費＝水色で色分け
   （クライアント作成の「サイトイメージ」に準拠。**元からある .kv_list に色を付ける**） */
.kv_menu_head{ padding:40px 5% 0; text-align:center }
.kv_menu_title{ font-family:var(--english-font); font-size:3.2rem; line-height:1.3 }
.kv_menu_title span{ display:block; font-family:var(--f-f-mincho); font-size:1.6rem; letter-spacing:2px }
.kv_menu_lead{ margin-top:8px; font-size:1.5rem; letter-spacing:1px }
/* 枠線と角丸は <li> 側に付いている。色分けも <li> に当てる。
   区分ラベルを1行足した分、元の `height:48px/64px` では文字がはみ出すので
   min-height に変えて内容に合わせて伸びるようにする（実測で確認済み）。 */
ul.kv_list li{
  height:auto; min-height:64px; padding:8px 12px; box-sizing:border-box;
}
ul.kv_list li a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; line-height:1.35;
}
.kv_list li a .kv_tag{
  display:block; font-size:1rem; letter-spacing:0; margin-top:4px; opacity:.85;
}
ul.kv_list li.is_hoken{ border-color:#ed8599 }
ul.kv_list li.is_jihi{ border-color:#8fc9e3 }
ul.kv_list li.is_unset{ border-color:#c9c4bd }
ul.kv_list li.is_part{ border-style:dashed }
ul.kv_list li.is_hoken:hover{ background-color:#ed8599 }
ul.kv_list li.is_jihi:hover{ background-color:#8fc9e3 }
ul.kv_list li.is_unset:hover{ background-color:#c9c4bd }
ul.kv_list li.is_hoken:hover a,ul.kv_list li.is_jihi:hover a,ul.kv_list li.is_unset:hover a{ color:#fff }
/* 拡大アニメーションは文字がはみ出す原因になるので、色の変化だけにする
   （サイトイメージの「選択したときに色が変わる様に」に合わせる） */
ul.kv_list li:hover{ transform:none }
.kv_menu_link{ margin-top:20px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
.kv_menu_link a{
  display:inline-block; padding:10px 28px; border:1px solid #91725f;
  color:var(--main-font-color); font-size:1.4rem; letter-spacing:1px;
}
.kv_menu_link a:hover{ background-color:#91725f; color:#fff; opacity:1 }
@media screen and (max-width:767px){
  .kv_menu_head{ padding:24px 5% 0 }
  .kv_menu_title{ font-size:2.4rem }
  .kv_menu_title span{ font-size:1.3rem }
  .kv_menu_lead{ font-size:1.25rem }
  ul.kv_list li{ min-height:52px; padding:7px 6px }
  .kv_list li a .kv_tag{ font-size:.95rem; margin-top:2px }
  .kv_menu_link{ gap:10px }
  .kv_menu_link a{ padding:9px 18px; font-size:1.25rem }
}

.cm_legend{
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:center;
  margin:24px 0 32px; font-size:1.3rem;
}
.cm_legend li{ display:flex; align-items:center; gap:8px }
.cm_dot{ display:inline-block; width:14px; height:14px; border-radius:50% }
.cm_dot.is_hoken{ background-color:#ed8599 }
.cm_dot.is_jihi{ background-color:#8fc9e3 }
.cm_dot.is_unset{ background-color:#c9c4bd }
.cm_group{ margin-bottom:28px }
.cm_group_title,.cm_group .lv-h4{
  font-size:1.6rem; letter-spacing:2px; margin-bottom:12px; padding-left:12px;
  border-left:3px solid #91725f;
}
.cm_list{ display:flex; flex-wrap:wrap; gap:12px }
.cm_item{ flex:0 1 calc((100% - 48px) / 5); min-width:190px }
.cm_item a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; height:100%; padding:14px 12px; border-radius:999px;
  border:1px solid #d9d9d9; background-color:#fff;
  color:var(--main-font-color); text-align:center; line-height:1.4;
  transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.cm_item .cm_name{ font-size:1.4rem; letter-spacing:1px }
.cm_item .cm_tag{ font-size:1rem; letter-spacing:0; opacity:.85 }
.cm_item.is_hoken a{ border-color:#ed8599 }
.cm_item.is_jihi a{ border-color:#8fc9e3 }
.cm_item.is_unset a{ border-color:#c9c4bd }
.cm_item.is_hoken a:hover,.cm_item.is_hoken a:focus{ background-color:#ed8599; color:#fff }
.cm_item.is_jihi a:hover,.cm_item.is_jihi a:focus{ background-color:#8fc9e3; color:#fff }
.cm_item.is_unset a:hover,.cm_item.is_unset a:focus{ background-color:#c9c4bd; color:#fff }
.cm_item.is_part a{ border-style:dashed }
.cm_note{ margin-top:8px; font-size:1.2rem; line-height:1.9 }
@media screen and (max-width:1080px){
  .cm_item{ flex:0 1 calc((100% - 36px) / 4) }
}
@media screen and (max-width:767px){
  .care_menu{ padding:40px 0; margin-top:40px; margin-bottom:48px }
  .cm_list{ gap:8px }
  .cm_item{ flex:0 1 calc((100% - 8px) / 2); min-width:0 }
  .cm_item a{ padding:12px 8px; border-radius:12px }
  .cm_item .cm_name{ font-size:1.25rem }
  .cm_item .cm_tag{ font-size:.95rem }
}

/* パーソナルトレーニング料金表（2026-07-31 支給） */
.pt_price{ margin-top:8px }
.pt_table{ width:100%; margin-bottom:32px; table-layout:fixed }
.pt_table th,.pt_table td{ padding:14px 10px; border-bottom:1px solid #e4e4e4; font-size:1.4rem }
.pt_table thead th{ background-color:#f6f0e0; font-weight:bold; text-align:center; white-space:nowrap }
.pt_table tbody th{ text-align:center; font-weight:bold }
.pt_table tbody td{ text-align:center; white-space:nowrap }
/* 見出し（1回あたり 等）が折り返さないよう列幅を決め打ちする */
.pt_table th:nth-child(1){ width:31% }
.pt_table th:nth-child(2){ width:25% }
.pt_table th:nth-child(3){ width:24% }
.pt_table th:nth-child(4){ width:20% }
@media screen and (max-width:767px){
  .pt_table th,.pt_table td{ padding:10px 4px; font-size:1.1rem }
  .pt_table tbody th{ font-size:1.2rem }
  .pt_table thead th{ font-size:1.05rem }
}

/* 🔴 料金表：自費料金の列を消して1列になった。項目名の中央寄せは元のまま維持する */
.price_note{ margin-top:16px; font-size:1.4rem; line-height:1.9 }
.price_note a{ color:var(--navy); text-decoration:underline }


/* ==================================================================
   修正#3（2026-08-04）
   ================================================================== */

/* ------------------------------------------------------------------
   ②「フッターの背景色を変更して。文言も視認性よくなるように
      デザインをブラッシュアップしてほしい」

   【経緯】
     2026-08-04：ゴールド（#6B542C 軸）に変更 → 公開
     2026-08-05：**「やっぱりピンクに戻して。茶色っぽいから」** とのご指示でピンクへ差し戻し。
       ブランドの gold #6B542C は暗いブロンズ寄りで、実際に茶色に見える指摘は妥当。
     → **配色だけピンク系に戻し、ブラッシュアップした構造（パネル・区切り線・
        罫線・ホバー・フォーカス）はそのまま活かす。**

   【今の配色】
   ・背景：元の淡いピンク #ffe4e1 を軸にした、ごく浅い縦グラデーション。
     濃さは --footer-bg-top / -mid / -btm の3変数だけで調整できる。
   ・地が明るいので**文字は濃色に戻す**（ゴールド時代の明色反転は不要）。
       本文 #36322F … 10.54:1（下端 #FBD8D4 でも 9.60:1）
   ・ロゴのクリームプレートは**外した**。淡いピンクの上なら多色ロゴの黒文字が
     そのまま読める（10.5:1）ので、元の素の見た目に戻る。
   ・装飾は修正#4で定めたCTAのローズ #9E4E62 系に揃える。
     元の #df9ab1 だと淡いピンク地で 1.86:1 しかなく、線が見えないため。
   ・※このコメント内にコメントの閉じ記号を書くと、そこでコメントが終わり
     直後の :root ブロックごとCSSパーサに食われる。実際に踏んだので記号は文字で書く。
   ------------------------------------------------------------------ */
:root{
  --footer-bg-top:#FFF0EE;    /* 上端（本文のクリームから自然につながる） */
  --footer-bg-mid:#FFE4E1;    /* = 元のフッター地色 */
  --footer-bg-btm:#FBD8D4;    /* 下端をわずかに沈ませて奥行きを出す */
  --footer-text:#36322F;      /* = var(--main-font-color) */
  --footer-text-quiet:#605C5A;/* コピーライトなどの控えめな文字（5.49:1） */
  --footer-line:#9E4E62;      /* 装飾のローズ（= --cta と同じ） */
  --footer-plate:#FFFFFF;     /* ボタンの白地 */
}
footer#footer{
  position:relative;
  background:linear-gradient(180deg,
    var(--footer-bg-top) 0%, var(--footer-bg-mid) 45%, var(--footer-bg-btm) 100%);
  color:var(--footer-text);
}
/* 上端にローズの細いラインを1本。本文との境目をはっきりさせる。
   ※ transform / filter は使わない（§8-6：内部の position:fixed の基準になるため） */
footer#footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,
    rgba(158,78,98,0) 0%, rgba(158,78,98,.55) 50%, rgba(158,78,98,0) 100%);
}
/* ※ ここに footer#footer p{color:...} を書いてはいけない。
   IDを含むので詳細度が (1,0,2) になり、下の .footer_nav .nav_menu_list p（0,2,1）に
   勝ってパネル見出しの指定が効かなくなる（実測で発見）。
   footer#footer の color は子孫に継承されるので、そもそも書く必要がない。 */

/* --- ロゴ：淡いピンクの上なら素のままで読めるので、プレートは付けない --- */
.footer_info a.footer_logo img{
  background-color:transparent;
  padding:0;
  border-radius:0;
  box-shadow:none;
}

/* --- 住所 --- */
.footer_info > p{
  font-size:1.4rem; line-height:1.9; letter-spacing:.06em;
}

/* --- 電話 / WEB予約 / Instagram のボタン：白地＋ローズの細枠 --- */
.footer_info .info_links a{
  background-color:var(--footer-plate);
  border:1px solid rgba(158,78,98,.28);
  border-radius:6px;
  color:var(--main-font-color);
  box-shadow:0 1px 6px rgba(158,78,98,.12);
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* 共通の a:hover{opacity:70%} が効くと地色が透けて濁る。不透明のまま枠と影で反応させる。 */
.footer_info .info_links a:hover{
  opacity:1;
  background-color:#fff;
  border-color:rgba(158,78,98,.55);
  box-shadow:0 2px 10px rgba(158,78,98,.2);
}
.footer_info .info_links a span{ color:var(--footer-line) }   /* 白地に 5.65:1 */

/* --- ヴェルスカーご予約（2026-08-07 追加）---
   ヴェルスカーだけ予約先が別サイト（LINE）。フッターの予約ボタン群に並べる。
   .info_links a::before は既定で電話アイコンなので、予約らしくカレンダーに差し替える。
   当院のWEB予約と紛らわしくならないよう、枠色をローズにして少し主張させる。 */
.footer_info .info_links a.info_velskar::before{
  background:url(../img/index/calender_icon_pink.webp) center center no-repeat;
  background-size:contain;
}
/* 他のボタンより文言が長いため、既定のままだと中央寄せの文字が
   絶対配置のアイコン（右端42px）に 22px 食い込む（実測で確認）。
   アイコンぶんの余白を確保し、文字サイズを少し落として収める。 */
.footer_info .info_links a.info_velskar{
  border-color:rgba(158,78,98,.5);
  padding-left:56px;
  padding-right:16px;
  font-size:1.7rem;
}
.footer_info .info_links a.info_velskar span{ font-size:1.1rem }
/* ドクターズ・ファイルは画像自体が白地のカードなので、枠と影は付けず角丸だけ合わせる */
.footer_info .info_links a.doctor_file{
  background-color:transparent; border:none; box-shadow:none;
}
.footer_info .info_links a.doctor_file img{ border-radius:6px }

/* --- フッターナビ --- */
.footer_nav ul li a{ color:var(--footer-text); transition:color .3s ease }
.footer_nav ul li a:hover{
  opacity:1; color:var(--footer-line); text-decoration:underline; text-underline-offset:4px;
}
/* 主要リンク（医院紹介・ドクター紹介…）にローズの短い罫線を足して一覧性を上げる */
.footer_nav > ul{ padding-bottom:12px; border-bottom:1px solid rgba(158,78,98,.2) }
.footer_nav > ul > li > a{ position:relative; padding-left:14px }
.footer_nav > ul > li > a::before{
  content:""; position:absolute; left:0; top:50%; margin-top:-1px;
  width:7px; height:1px; background-color:var(--footer-line);
}
/* 疾患グループのパネル。淡いピンク地の上なので白を強めに乗せて面を起こす
   （元は rgba(255,255,255,.2) で、境目がほとんど見えなかった） */
.footer_nav .nav_menu_list{
  background-color:rgba(255,255,255,.55);
  border:1px solid rgba(158,78,98,.16);
  border-radius:10px;
}
.footer_nav .nav_menu_list p{ color:var(--footer-text) }
.footer_nav .nav_menu_list p::after{ background-color:var(--footer-line) }
.footer_nav .nav_menu_list ul li a{ color:var(--footer-text) }
.footer_nav .nav_menu_list ul li a::before{ color:var(--footer-line) }

/* --- コピーライト：区切り線を入れて位置をはっきりさせる --- */
footer#footer .copy{
  max-width:1160px;
  margin:56px auto 0;
  padding-top:24px;
  border-top:1px solid rgba(158,78,98,.2);
  color:var(--footer-text-quiet);
  letter-spacing:.14em;
}
@media screen and (max-width:767px){
  footer#footer .copy{ margin:32px 8px 0; padding-top:18px }
}


/* ==================================================================
   修正#4（2026-08-05）ピンクのボタンが読めない問題 ＋ ブラッシュアップ
   ================================================================== */

/* ------------------------------------------------------------------
   実測で判明した問題（公開版・`scratchpad/audit_contrast.py`）

     送信ボタン `.contact form input[type=submit]`  白文字/#ffe4e1 = **1.20:1**
     「必須」バッジ `.mw_wp_form span.repuired`      白文字/#ffe4e1 = **1.20:1**
     一覧リンク `p.view_all a`                      白文字/#ffe4e1 = **1.20:1**
     ヘッダーのWEB予約 `a.header_reserve`           白文字/#ed8599 = **2.50:1**
     （いずれも AA の 4.5:1 に対して大幅に不足。淡いピンクに白文字を載せていた）

   ※`.medicine_btn` と `.sec_link ul li a` も地は #ffe4e1 だが、文字が
     var(--main-font-color) なので十分読める。**触らない。**

   色の決め方
     ブランドのピンク #ed8599 の色相を保ったまま暗くすると #E02C4F のような
     鮮やかな赤になり、医院サイトの上品さに合わなかった。
     そこで彩度も落とした「くすんだ深いローズ」を主要アクションの色にした。
       --cta:#9E4E62 … 白文字 **5.65:1** ／ 淡いピンク地の文字として **4.69:1**
     ヘッダーのWEB予約・SPの追従CTAも同じ色に揃えて、サイト内のCTAを1色に統一する。
   ------------------------------------------------------------------ */
:root{
  --cta:#9E4E62;              /* 主要アクション（白文字でAA合格） */
  --cta-hover:#8A4155;
  --cta-shadow:158,78,98;     /* rgba() に流す用 */
  --pale-pink:#FFE4E1;        /* 元からある淡いピンク。地色としては残す */
}

/* --- お問い合わせフォームのボタン ---------------------------------
   元は 200×54px・左寄せ・角丸7px。フォームの主要アクションとしては弱いので、
   中央寄せ＋幅を広げ、支給バナーの「詳しく見る」と同じピル形に揃えた。 */
.contact form input[type="submit"],
.mw_wp_form input[type="submit"]{
  background-color:var(--cta);
  color:#fff;
  width:auto;
  min-width:300px;
  padding:17px 44px;
  border:none;
  border-radius:999px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  font-family:var(--f-f-mincho);
  font-size:1.6rem;
  letter-spacing:.12em;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(var(--cta-shadow),.28);
  transition:background-color .3s ease, box-shadow .3s ease, transform .2s ease;
}
.contact form input[type="submit"]:hover,
.mw_wp_form input[type="submit"]:hover{
  background-color:var(--cta-hover);
  box-shadow:0 4px 14px rgba(var(--cta-shadow),.34);
  opacity:1;
}
.contact form input[type="submit"]:active,
.mw_wp_form input[type="submit"]:active{ transform:translateY(1px) }
/* キーボード操作でも押せる場所が分かるようにする */
.contact form input[type="submit"]:focus-visible,
.mw_wp_form input[type="submit"]:focus-visible{
  outline:3px solid rgba(var(--cta-shadow),.45);
  outline-offset:3px;
}
/* 確認画面の「戻る」は副次アクションなので枠線だけにして、送信と見分けられるようにする
   （MW WP Form は name="submitBack" で出す） */
.mw_wp_form input[type="submit"][name="submitBack"]{
  background-color:transparent;
  color:var(--cta);
  border:1px solid var(--cta);
  box-shadow:none;
  min-width:200px;
  margin-top:16px;
}
.mw_wp_form input[type="submit"][name="submitBack"]:hover{
  background-color:var(--cta);
  color:#fff;
}

/* --- 「必須」バッジ ---
   淡いピンクの地は残し、文字を深いローズにして読めるようにする（4.69:1）。
   角丸と細枠を足して、ラベルらしい形にした。 */
.mw_wp_form span.repuired{
  background-color:var(--pale-pink);
  color:var(--cta);
  border:1px solid rgba(var(--cta-shadow),.35);
  border-radius:4px;
  padding:2px 7px;
  margin-left:6px;
  font-size:1.1rem;
  letter-spacing:.04em;
  vertical-align:middle;
}

/* --- 一覧の「view all」リンク（白文字が読めていなかった） --- */
p.view_all a{
  background-color:var(--cta);
  color:#fff;
  border-radius:999px;
  transition:background-color .3s ease;
}
p.view_all a:hover{ background-color:var(--cta-hover); opacity:1 }

/* --- ヘッダーのWEB予約ボタン（全ページに出る。2.50:1 だった） --- */
a.header_reserve{
  background-color:var(--cta);
  border-radius:999px;
  box-shadow:0 1px 6px rgba(var(--cta-shadow),.25);
}
a.header_reserve:hover{ background-color:var(--cta-hover); opacity:1 }

/* --- SPの追従CTA。電話はnavyのまま、WEB予約を同じローズに揃える --- */
.sp_fix_cta .cta_web{ background-color:var(--cta) }

/* --- あと僅かで届かなかった箇所（4.33〜4.40:1 → 4.5以上へ） ---
   ブランドの brown #91725f を、判定に落ちた用途に限って2%ほど暗くする。
   見た目の差はほぼ無いが AA を満たす。**brown 自体は変えない。** */
.clinic_menu ul.wrapper li a span,
.mean_head span{ color:#8C6E5C }          /* 診療メニューの英字ラベル 4.33 → 4.57 */
a.clinic_menu_btn{ background-color:#8E705D }  /* 「診療案内へ」 4.40 → 4.56 */

@media screen and (max-width:767px){
  .contact form input[type="submit"],
  .mw_wp_form input[type="submit"]{
    min-width:0;
    width:100%;
    padding:16px 20px;
  }
  .mw_wp_form input[type="submit"][name="submitBack"]{ width:100% }
}


/* ==================================================================
   修正#9（2026-08-17）運動療法のセットプランを「積み上がり」で見せる
   ================================================================== */

.pt_set_lead{
  font-size:1.6rem; line-height:1.9; margin-bottom:8px;
}
.pt_set_lead strong{ color:var(--cta); font-weight:bold }
.pt_set_common{
  font-size:1.3rem; line-height:1.8; color:#605C5A; margin-bottom:20px;
}

/* --- 比較表 ---
   1列目に内容、2〜4列目に各プラン。table-layout:fixed で列幅を決め打ちし、
   長い検査名でも列がずれないようにする（§8 の PT料金表と同じ考え方）。

   ★セレクタを `.sec_inner table.pt_compare …` まで書く。
     テーマ側に `.sec_inner table tbody tr th{ padding:30px; width:260px; text-align:center }`
     （詳細度 0,1,4）があり、`.pt_compare th`（0,1,1）では負ける。
     実際に踏んだ：paddingが30pxのままで行が異常に高くなり、
     1列目が中央寄せになって `＋` 印だけが左端に取り残された。 */
.sec_inner table.pt_compare{ width:100%; table-layout:fixed; margin-bottom:10px }
.sec_inner table.pt_compare thead tr th,
.sec_inner table.pt_compare tbody tr th,
.sec_inner table.pt_compare tbody tr td{
  border-bottom:1px solid #e4e4e4; padding:12px 8px; font-size:1.35rem; line-height:1.6;
  width:auto;
}
.sec_inner table.pt_compare thead tr th{
  background-color:#f6f0e0; font-weight:bold; text-align:center; vertical-align:middle;
  line-height:1.5;
}
.sec_inner table.pt_compare thead tr th span{
  display:block; font-size:1.1rem; font-weight:normal; color:#605C5A; margin-top:3px;
  white-space:nowrap;
}
.sec_inner table.pt_compare tbody tr th{
  text-align:left; font-weight:normal; overflow-wrap:anywhere; vertical-align:middle;
}
/* ★nowrap は●△—の記号セルだけに限定する。文字が入るセルに掛けると
   table-layout:fixed の列幅を越えて隣のセルへ溢れる（実際に踏んだ：SPで224px溢れ）。 */
.sec_inner table.pt_compare tbody tr td{
  text-align:center; overflow-wrap:anywhere; vertical-align:middle;
}
.sec_inner table.pt_compare tbody tr td.is_on,
.sec_inner table.pt_compare tbody tr td.is_pick,
.sec_inner table.pt_compare tbody tr td.is_off{ white-space:nowrap }
.sec_inner table.pt_compare th:nth-child(1){ width:40% }
.sec_inner table.pt_compare th:nth-child(2),
.sec_inner table.pt_compare th:nth-child(3),
.sec_inner table.pt_compare th:nth-child(4){ width:20% }
/* ベーシックの基本内容と、上位で追加される検査を見分けられるようにする */
.sec_inner table.pt_compare tbody tr th.is_base{ background-color:#fffdfa }
.sec_inner table.pt_compare tbody tr th.is_extra{
  background-color:#fdf4f6; padding-left:26px; position:relative;
}
.sec_inner table.pt_compare tbody tr th.is_extra::before{
  content:"＋"; position:absolute; left:8px; color:var(--cta); font-weight:bold;
}
.sec_inner table.pt_compare tbody tr td.is_on{
  color:var(--cta); font-weight:bold; font-size:1.5rem;
}
/* △は白背景で読める濃さにする（薄い水色は視認できなかった） */
.sec_inner table.pt_compare tbody tr td.is_pick{
  color:#30486A; font-weight:bold; font-size:1.5rem;
}
.sec_inner table.pt_compare tbody tr td.is_off{ color:#b3ada6 }
.sec_inner table.pt_compare tbody tr td.is_txt{ font-size:1.25rem; line-height:1.5 }
.pt_compare_note{ font-size:1.2rem; line-height:1.8; color:#605C5A; margin-bottom:8px }
.pt_compare_note strong{ color:var(--cta); font-weight:bold }

/* --- プランごとのカード --- */
.pt_card .price_title{ line-height:1.5 }
.pt_card .pt_price_tag{
  display:inline-block; margin-left:10px; padding:2px 10px;
  background-color:var(--cta); color:#fff; border-radius:999px;
  font-size:1.2rem; letter-spacing:.04em; vertical-align:middle; white-space:nowrap;
}
.pt_card_head{
  font-size:1.4rem; font-weight:bold; margin:14px 0 6px; line-height:1.6;
}
/* 「ベーシックの全内容を含む」ことを枠で囲って土台だと分かるようにする */
.pt_card_head.pt_inherit{
  background-color:#fffdfa; border:1px solid rgba(158,78,98,.28);
  border-radius:6px; padding:10px 12px; color:#36322F;
}
.pt_card_head.pt_inherit span{
  display:block; font-size:1.15rem; font-weight:normal; color:#605C5A; margin-top:2px;
}
.pt_card_head.pt_plus{ color:var(--cta) }
.price.pt_add li{ position:relative }

@media screen and (max-width:767px){
  .pt_set_lead{ font-size:1.45rem }
  .sec_inner table.pt_compare thead tr th,
  .sec_inner table.pt_compare tbody tr th,
  .sec_inner table.pt_compare tbody tr td{ padding:10px 4px; font-size:1.15rem }
  .sec_inner table.pt_compare tbody tr th.is_extra{ padding-left:20px }
  .sec_inner table.pt_compare tbody tr th.is_extra::before{ left:4px }
  .sec_inner table.pt_compare thead tr th span{ font-size:1rem }
  .sec_inner table.pt_compare tbody tr td.is_txt{ font-size:1.05rem }
  .sec_inner table.pt_compare th:nth-child(1){ width:46% }
  .sec_inner table.pt_compare th:nth-child(2),
  .sec_inner table.pt_compare th:nth-child(3),
  .sec_inner table.pt_compare th:nth-child(4){ width:18% }
  .pt_card .pt_price_tag{ margin-left:0; margin-top:6px; display:inline-block }
}