@charset "utf-8";
/* CSS Document */
/*全ページ共通-----------------------------------------------------------------------------*/
* {
 cursor: url("../img/icon.png"), auto;
}
html {
 scroll-behavior: smooth;
}
body {
 font-family: 'BIZ UDPGothic', sans-serif;
 color: #533D3D;
 font-size: 16px;
 font-weight: 400;
 line-height: 1.5;
 line-break: strict;
 background: #CCE8E4;
}
h2 {
 font-family: 'Quicksand', 'Kosugi Maru', sans-serif;
 font-size: 3rem;
 font-weight: 600;
 text-transform: uppercase;
}
h3 {
 font-family: 'Kosugi Maru', sans-serif;
 font-size: 2rem;
}
ul {
 list-style: none;
 padding: 0;
}
a {
 color: #533D3D;
 text-decoration: none;
}
/*header*/
h1 {
 margin: 0 auto 10px;
 text-align: center;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 10;
 padding-top: 10px;
}
h1 img {
 width: 50px;
}
/*スマホ版ナビゲーション*/
#nav-pc {
 display: none;
}
#nav-sp {
 background: #EBC3DB;
 width: 100vw;
 position: fixed;
 bottom: 0;
 z-index: 100;
}
#nav-sp ul {
 margin: 5px;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
}
#nav-sp ul li {
 text-align: center;
 height: 71px;
}
#nav-sp ul li:first-child img {
 width: 60px;
 margin: 0 auto;
}
#nav-sp ul li:nth-child(2) img {
 width: 30px;
 margin: 0 auto;
}
#nav-sp ul li:nth-child(3) img {
 width: 54px;
 margin: 0 auto;
}
#nav-sp ul li p {
 margin: 0;
 text-align: center;
 line-height: 1;
 text-transform: uppercase;
 font-family: 'Quicksand', sans-serif;
 font-weight: 600;
}
/*snsリンク*/
.div-sns-link {
 background: url("../img/icecream-in-shop.jpg") no-repeat center/cover;
}
#sns-link {
	max-width: 375px;
 padding: 20px 0;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 align-items: center;
}
#sns-link li:nth-child(1), #sns-link li:nth-child(2) {
 margin-bottom: 20px;
}
#sns-link li {
 width: 150px;
 height: 50px;
}
#sns-link li a {
 display: block;
 width: 150px;
 padding: 10px 0;
 background: rgba(250, 250, 250, 0.2);
 border: 1px solid #fafafa;
 color: #fafafa;
 font-family: 'Quicksand', sans-serif;
 font-weight: 500;
 text-align: center;
}
/*footer*/
footer {
 background: #EBC3DB;
 padding: 10px 0 81px 0;
 text-align: center;
 font-family: 'Quicksand', sans-serif;
 font-weight: 600;
}
footer a p {
 margin: 0;
}
footer a p span {
 font-size: 2rem;
}
/*トップページ-----------------------------------------------------------------------------*/
/*ヒーロー*/
#toppage header {
	clip-path: circle(800px at 50% 0);
}
#toppage header {
 background: linear-gradient(315deg, #ebc3db, #f5efb5, #cce8e4, #fafafa);
 background-size: 800% 800%;
 -webkit-animation: AnimationName 30s ease infinite;
 -moz-animation: AnimationName 30s ease infinite;
 animation: AnimationName 20s ease infinite;
}
@-webkit-keyframes AnimationName {
 0% {
  background-position: 10% 0%
 }
 50% {
  background-position: 91% 100%
 }
 100% {
  background-position: 10% 0%
 }
}
@-moz-keyframes AnimationName {
 0% {
  background-position: 10% 0%
 }
 50% {
  background-position: 91% 100%
 }
 100% {
  background-position: 10% 0%
 }
}
@keyframes AnimationName {
 0% {
  background-position: 10% 0%
 }
 50% {
  background-position: 91% 100%
 }
 100% {
  background-position: 10% 0%
 }
}
.hero-part-pc {
 display: none;
}
#hero {
 display: block;
 width: 300px;
 height: 800px;
 object-fit: contain;
 object-position: 50px 0;
 margin: 0 auto 0;
}
.slogan-sp {
 font-family: 'Quicksand', sans-serif;
 font-size: 70px;
 display: block;
 max-width: 310px;
 color: #fafafa;
 text-shadow: 0 0 6px #EBC3DB;
 position: absolute;
 top: 50%;
 left: 0;
 right: 0;
 margin: auto;
 z-index: 5;
}
.slogan-pc {
 display: none;
}
/*main*/
#flex-h2-menu {
 display: flex;
 flex-wrap: wrap;
}
#h2-menu {
 padding: 0 0 0 10px;
 margin-bottom: 10px;
}
#flex-h2-menu img {
 width: 100px;
 margin-top: -30px;
 animation: h2side 2s cubic-bezier(.445, .05, .55, .95) infinite;
}
@keyframes h2side {
 20% {
  transform: rotate3d(0, 0, 1, 15deg);
 }
 40% {
  transform: rotate3d(0, 0, 1, -10deg);
 }
 60% {
  transform: rotate3d(0, 0, 1, 5deg);
 }
 80% {
  transform: rotate3d(0, 0, 1, -5deg);
 }
 100% {
  transform: rotate3d(0, 0, 1, 0deg);
 }
}
/*グリッドレイアウト*/
.item3, .item5 {
 display: none;
}
.grid {
 height: 100vw;
 padding: 0;
 display: grid;
 grid-template-rows: 20% 20% 20% 20% 20%;
 grid-template-columns: 20% 20% 20% 20% 20%;
 position: relative;
	margin-bottom:80px;
}
.item1 {
 grid-row: 1/5;
 grid-column: 1/4;
}
.item2 {
 grid-row: 5/6;
 grid-column: 2/6;
}
.item4 {
 grid-row: 1/3;
 grid-column: 4/6;
}
.item6 {
 grid-row: 3/5;
 grid-column: 4/6;
}
.item7 {
 grid-row: 5/6;
 grid-column: 1/2;
}
.grid li img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.item8 {
 position: absolute;
 bottom: 0;
 right: 20%;
}
#check {
 background: rgba(83, 61, 61, 0.4);
 padding: 0 10px;
 border-radius: 10px;
 box-shadow: 0 0 6px rgba(83, 61, 61, 1);
 font-size: 2rem;
 font-family: 'Quicksand', sans-serif;
 color: #fafafa;
 z-index: 10;
 text-decoration: underline 2px;
 margin-left: 70%;
}
/*店舗情報*/
#flex-h2-shop {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
}
#h2-shop {
 text-align: right;
 padding: 0 10px 0 0;
}
#flex-h2-shop img {
 width: 30px;
 height: 77px;
 align-self: center;
 padding: 5px 10px;
 animation: h2side 2s cubic-bezier(.445, .05, .55, .95) infinite;
}
#logo-in-shop {
 width: 53vw;
 display: block;
 margin: 0 auto;
}
#shop-data {
 margin: 0 auto;
 padding: 0 30px;
 width: 320px;
}
#shop-data p {
 display: inline-block;
 margin: 15px 0;
}
#shop-data dl {
 display: flex;
 flex-wrap: wrap;
 width: 320px;
}
#shop-data dl dt {
 width: 4em;
}
#shop-data dl dd {
 width: 13em;
}
.tel {
 font-size: 1.5rem;
}
iframe {
 width: 100%;
 height: 300px;
	margin-bottom:80px;
}
/*メニューページ-----------------------------------------------------------------------------*/
#menu header {
 clip-path: ellipse(50% 100% at 50% 0);
}
#menu header {
 background: url("../img/menu-image.jpg") no-repeat center/120%;
 height: 300px;
}
#menu h2 {
 margin-bottom: 0;
}
#menu-title {
 text-align: center;
 padding: 60px 0 50px;
 margin: 0;
}
#menu main h2{
	margin:40px 0;
	position:relative;
}
#menu main article:not(#allergy) h2 span{
	display:inline-block;
	background:#533D3D;
	width:20vw;
	height:3px;
	border-radius:1.5px;
	vertical-align:20%;
	margin:0 30px;
}
#menu main h2:first-child{
	margin:0 0 40px 0;
	padding-top:40px;
}
 #menu article {
  margin-bottom: 80px;
 }
