/* ##############################################################################

    KEYFRAMES

############################################################################## */
.js-fadeIn,
.js-fadeIn-list > .post {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(20px);
  transition: opacity 1s ease-out, filter 0.5s linear, transform 1s ease-out;
}
.js-fadeIn.is-active,
.js-fadeIn-list.is-active > .post,
.is-active .js-fadeIn {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.ie .concept--ttl-txt,
.ie .js-fadeIn,
.ie .js-fadeIn-list > .post {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.ie svg circle,
.ie svg path,
.ie svg line {
  stroke-dashoffset: 0 !important;
}
.js-fadeIn-list .post:nth-child(2) {
  transition-delay: 0.2s;
}
.js-fadeIn-list .post:nth-child(3) {
  transition-delay: 0.3s;
}
.js-fadeIn-list .post:nth-child(4) {
  transition-delay: 0.4s;
}
.js-fadeIn-list .post:nth-child(5) {
  transition-delay: 0.5s;
}
.js-fadeIn-list .post:nth-child(6) {
  transition-delay: 0.6s;
}
.js-fadeIn-list .post:nth-child(7) {
  transition-delay: 0.7s;
}
.js-fadeIn-list .post:nth-child(8) {
  transition-delay: 0.8s;
}
.js-fadeIn-list .post:nth-child(9) {
  transition-delay: 0.9s;
}
.js-fadeIn-list .post:nth-child(10) {
  transition-delay: 1s;
}

@keyframes hero_catch {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes product_item {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media screen and (max-width: 767px) {
  @keyframes product_item {
    0% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(0, -3px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
}
@keyframes btn_star {
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(1);
  }
}
@keyframes lineAct {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes circleAnim {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes timerAnim {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scroll-right {
  0% { transform: translate(-33.33%, 0%) }
  100% { transform: translate(-66.66%, 0%) }
}

/* ##############################################################################

    COMMON

############################################################################## */

html {
  height: 100%;
  overflow-y: scroll;
}
html.popup-active {
  overflow: hidden;
}
body {
  position: relative;
}
@media screen and (max-width: 767px) {
  /* support iOS */
  html {
    height: -webkit-fill-available;
  }
  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}
:root {
  --wid_vw: 1280 * 100vw;
  --wid_p: 1280 * 100%;
  --hgt_p: 768 * 100%;
}

@media screen and (max-width: 767px) {
  :root {
    --wid_vw: 375 * 100vw;
    --wid_p: 375 * 100%;
    --hgt_p: 667 * 100%;
  }
}

/* layout
**************************************** */

/* --- inner --- */
.inner {
  width: 90%;
  max-width: 1006px;
  margin: 0 auto;
}
.inner-xs {
  max-width: 560px;
}
.inner-sm {
  max-width: 750px;
}
.inner-lg {
  max-width: 1058px;
}
.inner-md {
  max-width: 1200px;
}
.inner-850 {
  max-width: 850px;
}

/* --- section_pdg --- */
.section_pdg {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .inner {
    width: 80%;
  }
  .inner .inner {
    width: 100%;
  }
  .section_pdg {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* flex
**************************************** */
/* --- ざっくりflexレイアウト --- */
.flex-col1 {
  display: block;
}
.flex-col2,
.flex-col3,
.flex-col4 {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-col2 > * {
  width: 48.5%;
  margin-right: 3%;
}
.flex-col2.wide > * {
  width: 45.45%;
  margin-right: 9.1%;
}
.flex-col2:not(.flex-reverse) > *:nth-child(even),
.flex-col2.flex-reverse > *:nth-child(odd) {
  margin-right: 0;
}
.flex-col3 > * {
  width: 31.33%;
  margin-right: 3%;
}
.flex-col3.wide > * {
  width: 28%;
  margin-right: 8%;
}
.flex-col3 > *:nth-child(3n) {
  margin-right: 0;
}
.flex-col4 > * {
  width: 23.5%;
  margin-right: 2%;
}
.flex-col4 > *:nth-child(4n) {
  margin-right: 0;
}
.flex-col2.flex-c-wrap > *,
.flex-col3.flex-c-wrap > * {
  margin-bottom: 3%;
}
.flex-col4.flex-c-wrap > * {
  margin-bottom: 2%;
}

@media screen and (max-width: 767px) {
  .flex-sp-block {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  /* --- ざっくりflexレイアウト - sp --- */
  .flex-col2.flex-sp-block > *,
  .flex-col2.wide.flex-sp-block > *,
  .flex-col3.wide.flex-sp-block > *,
  .flex-col3.flex-sp-block > *,
  .flex-col4.flex-sp-block > * {
    width: 100%;
    margin-bottom: 8%;
    margin-right: 0;
  }
  .flex-col2.flex-sp-block > *:last-child,
  .flex-col2.wide.flex-sp-block > *:last-child,
  .flex-col3.wide.flex-sp-block > *:last-child,
  .flex-col3.flex-sp-block > *:last-child,
  .flex-col4.flex-sp-block > *:last-child {
    margin-bottom: 0;
  }
  .flex-sp-col {
    display: grid;
    gap: 16px 16px;
  }
  .flex-sp-col > * {
    width: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
  .flex-sp-col2 {
    grid-template-columns: 1fr 1fr;
  }
  .flex-sp-col3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* bg
**************************************** */
.bg-cloud,
.bg-star {
  position: absolute;
  left: 0;
  width: 100%;
  min-width: 1280px;
  opacity: 0.48;
  z-index: -1;
  pointer-events: none;
  background-size: 100%;
}
.bg-cloud::before,
.bg-star::before {
  content: "";
  display: block;
}
.bg-cloud01 {
  background-image: url(../images/common/bg-cloud01.png);
}
.bg-cloud02 {
  left: auto;
  right: 0;
  max-width: 806px;
  background-image: url(../images/common/bg-cloud02.png);
}
.bg-cloud03 {
  left: 0;
  max-width: 810px;
  background-image: url(../images/common/bg-cloud03.png);
}
.bg-cloud03-lg {
  max-width: 1000px;
}
.bg-cloud01::before {
  padding-top: 68.984%;
}
.bg-cloud02::before {
  padding-top: 72.208%;
}
.bg-cloud03::before {
  padding-top: 58.271%;
}
.bg-cloud[src$="bg-cloud01.png"] {
  opacity: 0.53;
}
.bg-cloud[src$="bg-cloud02.png"] {
  left: auto;
  right: 0;
  min-width: auto;
  max-width: 806px;
  opacity: 0.4;
}
.bg-cloud[src$="bg-cloud03.png"] {
  min-width: auto;
  max-width: 510px;
  opacity: 0.53;
}
.bg-star {
  background-image: url(../images/bg-star.png);
  background-size: 100%;
}
.bg-star::before {
  padding-top: 66.562%;
}
.bg-star-flip {
  transform: rotate(180deg) scale(-1, 1);
  mask-image: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 96%, rgba(255, 255, 255, 0) 100%);
}
.bg-star-flip-ud {
  transform: rotate(180deg);
}
.bg-star-flip-horizontal {
  transform: scale(-1, 1);
}
@media screen and (max-width: 1280px) {
  .bg-cloud,
  .bg-star {
    min-width: auto;
  }
}
@media screen and (max-width: 767px) {
  .bg-star {
    background-image: url(../images/bg-star-sp.png);
    background-size: 100%;
  }
  .bg-star::before {
    padding-top: 177.866%;
  }
}

/* img
********************************************** */
.img-ctr {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.img-trim {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-trim.pos_rel::before {
  content: "";
  display: block;
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;";
}
.img-cover.pos_ab {
  top: 0;
  left: 0;
}
.img-contain {
  object-fit: contain;
  font-family: "object-fit: contain;";
}

/* ttl
**************************************** */

/* --- page_ttl --- */
.page_ttl {
  position: relative;
  z-index: 0;
  line-height: 1;
}
.page_ttl-bg-star {
  top: 0;
  opacity: 0.4;
}
.page_ttl .inner {
  padding-top: 240px;
  padding-bottom: 80px;
}
.page_ttl--jp {
  display: inline-block;
  font-size: 228%;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.single .page_ttl--ttl {
  display: none;
}
.page_ttl img {
  height: 35px;
}
.page_ttl--faq img {
  height: 45px;
  margin-top: -6px;
}
.page_ttl--404 .inner {
  padding-top: 174px;
  padding-bottom: 0;
}
.page_ttl--404 img {
  height: auto !important;
}

/* --- section_ttl --- */
.section_ttl {
  font-size: 307%;
  font-weight: normal;
  text-indent: 0.06em;
  letter-spacing: 0.06em;
}
.section_ttl-sub {
  font-size: 1rem; /* 16px */
}

/* ttl-line */
.ttl-line > span {
  position: relative;
  display: inline-block;
}
.ttl-line > span:not([class])::before,
.ttl-line > span:not([class])::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  width: 8.125rem;
  aspect-ratio: 130 / 44;
  background: url(../images/product-line.svg) no-repeat;
  background-size: contain;
}
.ttl-line > span:not([class])::before {
  bottom: -39px;
  left: -52px;
}
.ttl-line > span:not([class])::after {
  top: 36px;
  right: -44px;
}

/* --- ttl-bg --- */
.ttl-bg-calm_night,
.ttl-bg-relax_night,
.ttl-bg-deep_night {
  margin-bottom: 56px;
}
.ttl-bg-calm_night {
  padding-top: 20px;
  padding-bottom: 20px;
  background: linear-gradient(90deg, rgba(201, 93, 151, 0) 0%, rgba(201, 93, 151, 1) 50%, rgba(201, 93, 151, 0) 100%);
}
.ttl-bg-relax_night {
  padding-top: 20px;
  padding-bottom: 20px;
  background: linear-gradient(90deg, rgba(67, 144, 198, 0) 0%, rgba(67, 144, 198, 1) 50%, rgba(67, 144, 198, 0) 100%);
}
.ttl-bg-deep_night {
  padding-top: 20px;
  padding-bottom: 20px;
  background: linear-gradient(90deg, rgba(36, 40, 68, 0) 0%, rgba(36, 40, 68, 1) 50%, rgba(36, 40, 68, 0) 100%);
}
@media screen and (max-width: 767px) {
  /* --- page_ttl --- */
  .page_ttl-bg-star {
    background-image: url(../images/common/page_ttl-bg-star.jpg);
    transform: none;
    opacity: 1;
  }
  .page_ttl-bg-star02 {
    top: 60%;
    opacity: 0.3;
  }
  .page_ttl-bg-star::before {
    padding-top: 108.8%;
  }
  .page_ttl .inner {
    padding-top: 150px;
  }
  .page_ttl img {
    height: 27px;
  }
  .page_ttl--404 img {
    width: 120%;
    max-width: none;
    margin-left: -10%;
  }

  /* --- section_ttl --- */
  .section_ttl {
    font-size: 285%;
  }
  .section_ttl-sm {
    font-size: 171.43%;
  }

  /* ttl-line */
  .ttl-line > span:not([class])::before,
  .ttl-line > span:not([class])::after {
    width: 97px;
  }
  .ttl-line > span::before {
    bottom: -26px;
    left: -32px;
  }
  .ttl-line > span::after {
    top: 29px;
    right: -29px;
  }
}

/* breadcrumbs
**************************************** */
.breadcrumbs {
  margin-bottom: 1vw;
  white-space: nowrap;
}
.breadcrumbs .breadcrumb_last,
.breadcrumbs a {
  display: inline-block;
  /* color: #2F45A5; */
  color: #fff;
  padding: 16px 0;
  font-size: 114%;
  line-height: 1;
}
.single .breadcrumbs .breadcrumb_last,
.single .breadcrumbs a {
  font-size: 85.7%;
}
.breadcrumbs span:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 5px;
  margin-top: -5px;
  margin-left: 0.5em;
  margin-right: 1em;
  vertical-align: middle;
  /* border-bottom: 1px solid #2F45A5;
    border-right: 1px solid #2F45A5; */
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: skewX(45deg);
}
.breadcrumbs .breadcrumb_last {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-calm_night .breadcrumbs .breadcrumb_last,
.page-relax_night .breadcrumbs .breadcrumb_last,
.page-deep_night .breadcrumbs .breadcrumb_last {
  font-size: 0.875rem;
}

@media screen and (max-width: 767px) {
  /* .breadcrumbs {
      margin-bottom: 80px;
    } */
  .simplebar-scrollbar::before {
    background-color: #4054ab;
    border-radius: 0;
    height: 1px !important;
  }
  .simplebar-track.simplebar-horizontal {
    height: 0 !important;
  }
  .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    top: 0;
    height: 1px;
  }
  .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
    left: 0;
    right: 0;
  }
  .simplebar-vertical {
    display: none;
  }
  .breadcrumbs ::-webkit-scrollbar,
  .breadcrumbs .inner::-webkit-scroll {
    display: none;
  }
  .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
  }
  .breadcrumbs span:not(:first-child)::before {
    width: 20px;
  }
}

/* txt
**************************************** */
.txt-lg {
  font-size: 107%;
}
.txt-xl {
  font-size: 114%;
}
.txt-xll {
  font-size: 128%;
}
.txt-xs {
  font-size: 85.7%;
}
.txt-sm {
  font-size: 92.8%;
}
.txt-lg-r {
  font-size: 1.125rem; /* 18px */
}
.txt-xl-r {
  font-size: 1.25rem; /* 20px */
}
.txt-sm-r {
  font-size: 0.875rem; /* 14px */
}
.txt-wh {
  color: #fff;
}
.txt-blue {
  color: #3f47ab;
}
.txtarea p:not(:last-child) {
  margin-bottom: 1em;
}
.txtarea {
  text-align: justify;
}
.bold {
  font-weight: bold;
}

/* --- font --- */
.font-en,
.faq_box--item::before,
.breadcrumbs,
.section_ttl,
.wp-pagenavi,
.product_info--cont-txt01 li::before {
  font-family: "Tenor Sans", YuGothic, 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-weight: normal;
}
.font-jp {
  font-family: "Shippori Mincho", serif;
  font-weight: normal;
}

@media screen and (max-width: 767px) {
  .txt-lg {
    font-size: 107.14%; /*15px*/
  }
  .txt-sm {
    font-size: 92.86%; /*13px*/
  }
  .txt-lg-r {
    font-size: 0.9375rem; /* 15px */
  }
  .txt-xl-r {
    font-size: 1.0625rem; /* 17px */
  }
  .txt-sm-r {
    font-size: 0.8125rem; /* 13px */
  }
}

/* table & list
**************************************** */
table {
  width: 100%;
}

/* --- table_default --- */
.table_default th,
.table_default td {
  padding: 16px 8px;
}
.table_default th {
  border-bottom: 2px solid #666;
}
.table_default td {
  padding: 16px 16px;
  border-bottom: 1px solid #666;
  border-left: 4px solid #fff;
}

/* btn
**************************************** */
.btn a {
  position: relative;
  display: inline-block;
  padding: 4px;
}
.btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 386px;
  min-height: 65px;
  padding: 13px 52px 13px 32px;
  font-size: 128%;
  letter-spacing: 0.1em;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
  background-color: rgba(9, 43, 150, 0.41);
  background-image: linear-gradient(#092b96 0%, rgba(215, 163, 230, 0.13) 100%);
}
.btn-text img {
  margin-right: 0.75em;
}
.btn a::before,
.btn a::after,
.btn-line::before,
.btn-line::after {
  content: "";
  position: absolute;
  background-color: #fff;
}
.btn a::before {
  top: 0;
  left: 8px;
  right: 8px;
  height: 1px;
}
.btn a::after {
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 1px;
}
.btn-line::before {
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 1px;
}
.btn-line::after {
  top: 8px;
  bottom: 8px;
  right: 0;
  width: 1px;
}
.btn-deco {
  position: absolute;
}
.btn-star {
  width: 7px;
  height: 7px;
  background: url(../images/star01.svg) no-repeat;
  background-size: contain;
  animation: btn_star 2s linear infinite;
}
.btn-star01 {
  top: -3px;
  left: -3px;
  animation-delay: 1s;
}
.btn-star02 {
  bottom: -3px;
  right: -3px;
  background: url(../images/star02.svg) no-repeat;
  background-size: contain;
}
.btn-circle {
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
  animation: btn_star 2s linear infinite;
}
.btn-circle01 {
  bottom: -1px;
  left: -1px;
}
.btn-circle02 {
  top: -1px;
  right: -1px;
  animation-delay: 1s;
}
.btn-arrow {
  position: absolute;
  top: 0;
  bottom: 3px;
  right: 27px;
  margin: auto;
  display: block;
  width: 25px;
  height: 5px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: skewX(45deg);
  transition: width 0.4s ease-out;
}
.btn a[href^="#"] .btn-arrow {
  transform: rotate(90deg) skewX(45deg);
}

/* btn-list */
.btn-list .btn-text.font-en {
  letter-spacing: 0.15em;
}

/* btn-hairmask */
.btn-hairmask .btn-text {
  background-image: linear-gradient(to right, #866ba1, #201f77);
  font-weight: 500;
  box-shadow: 1rem 1rem 1rem rgba(0, 30, 71, 0.2);
}
.btn-hairmask .btn-circle {
  width: 4px;
  height: 4px;
}
.btn-hairmask .btn-star {
  width: 6px;
  height: 6px;
}
.btn-hairmask a::before,
.btn-hairmask a::after {
  left: 6px;
  right: 6px;
}
.btn-hairmask .btn-line::before,
.btn-hairmask .btn-line::after {
  top: 6px;
  bottom: 6px;
}
.btn-hairmask .btn-arrow {
  width: 20px;
  height: 4px;
}
.btn-calm .btn-text {
  background-image: linear-gradient(to right, #bd8bd5, #3c43b7);
}
.btn-relax .btn-text {
  background-image: linear-gradient(to right, #80b1dd, #2240ac);
}

/* btn-sm */
.btn-sm a::before {
  left: 4px;
  right: 4px;
}
.btn-sm a::after {
  left: 4px;
  right: 4px;
}
.btn-sm .btn-line::before {
  top: 4px;
  bottom: 4px;
}
.btn-sm .btn-line::after {
  top: 4px;
  bottom: 4px;
}
.btn-sm .btn-star {
  width: 4px;
  height: 4px;
}
.btn-sm .btn-circle {
  width: 3px;
  height: 3px;
}
.btn-sm .btn-arrow {
  width: 14px;
}

/* btn-md */
.btn-md .btn-text {
  font-size: 0.938rem; /* 15px */
  min-height: 56px;
}

/* btn_list */
.btn_list .btn:not(:last-child) {
  margin-right: 30px;
}
.btn_list .btn a {
  width: 100%;
}
.btn_list .btn-text {
  min-width: auto;
}
.btn-text i {
  padding-right: 0.5em;
}

/* btn-buy */
.btn.btn-buy .btn-text {
  min-height: 48px;
  padding: 0 16px;
}
.btn-buy .btn-text i {
  font-size: 1rem;
}
.btn-buy .btn-text img {
  margin-right: 0.25em;
  vertical-align: text-top;
}

/* btn-off */
.btn-off {
  pointer-events: none;
  opacity: 0.5;
}

@media (hover: hover), (-ms-high-contrast: none) {
  .btn a:hover .btn-arrow {
    width: 10px;
  }
}
@media screen and (min-width: 768px) {
  .btn-text i {
    font-size: 125%;
  }
  .btn-sm .btn-text {
    min-width: 230px;
    min-height: 45px;
    padding: 6px 30px 6px 12px;
    font-size: 85%;
  }
  .btn-sm .btn-text.font-en {
    font-size: 114%;
  }
  .btn-sm .btn-text .btn-text-small {
    font-size: 75%;
  }
  .btn-hairmask .btn-arrow {
    right: 16px;
  }
}
@media screen and (max-width: 767px) {
  .btn,
  .btn_list .btn {
    width: 104%;
    margin-left: -2%;
  }
  .btn a {
    width: 100%;
    min-height: 0;
  }
  .btn-text {
    min-width: auto;
    min-height: 62px;
    padding: 16px 50px 16px 14px;
    font-size: 116%;
    letter-spacing: 0.06em;
  }
  .btn-text i {
    font-size: 140%;
  }
  .btn-text i.font-en {
    font-size: 144%;
  }
  .btn-text i.font-en .btn-text-small {
    font-size: 60%;
  }
  .btn-sm .btn-text .btn-text-small {
    font-size: 61%;
  }
  .btn-arrow {
    width: 20px;
  }
  .btn_list .btn:not(:last-child) {
    margin-right: 0;
    margin-bottom: 16px !important;
  }
  .btn-hairmask {
    width: 100%;
    margin-left: 0;
  }
  .btn-hairmask .btn-text {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .btn-buy .btn-text {
    padding: 13px 16px;
  }
}

/* mask
*************************************************** */
.mask--img {
  position: relative;
}
.mask--img::before,
.mask--img img {
  mask-image: url("../images/mask.svg");
  mask-repeat: no-repeat;
  mask-position: bottom right;
  mask-size: cover;
  -webkit-mask-image: url("../images/mask.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom right;
  -webkit-mask-size: cover;
}
.mask--img::after {
  content: "";
  position: absolute;
  bottom: -8%;
  right: -9%;
  z-index: 1;
  display: block;
  width: 40.5%;
  height: 25.8%;
  background: url(../images/mask-deco.svg) no-repeat;
  background-size: contain;
}

/* toggle / accordion_box
*************************************************** */
.toggle {
  position: relative;
  font-size: 1rem;
  padding: 1em;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.toggle::before,
.toggle::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  border-top: 1px solid;
  width: 1em;
  transition: .4s ease-out;
}
.toggle::before {
  rotate: 90deg;
}
.toggle.active::before {
  rotate: 0deg;
}
.accordion_box {
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: none;
}
.toggle + .accordion_box {
  display: none;
}
@media screen and (max-width: 767px) {
  .toggle {
    font-size: 0.875rem;
  }
  .accordion_box {
    padding: 1rem;
  }
}



/* ##############################################################################

    HEADER

############################################################################## */

/* header
**************************************** */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-inline: 4rem;
  height: 100px;
  line-height: 1;
  z-index: 9990;
  transition: all 1s ease-out;
}
.popup-active .header {
  opacity: 0;
  pointer-events: none;
}
.header::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  z-index: 1;
  background: rgb(36, 57, 128);
  background: linear-gradient(180deg, rgba(36, 57, 128, 1) 0%, rgba(17, 76, 173, 1) 49%, rgba(50, 99, 180, 0) 100%);
  pointer-events: none;
  transition: all 1s ease-out;
  opacity: 0;
}
.header--logo {
  position: relative;
}
.header--logo-sm {
  position: fixed;
  z-index: 5;
  top: 20px;
  opacity: 0;
  transition: all 0.4s ease-out;
}
.header--logo-sm img {
  width: 78px;
}
.header--nav {
  position: relative;
  z-index: 1;
  left: 0;
  right: 0;
  flex: 1;
}
.page-special.page-hairmask .header--nav {
  opacity: 0;
  pointer-events: none;
}
.header.is-active::before {
  opacity: 1;
}
.header--logo-sm.is-show {
  opacity: 1;
}

@media print, screen and (min-width: 768px) {
  .gnav ul,
  .gnav li,
  .gnav a {
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .header {
    left: 0;
    right: 0;
    padding-left: 20px;
    padding-top: 20px;
    height: auto;
  }
  .header::before {
    display: none;
  }
  .header--nav {
    padding-top: 23px;
    padding-right: 30px;
  }
  .header--logo {
    z-index: 0;
  }
  .header--logo img {
    width: 70px;
  }
}

/* particles
  **************************************** */
.particles {
  position: absolute;
  z-index: 1;
  width: 42%;
  max-height: 500px;
  height: 50%;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .particles {
    width: 100%;
    max-height: 400px;
    height: 30%;
  }
}

/* gnav
**************************************** */
.gnav {
  height: 50px;
  padding-top: 20px;
  transition: all 1s ease-out;
}
.header.is-active .gnav {
  position: fixed;
  top: 0;
  margin-left: auto;
  right: 135px;
}
.gnav--list {
  margin-top: -4px;
  margin-right: -18px;
}
.gnav--link {
  display: block;
  padding: 0 16px;
  font-size: 135%;
  line-height: 1;
  text-align: center;
}
.gnav--link span {
  position: relative;
  display: inline-block;
  padding: 8px 0;
}
.gnav--link span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transition: transform 0.4s ease-out;
  background-color: #fff;
}
.gnav--link:hover span::before,
.current .gnav--link span::before {
  transform: scaleX(1);
}
.gnav--sns {
  display: none;
}

@media screen and (max-width: 1180px) {
  .header.is-active .gnav {
    right: 50px;
  }
}
@media screen and (max-width: 767px) {
  .gnav {
    position: fixed;
    inset: 0 !important;
    height: 100vh;
    opacity: 0;
    padding: 64px 10%;
    overflow: auto;
    pointer-events: none;
    transition: 0.4s ease-out;
    background: #10299a url(../images/common/gnav-bg.jpg) center top;
    background-size: 100%;
    opacity: 0;
    filter: blur(5px);
    transition: opacity 0.5s ease-out, filter 0.7s linear;
    -webkit-overflow-scrolling: touch;
  }
  .gnav--link {
    display: inline-block !important;
    padding: 0;
    font-size: 216%;
    text-align: left;
  }
  .gnav--list {
    margin-bottom: 30px;
  }
  .gnav--link span {
    display: block;
    padding: 17px 0;
  }
  .gnav--link span::before {
    top: calc(50% - 7px / 2);
    left: -16px;
    width: 7px;
    height: 7px;
    background: url(../images/common/star.svg);
    background-size: cover;
    transform: scale(0);
  }
  .gnav--topics {
    margin-top: 16px;
  }
  .gnav--topics .gnav--link,
  .gnav--news .gnav--link,
  .gnav--faq .gnav--link {
    font-size: 175%;
  }
  .gnav--topics .gnav--link span,
  .gnav--news .gnav--link span,
  .gnav--faq .gnav--link span {
    padding: 12px 0;
  }
  .current .gnav--link span::before {
    transform: scale(1);
  }
  .header.active .gnav {
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: all;
    opacity: 1;
    filter: blur(0);
  }

  /* ---gnav_btn --- */
  .gnav_btn {
    position: fixed;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    z-index: 9999;
  }
  .gnav_btn--txt {
    position: absolute;
    top: 30px;
    left: -0.3em;
  }
  .gnav_btn--txt::before {
    content: "MENU";
    font-size: 83%;
    letter-spacing: 0;
    transition: 0.4s ease-out;
  }
  .header.active .gnav_btn--txt::before {
    content: "CLOSE";
  }
  .gnav_btn--lines {
    position: relative;
    width: 44px;
    height: 19px;
  }
  .gnav_btn--lines span {
    position: absolute;
    left: 0;
    width: 24px;
    height: 1px;
    box-sizing: border-box;
    background-color: #fff;
    transform: skewY(-25deg);
    transition: all 0.4s;
  }
  .gnav_btn--lines span:nth-of-type(1) {
    top: 0;
  }
  .gnav_btn--lines span:nth-of-type(2) {
    top: 50%;
  }
  .gnav_btn--lines span:nth-of-type(3) {
    bottom: 0;
  }
  .header.active .gnav_btn--lines span:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }
  .header.active .gnav_btn--lines span:nth-of-type(2) {
    opacity: 0;
  }
  .header.active .gnav_btn--lines span:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
  }

  .gnav--sns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 24px;
  }
  .gnav--sns a {
    display: flex;
    align-items: center;
    font-size: 133%;
  }
  .gnav--sns img {
    margin-right: 8px;
  }
  .gnav--sns li {
    width: calc(50% - 20px);
    margin-bottom: 20px;
    margin-right: 40px;
  }
  .gnav--sns li:nth-child(2n) {
    margin-right: 0;
  }
  .gnav--btn .btn {
    margin-bottom: 20px;
  }
}

/* header-sm
**************************************** */
.header-sm {
  height: 72px;
}

@media print, screen and (min-width: 768px) {
  .header-sm .gnav--tel {
    font-size: 120%;
  }
}
@media screen and (max-width: 767px) {
  .header-sm {
    height: 56px;
  }
}

/* ##############################################################################

    FOOTER

############################################################################## */

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.footerLine {
  border-top: 1px solid #fff;
}
.footer > .inner {
  padding-top: 4vw;
}
.footer .btn-hairmask .btn-text {
  min-width: 32px;
}
.footer--logo {
  margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
  .footer .inner {
    width: 90%;
    padding-top: 60px;
  }
  .footer--logo img {
    width: 95px;
  }
  .footer .btn-hairmask .btn-text i.font-en {
    font-size: 140%;
  }
}

/* bnrs
*************************************************** */
.bnrs {
  padding-bottom: 7vw;
  text-align: center;
}
.bnrs__box {
  width: fit-content;
}
.bnrs__box:not(.swiper-slide-active) img {
  opacity: .5;
}
.bnrs--link {
  display: inline-block;
  background-image: linear-gradient(#092b96 0%, rgba(215, 163, 230, 0.13) 100%);
}
@media screen and (max-width: 767px) {
  .bnrs__box {
    width: 80vw;
  }
  .bnrs__box:not(:last-of-type) {
    margin-bottom: 0px;
  }
  .bnrs--link {
    max-width: 320px;
    display: inline-block;
  }

}


/* sns_area
*************************************************** */
.sns_area {
  margin-bottom: 34px;
}
.sns_area li:not(:last-child) {
  margin-right: 24px;
}
@media screen and (max-width: 767px) {
  .sns_area {
    margin-bottom: 54px;
  }
}

/* fnav
*************************************************** */
.fnav {
  margin-left: 4em;
  margin-bottom: 31px;
  font-size: 85%;
  letter-spacing: 0.06em;
  line-height: 1;
}
.fnav li:not(:last-child) {
  margin-right: 70px;
}
.fnav a:hover {
  opacity: 0.6;
}

@media screen and (max-width: 767px) {
  .fnav {
    margin-left: 0;
    margin-bottom: 20px;
    font-size: 100%;
  }
  .fnav a {
    width: 100%;
    padding: 0 8px;
    margin-right: 0;
  }
  .fnav li:not(:last-child) {
    margin-right: 0;
  }
}

/* footer--cta
*************************************************** */
.footer--contact {
  margin-bottom: 16px;
  font-size: 107%;
}
.footer--tel {
  font-size: 147%;
  line-height: 1.4;
}
.footer--tel small {
  font-size: 59%;
}
.footer--copyright {
  padding-bottom: 35px;
  text-align: center;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 767px) {
  .footer--copyright {
    padding-bottom: 40px;
  }
  .footer--copyright small {
    font-size: 100%;
  }
}

/* bnr
*************************************************** */
.bnr {
  position: fixed;
  bottom: 0;
  right: 0;
  width: max(calc(320 / var(--wid_vw)), 320px);
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all .5s ease-out;
}
.bnr.show {
  opacity: 1;
  pointer-events: auto;
}
.bnr.hide {
  opacity: 0;
  pointer-events: none;
}
.bnr.morehide {
  display: none !important;
}
.bnr--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bnr .imgarea,
.bnr .txtarea {
  pointer-events: none;
}
.bnr .imgarea {
  width: calc(120 / 320 * 100%);
}
.bnr .txtarea {
  flex: 1;
  text-align: center;
  background-image: linear-gradient(to right, rgba(36, 52, 199, 0.74), rgba(0, 36, 85, 0.74));
}
.bnr--ttl {
  font-size: max(calc(16 / var(--wid_vw)), 1rem);
  letter-spacing: 0.18em;
  margin-bottom: 0.3em;
}
.bnr--ttl::before {
  content: "";
  position: absolute;
  top: 44%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: min(calc(172 / var(--wid_vw), 172px));
  height: min(calc(29 / var(--wid_vw), 29px));
  background-image: url(../images/fv-bnr-deco.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.bnr--txt {
  font-size: max(calc(11 / var(--wid_vw)), 0.688rem);
  letter-spacing: 0;
}
.bnr_badge {
  width: calc(33 / 120 * 100%);
  top: calc(8 / 104 * 100%);
  right: calc(6 / 120 * 100%);
}
@media screen and (max-width: 767px) {
  .bnr {
    bottom: 18px;
    right: inherit;
    left: 50%;
    transform: translateX(-50%);
    width: calc(354 / var(--wid_vw));
  }
  .bnr .imgarea {
    width: calc(138 / 354 * 100%);
  }
  .bnr_badge {
    top: calc(8 / 116 * 100%);
  }
  .bnr--ttl {
    font-size: max(calc(18 / var(--wid_vw)), 1.125rem);
    line-height: 1.6;
  }
  .bnr--ttl::before {
    top: 60%;
    width: min(calc(200 / var(--wid_vw), 200px));
    height: min(calc(57 / var(--wid_vw), 57px));
  }
  .bnr--txt {
    font-size: max(calc(12 / var(--wid_vw)), 0.75rem);
    letter-spacing: 0.08em;
  }
  .bnr--close {
    top: calc(-10 / var(--wid_vw));
    right: calc(-8 / var(--wid_vw));
    width: calc(26 / var(--wid_vw));
    height: calc(26 / var(--wid_vw));
    background-color: #fff;
    border-radius: 50%;
    z-index: 1;
  }
  .bnr--close::before,
  .bnr--close::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 60%; /* 18px */
    height: 1px;
    background-color: #333;
  }
  .bnr--close::before {
    transform: rotate(45deg);
  }
  .bnr--close::after {
    transform: rotate(-45deg);
  }
}
@media screen and (min-width: 768px) {
  .bnr--close {
    top: calc(-7 / 1280 * 100vw);
    right: inherit;
    left: calc(-8 / 1280 * 100vw);
    width: calc(16 / 1280 * 100vw);
    height: calc(16 / 1280 * 100vw);
    background-color: #fff;
    border-radius: 50%;
    z-index: 1;
    position: absolute;
  }
  .bnr--close::before,
  .bnr--close::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 60%; /* 18px */
    height: 1px;
    background-color: #333;
  }
  .bnr--close::before {
    transform: rotate(45deg);
  }
  .bnr--close::after {
    transform: rotate(-45deg);
  }
}

/* popup
*************************************************** */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  transition: all 1s ease-out;
  opacity: 0;
  pointer-events: none;
}
.popup-active .popup {
  opacity: 1;
  pointer-events: auto;
  pointer-events: inherit;
}
.popup.hide {
  transition: none;
}
.popup--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.popup--logo {
  top: 40px;
  left: 40px;
  z-index: 1;
}
.popup--catch {
  margin-left: 10vw; /* 128px */
  margin-right: 51.88vw; /* 664px */
}
.popup--badge {
  width: calc(110 / var(--wid_vw));
  margin-bottom: calc(16 / var(--wid_vw));
}
.popup--ttl {
  font-size: calc(48 / var(--wid_vw));
  line-height: 1.7;
  margin-bottom: 0.2em;
}
.popup--ttl > span::before,
.popup--ttl > span::after {
  width: calc(180 / var(--wid_vw));
  height: calc(58 / var(--wid_vw));
}
.popup--ttl > span::before {
  bottom: calc(-36 / var(--wid_vw));
  left: calc(-56 / var(--wid_vw));
}
.popup--ttl > span::after {
  top: calc(48 / var(--wid_vw));
  right: calc(-50 / var(--wid_vw));
}
.popup--catch .product--name {
  font-size: calc(22 / var(--wid_vw));
  margin-bottom: 0.3em;
}
.popup--catch .product--name + span {
  letter-spacing: 0;
  font-size: calc(13 / var(--wid_vw));
}
.popup--skip {
  bottom: calc(44 / var(--wid_vw));
  right: calc(44 / var(--wid_vw));
  width: calc(60 / var(--wid_vw));
  padding: 0.5em;
  font-size: calc(16 / var(--wid_vw));
  cursor: pointer;
  transition: all 0.4s ease-out;
  z-index: 1;
}
.popup--skip:hover {
  opacity: 0.7;
}
.popup--skip::before,
.popup--skip::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: #fff;
}
.popup--skip::before {
  left: 0;
  width: 100%;
}
.popup--skip::after {
  width: calc(6 / var(--wid_vw));
  right: 0;
  transform-origin: right;
  transform: rotate(40deg);
}
@media screen and (max-width: 767px) {
  .popup {
    height: 100vh;
  }
  .popup--logo {
    top: 26px;
    left: 30px;
  }
  .popup--logo img {
    width: 70px;
  }
  .popup--catch {
    display: grid;
    grid-template-columns: calc(69 / var(--wid_vw)) auto;
    grid-template-rows: auto calc(66 / var(--wid_vw));
    margin-left: auto;
    margin-right: auto;
    height: calc(510 / var(--wid_vw));
  }
  .popup--badge {
    width: calc(66 / var(--wid_vw));
    grid-row: 2/3;
  }
  .popup--ttl {
    font-size: calc(28 / var(--wid_vw));
    grid-column: 1/3;
    margin-bottom: 0;
  }
  .popup--catch .product--txt-sub {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    text-align: left;
  }
  .popup--catch .product--name {
    font-size: calc(18 / var(--wid_vw));
    margin-bottom: 0.2em;
  }
  .popup--catch .product--name + span {
    font-size: calc(13 / var(--wid_vw));
  }
  .popup--skip {
    bottom: calc(28 / var(--wid_vw));
    right: calc(20 / var(--wid_vw));
    width: calc(48 / var(--wid_vw));
    font-size: calc(12 / var(--wid_vw));
  }
  .popup--skip::after {
    width: 1.5vw;
  }
}

/* ##############################################################################

    INDEX

############################################################################## */

.home .header,
.home #wrapper,
.page-special.page-hairmask #wrapper {
  opacity: 0;
  filter: blur(5px);
}
.header.loaded,
#wrapper.loaded,
.page-special.page-hairmask #wrapper.loaded {
  opacity: 1;
  filter: blur(0);
  transition: 1s ease-out;
}
main {
  position: relative;
  z-index: 1;
}

/* container
*************************************************** */
.container {
  overflow: hidden;
}
@media screen and (min-width: 767px) {
  .home .container {
    padding-top: 100px;
  }
}
@media screen and (max-width: 767px) {
  #container-particles {
    top: -13vw;
    left: 0;
    z-index: 1;
    max-height: 600px;
  }
}

/* wrap
*************************************************** */
.wrap {
  position: relative;
  z-index: 1;
  padding-bottom: 500px;
}
.wrap-bg-star {
  position: absolute;
  top: 20vw;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
}
.wrap-bg-star > .bg-star {
  position: relative;
  width: 100%;
}
.wrap-bg-star > .bg-star:nth-child(2n) {
  margin-top: -20%;
}
.subpage .wrap {
  padding-bottom: 640px;
}
.page-special.page-hairmask .wrap {
  padding-bottom: calc(565 / 1280 * 100vw);
}
.wrap::before,
.wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100vw;
  pointer-events: none;
  max-height: 872px;
  background: rgb(9, 43, 149);
  background: linear-gradient(
  180deg,
  rgba(9, 43, 149, 0) 0%,
  rgba(16, 49, 152, 0.2) 25%,
  rgba(16, 49, 152, 0.3) 30%,
  rgba(39, 67, 161, 0.5) 40%,
  rgba(252, 229, 249, 0.1) 46%,
  rgba(252, 229, 249, .5) 71%,
  rgba(252, 229, 249, 1) 100%
  )
}
.page-special.page-hairmask .wrap::before,
.page-special.page-hairmask .wrap::after {
  display: none;
}

@media screen and (max-width: 767px) {
  .wrap {
    padding-bottom: 400px;
  }
  .wrap::before,
  .wrap::after {
    background: linear-gradient(
      180deg,
      rgba(9, 43, 149, 0) 0%,
      rgba(16, 49, 152, 0.2) 5%,
      rgba(16, 49, 152, 0.3) 15%,
      rgba(39, 67, 161, 0.3) 20%,
      rgba(252, 229, 249, 0.7) 60%,
      rgba(252, 229, 249, 0.8) 70%,
      rgba(252, 229, 249, 1) 97.5%,
      rgba(253, 229, 229, 1) 100%
    );
  }
  .subpage .wrap {
    padding-bottom: 400px;
  }
  .page-special.page-hairmask .wrap {
    padding-bottom: 377px;
  }
  .wrap::after {
    height: 170vw;
  }
  .wrap-bg-star {
    top: 220vw;
  }
  .section_ttl img {
    height: 27px;
  }
}

/* hero
*************************************************** */
.hero {
  position: relative;
  margin-bottom: 17vw;
}
.home_hero-bg-star {
  top: 40%;
}
.home_hero-bg-star02 {
  top: -98%;
}
.hero_slide--item {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/810;
  overflow: hidden;
}
.hero_slide--item a {
  display: block;
  width: 100%;
  height: 100%;
}
.hero_slide--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* particles, bg */
#hero-particles-lft,
#hero-particles-rgt,
#popup-particles-lft,
#popup-particles-rgt {
  top: 0;
}
#hero-particles-lft,
#popup-particles-lft {
  left: 0;
}
#hero-particles-rgt,
#popup-particles-rgt {
  right: 0;
  height: 33%;
}
#hero-particles-btm,
#popup-particles-btm {
  top: calc(41.125rem + ((1vw - 12.8px) * 25));
}
#hero-particles-btm {
  right: 0;
}
#popup-particles-btm {
  left: 0;
}

@media screen and (max-width: 767px) {
  .hero {
    margin-bottom: 12rem;
  }
  .home_hero-bg-star {
    top: 75%;
  }
  .hero_slide--item {
    aspect-ratio: 828/1380;
    align-items: flex-start;
  }

}
@media screen and (max-width: 400px) {
  .hero .inner {
    width: 90%;
  }
}

/* teaser
*************************************************** */
.hero_teaser {
  overflow: hidden;
  height: 100vh;
}
.hero_teaser .hero_catch {
  top: 24%;
  left: 10vw;
}
.teaser_txt {
  position: absolute;
  top: 33%;
  left: 17.3vw;
}
.teaser_catch {
  display: block;
  width: 100%;
  margin-bottom: 80px;
}
.teaser_catch--txt {
  display: inline-block;
  line-height: 1;
}
.teaser_date {
  width: 109%;
  margin-bottom: 8px;
  font-size: 478.57%;
  line-height: 1;
  letter-spacing: 0;
}
.teaser_lead {
  width: 109%;
  font-size: 128%;
  line-height: 1.9;
}
.teaser_lead > span {
  display: block;
  letter-spacing: 0.05em;
}
.teaser_lead--name {
  margin-left: 13px;
  margin-right: 5px;
}
.teaser_catch--line {
  position: absolute;
}
.teaser_catch--line01 {
  top: -41px;
  left: 14%;
}
.teaser_catch--line02 {
  left: 50%;
  bottom: -36px;
}
.teaser_catch--line03 {
  left: -24%;
  bottom: -36px;
}
@media screen and (max-width: 767px) {
  .hero_teaser .header {
    display: block;
  }
  .hero_teaser .header--logo {
    width: 70px;
  }
  .teaser_txt {
    top: 16.5%;
    left: 0;
    right: 0;
  }
  .teaser_catch--txt {
    width: 46%;
  }
  .teaser_catch--line01 {
    top: -38px;
    left: 13%;
    width: 87%;
  }
  .teaser_catch--line02 {
    left: 48%;
    bottom: -30px;
    width: 90%;
  }
  .teaser_catch--line03 {
    left: -24%;
    bottom: -28px;
    width: 55%;
  }
  .teaser_catch {
    margin-bottom: 61px;
  }
  .teaser_date {
    font-size: 450%;
    padding-right: 0.5em;
  }
  .teaser_lead {
    width: auto;
  }
  .teaser_lead > span {
    letter-spacing: 0.025em;
  }
  .teaser_lead--name {
    width: 66px;
    margin-left: 12px;
    margin-right: 3px;
  }
}

/* home_topics
*************************************************** */
.home_topics {
  padding-bottom: 10vw;
}
.home_topics .section_ttl {
  margin-bottom: 73px;
}

/* particles,bg */
#topics-particles-rgt {
  bottom: -30%;
  right: 0;
  height: 60%;
}
.home_topics-bg-star {
  top: 23%;
}
@media screen and (max-width: 767px) {
  .home_topics {
    padding-bottom: 61vw;
  }
  .home_topics .section_ttl {
    margin-bottom: 52px;
  }
  .home_topics-bg-star {
    top: 22%;
    opacity: 0.25;
    transform: scale(-1, -1);
  }
}

