@charset "UTF-8";
/*
	Title	   : ドラマ「潤一」公式サイト
	URI            : junichi
	Designer       : GRAPHNETWORK
	Designer's URI : http://graphnetwork.com/
*/

/* --------------------------------------------------------------


							 Layout


-----------------------------------------------------------------*/
p {
	font-size: 16px;
	line-height: 1.8;
}

a:link {
	color: #fff;
}

.img_full {
	width: 100%;
}

@media screen and (max-width:960px) {
	p {
		font-size: 14px;
		line-height: 1.6;
	}	
	.img_size {
		width: 70%;
	}
	.sp_img {
		width: 100%
	}
	.vw_size {
		width: 50%;
	}
}
a:hover img{
	opacity: 0.8;
}
#wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 100%;
	background: #05061f;
}
#main {
	width: auto;
	height: 100%;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-background-size: 100%;
}
#mainvisual {
	width: 100%;
	height: 1024px;
	background: url(../img/top/img_kv.jpg) no-repeat top;
	background-size: cover;
}
#mainvisual .mv {
    width: 100%;
    height: 100%;
	display: block;
	object-fit: cover;
}
#mainvisual .mv_txt_area {
	height: 900px;
	position: relative;
	top: 60px;
}
#mainvisual .wrap_mv_txt_area {
	width: 960px;
	margin: auto;
	display: block;
}
#mainvisual .bnr_ticket {
	position: relative;
	left: 14px;
}
#mainvisual .bnr_ticket img {
    width: 320px;
}
@media screen and (max-width:960px) {
    .bnr_ticket img {
        width: 94%;
        margin: auto;
    }
	#mainvisual .mv {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover
	}
	#mainvisual h1 img {
		position: absolute;
		width: 36vw;
		top: 220px;
		left: 26px;
	}
	
}
/*#main .contents .video_service {
	background: #a18369;
	padding: 40px 0;
}*/
#main .contents .video_service {
	background: #a18369;
	padding: 20px 0;
}
/*#main .contents .video_service .service {
	width: 960px;
	margin: auto;
}*/
#main .contents .video_service .service {
	/*width: 240px;*/
	margin: auto;
}
#main .contents .video_service .wrap{
	display:flex;
	margin: 0 auto 1px auto;
}
#main .contents .video_service .box{
	margin-right: 1px;
	height: 48px;
}
#main .contents .service {
	text-align: center;
}
#main .contents .storm_start {
	font-size: 14px;
	text-align: center;
}
@media screen and (max-width:960px) {
	#main .contents .video_service {
		background: #a18369;
		padding: 0;
}
	#main .contents .video_service .service {
		width: 100%;
		margin: auto;
		padding: 10px 0;
	}
	/*#main .contents .video_service .wrap{
		display: flex;
		flex-wrap: wrap;
		flex-flow: row wrap;
		justify-content: flex-start;
	}*/
	#main .contents .video_service .wrap{
		display: flex;
		flex-wrap: wrap;
		flex-flow: row wrap;
		justify-content: flex-start;
		width: 250px;
	}
	#main .contents .video_service .box{
		margin: 3px;
		/*width: 31%;*/
	}
	#main .contents p.storm_start {
	font-size: 14px;
	text-align: center;
		padding: 0;
}	
}
@media screen and (max-width:960px){
	#main .sp_contents {
		padding: 0 20px;
		background: #05061f;
	}
}

#main #sns {
	width: 960px;
	margin: 0 auto 60px auto;
	padding: 50px 0;
}
#main #sns .wrap{
	display:flex;
}
#main #sns .box_twitter{
	width: 50%;
	margin-right: 4%;
}
#main #sns .box_insta{
	width: 50%;
	margin-left: 4%;
}
#main #sns .wrap_insta_widget{
	pointer-events: none;
}
.insta_link_cover{
	display: block;
	width: 430px;
	height: 560px;
	position: absolute;
}
@media screen and (max-width:960px){
	#main #sns {
		width: 100%;
		margin: 0 auto 60px auto;
		padding: 50px 0;
	}
	#main #sns .box_insta{
		width: 100%;
		margin: 0 10px;
	}
	#main #sns .inner {
		margin-bottom: 60px;
	}
	#main #sns .wrap_insta_widget{
		pointer-events: none;
	}
	.insta_link_cover{
		display: block;
		width: 320px;
		height: 230px;
		position: absolute;
	}
}

