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


/*
base #191919
red #ff2227
*/


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


Header


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

#header { width: 100%; z-index: 100; position: absolute; top: 0; left: 0; }
#header .mainbox { position: relative; height: 150px; }
#header .logobox { position: fixed; left: 60px; top: 40px; display: flex; align-items: center; }
#header .logo { line-height: 0; width: 200px; transition: 0.3s; }
#header .cap { line-height: 1.4; font-size: 1.4rem; padding-left: 20px; }
#index #header .cap { color: #fff; }
/* スクロール時fixed */
#header.fixed .mainbox { height: 120px; }
#header.fixed .logobox { top: 30px; left: 40px; }
#header.fixed .logo { top: 30px; width: 160px; left: 40px; }
#header.fixed .cap { display: none; }
@media screen and (max-width: 1300px) {
	#header .logo { width: 170px; left: 40px; }
	#header .cap { display: none; }
}
@media screen and (max-width: 1100px) {
	#header .logobox { top: 35px;  left: 40px;}
}
@media screen and (max-width: 767px) {
	#header .logobox { top: 25px; left: 20px; }
	#header .logo { width: 120px; }
}












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


Nav


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

#pcnav { position: fixed; right: 60px; top: 30px; transition: 0.3s; }
#pcnav ul.sub { display: flex; flex-direction: reverse; align-items: center; justify-content: flex-end; }
#pcnav ul.sub li { font-size: 1.5rem; line-height: 1; margin-left: 20px; }
#pcnav ul.sub li:first-child a { color: #191919; }
#pcnav ul.sub li:first-child a:hover { text-decoration: underline; }
#pcnav ul.sub li:nth-child(2) a { min-width: 150px; font-size: 1.5rem;  height: 40px; border-radius: 20px;}
#pcnav ul.sub li:last-child a { font-size: 3.6rem; color: #ff2227; font-family: 'Roboto', sans-serif; letter-spacing: 0.02em; position: relative; }
#pcnav ul.sub li:last-child a:after { content: ""; position: absolute; bottom: 0px; left: 50%; width: 0; z-index: 2; transition: 0.3s; font-size: 0; height: 2px; background: #ff2227; }
#pcnav ul.sub li:last-child a:hover:after  { width: 100%; left: 0; }
/* .main */
#pcnav ul.main { position: relative; margin-top:10px; width: 200%; margin-left: -100%;transition: 0.3s;  }
#pcnav ul.main { display: flex; justify-content: flex-end; align-items: center; }
#pcnav ul.main>li { margin-left: 1.5em; }
#pcnav ul.main>li a { text-decoration: none; position: relative; color: #191919; font-weight: bold; }
#pcnav ul.main>li a:hover { color: #ff2227; }
#pcnav ul.main>li.hassub .linktxt { cursor: pointer; position: relative; font-weight: bold; transition: 0.3s; }
#pcnav ul.main>li.hassub .linktxt:hover { color: #ff2227; }
#pcnav ul.main>li.hassub .linktxt:after { content: url(../img/common/arr1.svg); position: absolute; bottom: -20px; left: calc(50% - 4px); width: 8px; z-index: 2; transition: 0.3s; font-size: 0rem; }
#pcnav ul.main>li.hassub .linktxt:hover:after { bottom: -12px; }
#pcnav ul.main>li.hassub.sub-open .linktxt:after { bottom: -12px; }
#pcnav ul.main>li.hassub .linktxt:before { content: ""; position: absolute; bottom: -22px; left: 50%; width: 0; z-index: 2; transition: 0.3s; font-size: 0; height: 2px; background: #ff2227; }
#pcnav ul.main>li.hassub.sub-open .linktxt:before { width: 100%; left: 0; }
/* sub */
#pcnav ul.main>li>.sub { display: none; position: absolute; top: 66px; right: 0; box-sizing: border-box; background: #fff; animation: subfadein 0.3s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 normal both; z-index: 1;}
#pcnav ul.main>li>.sub .inbox { display: flex; padding: 50px 60px 20px 60px; } 
#pcnav ul.main>li>.sub .title { color: #ff2227; font-size: 2.4rem; line-height: 1.5; text-align: left;  flex-shrink: 0; margin-top: 40px; font-weight: bold; margin-right: 10px; transition: 0.3s; }
#pcnav ul.main>li>.sub .title span { font-size: 2.2rem;  }
#pcnav ul.main>li>.sub ul.subnav { display: flex; }
#pcnav ul.main>li:nth-child(2)>.sub ul.subnav { flex-wrap: wrap; width: 594px; }
#pcnav ul.main>li>.sub ul.subnav li { width: 168px; margin-left: 30px; margin-bottom: 20px; }
#pcnav ul.main>li>.sub ul.subnav li .imgbox { width: 100%; height: 130px; margin-bottom: 5px; overflow: hidden; }
#pcnav ul.main>li>.sub ul.subnav li .imgbox img { object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height: 100%; transition: 0.3s; }
#pcnav ul.main>li>.sub ul.subnav li p { color: #191919; transition: 0.3s;}
#pcnav ul.main>li>.sub ul.subnav li a:hover p { color: #ff2227; }
#pcnav ul.main>li>.sub ul.subnav li a:hover .imgbox img { transform: scale(1.05); }

