@charset "UTF-8";

:root {

--skyblue: #82d2e6;
--skyblue2: #d9f1f7;
--orange: #ffb45a;
--black: #3c3c3c;
--green: #8cc63f;
--pink: #faaacd;

}


.with-loader .sample-text {
  visibility: hidden;
}

.wf-loading .with-loader .sample-text {
  visibility: hidden;
}

.wf-active .with-loader .sample-text {
  visibility: visible;
  font-family: 'Noto Sans JP', sans-serif;
}

.wf-inactive .with-loader .sample-text {
  visibility: visible;
}


/*-------------------------
__base_style
-------------------------*/
body{font-family: "Zen Maru Gothic", sans-serif;font-weight: 700;color:var(--black);background: #fff;}
body.active{height:100%;overflow:hidden;position:relative;}

#wrap{}
h1{}
a{text-decoration:none;}

.sph_on{display:none;}
.tab_on{display:none;}

#wrap:not(.top) #content {padding-top:100px;}
#content #main .inner{margin:0 auto;max-width:1200px;padding:20px 50px 50px;box-sizing:border-box;}

@media screen and (max-width:959px) {
	.tab_on{display:block;}
}
@media screen and (max-width:767px) {
	.sph_on{display:block;}
	#content #main .inner{padding:20px 20px 40px;}
	#wrap:not(.top) #content {padding-top:75px;}
}
@media screen and (max-width:374px) {
	#content #main .inner{padding:20px 10px 30px;}
}


/*-------------------------
__header
-------------------------*/
#header{margin:0 auto;padding: 0 50px;box-sizing:border-box;}
#header .header_inner{position:relative;}
#header .header_inner{
.head_logo{color:var(--black);font-size:22px;font-weight:900;position:fixed;top:25px;left:30px;transition:.3s;text-align:left;z-index:999;}
.head_logo span{font-size:40px;}
}
#header .header_inner #navi{
.head_nav{display:flex;gap:30px;position:absolute;right:235px;top:25px;}
.head_nav li{}
.head_nav li a{font-weight:900;transition:.3s;display:block;}
.head_nav li a .en{font-size:14px;color:var(--black);display: block;}
.head_nav li a .ja{font-size:18px;color:#fff;}
.head_fixed_nav{position:fixed;top:0;right:0;display:flex;gap:10px;z-index:999;flex-direction:row-reverse;}
.head_fixed_nav .contact{background:var(--orange);border-radius:0 0 20px 20px;transition:.3s;height:85px;}
.head_fixed_nav .contact a{font-weight:900;display:block;padding:20px;box-sizing:border-box;line-height: 1.4;height: 100%;}
.head_fixed_nav .contact a .en{font-size:14px;color:var(--black);margin-bottom:10px;}
.head_fixed_nav .contact a .ja{font-size:18px;color:#fff;}
/*hamburger_menu*/
.head_fixed_nav .toggle{background:var(--black);border-radius:0 0 0 20px;padding:20px;box-sizing:border-box;position:relative;cursor:pointer;transition:.3s;height:85px;}
.head_fixed_nav .toggle::before{content:"MENU";position:relative;font-size:14px;color:#fff;}
.head_fixed_nav .toggle span {transition: all .5s;position: absolute;height: 2px;background-color: #fff;width: 48px;z-index: 10;left: 16px;}
.head_fixed_nav .toggle span:nth-of-type(1) {top: 44px;}
.head_fixed_nav .toggle span:nth-of-type(2) {top: 52px;}
.head_fixed_nav .toggle span:nth-of-type(3) {top: 60px;}
.head_fixed_nav .toggle.active span:nth-of-type(1) {top: 51px;transform: rotate(380deg);}
.head_fixed_nav .toggle.active span:nth-of-type(2) {display:none;transition:.3s;}
.head_fixed_nav .toggle.active span:nth-of-type(3) {top: 51px;transform: rotate(-380deg);}
.head_fixed_nav .toggle.active + .contact{opacity:0;pointer-events:none;}
}

#wrap:not(.top) #header .header_inner #navi{
.head_nav li a .en{color:var(--skyblue);}
.head_nav li a .ja{color:var(--black);}
}

.ham_nav{opacity: 0;transition:.3s;z-index:-10;background:var(--skyblue);position:fixed;top:0;right:0;margin:auto;}
.ham_nav.active{opacity: 1;transform:translateY(0%);z-index:99;overflow: auto;}
.ham_nav .ham_nav_wrap{height:100vh;width:600px;}
.ham_nav .ham_nav_wrap .ham_nav_inner{padding:85px 50px 50px;box-sizing:border-box;margin:auto;}
.ham_nav .ham_nav_wrap .ham_nav_inner{
.ham_nav_link{}
.ham_nav_link li{font-size:20px;border-bottom:1px solid #fff;}
.ham_nav_link li a{padding:30px 0;box-sizing:border-box;color:#fff;transition:.3s;display:flex;position:relative;}
.ham_nav_link li a::before,
.ham_nav_link li a::after {content: "";width: 10px;height: 3px;display: inline-block;border-radius: 2px;background: #fff;position: absolute;right: 20px;transition:.3s;}
.ham_nav_link li a::before {top: calc(50% - 4px);transform: rotate(45deg);}
.ham_nav_link li a::after {bottom: calc(50% - 4px);transform: rotate(-45deg);}
}
body .overlay{position: absolute;top:0;left:0;width:100%;height:100%;z-index: 0;background-color: rgb(0 0 0 / 32%);opacity: 0;transition: .3s; pointer-events: none;}
body.active .overlay{z-index: 9;opacity: 1;cursor: pointer; pointer-events:auto;}


@media screen and (min-width:768px) {
	#header .header_inner #navi .head_fixed_nav .contact:hover{background:var(--green);}
	#header .header_inner #navi	.head_nav li a:hover{opacity:.6;}
	#header .header_inner #navi	.head_fixed_nav .toggle:hover{background:#222;}
	#header .header_inner .head_logo:hover{opacity:.6;}
	
	.ham_nav .ham_nav_wrap .ham_nav_inner .ham_nav_link li a:hover{opacity: .8;}
	.ham_nav .ham_nav_wrap .ham_nav_inner .ham_nav_link li a:hover::before,
	.ham_nav .ham_nav_wrap .ham_nav_inner .ham_nav_link li a:hover::after {right: 30px;}
}

@media screen and (max-width:1199px) {
	#header .header_inner{
	.head_logo{font-size:18px;top:20px;}
	.head_logo span{font-size:34px;}
	}
	#header .header_inner #navi{
	.head_nav{gap:20px;right:185px;top:20px;}
	.head_nav li a .en{font-size:12px;}
	.head_nav li a .ja{font-size:14px;}

	.head_fixed_nav{position:fixed;top:0;right:0;display:flex;gap:10px;z-index:999;flex-direction:row-reverse;}
	.head_fixed_nav .contact{height:80px;border-radius:0 0 10px 10px;}
	.head_fixed_nav .contact a .en{font-size:12px;}
	.head_fixed_nav .contact a .ja{font-size:14px;}
	/*hamburger_menu*/
	.head_fixed_nav .toggle{height:80px;border-radius:0 0 0 10px;}
	.head_fixed_nav .toggle::before{content:"MENU";font-size:12px;}
	.head_fixed_nav .toggle span {width: 40px;left: 16px;}
	.head_fixed_nav .toggle span:nth-of-type(1) {top: 44px;}
	.head_fixed_nav .toggle span:nth-of-type(2) {top: 52px;}
	.head_fixed_nav .toggle span:nth-of-type(3) {top: 60px;}
	.head_fixed_nav .toggle.active span:nth-of-type(1) {top: 51px;transform: rotate(380deg);}
	.head_fixed_nav .toggle.active span:nth-of-type(2) {display:none;transition:.3s;}
	.head_fixed_nav .toggle.active span:nth-of-type(3) {top: 51px;transform: rotate(-380deg);}
	.head_fixed_nav .toggle.active + .contact{opacity:0;pointer-events:none;}
	}
}
@media screen and (max-width:959px) {
	#header .header_inner{
	.head_logo{line-height:1.2;}
	}
	#header .header_inner #navi .head_nav{display:none;}
}
@media screen and (max-width:767px) {
	#header .header_inner{
	.head_logo{font-size:16px;top:10px;left:10px;}
	.head_logo span{font-size:24px;}
	}
	.ham_nav .ham_nav_wrap{width:100vw;}
	.ham_nav .ham_nav_wrap .ham_nav_inner{padding:85px 10px 10px;}
	.ham_nav .ham_nav_wrap .ham_nav_inner{
	.ham_nav_link li{font-size:18px;}
	.ham_nav_link li a{padding:20px 0;}
	}
	#header .header_inner #navi{
	.head_fixed_nav .contact{height:60px;}
	.head_fixed_nav .contact a{padding:10px;}
	/*hamburger_menu*/
	.head_fixed_nav .toggle{padding:10px;height:60px;}
	.head_fixed_nav .toggle span {left: 10px;width: 33px;}
	.head_fixed_nav .toggle span:nth-of-type(1) {top: 29px;}
	.head_fixed_nav .toggle span:nth-of-type(2) {top: 37px;}
	.head_fixed_nav .toggle span:nth-of-type(3) {top: 45px;}
	.head_fixed_nav .toggle.active span:nth-of-type(1) {top: 36px;transform: rotate(380deg);}
	.head_fixed_nav .toggle.active span:nth-of-type(3) {top: 36px;transform: rotate(-380deg);}
	}
}


