@charset "UTF-8";

/**********************************************************
* コンテナ、グリッド、ラップ、ヘッダー/フッターなど
**********************************************************/

/*
header
================================================ */
.header {
  position: relative;
}

/* ===== MENUボタン ===== */
.menu-button {
  position: fixed;
  top: 70px;
  right: 70px;
  padding: 14px 0;
  width: 88px;
  text-align: center;
  color: var(--color-light);
  cursor: pointer;
  z-index: 100;
}
.menu-button span {
  display: block;
  line-height: 1;
  letter-spacing: .1em;
  font-size: 22px;
  transition: opacity .2s ease, transform .2s ease;
}
.menu-button::before,
.menu-button::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 88px;
  height: 3px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), top .28s ease, bottom .28s ease, width .28s ease;
}
.menu-button::before { top: 0; }
.menu-button::after { bottom: 0; }

/* 開いてる間は “MENU” を消し、2本線→Xへ */
.menu-button.is-open { padding: 0; }
.menu-button.is-open span { opacity:0; }
.menu-button.is-open::before {
  top: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
}
.menu-button.is-open::after {
  bottom: auto;
  top: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
}

/* ▼ 明るい背景用（文字＆線を濃い色に） */
.menu-button.menu-button--dark {
  color: var(--color-main-dark2);
}

@media (768px <= width < 1920px) {
  .menu-button {
    top: 3.646vw;
    right: 3.646vw;
    padding: 0.729vw 0;
    width: 4.583vw;
  }
  .menu-button::before,
  .menu-button::after {
    width: 4.583vw;
    height: 0.156vw;
  }
  .menu-button span {
    font-size: 1.146vw;
  }
}

@media (width < 768px) {
  .menu-button {
    top: 5.867vw;
    right: 5.867vw;
    padding: 2.133vw 0;
    width: 11.733vw;
  }
  .menu-button::before,
  .menu-button::after {
    width: 11.733vw;
    height: 0.4vw;
  }
  .menu-button.is-open {
    top: 8.533vw;
    right: 13.867vw;
  }
  .menu-button.is-open::before,
  .menu-button.is-open::after {
    width: 8.533vw;
    background: var(--color-main-dark2);
  }
  .menu-button span {
    font-size: 2.933vw; /* 11px */
  }
}

/* ===== overlay & drawer ===== */
.overlay { 
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.overlay__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  transition: opacity .25s ease;
}

