@charset "utf-8";

/*
Site Name: 
Description: parts style
*/

/* header
----------------------------------------- */
#header #logo{
	float: left;
	clear: left;
	width: 193px;
	margin: 15px 20px;
	letter-spacing: 0;
	line-height: 0;
}
#header #tel{
	float: right;
	clear: right;
	height: 60px;
	margin: 0;
	padding: 0px 25px 0px 35px;
	background-color: #005BAC;
	line-height: 0;
	display: table;
	position: relative;
	z-index: 10;
}
#header #tel::after{
	content: "";
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 20px solid #FFF;
	position: absolute;
	left: 0;
	top: 0;
}
#header #tel a{
	width: 154px;
	color: #FFF;
	font-size: 180%;
	font-weight: bold;
	vertical-align: middle;
	display: table-cell;
	text-decoration: none;
}
/*#header #tel a::before{
	content: "";
	width: 18px;
	height: 18px;
	margin-right: 10px;
	background-image: url(../img/header_tel_icon.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	display: inline-block;
}*/
#header nav#gloval-nav{
	float: left;
}
#header nav#gloval-nav ul{
	margin: 0;
	padding: 0;
	border-right: #EEE solid 1px;
	overflow: hidden;
}
#header nav#gloval-nav ul li{
	float: left;
	margin: 0;
	padding: 0;
	border-left: #EEE solid 1px;
	display: table;
}
#header nav#gloval-nav ul li a{
	color: #333;
	font-weight: bold;
	width: 115px;
	height: 60px;
	vertical-align: middle;
	text-align: center;
	display: table-cell;
	text-decoration: none;
	position: relative;
}
#header nav#gloval-nav ul li.active a,
#header nav#gloval-nav ul li a:hover{
	color: #005BAC;
}
#header nav#gloval-nav ul li.active a:after,
#header nav#gloval-nav ul li a:hover:after{
	content: "";
	width: 100%;
	height: 5px;
	background-color: #005BAC;
	position: absolute;
	left: 0;
	bottom: 0;
}
@media all and (max-width: 1230px){
#header #logo{
	width: 136px;
	margin: 9px 10px;
}
#header #tel{
	height: 40px;
	font-size: 85%;
	margin: 0 40px 0 0;
	padding: 0px 15px 0px 25px;
}
#header #tel a{
	width: 130px;
}
#header #tel::after{
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 15px solid #FFF;
	position: absolute;
	left: 0;
	top: 0;
}
#header nav#gloval-nav{
	display: none;
}
}
@media all and (max-width: 640px){
#header #tel a{
	font-size: 150%;
}
}



/* nav
----------------------------------------- */
nav#spmenu{
	float: none;
	width: 100%;
	margin: 0px;
	background-color: rgba(0,47,127,0.7);
	position: fixed;
	top: 40px;
	z-index: 600;
	display: none;
}
.nav-open nav#spmenu{
	display: block;
}
nav#spmenu ul{
	margin: 0px;
	padding: 0px;
	display: block;
}
nav#spmenu ul li{
	list-style-type: none;
}
nav#spmenu ul li a{
	color: #FFF;
	font-weight: bold;
	padding: 10px;
	display: block;
	text-decoration: none;
}
nav#spmenu ul li a:hover{
	background-color: rgba(0,47,127,0.8);
	text-decoration: none;
}
@media all and (min-width: 981px){
.nav-open nav#spmenu{
	display: none!important;
}
}
@media all and (max-width: 980px){
nav#gloval-nav{
	display: none;
}
}


/* footer
----------------------------------------- */
#footer p#pagetop{
	color: #FFF;
	padding: 20px;
	margin: 0px;
	display: inline-block;
	position: relative;
	cursor: pointer;
}
#footer p#pagetop::after{
	content: "";
	width: 50px;
	height: 8px;
	margin: 15px auto;
	background-image: url(../img/pagetop_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	display: block;
}
#footer p#copyright{
	color: #FFF;
	font-family: Verdana;
	padding: 0 0 30px;
	margin: 0;
}

/* topicpath
----------------------------------------- */


/* content
----------------------------------------- */
h1#catchcopy{
	color: #FFF;
	font-size: 80%;
	font-weight: normal;
	margin: 60px 0px 0px;
	padding: 10px;
	background: rgba(0, 91, 172, 0.2);
	text-align: left;
}
@media all and (max-width: 1230px){
h1#catchcopy{
	color: #FFF;
	font-size: 80%;
	font-weight: normal;
	margin: 40px 0px 0px;
	padding: 10px;
	background: rgba(0, 91, 172, 0.2);
	text-align: left;
}
}


