@charset "utf-8";

/*★★★★★ 共通設定 ★★★★★*/

@media screen and (min-width: 959px) {

  /*スマホ版限定の要素をPCには表示しない*/
  .mobile {
    display: none;
  }
}

body main {
  background-image: url(../../img/background.png);
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
}

li,
a {
  list-style: none;
  text-decoration: none;
}

p,
small,
span {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* ★★★★★ここからTOPボタン設定★★★★★ */

html,
body {
  height: 101%;
  background-color: #323844;
}

.container {
  min-height: 100%;
  /* 全体のコンテンツが画面高さを超えるように min-height に変更を推奨 */
}

button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 80px;
  right: -80px;
  bottom: calc(50% - 40px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  border: 0;
  background: #d25729;
  transition: 0.2s;
  letter-spacing: 3px;
  font-weight: bold;
  border-radius: 10px 0 0 10px;
  z-index: 1000;
}

button i {
  position: absolute;
  font-size: 30px;
  color: #fff;
  top: 15px;
  font-weight: 300;
}

button p {
  margin: 0;
  font-size: 15px;
  bottom: 13px;
  position: absolute;
}

.is-active {
  opacity: 1;
  visibility: visible;
}

button.is-active {
  right: -2px;
}

/*スクロールフェードイン設定*/
.scroll-space {
  box-sizing: border-box;
  color: #323844;
  overflow: hidden;
}

/*結乃町タイトル余白設定*/
.scroll-space-story-title {
  height: 180px;
  margin-top: 30px;
  margin-bottom: 5px;
}

/*結乃町物語コンテンツアクション設定*/
.scroll-space-story {
  padding: 0;
  height: 1000px;
}

/*タイトル共通高さ設定*/
.scroll-space-food-title {
  margin-top: 100px;
}

/*お食事処一覧コンテンツアクション設定*/
.scroll-space-food {
  height: 395px;
}

/*pcボタン共通アクション設定*/
.scroll-space-btn {
  height: 200px;
  align-content: center;
}

/*モバイル版アクション設定*/
@media screen and (max-width: 959px) {

  /*結乃町タイトルアクション設定*/
  .scroll-space-story-title {
    height: 170px;
  }

  /*結乃町タイトル余白設定*/
  .scroll-space-story-title .title {
    margin-top: 50px;
    margin-bottom: 5px;
  }

  /*結乃町物語コンテンツアクション設定*/
  .scroll-space-story {
    padding: 0;
    height: 730px;
  }

  /*お食事処一覧・お知らせコンテンツアクション設定*/
  .scroll-space-food {
    height: 310px;
    width: 165px;
    justify-items: center;
    margin-top: 30px;
  }

  /*タイトル共通アクション設定*/
  .scroll-space-food-title {
    padding-top: 0;
    height: 180px;
  }

  /*ボタン共通アクション設定*/
  .scroll-space-btn {
    height: 130px;
  }
}

/*フェードインアクション設定*/
.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;

  &.fadein-left {
    transform: translate(-30px, 0);
  }

  &.fadein-right {
    transform: translate(30px, 0);
  }

  &.fadein-up {
    transform: translate(0, -30px);
  }

  &.fadein-bottom {
    transform: translate(0, 30px);
  }

  &.scrollin {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}

/*★★★★★フォントリンク★★★★★*/

/*タイトルフォント：春乃海解星*/
.kaisei-harunoumi-regular {
  font-family: "Kaisei HarunoUmi", serif;
  font-weight: 400;
  font-style: normal;
}

.kaisei-harunoumi-medium {
  font-family: "Kaisei HarunoUmi", serif;
  font-weight: 500;
  font-style: normal;
}

.kaisei-harunoumi-bold {
  font-family: "Kaisei HarunoUmi", serif;
  font-weight: 700;
  font-style: normal;
}

/*本文フォント：全角Gothic New*/
.zen-kaku-gothic-new-light {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-kaku-gothic-new-black {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/*★★★★★ タイトルの設定 ★★★★★*/
.title {
  color: #323844;
  font-size: 48px;
  font-family: "Kaisei HarunoUmi", serif;
  font-weight: 500;

  /*bodyに対して中央揃えにするためのcss*/
  display: block;
  margin: 50px auto;

  /* 1本目の線（テキストの直下） */
  border-bottom: 3.5px solid #d25729;
  width: fit-content;
  position: relative;
}

/*タイトルの下線設定*/
.title::after {
  content: "";
  display: block;
  /* 2本目の線（1本目の線の下） */
  border-bottom: 6px solid #d25729;
  width: 100%;

  /* 2本目の線を配置 */
  position: absolute;
  left: 0;
  bottom: -14px;
  /* 1本目の線からの距離を調整 */
}

section {
  text-align: center;
}

/*★★★★★ タイトルの画像あしらい設定 ★★★★★*/

/* .title内の<span>を絶対配置の要素として設定 */
.title .title-deco {
  display: block;
  position: absolute;
  /* テキストの縦並びで表示されないように、h2に対して絶対配置 */
  background-size: 80%;
  width: 70px;
  height: 70px;
}

/* ★右上1つ目の装飾★ */
.title .title-deco:nth-child(1) {
  background-image: url(../img/title-design1.png);
  position: absolute;
  top: -38px;
  right: -60px;
}

/* ★右上2つ目の装飾★ */
.title .title-deco:nth-child(2) {
  background-image: url(../img/title-design2.png);
  position: absolute;
  top: -10px;
  right: -100px;
}

/* ★左下1つ目の装飾★ */
.title .title-deco:nth-child(3) {
  background-image: url(../img/title-design1.png);
  position: absolute;
  bottom: -55px;
  left: -80px;
}

/* ★左下2つ目の装飾★ */
.title .title-deco:nth-child(4) {
  background-image: url(../img/title-design2.png);
  position: absolute;
  bottom: -80px;
  left: -45px;
}

/*★★★★★ ボタンの設定 ★★★★★*/
.float2 {
  background: #d25729;
  border: 1px solid #ccc;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  padding: 12px 40px;
  margin-top: 20px;
  display: inline-block;
  text-decoration: none;
  outline: none;
  border-radius: 100px;
  box-shadow: 0 3px 5px rgb(161, 66, 31);
  /*アニメーションの設定*/
  transition: all 0.3s;
  position: relative;
}

/*★★★★★ 矢印＞の設定 ★★★★★ */
.float2::after {
  content: "";
  /*矢印の位置*/
  position: absolute;
  top: 47%;
  right: 20px;
  /*矢印の形状*/
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  /*アニメーションの指定*/
  transition: all 0.3s;
}

/*hoverした際の移動*/
.float2:hover::after {
  right: 17px;
}

/*hoverをしたらボックスの影が拡がり色が濃くなる*/
.float2:hover {
  box-shadow: 0 0 5px rgba(161, 66, 31, 0.6);
  border-color: transparent;
  transform: translateY(4px);
  box-shadow: none;
}

/* ★★★★★★ここからヘッダーメニューcss★★★★★★★ */

#header {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 150px;
  position: relative;
  z-index: 10;
}

/* ヘッダーロゴサイズ設定 */
#header .logo img {
  max-width: 120px;
  margin: 10px;
  margin-right: -130px;
  /*ヘッダーメニューのズレを直す為の-130px*/
  margin-left: 30px;
  transition: opacity 0.3s ease;
}

/*ヘッダーロゴにホバーすると60％表示*/
.logo:hover img {
  opacity: 0.6;
}

.submenu {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.header-menu {
  display: flex;
  align-items: center;
  width: 100%;
  /* 親要素の幅いっぱいに広げる */
}

/*メニューボタンの設定*/
.menu-list {
  width: 160px;
  height: 120px;
  background-color: #f8f8f8;
  border-radius: 10px;
  position: relative;
  transition: all 0.3s;
  margin: 3px;
  border: solid 1px #b3b3b3;
}

.menu-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #323844;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: all 0.3s;
  flex-direction: column;
  /* pとspanの並びを縦方向にする */
}

/*★メニューアイコン📚の設定★*/
.menu-list a::before {
  content: "";
  display: block;
  /* アイコンサイズの変更 */
  width: 38px;
  height: 38px;
  /* アイコン種類・表示の設定*/
  background-image: url("../../img/header-icon1-story.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像を中央に配置 */
  /* テキストとの間隔調整 */
  margin-bottom: 3px;
}

/*お食事処一覧アイコン🍴*/
.submenu li:nth-child(2) a::before {
  background-image: url("../../img/header-icon2-food.png");
}

/*エリアガイドアイコン🗺*/
.submenu li:nth-child(3) a::before {
  background-image: url("../../img/header-icon3-access.png");
}

/*アクセスアイコン🚃*/
.submenu li:nth-child(4) a::before {
  background-image: url("../../img/header-icon4-map.png");
}

/*お知らせアイコン📢*/
.submenu li:nth-child(5) a::before {
  background-image: url("../../img/header-icon5-news.png");
}

/* ホバーするとメニューの背景色が青くなる */
.menu-list:hover {
  background-color: #ececec;
}

/*メニューボタン左端の白線*/
.menu-list::before {
  content: "";
  width: 1px;
  height: 80%;
  margin-top: 8px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}

/*ホバー前のメニューボタン設定*/
.menu-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #323844;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 500;
  transition: all 0.3s;
}

/*ホバー後のメニューボタン設定*/
.menu-list:hover a {
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}

/*メニューの英語部分の設定*/
.menu-en {
  font-size: 13px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 2px;
  display: block;
}

.menu-en-food {
  position: relative;
  display: block;
  padding-bottom: 7px;
  /* 矢印のためのスペースを確保 */
}

.menu-en-food::after {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);

  /* 矢印のスタイル */
  width: 8px;
  height: 8px;
  border-width: 0.5px;
  border-style: solid;
  border-color: #949ba7;
  border-top: none;
  border-left: none;
  transition: transform 0.3s ease;
}