/* home_concept
*************************************************** */
.home_concept {
  padding-bottom: 19.3vw;
}
.home_concept .section_ttl {
  margin-bottom: 73px;
}

/* particles bg */
#concept-particles-lft {
  top: -18%;
  left: 0;
}
.home_concept-bg-star01 {
  opacity: 0.63;
}
.home_concept-bg-star02 {
  opacity: 0.5;
}
.home_concept-bg-star03 {
  opacity: 0.3;
}
.home_concept-bg-star-c01 {
  opacity: 0.4;
  top: 0;
}
.home_concept-bg-star-c02 {
  top: 26%;
}
.home_concept-bg-star-c03 {
  top: 43%;
}
.home_concept-bg-star-c04 {
  top: 69%;
}
.home_concept-bg-star-c05 {
  top: 45%;
}
.home_concept-bg-star-c06 {
  top: 71%;
}

/* concept--movie */
.concept--movie {
  position: relative;
  width: 100%;
  max-width: 689px;
  margin: 0 auto 32px;
  padding: 16px;
}
.concept--movie a {
  position: relative;
  display: block;
}
.concept--movie a::before {
  content: "";
  display: block;
  padding-top: 74.223%;
}
.concept--movie-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.concept--movie-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  mask-image: url("../images/concept-window.svg");
  mask-repeat: no-repeat;
  mask-position: bottom right;
  mask-size: contain;
  -webkit-mask-image: url("../images/concept-window.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
  -webkit-mask-size: contain;
}
.concept--movie-img,
.concept--movie-img video {
  width: 100%;
  height: 100%;
  max-width: 644px;
  max-height: 478px;
}
.concept--movie-img,
.concept--movie-play {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1.5s ease-out, filter 0.5s linear;
}
.is-active .concept--movie-img,
.is-active .concept--movie-play {
  opacity: 1;
  filter: blur(0);
}
.concept-window-ctr,
.concept-window-open,
.concept-window-close {
  position: absolute;
  pointer-events: none;
}
.ie .concept-window-ctr,
.ie .concept-window-open,
.ie .concept-window-close {
  display: none;
}
.concept-window-open {
  height: 103%;
  max-height: 535px;
  transition: 1s 1s ease-out;
  transform: scaleX(0);
}
.concept-window-close {
  transition: 1s ease-out;
}
.concept-window-ctr {
  top: 0;
  left: 0;
}
.concept-window-open-lft {
  top: 6%;
  left: -165px;
  transform-origin: right center;
}
.concept-window-open-rgt {
  top: 6%;
  right: -150px;
  transform-origin: left center;
}
.concept-window-close {
  transform: scaleX(1);
}
.concept-window-lft-close {
  top: 0;
  left: 0;
  transform-origin: left center;
}
.concept-window-rgt-close {
  top: 0;
  right: 17px;
  transform-origin: right center;
}
.concept--movie.is-active .concept-window-lft-close,
.concept--movie.is-active .concept-window-rgt-close {
  transform: scaleX(0);
}
.concept--movie.is-active .concept-window-open-lft,
.concept--movie.is-active .concept-window-open-rgt {
  transform: scaleX(1);
}

