@charset "UTF-8";

/* ========================================
   Reset
======================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
}

a,
a:hover {
  text-decoration: none;
}

/* ========================================
   1ページ目：TOP
======================================== */

.top {
  width: 100%;
  height: 100svh;

  overflow: hidden;
}

.top-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/* ========================================
   ハンバーガーボタン
======================================== */

.hamburger-button {
  position: fixed;

  top: 1.5rem;
  right: 1.5rem;

  z-index: 1000;

  width: 4.5rem;
  height: 4.5rem;

  padding: 1rem;

  border: none;

  background: rgba(255, 255, 255, 0.7);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 0.5rem;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* 2ページ目に入ったら表示 */

.hamburger-button.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 3本の線 */

.hamburger-button span {
  display: block;

  width: 2rem;
  height: 0.125rem;

  background: #000;
}

/* ========================================
   メニュー画面
======================================== */

.menu {
  position: fixed;

  inset: 0;

  z-index: 2000;

  width: 100%;
  height: 100svh;

  background: #77d2d4;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;

  overflow-y: auto;
}

.menu.is-open {
  visibility: visible;
  opacity: 1;
}

/* ========================================
   ×ボタン
======================================== */

.menu-close {
  position: absolute;

  top: 1.5rem;
  right: 1.5rem;

  width: 4.5rem;
  height: 4.5rem;

  border: none;

  background: rgba(255, 255, 255, 0.7);

  cursor: pointer;
}

.menu-close span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 2rem;
  height: 0.125rem;

  background: #000;
}

.menu-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ========================================
   メニュー内部
======================================== */

.menu-inner {
  min-height: 100%;

  padding: 5rem 1.5rem;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
}

/* ========================================
   メニューロゴ
======================================== */

.menu-logo {
  display: block;

  width: min(50vw, 16rem);

  margin-bottom: 3rem;
}

.menu-logo img {
  width: 100%;
}

/* ========================================
   メニューリスト
======================================== */

.menu-list {
  width: min(80%, 30rem);

  margin: 0;
  padding: 0;

  list-style: none;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 1.5rem;
}

.menu-list li {
  width: 100%;

  text-align: center;
}

/* 通常のリンク */

.menu-list a {
  display: block;

  color: #000;

  font-family: "Shippori Mincho", serif;

  font-size: clamp(1.5rem, 3vw, 2.5rem);

  font-weight: 600;

  transition: opacity 0.3s ease;
}

.menu-list a:hover {
  opacity: 0.6;
}

/* ========================================
   外部サイトのボタン
======================================== */

.menu-list .menu-button-item {
  width: min(100%, 28rem);
}

.menu-list .menu-button-item a {
  padding: 1rem 1.5rem;

  border: 1px solid #000;

  background: rgba(255, 255, 255, 0.55);
}

/* ========================================
   2ページ目：コンセプト
======================================== */

.concept {
  min-height: 100svh;

  padding: 8rem 1rem 6rem;

  background: #77d2d4;
}

.concept-inner {
  width: min(100%, 100rem);

  margin: 0 auto;
}

/* ========================================
   CONCEPT h1
======================================== */

.concept h1 {
  margin: 0 0 4rem;

  color: #000;

  font-family: "Shippori Mincho", serif;

  font-size: clamp(2rem, 5vw, 5rem);

  font-weight: 800;

  line-height: 1.6;

  text-align: center;
}

/* ========================================
   CONCEPT画像
======================================== */

.concept-image {
  width: min(90%, 70rem);

  margin: 0 auto 4rem;
}

.concept-image img {
  width: 100%;
}

/* ========================================
   CONCEPT p
======================================== */

.concept p {
  margin: 0;

  font-size: clamp(26px, 2.2vw, 40px);

  line-height: 2;

  font-family: "Shippori Mincho", serif;

  font-weight: 800;

  text-align: center;

  color: #000;
}

/* ========================================
   3ページ目以降
======================================== */

.lineup {
  position: relative;

  min-height: 100svh;

  padding: 8rem 1rem 10rem;

  background: #fff;

  overflow: hidden;
}

/* ========================================
   3ページ目の上部グラデーション
======================================== */

#lineup::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 12rem;

  background: linear-gradient(to bottom, #77d2d4 0%, rgba(119, 210, 212, 0.7) 25%, rgba(119, 210, 212, 0.25) 60%, rgba(255, 255, 255, 0) 100%);

  pointer-events: none;
}

/* ========================================
   LINE UP 全体
======================================== */

.lineup-inner {
  position: relative;

  z-index: 1;

  width: min(100%, 100rem);

  margin: 0 auto;
}

/* ========================================
   LINE UP h1
======================================== */

.lineup-title {
  margin: 0 0 5rem;

  color: #000;

  font-family: "Shippori Mincho", serif;

  font-size: clamp(3rem, 7vw, 7rem);

  font-weight: 800;

  line-height: 1;

  text-align: center;
}

/* ========================================
   商品BOX
======================================== */