#index #pcnav ul.sub li:first-child a { color: #fff; }
#index #pcnav ul.main>li a { color: #fff; }
#index #pcnav ul.main>li a:hover { color: #ff2227; }
#index #pcnav ul.main>li.hassub .linktxt { color: #fff; }
#index #pcnav ul.main>li.hassub .linktxt:hover { color: #ff2227; }
#index #pcnav.change ul.sub li:first-child a { color: #191919; }
#index #pcnav.change ul.main>li a { color: #191919; }
#index #pcnav.change ul.main>li a:hover { color: #ff2227; }
#index #pcnav.change ul.main>li.hassub .linktxt { color: #191919; }
#index #pcnav.change ul.main>li.hassub .linktxt:hover { color: #ff2227; }
#pcnav.change ul.main>li>.sub { background: #f2f2f2; }

#header.fixed #pcnav { right: 40px; top: 20px; }
#header.fixed #pcnav ul.sub li:last-child a { font-size: 3.2rem; }
#header.fixed #pcnav ul.sub li:nth-child(2) a { height: 30px; }
#header.fixed #pcnav ul.main { margin-top:5px; }
@media screen and (max-width: 1300px){
	#pcnav { right: 40px; }
}
@media screen and (max-width: 1100px){
	#pcnav { display: none; }
}


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

#gnav { display: none; }
@media screen and (max-width: 1100px){
	#gnav { z-index: 1000; position: fixed; top: 0; right: -480px; display: block; /* height: 100vh;*/ width: 480px; background: #ff2227; 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 calc(3vh + 10px); }
	#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 .contactbox { width: 100%; padding: 20px 0 80px; }
	#gnav .contactbox .telbox a { font-size: 3.2rem; color: #fff; letter-spacing: 0.02em; line-height: 1;}
	#gnav .contactbox .telbox a .icon { width: 28px; font-size: 0; vertical-align: -2px; margin-right: 8px; }
	#gnav .contactbox .telbox .txt1 { font-size: 1.5rem; color: #fff; }
	#gnav .contactbox .mailbox { margin-top: 20px;}
	#gnav .contactbox .mailbox li { margin-top: 10px; }
}
@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 .contactbox .telbox a { font-size: 2.6rem; }
	#gnav .contactbox .telbox a .icon { width: 22px; vertical-align: -2px; margin-right: 5px; }
	#gnav .contactbox .telbox .txt1 { font-size: 1.3rem; }
}
@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: 40px; right: 0; display: block; background: transparent; width: 80px; height: 40px; transition: 1.15s cubic-bezier(0.25, 1, 0.5, 1) 0s; cursor: pointer; z-index: 1001; }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; }
	#menubtn a .line { width: 80px; height: 2px; background: #ff2227; position: absolute; left: 50%; margin-left: -40px; transition: 1.15s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; }
	#menubtn a #line1 { top: 10px; }
	#menubtn a #line2 { top: 20px; }
	#menubtn a #line3 { top: 30px; }
	#menubtn a:hover #line1 { top: 20px; }
	#menubtn a:hover #line2 { top: 20px; }
	#menubtn a:hover #line3 { top: 20px; }
	#menubtn .txt { top: 20px; font-size: 1.8rem; left: -60px; position: absolute; top: 1px; color: #ff2227; transition: 0.3s; }
	#menubtn.active a .line { background: #fff; }
	#menubtn .txt.close { opacity: 0;}
	#menubtn.active a #line1 { top: 20px; }
	#menubtn.active a #line2 { top: 20px; }
	#menubtn.active a #line3 { top: 20px; }
	#menubtn.active .txt.menu { opacity: 0; }
	#menubtn.active .txt.close { opacity: 1; color: #fff;}
}
@media screen and (max-width: 767px){
	#menubtn { top: 25px; width: 60px; height: 30px; }
	#menubtn a .line { width: 60px; margin-left: -30px; }
	#menubtn a #line1 { top: 8px; }
	#menubtn a #line2 { top: 15px; }
	#menubtn a #line3 { top: 22px; }
	#menubtn a:hover #line1 { top: 15px; }
	#menubtn a:hover #line2 { top: 15px; }
	#menubtn a:hover #line3 { top: 15px; }
	#menubtn .txt { top: 20px; font-size: 1.6rem; left: -50px; top: -2px; }
	#menubtn .txt.close { opacity: 0;}
	#menubtn.active a #line1 { top: 15px; }
	#menubtn.active a #line2 { top: 15px; }
	#menubtn.active a #line3 { top: 15px; }
}










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