/* concept--ttl */
.concept--ttl-wrap {
  margin-bottom: 122px;
}
.concept--ttl-img,
.concept--ttl span {
  position: relative;
  display: inline-block;
}
.concept--ttl-txt {
  font-style: normal;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(20px);
  transition: opacity 1s ease-out, filter 0.5s linear, transform 1s ease-out;
  transition-delay: 2.5s;
}
.is-active .concept--ttl-txt {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.concept--ttl-img {
  max-width: 514px;
  margin-bottom: 24px;
}
.concept--ttl-line02-line-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 5px;
  stroke-miterlimit: 10;
  stroke-dasharray: 230px;
  stroke-dashoffset: 230px;
  opacity: 0.5;
}
.is-active .concept--ttl-line02-anime {
  animation: lineAct 1s linear forwards;
  animation-delay: 1.7s;
}
.concept--ttl-line02-st1 {
  fill: #fff;
}
.concept--ttl-line03-line-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 5px;
  stroke-miterlimit: 10;
  stroke-dasharray: 230px;
  stroke-dashoffset: 230px;
  opacity: 0.5;
}
.is-active .concept--ttl-line03-anime {
  animation: lineAct 1s linear forwards;
  animation-delay: 1.8s;
}
.concept--ttl-line03-st1 {
  fill: #fff;
}
.concept--ttl-line02,
.concept--ttl-line03 {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
}
.concept--ttl-line02 {
  bottom: -24px;
  right: -120px;
  width: 237px;
  height: 81px;
}
.concept--ttl-line03 {
  bottom: -100px;
  left: -70px;
  width: 203px;
  height: 77px;
}
.concept--ttl-img svg {
  width: 92%;
  height: 100%;
  margin-left: -1%;
}
.concept--ttl {
  position: relative;
  margin-top: -56px;
  font-size: 2.875rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.concept--ttl i {
  font-size: 89%;
}
.concept--txt {
  margin-bottom: 140px;
}
.concept--txt p {
  font-size: 128.571%;
  line-height: 2.5;
  letter-spacing: 0.1em;
}
.concept--txt p:not(:last-child) {
  margin-bottom: 2.5em;
}
.concept--logo {
  margin-top: 24px;
  width: 120px;
}
.concept--sub_ttl {
  margin-bottom: 80px;
  font-size: 260%;
  letter-spacing: 0.1em;
}

/* home_concept--list */
.home_concept--list {
  width: 90%;
  max-width: 810px;
  margin: 0 auto 85px;
}
.home_concept--list li {
  width: calc(33.33% - 20px);
}
.home_concept--list li:nth-child(2) {
  margin-top: 59px;
}
.home_concept--list li:nth-child(3) {
  margin-top: 119px;
}
.home_concept--txt {
  font-size: 128%;
}

/* concept-img */
.concept-img {
  max-height: 175px;
}
.concept01 .concept-img {
  margin-bottom: 4px;
}
.concept01 .concept-img svg {
  margin-top: -21%;
  margin-left: -61%;
  width: 147%;
  height: 110%;
}
.concept02 .concept-img {
  margin-bottom: 18px;
}
.concept02 .concept-img svg {
  margin-top: -42%;
  margin-left: -76%;
  width: 231%;
  height: 156%;
}
.concept03 .concept-img {
  margin-bottom: 25px;
}
.concept03 .concept-img svg {
  margin-top: -12%;
  margin-left: -50%;
  width: 229%;
  height: 164%;
}
@media screen and (max-width: 767px) {
  .home_concept {
    padding-bottom: 57vw;
  }
  .home_concept .section_ttl {
    margin-bottom: 50px;
  }

  /* particles bg */
  #concept-particles-lft {
    top: -4%;
  }
  #concept-particles-rgt {
    display: none;
  }
  .home_concept-bg-star-c01 {
    top: -14%;
  }
  .home_concept-bg-star-c02 {
    top: 9%;
    opacity: 0.67;
  }
  .home_concept-bg-star-c03 {
    top: 36%;
    transform: scale(-1, 1);
  }
  .home_concept-bg-star-c04 {
    top: 61%;
    transform: scale(-1, 1);
  }

  /* concept--movie */
  .concept--movie {
    width: 102%;
    padding: 9px 6px;
    margin-left: -1%;
    margin-bottom: 120px;
  }
  .concept--movie a::before {
    padding-top: 98.519%;
  }
  .concept--movie-img {
    mask-image: url("../images/concept-window-sp.svg");
    -webkit-mask-image: url("../images/concept-window-sp.svg");
  }
  .concept--movie-img video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 140%;
    min-height: 100%;
    transform: translate(-50%, -50%);
  }
  .concept--movie-play {
    top: 52%;
  }
  .concept-window-ctr {
    width: 100%;
    height: 100%;
  }
  .concept-window-open {
    width: 39%;
    top: -9%;
    height: 120%;
  }
  .concept-window-open-lft {
    left: -39%;
  }
  .concept-window-open-rgt {
    right: -39%;
  }
  .concept-window-close {
    width: 51%;
    height: 100%;
  }
  .concept-window-rgt-close {
    right: 0;
  }

  /* concept--ttl */
  .concept--ttl-wrap {
    margin-bottom: 64px;
  }
  .concept--ttl-img {
    max-width: none;
    width: 120%;
    margin-left: -8%;
    margin-bottom: 40px;
  }
  .concept--ttl-img svg {
    width: 100%;
    margin-left: 0%;
  }
  .concept--ttl {
    font-size: 2rem;
    line-height: 1.625;
    letter-spacing: 0.04em;
  }
  .concept--ttl-line02 {
    bottom: -19px;
    right: -23px;
    width: 107px;
    height: 37px;
  }
  .concept--ttl-line03 {
    bottom: -40px;
    left: -20px;
    width: 133px;
    height: 41px;
  }
  .concept--sub_ttl {
    font-size: 216%;
  }
  .concept--txt {
    margin-bottom: 25vw;
  }
  .concept--txt p {
    font-size: 116%;
    letter-spacing: 0.04em;
  }
  .concept--logo {
    margin-top: 20px;
  }
  .concept-img {
    max-height: 31vw;
    margin-bottom: 8px !important;
  }
  .concept01 .concept-img svg {
    margin-top: -22%;
    margin-left: -71%;
    width: 164%;
    height: 128%;
  }
  .concept02 .concept-img svg {
    margin-top: -51%;
    margin-left: -92%;
    width: 257%;
    height: 176%;
  }
  .concept03 .concept-img svg {
    margin-top: -19%;
    margin-left: -53%;
    width: 256%;
    height: 170%;
  }
  .home_concept--list {
    width: 100%;
    margin-bottom: 42px;
  }
  .home_concept--list li:nth-child(1) {
    width: 100%;
    margin-bottom: 40px;
  }
  .home_concept--list li:nth-child(1) .concept-img {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
  .home_concept--list li {
    width: 50%;
    margin-top: 0 !important;
  }
}

/* home_product
*************************************************** */
.home_product {
  padding-bottom: 18vw;
}
.home_product .inner {
  max-width: 1440px;
}
.home_product .section_ttl {
  margin-bottom: 88px;
}

/* particles bg */
#product-particles-lft,
#product-particles-rgt {
  height: 600px;
}
#product-particles-lft {
  top: -30%;
  left: 0;
}
#product-particles-rgt {
  top: -20%;
  bottom: auto;
  right: 0;
  width: 30%;
}
.home_product-bg-star {
  opacity: 0.48;
}
.home_product-bg-star01 {
  top: 20%;
}
.home_product-bg-star02 {
  top: 50%;
}
.home_product-bg-star03 {
  opacity: 0.3;
  top: -16%;
}
.home_product-bg-star04 {
  opacity: 0.3;
  bottom: -6%;
}
.home_product-bg-star05 {
  opacity: 0.3;
  bottom: 40%;
}
.home_product-bg-cloud01 {
  top: 27%;
}

/* product--img */
.product--img {
  margin-bottom: 40px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}

/* product--txt */
.product--txt {
  position: relative;
  padding-top: 32px;
  z-index: 1;
}
.product--catch {
  position: relative;
}
.product--catch.font-jp {
  font-size: 260%;
}
.product--catch-sm {
  font-size: 150%;
  letter-spacing: 0.1em;
  margin-bottom: 0.25em;
}
.product--catch-sm > span::before,
.product--catch-sm > span::after {
  background: url(../images/line.svg) no-repeat;
  width: 35.5px;
  height: 12.56px;
}
.product--catch-sm > span::before {
  bottom: -8px;
  left: -10px;
}
.product--catch-sm > span::after {
  top: -8px;
  right: -10px;
}
.product--catch sup {
  font-size: 1rem;
}
.product--catch--attention {
  padding-top: 16px;
}
.product--catch--attention.absolute {
  position: absolute;
  right: 0;
  left: 0;
}
.product--catch--note {
  display: flex !important;
  font-family: YuGothic, 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
}
.product--catch--note sup {
  font-size: 0.8rem;
}
.product_list .product--catch {
  font-size: 2.5rem;
  letter-spacing: 0.06em;
}
.product--catch > span::before {
  left: -24px;
}
.product--catch > span::after {
  top: 12px;
  right: -24px;
}
.product--catch.product--catch-short > span::before {
  left: -6px;
}
.page-concept .blc-deep_night .product--catch.product--catch-short > span::before {
  left: -56px;
}
.product--catch.product--catch-short > span::after {
  right: -6px;
}
.page-concept .blc-deep_night .product--catch.product--catch-short > span::after {
  right: -80px;
}
.product--name {
  display: block;
  margin-bottom: 8px;
  font-size: 214%;
  line-height: 1;
}
.product--name + span {
  font-weight: 500;
}
.page-product .product--txt .ttl-line {
  margin-bottom: 3em;
}
.page-product .product--txt .ttl-line span::before {
  bottom: -35%;
  left: -46px;
  width: 193px;
  height: 65px;
}
.page-product .product--txt .ttl-line span::after {
  top: -72%;
  right: -30px;
  width: 193px;
  height: 65px;
}
.page-product .product--name.font-en {
  display: block;
  font-size: 1.875rem;
  letter-spacing: 0.1em;
}

/* parts_product */
.home .parts_product {
  padding-bottom: 12rem;
}
#parts_product-particles01 {
  top: -25%;
  right: 0;
  width: 40%;
  height: 100%;
}
#parts_product-particles02 {
  top: 70%;
  right: 0;
  width: 20%;
}
.parts_product--ttl {
  font-size: 3.125rem;
}
.parts_product--wrap {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  z-index: 10;
}
.parts_product--box {
}
.parts_product--list {
  display: flex;
  width: max-content;
  white-space: nowrap;
  gap: 1rem;
}
.parts_product .parts_product--item {
  width: clamp(280px, calc(100vw / 5), 340px);
}
.parts_product .parts_product--item > a:hover {
  opacity: 1;
}
.parts_product--name {
  display: flex;
  flex-direction: column;
  font-size: 1.25rem;
}
.parts_product--name .small {
  font-size: 0.875rem;
}
.parts_product--swiper .swiper-wrapper {
  transition-timing-function: linear;
}


@media screen and (min-width: 768px) {
  .product--blc {
    width: 33.33%;
  }
  .blc-calm_night .product--img,
  .blc-relax_night .product--img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .blc-calm_night .product--img img,
  .blc-relax_night .product--img img,
  .blc-deep_night .product--img img {
    width: auto;
    height: 16.23vw;
    max-height: 350px;
    object-fit: contain;
    object-position: center bottom;
  }
  .home .blc-deep_night .product--img img {
    margin-top: 6px;
  }
  .blc-calm_night .product--img img,
  .blc-deep_night .product--img img {
    max-width: 411px;
  }
  .blc-relax_night .product--img img {
    max-width: 335px;
  }
  .product--blc .btn a {
    width: 96%;
  }
  .product--blc .btn-text {
    min-width: inherit;
  }
  .product_list--box {
    gap: 2.9166vw;
  }
  .product_list--item {
    width: calc((100% - 5.8333vw) / 3);
  }
  .parts_product-bg-star03 {
    top: -56%;
    opacity: 0.3;
    transform: rotate(180deg);
  }
  .parts_product-bg-star04 {
    top: -70%;
    opacity: 0.3;
    transform: rotate(180deg);
  }
  .parts_product-bg-star04 {
    top: -5%;
    opacity: 0.3;
    transform: rotate(180deg);
  }
}
@media screen and (max-width: 1360px) {
  .product--catch.font-jp {
    font-size: 240%;
    letter-spacing: 0.08em;
  }
  .blc-relax_night .product--img img {
    max-width: 259px;
  }
  .blc-calm_night .product--img img,
  .blc-deep_night .product--img img {
    max-width: 306px;
  }
  .blc-deep_night .product--img img {
    height: 18.6vw;
  }
  .blc-calm_night .product--img img,
  .blc-relax_night .product--img img {
    height: 18.23vw;
  }
}
@media screen and (max-width: 1280px) {
  .product--blc {
    width: 50%;
  }
  .product--img {
    padding-top: 40px;
  }
  .blc-calm_night .product--img img,
  .blc-deep_night .product--img img {
    max-width: 411px;
  }
  .blc-relax_night .product--img img {
    max-width: 335px;
  }
  .blc-deep_night {
    padding-top: 56px;
  }
}
@media screen and (max-width: 767px) {
  .home_product {
    padding-bottom: 65vw;
  }
  .home_product .section_ttl {
    margin-bottom: 56px;
  }
  .product--blc:not(:last-child) {
    margin-bottom: 80px;
  }
  .product--blc {
    width: 100%;
  }
  .blc-deep_night {
    padding-top: 0;
  }
  .blc-deep_night .product--img {
    padding-top: 32px !important;
  }

  /* particles bg */
  #product-particles-lft {
    top: 0;
    max-height: 350px;
  }
  #product-particles-rgt {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 30%;
  }
  .home_product-bg-star {
    opacity: 0.6;
  }
  .home_product-bg-star01 {
    top: 0%;
  }
  .home_product-bg-star02 {
    top: inherit;
    bottom: 0%;
  }
  .parts_product .inner .blc-calm_night {
    margin-bottom: 25%;
  }

  /* product--txt */
  .product--txt {
    padding-top: 0;
  }
  .page-product .product--name.font-en {
    margin-bottom: 0.1em;
  }
  .product--catch.product--catch > span::after {
    top: 6px;
  }
  .product--catch.product--catch-short > span::after {
    top: 8px;
  }
  .page-concept .blc-deep_night .product--catch.product--catch-short > span::after {
    right: -39px;
    top: 32px;
  }
  .page-concept .blc-deep_night .product--catch.product--catch-short > span::before {
    left: -22px;
    bottom: -35px;
  }
  .product_list .ttl-bg-calm_night,
  .product_list .ttl-bg-relax_night {
    margin-bottom: 32px;
  }
  .product_list .product--catch-sm {
    font-size: 160%;
  }
  .product--txt-sub {
    margin-bottom: 46px;
  }
  .product--catch {
    margin-bottom: 40px;
  }
  .product--name {
    margin-bottom: 10px;
    font-size: 200%;
  }
  .product--name + span {
    font-size: 100%;
  }
  .page-product .product--name.font-en {
    font-size: 1.25rem;
  }
  .page-product .product--name + span {
    font-size: 0.75rem;
  }
  .product--catch.font-jp {
    font-size: 1.5rem;
  }
  .page-product .product--name {
    font-size: 170%;
    letter-spacing: 0.01em;
  }
  .page-product .product--name + .txt-xs {
    font-size: 116%;
  }
  .page-product .product--txt .ttl-line span::before {
    bottom: -26%;
    left: -34px;
    width: 82px;
    height: 23px;
  }
  .page-product .product--txt .ttl-line span::after {
    top: -58%;
    right: -42px;
    width: 94px;
    height: 26px;
  }

  /* parts_product */
  .blc-calm_night .product--img,
  .blc-relax_night .product--img,
  .blc-deep_night .product--img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .blc-calm_night .product--img img,
  .blc-relax_night .product--img img,
  .blc-deep_night .product--img img {
    width: auto;
    height: 48vw;
    object-fit: contain;
    object-position: center bottom;
  }
  .parts_product-bg-star01 {
    top: -30%;
    opacity: 0.3;
    transform: rotate(180deg);
  }
  .parts_product-bg-star02 {
    top: 60%;
    opacity: 0.3;
  }
  .parts_product .section_ttl {
    margin-bottom: 56px;
  }
  .product--catch sup {
    font-size: 0.625rem;
  }
  .product--catch--note {
    font-size: 0.625rem;
  }
  .product--catch--attention {
    text-align: left;
  }
  .product--catch--attention .product--catch--note {
    align-items: flex-start;
  }
  .product--catch--attention .product--catch--note sup {
    min-width: 2.2em;
  }
  .parts_product--ttl {
    font-size: 2.5rem;
  }
  .parts_product--wrap {
    margin-bottom: 1rem;
  }
  .parts_product .parts_product--item {
    width: 180px;
    margin-bottom: 0;
  }
  .parts_product--name {
    font-size: 0.875rem;
  }
  .parts_product--name .small {
    font-size: 0.75rem;
  }
}

/* home_links
*************************************************** */
.home_links {
  margin-bottom: 7vw;
}
.home_links-bg-star01 {
  opacity: 0.8;
}
.home_links-bg-star01-c01 {
  top: -60%;
  opacity: 0.3;
}
.home_links-bg-star01-c02 {
  top: 6%;
}
.home_links > .inner {
  max-width: 1129px;
}
.home_links .section_ttl {
  margin-bottom: 48px;
}
.home_links-bg-cloud01 {
  top: 40%;
}
.home_links-bg-cloud02 {
  top: 3%;
  left: -20%;
}
.home_links-bg-cloud03 {
  top: 36%;
}
.links--img {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.home_links--faq {
  margin-top: 100px;
}
/* --- parts_shop_faq (トップ以外) --- */
.parts_shop_faq {
  padding-top: 5.625rem;
  padding-bottom: 4rem;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.parts_shop_faq .home_links-bg-star01-c01 {
  top: -50%;
}
.parts_shop_faq .home_links-bg-star02-c01 {
  top: 6%;
}
.parts_shop_faq .home_links--faq {
  margin-top: 0;
}



@media screen and (max-width: 767px) {
  .home_links {
    margin-bottom: 6.25rem;
  }
  .home_links .section_ttl {
    margin-bottom: 30px;
  }
  .home_links-bg-star01-c01 {
    top: -56%;
  }
  .home_links-bg-star02 {
    opacity: 0.4;
  }
  .home_links-bg-star02-c01 {
    top: 2%;
  }
  .home_links-bg-star02-c02 {
    top: 65%;
    transform: scale(1, -1);
  }
  .home_links--shop_list .section_ttl img {
    height: 21px;
  }
  .home_links--faq {
    margin-top: 19vw;
  }
  .home_links--faq .section_ttl img {
    height: 28px;
  }
}

/* home_news
*************************************************** */
.home_news .section_ttl {
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .home_news .section_ttl img {
    height: 22px;
  }
  .home_news .section_ttl {
    margin-bottom: 8px;
  }
}

/* ##############################################################################

    PAGE

############################################################################## */

/* common-particles
*************************************************** */
#common-particles02 {
  right: 0;
}
.page-shampoo_treatment #common-particles01,
.page-shampoo_treatment #common-particles02,
.page-hairoil #common-particles01,
.page-hairoil #common-particles02 {
  display: none;
}
@media screen and (max-width: 767px) {
  .page-shop .particles,
  .post-type-news .particles {
    display: none;
  }
}

/* concept
*************************************************** */
/* concept_intro */
.concept_intro {
  z-index: 1;
  margin-bottom: 18vw;
}
.concept_intro .concept--ttl-img svg {
  width: 99.5%;
  margin-top: -6%;
  margin-left: -15%;
}
.concept_intro-bg-star01 {
  opacity: 0.3;
}
.concept_intro-bg-star02 {
  opacity: 0.5;
}
.concept_intro-bg-star02-c01 {
  top: 15%;
}
.concept_intro-bg-star02-c02 {
  top: 51%;
}
.concept_intro-bg-cloud01 {
  top: 80%;
}

/* concept_point */
.concept_point-bg-star01 {
  top: -45%;
}
.concept_point-bg-star02 {
  top: 25%;
}
#concept-particles02 {
  top: -32%;
  left: 0;
  width: 30%;
}
#concept-particles03 {
  top: -18%;
  right: 0;
}
#concept_point-particles01,
#concept_point-particles03 {
  top: -10%;
  height: 500px;
  left: 0;
} 
#concept_point-particles02,
#concept_point-particles04 {
  top: -10%;
  height: 500px;
  right: 0;
}
.concept_point {
  padding-bottom: 11.872rem;
  margin-bottom: 5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.concept_point--mainttl {
  position: relative;
  z-index: 1;
  font-size: 2.5rem;
}
.concept_point--mainttl .sub {
  display: block;
  font-size: 2.875rem;
}
.concept_point--lead {
  margin-bottom: 150px;
}
.concept_point--cont {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}
.concept_point--cont:not(:last-child) {
  margin-bottom: 100px;
}
.concept_point--img {
  position: relative;
}
.concept_point--img .num {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  font-size: 4rem;
}
.concept_point--txt {
  flex: 1;
}
.concept_point--ttl {
  display: flex;
  flex-direction: column;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}
.concept_point--ttl .sub {
  font-size: 1.5rem;
}
.concept_point--txt p {
  font-size: 1.125rem;
}
.concept_point--txt .txt-attention {
  margin-top: 16px;
}

@media screen and (max-width: 767px) {
  /* concept_intro */
  #concept-particles01 {
    top: auto;
    width: 100%;
    bottom: -14%;
    height: 16%;
  }
  .concept_intro-bg-star02-c01 {
    top: 25%;
    transform: scale(-1, 1);
  }
  .concept_intro-bg-star02-c02 {
    top: 66%;
    transform: scale(1, -1);
  }
  .concept_intro-bg-cloud01 {
    top: 90%;
    left: auto;
    right: 0;
    transform: scale(-1, 1);
  }
  .concept_intro {
    margin-bottom: 53vw;
  }
  .concept_intro .concept--txt {
    margin-bottom: 18vw;
  }
  .concept_intro .concept--txt p {
    letter-spacing: 0;
    line-height: 2.55;
  }
  .concept_intro .concept--ttl-img svg {
    width: 92.5%;
    margin-left: 0;
  }

  /* concept_point */
  #concept_point-particles01 {
    top: -40%;
    height: 70%;
    max-height: 500px;
  }
  #concept_point-particles03 {
    top: -54vw;
    left: 0;
    width: 60%;
    height: 90vw;
  }
  .concept_point {
    padding-bottom: 7.5rem;
    margin-bottom: 5rem;
  }
  .concept_point--mainttl {
    font-size: 1.875rem;
    margin-bottom: 6rem;
    white-space: nowrap;
  }
  .concept_point--mainttl img {
    height: 27px;
  }
  .concept_point--mainttl .sub {
    display: block;
    font-size: 2rem;
  }
  .concept_point--lead {
    margin-bottom: 100px;
  }
  .concept_point--cont {
    flex-direction: column;
    gap: 1rem;
  }
  .concept_point--cont:not(:last-child) {
    margin-bottom: 7.5rem;
  }
  .concept_point--img .num {
    position: absolute;
    top: 0;
    left: 0;
    translate: -25% -50%;
    font-size: 4.68754rem;
    line-height: 1;
  }
  .concept_point--ttl {
    align-items: center;
    font-size: 1.875rem;
    margin-bottom: 1rem;
  }
  .concept_point--ttl .sub {
    font-size: 1.125rem;
  }
  .concept_point--txt p {
    font-size: 0.875rem;
  }
  .concept_point--txt .txt-attention {
    margin-top: 2.5rem;
  }
  
}

/* product
*************************************************** */
/* --- product_group --- */
.product_group {
  padding-bottom: 6.25rem;
}
.product_group:not(:last-of-type) {
  margin-bottom: 5.625rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
/* --- product_type--ttl --- */
.product_type--ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: 500;
}
.product_type--ttl .font-en {
  font-size: 3.125rem;
  font-weight: 400;
}

section + .product_list--st:not(:last-child) {
  margin-bottom: 100px;
}
.product_list--st-deep_night .product--catch--note {
  padding-top: 24px;
}
.product_list--st-deep_night .product--catch--note sup {
  margin-right: 8px;
}
.product_bnr--ttl {
  font-size: 2.5rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  margin-bottom: 64px;
}
.product_bnr--logo {
  width: auto;
  height: 32px;
  padding: 0 16px;
  vertical-align: baseline;
}
.product_bnr--box {
  gap: 2.5vw;
}
.product_bnr--item {
  width: calc((100% - 2.5vw) / 2);
  max-width: 480px;
}
.product_bnr--item img {
  margin-bottom: 16px;
}
.product_bnr--item p {
  display: flex;
  justify-content: center;
  font-size: 1.125rem; /* 18px */
}
.product_bnr--item p span {
  position: relative;
  padding: 0 8px;
}
.product_bnr--item p span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 100%;
  height: 5px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: skewX(45deg);
  transition: width 0.4s ease-out;
}
.product_bnr--item:hover p span::after {
  width: 10%;
}
.product_links > .inner {
  max-width: 896px;
}
.product_list-bg-star {
  top: -30%;
  z-index: 0;
  opacity: 0.3;
}
.product_list-bg-star02 {
  opacity: 0.6;
}
.product_list-deep_night .product_list-bg-star02 {
  opacity: 0.3;
}
.product_list-bg-star-c01 {
  top: -65%;
}
.product_list-bg-star-c02 {
  top: 40%;
}
.product_list-bg-cloud01 {
  top: -20%;
  left: 25%;
  transform: translateX(-50%);
}
.product_list-bg-cloud02 {
  top: 80%;
  left: 68%;
  transform: translateX(-50%);
}
.product_list--box {
  position: relative;
  z-index: 10;
}
.product_list--item {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  text-align: center;
  z-index: 1;
}
.product_list--item a {
  display: block;
}
.product_list--item > a:hover {
  opacity: 0.7;
}
.product_list--item a .btn-text {
  min-width: inherit;
  min-height: 58px;
}
.product_list--item > p {
  line-height: 1.2;
  margin-bottom: 32px;
}
.product_list--img {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(100% - 16px);
  aspect-ratio: 1 / 1;
  margin-bottom: 40px;
  margin-inline: auto;
}
.product_list--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product_list--img img[src*="product-hairoil"] {
  max-height: 200px;
}
.product_list--img img[src*="product-refill"] {
  max-height: 215px;
}
.product_list--img img[src*="deep_night/product-mask"] {
  width: 105px;
  height: auto;
}
.product_list--img img[src*="deep_night/product-hairoil"] {
  width: 100px;
  height: auto;
  max-height: fit-content;
}
.product_list--img img[src*="skincare/product-skin-moist-cream"],
.product_list--img img[src*="skincare/product-skin-clear-cream"] {
  width: 120px;
  height: auto;
  max-height: fit-content;
}

