@charset "UTF-8";

:root {
      --easing: cubic-bezier(0.2, 1, 0.2, 1);
      --transition: 0.8s var(--easing);
      --color-base: #fff;
      --color-base-filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(341deg) brightness(107%) contrast(101%);
      --color-gray: #f1f1f1;
      /* --color-theme: #000;
      --color-theme-filter: invert(0%) sepia(98%) saturate(7493%) hue-rotate(75deg) brightness(86%) contrast(99%); */
      --color-theme: #4D4D4D;
      --color-theme-filter: invert(20%) sepia(0%) saturate(5206%) hue-rotate(338deg) brightness(123%) contrast(77%);
      --color-theme-darken: #f12617;
      --color-main: #229ed8;
      --color-main-filter: invert(64%) sepia(40%) saturate(4351%) hue-rotate(166deg) brightness(90%) contrast(86%);
      /* --color-font: #0b0b0b; */
      --color-font: #4D4D4D;
      /* --box-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05), -0.8rem -0.8rem 1.2rem #fff;
      --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, 0.08), -1rem -1rem 1.5rem #fff;
      --box-shadow-inset: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05), inset -0.8rem -0.8rem 1.2rem #fff;
      --box-shadow-dark: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.1), -0.8rem -0.8rem 1.2rem rgba(#fff, 0.2); */
}
html{
	margin: 0;
	padding: 0;
}
body{
      font-family: 'Noto Sans JP', system-ui;
      font-size: 14px;
      letter-spacing: 0.08rem;
      line-height: 1.8;
      height: 100%;
      word-break: break-word;
      color: var(--color-font);
      background-color: var(--color-base);
      -webkit-appearance: none;
      /* -webkit-tap-highlight-color: transparent; */
      overflow-x:hidden;
      position: relative;
    }
    
#wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
}
    *,
    *::before,
    *::after {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    ::-moz-selection {
      color: #fff;
      background: var(--color-theme);
    }

    ::selection {
      color: #fff;
      background: var(--color-theme);
    }



	.loading {
	  position: fixed;
	  inset: 0;
	  z-index: 30;
	  height: 100svh;
	  background-color: var(--color-main);
	}

	.loading__inner {
	  width: 100%;
	  height: inherit;
	  display: grid;
	  place-content: center;
	  row-gap: 10px;
	}

	.loading__text {
	  font-size: max(16px, 1rem);
	  font-weight: 500;
	  letter-spacing: 0.2em;
	  text-align: center;
	  color: var(--color-base);
	  font-family: "Zen Kaku Gothic New", sans-serif;
	  opacity: 0;
	}

	.loading__logo {
	  margin: 0 auto;
	  width: min(200px, 100%);
	  opacity: 0;
	}

	.loading__logo img {
	filter: var(--color-base-filter);
	}
	
	#container {
	  min-height: 100svh;
	  z-index: 5;
	}
	.wrapper {
		width: 100%;
	}
	
	a {text-decoration: none;}

/* header
----------------------------------------------- */
header {
	position: fixed;
	top:0;
	/* left: 0;
	width: 100%;
	height: 66px; */
	z-index: 20;
	opacity: 0;
	width: 80%;
	left: 10%;
	height: 52.8px;
}

@media all and (max-width: 767px) {
	header {width: 94%; left: 3%;}
}

header h1 {
	position: relative;
	left: 2.5%;
	/* width: 175px; */
	width: 140px;
	aspect-ratio: 1045 / 180;
	/* top: 20px; */
	top: 16px;
}
header h1 a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position:relative;
	/* width: 175px; */
	width: 140px;
	aspect-ratio: 1045 / 180;
	background-size: contain;
	margin: 0 auto 0;
	box-sizing: border-box;
	background-image: url(images/logo-nakico.svg);
	transition: background-image .3s;
}

header.headerColorScroll h1 a {
	background-image: url(images/logo-nakico.svg);
	transition: background-image .3s;
}

header ul {
	position: absolute;
	right: 2.5%;
	/* top: 23px; */
	top: 18.4px;
	display: flex;
}
header ul li{ margin-left: 15px; }
header ul li a {display: block; vertical-align: middle;}


header ul li a span {
	color: var(--color-font);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.02em;
	font-size: clamp(12px, 2.5vw, 14px);
	position: relative;
	display: inline-block;
}


header ul li a span:after {
	position: absolute;
	bottom: -5px;
	margin: 0 auto;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-font);
	content:"";
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

header ul li a span:hover::after,
header ul li a span:active::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


header ul li a span::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: auto 0.08em auto 0;
  border: 3px solid transparent;
  border-right: 0 solid transparent;
  border-left: 7px solid #000;
  position: absolute;
  top:0;
  bottom:0;
  left:-10px;
}

@media all and (max-width: 428px) {
header h1 {
	width: 130px;
	top: 16px;
}
header h1 a {
	width: 130px;
}
header ul li{ margin-left: 8px; }
}

.main {
	position: relative;
}

/* footer
----------------------------------------------- */
footer {
	position: relative;
	width: 100%;
	padding: 80px 2.5% 80px;
	box-sizing:  border-box;
	background-color: var(--color-main);
}
.footerCompany h2 {
	width: 200px;
	aspect-ratio: 1045 / 180;
	margin: 0px auto 10px;
	box-sizing: border-box;
}
.footerCompany h2 a{
	display: block;
	width: 200px;
	aspect-ratio: 1045 / 180;
}

.footerCompany ul {display: flex; justify-content: center;}
.footerCompany ul li {padding: 0 10px 20px; box-sizing: border-box;}
.footerCompany ul li a {display: block;}

.footerCompany h2 a:hover,
.footerCompany ul li a:hover {opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )";}
.footerCompany h2 a img,
.footerCompany ul li a img {
	filter: var(--color-base-filter);
}

/* copyright
----------------------------------------------- */
.copyright {
	font-size: 10px;
	text-align: center;
	padding: 10px 0;
	position: relative;
	box-sizing: border-box;
	color: var(--color-base);
	font-family: "Roboto", sans-serif;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    pointer-events: none;
}



/* main */
.container{
    width: 100%;
    height: auto;
    padding: 0px;
}
.box {
	padding: 80px 0;
	position: relative;
}
.boxL {
	padding: 80px 0 80px 2.5%;
	position: relative;
	box-sizing:  border-box;
}
.boxC {
	padding: 80px 2.5%;
	position: relative;
	box-sizing:  border-box;
}
.boxR {
	padding: 80px 0 80px 2.5%;
	position: relative;
	box-sizing:  border-box;
}

.boxN {
	padding: 0px 2.5% 40px;
	position: relative;
	box-sizing:  border-box;
}

section {position: relative; box-sizing: border-box;}
.serviceLp002 {padding: 100px 0 100px;}
.serviceLp003 {padding: 100px 0 0;}


