@charset "UTF-8";
/* CSS Document */

/* PC HEADER */
#header { width:100%; padding: 0; box-sizing: border-box; margin: 0 auto; position: relative; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; border-bottom: 1px solid #ccc;}
#header .inBox{ max-width: 1900px; padding: 0 20px; box-sizing: border-box; margin: 0 auto; position: relative; width: 100%;}
#header h1{ width: 200px; box-sizing: border-box; display: table; height: 100px; text-align: center; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
#header h1 span{ display: table-cell; vertical-align: middle;}
#header h1 span img{ max-width: 200px; width: 100%;}

#gNavi { padding:0 0 0 0 ; box-sizing: border-box; max-width: 1556px; width:calc( 100% - 240px ); margin: 0 0 0 240px;}
#gNavi ul { width:calc( 100% - 145px) /*100%*/;  /*max-width: 1200px;*/ padding: 10px 0; box-sizing: border-box;  margin: 0 auto 0 0; min-height: 98px; display: flex; justify-content:flex-start; align-items: center; flex-wrap: wrap; position: relative;}
#gNavi ul li { float:left; font-size: 1.5rem; margin: 5px 8px; } 

#gNavi ul li a{ text-decoration: none; line-height: 1.2; display: flex; align-items: center; color: #000; padding: 0.2em 0.8em; position: relative; z-index: 9999;} 
#gNavi ul li a:hover,
#gNavi ul li a.active {color: #006db0; }
#gNavi ul li a:hover:before,
#gNavi ul li a.active:before { opacity:1; }
#gNavi ul li a.comingSoon { position: relative; color: hsla(0,0%,0%,0.40);}
#gNavi ul li a.comingSoon:hover{ color: hsla(0,0%,0%,0.20);}
#gNavi ul li a.comingSoon:hover:before{ position: absolute; content: 'Coming Soon' ; letter-spacing: 0; color: #000; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 0.9rem; text-align: center; line-height: 1.6rem; pointer-events: none; display: block; width: 8em; padding: 0; }
#gNavi ul li a.end { color: hsla(0,0%,0%,0.40); pointer-events: none;}

#sns{ width: 145px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#sns ul { display: flex; justify-content: flex-start;  align-items: center; padding: 0 20px 0 0; height: 100px;}
#sns li{ width: 35px; text-align: center; margin-left: 10px;}
#sns li:first-child{ margin-left: 0;}
#sns li a{ color: #000; }
#sns li i { font-size: 2.2rem;}
#sns li a:hover {color: #006db0; }

/* SP HEADER for CONTENT PAGE */
#spHeader { display:none; position:absolute; width:100%; top:0; left:0; z-index:99999; overflow:visible; border-bottom: 1px solid #ccc;}
#spHeader #spHeaderBox { padding:80px 0 0 0; position:relative; background-color:#fff; z-index:99998;}
#spHeader #spHeaderBox h2 { display:block; position:absolute; width:220px; left:20px; top: 0; height: 100%; max-width: 50%; }
#spHeader #spHeaderBox h2 a { display:block;}
#spHeader #spHeaderBox p a { display:block; position:relative; padding:6.15% 0 0 0;}
#spHeader #spHeaderBox h2 img { display:block; width:100%; height:auto; position:absolute; top:50%; left:50%; transform: translateY(-50%) translateX(-50%); }
#spHeader #spNavi { top:0; left:0; width:100%; height:0px; margin:0 0 0 0; overflow:hidden; position:fixed; transition:opacity 0.5s ease-in 0s; z-index:99999; padding:0 0 0 0; box-sizing:border-box; opacity:0; background:hsla(0,0%,100%,0.90); }
#spHeader #spNavi.active { height:100%; padding:80px 0 0 0; opacity:1; }
#spHeader #spNavi ul { box-sizing:border-box; padding:30px 20px; height:100%; overflow:auto; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; text-align: center; }
#spHeader #spNavi ul li { display:block; width:100%; float:none; box-sizing:border-box; position:relative; z-index:9999; margin-bottom: 3.5rem}
#spHeader #spNavi ul li i{ margin: 0 0 0 0.2em;}
#spHeader #spNavi ul li a { display:block; font-size:1.9rem; text-align:l; color:#000; line-height:1.2em; text-decoration:none; }
#spHeader #spNavi ul li a.active{ color: #006db0;}
#spHeader #spNavi ul li a:hover{ color: #006db0;}
#spHeader #spNavi ul li a.comingSoon { position: relative; color: hsla(0,0%,0%,0.40);}
#spHeader #spNavi ul li a.comingSoon:hover{ color: hsla(0,0%,0%,0.20);}
#spHeader #spNavi ul li a.comingSoon:hover:before{ position: absolute; content: 'Coming Soon' ; letter-spacing: 0; color: #000; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 0.9rem; text-align: center; line-height: 16px; pointer-events: none; display: block; width: 8em; padding: 0; }
#spHeader #spNavi ul li a.end { color: hsla(0,0%,0%,0.40); pointer-events: none;}