.menu-list:hover .menu-en-food::after {
  transform: translateX(-50%) translateY(4px) rotate(45deg);
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
  border-color: #ffffff;
}

/* ★★★★★★ここからドロップダウンメニュー★★★★★★★ */
/*ドロップダウンリストの下枠*/
.dropdown__lists {
  display: none;
  width: 660px;
  height: 150px;
  position: absolute;
  top: 120px;
  left: 0;
}

/* ドロップダウンメニュー横並び設定 */
.menu-list:hover .dropdown__lists {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 15px;
  flex-wrap: nowrap;
}

/*ドロップダウンメニューに表示させる画像と幅高さの設定*/
.dropdown__list {
  border: solid 1px #b3b3b3;
  margin: 5px;
  background-image: url(../../img/sample.png);
  background-size: cover;
  background-size: 200px;
  background-position: center;
  border-radius: 10px;
  width: 200px;
  height: 130px;
  position: relative;
  /*ホバーしたときに背景画像が拡大されるときの動き・滑らかさ設定*/
  transition: all 0.3s ease, background-size 0.3s ease;
}

/*洋食背景画像の設定*/
.dropdown__list:nth-child(2) {
  background-image: url(../../img/sample2.png);
}

/*甘味処背景画像の設定*/
.dropdown__list:nth-child(3) {
  background-image: url(../../img/sample3.png);
}