/*price------------------------------*/
#price h2 {
 padding-left: 10px;
}
.flex-flavor {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
	padding:20px 0 0;
}
.flex-flavor p {
 padding: 0 30px;
}
.flex-flavor img:first-child {
 width: 15vw;
 height: auto;
}
.flex-flavor img:nth-child(3) {
 width: 30vw;
 height: 22vw;
}
#choose-corn-or-cup {
 text-align: center;
		margin-bottom:40px;
}
table {
 width: 100%;
}
#price thead {
 background: #EBC3DB;
}
thead tr th {
 padding: 10px 0;
}
th:first-child {
 width: 40vw;
}
tr td:first-child {
 width: 40vw;
}
tr td {
 text-align: center;
}
#price td img {
 width: 34vw;
 height: 40vw;
 object-fit: cover;
 object-position: center 90%;
}
.number {
 font-size: 1.5rem;
}
#price tr:nth-child(1) td:nth-child(1), #price tr:nth-child(1) td:nth-child(2), #price tr:nth-child(1) td:nth-child(3) {
 background: #F5EFB5;
}
#price tr:nth-child(2) td:nth-child(1), #price tr:nth-child(2) td:nth-child(2), #price tr:nth-child(2) td:nth-child(3) {
 background: #FAFAFA;
}
#price tr:nth-child(3) td:nth-child(1), #price tr:nth-child(3) td:nth-child(2), #price tr:nth-child(3) td:nth-child(3) {
 background: #F5EFB5;
}
/*flavor------------------------------*/
#flavor h2 {
 padding-right: 10px;
 text-align: right;
}
#flavor ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 text-align: center;
}
#flavor ul li img {
 width: 44vw;
 height: 44vw;
 object-fit: cover;
}
#flavor ul li p {
 line-height: 1;
 margin: 0 0 10px 0;
 width: 44vw;
}
/*画像ポップアップ*/
#modal-container{
	display:none;
	position:fixed;
	background:rgba(0,0,0,0.6);
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:99;
}
#modal-container>div{
	display:flex;
	height:100vh;
	justify-content: center;
	align-items:center;
}
#modal-container>img{
	max-width: calc(100vw - 30px);
		max-height: calc(100vh - 30px);
}
.popup img{
	cursor:pointer;
}
#modal-container>div>img{
 width: 80vw;
 height: 80vw;
	max-width:500px;
		max-height:500px;
 object-fit: cover;
}
/*topping------------------------------*/
#topping h2 {
 padding-left: 10px;
}
#topping p:nth-child(2) {
 padding-left: 10px;
 margin: 0;
}
#topping ul {
 text-align: left;
 max-width: 300px;
 margin: 10px auto 0;
}
#topping ul li {
 padding: 10px 0 10px 50px;
 border-left: solid 50px rgba(235, 195, 219, 0.8);
 margin-bottom: 3px;
}
#topping ul li:nth-child(even) {
 background: #F5EFB5;
}
#topping ul li:nth-child(odd) {
 background: #FAFAFA;
}
#topping ul li p {
 margin: 0;
}

