@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* 元テーマのreset */
.content {
  margin-top: 0;
}
.main {
  padding: 0 !important;
}
.wrap {
  width: 100%;
}
footer {
  margin-top: 0 !important;
}
button {
  border: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}



/* SON追記@240924 */

/* Custom CSS
 * --------------------------------------- */
 /* 基本的なスタイル */
 html {
  scroll-behavior: smooth; /* スムーススクロールを有効にする */
}

/* ページ内スクロールをした際に固定ヘッダーで見えない分をマイナスする */
.news-section,
.section1, 
.section2, 
.section3 {
  scroll-margin-top: 100px; /* 固定ヘッダーの高さ分 */
}

body {
  background-color: #F9F3E0; /* デフォルトの背景色 */
  font-family: "新ゴ R" , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , sans-serif; 
  font-size: 23px; /* 基本フォントサイズ */
  line-height: 2; /* 行間 */
  color: #221815; /* 文字色 */
  overflow-x: hidden;/* ハンバーガーメニュー用にはみ出した要素の右にスライド停止 */
}

.container {
  max-width: 1280px; /* 最大幅を1280pxに設定 */
  margin: 0 auto; /* 左右中央寄せ */
  background-color: #fff; /* コンテンツ部分の背景色 */
  padding: 0; /* 必要に応じてコンテンツ部分に余白を追加 */
}
@media (max-width: 860px) { /* 860px以下からSP用レスポンス */
  .container {
      max-width: 860px;
      width: 100%;
      padding: 0;
      margin: 0 auto;
  }
}



/* headerのメニューここから */

div#head-menu {
  background-color: #F5E7BE;
  height: 100px !important; /* ヘッダーの高さ */
  display: flex; /* header に flexbox を適用 */
  align-items: center; /* header 内の要素を垂直方向中央揃え */
  position: fixed; /* ページ上部に固定 */
  top: 0;
  max-width: 1280px;
  width: 100%;
  z-index: 1000; /* 他の要素より前面に表示 */
  box-sizing: border-box; /* パディングとボーダーを含む */
}

.header-inner {
  display: flex;
  justify-content: space-between; /* ロゴと右寄せ要素を左右に配置 */
  align-items: center; /* 垂直方向に中央揃え */
  width: 100%; /* 親要素の幅を100%に設定 */
  max-width: 1280px; /* 最大幅を1280pxに設定 */
  margin: 0 auto; /* 左右中央寄せ */
  padding: 0 4vw; /* 左右にパディングを追加 */
}

.logo {
  text-align: left;
}

.logo img {
  max-height: 70px; /* ロゴの高さ（必要に応じて調整） */
}
@media (max-width: 640px) {
  .logo img {
      width: 80%;
  }
}

.header-right {
  display: flex;
  align-items: center; /* header-right 内の要素も垂直方向中央揃え */
}

.header-right .icon {
  margin-right: 20px; /* アイコン間の余白 */
  margin-top: 7px;
}
@media (max-width: 860px) {
  .header-right .icon {
      display: none; /* 画面幅が狭くなった際の非表示 */
  }
}

.header-right .icon img {
  width: auto;
  height: 36px; /* アイコンの高さ（必要に応じて調整） */
}


/* ハンバーガーメニューここから */
.hamburger-menu {
  width: 50px;
  height: 50px;
  background-color: #221815;
  border-radius: 50%; /* 丸くする */
  position: relative;
  text-align: center;
}

.hamburger-menu span{
  position: absolute;
  width: 60%;
  left: 20%;
  height: 4px;
  background-color: #FFFFFF;
  border-radius: 9999px;
  transition: .5s; /* 0.5秒かけて変化 */
}
.hamburger-menu span:first-of-type{/* ハンバーガーメニューの1番目の線 */
  top: 32%;
}
.hamburger-menu span:last-of-type{/* ハンバーガーメニューの2番目の線 */
  top: 61%;
}
.slide-menu{
  background-color: #C9BC9C;
  background-image: url('common/img/slide-menu-bg_01.png');
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: local; /* 背景画像をスクロールと一緒に動かす */
  position: fixed;
  top: 100px;
  width: 100%;
  height: 100vh;
  left: 0;
  transform: translateX(100%); /* 非アクティブに右側に隠す */
  transition: .5s; /* 0.5秒かけて変化 */
  padding: 7rem 0;

  /* スライドメニュー内でのスクロール */
  height: 100%;
  overflow-y: scroll;
}
@media (max-width: 540px) {
  .slide-menu {
      background-image: url('common/img/slide-menu-bg_01-sp.png'); /* 420px以下で背景画像を差し替え */
      background-size: cover;
      padding: 3rem 0 4rem 0;
  }
}

.slide-menu li{
  font-family: "秀英にじみ丸ゴシック B"; 
  color: #fff;
  line-height: 400%;
  text-align: center;
}
@media (max-width: 540px) {
  .slide-menu li{
      line-height: 300%;
  }
}

.slide-menu li img{
  margin-top: 2rem;
}
.slide-menu li a {
  color: #231815;
  text-decoration: none;
  font-size: 22px;
}
.page-present .present-icon { /* プレゼントのアンケートページでは非表示 */
  display: none;
}


  
/* メニューがアクティブ時のCSS */
.hamburger-menu.active span:first-of-type{/* ハンバーガーメニューの1番目の線 */
  top: 50%;
  transform: rotate(405deg);
}
.hamburger-menu.active span:last-of-type{/* ハンバーガーメニューの3番目の線 */
  top: 50%;
  transform: rotate(-405deg);
}
.slide-menu.active{
  transform: translateX(0); 
}


