@charset "UTF-8";

/*＝＝メイン*/
/*H１アアニメーション　画像ソース・色など以外は commonCSSに*/
#secTop {
	background: url(../img/main/goods.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

#secTop > .topTitle h1{
	color: #fff;
	font-size: 4vw;
	font-weight: 100;
}

#secTop > #startborder h1{
/*	background-color: rgba(255,255,255,0.7);*/
}

.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
	background-color: #fff;
}

.line {
	background: linear-gradient(transparent 50%, #ffe400 50%);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝オンライン告知*/

.for_online a{
	display: block;
	width: 90vw;
	text-align: center;
	margin: 2vw auto;
	/* 22px @ 390px increasing to 40px @ 1080px */
	font-size: min(max(22px, calc(1.375rem + ((1vw - 3.9px) * 2.6087))), 40px);
	min-height: 0vw;
	font-weight: bold;
	padding: 2vw;
	border: solid 2px #af0800;
	color: #af0800;
	-webkit-transition: all 1.5s ease;　/*--変化にかかる時間--*/
	transition-delay: 1.5s;　/*--変化までのまち時間--*/
}

.for_online a:hover{
	color: #fff;
	background-color: #af0800;

}

/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック1*/

.block_1 {
	padding: 6vw 0px;
}

.wap_1 {
	width: 100vw;
	overflow: hidden;
	position: relative;
}

.wap_1 .saru_right {
	width: 20vw;
	position: absolute;
	bottom: 0vw;
	right: -30vw;
	z-index: 2;
	-webkit-transition: all 1.0s ease;　/*--変化にかかる時間--*/
}

.wap_1 .saruMove {
	position: absolute;
	bottom: 0;
	right: 0;
	transition-delay: 0.5s;　/*--変化までのまち時間--*/
}




.block_1 .inner{
	padding: 0px 5vw;
}
.block_1 h2 {
	width: 15%;
	/* 22px @ 390px increasing to 43px @ 1080px */
	font-size: min(max(22px, calc(1.375rem + ((1vw - 3.9px) * 3.0435))), 43px);
	min-height: 0vw;
	-ms-writing-mode: tb-rl;
 	writing-mode: vertical-rl;
 	order: 2;
}



.block_1 h2 span {
background: #ffffff;
background: -moz-linear-gradient(left, #ffe400 0%, #ffe400 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left center, right center, from(#ffe400), color-stop(50%, #ffe400), color-stop(51%, #ffffff), to(#ffffff));
background: -webkit-linear-gradient(left, #ffe400 0%, #ffe400 50%, #ffffff 51%, #ffffff 100%);
background: -o-linear-gradient(left, #ffe400 0%, #ffe400 50%, #ffffff 51%, #ffffff 100%);
background: linear-gradient(to right, #ffe400 0%, #ffe400 50%, #ffffff 51%, #ffffff 100%);
}

.block_1 h2 .pt {
	margin-top: 10vw;
}

.block_1 .imgWap {
	width: 85%;
	order: 1;
}

.imgBox .item_Name{
	font-size: 20px;
	text-align: center;
}

.imgBox .item_Name span{
	font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Osaka", Arial, sans-serif;
}

.iname_s {
	font-size: 16px;
}

.block_1 .box1 {
	width: 60%;
	max-width: 434px;
}

.block_1 .box2 {
	width: 50%;
	max-width: 389px;
	margin: -100px 0 0 auto;
}

.block_1 .box3 {
	width: 70%;
	max-width: 659px;
	margin-top: -100px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック2*/

.block_2 {
	background: url(../img/goods/nami_usu.jpg);
	padding: 6vw 0px;
}

.block_2 .box1 {
	width: 20%;
	max-width: 200px;
	margin-left: 100px;
}

.block_2 .box2 {
	width: 65%;
	max-width: 733px;
	margin: -150px 0 0 auto;
}

.block_2 .box3 {
	width: 30%;
	margin-top: -150px;
	margin-left: 200px;
}

.block_2 .box3 img{
	max-width: 190px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック3*/
.block_3 {
	padding: 6vw 0px;
}

.block_3 .leftBox {
	width: 75%;
}

.block_3 .rightBox {
	padding-top: 15vw;
	width: 25%;
}

.imgBox {
	text-align: center;
}

.block_3 .box1 {
	margin-bottom: 4vw;
}

.block_3 .box3 {
	margin-bottom: 10vw;
}


.block_3 .box1 img{
	max-width: 687px;
}

.block_3 .box2 img{
	max-width: 313px;
}

.block_3 .box3 img{
	max-width: 204px;
}

.block_3 .box4 img{
	max-width: 235px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック4*/

.block_4 {
	background: url(../img/goods/nami_usu.jpg);
	padding: 6vw 0px;
}

.block_4 .imgBox {
	width: 48%;
	text-align: center;
}

.block_4 .box1,
.block_4 .box2 {
	margin-bottom: 5vw;
}

.block_4 .box1 img { max-width: 372px; }
.block_4 .box2 img { max-width: 494px; }
.block_4 .box3 img { max-width: 358px; }
.block_4 .box4 img { max-width: 402px; }

/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック4*/

.block_5 {
	padding: 6vw 0px;
}

.wap_5 {
	padding: 0px 2%
}

.block_5 .leftBox {
	width: 48%;
}

.block_5 .rightBox {
	width: 48%;
}
.block_5 .box2,
.block_5 .box3 {
	margin-bottom: 3vw;
}

.block_5 .box2 {
	text-align: right;
}
.block_5 .box2 p{
	text-align: right;
}


.block_5 .box1 img { max-width: 491px; }
.block_5 .box2 img { max-width: 160px; }
.block_5 .box3 img { max-width: 428px; }
.block_5 .box4 img { max-width: 497px; }




/*
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　スマホ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
*/


@media handheld, only screen and (max-width: 767px) {
	#secTop {
		background: url(../img/main/goods_sp.jpg) no-repeat;
		background-size: cover;
		background-position: center;
	}


/*＝＝＝＝＝＝＝＝＝＝＝＝オンライン告知SP */

/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック1　SP*/
	.imgBox .item_Name{
		font-size: 16px;
	}

	.iname_s {
		font-size: 14px;
	}

	.wap_1 .saru_right {
		width: 30vw;
		right: -30vw;
	}

	.wap_1 .saruMove {
		position: absolute;
		bottom: 0;
		right: 0;
		transition-delay: 0.5s;　/*--変化までのまち時間--*/
	}


	.block_1 .inner{
		padding: 0px 2vw;
	}

	.block_1 h2 .pt {
		margin-top: 15vw;
	}

	.block_1 .box1 {
		width: 70%;
		max-width: 434px;
	}

	.block_1 .box2 {
		width: 50%;
		max-width: 389px;
		margin: 0px 0 0 auto;
	}

	.block_1 .box3 {
		width: 70%;
		max-width: 659px;
		margin-top: -10px;
	}

/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック2　SP*/
	.block_2 .box1 {
		width: 30%;
		max-width: 200px;
		margin-left: 10px;
	}

	.block_2 .box2 {
		width: 70%;
		max-width: 733px;
		margin: -50px 0 0 auto;
	}


	.block_2 .box3 {
		width: 45%;
		margin-top: -100px;
		margin-left: 20px;
	}


/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック3 SP*/

	.block_3 .wap_1 {
		padding: 0px 3vw;
	}

	.block_3 .leftBox {
		width: 70%;
	}

	.block_3 .rightBox {
		padding: 15vw 3vw 0vw;
		width: 30%;
	}

	.block_3 .box2 {
		/*width: 50%;*/
		margin: 0px auto;
	}

	.block_3 .box2 img{
		width: 50%;
	}

/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック4 SP*/

	.block_4 .box2 {
		padding-top: 50px;
	}

	.block_4 .box4 {
		padding-top: 50px;
	}

	.block_4 .box1 img { width: 60%; }
	.block_4 .box2 img { width: 60%; }
	.block_4 .box3 img { width: 60%; }
	.block_4 .box4 img { width: 60%; }


/*＝＝＝＝＝＝＝＝＝＝＝＝ブロック　5*/

	.wap_5 {
		padding: 0px 2%
	}

	.block_5 .box2 img { width: 40%; }

	.block_5 .box2 {
		text-align: center;
	}
	.block_5 .box2 p{
		text-align: center;
	}











}


@media handheld, only screen and (max-width: 480px) {


}