@charset "UTF-8";
/*山口変更 元
var.$breakpoint-sm: 370px; //スマホ最低値
var.$breakpoint-medium: 768px; //タブレット端末
var.$breakpoint-largr: 1024px; //Webデザインや画像編集
var.$breakpoint-xl: 1400px; //pc向けWebサイト            
*/
/*山口変更 @import廃止に伴い変数の定義を別ファイルに移動
var.$breakpoint-sm: 360px; //山口変更 追加ここから viewpoint.jsとの数値のズレを修正
var.$breakpoint-medium: 768px; //タブレット端末最低値 名称変更
var.$breakpoint-large: 1080px; //名称変更
var.$breakpoint-xl: 1920px;//山口変更 追加ここまで


var.$font-fredoka-one: "Fredoka One", sans-serif;
var.$font-fugaz-one: "Fugaz One", cursive;
var.$font-abhaya-libre-semi-bold: "Abhaya Libre", serif;
var.$font-noto-sans-jp: "Noto Sans JP", sans-serif;
var.$font-work-sans: "Work Sans", sans-serif;

var.$font-size-title-sp: 40px; //山口変更 元は25px
var.$font-size-subtitle-sp: 25px; //山口変更 元は16px 

var.$font-size-title-pc: 40px;
var.$font-size-subtitle-pc: 26px;

var.$font-size-body-32px: 32px;  //山口変更 元は20px
var.$font-size-body-14px: 14px;  //山口変更 元は14px 現在使用していない
var.$font-size-body-20px: 20px;  //山口変更 元は12px


var.$primary-color: #ff3f3f;
var.$secondary-color: #6ad3ff;
*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 26px;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  position: absolute; /* 絶対位置 */
  top: 0;
  width: 100%;
  z-index: 10;
}
header h1 {
  z-index: 10;
  font-size: 30px;
  font-family: "Fredoka One", sans-serif;
}
@media (min-width: 768px) {
  header h1 {
    font-size: 34px;
  }
}
@media (min-width: 1080px) {
  header h1 {
    font-size: 66px;
  }
}
@media (min-width: 768px) {
  header {
    padding: 30px 40px;
  }
}
@media (min-width: 1080px) {
  header {
    padding: 30px 0;
  }
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 34px;
  height: 34px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 10;
  background-color: white;
  border-radius: 50%;
  gap: 4px;
}
@media (min-width: 1080px) {
  .menu-toggle {
    width: 60px;
    height: 60px;
    gap: 9px;
  }
}

