@charset "utf-8";

/**stories index**/
.mainVisual h1 span{
	line-height: 1.5em;
}
/*menu1*/
.storiesMenu .columnOneFifths{
	height: auto;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	border: 1px solid #DDD;
	border-radius: 4px;
	transition: all 300ms 0s ease;
}
.storiesMenu .columnOneFifths:hover{
	cursor: pointer;
	border-color: #6bF;
}
.storiesMenu .columnOneFifths .titleText{
	width: 100%;
	padding: 10px;
	font-size: 13px;
	line-height: 1.5em;
	color: #666;
	transition: all 300ms 0s ease;
}
.storiesMenu .columnOneFifths .titleText a{
	display: block;
	min-height: 80px;
	text-align: center;
	font-size: 20px;
	line-height: 1.3em;
	font-family:"Montserrat", "Helvetica Neue", arial, sans-serif;
	font-weight: bold;
	font-style: normal;
	color: #333;
	position: relative;
}
.storiesMenu .columnOneFifths .titleText a:hover{
	text-decoration: none;
}
.storiesMenu .columnOneFifths .titleText a span{
	display: block;
	width:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.storiesMenu .columnOneFifths:hover .titleText{
	color: #999;
}
.storiesMenu .columnOneFifths:hover .titleText a{
	color: #000;
}

.storiesMenu .columnOneFifths .storyImage{
	position: relative;
	width: 100%;
	height: 120px;
	overflow: hidden;
}
.storiesMenu .columnOneFifths .storyImage img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	width: 102%;
	height: auto;
	transition: all 300ms 0s ease;
}
.storiesMenu .columnOneFifths:hover .storyImage img{
	width: 125%;
}


/**stories**/
.mainVisual_s{
	height:160px;
}
.mainVisual_s h1{
	position:relative;
	left:0;
	top:0;
	bottom:0;
	right:auto;
	display:inline-block;
	/*background-color:rgba(0,0,0,0.35);*/
background: -moz-linear-gradient(left, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.35) 80%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.35) 80%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.35) 80%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */

	width:auto;
	padding-right:30px;
	height:160px;
	transform:none;
}
.mainVisual_s h1 span{
	font-size:14px;
	top:40px;
	left:20px;
	position:absolute;
	background-color:#F90;
	padding:3px 3px;
	border-radius:2px;
	display:block;
	font-weight:normal;
}
.mainVisual_s h1 em{
	font-style:normal;
	margin-left:20px;
	line-height:160px;
	display:block;
	text-shadow:1px 1px 1px #040302;
	letter-spacing:0.1em;
}



.textStyle1{
	line-height: 1.8em;
	margin-bottom: 2em;
}
.storiesBtnSet{
	margin-top:80px;
	text-align: center;
}
.storiesBtnSet .btnNextStory{
	margin: 0 auto;
	display: inline-block;
	/*background-color: #06A3E0;*/
	background-color:#AAA;
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.3s ease;
}
.storiesBtnSet .btnNextStory:hover{
	background-color: #70BBE9;
}
.storiesBtnSet .btnNextStory a{
	padding: 38px 40px 33px 34px;
	display: block;
	position: relative;
	color: #FFF;
}
.storiesBtnSet .btnNextStory a:hover{
	text-decoration: none;
}
.storiesBtnSet .btnNextStory a span{
	font-size: 14px;
	position: absolute;
	top: 10px;
	left: 10px;
}
.storiesBtnSet .btnNextStory a em{
	font-size:20px;
	letter-spacing:0.1em;
	font-family:"Montserrat", "Helvetica Neue", arial, sans-serif;
	font-weight: bold;
	font-style: normal;
}
.storiesBtnSet .btnNextStory a em::after{
	font-family: 'sgwire_icon' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e90d";
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	font-size:18px;
	line-height:1;
	transition: all 0.3s ease;
}
.storiesBtnSet .btnNextStory:hover a em::after{
	right: 0px;
}

/**stories footer link**/
.storiesLink{
	overflow: hidden;
	margin-top:60px;
}
.storiesLink .storyTitleSet{
	text-align: center;
	overflow: hidden;
}
.storiesLink .storyTitle{
	display:inline-block;
	margin: 0 auto;
	/*background-color:#06A3E0;*/
	background-color:#F90;
	border-radius: 3px 3px 0 0;
	padding:10px 50px 5px 50px;
	font-size:16px;
	letter-spacing: 0.1em;
	color:#FFF;
}
.storiesLink .columnSet{
	background-color:#efefef;
	/*border:1px solid #06A3E0;*/
	border:1px solid #F90;
	border-radius: 3px;
	padding:15px 15px 0 15px;
}

.storiesLink .columnOneFifths{
	background-color: #FFF;
	margin-bottom:15px;
	position:relative;
	overflow:hidden;
	transition: all 300ms 0s ease;
}
.storiesLink .columnOneFifths.current,
.storiesLink .columnOneFifths:hover{
	outline:2px solid #06A3E0;
}

