@charset "utf-8";
body{
	margin:0;
	padding:0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:#519696;
}
body, a{
	color:#515151;
	text-decoration:none;
}
main {
	background-color:#519696;
	padding:0;
}
h1{
	font-size:1.8rem;
	letter-spacing:0.2rem;
	margin:0;
	padding:2.5rem 0 2.5rem 1.5rem;
	//padding:2.5rem 0;
	color:#ffffff;
	line-height:1.8rem;
}
h2{
	font-size:1.5rem;
	letter-spacing:0.5rem;
	background-color:#519696;
	color:#ffffff;
	padding:3rem 2rem;
	margin:0;
}
h3{
	font-size:1.2rem;
	letter-spacing:0.5rem;
	text-align:center;
	background-color:#729494;
	color:#ffffff;
	padding:1.5rem;
	margin:0;
}
h4{
	font-size:1rem;
	letters-spacing:0.5rem;
	padding:0.5rem 0.5rem 0.5rem 0;
}
a:hover{
	opacity:0.6;
}
h1 a{
	opacity:1;
	color:#ffffff;
}
h1 a:hover{
	opacity:1;
}
h1 .h1small-type{
	font-size:1rem;
	vertical-align:middle;
}
dl{
	margin:0;
	padding:0;
}
ul{
	margin:0;
	padding:0;
	list-style:none;
}
ol{
}
table{
	margin:auto 0;
	border-collapse:collapse;
}
table, th, td{
	padding:10px;
}
th{
	width:30%;
	text-align:left;
}
td{
	width:80%;
}
dl{
	width:100%;
	margin:auto;
}
dt,dd{
	display:flex;
	text-align:left;
	padding:10px 0;
	lein-height:120%;
}
dt{
	width:20%;
}
dd{
	width:80%;
}

button {
    position: relative;
    background-color: #519696;
    color: white;
    padding: 15px 32px;
    text-align: center; 
    text-decoration: none; /* 文字装飾 */
    display: inline-block; /* ボタンの表示方法 */
    font-size: 1rem; /* フォントサイズ */
    font-family: Arial, sans-serif; /* フォント */
	//width:50%;
    margin: auto; 
    cursor: pointer; /* カーソル */
    border: none; /* ボーダーなし */
    border-radius: 5px; /* ボーダーの角丸 */
}

button:hover {
	opacity:0.8;
}

button::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    margin-top: -5px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    transform: rotate(-90deg);
}


/*adjust ports*/
.contentWrapper{
	width:70%;
	margin:0 auto;
	padding:2rem 0;
}
.clearfix::after{
	display:block;
	content:"";
	clear:both;
}
.phone{
	display:none;
}
.pc{
	display:black;
}
.button{
	text-align:center;
}
.pdf{
	margin-top:1em;
}
.pdf a::before{
	content:'';
	display:inline-block;
	width:40px;
	height:45px;
	content:url(../imgs/pdf.png);
	backgroud-size:contain;
	vertical-align:middle;
}
.blank{
	margin-top:1em;
}
.blank a::after{
	content:'';
	display:inline-block;
	width:30px;
	height:30px;
	content:url(../imgs/blank.png);
	backgroud-size:contain;
	vertical-align:middle;
}

/*header*/
header{
	width:100%;
	height:180px;
	background-color:#519696;
	position:fixed;
	top:0;
	left:0;
	z-index:200;
	padding:10px 0;
}
header.act {
	box-shadow: 0 0 10px rgba(0,0,0,0.4);   
}
header nav{
	width:100%;
	margin:0 auto;
	padding:0;
	background-color:#519696;
}
header nav ul{
	display:flex;
	margin:0 auto;
	justify-content:space-around;
}
header nav li{
	padding: 0 15px;
}
header nav a{
	color:#ffffff;
	font-size:0.8rem;
	font-weight:bold;
}
header .logo{
	float:left;
	padding:0.5rem 1rem 0.5rem 1rem;
}
header .langage{
	float:right;
	color:#330;
	padding:1em;
	font-size:0.8rem;
	font-weight:bold;
}
header .langage a{
	color:#ffffff;
}
/*workshop*/
#workshop{
	position:relative;
	padding-top:180px;
	background-color:#ffffff;
}
#workshop p{
	margin:0;
	padding:0;
}
.parallax{
    min-height:400px;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover; 
}
.content {
    padding: 60px 0;
}
.parallax.bg-01 {
    background-image:url(../imgs/kamihikouki.jpg);
}
.parallax.bg-02 {
    background-image:url(../imgs/waribashikousaku.jpg);
}
.parallax.bg-03 {
    background-image:url(../imgs/kamishibai.jpg);
}
.parallax.bg-04 {
    background-image:url(../imgs/pop-up-open.jpg);
}
.parallax.bg-05 {
    background-image:url(../imgs/frottage.jpg);
}
.parallax.bg-06 {
    background-image:url(../imgs/nurie.jpg);
}
.parallax.bg-07 {
    background-image:url(../imgs/oekaki.jpg);
}
.parallax.bg-08 {
    background-image:url(../imgs/karuta.jpg);
}
.parallax.bg-09 {
    background-image:url(../imgs/seal.jpg);
}
#workshop ul{
	margin-left:1rem;
}
#workshop li{
	line-height:160%;
}
#workshop li::before{
	content:"-";
}

