@charset "UTF-8";
/*ベース*/
/*ベース-カラー*/
/*ベース-テキスト */
/*ベース-スタイリング*/
/*ベース-レイアウト*/
/*各種コンポーネントのレイアウト*/
/**************ベース**************/
html {
  font-size: 62.5%; /* htmlのベースフォントサイズを10pxに規定 */
  scroll-padding-top: 100px;
}

.global {
  /*bodyに指定*/
  color: #24292e;
  font-size: 1.6rem; /*標準のテキストを16pxと規定*/
  line-height: 1.6;
  display: grid;
  grid-template: "header" auto "contents" 1fr "footer" auto/100%;
  min-height: 100vh;
  /* padding-top: 9rem; */
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ,
    Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #ffffff;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 1120px) {
  .global {
    padding: 0;
  }
}
p {
  text-align: left;
  overflow-wrap: break-word;
}
a {
  text-decoration: none;
  color: #534338;
  font-weight: bold;
}
a:hover {
  text-decoration: none;
  opacity: 0.5;
}
img {
  width: 100%;
  height: 100%;
  height: auto;
  vertical-align: middle;
}
ul {
  text-align: left;
}
li {
  list-style: none;
  font-size: 1.1rem; /*標準のテキストを16pxと規定*/
}
span {
  vertical-align: middle;
}
/*ページ内リンクの位置調整*/
a.anchor {
  padding-top: 10rem;
  margin-top: -10rem;
}
/**************カラー**************/
/*
$primary-color: #534338;
$secondary-color: #ffdc23;
$sub-textcolor: #83847B;
$border-color:#999999;
$back-grey:#F1F1F1;
*/
.back-primarycolor {
  background-color: #f49e5f;
}
.back-secondarycolor {
  background-color: #ffdc23;
}
.secolor {
  color: #ffdc23;
}
.sub-textcolor {
  color: #83847b;
}
.text-white {
  color: #fff;
}
.back-white {
  background: #fff;
}

@media screen and (max-width: 767px) {
  .back-white {
    /* padding-bottom: 2.4rem;
    margin-bottom: 2rem; */
  }
}
.back-grey {
  background-color: #f1f1f1;
}
.back-grey2 {
  background-color: #f1f1f1;
}

/**************ベース-テキスト **************/
h1 {
  text-align: center;
  margin: auto;
  max-width: 70rem;
  font-size: 4.5rem;
  padding-top: 8rem;
  margin-bottom: 4rem;
  color: #534338;
  border-bottom: 1px dashed #534338;
}
h2 {
  font-size: 3.2rem;
  margin-bottom: 3.2rem;
  padding: 0.3rem;
  color: #534338;
  /*border-bottom: 1px dashed #534338;*/
}
h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  text-align: left;
}
h4 {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
}
.text-small {
  font-size: 1.3rem;
}
.text-bold {
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 3.2rem;
    padding-top: 9.6rem;
    padding-bottom: 1rem;
  }
  h2 {
    /* font-size: 2.4rem; */
    margin-bottom: 1.6rem;
  }
  h3 {
    font-size: 2rem;
    margin-bottom: 1.2rem;
    text-align: left;
  }
  h4 {
    font-size: 1.8rem;
  }
}
/**************ベース-スタイリング*************/

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
  font-size: 1.4rem; /*標準のテキストを16pxと規定*/
  margin-top: 30px;
}
.text-right {
  text-align: right;
}
.borderbottom {
  border-bottom: 1px solid #999999;
}
.border {
  border: 1px solid #000;
}
.border-dashed {
  border: 1px dashed #83847b;
}

/**************ベース-レイアウト**************/
.flex {
  display: flex;
}
.align-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
/*mainタグに付与*/
.maincontent {
  grid-area: contents;
  background-image: url(../img/bgimg.jpg);
  background-repeat: repeat;
}
/*mainタグに付与*/
.contents-layout {
  display: flex;
  flex-direction: column;
}

