@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");
:root {
	--font-fam: 'noto sans JP';
	--theme-color: #fff;
	--font-color: #111;
}

body * {
	font-family: "Shippori Mincho", serif;
	font-weight: bold;
}

img {
	width: 100%;
	vertical-align: bottom;
}

main {
	background: url(../img/index/bg.jpg) repeat;
	background-position: top center;
	padding-bottom:clamp(5rem, 6.25vw, 10rem);

}

.br-sp {
	display: block;
}
@media (min-width: 1024px) {
	.br-sp {
		display: none;
	}
}

.fv {
	border-top: solid clamp(0.25rem, 0.31vw, 0.5rem) #C70057;
}
@media (min-width: 768px) {
	.fv img {
		min-height: 480px;
		object-fit: cover;
		object-position: center center;
	}
}

.caption_txt{
	padding-top: clamp(4rem, 5vw, 8rem);
}

@media (min-width: 768px) {
	
	.caption_txt img{
		max-width: 655px;
		margin: 0 auto;
	}
}

.anchor_btns_list{
	display: flex;
	justify-content: center;
	column-gap: clamp(20px, 3.125vw, 40px);
	margin:clamp(5rem, 6.25vw, 10rem) clamp(20px, 3.125vw, 40px) 0;
}

.anchor_btns_list > li a picture{
	display: block;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

@media (min-width: 768px) {

	.anchor_btns_list > li:nth-of-type(1) a picture{
		background-image: url("../img/index/anchor/btn01_hover.png");
	}

	.anchor_btns_list > li:nth-of-type(2) a picture{
		background-image: url("../img/index/anchor/btn02_hover.png");
	}

	.anchor_btns_list > li a:hover picture img{
		opacity: 0;
	}
	
}

section *[class*="appbtn"]{
	margin:clamp(4rem, 5vw, 5rem) clamp(20px, 3.125vw, 40px) 0;
}

section *[class*="appbtn"],
section *[class*="appbtn"] picture{
	display: inline-block;
}

section *[class*="appbtn"] img{
	margin: 0;
}

section *[class*="appbtn"]:hover{
	opacity: 0.7;
}

@media (min-width: 768px) {
	section *[class*="appbtn"]{
		margin:clamp(4rem, 5vw, 5rem) auto 0;
		display: table;
	}
}

.ttl {
	margin-inline: auto;
	position: relative;
}
.ttl img {
	position: relative;
	z-index: 5;
}

@media (min-width: 768px) {
	.ttl {
		width: min(60%, 647px);
	}
}	
	
.home {
	padding-top: clamp(4rem, 5vw, 8rem);
}

.store {
	padding-top: clamp(4rem, 5vw, 8rem);
}

.bnr {
	margin-top:clamp(2rem, 3.125vw, 30px);
	width: min(82.6%, 530px);
	margin-inline: auto;
}

.bnr a {
	display: block;
	width: min(94.6%, 570px);
	margin-inline: auto;
	transition: opacity 0.3s;
}

@media (min-width: 1024px) {
	.bnr a:hover {
		opacity: 0.6;
	}
}