@charset "UTF-8";

/*//////////////////////////////////////////////////

Title : Moon CSS

//////////////////////////////////////////////////*/


/* ===================
       RESET
=================== */

main,
#Contents {
  max-width: 100%;
}

#Wrap {
  width: 100%;
}

footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

a {
  text-decoration: none;
}

p, ul, ol, dl {
  margin: 0;
}

.topic-path {
  margin-right: 0;
  margin-left: 0;
}

#Wrap, .wrapTop, .wrapBottom {
  width: 100%;
}


/* ===================
      //RESET
=================== */

/* ===================
         FONT
=================== */
/* nomal */
@font-face {
  font-family: "YuGothic";
  src: url(../font/YuGothic/otf/YuGothic-Regular.otf) format('otf');
  src: url(../font/YuGothic/woff/YuGothic-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}
/* bold */
@font-face {
  font-family: "YuGothic";
  src: url(../font/YuGothic/otf/YuGothic-Bold.otf) format('otf');
  src: url(../font/YuGothic/woff/YuGothic-Bold.woff) format('woff');
  font-weight: bold;
  font-style: normal;
}
/* Medium */
@font-face {
  font-family: "YuGothic";
  src: url(../font/YuGothic/otf/YuGothic-Medium.otf) format('otf');
  src: url(../font/YuGothic/woff/YuGothic-Medium.woff) format('woff');
  font-weight: medium;
  font-style: normal;
}

.txt_en {
  font-family: 'Cormorant Infant', serif;
}

.txt_min {
  font-family: 'Shippori Mincho', serif;
}

.txt_italic {
  font-style: italic;
}

/* ===================
       //FONT
=================== */

/* ===================
    LP CONTENTS
=================== */

:root {
  --bg-color: #f7f0e6;
  --sub-bg-color: #fdf2f2;
  --sub-bg-color-rgb: 253,242,242;
  --main-color: #b88f8c;
  --text-color: #666666;
  --scroll-line-color: #999999;
}

html {
  overflow-x: clip;
}


.lp_contents {
  overflow-x: clip;
  max-width: 100%;
  margin: auto;
  padding: 5rem 0 6rem;
  box-sizing: border-box;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", YuGothic, "游ゴシック体", "メイリオ", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 300;
  text-align: center;
  color: var(--text-color);
  letter-spacing: 0.03em;
  background: var(--bg-color);
}

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


.lp_contents ul,
.lp_contents li {
  list-style: none;
}

.lp_contents a:hover {
  opacity: 1;
}

.lp_contents img {
  width: 100%;
  max-width: 100%;
}

.lp_contents sup {
  color: #888;
}

/* ===================
    //LP CONTENTS
=================== */

/* -- List -- */

.list ul {
  letter-spacing: -0.4em;
}

.list ul li {
  display: inline-block;
  letter-spacing: 0.08em;
  vertical-align: top;
}

/* -- List Dot -- */

.list_dot,
.list.list_dot {
  margin: 1em 0;
}

.list_dot .list_dot {
  margin: 0 0 .5em;
}

.list_dot ul,
.list.list_dot ul {
  margin: 0;
  padding-left: 1.5em !important;
}

.list_dot ul li {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  list-style-type: none;
  line-height: 1.8;
}

.list_dot ul li ul {
  padding-top: 2px;
  padding-left: 2.5em !important;
}

.list_dot ul li:before {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: -1em;
  margin-right: 14px;
  background: #555;
  border-radius: 100%;
  vertical-align: middle;
  content: "";
}

/* ===================
  　　　ANIME
=================== */

/* -- keyframes -- */

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes tra1 {
  100% {
    transform: translateX(0);
  }
}

@keyframes tra2 {
  100% {
    transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes tra3_2 {
  0% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes tra4 {
  0% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra5 {
  0% {
    transform: translateX(-30%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra6 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa1 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}


.ef-top {
  opacity: 0;
  transform: translateY(50px);
}

.ef-top.effect {
  animation: opa1 .8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3 .8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}


/* ===================
       //ANIME
=================== */


/* ===================
       COMMON
=================== */

.lp_contents .sec_ttl {
}

.sec_inner {
  width: 110rem;
  margin-right: auto;
  margin-left: auto;
}

/* ===================
      //COMMON
=================== */


/* ===================
      MAIN VISUAL
=================== */

.mv_section {
  position: relative;
  z-index: 1;
}

.mv_section .sec_inner {
  position: relative;
  z-index: 1;
  width: calc(103* (100vh / 80));
  height: calc(260* (100vh / 80));
}


.mv_section .mv_frame {
  position: sticky;
  top: calc(7* (100vh / 80));
  left: 0;
  width: calc(102* (100vh / 80));
  height: calc(72* (100vh / 80));
}

.mv_section .mv_frame::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../img/mv_frame.svg");  
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/mv_frame.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--main-color);
  content: "";
  pointer-events: none;
}

@media (max-width: 820px) {

  .mv_section .sec_inner,
  .mv_section .mv_frame {
    left: 50%;
    transform: translateX(-50%);
  }

}

@media (max-width: 1280px) and (min-height: 1000px) {

  .mv_section .sec_inner,
  .mv_section .mv_frame {
    left: 50%;
    transform: translateX(-50%);
  }

}

@media (max-width: 1000px) and (max-height: 1000px) {
  .mv_section .sec_inner,
  .mv_section .mv_frame {
    left: 50%;
    transform: translateX(-50%);
  }
}

.mv_section .mv_frame::before {
  opacity: 0;
  transition: opacity 2s linear,background-image 2s linear;
  position: absolute;
  top: calc(0.5* (100vh / 80));
  left: calc(0.5* (100vh / 80));
  right: calc(0.5* (100vh / 80));
  bottom: calc(0.5* (100vh / 80));
  background-image: url(../img/mv_star_1.svg),url(../img/mv_star_2.svg),url(../img/mv_star_3.svg),url(../img/mv_star_4.svg),url(../img/mv_star_5.svg),url(../img/mv_star_6.svg);
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-position: 0 0,300% 300%,300% 300%,300% 300%,300% 300%,300% 300%;
  background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  content: "";
}

 .mv_section .effect .mv_frame.moon_1::before {
  opacity: 0.4;
}

.mv_frame.moon_1::before {
  background-image: url(../img/mv_star_1.svg);
}

.mv_frame.moon_2::before {
  opacity: 1;
  background-image: url(../img/mv_star_1.svg);
}

.mv_frame.moon_3::before {
  opacity: 1;
  background-image: url(../img/mv_star_2.svg);
}

.mv_frame.moon_4::before {
  opacity: 1;
  background-image: url(../img/mv_star_3.svg);
}

.mv_frame.moon_5::before {
  opacity: 1;
  background-image: url(../img/mv_star_4.svg);
}

.mv_frame.moon_6::before {
  opacity: 1;
  background-image: url(../img/mv_star_5.svg);
}

.mv_frame.moon_7::before {
  opacity: 1;
  background-image: url(../img/mv_star_6.svg);
}

.mv_frame.moon_8::before {
  opacity: .8;
  background-image: url(../img/mv_star_6.svg);
}

.mv_frame.moon_9::before {
  opacity: 1;
  background-image: url(../img/mv_star_6.svg);
}

/* ---- 月 ---- */
.mv_moon {
  position: absolute;
  top: calc(3* (100vh / 80));
  left: 50%;
  display: flex;
  align-items: flex-end;
  align-content: flex-end;
  transform: translateX(-50%);
  width: calc(36* (100vh / 80));
  height: calc(9* (100vh / 80));
  margin: auto;
}

.mv_moon span {
  position: relative;
  display: flex;
  align-content: flex-end;
  align-items: flex-end;
  overflow: hidden;
  width: 0;
  height: calc(9* (100vh / 80));
  float: left;
  transition: width .2s linear,border-radius .2s linear;
  border-radius: 0 4rem 4rem 0;
}

.mv_moon span::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../img/mv_moon.svg");  
  mask-repeat: no-repeat;
  mask-position: top left;
  mask-size: cover;
  -webkit-mask-image: url("../img/mv_moon.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top left;
  -webkit-mask-size: cover;
  background: var(--main-color);
  content: "";
}

.moon_1 .mv_moon span {
  width: calc(3.7* (100vh / 80));
  border-radius: 0;
}

.moon_2 .mv_moon span {
  width: calc(7.3* (100vh / 80));
}

.moon_3 .mv_moon span {
  width: calc(12* (100vh / 80));
}

.moon_4 .mv_moon span {
  width: calc(15.3* (100vh / 80));
  border-radius: 0;
}

.moon_5 .mv_moon span {
  width: calc(20.5* (100vh / 80));
  border-radius: 0;
}

.moon_6 .mv_moon span {
  width: calc(24.4* (100vh / 80));
  border-radius: 0;
}

.moon_7 .mv_moon span {
  width: calc(28.9* (100vh / 80));
  border-radius: 0;
}

.moon_8 .mv_moon span {
  width: calc(32.7* (100vh / 80));
}

.moon_9 .mv_moon span {
  width: calc(36* (100vh / 80));
  border-radius: 0;
}

.mv_moon span img {
  width: calc(36* (100vh / 80));
  max-width: calc(36* (100vh / 80));
}

.mv_main_title {
  overflow: hidden;
  position: absolute;
  top: calc(12* (100vh / 80));
  left: 0;
  right: 0;
  height: calc(6* (100vh / 80));
  font-size: calc(4.8* (100vh / 80));
  font-family: 'Cormorant Infant', serif;
  font-weight: 200;
  letter-spacing: .05em;
  color: var(--main-color);
}

.mv_main_title span {
  display: block;
  transform: translateY(80px);
}

.effect .mv_main_title span {
  animation: mv_tra 1.6s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

@keyframes mv_tra {
  0% {
    transform: translateY(80px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ---- 新月・満月タイトル ---- */

.mv_title {
  position: absolute;
  top: calc(20* (100vh / 80));
  left: 50%;
  transform: translateX(-50%);
  width: calc(80* (100vh / 80));
  margin: auto;
}

/* -- 星ライン --*/
.mv_title::before,
.mv_title::after {
  content: "";
  position: absolute;
  top: calc(2.8* (100vh / 80));
  width: 0;
  height: calc(2.5* (100vh / 80));
  background-repeat: no-repeat;
  background-size: calc(25.2* (100vh / 80));
  background-position: top right;
}

@keyframes mv_line {
  0% {
    width: 0;
  }

  100% {
    width: calc(25.2* (100vh / 80));
  }
}

.mv_title::before {
  right: 50%;
  margin-right: calc(12.8* (100vh / 80));
  background-image: url(../img/mv_ttl_line_left.svg);
}

.effect .mv_title::before,
.effect .mv_title::after {
  animation: mv_line 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.mv_title::after {
  left: 50%;
  margin-left: calc(12.8* (100vh / 80));
  background-image: url(../img/mv_ttl_line_right.svg);
  background-position: 0 0;
}

.effect .mv_title::after {
}
/* -- //星ライン --*/

.mv_title span {
  display: block;
  line-height: 1.2;
}

.mv_title h3 {
  transition: opacity 1s cubic-bezier(0.72, 0.11, 0.58, 1);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mv_title .txt_sm {
  font-family: 'Shippori Mincho', serif;
  font-weight: 200;
  font-size: calc(1.4* (100vh / 80));
  letter-spacing: 0.8em;
}

.mv_title .txt_main {
  font-family: 'Cormorant Infant', serif;
  font-weight: 200;
  font-size: calc(3.6* (100vh / 80));
  letter-spacing: 0.06em;
}

.mv_title .txt_sub {
  font-family: 'Cormorant Infant', serif;
  font-weight: 200;
  font-size: calc(2.2* (100vh / 80));
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.moon_1 .ttl_newmoon,
.moon_2 .ttl_newmoon,
.moon_3 .ttl_newmoon {
  opacity: 1;
}

.moon_4 .ttl_newmoon {
  opacity: .8;
}

.moon_5 .ttl_newmoon,
.moon_6 .ttl_newmoon,
.moon_7 .ttl_newmoon,
.moon_8 .ttl_newmoon,
.moon_9 .ttl_newmoon {
  opacity: 0;
}

.moon_1 .ttl_fullmoon,
.moon_2 .ttl_fullmoon,
.moon_3 .ttl_fullmoon,
.moon_4 .ttl_fullmoon {
  opacity: 0;
}

.moon_5 .ttl_fullmoon,
.moon_6 .ttl_fullmoon,
.moon_7 .ttl_fullmoon,
.moon_8 .ttl_fullmoon,
.moon_9 .ttl_fullmoon {
  opacity: 1;
}

/* ---- MV商品 ---- */

.mv_item_wrap {
  position: absolute;
  top: calc(20* (100vh / 80));
  left: 50%;
  transform: translateX(-50%);
  width: calc(40* (100vh / 80));
  margin: auto;
}

.mv_item {
  transition: opacity .8s cubic-bezier(0.72, 0.11, 0.58, 1);
  opacity: 0;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(40* (100vh / 80));
  transform: translateX(-50%);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));
}

.moon_1 .item_1 {
  opacity: 1;
  z-index: 2;
}

.moon_2 .item_2 {
  opacity: 1;
  z-index: 2;
}

.moon_3 .item_3 {
  opacity: 1;
  z-index: 2;
}

.moon_4 .item_4 {
  opacity: 1;
  z-index: 2;
}

.moon_5 .item_5 {
  opacity: 1;
  z-index: 2;
}

.moon_6 .item_6 {
  opacity: 1;
  z-index: 2;
}

.moon_7 .item_7 {
  opacity: 1;
  z-index: 2;
}

.moon_8 .item_8 {
  opacity: 1;
  z-index: 2;
}

.moon_9 .item_9 {
  opacity: 1;
  z-index: 2;
}

/* ---- Scroll ---- */
.mv_scroll {
  position: sticky;
  left: 100%;
  bottom: 9rem;
  width: 15rem;
  margin-right: 0rem;
  padding: 0 6rem 2rem 0;
  z-index: 999;
  font-family: 'Cormorant Infant', serif;
  font-weight: 800;
  text-align: right;
  transform: rotate(90deg);
  color: var(--main-color);
}

.mv_scroll::before {
  position: absolute;
  bottom: 3rem;
  right: 0;
  width: 5rem;
  height: 1px;
  background: var(--scroll-line-color);
  content: "";
}

.mv_scroll::after {
  content: "";
  position: absolute;
  bottom: 2.2rem;
  height: 1px;
  width: 1.5rem;
  height: 1.7rem;
  background: url(../img/icn_star.svg) no-repeat;
  background-size: 1.5rem;
  background-position: 0;
  animation: scroll 3.4s cubic-bezier(0.6, 0.02, 0.41, 1.02) infinite;
}

 @keyframes scroll {
  0% {
    opacity: 1;
    right: 4rem;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    right: -1rem;
  }
}

/* ===================
    //MAIN VISUAL
=================== */


/* ===================
      LP MENU
=================== */

.lp_menu {
  transition: opacity .4s cubic-bezier(0.72, 0.11, 0.58, 1);
  opacity: 0;
  position: fixed;
  right: 2rem;
  bottom: 5rem;
  z-index: 999;
  width: 19.2rem;
  height: 4.2rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 1.6rem;
}

.lp_menu.fixed {
  opacity: 1;
}

.lp_menu a {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: .8rem 3rem .8rem 4.2rem;
  border: 1px solid #959595;
  background: url(../img/moon_icn_fullnew.png) no-repeat .5rem center #EAE3DD;
  background-size: 3rem;
  border-radius: 300px;
  letter-spacing: 0.02em;
}

.lp_menu a::before,
.lp_menu a::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 52%;
  right: 1.5rem;
  width: 1rem;
  height: 1px;
  line-height: 1;
  background: #535353;
  color: #333;
}

.lp_menu a::before {
}

.lp_menu a::after {
  transform: rotate(90deg);
}

/* ===================
      //LP MENU
=================== */

/* ===================
        INTRO
=================== */

.intro_section {
}

.intro_section .sec_inner {
  padding-top: 8.73rem;
  padding-bottom: 8.2rem;
}

.intro_section .set_ttl {
  width: fit-content;
  margin: 0 auto 5.5rem;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
  color: var(--main-color);
}

.intro_section .set_ttl .txt_L {
  position: relative;
  display: block;
  margin-top: 1.5rem;
  font-size: 3.2rem;
}

.intro_section .set_ttl .txt_L::before {
  position: absolute;
  top: 0;
  right: 100%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -.5rem .8rem 0 0;
  mask-image: url("../img/txt_001.svg");  
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/txt_001.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--main-color);
  content: "";
}

.intro_section .set_ttl .txt_L::after {
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0 -.5rem .8rem;
  mask-image: url("../img/txt_001.svg");  
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/txt_001.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--main-color);
  transform: rotate(180deg);
  content: "";
}

.intro_ttl {
  margin-bottom: 3rem;
  font-size: 2.2rem;
  line-height: 1.7;
  color: var(--main-color);
}

.intro_acc {
  width: 80rem;
  max-width: 100%;
  margin: auto;
  font-size: 1.5rem;
  text-align: justify;
  letter-spacing: 0.04em;
}

.intro_acc p {
  line-height: 2;
  color: var(--main-color);
}

.section .acc_btn {
  cursor: pointer;
  line-height: 1.2;
  text-align: center !important;
}

.section .acc_btn.hidden {
  display: none;
}

.section .acc_btn span {
  position: relative;
  display: inline-block;
  padding: 1.5rem 1.5rem 0.5rem 0;
  font-size: 1.8rem;
  font-family: 'Cormorant Infant', serif;
  border-bottom: 1px solid #707070;
  line-height: 1.2;
}

.section .acc_btn span::before,
.section .acc_btn span::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 61%;
  right: 0;
  width: 1rem;
  height: 1px;
  line-height: 1;
  background: #707070;
  color: #333;
}

.intro_acc .acc_btn span {
  border-color: var(--main-color);
}

.intro_acc .acc_btn span::before,
.intro_acc .acc_btn span::after {
  background: var(--main-color);
}


.section .acc_btn span::before {
}

.section .acc_btn span::after {
  transform: rotate(90deg);

}

/* ===================
       //INTRO
=================== */

/* ===================
      PRODUCT
=================== */

.product_section {
}

.product_section .sec_inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.product_section .product_wrap {
  position: relative;
  width: calc((100% - 4rem) / 3);
  padding: 2rem;
  opacity: 0;
  transition: opacity 1s;
  transform: translateY(30px);
  background: #fff;
}

.product_section .product_wrap.active {
  opacity: 1;
  transform: translateY(0);
}

.product_wrap::before,
.product_wrap::after {
  position: absolute;
  content: "";
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

.product_wrap.active::before,
.product_wrap.active::after {
  opacity: 1;
}

.product_section .product_wrap.wider {
  width: 100%;
}

.product_section .product_head {
  display: flex;
  justify-content: center;
  gap: 5rem;
}

.product_section .product_head .product_cont {
  width: 30rem;
  margin-right: 0;
  margin-left: 0;
}

.product_section .item_img {
  margin: 0 auto;
  /*filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));*/
}

.product_section .item_img a {
  display: block;
}

.product_section .item_moon {
  margin-bottom: 0.5rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 1.5rem;
}

.product_section .item_moon a {
  display: inline-block;
  min-height: 3rem;
  margin-right: 1rem;
  margin-bottom: .6rem;
  padding-left: 3.8rem;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 3rem;
  font-family: 'Cormorant Infant', serif;
  font-size: 1.8rem;
  font-weight: 200;
  font-style: italic;
  text-decoration: underline;
  color: #535353;
  line-height: 1.8;
}

.product_section .item_moon.newmoon a {
  background-image: url(../img/moon_icn_new.png);
}

.product_section .item_moon.fullmoon a {
  background-image: url(../img/moon_icn_full.png);
}

.product_section .item_name {
  margin-bottom: .5rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.6;
}

.product_section .item_price {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.product_section .item_price span {
  font-size: 1.3rem;
}

.product_section .product_cont {
  margin: 0 auto;
}

.product_section .product_detail {
  margin-top: 3rem;
  padding: 2.4rem 2rem 2.5rem;
  background: var(--sub-bg-color);
  border-radius: 1rem;
  text-align: left;
}

.product_section .product_detail_ttl {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.product_section .product_detail p {
  font-size: 1.3rem;
  line-height: 1.8;
  text-align: left;
}

.product_section .product_btn {
  text-align: center !important;
}

.product_section .product_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 4rem;
  margin: auto;
  background: var(--main-color);
  border-radius: 100rem;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}

.product_section .product_btn a span {
  padding: .2rem 0 .1rem 2.8rem;
  background: url(../img/icn_cart.png) no-repeat 0 center;
  background-size: 2rem auto;
  line-height: 1;
}

.product_section .product_detail .acc_cont p {
  position: relative;
  overflow: hidden;
  transition: max-height 1s cubic-bezier(0.72, 0.11, 0.58, 1);
  max-height: 6rem;
  text-align: justify;
  letter-spacing: 0.04em;
}

.product_section .product_detail .acc_cont p::before {
  opacity: .9;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 4.5rem;
  background: linear-gradient(180deg, rgba(var(--sub-bg-color-rgb), 0) 0%, rgba(var(--sub-bg-color-rgb), 1) 100%);
  content: "";
}

.product_section .product_detail .acc_cont.show p {
  max-height: 100rem;
}

.product_section .product_detail .acc_cont.show p::before {
  opacity: 0;
}

.product_section .product_detail .acc_cont .acc_btn {
  overflow: hidden;
  transition: height .3s cubic-bezier(0.72, 0.11, 0.58, 1) 0s;
  height: 4.5rem;
  text-align: center;
}

.product_section .product_detail .acc_cont.show .acc_btn {
  opacity: 0;
  height: 0;
}

.product_section .product_detail .acc_cont .acc_btn:before {
  display: none;
}

/* ===================
     //PRODUCT
=================== */

/* ===================
        MODAL
=================== */

.modal_section.hidden {
  display: none;
}

.modaal-content-container {
  width: 98rem;
  margin: auto;
  padding: 6rem 3rem;
}

.modaal-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.modaal-close:after,
.modaal-close:before {
  background: #000 !important;
  width: 1px;
  height: 2rem;
}

.modaal-container {
  box-shadow: none;
}

.moon_detail_content {
  display: flex;
  justify-content: center;
  background: #fff;
}

.moon_detail_content .moon_cont {
  padding: 0 3rem;
  border-left: 1px solid #ddd;
}

.moon_detail_content .moon_cont:first-child {
  border: 0;
}

.moon_detail_ttl {
  margin-bottom: 2rem;
  text-align: center;
}

.moon_detail_ttl span {
  display: inline-block;
}

.moon_detail_ttl .txt_lg {
  margin-bottom: .2rem;
  padding-left: 3.5rem;
  padding-bottom: .2rem;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 2.8rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 2.3rem;
  font-weight: 200;
  line-height: 1.5;
}

.moon_detail_ttl .txt_sm {
  display: block;
  font-family: 'Cormorant Infant', serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.newmoon .moon_detail_ttl .txt_lg {
  background-image: url(../img/moon_icn_new.png);
}

.fullmoon .moon_detail_ttl .txt_lg {
  background-image: url(../img/moon_icn_full.png);
}

.moon_detail_txt {
  width: 40rem;
}

.moon_detail_txt p {
  font-size: 1.4rem;
  text-align: justify;
  line-height: 1.9;
  letter-spacing: 0.08em;
}


/* ===================
       //MODAL
=================== */

/* ===================
        PROFILE
=================== */

.profile_section{
  position: relative;
  padding: 0.5rem 0 1rem 29rem;
  width: 83rem;
  margin: 10rem auto;
}

.profile_section .img_blk{
  position: absolute;
  left: 0;
  top: 0;
  width: 25rem;
}

.profile_section .profile_ttl{
  font-family: 'Cormorant Infant', serif;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 2rem;
  text-align: left;
}

.profile_section .profile_name{
  font-size: 2.4rem;
  line-height: 1;
  text-align: left;
}

.profile_section .profile_name span{
  display: block;
  font-size: 1.4rem;
  margin-top: 1.2rem;
}

.profile_section .profile_text{
  font-size: 1.3rem;
  line-height: 1.75;
  width: 54rem;
  text-align: justify;
  margin-top: 3rem;
}

/* ===================
      //PROFILE
=================== */







/*2024Spring変更点*/

.mv_main_title {
    top: calc(13* (100vh / 80));
    font-size: calc(5.6* (100vh / 80));
}

.product_section #item_1 .product_head .product_cont,
.product_section #item_2 .product_head .product_cont,
.product_section #item_3 .product_head .product_cont{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.product_section #item_1 .item_img{
  width: 60rem;
  margin: 0;
}

.product_section #item_2 .item_img{
  width: 40rem;
  margin: 0;
}

.product_section #item_3 .item_img{
  width: 60rem;
  margin: 0;
}







/*=======================================
               Responsive
========================================*/

/* Only for tablet */

@media screen and (min-width: 768px) and (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 1) {
  html {
    font-size: calc(10* (100vw / 1200)) !important;
  }

  header,
  #Contents,
  .contents,
  footer {
    min-width: 0;
  }

}

/* Only for tablet */


/*=======================================
                    PC
========================================*/

@media screen and (min-width:768px) {
  .lp_contents .sp_only {
    display: none;
  }

  .cam_bnr_wrap {
    position: relative;
    z-index: 999;
  }

  .lp_bg {
    transition: all 0.1s linear;
  }

  #Wrap {
    padding-top: 6.6rem;
  }

  #SincereGarden .acc_cont p {
    overflow: visible;
    max-height: inherit;
    transition: none;
    font-size: 1.3rem;
  }

  #SincereGarden .acc_cont p::before {
    display: none;
  }


}


/*=======================================
                    SP
========================================*/

@media screen and (max-width: 767px) {

  /* ===================
      LP CONTENTS
  =================== */

  #header {
    display: none !important;
  }

  #header.scroll,
  #header.sp_open {
    display: block !important;
  }

  .lp_contents {
    padding-top: calc(25* (100vw / 430));
    padding-bottom: calc(60* (100vw / 430));
  }

  footer {
    min-width: 0;
  }

  .lp_contents .pc_only {
    display: none;
  }

  .lp_contents .sp_only {
    display: block;
  }

  @keyframes fuwafuwa {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }

  /* ===================
      //LP CONTENTS
  =================== */

  /* ===================
        COMMON
  =================== */

  .section {
    padding: 0;
  }

  .lp_contents .sec_ttl {
  }

  .sec_inner {
    width: auto;
    margin-right: auto;
    margin-left: auto;
  }

  /* ===================
        //COMMON
  =================== */


  /* ===================
        MAIN VISUAL
  =================== */

  .mv_section {

  }

  .mv_section .sec_inner {
    width: calc(400* (100vw / 430));
    height: calc(10000* (100vw / 430));
    margin-bottom: calc(50* (100vw / 430));
  }

  .mv_section .sec_inner,
  .mv_section .mv_frame {
    left: auto;
    transform: none;
  }

  .mv_section .mv_frame {
    transition: top .8s ease-in-out;
    top: calc(90* (100vw / 430));
    width: calc(400* (100vw / 430));
    height: calc(600* (100vw / 430));
  }

  .mv_section .mv_frame::after {
    mask-image: url("../img/mv_frame_sp.svg");  
    -webkit-mask-image: url("../img/mv_frame_sp.svg");
  }

  .mv_section.frist_view .mv_frame {
    top: calc(80* (100vw / 430));
  }

  .mv_section .mv_frame::before {

    transition: opacity 2s linear;
    top: calc(5* (100vw / 430));
    left: calc(5* (100vw / 430));
    right: calc(5* (100vw / 430));
    bottom: calc(5* (100vw / 430));
    background-image: url(../img/mv_star_1_sp.svg),url(../img/mv_star_2_sp.svg),url(../img/mv_star_3_sp.svg),url(../img/mv_star_4_sp.svg),url(../img/mv_star_5_sp.svg),url(../img/mv_star_6_sp.svg);
  }

  .mv_frame.moon_1::before {
    background-image: url(../img/mv_star_1_sp.svg);
  }

  .mv_frame.moon_2::before {
    background-image: url(../img/mv_star_1_sp.svg);
  }

  .mv_frame.moon_3::before {
    background-image: url(../img/mv_star_2_sp.svg);
  }

  .mv_frame.moon_4::before {
    background-image: url(../img/mv_star_3_sp.svg);
  }

  .mv_frame.moon_5::before {
    background-image: url(../img/mv_star_4_sp.svg);
  }

  .mv_frame.moon_6::before {
    background-image: url(../img/mv_star_5_sp.svg);
  }

  .mv_frame.moon_7::before {
    background-image: url(../img/mv_star_6_sp.svg);
  }

  .mv_frame.moon_8::before {
    background-image: url(../img/mv_star_6_sp.svg);
  }

  .mv_frame.moon_9::before {
    background-image: url(../img/mv_star_6_sp.svg);
  }

  /* ---- 月 ---- */
  .mv_moon {
    top: calc(22* (100vw / 430));
    transform: translateX(-50%);
    width: calc(222* (100vw / 430));
    height: calc(62.5* (100vw / 430));
  }

  .mv_moon span {
    height: calc(62.5* (100vw / 430));
    border-radius: 0;
  }

  .mv_moon span::before {
    mask-image: url("../img/mv_moon_sp.svg");  
    -webkit-mask-image: url("../img/mv_moon_sp.svg");
  }

  .moon_1 .mv_moon span {
    width: calc(23* (100vw / 430));
    border-radius: 0;
  }

  .moon_2 .mv_moon span {
    width: calc(46* (100vw / 430));
  }

  .moon_3 .mv_moon span {
    width: calc(71* (100vw / 430));
  }

  .moon_4 .mv_moon span {
    width: calc(97* (100vw / 430));
  }

  .moon_5 .mv_moon span {
    width: calc(128* (100vw / 430));
  }

  .moon_6 .mv_moon span {
    width: calc(150* (100vw / 430));
  }

  .moon_7 .mv_moon span {
    width: calc(175* (100vw / 430));
  }

  .moon_8 .mv_moon span {
    width: calc(198* (100vw / 430));
  }

  .moon_9 .mv_moon span {
    width: calc(222* (100vw / 430));
  }

  .mv_moon span img {
    width: calc(222* (100vw / 430));
    max-width: calc(222* (100vw / 430));
  }

  .mv_main_title {
    top: calc(78.2* (100vw / 430));
    height: calc(86* (100vw / 430));
    font-size: calc(36* (100vw / 430));
    line-height: 1.24;
  }

  /* -- 星ライン --*/
  .mv_title::before,
  .mv_title::after {
    top: calc(24* (100vw / 430));
    width: 0;
    height: calc(14.35* (100vw / 430));
    background-size: calc(96.67* (100vw / 430));
  }

  .mv_title::before {
    margin-right: calc(87* (100vw / 430));
    background-image: url(../img/mv_ttl_line_left_sp.svg);
  }

  @keyframes mv_line {
    0% {
      width: 0;
    }

    100% {
      width: calc(96.67* (100vw / 430));
    }
  }

  .effect .mv_title::before,
  .effect .mv_title::after {
    animation: mv_line 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  }

  .mv_title::after {
    margin-left: calc(87* (100vw / 430));
    background-image: url(../img/mv_ttl_line_right_sp.svg);
  }

  /* -- //星ライン --*/

  .mv_main_title span {
    display: block;
    transform: translateY(40px);
  }

  .effect .mv_main_title span {
    animation: mv_tra 1.4s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  }

  @keyframes mv_tra {
    0% {
      transform: translateY(40px);
    }

    100% {
      transform: translateY(0);
    }
  }

  /* ---- 新月・満月タイトル ---- */

  .mv_title {
    top: calc(180* (100vw / 430));
    width: calc(400* (100vw / 430));
  }

  .mv_title span {
  }

  .mv_title h3 {
    padding-left: calc(10* (100vw / 430));
  }

  .mv_title .txt_sm {
    padding-bottom: calc(3* (100vw / 430));
    font-size: calc(14* (100vw / 430));
    letter-spacing: 0.6em;
  }

  .mv_title .txt_main {
    font-size: calc(30* (100vw / 430));
    line-height: 1;
  }

  .mv_title .txt_sub {
    font-size: calc(16* (100vw / 430));
    line-height: 1;
    letter-spacing: 0.05em;
  }

  /* ---- MV商品 ---- */

  .mv_item_wrap {
    top: calc(190* (100vw / 430));
    width: calc(320* (100vw / 430));
    margin: auto;
  }

  .mv_item {
    width: calc(320* (100vw / 430));
  }

  /* ---- Scroll ---- */
  .mv_scroll {
    transition: bottom .8s ease-in-out,opacity .8s ease-in-out;
    opacity: 1;
    display: inline-block;
    left: 50%;
    bottom: calc(50* (100vw / 430));
    padding: 0 0 calc(6* (100vw / 430)) calc(20* (100vw / 430));
    width: auto;
    transform: rotate(0);
    font-size: calc(14* (100vw / 430));
    font-weight: 800;
    text-align: left;
  }

  .mv_scroll.hidden {
    opacity: 0;
  }

  .mv_section.frist_view .mv_scroll {
    bottom: calc(25* (100vw / 430));
  }

  .mv_scroll::before {
    left: 0;
    right: inherit;
    bottom: 0;
    width: 1px;
    height: calc(36* (100vw / 430));
  }

  .mv_scroll::after {
    left: 0;
    bottom: calc(36* (100vw / 430));
    height: 1px;
    margin-left: calc(-6.5* (100vw / 430));
    width: calc(15* (100vw / 430));
    height: calc(14* (100vw / 430));
    background-size: calc(15* (100vw / 430));
    animation: scroll 4s cubic-bezier(0.6, 0.02, 0.41, 1.02) .8s infinite;
  }


 @keyframes scroll {
  0% {
    opacity: 0;
    bottom: calc(30* (100vw / 430));
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  98% {
    opacity: 0;
    bottom: calc(-10* (100vw / 430));
  }

  100% {
    opacity: 0;
    bottom: calc(30* (100vw / 430));
  }
}


  /* ===================
      //MAIN VISUAL
  =================== */

  /* ===================
        LP MENU
  =================== */

  .lp_menu {
    right: calc(10* (100vw / 430));
    bottom: calc(20* (100vw / 430));
    width: calc(178* (100vw / 430));
    height: calc(36* (100vw / 430));
    font-size: calc(16* (100vw / 430));
  }

  .lp_menu a {
    padding: calc(5* (100vw / 430)) calc(15* (100vw / 430)) calc(5* (100vw / 430)) calc(35* (100vw / 430));
    background-size: calc(24* (100vw / 430));
    background-position: calc(5* (100vw / 430)) center;
    letter-spacing: 0.02em;
  }

  .lp_menu a::before,
  .lp_menu a::after {
    top: 50%;
    right: calc(10* (100vw / 430));
    width: calc(10* (100vw / 430));
  }

  /* ===================
        //LP MENU
  =================== */

  /* ===================
          INTRO
  =================== */

  .intro_section {
  }

  .intro_section .sec_inner {
    padding: calc(45* (100vw / 430)) calc(20* (100vw / 430)) calc(60* (100vw / 430));
  }

  .intro_section .set_ttl {
    margin-bottom: calc(36* (100vw / 430));
    font-size: calc(20* (100vw / 430));
  }
  
  .intro_section .set_ttl .txt_L {
    margin-top: calc(15* (100vw / 430));
    font-size: calc(27* (100vw / 430));
  }
  
  .intro_section .set_ttl .txt_L::before {
    width: calc(25* (100vw / 430));
    height: calc(25* (100vw / 430));
    margin: calc(-5* (100vw / 430)) calc(8* (100vw / 430)) 0 0;
  }
  
  .intro_section .set_ttl .txt_L::after {
    width: calc(25* (100vw / 430));
    height: calc(25* (100vw / 430));
    margin: 0 0 calc(-5* (100vw / 430)) calc(8* (100vw / 430));
  }

  .intro_ttl {
    margin-bottom: calc(15* (100vw / 430));
    font-size: calc(18* (100vw / 430));
    line-height: 1.7;
  }

  .intro_acc {
    width: auto;
    font-size: calc(15* (100vw / 430));
    text-align: justify;
    letter-spacing: 0.04em;
  }

  .intro_acc p {
  }

  .section .acc_btn {
  }

  .section .acc_btn.hidden {
  }

  .section .acc_btn span {
    padding: calc(15* (100vw / 430)) calc(20* (100vw / 430)) calc(5* (100vw / 430)) 0;
    font-size: calc(18* (100vw / 430));
  }

  .section .acc_btn span::before,
  .section .acc_btn span::after {
    top: 61%;
    width: calc(10* (100vw / 430));
  }


  /* ===================
        //INTRO
  =================== */

  /* ===================
        PRODUCT
  =================== */

  .product_section .sec_inner {
    gap: calc(40* (100vw / 430));
    padding: 0 calc(20* (100vw / 430));
  }

  .product_section .product_wrap {
    width: auto;
    padding: calc(30* (100vw / 430)) calc(15* (100vw / 430));
  }

  #eume.product_wrap {
    z-index: 1;
  }

  .product_section .product_head {
    display: block;
    gap: calc(20* (100vw / 430));
  }

   .product_section .item_img {
    width: calc(280* (100vw / 430));
    margin: 0 auto calc(20* (100vw / 430));
  }

   .product_section .item_moon {
    margin-bottom: 0;
    font-size: calc(17* (100vw / 430));
  }

   .product_section .item_moon a {
    min-height: calc(30* (100vw / 430));
    margin-right: calc(10* (100vw / 430));
    margin-bottom: calc(15* (100vw / 430));
    padding-left: calc(38* (100vw / 430));
    background-size: calc(30* (100vw / 430));
    font-size: calc(18* (100vw / 430));
  }

   .product_section .item_name {
    margin-bottom: calc(10* (100vw / 430));
    font-size: calc(16* (100vw / 430));
  }

   .product_section .item_price {
    margin-bottom: calc(10* (100vw / 430));
    font-size: calc(16* (100vw / 430));
  }

   .product_section .item_price span {
    font-size: calc(13* (100vw / 430));
  }

   .product_section .product_cont {
    width: auto !important;
  }

  .product_section .product_head .product_cont:nth-of-type(n+2) {
    margin-top: calc(40* (100vw / 430));
  }

   .product_section .product_detail {
    margin-top: calc(30* (100vw / 430));
    padding: calc(25* (100vw / 430)) calc(20* (100vw / 430));
    border-radius: calc(10* (100vw / 430));
  }

   .product_section .product_detail_ttl {
    margin-bottom: calc(20* (100vw / 430));
    font-size: calc(16* (100vw / 430));
  }

   .product_section .product_detail p {
    font-size: calc(13* (100vw / 430));
  }

   .product_section .product_btn {
  }

   .product_section .product_btn a {
    width: calc(200* (100vw / 430));
    height: calc(40* (100vw / 430));
    font-size: calc(14* (100vw / 430));
  }

   .product_section .product_btn a span {
    padding: calc(3* (100vw / 430)) 0 calc(2* (100vw / 430)) calc(30* (100vw / 430));
    background-size: calc(22* (100vw / 430)) auto;
  }

   .product_section .product_detail .acc_cont p {
    max-height: calc(80* (100vw / 430));
    text-align: justify;
    letter-spacing: 0.04em;
    transition: max-height .6s cubic-bezier(0.72, 0.11, 0.58, 1);
  }

   .product_section .product_detail .acc_cont p::before {
    height: calc(45* (100vw / 430));
  }

   .product_section .product_detail .acc_cont.show p {
    max-height: calc(400* (100vw / 430));
  }

   .product_section .product_detail .acc_cont.show p::before {
  }

   .product_section .product_detail .acc_cont .acc_btn {
    height: calc(45* (100vw / 430));
    transition: height .4s cubic-bezier(0.72, 0.11, 0.58, 1) 0s;
  }

  .product_section .product_detail .acc_cont.show .acc_btn {
  }

  /* ===================
      //PRODUCT
  =================== */

  /* ===================
          MODAL
  =================== */

  .modal_section.hidden {
    display: none;
  }

  .modaal-content-container {
    width: calc(350* (100vw / 430));
    margin: auto;
    padding: calc(5* (100vw / 430)) calc(25* (100vw / 430));
  }

  .modaal-close {
    top: calc(2* (100vw / 430));
    right: calc(2* (100vw / 430));
  }

  .modaal-close:after,
  .modaal-close:before {
    height: calc(20* (100vw / 430));
  }

  .modaal-container {
  }

  .moon_detail_content {
    display: block;
  }

  .moon_detail_content .moon_cont {
    padding: calc(30* (100vw / 430)) 0;
    border: none;
    border-top: 1px solid #ddd;
  }

  .moon_detail_ttl {
    margin-bottom: calc(15* (100vw / 430));
  }

  .moon_detail_ttl span {
  }

  .moon_detail_ttl .txt_lg {
    margin-bottom: 0;
    padding-left: calc(35* (100vw / 430));
    padding-bottom: calc(2* (100vw / 430));
    background-size: calc(28* (100vw / 430));
    font-size: calc(23* (100vw / 430));
  }

  .moon_detail_ttl .txt_sm {
    font-size: calc(16* (100vw / 430));
  }

  .moon_detail_txt {
    width: auto;
  }

  .moon_detail_txt p {
    font-size: calc(14* (100vw / 430));
    text-align: justify;
  }


  /* ===================
        //MODAL
  =================== */

  /* ===================
          PROFILE
  =================== */

  .profile_section{
    padding: 0;
    width: calc(390 *(100vw / 430));
    margin: calc(80 *(100vw / 430)) auto;
  }

  .profile_section .profile_wrap{
    display: flex;
    align-items: center;
    gap: calc(30 *(100vw / 430));
  }

  .profile_section .img_blk{
    position: static;
    width: calc(200 *(100vw / 430));
  }

  .profile_section .profile_ttl{
    font-size: calc(18 *(100vw / 430));
    margin-bottom: calc(20 *(100vw / 430));
  }

  .profile_section .profile_name{
    font-size: calc(24 *(100vw / 430));
  }

  .profile_section .profile_name span{
    font-size: calc(14 *(100vw / 430));
    margin-top: calc(12 *(100vw / 430));
    line-height: 1.5;
  }

  .profile_section .profile_text{
    font-size: calc(13 *(100vw / 430));
    width: 100%;
    margin-top: calc(25 *(100vw / 430));
  }

  /* ===================
        //PROFILE
  =================== */


  #footer {
    margin-top: calc(-50* (100vw / 750)) !important;
  }









/*2024Spring変更点*/

.mv_section .sec_inner {
  height: calc(2000* (100vw / 430));
}

.mv_moon {
    top: calc(40* (100vw / 430));
}

.mv_main_title {
    top: calc(128* (100vw / 430));
}

.product_section #item_1 .product_head .product_cont,
.product_section #item_2 .product_head .product_cont,
.product_section #item_3 .product_head .product_cont{
  display: block;
}

.product_section #item_1 .item_img,
.product_section #item_2 .item_img,
.product_section #item_3 .item_img{
  width: 100%;
  margin: 0 auto calc(20* (100vw / 430));
}



}