@charset "utf-8";
/* CSS Document */
/* 
日本劇作家協会東北支部「３．１１ ～震災戯曲でふり返る１０年～」特設サイト用CSS
https://shinsai-engeki.com/shin10year/
https://shin10year.shinsai-engeki.com/
2021/2/11公開、4/11主更新終了
 */


html {
	margin: 0px;
	padding:0px;
	font-size:17px;
	font-size:1em;
	line-height: 1.7em;
	}

body {
	margin: 0;
	padding:0px;
	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",sans-serif;
	text-size-adjust: 100%;
	font-size:17px;
	font-size:1em;
	line-height: 1.7em;
	line-break:normal;
	word-wrap:break-word;
	}
header,footer {
	margin: 0px;
	padding:0px;
	}

section,article,ul,li{font-size:1em;}
p{clear:both;margin:0;}
/* ------------------------------------------------------------- */
/*          ナビ（メニュー）関連 */
/* ------------------------------------------------------------- */


/* ヘッダとh1 */
.s10-header{
	background-color: #f8f8f8;
	background-image: url("./img/b1.jpg");
	background-position:top center;
	background-repeat: no-repeat
	background-size:cover;
}
.s10-top-h1{
	display:inline-block;
	position:relative;
	top:-0.5em;
	width:100%;
	text-align:center;
	margin:0 auto 3rem;
	padding:0;
	font-size:5vw;
	font-family:serif;
	color:white;
	text-shadow:0 0 6px black;
	}


/* ナビ要素全体のコンテナ */
.s10-nav{
	display: block;
	z-index:10;
	position: static;
	top: 0em; /* 上端から0em;のところで固定 */
	position: relative;
	width:100%;
	margin:0;
} 

/* ナビのリストの子リスト */
.s10-nav-parent1{}
.s10-nav-child1{}

/* 状態検知用の見せないinput要素 */
#s10-nav-input{} 

/* 閉じているときに開く、開いているときに閉める、入力検知用の見せない部分 */
.s10-nav-unshown{display:none;}

/* ハンバーガーアイコンのコンテナ */
.s10-nav-open{
	display: inline-block;
	width: 5em;
	height: 4em;
	text-align:center;}
/* ハンバーガーアイコン */
.s10-nav-open span{
	z-index:10;
	position: relative;
	top: 0.8em;
	right:0.8em;
	position: absolute;
	display: block;
	width: 5em;
	padding-top: 2.5em;
	font-size:0.5em;
	color:white;
	text-shadow:0 0 6px black;

	background-image: url("./img/s10-menu-lines-white.svg");
	background-size:4em;
	background-position:top center;
	background-repeat: no-repeat
}
.s10-nav-close{
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0px;/*全体に広がるように*/
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
	}

.s10-nav-list{
	overflow: auto;
	position: fixed;
	top: -0px;
	left: -105%;
	z-index: 9999;/*最前面に*/
	width: 70%;/*右側に隙間を作る（閉じるカバーを表示）*/
	height: 100%;
	padding:0 0 0 8px;
	margin:0;
	background: rgba(245,245,245,0.8);
	transition: 0.3s ease-in-out;
	}

/*inputにチェックが入ったらlistを表示*/
#s10-nav-input:checked ~ .s10-nav-close {
	display: block;
	opacity: 0.5;
	}

#s10-nav-input:checked ~ .s10-nav-list {
	left: 0;
	box-shadow: 6px 0 25px rgba(0,0,0,0.15);
	}

/*ナビのlistの個々の要素*/
.s10-nav-content{
	display: block;
	width: 100%;
	text-align: left;
	margin:0;padding:0;
	}

/* ナビのlistの個々の要素の中のa */
.s10-nav-link{
	display: block;
	width: 80%;
	height:100%;
	padding:0.8em 0.5em;
	margin:2px;
	text-decoration:none;
	background-color: rgba(245,245,245,0.8);
	border-left:#349 solid 3px;
	}
.s10-nav-link-inner{width: 82%;}


/* ------------------------------------------------------------- */
/*          ナビより下のセクション */
/* ------------------------------------------------------------- */

