@charset "utf-8";


#landing { 
clear:both; 
max-width:920px; 
background-color:#FFF; 
margin:0 auto; 
padding:0 10px; 
overflow:hidden;
text-align:center;
}

h3.midashi {
clear:both; max-width:920px; margin-top:30px; margin-bottom: 5px;padding:5px; color:#FFF; font-size:160%; 
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; background:#880008;　}

h3.midashi_xmas {
clear:both; max-width:920px; margin-top:30px; margin-bottom: 5px;padding:5px; color:#FFF; font-size:160%; 
font-family: "游ゴシック", "Yu Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; background:#104613;}

p.onepoint {
margin: 35px 0; 
font-size: 150%; 
text-align: center;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; 
}

/* ==============================================
 ▼ 上部コンテンツ
=============================================== */

/*左寄せコンテンツ*/
#landing .boxL { float:left; max-width:700px; margin:20px 0; padding:0;}
#landing .boxL h2 {
 clear:both; max-width:700px; margin:5px 0 10px 0; padding:0 0 2px 5px;
 color:#333333; font-size:160%; font-weight:normal; border-bottom:1px solid #CCC;}
#landing #visual {
 clear:both; max-width:700px; margin:0; padding:0 0 15px 0; overflow:hidden;}
#landing .boxL p {
 clear:both; max-width:690px; margin:0; padding:0 5px 10px 5px; text-align:left; font-size:100%; line-height:1.6; color:#333333;}

/*右寄せコンテンツ（ランキング）*/
#landing .boxR {
 float:right; width:200px; margin:20px 0; padding:0; overflow:hidden; font-size:90%; line-height:1.4; background:#C00;}
#landing .boxR h4 {
 clear:both; width:200px; margin:0; padding:5px 0 0 0; color:#FFF; font-size:14px; line-height:1.4;}
#landing .boxR h4 span { font-size:12px;}

#landing .boxR .ranking {
 clear:both; width:190px; margin:5px; padding:0px; overflow:hidden;
 font-size:100%; line-height:1.5; background:#FFF;}
#landing .boxR .ranking .rank01 {
 clear:both; width:150px; margin:0; padding:5px 0 0 40px; border-bottom:1px solid #880008;
 background:url("https://www.aionline-japan.com/images/bloc/weekly_ranking/kanmuri.jpg") no-repeat left center;}
#landing .boxR .ranking .rank02 {
 clear:both; width:150px; height: 65px; margin:0; padding:5px 0 0 40px; border-bottom:1px solid #880008;text-align:left;
 background:url("https://www.aionline-japan.com/images/bloc/weekly_ranking/kanmuri2.jpg") no-repeat left center;}
#landing .boxR .ranking .rank03 {
 clear:both; width:150px; height: 65px; margin:0; padding:5px 0 0 40px; border-bottom:1px solid #880008;text-align:left;
 background:url("https://www.aionline-japan.com/images/bloc/weekly_ranking/kanmuri3.jpg") no-repeat left center;}
#landing .boxR .ranking .rank04 {
 clear:both; width:150px; height: 65px; margin:0; padding:5px 0 0 40px; border-bottom:1px solid #880008;text-align:left;
 background:url("https://www.aionline-japan.com/images/bloc/weekly_ranking/kanmuri4.jpg") no-repeat left center;}
#landing .boxR .ranking .rank05 {
 clear:both; width:150px; height: 65px; margin:0; padding:5px 0 0 40px; border-bottom:none;text-align:left;
 background:url("https://www.aionline-japan.com/images/bloc/weekly_ranking/kanmuri5.jpg") no-repeat left center;}

#landing .boxR .ranking .rank01 img{ width:80px; margin:0; padding:0 0 7px 0;}
#landing .boxR .ranking .rank02 img,#landing .boxR .ranking .rank03 img,
#landing .boxR .ranking .rank04 img,#landing .boxR .ranking .rank05 img {
 float:left; width:60px; margin:0; padding:0 3px 0 0;}


/* ==============================================
 ▼ 中間コンテンツ
=============================================== */

/* 画像上 ランキング用アイコン表示 */


.social-icon {
  position: relative;
  display: block;
  float: left;
  width:100%;
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  text-decoration: none;
  text-align:center;
  font-size: 1.3em;
  font-weight: bold; 
  line-height: 40px;
}
.social-icon i {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  line-height: 40px;
  font-size: 1.4em;
  text-align: center;
}


.newy {
  background: #8E0000;
}
.newy i {
  background: #AA9B5F;
}

.xmas {
  background: #449233;
}
.xmas i {
  background: #D90003;
}


/* 商品詳細を見るボタン */
a.cp_btn {
display: block;
width: 160px;
margin: 0 auto;
padding: 0.3em;
text-align: center;
text-decoration: none;
background: #D90003;
color: #FFF;
border-radius: 16px;
transition: 0.2s;
}
a.cp_btn:hover {
background: #AA9B5F;
color: #565656;
}

