@charset "UTF-8";

/* -----------------------------------------------

index

----------------------------------------------- */
/* FV */
.fv .ripple-image-container {
  width: 100%;
  height: 0;
  padding-top: 57.69%;
  /* アスペクト比を維持 (750 / 1300 * 100%) */
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 750px) {
  .fv .ripple-image-container {
    padding-top: 100%;
    /* アスペクト比を維持 (750 / 750 * 100%) */
    background-image: url('../image/index/fv1_sp_background.webp');
  }
}

@media (min-width: 751px) {
  .fv .ripple-image-container {
    background-image: url('../image/index/fv1_pc_background.webp');
  }
}

.fv .ripple-image-container .responsive-image {
  /* 画像のスタイル */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv .ripple-image-container .visually-hidden {
  /* アクセシビリティのための説明文を非表示に */
  position: absolute;
  clip: rect(0 0 0 0);
  /* 画面から非表示 */
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  width: 1px;
}

.float {
  position: fixed;
  bottom: 3%;
  right: 50%;
  z-index: 1;
  transform: translateX(50%);
  max-width: 840px;
  width: 90%;
  display: none;
}

.float .close {
  position: absolute;
  top: -13%;
  right: -1%;
  cursor: pointer;
}

.float .close span {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #333;
}

.float .close span::before,
.float .close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 21px;
  background: #fff;
}

.float .close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.float .close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media all and (max-width: 750px) {
  .float .close span {
    width: min(30px, 4vw);
    height: min(30px, 4vw);
  }

  .float .close span::before,
  .float .close span::after {
    width: min(3px, 0.4vw);
    height: min(21px, 2.8vw);
  }
}

#index section+section {
  margin: 160px auto 0px;
  padding: 0px 20px;
}

#index section h2 {
  color: #00b2be;
  text-align: center;
  font-weight: bold;
  margin: 0;
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 5px;
}

#index section h2.trigger {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(20px);
}

#index section h2.trigger.move {
  opacity: 1;
  transform: translateY(0);
}

#index section h3 {
  color: #00b2be;
  text-align: center;
  margin: 0;
  font-size: 17px;
  letter-spacing: 8px;
}

#index section h3.trigger {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(20px);
}

#index section h3.trigger.move {
  opacity: 1;
  transform: translateY(0);
}

@media all and (max-width: 750px) {
  #index section+section {
    margin-top: 20%;
    padding: 0px 15px;
  }

  #index section h2 {
    font-size: min(60px, 8vw);
  }

  #index section h3 {
    font-size: min(25px, 3.4vw);
  }
}

/* -------------------------------------------- */
#index .fv {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 12px auto 30px;
}

#index .fv .scroll {
  position: absolute;
  right: 2.5%;
  bottom: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  z-index: 2;
  color: #3c3c3c;
  font-size: 14px;
  text-decoration: none;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding-bottom: 1em;
  margin: auto;
  align-items: center;
}

#index .fv .scroll .arrow {
  display: inline-block;
  position: absolute;
  width: 7px;
  height: 40px;
  padding: 0 0 0 33px;
  margin: 50px 0 0 0;
  overflow: hidden;
}

#index .fv .scroll .arrow img {
  animation: fv_arrow 2.2s ease-in-out infinite;
}

@keyframes fv_arrow {
  0% {
    transform: translateY(-180%)
  }

  60% {
    transform: translateY(0%)
  }

  100% {
    transform: translateY(180%)
  }
}

@media all and (max-width: 750px) {
  #index .fv {
    margin: 1% auto;
  }

  #index .fv .scroll {
    display: none
  }
}

/* -------------------------------------------- */
#index .intro {
  max-width: 1000px;
  margin: -160px auto 0px;
  padding: 260px 20px 40px;
}

#index .intro h3 {
  font-size: 35px;
  color: #3c3c3c;
  font-weight: bold;
}

#index .intro .trigger {
  transition: 0.8s;
  opacity: 0;
  transform: translateY(30px);
}

#index .intro .trigger.move {
  opacity: 1;
  transform: translateY(0);
}

#index .intro .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 80px 0;
}

