@charset "utf-8";
/* default */

body{
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color:#222;
  line-height: 2em;
  position:relative;
  font-size: 14px;
}
.container{
  max-width: 1230px;
  width:100%;
}
.mincho{
  font-family: "ryo-display-plusn" , 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho' ,serif;
  font-size: 2.2em;
  line-height: 1em;
}
a{
  color: #0097a7;
}
a:hover{
  color: #83bcff;
  text-decoration:none;
}
a:hover img{
  opacity:.8;
}
a:focus{
  outline:none;
  text-decoration:none;
}
::selection {
  color: #fff;
  background: #56b1c3;
}

img{
  max-width: 100%;
  height:auto;
  display:block;
  margin:0 auto;
}
main p{
  font-size:1.1em;
  line-height:2em;
}
ul li{
  list-style-type:none;
  position: relative;
  margin:0 0 .5em;
}
ul li:focus{
  outline-color:transparent;
}
ol{
  counter-reset: my-counter;
  list-style: none;
  margin:0 0 1.3em 2em;
  padding:0;
}
ol li {
  margin-bottom: 1em;
  padding-left: .5em;
  position: relative;
  line-height:1.5em;
}
ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #005284;
  color: #fff;
  display: block;
  position:absolute;
  top:.35em;
  left:-1.8em;
  font-size:.8em;
  line-height: 16px;
  text-align: center;
  height: 16px;
  width: 16px;
  border-radius: 50%;
}
ul{
  padding-left:.5em;
  margin: 1em 0;
}
ul.check-icon li{
  list-style-type:none;
  line-height: 2em;
  position: relative;
  margin:0 0 .5em 1.3em;
  font-size:1.1em;
}
ul.check-icon li:before{
  font-family: 'FontAwesome';
  content: '\f0a9';
  font-size: 1em;
  padding-right:.5em;
  color: #005284;
  position: absolute;
  left: -1.3em;
}
ul.inline li{
  display:inline-block;
  margin-right:2.5em;
}
p{
  margin:0 0 1em;
}
strong{
  font-size:1.1em;
  font-weight:bold;
  color:#56b1c3;
}
hr{
  clear:both;
  margin: 2em 0;
}
h1{
  font-size:2.4em;
}
h2{
  font-size:1.7em;
  border-bottom:4px solid #e7e7e7;
  position:relative;
  padding: .5em .5em 0.5em 0;
  margin: 1.4em 0 0.4em;
  clear:both;
}
h2:after{
  border-bottom: 4px solid #005284;
  content: "";
  position: absolute;
  bottom:-4px;
  left: 0;
  width: 30%;
  margin:0;
}
.contents h2:first-child{
  margin-top:0;
}
h2 .en{
  font-size:.7em;
  margin-left:1em;
}
h2 a{
  float:right;
  font-size:.7em;
}
h3{
  font-size: 1.4em;
  padding:0.5em;
  position:relative;
  margin-top: 1.5em;
  background-color:#cbecf3;
  clear:both;
}
h4{
  font-weight:bold;
  color: #005284;
  font-size:1.2em;
  margin: 1em 0 0;
  line-height:2;
}
h5{
  font-size:1.2em;
  border-left:5px solid #005284;
  padding:0 0 0 .5em;
  margin-top:1.5em;
}
h6{
  color:#56b1c3;
  font-size:1em;
}

.btn,
input[type=submit]{
  position:relative;
  padding:8px 15px;
  /* margin: 1em 1em 2em; */
  transition: all 0.2s;
  background-color:#56b1c3;
  font-size: .9em;
  color:#fff;
}

.btn:hover,
input[type=submit]:hover{
  background-color:#005284;
  color:#fff;
}
a.btn:after{
  font-family:'FontAwesome';
  content:'\f054';
  padding-left:.8em;
  font-size:.8em;
}
table{
  max-width:100%;
  width:100%;
  table-layout: fixed;
  margin: 1em 0;
}
table th{
  text-align:center;
  min-width: 3em;
  background-color:#F3F3F3;
  vertical-align: middle;
  padding: 1em;
  border:1px solid #ddd;
}
table td{
  vertical-align: middle;
  padding: 1em;
  border:1px solid #ddd;
}
table ul{
  padding:0;
}


/* header */
.header-top{
  background-color:#005284;
  height: 22px;
}
.header-top .catch{
  margin:0 auto;
  color:#fff;
  font-size:.8em;
  max-width: 1120px;
  padding:5px 15px;
  line-height:1.1;
}
.header-body{
  position:relative;
  min-height: 175px;
}
.header-body .desc{
  font-size:1.2em;
  font-weight:bold;
  padding:.8em 0;
  margin:0;
  line-height: 1.6em;
}
.header-body .logo,
.header-body .header-info{
  display:inline-block;
  vertical-align:middle;
}
.header-body .header-info p{
  display:inline-block;
  margin: 0 0 0 2.5em;
  width:166px;
  height:64px;
  background:url(../img/header-bg.png) no-repeat 0 0;
  color:#fff;
  text-align:center;
  line-height:2;
  padding-top:8px;
  font-size:.9em;
  letter-spacing:1px;
}
.header-address{
  margin:1em 0;
}
.header-contact{
  width:304px;
  height:198px;
  position:absolute;
  top:-22px;
  right:15px;
  background-color:#fff;
  box-shadow:0px 1px 1px 2px rgba(0,0,0,0.2);
}
.header-contact .tel,
.header-contact .mail{
  float:left;
  padding:0;
  margin:0;
}
.header-contact .hours{
  clear:both;
}
.header-info a i{
  font-size:1.4em;
  vertical-align:middle;
  margin-right:.3em;
}
.header-info a{
  background-color:#2da7f2;
  display:inline-block;
  padding:.6em 3em;
  color:#fff;
  margin-left:13em;
  transition:.4s;
}
.header-info a:hover{
  background-color:#005284;
}
/* end/header */