/* セクションとh2,3 */
.s10-section{margin:2em 8px 0 4%;clear:both;}
.s10-top-h2{border-left:#349 solid 6px;border-bottom:#999 solid 1px;padding:8px 0 8px 18px;font-size:120%;}
.s10-top-h3{}
.s10-h2{border-left:#349 solid 6px;border-bottom:#999 solid 1px;padding:8px 0 8px 18px;font-size:120%;}
/*.s10-h2{border-left:#349 solid 6px;border-bottom:#999 solid 1px;padding:8px 0 8px 18px;font-size:120%;margin:42px auto;width:94%;line-height:28px;}*/
.s10-h3{border-left:#349 solid 2px;padding:8px 0 8px 18px;font-size:100%;}

.s10-article{}

/* 目立ちたくはないけれど必要な注意書き。灰文字右寄せ */
.s10-neutralattention{color:gray;text-align:right;}

/* 傍点とルビの整形 */
.s10-dotted{
text-emphasis: filled black;
-webkit-text-emphasis: filled black;
}
ruby{}
rt{font-size:0.7em;}

/* 引用を整形 */
blockquote {
    position: relative;
    margin-right:10px;
    padding: 4px 15px 20px 20px;
    box-sizing: border-box;
    font-style: normal;
	border:gray solid 1px;
    border-left: 4px solid #349;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	line-height:2.5em;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 3px;
    content: "“";
    font-family: serif;
    color: #349;
    font-size: 40px;
    line-height: 0.5;
}
blockquote cite {
    font-style: normal;
    display: block;
    text-align: right;
}

.s10-statement{}


/* 作品情報ボックス関連 */
.s10-work-section-container{width:100%;}
a.s10-work-container-link:visited{color:black;text-decoration:none;}
a.s10-work-container-link{color:black;text-decoration:none;}
.s10-work-container{
	display:block;
	float:left;
	width:94%;
	max-width:400px;
	min-width:300px;
	border:gray solid 1px;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	margin:12px 3% 12px 3%;
	border-radius:8px;
	text-align:left;
}
.s10-work-area{background-color:#349;color:white;font-size:120%;;padding:8px 0 2px 8px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	}
.s10-work-title{text-decoration:none;font-weight:normal;font-size:1.2rem;min-height:4.5rem;margin:18px 0 0 6px;line-height:1.4rem;}
.s10-work-auther{margin-left:1em;font-size:80%;}

.s10-work-thumbnail-container{width:100%;text-align:center;max-width:400px;}
.s10-work-thumbnail{width:100%;margin:0 auto 0;}
.s10-work-descripton{padding-left:2%;padding-top:0.5rem;min-height:3.8rem;margin-bottom:8px;}

.s10-work-h1{margin:22px 1%;width:97%;}
.s10-work-auther-h1{font-size:60%;margin:12px 0 0 1rem;}
.s10-work-first-h1{font-size:60%;margin:12px 0 0 1rem;font-weight:normal;}
.s10-movie{display:block;
	float:left;
	width:95%;
	max-width:400px;
	min-width:300px;
	border:gray solid 1px;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	margin:12px 1% 12px 3%;
	border-radius:0 0 8px 8px;
	text-align:left;
}
.s10-img{width:95%;max-width:640px;}
.s10-movie-work{text-align:center;}
.s10-movie-link{font-size:120%;}/* 主要動画へのリンク */



/* Twitter貼り付け */
.s10-twitter-s10{
	display:block;
	float:left;
	width:94%;
	max-width:400px;
	min-width:300px;
	height:600px;
	overflow-y:scroll;
	border:gray solid 1px;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	margin:12px 3% 12px 3%;
	border-radius:8px;
	text-align:left;
}




/* フッター関連 */
.s10-totopcontainer{}
.s10-totop{float:right;display:block;margin-right:2%;margin-top:16px;
}
.s10-totopkoukou{float:right;display:block;margin-right:2%;margin-top:16px;
}

.s10-footer{
	font-size:0.9em;
	background-color: #f2f2f2;
	padding:12px 4%;
	}



/* ------------------------------------------------------------- */
/*          4/11以降付け足し用 */
/* ------------------------------------------------------------- */


.s10-end-small{font-size:4em;position:relative;top:120px;left:auto;color:white;text-shadow:0 0 3px black;}
.s10-end-big{font-size:4em;position:relative;top:-120px;left:auto;color:white;text-shadow:0 0 3px black;}

/* ------------------------------------------------------------- */
/*          タブレット程度の幅の端末用 */
/* ------------------------------------------------------------- */

@media (min-width: 768px) {
html {font-size:18px;}
body {font-size:18px;}
.s10-work-container{max-width:300px;}
}

.s10-work-h1{margin:22px 5%;width:89%;}

/* ------------------------------------------------------------- */
/*          PC程度の幅の端末用 */
/* ------------------------------------------------------------- */

@media (min-width:1024px) {
html {font-size:16px;}
body {font-size:16px;}

.s10-nav{
	position: static;
	margin-bottom:4em;
	
	}
.s10-nav-open span{display:none;}
.s10-nav-list{
	width: 99%;
	top:0px;
	height:auto;
	position: static;
	background-color: transparent; 
	margin-top:1em;
	padding-bottom:1em;
	}

.s10-nav-open span {
	width: 0;
	padding-top: 0;
	height:10px;
	}

.s10-nav-open{
	width: 0;
	padding: 0;
	height:10px;
	}
.s10-top-h1{
	top:2em;
	font-size:160%;}
.s10-nav-content{
	}
.s10-nav-link{
	display:inherit;
	display: block;
	width:10%;
	margin:0.5%;
	max-width:400px;
	float:left;
	text-align: center;
	padding-top:1em;
	background-color: rgba(255,255,255,0.8);
	border:#349 solid 1px;
	border-left:#349 solid 6px;
	border-radius:4px;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	}
.s10-nav-link-top{width:8%;min-width:110px;max-width:220px;}
.s10-nav-link-g{width:18%;min-width:320px;}
.s10-nav-link-kk{width:10%;min-width:110px;max-width:180px;}
.s10-nav-link-f{min-width:160px;}
.s10-nav-link-k{min-width:200px;}
.s10-nav-link-s{min-width:160px;}
li.s10-nav-link-inner{
	display:none;
	max-width:200px;
	font-size:0.9em;
	margin-left:0;
	text-align:left;
	}
a.s10-nav-link-inner{
	margin-left:0;
	padding-left:0;
	}

a.s10-nav-link-inner:before{content:"：";}

.s10-nav-child1{}




.s10-work-container{max-width:400px;}
.s10-movie-work-single{max-width:640px;}
.s10-movie-work-double{}

}