@charset "UTF-8";
/* CSS Document */

/* adobe font は htmlで対応 */

/* 初期設定
------------------------------------------------------------ */

:root {
  --header-height: 64px;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: futura-pt, biz-udpgothic, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 10px;
}
body {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: var(--header-height) 1fr auto;
  position: relative;
  color: #6c4f2c;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  background-color: #fff;
  overflow-wrap: break-word;
}
body.scroll-prevent {
  overflow: hidden;
}

/* 文字リンク色 */
a,
button {
  -webkit-transition: color 0.3s ease;
  transition: opacity 0.3s ease;
  outline: none;
}
a:link {
  text-decoration: none;
  color: #6c4f2c;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:visited {
  text-decoration: none;
  color: #6c4f2c;
}
a:active,
button:active {
  text-decoration: none;
  color: #6c4f2c;
}
a:hover,
button:hover {
  text-decoration: none;
  color: #6c4f2c;
  opacity: 0.7;
}

/* p justify */
p {
  margin: 0;
  padding: 0;
  text-align: justify;
  text-justify: auto;
}
i {
  font-style: italic;
}
strong {
  font-weight: bold;
}
span.ruby {
  font-size: 75%;
}
img {
  line-height: 0;
  vertical-align: bottom;
}
/* 見出しリセット */
h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
  line-height: 1.6;
}
/* リストリセット */
ul,
ol {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

/* フォームリセット */
input[type="text"],
textarea {
  font-size: inherit;
}
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s !important;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  :root {
    --header-height: 48px;
  }

  body {
    grid-template-rows: var(--header-height) 1fr auto;
    font-size: 1.2rem;
  }
}

/* 共通設定
------------------------------------------------------------ */

.img_box img {
  width: 100%;
  height: auto;
}

.pc {
  display: block;
}
.sp {
  display: none;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

/* スクロール禁止 */
.scroll-prevent {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------------------------- */
/*
/* 全体共通
/*
/* --------------------------------------------------------------------------------------------- */

/* 共通スタイル
------------------------------------------------------------ */
.cmnSection {
  width: 100%;
}

.cmnInner {
  width: 100%;
  max-width: calc(1024px + (36px * 2));
  margin: 0 auto;
  padding: 0 36px;
}

.cmnTtl_box {
  width: 100%;
  max-width: 686px;
  margin: 0 auto;
  padding-bottom: 32px;
  border-bottom: #9a8a64 solid 1px;
}
.cmnTtl_box .ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cmnTtl_box .ttl .en_ttl {
  font-size: 2rem;
  line-height: 1;
}
.cmnTtl_box .ttl .jp_ttl {
  margin-top: 21px;
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  .cmnInner {
    max-width: 100%;
    padding: 0 36px;
  }

  .cmnTtl_box {
    max-width: 100%;
    padding-bottom: 18px;
  }
  .cmnTtl_box .ttl .en_ttl {
    font-size: 1.6rem;
  }
  .cmnTtl_box .ttl .jp_ttl {
    margin-top: 12px;
    font-size: 2.8rem;
  }
}

/* ヘッダー
------------------------------------------------------------ */
/*　スマホ表示時 */

header {
  width: 100%;
  height: var(--header-height);
  position: fixed;
  z-index: 9999;
}
header .cmnInner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: var(--header-height);
  /* gap: 0 32px; */
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  position: absolute;
  z-index: 2;
}
header .cmnInner::before {
  content: "";
  width: 100%;
  height: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  opacity: 0.1;
}

header .ttlLogo {
  gird-column: 1 / 2;
  grid-row: 1 / 2;
  margin-left: 45px;
}

header .headerNav {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}
header .headerNav .items {
  display: flex;
  justify-content: flex-end;
  height: 100%;
}
header .headerNav .items a,
header .headerNav .items span {
  display: flex;
  align-items: center;
  padding: 0 0.75em;
  font-size: 1.8rem;
  height: 100%;
}
header .headerNav .items a:hover,
header .headerNav .items.open span {
  background: #fde361;
}
header .headerNav .items .subItems {
  display: none;
  justify-content: center;
  gap: 0 18px;
  width: 100vw;
  height: auto;
  padding: 24px 36px;
  position: absolute;
  top: var(--header-height);
  left: 0;
  background: #fde361;
}
header .headerNav .items.open .subItems {
  display: flex;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

/*フェードインアニメ*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

header .headerNav .items .item:nth-child(1) {
  display: none;
}

header .headerNav .items.open .subItems::before {
  content: "";
  width: 100%;
  height: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  opacity: 0.1;
}

header .headerNav .items .subItems .subItem {
  width: calc((1024px - (18px * 4)) / 5);
}
header .headerNav .items .subItems .subItem a {
  display: block;
  padding: 0;
}
header .headerNav .items .subItems .subItem a:hover {
  opacity: 1;
}
header .headerNav .items .subItems .subItem a .txt {
  margin-top: 18px;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
}
header .headerNav .items .subItems .subItem a .img_box {
  transition: filter ease 0.3s;
}
header .headerNav .items .subItems .subItem a:hover .img_box {
  filter: brightness(1.1);
}

header .navBtns {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  display: flex;
  align-items: center;
  gap: 0 6px;
  height: 100%;
  padding: 0 45px 0 18px;
  background: #fde361;
}

header .navBtns .text {
  display: none;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    z-index: 9999;
    background: #fff;
  }
  header .cmnInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 0 19px 22px;
  }
  header .cmnInner::before {
    content: "";
    width: 100%;
    height: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    opacity: 0.1;
  }

  header .ttlLogo {
    gird-column: 1 / 2;
    grid-row: 1 / 2;
    width: auto;
    height: 32px;
    margin-left: 0; /*12px*/
  }
  header .ttlLogo img {
    width: auto;
    height: 100%;
  }

  header .headerNav {
    width: 100vw;
    height: calc(100vh - var(--header-height));
    padding: 90px 22px 0;
    position: absolute;
    top: var(--header-height);
    left: 100vw;
    z-index: -1;
    background: #fde361;
    display: inline-block;
  }

  header .headerNav .items {
    display: inline-block;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    position: relative;
    background: #fde361;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  header .headerNav .items.open .subItems {
    display: block;
  }

  header .headerNav .items:after {
    content: "";
    background: #000;
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  header header .headerNav .items a,
  header .headerNav .items span {
    display: flex;
    align-items: center;
    padding: 0 0.75em 0.75em;
    font-size: 2rem;
    height: 100%;
  }
  header .headerNav .items a:hover,
  header .headerNav .items.open span {
    background: #fde361;
  }

  header .headerNav .items .item:nth-child(1) {
    display: inline-block;
  }

  header .headerNav .items .subItems {
    display: block;
    position: relative;
    padding: 0 0;
    top: 0;
    left: 0;
    margin-bottom: 20px;
  }
  header .headerNav .items.open .subItems::before {
    content: none;
  }
  header .headerNav .items .subItems .subItem:not(:first-of-type) {
    margin-top: 18px;
    /* padding-top: 18px; */
    /* border-top: rgba(182, 162, 149, 0.5) dotted 1px; */
  }
  header .headerNav .items .subItems .subItem {
    width: 100%;
    position: relative;
  }

  header .headerNav .items .subItems .subItem a {
    display: flex;
    padding: 0;
  }

  header .headerNav .items .subItems .subItem a:hover {
    opacity: 1;
  }
  header .headerNav .items .subItems .subItem a .txt {
    margin-top: 0;
    margin-left: 3.5rem;
    font-size: 1.4rem;
    text-align: left;
  }

  header .headerNav .items .subItems .subItem a .txt:before {
    content: "";
    width: 10px;
    height: 1px;
    background: #6c4f2c;
    position: absolute;
    z-index: 5;
    left: 1.5rem;
    top: 10px;
  }

  header .headerNav .items .subItems .subItem a .img_box {
    display: none;
  }

  /* header .headerNav .items .subItems .subItem a .img_box {
    width: 36%;
    transition: filter ease 0.3s;
  }
  header .headerNav .items .subItems .subItem a:hover .img_box {
    filter: brightness(1.1);
  } */

  header .navBtns {
    padding: 0 12px 0 6px;
    height: auto;
    display: flex;
    justify-content: space-around;
  }

  header .navBtns .text {
    display: block;
  }
  header .navBtn a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
  }
}

/* ハンバーガーボタン */
header .hamberger {
  width: var(--header-height);
  height: var(--header-height);
  padding: 0;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fde361;
}
header .hamberger .inner {
  width: 22px;
  height: 22px;
  position: relative;
}

header .hamberger .inner span {
  display: inline-block;
  width: 22px;
  height: 1px;
  position: absolute;
  background: #212121;
  transition: background 0.7s ease;
}
header .hamberger .inner span:nth-last-of-type(1) {
  top: 7px;
  animation: menu-bar01 0.4s forwards;
}
header .hamberger .inner span:nth-last-of-type(2) {
  bottom: 7px;
  animation: menu-bar02 0.4s forwards;
}
header.open .hamberger .inner span:nth-of-type(1) {
  animation: active-menu-bar01 0.4s forwards;
}
header.open .hamberger .inner span:nth-of-type(2) {
  animation: active-menu-bar02 0.4s forwards;
}
@keyframes menu-bar01 {
  0% {
    transform: translateY(3.5px) rotate(45deg);
  }
  50% {
    transform: translateY(3.5px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar02 {
  0% {
    transform: translateY(-3.5px) rotate(-45deg);
  }
  50% {
    transform: translateY(-3.5px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-3.5px) rotate(0);
  }
  100% {
    transform: translateY(-3.5px) rotate(45deg);
  }
}
@keyframes active-menu-bar02 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(3.5px) rotate(0);
  }
  100% {
    transform: translateY(3.5px) rotate(-45deg);
  }
}

/* PC時対応 */
@media screen and (min-width: 751px) {
  header .hamberger {
    display: none;
  }
}

/* SP時対応 */
/* @media screen and (max-width: 750px) {
  header .hamberger {
    display: block;
  }
} */

/* メイン
------------------------------------------------------------ */
main {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

/* フッター
------------------------------------------------------------ */
footer {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  background: #fde361;
}
footer .cmnInner {
  display: flex;
  padding-top: 90px;
  padding-bottom: 90px;
}
footer .footerLogo {
  width: 32%;
}
footer .footerNav {
  width: 68%;
}
footer .footerNav .items {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(5, auto) 1fr;
  gap: 1em;
  width: 100%;
}
footer .footerNav .items .item {
  font-size: 1.8rem;
}
footer .footerNav .items .item .subItems {
  margin-left: 1em;
  font-size: 1.2rem;
}
footer .footerNav .items .item .subItems .subItem {
  margin-top: 12px;
}

footer .footerNav .items .home,
footer .footerNav .items .products {
  grid-column: 1 / 2;
}
footer .footerNav .items .home {
  grid-row: 1 / 2;
}
footer .footerNav .items .products {
  grid-row: 2 / 6;
}

footer .footerNav .items .forSalon,
footer .footerNav .items .download,
footer .footerNav .items .contact,
footer .footerNav .items .toEC,
footer .footerNav .items .toInsta {
  grid-column: 2 / 3;
}

footer .footerNav .items .forSalon {
  grid-row: 2 / 3;
}
/*
footer .footerNav .items .download { grid-row: 2 / 3; }
footer .footerNav .items .contact { grid-row: 3 / 4; }
*/
footer .footerNav .items .toEC {
  grid-row: 4 / 5;
}
footer .footerNav .items .toInsta {
  grid-row: 5 / 6;
}

footer .footerNav .items .toEC {
  width: fit-content;
  padding: 4px 12px;
  background: #6c4f2c;
  border-radius: 4px;
  color: #fff;
}

footer .copyright {
  padding: 18px 0;
  text-align: center;
  background: #fff;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  footer .cmnInner {
    display: block;
    padding-top: 46px;
    padding-bottom: 46px;
  }
  footer .footerLogo {
    width: 66%;
    margin: 0 auto;
  }
  footer .footerLogo img {
    width: 100%;
  }
  footer .footerNav {
    width: 100%;
  }
  footer .footerNav .items {
    display: grid;
    grid-template-columns: repeat(3, calc((100% - (10px * 2)) / 3));
    grid-template-rows: repeat(4, auto) 1fr;
    gap: 0 10px;
    width: 100%;
    margin-top: 18px;
  }
  footer .footerNav .items .item {
    font-size: 1.6rem;
    letter-spacing: 0;
  }
  footer .footerNav .items .item .subItems {
    margin-left: 1em;
    font-size: 1.1rem;
  }
  footer .footerNav .items .item .subItems .subItem {
    padding: 0 1em;
  }

  footer .footerNav .items .home,
  footer .footerNav .items .products {
    grid-column: 1 / 4;
  }
  footer .footerNav .items .home {
    grid-row: 1 / 2;
  }
  footer .footerNav .items .products {
    grid-row: 2 / 3;
  }

  footer .footerNav .items .forSalon,
  footer .footerNav .items .download,
  footer .footerNav .items .contact {
    grid-row: 3 / 4;
    margin-top: 12px;
  }
  footer .footerNav .items .forSalon {
    grid-column: 1 / 2;
    justify-self: flex-start;
  }
  footer .footerNav .items .download {
    grid-column: 2 / 3;
    justify-self: center;
  }
  footer .footerNav .items .contact {
    grid-column: 3 / 4;
    justify-self: flex-end;
  }

  footer .footerNav .items .toEC,
  footer .footerNav .items .toInsta {
    grid-column: 1 / 4;
    justify-self: center;
    margin-top: 12px;
  }

  footer .footerNav .items .toEC {
    grid-row: 4 / 5;
  }
  footer .footerNav .items .toInsta {
    grid-row: 5 / 6;
  }

  footer .footerNav .items .toEC {
    padding: 2px 12px;
  }

  footer .copyright {
    padding: 6px 0;
    font-size: 1.1rem;
  }
}

/* ページタイトル
------------------------------------------------------------ */
#cmnPageTtl {
  height: 294px;
  background: #fde361;
}
#cmnPageTtl .cmnInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 100%;
}
#cmnPageTtl .ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#cmnPageTtl .ttl .en_txt {
  font-size: 2.4rem;
}
#cmnPageTtl .ttl .jp_txt {
  margin-top: 12px;
  padding-bottom: 36px;
  border-bottom: #6c4f2c solid 1px;
  font-size: 3rem;
}
#cmnPageTtl .copy {
  margin-top: 36px;
  font-size: 3.6rem;
  text-align: center;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #cmnPageTtl {
    height: 224px;
  }
  #cmnPageTtl .ttl .en_txt {
    font-size: 1.6rem;
  }
  #cmnPageTtl .ttl .jp_txt {
    margin-top: 6px;
    padding-bottom: 18px;
    font-size: 1.8rem;
  }
  #cmnPageTtl .copy {
    margin-top: 18px;
    font-size: 2rem;
  }
}

/* パンくずリスト
------------------------------------------------------------ */
#cmnBredLink {
  padding: 6px 45px;
  border-top: #b5a595 solid 1px;
  border-bottom: #b5a595 solid 1px;
}
#cmnBredLink .items {
  display: flex;
  justify-content: flex-start;
}
#cmnBredLink .items .item {
  display: flex;
  font-size: 1.2rem;
}
#cmnBredLink .items .item:not(:first-of-type) {
  display: flex;
  font-size: 1.2rem;
}
#cmnBredLink .items .item:not(:first-of-type)::before {
  content: "/";
  margin: 0 0.5em;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #cmnBredLink {
    display: none;
  }
}

/* 線つきタイトル
------------------------------------------------------------ */
.cmnLineTtl {
  display: flex;
  gap: 0 1em;
  align-items: center;
}
.cmnLineTtl::before,
.cmnLineTtl::after {
  content: "";
  width: auto;
  height: 1px;
  background: #6c4f2c;
  flex-grow: 1;
}

/* --------------------------------------------------------------------------------------------- */
/*
/* トップページ
/*
/* --------------------------------------------------------------------------------------------- */

/* メインビジュアル
-------------------------------------------------------------*/

#top #mainVisual {
  height: calc(100svh - 64px);
  position: relative;
  overflow: hidden;
}
#top #mainVisual .cmnInner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
}
#top #mainVisual .txt_box {
  width: fit-content;
  height: fit-content;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
#top #mainVisual .txt_box .txt {
  position: relative;
  z-index: 2;
}
#top #mainVisual .img_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
#top #mainVisual .img_box img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  object-fit: cover;
}
#top #mainVisual .bg {
  width: 576px;
  height: 576px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f8d41d;
  mix-blend-mode: multiply;
  z-index: 2;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #top #mainVisual {
    height: calc(100svh - 64px);
  }
  #top #mainVisual .txt_box .txt img {
    width: 100%;
    height: auto;
  }
  #top #mainVisual .bg {
    aspect-ratio: 1 / 1;
    width: calc(100% - (36px * 2));
    height: auto;
  }
}

/* ページナビ
-------------------------------------------------------------*/
#top #pageNav {
  padding: 144px 0 162px;
}
#top #pageNav .cmnInner {
  padding: 0;
}
#top #pageNav .txt_box {
  line-height: 1.5;
}
#top #pageNav .txt_box .ttl {
  width: fit-content;
  margin: 0 auto;
  font-size: 3.6rem;
}
#top #pageNav .txt_box .copy {
  width: fit-content;
  margin: 36px auto 0;
  font-size: 2.8rem;
}

#top #pageNav .slide_box {
  margin-top: 54px;
  position: relative;
}

#top #pageNav .slide_box .items {
  display: flex;
  justify-content: space-between;
  padding: 0;
  position: relative;
}
#top #pageNav .slide_box .items .item {
  display: flex;
  justify-content: space-between;
  width: 127px;
  position: relative;
  z-index: 2;
}
#top #pageNav .slide_box .items .item a .name {
  font-size: 1.2rem;
  text-align: center;
}
#top #pageNav .slide_box .items .item a .img_box img {
  transition: transform 0.15s ease;
}
#top #pageNav .slide_box .items .item a:hover .img_box img {
  transform: scale(1.08);
}