.product_list--img.limited::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: url(/wp/wp-content/themes/original_theme/images/product/icon-limited.png);
  background-size: contain;
}
.product_list--name {
  flex-grow: 1;
  margin-bottom: 0.5em;
  font-size: 1.125rem;
  line-height: 1.6;
}
.product_list--txt {
  margin-top: 1em;
}
.product--price {
  font-size: 171%;
}
.product--price i {
  font-size: 58%;
}
.product--amount {
  font-size: 114%;
}
.product_list--item .txt-attention {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  translate: 0 100%;
}

/* product_links */
.product_links--ttl {
  margin-bottom: 43px;
  font-size: 171%;
}
#product-particles01,
#product-particles02 {
  top: -20%;
  width: 34%;
  height: 70%;
}
#product-particles01 {
  left: 0;
}
#product-particles02 {
  right: 0;
}

/* --- product_modal--list --- */
.product_modal--list {
  margin-bottom: 200px;
}
.product_modal-bg-star01 {
  opacity: 0.63;
}
.product_modal-bg-star01-c01 {
  top: -50%;
}
.product_modal--list .img-shampoo img {
  max-height: 212px;
}
.product_modal--list .img-refill img {
  max-height: 215px;
}
.product_modal--list .img-refill-big img {
  max-height: 265px;
}
.product_modal--list .product_list--name {
  justify-content: center;
}
.icon-online {
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 85px;
  height: 85px;
  gap: 4px;
  padding-top: 2px;
  color: #020b5a;
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1;
  border-radius: 50vw;
  background-image: linear-gradient(#fff398 0%, #edd178 43.35%, #bca045 75.07%, #c6be81 100%);
}
.icon-online small {
  font-size: 0.813rem; /* 13px */
  letter-spacing: -0.1em;
}

/* --- product_modal --- */
.product_modal--wrap {
  display: none;
}
.product_modal--box {
  position: relative;
  width: 660px;
  padding-top: 56px;
  padding-bottom: 56px;
  background-color: #092b96;
  background-image: linear-gradient(
    180deg,
    rgba(9, 43, 149, 0) 0%,
    rgba(16, 49, 152, 0.2) 5%,
    rgba(16, 49, 152, 0.3) 15%,
    rgba(39, 67, 161, 0.3) 20%,
    rgba(252, 229, 249, 0.5) 90%,
    rgba(252, 229, 249, 0.6) 100%
  );
}
.product_modal--box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(/wp/wp-content/themes/original_theme/images/common/bg-modal.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.product_modal--item {
  position: relative;
  z-index: 1;
}
.product_modal--item > .inner {
  max-width: 500px;
}
.product_modal--item .product--name {
  font-size: 2.5rem; /* 40px */
}
.product_modal--item .product--name + span {
  font-size: 1.25rem; /* 20px */
}
.product_modal--info {
  gap: 24px;
}
.product_modal--image {
  background-color: #fff;
}
#item-refill-shampoo-big .product_modal--image::before,
#item-refill-treatment-big .product_modal--image::before {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 45px;
  aspect-ratio: 1;
  background-image: url(/wp/wp-content/themes/original_theme/images/product/icon-online.png);
  background-size: contain;
}
.product_modal--dtl .product--type {
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  font-weight: 600;
}
.product_modal--linkttl {
  font-size: 1.25rem; /* 20px */
}
.product_modal--linkttl i {
  margin-right: 0.5em;
}
.product_modal--linkttl i img {
  vertical-align: baseline;
}
.product_modal .icon-online {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 54px;
  height: 54px;
  gap: 2px;
  padding-top: 2px;
  font-size: 0.875rem; /* 14px */
  letter-spacing: 0.15em;
}
.product_modal .icon-online small {
  font-size: 0.625rem; /* 10px */
  letter-spacing: -0.2em;
}
.page-shampoo_treatment #cboxLoadingGraphic,
.page-shampoo_treatment #cboxLoadingOverlay {
  display: none !important;
}
.page-shampoo_treatment #cboxOverlay {
  background: transparent;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: all 0.5s ease-in-out;
}
.page-shampoo_treatment #cboxOverlay::before {
  background: transparent;
}
.page-shampoo_treatment #cboxContent {
  background: transparent;
}
.page-shampoo_treatment #cboxClose {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  background-color: #fff;
  border-radius: 50vw;
  z-index: 10;
  translate: 40% -40%;
  cursor: pointer;
  transition: opacity 0.5s ease-in-out;
  display: none !important;
  opacity: 0 !important;
}
.page-shampoo_treatment.modal-active #cboxClose {
  display: block !important;
  opacity: 1 !important;
}
.page-shampoo_treatment #cboxClose:hover {
  background-color: #ccc;
}
.page-shampoo_treatment #cboxClose::before,
.page-shampoo_treatment #cboxClose::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2px;
  height: 50%;
  background-color: #000;
  transform: inherit;
}
.page-shampoo_treatment #cboxClose::before {
  rotate: 45deg;
}
.page-shampoo_treatment #cboxClose::after {
  rotate: -45deg;
}

@media print, screen and (min-width: 768px) {
  .product_list--name,
  .product_list--txt {
    display: flex;
    flex-direction: column;
  }
  .product_list--name {
    justify-content: left;
  }
  .product_list--txt {
    height: 3em;
  }
  .product_list--txtarea .product_list--txt {
    height: 5em;
  }
  .product_bnr {
    padding-top: 160px;
  }
}
@media screen and (max-width: 767px) {
  .product_type--ttl {
    margin-bottom: 1.75rem;
    font-size: 0.875rem;
  }
  .product_type--ttl .font-en {
    font-size: 2.5rem;
  }
  .product_list--st + .product_list--st {
    padding-top: min(calc(88 / var(--wid_vw)), 88px);
  }
  .product_list-deep_night {
    padding-top: 2.5rem;
  }
  .product_list--box {
    gap: 20px;
  }
  .product_list--item {
    width: calc((100% - 20px) / 2);
    margin-bottom: 32px;
  }
  .product_list--item a .btn-text {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .product_list--item > p {
    margin-bottom: 20px;
  }
  .product_list--img.limited::before {
    width: 3.125rem;
    height: 3.125rem;
  }
  .product_list--item .icon-online {
    position: absolute;
    left: -10px;
    bottom: -18px;
    width: 53px;
    height: 53px;
    padding: 0;
    background: transparent;
  }
  .product_list--name {
    font-size: 0.875rem;
    letter-spacing: 0;
  }
  .product_list--bottle {
    margin-bottom: 32px !important;
  }
  .product--price {
    font-size: 1.125rem; /* 18px */
  }
  .product--price i {
    font-size: 0.625rem; /* 10px */
  }
  .product--info {
    margin-bottom: 8px;
  }
  .product--amount {
    font-size: 0.625rem; /* 10px */
  }
  .product_list--txt {
    margin-bottom: 16px;
  }
  .product_list--cont {
    margin-bottom: 0;
  }
  .product_bnr {
    padding-top: 80px;
  }
  .product_bnr--ttl {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 40px;
  }
  .product_bnr--logo {
    height: 21px;
    padding: 0 12px;
  }
  .product_bnr--box {
    gap: 40px;
  }
  .product_bnr--item {
    width: 100%;
  }
  .product_bnr--item p {
    font-size: 0.875rem; /* 14px */
  }
  .product_links--ttl {
    margin-bottom: 24px;
  }
  .product_links {
    padding-top: min(calc(140 / var(--wid_vw)), 140px);
  }
  .product_links li:not(:last-child) {
    margin-bottom: 70px !important;
  }

  /* product_list--st */
  .product_list--st.btn:not(:last-child) {
    margin-bottom: 22vw;
  }
  .product_links-bg-star01 {
    top: -80%;
    opacity: 0.2;
    transform: scale(1, -1);
  }
  .product_list--img {
    width: 140px;
    margin-bottom: 20px;
    margin-inline: auto;
  }
  .product_list--img img[src*="product-hairoil"] {
    max-height: 110px;
  }
  .product_list--img img[src*="product-hairmist"] {
    max-height: 138px;
  }
  .product_list--img img[src*="deep_night/product-mask"] {
    max-width: 80px;
  }
  .product_list--img img[src*="deep_night/product-hairoil"] {
    max-height: 140px;
  }
  .product_list--img img[src*="skincare/product-skin-moist-cream"],
  .product_list--img img[src*="skincare/product-skin-clear-cream"] {
    width: 80px;
    height: auto;
    max-height: fit-content;
  }

  /* --- product_modal--list --- */
  .product_modal--list {
    margin-bottom: 100px;
  }
  .product_modal--list > .inner {
    width: 86%;
  }
  .product_modal--list .product_list--item {
    text-align: center;
  }
  .icon-online {
    left: -10px;
    bottom: -10px;
    width: 56px;
    height: 56px;
    font-size: 0.875rem; /* 14px */
    gap: 2px;
  }
  .icon-online small {
    font-size: 0.625rem; /* 10px */
    letter-spacing: -0.15em;
  }
  .icon-online img {
    width: 100%;
    height: 100%;
  }

  /* --- product_modal --- */
  .product_modal {
    width: calc(100vw - 40px);
  }
  .product_modal--box {
    position: relative;
    width: 100%;
    padding: 40px 20px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .product_modal--box::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(/wp/wp-content/themes/original_theme/images/common/bg-modal-sp.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  /* --- product_modal--item --- */
  .product_modal--item > .inner {
    max-width: inherit;
    width: 100%;
  }
  .product_modal--item .product--name {
    font-size: 1.4375rem; /* 23px */
  }
  .product_modal--item .product--name + span {
    font-size: 0.875rem; /* 14px */
  }
  .product_modal--info {
    gap: 16px;
  }
  .product_modal--image {
    min-width: 110px;
  }
  #item-refill-shampoo-big .product_modal--image::before,
  #item-refill-treatment-big .product_modal--image::before {
    width: 32px;
  }
  .product_modal--linkttl {
    font-size: 0.875rem; /* 14px */
  }
  .product_modal--dtl .product--type {
    font-size: 0.875rem; /* 14px */
  }
  .product_modal .btn {
    width: 48.5%;
    margin-right: 3%;
    margin-left: 0;
  }
  .product_modal .btn-text {
    height: 50px;
    min-height: inherit;
    font-size: 0.813rem; /* 13px */
    padding: 0 30px 0 14px;
  }
  .product_modal .btn-text i {
    font-size: 0.813rem; /* 13px */
  }
  .product_modal .icon-online {
    position: absolute;
    top: -32px;
    left: -12px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
  }
  .page-shampoo_treatment #cboxClose {
    width: 30px;
    height: 30px;
  }
  .product_list--st-deep_night .product--catch--note {
    padding-top: 8px;
  }
}

/* shampoo_treatment
*************************************************** */
#product-st-particles01 {
  right: 0;
  top: -30%;
  height: 70%;
  width: 50%;
}
#product-st-particles02 {
  left: -20%;
  top: -20%;
  height: 70%;
  width: 50%;
}
.product_hero-bg-star {
  top: 74%;
  z-index: 1;
  opacity: 0.3;
}
.page-deep_night .product_hero-bg-star {
  top: 88%;
  opacity: 0.2;
}

/* product_hero */
.product_hero {
  z-index: 0;
  height: 100vh;
  max-height: 900px;
  min-height: 800px;
  margin-bottom: 13vw;
  padding-top: 230px;
}
.product_hero::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: calc((0.0625rem + ((1vw - 12.5px) * 23.7313)) * -1);
  left: 0;
  right: 0;
  padding-top: 67.968%;
  min-height: 650px;
  background-repeat: no-repeat;
  background-size: cover;
  mask-image: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0) 20%);

  --bg-grad: linear-gradient(0deg, rgba(9, 43, 150, 1) 0%, rgba(9, 43, 150, 0) 20%, rgba(9, 43, 150, 0) 100%);
}
.shampoo_treatment .product_hero::before {
  background-image: url(../images/product/calm_night/shampoo_treatment/product-calm_night-st.webp);
}
.page-relax_night .shampoo_treatment .product_hero::before {
  background-image: var(--bg-grad),
                    url(../images/product/relax_night/shampoo_treatment/product-relax_night-st.webp);
}
.page-deep_night .shampoo_treatment .product_hero::before {
  background-image: var(--bg-grad),
                    url(../images/product/deep_night/shampoo_treatment/product-deep_night-st.webp);
}
.hairoil .product_hero::before {
  background-image: url(../images/product/calm_night/hairoil/product-calm_night-hairoil.jpg);
}
.page-relax_night .hairoil .product_hero::before {
  background-image: var(--bg-grad),
                    url(../images/product/relax_night/hairoil/product-relax_night-hairoil.jpg);
}
.page-deep_night .hairoil .product_hero::before {
  background-image: var(--bg-grad),
                    url(../images/product/deep_night/hairoil/product-deep_night-hailoil.jpg);
}
.hairmask .product_hero::before {
  background-image: var(--bg-grad),
                    url(../images/product/calm_night/hairmask/product-calm_night-hairmask.jpg);
}
.hairmist .product_hero::before {
  background-image: var(--bg-grad),
                    url(../images/product/calm_night/hairmist/product-calm_night-hairmist.png);
}
.page-relax_night .hairmask .product_hero::before {
  background-image: var(--bg-grad),
                    url(../images/product/relax_night/hairmask/product-relax_night-hairmask.jpg);
}
.page-deep_night .hairmask .product_hero::before {
  background-image: var(--bg-grad),
                    url(../images/product/deep_night/hairmask/product-deep_night-hairmask.jpg);
}
/* --- bodysoap --- */
.product_hero.bodysoap-calm_night::before {
  background-image: var(--bg-grad),
                    url(../images/product/calm_night/bodysoap/hero.jpg);
}
.product_hero.bodysoap-relax_night::before {
  background-image: var(--bg-grad),
                    url(../images/product/relax_night/bodysoap/hero.jpg);
}
/* --- bodymilk --- */
.product_hero.bodymilk-calm_night::before {
  background-image: var(--bg-grad),
                    url(../images/product/calm_night/bodymilk/hero.jpg);
}
.product_hero.bodymilk-relax_night::before {
  background-image: var(--bg-grad),
                    url(../images/product/relax_night/bodymilk/hero.jpg);
}
/* --- bathtablet --- */
.product_hero.bathtablet-calm_night::before {
  background-image: var(--bg-grad),
                    url(../images/product/calm_night/bathtablet/hero.jpg);
}
.product_hero.bathtablet-relax_night::before {
  background-image: var(--bg-grad),
                    url(../images/product/relax_night/bathtablet/hero.jpg);
}
/* --- skincare --- */
.product_hero.skincare-serum_moist::before {
  background-image: var(--bg-grad),
                    url(../images/product/skincare/serum/moist/hero.jpg);
}
.product_hero.skincare-serum_clear::before {
  background-image: var(--bg-grad),
                    url(../images/product/skincare/serum/clear/hero.jpg);
}
.product_hero.skincare-cream_moist::before {
  background-image: var(--bg-grad),
                    url(../images/product/skincare/cream/moist/hero.jpg);
}
.product_hero.skincare-cream_clear::before {
  background-image: var(--bg-grad),
                    url(../images/product/skincare/cream/clear/hero.jpg);
}


.product_hero--cont {
  position: relative;
  z-index: 1;
  width: 52%;
  min-width: 560px;
  margin-left: auto;
  padding-right: 10%;
}
.product_hero--ttl {
  position: relative;
  display: block;
  margin-bottom: 7px;
  font-size: 171.42%;
}
.product_hero--ttl.ttl-line > span::before {
  bottom: -27px;
  left: -20%;
  width: 86px;
  height: 24px;
}
.product_hero--ttl.ttl-line > span::after {
  top: -34px;
  right: -9%;
  width: 127px;
  height: 35px;
}
.product_hero--ttl-lg {
  display: block;
  font-size: 300%;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
.product_hero--ttl-lg i {
  font-size: 76%;
}
.product_hero--lead {
  margin-bottom: 26px;
  line-height: 1.85;
}
.product_hero--txt p {
  text-align: justify;
  line-height: 2;
}
.product_hero--btn {
  max-width: 700px;
}
.product_hero--btn .btn {
  margin-right: 16px;
}

/* product_buy */
.product_buy {
  margin-bottom: min(calc(150 / var(--wid_vw)), 150px);
}
.product_buy .inner {
  position: relative;
  border-radius: 10px;
  padding: 60px 40px;
  overflow: hidden;
  z-index: 1;
}
.product_buy .inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background-blend-mode: multiply;
  background-color: rgba(9, 43, 150, 0.25);
  z-index: -1;
}
.product_buy--ttl {
  font-size: 2rem; /* 32px */
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.44;
  letter-spacing: 0.1em;
}
.product_buy--ttl::before,
.product_buy--ttl::after {
  content: "";
  display: block;
  width: 58.3px;
  aspect-ratio: 58.3/20.2;
  background: url(../images/product-line.svg) no-repeat;
  background-size: contain;
}
.product_buy--ttl::before {
  margin-right: 15px;
}
.product_buy--ttl::after {
  margin-left: 15px;
}
.tab--list li {
  width: 67px;
  opacity: 0.19;
  border-radius: 5px;
  border: solid 1px #fff;
  background-image: linear-gradient(to bottom, rgba(9, 43, 150, 0.82), rgba(9, 43, 150, 0));
  padding: 0.2em;
  line-height: 1.4;
  letter-spacing: normal;
  cursor: pointer;
  transition: all 0.4s ease-out;
}
.tab--list li:not(:last-child) {
  margin-right: 10px;
}
.tab--list li:hover,
.tab--list li.current {
  opacity: 0.75;
}
.product_buy--blc {
  overflow-x: auto;
  overflow-y: hidden;
}
.product_buy--blc.has_scroll {
  padding-bottom: 64px;
}
.product_buy--blc::-webkit-scrollbar {
  width: 4px;
}
.product_buy--blc::-webkit-scrollbar:horizontal {
  height: 4px;
}
.product_buy--blc::-webkit-scrollbar-track {
  background-color: #020b5a;
  border-radius: 4px;
  border: none;
}
.product_buy--blc::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: none;
}
.product_buy--list li,
.product_buy--list .txtarea {
  display: flex;
  flex-direction: column;
}
.product_buy--list li {
  min-width: 200px;
}
.product_buy--list .txtarea {
  align-items: center;
  flex: 1;
  text-align: center;
}
.product_buy--list li:not(:last-child) {
  margin-right: 24px;
}
.product_buy--img {
  margin-bottom: 12px;
}
.product_buy--list .product--price {
  font-size: 0.875rem; /* 14px */
}
.product_buy--list .product--amount {
  font-size: 0.5rem; /* 8px */
}
.product_buy--list .btn-buy {
  width: 196px;
  margin-top: auto;
}
.product_buy--list .btn-buy a {
  display: block;
}
.product_buy--list .btn-text {
  font-size: 0.75rem; /* 12px */
  min-height: 34px !important;
}
.product_buy--list .btn-buy .btn-text {
  min-width: 100%;
}
.product_buy--list .btn-buy .btn-text i {
  height: 20px;
}
.product_buy--list .btn-buy .btn-text img {
  width: 13px;
}

