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

main {
  padding:118px 0 0;
}

p {
  font-feature-settings: "palt" 1;
  text-align: justify;
}

.swivel-wrap {
  margin: 0 auto;
  padding-bottom: 200px;
  max-width: 100vw;
  width: 100%;
  background-color: #eae8e7;
}

.section-top {
  padding-top: 0;
}

.section-top picture {
  width:100%;
  max-width:100vw;
  aspect-ratio: 1.714/1;
}

.section-top picture>img {
  width:100%;
  max-width:100vw;
  aspect-ratio: 1.714/1;
}


.section-top p {
  font-family: hiragino-mincho-pron, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 3.5rem;
  color: #71655e;
  text-align: center;
  letter-spacing: 0.3rem;
}

.section-top .sub-title {
  margin: 0 auto;
  text-align: center;
}

.sub-title video {
  margin:0 auto;
}

.section-top h2 {
  font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 5.0rem;
  color: #71655e;
  text-align: left;
  letter-spacing: 0.3rem;
  display: inline-block;
}

.section-intro {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  max-width:1200px;
  margin: 100px auto 0;
  flex-direction: row;
  align-items: center;
}

.section-intro img {
  width: 100%;
}

.section-intro p {
  width: 90%;
  font-size: 2.3rem;
  color: #71655e;
  font-weight: 500;
  line-height: 4rem;
  margin: 0 4%;
}

video {
  width: 100%;
  margin: 200px auto 100px;
}

/* フェードイン前の初期状態 */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  /* 30px下に下げておく */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 画面に入った時に付与するクラス */
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* 元の位置に戻る */
}

/* YouTube */
.youtube {
  position: relative;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.section-fan {
  margin: 0 auto 100px;
}

.feature01,.feature02 {
  width:100%;
  max-width:1000px;
}

.feature01 {
  margin-bottom: 100px;
}

/* 機能紹介 Slick */
.slide-items {
  width: 50%;
  height: 50%;
  margin: auto;
}

.slide-items img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slick-dots li button:before {
  font-size: 8rem;
  top: 6px;
}

.slick-prev,.slick-next {
  display: block;
  width: 50px;
  height: 50px;
  background: #eae8e7;
  border-radius: 50%;
  transition: all .3s ease;
  cursor: pointer;
}

.slick-prev {
  transform: rotate(180deg);
  left: 3%;
  top:45%;
  z-index: 1;
}

.slick-next {
  right: 3%;
}

.slick-next::before,.slick-prev::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid #FFF;
  border-top: 2px solid #FFF;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
}

.slick-track {
  display: flex;
  align-items: stretch;
}
.slick-slide {
  height: auto !important;
}


.section-fan {
  margin: 100px auto;
}

.section-fan h2,.section-canopy h2,.section-7years h2,.section-seawool h2 {
  font-family: hiragino-mincho-pron, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 3.5rem;
  color: #71655e;
  text-align: center;
  letter-spacing: 0.3rem;
  width:100%;
}

.section-fan p,.section-canopy p,.section-7years p,.section-seawool p {
  width: 50%;
  font-size: 2.1rem;
  color: #71655e;
  font-weight: 500;
  line-height: 3.3rem;
  margin: 10px auto;
  text-align: justify;
}

.section-fan>p,.section-canopy>p,.section-7years>p,.section-seawool>p {
  margin-bottom:50px;
}

.feature01 {
  display: flex;
  flex-flow: column nowrap;
  width: 85%;
  margin: 0 auto 50px;
  flex-direction: row;
  align-items: end;
}

.feature01 img,
.feature02 img {
  width: 50%;
}

.feature01 .text,
.feature02 .text {
  margin-left: 60px;
}

.feature01 h3 {
  width: 90%;
  font-size: 3.0rem;
  color: #71655e;
  font-weight: 600;
  line-height: 4rem;
  margin-bottom: 10px;
}

.feature02 h3 {
  width: 90%;
  font-size: 3.0rem;
  color: #71655e;
  font-weight: 600;
  line-height: 4rem;
  margin-bottom: 25px;
  text-align: right;
}

.feature01 p,
.feature02 p {
  width: 90%;
  font-size: 1.6rem;
  color: #71655e;
  font-weight: 500;
  line-height: 2.5rem;
}

