@charset "utf-8";
/* PC
-------------------------------------------------- */
@media screen and (min-width:1000px){
	.pcFlexWrap{
		display: flex;
		width: 1200px;
		justify-content: center;
		flex-direction: row-reverse;
		margin: 60px auto 0;
	}
	
	.pcFlexR{
		box-sizing: border-box;
		width: 50%;
		max-width: 600px;
	}
	
	.pcFlexL{
		box-sizing: border-box;
		width: 50%;
		max-width: 600px;
	}
	
	#mainVisual{
		width: 100%;
		position: relative;
		z-index: 1;
	}
	
	#mainVisual .illust{
		width: 100%;
		max-width: 600px;
		position: fixed;
		top: 80px;
		z-index: 2;
		text-align: right;
		visibility: visible;
		transition: .5s;
	}
	
	#mainVisual .illust.show{opacity: 1;}
	#mainVisual .illust.hide{opacity: 0;}
	
	#mainVisual .illust img{
		width: 95%;
	}
	
	#mainVisual::before,
	#mainVisual::after{
		content: "";
		display: block;
		width: 50px;
		position: fixed;
		z-index: 3;
	}
	
	.illustrator{
		position: fixed;
		top: 70px;
		z-index: 2;
		font-size: 12px;
		font-weight: 600;
		text-align: right;
		width: 100%;
		max-width: 600px;
	}
	
	.btnArea{
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		width: 100%;
		max-width: 600px;
		position: fixed;
		bottom: 50px;
		z-index: 10;
	}
	
	.btnArea button{
		display: flex;
		box-sizing: border-box;
		width: 60px;
		padding: 16px;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1 / 1;
		background: #ffffff;
		border-radius: 50%;
		box-shadow: 0 3px 6px rgba(0,0,0,0.5);
		border: none;
		margin-left: 20px;
		cursor: pointer;
	}
	
	.btnArea button:hover{
		margin-top: 3px;
		margin-bottom: -3px;
		box-shadow: 0 0 6px rgba(0,0,0,0.5);
	}
	
	.btnArea button img{
		width: 100%;
	}
	
	.charaArea{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 380px;
	}
	
	.charaArea li{
		width: 50%;
		max-width: 185px;
		margin-bottom: 10px;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
	}
	.charaArea li:nth-child(n+3){
		margin-bottom: 0;
	}
	
	.charaArea li img{
		width: 100%;
	}
	
	.data{
		padding: 0 60px;
	}
	
	.name{
		font-size: 50px;
		line-height: 50px;
		font-weight: 600;
		color: #ffffff;
		margin-top: 30px;
		padding-bottom: 30px;
		border-bottom: 1px solid #ffffff;
	}
	
	.name span:nth-child(1){
		display: block;
		font-size: 16px;
		line-height: 16px;
		margin-bottom: 10px;
	}
	
	.name span:nth-child(2){
		display: block;
		font-size: 16px;
		line-height: 16px;
		margin-top: 20px;
	}
	
	.cast{
		margin-top: 30px;
		padding: 0 60px;
	}
	
	.cast p{
		font-size: 20px;
		font-weight: 600;
		color: #ffffff;
	}
	
	.cast p span{
		font-size: 16px;
		padding-right: 10px;
	}
	
	.cast .voice{
		display: flex;
		flex-wrap: wrap;
	}
	
	.voice li{
		width: 100%;
		max-width: 60px;
		margin-right: 45px;
	}
	
	.voice li:nth-child(5n){
		margin-right: 0;
	}
	
	.voice li button{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		text-align: center;
		border-radius: 50%;
		width: 100%;
		aspect-ratio: 1 / 1;
		font-size: 24px;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		margin: 30px 0 10px;
		cursor: pointer;
		border: none;
	}
	
	.voice li button:hover{
		margin: 33px 0 7px;
		box-shadow: 0 0 6px rgba(0,0,0,0.2);
	}
	
	.voice li p{
		text-align: center;
		color: #ffffff;
		font-size: 16px;
		font-weight: normal;
		line-height: 16px;
	}
	
	.work{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30px;
	}
	
	.work .photo{
		width: 37%;
	}
	
	.work .photo img{
		width: 100%;
	}
	
	.work .text{
		width: 60%;
	}
	
	.work p{
		font-size: 16px;
		font-weight: normal;
		color: #ffffff;
	}
	
	.work ul{
		margin-top: 10px;
	}
	
	.work li{
		color: #ffffff;
		font-size: 14px;
		font-weight: normal;
		line-height: 1.8em;
		padding-left: 1em;
		text-indent: -1em;
	}
	
	.work li::before{
		content: "・";
	}
	
	.work li span{
		position: relative;
		z-index: 1;
		padding-left: 18px;
		margin-left: 10px;
		padding-right: 5px;
	}
	
	.work li span::before{
		content: "";
		display: block;
		width: 10px;
		height: 2px;
		background: #ffffff;
		position: absolute;
		left: 0;
		top: 10px;
		margin-top: -1px;
	}
	
	.profile{
		margin-top: 30px;
		padding: 0 60px;
	}

	.gallery{
		margin-top: 30px;
		border-top: 1px solid #ffffff;
	}
	
	.movie{
		width: 100%;
		margin: 30px 0;
		aspect-ratio: 16 / 9;
	}
	
	.movie iframe{
		width: 100%;
		height: 100%;
	}
	
	.slider img{
		width: 100%;
		object-fit: contain;
		margin: auto;
	}
	
	.slick-dotted.slick-slider{
		margin: 0;
	}

	.slick-dots{
		margin-top: 5px;
		position: static;
	}

	.slick-dots li{
		width: 10px;
		height: 10px;
		margin: 0 5px;
	}

	.slick-dots li button{
		width: 10px;
		height: 10px;
		background: #ffffff;
		border-radius: 100%;
	}

	.slick-dots li button:before{
		display: none;
	}

	.slick-active button{
		background: #000000 !important;
	}
	
	#interview{
		width: 100%;
		box-sizing: border-box;
		background: #f9f9f9;
		background-size: 60% auto, auto;
		padding: 60px;
		margin-top: 60px;
		position: relative;
		z-index: 1;
	}
	
	h2{
		font-size: 30px;
		line-height: 30px;
		font-weight: 600;
		color: #333333;
		padding-left: 36px;
	}
	
	h2 span{
		display: block;
		font-size: 14px;
		line-height: 14px;
		font-weight: normal;
		margin-top: 10px;
	}
	
	.ask{
		margin-top: 60px;
		font-size: 18px;
		line-height: 1.6em;
		font-weight: 600;
		padding-left: 30px;
		position: relative;
		z-index: 1;
	}
	
	.ask::before{
		content: "";
		display: block;
		width: 20px;
		height: 3px;
		font-weight: 600;
		position: absolute;
		top: 14px;
		left: 0;
		z-index: 2;
	}
	
	.answer{
		margin: 20px 0 30px;
		font-size: 16px;
		line-height: 1.8em;
		font-weight: normal;
		color: #333333;
	}
	
	#interview .movie{
		margin: 0;
	}
	
	#product{
		background: #ffffff;
	}
	
	.secInner{
		box-sizing: border-box;
		padding: 60px;
	}
	
	.comingsoon{
		font-size: 30px;
		font-weight: 600;
		text-align: center;
		margin-top: 40px;
	}
	
	h3{
		font-size: 18px;
		margin-top: 40px;
		border-bottom: 1px solid #cccccc;
		padding-bottom: 15px;
		margin-bottom: 40px;
	}
	#souta h3{color: #037fbf;}
	#akane h3{color: #e50011;}
	#yui h3{color: #403813;}
	#rui h3{color: #074123;}
	
	.product .slick-dots{
		margin-top: 10px;
	}
	
	.product .slick-dots li button,
	.effect .slick-dots li button,
	.theme .slick-dots li button{
		background: #000000;
	}
	
	#souta .product .slick-active button,
	#souta .effect .slick-active button,
	#souta .theme .slick-active button{
		background: #037fbf !important;
	}
	
	#akane .product .slick-active button,
	#akane .effect .slick-active button,
	#akane .theme .slick-active button{
		background: #e50011 !important;
	}
	
	#yui .product .slick-active button,
	#yui .effect .slick-active button,
	#yui .theme .slick-active button{
		background: #403813 !important;
	}
	
	#rui .product .slick-active button,
	#rui .effect .slick-active button,
	#rui .theme .slick-active button{
		background: #074123 !important;
	}
	
	.slideImg img{
		width: 100%;
	}
	
	.movieLink{
		display: block;
		box-sizing: border-box;
		border: 2px solid #333333;
		border-radius: 5px;
		margin-top: 40px;
		font-size: 14px;
		font-weight: 600;
		color: #333333;
        line-height: 20px;
        text-decoration: none;
        padding: 12px 0;
		background: url("../img/arrow-right_bk.png") center right 20px no-repeat, #ffffff;
		background-size: auto 10px, auto;
		text-align: center;
	}
	
	.contentsImg img{
		width: 100%;
	}
	
	.uncer_d{
		font-size: 16px;
		margin-top: 20px;
	}
	
	.senko{
		box-sizing: border-box;
		border: 3px solid #cccccc;
		margin-top: 30px;
		padding: 30px;		
	}
	
	.senko p{
		font-size: 16px;
	}
	
	.senko p span{
		color: #cc0000;
	}
	
	.senko p:not(:last-child){
		margin-bottom: 15px;
	}
	
	.price{
		font-size: 16px;
		text-align: center;
		color: #cc0000;
		margin-top: 30px;
	}
	
	.itemLink{
		display: block;
		box-sizing: border-box;
		background: url("../img/arrow-right.png") center right 20px no-repeat, #cc0000;
		background-size: auto 10px, auto;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		padding: 15px 0;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		border-radius: 5px;
		text-decoration: none;
		margin-top: 30px;
	}
	
	.itemLink:hover{
		transform: translateY(3px);
		box-shadow: 0 0 6px rgba(0,0,0,0.2);
	}
	
	#character{
		background: #f9f9f9;
	}
	
	#character .secInner{
		padding-bottom: 20px;
	}
	
	#character ul{
		margin-top: 40px;
	}
	
	#character li{
		margin-bottom: 30px;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
	}
	
	#character img{
		width: 100%;
	}
	
	footer{
		margin-top: 0;
	}
	
	.copyright{
		position: relative;
		z-index: 100;
	}
	
	/* モーダル
	------------------------------ */
	.modal{
		display: none;
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		box-sizing: border-box;
		height: 100%;
		overflow-y: scroll;
		background-color: rgba(0,0,0,0.5);
		padding: 20px 3%;
	}

	.modal-content{
		width: 100%;
		animation-name: modalopen;
		animation-duration: 1s;
	}
	
	.modal-content img{
		display: block;
		width: auto;
		height: 95vh;
		margin: 0 auto;
	}
	
	.modalClose{
		display: block;
		width: 60px;
		font-size: 40px;
		color: #ffffff;
		line-height: 60px;
		text-align: center;
		position: fixed;
		top: 30px;
		right: 50px;
		z-index: 10;
		background: #000000;
		cursor: pointer;
	}
	
	.modal-voice{
		box-sizing: border-box;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		background: #ffffff;
		padding: 100px;
		animation-name: modalopen;
		animation-duration: 1s;
		position: relative;
		z-index: 1;
		border-radius: 30px;
	}
	
	.voiceClose{
		display: block;
		width: 60px;
		font-size: 40px;
		color: #ffffff;
		line-height: 60px;
		text-align: center;
		position: absolute;
		top: 30px;
		right: 50px;
		z-index: 10;
		background: #000000;
		cursor: pointer;
	}
	
	.voiceList li{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 0;
	}
	
	.voiceList li span{
		display: block;
		width: 15%;
	}
	
	.voiceList li p{
		display: block;
		width: 50%;
		margin-right: 5%;
		text-align: left;
	}
	
	.voiceList li audio{
		display: block;
		width: 30%;
	}
	
	.voiceList li:not(:last-child){
		border-bottom: 1px solid #cccccc;
	}
}