#spHeader #spNavi ul li.sns{ display: flex; align-items: center; justify-content: center; }
#spHeader #spNavi ul li.sns a { margin-right: 2em; font-size: 2.2rem}
#spHeader #spNavi ul li.sns a:last-child{ margin-right: 0;}
#spHeader #spNavi ul li.logo{ margin-top: 6rem; }
#spHeader #spNavi ul li.logo img{ width: 218px; max-width: 70%;}
#spHeader .spMenu {position:fixed; display:block; width:auto; height:33px; top:40px; right:30px; transform: translateY(-50%) ; z-index:999999; }

/*ハンバーガーメニューアニメーション*/
#spHeaderBox li a.menu-trigger:hover,#spHeaderBox li a.menu-trigger span:hover{ opacity: 1;}
.menu-trigger,.menu-trigger span { display: inline-block; transition: all .6s; box-sizing: border-box; z-index: 999999; }
.menu-trigger { position: relative; width: 36px; height: 30px; cursor: pointer;}
.menu-trigger span { position: absolute; left: 0; width: 100%;  height: 4px; background-color: #333; border-radius: 4px; box-shadow: 0 0 10px #fff;}
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 13px; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger.active span {background-color: #000; }
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(13px) rotate(-43deg); transform: translateY(13px) rotate(-43deg); }
.menu-trigger.active span:nth-of-type(2) { opacity: 0;}
.menu-trigger.active span:nth-of-type(2):hover{ opacity: 0 !important;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-13px) rotate(43deg); transform: translateY(-13px) rotate(43deg); }

/* FOOTER */
#footer { width: 100%; padding: 40px 0 100px; font-size: 1.2rem; text-align: center; box-sizing: border-box; margin: 0; position: relative; background-color: #fff; }
#footer.border{ border-top: 1px solid #ccc;}
#footer .title{ width: 400px; margin: 0 auto 20px; max-width: 60%;}
#footer .logo_group{ margin: 40px auto 25px; padding: 0 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
#footer .logo_group img{ margin: 0 15px 15px; }
#footer .logo_group img:nth-child(1){ margin-bottom: 20px; }
#footer .ib:first-child{ margin: 0 15px;}
#footer a{ color: #333; margin: 0 15px 0 15px;}
#page-top{ position: fixed; right: 20px; bottom: 20px; z-index: 9999;}
#page-top img{transition: .5s ; }
#page-top:hover img{ animation: swing 1s;}

