@charset "UTF-8";

/*ResetCSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-weight: normal;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
}
*,*::after,*::before {
	box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
}
 
img {
    max-width: 100%;
    height: auto;
    vertical-align: center;
}
a:-webkit-any-link {
	color: orange;
}
/*Resetここまで*/

/*--------------------共通-------------------------*/
/*Base*/
.view,.camera,.kiyaku,.ai-judgBg{
    width: 100%;
	height: 100vh;
    min-height: 480px;
    max-width: 960px; /*最高横幅*/
	margin-right: auto;
	margin-left: auto;
    background-color: #F7EEDF;
	overflow: hidden;
}
.ranking_view,.shop_view,.help_view,.group_view{
    width: 100%;
	height: 100vh;
    max-width: 1024px; /*最高横幅*/
	min-height: 480px; /*最低縦幅*/
	margin-right: auto;
	margin-left: auto;
    background-color: #F7EEDF;
}
.setting_view{
	position: absolute;
    width: 100%;
	height: auto;
    max-width: 1024px; /*最高横幅*/
	min-height: 480px; /*最低縦幅*/
	margin-right: auto;
	margin-left: auto;
	top: 12%; /*head分下げる*/
	padding: 15px;
    background-color: #F7EEDF;
}
@supports(-webkit-touch-callout: none){
	/* iPhoneの表示のみ指定を上書き */
	.view,.camera,.kiyaku,.ai-judgBg,.ranking_view,.shop_view,.help_view,.setting_view{
	  height: -webkit-fill-available;
	  }
	}
/*Background*/
.bg{
	position: relative;
	overflow: hidden;
}
.ai-judgBg{
	background-color: #ffe4c4;
}
.result-bg{
	position:relative;
	overflow: hidden scroll;
	background-color: #F7EEDF;
}
.result-bg::-webkit-scrollbar{
	display: none;
  }
  .menu-bg{
	position:relative;
	overflow:auto !important;
	overflow-x:hidden !important;
	overflow-y: scroll !important;
	background-image: url(/image/background.jpg);
	background-size: contain;
}
.coupon-bg{
	position:relative;
	overflow: hidden scroll;
	background-color: #F7EEDF;
}
.coupon-bg::-webkit-scrollbar{
	display: none;
  }
  	/*店舗名・店舗ロゴデザイン*/
	  ::marker {
		  display: none;
	  }
	.shop_absolute{
		position: fixed;
		top:7%;
		left: 45%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		z-index: 5560;
	}
	.kiyaku_shop_absolute{
		position: absolute;
		top:7%;
		left: 45%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		z-index: 5560;
	}
	.result-bg .shop_absolute{
		position: fixed;
	}
	.menu_shop_absolute{
		top:5%;
	}
	.shopname_list{
		position: relative;
		overflow: hidden;
		max-width: 70vw;
		width: 112%;
		padding: 3px 0;
		padding-left: 8px;

		border: solid 2px #F7931E;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(246, 246, 246, 1) 19%, rgba(200, 200, 200, 1) 100%, rgba(172, 172, 172, 1));/*グラデーション*/
		border-radius: 30px;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.3); 
		border-radius: 100vh;
	}
	.shopname_list ul {
		position: relative;
		left: 50%; /* ulを右に50%移動 */
		text-align: center;
		margin-left: -5px;/* liのmarginの半分をネガティブマージン（しないと右にずれる） */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shopname_list ul li {
		position: relative;
		left: -50%; /* 左に50%移動 */
	}
	.shopname_list .kiyaku_logo_img,.shopname_list .camera_logo_img,.shopname_list .result_logo_img,.shopname_list .menu_logo_img{
		width: 16px;
		height: auto;
	}
	.kiyaku_logo_img{
		position: absolute;
		top:7%;
	}
/*shopname*/
.shopname{
	position:absolute;
	top:7%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	font-size:14px;
	font-family:"fot-tsukuardgothic-std", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", sans-serif;
	color: white;
	z-index: 5560;
}
.camera-shopname{
	width: 100%;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	font-family:"fot-tsukuardgothic-std", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", sans-serif;
	margin-left: 5px;
	max-width: 165px;/*15文字*/
	/*text-overflow: ellipsis;*/
	overflow-y: scroll;
	 /* IE, Edge 対応 */
	 -ms-overflow-style: none;
	 /* Firefox 対応 */
	 scrollbar-width: none;
	white-space: nowrap;
	z-index: 5560;
}
.result-shopname{
	width: 100%;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	font-family:"fot-tsukuardgothic-std", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", sans-serif;
	margin-left: 5px;
	max-width: 165px;/*15文字*/
	/*text-overflow: ellipsis;*/
	overflow-y: scroll;
	 /* IE, Edge 対応 */
	 -ms-overflow-style: none;
	 /* Firefox 対応 */
	 scrollbar-width: none;
	white-space: nowrap;
	z-index: 5560;
}
.menu-shopname{
	position: absolute;
	top:3%;
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-family:"fot-tsukuardgothic-std", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", sans-serif;
	max-width: 165px;/*15文字*/
	/*text-overflow: ellipsis;*/
	overflow-y: scroll;
	 /* IE, Edge 対応 */
	 -ms-overflow-style: none;
	 /* Firefox 対応 */
	 scrollbar-width: none;
	white-space: nowrap;
	z-index: 5560;
}
.shopname-white{  /*blackに仕様変更*/
	color: black;
}

/* Chrome, Safari 対応 */
.camera-shopname::-webkit-scrollbar,.result-shopname::-webkit-scrollbar,.menu-shopname::-webkit-scrollbar {
	display:none;
}
/*Language*/
.Language{
	position: fixed;
	top:8%;
	right: 3%;
	font-size: 10px;
	padding: 2px;
	z-index: 5560;
}
.kiyaku-Language{
	position: absolute;
	top:8%;
	right: 3%;
	font-size: 10px;
	padding: 2px;
	z-index: 5560;
}
/*.menu-Language{
	position: absolute;
	top:8%;
	right: 5%;
	font-size: 10px;
	padding: 5px;
	border: solid 1px;
	z-index: 5560;
}*/

.language-white{
	color: #fff;
}
/*languageデザイン*/
/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
	display: none;
	}
.Language::after,.kiyaku-Language::after{
	position: absolute;
	content: '▶';
	font: 13px "Consolas", monospace;
	color: #FBB03B;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	right: 10px;
	/*Adjust for position however you want*/ 
	top: 20%;
	padding: 0 0 2px;
	pointer-events: none;
	z-index: 9555;
	}
	
.Language select,.kiyaku-Language select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Add some styling */
	min-width: 80px;
	display: block;
	line-height: 1.75;
	color: #333;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #F7931E;
	-ms-word-break: normal;
	word-break: normal;
	border-radius: 100vh;
	padding-left: 1em;
	}



/*キャラクター関連*/
/*spon*/
.charactor-spoon-absolute{
	position: fixed; 
	top:20%;
	left: -8%;
	width: 30%;
	height: auto;
	z-index: 30;
}
.charactor-spoon-absolute img{
	width: 100%;
	height: auto;
}
/*fork*/
.charactor-fork-absolute{
	position: fixed;
	bottom:1%;
	right: -8%;
	width: 30%;
	height: auto;
	z-index: 9001;
}
.charactor-fork-absolute img{
	width: 100%;
	height: auto;
}

