@charset "utf-8";

/*++++++++++++++++++++++++++++++++++++++++++
SAX user_sax_portal.css
CSS Document

リンク
全体
ヘッダー
グローバルナビ
メイン
テーブル関係　追加
各コンテンツ右端コラム


+++++++++++++++++++++++++++++++++++++++++++*/

* {
	margin: 0;
	padding: 0;
}

img {
	border: 0;
}

html{
	overflow-y:scroll;
}

body {
	margin: 0px;
	text-align: center;
	font-size: small;
	background-color: #FFFFFF;
	font-family: 'Lucida Grande','helvetica', 
	YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', 	
	'ヒラギノ角ゴ Pro W3','arial', sans-serif;
	line-height: 1.4;
}

p,h1,h2,h3,h4,h5,ul,li,ol,dl,dt,dd {
	padding:0;
	margin:0;
}

/*++++++++++++++++++++++++++++++++++++++++++
リンク
+++++++++++++++++++++++++++++++++++++++++++*/

a:link {
	color: #878573;
}

a,a:visited {
	color:#878573;
	text-decoration:none;
}

a:hover {
	color: #FF9900;
	text-decoration: none;
}

a img {
		border:none;
	    -webkit-transition: 0.4s ease-in-out;
	       -moz-transition: 0.4s ease-in-out;
	         -o-transition: 0.4s ease-in-out;
	            transition: 0.4s ease-in-out;
}

a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.clear{
	clear:both;
}

.clear hr{
	display:none;
}

/*++++++++++++++++++++++++++++++++++++++++++
全体
+++++++++++++++++++++++++++++++++++++++++++*/

#wrapper{
	text-align: center;
	width: 100%;
	margin: auto;
}

/*++++++++++++++++++++++++++++++++++++++++++
ヘッダー
+++++++++++++++++++++++++++++++++++++++++++*/

#header{
	text-align: right;
	width: 100%;
	margin: 0 auto;
	max-width:1200px;
	height: 130px;
	background-color: #FFF;	
}

#header ul{
	padding: 6px 0px 0px 0px;
}


#header li{
	display:inline;
	padding:0px 25px 0px 8px;
	white-space:nowrap;
	font-weight:bold;
	font-size:11px;
}

#head_left{
	float: left;
	width: 400px;
	padding: 6px 2px 0px 0px;
}

#head_right{
	float: right;
	width: 45%;
	max-width: 540px;
	font-align: left;
}

#head_right li{
	display:inline;
	padding:0px 5px 0px 5px;
	white-space:nowrap;
	font-weight:bold;
	font-size:11px;
}


/*++++++++++++++++++++++++++++++++++++++++++
グローバルナビ
+++++++++++++++++++++++++++++++++++++++++++*/

#grobal_navi{
	margin-top: 0px; margin-left: 0px;
	float: left;
	width:100%;
	text-align: left;
}

#grobal_navi .main_navi{
	color: #585757;
	font-family: 'impact', 'arial-black', sans-serif;
}

#grobal_navi .main_navi ul li{
	font-size: 24px;
	margin: 0;
	border-left: none;
}

#header #grobal_navi .main_navi li img{
	height:35px;
}

#navi{
	background: url(../images/user_navi_bg_sax.gif);
	background-repeat: repeat-x;
	text-align: justify;
	padding: 0;
	height: 40px;
	margin-top: 0;
	margin-bottom: 5px;
	padding-top:6px;
	width: 100%;
	z-index:11111;
}

#navi a{
	color: #c2b281;
	font-size: 16px;
	font-weight: bold;
	margin-left: 20px;
	text-decoration:none;
}

#navi a:hover{
	color: #E4DAC3;
	font-size: 16px;
	font-weight: bold;
	margin-left: 20px;
	text-decoration: none;
}

#main-gnavi #navi #menu_kiji {
	margin: 0px auto;
	width: 100%;
	max-width: 1200px;
}

#menu_kiji li{
	display: inline-block;
	padding: 0px 1px 0px 1px;
}	

#top_mainspace{	
	margin-bottom: 20px;
}

/*++++++++++++++++++++++++++++++++++++++++++
メイン
+++++++++++++++++++++++++++++++++++++++++++*/


#top_flash{
	text-align: justify;
	margin: 0px;
    width: 768px;
	background: #111;
}

#main #main_left{
	background: #ffffff;
	float: left;
	width: 70%;
	margin-left: 6%;
	text-align: justify;
}

/* clear fix */
#main #main_left .clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#main #main_left .clearfix {
	display: inline-table;
	min-height: 1%;
}

