@charset "UTF-8";
/* CSS Document */

html{
    color:#222;
    font-size:1em;
    line-height:1.4;
}

li{
	list-style:none;
}

a{
	text-decoration:none;
}

audio,
canvas,
iframe,
img,
svg,
video{
    vertical-align:middle;
}

fieldset{
    border:0;
    margin:0;
    padding:0;
}

textarea{
    resize:vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
*{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

/* フレキシブルメディア
------------------------------------------------------------------------------ */
img{
	width:100%;
	max-width:100%;
}
video{
	max-width:100%;
	height:auto;
}

/*YoutubeやVimeoなどのiFrameを使った埋め込み動画用*/
.video-container{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.video-container iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* COMMON Style
------------------------------------------------------------------------------ */

body{
	width:100%;
	margin:0;
	padding:0;
	word-break:break-all;
}

.pc{
	display:none;
}


h2{
	font-size:2.2em;
	font-family: 'Oswald', sans-serif;
}

.single_h2{
	margin:120px auto 60px;
}

h3{
	color:#ce1125;
	font-size:1.4em;
	margin:0 auto 10px;
}

#container{
    width:100%;
    text-align:center;
}

section{
	text-align:center;
	margin:0 auto;
	padding:15px;
}

#wrapper{
	background-color:#fff;
}

.site h1{
	text-align:left;
    margin:0;
	padding:5px;
}

.site h1 img{
	width:150px;
}

/*header*/
header{
	background:none;/*PCのbackgroundを消す*/
}

#container::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100vw;
	height:100vh;
	background-image:url('http://reddoor.xyz/wp/wp-content/themes/reddoor/images/top_home_vertical.png');
	background-position:center center;
	-webkit-background-size:cover;/*Android4*/
	background-size:cover;
}

.box{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  
	box-sizing:border-box;
  
	width:100vw;
	height:auto;
	min-height:100vh;  
  
	background-size:cover;
	background-position:center center;
}
  
.boxA{
    background-color:rgba(255,255,255,0.9);
    padding:10px;
	width:100%;
	position:fixed;
}

/* MENU */
#menubtn{
    padding:3px;
    border:none;
    background-color:transparent;
    position:absolute;
    top:20px;
    right:15px;
    cursor:pointer;
}

#menubtn:hover{
    color:#C03;
}

#menubtn:focus{
    outline:none;
}

#menubtn i{
    color:#ce1125;
    font-size:2.5em;
}

#menubtn span{
    display:inline-block;
    text-indent:-9999px;
}

#menu{
    display:none;
}

.menu ul{
    margin:0;
    padding:0;
    list-style:none;
}

.menu li a{
    display:block;
    padding:3px;
    color:#ce1125;
    font-size:1.6em;
    text-decoration:none;
}

.menu li a:hover{
    background-color:#eeeeee;
}

/*footer*/
footer{
	padding:10px;
	background-color:#fff;
	font-size:0.9em;
}

/*information*/
article.info{
	margin-bottom:50px;
	padding-bottom:20px;
}

.info p {
	text-align:left;
	line-height:1.7em;
	margin:20px 0;
}

.info p.info_date{
	text-align:center;
	font-size:0.9em;
}

.info img{
	width:300px;
	height:auto;
	display:block;
	margin:0 auto;
}

/*event*/
.event{
	background-color:#f1f1f1;
}

.event_wrap{
	margin:0 auto 70px;
	text-align:center;
}

.event p{
	margin:5px;
}

.event .event_player{
	margin-bottom:20px;
}

.date{
	font-weight:bold;
	font-size:1.4em;
}

.time{
	font-size:1.4em;
}

div.flyer_image{
	text-align:center;
	object-fit:contain;
	width:300px;
	height:auto;
	margin:0 auto;
}

div.flyer_image img{
	display:block;
}

/*about*/
.about{
	color:#fff;
	background-color:#ce1125;
}

.about section{
	margin:0 auto;
	padding:15px 0;
}

.about h2{
	font-size:2.2em;
}

.about .door{
	width:142px;
	margin:15px auto;
	background-color:#fff;
	padding:20px;
	border-radius:50%;        /* CSS3草案 */
    -webkit-border-radius:50%;    /* Safari,Google Chrome用 */
    -moz-border-radius:50%;   /* Firefox用 */
}
	
