@charset "utf-8";

/* -----共通部分----- */

html {
  scroll-behavior: smooth;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", serif;
  font-size: 100%;
}

body {
  font-size: 1em;
  margin: 0;
  overflow-x: hidden;
}

.container {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}

.box {
  color: #203A72;
  padding: 40px;
  text-align: center;
  scroll-snap-align: start;
  height: 100vh;
  overflow: hidden;
}

h2 {
  font-family: "Baloo Bhaijaan", sans-serif;
  letter-spacing: 0.7em;

}

.breakfast p {
  color: #203A72;
  text-align: center;
  margin-top: 1em;
  font-size: 1.1em;
}

/* ハンバーガーメニュー */
/* ボタン */
.menu-btn {
  position: fixed;
  top: 10px;
  right: 30px;
  display: flex;
  height: 65px;
  width: 65px;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  content: '';
  display: block;
  height: 3px;
  width: 55px;
  background-color: #203A72;
  position: absolute;
  transition: all 0.5s;
}

.menu-btn span::before {
  bottom: 15px;
}

.menu-btn span::after {
  top: 15px;
}

/* クリックされた状態 */
#menu-btn-check:checked~.menu-btn span {
  background-color: rgba(255, 255, 255, 0);
  /*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked~.menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
  background-color: #fff;
}

#menu-btn-check:checked~.menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
  background-color: #fff;
}

#menu-btn-check {
  display: none;
}

.nmenu-content {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0px;
  right: -100%;
  z-index: 90;
  background-color: #203a72;
  transition: all 0.7s;
}


/* ロゴ */
.nmenu-content li:first-child {
  max-width: 100px;
  width: 17%;
  margin: 0 auto;
  border-bottom: none;
}

.nmenu-content li:first-child a::before {
  border: none;
}

.nmenu-content ul {
  width: 600px;
  padding-top: 10px;
  margin: 0 auto;
}

.nmenu-content li {
  padding: 25px 0 5px;
  border-bottom: 1px solid #fff;
  list-style-type: none;
}

.nmenu-content ul li a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 0 15px;
  position: relative;
  font-size: 2em;
  letter-spacing: 0.3em;
}

.nmenu-content ul li a::before {
  content: "";
  width: 17px;
  height: 17px;
  border-top: solid 5px #ffffff;
  border-right: solid 5px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 20px;
}

.nav-menu li:nth-child(2) {
  padding-top: 0;
}

.pdf-menu {
  display: none;
  color: #fff;
  width: 600px;
  padding: 10px 20px;
  padding-left: 102px;
  margin: 0 auto;
  font-size: 1.7em;
}

.pdf-text {
  text-align: center;
  margin-left: 15px;
}

.pdf-text a {
  color: #fff;
  font-size: 0.9em;
}

/* snsアイコン */
.sns {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 5px;
}

.sns a {
  width: 40px;
}

.youtube {
  width: 50px;
  margin-top: 6px;
}

.sns img {
  width: 100%;
}

/* オンラインストア */
.store {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  color: #fff;
}

.store a {
  display: block;
  margin-top: 10px;
}

.base img {
  width: 60px;
}


/* クリックしたらメニュー全体を右へ */
#menu-btn-check:checked~.nmenu-content {
  right: 0;
  /*メニューを画面内へ*/
}

.hide {
  right: -100px;
}


/* -----ここまで共通部分----- */

/* ↓トップページ */
/* -----動画----- */
.box0 {
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

#youtube-area {
  width: 100vw;
  height: 100vh;
  position: relative;
  /*文字に対する指定なので入れなくてもよい↓*/
  display: flex;
  align-items: center;
  justify-content: center;
}

#youtube-area video {
  width: 1920px;
  height: 1080px;
}


/* -----ここまで動画----- */


/* -----行く------ */
.box1 {
  background: #EBD9D9;
  height: 100%;
}

.headimg {
  display: block;
  margin: -20px auto;
}

.headimg img {
  width: 150px;
}

.adress {
  margin-top: 20px;
  margin-bottom: 2%;
}

.adress p {
  margin: 0;
}

.adress a {
  color: #203A72;
}

.map-info {
  display: flex;
  justify-content: center;
  margin-top: 5%;
}

.map-info a {
  color: #203A72;
  margin-top: 25px;
}

.map {
  width: 30%;
  min-width: 400px;
}

.map-content {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  margin-bottom: 5%;
}

.map-content img {
  width: 80%;
  margin: 0 auto;
}



/* インフォ */
.info {
  width: 450px;
}

.info ul {
  list-style-type: none;
  background-image: url(../images/maruo.svg);
  background-repeat: no-repeat;
  background-position: bottom 10px right 30px;
  background-size: 20%;
}

.info li {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #203A72;
  padding: 2% 0;
}

.info h3 {
  margin-left: 35px;
  width: 10em;
  text-align: left;
}

.info li p {
  font-size: 0.95em;
  width: calc(100% - 10em);
  text-align: left;
  white-space: nowrap;
}

.info li:last-child {
  border-bottom: none;

}

/* アクセス */
.info-access h3 {
  margin-top: auto;
  margin-bottom: auto;
}

.info-access {
  display: block;
  position: relative;
  width: 95%;
  height: 100%;
}

