body {
  margin: 0;
  background: #05332E;
  color: #F6EED7;
  /* color: #FFF5DE;*/
  font-family: 'Noto Serif JP', serif;
}
/* ★スマホ用 余白（左右padding）★ */
@media (max-width: 900px) {
  body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ▼ 全体の統一デザインのCSS（.container は画像以外で使用） */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* ナビゲーションバー */
.navbar {
  background: #05332E;
  width: 100vw;
  padding: 24px 0 8px 0;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.navbar-list {
  list-style: none;
  display: flex;
  gap: 48px;
  margin: 0;
  padding: 0;
}
.navbar-link {
  /* font-family: 'Noto Serif JP', serif;*/
  font-size: 1.1em;
  text-decoration: none;
  color: #FFEFC0;
  padding: 6px 0;
  position: relative;
  transition: color 0.2s;
}
.navbar-link:hover {
  color: #FFEFC0;
}
.navbar-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #FFF5DE;
  transition: width 0.2s;
  position: absolute;
  left: 0;
  bottom: 0;
}
.navbar-link:hover::after {
  width: 100%;
}

/* ヒーロー画像ラップ（背景色のみ） */
.hero-image-wrap {
  width: 100vw;
  background: #05332E;
  position: relative;
  overflow: hidden; /* 画像がはみ出す場合の保険 */
}

/* ヒーロー画像本体（ボート写真） */
.hero-image {
  width: 100vw;    /* 横幅いっぱい */
  height: auto;    /* アスペクト比維持し、切り取りなし */
  display: block;  /* 余計な隙間防止 */
  margin: 0 auto;  /* 中央寄せ（念のため） */
  object-fit: unset;         /* 切り取り禁止（object-fit: cover等は使わない） */
  object-position: unset;    /* 位置調整も使わない */
  max-width: 100vw;          /* 親要素よりはみ出さないように */
}

/* フェードイン効果 */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* スマホ対応（念のため高さ制限解除） */
@media (max-width: 600px) {
  .hero-image-wrap {
    width: 100vw;
    background: #05332E;
    overflow: hidden;
  }
  .hero-image {
    width: 100vw;
    height: auto;
    max-width: 100vw;
  }
}

/* [他の要素][margin][border][padding][内容][padding][border][margin][他の要素]*/
/* ▼ タイトルセクション（左揃え） */
.main-section {
  background: #05332E;
  width: 100vw;
  padding-top: 60px;
  padding-bottom: 60px;
}
.main-visual-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  padding-left: 130px;
}
.main-title {
  font-size: 3.5em;
  font-weight: normal;
  margin: 0 0 32px 0;
  letter-spacing: 0.13em;
  color: #F6EED7;
  line-height: 1.3;
  text-align: left;
}
.lead {
  font-size: 1.9em;
  margin-bottom: 20px;
  letter-spacing: 0.07em;
  text-align: left;
  max-width: 900px;
}
.desc {
  font-size: 1.15em;
  margin-bottom: 60px;
  line-height: 1.8;
  text-align: left;
  max-width: 900px;
}
.btn-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 420px;
  max-width: 92vw;
  margin-left: 0;
  margin-right: auto;
}
.main-btn {
  display: block;
  width: 100%;
  font-size: 1.15em;
  letter-spacing: 0.06em;
  padding: 14px 0;　/* ボタンの高さ */
  border-radius: 0;
  border: 1px solid #F6EED7;
  font-family: 'Noto Serif JP', serif;
  transition: background 0.2s, color 0.2s, border 0.2s;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  margin: 0;
  text-decoration: none;
  background: transparent;
  color: #F6EED7;
}
.main-btn:hover  { background: rgba(246,238,215,0.11); color: #fff; border: 2px solid #FFF5DE;}

@media (max-width: 900px) {
  .hero-image-wrap { height: 200px; }
  .main-title { font-size: 2.1em; }
  .main-section { padding-top: 32px; padding-bottom: 60px;}
  .btn-list { width: 97vw; }
  .main-visual-inner { max-width: 98vw; padding: 0 12px;}
}
@media (max-width: 600px) {
  .hero-image-wrap { height: 120px; }
  .main-title { font-size: 1.3em;}
  .lead { font-size: 1em;}
  .desc { font-size: 0.98em; margin-bottom: 32px;}
  .main-section { padding-top: 16px; padding-bottom: 40px;}
  .btn-list { width: 99vw;}
  .main-visual-inner { max-width: 99vw; padding: 0 6px;}
}

/* ▼ アーユルヴェーダとはセクション */
.about-ayurveda-section {
  margin-top: 60px;
  margin-bottom: 100px;
  background: #05332E;
}
.about-title {
  font-size: 2.7em;
  font-weight: normal;
  margin-bottom: 32px;
  letter-spacing: 0.08em;
  text-align: left;
  width: 100%;
}
.about-ayurveda-content {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}
.about-col {
  flex: 1 1 0;
  min-width: 350px;
  max-width: 550px;
  font-size: 1.1em;
  line-height: 2.1;
}
@media (max-width: 1000px) {
  .about-ayurveda-content { flex-direction: column; gap: 24px; text-align: left; padding: 0 18px;}
  .about-title { font-size: 1.3em; margin-left: 0;}
  .about-col { font-size: 0.97em; min-width: 0; max-width: 100%;}
}

/* ▼ 商品画像のCSS */
.product-section { 
    margin-top: 60px; 
    margin-bottom: 60px;
    background: #05332E;}
.product-title { 
  font-size: 2.7em; 
  font-weight: normal;
  margin-top: 60px; 
  margin-bottom: 18px; 
  letter-spacing: 0.04em; 
  text-align: left; 
  width: 100%;
}
.product-image { 
  display: block; 
  margin: 0 auto 0 auto; 
  width: 800px; 
  max-width: 95vw; 
  border-radius: 0px; 
  box-shadow: none;
}
@media (max-width: 1000px) {
  .product-title { font-size: 1.2em; margin-left: 0;}
  .product-image { width: 97vw;}
}

/* ▼ 商品説明(Product:商品)のCSS */
.product-description-section { 
    margin-top: 90px; 
    margin-bottom: 60px;
    width: 100vw; 
    background: #05332E;
}
.product-description-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 32px 60px; 
  max-width: 1200px; 
  margin: 0 auto;
}
.product-description-item { 
    text-align: left; 
    font-size: 1.1em;
}
.product-name { 
  font-size: 1.5em; 
  font-weight: normal; 
  margin-bottom: 0.15em; 
  margin-top: 0; 
  letter-spacing: 0.04em; 
}
.product-sub { 
  font-size: 0.8em; 
  display: block; 
  margin-top: 0.2em; 
  font-weight: normal;
}
@media (max-width: 900px) {
  .product-description-grid { grid-template-columns: 1fr; gap: 20px; padding: 0 8px;}
  .product-name { font-size: 1em;}
  .product-description-item { font-size: 0.97em;}
}

/* ▼ 品質説明（品質・安全性へのこだわり）セクションのCSS */
.quality-section { 
    margin-top: 90px; 
    margin-bottom: 90px;
    width: 100vw; 
    background: #05332E;
}
.quality-title { 
  font-size: 2.7em; 
  font-weight: normal; 
  margin-bottom: 32px; 
  letter-spacing: 0.12em; 
  text-align: left; 
  width: 100%;
}
.quality-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 50px 90px; 
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.quality-item { display: flex; align-items: flex-start; gap: 24px; text-align: left;}
.quality-icon svg {
  width: 36px;
  height: 36px;
  color: #e6dec8;
  display: block;
}
.quality-heading { font-size: 1.45em; font-weight: normal; letter-spacing: 0.06em; margin-top: 0; margin-bottom: 8px; color: #FFF5DE;}
.quality-text { font-size: 1.08em; line-height: 1.8; margin-bottom: 0;}
@media (max-width: 900px) {
  .quality-section { margin-top: 40px;}
  .quality-title { font-size: 1.5em; margin-bottom: 18px; margin-left: 0;}
  .quality-grid { grid-template-columns: 1fr; gap: 32px; margin-left: 0; padding: 0 12px;}
  .quality-icon { font-size: 1.4em; min-width: 28px;}
  .quality-heading { font-size: 1em;}
  .quality-text { font-size: 0.97em;}
}

/* ▼ 提供価値セクション（Value for You：AYUN商店がご提供する価値）のCSS */
.value-section { 
  margin-top: 130px;
  margin-bottom: 90px;   
  text-align: left;  
  width: 100vw; 
  background: #05332E;}
.value-title { 
  font-size: 2.7em; 
  margin-bottom: 18px; 
  letter-spacing: 0.07em; 
  text-align: left; 
  width: 100%;
}
.value-lead { 
  font-size: 1.2em; 
  margin-bottom: 36px; 
  max-width: 820px; 
  width: 100%; 
  margin-right: auto; 
  text-align: left;}
.value-flower-flex { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  margin-top: 50px; 
  gap: 32px;
}
.flower-img { 
  width: 370px; 
  height: 370px;
}
.value-text { 
  display: flex; 
  flex-direction: column; 
  gap: 30px; 
  max-width: 300px; 
  font-size: 1.08em; 
  line-height: 1.7;
}
.value-text-left { align-items: flex-end; gap: 120px;}
.value-text-right { align-items: flex-start;}
.petal-text { width: 100%;}
.petal-heading { display: block; width: 100%; font-size: 1.22em; font-weight: bold; color: #FFF5DE; text-align: center; margin-bottom: 0; line-height: 1.3;}
.petal-body { display: block; width: 100%; margin-top: 0; text-align: left;}
@media (max-width: 900px) {
  .value-flower-flex { flex-direction: column; align-items: center; gap: 18px;}
  .flower-img { width: 220px; height: 220px;}
  .value-text { max-width: 98vw; font-size: 0.97em; gap: 18px;}
  .value-title { font-size: 1.2em; margin-left: 0;}
  .value-lead { font-size: 1em; margin-left: 0;}
  .petal-heading { font-size: 1.08em;}
  .value-text-left { gap: 40px;}
}

/* ▼ About Us（AboutUs:AYUN商店について）セクションCSS */
.aboutus-section {
  margin-top: 60px; 
  margin-bottom: 30px;
  background: #05332E;
  padding-bottom: 0;
  width: 100vw;
}
.aboutus-title {
  font-size: 2.7em;
  letter-spacing: 0.07em;
  font-weight: normal;
  text-align: left;
  width: 100%;
}
.aboutus-flex {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
}
.aboutus-side {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 130px;
}
.aboutus-image {
  width: 200px;
  height: 240px;
  object-fit: cover;
  display: block;
  background: transparent;
}
.aboutus-main {
  flex: 1 1 0;
  min-width: 350px;
  max-width: 750px;
  display: flex;
  flex-direction: column;
}
.aboutus-heading {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 22px;
  letter-spacing: 0.04em;
  text-align: left;
}
.aboutus-message {
  font-size: 1.08em;
  margin-bottom: 40px;
  line-height: 1.6;
  text-align: left;
}
.aboutus-message p {
  margin-bottom: 0.5em;
}
/* レスポンシブ対応 */
@media (max-width: 900px) {
  .aboutus-section {
    margin-bottom: 16px; 
  }
  .aboutus-title {
    font-size: 1.5em;
    margin: 0 0 22px 0;
  }
  .aboutus-flex {
    flex-direction: column-reverse; /* ←スマホ用にcolumn-reverse写真を下に表示 */
    gap: 12px;
    width: 100%;
    padding: 0 12px;
  }
  .aboutus-side {
    align-items: flex-start;
    margin-bottom: 8px;
    margin-top: 0;
  }
  .aboutus-image {
    width: 140px;
    height: 170px;
  }
  .aboutus-main {
    max-width: 98vw;
  }
}

/* ▼ 会社概要セクションCSS */
.company-profile-section {
  margin-top: 30px; 
  margin-bottom: 40px;
  background: #05332E;
  padding: 0 0 60px 0;
  width: 100vw;
}
.company-profile-container {
  text-align: left;
}
.company-profile-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.company-profile-title {
  font-size: 1.45em;
  font-weight: bold;
  margin-bottom: 24px;
  text-align: left;
  width: 100%;
}
.company-profile-detail {
  font-size: 1.08em;
  line-height: 1.8;
  text-align: left;
}
.company-profile-contact {
  text-decoration: underline;
  margin-top: 12px;
  display: inline-block;
  transition: color 0.2s;
  color: #F6EED7;
}
.company-profile-contact:hover {
  color: #FFEFC0;
}
@media (max-width: 900px) {
  .company-profile-inner {
    margin: 0 auto;
    max-width: 98vw;
    padding: 0 18px;
  }
  .company-profile-title {
    font-size: 1.1em;
    margin-bottom: 12px;
  }
  .company-profile-detail {
    font-size: 1em;
  }
  .hanging-indent {
    padding-left: 0;
    text-indent: 0;
  }
}
/* ▼ AYUN商店の物語セクションCSS（Our Story : AYUN商店の物語） */
.story-section {
    margin-top: 10px;
    margin-bottom: 20px;
    background: #05332E; 
    padding: 16px 0 0 0;
    width: 100vw; 
    font-size: 0.95em;
}
.story-section.story-intro { margin-bottom: 10px; }
.story-section.story-kerala { margin-bottom: 10px; }
.story-section.story-message { margin-bottom: 10px; }
.story-title { 
    font-size: 2.7em; 
    margin-left: 450px; 
    margin-bottom: 32px; 
    font-weight: normal; 
    letter-spacing: 0.07em;
}
.story-heading {
    font-size: 1.7em; 
    margin-left: 450px; 
    margin-bottom: 10px; 
    font-weight: normal; 
    letter-spacing: 0.04em;
}
.story-text { 
    max-width: 1000px; 
    margin-left: 450px; 
    margin-bottom: 5px; 
    line-height: 1.8; 
    font-size: 1.08em; 
    text-align: left;
}
.story-2col { 
    display: flex; 
    gap: 38px; 
    max-width: 1200px; 
    margin-left: 450px; 
    margin-bottom: 18px;
}
.story-col-text { 
    flex: 1.2 1 0; 
    font-size: 1.08em; 
    line-height: 1.8; 
    text-align: left;
}
.story-col-img { 
    flex: 1 1 0; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start; 
    margin-top: 40px; 
    width: 440px;
}
.story-col-img img { 
    width: 400px; 
    border-radius: 8px; 
    margin-bottom: 12px; 
    object-fit: cover; 
    background: #fff; 
    display: block;
}
.story-img-caption { 
    font-size: 0.95em; 
    margin-top: 0;  
    text-align: left;
}
@media (max-width: 900px) {
    .story-title, .story-heading, .story-text, .story-2col { margin-left: 0; max-width: 98vw; padding: 0 12px;}
    .story-2col { flex-direction: column; gap: 18px;}
    .story-col-img img { width: 98vw; max-width: 320px;}
}
/* ▼ Our Partner の部分 */
.partner-section {
    margin-top: 60px; 
    margin-bottom: 60px; 
    background: #05332E; 
    padding: 38px 0 0 0; 
    width: 100vw;
}
.partner-2col { 
  display: flex; 
  gap: 48px; 
  max-width: 1300px; 
  margin: 0 auto 40px auto; 
  align-items: flex-start;
}
.partner-col-img {
  flex: none;
  width: 380px;
  display: flex;
  flex-direction: column;       /* ← 追加！ */
  align-items: center;          /* ← キャプションも中央揃え */
  justify-content: flex-start;  /* ← 画像とキャプションを上揃え */
  margin-top: 170px;
  margin-left: 130px;
}
.partner-col-img img { 
  width: 380px; 
  border-radius: 8px; 
  background: #fff; 
  display: block; 
  object-fit: cover;
}
.partner-col-text { 
  flex: 0.8 1 0; 
  width: 350px; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  font-size: 0.96em; 
  line-height: 1.8; 
  text-align: left;
}
.partner-title { 
  font-size: 2.7em; 
  font-weight: normal; 
  letter-spacing: 0.07em; 
  margin-bottom: 0px;
}
.partner-heading { 
  font-size: 1.4em; 
  font-weight: normal; 
  letter-spacing: 0.04em; 
  margin-bottom: 12px; 
  margin-top: 0px;
}
.partner-img-caption {
  font-size: 1em;
  color: #F6EED7;
  text-align: left;        /* ★左揃えに変更！ */
  margin-top: 10px;
  margin-bottom: 0;
  letter-spacing: 0.03em;
  width: 100%;             /* ★必要なら追加（親幅いっぱいに） */
  /* max-width: 380px;     ← 画像幅と揃えたい場合はこれも追加OK */
}

/* スマホ用：Our Partnerセクションのみ順序逆転 */
@media (max-width: 900px) {
  .partner-2col {
    flex-direction: column-reverse; /* ★順序逆転！★ */
    gap: 20px;
    max-width: 98vw;
    padding: 0 12px;
  }
  .partner-col-img {
    margin: 0 auto 0 auto;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-left: 0;
  }
  .partner-col-img img {
    width: 98vw;
    max-width: 320px;
    margin: 0 auto;
  }
  .partner-col-text {
    width: 100%;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 auto;
  }
}

/* ▼ Contact UsセクションCSS */
.contact-section { 
    background: #05332E;  
    padding: 60px 0 0 0; 
    width: 100vw;
    margin-bottom: 150px; /* ←下の部分の余白追加！ */
}
.contact-content { 
  max-width: 900px; 
  margin: 0 auto; 
  padding-left: 32px;
}
.contact-title { 
  font-size: 2.7em; 
  font-weight: normal; 
  letter-spacing: 0.07em; 
  margin-bottom: 18px;
}
.contact-subtitle { 
  font-size: 1.6em; 
  margin-bottom: 22px; 
  font-weight: normal; 
  letter-spacing: 0.04em;
}
.contact-lead { 
  margin-bottom: 28px; 
  font-size: 1.08em; 
  line-height: 1.8;
}
.contact-link {
  color: #F6EED7;             /* ← リンクを貼る部分はデフォルトで暗い色になるので色設定を追加 */
  text-decoration: underline;
  transition: color 0.2s;
}
.contact-link:hover {　/* ←ホバーはマウスカーソルが要素の上に乗った（重なった）ときの状態*/
  color: #FFEFC0;
}
.faq { margin-top: 50px; margin-bottom: 38px;}
.faq-title { font-size: 1.6em; margin-bottom: 18px; font-weight: normal;}
.faq-item { margin-bottom: 15px;}
.faq-q { font-size: 1.13em; font-weight: normal; margin-bottom: 4px;}
.faq-a { font-size: 1.13em; margin-left: 16px;}
.contact-news-title { margin-top: 50px; font-size: 1.6em; margin-bottom: 10px; font-weight: normal;}
.contact-news p { font-size: 1.13em; line-height: 1.8;}

/* ▼ 最新情報（イベント一覧） */
.contact-news-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0 0;
}

.contact-news-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(246, 238, 215, 0.22);
}

.contact-news-list li:last-child {
  border-bottom: none;
}

.news-date {
  font-size: 0.92em;
  letter-spacing: 0.06em;
  opacity: 1;
  min-width: 92px;
  white-space: nowrap;
}

.news-text {
  font-size: 1.08em;
  letter-spacing: 0.02em;
}

/* スマホでは縦積みにして読みやすく */
@media (max-width: 600px) {
  .contact-news-list li {
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
  }
  .news-date {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .contact-content { max-width: 98vw; padding-left: 10px; padding-right: 10px;}
  .contact-title { font-size: 2em;}
}