@charset "UTF-8";

/* ==========================================
   1. 基本・全体設定 (Reset & Base)
   ========================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Serif JP', serif;
  color: #2b382b;
  background-color: #ffffff; /* 全体の背景を清潔感のある純白に */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================
   2. ヘッダー / メインビジュアル (Hero Section)
   ========================================== */
.hero {
  padding: 50px 0 30px;
  background-color: #ffffff;
  overflow: hidden;
}

.hero-inner {
  max-width: 1050px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 40px;
}

.hero-text {
  flex: 1;
  max-width: 460px;
}

.brand-logo img {
  height: 48px;
  width: auto;
  margin-bottom: 25px;
}

.main-title {
  font-size: 2.5rem;
  color: #1a3c27;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1.35;
  letter-spacing: 0.05em;
}

.subtitle {
  font-size: 0.95rem;
  color: #4a5d4e;
  margin-bottom: 35px;
}

/* 特長アイコン 4並び */
.feature-icons {
  display: flex;
  gap: 15px;
}

.icon-item {
  text-align: center;
  font-size: 0.72rem;
  color: #333;
  line-height: 1.4;
}

.icon-circle {
  width: 48px;
  height: 48px;
  border: 1px solid #d0dad2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 1.1rem;
  background: #fafafa;
}

/* ① トップ画像のなじませ処理 */
.hero-image {
  flex: 1.2;
  text-align: right;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
  /* 切り抜き感を抑える自然で柔らかい影 */
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.06));
}

/* ==========================================
   3. ブランドについて (Concept 1 - Forest BG)
   ========================================== */
.forest-bg {
  background: url('images/bg-forest.jpg') no-repeat center center / cover;
  padding: 100px 0;
  color: #fff;
  text-align: center;
}

.section-title-en {
  text-align: center;
  font-size: 1.5rem;
  color: #1a3c27;
  margin-bottom: 30px;
  letter-spacing: 0.03em;
}