#index .intro .wrap .left {
  width: 500px;
}

#index .intro .wrap .left p {
  font-size: 15px;
  line-height: 40px;
}

#index .intro .wrap .right {
  width: 41.2%;
}

@media all and (max-width: 750px) {
  #index .intro {
    margin-top: 15%;
    padding: 0 15px;
  }

  #index .intro .wrap {
    display: block;
    margin: auto;
  }

  #index .intro h3 {
    font-size: min(40px, 5.4vw);
    line-height: min(60px, 8vw);
  }

  #index .intro .wrap .left {
    width: 94.5%;
    margin: 8% auto 10%;
  }

  #index .intro .wrap .left p {
    font-size: min(21px, 2.8vw);
    line-height: min(50px, 6.6vw);
  }

  #index .intro .wrap .right {
    width: 94.5%;
    margin: auto;
  }
}

/* -------------------------------------------- */
#index .product {
  max-width: 1000px;
  margin: -200px auto;
  padding: 200px 20px;
}

#index .product .item_wrap {
  display: flex;
  justify-content: space-between;
  margin: 60px 0 180px;
}

#index .product .item_wrap .left {
  width: 54.2%;
}

#index .product .item_wrap .right {
  width: 34.3%;
}

#index .product .item_wrap .p1 {
  color: #00b2be;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: bold;
}

#index .product .item_wrap .p2 {
  font-size: 25px;
  font-weight: bold;
}

#index .product .item_wrap .p3 {
  font-size: 13px;
  line-height: 30px;
}

#index .product .item_wrap .more {
  display: flex;
}

#index .product .item_wrap .more a {
  color: #00b2be;
  font-size: 13px;
  text-decoration: none;
  line-height: 6px;
}

#index .product .item_wrap .more img {
  width: 43.92%;
}

#index .product .item_wrap .buy {
  background: #00b2be;
  padding: 1px;
  border-radius: 50px;
  width: 225px;
  text-align: center;
  margin: 20px 0 0;
  cursor: pointer;
}

#index .product .item_wrap .buy p {
  color: #fff;
  font-size: 15px;
}

@media all and (max-width: 750px) {
  #index .product {
    margin: -80% auto 20%;
    padding: 40% 15px;
  }

  #index .product .item_wrap {
    display: block;
    margin: 3% 0 26%;
  }

  #index .product .item_wrap .left {
    width: 94.5%;
    margin: 5% auto;
  }

  #index .product .item_wrap .right {
    width: 94.5%;
    margin: auto;
  }

  #index .product .item_wrap .p1 {
    font-size: min(23px, 3.1vw);
  }

  #index .product .item_wrap .p2 {
    font-size: min(38px, 5.1vw);
    margin: 0;
  }

  #index .product .item_wrap .p3 {
    font-size: min(20px, 2.7vw);
    line-height: min(45px, 6vw);
  }

  #index .product .item_wrap .more {
    margin: 7% 0 8%;
  }

  #index .product .item_wrap .more a {
    font-size: min(25px, 3.4vw);
    line-height: min(12px, 1.6vw);
  }

  #index .product .item_wrap .more img {
    width: 50.82%;
  }

  #index .product .item_wrap .buy {
    width: 62.906%;
    margin: 10% auto 0;
  }

  #index .product .item_wrap .buy p {
    font-size: min(30px, 4vw);
    margin: 6% 0;
  }
}

#index .product .modal-open,
#index .product .modal-open2 {
  cursor: pointer;
}

#index .product .modal-container,
#index .product .modal-container2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 50%);
  cursor: pointer;
  padding: 40px 20px;
  z-index: 10;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
}

#index .product .modal-container:before,
#index .product .modal-container2:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#index .product .modal-container.active,
#index .product .modal-container2.active {
  opacity: 1;
  visibility: visible;
}

#index .product .modal-body,
#index .product .modal-body2 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 750px;
  width: 90%;
}

#index .product .modal-close,
#index .product .modal-close2 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: #3c3c3c;
  cursor: pointer;
}

.modal-content,
.modal-content2 {
  background: #fff;
  padding: 30px;
  cursor: auto;
}

