@charset "utf-8";
/* CSS Document */

html {
  font-size: 10px;
}
body {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "serif";
  color: #333;
  margin: 0 auto;
	max-width: 1920px;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
img {
  max-width: 100%;
}
.sp-only {
	display: none;
}
.flex {
	display: flex;
}
.row {
	flex-direction: row-reverse;
}
.wrap {
	flex-wrap: wrap;
}
.ffft {
	font-family: "Futura PT Medium", "Futura PT Bold", "Futura PT Light";
}
.ffyg {
	font-family: "游ゴシック";
}
.fftm{
	font-family: "ten-mincho", serif;
}
.ffci {
	font-family: Cinzel, "Cinzel Black", "Cinzel Medium", "Cinzel SemiBold";
}
.fwb {
	font-weight: 600;
}
.white {
	color: #fff;
}
.single01 {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.sp-only {
	display: none;
}
.mb30{
	margin-bottom: 30px;
}

/*========= 上部固定させるためのCSS ===============*/
#header{
	height: 70px;/*高さ指定*/
	width:100%;/*横幅指定*/
	/*以下はレイアウトのためのCSS*/
	justify-content: space-between;
	align-items: center;
	color:#fff;
	text-align: center;
	padding: 20px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
	z-index: 2;
}

/*JSを使いfixedクラスが付与された際の設定*/
#header.fixed {
	position: fixed;/*fixedを設定して固定*/
  z-index: 999;/*最前面へ*/
  top:0;/*位置指定*/
  left:50%;/*位置指定*/
	transform: translate(-50%);
	background: rgba(255,255,255,0.8);
	height: 50px;
}
#header.fixed .hr-top {
	display: none;
}
#header.fixed nav ul li a {
	color: #3F3125;
	text-shadow: none;
} 

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav{
	margin: auto;
}
/*ナビゲーションを横並びに*/
nav ul{
	justify-content: space-between;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
	position: relative;
}
/*ナビゲーションのリンク設定*/
nav ul li a{
	display: block;
	color: #333;
	transition:all .3s;
	text-align: center;
	font-size: 16px;
}

nav ul li a:hover{
	color:#7d7d7d;	
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:50%;
	top:5rem;
	transform: translate(-50%);
	z-index: 4;
    /*形状を指定*/
	background:#F9F6EE;
	width:120px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}
.has-child li a{
	padding: 1rem;
	font-size:14px;
}
/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
	color: #333;
	border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child a{
	border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
	background:#A79877;
}




/*ヘッダー*/
#header .inner {
	width: 95%;
	margin: auto;
	justify-content: space-between;
	align-items: center;
}
.head-logo {
	max-width: 350px;
}
.head-logo a {
	display: block;
}
.head-logo a img {
	width: 100%;
}
/*========= 以下は検証用のレイアウトのためのCSS ===============*/
nav ul{
	align-items: center;
	gap:5rem;
}