/* global-menu */
.navbar-default{
  margin:0;
  border:none;
  border-radius:0;
  background-color:#1a83c3;
}
#global-menu{
  padding:0;
  hight:auto;
  max-height:500px;
}
.navbar-default ul.navbar-nav{
  margin:0;
  float:none;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}
.navbar-default ul li{
  margin:0;
  display:block;
  width:14.2%;
}
.navbar-default ul.navbar-nav li a{
  color:#fff;
  padding: 1.2em 0;
  font-weight: bold;
  text-align:center;
  display:block;
  background-color:#1a83c3;
  transition:.4s;
}
.navbar-default ul.navbar-nav li a:hover,
.navbar-default ul.navbar-nav li a:focus,
.navbar-default ul.navbar-nav li a:active{
  background-color:#005284;
  color:#fff;
}
.navbar-default ul.navbar-nav li a .en{
  display:block;
  padding-top:4px;
}
.navbar-nav>li>.dropdown-menu{
  top:99%;
  padding:0;
  left:-1px;
  border: none;
}
.navbar-default ul li .dropdown-menu li{
  width:100%;
}
.navbar-default ul li .dropdown-menu li a{
  text-align:left;
  padding:.9em 1.5em .9em 1em;
  border-bottom:1px solid #0d78b9;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
  background-color:#005284;
  color:#fff;
}
/* end/global-menu */

/* main-visual */
.main-visual{
  background-color:#eee;
}
.main-visual h1{
  margin:0;
  padding:0;
}
.main-visual img{
  width:100%;
  max-width:2000px;
}
.tp-simpleresponsive .caption, .tp-simpleresponsive .tp-caption{
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3)!important;
}
/* end/main-visual */

/* bread */
#bread{
  background-color: #f8f8f8;
}
#bread ol{
  margin: 0 .5em;
  padding:0;
}
#bread li{
  margin:0;
  padding:0;
  line-height:28px;
  font-size:.9em;
  list-style-type:none;
  display:inline-block;
  margin:0 1.8em 0 0;
  line-height:2.6em;
  position:relative;
}
#bread li:before{
  content:none;
}
#bread li:after{
  content: "\f105";
  font-family: FontAwesome;
  position:absolute;
  top:0;
  right:-1.3em;
}
#bread li:last-child:after{
  content:none;
}
#bread li:first-child a{
  position:relative;
  display: block;
  padding-right: 0;
  margin-right: 0;
  position: relative;
  text-decoration: none;
}
#bread li:first-child span{
    display: block;
    padding-right: 0;
    margin-right: 0;
    position: relative;
    text-decoration: none;
    padding-left: 1.6em;
}
#bread li:first-child span:before{
  position:absolute;
  font-size: 1.2em;
  content: "\f015";
  font-family: FontAwesome;
  top: 0;
  left:0;
}
/* end/bread */

/* news */
selection.info{

}
.news-list{
  margin:0 0 2em 0;
  padding:0;
}
.news-list li{
  margin-bottom:1em;
}
.news-list li a{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  color:inherit;
}
.news-list li a:hover{
  color:#0097a7;
}
.news-list li a time{
  color:#0097a7;
  font-weight:700;
  flex-shrink:0;
  line-height:1.5;
}
.news-list li a .category{
  color:#fff;
  background-color: #5ab0c1;
  font-weight:700;
  flex-shrink:0;
  line-height:1.5;
  font-size:13px;
  padding:0.1em 0.25em;
  width:5em;
  text-align:center;
}
.news-list li a p{
  margin:0;
  line-height:1.5;
}
.news-list li h4{
  display:table-cell;
  font-size: 1em;
  font-weight:normal;
  color:#222;
}
.news-list h4 a{
  color:#222;
}
.news-list h4 a:hover{
  color:#0097a7;
}
/* end/news */

/* interview-sheet */
.interview-sheet p{
  margin-bottom:0;
}
/* end/interview-sheet */

/* contents-area */
.contents-area{
  margin: 2em 0 2em;
}
.contents-area .large-banner{
  margin-bottom:3em;
}
.contents-area .large-banner a{
  display:block;
  position:relative;
}
.contents-area .large-banner a:after{
  position: absolute;
  content: " ";
  height:100%;
  width:100%;
  left: 0;
  top: 0;
  transition:.4s;
  border:5px solid #e3e3e3;
}
.contents-area .large-banner a:hover:after{
  border:5px solid #e2695d;
}
.contents-area .large-banner a:hover img{
  opacity:1;
}

/* =========================================
   全体を1つの大きな枠線で囲むデザイン
   ========================================= */

/* ① 外側の大きな枠（ulタグ）の設定 */
.clinic-menu {
  border: 1.5px solid #e5e7eb !important; /* 外側の大きな枠線 */
  border-radius: 20px !important;         /* 外枠用の少し大きめの角丸 */
  padding: 30px !important;               /* 枠の内側にたっぷりと余白を取る */
  background-color: #ffffff !important;   /* ボックスの背景色 */
  
  /* 横並び（2列）の設定はそのまま維持 */
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important; /* バナー同士の隙間 */
}