#top #pageNav .slide_box .items .item a .name {
  margin-top: 18px;
}
#top #pageNav .slide_box .items .shadow img {
  width: 100%;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #top #pageNav {
    padding: 72px 0 89px;
  }
  #top #pageNav .cmnInner {
    padding: 0;
  }
  #top #pageNav .txt_box .ttl {
    width: fit-content;
    margin: 0 auto;
    font-size: 2.6rem;
  }
  #top #pageNav .txt_box .copy {
    width: fit-content;
    margin: 28px auto 0;
    font-size: 2rem;
  }

  #top #pageNav .slide_box {
    width: 100%;
    overflow-y: scroll;
  }
  #top #pageNav .slide_box .items {
    display: flex;
    justify-content: flex-start;
    width: fit-content;
    position: relative;
  }
  #top #pageNav .slide_box.items .item {
    display: flex;
    justify-content: space-between;
    width: 127px;
    position: relative;
    z-index: 2;
  }
  #top #pageNav .slide_box .items .item a .name {
    font-size: 1.2rem;
    text-align: center;
  }
  #top #pageNav .slide_box .items .item a .img_box img {
    transition: transform 0.15s ease;
  }

  #top #pageNav .slide_box .items .item a .name {
    margin-top: 18px;
  }
}

/* イントロ
-------------------------------------------------------------*/
#top #intro {
  background: #fde361;
}
#top #intro .cmnInner {
  display: grid;
  grid-template-columns: 43% 47%;
  grid-template-rows: auto;
  align-items: center;
  gap: 10%;
}
#top #intro .img_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  widht: 100%;
  height: 100%;
  overflow: hidden;
}
#top #intro .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
#top #intro .txt_box {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  padding: 36px 0;
}
#top #intro .txt_box .ttl {
  font-size: 2.4rem;
}
#top #intro .txt_box .txt {
  margin-top: 54px;
}
#top #intro .txt_box .txt + .txt {
  margin-top: 18px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #top #intro .cmnInner {
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    gap: 0;
    padding: 0;
  }
  #top #intro .img_box {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  #top #intro .txt_box {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    padding: 36px 36px 72px;
  }
  #top #intro .txt_box .ttl {
    font-size: 2rem;
  }
  #top #intro .txt_box .txt {
    margin-top: 30px;
  }
  #top #intro .txt_box .txt + .txt {
    margin-top: 12px;
  }
}

/* コンセプト
-------------------------------------------------------------*/
#top #concept {
  margin-top: 96px;
  padding: 132px 0 360px;
  position: relative;
  background: #f4f4f4;
  overflow: hidden;
}

#top #concept .cmnInner {
  display: grid;
  grid-template-columns: 33% 15% 52%;
  grid-template-rows: auto auto;
  align-items: center;
  position: relative;
  z-index: 2;
}
#top #concept .cmnInner::before {
  content: "";
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: center;
  width: 1px;
  height: 100%;
  background: #6c4f2c;
}
#top #concept .column_1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#top #concept .column_1 .ttl {
  width: 100%;
}
#top #concept .column_1 .ttl img {
  width: 100%;
  height: auto;
}
#top #concept .column_1 .txt {
  margin-top: 42px;
}

#top #concept .column_2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: repeat(3, auto);
  align-items: center;
}
#top #concept .column_2 .ttl {
  grid-column: 1 / 4;
  grid-row: 2 / 3;
}
#top #concept .column_2 .ttl img {
  width: 100%;
  height: auto;
}
#top #concept .column_2 .dayIcon {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: fit-content;
  margin-right: 24px;
}
#top #concept .column_2 .dayTxt {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}
#top #concept .column_2 .nightIcon {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  width: fit-content;
  margin-left: 24px;
}
#top #concept .column_2 .nightTxt {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

#top #concept .routine {
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  margin-top: 114px;
}
#top #concept .routine .ttl {
  display: flex;
  align-items: baseline;
  gap: 0 12px;
}
#top #concept .routine .ttl::after {
  content: "";
  width: auto;
  height: calc(1.2rem / 2);
  border-top: #6c4f2c solid 1px;
  flex-grow: 1;
}
#top #concept .routine .ttl .en_txt {
  font-size: 3rem;
}
#top #concept .routine .ttl .jp_txt {
  font-size: 1.2rem;
}
#top #concept .routine .img_box {
  margin-top: 36px;
}
#top #concept .bg_img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
#top #concept .bg_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #top #concept {
    margin-top: 0;
    padding: 87px 0 0;
  }

  #top #concept .cmnInner {
    display: block;
    padding: 0;
  }
  #top #concept .cmnInner::before {
    content: none;
  }
  #top #concept .column_1 {
    padding: 0 36px;
  }
  #top #concept .column_1 .ttl {
    width: 80%;
  }
  #top #concept .column_1 .txt {
    margin-top: 36px;
  }

  #top #concept .column_2 {
    margin-top: 36px;
    padding: 36px 36px 0;
    margin-top: #6c4f2c solid 1px;
  }
  #top #concept .column_2 .ttl {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
  }
  #top #concept .column_2 .ttl img {
    width: 100%;
    height: auto;
  }
  #top #concept .column_2 .dayIcon {
    width: 80px;
    margin-right: 18px;
  }
  #top #concept .column_2 .nightIcon {
    width: 80px;
    margin-left: 18px;
  }
  #top #concept .column_2 .dayIcon img,
  #top #concept .column_2 .nightIcon img {
    width: 100%;
  }

  #top #concept .routine {
    margin-top: 96px;
  }
  #top #concept .routine .ttl {
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 0 36px;
  }
  #top #concept .routine .ttl::after {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 100%;
    height: 1;
  }
  #top #concept .routine .ttl .en_txt {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 2.4rem;
  }
  #top #concept .routine .ttl .jp_txt {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    font-size: 1rem;
  }

  #top #concept .routine .img_box {
    margin-top: 24px;
    overflow-y: hidden;
  }
}

/* リニューアル
-------------------------------------------------------------*/
#top #renewal {
  padding: 144px 0 162px;
}
#top #renewal .ttl_box {
  width: 100%;
}
#top #renewal .ttl_box .en_txt {
  font-size: 3.6rem;
  text-align: center;
}
#top #renewal .ttl_box .ttl {
  font-size: 3.6rem;
  text-align: center;
}
#top #renewal .ttl_box .ttl span {
  font-size: 2.4rem;
  text-align: center;
}
#top #renewal .img_box {
  margin-top: 72px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #top #renewal {
    padding: 84px 0 84px;
  }
  #top #renewal .ttl_box {
    width: 100%;
  }
  #top #renewal .ttl_box .en_txt {
    font-size: 2.4rem;
  }
  #top #renewal .ttl_box .ttl {
    font-size: 2.6rem;
    text-align: center;
  }
  #top #renewal .ttl_box .ttl span {
    font-size: 2rem;
  }
  #top #renewal .img_box {
    margin-top: 54px;
  }
}

/* フレグランス
-------------------------------------------------------------*/
#top #fregrance {
  padding: 144px 0 162px;
  border-top: #b5a495 solid 1px;
}
#top #fregrance .cmnInner {
  display: grid;
  grid-template-columns: 52% 39%;
  grid-template-rows: repeat(3, auto);
  gap: 0 9%;
}
#top #fregrance .ttl_box {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  margin-bottom: 72px;
}
#top #fregrance .ttl_box .en_txt {
  font-size: 2rem;
}
#top #fregrance .ttl_box .copy {
  margin-top: 36px;
  font-size: 2.6rem;
  line-height: 1.5;
}

#top #fregrance .txt_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#top #fregrance .txt_box .txt + .txt {
  margin-top: 12px;
}

#top #fregrance .column_box {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  margin-top: 36px;
  padding: 24px 36px;
  border: #b6a696 solid 1px;
  border-radius: 8px;
}
#top #fregrance .column_box dl {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.6rem;
}
#top #fregrance .column_box dl dt {
  width: 8em;
  text-align: center;
  background: #fde361;
  border-radius: 2px;
}
#top #fregrance .column_box dl dt:not(:first-of-type) {
  margin-top: 18px;
}
#top #fregrance .column_box dl dd {
  width: calc(100% - 8em);
  padding-left: 1em;
}
#top #fregrance .column_box dl dd:not(:first-of-type) {
  margin-top: 18px;
}

#top #fregrance .img_box {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #top #fregrance {
    padding: 74px 0 84px;
  }
  #top #fregrance .cmnInner {
    display: block;
  }
  #top #fregrance .ttl_box {
    margin-bottom: 48px;
  }
  #top #fregrance .ttl_box .en_txt {
    font-size: 1.8rem;
  }
  #top #fregrance .ttl_box .copy {
    margin-top: 36px;
    font-size: 2rem;
  }

  #top #fregrance .txt_box {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  #top #fregrance .txt_box .txt + .txt {
    margin-top: 12px;
  }

  #top #fregrance .column_box {
    margin-top: 36px;
    padding: 18px 24px;
  }
  #top #fregrance .column_box dl {
    font-size: 1.4rem;
  }
  #top #fregrance .column_box dl dt {
    width: 5em;
    text-align: center;
    background: #fde361;
    border-radius: 2px;
  }
  #top #fregrance .column_box dl dt:not(:first-of-type) {
    margin-top: 12px;
  }
  #top #fregrance .column_box dl dd {
    width: calc(100% - 5em);
    padding-left: 0.5em;
  }
  #top #fregrance .column_box dl dd:not(:first-of-type) {
    margin-top: 12px;
    letter-spacing: 0;
  }

  #top #fregrance .img_box {
    margin-top: 36px;
  }
}

/* プロダクト
-------------------------------------------------------------*/
#top #products {
  padding: 144px 0 162px;
  border-top: #b5a495 solid 1px;
}
#top #products .ttl_box {
  text-align: center;
}
#top #products .ttl_box .ttl {
  font-size: 4.2rem;
}

#top #products .articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 102px 10%;
  width: 100%;
  margin-top: 81px;
}
#top #products .articles article {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto 1fr auto;
  width: calc((100% - 10%) / 2);
}
#top #products .articles article .img_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#top #products .articles article .ttl {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 36px;
  font-size: 3rem;
}
#top #products .articles article .items {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  margin-top: 24px;
}
#top #products .articles article .items .item {
  position: relative;
}
#top #products .articles article .items .item + .item {
  margin-top: 24px;
  padding-top: 24px;
  border-top: #ccc dotted 1px;
}
#top #products .articles article .items .item .balloon {
  aspect-ratio : 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  position: absolute;
  right: 0;
  background: #FD6161;
  border-radius: 100vw;
}
#top #products .articles article .items .item .balloon span {
  color: #FFF;
  font-size: 1.8rem;
}

#top #products .articles article .items .item .name {
  display: flex;
  flex-direction: column;
}
#top #products .articles article .items .item .name .jp_txt {
  font-size: 1.8rem;
  line-height: 1.5;
}

#top #products .articles article .items .item .icons {
  margin-top: 18px;
}
#top #products .articles article .items .item .icons img {
  width: 100%;
}
#top #products .articles article .items .item .txt {
  margin-top: 18px;
}

#top #products .articles article .price-btn {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  margin-top: 36px;
}

#top #products .articles article .price-btn .price {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
#top #products .articles article .price-btn .price .caption {
  padding-right: 1em;
}
#top #products .articles article .price-btn .price .yen {
  font-size: 1.8rem;
}
#top #products .articles article .price-btn .price .value {
  font-size: 3.6rem;
}
#top #products .articles article .price-btn .btns {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
#top #products .articles article .price-btn .btns .btn {
  width: calc((100% - 36px) / 2);
}
#top #products .articles article .price-btn .btns .btn a {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
}
#top #products .articles article .price-btn .btns .btn.toDetail a {
  border: #6c4f2c solid 1px;
  background: #fff;
}
#top #products .articles article .price-btn .btns .btn.toEC a {
  border: #fde361 solid 1px;
  background: #fde361;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #top #products {
    padding: 74px 0 84px;
  }
  #top #products .ttl_box .ttl {
    font-size: 2.6rem;
  }

  #top #products .articles {
    display: block;
    width: 100%;
    margin-top: 54px;
  }
  #top #products .articles article {
    display: block;
    width: 100%;
  }
  #top #products .articles article:not(:first-of-type) {
    margin-top: 42px;
    padding-top: 42px;
    border-top: #b5a495 dotted 1px;
  }
  #top #products .articles article .img_box {
  }
  #top #products .articles article .ttl {
    margin-top: 24px;
    font-size: 2.2rem;
  }
  #top #products .articles article .items {
    margin-top: 12px;
  }

  #top #products .articles article .items .item .name .jp_txt {
    font-size: 1.6rem;
  }
  #top #products .articles article .items .item .name .en_txt {
    font-size: 1rem;
  }

  #top #products .articles article .items .item .balloon.single-balloon-pos {
    top: -60px;
  }

  #top #products .articles article .price-btn {
    margin-top: 18px;
  }

  #top #products .articles article .price-btn .price .yen {
    font-size: 1.8rem;
  }
  #top #products .articles article .price-btn .price .value {
    font-size: 2.4rem;
  }
  #top #products .articles article .price-btn .btns {
    margin-top: 24px;
  }
  #top #products .articles article .price-btn .btns .btn {
    width: calc((100% - 24px) / 2);
  }
  #top #products .articles article .price-btn .btns .btn a {
    padding: 6px 10px;
  }
}

/* サロン様に向けて
-------------------------------------------------------------*/
#top #forSalon {
  height: 560px;
  position: relative;
  overflow: hidden;
}
#top #forSalon .cmnInner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
}
#top #forSalon .txt_box {
  color: #fff;
}
#top #forSalon .txt_box .ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: fit-content;
}
#top #forSalon .txt_box .ttl .en_txt {
  font-size: 4.2rem;
}

#top #forSalon .txt_box .btn {
  color: #fff;
  max-width: 180px;
  margin: 42px auto 0;
}
#top #forSalon .txt_box .btn a {
  display: block;
  width: 100%;
  padding: 10px;
  border: #fff solid 1px;
  border-radius: 4px;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
}

#top #forSalon .img_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
#top #forSalon .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ダウンロードコンテンツ
-------------------------------------------------------------*/
#top #download {
  height: 560px;
  margin-bottom: 162px;
  position: relative;
  border-bottom: #707070 solid 1px;
  overflow: hidden;
}
#top #download .cmnInner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
}
#top #download .txt_box .ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: fit-content;
}
#top #download .txt_box .ttl .en_txt {
  font-size: 4.2rem;
}

#top #download .txt_box .btn {
  max-width: 180px;
  margin: 42px auto 0;
}
#top #download .txt_box .btn a {
  display: block;
  width: 100%;
  padding: 10px;
  border: #6c4f2c solid 1px;
  border-radius: 4px;
  font-size: 1.6rem;
  text-align: center;
}

/* --------------------------------------------------------------------------------------------- */
/*
/* 商品ページ
/*
/* --------------------------------------------------------------------------------------------- */

/* ページタイトル
-------------------------------------------------------------*/
#products #cmnPageTtl {
  height: 552px;
  position: relative;
  overflow: hidden;
}
#products #cmnPageTtl .cmnInner {
  position: relative;
  z-index: 2;
}
#products #cmnPageTtl .img_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
#products #cmnPageTtl .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products #cmnPageTtl {
    height: 220px;
    position: relative;
    overflow: hidden;
  }
  #products #cmnPageTtl .cmnInner {
    position: relative;
    z-index: 2;
  }
  #products #cmnPageTtl .img_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
  }
  #products #cmnPageTtl .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 商品詳細
-------------------------------------------------------------*/
#products .preductDetail {
  padding: 108px 0 162px;
}
#products .preductDetail .articles {
}
#products .preductDetail .articles article {
  display: flex;
  justify-content: space-between;
}
#products .preductDetail .articles article + article {
  margin-top: 84px;
  padding-top: 84px;
  border-top: #b5a495 dotted 1px;
}

#products .preductDetail .articles article .img_box {
  width: 26%;
  height: 100px;
}
#products .preductDetail .articles article .txt_box {
  width: 67%;
  position: relative;
}
#products .preductDetail .articles article .txt_box .balloon {
  aspect-ratio : 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  background: #FD6161;
  border-radius: 100vw;
}
#products .preductDetail .articles article .txt_box .balloon span {
  color: #FFF;
  font-size: 2.8rem;
}

#products .preductDetail .articles article .txt_box .copy {
  font-size: 3rem;
}
#products .preductDetail .articles article .txt_box .copy .note {
  font-size: 1.2rem;
}
#products .preductDetail .articles article .txt_box .name {
  margin-top: 47px;
}
#products .preductDetail .articles article .txt_box .name span {
  display: block;
}
#products .preductDetail .articles article .txt_box .name .jp_txt {
  font-size: 2.4rem;
}
#products .preductDetail .articles article .txt_box .name .en_txt {
  font-size: 1.8rem;
}
#products .preductDetail .articles article .txt_box .type-origin {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 24px;
}
#products .preductDetail .articles article .txt_box .type-origin .type {
  margin-right: 1em;
}
#products .preductDetail .articles article .txt_box .type-origin .origin {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 0.5em;
}
#products .preductDetail .articles article .txt_box .type-origin .origin img {
  display: block;
}

#products .preductDetail .articles article .txt_box .txt {
  margin-top: 24px;
}

#products .preductDetail .articles article .txt_box .price-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}
#products .preductDetail .articles article .txt_box .price-btn .price {
  display: flex;
  align-items: baseline;
}
#products .preductDetail .articles article .txt_box .price-btn .price .caption {
  margin-right: 1em;
}
#products .preductDetail .articles article .txt_box .price-btn .price .yen {
  font-size: 1.8rem;
}
#products .preductDetail .articles article .txt_box .price-btn .price .value {
  font-size: 3.6rem;
}
#products .preductDetail .articles article .txt_box .price-btn .btn a {
  display: block;
  width: 224px;
  padding: 4px;
  background: #fde361;
  border-radius: 4px;
  font-size: 1.6rem;
  text-align: center;
}