Mainv.under


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

#mainv.under { position: relative; width: 100%; margin-top: 140px; height: calc(300px + 20vw); }
#mainv.under img { object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height: 100%; }
#mainv.under .pagetitle { position: absolute; left: 10%; top: 50%; color: #fff; }
#mainv.min { margin: 320px 0 100px; text-align: center; }
#mainv.min .pagetitle .title { margin-bottom: 30px; color: #191919; }
#mainv.min .pagetitle .en { color: #191919; }
@media screen and (max-width: 1500px){
	#mainv.under { height: 600px; }
}
@media screen and (max-width: 1100px){
	#mainv.under { height: 480px; margin-top: 120px; }
}
@media screen and (max-width: 767px){
	#mainv.under { height: 280px; margin-top: 84px; }
	#mainv.under .pagetitle { left: 8%; top: 54%; }
}












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


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: 200px; margin-bottom: 160px; }
#article.index { margin-top: 0; margin-bottom: 160px; }
@media screen and (max-width: 767px) { 
	#article { margin-top: 80px; margin-bottom: 100px; }
	#article.index { margin-top: 0; margin-bottom: 0; }
}










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


Cntside


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

#side {  }










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


Footer


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

#footer {  }

/* contactbox */
#footer .contactbox { padding: 80px 0; background: url(../img/common/f_bg.jpg) no-repeat; background-position: center center; background-size: cover; }
#footer .contactbox .inbox { display: flex; align-items: center; padding: 80px; background: #fff; }
#footer .contactbox .inbox .txtbox { text-align: center; flex: 1; margin-right: 60px; }
#footer .contactbox .inbox .txtbox .title { font-size: 3.6rem; color: #ff2227; font-family: 'Roboto', sans-serif; letter-spacing: 0.02em; line-height: 1; margin-bottom: 20px; }
#footer .contactbox .inbox .txtbox .txt1 { text-align: justify; }
#footer .contactbox .inbox .linkbox .telbox { display: flex; align-items: center;}
#footer .contactbox .inbox .linkbox .telbox a { font-size: 3.2rem; color: #ff2227; letter-spacing: 0.02em; line-height: 1; }
#footer .contactbox .inbox .linkbox .telbox a .icon { width: 28px; font-size: 0; vertical-align: -2px; margin-right: 8px; }
#footer .contactbox .inbox .linkbox .telbox .txt1 { font-size: 1.5rem; margin-left: 20px; color: #ff2227;  line-height: 1.8; }
#footer .contactbox .inbox .linkbox .mailbox { margin-top: 30px; display: flex; align-items: center;}
#footer .contactbox .inbox .linkbox .mailbox li { margin-left: 10px; }
#footer .contactbox .inbox .linkbox .mailbox li:first-child { margin-left: 0; }
#footer .contactbox .inbox .linkbox .mailbox li a.btn.base { min-width: 0; padding: 0 30px; }
@media screen and (max-width: 1100px) { 
	#footer .contactbox .inbox .linkbox .telbox { display: block; }
	#footer .contactbox .inbox .linkbox .telbox .txt1 { margin-left: 0; display: block;  }
	#footer .contactbox .inbox .linkbox .mailbox { margin-top: 30px; display: block; }
	#footer .contactbox .inbox .linkbox .mailbox li { margin-left: 0; margin-top: 10px; }
	#footer .contactbox .inbox .linkbox .mailbox li a.btn.base { min-width: 180px; padding: 0 30px; }
}
@media screen and (max-width: 767px){
	#footer .contactbox { padding: 60px 0; }
	#footer .contactbox .inbox { display: block; padding: 8%; }
	#footer .contactbox .inbox .txtbox { text-align: center; flex: auto; margin-right: 0; }
	#footer .contactbox .inbox .txtbox .title { font-size: 2.6rem; }
	#footer .contactbox .inbox .linkbox .mailbox { text-align: center; }
	#footer .contactbox .inbox .linkbox .mailbox li a.btn.base { min-width: 240px; max-width: 100%; padding: 0 30px; }
	#footer .contactbox .inbox .linkbox .telbox { text-align: center; margin-top: 30px; }
	#footer .contactbox .inbox .linkbox .telbox a { font-size: 2.6rem; }
	#footer .contactbox .inbox .linkbox .telbox a .icon { width: 22px; }
	#footer .contactbox .inbox .linkbox .telbox .txt1 { font-size: 1.3rem; }
}
@media screen and (max-width: 500px) {
	#footer .contactbox .inbox .linkbox .mailbox li a.btn.base { width: 100%; min-width: 100%; }
}

