@charset "utf-8";
/* CSS Document */
#maincontents{
	border-bottom: 3px solid lightgray;
}

#maincontents h1{
	width: 100%;
	text-align: center;
	padding: 4% 0;
}

/*タイトルバー*/
.category-title{
	background-color: #eeeeef;
}
/*TOP画像*/
.topimg{
	width: 100%;
	max-width: 750px;
}

/*仕切り線*/
.hr{
	border-bottom: 1px solid lightgray;
	padding:5px; 
}


/*------------------------------------------------
　　　ランキング　タブ切り替え全体のスタイル
------------------------------------------------*/
.tabs {
    margin-top: 50px;
    padding-bottom: 10px;
    background-color: #fff;
}

/*タブのスタイル*/
.tab_item {
	width: calc(100%/5);
	height: 50px;
	border: 1px solid #deeeee;
	border-bottom: 3px solid #11973F;
	line-height: 50px;
	font-size: 12px;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	transition: all 0.2s ease;
}
.tab_item:hover {
	opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
    display: none;
}

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

/*選択されているタブのコンテンツのみを表示*/
/*用途別*/
#all:checked ~ #all_content,
#bridal:checked ~ #bridal_content,
#baby:checked ~ #baby_content,
#kaiki:checked ~ #kaiki_content,
#memorial:checked ~ #memorial_content{
	display: block;
}
/*予算別*/
#price-1:checked ~ #price-1_content,
#price-2:checked ~ #price-2_content,
#price-3:checked ~ #price-3_content,
#price-4:checked ~ #price-4_content,
#price-5:checked ~ #price-5_content{
	display: block;
}
/*カテゴリ別　個別ランキング*/
#ranking-catalog:checked ~ #ranking-catalog_content,
#ranking-gulmet:checked ~ #ranking-gulmet_content,
#ranking-towel:checked ~ #ranking-towel_content,
#ranking-sweets:checked ~ #ranking-sweets_content,
#ranking-aroma:checked ~ #ranking-aroma_content,
#ranking-kitchen:checked ~ #ranking-kitchen_content,
#ranking-gulmet-sw:checked ~ #ranking-gulmet-sw_content{
	display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
    background-color: #11973F;
    color: #fff;
}
/*----------------------------------------------
　　　　　　　ランキング 中身
----------------------------------------------*/
/*各ランキングの枠*/
.popularity{
	width:100%;
	margin: 4% auto;
	font-size: 0;
}
.popularity ul{
	text-align: center;
}
.popularity li{
	width: calc(100%/5);
	max-width:200px;
	font-size:0;
	padding:5px 4px;
	display:inline-block;
	vertical-align:top;
}
.popularity img{
	max-width: 100%;
	height: auto;
}

/*タイトル横のアイコン*/
.popularity h2{
	font-size:1rem;
	padding:2% 0;
	text-align: center;
}
.popularity h2>img{
	width:20px;
	margin-right:10px;
}

li .rank{
	font-size: 15px;
	padding-top: 9px;
	margin-bottom: 5px;
	color: #555;
	font-weight: bold;
}

li .theone{
	background-image:url(/picture/rank.jpg);
	background-position: top;
}

/*商品名・価格の入った枠*/
li .rank-text{
	height:auto;
	font-size: .8rem;
	text-align: justify;
	padding:3% 0;
}

/*価格*/
li .rank-price{
	font-size: .8rem;
	font-weight: bold;
	color: #C9203F;
}

.category_box{
	width: 100%;
	font-size: 0;
}

.menu_left_box{
	display: inline-block;
	width: 50%;
	font-size: 12px;
}

.menu_left_box  li{
	padding: 0 2%;
	width: 100%;
	border-width: 0.5px 0.25px 0.25px 0.5px; 
	border-color: #A5A6A7;
}

.menu_left_box li:last-child{
	border-width: 0.5px 0.25px 0.5px 0.5px; 
}

.menu_right_box{
	display: inline-block;
	width: 50%;
	font-size: 12px;
}

.menu_right_box  li{
	width: 100%;
	padding: 0 2%;
	border-width: 0.5px 0.5px 0.25px 0.5px;
	border-color: #A5A6A7;
}