nav ul li a{
	display: block;
	font-size: 16px;
	text-shadow: 0 3px 6px rgba(0,0,0,0.5);
	text-align: center;
	line-height: 1;
}
nav ul li a span {
	font-size: 10px;
}
.hr-top {
	margin-right: auto;
	align-items: center;
	gap:2rem;
	margin-bottom: 2rem;
}
.hr-tel a {
	display: block;
	font-size: 22px;
	text-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
.hr-tel a i {
	font-size: 16px;
	margin-right: 5px;
}
.head-r .rebtn {
	border: 2px solid #fff;
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	padding: 0.5rem 1rem;
}
.head-r .rebtn a {
	display: block;
	font-size: 16px;
	text-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
.head-r .rebtn a i {
	margin-right: 5px;
}


/*--- メインビジュアル ---*/
.mainvisual {
	height: 100vh;
	width: 100%;
	background-size: cover;
	background-position: center;
	position: relative;
}
.mainvisual::before {
	position: absolute;
    content: "";
    width: 70%;
    height: 100%;
    bottom: -120px;
    right: 0;
    background-image: linear-gradient(-164deg, rgba(138, 107, 55, 0.06) 0%, rgba(138, 107, 55, 0.06) 25%, transparent 25%, transparent 96%, rgba(138, 107, 55, 0.05) 96%, rgba(138, 107, 55, 0.05) 100%), linear-gradient(210deg, rgba(180, 153, 107, 0.06) 0%, rgba(180, 153, 107, 0.06) 53%, transparent 53%, transparent 59%, rgba(138, 107, 55, 0.06) 59%, rgba(138, 107, 55, 0.06) 100%), linear-gradient(255deg, rgba(180, 153, 107, 0.1) 0%, rgba(180, 153, 107, 0.1) 46%, transparent 46%, transparent 71%, rgba(138, 107, 55, 0.06) 71%, rgba(138, 107, 55, 0.06) 100%), linear-gradient(316deg, rgba(138, 107, 55, 0.08) 0%, rgba(138, 107, 55, 0.08) 26%, transparent 26%, transparent 49%, rgba(245, 237, 220, 0.6) 49%, rgba(245, 237, 220, 0.6) 100%), linear-gradient(90deg, #f8f3e8, #f8f3e8);
		z-index: -999;
}
.catch-copy {
	position: absolute;
	bottom: 5rem;
	left: 5rem;
	width: 40%;
	padding: 3.6rem 0;
	background: rgba(59,51,41,0.8);
}
.catch-copy h2 {
	text-align: center;
	font-size: 36px;
	letter-spacing: 3px;
}
.catch-copy h3 {
	text-align: center;
	font-size: 26px;
	margin-top: 2rem;
}


@media screen and (max-width:1280px){
	.catch-copy {
		width: 50%;
	}
}

/*--- お知らせ ---*/
#topicks {
	margin-top: 8rem;
	position: relative;
	padding: 10rem 0 8rem 0;
	margin-bottom: 8rem;
}
#topicks:before {
	position: absolute;
	content: "";
	width: 60%;
	height: 100%;
	top:0;
	left: 0;
	background: #FEFCF8;
	z-index: -2;
}
#topicks:after {
	content: "TOPICS";
	font-size: 120px;
	font-weight: bold;
	color: rgba(204,184,150,0.3);
	letter-spacing: 8px;
	position: absolute;
	top:15%;
	right:3rem;
}
#topicks .container {
	width: 100%;
	margin: auto;
	position: relative;
}
#topicks .container .inner {
	width: 1150px;
	margin: auto;
	align-items: center;
	gap:5rem;
}
.ttl01 h4 {
	font-size: 30px;
	color: #8A6B37;
	text-align: center;
	letter-spacing: 2px;
}
.ttl01 span {
	font-size: 16px;
	color: #3F3125;
}
.topick-contents {
	justify-content: space-between;
	align-content: center;
}
.topick-contents dl {
	width: 100%;
}
.topick-contents dt {
	background: #B4996B;
	font-size: 18px;
	padding: 1.5rem 2rem;
	box-sizing: border-box;
}
.topick-contents dd {
	font-size: 18px;
	padding: 1.5rem 2rem;
	font-weight: 500;
}

@media screen and (max-width:1280px) {
	#topicks:after {
		font-size: 100px;
		top:20%;
		right:2rem;
	}
}




/*--- Greeting ---*/
#greeting {
	background: url("../img/bg04.png");
	background-position: center;
	background-size: cover;
	padding-top: 8rem;
	padding-bottom: 5rem;
	position: relative;
}
#greeting::before {
	content: "GREETING";
	font-size: 120px;
	font-weight: bold;
	color: rgba(255,255,2550,0.3);
	letter-spacing: 8px;
	position: absolute;
	top:1rem;
	left: 50%;
	transform: translate(-50%);
}
.ttl02 h4 {
	text-align: center;
	font-size: 46px;
	line-height: 0.8;
}
.ttl02 span {
	font-size: 28px;
}
#greeting .inner {
	padding: 8rem 0 5rem 0;
	justify-content: space-between;
	align-items: center;
}
#greeting .inner .txt {
	width: 48%;
}
#greeting .inner .img {
	width: 48%;
}
#greeting .inner .img img {
	width: 100%;
}
#greeting .inner .txt p {
	font-size: 17px;
	line-height: 2;
}