/* product_info */
.product_info {
  margin-bottom: 14vw !important;
}
.product_info-bg-star01 {
  top: 5%;
  opacity: 0.2;
}
.product_info-bg-star02 {
  top: 33%;
  opacity: 0.2;
}
.product_info-bg-star03 {
  top: 75%;
  opacity: 0.2;
}
.product_info--ttl.ttl-line > span::before {
  bottom: -39px;
  left: -13%;
}
.product_info--ttl.ttl-line > span::after {
  right: -16%;
}
.page-hairmask .product_info--ttl.ttl-line > span::before {
  bottom: 12px;
}
.page-hairmask .product_info--ttl.ttl-line > span::after {
  top: -40px;
  right: -10%;
}
.page-deep_night.page-hairoil .product_info--ttl.ttl-line > span::after {
  top: 16px;
}
.page-deep_night.page-hairmask .product_info--ttl.ttl-line > span::before {
  bottom: -50px;
  left: -27%;
}
.product_info--ttl {
  font-size: 2.875rem;
}
.page-relax_night.page-shampoo_treatment .product_info--ttl .txt-sm-r {
  position: absolute;
  right: 0;
  bottom: -1em;
  font-size: 10px;
}
.product_info--ttl .subttl {
  font-size: 1.875rem; /* 30px */
}
.product_info--ttl .special_care {
  font-size: 1.875rem; /* 30px */
}
.product_info--ttl .special_care img {
  margin-right: 0.75rem; /* 12px */
}
.product_info--ttl-sub {
  font-size: 2rem; /* 32px */
}
.product_info--intro {
  position: relative;
  margin-bottom: min(calc(246 / var(--wid_vw)), 246px);
  padding-right: 48%;
  line-height: 2.5;
}
.product_info--intro .txt-attention {
  line-height: 1.6;
}
.product_info--txt-img li {
  position: relative;
  padding: 5px 8px;
}
.product_info--txt-img li:not(:last-child) {
  margin-right: 16px;
}
.product_info--txt-img li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 92px;
  height: 89px;
  margin: auto;
  pointer-events: none;
  background: url(../images/product/product_nightcare--frame.svg) center no-repeat;
  background-size: contain;
}
.product_info--imgarea {
  position: absolute;
  top: 50%;
  right: 0;
  padding: 18px 16px;
  transform: translateY(-47%);
}
.product_info--window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.product_info--cont:not(:last-child) {
  margin-bottom: 15vw;
}
.product_info--cont-ttl {
  font-size: 242%;
}
.product_info--attention {
  text-align: center;
  width: 93%;
  margin: 25px auto 0;
}
.product_info--attention p {
  padding: 10px 0;
  font-size: 12px;
}
.product_info--flex {
  display: flex;
  align-items: center;
  gap: 24px;
}
.product_info--flex .txtarea {
  flex: 1;
}
.product_info--flex .product_info--subttl {
  font-size: 1.25rem;
  line-height: 1.6;
}
.product_info--subtxt {
  font-size: 1rem;
  line-height: 2;
}
.product_info--bathtablet_list {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.product_deco-ciecle {
  position: relative;
  padding: 8px;
  background: url(../images/product/product_nightcare--frame.svg) center no-repeat;
  background-size: contain;
}

/* product_point */
.product_point .inner {
  display: grid;
  gap: 1rem;
  padding: 3rem;
  padding-top: 0;
}
.product_point .inner::before {
  content: '';
  position: absolute;
  inset: -1rem;
  border: 1px solid #fff;
  top: 4.1rem;
  border-top: none;
  pointer-events: none;
}
.product_point .product_info--ttl {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.product_point .product_info--ttl > span:not([class]) {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: -4rem;
  gap: 1rem;
}
.product_point .product_info--ttl > span:not([class])::before,
.product_point .product_info--ttl > span:not([class])::after {
  content: '';
  border-bottom: 1px solid #fff;
  flex-grow: 1;
}
@media screen and (max-width: 767px) {
  .product_point .inner {
    padding: 0;
  }
  .product_point .product_info--ttl > span:not([class]) {
    margin-inline: -1rem;
  }
  .product_point .inner::before {
    top: 3.5rem;
  }
  .product_point .product_info--ttl {
    font-size: 1.5rem;
  }
}
/* pc */
@media screen and (min-width: 768px) {
  .product_point .inner {
    display: grid;
    align-items: center;
    gap: 0 2rem;
    grid-template-areas:
      "ttl ttl"
      "img ttl-sub"
      "img txt"; 
  }
  .product_point .product_info--ttl { grid-area: ttl; }
  .product_point--img { grid-area: img; }
  .product_point--ttl-sub { grid-area: ttl-sub; }
  .product_point .txtarea { grid-area: txt; }

}

/* product_info_st--cont01 */
.product_info_st--cont01 .contents {
  display: grid;
  gap: 1.5rem;
}
.product_info_st--cont01 .product_info--ttl-sub {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
}


@media screen and (max-width: 767px) {
  .product_info--intro-reverse .product_info--ttl {
    font-size: 240%;
  }
  .page-deep_night.page-hairmask .product_info--ttl.ttl-line > span::before {
    bottom: -38px;
    left: -20%;
  }
}
@media screen and (min-width: 768px) {
  .product_info--intro-reverse {
    padding-left: 50%;
    padding-right: 0%;
  }
  .product_info--intro-reverse .product_info--imgarea {
    position: absolute;
    top: 50%;
    right: inherit;
    left: 0;
    padding: 18px 16px;
    transform: translateY(-47%);
  }
  .product_info--attention p {
    font-size: 14px;
  }
}
.product_info--attentionLine {
  position: relative;
  width: 100%;
  display: block;
  background: #fff;
  height: 1px;
}
.product_info--attentionLine:before {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -4.5px;
  display: block;
  width: 9px;
  height: 9px;
  background: url(../images/common/star02.svg);
  background-size: contain;
}
.product_info--attentionLine:after {
  content: "";
  position: absolute;
  left: -16px;
  bottom: -4.5px;
  display: block;
  width: 9px;
  height: 9px;
  background: url(../images/common/star02.svg);
  background-size: contain;
}

/* ▲ 0901追加分 */

.product_info--cont-ttl span {
  display: block;
}
.product_info--cont-ttl .fz-24 {
  margin-bottom: 0.5em;
}

/* product_info--cont01 */
.product_info--cont01-bg-star01 {
  opacity: 0.63;
}
.product_info--cont01-bg-star01-c01 {
  top: -5%;
}
.product_info--cont01-bg-star01-c02 {
  top: 88%;
}
.product_info--cont01 .product_info--cont01-bg-cloud01 {
  top: 55%;
  left: auto;
  right: -20%;
  transform: scale(-1, 1);
}
.product_info--cont-img01 {
  flex-shrink: 0;
  margin-top: 2%;
}
.product_info--cont-txt01 {
  counter-reset: number;
  width: 50%;
  margin-left: 3%;
}
.product_info--cont-txt01 li p {
  line-height: 2;
  letter-spacing: 0.05em;
}
.product_info--cont-txt01 li p:not([class]) {
  line-height: 1.8;
}
.product_info--cont-txt01 li:not(:last-child) {
  margin-bottom: 16px;
}
.product_info--cont-txt01 li::before {
  counter-increment: number;
  content: counter(number);
  display: block;
  width: 38px;
  height: 39px;
  margin-bottom: 4px;
  font-size: 107%;
  text-align: center;
  line-height: 39px;
  letter-spacing: 0;
  background: url(../images/product/star-line.svg);
  background-size: contain;
}

/* product_info--cont02 */
.product_info--cont02-bg-star01 {
  opacity: 0.63;
}
.product_info--cont02-bg-star01-c01 {
  top: 62%;
}
.product_info--cont02-bg-star01-c02 {
  top: 168%;
}
.product_info--cont02 .product_info--cont02-bg-cloud01 {
  top: 45%;
  left: -20%;
}
.product_info--cont-img02 {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 8%;
  padding: 12px 10px;
}
.product_info--cont-img02 .txt-attention {
  top: -2em;
  left: 50%;
}
.product_info--cont-txt02 {
  flex: 1;
  max-width: 366px;
  margin-left: 86px;
}
.product_info--cont-txt02 li {
  position: relative;
  line-height: 1.57;
}
.product_info--cont-txt02 li:not(:first-child) {
  padding-top: 20px;
}
.product_info--cont-txt02 li:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.product_info--cont-txt02 li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -4.5px;
  display: block;
  width: 9px;
  height: 9px;
}
.product_info--cont-txt02 li:nth-child(1)::after {
  background: url(../images/common/star02.svg);
  background-size: contain;
}
.product_info--cont-txt02 li:nth-child(2)::after {
  background: url(../images/common/star03.svg);
  background-size: contain;
}
.product_info02-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.product_info--cont-ttl03 {
  font-size: 228%;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.product_info--cont-txt03-sm {
  max-width: 620px;
}
.product_info--cont-txt03 li {
  position: relative;
  flex: 1;
  padding: 13px;
  font-size: 107%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.product_info--cont-txt03 li:not(:last-child) {
  margin-right: calc(24 / 833 * 100%);
}
.product_info--cont-txt03-sm li.btn:not(:last-child) {
  margin-right: calc(24 / 620 * 100%);
}
.product_info--cont-txt03-sm li:nth-child(3),
.product_info--cont-txt03-sm li:last-child {
  margin-right: 0;
}
.product_info--cont-txt03 li::before,
.product_info--cont-txt03 li::after {
  content: "";
  display: block;
  position: absolute;
  width: 42%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.25);
  transform: rotate(-11deg);
}
.product_info--cont-txt03 li::before {
  top: 0;
  right: 0;
  transform-origin: top right;
}
.product_info--cont-txt03 li::after {
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
}

/* product_nightcare */
.product_nightcare {
  margin-bottom: 21vw !important;
}
.product_nightcare-bg-star01 {
  opacity: 0.63;
}
.product_nightcare-bg-star01-c01 {
  top: 56%;
}
.product_nightcare-bg-star01-c02 {
  top: 154%;
}
.page-hairmask .product_nightcare-bg-star01-c02 {
  top: 174%;
}
.product_nightcare--ttl {
  font-size: 2rem;
  letter-spacing: 0.1em;
}
.product_nightcare--ttl i {
  display: block;
  font-size: 131%;
}
 .product_nightcare--ttl.ttl-line > span::before {
  bottom: -1.2em;
  left: -2.5em;
}
.product_nightcare--ttl.ttl-line > span::after {
  top: -1.2em;
  right: -2.5em;
}
.product_nightcare--cont-imgList {
  max-width: 450px;
  margin-inline: auto;
}
.product_nightcare--cont-imgList ul:has(li:not(:only-child)) {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px;
}
.product_nightcare--cont-imgList li:only-child {
  max-width: calc(50% - 24px);
  margin-inline: auto;
}
.page-shampoo_treatment .product_nightcare--cont-imgList li:first-child {
  grid-column: span 2; /* 最初の要素だけ2列分を占有 */
}
.page-shampoo_treatment .product_nightcare--cont-imgList li:first-child img { 
  width: 216px;
}

/* .page-deep_night.page-shampoo_treatment  */
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList {
  width: 100%;
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList ul {
  height: 330px;
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList li .img { 
  margin-bottom: -1.5em;
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList li .txt {
  margin-inline: -1em;
  font-size: 0.6875rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList li:first-child  img { 
  width: 189px;
  margin-inline: auto;
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList li:not(:first-child) {
  position: absolute;
  top: 50%;
  width: 110px;
  left: 50%;
  --angle: calc(360deg / 6* var(--index));
  --x: calc(cos(var(--angle))* 140px);
  --y: calc(sin(var(--angle))* 130px);
  translate: calc(var(--x) - 50%) calc(var(--y) - 65%);
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList li:nth-child(2) {
  --index: 3;
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList li:nth-child(3) {
  --index: 2;
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList li:nth-child(4) {
  --index: 1;
}
.page-deep_night.page-shampoo_treatment .product_nightcare--cont-imgList li:nth-child(5) {
  --index: 0;
}
.product_nightcare--cont-imgList .txt-attention {
  right: 0;
  bottom: 0;
}
.product_nightcare--cont-img {
  position: relative;
  width: 177px;
  margin-left: auto;
  margin-right: auto;
}
.product_nightcare--cont-img .txt-attention {
  margin-top: 16px;
}
.product_nightcare--cont-img::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  padding-top: 100%;
  pointer-events: none;
  background: url(../images/product/product_nightcare--frame.svg) center no-repeat;
  background-size: contain;
}
.product_nightcare--cont-ttl {
  font-size: 171%;
  line-height: 1.75;
}
.product_nightcare--cont-ttl sup {
  font-size: 50%;
  vertical-align: super;
}
.product_nightcare--cont-txt {
  /* text-align: justify; */
  line-height: 2;
}

/* product_step */
.product_step {
  margin-bottom: 19vw;
}
.product_step-bg-star01 {
  opacity: 0.63;
}
.product_step-bg-star01-c01 {
  top: 56%;
}
.product_step-bg-star01-c02 {
  top: 64%;
}
.product_step--ttl {
  font-size: 2rem; /* 32px */
  letter-spacing: 0.06em;
}
.product_step--subttl {
  font-size: 2.125rem;
  line-height: 1.4;
}
.product_step--txt {
  line-height: 2;
}
.product_step--flow li {
  position: relative;
}
.product_step--flow li:last-child {
  margin-right: 0;
}
.product_step--flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32%;
  right: calc(-60 / 282 * 100%);
  width: calc(40 / 282 * 100%);
  height: 3px;
  border-bottom: 1px solid;
  border-right: 2px solid;
  transform: skewX(50deg);
}
.product_step--flow-ttl {
  font-weight: normal;
}
.product_step--flow-ttl .font-en {
  margin-right: 12px;
  font-size: 131%;
}
.product_step--flow-txt {
  line-height: 2;
  text-align: justify;
}
.product_step--attention {
  max-width: 800px;
  margin-top: 80px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.page-deep_night .shampoo_treatment .product_step--flow li:last-child img,
.page-deep_night .hairoil .product_step--flow li:last-child img {
  width: auto;
  height: 255px;
}
.page-deep_night .hairmask .product_step--flow li:last-child div {
  height: 292px;
  position: relative;
}
.page-deep_night .hairmask .product_step--flow li:last-child div img {
  position: absolute;
  width: 50%;
  height: auto;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
}

/* product_howto */
.product_howto {
  margin-bottom: 19vw;
}
.product_howto-bg-star01 {
  opacity: 0.63;
}
.product_howto-bg-star01-c01 {
  top: -51%;
}
.product_howto-bg-star01-c02 {
  top: 44%;
}
.product_howto {
  margin-bottom: 16vw;
}
.product_howto--ttl {
  margin-bottom: 50px;
  font-size: 242%;
  letter-spacing: 0.06em;
}
.product_howto--flow > li {
  width: 45.5%;
  margin-right: 9%;
}
.product_howto--ttl-sub {
  position: relative;
  margin-left: 10px;
  margin-right: 13px;
  padding: 20px;
  font-size: 135%;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.product_howto--ttl-sub::before,
.product_howto--ttl-sub::after,
.product_howto--ttl-sub span::before,
.product_howto--ttl-sub span::after {
  content: "";
  position: absolute;
  display: block;
}
.product_howto--ttl-sub::before {
  top: -5px;
  left: -9px;
  width: 9px;
  height: 8px;
  background: url(../images/common/star02.svg);
  background-size: contain;
}
.product_howto--ttl-sub::after {
  top: -3px;
  right: -10px;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
}
.product_howto--ttl-sub span::before {
  bottom: -4px;
  left: -9px;
  width: 7px;
  height: 7px;
  background-color: #fff;
  border-radius: 50%;
}
.product_howto--ttl-sub span::after {
  bottom: -7px;
  right: -14px;
  width: 13px;
  height: 13px;
  background: url(../images/common/star03.svg);
  background-size: contain;
}
.product_howto--flow-c {
  padding-left: 24px;
  padding-right: 24px;
}
.product_howto--flow-c > li {
  position: relative;
}
.product_howto--flow-c > li:not(:last-child) {
  margin-bottom: 38px;
}
.product_howto--flow-num {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 221%;
  letter-spacing: 0.05em;
  line-height: 1;
}
.product_howto--flow-c > li:first-child .product_howto--flow-num {
  letter-spacing: 0.2em;
}
.product_howto--flow-txt {
  position: relative;
  padding-left: 64px;
  line-height: 2;
}
.product_howto--flow-length > li:not(:last-child) {
  margin-right: 28px;
}
.product_howto--flow-length-item {
  width: 101px;
  height: 94px;
  padding: 18px 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-image: url(../images/product/product_howto-frame.svg);
  background-position: center;
  background-size: contain;
}
.page-hairmask .product_howto--flow-length-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
  font-weight: 500;
  padding: 0;
  letter-spacing: 0.02em;
}
.page-hairmask .product_howto--flow-length li:nth-child(1) .product_howto--flow-length-item {
  width: 66px;
  height: 59px;
}
.page-hairmask .product_howto--flow-length li:nth-child(2) .product_howto--flow-length-item {
  width: 82px;
  height: 75px;
}
.page-hairmask .product_howto--flow-length li:nth-child(3) .product_howto--flow-length-item {
  width: 90px;
  height: 83px;
}
.product_howto--flow-length-item i {
  display: block;
  font-size: 142%;
}
.product_howto--flow-length-item span {
  display: block;
  margin-top: 4px;
}

/* product_c_links */
.product_c_links {
  margin-bottom: 12.5rem;
}
.product_c_links .btn_list {
  font-size: 80%;
}
.product_c_links .btn_list .btn:not(:last-child) {
  margin-right: 2%;
}
.product_c_links--ttl {
  font-size: 228%;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.product_c_links-c li:not(:last-child) {
  margin-right: 40px;
}
.product_c_links-c--ttl {
  margin-bottom: 24px;
  font-size: 142%;
}
.product_c_links-bg-star03 {
  top: -20vw;
  opacity: 0.2;
}
@media print, screen and (min-width: 768px) {
  .product_info--wrap {
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
  }
  .page-deep_night .hairmask .product_info--wrap,
  .page-deep_night .shampoo_treatment .product_info--wrap,
  .page-deep_night .hairoil .product_info--wrap {
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
  }
  .product_info--wrap .product_info--cont-img01,
  .page-deep_night .hairmask .product_info--wrap .product_info--cont-img01,
  .page-deep_night .shampoo_treatment .product_info--wrap .product_info--cont-img01 {
    flex-shrink: inherit;
    margin-top: 0;
    flex: 1;
  }
  .product_info--wrap .product_info--cont-txt01,
  .page-deep_night .hairmask .product_info--wrap .product_info--cont-txt01,
  .page-deep_night .shampoo_treatment .product_info--wrap .product_info--cont-txt01 {
    width: calc(356 / 830 * 100%);
    margin-left: calc(48 / 830 * 100%);
  }
  .product_info--cont-txt03-lg {
    font-size: 1.125rem; /* 18px */
  }
  .product_step--flow li:first-child {
    margin-left: auto;
  }
  .product_step--flow li:last-child {
    margin-right: auto;
  }
  .product_c_links .btn_list .btn-text {
    font-size: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
@media screen and (max-height: 700px) {
  .product_hero {
    min-height: 750px;
    padding-top: 150px;
  }
}
@media screen and (max-width: 1280px) {
  .product_hero::before {
    top: 0;
  }
  .product_hero--cont {
    padding-right: 4%;
  }
}
@media screen and (max-width: 1180px) {
  .product_cont:not(:last-child) {
    margin-bottom: 200px;
  }
}
@media screen and (max-width: 767px) {
  #product-st-particles00 {
    top: -24%;
    left: 0;
    height: 24%;
  }
  #product-st-particles03 {
    top: 91%;
    left: -6%;
    right: -10%;
    width: auto;
    height: 100%;
  }
  .product_cont:not(:last-child) {
    margin-bottom: 150px;
  }

  /* product_hero */
  .product_hero {
    height: auto;
    min-height: 312.5px;
    max-height: none;
    padding-top: 150px;
  }
  .product_hero:not(:last-child) {
    margin-bottom: 48px;
  }
  .product_hero-bg-star {
    top: 33%;
  }
  .page-deep_night .product_hero-bg-star {
    top: 46%;
  }
  .page-deep_night.page-hairoil .product_hero-bg-star02,
  .page-deep_night.page-hairmask .product_hero-bg-star02 {
    top: 80%;
  }
  .page-calm_night .shampoo_treatment .product_hero::before {
    background-image: url(../images/product/calm_night/shampoo_treatment/product-calm_night-st-sp.webp);
    background-size: 100% auto;
    z-index: 2;
  }
  .page-relax_night .shampoo_treatment .product_hero::before {
    background: url(../images/product/relax_night/shampoo_treatment/product-relax_night-st-sp.webp) no-repeat;
    background-size: 100% auto;
    z-index: 2;
  }
  .page-deep_night .shampoo_treatment .product_hero::before {
    background: url(../images/product/deep_night/shampoo_treatment/product-deep_night-st-sp.webp) no-repeat;
    background-size: 100% auto;
  }
  .hairoil .product_hero::before {
    background-image: url(../images/product/calm_night/hairoil/product-calm_night-hairoil-sp.webp);
    background-size: 100% auto;
  }
  .page-relax_night .hairoil .product_hero::before {
    background: url(../images/product/relax_night/hairoil/product-relax_night-hairoil-sp.webp) no-repeat;
    background-size: 100% auto;
  }
  .page-deep_night .hairoil .product_hero::before {
    background: url(../images/product/deep_night/hairoil/product-deep_night-hairoil-sp.webp) no-repeat;
    background-size: 100% auto;
  }
  .hairmask .product_hero::before {
    background-image: url(../images/product/calm_night/hairmask/product-calm_night-hairmask-sp.webp);
    background-size: 100% auto;
  }
  .hairmist .product_hero::before {
    background-image: url(../images/product/calm_night/hairmist/product-calm_night-hairmist-sp.webp);
    background-size: 100% auto;
  }
  .page-relax_night .hairmask .product_hero::before {
    background-image: url(../images/product/relax_night/hairmask/product-relax_night-hairmask-sp.webp);
    background-size: 100% auto;
  }
  .page-deep_night .hairmask .product_hero::before {
    background-image: url(../images/product/deep_night/hairmask/product-deep_night-hairmask-sp.jpg);
    background-size: 100% auto;
  }
  /* --- bodysoap --- */
  .product_hero.bodysoap-calm_night::before {
    background-image: url(../images/product/calm_night/bodysoap/hero_sp.png);
    background-size: 100% auto;
  }
  .product_hero.bodysoap-relax_night::before {
    background-image: url(../images/product/relax_night/bodysoap/hero_sp.png);
    background-size: 100% auto;
  }
  /* --- bodymilk --- */
  .product_hero.bodymilk-calm_night::before {
    background-image: url(../images/product/calm_night/bodymilk/hero_sp.png);
    background-size: 100% auto;
  }
  .product_hero.bodymilk-relax_night::before {
    background-image: url(../images/product/relax_night/bodymilk/hero_sp.png);
    background-size: 100% auto;
  }
  /* --- bathtablet --- */
  .product_hero.bathtablet-calm_night::before {
    background-image: url(../images/product/calm_night/bathtablet/hero_sp.png);
    background-size: 100% auto;
  }
  .product_hero.bathtablet-relax_night::before {
    background-image: url(../images/product/relax_night/bathtablet/hero_sp.png);
    background-size: 100% auto;
  }
  /* --- skincare --- */
  .product_hero.skincare-serum_moist::before {
    background-image: url(../images/product/skincare/serum/moist/hero_sp.png);
    background-size: 100% auto;
  }
  .product_hero.skincare-serum_clear::before {
    background-image: url(../images/product/skincare/serum/clear/hero_sp.png);
    background-size: 100% auto;
  }
  .product_hero.skincare-cream_moist::before {
    background-image: url(../images/product/skincare/cream/moist/hero_sp.png);
    background-size: 100% auto;
  }
  .product_hero.skincare-cream_clear::before {
    background-image: url(../images/product/skincare/cream/clear/hero_sp.png);
    background-size: 100% auto;
  }
  .product_hero--cont {
    width: 82%;
    min-width: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 78vw;
    padding-right: 0;
    z-index: 2;
  }
  .page-deep_night .product_hero--cont {
    padding-top: 84vw;
  }
  .product_hero--ttl {
    margin-bottom: 4px;
    font-size: 150%;
  }
  .product_hero--ttl.ttl-line > span::before {
    bottom: -18px;
    left: -15%;
    width: 70px;
    height: 20px;
  }
  .product_hero--ttl.ttl-line > span::after {
    top: -27px;
    right: -17%;
    width: 104px;
    height: 29px;
  }
  .product_hero--ttl-lg {
    font-size: 283%;
  }
  .product_hero--txt {
    margin-bottom: 30px;
  }
  .product_hero--info {
    margin-bottom: 40px;
  }
  .product_hero--txt p:not(.txt-attention) {
    font-size: 116%;
    line-height: 2.1;
  }
  .product_hero--btn .btn {
    margin-right: 0;
  }
  .product_hero--btn .btn-text {
    padding: 13px 50px 13px 14px;
  }
  .product_hero--btn .btn:not(:last-child) {
    margin-bottom: 17px;
  }

  /* product_buy */
  .product_buy {
    margin-bottom: 60px;
  }
  .product_buy .inner {
    padding: 40px 23px;
    width: 92%;
  }
  .product_buy--ttl {
    font-size: 1.25rem; /* 20px */
  }
  .product_buy--ttl::before,
  .product_buy--ttl::after {
    width: 46.3px;
  }
  .product_buy--ttl::before {
    margin-right: 10px;
  }
  .product_buy--ttl::after {
    margin-left: 10px;
  }
  .tab--list {
    font-size: 0.875rem; /* 14px */
  }
  .tab--list li {
    width: 64px;
  }
  .tab--list li:not(:last-child) {
    margin-right: 8px;
  }
  .product_buy--blc.has_scroll {
    padding-bottom: 40px;
  }
  .product_buy--list .btn-buy {
    margin-left: 0;
  }

  /* product_info */
  .product_info {
    margin-bottom: min(calc(204 / var(--wid_vw)), 204px) !important;
  }
  .product_info--cont:not(:last-child) {
    margin-bottom: 21vw;
  }
  .product_info--intro {
    padding-right: 0;
    line-height: 2;
    margin-bottom: min(calc(88 / var(--wid_vw)), 88px);
  }
  .product_info--imgarea {
    position: relative;
    top: auto;
    right: auto;
    width: 110%;
    margin-left: -5%;
    margin-bottom: 8px;
    padding: 15px 12px;
    transform: none;
  }
  .product_info--ttl {
    font-size: 1.75rem;
    line-height: 1.6;
  }
  .product_info--ttl.ttl-line > span::before {
    bottom: -26px;
    left: -2.3em;
    width: 81px;
    height: 27px;
  }
  .product_info--ttl.ttl-line > span::after {
    top: 0;
    right: -2.3em;
    width: 73px;
    height: 24px;
  }
  .page-hairmask .product_info--ttl.ttl-line > span::before,
  .page-hairmask .product_info--ttl.ttl-line > span::after {
    width: 97px;
    height: 32px;
  }
  .page-hairmask .product_info--ttl.ttl-line > span::before {
    left: -15%;
  }
  .page-hairmask .product_info--ttl.ttl-line > span::after {
    top: -28px;
    right: -12%;
  }
  .product_info--ttl .subttl {
    font-size: 0.9375rem; /* 15px */
  }
  .product_info--ttl .special_care {
    font-size: 1.25rem; /* 20px */
  }
  .product_info--ttl-s {
    font-size: 216%;
  }
  .product_info--ttl-s em {
    font-size: 1.125rem; /* 18px */
  }
  .product_info--ttl .special_care img {
    width: 66px;
    margin-right: 0.5rem;
    height: auto;
  }
  .product_info--ttl-sub {
    font-size: 1.5rem; /* 24px */
  }
  .product_info--cont-ttl {
    font-size: 200%;
    line-height: 1.6;
  }
  .product_info--cont-ttl .fz-24,
  .product_info--cont-ttl .fz-28 {
    font-size: 0.938rem; /* 15px */
    letter-spacing: 0.02em;
    margin-bottom: 0.5em;
  }
  .product_info--cont-ttl-sm {
    letter-spacing: -0.04em;
  }
  .product_info--txt-img {
    justify-content: center;
  }
  .product_info--flex {
    gap: 16px;
  }
  .product_info--flex .product_deco-ciecle {
    width: 28%;
  }
  .product_info--flex .product_info--subttl {
    font-size: 1.125rem;
    margin-bottom: 0.5rem !important;
  }
  .product_info--subtxt {
    font-size: 0.875rem;
  }
  .product_info--bathtablet_list {
    gap: 8px;
    margin-bottom: 16px;
  }
  .product_info--bathtablet_list p {
    margin-top: 8px;
    line-height: 1;
  }
  .product_deco-ciecle {
    padding: 6px;
  }

  /* product_info--cont01 */
  .product_info--cont01-bg-star01-c01 {
    top: 5%;
    transform: scale(-1, -1);
    opacity: 0.3;
  }
  .product_info--cont01-bg-star01-c02 {
    top: 78%;
    transform: scale(1, -1);
    opacity: 0.3;
  }
  .product_info--cont01 .product_info--cont01-bg-cloud01 {
    top: 65%;
    left: 0;
    right: auto;
    transform: none;
    opacity: 0.3;
  }
  .product_info--cont-txt01 li p {
    font-size: 120%;
  }

  /* product_info--cont02 */
  .product_info--cont02 {
    margin-bottom: 23vw;
  }
  .product_info--cont02-bg-star01-c02 {
    top: 120%;
    transform: scale(1, -1);
  }
  .product_info--cont02 .product_info--cont02-bg-cloud01 {
    top: 125%;
    left: auto;
    right: 0;
    transform: scale(-1, 1);
  }
  .product_info--cont02 .product_info--cont-ttl {
    margin-bottom: 20px;
  }
  .product_info--cont-txt {
    font-size: 116%;
  }
  .product_info--cont-txt01 {
    width: 100%;
    margin-left: 0;
  }
  .product_info--cont-txt01 li::before {
    font-size: 125%;
    line-height: 2.6;
  }
  .product_info--cont-img01 {
    width: 107%;
    margin-left: -3.5%;
    margin-bottom: 40px;
  }
  .product_info--cont-txt02 {
    margin-left: 0;
  }
  .product_info--cont-txt02 ul .txt-xll {
    font-size: 0.875rem; /* 14px */
  }
  .product_info--cont-txt02 ul p {
    line-height: 1.17;
    letter-spacing: 0;
  }
  .product_info--cont-txt02 ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 48%;
    height: calc(314 / var(--wid_vw));
    margin-bottom: 0;
    white-space: nowrap;
  }
  .product_info--cont-txt02 li:not(:first-child) {
    padding-top: 16px;
  }
  .product_info--cont-txt02 li:not(:last-child) {
    padding-bottom: 16px;
  }
  .product_info--cont-txt02 li:last-child {
    padding-right: 24px;
  }
  .product_info--cont-txt02 li:not(:last-child)::after {
    right: -10px;
    bottom: -3.5px;
    width: 6px;
    height: 6px;
  }
  .product_info--cont-img02 {
    position: absolute;
    top: 0;
    left: 43%;
    width: 96% !important;
    padding: 11px 10px;
  }
  .product_info--cont-txt02 .txt-attention {
    margin-top: 1em;
  }
  .product_info02-frame {
    left: 0.5%;
  }
  .product_info--cont-ttl03 {
    font-size: 1.5rem;
  }
  .product_info--cont-txt03 {
    flex-wrap: wrap;
  }
  .product_info--cont-txt03 li:not(:last-child) {
    margin-right: calc(12 / 300 * 100%);
  }
  .product_info--cont-txt03 li:first-child:nth-last-child(3),
  .product_info--cont-txt03 li:first-child:nth-last-child(3) ~ li {
    flex: inherit;
    width: calc(144 / 300 * 100%);
  }
  .product_info--cont-txt03 li:first-child:nth-last-child(3) {
    margin-bottom: calc(12 / 300 * 100%);
    margin-left: calc(78 / 300 * 100%);
    margin-right: calc(78 / 300 * 100%);
  }
  .product_info--cont-txt03 li {
    padding: 9px;
    font-size: 100%;
  }
  #hairmist .product_info--cont-txt03 li {
    margin-left: 0;
    margin-right: 0;
  }

  /* product_nightcare */
  .product_nightcare {
    margin-bottom: min(calc(190 / var(--wid_vw)), 190px) !important;
  }
  .product_nightcare-bg-star01-c01 {
    top: -3%;
    opacity: 0.3;
  }
  .product_nightcare-bg-star01-c02 {
    top: 34%;
    transform: scale(-1, -1);
  }
  .product_nightcare-bg-star01-c03 {
    top: 80%;
    transform: scale(-1, -1);
    opacity: 0.3;
  }
  .product_nightcare-bg-cloud01 {
    top: 80%;
  }
  .product_nightcare-bg-cloud02 {
    top: 90%;
  }
  .product_nightcare--ttl {
    font-size: 1.6875rem;
    line-height: 1.5;
  }
  .page-relax_night .product_nightcare--ttl {
    width: 112%;
    margin-left: -6%;
  }
  .product_nightcare--ttl.ttl-line > span::before,
  .product_nightcare--ttl.ttl-line > span::after {
  }
  /* .product_nightcare--ttl.ttl-line > span::before {
    left: -5%;
  }
  .product_nightcare--ttl.ttl-line > span::after {
    top: -30px;
    right: -11%;
  } */
  .product_nightcare--ttl i {
    font-size: 170%;
  }
  .product_nightcare--cont-img {
    width: 132px;
  }
  .product_nightcare--cont-img img {
    width: calc(100% - 20px);
  }
  .product_nightcare--cont-img .txt-attention {
    font-size: 83%;
    letter-spacing: 0;
  }
  .product_nightcare--cont-ttl {
    margin-bottom: 10px;
    font-size: 166%;
    line-height: 1.8;
    letter-spacing: 0.004em;
  }
  .product_nightcare--cont-txt {
    font-size: 116%;
    line-height: 2.05;
  }

  /* product_howto */
  .product_howto-bg-star01-c01 {
    top: -60%;
    transform: scale(-1, -1);
  }
  .product_howto-bg-star01-c02 {
    top: -33%;
    transform: scale(1, 1);
    opacity: 0.3;
  }
  .product_howto-bg-star01-c03 {
    top: 10%;
    opacity: 0.3;
    transform: scale(-1, -1);
  }
  .product_howto-bg-star01-c04 {
    top: 39%;
    opacity: 0.3;
    transform: scale(-1, 1);
  }
  .product_howto-bg-star01-c05 {
    top: 79%;
    opacity: 0.3;
    transform: scale(1, -1);
  }
  .product_howto--flow > li {
    width: 48.5%;
    margin-right: 3%;
  }

  /* product_step */
  .product_step {
    margin-bottom: 46vw;
  }
  .product_step--ttl.font-jp {
    font-size: 1.5rem; /* 24px */
  }
  .product_step--txt {
    margin-bottom: 44px;
  }
  .product_step--txt,
  .product_step--flow-txt {
    font-size: 116%;
  }
  .product_step--flow-ttl {
    font-size: 133%;
  }
  .product_step--flow-ttl .font-en {
    font-size: 124%;
  }
  .product_step--flow li:not(:last-child)::after {
    display: none;
  }

  .product_step--flow .swiper-wrapper {
    flex-direction: initial;
    flex-wrap: initial;
    align-items: initial;
  }
  .product_step--flow .swiper-container {
    padding-top: 64px;
  }
  .product_step--flow .swiper-pagination {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .product_step--flow .swiper-container-col2 .swiper-pagination {
    width: calc(164 / 300 * 100%);
  }
  .product_step--flow .swiper-pagination-bullet {
    position: relative;
    width: 24px;
    height: 25px;
    line-height: 2;
    letter-spacing: 0;
    border-radius: 0;
    background: url(../images/product/star-line.svg);
    background-size: contain;
    opacity: 1;
  }
  .product_step--flow .swiper-pagination-bullet-line {
    flex: 1;
    height: 1px;
    margin-left: 8px;
    margin-right: 8px;
    display: block;
    width: 100%;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .product_step--flow .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    background: url(../images/product/star-line-wh.svg);
    opacity: 0;
    transition: 0.4s ease-out;
  }
  .product_step--flow .swiper-pagination-bullet-active {
    color: #2f45a5;
  }
  .product_step--flow .swiper-pagination-bullet-active::before {
    opacity: 1;
  }
  .product_step--flow .swiper-pagination-bullet-line:last-child {
    display: none;
  }
  .product_step--flow .swiper-button-prev,
  .product_step--flow .swiper-button-next,
  .product_step--flow .swiper-container-rtl .swiper-button-prev {
    top: 35%;
    width: 40px;
  }
  .product_step--flow .swiper-button-prev {
    left: -5%;
  }
  .product_step--flow .swiper-button-next {
    right: -5%;
  }
  .product_step--flow .swiper-button-prev:after,
  .product_step--flow .swiper-button-next:after,
  .product_step--flow .swiper-container-rtl .swiper-button-prev:after {
    color: #fff;
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 40px;
    height: 3px;
    border-bottom: 1px solid;
  }
  .product_step--flow .swiper-button-prev:after {
    border-left: 2px solid;
    transform: skewX(-50deg);
  }
  .product_step--flow .swiper-button-next:after {
    border-right: 2px solid;
    transform: skewX(50deg);
  }
  .product_step--flow-img {
    width: auto;
    height: 191px;
    margin-bottom: 30px;
  }
  .page-deep_night .hairmask .product_step--flow-img {
    width: 35% !important;
    object-fit: contain !important;
  }
  .product_step--attention {
    margin-top: 56px;
    padding: 24px;
    text-align-last: left;
  }

  /* product_howto */
  .product_howto {
    margin-bottom: 54vw;
  }
  .product_howto--ttl {
    margin-bottom: 40px;
  }
  .product_howto--ttl-sub {
    margin-bottom: 40px;
    padding: 17px;
    font-size: 166%;
  }
  .product_howto--flow-c {
    padding-left: 0;
    padding-right: 0;
  }
  .product_howto--flow-txt {
    height: auto;
    padding-left: 48px;
    font-size: 116%;
  }
  .product_howto--flow-num {
    font-size: 229%;
  }
  .product_howto--flow-length-item {
    width: 83px;
    height: 76px;
    padding: 13px 8px;
  }
  .page-shampoo_treatment .product_howto--flow > li:first-child {
    margin-bottom: 120px;
  }

  /* product_c_links */
  .product_c_links-bg-star01 {
    top: 10%;
    opacity: 0.3;
    transform: scale(-1, 1);
  }
  .product_c_links-bg-star02 {
    top: 77%;
    opacity: 0.3;
  }
  .product_c_links-c li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 74px;
  }
  .product_c_links--ttl,
  .product_c_links-c--ttl {
    font-size: 166%;
    margin-bottom: 20px;
  }
  .product_c_links-c .btn-text {
    font-size: 150%;
  }
  .product_c_links .btn_list {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 400px) {
  .product_info--cont-ttl-sm {
    letter-spacing: -0.07em;
  }
}

/* product skincare
**************************************** */
/* --- parts --- */
.product_skincare_deco-ciecle {
  position: relative;
  display: grid;
  place-content: center;
  padding: 10px;
  background: url(../images/product/frame-circle.svg) center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .product_skincare_deco-ciecle {
    padding: 6px;
  }
}

/* --- hero --- */
#skincare .product_hero {
  margin-bottom: 110px;
}
#skincare .product_hero--ttl.ttl-line > span::before {
  bottom: -70%;
  left: -40%;
}
#skincare .product_hero--ttl.ttl-line > span::after {
  right: auto;
  left: 6.5em;
  top: -110%;
}
#skincare .product_hero-bg-star03 {
  top: 80%;
  opacity: 0.2;
}
/* --- product_movie--cont --- */
.product_movie-bg-star01 {
  top: 10%;
  opacity: 0.2;
}
.product_movie--cont {
  max-width: 1002px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 200px;
}
@media screen and (max-width: 767px) {
  .product_movie--cont,
  .product_movie.product_movie-skincare {
    margin-bottom: 23.5vw;
  }
}

/* --- .product_skincare-cont --- */
.product_skincare_cont {
  margin-bottom: 12.5rem;
}
.product_skincare_cont--ttl {
  font-size: 2.125rem;
  line-height: 1.5;
}
.product_skincare_cont--subttl {
  font-size: 1.5rem;
  line-height: 1.75;
}
#skincare .product_info-bg-star01 {
  top: 0%;
  opacity: 0.2;
}
#skincare .product_info-bg-star02 {
  top: 14%;
  opacity: 0.2;
}
#skincare .product_info-bg-star03 {
  top: 28%;
  opacity: 0.2;
}
#skincare .product_info-bg-star04 {
  top: 42%;
  opacity: 0.2;
}
#skincare .product_info-bg-star05 {
  top: 56%;
  opacity: 0.2;
}
#skincare .product_info-bg-star06 {
  top: 70%;
  opacity: 0.2;
}
#skincare .product_info-bg-star07 {
  top: 84%;
  opacity: 0.2;
}
#skincare .product_info-bg-star08 {
  top: 98%;
  opacity: 0.2;
}
@media screen and (max-width: 767px) {
  .product_skincare_cont {
    margin-bottom: 23.5vw;
  }
  .product_cont.product_cont--skincare {
    margin-bottom: 23.5vw !important;
  }
  .product_skincare_cont--ttl {
    font-size: 1.5rem;
  }
  .product_skincare_cont--subttl {
    font-size: 1.125rem;
  }
}