#sub .serviceLp002 {padding: 60px 0 60px;}
@media screen and (orientation: portrait) and (min-width: 428px) {
	.serviceLp002 {padding: 25px 0 25px;}
	.serviceLp003 {padding: 25px 0 0;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	.serviceLp002 {padding: 25px 0 25px;}
	.serviceLp003 {padding: 25px 0 0;}
}

@media all and (max-width: 767px) {
	.serviceLp001,
	.serviceLp003,
	.serviceLp002,
	.serviceLp004 {padding-bottom: 0px;}
}



section img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* section */

.bgItemBox {position : relative; background-color: var(--color-base); overflow:hidden;}
.bgItemBox:after {
    content:"";
    width:120%;
    height:60%;
    position:absolute;
    bottom:0;
    left:50%;
    background-color: var(--color-main);
    transform:translate(-50%,50%);
    border-radius:100%;
}


.bgItem {
	background-color: var(--color-main);
	padding-bottom: 80px;
	
}
.bnritem {
	padding: 2.5%;
	box-sizing: border-box;
	background-color: var(--color-base);
	border-radius: 20px;
	max-width: 1400px;
	margin: 0 auto;
	width: 94%;
	position: relative;

}
.bnritem ul{
	display: flex;
	flex-wrap: wrap;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2.5%;
	box-sizing: border-box;
}

.bnritem ul li {width: 50%; padding: 20px; box-sizing: border-box; text-align: center;}
.bnritem ul li a {display: block; padding-bottom: 20px; box-sizing:border-box; color: var(--color-base); transition: box-shadow .3s;}
.bnritem ul li dt {font-size: clamp(12px, 2.5vw, 17px); font-weight: 700; line-height: 1.4;}
.bnritem ul li dd {font-size: clamp(12px, 2.5vw, 14px); line-height: 1.4;}
.bnritem ul li dd  span{font-size: clamp(12px, 2.5vw, 20px); font-weight: 700; display: inline-block; letter-spacing: 0; font-family: "Roboto", sans-serif;}

.bnritem ul li a:hover {box-shadow: 0 0 5px rgba(0,0,0,0.3); transition: box-shadow .3s;}

.bnritem p {
	width: 75%;
	margin: 10px auto 0;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 50vh;
	font-weight: 700;
	font-size: clamp(14px, 2.9vw, 16px);
	box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	background-color: #2fbcf1;
	color: var(--color-base);
	transition: box-shadow .3s;
}


@media all and (max-width: 767px) {
.bnritem { padding: 10px;}
.bnritem ul{padding: 2px;}
.bnritem ul li {/* width: 100%; */ padding: 1px;}

.bnritem p {
padding: 5px 8px;
font-size: clamp(12px, 2.5vw, 14px);
}

}

.bnritem a:hover p {
	box-shadow: 0 0px 3px rgba(0,0,0,0.3);
	transition: box-shadow .3s;
}

.bnritem ul li:nth-of-type(1) a {
	background-color: #b79fcb;
}
.bnritem ul li:nth-of-type(2) a {
	background-color: #f5bcd3;
}
.bnritem ul li:nth-of-type(1) p,
.bnritem ul li:nth-of-type(2) p {
	background-color: #fce7e7;
	color: #898888;
}

.bnritem ul li:nth-of-type(3) a {
	background-color: #c50004;
}
.bnritem ul li:nth-of-type(3) p {
	background-color: var(--color-base);
	color: #c50004;
}
.bnritem ul li:nth-of-type(4) a {
	background-color: #177ff9;
}
.bnritem ul li:nth-of-type(4) p {
	background-color: var(--color-base);
	color: #177ff9;
}

.bnritem ul li:nth-of-type(5) a {
	background-color: #ffba1e;
}
.bnritem ul li:nth-of-type(5) p {
	background-color: #6fd0f0;
}
.bnritem ul li:nth-of-type(6) a {
	background-color: #46c9f7;
}
.bnritem ul li:nth-of-type(6) p {
	background-color: #ffc02d;
}

.bnritem ul li:nth-of-type(7) a {
	background-color: #ea545f;
}
.bnritem ul li:nth-of-type(8) a {
	background-color: #f7ced4;
	color: var(--color-font);
}
.bnritem ul li:nth-of-type(9) a {
	background-color: #f0ea3e;
	color: var(--color-font);
}

.bnritem ul li:nth-of-type(8) a p,
.bnritem ul li:nth-of-type(9) a p {
	color: var(--color-base);
}

.illItem {
	position: absolute;
	bottom:80px;
	right: 0;
	aspect-ratio: 649 / 867;
	width: 40%;
}
.illItem div {position: relative; width: 100%;}
.illItem div figure {position: absolute; top:0; left:0; width: 100%; aspect-ratio: 649 / 867;}


@media all and (max-width: 428px) {
.illItem {
	bottom:80px;
	width: 45%;
}
}

.sliderBtn2 img {filter: var(--color-main-filter); width: 30vw; aspect-ratio: 1045 / 180;}
.sliderBtn2.sliderBtn2Bg  {background-color: var(--color-main); padding: 20px 0;}
.sliderBtn2.sliderBtn2Bg img {filter: var(--color-base-filter); width: 30vw; aspect-ratio: 1045 / 180;}

/* 02 */
.mainTtl {
	text-align: center;
}

.mainTtl span.mainTtlIll{
	position: relative;
	display: inline-block;
}
.mainTtl h2{/* display: inline-block; */ font-size: clamp(22px, 4.5vw, 24px); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; margin-bottom: 60px;}
.mainTtl h2 span{ display: inline-block; font-size: clamp(13px, 2.7vw, 15px); font-family: "Roboto", sans-serif; letter-spacing: 0.04rem; font-weight: 200;}

/* .serviceLp002 .mainTtl span img.lineUpillL {aspect-ratio: 181 / 255; width: 75px; vertical-align: top; margin-right: 10px; margin-top: -5px;}
.serviceLp002 .mainTtl span img.lineUpillR {aspect-ratio: 143 / 215; width: 65px; vertical-align: top;} */


.serviceLp002 .mainTtl span.mainTtlIll:before {
	position : absolute;
	top: -10px;
	left:-80px;
	content:"";
	background-image: url(images/ill-sp.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left top;
	aspect-ratio: 181 / 255;
	width: 75px;
	/* animation: fuwafuwaL 4s ease-in-out infinite alternate; */
	animation: poyopoyo 2s ease-out infinite;
}
.serviceLp002 .mainTtl span.mainTtlIll:after {
	position : absolute;
	top:0;
	right:-70px;
	content:"";
	background-image: url(images/ill-cr.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left top;
	aspect-ratio: 143 / 215;
	width: 65px;
	/* animation: fuwafuwaR 3s ease-in-out infinite alternate; */

}


@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.97);
  }
}


