/* ######## main内の上位レイヤー ######## */
.title-layer{
    display: grid;
    place-items: center;
    border-bottom: 0.8vw solid #9cccb4;
    padding: 3vw 0 3vw;
}
.info-layer{}
.info-layer h1 {
    border-bottom: 2px solid #9cccb4;
}
/* ##################################### */

/* ######## resources\views\common_header.blade.php ######## */
.lang-button-layer {
	display:flex;
    align-items: center;
	position: relative;
	margin-right: 0.8rem;
}
.lang-button-select {
	position: absolute;
    width: 100%;
	height: 100%;
    opacity: 0;
}

/* ######## resources\views\order.blade.php ######## */
.service-type-button {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    margin: 1vw;
    padding: 1vw;
    border-radius: 5px;
    border: solid 1vw #9cccb4;
}

/* ######## resources\views\menu_list.blade.php ######## */
.menu-layer {
    display: grid;
    grid-template-columns: 3fr 4fr;
    border: 0.1vw solid #ced4da;
    border-radius: 10px;/* radius */
    margin: 1vw 0 1vw;
}

.menu-layer .p-relative img{/* radius */
    border-radius: 10px 0px 0px 10px;
}

.menu-sold{
	position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    font-weight: bold;
	color: #ffffff;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-radius: 10px 0px 0px 10px;/* radius */
	background: rgb(75 75 75 / 50%);
}

.menu-mark{
	position: absolute;
    top: 0;
    right: 0;
}

.menu-icon-text {
    border: 1px solid;
    border-radius: 5px;
    word-wrap: break-word;
    padding: 0.5vw 1vw;
    margin: 0vw 0.5vw 0.5vw 0vw;
}

.menu-icon-image {
    margin: 0.5vw;
    height: 6vw;/* 感覚で調整 */
}

.menu-rating-image {
    height: 4vw;/* 感覚で調整 */
}

