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

/* =========================================
   ワンワンランドウベ
   style.css
   2026版
========================================= */


/* =========================================
   サイト全体の基本カラー設定
========================================= */

:root{

  /* メインカラー（茶系） */
  --main-color:#8d6e63;

  /* 背景色 */
  --bg-color:#f7f2ea;

  /* アクセントカラー */
  --accent-color:#f4a261;

  /* 文字色 */
  --text-color:#333333;

  /* 白 */
  --white:#ffffff;

}


/* =========================================
   CSS初期化（ブラウザ差を減らす）
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


/* =========================================
   ページ全体設定
========================================= */

body{

  font-family:
  "Yu Gothic",
  "Hiragino Kaku Gothic ProN",
  sans-serif;

  font-size:16px;
  line-height:1.8;
  color:var(--text-color);
  background:var(--bg-color);
  padding-bottom:90px;

}


/* =========================================
   画像を画面幅に合わせる
========================================= */

img{

  max-width:100%;

  height:auto;

  display:block;

  border-radius:20px;

}


/* =========================================
   リンク共通設定
========================================= */

a{

  text-decoration:none;

  color:inherit;

}


/* =========================================
   セクション余白
========================================= */

section{

  padding:80px 5%;

}


/* =========================================
   見出し共通
========================================= */

h1,
h2,
h3{

  line-height:1.4;

}


/* =========================================
   H2見出しデザイン
========================================= */

h2{

  font-size:36px;

  text-align:center;

  margin-bottom:40px;

  color:var(--main-color);

}


/* =========================================
   ヘッダー
========================================= */

header{

  position:sticky;

  top:0;

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

  padding:15px 5%;

  display:flex;

  justify-content:space-between;

  align-items:center;

  z-index:999;

  box-shadow:0 2px 10px rgba(0,0,0,0.08);

}


/* =========================================
   ロゴ
========================================= */

p.logo{

  font-size:26px;

  font-weight:bold;

  color:var(--main-color);

}


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

nav{

  display:flex;

  gap:25px;

}


/* =========================================
   メニューリンク
========================================= */

nav a{

  font-weight:bold;

  transition:0.3s;

}


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

nav a:hover{

  color:var(--accent-color);

}


/* =========================================
   ファーストビュー
========================================= */

.hero{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:50px;

  padding:60px 5%;

}


/* =========================================
   ファーストビュー画像
========================================= */

.hero img{

  width:50%;

  box-shadow:0 10px 30px rgba(0,0,0,0.1);

}


/* =========================================
   ファーストビュー文字
========================================= */

.heroText{

  width:50%;

}


/* =========================================
   メインタイトル
========================================= */

.heroText h1{

  font-size:52px;

  color:var(--main-color);

  margin-bottom:20px;

}


/* =========================================
   サブテキスト
========================================= */

.heroText p{

  font-size:20px;

  margin-bottom:30px;

}


/* =========================================
   ボタン共通
========================================= */

.button{

  display:inline-block;

  background:var(--accent-color);

  color:#ffffff;

  padding:18px 30px;

  border-radius:999px;

  font-size:18px;

  font-weight:bold;

  margin-right:15px;

  transition:0.3s;

}


/* =========================================
   ボタン hover
========================================= */

.button:hover{

  opacity:0.8;

}


/* =========================================
   販売カード全体
========================================= */

.cardWrap{

  display:flex;

  flex-wrap:wrap;

  gap:30px;

}


/* =========================================
   各販売カード
========================================= */

.card{

  width:calc(33.333% - 20px);

  background:#ffffff;

  padding:20px;

  border-radius:25px;

  box-shadow:0 10px 30px rgba(0,0,0,0.08);

  transition:0.3s;

}


/* =========================================
   カード hover
========================================= */

.card:hover{

  transform:translateY(-5px);

}


/* =========================================
   カードタイトル
========================================= */

.card h3{

  font-size:24px;

  margin:15px 0;

}


/* =========================================
   カード文章
========================================= */

.card p{

  margin-bottom:10px;

}


/* =========================================
   カード内ボタン
========================================= */

.card a{

  display:block;

  text-align:center;

  background:var(--main-color);

  color:#ffffff;

  padding:15px;

  border-radius:15px;

  margin-top:15px;

}


/* =========================================
   店舗紹介エリア
========================================= */

#shop{

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

  border-radius:30px;

}

/* =========================================
   店舗情報リスト
========================================= */

.shopInfo{

  list-style:none;

  margin-top:30px;

  padding:25px;

  background:#ffffff;

  border-radius:20px;

  box-shadow:0 5px 20px rgba(0,0,0,0.08);

}


/* 店舗情報1行 */