/* Drawer (PC/Tablet：右から) */
.drawer {
  position: absolute;
  top: 174px;
  right: 0;
  max-width: 950px;
  width: 100%;
  pointer-events: auto; /* パネル内は操作可能 */
  border-radius: 15px 0 0 15px;
  background: var(--bg-color-light);
  border: 3px solid var(--drawer-border);
  color: var(--color-main-dark2);
  overflow: hidden;
  transform: translateX(105%); /* 初期：右外 */
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.overlay.is-open {
  pointer-events: auto; /* 開いてる時だけオーバーレイに反応 */
  overflow-y: scroll;
}
.overlay.is-open .overlay__bg { opacity: 1; }
.overlay.is-open .drawer { transform: translateX(3px); }
html.menu-open,
body.menu-open {
  overflow: hidden;
}

.drawer__inner {
  display: flex;
  align-items: center;
  gap: 170px;
  padding: 84px 86px;
}
.header__logo {
  flex-shrink: 0;
  width: 43px;
}
.header .nav {
  display: flex;
  gap: 80px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .1em;
}
.nav-first li,
.nav-second li {
  line-height: 1;
}
.nav-first li + li,
.nav-second li + li {
  margin-top: 56px;
}
.header .sns {
  display: flex;
  gap: 25px;
  margin-top: 120px;
}
.header .sns .icon_instagram {
  width: 47px;
  height: 47px;
}
.header .sns .icon_x {
  width: 46px;
  height: 47px;
}

@media (768px <= width < 1920px) {
  .drawer {
    top: 9.063vw;
    max-width: 49.479vw;
    border-radius: 0.781vw 0 0 0.781vw;
  }
  .drawer__inner {
    gap: 8.854vw;
    padding: 4.375vw 4.479vw;
  }
  .header__logo {
    width: 2.24vw;
  }
  .header .nav {
    gap: 4.167vw;
    font-size: 1.563vw;
  }
  .nav-first li + li,
  .nav-second li + li {
    margin-top: 2.917vw;
  }
  .header .sns {
    gap: 1.302vw;
    margin-top: 6.25vw;
  }
  .header .sns .icon_instagram {
    width: 2.448vw;
    height: 2.448vw;
  }
  .header .sns .icon_x {
    width: 2.396vw;
    height: 2.448vw;
  }
}

@media (width < 768px) {
  .drawer {
    top: 0;
    left: 50%;
    width: 80vw;
    border-radius: 0 0 2vw 2vw;
    transform: translateX(-50%) translateY(-105%);
    border: 0.667vw solid var(--drawer-border);
  }
  .overlay.is-open .drawer {
    transform: translateX(-50%) translateY(-0.667vw);
  }
  .drawer__inner {
    flex-direction: column;
    gap: 19.2vw;
    padding: 20vw 9.333vw 9.333vw;
  }
  .header__logo {
    order: 2;
    width: 62.4vw;
  }
  .header__logo .site-logo {
    padding: 0;
  }
  .header .nav {
    gap: 10.667vw;
    font-size: 5.6vw; /* 21px */
  }
  .nav {
    gap: 10.667vw;
    flex-direction:column;
  }
  .nav-first li + li,
  .nav-second li + li {
    margin-top: 10.667vw;
  }
  .header .sns {
    gap: 6.667vw;
    margin-top: 12.533vw;
  }
  .header .sns .icon_instagram {
    width: 8vw;
    height: 8vw;
  }
  .header .sns .icon_x {
    width: 7.867vw;
    height: 8vw;
  }
}


/*
footer
================================================ */
.footer {
  padding-top: 140px;
  padding-right: 50px;
  padding-left: 50px;
  padding-bottom: 50px;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .1em;
  background: var(--color-main-dark2);
  color: var(--color-light);
}
.footer__inner {
  max-width: 1520px;
  margin-inline: auto;
  display: grid;
  gap: 94px;
}

@media (768px <= width < 1920px) {
  .footer {
    padding-top: 7.292vw;
    padding-right: 2.604vw;
    padding-left: 2.604vw;
    padding-bottom: 2.604vw;
    font-size: 1.302vw;
  }
  .footer__inner {
    max-width: 79.167vw;
    gap: 4.896vw;
  }
}

@media (width < 768px) {
  .footer {
    padding-top: 21.333vw; /* 80px */
    padding-bottom: 6.667vw; /* 25px */
    padding-bottom: 6.667vw; /* 25px */
    padding-bottom: 6.667vw; /* 25px */
    font-size: 3.333vw; /* 12.5px */
  }
  .footer__inner {
    gap: 13.333vw; /* 50px */
  }
}

/* ===== footer__top ===== */
.footer__top {
  display: flex;
  justify-content: space-between;
}
.footer__logo {
  margin-bottom: 100px;
  width: 455px;
}
.footer-list .menu-item + .menu-item {
  margin-top: 25px;
}

@media (768px <= width < 1920px) {
  .footer__logo {
    width: 23.698vw;
    margin-bottom: 5.208vw;
  }
  .footer-list .menu-item + .menu-item {
    margin-top: 1.302vw;
  }
}

@media (width < 768px) {
  .footer__top {
    flex-direction: column;
  }
  .footer__logo {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16vw; /* 60px */
    width: 53.333vw; /* 200px */
  }
  .footer-list {
    text-align: center;
  }
  .footer-list .menu-item + .menu-item {
    margin-top: 4.8vw; /* 18px */
  }
}

/* ===== footer__sub ===== */
.footer__sub {
  display: grid;
  gap: 60px;
  margin-top: 30px;
}
.footer__sub .social {
  display: flex;
  gap: 54px;
  align-items: center;
}
.footer__sub .icon_instagram img {
  width: 51px;
  height: 51px;
}
.footer__sub .icon_x img {
  width: 50px;
  height: 50px;
}
.footer__sub .links {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "qa qa"
    "contact privacypolicy";
  gap: 60px 90px;
}
.footer__sub .links a {
  width: fit-content;
}
.footer__sub #menu-item-41 {
  grid-area: qa;
}
.footer__sub #menu-item-37 {
  grid-area: contact;
}
.footer__sub #menu-item-38 {
  grid-area: privacypolicy;
}
.footer__sub .company {
  line-height: 1.5;
}
.footer__sub .company-name {
  display: block;
  margin-bottom: 1em;
}

@media (768px <= width < 1920px) {
  .footer__sub {
    margin-top: 1.563vw;
    gap: 3.125vw;
  }
  .footer__sub .links {
    gap: 3.125vw 4.688vw;
  }
  .footer__sub .social {
    gap: 2.813vw;
  }
  .footer__sub .icon_instagram img {
    width: 2.656vw;
    height: 2.656vw;
  }
  .footer__sub .icon_x img {
    width: 2.604vw;
    height: 2.604vw;
  }
}

@media (width < 768px) {
  .footer__sub {
    margin-top: 16vw;
    gap: 10.667vw; /* 40px */
  }
  .footer__sub .social {
    justify-content: center;
    gap: 8vw; /* 30px */
  }
  .footer__sub .icon_instagram img {
    width: 6.8vw; /* 25.5px */
    height: 6.8vw; /* 25.5px */
  }
  .footer__sub .icon_x img {
    width: 6.667vw; /* 25px */
    height: 6.667vw; /* 25px */
  }
  .footer__sub .links {
    justify-content: center;
    gap: 5.333vw 4.8vw;
    text-align: center;
  }
  .footer__sub .link-item__qa {
    justify-self: center;
  }
  .footer__sub .link-item__contact {
    justify-self: flex-end;
  }
  .footer__sub .company {
    text-align: center;
  }
}