/* PC個別
-------------------------------------------------- */
@media screen and (min-width:1000px){
	/* メインビジュアル */
	main#souta{
		background: url("../img/souta_bgi_pc.gif") top 60px center no-repeat, #ffffff;
		background-size: contain;
		background-attachment: fixed;
	}
	
	main#akane{
		background: url("../img/akane_bgi_pc.gif") top 60px center no-repeat, #ffffff;
		background-size: contain;
		background-attachment: fixed;
	}
	
	main#yui{
		background: url("../img/yui_bgi_pc.gif") top 60px center no-repeat, #ffffff;
		background-size: contain;
		background-attachment: fixed;
	}
	
	main#rui{
		background: url("../img/rui_bgi_pc.gif") top 60px center no-repeat, #ffffff;
		background-size: contain;
		background-attachment: fixed;
	}
	
	/* セリフ */
	#akane #mainVisual::before{
		aspect-ratio: 150 / 735;
		background: url("../img/akane_word_1.png") top right no-repeat;
		background-size: contain;
		top: 100px;
		transform: translateX(1100%)
	}
	
	#akane #mainVisual::after{
		aspect-ratio: 150 / 930;
		background: url("../img/akane_word_2.png") top right no-repeat;
		background-size: contain;
		top: 180px;
		transform: translateX(980%)
	}
	
	#souta #mainVisual::before{
		aspect-ratio: 150 / 825;
		background: url("../img/souta_word_1.png") top right no-repeat;
		background-size: contain;
		top: 100px;
		transform: translateX(1100%)
	}
	
	#souta #mainVisual::after{
		aspect-ratio: 150 / 828;
		background: url("../img/souta_word_2.png") top right no-repeat;
		background-size: contain;
		top: 180px;
		transform: translateX(980%)
	}
	
	#yui #mainVisual::before{
		aspect-ratio: 150 / 636;
		background: url("../img/yui_word_1.png") top right no-repeat;
		background-size: contain;
		top: 100px;
		transform: translateX(1100%)
	}
	
	#yui #mainVisual::after{
		aspect-ratio: 150 / 1620;
		background: url("../img/yui_word_2.png") top right no-repeat;
		background-size: contain;
		top: 180px;
		transform: translateX(980%)
	}
	
	#rui #mainVisual::before{
		aspect-ratio: 150 / 450;
		background: url("../img/rui_word_1.png") top right no-repeat;
		background-size: contain;
		top: 100px;
		transform: translateX(1100%)
	}
	
	#rui #mainVisual::after{
		aspect-ratio: 150 / 1125;
		background: url("../img/rui_word_2.png") top right no-repeat;
		background-size: contain;
		top: 180px;
		transform: translateX(980%)
	}
	
	/* キャッチ */
	.catch{
		font-size: 18px;
		line-height: 1.6em;
		font-weight: 500;
		color: #ffffff;
	}
	
	.catch br{
		display: none;
	}
	
	#yui .catch{
		color: #403813;
	}
	
	/* ボイス */
	.voiceLink{
		display: block;
		color: #ffffff;
		text-align: center;
		font-size: 16px;
		line-height: 16px;
		font-weight: 600;
		border-radius: 5px;
		text-decoration: none;
		padding: 18px 0;
		margin: 30px 0;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		cursor: pointer;
		position: relative;
		z-index: 1;
	}	
	.voiceLink i{
		position: absolute;
		right: 20px;
		top: 50%;
		margin-top: -8px;
	}
	
	.voiceLink:hover{
		margin: 33px auto -3px;
		box-shadow: 0 0 6px rgba(0,0,0,0.2);
	}	
	#souta .voiceLink{background: #00314e;}
	#akane .voiceLink{background: #400005;}
	#yui .voiceLink{background: #403813;}
	#rui .voiceLink{background: #074123;}
	
	/* インタビューリンク */
	.interviewLink{
		display: block;
		color: #ffffff;
		text-align: center;
		font-size: 16px;
		line-height: 16px;
		font-weight: 600;
		border-radius: 5px;
		text-decoration: none;
		padding: 18px 0;
		margin: 30px 0;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		cursor: pointer;
	}
	
	.interviewLink:hover{
		margin: 33px auto -3px;
		box-shadow: 0 0 6px rgba(0,0,0,0.2);
	}
	
	#souta .interviewLink{
		background: url("../img/character_icon_wh_down.png") right 20px center no-repeat, #00314e;
		background-size: 16px auto, auto;
	}
	
	#akane .interviewLink{
		background: url("../img/character_icon_wh_down.png") right 20px center no-repeat, #400005;
		background-size: 16px auto, auto;
	}
	
	#yui .interviewLink{
		background: url("../img/character_icon_wh_down.png") right 20px center no-repeat, #403813;
		background-size: 16px auto, auto;
	}
	
	#rui .interviewLink{
		background: url("../img/character_icon_wh_down.png") right 20px center no-repeat, #074123;
		background-size: 16px auto, auto;
	}
	
	/* プロフィール */
	#characterInfo{
		box-sizing: border-box;
		padding: 60px 0 0;
		position: relative;
		z-index: 1;
	}
	#akane #characterInfo{background: #e50011;}
	#souta #characterInfo{background: #037fbf;}
	#yui #characterInfo{background: #ffdf52;}
	#rui #characterInfo{background: #16c46c;}
	
	/* ボイスアイコン */
	#akane .voice i{color: #400005;}
	#souta .voice i{color: #00314e;}
	#yui .voice i{color: #403813;}
	#rui .voice i{color: #054123;}
	
	/* プロフィール */
	#yui .name{border-bottom: 1px solid #403813;}
	
	#yui .name,
	#yui .work p,
	#yui .work li,
	#yui .profile span,
	#yui .profile p,
	#yui .cast p{color: #403813;}
	
	#yui .work li span::before{background: #403813;}
	
	#yui .gallery{border-top: 1px solid #403813;}
	
	/* インタビュー */	
	#akane h2{background: url("../img/akane_ttl_icon.png") left top 2px no-repeat; background-size: auto 26px;}
	#akane .ask{color: #e50011;}
	#akane .ask::before{background: #e50011;}
	
	#souta h2{background: url("../img/souta_ttl_icon.png") left top 2px no-repeat; background-size: auto 26px;}
	#souta .ask{color: #037fbf;}
	#souta .ask::before{background: #037fbf;}
	
	#yui h2{background: url("../img/yui_ttl_icon.png") left top 2px no-repeat; background-size: auto 26px;}
	#yui .ask{color: #403813;}
	#yui .ask::before{background: #ffdf52;}
	
	#rui h2{background: url("../img/rui_ttl_icon.png") left top 2px no-repeat; background-size: auto 26px;}
	#rui .ask{color: #074123;}
	#rui .ask::before{background: #074123;}
}