/*--ハンバーガーメニュ--*/
.hamburger-menu{
	position: absolute;
	top:3%;
	left: 5%;
	z-index: 5560;
}
.menu-btn{
	position: fixed;
	display: flex;
	height: 40px;
	width: 40px;
	justify-content: center;
	align-items: center;
	/*background-color: #3584bb;*/
	z-index: 5561;
}
.result-bg .hamburger-menu{
	position: fixed;
}
/*3本線*/
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after{
	content: '';  
	display: block;
	height: 2px;
	width: 40px;
	border-radius: 3px;
	background-color: #ffffff;
	position: absolute;
	z-index: 5562;
}
.menu-btn span:before{
	bottom: 12px;
}
.menu-btn span:after{
	top:12px;
}
#menu-btn-check:checked ~ .menu-btn span{
	background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
/*出てくるメニュー*/
.menu-content{
	width: 100%;
	height: 100%;
	position: fixed;
	top:0;
	right:100%;
	background-color: orange;
	transition: all 0.5s;
	overflow-y: scroll;
	z-index: 5560;
}
.menu-content ul{
	padding: 10px 60px 0;
}
.camera-menu-content ul{
	padding: 10px 60px 0;
}
.menu-content ul li{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	border-bottom: solid 1px #ffff;
	list-style: none;
}
.menu-content ul li a,.menu-content ul li div{
	display: block;
	width: 100%;
	font-size: 20px;
	box-sizing: border-box;
	color: white;
	text-decoration: none;
	padding: 9px 15px 10px 0;
	position: relative;
}
.menu-content ul li a::before,.menu-content ul li div::before{
	content: '';
	width: 7px;
	height: 7px;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	transform: rotate(45deg);
	position: absolute;
	right: 11px;
	top:16px;
}
.menu-content_en,.menu-content_zh,.menu-content_ko{
	display: none;
}

.food_search_f_title{
	color: white;
	text-align: center;
	padding-top: 30px;
}

.menu-search_form{
	padding: 50px 5%;
	padding-top: 20px;
	margin: auto;
	text-align:center;
	color: white;
}
.menu-search_form input{
	vertical-align: bottom;
}
	
#menu-btn-check:checked ~ .menu-content {
    right: 0;/*メニューを画面内へ*/
}

.hamburger-logo{
	padding-top: 30px;
	text-align: center;
	z-index: 5560;
}
.hamburger-logo img{
	width: 20%;
}
.shop_search_click{
	width: 30%;
	padding: 10px;
	margin: auto;
	margin-top: 50px;
	text-align: center;
	border: solid 1px white;
	color: white;
}
.help_search_click{
	width: 30%;
	padding: 10px;
	margin: auto;
	margin-top: 5px;
	text-align: center;
	border: solid 1px white;
	color: white;
}

.version{
	text-align: center;
	color: white;
	margin-top: 20px;
}

/*入力部分のデザイン*/
.application_search{
    font-size: 16px;
    width: 60%;
    border: none;
    outline: none;
	padding:  8px 10%;
	background-color: orange;
	color: white;
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

.application_search::placeholder {
	color: white;
  }

.text_underline{
    position: relative; /*.text_underline::beforeの親要素*/
    border-top: 1px solid orange; /*text3の下線*/
	width: 60%;
	margin-left:15%;
}
.text_underline:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0%;
	border-top: solid 2px white;
	transform: translateX(-50%);
	/*線が伸びるアニメーションは、メニュークリック時(上記に記載)*/
	animation: border_anim 1.5s linear forwards;/*アニメーション*/
  }
  
  @keyframes border_anim {
	0%{
	  width: 0%;
	}
	100%{
	  width: 100%;
	}
  }




/*セリフ関連*/
.spoon-Dialogue{
	position: fixed;
	top:15%;
	left:25%;
	z-index: 9999;
	visibility: hidden;

    font-size: 12px;
	color: black;
	background-color: white;
}

/*戻るボタン*/
.camera-return{
	position: absolute;
	top:87%;
	left:10%;
	z-index: 5556;
}
.result-return{
	position: absolute;
	top:85%;
	left:10%;
	z-index: 5556;
	color: orange;
}
.riyoukiyaku-return{
	position: absolute;
	top: 14%;
	left: 10%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.riyoukiyaku-return_en,.riyoukiyaku-return_zh,.riyoukiyaku-return_ko{
	display: none;
}


/*ダイアログのデザイン*/
.dialog {
	position: absolute;
    width: 280px;
	top:0;
	right: 0;
	left: 0;
    margin: auto;
    margin-top: 40vh;
    padding: 30px 20px;
	font-size: 13px;
    display: none;
    text-align: center;
	background-color: white;
    border: 1px solid orange;
    box-shadow: 2px 2px 4px #888;
	z-index: 9777;
}
.dialog p{
	margin-bottom: 20px;
	line-height: 1.3em;
}
.dialog .yes, .dialog .no{
	background: orange;
	padding: 10px;
}


/*アラートのデザイン*/
.alert{
	display: none;
}
.alert p{
	margin-bottom: 20px;
	line-height: 1.3em;
}
.alert .ok,.alert .ok_ai{
	background: orange;
	padding: 10px;
}
.alert .ok a{
	color: white;
}
/*タイムアウトのアラート*/
.timeouto_alert{
	display: none;
}
.timeouto_alert p{
	margin-bottom: 20px;
	line-height: 1.3em;
}
.timeouto_alert .ok_re{
	background: orange;
	padding: 10px;
}
.timeouto_alert .ok_re a{
	color: white;
}
/*縦向き画面のアラート*/
.resize_alert{
	display: none;
}
.resize_alert p{
	margin-bottom: 20px;
	line-height: 1.3em;
}
.resize_alert .resize_ok{
	background: orange;
	padding: 10px;
}
.resize_alert .resize_ok a{
	color: white;
}
.block:not( .help_contents .block){ /*phpでエラー時に付与される*/
	display: block !important;
	position: absolute;
    width: 280px;
	top:0;
	right: 0;
	left: 0;
    margin: auto;
    margin-top: 40vh;
    padding: 30px 20px;
	font-size: 13px;
    text-align: center;
	background-color: white;
    border: 1px solid orange;
    box-shadow: 2px 2px 4px #888;
	z-index: 5555;
}

  /*デバイス対応*/
  @media screen and (min-width: 481px) and (max-width: 979px) {
	.shopname{
		top:3%;
	}
	.result-shopname{
		top: 3%;
	}
	.menu-shopname{
		top:7%;
	}
	.Language{
		top:5%;
	}
	.result-Language{
		top: 7%;
	}
	.menu-Language{
		top:13%;
	}
	.spoon-Dialogue{
		font-size: 18px;
	}
	.selectdiv select {
		min-width: 80px;
	}
	.selectdiv:after {
		top:5.5%;
		right: 32px;
	}
  }
  /*縦幅が小さいスマホ*/
  @media screen and (max-height: 550px) {
	.shop_search_click{
		margin-top: 10px;
	}
  }
  /*横向き対応*/
@media screen and (orientation: landscape)and (max-device-width: 1024px) {
	.Language{
		top:8%;
	}

 }

/*---------------------index.php------------------*/
.startup{
	position: relative;
	width: 100%;
	height: 100vh;
	background-image: url(./image/start-up-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}
.startup >.logo{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 40%;
	width: 20%;
	height: auto;	
	display: none;
}
.startup picture > .character{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 55%;
	width: 85%;
	height: auto;
	display: none;
}
.btn-startup{
	position: absolute;
	width: 50%;
	top:68%;
	left:0;
	right:0;
	margin: auto;
	display: none;

	box-shadow: 10px 10px 10px rgba(0,0,0,0.3); 
	border-radius: 100vh;
	animation: animescale1 1.0s ease 6s infinite alternate; /*拡大縮小アニメの呼び出し6秒後*/
}
.btn-startup:hover{
	opacity: 0.8;
	box-shadow: 0 0 10px rgba(0,0,0,0);
}
/*----ボタンアニメ----- 3秒後にキらッ、6秒後に拡大縮小アニメ*/
.startbtn-anime{
	/*キラッと光る基点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	border-radius: 100px;
}
/* ボタンをキラッとさせる */
.startbtn-anime::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%);
	-webkit-animation: shine 2s infinite;
			animation: shine 2s infinite;
			animation-delay: 3s;
  }
  @-webkit-keyframes shine {
	100% {
	  left: 100%;
	}
  }
  
  @keyframes shine {
	100% {
	  left: 100%;
	}
  }

  /*ユーザーが6秒経ってもクリックしない場合は、拡大縮小させる*/
  @keyframes animescale1 {
	from {
	  transform: scale(1,1);
	}
	to {
	  transform: scale(0.95,0.95);
	}
  }

.kiyaku{
	position: relative;
}
.kiyaku_head{
	position: fixed;
	top:0;
	width: 100%;
	max-width: 960px;/*最高横幅*/
	background-color: #FDC673;
	height: 13%;
	padding: 20px;
	visibility: hidden;/*スタートボタン押下後に表示*/
}
.kiyaku_logo{
	width: 13%;
	position: absolute;
	top: 3%;
	left: auto;
	right: 7%;
}

.kiyaku h2{
	position: absolute;
	top:25%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 18px;
	font-family: heisei-maru-gothic-std, sans-serif;
	font-style: normal;
	font-weight: 400;
}
.kiyaku #kiyaku_title_en,.kiyaku #kiyaku_title_zh,.kiyaku #kiyaku_title_ko{
	display: none;
}

