@charset "UTF-8";

/*--------------------
common
--------------------*/
.t-center{text-align: center;}

@media screen and (min-width: 640px) {
.tel{
	pointer-events: none;
	color: currentColor;
	cursor: default;}
}

/*--------------------
icon
--------------------*/
.head-nav a:before,
.head-contact a:before,
.i-access:before,
.i-time:before,
.top-guide a span:before{
	display: inline-block;
	padding-right: 7px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;}

.i-ribbon{
	display:inline-block;
	margin-bottom:-1px;
	height:1em;
	width:1.2em;
	background:url(../img/ribbon-s.png) no-repeat center /contain;}

.ul_button {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-align-items: stretch;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	padding-left: 0;
	list-style: none;
	text-align: center;
	width:92%;
	margin:0 auto 30px;}

.ul_button li {
	display: inline-block;
	width:130px;
	margin: 0 3px 10px;
	font-size: 90%;}

.ul_button a {
	display: inline-block;
	width: 100%;
	height:100%;
	padding: 10px 0.5em;
	background-color: #f3adc9;
	color: #ffffff;
	letter-spacing:0.05em;}

.ul_button a:before {
	display:block;
	margin-bottom:2px;
	font-size:170%;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding: 0;}

.ul_case{
	padding:0.5em 0.5em 0.5em 1.7em;
	list-style:none;
	border:solid 1px #f3adc9;}

.ul_case li:before{
	text-indent:-1em;
	margin-right: 5px;
	margin-bottom: 5px;
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	vertical-align: baseline;
	content: "\f00c";
	color:#e684b3;}

.head-nav li:nth-of-type(1) a:before,
.li-about:before{content: "\f0f8";}
.head-nav li:nth-of-type(2) a:before{content: "\f0f1";}
.head-nav li:nth-of-type(3) a:before{content: "\f487";}
.head-nav li:nth-of-type(4) a:before{content: "\f0e0";}

.head-contact span a:before{content: "\f095";}

.li-greeting:before {content: "\f075";}
.li-point:before {content: "\f005";}
.head-contact a:nth-of-type(2):before,
.li-date:before,
.i-time:before {content: "\f073";}
.li-access:before,
.i-access:before,
.head-contact > a:nth-of-type(1):before {content: "\f3c5";}

a.li-orthopedics,
a.li-breast,
a.li-rehabili,
a.li-rheumatism{
	padding-top:60px;
	background: #f3adc9 no-repeat center 10px /50px 50px;}

a.li-orthopedics{background-image:url(../img/icon-orthopedics-w.png);}
a.li-breast{background-image:url(../img/icon-breast-surgery-w.png);}
a.li-rehabili{background-image:url(../img/icon-rehabilitation-w.png);}
a.li-rheumatism{background-image:url(../img/icon-rheumatism-w.png);}

.top-guide a span:before{content: "\f105";}

.ul_arrow li {
	margin-bottom: 8px;
	list-style-type: none;}

.ul_arrow li::before {
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
	padding-right:10px;
	margin-left:-1em;
	color:#160b06;}

@media screen and (max-width:640px) {
.head-nav a:before{
	display: block;
	padding-right: 0;
	padding-bottom:1px;
	font-size:150%;}

.ul_button li {
	width:31%;}

#department .ul_button li {
	width:48%;}
}


/* header */
.head-contact a{
	margin-left:30px;
	color:#756a67;}

.remodal span a,
.head-contact span a{
	padding:10px 1.3em;
	border:solid 1px #e684b3;
	border-radius:20px;
	color:#e684b3;
	font-weight:bold;}

.remodal span a{
	display:inline-block;
	margin:5px auto 20px;
	border-radius:30px;}

.remodal span a,.remodal span a:visited{color:#e684b3;}

.remodal img{
	width:60%;
	margin:0 20% 5px;}

#index #eyecatch{
	/*position:relative;*/}

	#index #eyecatch p{
		display:block;
		width:500px;
		max-width:90%;
		position:absolute;
		z-index:100;
		text-align:center;
		color:#fff;
		text-shadow:0px 0px 4px rgba(35,24,21,0.3);
		border-top:double 3px #fff;
		border-bottom:double 3px #fff;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;}

body:not(#index) #eyecatch{
	height:270px;
	background:no-repeat center center/cover;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;/* Safari6.1以降 */
	-ms-flex-wrap: wrap;/*IE10*/
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position:relative;
	z-index:50;
	overflow: visible;}

body#page404 #eyecatch,
body#about #eyecatch{background-image:url(../img/eye-about.jpg);}
body#department #eyecatch{background-image:url(../img/eye-department.jpg);}
body#facility #eyecatch{background-image:url(../img/eye-facility.jpg);}
body#policy #eyecatch{background-image:url(../img/eye-policy.jpg);}
body#completion #eyecatch,
body#confirm #eyecatch,
body#contact #eyecatch{background-image:url(../img/eye-contact.jpg);}

body:not(#index) #eyecatch:after{
	content:"";
	display:block;
	width:100%;
	padding-bottom:5%;
	position:absolute;
	bottom:0;
	left:0;
	background:url(../img/ec-bg.png) no-repeat center bottom -1px /100% auto;
	z-index:100;}

#eyecatch h1{
	width:360px;
	padding:30px 0;
	margin:0;
	max-width:90%;
	background:url(../img/logo-h1.png) no-repeat rgba(255, 255, 255, 0.7) center left 20px /auto 80%;}


@media screen and (max-width:768px) {
.head-contact a{
	margin-left:20px;
	font-size:90%;}
}

@media screen and (max-width:640px) {
#index #eyecatch{background-color:#fff7fa;}

body#page404 #eyecatch,
body#about #eyecatch{background-image:url("../img/eye-about-s.jpg");}
body#department #eyecatch{background-image:url("../img/eye-department-s.jpg");}
body#facility #eyecatch{background-image:url("../img/eye-facility-s.jpg");}
body#policy #eyecatch{background-image:url(../img/eye-policy-s.jpg);}
body#completion #eyecatch,
body#confirm #eyecatch,
body#contact #eyecatch{background-image:url("../img/eye-contact-s.jpg");}
}

/*--------------------
COMMON
--------------------*/
.inner{
	width: 90%;
	max-width: 1000px;
	margin:0 auto;}

.narrow{max-width:800px;}

/* lightbox用 */
.item img{display:block;line-height:0;}

.contact-box{
	padding:50px 0 35px;
	margin-bottom:0;
	background:#fff2f6;
	color:#eb61a3;}

	.contact-box h2{
		margin-bottom:20px;
		font-weight:bold;
		font-size:130%;}

	.contact-box a{
		display:block;
		margin-bottom:15px;
		padding:10px;
		background:#ffd1de;
		text-align:center;
		font-size:130%;
		font-weight:bold;
		color:#eb61a3;}

	.contact-box a:last-child{
		background:#fff;}

	/* 2023.01.23 edit:qlockup-ishiyama */
	.contact-box .flex2 a:nth-child(2) { display: none; }
	.contact-box .flex2 a { width: 100% !important;background-color: #fff; }
	.contact-box .flex2 a {}
	.contact-box .flex2 a {}



.contact-box a:before,
.remodal span a:before,
.time .grid3-1 > a:before,
.time .grid3-1 div a:before,
.time .grid3-1 span:before{
	display: inline-block;
	padding-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size:120%;}

.time .grid3-1 > a:before{content: "\f108";font-size:140%;}
.remodal span a:before,
.time .grid3-1 span:before,
.contact-box a:nth-of-type(1):before{content: "\f095";}
.time .grid3-1 div > a:before,
.contact-box a:nth-of-type(2):before{content: "\f0e0";}

.time .grid3-1 > a:before,
.time .grid3-1 div a:before,
.time .grid3-1 span:before{
	font-size:100%;}

/* aside */
aside{
	text-align:left;}

	aside img{
		width:225px;
		max-width:100%;
		margin-bottom:10px;}

	aside p{
		margin-bottom:.5em;}

aside .inner > div:last-child{
	font-size:90%;}

/*--------------------
GRID
--------------------*/
div > *:first-child{margin-top:0;}

/*--------------------
TABLE
--------------------*/
.tbl-hours{
	margin-bottom:10px;
	border:solid 1px #ffe6ed;
	font-size:90%;
	text-align:center;}

.tbl-hours th,.tbl-hours td{
	padding:.65em 0;
	border:none;}

.tbl-hours td{
	width:11%;}

.tbl-hours tr:first-child th{padding-top:1.3em;}
.tbl-hours tr:last-child th,.tbl-hours tr:last-child td{padding-bottom:1.3em;}

.tbl-hours tr th:last-child{letter-spacing:-3px;}

.tbl-hours tr th:nth-child(2n+1),.tbl-hours tr td:nth-child(2n+1){background:#fef7f9;}
.tbl-hours tr th:nth-child(2n),.tbl-hours tr td:nth-child(2n){background:#ffe6ed;}

.tbl-hours .i-ribbon{
	margin-bottom:-2px;}


@media screen and (max-width:640px) {
.tbl-sp-1 tr td:before,
.tbl-sp-2 tr td:before{
	font-weight:bold;
	color:#b5bfb4;}

.tbl-sp-1 tr td:nth-child(2):before,.tbl-sp-2 tr td:nth-child(1):before{content:'テキスト1：';}
.tbl-sp-1 tr td:nth-child(3):before,.tbl-sp-2 tr td:nth-child(2):before{content:'テキスト2：';}
.tbl-sp-2 tr td:nth-child(3):before{content:'テキスト3：';}

.tbl-hours th{
	display:table-cell;
	width:auto;}

.tbl-hours td{
	display:table-cell;
	width:11%;}
}

/*--------------------
INDEX
--------------------*/
#index article{padding:0;}

/* about */
.top-about{
	margin-top:80px;
	position:relative;
	padding:45px 0;}

.top-about .inner > div{
	display:block;
	width:50%;
	padding:60px 40px;
	background:rgba(255, 242, 246, .6);}

.top-about .btn{
	margin:40px 0 0;}

.top-about .btn a{
	background:rgba(255, 255, 255, .8);}

.top-about > div:last-of-type{
	display:block;
	height:100%;
	width:60%;
	position:absolute;
	top:0;
	right:0;
	background:url(../img/index-about.jpg) no-repeat center /cover;
	z-index:-1;}

/* guide */
.top-guide{
	padding:80px 0 60px;
	background:url(../img/index-guide.jpg) no-repeat center center /cover;
	text-align:center;}

	.top-guide .inner{
		max-width:880px;}

	.top-guide img{
		width:90%;
		margin:0 5% 5px;
		border-radius:150px;}

	.top-guide a{
		color:#231815;}

/* hours */
.time .grid3-1 > a,
.time .grid3-1 > div{
		display:block;
		margin-bottom:15px;
		background:#ffd1de;
		text-align:center;
		font-size:130%;
		font-weight:bold;
		color:#eb61a3;}

.time .grid3-1 > a{
	padding:30px 20px;}

.time .grid3-1 > div{
	padding:25px 20px 30px;}

.time .grid3-1 span{
	font-size:105%;
	letter-spacing:0.05em;}

.time .grid3-1 > div > a{
	display:block;
	padding:5px 0;
	margin-top:10px;
	color:#eb61a3;
	background:#fef7f9;}


/* facility */
.top-facility{
	margin-bottom:0;}

.top-facility .flex4{
	margin-top:80px;}

.top-facility .flex4>*{
	margin-bottom:0;
	width:25%;}

.top-facility img{display:block;}

/* aside */
#index aside{
	padding:0;}

#index aside > *{
	width:50%;
	margin-bottom:0;}

#index aside > div:first-child{
	padding:50px 5%;}

#index aside > div:last-child iframe{
	width:100%;
	height:100%;}

/*--------------------
PAGE
--------------------*/
/*about*/
#hospital{
	padding:60px 8%;
	background:url("../img/about-bg.jpg") no-repeat center /cover;}

#hospital .inner{
	width:35%;
	max-width:600px;
	margin-left:0;}

#philosophy{
	padding:80px 0;
	text-align: center;
	background:url("../img/logo-bg.png") #fff2f6 no-repeat left 10% top -40px  /auto 100%;}

#point img{
	display:block;
	margin:0 auto;
	width:80px;
	border:solid 1px #e684b3;
	border-radius:45px;}

#point h3{
	margin:15px;
	text-align:center;}

/*facility*/
.facilities > div{
	border:solid 1px #ffd1de;
	background:#fff;}

.facilities h2{
	margin:10px auto;}

.facilities h2 + p{
	text-align:center;
	margin-bottom:10px;
	color:#e684b3;
	font-weight:normal;
	font-size:115%;}

.facilities div p{
	padding:0 20px;
	font-weight:normal;}

/* department */
#orthopedics,
#breast,
#rehabilitation{margin-bottom:50px;}

.box-case{
	padding:10px;
	border:solid 1px #f3adc9;}

.box-case *:last-child{
	margin-bottom:0;}

.box-case h3{
	margin-bottom:5px;
	font-size:110%;}

.box-case ul{
	margin-bottom:0;
	padding-left:1.2em;
	list-style:none;}

.box-case li:before{
	text-indent:-1em;
	margin-right: 5px;
	margin-bottom: 5px;
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	vertical-align: baseline;
	content: "\f00c";
	color:#e684b3;}

/* form */
.box-tel{
	padding:1em 1em 1px;
	background:#ffe6ed;
	color:#e684b3;
	text-align:center;}

.box-tel span{
	font-weight:bold;
	font-size:150%;}

.box-tel a{color:#eb61a3;}

form{text-align: left;}

label{
	cursor: pointer;
	margin-right:1em;}

input,textarea{
	font-family:'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",sans-serif;
	padding:2px 4px;
	vertical-align: middle;
	border:solid 1px #bebebe;}

#message{width:100%;}
#name,#furigana,#tel{width:60%;max-width:250px;}
#email,#emailcheck,#address,form #department,#company{width:100%;max-width:400px;}

form .btn input{
	width:100px;
	margin:0 1em;}

form em{
	margin-left:5px;
	font-size:95%;
	font-weight:bold;
	color:#eb61a3;}

form .btn input {
    padding:10px;
    -webkit-appearance: none;
    border-radius: 0;
    border:#e684b3 1px solid;
    font-family: "noto sans Japanese";
    cursor: pointer;
    font-size:100%;
    background:#fff;
    color: #e684b3;
    transition:.3s;}

form .btn input:hover {
    background:#e684b3;
    color: #fff;
    transition:.3s;}

/* policy */
#policy section strong{
	color:#e684b3;
	font-size: 125%;
	font-weight:normal;}

@media screen and (max-width:768px) {
.top-about .inner > div{
	width:80%;
	padding:60px 40px;}

.time .grid3-1,
.time .grid3-2{width:100%;}

}

@media screen and (max-width:640px) {
/* about */
#hospital{
	padding:60px 5% 76%;
	background:url("../img/about-bg-s.jpg") #fff2f6 no-repeat bottom /contain;}

#philosophy{
	background:url("../img/logo-bg.png") #fff2f6 no-repeat left -30% top -10%  /75% auto;}

#hospital .inner{
	width:100%;}

#greeting img{
	display:block;
	width:70%;
	margin:0 auto;}

.top-about{
	position:relative;
	padding:0;
	margin-top:0;}

.top-about .inner{
	width:100%;}

.top-about .inner > div{
	width:100%;
	padding:60px 5%;}

.top-about > div:last-of-type{
	display:block;
	height:0;
	padding-bottom:75%;
	width:100%;
	position:relative;}

#access iframe{height:300px;}

/* facility */
.top-facility .flex4>*{
	width:50%;}

/* aside */
#index aside > *{
	width:100%;}

#index aside > div:last-child{
	height:350px;}

}