.lineup-box {
  position: relative;

  width: min(92%, 80rem);

  min-height: 48rem;

  margin: 0 auto;

  padding: 5rem;

  background: linear-gradient(-71deg, #aff5ed 7.29%, rgba(133, 204, 196, 0.31) 94.03%);
}

/* ========================================
   コンテンツ
======================================== */

.lineup-content {
  position: relative;

  z-index: 3;

  width: 48%;
}

/* ========================================
   タイトル画像
======================================== */

.lineup-heading-image {
  width: min(100%, 18rem);

  margin-bottom: 2rem;
}

.lineup-heading-image img {
  width: 100%;
}

/* ========================================
   h3
======================================== */

.lineup-content h3 {
  margin: 0 0 2rem;

  color: #000;

  font-family: "Shippori Mincho", serif;

  font-size: clamp(1.6rem, 2.5vw, 3rem);

  font-weight: 800;

  line-height: 1.6;
}

/* ========================================
   商品説明
======================================== */

.lineup-content p {
  margin: 0 0 3rem;

  color: #000;

  font-family: "Shippori Mincho", serif;

  font-size: clamp(1rem, 1.5vw, 1.5rem);

  font-weight: 600;

  line-height: 2;
}

/* ========================================
   商品情報リンク
======================================== */

.product-link {
  display: inline-flex;

  align-items: center;

  gap: 0.8rem;

  color: #000;

  font-family: "Shippori Mincho", serif;

  font-size: clamp(1rem, 1.5vw, 1.5rem);

  font-weight: 800;

  transition: opacity 0.3s ease;
}

.product-link:hover {
  opacity: 0.6;
}

/* 三角アイコン */

.product-link-icon {
  display: inline-flex;

  justify-content: center;
  align-items: center;

  width: 2rem;
  height: 2rem;

  font-size: 0.8rem;
}

/* ========================================
   商品画像エリア
======================================== */

.lineup-images {
  position: absolute;

  top: 0;
  right: 0;

  width: 55%;
  height: 100%;

  z-index: 2;
}

/* ========================================
   商品画像①
======================================== */

.product-image-main {
  position: absolute;

  top: 0;
  right: -35%;

  height: 100%;

  z-index: 3;
}

.product-image-main > img {
  display: block;

  width: auto;
  height: 100%;

  max-width: none;
}

/* ========================================
   商品画像②
======================================== */

.product-image-sub {
  position: absolute;

  top: -30px;
  right: -30px;

  z-index: 4;
}

.product-image-sub img {
  display: block;

  width: 18rem;
  height: auto;
}

/* ========================================
   4ページ目：LINE UP KECHA
======================================== */

.lineup-kecha .lineup-box {
  background: linear-gradient(-71deg, #ff6565 6.92%, #d90606 85.32%);
}

/* ========================================
   4ページ目 商品画像エリア
======================================== */

.lineup-kecha .lineup-images {
  position: absolute;

  top: 0;
  left: 0;
  right: auto;

  width: 55%;
  height: 100%;

  z-index: 2;
}

/* ========================================
   4ページ目 商品画像①
======================================== */

.lineup-kecha .product-image-main {
  left: 0;
  right: auto;
}

/* ========================================
   4ページ目 商品画像②
======================================== */

.lineup-kecha .product-image-sub {
  top: -30px;
  right: -30px;

  z-index: 4;
}

/* ========================================
   4ページ目 コンテンツ
======================================== */

.lineup-kecha .lineup-content {
  position: relative;

  z-index: 4;

  width: 48%;

  margin-left: auto;
}

/* ========================================
   FOREST
======================================== */

#forest {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
}

/* オンラインショップ */

.online-shop {
  display: block;

  padding: 1rem 6rem;

  border: 1px solid #000;

  color: #000;

  font-size: 27px;

  margin-bottom: 80px;
}

/* フォレスト画像 */

.forest-image {
  display: block;

  width: 100%;
}

.forest-image img {
  display: block;

  width: 85%;

  margin: 0 auto;

  transition: opacity 0.3s ease;
}

.forest-image:hover img {
  opacity: 0.6;
}

/* ========================================
   FOOTER
======================================== */

#footer {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
}

/* ========================================
   SNSリンク
======================================== */

.footer-link {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0;
  padding: 60px 0;

  gap: 1.5rem;
}

.footer-link a {
  display: block;

  margin: 0;
  padding: 0;
}

.footer-link img {
  display: block;

  width: 5rem;

  height: auto;

  margin: 0;
  padding: 0;
}

/* ========================================
   タブレット
======================================== */

@media (max-width: 900px) {
  .lineup {
    padding: 7rem 1rem 8rem;
  }

  .lineup-box {
    width: 95%;

    min-height: 45rem;

    padding: 4rem 3rem;
  }

  .lineup-content {
    width: 52%;
  }

  .lineup-images {
    width: 55%;
  }
}

/* ========================================
   スマートフォン
======================================== */