.feature01 p {
  margin-left:0;
}

.feature02 p {
  margin-right:50px;
}

.feature02 {
  display: flex;
  flex-flow: column nowrap;
  width: 85%;
  margin: 0 auto;
  flex-direction: row-reverse;
  align-items: end;
}


.section-canopy,.section-7years {
  margin: 0 auto 100px;
}

.section-7years>img {
  display: block;
  margin:0 auto 50px;
}

.section-seawool {
  margin:200px auto 0;
  width:100%;
  background: url("/images/growmaxair/bg_seawool.webp");
  aspect-ratio: 2/1;
  padding:200px 0;
}

.section-seawool div>img {
  display:block;
  height:200px;
  object-fit: contain;
  margin:0 auto 20px;
}

.section-seawool ul {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width:90%;
  max-width:900px;
  margin:100px auto 0;
}

.section-seawool ul li {
  width:20%;
}

.section-seawool ul li img {
  display:block;
  width:100%;
  object-fit: contain;
  max-height:120px;
  margin:0 auto 10px;
}

.section-seawool ul li p {
  font-size:1.4rem;
  text-align:center;
  width:100%;
  margin:0;
}

.section-function {
  background-color: #f5f0e5;
  margin: 0 auto;
  padding: 100px 0;
  text-align: center;
}

.section-function li>div {
  background-color: #fff;
  padding: 50px 5%;
  margin: 20px 5% 0;
  text-align: center;
}

.section-function li>div img {
  margin: 0 auto 10px;
}

.section-function h3 {
  font-family: hiragino-mincho-pron, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 2.5rem;
  color: #71655e;
  text-align: center;
  letter-spacing: 0.3rem;
}

.section-function div>p {
  font-size: 1.8rem;
  color: #71655e;
  font-weight: 500;
  line-height: 3.3rem;
  text-align: left;
}


.section-spec {
  margin: 0 auto;
  background-color: #fff;
  padding: 100px 0;
}