#products .preductDetail .articles article .txt_box dl {
  padding: 12px;
  border-bottom: #6c4f2c solid 1px;
  font-size: 1.2rem;
}
#products .preductDetail .articles article .txt_box dl.amount {
  display: flex;
  gap: 0 1em;
  margin-top: 18px;
  border-top: #6c4f2c solid 1px;
}
#products .preductDetail .articles article .txt_box dl dt {
  font-weight: 600;
  cursor: pointer;
}
#products .preductDetail .articles article .txt_box dl:not(.amount) {
  width: 100%;
  position: relative;
}
#products .preductDetail .articles article .txt_box dl:not(.amount) dt::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: #6c4f2c solid 1px;
  border-left: #6c4f2c solid 1px;
  position: absolute;
  top: calc(50% - 0.2em);
  right: 12px;
  transform: translateX(-50%) translateY(-50%) rotate(-135deg);
  transition: transform 0.3s ease;
}
#products
  .preductDetail
  .articles
  article
  .txt_box
  dl:not(.amount)
  dt.open::after {
  top: calc(50% + 0.2em);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
#products .preductDetail .articles article .txt_box dl:not(.amount) dd {
  display: none;
  padding-right: 36px;
  margin-top: 6px;
}

/*
#products .preductDetail .articles article .txt_box .amount,
#products .preductDetail .articles article .txt_box .component,
#products .preductDetail .articles article .txt_box .beautyIngredients,
#products .preductDetail .articles article .txt_box .usage {
  padding: 12px;
  border-bottom: #6C4F2C solid 1px;
  font-size: 1.2rem;
}

#products .preductDetail .articles article .txt_box .amount {
  display: flex;
  gap: 0 1em;
  margin-top: 18px;
  border-top: #6C4F2C solid 1px;
}
#products .preductDetail .articles article .txt_box .amount dt,
#products .preductDetail .articles article .txt_box .component dt,
#products .preductDetail .articles article .txt_box .beautyIngredients dt,
#products .preductDetail .articles article .txt_box .usage dt {
  font-weight: 600;
}
#products .preductDetail .articles article .txt_box .component dd,
#products .preductDetail .articles article .txt_box .beautyIngredients dd,
#products .preductDetail .articles article .txt_box .usage dd {
  display: none;
  margin-top: 6px;
}

#products .preductDetail .articles article .txt_box dt {
  position: relative;
}
#products .preductDetail .articles article .txt_box dt::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: #6C4F2C solid 1px;
  border-left: #6C4F2C solid 1px;
  position: absolute;
  top: calc(50% - 0.2em);
  right: 0;
  transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
#products .preductDetail .articles article .txt_box dt.open::after {
  top: calc(50% + 0.2em);
  transform: rotate(45deg);
}
*/

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products .preductDetail {
    padding: 78px 0 102px;
  }
  #products .preductDetail .articles article {
    display: block;
  }
  #products .preductDetail .articles article + article {
    margin-top: 84px;
    padding-top: 84px;
  }
  #products .preductDetail .articles article .img_box {
    aspect-ratio: 1 / 1;
    width: 80%;
    height: auto;
    margin: 0 auto;
  }
  #products .preductDetail .articles article .txt_box {
    width: 100%;
    margin-top: 24px;
  }
  #products .preductDetail .articles article .txt_box .balloon {
    width: 75px;
    height: 75px;
  }
  #products .preductDetail .articles article .txt_box .balloon span {
    font-size: 2.0rem;
  }

  #products .preductDetail .articles article .txt_box .copy {
    font-size: 2.2rem;
  }
  #products .preductDetail .articles article .txt_box .copy .note {
    font-size: 1rem;
    line-height: 1;
  }
  #products .preductDetail .articles article .txt_box .name {
    margin-top: 24px;
  }
  #products .preductDetail .articles article .txt_box .name .jp_txt {
    font-size: 1.8rem;
  }
  #products .preductDetail .articles article .txt_box .name .en_txt {
    font-size: 1.4rem;
  }
  #products .preductDetail .articles article .txt_box .type-origin {
    margin-top: 18px;
  }

  #products .preductDetail .articles article .txt_box .txt {
    margin-top: 18px;
  }

  #products .preductDetail .articles article .txt_box .price-btn {
    display: block;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
  }
  #products .preductDetail .articles article .txt_box .price-btn .price {
    justify-content: flex-end;
  }
  #products .preductDetail .articles article .txt_box .price-btn .price .yen {
    font-size: 1.6rem;
  }
  #products .preductDetail .articles article .txt_box .price-btn .price .value {
    font-size: 2.6rem;
  }
  #products .preductDetail .articles article .txt_box .price-btn .btn {
    margin-top: 12px;
  }
  #products .preductDetail .articles article .txt_box .price-btn .btn a {
    width: 100%;
    padding: 8px;
    font-size: 1.4rem;
  }

  #products .preductDetail .articles article .txt_box dl {
    padding: 10px 0;
    font-size: 1rem;
  }
  #products .preductDetail .articles article .txt_box dl.amount {
    margin-top: 36px;
  }
  #products .preductDetail .articles article .txt_box dl dt {
    padding: 0;
  }
  #products
    .preductDetail
    .articles
    article
    .txt_box
    dl:not(.amount)
    dt::after {
    width: 8px;
    height: 8px;
    right: 0;
  }
  #products .preductDetail .articles article .txt_box dl:not(.amount) dd {
    padding-right: 24px;
  }
}

/* メインビジュアル
-------------------------------------------------------------*/
#products #mainVisual {
/*  position: relative;*/
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
}
#products #mainVisual .cmnInner {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: 48% 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  width: 100%;
  min-height: 700px;
  padding: 96px 32px;
  z-index: 2;
}
#products #mainVisual .copy {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  font-size: 4.2rem;
  line-height: 1.5;
}
#products #mainVisual .txt_box {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  margin-top: 64px;
  align-self: bottom;
}
#products #mainVisual .txt_box .note {
  margin-top: 12px;
  font-size: 1.2rem;
  text-align: right;
}
#products #mainVisual .txt_box .icons {
  margin-top: 36px;
}
#products #mainVisual .txt_box .icons img {
  width: 100%;
  height: auto;
}
#products #mainVisual .img_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: 100%;
  height: 100%;
/*
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%) translateY(-50%);
*/
  z-index: 1;
}
#products #mainVisual .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products #mainVisual {
    position: relative;
  }
  #products #mainVisual .cmnInner {
    display: block;
    min-height: auto;
    padding: 78px 36px 500px;
  }
  #products #mainVisual .copy {
    font-size: 2.4rem;
  }
  #products #mainVisual .txt_box {
    margin-top: 48px;
    align-self: bottom;
  }
  #products #mainVisual .txt_box .note {
    margin-top: 6px;
    font-size: 1rem;
  }
  #products #mainVisual .txt_box .icons {
    margin-top: 24px;
  }
  #products #mainVisual .img_box {
    align-self: flex-end;
/*
    top: auto;
    bottom: 0;
    transform: translateX(-50%) translateY(0);
*/  
  }
  #products #mainVisual .img_box img {
    object-fit: contain;
    object-position: 50% 100%;
  }
}

/* ポイント上下マージン・タイトル
-------------------------------------------------------------*/
#products .points {
  padding: 108px 0 144px;
  border-bottom: #b5a495 solid 1px;
}

#products .points .ttl_box {
}
#products .points .ttl_box .point {
  font-size: 2rem;
}
#products .points .ttl_box .point .num {
  font-size: 3rem;
}
#products .points .ttl_box .ttl {
  margin-bottom: 72px;
  font-size: 3.6rem;
  line-height: 1.5;
}
#products .points .copy_box {
  margin-bottom: 36px;
}
#products .points .copy_box .copy {
  font-size: 2.4rem;
  line-height: 1.5;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products .points {
    padding: 78px 0 102px;
  }
  #products .points .ttl_box .point {
    font-size: 1.4rem;
  }
  #products .points .ttl_box .point .num {
    font-size: 2.2rem;
  }
  #products .points .ttl_box .ttl {
    margin-bottom: 60px;
    font-size: 2.4rem;
  }
  #products .points .copy_box {
    margin-bottom: 24px;
  }
  #products .points .copy_box .copy {
    font-size: 1.8rem;
  }
}

/*-------------------------------------------------------------*/
/* ホルスアイラッシュセラムEX
/*-------------------------------------------------------------*/

/* mainVisual
-------------------------------------------------------------*/
#products.serum #mainVisual {
  background: #f7f6fc;
}
#products.serum #mainVisual .txt_box .example {
  margin-top: 36px;
}
#products.serum #mainVisual .txt_box .example img {
  width: 100%;
  height: auto;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
}

/* エクステ・カール施術時のまつ毛の悩み
-------------------------------------------------------------*/
#products.serum #intro {
  padding: 144px 0 162px;
  background: #f4f4f4;
}
#products.serum #intro .cmnInner {
  display: grid;
  grid-template-columns: 43% 48%;
  grid-template-rows: repeat(3, auto);
  gap: 0 9%;
}
#products.serum #intro .ttl_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.serum #intro .ttl_box .ttl {
  display: flex;
  flex-direction: column;
  font-size: 2.4rem;
  line-height: 1.5;
}
#products.serum #intro .ttl_box .ttl span {
  font-size: 3.6rem;
}
#products.serum #intro .column_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 36px;
  padding: 18px 24px;
  position: relative;
  border: #6c4f2c solid 1px;
  border-radius: 4px;
}
#products.serum #intro .column_box::after {
  content: "";
  width: 48px;
  height: 28px;
  position: absolute;
  top: 100%;
  left: 50%;
  background: #b4a394;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}
#products.serum #intro .column_box li {
  display: flex;
  align-items: baseline;
  gap: 0 0.5em;
}
#products.serum #intro .column_box li::before {
  aspect-ratio: 1 / 1;
  content: "";
  width: 10px;
  height: auto;
  background: #6c4f2c;
  border-radius: 100vw;
  flex-shrink: 0;
}

#products.serum #intro .txt_box {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  margin-top: 60px;
}
#products.serum #intro .txt_box .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  font-size: 2rem;
  line-height: 1.5;
}
#products.serum #intro .txt_box .txt .hilights {
  display: flex;
  gap: 0.5em;
}
#products.serum #intro .txt_box .txt .hilights .hilight {
  display: inline-block;
  padding: 2px 8px;
  background: #fde361;
  border-radius: 2px;
  font-size: 2.4rem;
  font-weight: 600;
}

#products.serum #intro .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  padding: 42px 48px;
  border: #6c4f2c solid 1px;
  border-radius: 8px;
  background: #fff;
}
#products.serum #intro .img_box .ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.5;
}
#products.serum #intro .img_box .ttl .en_txt {
  font-size: 1.6rem;
}
#products.serum #intro .img_box .ttl .jp_txt {
  display: flex;
  align-items: baseline;
  width: 100%;
  font-size: 2.2rem;
}
#products.serum #intro .img_box .ttl .jp_txt::before,
#products.serum #intro .img_box .ttl .jp_txt::after {
  content: "";
  width: auto;
  height: 0.5em;
  border-top: #6c4f2c solid 1px;
  flex-grow: 1;
}
#products.serum #intro .img_box .ttl .jp_txt::before {
  margin-right: 0.5em;
}
#products.serum #intro .img_box .ttl .jp_txt::after {
  margin-left: 0.5em;
}

#products.serum #intro .img_box .ttl .jp_txt .num {
  font-size: 3.5rem;
}
#products.serum #intro .img_box .img {
  margin-top: 36px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.serum #intro {
    padding: 74px 0 102px;
  }
  #products.serum #intro .cmnInner {
    display: block;
  }
  #products.serum #intro .ttl_box .ttl {
    font-size: 2rem;
  }
  #products.serum #intro .ttl_box .ttl span {
    font-size: 2.8rem;
  }
  #products.serum #intro .column_box {
    margin-top: 24px;
  }
  #products.serum #intro .column_box::after {
    width: 36px;
    height: 22px;
  }
  #products.serum #intro .column_box li::before {
    width: 8px;
  }

  #products.serum #intro .txt_box {
    margin-top: 46px;
  }
  #products.serum #intro .txt_box .txt {
    gap: 8px 0;
    font-size: 1.6rem;
    text-align: center;
  }
  #products.serum #intro .txt_box .txt .hilights .hilight {
    padding: 1px 6px;
    font-size: 2rem;
  }

  #products.serum #intro .img_box {
    margin-top: 54px;
    padding: 24px 30px;
  }
  #products.serum #intro .img_box .ttl .en_txt {
    font-size: 1.2rem;
  }
  #products.serum #intro .img_box .ttl .jp_txt {
    font-size: 1.8rem;
  }
  #products.serum #intro .img_box .ttl .jp_txt .num {
    font-size: 2.6rem;
  }
  #products.serum #intro .img_box .img {
    margin-top: 24px;
  }
}

/* ポイント01
-------------------------------------------------------------*/
#products.serum #point01 .cmnInner {
  display: grid;
  grid-template-columns: 36% 59%;
  grid-template-rows: repeat(6, auto);
  gap: 0 5%;
}
#products.serum #point01 .ttl_box {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
#products.serum #point01 .copy_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#products.serum #point01 .txt_box {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
#products.serum #point01 .txt_box .txt + .txt {
  margin-top: 12px;
}
#products.serum #point01 .column {
  grid-column: 1 / 2;
  grid-row: 4 / 6;
  margin-top: 36px;
  padding: 24px 30px;
  border: #6c4f2c solid 1px;
  border-radius: 4px;
}
#products.serum #point01 .column .ttl {
  font-size: 2rem;
}
#products.serum #point01 .column .txt {
  margin-top: 12px;
}
#products.serum #point01 .column .column_img {
  aspect-ratio: 1 / 1;
  width: 110px;
  margin-left: 12px;
  margin-bottom: 12px;
  float: right;
}
#products.serum #point01 .column .column_img img {
  width: 100%;
  height: auto;
}

#products.serum #point01 .img_box {
  grid-column: 2 / 3;
  grid-row: 2 / 5;
}
#products.serum #point01 .note {
  grid-column: 2 / 3;
  grid-row: 5 / 6;
  margin-top: 36px;
  font-size: 1rem;
}
#products.serum #point01 .difference {
  grid-column: 1 / 3;
  grid-row: 6 / 7;
  margin-top: 118px;
  font-size: 1.6rem;
  font-weight: 600;
}
#products.serum #point01 .difference .image {
  margin-top: 36px;
}
#products.serum #point01 .difference .image img {
  width: 100%;
  height: auto;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.serum #point01 .cmnInner {
    display: block;
  }
  #products.serum #point01 .txt_box .txt + .txt {
    margin-top: 12px;
  }
  #products.serum #point01 .column {
    margin-top: 36px;
    padding: 18px 24px;
  }
  #products.serum #point01 .column .ttl {
    font-size: 1.6rem;
  }
  #products.serum #point01 .column .txt {
    margin-top: 12px;
  }
  #products.serum #point01 .column .column_img {
    width: 78px;
    margin-left: 8px;
    margin-bottom: 8px;
  }

  #products.serum #point01 .img_box {
    margin-top: 48px;
  }
  #products.serum #point01 .note {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    margin-top: 36px;
    font-size: 1rem;
  }
  #products.serum #point01 .difference {
    margin-top: 54px;
  }
  #products.serum #point01 .difference .cmnLineTtl {
    display: none;
  }
  #products.serum #point01 .difference .image {
    margin-top: 0;
  }
}

/* ポイント02
-------------------------------------------------------------*/
#products.serum #point02 .img_box {
  margin-top: 60px;
}
#products.serum #point02 .note {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 12px;
  font-size: 1rem;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.serum #point02 .img_box {
    margin-top: 48px;
  }
  #products.serum #point02 .note {
    margin-top: 36px;
  }
}

/* ポイント03
-------------------------------------------------------------*/
#products.serum #point03 .cmnInner {
  display: grid;
  grid-template-columns: 52% 38%;
  grid-template-rows: repeat(2, auto);
  gap: 0 10%;
}
#products.serum #point03 .ttl_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.serum #point03 .txt_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.serum #point03 .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.serum #point03 .cmnInner {
    display: block;
  }
  #products.serum #point03 .img_box {
    margin-top: 54px;
  }
}

/* 使い方
-------------------------------------------------------------*/
#products.serum #howtouse {
  padding: 144px 0 162px;
  background: #f4f4f4;
}
#products.serum #howtouse .ttl_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#products.serum #howtouse .ttl_box::before,
#products.serum #howtouse .ttl_box::after {
  content: "";
  width: auto;
  height: 1px;
  background: #6c4f2c;
  flex-grow: 1;
}
#products.serum #howtouse .ttl_box .ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
}
#products.serum #howtouse .ttl_box .ttl .en_txt {
  font-size: 3.6rem;
}
#products.serum #howtouse .ttl_box .ttl .jp_txt {
  font-size: 2.4rem;
}

#products.serum #howtouse .img_box {
  margin-top: 64px;
}

#products.serum #howtouse .movie_box {
  margin-top: 78px;
}
#products.serum #howtouse .movie_box video {
  width: 100%;
  height: auto;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.serum #howtouse {
    padding: 74px 0 102px;
  }
  #products.serum #howtouse .cmnInner {
    padding: 0;
  }
  #products.serum #howtouse .ttl_box .ttl {
    padding: 0 36px;
  }
  #products.serum #howtouse .ttl_box .ttl .en_txt {
    font-size: 2.6rem;
  }
  #products.serum #howtouse .ttl_box .ttl .jp_txt {
    font-size: 1.2rem;
  }

  #products.serum #howtouse .img_box {
    margin-top: 42px;
  }

  #products.serum #howtouse .movie_box {
    margin-top: 64px;
    padding: 0 36px;
  }
}

/* モニターの声
-------------------------------------------------------------*/
#products.serum #voice {
  padding: 144px 0 162px;
  background: #fde361;
}
#products.serum #voice .cmnInner {
  max-width: calc(647px + (36px * 2));
}
#products.serum #voice .ttl_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#products.serum #voice .ttl_box::before,
#products.serum #voice .ttl_box::after {
  content: "";
  width: auto;
  height: 1px;
  background: #6c4f2c;
  flex-grow: 1;
}
#products.serum #voice .ttl_box .ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
}
#products.serum #voice .ttl_box .ttl .en_txt {
  font-size: 3.6rem;
}
#products.serum #voice .ttl_box .ttl .jp_txt {
  font-size: 2.4rem;
}

