@charset "UTF-8";


/* ====================
   RESET
==================== */

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

body {
  color: #232323;
  background-color: #fff5ee;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}
/*高さの５００ｐｘを忘れてた*/
img {
  display: block;
  max-width: 100%;
}

p {
  line-height: 1.7;
}


/* ====================
   共通
==================== */

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}


/* ====================
   HEADER
==================== */

.header {
  width: 100%;
  height: 100px;
  background-color: #fff5ee;
	
	position: sticky;/*スクロールしてもついてくる*/
top: 0;/*画面の一番上で止まる*/
z-index: 1000;/*ほかの要素より前に表示する*/

}

.header-inner {
  max-width: 2000px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


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

.logo img {
  width: 120px;
}

.logo h1 {
	margin-left: 40px;
  color: #ff4d37;
  font-size: 80px;
	letter-spacing: 10px;
	margin-bottom: 0; /*下の余白をなくす*/
	line-height: 1; /*文字の行の高さを詰める*/
}


.header-info {
  margin-left: auto;
  margin-right: 100px;
  font-size: 24px;
	font-weight: bold;
}


/* MENUボタン */



.menu-button {
  width: 120px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
position: relative;
  top: 25px;
}

.menu-area {
 position: relative;
}

.menu-button img {
  width: 100%;
  display: block;
}

.global-nav {
  display: none;/*その要素を非表示にする*/
	position: absolute;/*基準となる親要素から位置を決める*/
  top: 100%;/*基準となる親要素のすぐ下に配置*/
  right: 0;/*右端を揃える*/

  width: 100%;/*基準となる親要素と同じ幅にする*/
  background-color: #fffcd9;
  padding: 0;/*内側の余白をなくす*/
}

/*.global-nav.open は、global-nav と open の2つのclassを持っている要素
open は「開いている状態」を表すために自分たちで付けたクラス名なんだよ。
ちなみに open じゃなくて show と名付けても動く。CSSとJavaScript側の名前を揃えればOK。*/
.global-nav.open {
  display: block;
}

/*通常
global-nav
↓
display: none
↓
 隠す

MENUをクリック
↓
global-nav + open
↓
display: block
↓
 表示する*/

.global-nav ul {
  list-style: none;
	margin: 0;
  padding: 0;
}

.global-nav li {
  margin-bottom: 5px;
}

.global-nav a {
  /*text-decoration: none*/;
	font-size: 16px;
	font-weight: bold;
  color: #ff4d37;
}


/* ====================
   MAIN VISUAL
==================== */

/*contactのメイン*/
.main-visual {
  width: 100%;
  height: 900px;
  overflow: hidden;
}

.main-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*indexのメイン*/
.hero-slider {
  position: relative;
  width: 100%;
  height: 900px;
  overflow: hidden;
}

.slider-track {
  display: flex;
	width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
}

.slider-track img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

/* 左右のボタン */
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  padding: 15px;
  font-size: 30px;
  cursor: pointer;
}

.slider-prev {
  left: 20px;
}

.slider-next {
  right: 20px;
}
/* ====================
   NEWS
==================== */

.news {
	width: 1200px;
	height: 200px;
  margin-top: 50px ;

  display: flex;
  align-items: center;

  padding: 25px 50px;

  background-color: #d9f5c4;
  border-radius: 25px;
}


.section-title {
  flex-shrink: 0;
}

.section-title img {
	width: 200px;
	height: 120px;
  display: block;
  
}


.news-text {
  margin-left: 80px;
  font-size: 30px;
	font-weight: bold;
}


/* ====================
   ABOUT
==================== */

.about {
  margin-top: 50px;
}

.about-copy {
  margin-bottom: 25px;
  font-size: 30px;
	font-weight: bold;
	line-height: 1.6;
	
	position: relative;
  left: -45px;
  top: 110px;
}

.about-copy strong {
  color: #429f45;
	font-size: 35px;
	font-weight: 900;
}


.about-images {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}


.bread {
  width: 800px;/*パンの領域を800px*/
	flex-shrink: 0;/*flexに勝手に縮められない*/
	position: relative;/*元の位置を基準に動かせる*/
  z-index: 2;/*重なったときに「どっちを手前に表示するか」**を決めるもの*/
  top: 200px;/*元の位置から下へ200px*/
	left: 120px;/*元の位置から右へ120px*/
}

.bread img {
  width: 100%;
	display: block;
}


.vegetables {
  width: 700px;
  flex-shrink: 0;/*.about-images が display: flex; だから、スペースが足りないと**「700pxって指定されてるけど縮めよう」**とすることがある。それを「縮めないで700pxにしてね」とする指定*/
	position: relative;/*今いる場所を基準にして、そこから位置をずらせるようにする指定*/
  left: -150px;
}