@media screen and (max-width:1280px) {
	.single01 {
		width: 90%;
	}
	.single01 .img {
		width: 45%;
	}

}

/*--- features ---*/
#features {
	background: url("../img/bg05.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: 8rem 0 12rem 0;
}
.ttl03 h4 {
	text-align: center;
	font-size: 46px;
	line-height: 0.8;
	display: flex;
	align-items: center;
	position: relative;
}
.ttl03 span {
	font-size: 24px;
	position: absolute;
	bottom: -4rem;
	left: 50%;
	transform: translate(-50%);
}
.ttl03 h4::before,
.ttl03 h4::after {
	border-top: 2px solid #fff;
  content: "";
  flex-grow: 1;
}
.ttl03 h4::before {
	margin-right: 0.4em;
}
.ttl03 h4::after {
	margin-left: 0.4em;
}
#features .inner {
	padding-top: 15rem;
}
#features .inner ul {
	width: 70%;
	margin: auto;
	flex-direction: column;
	gap:10rem;
}
#features .inner ul li {
	justify-content: space-between;
	align-items: center;
	position: relative;
}
#features .inner ul li .f-img {
	width: 40%;
	z-index: 1;
}
#features .inner ul li .r-box {
	margin-left: auto;
}
#features .inner ul li .f-txt.r-box {
	right: 0;
  padding-left: 90px;
}
#features .inner ul li .f-txt.l-box {
	padding-right: 90px
}
#features .inner ul li .f-txt {
	position: absolute;
  width: 65%;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  box-sizing: border-box;
  padding: 30px;
  border-radius: 5px;
  z-index: 2;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px)
}
.f-txt h5 {
	font-size: 22px;
	margin-bottom: 2rem;
}
.f-txt h5 span {
	font-size: 40px;
	margin-right: 1rem;
}
.f-txt p {
	font-size: 16px;
	line-height: 2;
}

@media screen and (max-width:1280px) {
	#features .inner ul {
		width: 90%;
	}
}

/*--- ピックアップ ---*/
#pickup {
	position: relative;
	padding: 10rem 0;
}
#pickup::before {
	content: "PICKUP";
	font-size: 120px;
	font-weight: bold;
	color: rgba(204,184,150,0.3);
	letter-spacing: 8px;
	position: absolute;
	top:1rem;
	left: 50%;
	transform: translate(-50%);
}
#pickup .ttl02 {
	position: relative;
}
#pickup .ttl02::before {
	position: absolute;
	content:"";
	width: 180px;
	height: 155px;
	background: url("../img/deco01.png");
	background-size: cover;
	top: -7rem;
	left: 20%;
}
#pickup .ttl02::after {
	position: absolute;
	content:"";
	width: 180px;
	height: 155px;
	background: url("../img/deco02.png");
	background-size: cover;
	top: -3rem;
	right: 20%;
}
#pickup .ttl02 h4 {
	color: #8A6B37;
}
.pickup-list {
	padding-top: 10rem;
}
.pickup-list ul {
	flex-direction: column;
	gap:15rem;
}
.pickup-list ul li {
	position: relative;
}
.pickup-list ul li::before {
	content: "";
	width: 100%;
	height: calc(100% - 80px);
	background: #FAF7F0;
	position: absolute;
	left: 0;
  bottom: 0;
  z-index: -1;
}
.pickup-list ul li .inner {
	width: 70%;
	margin: auto;
	justify-content: space-between;
	align-items: center;
}
.pickup-list ul li .inner .txt{
	width: 50%;
}
.pickup-list ul li .inner .txt,
.pickup-list ul li .inner .img {
	width: 40%;
	margin: auto;
}
.pickup-list ul li .inner .txt h5 {
	text-align: center;
	font-size: 26px;
	margin-bottom: 2.5rem;
	padding-top: 5rem;
}
.p01ttl,
.p02ttl,
.p03ttl {
	position: relative;
}
.p01ttl::before {
	content: "";
	width: 100px;
	height: 100px;
	background: url("../img/medical-icon05.png");
	background-size: cover;
	position: absolute;
	top: -6rem;
	left: 50%;
	transform: translate(-50%);
}
.p02ttl::before {
	content: "";
	width: 100px;
	height: 100px;
	background: url("../img/medical-icon04.png");
	background-size: cover;
	position: absolute;
	top: -6rem;
	left: 50%;
	transform: translate(-50%);
}
.p03ttl::before {
	content: "";
	width: 100px;
	height: 100px;
	background: url("../img/medical-icon02.png");
	background-size: cover;
	position: absolute;
	top: -6rem;
	left: 50%;
	transform: translate(-50%);
}
.pickup-list ul li .inner .txt p {
	font-size: 16px;
	line-height: 2;
}

