/*
Theme Name:砂川見聞録
Theme URI:https://sunakawa.studiomessay.space/
Description: 「砂川見聞録」用のテーマ
Version:1.0
Author:爲貝
Author URI:https://inmetheus.jp/
*/
@font-face {
  font-family: 'Source Han Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url('css/fonts/SourceHanSerifJP-Regular.woff') format('woff');
}

*{
	color:black;
	margin:0;
	padding:0;
	list-style: none;
	text-decoration: none;
	box-sizing: border-box;
	position:relative;
	font-family:'Source Han Serif Japanese', 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	line-height:1.7em;
}

rt{
	font-family:'ヒラギノ角ゴシック','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';	
	font-size:0.5rem;
}

rt {
	margin-bottom:.2em;
	transform: translateY(.2em);
}

h1,h2,h3{
	font-weight:900;
}

h1{
	font-size:calc(1rem + 20px);
}
h2{
	font-size:calc(1rem + 14px);
}
h3{
	font-size:calc(1rem + 8px);
}

@media(min-width:1001px){
	html{
		font-size:24px;
	}
}
@media(max-width:1000px){
	html{
		font-size:18px;
	}
}
@media(max-width:600px){
html{
	font-size:14px;	
}
.contentText2 .text p{
	font-size:calc(1rem + 1px);
}
h1{
	font-size:calc(1rem + 15px);
}
h2{
	font-size:calc(1rem + 10px);
}
h3{
	font-size:calc(1rem + 5px);
}	
}
@media(max-width:420px){
h1{
	font-size:calc(1rem + 10px);
}
h2{
	font-size:calc(1rem + 7px);
}
h3{
	font-size:calc(1rem + 3px);
}
}


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

body{
	width:100%;
/*	background-color:rgba(0,0,0,1.0);
*/}

.wrapper{
	width:100%;
}

.inner{
	max-width:1000px;
	margin:0 auto;
}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ヘッダー、フッター
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

header, footer{
	background-color:black;
}

#headerIconBlock a, #footerIconBlock a{
	display: block;
	height:70px;
	width:100%;
	text-align:center;
	overflow: visible;
}

#headerIconBlock img, #footerIconBlock img{
	max-width:100%;
	height:70px;
}

footer.wrapper div.inner{
	padding-top:10px;
	text-align:center;
}

footer small{
	color:white;

}

footer #footerRelateBanner{
	padding:20px;
	text-align:center;
}

 #footerRelateBanner li{
	float:left;
	max-width:120px;
	overflow:visible;
 }
 
 #footerRelateBanner li img{
	max-width:100%;
	height:auto;
 }

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
フロントのフロント、ニュース、簡易リンク
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

#wrapperFront{
	background-color:black;
}


div#wrapperFront h1{
	text-align:center;
	width:100%;
	overflow:visible;
}

div#wrapperFront h1 img{
	max-width:100%;
	height:auto;
}

div#wrapperFront .inner{
	position:relative;
}

div#frontRight{
	text-align:center;
	padding:30px 0;
}

section#frontNewsBlock{
	display: inline-block;
	vertical-align: top;
	background-color:rgba(255,255,255,0.8);
	width:40%;
	min-width:265px;
	padding:25px;
}

section#frontNewsBlock h2{
	text-align:center;
}

section#frontNewsBlock li{
	border-bottom:1px solid rgba(0,0,0,0.3);
	text-align:left; 
}

section#frontNewsBlock li:last-child{
	border-bottom:none;
}

div#frontLinkBlock{
	display: inline-block;
	vertical-align: top;
	background-color:rgba(255,255,255,0.8);
	width:40%;
	min-width:265px;
	text-align:center;
	padding:20px 0;
}

div#frontRight > section#frontNewsBlock,
div#frontRight > div#frontLinkBlock{
	margin:0 25px;	

}

div#frontLinkBlock ul{
	text-align:center;
}

div#frontLinkBlock li{
	display:inline-block;
	width:40%;
	margin:10px auto;
}

div#frontLinkBlock li a{
	display:block;
	width:100%;
	overflow:visible;
	border-radius:100px;
}

div#frontLinkBlock li img{
	display:block;
	max-width:100%;
	height:auto;
	border-radius:100px;
}

.glow{
  -webkit-box-shadow: 0 0 25px 0 white; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 white; /* Firefox用 */
  box-shadow: 0 0 25px 0 white; /* CSS3 */
}