.vegetables img {
  width: 700px;
  height: 500px;
  object-fit: cover;
}

.vegetables p {
	font-size: 30px;
	font-weight: bold;
  margin-top: 25px;
	position: relative;
  left: 70px;
  text-align: center;
}

.vegetables strong {
	position: relative;
  color: #c28445;
	font-size: 35px;
	font-weight: 900;
}
.wheat-text {
  display: inline-block;
  position: relative;
  left: 30px;
}

/* ====================
   MENU
==================== */

.menu {
	margin-top: 50px;
}



.menu-heading {
	width: 100%;
  height: 200px;
  padding: 20px 50px;
  background-color: #ffa66e;
  border-radius: 35px;

  display: flex;
  align-items: center;
  gap: 70px;
}

.menu-heading .section-title img{
  width: 200px;
	height: 120px;
  display: block;
}

.menu-text {
  flex: 1;
  text-align: center;
}


.menu-heading h2 {
  font-size: 40px;
  font-weight: 900;
}

.menu-heading p {
  margin-top: 15px;
  font-size: 30px;
	font-weight: bold;
	position: relative;
  left: -20px;
}


/* 商品一覧 */

.menu-list {
	display: flex;
  flex-wrap: wrap;/*Flexboxで子要素が親要素の幅を超えた場合に自動的に次の行に折り返す設定.**「横に入りきらなかったら次の行へ行っていいよ」***/
  justify-content: center;
  gap: 30px 40px;
	margin-top: 50px;
}


.menu-item {
	 width: 240px;
  text-align: center;
}

.menu-item img {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
}

.menu-item p {
  margin-top: 10px;
  color: #ff4d37;
	font-size: 24px;
	font-weight: bold;
}

.break {
  flex-basis: 100%;/*.break を入れると、「私は横幅を100%使います！」という要素が途中に登場する。これによりその行の横幅を全部使うから、その次の商品は同じ行に入れず、次の行から始まる。結果として「改行」みたいに使える*/
  height: 0;
}
/* ====================
   ACCESS
==================== */

.access {
	width: 1200px;
	margin: 100px auto 80px;
}



.access-heading {
	
  height: 200px;
  padding: 20px 50px;
  background-color: #d9f5c4;
  border-radius: 35px;

  display: flex;
  align-items: center;
  gap: 70px;
}

.access-heading .section-title {
  flex-shrink: 0;
}

.access-heading .section-title img{
  height: auto;
	width: 200px;
}

.access-text {
  flex: 1;
  text-align: center;
	
}


.access-heading h2 {
  font-size: 40px;
  font-weight: 900;
	
}

.access-heading p {
  font-size: 24px;
	font-weight: bold;
  line-height: 1.5;
}
.access-heading p span{
	display: inline-block;/* → spanを横並びのまま扱う*/
	margin-left: 30px;
}

/* MAP・店舗 */

.access-content {
  margin-top: 50px;

  display: flex;
  justify-content: center;
  gap: 80px;
}


.map {
  width: 500px;
	height: auto;
}
.map iframe {
  width: 100%;
  height: 300px;
  border: none;
	display: block;/* → 地図の下に余計な隙間ができるのを防ぐ*/
}
.access-content .map p {
	margin-top: 10px;
  text-align: center;
	font-size: 20px;
	color:#429f45;
}

.shop-photo {
  width: 30%;
  text-align: center;
}

.shop-photo img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.shop-photo p {
  margin-top: 10px;
  font-size: 20px;
}


/* 郵便番号検索ボタン */
#zip-search {
  margin-left: 15px;
  padding: 5px 10px;
  cursor: pointer;
}

/* 住所の入力欄 */
.address-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.address-top {
  display: flex;
  gap: 15px;
}

#prefecture,
#city {
  width: 160px;
  height: 38px;
}

#address {
  width: 340px;
  height: 38px;
}


/* ====================
   FOOTER
==================== */

.footer {
  width: 100%;
  background-color: #ff9d64;
	font-weight: bold;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0;

  display: flex;
  justify-content: space-between;
}


.sns {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sns-item {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 0;
}

.sns-item img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.sns-item p {
  margin: 0;
	color: #dff6c4;
  font-size: 24px;
}

/* 店舗情報 */

.footer-info p {
  margin-bottom: 10px;
  color: #dff6c4;
  font-size: 24px;
}


.copyright {
  padding: 10px 0;

  background-color: #fff5ee;

  text-align: center;
  font-size: 10px;
}


#page-top {
  position: fixed;/*画面の決まった位置に固定*/
  right: 60px;
  bottom: 60px;/*丸いボタンにする*/

  width: 60px;
  height: 60px;

  border: none;
  border-radius: 50%;
  background-color: #d9f5c4;
  color: white;
  font-size: 30px;
  cursor: pointer;

  display: none;/*最初は非表示*/
  z-index: 1000;
}