@media screen and (max-width:1280px) {
	
	#pickup .ttl02::before {
		position: absolute;
		content:"";
		width: 180px;
		height: 155px;
		background: url("../img/deco01.png");
		background-size: cover;
		top: -7rem;
		left: 10%;
	}
	#pickup .ttl02::after {
		position: absolute;
		content:"";
		width: 180px;
		height: 155px;
		background: url("../img/deco02.png");
		background-size: cover;
		top: -3rem;
		right: 10%;
	}
	
	.pickup-list ul li .inner {
		width: 85%;
	}
	.pickup-list ul li .inner .txt,
	.pickup-list ul li .inner .img {
		width: 45%;
	}
}


/*--- 診療案内 ---*/
#medical-guide {
	padding: 12rem 0;
	background: url("../img/bg06.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}
#medical-guide .inner {
	width: 70%;
	margin: auto;
	justify-content: space-between;
}
#medical-guide .inner h4 {
	width: 10%;
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	font-size: 36px;
	letter-spacing: 5px;
	position: relative;
}
#medical-guide .inner h4::before {
	content: "Medical guide";
	color: #8A6B37;
	font-size: 12px;;
	position: absolute;
	top:0;
	right: -2.4rem;
	letter-spacing: 3px;
}
.medial-list {
	width: 80%;
}
.medial-list ul {
	justify-content: space-evenly;
	align-items: flex-start;
}
.medial-list ul li {
	width: 22%;
	margin-bottom: 3rem;
	padding: 2rem 0;
	background-image: linear-gradient(-164deg, rgba(180, 153, 107, 0.05) 0%, rgba(180, 153, 107, 0.05) 25%, transparent 25%, transparent 96%, rgba(180, 153, 107, 0.04) 96%, rgba(180, 153, 107, 0.04) 100%), linear-gradient(210deg, rgba(180, 153, 107, 0.1) 0%, rgba(180, 153, 107, 0.1) 53%, transparent 53%, transparent 59%, rgba(180, 153, 107, 0.1) 59%, rgba(180, 153, 107, 0.1) 100%), linear-gradient(255deg, rgba(180, 153, 107, 0.05) 0%, rgba(180, 153, 107, 0.05) 46%, transparent 46%, transparent 71%, rgba(180, 153, 107, 0.1) 71%, rgba(180, 153, 107, 0.1) 100%), linear-gradient(316deg, rgba(180, 153, 107, 0.08) 0%, rgba(180, 153, 107, 0.08) 26%, transparent 26%, transparent 49%, rgba(180, 153, 107, 0.05) 49%, rgba(180, 153, 107, 0.05) 100%), linear-gradient(90deg, #faf2e2, #faf2e2);
}
.medial-list ul li a {
	display: block;
	text-align: center;
	color: #3F3125;
	font-size: 20px;
	font-weight: 600;
}
.medial-list ul li a span {
	font-size: 14px;
	color: #8A6B37;
}


@media screen and (max-width:1280px){
	#medical-guide .inner {
		width: 90%;
	}
}


/*--- スライドショー ---*/
#slideshow {
	margin: 8rem auto;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
    margin:0 1rem;/*スライド左右の余白調整*/
}




