@charset "UTF-8";
/* 
	
CSS base.css */


/*
base #191919
blue #0f73b5
*/


/*//////////////////


Body


//////////////////*/

body.fixed{
  width: 100%;
  position: fixed;
}









/*//////////////////


Header


//////////////////*/

#header { width: 100%; z-index: 100; position: fixed; top: 0; left: 0; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 110px; position: relative; background: #fff; transition: 0.3s;   box-shadow: 0px 3px 5px -3px rgba(0, 0, 0, 0.1); }
#header .logobox { line-height: 0; transition: 0.3s; display: flex; align-items: center; margin-left: 50px; }
#header .logobox img { width: 300px; transition: 0.3s;}
#header .logobox .cap { font-size: 1.4rem; line-height: 1.6; margin-left: 20px; }
/* スクロール時fixed */
#header.fixed .mainbox { height: 80px; }
#header.fixed .logobox img { width: 240px;}
#header.fixed .logobox .cap { display: none; }
@media screen and (max-width: 1500px) {
	#header .logobox .cap { display: none; }
	#header .logobox img { width: 280px;}
}
@media screen and (max-width: 1100px) {
	#header .mainbox { height: 90px; }
	#header .logobox { margin-left: 4%; }
	#header .logobox img { width: 240px;}
	#header .logobox .cap { display: block; }
}
@media screen and (max-width: 767px) {
	#header { height: 70px; background: #fff; }
	#header .mainbox { height: 70px; }
	#header .logobox { margin-left: 20px; }
	#header .logobox img { width: 210px;}
	#header .logobox .cap { display: none; }
}







/*//////////////////


Nav


//////////////////*/

#pcnav { position: fixed; right: 0; top: 0; transition: 0.3s; display: flex; align-items: center; }
/* .main */
#pcnav ul.main { position: relative; transition: 0.3s; display: flex; justify-content: flex-end; align-items: center; }
#pcnav ul.main>li { margin-left: 1.2em; }
#pcnav ul.main>li a,
#pcnav ul.main>li .catname { text-decoration: none; color: #191919; cursor: pointer; transition: 0.3s; }
#pcnav ul.main>li .catname:hover { color: #0f73b5; }
#pcnav ul.main>li a:hover { color: #0f73b5; }
#pcnav ul.main>li.hassub { position: relative; }
#pcnav ul.main>li.hassub ul.sub { display: none; position: absolute; top: 60px; left: 50%; margin-left: -130px; width: 260px; box-sizing: border-box; transform: 0.3s; z-index: 1; background: #0f73b5; padding: 40px 0; text-align: center; }
#pcnav ul.main>li.hassub ul.sub li { margin-bottom: 5px; }
#pcnav ul.main>li.hassub ul.sub li:last-child { margin-bottom: 0; }
#pcnav ul.main>li.hassub ul.sub li a { color: #fff; text-align: center; }
#pcnav ul.main>li.hassub ul.sub li a:hover { opacity: 0.7; text-decoration: underline; }
#pcnav ul.contactbox { margin-left: 30px; }
#pcnav ul.contactbox li { height: 55px; transition: 0.3s; }
#pcnav ul.contactbox li a { height: 100%; width: 100%; box-sizing: border-box; padding: 0 20px; display: flex; justify-content: center; align-items: center; background: #0f73b5; font-size: 2.8rem; line-height: 1; color: #fff;}
#pcnav ul.contactbox li .icon { width: 22px; font-size: 0; margin-right: 5px; }
#pcnav ul.contactbox li:nth-child(2) a { background: #f7f7f7; color: #0f73b5; font-size: 2.4rem; }
#pcnav ul.contactbox li:nth-child(2) a:hover { background: #0f73b5; color: #fff; }
#pcnav ul.contactbox li:nth-child(2) a .icon.hover { display: none; }
#pcnav ul.contactbox li:nth-child(2) a:hover .icon { display: none; }
#pcnav ul.contactbox li:nth-child(2) a:hover .icon.hover { display: block; }
#header.fixed #pcnav ul.contactbox li { height: 40px; }
#header.fixed #pcnav ul.contactbox li a { font-size: 2.4rem; }
#header.fixed #pcnav ul.contactbox li:nth-child(2) a { font-size: 2.0rem; }
#header.fixed #pcnav ul.contactbox li .icon { width: 18px; }
@media screen and (max-width: 1300px){
	#pcnav {  }
}
@media screen and (max-width: 1100px){
	#pcnav { display: none; }
}