@keyframes fuwafuwaL {
  0% {
    transform:translate(0, 0) rotate(-5deg);
  }
  50% {
    transform:translate(0, -5px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(5deg);
  }
}

@keyframes fuwafuwaR {
  0% {
    transform:translate(0, 0) rotate(-2deg);
  }
  50% {
    transform:translate(0, -2px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(2deg);
  }
}


@keyframes loading-bar {
  0% {
    background-position: 100% 0;
  }

  50% {
    background-position: 0% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.swiper-button-prev,
.swiper-button-next {
  height: auto;
  width: 3vw;
  aspect-ratio: 117 / 58;
}
 
/* 矢印を消す、画像に変更 */
.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  height: auto;
  width: 3vw;
  aspect-ratio: 117 / 58;
  margin: auto;
}

.products001 .swiper-button-prev,
.products001 .swiper-button-next {
	width: 1.5vw;
}
.products001 .swiper-button-prev:after,
.products001 .swiper-button-next:after {
  width: 1.5vw;
}

@media all and (max-width: 499px) {
	.swiper-button-prev:after,
	.swiper-button-next:after {
	  margin: 3vw auto 0;
	}


.products001 .swiper-button-prev,
.products001 .swiper-button-next {
	width: 3vw;
}
.products001 .swiper-button-prev:after,
.products001 .swiper-button-next:after {
  width: 3vw;
}


}
 
/* 前に戻る画像パス */
.swiper-button-prev:after {
  background-image: url(images/arr_left.svg);
}
/* 次に進む画像パス */
.swiper-button-next:after {
  background-image: url(images/arr_right.svg);
}

/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0px 5px 0px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
  background-color: var(--color-main);
  height: 10px;
  width: 10px;
}


.bgItemBox2 .swiper2 {
  padding: 7px 0 0;
  max-width: 1400px;
  margin: 0 auto 0px;
  overflow: hidden;
}


.bgItemBox2 .swiper-slide {
  opacity: .4; /* 左右のスライドを薄くする */
  transform: scale(0.8); /* 左右のスライドを小さくする */
  transition: .7s; /* ゆっくり小さくさせる */
  position: relative;
}

.bgItemBox2 .swiper-slide figure,
.bgItemBox3 .swiper-slide figure {
	width: 100%;
	aspect-ratio: 1 / 1;
	/* background-color: #f1f1f1; */
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow .3s;
}
.bgItemBox3 .swiper-slide figure {margin-bottom: 5px;}

.bgItemBox2 .swiper-slide img {
  height: auto;
  width: 90%;
  aspect-ratio: 1 / 1;
  line-height:0;  
}


.bgItemBox2 .swiper-slide-active {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(1); /* 中央のスライドは小さくしない */
  z-index: 1000; /* 中央のスライドを一番上にする */
}
.bgItemBox2 .swiper-slide.swiper-slide-active figure {
	/* border: 2px solid var(--color-main); */
  outline-width: 1px;
  outline-offset: 0;
  outline-color: rgba(0, 130, 206, 0.75);
  outline-style: solid;
  animation: animateOutline 4s ease infinite;
  border-radius: 10px;
}


@keyframes animateOutline {
  0% {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(0, 130, 206, 0);
  }

  10% {
    outline-color: rgba(0, 130, 206, 0.75);
  }

  /* The animation finishes at 50% */
  50% {
    outline-width: 5px;
    outline-offset: 1px;
    outline-color: rgba(0, 130, 206, 0);
  }

  100% {
    outline-width: 5px;
    outline-offset: 1px;
    outline-color: rgba(102, 102, 102, 0);
  }
}


.bgItemBox4 ul {
  max-width: 1400px;
  margin: 0 auto 0px;
	display: flex;
	flex-wrap: wrap;
}
.bgItemBox4 ul li { width: calc(100% / 4); padding: 20px; box-sizing: border-box;}

.bgItemBox2 .swiper2 a,
.bgItemBox3 .swiper2 a,
.bgItemBox4 a {color: var(--color-font); display: block;transition: color .3s;}
.bgItemBox2 .swiper2 dt {font-size: clamp(14px, 2.9vw, 16px); font-weight: 700;text-align: justify;text-justify: inter-ideograph; word-break: break-all;}
.bgItemBox3 .swiper2 dt,
.bgItemBox4 dt {font-size: clamp(14px, 2.9vw, 14px); font-weight: 700; line-height: 1.5; margin-bottom: 10px;text-align: justify;text-justify: inter-ideograph; word-break: break-all;}
.bgItemBox2 .swiper2 dd {font-size: clamp(11px, 2.2vw, 13px);}
.bgItemBox3 .swiper2 dd,
.bgItemBox4 dd {font-size: clamp(10px, 2.0vw, 11px);}
.bgItemBox2 .swiper2 dd span{display: inline-block; font-size: clamp(16px, 3.3vw, 18px); font-weight: 700; letter-spacing: 0;font-family: "Roboto", sans-serif;}
.bgItemBox3 .swiper2 dd span,
.bgItemBox4 dd span{display: inline-block; font-size: clamp(14px, 2.9vw, 16px); font-weight: 700; letter-spacing: 0;font-family: "Roboto", sans-serif;}

.bgItemBox2 .swiper-slide :hover figure,
.bgItemBox3 .swiper-slide :hover figure,
.bgItemBox4 li a:hover figure {box-shadow: 0 0 3px rgba(0,0,0,0.2);transition: box-shadow .3s;border: 2px solid var(--color-main); animation: none;}
.bgItemBox2 .swiper2 a:hover,
.bgItemBox3 .swiper2 a:hover,
.bgItemBox4 li a:hover {color: var(--color-main);transition: color .3s;}

.bgItemBox2 .swiper-button-prev, .bgItemBox2 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 50%;
  /* bottom: 0; */
  margin: auto;
  /* margin-top: -1.4vw; */
}

.bgItemBox2 .swiper-button-prev {
  right: calc(33% - 1.6rem);
  transition: right .3s;
}

.bgItemBox2 .swiper-button-next {
  left: calc(33% - 1.6rem);
  transition: left .3s;
}

.bgItemBox2 .swiper-button-prev:hover {
  right: 33%;
  transition: right .3s;
}

.bgItemBox2 .swiper-button-next:hover {
  left: 33%;
  transition: left .3s;
}

@media all and (max-width: 1150px) {
	.bgItemBox4 ul li { width: calc(100% / 3);}
}

@media all and (max-width: 767px) {
.bgItemBox4 ul li { width: calc(100% / 2);}
}

@media all and (max-width: 428px) {
.bgItemBox4 ul li { width: calc(100% / 1);}

}


#sub .mainTtl {
	text-align: left;
}

#sub .mainTtl.mainTtlCat {
	text-align: center;
}

#sub .mainTtl h2 {margin-bottom: 20px;}
#sub .mainTtl h2 span{ display: inline-block; font-size: clamp(20px, 5.2vw, 24px); font-family: "Roboto", sans-serif; letter-spacing: 0.04rem; font-weight: 200;}
#sub .mainTtl.mainTtlCat h2 span{ font-size: clamp(14px, 2.9vw, 16px);}



#sub .mainTtl h2 {margin-bottom: 20px;}

#sub .serviceLp002 {border-top: 1px solid #eee;}

#sub .serviceLp002 .swiper-button-prev, #sub .serviceLp002 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 10px;
  margin: auto;
  width: 18px;
}


#sub .serviceLp002 .swiper-button-prev {
	left: inherit;
	right: calc(2.5% + 30px);
}

#sub .serviceLp002 .swiper-button-next {
	right: 2.5%;
}

/* 前に戻る画像パス */
#sub .serviceLp002 .swiper-button-prev:before {
  content: '';
  width: 18px;
  height: 18px;
  background-color: var(--color-main);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-image: none;
}
#sub .serviceLp002 .swiper-button-prev:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #fff;
  border-left: solid 1px #fff;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  margin: auto;
  background-image: none;
}


/* 次に進む画像パス */
#sub .serviceLp002 .swiper-button-next:before {
  content: '';
  width: 18px;
  height: 18px;
  background-color: var(--color-main);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: none;
}
#sub .serviceLp002 .swiper-button-next:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 7px;
  margin: auto;
  background-image: none;
}


@media all and (max-width: 499px) {
	.bgItemBox2 .swiper2 {
	  padding: 7px 20px 0;
	  width: 94%;
	}
	.bgItemBox2 .swiper-button-prev,
	.bgItemBox2 .swiper-button-prev:hover {
	  right: calc(94% - 1.6rem);
	}

	.bgItemBox2 .swiper-button-next,
	.bgItemBox2 .swiper-button-next:hover {
	  left: calc(94% - 1.6rem);
	}
	
	.bgItemBox2 .swiper-button-prev:after,
	.bgItemBox2 .swiper-button-next:after {
	  margin: auto;
	}
}



/* 03 */

.sliderBtn3 img {width: 310px; aspect-ratio: 310 / 414;}
.sliderBtn3 .sbi_item {width: 310px; aspect-ratio: 310 / 414;}

.instagram {poasition: relative; margin-bottom: 80px;}

.mainSubTtl {
	position: absolute;
	top: 5vh;
	right: 0;
	width: 30vw;
	/* aspect-ratio: 1045 / 180; */
	transform: rotate(10deg);
	opacity: 0.7;
}

@media all and (max-width: 428px) {
.sliderBtn3 img {width: 100px;}
.sliderBtn3 .sbi_item {width: 100px;}
.mainSubTtl {
	position: absolute;
	top: 50%;
	right: 0;
	width: 50vw;
	margin-top: -20vw;
	/* aspect-ratio: 1045 / 180; */
	transform: rotate(10deg);
	opacity: 0.7;
}

}