.kiyaku .kiyakuScroll{
	position: absolute;
	overflow: scroll;
	width: 80%;
	height: 56%;
	top:30%;
	left: 0;
	right: 0;
	margin: auto;
	padding: 10px 5px;
	background-color: white;
	font-size: 10px;
	border: solid 1px #eb6100;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 500;
}
.kiyaku .kiyakuScroll .kiyaku-right{
	text-align: right;
}
.kiyaku .kiyakuScroll .bold{
	font-weight: bold;
}
.kiyaku .kiyakuScroll #en,.kiyaku .kiyakuScroll #zh,.kiyaku .kiyakuScroll #ko{
	display: none;
}

/*ポップアップ*/
/*ポップアップここから*/ 
.popup-absolute{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 9666;
	display: none;
}
  .popup_content {
	position: relative;
	align-self: center;
	width: 90vw;
	max-width: 800px;
	padding: 10px 10px 15px;
	box-sizing: border-box;
	background: #fff;
	line-height: 1.4em;
	font-size: 13px;
	transition: 0.5s;
	text-align: center;
	z-index: 9667;
  }

  /*枠線のアニメーション*/
  .popup_content .border {
	content: "";
	position: absolute;
	opacity: 0;
  }
  .popup_content .border.top,
  .popup_content .border.bottom {
	width: calc(100% - 10px);
  }
  .popup_content .border.top {
	border-top: 3px solid #eb6100;
	right: 0;
	top: 0;
  }
  .popup_content .border.bottom {
	border-bottom: 3px solid #eb6100;
	left: 0;
	bottom: 0;
  }
   
  .popup_content .border.right,
  .popup_content .border.left {
	height: calc(100% - 10px);
  }
  .popup_content .border.right {
	border-right: 3px solid #eb6100;
	right: 0;
	top: 0;
  }
  .popup_content .border.left {
	border-left: 3px solid #eb6100;
	left: 0;
	bottom: 0;
  }
    
  .popup_content .border.top,
  .popup_content .border.bottom {
	animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .popup_content .border.right,
  .popup_content .border.left {
	animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
   
  @keyframes stroke-width {
	0% {
	  width: 0;
	  opacity: 1;
	}
	100% {
	  width: calc(100% - 20px);
	  opacity: 1;
	}
  }
   
  @keyframes stroke-height {
	0% {
	  height: 0;
	  opacity: 1;
	}
	100% {
	  height: calc(100% - 20px);
	  opacity: 1;
	}
  }

  .popup_content select{
	width: 100%;
	padding: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: url(image/arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: url(image/arrow01.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	background-size: 20px, 100%;
  }
  .popup_content .popup_title{
	  margin: 20px auto;;
  }
  .popup_content .popup_button{
	width: 40%;
	height: 30px;
	text-align: center;
	padding: 10px 30px;
	margin: 20px auto;
	background-color: orange;
	display: block;
	text-decoration: none;
	color: black;
	border-radius: 20px;
	border-bottom: 3px solid #ff674d;
  }
  
  .close_btn {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 30px;
	cursor: pointer;
	z-index: 9668;
  }

  .anketo_en,.anketo_zh,.anketo_ko{
	  display: none;
  }

  /*ラジオボタン*/
  input[type=radio] {
    display: none;
}
.sex,.age {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 25px;
    position: relative;
    width: auto;
}
.sex::before,.age::before {
    background: #fff;
    border: 1px solid #231815;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.sex::after,.age::after {
    background: #ed7a9c;
    border-radius: 50%;
    content: '';
    display: block;
    height: 10px;
    left: 8px;
    margin-top: -5px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 10px;
}
input[type=radio]:checked + .sex::after,input[type=radio]:checked + .age::after {
    opacity: 1;
}

  /*ポップアップココまで*/

/*スクロールバー設定*/
::-webkit-scrollbar { 
  width: 10px;
  height: 5px;
}
::-webkit-scrollbar-track {
	/*background: white;*/
  }
::-webkit-scrollbar-thumb {
	background: #eb6100;
  }

.btn--orange,
a.btn--orange {
	position: absolute;
	width: 40%;
	top:88%;
	left:0;
	right:0;
	margin: auto;
}
.btn--orange:hover,
a.btn--orange:hover {
	opacity: 0.8;
}
#agree_en,#agree_zh,#agree_ko{
	display: none;
}

/*デバイス対応*/
@media screen and (min-width: 980px) {
	.startup picture > .character{
		width: 75%;
	}
}
@media screen and (min-width: 650px) {
	.btn-startup{
		width: 35%;
		height: auto;
	}
	.kiyaku_logo{
		width: 9%;
		height: auto;
	}
	.kiyaku-Language{
		right: 6%;
		top:9%;
	}
	.btn--orange, a.btn--orange{
		top:85%;
		width: 35%;
		height: auto;
	}
	.kiyaku h2{
		top:20%;
	}
	.kiyaku .kiyakuScroll{
		top:25%;
	}
}

/*---------------------camera.php------------------*/
.camera{
	position: relative;
}
.camera video{
	position: relative;
	object-fit: fill;
    width: 100%;
    height: 100vh;
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
	z-index: 5554;
}
.camera .camera-head{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #FDC673;
	height: 13%;
	padding: 20px;
	z-index: 5555;
}
.camera_logo{
	width: 13%;
	position: fixed;
	top: 3%;
	left: auto;
	right: 7%;
	z-index: 5556;
}
.camera .scouter{
	position: absolute;
	top:9%;
	left: 0;
	right: 0;
	margin: auto;
	width: 85vw;
	z-index: 5554;
}
.camera .guid p{
	position: absolute;
	bottom: 5%;
	width: 100%;
	max-width: 1024px;
	padding: 10px;
	font-size: 13px;
	text-align: center;
	background-color: white;
	color: black;
	z-index: 5556;
}
.camera-setting{
	text-decoration: underline;
}

/*.border-radius{
	width: 40px;
	height: 40px;
	line-height: 200px;
	border:solid 3px orange;
	border-radius: 50%;
	color: #fff;
	text-align: center;
}*/
.shutter_button img{
	width: 65px;
	height: 65px;
}
.camera #shutter{
	position:absolute;
	top:83%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	margin: auto;
	z-index: 5555;
}
/*シャッターガイド*/
.shutter_guide{
	position: absolute;
	bottom: 21%;
	right: 12%;
	width: 100px;
	z-index: 5555;
	opacity: 0;
	animation: flash 4s linear infinite;
	animation-delay: 6s;
}
@keyframes flash {
	0%,100% {
	  opacity: 1;
	}
  
	50% {
	  opacity: 0;
	}
  }

.shutter-sampleBg{
	position: absolute;
	object-fit: fill;
    width: 100%;
    height: 100vh;
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
	top:0;
	background-color: white;
	opacity: 0.7;
	z-index: 5554;
	display: none;
}
.shutter-sampleImage{
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	margin:auto;
	z-index: 5554;
	display: none;
}

.camera canvas{
    position: absolute;
	top:0;
	left: 0;
	right: 0;
	width: 100%;
    height: 100vh;
    max-width: 1024px; /*最高横幅*/
	min-height: 480px; /*最低縦幅*/
	margin: auto;
    overflow: hidden;
	z-index: 5555;
	visibility: hidden;
}
.camera #guid_en,.camera #guid_zh,.camera #guid_ko{
	visibility: hidden;
}


/*--デバイス対応--*/
/*ipad*/
@media screen and (min-width: 481px) and (max-width: 979px) {
	.camera .scouter{
		width: 50vw;
	}
	.camera #shutter{
		top:85%;
	}
	}
