html {
    font-size: 62.5%;
}

@media screen and (max-width: 428px) {
  html {
    font-size: calc((10 * (100vw / 428)));
  }
}

body {
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro','Noto Sans JP', sans-serif;
	font-weight: 300;
  letter-spacing: 0.1em;
  /*
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	font-feature-settings: "palt";
  */
	color: #000000;
}

a{
	color: #000000;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

input{outline:none;}
select{outline:none;}
textarea{outline:none;}


/**************************************
wrap
**************************************/
#outerWrap{
	width: 100%;
	margin: 0 auto;
}

#outerWrap.lock,
#outerWrap.spLock{
	position: fixed;
	overflow: hidden;
	top: 0;
}


/**************************************
btn
**************************************/
.btnNext > a,
.btnNext > button,
.btnNext > span,
.btnNext > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 4.4rem;
  background: #FFFFFF;
  border: 2px solid #D72122;
  padding: 0 1rem 0 1rem;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #000000;
  position: relative;
  transition: opacity 0.3s ease;
  /*transition: background 0.3s ease;*/
}


.btnNext.disabled > a,
.btnNext.disabled > button,
.btnNext.disabled > span,
.btnNext > a[disabled],
.btnNext > button[disabled],
.btnNext > span[disabled],
.btnNext > input[type="submit"][disabled]{
  background: #CCCCCC;
  pointer-events: none;
  border-color: #CCCCCC;
}


/*****************/
.btnNext2 > a,
.btnNext2 > button,
.btnNext2 > span,
.btnNext2 > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 4.4rem;
  background: #D72122;
  border: 2px solid #D72122;
  padding: 0 1rem 0 1rem;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
  /*transition: background 0.3s ease;*/
}


.btnNext2:not(.disabled) > a:hover,
.btnNext2:not(.disabled) > button:hover,
.btnNext2:not(.disabled) > span:hover,
.btnNext2:not(.disabled) > input[type="submit"]:hover{
  opacity: .7;
}


.btnNext2.disabled > a,
.btnNext2.disabled > button,
.btnNext2.disabled > span,
.btnNext2 > a[disabled],
.btnNext2 > button[disabled],
.btnNext2 > span[disabled],
.btnNext2 > input[type="submit"][disabled]{
  background: #CCCCCC;
  pointer-events: none;
  border-color: #CCCCCC;
}




/**************************************
#header
**************************************/
#header{
	display: block;
	width: 100%;
  padding-bottom: 5.5rem;
  position: relative;
}

#header > .outer{
	display: block;
	width: 100%;
	height: 5.5rem;
	padding: 0 2rem 0 2rem;
	margin: 0 auto;
	background: #FFFFFF;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
}


#header .inner{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}


#header .headLogo{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 8.425rem;
  height: 100%;
}

#header .headLogo > a{
  display: block;
  width: 100%;
}
#header .headLogo picture{display: block; width: 100%;}
#header .headLogo img{
  display: block;
  width: 100%;
}

/* headNav ******************/
#headNavOpen{display: none;}


#headNavOpen{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 0;
  width: 3rem;
  height: 100%;
}


#headNavOpen > span,
#headNavOpen::before,
#headNavOpen::after{
  display: block;
  width: 100%;
  height: 3px;
  background: #D1200D;
  transition: opacity .3s ease,transform .3s ease;
}

#headNavOpen:before,
#headNavOpen::after{
  content: '';
}

#headNavOpen.open > span{opacity: 0;}

#headNavOpen.open::before{
  transform: rotate(45deg) translate(1rem,0.6rem);
}
#headNavOpen.open::after{
  transform: rotate(-45deg) translate(1rem, -0.7rem);
}


#headNav{
  display: block;
  width: 100%;
  height: calc(100svh - 5.5rem);
  padding: 0;
  opacity: 0;
  background: #FFFFFF;
  position: fixed;
  top: 5.5rem;
  right: 0;
  z-index: -1;
  transition: transform 0.3s ease,opacity 0.2s ease;
  transform: translate(100vw,0);
  backface-visibility: hidden;
}

#headNavOpen.open + #headNav{
  transform: translate(0,0);
  opacity: 1;
  z-index: 1001;
}


#headNav > .headNavInner{
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  margin: 0 auto;
  position: relative;
}

#headNav > .headNavInner::after{
  content: '';
  display: block;
  width: 100%;
  height: 5rem;
}

#headNav > .headNavInner > ul{
  display: block;
  border-top: 1px solid #CCCCCC;
}

#headNav > .headNavInner > ul > li{display: block;}
#headNav > .headNavInner > ul > li{border-bottom: 1px solid #CCCCCC;}

#headNav > .headNavInner > ul > li > a{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 6rem;
  width: 100%;
  padding: 0 2.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  color: #D1200D;
}


/**************************************
footer
**************************************/
#footer{
  display: block;
  width: 100%;
  margin-top: 7rem;
  padding: 4.4rem 2rem 3.3rem;
  border-top: 1px solid #959595;
  position: relative;
}