.menu_right_box  li:last-child{
	border-width: 0.5px 0.5px 0.5px 0.5px;
}

.menu_boxs li p{
	vertical-align: top;
	display: inline-block;
	padding: 5% 2%;
}

.menu_boxs li img{
	width: 20%;
	vertical-align: top;
	display: inline-block;
	padding: 1%;
}


.category_box .heading{
	padding: 3%;
}

.baby{
	border-left: none;
}

.budget_choose {
	border-bottom: 1px #eeeeef solid;
	margin-bottom: 15px;
	padding:0 0 15px 0;
}

.budget_choose li{
	width:31%;
	height: 40px;
	display: inline-block;
	border-radius: 0;
	line-height:3;
	font-size: 12px;
	text-align: center;
	margin:5px 2px ;
	vertical-align: top;
	background-color: #eeeeef;
}

.budget_choose li a{
	width:100%;
	height:100%;
	display: inline-block;
	font-family: serif;
	font-weight: 600;
	border-radius: 0
}

.budget_choose li a:hover {
	color: #fff;
	transition: all 0.3s;
	background-color: #11973F;
}



/*============================
    ジャンルで選ぶ
============================*/
.genrebox{
    position: static;
    font-size: 0;
}
.genrebox li{
    width: calc(100%/4);
    display: inline-block;
    background-color: #eeeeef;
    border: 1px #fff solid;
    font-size: .75rem;
    padding: 3% 0;
    text-align: center;
    font-weight: bold;
}

/*上部固定*/
.fixed2 {
  position: fixed;
  top: 0; /*ヘッダ下は50px*/
  width: 100%;
  z-index: 9998;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/*============================
	ジャンプ後のズレ調整
============================*/
#standard,
#gourmet,
#bridal_cata,
#baerth,
#taiken,
#hokuo,
#album,
#baby_cata{
	padding-top: 40%;
	margin-top: -40%;
}

/*============================
　　　　メインカテゴリ　商品一覧
============================*/
/*見出し*/
.ct-subtitle-head{
	width: 100%;
	font-size: 1rem;
	font-weight: bold;
	padding: 2%;
	border-left: 10px solid #11973F;
}

/*スタッフおすすめ*/
.staff-Choose{
	border-left: 10px solid #c9203f;
}
/*グルメ用*/
.ct-subtitle-gm{
	padding: 4%;
}

/*テキスト*/
.ct-subtitle-txt{
	/* width: 100%; */
	font-size: .75rem;
	padding: 4%;
	background: #f5f5f5;
	/* margin: 0; */
}

.ct-cava{
	margin: 4% auto 0;
	padding: 2% 3%;
	font-size: .85rem;
	background: #f5f5f5;
	letter-spacing: 3px;
	font-weight: bold;
	color: #555;
}

/*============================
    一覧の全体設定
============================*/
.series-list-all{
	/* font-size: 0; */
	display: flex;
	flex-wrap: wrap;
}

.series-list-all p{
	font-size: .8rem;
	text-align: justify;
	letter-spacing: 0;
}


/*１商品の枠*/
.series-list{
	width: calc(100%/1);
	height: auto;
	display: flex;
	padding: 2%;
	vertical-align: top;
	text-align: center;
	border-bottom: 1px #ccc solid;
}

.series-list:first-child{
	border-top:1px #ccc solid;
}


/*サムネイル　リンク*/
.series-list-link{
	width: 25%;
	display: inline-block;
	vertical-align: top;
}

/*サムネイル 画像*/
.series-list-img{
	width: 100%;
	height:auto;
	max-width: 100%;
	max-height: 100%;
}

/*サムネイル　横長のカタログ*/
.small-catalog{
	margin-top: 8px;
}


/*カタログ　ゆうパケ・即納アイコン*/
.series-list-icon{
	    width: auto;
	    max-height: 20px;
	    margin: 2% 0;
}


/*テキストエリア*/
.series-list-box{
	width: 75%;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	font-size: .8rem;
	padding: 2% 4%;
}




/*マイプレシャス*/
.mypre_list{
	display: flex;
	padding: 0 4%;
	border-bottom: 1px #ccc solid;
}

.mypre_list a{
	width: 25%;
}
.mypre_list_img{
	width: 100%;
}