/* ② 個別のバナー（aタグ）の設定 */
.clinic-menu li a {
  border: none !important; /* ★先ほど設定した個別の枠線を消す */
  border-radius: 12px !important; /* ホバー時のために角丸だけ残す */
  background-color: transparent !important; /* 普段は背景を透明に */
  padding: 15px 10px !important; 
  
  width: 100% !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}


/* ② 今風のデザインを指定（案1: シンプル・クリーン） */
.clinic-menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 上品な薄いグレーの背景 */
  background-color: #f7f9fa !important; 
  
  /* 深いグレーの文字色 */
  color: #333333 !important; 
  
  /* 控えめな角丸 */
  border-radius: 6px !important; 
  
  /* 上下左右の十分な余白 */
  padding: 15px 10px !important; 
  
  /* 洗練されたフォント設定 */
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em; /* 少し文字間を開ける */
  
  /* ホバー時のアニメーション準備 */
  transition: all 0.3s ease !important; 
  
  /* テキストの下線を消す */
  text-decoration: none !important;
}
/* ③ マウスを乗せたとき（ホバー時）の変化 */
.clinic-menu li a:hover {
  background-color: #fffaf7 !important; /* ホバー時だけ、ほんのり薄いオレンジの背景色を敷く */
  transform: translateY(-2px) !important; /* 少しだけ浮き上がる */
}

/* 左側のアイコンの調整 */
.clinic-menu li a i {
  font-size: 32px !important;
  color: #cccccc !important;
  margin-right: 20px !important;
  transition: all 0.3s ease !important;
}