/*--- 各コンテンツの包括ボックス ---*/
#main_left #content_wrapper{
	width: 100%;
	float: left;
}

/*--- ライン細 ---*/
#main_left #hr_nalow{
	height: 2px;
	margin-top: 10px;
	border-style: solid;
	border-color: #000000;
}

/*--- ライン極細 ---*/
#main_left #hr_thin{
	height: 1px;
	margin-top: 10px;
	border-style: solid;
	border-color: #888888;
}

/*--- ライン太 ---*/
#main_left #hr_bold{
	height: 5px;
	margin-top: 10px;
	border-style: solid;
	border-color: #000000;
}




.wfull{
	width:100%;
	float:left;
}

/*右寄せ*/
.right{
	float:right;
	text-align:	justify;
	padding-left:10px;
	padding-top:0px;
}

/*左寄せ*/
.left{
	float:left;
	text-align:	justify;
	padding-left:0px;
	padding-top:0px;
}

/*==============================*/
/*    各コンテンツ右端コラム    */
/*==============================*/

#main_left #column_box{
	width: 100%;
	background: #ededed;
	color: #757374;
	float: left;
	font-size: 10px;
	line-height: 140%;
	padding: 3%;
	margin-left: 0px;
	margin-top:20px;
}

/*--- THE WORDlastfoever設定 ---*/
#main_left #column_box h3{
	font-family: 'Lucida Grande','helvetica', 'arial', sans-serif;
	font-size: 32px;
	color: #8c8c8e;
	margin-top: 2px; margin-left: 2px; margin-bottom: 15px;
	letter-spacing: -0.04em; 
	font-weight: bold;
    line-height: 100%;
}



/*--- タイトル ---*/
#main_left #column_box .col_title{
	font-size: 14px;
	font-weight: bold;
	margin: 5px 5px;
}

/*--- コンテンツ ---*/
#main_left #column_box .col_contentsL{
	margin-top: 0px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 8px;
	font-size: 12px;
	line-height: 180%;
	width:48%;
	float:left;
}
#main_left #column_box h2{
 font-size: 1.0rem;
    margin: 5px 0 0px;
}
#main_left #column_box h3{
 font-size: 1.2rem;
    margin: 0 0 20px;

}
#main_left #column_box .col_contents{
	margin-top: 0px;
	width:100%;
	float:left;
}
#main_left #column_box .col_contentsL .col_contents{
    margin: 0 0 20px;
    line-height: 180%;
}
#main_left #column_box .col_contentsL .col_contents a{
 text-decoration: underline;
}

#main_left #column_box .col_contentsR{
	margin-top: 0px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 8px;
	font-size: 12px;
	line-height: 180%;
	width:45%;
	float:right;
    height: 320px;


}



#main_left #feat_topics #category_date{
	margin-top: 8px;
	color: #fff;
	font-size: 80%;
		}
#main_left #feat_topics #content_wrapper .review img.category_label {
			float: left;
			margin-right: 10px;
		}	

#main_left #feat_topics .ft_title{
	height:80px;
}

#main_left #feat_topics h1{
	font-size: 20px;
	line-height: 140%;
}

/*--- 出典 ---*/
#main_left #column_box .col_auth{
	color: #000000;
	text-align: right;
	margin: 0px 5px 0px 5px;
}

/*--- リスト ---*/
#main_left #column_box li{
	list-style-image: url(../images/user_list1.gif);
	list-style-position: outside;
	list-style-type: disc;
	margin: 1px 0px 1px 20px;
	font-size: 10px;
}

/*--- もっとみる ---*/
#main_left .see_more_box{
	text-align: center;
	margin:  5px;
	width:90%;
	border-radius:32px;
	border:1px;
	height:30px;
	padding:2%;
}


#addthis{
	text-align:left;  /*right;*/
	margin: 10px 10px 10px 10px;
}

/*==============================*/
/*  バナー表示コーナー  */
/*==============================*/

.AD_b{
	background: #080403;
	padding: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
	margin-bottom: 20px;
	color: #CCC;
}

.AD_b img{
	width: 96%;
}

/**********************************************************************************************************************
	メイン右側
***********************************************************************************************************************/
#main #main_right{
	width: 30%;
	max-width: 300px;
	float: right;
	margin-right: 0px;
	background-color: #FFFFFF;
}

/*--- 右側限定h3 ---*/
#main_right h3{
	font-family: 'impact', 'arial black', sans-serif;
	font-size: 18px;
	margin-left: 15px; 
	margin-bottom: 0px;
}

/*==============================*/
/*          The Sax             */
/*==============================*/
#main_right #sax{
	background: #000000;
	width: 100%;
	max-width: 300px;	
	margin: 0;
}