@media (max-width: 767px) {
  /* ======================================
     ハンバーガー
  ====================================== */

  .hamburger-button,
  .menu-close {
    top: 1rem;
    right: 1rem;

    width: 3.5rem;
    height: 3.5rem;
  }

  .hamburger-button span,
  .menu-close span {
    width: 1.6rem;
  }

  /* ======================================
     メニュー
  ====================================== */

  .menu-inner {
    padding: 5rem 1rem 3rem;
  }

  .menu-logo {
    width: min(55vw, 13rem);

    margin-bottom: 2rem;
  }

  .menu-list {
    width: 90%;

    gap: 1rem;
  }

  .menu-list a {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }

  /* ======================================
     CONCEPT
  ====================================== */

  .concept {
    padding: 6rem 1rem 4rem;
  }

  .concept h1 {
    margin-bottom: 2.5rem;

    font-size: clamp(1.8rem, 8vw, 3rem);
  }

  .concept-image {
    width: 100%;

    margin-bottom: 2.5rem;
  }

  .concept p {
    font-size: clamp(26px, 5vw, 32px);

    line-height: 1.8;
  }

  /* ======================================
     LINE UP
  ====================================== */

  .lineup {
    min-height: auto;

    padding: 6rem 1rem 6rem;
  }

  /* 3ページ目のグラデーション */

  #lineup::before {
    height: 8rem;
  }

  .lineup-title {
    margin-bottom: 3rem;

    font-size: clamp(2.8rem, 14vw, 5rem);
  }

  /* ======================================
     商品BOX
  ====================================== */

  .lineup-box {
    display: flex;

    flex-direction: column;

    width: 100%;

    min-height: auto;

    margin: 0;

    padding: 3rem 1.5rem 4rem;
  }

  /* ======================================
     コンテンツ
     SPでは上
  ====================================== */

  .lineup-content {
    order: 1;

    width: 100%;

    margin: 0;
  }

  .lineup-heading-image {
    width: min(75%, 16rem);

    margin: 0 auto 2rem;
  }

  .lineup-content h3 {
    margin-bottom: 1.5rem;

    font-size: clamp(1.4rem, 6vw, 2rem);

    line-height: 1.6;

    text-align: center;
  }

  .lineup-content p {
    margin-bottom: 2rem;

    font-size: clamp(1rem, 4vw, 1.25rem);

    line-height: 1.8;

    text-align: center;
  }

  .product-link {
    display: flex;

    justify-content: center;

    font-size: 1.1rem;
  }

  /* ======================================
     商品画像
     SPではコンテンツの下
  ====================================== */

  .lineup-images {
    position: relative;

    order: 2;

    top: auto;
    right: auto;
    left: auto;

    width: 100%;
    height: 24rem;

    margin-top: 3rem;
  }

  /* ======================================
     商品画像①
  ====================================== */

  .product-image-main {
    position: absolute;

    top: 0;
    right: 8%;

    left: auto;

    width: 65%;
    height: 100%;

    z-index: 3;
  }

  .product-image-main > img {
    width: 100%;
    height: 100%;

    object-fit: contain;
  }

  /* ======================================
     商品画像②
  ====================================== */

  .product-image-sub {
    position: absolute;

    top: -1rem;
    right: -0.5rem;

    z-index: 4;
  }

  .product-image-sub img {
    width: 9rem;
    height: auto;
  }

  /* ======================================
     4ページ目
  ====================================== */

  .lineup-kecha .lineup-content {
    order: 1;

    width: 100%;

    margin: 0;
  }

  .lineup-kecha .lineup-images {
    position: relative;

    order: 2;

    top: auto;
    right: auto;
    left: auto;

    width: 100%;
    height: 24rem;

    margin-top: 3rem;
  }

  /* 4ページ目 商品画像① */

  .lineup-kecha .product-image-main {
    position: absolute;

    top: 0;
    left: 8%;
    right: auto;

    width: 65%;
    height: 100%;

    z-index: 3;
  }

  .lineup-kecha .product-image-main > img {
    width: 100%;
    height: 100%;

    object-fit: contain;
  }

  /* 4ページ目 商品画像② */

  .lineup-kecha .product-image-sub {
    position: absolute;

    top: -1rem;
    left: auto;
    right: -0.5rem;

    z-index: 4;
  }

  .lineup-kecha .product-image-sub img {
    width: 9rem;
  }

  /* ======================================
     FOREST
  ====================================== */

  #forest {
    width: 100%;

    padding: 3rem 1rem;
  }

  .online-shop {
    display: block;

    width: min(100%, 22rem);

    margin-bottom: 3rem;

    padding: 0.8rem 1rem;

    font-size: 1.1rem;

    text-align: center;
  }

  .forest-image {
    width: 100%;
  }

  .forest-image img {
    width: 100%;
  }

  /* ======================================
     FOOTER
  ====================================== */

  .footer-link {
    gap: 1rem;

    padding: 3rem 0;
  }

  .footer-link img {
    width: 3.5rem;
  }

  #footer > a img {
    width: 8rem;
  }

  .copyright {
    font-size: 0.8rem;

    padding-bottom: 2rem;
  }
}

/* ========================================
   小さいスマートフォン
======================================== */

@media (max-width: 400px) {
  .menu-list a {
    font-size: 1.15rem;
  }

  .menu-list .menu-button-item a {
    padding: 0.8rem 1rem;
  }
}