@charset "UTF-8";

*,html	{font-family: 'Noto Sans JP', sans-serif;font-size: 16px;line-height: 180%;box-sizing: border-box}

body	{color: #000;text-align: center;letter-spacing:0.05em;word-break: break-all;overflow: hidden;overflow-y:scroll;}

img	{width: 100%;height: auto;line-height: 0}
a:hover	{opacity: 0.5;transition: all 0.5s;}
p	{margin-bottom: 1em}
p.none	{margin-bottom: 0}

/*数字リスト*/
ul.decimal	{margin: 0 0 0.5em 1.2em;list-style-type: decimal}
ul.decimal:last-child	{margin: 0 0 0 1.2em;}
/*・リスト*/
ul.disc    {margin:0;list-style-type:none;font-size:100%;}
ul.disc    li{margin-left:0;text-indent:-1em;padding-left:1em;line-height:150%;}
ul.disc    li:before{content:"・"}
/*米印リスト*/
ul.kome{margin:0;list-style-type:none;font-size:100%}
ul.kome li{margin-left:-1em;text-indent:-1em;padding-left:2em;line-height:150%}
ul.kome li:before{content:"※"}

/*改行*/
.pconly{display:inline}
.w48,.w64,.w768,.w980{display:none}
@media screen and (max-width:1100px){.pconly{display:none}}
@media screen and (max-width:980px){.w980{display:inline}}
@media screen and (max-width:768px){.w768{display:inline}}
@media screen and (max-width:640px){.w64{display:inline}.w64none{display:none}}
@media screen and (max-width:480px){.w48{display:inline}}

	/*
　WRAP / PADDING
---------------------------*/

.cwrap	{max-width: 1200px;margin: 0 auto;text-align: left;}
@media only screen and (max-width: 1200px) {.cwrap	{max-width: auto;margin: 0 3%;}}
@media only screen and (max-width: 768px) {.cwrap	{max-width: auto;margin: 0 4%;}}

.cpadding {padding: 50px 0;}
.cpadding-bottom {padding: 0 0 50px 0;}
@media only screen and (max-width: 768px) {
.cpadding {padding: 40px 0;}
.cpadding-bottom {padding: 0 0 50px 0;}
}

/*---------------------------
　:root
---------------------------*/

:root {
--head-height: 120px;/*ヘッダのメニューの高さ*/
--head-height2: -120px;/*ヘッダのメニューの高さ調整分*/

--head-height-sp: 60px;/*ヘッダのメニューの高さ*/
--head-height2-sp: -60px;/*ヘッダのメニューの高さ調整分*/

/*基本のグリーン*/
--color-green-01: #00a29a;

/*薄いグリーン*/
--color-green-02: #deedeb
}


/*---------------------------
　HEADER
---------------------------*/

#header	{height: var(--head-height);z-index:20000}

#header	{position: fixed;top: 0;left: 0;display:flex;justify-content: center;align-items: center;width: 100%;background: #fff;}

/*スクロールしたら*/
#header.on	{box-shadow: 0 2px 2px rgba(0,0,0,0.15);}

/*header layout*/
.head-inner	{display:flex;align-items: center;width: 98%;margin: 0 0 0 2%}
h1	{flex-basis: 350px;}
#g-nav	{flex-basis: calc(100% - 820px);}
.header-tel	{flex-basis: 350px;}
.header-mail	{flex-basis: var(--head-height)}


.header-logo-img	{display: block;width: 94%;margin-top: 10px;}

#g-nav	{margin-top: 30px;}
#g-nav ul	{display:flex;justify-content: flex-end;margin-right: 8%}
#g-nav li	a{display: block;font-weight: 500;padding: 1em;color: #000;text-decoration: none}
#g-nav li	a	i{margin-right: 10px;color: var(--color-green-01)}

.header-tel	{display: flex;margin-top: 5px;}
.header-tel	p	{margin: 0;}
.header-tel	.text	{display: block;width: 55px;margin-right: 10px;}
.header-tel	.telnum-block{display: block;width: 74%;}
.header-tel	.tel{display: block;margin-bottom: 5px;}
.header-tel	.tel	a:hover{opacity: 1;}
.header-tel	.uketuke	{display: block;font-size: 0.9rem;text-align: center;}

.header-mail	{display:flex;justify-content: center;align-items: center;width: 100%;height: var(--head-height);background: var(--color-green-01);text-align: center;}
.header-mail		a{color: #fff;font-size: 12px;font-weight: 500;text-decoration: none;}
.header-mail	img{ width: 54px;margin: 5px auto 3px;}

.header-sp	{display: none}

@media screen and (max-width: 1380px){
/*header layout*/
h1	{flex-basis: 300px;}
#g-nav	{flex-basis: calc(100% - 700px);}
.header-tel	{flex-basis: 280px;}
.header-tel	.uketuke	{font-size: 0.75rem;}

#g-nav li	a{padding: 1em 0.5em;}
}

@media screen and (max-width: 1200px){
/*header layout*/
h1	{flex-basis: 250px;}
#g-nav	{flex-basis: calc(100% - 610px);}
.header-tel	{flex-basis: 260px;}
.header-mail	{flex-basis: 100px}

#g-nav li	a{padding: 1em 0.5em;}
.header-tel	{margin-top: 10px;}
.header-tel	.text	{width: 45px;}
.header-tel	.uketuke	{font-size: 0.6rem;}
}

@media screen and (max-width: 1100px){
#g-nav	{margin-top: 0;}
#g-nav ul	{justify-content: flex-start;flex-wrap:wrap;}
#g-nav li	{flex-basis: 50%}
#g-nav li	a{padding: 0.5em;}

}

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

.header-sp	{display: block;}

#header	{height: var(--head-height-sp);box-shadow: 0 2px 2px rgba(0,0,0,0.1);}
.header-tel	{display: none}
.header-mail	{display: none}

h1	{flex-basis: 230px;}
.header-logo-img	{margin: 5px 0 0 2%}

#g-nav ul	{display:block;}

#g-nav{position:fixed;z-index:1;top:0;right:-120%;width:100%;height:100vh;background: var(--color-green-02);transition:all .6s}
#g-nav.panelactive{right:0}
#g-nav ul{position:absolute;z-index:1;top:50%;left:50%;width: 85%;transform:translate(-50%,-50%);}
#g-nav li{list-style:none;text-align:center}
#g-nav li a{display:block;padding: 15px 0;font-size: 1.2rem;color:#333;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-weight:700}

#g-nav li a	i{transform:rotate(-90deg);}

/*電話とメール*/
#g-nav	li.header-sp	{text-align: center;}
.header-sp-contact	{display: flex;margin: 50px auto 20px;justify-content: center;}
.header-sp-contact	.text	{display: block;width: 55px;margin-right: 10px;}
.header-sp-contact	.telnum-block{display: block;width: 230px;}
.header-sp-contact	.tel{display: block;margin-bottom: 10px;}
.header-sp-contact	.uketuke	{display: block;font-size: 0.8rem;text-align: center;}

.header-sp-mail	{width: 230px;margin: 0 auto;padding: 0;background: var(--color-green-01);color: #fff;text-align: center;}
#g-nav li .header-sp-mail		a{color: #fff;}
#g-nav li .header-sp-mail		a	i{color: #fff;transform:rotate(0deg);font-size: 1.4rem}


.openbtn{position:fixed;top:0;right:0;z-index:2;cursor:pointer;width:var(--head-height-sp);height:var(--head-height-sp);background: var(--color-green-01)}
.openbtn span{position:absolute;left:16px;height:3px;display:inline-block;transition:all .4s;border-radius:1px;background:#fff;width:45%}
.openbtn span:nth-of-type(1){top:15px}
.openbtn span:nth-of-type(2){top:23px}
.openbtn span:nth-of-type(3){top:31px}
.openbtn span:nth-of-type(4){top:39px;left:0;width: 100%;height: auto;background: none}
.openbtn span:nth-of-type(4):before{top:37px;content: 'MENU';display: block;white-space: nowrap;font-size: 0.6rem;text-align: center;opacity: 1;transition: all 0.5s;color: #fff;background: none;}
.openbtn.active span:nth-of-type(1){top:20px;left:20px;transform:translateY(6px) rotate(-45deg);width:30%}
.openbtn.active span:nth-of-type(2){opacity:0}
.openbtn.active span:nth-of-type(3){top:32px;left:20px;transform:translateY(-6px) rotate(45deg);width:30%}
.openbtn.active span:nth-of-type(4):before{opacity: 0}
}


/*---------------------------
　MAIN
---------------------------*/

#maincontents	{padding-top: var(--head-height);}
.adjustment {padding-top:  var(--head-height);margin-top: var(--head-height2);}

#main	{position: relative;padding-bottom: 30px;}

@media screen and (max-width:980px){
#maincontents	{padding-top: var(--head-height-sp);}
.adjustment {padding-top:  var(--head-height-sp);margin-top: var(--head-height-sp2);}
}


/*---------------------------
　FOOTER
---------------------------*/

#footer	{display:flex;align-items: center;width: 100%;margin: 0;padding: 15px 2%}
#footer	p{margin: 0}

.footer-logo	{flex-basis: 360px;}
.footer-contact	{flex-basis: 350px;}
.footer-link	{flex-basis: calc(100% - 700px);}

.footer-logo-img	{display: block;width: 310px;}

.footer-contact	{display: flex;}
.footer-contact	.telnum-block{display: block;width: 260px;}
.footer-contact	.text	{display: block;width: 55px;margin-right: 10px;}
.footer-contact	.tel{display: block;width: 100%;margin-bottom: 10px;}
.footer-contact	.tel	img{width: 250px;}
.footer-contact	.tel	a{opacity: 1;}
.footer-contact	.uketuke	{display: block;font-size: 1rem;text-align: center;}


.footer-link		{display:flex;justify-content: flex-end}
.footer-link		a{display: block;font-weight: 500;padding: 1em;color: #000;text-decoration: none}
.footer-link		a	i{margin-right: 10px;color: var(--color-green-01)}

@media screen and (max-width: 1280px){
.footer-logo	{flex-basis: 280px;}
.footer-contact	{flex-basis: 240px;}
.footer-link	{flex-basis: calc(100% - 570px);}
.footer-logo-img	{display: block;width: 250px;}
.footer-contact	.telnum-block{display: block;width: 230px;}
.footer-contact	.text	{display: block;width: 35px;margin-right: 10px;}
.footer-contact	.tel	img{width: 200px;}
.footer-contact	.uketuke	{font-size: .8rem;}

.footer-link		a{padding: 1em 0.5em;}

}

@media screen and (max-width: 980px){
#footer	{flex-wrap: wrap;}
.footer-link	{flex-basis:90%;margin: 10px 0 0 0}
}


@media screen and (max-width: 768px){
#footer	{padding: 40px 5% 20px}
}

@media screen and (max-width: 640px){
.footer-logo{padding-bottom: 30px;}
.footer-contact	{margin-bottom: 5px;}
.footer-link	{flex-wrap: wrap;}
.footer-link	li	{flex-basis: 50%;padding: 0 0 0.3em 0;text-align: left;}
.footer-link	li	i{transform:rotate(-90deg);}
}


/*---------------------------
　PAGETOP
---------------------------*/

.pagetop{position: fixed;display: block;bottom: 0; right: 0;margin: 0;text-align: right;z-index: 1000;}
.pagetop    a{display: block;background: rgba(0,0,0,0.53); color: #fff;width: 40px;height: 40px;line-height: 38px;text-align: center;font-size: 180%;}
.pagetop    a:hover    {background: var(--color-green-01);color: #fff;}

@media screen and (max-width:768px){
.pagetop    a{width: 40px;}
.pagetop    span{display: none}
.pagetop    a   i{margin-right:0;}
}