/*drink------------------------------*/
#drink h2 {
 padding-right: 10px;
 text-align: right;
}
#drink table td {
 text-align: center;
}
#drink table tbody tr:nth-child(1) img {
 width: 18vw;
}
#drink table tbody tr:nth-child(2) img {
 width: 26vw;
}
#drink thead {
 background: #EBC3DB;
}
#drink tr:nth-child(1) td:nth-child(1), #drink tr:nth-child(1) td:nth-child(2), #drink tr:nth-child(1) td:nth-child(3) {
 background: #F5EFB5;
}
#drink tr:nth-child(2) td:nth-child(1), #drink tr:nth-child(2) td:nth-child(2), #drink tr:nth-child(2) td:nth-child(3) {
 background: #FAFAFA;
}
#drink p:nth-child(3) {
 display: block;
 width: 80%;
 margin: 10px auto 20px;
}
#drink p:nth-child(3) span {
 background: linear-gradient(transparent 50%, #EBC3DB 60%);
}
#drink ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 text-align: center;
}
#drink ul li img {
 width: 44vw;
 height: 44vw;
 object-fit: cover;
}
#drink ul li p {
 line-height: 1;
 margin: 0 0 10px 0;
 width: 44vw;
}
/*allergy------------------------------*/
#allergy {
 text-align: center;
}
#allergy h3 {
 text-align: center;
 border-radius: 10px;
 font-size: 1.5rem;
}
#allergy ul {
 text-align: center;
}
#allergy section {
 width: 95%;
 margin: 0 auto 40px;
 border-radius: 10px 10px 10px 10px;
}
/*メニュー順*/
#allergy section:nth-child(2) {
 background: #F5EFB5;
 border-radius: 10px 10px 10px 10px;
}
#allergy section:nth-child(2) h3 {
 border: solid 1px #fafafa;
 background: linear-gradient(315deg, #ebc3db, #f5efb5, #cce8e4, #fafafa);
 background-size: 800% 800%;
 -webkit-animation: AnimationName 30s ease infinite;
 -moz-animation: AnimationName 30s ease infinite;
 animation: AnimationName 20s ease infinite;
}
#allergy section:nth-child(2) ul li {
 margin-bottom: 40px;
}
#allergy section:nth-child(2) ul li img {
 width: 100%;
 height: 27vw;
 object-fit: cover;
}
#allergy section:nth-child(2) ul li:nth-child(2) img {
 object-position: 0 80%;
}
#allergy section:nth-child(2) ul li:nth-child(7) img {
 object-position: 0 30%;
}
#allergy section:nth-child(2) ul li:nth-child(11) img {
 object-position: 0 20%;
}
#allergy section:nth-child(2) ul li:nth-child(12) img {
 object-position: 0 40%;
}
#allergy section:nth-child(2) ul li:nth-child(13) img {
 object-position: 0 35%;
}
#allergy section:nth-child(2) ul li:nth-child(14) img {
 object-position: 0 10%;
}
#allergy section:nth-child(2) ul li:nth-child(15) img {
 object-position: 0 55%;
}
#allergy section:nth-child(2) ul li p:nth-child(2) {
 margin: 0;
}
.allergy-data {
 background: #533D3D;
 color: #fafafa;
	font-size:1.5rem;
 display: inline-block;
 border-radius: 100vw;
 padding: 10px 15px;
 margin: 0 0 10px 10px;
}
/*アレルギー物質順*/
#allergy section:nth-child(3) {
 background: #EBC3DB;
}
#allergy section:nth-child(3) h3 {
 border: solid 1px #fafafa;
 background: linear-gradient(315deg, #ebc3db, #f5efb5, #cce8e4, #fafafa);
 background-size: 800% 800%;
 -webkit-animation: AnimationName 30s ease infinite reverse;
 -moz-animation: AnimationName 30s ease infinite reverse;
 animation: AnimationName 20s ease infinite reverse;
}
.flex-ordered-allergy {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 text-align: center;
}
.allergy-set{
	margin:0 0 10px 0;
}
#allergy section:nth-child(3) ul {
 margin-bottom: 20px;
}
#allergy section:nth-child(3) ul li {
 margin-bottom: 40px;
}
#allergy section:nth-child(3) ul li p:nth-child(1) {
 font-size: 1.5rem;
 background: #533D3D;
 color: #fafafa;
 display: inline-block;
 border-radius: 10px;
 padding: 10px;
}
#allergy section:nth-child(3) ul li img {
 width: 40vw;
 height: 40vw;
 object-fit: cover;
}
#allergy section:nth-child(3) ul li p {
 line-height: 1;
 margin: 0 0 10px 0;
 width: 40vw;
}
/*アレルギーのアコーディオンパネル*/
/*アコーディオンタイトル*/
#allergy h3 {
 position: relative; /*+マークの位置基準とするためrelative指定*/
 cursor: pointer;
 padding: 3% 3% 3% 50px;
 transition: all .5s ease;
}
/*アイコンの＋と×*/
#allergy h3::before, #allergy h3::after {
 position: absolute;
 content: '';
 width: 15px;
 height: 2px;
 background-color: #333;
}
#allergy h3::before {
 top: 48%;
 right: 15px;
 transform: rotate(0deg);
}
#allergy h3::after {
 top: 48%;
 right: 15px;
 transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