.info-access::before {
  display: block;
  content: "";
  background-image: url(../images/access.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 6%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 5px;
}

/* 時間 */
.info-time h3 {
  margin-top: auto;
  margin-bottom: auto;
}

.info-time {
  display: block;
  position: relative;
  width: 95%;
  height: 100%;
}

.info-time::before {
  display: block;
  content: "";
  background-image: url(../images/tokei.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 6%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 4px;
}

/* 支払い方法 */
.info-money h3 {
  margin-top: auto;
  margin-bottom: auto;
}

.info-money {
  display: block;
  position: relative;
  width: 95%;
  height: 100%;
}

.info-money::before {
  display: block;
  content: "";
  background-image: url(../images/saihu.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 6%;
  height: 100%;
  position: absolute;
  top: 20px;
  left: 5px;
}

/* テラス席 */
.info-chair p {
  margin: 7% 35px;
}

/* -----ここまで「行く」----- */

/* -----「飲む・食べる」----- */
.box2 {
  background: #F9F36A;
}

.box2 h3 {
  font-size: 1.2em;
  letter-spacing: 0.2em;
}

.headimg2 {
  width: 100%;
  margin: 0 auto;
}

.headimg2 img {
  width: 90px;
  margin-bottom: 30px;
}

.drinkwrap {
  height: 80vh;
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.drink-contents {
  border-right: 1px solid #203A72;
  display: grid;
  height: 40vh;
  min-height: 250px;
  border-bottom: none;
  grid-template-columns: 250px;
  grid-template-rows: 80px 1fr auto;
  width: 500px;
  justify-content: center;
  margin-top: 20px;
}

.drink-contents:last-child {
  border-right: none;
}

.drink-contents h3 {
  margin-bottom: -10px;
}

.drink-img {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 5%;
  height: 260px;
}

.drink-img img {
  width: 13vw;
  min-width: 200px;
  height: auto;
  margin-left: 15px;
  margin-top: 20%;
}

/* コーヒー */
.coffee.drink-contents h3 {
  margin-bottom: -10px;
  margin-left: 6%;
}


/* アルコール */
.alcohol.drink-contents h3 {
  margin-bottom: -10px;
  margin-left: 6%;
}

.drink-alcohol img {
  width: 5vw;
  min-width: 90px;
  margin-top: 0;
}

/* ボタン */
.drink-btn {
  position: relative;
  display: inline-block;
  text-align: center;
  background: transparent;
  text-decoration: none;
  margin-bottom: 5%;
  /*アニメーションの指定*/
  transition: all 0.2s ease;
}

.drink-btn:hover {
  border-color: transparent;
}

.drink-btn span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 38px 0;
  width: 100px;
  color: #203A72;
  border-radius: 50%;
  box-shadow: 5px 5px 5px #98984dc5, inset 5px 5px 6px #fcffdc,
    inset -2px -2px 6px #9e9e43c2;
  /*アニメーションの指定*/
  transition: all 0.3s ease;
}

.drink-btn:hover span {
  border-radius: 50%;
  background-color: #ffffff00;
  color: #203A72;
  box-shadow: -5px -5px 5px #98984dc5, inset -5px -5px 6px #fcffdc,
    inset 2px 2px 6px #9e9e43c2;
  transform: translateY(4px);
}

/* -----ここまで「飲む・食べる」----- */

/* -----ここから「和む」------ */

.box3 {
  background: #FBF4D4;
  height: 100%;
}

.headimg3 img {
  width: 100px;
  margin-bottom: 30px;
}

.kumatitle {
  margin: 0 auto;
  text-align: center;
}

.km-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.kumachoco {
  width: 50%;
  margin: 10px auto 0;
  margin-top: 60px;
}

.kumachoco img {
  width: 50%;
  min-width: 290px;
  margin-left: 10%;
}

.kumatitle span {
  padding-bottom: 5px;

}

.kumabunsyou {
  width: 100%;
  margin: 0 auto;
  font-size: 1.2em;
}

/*------ スライダーの横幅 ------*/
.slider {
  width: 70%;
  min-width: 250px;
  margin: 10px auto;
}

/* スライダー画像 */
.slider img {
  width: 100%;
}

/* 高さ調整 */
.slider .slick-slide {
  height: auto !important;
}

/* 矢印 */
.slider .slick-next {
  right: 0 !important;
}

.slider .slick-prev {
  left: 0 !important;
}

.slick-prev:before,
.slick-next:before {
  color: gray;
  margin-left: 5px;
}

.slider .slick-arrow {
  z-index: 2 !important;
}

.slider .slick-arrow:before {
  font-size: 30px !important;
}

/* -----ここまで「和む」----- */

/* -----ここから「買う」----- */

.box4 {
  background: #9AD0E2;
}

.box4 h3 {
  font-size: 1.2em;
  letter-spacing: 0.2em;
}

.headimg4 {
  width: 100%;
  margin: 0 auto;
}

.headimg4 img {
  width: 70px;
  margin-bottom: 5px;
}

.itemwrap {
  height: 80vh;
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}

.itwidth {
  width: 30%;
  max-width: 400px;
}

.item-contents {
  border-right: 1px solid #203A72;
  display: grid;
  height: 40vh;
  min-height: 250px;
  margin: 20px 0;
  border-bottom: none;
  grid-template-columns: 1fr;
  grid-template-rows: 7em 1fr auto;
}

.item-img {
  grid-column: 1;
  grid-row: 2;

}

.item-img img {
  width: 65%;
  max-width: 200px;
}


/* ドリップ */
.dripbag.item-contents {
  justify-content: center;
  margin: 25px 0;
}

.dripimg {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 2%;
}

/* クッキー */

.cookie {
  margin-top: 20px;
}

.cookie.item-contents {
  justify-content: center;
}

.ckimg img {
  width: 50%;
}

/* グッズ */
.goods.item-contents {
  border-right: none;
  justify-content: center;
  margin-top: 20px;
}

/* ボタン */
.item-btn {
  position: relative;
  display: inline-block;
  text-align: center;
  background: transparent;
  text-decoration: none;
  margin-bottom: 5%;
  /*アニメーションの指定*/
  transition: all 0.2s ease;
}

.item-btn:hover {
  border-color: transparent;
}

.item-btn span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 38px 0;
  width: 100px;
  color: #203A72;
  border-radius: 50%;
  box-shadow: 5px 5px 5px #4d7a98c5, inset 5px 5px 6px #dcf4ff,
    inset -2px -2px 6px #43899ec2;
  /*アニメーションの指定*/
  transition: all 0.3s ease;
}

.item-btn:hover span {
  border-radius: 50%;
  background-color: #ffffff00;
  color: #203A72;
  box-shadow: -5px -5px 5px #4d7a98c5, inset -5px -5px 6px #dcf4ff,
    inset 2px 2px 6px #43899ec2;
  transform: translateY(4px);
}

/* -----ここまで「買う」----- */


/* -----ここから「働く」----- */
.box5 {
  position: relative;
  background: #DFDFDF;
  background-image: url(../images/recruit.png);
  background-repeat: no-repeat;
  background-position: top 3% center;
  background-size: 150px;
  overflow: hidden;
}



/* ナマケモノ */
.namakemono {
  position: relative;
  display: block;
  width: 100vw;
  height: 150px;
  overflow: hidden;
  top: -40px;
}

.namakemono img {
  position: absolute;
  top: -7px;
  right: 125px;
  width: 10%;
  min-width: 150px;
  animation: namakemono 18s linear infinite;
  transform-origin: center top 0;
}

@keyframes namakemono {
  0% {
    transform: rotate(0);
  }

  32.5% {
    transform: rotate(-25deg);
  }

  65% {
    transform: rotate(0);
  }

  82.5% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(0);
  }
}


/* アルパカとsnsアニメーション */
.recruit-contents {
  position: relative;
  text-align: center;
  width: 100%;
  height: 40vh;
}

.sns-animation {
  position: absolute;
  left: -50px;
  height: 100%;
  width: 40%;
}

/* アルパカ */
.arupaka img {
  display: block;
  margin: 0 auto;
  width: 18%;
  min-width: 75px;
  margin-bottom: -7px;
  z-index: 15;
}

/* まる画像 */
.kurukuru-img {
  position: relative;
  display: block;
  margin: -25px auto 0;
  width: 23%;
  height: 120px;
  min-height: 120px;
  min-width: 120px;
  cursor: pointer;
  z-index: 80;
}

.kurukuru-img img {
  width: 100%;
  animation: rotate-anime 11s linear infinite;

}

@keyframes rotate-anime {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 青い鳥 */
.bird {
  text-align: left;
  margin: 0 auto -20px;
  width: 15vw;
}

.bird img {
  width: 30%;
  min-width: 60px;
  animation: aotori 4s linear infinite;
  transform-origin: center bottom 0;
}

@keyframes aotori {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(65deg);
  }

  100% {
    transform: rotate(0);
  }
}

/* テキスト */
.recruit-tel {
  display: block;
  color: #203A72;
  margin-top: 15px;
}

.text {
  font-size: 1.4em;
}

/* 梟 */
.owl {
  position: absolute;
  right: -30px;
  top: 130px;
  height: 100%;
  width: 40%;
}

.owl-img img {
  display: block;
  margin: 0 auto;
  width: 45%;
  min-width: 150px;
  margin-bottom: -7px;
  animation: owl 1s linear infinite;
}

@keyframes owl {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(0);
  }
}