.about .door img{
	width:60px;
}
.phone{
	font-size:2em;
	font-family: 'Oswald', sans-serif;
}

.phone a{
	color:#ffc;
}

iframe{
	margin:0;
	padding:0;
	width:100%;
	height:350px;
	border:none;
}

/*sns*/
.sns{
	margin:30px 0 20px;
	padding:0;
}

.sns li{
	width:50px;
	height:50px;
	margin:0 5px;
	padding:10px;
	background-color:#fff;
	display:inline-block;
	border-radius:50%;        /* CSS3草案 */
    -webkit-border-radius:50%;    /* Safari,Google Chrome用 */
    -moz-border-radius:50%;   /* Firefox用 */
}

.sns li img{
	width:30px;
	height:30px;
}

.sns li a:hover{
	opacity:.7;
}

.not_found{
	margin-top:100px;
}

/* MENU */
p.bottun{
	display:block;
	width:100%;
	max-width:300px;
	margin:40px auto 20px;
	text-align:center;
	
}

p.bottun a{
	padding:20px;
	background-color:#666;
	color:#fff;
	border-radius:10px;        /* CSS3草案 */
    -webkit-border-radius:10px;    /* Safari,Google Chrome用 */
    -moz-border-radius:10px;   /* Firefox用 */
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;	
}

p.bottun a:hover{
	opacity:.5;
}

.prev a,.next a{
	color:#ca1125;
	font-size:1em;
	text-align:center;
	padding:10px;
	border:solid 1px #ccc;
}

.prev{float:left;}
.next{float:right;}

/* コロナ対策 */
.corona {
	margin: 0 auto;
	padding:24px;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}
.corona p {
	font-size: 18px;
	color: #ffffff;
	margin: 0;
}
.corona p.toTakeTemperature {
	font-size: 16px;
}
.corona ul {
	width: 90%;
	font-size: 14px;
	color: #ffffff;
	text-align:left;
    margin: 16px auto;
	padding-left: 16px;
}
.corona li {
	font-weight: normal;
	list-style-type: disc;
    padding: 4px 0;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 967px) {
header{
	background-image:url('http://reddoor.xyz/wp/wp-content/themes/reddoor/images/top_home.jpg');
	background-repeat:no-repeat;
    background-position:center bottom;
	background-attachment:fixed;
    -webkit-background-size:cover;
    background-size:cover;
}
.corona {
	width: 65%;
}
}
@media only screen and (min-width: 1081px) {
/*header*/
.sm{
	display:none;
}

.pc{
	display:block !important;
}

section{
	width:960px;
}

/*MENU*/
#menubtn{
	display:none;
}

#menu{
    display:block !important;
}

.menu ul{
    margin:15px 0 0 0;
    padding:0;
    list-style:none;
}

.menu li a{
    display:block;
    padding:10px 15px;
    color:#ffffff;
	background-color:#ce1125;
    font-size:14px;
    text-decoration:none;
}

.menu li a:hover{
    background-color:#524e3c;
}

.menu ul:after{
    content:"";
    display:block;
    clear:both;
}

.menu li{
	margin-left:5px;
    float:left;
    width:auto;
}

.boxA:after{
    content:"";
    display:block;
    clear:both;
}

.box1{
    float:left;
    width:auto;
}

.box2{
    float:right;
    width:auto;
}

/*info*/
article.info{
	width:500px;
}

.information section{
	width:540px;
}

.info img{
	width:500px;
	height:auto;
}

/*event*/
div.flyer_image{
	width:500px;
	height:auto;
}

div.flyer_image img{
}

.corona ul {
	width: 70%;
}

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden{
    display:none !important;
    visibility:hidden;
}

.visuallyhidden{
    border:0;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{
    clip:auto;
    height:auto;
    margin:0;
    overflow:visible;
    position:static;
    width:auto;
}

.invisible{
    visibility:hidden;
}

/*================ clearfix ==================*/
.clearfix:before,
.clearfix:after{
    content:" ";
    display:table;
}

.clearfix:after{
    clear:both;
}

.clearfix{
    *zoom: 1;
}