@charset "UTF-8";

:root {
  --black: #2C2C2C;
  --white: #ffffff;
  --rightbeige: #E5E1D960;
  --beige:#dddbcf;
  --max-width: 780px;
}

html {
  font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);
}
body {
  background: #f1f1f1f1;
  color: var(--black);
  font-family: maru-maru-gothic-blr-stdn, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}
body > .content {
  max-width: var(--max-width);
  margin-inline: auto;
  overflow: hidden;
}
body > div {
  margin-inline: auto;
  background: var(--white);
}
img {
  max-width: 100%;
}
figure {
  margin: 0;
}
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;
}
h3 {
  margin: 0;
}
p {
  font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);
  line-height: 1.9;
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  margin: 0;
  padding: 0;
}

/* ===============================================
# BUYボタン
=============================================== */
.buy {
  width: 40%;
  display:block;
}
.buy img {
  width: 100%;
}

/* ===============================================
# header
=============================================== */
header {
  position: relative;
  background: var(--beige);
}
.head_text {
  opacity:0;transition:.6s;
  width: 78%;
  padding-top: 3.18rem;
  margin: 0 auto 1.8em;
  text-align: right;
  line-height: 1;
}
header h1 {
  width: 100%;
  margin-bottom: 0.5em;
}
header img,
header h1 img,
header .volume img,
header h3.logo img {
  display: block;
  width: 100%;
  height: auto;
}
header .volume {
  display: inline-block;
  width: calc(49/11*1rem);
  margin-right: calc(9/11*1rem);
}
header h2.c1 {
  opacity:0;transition:.6s;text-align: center;
  font-size: 1.4em;margin-bottom: 1em;
}
header h3.logo {
  display: inline-block;
  width: 17.387%;
  margin: 0;
}
header video.mv{width: 100%;opacity:0;transition:1.2s;filter: drop-shadow(0px 0px var(--beige));border:1px solid var(--beige)}

/* ===============================================
# headline
=============================================== */
.headline {
  opacity:0;
  transition:.6s;
  position: relative;
  text-align: center;
  z-index: 2;
  background: var(--beige);
  padding: 1em 0 3em;
}
.headline h1 {
  margin-bottom: calc(6/11*1rem);
  font-size: clamp(0.1rem,calc(100vw * 17 / 390),34px);
  font-weight: 400;
  line-height: calc(25/16);
}
.headline p {
  font-weight: 300;
}
.headline .text {
  margin-top: calc(7/11*1rem);
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 300;
}

.go{opacity:1!important}
/* ===============================================
# product
=============================================== */