.contents_ttl {
	margin-bottom: 40px;
	text-align: center;
}
@media screen and (max-width:960px){
	.contents_ttl {
		margin-bottom: 20px;
		text-align: center;
	}
	.ttl_news{
		width: 38vw;
	}
	.ttl_insta{
		width: 50vw;
	}
	.ttl_onair {
		width: 50vw;
	}
	.ttl_intro {
		width: 65vw;
	}
	.ttl_story {
		width: 40vw;
	}
	.ttl_cast {
		width: 40vw;
	}
	.ttl_staff {
		width: 40vw;
	}
	#mainvisual {
	width: 100%;
	height:auto;
	background: none;
}
}
#main #on_air {
	margin: 0 auto 60px auto;
	padding: 50px 0;
	text-align: center;
}
#main #on_air .start_wrap{
	display:flex;
	width: 960px;
	margin: auto;
}
#main #on_air .onair_read {
	margin-bottom: 20px;
}
#main #on_air .start_box{
	width: 45%;
	margin: 0.5%;
	padding: 2%;
	background-color: #17182f;
}
#main #on_air .tv_txt_start {
	margin-bottom: 10px;
}
#main #on_air .tv_wrap{
	display:flex;
	margin: auto;
}
#main #on_air .tv_box{
	text-align: left;
}
#main #on_air .tv_txt {
	margin-left: 20px;
}
#main #on_air .storm h3 {
	margin: 40px 0 20px 0;
}
/*#main #on_air .storm .storm_wrap{
	display:flex;
	width: 960px;
	margin: auto;
}*/
#main #on_air .storm .storm_wrap{
	display:flex;
	width: 960px;
	margin: auto;
    flex-wrap: wrap;
}
#main #on_air .storm a{
    font-size: 12px;
}
/*#main #on_air .storm .storm_box{
	margin: 0.5%;
	padding: 2%;
	background: #17182f;
	text-align: left
}*/
#main #on_air .storm .storm_box {
	margin: 1%;
	padding: 2%;
	background: #17182f;
	text-align: left;
    width: 14%;
    font-size: 11px;
    line-height: 1.6em;
}
#main #on_air .storm .storm_box img {
	width: 100%;
}
#main #on_air .storm .storm_box a{
        font-size: 12px;
	}

@media screen and (max-width:960px) {
    #main #on_air .storm .storm_box img {
	width: 70px;
    }
	#main #on_air {
		margin: 0 auto 60px auto;
		padding: 0;
		text-align: center;
	}
	#main #on_air .start_wrap{
		display:inline-block;
		width: 100%;
		margin-bottom: 10px;
	}
	#main #on_air .start_box{
		width: 90%;
		margin: 0;
		padding: 5%;
		background-color: #17182f;
	}
	#main #on_air .start_box_top{
		width: 90%;
		margin: 0 0 10px 0;
		padding: 5%;
		background-color: #17182f;
	}
	#main #on_air .tv_wrap{
		display:flex;
		margin: auto;
	}
	#main #on_air .tv_box{
		text-align: left;
	}
	#main #on_air .tv_box img{
		width: 80%;
	}
	#main #on_air .tv_txt {
		margin-left: 0;
		width: 50%;
	}
	#main #on_air .storm h3 {
		margin-bottom: 20px;
	}
	#main #on_air .storm .storm_wrap{
		display:flex;
		flex-wrap: wrap;
		width: 100%;
		margin: auto;
	}
	#main #on_air .storm .storm_box{
		margin: 2%;
		padding: 2%;
		background: #17182f;
		text-align: left;
		width: 25%;
	}	
    #main #on_air .storm .storm_box a{
        font-size: 10px;
	}
    /*#main #on_air .storm  img {
		width: 60%;
	}*/
	#main #on_air .storm .storm_box img {
		width: 100%;
	}
    #main #on_air .storm .storm_box p {
        padding-top: 0;
        padding-bottom: 0;
    }
    .ttl_storm {
    width: 100px !important;
}
}
#main #intro {
	background: url(../img/top/img_intro_bg.jpg) no-repeat center center;
	padding: 80px 0;
	text-align: center;
	width: 100%;
	background-size: cover;
	margin-bottom: 80px;
}
#main #intro h3 {
	margin-bottom: 10px;
}
#main #intro h3 img {
	width: 50vw;
}
@media screen and (max-width:960px) {
	#main #intro {
		background: url("../img/top/sp_img_intro_bg.jpg") no-repeat;
		padding: 80px 0;
		text-align: center;
		margin-bottom: 20px;
	}
	#main #intro h3 {
		margin-bottom: 20px;
	}
	#main #intro h3 img {
		width: 90%;
	}
	#main #intro .intoro_txt {
		margin: 0 20px;
	}
}