#gnav { display: none; }
@media screen and (max-width: 1100px){
	#gnav { z-index: 1000; position: fixed; top: 0; right: -400px; display: block; /* height: 100vh;*/ width: 400px; background: #0f73b5; pointer-events: none; transition: right 1s cubic-bezier(0.25, 1, 0.5, 1) 0s; -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; }
	#gnav::-webkit-scrollbar { display:none; }
	#gnav .wrap { width: 100%; height: 100%; display: block; align-items: center; justify-content: center; /* overflow-y: scroll;*/ }
	#gnav .navbox { z-index: 10; width: 100%; padding: 0 9%; box-sizing: border-box; }
	#gnav.is-open{ pointer-events: auto; right: 0; opacity: 1;}
	#gnav ul.main { padding: calc(40px + 8vh) 0 40px; }
	#gnav ul.main>li { padding: 10px 6% 0; margin-top: 10px; border-top: 1px solid #fff; }
	#gnav ul.main>li>a,
	#gnav ul.main>li>p { font-weight: bold; font-size: 1.8rem; color: #fff; margin-bottom: 5px; }
	#gnav ul.main>li:first-child { margin-top: 0; padding-top: 0; border-top: none;}
	#gnav ul.sub>li { font-size: 1.6rem; color: #fff; line-height: 1.8; }
	#gnav ul.sub>li>a { color: #fff; }
	#gnav ul.sub>li:last-child { margin-bottom: 20px; }
	#gnav ul.contactbox { width: 100%; padding-bottom: calc(40px + 4vh); }
	#gnav ul.contactbox li { color: #fff; text-align: center; }
	#gnav ul.contactbox li a { height: 100%; width: 100%; box-sizing: border-box; padding: 0 20px; display: flex; justify-content: center; align-items: center; background: #0f73b5; font-size: 3.2rem; line-height: 1; color: #fff;}
	#gnav ul.contactbox li:nth-child(2) a { background: #f7f7f7; color: #0f73b5; font-size: 2.6rem; padding: 12px 0; margin: 15px 0 5px; }
	#gnav ul.contactbox li .icon { width: 22px; font-size: 0; margin-right: 5px; }
}
@media screen and (max-width: 767px){
	#gnav { right: -100vw; width: 100vw; }
	#gnav ul.main>li>a,
	#gnav ul.main>li>p { font-size: 1.6rem; }
	#gnav ul.sub>li { font-size: 1.4rem; }
	#gnav ul.contactbox li:nth-child(2) a { font-size: 2.4rem; }
}
@media screen and (max-width: 500px){
}
@keyframes bgfadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes bgfadeout {
  0% { visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}







/*//////////////////


Menubtn


//////////////////*/

#menubtn { display: none; }
@media screen and (max-width: 1100px){
	#menubtn { display: block; position: fixed; top: 0; right: 0; display: block; background: transparent; width: 90px; height: 90px; cursor: pointer; z-index: 1001; }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; background: #0f73b5; }
	#menubtn a .line { width: 60px; height: 2px; background: #fff; position: absolute; left: 50%; margin-left: -30px; transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; }
	#menubtn a #line1 { top: calc(50% - 11px); }
	#menubtn a #line2 { top: calc(50% - 1px); }
	#menubtn a #line3 { top: calc(50% + 9px); }
	#menubtn a:hover .line { width: 16px; margin-left: -8px; }
	#menubtn.active a .line { background: #fff; width: 40px; margin-left: -20px;}
	#menubtn.active a #line1 { top: 50%; -webkit-transform:translateY(0) translateX(0) rotate(-38deg); transform:translateY(0) translateX(0) rotate(-38deg); }
	#menubtn.active a #line2 { opacity: 0; }
	#menubtn.active a #line3 { top:  50%; -webkit-transform:translateY(-0) translateX(0) rotate(38deg); transform:translateY(-0) translateX(0) rotate(38deg); }
	#menubtn.active .txt.menu { opacity: 0; }
	#menubtn.active .txt.close { opacity: 1; color: #fff;}
}
@media screen and (max-width: 767px){
	#menubtn { width: 70px; height: 70px; }
	#menubtn a .line { width: 40px; margin-left: -20px; }
	#menubtn a #line1 { top: calc(50% - 9px); }
	#menubtn a #line3 { top: calc(50% + 7px); }
	#menubtn a:hover .line { width: 40px; margin-left: -20px; }
}











/*//////////////////


Mainv.under


//////////////////*/

#mainv.under { position: relative; width: 100%; margin-top: 110px; height: calc(300px + 20vw); display: flex; justify-content: center; align-items: center; }
#mainv.under img { object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; }
#mainv.under .pagetitle {}
@media screen and (max-width: 1500px){
	#mainv.under { height: 600px; }
}
@media screen and (max-width: 1100px){
	#mainv.under { height: 600px; margin-top: 90px; }
}
@media screen and (max-width: 767px){
	#mainv.under { height: 300px; margin-top: 70px; }
	#mainv.under .pagetitle {  }
}








/*//////////////////


Pankuzu


//////////////////*/

#pankuzu { line-height: 1.4; padding-top:18px; float: right; }
#pankuzu.min { text-align: center; float: none;}
#pankuzu ol { margin: 0 40px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 1.4rem; color: #aaa; letter-spacing: 0.05em; }
#pankuzu ol li img { width: 13px; vertical-align: 0px; margin-right: 5px; }
#pankuzu ol li:before { content:""; border-right: 1px solid #191919; border-top: 1px solid #191919; width: 4px; height: 4px; display: inline-block; margin: 0 15px 0 10px; transform: rotate(45deg); vertical-align: 2px; font-size: 0; }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a { color: #191919; }
#pankuzu ol li a:hover { text-decoration: underline; }
@media screen and (max-width: 767px) { 
	#pankuzu{ display: none; }
	#pankuzu ol { margin: 0 6%; }
}










/*//////////////////


Content


//////////////////*/

#article { margin-top: 160px; margin-bottom: 100px; }
#article.index { margin-top: 120px; margin-bottom: 0; }
@media screen and (max-width: 767px) { 
	#article { margin-top: 80px; margin-bottom: 80px; }
	#article.index { margin-top: 80px;  }
}










/*//////////////////


Cntside


//////////////////*/

#side {  }










/*//////////////////


Footer


//////////////////*/

#footer {  }

/* contactbox */
#footer .onlinetxtbox { padding: 50px 0; background: #0f73b5; color: #fff;}
#footer .onlinetxtbox .incnt { display: flex; justify-content: center; }
#footer .onlinetxtbox .copybox { margin-right: 60px; }
#footer .onlinetxtbox .copybox .copy { color: #fff; }
#footer .onlinetxtbox .txtbox { flex: 1; font-size: 1.5rem; line-height: 1.8; }
@media screen and (max-width: 1100px) {
	#footer .onlinetxtbox .copybox { margin-right: 50px; }
}
@media screen and (max-width: 767px) {
	#footer .onlinetxtbox { padding: 40px 0; }
	#footer .onlinetxtbox .incnt { display: block; }
	#footer .onlinetxtbox .copybox { margin-right: 0; }
	#footer .onlinetxtbox .copybox .copy { text-align: center; }
	#footer .onlinetxtbox .txtbox { flex: auto; font-size: 1.3rem; }
}
/* #pagetop */
#pagetop { position: fixed; right: 40px; bottom: 40px; z-index: 1; }
#pagetop a.icon { position: relative; width: 40px; height: 30px; display: block; }
#pagetop a.icon::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 26px; height: 26px; border-top: 1px solid #191919; border-right: 1px solid #191919; transform: rotate(-45deg); transition: 0.3s; }
#pagetop a.icon::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 36px; height: 1px; background: #191919; }
#pagetop a.icon:hover::before { top: 15px;}
@media screen and (max-width: 767px) { 
	#pagetop { right: 30px; bottom: 30px; }
	#pagetop a.icon { width: 30px; height: 20px; }
	#pagetop a.icon::before { width: 20px; height: 20px; }
	#pagetop a.icon::after { width: 28px; }
	#pagetop a.icon:hover::before { top: 0;}
}

/* footerinfo */
#footer .mainbox { background: #f7f7f7; padding: 100px 6% 80px; display: flex; justify-content: center; }
#footer .mainbox .leftbox { margin-right: 100px; }
#footer .mainbox .leftbox .titlebox { text-align: center; color: #0f73b5; margin-bottom: 40px; }
#footer .mainbox .leftbox .titlebox .en { font-size: 5.4rem; line-height: 1; }
#footer .mainbox .leftbox .titlebox .title { font-size: 1.8rem; }
#footer .mainbox .leftbox ul.contactbox { width: 100%; }
#footer .mainbox .leftbox ul.contactbox li { color: #0f73b5; text-align: center; }
#footer .mainbox .leftbox ul.contactbox li a { height: 100%; width: 100%; box-sizing: border-box; padding: 0 30px; display: flex; justify-content: center; align-items: center; font-size: 3.2rem; line-height: 1; color: #0f73b5;}
#footer .mainbox .leftbox ul.contactbox li .icon { width: 22px; font-size: 0; margin-right: 5px; }
#footer .mainbox .leftbox ul.contactbox li:nth-child(2) a { background: #0f73b5; color: #fff; font-size: 2.6rem; padding: 12px 0; margin: 15px 0 5px; transition: 0.3s; border: 1px solid #0f73b5; }
#footer .mainbox .leftbox ul.contactbox li:nth-child(2) a .icon.hover { display: none; }
#footer .mainbox .leftbox ul.contactbox li:nth-child(2) a:hover { background: #fff; color: #0f73b5; }
#footer .mainbox .leftbox ul.contactbox li:nth-child(2) a:hover .icon { display: none; }
#footer .mainbox .leftbox ul.contactbox li:nth-child(2) a:hover .icon.hover { display: block; }
#footer .mainbox .infobox { margin-top: 5px; }
#footer .mainbox .infobox .logobox { display: flex; align-items: center; margin-bottom: 40px; }
#footer .mainbox .infobox .logobox .logo { width: 300px; }
#footer .mainbox .infobox .logobox .cap { font-size: 1.4rem; line-height: 1.6; margin-left: 20px; }
#footer .mainbox .infobox ul.addressbox { margin-bottom: 40px; }
#footer .mainbox .infobox ul.addressbox li { margin-bottom: 10px; display: flex; }
#footer .mainbox .infobox ul.addressbox li .mincho { font-size: 1.8rem; margin-right: 30px; line-height: 1.6; }
#footer .mainbox #fnav ul.main { display: flex; }
#footer .mainbox #fnav ul.main>li { margin-left: 20px; }
#footer .mainbox #fnav ul.main>li:first-child { margin-left: 0; }
#footer .mainbox #fnav ul.main a:hover { text-decoration: underline; }
#footer .mainbox #fnav ul.main ul.sub { font-size: 1.5rem; line-height: 1.8; margin-top: 10px; }
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1100px) {
	#footer .mainbox #fnav { display: none; }
	#footer .mainbox .infobox .logobox { display: block; }
	#footer .mainbox .infobox .logobox .logo { width: 240px; }
	#footer .mainbox .infobox .logobox .cap { margin-left: 0; margin-top: 20px; line-height: 1.8; font-size: 1.6rem; }
	#footer .mainbox .infobox ul.addressbox { margin-bottom: 0; }
	#footer .mainbox .infobox ul.addressbox li { margin-bottom: 20px; display: block; }
	#footer .mainbox .infobox ul.addressbox li:last-child { margin-bottom: 0; }
	#footer .mainbox .infobox ul.addressbox li .mincho { margin-bottom: 10px; }
}
@media screen and (max-width: 767px) {
	#footer .mainbox { display: block; text-align: center; padding: 60px 6%; }
	#footer .mainbox .leftbox { margin-right: 0; }
	#footer .mainbox .leftbox .titlebox { margin-bottom: 30px; }
	#footer .mainbox .leftbox .titlebox .en { font-size: 3.4rem; line-height: 1; }
	#footer .mainbox .leftbox .titlebox .title { font-size: 1.6rem; }
	#footer .mainbox .infobox .logobox { text-align: center; margin: 40px 0 20px; }
	#footer .mainbox .infobox .logobox .logo { width: 220px; display: block; margin: 0 auto; }
	#footer .mainbox .infobox .logobox .cap { font-size: 1.4rem; }
	#footer .mainbox .leftbox ul.contactbox li:nth-child(2) a { font-size: 2.4rem; max-width: 100%; width: 320px; margin: 15px auto 5px; }
	#footer .mainbox .infobox ul.addressbox li .mincho { font-size: 1.6rem; margin-right: 0; margin-bottom: 0; }
}
@media screen and (max-width: 500px) {
	#footer .mainbox .footerinfo .logobox .logo img { width: 130px;}
	#footer .mainbox .footerinfo .infobox span { display: block!important; }
	#footer .mainbox .footerinfo .infobox br,
	#footer .mainbox .footerinfo .infobox span.shide { display: none!important; }
	#footer .mainbox #fnav { text-align: left; }
	#footer .mainbox #fnav .mainlist { margin-bottom: 30px; display: block; }
	#footer .mainbox #fnav .mainlist ul { margin-left: 0;}
}

/* outrobox */
#footer .cr { text-align: center; padding: 10px 6%; color: #0f73b5; font-size: 1.8rem; }
@media screen and (max-width: 767px) {
	#footer .cr { font-size: 1.4rem; }
}