/*--- footer ---*/
.foot-top {
	justify-content: space-between;
	align-items: flex-start;
}
.foot-top .txt,
.foot-top .img {
	width: 50%;
	height: 750px;
	box-sizing: border-box;
}
.foot-top .txt {
	background: url("../img/bg01.jpg");
	background-size: cover;
	padding-top: 5rem;
}
.foot-logo {
	width: 35%;
	margin: auto;
}
.foot-logo img {
	width: 100%;
}
.f-rebnr {
	width: 70%;
	margin: 3rem auto;
	justify-content: space-between;
	align-items: center;
}
.f-tel,
.f-web {
	width: 46%;
}
.f-tel a,
.f-web a {
	display: block;
}
.f-timetable {
	width: 80%;
	margin: auto;
}
.f-access {
	width: 70%;
	margin-top: 3rem;
	margin-left: auto;
	margin-right: auto;
}
.fa-ttl {
	font-size: 20px;
}
.f-access dl {
	margin-top: 1rem;
	align-items: center;
	justify-content: space-between;
}
.f-access dl dt {
	width: 18%;
	background: rgba(227,210,181,0.5);
	border: 1px solid #7B5B3F;
	border-radius: 3rem;
	text-align: center;
	font-size: 16px;
	margin-bottom: 0.5rem;
	color: #7B5B3F;
}
.f-access dl dd {
	width: 78%;
	font-size: 16px;
	margin-bottom: 0.5rem;
	color: #534132;
}
.f-nav {
	width: 60%;
	margin: 2rem auto;
}
.f-nav ul {
	justify-content: space-between;
}
.f-nav ul li {
	position: relative;	
}
.f-nav ul li::before {
	content: "";
	width: 16px;
	height: 16px;
	background: url("../img/fnav-icon.png");
	background-size: cover;
	position: absolute;
	top: 3px;
	left: -22px;
}
.f-nav ul li a {
	display: block;
	font-size: 14px;
	color: #3F3125;
}
.foot-top .img {
	background: url("../img/foot-bg.jpg");
	background-size: cover;
	background-position: center;
}
.foot-map iframe {
  width: 100%;
}
.copy {
	background: #3F3125;
}
.copy p {
	text-align: center;
	font-size: 12px;
}

@media screen and (max-width:1280px){
	.foot-top .txt,
	.foot-top .img {
		height: 600px;
	}
	
}



/*----- 下層ページ -----*/
.s-mainvisual {
	height: 50vh;
	background: url("../img/s-mainvisual.jpg");
	background-size: cover;
	background-position: top;
	position: relative;
}
.page-ttl {
	position: absolute;
	bottom: 5rem;
	left: 50%;
	transform: translate(-50%);
}
.page-ttl h2 {
	text-align: center;
	font-size: 56px;
}
.page-ttl h2 span {
	font-size: 30px;
}
.bg-spage {
	background: url("../img/bg02.png");
	background-attachment: fixed;
	background-size: cover;
}
.bg-spage  {
	background: url("../img/bg02.png");
	background-attachment: fixed;
	background-size: cover;
}

.sec-padding {
	padding: 8rem 0;
}

/*-- ご挨拶 --*/
.d-greeting-ttl p {
	font-size: 46px;
	color: #B4996B;
}
.d-greeting-ttl p span {
	color: #3F3125;
	font-size: 24px;
	margin-left: 2rem;
}
#d-greeting .inner {
	margin-top: 5rem;
	justify-content: space-between;
	align-items: center;
}
#d-greeting .inner .txt {
	width: 65%;
}
.d-txt {
	font-size: 16px;
	line-height: 2;
}
.d-name {
	margin-left: 50%;
	margin-top: 2rem;
	font-size: 30px;
}
.d-name span {
	font-size: 18px;
}
.d-name .en {
	color: #B4996B;
	margin-left: 1rem;
}
#d-greeting .inner .img {
	width: 30%;
}