/* --- .product_skincare-cont01 --- */
.product_skincare_cont01--list {
  display: flex;
  justify-content: space-between;
  padding-inline: 5rem;
}
.skincare_list--item .skincare_list--img {
  margin-bottom: 1.125rem;
}
.skincare_list--ttl,
.skincare_list--txt {
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.skincare_list--ttl {
  margin-bottom: 1.5rem;
}
.skincare_list--txt {
  font-size: 1.125rem;
}
@media screen and (max-width: 767px) {
  .product_skincare_cont01--list {
    padding-inline: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
  }
  .product_skincare_cont01--list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% - 2rem) / 2);
  }
  .skincare_list--ttl {
    font-size: 0.6875rem;
    margin-bottom: 1rem;
  }
  .skincare_list--txt {
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

/* --- product_skincare_cont02 --- */
.product_skincare_cont02--dtl {
  gap: 2.5rem;
  max-width: 640px;
  margin-inline: auto;
}
.product_skincare_cont02--dtl .txtarea {
  flex: 1;
}
.product_skincare_cont02--txt {
  font-size: 0.8125rem;
  line-height: 2.2; 
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .product_skincare_cont02 .product_skincare_cont--img {
    width: 90%;
    margin-inline: auto;
  }
  .product_skincare_cont02--dtl {
    flex-direction: column;
    gap: 1rem;
  }
  .product_skincare_cont02--dtl .mask--img {
    width: 80%;
  }
}

/* --- product_skincare_cont03 --- */
.product_skincare_cont03--img {
  max-width: 560px;
  margin-inline: auto;
}
.product_skincare_cont03--img.mask--img::after {
  content: "";
  position: absolute;
  bottom: -6%;
  right: -13%;
}

/* --- product_skincare_cont04 --- */
.product_skincare_cont04 .product_info--ttl.ttl-line > span::after {
  right: -3%;
  top: -25%;
}
.product_skincare_cont04.clear .product_info--ttl.ttl-line > span::before {
  bottom: 12%;
  left: -7%;
}
.product_skincare_cont04.clear .product_info--ttl.ttl-line > span::after {
  right: -12%;
  top: -20%;
}
.product_skincare_cont04--subttl {
  font-size: 1.625rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.product_skincare_cont04--dtl {
  gap: 2.5rem;
}
.product_skincare_cont04--dtl .txtarea {
  flex: 1;
}
.product_skincare_cont04--dtl .product_info--cont-txt {
  line-height: 2;
}
.product_skincare_cont04--dtl .txt-attention {
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  .product_skincare_cont04--subttl {
    font-size: 1.125rem;
  }
  .product_skincare_cont04--dtl {
    gap: 1rem;
  }
  .product_skincare_cont04--dtl .product_skincare_deco-ciecle {
    width: 28%;
  }
  .product_skincare_cont04--dtl .product_info--cont-txt {
    font-size: 0.8125rem;
    line-height: 1.6;
  }
}

/* --- product_skincare_cont05 --- */
.product_skincare_cont--list {
  max-width: 520px;
  margin-inline: auto;
}
.product_skincare_cont--list li {
  position: relative;
  padding-inline: 0.5rem;
}
.product_skincare_cont--list li:not(:last-child) {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.product_skincare_cont--list li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5625rem;
  background-image: url(/wp/wp-content/themes/original_theme/images/product/product_line.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.product_skincare_cont--list-ttl {
  font-weight: 600;
  line-height: 2;
}
.product_skincare_cont05--img {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 100px;
}
.product_skincare_cont05--img.mask--img::after {
  content: "";
  position: absolute;
  bottom: -6%;
  right: -13%;
}
.product_skincare_cont--list2 {
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
}
.product_skincare_cont--list2 li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.product_skincare_cont--list2 .product_skincare_deco-ciecle {
  padding: 8px;
}
.product_skincare_cont--list2.col3 {
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  max-width: 440px;
}
.product_skincare_cont--list2.col3 li {
  width: calc((100% - (3rem * 2)) / 3);
}
.product_skincare_cont--list2.col4 {
  gap: 2.5rem;
  max-width: 576px;
}
.product_skincare_cont--list2.col4 li {
  width: calc((100% - (2.5rem * 3)) / 4);
}
.product_skincare_cont--list2 img {
  width: 100%;
}
.product_skincare_cont--list2 p {
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .product_skincare_cont--list2 .product_skincare_deco-ciecle {
    padding: 5px;
  }
  .product_skincare_cont--list2.col3 {
    gap: 1rem;
  }
  .product_skincare_cont--list2.col3 li {
    width: calc((100% - (1rem * 2)) / 3);
  }
  .product_skincare_cont--list2.col4 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: 80%;
  }
  .product_skincare_cont--list2.col4 li {
    width: calc((100% - 2rem) / 2);
  }
  .product_skincare_cont--list2 p {
    font-size: 0.625rem;
    line-height: 1.2;
  }
}

/* --- product_skincare_cont06 --- */
@media screen and (max-width: 767px) {
  .product_skincare_cont06 .product_skincare_cont--subttl {
    font-size: 1rem;
  }
}

/* --- product_step-skincare --- */
.product_step.product_step-skincare {
  margin-bottom: 12.5rem;
}
@media screen and (max-width: 767px) {
  .product_step.product_step-skincare {
    margin-bottom: 23.5vw;
  }
}
/* --- product_howto-skincare--ttl --- */
.product_howto-skincare--ttl {
  margin-bottom: 6rem;
}
.howto_item--ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 2.5rem;
}
.howto_item--ttl::before,
.howto_item--ttl::after {
  content: "";
  display: block;
  left: 0;
  height: 12px;
  width: 100%;
  background-image: url(/wp/wp-content/themes/original_theme/images/product/product_line2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.product_howto--cont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.5rem;
}
.product_howto-skincare .product_howto--flow-txt {
  font-size: 0.875rem;
  line-height: 2;
}
.product_howto-skincare .product_howto--step li:not(:last-child) {
  margin-bottom: 3.5rem;
}
@media screen and (max-width: 767px) {
  .product_howto.product_howto-skincare {
    margin-bottom: 23.5vw;
  }
  .product_howto-skincare--ttl {
    margin-bottom: 2rem;
  }
  .howto_item--ttl {
    font-size: 0.875rem;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }
  .product_howto--cont {
    gap: 2.5rem;
    grid-template-columns: repeat(1, 1fr);
  }
  .product_howto-skincare .product_howto--flow-txt {
    font-size: 0.75rem;
    padding-left: 3em;
  }
  .product_howto-skincare .product_howto--step li:not(:last-child) {
    margin-bottom: 2rem;
  }
  .product_howto-skincare .product_howto--flow-num {
    font-size: 1.8em;
  }
}

/* swiper dots
*************************************************** */
/* dots */
.swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  aspect-ratio: 1;
  background-image: url(/wp/wp-content/themes/original_theme/images/hero-dot.svg);
  background-size: contain;
  background-color: transparent;
  border-radius: 0;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background-image: url(/wp/wp-content/themes/original_theme/images/hero-dot-active.svg);
}
@media screen and (max-width: 767px) {

  /* dots */
  .swiper-pagination {
    margin-top: 1rem ;
    transform: inherit;
  }
}

/* shop
*************************************************** */
.shop_list {
  margin-bottom: 15vw;
}
.shop_list-bg-star {
  top: -30%;
}
.shop_list ul {
  margin-top: -1%;
  margin-left: 12.5%;
}
.shop_list li {
  position: relative;
  display: block;
  margin-bottom: 3.5% !important;
  padding-left: 12px;
  font-size: 128.571%;
}
.shop_list li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  display: block;
  width: 7px;
  height: 7px;
  background: url(../images/common/star.svg);
  background-size: cover;
}

/* online_shop */
.online_shop .section_ttl-sub {
  margin-top: 14px;
  margin-bottom: 70px;
}
.online_shop-bg-star01 {
  top: -40%;
  opacity: 0.3;
}
.online_shop .btn_list {
  max-width: 1006px;
  margin-left: auto;
  margin-right: auto;
}
.online_shop .btn_list .btn:first-child .btn-text {
  padding-top: 15px;
  padding-bottom: 11px;
}
@media screen and (min-width: 768px) {
  .online_shop .btn_list .btn,
  .online_shop .btn_list .btn:not(:last-child) {
    width: 31%;
    margin-right: 3.5%;
    margin-bottom: 3.64%;
  }
  .online_shop .btn_list .btn:nth-child(3),
  .online_shop .btn_list .btn:nth-child(5) {
    margin-right: 0;
  }
  .online_shop .btn-text.font-en {
    font-size: 114%;
  }
  .online_shop .btn-text {
    display: flex;
    font-size: 100%;
  }
  .online_shop .btn-text i {
    font-size: 150%;
  }
  .online_shop .btn-text i.font-en {
    font-size: 130%;
    padding-right: 0.25em;
    letter-spacing: 1px;
  }
  .online_shop .btn-text .btn-text-small {
    font-size: 60%;
  }
}
@media screen and (max-width: 767px) {
  .shop_list {
    margin-bottom: 28vw;
  }
  .shop_list-bg-star {
    top: -80%;
    z-index: 0;
    transform: rotate(180deg) scale(1, -1);
    opacity: 0.3;
  }
  .shop_list ul {
    gap: 13px 24px;
    margin-left: 0;
    margin-bottom: 30px;
  }
  .shop_list li {
    margin-bottom: 0 !important;
    font-size: 116%;
  }
  .shop_list li::before {
    top: 7px;
  }
  .online_shop .section_ttl img {
    height: 23px;
  }
  .online_shop .section_ttl-sub {
    margin-top: 4px;
    margin-bottom: 42px;
  }
  .online_shop .btn-text {
    padding: 12px 50px 12px 14px;
    line-height: 1;
  }
  .online_shop .btn-text .btn-text-small {
    font-size: 60%;
  }
}

/* product_anchor
**************************************** */
.product_anchor {
  padding-bottom: 5.625rem;
  margin-bottom: 5.625rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.product_anchor--link {
  position: relative;
  width: calc((100% - 4.1666vw) / 2);
  height: 96px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  padding-inline: 8px;
}
.product_anchor--link a {
  height: 100%;
  gap: 24px;
}
.product_anchor--link a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  height: 14px;
  width: 5px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: skewY(-45deg) translateY(-50%);
  transition: height 0.4s ease-out;
}
.product_anchor--link a:hover::after {
  height: 20px;
}
.product_anchor--img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  aspect-ratio: 1 / 1;
}
.product_anchor--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product_anchor--txt {
  font-size: 0.875rem; /* 14px */
  letter-spacing: 0.06em;
  flex-grow: 1;
}
.product_anchor--txt .font-en {
  font-size: 1.375rem; /* 22px */
}
.product_anchor--border {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
}
.product_anchor--border::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background-image: url(/wp/wp-content/themes/original_theme/images/common/star02.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  top: 50%;
  right: -16px;
  translate: 0 -50%;
}
.product_anchor--border::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 50%;
  left: -16px;
  background-color: #fff;
  border-radius: 50vw;
  translate: 0 -50%;
}
@media screen and (max-width: 767px) {
  .product_anchor {
    margin-bottom: 60px;
  }
  .product_anchor--link {
    width: 100%;
    height: 68px;
  }
  .product_anchor--link:last-child {
    margin-bottom: 0;
  }
  .product_anchor--img {
    width: 60px;
  }
  .product_anchor--txt {
    font-size: 0.75rem;
  }
  .product_anchor--txt .font-en {
    font-size: 1rem;
  }
  .product_anchor--link a {
    gap: 10px;
  }
  .product_anchor--link a::after {
    transform: skewY(-45deg) translateY(calc(-50% - 8px));
  }
}
@media screen and (max-width: 400px) {
  .product_anchor--txt .font-en {
    font-size: 0.875rem;
  }
  .product_anchor--txt {
    font-size: 0.6875rem;
  }
}

/* faq
*************************************************** */
.faq-bg-star01 {
  opacity: 0.5;
}
.faq-bg-star01-c01 {
  top: 10%;
}
.faq-bg-star01-c02 {
  top: 86%;
}
.faq-bg-star01-c03 {
  top: 75%;
}
.faq-bg-star01-c04 {
  top: 35%;
}
.faq-bg-star01-c05 {
  top: 58%;
}
.faq-bg-star02 {
  opacity: 0.5;
}
.faq-bg-star02-c01 {
  top: 11%;
}
.faq-bg-star02-c02 {
  top: 34%;
}
.faq-bg-star02-c03 {
  top: 90%;
}
.faq--cont > .inner {
  max-width: 560px;
}
.faq--cont:not(:last-child) {
  padding-bottom: 140px;
  margin-bottom: 90px;
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.faq--cont-ttl {
  margin-bottom: 40px;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.06em;
}
.faq--cont-ttl-sm {
  letter-spacing: normal;
}
.faq_box:not(:last-child) {
  margin-bottom: 96px;
}
.faq--img {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 96px;
}
.faq_box--item {
  position: relative;
  padding-left: 40px;
  text-align: justify;
  line-height: 2;
  letter-spacing: 0.08em;
}
.faq_box--item::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 204%;
  line-height: 1;
}
.faq_box--q {
  margin-bottom: 34px;
  font-weight: bold;
}
.faq_box--q::before {
  content: "Q";
}
.faq_box--a::before {
  content: "A";
}
.faq--cont .section_ttl {
  font-size: 228%;
}
@media screen and (max-width: 767px) {
  .faq--cont-ttl {
    margin-bottom: 20px;
    font-size: 183.333%;
    letter-spacing: 0;
  }
  .faq--cont .section_ttl {
    font-size: 171%;
  }
  .faq--img {
    margin-bottom: 46px;
  }
  .faq_box--item::before {
    font-size: 250%;
  }
  .faq_box--q {
    margin-bottom: 10px;
  }
  .faq_box:not(:last-child) {
    margin-bottom: 36px;
  }
  .faq-bg-star01-c05 {
    top: 60%;
  }
  .faq-bg-star01-c06 {
    top: 28%;
  }
}