/*小さいスマホ*/
@media screen and (max-height: 481px){
	.camera p{
		bottom:0;
	}
	.camera .scouter{
		width: 76vw;
	}

	.camera #shutter{
		top:84%;
	}
	/*.border-radius{
		width: 30px;
		height: 30px;
	}*/
	.shutter_button img{
		width: 40px;
		height: 40px;
	}
	.camera .guid p{
		bottom: 2%;
	}
}
/*横向き対応*/
@media screen and (orientation: landscape)and (max-device-width: 1024px) {
	/* 横向きの場合のスタイル */
	.camera .camera-head{
		display: none;
	}
	.camera .scouter{
		transform:rotate(-90deg);
	}
	.camera #shutter{
		top:45%;
		left:auto;
		right: 3%;
	}
	.shutter-sampleBg{
		width: 60%;
		height: auto;
		top:3%;
		left: 0;
		right: 0;
		margin: auto;
	}
 }


/*---------------------ai-judgment.php------------------*/
.ai-judgeImage{
	position: absolute;
	top:30%;
	left: 0;
	right: 0;
	margin: auto;
	width: 45%;
	height: auto;
}
.ai-judgBg > #ai-p_ja,.ai-judgBg > #ai-p_en,.ai-judgBg > #ai-p_zh,.ai-judgBg > #ai-p_ko{
	position: absolute;
	top:65%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	font-size: 30px;
	color: orange;
}
.ai-judgBg > #ai-p_en,.ai-judgBg > #ai-p_zh,.ai-judgBg > #ai-p_ko{
	display: none;

}

/*--デバイス対応--*/
/*小さいスマホ*/
@media screen and (max-height: 481px){
	.ai-judgBg > .ai-p{
		font-size: 20px;
	}

}

/*---------------------result.php------------------*/

/*head*/
.result-head{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #FDC673;
	height: 13%;
	padding: 20px;
	z-index: 35;
}
.result_logo{
	position: fixed;
	width: 10%;
	top: 3%;
	left: auto;
	right: 7%;
	z-index: 5555;
}
/*foodnameのスライダー*/
.result-foodname{
	position:absolute;
	top:15%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	color: black;
	font-size: 16px;
	width: 100%;
	max-width: 1024px;
	z-index: 21;
}

.foodname-carousel{
	position: relative;
	width: 100vw;
	height: calc(100px * 0.5625);
	max-width: 1004px;
	margin: 0 auto;
	overflow: hidden;
	scroll-snap-type: x mandatory;
}
.foodname-carousel::-webkit-scrollbar{
	display: none;
}

