@charset "utf-8";

/*
  File Name   : style.css
  Description : Write layout styles
*/


a:hover,a:active,a:visited,a:link {
    color: var(--color_hakuju);
}


/*
============================================================ */
/* header
============================================================ */

#lay-header {
    background: rgba(240, 251, 214, 0.9);
}

span.h-contact a {
    background-color: var(--color_hakuju);
}

span.h-number {
    background-image: url(../images/tel-h.png);
}

.lay-side-nav-toggle-btn {
    background-image: url(../images/menu-h.png);
}

.lay-side-nav-toggle-btn.active {
    background-image: url(../images/close-h.png);
}

.lay-side-nav .lay-menu-list > li > span a {
    background-image: url(../images/arrow-h.png);
}

#lay-header .lay-global-nav .lay-global-nav-inner > li > ul > li a {
    background-image: url(../images/arrow-h.png);
}

#lay-header .lay-header-search input[type="image"] {
    right: 22px;
}

@media screen and (max-width: 1100px) {
	
#lay-header .lay-header-search input[type="image"] {
    right: 18px;
}
}

@media screen and (max-width: 920px) {
	
#lay-header .lay-header-search input[type="image"] {
    right: 10px;
}
}




/*
============================================================ */
/* contents
============================================================ */

@media screen and (max-width: 440px) {

.kv-copy {
        bottom: auto;
        top: 60px;
    }
}

@media screen and (max-width: 380px) {
.kv-copy img {
        max-width: 260px;
    }
}


.facility {
    background: #fff;
	padding: 50px 30px;
}


.facility-inner {
    gap: 0 1em;
    align-items: stretch;
}

.f-orange, .f-green, .f-pink {
    width: 50%;
    text-align: center;
    font-size: 120%;
    background-image: url(../images/arrow-w.png);
    background-size: 14px;
    background-repeat: no-repeat;
    padding: 15px;
    border-radius: 100px;
    background-position: right 18px center;
	color: #fff;
	font-weight: bold;
    transition: 0.2s ease-in-out;
	display: flex;
    justify-content: center;
	align-items: center;
	line-height: 150%;
}

.f-orange a, .f-green a, .f-pink a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

.f-orange:hover, .f-green:hover, .f-pink:hover {
    transition: 0.2s ease-in-out;
    background-position: right 14px center;
}

.f-orange {
	background-color: #ee7f3f;
}

.f-green {
	background-color: #00ad93;
}

.f-pink {
	background-color: #ee6e85;
}


span.f-s{
	display: block;
	font-size: 70%;
}

span.p-br{
	display: block;
}


@media screen and (max-width: 850px) {
.facility {
    padding: 0;
}
	
.facility-inner {
    gap: 0;
    align-items: stretch;
}
	
.f-orange, .f-green, .f-pink {
    border-radius: 0;
	}
	
}



@media screen and (max-width: 700px) {
	
.f-orange, .f-green, .f-pink {
    background-size: 10px;
    background-position: right 10px bottom 10px;
}
}
	


@media screen and (max-width: 580px) {
	
.f-orange span, .f-green span, .f-pink span{
	display: block;
}
}


@media screen and (max-width: 420px) {
.f-orange, .f-green, .f-pink {
        font-size: 100%;
	    padding: 10px 15px;
	    line-height: 130%;
    }
}



.top-title .sub-title {
    color: var(--color_hakuju);
}

.news-bg {
    background-image: url(../images/n-bg-l.png), url(../images/n-bg-r.png);
	background-position: left -70px bottom, right -40px bottom;
}

@media screen and (max-width: 1040px) {
	
.news-bg {
    background-image: none;
	}
	
}

.news-more a {
    background-image: url(../images/arrow-w.png);
    background-color: var(--color_hakuju);
    color: #fff;
}

.message{
	background-color: var(--color_hakuju_pale2);
}

.message-wrap h2{
	color: var(--color_hakuju);
}




/*
============================================================ */
/* footer
============================================================ */

#lay-footer {
    background: #fff;
    background-image: url(../images/f-bg-l2.png), url(../images/f-bg-r2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left -40px bottom 180px, right bottom 180px;
    background-size: 180px, 110px;
}


@media screen and (max-width: 500px) {
#lay-footer {
    background-position: left -40px top 290px, right top 330px;
    background-size: 140px, 90px;
}
}


.f-logo-img {
	margin-top: 60px;
}

.f-logo-img img{
	width: auto;
	height: 80px;
}

@media screen and (max-width: 600px) {
.f-logo-img img {
    width: auto;
    height: 60px;
}
}

.f-logo .facility {
    margin: 20px 0 40px 0;
}




/*
============================================================ */
/* lay-main
============================================================ */


.com-side-menu-list h3 {
    background: var(--color_hakuju);;
    color: #fff;
}

.com-category-list li .title {
    background-color: var(--color_hakuju_pale2);
    background-image: url(../images/arrow2-h.png);
}

.com-category-list.-wrap-link li > a {
    background-color: var(--color_hakuju_pale2);
}


.com-btn, .com-btn:link, .com-btn:visited, .com-btn-list a, .com-btn-list a:link, .com-btn-list a:visited {
    border: 1px solid var(--color_hakuju);
    background: var(--color_hakuju);
}

.contentBody h2 {
    border-left: 8px solid var(--color_hakuju);
}