/* ホバー時にアイコンをオレンジにする */
.clinic-menu li a:hover i {
  color: #ff9966 !important;
}
/* ③ ホバー時のアニメーション（マイクロインタラクション） */
.clinic-menu li a:hover {
  /* 薄いブルーに変更（清潔感） */
  background-color: #e6f7ff !important; 
  
  /* ほんの少し上に浮かす（奥行き） */
  transform: translateY(-3px) !important; 
  
  /* 柔らかい影を追加 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; 
}
/* NEWバッジ本体のデザイン */
.badge-new {
  position: absolute !important;
  top: -12px !important;    /* 枠の少し上に飛び出させる */
  left: -12px !important;   /* 枠の少し左に飛び出させる（右が良い場合は right: -12px; に変更） */
  
  background-color: #ff5a5f !important; /* 目を引くコーラルレッド */
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  font-family: Arial, sans-serif !important;
  
  padding: 4px 10px !important;
  border-radius: 20px !important; /* 丸みを強くする */
  letter-spacing: 0.05em !important;
  
  /* バッジ自体にも少し影をつけて立体感を出す */
  box-shadow: 0 3px 6px rgba(255, 90, 95, 0.3) !important; 
  z-index: 10 !important;
}

/* =========================================
   PC表示時の「2個横並び（2カラム）」レイアウト
   ========================================= */
@media screen and (min-width: 769px) {
  .clinic-menu{ 
    display: flex !important;
    flex-wrap: wrap !important;
     /* ★ここが上下左右の隙間を決める魔法のコードです！（例：16px） */
    gap: 16px !important; 
    justify-content: space-between !important; /* 左右に均等配置 */
  }
  
  .clinic-menu li {

    /* 👇 左右の隙間（gap）の半分の数字を引きます（16pxの半分なので 8px ） */
    width: calc(50% - 8px) !important; 
    
    /* gapで上下の隙間も作れるので、marginはゼロにします */
    margin-bottom: 0 !important; 
  }
/* ③ メインタイトルの調整（念のためブロック要素にする） */
.clinic-menu li a .menu-title {
flex-direction: column !important;
  display: block !important;
flex-direction: column !important;  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333333 !important; /* 色は全体のCSSに合わせて上書きされます */
}

/* ④ 追加した説明文（サブテキスト）のデザイン */
.clinic-menu li a .menu-subtext {
  display: block !important;
  font-size: 12px !important; /* メインタイトルより小さくする */
  color: #888888 !important; /* 薄めのグレーで控えめに */
  margin-top: 6px !important; /* メインタイトルとの隙間 */
  font-weight: normal !important; /* 細字にしてメリハリをつける */
  line-height: 1.4 !important;
}

/* ホバー時の説明文の色の変化（パターンAのオレンジ枠線用） */
.clinic-menu li a:hover .menu-subtext {
  color: #ffb38a !important; /* ホバー時は少し明るいオレンジに */
}
}
/* =========================================
   スマホ用の調整（画面幅768px以下）
   ========================================= */

@media screen and (max-width: 768px) {
  .clinic-menu {
        padding: 20px 15px !important; /* スマホでは外枠の余白を少し狭くする */
    display: flex !important;
    flex-wrap: wrap !important;
    
    /* スマホはPCよりさらに狭くします（例：10px） */
    gap: 10px !important; 
    
    justify-content: space-between !important;
  }
  .clinic-menu li {
    /* gapが10pxなので、その半分の 5px を引きます */
    width: calc(50% - 5px) !important; 
    margin-bottom: 0 !important; 
  }
  .clinic-menu li a {
    /* スマホでは文字を少し小さく、余白を詰める */
    font-size: 14px !important;
    padding: 20px !important;
  }
}
/* =========================================
   クリニック挨拶セクション
   ========================================= */

/* セクション全体の余白設定 */
.modern-clinic-intro {
  padding: 80px 5%; /* 上下にたっぷり余白、左右は5% */
  background-color: #fcfcfc; /* 真っ白ではなく、ごく薄いグレーで上品に */
}

/* FlexboxでPCは横並びにする */
.modern-clinic-intro .intro-inner {
  max-width: 1100px; /* 広がりすぎないように最大幅を固定 */
  margin: 0 auto;    /* 画面の中央に配置 */
  display: flex;     /* ここが横並びの魔法！ */
  align-items: center; /* 縦の中央で揃える */
  gap: 60px;         /* 画像とテキストの間に大きな隙間を開ける */
}

/* 左側：画像のスタイル */
.modern-clinic-intro .intro-image-box {
  flex: 1; /* 横幅を均等（50%）にする */
}
.modern-clinic-intro .intro-image-box img {
  width: 100%;
  height: auto;
  border-radius: 24px; /* トーチクリニック風の大きめの角丸 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* ほんのり浮き出る影 */
  object-fit: cover;
  aspect-ratio: 4 / 3; /* 画像を綺麗な比率に自動トリミング */
}

/* 右側：テキストのスタイル */
.modern-clinic-intro .intro-text-box {
  flex: 1; /* 横幅を均等（50%）にする */
}

/* サブタイトル（英語） */
.modern-clinic-intro .sub-title {
  display: block;
  font-size: 14px;
  color: #ff9966; /* テーマカラーのオレンジ */
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

/* メインタイトル */
.modern-clinic-intro .main-title {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 24px;
}

/* 説明文 */
.modern-clinic-intro .description {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 40px;
}

/* ボタン */
.modern-clinic-intro .btn-more {
display: flex;          /* inline-flex から flex に変更 */
  width: fit-content;     /* ボタンの幅を文字の長さにぴったり合わせる（必須） */
  margin: 0 auto;         /* 左右の余白を自動計算して「中央揃え」にする魔法のコード */
  justify-content: center;/* 中の文字とアイコンを中央に配置 */
  align-items: center;
  padding: 16px 32px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 40px; /* 完全に丸いボタン */
  transition: all 0.3s ease;
}

/* ボタンの中の矢印アイコンの余白 */
.modern-clinic-intro .btn-more i {
  margin-left: 15px;
  color: #ff9966;
  font-size: 18px;
  transition: transform 0.3s ease; /* アニメーションの準備 */
}

/* ボタンをホバー（マウスを乗せた）した時のアクション */
.modern-clinic-intro .btn-more:hover {
  border-color: #ff9966;
  background-color: #fffaf7; /* ほんのりオレンジに */
  color: #ff9966;
}
.modern-clinic-intro .btn-more:hover i {
  transform: translateX(5px); /* 矢印が右にスッと動く */
}

/* =========================================
   スマホ表示（画面幅768px以下）の調整
   ========================================= */
@media screen and (max-width: 768px) {
  .modern-clinic-intro {
    padding: 50px 5%; /* スマホは少し余白を減らす */
  }
  
  .modern-clinic-intro .intro-inner {
    flex-direction: column; /* 縦並びに変更！ */
    gap: 30px; /* 画像とテキストの隙間を狭くする */
  }
  
  .modern-clinic-intro .main-title {
    font-size: 24px; /* タイトルを少し小さく */
  }
  
  .modern-clinic-intro .description {
    font-size: 15px;
  }
  
  .modern-clinic-intro .btn-more {
    width: 100%; /* スマホではボタンを横幅いっぱいに */
    justify-content: center;
  }
}

/* end/contents-area */

/* sidebar */
.right-contents a img{
  margin-bottom: 1em;
  width:100%;
}
.right-contents h3{
  margin:0;
  padding:.7em .5em .7em .8em;
  background-color:#005284;
  color:#fff;
  font-size:1.1em;
}
.right-contents ul.side-menu{
  border:1px solid #aaa;
  margin:0 0 1.4em 0;
  padding:0;
}
.right-contents ul.side-menu li{
  margin:0;
}
.right-contents ul.side-menu li a{
  display:block;
  border-bottom:1px solid #aaa;
  margin:0;
  padding:.3em .5em .3em 1.8em;
  position:relative;
}
.right-contents ul.side-menu li a:before{
  position:absolute;
  font-family:'FontAwesome';
  content:'\f054';
  font-size:.8em;
  top:.4em;
  left:1em;
}
.right-contents ul.side-menu li:last-child a{
  border:none;
}
.right-contents ul.flex-banner{
  padding:0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
  margin: 0;
}
.right-contents ul.flex-banner.banner-border img{
  border:1px solid #ddd;
  transition:.4s;
}
.right-contents ul.flex-banner.banner-border a:hover img{
  border:1px solid #005284;
}
/* end/sidebar */

/* footer */
footer{
  background-color:#f8f8f8;
}
.footer-top{
  padding-top:4.4em;
}
.footer-top .logo img{
  display:inline-block;
  background-color:#fff;
  padding:.8em 1.2em;
}
.footer-top .tel{
  margin-top:2em;
  padding-left:.5em;
}
.footer-top .tel a{
  font-size: 2.7em;
  font-weight:700;
  letter-spacing:4px;
  color:#005284;
}
.footer-top .address{
  margin-top:2em;
}
.footer-top table{
  margin-bottom:.5em;
}
.footer-top table th,
.footer-top table td{
  padding:1em .3em;
  text-align:center;
}
.footer-top table .hour{
  width:8em;
}
.footer-top table th{
  background-color:#94b6dc;
  color:#fff;
}
.footer-body{
  padding:2.4em 0;
}
.footer-body ul li a{
  color:#222;
  position:relative;
  display:block;
  padding-left:1em;
  transition:.4s;
}
.footer-body ul li a:hover{
  color:#0097a7;
  text-decoration:underline;
}
.footer-body ul li a:before{
  position:absolute;
  font-family:'FontAwesome';
  content:'\f054';
  font-size:.8em;
  top:0;
  left:0;
}
.footer-body ul li a:hover:before{
  left:.2em;
}
.footer-bottom{
  text-align:center;
  padding: .5em 0 2.5em;
  background-color:#005284;
  color:#fff;
}
.footer-bottom ul{
  padding:0;
  clear:both;
}
.footer-bottom li{
  display:inline-block;
}
.footer-bottom .f-menu{
  margin:1.5em 0;
}
.f-menu a{
  color:#fff;
}
.f-menu a:hover{
  color:#0097a7;
}
.footer-bottom .f-menu li{
  border-right:1px solid #fff;
  font-size:0.9em;
  margin-left:2em;
  padding-right:2em;
  transition:0.8s;
  line-height:1.2em;
}
.footer-bottom .f-menu li:last-child{
  border-right:none;
  padding-right:0;
}
.footer-bottom .f-menu li:first-child{
  margin-left:0;
}
.footer-bottom small{
  letter-spacing:1px;
}
/* end/footer */

.page-title{
  position:relative;
  padding: 80px 0 80px;
  text-align:center;
  background-repeat: no-repeat;
  background-position: center 0;
  background-attachment: fixed;
  -webkit-background-size: 100% auto;
  background-size: 130%;
}
.concept .page-title,
.clinic .page-title,
.staff .page-title,
.introduction .page-title,
.hours .page-title,
.price .page-title,
.access .page-title,
.faq .page-title,
.job .page-title{
  background-image: url(../img/title-clinic.jpg);
}
.services .page-title {
  background-image: url(../img/title-sem.jpg);
}
.page-title,
.about .page-title,
.ivf .page-title,
.icsi .page-title,
.coordinator .page-title,
.time-lapse .page-title,
.male-infertility .page-title,
.counseling .page-title{
  background-image: url(../img/title-services.jpg);
}
.contact .page-title,
.news .page-title,
.reservation .page-title{
  background-image: url(../img/title-info.jpg);
}
.page-title h1{
    background-color: rgba(255, 255, 255, 0.41);
    color:#000;
    margin:0 auto;
    padding: 0.5em 1em;
    display:inline-block;
    font-size: 2.4em;
}
/* acMenu */
#acMenu{
  margin-top:3em;
}
#acMenu dd{
  display:none;
}
#acMenu dt{
  background-color:#f3f3f3;
  border:1px solid #aaa;
  padding:.5em 1em .5em 2.2em;
  font-size:1.1em;
  font-weight:normal;
  position:relative;
  margin-bottom:1.5em;
  cursor:pointer;
}
#acMenu dt:hover{
  background-color: #B3DFF6;
}
#acMenu dd{
  background-color:#fff;
  border:1px solid #aaa;
  border-top:none;
  padding:.8em 1em .8em 3.6em;
  font-size:1em;
  position:relative;
  margin-bottom:1.5em;
  margin-top:-1.8em;
  line-height: 2em;
}
#acMenu dd h4{
  margin:0 0 .3em 0;
  font-weight:no;
}
#acMenu dt:before{
  position: absolute;
  left: .5em;
  top:0.4em;
  font-family:'Glyphicons Halflings';
  content: "\e224";
  color: #ec548c;
  font-size:1.1em;
}
#acMenu dd:before{
  position: absolute;
  left: 1.6em;
  top:.7em;
  font-size:1.2em;
  font-family:'Glyphicons Halflings';
  content: "\270f";
  color: #005284;
}
/* end/acMenu */
/* lightbox */
.thumbnails{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
  margin:0;
  padding:0;
}
.thumbnails li{
  width:32%;
  border:1px solid #ddd;
  border-radius:5px;
  margin-bottom:2em;
}
.thumbnails li a{
  padding:1em;
  border:none;
  margin-bottom:0;
}
.thumbnails li h3{
  margin:.5em 0 0;
  font-weight:bold;
  background:none;
  padding:.3em 0;
}
.thumbnails li p{
  font-size:.9em;
  line-height:1.6;
}
/* end/lightbox */
.staff-area{
  margin-bottom:2em;
}
.staff-area .col-sm-4 img{
  width:100%;
  max-width:300px;
  margin-bottom:.5em;
}