#sax .sax_left_img{
	margin-left: 10px;
	float: left;
}

#sax p{
	float: right;
	margin-right: 20px;
}


/*==============================*/
/*      This Week Event         */
/*==============================*/
#main_right #week_event{
	background: #6b6b6b;
	width: 300px;
	padding-top: 15px;
}

/*--- 今週のイベント ---*/
#week_event .ev_sub_tit{
	font-size: 9px;
	font-weight: bold;
	color: #ac7795;
	margin-left: 15px;
}

/*--- イベント情報 ---*/
#week_event .event_box{
	border-top: 1px dashed #515151;
	margin-left: 15px; 
	margin-right: 10px;
	padding-bottom: 15px;
	font-weight: bold;
	line-height: 1.3em;
	font-size: 20px;
}

#week_event .artist_name{
	margin-top: 25px;
	margin-left: 15px;
	font-size: 16px;
	font-weight: bold;
	color: #CCCCCC;
}

#week_event .event_box .day{
	font-size: 25px;
	font-weight: bold;
	color: #CCCCCC;
	line-height: 1.0em;
}

#week_event .event_box .place{
	font-size: 12px;
	font-weight: bold;
	color: #333333;
	line-height: 0.4em;
}

/*--- リンク ---*/
#week_event  a {
	color: #FFFFFF;
}

#week_event  a:link {
	color: #FFFFFF;
}

#week_event a:visited {
	color: #999999;
}

#week_event a:hover {
	color: #FF9900;
	text-decoration: none;
}

/*--- リンク ---*/
.event_box .more_info{
	color: #ac7795;
	font-weight: bold;
	font-size: 9px;
	margin-left: 15px;
}

/*--- ジャンル(右端) ---*/
#week_event .genre{
	font-family: 'impact', 'tahoma', sans-serif;
	float: right;
	color: #9e9e9e;
	font-size: 16px;
	margin-top: 5px;
	margin-right: 15px;
}

/**********************************************************************************
	フッタ
***********************************************************************************/
#footer{
	background: #000000;
	margin: 0;
	min-height: 450px;
	padding: 0 ;
	background-image: url("../images/sx/lesson/bg_saxtop.jpg") ;
    background-repeat: no-repeat;  
	position: relative;
}
#footer_bg{
	background: #000000;
	margin: 0;
	min-height: 450px;
	background-color:rgba(1,1,1,0.6);
	background-blend-mode:lighten;
}

#footer #corp_logo ul{
    width: 520px;
    float: left;
    margin: 20px 0 0; 
}
#footer #corp_logo li{
	display: inline;
	padding: 0px 5px 0px 5px;
	border-right: 1px solid #636365;
	font-weight: bold;
	font-size: 12px;
	color: #636365;
}

#footer .f_menu2 p{
	padding: 10px;
	font-size: 10px;


}