#allergy h3.close::before {
 transform: rotate(45deg);
}
#allergy h3.close::after {
 transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
#allergy ul {
 display: none; /*はじめは非表示*/
 margin: 0 3% 3% 3%;
 padding: 3%;
}
/*pc版-----------------------------------------------------------------------------*/
/*ブレイクポイント　パソコン・タブレット　768px～1280px*/
@media screen and (min-width:768px) {
 /*全ページ共通-----------------------------------------------------------------------------*/
 body::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../img/many-corns.jpg") repeat center/400px;
  z-index: -1;
 }
 main {
  max-width: 1280px;
  background: #CCE8E4;
  margin: 0 auto;
 }
 /*header*/
 h1 {
  display: block;
  width: 100px;
  left: 0;
  right: 0;
  margin: auto;
 }
 h1:hover {
  opacity: 0.5;
 }
 h1 img {
  width: 100px;
 }
 /*パソコン版ナビゲーション*/
 #nav-sp {
  display: none;
 }
 #nav-pc {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 5000;
 }
 #nav-pc ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-transform: uppercase;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  margin: 0;
 }
 #nav-pc ul li {
  margin: 0 0 0 30px;
 }
 #nav-pc ul li a {
  padding: 10px;
 }
 /*navのマウスホバーアニメーション*/
 #nav-pc ul li a:hover {
  text-decoration: underline overline solid 2px;
 }
 /*今表示しているページの目印*/
 body#menu #nav-pc ul li:first-child a {
  text-decoration: underline overline solid 2px;
 }
 /*snsリンク*/
 #sns-link li a:hover {
  color: #EBC3DB;
  border: 1px dotted #EBC3DB;
 }
 /*footer*/
 footer {
  padding-bottom: 10px;
 }
 footer a:nth-child(2):hover {
  text-decoration: underline dotted 1px;
 }
 /*トップページ-----------------------------------------------------------------------------*/
 /*ヒーロー*/
 #toppage header {
		  clip-path: circle(900px at 50% 0);
 }
 header {
  position: relative;
 }
 #hero-part-pc-1 {
  display: inline-block;
  width: 50px;
  position: absolute;
  bottom: -80%;
  left: 20vw;
  animation: scrollup 10s linear infinite;
 }
 @keyframes scrollup {
  to {
   transform: translateY(-300%);
  }
 }
 #hero-part-pc-2 {
  display: inline-block;
  width: 50px;
  position: absolute;
  top: -80%;
  left: 80vw;
  z-index: -10;
  animation: scrolldown 10s linear infinite;
 }
 @keyframes scrolldown {
  to {
   transform: translateY(300%);
  }
 }
 #hero {
  display: block;
  width: 500px;
  height: 1000px;
  object-fit: contain;
  object-position: 100px 0;
  margin: -52px auto 0;
 }
 .slogan-sp {
  display: none;
 }
 .slogan-pc {
  display: block;
  width: 600px;
  font-family: 'Quicksand', sans-serif;
  font-size: 70px;
  color: #fafafa;
  text-shadow: 0 0 6px #EBC3DB;
  position: absolute;
  top: 450px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
 }
 .slogan-sp {
  display: none;
 }
 /*メニュー*/
 #toppage main {
  padding-top: 40px;
 }
 #h2-menu {
  padding: 0 0 0 30%;
  margin-top: 0;
 }
 #flex-h2-menu img {
  margin-top: -60px;
 }
 #flex-h2-menu img:hover {
  animation: bounce 2s cubic-bezier(.445, .05, .55, .95);
 }
 @keyframes bounce {
  0%, 100%, 20%, 53%, 80% {
   transform: translate3d(0, 0, 0);
  }
  40%, 43% {
   transform: translate3d(0, -4vh, 0);
  }
  70% {
   transform: translate3d(0, -2vh, 0);
  }
  90% {
   transform: translate3d(0, -1vh, 0);
  }
 }
 /*グリッドレイアウト*/
 .item3, .item5 {
  display: block;
 }
 .grid {
  height: 375px;
  padding: 0;
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: repeat(8, 1fr);
 }
 .item1 {
  grid-row: 1/3;
  grid-column: 3/5;
 }
 .item2 {
  grid-row: 1/2;
  grid-column: 5/7;
 }
 .item3 {
  grid-row: 1/2;
  grid-column: 7/9;
 }
 .item4 {
  grid-row: 2/3;
  grid-column: 5/9;
 }
 .item5 {
  grid-row: 1/3;
  grid-column: 1/2;
 }
 .item6 {
  grid-row: 1/2;
  grid-column: 2/3;
 }
 .item7 {
  grid-row: 2/3;
  grid-column: 2/3;
 }
 .item8 {
  grid-row: 2/3;
  grid-column: 6/7;
 }
 .item8 {
  position: absolute;
  bottom: 0;
  right: 40%;
 }
 #check {
  text-decoration: none;
 }
 #check:hover {
  text-decoration: underline 2px;
 }
 /*店舗情報*/
 #h2-shop {
  padding: 0 30% 0 0;
 }
 #flex-h2-shop img:hover {
  animation: flip 2s ease-in;
 }
 @keyframes flip {
  0% {
   transform: rotate3d(1, 0, 0, 90deg);
  }
  40% {
   transform: rotate3d(1, 0, 0, -20deg);
  }
  60% {
   transform: rotate3d(1, 0, 0, 10deg);
  }
  80% {
   transform: rotate3d(1, 0, 0, -5deg);
  }
  100% {
   transform: rotate3d(1, 0, 0, 0deg);
  }
 }
 .div-shop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
 }
 #logo-in-shop {
  width: 200px;
  margin: 0 0 0 0;
 }
 #shop-data {
  margin: 0;
  padding-right: 0;
 }
 iframe {
  display: block;
  width: 550px;
  height: 400px;
  margin: 20px auto 40px;
 }
 /*メニューページ-----------------------------------------------------------------------------*/
 #menu-title {
  padding: 100px 0 50px;
 }
 #menu h2 {
  margin: 0;
 }
 #menu header {
  height: 350px;
 }
	#menu main article:not(#allergy) h2 span{
		width:15vw;
	}
 /*price------------------------------*/
 #price h2 {
  padding-left: 30%;
 }
 .flex-flavor p {
  padding: 0 30px;
 }
 .flex-flavor img:first-child {
		  width: 120px;
  height: auto;
 }
 .flex-flavor img:nth-child(3) {
		width: 230px;
  height: 170px;
 }
 table {
  max-width: 800px;
  margin: 20px auto 0;
 }
 th:first-child {
  width: 180px;
 }
 tr td:first-child {
  width: 180px;
 }
 #price td img {
  width: 180px;
  height: 200px;
  object-fit: cover;
  object-position: center 90%;
 }
 /*flavor------------------------------*/
 #flavor h2 {
  padding-right: 30%;
  text-align: right;
 }
 #flavor ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
 }
 #flavor ul li img {
  width: 200px;
  height: 200px;
  object-fit: cover;
 }
 #flavor ul li p {
  line-height: 1;
  margin: 0 0 10px 0;
  width: 200px;
 }
	/*画像ポップアップ*/