.career {
	margin-top: 5rem;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.career-ttl {
	margin: auto;
	border-top: 1px solid #7B5B3F;
	border-bottom: 1px solid #7B5B3F;
	padding: 1rem 0;
}
.career-ttl p {
	font-size: 24px;
	text-align: center;
}
.career dl {
	width: 80%;
	margin: 2rem auto;
	justify-content: space-between;
	align-items: center;
}
.career dl dt {
	width: 20%;
	font-size: 18px;
}
.career dl dd {
	width: 80%;
	font-size: 18px;
}

/*QA*/
#qanda {
	padding-bottom: 8rem;
}
.qattl {
	text-align: center;
	font-size: 46px;
	color: #B4996B;
	margin-bottom: 5rem;
}
.qattl span {
	font-size: 30px;
	color: #707070;
}
.qa-wrapper {
	width: 900px;
	margin: auto;
	flex-direction: column;
	gap:5rem;
}
.qa-content {
	flex-direction: column;
	gap:3rem;
}
.qa-box {
	width: 85%;
	margin: auto;
	padding: 2rem;
	box-sizing: border-box;
	border-radius: 2rem;
}
.q-box {
	background: #ECE8E3;
	position: relative;
}
.q-box::before {
	position: absolute;
	top: 0;
	left: -6rem;
	content:"Q";
	font-size: 30px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-family: "游ゴシック";
	width: 50px;
	height: 50px;
	background: #8A6B37;
	border-radius: 50%;
	
}
.a-box {
	background: #E3E6E9;
	position: relative;
}
.a-box::before {
	position: absolute;
	top: 0;
	right: -6rem;
	content:"A";
	font-size: 30px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-family: "游ゴシック";
	width: 50px;
	height: 50px;
	background: #3E5D7D;
	border-radius: 50%;
}
.qa-txt {
	font-size: 16px;
	line-height: 2;
}

/*-- スタッフ紹介 --*/
#staff .container {
	width: 1200px;
	margin: auto;
	background: #fff;
	box-shadow: 2px 2px 5px #ccc;
	padding: 5rem 0;
}
.staff-ttl {
	width: 90%;
	margin: auto;
	background: #7B5B3F;
	padding: 1rem 0 0 2rem;
	box-sizing: border-box;
}
.staff-ttl p {
	font-size: 24px;
}
.staff-wrapper {
	width: 80%;
	margin: 3rem auto 0 auto;
	justify-content: space-between;
	align-content: flex-start;
}
.item
{
    margin-bottom: 3rem;
}
.staff-wrapper .item {
	width: 30%;
	margin-bottom: 3rem;
}
.staff-wrapper .item img {
	width: 90%;
	margin: auto;
}
.staff-wrapper .item p {
	text-align: center;
}
.staff-post {
	font-size: 16px;
	margin-top: 1rem;
}
.staff-name {
	font-size: 20px;
}
.staff-name span {
	font-size: 16px;
	color: #B4996B;
	margin-left: 1rem;
}

/*院内紹介*/
#clinic-info {
	padding: 5rem 0;
	background: linear-gradient(90deg, #B5A283 0%, #B5A283 70%, #EEE7DC 30%, #EEE7DC 100%);
}
.ci-wrapper {
	padding: 8rem 0;
	justify-content: space-between;
	align-items: flex-start;
	z-index: 2;
}
.ci-wrapper .item {
	width: 30%;
	background: #fff;
	padding: 2rem;
	box-sizing: border-box;
}
.ci-ttl {
	text-align: center;
	font-size: 20px;
	margin-top: 2rem;
}
.ci-txt {
	font-size: 16px;
	line-height: 2;
	margin-top: 1rem;
}

/*医院概要*/
#clinic-about {
	padding: 8rem 0;
	background: url("../img/bg07.png");
	background-size: cover;
}
#clinic-about .ttl02 {
	color: #8A6B37;
	margin-bottom: 5rem;
}
#clinic-about .inner {
	width: 70%;
	margin: 0 auto 8rem auto;
	justify-content: space-between;
	align-items: center;
}
#clinic-about .inner .img {
	width: 40%;
	position: relative;
}
.ca-img02 {
	position: absolute;
	width: 50%;
	bottom: -8rem;
	right: -2rem;
}
#clinic-about .inner .txt {
	width: 55%;
}
#clinic-about .inner .txt dl {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
	margin-bottom: 3rem;
}
#clinic-about .inner .txt dl dt {
	width: 25%;
	text-align: center;
	border-top: 1px solid #B4996B;
	padding: 1.5rem 0;
}
#clinic-about .inner .txt dl dd {
	width: 75%;
	border-top: 1px solid #B4996B;
	padding: 1.5rem 0;
}
#clinic-about .inner .txt dl dt:last-of-type {
	border-bottom: 1px solid #B4996B;
}
#clinic-about .inner .txt dl dd:last-of-type {
	border-bottom: 1px solid #B4996B;
}