/* access */
#access-section{
	background-color: #005BAC;
	padding: 0 0 30px;
	position: relative;
}
#access-section::before{
	content: "";
	width: 100%;
	height: 24px;
	background-image: url(../img/access_bg.png);
	background-repeat: repeat-x;
	background-position: center top;
	position: absolute;
	top: -24px;
}
#access-section .content-wapper{
	overflow: hidden;
}
#access-section h2{
	color: #FFF!important;
	margin-top: 50px!important;
	background-image: url(../img/access_headline02_bg.png)!important;
}
#access-section .left,
#access-section .right{
	width: 450px;
	padding-bottom: 30px;
}
#access-section .left p{
	margin: 0;
}
#access-section .left address{
	color: #FFF;
	margin-top: 15px;
}
#access-section .left img{
    border-radius: 10px;
}
#access-section .left address p{
	margin: 15px 0 0;
	padding: 15px 0 0;
	border-top: #FFF solid 1px
}
@media all and (max-width: 1000px){
#access-section .left,
#access-section .right{
	width: 100%;
	margin: 0 0 30px;
}
}

/* contact */
#contact-section{
	padding: 30px 0px 60px;
	text-align: center;
}
#contact-section p{
	color: #005BAC;
}
@media all and (max-width: 640px){
#contact-section{
	padding: 30px 20px 60px;
}
}


/* info */
#info-section{
	padding: 30px 0px 90px;
	/*background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);text-align: center;*/
	overflow: hidden;
}
#info-section #facebook{
	height: 618px;
	text-align: center;
}
#contents #info-section #facebook{
	height: 185px;
}
@media all and (max-width: 640px){
#info-section{
	padding: 30px 20px 60px;
}
}


/* page-visual */
#page-visual{

}
#page-visual p{
	margin: 0;
	padding: 0;
	line-height: 0;
}
#page-visual #page-ttl{
	color: #FFF;
	margin-bottom: 30px;
	padding: 25px 0;
	background-color: #005BAC;
	overflow: hidden;
}
#page-visual #page-ttl p{
	float: left;
	color: #FFF;
	font-size: 150%;
	font-weight: bold;
	line-height: 1.4;
}
#page-visual #page-ttl ol#topicpath{
	float: right;
	font-size: 90%;
	margin: 5px 0;
	padding: 0;
}
#page-visual #page-ttl ol#topicpath li{
	display: inline;
	margin: 0;
	padding: 0;
}
#page-visual #page-ttl ol#topicpath li a{
	color: #FFF;
	text-decoration: none;
	/*background: url(../img/topicpath.png) no-repeat right center;*/
}
#page-visual #page-ttl ol#topicpath li a::after{
	content: ">";
	margin: 0 5px;
	

}

#page-visual nav#submenu{
    clear: both;
    text-align: center;
    background-color: #002F7B;
    margin:-30px  0px 20px;
    font-size:0;
}
#page-visual nav#submenu ul{
    margin:auto;
    padding:0px;
}
#page-visual nav#submenu li{
    display: inline-block;
    border-left:1px solid #0C5DAA;
    margin:0px;
    padding:0px;
    font-size:16px;
}
#page-visual nav#submenu li:first-child{
    border-left:none;
}
#page-visual nav#submenu li a{
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding:20px;
    margin:0px;
}
#page-visual nav#submenu li a:hover,
#page-visual nav#submenu li.active a{
    background-color: #0B5BAC;
}

@media all and (max-width: 640px){
#page-visual nav#submenu li{
    width: 33%;
}
#page-visual nav#submenu li a{
    padding:10px;
}
}



/* main css
----------------------------------------- */
#contents #main ul,
#contents #main ol,
#contents #main p{
	padding: 0px 0px 0.5em;
}

#contents #main h2,
#facility-section h2,
#access-section h2,
#contact-section h2,
#info-section h2{
	color: #005BAC;
	font-size: 200%;
	font-weight: normal;
	margin: 80px 0px 50px;
	padding: 0px 0px 26px;
	background-image: url(../img/headline02_bg.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	letter-spacing: 0.1em;
	text-align: center;
	clear: both;
}
#contents #main h3{
	color: #FFF;
	font-size: 150%;
	font-weight: bold;
	margin: 30px 0 20px;
	padding: 10px 20px;
	background-color: #005BAC;
	border-radius: 10px;
	clear: both;
}
#contents #main h4{
	font-size: 130%;
	color: #005BAC;
	margin: 20px 0;
	padding: 0 0 0 30px;
	position: relative;
}
#contents #main h4::before{
	content: "";
	width: 20px;
	height: 20px;
	background-image: url(../img/headline04_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 5px;
}