.lineup_slider {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.spec-image {
  text-align: center;
}

.spec-image img {
  max-width: 600px;
  height: auto;
  margin: 0 auto 10px;
}

.spec-image p {
  margin: 0 auto 10px;
  text-align:center;
}

.color-variants {
  margin: 20px auto 40px;
  width: 90%;
  max-width: 900px;
}

.color-variants .slick-track {
  width: fit-content !Important;
}

.color-variants span {
  width: 22px !Important;
  height: 22px !Important;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #ddd;
  margin: 0 10px;
}

table {
  width: 90%;
  max-width: 900px;
  border-collapse: collapse;
  margin: 20px auto 0;
}

th,
td {
  padding: 16px 12px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

th {
  width: 160px;
  text-align: left;
  font-weight: normal;
  color: #777;
}

.price {
  font-size: 20px;
  font-weight: 600;
}

.section-shop {
  max-width: 1200px;
  margin: 100px auto;
  padding: 0 20px;
  color: #71655e;
}

.section-shop .shop-box {
  display: flex;
  align-items: center;
  margin: 60px auto;
}


.hanbaiten {
  text-align: center;
}

.hanbaiten img {
  width: 50%;
}

.shop1 img {
  width: 100%;
  height: auto;
  display: block;
}

.section-shop .text {
  font-family: hiragino-mincho-pron, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 2.0rem;
  letter-spacing: 0.3rem;
  flex: 1;
  margin-left: 50px;
}

.catch {
  font-size: 16px;
  letter-spacing: 0.1em;
}

.section-shop .title {
  font-size: 3.5rem;
  font-weight: normal;
  letter-spacing: 0.15em;
}

.title span {
  font-size: 32px;
}

.details {
  font-size: 16px;
  display:flex;
  flex-flow:row wrap;
}

.details dt {
  width:20%;
}

.details dd {
  width:80%;
  margin-bottom: 10px;
}

.link {
  font-size: 15px;
  color: #6b5a4a;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.section-hosho {
  text-align: center;
}

.section-hosho img {
  width: 50%;
}

.section-hosho .img01 {
  border-bottom: #b5b5b6 solid 1px;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.visual {
  background-color: #9f9f9f;
  margin-bottom: 60px;
}

.onlinestore {
  width:100%;
  max-width:1024px;
  margin:0 auto;
}

.onlinestore h3 {
  font-family: hiragino-mincho-pron, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 3.5rem;
  text-align:center;
  margin-bottom:25px;
}

.onlinestore ul {
  display:flex;
  flex-flow:row nowrap;
  gap:5%;
}

.onlinestore ul li {
  width:30%;
}

.onlinestore ul li a {
  display:block;
  width:100%;
  height:100%;
  text-align:center;
  color:#ddd;
  background:#71655e;
  padding:15px 10px 10px;
  border-radius: 10px;
  font-size:2.2rem;
  line-height:2rem;
  transition: .2s;
}

.onlinestore ul li a span {
  font-size:1.4rem;
}

.onlinestore ul li a:hover {
  outline:3px solid #71655e;
  outline-offset:-3px;
  color:#71655e;
  background:#ddd;
}

.sp {
  display:none;
}


/* ==========================================================================
   メディアクエリ：タブレット（1024px以下）
   ========================================================================== */
@media screen and (max-width: 1024px) {
  main {padding:110px 0 0!Important;}

  /* 全体の余白調整 */
  .section-top .sub-title { margin: 100px auto; }
  .section-top picture>img {aspect-ratio:1/1.216;}

  video { margin: 100px auto 50px; }
  .section-seawool { padding: 100px 0; }

  /* フォントサイズの微調整 */
  .section-top p { font-size: 2.5rem; }
  .section-top h2 { font-size: 3.5rem; }
  .section-intro {
    flex-flow: column nowrap;
  }
  .section-intro img {
  width: 60%;
  margin:0 auto 25px;
  border-radius: 25px;
}
.section-intro p {
  width:80%;
}

.section-fan {
  margin-top:0;
}

  /* セクション内のテキスト幅 */
  .section-fan p, .section-canopy p, .section-7years p, .section-seawool p {
    width: 80%;
  }

  /* フィーチャーセクション */
  .feature01 {margin:40px auto;}
  .feature01 .text { margin-left: 30px; }
  .feature02 .text { margin:0 30px 0 0; }
  .feature01 p,.feature02 p {width:90%;}
  .feature01 p {margin-left:0;}
  .feature02 p {margin-right:0;}
  .feature01 h3, .feature02 h3 { width:100%; font-size: 2.4rem; margin-bottom:10px;}
  .section-canopy .feature02 {margin:40px auto;}

.section-7years>img {
  width:90%;
  margin:0 auto 25px;
}

.section-seawool {
  margin-top:100px;
}
  .section-function li>div img {
  width:90%;
  object-fit: contain;
}

.shop-box .shop1 {width:40%;}

.shop-box .text .catch {
  text-align:left;
  font-size:1.6rem;
}

.shop-box .text .title {
  font-size:2.2rem;
}

.details {font-size:1.4rem;}
.details dt { width:25%;}
.details dd { width:75%; margin-left:0;}


.onlinestore h3 {
  font-size:2.4rem;
}

.onlinestore ul {
  gap:2%;
}

.onlinestore ul li {
  width:32%;
}

.onlinestore ul li a {
  font-size:1.8rem;
  line-height:2rem;
}

.onlinestore ul li a span {
  font-size:1.2rem;
}

}

/* ==========================================================================
   メディアクエリ：スマホ（767px以下）
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* レイアウトのリセット */
  main { padding: 50px 0 0!Important;}
  .swivel-wrap { padding-bottom: 100px; }

  /* セクション間の余白 */
  .section-intro, .section-fan, .section-canopy, .section-7years, .section-seawool, .section-function, .section-spec, .section-shop {
    margin: 0 auto;
    padding: 0 0 40px;
  }

  /* --- トップセクション --- */
  .section-top picture { width: 100%; aspect-ratio: 1/1.216;}
  .section-top picture>img { width: 100%; aspect-ratio: 1/1.216;}
  .section-top p {
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    padding: 0 15px;
  }
  .section-top .sub-title { margin: 0 auto; }
  .section-top h2 {
    font-size: 1.8rem;
    letter-spacing: 0.15rem;
    padding-left: 20px; /* 左揃えのニュアンス維持 */
  }

  /* --- イントロ・ビデオ --- */
  .section-intro {
    flex-direction: column; /* 縦並びに */
    margin-top: 40px;
  }
  .section-intro p {
    width: 90%;
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin: 20px auto;
  }
  video { margin: 40px auto; }

  /* --- 見出しと共通テキスト --- */
  .section-fan h2, .section-canopy h2, .section-7years h2, .section-seawool h2 {
    font-size: 2rem;
    line-height: 2.8rem;
    padding: 0 10px;
  }
  .section-fan p, .section-canopy p, .section-7years p, .section-seawool p {
    width: 90%;
    font-size: 1.3rem;
    line-height: 2.0rem;
  }

  /* --- 機能紹介 (Feature) --- */
  .feature01, .feature02 {
    flex-direction: column; /* 縦並び */
    align-items: center;
    width: 90%;
  }
  .feature01 img, .feature02 img {
    width: 100%;
    margin-bottom: 20px;
  }
  .feature01 .text, .feature02 .text {
    margin: 0;
    text-align: center;
  }
  .feature01 h3, .feature02 h3 {
    width: 100%;
    font-size: 1.6rem;
    line-height: 2.4rem;
    text-align: center;
  }
  .feature01 p, .feature02 p {
    width: 100%;
    font-size: 1.3rem;
    text-align: left; /* 本文は読みやすく左揃え */
  }

  .section-7years .feature02 {
    margin-bottom:80px;
  }

  /* --- SEAWOOL アイコン --- */
  .section-seawool {
    background-size: cover;
    padding: 60px 0;
  }
  .section-seawool div > img { width:50%; object-fit: contain; }
  .section-seawool ul {
    width:80%;
    margin:50px auto;
    flex-wrap: wrap; /* 折り返し */
    align-items:stretch;
    justify-content: center;
    gap: 20px 5%;
  }
  .section-seawool ul li {
    display: flex;
    flex-direction: column;
    width: 30%;
    height:auto;
  }

    .section-seawool ul li img {
    width: 90%;
    margin:0 auto 10px;
      flex-grow:1;
    }

    .section-seawool ul li p {
      font-size:0.9rem;
    }

  /* --- スライダーセクション (Function) --- */
  .section-function h3 { font-size: 1.6rem; }
  .section-function div > p { font-size: 1.3rem; line-height: 2.0rem; }
  .section-function li > div { padding: 30px 5%; }

  .slick-prev {top:45%;}

.spec-image img {
  width:90%;
  object-fit: contain;
  margin:0 auto;
}

  /* --- スペック表 --- */
  .section-spec,.section-shop {padding-top:40px;}
  table { width: 95%; }
  th { width: 100px; font-size: 1.2rem; padding: 12px 5px; }
  td { font-size: 1.2rem; padding: 12px 5px; }
  .price { font-size: 1.6rem; }

  /* --- 店舗情報 (Shop) --- */
  .hanbaiten img { width: 80%; }
  .section-shop .shop-box {
    flex-direction: column; /* 縦並び */
    margin: 40px auto;
  }
  .section-shop .text {
    margin-left: 0;
    margin-top: 20px;
    text-align: center;
  }

  .shop-box .shop1 {width:90%; margin:0 auto;}

  .shop-box .text .catch {
  text-align:center;
  font-size:1.3rem;
}
  .section-shop .title { font-size: 1.8rem; }

  .details dt {
    width: 100%;
    float: none;
    font-weight: bold;
    margin-bottom: 5px;
    font-size:1.2rem;
  }
  .details dd {
    width:100%;
    margin-left: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
  }

  .onlinestore h3 {
    line-height:3.4rem;
  }

  .onlinestore ul {
    flex-flow:column nowrap;
  gap:2%;
}

.onlinestore ul li {
  width:80%;
  margin:0 auto 10px;
}

.onlinestore ul li a {
  font-size:1.8rem;
  line-height:2rem;
}

.onlinestore ul li a span {
  font-size:1.2rem;
}

.sp {
  display:inline;
}

  /* --- 保証・ロゴ --- */
  .section-hosho img { width: 80%; }
}

/* --- 極小画面用微調整 --- */
@media screen and (max-width: 375px) {
  .section-top h2 { font-size: 1.6rem; }
  .section-seawool ul li { width: 45%; } /* アイコンを1列に */
}