.concept-box {
  background: rgba(255, 255, 255, 0.92);
  color: #2b382b;
  padding: 45px 40px;
  max-width: 620px;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.concept-box h3 {
  color: #1a3c27;
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.concept-box p {
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.concept-box p:last-child {
  margin-bottom: 0;
}

/* ==========================================
   4. 大切な家族と (Concept 2 - Family Section)
   ========================================== */
.family-section {
  padding: 90px 0;
  background: #ffffff;
}

.family-grid {
  display: flex;
  align-items: center;
  gap: 50px;
}

.family-text {
  flex: 1;
}

.family-text h3 {
  font-size: 1.4rem;
  color: #1a3c27;
  margin-bottom: 20px;
}

.family-text p {
  font-size: 0.92rem;
  margin-bottom: 12px;
}

/* ① 子どもと愛犬の写真なじませ処理 */
.family-image {
  flex: 1;
}

.family-image img {
  width: 100%;
  height: auto;
  border-radius: 12px; /* 柔らかな丸み */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07); /* 自然な奥行き感 */
  display: block;
}

.highlight-text {
  color: #1a3c27;
  font-weight: bold;
  margin-top: 20px;
}

/* ==========================================
   5. ヒバノワのシリーズ (Product Series)
   ========================================== */
.series-section {
  padding: 85px 0;
  background-color: #fcfbf9; /* セクション境界が心地よい上品な淡いオフホワイト */
}

.section-title {
  text-align: center;
  font-size: 1.6rem;
  color: #1a3c27;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.product-card {
  text-align: center;
  background: #ffffff;
  padding: 25px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 15px;
}

.product-card h4 {
  font-size: 0.95rem;
  color: #1a3c27;
  margin-bottom: 6px;
}

.product-card p {
  font-size: 0.78rem;
  color: #666;
}

.btn-center {
  text-align: center;
  margin-top: 45px;
}

.btn-dark {
  display: inline-block;
  background: #1a3c27;
  color: #ffffff;
  padding: 13px 45px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  transition: background-color 0.3s ease;
}

.btn-dark:hover {
  background: #2a5a3c;
}

/* ==========================================
   6. ご購入はこちら (Shop Section & Logos)
   ========================================== */
.shop-section {
  padding: 90px 0;
  background: #ffffff;
}

.section-sub {
  text-align: center;
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 40px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.shop-card {
  background: #fdfbf7;
  border: 1px solid #f0ece1;
  border-radius: 10px;
  padding: 35px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; /* 完全中央揃え */
}

.shop-card h3 {
  font-size: 1.05rem;
  color: #1a3c27;
  line-height: 1.4;
  margin-bottom: 15px;
}

/* ③ モールロゴの配置・サイズ統一設定 */
.shop-logo {
  height: 50px; /* 固定高さを設定し、上下中央へ配置 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.shop-logo img {
  max-height: 38px;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

/* ご提示の Amazon / Yahoo! 画像個別微調整 */
.shop-logo img[src*="amazon"] {
  max-height: 32px; /* 横長のため高さを抑えて視覚バランスを統一 */
}

.shop-logo img[src*="yahoo"] {
  max-height: 42px; /* 2段構造テキストのため少し大きめに確保 */
}

.shop-card p {
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.5;
}

.btn-shop {
  width: 100%;
  max-width: 220px;
  padding: 11px 0;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.btn-shop:hover {
  opacity: 0.85;
}

.btn-official { background: #1a3c27; color: #ffffff; }
.btn-amazon   { background: #567035; color: #ffffff; }
.btn-yahoo    { background: #e2d9ca; color: #4a4035; }

/* 特典・メリットバー */
.benefit-bar {
  display: flex;
  justify-content: space-around;
  margin-top: 60px;
  padding-top: 35px;
  border-top: 1px dashed #dddddd;
  font-size: 0.85rem;
  color: #444;
}

/* ==========================================
   7. フッター (Footer)
   ========================================== */
.footer {
  background: #1a3c27;
  color: #ffffff;
  padding: 60px 0 25px;
  font-size: 0.82rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.footer-brand img {
  max-width: 140px;
}

.btn-contact {
  display: inline-block;
  background: #ffffff;
  color: #1a3c27;
  padding: 8px 22px;
  border-radius: 20px;
  text-decoration: none;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

.btn-contact:hover {
  opacity: 0.9;
}

.copyright {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
}

/* ==========================================
   8. スマホ表示対応 (Responsive)
   ========================================== */
@media (max-width: 768px) {
  .hero-inner,
  .family-grid {
    flex-direction: column;
    text-align: center;
  }
  
  .hero-image {
    text-align: center;
    margin-top: 20px;
  }
  
  .feature-icons {
    justify-content: center;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .shop-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .benefit-bar {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/* Final responsive layout */
:root { --hiba-green:#075744; --hiba-dark:#06402f; }
body { color:#222; overflow-x:hidden; }
.container { width:min(100%,1120px); max-width:none; padding-inline:clamp(24px,6.5vw,84px); }

.hero { position:relative; min-height:clamp(620px,65vw,810px); padding:0; background:#f4ecdd url("images/hero-bg.png") center/cover no-repeat; }
.hero-inner { width:min(100%,1200px); min-height:inherit; margin:auto; padding:clamp(42px,5vw,66px) clamp(28px,6vw,76px); display:block; }
.hero-text { position:relative; z-index:2; width:min(43%,470px); max-width:none; }
.hero-image { display:none; }
.brand-logo img { height:clamp(62px,7vw,96px); margin:0 0 clamp(44px,6vw,72px); }
.main-title { font-size:clamp(2.25rem,4.2vw,3.9rem); line-height:1.45; letter-spacing:.12em; color:var(--hiba-green); margin-bottom:26px; }
.main-title span { display:block; white-space:nowrap; word-break:keep-all; }
.subtitle { color:var(--hiba-green); line-height:2; margin-bottom:34px; }
.feature-icons { width:100%; display:grid; grid-template-columns:repeat(4,minmax(62px,1fr)); gap:clamp(8px,1.5vw,20px); }
.mobile-features { display:none; }
.icon-item { min-width:0; color:var(--hiba-green); font-weight:600; }
.icon-circle { width:clamp(48px,5vw,64px); height:clamp(48px,5vw,64px); border:0; border-radius:0; background:transparent; }
.icon-circle img { width:100%; height:100%; object-fit:contain; }

.forest-bg { min-height:520px; padding:56px 0 80px; background-position:center right; text-align:left; }
.forest-mobile-photo { display:none; }
.section-title-en,.section-title { color:var(--hiba-green); }
.section-title-en { margin-bottom:42px; }
.section-title-en img { display:inline-block; width:auto; height:34px; margin-right:8px; vertical-align:middle; }
.section-title-en span { vertical-align:middle; }
.concept-highlight { color:var(--hiba-green); font-weight:700; }
.concept-box { width:min(47%,530px); margin:0; padding:22px 0; border-radius:0; background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.78),transparent); box-shadow:none; }

.family-section { padding:0; background:#fff; }
.family-section .container { width:100%; max-width:none; padding:0; }
.family-grid { display:grid; grid-template-columns:minmax(0,43%) minmax(0,57%); gap:0; align-items:stretch; min-height:420px; overflow:hidden; }
.family-text { min-width:0; padding-top:clamp(48px,6vw,82px); padding-right:clamp(36px,5vw,72px); padding-bottom:clamp(48px,6vw,82px); padding-left:max(clamp(32px,6vw,84px),calc((100vw - 1120px)/2 + 84px)); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.family-text h3 { font-size:clamp(1.15rem,1.65vw,1.4rem); line-height:1.85; }
.family-text h3 span { display:block; white-space:nowrap; word-break:keep-all; }
.family-image { min-width:0; display:flex; width:calc(100% + 120px); margin-left:-120px; position:relative; z-index:1; -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 9%,#000 23%,#000 100%); mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 9%,#000 23%,#000 100%); }
.family-image img { border-radius:0; box-shadow:none; width:100%; height:100%; min-height:0; object-fit:cover; object-position:72% center; }

@media (min-width:769px) and (max-width:1100px) {
  .family-image img { object-position:82% center; }
}

.series-section { background:#fff; }
.product-grid { gap:0; }
.product-card { min-width:0; padding:24px 18px; border-right:1px solid rgba(7,87,68,.35); border-radius:0; box-shadow:none; }
.product-card:last-child { border-right:0; }
.product-card:hover { transform:none; box-shadow:none; }
.shop-card { min-width:0; padding:26px 18px; }
.benefit-bar { display:none; }
.footer { background:var(--hiba-dark); }

@media (max-width:900px) {
  .hero::before { display:none; }
  .hero-text { width:min(54%,450px); }
}

@media (max-width:768px) {
  html,body { width:100%; overflow-x:hidden; }
  .container { padding-inline:20px; }
  .hero { min-height:700px; background-position:66% bottom; }
  .hero::before { display:none; }
  .hero-inner { min-height:700px; padding:26px 20px; }
  .hero-text { width:100%; max-width:430px; text-align:left; }
  .brand-logo img { height:58px; margin-bottom:18px; }
  .main-title { font-size:clamp(1.75rem,7.8vw,2.35rem); line-height:1.42; letter-spacing:.06em; margin-bottom:16px; }
  .subtitle { font-size:.82rem; line-height:1.8; margin-bottom:22px; }
  .feature-icons--desktop { display:none; }
  .mobile-features { display:block; padding:32px 24px 36px; background:#fff; }
  .feature-icons--mobile { width:min(100%,330px); margin:0 auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 30px; }
  .icon-item { font-size:.68rem; line-height:1.45; }
  .icon-circle { width:50px; height:50px; }

  .forest-bg { min-height:0; padding:38px 0 0; background:none; }
  .forest-bg .container { width:100%; padding:0; }
  .section-title-en { min-height:120px; padding:24px 20px 22px; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:clamp(1rem,4.8vw,1.2rem); line-height:1.5; letter-spacing:.01em; }
  .section-title-en img { height:auto; width:min(210px,58vw); margin:0; }
  .section-title-en span { display:block; }
  .forest-mobile-photo { display:block; width:100%; aspect-ratio:2.35/1; background-image:url("images/bg-forest.jpg"); background-repeat:no-repeat; background-size:175% auto; background-position:82% center; }
  .concept-box { width:100%; max-width:620px; margin:0 auto; padding:42px 28px 44px; background:#fff; text-align:center; }
  .concept-box h3,.family-text h3 { font-size:clamp(1.35rem,6.5vw,1.8rem); line-height:1.65; font-weight:500; }
  .concept-box p,.family-text p { font-size:.82rem; line-height:1.9; }

  .family-grid { display:flex; flex-direction:column; gap:0; min-height:0; overflow:visible; }
  .family-text { order:2; width:100%; padding:40px 28px 48px; text-align:center; }
  .family-text h3 span { display:inline; white-space:normal; }
  .family-text h3 span + span::before { content:"\A"; white-space:pre; }
  .family-image { order:1; display:block; flex:none; width:100%!important; max-width:none; height:clamp(230px,62vw,330px); margin:0!important; padding:0; overflow:hidden; -webkit-mask-image:none; mask-image:none; }
  .family-image img { display:block; width:100%!important; max-width:none; height:100%; object-fit:cover; object-position:82% center; }

  .series-section,.shop-section { padding-block:48px; }
  .section-title { font-size:1.25rem; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:28px; }
  .product-card { padding:18px 10px; }
  .product-card:nth-child(2n) { border-right:0; }
  .product-card img { height:120px; }
  .shop-grid,.footer-grid { grid-template-columns:1fr; }
  .shop-card { padding:24px 18px; }
  .footer-grid { gap:24px; text-align:center; }
  .footer-brand img { width:110px; max-width:110px; height:auto; }
}

@media (max-width:380px) {
  .main-title { font-size:1.8rem; }
  .product-grid { grid-template-columns:1fr; }
  .product-card { border-right:0; border-bottom:1px solid rgba(7,87,68,.25); }
}