/*施設基準*/
#clinic-facility {
	padding: 8rem 0;
	background: url("../img/bg07.png");
	background-size: cover;
}
#clinic-facility .ttl02 {
	color: #8A6B37;
	margin-bottom: 5rem;
}
#clinic-facility .inner {
	width: 70%;
	margin: 0 auto 8rem auto;
	justify-content: space-between;
	align-items: center;
}
#clinic-facility .inner p {
	font-size: 16px;
	line-height: 2;
}

/*----- 診療案内 -----*/
#medical-top #medical-guide {
	background: #fff;
}
#medical-body {
	padding: 10rem 0;
	background: url("../img/bg03.jpg");
	background-size: cover;
	background-attachment: fixed;
}
#medical-body  .inner {
	width: 90%;
	margin: auto;
}
#medical-body .medical-side {
	width: 20%;
}
#medical-body .medical-side .side-nav {
	width: 95%;
	background: #fff;
	box-shadow: 0 3px 3px #ccc;
}
#medical-body .medical-side .side-nav .s-nav-ttl {
	background: #7B5B3F;
	padding: 1rem 0;
}
#medical-body .medical-side .side-nav ul {
	width: 80%;
	margin: auto;
	padding: 2rem 0;
}
#medical-body .medical-side .side-nav ul li {
	position: relative;
	margin-bottom: 2rem;
	border-bottom: 1px solid #C4BBAC;
	padding-bottom: 1rem;
}
#medical-body .medical-side .side-nav ul li::before {
	content: "◆";
	font-size: 16px;
	color: #7B5B3F;
	position: absolute;
	top: 0;
	left: 0;
}
#medical-body .medical-side .side-nav ul li a {
	display: block;
	font-size: 16px;
	color: #333;
	margin-left: 3rem;
	
}
#medical-body .medical-side .side-nav .s-nav-ttl p {
	font-size: 20px;
	text-align: center;
	letter-spacing: 2px;
}

#medical-body .medical-main {
	width: 80%;
}

.medical-container {
	width: 95%;
	margin: 0 auto 10rem auto;
}
.medical-ttl {
	margin-bottom: 2rem;
}
.medical-ttl h5 {
	font-size: 30px;
	color: #3F3125;
	letter-spacing: 3px;
}
.medical-ttl h5 span {
	font-size: 20px;
	color: #B4996B;
	margin-left: 2rem;
	letter-spacing: 1px;
}
.mc-box {
	background: #fff;
	border-top: 10px solid #7B5B3F;
	padding: 5rem 0;
	box-shadow: 0 3px 3px #ccc;
}
.mcb-inner {
	width: 80%;
	margin: auto;
	align-items: center;
	justify-content: space-between;
}
.mcb-inner .txt {
	width: 60%;
}
.mcb-inner .txt p {
	line-height: 2;
	font-size: 16px;
}
.mcb-inner .img {
	width: 35%;
}
.worries {
	width: 60%;
	margin-top: 3rem;
	margin-left: auto;
	margin-right: auto;
	background: #F8F7F5;
	padding: 2rem 0;
}
.worries-ttl {
	text-align: center;
	color: #8A6B37;
	font-size: 18px;
}
.worries ul {
	width: 70%;
	margin: 3rem auto 0 auto;
	justify-content: space-between;
}
.worries ul li {
	width: 45%;
	font-size: 16px;
	margin-bottom: 2rem;
	position: relative;
}
.worries ul li::before {
	content: "";
	width: 20px;
	height: 15px;
	background: url("../img/check.png");
	background-size: cover;
	position: absolute;
	top:3px;
	left: -3rem;
}









































/*---------------------------------------------*/

/*トップリンク*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#fff;
	border: 1px solid #874316;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	color: #7d7d7d;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}




/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}


/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1.8s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}


/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}



/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
.sub_ttl
{
    font-size: 2rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
    border-bottom: 1px solid #333333;
}
h6
{
    font-size: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    font-weight: 600;
    margin-top: 3rem;
    border-bottom: 1px solid #333333;
}
.t16
{
    font-size: 1.6rem;
}

.t18
{
    font-size: 1.8rem;
}