@charset "UTF-8";

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

Title : eyecolor_collection.css

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

:root {
  --lp-font-ja: pragmatica, "Hiragino Kaku Gothic ProN", "Hiragino Sans", yu-gothic-pr6n, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  --lp-font-en: 'EB Garamond', serif !important;
  --lp-font: 'EB Garamond', "Hiragino Kaku Gothic ProN", "Hiragino Sans","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
 }


/* ========================================================
                      * Layout style *
========================================================= */

body {}

main {
  max-width: inherit;
}

footer {
  margin-top: 0;
}

a,
a:before,
a:after,
a img {
  transition: opacity .3s ease-in-out,
    color .3s ease-in-out,
    background-color .3s ease-in-out,
    border-color .3s ease-in-out,
    text-shadow .3s ease-in-out,
    text-weight .3s ease-in-out;
}

h1 {
  padding: 0;
}

main {
  width: 100%;
  margin: 0 auto;
  max-width: none;
}

.contents {
  padding-top: 124px;
}


/* ===================
  　　 General
=================== */

.txt_center {
  text-align: center;
}

.txt_grey {
  color: #4d4d4d;
}

/* Clearfix */
.clearfix:after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size: 0;
  content: ".";
}

.clearfix {
  min-height: 1px;
  clear: both;
}

* html .clearfix {
  height: 1px;
}

.hidden {
  display: none;
}

/* ===================
  LP Contents
=================== */

html {}

.lp_wrap {
  background-size: 100% auto;
}

.lp_contents {
  /*width: 120rem;*/
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 0;
  font-family: var(--lp-font-ja);
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
  position: relative;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
}

.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,
.lp_contents a {
  color: #A7818E;
}

.lp_contents a:hover {
  opacity: 1;
}

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

.lp_wrap {
  overflow: hidden;
}

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

/* -- 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: "";
}


/* ===================
  　　　Animation
=================== */

/* -- keyframes -- */

@keyframes infinity-scroll {
  0% {
    transform: translateX(0);
  }

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

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

  100% {
    opacity: 0;
  }
}

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

  100% {
    opacity: 0;
  }
}

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

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(1rem);
  }

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

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(1rem);
  }

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

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

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

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

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