#main #story {
	padding: 80px 0;
	width: 960px;
	margin: auto;
	text-align: center;
}
#main #story .story_txt {
	width: 860px;
	margin: auto;
	text-align: left;
}
#main #story .story_ttl,
#main #story .story_ttl_one,
#main #story .story_ttl_three{
	margin: 20px 0 14px 0;
}
#main #story .story_ttl img {
	width: 4vw;
	text-align: center;
}
#main #story .story_ttl_one img {
	width: 3.5vw;
	text-align: center;
}
#main #story .story_ttl_three img {
	width: 6vw;
	text-align: center;
}
.swiper-button-next, .swiper-button-prev {
    top: 39% !important;
}
#main #story .short_story {
	margin-bottom: 20px;
}
@media screen and (max-width:960px) {
	#main #story {
		padding: 80px 0 0 0;
		width: 100%;
		margin: auto;
		text-align: center;
}
	#main #story .story_txt {
		width: 100%;
		margin: auto;
		text-align: left;
	}
	.swiper-button-next, .swiper-button-prev {
		top: 25% !important;
	}
	#main #story .story_ttl,
	#main #story .story_ttl_one,
	#main #story .story_ttl_three{
		margin: 0
	}
	#main #story .story_ttl img {
		width: 13vw;
		text-align: center;
	}
	#main #story .story_ttl_one img {
		width: 10vw;
		text-align: center;
	}
	#main #story .story_ttl_three img {
		width: 18vw;
		text-align: center;
	}
}

#main #cast ,
#main #staff {
	padding: 40px 0;
	width: 960px;
	margin: auto;
}
#main #cast .main_cast_wrap,
#main #cast .cast_wrap{
	display:flex;
}
#main #cast .main_cast_box ,
#main #cast .cast_box ,
#main #staff .main_cast_box {
	margin: 3%;
}

#main #cast .main_cast_name ,
#main #staff .cast_name {
	border-bottom: 1px solid #28293f;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

#main #cast .cast_name ,
#main #staff .cast_name {
	border-bottom: 1px solid #28293f;
	margin: 10px 0 16px 0;
	padding-bottom: 16px;
}
#main #cast .main_cast_name .name_junichi{
	width: 21vw;
}
#main #staff .cast_name .kawamura {
	width: 14vw;
}
#main #cast .wiki,
#main #staff .wiki{
	color: #aaaaaa;
	font-size: 0.9em;
	margin: 20px 0;
}
#main #cast .cast_btn {
	text-align: right;
}
#main #staff .cast_wrap{
	display:flex;
}
#main #staff .cast_box{
	margin: 2%;
	width: 23%;
}
#main #staff .cast_box_first{
	margin: 2% 2% 2% 0;
	width: 23%;
}
#main #staff .cast_box_last{
	margin: 2% 0 2% 2%;
	width: 23%;
}
/*#main #staff .staff_comment {
	height: 460px;
}*/
#main #staff .another_staff {
	margin-top: 60px;
	text-align: center;
}

@media screen and (max-width:960px) {
	#main #cast ,
	#main #staff {
		padding: 80px 0 0 0;
		width: 100%;
		margin: auto;
	}
	#main #cast .main_cast_wrap{
		display: inline-block;
	}
	#main #cast .cast_wrap{
		display: flex;
	}
	#main #cast .main_cast_box ,
	#main #staff .main_cast_box {
		margin: 3% 0 6% 0;
	}
	#main #cast .cast_box_left ,
	#main #staff .cast_box_left{
		margin-right: 4%;
		width: 48%
	}
	#main #cast .cast_box ,
	#main #staff .cast_box{
		margin: 0;
		width: 48%
	}
	#main #cast .main_cast_name ,
	#main #staff .cast_name {
		border-bottom: 1px solid #28293f;
		margin: 20px 0 10px 0;
		padding-bottom: 20px;
	}
/*	#main #cast .main_cast_name .name_junichi {
		width: 200vw;
	}*/
	#main #cast .cast_name ,
	#main #staff .cast_name {
		border-bottom: 1px solid #28293f;
		margin: 14px 0 6px 0;
		padding-bottom: 16px;
	}
	#main #cast .cast_name .eiko{
		width: 28vw;
	}
	#main #cast .cast_name .tamaki{
		width: 25vw;
	}
	#main #cast .cast_name .ayuko{
		width: 42vw;
	}
	#main #cast .cast_name .chihiro{
		width: 34.5vw;
	}
	#main #cast .cast_name .rui{
		width: 33vw;
	}
	#main #cast .cast_name .mika{
		width: 31.5vw;
	}
	#main #cast .main_cast_name .name_junichi{
	width: 74vw;
	}
	#main #cast .wiki,
	#main #staff .wiki{
		color: #aaaaaa;
		font-size: 0.9em;
		margin: 0;
	}
	#main #cast .cast_btn {
		text-align: center;
	}
	#main #staff .cast_wrap{
		display:flex;
		margin-bottom: 20px;
	}
	#main #staff .cast_box{
		margin: 0;
	}
	#main #staff .staff_comment {
		height: auto;
		/*margin-bottom: 14px;*/
	}
	#main #staff .another_staff {
		margin: 60px 0;
		text-align: center;
	}
	
}