/* メインイメージはここから */   
.main-image {
  position: relative;
  background-size: cover; /* 画像全体を表示 */
  background-position: center; /* 画像を中央に配置 */
  background-repeat: no-repeat; /* 画像の繰り返しを無効にする */
  background-image: url('common/img/main_image_01.png');
  margin-top: 100px;

  /* (画像の横幅 ÷　画像の高さ)*/
  aspect-ratio: 1280 / 728;
}

.main-image-logo {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  width: 100%; /* 画面幅に合わせる */
  max-height: 728px; /* 最大高さを728pxに設定 */
  height: auto; /* 画面幅に合わせて縮小 */
  object-fit: contain; /* 画像全体を表示 */
}

/* トップのメインイメージのアクセス時の表示制御 */
/* 下からふわっと表示 */
@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(10px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.main-image-logo {
  opacity: 0; /* 初期状態で透明にする */
  animation: fadeIn 1s ease-out 0.75s forwards; /* ふわっと出現するアニメーション */
}



/* 各セクションの背景色 */
.news-section {
  background-color: #FFFFFF;
}

.section1 {
  background-color: #F5E7BE;
}

.section2 {
  background-color: #FFFFFF;
}

.section3 {
  background-color: #F5E7BE;
}

div.div-footer {
  background-color: #FAF3E0 !important;
  
}

/* top サブナビゲーションのスタイル */
.sub-nav {
  text-align: center;
  min-height: 70px; /* 高さを70pxに設定 */
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
  position: relative; /* 縦線を配置するために必要 */
  margin-top: 1.5rem; /* 上に余白を追加 */
}
@media (max-width: 860px) {
  .sub-nav {
      display: none; /* 画面幅が狭くなった際の非表示 */
  }
}

.sub-nav ul {
  display: flex; /* 横並びにする */
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center; /* 垂直方向の中央揃え */
  height: 100%; /* 親要素の高さを継承 */
}

.sub-nav ul li {
  position: relative; /* 縦線を配置するために必要 */
  margin: 0 10px; /* 左右に余白を追加 */
  height: 100%; /* 親要素の高さを継承 */
}

.sub-nav ul li a {
  display: inline-block;
  max-width: 200px;
  padding: 10px;
  text-decoration: none;
  color: #000;
  height: 100%; /* 親要素の高さを継承 */
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
}

.sub-nav ul li a img {
  max-width: 100%;
  height: auto;
}

.sub-nav ul li::before,
.sub-nav ul li:last-child::after {
  content: "";
  position: absolute;
  top: 0; /* 縦線を要素の上端に配置 */
  bottom: 0; /* 縦線を要素の下端に配置 */
  width: 2px;
  background-color: #231815;
}

.sub-nav ul li::before {
  left: -10px; /* 縦線を左端に配置 */
}

.sub-nav ul li:last-child::after {
  right: -10px; /* 最後のリストアイテムの右端に縦線を配置 */
}


/* top ニュース news　セクション */
.news-section {
  margin: 3rem auto 70px;
  max-width: 800px;
  text-align: center;
}

.news-content {
  display: flex;
  align-items: center; /* 環境用にKEEP 垂直方向で中央に配置 */
  /* align-items: flex-start; 投稿数が少ないうちの設定値 垂直方向で上に配置 */
}

.news-logo {
  width: 140px;
  margin-right: 20px;
}

.news-logo img {
  width: 100%;
  height: auto;
  max-height: 360px; /* 最大高さを設定 */
  object-fit: contain; /* 画像のアスペクト比を維持 */
}

.news-articles {
flex-grow: 1; /* 残りの幅をすべて使用 */
  display: flex;
  flex-direction: column;
}
@media (max-width: 860px) {
  .news-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* 左寄せにする */
  }
  .news-logo {
      min-width: 60%;
  }    
  .responsive-news-logo {
      content: url('common/img/top_news_logo_sp_01.png');
      margin-bottom: 20px; /* 画像の下に余白���追加 */
  }
  .news-articles {
      width: 100%; /* 全幅で配置 */
  }
}

.news-meta {
  display: flex;
  gap: 10px; /* 要素間の余白 */
  width: 29%;
}

.news-item {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 2px solid #221815;
}

.news-date-wrap,.news-category-wrap {
  width: 100%;
}

.news-date {
  font-size: 14px;
  color: #221815;
}

.news-category {
  display: inline-block;
  min-width: 90px;
  background-color: #f12f98;
  font-size: 14px;
  color: #FFFFFF;
  padding: 0.2rem 0.5rem;
  text-align: center;
}

/* カテゴリ名の色変え */
.box-campaign,
.cat-link-3 {
  background-color: #E72410;
}
.box-notice,
.cat-link-4 {
  background-color: #00a0ea;
}
.box-event,
.cat-link-7 {
  background-color: #ea9800;
}
.box-etc,
.cat-link-8 {
  background-color: #f12f98;
}

