/* ==========================================
  0. 共通変数・リセット設定
=========================================== */
:root {
  --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-en: 'Times New Roman', serif;
  --color-main-text: #555555;
}

/* スマホ（〜599px）の基本サイズ: 1rem = 16px */
html {
  font-size: 16px;
  scroll-padding-top: 5rem; /* ページ内リンクで移動した際、ヘッダーに被らないよう上に5rem分の余白を作る */
}

/* 600px〜767px */
@media screen and (min-width: 600px) {
  html {
    font-size: 17px;
  }
}

/* 768px〜 */
@media screen and (min-width: 768px) {
  html {
    font-size: 20px;
  }
}

/* 全要素に共通する基準 */
* {
  box-sizing: border-box;  /* 内側の余白（padding）や枠線（border）を含めたサイズで幅・高さを計算する（崩れ防止） */
  -webkit-font-smoothing: antialiased;  /* SafariやChromeなどのブラウザで、文字のフォントをなめらかに綺麗に表示する */
}

a {
  text-decoration: none;
}

/* ==========================================
  全体の基本設定
=========================================== */
body {
  margin: 0;
  overflow-x: hidden; /* 横方向のはみ出しによる不要なスクロールバーを非表示にする */
  background: linear-gradient(180deg, #dce4da 0%, #f4f7f3 15%, #e8edf5 50%, #f4f7f3 85%, #dce4da 100%);
  color: var(--color-main-text);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.6;   /* 行間隔を文字サイズの1.6倍にして読みやすくする */
}

main {
  margin: 0 auto;
  padding: 0;
}

/* ==========================================
  1. ヘッダーエリア
=========================================== */
.pc-nav {
  display: none;
}

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 他の要素の下に隠れないよう、レイヤーの重なり順を前面（1000）に引き上げる */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;  /* 縦方向の配置を、お互いの「下辺」を基準に揃える */
  padding: 1.625rem 1rem 0.875rem 1rem;
  background: linear-gradient(to right, #C9DFBA, #B3BEE1); 
}

/* ヘッダー内のアイコン（カートやメニュー）をまとめるブロック */
.header-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* カートボタンの枠リセット */
.btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-cart img {
  width: 1.5rem;
  height: auto;
  display: block;  /* 画像の下に生まれる謎の隙間を消すためにブロック要素化する */
}

/*ハンバーガーメニューボタン */
.btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;             
  background: none;       
  border: none;           
  cursor: pointer;  /* マウスを乗せたときにカーソルを「指マーク」に変える */      
}

.btn-menu img {
  width: 1.5rem;            
  height: auto;
  display: block;
}

/* ==========================================
  2. メインビジュアル（MV）
=========================================== */
.main-visual {
  /* このエリアを基準にして、中の文字を自由な位置（絶対位置）に配置できるようにする */
  position: relative;  
  margin: 4.75rem 0 2.5rem 0;
}

.mv-photo {
  width: 100%;
  height: auto;
  display: block;
}