@-webkit-keyframes tra3 {
  0% {
    -webkit-transform: translateY(8rem);
    transform: translateY(8rem);
    -ms-transform: translateY(8rem);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    -webkit-transform: translateY(8rem);
    transform: translateY(8rem);
    -ms-transform: translateY(8rem);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@-webkit-keyframes tra3_2 {
  0% {
    -webkit-transform: translateY(10rem);
    transform: translateY(10rem);
    -ms-transform: translateY(10rem);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@keyframes tra3_2 {
  0% {
    -webkit-transform: translateY(10rem);
    transform: translateY(10rem);
    -ms-transform: translateY(10rem);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@-webkit-keyframes tra4 {
  0% {
    -webkit-transform: translateX(30%);
    transform: translateX(30%);
    -ms-transform: translateX(30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes tra4 {
  0% {
    -webkit-transform: translateX(30%);
    transform: translateX(30%);
    -ms-transform: translateX(30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

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

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

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

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

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

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

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

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@-webkit-keyframes tra7 {
  0% {
    -webkit-transform: translateX(-30%);
    transform: translateX(-30%);
    -ms-transform: translateX(-30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes tra7 {
  0% {
    -webkit-transform: translateX(-30%);
    transform: translateX(-30%);
    -ms-transform: translateX(-30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes linkbtnAnime {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  60% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(1.1);
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
}


@keyframes maruAnime {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }

  60% {
    opacity: 0.6;
    transform: scale(1.03);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  -webkit-animation: opa1 3s ease 0s 1 forwards;
  animation: opa1 3s ease 0s 1 forwards;
}

.ef2 {
  opacity: 0;
  filter: blur(1rem);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ef2.effect {
  -webkit-animation: opa2 2s ease 0s 1 forwards;
  animation: opa2 2s ease 0s 1 forwards;
}

.ef-top {
  opacity: 0;
  -webkit-transform: translateY(6rem);
  transform: translateY(6rem);
  -ms-transform: translateY(6rem);
}

.ef-top.effect {
  -webkit-animation: opa1 1.8s ease 0s 1 forwards, tra3 1.2s ease 0s 1 forwards;
  animation: opa1 1.8s ease 0s 1 forwards, tra3 1.2s ease 0s 1 forwards;
}

.ef-top2 {
  opacity: 0;
  filter: blur(1rem);
  -webkit-transform: translateY(10rem);
  transform: translateY(10rem);
  -ms-transform: translateY(10rem);
}

.ef-top2.effect {
  -webkit-animation: opa2 2s ease 0s 1 forwards, tra3_2 2s ease 0s 1 forwards;
  animation: opa2 2s ease 0s 1 forwards, tra3_2 2s ease 0s 1 forwards;
}

.ef-right {
  opacity: 0;
}

.ef-right.effect {
  -webkit-animation: opa1 1.8s ease 0s 1 forwards, tra4 1.8s ease 0s 1 forwards;
  animation: opa1 1.8s ease 0s 1 forwards, tra4 1.8s ease 0s 1 forwards;
}

.ef-left {
  opacity: 0;
}

.ef-left.effect {
  -webkit-animation: opa1 1.8s ease 0s 1 forwards, tra5 1.8s ease 0s 1 forwards;
  animation: opa1 1.8s ease 0s 1 forwards, tra5 1.8s ease 0s 1 forwards;
}

.ef-lg.effect {
  -webkit-animation: opa1 1.8s ease 0s 1 forwards, tra6 1.8s ease 0s 1 forwards;
  animation: opa1 1.8s ease 0s 1 forwards, tra6 1.8s ease 0s 1 forwards;
}


/* ===================
  　Section Common
=================== */

.btn_wrap {
  text-align: center;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* ===================
  　　　Intro
=================== */

.intro_section {}

.intro_title {
  display: none;
  width: 100%;
  margin-bottom: 14rem;
  font-size: 6rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
}

.intro_title span {
  display: inline-block;
  font-family: var(--lp-font-en);
  vertical-align: middle;
}

.intro_title p {
  margin-bottom: 0;
}

/* -- Main Visual -- */

.mv_area {
  position: relative;
  z-index: 0;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.mv_area:before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 50%;
  height: 100%;
  background: url(../img/mv_bg.jpg) no-repeat top right;
  background-size: cover;
  z-index: -1;
}

.mv__img {
  width: 50%;
}

.mv__img img {
  width: 100%;
  max-width: inherit;
  height: 100%;
  object-fit: cover;
}

.mv_area_content {
  width: 50%;
}

.mv__logo {
  width: 24rem;
  margin: auto;
  margin-bottom: 3rem;
}

.mv__logo img {
  vertical-align: bottom;
}

.mv__name {
  overflow: hidden;
  width: 38rem;
  margin: auto auto 7rem;
}

.mv__name_sub {
  margin-bottom: 7rem;
  font-size: 3.4rem;
  letter-spacing: 0.03em;
  font-family: var(--lp-font);
  font-weight: 100;
  line-height: 1;
}

.mv__data {
  font-size: 1.4rem;
  letter-spacing: 0.15em;
}

.mv__data .txt_lg {
  padding: 0 0.5rem;
  font-size: 2.2rem;
}

.mv__data .txt_released {
  padding-left: .8rem;
}

/* -- Catch Area -- */

.catch_area {
  padding: 10rem 0;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  background: url(../img/intro_bg.jpg) no-repeat top center;
  background-size: cover;
  font-family: var(--lp-font);
}

.catch__ttl {
  width: 44rem;
  margin: auto auto 1.2rem;
}

.catch_area .catch__ttl+.catch__txt {
  font-size: 1.8rem;
}

.catch__cont {
  padding-top: 5.5rem;
}

.catch_area .catch__txt {
  margin-bottom: 3.6rem;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  line-height: 2.2;
}

.catch_area .catch__txt:last-of-type {
  margin-bottom: 0;
}

.catch_area .catch__cont .catch__txt:last-of-type {
  padding-top: 1rem;
  line-height: 2.2;
}

.catch__cont .txt_last {
  font-size: 1.7rem;
  letter-spacing: 0.03em;
}


/* ===================
  　　 Product
=================== */

.product_section {
  position: relative;
  padding: 10rem 0;
  background: url(../img/product_bg.jpg) no-repeat 0 0;
  background-size: cover;
}

.product_section .inner {
  max-width: 124rem;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 13rem;
}

.product_section .product_head {
  position: relative;
  width: 51rem;
  margin-top: 2rem;
}

.product_ttl {
  font-size: 8.6rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
  color: #A7818E;
}

.product_ttl span {
  opacity: 0.5;
  position: absolute;
  z-index: 2;
  line-height: 1;
  font-family: var(--lp-font-en);
  letter-spacing: 0.03em;
}

.product_ttl_01 {
  top: -2.9rem;
  left: -2.5rem;
}

.product_ttl_02 {
  right: -1.8rem;
  bottom: -2.5rem;
}

.product_section .product_cont_wrap {
  width: fit-content;
  margin: 0 0 0 21rem;
  padding: 4.5rem 0 0;
}

.product_section .product_catch {
  margin-bottom: 3.3rem;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.15em;
  text-align: center;
}

.product_section .product_cont {}

.product_section .product_info {}

.product_section .product_info .product_info__thumb {
  width: 28.4rem;
  margin: auto auto 1.5rem;
}

.product_section .product_info .product_info__txt {
  margin: 0 0 1.5rem;
  font-size: 1.4rem;
  line-height: 1.9;
}

.product_section .product_info .product_info__txt .txt_sm,
.product_section .product_info .product_info__txt .txt_tax {
  font-size: 1.2rem;
}

.product_section .product_info .product_info__btn {
  width: 12rem;
  height: 3.2rem;
  margin: auto auto 3.5rem;
  font-size: 1.6rem;
  font-family: var(--lp-font-en);
  letter-spacing: 0.03em;
}

.product_section .product_info .product_info__btn .btn.btn_link {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #A7818E;
}

.product_section .product_detail {
  font-size: 1.2rem;
  line-height: 2;
}

.product_section .product_detail p {
  color: inherit;
  line-height: inherit;
}

.lp_contents .btn_link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  text-align: center;
  font-family: var(--lp-font-en);
}

/* -- Section Animetion -- */
/*
.product_section .product_img,
.product_section .product_catch,
.product_section .product_cont_wrap,
.product_section .product_cont,
.product_list li.js-efpoint {
  opacity: 0;
  transform: translateY(10rem);
}

.product_section .product_img,
.product_section .product_catch,
.product_section .product_cont_wrap,
.product_section .product_cont,
.product_list li.js-efpoint {
  animation: opa1 2s ease 0.2s 1 forwards, tra3_2 2s ease 0.2s 1 forwards;

}

.product_section.effect .product_catch {
  animation-delay: .4s,.4s;
}

.product_section.effect .product_cont_wrap {
  animation-delay: .8s,.8s;
}

.product_section.effect .product_cont {
  animation-delay: .4s,.4s;
}

.product_list li.js-efpoint.effect{
  animation-delay: .4s,.4s;
}
*/

/* ------- Product Colors ------- */

.product_colors {
  width: 90rem;
  margin: auto;
}

.product_colors ul {
  display: flex;
  flex-wrap: wrap;
}

.product_colors li {
  position: relative;
  width: 22.5rem;
  line-height: 1;
}


.product_colors dl,
.product_colors dd {
  line-height: 0;
}

.product_colors dt {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1rem 1rem 0.8rem;
  color: #fff;
  font-size: 2rem;
  font-family: var(--lp-font-en);
  letter-spacing: 0.03em;
  line-height: 1;
}

.product_colors dd {}

.product_colors dd img {}

/*============================
      HowToUse
============================*/

.howto_section {
  background: url(../img/howto_bg_01.jpg) no-repeat 0 0;
  background-size: cover;
}

.howto_section .inner {
  width: 117.4rem;
  padding: 12.5rem 0 10rem;
}
/* PC用*/
@media (min-width: 769px) {
  .howto_section .inner {
    max-width: 85%;
  }
}
.howto_contents {
  position: relative;
  z-index: 0;
  margin: 0 auto 7.5rem;
  padding: 2.5rem;
  background: #D3B9B4;
}

.howto_contents::before {
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  bottom: -2.5rem;
  left: -2.5rem;
  z-index: -1;
  border: 1px solid #BA8383;
  content: "";
}

.howto_contents .howto_ttl {
  position: absolute;
  top: 9rem;
  left: -18.9rem;
  z-index: 2;
  line-height: 1;
  font-size: 5.6rem;
  font-family: var(--lp-font-en);
  font-weight: 100;
  letter-spacing: 0.03em;
  color: #BA8383;
  transform: rotate(270deg);
  -webkit-backface-visibility: hidden;
}

.howto_contents .howto_ttl span {}

.howto_contents .howto_img {
  margin-bottom: 4rem;
  line-height: 0;
}

.howto_contents .howto_img ul {
  display: flex;
  gap: 4rem;
}

.howto_contents .howto_img ul li {
  line-height: 0;
}

.howto_contents .howto_img ul li img {}

.howto_contents .howto_product {
  margin-bottom: 3.3rem;
}

.howto_contents .howto_product ul {
  display: flex;
  font-size: 1.4rem;
  color: #BA8383;
  font-family: var(--lp-font-en);
  justify-content: center;
}

.howto_contents .howto_product ul li {
  width: 14rem;
}

.howto_contents .howto_product ul li a {}

.howto_contents .howto_product ul li a .howto_product__thumb {}

.howto_contents .howto_product ul li a .howto_product__thumb img {}

.howto_contents .howto_product ul li a .howto_product__name {
  line-height: 1.3;
  padding: 1rem 0 0;
  display: block;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: #ba8383;
}

.howto_section .howto_btn {}

.howto_section .howto_btn .btn_link {
  width: 24rem;
  height: 4.6rem;
  margin: auto;
  font-size: 2rem;
  border: none;
  background-color: #F5F1F1;
  color: #BA8383;
  letter-spacing: 0.03em;
}

/* ---- HOWTO02 ---- */

.howto02 {
  background-color: #E3DFE5;
  background-image: url(../img/howto_bg_02.jpg);
}

.howto02 .howto_contents .howto_ttl {
  top: 9rem;
  right: -19rem;
  left: inherit;
  transform: rotate(90deg);
  color: #A08FAA;
}

.howto02 .howto_contents {
  background-color: #D3C9D7;
}

.howto02 .howto_contents::before {
  border-color: #A08FAA;
}

.howto02 .howto_btn .btn_link {
  color: #A08FAA;
  background-color: #F4F2F5;
}

.howto02 .howto_contents .howto_product ul li a .howto_product__name {
  color: #a08faa;
}

/*============================
       Kit
============================*/

.kit_section {
  background: #F6F1F0;
}

.kit_section .inner {
  padding: 9.5rem 0 10rem;
}

.kit_section .kit_ttl {
  margin-bottom: 4.5rem;
  font-size: 4.6rem;
  font-weight: 100;
  font-family: var(--lp-font-en);
  line-height: 1;
  letter-spacing: 0.03em;
}

.kit_section .kit_product {
  width: 86rem;
  margin: auto;
}

.kit_section .kit_product ul {
  display: flex;
  gap: 6rem;
}

.kit_section .kit_product ul li {}

.kit_section .kit_thumb {
  position: relative;
  margin-bottom: 2.5rem;
  line-height: 0;
}

.kit_section .kit_thumb::before {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
  left: 1.1rem;
  border: 1px solid #fff;
  content: "";
}

.kit_section .kit_name {
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  line-height: 2;
}

.kit_section .kit_name .txt_tax {
  font-size: 1.2rem;
}

.kit_section .kit_btn {
  width: 12rem;
  height: 3.2rem;
  margin: auto;
  font-family: var(--lp-font-en);
  font-size: 1.6rem;
  color: #A7818E;
  letter-spacing: 0.03em;
}

.kit_section .kit_btn .btn_link {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #A7818E;
}


/*============================
       Schedule
============================*/

.schedule_section {
  background: url(../img/schedule_bg.jpg) no-repeat 0 0;
  background-size: cover;
  text-align: center
}

.schedule_section .inner {
  padding: 9rem 0 10rem;
}

.schedule_section .schedule_ttl {
  margin-bottom: 3.8rem;
  font-size: 4.6rem;
  font-family: var(--lp-font-en);
  font-weight: 100;
  line-height: 1.2;
  color: #A7818E;
  letter-spacing: 0.03em;
}

.schedule_section h4 {
  margin-bottom: 2.2rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #727171;
  letter-spacing: 0.15em;
}

.schedule_section h4 .txt_S {
  margin-right: 1.5rem;
  font-size: 1.6rem;
}

.schedule_section h4 .txt_M {
  margin-left: 0.6rem;
  font-size: 1.6rem;
}

.schedule_section h4:nth-of-type(n+2) {
  margin-top: 4rem;
}

.schedule_section h5 {
  margin-bottom: .5rem;
  font-size: 1.8rem;
  font-family: var(--lp-font-en);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
}

.schedule_section h5:nth-of-type(n+2) {
  margin-top: 2.3rem;
}

.schedule_section p {
  font-size: 1.5rem;
  line-height: 2;
  color: #727171;
  letter-spacing: 0.15em;
}

.schedule_section p .txt_sm {
  font-size: 1.3rem;
}

.schedule_section .btn_all_check {
  width: 46rem;
  height: 7.2rem;
  margin: 9.5rem auto auto;
}

.schedule_section .btn_all_check .btn_link {
  gap: 0.5rem;
  height: 100%;
  border: none;
  background: #A7818E;
}

.schedule_section .btn_all_check span {
  display: block;
  width: 100%;
  line-height: 0.9;
  color: #fff;
  text-align: center;
  line-height: 1;
}

.schedule_section .btn_all_check .txt_sm {
  font-size: 1.6rem;
  letter-spacing: 0.03em;
}

.schedule_section .btn_all_check .txt_lg {
  font-size: 2.4rem;
  letter-spacing: 0.04em;
}


/*=======================================
               Responsive
========================================*/
/* only PC */
@media screen and (min-width: 768px) {

  html {
    font-size: 62.5%;
  }

  .lp_contents .pc_only {
    display: block;
  }

  .lp_contents span.pc_only {
    display: inline;
  }

  .lp_contents .sp_only {
    display: none;
  }

}

/* only tablet */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  header {
    z-index: 5;
  }

  html {
    font-size: calc(10* (100vw / 1200)) !important;
  }
}

/* only SP */
@media only screen and (max-width: 767px) {
  header {
    z-index: 5;
  }

  .lp_contents .pc_only {
    display: none;
  }

  .lp_contents .sp_only {
    display: block;
  }

  .lp_contents span.sp_only {
    display: inline;
  }


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

  #Contents {}

  /* ===================
    LP Contents
  =================== */

  html {}

  .lp_wrap {}

  .lp_contents {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    padding: 0;
    font-size: calc(14* (100vw / 375));
  }

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

  /* ===================
    　　　Animation
  =================== */

  /* ---- SP Effect ---- */

  .ef_sp {
    opacity: 0;
  }

  .ef_sp.effect {
    -webkit-animation: opa1 1s ease 0s 1 forwards, tra3 1s ease 0s 1 forwards;
    animation: opa1 1s ease 0s 1 forwards, tra3 1s ease 0s 1 forwards;
  }

  /* ===================
    　Section Common
  =================== */

  .contents_inner .section {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0;
  }

  #Contents .section {
    padding: 0;
  }

  .inner {
    width: 100%;
  }

  /* ===================
    　　　Intro
  =================== */

  .intro_section {
    margin: 0;
    padding: 0;
  }

  /* -- Main Visual -- */

  .mv_area {
    display: block;
    position: relative;
  }

  .mv_area:before {
    display: none;
  }

  .mv_area .mv__img {
    width: 100%;
    line-height: 0;
  }

  .mv_area .mv__img img {
    width: 100%;
  }

  .mv_area_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: calc(60*(100vw / 750)) 0 0;
    background: none;
  }

  .mv__logo {
    width: calc(264* (100vw / 750));
    margin-bottom: calc(40* (100vw / 750));
  }

  .mv__name_sub {
    margin-bottom: calc(60*(100vw / 750));
    font-size: calc(36* (100vw / 750));
  }

  .mv__name {
    overflow: hidden;
    width: calc(380* (100vw / 750));
  }

  .mv__data.sp_only {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(89* (100vw / 750));
    margin-top: -1px;
    background: url(../img/mv_info.jpg) no-repeat 0 0;
    background-size: cover;
    font-size: calc(24* (100vw / 750));
  }

  /* -- Catch Area -- */

  .catch_area {
    padding: calc(120* (100vw / 750)) 0;
    font-size: calc(23* (100vw / 750));
    background-image: url(../img/mv_bg_sp.jpg);
  }

  .catch__cont .txt_last {
    font-size: calc(27*(100vw / 750));
  }

  .catch__ttl {
    width: calc(580* (100vw / 750));
    margin-bottom: calc(20* (100vw / 750));
  }

  .catch_area .catch__ttl+.catch__txt {
    font-size: calc(26* (100vw / 750));
  }

  .catch__cont {
    padding-top: calc(80* (100vw / 750));
  }

  .catch_area .catch__txt {
    margin-bottom: calc(54* (100vw / 750));
    font-size: calc(23* (100vw / 750));
  }


  /* ===================
    　　 Product
  =================== */

  .product_section {
    background-image: url(../img/product_bg_sp.jpg);
    background-size: contain;
  }

  .product_section .inner {
    margin-bottom: 0;
    padding-bottom: calc(80* (100vw / 750));
    flex-direction: column;
  }

  .product_section .product_head,
  .product_section .product_cont_wrap {
    width: 100%;
    margin: auto;
    padding: 0;
  }

  .product_section .product_head {
    width: calc(612* (100vw / 750));
    margin-bottom: calc(120* (100vw / 750));
    margin-top: auto;
    margin-left: auto;
    padding-top: calc(120* (100vw / 750));
  }

  .product_ttl {
    font-size: calc(103* (100vw / 750));
  }

  .product_ttl_01 {
    top: calc(83*(100vw / 750));
    left: calc(-32* (100vw / 750));
  }

  .product_ttl_02 {
    right: calc(-20*(100vw / 750));
    bottom: calc(-33*(100vw / 750));
  }

  .product_section .product_catch {
    margin-bottom: calc(60* (100vw / 750));
    font-size: calc(28* (100vw / 750));
    line-height: 2;
  }

  .product_section .product_cont {}

  .product_section .product_info {}

  .product_section .product_info .product_info__thumb {
    width: calc(540* (100vw / 750));
    margin-bottom: calc(60*(100vw / 750));
  }

  .product_section .product_info .product_info__txt {
    margin: 0 0 calc(60* (100vw / 750));
    font-size: calc(26* (100vw / 750));
    line-height: 2.2;
  }

  .product_section .product_info .product_info__txt .txt_sm,
  .product_section .product_info .product_info__txt .txt_tax {
    font-size: calc(22* (100vw / 750));
  }

  .product_section .product_info .product_info__btn {
    width: calc(240* (100vw / 750));
    height: calc(64* (100vw / 750));
    margin-bottom: calc(100* (100vw / 750));
    font-size: calc(32* (100vw / 750));
  }

  .product_section .product_detail {
    width: calc(650* (100vw / 750));
    margin: auto;
    font-size: calc(24* (100vw / 750));
    text-align: justify;
    letter-spacing: 0.15em;
    line-height: 2;
  }

  /* ------- Product Colors ------- */

  .product_colors {
    width: 100%;
    padding: 0;
  }

  .product_colors ul {
    flex-direction: column;
  }

  .product_colors li {
    width: auto;
  }

  .product_colors li:first-child {
    margin-top: 0;
  }

  .product_colors dt {
    width: 100%;
    padding: 0 calc(30*(100vw / 750)) calc(24*(100vw / 750));
    font-size: calc(46 * (100vw / 750));
  }

  .product_colors dd img {
    width: 100%;
  }

  .product_colors li:nth-child(2n) dt {
    text-align: right;
  }

  /*============================
        HowToUse
  ============================*/

  .howto_section {
    overflow: hidden;
    background-image: url(../img/howto_bg_01_sp.jpg);
  }

  .howto_section .inner {
    width: 100%;
    padding: calc(215 * (100vw / 750)) 0 calc(120 * (100vw / 750));
  }

  .howto_contents {
    margin-bottom: calc(122 * (100vw / 750));
    padding: 0 0 calc(80 * (100vw / 750));
  }

  .howto_contents::before {
    top: calc(-40 * (100vw / 750));
    right: calc(-40 * (100vw / 750));
    bottom: calc(-40 * (100vw / 750));
    left: calc(-40 * (100vw / 750));
  }

  .howto_contents .howto_ttl {
    top: calc(-104*(100vw / 750));
    left: calc(40*(100vw / 750));
    font-size: calc(76 * (100vw / 750));
    transform: rotate(0);
  }

  .howto_contents .howto_ttl span {}

  .howto_contents .howto_img {
    overflow: hidden;
    overflow-x: scroll;
    margin-bottom: calc(10 * (100vw / 750));
  }

  .howto_img_inner {
    display: inline-block;
    white-space: nowrap;
  }

  .howto_contents .howto_img ul {
    display: flex;
    gap: calc(60 * (100vw / 750));
  }

  .howto_contents .howto_img ul li {
    width: calc(600 * (100vw / 750));
  }

  .howto_contents .howto_img ul li img {}

  .howto_contents .howto_product {
    margin-bottom: 0;
  }

  .howto_contents .howto_product ul {
    flex-wrap: wrap;
    gap: calc(40 * (100vw / 750)) 0;
    font-size: calc(26 * (100vw / 750));
  }

  .howto_contents .howto_product ul li {
    width: calc(224 * (100vw / 750));
  }

  .howto_contents .howto_product ul li a .howto_product__name {
    padding-top: calc(25 * (100vw / 750));
  }

  .howto_section .howto_btn {}

  .howto_section .howto_btn .btn_link {
    width: calc(460 * (100vw / 750));
    height: calc(84 * (100vw / 750));
    font-size: calc(40 * (100vw / 750));
  }

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

  /* ---- HOWTO02 ---- */

  .howto02 {
    margin-top: -1px;
    background-image: url(../img/howto_bg_02_sp.jpg);
  }

  .howto02 .howto_contents .howto_ttl {
    left: auto;
    top: calc(-103*(100vw / 750));
    right: calc(40*(100vw / 750));
    transform: rotate(0deg);
  }

  .howto02 .howto_product li:first-child {
    margin-left: calc(90*(100vw / 750));
  }

  .howto02 .howto_product li:first-child+li {
    margin-right: calc(90*(100vw / 750));
  }

  /*============================
        Kit
  ============================*/

  .kit_section {}

  .kit_section .inner {
    padding: calc(120*(100vw / 750)) 0;
  }

  .kit_section .kit_ttl {
    margin-bottom: calc(60*(100vw / 750));
    font-size: calc(64*(100vw / 750));
  }

  .kit_section .kit_product {
    width: 100%;
    margin: auto;
  }

  .kit_section .kit_product ul {
    display: flex;
    gap: calc(80*(100vw / 750));
    flex-direction: column;
  }

  .kit_section .kit_product ul li {
    width: calc(560*(100vw / 750));
    margin: auto;
  }

  .kit_section .kit_thumb {
    margin-bottom: calc(55*(100vw / 750));
  }

  .kit_section .kit_thumb::before {
    top: calc(15*(100vw / 750));
    right: calc(15*(100vw / 750));
    bottom: calc(15*(100vw / 750));
    left: calc(15*(100vw / 750));
  }

  .kit_section .kit_name {
    margin-bottom: calc(40*(100vw / 750));
    font-size: calc(26*(100vw / 750));
    line-height: 2.3;
  }

  .kit_section .kit_name .txt_tax {
    font-size: calc(22*(100vw / 750));
  }

  .kit_section .kit_btn {
    width: calc(240*(100vw / 750));
    height: calc(64*(100vw / 750));
    font-size: calc(32*(100vw / 750));
  }

  /*============================
        Schedule
  ============================*/

  .schedule_section {
    margin-bottom: -1px;
    background-image: url(../img/schedule_bg_sp.jpg);
  }

  .schedule_section .inner {
    padding: calc(120*(100vw / 750)) 0;
  }

  .schedule_section .schedule_ttl {
    margin-bottom: calc(40*(100vw / 750));
    font-size: calc(64*(100vw / 750));
  }

  .schedule_section h4 {
    margin-bottom: calc(40*(100vw / 750));
    font-size: calc(28*(100vw / 750));
  }

  .schedule_section h4 .txt_S {
    margin-right: calc(20*(100vw / 750));
    font-size: calc(24*(100vw / 750));
  }

  .schedule_section h4 .txt_M {
    margin-left: calc(10*(100vw / 750));
    font-size: calc(26*(100vw / 750));
  }

  .schedule_section h4:nth-of-type(n+2) {
    margin-top: calc(60*(100vw / 750));
  }

  .schedule_section h5 {
    margin-bottom: calc(13*(100vw / 750));
    font-size: calc(28*(100vw / 750));
  }

  .schedule_section h5:nth-of-type(n+2) {
    margin-top: calc(40*(100vw / 750));
  }

  .schedule_section p {
    font-size: calc(26*(100vw / 750));
  }

  .schedule_section p .txt_sm {
    font-size: calc(22*(100vw / 750));
  }

  .schedule_section .btn_all_check {
    width: calc(660*(100vw / 750));
    height: calc(144*(100vw / 750));
    margin-top: calc(110*(100vw / 750));
  }

  .schedule_section .btn_all_check .btn_link {
    gap: calc(10*(100vw / 750));
  }

  .schedule_section .btn_all_check .txt_sm {
    font-size: calc(32*(100vw / 750));
  }

  .schedule_section .btn_all_check .txt_lg {
    font-size: calc(48*(100vw / 750));
  }

  .page-share-btn {
    overflow: hidden;
    height: 0;
  }

}