.menu-toggle span {
  display: block;
  height: 2px;
  background-color: #ff3f3f;
  border-radius: 3px;
  transition: all 0.3s;
  width: 55%;
  margin: 0 auto;
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
@media (min-width: 1080px) {
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
@media (min-width: 1080px) {
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }
}

.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 90px 0 0 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.nav-menu.active {
  transform: translateX(0);
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 768px) {
  .nav-menu ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.nav-menu li {
  margin: 16px 10px;
  width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .nav-menu li {
    width: auto;
  }
}

.nav-menu a {
  font-family: "Fugaz One", cursive;
  color: white;
  text-decoration: none;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: scale 0.3s;
}
@media (min-width: 1080px) {
  .nav-menu a {
    font-size: 36px;
  }
}

.nav-menu a:hover {
  scale: 1.15;
}

.nav-menu span {
  font-size: 13px;
}
@media (min-width: 1080px) {
  .nav-menu span {
    font-size: 27px;
  }
}

.slideshow {
  background-color: #171719;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  z-index: 2;
}

.top-view,
.slide1,
.slide2,
.slide3 {
  height: 780px;
}
@media (min-width: 768px) {
  .top-view,
  .slide1,
  .slide2,
  .slide3 {
    height: 660px;
  }
}
@media (min-width: 1080px) {
  .top-view,
  .slide1,
  .slide2,
  .slide3 {
    height: 980px;
    background-size: 2000px;
  }
}
.top-view .kokekoke,
.slide1 .kokekoke,
.slide2 .kokekoke,
.slide3 .kokekoke {
  position: absolute;
  top: 57px;
  right: 33px;
  width: 177px;
  height: auto;
}
@media (min-width: 768px) {
  .top-view .kokekoke,
  .slide1 .kokekoke,
  .slide2 .kokekoke,
  .slide3 .kokekoke {
    top: -18px;
    right: 67px;
    width: 215px;
  }
}
@media (min-width: 1080px) {
  .top-view .kokekoke,
  .slide1 .kokekoke,
  .slide2 .kokekoke,
  .slide3 .kokekoke {
    top: 9px;
    right: 43px;
    width: 329px;
  }
}
.top-view .dokyun,
.slide1 .dokyun,
.slide2 .dokyun,
.slide3 .dokyun {
  position: absolute;
  top: 420px;
  left: -30px;
  width: 199px;
  height: auto;
  transform: rotate(-15deg);
}
@media (min-width: 768px) {
  .top-view .dokyun,
  .slide1 .dokyun,
  .slide2 .dokyun,
  .slide3 .dokyun {
    top: 250px;
    left: 11px;
    width: 249px;
  }
}
@media (min-width: 1080px) {
  .top-view .dokyun,
  .slide1 .dokyun,
  .slide2 .dokyun,
  .slide3 .dokyun {
    top: 435px;
    left: -50px;
    width: 390px;
  }
}
@media (min-width: 1920px) {
  .top-view .dokyun,
  .slide1 .dokyun,
  .slide2 .dokyun,
  .slide3 .dokyun {
    top: 330px;
    left: -142px;
    width: 410px;
  }
}

.slide {
  position: absolute;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 1080px) {
  .slide {
    background-size: 2000px;
  }
}

.slide1 {
  background-image: url("../images/slides/slide1-sp.jpg");
}
@media (min-width: 768px) {
  .slide1 {
    background-image: url("../images/slides/slide1-tab.jpg");
  }
}
@media (min-width: 1080px) {
  .slide1 {
    background-image: url("../images/slides/slide1-pc.jpg");
  }
}

.slide2 {
  background-image: url("../images/slides/slide2-sp.jpg");
}
@media (min-width: 768px) {
  .slide2 {
    background-image: url("../images/slides/slide2-tab.jpg");
  }
}
@media (min-width: 1080px) {
  .slide2 {
    background-image: url("../images/slides/slide2-pc.jpg");
  }
}

.slide3 {
  background-image: url("../images/slides/slide3-sp.jpg");
}
@media (min-width: 768px) {
  .slide3 {
    background-image: url("../images/slides/slide3-tab.jpg");
  }
}
@media (min-width: 1080px) {
  .slide3 {
    background-image: url("../images/slides/slide3-pc.jpg");
  }
}

.slider {
  height: 100%;
  overflow: hidden;
}

.ameba {
  background-size: cover;
}
.ameba1 {
  width: 259px;
  height: 221px;
  top: -37px;
  left: -150px;
  background-image: url("../images/ameba1.png");
}
@media (min-width: 768px) {
  .ameba1 {
    width: 209px;
    height: 179px;
    left: -10px;
  }
}
@media (min-width: 1080px) {
  .ameba1 {
    width: 470px;
    height: 401px;
    left: -140px;
    top: -130px;
  }
}
.ameba2 {
  width: 322px;
  height: 254px;
  top: -15px;
  right: -160px;
  background-image: url("../images/ameba2.png");
}
@media (min-width: 768px) {
  .ameba2 {
    width: 313px;
    height: 247px;
    right: -80px;
    top: -56px;
  }
}
@media (min-width: 1080px) {
  .ameba2 {
    width: 635px;
    height: 500px;
    right: -330px;
    top: -150px;
  }
}

@media (min-width: 768px) {
  .nav-menu ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .nav-menu li {
    width: auto;
  }
}

.slideshow {
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  background-position: center;
}

.slide.active {
  opacity: 1;
}

.indicators {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 17px;
  z-index: 5;
}
@media (min-width: 768px) {
  .indicators {
    bottom: 150px;
  }
}
@media (min-width: 1080px) {
  .indicators {
    bottom: 163px;
    gap: 30px;
  }
}

.indicator {
  width: 30px;
  height: 11px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
@media (min-width: 1080px) {
  .indicator {
    width: 58px;
    height: 18px;
  }
}

.indicator.active {
  background-color: rgb(255, 255, 255);
}

.br-on-sm {
  display: block;
}

.br-on-md {
  display: none;
}

.br-on-lg {
  display: none;
}

.br-on-ll {
  display: none;
}

.br-on-xl {
  display: none;
}

@media (min-width: 768px) {
  .br-on-sm {
    display: none;
  }
  .br-on-md {
    display: block;
  }
}
@media (min-width: 1080px) {
  .br-on-md {
    display: none;
  }
  .br-on-lg {
    display: block;
  }
}
@media (min-width: 1500px) {
  .br-on-lg {
    display: none;
  }
  .br-on-ll {
    display: block;
  }
}
@media (min-width: 1920px) {
  .br-on-ll {
    display: none;
  }
  .br-on-xl {
    display: block;
  }
}
.ameba {
  background-size: cover;
}
.ameba3 {
  width: 291px;
  height: 265px;
  top: -350px;
  left: -187px;
  background-image: url("../images/ameba3.png");
}
@media (min-width: 768px) {
  .ameba3 {
    width: 257px;
    height: 234px;
    top: -356px;
    left: -80px;
  }
}
@media (min-width: 1080px) {
  .ameba3 {
    width: 447px;
    height: 408px;
    top: -556px;
    left: -261px;
  }
}
.ameba4 {
  background-image: url("../images/ameba4.png");
  width: 332px;
  height: 293px;
  top: -245px;
  right: -180px;
}
@media (min-width: 768px) {
  .ameba4 {
    width: 330px;
    height: 292px;
    top: -338px;
    right: -90px;
  }
}
@media (min-width: 1080px) {
  .ameba4 {
    width: 526px;
    height: 464px;
    top: -460px;
    right: -280px;
  }
}
.ameba5 {
  background-image: url("../images/ameba5.png");
  width: 102px;
  height: 92px;
  top: -14px;
  left: -44px;
}
@media (min-width: 768px) {
  .ameba5 {
    width: 178px;
    height: 160px;
    top: -31px;
    left: -99px;
  }
}
@media (min-width: 1080px) {
  .ameba5 {
    width: 250px;
    height: 225px;
    top: -68px;
    left: -140px;
  }
}

.anisakis {
  background-size: cover;
}
.anisakis1 {
  background-image: url("../images/anisakis1-sp.png");
  width: 0px;
  height: 68px;
  top: 42px;
  right: 0;
}
@media (min-width: 768px) {
  .anisakis1 {
    background-image: url("../images/anisakis1-tab.png");
    width: 134px;
    height: 119px;
    top: -28px;
    right: 0px;
  }
}
@media (min-width: 1080px) {
  .anisakis1 {
    background-image: url("../images/anisakis1-pc.png");
    width: 434px;
    height: 173px;
    top: -8px;
    right: 0px;
  }
}
.anisakis2 {
  background-image: url("../images/anisakis2-sp.png");
  width: 0px;
  height: 26px;
  top: 560px;
  left: 0;
}
@media (min-width: 768px) {
  .anisakis2 {
    background-image: url("../images/anisakis2-tab.png");
    top: 430px;
  }
}
@media (min-width: 1080px) {
  .anisakis2 {
    background-image: url("../images/anisakis2-pc.png");
    width: 0px;
    height: 90px;
    top: 785px;
    left: 0;
  }
}
@media (min-width: 1080px) {
  .anisakis2 {
    background-image: url("../images/anisakis2-pc.png");
    width: 299px;
    height: 90px;
    top: 785px;
    left: 0;
  }
}

.what-is .card-header-white {
  position: relative;
  margin: 0 0 20px 20px;
}
@media (min-width: 768px) {
  .what-is .card-header-white {
    margin: 0 0 40px 100px;
  }
}
@media (min-width: 1080px) {
  .what-is .card-header-white {
    margin: 0 0 40px 130px;
  }
}
@media (min-width: 1080px) {
  .what-is .card-header-white {
    margin: 0 0 60px 130px;
  }
}
.what-is .fuwamokosan {
  z-index: 2;
  position: absolute;
  top: -284px;
  right: -17px;
  width: 150px;
  height: auto;
}
@media (min-width: 768px) {
  .what-is .fuwamokosan {
    top: -392px;
    right: 30px;
    width: 185px;
  }
}
@media (min-width: 1080px) {
  .what-is .fuwamokosan {
    top: -555px;
    right: -3px;
    width: 304px;
  }
}

.what-is-content {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .what-is-content {
    margin: 0 60px;
    flex-direction: row;
  }
}
@media (min-width: 1080px) {
  .what-is-content {
    margin: 0 90px;
    flex-direction: row;
  }
}
@media (min-width: 1500px) {
  .what-is-content {
    margin: 0 50px;
    flex-direction: row;
  }
}
@media (min-width: 1920px) {
  .what-is-content {
    margin: 0 120px;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .what-is-right-content {
    max-width: 475px;
    width: 50%;
    position: relative;
  }
}
@media (min-width: 1080px) {
  .what-is-right-content {
    max-width: 980px;
    width: 70%;
    position: relative;
  }
}
@media (min-width: 1920px) {
  .what-is-right-content {
    max-width: 980px;
    width: 70%;
    position: relative;
  }
}

.what-is-description {
  position: relative;
  width: auto;
  color: white;
  line-height: 2;
  margin: 290px 0 0 0;
  z-index: 1;
}
.what-is-description p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  font-size: 20px;
  padding: 15px 30px;
}
@media (min-width: 1080px) {
  .what-is-description p {
    font-size: 28px;
    padding: 15px 0 0 0;
  }
}
@media (min-width: 1920px) {
  .what-is-description p {
    font-size: 32px;
    padding: 15px 0 0 0;
  }
}
@media (min-width: 768px) {
  .what-is-description {
    margin: 0;
  }
}

.what-is-image-container {
  width: 305px;
  position: relative;
}
@media (min-width: 1080px) {
  .what-is-image-container {
    width: 50%;
    flex-grow: 0;
    flex-shrink: 0;
  }
}

.shop-img {
  background-image: url("../images/what-is-shop.jpg");
  position: absolute;
  left: -50px;
  top: 0;
  width: 345px;
  height: 237px;
  border-radius: 52px;
  background-size: cover;
  background-position: center;
  z-index: 2;
}
@media (min-width: 768px) {
  .shop-img {
    left: auto;
    right: 10%;
  }
}
@media (min-width: 1080px) {
  .shop-img {
    right: 10%;
    width: 498.75px;
    height: 308.81px;
    border-radius: 52px;
  }
}
@media (min-width: 1500px) {
  .shop-img {
    right: 10%;
    width: 598.5px;
    height: 370.57px;
    border-radius: 52px;
  }
}
@media (min-width: 1920px) {
  .shop-img {
    right: 10%;
    width: 665px;
    height: 411.74px;
    border-radius: 52px;
  }
}

.shop-img-back {
  background-color: #bcffbc;
  position: absolute;
  left: -30px;
  top: 20px;
  width: 345px;
  height: 237px;
  border-radius: 52px;
  z-index: 1;
}
@media (min-width: 768px) {
  .shop-img-back {
    left: auto;
    right: 5%;
  }
}
@media (min-width: 1080px) {
  .shop-img-back {
    right: 5%;
    top: 30px;
    width: 498.75px;
    height: 308.81px;
    border-radius: 52px;
  }
}
@media (min-width: 1500px) {
  .shop-img-back {
    right: 5%;
    top: 30px;
    width: 590px;
    height: 370.57px;
    border-radius: 52px;
  }
}
@media (min-width: 1920px) {
  .shop-img-back {
    right: 5%;
    top: 30px;
    width: 665px;
    height: 411.74px;
    border-radius: 52px;
  }
}

.what-is-character-container {
  position: relative;
}
.what-is-character-container .character.d-bat-pink {
  width: 77px;
  height: auto;
  top: -30px;
  left: 260px;
  z-index: 5;
}
@media (min-width: 768px) {
  .what-is-character-container .character.d-bat-pink {
    width: 83px;
    height: auto;
    top: -17px;
    left: 305px;
  }
}
@media (min-width: 1080px) {
  .what-is-character-container .character.d-bat-pink {
    width: 120px;
    height: auto;
    top: 0px;
    left: 490px;
  }
}
@media (min-width: 1400px) {
  .what-is-character-container .character.d-bat-pink {
    width: 120px;
    height: auto;
    top: 0px;
    left: 490px;
  }
}
.what-is-character-container .character.d-bat-blue {
  width: 77px;
  height: auto;
  top: 120px;
  left: 20px;
  z-index: 5;
}
@media (min-width: 768px) {
  .what-is-character-container .character.d-bat-blue {
    width: 83px;
    height: auto;
    top: 120px;
    left: 35px;
  }
}
@media (min-width: 1080px) {
  .what-is-character-container .character.d-bat-blue {
    width: 120px;
    height: auto;
    top: 210px;
    left: 100px;
  }
}
@media (min-width: 1400px) {
  .what-is-character-container .character.d-bat-blue {
    width: 120px;
    height: auto;
    top: 210px;
    left: 100px;
  }
}
.what-is-character-container .character.hardy {
  width: 200px;
  height: auto;
  top: 5px;
  left: 86px;
  z-index: 5;
}
@media (min-width: 768px) {
  .what-is-character-container .character.hardy {
    width: 210px;
    height: auto;
    top: 1px;
    left: 107px;
  }
}
@media (min-width: 1080px) {
  .what-is-character-container .character.hardy {
    width: 304px;
    height: 254px;
    top: 55px;
    left: 210px;
  }
}
@media (min-width: 1400px) {
  .what-is-character-container .character.hardy {
    width: 304px;
    height: 254px;
    top: 55px;
    left: 210px;
  }
}

.br-on-sm {
  display: block;
}

.br-on-md {
  display: none;
}

.br-on-lg {
  display: none;
}

.br-on-ll {
  display: none;
}

.br-on-xl {
  display: none;
}

@media (min-width: 768px) {
  .br-on-sm {
    display: none;
  }
  .br-on-md {
    display: block;
  }
}
@media (min-width: 1080px) {
  .br-on-md {
    display: none;
  }
  .br-on-lg {
    display: block;
  }
}
@media (min-width: 1500px) {
  .br-on-lg {
    display: none;
  }
  .br-on-ll {
    display: block;
  }
}
@media (min-width: 1920px) {
  .br-on-ll {
    display: none;
  }
  .br-on-xl {
    display: block;
  }
}
.ameba {
  background-size: cover;
}
.ameba6 {
  background-image: url("../images/ameba6.png");
  width: 141px;
  height: 115px;
  top: -106px;
  right: -57px;
}
@media (min-width: 768px) {
  .ameba6 {
    width: 184px;
    height: 150px;
    top: -125px;
    right: -90px;
  }
}
@media (min-width: 1080px) {
  .ameba6 {
    width: 409px;
    height: 334px;
    top: -240px;
    right: -220px;
  }
}

.anisakis {
  background-size: cover;
}
.anisakis3 {
  background-image: url("../images/anisakis3-sp.png");
  width: 68px;
  height: 18px;
  top: 2px;
  right: 0;
}
@media (min-width: 768px) {
  .anisakis3 {
    background-image: url("../images/anisakis3-tab.png");
    width: 63px;
    height: 16px;
    top: 35px;
    right: 0px;
  }
}
@media (min-width: 1080px) {
  .anisakis3 {
    background-image: url("../images/anisakis3-pc.png");
    width: 374px;
    height: 51px;
    top: 102px;
    right: 0px;
  }
}

.news-character-container {
  position: relative;
}
.news-character-container .character.gurumakudon {
  width: 150px;
  height: auto;
  top: -70px;
  left: -15px;
}
@media (min-width: 768px) {
  .news-character-container .character.gurumakudon {
    width: 220px;
    height: auto;
    top: -70px;
    left: -10px;
  }
}
@media (min-width: 1080px) {
  .news-character-container .character.gurumakudon {
    width: 390px;
    height: auto;
    top: -165px;
    left: -10px;
  }
}
@media (min-width: 1920px) {
  .news-character-container .character.gurumakudon {
    width: 390px;
    height: auto;
    top: -138px;
    left: -10px;
  }
}
.news-character-container .character.hanako {
  width: 117px;
  height: auto;
  top: -54px;
  right: -9px;
}
@media (min-width: 768px) {
  .news-character-container .character.hanako {
    width: 139px;
    height: auto;
    top: -11px;
    right: 11px;
  }
}
@media (min-width: 1080px) {
  .news-character-container .character.hanako {
    width: 259px;
    height: auto;
    top: -75px;
    right: 41px;
  }
}
@media (min-width: 1920px) {
  .news-character-container .character.hanako {
    width: 259px;
    height: auto;
    top: -51px;
    right: 41px;
  }
}

.news-item {
  border-top: 2px solid #6ad3ff;
  padding: 10px 8px;
  font-size: 12px;
}
.news-item:last-of-type {
  border-bottom: 2px solid #6ad3ff;
}
@media (min-width: 768px) {
  .news-item {
    display: flex;
    gap: 40px;
    align-items: center;
  }
}
@media (min-width: 1080px) {
  .news-item {
    padding: 20px 16px;
  }
}

.news-date {
  font-family: "Work Sans", sans-serif;
  font-size: 18px;
  color: #a0a0a0;
  margin: 0;
}
@media (min-width: 1080px) {
  .news-date {
    font-size: 27px;
  }
}

.news-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  color: #34304e;
  margin: 5px 0 0 0;
}
@media (min-width: 768px) {
  .news-text {
    margin: 0;
  }
}
@media (min-width: 1080px) {
  .news-text {
    font-size: 20px;
  }
}
@media (min-width: 1500px) {
  .news-text {
    font-size: 24px;
  }
}
@media (min-width: 1920px) {
  .news-text {
    font-size: 27px;
  }
}

@media (min-width: 768px) {
  .sm-fsize {
    font-size: 0.875em;
  }
}
@media (min-width: 1080px) {
  .sm-fsize {
    font-size: 0.875em;
  }
}
@media (min-width: 1500px) {
  .sm-fsize {
    font-size: 0.875em;
  }
}
@media (min-width: 1920px) {
  .sm-fsize {
    font-size: 1em;
  }
}

.ameba {
  background-size: cover;
}
.ameba7 {
  background-image: url("../images/ameba7.png");
  width: 187px;
  height: 175px;
  top: -129px;
  left: -120px;
}
@media (min-width: 768px) {
  .ameba7 {
    width: 216px;
    height: 202px;
    top: -129px;
    left: -99px;
  }
}
@media (min-width: 1080px) {
  .ameba7 {
    width: 436px;
    height: 409px;
    top: -250px;
    left: -210px;
  }
}
.ameba8 {
  background-image: url("../images/ameba8.png");
  width: 151px;
  height: 151px;
  top: -119px;
  right: -100px;
}
@media (min-width: 768px) {
  .ameba8 {
    width: 191px;
    height: 191px;
    top: -145px;
    right: -118px;
  }
}
@media (min-width: 1080px) {
  .ameba8 {
    width: 396px;
    height: 396px;
    top: -286px;
    right: -222px;
  }
}
.ameba9 {
  background-image: url("../images/ameba9.png");
  width: 229px;
  height: 228px;
  top: -82px;
  left: -183px;
}
@media (min-width: 768px) {
  .ameba9 {
    width: 294px;
    height: 295px;
    top: -117px;
    left: -258px;
  }
}
@media (min-width: 1080px) {
  .ameba9 {
    width: 456px;
    height: 458px;
    top: -172px;
    left: -432px;
  }
}
.ameba10 {
  background-image: url("../images/ameba10.png");
  width: 180px;
  height: 176px;
  top: -110px;
  right: -123px;
}
@media (min-width: 768px) {
  .ameba10 {
    width: 227px;
    height: 222px;
    top: -107px;
    right: -177px;
  }
}
@media (min-width: 1080px) {
  .ameba10 {
    width: 404px;
    height: 396px;
    top: -190px;
    right: -333px;
  }
}

.anisakis {
  background-size: cover;
}
.anisakis4 {
  background-image: url("../images/anisakis4-sp.png");
  width: 37px;
  height: 40px;
  top: -57px;
  left: 0;
}
@media (min-width: 768px) {
  .anisakis4 {
    background-image: url("../images/anisakis4-tab.png");
    width: 79px;
    height: 48px;
    top: -83px;
  }
}
@media (min-width: 1080px) {
  .anisakis4 {
    background-image: url("../images/anisakis4-pc.png");
    width: 399px;
    height: 87px;
    top: -209px;
    left: 0;
  }
}
.anisakis5 {
  background-image: url("../images/anisakis5-sp.png");
  width: 73px;
  height: 48px;
  top: 474px;
  right: 0;
}
@media (min-width: 768px) {
  .anisakis5 {
    background-image: url("../images/anisakis5-tab.png");
    width: 52px;
    height: 48px;
    top: 364px;
    right: 0;
  }
}
@media (min-width: 1080px) {
  .anisakis5 {
    background-image: url("../images/anisakis5-pc.png");
    width: 352px;
    height: 97px;
    top: 474px;
    right: 0;
  }
}
.anisakis6 {
  background-image: url("../images/anisakis6-sp.png");
  width: 37px;
  height: 40px;
  bottom: 1794px;
  left: 0;
}
@media (min-width: 768px) {
  .anisakis6 {
    background-image: url("../images/anisakis6-tab.png");
    width: 47px;
    height: 49px;
    bottom: 740px;
    left: 0;
  }
}
@media (min-width: 1080px) {
  .anisakis6 {
    background-image: url("../images/anisakis6-pc.png");
    width: 347px;
    height: 93px;
    bottom: 1120px;
    left: 0;
  }
}

.br-on-sm {
  display: block;
}

.br-on-md {
  display: none;
}

.br-on-lg {
  display: none;
}

.br-on-ll {
  display: none;
}

.br-on-xl {
  display: none;
}

@media (min-width: 768px) {
  .br-on-sm {
    display: none;
  }
  .br-on-md {
    display: block;
  }
}
@media (min-width: 1080px) {
  .br-on-md {
    display: none;
  }
  .br-on-lg {
    display: block;
  }
}
@media (min-width: 1500px) {
  .br-on-lg {
    display: none;
  }
  .br-on-ll {
    display: block;
  }
}
@media (min-width: 1920px) {
  .br-on-ll {
    display: none;
  }
  .br-on-xl {
    display: block;
  }
}
.food-menu-character-container {
  position: relative;
}
.food-menu-character-container .character.paonu {
  width: 180px;
  height: auto;
  top: -90px;
  right: -40px;
  transform: rotate(35deg);
}
@media (min-width: 768px) {
  .food-menu-character-container .character.paonu {
    width: 272px;
    height: auto;
    top: -130px;
    right: -70px;
  }
}
@media (min-width: 1080px) {
  .food-menu-character-container .character.paonu {
    width: 380px;
    height: auto;
    top: -165px;
    right: 0px;
  }
}
@media (min-width: 1920px) {
  .food-menu-character-container .character.paonu {
    width: 500px;
    height: auto;
    top: -283px;
    right: 0px;
  }
}
.food-menu-character-container .character.labubu {
  width: 0px;
  height: auto;
  top: -198px;
  left: -19px;
}
@media (min-width: 768px) {
  .food-menu-character-container .character.labubu {
    width: 195px;
    height: auto;
    top: -50px;
    left: 0px;
    transform: rotete(-5deg);
  }
}
@media (min-width: 1080px) {
  .food-menu-character-container .character.labubu {
    width: 280px;
    height: auto;
    top: -50px;
    left: 0px;
    transform: rotate(-5deg);
  }
}
@media (min-width: 1920px) {
  .food-menu-character-container .character.labubu {
    width: 350px;
    height: auto;
    top: -60px;
    left: 15px;
    transform: rotate(-7deg);
  }
}
.food-menu-character-container .character.tumurin {
  width: 0px;
  height: auto;
  top: -198px;
  left: -19px;
}
@media (min-width: 768px) {
  .food-menu-character-container .character.tumurin {
    width: 170px;
    height: auto;
    top: -224px;
    left: 170px;
  }
}
@media (min-width: 1080px) {
  .food-menu-character-container .character.tumurin {
    width: 280px;
    height: auto;
    top: -340px;
    left: 30%;
  }
}
@media (min-width: 1920px) {
  .food-menu-character-container .character.tumurin {
    width: 400px;
    height: auto;
    top: -405px;
    left: 365px;
  }
}
.food-menu-character-container .character.cher {
  width: 194px;
  height: auto;
  top: -210px;
  left: -39px;
}
@media (min-width: 768px) {
  .food-menu-character-container .character.cher {
    width: 0px;
    height: auto;
    top: -18px;
    left: -2px;
  }
}
@media (min-width: 1080px) {
  .food-menu-character-container .character.cher {
    width: 0px;
    height: auto;
    top: -62px;
    left: -2px;
  }
}
@media (min-width: 1920px) {
  .food-menu-character-container .character.cher {
    width: 0px;
    height: auto;
    top: -62px;
    left: -2px;
  }
}
.food-menu-character-container .character.kirine {
  width: 174px;
  height: auto;
  top: -116px;
  right: -42px;
  transform: rotate(15deg);
}
@media (min-width: 768px) {
  .food-menu-character-container .character.kirine {
    width: 225px;
    height: auto;
    top: -75px;
    right: -42px;
  }
}
@media (min-width: 1080px) {
  .food-menu-character-container .character.kirine {
    width: 348px;
    height: auto;
    top: -105px;
    right: -22px;
  }
}
.food-menu-character-container .character.fuwamokosan {
  width: 0px;
  height: auto;
  top: -116px;
  left: -42px;
  transform: scale(-1, 1) rotate(-5deg);
}
@media (min-width: 768px) {
  .food-menu-character-container .character.fuwamokosan {
    width: 150px;
    height: auto;
    top: -70px;
    left: -10px;
  }
}
@media (min-width: 1080px) {
  .food-menu-character-container .character.fuwamokosan {
    width: 200px;
    height: auto;
    top: -145px;
    left: -5px;
  }
}
@media (min-width: 1500px) {
  .food-menu-character-container .character.fuwamokosan {
    width: 220px;
    height: auto;
    top: -190px;
    left: -5px;
  }
}
@media (min-width: 1920px) {
  .food-menu-character-container .character.fuwamokosan {
    width: 285px;
    height: auto;
    top: -255px;
    left: -5px;
  }
}
.food-menu-character-container .character.momoirogaeru {
  width: 0px;
  height: auto;
  top: -116px;
  left: -42px;
  transform: scale(-1, 1) rotate(-5deg);
}
@media (min-width: 768px) {
  .food-menu-character-container .character.momoirogaeru {
    width: 150px;
    height: auto;
    top: -70px;
    left: -10px;
  }
}
@media (min-width: 1080px) {
  .food-menu-character-container .character.momoirogaeru {
    width: 200px;
    height: auto;
    top: -145px;
    left: -5px;
  }
}
@media (min-width: 1500px) {
  .food-menu-character-container .character.momoirogaeru {
    width: 220px;
    height: auto;
    top: -190px;
    left: -5px;
  }
}
@media (min-width: 1920px) {
  .food-menu-character-container .character.momoirogaeru {
    width: 285px;
    height: auto;
    top: -255px;
    left: -5px;
  }
}
.food-menu-character-container .character.pyosuke {
  width: 0px;
  height: auto;
  top: -116px;
  left: -42px;
  transform: scale(-1, 1) rotate(-5deg);
}
@media (min-width: 768px) {
  .food-menu-character-container .character.pyosuke {
    width: 150px;
    height: auto;
    top: -70px;
    left: -10px;
  }
}
@media (min-width: 1080px) {
  .food-menu-character-container .character.pyosuke {
    width: 200px;
    height: auto;
    top: -145px;
    left: -5px;
  }
}
@media (min-width: 1500px) {
  .food-menu-character-container .character.pyosuke {
    width: 220px;
    height: auto;
    top: -190px;
    left: -5px;
  }
}
@media (min-width: 1920px) {
  .food-menu-character-container .character.pyosuke {
    width: 285px;
    height: auto;
    top: -255px;
    left: -5px;
  }
}

.food-menu {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  row-gap: 15px;
  -moz-column-gap: 0;
       column-gap: 0;
  margin: 0 auto;
}
.food-menu.charsiu {
  margin: 5px auto -10px;
  grid-template-rows: 300px;
  grid-auto-rows: 320px;
  row-gap: 0px;
}
@media (min-width: 400px) {
  .food-menu.charsiu {
    margin: 15px auto 50px;
  }
}
@media (min-width: 768px) {
  .food-menu.charsiu {
    margin: 15px auto 0px;
    align-items: center;
    grid-template-columns: repeat(2, 270px);
    grid-template-rows: 330px;
    grid-auto-rows: 362px;
  }
}
@media (min-width: 1080px) {
  .food-menu.charsiu {
    margin: 15px 6vw 0px;
    -moz-column-gap: 40px;
         column-gap: 40px;
    grid-template-columns: repeat(2, 380px);
    grid-template-rows: 480px;
    grid-auto-rows: 480px;
  }
}
@media (min-width: 1500px) {
  .food-menu.charsiu {
    margin: 15px 6vw 0px;
    -moz-column-gap: 50px;
         column-gap: 50px;
    grid-template-columns: repeat(2, 430px);
    grid-template-rows: 540px;
    grid-auto-rows: 540px;
  }
}
@media (min-width: 1920px) {
  .food-menu.charsiu {
    margin: 15px 6vw 0px;
    -moz-column-gap: 0px;
         column-gap: 0px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 570px;
    grid-auto-rows: 570px;
  }
}
.food-menu.challenge {
  margin-bottom: 70px;
  grid-auto-rows: 300px;
}
@media (min-width: 400px) {
  .food-menu.challenge {
    grid-auto-rows: 350px;
  }
}
@media (min-width: 768px) {
  .food-menu.challenge {
    margin-bottom: 0px;
    align-items: center;
    grid-template-columns: repeat(2, 270px);
    grid-auto-rows: 500px;
  }
}
@media (min-width: 1080px) {
  .food-menu.challenge {
    margin: 15px 6vw 0px;
    grid-template-columns: repeat(2, 380px);
    grid-template-rows: 684px;
    grid-auto-rows: 684px;
  }
}
@media (min-width: 1920px) {
  .food-menu.challenge {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 850px;
    grid-auto-rows: 850px;
    margin-bottom: 0px;
  }
}
.food-menu.drink {
  grid-template-rows: 350px;
  grid-auto-rows: 370px;
  margin: 5px auto 0px;
}
@media (min-width: 400px) {
  .food-menu.drink {
    grid-template-rows: 400px;
    grid-auto-rows: 420px;
  }
}
@media (min-width: 768px) {
  .food-menu.drink {
    align-items: center;
    grid-template-columns: repeat(3, 180px);
    grid-template-rows: 367px;
    grid-auto-rows: 367px;
  }
}
@media (min-width: 1080px) {
  .food-menu.drink {
    margin: 15px 4vw 0px;
    grid-template-columns: repeat(3, 275px);
    grid-template-rows: 453px;
    grid-auto-rows: 453px;
  }
}
@media (min-width: 1500px) {
  .food-menu.drink {
    margin: 15px 4vw 0px;
    -moz-column-gap: 30px;
         column-gap: 30px;
    grid-template-columns: repeat(3, 275px);
    grid-template-rows: 500px;
    grid-auto-rows: 500px;
  }
}
@media (min-width: 1920px) {
  .food-menu.drink {
    margin: 15px 4vw 0px;
    -moz-column-gap: 0px;
         column-gap: 0px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 500px;
    grid-auto-rows: 500px;
  }
}

.menu-intro {
  color: #342e4f;
  width: 100%;
  margin: 20px auto 0px;
}
@media (min-width: 768px) {
  .menu-intro {
    width: 100%;
  }
}
@media (min-width: 1080px) {
  .menu-intro {
    width: 100%;
    margin-bottom: 0px;
  }
}
@media (min-width: 1500px) {
  .menu-intro {
    width: 100%;
    margin-bottom: 0px;
  }
}
@media (min-width: 1920px) {
  .menu-intro {
    width: 100%;
    margin-bottom: 30px;
  }
}
.menu-intro-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
}
@media (min-width: 768px) {
  .menu-intro-title {
    font-size: 20px;
    margin-bottom: 8px;
  }
}
@media (min-width: 1080px) {
  .menu-intro-title {
    font-size: 22px;
  }
}
@media (min-width: 1500px) {
  .menu-intro-title {
    font-size: 24px;
  }
}
@media (min-width: 1920px) {
  .menu-intro-title {
    font-size: 26px;
  }
}
.menu-intro-title-charsiu {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 4rem;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #F26649;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
}
@media (min-width: 768px) {
  .menu-intro-title-charsiu {
    font-size: 20px;
    margin-bottom: 0px;
    left: 0px;
  }
}
@media (min-width: 1080px) {
  .menu-intro-title-charsiu {
    font-size: 22px;
    left: 0px;
  }
}
@media (min-width: 1500px) {
  .menu-intro-title-charsiu {
    font-size: 24px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .menu-intro-title-charsiu {
    font-size: 26px;
    margin-bottom: 20px;
    left: 120px;
  }
}
.menu-intro-title-charsiu:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: "";
  border-radius: 50%;
  background: #ffffe5;
}
@media (min-width: 768px) {
  .menu-intro-title.charsiu2 {
    margin-bottom: 0px;
    left: 0px;
  }
}
@media (min-width: 1080px) {
  .menu-intro-title.charsiu2 {
    margin-bottom: 10px;
    text-align: center;
    margin-bottom: 30px;
  }
}
@media (min-width: 1500px) {
  .menu-intro-title.charsiu2 {
    text-align: center;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .menu-intro-title.charsiu2 {
    text-align: left;
    margin-bottom: 20px;
    left: 150px;
  }
}
.menu-intro-title-drink {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 4rem;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #0094d8;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
}
@media (min-width: 768px) {
  .menu-intro-title-drink {
    font-size: 20px;
    margin-bottom: 0px;
    left: 0px;
  }
}
@media (min-width: 1080px) {
  .menu-intro-title-drink {
    left: -20px;
    font-size: 22px;
  }
}
@media (min-width: 1500px) {
  .menu-intro-title-drink {
    left: 30px;
    font-size: 26px;
  }
}
@media (min-width: 1920px) {
  .menu-intro-title-drink {
    font-size: 26px;
    margin-bottom: 20px;
    left: 80px;
  }
}
.menu-intro-title-drink:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: "";
  border-radius: 50%;
  background: #ffffe5;
}
.menu-intro-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}
@media (min-width: 768px) {
  .menu-intro-description {
    font-size: 16px;
  }
}
@media (min-width: 1080px) {
  .menu-intro-description {
    font-size: 18px;
    margin: 15px 0px;
  }
}
@media (min-width: 1500px) {
  .menu-intro-description {
    font-size: 20px;
  }
}
@media (min-width: 1920px) {
  .menu-intro-description {
    font-size: 20px;
    margin: 0px 0px;
  }
}
.menu-intro-description-charsiu {
  font-family: "Noto Sans JP", sans-serif;
  left: 0px;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .menu-intro-description-charsiu {
    left: 0px;
    font-size: 16px;
    margin: 10px 0px;
  }
}
@media (min-width: 1080px) {
  .menu-intro-description-charsiu {
    left: 60px;
    font-size: 20px;
    margin: 15px 0px;
  }
}
@media (min-width: 1500px) {
  .menu-intro-description-charsiu {
    left: 60px;
    font-size: 24px;
  }
}
@media (min-width: 1920px) {
  .menu-intro-description-charsiu {
    left: 180px;
    font-size: 26px;
    margin: 0px 0px;
  }
}
.menu-intro-description-drink {
  font-family: "Noto Sans JP", sans-serif;
  left: 0px;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .menu-intro-description-drink {
    left: 0px;
    font-size: 16px;
    margin: 10px 0px;
  }
}
@media (min-width: 1080px) {
  .menu-intro-description-drink {
    left: 50px;
    font-size: 20px;
    margin: 15px 0px;
  }
}
@media (min-width: 1500px) {
  .menu-intro-description-drink {
    left: 100px;
    font-size: 24px;
  }
}
@media (min-width: 1920px) {
  .menu-intro-description-drink {
    left: 125px;
    font-size: 26px;
    margin: 0px 0px;
  }
}

