@charset "UTF-8";

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;  background:transparent;}
ol, ul {list-style: none;}


body, html {text-align: center; font-family: 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;font-size: 62.5%;padding: 0;margin: 0;width:100%;background: #000;}
body{font-size:1.6rem;}
footer{width:100%;}
img{max-width:100%; margin: 0 auto}
p{font-size: 1.6rem; line-height: 1.8em; margin: 20px auto}
article{padding-bottom:50px;}
body{font-weight:200; font-size:1.6rem;line-height:1.6em;position: relative;left: 0;overflow-x: hidden; color: #fff}
/*a,*/
a:hover{text-decoration:none;}

a{color:#FFF}
article a,
article a:hover{color: #FFF;}
header{position: relative;background: rgb(0,0,0);}
h3{font-size:  2.2rem;font-weight: normal}
header ul.slide {position:relative;overflow:hidden;width:100%;/*padding-top:66.66%;*/padding-top:900px;}
header ul.slide li{position:absolute;top:0;left:0;width:100%;height:100%;}
header ul.slide li:first-child{background:linear-gradient(0deg, rgba(0,0,0,1) 8%, rgba(255,255,255,0) 40%), url("../img/top_bg01.jpg") no-repeat center right /cover}
header ul.slide li:nth-child(2){background:linear-gradient(0deg, rgba(0,0,0,1) 8%, rgba(255,255,255,0) 40%), url("../img/top_bg02.jpg") no-repeat center left /cover}
header ul.slide li:last-child{background:linear-gradient(0deg, rgba(0,0,0,1) 8%, rgba(255,255,255,0) 40%), url("../img/top_bg03.jpg") no-repeat center top/cover }
.h_m{position: absolute;top: 80px;width: 100%;max-width: 700px;display: flex;margin: 0 auto;left: 0;right: 0;align-items: flex-start;}
.h_m figure{width:60%;margin: 0 auto}

header .com{background: rgba(0,0,0,.5);text-align: center;height:50px;position: absolute;z-index: 9;width: 100%;display: flex;justify-content:center;align-items: center; }
header .com ul{display: none}



.book .btn,
button{background: #505050;color: #fff;max-width: 280px;width: 100%;border: 0; border-radius: 10px;height:60px; margin: 0 auto;font-size: 2.4rem;}
.book .btn:hover,
button:hover{cursor:pointer;background: #a8a8a8;}
.book .btn img{height: 22px; margin: 0 0 0 10px;}
.book .btn{margin: 20px auto 0; display: flex; align-items: center; justify-content: center;font-weight:400;}



.book{width: 100%;margin: 0 auto; order:1; }
.book a{display: block; text-decoration: none;}
.title {display: none;order:2; }

#book p,
.book p{font-size:1.2rem;line-height:1.3em;}
#book h3{font-size: 3rem; text-align: left ;color: #333}
#book p{text-align: left;color: #333}
#book h3 span{font-size: 1.8rem;display: block;margin: 10px auto;font-weight: 400}

h2{border-bottom:1px solid #fff;line-height:1.6em; font-size:2.8rem; font-weight:700;text-align: left; margin:0 auto 18px; }
section{width: 90%; max-width: 980px; text-align: left;margin: 50px auto}
#book{background: rgba(255,255,255,.8);padding:5%;margin: 5% auto; width: 80%;text-align: center;} 
#book img{max-width:200px;width: 100%;}


.event div,
.poster div{background: rgba(255,255,255,0.2);text-align: center;margin: 20px 0;padding:20px 10px}
.poster div button{background: #fff;border-radius: 13px; font-size: 14px;font-weight: bold;height:26px;width: 200px;color: #333;margin-bottom: 8px}
.poster div button span{font-size: 12px;font-weight: normal}
.poster h3{margin: 0 auto}
.poster figure{width: 283px;height:283px; margin: 20px auto; text-align: center;display: flex;align-items: center;}
p.attention{font-size:1.4rem;line-height: 1.2em }

.event div{text-align: left;padding:30px;height:180px;position:relative;}
.event div p{font-size: 1.4rem;}
.event div a{background: #000;border-radius: 10px;font-size: 1.6rem;font-weight: bold;height: 40px;width: 160px;color: #fff;text-decoration: none;position: absolute;display: flex;justify-content: center;align-items: center;bottom:30px;right:30px;}
.event div a:hover{background: rgba(255,255,255,.3)}
.event span{background: #fff;color: #000;font-size: 20px;padding:2px 8px;margin-right: 5px }
#info dd{ margin-bottom: 20px}

.past section{background: #fff;}
.past{background: url("../img/footer_bg.jpg") 0 0 ;padding:5%;}
.past section{background:rgba(255,255,255,.8);padding:5%;margin: 0 auto; max-width: 920px;color: #333}

.past section figure.title{text-align: left;}
.past section figure{text-align: center;}
.past section .book{width: 100%;max-width:800px;}
#book p.lead,
.past section .book .lead{font-size:1.6rem;line-height:1.8em;margin: 20px auto;}
footer{margin-top: 40px;}
footer .sns{height:50px;}
footer .sns img{margin: 10px;max-width: 40px;}
.copyright{font-size: 1.2rem; margin-bottom: 20px;color: #333}

.sign{position: absolute;bottom:0; margin: 0 auto; left: 0; right:0}
.sign img{max-width: 400px;width: 90%;}
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

section.txt{position: relative}
.more{display: none;}
p.more_btn { position: relative; height: 30px; width:160px; margin: 40px auto; display: block; border-radius: 30px; background-color:#fff; color: #000;text-align: center;border: none;}
p.more_btn::before{content: "▼続きを読む";}
p.more_btn.o_c::before{content: "▲閉じる";}
p.more_btn:hover{cursor: pointer}
#review section p.author{font-size: 2.0rem; font-weight: bold;margin-bottom: 0}
.author span{font-size: 1.4rem; font-weight: bold;}
#review h3{font-weight: bold; margin-bottom: 20px}
#review section{border-bottom:1px dotted #333;}
#review section p{margin: 0 auto 20px;}

@media screen and (min-width:300px) and ( max-width:410px) { 
.event div{height:250px;}
}

@media screen and (min-width:480px) {
.book{top: 110px;}
header ul.slide {padding-top:1150px;}
.sign img{max-width: 450px;width: 100%;}

}


@media screen and (min-width:640px) {

header ul.slide li:first-child{background:linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(255,255,255,0) 40%), url("../img/top_bg01.jpg") no-repeat 0 0 /cover}
header ul.slide li:nth-child(2){background:linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(255,255,255,0) 40%), url("../img/top_bg02.jpg") no-repeat 0 0 /cover}
header ul.slide li:last-child{background:linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(255,255,255,0) 40%), url("../img/top_bg03.jpg") no-repeat center center /cover }

header .com{display: flex;justify-content:space-between;align-items: center;padding:0 20px;}
header .com ul{width: 200px;display: block}
header .com li{display: inline-block;}
header .com li img{width: 35px; height:35px;margin:0 5px}

section{margin: 50px auto 80px}

header{height:inherit}
.h_m{width: 80%;}
.h_m figure { width: 100%;  margin: 0 auto;}
.book{width: 250px;margin: 50px 0 0 0}
.title { display: block;text-align: center}
#book{padding:30px;margin: 0 auto; max-width: 920px; text-align: center;} 
#book{display: flex;flex-wrap:wrap}
#book figure,
.past section figure{width:28%;}
#book .book{max-width: 680px;width: 70%;margin: 0 0 20px auto; display:flex; flex-wrap: wrap}
#book .book h3,
#book .book p{width:100%;}
.past section{padding:30px;display: flex;flex-wrap:wrap }
.past section figure{width:28%;}
.past section figure.title {  text-align: left; order: inherit; width: 100%;margin-bottom:20px;}
.past section .book{max-width: 680px;width: 70%;margin: 0 0 20px auto;display: flex;order: inherit;flex-wrap: wrap;}
.past section .book h3{width:100%;margin-bottom: 10px;font-size: 2.2rem}
.past section .book h4{width:100%;font-weight: 400;}
.past section .book .lead{margin: 10px auto 20px;}
#book .book p,
.past section .book p{margin: 0 0 20px 0}
#book button,
.past section button{margin: 0 0 0 auto}
h2{border-bottom:none;display: flex;align-items: center;}
h2:after {content: "";flex-grow: 1;	height: 1px;background: #aaa;display: block;}

.sign img{max-width: 500px;width: 100%;}


}


@media screen and (min-width:780px) {
div.event,
div.poster{display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0}

.event div{width: 40%;margin: 0;height:220px;}
.poster div{width: 30%;margin: 0;display: flex;flex-wrap: wrap;justify-content: space-between;}

#info dt,
#info dd{display: inline-block;margin-botom:30px;}
#info dt{width:10%;margin-right:4%;vertical-align: top}
#info dd{width:86%}
}

@media screen and (min-width:1000px) {
.h_m{width: 700px}
.title {  right:0;left:0; text-align: center}
.event div{height:180px;}
}

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

header ul.slide {padding-top:1100px;}
header ul.slide li:first-child{background:linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(255,255,255,0) 40%), url("../img/top_bg01.jpg") no-repeat 0 0 /cover}
header ul.slide li:nth-child(2){background:linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(255,255,255,0) 40%), url("../img/top_bg02.jpg") no-repeat 0 0 /cover}
header ul.slide li:last-child{background:linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(255,255,255,0) 40%), url("../img/top_bg03.jpg") no-repeat center center /cover }
}