/* 下のアニメーションたち */
.animation {
  position: relative;
  height: 50vh;
  width: 100vw;
}

.animation-contents {
  display: flex;
  height: 100%;
}

.animation-left {
  position: relative;
  margin-top: -50px;
  width: 50%;
  height: 100%;
}


/* 幻のぞう */
.elephant img {
  position: absolute;
  width: 300px;
  bottom: 50px;
  left: 0;
  z-index: 1;
}

/* 頭 */
.elephant::after {
  content: "";
  background-image: url(../images/recruit/elephant-head.png);
  width: 250px;
  height: 250px;
  position: absolute;
  background-size: contain;
  bottom: 100px;
  left: 150px;
  animation: elephant1 4s linear infinite;
  z-index: 2;
}

@keyframes elephant1 {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-20deg);
  }

  100% {
    transform: rotate(0);
  }
}

/* 頭の影 */
.elephant::before {
  content: "";
  background-image: url(../images/recruit/elephant-headshadow.png);
  width: 600px;
  height: 600px;
  position: absolute;
  background-size: contain;
  bottom: -80px;
  left: -70px;
  animation: elephant2 4s linear infinite;
}

@keyframes elephant2 {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(-19deg);
  }

  100% {
    transform: rotate(-5deg);
  }

}

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

  .elephant img,
  .elephant::after,
  .elephant::before {
    bottom: -500px;
  }
}

/* くま */
.kuma img {
  transform: rotateZ(-15deg);
  position: absolute;
  right: 295px;
  bottom: 50px;
  width: 20%;
  min-width: 130px;
}

/* チーター */
.cheetah img {
  position: absolute;
  width: 23%;
  min-width: 150px;
  bottom: 0px;
  right: 450px;
  animation: cheetah-anime 2s linear infinite;
  transform-origin: right center 0;
}

@keyframes cheetah-anime {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(18deg);
  }

  100% {
    transform: rotate(0);
  }
}