section#wrapperLink{
	background-color:rgba(255,255,255,1.0);
  -webkit-box-shadow: 0 0 25px 0 white; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 white; /* Firefox用 */
  box-shadow: 0 0 25px 0 white; /* CSS3 */

}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
あらすじ、紫上会、特長、リンク
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/


section#wrapperStory{
	background-color:rgba(255,255,255,1.0);
  -webkit-box-shadow: 0 0 25px 0 white; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 white; /* Firefox用 */
  box-shadow: 0 0 25px 0 white; /* CSS3 */
}

section#wrapperStory .inner{
	position:relative;
  padding:10px;
}

section#wrapperStory h2{
	text-align:center;
}

section#wrapperStory div.storyBlock{
	padding:10px;
	text-shadow:
	2px 2px 8px rgba(0,0,0,0.1),
	2px 0 8px rgba(0,0,0,0.1),
	-2px 0 8px rgba(0,0,0,0.1),
	-2px 0 8px rgba(0,0,0,0.1);
}

div#storyBG{
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	opacity:0.3;
}

div#storyBG img{
	display:block;
	width:70%;
	height:auto;
	padding:35% 15%;
	vertical-align: middle;
	margin:0 auto;
}

@media(max-width:600px){
	div#storyBG img{
		width:90%;
		padding:40% 15%;
	}	
}

@media(max-width:450px){
	div#storyBG img{
		width:90%;
		padding:60% 15%;
	}	
}

@media(max-width:370px){
	div#storyBG img{
		width:90%;
		padding:90% 15%;
	}	
}

section#wrapperCharacter{
	background-color:black;
	width:100%;
	overflow:visible;
}

section#wrapperCharacter img{
	max-width:100%;
	height:auto;
}

section#wrapperFeature{
	background-color:rgba(255,255,255,1.0);
  -webkit-box-shadow: 0 0 25px 0 white; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 white; /* Firefox用 */
  box-shadow: 0 0 25px 0 white; /* CSS3 */
  padding:15px;
  padding-bottom:45px;
}

section#wrapperFeature h2, section#wrapperLink2 h2, section#wrapperInfo h2{
	text-align:center;
	margin-bottom:25px;
}

section#wrapperLink2{
	background-color:rgba(255,255,255,1.0);
	padding:15px;
}

section#wrapperLink2 li{
	padding:15px;
}

section.linkBlock h3{
	width:35%;
	float:left;
	margin-right:3%;
}

section.linkBlock div{
	width:62%;
	float:right;
}

section.linkBlock h3 a{
	width:100%;
	overflow:visible;
}

section.linkBlock h3 img{
	max-width: 100%;
	height:auto;
}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
劇中句、作品情報
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

section#wrapperSlogan div#fixedBG,section#wrapperSlogan div#fixedBG2{
	position:relative;
}


section#wrapperSlogan div#fixedBG::after{
	background:url("img/立ち絵封水3.png");
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
   z-index: -2;
}

section#wrapperSlogan div#fixedBG2 div#vText{
	position:fixed;
	z-index:-1;
	width:100%;
	top:40%;
	text-align:center;
}

section#wrapperSlogan div#fixedBG2 div#vText p{
	color:red;
	text-shadow:
	2px 2px 8px rgba(215,21,126,0.6),
	2px 0 8px rgba(215,21,126,0.6),
	-2px 0 8px rgba(215,21,126,0.6),
	-2px 0 8px rgba(215,21,126,0.6);
}

div.tear{
	width:100%;
	overflow:visible;
}

div.tear img{
	max-width:100%;
	height:auto;
	vertical-align: middle;
	line-height:0;
}

section#wrapperSlogan{
	height:100vh;
}

section#wrapperInfo{
	position:relative;
}

section#wrapperInfo{
	background-color:rgba(255,255,255,1.0);
}

div#iconInfo{
	background:url("infoBG.png");
	background-repeat:round;
}

div#whiteInfo{
	width:100%;
	background-color:rgba(255,255,255,0.3);
	position:relative;
}

section#wrapperInfo #infoLeft{
	float:left;
	width:35%;
	margin-right:3%;
	margin-left:2%;
	overflow:visible;
}

section#wrapperInfo #infoLeft img{
	max-width: 100%;
	height:auto;
}

section#wrapperInfo #infoRight{
	float:right;
	width:60%;
}