#index .product .modal-body .modal-content a,
#index .product .modal-body2 .modal-content2 a {
  display: block;
  border: 1px solid #00a8b2;
  text-decoration: none;
  border-radius: 100px;
  width: 190px;
  margin: 30px auto;
  text-align: center;
  padding: 12px 0;
  font-size: 17px;
  color: #00a8b2;
}

/* -------------------------------------------- */
#index .news {
  max-width: 750px;
  margin: -100px auto 100px;
  padding: 200px 20px;
}

#index .news .wrap {
  margin: 50px 0;
  padding: 0px;
  list-style: none;
}

#index .news .wrap li a {
  display: block;
  padding: 37px 40px 37px 0;
  text-decoration: none;
  position: relative;
  background-image: linear-gradient(to right, #3c3c3c 8px, transparent 8px);
  background-size: 14px 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

#index .news .wrap li:nth-of-type(1) a {
  background-image: linear-gradient(to right, #3c3c3c 8px, transparent 8px), linear-gradient(to bottom, #fff 0px, transparent 0px), linear-gradient(to right, #3c3c3c 8px, transparent 8px), linear-gradient(to top, #fff 0px, transparent 0px);
  background-size: 14px 1px, 0px 0px, 15px 1px, 0px 0px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: left top, right top, right bottom, left bottom;
}

#index .news .wrap li a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%) rotateZ(-45deg);
  width: 10px;
  height: 10px;
  border-right: 1px solid #3c3c3c;
  border-bottom: 1px solid #3c3c3c;
}

#index .news .wrap li dl {
  margin: 0px;
  display: grid;
  grid-template-columns: 80px 120px 1fr;
  align-items: center;
  gap: 20px;
}

#index .news .wrap li dl dt.tag {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #ffffff;
}

#index .news .wrap li dl dt.tag.new {
  background-color: #f04678;
}

#index .news .wrap li dl dd.title {
  text-align: justify;
  word-break: break-all;
}

#index .news .wrap li dl dd {
  margin: 0px;
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: 0.05em;
}

#index .news .more {
  margin: 10px 0px 0px;
  text-align: right;
}

#index .news .more a {
  font-size: 16px;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  #index .news .more a:hover {
    text-decoration: underline;
  }
}

@media all and (max-width: 750px) {

  #index .news {
    margin: -20% auto 20%;
  }

  #index .news .wrap {
    width: 94.5%;
    margin: 5% auto;
    position: relative;
  }

  #index .news .wrap li+li {
    margin-top: 0;
  }

  #index .news .wrap li a {
    padding: 3% 0 3%;
  }

  #index .news .wrap li a::after {
    right: 2%;
    width: min(12px, 1.6vw);
    height: min(12px, 1.6vw);
  }

  #index .news .wrap li dl {
    grid-template-columns: 50px 1fr;
    gap: 0px 15px;
  }

  #index .news .wrap li dl dt.tag {
    font-size: min(16px, 2.2vw);
    grid-row: 1 / 3;
    grid-column: 1 / 2;
  }

  #index .news .wrap li dl dd {
    font-size: min(23px, 3.1vw);
  }

  #index .news .wrap li dl dd.title {
    grid-column-start: 1;
    grid-column-end: 3;
    padding: 1% 0 0;
  }

  #index .news .more {
    margin: 5px 0px 0px;
  }

  #index .news .more a {
    font-size: 10px;
  }
}

/* -------------------------------------------- */
#index .voice {
  max-width: none !important;
  margin: -200px 0px 160px !important;
  padding: 60px 20px 0;
  background-color: #f0fafa;
}

#index .voice .inner {
  max-width: 1100px;
  margin: auto;
  padding: 80px 0px 120px;
}

#index .voice .inner .wrap {
  margin: -2.88% 0% 0% -2.88%;
  padding: 0px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

#index .voice .slider_wrap {
  width: 98%;
  max-width: 1000px;
  margin: 80px auto;
}

#index .voice .slider_wrap .slider .card img {
  width: 73.1%;
  margin: auto;
}

#index .voice .slider_wrap .slider .card p {
  width: 80%;
  margin: auto;
  font-size: 14px;
  line-height: 25px;
  text-align: justify;
}

