@charset "utf-8";

/**
 * section06.css
 * .sectionwrapper.section06 内のコンテンツ用
 * 対象: #lineup（商品情報）, #brand（ブランド）, #buy（購入）
 * 640px以下: SP / 641px以上: PC（当ページのブレークポイントに合わせて 768px→641px に変更可能）
 */

/* ========================================
   .section06 共通
======================================== */
.sectionwrapper.section06 {
	background: #fff;
}

.sectionwrapper.section06 .slick-dots button:before {
	font-size: 0;
}

/* ========================================
   PC（768px以上）
======================================== */
@media screen and (min-width: 641px) {

	.sectionwrapper.section06 {
		min-width: 1260px;
	}

	/* ---- #lineup 商品情報 ---- */
	.sectionwrapper.section06 #lineup {
		color: #00a63c;
	}

	.sectionwrapper.section06 #lineup .contentsinner {
		width: 1260px;
		padding: 15% 0 5% 0;
		margin: 0 auto;
		position: relative;
	}

	.sectionwrapper.section06 #lineup .lineuptitle {
		margin: 0 0 80px 0;
	}

	.sectionwrapper.section06 #lineup .lineuptitle .label {
		font-size: 22px;
		margin: 0 0 20px 0;
	}

	.sectionwrapper.section06 #lineup .lineuptitle .title {
		font-size: 60px;
		letter-spacing: 0.05em;
	}

	.sectionwrapper.section06 #lineup .products01 {
		margin: 0 0 80px 0;
	}

	.sectionwrapper.section06 #lineup h3 {
		font-size: 40px;
		margin: 0 0 40px 0;
		letter-spacing: 0.05em;
	}

	.sectionwrapper.section06 #lineup .lineuplist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 0 20px 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist li {
		width: 49%;
		margin: 0 0 80px 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slideinner {
		display: flex;
		justify-content: space-between;
	}

	.sectionwrapper.section06 #lineup .lineuplist .productpic {
		width: 35%;
	}

	.sectionwrapper.section06 #lineup .lineuplist .producttext {
		width: 63%;
		padding: 10% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .products02 .lineuplist .productpic {
		width: 35%;
		margin: 0 0 0 -4%;
	}

	.sectionwrapper.section06 #lineup .products02 .lineuplist .producttext {
		width: 65%;
		padding: 16% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slide03 .producttext {
		padding: 5% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slide04 .producttext {
		padding: 5% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .productname {
		font-size: 32px;
		font-weight: 600;
		margin: 0 0 15px 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .productdata {
		font-size: 20px;
	}

	.sectionwrapper.section06 #lineup .lineuplist .producttext .link {
		text-align: right;
		margin: 30px 0 0 0;
		padding: 0 20% 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .producttext .link a {
		display: inline-block;
		width: 85px;
		transition: 0.3s;
	}

	.sectionwrapper.section06 #lineup .lineuplist .producttext .link a:hover {
		transform: translateX(10px);
	}

	.sectionwrapper.section06 #lineup .lineupbnr {
		width: 1260px;
		margin: 0 auto;
	}

	.sectionwrapper.section06 #lineup .lineupbnr h3 {
		margin: 0 0 80px 0;
		font-size: 32px;
	}

	.sectionwrapper.section06 #lineup .productbnr {
		margin: 0 0 10% 0;
	}

	.sectionwrapper.section06 #lineup .productbnr a {
		padding: 20px;
		border-radius: 25px;
		box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.2);
		width: 960px;
		margin: 0 auto;
		text-align: center;
		display: block;
		position: relative;
		color: #000;
		text-decoration: none;
		transition: 0.3s;
	}

	.sectionwrapper.section06 #lineup .productbnr a:hover {
		transform: scale(1.02);
	}

	.sectionwrapper.section06 #lineup .productbnr .caption {
		text-align: center;
		font-size: 18px;
		margin: 20px 0 0 0;
		line-height: 1.5;
	}

	/* ---- #brand ブランド ---- */
	.sectionwrapper.section06 #brand {
		color: #00a63c;
	}

	.sectionwrapper.section06 #brand .contentsinner {
		width: 1260px;
		padding: 10% 0 5% 0;
		margin: 0 auto;
		position: relative;
		border-top: 3px solid #00a63c;
	}

	.sectionwrapper.section06 #brand .brandtitle {
		margin: 0 0 80px 0;
	}

	.sectionwrapper.section06 #brand .brandtitle .label {
		font-size: 22px;
		margin: 0 0 20px 0;
	}

	.sectionwrapper.section06 #brand .brandtitle .title {
		font-size: 40px;
	}

	.sectionwrapper.section06 #brand .brandlist {
		display: flex;
		justify-content: space-between;
	}

	.sectionwrapper.section06 #brand .brandlist li {
		width: 31%;
	}

	.sectionwrapper.section06 #brand .brandlist li a {
		display: block;
		transition: 0.3s;
		position: relative;
		color: #000;
		text-decoration: none;
	}

	.sectionwrapper.section06 #brand .brandlist li a:hover {
		transform: scale(1.05);
	}

	.sectionwrapper.section06 #brand .bnrlabel {
		position: absolute;
		bottom: 13%;
		left: 0;
		display: block;
		width: 100%;
		text-align: center;
		font-size: 18px;
		padding: 0 5%;
	}

	/* ---- #buy 購入 ---- */
	.sectionwrapper.section06 #buy {
		color: #00a63c;
	}

	.sectionwrapper.section06 #buy .contentsinner {
		width: 1260px;
		padding: 5% 0 10% 0;
		margin: 0 auto;
		position: relative;
	}

	.sectionwrapper.section06 #buy .buybox {
		border: 3px solid #00a63c;
		padding: 50px 40px 30px 40px;
		border-radius: 20px;
		position: relative;
	}

	.sectionwrapper.section06 #buy .buybox h3 {
		position: absolute;
		top: -25px;
		left: 60px;
		font-size: 32px;
		font-weight: 600;
		padding: 10px;
		background: #fff;
	}

	.sectionwrapper.section06 #buy .buybox .text {
		font-size: 20px;
		padding: 0 30px;
		margin: 0 0 40px 0;
	}

	.sectionwrapper.section06 #buy .buylist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.sectionwrapper.section06 #buy .buylist li {
		width: 18%;
		margin: 0 0 30px 0;
	}
}