/* #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;}
}
@media screen and (max-width: 500px) { 
	#pagetop { right: 20px; bottom: 20px; }
}

/* mainbox */
#footer .mainbox { padding: 60px 0; background: #f7f7f7; }
#footer .mainbox .incnt { display: flex; justify-content: space-between; }
#footer .mainbox .footerinfo .logobox { width: 260px; }
#footer .mainbox .footerinfo .txt1 { font-size: 1.5rem; margin-top: 30px; text-align: left; }
#footer .mainbox .footerinfo .txt1 + .txt1 { margin-top: 10px; }
#footer .mainbox #fnav { display: flex; }
#footer .mainbox #fnav ul.main { margin-left: 40px; }
#footer .mainbox #fnav ul.main .linktxt,
#footer .mainbox #fnav ul.main>li>a { font-size: 1.6rem; font-weight: bold; margin-bottom: 5px;  }
#footer .mainbox #fnav ul.sub { font-size: 1.5rem; line-height: 1.8; }
#footer .mainbox #fnav .hassub + .hassub { margin-top: 20px; }
#footer .mainbox #fnav .mainlist ul li a:hover { text-decoration: underline; }
#footer .mainbox #fnav .insta { font-size: 2.0rem; position: absolute; bottom: 0; right: 0; }
#footer .mainbox #fnav .insta .icon { width: 24px; margin-left: 0; vertical-align: -3px; display: inline-block; transition: 0.3s; }
#footer .mainbox #fnav .insta:hover { color: #ff2227; }
@media screen and (max-width: 1100px) {
	#footer .mainbox {  }
	#footer .mainbox #fnav { display: none; }
}
@media screen and (max-width: 767px) {
	#footer .mainbox .footerinfo .txt1 { font-size: 1.4rem; }
}
@media screen and (max-width: 500px) {
	#footer .mainbox .footerinfo .logobox { width: 210px; }
	
}

/* outrobox */
#footer .cr { background: #ff2227; text-align: center; width: 88%; color: #fff; font-size: 1.5rem; padding: 10px 6%; }
#footer .outrobox .txtbox { text-align: center; padding: 0 8%; color: #fff; }
#footer .outrobox .txtbox .txt1 { font-size: 2.4rem; margin-bottom: 0px; }
#footer .outrobox .txtbox .cr { font-size: 1.4rem; }
@media screen and (max-width: 767px) {
	#footer .outrobox .txtbox .txt1 { font-size: 1.8rem; }
	#footer .outrobox .txtbox .cr { font-size: 1.2rem; }
}