.menu-item {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  color: #342e4f;
}
.menu-item.azuma {
  width: 90%;
  position: relative;
  transform: rotate(8deg);
  top: 180px;
  left: -45px;
}
@media (min-width: 768px) {
  .menu-item.azuma {
    transform: rotate(8deg) scale(1.05) translateY(30px);
    top: 50px;
    left: 0px;
  }
}
@media (min-width: 1080px) {
  .menu-item.azuma {
    transform: rotate(8deg) scale(1.05) translateY(30px);
    top: 0px;
    left: 50px;
  }
}
@media (min-width: 1920px) {
  .menu-item.azuma {
    transform: rotate(8deg) scale(1.05) translateY(30px);
    top: -30px;
    left: 50px;
  }
}
.menu-item.azuma img {
  box-shadow: 7px 10px 8px rgba(0, 0, 0, 0.4);
  width: 85%;
}
@media (min-width: 768px) {
  .menu-item.azuma img {
    width: 100%;
  }
}

.menu-item img {
  width: 100%;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .menu-item img {
    width: 90%;
    left: 5%;
    position: relative;
  }
}
@media (min-width: 1920px) {
  .menu-item img {
    width: 80%;
    left: 10%;
    position: relative;
  }
}

.menu-item h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0px;
}
@media (min-width: 768px) {
  .menu-item h3 {
    font-size: 18px;
  }
}
@media (min-width: 1080px) {
  .menu-item h3 {
    font-size: 20px;
  }
}
@media (min-width: 1080px) {
  .menu-item h3 {
    font-size: 26px;
  }
}
@media (min-width: 1920px) {
  .menu-item h3 {
    font-size: 28px;
  }
}

