@charset "utf-8";
@import url("https://use.typekit.net/zpd4zfp.css");

/* 基本設定 */
html { font-size: 16px; margin: 0; padding: 0; }

body {
  font-size: 1rem;
  margin: 0;
  background: #fffcef;
  color: #333333;
  font-family: "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.wf_notosansjapanese { font-family: "Noto Sans JP"; }
input, button, textarea, *:before, *:after { font-family: inherit; }

/* 段落とリンク */
p { margin: 0 0 1em; }
p:last-of-type { margin-bottom: 0; }
a { color: #1a2b3c; text-decoration: none; transition: all 0.3s ease; }
a:hover { opacity: 0.7; }

/* フォントの種類 */
.serif { font-family: "游明朝 Medium", "YuMincho Medium", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
.sans { font-family: inherit; }

/* テキストの揃え方 */
.alignL { text-align: left !important; }
.alignC { text-align: center !important; }
.alignR { text-align: right !important; }
.alignM, .alignE {
  text-align: justify !important; text-justify: inter-ideograph !important;
  word-wrap: break-word !important; -moz-text-align-last: justify !important;
  text-align-last: justify !important;
}

/* 画像の配置 */
img.alignright { float: right; margin: 0.5em 0 0.5em 1em; }
img.aligncenter { display: block; margin: 0 auto; }
img.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }

/* コンテンツと背景 */
.contents { margin: 0 auto; padding: 90px 15px; }
.bga { background: url(../img/contents/bg.jpg); }
.machi { background: url(../img/footer/bg.png) 100% 100.5% repeat-x; }

/*==================================================
  ヘッダー・フッター・サイドメニュー
==================================================*/
---
ヘッダー、はpage.cssにて設定
フッター、そしてスマートフォン用のメニューに関するスタイルです。

```css


/* フッター */
footer { background: #9dc05d; color: #ffffff; text-align: center; font-size: 1.25rem; }
footer .contents { padding: 40px 15px 25px; }
footer .logo { margin-bottom: 25px; }
footer .ftel, .openclose .ftel, .accessparts .address .inner .ftel {
  font-family: montserrat, sans-serif; font-weight: 500;
  font-size: 2.625rem; margin: 20px 0 50px; letter-spacing: 0.05em;
}
footer .ftel:before, .openclose .ftel:before, .accessparts .address .inner .ftel:before {
  content: "\f2a0"; font-family: "Font Awesome 5 Free"; font-weight: 900;
}
footer small { font-size: 0.812rem; }
footer a { color: #ffffff; text-decoration: none; }
.fnav { text-align: center; }
.fnav li { display: inline-block; }
.fnav li a { padding: 0 25px; }
.fnav li:after { content: "｜"; font-size: 16px; }
.fnav li:last-child:after { content: none; }

/* アクセス情報と料金表のコンテナ */
.accessparts .contents { max-width: 1200px; margin: auto; }
.accessparts .address { float: left; background: #ffffff; width: 430px; display: table; padding: 80px 75px; margin-right: 35px; }
.accessparts .address .inner { display: table-cell; vertical-align: middle; }
.accessparts .address .inner .ftel { color: #bc9760; text-align: left; margin: 15px 0; }
.accessparts .googlemap { text-align: center; }

/* 料金表（開閉式） */
.openclose { padding-bottom: 260px; }
.openclose .contents { width: 820px; margin: auto; padding-bottom: 0; }
.openclose .schedule {
  background: rgba(255,255,255,1.0); padding: 30px 60px;
  border-radius: 4px; width: auto; font-size: 1.312rem;
}
.openclose .schedule dl {
  border-bottom: solid 1px #e5e5e5; padding: 8px 0; margin: 0;
}
.openclose .schedule dl:nth-child(3) { margin-bottom: 10px !important; }
.openclose .schedule dl dt, .openclose .schedule dl dd { display: inline-block; }
.openclose .schedule dl dt { width: 235px; }
.openclose .schedule dl:nth-child(1) dd span { color: #333333; }
.openclose .schedule dl dd span { background: none; padding: 14px; color: #cccccc; }
.openclose .schedule dl dd span.maru { color: #5e7aa2; }
.openclose .ftel { color: #bc9760; text-align: center; }
.openclose h3 { margin-bottom: 0; }
.openclose ul { padding-left: 0; margin: 0 0 50px; }
.openclose li { list-style: none; }
.openclose .ftel a, .accessparts .address a{ color: #bc9760; }

/*--- トップページ ---*/
.pageIndex .mainImg { margin: 0 auto; width: auto; max-width: none; padding: 0 35px; position: relative; z-index: 2; margin-bottom: 100px; }
.pageIndex .mainImg ul, .pageIndex .mainImg li { margin: 0; padding: 0; list-style: none; }
.pageIndex .mainImg img { width: 100%; height: auto; border-radius: 10px; }
.pageIndex .mainImg .copy { position: absolute; bottom: -5%; left: 7%; }
.pageIndex .mainImg .copy h2 { padding-bottom: 20px; font-family: tbchibirgothicplusk-pro, sans-serif; font-weight: 400; font-style: normal; }
.pageIndex .mainImg .copy span { background: rgba(255, 255, 255, 0.9); font-size: 1.5rem; color: #0f345b; padding: 15px 30px; line-height: 1; }
.pageIndex .mainImg .copy .schedule {
  background: rgba(255, 255, 255, 1.0); padding: 30px; width: fit-content;
  box-shadow: 0 0 4px #cccccc;
}
.pageIndex .mainImg .copy .schedule dl { border-bottom: solid 1px #e5e5e5; padding: 8px 0; margin: 0; }
.pageIndex .mainImg .copy .schedule dl:nth-child(3) { margin-bottom: 10px !important; }
.pageIndex .mainImg .copy .schedule dl dt, .pageIndex .mainImg .copy .schedule dl dd { display: inline-block; }
.pageIndex .mainImg .copy .schedule dl dt { width: 160px; }
.pageIndex .mainImg .copy .schedule dl:nth-child(1) dd span { color: #333333; }
.pageIndex .mainImg .copy .schedule dl dd span { background: none; padding: 14px; font-size: 1rem; color: #cccccc; }
.pageIndex .mainImg .copy .schedule dl dd span.maru { color: #5e7aa2; }
.pageIndex .mainImg .copy .schedule .childtime { margin-top: 20px; }
.pageIndex .mainImg .copy .schedule .childtime span { font-size: 1rem; padding: 0; display: inline; }
.pageIndex .mainImg .copy .schedule .childtime em { font-size: 0.812rem; font-style: normal; }
.pageIndex .informationTopics { width: 1200px; margin: auto; padding-bottom: 80px; }
.pageIndex .informationTopics dl {
  background: #ffffff; display: inline-block; padding: 35px 30px;
  position: relative; margin-right: 22px; max-width: 220px;
  vertical-align: top;
}
.pageIndex .informationTopics dl:last-child { margin-right: 0; }
.pageIndex .informationTopics dl dt, .pageIndex .informationTopics dl dd { margin: 0; padding: 0; }
.pageIndex .informationTopics dl dt { margin-top: 10px; }
.pageIndex .informationTopics dl dt small { display: block; font-family: montserrat, sans-serif; letter-spacing: 0.075em; font-weight: 600; }
.pageIndex .informationTopics dl dd span.category {
  position: absolute; top: 0; left: 30px; background: #5e7aa2; color: #ffffff;
  font-size: 0.812rem; line-height: 24px; padding: 0 10px;
}
.pageIndex .informationTopics dl dd.photo {
  width: 220px; height: 136px; overflow: hidden; position: relative;
  font-size: 0; line-height: 0; margin: 0; padding: 0;
}
.pageIndex .informationTopics dl dd.photo img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); height: auto; width: 100%;
}
.pageIndex .treatment { padding: 80px 0; }
.pageIndex .treatment .contents { max-width: 1200px; margin: auto; padding: 0; }
.pageIndex .treatment .internal { background: url(../img/contents/index/internal.jpg) left no-repeat; background-size: 50%; padding: 40px 0; }
.pageIndex .treatment .pediatrics { background: url(../img/contents/index/pediatrics.jpg) right no-repeat; background-size: 50%; padding: 40px 0; }
.pageIndex .treatment .internal .textArea, .pageIndex .treatment .pediatrics .textArea {
  background: #ffffff; padding: 55px; border-radius: 4px; box-shadow: 0 0 10px #999999;
  width: 780px;
}
.pageIndex .treatment .internal .textArea { float: right; }
.pageIndex .treatment .pediatrics .textArea { float: left; }
.pageIndex .treatment .internal:after, .pageIndex .treatment .pediatrics:after { content: ""; clear: both; height: 0; display: block; visibility: hidden; }
.pageIndex .treatment .internal .textArea h3, .pageIndex .treatment .pediatrics .textArea h3 { font-size: 2.5rem; margin: 0 0 15px; }
.pageIndex .treatment .internal .textArea h3 span, .pageIndex .treatment .pediatrics .textArea h3 span {
  color: #bc9760; font-size: 1.25rem; vertical-align: middle; padding-left: 25px;
}
.pageIndex .treatment .pediatrics .textArea h3 span { display: block; padding-left: 0; }
.pageIndex .treatment .internal .textArea p:last-of-type, .pageIndex .treatment .pediatrics .textArea p:last-of-type { margin-bottom: 40px; }
.pageIndex .doctor { max-width: 1200px; margin: auto; }
.pageIndex .doctor h2 { margin-bottom: 170px; }
.pageIndex .doctor h3 { color: #bc9760; font-size: 1.25rem; }
.pageIndex .doctor:after { content: ""; clear: both; height: 0; display: block; visibility: hidden; }
.pageIndex .doctor .intro { background: #ffffff; padding: 40px; border-radius: 4px; box-shadow: 0 0 10px #999999; width: 470px; }
.pageIndex .doctor .intro .photo { text-align: center; margin-top: -170px; }
.pageIndex .doctor .intro.left { float: left; }
.pageIndex .doctor .intro.right { float: right; }
.pageIndex .doctor a.button { margin-top: 60px; }
.pageIndex .facility { background: url(../img/contents/index/facility.jpg) no-repeat bottom; background-size: cover; }
.pageIndex .facility .contents { max-width: 1200px; margin: auto; text-align: center; }
.pageIndex .facility .contents p { text-align: center; }
.pageIndex .facility .contents ul { margin: 40px 0; }
.pageIndex .facility .contents li { list-style: none; display: inline-block; margin-right: 22px; }
.pageIndex .facility .contents li:last-child { margin-right: 0; }
.pageIndex .facility .contents li span { display: block; font-size: 0.875rem; }
.pageIndex .facility .contents li img { border-radius: 4px; margin-bottom: 10px; }


@media screen and (max-width: 767px) {
  /* 診療時間ブロック全体のスタイル調整 */
  .schedule {
    padding: 20px;
    box-sizing: border-box;
  }

  /* dtとddのレイアウトを縦並びに変更 */
  .schedule dl dt,
  .schedule dl dd {
    display: block; /* 縦並びにする */
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* 曜日と診療状況の各spanをFlexboxで均等配置 */
  .schedule dl dd {
    display: flex;                /* Flexboxコンテナに設定 */
    justify-content: space-around; /* 子要素を均等な間隔で配置 */
    width: 100%;
    margin-top: 5px;
  }

  .schedule dl dd span {
    flex-grow: 1;                 /* 利用可能なスペースを均等に分配 */
    text-align: center;           /* テキストを中央揃えに */
    padding: 0 5px;
    box-sizing: border-box;
  }

  .schedule dl dt {
    text-align: left; /* 診療時間や曜日を左寄せに */
  }

  /* 注意書きのフォントサイズ調整 */
  .schedule p {
    font-size: 0.812rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 767px) {
  /* 内科・小児科のテキストエリアの幅をスマホ用に調整 */
  .pageIndex .treatment .internal .textArea,
  .pageIndex .treatment .pediatrics .textArea {
    width: 100%;             /* 画面幅いっぱいに広げる */
    float: none;             /* フロートを解除 */
    padding: 20px;           /* パディングを調整 */
    box-sizing: border-box;  /* パディングを含めて幅を計算 */
  }

  /* 背景画像の表示を調整 */
  .pageIndex .treatment .internal,
  .pageIndex .treatment .pediatrics {
    background-size: cover;  /* 背景画像を画面いっぱいに表示 */
    background-position: center;
  }
}

@media screen and (max-width: 767px) {
  /* 医師紹介のレイアウトをスマホ用に調整 */
  .pageIndex .doctor .intro {
    width: 100%;             /* 幅を画面いっぱいにする */
    float: none;             /* フロートを解除 */
    box-sizing: border-box;  /* パディングを含めて幅を計算 */
  }

  /* 写真の表示を調整 */
  .pageIndex .doctor .intro .photo {
    text-align: center;      /* 画像を中央寄せにする */
    margin: 0 auto 20px;     /* 上下の余白を追加 */
    margin-top: 0;           /* 負のマージンをリセット */
  }

  .pageIndex .doctor .intro .photo img {
    width: 100%;             /* 画像を親要素の幅に合わせる */
    height: auto;
  }

  /* テキストの余白を調整 */
  .pageIndex .doctor .intro h3,
  .pageIndex .doctor .intro p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;        /* テキストを左寄せにする */
  }

  /* 施設紹介のレイアウトをスマホ用に調整 */
  .pageIndex .facility .contents {
    width: 100%;             /* 幅を画面いっぱいにする */
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .pageIndex .facility .contents ul {
    margin: 20px 0;          /* 上下の余白を調整 */
  }
  .pageIndex .facility .contents li {
    display: block;          /* 縦並びにする */
    width: 100%;             /* 幅を画面いっぱいにする */
    margin-right: 0;
    margin-bottom: 20px;     /* 各項目の下に余白を追加 */
  }
  .pageIndex .facility .contents li:last-child {
    margin-bottom: 0;
  }
  .pageIndex .facility .contents li img {
    width: 100%;
    height: auto;
  }
}

/*---------------------
医師紹介
---------------------*/
.pageDoctor .doctor .contents { max-width: 1200px; margin: auto;}

.pageDoctor .doctor .left .photo { float: right;}
.pageDoctor .doctor .right .photo { float: left;}

.pageDoctor .intro:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}
.pageDoctor .intro { position: relative;}
.pageDoctor .intro .inner { width: 540px; z-index: 5; position: absolute;}
.pageDoctor .intro h4 { color: #bc9760; font-size: 1.5rem; margin-left: 25px;}
.pageDoctor .intro p { margin-left: 25px; line-height: 3;}
.pageDoctor .intro p.message {
    background: rgba(255,255,255,0.8);
    border-radius: 8px;
    padding: 25px;
    margin-left: 0;
    margin-bottom: 35px;
}
.pageDoctor .intro.right .inner { right: 0;}
.pageDoctor .intro.right h4 { margin-left: 100px;}
.pageDoctor .intro.right p.message  {
    padding-left: 100px;
}

@media screen and (max-width: 767px) {
    .pageDoctor .doctor .contents { width: auto; padding: 20px;}
    .pageDoctor .contents.intro h3.line { text-align: center;}
    .pageDoctor .intro .inner { width: 90%; margin: auto; position: inherit;}
    .pageDoctor .doctor .left .photo,
    .pageDoctor .doctor .right .photo { float: none;}
    .pageDoctor .doctor .left .photo img,
    .pageDoctor .doctor .right .photo img { width: 100%; height: auto; border-radius: 8px;}
    
    .pageDoctor .intro h4 { text-align: center; margin: 0 0 10px;}
    .pageDoctor .intro p { line-height: 1.8;}
    
    .pageDoctor .doctor .right.contents  { padding-top: 60px;}
    .pageDoctor .intro.right h4 { margin-left:0px;}
    .pageDoctor .intro.right p.message {padding: 25px;}
}


/*---------------------
診療案内
---------------------*/
.pageTreatment {}
.pageTreatment .treatment .contents {
  max-width: 1200px;
  margin: auto;
  font-size: 0; /* 親要素のフォントサイズを0にして、inline-blockの隙間をなくす */
}
.pageTreatment .treatment .contents.child {
  position: relative;
  margin-top: 190px;
}
.pageTreatment .treatment .contents p:nth-of-type(even) {
  line-height: 2;
  margin-bottom: 60px;
}
.pageTreatment .treatment .contents .detail {
  width: 580px;
  display: inline-block;
  vertical-align: top; /* 要素を上端に揃える */
  font-size: 1rem; /* テキストのフォントサイズを元に戻す */
}
.pageTreatment .treatment .contents dl {
  background: #ffffff;
  border-radius: 6px;
  padding: 25px 30px ;
}
.pageTreatment .treatment .contents .photo dl {
  background: none;
  padding: 0;
}
.pageTreatment .treatment .contents .photo dl dd {
  line-height: 1;
}
.pageTreatment .treatment .contents .photo img {
  border-radius: 6px;
}
.pageTreatment .detail{
  margin-right: 35px;
}
.pageTreatment .detail:nth-of-type(even) {
  margin-right: 0;
}
.pageTreatment .treatment .contents dl dt {
  font-size: 1.25rem;
  font-weight: bold;
}
.pageTreatment .treatment .contents h4 {
  text-align: left;
  margin-bottom: 30px;
}
.pageTreatment .treatment .contents h5 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 35px;
}/*---------------------
診療案内
---------------------*/
.pageTreatment {}

/* PC版の2カラムレイアウト設定 */
.pageTreatment .treatment .contents {
  max-width: 1200px;
  margin: auto;
  font-size: 0; /* inline-blockの隙間をなくすための設定 */
}

/* 子ページに共通のコンテナ設定 */
.pageTreatment .treatment .contents.child {
  position: relative;
  margin-top: 190px;
}

/* 段落スタイル */
.pageTreatment .treatment .contents p:nth-of-type(even) {
  line-height: 2;
  margin-bottom: 60px;
}

/* 2カラム表示の各詳細ブロック */
.pageTreatment .treatment .contents .detail {
  width: 580px;
  display: inline-block;
  vertical-align: top;
  font-size: 1rem; /* 親要素のfont-size:0を上書き */
}

/* DL（定義リスト）のスタイル */
.pageTreatment .treatment .contents dl {
  background: #ffffff;
  border-radius: 6px;
  padding: 25px 30px;
}

/* 写真があるDLのスタイル */
.pageTreatment .treatment .contents .photo dl {
  background: none;
  padding: 0;
}
.pageTreatment .treatment .contents .photo dl dd {
  line-height: 1;
}
.pageTreatment .treatment .contents .photo img {
  border-radius: 6px;
}

/* マージン調整 */
.pageTreatment .detail {
  margin-right: 35px;
}
.pageTreatment .detail:nth-of-type(even) {
  margin-right: 0;
}

/* 見出しのスタイル */
.pageTreatment .treatment .contents dl dt {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 25px;
  line-height: 2.5;
}
.pageTreatment .treatment .contents h4 {
  text-align: left;
  margin-bottom: 30px;
}
.pageTreatment .treatment .contents h5 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 35px;
}
.pageTreatment .treatment .contents dl dt span {
  border-bottom: solid 4px;
}

/* 内科と小児科のアクセントカラー */
.pageTreatment .treatment .contents.naika dl dt span,
.pageTreatment .treatment .contents.naika h4.xline:before {
  border-color: #acce6c;
}
.pageTreatment .treatment .contents.child h3.line {
  background: url(../img/contents/treatment/child.jpg) center no-repeat;
  height: 200px;
  line-height: 200px;
  padding-left: 115px;
  margin-top: -190px;
  margin-bottom: 60px;
}
.pageTreatment .treatment .contents.child dl dt span,
.pageTreatment .treatment .contents.child h4.xline:before {
  border-color: #fa8f73;
}

/* 定義リスト（dd）のスタイル */
.pageTreatment .treatment .contents dl dd {
  line-height: 2;
  margin: 0;
}
.pageTreatment .treatment .contents dl dd em {
  color: #cb4320;
  font-style: normal;
  font-size: 0.875rem;
}


/*==================================================
  レスポンシブ対応
  （767px以下で適用されるスマートフォン向けスタイル）
==================================================*/
@media screen and (max-width: 767px) {
  /* メインコンテンツの幅を自動調整し、左右の余白を設ける */
  .pageTreatment .treatment .contents {
    width: auto;
    max-width: 100%;
    padding: 20px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  
  /* 子ページコンテンツの余白を調整 */
  .pageTreatment .treatment .contents.child {
    margin-top: 50px;
  }
  
  /* 詳細ブロックを1列表示に */
  .pageTreatment .treatment .contents .detail {
    width: 100%;
    margin: auto;
    display: block;
    font-size: 1rem;
  }
  
  /* DL（定義リスト）のスタイル調整 */
  .pageTreatment .treatment .contents dl dt {
    line-height: 2;
  }

  /* 写真付き詳細ブロックの画像調整 */
  .pageTreatment .treatment .contents .photo.detail img {
    width: 100%;
    height: auto;
  }
  
  /* 見出しのスタイル調整 */
  .pageTreatment .treatment .contents h4 {
    margin-bottom: 15px;
  }
  .pageTreatment .treatment .contents.naika h3.line {
    text-align: center;
  }
}

/*---------------------
施設紹介
---------------------*/
.pageFacilities .facility .contents { 
  max-width: 1200px;
  margin: auto;
  font-size: 0; /* inline-block要素間の隙間をなくす */
}
.pageFacilities .facility ul,
.pageFacilities .facility li { 
  list-style: none;
  margin: 0;
  padding: 0;
}
.pageFacilities .facility li {
  display: inline-block;
  margin-right: 75px;
  margin-bottom: 70px;
  list-style: none;
  text-align: center;
  position: relative;
  width: calc(50% - 37.5px); /* 2カラム表示の幅をcalcで計算 */
  font-size: 1rem; /* テキストのフォントサイズを戻す */
  vertical-align: top; /* 上端に揃える */
}
.pageFacilities .facility li:nth-of-type(even) {
  margin-right: 0;
}
.pageFacilities .facility li img { 
  border-radius: 8px;
  display: block;
}
.pageFacilities .facility li span {
  background: #fffcef;
  line-height: 45px;
  border-radius: 4px;
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 230px;
}
@media screen and (max-width: 767px) {
  .pageFacilities .facility .contents { 
    width: auto;
    padding: 20px;
    font-size: 1rem; /* スマホではフォントサイズを戻す */
  }
  .pageFacilities .facility li {
    display: block; /* 縦並びにする */
    margin-right: 0; /* マージンをリセット */
    margin-bottom: 40px; /* 要素間の間隔を調整 */
    width: 100%; /* 親要素の幅いっぱいに広げる */
  }
  .pageFacilities .facility li:nth-of-type(even) {
    margin-right: 0;
  }
  .pageFacilities .facility li img {
    width: 100%;
    height: auto;
  }
}

/*==================================================
  美容診療 親ページ (body.pageCosmetic) 用スタイル
==================================================*/
.pageCosmetic .treatment .contents { max-width: 1200px; margin: auto; padding: 0; }
.pageCosmetic .treatment .contents.child { position: relative; margin-top: 190px; }
.pageCosmetic .treatment .contents p:nth-of-type(even) { line-height: 2; margin-bottom: 60px; }
.pageCosmetic .treatment .contents .detail { width: 580px; display: inline-block; vertical-align: bottom; }
.pageCosmetic .treatment .contents dl { background: #ffffff; border-radius: 6px; padding: 25px 30px; }
.pageCosmetic .treatment .contents .photo dl { background: none; padding: 0; }
.pageCosmetic .treatment .contents .photo dl dd { line-height: 1; }
.pageCosmetic .treatment .contents .photo img { border-radius: 6px; }
.pageCosmetic .detail { margin-right: 35px; }
.pageCosmetic .detail:nth-of-type(even) { margin-right: 0; }
.pageCosmetic .treatment .contents dl dt { font-size: 1.25rem; font-weight: bold; margin-bottom: 25px; line-height: 2.5; }
.pageCosmetic .treatment .contents h4 { text-align: left; margin-bottom: 30px; }
.pageCosmetic .treatment .contents h5 { font-size: 1rem; font-weight: bold; margin-bottom: 35px; }
.pageCosmetic .treatment .contents dl dt span { border-bottom: solid 4px; }
.pageCosmetic .treatment .contents.cosmetic dl dt span, .pageCosmetic .treatment .contents.cosmetic h4.xline:before { border-color: #8f73fa; }
.pageCosmetic .treatment .contents dl dd { line-height: 2; margin: 0; }
.pageCosmetic .treatment .contents dl dd em { color: #cb4320; font-style: normal; font-size: 0.875rem; }

/*==================================================
  グローバル共通スタイル
==================================================*/
.luxury-container { max-width: 900px; margin: 40px auto; padding: 20px; }
.treatment-block {
  background-color: #ffffff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); margin-bottom: 50px;
  overflow: hidden; display: flex; flex-direction: column;
}
.treatment-content {
  padding: 30px; display: grid; grid-template-columns: 2fr 1fr;
  gap: 30px;
}
.text-area h3 { margin: 0; font-size: 1.8rem; font-weight: 500; color: #d4af37; margin-bottom: 20px; }
.text-area h4 {
  font-size: 1.3rem; color: #d4af37;
  border-bottom: 1px solid #f0e6f7; padding-bottom: 10px;
  margin-top: 0; margin-bottom: 20px;
}
.text-area p { line-height: 1.8; margin-bottom: 1.5em; color: #666; }
.image-area { display: flex; flex-direction: column; gap: 15px; }
.image-area img { width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.cosme-link { display: block; text-decoration: none; position: relative; }
.cosme-item {
  background-color: #fff; padding: 20px; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); position: relative;
}
.cosme-item h4 {
  font-size: 1.3em; color: #d9b98b; display: flex; align-items: center;
  justify-content: space-between; margin: 0;
}
.cosme-item h4::after {
  content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  font-size: 0.8em; color: #d97a61; background-color: #fff; border: 1px solid #d97a61;
  border-radius: 50%; width: 1.2em; height: 1.2em; line-height: 1.2em;
  text-align: center; margin-left: 10px; display: inline-flex;
  justify-content: center; align-items: center;
}
.cosme-item p {
  font-size: 1em; line-height: 1.4; margin: 5px 0 0; color: #666; text-align: left;
}
.cosme-item p::after { content: none; }
.note {
  background-color: #f3f0f7; border-left: 4px solid #d4af37;
  padding: 15px; border-radius: 4px; font-size: 0.9rem;
}

/*-----------------
ブログ
---------------*/
.pagePost  {}
.pagePost #ContentsBase .contents { max-width: 1200px; margin: auto;}
.pagePost #ContentsBase .mainColumn { width: 70%; float: left;}
.pagePost #ContentsBase .subColumn { float: right; width: 20%;}
.pagePost #ContentsBase .wallBelt.zero {  border-bottom: solid 1px #eeeeee; padding-bottom: 60px;}
.pagePost #ContentsBase .wallBelt:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

.pagePost .mainColumn ul,
.pagePost .mainColumn li { list-style: none; margin: 0; padding: 0;}

.pagePost .mainColumn li {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.pagePost .mainColumn li small,
.postList_date{
    font-family: 'Montserrat', "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",sans-serif;
    margin-right: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #333333 !important;
}
.pagePost .mainColumn li .category { display: inline-block; width: 15%;}
.pagePost .mainColumn li .e_title { display: inline-block;}

.pagePost .mainColumn li .category span,
.pagePost.detail .mainColumn span.category,
.pagePost .subColumn .widget .postList .postList_terms,
.veu_postList .postList_terms a{
    background: #5e7aa2;
    color: #ffffff;
    font-size: 0.812rem;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: normal;
}
.pagePost.detail .mainColumn span.category { margin-right: 15px;}

.pagePost .mainColumn h3.entryTitle {
    padding: 20px 0;
    font-size: 1.25rem;
    line-height: 1.8rem;
    font-weight:bold;
    border-bottom: 3px solid #5e7aa2;
    margin-bottom: 20px;
}
.pagePost .mainColumn .entryTime {
    text-align: right;
    font-family: 'Montserrat', "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}
.pagePost .mainColumn .entryBody { margin-top: 30px;}
.pagePost .mainColumn .entryBody img { max-width: 100%; height: auto;}

.veu_postList .postList_terms a { padding: 0;}
.pagePost .subColumn .widget h2 {
    color: #5e7aa2;
    border-bottom: solid 2px #5e7aa2;
    letter-spacing: 1px;
    margin-bottom: 25px;
    padding: 8px 0;
    font-size: 1.375rem;
    font-family: 'Montserrat', "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",sans-serif;
}
.pagePost .subColumn .widget ul,
.pagePost .subColumn .widget li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagePost .subColumn .widget ul.localNavi { margin-bottom: 50px;}
.pagePost .subColumn .widget ul.localNavi li a { display: block;}
.pagePost .subColumn .widget li { margin-bottom: 10px;}
.pagePost .subColumn .widget li a:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 15px;
}
.veu_postList ul.postList li { border: none;}

.pagePost .subColumn .widget .postList .postList_terms a:before { content: none;}

.vk_icon_w_r_sns_pocket:before {
    content: "\f265" !important;
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;    
}
.vk_icon_w_r_sns_fb:before {
    content: "\f082" !important;
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;    
}
.vk_icon_w_r_sns_twitter:before {
    content: "\f099" !important;
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;    
}
.vk_icon_w_r_sns_line:before {
    content: "\f3c0" !important;
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;    
}
.vk_icon_w_r_sns_hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold    
}

.pagination ul,
.pagination li { list-style: none; border: none !important; margin: 0; padding: 0;}

.pagination ul {
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 40px 0 !important;
    margin-top: 60px !important;
}
.pagination li {
    display: inline-block;
    padding:0 20px !important;
    font-family: 'Montserrat', "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",sans-serif;    
    font-weight: 500;
    letter-spacing: 0.05em;
}

.pagination li.disabled { color: #cccccc;}

@media screen and (max-width: 767px) {
    .pagePost #ContentsBase .contents { padding-top: 30px;}
    .pagePost #ContentsBase .mainColumn,
    .pagePost #ContentsBase .subColumn{
        float: none;
        width: auto;
        padding: 20px;
    } 
    .pagePost #ContentsBase .mainColumn { margin-bottom: 60px;}
    .pagePost .mainColumn li .category { display: inline-block; width:inherit;}
    .pagePost .mainColumn li .e_title { display: block; margin-bottom: 10px;}
    
}

/*==================================================
  レスポンシブスタイル
==================================================*/

/* 767px以下（スマホ）で適用されるスタイル */
@media screen and (max-width: 767px) {
  .contents { width: auto; margin: auto; padding-left: 0; padding-right: 0; }
  footer .ftel, .openclose .ftel, .accessparts .address .inner .ftel { font-size: 1.875rem; }
  .fnav { display: none; }
  .accessparts .contents, .openclose .contents { width: auto; padding: 60px 20px; }
  .openclose { padding-bottom: 0px; }
  .machi { background-size: 100%; }
  .accessparts .contents { padding: 60px 20px 30px; }
  .accessparts .address { width: auto; margin: auto; padding: 30px; float: none; display: block; }
  .accessparts .contents img { width: 100%; margin: 20px auto 0; }
  .openclose .schedule { padding: 20px; }
  .openclose .schedule dl dt, .openclose .schedule dl dd { display: block; margin: 0; padding: 0; }
  .googlemap { padding: 20px; }
  .openclose .schedule { width: auto; margin: 0 auto; padding: 20px; font-size: 1rem; }
  .pageIndex .mainImg .copy .schedule dl dt, .openclose .schedule dl dd {
    display: block; padding: 0; margin: 0;
  }
  .openclose .schedule dl dt { padding-left: 8px; }
  .openclose .schedule dl dd span { padding: 8px 10px; }
  .openclose .schedule p { font-size: 0.812rem; }
  
  /* トップページのリセット */
  .pageIndex .mainImg .copy { position: inherit; left: inherit; bottom: inherit; margin-top: -35px; }
  .pageIndex .mainImg { width: 90%; padding: 0 15px; }
  .pageIndex .mainImg .copy h2 { margin-bottom: 0px; margin-top: 0; text-align: center; padding: 15px; }
  .pageIndex .mainImg .copy span { font-size: 1rem; }
  .bx-wrapper img, .bx-viewport { height: inherit; }
  .pageIndex .mainImg .copy .schedule { width: auto; margin: 50px auto; padding: 20px; }
  .pageIndex .mainImg .copy .schedule .childtime span { display: none; }
  .pageIndex .informationTopics { width: auto; padding: 0 20px 60px; }
  .pageIndex .informationTopics dl { padding: 10px; margin-bottom: 10px; font-size: 0; width: 94%; }
  .pageIndex .informationTopics dl dt, .pageIndex .informationTopics dl dd { display: inline-block; vertical-align: top; font-size: 1rem; }
  .pageIndex .informationTopics dl dt { width: 50%; }
  .pageIndex .informationTopics dl dd.photo { width: 40%; margin-right: 15px; line-height: 1; font-size: 0; }
  .pageIndex .informationTopics dl dd.photo img { width: 100%; }
  .pageIndex .informationTopics dl dd span.category { left: 0; }
  .pageIndex .informationTopics .scroll { margin-bottom: 30px; }
  .pageIndex .treatment { width: 100%; }
  .pageIndex .treatment .contents { width: auto; margin: auto; padding: 20px 20px 60px; }
  .pageIndex .treatment .internal, .pageIndex .treatment .pediatrics {
    background-position: top; background-size: 100%; padding: 165px 0 30px;
  }
@media screen and (max-width: 767px) {
  /* スケジュールブロックの幅を調整し、左右の余白を設ける */
  .pageIndex .mainImg .copy .schedule {
    width: 90%; /* 親要素の幅の90%に設定 */
    margin: 50px auto; /* 中央寄せ */
    padding: 20px;
    box-sizing: border-box; /* パディングを含めて幅を計算 */
  }

  /* dtとddのレイアウトを調整 */
  .pageIndex .mainImg .copy .schedule dl dt,
  .pageIndex .mainImg .copy .schedule dl dd {
    display: block;
    padding: 0;
    margin: 0;
  }
}
  /* 2つの料金表用のスタイル（重複解消） */
  .openclose.machi .price1 { padding: 20px; font-size: 1rem; }
  .openclose.machi .price1 dl { padding: 10px 0; }
  .openclose.machi .price1 dl dd span { padding: 10px; }

  /* 美容診療ページのレスポンシブ */
  .container-cosme { width: auto; padding: 0 15px; }
  .column-cosme { width: 100%; margin-bottom: 40px; }
  .cosme-item a { display: block; }
  .treatment-content {
    grid-template-columns: 1fr; display: flex; flex-direction: column;
  }
  .image-area { order: 1; }

 

  /* 予約ボタンとモーダルウィンドウ */
  .modal__content { width: 70%; }
  .reserve_btn { top: 25%; }
  .reserve_btn img { width: 80px; height: auto; }

  /* 料金表の改行修正 */
  .detail p { white-space: normal; word-break: break-word; }
  
  /* 料金表2の改行修正 */
  .price-item .detail p { white-space: normal; word-break: break-word; }
}

/* =======================================================
　フレーム
========================================================== */
.contents { margin: 0 auto; padding: 10px 15px;}
.bga {
    background: url(../img/contents/bg.jpg);
}
.machi {
    background: url(../img/footer/bg.png) 100% 100.5% repeat-x;
}

@media screen and (max-width: 767px) {
    .contents { width:auto; margin: auto; padding-left: 0; padding-right: 0;}
}

/* --- page.css の末尾に追加 --- */

/* 料金表・テーブルの視認性向上 */
table, dl.price-list {
  width: 100%;
  border-collapse: collapse;
}

@media screen and (max-width: 767px) {
  /* スマホでテーブルが横スクロールできるようにする（レイアウト崩れ防止） */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 料金表のリスト表示調整 */
  .price-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .price {
    margin-left: 0;
    margin-top: 5px;
    color: #bc9760; /* var(--color-accent) */
    font-weight: bold;
    font-size: 1.1rem;
  }
}