@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/earlyaccess/sawarabimincho.css');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

/* --------------------------------
 * base
 * -------------------------------- */
* {
  box-sizing: border-box;
}

body{
	font-family:"Zen Kaku Gothic New", "Noto Sans JP","Montserrat", sans-serif;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	color: #222222;
	letter-spacing: 0.1em;
}

a {
  color: #222;
  text-decoration: none;
}

a:hover {
	text-decoration: none;
	}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.2rem;
}

/* h1見出しのフォント指定 */
h1 {
	color: #222;
}

h2 {
	color: #222222;
	font-family:"Zen Kaku Gothic New", sans-serif;
	line-height: 150%;
}

h3 {
	font-family:"Zen Kaku Gothic New","Montserrat", sans-serif;
	color: #222222;
}

.text-blue {
  color: #0085d7 !important;
}

.bg-blue,
.badge-primary {
  background-color: #23C0FF !important;
}


.bg-mintblue {
	background-color: #64CDFF !important;
  }

.bg-rcolor {
  background-color: #FFE624 !important;
}

.bg-beige {
	background-color: #CFBD9F !important;
  }

.text-darkblue {
	color: #18546e !important;
  }

.bg-lightblue {
  background-color: #f6fafb !important;
}

.bg-pink {
  background-color: #31BCC2 !important;
}

.bg-bgray {
	background-color: #c9c7b8 !important;
  }

.bg-footer {
	background-color: #F6FAFB !important;
  }
  

.bg-lightgray {
  background-color: #f5f5f5 !important;
}

.bg-navber {
	background-color: rgba(240, 248, 255, 0.92) !important;
  }
  

.bg-flightgray {
	background-color: #F6F8FB !important;
  }

.border-blue {
  border-color: #B2C2E1 !important;
}

.border-gray {
	border-color: #cccccc !important;
  }

.border-top {
	border-width: 2px !important;
 }

 .footer-line {
	border-width: 5px !important;
	border-color: #cccccc !important;
  }

  .border-fgray {
	border-width: 1px !important;
	border-color: #cccccc !important;
  }

p {
	line-height: 1.7;
}

ol li {
  padding-top:5px;
  padding-bottom:5px;
}

.tel {
	font-family: "Lato", sans-serif;
	font-weight: 700;
	line-height: 1.6rem;
  }

.tel-link {
    color: white; /* テキストの色を白に設定 */
}

.tel-ulink {
    color: #36588C;
}

 .hours {
	font-family: "Open Sans", "Zen Kaku Gothic New", sans-serif;
	line-height: 1.6rem;
  }

  html { scroll-behavior: smooth;}
  

  hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
  }
  
  /* 実線 */
  .hr1 {
	border-top: 1px solid #aaa;
  }
  
  .hr2 {
	border-top: 2px dotted #cccccc;
  }
  
  .hr3 {
	border-top: 2px solid orange;
	background-color: rgb(232, 243, 131);
  }

  
/*タイトル系*/
.subtitle01,.subtitle02 {
	float: left;
	width: 100%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	color:#222222;
	font-weight: normal;
	font-family: "Roboto Slab", serif;
	font-size: 1.5em;
	line-height: 1.5em;
	letter-spacing: 0.15em;
}
.subtitle01 span,.subtitle02 span {
	width: 100%;
	font-weight: normal;
	font-family: "Roboto Slab", serif;
	line-height: 1em;
	display: inline-block;
	margin-top: 10px;
}


.catch {
	float: left;
	width: 100%;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	color:#222222;
	font-weight: normal;
	font-family: "Roboto Slab", serif;
	font-size: 1.5em;
	line-height: 150%;
	letter-spacing: 0.15em;
}
.catch span {
	width: 100%;
	font-weight: normal;
	font-family: serif;
	line-height: 1em;
	display: inline-block;
	margin-top: 10px;
}


.subtitle02 {
	text-align:center;
	margin-bottom:40px;
}
.subtitle02 span {
	margin-top: 5px;
}
.subtitle03 {
	float: left;
	width: 100%;
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.8em;
	letter-spacing: 0.15em;
}
.subtitle04 {
	float: left;
	width: 100%;
	margin-bottom: 30px;
	font-size: 19px;
	font-weight: normal;
	line-height: 1.8em;
	letter-spacing: 0.15em;
	text-align:center;
}
.subtitle05 {
	float: left;
	width: 100%;
	margin-bottom: 22px;
	font-size: 19px;
	font-weight: normal;
	line-height: 1.6em;
	letter-spacing: 0.15em;
}
.subtitle05 span {
	font-size: 10px;
	font-weight: normal;
	color: #4CBFF2;
	font-family: "Roboto Slab", serif;
	line-height: 1em;
	display: inline-block;
	margin-top: 10px;
	margin-left:10px;
}