#products.serum #voice .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 42px 0;
  margin-top: 72px;
}
#products.serum #voice .items .item {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px 0;
  width: calc((100% - (6% * 2)) / 3);
  position: relative;
  background: #fff;
  border-radius: 100vw;
  text-align: center;
  line-height: 1.5;
}
#products.serum #voice .items .item::before {
  content: "";
  width: 27px;
  height: 36px;
  position: absolute;
  left: 10px;
  bottom: 0;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: rotate(45deg);
}
#products.serum #voice .items .item .hilight {
  display: inline-block;
  padding: 2px 8px;
  background: #fde361;
  border-radius: 2px;
  font-size: 1.8rem;
  font-weight: 600;
}
#products.serum #voice .note {
  display: flex;
  align-items: baseline;
  gap: 0 0.5em;
  margin-top: 36px;
  font-size: 1rem;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.serum #voice {
    padding: 74px 0 102px;
  }
  #products.serum #voice .cmnInner {
    max-width: 100%;
  }
  #products.serum #voice .ttl_box .ttl .en_txt {
    font-size: 2.6rem;
  }
  #products.serum #voice .ttl_box .ttl .jp_txt {
    font-size: 1.2rem;
  }

  #products.serum #voice .items {
    gap: 34px 0;
    margin-top: 42px;
  }
  #products.serum #voice .items .item {
    gap: 2px 0;
    width: calc((100% - 6%) / 2);
  }
  #products.serum #voice .items .item::before {
    width: 24px;
    height: 30px;
    left: 6px;
  }
  #products.serum #voice .items .item .hilight {
    padding: 1px 4px;
    font-size: 1.4rem;
  }
  #products.serum #voice .note {
    margin-top: 30px;
  }
}

/*-------------------------------------------------------------*/
/* コーティング・マスカラ共通
/*-------------------------------------------------------------*/

/* メインビジュアル
-------------------------------------------------------------*/
#products.coating #mainVisual,
#products.mascara #mainVisual {
  background: #e7e7e5;
}
#products.coating #mainVisual .txt_box .items .item,
#products.mascara #mainVisual .txt_box {
  position: relative;
}

#products.coating #mainVisual .txt_box .items .item .example,
#products.mascara #mainVisual .txt_box .example {
  aspect-ratio: 1 / 1;
  width: 150px;
  position: absolute;
  bottom: 0;
  left: calc(100% + 24px);
}
#products.coating #mainVisual .txt_box .items .item .example img,
#products.mascara #mainVisual .txt_box .example img {
  width: 100%;
  height: auto;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.coating #mainVisual,
  #products.mascara #mainVisual {
  }
  #products.coating #mainVisual .txt_box .items .item,
  #products.mascara #mainVisual .txt_box {
    display: grid;
    grid-template-columns: 1fr 37%;
    grid-template-rows: auto auto;
    gap: 0 4%;
  }
}

/* ポイント01
-------------------------------------------------------------*/
#products.coating #point01 .cmnInner,
#products.mascara #point01 .cmnInner {
  display: grid;
  grid-template-columns: 48% 45%;
  grid-template-rows: repeat(5, auto);
  gap: 0 7%;
}
#products.coating #point01 .ttl_box,
#products.mascara #point01 .ttl_box {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
#products.coating #point01 .txt_box,
#products.mascara #point01 .txt_box {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  margin-bottom: 36px;
}

#products.coating #point01 .damage,
#products.mascara #point01 .damage {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
#products.coating #point01 .effect,
#products.mascara #point01 .effect {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
#products.coating #point01 .damage .img_box,
#products.coating #point01 .effect .img_box,
#products.mascara #point01 .damage .img_box,
#products.mascara #point01 .effect .img_box {
  margin-top: 36px;
}
#products.coating #point01 .damage .damageColumn,
#products.mascara #point01 .damage .damageColumn {
  padding: 18px 24px;
  border: #b6a696 solid 1px;
  border-radius: 4px;
}
#products.coating #point01 .damage .damageColumn .ttl,
#products.mascara #point01 .damage .damageColumn .ttl {
  padding-bottom: 6px;
  border-bottom: #b6a696 solid 1px;
  font-weight: 600;
}
#products.coating #point01 .damage .damageColumn .txt,
#products.mascara #point01 .damage .damageColumn .txt {
  margin-top: 6px;
  font-size: 1.2rem;
}

#products.coating #point01 .effectDetail,
#products.mascara #point01 .effectDetail {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  margin-top: 128px;
  padding: 0 24px;
  position: relative;
}
#products.coating #point01 .effectDetail::before,
#products.mascara #point01 .effectDetail::before {
  content: "";
  width: 100%;
  height: 32px;
  position: absolute;
  left: 0;
  bottom: calc(100% + 36px);
  border-top: #b6a696 solid 1px;
  border-left: #b6a696 solid 1px;
  border-right: #b6a696 solid 1px;
}
#products.coating #point01 .effectDetail::after,
#products.mascara #point01 .effectDetail::after {
  content: "";
  width: 1px;
  height: 54px;
  position: absolute;
  left: 76%;
  bottom: calc(100% + 36px + 32px);
  background: #b6a696;
}
#products.coating #point01 .effectDetail .articles,
#products.mascara #point01 .effectDetail .articles {
  display: grid;
  grid-template-columns: 45% 10% 45%;
  grid-template-rows: auto auto;
}
#products.coating #point01 .effectDetail .articles::before,
#products.mascara #point01 .effectDetail .articles::before {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: center;
  content: "";
  width: 1;
  height: 100%;
  border-left: #b5a495 dotted 1px;
}
#products.coating #point01 .effectDetail .articles article,
#products.mascara #point01 .effectDetail .articles article {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
}
#products.coating #point01 .effectDetail .articles article:nth-child(1),
#products.mascara #point01 .effectDetail .articles article:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.coating #point01 .effectDetail .articles article:nth-child(2),
#products.mascara #point01 .effectDetail .articles article:nth-child(2) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
#products.coating #point01 .effectDetail .articles article:nth-child(3),
#products.mascara #point01 .effectDetail .articles article:nth-child(3) {
  grid-column: 1 / 4;
  grid-row: 2 / 3;

  grid-template-columns: 45% 10% 45%;
  grid-template-rows: auto auto;

  margin-top: 54px;
  padding-top: 48px;
  border-top: #b5a495 dotted 1px;
}
#products.coating #point01 .effectDetail .articles article .ttl,
#products.mascara #point01 .effectDetail .articles article .ttl {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  align-items: center;
  font-size: 2.4rem;
}
#products.coating #point01 .effectDetail .articles article .ttl::before,
#products.mascara #point01 .effectDetail .articles article .ttl::before {
  aspect-ratio: 1 / 1;
  content: "";
  width: 18px;
  height: auto;
  margin-right: 0.5em;
  background: #fbd847;
  border-radius: 100vw;
  flex-shrink: 0;
}
#products.coating #point01 .effectDetail .articles article:nth-child(3) .ttl,
#products.mascara #point01 .effectDetail .articles article:nth-child(3) .ttl {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

#products.coating #point01 .effectDetail .articles article .txt,
#products.mascara #point01 .effectDetail .articles article .txt {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 32px;
}
#products.coating #point01 .effectDetail .articles article:nth-child(3) .txt,
#products.mascara #point01 .effectDetail .articles article:nth-child(3) .txt {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#products.coating #point01 .effectDetail .articles article .list,
#products.mascara #point01 .effectDetail .articles article .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5em;
  margin-top: 32px;
  padding: 18px 24px;
  border: #b6a696 solid 1px;
  border-radius: 4px;
}
#products.coating #point01 .effectDetail .articles article:nth-child(3) .list,
#products.mascara #point01 .effectDetail .articles article:nth-child(3) .list {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

#products.coating #point01 .effectDetail .articles article .list dt,
#products.mascara #point01 .effectDetail .articles article .list dt {
  width: 100%;
  margin-bottom: 6px;
}
#products.coating #point01 .effectDetail .articles article .list dd,
#products.mascara #point01 .effectDetail .articles article .list dd {
  display: flex;
  align-items: baseline;
  font-size: 1.2rem;
}
#products.coating #point01 .effectDetail .articles article .list dd::before,
#products.mascara #point01 .effectDetail .articles article .list dd::before {
  aspect-ratio: 1 / 1;
  content: "";
  width: 8px;
  height: auto;
  margin-right: 0.5em;
  background: #6c4f2c;
  border-radius: 100vw;
  flex-shrink: 0;
}

#products.coating #point01 .column_box,
#products.mascara #point01 .column_box {
  grid-column: 1 / 3;
  grid-row: 5 / 5;
  margin-top: 54px;
  padding: 24px;
  background: #f5ece6;
  border-radius: 4px;
}
#products.coating #point01 .column_box .ttl,
#products.mascara #point01 .column_box .ttl {
  font-size: 1.6rem;
  font-weight: 600;
}
#products.coating #point01 .column_box .txt,
#products.mascara #point01 .column_box .txt {
  margin-top: 6px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.coating #point01 .cmnInner,
  #products.mascara #point01 .cmnInner {
    display: block;
  }
  #products.coating #point01 .effect,
  #products.mascara #point01 .effect {
    margin-top: 54px;
  }
  #products.coating #point01 .damage .img_box,
  #products.coating #point01 .effect .img_box,
  #products.mascara #point01 .damage .img_box,
  #products.mascara #point01 .effect .img_box {
    margin-top: 18px;
  }
  #products.coating #point01 .damage .damageColumn,
  #products.mascara #point01 .damage .damageColumn {
    margin-top: 36px;
    padding: 24px 18px;
  }
  #products.coating #point01 .damage .damageColumn .ttl,
  #products.mascara #point01 .damage .damageColumn .ttl {
    font-size: 1.4rem;
  }
  #products.coating #point01 .damage .damageColumn .txt,
  #products.mascara #point01 .damage .damageColumn .txt {
    font-size: 1rem;
  }

  #products.coating #point01 .effectDetail,
  #products.mascara #point01 .effectDetail {
    margin-top: 80px;
    padding: 0 24px;
    position: relative;
  }
  #products.coating #point01 .effectDetail::before,
  #products.mascara #point01 .effectDetail::before {
    height: 16px;
    left: 0;
    bottom: calc(100% + 14px);
  }
  #products.coating #point01 .effectDetail::after,
  #products.mascara #point01 .effectDetail::after {
    width: 1px;
    height: 24px;
    left: 50%;
    bottom: calc(100% + 13px + 14px);
  }
  #products.coating #point01 .effectDetail .articles,
  #products.mascara #point01 .effectDetail .articles {
    display: block;
  }
  #products.coating #point01 .effectDetail .articles::before,
  #products.mascara #point01 .effectDetail .articles::before {
    content: none;
  }
  #products.coating #point01 .effectDetail .articles article,
  #products.mascara #point01 .effectDetail .articles article {
    display: block;
  }
  #products.coating #point01 .effectDetail .articles article:nth-child(2),
  #products.mascara #point01 .effectDetail .articles article:nth-child(2),
  #products.coating #point01 .effectDetail .articles article:nth-child(3),
  #products.mascara #point01 .effectDetail .articles article:nth-child(3) {
    margin-top: 42px;
    padding-top: 42px;
    border-top: #b5a495 dotted 1px;
  }
  #products.coating #point01 .effectDetail .articles article .ttl,
  #products.mascara #point01 .effectDetail .articles article .ttl {
    font-size: 1.6rem;
  }
  #products.coating #point01 .effectDetail .articles article .ttl::before,
  #products.mascara #point01 .effectDetail .articles article .ttl::before {
    width: 14px;
  }
  #products.coating #point01 .effectDetail .articles article .txt,
  #products.mascara #point01 .effectDetail .articles article .txt {
    margin-top: 18px;
  }

  #products.coating #point01 .effectDetail .articles article .list,
  #products.mascara #point01 .effectDetail .articles article .list {
    margin-top: 24px;
  }
  #products.coating #point01 .effectDetail .articles article .list dd,
  #products.mascara #point01 .effectDetail .articles article .list dd {
    font-size: 1rem;
  }
  #products.coating #point01 .effectDetail .articles article .list dd::before,
  #products.mascara #point01 .effectDetail .articles article .list dd::before {
    width: 6px;
  }

  #products.coating #point01 .column_box,
  #products.mascara #point01 .column_box {
    margin-top: 54px;
  }
  #products.coating #point01 .column_box .ttl,
  #products.mascara #point01 .column_box .ttl {
    font-size: 1.4rem;
  }
}

/* ポイント03
-------------------------------------------------------------*/
#products.coating #point03 .articles,
#products.mascara #point03 .articles {
}
#products.coating #point03 .articles article,
#products.mascara #point03 .articles article {
  display: grid;
  grid-template-columns: 52% 43%;
  grid-template-rows: auto 1fr;
  gap: 0 5%;
}
#products.coating #point03 .articles article:not(:first-of-type),
#products.mascara #point03 .articles article:not(:first-of-type) {
  margin-top: 102px;
}
#products.coating #point03 .articles article .ttl,
#products.mascara #point03 .articles article .ttl {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: 2.4rem;
  line-height: 1.5;
}
#products.coating #point03 .articles article .txt_box,
#products.mascara #point03 .articles article .txt_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 36px;
}
#products.coating #point03 .articles article .txt_box .txt + .txt,
#products.mascara #point03 .articles article .txt_box .txt + .txt {
  margin-top: 18px;
}
#products.coating #point03 .articles article .img_box,
#products.mascara #point03 .articles article .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
#products.coating #point03 .articles article:nth-of-type(even),
#products.mascara #point03 .articles article:nth-of-type(even) {
  grid-template-columns: 43% 52%;
}
#products.coating #point03 .articles article:nth-of-type(even) .ttl,
#products.coating #point03 .articles article:nth-of-type(even) .txt_box,
#products.mascara #point03 .articles article:nth-of-type(even) .ttl,
#products.mascara #point03 .articles article:nth-of-type(even) .txt_box {
  grid-column: 2 / 3;
}
#products.coating #point03 .articles article:nth-of-type(even) .img_box,
#products.mascara #point03 .articles article:nth-of-type(even) .img_box {
  grid-column: 1 / 2;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.coating #point03 .articles article,
  #products.mascara #point03 .articles article {
    display: block;
  }
  #products.coating #point03 .articles article:not(:first-of-type),
  #products.mascara #point03 .articles article:not(:first-of-type) {
    margin-top: 42px;
    padding-top: 42px;
    border-top: #b5a495 dotted 1px;
  }
  #products.coating #point03 .articles article .ttl,
  #products.mascara #point03 .articles article .ttl {
    font-size: 2rem;
  }
  #products.coating #point03 .articles article .txt_box,
  #products.mascara #point03 .articles article .txt_box {
    margin-top: 24px;
  }
  #products.coating #point03 .articles article .txt_box .txt + .txt,
  #products.mascara #point03 .articles article .txt_box .txt + .txt {
    margin-top: 12px;
  }
  #products.coating #point03 .articles article .img_box,
  #products.mascara #point03 .articles article .img_box {
    margin-top: 36px;
  }
}

/* 使いこなし
-------------------------------------------------------------*/
#products.coating #masterfulUse,
#products.mascara #masterfulUse {
  padding: 144px 0 162px;
  background: #fde361;
}
#products.coating #masterfulUse .ttl_box .ttl,
#products.mascara #masterfulUse .ttl_box .ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.4rem;
}
#products.coating #masterfulUse .ttl_box .ttl span,
#products.mascara #masterfulUse .ttl_box .ttl span {
  font-size: 3.6rem;
}

#products.coating #masterfulUse .txt_box,
#products.mascara #masterfulUse .txt_box {
  margin-top: 72px;
}
#products.coating #masterfulUse .txt_box .txt,
#products.mascara #masterfulUse .txt_box .txt {
  text-align: center;
}

#products.coating #masterfulUse .articles,
#products.mascara #masterfulUse .articles {
  display: flex;
  justify-content: space-between;
  gap: 0 9%;
}
#products.coating #masterfulUse .articles article,
#products.mascara #masterfulUse .articles article {
  width: calc((100% - (9% * 2)) / 2);
  margin-top: 72px;
}
#products.coating #masterfulUse .articles article .labels,
#products.mascara #masterfulUse .articles article .labels {
  margin-top: 36px;
}
#products.coating #masterfulUse .articles article .img_box img,
#products.mascara #masterfulUse .articles article .img_box img,
#products.coating #masterfulUse .articles article .labels img,
#products.mascara #masterfulUse .articles article .labels img {
  width: 100%;
  height: auto;
}
#products.coating #masterfulUse .articles article .txt,
#products.mascara #masterfulUse .articles article .txt {
  margin-top: 36px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.coating #masterfulUse,
  #products.mascara #masterfulUse {
    padding: 74px 0 102px;
  }
  #products.coating #masterfulUse .ttl_box .ttl,
  #products.mascara #masterfulUse .ttl_box .ttl {
    font-size: 1.8rem;
  }
  #products.coating #masterfulUse .ttl_box .ttl span,
  #products.mascara #masterfulUse .ttl_box .ttl span {
    font-size: 2.4rem;
  }

  #products.coating #masterfulUse .txt_box,
  #products.mascara #masterfulUse .txt_box {
    margin-top: 48px;
  }
  #products.coating #masterfulUse .txt_box .txt,
  #products.mascara #masterfulUse .txt_box .txt {
    text-align: left;
  }

  #products.coating #masterfulUse .articles,
  #products.mascara #masterfulUse .articles {
    display: block;
  }
  #products.coating #masterfulUse .articles article,
  #products.mascara #masterfulUse .articles article {
    width: 100%;
    margin-top: 42px;
  }
  #products.coating #masterfulUse .articles article:not(:first-of-type),
  #products.mascara #masterfulUse .articles article:not(:first-of-type) {
    margin-top: 42px;
    padding-top: 42px;
    border-top: #6c4f2c dotted 1px;
  }
  #products.coating #masterfulUse .articles article .labels,
  #products.mascara #masterfulUse .articles article .labels {
    margin-top: 24px;
  }
  #products.coating #masterfulUse .articles article .txt,
  #products.mascara #masterfulUse .articles article .txt {
    margin-top: 24px;
  }
}

/* テクニック
-------------------------------------------------------------*/
#products.coating #technic,
#products.mascara #technic {
  padding: 144px 0 162px;
  background: #f4f4f4;
}

#products.coating #technic .ttl_box,
#products.mascara #technic .ttl_box {
}

