html {
  font-size: calc(10 * (100vw / 750));
}


body {
  background: #F8F8F8;
	font-family: var(--baseFont);
	font-weight: 400;
  color: #000000;
  font-size: 2.8rem;
  line-height: 1.5;
}

/**************************************
wrap
**************************************/
#wrap{
	width: 100%;
	margin: 0 auto;
  opacity: 0;
  overflow: hidden;
  transition: opacity .3s ease;
}

#wrap.active{
  opacity: 1;
  overflow: auto;
}


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


/**************************************
btn
**************************************/
.btnBlack > a,
.btnBlack > button,
.btnBlack > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10.4rem;
  background: #000000;
  border-radius: 5.2rem;
  padding: 0 7.2rem 0 7.2rem;
  font-weight: 700;
  font-size: 3.2rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
  transition: var(--hoverTransition);
}

.btnBlack > a::after,
.btnBlack > button::after,
.btnBlack > span::after{
  content: '';
  display: block;
  width: 3.2rem;
  height: 1.8rem;
  background: url("../img/common/icon_arrow_white_sp.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 4rem;
  top: calc(50% - 0.9rem);
}


/**************************************
#header
**************************************/
#header{
	display: block;
	width: 100%;
  padding: 5.6rem 5rem 1rem;
  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%;
  margin: 0 auto;
}


#header .headLogo{
  display: block;
  width: 16.6rem;
}

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

#header .headLogo img{
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0);
  transition: filter .3s ease;
}


/** headNav **************/
#headNav{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 6.6rem;
  position: absolute;
  top: 6.9rem;
  right: 5rem;
  z-index: 3;
}

#headNav > .openBtn{
  display: block;
  width: 100%;
  height: 3.5rem;
  position: relative;
  z-index: 10;
}


#headNav > .openBtn > span,
#headNav > .openBtn::before,
#headNav > .openBtn::after{
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: #000000;
  position: absolute;
  left: 0;
  transition: all 0.3s ease; 
}

#headNav > .openBtn > span{ top: calc(50% - 1.5px);}
#headNav > .openBtn::before{top: 0;}
#headNav > .openBtn::after{bottom: 0;}

#headNav > .openBtn.open > span{opacity: 0;}
#headNav > .openBtn.open::before{
  width: 7.3rem;
  background: #FFFFFF;
  transform: rotate(26deg);
  top: calc(50% - 1.5px);
}
#headNav > .openBtn.open::after{
  width: 7.3rem;
  background: #FFFFFF;
  transform: rotate(-26deg);
  top: calc(50% - 1.5px);
}

/** .navBox ****************/
#headNav > .navBox{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100dvh;
  width: calc(100vw - 15rem);
  padding: 24rem 7.2rem 10.4rem;
  background: #000000;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  transition: transform 0.3s ease,opacity 0.2s ease;
  transform: translate(100%,0);
  backface-visibility: hidden;
  pointer-events: none;
}


#headNav > .openBtn.open + .navBox{
  z-index: 2;
  opacity: 1;
  transform: translate(0,0);
  pointer-events: auto;
}


#headNav > .navBox > ul.contentsNav{
  order: 1;
  display: block;
  margin-bottom: 12rem;
}

#headNav > .navBox > ul.contentsNav > li + li{
  margin-top: 4rem;
}

#headNav > .navBox > ul.contentsNav > li  > a{
  font-family: var(--titleFont);
  font-size: 6.4rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  color: #FFFFFF;
}

#headNav > .navBox > ul.snsLinks{
  order: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 6.4rem;
}

#headNav > .navBox > ul.snsLinks > li{
  height: 5.6rem;
}

#headNav > .navBox > ul.snsLinks > li  > a{
  display: block;
  height: 100%;
}

#headNav > .navBox > ul.snsLinks > li  > a > img{
  display: block;
  width: auto;
  height: 100%;
}



#headNav > .navBox > .shopBtn{
  order: 3;
  display: block;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 12rem;
}

#headNav > .navBox > .shopBtn > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 12.8rem;
  background: #000000;
  border: 1px solid #FFFFFF;
  border-radius: 6.4rem;
  padding: 0 0 0 0;
  font-family: var(--titleFont);
  font-weight: 400;
  font-size: 6.4rem;
  text-align: center;
  line-height: 1.5;
  text-decoration: none;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
}


#headNavBG{
  display: block;
  width: 100%;
  height: 100dvh;
  width: 100vw;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(2rem);
  backdrop-filter: blur(2rem);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: backdrop-filter 0.3s ease,opacity 0.2s ease;
  transform: translate(100%,0);
  backface-visibility: hidden;
  pointer-events: none;
}

