@charset "utf-8";

/* -----------------------------------------------------------------------------

	PC下層共通

----------------------------------------------------------------------------- */
@media print, screen and (min-width: 641px) {
/* mv
------------------------------------------------------------------*/
#contents_block .mv {
	height: 200px;
	position: relative;
}
#contents_block .mv .inner {
	position: relative;
}
#contents_block .mv .inner h2 {
	padding-top: 75px;
}
#contents_block .mv .inner .comment {
	position: absolute;
}
#contents_block .mv .pattern {
	position: absolute;
	z-index: 50;
	bottom: -88px;
	left: 0;
	line-height: 1;
}
/* other
------------------------------------------------------------------*/
#contents_block #other {
	background: #f0f0f0;
	padding: 65px 0;
	position: relative;
}
#contents_block #other ul {
	margin: 30px auto 0;
	display: table;
	width: 100%;
}
#contents_block #other ul li {
    display: inline-block;
    max-width: 327px;
    box-sizing: border-box;
    padding: 0 1%;
    line-height: 1;
    position: relative;
    width: 33%;
}
#contents_block #other ul li a {
	display: block;
	position: relative;
	background: #fff;
	line-height: 0;
}
#contents_block #other ul li a img {
	width: 100%;
	transition: 0.2s;
	-webkit-transition: 0.2s;
}
#contents_block #other ul li a::after,
#contents_block #other ul li a::before,
#contents_block #other ul li a span::after,
#contents_block #other ul li a span::before {
	background-color: #ca2628;
	content: '';
	display: block;
	position: absolute;
	z-index: 10;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
/* 左上へ配置 */
#contents_block #other ul li a::after {
	height: 2px;
	left: 0;
	top: 0;
	width: 0px;
}
/* 右下へ配置 */
#contents_block #other ul li a::before {
	bottom: 0;
	height: 2px;
	right: 0;
	width: 0px;
}
/* 左下へ配置 */
#contents_block #other ul li a span::after {
	bottom: 0;
	height: 0px;
	left: 0;
	width: 2px;
}
/* 右下へ配置 */
#contents_block #other ul li a span::before {
	height: 0px;
	right: 0;
	top: 0;
	width: 2px;
}
/* hover */
#contents_block #other ul li a:hover::after,
#contents_block #other ul li a:hover::before {
	width: 100%;
	width: calc(100%);
}
#contents_block #other ul li a:hover span::after,
#contents_block #other ul li a:hover span::before {
	height: 100%;
	height: calc(100%);
}
#contents_block #other .pattern {
	position: absolute;
	z-index: 50;
	line-height: 1; 
}
#contents_block #other .inner + .pattern {
	top: -44px;
	left: 0;
}
#contents_block #other .inner + .pattern + .pattern {
	bottom: -36px;
	right: 0;
}
/* bnrArea
------------------------------------------------------------------*/
#contents_block #bnrArea {
	padding: 50px 0 60px;
}
#contents_block #bnrArea ul {
	padding: 0 1%;
}
#contents_block #bnrArea ul li {
	float: left;
	width: 49%;
	max-width: 470px;
	line-height: 1;
	position: relative;
}
#contents_block #bnrArea ul li:nth-child(even) {
	float: right;
}
#contents_block #bnrArea ul li a {
	display: block;
	position: relative;
}
#contents_block #bnrArea ul li a img {
	width: 100%;
}
/* smilebisco */
#contents_block #bnrArea ul li.smilebisco a {
	background: url(../common/img/bnr_smilebisco_o.jpg) no-repeat;
	background-size: contain;
}
#contents_block #bnrArea ul li.smilebisco a img {
	opacity: 1;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	backface-visibility: hidden;
}
#contents_block #bnrArea ul li.smilebisco a:hover img {
	opacity: 0;
}
/* onlineshop */
#contents_block #bnrArea ul li.onlineshop a {
	background: url(../common/img/bnr_onlineshop_o.jpg) no-repeat;
	background-size: contain;
}
#contents_block #bnrArea ul li.onlineshop a img {
	opacity: 1;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	backface-visibility: hidden;
}
#contents_block #bnrArea ul li.onlineshop a:hover img {
	opacity: 0;
}
}

@media print, screen and (min-width: 641px) and (max-width: 1400px) {
#contents_block .pattern {
	display: none;
}
}

/* -----------------------------------------------------------------------------

	SP下層共通

----------------------------------------------------------------------------- */
@media print, screen and (max-width: 640px) {

/* mv
------------------------------------------------------------------*/
#contents_block .mv {
	position: relative;
}
#contents_block .mv .inner {
	position: relative;
	padding: 0;
	margin-bottom: -5%;
}
#contents_block .mv .inner h2 {
	padding-top: 20%;
}
#contents_block .mv .inner .comment {
	position: absolute;
}
#contents_block .mv .pattern img {
	margin-bottom: -10%;
}
/* other
------------------------------------------------------------------*/
#contents_block #other {
	background: #f0f0f0;
	padding: 10% 0 13%;
	position: relative;
	z-index: 102;
}
#contents_block #other ul {
	margin-top: 8%;
	padding: 0 3%;
}
#contents_block #other ul li {
	line-height: 1;
}
#contents_block #other ul li + li {
	margin-top: 8%;
}
#contents_block #other ul li a {
	display: block;
}
#contents_block #other ul + .pattern {
	position: absolute;
	top: -4.5%;
	left: 0;
}
#contents_block #other ul + .pattern + .pattern {
	position: absolute;
	bottom: -7.5%;
	left: 0;
}
/* bnrArea
------------------------------------------------------------------*/
#contents_block #bnrArea {
	padding: 12% 0;
	background: #fff;
}
#contents_block #bnrArea ul {
	padding: 0 3%;
}
#contents_block #bnrArea ul li {
	line-height: 1;
}
#contents_block #bnrArea ul li + li {
	margin-top: 5%;
}
#contents_block #bnrArea ul li a {
	display: block;
}
}