.staff-area h3{
  color:#005284;
  font-size:1.3em;
  margin:0 0 .2em 0;
}
.staff-area h4{
  margin:0;
}
.staff-area p{
  line-height:1.6;
}
.btn.btn-lg{
  background-color:#005284;
  color:#fff;
  border:none;
  font-size:1.2em;
  padding:1em 1.5em;
  margin:1em 0 2em;
}
.btn.btn-lg:hover{
  background-color:#56b1c3;
}
.at-link{
  display:inline;
  margin:0 5px;
}
/* page-menu */
.page-menu{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
  margin: 3em 0 0 0;
  padding:0;
}
.page-menu li{
  width:48%;
}
.page-menu li a{
  display:block;
  margin-bottom:1.2em;
  position:relative;
}
.page-menu li a .col-xs-3{
  padding-right:0;
}
.page-menu li a .col-xs-9{
  padding-left:.7em;
}
.page-menu li a h3{
  background:none;
  border:none;
  color:#005284;
  font-weight:bold;
  font-size:1.2em;
  padding:1px 0 .3em;
  margin:0;
}
.page-menu li a p{
  color:#333;
  font-size:.9em;
  line-height:1.6;
}
.page-menu li a:hover p{
  color:#0097a7;
}
/* end/page-menu */
.staff main h2{
  margin-bottom:1.5em;
}
.staff main hr{
  margin-bottom:3.5em;
  border-top:2px dotted #ddd;
}
iframe{
  width:100%;
}
.news .text-center{
  margin-top:2em;
}
.detailUpfile{
  margin:1em auto;
}
#newsList{
  margin:0;
}
#newsList h3:first-child{
  margin-top:0;
}
#newsList h3{
  background:none;
  padding:0;
}
#newsList h3 a{
  display:block;
  background-color:#cbecf3;
  padding:0.5em;
  transition:.4s;
}
#newsList h3 a:hover{
  color:#fff;
  background-color:#005284;
}
#newsList li{
  margin:0 0 2em 0;
}
/* Pager style */
.pager{
  text-align:center;
  padding:10px;
  clear:both;
}
.pager a{
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #333;
    font-size: 14px;
    padding: 2px 7px 2px;
    text-decoration: none;
  margin:0 2px;
  transition:.4s;
}
.pager a.current{
    background: #005284;
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    font-size: 14px;
    padding: 2px 7px 2px;
  margin:0 2px;
    text-decoration: none;
}
.pager a:hover{
    background:#005284;
    color: #fff;
}
.overPagerPattern{
  padding:0 2px ;
}
/* /Pager style */
.Basis_t{
  table-layout:auto;
}
.style3{
  color:#e06b6b;
}
.well p:last-child{
  margin-bottom:0;
}
.well h4{
  margin-top:0;
}
.require{
  color:red;
}
.hours-table{
  text-align:center;
}
.hours-table th,
.hours-table td{
  padding:1em .3em;
}
.hour{
  width: 8em;
  text-align:center;
}
h3 .small{
  line-height:150%;
}
h3 + table{
  margin-top:-.75em;
}
.tanto-table th,
.tanto-table td{
  padding:1em .3em;
  line-height:1.6;
}
.tanto-table .week{
  width: 3em;
  background-color:#f3f3f3;
  text-align:center;
}
.tanto-table .small{
  font-size:.8em;
  display:block;
  line-height: 1;
  margin-bottom:.5em;
}
.price-table{
  table-layout: auto;
}
.price-table th,
.price-table td{
  padding:1em .5em;
  line-height:1.6;
}
.price-table th{
  text-align:left;
}
.price-table .money{
  text-align:right;

}
.price-table .number{
  text-align:right;
  min-width:6em;
}