/* 似顔絵イラスト */
.owner-animation {
  position: relative;
  margin: 0;
  width: 50vw;
  height: 38vh;
}

.owner {
  display: block;
  width: 50vw;
  height: 38vh;
}

.owner img {
  position: absolute;
  width: 33%;
  min-width: 300px;
  right: 80px;
  bottom: -35px;
  z-index: 9;
}

/* 似顔絵イラストの影（うさぎを挟むため） */
.owner::after {
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url(../images/owner-shadow.png);
  background-size: contain;
  background-position: right bottom;
  right: 70px;
  bottom: -10px;
  width: 350px;
  height: 350px;
  z-index: 4;
}


/* うさぎ */
.usa img {
  position: absolute;
  right: 143px;
  bottom: 167px;
  width: 8%;
  min-width: 60px;
  z-index: 5;
  animation: usa-anime 1.8s linear infinite;
}

@keyframes usa-anime {
  0% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(-65px);
  }

  100% {
    transform: translateY(-20px);
  }
}

/* 草とキツネ */
.kusa-animation {
  display: block;
  margin-top: 0;
  position: absolute;
  bottom: 40px;
  width: 1920px;
  z-index: 12;
  text-align: center;
}

/* キツネ */
.fox {
  display: block;
  position: relative;
  width: 100vw;
  height: 37vh;
  right: 0;
  margin: 0;
  padding: 0;
}

.fox img {
  position: absolute;
  right: 0;
  bottom: 55px;
  width: 12%;
  min-width: 130px;
  animation: fox-anime 4s linear infinite;
}

@keyframes fox-anime {
  0% {
    transform: translateX(0)scale(1, 1);
  }

  50% {
    transform: translateX(-98vw)scale(1, 1);
  }

  52% {
    transform: translateX(-98vw) scale(-1, 1);
  }

  98% {
    transform: translateX(0) scale(-1, 1);
  }

  100% {
    transform: translateX(0) scale(1, 1);
  }
}

/* ワニ */
.crocodile {
  position: absolute;
  width: 150px;
  height: 200px;
  bottom: 100px;
  left: 42vw;
  background-image: none;
  z-index: 80;
}

.crocodile:hover {
  background-image: url(../images/recruit/crocodile.png);
  background-size: contain;
}

.crocodile:hover::after {
  background-image: url(../images/recruit/crocodile-serif.gif);
  background-size: contain;

}

.crocodile::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 175px;
  left: 30px;
}

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

  .crocodile,
  .crocodile::after {
    bottom: -300px;
  }
}


/* 草 */
.kusa {
  position: absolute;
  bottom: 0;
  left: -50px;
  width: 100%;
  animation: translate-kusa 6s linear infinite;
}

@keyframes translate-kusa {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(20px);
  }

  100% {
    transform: translateX(0);
  }
}


.kusa2 {
  position: absolute;
  bottom: 0;
  left: -50px;
  width: 100%;
  animation: translate-kusa2 5s linear infinite;
}

@keyframes translate-kusa2 {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(0);
  }
}


.kusa3 {
  position: absolute;
  bottom: 0;
  right: 50px;
  width: 100%;
  animation: translate-kusa3 6s linear infinite;
}


/* topボタン */
.top-btn {
  background: #203a72c1;
  position: absolute;
  width: 80px;
  height: 80px;
  bottom: 0;
  right: 0;
  z-index: 89;
}

.top-btn a {
  display: block;
  margin-top: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 2em;
}

/* ----- ここまで「働く」----- */
/* ↑トップページ */

/* ↓メニュー */
/* ----- メニュー共通部分 ----- */
.menu-bg {
  background-image: url(../images/bg_washi.png);
  background-repeat: repeat;
  background-size: 800px;

}

.menu {
  text-align: center;
  color: #203A72;
  padding: 0 10px;
  font-family: sans-serif;
  overflow: hidden;
}

.menu h2 {
  margin-top: 50px;
}

/* アコーディオンメニュー */
.accordion {
  margin-top: 10px;
}

.accordion-container {
  width: 740px;
  margin: 0 auto;
}

.accordion-item {
  display: flex;
  flex-direction: column-reverse;
}


.accordion-content {
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: .3s;
}

.accordion-content li {
  list-style-type: none;
  font-size: 1.2em;
  width: 100%;
  text-align: left;
}

.accordion-content.is-open {
  margin: 12px 0;
  line-height: normal;
  height: auto;
  opacity: 1;
  display: flex;
  justify-content: flex-start;
  text-align: left;
  position: relative;
}

.sand-reset.is-open {
  display: block;
}

.sand-df {
  display: flex;
  justify-content: flex-start;
}


.menu-title {
  margin: 50px auto 20px;
  text-align: center;
}

.menu-name {
  width: 29em;
  white-space: nowrap;
  margin-left: 100px;
  line-height: 1.7em;
}

.menu-price {
  width: calc(100% - 29em);
  text-align: left;
  line-height: 1.7em;
}

.accordion-content ul span {
  font-size: 0.8em;
  font-weight: bold;
}



/* アコーディオンボタン */
.accordion-btn {
  white-space: nowrap;
  color: #203A72;
  position: relative;
  cursor: pointer;
  user-select: none;
  width: 250px;
  height: 40px;
  margin: 10px auto 50px;
  border: 1px solid #203A72;
  font-family: "Baloo Bhaijaan", sans-serif;
  overflow: hidden;
}

.accordion-btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /*波紋の形状*/
  background: radial-gradient(circle, #2d276d 10%, transparent 10%) no-repeat 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.3s, opacity 1s;
}

