html {
    font-size: 62.5%;
}

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


body {
	font-family: 'Arial','Hiragino Sans','Noto Sans JP', sans-serif;
	font-weight: 400;
  /*
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	font-feature-settings: "palt";
  */
	color: #111111;
}

/*
a{
  transition: opacity 0.3s ease;
}
a:hover{opacity: .6;}
*/

/**************************************
wrap
**************************************/
#wrap{
	width: 100%;
  padding-top: 6.4rem;
	margin: 0 auto;
}


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



/**************************************
swiper Setting
**************************************/
.sliderWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.sliderWrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .sliderWrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .sliderWrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .sliderWrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-container-pointer-events {
  touch-action: pan-y;
}
.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x;
}
.slider {
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .slider {
  height: auto;
}
.swiper-container-autoheight .sliderWrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

/* CSS Mode */
.swiper-container-css-mode > .sliderWrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .sliderWrapper::-webkit-scrollbar {
  display: none;
}
.swiper-container-css-mode > .sliderWrapper > .slider {
  scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .sliderWrapper {
  scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .sliderWrapper {
  scroll-snap-type: y mandatory;
}


/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .slider {
  transition-timing-function: ease-out;
}
.swiper-container-fade .slider {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .slider .slider {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube {
  overflow: visible;
}
.swiper-container-cube .slider {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube .slider .slider {
  pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .slider {
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .slider {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-container-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-flip .slider {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .slider .slider {
  pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}


/**************************************
btn
**************************************/
.btnRed > a,
.btnRed > button,
.btnRed > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.8rem;
  background: #D0112B;
  padding: 0.1rem 1rem 0 1rem;
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.4;
  text-decoration: none;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
  transition: background 0.3s ease;
}


.btnRed.disabled > a,
.btnRed.disabled > button,
.btnRed.disabled > span{
  background: #CCCCCC;
  pointer-events: none;
}

/* black ***********/
.btnBlack > a,
.btnBlack > button,
.btnBlack > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.8rem;
  background: #111111;
  padding: 0 1rem 0 1rem;
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
  transition: background 0.3s ease;
}


.btnBlack.disabled > a,
.btnBlack.disabled > button,
.btnBlack.disabled > span{
  background: #CCCCCC;
  pointer-events: none;
}


/**************************************
#header
**************************************/
#header{
	display: block;
	width: 100%;
  height: 6.4rem;
  padding: 0 2rem;
  background: #111111;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
}


#header > .inner{
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.6rem 0;
  margin: 0 auto;
  position: relative;
}


#header .headLogo{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 15.2rem;
  margin: 0 auto;
}

#header .headLogo > a{
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}

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


#header .headLogo2{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 15.2rem;
  margin: 0 auto;
}

#header .headLogo2 > a{
  display: block;
  width: 4.6rem;
  transition: opacity 0.3s ease;
}

#header .headLogo2 img{
  display: block;
  width: 100%;
}


/** headNav **************/
#headNav{}

#headNavBg{
  display: block;
  height: calc(100vh - 6.4rem);
  height: calc(100dvh - 6.4rem);
  width: 100%;
  background: rgba(0,0,0,.5);
  position: fixed;
  left: 0;
  top: 6.4rem;
  z-index: -1;
  transition: opacity 0.3s ease;
  transform: translate(-100vw,0);
  backface-visibility: hidden;
}
#headNavBg.spSearchOpen{
  opacity: 1;
  transform: translate(0,0);
}

/** headPcNav **************/
#headPcNav{
  display: none;
}

/** headSpNav **************/
#headSpNav{display: block;}

#headSpNav > .openBtn{
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  left: 0;
  top: 1.6rem;
}
#headSpNav > .openBtn > span,
#headSpNav > .openBtn::before,
#headSpNav > .openBtn::after{
  content: '';
  display: block;
  width: 2.2rem;
  height: 2px;
  border-radius: 1px;
  background: #FFFFFF;
  position: absolute;
  left: calc(50% - 1.1rem);
  transition: all 0.3s ease;
}