section#wrapperInfo #infoRight table{
	border-collapse: collapse;
}

section#wrapperInfo #infoRight td{
	border-bottom:1px solid rgba(0,0,0,0.7);
	padding:40px 0;
	vertical-align: middle;
}

section#wrapperInfo #infoRight tr:last-child td{
	border-bottom:none;
}

section#wrapperInfo #infoRight td:nth-child(odd){
	width:45%;
	text-align:center;
}

section#wrapperInfo #infoRight td:nth-child(odd) p{
	display:inline-block;
	width:100px;
	text-align:center;
	border:1px solid black;
	border-radius:20px;
	overflow:hidden;
	padding:5px;
	box-shadow:0 0 3px 0 rgba(0,0,0,0.7);
}

section#wrapperInfo #infoRight td:nth-child(even){
	width:55%;
}

@media(max-width:600px){

section#wrapperInfo #infoLeft{
	width:100%;
	margin-right: 0;
	margin-left:0;
	padding:15%;
}
section#wrapperInfo #infoRight{
	float:right;
	width:100%;
}

section#wrapperInfo #infoRight td:nth-child(odd){
	width:48%;
	text-align:center;
}
section#wrapperInfo #infoRight td:nth-child(even){
	width:52%;
}

}

@media(max-width:400px){

section#wrapperInfo #infoRight td:nth-child(odd) p{
	width:80px;
}

}




/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
スクロールトップ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

#page-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 77%;
}
#page-top a {
    background-color: rgba(0,0,0,0.7);
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    transition:all 0.2s;
}
#page-top a:hover {
    text-decoration: none;
    color:black;
    background-color: rgba(255,255,255,0.3);
}

@media(max-width:599px){
  #page-top{
    left:0;
    font-size:60%;
  }

  #page-top a{
    padding:10px 0;
  }

}




/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
アコーディオンメニュー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/


.acd-check{
    display: none;
}
.acd-label{
    background-color: rgba(100,175,200,0.4);
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    cursor:pointer;
}
.acd-content{
    border: 1px solid #333;
    padding: 0 10px;
    transition: .5s;
    display:none;
}
.acd-check:checked + .acd-label + .acd-content{
    display:block;
    padding: 10px;
}

.acd-check:checked + .acd-label{
    background-color:rgba(230,0,0,0.6);
  -webkit-box-shadow: 0 0 25px 0 rgba(230,0,0,0.6); /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 rgba(230,0,0,0.6); /* Firefox用 */
  box-shadow: 0 0 25px 0 rgba(230,0,0,0.6); /* CSS3 */
}
.acd-content .sText2{
    overflow: visible;
    width:100%;
}
.acd-content img{
	padding:25px;
    max-width:100%;
    height:auto;
}


/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
物語ページ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/


body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
}



div#wrapperPankuzu{
	background-color:rgba(255,255,255,0.7);
}


div#wrapperPankuzu .inner{
	padding:5px;
}

div#wrapperPankuzu, div#wrapperPankuzu span{
	font-size:0.7rem;
	font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';		
}

article#storyFrame{
	background-color:black;
	padding-bottom:50px;
}

article#storyFrame .inner{
	background-color:white;
  -webkit-box-shadow: 0 0 25px 0 white; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 white; /* Firefox用 */
  box-shadow: 0 0 25px 0 white; /* CSS3 */
}

article#storyFrame div#wrapperMetaheading .inner,aside#wrapperPeriod .inner{
	padding:5px;
}

article#storyFrame div#wrapperMetaheading h1{
	font-size:calc(1rem + 15px);
	border-left:8px solid rgba(0,0,0,0.7);
	padding-left:5px;
}

article#storyFrame div#wrapperMetaheading ul li{
	text-align:right;
}

article#storyFrame div#wrapperMetaheading section#description{
	border:3px solid rgba(0,0,0,0.3);
	padding:3px 5px;
}

article#storyFrame div#wrapperMetaheading section#description div#arasuji{
	text-align:center;
}

article#storyFrame div#wrapperMetaheading section#description div#arasuji h2{
	display:inline-block;
	padding:3px;
	border-left:15px solid transparent;
	border-right:15px solid transparent;
	border-bottom:3px solid rgba(0,0,0,0.2);
	margin-bottom:10px;
}

article#storyFrame div#wrapperMetaheading section#description div#descriptionContent{
	padding:3px;
}

section#wrapperContent h2{
	background-color:black;
	color:white;
	text-align:center;
	padding:10px 0;
}