.foodname-carousel-area{
	position: absolute;
	/*widthはjsで指定　list * スライド枚数*/
	height: 100%;
	display: flex;
}
.foodname-carousel-list{
	width: 100vw;
	height: calc(100px * 0.5625);
	max-width: 1024px;
	margin-right: 30px;
	text-align: center;
}
.foodname-carousel-list p{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
.foodname-carousel-area .foodname_en,.foodname-carousel-area .foodname_zh,.foodname-carousel-area .foodname_ko{
	display: none;
}

/*Priceのスライダー*/
.price-top{
	display: none;
	position: absolute;
	top:85%;
	left: 0;
	right: 0;
	margin: auto;
	color: orange;
	font-size: 14px;
	width: 100%;
	max-width: 1024px;
	z-index: 21;
}
.price-carousel{
	position: relative;
	width: 100vw;
	height: calc(100px * 0.5625);
	max-width: 1004px;
	margin: 0 auto;
	overflow: hidden;
	scroll-snap-type: x mandatory;
}
.price-carousel::-webkit-scrollbar{
	display: none;
}
.price-carousel-area{
	position: absolute;
	/*widthはjsで指定 list*スライド枚数*/
	height: 100%;
	display: flex;
}

.price-carousel-list{
	width: 100vw;
	height: calc(100px * 0.5625);
	max-width: 1024px;
	margin-right: 30px;
	text-align: center;
}


/*foodImage*/
.result-top{
	position: absolute;
	top:18%;
	left: 0;
	right: 0;
	margin: auto;
}
.result-top .shadow {
	position: relative;
	width: 100%;/*65%*/
	max-width: 1024px;
	height: auto;
	margin: auto;/*div要素自体を中央*/
	text-align: center;/*中の画像を中央揃え*/
  }
  .result-top .shadow::after { /*画像の周りのシャドー*/
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	box-shadow: inset 0 0 20px 20px #F7EEDF;
  }


  /*foodImageのスライダー*/
  .image-carousel{
	  position: relative;
	  width: 100vw;
	  height: calc(800px * 0.8625);
	  max-width: 1024px;
	  margin: 0 auto;
	  overflow: hidden;
	  scroll-snap-type: x mandatory;
  }
  .image-carousel::-webkit-scrollbar{
	  display: none;
  }
  .image-carousel-area{
	  position: absolute;
	  /*widthはjsで指定 list*スライド枚数*/
	  height: 100%;
	  display: flex;
  }

  .image-carousel-list{
	  width: 100vw;
	  height: calc(800px * 0.8625);
	  max-width: 1024px;
	  margin-right: 30px;
	  text-align: center;
  }
  .image-carousel-list img{
	  width: 100vw;  /*70vw*/
	  height: auto;
  }

  /*AI判定結果のslider*/
  .car-absolute{
	  position: absolute;
	  top:55%;
	  z-index:40;
  }
  .carousel{
	  position: relative;
	  width:100vw;
	  height: calc(400px * 0.8625);
	  max-width: 1024px;
	  margin: 0 auto;
	  overflow: hidden;
  }
  .carousel::-webkit-scrollbar {
	display: none;
  }
  
  .carousel-area{
	  /*widthはjsで指定 list*スライド枚数*/
	  position: absolute;
	  height: 100%;
	  display: flex;
	  overflow: hidden;
	  overflow-x: scroll;
	  scroll-snap-type: x mandatory;
  }
  .carousel-list{
	  width: 100vw;
	  height: calc(400px * 0.8625);
	  max-width: 1024px;
	  margin-right: 30px;
	  text-align: center;
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-image: url(image/AI-carousel-bg.png);
	  font-family: "Nova Square","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  }

  .carousel-img{
	width: 100vw;
	height: calc(200px * 0.8625);
	max-width: 1024px;
	margin-right: 30px;
	text-align: center;
	background-size: 40% auto;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(image/AI-carousel.png);

	text-align: center;
	font-size: 20px;
	color: orange;
	line-height: calc(200px * 0.8625);
  }


  /*スライド送りボタン*/
    /* ボタンタグの装飾リセット */
button {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	color: inherit;
	font: inherit;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	outline: none;
	border-radius: 0;
  }
  .arow-wrap {
	position: absolute;
	bottom: 25%;
	left: 0;
	right: 0;
	margin: auto;
	width: 75%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .arrow-btn {
	transition: .2s;
	color: white;
	font-family: "Nova Square","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  }
  .js-btn-back{
	width: 75px;
	height: 50px;
  }
  .js-btn-next{
	width: 60px;
	height: 50px;
  }

/* 左 */
.arrow-left {
  position: relative;
  background-image: url(image/left_arrow.png);
  background-repeat:no-repeat;
  background-size: contain;
  width: 65px;
  height: 71px;
}
.arrow-left:before {
  content: "";
  position: absolute;
  top: 35%;
  left: 60%;
}
/* 右 */
.arrow-right {
  position: relative;
  background-image: url(image/right_arrow.png);
  background-repeat:no-repeat;
  background-size: contain;
  width: 65px;
  height: 71px;
}
.arrow-right:before {
  content: "";
  position: absolute;
  top: 35%;
  left: 35%;
}


/*確定ボタン*/
.panel{
	position: absolute;
	top: 55%;
	left: 0;
	right: 0;
	width: 100vw;
	height: 55px;
	background-color:#FBC56F;
	z-index: 9000;
}
.result-border-radius{
	position: absolute;
	top:5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	line-height: 50px;
	z-index: 9999;
}
/*再撮影ボタン*/
.result-border-reshot{
	position: absolute;
	top:5%;
	left: 5%;
	width: 50px;
	height: 50px;
	line-height: 50px;
	z-index: 9999;
}

.result-confirm{
	position: absolute;
	top:80%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 13px;
	color: orange;
	z-index: 9999;
}
#confirm_en,#confirm_zh,#confirm_ko{
	display: none;

}
.result-confirm::before{
	content: '';
	display: inline-block;
	width: 16px;/*画像の幅*/
	height: 16px;/*画像の高さ*/
	margin-right: 3px;
	margin-bottom: 2px;
	background-image: url(image/confirm.png);
	background-size: contain;
	vertical-align: middle;
}
.result-price{
	position: absolute;
	top:99%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
  
}

/*--デバイス対応--*/
	/*小さいスマホ*/
@media screen and (min-height: 100px) and (max-height: 481px) {
	.result-top .shadow {
		width: 55%;
	}
		.car-absolute{
			top:43%;
		}
		.result-price{
			top:95%;
		}
		.result-confirm{
			top:90%;
		}
		.price-top{
			top:95%;
		}
	}
	@media screen and (min-height: 485px)and (max-height: 575px) {
		.price-top{
			top:90%;
		}
		.result-confirm{
			top:86%;
		}
	}
/*ipad*/
@media screen and (min-width: 481px) and (max-width: 979px) {
	.foodname-p{
		font-size: 25px;
	}
	.image-carousel,.image-carousel-list{
		height: calc(600px * 0.8625);
	}
	.result-top .shadow {
		width: 70vw;
		height: auto;
	}
	.image-carousel-list img{
		width:  70vw;
		height: auto;
	}
	.car-absolute{
		top:53%;
	}
	.carousel, .carousel-list{
		height: calc(450px * 0.8625);
	}
	.carousel-img{
		height: calc(400px * 0.8625);
		background-size: 28% auto;
		font-size: 25px;
		line-height: 14;
	  }
	  .arow-wrap {
		  bottom:0;
	  }
	  .result-border-radius{
		  top:80%;
	  }
	  .result-border-reshot{
		  top:80%;
	  }
	}



/*---------------------menu.php--------------------*/

/*Menu*/
.menu-absolute{
	position: absolute;
	bottom:-100%;
	left: 0;
	right: 0;
	z-index: 30;
	text-align: center;
	max-height: 110vh;
	visibility:hidden;
}
.food-menu{
	position: relative;
	width: 100vw;
	height: 100vh;
	max-width: 1024px;
}
.menu_logo{
	margin: 30px 0;
}
.food-infomenu{
	position: absolute;
	bottom:15%;
	left: 0;
	right: 0;
	margin: auto;
	width: 95%;
	max-width: 1024px;
	height: auto;
}
.food-menu .menu1{
	position: absolute;
	top:0;
	z-index: 31;
	list-style: none;
	width: 100%;
	padding: 20px;
	text-align: left;
	line-height: 1.8em;
	background-color: #F7F5DF;
	font-style: italic;
}
.food-menu .menu1 .flex{
	display: flex;
	flex-wrap: wrap;
}
.food-menu .menu1 .flex li{
	width: 50% !important;
}
.food-menu .menu1 li:not(.menu_logo){
	width: 100%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	color: black;
	font-weight: bold;
	font-size: 16px;
	border-bottom: dashed 1px;
}
#menu-return a,.menu_reshot a{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	color: black !important;
	font-weight: bold;

}
.menu1_en,.menu1_zh,.menu1_ko{
	display: none;
}

/*各アイコン*/
.allergy:before {
    content: url("image/menu_allergy.png");  /*画像のURL*/
    margin-right:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:5px;
}
.information:before {
    content: url("image/menu_zairyo.png");  /*画像のURL*/
    margin-right:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:5px;
}
.game:before {
    content: url("image/menu_game.png");  /*画像のURL*/
    margin-right:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:5px;
}
.coupon:not(.coupon_guide,.coupon_click):before {
    content: url("image/menu_coupon.png");  /*画像のURL*/
    margin-right:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:5px;
}
.ranking_menuscene:before {
    content: url("image/menu_ranking.png");  /*画像のURL*/
    margin-right:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:5px;
}
.video:before {
    content: url("image/menu_video.png");  /*画像のURL*/
    margin-right:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:5px;
}
.menu_reshot:before {
    content: url("image/menu_reshot.png");  /*画像のURL*/
    margin-right:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:5px;
}
#menu-return:before {
    content: url("image/menu_return.png");  /*画像のURL*/
    margin-right:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:5px;
}


/*UploadImage*/
.upload div {
	position: relative;
	width: 100%;
	max-width: 1024px;
	height: auto;
	margin: auto;/*div要素自体を中央*/
	text-align: center;/*中の画像を中央揃え*/
  }
  .upload div::after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	box-shadow: inset 0 0 20px 20px #F7F5DF;
  }
  .upload div img{
	  width: 90vw;
	  height: auto;
  }