#contents #main ul li{
	margin-left: 5px;
	padding-left: 10px;
	background-image: url(../img/list_icon.png);
	background-repeat: no-repeat;
	background-position: left 6px;
	list-style-type: none;
}
#contents #main ul li ul,
#contents #main ul li ol{
	padding: 5px 0px;
	margin-bottom: 0px;
}
#contents #main ol{
	margin-left: 15px;
	counter-reset: li; 
	list-style: none; 
}
#contents #main ol > li::before {
	font-weight: bold;
	margin-right: 0.25rem;
	content: counter(li) ".";
	counter-increment: li;
}
#contents #main ol li ol,
#contents #main ol li ul{
	padding: 5px 0px;
	margin-bottom: 0px;
}
#contents #main ol li ul li{
	list-style-type: none;
}

#contents #main table{
	margin: 0px 0px 30px 0px;
	border-bottom: #005BAC solid 1px;
}
#contents #main table th,
#contents #main table td{
	padding: 15px;
	border-top: #005BAC solid 1px;
}
#contents #main table th{
	color: #005BAC;
	font-weight: bold;
}
#contents #main table tr.total th{
    background-color:rgba(255,255,255,0.6);
}
#contents #main table tr.total td{
    background-color:rgba(255,255,255,0.6);
    color:#EA6188;
    font-weight: bold;
    font-size:120%;
}
#contents #main img{
    border-radius: 10px;
}
#contents #main .explanation img,
#contents #main img.logoimg{
    border-radius: 0px;
}
#contents #main .gallery-list,
#contents #main .gallery-list2{
	width: calc(100% + 20px);
	margin-bottom: 40px;
	overflow: hidden;
	position: relative;
	left: -10px;
	clear: both;
	display: flex;
	flex-wrap: wrap;
}
#contents #main .gallery-list .gallery{
	width: calc(33.333% - 20px);
	margin: 0px 10px 20px;
	position: relative;
	overflow: hidden;
}
#contents #main .gallery-list2 .gallery{
	width: calc(50% - 20px);
	margin: 0px 10px 20px;
	position: relative;
	overflow: hidden;
}
#contents #main .gallery-list .gallery figure,
#contents #main .gallery-list .gallery figure figcaption,
#contents #main .gallery-list2 .gallery figure,
#contents #main .gallery-list2 .gallery figure figcaption{
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
#contents #main .gallery-list .gallery figure img,
#contents #main .gallery-list2 .gallery figure img{
	border-radius: 15px;
}
#contents #main .gallery-list .gallery figure figcaption h4,
#contents #main .gallery-list2 .gallery figure figcaption h4{
	margin: 0;
}

@media all and (max-width: 768px){
#contents #main .gallery-list,
#contents #main .gallery-list2{
	width: 100%;
	left: 0;
}
#contents #main .gallery-list .galler,
#contents #main .gallery-list2 .gallery{
	width: 100%;
	margin: 0 0 20px;
}	
}

/* home css
----------------------------------------- */
#home #main-visual ul.slider{
	margin: 20px 0;
	padding: 0;
}
#home #main-visual ul.slider li{
	margin: 0;
	padding: 0 15px!important;
}
#home #main-visual ul.slider img{
border-radius: 0px;
}

/* massage */
#home #massage-section{
	padding: 50px 0;
	text-align: center;
}
#home #massage-section h2{
	margin: 0px 15px;
}
#home #massage-section p{
	color: #005BAC;
	font-weight: bold;
	text-shadow: 0px 0px 10px #FFF;
}
@media all and (max-width: 640px){
#home #massage-section{
	padding: 50px 20px;
}
}