/* 404
*************************************************** */
.page-404 .content-404 p {
  line-height: 2;
}

/* ##############################################################################

    HAIRMASK

############################################################################## */

.page-special.page-hairmask {
  background-color: #1843b3;
}
.hairmask_bg {
  position: absolute;
  top: min(100vh, calc(768 / var(--wid_vw)));
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 1280px);
  z-index: -1;
}
.hairmask_bg::before {
  content: "";
  position: absolute;
  top: min(-50vh, calc(384 / var(--wid_vw)));
  left: 0;
  width: 100%;
  height: min(calc(100% + 50vh), calc(100% + (384 / var(--wid_vw))));
  background-image: linear-gradient(to bottom, transparent 0%, rgba(24, 67, 179, 0.6) 40%, rgba(24, 67, 179, 0.6) 100%);
}
.hairmask_bg img {
  position: relative;
  width: 100%;
  margin-top: min(-50vh, calc(384 / var(--wid_vw)));
  z-index: -1;
}
.hairmask_bg img:not(:last-child) {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

@media screen and (max-width: 767px) {
  .page-special.page-hairmask .wrap .inner {
    width: calc(330 / 375 * 100%);
  }
}

/* loading
*************************************************** */
.hairmask_loading {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/hairmask/loading-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 1s ease-out;
  transition-delay: 3s;
}
.hairmask_loading.loaded {
  opacity: 0;
  pointer-events: none;
}
.hairmask_loading--bg_wrap {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(695 / var(--wid_vw)), 695px);
  height: min(calc(290 / var(--wid_vw)), 290px);
}
.hairmask_loading--bg {
  position: absolute;
  right: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  transition: all 2s linear;
}
.loaded .hairmask_loading--bg_wrap .hairmask_loading--bg {
  width: min(calc(695 / var(--wid_vw)), 695px);
}
.hairmask_loading--bg img {
  position: absolute;
  right: 0;
  max-width: inherit;
  width: min(calc(695 / var(--wid_vw)), 695px);
  height: min(calc(290 / var(--wid_vw)), 290px);
}
.hairmask_loading--logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hairmask_loading--logo svg {
  width: min(calc(180 / var(--wid_vw)), 180px);
  height: auto;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.8s ease-out;
  transition-delay: 2s;
}
.loaded .hairmask_loading--logo svg {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 767px) {
  .hairmask_loading {
    background-image: url(../images/hairmask/loading-bg_sp.jpg);
  }
  .hairmask_loading--bg_wrap,
  .loaded .hairmask_loading--bg_wrap .hairmask_loading--bg,
  .hairmask_loading--bg img {
    width: min(calc(348 / 375 * 100vw), 348px);
  }
  .hairmask_loading--bg_wrap,
  .hairmask_loading--bg img {
    height: min(calc(145 / 375 * 100vw), 145px);
  }
  .hairmask_loading--logo svg {
    width: min(calc(90 / 375 * 100vw), 90px);
  }
}

/* timer
*************************************************** */
.timer {
  position: fixed;
  bottom: calc(32 / var(--hgt_p));
  right: calc(32 / var(--wid_p));
  z-index: 1;
  font-size: 1rem; /* 16px */
  letter-spacing: 0;
  opacity: 0;
  transition: all 0.4s ease-out;
  z-index: 999;
}
.timer.show {
  opacity: 1;
}
.timer .font-en {
  opacity: 0;
  transition: all 0.4s ease-out;
  text-indent: 0.5em;
}
.timer.active .font-en {
  opacity: 1;
}
.timer--img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 118px;
  height: 118px;
  border: 1px solid;
  border-radius: 50%;
}
.timer.active .timer--img {
  cursor: pointer;
  transition: all 0.4s ease-out;
}
.timer.active .timer--img:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.timer--img::before,
.timer--img::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 19px;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: all 0.4s ease-out;
}
.timer.active .timer--img::before,
.timer.active .timer--img::after {
  opacity: 1;
}
.timer--img::before {
  top: 0;
  right: 0;
  background-image: url(../images/hairmask/specialcare-deco1.svg);
}
.timer--img::after {
  bottom: 0;
  left: 0;
  background-image: url(../images/hairmask/specialcare-deco2.svg);
}
.timer.show .timer--img img {
  animation: 10s linear forwards timerAnim;
}
.timer.active .timer--img img {
  animation: none;
}
.timer svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}
.timer .circle {
  stroke: #fff;
  stroke-width: 16px;
  fill: transparent;
  stroke-dasharray: 2166px;
  stroke-dashoffset: 2166px;
}
.timer.show .circle {
  animation: 10s linear forwards circleAnim;
}
.timer.active .circle {
  stroke-dashoffset: 0;
}

@media screen and (max-width: 767px) {
  .timer {
    bottom: calc(24 / 700 * 100%);
    right: calc(24 / 375 * 100%);
    transform: scale(0.6);
    transform-origin: bottom right;
  }
}

/* popup
*************************************************** */
.hairmask_popup {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 20, 75, 0.9);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 1s ease-out;
}
.hairmask_popup.show {
  opacity: 1;
  pointer-events: auto;
}
.hairmask_popup a {
  pointer-events: none;
}
.hairmask_popup.show a {
  pointer-events: auto;
}
.hairmask_popup--ttl {
  font-size: 1.625rem; /* 26px */
  margin-bottom: 0.5em;
}
.hairmask_popup--ttl svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2em;
  height: auto;
}
.hairmask_popup--blc {
  white-space: nowrap;
}
.hairmask_popup--txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem; /* 20px */
  margin-bottom: 1em;
}
.hairmask_popup--txt img {
  margin-right: 0.5em;
}
.hairmask_popup--txt small {
  display: block;
  font-size: 0.75rem; /* 12px */
  font-family: "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo",
    sans-serif;
}
.hairmask_popup--btns {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.hairmask_popup--btns a {
  display: block;
}
.hairmask_popup--btns .btn-hairmask:not(.txt-ctr) .btn-text {
  text-align: left;
  line-height: 1.4;
}
.hairmask_popup--close {
  top: calc(32 / var(--hgt_p));
  right: calc(60 / var(--wid_p));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.813rem; /* 13px */
}
.hairmask_popup--close .close {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
}
.hairmask_popup--close .close::before,
.hairmask_popup--close .close::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.hairmask_popup--close .close::before {
  transform: rotate(45deg);
}
.hairmask_popup--close .close::after {
  transform: rotate(-45deg);
}

@media print, screen and (min-width: 768px) {
  .hairmask_popup--btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(24 / 500 * 100%);
  }
}
@media screen and (max-width: 767px) {
  .hairmask_popup.show {
    overflow-y: scroll;
  }
  .hairmask_popup .inner {
    width: 77%;
    padding-bottom: 60px;
  }
  .hairmask_popup--close {
    top: calc(12 / var(--hgt_p));
    right: calc(20 / var(--wid_p));
    font-size: 0.5rem; /* 8px */
  }
  .hairmask_popup--close .close {
    width: 38px;
    height: 38px;
  }
  .hairmask_popup--ttl {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    letter-spacing: 0.02em;
  }
  .hairmask_popup--txt {
    font-size: 1.125rem; /* 18px */
    margin-bottom: 0.75em;
  }
  .hairmask_popup--blcs {
    height: 168px;
  }
  .hairmask_popup--btns .btn:not(:last-child) {
    margin-bottom: 10px;
  }
  .hairmask_popup .btn a {
    height: 52px;
  }
  .hairmask_popup .btn-text {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.75rem; /* 12px */
  }
}

/* hero
*************************************************** */
.hairmask_hero {
  height: min(100vh, calc(768 / var(--wid_vw)));
  z-index: -1;
}
.hairmask_hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/hairmask/fv-img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.hairmask_hero--ttl-wrap {
  position: absolute;
  top: 55.5%;
  left: calc(270 / var(--wid_p));
  transform: translateY(-50%);
}
.hairmask_hero--ttl {
  font-size: calc(40 / var(--wid_vw));
  margin-top: 0;
  line-height: 1.3;
  letter-spacing: 0;
}
.hairmask_hero--ttl img,
.hairmask_hero--ttl .txt {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1s ease-out, filter 0.5s linear, transform 1s ease-out;
}
.hairmask_hero--ttl img {
  transition-delay: 1.6s;
}
.loaded .hairmask_hero--ttl img,
.loaded .hairmask_hero--ttl .txt {
  opacity: 1;
  filter: blur(0);
}
.hairmask_hero--ttl img {
  position: absolute;
  top: calc(-88 / 155 * 100%);
  right: calc(-96 / 389 * 100%);
  width: calc(102 / 389 * 100%);
  height: auto;
}
.hairmask_hero--ttl span {
  display: block;
}
.hairmask_hero--ttl i {
  font-size: 100%;
}
.hairmask_hero--ttl-txt {
  display: block;
  transition-delay: 1.2s;
}
.loaded .hairmask_hero--ttl-txt {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.hairmask_hero--ttl .txt {
  font-size: calc(18 / var(--wid_vw));
  margin-top: 1em;
  letter-spacing: 0.08em;
  transform: translateY(20px);
  transition-delay: 1.2s;
}
.loaded .hairmask_hero--ttl .txt {
  transform: translateY(0);
}
.hairmask_hero .concept--ttl-line02 {
  width: auto;
}
.hairmask_hero .concept--ttl-line02:nth-of-type(1) {
  height: calc(44 / var(--wid_vw));
  top: calc(24 / var(--wid_vw));
  right: calc(-50 / var(--wid_vw));
  bottom: inherit;
}
.hairmask_hero .concept--ttl-line02:nth-of-type(2) {
  height: calc(40 / var(--wid_vw));
  bottom: calc(-20 / var(--wid_vw));
  left: calc(-48 / var(--wid_vw));
  right: inherit;
}
.hairmask_hero--ttl line {
  opacity: 1;
}
.loaded .hairmask_hero--ttl line {
  animation: lineAct 1s linear forwards;
}
.loaded .hairmask_hero--ttl .hairmask_hero--ttl-line-01-anime {
  animation-delay: 0.4s;
}
.loaded .hairmask_hero--ttl .hairmask_hero--ttl-line-02-anime {
  animation-delay: 0.6s;
}

@media screen and (max-width: 767px) {
  .hairmask_hero {
    height: calc(700 / 375 * 100vw);
  }
  .hairmask_hero::before {
    background-image: url(../images/hairmask/fv-img_sp.jpg);
  }
  .hairmask_hero--ttl-wrap {
    top: calc(96 / 700 * 100%);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .hairmask_hero--ttl {
    font-size: calc(30 / 375 * 100vw);
    line-height: 1.5;
    height: calc(530 / 375 * 100vw);
  }
  .hairmask_hero--ttl img {
    top: inherit;
    bottom: 0;
    left: calc(16 / 270 * 100%);
    right: inherit;
    width: calc(80 / 270 * 100%);
  }
  .hairmask_hero .concept--ttl-line02:nth-of-type(1) {
    height: calc(30 / 375 * 100vw);
    top: calc(24 / 375 * 100vw);
    right: calc(-28 / 375 * 100vw);
  }
  .hairmask_hero .concept--ttl-line02:nth-of-type(2) {
    height: calc(28 / 375 * 100vw);
    bottom: calc(8 / 375 * 100vw);
    left: calc(-24 / 375 * 100vw);
  }
  .hairmask_hero--ttl .txt {
    position: absolute;
    bottom: 0;
    left: calc(106 / 270 * 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(80 / 530 * 100%);
    font-size: calc(14 / 375 * 100vw);
    text-align: left;
    margin-top: 0;
    line-height: 1.6;
    font-weight: 500;
  }
  .hairmask_hero--ttl i {
    display: block;
    font-size: calc(22 / 375 * 100vw);
    letter-spacing: 0.2em;
    font-weight: bold;
  }
}

/* about
*************************************************** */
.hairmask_about {
  padding-bottom: min(calc(192 / var(--wid_vw)), 192px);
}
.hairmask_about .section_ttl {
  margin-bottom: 104px;
}
.hairmask_about--ttl-wrap {
  margin-bottom: 40px;
}
.hairmask_about--ttl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  font-size: 2.375rem; /* 38px */
  line-height: 1.3;
}
.hairmask_about--ttl img,
.page-special.page-hairmask .note {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1s ease-out, filter 0.5s linear, transform 1s ease-out;
  transition-delay: 0.8s;
}
.is-active .hairmask_about--ttl img,
.page-special.page-hairmask .is-active .note {
  opacity: 1;
  filter: blur(0);
}
.hairmask_about--ttl img {
  margin-right: 1rem;
}
.page-special.page-hairmask .note {
  display: block;
  width: 100%;
  font-size: 0.625rem; /* 10px */
  letter-spacing: 0.04em;
  margin-top: 0.5em;
  color: rgba(255, 255, 255, 0.7);
}
.hairmask_about--ttl i {
  font-size: 80%;
}
.hairmask_about--ttl-txt {
  transition-delay: 0.8s;
}
.hairmask_about .concept--ttl-line02,
.hairmask_feature .concept--ttl-line02 {
  width: auto;
  height: 78px;
}
.hairmask_about .concept--ttl-line02:nth-of-type(2) {
  top: -78px;
  bottom: inherit;
  left: 40%;
  right: inherit;
  transform: translateX(-50%);
}
.hairmask_about .concept--ttl-line02:nth-of-type(3) {
  bottom: -48px;
  left: -288px;
  right: inherit;
}
.is-active .hairmask_about--ttl-line-01-anime,
.is-active .hairmask_feature--ttl-line-01-anime {
  animation-delay: 0s;
  opacity: 1;
}
.is-active .hairmask_about--ttl-line-02-anime,
.is-active .hairmask_feature--ttl-line-02-anime {
  animation-delay: 0.2s;
}
.is-active .hairmask_about--ttl-line-03-anime,
.is-active .hairmask_feature--ttl-line-03-anime {
  animation-delay: 0.3s;
  opacity: 1;
}
.hairmask_about--movie {
  max-width: 802px;
  margin: 0 auto;
  padding: 12px 12px 0;
}
.hairmask_about--movie a {
  transform: translateY(-4px);
}
.hairmask_about--movie a::before {
  padding-top: calc(423 / 778 * 100%);
}
.hairmask_about--movie-img,
.hairmask_about--movie-img video {
  max-width: inherit;
  max-height: inherit;
}
.hairmask_about--movie-img {
  -webkit-mask-image: url("../images/hairmask/about-movie-mask.svg");
  mask-image: url("../images/hairmask/about-movie-mask.svg");
}
.hairmask_about--movie-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 23, 96, 0.59);
}
.hairmask_about--movie-play {
  top: 55%;
}
.hairmask_about--movie-play svg {
  width: 68px;
  height: auto;
}
.hairmask_about--img {
  background-image: url(../images/hairmask/about-img-deco1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 989px;
  height: 457px;
  padding-top: 56px;
  margin-top: -96px;
  margin-bottom: 36px;
}
.hairmask_about--bg_wrap {
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 440px;
}
.hairmask_about--bg {
  position: absolute;
  right: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  transition: all 0.8s linear;
}
.hairmask_about--bg_wrap,
.hairmask_about--bg_wrap.is-active .hairmask_about--bg,
.hairmask_about--bg img {
  width: 814px;
}
.hairmask_about--bg img {
  position: absolute;
  right: 0;
  max-width: inherit;
}
.hairmask_about--img .img_wrap {
  transition-delay: 0.6s;
}
.hairmask_about--img .img_wrap .img-ctr {
  transform: translateX(-10%);
  width: 356px;
  height: auto;
}
.hairmask_about--ttl-sm {
  font-size: 1.5rem; /* 24px */
  margin-bottom: 1em;
  line-height: 1.8;
}
.hairmask_about--wrap .imgarea {
  padding: 12px;
}
.hairmask_about--wrap svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hairmask_about--wrap .circle {
  stroke: #fff;
  stroke-width: 3px;
  fill: transparent;
  stroke-dasharray: 2166px;
  stroke-dashoffset: 2166px;
}
.hairmask_about--wrap .circle.active {
  animation: 5s linear infinite circleAnim;
}
.hairmask_about--video,
.hairmask_about--video video {
  border-radius: 50%;
  overflow: hidden;
}
.hairmask_about--video::before {
  padding-top: 100%;
}

@media print, screen and (min-width: 768px) {
  .hairmask_about--wrap {
    display: grid;
    grid-template-columns: calc(352 / 796 * 100%) auto;
    column-gap: calc(50 / 796 * 100%);
    align-items: center;
    max-width: 796px;
    margin-left: auto;
    margin-right: auto;
  }
  .hairmask_about--wrap > * {
    grid-row: 1/2;
  }
  .hairmask_about--wrap .imgarea {
    grid-column: 2/3;
  }
  .hairmask_about--wrap .txtarea {
    grid-column: 1/2;
  }
}
@media screen and (max-width: 767px) {
  .hairmask_about {
    padding-top: min(calc(100 / 375 * 100vw), 100px);
    padding-bottom: min(calc(218 / 375 * 100vw), 218px);
  }
  .hairmask_about .section_ttl {
    margin-bottom: 24px;
  }
  .hairmask_about .section_ttl img {
    width: 116px;
  }
  .hairmask_about--ttl-wrap {
    margin-bottom: 32px;
  }
  .hairmask_about--ttl {
    font-size: 1.875rem; /* 30px */
    flex-direction: column;
    text-align: center;
  }
  .hairmask_about--ttl img {
    width: 75px;
    margin-bottom: 1rem;
    margin-right: 0;
  }
  .hairmask_about .concept--ttl-line02:nth-of-type(1) {
    bottom: -8px;
    right: -38px;
    height: 40px;
  }
  .hairmask_about .concept--ttl-line02:nth-of-type(2) {
    top: -82px;
    left: 50%;
    height: 66px;
    z-index: -1;
  }
  .hairmask_about .concept--ttl-line02:nth-of-type(3) {
    bottom: 14px;
    left: -30px;
    height: 32px;
  }
  .hairmask_about--movie {
    padding: 10px 10px 0;
  }
  .hairmask_about--movie a::before {
    padding-top: 100%;
  }
  .hairmask_about--movie-img {
    -webkit-mask-image: url(../images/hairmask/about-movie-mask_sp.svg);
    mask-image: url(../images/hairmask/about-movie-mask_sp.svg);
  }
  .hairmask_about--movie-play svg {
    width: 56px;
  }
  .hairmask_about--movie-play .font-en {
    font-size: 0.813rem; /* 13px */
    margin-top: 0.5em;
  }
  .hairmask_about--img {
    background-image: url(../images/hairmask/about-img-deco1_sp.png);
    background-size: 376px;
    padding-top: 44px;
    margin-top: -72px;
  }
  .hairmask_about--bg_wrap,
  .hairmask_about--bg_wrap.is-active .hairmask_about--bg,
  .hairmask_about--bg img {
    width: 600px;
  }
  .hairmask_about--bg_wrap {
    top: 40%;
    left: 56%;
    height: 324px;
  }
  .hairmask_about--img .img_wrap .img-ctr {
    transform: translateX(-2%);
    width: 256px;
  }
  .hairmask_about--wrap {
    margin-top: -128px;
  }
  .hairmask_about--wrap .imgarea {
    padding: 10px;
    margin-bottom: 16px;
  }
  .hairmask_about--ttl-sm {
    font-size: 1.375rem; /* 22px */
  }
  .hairmask_about--wrap .txtarea p:not(.txt-attention) {
    font-size: 0.813rem; /* 13px */
  }
}

/* product
*************************************************** */
.hairmask_product {
  padding-bottom: min(calc(172 / var(--wid_vw)), 172px);
}
.hairmask_product .section_ttl {
  margin-bottom: 40px;
}
.hairmask_product--ttl {
  font-size: min(calc(36 / 914 * 100vw), 2.25rem); /* 36px */
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  line-height: 1.5;
  transform: translateY(2.167em); /* 78px */
  z-index: 1;
}
.hairmask_product--img {
  transform: translateY(calc(-117 / 658 * 100%));
}
.hairmask_product--ttl-sm {
  font-size: min(calc(24 / 914 * 100vw), 1.5rem); /* 24px */
  margin-bottom: 0.5em;
}
.hairmask_product--btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: calc(69 / 730 * 100%);
  max-width: 730px;
  margin-top: -248px;
  margin-left: auto;
  margin-right: auto;
}
.hairmask_product--btns .btn a {
  display: block;
}
.hairmask_product--btns .btn-text {
  min-width: inherit;
  min-height: min(calc(56 / 914 * 100vw), 56px);
  padding-right: 32px;
}