/*Effect-javascript*/
img.glitter-star {
	position: absolute;
	height: 20px;
	width: 20px;
	z-index: 15;
  
	/* アニメーションの設定 */
	animation: glitter 2s linear 0s infinite normal;
	-webkit-animation: glitter 2s linear 0s infinite  normal;
	-moz-animation: glitter 2s linear 0s infinite  normal;
	-ms-animation: glitter 2s linear 0s infinite  normal;
	-o-animation: glitter 2s linear 0s infinite  normal;
  }
  
  /* 必要に応じてベンダープレフィックス（-moz-, -ms-, -o-）をつける */
  @keyframes glitter {
	0% {
	  -webkit-transform: scale(1.0);
	  opacity: 1;
	}
	25% {
	  -webkit-transform: scale(0.5);
	  opacity: 0;
	}
	50% {
	  -webkit-transform: scale(1.0);
	  opacity: 1;
	}
	75% {
	  -webkit-transform: scale(0.5);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: scale(1.0);
	  opacity: 1;
	}
	
  }

  /*food-name*/
  .foodname,.foodname_en,.foodname_zh,.foodname_ko{
	  color: black;
	  font-size: 16px;
	  text-align: center;
	  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;

  }
  #foodname_en, #foodname_zh, #foodname_ko{
	  display: none;
  }

  /*-----本が開く-------*/
  /* 表紙 */
.book-simple {
	position: relative;
	box-sizing: border-box;
	width: 90vw;
	height: 100%;
	max-height: 660px;
	margin-top: 18%;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding-bottom: 10px;
	-webkit-transition: box-shadow 2s ease;
			transition: box-shadow 2s ease;
	background-color: white;
	border: solid 1px black;
	box-shadow: -2px 0 0 0 #124f4b,-1px 4px 1px 1px rgba(0,0,0,.2),20px 0 20px 0 rgba(0,0,0,0);
  
	-webkit-perspective: 1000px;
			perspective: 1000px;
	-webkit-perspective-origin: 0 150%;
			perspective-origin: 0 150%;
  }
  .book-simple:hover, #book-simple-open:checked ~ #book-simple-contents {
	box-shadow: -2px 0 0 0 #124f4b,0 4px 1px 1px rgba(0,0,0,.2),-195px 5px 1px -5px rgba(0,0,0,.2);
  }
  .book-simple::before {
	position: absolute;
	z-index: 9899;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: calc( 100% - 10px);
	background-image: url(image/menu_hyousi2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	content: '';
	-webkit-transition-timing-function: ease;
			transition-timing-function: ease;
	-webkit-transition-duration: 2.5s;
			transition-duration: 2.5s;
	-webkit-transition-property: transform;
			transition-property: transform;
	-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
	background-color: #249690;
	box-shadow: 0 2px 0 0 #124f4b;
  }
  .book-simple:hover::before, #book-simple-open:checked ~ #book-simple-contents::before {
	-webkit-transform: rotateY(-185deg);
			transform: rotateY(-185deg);
  }
  /* 中身 */
  .book-simple .book-inbox {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	padding: 10px;
	transition: box-shadow 1.8s ease;
	transition-delay: .3s;
	background-color: #e2e1dc;
	box-shadow: 200px 0 1px 0 rgba(0,0,0,.4) inset,-2px 0 0 0 #249690;
  }
  .book-simple .book-inbox:after {
	position: absolute;
	bottom: -8px;
	left: 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 8px;
	content: '';
	background-color: #afada3;
  }
  .book-simple:hover .book-inbox, #book-simple-open:checked ~ #book-simple-contents .book-inbox {
	box-shadow: -0 0 8px 0 rgba(0,0,0,.0) inset,-2px 0 0 0 #249690;
  }
  /* ボタン */
  .book-simple-switch {
	display:none;
	width: 6em;
	margin-right: auto;
	margin-left: auto;
	padding: .5em;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #fff;
	box-shadow: 0 5px 0 0 #999;
  }
  input[name='book-simple-switch'] {
	display: none;
  }
  #book-simple-open ~ .book-simple-switch:after {
	content: attr(data-book-simple-open);
  }
  #book-simple-open:checked ~ .book-simple-switch:after {
	content: attr(data-book-simple-shut);
  }

  /*-----本が開く　ここまで------*/

  /*クーポンガイド*/
.coupon_guide{
	display: none;
	position: absolute;
	top: 25%;
	right: 12%;
	width: 100px;
	z-index: 5555;
	opacity: 0;
	animation: flash-couponguide 4s linear infinite;
	animation-delay: 7s;
}
@keyframes flash-couponguide {
	0%,100% {
	  opacity: 1;
	}
  
	50% {
	  opacity: 0;
	}
  }
/*当店のメニューガイド*/
.toutenmenu_guide{
	display: none;
	position: absolute;
	top: 25%;
	right: 12%;
	width: 100px;
	z-index: 5555;
	opacity: 0;
	animation: flash-menuguide 4s linear infinite;
	animation-delay: 7s;
}
@keyframes flash-menuguide {
	0%,100% {
	  opacity: 1;
	}
  
	50% {
	  opacity: 0;
	}
  }

  /*デバイス対応*/