#footer .footInner{
  display: block;
  width: 100%;
  margin: 0 auto;
  position: relative;
}


#footer .footInner .logo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 22.1rem;
  gap: 0 4rem;
  margin: 0 auto 6.2rem;
}

#footer .footInner .logo > a{display: block;}

#footer .footInner .logo > a.spk{ width: 8.9rem;}
#footer .footInner .logo > a.showa{ width: 10.846rem;}

#footer .footInner .logo img{display: block; width: 100%; height: auto;}

/* footNav ***/
#footer .footNav{
  display: block;
  width: 100%;
}

#footer .footNav > ul{
  display: block;
  margin: 0 auto;
}

#footer .footNav > ul > li{ text-align: center;}
#footer .footNav > ul > li + li{margin-top: 2.3rem;}

#footer .footNav > ul> li > a{
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  color: #414141;
  text-decoration: none;
}


/* cuspa ***/
#footer .footInner .cuspa{
  display: block;
  width: 100%;
  margin-top: 2.3rem;
  text-align: center;
}
#footer .footInner .cuspa > a{
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  color: #414141;
  text-decoration: none;
}


/* cuspa ***/
#footer .footCopy{
  display: block;
  width: 100%;
  margin-top: 5.3rem;
}

#footer .footCopy > p{
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.5;
  color: #707070;
  text-decoration: none;
}

#footer .footCopy > p > span{font-size: 1.5rem;}


/**************************************
common parts
**************************************/
.subTTL{
  display: block;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.666666666666667;
  color: #838383;
  text-align: center;
  position: relative;
}

.subTTL::after{
  content: '';
  display: block;
  width: 4.1rem;
  height: 0.3rem;
  background: #D72122;
  position: absolute;
  left: calc(50% - 4.1rem / 2);
  bottom: 0;
}

.subTTL.gray{ color: #4E4E4E;}
.subTTL.gray::after{background: #808080;}

/**mainTTLBlcok ***************/
.mainTTLBlcok{
  display: block;
  width: 100%;
  background: #D1200D;
  position: relative;
}
.mainTTLBlcok.kiwami{background: #A72026;}
.mainTTLBlcok.yawara{background: #16307D;}
.mainTTLBlcok.black{background: #0B100F;}

.mainTTLBlcok .outer{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.mainTTLBlcok.noImg .outer{}

.mainTTLBlcok .outer > .mvBgText{display: none;}

.mainTTLBlcok .outer > picture{
  display: block;
  width: 100%;
  height: 15.6rem;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 8rem;
}

.mainTTLBlcok picture img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.mainTTLBlcok .outer .text{
  display: block;
  width: 100%;
  order: 2;
}

.mainTTLBlcok .outer .text > .inner{
  display: block;
  padding: 1rem 2rem 2.5rem;
}

.mainTTLBlcok .outer .text .mainTTL{
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #FFFFFF;
  text-align: left;
}
.mainTTLBlcok .outer .text .mainTTL > span{
  display: block;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.mainTTLBlcok .outer .text .lede{
  display: block;
  margin: 0 auto 0;
  font-size: 1.2rem;
  font-weight: 300;
  color: #FFFFFF;
  line-height: 2.083333333333333;
  letter-spacing: 0.1em;
  text-align: left;
}

.mainTTLBlcok .outer .text .mainTTL + .lede{
  padding-top: 19.5rem;
}






/**************************************
.breadcrumbs
**************************************/
.breadcrumbs{
	display: block;
	width: 100%;
  margin: 0 auto;
	padding: 0.7rem 0 0.7rem;
  background: #D1200D;
  margin-bottom: -0.1rem;
}
.breadcrumbs.kiwami{background: #A72026;}
.breadcrumbs.yawara{background: #16307D;}
.breadcrumbs.black{background: #0B100F;}

.breadcrumbs > ol{
	display: block;
	overflow-x: scroll;
  overflow-y: hidden;
	white-space: nowrap;
	font-size: 1.0rem;
	line-height: 2rem;
	width: 100%;
  padding: 0 2rem;
	margin: 0 auto;
}
.breadcrumbs > ol::-webkit-scrollbar{display: none;}

.breadcrumbs > ol > li{
	display: inline-block;
  padding-right: 1em;
	font-size: 1.0rem;
	line-height: 2rem;
	white-space: nowrap;
  color: #FFFFFF;
  position: relative;
}
.breadcrumbs > ol > li:nth-last-of-type(1){padding-right: 0;}

.breadcrumbs > ol > li::after{
	content: '＞';
  display: inline-block;
  vertical-align: middle;
  padding-left: 1em;
}
.breadcrumbs > ol > li:nth-last-of-type(1)::after{display: none;}

.breadcrumbs > ol > li a{
	text-decoration: none;
  color: #FFFFFF;
}

/**************************************
orverRide
**************************************/
.pcView{display: none!important;}