@charset "utf-8";

/* ------------
 font
------------  */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');

/* ------------
 common
------------  */

html,body,h1,h2,h3,h4,h5,h6,p,span,div,a,
ul,ol,li,dl,dt,dd,
table,caption,th,td,
form,button,label,address,blockquote,
article,aside,canvas,details,figcaption,figure, 
footer,main,header,img,nav,section,summary,
time,mark,audio,video, small {
	display: block;
	margin: 0;
	padding: 0;
	border:0;
	outline:0;
	font-size: 15px;
	font-weight: normal;
	font-family: 'メイリオ', 'Meiryo', sans-serif;
	text-decoration: none;
	line-height: 2;
	letter-spacing: .07rem;
	color: #000;
}

body {
	background-color: #000;
}

._sp {
	display: none !important;
}

._pc {
	display: block;
}

/* ------------
 fv
------------  */

header {
	background-image: url(img/bg01_fv.png);
	background-position: top 0 left 0;
	background-size: 105%;
	background-repeat: no-repeat;
	height: 62vw;
	position: relative;
}

.fv_ttl {
	width: 15%;
	height: auto;
	position: absolute;
	top: 5%;
	left: 70%;
}

.fv_txt {
	width: 300px;
	color: #fff;
	position: absolute;
	top: 70%;
	left: 70%;
}

.fv_tagline {
	width: 13%;
	height: auto;
	position: absolute;
	bottom: 10%;
	left: 5%;
}

.scroll-down {
	position: absolute;
    top: 85%;
    left: 50%;
    display: block;
    width: 1rem;
    height: 15vw;
}

