@charset "utf-8";
@media screen and (max-width: 760px) {
	/*--------------------------------------------
トップページ(各ページレコメンド)
--------------------------------------------*/
	#index .main_column .magazine_box {
		margin: 0 4% 18px 4%;
		padding: 5px;
		background-image: url("../img/common/bg_magazine.png");
    background-size: 30%;
		border-radius: 3px;
	}
	#index .main_column .magazine_box h2 {
		width: 50%;
		margin: 0 0 10px 0;
		text-align: center;
		float: left;
	}
	#index .main_column .magazine_box form {
		padding: 15px;
		background: #fff;
		border-radius: 3px;
	}
	#index .main_column .magazine_box .ribbon {
		width: 48%;
		float: right;
    margin: 10px 0 0 0;
    padding: 4px 0;
		display: inline-block;
		position: relative;
		box-sizing: border-box;
		background: #ff9aca;
		font-size: 1.1rem;
		line-height: 2.2rem;
		vertical-align: middle;
		text-align: center;
		color: #fff;
	}
	#index .main_column .magazine_box .ribbon:before, .ribbon:after {
		position: absolute;
		content: '';
		width: 0px;
		height: 0px;
		z-index: 1;
	}
	#index .main_column .magazine_box .ribbon:before {
		top: 0;
		left: 0;
		border-width: 15px 0px 15px 5px;
		border-color: transparent transparent transparent #fff;
		border-style: solid;
	}
	#index .main_column .magazine_box .ribbon:after {
		top: 0;
		right: 0;
		border-width: 15px 5px 15px 0px;
		border-color: transparent #fff transparent transparent;
		border-style: solid;
	}
	#index .main_column .magazine_box .box {
		clear: both;
		width: 100%;
    min-height: 48px;
    border: 1px solid #dedede;
    background: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 5px 0 2px;
	}
	#index .main_column .magazine_box .box2 a {
		width: 100%;
    height: 48px;
    display: block;
    background: #ff4ca3;
    border-bottom: 3px solid #bd1466;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 1.6rem;
    margin: 8px 0 0 0;
    font-weight: bold;
	}
	#index .main_column .magazine_box .notes {
		margin: 8px 0 0 0;
		text-align: center;
		text-decoration: underline;
		font-size: 1.0rem;
	}
	#index .main_column .banner {
		margin: 0 4% 40px 4%;
	}
	#index .main_column .banner li {
		margin: 0 0 10px 0;
	}
	#index .main_column h2 {
		margin: 0 4% 2% 4%;
		padding: 0 0 4px 0;
		font-size: 2.4rem;
		font-weight: bold;
		line-height: 1.0;
	}
	.yoyaku h3 {
    border: 1px solid #e2e7e9;
		border-bottom: 3px solid #eec249;
    border-radius: 5px;
    background: #fff;
    margin: 2% 4% 4% 4%;
    padding: 10px 16px;
    font-size: 1.5rem;
    font-weight: bold;
	}
	.shinsaku h3 {
    border: 1px solid #e2e7e9;
		border-bottom: 3px solid #ff6255;
    border-radius: 5px;
    background: #fff;
    margin: 2% 4% 4% 4%;
    padding: 10px 16px;
    font-size: 1.5rem;
    font-weight: bold;
	}
	.junshinsaku h3 {
    border: 1px solid #e2e7e9;
		border-bottom: 3px solid #99cc66;
    border-radius: 5px;
    background: #fff;
    margin: 2% 4% 4% 4%;
    padding: 10px 16px;
    font-size: 1.5rem;
    font-weight: bold;
	}
	section.product_list_wrap {
		padding: 0;
		margin: 0 0 10px 0;
	}
	.product_list_wrap .list_box {
		display: flex;
		justify-content: flex-start;
	}
	.product_list_wrap .list_box:after {
		content: "";
		display: block;
		width: 24.5%;
		height: 0;
	}
	.product_list_wrap .list_box img {
		width: 100%;
		overflow: hidden;
	}
	.product_list_wrap .list_box li a:before {
		padding: 3px 0;
		display: block;
		color: #fff;
		text-align: center;
		line-height: 1.5;
		font-weight: bold;
		letter-spacing: .5em;
	}