#headSpNav > .openBtn > span{ top: calc(50% - 1px);}
#headSpNav > .openBtn::before{top: 0.9rem;}
#headSpNav > .openBtn::after{bottom: 0.9rem;}

#headSpNav > .openBtn.open > span{opacity: 0;}
#headSpNav > .openBtn.open::before{
  width: 3.2rem;
  height: 3px;
  border-radius: 2px;
  background: #D0112B;
  transform: rotate(45deg);
  top: calc(50% - 1.5px);
}
#headSpNav > .openBtn.open::after{
  width: 3.2rem;
  height: 3px;
  border-radius: 2px;
  background: #D0112B;
  transform: rotate(-45deg);
  top: calc(50% - 1.5px);
}

#headSpNav .spNavBox{
  display: block;
  width: 100%;
  height: calc(100vh - 6.4rem);
  height: calc(100dvh - 6.4rem);
  padding: 4.8rem 4rem 0;
  background: #2F2F2F;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  position: fixed;
  top: 6.4rem;
  right: 0;
  z-index: -1;
  transition: transform 0.3s ease,opacity 0.2s ease;
  transform: translate(-100%,0);
  backface-visibility: hidden;
}
#headSpNav .spNavBox::after{
  content: '';
  display: block;
  padding-bottom: 6rem;
}


#headSpNav > .openBtn.open + .spNavBox{
  z-index: 1;
  opacity: 1;
  transform: translate(0,0);
}

#headSpNav .spNavBox > dl{
  display: block;
  padding-left: 3rem;
  position: relative;
}

#headSpNav .spNavBox > dl + dl{
  margin-top: 4rem;
  padding-top: 4rem;
}

#headSpNav .spNavBox > dl:nth-last-of-type(1){
  padding-bottom: 4rem;
  margin-bottom: 4rem;
}

#headSpNav .spNavBox > dl + dl::before{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,.4);
  border-bottom:1px solid rgba(44,44,44,.4);
  position: absolute;
  left: 0;
  top: 0;
}

#headSpNav .spNavBox > dl:nth-last-of-type(1)::after{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,.4);
  border-bottom:1px solid rgba(44,44,44,.4);
  position: absolute;
  left: 0;
  bottom: 0;
}

#headSpNav .spNavBox > dl > dt{
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  position: absolute;
  left: 1em;
  top: 0;
  transform-origin: 0 0;
  transform: rotate(90deg);
}

#headSpNav .spNavBox > dl + dl > dt{
  top: 4rem;
}

#headSpNav .spNavBox > dl > dd{display: block;}
#headSpNav .spNavBox > dl > dd > ul{display: block;}
#headSpNav .spNavBox > dl > dd > ul > li{display: block;}
#headSpNav .spNavBox > dl > dd > ul > li + li{margin-top: 2.6rem;}

#headSpNav .spNavBox > dl > dd > ul > li > a{
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

#headSpNav .spNavBox > .copy{
  display: block;
  margin-bottom: 4rem;
  color: #FFFFFF;
  font-size: 12px;
}

#headSpNav .spNavBox > .copy > a{
  color: #FFFFFF;
  text-decoration: none;
}

#headSpNav .spNavBox ul.snsLinks{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0 3rem;
}

#headSpNav .spNavBox ul.snsLinks > li{
  display: block;
  width: 4rem;
  height: 4rem;
}

#headSpNav .spNavBox ul.snsLinks > li > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 50%; 
}

#headSpNav .spNavBox ul.snsLinks > li > a > img{
  display: block;
  width: auto;
}

#headSpNav .spNavBox ul.snsLinks > li > a > img.facebook{height: 1.8rem;}
#headSpNav .spNavBox ul.snsLinks > li > a > img.insta{height: 1.6rem;}
#headSpNav .spNavBox ul.snsLinks > li > a > img.twitter{height: 1.3rem;}