.menu-item p {
  font-family: "Noto Sans JP", sans-serif;
}

/*
.menu-price {
  padding-bottom: 5px;
  font-size: 16px;
  border-bottom: solid 1px #9a9a9a;
  @media (min-width: var.$breakpoint-medium) {
    font-size: 10px;
  }
  @media (min-width: var.$breakpoint-large) {
    font-size: 16px;
  }
}
*/
.menu-character-price {
  position: relative;
  scale: 0.45;
}
.menu-character-price.charsiu1 {
  top: -310px;
  left: 30px;
  z-index: 50;
}
@media (min-width: 768px) {
  .menu-character-price.charsiu1 {
    top: -340px;
    left: 50px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .menu-character-price.charsiu1 {
    top: -460px;
    left: 50px;
    z-index: 50;
  }
}
@media (min-width: 1500px) {
  .menu-character-price.charsiu1 {
    top: -530px;
    left: 95px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .menu-character-price.charsiu1 {
    top: -650px;
    left: 220px;
    z-index: 50;
    scale: 0.45;
  }
}
.menu-character-price.charsiu2 {
  top: -310px;
  left: 30px;
  z-index: 50;
}
@media (min-width: 768px) {
  .menu-character-price.charsiu2 {
    top: -330px;
    left: 70px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .menu-character-price.charsiu2 {
    top: -450px;
    left: 90px;
    z-index: 50;
  }
}
@media (min-width: 1500px) {
  .menu-character-price.charsiu2 {
    top: -520px;
    left: 90px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .menu-character-price.charsiu2 {
    top: -620px;
    left: 200px;
    z-index: 50;
    scale: 0.45;
  }
}
.menu-character-price.charsiu3 {
  top: -290px;
  left: 30px;
  z-index: 50;
}
@media (min-width: 768px) {
  .menu-character-price.charsiu3 {
    top: -320px;
    left: 30px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .menu-character-price.charsiu3 {
    top: -415px;
    left: -220px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .menu-character-price.charsiu3 {
    top: -550px;
    left: -230px;
    z-index: 50;
    scale: 0.4;
  }
}
.menu-character-price.drink1 {
  scale: 0.4;
  top: -335px;
  left: -100px;
  z-index: 50;
}
@media (min-width: 768px) {
  .menu-character-price.drink1 {
    scale: 0.4;
    top: -250px;
    left: 60px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .menu-character-price.drink1 {
    scale: 0.4;
    top: -380px;
    left: 80px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .menu-character-price.drink1 {
    top: -510px;
    left: 120px;
    scale: 0.4;
    z-index: 50;
  }
}
.menu-character-price.drink2 {
  scale: 0.4;
  top: -335px;
  left: -100px;
  z-index: 50;
}
@media (min-width: 768px) {
  .menu-character-price.drink2 {
    scale: 0.4;
    top: -250px;
    left: 60px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .menu-character-price.drink2 {
    scale: 0.4;
    top: -380px;
    left: 80px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .menu-character-price.drink2 {
    top: -510px;
    left: 120px;
    scale: 0.4;
    z-index: 50;
  }
}
.menu-character-price.drink3 {
  scale: 0.4;
  top: -335px;
  left: -100px;
  z-index: 50;
}
@media (min-width: 768px) {
  .menu-character-price.drink3 {
    scale: 0.4;
    top: -250px;
    left: 60px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .menu-character-price.drink3 {
    scale: 0.4;
    top: -380px;
    left: 80px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .menu-character-price.drink3 {
    top: -510px;
    left: 120px;
    scale: 0.4;
    z-index: 50;
  }
}

.nedan800yen {
  position: relative;
  scale: 0.4;
}
.nedan800yen.charsiu1 {
  top: -140px;
  left: 98px;
  z-index: 50;
}
@media (min-width: 768px) {
  .nedan800yen.charsiu1 {
    top: -160px;
    left: 120px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .nedan800yen.charsiu1 {
    top: -210px;
    left: 150px;
    z-index: 50;
  }
}
@media (min-width: 1500px) {
  .nedan800yen.charsiu1 {
    top: -260px;
    left: 190px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .nedan800yen.charsiu1 {
    top: -350px;
    left: 330px;
    z-index: 50;
    scale: 0.45;
  }
}
.nedan800yen.charsiu2 {
  top: -160px;
  left: 85px;
  z-index: 50;
  scale: 0.45;
}
@media (min-width: 768px) {
  .nedan800yen.charsiu2 {
    top: -175px;
    left: 120px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .nedan800yen.charsiu2 {
    top: -230px;
    left: 180px;
    z-index: 50;
  }
}
@media (min-width: 1500px) {
  .nedan800yen.charsiu2 {
    top: -245px;
    left: 215px;
    z-index: 50;
    scale: 0.55;
  }
}
@media (min-width: 1920px) {
  .nedan800yen.charsiu2 {
    top: -350px;
    left: 330px;
    z-index: 50;
    scale: 0.6;
  }
}
.nedan800yen.charsiu3 {
  top: -120px;
  left: 98px;
  z-index: 50;
}
@media (min-width: 768px) {
  .nedan800yen.charsiu3 {
    top: -130px;
    left: 110px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .nedan800yen.charsiu3 {
    top: -180px;
    left: -140px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .nedan800yen.charsiu3 {
    top: -230px;
    left: -120px;
    z-index: 50;
    scale: 0.45;
  }
}
.nedan800yen.drink1 {
  scale: 0.4;
  top: -195px;
  left: -80px;
  z-index: 50;
}
@media (min-width: 768px) {
  .nedan800yen.drink1 {
    scale: 0.4;
    top: -150px;
    left: 60px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .nedan800yen.drink1 {
    scale: 0.4;
    top: -230px;
    left: 100px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .nedan800yen.drink1 {
    top: -320px;
    left: 180px;
    z-index: 50;
    scale: 0.45;
  }
}
.nedan800yen.drink2 {
  scale: 0.4;
  top: -195px;
  left: -80px;
  z-index: 50;
}
@media (min-width: 768px) {
  .nedan800yen.drink2 {
    scale: 0.4;
    top: -150px;
    left: 60px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .nedan800yen.drink2 {
    scale: 0.4;
    top: -230px;
    left: 100px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .nedan800yen.drink2 {
    top: -320px;
    left: 180px;
    z-index: 50;
    scale: 0.45;
  }
}
.nedan800yen.drink3 {
  scale: 0.4;
  top: -195px;
  left: -80px;
  z-index: 50;
}
@media (min-width: 768px) {
  .nedan800yen.drink3 {
    scale: 0.4;
    top: -150px;
    left: 60px;
    z-index: 50;
  }
}
@media (min-width: 1080px) {
  .nedan800yen.drink3 {
    scale: 0.4;
    top: -230px;
    left: 100px;
    z-index: 50;
  }
}
@media (min-width: 1920px) {
  .nedan800yen.drink3 {
    top: -320px;
    left: 180px;
    z-index: 50;
    scale: 0.45;
  }
}

.menu-description {
  margin-top: 0px;
  font-size: 14px;
  line-height: 1.7;
  position: relative;
}
@media (min-width: 768px) {
  .menu-description {
    font-size: 16px;
  }
}
@media (min-width: 1080px) {
  .menu-description {
    font-size: 20px;
  }
}
@media (min-width: 1500px) {
  .menu-description {
    font-size: 24px;
  }
}
@media (min-width: 1920px) {
  .menu-description {
    font-size: 27px;
  }
}
.menu-description.charsiu1 {
  top: -420px;
}
@media (min-width: 768px) {
  .menu-description.charsiu1 {
    top: -450px;
  }
}
@media (min-width: 1080px) {
  .menu-description.charsiu1 {
    top: -620px;
    left: 5%;
  }
}
@media (min-width: 1500px) {
  .menu-description.charsiu1 {
    top: -710px;
  }
}
@media (min-width: 1920px) {
  .menu-description.charsiu1 {
    top: -840px;
    left: 50px;
  }
}
.menu-description.charsiu2 {
  top: -410px;
}
@media (min-width: 768px) {
  .menu-description.charsiu2 {
    top: -440px;
  }
}
@media (min-width: 1080px) {
  .menu-description.charsiu2 {
    top: -600px;
    left: 5%;
  }
}
@media (min-width: 1500px) {
  .menu-description.charsiu2 {
    top: -690px;
  }
}
@media (min-width: 1920px) {
  .menu-description.charsiu2 {
    top: -810px;
    left: 60px;
  }
}
.menu-description.charsiu3 {
  top: -400px;
}
@media (min-width: 768px) {
  .menu-description.charsiu3 {
    top: -430px;
  }
}
@media (min-width: 1080px) {
  .menu-description.charsiu3 {
    top: -620px;
    left: 20px;
  }
}
@media (min-width: 1920px) {
  .menu-description.charsiu3 {
    top: -820px;
    left: 90px;
  }
}
.menu-description.drink1 {
  top: -420px;
}
@media (min-width: 768px) {
  .menu-description.drink1 {
    top: -310px;
    left: -10px;
  }
}
@media (min-width: 1080px) {
  .menu-description.drink1 {
    top: -470px;
    left: 0px;
  }
}
@media (min-width: 1500px) {
  .menu-description.drink1 {
    top: -470px;
    left: -20px;
  }
}
@media (min-width: 1920px) {
  .menu-description.drink1 {
    top: -620px;
    left: 40px;
    width: 95%;
  }
}
.menu-description.drink2 {
  top: -420px;
}
@media (min-width: 768px) {
  .menu-description.drink2 {
    top: -310px;
  }
}
@media (min-width: 1080px) {
  .menu-description.drink2 {
    top: -470px;
  }
}
@media (min-width: 1500px) {
  .menu-description.drink2 {
    top: -470px;
  }
}
@media (min-width: 1920px) {
  .menu-description.drink2 {
    top: -620px;
    left: 40px;
    width: 95%;
  }
}
.menu-description.drink3 {
  top: -420px;
}
@media (min-width: 768px) {
  .menu-description.drink3 {
    top: -310px;
    left: 10px;
  }
}
@media (min-width: 1080px) {
  .menu-description.drink3 {
    top: -470px;
    left: 0px;
  }
}
@media (min-width: 1500px) {
  .menu-description.drink3 {
    top: -470px;
    left: 20px;
  }
}
@media (min-width: 1920px) {
  .menu-description.drink3 {
    top: -620px;
    left: 40px;
    width: 95%;
  }
}

.ameba {
  background-size: cover;
}
.ameba11 {
  background-image: url("../images/ameba11.png");
  width: 187px;
  height: 158px;
  top: -112px;
  left: -120px;
}
@media (min-width: 768px) {
  .ameba11 {
    width: 230px;
    height: 194px;
    top: -143px;
    left: -100px;
  }
}
@media (min-width: 1080px) {
  .ameba11 {
    width: 409px;
    height: 346px;
    top: -260px;
    left: -190px;
  }
}
.ameba12 {
  background-image: url("../images/ameba12.png");
  width: 173px;
  height: 172px;
  top: -76px;
  right: -93px;
}
@media (min-width: 768px) {
  .ameba12 {
    width: 213px;
    height: 212px;
    top: -79px;
    right: -100px;
  }
}
@media (min-width: 1080px) {
  .ameba12 {
    width: 429px;
    height: 427px;
    top: -210px;
    right: -190px;
  }
}

.anisakis {
  background-size: cover;
}
.anisakis7 {
  background-image: url("../images/anisakis7-sp.png");
  width: 64px;
  height: 25px;
  top: -57px;
  right: 0;
}
@media (min-width: 768px) {
  .anisakis7 {
    background-image: url("../images/anisakis7-tab.png");
    width: 109px;
    height: 25px;
    top: -63px;
  }
}
@media (min-width: 1080px) {
  .anisakis7 {
    background-image: url("../images/anisakis7-pc.png");
    width: 449px;
    height: 106px;
    top: -153px;
  }
}
.anisakis8 {
  background-image: url("../images/anisakis8-sp.png");
  width: 74px;
  height: 28px;
  top: 121px;
  left: 0;
}
@media (min-width: 768px) {
  .anisakis8 {
    background-image: url("../images/anisakis8-tab.png");
    width: 68px;
    height: 24px;
    top: 88px;
    left: 0px;
  }
}
@media (min-width: 1080px) {
  .anisakis8 {
    background-image: url("../images/anisakis8-pc.png");
    width: 368px;
    height: 104px;
    top: 208px;
    left: 0px;
  }
}
.anisakis9 {
  background-image: url("../images/anisakis9-sp.png");
  width: 70px;
  height: 18px;
  top: 560px;
  right: 0;
}
@media (min-width: 768px) {
  .anisakis9 {
    background-image: url("../images/anisakis9-tab.png");
    width: 60px;
    height: 14px;
    top: 560px;
    right: 0;
  }
}
@media (min-width: 1080px) {
  .anisakis9 {
    background-image: url("../images/anisakis9-pc.png");
    width: 360px;
    height: 71px;
    top: 900px;
    right: 0;
  }
}
.anisakis10 {
  background-image: url("../images/anisakis10-sp.png");
  width: 62px;
  height: 41px;
  bottom: 1200px;
  left: 0;
}
@media (min-width: 768px) {
  .anisakis10 {
    background-image: url("../images/anisakis10-tab.png");
    width: 141px;
    height: 64px;
    bottom: 680px;
    left: 0;
  }
}
@media (min-width: 1080px) {
  .anisakis10 {
    background-image: url("../images/anisakis10-pc.png");
    width: 501px;
    height: 134px;
    bottom: 1140px;
    left: 35px;
  }
}
.anisakis11 {
  background-image: url("../images/anisakis11-sp.png");
  width: 56px;
  height: 97px;
  bottom: 270px;
  right: 0;
}
@media (min-width: 768px) {
  .anisakis11 {
    background-image: url("../images/anisakis11-tab.png");
    width: 106px;
    height: 75px;
    bottom: 170px;
    right: 0;
  }
}
@media (min-width: 1080px) {
  .anisakis11 {
    background-image: url("../images/anisakis11-pc.png");
    width: 461px;
    height: 182px;
    bottom: 400px;
    right: 90px;
  }
}

.character-character-container {
  position: relative;
  padding: 45px 20px 20px !important;
}
@media (min-width: 768px) {
  .character-character-container {
    padding: 45px 20px 80px !important;
  }
}
@media (min-width: 1080px) {
  .character-character-container {
    padding: 45px 20px 20px !important;
  }
}
@media (min-width: 1920px) {
  .character-character-container {
    padding: 45px 20px 80px !important;
  }
}
.character-character-container .card-header-black {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .character-character-container .card-header-black {
    margin-bottom: 20px;
  }
}
@media (min-width: 1080px) {
  .character-character-container .card-header-black {
    margin-bottom: 10px;
  }
}
.character-character-container .character.momoirogaeru {
  width: 170px;
  height: auto;
  top: -130px;
  left: -42px;
  transform: scale(-1, 1) rotate(-5deg);
}
@media (min-width: 768px) {
  .character-character-container .character.momoirogaeru {
    width: 280px;
    height: auto;
    top: -190px;
    left: -10px;
  }
}
@media (min-width: 1080px) {
  .character-character-container .character.momoirogaeru {
    width: 360px;
    height: auto;
    top: -280px;
    left: 10px;
  }
}
@media (min-width: 1500px) {
  .character-character-container .character.momoirogaeru {
    width: 340px;
    height: auto;
    top: -280px;
    left: 20px;
  }
}
@media (min-width: 1920px) {
  .character-character-container .character.momoirogaeru {
    width: 320px;
    height: auto;
    top: -255px;
    left: -5px;
  }
}
.character-character-container .character.pyosuke {
  width: 120px;
  height: auto;
  top: -185px;
  right: 10px;
}
@media (min-width: 768px) {
  .character-character-container .character.pyosuke {
    width: 180px;
    height: auto;
    top: -250px;
    right: 0px;
  }
}
@media (min-width: 1080px) {
  .character-character-container .character.pyosuke {
    width: 230px;
    height: auto;
    top: -340px;
    right: 30px;
  }
}
@media (min-width: 1500px) {
  .character-character-container .character.pyosuke {
    width: 230px;
    height: auto;
    top: -340px;
    right: 30px;
  }
}
@media (min-width: 1920px) {
  .character-character-container .character.pyosuke {
    width: 240px;
    height: auto;
    top: -320px;
    right: 50px;
  }
}

.character-grid {
  display: grid;
  justify-content: center;
  max-width: 756px;
}
@media (min-width: 768px) {
  .character-grid {
    margin: -100px 19px 0 0;
    max-width: 912px;
  }
}
@media (min-width: 1080px) {
  .character-grid {
    margin: -60px 19px 0 0;
    max-width: 1620px;
  }
}
@media (min-width: 1442px) {
  .character-grid {
    margin: 0 0 0 0;
  }
}

.character-item {
  text-align: left;
  position: relative;
  height: 150px;
  width: auto;
}
@media (min-width: 768px) {
  .character-item {
    height: 190px;
    width: auto;
    /*&:nth-child(even) {
      top: 55px;
    }*/
  }
}
@media (min-width: 1080px) {
  .character-item {
    text-align: center;
    height: 282px;
    width: auto;
  }
}
.character-item.hardy {
  grid-row: 1/3;
  grid-column: 1/3;
  top: -30px;
  left: 0px;
}
@media (min-width: 768px) {
  .character-item.hardy {
    grid-row: 1/3;
    grid-column: 1/3;
    top: 0px;
    left: 0px;
  }
}
@media (min-width: 1080px) {
  .character-item.hardy {
    grid-row: 2/3;
    grid-column: 2/3;
    scale: 1.4;
    left: 0px;
    top: 0px;
  }
}
@media (min-width: 1442px) {
  .character-item.hardy {
    grid-row: 1/3;
    grid-column: 2/4;
    left: 0px;
    top: 100px;
    scale: 1;
    width: 90%;
    height: auto;
  }
}
@media (min-width: 1920px) {
  .character-item.hardy {
    grid-row: 1/3;
    grid-column: 2/4;
    left: 145px;
    top: 100px;
  }
}
@media (min-width: 1080px) {
  .character-item.d-bat-nomal {
    grid-row: 1/2;
    grid-column: 2/3;
  }
}
@media (min-width: 1442px) {
  .character-item.d-bat-nomal {
    grid-row: 1/2;
    grid-column: 1/2;
    top: -260px;
    left: 120px;
  }
}
.character-item.momoirogaeru {
  top: 95px;
  left: 5px;
  grid-row: 3/4;
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .character-item.momoirogaeru {
    top: 10px;
    left: 5px;
    grid-row: 3/4;
    grid-column: 1/2;
  }
}
@media (min-width: 1080px) {
  .character-item.momoirogaeru {
    grid-row: 3/4;
    grid-column: 1/2;
    left: -50px;
    top: -50px;
  }
}
@media (min-width: 1442px) {
  .character-item.momoirogaeru {
    grid-row: 3/4;
    grid-column: 1/2;
    left: 0px;
    top: -50px;
  }
}
@media (min-width: 1920px) {
  .character-item.momoirogaeru {
    grid-row: 3/4;
    grid-column: 1/2;
    left: 30px;
    top: -80px;
  }
}
.character-item.fuwamokosan {
  top: 30px;
  left: -5px;
  grid-row: 3/4;
  grid-column: 2/3;
}
@media (min-width: 768px) {
  .character-item.fuwamokosan {
    top: -60px;
    left: -5px;
    grid-row: 3/4;
    grid-column: 2/3;
  }
}
@media (min-width: 1080px) {
  .character-item.fuwamokosan {
    grid-row: 1/2;
    grid-column: 1/2;
    left: -65px;
    top: -20px;
  }
}
@media (min-width: 1442px) {
  .character-item.fuwamokosan {
    grid-row: 1/2;
    grid-column: 4/5;
    left: 0px;
    top: -112px;
  }
}
@media (min-width: 1920px) {
  .character-item.fuwamokosan {
    grid-row: 1/2;
    grid-column: 5/6;
    left: 20px;
    top: -70px;
  }
}
.character-item.hanako {
  top: 100px;
  left: 10px;
  grid-row: 4/5;
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .character-item.hanako {
    top: 70px;
    left: 30px;
    grid-row: 4/5;
    grid-column: 1/2;
  }
}
@media (min-width: 1080px) {
  .character-item.hanako {
    grid-row: 2/3;
    grid-column: 3/4;
    left: -75px;
    top: 50px;
  }
}
@media (min-width: 1442px) {
  .character-item.hanako {
    grid-row: 2/3;
    grid-column: 3/4;
    left: 90px;
    top: 20px;
  }
}
@media (min-width: 1920px) {
  .character-item.hanako {
    grid-row: 2/3;
    grid-column: 4/5;
    left: 0px;
    top: 30px;
  }
}
.character-item.labubu {
  top: 25px;
  left: -5px;
  grid-row: 4/5;
  grid-column: 2/3;
}
@media (min-width: 768px) {
  .character-item.labubu {
    top: -60px;
    left: -20px;
    grid-row: 4/5;
    grid-column: 2/3;
  }
}
@media (min-width: 1080px) {
  .character-item.labubu {
    grid-row: 1/2;
    grid-column: 3/4;
    left: 55px;
    top: 270px;
  }
}
@media (min-width: 1442px) {
  .character-item.labubu {
    grid-row: 1/2;
    grid-column: 3/4;
    left: 180px;
    top: 145px;
  }
}
@media (min-width: 1920px) {
  .character-item.labubu {
    grid-row: 1/2;
    grid-column: 4/5;
    left: 100px;
    top: 145px;
  }
}
.character-item.tumurin {
  top: 80px;
  left: 15px;
  grid-row: 5/6;
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .character-item.tumurin {
    top: 60px;
    left: 15px;
    grid-row: 5/6;
    grid-column: 1/2;
  }
}
@media (min-width: 1080px) {
  .character-item.tumurin {
    grid-row: 1/2;
    grid-column: 2/3;
    left: 100px;
    top: 60px;
  }
}
@media (min-width: 1442px) {
  .character-item.tumurin {
    grid-row: 1/2;
    grid-column: 2/3;
    left: 135px;
    top: -70px;
  }
}
@media (min-width: 1920px) {
  .character-item.tumurin {
    grid-row: 1/2;
    grid-column: 3/4;
    left: -30px;
    top: -85px;
  }
}
.character-item.yotubaba {
  top: -20px;
  left: -15px;
  grid-row: 5/6;
  grid-column: 2/3;
}
@media (min-width: 768px) {
  .character-item.yotubaba {
    top: 60px;
    left: 30px;
    grid-row: 7/8;
    grid-column: 1/2;
  }
}
@media (min-width: 1080px) {
  .character-item.yotubaba {
    grid-row: 2/3;
    grid-column: 3/4;
    left: -60px;
    top: -140px;
  }
}
@media (min-width: 1442px) {
  .character-item.yotubaba {
    grid-row: 1/2;
    grid-column: 3/4;
    left: 160px;
    top: -220px;
  }
}
@media (min-width: 1920px) {
  .character-item.yotubaba {
    grid-row: 1/2;
    grid-column: 4/5;
    left: 130px;
    top: -60px;
  }
}
.character-item.kirine {
  top: 65px;
  left: 15px;
  grid-row: 6/7;
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .character-item.kirine {
    top: 65px;
    left: 15px;
    grid-row: 6/7;
    grid-column: 1/2;
  }
}
@media (min-width: 1080px) {
  .character-item.kirine {
    grid-row: 3/4;
    grid-column: 3/4;
    left: 80px;
    top: -70px;
  }
}
@media (min-width: 1442px) {
  .character-item.kirine {
    grid-row: 3/4;
    grid-column: 4/5;
    left: -20px;
    top: -85px;
  }
}
@media (min-width: 1920px) {
  .character-item.kirine {
    grid-row: 3/4;
    grid-column: 5/6;
    left: -80px;
    top: -80px;
  }
}
.character-item.penpen {
  top: -50px;
  left: -15px;
  grid-row: 6/7;
  grid-column: 2/3;
}
@media (min-width: 768px) {
  .character-item.penpen {
    top: -140px;
    left: -25px;
    grid-row: 6/7;
    grid-column: 2/3;
  }
}
@media (min-width: 1080px) {
  .character-item.penpen {
    grid-row: 1/2;
    grid-column: 3/4;
    left: -35px;
    top: -60px;
  }
}
@media (min-width: 1442px) {
  .character-item.penpen {
    grid-row: 1/2;
    grid-column: 1/2;
    left: -20px;
    top: -140px;
  }
}
@media (min-width: 1920px) {
  .character-item.penpen {
    grid-row: 1/2;
    grid-column: 1/2;
    left: 40px;
    top: -110px;
  }
}
.character-item.stepandbagu {
  top: 40px;
  left: -5px;
  grid-row: 7/8;
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .character-item.stepandbagu {
    top: 125px;
    left: 0px;
    grid-row: 4/5;
    grid-column: 2/3;
  }
}
@media (min-width: 1080px) {
  .character-item.stepandbagu {
    grid-row: 3/4;
    grid-column: 2/3;
    left: 150px;
    top: -45px;
    transform: rotate(10deg);
  }
}
@media (min-width: 1442px) {
  .character-item.stepandbagu {
    grid-row: 3/4;
    grid-column: 3/4;
    left: 10px;
    top: -50px;
    transform: rotate(0deg);
  }
}
@media (min-width: 1920px) {
  .character-item.stepandbagu {
    grid-row: 3/4;
    grid-column: 4/5;
    left: -70px;
    top: -50px;
  }
}
.character-item.whitetaiga {
  top: -70px;
  left: -15px;
  grid-row: 7/8;
  grid-column: 2/3;
}
@media (min-width: 768px) {
  .character-item.whitetaiga {
    top: -150px;
    left: -15px;
    grid-row: 7/8;
    grid-column: 2/3;
  }
}
@media (min-width: 1080px) {
  .character-item.whitetaiga {
    grid-row: 1/2;
    grid-column: 1/2;
    left: 70px;
    top: -45px;
  }
}
@media (min-width: 1442px) {
  .character-item.whitetaiga {
    grid-row: 2/3;
    grid-column: 4/5;
    left: 30px;
    top: -30px;
  }
}
@media (min-width: 1920px) {
  .character-item.whitetaiga {
    grid-row: 2/3;
    grid-column: 5/6;
    left: 20px;
    top: -35px;
  }
}
.character-item.gurumakudon {
  top: 30px;
  left: 10px;
  grid-row: 8/9;
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .character-item.gurumakudon {
    top: 30px;
    left: 10px;
    grid-row: 8/9;
    grid-column: 1/2;
  }
}
@media (min-width: 1080px) {
  .character-item.gurumakudon {
    grid-row: 1/2;
    grid-column: 1/2;
    left: 50px;
    top: 150px;
  }
}
@media (min-width: 1442px) {
  .character-item.gurumakudon {
    grid-row: 1/2;
    grid-column: 1/2;
    left: 50px;
    top: 100px;
  }
}
@media (min-width: 1920px) {
  .character-item.gurumakudon {
    grid-row: 2/3;
    grid-column: 1/2;
    left: 0px;
    top: -120px;
  }
}
.character-item.dokyun {
  top: -90px;
  left: -15px;
  grid-row: 8/9;
  grid-column: 2/3;
}
@media (min-width: 768px) {
  .character-item.dokyun {
    top: -130px;
    left: 0px;
    grid-row: 8/9;
    grid-column: 2/3;
  }
}
@media (min-width: 1080px) {
  .character-item.dokyun {
    grid-row: 1/2;
    grid-column: 1/2;
    left: 210px;
    top: 10px;
  }
}
@media (min-width: 1442px) {
  .character-item.dokyun {
    grid-row: 1/2;
    grid-column: 1/2;
    left: 200px;
    top: -100px;
  }
}
@media (min-width: 1920px) {
  .character-item.dokyun {
    grid-row: 1/2;
    grid-column: 2/3;
    left: 20px;
    top: -160px;
  }
}
.character-item.kokekoke {
  top: 10px;
  left: 15px;
  grid-row: 9/10;
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .character-item.kokekoke {
    top: 10px;
    left: 15px;
    grid-row: 9/10;
    grid-column: 1/2;
  }
}
@media (min-width: 1080px) {
  .character-item.kokekoke {
    grid-row: 2/3;
    grid-column: 1/2;
    left: 70px;
    top: 80px;
  }
}
@media (min-width: 1442px) {
  .character-item.kokekoke {
    grid-row: 2/3;
    grid-column: 1/2;
    left: 120px;
    top: 0px;
  }
}
@media (min-width: 1920px) {
  .character-item.kokekoke {
    grid-row: 2/3;
    grid-column: 1/2;
    left: 220px;
    top: 40px;
  }
}
.character-item.pyosuke {
  top: -115px;
  left: -15px;
  grid-row: 9/10;
  grid-column: 2/3;
}
@media (min-width: 768px) {
  .character-item.pyosuke {
    top: -170px;
    left: 0px;
    grid-row: 10/11;
    grid-column: 2/3;
  }
}
@media (min-width: 1080px) {
  .character-item.pyosuke {
    grid-row: 2/3;
    grid-column: 1/2;
    left: -60px;
    top: -5px;
  }
}
@media (min-width: 1442px) {
  .character-item.pyosuke {
    grid-row: 2/3;
    grid-column: 1/2;
    left: -45px;
    top: -20px;
  }
}
@media (min-width: 1920px) {
  .character-item.pyosuke {
    grid-row: 1/2;
    grid-column: 1/2;
    left: 200px;
    top: 80px;
  }
}
.character-item.paoonu {
  top: -5px;
  left: 50px;
  grid-row: 10/11;
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .character-item.paoonu {
    top: -5px;
    left: 50px;
    grid-row: 10/11;
    grid-column: 1/2;
  }
}
@media (min-width: 1080px) {
  .character-item.paoonu {
    grid-row: 3/4;
    grid-column: 2/3;
    left: -100px;
    top: 25px;
  }
}
@media (min-width: 1442px) {
  .character-item.paoonu {
    grid-row: 3/4;
    grid-column: 2/3;
    left: -40px;
    top: -10px;
  }
}
@media (min-width: 1920px) {
  .character-item.paoonu {
    grid-row: 3/4;
    grid-column: 3/4;
    left: -200px;
    top: 20px;
  }
}
.character-item.cher {
  top: -140px;
  left: -15px;
  grid-row: 10/11;
  grid-column: 2/3;
}
@media (min-width: 768px) {
  .character-item.cher {
    top: -140px;
    left: -15px;
    grid-row: 9/10;
    grid-column: 2/3;
  }
}
@media (min-width: 1080px) {
  .character-item.cher {
    grid-row: 1/2;
    grid-column: 3/4;
    left: 70px;
    top: 100px;
  }
}
@media (min-width: 1442px) {
  .character-item.cher {
    grid-row: 1/2;
    grid-column: 3/4;
    left: 80px;
    top: -42px;
  }
}
@media (min-width: 1920px) {
  .character-item.cher {
    grid-row: 1/2;
    grid-column: 4/5;
    left: -60px;
    top: -100px;
  }
}

/*.character-item:nth-child(odd) {
  // top: -100px;
  right: 75px;
  @media (min-width: var.$breakpoint-medium) {
    right: initial;
  }
}

.character-item:nth-child(even) {
  // top: -200px;
  left: 75px;
  @media (min-width: var.$breakpoint-medium) {
    left: initial;
  }
}*/
.character-item img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  scale: 1.1;
  transform: translateY(9px);
}
@media (min-width: 768px) {
  .character-item img {
    scale: 1.3;
  }
}
@media (min-width: 1080px) {
  .character-item img {
    scale: 1.1;
  }
}
@media (min-width: 1920px) {
  .character-item img {
    scale: 1.375;
  }
}

.character-text-container {
  width: 130px;
  margin: 0 auto;
  position: relative;
}
@media (min-width: 1920px) {
  .character-text-container {
    width: 260px;
  }
}
.character-text-container.hardy {
  top: -35px;
  width: 80px;
  margin-left: 0px;
  left: 35px;
}
@media (min-width: 768px) {
  .character-text-container.hardy {
    top: -40px;
    width: 160px;
    margin-left: 0px;
    left: 80px;
  }
}
@media (min-width: 1080px) {
  .character-text-container.hardy {
    width: 180px;
    top: -40px;
    margin-left: auto;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.hardy {
    width: 260px;
    top: -50px;
    margin-left: auto;
    left: 0px;
  }
}
.character-text-container.d-bat-nomal {
  top: 20px;
  left: 0px;
}
@media (min-width: 1442px) {
  .character-text-container.d-bat-nomal {
    top: 20px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.d-bat-nomal {
    top: 20px;
  }
}
.character-text-container.momoirogaeru {
  top: 0px;
  left: 20px;
}
@media (min-width: 768px) {
  .character-text-container.momoirogaeru {
    top: 30px;
    left: 20px;
  }
}
@media (min-width: 1080px) {
  .character-text-container.momoirogaeru {
    top: 0px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.momoirogaeru {
    top: 0px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.momoirogaeru {
    top: 30px;
  }
}
.character-text-container.fuwamokosan {
  top: 0px;
  left: 20px;
}
@media (min-width: 768px) {
  .character-text-container.fuwamokosan {
    top: 30px;
    left: 20px;
  }
}
@media (min-width: 1080px) {
  .character-text-container.fuwamokosan {
    top: 0px;
    left: -25px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.fuwamokosan {
    top: 0px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.fuwamokosan {
    top: 20px;
  }
}
.character-text-container.hanako {
  top: -20px;
  left: 15px;
}
@media (min-width: 1080px) {
  .character-text-container.hanako {
    top: -30px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.hanako {
    top: -40px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.hanako {
    top: -40px;
  }
}
.character-text-container.labubu {
  top: -30px;
  left: 20px;
}
@media (min-width: 768px) {
  .character-text-container.labubu {
    top: -50px;
    left: 20px;
  }
}
@media (min-width: 1080px) {
  .character-text-container.labubu {
    top: -70px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.labubu {
    top: -70px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.labubu {
    top: -70px;
  }
}
.character-text-container.tumurin {
  top: -25px;
  left: 30px;
}
@media (min-width: 768px) {
  .character-text-container.tumurin {
    top: -40px;
    left: 30px;
  }
}
@media (min-width: 1080px) {
  .character-text-container.tumurin {
    top: -65px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.tumurin {
    top: -50px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.tumurin {
    top: -50px;
    left: 0px;
  }
}
.character-text-container.yotubaba {
  top: -30px;
  left: 35px;
}
@media (min-width: 768px) {
  .character-text-container.yotubaba {
    top: -40px;
    left: 35px;
  }
}
@media (min-width: 1080px) {
  .character-text-container.yotubaba {
    top: -60px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.yotubaba {
    top: -70px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.yotubaba {
    top: -50px;
  }
}
.character-text-container.kirine {
  top: 0px;
  left: 20px;
}
@media (min-width: 768px) {
  .character-text-container.kirine {
    top: 20px;
    left: 20px;
  }
}
@media (min-width: 1080px) {
  .character-text-container.kirine {
    top: -20px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.kirine {
    top: -20px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.kirine {
    top: 0px;
  }
}
.character-text-container.penpen {
  top: -15px;
  left: 30px;
}
@media (min-width: 768px) {
  .character-text-container.penpen {
    top: -15px;
    left: 45px;
  }
}
@media (min-width: 1080px) {
  .character-text-container.penpen {
    top: -40px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.penpen {
    top: -20px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.penpen {
    top: -20px;
    left: 0px;
  }
}
.character-text-container.stepandbagu {
  top: -20px;
  left: 20px;
}
@media (min-width: 1080px) {
  .character-text-container.stepandbagu {
    top: -45px;
    left: 0px;
    transform: rotate(-10deg);
  }
}
@media (min-width: 1442px) {
  .character-text-container.stepandbagu {
    top: -30px;
    left: 0px;
    transform: rotate(0deg);
  }
}
@media (min-width: 1920px) {
  .character-text-container.stepandbagu {
    top: -30px;
    left: 0px;
  }
}
.character-text-container.whitetaiga {
  top: -20px;
  left: 20px;
}
@media (min-width: 1080px) {
  .character-text-container.whitetaiga {
    top: -50px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.whitetaiga {
    top: -50px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.whitetaiga {
    top: -40px;
  }
}
.character-text-container.gurumakudon {
  top: -15px;
  left: 15px;
}
@media (min-width: 1080px) {
  .character-text-container.gurumakudon {
    top: -50px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.gurumakudon {
    top: -45px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.gurumakudon {
    top: -25px;
  }
}
.character-text-container.dokyun {
  top: -15px;
  left: 20px;
}
@media (min-width: 1080px) {
  .character-text-container.dokyun {
    top: -35px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.dokyun {
    top: -30px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.dokyun {
    top: -10px;
  }
}
.character-text-container.kokekoke {
  top: -15px;
  left: 25px;
}
@media (min-width: 1080px) {
  .character-text-container.kokekoke {
    top: -40px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.kokekoke {
    top: -35px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.kokekoke {
    top: -20px;
  }
}
.character-text-container.pyosuke {
  top: -25px;
  left: 25px;
}
@media (min-width: 1080px) {
  .character-text-container.pyosuke {
    top: -60px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.pyosuke {
    top: -60px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.pyosuke {
    top: -45px;
  }
}
.character-text-container.paoonu {
  top: -20px;
  left: 40px;
}
@media (min-width: 1080px) {
  .character-text-container.paoonu {
    top: -50px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.paoonu {
    top: -40px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.paoonu {
    top: -30px;
  }
}
.character-text-container.cher {
  top: -15px;
  left: 40px;
}
@media (min-width: 1080px) {
  .character-text-container.cher {
    top: -45px;
    left: 0px;
  }
}
@media (min-width: 1442px) {
  .character-text-container.cher {
    top: -30px;
    left: 0px;
  }
}
@media (min-width: 1920px) {
  .character-text-container.cher {
    top: -30px;
  }
}

.character-name {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  font-size: 14px;
}
@media (min-width: 768px) {
  .character-name {
    font-size: 16px;
  }
}
@media (min-width: 1920px) {
  .character-name {
    font-size: 17.5px;
  }
}
@media (min-width: 1442px) {
  .character-name.hardy {
    font-size: 20px;
  }
}
.character-description {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  font-size: 10px;
  margin-top: 5px;
}
@media (min-width: 768px) {
  .character-description {
    font-size: 11px;
  }
}
@media (min-width: 1920px) {
  .character-description {
    font-size: 12.5px;
  }
}
@media (min-width: 1442px) {
  .character-description.hardy {
    font-size: 15px;
  }
}
@media (min-width: 360px) {
  .character-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .character-item {
    top: 0;
    left: 0;
    right: 0;
  }
}
@media (min-width: 768px) {
  .character-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 282px;
  }
  .character-item {
    top: 0;
    left: 0;
    right: 0;
  }
}
@media (min-width: 1080px) {
  .character-grid {
    grid-template-columns: repeat(3, 261px);
  }
  .character-item {
    top: 0;
    left: 0;
    right: 0;
  }
}
@media (min-width: 1442px) {
  .character-grid {
    grid-template-columns: repeat(4, 282px);
  }
  .character-item {
    top: 0;
    left: 0;
    right: 0; /* タブレット以上ではずらしを解除 */
  }
}
@media (min-width: 1920px) {
  .character-grid {
    grid-template-columns: repeat(5, 289px);
  }
  .character-item {
    top: 0;
    left: 0;
    right: 0; /* タブレット以上ではずらしを解除 */
  }
}
.instagram-character-container {
  position: relative;
  margin: 0 auto;
}
.instagram-character-container .character.yotubaba {
  width: 114px;
  height: auto;
  top: -270px;
  left: -17px;
}
@media (min-width: 768px) {
  .instagram-character-container .character.yotubaba {
    width: 151px;
    height: auto;
    top: -260px;
    left: -21px;
  }
}
@media (min-width: 1080px) {
  .instagram-character-container .character.yotubaba {
    width: 259px;
    height: auto;
    top: -401px;
    left: 39px;
  }
}
.instagram-character-container .character.penpen {
  width: 170px;
  height: auto;
  top: -288px;
  right: -30px;
  transform: rotate(10deg);
}
@media (min-width: 768px) {
  .instagram-character-container .character.penpen {
    width: 226px;
    height: auto;
    top: -338px;
    right: -98px;
  }
}
@media (min-width: 1080px) {
  .instagram-character-container .character.penpen {
    width: 356px;
    height: auto;
    top: -501px;
    right: -59px;
  }
}

.instagram-feed {
  max-width: 1200px;
  width: 100%;
  background-color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.profile-picture {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}
@media (min-width: 1080px) {
  .profile-picture {
    width: 80px;
    height: 80px;
  }
}

.username {
  font-size: 14px;
  font-weight: bold;
  color: #342e4f;
  font-family: "Noto Sans JP", sans-serif;
}
@media (min-width: 1080px) {
  .username {
    font-size: 20px;
  }
}

.post-grid {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1080px) {
  .post-grid {
    gap: 20px;
  }
}

.post-item {
  position: relative;
  width: 95%;
  padding-top: 95%; /* 正方形の枠を作るためにアスペクト比を維持 */
  overflow: hidden;
  border-radius: 10px;
}

.post-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 画像が枠に収まるように調整 */
}

.caption {
  padding: 10px;
  font-size: 0.9rem;
  color: #333;
}

@media (min-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.post-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.post-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.caption {
  color: white;
  font-size: 8px;
  text-align: center;
  padding: 10px;
  word-break: break-word;
}
@media (min-width: 768px) {
  .caption {
    font-size: 14px;
  }
}

.post-item:hover .post-image {
  transform: scale(1.1);
}

.post-item:hover .overlay {
  opacity: 1;
}

.instagram-error {
  color: #342e4f;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}

.instagram-link {
  display: block;
  color: #007bff;
  text-align: center;
  font-size: 16px;
  margin-top: 10px;
  text-decoration: none;
}

.instagram-link:hover {
  text-decoration: underline;
}

.br-on-sm {
  display: block;
}

.br-on-md {
  display: none;
}

.br-on-lg {
  display: none;
}

.br-on-ll {
  display: none;
}

.br-on-xl {
  display: none;
}

@media (min-width: 768px) {
  .br-on-sm {
    display: none;
  }
  .br-on-md {
    display: block;
  }
}
@media (min-width: 1080px) {
  .br-on-md {
    display: none;
  }
  .br-on-lg {
    display: block;
  }
}
@media (min-width: 1500px) {
  .br-on-lg {
    display: none;
  }
  .br-on-ll {
    display: block;
  }
}
@media (min-width: 1920px) {
  .br-on-ll {
    display: none;
  }
  .br-on-xl {
    display: block;
  }
}
.ameba {
  background-size: cover;
}
.ameba13 {
  background-image: url("../images/ameba13.png");
  width: 218.5px;
  height: 223px;
  top: -236px;
  left: -131px;
}
@media (min-width: 768px) {
  .ameba13 {
    width: 248px;
    height: 253px;
    top: -238px;
    left: -130px;
  }
}
@media (min-width: 1080px) {
  .ameba13 {
    width: 424px;
    height: 433px;
    top: -460px;
    left: -390px;
  }
}
.ameba14 {
  background-image: url("../images/ameba14.png");
  width: 0px;
  height: 0px;
  top: -117px;
  right: -76px;
}
@media (min-width: 768px) {
  .ameba14 {
    width: 208px;
    height: 160px;
    top: -151px;
    right: -50px;
  }
}
@media (min-width: 1080px) {
  .ameba14 {
    width: 272px;
    height: 210px;
    top: -188px;
    right: -110px;
  }
}

.anisakis {
  background-size: cover;
}
.anisakis12 {
  background-image: url("../images/anisakis12-sp.png");
  width: 59px;
  height: 33px;
  top: 102px;
  left: 0;
}
@media (min-width: 768px) {
  .anisakis12 {
    background-image: url("../images/anisakis12-tab.png");
    width: 133px;
    height: 42px;
    top: 85px;
    right: 0px;
  }
}
@media (min-width: 1080px) {
  .anisakis12 {
    background-image: url("../images/anisakis12-pc.png");
    width: 0px;
    height: 110px;
    top: 152px;
    right: 0px;
  }
}
@media (min-width: 1920px) {
  .anisakis12 {
    background-image: url("../images/anisakis12-pc.png");
    width: 374px;
    height: 110px;
    top: 152px;
    right: 0px;
  }
}

.shop-character-container {
  position: relative;
}
.shop-character-container .character.whitetaiga {
  width: 0px;
  height: auto;
  top: -190px;
  left: 10px;
}
@media (min-width: 768px) {
  .shop-character-container .character.whitetaiga {
    width: 220px;
    height: auto;
    top: -284px;
    left: 42px;
  }
}
@media (min-width: 1080px) {
  .shop-character-container .character.whitetaiga {
    width: 280px;
    height: auto;
    top: -448px;
    left: 50px;
  }
}
@media (min-width: 1920px) {
  .shop-character-container .character.whitetaiga {
    width: 310px;
    height: auto;
    top: -435px;
    left: 250px;
  }
}
.shop-character-container .character.stepandbagu {
  width: 192px;
  height: auto;
  top: -280px;
  right: -5px;
  transform: rotate(20deg);
}
@media (min-width: 768px) {
  .shop-character-container .character.stepandbagu {
    width: 267px;
    height: auto;
    top: -321px;
    right: 21px;
  }
}
@media (min-width: 1080px) {
  .shop-character-container .character.stepandbagu {
    width: 407px;
    height: auto;
    top: -431px;
    right: 0px;
  }
}
@media (min-width: 1920px) {
  .shop-character-container .character.stepandbagu {
    width: 407px;
    height: auto;
    top: -430px;
    right: 170px;
  }
}

.shop .card-header-white {
  text-align: center;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .shop .card-header-white {
    margin-bottom: 60px;
  }
}
@media (min-width: 1080px) {
  .shop .card-header-white {
    margin-bottom: 100px;
  }
}

.shop-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .shop-content {
    flex-direction: row;
  }
}

.shop-info {
  flex: 1 1 45%;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .shop-info {
    margin-bottom: 0;
  }
}

.shop-map-container {
  width: 80%;
  position: relative;
  margin: 0 auto;
  left: -10vw;
}
@media (min-width: 768px) {
  .shop-map-container {
    width: 40%;
    left: -6vw;
  }
}

iframe {
  background-image: url("../images/what-is-shop.jpg");
  position: absolute;
  right: -50px;
  top: 0;
  width: 105%;
  height: 237px;
  border-radius: 52px;
  background-size: cover;
  background-position: center;
  z-index: 2;
}
@media (min-width: 768px) {
  iframe {
    width: 102%;
    height: 99%;
  }
}
@media (min-width: 1080px) {
  iframe {
    left: 0px;
    width: 498.75px;
    height: 411.74px;
  }
}
@media (min-width: 1500px) {
  iframe {
    left: 0px;
    width: 665px;
    height: 411.74px;
  }
}

.shop-map-back {
  background-color: white;
  position: absolute;
  right: -50px;
  top: 20px;
  width: 110%;
  height: 237px;
  border-radius: 52px;
  z-index: 1;
}
@media (min-width: 768px) {
  .shop-map-back {
    width: 110%;
    height: 100%;
  }
}
@media (min-width: 1080px) {
  .shop-map-back {
    left: 33px;
    top: 33px;
    width: 498.75px;
    height: 411.74px;
  }
}
@media (min-width: 1500px) {
  .shop-map-back {
    left: 33px;
    top: 33px;
    width: 665px;
    height: 411.74px;
  }
}

.info-container {
  background-color: #ff3f3f;
  padding: 20px;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
}

.info-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 14px;
}
@media (min-width: 1080px) {
  .info-row {
    margin-bottom: 28px;
  }
}

.info-label {
  flex: 0 0 76px;
  font-size: 13px;
}
@media (min-width: 1080px) {
  .info-label {
    flex: 0 0 140px;
    font-size: 20px;
  }
}

.info-separator {
  margin: 0 10px;
}
@media (min-width: 1080px) {
  .info-separator {
    margin: 0 40px;
  }
}

.info-value {
  flex: 1;
  font-size: 13px;
  line-height: 2.3;
}
@media (min-width: 1080px) {
  .info-value {
    font-size: 18px;
  }
}

.info-row:last-child {
  margin-bottom: 0;
}

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

.u1r .u1r-embedded .u1r-embedded-iframe .u1r-embedded-iframe-body {
  position: relative;
}

.u1r .u1r-embedded .u1r-embedded-iframe .u1r-embedded-iframe-body iframe {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.u1r .u1r-embedded .u1r-embedded-backdrop {
  left: 22px;
}
@media (min-width: 1080px) {
  .u1r .u1r-embedded .u1r-embedded-backdrop {
    bottom: 50px;
    left: 50px;
  }
}

.u1r .u1r-embedded .u1r-embedded-a {
  left: 20px;
  position: relative;
  display: inline-block;
}
@media (min-width: 1080px) {
  .u1r .u1r-embedded .u1r-embedded-a {
    width: 100px !important;
    height: 100px !important;
  }
}

@keyframes tremble {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(40deg);
  }
  20% {
    transform: rotate(-40deg);
  }
  30% {
    transform: rotate(30deg);
  }
  40% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(20deg);
  }
  60% {
    transform: rotate(-20deg);
  }
  70% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.u1r .u1r-embedded-a {
  border: 2px solid #ffffff;
}

.u1r-embedded-a:hover > span {
  animation: tremble 0.5s ease-in-out;
  transform-origin: center center;
}

.u1r-embedded-a > span,
.u1r-embedded-iframe-header-title {
  font-family: "Noto Sans JP", sans-serif;
  visibility: hidden;
  position: relative;
}
@media (min-width: 1080px) {
  .u1r-embedded-a > span,
  .u1r-embedded-iframe-header-title {
    font-size: 22px !important;
  }
}

.u1r-embedded-a > span::after,
.u1r-embedded-iframe-header-title::after {
  font-family: "Noto Sans JP", sans-serif;
  content: "受取予約";
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.u1r .u1r-embedded .u1r-embedded-iframe {
  left: 0px;
}

.u1r.open .u1r-embedded .u1r-embedded-backdrop {
  left: 0px;
}

.u1r-embedded-backdrop {
  left: 22px;
  bottom: 22px;
}

@media (min-width: 768px) {
  .d-md-none {
    display: none;
  }
}

main,
.no-scroll {
  overflow: hidden;
}

.container {
  position: relative;
  height: 100%;
  max-width: 380px;
  margin: 0 clamp(30px, 8vw, 150px);
}
@media (min-width: 768px) {
  .container {
    margin: 0 clamp(30px, 8vw, 150px);
    max-width: 780px;
    margin: 0 auto;
  }
}
@media (min-width: 1080px) {
  .container {
    max-width: 1620px;
    margin: 0 clamp(30px, 8vw, 150px);
  }
}
@media (min-width: 1920px) {
  .container {
    max-width: 3240px;
    margin: 0 clamp(30px, 8vw, 300px);
  }
}

.box {
  width: 100%;
  padding: 20px 0 70px 0;
  background-color: #ff3f3f;
  position: relative;
  z-index: 0;
}
@media (min-width: 768px) {
  .box {
    padding: 20px 0 90px 0;
  }
}
@media (min-width: 1080px) {
  .box {
    padding: 40px 0 190px 0;
  }
}
.box.red-background {
  background-color: #ff3f3f;
}
.box.blue-background {
  background-color: #6ad3ff;
}
.box.what-is {
  height: 1900px;
}
@media (min-width: 768px) {
  .box.what-is {
    height: 1470px;
  }
}
@media (min-width: 1080px) {
  .box.what-is {
    padding-top: 0;
    height: 1700px;
  }
}
.box.shop {
  height: 930px;
}
@media (min-width: 768px) {
  .box.shop {
    height: 650px;
  }
}
@media (min-width: 1080px) {
  .box.shop {
    padding-top: 0;
    height: 890px;
  }
}
.wave-red {
  position: absolute;
  top: -67px;
  width: 100%;
  height: 70px;
  background-image: url("../images/wave-red-sp.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media (min-width: 768px) {
  .wave-red {
    top: -95px;
    height: 110px;
    background-image: url("../images/wave-red-tab.png");
  }
}
@media (min-width: 1080px) {
  .wave-red {
    top: -115px;
    height: 235px;
    background-image: url("../images/wave-red-tab.png");
  }
}

.wave-red-reverse {
  position: absolute;
  top: -68px;
  width: 100%;
  height: 70px;
  background-image: url("../images/wave-red-sp-reverse.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media (min-width: 768px) {
  .wave-red-reverse {
    top: -95px;
    height: 110px;
    background-image: url("../images/wave-red-tab-reverse.png");
  }
}
@media (min-width: 1080px) {
  .wave-red-reverse {
    top: -115px;
    height: 235px;
    background-image: url("../images/wave-red-tab-reverse.png");
  }
}

.wave-blue {
  position: absolute;
  z-index: auto;
  top: -68px;
  width: 100%;
  height: 70px;
  background-image: url("../images/wave-blue-sp.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media (min-width: 768px) {
  .wave-blue {
    top: -95px;
    height: 110px;
    background-image: url("../images/wave-blue-tab.png");
  }
}
@media (min-width: 1080px) {
  .wave-blue {
    top: -115px;
    height: 235px;
    background-image: url("../images/wave-blue-pc.png");
  }
}

.wave-blue-reverse {
  position: absolute;
  z-index: auto;
  top: -68px;
  width: 100%;
  height: 70px;
  background-image: url("../images/wave-blue-sp-reverse.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media (min-width: 768px) {
  .wave-blue-reverse {
    top: -95px;
    height: 110px;
    background-image: url("../images/wave-blue-tab-reverse.png");
  }
}
@media (min-width: 1080px) {
  .wave-blue-reverse {
    top: -135px;
    height: 235px;
  }
}

.character,
.ameba {
  position: absolute;
}

.character {
  z-index: 1;
}

.anisakis {
  position: absolute;
  z-index: 2;
}

.card-container {
  position: relative;
  width: 93%;
  margin: 0 auto 40px auto;
  max-width: 610px;
}
@media (min-width: 1080px) {
  .card-container {
    max-width: initial;
  }
}
.card-container.drink-menu {
  position: relative;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .card-container.drink-menu {
    margin-top: 40px;
  }
}

.card-background {
  max-width: 1820px;
  position: absolute;
  top: 10px;
  left: 10px;
  right: -5px;
  bottom: -5px;
  background-color: #f4de25;
  z-index: 2;
  border-radius: 60px;
}
@media (min-width: 768px) {
  .card-background {
    right: -7px;
    bottom: -7px;
  }
}
@media (min-width: 1080px) {
  .card-background {
    max-width: initial;
  }
}

.card-content {
  position: relative;
  background-color: #ffffe5;
  border-radius: 60px;
  padding: 45px 20px;
  border: 5px solid #f4de25;
  z-index: 3;
}
@media (min-width: 768px) {
  .card-content {
    padding: 45px 30px;
  }
}
@media (min-width: 1080px) {
  .card-content {
    padding: 45px 50px 45px 50px;
  }
}
@media (min-width: 1920px) {
  .card-content {
    padding: 45px 50px 75px 50px;
  }
}

.card-header-white {
  color: white;
  z-index: 1;
}
.card-header-white .title {
  font-family: "Fugaz One", cursive;
  font-size: 40px;
}
@media (min-width: 1080px) {
  .card-header-white .title {
    font-size: 46px;
  }
}
.card-header-white .subtitle {
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 25px;
}
@media (min-width: 1080px) {
  .card-header-white .subtitle {
    font-size: 26px;
  }
}

.card-header-black {
  color: #342e4f;
  text-align: center;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .card-header-black {
    margin-bottom: 40px;
  }
}
@media (min-width: 1080px) {
  .card-header-black {
    margin-bottom: 50px;
  }
}
@media (min-width: 1920px) {
  .card-header-black {
    margin-bottom: 60px;
  }
}
.card-header-black .title {
  font-family: "Fugaz One", cursive;
  font-size: 40px;
}
@media (min-width: 1080px) {
  .card-header-black .title {
    font-size: 46px;
  }
}
.card-header-black .subtitle {
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 25px;
}
@media (min-width: 1080px) {
  .card-header-black .subtitle {
    font-size: 26px;
  }
}

@media (min-width: 1650px) {
  .wave-red,
  .wave-blue,
  .wave-red-reverse,
  .wave-blue-reverse {
    top: -135px;
  }
}
@media (min-width: 1800px) {
  .wave-red,
  .wave-blue,
  .wave-red-reverse,
  .wave-blue-reverse {
    top: -140px;
  }
}
@media (min-width: 2000px) {
  .wave-red,
  .wave-blue,
  .wave-red-reverse,
  .wave-blue-reverse {
    top: -150px;
  }
}
@media (min-width: 2200px) {
  .wave-red,
  .wave-blue,
  .wave-red-reverse,
  .wave-blue-reverse {
    top: -160px;
  }
}
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 1000;
  padding: 0;
  transition: transform 0.3s ease;
}

.back-to-top.show {
  display: block;
}

.back-to-top img {
  width: 70px;
  height: auto;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
  .back-to-top img {
    width: 80px;
  }
}
@media (min-width: 1080px) {
  .back-to-top img {
    width: 120px;
  }
}

@keyframes flyUp {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  10% {
    transform: translateY(-20px) translateX(40px) rotate(-20deg);
  }
  20% {
    transform: translateY(-40px) translateX(-40px) rotate(20deg);
  }
  30% {
    transform: translateY(-60px) translateX(40px) rotate(-20deg);
  }
  40% {
    transform: translateY(-80px) translateX(-40px) rotate(20deg);
  }
  50% {
    transform: translateY(-100px) translateX(40px) rotate(-20deg);
  }
  60% {
    transform: translateY(-120px) translateX(-40px) rotate(20deg);
  }
  70% {
    transform: translateY(-140px) translateX(30px) rotate(-20deg);
  }
  80% {
    transform: translateY(-160px) translateX(-30px) rotate(20deg);
  }
  90% {
    transform: translateY(-180px) translateX(30px) rotate(-10deg);
  }
  100% {
    transform: translateY(-200px) translateX(-10px) rotate(10deg);
  }
}
.back-to-top.fly {
  animation: flyUp 1.8s ease-in-out forwards;
}

.shape-animation {
  opacity: 0;
  transform: scale(0) translateY(0);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

@keyframes scaleUpDown {
  0% {
    transform: scale(0) translateY(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.05) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
@keyframes shakeUpDown {
  0% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.02) translateY(30px) skewX(-5deg);
  }
  50% {
    transform: scale(1) translateY(0);
  }
  75% {
    transform: scale(1.02) translateY(30px) skewX(5deg);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.shape-animation.active {
  animation: scaleUpDown 1.5s forwards;
}

.shape-animation-pattern1.active {
  animation: scaleUpDown 1.5s forwards, shakeUpDownPattern1 12s ease-in-out infinite 1.3s;
}

.shape-animation-pattern2.active {
  animation: scaleUpDown 1.5s forwards, shakeUpDownPattern2 10s ease-in-out infinite 1.3s;
}

.shape-animation-pattern3.active {
  animation: scaleUpDown 1.5s forwards, shakeUpDownPattern3 14s ease-in-out infinite 1.3s;
}

@keyframes shakeUpDownPattern1 {
  0% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.02) translateY(-30px) skewX(-5deg);
  }
  50% {
    transform: scale(1) translateY(0);
  }
  75% {
    transform: scale(1.02) translateY(-30px) skewX(5deg);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@keyframes shakeUpDownPattern2 {
  0% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.02) translateY(15px) skewX(-3deg);
  }
  50% {
    transform: scale(1) translateY(0);
  }
  75% {
    transform: scale(1.02) translateY(15px) skewX(3deg);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@keyframes shakeUpDownPattern3 {
  0% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.02) translateY(0) translateX(-15px) skewY(-5deg);
  }
  50% {
    transform: scale(1) translateY(20px);
  }
  75% {
    transform: scale(1.02) translateY(10px) translateX(15px) skewY(5deg);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
#floating-image {
  position: fixed;
  right: 0px;
  top: 65%;
  width: 0px;
  height: auto;
  border: #000000 2px solid;
  color: #000000;
}

.floating-image-character {
  position: absolute;
  right: -20px;
  top: 20px;
  width: 100px;
  height: auto;
  transform: rotate(-35deg);
}
@media (min-width: 1080px) {
  .floating-image-character {
    right: -30px;
    top: 30px;
    width: 120px;
  }
}

.speech-bubble {
  position: absolute;
  bottom: 100%;
  font-size: 14px;
  left: 33%;
  transform: translate(-51px, 8px);
  width: 50px;
  height: 200px;
  padding: 2px;
  background: #ffffff;
  border-radius: 10px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: solid black 2px;
}
@media (min-width: 1080px) {
  .speech-bubble {
    height: 245px;
    padding: 15px;
  }
}

.speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #000;
}

.modal {
  display: none;
  justify-content: center;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
}

.modal-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 600px;
  color: #fff;
}

.modal-text {
  text-align: center;
  margin: 5px 0 0;
  font-size: 12px;
}
@media (min-width: 1080px) {
  .modal-text {
    font-size: 22px;
  }
}

#modal-video {
  height: auto;
  max-height: 70vh;
  margin-top: 7%;
}
@media (min-width: 1080px) {
  #modal-video {
    max-height: 80vh;
    margin-top: 0;
  }
}

.close-modal-btn {
  z-index: 10;
  position: absolute;
  height: 67px;
  top: 0;
  right: 5px;
  font-size: 60px;
  cursor: pointer;
  color: #fff;
}

/* .open-modal-btn {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px; 
}*/
.open-modal-btn img {
  width: 43px;
  height: auto;
  margin-bottom: 3px;
}

#open-modal .fa-line {
  color: #06c755; /* LINE green */
  font-size: 2.5em; /* Adjust size as needed */
  vertical-align: middle; /* Align icon vertically */
}/*# sourceMappingURL=main.css.map */