#products.coating #technic .ttl_box .ttl,
#products.mascara #technic .ttl_box .ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 3.6rem;
  text-align: center;
}

#products.coating #technic .articles,
#products.mascara #technic .articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px 5%;
  margin-top: 72px;
}
#products.coating #technic .articles article,
#products.mascara #technic .articles article {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  width: calc((100% - (5% * 2)) / 3);
  padding: 24px;
  background: #fff;
  border-radius: 4px;
}
#products.mascara #technic .articles article {
  width: calc((100% - 5%) / 2);
}
#products.mascara #technic .articles article {
  grid-template-columns: 50% 41%;
  grid-template-rows: auto auto;
}
#products.coating #technic .articles article .ttl,
#products.mascara #technic .articles article .ttl {
  font-size: 2rem;
}
#products.coating #technic .articles article .ttl span,
#products.mascara #technic .articles article .ttl span {
  font-size: 3rem;
}
#products.coating #technic .articles article .txt,
#products.mascara #technic .articles article .txt {
  margin-top: 18px;
}
#products.coating #technic .articles article .img_box,
#products.mascara #technic .articles article .img_box {
  margin-top: 18px;
}
#products.coating #technic .articles article .ttl {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.coating #technic .articles article .txt {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.coating #technic .articles article .img_box {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
#products.mascara #technic .articles article .ttl {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.mascara #technic .articles article .txt {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.mascara #technic .articles article .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

#products.coating #technic .relatedProducts,
#products.mascara #technic .relatedProducts {
  margin-top: 126px;
}
#products.coating #technic .relatedProducts .cmnLineTtl,
#products.mascara #technic .relatedProducts .cmnLineTtl {
  font-size: 2.4rem;
}
#products.coating #technic .relatedProducts .items,
#products.mascara #technic .relatedProducts .items {
  display: flex;
  justify-content: space-between;
  margin-top: 72px;
  padding: 0 42px;
}
#products.coating #technic .relatedProducts .items .item,
#products.mascara #technic .relatedProducts .items .item {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(3, auto) 1fr auto;
  width: 45%;
}
#products.coating #technic .relatedProducts .items .item .img_box,
#products.coating #technic .relatedProducts .items .item .name,
#products.coating #technic .relatedProducts .items .item .price,
#products.coating #technic .relatedProducts .items .item .txt,
#products.coating #technic .relatedProducts .items .item .btn,
#products.mascara #technic .relatedProducts .items .item .img_box,
#products.mascara #technic .relatedProducts .items .item .name,
#products.mascara #technic .relatedProducts .items .item .price,
#products.mascara #technic .relatedProducts .items .item .txt,
#products.mascara #technic .relatedProducts .items .item .btn {
  grid-column: 1 / 2;
}
#products.coating #technic .relatedProducts .items .item .img_box,
#products.mascara #technic .relatedProducts .items .item .img_box {
  grid-row: 1 / 2;
}
#products.coating #technic .relatedProducts .items .item .name,
#products.coating #technic .relatedProducts .items .item .name {
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
#products.coating #technic .relatedProducts .items .item .name .jp_txt,
#products.mascara #technic .relatedProducts .items .item .name .jp_txt {
  font-size: 1.8rem;
}
#products.coating #technic .relatedProducts .items .item .name .en_txt,
#products.mascara #technic .relatedProducts .items .item .name .en_txt {
}
#products.coating #technic .relatedProducts .items .item .price,
#products.mascara #technic .relatedProducts .items .item .price {
  grid-row: 3 / 4;
  display: flex;
  align-items: baseline;
  margin-top: 18px;
}
#products.coating #technic .relatedProducts .items .item .price .yen,
#products.mascara #technic .relatedProducts .items .item .price .yen {
  font-size: 1.6rem;
}
#products.coating #technic .relatedProducts .items .item .price .value,
#products.mascara #technic .relatedProducts .items .item .price .value {
  font-size: 2.8rem;
}
#products.coating #technic .relatedProducts .items .item .price .tax,
#products.mascara #technic .relatedProducts .items .item .price .tax {
  font-size: 1.2rem;
}
#products.coating #technic .relatedProducts .items .item .txt,
#products.mascara #technic .relatedProducts .items .item .txt {
  grid-row: 4 / 5;
  margin-top: 24px;
}
#products.coating #technic .relatedProducts .items .item .btn,
#products.mascara #technic .relatedProducts .items .item .btn {
  grid-row: 5 / 6;
  margin-top: 24px;
}
#products.coating #technic .relatedProducts .items .item .btn a,
#products.mascara #technic .relatedProducts .items .item .btn a {
  display: block;
  width: 224px;
  padding: 4px;
  background: #fde361;
  border-radius: 4px;
  font-size: 1.6rem;
  text-align: center;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.coating #technic,
  #products.mascara #technic {
    padding: 74px 0 102px;
    background: #f4f4f4;
  }

  #products.coating #technic .ttl_box .ttl,
  #products.mascara #technic .ttl_box .ttl {
    font-size: 2.4rem;
  }

  #products.coating #technic .articles,
  #products.mascara #technic .articles {
    display: block;
    margin-top: 54px;
  }
  #products.coating #technic .articles article,
  #products.mascara #technic .articles article {
    grid-template-columns: 50% 41%;
    grid-template-rows: auto auto;
    gap: 0 9%;
    width: 100%;
  }
  #products.coating #technic .articles article:not(:first-of-type),
  #products.mascara #technic .articles article:not(:first-of-type) {
    margin-top: 24px;
  }
  #products.coating #technic .articles article .txt,
  #products.mascara #technic .articles article .txt {
    margin-top: 24px;
  }
  #products.coating #technic .articles article .img_box,
  #products.mascara #technic .articles article .img_box {
    margin-top: 0;
  }
  #products.coating #technic .articles article .ttl,
  #products.mascara #technic .articles article .ttl {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-self: center;
  }
  #products.coating #technic .articles article .txt,
  #products.mascara #technic .articles article .txt {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  #products.coating #technic .articles article .img_box,
  #products.mascara #technic .articles article .img_box {
    grid-column: 2 / 3;
    grid-row: 1 / 1;
  }

  #products.coating #technic .relatedProducts,
  #products.mascara #technic .relatedProducts {
    margin-top: 72px;
  }
  #products.coating #technic .relatedProducts .cmnLineTtl,
  #products.mascara #technic .relatedProducts .cmnLineTtl {
    font-size: 1.8rem;
  }
  #products.coating #technic .relatedProducts .items,
  #products.mascara #technic .relatedProducts .items {
    display: block;
    justify-content: space-between;
    margin-top: 36px;
    padding: 0;
  }
  #products.coating #technic .relatedProducts .items .item,
  #products.mascara #technic .relatedProducts .items .item {
    display: block;
    width: 100%;
  }
  #products.coating #technic .relatedProducts .items .item:not(:first-of-type),
  #products.mascara #technic .relatedProducts .items .item:not(:first-of-type) {
    margin-top: 42px;
    padding-top: 42px;
    border-top: #6c4f2c dotted 1px;
  }
  #products.coating #technic .relatedProducts .items .item .name,
  #products.coating #technic .relatedProducts .items .item .name {
    margin-top: 24px;
  }
  #products.coating #technic .relatedProducts .items .item .name .jp_txt,
  #products.mascara #technic .relatedProducts .items .item .name .jp_txt {
    font-size: 1.6rem;
  }
  #products.coating #technic .relatedProducts .items .item .name .en_txt,
  #products.mascara #technic .relatedProducts .items .item .name .en_txt {
    font-size: 1.2rem;
  }
  #products.coating #technic .relatedProducts .items .item .txt,
  #products.mascara #technic .relatedProducts .items .item .txt {
    margin-top: 18px;
  }
  #products.coating #technic .relatedProducts .items .item .price,
  #products.mascara #technic .relatedProducts .items .item .price {
    justify-content: flex-end;
    margin-top: 0;
  }
  #products.coating #technic .relatedProducts .items .item .btn,
  #products.mascara #technic .relatedProducts .items .item .btn {
    margin-top: 24px;
  }
  #products.coating #technic .relatedProducts .items .item .btn a,
  #products.mascara #technic .relatedProducts .items .item .btn a {
    width: 100%;
    padding: 6px;
  }
}

/*-------------------------------------------------------------*/
/* ハピ　コーティングシリーズ
/*-------------------------------------------------------------*/

/* メインビジュアル
-------------------------------------------------------------*/
#products.coating #mainVisual .txt_box .items {
  margin-top: 42px;
}
#products.coating #mainVisual .txt_box .items .item:not(:first-of-type) {
  margin-top: 36px;
}
#products.coating #mainVisual .txt_box .items .item .name_box {
  display: flex;
  align-items: flex-start;
  gap: 0 24px;
}
#products.coating #mainVisual .txt_box .items .item .name_box .name {
  display: flex;
  flex-direction: column;
}
#products.coating #mainVisual .txt_box .items .item .name_box .name .jp_txt {
  font-size: 2rem;
}
#products.coating #mainVisual .txt_box .items .item .name_box .name .en_txt {
  font-size: 1.6rem;
}
#products.coating #mainVisual .txt_box .items .item .name_box .type {
  padding: 2px 1em;
  background: #fff;
  border: #6c4f2c solid 1px;
  border-radius: 2px;
}
#products.coating #mainVisual .txt_box .items .item .icons {
  margin-top: 12px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.coating #mainVisual .txt_box .items .item .name_box {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: block;
  }
  #products.coating #mainVisual .txt_box .items .item .name_box .name .jp_txt {
    font-size: 1.6rem;
  }
  #products.coating #mainVisual .txt_box .items .item .name_box .name .en_txt {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
  }
  #products.coating #mainVisual .txt_box .items .item .name_box .type {
    width: fit-content;
    margin-top: 12px;

    font-size: 1.1rem;
  }

  #products.coating #mainVisual .txt_box .items .item .icons {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  #products.coating #mainVisual .txt_box .items .item .example {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;
    width: 100%;
    position: static;
  }
}

/* ポイント02
-------------------------------------------------------------*/
#products.coating #point02 .cmnInner {
}

#products.coating #point02 .copy_box .copy {
  width: fit-content;
  margin: 0 auto;
  font-size: 2.4rem;
}
#products.coating #point02 .copy_box .copy span {
  font-size: 4.4rem;
}

#products.coating #point02 .items {
  display: grid;
  grid-template-columns: 29% 8% 29% 5% 29%;
  grid-column: auto 1fr;
}
#products.coating #point02 .items .cmnLineTtl {
  font-size: 2rem;
}
#products.coating #point02 .items #texture_sarasara.cmnLineTtl {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.coating #point02 .items #texture_kotteri.cmnLineTtl {
  grid-column: 3 / 6;
  grid-row: 1 / 2;
}

#products.coating #point02 .items .item {
}
#products.coating #point02 .items #texture_essenceGlosse.item {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.coating #point02 .items #texture_keepLift.item {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
#products.coating #point02 .items #texture_blackKeepLift.item {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}




#products.coating #point02 .items .item .img_box {
  margin-top: 42px;
}
#products.coating #point02 .items .item .name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
  text-align: center;
}
#products.coating #point02 .items .item .name .jp_txt {
  font-size: 1.8rem;
}
#products.coating #point02 .items .item .name .en_txt {
  font-size: 1.2rem;
}
#products.coating #point02 .items .item .txt_box {
  margin-top: 42px;
}
#products.coating #point02 .items .item .txt_box .ttl {
  font-size: 1.6rem;
}
#products.coating #point02 .items .item .txt_box .txt {
  margin-top: 12px;
}

#products.coating #point02 .column_box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  gap: 0 2em;
  margin-top: 54px;
  padding: 24px;
  background: #f5ece6;
  border-radius: 4px;
}
#products.coating #point02 .column_box .ttl {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: 1.6rem;
  font-weight: 600;
}
#products.coating #point02 .column_box .txt {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
#products.coating #point02 .column_box .img_box {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  flex-shrink: 0;
}

#products.coating #point02 .articles {
  margin-top: 156px;
}
#products.coating #point02 .articles article {
  display: grid;
  grid-template-columns: 52% 43%;
  grid-template-rows: auto 1fr;
  gap: 0 5%;
}
#products.coating #point02 .articles article:not(:first-of-type) {
  margin-top: 102px;
}

#products.coating #point02 .articles article .ttl {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: 2.4rem;
  line-height: 1.5;
}
#products.coating #point02 .articles article .txt {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 36px;
}
#products.coating #point02 .articles article .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
#products.coating #point02 .articles article:nth-of-type(even) {
  grid-template-columns: 43% 52%;
}
#products.coating #point02 .articles article:nth-of-type(even) .ttl,
#products.coating #point02 .articles article:nth-of-type(even) .txt {
  grid-column: 2 / 3;
}
#products.coating #point02 .articles article:nth-of-type(even) .img_box {
  grid-column: 1 / 2;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.coating #point02 .copy_box .copy {
    font-size: 1.8rem;
    text-align: center;
  }
  #products.coating #point02 .copy_box .copy span {
    font-size: 3.6rem;
  }

  #products.coating #point02 .items {
    display: block;
  }
  #products.coating #point02 .items .cmnLineTtl {
    font-size: 1.6rem;
  }
  #products.coating #point02 .items #texture_kotteri.cmnLineTtl {
    margin-top: 42px;
  }
  #products.coating #point02 .items .item {
    width: 100%;
  }
  #products.coating #point02 .items .item:not(:first-of-type) {
    margin-top: 54px;
  }
  #products.coating #point02 .items .item .img_box {
    margin-top: 24px;
  }
  #products.coating #point02 .items .item .name {
    margin-top: 24px;
  }
  #products.coating #point02 .items .item .name .jp_txt {
    font-size: 1.4rem;
  }
  #products.coating #point02 .items .item .name .en_txt {
    font-size: 1rem;
  }
  #products.coating #point02 .items .item .txt_box {
    margin-top: 24px;
  }
  #products.coating #point02 .items .item .txt_box .ttl {
    font-size: 1.6rem;
  }
  #products.coating #point02 .items .item .txt_box .txt {
    margin-top: 12px;
  }

  #products.coating #point02 .column_box {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
  }
  #products.coating #point02 .column_box .ttl {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 1.4rem;
  }
  #products.coating #point02 .column_box .txt {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin-top: 6px;
  }
  #products.coating #point02 .column_box .img_box {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    flex-shrink: 0;
  }

  #products.coating #point02 .articles {
    margin-top: 78px;
  }
  #products.coating #point02 .articles article {
    display: block;
    margin-top: 42px;
    padding-top: 42px;
    border-top: #6c4f2c dotted 1px;
  }

  #products.coating #point02 .articles article .ttl {
    font-size: 2rem;
  }
  #products.coating #point02 .articles article .txt {
    margin-top: 24px;
  }
  #products.coating #point02 .articles article .img_box {
    margin-top: 36px;
  }
}

/*-------------------------------------------------------------*/
/* ハピ　キープリフトコーティング
/*-------------------------------------------------------------*/

/* メインビジュアル
-------------------------------------------------------------*/
/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.mascara #mainVisual .txt_box .txt {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  #products.mascara #mainVisual .txt_box .note {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin-bottom: 36px;
  }
  #products.mascara #mainVisual .txt_box .icons {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin: 0;
  }
  #products.mascara #mainVisual .txt_box .example {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    align-self: center;
    width: 100%;
    position: static;
  }
}

/* ポイント02
-------------------------------------------------------------*/
#products.mascara #point02 .cmnInner {
}
#products.mascara #point02 .txt_box .txt {
}

#products.mascara #point02 .articles {
  display: grid;
  grid-template-columns: 45% 10% 45%;
  grid-template-rows: auto;
  margin-top: 54px;
}
#products.mascara #point02 .articles::before {
  grid-columns: 2 / 3;
  grid-row: 1 / 2;
  justify-self: center;
  content: "";
  width: 1px;
  height: 100%;
  border-left: #b5a495 dotted 1px;
}
#products.mascara #point02 .articles article {
}
#products.mascara #point02 .articles article:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.mascara #point02 .articles article:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
#products.mascara #point02 .articles article .ttl {
  font-size: 2.4rem;
}
#products.mascara #point02 .articles article .txt {
  margin-top: 36px;
}
#products.mascara #point02 .articles article .img_box {
  margin-top: 36px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.mascara #point02 .articles {
    display: block;
    margin-top: 36px;
  }
  #products.mascara #point02 .articles::before {
    content: none;
  }
  #products.mascara #point02 .articles article {
    display: flex;
    flex-direction: column;
  }
  #products.mascara #point02 .articles article:not(:first-of-type) {
    margin-top: 42px;
    padding-top: 42px;
    border-top: #6c4f2c dotted 1px;
  }
  #products.mascara #point02 .articles article .ttl {
    order: 1;
    font-size: 2rem;
  }
  #products.mascara #point02 .articles article .txt {
    order: 3;
    margin-top: 24px;
  }
  #products.mascara #point02 .articles article .img_box {
    order: 2;
    margin-top: 24px;
  }
}

/*-------------------------------------------------------------*/
/* モイスチャークレンジングジェルブライト
/*-------------------------------------------------------------*/

/* mainVisual
-------------------------------------------------------------*/
#products.cleansing #mainVisual {
  background: #f7f6fb;
}

/* ポイント 01 02 03 共通
-------------------------------------------------------------*/
#products.cleansing .points .cmnInner {
  display: grid;
  grid-template-rows: auto auto;
}
#products.cleansing #point01 .cmnInner {
  grid-template-columns: 48% 48%;
  gap: 0 4%;
}
#products.cleansing #point02 .cmnInner {
  grid-template-columns: 52% 38%;
  gap: 0 10%;
}
#products.cleansing #point03 .cmnInner {
  grid-template-columns: 48% 43%;
  gap: 0 9%;
}

#products.cleansing .points .ttl_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.cleansing .points .txt_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.cleansing .points .txt_box .txt + .txt {
  margin-top: 18px;
}
#products.cleansing .points .txt_box .copy {
  margin-bottom: 18px;
  font-size: 3rem;
}
#products.cleansing .points .txt_box .note {
  margin-top: 36px;
  font-size: 1.2rem;
}
#products.cleansing .points .txt_box .images {
  margin-top: 36px;
}
#products.cleansing .points .txt_box .images img {
  width: 100%;
  height: auto;
}
#products.cleansing .points .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.cleansing .points .cmnInner {
    display: block;
  }

  #products.cleansing .points .txt_box .txt + .txt {
    margin-top: 12px;
  }
  #products.cleansing .points .txt_box .copy {
    font-size: 2rem;
  }
  #products.cleansing .points .txt_box .note {
    margin-top: 18px;
    font-size: 1rem;
  }
  #products.cleansing .points .txt_box .images {
    margin-top: 24px;
  }
  #products.cleansing .points .img_box {
    margin-top: 36px;
  }
}

