@charset "utf-8";
a img:hover{
	opacity: 0.75;
}
a :hover{
	text-decoration:underline;
}

h4{
    text-align: center;
    font-size: 1.2rem;
    padding: 2% 0 0 0;
}

/*アイコンを表示*/
.fa-icon{
	color:  #11973F;
	margin-right: 5px;
}

/*----------------------------------------------
　　　　　　　ランキング
----------------------------------------------*/
.popularity img{
	max-width: 150px;
	height: 150px;
}


/*------------------------------------------------
　　　ランキング　タブ切り替え全体のスタイル
------------------------------------------------*/
/*タブのスタイル*/
.tab_item {
    width: calc(100%/5);
    height: 50px;
    border-bottom: 3px solid #11973F;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    transition: all 0.2s ease;
}

.tab_item:hover {
    opacity: 0.75;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
    clear: both;
    overflow: hidden;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #11973F;
  color: #fff;
}

/*---------------------------
		横すくロール
---------------------------*/
.gnav span{
	font-size: 4vw;
	font-weight: bold;
}

.ho_box_1 img{
	width: 100%;
	height: auto;
	display: inline-block;
}

/*特集　4つ並び*/
.tokusyu4c{
    margin: 0 auto 3% auto;
    text-align: justify;
    font-size: 0;
}
.tokusyu4c li{
	width: calc(100%/3);
	height: auto;
	display: inline-block;
	font-size: .8rem;
	text-align: justify;
	padding: 10px;
	vertical-align: top;
	color: #333;
}

.tokusyu4c li:last-child{
    margin-right: 0;
}
.tokusyu4c li img{
	width:100%;
	margin-bottom:2%
}
.tokusyu4c li>p{
	font-weight:bold;
	font-size:1rem;
	}


/*トップ画像*/
.topimg{
	max-width:100%;
}


/*カテゴリの見出し*/
.ct-subtitle h3{
	padding: 10px;
	border-left: 10px solid #11973F;
	font-size: 1.2rem;
	margin-bottom: 10px;
}
.ct-subtitle p{
	width: 100%;
	font-size: .8rem;
	padding: 3% 4%;
}

.coment{
	padding: 0 2%;
	font-size: .8rem;
}

/*タオル　シリーズ一覧*/
.series-box{
    /* font-size:0; */
    border-bottom: 1px #ccc solid;
    display: flex;
    flex-wrap: wrap;
}

.series-box li{
    padding: 1% 1%;
    vertical-align: top;
}

.t-tit{
    font-size: 1rem;
    line-height: 1.2rem;
    width: auto;
    display: inline;
    letter-spacing: 1px;
}

.t-txt{
    font-size: .8rem;
    margin: 6px 0;
}

/*アイコン*/
.i-imabari{
    vertical-align: bottom;
    max-height: 30px;
}

.i-kibako,
.i-organic{
    width: auto;
    color: #fff;
    display: inline-block;
    padding: 3px 10px;
    font-size: .5rem;
    margin: 5px 0 0 5px;
    border-radius: 5px;
}

.i-kibako{background: #866644;}

.i-organic{background: #4c7022;}



/*テキスト*/
.t-article{
	width: 100%;
	display: inline-block;
	padding: 5px;
	vertical-align: middle;
}

/*ピックアップ*/
.pu-tit{
    text-align: center;
    letter-spacing: 2px;
    font-size: 1.2rem;
    margin: 2% 0 0 0;
    padding: 1% 0 0 0;
    border-top: 1px #ccc solid;
}
.series-pickup{
	width: 50%;
	display:inline-block;
	display: flex;
}
.series-pickup a>img{
    width: 100%;
    display: inline-block;
}


/*サブ*/
.series-sub{
    width: 20%;
    display: inline-block;
    min-height: 350px;
}

.series-sub a> img{
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.series-sub>a>.t-article{
	width: 100%;
	display: inline-block;
	padding: 4%;
}


/*======================================
	ジャンルで選ぶ
======================================*/
.ct-genrebox{
	display: flex;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体";
	text-align: center;
	flex-wrap: wrap;
}
.ct-genrebox li{
	width: calc(95%/3);
	min-height: 100px;
	display: inline-block;
	border: 1px #ccc solid;
	border-radius: 5px;
	margin: 5px 5px;
}
.ct-genrebox a{
	width: auto;
	height:100%;
	display: block;
	padding: 5px;
}


/*ジャンルで選ぶ　画像*/
.genreimg{
	width: 70px;
}

/*個別調整*/
.genrelistimg1{
}
.genrelistimg2{
	margin: 11px 0 11px 0;
}

.genrelistimg3{
	margin: 0 0 0 0;
}

/*ジャンルで選ぶ　テキストエリア*/
.ct-genrebox .genrebtn{
	width: 55%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
.genrebtn p{
	font-size: 1.2rem;
	color:#333;
	font-weight:bold;
}