@charset "UTF-8";

/*
Theme Name: Dondoyaki 2019
Theme URI: http://dondoyaki.com
Author: ONZE
Author URI: http:/on-ze.com
Description: Design by <a href="http://on-ze.com">ONZE</a>.
Version: 0.9
Text Domain: dondoyaki-2019
*/


/******************/
/******************/
/* reset **********/

* {
border:0;
margin:0;
outline:0;
padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
font:inherit;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
text-decoration:none;
vertical-align:baseline;
}




article, aside, footer, header, main, nav, section {display:block;}
audio, canvas, progress, video {display:inline-block;}

br,
hr {display:block;}

ol,
ul {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}

input,
select {vertical-align:middle;}


/******************/
/******************/
/* html format ****/

html {font-size:62.5%;}

body {
background:#000;
color:#fff;
font-family:'YuGothic', 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'Helvetica', sans-serif;
/*font-family:'YuMincho', 'Yu Mincho', '游明朝', 'Hiragino Mincho ProN', 'ヒラギノ明朝 ProN W3', 'Meiryo', 'メイリオ', 'Times New Roman', serif;*/
font-family:'Meiryo', 'メイリオ', 'YuGothic', 'Yu Gothic', '游ゴシック', Arial, Verdana, sans-serif;
/*font-family:'Noto Sans Japanese', 'Meiryo', 'メイリオ', 'YuGothic', 'Yu Gothic', '游ゴシック', Arial, Verdana, sans-serif;*/
font-size:19px;
font-size:1.9rem;
line-height:1;
position:relative;
text-align:center;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-o-text-size-adjust:100%;
	text-size-adjust:100%;
font-feature-settings:"palt";
-webkit-font-smoothing:antialiased;
/*-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;*/
font-smoothing:antialiased;
/* text-rendering:optimizeLegibility; まだ使わないほうが無難 */
-webkit-tap-highlight-color:transparent;
width:100%;
height:auto;
}

body.is-modal {overflow:hidden;}

a,
a:link,
a:visited,
a:hover,
a:active {
color:inherit;
	-webkit-tap-highlight-color:transparent rgba(0,0,0,0);
	-moz-tap-highlight-color:transparent rgba(0,0,0,0);
	-ms-tap-highlight-color:transparent rgba(0,0,0,0);
	-o-tap-highlight-color:transparent rgba(0,0,0,0);
	tap-highlight-color:transparent rgba(0,0,0,0);
text-decoration:none;
-webkit-text-decoration-skip:objects;
}


