@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,900&family=Montserrat:wght@300;400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');
:root {
  --black: #2C2C2C;
  --white: #ffffff;
  --Skyblue: #0097E0;
  --blue: #2975bc;
  --navy:#0A2C5C;
  --width: 1400;
  --spwidth:900;
  --max-width: 10000
}
/*
font-family: maru-maru-gothic-blr-stdn, sans-serif;
font-weight: 400;
font-style: normal;

font-family: sweet-sans-pro, sans-serif;
font-weight: 500;
font-style: normal;

font-family: sweet-sans-pro, sans-serif;
font-weight: 700;
font-style: normal;
*/

html{font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);}
body{line-height:1.6;background: #f1f1f1f1;color:var(--black);font-family: maru-maru-gothic-blr-stdn, sans-serif;font-weight: 400;}
body >.content{max-width:780px;margin:0 auto;overflow: hidden;}
img{max-width: 100%;}
figure{margin: 0;}
body > div{margin: 0 auto;background: #fff;margin: 0 auto;}
h1{font-size: clamp(0.1rem,calc(100vw * 17 / 390),34px);margin: 0;}
h2{font-size: clamp(0.1rem,calc(100vw * 12 / 390),22px);margin: 0;}
p{font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);line-height: 1.9;}
ul{margin: 0;padding: 0;}
ul li{margin: 0;padding: 0;}

.buy{width: 40%;display:block;}
.buy img{width: 100%;filter: invert(44%) sepia(99%) saturate(353%) hue-rotate(163deg) brightness(91%) contrast(95%);}

.loader-bg{background: #3388CA;width: 100vw; height: 100vh; position: fixed; top: 0;left: 0;z-index: 9999;display: flex;justify-content: center; align-items: center;}
.loader{width: 15em;}
.loader #container { font-size:0.6em; margin: 0; width:calc( 100% - 3em); height: 0.25em;position: relative;}
.loader img{width: 100%;}

header{position:relative;margin-bottom: 2.2em;}
header h1{z-index:2;position:absolute;left: 5%;top: 3%;width: 43%;}
header h1 img {width: 100%;height: auto;}
header h2{z-index:2;padding: 0.35em 0;position:absolute;background: #fff;font-size: clamp(0.1rem,calc(100vw * 18 / 390),36px);writing-mode: vertical-rl;}
header h2.c1{right:5%;top: 3%;}
header h2.c2{right: 13%;top: 3%;}
header h3.logo{z-index:2;position:absolute;left:3%;bottom:2%;width:20%;margin:0;filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(213deg) brightness(105%) contrast(107%);}
header h3.logo img {width: 100%;height: auto;}
header img{display: block;width: 100%;}
header div > div {position:relative;}
header div > div div{position: absolute;z-index: 1;}
.sldots{position:absolute;z-index: 2;bottom: 1em;right: 1em;width: 11em;}
.sldots .slick-dots li{width: 1em;height: 1em;margin: 0 0.15em;}
.slick-slide{position:relative;}
.sldots .slick-dots{position: relative;bottom:auto;display:flex;justify-content: flex-end;}
.sldots .slick-dots li button{width: 1em;height: 1em;padding: 0 0.25em;}
.sldots .slick-dots li button:before{color:#fff;opacity:.5;width: 1em;height: 1em;font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);margin: 0;}
.sldots .slick-dots li.slick-active button:before{color:#fff;opacity:1;width: 1em;height: 1em;font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);margin: 0;}
.slick-dotted.slick-slider {margin-bottom: 0;}

/* styleのドット */
.slick-dots{position: relative;bottom: 2em;display:flex;justify-content: center;}
.slick-dots li {width: 1em;height: 1em;margin: 0 0.15em;}
.slick-dots li button{width: 1em;height: 1em;padding: 0 0.25em;}
.slick-dots li button:before{color:#fff;opacity:.5;width: 1em;height: 1em;font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);margin: 0;}
.slick-dots li.slick-active button:before{color:#fff;opacity:1;width: 1em;height: 1em;font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);margin: 0;}
header .fall{position:absolute;width: 23%;z-index: 1;top:37%;left:3%;}
header .in{position:absolute;width: 19%;z-index: 1;top:50%;left:6%}
header .socks{position:absolute;width: 33%;z-index: 1;top:43%;left:65%}

footer{padding: 5em 0 2.5em;}
footer ul.sns{display:flex;justify-content: center;margin: 1em auto;list-style-type: none;}
footer ul.sns li{width: 1.5em;margin: 1em;}
footer ul.sns li a{display: block;filter: invert(44%) sepia(99%) saturate(353%) hue-rotate(163deg) brightness(91%) contrast(95%);}
footer small{text-align:center;;display: block;}

section.headline{margin-bottom: 7em;}
section.headline h1{text-align: center;font-size: clamp(0.1rem,calc(100vw * 17 / 390),34px);margin-bottom: 0.5em;}
section.headline h2{text-align: center;font-size: clamp(0.1rem,calc(100vw * 31 / 390),62px);margin-bottom: 0.5em;font-family: sweet-sans-pro, sans-serif;font-weight:700;width: 87%;margin: 0 auto;}
section.headline p{text-align: center;}
section.seeyou {text-align: center; margin-bottom: 2em}
section.seeyou figure{margin: 0 auto;width:63%;}
section.seeyou figure img{width: 100%;filter: invert(44%) sepia(99%) saturate(353%) hue-rotate(163deg) brightness(91%) contrast(95%);}
section.store a { width: 42%;margin: 0 auto;display: block}
section.store a img{width: 100%;filter: invert(44%) sepia(99%) saturate(353%) hue-rotate(163deg) brightness(91%) contrast(95%);}

section.product{position:relative;margin-bottom: 4em;}
section.product.style6{margin-bottom: 4em;}
section.product h4.day{width: 22%;margin:0 0 1em 0;position:relative;left: 36%;}
section.product h4.day img{width: 100%;}
section.product .style_img{position:relative;}
section.product .style_img .images{position:relative;}
section.product .ttl{position:absolute; z-index: 1;}
section.product .ttl img{width: 100%;}
section.product.style1 .ttl,section.product.style3 .ttl,section.product.style5 .ttl{top: -3em;left: 2%;width: 45%;text-align: right;}
section.product.style2 .ttl,section.product.style4 .ttl,section.product.style6 .ttl{top: -3em;right: 2%;width: 45%;text-align: left;}
section.product.style1 .ttl .typing-indicator,section.product.style3 .ttl .typing-indicator,section.product.style5 .ttl .typing-indicator{margin: auto;margin-right: 0;}
section.product.style2 .ttl .typing-indicator,section.product.style4 .ttl .typing-indicator,section.product.style6 .ttl .typing-indicator{margin: auto;margin-left: 0;}
.stdots{position:absolute;z-index: 2;bottom: 1.5em;right: 0;width: 11em;margin:auto;left:0;}
.stdots .slick-dots{justify-content: center;}
.stdots .slick-dots li{width: 1em;height: 1em;margin: 0 0.1em;}

section.product .names{position:relative;padding: 5.5% 8%;}
section.product .names h1{font-size: clamp(0.1rem,calc(100vw * 14 / 390),22px);margin-bottom: 0.5em;}
section.product .names h2{margin-bottom: 1em;}
section.product .names .sep{display:flex;justify-content: space-between;}
section.product .names .sep figure{width: 46.5%;}
section.product .names .sep div{width: 45%;}
section.product .names .sep div p{margin: 0 0 3em 0;}
section.product video{width: 100%;}
section.product .nxt{right:2.5%;z-index: 1;position:absolute;width:2.5%;top: 0; bottom: 0;margin: auto;}
section.product .prv{left:2.5%;z-index: 1;position:absolute;width: 2.5%;top: 0; bottom: 0;margin: auto;}
section.product .nxt:hover,
section.product .prv:hover{cursor: pointer;}


.typing-indicator {
  background-color: #E6E7ED;
  will-change: transform;
  width: auto;
  border-radius: 50px;
  padding: 1.2em;
  display: table;
  position: relative;
  animation: 2s bulge infinite ease-out;
}
.typing-indicator::before, .typing-indicator::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -2px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #E6E7ED;
}
.typing-indicator::after {
  height: 10px;
  width: 10px;
  left: -10px;
  bottom: -10px;
}
.typing-indicator span {
  height: 0.7em;
  width: 0.7em;
  float: left;
  margin: 0 0.2em;
  background-color: #9E9EA1;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}
.typing-indicator span:nth-of-type(1) {
  animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  animation: 1s blink infinite 0.9999s;
}

@keyframes blink {
  50% {
    opacity: 1;
  }
}
@keyframes bulge {
  50% {
    transform: scale(1.05);
  }
}

.typing-indicator.right_tail::before, .typing-indicator.right_tail::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: auto;
  right: -2px;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  background-color: #E6E7ED;
}
.typing-indicator.right_tail::after {
  height: 0.5em;
  width: 0.5em;
  left: auto;
  right: -0.5em;
  bottom: -0.5em;
}

section.product .ttl .style_com01 img,section.product .ttl .style_com02 img {
width: auto;
height: 3em;
}
section.product .ttl .style_com01 {
  margin-top: 1.1em;
  opacity: 0;
}
section.product .ttl .style_com02 {
  margin-top: 0.2em;
  opacity: 0;
}


section.product.style1 h5.illust,section.product.style3 h5.illust,section.product.style5 h5.illust{top: -6.5em;right: 2%;width: 40%;text-align: center;}
section.product.style2 h5.illust,section.product.style4 h5.illust,section.product.style6 h5.illust{top: -6em;left: 2%;width: 40%;text-align: center;}
section.product h5.illust {width: 32%;position: absolute;z-index: 1;}
section.product h5.illust img {width: 100%;height: auto;}
section.product h5.illust .style_clock {animation: mawaru 1s infinite;}

@keyframes mawaru{

	0%{opacity: 1;
	transform: rotate(0deg);
	}
	50%{opacity: 1;
		transform: rotate(2deg);
	}
	100%{opacity: 1;
		transform: rotate(0deg);
	}
}

section.product h5.illust .style_clock {
  width: 60%;
  margin: 0 auto;
}
section.product.style2 h5.illust .style_clock,section.product.style3 h5.illust .style_clock,section.product.style4 h5.illust .style_clock,section.product.style6 h5.illust .style_clock {width: 51%;}

section.product h5.illust .style_clock-text {
  width: 50%;
  margin: 0 auto 0.5em;
  line-height: 1;
}
section.product.style2 h5.illust .style_clock-text {width: 70%;}
section.product.style2 h5.illust .style_clock-text {width: 73%;}
section.product.style4 h5.illust .style_clock-text {width: 62%;}
section.product.style6 h5.illust .style_clock-text {width: 90%;}