/*==料金表===*/

.price-table02{
  table-layout: auto;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff !important;
}
.price-table02 th,
.price-table02 td{
  padding:1em .5em;
  line-height:1.6;
}

.price-table02 th{
  text-align:left;
  background-color: #ffebed;
}

.price-table02 .money02{
  text-align:right;
  background-color: #f5f5f5;
  color:#ff99a5;
  font-weight: bold;
}

.price-table02 .number{
  text-align:right;
  min-width:6em;
  background-color: #ffebed;
}



.check-icon.tekio{
  margin:0;
}
.check-icon.tekio li{
  line-height:1.5;
}
p.small{
  line-height:1.5;
}
main .pull-right.img,
main .text-center.img{
  color:#808080;
  margin-bottom:1em;
}
main .pull-right.img{
  margin-left:.5em;
}
.kenbikyo-img{
  width:30%;
  padding:.5em;
}
#mailformpro .btn{
  text-shadow:none;
  background: #56b1c3;
  border: none;
}
#mailformpro .btn:hover{
  box-shadow:none;
  background: #005284;
}
input[type=checkbox], input[type=radio]{
  margin:5px 0;
}
#text-area{
  width:100%!important;
  min-height:10em;
}
img.img-circle{
  border:10px solid #e4f4f7;
}
.x-large{
  margin:1em 0;
  font-size:2em;
  font-weight:bold;
  color:#005284;
}
.lead{
  margin:1em 0;
  font-size:1.5em;
  font-weight:bold;
  color:#005284;
}
.movie{
  width:57%;
  height:219px;
  line-height:219px;
  font-size:2em;
  text-align:center;
  background-color:#eee;
}
a[href^="tel"]{
  cursor:default;
}
a[href^="tel"]:hover img{
  opacity:1;
}
#up_ymd{
  text-align:right;
}
#detail *{
  font-size:1em!important;
}
.style4 {
  color: #FF0000
}
.top_menu{
  margin: 3em 0 2em 0;
  font-size:1.2em;
}
.top_menu li{
  border-bottom:1px dotted #999;
  line-height:1.5em;
  padding:1em 10em 1em 0;
  position:relative;
  min-height:3em;
  margin:0;
  font-weight:bold;
  color:#005284;
}
.top_menu li:first-child{
  border-top:1px dotted #999;
}
.top_menu li a{
  display:block;
  text-align:center;
  width:11em;
  position:absolute;
  right:0;
  top:50%;
  margin-top:-20px;
  font-size: 0.8em;
}
@media (max-width: 640px){
  .top_menu{
    font-size:1em;
  }
  .top_menu li{
    padding:1em 11em 1em 0;
  }
  .top_menu li a{
    margin-top:-17px;
  }
}
.price-table.era{
  max-width:600px;
  margin:0 auto;
}
.price-table.era th{
  text-align:center;
}
.price-table.era th,
.price-table.era td{
  padding:0.5em 1em;
}
.study_img{
  max-width:320px;
}
@media (max-width: 1000px){
  .study_img{
    max-width:480px;
    margin:1em auto!important;
  }
}
@media (min-width: 768px){
  .sp-only{
    display:none;
  }
}
.sp_bnr{
  margin-top:2em;
}
@media (max-width: 767px){
  .pc-only{
    display:none;
  }
}
.btn-group{
  margin-bottom:2rem;
}
.btn-group .btn{
  background-color:#999;
}
.btn-group .btn:hover{
  background-color:#005284;
}
.btn-group .active_btn{
  background-color:#56b1c3;
  box-shadow:none;
  color:#fff;
  pointer-events:none;
}
.hoken{
  border:1px solid #005284;
  padding:2rem;
  margin:2rem 0 3rem;
  background-color:#e1faff;
}
.hoken h2{
  border:none;
  display:flex;
  justify-content: center;
  margin:0 0 0.5em;
  padding:0;
  color:#005284;
  font-weight:bold;
  font-size:2rem;
}
.hoken h2::after{
  content:none;
}
.hoken p{
  text-align:center;
  line-height:1.5;
}
@media screen and (max-width: 640px) {
  .hoken p{
    text-align:left;
  }
  .hoken p br{
    display:none;
  }
}