.sliderBtn3 .slick-slide {
  margin: 0 2px;
}

.sliderBtn3 a:hover {opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )";}

.subBtn {margin: 20px 0 0 2.5%;}

.subBtn a{
	display: inline-block;
	padding: 8px 20px;
	box-sizing: border-box;
	border: 2px solid var(--color-main);
	color: var(--color-main);
	font-size: clamp(14px, 2.9vw, 16px);
	font-family: "Roboto", sans-serif;
	border-radius: 50vh;
	line-height: 0.8;
	transition: background-color .3s;
}

.subBtn a img {width: 16px; filter: var(--color-main-filter); vertical-align: middle; margin-right: 5px;}
.subBtn a:hover {background-color: #d3ecf7; transition: background-color .3s;}

/* 04 */

.otehrBtn {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.otehrBtn li {
	/* width: 50%; */
	width: 100%;
	padding: 80px 5px;
	box-sizing: border-box;
	text-align: center;
}
.otehrBtn li:nth-of-type(1) {background-color: #f1f1f1;}
.otehrBtn li:nth-of-type(2) {background-color: #ccc;}

.otehrBtn li h2{font-size: clamp(25px, 5.2vw, 25px); font-weight: 700; font-family: "Roboto", sans-serif; letter-spacing: 0.6rem; line-height: 1.2; margin-bottom: 30px;}
.otehrBtn li h2 span{ display: inline-block; font-size: clamp(14px, 2.9vw, 18px); font-family: "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.04rem; font-weight: 400;}

.btnmain,
.btnContact {margin-top: 20px;}

.btnContact {text-align: center;}

.btnmain a,
.btnContact a,
.btnContact input[type="submit"],
.btnContact input[type="button"]{
display: inline-block;
background-color: var(--color-main);
padding: 20px 40px;
box-sizing:border-box;
color: var(--color-base);
font-size: clamp(14px, 2.9vw, 16px);
border-radius: 50vh;
min-width: 250px;
position: relative;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
cursor: pointer;
}
.btnContact a,
.btnContact input[type="submit"],
.btnContact input[type="button"] {border: none;}

.btnmain a:hover,
.btnContact a:hover,
.btnContact input[type="submit"]:hover,
.btnContact input[type="button"]:hover {
box-shadow: 0 0px 2px rgba(0,0,0,0.3);
}

.yajirushibtn {
	position: absolute;
	top: 50%;
	right:20px;
	margin-top: -14px;
}

.dli-chevron-round-right {
  display: inline-block;
  vertical-align: middle;
  color: var(--color-base);
  line-height: 1;
  position: relative;
  width: 8px;
  height: 8px;
  transform: translateX(-25%) rotate(45deg);
}

.dli-chevron-round-right::before, .dli-chevron-round-right::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}

.dli-chevron-round-right::before {
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}

.dli-chevron-round-right::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}

@media all and (max-width: 767px) {
.otehrBtn li {
	width: 100%;
	padding: 40px 5px;
}

.otehrBtn li h2{margin-bottom: 10px;}
.btnmain,
.btnContact {margin-top: 10px;}
}

/* SUB
--------------------------------------------------------------- */

main .products001,
main .products002,
main .contact001,
main .privacyBox{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5%;
  box-sizing: border-box;
}

/* main .products001,
main .contact001, */
#sub main {margin-top: 66px;}


main .products001,
main .contact001,
.pageTtl {opacity: 0;}


.productsItem {
	display: flex;
	/* flex-wrap: wrap; */
	justify-content: space-between;
}

.productsItem div.productsImg{
	width: 50%;

	padding: 0 60px 0 0;
	box-sizing:border-box;
}

.productsItem div.productsImg img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
	border-radius: 10px;
	margin: 0 atuo;
}

.productsItem div.productsImg .swiper {
    /* width: min(100%, 500px);
    margin-inline: auto; */
    width: 94%;
    margin: 0 auto;
}

.productsItem div.productsImg .swiper-thumb {
    margin-top: 5px;
}

.productsItem div.productsImg .swiper-thumb .swiper-slide {
    opacity: .5;
    transition: opacity .5s ease;
    cursor: pointer;
}

.productsItem div.productsImg .swiper-thumb .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}

.productsItem div.productsTxt{
	width: 50%;
	padding: 0 0 0 60px;
	box-sizing:border-box;
}

@media all and (max-width: 767px) {
.productsItem {
	flex-wrap: wrap;
}

.productsItem div.productsImg{
	width: 100%;
	padding: 0 0px 0 0;
}

.productsItem div.productsTxt{
	width: 100%;
	padding: 30px 0 0 0px;
}

.productsItem div.productsImg .swiper {
    width: 100%;
}


}

.productsItem div h2{
font-size: clamp(17px, 3.7vw, 19px);
	font-weight: 700;
	margin-bottom: 30px;
	text-align: justify;
	text-justify: inter-ideograph;
	word-break: break-all;
	line-height: 1.5;
}


.productsItem div ul{
	margin: 20px 0 20px;
	font-size: clamp(13px, 2.7vw, 14px);
}

.productsItem div ul li{
	position: relative;
	padding-left: 15px;
	box-sizing: border-box;
text-align: justify;
text-justify: inter-ideograph;
word-break: break-all;
}


.productsItem div ul li:before{
	position: absolute;
	top0;
	left:0;
	content:"・";
}

.productsItem div .price {
	font-size: clamp(13px, 2.7vw, 16px);
	margin-bottom: 30px;
}

.productsItem div .price .priceB{
	font-size: clamp(20px, 4.1vw, 25px);
	font-weight: 700;
	display: inline-block;
	letter-spacing: 0;
	font-family: "Roboto", sans-serif;
	margin-right: 10px;
}

.productsItem div .price .min{
	font-size: clamp(10px, 2.0vw, 12px);
	display: inline-block;
}
.productsBtn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content:center;
	text-align: center;
	margin-top: 30px;
}
.productsBtn dt{
	position: relative;
	font-size: clamp(14px, 2.9vw, 15px);
	padding: 0 0 0 20px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 20px;
}

.productsBtn dt span{display: inline-block; background-color: var(--color-base); position: relative; padding: 0 10px;}

/* .productsBtn dt:before{
	position: absolute;
	top:0;
	bottom:0;
	margin: auto;
	left:0;
	content:"";
	font-size: clamp(12px, 2.5vw, 14px);
	background-color: #eee;
	width: 100%;
	height: 1px;
} */

.productsBtn dd {
	width: 50%;
	padding: 0 5px;
	box-siziang: border-box;
}


.productsBtn dd a{
	background-color: var(--color-main);
	color: var(--color-base);
	display: block;
	border-radius: 50vh;
	font-size: clamp(14px, 2.9vw, 16px);
	font-weight: 700;
	padding: 10px;
	box-sizing: border-box;
	box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}
.productsBtn dd:nth-of-type(1) a{
background-color: #bf0000;
}
.productsBtn dd:nth-of-type(2) a{
background-color: #333E48;
}

.productsBtn dd a:hover{
box-shadow: 0 0px 2px rgba(0,0,0,0.3);
}