/* 特徴
-------------------------------------------------------------*/
#products.cleansing #feature {
  background: #fde361;
}
#products.cleansing #feature .cmnInner {
  display: grid;
  grid-template-columns:
    minmax(1px, 1fr) minmax(min(52%, 536px), 536px) minmax(min(9%, 96px), 96px)
    minmax(min(39%, 392px), 392px) minmax(1px, 1fr);
  grid-template-rows: auto;
  align-items: center;
  max-width: 100%;
  padding: 0;
}
#products.cleansing #feature .txt_box {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  padding: 72px 0 72px 36px;
}
#products.cleansing #feature .txt_box .ttl {
  font-size: 3.6rem;
}
#products.cleansing #feature .txt_box .txt {
  margin-top: 72px;
}
#products.cleansing #feature .txt_box .texture {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0 1.5em;
  margin-top: 36px;
}
#products.cleansing #feature .txt_box .texture .caption {
  max-width: 180px;
  font-size: 1.2rem;
}
#products.cleansing #feature .txt_box .texture .image {
}
#products.cleansing #feature .txt_box .texture .image img {
  width: 100%;
  height: auto;
}
#products.cleansing #feature .img_box {
  grid-column: 4 / 6;
  grid-row: 1 / 2;
}
/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.cleansing #feature .cmnInner {
    display: flex;
    flex-direction: column;
  }
  #products.cleansing #feature .txt_box {
    order: 2;
    padding: 48px 36px 102px;
  }
  #products.cleansing #feature .txt_box .ttl {
    font-size: 2.2rem;
  }
  #products.cleansing #feature .txt_box .txt {
    margin-top: 36px;
  }
  #products.cleansing #feature .txt_box .texture {
    margin-top: 18px;
  }
  #products.cleansing #feature .txt_box .texture .caption {
    max-width: auto;
    font-size: 1.1rem;
  }
  #products.cleansing #feature .txt_box .texture .image {
    width: 90%;
  }
  #products.cleansing #feature .txt_box .texture .image img {
    width: 100%;
    height: auto;
  }
  #products.cleansing #feature .img_box {
    order: 1;
  }
}

/*-------------------------------------------------------------*/
/* アイリッチパッチ
/*-------------------------------------------------------------*/

/* mainVisual
-------------------------------------------------------------*/
#products.patch #mainVisual {
  background: #fbfbfb;
}

/* ポイント01
-------------------------------------------------------------*/
#products.patch #point01 .cmnInner {
  display: grid;
  grid-template-columns: 47% 5% 38%;
  grid-template-rows: repeat(2, auto);
  gap: 0 5%;
}
#products.patch #point01 .cmnInner::before {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-self: center;
  content: "";
  width: 100%;
  height: 1px;
  border-top: #6c4f2c solid 1px;
}
#products.patch #point01 .cmnInner::after {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  content: "";
  width: 50%;
  height: 100%;
  background: #fff;
  border-top: #6c4f2c solid 1px;
  border-right: #6c4f2c solid 1px;
  border-bottom: #6c4f2c solid 1px;
}
#products.patch #point01 .ttl_box {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}
#products.patch #point01 .items {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 72px 0;
}
#products.patch #point01 .items .item {
  display: grid;
  grid-template-columns: 35% 55%;
  grid-template-rows: repeat(2, auto);
  gap: 0 10%;
}
#products.patch #point01 .items .item .img_box {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
#products.patch #point01 .items .item .ttl {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-size: 2.2rem;
}
#products.patch #point01 .items .item .txt {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  margin-top: 12px;
}
#products.patch #point01 .result {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(2, auto) 1fr;
}
#products.patch #point01 .result .img_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: 66%;
  margin: 0 auto;
}
#products.patch #point01 .result .txt {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 42px;
  font-size: 2.2rem;
  text-align: center;
}
#products.patch #point01 .result .txt span {
  font-size: 2.8rem;
}
#products.patch #point01 .result .others {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  align-self: flex-end;
  padding: 24px;
  border: #6c4f2c solid 1px;
  border-radius: 4px;
}
#products.patch #point01 .result .others dt {
  font-size: 1.6rem;
}
#products.patch #point01 .result .others dd {
  margin-top: 12px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.patch #point01 .cmnInner {
    display: block;
  }
  #products.patch #point01 .cmnInner::before {
    content: none;
  }
  #products.patch #point01 .cmnInner::after {
    content: none;
  }
  #products.patch #point01 .ttl_box {
  }
  #products.patch #point01 .items {
    display: block;
  }
  #products.patch #point01 .items .item:not(:first-of-type) {
    margin-top: 24px;
    padding-top: 24px;
    border-top: #6c4f2c dotted 1px;
  }
  #products.patch #point01 .items .item:nth-of-type(even) {
    grid-template-columns: 55% 35%;
  }
  #products.patch #point01 .items .item:nth-of-type(even) .img_box {
    grid-column: 2 / 3;
  }
  #products.patch #point01 .items .item .ttl {
    font-size: 1.6rem;
  }
  #products.patch #point01 .items .item:nth-of-type(even) .ttl,
  #products.patch #point01 .items .item:nth-of-type(even) .txt {
    grid-column: 1 / 2;
  }
  #products.patch #point01 .result {
    display: block;
    margin-top: 36px;
    padding-top: calc(36px + 24px);
    position: relative;
    border-top: #6c4f2c solid 1px;
  }
  #products.patch #point01 .result::before {
    content: "";
    width: 1px;
    height: 24px;
    position: absolute;
    left: 50%;
    bottom: calc(100% - 24px);
    border-left: #6c4f2c solid 1px;
  }
  #products.patch #point01 .result .img_box {
    width: 90%;
    margin: 0 auto;
  }
  #products.patch #point01 .result .txt {
    margin-top: 24px;
    font-size: 1.8rem;
    text-align: center;
  }
  #products.patch #point01 .result .txt span {
    font-size: 2.2rem;
  }
  #products.patch #point01 .result .others {
    margin-top: 36px;
  }
  #products.patch #point01 .result .others dt {
    font-size: 1.4rem;
  }
  #products.patch #point01 .result .others dd {
    margin-top: 6px;
  }
}

/* ポイント02
-------------------------------------------------------------*/
#products.patch #point02 .cmnInner {
  display: grid;
  grid-template-columns: 52% 38%;
  grid-template-rows: repeat(3, auto);
  gap: 0 10%;
}
#products.patch #point02 .ttl_box {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

#products.patch #point02 .copy_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.patch #point02 .copy_box .copy {
  font-size: 2.4rem;
}

#products.patch #point02 .txt_box {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
#products.patch #point02 .txt_box .txt {
  margin-top: 36px;
}
#products.patch #point02 .txt_box .txt + .txt {
  margin-top: 18px;
}

#products.patch #point02 .img_box {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.patch #point02 .cmnInner {
    display: block;
  }
  #products.patch #point02 .ttl_box {
  }

  #products.patch #point02 .copy_box .copy {
    font-size: 2rem;
  }

  #products.patch #point02 .txt_box .txt {
    margin-top: 24px;
  }
  #products.patch #point02 .txt_box .txt + .txt {
    margin-top: 12px;
  }

  #products.patch #point02 .img_box {
    margin-top: 36px;
  }
}

/* ポイント03
-------------------------------------------------------------*/
#products.patch #point03 .cmnInner {
  display: grid;
  grid-template-columns: 52% 38%;
  grid-template-rows: repeat(3, auto);
  gap: 0 10%;
}
#products.patch #point03 .ttl_box {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
#products.patch #point03 .txt_box {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  margin-bottom: 64px;
}
#products.patch #point03 .noAdditives {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
#products.patch #point03 .weaklyAcidic {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

#products.patch #point03 .noAdditives .img_box,
#products.patch #point03 .weaklyAcidic .img_box {
  margin-top: 46px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.patch #point03 .cmnInner {
    display: block;
  }
  #products.patch #point03 .ttl_box {
  }
  #products.patch #point03 .txt_box {
    margin-bottom: 42px;
  }
  #products.patch #point03 .noAdditives {
  }
  #products.patch #point03 .weaklyAcidic {
    margin-top: 48px;
  }

  #products.patch #point03 .noAdditives .img_box .cmnLineTtl,
  #products.patch #point03 .weaklyAcidic .img_box .cmnLineTtl {
    font-size: 1.4rem;
  }
  #products.patch #point03 .noAdditives .img_box,
  #products.patch #point03 .weaklyAcidic .img_box {
    margin-top: 12px;
  }
}

/* サロンワーク
-------------------------------------------------------------*/
#products.patch #salonWork #title {
  padding: 90px 0;
  background: #f4f4f4;
}
#products.patch #salonWork #title .ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 3.6rem;
}

#products.patch #salonWork #probrem {
  padding: 96px 0 126px;
}
#products.patch #salonWork #probrem .cmnInner {
  max-width: calc(720px + (36px * 2));
}
#products.patch #salonWork #probrem .ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.4rem;
}
#products.patch #salonWork #probrem .ttl .mid {
  font-size: 2.8rem;
}
#products.patch #salonWork #probrem .ttl .mid .strong {
  position: relative;
  font-size: 3.4rem;
  z-index: 2;
  text-decoration: underline;
  text-decoration-color: #fde361;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.1em;
}

#products.patch #salonWork #probrem .items {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
}
#products.patch #salonWork #probrem .items .item {
  width: calc((100% - (10% * 2)) / 3);
  margin-top: 96px;
}
#products.patch #salonWork #probrem .items .item .txt {
  text-align: center;
  font-size: 1.8rem;
}
#products.patch #salonWork #probrem .items .item .img_box {
  margin-top: 18px;
}

#products.patch #salonWork #probrem .copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 84px;
  font-size: 2.4rem;
  line-height: 1.8;
  text-decoration: underline;
  text-decoration-color: #e2e2e2;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.1em;
}
#products.patch #salonWork #probrem .copy::after {
  content: "";
  width: 85px;
  height: 50px;
  margin-top: 60px;
  background: #e2e2e2;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#products.patch #salonWork #probrem .copy span {
  font-size: 3rem;
}

#products.patch #salonWork #probrem .column {
  display: grid;
  grid-template-columns: 50% 40%;
  grid-template-rows: repeat(2, 1fr);
  gap: 0 10%;
  max-width: 640px;
  margin: 54px auto 0;
  padding: 24px 36px;
  border: #e2e2e2 solid 1px;
  border-radius: 4px;
}
#products.patch #salonWork #probrem .column .txt {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: center;
}
#products.patch #salonWork #probrem .column .btn {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  max-width: 180px;
  margin-top: 18px;
}
#products.patch #salonWork #probrem .column .btn a {
  display: block;
  width: 224px;
  padding: 4px;
  background: #fde361;
  border-radius: 4px;
  font-size: 1.6rem;
  text-align: center;
}
#products.patch #salonWork #probrem .column .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

#products.patch #salonWork #feature {
  padding: 96px 0;
  position: relative;
  background: #fde361;
}
#products.patch #salonWork #feature::after {
  content: "";
  width: 100%;
  height: 90px;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  background: #fde361;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#products.patch #salonWork #feature .ttl {
  font-size: 2.4rem;
  text-align: center;
}
#products.patch #salonWork #feature .ttl span {
  font-size: 4.6rem;
}
#products.patch #salonWork #feature .items {
  display: grid;
  grid-template-columns: 28% 8% 28% 8% 28%;
  grid-template-rows: auto;
  margin-top: 72px;
}
#products.patch #salonWork #feature .items::before,
#products.patch #salonWork #feature .items::after {
  grid-row: 1 / 2;
  justify-self: center;
  content: "";
  width: 1px;
  height: 100%;
  border-left: #fff dotted 1px;
}
#products.patch #salonWork #feature .items::before {
  grid-column: 2 / 3;
}
#products.patch #salonWork #feature .items::after {
  grid-column: 4 / 5;
}
#products.patch #salonWork #feature .items .item {
  grid-row: 1 / 2;
}
#products.patch #salonWork #feature .items .item:nth-of-type(1) {
  grid-column: 1 / 2;
}
#products.patch #salonWork #feature .items .item:nth-of-type(2) {
  grid-column: 3 / 4;
}
#products.patch #salonWork #feature .items .item:nth-of-type(3) {
  grid-column: 5 / 6;
}
#products.patch #salonWork #feature .items .item .img_box {
  width: 80%;
  margin: 0 auto;
}
#products.patch #salonWork #feature .items .item .copy {
  margin-top: 24px;
  font-size: 2rem;
}
#products.patch #salonWork #feature .items .item .txt {
  margin-top: 12px;
}

#products.patch #salonWork #solution {
  padding: 152px 0 168px;
}
#products.patch #salonWork #solution .copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 3rem;
}
#products.patch #salonWork #solution .copy span {
  font-size: 3.6rem;
  text-decoration: underline;
  text-decoration-color: #fde361;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.1em;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.patch #salonWork #title {
    padding: 30px 0;
  }
  #products.patch #salonWork #title .ttl {
    font-size: 2.4rem;
  }

  #products.patch #salonWork #probrem {
    padding: 54px 0 60px;
  }
  #products.patch #salonWork #probrem .cmnInner {
    max-width: 100%;
  }
  #products.patch #salonWork #probrem .ttl {
    display: block;
    font-size: 1.8rem;
    text-align: center;
  }
  #products.patch #salonWork #probrem .ttl .mid {
    font-size: 2rem;
  }
  #products.patch #salonWork #probrem .ttl .mid .strong {
    position: relative;
    font-size: 2.4rem;
  }

  #products.patch #salonWork #probrem .items {
    display: block;
    max-width: 500px;
    margin-top: 54px;
    padding: 0 36px;
  }
  #products.patch #salonWork #probrem .items .item {
    display: grid;
    grid-template-columns: 1fr 40%;
    align-items: center;
    width: 100%;
    margin-top: 0;
    padding: 0 5% 0 0;
    gap: 0 5%;
  }
  #products.patch #salonWork #probrem .items .item:nth-of-type(even) {
    grid-template-columns: 40% 1fr;
    padding: 0 0 0 5%;
  }
  #products.patch #salonWork #probrem .items .item:not(:first-of-type) {
    margin-top: 24px;
    padding-top: 24px;
    border-top: #6c4f2c dotted 1px;
  }

  #products.patch #salonWork #probrem .items .item .txt {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: left;
    font-size: 1.4rem;
  }
  #products.patch #salonWork #probrem .items .item:nth-of-type(even) .txt {
    grid-column: 2 / 3;
  }
  #products.patch #salonWork #probrem .items .item .img_box {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin-top: 0;
  }
  #products.patch #salonWork #probrem .items .item:nth-of-type(even) .img_box {
    grid-column: 1 / 2;
  }

  #products.patch #salonWork #probrem .copy {
    margin-top: 42px;
    font-size: 1.8rem;
  }
  #products.patch #salonWork #probrem .copy::after {
    width: 47px;
    height: 28px;
    margin-top: 36px;
  }
  #products.patch #salonWork #probrem .copy span {
    font-size: 2.2rem;
  }

  #products.patch #salonWork #probrem .column {
    display: flex;
    flex-direction: column;
    margin: 36px auto 0;
    padding: 24px 24px;
  }
  #products.patch #salonWork #probrem .column .txt {
    order: 1;
    align-self: center;
    font-size: 1.6rem;
  }
  #products.patch #salonWork #probrem .column .btn {
    order: 3;
    margin-top: 24px;
    max-width: 100%;
  }
  #products.patch #salonWork #probrem .column .btn a {
    width: 100%;
  }
  #products.patch #salonWork #probrem .column .img_box {
    order: 2;
    margin-top: 24px;
  }

  #products.patch #salonWork #feature {
    padding: 54px 0;
  }
  #products.patch #salonWork #feature::after {
    height: 35px;
  }
  #products.patch #salonWork #feature .ttl {
    font-size: 2rem;
    text-align: center;
  }
  #products.patch #salonWork #feature .ttl span {
    font-size: 3rem;
  }
  #products.patch #salonWork #feature .items {
    display: block;
    margin-top: 42px;
  }
  #products.patch #salonWork #feature .items::before,
  #products.patch #salonWork #feature .items::after {
    content: none;
  }
  #products.patch #salonWork #feature .items .item:not(:first-of-type) {
    margin-top: 24px;
    padding-top: 24px;
    border-top: #6c4f2c dotted 1px;
  }
  #products.patch #salonWork #feature .items .item .img_box {
    width: 66%;
    margin: 0 auto;
  }
  #products.patch #salonWork #feature .items .item .copy {
    margin-top: 24px;
    font-size: 1.6rem;
    text-align: center;
  }
  #products.patch #salonWork #feature .items .item .txt {
    margin-top: 6px;
  }

  #products.patch #salonWork #solution {
    padding: 102px 0 102px;
  }
  #products.patch #salonWork #solution .copy {
    font-size: 2rem;
    text-align: center;
  }
  #products.patch #salonWork #solution .copy span {
    font-size: 2.6rem;
  }
}

/*-------------------------------------------------------------*/
/* サロン様に向けて
/*-------------------------------------------------------------*/

/* イントロ
-------------------------------------------------------------*/
#forSalon #intro {
  padding: 108px 0 162px;
}
#forSalon #intro .cmnInner {
  display: grid;
  grid-template-columns:
    minmax(1px, 1fr) minmax(min(47%, 488px), 488px) minmax(min(6%, 78px), 78px)
    minmax(min(47%, 488px), 488px) minmax(1px, 1fr);
  grid-template-rows: auto;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#forSalon #intro .txt_box {
  grid-column: 4 / 5;
}