/* 商品画像をクリックできるようにする */
.menu-item img {
  cursor: pointer;
}

/* 拡大画面 */
#image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 2000;

  align-items: center;
  justify-content: center;
}

/* 拡大画像 */
#modal-image {
  max-width: 90%;/*画面が狭い場合は横幅90%以内に収める*/
  max-height: 80vh;/*画面の高さの80%以内に収める*/
  object-fit: contain;/*画像の縦横比を保つ*/
	width: 800px;
}

/* 閉じるボタン */
#modal-close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

/* お問い合わせ内容 */
.contact {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px 80px;
}

/* 見出し */
.contact h2 {
  text-align: center;
  color: #ff4d37;
  font-size: 40px;
  margin-bottom: 40px;
}

/* フォーム全体 */
.contact form {
  max-width: 850px;
  margin: 0 auto;
}

/* 各入力項目 */
.contact .form-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

/* 項目名 */
.contact .form-row label {
  width: 200px;
  flex-shrink: 0;
  text-align: right;
  color: #ff4d37;
  font-size: 24px;
  font-weight: bold;
}

/* 入力欄 */
.contact .form-row input,
.contact .form-row select {
  height: 45px;
  padding: 8px 12px;
  border: 2px solid #ccc;
  background-color: white;
  font-size: 18px;
}

.contact .form-row > input {
  width: 450px;
}

/* 郵便番号 */
.contact #zipcode {
  width: 210px;
}

.contact #zip-search {
  margin-left: 0;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

/* 住所 */
.contact .address-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact .address-top {
  display: flex;
  gap: 15px;
}

.contact #prefecture,
.contact #city {
  width: 210px;
}

.contact #address {
  width: 435px;
}

/* お問い合わせ内容 */
.contact .form-row:has(textarea) {
  display: block;
  margin-top: 30px;
}

.contact .form-row:has(textarea) label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
}

.contact textarea {
  display: block;
  width: 650px;
  max-width: 100%;
  height: 300px;
  margin: 0 auto;
  padding: 15px;
  border: 2px solid #ccc;
  background-color: white;
  font-size: 18px;
  resize: vertical;
}

/* 送信ボタン */
.contact .submit-area {
  text-align: center;
  margin-top: 25px;
}

.contact .submit-button {
  background-color: white;
  color: #888;
  border: 2px solid #ccc;
  border-radius: 0;
  padding: 5px 25px;
  font-size: 16px;
  cursor: pointer;
}

.contact .submit-button:hover {
  background-color: #eee;
}

/* ====================
   スマホ用 CONTACT
==================== */

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

  /* メイン画像 */
  .main-visual {
    height: 250px;
  }

  /* お問い合わせ全体 */
  .contact {
    width: 100%;
    padding: 40px 20px 60px;
  }

  .contact h2 {
    font-size: 26px;
    margin-bottom: 30px;
  }

  /* 入力項目を縦並びにする */
  .contact .form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 25px;
  }

  /* 項目名 */
  .contact .form-row label {
    width: 100%;
    text-align: left;
    font-size: 18px;
  }

  /* 入力欄 */
  .contact .form-row > input {
    width: 100%;
  }

  /* 郵便番号 */
  .contact #zipcode {
    width: 100%;
  }

  .contact #zip-search {
    align-self: flex-start;
  }

  /* 住所 */
  .contact .address-fields {
    width: 100%;
  }

  .contact .address-top {
    flex-direction: column;
    gap: 10px;
  }

  .contact #prefecture,
  .contact #city,
  .contact #address {
    width: 100%;
  }

  /* お問い合わせ内容 */
  .contact .form-row:has(textarea) {
    margin-top: 30px;
  }

  .contact .form-row:has(textarea) label {
    font-size: 24px;
    text-align: center;
  }

  .contact textarea {
    width: 100%;
    height: 220px;
  }

  /* 送信ボタン */
  .contact .submit-area {
    margin-top: 25px;
  }

	/* スマホ用ヘッダー */
.header {
  height: 70px;
}

.header-inner {
  padding: 0 15px;
}

.logo {
  gap: 10px;
}

.logo img {
  width: 45px;
}

.logo h1 {
  margin-left: 0;
  font-size: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.header-info {
  display: none;
}

.menu-button {
  width: 55px;
  top: 0;
}

.global-nav {
  width: 160px;
  right: 0;
  padding: 15px;
}
	
	/* スマホ用ハンバーガーメニュー */
.menu-button {
  width: 45px;
  height: 45px;
  top: 0;
}

/* スマホでは元のMENU画像を隠す */
.menu-button img {
  display: none;
}

/* 三本線を表示 */
.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #ff4d37;
  border-radius: 2px;
}