section#wrapperContent h2::before,section#wrapperContent h2::after{
	content:"↓↓";
}

section#wrapperContent .inner div#content{

}

section#wrapperContent .inner div#contentBG{
	background-image:url("https://sunakawa.messay.jp/wp-content/uploads/2020/07/sunakawaBG8png-1.png");
	background-repeat:repeat;
	background-size:70px;
}

section#wrapperContent .inner div#contentBGW{
	background-color:rgba(255,255,255,0.1);
	padding:30px 0 80px;
}

@media(max-width: 600px){
	section#wrapperContent .inner div#contentBGW{
		background-color:rgba(255,255,255,0.2);
		padding:30px 0 50px;
	}	
}

.contentText1{
	padding:20px 10px;
}


.contentText2{
	text-align:center;
	padding:50px 0;
}

.contentText2 .face{
	display:inline-block;
	width:20%;
	margin-right:3%;
	overflow:visible;
}

.contentText2 img{
	max-width:100%;
	height:auto;
}
.contentText2 .gray {
-webkit-filter: grayscale(80%);
-moz-filter: grayscale(80%);
-ms-filter: grayscale(80%);
-o-filter: grayscale(80%);
filter: grayscale(80%);
}

.contentText2 .text{
	display:inline-block;
	width:70%;
	vertical-align: top;
	border:2px solid rgba(0,0,0,0.7);
}

.contentText2 .text .speaker{
	border-bottom:1px solid rgba(0,0,0,0.4);
}
.contentText2 .text p{
	text-align:left;
	padding:5px 7px;
}

.imgLine{
	width:100%;
	text-align:center;
	overflow:visible;
	padding:4%;
}

.imgLine img{
	max-width:100%;
	height:auto;
	display:block;
	margin:0 auto;
}

.imgGray img {
-webkit-filter: grayscale(80%);
-moz-filter: grayscale(80%);
-ms-filter: grayscale(80%);
-o-filter: grayscale(80%);
filter: grayscale(80%);
}



.imgGray2 img {
-webkit-filter: grayscale(80%) blur(4px);
-moz-filter: grayscale(80%)  blur(4px);
-ms-filter: grayscale(80%) blur(4px);
-o-filter: grayscale(80%)  blur(4px);
filter: grayscale(80%) blur(4px);
}



.bigBig{
	font-size:1.7rem;
}

.big{
	font-size:1.3rem;
}

.small{
	font-size:0.7rem;
}



.redLine{
	color:red;
}

.boldLine{
	font-weight:750;
}


.space{
	min-width:200px;
	min-height:30vh;
	margin:5px 0;
}

.skip{
	text-align:center;
	font-size:2.0rem;
	padding:30px 0;
	font-weight: 8.0;
}
.modal-wrap dt{
	font-size:1.3rem;
}

.modal-text ruby, .modal-text rt{
	color:white;
}


@media(max-width:600px){
.contentText2 .face{
	width:25%;
	margin-right:1%;
}
.contentText2 .text{
	width:70%;
	border:1px solid rgba(0,0,0,0.7);
}
.contentText1{
	padding:10px 5px;
}
.contentText2{
	padding:20px 5px;
}
.contentText2 .speaker{
	padding:1px 5px !important;
}
.contentText p{
	font-size:1rem;
	padding:5px;
}
.space{
	min-height:18vh;
}
}


section#wrapperContent .time, section#wrapperContent .stage{
	width:100%;
	text-align:right;
	padding:30px 0;
}

section#wrapperContent .time div, section#wrapperContent .stage div{
	display: inline-block;
	width:590px;
	text-align:right;
}

section#wrapperContent .time div p:first-child, 
section#wrapperContent .stage div p:first-child{
	display: inline-block;
	position:relative;
	width:400px;
	height:40px;
	padding-left:5px;
	background-color:rgba(0,0,0,0.8);
	color:white;
	text-align:left;
	font-size:0.8rem;
	line-height:40px;
}

section#wrapperContent .time div p:first-child:before,
section#wrapperContent .stage div p:first-child:after{
	content:"";
	position:absolute;
	width:0;
	height:0;
	bottom:0;
	right:100%;
	border-left:30px solid transparent;
	border-top:40px solid rgba(0,0,0,0.8);
}