.productsDetail {border-bottom: 1px solid #eee;}
.productsDetail dt {
padding: 15px 0;
box-sizing:border-box;
border-top: 1px solid #eee;
}

.productsDetail dd {padding: 0 0 15px;}

.productsDetail dd span{
	font-size: clamp(10px, 2.0vw, 10px);
	display: inline-block;
	line-height: 1.5;
text-align: justify;
text-justify: inter-ideograph;
word-break: break-all;
}

.productsDetail dd li span{
	position: relative;
	padding-left: 15px;
	box-sizing: border-box;
	line-height: 1.5;
}
.productsDetail dd li span:before{
	position: absolute;
	top:0;
	left:0;
	content:"※";
}


.productsItem div .productsDetail dd ul{
	margin: 0;
	font-size: clamp(12px, 2.5vw, 12px);
	padding: 0;
	box-sizing:border-box;
}

.productsItem div .productsDetail dd ul li{
	position: relative;
	padding: 4px 0 4px 15px;
	box-sizing: border-box;
	line-height: 1.5;
text-align: justify;
text-justify: inter-ideograph;
word-break: break-all;
}


.productsItem div .productsDetail dd ul li:before{
	position: absolute;
	top0;
	left:0;
	content:"●";
	font-size: clamp(10px, 2.0vw, 12px);
}


.accordion_one {}


.accordion_one .accordion_header {
position: relative;
cursor:pointer;
}

.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius:50%;
  margin-top: -12.5px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 12.5px;
  height: 12.5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}

.accordion_one .accordion_header .i_box .one_i:before,
.accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: var(--color-font);
  border-radius: 10px;
  width: 12.5px;
  height: 1px;
  position: absolute;
  top: 6px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}
.accordion_one .accordion_header .i_box .one_i:before {
  width: 1px;
  height: 12.5px;
  top: 0;
  left: 6px;
}
.accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.accordion_one .accordion_inner {
  display: none;
  box-sizing: border-box;
}

.pageTtl {
	padding: 20px 0 0;
	text-align: center;
	font-size: clamp(22px, 4.5vw, 24px);
	font-weight: 700;
	line-height: 1.4;
}

.pageTtl span{ display: inline-block; font-size: clamp(13px, 2.7vw, 15px); font-family: "Roboto", sans-serif; letter-spacing: 0.04rem; font-weight: 200;}


.subTtl {
	background-color: var(--color-main);
	color: var(--color-base);
	padding: 10px;
	box-sizing:border-box;
	font-size: clamp(14px, 2.9vw, 16px);
	font-weight: 700;
	text-align: center;
	margin-bottom: 10px;
}

.commontxt {
	padding: 5px 10px;
	box-sizing: border-box;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-ideograph;
	word-break: break-all;
}

.commonlist {
	padding: 5px 10px;
	box-sizing: border-box;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-ideograph;
	word-break: break-all;
}

.commonlist li {
	position: relative;
	padding: 0 0 5px 20px;
	box-sizing: border-box;
}

.commonlist li:before {
	position: absolute;
	left:0;
	top:0;
	content:"・";
}

