@charset "utf-8";

/* 商品情報
-------------------------------------------------------*/
.pbox {
	border:1px solid #000000;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	margin-top:60px;
}
.pbox div {
	width:50%;
	height:160px;
}
.pbox .tbox {
	text-align:center;
	width:50%;
	padding:40px 0 0 10px;
}
.pbox .tbox h2 {
	font-size:2rem;
	margin-bottom:1rem;
}
.pbox .tbox p {
	font-size:1.4rem;
}

.silica,
.sasamayu {
	color:#ffffff;
}
.silica {
	background:#000000 url(../img/top/img_silica.png) right no-repeat;
	background-size:contain;
}
.mist {
	background:url(../img/top/img_mist.png) right no-repeat;
	background-size:contain;
}
.cosmo {
	background:right no-repeat;
	background-size:contain;
}
.sasamayu {
	background:#000000 url(../img/top/img_sasamayu.png) right no-repeat;
	background-size:contain;
}

/* リンクの色指定 */

.silica a,
.sasamayu a {
	color:#ffffff;
}
.cosmo a,
.mist a {
    color:#000000;
}

/*
.link_online {
	background:#ffffff;
	width:50%;
	height:60px;
	text-align:center;
	border:2px solid;
	margin:60px auto 0px;
}

.link_online h2 {
	font-size:2rem;
	padding-top:12px;	
}
*/

.flex_online {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
}

.link_online {
    font-size:2rem;
	width:40%;
	text-align:center;
	border:2px solid;
	margin:60px auto 0px;
    padding:12px;
	background-color: #000;
}

.link_online2 {
    font-size:2rem;
	width:40%;
	text-align:center;
	border:2px solid;
	margin:60px auto 0px;
    padding:12px;
	background-color: #000;
	padding-top: 2.5rem;
}

/* テレビショッピングのリンクの色指定 */
.link_online a {
    color:#fff;
}

.link_online2 a {
    color:#fff;
}

/* マウスオーバーしたときの色 */
.link_online a:hover {
    color:#999999;
}

.link_online2 a:hover {
    color:#999999;
}


@media only screen and (max-width:736px) {
	.pbox div {
		width:100%;
	}
	.pbox .tbox h2 {
		font-size:1.8rem;
		margin-bottom:0.5rem;
	}

	.cosmo,
	.sasamayu {
		color:#000000;
	}
	.silica,
	.mist {
		color:#ffffff;
	}
	.cosmo {
		background:#ffffff right no-repeat;
		background-size:contain;
	}
	.sasamayu {
		background:#ffffff url(../img/top/img_sasamayu.png) right no-repeat;
		background-size:contain;
	}
	.mist {
		background:#000000 url(../img/top/img_mist.png) right no-repeat;
		background-size:contain;
	}
	/*
	.link_online h2 {
		font-size:1.8rem;
		margin-bottom:0.5rem;
	}
    */
	/* リンクの色指定 */

	.sasamayu a,
	.cosmo a {
		color:#000000;
	}
	.mist a,
	.silica a {
		color:#ffffff;
	}
    .link_online {
		font-size:1.8rem;
        width:100%;
    }
    .link_online2 {
		font-size:1.8rem;
        width:100%;
		padding-bottom: 2.5rem;
    }	
	
}

/* Information
-------------------------------------------------------*/
.info {
	background-color:#000000;
	color:#ffffff;
	font-size:1.6rem;
	margin-top:60px;
	padding:1.5rem 2rem;
}
.info h2 {
	border-bottom:1px solid #ffffff;
    font-size:2.2rem;
    margin-bottom:0.6em;
	padding-bottom:1rem;
}
.info h2 span {
	padding-left:1rem;
}
.info dl{
	border-bottom:1px solid #ffffff;
	font-size:1.6rem;
	margin:1.6rem 0;
	padding-bottom:1.6rem;

}
.info dt {
	clear:left;
	float:left;
	width:20%;
}
.info dd {
	float:left;
	width:80%;
}
.info dl::after {
    display:block;
    content:"";
    clear:both;
}
.info a {
	color:#ffffff;
}
.info a:hover {
	text-decoration:underline;
}
h2 a:hover {
	opacity:0.6;
}

@media only screen and (max-width:736px) {
	
	.info dl {
		font-size:1.3rem;
	}
	.info dt {
		width:10%;
	}
	.info dd {
		padding-left:15%;
		width:85%;
	}

}