/* 商品一覧（横3商品） */
.itemBlock3 { clear:both; width:100%; margin:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.itemBlock3 .itemList { float:left; width:30%; padding:1.5%; margin: 0 auto;}
.itemBlock3 .itemList .photo img { clear:both; width:100%; margin:0; padding:0;}
.itemBlock3 .itemList h4 { clear:both; margin-top:10px; margin-bottom: 5px; font-size:100%; font-weight:bold; line-height:1.2;}
.itemBlock3 .itemList h4 a { text-decoration:underline;}
.itemBlock3 .itemList h4 a:hover { text-decoration:underline;}
.itemBlock3 .itemList .memo { clear:both; background:#880008; margin:10px auto; padding:4px; color:#FFF; font-size:90%; text-align: center;}
.itemBlock3 .itemList .price { clear:both; margin:0 0 10px 0; padding:0; color:#C00; font-weight:bold; font-size:100%; text-align: center;}


/* 商品一覧（横4商品） */
.itemBlock4 { clear:both; width:100%; margin-top:10px; padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.itemBlock4 .itemList { float:left; width:23%; padding:1%; margin: 0 auto;}
.itemBlock4 .itemList .photo img { clear:both; width:100%; margin:0; padding:0;}
.itemBlock4 .itemList h4 { clear:both; margin-top:10px; margin-bottom: 10px; font-size:100%; font-weight:bold; line-height:1.2;}
.itemBlock4 .itemList h4 a { text-decoration:underline;}
.itemBlock4 .itemList h4 a:hover { text-decoration:underline;}
.itemBlock4 .itemList .memo { clear:both; background:#880008; margin:5px auto; padding:4px; color:#FFF; font-size:90%; text-align: center;}
.itemBlock4 .itemList .price { clear:both; margin:0 0 10px 0; padding:0; color:#C00; font-weight:bold; font-size:100%; text-align: center;}

/* 商品一覧（横5商品） */
.itemBlock5 { clear:both; width:100%; margin-top:10px; padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.itemBlock5 .itemList { float:left; width:17%; padding:0.8%; margin: 0 auto;}
.itemBlock5 .itemList .photo img { clear:both; width:100%; margin:0; padding:0;}
.itemBlock5 .itemList h4 { clear:both; margin-top:10px; margin-bottom: 10px; font-size:100%; font-weight:bold; line-height:1.2;}
.itemBlock5 .itemList h4 a { text-decoration:underline;}
.itemBlock5 .itemList h4 a:hover { text-decoration:underline;}
.itemBlock5 .itemList .memo { clear:both; background:#880008; margin:3px auto; padding:2px; color:#FFF; font-size:80%; border-radius: 5px; text-align: center;}
.itemBlock5 .itemList .price { clear:both; margin:0 010px 0; padding:0; color:#C00; font-weight:bold; font-size:93%; text-align: center;}

/* ==============================================
 ▼ タブ切り替えコンテンツ
=============================================== */

/*タブ切り替え全体のスタイル*/
.tabs {
margin: 30px auto;
background-color: #FFF;
max-width: 920px;}
/*タブのスタイル*/
.tab_item {
width: calc(100%/5);
height: 50px;
margin-bottom: 15px;
border-bottom: 8px solid #880008;
background-color: #cccccc;
line-height: 54px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
border-top-left-radius: 40px;
border-top-right-radius: 10px;
}
.tab_item:hover {
opacity: 0.7;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 0;
clear: both;
overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#itembox1:checked ~ #itembox1_content,
#itembox2:checked ~ #itembox2_content,
#itembox3:checked ~ #itembox3_content,
#itembox4:checked ~ #itembox4_content,
#itembox5:checked ~ #itembox5_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #880008;
color: #fff;
}


/* 商品一覧（タブ以下／アイテムボックス内） */
.itemBlockBox { clear:both; margin:10px auto; padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.itemBlockBox .itemList { float:left; width:23%; padding:1%; margin: 0;}
.itemBlockBox .itemList .photo img { clear:both; width:100%;}
.itemBlockBox .itemList h4 { clear:both; margin-top:10px; margin-bottom: 10px; font-size:90%; font-weight:bold; line-height:1.2;}
.itemBlockBox .itemList h4 a { text-decoration:underline;}
.itemBlockBox .itemList h4 a:hover { text-decoration:underline;}
.itemBlockBox .itemList .memo { clear:both; background:#880008; margin:5px auto; padding:4px; color:#FFF; font-size:90%; text-align: center;}
.itemBlockBox .itemList .price { clear:both; margin:0 0 10px 0; padding:0; color:#C00; font-weight:bold; font-size:100%; text-align: center;}