section#wrapperContent .time div p:last-child, 
section#wrapperContent .stage div p:last-child{
	display: inline-block;
	position:relative;
	width:370px;
	height:40px;
	padding-left:5px;
	background-color:rgba(0,0,0,0.8);
	color:white;
	text-align:left;
}

section#wrapperContent .time div p:last-child:before,
section#wrapperContent .stage div p:last-child:after{
	content:"";
	position:absolute;
	width:0;
	height:0;
	bottom:0;
	right:100%;
	border-left:30px solid transparent;
	border-top:40px solid rgba(0,0,0,0.8);
}

@media(max-width: 600px){
	section#wrapperContent .time div, section#wrapperContent .stage div{
		display: inline-block;
		width:490px;
		text-align:right;
	}
	section#wrapperContent .time div p:first-child, 
	section#wrapperContent .stage div p:first-child{
		width:350px;
	}


	section#wrapperContent .time div p:last-child, 
	section#wrapperContent .stage div p:last-child{
		width:320px;
	}
}
@media(max-width: 500px){
	section#wrapperContent .time div, section#wrapperContent .stage div{
		display: inline-block;
		width:390px;
		text-align:right;
	}
	section#wrapperContent .time div p:first-child, 
	section#wrapperContent .stage div p:first-child{
		width:300px;
	}


	section#wrapperContent .time div p:last-child, 
	section#wrapperContent .stage div p:last-child{
		width:270px;
	}
}
@media(max-width: 400px){
	section#wrapperContent .time div, section#wrapperContent .stage div{
		display: inline-block;
		width:300px;
		text-align:right;
	}
	section#wrapperContent .time div p:first-child, 
	section#wrapperContent .stage div p:first-child{
		width:260px;
	}


	section#wrapperContent .time div p:last-child, 
	section#wrapperContent .stage div p:last-child{
		width:230px;
	}
}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ストーリー、行き止まり部分
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

aside#wrapperPeriod{
	background-color:white;
  -webkit-box-shadow: 0 0 25px 0 white; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 white; /* Firefox用 */
  box-shadow: 0 0 25px 0 white; /* CSS3 */

}

aside#wrapperPeriod div#continuedHeading{
	border-bottom:1px solid rgba(0,0,0,0.5);
	padding:5px;
}

aside#wrapperPeriod h2{
	text-align:center;
	padding:10px 0;
}

aside#wrapperPeriod div#backLink li{
	border:3px solid rgba(0,0,0,0.4);
}

aside#wrapperPeriod div#backLink li a{
	display:block;
	width:100%;
	text-align:center;
	cursor:pointer;
	transition:all 0.2s;
}

aside#wrapperPeriod div#backLink li a:hover{
	background-color:rgba(240,0,0,0.8);
}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
キャラ紹介ページ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

#charaBG{
	background-image:url("img/charaBG.jpg");
	background-size:cover;
	position:fixed;
	z-index:-1;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

#wrapperCharacter{
	background-color:rgba(255,255,255,0.5);
}

#wrapperCharacter h1{
	font-size:calc(1rem + 20px);
	text-align:center;
	padding:10px 0;
}

#wrapperCharacter h1:before{
	content:"― ";
}

#wrapperCharacter h1:after{
	content:" ―";
}

#characterSelectBox1, #characterSelectBox2{
	background-color:rgba(0,0,0,0.7);
	padding:10px;

}

#characterSelectBox1{
	border-bottom:2px solid rgba(255,255,255,0.4);
}

.characters{
	overflow-x:auto;
	white-space: nowrap;
	padding:10px;
}

.characters li{
	display:inline-block;
	width:15%;
	margin-right:10px;
	max-width:150px;
}


.characters li a{
	display:block;
	width:100%;
	overflow:hidden;
}

.characters li a img{
	max-width:100%;
	height:auto;
}


#wrapperCharacter .inner{
	margin-bottom:15px;
}

#inner2{
	margin-bottom:25px;
}

.characterContentBox{
	background-color:rgba(255,255,255,0.5);
	padding:20px;
} 

@media(max-width:600px){
.characterContentBox{
	padding:20px 5px;
} 	
}

.characterContentBox h2{
	font-size:calc(1rem + 30px);
	text-align:center;
	text-shadow:
	2px 2px 1px rgba(0,0,0,0.1),
	2px 0 1px rgba(0,0,0,0.1),
	-2px 0 1px rgba(0,0,0,0.1),
	-2px 0 1px rgba(0,0,0,0.1);
}