/*居酒屋背景画像の設定*/
.dropdown__list:nth-child(4) {
  background-image: url(../../img/sample4.png);
}

/* ドロップダウンメニューにホバーしたときに画像を20%拡大させる */
.dropdown__list:hover {
  background-size: 220px;
}

/*ドロップダウンメニューの中の設定 文字など*/
.dropdown__list a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 5px rgba(0, 0, 0, 1);
  /* 右に0px, 下に0px, ぼかし4px, 黒色で透明度100% */
  text-decoration: none;
  position: relative;
  font-size: 16px;
}

/*  >の設定  */
.dropdown__list a::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(135deg);
  position: absolute;
  right: 15px;
  top: calc(50% - 5px);
}

/*★★★★★★★ここからファーストビュー★★★★★★★★*/

#first-view {
  height: 87vh;
  position: relative;
  background-image: url(../../top/img/top-image.jpg);
  background-size: 60%;
  background-position: center;
}

/*ファーストビューの写真設定*/
#first-view img {
  position: absolute;
  top: 20px;
  left: 15%;
  text-align: center;
  width: auto;
  height: 80vh;
}

/*ファーストビューのタイトル設定*/
.first-view-title {
  font-size: 68px;
  font-family: "Kaisei HarunoUmi", serif;
  font-weight: 500;
  font-style: normal;
  writing-mode: vertical-rl;
  color: #f6f8ff;
  text-shadow: 0px 0px 3px rgba(210, 87, 41, 1),
    0px 0px 4px rgba(210, 87, 41, 1), 0px 0px 5px rgba(210, 87, 41, 1),
    0px 0px 6px rgba(210, 87, 41, 1), 0px 0px 8px rgba(210, 87, 41, 1);
  position: relative;
  top: 80px;
  left: 88%;
  z-index: 30;
}

/*赤の下線設定↓*/
.first-view-solid {
  display: inline-block;
  background-color: #d25729;
  width: 40px;
  height: 615px;
  position: absolute;
  top: 80px;
  left: 88.8%;
  z-index: 10;
}

/*ファーストビューのタイトル装飾1*/
.first-view-asirai1:first-child {
  display: inline-block;
  background-image: url(../img/title-design1.png);
  background-size: 80px;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -80px;
  left: 60px;
  z-index: 10;
}

/*ファーストビューのタイトル装飾2*/
.first-view-asirai1:nth-child(2) {
  width: 80px;
  height: 70px;
  background-image: url(../img/title-design2.png);
  background-size: 80%;
  position: absolute;
  top: -20px;
  left: 90px;
}

/*ファーストビューのタイトル装飾3*/
.first-view-asirai1:nth-child(3) {
  width: 80px;
  height: 70px;
  background-image: url(../img/title-design3.png);
  background-size: 80px;
  position: absolute;
  top: 605px;
  left: 5px;
}

/*★★★★★ここから結乃町物語★★★★★*/

#story {
  height: 950px;
  position: relative;
  margin: 0 auto;
}

/*結乃町・画像位置指定*/
.img-story {
  width: 800px;
  height: 500px;
  background-image: url("../../top/img/history03.jpg");
  background-size: cover;
  background-size: 90%;
  background-position: center;
  position: absolute;
  top: 30px;
  right: 20%;
}

/*テキストボックス・位置指定*/
.story-text-box {
  width: 500px;
  height: 350px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 470px;
  right: 50%;
}