#index .voice .slider_wrap .slider .card p.name {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  padding: 10px 0 25px;
}

#index .voice .slider_wrap .slick-arrow {
  position: absolute;
  top: 28.5%;
  width: 1%;
  z-index: 1;
  cursor: pointer;
}

#index .voice .slider_wrap .slick-arrow img {
  width: 100%;
}

#index .voice .slider_wrap .slick-arrow.prev {
  left: -3%;
}

#index .voice .slider_wrap .slick-arrow.next {
  right: -3%;
}

@media all and (max-width: 750px) {
  #index .voice .inner {
    padding: 8% 0 12%;
  }

  #index .voice .slider_wrap {
    width: 100%;
  }

  #index .voice .slider_wrap .slider .card p.name {
    font-size: min(27px, 3.6vw);
    padding: 4% 0 6%;
  }

  #index .voice .slider_wrap .slider .card p {
    font-size: min(24px, 3.2vw);
    line-height: min(45px, 6vw);
  }

  #index .voice .slider_wrap .slick-arrow {
    width: 2.1%;
  }

  #index .voice .slider_wrap .slick-arrow.prev {
    left: 3%;
  }

  #index .voice .slider_wrap .slick-arrow.next {
    right: 3%;
  }
}

/* -------------------------------------------- */
#index .faq {
  margin: -200px auto 0px;
  padding: 200px 20px;
}

#index .faq .tab {
  display: flex;
  list-style: none;
  width: 50%;
  justify-content: space-around;
  margin: 100px auto 30px;
  padding: 0;
}

#index .faq .tab li {
  position: relative;
  cursor: pointer;
}

#index .faq .tab li span {
  color: #00b2be;
}

#index .faq .tab li span::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  left: -5px;
  width: 0%;
  height: 2px;
  background-color: #00b2be;
  transition: 0.4s;
}

@media (hover: hover) and (pointer: fine) {
  #index .faq .tab li:hover>span::before {
    width: calc(100% + 10px);
  }
}

@media (hover: hover) and (pointer: fine) {
  #index .faq .tab li.active>span::before {
    width: calc(100% + 10px);
  }
}

#index .faq .box {
  list-style: none;
  width: 100%;
  padding: 0;
  max-width: 750px;
  margin: 0 auto 100px;
}

#index .faq .box li {
  display: none;
}

#index .faq .box li.active {
  transition: 0.4s;
  display: block;
}

#index .faq .box dl {
  padding: 0% 4% 10%;
}

#index .faq .box dl dt:not(.qa) {
  position: relative;
  display: flex;
  cursor: pointer;
  background-color: #f0fafa;
  font-size: 17px;
  font-weight: bold;
  line-height: 30px;
  letter-spacing: 1px;
  padding: 20px;
}

#index .faq .box dl dt:not(.qa)::before {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 4%;
  width: 16px;
  height: 100%;
  background: url("../image/index/faq-close.png") center center/contain no-repeat;
}

#index .faq .box dl dt:not(.qa)::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 4%;
  width: 16px;
  height: 100%;
  background: url("../image/index/faq-open.png") center center/contain no-repeat;
  transition: 0.4s;
  transform: rotate(0deg);
}

#index .faq .box dl dt:not(.qa).open::after {
  transform: rotate(90deg);
}

#index .faq .box dl dt:nth-of-type(n + 2) {
  margin-top: 4%;
}

#index .faq .box dl dd {
  display: none;
  position: relative;
  margin: 0;
  background-color: #f0fafa;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: 1px;
  padding: 0 70px 20px 20px;
  text-align: justify;
}

#index .faq .box dl dd .ans {
  display: flex;
}

#index .faq .box dl dt span,
#index .faq .box dl dd span {
  display: block;
  font-size: 30px;
  line-height: 36px;
  padding: 0 15px;
  font-family: "futura-pt", sans-serif;
  font-weight: bold;
}

#index .faq .box dl dt span {
  color: #00a8b2;
}

#index .faq .box dl dd span {
  color: #f04678;
}