/* input */
.contactbox {border-top: 1px solid #eee; margin-top: 30px;}
.contactbox li {padding: 20px; box-sizing: border-box; border-bottom: 1px solid #eee;}
.contactbox dl{display: flex; flex-wrap: wrap;}
.contactbox dt {width: 200px;}
.contactbox dt span {display: inline-block; background-color: #F00; color: var(--color-base); font-size: 10px; padding: 5px; line-height: 1.0; margin-right: 3px;}
.contactbox dd {width: calc(100% - 200px); font-weight: 500;}
.contactbox dd p{
	font-size: clamp(10px, 2.0vw, 11px);
	color: #f00;
	padding: 5px 0;
	line-height: 1.5;
}

.contactbox dd p span.contmimni{
	position: relative;
	padding: 0 0 0 15px;
	box-sizing: border-box;
	display: block;
	text-align: justify;
	text-justify: inter-ideograph;
	word-break: break-all;
}
.contactbox dd p span.contmimni:before{
	position: absolute;
	top:0;
	left:0;
	content:"※";
}

.agree {text-align: center; margin: 40px auto;}
.agree a{color: #00a0e9; display: inline-block;}

.contact002 {
	background-color: #f1f1f1;
}

.privacyBox {margin: 0 auto; font-weight: 500;}

.privacyBox h3 {margin-bottom: 20px;}
.privacyBox h3 span{ display: inline-block; font-size: clamp(20px, 4.1vw, 24px); font-family: "Roboto", sans-serif; letter-spacing: 0.04rem; font-weight: 200;}
.privacyBox h3 {margin-bottom: 20px;}

.privacyBox p {font-size: clamp(12px, 2.5vw, 13px); margin-bottom: 20px; text-align: justify; text-justify: inter-ideograph; word-break: break-all;}
.privacyBox dl {border-bottom: 1px solid #ccc; padding: 10px 0;}
.privacyBox dt {padding: 0 5px 2px; box-sizing: border-box; font-weight: 700; font-size: clamp(12px, 2.5vw, 13px);}
.privacyBox dd {padding: 0 5px; box-sizing: border-box; font-size: clamp(11px, 2.2vw, 12px); font-weight: 400; line-height: 1.5; text-align: justify; text-justify: inter-ideograph; word-break: break-all;}



.privacyBox p.poricySubTxt {margin-top: 20px;}


input[type=text],textarea,input[type=password],input[type=email],input[type=tel] {
	background-color: #fff;
	padding: 8px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ddd;
	margin: 1px 0;
}
input.boxShort,input.box60 {width: 40%;}
input.box120 {width: 60%;}
input.box140 {width: 80%;}

input.boxMiddle,input.box380,input.box300 {width: 100%;}
input.boxLong {width: 100%;}
.box95,textarea.box380 {width: 100%;}
input[type=checkbox] {width: 20px; height: 20px; background-color: #fff; border: 1px solid #ddd;}
/* .agree input[type=radio]{vertical-align:middle; display: none;}
.agree label,
.radiobtn label {
	position: relative;
	cursor: pointer;
	padding-left: 30px;
	box-sizing: border-box;
	display: inline-block;
}
.agree label::before,
.agree label::after,
.radiobtn label::before,
.radiobtn label::after {
	content: "";
	display: block; 
	border-radius: 50%;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
}
.agree label::before,
.radiobtn label::before {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	left: 5px;
}

.agree label::after,
.radiobtn label::after {
	background-color: #00a0e9;
	border-radius: 50%;
	opacity: 0;
	width: 16px;
	height: 16px;
	left: 7px
}
.agree input:checked + label::after,
.radiobtn input:checked + label::after {opacity: 1;}
.agree .visually-hidden,
.radiobtn .visually-hidden {
	position: absolute;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
}

.wpcf7-list-item {
    display: block;
    line-height: 1;
}
.wpcf7-list-item + .wpcf7-list-item {
    margin-top: 8px;
}
input[type="checkbox"] {
    display: none;
}
.wpcf7-list-item-label {
    position: relative;
    height: 20px;
    line-height: 20px;
    padding-left: 25px;
    display: inline-block;
}
.wpcf7-list-item-label::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    content: "";
    display: block;
    width: 8px;
    height: 6px;
    border-top: 2px solid #3d8582;
    border-right: 2px solid #3d8582;
    transform: rotate(135deg);
    position: absolute;
    left: 6px;
    top: 6px;
} */

.radio__btn {
    appearance: none;
}

.mwform-radio-field-text {
    padding-left: 0px;
    position: relative;
    cursor: pointer;
}

.mwform-radio-field-text::before {
    content: '';
    display: block; 
    border-radius: 50%; 
	background-color: #fff;
	border: 1px solid #ddd;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
}

.radio__btn:checked +.mwform-radio-field-text::after {
    content: '';
    display: block;
    border-radius: 50%;
	width: 16px;
	height: 16px;
	background-color: #00a0e9;
    position: absolute;
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	select:not(:target) {
		padding-right:0;
		background-image: none;
	}
}

@media all and (max-width: 767px) {
.contactbox dt {width: 100%; margin-bottom: 2px;}
.contactbox dd {width: 100%;}

input.box120 {width: 80%;}
input.box140 {width: 100%;}
}



/* BLANDSTORY
--------------------------------------------------------------- */
.brandstory001 {opacity: 0;}
.brandTxt {text-align: center; position: relative; max-width: 800px; margin: 0 auto;}
.brandTxt:before {
	position: absolute;
	top:-40px;
	left:0;
	right:0;
	background-color: var(--color-theme);
	height: 1px;
	width: 30px;
	content:"";
	margin: 0 auto;
}



.brandTxt h3 {
	font-size: clamp(22px, 4.5vw, 35px);
	letter-spacing: 0.4rem;
	line-height: 1.8;
	margin-bottom: 60px;
	margin-left: 0.5vw;
	text-align: center;
	width: 100%;
	font-weight: 700;
	font-family: "Zen Kaku Gothic New", sans-serif;
	
}
.brandTxt h3 span.quotes {
	position: relative;
	padding: 0 10px;
	box-sizing: border-box;
}

.brandTxt h3 span.quotes:before {
	position: absolute;
	top: 5px;
	left: -5px;
	content: "”";
	color: var(--color-font);
	font-size: 25px;
	line-height: 1;
}

.brandTxt h3 span.quotes:after {
	position: absolute;
	top: 5px;
	right: -5px;
	content: "”";
	color: var(--color-font);
	font-size: 25px;
	line-height: 1;
}


.brandTxt p {
	font-size: clamp(14px, 2.9vw, 16px);
	letter-spacing: 0.08rem;
	line-height: 2.3;
}

.brandTxt p span.quotes {
	position: relative;
	padding: 0 5px;
	box-sizing: border-box;
}

.brandTxt p span.quotes:before {
	position: absolute;
	top: 0;
	left: -2px;
	content: "”";
	color: var(--color-font);
	font-size: 14px;
	line-height: 1;
}

.brandTxt p span.quotes:after {
	position: absolute;
	top: 0;
	right: -2px;
	content: "”";
	color: var(--color-font);
	font-size: 14px;
	line-height: 1;
}

.brandLTxt {
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
	flex-direction:row-reverse;
	position: relative;
	
	/* add */
	align-items: center;
}

.brandRTxt {
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
}

.brandCTxt {margin-top: 60px;}

.brandLTxt figure,
.brandRTxt figure {
	width: 40%;
}

.brandTxt .brandLTxt p,
.brandTxt .brandRTxt p {text-align: left; width: calc(60% - 30px);}

.brandRTxt figure.rightImg {
	position: absolute;
	bottom:0;
}

.imgPort {
	position: relative;
	width: 100%;
	aspect-ratio: 640 / 646;
}

.imgPort img{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}


.brandstory001,
.illItem2 div {
	position: relative;
}

.illItem2 {
	position: absolute;
	top: -100px;
	left:0;
	width: 20%;
	aspect-ratio: 4 / 5;
	max-width: 400px;
}

.illItem3 {
	position: absolute;
	top: -100px;
	right:0;
	width: 20%;
	aspect-ratio: 4 / 5;
	max-width: 400px;
}

.illItem2 div figure,
.illItem3 div figure {
	position: absolute;
	top: 0px;
	left:0;
}

.subLogo {
	text-align: center;
	font-size: clamp(18px, 3.7vw, 35px);
	font-weight: 200;
	color: var(--color-main);
	font-family: "Roboto", sans-serif;
	line-height: 1.0;
	letter-spacing: 0.1em;
}

.subLogo img{
	filter: var(--color-main-filter);
	width: 30%;
	margin: 0 auto;
	padding-left: 2%;
	box-sizing: border-box;
}
@media all and (max-width: 428px) {
.subLogo img{
	filter: var(--color-main-filter);
	width: 60%;
	margin: 0 auto;
	padding-left: 2%;
	box-sizing: border-box;
}
}
.subLogo span {display: inline-block;margin-top: 5px;}


.blueBg {
	background-color: var(--color-main);
}

/* .image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.image-wrapper img {
  width: 100%;
  height: 100%;
  opacity: 0;
  text-align: center;
}
.line {
  position: absolute;
  background-color: var(--color-main);
}
.top, .bottom { height: 2px; width: 0%; }
.left, .right { width: 2px; height: 0%; }
.top { top: 0; left: 0; }
.right { top: 0; right: 0; }
.bottom { bottom: 0; right: 0; }
.left { bottom: 0; left: 0; } */

.side-scroll {
  height: 100vh;
  width: 100%;
}
.side-scroll-container {
  align-items: center;
  display: flex;
  height: 100vh;
  margin-inline: auto;
  overflow: hidden;
  width: 100%;
}
.side-scroll-list {
  display: flex;
  position: relative;
  left: 50%;
}

.side-scroll-list dl {display: flex; flex-wrap: wrap; width: 80vw; color: var(--color-base); justify-content:center;}
.side-scroll-list dt {
	font-size: clamp(35px, 7.2vw, 50px);
	letter-spacing: 0.08rem;
	line-height: 1.8;
	width: 100%;
	font-weight: 700;
	font-family: "Roboto", sans-serif;
	/* other */
	position: relative;
}
.side-scroll-list dd {width: calc(100% / 2); text-align: center; line-height: 1.4; column-gap: 30px;}

.side-scroll-list dd .historyBox { display: flex; justify-content:center;}
.side-scroll-list dd .historyBox div {width: calc(100% / 2); position: relative;}

.side-scroll-item{
position:relative;
}

.side-scroll-item figure {
  width: 100%;
  aspect-ratio: 1 / 1;
  position:relative;
}
.side-scroll-list dt {position:relative;}
.side-scroll-list dt span.year {
	display: inline-block;
	background-color: var(--color-main);
	position: relative;
	padding-right: 20px;
	
	/* other */
	position: relative;
	z-index: 1;
}
/* other */
.side-scroll-list dt span.marker {
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	width: 0;
	height: 5px;
	background-color: var(--color-base);
	margin: auto;
	transition: width 1.5s;
}

.side-scroll-list dt span.marker.active {
  width: calc(100% - 20px);
  transition: width 1.5s;
}



.side-scroll-list h3 {
	font-size: clamp(20px, 4.1vw, 30px);
	letter-spacing: 0.08rem;
	line-height: 1.8;
	width: 100%;
	font-weight: 700;
	font-family: "Roboto", sans-serif;
	text-align: center;
}


.side-scroll-list dd .historyBox div p {
	border: 2.5px solid var(--color-base);
	border-radius: 50vh;
	padding: 20px 5px;
	width: 90%;
	box-sizing: border-box;
 	position: absolute;
 	top: -85px;
 	left:0;
 	right:0;
 	margin: 0 auto;
 	display: inline-block;
 	background-color: var(--color-main);
 	font-weight: 700;
}

.side-scroll-list dd .historyBox div p:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid var(--color-main);
  z-index: 2;
}

.side-scroll-list dd .historyBox div p:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid var(--color-base);
  z-index: 1;
}


@media (max-width: 915px) {
	.side-scroll-list dd .historyBox div p {
		font-size: 12px;
	}
}

@media (max-width: 828px) {
	.side-scroll-list dd .historyBox div p {
		font-size: 11px;
	}
}
@media (max-width: 769px) {
	.side-scroll {
	   height: 100%;
	}
	.side-scroll-container {
	  display: block;
	  height: 100%;
	  overflow: inherit;
	}

	.side-scroll-list {display: block; left: 0;}
	.side-scroll-list dl {width: 100%;}
	.side-scroll-list dt {width: 100px;}

	.side-scroll-list dd {width: calc(100% - 100px);}
	.side-scroll-list dd.side-add {width: 100%; position: relative; top: -10px; padding-left: 100px; box-sizing: border-box;}


	.side-scroll-list dt span.year {
		padding-bottom: 10px;
		padding-right: 0px;
	}

	/* other */
	.side-scroll-list dt span.marker {
		bottom:inherit;
		right: 0;
		width: 5px;
		height: 0;
		transition: height 1.5s;
	}

	.side-scroll-list dt span.marker.active {
		height: calc(100% - 20px);
		transition: height 1.5s;
		width: 5px;
	}

	.side-scroll-list .side-addBox dt span.marker {
		height: 0;
		transition: height 1.5s;
		width: 5px;
	}

	.side-scroll-list .side-addBox dt span.marker.active {
		height: calc(200% - 20px);
		transition: height 1.5s;
		width: 5px;
	}


	.side-scroll-list dd {padding: 50px;}
	.side-scroll-list dd .historyBox {row-gap: 50px;}

	.side-scroll-list dd .historyBox div p {
		border: 2px solid var(--color-base);
		border-radius: 50vh;
		padding: 20px 5px;
		width: 90%;
		box-sizing: border-box;
	 	position: relative;
	 	top: inherit;
	 	left:inherit;
	 	right:inherit;
	 	margin: 0 auto;
	 	display: inline-block;
	 	background-color: var(--color-main);
	 	font-size: 13px;
	}

	.side-scroll-list dd .historyBox div p:before {
	  bottom: inherit;
	  top: -24px;
	  border-top: 12px solid transparent;
	  border-bottom: 12px solid var(--color-main);
	}

	.side-scroll-list dd .historyBox div p:after {
	  bottom: inherit;
	  top: -30px;
	  border-top: 14px solid transparent;
	  border-bottom: 14px solid var(--color-base);
	}

}

@media (max-width: 600px) {
	.side-scroll-list dd .historyBox div p {font-size: 11px; padding: 10px 5px;}

}

@media (max-width: 548px) {
	.side-scroll-list dd .historyBox div p {font-size: 11px;}
	.side-scroll-list dd {padding: 50px 20px;}
}

@media (max-width: 480px) {
	.brandTxt {text-align: left;}
	.brandTxt h3 {
		font-size: clamp(23px, 2.5vw, 30px);
		font-size: clamp(23px, 4.7vw, 30px);
		letter-spacing: 0.4rem;
		line-height: 1.8;
		margin-bottom: 60px;
		margin-left: 0.5vw;
		text-align: center;
		width: 100%;
		font-weight: 700;
		font-family: "Zen Kaku Gothic New", sans-serif;
		
	}

	.brandLTxt,
	.brandRTxt { flex-wrap: wrap;}

	.brandLTxt figure,
	.brandRTxt figure,
	.brandTxt .brandLTxt p,
	.brandTxt .brandRTxt p {
		width: 100%;
	}

	.brandRTxt figure.rightImg {
		position: inherit;
		bottom: inherit;
	}

	.side-scroll-list dd .historyBox div p {font-size: 11px;}
	.side-scroll-list dd {padding: 40px 5px;}

	.side-scroll-list dt {width: 50px; font-size: clamp(18px, 2.5vw, 25px); font-size: clamp(18px, 3.7vw, 25px);}

	.side-scroll-list dd {width: calc(100% - 50px);}
	.side-scroll-list dd.side-add {width: 100%; position: relative; top: -10px; padding-left: 50px; box-sizing: border-box;}

}
.tiktok {padding-bottom: 80px; max-width: 1350px; margin: 0 auto;}
.tiktok dl {display: flex; flex-wrap: wrap; justify-content: center; max-width: }
.tiktok dt {width: 100%;}
.tiktok dt img {width: 45%; margin: 0 auto; display: block;}
.tiktok dd {/* width: calc(100% / 3); */ padding: 0 5px; box-sizing: border-box;}


.tiktok blockquote {
	width: 100%;
	aspect-ratio: 325 / 570;
	overflow: hidden;
	border-radius: 10px;

}

.tiktok .subBtn {margin: 20px auto 0; text-align: center;}


/* FIRST VIEW + gsap + jquery
---------------------------------------------------------------- */
.mv__wrapper{
    width: 100%;
    height: 100svh;
    padding: 0;
    /* pointer-events: none; */
}

.firstview {
    width: 100%;
    /* height: calc(100svh - 66px); */
    height: 100svh;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    /* top: 66px; */
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fvDetail {
	position: relative;
	/* height: calc(100svh - 180px); */
	height: calc(100svh - 300px);
	max-width: 1300px;
	aspect-ratio: 1402 / 838;
	/* margin: -66px auto 0; */
	margin: -114px auto 0;
}

.kira,
.kiraL,
.kiraR,
.kiraR2 {display: block;}

.kira {
	position: relative;
	left:0;
	top:0;
	/* height: 100%; */
	aspect-ratio: 1402 / 838;
	width: 100%;
}



.kiraL,
.kiraR,
.kiraR2,
.fvLogo,
.fvNakico,
.fvHukidashi li {
	position: absolute;
	top:0;
	width: 100%;
}


.kira img,
.kiraL img,
.kiraR img,
.kiraR2 img,
.fvLogo img,
.fvNakico img,
.fvHukidashi li img {
	position: relative;
	aspect-ratio: 1402 / 838;
	width: 100%;
}

.catCopy {
	font-size: clamp(30px, 2.6vw, 40px);
	letter-spacing: 0.4rem;
	line-height: 1.5;
	margin-left: 1.0vw;
	text-align: center;
	position: absolute;
	bottom:0;
	width: 100%;
	font-weight: 700;
	font-family: "Zen Kaku Gothic New", sans-serif;
}

.catCopy span{display: inline-block;}

.btnFirst {
position: absolute;
bottom:-80px;
width: 100%;
text-align: center;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
}

.btnFirst a {
display: inline-block;
background-color: var(--color-main);
padding: 10px 40px;
box-sizing:border-box;
color: var(--color-base);
font-size: clamp(14px, 2.9vw, 16px);
border-radius: 50vh;
min-width: 250px;
position: relative;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
cursor: pointer;
}


.btnFirst a:hover,
.btnFirst a:active {
box-shadow: 0 0px 2px rgba(0,0,0,0.3);
}


@media all and (max-width: 1150px) {
	.fvDetail {
		/* height: auto; */
		height: calc(100svh - 300px);
		max-width: auto;
	}

	.catCopy {
		font-size: clamp(20px, 2.6vw, 30px);
		letter-spacing: 0.2rem;
		margin-left: 1.2vw;
		bottom:-10px;
	}

}

@media all and (max-width: 767px) {
	.fvDetail {
		height: auto;
		/* height: calc(100svh - 300px); */
		max-width: 90%;
	}

	.catCopy {
		font-size: clamp(20px, 2.6vw, 24px);
		letter-spacing: 0.2rem;
		margin-left: 1.2vw;
		bottom:-10px;
	}
}

@media all and (max-width: 450px) {
	.fvDetail {
		/* height: auto; */
		height: auto;
		max-width: 90%;
	}

	.catCopy {
		font-size: clamp(18px, 4.0vw, 24px);
		letter-spacing: 0.2rem;
		margin-left: 1.2vw;
		bottom:-10px;
	}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 767px) and (orientation:portrait) {
	.fvDetail {
		height: auto;
		/* height: calc(100svh - 250px); */
		max-width: auto;
	}

	.catCopy {
		font-size: clamp(18px, 5.6vw, 20px);
		letter-spacing: 0.2rem;
		margin-left: 1.2vw;
		bottom:-10px;
	}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	.fvDetail {
		height: auto;
		/*height: calc(100svh - 250px); */
		max-width: auto;
	}

	.catCopy {
		font-size: clamp(25px, 3.2vw, 30px);
		letter-spacing: 0.4rem;
		line-height: 1.5;
		margin-left: 1.0vw;
		bottom:0;

	}
}

@media only screen and (min-device-width: 450px) and (max-device-width: 1024px) and (max-device-height: 540px) and (orientation:landscape) {
	.fvDetail {
		/* height: auto; */
		height: calc(100svh - 180px);
		max-width: 60vw;
		margin-top: -66px;
	}

	.catCopy {
		font-size: clamp(14px, 2.9vw, 15px);
		letter-spacing: 0.1rem;
		margin-left: 1.2vw;
		bottom: 0px;
	}

.btnFirst a {font-size: clamp(12px, 2.6vw, 14px); min-width: 200px;}
.btnFirst {bottom:-60px;}

}

.sliderBtn {
  width: 100%;
  position: absolute;
  bottom:0;
  left:0;
  padding: 10px 0;
}
.sliderBtn div,
.sliderBtn4 div {padding: 0 10px; box-sizing: border-box;}
.sliderBtn a,
.sliderBtn4 a{ color: var(--color-main);}


.sliderBtn4 {
  width: 100%;
  padding: 30px 0;
}


.bgItemBox .swiper {
  padding: 13vw 0;
}

.bgItemBox .swiper-slide {
  opacity: .7; /* 左右のスライドを薄くする */
  transform: scale(1); /* 左右のスライドを小さくする */
  transition: .7s; /* ゆっくり小さくさせる */
  aspect-ratio: 1400 / 748;
  position: relative;
  border-radius: 10px;
  /* box-shadow: 0px 0 1.5px rgba(0,0,0,0.2); */
}

.bgItemBox .swiper-slide img {
  height: auto;
  width: 100%;
  aspect-ratio: 1400 / 748;
  line-height:0;
  border-radius: 10px;
  box-shadow: 0px 0 2px rgba(0,0,0,0.4);
}

.bgItemBox .swiper-slide:after {
  width: 100%;
  aspect-ratio: 1400 / 748;
  position: absolute;
  left:0;
  top:0;
  background-color: rgba(0,0,0,0.3);
  border-radius: 10px;
  content:"";
}

.bgItemBox .swiper-slide-active {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(2.3); /* 中央のスライドは小さくしない */
  z-index: 1000; /* 中央のスライドを一番上にする */
  aspect-ratio: 1400 / 748;
  /* box-shadow: 0px 0 2px rgba(0,0,0,0.4); */
}


.bgItemBox .swiper-slide.swiper-slide-active:after  {
  background-color: rgba(0,0,0,0);
}

@media all and (max-width: 767px) {
	.bgItemBox .swiper {
	  padding: 3vw 0;
	  width: 94%;
	  margin: 0 auto;
	}

	.bgItemBox .swiper-slide,
	.bgItemBox .swiper-slide img,
	.bgItemBox .swiper-slide:after {
	  border-radius: 10px;
	}

	.bgItemBox .swiper-slide-active {
	  opacity: 1; /* 中央のスライドは薄くしない */
	  transform: scale(1.0); /* 中央のスライドは小さくしない */
	  z-index: 1000; /* 中央のスライドを一番上にする */
	  aspect-ratio: 1400 / 748;
	  /* box-shadow: 0px 0 2px rgba(0,0,0,0.4); */
	}
}

/* pageTop
----------------------------------------------- */
#pageTop {
	position: fixed;
	bottom: 2.5%;
	right: 2.5%;
	width: 137px;
	height: 196px;
	z-index: 40;
	text-align: center;
	line-height: 1.1;
	display: none;
}
#pageTop a{
	position: relative;
	width: 137px;
	height: 196px;
	display: block;
	box-sizing: border-box;
	padding-top: 25px;
	color: #FFF;
	font-family: "Roboto", sans-serif;
}
#pageTop a figure{
	position: absolute;
	top:0;
	left:0;
	width: 137px;
	height: 196px;
}
#pageTop a figure .pagetopTxt {
animation: fuwafuwaR 3s ease-in-out infinite alternate;
}
@media only screen and (max-width: 767px) {

#pageTop {
	position: fixed;
	bottom: 40px;
	right: 2.5%;
	width: 80px;
	height: auto;
	aspect-ratio: 137 / 196;
	z-index: 40;
	text-align: center;
	line-height: 1.1;
}
#pageTop a{
	position: relative;
	width: 80px;
	height: auto;
	aspect-ratio: 137 / 196;
	display: block;
	box-sizing: border-box;
	padding-top: 25px;
	color: #FFF;
	font-family: "Roboto", sans-serif;
}
#pageTop a figure{
	width: 100%;
	height: 100%;
}