/** headContentsNav **************/
#headSystemNav{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: calc(100% - 3.2rem);
  gap: 0 2.4rem;
  position: absolute;
  top: 1.6rem;
  right: 0;
}

#headSystemNav > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#headSystemNav > li > a,
#headSystemNav > li > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

#headSystemNav > li > a > img{width: 2rem; height: auto;}
#headSystemNav > li > span > img{width: 1.8rem; height: auto; transition: opacity 0.3s ease;}

#headSystemNav > li#headSearch > span::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/common/icon_search_red.svg") center center no-repeat;
  background-size: auto 1.8rem;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.3s ease;
}
#headSystemNav > li#headSearch.spOpen > span::after{ opacity: 1;}
#headSystemNav > li#headSearch.spOpen > span > img{ opacity: 0;}

#headSystemNav > li#headSearch .searchBox{
  display: block;
  width: 100%;
  background: #2F2F2F;
  position: fixed;
  padding: 0 0.7rem;
  top: 6.4rem;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translate(-100vw,0);
  backface-visibility: hidden;
}

#headSystemNav > li#headSearch.spOpen .searchBox{
  z-index: 1;
  opacity: 1;
  transform: translate(0,0);
}

#headSystemNav > li#headSearch .searchBox > .inner{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0.7rem 0;
}

#headSystemNav > li#headSearch .searchForm{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  position: relative;
  gap: 0 0.6rem;
} 

#headSystemNav > li#headSearch .searchForm > input{
  display: block;
  width: 100%;
  width: calc(100% - 8rem - 0.6rem);
  height: 4.8rem;
  box-sizing: border-box;
  padding: 0 5.2rem 0 2rem;
  background: #FFFFFF;
  border-radius: 3px;
  font-size: 16px;
  line-height: calc(4.8rem - 2px);
  vertical-align: middle;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  font-family: 'Noto Sans JP', sans-serif;
}

:placeholder-shown { color: #B7B7B7; font-size: 16px;}
::-webkit-input-placeholder { color: #B7B7B7; font-size: 16px;}
:-moz-placeholder { color: #B7B7B7; font-size: 16px;}
::-moz-placeholder { color: #B7B7B7; font-size: 16px;}
:-ms-input-placeholder { color: #B7B7B7; font-size: 16px;}

#headSystemNav > li#headSearch .searchForm > .resetBtn{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: #F0F0F0;
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  right: 10.6rem;
  top: calc(50% - 1.2rem);
  transition: opacity 0.3s ease;
  cursor: pointer;
}
#headSystemNav > li#headSearch .searchForm > .resetBtn.input{opacity: 1;}

#headSystemNav > li#headSearch .searchForm > .restBtn > img{display: block; width: 1.2rem; height: auto;}

#headSystemNav > li#headSearch .searchForm button{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 4.8rem;
  border-radius: 3px;
  background: #D0112B;
  padding: 0 1rem 0 1rem;
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
  transition: background 0.3s ease;
}




/**************************************
#footContentsLink
**************************************/
#footContentsLink{
  display: block;
  width: 100%;
  padding: 0.3rem 0 0.3rem; 
}


#footContentsLink > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.3rem 0.3rem;
  width: 100%;
  margin: 0 auto;
}


#footContentsLink > ul > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: calc(50% - 0.15rem);
  background: #D0112B;
}

#footContentsLink > ul > li > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  min-height: 6rem;
  gap: 0 1.2rem;
  width: 100%;
  height: 100%;
  padding: 2rem;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

#footContentsLink > ul > li > a > figure{
  display: block;
  width: 2rem;
}

#footContentsLink > ul > li > a > figure > img{display: block; width: 100%; height: auto;}


#footContentsLink > ul > li > a > span,
#footContentsLink > ul > li > span{
  display: none;
}

#footContentsLink > ul > li > a > .btn{
  display: block;
  text-align: left;
  font-size: 1.2rem;
}