.scroll-down span {
	width: 1px;
	height: 100%;
    background-color: #aeaeae;
    animation: sdl01 3s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ------------
 section1
------------  */

.section1 {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.section1 .pruduct-img {
	width: 150px;
	padding-right: 30px;
}

.section1 section {
	margin-left: 3%;
	width: 550px;
	position: relative;
}

.section1 .product-name {
	color: #fff;
	font-size: 1.5rem;
}

.section1 .product-name span{
	display: inline;
	color: #fff;
}

.section1 .product-name .price{
	font-weight: normal;
	margin-left: 2rem;
	font-size: 1.5rem;
}

.section1 .product-name .price .mark,
.section1 .product-name .price .tax{
	font-size: 1rem;
}



.section1 .product-tagline {
	position: absolute;
	top: -175px;
	width: 280px;
}

.section1 .product-txt {
	margin-top: 8px;
	color: #fff;
}

.section1 .amazon-link {
	background: #fff;
	width: 200px;
	text-align: center;
	line-height: 3;
	margin-top: 30px;
	margin-bottom: 50px;
	padding-right: .5rem;
	border-bottom: 2px solid #4e4e4e;
	box-shadow: 0 2px 7px rgba(255, 255, 255, .4);
	transition: 0.5s;
	position: relative;
}

.section1 .amazon-link::after {
	content: "▶︎";
	display: block;
	font-size: .5rem;
	position: absolute;
	left: 90%;
	top: calc(50% - .25rem);
	line-height: 1;
}

.section1 .amazon-link.amazon-link:hover {
	color: #fff;
	background: #4e4e4e;
	transform: translateY(3px);
}

/* ------------
 section2
------------  */

.section2 {
	margin-top: 60px;
	height: 700px;
	background-image: url(img/bg02.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.section2 .section2-tagline {
	position: absolute;
	top: 60%;
	left: calc(50% - 550px);
	width: 455px;
	height: auto;
}

.section2 .section2-txt {
	width: 350px;
	position: absolute;
	top: calc(60% + 60px);
	left: calc(50% - 550px);
}

/* ------------
 section3
------------  */

.section3 {
	height: 700px;
	background-image: url(img/bg03.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.section3 .section3-tagline {
	position: absolute;
	top: 60%;
	left: calc(50% + 100px);
	width: 238px;
	height: auto;
}

.section3 .section3-txt {
	width: 450px;
	position: absolute;
	top: calc(60% + 60px);
	left: calc(50% + 100px);
}

/* ------------
 section4
------------  */

.section4 {
	background-color: #fff;
	position: relative;
	padding-top: 125px;
	padding-left: calc(50% - 550px);
}

.section4 .section4-tagline {
	width: 193px;
	height: auto;
}

.section4 .section4-txt {
	width: 450px;
	margin-top: 25px;
}

.section4 .section4_img-box {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.section4 .section4_img {
	width: auto;
	height: 100%;
}

.section4 .order_box {
	position: relative;
	height: 10rem;
	padding: 50px 0 20px 200px;
	margin-top: 30px;
}

.section4 .order_box .pruduct-img {
	position: absolute;
	width: 100px;
	left: 50px;
	top: 0;
}

.section4 .amazon-link {
	background: #4e4e4e;
	color: #fff;
	width: 200px;
	text-align: center;
	line-height: 3;
	margin-top: 20px;
	padding-right: .5rem;
	border-bottom: solid 1px #fff;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
	transition: 0.5s;
	position: relative;
}

.section4 .amazon-link::after {
	content: "▶︎";
	display: block;
	font-size: .5rem;
	position: absolute;
	left: 90%;
	top: calc(50% - .25rem);
	line-height: 1;
}

.section4 .amazon-link.amazon-link:hover {
	color: #4e4e4e;
	background: #fff;
	transform: translateY(3px);
}


/* ------------
 footer
------------  */


footer .shop_box {
	color: #fff;
	padding: 75px 0 25px 0;
	width: 70%;
	margin: 0 auto;
	display: flex;
	justify-content: space-evenly;
}
footer .shop_logo {
	display: block;
	width: 270px;
}
footer .shop_h3 {
	display: block;
	width: 210px;
}
footer .shop_p {
	color: #fff;
}
footer .shop_info {
	/* margin-left: 300px; */
	color: #fff;
}

footer small{
	background-color: #fff;
	text-align: center;
	line-height: 3;
	font-size: .75rem;
}

/* ------------
 min-1400px
------------  */

@media (min-width: 1455px) {
	.section4 .section4_img {
		width: 100%;
		height: auto;
	}
}

/* ------------
 min-500px max-1200px
------------  */

@media (min-width: 600px ) and ( max-width: 1200px) {

	html,body,h1,h2,h3,h4,h5,h6,p,span,div,a,
	ul,ol,li,dl,dt,dd,
	table,caption,th,td,
	form,button,label,address,blockquote,
	article,aside,canvas,details,figcaption,figure, 
	footer,main,header,img,nav,section,summary,
	time,mark,audio,video, small {
		font-size: clamp(14px, 1.4vw, 16px)
	}

	.fv_ttl,
	.fv_txt {
		left: 65%;
	}

	.fv_txt {
		max-width: 27vw;
		font-size: clamp(10px, 1.4vw, 16px)
	}
	
	.section1 .product-txt {
		font-size: clamp(10px, 1.4vw, 16px)
	}

	.section1 .pruduct-img {
		max-width: 20vw;
	}

	.section1 section {
		max-width: 40vw;
	}
	
	.section1 .product-tagline {
top:-140px;
		max-width: 40vw;
	}


	
	.section2,
	.section3 {
		height: 650px;
	}
	
	.section2 .section2-tagline {
		left: 5%;
		width: 400px;
	}

	.section2 .section2-txt {
	left: 5%;
	}

	.section3 .section3-tagline{
		left: 50%;
		width: 250px;
		top: calc(50% + 1px);
	}

	.section3 .section3-txt {
		left: 50%;
		max-width: 50vw;
		top: calc(50% + 60px);
	}
	
	.section4 {
		padding-left: 5%;
	}

	/* .section4 .section4-tagline {
		max-width: 20vw;
	} */

	.section4 .section4-txt {
		max-width: 40vw;
	}

	.section4 .order_box {
		padding-left: 15vw;
	}

	.section4 .order_box .pruduct-img {
		max-width: 9vw;
		left: 4vw;
	}
	
	.section4 .order_box .amazon-link {
		max-width: 17vw;
	}
	footer .shop_box {
		width: 95%;
		padding: 25px 0 25px 0;
	}
	footer .shop_logo {
		width: 150px;
	}
	footer .shop_h3 {
		width: auto;
}

}
/* ------------
max-500px
------------  */

@media (max-width: 600px) {	

	._sp {
		display: block !important;
	}

	._pc {
		display: none !important;
	}

	header {
		height: 200vw;
		background-size: 350vw;
		background-position: top 0 left -26vw;
		margin-bottom: calc(210px + 30vw);
	}
	
	.fv_ttl {
		width: 33%;
		left: 58%;
	}
	
	.fv_tagline {
		width: 32%;
		left: 3%;
	}
	
	.fv_txt {
		top: 200vw;
		width: 80vw;
		padding: 15vw 10vw;
		left: 0;
	}
	
	.section1 {
		display: block;
	}

	.section1 .pruduct-img {
		width: 37%;
		margin-left: 3%;
	}
	
	.section1 section {
		width: 85%;
		margin: auto;
	}
	
	.section1 .product-name {
		width: 6em;
		line-height: 1.5;
		position: absolute;
		top: -150px;
		left: 53%;
		font-size: 5.5vw
	}
	.section1 .product-name .price{
	margin-left: 0;
}
	
	.section1 .product-tagline {
		width: 38%;
		max-width: 120px;
		top: -450px;
		left: 53%;
	}

	
	.section1 .amazon-link {
		margin-left: auto;
		margin-right: auto;
	}
	
	.section2 {
		background-size: 1370px;
		background-position: top left 85%;
	}
	
	.section2 .section2-tagline {
		width: 90%;
		top: 70%;
		left: 5%;
	}

	.section2 .section2-txt {
		width: 90%;
		top: calc(70% + 15vw);
		left: 5%;
	}

	.section3 {
		background-size: 1450px;
		background-position: top left 25%;
	}
	
	.section3 .section3-tagline {
		width: 50%;
		top: 60%;
		left: 5%;
	}

	.section3 .section3-txt {
		width: 90%;
		top: calc(60% + 15vw);
		left: 5%;
	}
	
	.section4 .section4_img-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.section4 .section4_img {
		width: 200%;
		position: absolute;
		top: -10%;
	}
	
	.section4 .section4-tagline {
		position: relative;
		z-index: 2;
		width: 40%;
		margin-left: 5%;
	}

	.section4 .section4-txt {
		position: relative;
		z-index: 2;
		width: 90%;
		margin-left: 5%;		
	}

	.section4 .order_box {
		background: #fff;
		height: auto;
		padding: 60% 0 30px;
		margin-top: 350px;
	}

	.section4 .order_box .pruduct-img {
		top: -33%;
		left: 35%;
		width: 30%;
	}

	.section4 .order_txt {
		text-align: center;
	}

	.section4 .order_box .amazon-link {
		margin-left: auto;
		margin-right: auto;
	}


	footer .shop_box {
		color: #fff;
		padding: 50px 0;
		width: 95%;
		margin: 0 auto;
		text-align: center;
		display: block;
	}
	
	footer .shop_logo {
		margin: 0 auto;
		width: 270px;
		margin-bottom: 20px;
	}
	footer .shop_h3 {
		margin: 0 auto;
		display: block;
		width: 210px;
	}
	footer .shop_p {
		color: #fff;
	}


}