.mv-text-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* HAWAIIAN BOTANICAL */
.brand-sub {
  position: absolute; /* 親要素の左上を基準に、位置を％で固定する */
  top: 8%;            
  right: 6%;          
  color: var(--color-main-text);
  text-align: right;
  font-size: 0.7rem;
  font-family: var(--font-en); 
  letter-spacing: 0.25em;
  line-height: 1.5;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* 慌ただしい日常に */
.catch-phrase {
  position: absolute;
  top: 54%;
  right: 6%;
  color: var(--color-main-text);
  text-align: right;  
  font-size: 1.4rem;
  font-family: var(--font-serif);
  letter-spacing: 0.20em;  
  line-height: 1.5;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Reset yourself… */
.brand-main {
  position: absolute;
  bottom: 3%;        
  left: 50%;       
  transform: translateX(-50%); 
  width: 90%;
  color: var(--color-main-text);
  text-align: right; 
  font-size: 1.1rem;
  font-family: var(--font-en); 
  letter-spacing: 0.25em;
  line-height: 1.3;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* ==========================================
  3. 各セクションの共通設定
=========================================== */
section {
  width: 100%;
  margin-bottom: 3.75rem;
  padding: 0;
  text-align: center;
}

.intro-text,  
.concept-catch,
.feature-box {
  padding: 0 1rem;
}

.intro-text {
  margin-top: -0.3rem;
  margin-bottom: 1.25rem;
  color: var(--color-main-text);
  text-align: justify;
  font-size: 1rem;
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
  line-height: 1.8; 
}

.concept-catch {
  margin-top: -0.3rem;
  margin-bottom: 1.875rem;
  font-weight: bold;
  text-align: center;
  font-size: 1.125rem;
  font-family: var(--font-serif);
  letter-spacing: 0.15em; 
  line-height: 1.5;
}

.intro .cta-area {
  margin-top: 1.875rem;
  margin-bottom: 0; 
}

/* ==========================================
  4. 私たちのこだわり
=========================================== */
.features {
  margin-top: 7.5rem;
}

.section-title-wrapper {
  position: relative;
  width: 100%;            
  margin: 0 0 3.75rem 0;     
}

.section-title-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.section-title {
  position: absolute;
  top: 1.25rem;         
  right: 1rem;       
  margin: 0;         
  color: #ffffff;            
  font-size: 1.75rem;
  font-family: var(--font-serif);
  letter-spacing: 0.2em;
  font-weight: bold;  
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);   
  padding: 0;         
}

.feature-box {
  margin-bottom: 3.75rem;
}

.feature-img img {
  width: 100%;
  max-width: 23.125rem;
  height: 12.5625rem;
  object-fit: cover;
  margin: 0.9375rem auto;
  border-radius: 0.75rem;
  box-shadow: 6px 6px 12px #BCCBD1;
  display: block;
}

/* 「こだわり01」を下揃え（baseline）にして見栄えを綺麗に整える */
.feature-title {
  display: flex;
  justify-content: center;
  align-items: baseline; /* 下揃えに変更 */
  gap: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem; /* 下の要素との間隔を保持 */
  color: var(--color-main-text);
  font-size: 0.875rem;
  font-family: var(--font-serif);
  letter-spacing: 0.1em; 
}

/* 数字（01）の基準線を揃える調整 */
.feature-num-highlight {
  position: relative;
  top: 0;
  font-size: 1.75rem;
  font-family: var(--font-en); 
  line-height: 1;            
  letter-spacing: 0.2em; 
}

.feature-sub-title {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #000000;
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.feature-desc {
  margin-top: 0.9375rem;
  margin-bottom: 2.5rem;
  color: #6c6c6c;
  text-align: justify;
  font-size: 1rem;
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
  line-height: 2.0;  
}

.features .cta-area {
  margin-top: 1.875rem;
  margin-bottom: 0; 
}

/* ==========================================
  5. クチコミ（Review）セクション
=========================================== */
.review {
  margin-top: 7.5rem;
  margin-bottom: 1.875rem;
  padding: 0 1rem;
}

.review-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 3.125rem auto;
  padding: 1.875rem 1.5rem;
  background-color: #E8EDF6;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
  text-align: left;
}

.section-title-review {
  margin-bottom: 1.875rem;
  font-size: 3.25rem;
  font-family: var(--font-en); 
}

.review-img img {
  float: right;
  width: 6.25rem;
  height: 6.25rem;
  margin-top: 0.5rem;
  margin-left: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
}

/* 「★」マークを大きく調整 */
.stars {
  margin-top: 0.9rem;
  margin-bottom: 1rem;
  color: #ccbba3; 
  font-size: 1.25rem; 
  letter-spacing: 0.1em;
}

.review-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #000000;  
  font-size: 1rem;
  font-weight: bold;
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.review-text {
  clear: both;
  margin-bottom: 1rem;
  color: var(--color-main-text);
  font-size: 0.875rem;
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
  line-height: 2.0;  
}

.reviewer {
  margin-top: 0.7rem;
  margin-bottom: 1rem;
  color: var(--color-main-text);
  font-size: 0.875rem;
  font-family: var(--font-serif);
  text-align: right;
  opacity: 0.75;
}

/* ==========================================
  6. オンラインショップボタン（コンバージョン）
=========================================== */
.cta-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 5rem 0;
}

.online-shop-btn {
  display: inline-block;
  width: 15rem; 
  transition: transform 0.2s ease;
}

.online-shop-btn:hover {
  transform: scale(1.03); /* ホバー時に少し大きくする */
}

.online-shop-btn img {
  width: 100%;
  height: auto;
}

/* ==========================================
  7. ハンバーガーメニュー（SPナビゲーション）
=========================================== */
.sp-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;/* 他のどの要素よりも前面に表示 */
  display: flex;
  flex-direction: column;/* 子要素を上から下へ縦並びに配置 */
  width: 100%;
  height: 100vh;
  padding: 2.5rem 1.875rem;
  background-color: #EBF1E5;
  opacity: 0;/* 見た目を透明にする（画面上から消す） */
  pointer-events: none;/* 透明な時に裏のボタンをクリックできるようにする */
  transition: opacity 0.4s ease;
}

.sp-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}

.btn-close {
  align-self: flex-end;
  padding: 0.625rem;
  background: none;
  border: none;
  cursor: pointer;
}

.btn-close img {
  width: 3.375rem; 
  height: auto;
  display: block;
}

