@charset "utf-8";

/*リンク処理*/
.nolink{
	text-decoration:line-through;
	cursor:default;
}

/*スマホメニュー*/

#sp_menu{
	width:52px;
	height:55px;
	display:none;
	position:fixed;
	top:0;
	left:15px;
	background-color:#f2308b;
	cursor:pointer;
	z-index:100;/**/
}

/*3本ライン*/
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 40%;
  width: 24px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #FFF;
  transition: .2s;
}

#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 2px;
  background: #FFF;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -8px;
}
#panel-btn-icon:after{
  margin-top: 6px;
}

#sp_menu .close{
  background: transparent;
}
#sp_menu .close:before, #sp_menu .close:after{
  margin-top: 0;
}
#sp_menu .close:before{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#sp_menu .close:after{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
/*****panel******/

.panel{
	position:fixed;
	background-color:#ff5b79;/*ie8*/
    background: linear-gradient(#ff617e,#ffbfc0);
	opacity:0.65;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
	z-index:5;/**/
}

.panel_inner,.l-nav{
	height:100%;
	}

.panel_inner ul{
	height:100%;
	margin-top:60px;
	padding-left:15px;
	padding-right:15px;
	clear:both;	
}

.nav_item{
	width:100%;/*レス変更*/
	float:none;/*レス変更*/
	min-height:45px;
	margin-bottom:2%;
	font-size:16px;
	text-align:center;
	line-height: 45px;
}

.nav_item a{
	position:relative;
	display:block;
	color:#FFF;
	height:100%;
	font-weight:bold;
	border-bottom:1px solid #FFF;
}

.nav_item a:after{ 
	content: ""; 
	position: absolute;
	top: 41%;
	right:5%;
	display: block; 
	width: 7px; 
	height: 7px; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/****ヘッダーとメインビジュアル*****/

/*メインビジュアル*/
#mainvisual{
	width:100%;
	max-height:807px;
	max-height:auto;
	background-color:#FFF;
	margin-top:0px;/*レス変更*/
}

#mainvisual > img{
	display:block;
	margin:0 auto;
	max-width: 100%;
}


/****コンセプトバー*****/
#conceptbar{
	width:100%;
	border:3px solid #FFF;
	height:145px;/*レス変更 140px*/
	background-image: linear-gradient(to right, rgba(255,255,255,0.85) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,1) 100%),url(../img/voice/shiina_voice.jpg);
	background-position:center center;
	background-size:cover;
	box-sizing:border-box;
	/*background-color:#fff;
	background-image:url(../img/catch_bg.png);
	/*background-color: rgba(255,255,255,1);*/
	margin-bottom:40px;/*level1 : 20px =>40pxに変更 レス変更*/
}

#conceptbar_container{
	width:100%;
	height:100%;
	margin: 0 auto;
	padding-top:14px;/*レス変更*/
	padding-bottom:12px;/*レス変更*/
	padding-left:10px;/*レス変更*/
	padding-right:10px;/*レス変更*/
	box-sizing:border-box;/*追加*/
}

.small{
	font-size:.45em;
}

#conceptbar_container> h3{
	max-height:52px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:10px;/*5px*/
	text-align:center;
	font-size:1.75rem;/*レス変更*/
	color:#FFF;
}

#conceptbar_container img{
	max-width: 100%;
}

#conceptbar_container > a{
	width:50%;/*変更*/
	height:40px;
	position:relative;
	display:block;
	margin:0 auto;
	font-size:18px;/*レス変更*/
	line-height:40px;
	text-align:center;
	border-radius:3px;
	color:#FFF;
	font-weight:bold;
	/*
	background-color:#f24093;
	background: linear-gradient(135deg,#ea6ea4 0%,#f24093 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6ea4', endColorstr='#f24093',GradientType=1 );
	*/
	background: #ff75bc; /* Old browsers */
	background: -moz-linear-gradient(top, #ff75bc 0%, #f74493 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ff75bc 0%,#f74493 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ff75bc 0%,#f74493 100%);
	border:1px solid #f74493;
}

#conceptbar_container > a:hover{
	/*text-decoration:underline;*/
	opacity:0.95;
	background: #f74493; /* Old browsers */
	background: -moz-linear-gradient(top, #f74493 0%, #ff75bc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f74493 0%,#ff75bc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f74493 0%,#ff75bc 100%); 
	cursor:pointer;
}