@media all and (max-width: 750px) {
  #index .faq {
    margin: -40% auto 0;
    padding: 30% 20px;
  }

  #index .faq .tab {
    width: 80%;
    margin: 14% auto 8%;
    justify-content: space-between;
  }

  #index .faq .tab li span {
    font-size: min(26px, 3.5vw);
  }

  #index .faq .box {
    width: 94.5%;
    max-width: 680px;
    margin: 0 auto 10%;
    padding: 0;
  }

  #index .faq .box dl dt:not(.qa) {
    font-size: min(25px, 3.4vw);
    line-height: min(40px, 5.4vw);
    padding: 5% 15% 5% 3%;
    text-align: justify;
  }

  #index .faq .box dl dd {
    font-size: min(25px, 3.4vw);
    line-height: min(45px, 6vw);
    padding: 0 15% 5% 3%;
  }

  #index .faq .box dl dt span,
  #index .faq .box dl dd span {
    font-size: min(45px, 6vw);
    line-height: min(51px, 6.7vw);
    padding: 0 3%;
  }

  #index .faq .box dl dt:not(.qa)::before,
  #index .faq .box dl dt:not(.qa)::after {
    width: min(30px, 4vw);
    top: 31%;
    height: 38%;
  }

  #index .faq .tab li.active>span::before {
    width: calc(100% + 10px);
  }
}

/* -----------------------------------------------

news

----------------------------------------------- */
#news .intro {
  margin: 100px auto;
  max-width: 750px;
}

#news .intro h2 {
  color: #00b2be;
  text-align: center;
  font-weight: bold;
  margin: 0;
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 6px;
}

#news .intro h3 {
  color: #00b2be;
  text-align: center;
  margin: 0;
  font-size: 17px;
  letter-spacing: 4px;
}

#news .intro .wrap {
  margin: -100px 0 0;
  padding: 180px 0 0;
}

#news .intro .wrap .car {
  display: grid;
  grid-template-columns: 10% 80%;
  gap: 0 3%;
  align-items: center;
}

#news .intro .wrap .car .tag {
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #ffffff;
  background-color: #f04678;
}

#news .intro .wrap .car .date {
  font-size: 17px;
  letter-spacing: 1px;
}

#news .intro .wrap .title {
  font-size: 25px;
  letter-spacing: 3px;
  margin: 28px 0;
  font-weight: bold;
}

#news .intro .wrap .cont {
  font-size: 15px;
  line-height: 28px;
  letter-spacing: 0.1em;
  text-align: justify;
}

@media all and (max-width: 750px) {
  #news .intro {
    margin: 15% auto 20%;
    width: 82.7%;
  }

  #news .intro h2 {
    font-size: min(60px, 8vw);
  }

  #news .intro h3 {
    font-size: min(25px, 3.4vw);
  }

  #news .intro .wrap {
    margin: -20% 0 0;
    padding: 42% 0 0;
  }

  #news .intro .wrap .car {
    grid-template-columns: 15% 80%;
  }

  #news .intro .wrap .car .tag {
    font-size: min(22px, 3vw);
  }

  #news .intro .wrap .car .date {
    font-size: min(26px, 3.5vw);
  }

  #news .intro .wrap .title {
    font-size: min(40px, 5.4vw);
    margin: 8% 0;
  }

  #news .intro .wrap .cont {
    font-size: min(24px, 3.2vw);
    line-height: min(50px, 6.7vw);
  }
}

/* -----------------------------------------------

product

----------------------------------------------- */
#product .fv {
  width: 100%;
  max-width: 100%;
}

#product .item {
  max-width: 670px;
}

#product .item .item_wrap {
  display: grid;
  grid-template-columns: 40% 55%;
  gap: 0 5%;
  align-items: center;
  margin: 100px 0;
}

#product .item .item_wrap .right .p1 {
  font-family: "futura-pt", sans-serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #00b2be;
}

#product .item .item_wrap .right .p2 {
  font-size: 25px;
  line-height: 35px;
  letter-spacing: 2px;
  font-weight: bold;
  margin: 0;
}

#product .item .item_wrap .right .p3 {
  font-size: 12px;
  color: #00b2be;
  margin: 0;
  padding: 10px 0;
}

