/* CSS Document */
/**
 * winescan
 **/
.pc_only {
	display: block;
}
.sp_only {
	display: none;
}
.winescan {
	padding: 0;
}
.winescan img {
	max-width: 100%;
  	height: auto;
  	vertical-align: bottom;
	border: none;
}
p {
	margin: 0;
}
.hero {
	padding-top: 180px;
	width: 1240px;
}
.hero_wrap {
	position: relative;
	background-color: #FDF9F2;
	padding: 70px 11% 40px;
}
.logo_img {
	position: absolute;
    top: -110px;
    right: 0;
    left: 0;
    margin: auto;
}
.hero_content {
	font-size: 2.8rem;
	text-align: center;
	position: absolute;
    top: 180px;
    right: 0;
    left: 0;
    margin: auto;
}
.hero_content h1 {
	font-family: "M PLUS Rounded 1c", sans-serif;
	color: #F76420;
	font-size: 5.8rem;
    margin: 0 0 20px;
	line-height: 1.15;
}
.hero_content p {
	font-weight: 600;
    line-height:1.3;
    letter-spacing: 0.04em;
}
.hero_imgs {
	display: grid;
	grid-template-columns: 46% 46%;
    gap: 8%;
	margin-left: 1.5%;
}
.hero_imgs .hero_img {
	max-height: 610px;
}
.qr_wrap {
	position: absolute;
    bottom: -115px;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.qr_banner {
	display: none;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
    background: #F76420;
    text-align: center;
    border: 1px solid #F76420;
	border-radius: 8px;
    padding: 12px 0;
    text-decoration: none;
	margin: 0 auto;
	width: 85%;
	max-width: 335px;
}
.qr_wrap img {
	zoom: 0.45;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
}
.howto_sec {
	text-align: center;
	margin: 170px 0 80px;
	width: 1240px;
}
.howto_sec h2 {
	font-family: "M PLUS Rounded 1c", sans-serif;
	line-height: 1.4;
}
.howto_sec p {
	font-size: 1.8rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
	margin: auto;
}
.howto_lecture {
	display: grid;
    grid-template-columns: 31% 40% 19%;
    gap: 5%;
    padding: 35px 70px 35px 70px;
    border: 2px solid #EB9327;
    border-radius: 10px;
    align-items: center;
    max-width: 760px;
    margin: 60px auto;
}
.howto_txts {
	color: #C84509;
	font-size: 1.8rem;
	font-weight: bold;
}	
.howto_arrow {
	width: 75%;
	margin: 15px 0;
}
.qr_sec {
	position: relative;
	background-color: #FCF4EA;
	padding: 80px 0 120px 0;
	width: 100vw;
   	min-width: 1240px;
	margin: 0 calc(50% - 50vw) -20px;
}
.qr_readtxt {
	font-weight: bold;
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 40px;
}
.notes_wrap {
	background-color: #fff;
	padding: 35px 40px 30px;
	max-width: 960px;
	margin: 318px auto 0;
}
.qr_wrap.two {
	bottom: initial;
}
.notes_wrap {
	font-size: 1.4rem;

}
.notes_ttl {
	font-weight: bold;
}
.notes_lists {
	list-style-type: disc;
	padding-left: 1em;
}
.notes_lists li {
  line-height: 1.4; /*文の行高*/
  padding: 0.4em 0; /*前後の文との余白*/
}

@media screen and (max-width:767px){
	.winescan {
    	width: initial;
	}
	.pc_only {
		display: none;
	}
	.sp_only {
		display: block;
	}
	.hero {
		padding-top: 110px;
		width: initial;
	}
	.hero_wrap {
		padding: 60px 0% 175px;
	}
	.hero_wrap .logo_img {
		zoom: 0.7;	
	}
	.hero_imgs {
		grid-template-columns: 40% 40%;
		gap: 20%;
		max-width: 335px;
        margin: auto;
	}
	.hero_content {
		font-size: 2.2rem;
		top: 105px;
	}
	.hero_content h1 {
		font-size: 3.6rem;
		margin: 0 0 45px;
	}
	.hero_imgs .hero_img {
		zoom: 0.8;
	}
	.qr_wrap {
		bottom: 40px;
	}
	.qr_wrap img {
		display: none;
		zoom: 0.35;
	}
	.qr_banner {
		display: block;
	}
	.howto_sec {
		margin: 50px 0 60px;
		width: initial;
	}
	.howto_sec h2 {
		font-size: 2rem;
	}
	.howto_sec p {
		font-size: 1.6rem;
		text-align: left;
		width: 335px;
	}
	.howto_lecture {
		display: block;
		margin: 40px auto;
		padding: 35px 40px 35px 40px;
		width: 335px;
	}
	.howto_txts {
		display: grid;
        grid-template-columns: 79% 21%;
		align-items: center;
		justify-items: center;
		margin: 20px 0 25px;
	}
	.howto_img {
		max-width: 200px;
		width: 80%;	
		margin: auto;
	}
	.howto_img.result {
		width: 70%;
	}
	.howto_txts p { 
		width: 200px;
		margin-right: -15px;
	}
	.howto_arrow {
		width: 100%;
    	transform: rotate(90deg);
		order: 2;
		margin: 0;
	}
	.qr_sec {
		padding: 50px 0 100px 0;
		min-width: initial;
	}
	.qr_readtxt {
		display: none;
		margin-bottom: 30px;
	}
	.notes_wrap {
		margin: 60px 20px 0;
		padding: 25px;
	}
}