@media(max-width:400px){
.characterContentBox h2{
	font-size:calc(1rem + 20px);
}
}

.characterContentBox .name p{
	font-size:calc(1rem + 10px);
	text-align:center;
	text-shadow:
	2px 2px 1px rgba(0,0,0,0.1),
	2px 0 1px rgba(0,0,0,0.1),
	-2px 0 1px rgba(0,0,0,0.1),
	-2px 0 1px rgba(0,0,0,0.1);
}


.characterContentBox h3{
	font-size:calc(1rem + 10px);
	text-align:center;
	border-bottom:2px solid rgba(0,0,0,0.5);
	margin-bottom:10px;
}

.ccb1 .face{
	float:left;
	width:35%;
	overflow:visible;
}

.ccb1 a img{
	max-width:100%;
	height:auto;
}

.ccb1 .name{
	float:right;
	width:65%;
	padding-top:100px;
}

@media(max-width:800px){
.ccb1 .name{
	padding-top:70px;
}	
}

.ccb2 .data1{
	float:left;
	width:50%;
	padding:20px;
}

.ccb2 .data2{
	float:right;
	width:50%;
	padding:20px;
}

.ccb1 li, .ccb2 li{
	margin-bottom:15px;
} 

.ccb2 .data2 li{
	position:relative;
}

.data2 li .span1{
	display:inline-block;
	font-size:0.8rem;
	position:absolute;
	left:-20px;
	top:-15px;
	color:red;
	font-weight:bold;
}

.data2 li .span2{
	font-weight:900;
	text-shadow:
	2px 2px 1px rgba(0,0,0,0.1),
	2px 0 1px rgba(0,0,0,0.1),
	-2px 0 1px rgba(0,0,0,0.1),
	-2px 0 1px rgba(0,0,0,0.1);
}

@media(max-width:600px){

.ccb1 .face{
	width:100%;
	text-align:center;
}

.ccb1 a img{
	max-width:70%;
	height:auto;
}

.ccb1 .name{
	width:100%;
	text-align:center;
}

.ccb2 .data1{
	width:100%;
}

.ccb2 .data2{
	width:100%;
}

}

.ccb2 h3,.ccb3 h3{
	padding-top:10px;
}

.ccb3 h3 span{
	text-shadow:
	2px 2px 1px rgba(0,0,0,0.1),
	2px 0 1px rgba(0,0,0,0.1),
	-2px 0 1px rgba(0,0,0,0.1),
	-2px 0 1px rgba(0,0,0,0.1);	
}

.characterContentBox{
	display:none;
}

#ccbmari{
	display:block;
}

.active{
	background-color:rgba(255,255,255,0.8);
	cursor:none;
}

.data1>br,.data2>br, .ccb3 .description2 br{
	display:none;
}



/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
隣接記事表示設定
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/


#nextpastBlock{
	padding-top:30px;
  margin-bottom:15px;
}

/*--------------------------------
PREV NEXT
---------------------------------*/
#prev_next{
width:100%;
display: table;
background-color:rgba(0,0,0,0.8);
color:white;
}
#prev_next  #prev, #prev_next  #next{
width: 50%;
padding:30px 10px 10px;
border-top:#ccc 1px solid;
border-bottom:#ccc 1px solid;
display: table-cell;
position:relative;
text-decoration:none;
}
#prev_next #prev p, #prev_next #next p{
font-size:120%;
line-height:1.5;
color:white;
}
#prev_next #prev:hover, #prev_next #next:hover{
background-color: rgba(238,238,238,0.7);
}
#prev_next #prev{
border-right:#ccc 1px solid;
}
#prev_next #prev_title, #prev_next #next_title{
font-size:90%;
top:-1em;
position:absolute; 
border: 1px #ccc solid;
background-color:rgba(0,0,0,1.0); 
text-align: center;
padding:3px;
color:magenta;
}
#prev_next #next_title{
right:10px;
}
#prev_next #prev img, #prev_next #next img{
margin:0 auto;
}
#prev_next #prev_no, #prev_next #next_no{
width: 50%;
height:140px;
padding:0 10px;
display: table-cell;
}
#prev_next #prev_no{
border-right:#ccc 1px solid;
}
#prev_next_home{
margin:0 auto;
background-color: #39f;
border: solid 9px #fff;
width: 100px;
height:100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
box-shadow: 0 0 0 3px #39f;
-webkit-box-shadow: 0 0 0 3px #39f;
-moz-box-shadow: 0 0 0 3px #39f;
text-align:center;  
}
#prev_next_home:hover{
background-color: rgba(0,0,255,0.7);
}
#prev_next_home i{
color:#FFF;
margin:10px auto ;
font-size:60px;
}