#product .item .item_wrap .right .price {
  font-size: 12px;
}

#product .item .item_wrap .right .price span {
  font-family: "futura-pt", sans-serif;
  font-size: 30px;
  color: #00b2be;
  font-weight: 600;
}

#product .item .item_wrap .right .price span.tax {
  font-size: 25px;
}

#product .item .item_wrap .right .p4 {
  font-size: 13px;
  line-height: 30px;
}

#product .item .item_wrap .right .buy {
  background: #00b2be;
  border-radius: 50px;
  text-align: center;
  padding: 22px 0;
  width: 73.3%;
}

#product .item .item_wrap .right .buy p {
  font-size: 17px;
  color: #fff;
  margin: 0;
}

#product .lp {
  max-width: fit-content;
  margin: -40px auto 40px;
}

#product .lp a {
  text-align: center;
  color: #00b2be;
  font-size: 34px;
  letter-spacing: 2px;
  margin: 0;
}

#product .detail {
  max-width: 670px;
}

#product .detail .tim_h {
  display: grid;
  grid-template-columns: 26% 28%;
  gap: 0 12%;
  justify-items: start;
  align-items: start;
  justify-content: space-between;
}

#product .detail .timing {
  border: 1px solid #ec8e26;
  padding: 5px 10px;
  margin: auto;
  display: flex;
  text-align: center;
  justify-content: center;
  width: 145px;
}

#product .detail .timing.night {
  border: 1px solid #0786bd;
}

#product .detail .timing p {
  font-size: 16px;
  color: #ec8e26;
  margin: 0;
}

#product .detail .timing.night p {
  color: #0786bd;
}

#product .detail .timing::after {
  content: "|";
  color: #ec8e26;
  position: absolute;
  margin: 20px;
  padding: 0 2px;
  background: #fff;
}

#product .detail .timing.night::after {
  color: #0786bd;
}

#product .detail .timing_img {
  width: 34.6%;
  margin: 24px auto 50px;
  grid-column-start: 1;
}

#product .detail .tim_h a {
  border: 1px solid #00b2be;
  padding: 10px 20px;
  text-decoration: none;
  color: #00b2be;
  transition: 0.3s;
}

#product .detail .tim_h a:hover {
  color: #fff;
  background: #00b2be;
}

#product .detail .how {
  list-style: none;
  display: grid;
  grid-template-columns: 106px 106px 106px 106px 106px 106px;
  padding: 0;
  justify-content: space-between;
  align-items: center;
}

#product .detail .how.one {
  grid-template-columns: 106px 106px;
  justify-content: center;
  margin: 10px auto 40px;
}

#product .detail .how li {
  text-align: center;
  font-size: 15px;
  color: #b2b2b2;
}

#product .detail .how li.on {
  color: #00b2be;
}

#product .detail .how li.morning {
  color: #ec8e26;
}

#product .detail .how li.night {
  color: #0786bd;
}

#product .detail .how li img {
  width: 80px;
  display: block;
  margin: 0 auto 7px;
}

#product .detail .center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 20px;
}

#product .detail .center .left {
  list-style: none;
  padding: 0;
}

#product .detail .center .left li {
  background: #809bbf;
  margin: 12px auto;
  padding: 4px 0 4px 15px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  width: 220px;
  text-align: left;
}

#product .detail .center .left li img {
  width: 30px;
}

#product .detail .center .right {
  width: 64%;
  font-size: 17px;
  line-height: 35px;
  text-align: justify;
}

#product .detail .seibun {
  display: grid;
  grid-template-columns: 18.8% 76.2%;
  gap: 0 5%;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ccc;
  margin: 30px auto 60px;
  padding: 20px 0 0;
}

#product .detail .seibun .circle {
  border: 1px solid #809bbf;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  text-align: center;
  display: grid;
  align-items: center;
}

#product .detail .seibun ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 50% 45%;
  justify-content: space-between;
}

#product .detail .seibun ul li {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 0 18px;
  align-content: center;
  font-size: 14px;
  align-items: center;
  margin-bottom: 26px;
}