.accordion-btn:active::after {
  transform: scale(0, 0);
  transition: 0s;
  opacity: 0.3;
}

.jsAccordionTitle span {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.jsAccordionTitle span:before {
  content: "READ MORE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
}

.jsAccordionTitle.is-text span:before {
  content: none;
}

.jsAccordionTitle.is-text span:after {
  position: absolute;
  content: "CLOSE";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
}

/* backボタン */
.back-btn {
  position: relative;
  display: inline-block;
  background: transparent;
  text-decoration: none;
  margin: 5% 0 7%;

  /*アニメーションの指定*/
  transition: all 0.2s ease;
}

.back-btn:hover {
  border-color: transparent;
}

.back-btn span {
  display: block;
  background-color: #BBDCE6;
  position: relative;
  z-index: 2;
  padding: 5px 25px;
  color: #203A72;
  border-radius: 20px;
  box-shadow: 0 5px 5px #9797978b;
  /*アニメーションの指定*/
  transition: all 0.3s ease;
}

.back-btn:hover span {
  background-color: #203A72;
  color: #fff;
  transform: translateY(4px);
  box-shadow: none;
}

/* ----- ここからコーヒーメニュー ----- */
.takeout-text {
  margin-top: 70px;
  margin-bottom: -20px;
  font-size: 1em;
}

.coffee-text {
  margin-top: 30px;
  font-size: 1em;
}

#coffee .menu-title h3 {
  margin-bottom: 20px;
}

.coffee-menu {
  line-height: 1.83em;
}

/* ホットコーヒー */
.hotcoffee-title img {
  width: 25%;
}

/* アイスコーヒー */
.icedcoffee-img {
  display: flex;
  justify-content: center;
  gap: 50px;
  width: 100%;
}

.icedcoffee-img img {
  width: 20%;
  min-width: 80px;
}

.icedcoffee-img img:first-child {
  margin-bottom: 40px;
}

.icedcoffee-img img:last-child {
  margin-top: 50px;
}

/* エスプレッソ */
.espresso-title img {
  width: 32%;
}

.espressorate-img {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: -80px;
}

.plus {
  margin-top: 15px;
}

.menu-price span {
  margin-top: 8px;
}

.espresso.menu-price li:last-child {
  color: #fff;
}

/* ミルク */
.milk-title img {
  width: 40%;
  margin-top: -85px;
}