.footer_btn{ background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%, rgba(255,255,255,1) 100%); animation : fadeInUp 0.5s; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9998 !important; padding: 30px 20px 10px;}
.footer_btn .inner{ max-width: 700px; margin: 0 auto; }
.footer_btn .inner a{ font-family: 'Noto Sans JP', sans-serif; width: 80%; margin: 0 auto; font-size: 1.6rem; padding: 10px 1em; border-radius: 4px; display: block; text-align: center; background-color: #cc0000; color: #fff; font-weight: 900; text-decoration: none;}
.footer_btn .inner a:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f138"; margin-left: 1em;}
.footer_btn .inner a:hover{ background-color:#ff0000; }

/* COMMON */
.commonContent{ width: 1040px; padding: 0 20px; margin: 0 auto; box-sizing: border-box; max-width: 100%;}
h3.pageTitle{ font-family: 'Noto Sans JP', sans-serif; font-weight: 900; text-align: center; font-size: 3.6rem; padding: 80px 0; margin: 0 auto; line-height: 1.5; }
h3.pageTitle.sub{ font-size: 3rem; padding: 80px 0 60px;}
h3.pageTitle .txt{ display: block; font-size: 80%;}
.title{ font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-style: normal;}
.title_bg_yellow{font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 2rem; padding: 0.5em 1em; border-radius: 30px; background-color:#fef35f; }

/*ローカルナビゲーション*/
.local_navi{ margin: 0 auto 60px; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; font-weight: 500; }
.local_navi a{ background-color: #333; font-size: 23px; line-height: 1; width: calc( (100% - 14px)/2); margin-right: 10px; color: #fff; text-align: center; padding: 0.7em 1em 0.7em; box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; border-radius: 4px; border: 2px solid #333; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.local_navi a:before{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0a9"; margin-right: 0.5em; font-size: 90%;}
.local_navi a.active:before{content: "\f0ab";}

.local_navi a:last-child{margin-right: 0 !important;}
.local_navi a:hover{ opacity: 1 !important;}
.local_navi a:hover,.local_navi a.active{text-decoration: none; background-color: #fff; color: #333; font-size: 28px;}
.local_navi a.comingSoon{ color: hsla(0,0%,100%,0.40); pointer-events: none; position: relative;}
.local_navi a.comingSoon:after{content: 'coming soon'; font-size: 1rem; color: #fff;  position: absolute; top: 50%; left: 50%; transform: translate( -50% , -50% ); }
.local_navi a.close:after{ content: '※終了しました'; font-size: 1rem; margin: 10px 10px 0; display: inline-block;}

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

}
@media screen and (max-width:780px) {
body { padding:80px 0 0 0; }

/* HEADER */
#header { display:none; }	
	
/* SP HEADER for CONTENT PAGE */
#spHeader { display:block; }

/*#footer a{ margin:0; display: block;}*/
	
#page-top{ width: 85px; bottom: 10px;}
.footer_btn .inner a{ width: 80%; max-width: calc( 100% - 100px); margin: 0; }

h3.pageTitle{ font-size: 2.4rem; padding: 40px 0;}
h3.pageTitle.sub{ font-size: 2.2rem; padding: 30px 0;}
	
/* COMMON */	
.btn_more a{ font-size: 2rem; min-width: 300px;}
.local_navi a{ font-size: 3.5vw}
.local_navi a:hover,.local_navi a.active{ font-size: 4.8vw}

}

@media screen and (max-width:640px) {
.local_navi a{ font-size: 3.8vw; padding: 0.7em 0 2em; position: relative; flex-direction: column;}
.local_navi a:before{ display: block; position: absolute; bottom: 0.5em; padding: 0; left: 50%; transform: translateX(-50%);}
	
#footer .logo_group img{ margin: 0 3% 3%; }
#footer .logo_group img:nth-child(1){ width: 30%; }
#footer .logo_group img:nth-child(2){ width: 16% }
#footer .logo_group img:nth-child(3){ width: 20.5% }
#footer .logo_group img:nth-child(4){ width: 22%}
#footer .logo_group img:nth-child(5){ width: 20%}
#footer .logo_group img:nth-child(6){ width: 25%}
}

@media screen and (max-width:480px) {
.local_navi a.close:after{font-size: 2.2vw;}


}