@charset "UTF-8";
@keyframes sk-scaleout { 0% { transform: scale(0); }
	100% { transform: scale(1); opacity: 0; }
}
.recommend .headline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.recommend .headline a { margin: 0; color: #35A18B; text-decoration: none; }
.recommend .headline a::after { content: ""; margin-left: 6px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #35A18B; display: inline-block; }
.recommend .headline a:hover { color: #F25810; }
.recommend .headline a:hover::after { border-left-color: #F25810; }
.recommend-slider { position: relative; }
.recommend-slider *, .recommend-slider *::before, .recommend-slider *::after { box-sizing: border-box; }
.recommend-slider .loading { width: 100%; height: 100%; top: 0; left: 0; background-color: #FFF; position: absolute; z-index: 11; }
.recommend-slider .loading.loaded { opacity: 0; visibility: hidden; }
.recommend-slider .loading .animation { width: 100px; height: 100px; margin: auto; background-color: #1e90ff; border-radius: 100%; animation: sk-scaleout 1s infinite ease-in-out; }
.recommend-slider ul { padding: 0; align-items: stretch !important; }
.recommend-slider li { height: auto; list-style: none; line-height: 1.2; position: relative; }
.recommend-slider li a { height: 100%; margin: 0; text-decoration: none; display: flex; flex-direction: column; }
.recommend-slider li a p { color: #000; }
.recommend-slider li figure { margin: 8px auto; border: 1px solid #e9e9e9; }
.recommend-slider li figure img { width: 100%; height: auto; display: block; }
.recommend-slider li h3 { width: 100%; height: 4.2em; margin: 0; text-align: left; line-height: 1.4em; word-wrap: break-word; overflow: hidden; position: relative; }
.recommend-slider li h3::before { content: "…"; right: 0; bottom: 0; padding-left: 1em; padding-right: 0.2em; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 30%); position: absolute; }
.recommend-slider li h3::after { content: ""; width: 100%; height: 100%; background: #FFF; position: absolute; }
.recommend-slider li h3 span { margin-right: 1em; }
.recommend-slider li p { margin: 0.2em 0 0; text-align: left; }
.recommend-slider li .maker { width: 100%; margin: 0.2em 0 0; line-height: 1.1; display: block; }
.recommend-slider li .stock { padding: 0.2em 0.4em; background-color: #e3e3e3; line-height: 1.1; }
.recommend-slider li p.stock { text-align: center; }
.recommend-slider li .price { margin: 0.2em 0 0; text-align: right; }
.recommend-slider li .price span { color: #E00D0D; font-size: 1.25em; }
.recommend-slider li .price.call { font-size: 0.9em; }
.recommend-slider li .comment span { padding: 0.4em 0.6em; background-color: #F9F9F9; display: block; }
.recommend-slider .recommend-slider-bottom { width: 100%; margin-top: auto; padding-top: 0.2em; }
.recommend-slider .swiper-slide { height: auto; }
.recommend-slider .swiper-button-next { right: 0; }
.recommend-slider .swiper-button-prev { left: 0; }
/* ランキング順位を表示する */
.ranking .swiper-container li::after { content: attr(data-ranknum); width: 28px; height: 28px; top: 0; left: 0; color: #FFF; background-color: #C68214; font-size: 0.75rem; font-weight: bold; text-align: center; line-height: 28px; display: block; position: absolute; }
/* PC/SP別 */
.onlySP .headline a { width: 100%; padding: 8px; border: 1px solid #d3d3d3; border-radius: 5px; font-size: 0.75rem; display: block; }
.onlySP .recommend-slider li a { border: 0; }
.onlySP .recommend-slider li a > *:not(figure) { width: calc(100% - 7vw); margin-left: 3.5vw; margin-right: 3.5vw; }
.onlySP .recommend-slider li figure { width: 40vw; height: 40vw; padding: 4px; }
.onlySP .recommend-slider li h3 { font-size: 0.75rem; }
.onlySP .recommend-slider li h3::after { margin-left: -3.5vw; }
.onlySP .recommend-slider .maker, .onlySP .recommend-slider .stock, .onlySP .recommend-slider .price, .onlySP .recommend-slider .comment span { font-size: 0.625rem; }
.onlySP .recommend-slider .price strong { font-size: 0.75rem; }
.onlySP .recommend-slider .price.call { font-size: 0.76em; }
.onlySP .recommend-slider .swiper-button-prev, .onlySP .recommend-slider .swiper-button-next { opacity: 0.6; }
.onlySP .recommend-slider .swiper-button-prev { left: 0; }
.onlySP .recommend-slider .swiper-button-next { right: 0; }
.onlySP.ranking .swiper-container { margin-top: 2.5vw; }
.onlyPC .headline { padding: 0 4px; }
.onlyPC .headline a { font-size: 0.8125rem; text-align: right; display: inline-block; }
.onlyPC .title01__common { margin: 0 -29px; }
.onlyPC .recommend-slider { padding: 0 29px; }
.onlyPC .recommend-slider .swiper-container { margin-top: 8px; }
.onlyPC .recommend-slider ul { padding-bottom: 24px; }
.onlyPC .recommend-slider li a > *:not(figure) { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; }
.onlyPC .recommend-slider li figure { width: 141px; height: 141px; padding: 8px; }
.onlyPC .recommend-slider li h3 { font-size: 0.8125rem; }
.onlyPC .recommend-slider li p, .onlyPC .recommend-slider li .comment span { font-size: 0.75rem; }
.onlyPC.ranking .swiper-container { margin-top: 16px; }
.recommend.frontpage.onlySP { margin: 32px auto 0; }
.recommend.frontpage.onlySP h2 { font-size: 1em; font-weight: 400; }
.recommend.frontpage.onlyPC { width: 960px; margin: 32px auto 0; }
.recommend.frontpage.onlyPC h2 { font-size: 1.1em; font-weight: 400; }
/* レスポンシブ */
@media screen and (max-width: 767px) {
	.rsp .headline a { width: 100%; padding: 8px; border: 1px solid #d3d3d3; border-radius: 5px; font-size: 0.75rem; display: block; }
	.rsp .recommend-slider li a { width: 100%; padding: 0; border: 0; border-radius: 0; }
	.rsp .recommend-slider li a > *:not(figure) { width: calc(100% - 7vw); margin-left: 3.5vw; margin-right: 3.5vw; }
	.rsp .recommend-slider li figure { width: 40vw; height: 40vw; padding: 4px; }
	.rsp .recommend-slider li h3 { font-size: 0.75rem; }
	.rsp .recommend-slider .maker, .rsp .recommend-slider .stock, .rsp .recommend-slider .price, .rsp .recommend-slider .comment span { font-size: 0.625rem; }
	.rsp .recommend-slider .price strong { font-size: 0.75rem; }
	.rsp .recommend-slider .price.call { font-size: 0.76em; }
	.rsp .recommend-slider .swiper-button-prev, .rsp .recommend-slider .swiper-button-next { opacity: 0.6; }
	.rsp .recommend-slider .swiper-button-prev { left: 0; }
	.rsp .recommend-slider .swiper-button-next { right: 0; }
	.rsp.ranking .swiper-container { margin-top: 2.5vw; }
	.inner .headline a { margin: 0 10px; }
}
@media screen and (min-width: 768px) {
	.rsp .headline { padding: 0 4px; }
	.rsp .headline a { font-size: 0.8125rem; text-align: right; display: inline-block; }
	.rsp .title01__common { margin: 0 -29px; }
	.rsp .recommend-slider { padding: 0 29px; }
	.rsp .recommend-slider .swiper-container { margin-top: 8px; }
	.rsp .recommend-slider ul { padding-bottom: 24px; }
	.rsp .recommend-slider li a > *:not(figure) { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; }
	.rsp .recommend-slider li figure { width: 141px; height: 141px; padding: 8px; }
	.rsp .recommend-slider li h3 { font-size: 0.8125rem; }
	.rsp .recommend-slider li p, .rsp .recommend-slider li .comment span { font-size: 0.75rem; }
	.rsp.ranking .swiper-container { margin-top: 16px; }
}