@media print, screen and (min-width: 768px) {
  .hairmask_product--btns li > *:not(.btn) {
    width: calc(180 / 330 * 100%);
  }
  .hairmask_product--btns li:nth-child(odd) > *:not(.btn) {
    margin-right: auto;
    text-align: right;
  }
  .hairmask_product--btns li:nth-child(even) > *:not(.btn) {
    margin-left: auto;
  }
  .hairmask_product--btns .txt-lg {
    font-size: min(calc(15 / 914 * 100vw), 0.938rem); /* 15px */
  }
  .hairmask_product--btns .btn-text {
    font-size: min(calc(14 / 914 * 100vw), 0.875rem); /* 14px */
  }
}
@media screen and (max-width: 914px) and (min-width: 768px) {
  .hairmask_product--btns {
    margin-top: calc(-248 / 914 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .hairmask_product {
    padding-bottom: min(calc(148 / 375 * 100vw), 148px);
  }
  .hairmask_product .section_ttl {
    margin-bottom: 20px;
  }
  .hairmask_product .section_ttl img {
    width: 160px;
  }
  .hairmask_product--ttl {
    font-size: 1.875rem; /* 30px */
  }
  .hairmask_product--img {
    width: 594px;
    max-width: inherit;
    margin-left: calc((100% - 594px) / 2);
  }
  .hairmask_product--btns {
    margin-top: -124px;
    column-gap: 0;
    text-align: center;
    margin-bottom: 1rem;
  }
  .hairmask_product--ttl-sm {
    font-size: 1.125rem; /* 18px */
  }
  .hairmask_product--btns .txt-lg {
    font-size: 0.75rem; /* 12px */
    margin-bottom: 0;
  }
  .hairmask_product .btn {
    width: 100%;
    margin-left: 0;
  }
}

/* feature
**************************************** */
.hairmask_feature--ttl-wrap {
  margin-bottom: 104px;
}
.hairmask_feature--ttl {
  margin-top: 0;
  font-size: 2.25rem; /* 36px */
  line-height: 1.5;
}
.hairmask_feature--ttl-txt-sm {
  display: block;
  font-size: 1.375rem; /* 22px */
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1s ease-out, filter 0.5s linear, transform 1s ease-out;
}
.is-active .hairmask_feature--ttl-txt-sm {
  opacity: 1;
  filter: blur(0);
  transition-delay: 0.8s;
}
.hairmask_feature--ttl-txt {
  transition-delay: 0.8s;
}
.hairmask_feature .concept--ttl-line02:nth-of-type(1) {
  bottom: 48px;
  right: -48px;
}
.hairmask_feature .concept--ttl-line02:nth-of-type(2) {
  top: -60px;
  bottom: inherit;
  left: 45%;
  right: inherit;
  transform: translateX(-50%);
  opacity: 0.5;
}
.hairmask_feature .concept--ttl-line02:nth-of-type(3) {
  bottom: -58px;
  left: -66px;
  right: inherit;
}
.hairmask_feature--blc:not(:last-child) {
  margin-bottom: 146px;
}
.hairmask_feature--ttl-sm {
  font-size: 1.75rem; /* 28px */
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-bottom: 1.5em;
}
.hairmask_feature--ttl-sm .num {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  font-size: 2.5rem; /* 40px */
  color: #1843b3;
  margin-bottom: 0.8em;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0;
}
.hairmask_feature--ttl-sm .num::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: rotate(45deg);
  z-index: -1;
}
.hairmask_feature--ttl-sm .txt-attention {
  font-size: 0.625rem; /* 10px */
  letter-spacing: 0.04em;
  margin-top: 0.5em;
}
.hairmask_feature--wrap-figure .txt-lg {
  display: table;
  font-weight: 500;
  padding-bottom: 0.5em;
  border-bottom: 1px solid;
  margin-bottom: 1.5em;
}
.hairmask_feature--wrap-figure .txt-lg sup {
  vertical-align: super;
}
.hairmask_feature--img,
.hairmask_feature--bg_wrap {
  height: min(calc(308 / 880 * 100vw), 308px);
}
.hairmask_feature--bg_wrap {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.hairmask_feature--bg {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 0;
  height: 100%;
  overflow: hidden;
  transition: all 0.8s linear;
}
.hairmask_feature--bg_wrap.is-active .hairmask_feature--bg,
.hairmask_feature--bg img {
  width: min(calc(581 / 880 * 100vw), 581px);
}
.hairmask_feature--bg img {
  position: absolute;
  top: -40%;
  left: 0;
  max-width: inherit;
  height: min(calc(518 / 880 * 100vw), 518px);
}
.hairmask_feature--img .img_wrap {
  transition-delay: 0.6s;
}
.hairmask_feature--img .img_wrap .img-ctr {
  transform: translateY(5%);
  width: 100%;
  height: auto;
}
.hairmask_feature--wrap .hairmask_feature--ttl-sm {
  line-height: 1.4;
  letter-spacing: 0.08em;
  margin-bottom: 0.8em;
}
.hairmask_feature--blc-sm:not(:last-child) {
  margin-bottom: 80px;
}
.hairmask_feature--ttl-bg {
  width: 100%;
  max-width: 360px;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  font-size: 1rem; /* 16px */
  background-color: #9b4d8f;
  margin-bottom: 2.5em !important;
}
.hairmask_feature--blc-sm:nth-child(odd) .hairmask_feature--ttl-bg {
  background-color: #4fa5cb;
}
.hairmask_feature--list li {
  position: relative;
}
.hairmask_feature--list li:not(:last-child) {
  margin-bottom: 1.5rem;
  height: 5rem;
}
.hairmask_feature--list li:nth-child(1) {
  margin-left: 7rem;
}
.hairmask_feature--list li:nth-child(2) {
  margin-left: 3.5rem;
}
.hairmask_feature--list li::before,
.hairmask_feature--list li:not(:last-child)::after {
  content: "";
  position: absolute;
}
.hairmask_feature--list li::before {
  top: 0.3rem;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}
.hairmask_feature--list li:not(:last-child)::after {
  top: 0.8rem;
  left: -1.4rem;
  width: 1px;
  height: 122%;
  transform: rotate(29deg);
  background-color: rgba(255, 255, 255, 0.5);
}
.hairmask_feature--list .bold {
  font-size: 1rem; /* 16px */
  margin-bottom: 0.5em;
  text-indent: 1.25rem;
}
.hairmask_feature--list sup {
  vertical-align: super;
  font-size: 0.625rem;
}
.hairmask_feature--list p {
  padding-left: 0.5rem;
}
.hairmask_feature--item .imgarea {
  margin-bottom: 1.25rem;
  width: calc(270 / 254 * 100%);
  margin-left: -10%;
}
.hairmask_feature--ttl-col {
  font-size: 1rem; /* 16px */
  margin-bottom: 1em;
}
.hairmask_feature--ttl-wrap2 {
  margin-bottom: 0;
}
.hairmask_feature--ttl-img {
  display: block !important;
  width: 152px;
  height: 152px;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
}
.hairmask_feature--ttl2 .note {
  margin-top: 1.5em;
  font-size: 0.75rem; /* 12px */
}
.hairmask_feature {
  padding-bottom: min(calc(150 / var(--wid_vw)), 150px);
}

@media print, screen and (min-width: 768px) {
  .hairmask_feature--wrap-figure {
    display: grid;
    grid-template-columns: calc(446 / 777 * 100%) auto;
    max-width: 777px;
    margin-left: auto;
    margin-right: auto;
  }
  .hairmask_feature--wrap-figure .imgarea .txt-lg {
    margin-left: auto;
    margin-right: auto;
  }
  .hairmask_feature--wrap {
    display: flex;
    column-gap: calc(24 / 800 * 100%);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .hairmask_feature--blc-sm:nth-child(odd) .hairmask_feature--wrap {
    flex-direction: row-reverse;
  }
  .hairmask_feature--wrap .imgarea {
    width: calc(459 / 800 * 100%);
    padding-top: 1.5rem;
  }
  .hairmask_feature--wrap .txtarea {
    flex: 1;
  }
  .hairmask_feature--blc:nth-child(odd) .hairmask_feature--wrap .txtarea {
    margin-right: calc((380 - 459) / 800 * 100%);
  }
  .hairmask_feature--blc:nth-child(even) .hairmask_feature--wrap .txtarea {
    margin-left: calc((370 - 459) / 800 * 100%);
  }
  .hairmask_feature--wrap-figure .txt-attention.pc-none {
    display: none;
  }
  .hairmask_feature--col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(136 / 644 * 100%);
    max-width: 644px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .hairmask_feature {
    padding-bottom: min(calc(200 / 375 * 100vw), 200px);
  }
  .hairmask_feature--ttl {
    font-size: 1.625rem; /* 26px */
  }
  .hairmask_feature--ttl-txt-sm {
    font-size: 1.25rem; /* 20px */
    margin-bottom: 0.2em;
  }
  .hairmask_feature .concept--ttl-line02:nth-of-type(1) {
    bottom: 38px;
    right: -12px;
    height: 36px;
  }
  .hairmask_feature .concept--ttl-line02:nth-of-type(2),
  .hairmask_feature .concept--ttl-line02:nth-of-type(3) {
    height: 48px;
  }
  .hairmask_feature .concept--ttl-line02:nth-of-type(2) {
    top: -44px;
  }
  .hairmask_feature .concept--ttl-line02:nth-of-type(3) {
    bottom: -40px;
    left: -26px;
  }
  .hairmask_feature--blc:not(:last-child) {
    margin-bottom: 96px;
  }
  .hairmask_feature--ttl-sm {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
  }
  .hairmask_feature--ttl-sm .num {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  .hairmask_feature--wrap-figure .txt-lg {
    font-size: 0.938rem; /* 15px */
    margin-bottom: 0.5em;
  }
  .hairmask_feature--wrap-figure .txt-lg sup {
    font-size: 0.625rem;
  }
  .hairmask_feature--wrap-figure .txt-attention.sp-none {
    display: none;
  }
  .hairmask_feature--img,
  .hairmask_feature--bg_wrap {
    width: calc(300 / var(--wid_vw));
    height: calc(360 / var(--wid_vw));
    margin-left: auto;
    margin-right: auto;
  }
  .hairmask_feature--bg_wrap.is-active .hairmask_feature--bg,
  .hairmask_feature--bg img {
    width: calc(464 / var(--wid_vw));
  }
  .hairmask_feature--bg {
    top: -2%;
    left: -25%;
  }
  .hairmask_feature--bg img {
    top: -30%;
    height: calc(414 / var(--wid_vw));
  }
  .hairmask_feature--img .img_wrap .img-ctr {
    width: 110%;
    max-width: inherit;
    transform: translateX(-8%);
  }
  .hairmask_feature--wrap-figure .imgarea img {
    display: block;
    width: calc(256 / var(--wid_vw));
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-3%);
  }
  .hairmask_feature--wrap-figure .imgarea .txt-attention {
    display: table;
    width: calc(300 / var(--wid_vw));
    margin-left: auto;
    margin-right: auto;
    font-size: calc(11 / var(--wid_vw));
    margin-top: -2em;
  }
  .hairmask_feature--wrap .imgarea {
    width: 115%;
  }
  .hairmask_feature--blc-sm:nth-child(odd) .imgarea {
    margin-left: -14%;
  }
  .hairmask_feature--blc-sm:nth-child(even) .imgarea {
    margin-right: -14%;
  }
  .hairmask_feature--blc .product--txt-sub {
    margin-bottom: 24px;
  }
  .hairmask_feature--wrap .txtarea {
    margin-top: -24px;
  }
  .hairmask_feature--wrap .hairmask_feature--ttl-sm {
    font-size: 1.5rem; /* 24px */
  }
  .hairmask_feature--ttl-bg {
    padding: 0.75em 1em;
    margin-bottom: 2em !important;
  }
  .hairmask_feature--item:not(:last-child) {
    margin-bottom: 56px;
  }
  .hairmask_feature--item .imgarea {
    width: calc(260 / 330 * 100%);
    margin-left: auto;
    margin-right: 15%;
  }
  .hairmask_feature--ttl2 {
    font-size: 2rem; /* 32px */
  }
  .hairmask_feature--ttl-img {
    width: 136px;
    height: 136px;
  }
  .hairmask_feature--ttl2 .sp-none-inline {
    display: none;
  }
  .hairmask_feature--ttl2 .note {
    margin-top: 0.5em;
    font-size: 0.625rem;
  }
}

/* hairmask_store
**************************************** */
.hairmask_store {
  padding-bottom: min(calc(120 / var(--wid_vw)), 120px);
}
.hairmask_store .section_ttl {
  margin-bottom: 50px;
}
.hairmask_store--wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.hairmask_store--wrap:nth-child(odd) {
  flex-direction: row-reverse;
}
.hairmask_store--wrap .imgarea {
  width: calc(147 / 375 * 100%);
}
.hairmask_store--wrap .txtarea {
  width: calc(100% - (147 / 375 * 100%));
  white-space: nowrap;
}
.hairmask_store--wrap .product--name {
  font-size: 1.375rem; /* 22px */
  text-align: left;
  letter-spacing: 0;
  line-height: 1.6;
  margin-bottom: 0.25em;
}
.hairmask_store--wrap .product--name + span {
  font-size: 0.75rem; /* 12px */
  letter-spacing: 0;
}

@media print, screen and (min-width: 768px) {
  .hairmask_store--blc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 790px;
    margin-left: auto;
    margin-right: auto;
  }
  .hairmask_store--btn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
    max-width: 492px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .hairmask_store {
    padding-bottom: min(calc(200 / 375 * 100vw), 200px);
  }
  .hairmask_store .section_ttl img {
    width: 100px;
  }
  .hairmask_store .product--txt-sub {
    margin-bottom: 8px;
  }
  .hairmask_store--wrap .imgarea {
    width: calc(96 / 330 * 100%);
  }
  .hairmask_store--wrap .txtarea {
    width: calc(100% - (96 / 330 * 100%));
    margin-top: -15%;
  }
  .hairmask_store--wrap .imgarea img {
    min-width: 150%;
  }
  .hairmask_store--wrap:nth-child(odd) .imgarea img {
    transform: translateX(-20%);
  }
  .hairmask_store--wrap:nth-child(even) .imgarea img {
    transform: translateX(-10%);
  }
  .hairmask_store--wrap .product--name {
    letter-spacing: -0.04em;
  }
  .hairmask_store--btn .btn:not(:last-child) {
    margin-bottom: 16px;
  }
}

/* hairmask_campaign
**************************************** */
.hairmask_campaign {
  padding-bottom: min(calc(152 / var(--wid_vw)), 152px);
}
.hairmask_campaign--date {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  letter-spacing: 0.1em;
}
.hairmask_campaign--date span {
  position: relative;
}
.hairmask_campaign--date span:not(:last-child) {
  padding-right: 3em;
}
.hairmask_campaign--date span:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  width: 1em;
  height: 1px;
  background-color: #fff;
}
.hairmask_campaign--ttl {
  display: grid;
  grid-template-columns: 96px auto;
  column-gap: 16px;
  align-items: center;
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
  margin-bottom: 1em;
}
.hairmask_campaign--txt {
  font-size: 1rem; /* 16px */
}
.hairmask_campaign--txt,
.hairmask_campaign--wrap .txt-xs {
  letter-spacing: 0.02em;
}
.hairmask_campaign--btn .btn a {
  display: block;
}
.hairmask_campaign--btn .btn-text {
  min-width: inherit;
}
.hairmask_campaign--btn .txt-attention {
  margin-top: 1em;
}
.hairmask_campaign--ttl-detail {
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
  margin-bottom: 1em;
}
.hairmask_campaign--detail_wrap {
  padding: 0.375rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: #212077;
}
.hairmask_campaign--detail {
  padding: 2.5rem 3.5rem;
  font-size: 0.813rem; /* 13px */
  height: calc(450px - 0.75rem);
  overflow: auto;
  text-align: justify;
}
.hairmask_campaign--detail * {
  line-height: 1.9;
}
.hairmask_campaign--detail::-webkit-scrollbar {
  width: 8px;
}
.hairmask_campaign--detail::-webkit-scrollbar:horizontal {
  height: 8px;
}
.hairmask_campaign--detail::-webkit-scrollbar-track {
  background-color: transparent;
  border: 4px solid #212077;
  border-radius: 8px;
  border: none;
}
.hairmask_campaign--detail::-webkit-scrollbar-thumb {
  background-image: linear-gradient(to bottom, #8e6da1, #4747be);
  border-radius: 8px;
  box-shadow: none;
}
.hairmask_campaign--detail p:not(:last-child) {
  margin-bottom: 1.5em;
}

@media print, screen and (min-width: 768px) {
  .hairmask_campaign--wrap {
    display: grid;
    grid-template-columns: 50% auto;
    column-gap: calc(48 / 800 * 100%);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .hairmask_campaign--btn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(46 / 706 * 100%);
    max-width: 706px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .hairmask_campaign {
    padding-bottom: min(calc(204 / 375 * 100vw), 204px);
  }
  .hairmask_campaign .section_ttl {
    font-size: 1.875rem; /* 30px */
  }
  .hairmask_campaign--date {
    text-align: left;
  }
  .hairmask_campaign--date span:not(:last-child) {
    padding-right: 1.5em;
  }
  .hairmask_campaign--date span:not(:last-child)::before {
    right: 0;
  }
  .hairmask_campaign--wrap {
    margin-bottom: 48px;
  }
  .hairmask_campaign--wrap .imgarea {
    margin-bottom: 30px;
  }
  .hairmask_campaign--wrap .txtarea p:not(:last-child) {
    margin-bottom: 1.5rem;
  }
  .hairmask_campaign--ttl {
    column-gap: 10px;
    font-size: 1.125rem; /* 18px */
  }
  .hairmask_campaign--ttl .font-en {
    font-size: 0.875rem; /* 14px */
  }
  .hairmask_campaign--txt {
    font-size: 0.813rem; /* 13px */
    line-height: 2;
  }
  .hairmask_campaign--wrap .txt-xs {
    font-size: 0.625rem; /* 10px */
  }
  .hairmask_campaign--btn {
    margin-bottom: 48px;
  }
  .hairmask_campaign--btn .btn:not(:last-child) {
    margin-bottom: 32px;
  }
  .hairmask_campaign--detail_wrap {
    border-radius: 4px;
    padding: 0.25rem;
  }
  .hairmask_campaign--detail {
    padding: 1.5rem 1rem 1.5rem 1.5rem;
    font-size: 0.688rem; /* 11px */
  }
}

/* ##############################################################################

    ARCHIVE

############################################################################## */
/* main_column
**************************************** */
.single .main_column {
  position: relative;
  z-index: 0;
  padding-top: 17vw;
}

/* --- post --- */
.post {
  position: relative;
}
.post--link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 999;
}
.post--date {
  font-size: 114%;
}
.no-image {
  background-size: 80% auto !important;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #eee;
  background-image: url(https://via.placeholder.com/160x48.png?text=LOGO);
}

@media print, screen and (max-width: 1100px) {
  .main_column {
    width: 100%;
    margin-right: 0;
  }
  .single .main_column {
    padding-top: 38vw;
  }
}
@media screen and (max-width: 767px) {
  .post--date {
    font-size: 100%;
  }
}

/* topics
**************************************** */
.posts-topics .post {
  max-width: 302px;
  margin-right: 3.6%;
}
.posts-topics .post:nth-child(3n) {
  margin-right: 0;
}
.posts-topics .post--date {
  margin-right: 16px;
  font-weight: bold;
}
.posts-topics .post--ttl {
  line-height: 1.714;
  letter-spacing: 0.04em;
}
.post--img::before {
  content: "";
  display: block;
  width: 100%;
  background: #102c97 url(../images/common/logo-wh.svg) center no-repeat;
  background-size: 100px;
}
.posts-topics .post--img::before {
  padding-top: 59.498%;
}
.home_topics .posts-topics {
  position: relative;
  margin-bottom: 94px;
  z-index: 10;
}
.home_topics .posts-topics .post:nth-child(3n + 2) {
  margin-top: calc(51px * 1);
}
.home_topics .posts-topics .post:nth-child(3n) {
  margin-top: calc(51px * 2);
}
.archive .posts-topics .post {
  margin-bottom: 8vw;
}
.archive .posts-topics .post--date {
  margin-bottom: 8px;
  font-size: 100%;
}
.text_toggle-btn {
  position: relative;
  border: 1px solid #fff;
  text-align: center;
  padding: 15px;
  cursor: pointer;
}
.text_toggle-btn:hover {
  opacity: 0.7;
}
.text_toggle-btn::after {
  content: "＋";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  font-size: 24px;
  height: 24px;
  line-height: 24px;
  margin: auto;
}
.text_toggle-btn.open::after {
  content: "－";
}
.text_toggle-elm {
  height: 0;
  overflow: hidden;
  transition: all 0.4s;
}
.text_toggle-elm.open {
  height: inherit;
}

@media print, screen and (max-width: 1100px) {
  .posts-topics {
    margin-bottom: 54px;
  }
}

@media screen and (min-width: 768px) {
  .post_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .post_flex_img {
    min-width: 150px;
    max-width: 150px;
    margin-right: 20px;
  }
  .mce-content-body .post_flex_img img {
    margin: auto;
  }
  .post_flex_box {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .posts-topics .post {
    display: block;
    max-width: 100%;
    margin-bottom: 80px;
    margin-top: 0 !important;
  }
  .posts-topics .post--img {
    margin-bottom: 11px;
  }
  .posts-topics .post--date {
    margin-bottom: 4px;
    margin-right: 0;
  }
  .posts-topics .post--ttl {
    line-height: 1.83;
  }
  .home_topics .posts-topics {
    margin-bottom: 43px;
  }
  .home_topics .posts-topics .post:nth-child(n + 2) {
    margin-bottom: 0;
  }
  .home_topics .posts-topics .post:nth-child(n + 3) {
    display: none;
  }
  .archive .posts-topics .post {
    margin-bottom: 18vw;
  }
  .archive .posts-topics .post--date {
    margin-bottom: 0;
  }
}

/* news
**************************************** */
/* --- posts-news --- */
.posts-news {
  margin-bottom: 30px;
}
.posts-news .post:not(:last-child) {
  margin-bottom: 20px;
}
.posts-news .post--date {
  position: absolute;
  display: inline-block;
  line-height: 2;
}
.posts-news .post--ttl {
  padding-left: 8em;
  line-height: 2;
}
.posts-news a[href="javascript:void(0);"],
.posts-news a[href="javascript:void(0);"]::before {
  color: inherit;
  cursor: inherit;
  opacity: 1;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .posts-news {
    margin-bottom: 16px;
  }
  .posts-news .post--date {
    font-size: 133%;
    line-height: 1.8;
  }
  .home_news .posts-news .post:nth-child(n + 3) {
    display: none;
  }
}

/* ##############################################################################

    SINGLE

############################################################################## */

/* single
**************************************** */
.pc-img {
  display: block;
}
.sp-img {
  display: none;
}
.eyecatch {
  margin-bottom: 80px;
}
.eyecatch img {
  width: 100%;
}
.article--ttl {
  font-size: 228%;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.single .hairmask_campaign--detail::-webkit-scrollbar-thumb {
  background-image: linear-gradient(to bottom, #4660a1, #deb8e0);
}

@media print, screen and (min-width: 768px) {
  .single .hairmask_campaign--detail {
    padding: 1rem 1.5rem;
  }
  .single .hairmask_campaign--detail::-webkit-scrollbar {
    width: 6px;
  }
  .single .hairmask_campaign--detail::-webkit-scrollbar:horizontal {
    height: 6px;
  }
  .single .hairmask_campaign--detail::-webkit-scrollbar-track {
    border-radius: 6px;
  }
  .single .hairmask_campaign--detail::-webkit-scrollbar-thumb {
    border-radius: 6px;
  }
}
@media screen and (max-width: 767px) {
  .sp-img {
    display: block;
  }
  .pc-img {
    display: none;
  }
  .post--section_ttl {
    font-size: 166%;
    line-height: 1.9;
  }
  .eyecatch {
    margin: auto calc(50% - 50vw) 60px;
  }
  .article--ttl {
    font-size: 200%;
  }
  .single .hairmask_campaign--detail_wrap {
    width: 110%;
    margin-left: -5%;
  }
  .single .hairmask_campaign--detail {
    font-size: 0.813rem; /* 13px */
  }
}

/* pass
**************************************** */
#pass p {
  margin-bottom: 1em;
}
#pass input[name="post_password"] {
  padding: 5px;
  border: solid 1px #aaa;
  outline: none;
}
#pass input[type="submit"] {
  padding: 4px 16px;
  letter-spacing: 0.15em;
  background-color: #ddd;
  border-radius: 4px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.4s ease-out;
}
#pass input[type="submit"]:hover {
  opacity: 0.7;
}

/* wp-pagenavi
**************************************** */
.wp-pagenavi {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}
.wp-pagenavi .pages {
  display: block;
  text-align: center;
  width: 100%;
  margin-bottom: 2em;
  font-size: 150%;
}
.wp-pagenavi a,
.wp-pagenavi span.current {
  position: relative;
  z-index: 0;
  font-size: 150%;
  line-height: 1;
  text-align: center;
}
.wp-pagenavi-single a {
  font-size: 100%;
}
.wp-pagenavi span.current::after,
.wp-pagenavi a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  border: 0.5px solid rgba(255, 255, 255, 0.8);
  transition: 0.4s ease-out;
}
.wp-pagenavi span.current::after,
.wp-pagenavi a:hover::after {
  background-color: rgba(255, 255, 255, 0.3);
}
.wp-pagenavi a {
  color: #fff;
}
.wp-pagenavi > *:not(.pages) {
  max-width: calc(100% / 2.6);
}
.archive .wp-pagenavi > *:not(.pages) {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.wp-pagenavi-single a[rel="prev"],
.wp-pagenavi-single a[rel="next"] {
  width: 40px;
}
.wp-pagenavi > *:not(.pages) {
  margin-bottom: 4px;
}
.wp-pagenavi > *:not(.pages):not(:last-child) {
  margin-right: 3%;
}
.wp-pagenavi-single a.top {
  padding-top: 7px;
}
.wp-pagenavi-single > *:not(.pages):not(:last-child) {
  margin-right: 50px;
}
.wp-pagenavi .extend {
  width: 24px !important;
}
.wp-pagenavi a[rel="prev"]::before,
.wp-pagenavi a[rel="next"]::before,
.wp-pagenavi .first::before,
.wp-pagenavi .last::before,
.wp-pagenavi .first::after,
.wp-pagenavi .last::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-top: 1px solid;
  border-right: 1px solid;
}
.wp-pagenavi a[rel="prev"]::before,
.wp-pagenavi a[rel="next"]::before,
.wp-pagenavi .first::before,
.wp-pagenavi .last::before,
.wp-pagenavi .first::after,
.wp-pagenavi .last::after {
  width: 8px;
  height: 8px;
}
.wp-pagenavi a[rel="prev"]::before,
.wp-pagenavi .first::before,
.wp-pagenavi .first::after {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.wp-pagenavi a[rel="next"]::before,
.wp-pagenavi .last::before,
.wp-pagenavi .last::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.wp-pagenavi-single a[rel="prev"]::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.wp-pagenavi-single a[rel="next"]::before {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.wp-pagenavi .first::before,
.wp-pagenavi .last::before {
  left: -6px;
}
.wp-pagenavi .first::after,
.wp-pagenavi .last::after {
  right: -6px;
}
.wp-pagenavi-single {
  margin-top: 140px;
}
.page-404 .btn-text,
.wp-pagenavi-single .btn-text {
  padding: 14px 14px 14px 20px;
  font-size: 150%;
}
.page-404 .btn-arrow,
.wp-pagenavi-single .btn-arrow {
  left: 20px;
  right: auto;
  border-right: none;
  border-left: 1px solid;
  transform: skewX(-45deg);
}

@media screen and (max-width: 767px) {
  .archive .wp-pagenavi > *:not(.pages) {
    width: 32px;
    height: 32px;
  }
  .wp-pagenavi-single > *:not(.pages):not(:last-child) {
    margin-right: 32px;
  }
  .wp-pagenavi .first::before,
  .wp-pagenavi .last::before {
    left: -5px;
  }
  .wp-pagenavi > *:not(.pages):not(:last-child) {
    margin-right: 4%;
  }
  .wp-pagenavi .first::after,
  .wp-pagenavi .last::after {
    right: -5px;
  }
}

/* pass
**************************************** */
.single .pass {
  width: 100%;
}
.single .pass p:first-child {
  margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
  .single .pass p:first-child {
    text-align: left;
  }
}

/* attention（calm_night）
**************************************** */
.product_howto--attention {
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  padding: 25px 30px;
  max-width: 740px;
  margin: 90px auto 0;
}
.product_howto--attention-logo {
  width: 75px;
  margin-right: 20px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .product_howto--attention {
    display: block;
    padding: 20px 15px;
    margin: 100px auto 0;
  }
  .product_howto--attention-logo {
    margin: 0 auto 15px;
  }
  .product_howto--attention-txt {
    font-size: 14px;
  }
}