/* SP
-------------------------------------------------- */
@media screen and (max-width:999px){
	main{
		margin-top: 60px;
	}
	
	#mainVisual{
		box-sizing: border-box;
		width: 100%;
		aspect-ratio: 1 / 1.6;
		text-align: center;
		position: relative;
		z-index: 1;
		padding-top: 30px;
	}
	
	#mainVisual::before{
		content: "";
		display: block;
		width: 100%;
		top: 10px;
		left: 0;
		position: absolute;
		z-index: 10;
		aspect-ratio: 1 / 1.5;
	}

	#mainVisual::after{
		content: "";
		box-sizing: border-box;
		width: 100%;
		aspect-ratio: 860 / 400;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 5;
	}
	
	.illust{
		width: 100%;
		aspect-ratio: 150 / 215.5;
		overflow-y: hidden;
		position: absolute;
		top: 25px;
		visibility: visible;
		transition: .5s;
	}
	
	.illust img{
		width: 96%;
	}
	
	.illust.show{opacity: 1;}
	.illust.hide{opacity: 0;}
	
	.illustrator{
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 2;
		font-size: 12px;
		font-weight: 600;
	}
	
	.btnArea{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 10;
	}
	
	/*.btnArea::after{
		content: "";
		display: block;
		width: 100%;
		height: 35px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
	}*/
	
	.btn01,
	.btn02{
		display: flex;
		box-sizing: border-box;
		width: 60px;
		padding: 4%;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1 / 1;
		background: #ffffff;
		border-radius: 50%;
		box-shadow: 0 3px 6px rgba(0,0,0,0.5);
		position: absolute;
		z-index: 10;
		bottom: 10px;
		border: none;
	}
	
	.btn01{right: 100px;}
	.btn02{right: 20px;}
	
	.btn01 img,
	.btn02 img{
		width: 100%;
	}
	
	.charaArea{
		display: none;
	}
	
	.pcFlexR{
		position: relative;
	}
	
	#characterInfo{
		box-sizing: border-box;
		padding: 0 0 40px;
		position: relative;
		z-index: 1;
	}
	
	.data{
		padding: 0 20px;
	}
	
	.name{
		font-size: 50px;
		line-height: 50px;
		font-weight: 600;
		color: #ffffff;
		margin-top: 20px;
		padding-bottom: 30px;
		border-bottom: 1px solid #ffffff;
	}
	
	.name span:nth-child(1){
		display: block;
		font-size: 16px;
		line-height: 16px;
		margin-bottom: 10px;
	}
	
	.name span:nth-child(2){
		display: block;
		font-size: 16px;
		line-height: 16px;
		margin-top: 20px;
	}
	
	.cast{
		margin-top: 30px;
		padding: 0 20px;
	}
	
	.cast p{
		font-size: 18px;
		font-weight: 600;
		color: #ffffff;
	}
	
	.cast p span{
		font-size: 14px;
		padding-right: 10px;
	}
	
	.cast .voice{
		display: flex;
		flex-wrap: wrap;
		padding: 0 20px;
	}
	
	.voice li{
		width: 19%;
		margin-right: 8%;
	}
	
	.voice li:nth-child(4n){
		margin-right: 0;
	}
	
	.voice li button{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		text-align: center;
		border-radius: 50%;
		width: 100%;
		aspect-ratio: 1 / 1;
		font-size: 24px;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		margin: 30px 0 10px;
		border: none;
	}
	
	.voice li button:active{
		margin: 33px 0 7px;
	}
	
	.voice li p{
		text-align: center;
		color: #ffffff;
		font-size: 16px;
		font-weight: normal;
		line-height: 16px;
	}
	
	.work{
		margin-top: 30px;
	}
	
	.work .photo{
		width: 100%;
		text-align: center;
	}
	
	.work .photo img{
		width: 60%;
	}
	
	.work p{
		font-size: 16px;
		font-weight: normal;
		color: #ffffff;
		margin-top: 20px;
	}
	
	.work ul{
		margin-top: 10px;
	}
	
	.work li{
		color: #ffffff;
		font-size: 14px;
		font-weight: normal;
		line-height: 1.8em;
		padding-left: 1em;
		text-indent: -1em;
	}
	
	.work li::before{
		content: "・";
	}
	
	.work li span{
		position: relative;
		z-index: 1;
		padding-left: 20px;
		margin-left: 10px;
		padding-right: 5px;
	}
	
	.work li span::before{
		content: "";
		display: block;
		width: 10px;
		height: 2px;
		background: #ffffff;
		position: absolute;
		left: 0;
		top: 10px;
		margin-top: -1px;
	}
	
	.profile{
		margin-top: 30px;
		padding: 0 20px;
	}
	
	.gallery{
		border-top: 1px solid #ffffff;
	}
	
	#yui .gallery{
		border-top: 1px solid #403813;
	}
	
	.movie{
		width: 100%;
		margin: 30px 0;
		aspect-ratio: 16 / 9;
	}
	
	.movie iframe{
		width: 100%;
		height: 100%;
	}
	
	.slider img{
		width: 100%;
		object-fit: contain;
		margin: auto;
	}
	
	.slick-dotted.slick-slider{
		margin: 0;
	}

	.slick-dots{
		margin-top: 5px;
		position: static;
	}

	.slick-dots li{
		width: 10px;
		height: 10px;
		margin: 0 5px;
	}

	.slick-dots li button{
		width: 10px;
		height: 10px;
		background: #ffffff;
		border-radius: 100%;
	}

	.slick-dots li button:before{
		display: none;
	}

	.slick-active button{
		background: #000000 !important;
	}
	
	#interview{
		width: 95%;
		box-sizing: border-box;
		padding: 20px;
		margin-top: 30px;
		border-radius: 0 10px 10px 0;
		box-shadow: 4px 4px 0 #000000;
		position: relative;
		z-index: 1;
	}
	
	#interview::before{
		content: "";
		background: rgba(255,255,255,0.8);
		border-radius: 0 10px 10px 0;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	h2{
		font-size: 26px;
		line-height: 26px;
		font-weight: 600;
		color: #333333;
		padding-left: 36px;
	}
	
	h2 span{
		display: block;
		font-size: 14px;
		line-height: 14px;
		font-weight: normal;
		margin-top: 5px;
	}
	
	.ask{
		margin-top: 30px;
		font-size: 14px;
		line-height: 1.6em;
		font-weight: 600;
		padding-left: 20px;
		position: relative;
		z-index: 1;
	}
	
	.ask::before{
		content: "";
		display: block;
		width: 12px;
		height: 2px;
		font-weight: 600;
		position: absolute;
		top: 12px;
		left: 0;
		z-index: 2;
	}
	
	.answer{
		margin: 10px 0 30px;
		font-size: 14px;
		line-height: 1.8em;
		font-weight: normal;
		color: #333333;
	}
	
	#interview .movie{
		margin: 0;
	}
	
	.secInner{
		box-sizing: border-box;
		padding: 40px 20px;
	}
	
	.comingsoon{
		font-size: 20px;
		font-weight: 600;
		text-align: center;
		margin-top: 40px;
	}
	
	h3{
		font-size: 16px;
		margin-top: 40px;
		border-bottom: 1px solid #cccccc;
		padding-bottom: 15px;
		margin-bottom: 40px;
	}
	#souta h3{color: #037fbf;}
	#akane h3{color: #e50011;}
	#yui h3{color: #403813;}
	#rui h3{color: #074123;}
	
	.product .slick-dots{
		margin-top: 10px;
	}
	
	.product .slick-dots li button,
	.effect .slick-dots li button,
	.theme .slick-dots li button{
		background: #000000;
	}
	
	#souta .product .slick-active button,
	#souta .effect .slick-active button,
	#souta .theme .slick-active button{
		background: #037fbf !important;
	}
	
	#akane .product .slick-active button,
	#akane .effect .slick-active button,
	#akane .theme .slick-active button{
		background: #e50011 !important;
	}
	
	#yui .product .slick-active button,
	#yui .effect .slick-active button,
	#yui .theme .slick-active button{
		background: #403813 !important;
	}
	
	#rui .product .slick-active button,
	#rui .effect .slick-active button,
	#rui .theme .slick-active button{
		background: #074123 !important;
	}
	
	.slideImg img{
		width: 100%;
	}
	
	.movieLink{
		display: block;
		box-sizing: border-box;
		border: 2px solid #333333;
		border-radius: 5px;
		margin-top: 40px;
		font-size: 14px;
		font-weight: 600;
		color: #333333;
        line-height: 20px;
        text-decoration: none;
        padding: 12px 0;
		background: url("../img/arrow-right_bk.png") center right 20px no-repeat, #ffffff;
		background-size: auto 10px, auto;
		text-align: center;
	}
	
	.contentsImg img{
		width: 100%;
	}
	
	.uncer_d{
		font-size: 14px;
		margin-top: 20px;
	}
	
	.senko{
		box-sizing: border-box;
		border: 2px solid #cccccc;
		margin-top: 30px;
		padding: 20px 10px;		
	}
	
	.senko p{
		font-size: 14px;
	}
	
	.senko p span{
		color: #cc0000;
	}
	
	.senko p:not(:last-child){
		margin-bottom: 15px;
	}
	
	.price{
		font-size: 16px;
		text-align: center;
		color: #cc0000;
		margin-top: 30px;
	}
	
	.itemLink{
		display: block;
		box-sizing: border-box;
		background: url("../img/arrow-right.png") center right 20px no-repeat, #cc0000;
		background-size: auto 10px, auto;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		padding: 15px 0;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		border-radius: 5px;
		text-decoration: none;
		margin-top: 30px;
	}
	
	.itemLink:hover{
		transform: translateY(3px);
		box-shadow: 0 0 6px rgba(0,0,0,0.2);
	}
	
	#character{
		background: #f9f9f9;
	}
	
	#character .secInner{
		padding-bottom: 20px;
	}
	
	#character ul{
		margin-top: 40px;
	}
	
	#character li{
		margin-bottom: 20px;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
	}
	
	#character img{
		width: 100%;
	}
	
	footer{
		margin-top: 0;
	}
	
	/* モーダル
	------------------------------ */
	.modal{
		display: none;
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		box-sizing: border-box;
		height: 100%;
		overflow-y: scroll;
		background-color: rgba(0,0,0,0.5);
		padding: 2vh 3%;
	}

	.modal-content{
		width: 100%;
		animation-name: modalopen;
		animation-duration: 1s;
		overflow-y: scroll;
	}
	
	.modal-content img{
		display: block;
		width: auto;
		height: 95vh;
		margin: 0 auto;
	}

	.modalClose{
		display: block;
		width: 40px;
		font-size: 30px;
		color: #ffffff;
		line-height: 40px;
		text-align: center;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 10;
		background: #000000;
	}

	.modalClose:hover{
		cursor: pointer;
	}
	
	.modal-voice{
		box-sizing: border-box;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		background: #ffffff;
		padding: 20px;
		animation-name: modalopen;
		animation-duration: 1s;
		position: relative;
		z-index: 1;
	}
	
	.voiceClose{
		display: block;
		width: 30px;
		font-size: 24px;
		color: #ffffff;
		line-height: 30px;
		text-align: center;
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 10;
		background: #000000;
		cursor: pointer;
	}
	
	.voiceList li{
		display: flex;
		flex-wrap: wrap;
		padding: 30px 0;
	}
	
	.voiceList li span{
		display: block;
		width: 20%;
	}
	
	.voiceList li p{
		display: block;
		width: 75%;
		margin-left: 5%;
		text-align: left;
	}
	
	.voiceList li audio{
		display: block;
		width: 100%;
		margin-top: 20px;
	}
	
	.voiceList li:not(:last-child){
		border-bottom: 1px solid #cccccc;
	}
}