.step_flow{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin:2rem -2rem 4rem 0;
  padding:0;
}
.x-large.step{
  text-align:center;
  line-height:1.5;
}
.step_flow li{
  width:33.33%;
  padding-right:2rem;
  max-width:220px;
}
.step_flow li a{
  width:100%;
  aspect-ratio: 1 / 1;
  background-color:#f4fdff;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transition:.2s;
  border:4px solid #f4fdff;
}
.step_flow li a .num{
  font-weight:bold;
  color:#0097a7;
  font-size:16px;
  margin-top:1em;
}
.step_flow li a h3{
  margin:0;
  color:#0097a7;
  background:none;
  font-weight:bold;
}
.step_flow li a p{
  color:#222;
  padding:0 15%;
  line-height:1.5;
  min-height:3em;
}
.step_flow li.active a{
  border:4px solid #5ab0c1;
  pointer-events:none;
}
.step_flow li.active a .num{
  font-weight:bold;
  font-size:16px;
  margin-top:1em;
}
.step_flow li.active a h3{
  margin:0;
  background:none;
  font-weight:bold;
}
.step_flow li.active a p{
  color:#222;
  padding:0 15%;
  line-height:1.5;
  min-height:3em;
}
.step_flow li a:hover{
  background-color:#cef6ff;
  transform:translateY(-2px);
}
@media screen and (max-width: 768px) {
  .step_flow{
    margin:2rem 0 2rem 0;
  }
  .step_flow li{
    width:46%;
    max-width:200px;
    margin:1rem 0.5rem;
    padding-right:0;
  }
  .step_flow li a .num{
    font-size:14px;
  }
  .step_flow li a h3{
    font-size:14px;
  }
  .step_flow li a p{
    font-size:12px;
  }
  .x-large.step{
    text-align:left;
  }
}
.tit .num{
  font-size:72px;
  font-weight:bold;
  line-height:1;
  color:#ccecf2;
}
.tit h3{
  margin:0 0 0.5em;
  background-color:#5ab0c1;
  font-weight:bold;
  color:#fff;
}
.step_area .text-center{
  margin-top:4rem;
}
.step_area .text-center a{
  font-size:16px;
}
.step_area.step02 .step_item{
  border:1px solid #5eafbf;
  background-color:#f6feff;
  padding:1em;
  margin:4rem 0 6rem;
  position:relative;
}
.step_area.step02 .step_item::after{
  content:'';
  position:absolute;
  border-top: 25px solid #ccecf2;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid transparent;
  left:50%;
  bottom:-68px;
  margin-left:-25px;
}
.step_area.step02 .step_item.hantei::after{
  content:none;
}
.step_area.step02 .step_item.hantei{
  border:1px solid #bf5e5e;
  background-color:#fff6f6;
}
.step_area.step02 .step_item.hantei h4{
  color:#e46565;
  text-align:center;
}
.step_area.step02 .step_item h4{
  margin-top:0;
}
.step_area.step02 .step_item p{
  margin-bottom:0;
}
.step_area.step03 .step_item{
  border:1px solid #5eafbf;
  background-color:#f6feff;
  padding:1em;
  margin:4rem 0 6rem;
  position:relative;
}
.step_area.step03 .step_item::after{
  content:'';
  position:absolute;
  border-top: 25px solid #ccecf2;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid transparent;
  left:50%;
  bottom:-68px;
  margin-left:-25px;
}
.step_area.step03 .step_item.hantei::after{
  content:none;
}
.step_area.step03 .step_item.hantei{
  border:1px solid #bf5e5e;
  background-color:#fff6f6;
}
.step_area.step03 .step_item.hantei h4{
  color:#e46565;
}
.step_area.step03 .step_item h4{
  margin-top:0;
}
.step_area.step03 .step_item p{
  margin-bottom:0;
}
.art_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom:4rem;
}
.art_area h3{
  width:100%;
}
.art_area > p{
  width:100%;
}
.art_area .item{
  width:calc(50% - 2rem);
}
.art_area .item img{
  max-width:200px;
}
@media screen and (max-width: 640px) {
  .art_area .item{
    width:100%;
    margin-bottom:2rem;
  }
}
.step_item{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.step_item > h4,
.step_item > p{
  width:100%;
}
.step_item .img{
  width:184px;
}
.step_item .txt{
  width:calc(100% - 200px);
}
@media screen and (max-width: 640px) {
  .step_item .img{
    width:100%;
  }
  .step_item .img img{
    width:184px;
    margin:2rem auto 0;
  }
  .step_item .txt{
    width:100%;
  }
}
.art_price_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom:3rem;
}
.art_price_area p{
  line-height:1.5;
}
.art_price_area .left,
.art_price_area .right{
  width:calc(50% - 10px);
}
@media screen and (max-width: 960px) {
  .art_price_area .left,
  .art_price_area .right{
    width:100%;
  }
}
.note{
  background-color:#f3fdff;
  padding:2em 1.5em;
  border:1px solid #085281;
  border-radius:10px;
}
.note h3{
  margin-top:0;
}
.note ul{
  margin:0;
}
.note ul li{
  position:relative;
  margin:0 0 0.5em;
  padding:0 0 0 0.75em;
  line-height:1.5;
}
.note ul li small{
  display:inline-block;
}
.note ul li::before{
  content:'';
  width:4px;
  height:4px;
  position:absolute;
  border-radius:50%;
  top:0.6em;
  left:0;
  background-color:#085281;
}
.greeting{
  margin-bottom:4rem;
}
.greeting_tit{
  margin-top:0;
}
/* =========================================
   スライダー上部のグレーの余白を消す
   ========================================= */