.news-title {
  width: 70%;
  font-size: 22px;
  color: #221815;
  text-decoration: none;
  text-align: left;
  margin-left: 1rem;
}
@media (max-width: 640px) {
  .news-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start !important; /* 左寄せにする */
  }
  .news-title {
      width: 100%;
      margin-top: 10px; /* 上に余白を追加 */
      text-align: left; /* テキストを左寄せ */
      margin-left: 0;
  }
  .news-date, .news-category {
    width: auto;
  }
  .news-date, .news-title {
      text-align: left; /* テキストを左寄せ */
  }
  .news-category {
    text-align: center;
  }
}



/* top 県産米について about　ここから */
.section1 {
  position: relative; /* 子要素の絶対配置を可能にする */
  padding: 3rem 0; /* 全体の上下に3remの余白 */
}

.section1 .float-image-01 {
  position: absolute;
  bottom: 45px;
  left: 980px;
  transition: left 0.3s ease; /* 位置変更のアニメーションを追加 */
}

@media (max-width: 1200px) {
  .section1 .float-image-01 {
      left: 820px; /* 画面幅が狭くなった際の位置調整 */
  }
}

@media (max-width: 992px) {
  .section1 .float-image-01 {
      visibility: hidden !important; /* 非表示にする */
  }
}

.section1-content {
  max-width: 700px;
  margin: 0 auto; /* 中央揃え */
  text-align: center; /* 各要素を中央揃え */
  position: relative; /* 子要素の絶対配置を可能にする */
}

.section1-content img {
  margin-bottom: 2rem;
}

.section1-content p {
  margin-top: 2rem;
text-align: left; /* 文章を左寄せ */
  word-wrap: break-word; /* 折り返して表示 */
}
@media (max-width: 420px) {
  .section1-content p {
      font-size: 18px;
  }
}    

.button-container {
  display: inline-flex;
  align-items: center;
  margin-top: 5rem;
  margin-bottom: 1rem;
  position: relative; /* 子要素の絶対配置を可能にする */
}

.section1-button,
.section3-button,
.campaign-button,
.apply-button {
  font-family: "秀英にじみ丸ゴシック B"; 
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #E72410;
  color: #FFFFFF;
  padding: 1rem 4rem;
  border-radius: 50px; /* 角丸を最大値に設定 */
  display: inline-flex;
  align-items: center;
  justify-content: space-between; /* アイコンを右端に配置 */
  max-width: 360px; /* 必要に応じて最大幅を設定 */
  cursor: pointer;
}


.section1 .icon-container {
  margin-left: 1rem; /* アイコンを右端に配置 */
}


/* top キャンペーン campaign ここから */
.section2 {
  padding: 3rem 0; /* 上下に余白を追加 */
  position: relative; /* 子要素の絶対配置を可能にする */
}

.section2 .float-image-01 {
  position: absolute;
  top: 105px;
  right: 1000px;
  transition: right 0.3s ease; /* 位置変更のアニメーションを追加 */
}

@media (max-width: 1200px) {
  .section2 .float-image-01 {
      right: 900px; /* 画面幅が狭くなった際の位置調整 */
  }
  .section2 .float-image-01 img {
      width: 75%;
  }
}

@media (max-width: 992px) {
  .section2 .float-image-01 {
      visibility: hidden !important; /* 非表示にする */
  }
}


.section2 .float-image-31 {
  position: absolute;
  top: 1300px;
  left: 1000px;
  transition: right 0.3s ease; /* 位置変更のアニメーションを追加 */
}

@media (max-width: 1200px) {
  .section2 .float-image-31 {
      left: 900px; /* 画面幅が狭くなった際の位置調整 */
  }
  .section2 .float-image-01 img {
      width: 75%;
  }
}

@media (max-width: 992px) {
  .section2 .float-image-31    {
      visibility: hidden !important; /* 非表示にする */
  }
}


.section2 .float-image-32 {
  position: absolute;
  top: 1850px;
  right: 1000px;
  transition: right 0.3s ease; /* 位置変更のアニメーションを追加 */
}

@media (max-width: 1200px) {
  .section2 .float-image-32 {
      right: 900px; /* 画面幅が狭くなった際の位置調整 */
  }
  .section2 .float-image-01 img {
      width: 75%;
  }
}

@media (max-width: 992px) {
  .section2 .float-image-32 {
      visibility: hidden !important; /* 非表示にする */
  }
}





.section2-content {
  max-width: 800px;
  margin: 0 auto; /* 中央揃え */
  text-align: center; /* 各要素を中央揃え */
}

.campaign {
  margin-bottom: 2rem; /* キャンペーンの下に余白を追加 */
}

.section2-content img {
  margin-bottom: 0; /* 画像の下に余白を追加 */
}

.section2-content img.campaign-01_img02 {
  margin-bottom: 2rem;
}

.campaign-01-text {
  font-family: "新ゴ B" , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , sans-serif;
  font-size: 5rem;
  font-weight: bold;
  margin-bottom: 0; /* 文章の下に余白を追加 */
}
.campaign-01-subtext {
  font-family: "秀英にじみ丸ゴシック B"; 
  font-size: 2.4rem;
  margin-bottom:3rem; /* 文章の下に余白を追加 */
}

.campaign-02-text {
  font-family: "新ゴ B" , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , sans-serif;
  font-size: 3.6rem;
  margin-bottom: 0; /* 文章の下に余白を追加 */
}
.campaign-02-subtext {
  font-family: "新ゴ B" , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , sans-serif;
  font-size: 3rem;
  margin-bottom: 1rem; /* 文章の下に余白を追加 */
  margin-top: -1rem;
}
.campaign-02-explain {
  font-family: "秀英にじみ丸ゴシック B"; 
  font-size: 1.6rem;
  margin-bottom: 3rem; /* 文章の下に余白を追加 */
}