section.product h2{display: flex;align-items: center;justify-content: center;position: relative;font-size: 1.3em;height: 2.8em;top: 3em;}
section.product h2 img{position: absolute;top: -0.5em;height:calc(8.5/11*1rem);;}
section.product h2:before{margin-right:1em;content:"";display:block;width: 1em;background:url(../img/kkbefore.svg)center center  no-repeat;width: 1em;height: 3em;}
section.product h2:after{margin-left:1em;content:"";display:block;width: 1em;background:url(../img/kkafter.svg)center center  no-repeat;width: 1em;height: 3em;}
div.frames {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

div.frames::-webkit-scrollbar {
  display: none;
}

.style1 {
  background: var(--white);
}

.style2 {
  background: var(--rightbeige);
}

.style3 {
  background: var(--white);
}

.style4 {
  background: var(--rightbeige);
}

.style5 {
  background: var(--white);
}

.style6 {
  background: var(--rightbeige);
}

.style7 {
  background: var(--white);
}


.style1 div.frames {
  height: calc(390/11*1rem);
}

.style2 div.frames {
  height: calc(410/11*1rem);
}

.style3 div.frames {
  height: calc(410/11*1rem);
}

.style4 div.frames {
  height: calc(410/11*1rem);
}

.style5 div.frames {
  height: calc(410/11*1rem);
}

.style6 div.frames {
  height: calc(430/11*1rem);
}

.style7 div.frames {
  height: calc(430/11*1rem);
}

div.scroll {
  text-align: right;
  padding-inline: calc(32 / 11* 1rem);
  z-index: 10;
  position: relative;
  transform: translateY(-100%);
  opacity: 0;
  transition: .5s;
}

div.itm {
  left: 0;
  position: relative;
}

div.itm div {
  position: absolute;
  opacity: 0;
  transition: .5s;
}

.hidden {
  opacity: 0 !important;
}

div.itm div.itm1-1 {
  width: calc(182/11*1rem);
  left: calc(29 / 11* 1rem);
  top: calc((1114 - 1029)/11*1rem);
}

div.itm div.itm1-2 {
  width: calc(124/11*1rem);
  left: calc(202/11*1rem);
  top: calc((1240 - 1029)/11*1rem);
}

div.itm div.itm1-3 {
  width: calc(165/11*1rem);
  left: calc(250/11*1rem);
  top: calc((1106 - 1029)/11*1rem);
}

div.itm div.itm1-4 {
  width: calc(161/11*1rem);
  left: calc(422/11*1rem);
  top: calc((1113 - 1029)/11*1rem);
}

div.itm div.itm1-5 {
  width: calc(112/11*1rem);
  left: calc(579/11*1rem);
  top: calc((1177 - 1029)/11*1rem);
}

div.itm div.itm1-6 {
  width: calc(80/11*1rem);
  left: calc(697/11*1rem);
  top: calc((1086 - 1029)/11*1rem);
}

div.itm div.itm1-7 {
  width: calc(94/11*1rem);
  left: calc(817/11*1rem);
  top: calc((1113 - 1029)/11*1rem);
}

div.itm div.itm1-8 {
  padding-right: calc(110/11*1rem);
  width: calc(154/11*1rem);
  left: calc(926/11*1rem);
  top: calc((1113 - 1029)/11*1rem);
}

div.itm div.itm2-1 {
  width: calc(124/11*1rem);
  left: calc(18/11*1rem);
  top: calc((1796 - 1687)/11*1rem);
}

div.itm div.itm2-2 {
  width: calc(101/11*1rem);
  left: calc(152/11*1rem);
  top: calc((1879 - 1687)/11*1rem);
}

div.itm div.itm2-3 {
  width: calc(99/11*1rem);
  left: calc(255/11*1rem);
  top: calc((1789 - 1687)/11*1rem);
}

div.itm div.itm2-4 {
  width: calc(85/11*1rem);
  left: calc(358/11*1rem);
  top: calc((1868 - 1687)/11*1rem);
}

div.itm div.itm2-5 {
  width: calc(148/11*1rem);
  left: calc(461/11*1rem);
  top: calc((1789 - 1687)/11*1rem);
}

div.itm div.itm2-6 {
  width: calc(62/11*1rem);
  left: calc(609/11*1rem);
  top: calc((1786 - 1687)/11*1rem);
}

div.itm div.itm2-7 {
  width: calc(110/11*1rem);
  left: calc(693/11*1rem);
  top: calc((1830 - 1687)/11*1rem);
}

div.itm div.itm2-8 {
  padding-right: calc(90/11*1rem);
  width: calc(237/11*1rem);
  left: calc(803/11*1rem);
  top: calc((1780 - 1687)/11*1rem);
}

div.itm div.itm3-1 {
  width: calc(210/11*1rem);
  left: calc(19/11*1rem);
  top: calc((2513 - 2367)/11*1rem);
}

div.itm div.itm3-2 {
  width: calc(151/11*1rem);
  left: calc(229/11*1rem);
  top: calc((2487 - 2367)/11*1rem);
}

div.itm div.itm3-3 {
  width: calc(143/11*1rem);
  left: calc(256/11*1rem);
  top: calc((2623 - 2367)/11*1rem);
}

div.itm div.itm3-4 {
  width: calc(108/11*1rem);
  left: calc(404/11*1rem);
  top: calc((2530 - 2367)/11*1rem);
}

div.itm div.itm3-5 {
  width: calc(101/11*1rem);
  left: calc(533/11*1rem);
  top: calc((2463 - 2367)/11*1rem);
}

div.itm div.itm3-6 {
  width: calc(78/11*1rem);
  left: calc(660/11*1rem);
  top: calc((2479 - 2367)/11*1rem);
}

div.itm div.itm3-7 {
  width: calc(104/11*1rem);
  left: calc(749/11*1rem);
  top: calc((2516 - 2367)/11*1rem);
}

div.itm div.itm3-8 {
  width: calc(117/11*1rem);
  left: calc(815/11*1rem);
  top: calc((2492 - 2367)/11*1rem);
}

div.itm div.itm3-9 {
  padding-right: calc(130 / 11* 1rem);
  width: calc(121/11*1rem);
  left: calc(954/11*1rem);
  top: calc((2456 - 2367)/11*1rem);
}

div.itm div.itm4-1 {
  width: calc(137/11*1rem);
  left: calc(25/11*1rem);
  top: calc((3156 - 3047)/11*1rem);
}

div.itm div.itm4-2 {
  width: calc(103/11*1rem);
  left: calc(151/11*1rem);
  top: calc((3229 - 3047)/11*1rem);
}

div.itm div.itm4-3 {
  width: calc(57/11*1rem);
  left: calc(258/11*1rem);
  top: calc((3162 - 3047)/11*1rem);
}

div.itm div.itm4-4 {
  width: calc(123/11*1rem);
  left: calc(333/11*1rem);
  top: calc((3227 - 3047)/11*1rem);
}

div.itm div.itm4-5 {
  width: calc(111/11*1rem);
  left: calc(450/11*1rem);
  top: calc((3189 - 3047)/11*1rem);
}

div.itm div.itm4-6 {
  width: calc(158/11*1rem);
  left: calc(539/11*1rem);
  top: calc((3163 - 3047)/11*1rem);
}

div.itm div.itm4-7 {
  width: calc(85/11*1rem);
  left: calc(695/11*1rem);
  top: calc((3217 - 3047)/11*1rem);
}

div.itm div.itm4-8 {
  padding-right: calc(100 / 11* 1rem);
  width: calc(201/11*1rem);
  left: calc(796/11*1rem);
  top: calc((3155 - 3047)/11*1rem);
}

div.itm div.itm5-1 {
  width: calc(185/11*1rem);
  left: calc(38/11*1rem);
  top: calc((3845 - 3726)/11*1rem);
}

div.itm div.itm5-2 {
  width: calc(81/11*1rem);
  left: calc(241/11*1rem);
  top: calc((3906 - 3726)/11*1rem);
}

div.itm div.itm5-3 {
  width: calc(88/11*1rem);
  left: calc(337/11*1rem);
  top: calc((3856 - 3726)/11*1rem);
}

div.itm div.itm5-4 {
  width: calc(147/11*1rem);
  left: calc(414/11*1rem);
  top: calc((3937 - 3726)/11*1rem);
}

div.itm div.itm5-5 {
  width: calc(176/11*1rem);
  left: calc(516/11*1rem);
  top: calc((3841 - 3726)/11*1rem);
}

div.itm div.itm5-6 {
  width: calc(199/11*1rem);
  left: calc(704/11*1rem);
  top: calc((3826 - 3726)/11*1rem);
}

div.itm div.itm5-7 {
  width: calc(89/11*1rem);
  left: calc(810/11*1rem);
  top: calc((3932 - 3726)/11*1rem);
}

div.itm div.itm5-8 {
  width: calc(98/11*1rem);
  left: calc(901/11*1rem);
  top: calc((3846 - 3726)/11*1rem);
}

div.itm div.itm5-9 {
  padding-right: calc(140 / 11* 1rem);
  width: calc(98/11*1rem);
  left: calc(1035/11*1rem);
  top: calc((3822 - 3726)/11*1rem);
}

div.itm div.itm6-1 {
  width: calc(100/11*1rem);
  left: calc(35/11*1rem);
  top: calc((4509 - 4406)/11*1rem);
}

div.itm div.itm6-2 {
  width: calc(118/11*1rem);
  left: calc(141/11*1rem);
  top: calc((4575 - 4406)/11*1rem);
}

div.itm div.itm6-3 {
  width: calc(70/11*1rem);
  left: calc(253/11*1rem);
  top: calc((4518 - 4406)/11*1rem);
}

div.itm div.itm6-4 {
  width: calc(150/11*1rem);
  left: calc(360/11*1rem);
  top: calc((4552 - 4406)/11*1rem);
}

div.itm div.itm6-5 {
  width: calc(149/11*1rem);
  left: calc(523/11*1rem);
  top: calc((4682 - 4406)/11*1rem);
}

div.itm div.itm6-6 {
  width: calc(181/11*1rem);
  left: calc(536/11*1rem);
  top: calc((4539 - 4406)/11*1rem);
}

div.itm div.itm6-7 {
  width: calc(98/11*1rem);
  left: calc(722/11*1rem);
  top: calc((4528 - 4406)/11*1rem);
}

div.itm div.itm6-8 {
  padding-right: calc(130 / 11* 1rem);
  width: calc(109/11*1rem);
  left: calc(863/11*1rem);
  top: calc((4508 - 4406)/11*1rem);
}

div.itm div.itm7-1 {
  width: calc(116/11*1rem);
  left: calc(26/11*1rem);
  top: calc((5193 - 5086)/11*1rem);
}

div.itm div.itm7-2 {
  width: calc(134/11*1rem);
  left: calc(156/11*1rem);
  top: calc((5260 - 5086)/11*1rem);
}

div.itm div.itm7-3 {
  width: calc(71/11*1rem);
  left: calc(247/11*1rem);
  top: calc((5200 - 5086)/11*1rem);
}

div.itm div.itm7-4 {
  width: calc(276/11*1rem);
  left: calc(327/11*1rem);
  top: calc((5194 - 5086)/11*1rem);
}

div.itm div.itm7-5 {
  width: calc(83/11*1rem);
  left: calc(612/11*1rem);
  top: calc((5264 - 5086)/11*1rem);
}

div.itm div.itm7-6 {
  width: calc(72/11*1rem);
  left: calc(709/11*1rem);
  top: calc((5219 - 5086)/11*1rem);
}

div.itm div.itm7-7 {
  width: calc(176/11*1rem);
  left: calc(736/11*1rem);
  top: calc((5381 - 5086)/11*1rem);
}

div.itm div.itm7-8 {
  width: calc(61/11*1rem);
  left: calc(846/11*1rem);
  top: calc((5184 - 5086)/11*1rem);
}

div.itm div.itm7-9 {
  padding-right: calc(130 / 11* 1rem);
  width: calc(90/11*1rem);
  left: calc(957/11*1rem);
  top: calc((5191 - 5086)/11*1rem);
}

section.product:last-of-type {
  margin-bottom: calc(38/11*1rem);
}
.item_slide-wrapper {
  position: relative;
  margin-inline: calc(32/11*1rem);
}
.item_slide-wrapper::before {
  content: "";
  position: absolute;
  z-index: 10;
}
.style1 .item_slide-wrapper::before {
  top: calc(194/11*1rem);
  right: calc(21/11*1rem);
  width: calc(92/11*1rem);
  aspect-ratio: 92/36;
  background: url(../img/item01_text.svg) no-repeat center / contain;
}
.style2 .item_slide-wrapper::before {
  top: calc(261/11*1rem);
  left: calc(29/11*1rem);
  width: calc(99/11*1rem);
  aspect-ratio: 99/36;
  background: url(../img/item02_text.svg) no-repeat center / contain;
}
.style3 .item_slide-wrapper::before {
  top: calc(152/11*1rem);
  right: calc(18/11*1rem);
  width: calc(113/11*1rem);
  aspect-ratio: 113/36;
  background: url(../img/item03_text.svg) no-repeat center / contain;
}
.style4 .item_slide-wrapper::before {
  top: calc(179/11*1rem);
  right: calc(34/11*1rem);
  width: calc(95/11*1rem);
  aspect-ratio: 95/36;
  background: url(../img/item04_text.svg) no-repeat center / contain;
}
.style5 .item_slide-wrapper::before {
  top: calc(282/11*1rem);
  right: calc(17/11*1rem);
  width: calc(81/11*1rem);
  aspect-ratio: 81/36;
  background: url(../img/item05_text.svg) no-repeat center / contain;
}
.style6 .item_slide-wrapper::before {
  top: calc(267/11*1rem);
  left: calc(31/11*1rem);
  width: calc(91/11*1rem);
  aspect-ratio: 91/36;
  background: url(../img/item06_text.svg) no-repeat center / contain;
}
.item_slide img {
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.8s;
}
.item_slide.swiper-slide-active img {
  opacity: 1;
}
.item_detail {
  display: flex;
  justify-content: space-between;
  padding-inline: calc(32/11*1rem);
  margin-top: calc(46/11*1rem);;
  margin-bottom: calc(23/11*1rem);;
}
.item_slide {
  background: var(--beige);
}
.item_slide img {
  width: 100%;
  height: auto;
}
.item_detail .left {
  width: 50%;
}
.item_detail .right {
  position: relative;
  width: 45.18%;
}
.item_detail h1 {
  font-size: clamp(0.1rem,calc(100vw * 14 / 390),26px);
  font-weight: 400;
  line-height: calc(21/14);
  margin-bottom: calc(12/11*1rem);
}
.item_detail h2 {
  margin-bottom: calc(21/11*1rem);
  font-weight: 400;
}
.item_detail .left p {
  margin-bottom: calc(13/11*1rem);
  font-weight: 300;
}
.item_image {
  width: 100%;
  height: auto;
  margin-bottom: calc(12/11*1rem);
}
.item_deco {
  position: absolute;
  top: calc(-18/11*1rem);
  left: 0;
  right: 0;
  margin-inline: auto;
  width: auto;
  height: calc(13/11*1rem);
}
.item_detail h3 {
  font-size: clamp(0.1rem,calc(100vw * 11 / 390),22px);
  margin-bottom: calc(3/11*1rem);
}
.item_detail .right p {
  font-size: clamp(0.1rem,calc(100vw * 9 / 390),18px);
}

/* ===============================================
# store
=============================================== */
.store {
  text-align: center;
}
.store img {
  width: calc(162/11*1rem);
  height: auto;
}

/* ===============================================
# footer
=============================================== */
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;
}
footer small {
  text-align:center;
  display: block;
}