@charset "UTF-8";
/*
Theme Name: donzoko
Theme URI:
Author:
Author URI:
*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP&display=swap');
/* ===============================================
 Reset
=============================================== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:16px;
	letter-spacing: 0.1em;
	line-height:1.6;
	vertical-align:baseline;
	background:transparent;
	font-family: 'Noto Serif JP', sans-serif;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
	display:block;
}
ol,ul{
	list-style:none;
}
*:before, *:after{
	content:'';
	content:none;
}
a{
	margin:0;
	padding:0;
	vertical-align:baseline;
	background:transparent;
	text-decoration:none;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
table th{
	font-weight:normal;
	text-align:left;
	white-space:nowrap;
}
input, select{
	vertical-align:middle;
}
img{
	vertical-align: bottom;
}

/* ===============================================
 Common
=============================================== */
body{
	height:100%;
	font-size:18px;
	line-height:1.6;
	color:#FAFAFA;
	background: #000;

}
main{
}

.pc{display:block !important;} .sp{display:none !important;}
@media screen and (max-width: 780px){
	html,body,main{
	}
	.pc{display:none !important;}
	.sp{display:block !important;}

}

/* --- header ------------------------- */
header{
	z-index:100;
	position: static;
	height:100vh;
}

h1{
	position: absolute;
	top:10%;
	left:25%;
}
h1 img{
	width:90%;
}

.mv{
	position: absolute;
	top:10%;
	right:20%;
	z-index:-10;
}
.mv img{
	width:120%
}
.word_cov{
	position: absolute;
	bottom:5%;
	left:15%;
	display:inline-block;
	width:40%;
	max-width:700px;
	min-width:500px;
	background:#333;
	padding:1%;
}
.word_cov p{
	font-size:120%;
	display:block;
	padding:2%;
	border:1px solid #FFF;
}
.word_cov p a{
	color:#FFF;
	font-size:150%;
}
@media screen and (max-width: 780px){
	header{height:90vh;width:100%;overflow:hidden;}
	h1{left:10%;}
	h1 img{width:65%;}
	.mv{left:0;}
	.mv img{width:125%}
	.word_cov{
		bottom:10%;
		left:0;
		width:94%;
		max-width:94%;
		min-width:94%;
		padding:3%;
	}
	.word_cov p{
		font-size:100%;
		display:block;
		padding:4%;
		border:1px solid #FFF;
	}
	.word_cov p a{
		color:#FFF;
		font-size:150%;
	}
}/**/


/* --- main ------------------------- */
main{
	position:static;
}

section{
	position:static;
	clear:both;
	overflow:hidden;
}

.osusume{
	width:70%;
	margin:200px auto;
	padding:50px 15%;
	overflow:hidden;
	background:#111;
	border:1px solid #222;
}

.os_ttl{
	display:block;
	width:60%;
	font-size:200%;
	float:left;

}
.os_img{
	width: 40%;
	height:300px;
	object-fit: cover;
	float:right;
}
.os_cnt{
	display:block;
	width:60%;
	font-size:120%;
	float:left;
}



.word_sec{
	height:600px;
	width:60%;
	margin:200px auto;
	padding:0 20%;
}

.mv_container{
	width:75%;
	height:auto;
}
.mv_container p{
	max-width:740px;
	display:inline-block;
	margin:20px 0 0 0;
}

.mv_container div{
	width:100%;
	height:100%;
}


.sec_1{background: url(img/bg_s1.png) no-repeat top right;}
.sec_2{background: url(img/bg_s2.png) no-repeat top left;}
.sec_3{background: url(img/bg_s3.png) no-repeat top right;}
.sec_1 h2{float:right;}
.sec_2 h2{float:left;}
.sec_3 h2{float:right;}
.sec_2 .mv_container{float:right;}

.wid_sec{
	width:100%;
	overflow:hidden;
}
.wid_sec h2 img{
	display:block;
	margin:200px auto 10px auto;
}

.loop_menu{
	width:100%;
	overflow:hidden;
}
.inner_menu{
}

