@charset "UTF-8";
@use "common" as *;
@use "exosome-variables" as *;
@use "btn-style" as *;
html {
  scroll-behavior: smooth; }

.exosome-wrapper {
  width: 100%; }
  .exosome-wrapper__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 0 8px #9d9d9d;
    background: #fff; }

.exosome-main {
  width: 100%;
  padding-bottom: 50px; }
  .exosome-main__inner {
    width: 100%; }

.exosome-bg {
  position: fixed;
  inset: 0;
  background: #fdfcfc; }

.first__inner {
  width: 100%; }
.first .top-heading > img {
  width: 100%;
  height: auto; }
.first .first-img01 > img {
  width: 100%;
  height: auto; }

.category .category-img > img {
  width: 100%;
  height: auto; }
.category .category-img04 {
  margin-top: -7%;
  position: relative;
  z-index: -1; }

.cta-btn {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 600px;
  transform: translateX(-50%); }
  .cta-btn > a {
    transition: var(--tran-opacity-a); }
    .cta-btn > a:hover, .cta-btn > a:focus {
      opacity: .85; }
    .cta-btn > a > img {
      width: 100%;
      height: auto; }

.exosome-footer {
  width: 100%;
  background-color: #aeaeae; }
  .exosome-footer__inner {
    width: 100%;
    padding: 0 20px; }
  .exosome-footer .footer-copy-right {
    text-align: center;
    padding-bottom: .3em; }
  .exosome-footer .footer-copy-right__text {
    color: var(--c-white01);
    font-size: 10px;
    font-weight: 300; }
  .exosome-footer .copyright-year {
    color: var(--c-white01);
    font-size: 10px;
    font-weight: 300;
    padding-right: 5px; }

.category-img08 {
  background-color: #ffffff;
  padding-bottom: 60px; }

.shop-btn-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 0 20px;
  margin-top: -10px;
  margin-bottom: 50px; }
  .shop-btn-area:last-of-type {
    margin-bottom: 0; }
  .shop-btn-area .shop-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 280px;
    height: 54px;
    background-color: #ffffff;
    border: 1px solid #dcbfae;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #5c4d43;
    text-decoration: none;
    letter-spacing: 0.1em;
    overflow: hidden;
    transition: all 0.3s ease; }
    .shop-btn-area .shop-btn::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px; }
    .shop-btn-area .shop-btn--amazon::before {
      background-color: #FF9900; }
    .shop-btn-area .shop-btn--rakuten::before {
      background-color: #BF0000; }
    .shop-btn-area .shop-btn:hover {
      background-color: #fcf8f6;
      box-shadow: 0 4px 12px rgba(220, 191, 174, 0.3);
      transform: translateY(-2px); }
  @media screen and (max-width: 768px) {
    .shop-btn-area {
      flex-direction: column;
      gap: 12px;
      margin-bottom: 40px; }
      .shop-btn-area:last-of-type {
        margin-bottom: 0; }
      .shop-btn-area .shop-btn {
        max-width: 100%;
        height: 50px; } }

/* =========================================
   CTAボタンのフェードアウト設定
========================================= */
.cta-btn {
  /* （既存の固定配置などのスタイルはそのままにしておいてください） */
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; }

/* JSでこのクラスが付与されたら消える */
.cta-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 透明なボタンを誤ってクリックさせないため */
  transform: translateY(20px);
  /* 少し下に下がりながら消えると綺麗です */ }