.menu-spin-large {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu-info-layer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.menu-select-layer {
	/* 範囲選択状態にさせない */
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    display:flex;
    justify-content: flex-end;
	align-items: center;
	padding: 2vw 0vw 2vw 0vw;
}
.btn--select {
	color: #9cccb4;
	font-size: 1rem;/* .fs-M */
	font-weight: bold;
	text-align: center;
}
.btn--order {
	padding: 0.5vw;
	border-radius: 100vh;
	border: 0.5vw solid #9cccb4;
}
.btn--plus {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 7vw;
    height: 7vw;
	border-radius: 50%;
	border: 0.5vw solid #9cccb4;
}
.btn--square {
	display: none;
	color: black;
	width:10vw;
}
.btn--minus {
	display: none;
    justify-content: center;
    align-items: center;
    width: 7vw;
    height: 7vw;
	border-radius: 50%;
	border: 0.5vw solid #9cccb4;
}
.btn--option {
	padding: 0.5vw;
	border-radius: 100vh;
	border: 0.5vw solid #9cccb4;
}

/* ######## resources\views\menu_detail.blade.php ######## */
.menu_detail_layer {
	width: 95%;
	margin:auto;
	margin-top:5vh;
	margin-bottom: 5vh;
	background-color: #ffffff;
}
.menu_detail_relative_area {
	position: absolute;
	bottom: 0;
	left: 0;
	width:100%;
	background:rgb(75 75 75 / 50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.menu_detail_relative_close {
	position: absolute;
	top: 0;
	right: 0;
	color:#ffffff;
	font-size:7vw;
	border-radius: 50%;
	border: 0.5vw solid #808080;
	background:rgb(75 75 75 / 50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10vw;
	height: 10vw;
	margin:3vw;
}
.menu_detail_relative_remain {
	margin: 2vw;
	text-align: start;
	color:#ffffff;
	font-weight: bold;
}
.menu_detail_relative_price {
	margin: 2vw;
	text-align: end;
	color:#ffffff;
	font-weight: bold;
}
.menu_detail_new {
	border: 0.5vw solid #ff0000;
	color: #ff0000;
}
.menu_detail_recommend {
	border: 0.5vw solid #f7e900;
	color: #f7e900;
}
	/* takeout checkbox start 参考:https://codepen.io/RunLand_blog/pen/GLybYa*/
	input[name=make_takeout] {
		display:none;
	}
	.check-mark {
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		border: 1vw solid #9cccb4;
		margin-right:2vw;
		color:#ffffff;
		font-size:1.5rem !important;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top:1vw;
	}
	input[name=make_takeout]:checked + .check-mark {
		background-color: #9cccb4;
	}
	/* takeout checkbox end*/
/* ######## resources\views\option_detail.blade.php ######## */
.option_detail_layer{
	display: flex;
	flex-wrap: wrap;
	gap: 1%;
}
.option_detail_item{
	width:49.5%;
	margin-bottom:1vw;
	border: 0.5vw solid #ced4da;
	border-radius:5px;
	padding:1vw;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	position:relative;
}
.option_detail_relative_area {
	display:none;
	position:absolute;
	top:-1%;
	left:-1%;
	width:102%;
	height:102%;
	background-color:rgb(75 75 75 / 50%);;
	border: 0.5vw solid #ced4da;
	border-radius:5px;
}
.option_detail_relative_count {
	display:flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.option_detail_required {
	padding: 1vw;
	border-radius:5px;
	background-color:#EC847C;
	font-weight: bold;
}

/* ######## info-layer配下を画面中央に配置 ######## */
.info-layer-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 40vh;
}

.app_custom_wrap {
	/* margin-right: auto;
	margin-left: auto;
	width: 98%; */
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color : transparent;
}

.wrap-popup {		
	margin-right: auto;		
	margin-left: auto;		
	width: 100%;		
	box-sizing: border-box;		
	background-color: #FFF;		
	cursor: pointer;	
}
.wrap-popup-98-r {		
	margin-right: auto;		
	margin-left: auto;		
	width: 98%;		
	box-sizing: border-box;		
	background-color: #FFF;		
	cursor: pointer;
	border-radius: 10px;		
}

.cart-line-layer{
    border: 0.05vh solid #aaa;
    margin: 1vw 1vw;
    padding: 2vw 2vw;
}

.cart-inner-line-layer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-order-layer{
    position: fixed;
    width: 100%;
    padding: 1vw 3vw 1vw 3vw;
    border-top: solid 1px #cccccc;
}

/* ######## any payment ######## */
.payment-info-layer{
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	margin: 2vw 2vw 0 2vw;
}
.payment-instructions-layer{
    display: flex;
    flex-direction: column;
    background-color: #e4e5e8;
	margin: 0 2vw 2vw 2vw;
}
.payment-instructions-button-layer{
	display: flex;
	justify-content: space-evenly;
	padding: 3vw;
	gap: 2vw;
}
.payment-instructions-button {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0.5vw solid #9c9c9c;
	border-radius: 5px;
	box-shadow: 0.5vw 0.5vw 0.5vw 0.5vw rgba(0, 0, 0, 0.2);
	background-color: #F8F9FA;
	padding: 2vw;
	font-weight: bold;
	color: #505050;
}

/* ######## cart list dropdown ######## */
.d-dropdown {
    width: 4rem;
    display: inline-block;
    background-color: #fff;
    box-shadow: 0 0 2px rgb(204, 204, 204);
    transition: all .5s ease;
    position: relative;
    font-size: 1em;
    color: #474747;
    height: 100%;
    text-align: left;
    outline:0;
}

.d-dropdown .select {
    cursor: pointer;
    display: block;
    padding: 0.2rem;
	text-align: center;
}

.d-dropdown .select > i {
    font-size: 1em;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 1.4rem;
}

.d-dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}

.d-dropdown:active {
    background-color: #f8f8f8
}

.d-dropdown.active:hover,
.d-dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: #f8f8f8
}

.d-dropdown.active .select > i {
    transform: rotate(-90deg)
}

.d-dropdown .d-dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    z-index: 9;
    outline: 0;
	text-align: center;
}

.d-dropdown .d-dropdown-menu li {
    padding: 0.2rem;
    border-bottom: rgb(204, 204, 204) 1px solid;
    transition: all .2s ease-in-out;
    cursor: pointer
} 

.d-dropdown .d-dropdown-menu {
    padding: 0;
    list-style: none
}

.d-dropdown .d-dropdown-menu li:hover {
    background-color: #f2f2f2
}

.d-dropdown .d-dropdown-menu li:active {
    background-color: #e2e2e2
}