@charset "UTF-8";
/* 
CSS base.css */
/*
base #1b1919
green #19ad5a
red #f90307
*/


/*///////////////////////////////////
Header
///////////////////////////////////*/

#logo {  }
#logo img { position: fixed; top: 40px; left: 50px; width: 138px; z-index: 1000;}
#logo img:first-child { transition: opacity 0.5s 0s ease; opacity: 1;}
#logo img:last-child { transition: opacity 0.5s 0s ease; opacity: 0;}
#logo.scroll img:first-child { opacity: 0;}
#logo.scroll img:last-child { opacity: 1;}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 767px) {
	#logo {  }
	#logo img { width: 95px; top: 20px; left: 20px;}
}
@media screen and (max-width: 500px) {
}


/*///////////////////////////////////
Nav
///////////////////////////////////*/




/*///////////////////////////////////
Mainv.under
///////////////////////////////////*/

#mainv.under { width: 100%; position: relative; height: 500px; display: flex; justify-content: center; align-items: center;}
#mainv.under .bg { position: absolute; top: 0; left: 0; object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height: 100%; z-index: -1; }
@media screen and (max-width: 1100px){
    #mainv.underv { height: 400px; }
}
@media screen and (max-width: 767px){
    #mainv.under { height: 320px; }
}
@media screen and (max-width: 500px){
    #mainv.under { height: 260px; }
}



/*///////////////////////////////////
Pankuzu
///////////////////////////////////*/

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



/*///////////////////////////////////
Content
///////////////////////////////////*/

#article.under { }
@media screen and (max-width: 767px) { 
	#article.under { }
}



/*///////////////////////////////////
Backtoindex
///////////////////////////////////*/

#backtoindex { }
#backtoindex a { width: 100%; font-size: 2.2rem; transition: 0.3s; font-style: italic;}
#backtoindex a:hover { background: #1b1919; }
@media screen and (max-width: 767px) {
	#backtoindex a { font-size: 1.8rem; }
}



/*///////////////////////////////////
Footer
///////////////////////////////////*/

#footer {  }

/* footerinfo */
#footer .fcontactbox{ color: #fff; position: relative; }
#footer .fcontactbox .bg { position: absolute; top: 0; left: 0; object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height: 100%; z-index: -1; }
#footer .fcontactbox .txtbox .entitle { margin-bottom: 30px;}
#footer .fcontactbox .txtbox .maincopy { margin-bottom: 60px;}
#footer .fcontactbox .txtbox .maincopy img { width: 924px; }
#footer .fcontactbox .txtbox .maincopy img:last-child { display: none; }
#footer .fcontactbox .txtbox ul.caution { margin-top: 10px; line-height: 1.8;}
#footer .fcontactbox ul.contact { display: flex; align-items: center; margin-top: 120px;}
#footer .fcontactbox ul.contact>li a.tel { font-size: 48px; color: #fff; margin-right: 40px;}
#footer .fcontactbox ul.contact>li a.tel::before { content:url(../img/common/icon_tel_w.svg); width: 40px; height: 40px; font-size: 0; display: inline-block; transition: 0.3s; vertical-align: -4px; margin-right: 8px;}
#footer .fcontactbox ul.contact>li a.mail { font-size: 34px; color: #fff; font-feature-settings: "palt";}
#footer .fcontactbox ul.contact>li a.mail::before { content:url(../img/common/icon_mail_w.svg); width: 42px; height: 38px; font-size: 0; line-height: 0; display: inline-block; transition: 0.3s; vertical-align: -3px; margin-right: 8px;}
#footer .fcontactbox ul.contact>li a.mail:hover { transition: 0.3s; text-shadow: 0 0 20px rgb(255, 255, 255, 0.6);}
#footer .fcontactbox .txt2 br { display: none; }
@media screen and (max-width: 1100px){
	#footer .fcontactbox .txtbox .maincopy img { width: 739px; }
	#footer .fcontactbox ul.contact { display: flex; align-items: center; }
	#footer .fcontactbox ul.contact>li a.tel { font-size: 42px; margin-right: 30px;}
	#footer .fcontactbox ul.contact>li a.tel::before { width: 36px; height: 36px; vertical-align: -4px; margin-right: 8px;}
	#footer .fcontactbox ul.contact>li a.mail { font-size: 30px; ;}
	#footer .fcontactbox ul.contact>li a.mail::before { width: 38px; height: 36px; vertical-align: -3px; margin-right: 8px;}
}
@media screen and (max-width: 767px){
	#footer .fcontactbox .txtbox .entitle { margin-bottom: 20px;}
	#footer .fcontactbox .txtbox .maincopy { margin-bottom: 40px;}
	#footer .fcontactbox .txtbox .maincopy img { width: 318px; }
	#footer .fcontactbox .txtbox .maincopy img:first-child { display: none; }
	#footer .fcontactbox .txtbox .maincopy img:last-child { display: block; }
	#footer .fcontactbox .txtbox ul.caution { margin-top: 10px; line-height: 1.8;}
	#footer .fcontactbox ul.contact { display: block; margin-top: 60px; margin-bottom: 10px;}
	#footer .fcontactbox ul.contact>li a.tel { font-size: 30px; margin-right: 0; line-height: 1.6;}
	#footer .fcontactbox ul.contact>li a.tel::before { width: 30px; height: 30px; vertical-align: -4px; margin-right: 8px;}
	#footer .fcontactbox ul.contact>li a.mail { font-size: 22px; ;}
	#footer .fcontactbox ul.contact>li a.mail::before { width: 30px; height: 28px; vertical-align: -3px; margin-right: 8px;}
}
@media screen and (max-width: 500px){
	#footer .fcontactbox .txt2 br { display: block; }
	#footer .fcontactbox .txt2 span { display: none; }
}
/* copyright */
#footer #copyright { padding: 300px 8%; display: flex; justify-content: center; align-items: center;}
#footer #copyright .logo { width: 140px; margin-right: 20px;}
#footer #copyright .cr { font-size: 1.8rem;}
@media screen and (max-width: 767px){
	#footer #copyright { padding: 200px 6%;}
	#footer #copyright .logo { width: 95px; }
	#footer #copyright .cr { font-size: 1.4rem;}
}
@media screen and (max-width: 500px){
	#footer #copyright { display: block; text-align: center;}
	#footer #copyright .logo { width: 95px; margin-right: 0; margin-bottom: 15px; }
	#footer #copyright .cr { font-size: 1.3rem;}
}