.menu_c{
	display:block;
	text-align:center;
	line-height:3em;
}
.menu_c strong{
	font-size:160%;
}

.shid_container{
	width:100%;
	padding:100px 0;
	text-align:center;
	line-height:2;
}
.shid_takeout{
	background-image: url(img/bg_takeout.jpg);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.shid_audo{
	background-image: url(img/bg_shidashi.jpg);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.shid_container p{
	line-height:1.8;
}
.con_container{
	background:#333;
	padding:40px 0;
	text-align:center;
}
.con_container p{
	line-height:2em;
}
.con_container p .tel{
	font-size:300%;
	font-weight:normal;
	color:#FFF;
	display:inline-block;
	margin:25px 0;
}




.order_container{
	width:50%;
	margin:50px auto;
	padding:50px;
	background:rgba(0,0,0,0.5);;
	text-align:left;
	line-height:1.4;
	border-radius: 1em;
	overflow:hidden;
	text-align:center;
}


.item_ditail_container{
	overflow:hidden;
}


.item_ditail{
	width:200px;
	margin:30px;
	float:left;
	font-size:90%;
	overflow:hidden;
	background:#000;
}
.item_ditail .item_wrap{
	width:99%;
}
.item_ditail a{
	display: block;
	height: 0;
	width: 100%;
	padding-bottom: 100%;
	overflow:hidden;
	position:relative;
	transition-duration: 0.3s;
}
.item_ditail a strong{
	display:inline-block;
	margin:7px;
	position:relative;
	padding:5px 8px;
	color:#FFF;
	font-size:80%;
}
.item_ditail a span{
	font-size:75%;
	font-weight:normal;
}
.item_ditail a .item_price{
	padding:4px;
	display:block;
	position:absolute;
	right:0;
	bottom:0;
	text-align:center;
	font-size:120%;
}


.pp_wrap{
	width:100%;
	text-align:center;
	margin:0 auto;
}
.pp_intro{
	padding:10px 0;
}
.pseudo_link{
	display:inline-block;
	cursor: pointer;
	margin:0 5px;
	padding:5px 10px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
.pp_container{
	height:300px;
	font-size:80%;
	margin:20px;
	padding:2%;
	text-align:left;
	overflow-y: scroll;
	border:5px solid #777;
}
.pp_container h3{
	display:block;
	line-height:1;
	margin: 0 0 5px 0;
	padding:0;
}
.pp_container p{
	display:inline-block;
	margin:25px 5px 10px 5px;
}

.order_sw{
	clear:both;
	margin:50px auto;
	padding:0.3em 1em;
	display:inline-block;
	text-align:center;
	font-size:250%;
	cursor: pointer;
	border-radius:3px;
	background:#333;
	clear:both;
}
.order_sw_af{
	clear:both;
	margin:20px 0;
	padding:20px 0;
	display:block;
	text-align:center;
	font-size:130%;
	display:none;
	clear:both;
}

.order_sheet{
	display:none;
}
.order_sheet dl{
	width:100%;
	margin:20px 0;
	overflow:hidden;
}
.order_sheet dl dt{
	width:25%;
	margin:25px 0;
	padding:10px 10px 5px 5px;
	float:left;
	text-align:right;
}
.order_sheet dl dd{
	width:70%;
	margin:25px 0;
	padding:5px;
	float:left;
	text-align:left;
}
.order_sheet dl dd .inp_txt{
	padding: 7px;
	outline: none;
	font-size: 100%;
	border: 1px solid #DDD;
	border-radius:5px;
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	color: #777;
	box-shadow: 3px 2px 2px rgba(0,0,0,0.05) inset;
	background: #FFF;
	width:90%;

}
.order_sheet dl dd select{
    cursor: pointer;
	margin:0 50px 0 0;
    padding: 8px;
    outline: none;
    font-size: 100%;
    border: 1px solid #DDD;
	border-radius:5px;
    width: 30%;
    font-family: 'Noto Sans JP', sans-serif;
    color: #777;
    box-shadow: 3px 2px 2px rgba(0,0,0,0.05) inset;
    background: #FFF;
	float:left;
}

.order_sheet dl dd label{
	display:inline-block;
	margin:15px 0;
	padding:0.8em;
	border:1px solid #777;
	background:#000;
	cursor: pointer;
	border-radius:5px;
}
.order_sheet .inp_alert{
	margin:5px 0;
	padding:0.2em 0.5em;
	background:#F00;
	border-radius:5px;
	display:none;
}
.true_inp{
	display:none;
}

#chk_button{
	margin:20px auto;
	padding:0.6em 2em;
    font-family: 'Noto Sans JP', sans-serif;
}



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

.order_container{
	width:90%;
	margin:50px auto;
	padding:0;
}
.item_ditail{
	width:200px;
	margin:30px auto;
	float:none;
}
.order_sw{
	margin:50px auto;
	padding:0.3em 1em;
	font-size:100%;
}
.order_sw_af{
	margin:20px 0;
	padding:20px 0;
	display:block;
	text-align:center;
	font-size:100%;
	display:none;
}
.order_sheet dl dt{
	width:80%;
	margin:25px 0 0 0;
	padding:20px 0 5px 10px;
	float:none;
	text-align:left;
}
.order_sheet dl dd{
	width:80%;
	margin:0 0 0 0;
	padding:0 0 10px 10px;
	float:none;
}
.order_sheet dl dd select{
	margin:0 0 10px 0;
    width: 70%;
	float:none;
}
.pp_container h3{
	margin: 0 0 2px 0;
}
.pp_container p{
	margin:10px 5px 5px 5px;
	line-height:1.4;
}





.osusume{
	width:90%;
	padding:50px 5%;
}

.os_ttl{
	width:100%;
	float:none;

}
.os_img{
	width: 100%;
	height:auto;
	float:none;
}
.os_cnt{
	width:100%;
	float:none;
}



.word_sec{
	height:auto;
	width:100%;
	margin:0;
	padding:0;
}

.mv_container{
	width:100%;
	height:auto;
}
.mv_container p{
	width:94%;
	max-width:94%;
	display:inline-block;
	margin:3%;
}
h2{
	display:block;
	margin:0 auto;
	text-align:center;
}
h2 img{
	width:80%;
}

.sec_1 h2 img,
.sec_2 h2 img,
.sec_3 h2 img{
	width:15%;
	height:auto;
	display:inline-block;
	margin:100px 0 50px 0;
}
.sec_1{background: url(img/bg_s1.png) no-repeat top center;}
.sec_2{background: url(img/bg_s2.png) no-repeat top center;}
.sec_3{background: url(img/bg_s3.png) no-repeat top center;}


.sec_1 h2{float:none;}
.sec_2 h2{float:none;}
.sec_3 h2{float:none;}
.sec_2 .mv_container{float:none;}

.shid_container{
	width:100%;
	padding:30px 0;
}
.shid_container p{
	line-height:2.2;
}

.fl_img{
	margin:20px auto;
	width:50%;
}
.copyright{
	font-size:10px;
}

}/**/




/* --- footer ------------------------- */
footer{
	width:100%;
	padding:80px 0 0 0;
}
.fl_img{
	margin:50px auto;
	display:block;
}
.copyright{
	margin:20px 0;
	clear:both;
	width:100%;
	text-align:center;
	font-size:12px;
	color:#777;
}



form.sent p,
.screen-reader-response,
.wpcf7-response-output{
display:none;
}


/* ===============================================
 Animation
=============================================== */

	@keyframes fadein_op{from{opacity:0;}to{opacity:1;}}
	@keyframes fadein_y20{from{transform:translateY(20px);}to{transform:translateY(0);}}
	@keyframes fadein_y80{from{transform:translateY(80px);}to{transform:translateY(0);}}
	@keyframes fadeins{from{transform:translateY(80px);opacity:0;}to{transform:translateY(0);opacity:1;}}
	body{
		animation:fadein_op 3s;
	}
.fadeins{
	animation:fadeins 4s;

}