#pageTop a figure img{
	width: 100%;
	height: 100%;
}

}


.loading2 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--bs-white);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.5s linear;
}



/* FONT
------------------------------------------------------- */
.hina-M {font-family: "Hina Mincho", serif;}
.zenK-G {font-family: "Zen Kaku Gothic New", sans-serif;}
.zenO-M {font-family: "Zen Old Mincho", serif;}
.zenM-G {font-family: "Zen Maru Gothic", sans-serif;}
.notSan {font-family: "Noto Sans JP", system-ui;}
.ship-M {font-family: "Shippori Mincho", serif;}
.roboto {font-family: "Roboto", sans-serif;}


/* アニメーション
--------------------------------------------------------- */


.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2.5s;
}
.animation1{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.8s;
}
.animation2{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.animation3{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2.0s;
}


.keyframe0{
  animation-name: anim_po;
  position: absolute;
}
​
@keyframes anim_po {
  0% {
    top: 0px;
  }
  100% {
    top: 5px;
  }
}

.keyframe1{
  animation-name: anim_v;
}

@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 5px);
  }
}

.keyframe1-1{
  animation-name: anim_v2;
}

@keyframes anim_v2 {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 8px);
  }
}


.keyframe2{
  animation-name: anim_h;
}
​
@keyframes anim_h {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(30px, 0);
  }
}