#footContentsLink > ul > li > ul.snsLinks{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0 1.2rem;
  margin: 0 auto;
}

#footContentsLink > ul > li > ul.snsLinks > li{
  display: block;
  width: 4rem;
  height: 4rem;
}

#footContentsLink > ul > li > ul.snsLinks > li > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 50%; 
}

#footContentsLink > ul > li > ul.snsLinks > li > a > img{
  display: block;
  width: auto;
}

#footContentsLink > ul > li > ul.snsLinks > li > a > img.facebook{height: 1.8rem;}
#footContentsLink > ul > li > ul.snsLinks > li > a > img.insta{height: 1.6rem;}
#footContentsLink > ul > li > ul.snsLinks > li > a > img.twitter{height: 1.6rem;}


/**************************************
footer
**************************************/
#footer{
	display: block;
	width: 100%;
	padding: 5rem 4rem 5rem;
  background: #111111;
	position: relative;
}

#footer > .inner{
  display: block;
  width: 100%;
}

#footer > .inner > .footLogo{
  display: block;
  width: 23rem;
  margin: 0 auto 4rem
}

#footer > .inner > .footLogo > a{
  display: block;
}
#footer > .inner > .footLogo > a > img{display: block; width: 100%; height: auto;}


#footer > .inner > .footNav{
  display: block;
}

#footer > .inner > .footNav > dl{
  display: block;
  padding-left: 3rem;
  position: relative;
}

#footer > .inner > .footNav > dl + dl{
  margin-top: 4rem;
  padding-top: 4rem;
}

#footer > .inner > .footNav > dl:nth-last-of-type(1){
  padding-bottom: 4rem;
  margin-bottom: 4rem;
}

#footer > .inner > .footNav > dl + dl::before{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,.4);
  border-bottom:1px solid rgba(44,44,44,.4);
  position: absolute;
  left: 0;
  top: 0;
}

#footer > .inner > .footNav > dl:nth-last-of-type(1)::after{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,.4);
  border-bottom:1px solid rgba(44,44,44,.4);
  position: absolute;
  left: 0;
  bottom: 0;
}

#footer > .inner > .footNav > dl > dt{
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  position: absolute;
  left: 1em;
  top: 0;
  transform-origin: 0 0;
  transform: rotate(90deg);
}

#footer > .inner > .footNav > dl + dl > dt{
  top: 4rem;
}

#footer > .inner > .footNav > dl > dd{display: block;}
#footer > .inner > .footNav > dl > dd > ul{display: block;}
#footer > .inner > .footNav > dl > dd > ul > li{display: block;}
#footer > .inner > .footNav > dl > dd > ul > li + li{margin-top: 2.6rem;}

#footer > .inner > .footNav > dl > dd > ul > li > a{
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

/**copy **/
#footer > .footCopy{
  display: block;
} 

#footer > .footCopy > p{
  margin-bottom: 4rem;
  color: #FFFFFF;
  font-size: 1.2rem;
}
#footer > .footCopy > p > a{
  color: #FFFFFF;
  text-decoration: none;
}

#footer > .footCopy > .copy{
  font-size: 1.0rem;
  color: #FFFFFF;
  opacity: .5;
  text-align: left;
  line-height: 1.8;
}


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

/* visualTTL  *******/
#main .visualTTL{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 18rem;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

#main .visualTTL .ttl{
  display: block;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-align: center;
}

#main .visualTTL .ttl > span{
  display: block;
  margin-top: 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
}

#main .visualTTL.noimge{background: #FFFFFF; height: 14rem;}
#main .visualTTL.noimge .ttl{color: #111111;}

#main .visualTTL > figure{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#main .visualTTL > figure::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(17,17,17,.5);
  position: absolute;
  left: 0;
  top: 0;
}
#main .visualTTL > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}




/**************************************
#footCatalogDonwLoad
**************************************/
#footCatalogDonwLoad{
  display: block;
  width: 100%;
  padding: 1.5rem 2rem;
  background: #111111;
}