.section2 .icon-container {
  margin-left: 1rem; /* アイコンを右端に配置 */
}
.campaign-divider {
  border: 0;
  height: 1px;
  background: #231815;
  margin: 4rem 0; /* 区切り線の上下に余白を追加 */
}

/* top 美味しく食べられるお店 cert-store　ここから */
.section3 {
  position: relative; /* 子要素の絶対配置を可能にする */
  padding: 3rem 0; /* 上下に余白を追加 */
}

.section3 .float-image-01,
.section3 .float-image-character,
.section3 .float-image-02 {
  position: absolute;
}

.section3 .float-image-01 {
  top: 45px;
  right: 945px;
  transition: right 0.3s ease; /* 位置変更のアニメーションを追加 */
}
@media (max-width: 1200px) {
  .section3 .float-image-01 {
      top: 70px;
      right: 800px; /* 画面幅が狭くなった際の位置調整 */
  }
  .section3 .float-image-01 img {
      width: 70%;
  }
}
@media (max-width: 992px) {
  .section3 .float-image-01 {
      visibility: hidden !important; /* 非表示にする */
  }
}


.section3 .float-image-character {
  top: 225px;
  left: 920px;
  transition: left 0.3s ease; /* 位置変更のアニメーションを追加 */
}
@media (max-width: 1200px) {
  .section3 .float-image-character {
      top: 225px;
      left: 900px; /* 画面幅が狭くなった際の位置調整 */
  }
}
@media (max-width: 1150px) {
  .section3 .float-image-character {
      visibility: hidden !important; /* 非表示にする */
  }
}


.section3 .float-image-02 {
  /* bottom: 490px;  本番環境での数値 */
  bottom: 70px;
  left: 1000px;
  transition: left 0.3s ease; /* 位置変更のアニメーションを追加 */
}
@media (max-width: 1200px) {
  .section3 .float-image-02 {
      left: 920px; /* 画面幅が狭くなった際の位置調整 */
  }
}
@media (max-width: 1080px) {
  .section3 .float-image-02 {
      left: 840px; /* 画面幅が狭くなった際の位置調整 */
  }
}
@media (max-width: 992px) {
  .section3 .float-image-02 {
      visibility: hidden !important; /* 非表示にする */
  }
}

.section3-content {
  max-width: 740px;
  margin: 0 auto; /* 中央揃え */
  text-align: center; /* 各要素を中央揃え */
}

.section3 .title-images {
  margin-bottom: 2rem; /* 画像の下に余白を追加 */
}

.section3 .title-images img {
  display: block;
  margin: 0 auto 2rem auto; /* 画像を中央揃え、下に2remの余白を追加 */
}

@media (max-width: 1150px) { /* タイトル画像を幅が狭くなったら画像をSP用に入れ替える */
  .ttl-img-responsive-change {
      content: url('common/img/top_cert_store_ttl_01_sp.png');
  }
}

.section3 .cert-store-image-01,
.section3 .cert-store-image-02,
.section3 .cert-store-image-character {
  max-width: 100%; /* 画像の最大幅を設定 */
  height: auto;
}

.section3 .section3-content p {
  line-height: 2;
  margin-top: 2rem;
  margin-bottom: 4rem;
}
@media (max-width: 420px) {
  .section3-content p {
      font-size: 18px;
  }
}    