/* ===== footer__note ===== */
.footer__note {
  margin-bottom: 0.5em;
  font-size: 16px;
}

@media (768px <= width < 1920px) {
  .footer__note {
    font-size: 0.833vw;
  }
}

@media (width < 768px) {
  .footer__note {
    text-align: center;
    font-size: 1.867vw; /* 7px */
  }
}

/* ===== copyright ===== */
.copyright {
  font-size: 18px;
}

@media (768px <= width < 1920px) {
  .copyright {
    font-size: 0.938vw;
  }
}

@media (width < 768px) {
  .copyright {
    text-align: center;
    font-size: 2.4vw; /* 9px */
  }
}

/*
スポットライト（商品画像）
================================================ */
.item__img {
  position: relative;
  width: 450px;
  height: 862px;
}
.product-img {
  transition: opacity 0.15s linear;
}
.product-img.on {
  opacity: 0; /* 初期状態では非表示 */
}
.item__img.active .product-img.on {
  opacity: 1; /* 明るい画像がフェードイン */
}
.item__img.active .product-img.off {
  opacity: 0; /* 暗い画像がフェードアウト */
}
.bottle img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}
.product-img__bg {
  mix-blend-mode: screen;
}
.product-img__bg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@media (768px <= width < 1920px) {
  .item__img {
    width: 23.438vw;
    height: 44.896vw;
  }
}
@media (width < 768px) {
  .item__img {
    position: relative;
    width: 60vw;
    height: 114.933vw;
  }
}

/* ===== シャンプー ===== */
.item-shampoo .bottle img {
  width: 270px;
}
@media (768px <= width < 1920px) {
  .item-shampoo .bottle img {
    width: 14.063vw;
  }
}
@media (width < 768px) {
  .item-shampoo .bottle img {
    width: 36vw;
  }
}

/* ===== トリートメント ===== */
.item-treatment .bottle img {
  width: 277px;
}
@media (768px <= width < 1920px) {
  .item-treatment .bottle img {
    width: 14.427vw;
  }
}
@media (width < 768px) {
  .item-treatment .bottle img {
    width: 36.933vw;
  }
}

/* ===== ヘアミルク ===== */
.item-hairmilk .bottle img {
  width: 230px;
}
@media (768px <= width < 1920px) {
  .item-hairmilk .bottle img {
    width: 11.979vw;
  }
}
@media (width < 768px) {
  .item-hairmilk .bottle img {
    width: 30.667vw;
  }
}

/* ===== ヘアオイル ===== */
.item-hairoil .bottle img {
  width: 214px;
}
@media (768px <= width < 1920px) {
  .item-hairoil .bottle img {
    width: 11.146vw;
  }
}
@media (width < 768px) {
  .item-hairoil .bottle img {
    width: 28.533vw;
  }
}

/*
共通：注釈
================================================ */
.note {
  max-width: 1520px;
  line-height: 2;
  font-size: 13px;
  font-weight: 400;
  text-align: justify;
}
@media (768px <= width < 1920px) {
  .note {
    max-width: 79.167vw;
    font-size: 0.677vw;
  }
}
@media (width < 768px) {
  .note {
    max-width: 86.667vw;
    font-size: 2vw; /* 7.5px */
  }
}

/*
下層ページ：サイトロゴ
================================================ */
.site-logo {
  margin: 0 auto;
  padding: 90px 0 160px;
  width: 580px;
}
@media (768px <= width < 1920px) {
  .site-logo {
    padding: 4.688vw 0 8.333vw;
    width: 30.208vw;
  }
}
@media (width < 768px) {
  .site-logo {
    padding: 28vw 0 26.133vw;
    width: 57.867vw; /* 217px */
  }
}

/*
ページ下の画像
================================================ */
.visual-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.visual-bottom {
  height: 580px;
}
.visual-bottom__bg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.visual-bottom__bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (768px <= width < 1920px) {
  .visual-bottom {
    height: 30.208vw;
  }
}
@media (width < 768px) {
  .visual-bottom {
    height: 55.733vw;
  }
  .visual-bottom__bg video {
    width: 190%;
    height: 55.733vw;
  }
}

/*
NEWS
================================================ */
.news-item__thumb {
  background: var(--news-thumb);
  aspect-ratio: 16/9;
  overflow: hidden;
  width: 100%;
}
.news-item__thumb img {
  object-fit: cover;
}
.card-link {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.news-item__title {
  text-align: justify;
}
.news-item__title,
.card-link time {
  word-wrap: break-word;
  color: var(--color-main-dark);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .05em;
}
@media (768px <= width < 1920px) {
  .card-link {
    gap: 1.875vw;
  }
  .news-item__title,
  .card-link time {
    font-size: 1.146vw;
  }
}
@media (width < 768px) {
  .card-link {
    gap: 5.333vw;
  }
  .news-item__title,
  .card-link time {
    font-size: 3.333vw; /* 12.5px */
  }
}