/* ========================================
   SP（767px以下）
======================================== */
@media screen and (max-width: 640px) {

	/* ---- #lineup 商品情報 ---- */
	.sectionwrapper.section06 #lineup {
		color: #00a63c;
	}

	.sectionwrapper.section06 #lineup .contentsinner {
		padding: 15% 5% 10% 5%;
		margin: 0 auto;
		position: relative;
	}

	.sectionwrapper.section06 #lineup .lineuptitle {
		margin: 0 0 8% 0;
	}

	.sectionwrapper.section06 #lineup .lineuptitle .label {
		font-size: 4vw;
		margin: 0 0 3% 0;
	}

	.sectionwrapper.section06 #lineup .lineuptitle .title {
		font-size: 6vw;
		letter-spacing: 0.05em;
	}

	.sectionwrapper.section06 #lineup .products01 {
		margin: 0 0 10% 0;
	}

	.sectionwrapper.section06 #lineup h3 {
		font-size: 6vw;
		margin: 0 0 5% 0;
		letter-spacing: 0.05em;
	}

	.sectionwrapper.section06 #lineup .lineuplist {
		padding: 0 0 10% 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slideinner li {
		width: 100%;
		margin: 0 0 8% 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slideinner {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.sectionwrapper.section06 #lineup .lineuplist .productpic {
		width: 45%;
	}

	.sectionwrapper.section06 #lineup .lineuplist .producttext {
		width: 50%;
		padding: 15% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .products02 .lineuplist .producttext {
		padding: 20% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .productname {
		font-size: 5vw;
		font-weight: 600;
		margin: 0 0 5% 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .productdata {
		font-size: 4vw;
	}

	.sectionwrapper.section06 #lineup .lineuplist .producttext .link {
		text-align: right;
		margin: 8% 0 0 0;
		padding: 0 5% 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .producttext .link a {
		display: inline-block;
		width: 40%;
		transition: 0.3s;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slide03 .productpic {
		padding: 8% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slide03 .producttext {
		padding: 15% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slide04 .productpic {
		padding: 8% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .lineuplist .slide04 .producttext {
		padding: 15% 0 0 0;
	}

	.sectionwrapper.section06 #lineup .slick-dots {
		bottom: -5%;
	}

	.sectionwrapper.section06 #lineup .slick-dots li {
		width: 20px;
		margin: 0 5%;
	}

	.sectionwrapper.section06 #lineup .slick-dots li button {
		padding: 0;
		width: 20px;
		height: 3px;
		background: #ccc;
	}

	.sectionwrapper.section06 #lineup .slick-dots li.slick-active button {
		padding: 0;
		background: #00a63c;
	}

	.sectionwrapper.section06 #lineup .lineupbnr {
		padding: 0 5%;
	}

	.sectionwrapper.section06 #lineup .lineupbnr h3 {
		margin: 0 0 8% 0;
		line-height: 1.2;
		font-size: 5vw;
	}

	.sectionwrapper.section06 #lineup .productbnr {
		margin: 0 0 10% 0;
	}

	.sectionwrapper.section06 #lineup .productbnr a {
		padding: 3%;
		border-radius: 15px;
		box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.2);
		width: 95%;
		margin: 0 auto;
		text-align: center;
		display: block;
		position: relative;
		color: #000;
		text-decoration: none;
	}

	.sectionwrapper.section06 #lineup .productbnr .caption {
		text-align: center;
		font-size: 2.5vw;
		margin: 3% 0 0 0;
		line-height: 1.5;
	}

	/* ---- #brand ブランド ---- */
	.sectionwrapper.section06 #brand {
		color: #00a63c;
	}

	.sectionwrapper.section06 #brand .contentsinner {
		padding: 15% 5% 10% 5%;
		margin: 0 auto;
		position: relative;
		border-top: 3px solid #00a63c;
	}

	.sectionwrapper.section06 #brand .brandtitle {
		margin: 0 0 8% 0;
	}

	.sectionwrapper.section06 #brand .brandtitle .label {
		font-size: 4vw;
		margin: 0 0 3% 0;
	}

	.sectionwrapper.section06 #brand .brandtitle .title {
		font-size: 6vw;
	}

	.sectionwrapper.section06 #brand .brandlist {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.sectionwrapper.section06 #brand .brandlist li {
		width: 49%;
	}

	.sectionwrapper.section06 #brand .brandlist li a {
		display: block;
		position: relative;
		color: #000;
		text-decoration: none;
	}

	.sectionwrapper.section06 #brand .bnrlabel {
		position: absolute;
		bottom: 13%;
		left: 0;
		display: block;
		width: 100%;
		text-align: center;
		font-size: 2.5vw;
		padding: 0 1%;
	}

	/* ---- #buy 購入 ---- */
	.sectionwrapper.section06 #buy {
		color: #00a63c;
	}

	.sectionwrapper.section06 #buy .contentsinner {
		padding: 5% 5% 10% 5%;
		margin: 0 auto;
		position: relative;
	}

	.sectionwrapper.section06 #buy .buybox {
		border: 3px solid #00a63c;
		padding: 30px 8% 5% 8%;
		border-radius: 20px;
		position: relative;
	}

	.sectionwrapper.section06 #buy .buybox h3 {
		position: absolute;
		top: -20px;
		left: 5%;
		font-size: 5vw;
		font-weight: 600;
		padding: 10px;
		background: #fff;
	}

	.sectionwrapper.section06 #buy .buybox .text {
		font-size: 4vw;
		line-height: 1.5;
		margin: 0 0 8% 0;
	}

	.sectionwrapper.section06 #buy .buylist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.sectionwrapper.section06 #buy .buylist li {
		width: 48%;
		margin: 0 0 5% 0;
	}
}