.storiesLink .columnOneFifths:nth-child(6n){
	clear:left;
	float:left;
}
.storiesLink .columnOneFifths a{
	height: 120px;
	display:block;
	font-size:18px;
	line-height:1.4em;
	text-align:center;
	position:relative;
	z-index:20;
	font-family:"Montserrat", "Helvetica Neue", arial, sans-serif;
	font-weight: bold;
	font-style: normal;
	color:#FFF;
}
.storiesLink .columnOneFifths a span{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 100%;
	text-shadow:1px 1px 1px #040302;
}
.storiesLink .columnOneFifths.current a span{
	font-weight:bold;
}
.storiesLink .columnOneFifths.current a:hover{
	cursor: default;
}
.storiesLink .columnOneFifths img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	width: 102%;
	height: auto;
	transition: all 300ms 0s ease;
	z-index:15;
	filter: brightness(0.4);
	-webkit-filter: brightness(0.4);
	-moz-filter: brightness(0.4);
	-o-filter: brightness(0.4);
	-ms-filter: brightness(0.4);
}
.storiesLink .columnOneFifths.current img,
.storiesLink .columnOneFifths:hover img{
	filter: brightness(0.7);
	-webkit-filter: brightness(0.7);
	-moz-filter: brightness(0.7);
	-o-filter: brightness(0.7);
	-ms-filter: brightness(0.7);
}
.storiesLink .columnOneFifths:hover img{
	width:106%;
}
.storiesLink .columnOneFifths.current:hover img{
	width:102%;
}


/**images**/
.storiesImgSet{
	margin:30px;
	position:relative;
	display:block;
}

.storiesImgSet.center{
	margin: 0 auto 2em;
	max-width: 700px;
}

.storiesImgSet .columnSet{
	margin-bottom:0;
}
.columnSet .storiesImgSet{
	margin-top:0;
}

.imageCaption{
	font-size:15px;
	line-height:1.4em;
	font-weight: bold;
	margin-bottom:0.5em;
	padding-top:0.5em;
	color:#0666A8;
	position:relative;
	border-bottom:1px solid #CCC;
}
.imageCaption strong{
	margin-left:24px;
	padding-left:5px;
	min-width:100%;
	display: inline-block;
}
.imageCaption:before{
	content:"";
	background:url(../music/images/icon_image_caption.svg) no-repeat right bottom;
	width:24px;
	height:25px;
	display:inline-block;
	line-height:0;
	font-size:0;
	position:absolute;
	bottom:-1px;
}
.storiesImgSet .textStyle2,
.storiesImgSet .notesStyle1{
	color:#777;
	margin-left:2em;
	margin-right:2em;
}
.storiesImgSet .columnSet{
	margin-left:2em;
	margin-right:2em;
}
.storiesImgSet .provider{
	text-align:right;
	font-size: 12px;
	color: #777;
	clear:both;
	margin-bottom:1em;
	margin-right:2em;
}


/*------ブレイクポイント------*/
@media screen and (max-width: 899px) {
.storiesLink .columnOneFifths{
	float: left;
	width: calc((100% - 45px) / 4);
	margin-left: 15px;
	margin-bottom: 10px;
	clear:none;
}
.storiesLink .columnOneFifths:first-child,
.storiesLink .columnOneFifths:nth-child(5),
.storiesLink .columnOneFifths:nth-child(9){
	margin-left: 0;
}
.storiesLink .columnOneFifths:nth-child(6){
	clear:none;
}
}

@media screen and (max-width: 749px) {
.storiesLink .columnOneFifths{
	float: left;
	width: calc((100% - 30px) / 3);
	margin-left: 15px;
	margin-bottom: 10px;
	clear:none;
}
.storiesLink .columnOneFifths:first-child,
.storiesLink .columnOneFifths:nth-child(4),
.storiesLink .columnOneFifths:nth-child(7),
.storiesLink .columnOneFifths:nth-child(10){
	margin-left: 0;
}
.storiesLink .columnOneFifths:nth-child(5),
.storiesLink .columnOneFifths:nth-child(9){
	margin-left: 15px;
}
}

@media screen and (max-width: 599px) {
.storiesLink .columnOneFifths{
	float: left;
	width: calc((100% - 15px) / 2);
	margin-left: 15px;
	margin-bottom: 10px;
	clear:none;
}
.storiesLink .columnOneFifths:first-child,
.storiesLink .columnOneFifths:nth-child(odd){
	margin-left: 0;
}
.storiesLink .columnOneFifths:nth-child(even){
	margin-left:15px;
}
}



@media screen and (max-width: 849px) {

.storiesMenu .columnOneFifths{
	float: left;
	width: calc((100% - 30px) / 3);
	margin-left: 15px;
	margin-bottom: 15px;
}

.storiesMenu .columnOneFifths:first-child,
.storiesMenu .columnOneFifths:nth-child(4){
	margin-left: 0;
}
.storiesMenu .columnOneFifths:nth-child(7){
	margin-left: 0;
}
.storiesMenu .columnOneFifths:nth-child(10){
	margin-left: 0;
}
.hideSP{
	display:none;
}

}
@media screen and (max-width: 699px) {

.storiesMenu .columnOneFifths{
	float: left;
	width: calc((100% - 15px) / 2);
	margin-left: 15px;
	margin-bottom: 15px;
}

.storiesMenu .columnOneFifths:first-child,
.storiesMenu .columnOneFifths:nth-child(odd){
	margin-left: 0;
}
.storiesMenu .columnOneFifths:nth-child(7){
	margin-left: 0;
}
.storiesMenu .columnOneFifths:nth-child(even){
	margin-left: 15px;
}
.storiesMenu .hideSP{
	display:none;
}
.imgRight p.img,
.imgLeft p.img{
	float:none;
	margin-left:0;
	margin-right:0;
	text-align:center;
}

.storiesColumnSet .columnTwoFifths,
.storiesColumnSet .columnThreeFifths,
.storiesColumnSet .columnHalf{
	float:none;
	margin-left:0;
	margin-right:0;
	width:100%;
}

}

@media screen and (max-width: 479px) {
.storiesMenu .hideSP{
	display: block;
}

}