#forSalon #intro .txt_box .ttl {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 1em;
  align-self: center;
  width: 100%;
  font-size: 3rem;
}
#forSalon #intro .txt_box .ttl::before,
#forSalon #intro .txt_box .ttl::after {
  content: "";
  width: 48px;
  height: 70px;
}
#forSalon #intro .txt_box .ttl::before {
  grid-column: 1 / 2;
  align-self: flex-start;
  border-top: #6c4f2c solid 1px;
  border-left: #6c4f2c solid 1px;
}
#forSalon #intro .txt_box .ttl::after {
  grid-column: 3 / 4;
  align-self: flex-end;
  border-bottom: #6c4f2c solid 1px;
  border-right: #6c4f2c solid 1px;
}
#forSalon #intro .txt_box .ttl span {
  padding: 18px 0;
}
#forSalon #intro .txt_box .txt {
  margin-top: 66px;
}
#forSalon #intro .txt_box .copy {
  margin-top: 54px;
  font-size: 2rem;
}

#forSalon #intro .img_box {
  grid-column: 1 / 3;
}
#forSalon #intro .img_box img {
  width: 100%;
  height: auto;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #forSalon #intro {
    padding: 0 0 102px;
  }

  #forSalon #intro .cmnInner {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  #forSalon #intro .txt_box {
    max-width: 100%;
    margin-top: 48px;
    padding: 0 36px;
  }

  #forSalon #intro .txt_box .ttl {
    gap: 0;
    font-size: 2.4rem;
  }
  #forSalon #intro .txt_box .ttl::before,
  #forSalon #intro .txt_box .ttl::after {
    content: "";
    width: 24px;
    height: 40px;
  }
  #forSalon #intro .txt_box .ttl span {
    padding: 18px 0;
  }
  #forSalon #intro .txt_box .txt {
    margin-top: 48px;
  }
  #forSalon #intro .txt_box .copy {
    margin-top: 24px;
    font-size: 1.6rem;
  }
}

/* 理由
-------------------------------------------------------------*/
#forSalon #reason {
  padding: 108px 0 162px;
  background: #f4f4f4;
}

#forSalon #reason .cmnInner {
  display: grid;
  grid-template-columns: 52% 38%;
  grid-template-rows: auto auto;
  gap: 0 10%;
}
#forSalon #reason .txt_box {
  grid-column: 1 / 2;
}
#forSalon #reason .txt_box .lead {
  font-size: 2.2rem;
}

#forSalon #reason .txt_box .ttl {
  margin-top: 14px;
  padding: 40px 1em 30px;
  border-radius: 8px;
  background: #fde361;
  font-size: 2.2rem;
  text-align: center;
}
#forSalon #reason .txt_box .ttl > span {
  font-size: 2.6rem;
}
#forSalon #reason .txt_box .ttl > span span {
  font-size: 3.6rem;
}

#forSalon #reason .txt_box .txt {
  margin-top: 55px;
}
#forSalon #reason .copy_box .copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px 0;
  margin-top: 36px;
  font-size: 3rem;
  font-weight: 600;
  text-align: center;
}
#forSalon #reason .copy_box .copy::before {
  content: "";
  width: 40px;
  height: 35px;
  background: #fde361;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#forSalon #reason .copy_box .txt {
  margin-top: 36px;
}

#forSalon #reason .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #forSalon #reason {
    padding: 96px 0 102px;
  }

  #forSalon #reason .cmnInner {
    display: block;
  }
  #forSalon #reason .txt_box .lead {
    font-size: 1.6rem;
    text-align: center;
  }

  #forSalon #reason .txt_box .ttl {
    margin-top: 24px;
    padding: 24px 50px;
    font-size: 1.8rem;
  }
  #forSalon #reason .txt_box .ttl > span {
    font-size: 2rem;
  }
  #forSalon #reason .txt_box .ttl > span span {
    font-size: 3rem;
  }

  #forSalon #reason .txt_box .txt {
    margin-top: 36px;
  }
  #forSalon #reason .copy_box .copy {
    gap: 24px 0;
    margin-top: 36px;
    font-size: 2.2rem;
  }
  #forSalon #reason .copy_box .copy::before {
    content: "";
    width: 40px;
    height: 35px;
    background: #fde361;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  #forSalon #reason .copy_box .txt {
    margin-top: 24px;
  }

  #forSalon #reason .img_box {
    width: 90%;
    margin: 24px auto 0;
  }
}

/* メリット
-------------------------------------------------------------*/
#forSalon #merit {
  padding: 108px 0 162px;
}
#forSalon #merit .txt_box {
  max-width: 900px;
  margin: 0 auto;
}
#forSalon #merit .txt_box .ttl {
  font-size: 3.6rem;
}
#forSalon #merit .txt_box .txt {
  margin-top: 72px;
}
#forSalon #merit .txt_box .img {
  margin-top: 54px;
}
#forSalon #merit .txt_box .img img {
  width: 100%;
  height: auto;
}

#forSalon #merit .column {
  display: grid;
  grid-template-columns: 52% 8% 40%;
  margin-top: 108px;
  padding: 72px;
  background: #f4f4f4;
  border-radius: 20px;
}
#forSalon #merit .column .column_txt {
  grid-column: 1 / 2;
}
#forSalon #merit .column .column_txt .img {
  margin-top: 36px;
}
#forSalon #merit .column .column_txt .img img {
  width: 100%;
  height: auto;
}
#forSalon #merit .column .column_graph {
  grid-column: 3 / 4;
}
#forSalon #merit .column .column_graph img {
  width: 100%;
  height: auto;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #forSalon #merit {
    padding: 96px 0 102px;
  }
  #forSalon #merit .txt_box {
    max-width: 100%;
    margin: 0 auto;
  }
  #forSalon #merit .txt_box .ttl {
    font-size: 2.4rem;
  }
  #forSalon #merit .txt_box .txt {
    margin-top: 48px;
  }
  #forSalon #merit .txt_box .img {
    margin-top: 36px;
  }

  #forSalon #merit .column {
    display: block;
    margin-top: 48px;
    padding: 48px 24px;
  }
  #forSalon #merit .column .column_txt {
  }
  #forSalon #merit .column .column_txt .img {
    margin-top: 24px;
  }
  #forSalon #merit .column .column_txt .img img {
    width: 100%;
    height: auto;
  }
  #forSalon #merit .column .column_graph {
    margin-top: 36px;
  }
}

/* メッセージ
-------------------------------------------------------------*/

#forSalon #message {
  min-height: 973px;
  padding: 0;
  position: relative;
  background: #edede6;
  overflow: hidden;
  border-bottom: #fde361 solid 74px;
}
#forSalon #message .cmnInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 400px;
  position: relative;
  z-index: 2;
}
#forSalon #message .cmnInner::before {
  content: "";
  width: 224px;
  height: 66px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#forSalon #message .copy_box {
  margin-top: 95px;
}
#forSalon #message .copy_box .lead {
  text-align: center;
  font-size: 2.6rem;
}
#forSalon #message .copy_box .copy {
  margin-top: 72px;
  text-align: center;
  font-size: 3rem;
}
#forSalon #message .toECBtn {
  width: 100%;
  max-width: 275px;
  margin-top: 54px;
}
#forSalon #message .toECBtn a {
  display: block;
  width: 100%;
  padding: 10px 1em;
  background: #fde361;
  border-radius: 4px;
  text-align: center;
}
#forSalon #message .img_box {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
#forSalon #message .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #forSalon #message {
    min-height: 489px;
    border-bottom: #fde361 solid 36px;
  }
  #forSalon #message .cmnInner {
    padding: 0 32px 167px;
  }
  #forSalon #message .cmnInner::before {
    width: 110px;
    height: 32px;
  }
  #forSalon #message .copy_box {
    margin-top: 64px;
  }
  #forSalon #message .copy_box .lead {
    font-size: 1.6rem;
  }
  #forSalon #message .copy_box .copy {
    margin-top: 30px;
    font-size: 1.8rem;
  }
  #forSalon #message .toECBtn {
    margin-top: 42px;
  }
  #forSalon #message .img_box img {
    object-fit: contain;
  }
}

/* キャンペーン
-------------------------------------------------------------*/
#forSalon #campain {
  padding: 108px 0 162px;
}
#forSalon #campain .cmnInner {
  max-width: calc(928px + (36px * 2));
}
#forSalon #campain .txt_box {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: repeat(4, auto);
}
#forSalon #campain .txt_box .img_l {
  grid-column: 1 / 2;
  grid-row: 1 / 5;
  justify-self: flex-end;
  margin-top: 30px;
}
#forSalon #campain .txt_box .img_r {
  grid-column: 3 / 4;
  grid-row: 1 / 5;
  margin-top: 60px;
}

#forSalon #campain .txt_box .copy,
#forSalon #campain .txt_box .icon,
#forSalon #campain .txt_box .ttl,
#forSalon #campain .txt_box .lead {
  grid-column: 2 / 3;
  margin: 0 66px;
}

#forSalon #campain .txt_box .copy {
  grid-row: 1 / 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1em;
  font-size: 2.4rem;
}
#forSalon #campain .txt_box .copy::before,
#forSalon #campain .txt_box .copy::after {
  content: "";
  width: 1px;
  height: 1em;
  background: #6c4f2c;
}
#forSalon #campain .txt_box .copy::before {
  transform: rotate(-30deg);
}
#forSalon #campain .txt_box .copy::after {
  transform: rotate(30deg);
}

#forSalon #campain .txt_box .icon {
  margin-top: 42px;
  text-align: center;
}
#forSalon #campain .txt_box .icon span {
  padding: 4px 8px;
  border: #6c4f2c solid 1px;
}

#forSalon #campain .txt_box .ttl {
  margin-top: 34px;
  font-size: 4.4rem;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #fde361;
  text-underline-offset: -0.1em;
  text-decoration-thickness: 17px;
}

#forSalon #campain .txt_box .lead {
  display: grid;
  grid-template-columns: 1fr 128px;
  align-items: center;
  gap: 0 42px;
  margin-top: 48px;
}
#forSalon #campain .txt_box .lead .lead_txt {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  font-size: 1.8rem;
}
#forSalon #campain .txt_box .lead .lead_txt span {
  font-size: 2.4rem;
}
#forSalon #campain .txt_box .lead .balloon {
  aspect-ratio: 1 / 1;
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 100vw;
  background: #fde361;
  text-align: center;
  line-height: 1.5em;
}
#forSalon #campain .txt_box .lead .balloon span:nth-of-type(1) {
  padding-top: 3px;
  font-size: 2.4rem;
  font-weight: 600;
}
#forSalon #campain .txt_box .lead .balloon span:nth-of-type(2) {
  padding-top: 3px;
  font-weight: 600;
}

#forSalon #campain .img_box {
  margin-top: 64px;
}

#forSalon #campain .set {
  margin-top: 90px;
}
#forSalon #campain .set .ttl {
  font-size: 3rem;
  text-align: center;
}
#forSalon #campain .set .img {
  margin-top: 42px;
}
#forSalon #campain .set .img img {
  width: 100%;
  height: auto;
}

#forSalon #campain .toECBtn {
  margin-top: 72px;
  padding: 30px;
  background: #f4f4f4;
}
#forSalon #campain .toECBtn a {
  display: block;
  width: 100%;
  max-width: 275px;
  margin: 0 auto;
  padding: 10px 1em;
  background: #fde361;
  border-radius: 4px;
  text-align: center;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #forSalon #campain {
    padding: 96px 0 102px;
  }
  #forSalon #campain .cmnInner {
    max-width: 100%;
    padding: 0;
  }
  #forSalon #campain .txt_box {
    grid-template-rows: repeat(4, auto);
    padding: 0;
  }
  #forSalon #campain .txt_box .img_l {
    grid-row: 2 / 4;
    margin-top: 30px;
  }
  #forSalon #campain .txt_box .img_r {
    grid-row: 2 / 4;
    margin-top: 60px;
  }

  #forSalon #campain .txt_box .copy,
  #forSalon #campain .txt_box .icon,
  #forSalon #campain .txt_box .ttl,
  #forSalon #campain .txt_box .lead {
    grid-column: 2 / 3;
    margin: 0 32px;
  }

  #forSalon #campain .txt_box .copy {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    font-size: 1.6rem;
  }

  #forSalon #campain .txt_box .icon {
    margin-top: 18px;
  }
  #forSalon #campain .txt_box .icon span {
    padding: 4px 8px;
    border: #6c4f2c solid 1px;
  }

  #forSalon #campain .txt_box .ttl {
    margin-top: 24px;
    font-size: 2.8rem;
    text-underline-offset: -0.1em;
    text-decoration-thickness: 14px;
  }

  #forSalon #campain .txt_box .lead {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: 1fr 114px;
    align-items: center;
    gap: 0 36px;
    margin: 24px 32px 0;
  }
  #forSalon #campain .txt_box .lead .lead_txt {
    justify-self: right;
    font-size: 1.4rem;
  }
  #forSalon #campain .txt_box .lead .lead_txt span {
    font-size: 2rem;
  }
  #forSalon #campain .txt_box .lead .balloon {
    line-height: 1.2em;
  }
  #forSalon #campain .txt_box .lead .balloon span:nth-of-type(1) {
    font-size: 2rem;
  }
  #forSalon #campain .txt_box .lead .balloon span:nth-of-type(2) {
    font-weight: 600;
  }

  #forSalon #campain .img_box {
    margin-top: 18px;
  }

  #forSalon #campain .set {
    margin-top: 36px;
  }
  #forSalon #campain .set .ttl {
    font-size: 1.6rem;
  }
  #forSalon #campain .set .img {
    margin-top: 18px;
    padding: 0 32px;
  }

  #forSalon #campain .toECBtn {
    margin-top: 36px;
    padding: 18px;
  }
}


/*-------------------------------------------------------------*/
/* 新商品バナー
/*-------------------------------------------------------------*/

#newItems {
  width: 100%;
  overflow: hidden;
}
#newItems .items {
  display: flex;
}
#newItems .items .item {
  width: 100%;
  height: auto;
}
#newItems .items .item a {
  display: block;
  width: fit-content;
  margin: 0 auto;
}
#newItems .items .item img {
  width: 960px;
  height: 270px;
  margin: 0 auto;
  object-fit: contain;
}
#newItems .items #newItemBubble.item {
  background: #E9E9EB;
}
#newItems .items #newItemBKKP.item {
  background: #010101;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #newItems .items .item img {
    width: 100%;
    height: auto;
  }
}



/*-------------------------------------------------------------*/
/* シルキーバブルクレンジングウォッシュ
/*-------------------------------------------------------------*/

/* 共通
-------------------------------------------------------------*/
#products.bubble-cleansing ruby rt {
  margin-bottom: 0.2rem;
  font-size: 12px;
}
/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.bubble-cleansing .preductDetail .articles article .txt_box .copy {
    line-height: 2.1;
  }
  #products.bubble-cleansing ruby rt {
    font-size: 10px;
  }
  #products.bubble-cleansing .preductDetail .articles article .txt_box .balloon.single-balloon-pos {
    top: -40px;
  }
}

/* mainVisual
-------------------------------------------------------------*/
#products.bubble-cleansing #mainVisual {
  background: #F5F5F5;
}
#products.bubble-cleansing #mainVisual .txt_box .example {
  margin-top: 36px;
}
#products.bubble-cleansing #mainVisual .txt_box .example img {
  width: 100%;
  height: auto;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.bubble-cleansing #mainVisual .cmnInner {
    padding: 78px 36px 550px;
  }
}

/* エクステ・カール施術時のまつ毛の悩み
-------------------------------------------------------------*/
#products.bubble-cleansing #intro {
  padding: 144px 0 162px;
  background: #f4f4f4;
}
#products.bubble-cleansing #intro .cmnInner {
  display: grid;
  grid-template-columns: 43% 48%;
  grid-template-rows: repeat(3, auto);
  gap: 0 9%;
}
#products.bubble-cleansing #intro .ttl_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.bubble-cleansing #intro .ttl_box .ttl {
  display: flex;
  flex-direction: column;
  font-size: 2.4rem;
  line-height: 1.5;
}
#products.bubble-cleansing #intro .ttl_box .ttl span {
  font-size: 3.6rem;
}
#products.bubble-cleansing #intro .column_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 36px;
  padding: 18px 24px;
  position: relative;
  border: #6c4f2c solid 1px;
  border-radius: 4px;
}
#products.bubble-cleansing #intro .column_box::after {
  content: "";
  width: 48px;
  height: 28px;
  position: absolute;
  top: 100%;
  left: 50%;
  background: #b4a394;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}
#products.bubble-cleansing #intro .column_box li {
  display: flex;
  align-items: baseline;
  gap: 0 0.5em;
}
#products.bubble-cleansing #intro .column_box li::before {
  aspect-ratio: 1 / 1;
  content: "";
  width: 10px;
  height: auto;
  background: #6c4f2c;
  border-radius: 100vw;
  flex-shrink: 0;
}

#products.bubble-cleansing #intro .txt_box {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  margin-top: 60px;
}
#products.bubble-cleansing #intro .txt_box .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  font-size: 2rem;
  line-height: 1.5;
}
#products.bubble-cleansing #intro .txt_box .txt .hilights {
  display: flex;
  gap: 0.5em;
}
#products.bubble-cleansing #intro .txt_box .txt .hilights .hilight {
  display: inline-block;
  padding: 2px 8px;
  background: #fde361;
  border-radius: 2px;
  font-size: 2.4rem;
  font-weight: 600;
}

#products.bubble-cleansing #intro .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  padding: 42px 48px;
  border: #6c4f2c solid 1px;
  border-radius: 8px;
  background: #fff;
}
#products.bubble-cleansing #intro .img_box .ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.5;
}
#products.bubble-cleansing #intro .img_box .ttl .en_txt {
  font-size: 1.6rem;
}
#products.bubble-cleansing #intro .img_box .ttl .jp_txt {
  display: flex;
  align-items: baseline;
  width: 100%;
  font-size: 2.2rem;
}
#products.bubble-cleansing #intro .img_box .ttl .jp_txt::before,
#products.bubble-cleansing #intro .img_box .ttl .jp_txt::after {
  content: "";
  width: auto;
  height: 0.5em;
  border-top: #6c4f2c solid 1px;
  flex-grow: 1;
}
#products.bubble-cleansing #intro .img_box .ttl .jp_txt::before {
  margin-right: 0.5em;
}
#products.bubble-cleansing #intro .img_box .ttl .jp_txt::after {
  margin-left: 0.5em;
}