/* SP個別
-------------------------------------------------- */
@media screen and (max-width:999px){
	/* メインビジュアル＆セリフ */
	#souta #mainVisual{
		background: url("../img/souta_bgi_sp.png") top center no-repeat;
		background-size: contain;
	}
	#souta #mainVisual::before{
		background: url("../img/souta_word_1.png") top 30px left 70px no-repeat, url("../img/souta_word_2.png") top 100px left 20px no-repeat;
		background-size: 40px auto, 40px auto;
	}
	#souta #mainVisual::after{
		background: url("../img/souta_cover.png") bottom center no-repeat;
		background-size: cover;
	}
	#souta .btnArea::after{
		background: #037fbf;
	}
	
	#akane #mainVisual{
		background: url("../img/akane_bgi_sp.png") top center no-repeat;
		background-size: contain;
	}
	#akane #mainVisual::before{
		background: url("../img/akane_word_1.png") top 30px left 70px no-repeat, url("../img/akane_word_2.png") top 100px left 20px no-repeat;
		background-size: 40px auto, 40px auto;
	}
	#akane #mainVisual::after{
		background: url("../img/akane_cover.png") bottom center no-repeat;
		background-size: cover;
	}
	#akane .btnArea::after{
		background: #e50011;
	}
	
	#yui #mainVisual{
		background: url("../img/yui_bgi_sp.png") top center no-repeat;
		background-size: contain;
	}
	#yui #mainVisual::before{
		background: url("../img/yui_word_1.png") top 30px left 70px no-repeat, url("../img/yui_word_2.png") top 100px left 20px no-repeat;
		background-size: 40px auto, 40px auto;
	}
	#yui #mainVisual::after{
		background: url("../img/yui_cover.png") bottom center no-repeat;
		background-size: cover;
	}
	#yui .btnArea::after{
		background: #ffdf52;
	}
	
	#rui #mainVisual{
		background: url("../img/rui_bgi_sp.png") top center no-repeat;
		background-size: contain;
	}
	#rui #mainVisual::before{
		background: url("../img/rui_word_1.png") top 30px left 70px no-repeat, url("../img/rui_word_2.png") top 100px left 20px no-repeat;
		background-size: 40px auto, 40px auto;
	}
	#rui #mainVisual::after{
		background: url("../img/rui_cover.png") bottom center no-repeat;
		background-size: cover;
	}
	#rui .btnArea::after{
		background: #16c46c;
	}
	
	/* プロフィール */
	#souta #characterInfo{background: #037fbf;}
	#akane #characterInfo{background: #e50011;}
	#yui #characterInfo{background: #ffdf52;}
	
	.catch{
		font-size: 16px;
		line-height: 1.6em;
		font-weight: 500;
		color: #ffffff;
	}
	
	#yui .catch{color: #403813;}
	#rui #characterInfo{background: #16c46c;}
	
	/* ボイスアイコン */
	#akane .voice i{color: #400005;}
	#souta .voice i{color: #00314e;}
	#yui .voice i{color: #403813;}
	#rui .voice i{color: #054123;}
	
	/* プロフィール */
	#yui .name{border-bottom: 1px solid #403813;}
	
	#yui .name,
	#yui .work p,
	#yui .work li,
	#yui .profile span,
	#yui .profile p,
	#yui .cast p{color: #403813;}
	
	#yui .work li span::before{background: #403813;}
	
	#yui .profile span{border-top: 1px solid #403813;}
	
	/* ボイス */
	.voiceLink{
		display: block;
		color: #ffffff;
		text-align: center;
		font-size: 16px;
		line-height: 16px;
		font-weight: 600;
		border-radius: 5px;
		text-decoration: none;
		padding: 18px 0;
		margin: 20px 0;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		cursor: pointer;
		position: relative;
		z-index: 1;
	}	
	.voiceLink i{
		position: absolute;
		right: 20px;
		top: 50%;	
		margin-top: -8px;
	}
	#souta .voiceLink{background: #00314e;}
	#akane .voiceLink{background: #400005;}
	#yui .voiceLink{background: #403813;}
	#rui .voiceLink{background: #074123;}
	
	/* インタビュー */
	.interviewLink{
		display: block;
		color: #ffffff;
		text-align: center;
		font-size: 16px;
		line-height: 16px;
		font-weight: 600;
		border-radius: 5px;
		text-decoration: none;
		padding: 18px 0;
		margin: 30px 0;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		cursor: pointer;
	}
	
	#souta .interviewLink{
		background: url("../img/character_icon_wh_down.png") right 20px center no-repeat, #00314e;
		background-size: 16px auto, auto;
	}
	
	#akane .interviewLink{
		background: url("../img/character_icon_wh_down.png") right 20px center no-repeat, #400005;
		background-size: 16px auto, auto;
	}
	
	#yui .interviewLink{
		background: url("../img/character_icon_wh_down.png") right 20px center no-repeat, #403813;
		background-size: 16px auto, auto;
	}
	
	#rui .interviewLink{
		background: url("../img/character_icon_wh_down.png") right 20px center no-repeat, #074123;
		background-size: 16px auto, auto;
	}
	
	#souta h2{background: url("../img/souta_ttl_icon.png") left top 2px no-repeat; background-size: auto 26px;}
	#souta .ask{color: #037fbf;}
	#souta .ask::before{background: #037fbf;}
	
	#akane h2{background: url("../img/akane_ttl_icon.png") left top 2px no-repeat; background-size: auto 26px;}
	#akane .ask{color: #e50011;}
	#akane .ask::before{background: #e50011;}
	
	#yui h2{background: url("../img/yui_ttl_icon.png") left top 2px no-repeat; background-size: auto 26px;}
	#yui .ask{color: #403813;}
	#yui .ask::before{background: #ffdf52;}
	
	#rui h2{background: url("../img/rui_ttl_icon.png") left top 2px no-repeat; background-size: auto 26px;}
	#rui .ask{color: #074123;}
	#rui .ask::before{background: #074123;}
	
	#souta #interview{
		background: url("../img/souta_aoba.png") top 20px right 10px no-repeat, #ffffff;
		background-size: 60% auto, auto;
	}
	
	#akane #interview{
		background: url("../img/akane_harusaki.png") top 20px right 10px no-repeat, #ffffff;
		background-size: 60% auto, auto;
	}
	
	#yui #interview{
		background: url("../img/yui_takanashi.png") top 20px right 10px no-repeat, #ffffff;
		background-size: 60% auto, auto;
	}
	
	#rui #interview{
		background: url("../img/rui_kakyoin.png") top 20px right 10px no-repeat, #ffffff;
		background-size: 60% auto, auto;
	}
}

@keyframes modalopen{
	from {opacity: 0}
	to {opacity: 1}
}