.milk-img {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.milk-img img:first-child {
  margin-top: 0;
  margin-bottom: 15px;
}

.milk-img img:last-child {
  margin-top: 15px;
}

.milk-img img {
  width: 30%;
}

.milk-menu li:first-child {
  margin-top: 28px;
}

.milk-menu {
  line-height: 1.83em;
}


/* その他 */
.other-title img {
  margin-top: -50px;
  width: 35%;
}

.other-img {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-left: -15px;
}

.other-img img {
  width: 20%;
  margin: 0;
}

.other-menu .menu-price {
  line-height: 1.76em;
}

/* ----- ここまでコーヒー ----- */


/* ----- ここからアルコール ----- */
.alcohol-img img {
  width: 13%;
}

.alcohol-img2 {
  position: relative;
  width: 700px;
  height: 300px;
  margin-top: -230px;
}

.alcohol-img2 img:first-child {
  width: 19%;
  height: auto;
  position: absolute;
  left: 170px;
  bottom: 10px;
}

.alcohol-img2 img:last-child {
  position: absolute;
  height: auto;
  width: 17%;
  bottom: -2px;
  right: 150px;
}

.alcohol-img3 {
  position: relative;
  width: 700px;
  height: 500px;
  margin-top: -350px;
}

.alcohol-img3 img:first-child {
  width: 18%;
  height: auto;
  position: absolute;
  left: 240px;
  bottom: 50px;
}

.alcohol-img3 img:last-child {
  position: absolute;
  height: auto;
  width: 15%;
  bottom: 45px;
  right: 220px;
}

/* ----- ここまでアルコール ----- */


/* ----- ここからフード ----- */
.sand h3,
.sweets h3 {
  margin-bottom: 40px;
  margin-top: 40px;
}

/* ライス */
.rice-img {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.rice img {
  width: 40%;
}

.rice h3 {
  margin-bottom: 30px;
}

/* ホットサンド */

.sand-img {
  display: flex;
  justify-content: center;
}

.sand-img img {
  width: 37%;
}

/* スイーツ */
.sweets-content {
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: .3s;
}

.sweets-content li {
  list-style-type: none;
  font-size: 1.2em;
  width: 100%;
  text-align: left;
}

.sweets-content.is-open {
  margin: 12px 0;
  line-height: normal;
  height: auto;
  opacity: 1;
  text-align: left;
  position: relative;
}

.sweets-menu {
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.sweets img {
  width: 50%;
}

.choco-img img,
.cake-img img {
  width: 45%;
  margin: 7% 0;
}

.cake-img {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: -20px;
  height: 250px;
}

.cake-img img:last-child {
  margin-top: 130px;
  height: 140px;
}

.choco-img {
  margin-right: 120px;
  margin-top: -150px;
}

.ice-img {
  height: 370px;
  width: 100%;
  position: relative;
}

.ice-img img {
  width: 20%;
  margin-right: 450px;
}

.ice-img img:first-child {
  margin-left: 100px;
}


.ice-img img:last-child {
  width: 60%;
  position: absolute;
  bottom: 30px;
  left: 150px;
}

/* ----- ここまでフード ----- */


/* ----- ここからドリップバッグ ----- */
.tukurikataimg2 {
  display: none;
}

.dripimage {
  margin-top: 20px;
}

.dripimage img {
  width: 70%;
}

.tukurikataimg {
  margin: 30px 0 20px;
  width: 55%;
}

.tukurikatabox {
  margin-top: 10px;
}

.tukurikata {
  text-align: left;
  width: 80%;
  margin-top: 10px;
}

.tukurikatacenter {
  display: flex;
  justify-content: center;
}

#dripwrap {
  text-align: center;
  color: #203A72;
  padding: 0 10px;
}

#dripwrap h2 {
  margin-top: 50px;
}

.brend {
  letter-spacing: 0.1rem;
  margin: 5% 0;
}

.dripbox {
  border-top: 3px #203A72 solid;
}

.dripbox:last-of-type {
  border-bottom: 3px #203A72 solid;

}


.dripbox p {
  font-size: 0.7em;
}

.dripgazou img {
  width: 85%;
  text-align: center;
}

.dripgazou {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.drip {
  display: flex;
  margin: 10px 15px;
  border-top: 1px #203A72 dotted;
  border-bottom: 1px #203A72 dotted;

}

.driphyou {
  width: 55%;
  margin: 0 auto;
}

.dripnedan {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  width: 100%;
}

.dripg {
  width: 6.7em;
  text-align: right;
  margin-right: 20px;
  white-space: nowrap;
}

.dripkingaku {
  width: 150px;
  text-align: left;
}

.dripnigami {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
  border-top: 1px #203A72 dotted;
  margin-bottom: 10px;
  width: 100%;
}

.nigami {
  width: 6.7em;
  text-align: right;
  margin-right: 15px;
  margin-left: 5px;
  white-space: nowrap;
}

.asiato {
  text-align: left;
  white-space: nowrap;
  width: 150px;
}

.asiato li {
  list-style-type: none;
}

.asiato img {
  width: 120px;
}

.dripsetumei {
  padding-bottom: 10px;
  font-size: x-small;

}

/* ----- ここまでドリップバッグ ----- */



/* ----- ここからクッキー ----- */
.maruo {
  width: 80%;
  margin: 8% auto 3%;
  padding-bottom: 20px;
  border-bottom: 1px dotted #203A72;
}

.maruo img {
  width: 40%;
  margin-bottom: 2%;
}

.maruo-name {
  margin: 0 auto;
  width: 250px;
  height: 40px;
  position: relative;
  font-size: 1.1em;
}

.cookie-name {
  line-height: 1.7em;
}

.maruo-name span,
.cookie-name span {
  font-weight: 600;
}

.maruo-name::before {
  content: url(../images/cookie/osusume.svg);
  position: absolute;
  display: block;
  top: -85px;
  left: -90px;
  width: 200px;
  height: 40px;
}

.maruo-text {
  font-size: 1em;
  margin-top: 15px;
  padding: 0 10px;
}

.cookie-list li {
  list-style-type: none;
}

.cookie-menu {
  width: 80%;
  font-size: 1em;
  margin: 0 auto;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;

}



.cookie-menu:last-child {
  border-bottom: none;
}

.cookie-contents {
  margin: 0 auto;
  width: 100%;
}

.cookie-contents img {
  width: 45%;
  margin-bottom: 10px;
}

.cookie-sigeru img {
  width: 42%;
}

.cookie-kuma img {
  width: 50%;
}

.cookie-itigo img {
  width: 35%;
  margin-bottom: 5%;
}

.cookie-text {
  width: 100%;
  font-size: 0.9em;
  margin-top: 10px;
  text-align: center;
  border-bottom: 2px dotted #203A72;
  padding-bottom: 20px;
}


/* ----- ここまでクッキー ----- */
/* ↑メニュー */


/* .footer{
  background:#333;
  color:#fff;
  padding:40px;
  text-align:center;
} */

.footer a {
  color: #fff;
}

/* -----モバイル版------ */

@media screen and (max-width:768px) {
  h2 {
    font-size: 1.2em;
    letter-spacing: 0.5em;
    height: 5vh;
  }

  .box {
    padding: 30px 10px 0;
  }

  /* ハンバーガーメニュー */
  /* ボタン */
  .menu-btn {
    top: 5px;
    height: 50px;
    width: 50px;
  }

  .menu-btn span,
  .menu-btn span::before,
  .menu-btn span::after {
    width: 40px;
  }

  .menu-btn span::before {
    bottom: 9px;
  }

  .menu-btn span::after {
    top: 9px;
  }

  /* ロゴ */
  .nmenu-content li:first-child {
    width: 90px;
  }

  .nmenu-content ul {
    width: 80%;
  }

  .nmenu-content li {
    margin-top: 5%;
    padding: 0 10px;
  }

  .nmenu-content ul li a {
    padding: 9px 15px 10px 0;
    font-size: 1.2em;
    letter-spacing: 0.2em;
  }

  .nmenu-content ul li a::before {
    width: 10px;
    height: 10px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    top: 16px;
  }

  .pdf-menu {
    padding-left: 70px;
    margin: 0 auto;
    font-size: 1em;
  }

  .sns img {
    width: 80%;
  }

  .base img {
    width: 15%;
  }

  /* 動画 */
  .box0 {
    padding: 0;
  }

  .sp-douga {
    display: block;
  }

  #youtube-area {
    display: none;
  }


  .sp-wrap video {
    display: block;
    width: 100%;
  }

  .sp-wrap img {
    display: block;
    width: 100%;
  }



  /* 行く */
  .box1 {
    background-size: 20%;
    background-position: bottom 11% right 2%;
  }

  .headimg img {
    margin: 10px 0;
    width: 75px;
  }

  .adress {
    margin: 0;
    margin-bottom: 3%;
    font-size: 0.85em;
  }

  .map {
    width: 65%;
    min-width: 350px;
    margin: 5px auto 0;
  }

  .map-content {
    margin-bottom: 0;
  }

  .map-content img {
    width: 70%;
  }

  .map-info {
    flex-direction: column;
  }

  .map-info a {
    font-size: 0.8em;
    margin-top: 5px;
    color: #203A72;
  }

  /* インフォ */
  .info {
    width: 100%;
    max-width: 350px;
    margin: 25px auto 0;
  }

  .info ul {
    font-size: 0.75em;
    padding: 0;
  }

  .info h3 {
    margin-left: 13%;
    font-size: 1.2em;
    width: 9em;

  }

  .info li {
    margin: 0 3%;
    padding: 9px 0;
  }

  .info li:first-child {
    margin-top: -6%;
  }

  .info li:last-child {
    padding: 0;
  }

  .info li p {
    width: calc(100% - 9em);
    font-size: 1em;
  }

  .info li:last-child p {
    margin-top: 23px;
    padding-bottom: 5px;
  }

  .info-access::before {
    left: 6px;
  }

  .info-time::before {
    left: 6px;
  }

  .info-money {
    white-space: nowrap;
  }

  .info-money::before {
    top: 15px;
    left: 6px;
  }

  /* ここまで「行く」 */

  /* 「飲む」 */
  .box2 h3 {
    font-size: 0.9em;
  }

  .headimg2 img {
    width: 55px;
    margin: 0;
    margin-bottom: 5px;
  }

  .drinkwrap {
    margin: 0 auto;
    display: block;
    width: 350px;
  }

  .drink-contents {
    border-bottom: 1px solid #203A72;
    border-right: none;
    min-height: 0;
    height: 140px;
    width: auto;
    margin: 30px 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2.5em auto;
  }

  .drink-contents:last-child {
    border-bottom: none;
  }

  .drink-img {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .drink-img img {
    margin: 10px 0 0;
    width: 120px;
    min-width: 0;
  }

  .drink-alcohol img {
    margin: -20px 0 0;
    width: 55px;
    min-width: 0;
  }

  .drink-food img {
    width: 130px;
  }

  .drink-btn span {
    padding: 23px 0;
    width: 70px;
    box-shadow: 3px 3px 4px #98984dc5, inset 3px 3px 5px #fcffdc,
      inset -1px -1px 4px #9e9e43c2;
  }


  .drink-btn:hover span {
    color: #203A72;
    box-shadow: -3px -3px 4px #98984dc5, inset -3px -3px 5px #fcffdc,
      inset 1px 1px 4px #9e9e43c2;
  }


  /* ここまで「飲む」 */


  /* 和む */
  .headimg3 img {
    width: 45px;
    margin: 0;
    margin-bottom: 5px;
  }

  .kumachoco {
    margin: 0 auto;
    order: 1;
  }

  .kumachoco img {
    width: 150px;
    min-width: 0;
    margin-bottom: 5px;
  }

  .kumabunsyou {
    min-width: 250px;
    padding-bottom: 10px;
    font-size: 0.75em;
    order: 2;
  }

  .howto {
    width: 80px;
    top: 25px;
    right: 20%;
    min-width: 0;
    margin: 10px auto -20px;
  }

  /* スライダー */
  .km-tukurikata {
    width: 100%;
    order: 3;
    margin: 0 auto;
  }

  .slider {
    width: 250px;
  }

  .scroll_controler {
    top: 100px;
  }

  /* ここまで和む */

  /* 買う */
  .box4 h3 {
    font-size: 0.9em;
    margin-top: 5px;
  }

  .headimg4 img {
    width: 38px;
    margin: 0;
    margin-bottom: 5px;
  }

  .itemwrap {
    margin: 0 auto;
    display: block;
    width: 350px;
  }

  .itwidth {
    width: 100%;
  }

  .item-contents {
    border-bottom: 1px solid #203A72;
    border-right: none;
    min-height: 0;
    height: 140px;
    margin: 20px 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3.5em auto;
  }

  .item-img {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .item-img img {
    width: 100px;
  }

  .cookie .item-img img {
    width: 95px;
  }

  .goods h3 {
    margin: 20px 0;
  }

  .goods.item-contents {
    border-bottom: none;
  }

  .goods .item-img img {
    width: 110px;
  }

  .item-btn {
    margin-top: -15px;
  }

  .item-btn span {
    padding: 23px 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: 3px 3px 4px #4d7a98c5, inset 3px 3px 5px #dcf4ff,
      inset -1px -1px 4px #43899ec2;
  }

  .item-btn:hover span {
    border-radius: 50%;
    box-shadow: -3px -3px 4px #4d7a98c5, inset -3px -3px 5px #dcf4ff,
      inset 1px 1px 4px #43899ec2;
  }


  /* ここまで買う */

  /* 「働く」 */
  .box5 {
    padding-top: 5%;
    background-size: 70px;
  }

  /* テキスト */
  .recruit-contents .text {
    font-size: 0.87em;
    margin-top: -40px;
  }


  /* アニメーション */
  /* ナマケモノ */
  .namakemono {
    position: relative;
    display: block;
    width: 200px;
    height: 110px;
    overflow: hidden;
    top: -4.2vh;
    left: 25px;
  }

  .namakemono img {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
  }

  .kuma img {
    left: 30px;
  }

  /* アルパカとsns */
  .sns-animation {
    bottom: -160px;
    left: -15px;
  }

  .kurukuru-img img {
    bottom: 61px;
    left: 22.2px;
    width: 105px;
    height: 105px;
  }

  .kurukuru-img::after {
    width: 40px;
    top: 32px;
    left: 42px;
  }

  /* いなくなる動物 */
  .cheetah img,
  .fox img {
    bottom: -100%;
  }

  .bird img {
    width: 0;
    min-width: 0;
  }

  .owl {
    display: none;
  }

  /* 似顔絵イラスト */

  .owner img {
    right: 0;
    min-width: 240px;
  }

  .owner::after {
    background-position: right bottom;
    background-size: contain;
    bottom: 0px;
    right: -5px;
    width: 270px;
    height: 270px;
  }

  .usa img {
    right: 40px;
    bottom: 117px;
  }


  /* 下のアニメーションたち */
  .animation {
    height: 50vh;
  }


  /* くま */
  .kuma img {
    transform: rotateZ(-15deg);
    position: absolute;
    left: 50px;
    bottom: 60px;
    width: 20%;
    min-width: 90px;
  }


  .top-btn {
    width: 50px;
    height: 50px;
  }

  .top-btn a {
    margin-top: 5px;
    font-size: 1.5em;
  }

  /* ここまで働く */



  /* メニュー */
  .accordion-container {
    width: 350px;
    margin: 0 auto;
  }

  .accordion-content li {
    font-size: 0.9em;
  }

  .takeout-text,
  .coffee-text {
    font-size: 0.9em;
  }

  .menu-name {
    width: 18em;
    margin-left: 25px;
  }

  .menu-price {
    width: calc(100% - 16em);
    white-space: nowrap;
    line-height: 1.75em;
  }

  .sweets-main .menu-name {
    width: 11em;

  }

  .sweets-main .menu-price {
    width: calc(100% - 9em);
  }

  .sand-df .menu-name {
    width: 11em;
  }

  .sand-df .menu-price {
    width: calc(100% - 9em);
  }



  /* アコーディオン */
  .accordion-btn {
    width: 230px;
  }

  .back-btn {
    margin-bottom: 80px;
  }

  /* コーヒー */
  .espresso {
    margin-left: -12px;
  }

  .plus {
    font-size: 0.5em;
  }

  .menu-price span {
    margin-left: -38px;
  }

  .espressorate-img {
    margin-top: -50px;
  }

  .milk-title img {
    width: 35%;
    margin-top: -60px;
  }

  .milk-img img {
    width: 30%;
  }

  .other-img {
    gap: 50px;
    margin-left: 0;
  }

  .other-menu .menu-price {
    line-height: 1.72em;
  }

  /* アルコール */
  .alcohol-img2 {
    position: relative;
    width: 350px;
    height: 300px;
    margin-top: -220px;
  }

  .alcohol-img2 img:first-child {
    width: 18%;
    left: 90px;
    bottom: 50px;
  }

  .alcohol-img2 img:last-child {
    width: 16%;
    bottom: 47px;
    right: 95px;
  }

  .alcohol-img3 {
    width: 350px;
    height: 260px;
    margin-top: -250px;
  }

  .alcohol-img3 img:first-child {
    width: 18%;
    height: auto;
    position: absolute;
    left: 120px;
    bottom: 10px;
  }

  .alcohol-img3 img:last-child {
    position: absolute;
    height: auto;
    width: 15%;
    bottom: 8px;
    right: 120px;
  }

  .alcohol-menu .menu-price {
    line-height: 1.7em;
  }

  /* スイーツ */
  .sweets-content li {
    font-size: 0.9em;
  }

  .cake-img {
    margin-top: -20px;
    height: 150px;
  }

  .cake-img img:last-child {
    margin-top: 50px;
    height: 100px;
  }

  .choco-img {
    margin-right: 50px;
    margin-top: -80px;
  }

  .ice-img {
    height: 200px;
    width: 100%;
  }

  .ice-img img {
    width: 20%;
  }

  .ice-img img:first-child {
    position: absolute;
    top: 0;
    left: -80px;
  }

  .ice-img img:last-child {
    width: 60%;
    position: absolute;
    bottom: 30px;
    left: 70px;
  }

  .sweets-menu .menu-price {
    line-height: 1.72em;
  }

  /* ドリップバッグ */
  .dripnedan {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    width: 100%;
  }

  .dripg {
    width: 6.7em;
    text-align: right;
    margin-right: 20px;
    white-space: nowrap;
  }

  .dripkingaku {
    width: calc(100%-6em);
    text-align: left;
  }

  .dripnigami {
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px #203A72 dotted;
    margin-bottom: 10px;
    width: 100%;
  }

  .nigami {
    width: 6.7rem;
    text-align: right;
    margin: 0 10px 0 28px;
    width: 100%;
    white-space: nowrap;
  }

  .asiato {
    width: calc(100%-7em);
    text-align: left;
    white-space: nowrap;
  }

  .asiato li {
    list-style-type: none;
  }

  .asiato img {
    width: 80px;
  }

  .dripsetumei {
    padding-bottom: 10px;
    font-size: x-small;

  }

  /* クッキー */

  .maruo-name {
    font-size: 1em;
  }

  .maruo-text {
    font-size: 0.85em;
  }

  .cookie-menu {
    font-size: 0.9em;
  }

  .cookie-text {
    font-size: 0.85em;
  }
}