/* facility */
#facility-section{
	padding: 0 0 75px;
	/*background: rgb(246,249,252);
	background: linear-gradient(0deg, rgba(246,249,252,1) 0%, rgba(246,249,252,1) 55%, rgba(246,249,252,0.25) 80%, rgba(246,249,252,0) 100%);*/
}
#facility-section .content-wapper{
	max-width: 1080px;
	display: flex;
	flex-wrap: wrap;
}
#facility-section .content-wapper .facility{
	width: calc(100% / 4);
}
#facility-section .content-wapper .facility dl{
	margin: 0px 15px;
	padding: 0px;
}
#facility-section .content-wapper .facility dl dt{
	margin: 0px 0px 15px;
	padding: 0px;
	text-align: center;
}
#facility-section .content-wapper .facility dl dd{
	margin: 15px 0px;
	padding: 0px;
}
#facility-section .content-wapper .facility dl dd img{
	border-radius: 15px;
}
#facility-section .content-wapper .facility dl dd a.btn{
	padding: 10px;
	display: block;
}
@media all and (max-width: 1000px){
#facility-section .content-wapper .facility{
	width: calc(100% / 2);
}	
}
@media all and (max-width: 640px){
#facility-section .content-wapper .facility{
	width: 100%;
}	
}


/* care css
----------------------------------------- */
#contents .care #main p.explanation img{
	float: left;
	width: 184px;
	margin-right: 30px;
}
#contents .care #main .service-article{
	margin-bottom: 20px;
	clear: both;
}
#contents .care #main .service-article h4,
#contents .care #main .service-article p{
	float: right;
	width: calc(100% - 330px);
	margin-top: 0;
}
#contents .care #main .service-article p.img{
	float: left;
	width: 300px;
	margin: 0 0 20px;
}
#contents .care #main .service-article p.img img{
	border-radius: 15px;
}
#contents .care #main .flow-article ol{
	margin-left: 0;
}
#contents .care #main .flow-article ol li{
	margin-bottom: 20px;
	padding: 10px 20px 10px 10px;
	background-color: #FFF;
	border-radius: 10px;
}
#contents .care #main .flow-article ol > li::before{
	color: #005BAC;
	font-size: 135%;
	font-weight: normal;
	margin-right: 0.5rem;
}
#contents .care #main .price-article .left,
#contents .care #main .price-article .right{
	width: calc(50% - 35px);
}
#contents .care #main .price-article table{
	width: 100%;
}
#contents .care #main .price-article table th{
	width: 180px;
}
@media all and (max-width: 768px){
#contents .care #main p.explanation img{
	float: none;
	margin: 0 auto 15px;
	display: block;
}
#contents .care #main .service-article h4,
#contents .care #main .service-article p,
#contents .care #main .service-article p.img,
#contents .care #main .price-article .left,
#contents .care #main .price-article .right:not(td){
	float: none;
	width: 100%;
}
}


/* nursing css
----------------------------------------- */
#contents .nursing #main p.explanation img{
	float: left;
	width: 361px;
	margin-right: 30px;
}
#contents .nursing #main .equipment-section .left,
#contents .nursing #main .equipment-section .right{
	width: calc(50% - 35px);
	margin-bottom: 35px;
}
@media all and (max-width: 768px){
#contents .nursing #main p.explanation img{
	float: none;
	margin: 0 auto 15px;
	display: block;
}
#contents .nursing #main .equipment-section .left,
#contents .nursing #main .equipment-section .right{
	float: none;
	width: 100%;
}
}


/* event css
----------------------------------------- */
#contents .event #main .equipment-section .left,
#contents .event #main .equipment-section .right{
	width: calc(50% - 35px);
	margin-bottom: 35px;
}

@media all and (max-width: 768px){
#contents .event #main p.explanation img{
	float: none;
	margin: 0 auto 15px;
	display: block;
}
#contents .event #main .equipment-section .left,
#contents .event #main .equipment-section .right{
	float: none;
	width: 100%;
}
#contents .event #main .gallery-list{
	width: 100%;
	left: 0;
}
#contents .event #main .gallery-list .gallery{
	width: calc(50% - 20px);
	margin: 0 10px 20px;
}	
}

@media all and (max-width: 640px){
#contents .event #main .gallery-list .gallery{
	width: calc(50% - 10px);
	margin: 0 5px 10px;
}	
}

/* aboutus css
----------------------------------------- */

#contents .aboutus #main .access-section .left,
#contents .aboutus #main .access-section .right{
	width: calc(50% - 35px);
	margin-bottom: 35px;
}
#contents .aboutus #main .access-section .left address p {
    margin: 15px 0 0;
    padding: 15px 0 0;
    border-top: #005BAC solid 1px;
}
@media all and (max-width: 768px){
#contents .aboutus #main .access-section .left,
#contents .aboutus #main .access-section .right{
	float: none;
	width: 100%;
}
}