.title {
	display: inline-block;
	margin-right: 1rem;
	border-bottom: 2px solid #111111;
  }
  
  .b-title {
	display: inline-block;
	margin-right: 1rem;
	border-bottom: 2px solid #111111;
  }


  .komidashi {
	font-family:"Noto Sans JP","Montserrat", sans-serif;
	margin-top: 1.5em;
	padding: 0.1em 1em;/*文字の上下 左右の余白*/
	color: #222;/*文字色*/
	background: #ffffff;/*背景色*/
	border-left: solid 4px #18546e;/*左線*/
}

/* --------------------------------------------------
    ファーストビュー
-------------------------------------------------- */
.header {
  height: 100vh;
}

.header .jumbotron {
  background-image: url("../img/hero-pc-s.jpg");
  background-size: cover;
  background-position: center top;
  position: relative;
  height: 88%;
  margin-bottom: 0;
}

/* nav
-------------------------------------------------- */
nav.fixed {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

/*    キービジュアル
-------------------------------------------------- */
/*下層ページ*/
.under-layer .jumbotron {
  background-image: url("../img/hero-pc-s.jpg");
  background-size: cover;
  background-position: center top;
  margin-bottom: 0;
}

/* --------------------------------------------------
    メイン
-------------------------------------------------- */

/*    トップページ
-------------------------------------------------- */
.fatures h3 span {
  font-family: "Open Sans", sans-serif;
  margin-right: 1rem;
  color: #555555;
  border-bottom: 4px solid #111111;
}

.fatures h4 span {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	margin-right: 1rem;
	color: #ccc;
	border-bottom: 5px solid #cccccc;
  }
/*    院内紹介
-------------------------------------------------- */
figcaption {
  padding-left: 1rem;
  border-left: 3px solid #6b90db;
}

/*    ボタン
-------------------------------------------------- */
.btn,
a.btn,
button.btn {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.1;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border {
  border-radius: 1;
  border: 2px solid #D3E8F8;
  background: #fff;
}

a.btn-border:hover {
  color: #fff;
  background: #D3E8F8;
}


a.btn_02 {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	width: 85%;
	margin: auto;
	padding: 1rem 2rem;
	font-weight: bold;
	border: 1px solid #27acd9;
	background: #27acd9;
	color: #fff;
	transition: 0.5s;
}
a.btn_02:hover {
	color: #27acd9;
	background: #fff;
}



.button-pulse {
	display: inline-block;
	padding: 0.4em 1.6em;
	font-size: 0.8em;
	color: #00b5ad;
	text-decoration: none;
	user-select: none;
	border: 1px #00b5ad solid;
  }
  
  .button-pulse:hover {
	animation: pulse 1s;
  }
  
  @keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 181, 173, 0.6); }
	100% { box-shadow: 0 0 0 1.2em rgba(0, 0, 0, 0); }
  }
a.btn_bg {
	display: flex;
    justify-content: space-between;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 80%;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background: #eee;
	color: #18546e;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
}
a.btn_bg::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	right: 1em;
	transform: translateY(calc(-50% - 2px)) rotate(45deg);
	width: 10px;
	height: 1px;
	background: #27acd9;
}
a.btn_bg::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	width: 50px;
	height: 1px;
	background-color: #27acd9;
}
a.btn_bg:hover {
	background: #d4eef7;
	color: #27acd9;
}


a.btn_13 {
	display: flex;
    justify-content: space-between;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 80%;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background: #eee;
	color: #27acd9;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
}
a.btn_13::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	right: 1em;
	transform: translateY(calc(-50% - 2px)) rotate(45deg);
	width: 10px;
	height: 1px;
	background: #27acd9;
}
a.btn_13::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	width: 50px;
	height: 1px;
	background-color: #27acd9;
}
a.btn_13:hover {
	background: #d4eef7;
	color: #27acd9;
}

/* --------------------------------------------------
    配下ページ
-------------------------------------------------- */

/*   チャート
-------------------------------------------------- */
.flow > li .flow-icon {
	font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  line-height: 50px;
  width: 50px;
  color: #fff;
  background-color: #6b90db;
  margin: 0 auto 20px;
  display: block;
  text-align: center;
  position: relative;
  letter-spacing: 2px;
}