#product .htu {
  max-width: 670px;
  margin: 10px auto 160px;
}

#product .htu h2 {
  text-align: center;
  color: #00b2be;
  font-size: 24px;
  letter-spacing: 2px;
  margin: 0;
}

#product .htu h3 {
  text-align: center;
  font-family: "futura-pt", sans-serif;
  color: #00b2be;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 0 auto 20px;
}

#product .htu .movie {
  margin: auto;
  aspect-ratio: 1920 / 1080;
}

#product .htu .movie video {
  width: 100%;
  height: auto;
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
  outline: none;
}

@media all and (max-width: 750px) {
  #product .item {
    width: 89.4%;
  }

  #product .item .item_wrap {
    display: block;
    width: 97.1%;
    margin: 12% auto;
  }

  #product .item .item_wrap .left {
    text-align: center;
  }

  #product .item .item_wrap .right {
    margin: 16% 0 20%;
  }

  #product .item .item_wrap .right .p1 {
    font-size: min(30px, 4vw);
  }

  #product .item .item_wrap .right .p2 {
    font-size: min(47px, 6.3vw);
    line-height: min(67px, 9vw);
  }

  #product .item .item_wrap .right .p3 {
    font-size: min(24px, 3.2vw);
  }

  #product .item .item_wrap .right .price {
    font-size: min(24px, 3.2vw);
  }

  #product .item .item_wrap .right .price span {
    font-size: min(50px, 6.7vw);
  }

  #product .item .item_wrap .right .price span.tax {
    font-size: min(45px, 6vw);
  }

  #product .item .item_wrap .right .p4 {
    font-size: min(26px, 3.5vw);
    line-height: min(60px, 8vw);
    text-align: justify;
  }

  #product .item .item_wrap .right .buy {
    border-radius: 80px;
    padding: 6.8% 0;
    width: 83%;
    margin: auto;
  }

  #product .item .item_wrap .right .buy p {
    font-size: min(34px, 4.5vw);
  }

  #product .lp a {
    font-size: min(34px, 5vw);
    letter-spacing: 0.1em;
  }

  #product .detail {
    width: 89.4%;
  }

  #product .detail .tim_h {
    display: block;
  }

  #product .detail .timing {
    padding: 1.2% 1.5%;
    width: 41.6%;
  }

  #product .detail .timing p {
    font-size: min(28px, 3.8vw);
  }

  #product .detail .timing::after {
    margin: 5%;
    padding: 0 0.8%;
  }

  #product .detail .timing_img {
    width: 17.5%;
    margin: 5% auto 10%;
  }

  #product .detail .tim_h a {
    display: block;
    width: 40%;
    font-size: min(26px, 3.5vw);
    text-align: center;
    margin: 0 auto 9%;
  }

  #product .detail .how {
    grid-template-columns: 1fr 1fr 1fr;
    width: 87.9%;
    margin: auto;
  }

  #product .detail .how.one {
    grid-template-columns: 1fr 1fr;
    width: 50%;
    margin: 1% auto 4%;
  }

  #product .detail .how li {
    font-size: min(18px, 2.4vw);
    margin: 0 0 20%;
  }

  #product .detail .how li img {
    width: 61.1%;
    margin: 0 auto 6%;
  }

  #product .detail .center {
    display: block;
  }

  #product .detail .center .left li {
    width: 76.1%;
    padding: 2% 0 2% 4%;
    font-size: min(34px, 4.6vw);
    margin: 4% auto 0;
    align-items: center;
    display: flex;
  }

  #product .detail .center .left li img {
    width: 13.6%;
    margin-right: 4%;
  }

  #product .detail .center .right {
    width: 100%;
    font-size: min(25px, 3.4vw);
    line-height: min(45px, 6vw);
    margin: 18% auto;
  }

  #product .detail .seibun {
    display: block;
    padding: 10% 0;
    margin: auto;
  }

  #product .detail .seibun .circle {
    width: 37.3%;
    margin: 0 auto 8%;
  }

  #product .detail .seibun .circle p {
    font-size: min(30px, 4vw);
  }

  #product .detail .seibun ul {
    grid-template-columns: 49% 49%;
  }

  #product .detail .seibun ul li {
    grid-template-columns: 57% 1fr;
    gap: 0 3%;
    font-size: min(18px, 2.4vw);
    margin-bottom: 8%;
  }

  #product .htu .movie {
    width: 88%;
  }

  #product .htu h2 {
    font-size: min(42px, 5.6vw);
    letter-spacing: 0.1em;
  }

  #product .htu h3 {
    font-size: min(22px, 3vw);
    letter-spacing: 0.06em;
    margin: 0 auto 4%;
  }
}