#main #movie {
	padding: 40px 0;
	width: 960px;
	margin: auto;
}
#main #movie .video_wrap{
	display:flex;
}
#main #movie .video_box{
	width: 48%;
	margin: 1%;
}
#main #movie .youtube {
	margin: auto;
}
@media screen and (max-width:960px) {
	#main #movie {
	padding: 60px 0 0 0;
	width: 100%;
	margin: auto;
	}
	#main #movie .video_wrap{
	display:block;
	}
	#main #movie .video_box{
	width: auto;
	margin: auto;
	}
	#main #movie .youtube {
	margin: auto;
	}
}
.bnr_area {
    width: 960px;
    margin: 40px auto;

}
@media screen and (max-width:960px) {
	.bnr_area {
		text-align: center;
        margin: auto;
        padding-top: 20px;
        width: 100%;
	}
}
/* --------------------------------------------------------------


						モーダル


-----------------------------------------------------------------*/
/* ContentsArea
-------------------------- */
#contents {
    margin: 0 auto;
    padding: 10px 0 50px 0;
    width: 100%;
}
 
/*p {
    padding: 10px 0;
}*/
 
#modal {
  overflow-y: auto;
  max-height: 90%;
}
.modal_btn {
	text-align: center;
}
.modal_btn_junichi img {
	width: auto;
}
/*.modal_btn img {
	width: 100%;
}*/
.modal_btn_pc {
	text-align: right;
}
.modal_btn_pc img {
	width: auto;
}

#open01,
#open02,
#open03,
#open04,
#open05 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
}
 
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}
 
.modal_window {
    top: 20%;
    left: 36%;
    margin: -150px 0 0 -200px;
    width: 50vw;
    height: auto;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;
    color: #333;
    padding: 60px;
    text-align: left;
}

.modal_window a {
	color: #333;
}
 
.modal_window h2 {
    margin-bottom: 20px;
    width: 400px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    background: #000;
}
 
.modal_window p {
    padding: 0 15px 15px 15px;
    font-size: 12px;
    line-height: 160%;
    text-align: left;
}
 
.staff_comment_name {
	padding: 0 !important;
	margin-bottom: 20px;
	}
	.staff_comment_name .kitahara {
		width: 18vw;
	}
	.staff_comment_name .hirose {
		width: 22vw;
	}
	.staff_comment_name .kawamura {
		width: 26vw;
	}
	.staff_comment_name .sunada {
		width: 16vw;
	}
	.staff_comment_name .junichi {
		width: 18vw;
	}
/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}
 
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
}

@media screen and (max-width:960px){
	#contents {
    margin: 0 auto;
    padding: 10px 0 50px 0;
    width: 100%;
}
 
p {
    padding: 10px 0;
}
 
#open01,
#open02,
#open03,
#open04,
#open05{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
}
 
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
	overflow-y: auto;
  max-height: 90%;
}
 
.modal_window {
    top: 0;
    left: 0;
    margin: auto;
    width: 80%;
    height: auto;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;
    color: #333;
    padding: 40px;
    text-align: left;
	overflow-y: auto;
	max-height: 90%;
}

	.modal_btn img {
		width: 100%;
	}
.modal_window a {
	color: #333;
}
 
.modal_window h2 {
    margin-bottom: 20px;
    width: 400px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    background: #000;
}

.modal_window p {
    padding: 0 15px 15px 15px;
    font-size: 12px;
    line-height: 160%;
    text-align: left;
}
	.staff_comment_name {
	padding: 0 !important;
	margin-bottom: 20px;
	}
	.staff_comment_name .kitahara {
		width: 50vw;
	}
	.staff_comment_name .hirose {
		width: 60vw;
	}
	.staff_comment_name .kawamura {
		width: 70vw;
	}
	.staff_comment_name .sunada {
		width: 50vw;
	}
	.staff_comment_name .junichi {
		width: 50vw;
	}
/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}
 
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
}
}