.nav-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  margin: 2.5rem 0 0 0;
  padding: 0 0 0 1.25rem;
  list-style: none;
}

.nav-item a {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;   
  color: var(--color-main-text);        
  font-size: 1.75rem;       
  font-family: var(--font-serif);
}

.nav-item:not(.nav-item-shop) a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 110%;
  height: 2px;
  background-color: #c2c2c2;
}

.nav-item-shop {
  margin: 0;
}

.nav-item-shop a {
  position: relative;
  display: inline-block;
  margin-left: -0.75rem;
  padding: 0.75rem 0.75rem 1.25rem 0.75rem; 
  background-color: #F6FAF4; 
  border-radius: 0.75rem;       
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02); 
  font-size: 1.75rem;
  text-align: center;
}

.nav-item-shop a::after {
  content: "";
  position: absolute;
  left: 0.8125rem;
  bottom: 0.75rem;               
  width: calc(100% - 1.5rem);
  height: 2px;
  background-color: #c2c2c2; 
}

/* ==========================================
  8. フッターエリア
=========================================== */
.footer {
  width: 100%;
  padding: 1rem 1rem;
  background: linear-gradient(to right, #C9DFBA, #B3BEE1); 
  text-align: center;
}

.copyright {
  margin: 0;
  color: var(--color-main-text);
  font-size: 0.75rem;
  font-family: var(--font-en);
  letter-spacing: 0.1em;
}

/* ==========================================
  9. 中間レスポンシブ調整（ブレイクポイントの刻み）
=========================================== */

/* --- 890px以下：ハンバーガーメニューに切り替え --- */
@media screen and (max-width: 890px) {
  .catch-phrase {
    top: 48%; 
    font-size: 2rem; 
  }

  /* 545px〜890px付近で「私たちのこだわり」の文字を大きくする */
  .section-title {
    font-size: 2rem; 
    top: 1.5rem;      
  }

}

/* --- 545px以下：スマホ表示でのキャッチコピーのサイズ・位置調整 --- */
@media screen and (max-width: 545px) {
  .catch-phrase {
    font-size: 1.3rem;
    right: 5%;        
    line-height: 1.4; 
  }

  .brand-sub {
    font-size: 0.65rem;
  }

  .brand-main {
    font-size: 1.0rem;
  }
}

/* ==========================================
  10. PC・タブレット用の追加・上書きルール（891px〜）
=========================================== */
@media screen and (min-width: 891px) {
  
  main {
    max-width: 1440px;
    margin: 0 auto;     
  }

  .main-header {
    max-width: 1440px;  
    left: 50%;         
    transform: translateX(-50%); 
  }

  /* 891px以上ではハンバーガーを非表示、PCナビを表示 */
  .btn-menu {
    display: none;
  }

  .pc-nav {
    display: block;
    margin-left: auto;
    margin-right: 1.5rem;
  }

  .pc-nav-list {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pc-nav-list a {
    color: var(--color-main-text);
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.1em;
  }

  .pc-nav-list .btn-pc-shop {
    padding: 0.4rem 1rem;
    background-color: #F6FAF4;
    border-radius: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .main-visual {
    max-width: 1440px;
    margin: 3.5rem auto 3.75rem auto;
  }

  .brand-sub {
    font-size: 1rem;
  }

  .catch-phrase {
    font-size: 2.5rem;
  }

  .brand-main {
    font-size: 1.625rem;
  }

  .intro {
    max-width: 1100px;
    margin: 0 auto 6.25rem;
    padding: 0 2.5rem;
  }

  .intro-text p {
    text-align: center;
  }

  .concept-catch {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 3rem;
  }

  .feature-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    margin-bottom: 5rem;
    padding: 0 2.5rem;
  }

  .feature-img {
    flex: 1;                  
  }

  .feature-box:nth-child(even) {
    flex-direction: row-reverse;
  }

 /* --- こだわり画像のPCサイズ最適化 --- */
  .feature-img img {
    width: 100%;           
    max-width: 100%;
    height: auto;    
    aspect-ratio: 16 / 9; /* 縦横比を16:9に綺麗に維持 */
    object-fit: cover;
    margin: 0;
  }


  .feature-text-content {
    flex: 1;                   
    text-align: left;
  }

  .feature-title,
  .feature-sub-title,
  .feature-desc {
    text-align: left;
  }

  .feature-title {
    justify-content: flex-start;
    align-items: baseline; 
  }

  .feature-num-highlight {
    font-size: 2.25rem;
  }

  .feature-sub-title {
    font-size: 1.375rem;
  }

  .review {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
  }

  .review-card {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .review-img img {
    margin-top: 0rem;
  }

}