/*------------------------------
　グルメ・インテリア・キッチンなどのカテゴリ一覧
------------------------------*/
.category_top{
	font-size: 0;
	padding-left: 3px;
}

.category_top li{
	width: 30%;	
	max-width: 140px;
	height:auto;
	display:inline-block;
	margin: 5px;
}

.cate-gu{
	text-align:left;
}

.category_top img{
	max-width:100%;
}




/*------------------------------
   タオル　カテゴリ別ピックアップ
------------------------------*/
/*見出し*/
div.ct-subtitle {
	margin: 6% 0 0;
}

div.ct-subtitle h2{
	width: 70%;
	height: auto;
	box-sizing: border-box;
	display: table-cell;
}

.ct-subtitle-more{
	width: 70%;
	font-weight: bold;
	font-size: 0.8em;
	text-align: center;
	display: block;
	padding: 2% 0;
	border: 1px #ccc solid;
	margin: 2% auto;
}

/*麺類のmargin-top設定*/
#maincontents div.ct-subtitle:first-child{
	margin-top: 4%;
}

/*---------------------------
		横すくロール
---------------------------*/
.gnav {
  width: 100%;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.gnav ul {
  width: 650px;
  height: auto;
  margin: 0 auto 2px auto;
  list-style: none;
  display: flex;
}

.gnav ul li {
  text-align: center;
  padding: 0 1% 1%;
}

.gnav span{
	font-size: 4vw;
	font-weight: bold;
}

/*スクロールバー*/
.gnav::-webkit-scrollbar {
  height: 2px;
}

.gnav::-webkit-scrollbar-track {
  margin: 0 2px;
  background: #ccc;
  border-radius: 5px;
}

.gnav::-webkit-scrollbar-thumb {
  background: #4CAF50;
  border-radius: 5px;
}

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




/*====================================
	カタログギフト　カテゴリTOP
====================================*/
/*ページ上部のジャンプボタン*/
.genre_link{
	width: 80%;
	display: block;
	padding: 4%;
	margin: 4% auto;
	border: 2px #333 solid;
	border-radius: 30px;
	box-shadow: 1px 1px 7px 3px #ddd;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: center;
}
.genre_link:hover{
	background-color:#50b573;
	color:#fff;
	transition:0.3s;
	border:#50b573 2px solid;
}

.pointarea{
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体";
	text-align: center;
	margin: 4% 0;
	padding: 0 2%;
}

.pointarea h4{
	background: #fff;
	padding: 2% 0 2% 3%;
	border-radius: 5px;
}
.pointarea h4>img{
	max-width:30px;
	height:aupt;
	margin-right:10px;
}

.pointtit{
	margin: 6% 0 0 0;
	text-align: center;
	font-size: .8rem;
	color: #666;
	letter-spacing: 2px;
}


.pointarea h3{
	font-size: 1.2rem;
	margin: 4% 0;
	text-align: justify;
}

.point1-box p,
.point2-box p,
.point3-box p{
	font-size: .85rem;
	letter-spacing: -1px;
	margin: 4% 0;
	text-align: justify;
}


/*画像*/
.img-point{}
.img-reason{
	width: 100%;
	max-width: 450px;
	display: inline-block;
}

.img-point{
	width: auto;
	display: block;
	margin: 2% auto;
}
.img-wraping{
	vertical-align: bottom;
	margin-bottom: 4%;
}
.img-staf{}


/*------１　選ばれる理由------*/
.point1-box,
.point2-box,
.point3-box{
	max-width: 400px;
	display: inline-block;
	vertical-align: middle;
	font-size: .8rem;
	color: #333;
	padding: 4%;
	text-align: justify;
	background: #f5f5f5;
}

.point1-list{
	background: #ffffff;
	border-radius: 5px;
	padding: 2%;
}
.point1-list li {
	padding: 5px 0;
	letter-spacing: 2px;
	font-weight: bold;
}
.point1-list li img{
	margin: 0 2%;
}

/*------２　オプション------*/
.point2-box{}

.point2-list{
	width: auto;
	padding: 0 4% 6% 4%;
	display: flex;
	flex-wrap: wrap;
	background: #f5f5f5;
}

.point2-list li{
	width: calc(94%/3);
	display: inline-block;
	text-align:
	center;
	vertical-align: top;
	background: #fff;
	border-radius: 10px;
	margin: 1%;
	padding: 2% 0;
}

.point2-list li img{
	max-width:100%;
}

.point2-list a{
	width:
	auto;
	display:
	block;
	border-radius: 5px;
	margin:5px;
	font-size: .8rem;
	font-weight: bold;
}

.point2-list li p{
	width: 90%;
	border-radius: 3px;
	font-size: .75rem;
	line-height: 1.5;
	margin: auto;
}

.point2-list a:hover,
.to-genre:hover{
	background-color:#50b573;
	color:#fff;
	transition:0.3s;
}

.to-genre{
	max-width: 250px;
	display: block;
	padding: 4%;
	border: 1px #333 solid;
	border-radius: 3px;
	margin: 4% auto;
	text-align: center;
	font-weight: bold;
	background: #fff;
}


/*------３　サービス紹介------*/
.point3-box{}


.point3box-l{
	display: inline-block;
	vertical-align: middle;
	margin: 2% 0;
	color:#333;
	border-bottom: 1px #50b573 solid;
	text-align: justify;
}

/*見出し*/
.point3box-l h4{
	font-size: 1rem;
	line-height: 1.2;
	margin: 0;
	letter-spacing: 0;
	color: #299e50;
}
.point3box-l h4>img{
	margin: 0 4% 0 0;
}
.point3box-l h4>span{
	font-size:.75rem;
}


/*本文*/
.point3box-l p{
	font-size: .8rem;
	line-height: 1.2;
}

/*カタログのサービス紹介バナー*/
.ct-service{
	display: flex;
	/* font-size: 0; */
	margin: 4% 0;
	/* text-align: center; */
	flex-direction: column;
	align-items: center;
}
.ct-service a{
	width: 100%;
	max-width: 320px;
	display: inline-block;
	padding: 5px;
}

.ct-service img{
	max-width: 100%;
}

.ct-service h4{
	font-size: 1rem;
}



/*======================================
	カタログ専用ジャンルで選ぶ
======================================*/
.ct-genrebox{
	display: flex;
	flex-wrap: wrap;
}
.ct-genrebox ul{

}
.ct-genrebox li{
	width: calc(100%/4);
	min-height: 40px;
	display: inline-block;
	background-color: #eeeeef;
	padding: 5px;
	font-size: .7rem;
	font-weight: bold;
	vertical-align: top;
	border-left: 1px #ccc solid;
	border-bottom: 1px #ccc solid;
}
.ct-genrebox li:nth-of-type(4n+1){
	border-left:none;
}
.ct-genrebox a{
	width: auto;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ct-genrebox a:hover{
	background-color:#fff;
	color:#333;

	transition:0.3s;
}


/*ジャンルで選ぶ　画像*/
.genreimg{}

/*ジャンルで選ぶ　テキストエリア*/
.genrebtn p{
	padding: 5px 0 0 0;
}





/*======================================
	カタログギフトの申込み方法
======================================*/
.flowlink{
	width: 50%;
	display: block;
	padding: 2% 0;
	border: 1px #aaa solid;
	border-radius: 5px;
	margin: 2% auto 6%;
	text-align: center;
}

.flowlink:hover{
	opacity: 0.6 ;
	transition: 0.3s;
	text-decoration:underline;
}
.coment{
	font-size: .8rem;
	padding: 2% 4%;
}
/*======================================
	マナー
======================================*/
/*用途別タイトル*/
.mediatit{
	margin: 4% auto 0;
	border-bottom: 2px #ccc dotted;
	padding: 2% 0;
	width: 95%;
}

.mediabox{
	display: flex;
	margin: 0 0 6%;
	/* text-align: center; */
	flex-wrap: wrap;
	flex-direction: column;
}

.mediabox li{
	width: 95%;
	max-width: 384px;
	display: inline-block;
	margin: auto;
	font-size: .8rem;
	padding: 2% 0;
	vertical-align: top;
	border-bottom: 2px #ccc dotted;
	text-align: justify;
}
.mediabox li img{
	width: 30%;
	display: inline-block;
}
.mediabox a:hover{
	text-decoration:underline;
}

.mediabox li p{
	width: 65%;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1%;
}