#index .list_box li.yoyaku a:before {
		content: "予約";
		background: linear-gradient(#eec249, #d6a41a);
	}
#index .list_box li.shinsaku a:before {
		content: "新作";
		background: linear-gradient(#ff6255, #e83a2c);
	}
#index .list_box li.junshinsaku a:before {
		content: "準新作";
		background: linear-gradient(#99cc66, #71b72c);
	}
	.product_list_wrap .list_box li p {
		line-height: 1.6;
	}
	.product_list_wrap .list_box li .caption {
		display: none;
	}
	.main_column .btn_more_all {
		margin: 20px 4% 0 4%;;
		padding: 15px 0;
		background: #fff;
		border: 1px solid #d4dadd;
    border-bottom: 3px solid #d4dadd;
		border-radius: 50px;
		box-sizing: border-box;
		text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
	}
	.main_column .btn_more_all:before {
		content: '作品一覧へ';
	}
	.main_column .btn_more_all:after {
		font-family: 'Material Icons';
		content: "keyboard_arrow_right";
		font-size: 2.0rem;
		vertical-align: -5px;
		display: inline-block;
		-webkit-font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
		fill: #ff4ca3;
		color: #ff4ca3;
		position: absolute;
		right: 25px;
	}
	/*********4列の場合**********/
	.product_list_wrap .list_box figure {
		height: 100%;
		overflow: hidden;
		background: #f1f2f3;
	}
	.product_list_wrap .list_box li {
		margin-right: 5px;
		box-sizing: border-box;
		overflow: hidden;
	}
	.horizontal_scroll {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		padding: 0 0 3% 4%;
		display: -ms-flexbox;
		display: flex;
	}
	.horizontal_scroll > li {
		width: 100%;
		height: 100%;
		min-width: 60%;
	}
	.horizontal_scroll > li:not(:last-child) {
		margin-right: 5px;
	}
	.horizontal_scroll > li:last-child {
		padding-right: 0;
	}
	.horizontal_scroll img {
		vertical-align: bottom;
	}

.product_list_wrap .list_box figure.ssp img{
		width:190%;
		margin: 0 0 0 -90%;
	}

.product_list_wrap .list_box figure.ssp img.sppppppppppppppp{
		width:100%;
		margin: 0 0 0 0%;
	}


	#index .news {
		margin: 0 0 20px 0;
    padding-top: 30px;
    padding-bottom: 20px;
		background: #f1f2f3;
	}
	#index .news h2 {
		margin: 0 0 25px 0;
    font-size: 1.8rem;
    text-align: center;
    font-weight: bold;
	}
	#index .news_list {
		background: #fff;
		border: 1px solid #e2e7e9;
    border-radius: 5px;
	}
	#index .news_list .item {
    clear: both;
		padding: 15px 4% 15px 4%;
		border-bottom: 1px solid #e2e7e9;
		font-size: 1.2rem;
	}
	#index .news_list .item:last-child {
		border-bottom: 0;
	}
	#index .news_list .item .date {
		vertical-align: middle;
		font-size: 1rem;
	}
	#index .news_list .item .category {
		width: 80px;
		margin: 0 12px;
		padding: .50em 0;
		display: inline-block;
		background: #ff4ca3;
		border: 1px solid #ff4ca3;
		border-radius: 5px;
		font-size: 1rem;
		text-align: center;
		color: #fff;
		line-height: 1.0;
		-webkit-transition: color 1s ease;
		-o-transition: color 1s ease;
		transition: color 1s ease;
	}
	#index .news_list .item .category:hover {
		background: #fff;
		border: 1px solid #ff4ca3;
		color: #ff4ca3;
		-webkit-transition: color 1s ease;
		-o-transition: color 1s ease;
		transition: color 1s ease;
	}
	#index .news_list .item .newstitle {
		margin: 15px 0 0 0;
		line-height: 1.6;
	}
	#index .news_list .item .newstitle a:hover {
		cursor: pointer;
	}
}