#product .item .modal-open {
  cursor: pointer;
}

#product .item .modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 50%);
  padding: 40px 20px;
  z-index: 10;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  cursor: pointer;
}

#product .item .modal-container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#product .item .modal-container.active {
  opacity: 1;
  visibility: visible
}

#product .item .modal-body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 750px;
  width: 90%;
}

#product .item .modal-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: #3c3c3c;
  cursor: pointer;
}

#product .item .modal-content {
  background: #fff;
  padding: 30px;
  cursor: auto;
}

#product .item .modal-body .modal-content a {
  display: block;
  border: 1px solid #00a8b2;
  text-decoration: none;
  border-radius: 100px;
  width: 190px;
  margin: 30px auto;
  text-align: center;
  padding: 12px 0;
  font-size: 17px;
  color: #00a8b2;
}

/* -----------------------------------------------

howto

----------------------------------------------- */
#howto h2 {
  font-size: 46px;
  line-height: 1.2;
}

#howto .intro {
  margin: 160px auto 200px;
  text-align: center;
}

#howto .movie {
  margin: auto;
  border: 80px solid #f4f4f4;
  aspect-ratio: 1920 / 1080;
  box-sizing: border-box;
}

#howto .movie video {
  width: 100%;
  height: auto;
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
  outline: none;
}

@media all and (max-width: 750px) {
  #howto h2 {
    font-size: min(40px, 5.4vw);
  }

  #howto .intro {
    margin: 15% auto 20%;
  }

  #howto .movie {
    border-width: min(50px, 6.7vw);
  }
}

/* -----------------------------------------------

store

----------------------------------------------- */
#store .intro {
  margin: 100px auto;
  max-width: 750px;
}

#store .intro h2 {
  color: #00b2be;
  text-align: center;
  font-weight: bold;
  margin: 0;
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 6px;
}

#store .intro h3 {
  color: #00b2be;
  text-align: center;
  margin: 0;
  font-size: 17px;
  letter-spacing: 4px;
}

#store .intro h4 {
  color: #00b2be;
  margin: 60px 0 20px;
  font-size: 30px;
  letter-spacing: 4px;
  position: relative;
  padding-bottom: 10px;
}

#store .intro h4::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #00b2be;
  margin-top: 10px;
}

#store .intro .wrap {
  margin: 0 0 40px 0;
  display: flex;
  align-items: center;
  gap: 40px;
}

#store .intro .wrap .image img {
  width: 260px;
  height: auto;
  object-fit: cover;
}

#store .intro .wrap .text {
  flex: 1;
}

#store .intro .wrap .name {
  font-size: 25px;
  margin: 0 0 28px 0;
}

#store .intro .wrap .name a {
  font-weight: bold;
}

#store .intro .wrap .address {
  align-items: center;
}

@media all and (max-width: 750px) {
  #store .intro {
    margin: 15% auto 20%;
    width: 82.7%;
  }

  #store .intro h2 {
    font-size: min(60px, 8vw);
  }

  #store .intro h3 {
    font-size: min(25px, 3.4vw);
  }

  #store .intro h4 {
    font-size: min(30px, 6vw);
    margin: 30px 0 15px;
  }

  #store .intro .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  #store .intro .wrap .image img {
    width: 100%;
    height: auto;
  }

  #store .intro .wrap .text {
    width: 100%;
  }

  #store .intro .wrap .name {
    font-size: min(25px, 5vw);
    margin: 0 0 10px 0;
  }

  #store .intro .wrap .address {
    font-size: min(16px, 4vw);
  }
}