/* スライダーの大枠の上下余白を強制的にゼロにする */
.splide {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* スライダー内のリスト（ulタグ）が持つブラウザ初期の余白を消す */
.splide__list {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* =========================================
   PC表示時のスライダーの高さ調整（画面幅769px以上）
   ========================================= */
@media screen and (min-width: 769px) {
  /* スライダーの枠の高さを指定する */
  .splide__track {
    /* ここをお好みの高さに調整してください（例：400px, 500px など） */
  height: 60vh;
}

  /* 各スライドの高さを枠に合わせる */
  .splide__slide {
    height: 100% !important; /* ←ここにも!importantを追加！ */
  }

  /* 画像が潰れないように設定する（必須） */
  .splide__slide img {
    width: 100%;
    height: 100%;
    /* 縦横比を維持したまま、指定した高さ（450px）に合わせて上下をカットする */
    object-fit: cover !important;
    /* 画像の中心を基準に表示させる */
    object-position: center center !important;
  }
.slide-text h2 {
    font-size: 40px !important;
  margin-bottom: 10px;
}
.slide-text h1 {
    font-size: 40px !important;
  margin-bottom: 10px;
}
.slide-text h3 {
    font-size: 40px !important;
  margin-bottom: 10px;
}
.slide-text p {
    font-size: 30px !important; /* PC向けの大きさに変更してください */
  }
}
/* =========================================
   スライダー上のテキスト配置設定
   ========================================= */

/* ① 基準点を作る（必須） */

.splide__slide {
  position: relative; /* 子要素の絶対配置の基準になる */
}

/* ② 画像の設定（おまけ） */
.splide__slide img {
  width: 100%;
  height: 100%; /* フルハイトにする場合などに必要 */
  object-fit: cover; /* 画像の縦横比を保ちつつ枠いっぱいに広げる */
}

/* ③ テキストを浮かせて中央に配置（必須） */
.slide-text {
  position: absolute; /* 画像の上に浮かす */
  top: 50%;           /* 上から50%の位置 */
  left: 50%;          /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 要素の中心をど真ん中に合わせる魔法のコード */

  /* 以下はデザインの調整 */
  width: 90%;         /* スマホで横幅がいっぱいにならないように制限 */
  text-align: center; /* 文字を中央揃え */
  color: #ffffff;     /* 文字色を白に */

  /* 白い文字が明るい画像と同化しないように影をつける（おすすめ） */
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
}

/* =========================================
   スマートフォン表示時のフル画面（フルハイト）設定
   ========================================= */
@media screen and (max-width: 768px) {

  /* スライダー全体の高さを画面ぴったりにする */
  .splide {
    height: 70svh !important; /* 古いブラウザ用の予備 */
    /* 👇 dvh から svh に書き換えます！ */
    height: 70svh !important;
  }

  /* スライダーの内側のトラック（枠）も高さを100%にする */
  .splide__track {
    height: 100% !important;
  }

  /* 各スライド（li要素）の高さを100%にし、相対配置の基準にする */
  .splide__slide {
    height: 100% !important;
    position: relative;
  }

  /* スライダー内の画像を枠いっぱいに広げる */
  .splide__slide img {
    width: 100% !important;
    height: 100% !important;
    /* ★超重要：画像の縦横比を保ったまま、隙間なく敷き詰める（トリミングされる） */
    object-fit: cover;
    /* 画像を表示させる中心位置（お好みで center top などに調整可能） */
object-position: 8% center;
  }
/* 見出しのデザイン調整 */
.slide-text h1 {
  font-size: 24px!important;
  margin-bottom: 10px;
}
.slide-text p {
  font-size: 18px　!important; /* 好きな大きさに変更してください */
  line-height: 1.6; /* 行間（読みやすさの調整） */
  margin-top: 10px; /* 上の見出し(h2)との隙間 */
}
  }

/* 下に回り込ませた元右カラムの要素に上の余白を作る */
.col-sm-6, .col-sm-4, .col-sm-3 {
  margin-top: 30px !important; /* お好みの隙間の広さに調整してください */
}