.flow > li .flow-icon::before {
  content: "";
  border: solid transparent;
  border-width: 8px;
  border-top-color: #6b90db;
  position: absolute;
  top: calc(100% - .2rem);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* --------------------------------------------------
    レイアウト
-------------------------------------------------- */


.c-box {
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
	margin-bottom: 3em;
	}
	
.content {
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
	border: 1px solid #888888;
	padding: 2em 3.5em 2em;
	width: 55%; /*幅指定*/
	text-align: left; /*行の水平方向の揃え方(centerは中央揃え)*/
}
.content p {
 line-height: 2;
}

@media screen and (max-width: 768px) {
	.c-box .content {
		width: 90%;/*幅指定*/
		padding: 2em;
		margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
     }
 }
 
 @media screen and (max-width: 480px) {
	.c-box .content {
		width: 95%;/*幅指定*/
     }
 }


 .d-box {
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
	margin-bottom: 3em;
	}
	
.d-content {
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
	border: 1px solid #888888;
	padding: 2em 3.5em 2em;
	width: 55%; /*幅指定*/
	text-align: left; /*行の水平方向の揃え方(centerは中央揃え)*/
}
.d-content p {
 line-height: 2;
}

@media screen and (max-width: 768px) {
	.d-box .d-content {
		width: 90%;/*幅指定*/
		padding: 2em;
		border: 0px;
		margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
     }
 }
 
 @media screen and (max-width: 480px) {
	.d-box .d-content {
		width: 95%;/*幅指定*/
		border: 0px;
     }
 }

 .nl-box {
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
	margin-bottom: 3em;
	}
	
.nl-content {
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
	padding: 2em 2em 2em;
	width: 55%; /*幅指定*/
	text-align: left; /*行の水平方向の揃え方(centerは中央揃え)*/
}

.nl-content p {
 line-height: 2;
}


@media screen and (max-width: 768px) {
	.nl-box .nl-content {
		width: 95%;/*幅指定*/
		padding: 2em;
		margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
     }
 }
 
 @media screen and (max-width: 480px) {
	.nl-box .nl-content {
		width: 100%;/*幅指定*/
     }
 }

 
  
 .dfbox {
	display:flex;
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/
	flex-direction: column;
	margin-bottom: 3em;
  }
  
  .text {
	width: 100%;
	text-align: left;
	padding: 1.5em 2em 2em;
  }
  
  .pict {
	width: 100%;
	text-align: center;
	min-height: 0%;
  }
  
  .pict img {
	max-width: 400px;
	height:auto;
  }
  
  @media (min-width:768px) {
	.dfbox {
	  flex-direction: row;
	  justify-content: space-between;
	}
	.dfbox:nth-child(even) {
	  flex-direction: row-reverse;
	}
	
	.text {
	  text-align: left;
	  padding-left: 3em;
	}
	.dfbox:nth-child(even) .text {
	  text-align: right;
	}
	.pict {
	  width: 40%;
	}
	.pict img {
	  width: 100%;
	  height:auto;
	  margin: 0 1em 0;
	}
	.dfbox:nth-child(even) .pict {
	  margin-left: 0;
	  margin-right: 3%;
	}
  }
	


/*   見出し
-------------------------------------------------- */

.c-title {
	float: left;
	width: 100%;
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	font-weight: normal;
	line-height: 2em;
	letter-spacing: 0.15em;
	border-bottom: solid#888888 1px;
}

.ac-subtitle {
	float: left;
	width: 100%;
	font-family: "Roboto Slab", serif;
	color: #18546e;
	margin-bottom: 5px;
	font-weight: normal;
	line-height: 1.7em;
	letter-spacing: 0.15em;
}


.aac-subtitle {
	float: left;
	width: 100%;
	font-family: "Roboto Slab", serif;
	color: #18546e;
	margin-bottom: 8px;
	margin-bottom: 5px;
	font-weight: normal;
	line-height: 1.7em;
	letter-spacing: 0.15em;
}


.concept-title {
	font-family: "Zen Old Mincho", sans-serif;
	color: #333;
	line-height: 150%;
}


/*   リスト
-------------------------------------------------- */

.list_content-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}


.list_content:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #66cccc;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 10px;          /* 余白指定 */
}


ul li {
	padding-top:0px;
	padding-bottom:15px;
	line-height: 1.8;
  }


/*   フェードイン
-------------------------------------------------- */

