/*
    Theme Name: SWELL
    Theme URI: https://swell-theme.com/
    Description: シンプルなのに高機能。ブロックエディターの使い心地にこだわった国内最高峰のWordPressテーマ
    Version: 2.12.0
    Requires at least: 5.6
    Requires PHP: 7.3.0
    Author: LOOS,Inc.
    Author URI: https://loos.co.jp/
    Text Domain: swell
    Domain Path: /languages
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

body {
		margin: 0 !important;
	}
	.slider-sec {
		width: 100%;
	}
	.model ul.list {
		list-style: none;
		display: flex;
		max-width: 100%;
		padding: 0;
	}
	.model ul.list img {
		max-width: 100%;
	}
	.model ul.list p {
		text-align: center;
	}
	.watch-slider .slick-slide {
		transition: transform 0.3s ease, opacity 0.3s ease;
		transform: scale(0.8);
		opacity: 0.5;
	}
	.watch-slider .slick-center {
		transform: scale(1);
		opacity: 1;
	}
	.watch-slider li {
		text-align: center;
		padding: 20px;
	}
	.custom-arrow {
		position: absolute;
		top: 50%;
		z-index: 10;
		background: #001c48;
		color: #fff;
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		font-size: 22px;
		line-height: 40px;
		text-align: center;
		transform: translateY(-50%);
		cursor: pointer;
		opacity: 0.9;
	}
	.slick-prev.custom-arrow {
		left: -20px;
	}
	.slick-next.custom-arrow {
		right: -20px;
	}
	.custom-arrow:hover {
		opacity: 1;
		background: #003366;
	}
	.custom-arrow:before {
		display: none;
	}
	
	/* 商品リスト */
	.product-group h3{
		color: #051747;
		border-top: solid 1px #051747;
		border-bottom: solid 1px #051747;
		text-align: center;
		padding: 20px 0;
	}
	.product-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.product-item{
		width: 50%;
		text-align: center;
	}
	.product-item {
		display: none;
	}
	.product-item.visible {
		display: block;
	}
	.slick-prev, .slick-next{
		opacity: 1 !important;
		background: #001c48 !important;
	}
	.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus{
		outline: initial !important;
		display: block !important;
		color: #fff !important;
		background: #001c48 !important;
	}
	.more{
		text-align: center;
		margin: 30px 0;
	}
	.load-more{
		z-index: 5;
		position: relative;
	}
	.load-more_bt{
		z-index: 5;
		position: relative;
		border-radius: 5px;
		background-color: #001c48;
		color: #fff;
	}
	.load-more:before{
		content: "";
		position: absolute;
		width: 100vw;
		height: 200px;
		bottom: 0;
		left: 50%;
		z-index: -1;
		transform: translate(-50%, 0);
		background: linear-gradient(
			to top,
			rgba(255, 255, 255, 0.8) 0%,
			rgba(255, 255, 255, 0.8) 70%,
			rgba(255, 255, 255, 0)
		);
	}