#headNavBG.open{
  z-index: 1;
  opacity: 1;
  transform: translate(0,0);
  pointer-events: auto;
}


/**************************************
footer
**************************************/
#footer{
	display: block;
	width: 100%;
	padding: 7.4rem 5rem 3rem;
  background: #000000;
	position: relative; 
}


#footer .footLogo{
  display: block;
  width: 25.4rem;
  margin: 0 auto 7.9rem;
}
#footer .footLogo > a,
#footer .footLogo img{
  display: block;
  width: 100%;
  height: auto;
}


#footNav{
  display: block;
  margin-bottom: 10.4rem;
}

#footNav ul.snsLinks{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 4.8rem;
  margin: 0 auto 16rem;
}

#footNav ul.snsLinks > li{
  height: 5.6rem;
}

#footNav ul.snsLinks > li > a{
  display: block;
  height: 100%;
}

#footNav ul.snsLinks > li > a > img{
  display: block;
  width: auto;
  height: 100%;
}

#footNav .yokohama{
  display: block;
  text-align: center;
  margin: 0 auto 5.6rem;
}

#footNav .yokohama > a{
  font-family: var(--otherFontNormal);
  font-size: 4.0rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}



#footNav ul.contentsNav{
  display: block;
  text-align: center;
}


#footNav ul.contentsNav > li + li{
  margin-top: 2.4rem;
}

#footNav ul.contentsNav > li > a{
  color: #FFFFFF;
  font-size: 2.8rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
}


#footer .footCopy{
  font-family: var(--otherFontNormal);
  font-size: 2.4rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 400;
  text-align: center;
}



/**************************************
#main
**************************************/
#main{}


/* mainTTL  *******/
#main .mainTTL{
  display: block;
  font-family: var(--titleFont);
  font-size: 12.8rem;
  color: #000000;
  line-height: 1;
  text-align: center;
}

#main .mainTTL::first-letter{
  font-size: 20rem;
  color: #E64747;
}


/**************************************
page-numbers
**************************************/
#main ul.page-numbers{
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
  width: 100%;
  margin: 8rem auto 0;
  padding: 0 5rem;
  gap: 1rem 4.8rem;
}

#main ul.page-numbers > li{
  display: block;
  font-family:  var(--otherFontNormal);
}

#main ul.page-numbers > li > a{
  display: block;
  font-size: 3.2rem;
  font-weight: 400;
  color: #6B6B6B;
}

#main ul.page-numbers > li.prev,
#main ul.page-numbers > li.next{display: none;}


#main ul.page-numbers > li.current > span{
  display: block;
  font-size: 3.6rem;
  font-weight: 400;
  color: #000000;
}

#main ul.page-numbers > li.dots > span{
  display: block;
  font-size: 3.2rem;
  font-weight: 400;
  color: #6B6B6B;
}
#main ul.page-numbers > li.dots > span::after{content: '...';}



/**************************************
contents404
**************************************/
#main .contents404{
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc(100dvh - 48.7rem);
  padding: 30rem 5.4rem 16rem;
  position: relative;
}



#main .contents404 > h1{
  display: block;
  padding-bottom: 2.4rem;
  margin-bottom: 2.4rem;
  font-size: 6.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #000000;
  position: relative;
}

#main .contents404 > h1::after{
  content: '';
  display: block;
  width: 6.4rem;
  height: 1px;
  background: #A6A6A6;
  position: absolute;
  left: calc(50% - 3.2rem);
  bottom: 0;
}


#main .contents404 > .text{
  display: block;
  font-size: 2.8rem;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
}


#main .contents404 > .text a{
  color: #3889FF;
  text-decoration: underline;
}


#main .contents404 .contents404BG{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  z-index: -1;
}

#main .contents404 .contents404BG::after{
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  background: url("../img/common/background_gray_sp.jpg") center center repeat;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}


/**************************************
loading
**************************************/
#loading{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color:#F8F8F8;
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

#loading.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#loading.remove{display: none;}


#loading .loadingSpinner {
	fill: none;
	stroke: dodgerblue;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 187 207;
	animation: loader 1.4s infinite cubic-bezier(.4,0,.3,1), loading 1.4s infinite linear, loadingcolors 5.6s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 187; }
	to { stroke-dashoffset: -187; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

@keyframes loadingcolors {
  0% { stroke: #2F3743; }
  25% { stroke: #979BA1; }
  50% { stroke: #2F3743; }
  75% { stroke: #979BA1; }
  100% { stroke: #2F3743; }
}

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