a:hover {color:#50bbbb; color:var(--oz-color-green);}

h1,
h2,
h3,
h4,
h5,
h6 {display:block;}

b {color:#50bbbb; color:var(--oz-color-green);}
i {font-style:normal;}
u {text-decoration:underline;}
em {font-weight:bold;}
strong {font-weight:bold; font-size:1.4em;}
mark {background:transparent;}

q {}
q:before,
q:after {content:'"';}
s {text-decoration:underline;}
del {text-decoration:line-through;}

ins {}
iframe {}

ruby {}
rt {font-size:0.5em;}

sup {vertical-align:super; font-size:smaller;}
sub {vertical-align:sub; font-size:smaller;}

details {margin:0 0 40px 0;}

hr {margin:0 0 40px 0; border:0; border-top:1px solid #ccc; border-color:var(--oz-color-light); height:0;}

table {border-collapse:collapse; border-spacing:0; empty-cells:show; border:0; width:100%; margin:0 0 2em 0; border-top:1px solid rgba(255,255,255,0.2); border-color:var(--oz-color-border);}
table th,
table td {padding:16px 4px; vertical-align:top; border-bottom:1px solid rgba(255,255,255,0.2); border-color:var(--oz-color-border);}
table caption {text-align:left; padding:8px;}


/******************/
/******************/
/* shortcodes *****/

.pc {display:block;}
.tb {display:none;}
.sp {display:none;}
.pc.tb {display:block;}
.pc.sp {display:block;}
.tb.sp {display:none;}


.alignright,
.align-right,
.textright,
.text-right {text-align:right;}
.alignleft, .align-left, .textleft, .text-left {text-align:left;}
.center, .aligncenter, .align-center, .textcenter, .text-center {text-align:center; display:block; margin-left:auto; margin-right:auto;}
.clear {clear:both;}
.clearfix:after {content:""; clear:both; display:block; height:0; visibility:hidden;}
[hidden],
.hide,
.none {display:none;}
.hidden {overflow:hidden;}
.left, .floatleft, .float-left {float:left;}
.right, .float-right, .float-right {float:right;}
.relative {position:relative;}
.absolute {position:absolute;}
.static {position:static;}
.fixed {position:fixed;}
.nowrap {white-space:nowrap;}
.small {font-size:0.8em;}

img.left,
img.alignleft,
img.align-left {margin:0 20px 20px 0; float:left;}
img.right,
img.alignright,
img.align-right {margin:0 0 20px 20px; float:right;}

img.full {width:100%; max-width:100%; height:auto;}

table.border,
table.border th,
table.border td {border:1px solid #ccc; border-color:var(--oz-color-light);}

table.hover tbody tr:hover,
table.hover tbody tr:nth-child(odd):hover,
table.hover tbody tr:nth-child(even):hover {background-color:#50bbbb; background-color:var(--oz-color-green); color:#fff; cursor:text;}

table.stripe tbody tr:nth-child(odd) {background-color:#ccc; background-color:var(--oz-color-light);}
table thead th {vertical-align:bottom;}

:root {
--oz-color-black:#000;
--oz-color-dark:#555;
--oz-color-gray:#999;
--oz-color-white:#fff;
--oz-color-border:rgba(255,255,255,0.2);
}


.color-black {}
.color-gray {color:#999; color:var(--oz-color-gray);}
.color-light {color:#ccc; color:var(--oz-color-light);}
.color-green {color:#50bbbb; color:var(--oz-color-green);}
.color-white {color:#ffffff;}

.color-success {color:blue;}
.color-error {color:red;}
.color-warning {color:yellow;}

/******************/
/******************/
/* WordPress Tags */

img.size-full,
img.size-large,
.wp-post-image,
.post-thumbnail img {
max-width:100%;
width:100%;
height:auto;
}

.wp-caption {}
.wp-caption-text {}
.sticky {}
.gallery-caption {}
.bypostauthor {}
#wpstats {display:none;}

.wp-embedded-content {max-width:100%; width:100%;}
.wp-video {margin:0 0 1em 0; max-width:100%; width:100%;}
.wp-video-shortcode {margin:0 0 1em 0; max-width:100%; width:100%;}
/******************/
/******************/
/* layout *********/

#to,
#bo {clear:both; display:block; height:0; overflow:hidden;}

.site {width:100%; height:auto; position:relative;}

.inner {clear:both; display:block; margin:0 auto; position:relative; max-width:1200px; width:100%;
padding:0 12px;
padding-left:calc( 12px + constant(safe-area-inset-left) );
padding-right:calc( 12px + constant(safe-area-inset-right) );
}
.inner[data-width="min"] {max-width:1200px;}
.inner[data-width="mid"] {max-width:1600px;}
.inner[data-width="max"] {max-width:2400px;}

.inner:after {content:""; display:block; clear:both; height:0; visibility:hidden; overflow:hidden;}

/******************/
/******************/
/* header *********/

#bg {position:fixed; top:0; left:0; right:0; bottom:0; background:url("images/bg.png") center center no-repeat; background-size:cover; z-index:-1;}
#bg:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.2);}

#header {width:100%; height:100vh; min-height:600px; padding:0; display:block; position:relative;}

#header-logo {position:absolute; left:6%; top:30%;}
#header-logo h1 {display:block; margin:0; white-space:nowrap; overflow:hidden; width:60vw; height:37vw;}
#header-logo h1 a {background:url("images/logo.png") 0 0 no-repeat; background-size:100% auto; display:block; padding:40vw 0 0 0;}
#header-logo a:hover {}

#header p {position:absolute; right:2%; bottom:6%; width:24vw; height:24vw;}
#header p img {width:100%; max-width:100%; height:auto;}
#header select {position:absolute; top:20px; left:20px; font-size:15px; font-size:1.5rem;
	padding:12px;
}

@media screen and (max-width:900px) {
	#header-logo {top:20%;}
	#header-logo h1 {width:80vw; height:60vw;}
	#header-logo h1 a {padding:70vw 0 0 0;}
}
@media screen and (max-width:800px) {
	#header p {width:30vw; height:30vw;}
}
@media screen and (max-width:700px) {
	#header-logo {left:0; top:20%;}
	#header-logo h1 {width:100vw; height:60vw;}
	#header p {left:50%; bottom:0; transform:translateX(-50%);}
}
@media screen and (max-width:600px) {
	#header p {width:36vw; height:36vw;}
}
@media screen and (max-width:520px) {
	#header p {width:46vw; height:46vw;}
}
@media screen and (max-width:500px) {
	#header p {width:52vw; height:52vw;}
}
@media screen and (max-width:460px) {
	#header {height:auto; min-height:140vw;}
}
/******************/
/* util ***********/


/******************/
/******************/
/* footer *********/

#footer {text-align:center; padding:0 0 80px 0; line-height:1.6;}



#footer-logo {}
#footer-logo h2 {margin:0;}
#footer-logo h2 i {font-size:20px; font-size:2.0rem;}
#footer-logo h2 a {}
#footer-logo h2 a:hover {}
#footer-logo p {font-size:12px; font-size:1.2rem; margin:0 auto 20px;}

#footer small {clear:both; font-size:15px; font-size:1.5rem;}

/******************/
/******************/
/* main ***********/

#main {padding:120px 0 0.1em 0; line-height:2.0; letter-spacing:0.1em; overflow:hidden;}

#main a {
/*	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
-webkit-transition:all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition:all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition:all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
*/
}


/******************/
/******************/
/* article ********/

#main {text-shadow:2px 2px 4px #000;}

#main dl {font-weight:bold; margin:0 auto 2em;}
#main dl dt {font-size:1.2em;}
#main dl dd {margin:0 0 1em 0;}
#main dl dd:not(:last-child):after {content:""; display:block; width:80px; height:1px; background-color:#fff; margin:1em auto;}
#main dl dd span {font-size:0.8em;}
#main dl dd a {display:block;}
#main dl .qr-code {padding:24px;}
#main dl .qr-code img{width:120px; height:120px;}


.section {margin:0 0 180px 0;}

.section h3 {font-size:31px; font-size:3.1rem; margin:0 auto 0.6em;}
.section h4 {font-size:25px; font-size:2.5rem; margin:0 auto 0.6em;}
.section p {margin:0 0 1em 0;}

.section ul {margin:0 auto 2em;}
.section ul li:before {content:"・";}

.section table {font-size:17px; font-size:1.7rem;}
.section table th {text-align:center;}
.section table td {text-align:left;}


@media screen and (max-width:600px) {
	.section {margin:0 0 100px 0;}
}

.button a {
	border: 2px solid var(--oz-color-white);
	cursor: pointer;
	color: var(--oz-color-white);
	padding: 1em 2em;
	font-size: 2rem;
	display: block;
	width: fit-content;
	margin-bottom: 2rem;
	min-width: 200px;
	text-align: center;
}
.button a:hover {
	background-color: var(--oz-color-white);
	color: var(--oz-color-black);
}
strong.title {
	margin:0 auto 2em; width:fit-content;
	background-color:#fff; color:#000; text-shadow:none;
	padding:0.2em 1em;
}
@media screen and (max-width:600px) {
	strong.title {font-size:1.2em;}
}


/******************/

.section-top-video .video-wrapper {
	width: 90%;
	margin: 0 auto;
}
.section-top-video .video-wrapper video {
	width: 100%;
}
.section-top-navi ol {
	margin-top: 5rem;
	text-align:left;
	font-size:25px; font-size:2.5rem;
	display:flex; justify-content:flex-start;
	flex-wrap:wrap; gap:2%;
	counter-reset:li;
}
.section-top-navi ol li {
	flex-basis:49%;
	margin:0 0 2% 0;
}
.section-top-navi ol li a {
	background-color:transparent;
	color:#fff;
	display:block; padding:0.4em 0 0.2em 1em;
	border:1px solid #fff;
}
.section-top-navi ol li a::before {
	counter-increment: li;
	content: counter(li) ".";
}
.section-top-navi ol li a:hover {
	background:#fff; color:#000;
	text-shadow:none;
}

@media screen and (max-width:680px) {
	.section-top-navi ol li {flex-basis:100%; margin:0 0 2% 0;}
}
@media screen and (max-width:500px) {
	.section-top-navi ol {font-size:21px; font-size:2.1rem;}
}

#top-topics h3 {margin-bottom:1.2em; line-height:1.6;}
#top-topics h3 span {display:inline-block; padding:2px 12px; background-color:#fff; text-shadow:none; color:#000; font-size:13px;}
#top-topics h3 b {display:block;}
#top-topics hr {margin:80px 0;}

#top-topics p a,
.modal p a {border:1px solid #fff;
	border-top-color:transparent;
	border-left-color:transparent;
	border-right-color:transparent;
padding:2px 12px;
}
#top-topics p a:hover,
.modal p a:hover {
	border:1px solid #fff;
	background-color:#fff;
	color:#000; text-shadow:none;
}

#top-main h3 img {max-width:600px; width:100%; height:auto;}


#top-contact dd span {font-size:0.8em;}


#top-contact .sns ul {text-align:center; margin:0 auto 2em;}
#top-contact .sns ul li {
	width:40px; height:40px; overflow:hidden;
	margin:0 6px;
	display:inline-block;
}
#top-contact .sns ul li a {
	display:block;
	padding:50px 0 0 0;
	background:url("images/icon-tiktok-white.svg") 0 0 no-repeat;
	background-size:40px 40px;
}
#top-contact .sns ul li:nth-child(1) a {background-image:url("images/icon-instagram-white.svg");}
#top-contact .sns ul li a:hover {opacity:0.6;}
#top-contact .sns  ul li:before {
	display: none;
}

.maps {position:relative; width:100%; height:400px; overflow:hidden; margin:0 0 1.2em 0;}
.maps iframe {position:absolute; top:0; left:0; right:0; bottom:0; width:100%;}


.modal {position:fixed; top:0; left:0; right:0; bottom:0;
	background-color: rgba(0,0,0,0.9);
	z-index:999999;
}

.modal {overflow:scroll;}
.modal-window {position:relative; padding:40px; max-width:1200px; margin:0 auto; text-align:left;}
.modal-close.btn-float {border:none; position:absolute; top:32px; right:32px; width:48px; min-width:inherit; height:48px; padding:0;}
.modal-close.btn-float:before,
.modal-close.btn-float:after {content:""; display:block; position:absolute; top:50%; width:100%; height:2px; background-color:#fff; transform:rotate(45deg) translate(0, -50%);}
.modal-close.btn-float:after {transform:rotate(135deg);}

.modal-close.btn-float:hover {background:none;}
.modal-close.btn-float:hover:before,
.modal-close.btn-float:hover:after {background-color:#aaa;}

.modal p {margin-bottom:40px; overflow:hidden;}
.modal small {font-size:13px; font-size:1.3rem; margin-bottom:1em;}
.modal h3 {font-size:36px; font-size:3.6rem; margin-bottom:24px;}
.modal h4 {font-size:28px; font-size:2.8rem; margin-bottom:20px;}

img.figure {width:40%; float:left; margin-right:40px;}
img.figure+div {overflow:hidden; width:calc(60% - 40px);}

.modal dl {clear:both;}
.modal dl dt {margin-bottom:16px;}
.modal dl dd {margin-bottom:32px;}
.modal dl dd:not(:last-child):after{display:none;}

.modal ul {font-size:16px; font-size:1.6rem; margin-bottom:40px; list-style:circle;}

.modal .btn {text-align:center; margin-bottom:0;}

.modal .box {padding:40px 64px; border:1px solid #fff; margin-bottom:64px;}
.modal .box-white {background:#fff; color:#000; text-shadow:none;}
.modal .box table {margin-bottom:0.5em; font-size:15px; font-size:1.5rem;}
.modal .box table th b{display:inline-block; padding:0 12px; margin-bottom:4px; font-size:12px; font-weight:bold; color:#fff; text-shadow:none; background:#d10; }
.modal .box table th span {display:block;}
.modal .box table td {text-align:right; min-width:80px; vertical-align:middle;}
.modal .box table+small {display:block; text-align:right; margin-bottom:2em;}
.modal .box p {margin-bottom:1em;}

.modal dl.box dt,
.modal dl.box dd {font-weight:normal;}
.modal .box dl {margin-bottom:0.4em;}
.modal .box dl dt,
.modal .box dl dd {font-size:17px; font-size:1.7rem; font-weight:normal;}
.modal .box dl dt {margin-right:1em;}
.modal .box dd:last-child {margin-bottom:0;}
.modal .box a img {width:80%; display:block;}
.modal .box.tel-box p {font-size:13px; font-size:1.3rem;}
.modal button {margin-bottom:80px;}

.modal .flex {display:flex; justify-content:space-between; flex-wrap:nowrap;}
.modal .flex-cell { flex-basis:48%;}
.modal .tel {font-size:37px; font-size:3.7rem; font-weight:bold; margin-bottom:40px; border-bottom:1px solid #000;}

.modal .transfer {margin-bottom:24px;}
.modal .transfer dt,
.modal .transfer dd {display:inline;}

.modal-close {display:block; margin:0 auto; padding:8px 16px; min-width:200px; border:solid 1px #fff; background:none; color:#fff;}
.modal-close:hover {background:#fff; color:#000;}

#modal-partner dl dd:not(:last-child):after {
	display: none;
}
@media screen and (max-width:1080px) {
	.modal .box{padding:32px;}
	.modal .tel {font-size:25px; font-size:2.5rem;}
}
@media screen and (max-width:800px) {
	.modal-window {padding:20px;}
	.modal .figure {float:none; width:100%;}
	.modal .figure+div {width:100%;}
	.modal .box{padding:40px 24px;}
	.modal .flex {display:block;}
	.modal .tel {font-size:calc( * ( 100vw - 80px ) / 800);}
}

/******************/
/* Flexbox System & Table System */

#flame-particle {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events:none;
}


/******************/
/* facebook *******/

/******************/
/* twitter ********/


/******************/
/******************/
/* Media Query ****/


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

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

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


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

/* ▲ iPhone 6+ 横（736px） ▼ */
@media screen and (max-width:740px) {
}

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


/* ▲ Mac OS Safari - Minimum(504px) ▼ */
@media screen and (max-width:520px) {

}

/* ▲ iPhone 6+ - iPhone 6 ▼ */
@media screen and (max-width:380px) {

}


/******************/
/******************/
/* fonts **********/



/******************/
/******************/
/* Keyframes ******/



/* end ************/
/******************/
/******************/