.hamburger {
  position: relative;
  margin: 0 auto;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -10px;
}

.hamburger::after {
  top: 10px;
}
	
	.footer {
  width: 100%;
}

.footer-inner {
  width: 100%;
  padding: 30px 20px;
  flex-direction: column;
  gap: 30px;
}

/* SNS */
.sns {
  gap: 15px;
}

.sns-item {
  gap: 15px;
}

.sns-item img {
  width: 35px;
  height: 35px;
}

.sns-item p {
  font-size: 13px;
}

/* 店舗情報 */
.footer-info p {
  font-size: 14px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

/* コピーライト */
.copyright {
  font-size: 10px;
  padding: 10px;
}

/* ページトップボタン */
#page-top {
  width: 45px;
  height: 45px;
  right: 15px;
  bottom: 15px;
  font-size: 24px;
}
	}

/* ====================
   スマホ用 TOPページ
==================== */

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

  /* 全体の横はみ出し防止 */
  .section-inner {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ====================
     メイン画像
  ==================== */

  .hero-slider {
    height: 250px;
  }

  .slider-track img {
    object-fit: cover;
  }

  .slider-prev,
  .slider-next {
    padding: 8px;
    font-size: 20px;
  }

  /* ====================
     NEWS
  ==================== */

  .news {
    width: auto;
    height: auto;
    margin: 30px 20px 0;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-radius: 15px;
  }

  .news .section-title img {
    width: 120px;
    height: auto;
  }

  .news-text {
    margin-left: 0;
    font-size: 14px;
    line-height: 1.7;
  }

  .news-text p {
    margin-bottom: 8px;
  }

  /* ====================
     ABOUT
  ==================== */

  .about {
    margin-top: 40px;
  }

  .about-copy {
    position: static;
    margin-bottom: 25px;
    font-size: 20px;
    text-align: center;
    line-height: 1.7;
  }

  .about-copy strong {
    font-size: 23px;
  }

  .about-images {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .bread {
    width: 100%;
    position: static;
    flex-shrink: 1;
  }

  .bread img {
    width: 100%;
    height: auto;
  }

  .vegetables {
    width: 100%;
    position: static;
    flex-shrink: 1;
  }

  .vegetables img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .vegetables p {
    position: static;
    margin-top: 15px;
    font-size: 18px;
    text-align: center;
  }

  .vegetables strong {
    position: static;
    font-size: 21px;
  }

  .wheat-text {
    position: static;
  }

  /* ====================
     MENU
  ==================== */

  .menu {
    margin-top: 50px;
  }

  .menu-heading {
    height: auto;
    padding: 20px;
    flex-direction: column;
    gap: 15px;
    border-radius: 20px;
  }

  .menu-heading .section-title img {
    width: 120px;
    height: auto;
  }

  .menu-text {
    width: 100%;
  }

  .menu-heading h2 {
    font-size: 22px;
  }

  .menu-heading p {
    position: static;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
  }

  /* 商品を2列に並べる */
  .menu-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 15px;
    margin-top: 30px;
  }

  .menu-item {
    width: 100%;
    min-width: 0;
  }

  .menu-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
  }

  .menu-item p {
    font-size: 18px;
    margin-top: 8px;
  }

  /* パソコン用の強制改行を解除 */
  .break {
    display: none;
  }

  /* ====================
     ACCESS
  ==================== */

  .access {
    width: auto;
    margin: 60px 20px;
    padding: 0;
  }

  .access-heading {
    height: auto;
    padding: 20px;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    border-radius: 20px;
  }

  .access-heading .section-title img {
    width: 120px;
    height: auto;
  }

  .access-heading h2 {
    font-size: 18px;
    line-height: 1.6;
  }

  .access-heading p {
    font-size: 14px;
    line-height: 1.7;
  }

  .access-heading p span {
    display: block;
    margin-left: 0;
  }

  /* 地図と店舗写真を縦並び */
  .access-content {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
  }

  .map {
    width: 100%;
  }

  .map iframe {
    width: 100%;
    height: 250px;
  }

  .access-content .map p {
    font-size: 14px;
  }

  .shop-photo {
    width: 100%;
  }

  .shop-photo img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  .shop-photo p {
    font-size: 14px;
  }
.global-nav {
    width: 90px;
    padding: 5px;
  }

  .global-nav ul {
    padding: 0;
  }

  .global-nav li {
    margin-bottom: 5px;
  }

  .global-nav a {
    font-size: 14px;
    padding: 3px;
  }
	
	.news .section-title img,
  .menu-heading .section-title img,
  .access-heading .section-title img {
    width: 80px;
    height: auto;
	}
}