.outwrapper {
  /*sectionに付与*/
  width: 100%;
  margin: auto;
}
.innerwrapper {
  /*section直下のdivに付与*/
  margin: auto;
  max-width: 100rem;
  width: 92%;
  text-align: center;
  border-radius: 12px;
  padding: 5% 0;
  margin-bottom: 3.2rem;
}
/*コンテンツ幅固定用*/
.w100rem {
  margin: auto;
  width: 92%;
  max-width: 100rem;
}
/*汎用的なdiv*/
.div-wrap {
  padding: 3%;
  border-radius: 0.8rem;
  margin: auto;
  width: 100%;
}
/*FVのリンクメイン PC*/
.fvlist-sp {
  display: none;
}
.fvlist-pc {
  position: relative;
  text-align: center;
  top: 40%;
  font-weight: bold;
  font-size: 3.2rem;
  background-image: url(../img/bgimg.jpg);
  background-repeat: repeat;
  color: #534338;
  padding: 1rem 1rem 1rem;
}

/*FVのリンク*/
.fvlink {
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2%;
  position: relative;
  top: 50%;
  left: 5%;
  text-align: center;
}
.inner_fvlink {
  font-size: 1.4rem;
  border-radius: 8px;
  border: 1px solid #534338;
  background: #fff;
  padding: 0.4rem;
}
/*2カラムボックス PC2列 SP1列*/
.list-2column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  margin: auto;
  max-width: 100rem;
  gap: 6%;
  margin-bottom: 10rem;
}
/*3カラムボックス*/
.card-3column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4%;
  margin-bottom: 4rem;
  align-items: start;
}
/*4カラム*/
.list-4column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  grid-template-rows: auto;
  margin: auto;
  max-width: 100rem;
  gap: 6%;
  margin-bottom: 4.8rem;
}
/*企画情報ページ4カラム*/
.plan-4column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-template-rows: auto;
  margin: auto;
  max-width: 100rem;
  gap: 6%;
  margin-bottom: 4.8rem;
}
@media screen and (max-width: 767px) {
  .list-2column-spblock {
    grid-template-columns: 1fr;
  }
  .card-3column {
    grid-template-columns: 1fr;
    gap: 3%;
    margin-bottom: 12rem;
  }
  .list-4column {
    margin-bottom: 14rem;
  }
  .plan-4column {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  .list-4col-2col {
    grid-template-columns: 1fr 1fr;
    gap: 3%;
  }
  .fvlist-pc {
    display: none;
  }
  .fvlist-sp {
    display: block;
    position: relative;
    text-align: center;
    top: 30%;
    font-weight: bold;
    font-size: 2rem;
    background-image: url(../img/bgimg.jpg);
    background-repeat: repeat;
    color: #534338;
    padding: 0;
  }
  .fvlink {
    width: 96%;
    margin: auto;
    top: 40%;
    left: 0;
    border-radius: 8px;
    padding: 1rem;
  }
}

/*3カラム　SPでは横スクロール*/
.scroll_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4%;
  margin-bottom: 4rem;
  align-items: start;
}
@media screen and (max-width: 767px) {
  .scroll_list {
    margin: 0 auto;
    padding: 0;
    width: 100%; /* コンテンツが見切れて見えるようにする */
    overflow-x: auto; /* 横スクロールの指定 */
    overflow-scrolling: touch; /* スクロールを滑らかにする */
    -webkit-overflow-scrolling: touch; /* スクロールを滑らかにする */
  }
  .scroll_list::-webkit-scrollbar {
    display: none;
  }
  .scroll_list li {
    display: inline-block; /* 横並びにする指定 */
    list-style: none;
    width: 30rem;
    height: 500px; /* 横スクロールする範囲の高さを指定 */
  }
}
/*SPverのみ表示　767px以下で表示*/
@media screen and (min-width: 767px) {
  .SPver {
    display: none;
  }
}
/*PCverのみ 767px以上で表示 */
@media screen and (max-width: 767px) {
  .PCver {
    display: none;
  }
}