div.animation_box {
	padding: 10px;
	animation: fadeIn 1s ease 0.5s 1 normal backwards;
  }
   
  @keyframes fadeIn {
	from {
	  opacity: 0;
	  transform: translateY(50px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }

  div.animation_box2 {
	padding: 10px;
	animation: fadeIn 3s ease 1s 1 normal backwards;
  }
   
  @keyframes fadeIn {
	from {
	  opacity: 0;
	  transform: translateY(70px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }


  
/*   ホバーで背景変更
-------------------------------------------------- */
@media only screen and (min-width: 768px) {
.medicalinfo {
    background-color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    }
.medicalinfo:hover {
    background-color: #D3E8F8;
    }
}


/*   スライドショー
-------------------------------------------------- */
.slideshow {
	width: 70%; /* スライドショー幅（PC）*/
	list-style-type: none;
	position: relative;
	}
	
	.slideshow > li {
	opacity: 0;
	position: absolute;
	transition: opacity 3s ease-in-out; /*フェード時間・イージング*/
	}
	
	.slideshow > li.showSlide{
	opacity: 1;
	}
	
	.slideshow > li > img {
	width : 100%;
	height: auto;
	}
	
	/* SP用メディアクエリ */
	@media screen and (max-width:768px) {
	.slideshow{
	width: 1000%; /* スライドショー幅（SP）*/
	}
	}

	/*  スマホだけ改行
-------------------------------------------------- */

	/*PCでは無効（改行しない）*/
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}


/* 大デバイス（デスクトップ, 992px 未満）
-------------------------------------------------- */
.thr {
        justify-content: space-between;
        margin-bottom: 100px;
        @include tab {
            margin-bottom: 10%;
        }
        @include sp {
            margin-bottom: 15%;
        }
        ul {
            display: flex;
            justify-content: flex-start;
            @include sp {
                display: block;
                line-height: 190%;
                margin-bottom: 7%;
            }
        }
        li {
            &:last-child {
                a {
                    padding-right: 0;
                    margin-right: 0;
                    &::after {
                        content: none;
                    }
                }
            }
            a {
                font-size: 13px;
                letter-spacing: 0.025em;
                padding-right: 25px;
                margin-right: 25px;
                position: relative;
                display: block;
                transition: 0.3s;
                @include sp {
                    font-size: 15px;
                    line-height: 240%;
                    padding-right: 0;
                    margin-right: 0;
                }
                &::after {
                    content: "";
                    top: 0;
                    right: 0;
                    width: 1px;
                    height: 100%;
                    background: $gryline;
                    position: absolute;
                    @include sp {
                        display: none;
                    }
                }
                &:hover {
                    opacity: 0.7;
                    @include sp {
                        opacity: 1;
                    }
                }
            }
        }
        .copy {
            font-size: 13px;
            letter-spacing: 0.09em;
            font-weight: 300;
            @include sp {
                font-size: 15px;
            }
        }
    }




/* --------------------------------------------------
    aboutus
-------------------------------------------------- */
.aboutus {
  padding: 1rem 2rem 0.3rem 5rem;
  font-size: 15px;
  color: #fff;
  background: #E5F1FB;
}

.aboutus__navi {
  flex-wrap: wrap;
}

.aboutus__navi li {
  display: inline-block;
}

.aboutus__navi li:not(:last-child) {
  margin-right: 25px;
}

@media (min-width: 768px) {
  .md-flex {
    display: flex;
  }

  .md-justify-between {
    justify-content: space-between;
  }

  .copyright {
    text-align: left;
  }
  
  ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: #222222;
  text-decoration: none;
  	padding: 4px;
	text-decoration: none;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}

a:hover {
  color: #D3E8F8;
}

.flex {
  display: flex;
}

}





/* --------------------------------------------------
    お問い合せページ
-------------------------------------------------- */
/*WEBでのご予約・お問合せ*/


/* 大デバイス（デスクトップ, 992px 未満）
============================================== */
@media screen and (max-width: 991.98px) {
	.footer-logo {
		width: 100%;
	}
	} /* END */
	
	/* 中デバイス（タブレット, 768px 未満）
	============================================== */
	@media screen and (max-width: 767.98px) {
	.gnav-item {
		display: block;
		width: 100%;
		border: none;
	}
	.gnav-item+ .gnav-item {
		border: none;
	}

	} /* END */
	
	/* 小デバイス（縦向きモバイル, 576px 以上 デスクトップ, 992px 未満）
	============================================== */
	@media screen and (min-width: 576px) and (max-width: 991.98px) {
	 #sec2  {
		 height: 500px;
	 } 
	} /* END */
	
	/* 小デバイス（縦向きモバイル, 576px 以上）
	============================================== */
	@media screen and (min-width: 576px) {
	 #sec2 .message {
		position: absolute;
		 left: 0;
	 } 
	} /* END */