#products.bubble-cleansing #intro .img_box .ttl .jp_txt .num {
  font-size: 3.5rem;
}
#products.bubble-cleansing #intro .img_box .img {
  margin-top: 36px;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.bubble-cleansing #intro {
    padding: 74px 0 102px;
  }
  #products.bubble-cleansing #intro .cmnInner {
    display: block;
  }
  #products.bubble-cleansing #intro .ttl_box .ttl {
    font-size: 2rem;
  }
  #products.bubble-cleansing #intro .ttl_box .ttl span {
    font-size: 2.8rem;
  }
  #products.bubble-cleansing #intro .column_box {
    margin-top: 24px;
  }
  #products.bubble-cleansing #intro .column_box::after {
    width: 36px;
    height: 22px;
  }
  #products.bubble-cleansing #intro .column_box li::before {
    width: 8px;
  }

  #products.bubble-cleansing #intro .txt_box {
    margin-top: 46px;
  }
  #products.bubble-cleansing #intro .txt_box .txt {
    gap: 8px 0;
    font-size: 1.6rem;
    text-align: center;
  }
  #products.bubble-cleansing #intro .txt_box .txt .hilights .hilight {
    padding: 1px 6px;
    font-size: 2rem;
  }

  #products.bubble-cleansing #intro .img_box {
    margin-top: 54px;
    padding: 24px 30px;
  }
  #products.bubble-cleansing #intro .img_box .ttl .en_txt {
    font-size: 1.2rem;
  }
  #products.bubble-cleansing #intro .img_box .ttl .jp_txt {
    font-size: 1.8rem;
  }
  #products.bubble-cleansing #intro .img_box .ttl .jp_txt .num {
    font-size: 2.6rem;
  }
  #products.bubble-cleansing #intro .img_box .img {
    margin-top: 24px;
  }
}

/* ポイント01
-------------------------------------------------------------*/
#products.bubble-cleansing #point01 .cmnInner {
  display: grid;
  grid-template-columns: 40% 50%;
  grid-template-rows: repeat(6, auto);
  gap: 0 10%;
}

/* タイトル */
#products.bubble-cleansing #point01 .ttl_box {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
#products.bubble-cleansing #point01 .ttl_box .ttl {
  margin-bottom: 0;
}
#products.bubble-cleansing #point01 .copy_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

/* テキスト */
#products.bubble-cleansing #point01 .txt_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;

  margin-top: 5rem;
}
#products.bubble-cleansing #point01 .txt_box .txt + .txt {
  margin-top: 12px;
}

/* .column */
#products.bubble-cleansing #point01 .column {
  grid-column: 1 / 2;
  grid-row: 3 / 4;

  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 5%;
  justify-content: space-between;

  margin-top: 36px;
  padding: 24px 30px;
  border: #6c4f2c solid 1px;
  border-radius: 1.8rem;
}
#products.bubble-cleansing #point01 .column .ttl {
  grid-column: 1 / 3;
  grid-row: 1 / 2;

  margin-bottom: 1rem;
  font-size: 2rem;
}
#products.bubble-cleansing #point01 .column .txt {
  grid-column: 1 / 2;
  grid-row: 2 / 3;

  line-height: 1.6;
}
#products.bubble-cleansing #point01 .column .column_img {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  aspect-ratio: 1 / 1;
  width: 110px;
  margin-bottom: 12px;
}
#products.bubble-cleansing #point01 .column .column_img img {
  width: 100%;
  height: auto;
}

/* 画像 */
#products.bubble-cleansing #point01 .img_box {
  grid-column: 2 / 3;
  grid-row: 2 / 5;
  
  display: grid;
  column-gap: 3%;
  grid-template-columns: 1fr auto 1fr;
}
#products.bubble-cleansing #point01 .img_box .img_item__01 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.bubble-cleansing #point01 .img_box .txt__01 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 1rem;
}
#products.bubble-cleansing #point01 .img_box .img_item__02 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
#products.bubble-cleansing #point01 .img_box .txt__02 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  margin-top: 1rem;
}
#products.bubble-cleansing #point01 .img_box .arrow_box {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;

}
/* 吹き出し */
#products.bubble-cleansing #point01 .callout-box {
  grid-column: 1 / 4;
  grid-row: 3 / 4;

  margin-top: 3rem;
  padding: 2rem 0;
  position: relative;
  display: inline-block;
  
  background-color: #fff; 
  border-top: 1px solid #333; 

  font-size: 1.8rem;
}
#products.bubble-cleansing #point01 .callout-box::before {
  content: "";
  position: absolute;
  top: -20px; 
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 20px 20px 20px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  z-index: 1; 
}
#products.bubble-cleansing #point01 .callout-box::after {
  content: "";
  position: absolute;
  top: -19px; 
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 19px 20px 19px; 
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  z-index: 2; 
}
#products.bubble-cleansing #point01 .card-frame {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin: 0.5rem 0.5rem 0.75rem;
  border: 1px solid #707070;
  font-feature-settings: "palt";
}
#products.bubble-cleansing #point01 .card-frame:first-child {
  margin-left: 0;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.bubble-cleansing #point01 .cmnInner {
    grid-template-columns: 100%;
  }

  /* タイトル */
  #products.bubble-cleansing #point01 .ttl_box {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  #products.bubble-cleansing #point01 .txt_box .txt + .txt {
    margin-top: 12px;
  }

  /* .column */
  #products.bubble-cleansing #point01 .column {
    grid-column: 1 / 2;
    grid-row: 4 / 5;

    grid-template-columns: 100%;
    margin-top: 2rem;
    padding: 3rem 24px 4rem;
  }
  #products.bubble-cleansing #point01 .column .ttl {
    grid-column: 1 / 2;
    grid-row: 1 /  2;

    font-size: 1.6rem;
  }
  #products.bubble-cleansing #point01 .column .txt {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  #products.bubble-cleansing #point01 .column .column_img {
    grid-column: 1 / 2;
    grid-row: 3 / 4;

    width: 100%;
    margin-top: 2rem;
    margin-bottom: 0;

    aspect-ratio: 263 / 228;
  }
  #products.bubble-cleansing #point01 .column .column_img img {
    width: 100%;
  }  

  /* 画像 */
  #products.bubble-cleansing #point01 .img_box {
    grid-column: 1 / 2;
    grid-row: 3 / 4;

    grid-template-columns: 1fr 6% 1fr;
    margin-top: 3rem;
  }

  /* 吹き出し */
  #products.bubble-cleansing #point01 .callout-box {
    padding-top: 1rem;
    font-size: 1.4rem;
  }
  #products.bubble-cleansing #point01 .callout-box::before {
    top: -12px; 
    border-width: 0 10px 12px 10px;
  }
  #products.bubble-cleansing #point01 .callout-box::after {
    top: -10.5px; 
    border-width: 0 9px 11px 9px; 
  }
}

/* ポイント02
-------------------------------------------------------------*/
#products.bubble-cleansing #point02 .cmnInner {
  display: grid;
  grid-template-columns: 52% 40%;
  grid-template-rows: 1fr 1fr;
  column-gap: 8%;
  justify-content: space-between;
  align-items: flex-start;
}
#products.bubble-cleansing #point02 .cmnInner .ttl_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#products.bubble-cleansing #point02 .cmnInner .txt_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.bubble-cleansing #point02 .cmnInner .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

/* .ingredient-lists */
#products.bubble-cleansing #point02 .ingredient-lists {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  align-items: baseline;
  margin-top: 12px;
  padding-top: 5.5rem;
  border-top: 1px dotted #707070;
  font-size: 1.4rem;
}
#products.bubble-cleansing #point02 .ingredient-lists .ingredient-list {
  display: grid;
  grid-template-columns: 55% 1fr;
  grid-template-rows: subgrid;
  grid-row: span 2;
  column-gap: 8%;
  justify-content: space-between;
}
#products.bubble-cleansing #point02 .ingredient-lists .ingredient-list:first-child {
  padding: 0 4rem 0 0;
  border-right: 1px dotted #707070;
}
#products.bubble-cleansing #point02 .ingredient-lists .ingredient-list:last-child {
  padding: 0 0 0 4rem;  
}
#products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .ttl_box {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  font-size: 1.8rem;
}
#products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .txt_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .txt_box .copy {
  font-size: 3rem;
}
#products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .txt_box .txt {
  margin-top: 1rem;
}
#products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .img_box {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: right;
  align-self: center;
}

/* .difference */
#products.bubble-cleansing #point02 .difference {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  margin-top: 80px;
  font-size: 1.6rem;
  font-weight: 600;
}
#products.bubble-cleansing #point02 .difference .cmnLineTtl {
  font-size: 3rem;
  text-align: center;
}
#products.bubble-cleansing #point02 .difference .image {
  margin-top: 36px;
}
#products.bubble-cleansing #point02 .difference .image img {
  width: 100%;
  height: auto;
}
#products.bubble-cleansing #point02 .difference .difference-items-wrap {
  margin-top: 5.4rem;
}
#products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items {
  display: flex;
  column-gap: 3%;
}
#products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;

  padding: 2.5rem;
  border: 1px solid #B5A495;
  border-radius: .4rem;
  font-weight: normal;
}
#products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item p {
  text-align: center;
}
#products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item .ttl {
  font-size: 20px;
}
#products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item .copy {
  margin-top: 1rem;
  font-size: 16px;
  line-height: 1.6;
}
#products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item .txt {
  margin-top: 1rem;
  font-size: 14px;
  text-align: left;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.bubble-cleansing #point02 .cmnInner {
    grid-template-columns: 100%;
    gap: 0;
  }
  #products.bubble-cleansing #point02 .cmnInner .img_box {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    margin-top: 6rem;
  }

  /* .ingredient-lists */
  #products.bubble-cleansing #point02 .ingredient-lists {
    display: block;
    padding-top: 4rem;
  }
  #products.bubble-cleansing #point02 .ingredient-lists .ingredient-list {
    display: block;
    width: 100%;
    margin-top: 36px;
  }
  #products.bubble-cleansing #point02 .ingredient-lists .ingredient-list:first-child {
    margin-bottom: 5rem;
    padding: 0;
    border-right: none;
  }
  #products.bubble-cleansing #point02 .ingredient-lists .ingredient-list:last-child {
    padding: 0;
  }
  #products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .ttl_box {
    font-size: 14px;
  }
  #products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .txt_box .copy {
    font-size: 2.4rem;
  }
  #products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .img_box {
    grid-template-columns: 100%;
    justify-self: center;
    margin-top: 3.5rem;
  }
  #products.bubble-cleansing #point02 .ingredient-lists .ingredient-list .img_box img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
  }

  /* .difference */
  #products.bubble-cleansing #point02 .difference {
    grid-column: 1 / 2;

  }
  #products.bubble-cleansing #point02 .difference .cmnLineTtl {
    font-size: 2rem;
  }
  #products.bubble-cleansing #point02 .difference .difference-items-wrap {
    margin-top: 4rem;
    padding: 0 1rem;
  }
  #products.bubble-cleansing #point02 .difference .image {
    margin-top: 0;
  }
  #products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items {
    display: block;
  }
  #products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item {
    margin-top: 3rem;
  }  
  #products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item:first-child {
    margin-top: 0;
  }
  #products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item .copy {
    font-size: 14px;
  }
  #products.bubble-cleansing #point02 .difference .difference-items-wrap .difference-items .difference-item .txt {
    font-size: 12px;
  }  
}

/* ポイント03
-------------------------------------------------------------*/
#products.bubble-cleansing #point03.points {
  border-bottom: none;
}
#products.bubble-cleansing #point03 .cmnInner {
  display: grid;
  grid-template-columns: 52% 38%;
  grid-template-rows: repeat(2, auto);
  gap: 0 10%;
}
#products.bubble-cleansing #point03 .ttl_box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: flex-end;
}
#products.bubble-cleansing #point03 .txt_box {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#products.bubble-cleansing #point03 .icons {
  grid-column: 1 / 2;
  grid-row: 3 / 4;  
}
#products.bubble-cleansing #point03 .icons img {
  width: 100%;
}
#products.bubble-cleansing #point03 .img_box {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.bubble-cleansing #point03 .cmnInner {
    display: block;
  }
  #products.bubble-cleansing #point03 .icons {
    margin-top: 3rem;
  }
  #products.bubble-cleansing #point03 .img_box {
    margin-top: 54px;
  }
}


/* やさしさ設計
-------------------------------------------------------------*/
#products.bubble-cleansing #skin_friendly {
  background: #fde361;
}
#products.bubble-cleansing #skin_friendly.points {
  padding: 0;
  border-bottom: none;
}
#products.bubble-cleansing #skin_friendly .cmnInner {
  display: grid;
  grid-template-columns:
   minmax(1px, 1fr)
   minmax(min(50%, calc(1024px / 2)), calc(1024px / 2)) 
   minmax(min(50%, calc(1024px / 2)), calc(1024px / 2)) 
   minmax(1px, 1fr);
  gap: 0 5%;

  max-width: 100%;
  margin: 0;
  padding: 0;
}
#products.bubble-cleansing #skin_friendly .ttl_box {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: flex-end;
  margin-top: 7rem;
}
#products.bubble-cleansing #skin_friendly .txt_box {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-items: flex-start;
  margin-bottom: 7rem;
}
#products.bubble-cleansing #skin_friendly .img_box {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}
#products.bubble-cleansing #skin_friendly .img_box img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
}
#products.bubble-cleansing #skin_friendly .skin-friendly__detail {
  margin-top: 5rem;
}
#products.bubble-cleansing #skin_friendly .skin-friendly__detail .skin-friendly__detail_item {
  padding: 3.6rem 0;
  border-top: 1px solid #6C4F2C;
}
#products.bubble-cleansing #skin_friendly .skin-friendly__detail .skin-friendly__detail_item:nth-child(2) {
  border-top: 1px dotted #6C4F2C;
  border-bottom: 1px solid #6C4F2C;
}
#products.bubble-cleansing #skin_friendly .skin-friendly__detail .skin-friendly__detail_item .skin-friendly__detail_ttl {
  font-size: 18px;
}
#products.bubble-cleansing #skin_friendly .skin-friendly__detail .skin-friendly__detail_item .skin-friendly__detail_txt {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.5;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.bubble-cleansing #skin_friendly .cmnInner {
    grid-template-columns: 100%;
    padding: 0 0 102px;
    border-top: 1px solid #B5A495;
  }
  #products.bubble-cleansing #skin_friendly .ttl_box {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    padding: 0 36px;
  }
  #products.bubble-cleansing #skin_friendly .txt_box {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-bottom: 0;
    padding: 0 36px;
  }
  #products.bubble-cleansing #skin_friendly .img_box {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
}

/* モニターの声
-------------------------------------------------------------*/
#products.bubble-cleansing #voice {
  padding: 144px 0 162px;
  background: #fde361;
}
#products.bubble-cleansing #voice .cmnInner {
  max-width: calc(647px + (36px * 2));
}
#products.bubble-cleansing #voice .ttl_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#products.bubble-cleansing #voice .ttl_box::before,
#products.bubble-cleansing #voice .ttl_box::after {
  content: "";
  width: auto;
  height: 1px;
  background: #6c4f2c;
  flex-grow: 1;
}
#products.bubble-cleansing #voice .ttl_box .ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
}
#products.bubble-cleansing #voice .ttl_box .ttl .en_txt {
  font-size: 3.6rem;
}
#products.bubble-cleansing #voice .ttl_box .ttl .jp_txt {
  font-size: 2.4rem;
}

#products.bubble-cleansing #voice .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 42px 0;
  margin-top: 72px;
}
#products.bubble-cleansing #voice .items .item {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px 0;
  width: calc((100% - (6% * 2)) / 3);
  position: relative;
  background: #fff;
  border-radius: 100vw;
  text-align: center;
  line-height: 1.5;
}
#products.bubble-cleansing #voice .items .item::before {
  content: "";
  width: 27px;
  height: 36px;
  position: absolute;
  left: 10px;
  bottom: 0;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: rotate(45deg);
}
#products.bubble-cleansing #voice .items .item .hilight {
  display: inline-block;
  padding: 2px 8px;
  background: #fde361;
  border-radius: 2px;
  font-size: 1.8rem;
  font-weight: 600;
}
#products.bubble-cleansing #voice .note {
  display: flex;
  align-items: baseline;
  gap: 0 0.5em;
  margin-top: 36px;
  font-size: 1rem;
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  #products.bubble-cleansing #voice {
    padding: 74px 0 102px;
  }
  #products.bubble-cleansing #voice .cmnInner {
    max-width: 100%;
  }
  #products.bubble-cleansing #voice .ttl_box .ttl .en_txt {
    font-size: 2.6rem;
  }
  #products.bubble-cleansing #voice .ttl_box .ttl .jp_txt {
    font-size: 1.2rem;
  }

  #products.bubble-cleansing #voice .items {
    gap: 34px 0;
    margin-top: 42px;
  }
  #products.bubble-cleansing #voice .items .item {
    gap: 2px 0;
    width: calc((100% - 6%) / 2);
  }
  #products.bubble-cleansing #voice .items .item::before {
    width: 24px;
    height: 30px;
    left: 6px;
  }
  #products.bubble-cleansing #voice .items .item .hilight {
    padding: 1px 4px;
    font-size: 1.4rem;
  }
  #products.bubble-cleansing #voice .note {
    margin-top: 30px;
  }
}

/* coming soon
-------------------------------------------------------------*/

/* 無効化ボタン + オーバーレイスタイル */
#products .btn[disabled] {
  cursor: not-allowed; /* カーソルを禁止マークに */
  opacity: 0.3; /* ボタン自体の透明度を少し下げる（好みで調整） */
}

#products .btn.btn--disabled-overlay {
  position: relative; 
  z-index: 1; 
  pointer-events: none; 
}
#products .btn.btn--disabled-overlay:hover {
  background-color: #A29D9C;
}

/* オーバーレイとテキストの表示 */
#products .btn.btn--disabled-overlay::after {
  content: "Coming Soon"; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 透過50%の黒い背景 */
  background-color: rgba(0, 0, 0, 0.6); 
  color: white; 
  
  /* テキストを中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-size: 1.8rem;
  border-radius: 6px;
  z-index: 2; 
}