/**************各種コンポーネント**************/
/*メインビジュアル*/
.mainvsl {
  background-image: url(../img/mainvsl.png);
  height: 80vh;
  background-size: cover;
  background-position: bottom;
}
@media screen and (max-width: 767px) {
  .mainvsl {
    height: 50vh;
    background-size: 200%;
    background-position: center;
    margin-bottom: 0rem;
  }
}
/*施設ロゴ*/
.logo {
  max-width: 2.6rem;
}
.logo2rem {
  width: 2rem;
}

/*h2アイコン*/
.h2icon {
  text-align: center;
  padding: 1rem;
  border-radius: 50%;
  max-width: 6rem;
  border: 1px dashed #534338;
}
/*投稿エリア日にち*/
.date {
  color: #83847b;
  font-size: 1.3rem;
}
/*フローティングボタン*/
.fixed_btn {
  font-size: 1.6rem;
  position: fixed;
  display: grid;
  padding: 8px;
  bottom: 20px;
  right: 20px;
  background: #fff;
  width: 8rem;
  height: 8rem;
  border-radius: 50rem;
  border: 2px solid #ffdc23;
}
@media screen and (max-width: 767px) {
  .fixed_btn {
    font-size: 1.4rem;
    padding: 8px 8px 52px 8px;
    width: 6rem;
    height: 6rem;
  }
}

/*ボタンーfill*/
.btn-fill {
  display: inline-block;
  font-size: 1.4rem;
  padding: 1rem 1rem 1rem 1.4rem;
  margin-bottom: 0.8rem;
  background-color: #fff;
  border-radius: 50rem;
}
/*ボタンーoutline*/
.btn-outline {
  display: inline-block;
  font-size: 1.4rem;
  padding: 1rem 1rem 1rem 1.4rem;
  margin-bottom: 0.8rem;
  border: 1px solid #534338;
  border-radius: 50rem;
}
/*ボタン右矢印*/
.arrow {
  color: #83847b;
}
/*チップーfilled*/
.chip-filled {
  display: inline-block;
  font-size: 1.2rem;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  color: #83847b;
  background-color: #f1f1f1;
  border-radius: 50rem;
}
/*横長画像*/
.longimage {
  width: 100%;
  height: 40vw;
  max-height: 27rem;
  -o-object-fit: cover;
  object-fit: cover;
}

/*フルーツアイコン*/
.fruiticon {
  width: 100%;
  max-width: 10rem;
  margin: auto;
}
/*フルーツアイコンリスト*/
.iconlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2%;
  width: 100%;
  margin: 0 auto 30px;
  align-items: start;
  justify-items: start;
}
.fruiticon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 上部に揃える */
  text-align: center;
  height: 100%;
}
.fruiticon img {
  max-width: 100%;
  height: auto;
}
.fruiticon span {
  margin-top: 10px;
}
@media screen and (max-width: 780px) {
  .iconlist {
      grid-template-columns: repeat(2, 1fr);
      margin: 0 auto 80px;
  }
}

/*テーブル*/
.tablewrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-template-rows: auto;
  gap: 8%;
  margin-top: 3.2rem;
}
.tablewrapper-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-template-rows: auto;
  column-gap: 3rem;
  row-gap: 6rem;
  margin-top: 3.2rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 768px) {
  .tablewrapper-set {
    padding-bottom: 3rem;
    row-gap: 4rem;
  }
}
.Table {
  margin: auto;
  width: 100%;
  border-collapse: collapse;
}
@media screen and (max-width: 768px) {
  .Table {
    font-size: 1.4rem;
  }
}
.Table-Head-Row {
  border-top: solid 1px #83847b;
  border-bottom: solid 1px #83847b;
}
.Table-Head-Row-Cell {
  font-size: 1.1rem;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.3em;
  padding-right: 0.3em;
  background-color: #dddddd;
  letter-spacing: 0em;
}
.Table-Body-Row {
  border-top: solid 1px #83847b;
  border-bottom: solid 1px #83847b;
}
.Table-Body-Row-Cell {
  font-size: 1.4rem;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.3em;
  padding-right: 0.3em;
  /* text-align: right; */
}