/*テキストh3*/
.story-text-box h3 {
  margin: 10px;
  margin-top: 40px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #d25729;
}

/*テキストp*/
.story-text-box .story-text {
  width: 400px;
  margin: 0 auto;
  letter-spacing: -0.7px;
  line-height: 30px;
}

/*ここから結乃町ボタン*/
/*位置・大きさ指定*/
.sample_btn {
  display: block;
  width: 300px;
  height: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color: #fff;
  background-color: #d25729;
  position: absolute;
  top: 790px;
  right: 40%;
  border: 1px solid #fff;
  clip-path: polygon(93% 0, 100% 50%, 93% 100%, 0% 100%, 7% 50%, 0% 0%);
  transition: color 0.5s ease;
  font-weight: 700;
}

.text {
  position: relative;
}

.sample_btn:hover {
  color: #d25729;
}

.text:hover {
  font-weight: 700;
}

.sample_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.sample_btn::before {
  position: absolute;
  top: -5px;
  left: 8px;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #cec793;
  clip-path: polygon(93% 0, 100% 50%, 93% 100%, 0% 100%, 7% 50%, 0% 0%);
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}

/* 矢印＞の設定 */
.sample_btn::after {
  content: "";
  /*矢印の位置*/
  position: absolute;
  top: 47%;
  right: 29px;
  /*矢印の形状*/
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  /*アニメーションの指定*/
  transition: all 0.3s;
}

/*hoverした際の移動*/
.sample_btn:hover::after {
  right: 25px;
  border-top: 2px solid #d25729;
  border-right: 2px solid #d25729;
}

/*★★★★★ここからお食事処一覧★★★★★*/

/*ボタンのマージン↓*/
.food-btn-wrapper {
  width: 150px;
  height: 300px;
  /* margin: 0 auto; */
  border-radius: 25px;
  transition-duration: 0.4s;
  box-shadow: 1px 3px 5px rgb(65, 17, 0, 0.8), 1px 3px 10px rgb(65, 17, 0, 0.8);
}

.food-btn-wrapper:hover {
  box-shadow: 0px 0px 40px rgb(65, 17, 0, 0.3);
}

/*ボタン全体の大きさ・背景画像設定*/
.food-btn {
  display: block;
  width: 150px;
  height: 300px;
  border-radius: 25px;
  background-image: url("../../top/img/btn-wa.jpg");
  background-size: cover;
  position: relative;
  transition-duration: 0.4s;
}

.food-btn:hover {
  transform: scale(1.1);
}

/* 洋食ボタンの画像 */
.food-yo-btn {
  background-image: url("../../top/img/btn-yo.jpg");
}

/* 甘味処ボタンの画像 */
.food-ds-btn {
  background-image: url("../../top/img/btn-ds.jpg");
}

/* 居酒屋ボタンの画像 */
.food-iz-btn {
  background-image: url("../../top/img/btn-iz.jpg");
}