@media screen and (min-width: 780px) { /* SPのみ改行をいれる */
  .section3 .sp-br {
      display: none;
  }
}
.section3 .restaurant-links {
  display: flex;
  justify-content: space-around; /* 画像を左右に配置 */
  margin-bottom: 4rem; /* リンク画像の下に余白を追加 */
  gap: 1rem; /* 画像の間に余白を追加 */
}
@media screen and (max-width: 860px) {
  .section3 .restaurant-links {
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .section3 .restaurant-links a {
      margin-bottom: 10px;
  }
}
.section3 .restaurant-links a img {
  max-width: 100%; /* 画像の最大幅を設定 */
  height: auto;
}
.section3 .icon-container {
  margin-left: 1rem; /* アイコンを右端に配置 */
}



/* Footer ここから */
div.div-footer {
  font-family: "秀英にじみ丸ゴシック B"; 
  font-size: 18px; /* 基本フォントサイズ */
  line-height: 1.6; /* 行間 */
  color: #221815; /* 文字色 */
  font-weight: bold;

  border-top: 1px solid #e7e7e7;
  padding: 2rem 0 5rem 0 !important;
}
@media (max-width: 640px) {
  div.div-footer {
      padding-bottom: 10rem;
  }
}

.footer-content {
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  max-width: 1080px;
  width: 98%;
  margin: 0 auto; /* 中央揃え */
}

.footer-left,
.footer-right {
  width: 45%; /* 左右の幅を調整 */
}

.footer-left p {
  margin: 0;
  line-height: 1.9;
}
.foot-ttl {
  font-family: "新ゴ B" , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , sans-serif;
  font-weight: bold;
  font-size: 21px;
}

.footer-right ul {
  font-size: 15px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* 複数行に対応 */
}

.footer-right ul li {
  margin: 5px 0;
  width: 50%; /* 2つずつ横並びにする */
  position: relative; /* 疑似要素の位置を設定するために必要 */
}


.footer-right ul li::before {
  content: "-　"; /* リストアイテムの先頭に「-　」を追加 */
  position: absolute;
  left: 0;
}

.footer-right ul li a {
  text-decoration: none;
  color: #000;
  padding-left: 1.5rem; /* 「-　」とテキストの間に余白を追加 */
}

@media (max-width: 860px) {
  .footer-content {
      flex-direction: column;
      align-items: center;
  }
  .footer-left {
      padding-bottom: 3rem;
  }

  .footer-left, .footer-right {
      max-width: 540px;
      width: 100%;
      text-align: left;
  }
  .footer-right ul {
      justify-content: center;
  }
}



/* サイト右下に固定表示の応募ボタン */
.fixed-link {
  position: fixed;
  bottom: 20px; /* 画面の下からの距離 */
  right: 20px; /* 画面の右からの距離 */
  z-index: 1000; /* 他の要素より前面に表示 */
}

.fixed-link.active {
  display: none;
}

.fixed-link img {
  max-width: 100px; /* 画像の最大幅を設定 */
  height: auto;
}

@media (min-width: 861px) { /* レスポンシブでボタンが入れ替わる */
  .fixed-link .only-sp {
      display: none;
  }
}
@media (max-width: 860px) { /* SPではボタンが入れ替わる */

  /* 常時表示の応募ボタンはレスポンスで表示入れ替え */
  .fixed-link .only-pc {
      display: none;
  }

  .fixed-link {
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: #E60012;
      text-align: center;
      padding: 0.5rem 0.5rem;
  }
  .fixed-link img {
      max-width: 100%; /* 画像の最大幅を設定 */
      height: auto;
  }
}




/* アニメーション */
/* CSSアニメーションの設定 */
/* 茶碗ボタンがぷるぷるアニメーション */
.purupuru {
  -webkit-animation: purupuru 0.8s linear 0s 1;
  animation: purupuru 0.8s linear 0s 1;
}
  @-webkit-keyframes purupuru {
  0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { -webkit-transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { -webkit-transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { -webkit-transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { -webkit-transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
  }
  @keyframes purupuru {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }


/* 応募ボタンが拡大縮小アニメーション */
.kakushuku-animation {
  animation-timing-function: ease-in-out; /* アニメーションの速度を滑らかに変化させる。開始と終了がゆっくりで、中間が速い。 */
  animation-direction: alternate; /* アニメーションの再生方向を交互に切り替える。1回目は通常方向、2回目は逆方向。 */
  animation-duration: 2s; /* アニメーションの1サイクルの時間を3秒に設定する。 */
}
.kakushuku {
  animation-name: kakushuku;
}
  @keyframes kakushuku {
      0%, 40%, 60%, 80% {
      transform: scale(1.0);
      }
      50%, 70% {
      transform: scale(0.95);
      }
  }


/* ページ：about-miyazaki-rice ここから */
.page-about { /* WP用 */
  margin-top: 100px;
  padding: 3rem 0;
  text-align: center;
}


.page-about .main-image-about,
.page-about .section-hinohikari,
.page-about .section-koshihikari {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 3rem;
}
@media (max-width: 540px) {
  .page-about .section-image {
      width: 60%;
      margin: 0 auto;
  }
}

.page-about .section-content p {
  text-align: left;
}

.page-about .divider {
  padding: 3rem 0;
}
@media (max-width: 860px) { /* 860px以下からSP用レスポンス */
  .page-about .divider {
      width: 94%;
  }
}


/* ページ：knowledge-miyazaki-rice ここから */
.page-knowledge {
  margin-top: 100px;
  text-align: center;
}
.page-knowledge .main-content {
  background-image: url('common/img/knowledge-bg_01.png');
  background-size: cover; /* 幅いっぱいに配置 */
  background-repeat: no-repeat;
  background-position: center;
  height: 848px; /* 高さを848pxに設定 */
  padding: 3rem 0;
}
.page-knowledge .main-image-knowledge,
.page-knowledge .section-know-links {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.page-knowledge .section-know-links {
  max-width: 540px;
}

.page-knowledge .section-content p {
  font-family: "秀英にじみ丸ゴシック B"; 
  font-weight: bold;
  text-align: left;
}

.knowledge-links {
  display: flex;
  flex-direction: column;
  align-items: center; /* 子要素を中央揃え */
  line-height: 3;
}

.knowledge-links li {
  display: flex;
  align-items: center;
  justify-content: center; /* 子要素を中央揃え */
  width: 100%; /* 必要に応じて幅を調整 */
  text-align: center; /* テキストを中央揃え */
}
.knowledge-links img {
  height: 1em; /* 文字サイズの高さに設定 */
  margin-right: 10px; /* 画像とテキストの間に余白を追加 */
}

.knowledge-links a {
  text-decoration: none; /* リンクの下線を削除 */
  color: inherit; /* 親要素の色を継承 */
}


/* ページ：apply-present ここから */
/* ページ：apply-restaurant ここから */
/* ページ：apply-sport ここから */

.page-present,
.page-apply-restaurant,
.page-apply-sport {
  font-family: "秀英にじみ丸ゴシック B"; 
  margin-top: 100px;
  padding: 3rem 0;
  text-align: center;
}

.page-present .main-image-present,
.page-present .section-form,
.page-apply-restaurant .main-image-present,
.page-apply-restaurant .section-form,
.page-apply-sport .main-image-present,
.page-apply-sport .section-form  {
  max-width: 1200px;
  width: 96%;
  margin: 0 auto;
  padding-bottom: 3rem;
}


/* フォーム装飾 */

.form-area-01 .form-group {
  display: flex;
  align-items: center;
  margin: 2rem 0; /* 各フォームの上下に2remの余白を追加 */
  flex-direction: row; /* 横並び */
  justify-content: flex-start; /* 左寄せ */
}

h1.form-group-ttl {
  text-align: center;
  color: #E72410;
}

.form-area-01 .form-label {
  flex: 0 0 30%; /* ラベルの幅を30%に設定 */
  text-align: right; /* 右寄せ */
  margin-right: 1rem; /* ラベルと入力フィールドの間に余白を追加 */
}

.section-form .form-inputs {
  display: flex;
  flex-wrap: wrap; /* ラジオボタンを折り返し可能に */
  flex-direction: row; /* 横並び */
  gap: 1rem; /* ラジオボタン間の余白 */
  align-items: center; /* 垂直方向に中央揃え */
  margin: 0 1rem;
}
.form-inputs input[type="text"] {
  flex: 1; /* 入力フィールドを横並びにする */
}

/* 2つ並びのテキスト入力フォームを横並び */
.form-inputs span[data-name="Group1-name-last-name"],
.form-inputs span[data-name="Group1-name-first-name"],
.form-inputs span[data-name="Group1-furi-last-name"],
.form-inputs span[data-name="Group1-furi-first-name"] {
  width: 47%;
}

/* ラジオボタンのボタンと文字のズレ調整 */
.wpcf7-radio .wpcf7-list-item {
  display: inline-flex; /* 横並びにする */
  align-items: center;
  gap: 0.5rem;
}

.radio-group {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem; /* 各セットの間に余白を追加 */
}
.radio-group label {
  margin-left: 0.5rem; /* labelの左に余白を追加 */
}


.form-area-01 .form-inputs input[type="text"],
.form-area-01 .form-inputs input[type="email"],
.form-area-01 .form-inputs input[type="number"],
.form-area-01 .form-inputs input[type="tel"],
.form-area-01 .form-inputs textarea {
  width: 100%; /* 入力フィールドを全幅に */
  background-color: #EFEFEF; /* テキストボックスの背景色 */
  border: 2px solid #B5B5B6; /* テキストボックスの枠線 */
  padding: 1rem 0.5rem; /* 内側の余白 (上下1rem, 左右0.5rem) */
  border-radius: 4px; /* 角を少し丸める */
}

/* inputの短い枠の幅を調整 */
.form-area-01 .form-inputs span[data-name="sport-member-num"],
.form-area-01 .form-inputs span[data-name="sport-member-age-from"],
.form-area-01 .form-inputs span[data-name="sport-member-age-to"] {
  width: auto;
}



.section-form .form-inputs input[type="radio"] {
  width: 30px; /* ラジオボタンの幅 */
  height: 30px; /* ラジオボタンの高さ */
  border-radius: 50%; /* 円形にする */
  border: 2px solid #B5B5B6; /* ラジオボタンの枠線 */
  background-color: #FFFFFF; /* ラジオボタンの背景色 */
  appearance: none; /* デフォルトのスタイルを削除 */
  -webkit-appearance: none; /* デフォルトのスタイルを削除 (Safari用) */
  cursor: pointer; /* カーソルをポインターに変更 */
}

.section-form .form-inputs input[type="radio"]:checked {
  background-color: #B5B5B6; /* チェックされたときの背景色 */
}


.form-area-02, .form-area-03 {
  max-width: 800px;
  width: 94%;
  margin: 0 auto;
  padding: 2rem 0;
}

.form-area-02 .form-group {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  margin-bottom: 2rem; /* 各設問の間に2remの余白を追加 */
}

.form-area-02 .form-title::before,
.form-area-03 .form-title::before {
  content: "・"; /* 先頭に「・」を追加 */
  margin-right: 0.5rem; /* 「・」とテキストの間に余白を追加 */
}
.form-area-02 .form-title,
.form-area-03 .form-title {
  text-align: left;
  margin-bottom: 0.5rem; /* タイトルとラジオボタンの間に2remの余白を追加 */
}

.form-area-02 .wpcf7-form-control-wrap {
  text-align: left;
}

.wpcf7-form-control-wrap {
  width: 100%;
  text-align: left;
}

.form-area-02 .form-inputs select {
  width: 100%; /* ドロップダウンの幅を全幅に */
  padding: 1rem; /* 内側の余白 */
  background-color: #FFFFFF; /* ドロップダウンの背景色 */
  border: 2px solid #B5B5B6; /* ドロップダウンの枠線 */
  border-radius: 4px; /* 角を少し丸める */
  font-size: 1.2rem;
}

.form-area-02 .form-inputs input[type="text"] {
  width: 100%; /* テキストボックスの幅を全幅に */
  border: none; /* 枠線を削除 */
  border-bottom: 2px solid #B5B5B6; /* 下線のみの装飾 */
  padding: 0.5rem 0; /* 内側の余白 */
  background-color: transparent; /* 背景色を透明に */
}


.form-area-03 textarea#message {
  width: 100%; /* テキストエリアの幅を全幅に */
  height: auto; /* 高さは自動 */
  border: 1px solid #231815; /* 枠線の色を指定 */
  background-color: #FFFFFF; /* 背景色を白に */
  padding: 0.5rem; /* 内側の余白 */
  appearance: none; /* デフォルトのスタイルを削除 */
  -webkit-appearance: none; /* デフォルトのスタイルを削除 (Safari用) */
  resize: vertical; /* 縦方向のリサイズを許可 */
}


input[type=submit] {
  font-family: "秀英にじみ丸ゴシック B"; 
  font-size: 2rem;
  font-weight: bold;
  background-color: #22AC38; /* ボタンの背景色 */
  color: #FFFFFF;
  padding: 1rem 4rem;
  border-radius: 50px; /* 角丸を最大値に設定 */
  display: inline-flex;
  align-items: center;
  justify-content: center; /* テキストを中央揃え */
  max-width: 360px; /* 必要に応じて最大幅を設定 */
  width: 80%;
  margin: 2rem 0 ;
}
.wpcf7 .wpcf7-spinner { /* 送信中のスピナー分の中央揃えのズレ */
  display: block;
}

.section-form input::placeholder,
.section-form textarea::placeholder,
.section-form select option:first-child {
  font-size: 1.2rem; /* 文字サイズを大きくする */
}


.section-form input[type="text"],
.section-form input[type="email"],
.section-form input[type="number"],
.section-form textarea {
  font-size: 1.4rem; /* 文字サイズを変更 */
}

/* 860px以下の画面幅に対するスタイル */
@media (max-width: 860px) {
  .form-group {
      flex-direction: column !important; /* 縦並び */
      align-items: flex-start !important;
  }

  .form-label {
      margin-right: 0; /* 余白をリセット */
      margin-bottom: 0.5rem; /* タイトルとフォーム内容の間に余白を追加 */
      text-align: left; /* 左寄せ */
  }

  .form-inputs {
      width: 94%; /* フォーム内容を全幅に */
      flex-direction: row; /* 横並び */
      gap: 1rem; /* 入力フィールド間の余白 */
  }

}


/* top 860px以下での各セクションのベースレイアウト */
@media (max-width: 860px) { /* 860px以下からSP用レスポンス */
  .news-content,
  .section1-content,
  .section2-content,
  .section3-content,
  .footer-content {
      max-width: 860px;
      width: 94%;
      margin: 0 auto;
  }
}


/* page-about 860px以下での各セクションのベースレイアウト */
@media (max-width: 860px) { /* 860px以下からSP用レスポンス */
  .page-about .main-image-about,
  .page-about .section-hinohikari,
  .page-about .section-koshihikari,
  .page-about .divider {
      max-width: 94%;
      margin: 0 auto;
  }
}

/* page-knowledge 860px以下での各セクションのベースレイアウト */
@media (max-width: 860px) { /* 860px以下からSP用レスポンス */
  .page-knowledge .main-image-knowledge {
      max-width: 94%;
      margin: 0 auto;
  }
  .page-knowledge .section-know-links {
      max-width: 540px;
      width: 94%;
      margin: 0 auto;
      font-size: 18px;
  }
}




/* news詳細ページのベースレイアウト */
.entry-header {
  padding: 1rem 0;
}
h1.entry-title {
  margin-top: 100px;
  padding: 0 1rem;
}
.entry-content {
  padding: 0 1rem;
}
.pager-post-navi a figure {
  display: none;
}
.entry-categories-tags {
  padding: 0 1rem;
}
.no-scrollable-sidebar .sidebar {
  margin-top: 70px;
}

/* カテゴリ一覧ページへのリンク無効化 */
a.cat-link,
.breadcrumb-item a {
  pointer-events: none
}





/* ページ：support- ここから */
.page-support-restaurant {
  margin-top: 100px;
  padding: 3rem 0;
  text-align: center;
}

.page-support-restaurant .main-image-support-restaurant,
.page-support-restaurant .section-content {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 3rem;
}

.main-image-support-restaurant img {
  padding-bottom: 2rem;
}

.restaurant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem; /* 各店舗間の余白 */
  font-size: 22px;
}
.restaurant-list a {
  text-decoration: none;
}
.restaurant-item {
  display: flex;
  flex-direction: row; /* PCでの横並び */
  gap: 1rem; /* 画像と文字コンテンツの間の余白 */
  width: 100%;
  padding: 1rem; /* 内側の余白 */
}

.restaurant-image {
  flex: 1; /* フレックスアイテムが利用可能なスペースを均等に分割 */
  max-width: 100%;
  padding-right: 1rem;
}

.image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9:16の縦横比を維持 */
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をコンテナに合わせてカバー */
  border-radius: 8px; /* 角を丸める */
}

.restaurant-content {
  flex: 1; /* 残りの幅を文字コンテンツに割り当て */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 垂直方向の中央揃え */
  text-align: left;
  line-height: 1.6;
}

.restaurant-name {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
}

.restaurant-genre {
  font-size: 1.5rem; /* 文字サイズを小さくする */
  margin-right: 0.5rem; /* 店名との間に余白を追加 */
}

h3.restaurant-catchcopy {
  font-size: 1.5rem;
  font-weight: bold;
}

.restaurant-description {
  margin-bottom: 1rem;
}

.restaurant-address,
.restaurant-hours,
.restaurant-details {
  margin-bottom: 0;
}
.address-detail {
  color: #00A0E9; /* 文字色を#00A0E9に設定 */
}

.restaurant-details span {
  display: inline-block;
  margin-right: 1rem; /* 各詳細項目の間に余白を追加 */
}

.restaurant-web-space {
  padding-top: 1rem;
}
.restaurant-web-button {
  background-color: #FAF3E0;
  color: #221815;
  padding: 0.5em 2rem; /* 左右のパディングを1remに変更 */
  border-radius: 5px; /* 角丸 */
  text-decoration: none; /* 下線なし */
  display: inline; /* display: inline-block; から変更 */
  font-size: 80%; /* 親要素の60%のフォントサイズ */
  transition: background-color 0.3s ease; /* ホバー効果のためのトランジション */
  position: relative; /* 擬似要素を使用するために必要 */
}
.restaurant-web-button::before {
  content: "▶ "; /* ボタンの前に「▶ 」を追加 */
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%); /* 垂直方向の中央揃え */
  color: #221815; /* 記号の色をテキストの色と合わせる */
  font-size: 80%; /* 記号のフォントサイズを80%に設定 */
}
.restaurant-web-button span { /* span要素を追加 */
  margin-left: 1rem; /* テキストに左マージンを追加 */
}
.restaurant-web-button:hover {
  background-color: #f2e6d0; /* ホバー時の背景色の変更 */
}


.restaurant-divider {
  border-top: 2px solid #231815; /* 線の太さと色を設定 */
  margin: 2rem 2rem; /* 線の上下に2remの余白を追加 */
  width: 100%; /* 全幅にする */
}

/* スマホ用のスタイル */
@media (max-width: 860px) {
  .page-support-restaurant .main-image-support-restaurant {
      max-width: 94%;
      margin: 0 auto;
  }

  .restaurant-item {
      flex-direction: column; /* 縦並び */
  }
  .restaurant-image {
      padding: 0;
  }

  .restaurant-image,
  .restaurant-content {
      width: 100%; /* 全幅にする */
      padding-right: 0; /* 余白をリセット */
  }

  .restaurant-image {
      padding-bottom: 1rem; /* 下側に余白を追加 */
  }
}

/* ページネーション */

.pagination-container {
  display: flex;
  justify-content: center; /* 真ん中寄せ */
  margin: 0 auto; /* 上下の余白 */
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid #898989; /* 枠線の色 */
  border-radius: 8px; /* 角丸 */
  gap: 0.5rem; /* 各要素間の余白 */
  font-size: 18px;
}

.page-numbers {
  border: none;
}

.pagination a,
.pagination span {
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #000;
    border-radius: 1px; /* 角丸 */
    display: flex;
    align-items: center;
}

.pagination a:hover {
    background-color: #f0f0f0; /* ホバー時の背景色 */
}

.pagination .prev::before {
    content: "\f104"; /* Font Awesomeのアイコン */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem; /* アイコンとテキストの間に余白を追加 */
}

.pagination .next::after {
    content: "\f105"; /* Font Awesomeのアイコン */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 0.5rem; /* アイコンとテキストの間に余白を追加 */
}

.pagination .prev,
.pagination .next {
    font-weight: bold;
    width: auto;
}

.pagination .dots {
    padding: 0.5rem 0; /* ドットの上下の余白 */
    background: none;
}


/* 640px以下の画面幅に対するスタイル */
@media (max-width: 640px) {
  .pagination a.page-numbers,
  .pagination span.page-numbers {
      display: none; /* ページ番号とドットを非表示にする */
  }

  .pagination a.prev,
  .pagination a.next {
      display: inline-flex; /* 前へと次へを表示させる */
  }
  
  .pagination .dots {
    display: none; /* ドットを非表示にする */
  }
  
  .pagination {
      gap: 0; /* 各要素間の余白をリセット */
      border: none;
  }

  .pagination .prev,
  .pagination .next {
      margin: 0 0.5rem; /* 左右に余白を追加 */
      border: 1px solid #898989; /* 枠線の色 */
      border-radius: 8px; /* 角丸 */
  }
}





/* recaptchaの装飾関連 */
.grecaptcha-badge { visibility: hidden; }
/* ブラウザの大きさが1202px以上の場合 */
@media screen and (min-width: 1202px){
  .footer_recaptcha {
      padding: 1%;
      text-align: center;
      color: #CCC;
      width: 100%;
      font-size: 12px;
      }
  }
   
  /* ブラウザの大きさが1201px以下の場合 */
  @media screen and (max-width: 1201px){
  .footer_recaptcha {
      padding: 2%;
      text-align: center;
      color: #CCC;
      width: 96%;
      border-bottom: none;
      border-left: none;
      border-right: none;
      line-height: 20px;
      font-size: 12px;

      }
  }


  

/* 各種アニメーション */
/* 右から左に移動しながらフェードイン */
.scroll_fadein{
  opacity: 0;
}

.fadein_animation_start{
  /* キーフレームアニメーションを指定 */
  animation-name: fadein_animation;
  /* アニメーションの開始時間の遅延 */
  animation-delay: 0.3s;
  /* アニメーションの時間を指定 */
  animation-duration: 1s;
  /* アニメーション再生後のスタイルを指定 */
  animation-fill-mode: both;
}
@keyframes fadein_animation{
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
    transform: translate(0);
  }
}
.slideup{
  transform: translateY(50px);
}
.slidedown{
  transform: translateY(-50px);
}
.slideright{
  transform: translateX(30px);
}
.slideleft{
  transform: translateX(-50px);
}