/*-- ここまで --*/
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*-- ここから --*/
/*--------------------------------------
768px PREV NEXT
--------------------------------------*/
#prev_next #prev, #prev_next #prev::before, #prev_next #prev::after,
#prev_next #next, #prev_next #next::before, #prev_next #next::after { 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
#prev_next #prev_title, #prev_next #next_title{
padding:3px 10px;
}
#prev_next #next_title{
right:10px;
}
#prev_next #prev img{
float:left;
margin-right:10px
}
#prev_next #next img{
float:right;
margin-left: 10px;
}
/*-- ここまで --*/
}



/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ストーリー一覧
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

#wrapperStories{
	background-color:rgba(0,0,0,1.0);
}

#wrapperStories h1{
	text-align:center;
	padding:10px 0;
}

#wrapperStories h1:before{
	content:"― ";
}

#wrapperStories h1:after{
	content:" ―";
}

#wrapperStories .inner{
	background-color:rgba(255,255,255,1.0);
  -webkit-box-shadow: 0 0 25px 0 white; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 white; /* Firefox用 */
  box-shadow: 0 0 25px 0 white; /* CSS3 */
  padding:35px 15px;
}

#wrapperStories > .inner{
	min-height:100vh;
}

#wrapperStories h3{
	font-size:1.4rem;
	line-height:1.4rem;
}

.sText1, .sText2{
	padding:5px;
}

.sText1{
	padding-top:20px;
}

.sText1 a, .sText2 a{
	font-size:calc(1rem + 5px);
	display:inline-block;
	border-bottom:3px dotted rgba(0,0,190,0.7);
	margin-bottom:20px;
	transition:0.2s all;
}

.sText1 a:hover, .sText2 a:hover{
	color:red;
	cursor:pointer;
}

.sText2 h3{
	font-size:1.2rem;
	border-left:10px solid rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,0.6);
	padding-left:5px;
	padding-bottom:2px;
	margin-top:25px;
	margin-bottom:10px;
}

.sText1 p, .sText2 p{
	margin-bottom:10px;
}

section#wrapperPosts .inner{
	padding:35px 15px;
}

section#wrapperPosts li{
	display:inline-block;
	width:45%;
}

section#wrapperPosts li:nth-child(odd){
	margin-right:5%;
	}

div.icatch{
	width:35%;
	float:left;
	overflow:visible;
}

div.icatch img{
	max-width:100%;
	height:auto;
}

div.postHeading{
	width:65%;
	float:right;
	padding-left:4px;

}

.postHeading time{
	font-size:0.9rem;
}

@media(max-width:800px){
#wrapperStories h3{
	font-size:1.3rem;
	line-height:1.3rem;
}
.postHeading time{
	font-size:0.8rem;
}	
}

@media(max-width:600px){
#wrapperStories h1{
	font-size:calc(1rem + 7px);
}
.sText2 h3{
	font-size:calc(1rem + 2px);
	border-left:4px solid rgba(0,0,0,0.6);
}
section#wrapperPosts li{
	width:100%;
}
section#wrapperPosts li:nth-child(odd){
	margin-right:0;
}
div.icatch{
	width:20%;
}
div.postHeading{
	width:80%;

}
#wrapperStories h3{
	font-size:1.4rem;
	line-height:1.4rem;
}
.postHeading time{
	font-size:0.9rem;
}

}


/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
申しわけ程度のニュース
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

article#wrapperNews{
	background-color:rgba(0,0,0,1.0);

}

article#wrapperNews .inner, aside#newsWall .inner{
	background-color:white;
  -webkit-box-shadow: 0 0 25px 0 white; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 25px 0 white; /* Firefox用 */
  box-shadow: 0 0 25px 0 white; /* CSS3 */
}

article#wrapperNews div#wrapperMetaheading .inner,aside#newsWall .inner{
	padding:5px;
}

article#wrapperNews div#wrapperMetaheading h1{
	font-size:calc(1rem + 15px);
	border-left:8px solid rgba(0,0,0,0.7);
	padding-left:5px;
}