/*アイコン設定*/
.food-btn-category::before {
  content: "";
  display: block;
  /* アイコンサイズの変更 */
  width: 38px;
  height: 38px;
  /* アイコン種類・表示の設定*/
  background-image: url("../../top/img/foodmenu-icon-ja.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像を中央に配置 */
  /* テキストとの間隔調整 */
  margin-bottom: 5px;
  /*中央揃えの設定*/
  margin-left: auto;
  margin-right: auto;
}

/* 洋食アイコン */
.food-yo-btn .food-btn-category::before {
  background-image: url("../../top/img/foodmenu-icon-en.png");
}

/* 甘味処アイコン */
.food-ds-btn .food-btn-category::before {
  background-image: url("../../top/img/foodmenu-icon-ds.png");
}

/* 居酒屋アイコン */
.food-iz-btn .food-btn-category::before {
  background-image: url("../../top/img/foodmenu-icon-beer.png");
}

/*和食・洋食・甘味処・居酒屋テキスト*/
.food-btn .food-btn-category {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  text-shadow: 0px 0px 3px rgba(210, 87, 41, 1),
    0px 0px 10px rgba(210, 87, 41, 1);
  position: absolute;
  top: 20px;
  /*中央揃えの設定↓*/
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  z-index: 9;
}

/*詳しく見る-背景*/
.food-btn-ander-text {
  width: 150px;
  height: 70px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*詳しく見る-テキスト*/
.food-btn .food-btn-ander-text p {
  color: #fff;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 1), 1px 1px 3px rgba(0, 0, 0, 1);
  text-decoration: none;
  border-style: none;
  font-size: 14px;
  font-weight: 600;
}

/*詳しく見るの矢印設定*/
.food-btn-ander-text::after {
  content: "";
  /*矢印の位置*/
  position: absolute;
  top: 47%;
  right: 20px;
  /*矢印の形状*/
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  /*アニメーションの指定*/
  transition: all 0.3s;
}

/*hoverした際の移動*/
.food-btn-ander-text:hover::after {
  right: 16px;
}

/*★★★ここから店舗情報設定★★★*/

/*★ここから大枠flex設定★*/
.food-yo,
.food-wa,
.food-ds,
.food-iz {
  width: 800px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  margin-top: 70px;
}

/*店舗情報2個flex設定*/
.food-shop {
  width: 570px;
  display: flex;
  justify-content: space-between;
}

/*幅・高さ設定*/
.food-shops {
  width: 250px;
  height: 300px;
  margin: 0px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  transition-duration: 0.4s;
  /* border: solid 3px #323844; */
}

.food-shops:hover {
  transform: scale(1.1);
}

/*店舗写真*/
.food-shops span {
  width: 200px;
  height: 140px;
  border-radius: 10px;
  display: block;
  background-image: url("../../top/img/food-wa-dontyabo.jpg");
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 5px;
}

/* 和食1店舗目写真 */
.food-wa .food-shop .food-shops:nth-child(1) span {
  background-image: url("../../top/img/food-wa-dontyabo.jpg");
  background-position: top;
  background-size: 90%;
}

/* 和食2店舗目写真 */
.food-wa .food-shop .food-shops:nth-child(2) span {
  background-image: url("../../top/img/food-wa-komorebi.png");
}

/* 洋食1店舗目写真 */
.food-yo .food-shop .food-shops:nth-child(1) span {
  background-image: url("../../top/img/food-yo-dawa.jpg");
  background-position: bottom;
}

/* 洋食2店舗目写真 */
.food-yo .food-shop .food-shops:nth-child(2) span {
  background-image: url("../../top/img/food-yo-arakko.png");
}

/* 甘味処1店舗目写真  */
.food-ds .food-shop .food-shops:nth-child(1) span {
  background-image: url("../../top/img/food-ds-imokoro.jpg");
}

/* 甘味処2店舗目写真 */
.food-ds .food-shop .food-shops:nth-child(2) span {
  background-image: url("../../top/img/food-ds-tukiusagi.png");
}

/* 居酒屋1店舗目写真  */
.food-iz .food-shop .food-shops:nth-child(1) span {
  background-image: url("../../top/img/food-iz-nakajima.jpg");
}

/* 居酒屋2店舗目 */
.food-iz .food-shop .food-shops:nth-child(2) span {
  background-image: url("../../top/img/food-iz-yosida.jpg");
}

/*店舗名*/
.food-yo h3,
.food-wa h3,
.food-ds h3,
.food-iz h3 {
  display: block;
  color: #323844;
}

/*店舗ジャンル*/
.food-yo .food-category,
.food-wa .food-category,
.food-ds .food-category,
.food-iz .food-category {
  font-weight: 600;
  color: #323844;
}

/*店舗紹介文設定*/
.food-yo p,
.food-wa p,
.food-ds p,
.food-iz p {
  display: block;
  margin: 0 auto;
  width: 210px;
  font-size: 12px;
  font-weight: 500;
  color: #323844;
}

.pasta {
  letter-spacing: -0.2px;
}

/*★★★★★ここからエリアガイド★★★★★*/

.c-bnr {
  background: url("../../top/img/area-guide.png") no-repeat center center / cover;
  background-size: 80%;
  display: inline-block;
  width: 90%;
  height: 400px;
  box-shadow: 0px, 0px, 5px, rgb(0, 0, 0);
}

.c-bnr,
.c-bnr::before,
.c-bnr::after {
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.c-bnr {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.c-bnr::before,
.c-bnr::after {
  display: block;
  opacity: 0;
  position: absolute;
}

.c-bnr::before {
  background: inherit;
  content: "";
  filter: blur(3px);
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -1;
  transition-duration: 0.4s;
}

/*エリアガイドの上に表示するテキストなど*/
.c-bnr::after {
  color: #d25729;
  content: "Click here!";
  font-size: 22px;
  font-weight: bold;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-duration: 0.2s;
}

.c-bnr:hover::after {
  transition-delay: 0.5s;
}

.c-bnr:hover::before,
.c-bnr:hover::after {
  opacity: 1;
}

/*★★★★★ここからアクセス★★★★★*/

.access-section {
  text-align: center;
  padding: 40px 20px;
}

.access-info {
  margin-top: 50px;
  margin-bottom: 30px;
  margin-left: auto;
  /* ← これと… */
  margin-right: auto;
  font-size: 16px;
  color: #323844;
  text-align: left;
  max-width: 590px;
}

.access-info p {
  margin-bottom: 1.2em;
}

.map-area iframe {
  width: 90%;
  max-width: 600px;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
}

.form-btn button:hover {
  opacity: 0.8;
}

/*★★★★★ここからお知らせ★★★★★*/

.wrapper {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  margin-top: 70px;
}

.backgroundwrap {
  background: url(../img/bgpattern.png) repeat center center;
  background-blend-mode: lighten;
  max-width: 800px;
  margin: 0 auto 80px;
  display: flex;
  /* 子要素が横幅を超えたら折り返す */
  flex-wrap: wrap;
  /* 子要素を中央寄せにする */
  justify-content: center;
  position: relative;
  margin-bottom: 0;
}

.backgroundwrap::before,
.backgroundwrap::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  top: 0;
  bottom: 0;
  background-color: #d25729;
}

.backgroundwrap::before {
  left: -100px;
}

.backgroundwrap::after {
  right: -100px;
}

.newswrap {
  background-color: #fffff0;
  padding: 20px;
  margin: 20px;
  width: 340px;
  height: 374px;

  /* 影をつけて台紙が浮いているような表現を追加（オプション） */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.newswrap a {
  display: block;
  text-align: center;
  color: #323844;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
}

.newsimg {
  width: 300px;
  height: 230px;
  margin-bottom: 10px;
  display: block;
  /* 中央寄せのためにブロック要素化 */
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

.newstitle {
  font-size: 18px;
  /* h2タグのデフォルトマージンをリセット */
  margin: 0;
  padding-top: 5px;
  border-top: 1px solid #eee;
}

/* ホバー時の装飾 */
.newswrap:hover {
  /* 影を濃くする */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  /* 少し上に移動させる */
  transform: translateY(-3px);
  /* アニメーションを追加 */
  transition: all 0.3s ease;
}

/*★★★★★ここからお問い合わせボタン★★★★★*/

.button-22 a {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #323844;
  font-weight: 600;
  outline: 2px solid #323844;
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 350px;
  text-align: center;
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  z-index: 9;
  transition: all 0.3s;
  margin-bottom: 80px;
}

.button-22 a::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: -999;
  transition: all 0.3s ease;
}

.button-22 a:hover::before {
  top: 0;
  left: 0;
  transition: all 0.3s;
}

/*★★★★★ここからフッター★★★★★*/

/*ここから要素の設定*/
#footer {
  background-color: #323844;
  height: 400px;
  text-align: center;
  position: relative;
}

/*フッターのあしらい設定*/
.footer-asirai1 {
  position: absolute;
  top: 20px;
  background-image: url(../../img/asirai1.png);
  background-repeat: repeat-x;
  display: block;
  width: 100%;
  height: 50px;
  animation: scroll-x 30s linear infinite;
  /*横方向に動かすためのアニメーション*/
}

@keyframes scroll-x {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 1200px 0;
  }
}

/*フッターメニューのフォント設定*/
.footer-menu p {
  font-size: 18px;
  font-weight: 400;
}

#footer .logo p,
#footer .footer-menu p {
  color: #fff;
  text-align: center;
}

#footer .logo p,
.footer-menu p {
  color: #fff;
  margin-top: 10px;
}

#footer .logo img {
  max-width: 120px;
  transition: opacity 0.3s ease;
}