#conceptbar_container h3 >img{
	max-width: 60%;/*50%*/
}

#conceptbar_container a:after{ 
	content: ""; 
	position: absolute;
	top: 38%;
	right:5%;
	display: block; 
	width: 7px; 
	height: 7px; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#audio,#audioPause{
	width:62%;/*変更*/
	height:53px;
	padding-top:3px;/*レス変更*/
	position:relative;
	display:block;
	margin:0 auto;
	font-size:33px;/*レス変更*/
	line-height:45px;
	text-align:center;
	border-radius:3px;
	color:#FFF;
	font-weight:bold;
	cursor:pointer;
	border:2px solid #FFF;
	opacity:1;

	background-image:url(../img/voice.png);
	background-position:right;
	background-size:cover;
	
	text-shadow: 0px 0px 1px #D7D7D7 , 0px 0px 1px #D7D7D7;/*光沢*/
	box-sizing:border-box;
	transition: all .3s;
}

#audio:hover{
	background-color:rgba(255,255,255,.7);
}
#audioPause:hover{
	background-color:rgba(255,198,0,.7);
}
#audio:active,#audioPause:active{
	top:3px;	
}

/****バナーページ*****/

#main{
	width:100%;
	height:auto;

	margin:0 auto;
	position:relative;
	margin-bottom:20px;/*レス変更*/
	padding-left:15px;/*レス変更*/
	padding-right:15px;/*レス変更*/
	box-sizing:border-box;/*追加*/
}

/**横バナー**/
#big_banar{
	widht:100%;
	height:auto;
	margin-bottom:10px;
}

.baner img{
	max-width: 100%;
	border-radius:3px;
}

#big_banar a:hover{
	opacity:.8;
}

#big_banar2,#big_banar3,#big_banar4{
	widht:100%;
	height:auto;
	margin-bottom:10px;
}

#big_banar2 img,#big_banar3 img,#big_banar4 img{
	border-radius:3px;
}
#big_banar2 a:hover,#big_banar3 a:hover,#big_banar4 a:hover{
	opacity:.8;
}
/**ボックスバナー**/

#banar_box{
	width:100%;
}

#banar_box:after{
	content:"";
	display:block;
	clear:both;	
}

#baner_A{
	width:50%;/*レス変更*/
	padding-right:5px;
	float:left;
	display:block;
	box-sizing:border-box;
	border-radius:3px;
}

#baner_B{
	width:50%;/*レス変更*/
	/*margin-left: 1%;*/
	padding-left:5px;
	float:left;
	display:block;
	box-sizing:border-box;
	border-radius:3px;
}

#banar_box >  img{
	max-width: 100%;
}
#baner_A a:hover, #baner_B a:hover{
	opacity:.8;
}

#baner_A img,#baner_B img{
	border-radius:3px;
}

/****インフォメーション****/
#infomation{
	width:100%;
	margin:0 auto 40px auto;
	padding-left:15px;/*レス変更*/
	padding-right:15px;/*レス変更*/
	padding-bottom:5px;/*レス変更*/
	box-sizing:border-box;/*追加*/
}

#box_info{
	width:100%;
	background-color:#FFF;
	border-radius:3px;
}

#box_info:after{
	content:"";
	display:block;
	clear:both;	
}

#news{
	width:66.25%;/*レス変更*/
	height:407px;
	float:left;
	padding-left:15px;/*レス変更*/
	box-sizing:border-box;/*追加*/
}

.infor_caption{
	height:40px;/*重要*/
	font-size:18px;
	font-size:1.125rem;
	line-height:45px;
	letter-spacing:0.2em;/*レス変更*/
}

#news ul{
	width:100%;
	height:362px;
	border-top:1px solid rgba(15,70,100,.12);
	overflow:auto;
	padding-right:15px;/*レス変更*/
	
}

#news li{
	width:100%;
	height:120px;
	padding:10px 10px 0px 0px;
	border-bottom:1px dotted #000000;
	overflow:hidden;
	box-sizing:border-box;/*追加*/
}
#news li:last-child{
	border-bottom:none;
}
#news li:after{
	content:"";
	display:block;
	clear:both;	
}

#news li img{
	float:left;
	width:100px;
	border-radius:2px;
}

.newstext{
	float:none;
	width:auto;
	margin-left:100px;/*imgの幅と同じ*/
	padding-left:15px;
	font-size:13px;
	line-height: 150%;
}