article#wrapperNews div#wrapperMetaheading ul{
	padding:20px 10px;
}

article#wrapperNews div#wrapperMetaheading ul li{
	text-align:right;
}

article#wrapperNews div#wrapperMetaheading ul li time{
	font-size:0.8rem;
}

section#wrapperNewsContent{
	background-color:rgba(0,0,0,1.0);
}

aside#newsWall{
	padding:20px;
}

section#wrapperNewsContent div#content{
	min-height: 80vh;
	padding:20px 10px;
}

@media(max-width: 600px){

section#wrapperNewsContent div#content{
	padding:20px 5px;
}	
}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ハンバーガーメニュー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/



#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

#nav-open-border{
  background-color:rgba(255,255,255,0.4);
  border-radius:3px;
  cursor:pointer;
  position:fixed;
  top:5%;
  left:5%; 
  padding:5px;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  z-index:99;
  cursor:pointer;
  overflow:visible;
  opacity:0.7;
  border-radius: 3px;
 
}

#nav-open img{
	max-width:100%;
	height:auto;
}


/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: rgba(0,0,0,0.8);/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}



#navTop{
  max-width:100%;
  height:auto;
  overflow:visible;
}

#navTop img{
  max-width:100%;
  height:auto;
}

nav h2{
  font-size:26px;
  color:white;
  padding:7px 0;
  border-top:5px solid white;
  border-bottom:5px solid white;
  text-align:center;
}

nav li a{
  display:block;
  padding:10px 0 10px 5px;
  color:white;
  font-size:18px;
  transition:all 0.3s;
}

nav li a:hover{
  background-color:rgba(215,21,126,0.9);
  color:pink;
  padding-left:25px;
}


#nav-content .sub-menu a{
	padding-left:20px;
  transition:all 0.3s;
}

#nav-content .sub-menu a:hover{
  background-color:rgba(215,21,126,0.9);
  color:pink;
  padding-left:35px;
}

@media(max-width: 800px){
#nav-content {
  width: 50%;/*右側に隙間を作る（閉じるカバーを表示）*/
}
nav h2{
  font-size:24px;
  padding:7px 0;
  border-top:2px solid white;
  border-bottom:2px solid white;
}
nav li a{
  padding:10px 0 10px 5px;
  font-size:18px;
}


  
}

@media(max-width: 500px){
#nav-content {
  width: 65%;/*右側に隙間を作る（閉じるカバーを表示）*/
}
nav h2{
  font-size:20px;
  padding:7px 0;
  border-top:2px solid white;
  border-bottom:2px solid white;
}
nav li a{
  padding:10px 0 10px 5px;
  font-size:14px;
}


}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
SNSメニュー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

#articleSNS, #footerSNS{
	text-align:right;
}

.inner .snsul{
	display:inline-block;
}

.inner .snsul li{
	float:left;
	padding-right:17px;
	line-height:1.0;
}


.btnWrap .icon{
	overflow:visible;
}

.btn .label{
	padding:right:7px;
}


#img_omatome{
	display:none;
}

.zbreak{
	z-index:auto !important;
	clear:both;
}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
美術館
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

.museum-frame{
padding:1%;
}

.museum-frame a{
	display:inline-block;
	width:19%;
	padding:1%;	
}

.museum-frame a:nth-child(5n):after{
	display:block;
	content:"";
	clear:both;
}

.museum-frame a img{
	max-width:100%;
	height:auto;
}

@media(max-width:1000px){

.museum-frame a{
	width:24%;
	padding:1%;	
}

.museum-frame a:nth-child(5n):after{
	display:none;
}

.museum-frame a:nth-child(4n):after{
	display:block;
	content:"";
	clear:both;
}

}

@media(max-width:600px){

.museum-frame a{
	width:31.3%;
	padding:1%;	
}

.museum-frame a:nth-child(5n):after{
	display:none;
}

.museum-frame a:nth-child(4n):after{
	display:none;
}

.museum-frame a:nth-child(3n):after{
	display:block;
	content:"";
	clear:both;
}

}

@media(max-width:450px){

.museum-frame a{
	width:46%;
	padding:2%;	
}

.museum-frame a:nth-child(5n):after{
	display:none;
}

.museum-frame a:nth-child(4n):after{
	display:none;
}

.museum-frame a:nth-child(3n):after{
	display:none;
}

.museum-frame a:nth-child(2n):after{
	display:block;
	content:"";
	clear:both;
}

}