@media screen and (min-width: 481px) and (max-width: 979px) {
	.food-infomenu{
		width: 90%;
	}
}
/*縦長のスマホ*/
@media screen and (min-height: 800px) and (max-height: 979px) {
	.food-menu .menu1{
		top:50px;
	}
}
/*小さいスマホ*/
@media screen and (min-height: 500px) and (max-height: 570px) {
	.food-menu .menu1{
		top:0;
	}
}
@media screen and (max-height: 499px) {
	.food-menu .menu1{
		line-height: 1em;
	}
}

/*---------------------ranking.php--------------------*/
.ranking_bg{
	background-color: #F7EEDF;
}
.ranking_title,.group_title{
	position: relative;
}
.ranking_title h2{
	position: absolute;
	top:15%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 25px;
}
 #ranking_title_en,.ranking_title #ranking_title_zh,.ranking_title #ranking_title_ko{
	display: none;
}
.ranking_title .ranking-shopname{
	position:fixed;
	top:7%;
	right:3%;
	font-size:12px;
	font-family:"fot-tsukuardgothic-std", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", sans-serif;
	z-index: 5555;
}
.ranking_head{
	position: fixed;
	top:0;
	width: 100%;
	background-color: #FBB03B;
	height: 13%;
	padding: 20px;
	z-index: 5555;
}
.ranking_logo{
	position: fixed;
	width: 10%;
	top: 3%;
	left: auto;
	right: 7%;
	z-index: 5555;
}
.ranking_title_img{
	position: absolute;
	top: 25%;
	left: 0;
	right: 0;
	margin: auto;
	width: 80%;
}
.ranking_list{
    position: absolute;
	width: 80%;
	height: auto;
	padding:0 3%;
    top: 151%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	font-size: 16px;
	line-height: 2em;
	background-color: white;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.ranking_list{
	list-style: none;
}
.ranking_img{
	text-align: center;
}
.ranking_img img{
	width:100% !important;
}
.ranking_contents{
	text-align: center;
	font-size: 12px;
	line-height: 1.3em;
}
.ranking_en,.ranking_zh,.ranking_ko{
	display: none;
}

/*各アイコン*/
.ranking_list .ranking_rank ul #list1::before {
    content:"";
	background-image:url("image/ranking_1.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list2::before {
    content:"";
	background-image:url("image/ranking_2.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list3::before {
    content:"";
	background-image:url("image/ranking_3.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list4::before {
    content:"";
	background-image:url("image/ranking_4.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list5::before {
    content:"";
	background-image:url("image/ranking_5.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list6::before {
    content:"";
	background-image:url("image/ranking_6.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list7::before {
    content:"";
	background-image:url("image/ranking_7.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list8::before {
    content:"";
	background-image:url("image/ranking_8.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list9::before {
    content:"";
	background-image:url("image/ranking_9.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_list .ranking_rank ul #list10::before {
    content:"";
	background-image:url("image/ranking_10.jpg");  /*画像のURL*/
	background-size: contain;
	background-repeat: no-repeat;
    margin-right:5px;  /*画像右の余白*/
	display: inline-block;/*忘れずに！*/
	width: 30px;/*画像の幅*/
	height: 30px;/*画像の高さ*/
	vertical-align: middle;
}
.ranking_rank{
	margin-left: 3%;
}

.ranking_list .line{
	width: 100%;
	height: 3px;
	color: black;
	border-top: solid 1px black;
}
.ranking_flex{
	display: flex;;
}
.ranking_list .rank{
	margin-left: 12%;
	color: black;
}
.ranking_list .menu{
	margin-left: 18%;
	color: black;
}
  /*戻るボタン*/
  .ranking_return_right{
	  text-align: right;
  }
  .ranking_return{
	position: absolute;
	color: black !important;
	top:15%;
	left:5%;
	margin-bottom: 10px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}


.ranking_return_en,.ranking_return_zh,.ranking_return_ko{
	display: none;
}

/*縦長のスマホ*/
@media screen and (min-height: 500px){
	.ranking_list{
		line-height: 3em;
	}
}
@media screen and (min-height: 700px){
	.ranking_list{
		top: 135%;
	}
}
@media screen and (min-height: 800px){
	.ranking_list{
		top: 115%;
	}
}
/*---------------------couponlist.php--------------------*/
.coupon_title{
	position: relative;
}
.coupon_title h2{
	position: absolute;
	top:12%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 25px;
}
.coupon_title #coupon_title_en,.coupon_title #coupon_title_zh,.coupon_title #coupon_title_ko{
	display: none;
}
.coupon_title .shopname{
	position:fixed;
	top:7%;
	right:3%;
	font-size:12px;
	font-family:"fot-tsukuardgothic-std", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", sans-serif;
	z-index: 9999;
}
.coupon_head{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #FBB03B;
	height: 13%;
	padding: 20px;
	z-index: 5555;
}
.coupon_logo{
	position: fixed;
	width: 13%;
	top: 3%;
	right: 6%;
	z-index: 5555F;
}

.coupon_title_img{
	position: absolute;
	top:33%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	margin-bottom: 50px;
	width: 100%;
}
.coupon_list{
	position: absolute;
	top:98%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	text-align: center;
}
.coupon_list ul{
	padding-inline-start:0px;
	padding-bottom: 80px;
}
.coupon_list li{
	width: 80vw;
	min-height: 100px;
	margin-top: 20px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	text-align: left;
	border: solid 4px orange;
}
.coupon_list li .coupon_img{
	flex-basis: 30%;
	padding: 10px;
	border-right: dotted 2px orange;
}
.coupon_list li p{
	flex-basis: 70%;
	padding: 15px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.coupon_img{
	text-align: center;
}
.coupon_sp_case{
	margin-top: 30px;
	font-size: 16px;
}
/*クーポンを使用するのボタン*/
  .coupon_section{
	max-width: 150px;
	margin: 0 auto;
	margin-right: 0;
  }
  a.use_coupon {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border: 1px solid orange;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 25px;
	color: orange;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	position: relative;
	transition-duration: 0.2s;
  }
  a.use_coupon:hover {
	background: orange;
	border: 1px solid orange;
	color: #fff;
  }
  a.use_coupon:before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 30px 50px;
	border-color: transparent transparent orange transparent;
  }
  a.use_coupon span {
	  position: absolute;
	  bottom: 12px;
	  right: 20px;
	  display: inline-block;
  }
  a.use_coupon span:before {
	  content: '';
	  width: 16px;
	  height: 16px;
	  background: #ffffff;
	  border-radius: 50%;
	  position: absolute;
	  top: 50%;
	  left: 0;
	  margin-top: -8px;
  }
  a.use_coupon span:after {
	  content: '';
	  width: 6px;
	  height: 6px;
	  border: 0;
	  border-top: 2px solid orange;
	  border-right: 2px solid orange;
	  transform: rotate(45deg);
	  position: absolute;
	  top: 50%;
	  left: 4px;
	  margin-top: -3px;
  }

    /*戻るボタン*/
	.coupon_return{
		position: absolute;
		color: black !important;
		top:15%;
		left:5%;
		margin-bottom: 10px;
		font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	}

	/*縦長のスマホ*/
	@media screen and (min-height: 600px) and (max-height: 795px){
		.coupon_list{
			top:85%;
		}
	}
@media screen and (min-height: 800px){
	.coupon_list{
		top:72%;
	}
	.coupon_title_img{
		top:29%;
	}
}
/*小さいスマホ*/
@media screen and (max-height: 500px){
	.coupon_list{
		top:105%;
	}

}


	/*---------------------coupon.php--------------------*/
.coupon_detail_list{
	position: absolute;
	top:50%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	text-align: center;
}
    /*戻るボタン*/
	.coupon_detail_return{
		position: absolute;
		color: black !important;
		top:15%;
		left:5%;
		margin-bottom: 10px;
		font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	}

  /*---------------------shopvideo.php--------------------*/
  .shopvideo_title{
	position: relative;
}
.shopvideo_title h2{
	position: absolute;
	top:12%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 25px;
}
.shopvideo_title #shopvideo_title_en,.shopvideo_title #shopvideo_title_zh,.shopvideo_title #shopvideo_title_ko{
	display: none;
}
.shopvideo_title .shopname{
	position:fixed;
	top:7%;
	right:3%;
	font-size:12px;
	font-family:"fot-tsukuardgothic-std", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", sans-serif;
	z-index: 9999;
}

.shopvideo_head{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #FBB03B;
	height: 13%;
	padding: 20px;
	z-index: 5555;
}
.shopvideo_logo{
	position: fixed;
	width: 15%;
	top: 3%;
	right: 6%;
	z-index: 9999;
}

.shopvideo_list{
	position: absolute;
	top:55%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.shopvideo_list .banner{
	width: 99vw;
	height: auto;
	margin-bottom: 30px;
}
.shopvideo_list .youtube{
	min-height: 200px;
}
  /*戻るボタン*/
  .shopvideo_return{
	position: absolute;
	color: black !important;
	top:15%;
	left:5%;
	margin-bottom: 10px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.shopvideo_return_en,.shopvideo_return_zh,.shopvideo_return_ko{
	display: none;
}

  /*---------------------camera-setting.php--------------------*/
  .setting_bg{
	background-color: #F7EEDF;
}
/*head*/
.setting-head{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #FDC673;
	height: 13%;
	padding: 20px;
	z-index: 35;
}
.setting_logo{
	position: fixed;
	width: 10%;
	top: 3%;
	left: auto;
	right: 7%;
	z-index: 5555;
}
.camera-guide{
	text-align: left;
	line-height: 1.2em;
}
.camera-guide h2{
	text-align: center;
}
.guide_bold{
	font-weight: bold;
}
.return-camera{
	color: #4169e1;
	text-decoration: underline;
}
  /*---------------------help.php--------------------*/
  .help_bg{
	background-color: #F7EEDF;
}
  .help_title{
	position: relative;
	height: 100%;
}

.help_title h2{
	position: absolute;
	top:22%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 25px;
}
  .help_contents{
	  position: absolute;
	  top:80%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -webkit-transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  width: 100%;
	  padding: 10px;
	  height: 100%;
  }
  .help_contents .slide{
	  display: none;
	  font-size: 13px;
  }
  .help_contents .block{
	display: block;
	font-size: 13px;
}
.help-logo{
	margin-bottom: 50px;
}
.help_contents .toggle{
	position: relative;
}
.help_contents .toggle .q{
	margin-left: 35px;
	line-height: 1.5rem;
	font-size: 15px;
	font-weight: bold;
}
.help_contents .toggle::before,.help_contents .toggle::after{
	display: block;
	content: "";
	position: absolute;
	top: 20%;
	left: 10px;
	width: 15px;
	height: 1.5px;
	background: black;
}
.help_contents .toggle::after {
	transform: rotate(90deg);
}
/*toggleされたら-を表示*/
.help_contents .click::after{
transform: rotate(0deg);
}

  .help_contents span:not(.q){
	  color: #4169e1;
	  text-decoration: underline;
  }
  .help_return_right{
	position: absolute;
	top: 15%;
	left: 5%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.help_return_right a{
	color: black !important;
}

.help_en,.help_zh,.help_ko{
	display: none;
}

  /*---------------------shop_search.php／shop_search_result.php--------------------*/
  .shop_bg{
	background-color: #F7EEDF;
}
.shop_title{
	position: relative;
}
.shop_title h2{
	position: absolute;
	top:22%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 25px;
}
.shop_head{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #FBB03B;
	height: 13%;
	padding: 20px;
	z-index: 5555;
}
.shop_logo{
	position: fixed;
	width: 15%;
	top: 7%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);	
	z-index: 5555;
}
.current-location{
	position: absolute;
	top:40%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);	
	border: solid 1px black;
	border-radius: 20px;
	padding: 15px;
}
.shop_search_f_title{
	position: absolute;
	top:55%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.shop_search_f{
	width: 100%;
	position: absolute;
	top:60%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.shop_search_form{
	padding: 50px 5%;
	margin: auto;
	text-align:center;
	color: white;	
}
.shop_search_form input{
	vertical-align: bottom;
}
/*入力部分のデザイン*/
.shop_application_search{
    font-size: 16px;
    width: 60%;
    border: none;
    outline: none;
	padding:  8px 10%;
	background-color: transparent;
	color: black;
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

.shop_application_search::placeholder {
	color: black;
  }

.shop_search_form .text_underline{
    position: relative; /*.text_underline::beforeの親要素*/
    border-top: 1px solid transparent; /*text3の下線*/
	width: 60%;
	margin-left:15%;
}
.shop_search_form .text_underline:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0%;
	border-top: solid 2px black;
	transform: translateX(-50%);
	/*線が伸びるアニメーション*/
	animation: border_anim 1.5s linear forwards;/*アニメーション*/
  }
  
  @keyframes border_anim {
	0%{
	  width: 0%;
	}
	100%{
	  width: 100%;
	}
  }

.qr_search{
	position: absolute;
	top:80%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);	
	border: solid 1px black;
	border-radius: 20px;
	padding: 15px;
}
.shop_return_right{
	margin-top: 30%;
	margin-left: 20px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.shop_return_right a{
	color: black !important;
}
.shop_return_right::after {
    content: url("image/arrow02.png");  /*画像のURL*/
    margin-left:5px;  /*画像右の余白*/
	position: relative;/*上下の位置調整用*/
	top:3px;
}
.shop_return_en,.shop_return_zh,.shop_return_ko{
	display: none;
}
.shop_search_list{
	width: 80vw;
	text-align: left;
	margin: auto;
	padding: 50px 20px;
}
.shop_search_list li{
	margin-top: 15px;
	color: black !important;
}
.shop_search_list li a{
	color: black !important;
}
/*----------------------------------group_shop_info.php----------------------------------------*/
.group_list{
	width: 100%;
	position: absolute;
	top:60%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	text-align: center;
}
.group_list li {
	margin: 15px auto;
}
.group_title h4{
	position: absolute;
	top:28%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;

}


/*----------------------------------qr_camera.php----------------------------------------*/
.container{
	position: relative;
}
.qrcamera_return{
	position: absolute;
	bottom: 10%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

	font-size: 20px;
	color: orange;
	z-index: 9999;
}