#footCatalogDonwLoad > dl{
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  color: #FFFFFF;
}

#footCatalogDonwLoad > dl > dt{
  display: block;
  width: 12rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  text-align: left;
}


#footCatalogDonwLoad > dl > dd.fig{
  display: block;
  width: calc(100% - 12rem);
  padding-left: 1.5rem;
}

#footCatalogDonwLoad > dl > dd.fig > figure{display: none; width: 8.2rem;}
#footCatalogDonwLoad > dl > dd.fig > figure > img{display: block; width: 100%; height: auto;}

#footCatalogDonwLoad > dl > dd.fig > span{
  display: block;
  text-align: left;
  font-size: 1.4rem;
  font-weight: 600;
}


#footCatalogDonwLoad > dl > dd.downloadForm{
  display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
  width: 100%;
  margin-top: 1rem;
}

#footCatalogDonwLoad > dl > dd.downloadForm > select{
  width: 21rem;
  height: 4.8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 4.5rem 0 1.5rem;
  background: url("../img/common/icon_down_arrow_red.svg") calc(100% - 2rem) center no-repeat #2F2F2F;
  background-size: 1rem auto;
  border: none;
  vertical-align: middle;
  line-height: 4.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: left;
  outline: none;
  cursor: pointer;
}

#footCatalogDonwLoad > dl > dd.downloadForm > .btnRed{width: calc(100% - 21rem);}
#footCatalogDonwLoad > dl > dd.downloadForm > .btnRed > button{ gap: 0 0; font-size: 1.2rem;}
#footCatalogDonwLoad > dl > dd.downloadForm > .btnRed > button > span > span{display: none;}


/**************************************
blogList
**************************************/
#main .blogList{
  display: block;
}

#main .blogList > article{
  display: block;
  width: 100%;
}
#main .blogList > article + article{margin-top: 2rem;}

#main .blogList > article > .outer{
  display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
  width: 100%;
}
#main .blogList > article > a{
  text-decoration: none;
  color: #111111;
  transition: color 0.3s ease;
}

#main .blogList > article > .outer > .text{
  display: flex;
  flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
  width: calc(100% - 10.3rem - 1.5rem);
  order: 2;
  text-align: left;
}

#main .blogList > article > .outer > .text > time{
  display: block;
  order: 1;
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
#main .blogList > article > .outer > .text > .ttl{
  order: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
}

#main .blogList > article > .outer > figure{
  display: block;
  width: 10.3rem;
  height: 5.8rem;
  overflow: hidden;
  order: 1;
  position: relative;
}

#main .blogList > article > .outer > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.01);
  transition: transform 0.3s ease,filter 0.3s ease;
  /*filter: grayscale(100%);*/
  position: absolute;
  left: 0;
  top: 0;
}

#main .blogList > article > .outer > figure.noimge{
  background: url("../img/common/bg_article_noimage.jpg") center center no-repeat;
  background-size: auto 100%;
}

#main .blogList > article > .outer > figure.noimge > img{
  display: block;
  width: 4.65rem;
  height: 2rem;
  left: calc(50% - 1.8rem);
  top: calc(50% - 1.1rem);
  transform: scale(1);
  filter: none;
}



/**************************************
page-numbers
**************************************/
#main ul.page-numbers{
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
  width: 100%;
  max-width: 1080px;
  margin: 3rem auto 0;
  gap: 1rem 1rem;
}

#main ul.page-numbers > li{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.3rem;
  font-weight: 700;
}

#main ul.page-numbers > li > a{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  color: #111111;
}

#main ul.page-numbers > li.prev > a{
  background: url("../img/common/icon_arrow_left_black.svg") center center no-repeat;
  background-size: 0.6rem auto;
}

#main ul.page-numbers > li.next > a{
  background: url("../img/common/icon_arrow_right_black.svg") center center no-repeat;
  background-size: 0.6rem auto;
}