/*セル幅45%・テキスト左寄せ*/
.cell-45-l {
  width: 45%;
  text-align: left;
}

/*セル幅35%・テキスト右寄せ*/
.cell-35-r {
  width: 35%;
  text-align: right;
}
/*円のフォントサイズ*/
.yen {
  font-size: 1rem;
  letter-spacing: 0em;
}
/*googlemap*/
.map {
  width: 100%;
  height: 50rem;
}
/*フッター*/
.global-layout__footer {
  grid-area: footer;
}

/**************ページに特有のスタイリング**************/

/*トピックス　トップページ*/
.topics-list {
  display: flex;
  gap: 4%;
  padding: 2%;
  align-items: center;
  border-top: 1px solid #aaaaaa;
}
@media screen and (max-width: 768px) {
  .topics-list {
    display: block;
  }
  .topics-list .flex {
    padding: 1%;
  }

  .topics-list p {
    padding-top: 0.4rem;
  }
}

/*お弁当のリスト文字*/
.menu {
  font-size: 1.4rem;
}
/*4カラム*/
.col3-col2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-template-rows: auto;
  margin: auto;
  max-width: 100rem;
  margin-bottom: 4.8rem;
}
@media screen and (max-width: 768px) {
  .col3-col2 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.agent-contents table {
  border-collapse: collapse;
  width: 100%;
}

.agent-contentstable th,
table td {
  padding: 5px;
}

.agent-contents table th {
  text-align: center;
  width: 40%;
}

.agent-block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/**各お弁当枠**/
.lunch-wrapper {
  padding: 8px;
  margin: 4px;
  border: 1px solid #d3d3d3;
  border-radius: 8px;
  background: #fff;
}

.DLlink {
  font-size: 1.2rem;
  text-align: right;
}
@media screen and (max-width: 600px) {
  .agent-contents table {
    border-top: 0px solid #999;
  }

  .agent-contents table td {
    display: inline-block;
    text-align: center;
  }

  .agent-contents table th {
    display: block;
    /**改行**/
    border-top: none;
    border-bottom: none;
    width: 100%;
  }

  .tabContent-grid2 {
    display: block;
    width: 100%;
  }
}

/*画像ダウンロード　タブ切り替え*/
/**業者ページコンテンツ**/
.tabContent {
  display: none;
  padding: 20px;
  background: white;
}

.tabContent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 600px) {
  .tabContent-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tabContent2 {
  display: none;
  padding: 20px;
  background: white;
}

.tabContent-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 600px) {
  .tabContent-grid2 {
    display: block;
    width: 100%;
  }
}

/*施設ページ　いちご狩りセット枠のpadding-bottom*/
.straw-padding {
  @media screen and (max-width: 768px) {
    padding-bottom: 2rem;
  }
}
/*----------SP ver-----------*/ /*# sourceMappingURL=style.css.map */

/*アレルギー赤*/
.allergy {
  display: flex;
  width: 44px;
  height: 64px;
  padding: 4px 5px;
  margin: 0 4px 4px 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: 15px;
  background: #db5351;
  font-size: 8px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0em;
  float: left;
}

/*アレルギーオレンジ*/
.allergy1 {
  display: flex;
  width: 44px;
  height: 64px;
  padding: 4px 5px;
  margin: 0 4px 4px 0 ;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: 15px;
  background: #F6AD3C;
  font-size: 8px;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 0em;
  float: left;"
}