.shopInfo li{

  padding:12px 0;

  border-bottom:1px solid #eeeeee;

  font-size:16px;

  line-height:1.8;

}


/* 最後の線を消す */

.shopInfo li:last-child{

  border-bottom:none;

}


/* 店舗情報リンク */

.shopInfo a{

  color:var(--main-color);

  word-break:break-all;

}


/* =========================================
   家庭菜園エリア
========================================= */

.vegetable{

  display:flex;

  gap:25px;

}


/* =========================================
   野菜カード
========================================= */

.vegetable div{

  background:#ffffff;

  padding:20px;

  border-radius:20px;

  width:33.333%;

  box-shadow:0 10px 20px rgba(0,0,0,0.08);

}


/* =========================================
   GoogleMap
========================================= */

iframe{

  width:100%;

  height:450px;

  border:none;

  border-radius:25px;

  margin-top:30px;

}


/* =========================================
   下固定メニュー
========================================= */

.bottomMenu{

  position:fixed;

  bottom:0;

  left:0;

  width:100%;

  background:#ffffff;

  display:flex;

  justify-content:space-around;

  padding:15px;

  box-shadow:0 -5px 15px rgba(0,0,0,0.1);

  z-index:999;

}


/* =========================================
   下固定メニューリンク
========================================= */

.bottomMenu a{

  font-size:14px;

  font-weight:bold;

  color:var(--main-color);

}


/* =========================================
   スマホ表示
========================================= */

@media screen and (max-width:768px){


  /* ファーストビュー縦並び */

  .hero{

    flex-direction:column;

  }


  /* スマホ時画像幅 */

  .hero img{

    width:100%;

  }


  /* スマホ時文字幅 */

  .heroText{

    width:100%;

    text-align:center;

  }


  /* スマホ時タイトル */

  .heroText h1{

    font-size:36px;

  }


  /* スマホ時カード */

  .card{

    width:100%;

  }


  /* 野菜エリア縦並び */

  .vegetable{

    flex-direction:column;

  }


  /* 野菜カード幅 */

  .vegetable div{

    width:100%;

  }


  /* スマホ時メニュー非表示 */

  nav{

    display:none;

  }

}

/* =========================================
   準備中表示エリア
========================================= */

.comingSoon{

  width:100%;

  background:#ffffff;

  padding:50px 30px;

  border-radius:30px;

  text-align:center;

  box-shadow:0 10px 30px rgba(0,0,0,0.08);

}


/* =========================================
   準備中タイトル
========================================= */

.comingSoon h3{

  font-size:32px;

  color:var(--main-color);

  margin-bottom:20px;

}


/* =========================================
   準備中説明文
========================================= */

.comingSoon p{

  font-size:18px;

  line-height:1.8;

  margin-bottom:25px;

}


/* =========================================
   スマホ調整
========================================= */

@media screen and (max-width:768px){

  .comingSoon{

    padding:40px 20px;

  }

  .comingSoon h3{

    font-size:26px;

  }

  .comingSoon p{

    font-size:16px;

  }

}
/* =========================================
   フッター
========================================= */

.footer{

  padding:40px 20px 120px;

  text-align:center;

  font-size:14px;

}


/* フッターリンク */

.footer a{

  margin:0 10px;

  color:var(--main-color);

}

/* =========================================
   下層ページ H1
========================================= */

h1{

  font-size:42px;

  color:var(--main-color);

  margin-bottom:40px;

  text-align:center;

}


/* =========================================
   下層ページ文章
========================================= */

section p{

  margin-bottom:15px;

}


/* =========================================
   スマホ調整
========================================= */

@media screen and (max-width:768px){

  h1{

    font-size:30px;

  }

}


/* =========================================
   ペット用品ページ
========================================= */

.goodsLead{

  text-align:center;

  margin-bottom:50px;

  font-size:18px;

}


/* 商品一覧 */

.goodsWrap{

  display:flex;

  flex-wrap:wrap;

  gap:30px;

}


/* 商品カード */

.goodsCard{

  width:calc(33.333% - 20px);

  background:#ffffff;

  padding:25px;

  border-radius:25px;

  box-shadow:0 10px 30px rgba(0,0,0,0.08);
    
  transition:0.3s;

  /* 追加 */
  display:flex;
  flex-direction:column;
  text-align:center;


}


/* 商品タイトル */

.goodsCard h2{

  font-size:24px;

  margin:20px 0 15px;

  text-align:center;

}


/* 商品説明 */

.goodsCard p{

  margin-bottom:20px;

    line-height:1.8;

  text-align:center;

}

/* 楽天ボタン */

.goodsCard .button{

  display:block;

  text-align:center;

  margin-top:auto;

}


/* スマホ */

@media screen and (max-width:768px){

  .goodsCard{

    width:100%;

  }

}