.footer-menu li a {
  width: 170px;
  /*リンクテキストの下線を非表示*/
  text-decoration: none;
  position: relative;
  display: block;
  text-align: center;
}

/* ホバー：下線の基本設定 */
.footer-menu li a::after {
  position: absolute;
  content: "";
  width: 70%;
  left: 15%;
  height: 2px;
  background: #fff;
  bottom: -2.5px;
  transform: scale(0, 1);
  transform-origin: right top;
  /* 右から始まる */
  transition: transform 0.3s;
}

/* ホバー後：下線が左から右へ伸びるアニメーション */
.footer-menu li a:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
  /* 左へ向かって伸長 */
}

#footer small,
#footer .copy-text {
  font-size: 12px;
  color: #fff;
  font-weight: 300;
  margin-top: 80px;
}

/* ★★★ここからフッター構成の設定★★★ */

/*ロゴとフッターメニューの横並び設定*/
.footer-column {
  display: grid;
  width: 45%;
  /*ここでgrid幅を変える*/
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  column-gap: 3cap;
  /*ここでロゴとフッターメニューの間隔設定*/
  padding-top: 80px;
}

/* ロゴセットを囲むラッパーの設定 */
.logo-wrapper {
  width: 300px;
  justify-self: center;
  /* 水平方向中央揃え */
  align-self: center;
  /* 垂直方向中央揃え */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ロゴ空間設定*/
#footer .logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*フッターメニューの並べ方設定*/
.footer-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  /*ここでフッターメニュー子要素の縦方向間隔変更*/
  column-gap: 0cap;
  /*ここでフッターメニュー子要素の横方向間隔変更*/
  justify-content: center;
  width: 300px;
}

