html {
    font-size: 62.5%;
}

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

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;
}
a:hover{opacity: .7;}

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


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

#outerWrap.lock,
#outerWrap.pcLock{
	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:not(.disabled) > a:hover,
.btnNext:not(.disabled) > button:hover,
.btnNext:not(.disabled) > span:hover,
.btnNext:not(.disabled) > input[type="submit"]:hover{
  opacity: .7;
}


.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 35px 0 35px;
	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: center;
  width: 100%;
  /*max-width: 1920px;*/
  height: 100%;
  margin: 0 auto;
  position: relative;
}


#header .headLogo{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 11.8rem;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  left: 0;
  top: 0;
}

#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;}

#headNav{
  display: block;
  width: calc(100% - 11.8rem * 2);
  height: 100%;
  margin: 0 auto;
}

#headNav > .headNavInner{display: block; height: 100%;}
#headNav > .headNavInner > ul{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 3.8rem;
  height: 100%;
}

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


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


#footer .footInner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem 0;
  width: 100%;
  max-width: 1734px;
  margin: 0 auto;
  padding: 0 0 0 0;
  position: relative;
}


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

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

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

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

/* footNav ***/
#footer .footNav{
  display: block;
  width: calc(100% - 24rem - 18rem);
}


#footer .footNav > ul{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 3.6rem;
  margin: 0 auto;
}

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


/* cuspa ***/
#footer .footInner .cuspa{
  display: block;
  width: 18rem;
  margin: 0 0 0 auto;
  text-align: right;
}
#footer .footInner .cuspa > a{
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0;
  text-align: left;
  line-height: 1;
  color: #414141;
  text-decoration: none;
}


/* cuspa ***/
#footer .footCopy{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 3.6rem;
  width: 100%;
}

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

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


/**************************************
common parts
**************************************/
.subTTL{
  display: block;
  padding-bottom: 1.6rem;
  margin-bottom: 5rem;
  font-size: 2.4rem;
  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;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.mainTTLBlcok.kiwami{background: #A72026;}
.mainTTLBlcok.yawara{background: #16307D;}
.mainTTLBlcok.black{background: #0B100F;}

.mainTTLBlcok .outer{}
.mainTTLBlcok.noImg .outer{
  padding: 0.8rem 0 3.9rem;
}


.mainTTLBlcok .outer > .mvBgText{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.mainTTLBlcok .outer > .mvBgText > img{display: block; width: 100%; height: auto;}

.mainTTLBlcok .outer > picture{
  display: block;
  width: 100%;
  height: 35rem;
  margin: 0 0 0 auto;
  overflow: hidden;
  position: relative;
}


.mainTTLBlcok .outer > picture.shadow::after{
  content: '';
  display: block;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg,#000 0%, rgba(0, 0, 0, 0.76) 61.09%, rgba(255, 255, 255, 0) 100%);
  /*background: #D1200D;*/
  opacity: 0.88;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}


.mainTTLBlcok picture img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.mainTTLBlcok.kiwami picture img,
.mainTTLBlcok.yawara picture img{object-position: right center;}


.mainTTLBlcok .outer .text{
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}


.mainTTLBlcok.noImg .outer .text{
  position: relative;
}

.mainTTLBlcok .outer .text > .inner{
  display: block;
  max-width: calc(1734px + 70px);
  margin: 0 auto;
  padding: 5rem 35px 0;
  text-align: left;
}

.mainTTLBlcok .outer .text .mainTTL{
  display: block;
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #FFFFFF;
}

.mainTTLBlcok .outer .text .mainTTL > span{
  display: block;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.mainTTLBlcok .outer .text .lede{
  display: block;
  max-width: 60rem;
  font-size: 1.4rem;
  font-weight: 300;
  color: #FFFFFF;
  line-height: 2.666666666666667;
  letter-spacing: 0.1em;
  font-feature-settings: 'palt';
}

.mainTTLBlcok .outer .text .mainTTL + .lede{
  margin-top: 2rem;
}


.mainTTLBlcok .outer .text .lede.shadow{
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, 0px 2px 0 #000, 0 -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;
}


/**************************************
.breadcrumbs
**************************************/
.breadcrumbs{
  display: block;
  width: 100%;
  max-width: calc(1734px + 70px);
  margin: 0 auto;
  text-align: left;
  position: relative;
  z-index: 2;
}

.breadcrumbs.noTTL{
  width: 100%;
  max-width: none;
  /*
  background: linear-gradient(to right,#000 0%, #000 64.04%, rgba(0, 0, 0, 0.24) 85.71%, rgba(255, 255, 255, 0) 100%);
  */
  background: #D1200D;
  opacity: 1;
}


.breadcrumbs > ol{
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
  max-width: calc(1734px + 70px);
  height: 2rem;
  padding: 0 35px 0;
	margin: 0 auto;
  position: absolute;
  left: 0;
  top: 0.8rem;
}

.breadcrumbs.noTTL > ol{
  /*height: 3.5rem;*/
  position: relative;
}

.breadcrumbs > ol > li{
	display: block;
  padding-right: 1em;
	font-size: 1.2rem;
	line-height: 1.4rem;
	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
**************************************/
.spView{display: none!important;}