@charset "UTF-8";
/*PRECSCSSの調整*/
div#one_maincolumn { width: 100%; max-width: 1100px; margin: 0 auto; }

#content { width: 100%; max-width: 1100px; margin: 0 auto; }

#contentInner { max-width: 1100px !important; margin: 0 auto; }

/*成分表用*/
.compositionListOuter.bg01 { background: #d0d8d8; margin-top: 4.666667%; }

.compositionListOuter dt { color: #000; font-weight: 600; }

.textMoreBt { font-weight: 600; }

/*form用*/
#coupon_area { display: none !important; }

/*stickyのため(PC)*/
body, #container._pcView, #contentInner { overflow: visible !important; }

/*成分表用*/
.compositionListOuter { padding: 4% 3%; }

.compositionListOuter .compositionList dt { margin-bottom: 3%; }

.compositionListOuter .compositionList dd { padding: 3% 3% 4%; }

.compositionListOuter .compositionList dd + dt { margin-top: 6%; }

.compositionListOuter .compositionList dd .textExcerpt + .textMoreBt { margin-top: 5%; font-size: 3.2vw; }

div#container._pcView .compositionListOuter { font-size: 20px; }

div#container._pcView .compositionListOuter .compositionList dd p { font-size: 16px; line-height: 1.5; }

div#container._pcView .compositionListOuter .compositionList dd .textExcerpt { max-height: 3em; min-height: 3em; }

div#container._pcView .compositionListOuter .compositionList dd .textExcerpt + .textMoreBt { font-size: 18px; }

/*PC*/
div#container._pcView .productSliderContainer { width: 1100px; margin: 60px auto 0; display: flex; gap: 60px; align-items: flex-start; position: relative; }
div#container._pcView .sliderLeft { position: sticky; top: 0; z-index: 100; width: 520px; z-index: 100; display: flex; flex-direction: column; align-items: flex-start; background: #fff; }
div#container._pcView .mainSwiper { width: 520px; height: 520px; margin: 0; flex-shrink: 0; }
div#container._pcView .mainSwiper img { width: 100%; height: 100%; object-fit: cover; display: block; }
div#container._pcView .thumbsNav { position: relative; margin-top: 20px; width: 520px; height: 80px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 0; flex-shrink: 0; }
div#container._pcView .thumbsArrow { position: relative; width: 32px; height: 80px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
div#container._pcView .thumbsArrow:before { content: ''; display: block; width: 13px; height: 13px; border-top: 1px #333 solid; border-right: 1px #333 solid; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-135deg); transition: all .2s; }
div#container._pcView .thumbsNext:before { transform: translate(-50%, -50%) rotate(45deg); }
div#container._pcView .thumbsPrev:before { transform: translate(-50%, -50%) rotate(-135deg); }
div#container._pcView .thumbsSwiper { width: 456px; /* 520px - 32px*2 (arrow) */ height: 85px; box-sizing: border-box; margin: 0; flex-shrink: 0; }
div#container._pcView .thumbsSwiper .swiper-wrapper { align-items: center; }
div#container._pcView .thumbsSwiper img { width: 80px !important; height: 80px !important; object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: border 0.2s; background: #fff; display: block; }
div#container._pcView .thumbsSwiper .swiper-slide-thumb-active img { border: 2px solid #007aff; }
div#container._pcView .annotation { font-size: 18px; line-height: 1; letter-spacing: 0.025em; font-weight: 600; margin-top: 20px; color: #d1273b; }
div#container._pcView .sliderRight { width: 520px; }
div#container._pcView .sliderRight img { width: 100%; }
div#container._pcView .sliderRight div { position: relative; margin-bottom: 20px; }
div#container._pcView .sliderRight div a { display: flex; align-items: center; justify-content: center; position: absolute; left: 30px; bottom: 40px; width: 290px; height: 60px; border: 1px solid #000; font-size: 18px; font-weight: 600; color: #fff; line-height: 1; background: #000; text-decoration: none; text-align: center; transition: 0.3s; }
div#container._pcView .sliderRight div a span { margin-left: -4%; }
div#container._pcView .sliderRight div a:hover { background: #fff; color: #000; }
div#container._pcView .sliderRight div a:hover::before { border-top: 1px #000 solid; border-right: 1px #000 solid; }
div#container._pcView .sliderRight div a.reg { background: #d1273b; border: 1px solid #d1273b; }
div#container._pcView .sliderRight div a.reg:hover { background: #fff; color: #d1273b; }
div#container._pcView .sliderRight div a.reg:hover::before { border-top: 1px #d1273b solid; border-right: 1px #d1273b solid; }
div#container._pcView .sliderRight div a::before { content: ''; display: block; width: 12px; height: 12px; border-top: 1px #fff solid; border-right: 1px #fff solid; position: absolute; top: 50%; right: 4%; transform: translate(-50%, -50%) rotate(45deg); transition: all .2s; }

/*sp*/
div#container._spView .productSliderContainer { width: 100%; margin: 0 auto; display: block; align-items: flex-start; position: relative; }
div#container._spView .sliderLeft { width: 100%; }
div#container._spView .mainSwiper { width: 100%; height: auto; margin: 0; }
div#container._spView .mainSwiper img { width: 100%; height: 100%; object-fit: cover; display: block; }
div#container._spView .thumbsNav { position: relative; margin-top: 4vw; width: 100%; height: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 0; flex-shrink: 0; }
div#container._spView .thumbsArrow { position: relative; width: 32px; height: auto; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
div#container._spView .thumbsArrow:before { content: ''; display: block; width: 1.73333333vw; height: 1.73333333vw; border-top: 1px #333 solid; border-right: 1px #333 solid; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-135deg); transition: all .2s; }
div#container._spView .thumbsNext:before { transform: translate(-50%, -50%) rotate(45deg); }
div#container._spView .thumbsPrev:before { transform: translate(-50%, -50%) rotate(-135deg); }
div#container._spView .thumbsSwiper { width: 87.333333333vw; height: auto; box-sizing: border-box; margin: 0; flex-shrink: 0; }
div#container._spView .thumbsSwiper .swiper-wrapper { align-items: center; }
div#container._spView .thumbsSwiper img { width: 15.33333333vw !important; height: 15.33333333vw !important; object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: border 0.2s; background: #fff; display: block; }
div#container._spView .thumbsSwiper .swiper-slide-thumb-active img { border: 2px solid #007aff; }
div#container._spView .annotation { font-size: 2.9333333vw; line-height: 1; letter-spacing: 0.025em; font-weight: 600; margin: 4vw 0 0 5.333333333vw; color: #d1273b; }
div#container._spView .sliderRight { width: 89.333333333333vw; margin: 5.333333333vw auto 0; }
div#container._spView .sliderRight div { position: relative; margin-bottom: 4vw; }
div#container._spView .sliderRight div a { display: flex; align-items: center; justify-content: center; position: absolute; left: 4vw; bottom: 5.33333333%; width: 81.333333333vw; height: 11.3333333333vw; border: 1px solid #000; font-size: 3.4666666vw; font-weight: 600; color: #fff; line-height: 1; background: #000; text-decoration: none; text-align: center; transition: 0.3s; }
div#container._spView .sliderRight div a span { margin-left: -4%; }
div#container._spView .sliderRight div a:hover { background: #fff; color: #000; }
div#container._spView .sliderRight div a:hover::before { border-top: 1px #000 solid; border-right: 1px #000 solid; }
div#container._spView .sliderRight div a.reg { background: #d1273b; border: 1px solid #d1273b; }
div#container._spView .sliderRight div a.reg:hover { background: #fff; color: #d1273b; }
div#container._spView .sliderRight div a.reg:hover::before { border-top: 1px #d1273b solid; border-right: 1px #d1273b solid; }
div#container._spView .sliderRight div a::before { content: ''; display: block; width: 1.6vw; height: 1.6vw; border-top: 1px #fff solid; border-right: 1px #fff solid; position: absolute; top: 50%; right: 4%; transform: translate(-50%, -50%) rotate(45deg); transition: all .2s; }