@charset "utf-8";

body{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Meiryo, sans-serif;
}

img {
vertical-align:top;
}

p{
margin:0;
padding:0;
}

/* youtube 埋め込み */
.youtube-video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube-video iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/* ヘッダー */

header{
background-image: url(img/top_bg.png);
}


header p{
margin: 0;
padding: 0;
text-align: center;
}

header p img{
width: 100%;
max-width:960px;
}



/* レイアウト枠 */
.main {
width: 100%;
background-color: #f2ebeb;
background-image: url("img/main_bg.png");
}


/*本編*/

section h2{
margin: 0 auto;
padding: .5rem 0;
text-align: center;
color:#fff;
background:#e1649f;
font-size:1.2em;
}

.container{
margin: 0 auto;
padding: 1rem 1.5rem;
box-sizing: border-box;
display:flex;
flex-wrap:wrap;
max-width:1240px;
}

.container p{
margin: 0 auto;
padding: 0;
text-align: center;
}

.container img{
width: 100%;
}

.inner {
margin:0 1% .8rem 1%;
padding: .8rem;
background: #fff;
height:auto;
box-sizing:border-box;
border-radius: 10px;
width:100%;
}

.inner p span{font-size:.8em;}


.inner h3{
margin:0;
padding: .3rem;
color:#fff;
text-align: center;
background: #ad9221;
font-size:1.05em;
}
.inner h4{
margin:0;
padding: .8rem 0 .3rem 0;
color:#884360;
text-align: center;
font-size:1em;
}

.drama-btn{
margin:1em auto 0 auto;
padding-bottom: .6rem;
text-align: center;
}

.drama-btn button{
padding:0;
border:none;
background: #fff;
font-size: .9rem;
}

.drama-btn button a{
margin:0 auto;
padding: .6rem 1rem;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #fff;
background: #dfbc65;
border-radius: 100vh;
}

.drama-btn button a:hover {
  background: #ff9583;
}


.dontege-info{
padding: .6rem 1rem;
text-align: center;
font-weight:700;}



@media print, screen and (min-width:769px) {
.inner {
display:flex;
flex-direction:column;
}
.flex2 .inner{width:calc(96%/2);}
.flex3 .inner{width:calc(94%/3);}
.flex4 .inner{width:calc(92%/4);}

.flexcenter{justify-content: center;}

section h2{font-size:1.4em;}
.inner h3{font-size:1.15em;}
.inner h4{font-size:1.15em;}
}





/* フェードイン用のCSS */

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -30px);
	transition: all 2s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 2s ease-out;
 }





/*問い合わせ*/
.toiawase{
margin: 0 auto;
padding: 2rem 0;
width: 100%;
text-align: center;

}
.toiawase p{padding: 0 1rem;}



/*footer*/
.footer{
margin: 0;
padding: 1rem 0;
text-align: center;
justify-content: center;
background: #000000;
}
.copyright{
padding: .2rem;
font-size: .75rem;
color:#ffffff;
}