/**********************************************************************************
	追加
***********************************************************************************/

	.bxslider01{
		margin: 10px auto;
		width: 100%;
		opacity: 0;
		transition: 3s;
		position:relative;
	}

	.slick-initialized{
		opacity: 1
	}

	#container{
		margin-top: 150px;
		background-color:#f7f7f7;

	}

	#main_left #topics_news{
		height: 540px;
		overflow: hidden;
		margin-bottom: 20px;
	}

	/*--- タイトル ---*/
	.column_topics .ct_title,
	#column_topics .ct_title{
		color:#111;
	}

	.column_topics .ct_title a, a:visited,
	#column_topics .ct_title a, a:visited{
		color: #878573;
	}

	.teiki{
		color:#c5b27f;
	}

	.ippan{
		color:#817C7C;
	}

	.premium{
		color:#8b6d4a;
	}

	.ippan .small,
	.teiki .small,
	.premium .small{
		font-size: 8px;
	}

	.unlock{
		color: #C4C4C4;
	}

	

	.contentslist_header{
		height: 250px;
	}

	.article_list_top_ba{
		width: 100%;
		margin-bottom: 0px;
	}
	.article_list_bottom_ba{
		width: 100%;
		margin: 80px 0 50px;
	}
	.article_list_top_ba img,
	.article_list_bottom_ba img{
		width: 100%;
		height: auto;
	}

	#article_list{
		padding: 2%;
	}

  

	#main_left #article_list.sublist .column_topics{
        width: 48%;
		padding: 2%;
        float: left;
        height: 360px;
	}


	#article_list h1 span{
		font-size: 1.1rem;
		font-weight: 200;
		margin-left: 10px;
	}

	.article_list_top_area{
		background-color: #fff;
		padding: 10px;
		padding-top: 25px;
		padding-bottom: 5px;
		width: 100%;
		margin-bottom: 0px;
		color: #CCC;
	}

	.article_list_top_area h1{
		padding: 0px;
		width: 80%;
		margin: 0rem 0 0rem 10%;
		color: #333;
	}
    .article_list_top_area .subtitle{
	font-size: 100%;
	text-align: left;
	margin: 1rem 0 0rem 10%;
      color: #222;
}
	#main_left #article_list.sublist .column_topics .ct_title h3{
         font-size: 1.2rem;       
}
	.article_list_top_area h5{
		padding: 0px;
		
		width: 100%;
		margin: 0rem 0 0rem 4rem;
		color: #666;
	}

		.article_list_top_area img{
		width: 100%;
		}

	.article_list_middle_area{
		background-color: #f0efee;
		padding: 10px;
		padding-top: 25px;
		padding-bottom: 5px;
		width: 100%;
		margin-bottom: 50px;
		color: #CCC;
	}

	.article_list_middle_area .left{
		width: 25%;
		float: left;
		margin-left: 8%;

	}

	#main_left .article_list_middle_area .left .column_topics{
		width: 85%;
		height: 140px;

	}

	#main_left .article_list_middle_area .left .column_topics .cl_img{
		margin: 0;
	}

	.article_list_middle_area .right{
	width: 60%;
	float: right;

	}
	.article_list_middle_area .right img{
	width: 100%;
	height: auto;

	}


    #main_left .new_list_bottom .column_topics{
    width: 30%;
    float: left;
     margin: 10px 1% 20px;
        height: 240px;    

    }

	#magazine_main .follow_menu ul{
		float: left;
		 margin-left: 10px;
		width: 100%;
		 display: flex;
		flex-wrap: wrap;

	}

	#magazine_main .follow_menu ul li{
		padding:10px 20px;
		 font-size: 20px;
	}


	#magazine_main .follow_area #info99 ul.follow_tag_menu{
		width: 100%;
		padding:1rem;
		float: left;
		margin-bottom: 40px;	
			background-color: #f1f0e8;


	}
	#magazine_main .follow_area ul.follow_tag_menu li{
		font-size: 1.2rem;
		padding:15px 10px 0;
		width: auto;	
		display: inline-block;	

	}


	#magazine_main .follow_area{
		width: 100%;
		height: 100%;
		margin: 0;

	}
	#main_left #magazine_main .follow_area h1{
		font-size: 1.4rem;
		margin: 10px 10px 0;
		width: 100%;	


	}

	.check_btn_area{
	width: 100%;	
	height: 100%;
	padding: 10px 20px;

	
	}
	.check_btn_area h3{
		font-size: 1.2rem;
		padding: 0;
		margin: 10px 0 0;

	}
	.check_btn_box{
		width: 100%;	
		display: flex;
		flex-wrap: wrap;

	}

	#magazine_main #info99 .check_btn_box h3{
		font-size: 1.2rem;
		margin: 10px 10px 0;
		width: 100%;	


	}
	#info99 .check_btn_box .tag {
		width: auto;	
		font-size: 1rem;
		padding: 20px 10px 0;
		color: #707070;

	}




	.myfollow_tag_area .btn_send{
		margin: 10px;
		width: 180px;
		float: right;
		overflow: hidden;
	}
	.myfollow_tag_area .btn_send input[type="img"]{
		width: 100%;
	}

	.myfollow_area{
	float: left;
	width: 87%;
	margin-left: 3%;

}

	.follow{
	background-color:#FFF;
	padding: 10px 5px 40px 0px;
	margin-top: 0px;
	margin-right: 0px;
		
	width: 100%;
	float: left;

	}


	.follow ul {
	background-color:#FFF;
	padding: 10px;
	margin-top: 0px;
	margin-right: 10px;
	width: 100%;

}

	.follow li{
	width: 32%;
	margin-top: 30px;
	margin-right: 1%;	
	min-height: 60px;
	display: inline-block;
		

}
	.follow li .part_left{
	width: 40%;
		float: left;
}
	.follow li .part_left img{
	width: 100%;

}

	.follow li .part_right{
		width: 58%;
		float: right;
		font-size: 10px;
		margin-left: 2%;

}
	.follow li .part_right img.category_label{
	width: 60px;
}
	.follow li .part_right img.logo{
	width: 12px;
}
	.follow li .part_right h3{
	margin: 0px 3px;
	padding: 0;
	font-size: 14px;	
	margin-top: 8px;

}
	.follow li .part_right .right_icon{
	float: right;
}