@charset "shift_jis";

/* ========== 全てのサイズ共通 ========== */

#contents {
	max-width:880px;
	margin: 0 auto;
}


/* ========== contents内（全共通） ========== */


/*----------------
  header-h1
----------------*/

/* header-top-icon */

.header-top-icon .cate-title {
	height: 50px;
    line-height: 50px;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 0 8%;
	color: #444;
	margin:0 0 .5em 0;
    vertical-align: middle;
    padding: 0 0 0 50px;
    font-size: 1.2em;
    font-weight: normal;
	border-bottom: 2px solid #2976c6;
}

.header-top-icon .cate-text {
	padding:0 .6em 0;
	font-size:.8em;
	line-height:1.1em;
	color: #444;
}



/*----------------
  menu-parts
----------------*/

/* menu-text */
.menu-text {
}

.menu-text li {
    display: inline-block;
    text-decoration: none;
    background: #2976c6;
    color: #fff;
    border-bottom: solid 4px #033;
    border-radius: 3px;
}

.menu-text li.btn-ranking {
	background-color:#cc0033;
    border-bottom: solid 4px #300;
}

.menu-text li.btn-text {
	background-color:#666;
    border-bottom: solid 4px #333;
}

.menu-text li:hover,
.menu-text li.btn-text:hover,
.menu-text li.btn-ranking:hover {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}

.menu-text li a {
    padding: 1em 0 ;
	display:block;
	text-align:center;
	text-decoration:none;
	color:#fff;
	position:relative;
}

.menu-text li a:hover {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;
}

#contents .menu-text.division-3 .inner {
	width: 47.8%;
	margin: 0 1.1% 2% ;
}

/*----------------
 recommend-area
----------------*/

.menu-title {
	padding: 1.5em 0 .8em;
	font-size: 1.8em;
	line-height: 1.6em;
	text-align: center;
	font-weight: normal;
	color: #2976c6;
}

.menu-title .sub-text {
	font-size: .8em;
}

.menu-text {
	padding: 0 1em;
}

.recommend-area {
	padding: 0 0 2em;
}

.item-box {
	font-size:.8em;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	overflow: hidden;
	position: relative;
}

.item-box:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	background-color: #eeeeee;
}

.item-box .item-image img {
	width:100%;
}

.item-box .item-ttl {
	padding: .5em;

}

.item-box .item-price {
	padding: 0 0 .5em 0;
	color: #f00;
}

.item-box .item-btn {
	background-color: #2976c6;
	display: block;
	width: 90%;
	margin: 0 auto 1em;
	padding: .5em 0;
	color: #fff;
    border-radius: 3px;
}

.item-box:hover .item-btn {
	background-color: #13ceb1;
}


.item-box .goods-link {
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
}


/* division-1 */

.division-1 .item-box .item-image {
	width:45%;
	float: left;
}

.division-1 .item-box .item-info {
	width:55%;
	float: right;
}

.grid-box.division-1 .inner {
    width: 90%;
    margin: 0 5% 2%;
}

.division-1 .item-box .item-ttl {
	font-size: 1.3em;
	line-height: 1.5em;
}

.division-1 .item-box .item-txt {
	font-size: .9em;
	padding: 0 1em 1em 1em;
	text-align: left;
	color: #666;
}

.division-1 .item-box .item-price {
	font-size: 1.2em;
}

.division-1 .item-box .item-btn {
	width: 80%;
	padding: .8em 0;
}



/*----------------
  yomimono-box
----------------*/

.yomimono-box {
	padding: 0 0 3em;
}

.yomimono-box .yomimono-txt{
	color: #666;
	line-height: 1.4em;
	padding: 0 .6em 0;
}

.yomimono-box .yomimono-sub-ttl{
	color: #333;
	font-size: 1.2em;
	display: block;
}


/*----------------
 osusume-banner
----------------*/

.osusume-item-area * {margin:0;padding:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.osusume-item-area {max-width:880px;margin:2em auto;letter-spacing:-.40em; font-family: Mplus\ 1p,sans-serif; text-align:center;}

.item-01, .item-02,.item-03 { display:inline-block;letter-spacing: normal;width: 30%;position:relative; margin: 0 1%;}

.osusume-item-area .item-innner {background-color:#eee; border:1px solid #ccc; position:relative;overflow:hidden;}
.osusume-item-area .item-innner:hover {background-color:#ddd;}

.goods-image {width:100%; text-align: center; padding:.5em;}
.goods-image .imgage-size {width:100%;}

.goods-info {width:100%; float:left;}
.osusume-item-area .catch-copy {padding:0; font-size:1.4em; font-weight: bold; color:#333; text-align: center; line-height: 1.7em; position:absolute; left:-20px; top:-5px;transform: rotate(-15deg);-moz-transform: rotate(-20deg);-webkit-transform: rotate(-15deg);}

.border-bottom {font-size: 1.3em;background: linear-gradient(transparent 70%, #ff99ab 70%); padding: 0 .2em;}
.item-icon {width:70px; height:70px; border-radius:50px; position:absolute; text-align: center; padding: 0 0 0; line-height: 1.2em;}
.item-icon.col-1{background-color: #069; color:#fff; right:-10px; bottom:40px;font-size:1.2em; padding: 20px 0 0 0;}
.item-icon.col-2{background-color: #fff; color:#069; border: 3px solid #069; right:-10px; bottom:-10px;font-size:.8em; padding: 18px 0 0 0;}
.item-icon .icon-font {display:block; font-weight: bold;}

.osusume-item-area .goods-name {font-size:.9em; font-weight: bold; color:#333; font-family:"メイリオ", Meiryo; padding: 0 .6em; text-align: left;}
.osusume-item-area .goods-price {font-size:2.0em; font-weight: bold; color:#F00; padding: 0 .3em; text-align: left; line-height: 1.0em; margin:0;}
.osusume-item-area .goods-price .price-yen {font-size: .6em;}

.osusume-item-area .goods-link {display: block;height: 100%;width: 100%;position: absolute;top: 0;left: 0;}




@media screen and (min-width:480px) { 
/* ========== for iPhone（横画面ほか調整用） ========== */



}
@media screen and (min-width:768px) {
/* ========== for iPad・PC（タブレット・PC調整用） ========== */

#contents {
	max-width:880px;
}

/* ========== contents内（タブレット・PC用） ========== */


/* header-top-icon */

.header-top-icon .cate-title {
	height: 80px;
    line-height: 80px;
	background-size: 70px 70px;
    padding: 0 0 0 75px;
    font-size: 1.6em;
    font-weight: normal;
}

.header-top-icon .cate-text {
	font-size:1.1em;
	line-height:1.4em;
}


/*----------------
migration-menu
----------------*/

.migration-menu li {
	background-size: 60px 60px;
	background-position: center 30%;
}

/* menu-box */
.menu-box li {
	height:8em;
	background-size: 90px 90px;
}


#contents .menu-text .inner {
	display: inline-block;
}


#contents .menu-text.division-3 .inner {
    width: 31%;
    margin: 0 1.15% 2%;
}

/*----------------
  another-menu
----------------*/

.another-menu .another-link {
	font-size:.9em;
}

/*----------------
  item-box
----------------*/

.division-1 .item-box .item-image {
	width:35%;
	float: left;
}

.division-1 .item-box .item-info {
	width:65%;
	float: right;
}

.grid-box.division-1 .inner {
    width: 80%;
    margin: 0 10% 2%;
}



}