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


a{
  transition: var(--hoverTransition);
}


@media (hover: hover) {
  a:hover{opacity: var(--hoverOpacity);}
}


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

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


#wrap.lock,
#wrap.pcLock{
	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: 64px;
  background: #000000;
  border-radius: 32px;
  padding: 0 48px 0 48px;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: var(--hoverTransition);
}

.btnBlack > a::after,
.btnBlack > button::after,
.btnBlack > span::after{
  content: '';
  display: block;
  width: 24px;
  height: 12px;
  background: url("../img/common/icon_arrow_white_pc.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 24px;
  top: calc(50% - 6px);
}


@media (hover: hover) {
  .btnBlack > a:hover,
  .btnBlack > button:hover,
  .btnBlack > span:hover{opacity: var(--hoverOpacity);}
}



/**************************************
#header
**************************************/
#header{
	display: block;
	width: 100%;
  padding: 32px 40px 32px;
  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;
  position: relative;
}


#header .headLogo{
  display: block;
  width: 98.12px;
}

#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: block;
  width: calc(100% - 98.12px);
  position: relative;
}

#headNav > .openBtn{
  display: none;
}


/** .navBox ****************/
#headNav > .navBox{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 50px;
}



#headNav > .navBox > ul.contentsNav{
  order: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 50px;
}

#headNav > .navBox > ul.contentsNav > li{}

#headNav > .navBox > ul.contentsNav > li > a{
  font-family: var(--titleFont);
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  color: #000000;
  transition: color .3s ease, var(--hoverTransition);
}

#headNav > .navBox > ul.snsLinks{
  order: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 32px;
}

#headNav > .navBox > ul.snsLinks > li{
  height: 33px;
}

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

#headNav > .navBox > ul.snsLinks > li  > a > img{
  display: block;
  width: auto;
  height: 100%;
  filter: brightness(0);
  transition: filter .3s ease;
}



#headNav > .navBox > .shopBtn{
  order: 3;
  display: block;
  width: 258px;
}

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


@media screen and (max-width:1200px){
  #headNav > .navBox{
    gap: 0 calc(50 * (100vw / 1200));
  }

  #headNav > .navBox > ul.contentsNav{
    gap: 0 calc(50 * (100vw / 1200));
  }

  #headNav > .navBox > ul > li  > a{
    font-size: calc(32 * (100vw / 1200));
  }

  #headNav > .navBox > ul.snsLinks{
    gap: 0 calc(32 * (100vw / 1200));
  }

  #headNav > .navBox > ul.snsLinks > li{
    height: calc(33 * (100vw / 1200));
  }

  #headNav > .navBox > .shopBtn{
    width: calc(258 * (100vw / 1200));
  }

  #headNav > .navBox > .shopBtn > a{
    height:  calc(53 * (100vw / 1200));
    border-radius: calc(32.5 * (100vw / 1200));
    font-size: calc(32 * (100vw / 1200));
  }
}


#headNavBG{display: none;}


/**************************************
footer
**************************************/
#footer{
	display: block;
	width: 100%;
	padding: 56px 40px 24px;
  background: #000000;
	position: relative; 
}


#footer .footLogo{
  display: block;
  width: 176px;
  margin: 0 auto 40px;
}
#footer .footLogo > a,
#footer .footLogo img{
  display: block;
  width: 100%;
  height: auto;
}


#footNav{
  display: block;
  margin-bottom: 120px;
}

#footNav ul.snsLinks{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 32px;
  margin: 0 auto 80px;
}

#footNav ul.snsLinks > li{
  height: 33px;
}

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

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



#footNav ul.contentsNav{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 32px;
}


#footNav ul.contentsNav > li{}

#footNav ul.contentsNav > li > a{
  color: #FFFFFF;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: underline;
}


#footer .footCopy{
  font-family: var(--otherFontNormal);
  font-size: 14px;
  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: 128px;
  color: #000000;
  line-height: 1;
  text-align: center;
}

#main .mainTTL::first-letter{
  font-size: 200px;
  color: #E64747;
}


/**************************************
page-numbers
**************************************/
#main ul.page-numbers{
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
  width: 100%;
  max-width: 1100px;
  margin: 80px auto 0;
  gap: 10px 32px;
}

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

#main ul.page-numbers > li > a{
  display: block;
  font-size: 16px;
  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: 20px;
  font-weight: 400;
  color: #000000;
}

#main ul.page-numbers > li.dots > span{
  display: block;
  font-size: 16px;
  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 - 567px);
  padding-top: 300px;
  padding-bottom: 120px;
  position: relative;
}


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

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


#main .contents404 > .text{
  display: block;
  font-size: 20px;
  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.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
**************************************/
.spView{display: none!important;}