.keyframe3{
  animation-name: anim_s;
  transform: rotate(2deg);
  animation-duration: 5s;
}


@keyframes anim_s {
  50% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}

.keyframe5{
  animation-name: anim_sc;
  transform: scale(0.95,0.95);
}

@keyframes anim_sc {
  100% {
    transform: scale(1,1);
  }
}

.keyframe6 {
  animation-name: poyopoyo;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

/* hamburger-------------------------------------------------------------
.hamburger {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 100vmax;
    background-color: var(--color-theme);
    cursor: pointer;
}
.hamburger::before, .hamburger::after, .hamburger .hamburgerLine {
    position: absolute;
    display: block;
    width: 50%;
    height: 1px;
    border-radius: 100vmax;
    background-color: white;
}
.hamburger::before, .hamburger::after {
    content: "";
}
.hamburger::before {
    transform: translateY(-8px);
}
.hamburger::after {
    transform: translateY(8px);
}
.hamburger[aria-expanded="true"] .hamburgerLine {
    opacity: 0;
}
.hamburger[aria-expanded="true"]::before {
    transform: rotate(30deg);
}
.hamburger[aria-expanded="true"]::after {
    transform: rotate(-30deg);
}
.nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.nav[aria-hidden="true"] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.nav[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    width: 100%;
    height: 100%;
    background: var(--color-theme);
    color: white;
    font-size: max(16px, 1vw);
	font-weight: 500;
	letter-spacing: 0.2em;
}
.menu li {
    list-style: none;
}
.menu li a{
    color: #FFF;
}
---------------------------------------------------------------- */



@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0) rotate(0);;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0) rotate(10deg);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0) rotate(0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0) rotate(10deg);
  }
}

.star {
	animation: flashing 4s infinite;
}
@keyframes flashing {
	0% {
		opacity: 1;
	}
	90% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

.pcno {display: none;}
@media all and (max-width: 428px) {
	.pcno {display: block;}
	.productsItem div h2 .pcno {display: none;}

.bgItemBox2 .swiper2 dt .pcno,
.bgItemBox3 .swiper2 dt .pcno,
.bgItemBox4 dt .pcno {display: none;}
}