.newstext p > time, .newstext  nobr > time{
	font-size:12px;
	font-weight:bold;/*追加*/
}

.list_new{
	color:#ff4c6d; /*ff607d*/
	font-size:0.6875rem;
	font-weight:bold;/*追加*/
}

.newstext a{
	text-decoration:underline;
	color:#0080c0;
}

.newstext a:hover{
	color:#FF5659;
}

.morebtn_Area{
	height:65px !important;
	padding-right:5px !important;
	padding-left:5px !important;
}
.more_btn{
	display:block;
	padding:0.8rem;
	background-color:#FFB7B8;
	text-align:center;
	font-size:0.8124rem;
	color:#FFF;
	border-radius:3px;
}
.more_btn:hover{
	background-color:#ff8097;
}
/**twitter**/
#twitter{
	float:right;
	width:31.979%;/*レス変更*/
	height:407px;
	box-sizing:border-box;/*追加*/
}

#twitter > h4{
	padding-left:15px;
	letter-spacing:0em;/*レス変更*/
	color:#55acee;
}

#twitter_area{
	width:100%;/*レス変更*/
	margin:0 auto;
	max-height:362px;/*407-40*/
}


/****スペック****/

#spec{
	width:100%;
	margin:0 auto 0px auto;
	margin-bottom:30px;/*レス変更*/
	padding-left:15px;/*レス変更*/
	padding-right:15px;/*レス変更*/
	box-sizing:border-box;/*追加*/
}

.caption{
	height:40px;
	margin-bottom:15px;/*レス変更*/
	border-bottom:2px solid #ff8da6;
}

#table{
	width:100%;
	margin-top:30px;/*レス変更*/
	display:table;
}

#boxA, #boxB, #boxC{
	width:100%;/*レス変更*/
	position:relative;
	font-size:12px;
	font-size:0.75rem;
	/*background-color:#989898;*/
}

#spec h4{
	width:100px;/*レス変更*/
	height:22px;
	margin-left:15px;/*レス変更*/
	font-size:14px;
	font-size:0.875rem;
	font-weight:normal;
	text-align:center;
	line-height: 22px;
	border:1px solid #ff607d;
	border-radius:3px;
}

.toggle{
		width:100%;
		height:34px;
		display:none;/*レス変更*/
		outline:none;
		position:relative;
		font-weight:normal;
		text-align:left;
		line-height: 34px;
		border:none;
		color:#FFF;
		background-color:#ff8097;
		border-radius:3px;
}

.toggle:after{ 
	content: ""; 
	position: absolute;
	top: 32%;
	right:4%;
	display: block; 
	width: 7px; 
	height: 7px; 
	border-top: 2px solid #FFF; 
	border-right: 2px solid #FFF; 
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.active:after{
	top: 45%;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#boxA ul, #boxB ul{
	margin-top:15px;
	padding-left:15px;/*レス変更*/
}

#boxA ul > li, #boxB ul > li{
	padding-bottom:5px;
}

#boxC img{
	position:absolute;
	bottom:0px;
	max-width:100%;
}

/***フッター***/
footer{
	width:100%;
	background-color:rgba(255,255,255,0.85);
}

#sp_footernav{
	width:100%;
	padding-top:15px;
	padding-left:15px;/*レス変更*/
	padding-right:15px;/*レス変更*/
	padding-bottom:10px;
	box-sizing:border-box;/*追加*/

	display:none;
}

#sp_footernav li{
	width:100%;
	height:30px;
	border-bottom:1px solid #E9E9E9;
}

#sp_footernav li > a{
	display:block;
	position:relative;
	text-align:center;
	line-height: 30px;
	font-size:12px;
	color:#999999;
}

#sp_footernav li  > a:after{ 
	content: ""; 
	position: absolute;
	top: 41%;
	right:4%;
	display: block; 
	width: 5px; 
	height: 5px; 
	border-top: 1px solid #E9E9E9; 
	border-right: 1px solid #E9E9E9; 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#copyright{
	width:100%;
	height:22px;
	background-color:#FFF;
}

#copyright > p{
	margin: 0 auto;
	line-height: 22px;
	color:#C7C7C7;
	font-size:11px;
	font-size:0.6875rem;
	letter-spacing:0.1rem;
	text-align:center
}