#main ul.page-numbers > li.current > span{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #F0F0F0;
  color: rgba(17,17,17,.5);
}

#main ul.page-numbers > li.dots > span{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 100%;
  height: 100%;
}
#main ul.page-numbers > li.dots > span::after{content: '...';}


/**************************************
articleNav
**************************************/
#main .articleNav{
  display: block;
  width: 100%;
  margin: 6rem auto 0;
}

#main .articleNav > ul{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
}

#main .articleNav > ul > li{display: block;}
#main .articleNav > ul > li.prev{padding-left: 0.7rem; border-right: 1px solid rgba(17,17,17,.4);}
#main .articleNav > ul > li.next{padding-right: 0.7rem; border-left: 1px solid rgba(17,17,17,.4);}

#main .articleNav > ul > li > a{
  display: block;
  padding: 0 3.2rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  color: #111111;
  transition: color 0.3s ease;
  position: relative;
}


#main .articleNav > ul > li.prev > a::before,
#main .articleNav > ul > li.prev > a::after{
  content: '';
  display: block;
  width: 0.7rem;
  height: 100%;
  position: absolute;
  left: -0.7rem;
  top: 0;
  transition: opacity 0.3s ease;
}
#main .articleNav > ul > li.prev > a::before{
  background: url("../img/common/icon_arrow_left_black.svg") center center no-repeat;
  background-size: 100% auto;
}
#main .articleNav > ul > li.prev > a::after{
  background: url("../img/common/icon_arrow_left_red.svg") center center no-repeat;
  background-size: 100% auto;
  opacity: 0;
}

#main .articleNav > ul > li.prev > a:hover::before{opacity: 0;}
#main .articleNav > ul > li.prev > a:hover::after{opacity: 1;}

#main .articleNav > ul > li.next > a::before,
#main .articleNav > ul > li.next > a::after{
  content: '';
  display: block;
  width: 0.7rem;
  height: 100%;
  position: absolute;
  right: -0.7rem;
  top: 0;
  transition: opacity 0.3s ease;
}
#main .articleNav > ul > li.next > a::before{
  background: url("../img/common/icon_arrow_right_black.svg") center center no-repeat;
  background-size: 100% auto;
}
#main .articleNav > ul > li.next > a::after{
  background: url("../img/common/icon_arrow_right_red.svg") center center no-repeat;
  background-size: 100% auto;
  opacity: 0;
}



/**************************************
shareBtn
**************************************/
#main ul.shareBtn{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0 0.4rem;
}

#main ul.shareBtn > li{ display: block;}

#main ul.shareBtn > li > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #FFFFFF;
  transition: opacity 0.3s ease;
}


#main ul.shareBtn > li > a > img{display: block; height: auto;}
#main ul.shareBtn > li.Copy > a > img{width: 1.6rem;}
#main ul.shareBtn > li.Facebook > a > img{width: 0.7rem;}
#main ul.shareBtn > li.twitter > a > img{width: 1.5rem;}
#main ul.shareBtn > li.Pinterest > a > img{width: 1.6rem;}

/**************************************
listNoItem
**************************************/
#main .listNoItem{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30vh;
  margin: 0 auto;
  font-size: 1.6rem;
  text-align: center;
  border: 2px solid #CCCCCC;
}

/**************************************
contents404
**************************************/
#main .contents404{
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
  text-align: center;
}

#main .contents404 > h1{
  display: block;
  margin-bottom: 3rem;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.16;
  text-align: left;
}
#main .contents404 > h1 > span{
  padding-left: 0.5em;
}

#main .contents404 > .text{
  display: block;
  font-size: 1.5rem;
  line-height: 2;
  text-align: left;
}

#main .contents404 > .text > ul.btn{
  display: block;
  width: 100%;
  max-width: 28rem;
  margin: 4rem auto 0;
}

#main .contents404 > .text > ul.btn > li{}
#main .contents404 > .text > ul.btn > li + li{margin-top: 1rem;}


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