#modal-container>div>img{
 width: 44vw;
 height: 44vw;
 object-fit: cover;
}
 /*topping------------------------------*/
 #topping h2 {
  padding-left: 30%;
 }
 #topping p:nth-child(2) {
  padding-left: 30%;
  margin: 0;
 }
 /*drink------------------------------*/
 #drink h2 {
  padding-right: 30%;
  text-align: right;
 }
 #drink table tbody tr:nth-child(1) img {
  width: 70px;
 }
 #drink table tbody tr:nth-child(2) img {
  width: 100px;
 }
 #drink p:nth-child(3) {
  display: block;
  width: 80%;
  text-align: center;
 }
 #drink ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
 }
 #drink ul li img {
  width: 200px;
  height: 200px;
  object-fit: cover;
 }
 #drink ul li p {
  line-height: 1;
  margin: 0 0 10px 0;
  width: 200px;
 }
 /*allergy------------------------------*/
	#allergy h2 span{
	display:inline-block;
	background:#533D3D;
	width:15vw;
	height:3px;
			border-radius:1.5px;
	vertical-align:20%;
	margin:0 30px;
}
 #allergy h3 {
  text-align: center;
  border-radius: 10px;
 }
 #allergy h3:hover {
  text-decoration: underline dotted 2px;
 }
 #allergy section {
  width: 95%;
  margin: 0 auto 40px;
 }
 /*メニュー順*/
 #allergy section:nth-child(2) ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  max-width: 710px;
  margin: 0 auto;
 }
 #allergy section:nth-child(2) ul li {
  margin-bottom: 40px;
  width: 335px;
 }
 #allergy section:nth-child(2) ul li img {
  width: 335px;
  height: 100px;
  object-fit: cover;
 }
 #allergy section:nth-child(2) ul li p:nth-child(2) {
  margin: 0;
  width: 335px;
  display: inline-block;
 }
 /*アレルギー物質順*/
 .flex-ordered-allergy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
 }
 #allergy section:nth-child(3) ul li img {
  width: 200px;
  height: 200px;
  object-fit: cover;
 }
 #allergy section:nth-child(3) ul li p {
  line-height: 1;
  margin: 0 0 10px 0;
  width: 200px;
 }
}