/*-------------------------
__content
-------------------------*/
.topic_path{clear:both;margin:0 auto;max-width:1200px;padding:20px 50px;box-sizing:border-box;}
.topic_path ul{width:100%;text-align:left;}
.topic_path li{font-size:1.4em;line-height:1.4;font-weight:700;color:var(--black);vertical-align:top;display:inline-block;}
.topic_path li:before{content:">";color:var(--black);font-weight:400;margin-left:5px;margin-right:5px;}
.topic_path li:first-child:before{content:"";margin:0;}
.topic_path li a{font-weight:400;color:var(--skyblue);;text-decoration:underline;}
.topic_path li a:hover{text-decoration:none;}

@media screen and (max-width:959px) {
	
}
@media screen and (max-width:767px) {
	.topic_path{padding:10px 20px 0;}
}
@media screen and (max-width:374px) {
	.topic_path{padding:10px 10px 0;}
}

/*-------------------------
__footer
-------------------------*/
#footer{background:var(--skyblue);border-radius:50px 50px 0 0;color:#fff;}
#footer .footer_wrap{padding: 75px 80px 30px;}
#footer .footer_wrap .footer_inner{display: flex;justify-content: space-between;}
#footer .footer_wrap .footer_inner .left{text-align:left;width:380px;
.foot_ttl{margin-bottom:15px;color:#fff;font-weight:900;}
.foot_ttl a{font-size:28px;color:#fff;transition: .3s;}
.foot_ttl a span{font-size:45px;}
.foot_tel{font-size:30px;color:#fff;margin-bottom:15px;position:relative;font-weight:900;}
.foot_tel::before{content:"";position:absolute;background-image: url(/images/free_icon.png);background-repeat:no-repeat;width:30px;height:20px;left:0;top: 8px;background-size: 100%;pointer-events:none;}
.foot_tel a{color:#fff;pointer-events:none;transition:.3s;}
.foot_tel a span{margin-left:45px;}
.foot_add,
.foot_fax,
.foot_hours{font-size:16px;color:#fff;margin-bottom:15px;}
.contact_wrap{background:#fff;border-radius:10px;transition: .3s;}
.contact_wrap a{font-size:16px;color:var(--skyblue);font-weight:900;width:380px;padding: 20px 50px 20px 150px;display: block;box-sizing: border-box;line-height:1.4;position:relative;transition: .3s;}
.contact_wrap a::before{content:"";position:absolute;background-image: url(/images/contact_icon.png);background-repeat:no-repeat;width:40px;height:30px;left:90px;top:36px;background-size: 100%;}
.contact_wrap a span{font-size:24px;}
}
#footer .footer_wrap .footer_inner .right{display:flex;flex-direction:column;text-align:right;justify-content:space-between;width:calc(100% - 400px);
.main_nav,
.sma_nav{display:flex;gap:30px;justify-content:flex-end;flex-wrap:wrap;}
.main_nav li{font-size:18px;font-weight:900;}
.main_nav li a,
.sma_nav li a{color:#fff;transition: .3s;}
.sma_nav li{font-size:14px;font-weight:900;}
.right_wrap .copy{font-size:12px;margin-top:20px;}
}

#footer #scr_wrap {
.scr_txt { width: 100%; display: flex; overflow: hidden; color:rgba(0,0,0,.0); text-align:center; -webkit-text-stroke: 2px #FFF; height:140px;}
.scr_txt_first,
.scr_txt_second { flex-shrink: 0; width: auto; height: auto; display: inline-block; text-wrap: nowrap; white-space: nowrap; font-size: 150px;}
.scr_txt_first {animation: anim--first 75s infinite linear 0.1s both;}
.scr_txt_second {animation: anim--second 75s infinite linear 0.1s both;}
}

@keyframes anim--first {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes anim--second {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}


@media screen and (min-width:768px) {
	#footer a:hover{opacity:.6;}
	.contact_wrap:hover{opacity:.8;}
}

@media screen and (max-width:959px) {
	#footer{border-radius:30px 30px 0 0;}
	#footer .footer_wrap{padding: 40px 20px 20px;}
	#footer .footer_wrap .footer_inner{flex-wrap:wrap;gap:20px;}
	#footer .footer_wrap .footer_inner .left{width:100%;text-align:center;
	.foot_ttl a{font-size:28px;}
	.foot_ttl a span{font-size:45px;}
	.foot_tel{display:inline-block;}
	.foot_tel a{pointer-events: auto;}
	.contact_wrap{width:355px;text-align:left;margin:0 auto;}
	.contact_wrap a{width:355px;padding: 20px 50px 20px 140px;}
	.contact_wrap a::before{left:80px;}
	}
	
	#footer .footer_wrap .footer_inner .right{width:100%;max-width:355px;gap:20px;margin:0 auto;text-align:center;
	.main_nav,
	.sma_nav{gap:20px;justify-content:center;}
	}
	
	#footer #scr_wrap {
	.scr_txt {height:75px;}
	.scr_txt_first,
	.scr_txt_second { font-size: 80px;}
	}
}
@media screen and (max-width:767px) {
	#footer .footer_wrap{padding: 40px 10px 20px;}
}
@media screen and (max-width:374px) {
	#footer .footer_wrap .footer_inner .left{
	.foot_ttl a{font-size:14px;}
	.foot_ttl a span{font-size:24px;}
	.foot_tel{font-size:30px;color:#fff;margin-bottom:15px;position:relative;font-weight:900;}
	.foot_tel::before{content:"";position:absolute;background-image: url(/images/free_icon.png);background-repeat:no-repeat;width:30px;height:20px;left:0;top: 8px;background-size: 100%;pointer-events:none;}
	.foot_tel a{pointer-events: auto;}
	.foot_tel a span{margin-left:45px;}
	.foot_add,
	.foot_fax,
	.foot_hours{font-size:14px;}
	.contact_wrap{width:300px;}
	.contact_wrap a{font-size:14px;width:300px;padding: 20px 30px 20px 130px;}
	.contact_wrap a::before{left:70px;top:31px;}
	.contact_wrap a span{font-size:20px;}
	}
	
	#footer .footer_wrap .footer_inner .right{
	.main_nav{flex-direction: column;}
	.main_nav li{font-size:14px;}
	}
}


.re_top{position: fixed;right: 20px;bottom: 20px;cursor: pointer;transition: .2s;display: none;width: 14px; z-index: 9; mix-blend-mode: difference;}
.re_top a{writing-mode: vertical-rl;text-decoration: none;text-transform: uppercase;height: 85px;margin: 0;text-align: right;color:#c3c3c3;font-size:14px;}
.re_top a:before {content: "";position: absolute;top: -14px;right: 19px;width: 2px;height: 20px;background: #c3c3c3;transform: skewX(-150deg);}
.re_top a:after {content: "";position: absolute;bottom: 0px;right: 25px;width: 2px;height: 100px;background: #c3c3c3;}
@media screen and (max-width:767px) {
.re_top a{height: 70px;font-size:12px;}
.re_top a:before {top: -15px;right: 16px;height: 14px;}
.re_top a:after {right: 20px;height: 86px;}
}

/*-------------------------
__error
-------------------------*/
.notfound404 #mv{background: url("/images/error_ttl_bg.jpg")no-repeat;background-position: center;background-size: cover;text-align:left;}
.notfound404 #mv .sec_ttl_wrap{margin:0 auto;padding:100px 50px;box-sizing:border-box;max-width:1200px;}
.notfound404 #mv .sec_ttl_wrap .en{font-size:24px;color:var(--skyblue);margin-bottom:10px;font-weight: 900;}
.notfound404 #mv .sec_ttl_wrap .sec_ttl{font-size:50px;color:#fff;}

.notfound404 .inner .err_main_txt{font-size: 20px;margin-bottom: 20px;line-height: 1.6;}
.notfound404 .inner .err_txt{ font-size: 16px; margin-bottom: 10px;line-height: 1.6;}
.notfound404 .inner .err_txt a{color: var(--skyblue);}

@media screen and (max-width:959px) {
	.notfound404 #mv .sec_ttl_wrap{padding:60px 50px;}
	.notfound404 #mv .sec_ttl_wrap .en{font-size:20px;}
	.notfound404 #mv .sec_ttl_wrap .sec_ttl{font-size:36px;}
}
@media screen and (max-width:767px) {
	.notfound404 #mv .sec_ttl_wrap{padding:60px 20px;}
	.notfound404 #mv .sec_ttl_wrap .sec_ttl{font-size: 28px;;}
	.notfound404 .inner .err_txt{text-align: left;}
	.notfound404 .inner .err_txt br{display: none;}
}
@media screen and (max-width:374px) {
	.notfound404 #mv .sec_ttl_wrap .en{font-size:16px;}
	.notfound404 #mv .sec_ttl_wrap .sec_ttl{font-size:24px;}
	.notfound404 #mv .sec_ttl_wrap{padding:40px 10px;}
}