/*etc*/
#etc{
	position:relative;
	padding-top:180px;
	background-color:#ffffff;
}
#etc .container{
	float:left;
	padding:0;
	margin:0 auto;
	text-align: center;
}
#etc figure{
	text-align:center;
}
#etc figure img{
	margin:0 auto;
	border:#cccccc 1px solid;
}
#etc .manga img{
	width:90%;
}
#etc .kamishibai img{
	width:90%;
}
#etc ul{
	margin-left:1rem;
}
#etc li{
	line-height:160%;
}
#etc li::before{
	content:"-";
}
#etc .manga li{
	content:"";
}
#etc .karuta ul{
	margin:10px auto;
}
#etc .karuta li{
	line-height:100%;
}
#etc th{
	width:20%;
}
#etc td{
	width:80%;
}
/*info*/
#info{
	position:relative;
	padding-top:180px;
	background-color:#ffffff;
}
#info li::before{
	content:"※";
}
#info .access{
	position:relative;
	width:95%;
	padding:1rem;
	margin:0 auto;
	border:#333333 solid 1px;
	overflow:hidden;
}
#info .map{
	width:50%;
	float:left;
	margin:0 1rem 0 0;
	padding:0;
}
#info .pdf a::before{
	content:'';
	display:inline-block;
	width:40px;
	height:40px;
	content:url(../imgs/pdf.png);
	backgroud-size:contain;
	vertical-align:middle;
}
/*policy*/
#policy{
	position:relative;
	padding-top:180px;
	background-color:#ffffff;
}
/*footer*/
footer{
	background-color:#519696;
	color:#cccccc;
	padding-top:1rem;
}
footer p{
	text-align:center;
	padding-top:1rem;
}
footer a{
	color:#cccccc;
}
footer .logo{
	float:left;
}
footer .address{
	text-align:left;
}
footer .logo-address{
	width:300px;
	margin:0 auto;
}
small{
	color:#ffffff;
	font-weight:bold;
	padding:20px;
	display:block;
	text-align:center;
}
.backtop{
	width:8rem;
	text-align:center;
	font-weight:bold;
	position:absolute;
	right:0rem;
	bottom:-0.5rem;
	padding:0 0.2rem;
}
.backtop_b{
	width:8rem;
	text-align:center;
	font-weight:bold;
	position:absolute;
	right:0rem;
	bottom:-180px;
	padding:0 0.2rem;
	z-index:100;
}
@media screen and (max-width:480px){
h1 {
	font-size: 1rem;
	padding:1rem 0 1rem 1rem;
	//padding:1rem 0;
}
h1 .h1small-type{
	font-size:0.8rem;
}
h2 {
	font-size: 1rem;
}
h3{
	font-size: 1rem;
	text-align:left;
}
h4{
	font-size: 1rem;
}
figcaption{
	font-size:0.8rem;
}
table, th, td{
	padding:5px;
	font-size:0.9rem;
}
th{
	width:30%;
}
td{
	width:60%
}
small{
	font-size:0.8rem;
}
.contentWrapper{
	width:90%;
}
.phone{
	display:block;
}
.pc{
	display:none;
}
header .logo{
	padding:0rem 0.5rem 0rem 0.5rem;
}
header .langage{
	position:fixed;
	top:0;
	right:0;
	z-index:100;
	text-align:right;
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
}
/*trigger*/
header nav{
	background: rgba(255,255,255,0.85);
	position: fixed;
	z-index: 1;
	display: none;
	width: 100%;
	top: 63px;
}
header nav ul{
	display: block;
	padding: 20px 0 12rem 0;
}
header nav li{
	font-size: 0.85rem;
	padding: 10px;
	color: #606060;
	border-bottom: 1px solid rgba(118,123,133,0.3);
	text-align: center;
}
header nav a{
	color: #333;
	font-weight: normal;
	text-shadow: none;
}
header nav a:hover{
	color: #1861ae!important;
}
#menuWrapper{
	width: 100%;
	background-color: #519696;
	padding: 15px 15px 10px 15px;
	box-sizing: border-box;
	position: fixed;
	z-index: 1;
}
.trigger_top{
	padding-top: 4rem;
	margin: 0 auto;
	color:#000000;
}
.trigger,.trigger span{
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.trigger{
	position: relative;
	width: 35px;
	height: 30px;
}
.trigger span{
	position: absolute;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #ffffff;
	border-radius: 4px;
	opacity: 1;
}
.trigger a:hover{
	opacity: 1;
}
.trigger span:nth-of-type(1){
	top: 0;
}
.trigger span:nth-of-type(2){
	top: 12px;
}
.trigger span:nth-of-type(3){
	bottom: 0;
}
.trigger.active span:nth-of-type(1){
	transform: translateY(10px) rotate(-45deg);
}
.trigger.active span:nth-of-type(2){
	left: 50%;
	opacity: 0;
	animation: active-menu-bar02 .8s forwards;
}
.trigger.active span:nth-of-type(3){
 	transform: translateY(-15px) rotate(45deg);
    }
.onanimation{
	display: block;
}
/*workshop*/
.parallax{
    min-height:300px;
}
.parallax.bg-01 {
	background-position:top 50px left;
}
.parallax.bg-02 {
	background-position:top 50px left;
}
.parallax.bg-04 {
	background-position:top 30px left;
}
.parallax.bg-07 {
	background-position:top 30px left;
}
/*etc*/
#etc .container{
	float: none;
	text-align: center;
}
#etc figure{
	text-align:center;
}
#etc .manga img{
	width:100%;
}
#etc .kamishibai img{
	width:100%;
}
#etc .karuta button{
	width:100%;
}

/*info*/
#info .access{
	width:90%;
	margin:0 auto;
}
#info .map{
	width:90%;
	float:none;
	margin:0 auto;
}
/*ticket*/
#ticket input[type="submit"]{
	width: 70%;
	border: #000000 2px solid;
}
/*event*/
/*shop*/
/*policy*/
/*footer*/
}