/*★★★★★ここからスマホサイズ設定★★★★★*/
@media screen and (max-width: 959px) {

  /*PC限定の要素をモバイル版では表示しない設定*/
  .pc {
    display: none;
  }

  html,
  body {
    height: 7450px;
    width: 100%;
  }

  main {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  h2,
  .food-btn-wrapper p {
    position: relative;
    z-index: 1;
  }

  /*★★★★★ モバイル版タイトルの設定 ★★★★★*/
  .title {
    font-size: 35px;
  }

  section {
    text-align: center;
  }

  /*★★★★★ここからスマホ版ヘッダー★★★★★*/

  #header {
    background-color: rgba(255, 255, 255, 0);
    height: 0;
  }

  /*モバイル版メニューボタン*/
  .openbtn {
    position: fixed;
    top: 20px;
    left: 40px;
    background: #d25729;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    z-index: 9999;
  }

  /*ボタン内側*/
  .openbtn span {
    display: inline-block;
    transition: all 0.4s;
    /*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
    background: #fff;
    width: 45%;
  }

  .openbtn span:nth-of-type(1) {
    top: 13px;
  }

  .openbtn span:nth-of-type(2) {
    top: 19px;
  }

  .openbtn span:nth-of-type(3) {
    top: 25px;
  }

  .openbtn span:nth-of-type(3)::after {
    content: "Menu";
    /*3つ目の要素のafterにMenu表示を指定*/
    position: absolute;
    top: 5px;
    left: -2px;
    color: #fff;
    font-size: 0.6rem;
    text-transform: uppercase;
  }

  /*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
  .openbtn.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }

  .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }

  .openbtn.active span:nth-of-type(3) {
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }

  .openbtn.active span:nth-of-type(3)::after {
    content: "Close";
    /*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
    top: 5px;
    left: 4px;
  }

  /*テキスト設定*/
  .mobile-menu p {
    color: #323844;
    font-size: 16px;
  }

  .mobile-menu span {
    color: #b3b3b3;
    font-size: 14px;
  }

  /*モバイルメニューのアイコン設定*/
  .mobile-menu .icon {
    width: 35px;
    height: 35px;
    background-image: url(../../img/header-icon0-top.png);
    background-size: contain;
  }

  .mobile-menu li:nth-child(2) .icon {
    background-image: url(../../img/header-icon1-story.png);
  }

  .mobile-menu li:nth-child(3) .icon {
    background-image: url(../../img/header-icon2-food.png);
  }

  .mobile-menu li:nth-child(4) .icon {
    background-image: url(../../img/header-icon4-map.png);
  }

  .mobile-menu li:nth-child(5) .icon {
    background-image: url(../../img/header-icon3-access.png);
  }

  .mobile-menu li:nth-child(6) .icon {
    background-image: url(../../img/header-icon5-news.png);
  }

  .mobile-menu li:nth-child(7) .icon {
    background-image: url(../../img/header-icon6-contact.png);
    background-size: 90%;
  }

  /*タップした時のメニュー画面*/
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 370px;
    height: 100vh;
    background: #fff;
    transform: translateX(-100%);
    transition: all 0.4s;
    z-index: 9990;

    /* 中身のレイアウト */
    padding-top: 80px;
    text-align: center;
    overflow-y: auto;
  }

  /* activeクラスが付与されたら画面内に表示 */
  .mobile-menu.active {
    transform: translateX(0);
  }

  /*各メニューボタンの幅*/
  .mobile-menu li {
    height: 80px;
    display: flex;
    align-items: center;
    margin-left: 30px;
    position: relative;
  }

  .menu-bar {
    border-top: solid 1px #ccc;
  }

  .menu-label {
    display: flex;
    align-items: center;
    flex-grow: 1;
    cursor: pointer;
    height: 100%;
  }

  .menu-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 20px;
    height: 100%;
  }

  /*モバイルメニューボタン要素内を中央揃え・縦並びに*/
  .mobile-menu a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 20px;
    height: 100%;
    width: 100%;
  }

  /*★★★ここからアコーディオンメニューの設定★★★*/
  /*お食事処一覧タイトル幅*/
  .menu {
    max-width: 400px;
  }

  .menu a {
    display: block;
    text-decoration: none;
  }

  .menu-header {
    display: flex;
    align-items: center;
    width: 92%;
    margin-left: 25px;
  }

  .menu-header label {
    flex-grow: 1;
  }

  /*お食事処一覧の文字設定*/
  label {
    display: block;
    margin: 0 0 4px 0;
    padding: 15px;
    line-height: 1;
    color: #323844;
    cursor: pointer;
    text-align: start;
    font-weight: 500;
    height: 65px;
    align-items: center;
    justify-content: center;
  }

  /* お食事処一覧のアイコン設定 */
  .icon-food {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../../img/header-icon2-food.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  input {
    display: none;
  }

  .menu ul {
    list-style: none;
  }

  .menu li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }

  /*アコーディオンメニューのボタン設定*/
  #menu_bar01:checked~#links01 li {
    min-width: 150px;
    height: 100px;
    opacity: 1;
    padding: 0;
    margin: 0;
  }

  /*アコーディオンメニュー並び方設定*/
  #links01 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    column-gap: 0px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 240px;
  }

  /*アコーディオンメニュー和食写真*/
  #links01 a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
    display: block;
    text-align: center;
    width: 150px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../../img/sample.png);
    background-position: center;
    border-radius: 10px;
    margin: 15px;
  }

  /*アコーディオンメニュー洋食写真*/
  #links01 li:nth-child(2) a {
    background-image: url(../../img/sample2.png);
    background-position: center;
  }

  /*アコーディオンメニュー甘味処写真*/
  #links01 li:nth-child(3) a {
    background-image: url(../../img/sample3.png);
    background-position: center;
  }

  /*アコーディオンメニュー居酒屋写真*/
  #links01 li:nth-child(4) a {
    background-image: url(../../img/sample4.png);
  }

  /*★★★★★★★ここからスマホ版ファーストビュー★★★★★★★★*/

  /*ファーストビューの写真設定*/
  #first-view {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-image: url(../../top/img/top-image.jpg);
    background-position: center;
    background-size: cover;
    background-size: 330%;
    top: 0;
    left: 0;
  }

  /*ファーストビューのタイトルテキスト設定*/
  .first-view-title {
    font-size: 68px;
    left: 70%;
    z-index: 2;
  }

  /*赤の下線設定↓*/
  .first-view-solid {
    left: 73%;
    z-index: 1;
  }

  /*★★★★★ここからスマホ版結乃町物語★★★★★*/

  #story {
    height: 850px;
  }

  /*結乃町・画像位置指定*/
  .img-story {
    width: 85%;
    height: 300px;
    top: 0%;
    right: 5%;
    background-size: cover;
  }

  /*テキストボックス・位置指定*/
  .story-text-box {
    width: 280px;
    height: 450px;
    top: 220px;
    left: 5%;
  }

  /*テキストh3*/
  .story-text-box h3 {
    font-size: 25px;
  }

  /*テキストp*/
  .story-text-box .story-text {
    width: 240px;
    font-size: 15px;
    font-weight: 600;
  }

  .story-text-box .story-text p {
    font-weight: 500;
  }

  /*★★★結乃町ボタン★★★*/
  /*位置・大きさ指定*/
  .sample_btn {
    top: 660px;
    left: 15%;
    margin-bottom: 0;
  }

  /*★★★★★ここからスマホ版お食事処一覧★★★★★*/

  /*ボタンのマージン↓ 消すな*/
  .food-btn-wrapper {
    width: 150px;
    height: 300px;
    border-radius: 25px;
    transition-duration: 0.4s;
    box-shadow: 1px 3px 5px rgb(65, 17, 0, 0.8),
      1px 3px 10px rgb(65, 17, 0, 0.8);
  }

  /*ボタンのgrid設定*/
  .food-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px 15px;
    /* 縦20px 横15px の隙間 */
    max-width: 600px;
    margin-bottom: 50px;
    margin: 0 auto;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 30px;
    justify-content: center;
    align-items: center;
  }

  /* PC版の width: 800px や margin などを打ち消す */
  .food-wa,
  .food-yo,
  .food-ds,
  .food-iz {
    /* 幅を自動（親に合わせる）に */
    width: auto;
    margin: 0;
    display: block;
  }

  /*★★★★★ここからスマホ版エリアガイド★★★★★*/

  .c-bnr {
    background: url("../../top/img/area-guide.png") no-repeat center center / cover;
    background-size: 80%;
    background-size: cover;
    display: inline-block;
    width: 300px;
    height: 300px;
    box-shadow: 0px, 0px, 5px, rgb(0, 0, 0);
  }

  /*★★★★★ここからスマホ版アクセス★★★★★*/
  .access-info {
    max-width: 340px;
    margin-top: 20px;
  }

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

  /*ここからスマホ版お知らせ*/

  .wrapper {
    margin-top: 10px;
  }

  .float2 {
    margin: 0;
  }

  /*★★★★★ここからスマホ版フッター★★★★★*/

  /*ここから要素の設定*/
  #footer {
    width: 100%;
    height: 500px;
  }

  /*ロゴの大きさ*/
  #footer .logo img {
    max-width: 80px;
  }

  /*フッターメニューのテキストサイズ*/
  .footer-menu p {
    font-size: 14px;
    font-weight: 400;
    padding-top: 0;
  }

  /* ★ここからフッター構成の設定★ */

  .footer-menu p {
    margin: 0;
    justify-self: center;
    align-self: center;
  }

  /*コピーライト設定*/
  #footer small,
  #footer .copy-text {
    font-size: 10px;
    margin-top: 70px;
  }

  /*フッターメニューの並べ方設定*/
  #footer .footer-menu {
    gap: 30px 0px;
    /*ここでフッターメニュー子要素の縦方向間隔変更*/
    justify-content: center;
    width: 300px;
    margin-top: 50px;
    margin: 0 auto;
    margin-top: 50px;
  }

  /*ロゴとフッターメニューの横並び設定*/
  .footer-column {
    display: flex;
    flex-direction: column;
    width: 375px;
    /*↑ここでgrid幅を変える*/
    margin: 0 auto;
    padding-top: 75px;
  }
}