@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img{ vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}
figure { margin: 0;}


/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend { border: 0;}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline;}
button,
input { line-height: normal;}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0;}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top;}
input[type="search"]:focus { outline: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {}
/*		font-style
-------------------------------------------------- */
body {
/*	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;*/
	font-family: "Noto Sans JP","游ゴシック","Yu Gothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", "メイリオ","Meiryo",sans-serif;
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.min { font-family: "Noto Serif JP","游明朝", "Yu Mincho", "YuMincho", serif;}
.eng { font-family: "Playfair Display", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ 
	clear: both;
}

.cf:after{ 
	content: ''; 
	display: block; 
	clear: both;
}

/* menu */
.menu-btn { 
	position: fixed; 
	right: 0; 
	top: 0; 
	width: 100%; 
	z-index: 102; 
	transition: 0.4s linear; 
	opacity: 1;
}

.menu-btn.show {
	opacity: 1;
}

.menu-btn .inner { 
	position: relative; 
	width: 100%; 
	max-width: 1280px; 
	height: 100%; 
	margin: 0 auto;
}

.menu-trig {
	position: absolute; 
	top: 30px; 
	right: 30px; 
	width: 50px; 
	height: 21px; 
	cursor: pointer;
}

.menu-trig div { 
	position: relative; 
	width: 100%; 
	height: 100%;
}

.menu-trig div span { 
	position: absolute; 
	left: 50%; 
	display: block; 
	width: 100%; 
	height: 2px; 
	background: #333; 
	opacity: 1; 
	transition: 0.4s linear;
}

.menu-trig div span:nth-of-type(1) { 
	top: 4px; 
	transform: translate(-50%,0px);
}

.menu-trig div span:nth-of-type(2) { 
	top: 15px; 
	transform: translate(-50%,0px);
}

.menu-trig.active { 
	top: 30px; 
	right: 30px;
}

.menu-trig.active div span:nth-of-type(1) { 
	width: 72%; 
	transform: translate(-50%,6px) rotate(45deg); 
	background: #fff;
}

.menu-trig.active div span:nth-of-type(2) {
	 width: 72%; 
	 transform: translate(-50%,-5px) rotate(-45deg); 
	 background: #fff;
}

.menu-cart {
	position: absolute; 
	top: 80px; 
	right: 32px; 
	width: 50px; 
	padding-left: 8px;
}

.menu-cart.hide { 
	display: none;
}

.menu-cart a { 
	display: block; 
	width: 100%;
	max-width: 30px; 
	margin: 0 auto;
}

.menu-cart a svg {
	 width: 100%; 
	 fill: #42220f; 
	 vertical-align: bottom;
}

@media (max-width: 481px) {
	.menu-btn { 
		width: 70px;
	}

	.menu-btn { 
		height: 90px;
	}

	.menu-trig { 
		top: 20px; 
		right: 18px; 
		width: 28px;
	}

	.menu-trig.active { 
		top: 15px; 
		right: 15px;
	}

	.menu-cart { 
		top: 55px; 
		right: 18px; 
		width: 30px; 
		padding-left: 3px;
	}
}



.wrap { 
	width: 100%; 
	max-width: 1280px; 
	margin: 0 auto; 
	background: #fff; 
	overflow: hidden;
}

/* header */
#hd { 
	position: fixed; 
	left: 0; top: 0; 
	width: 100%; 
	height: 100vh; 
	height: 100svh; 
	z-index: -1;
}

#hd:after { 
	content: ''; 
	display: block; 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	left: 0; 
	top: 0; 
	opacity: 0; 
	z-index: 10; 
	background: rgba(0,0,0,0.8);
 	transition: 0.2s linear;
}

#hd .inner-hd { 
	position: relative; 
	width: 100%; 
	max-width: 1280px; 
	height: 100%; 
	margin: 0 auto; 
	overflow: hidden;
}

#hd .menu { 
	position: absolute; 
	right: -500px; 
	top: 0; 
	width: 100%; 
	z-index: 100; 
	max-width: 320px; 
	height: 100%; 
	padding: 30px 0 20px;
	background: #a2c7cf; 
	transition: 0.4s linear 0.2s;
}

#hd .menu .scroll { 
	width: 100%; 
	height: 100%; 
	padding: 0px 0px 20px; 
	overflow-y: scroll;
}

#hd .menu ul.nav { 
	width: 88%; 
	max-width: 300px;
	margin: 0 auto;
}

#hd .menu ul.nav li { 
	padding: 10px 0; 
	font-size: 18px;
}

#hd .menu ul.nav li a { 
	color: #fff; 
	font-weight: 700; 
	letter-spacing: 0.12rem; 
	text-decoration: none;
	display: block;
}

#hd .menu ul.nav li.logo { 
	margin-bottom: 20px;
}

#hd .menu ul.nav li.logo a { 
	display: block; 
	width: 36%; 
	max-width: 120px;
}

#hd .menu ul.nav li.logo a img { 
	width: 100%;
}

#hd .menu ul.nav li ul.sns { 
	width: 100%; 
	padding-top: 30px;
}

#hd .menu ul.nav li ul.sns li { 
	display: inline-block; 
	width: 54px; 
	padding: 0; 
	vertical-align: middle;
}

#hd .menu ul.nav li ul.sns li a { 
	display: block;
	width: 30px;
}

#hd .menu ul.nav li ul.sns li a img {
	 width: 100%;
}

#hd .menu ul.nav li ul.sns li a svg { 
	width: 100%; 
	vertical-align: bottom;
}

#hd .menu ul.brand { 
	display: block; 
	width: 90%; 
	max-width: 300px; 
	margin: 0 auto 20px; 
	font-size: 0;
}

#hd .menu ul.brand li { 
	position: relative; 
	border-bottom: solid 1px #333; 
	font-size: 14px;
}

a.no-link {
	pointer-events: none;
	cursor: default;
}

#hd .menu ul.nav > li > a.no-link {
	opacity: 0.4;
}

#hd .menu ul.brand2{
	margin: 40px 0 0 0;
}

#hd .menu ul.brand2  li{
	border-bottom: none;
	padding: 0;
	position: relative;
	left: -2px;
}

#hd .menu ul.brand2  li:first-child{
	margin-bottom: 10px;
}

#hd .menu ul.brand li.top { 
	padding: 0; 
	border-bottom: none; 
	font-size: 12px;
}

#hd .menu ul.brand li.top:after { 
	content: ''; 
	display: block; 
	width: 0px; 
	height: 0px;
 	border: solid 25px transparent; 
	border-right: solid 15px #a2c7cf;
 	position: absolute; 
	right: 0; 
	top: 50%; 
	transform: translateY(-50%);
}

#hd .menu ul.brand li.top a { 
	position: relative; 
	display: block; 
}

#hd .menu ul.brand li span.topLv { 
	position: relative; 
	display: block; 
	width: 100%; 
	padding: 10px 5px;
	letter-spacing: 0.05rem;
	cursor: pointer;
}

#hd .menu ul.brand li span.topLv:before,
#hd .menu ul.brand li span.topLv:after { 
	content: ''; 
	display: block; 
	width: 10px; 
	height: 2px; 
	background: #333;
 	position: absolute; 
	right: 10px; 
	top: 50%;
}

#hd .menu ul.brand li span.topLv:before{ 
	transform: translateY(-50%);
}

#hd .menu ul.brand li span.topLv:after { 
	transform: translateY(-50%) rotate(90deg);
}

#hd .menu ul.brand li span.topLv.open:after { 
	transform: translateY(-50%) rotate(0deg);
}

#hd .menu ul.brand li ul { 
	font-size: 0;
}

#hd .menu ul.brand li ul li { 
	border-bottom: none; 
	font-size: 12px;
}

#hd .menu ul.brand li ul li a { 
	position: relative; 
	padding: 5px 0px; 
	padding-left: 32px; 
	background: #fff; 
	border: solid 1px #333; 
	color: #333; 
	border-radius: 50px; 
	text-decoration: none;
}

#hd .menu ul.brand li ul li a:before,
#hd .menu ul.brand li ul li a:after { 
	content: ''; 
	display: block;
}

#hd .menu ul.brand li ul li a:before{ 
	width: 12px; 
	height: 100%;
 	position: absolute; 
	left: 6px; 
	top: 50%; 
	transform: translate(0,-50%);
 	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42"><path d="M587.92,8214.28a12,12,0,0,0-2.78-2c-.13-.08-.27-.12-.4-.19a26.2,26.2,0,0,0,1.92-2.48,18,18,0,0,0,1.56-3.14,2.37,2.37,0,0,0,.13-1.38c-.1-.47-.35-.83-.79-.88a1.11,1.11,0,0,0-1.1.63,2.65,2.65,0,0,0-.3,1.18,14.33,14.33,0,0,1-.55,3.15,6.38,6.38,0,0,1-1.69,2.54,8.46,8.46,0,0,0-4.21-.61,5.83,5.83,0,0,0-3.39,1.61,1.2,1.2,0,0,0-.35,1.36.48.48,0,0,0,.57.26,1.48,1.48,0,0,0,.8-.46,4.52,4.52,0,0,1,2.49-1.64,6.4,6.4,0,0,1,3,.44c-.12.1-.23.2-.36.29a34.24,34.24,0,0,1-5.89,3.14c-1.86.81-3.87,1.6-6,2.37-.89-.63-2.44-1.82-3.69-2.81a22,22,0,0,0-4.2-2.85,10.28,10.28,0,0,0-5.22-1.13,6.34,6.34,0,0,0-4.92,2.61,6.12,6.12,0,0,0-1,5.86,6.68,6.68,0,0,0,3.9,3.81,10.7,10.7,0,0,0,5.9.26c2.44-.47,9.4-3.66,9.81-3.85a29.26,29.26,0,0,0,7.38,3.48,10.89,10.89,0,0,0,7.16-.43c2.17-.87,4.06-2.86,4.09-5.16A5.58,5.58,0,0,0,587.92,8214.28ZM565,8220.34a27.5,27.5,0,0,1-4.21,1.14,15.74,15.74,0,0,1-4-.17,4.69,4.69,0,0,1-2.76-2.2,3.92,3.92,0,0,1,.23-3.58,4.36,4.36,0,0,1,3.34-2.15,8.24,8.24,0,0,1,4.42.71,20.22,20.22,0,0,1,4,2.56c1,.8,2,1.57,3,2.32Zm21.22,0a9.12,9.12,0,0,1-4.93,1.41,18.74,18.74,0,0,1-8.64-2.06c1.61-.76,3.14-1.52,4.56-2.3,2.21-1.21,6.31-4.07,6.55-4.28,1.15.48,4.13,2.68,4.07,4.94A3.07,3.07,0,0,1,586.19,8220.32Zm-16.38-5.47a27.18,27.18,0,0,1-3.94-4.65,9.27,9.27,0,0,1-1.62-5.15,5.8,5.8,0,0,1,1.91-3.95,6.62,6.62,0,0,1,8.79,0,5.89,5.89,0,0,1,1.91,3.95,9.27,9.27,0,0,1-1.62,5.15,28.15,28.15,0,0,1-3.94,4.65,1.44,1.44,0,0,1-.75.35A1.42,1.42,0,0,1,569.81,8214.85Zm.74-.64c.27,0,1.86-2.15,2.8-3.77a11.49,11.49,0,0,0,1.46-4,3.81,3.81,0,0,0-1.06-3.23,4.63,4.63,0,0,0-6.39,0,3.78,3.78,0,0,0-1.06,3.23,11.49,11.49,0,0,0,1.46,4C568.7,8212.06,570.28,8214.21,570.55,8214.21ZM565.71,8232c0-.13.06-.29.1-.45h9.49c0,.16.07.32.1.45a3.75,3.75,0,0,1,0,1.14h-9.61A3.21,3.21,0,0,1,565.71,8232Zm8.24-3.64c.32.57.58,1.11.79,1.59h-8.37a15.32,15.32,0,0,1,.78-1.59Zm-3.4-4.51a11.66,11.66,0,0,1,2.42,2.91h-4.84A12.13,12.13,0,0,1,570.55,8223.87Zm0,12.89a5.54,5.54,0,0,1-3.55-1.38,3.67,3.67,0,0,1-.56-.63h8.22a3.6,3.6,0,0,1-.55.63A5.54,5.54,0,0,1,570.55,8236.76Zm-1.59,1.15.84,1.27a.88.88,0,0,0,1.5,0c.26-.4.65-1,.84-1.27a6.68,6.68,0,0,0,2.9-1.32,5.08,5.08,0,0,0,1.84-4,11.67,11.67,0,0,0-1.87-4.92,31.6,31.6,0,0,0-3.72-4.69,1.45,1.45,0,0,0-.74-.36,1.43,1.43,0,0,0-.73.36,30.94,30.94,0,0,0-3.72,4.69,11.53,11.53,0,0,0-1.87,4.92,5.1,5.1,0,0,0,1.83,4A6.73,6.73,0,0,0,569,8237.91Z" transform="translate(-551.15 -8199.43)" fill="%23333333" /></svg>');
	background-repeat: no-repeat; 
	background-position: 50% 50%; 
	background-size: 100% auto; 
}

#hd .menu ul.brand li ul li a:after {
	width: 5px; 
	height: 5px;
 	border-top: solid 2px #333; 
	border-right: solid 2px #333;
 	position: absolute; 
	right: 6px; top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

#hd .menu ul.brand li ul.col { 
	display: none; 
	padding-bottom: 10px;
}

#hd .menu ul.brand li ul.col li a span em { 
	font-size: 9px;
}

#hd .menu ul.brand li ul.col li { 
	display: inline-block; 
	width: 50%; 
	padding: 5px 3px; 
	border-bottom: none;
}

#hd .menu ul.brand li ul.col li a { 
	display: block; 
	padding: 3px 0px 6px; 
	padding-left: 21px; 
}

#hd .menu ul.brand li ul.row { 
	display: none; 
	padding-bottom: 10px;
}

#hd .menu ul.brand li ul.row li a span em { 
	font-size: 9px;
}

#hd .menu ul.brand li ul.row li { 
	display: inline-block; 
	padding: 5px; 
	border-bottom: none;
}

#hd .menu ul.brand li ul.row li a { 
	display: block; 
	padding: 4px 0px; 
	padding-left: 30px; 
	padding-right: 40px; 
}

#hd .menu ul.aside {
	width: 92%; 
	margin: 0 auto; 
	font-size: 0; 
	text-align: center;
}

#hd .menu ul.aside li { 
	display: inline-block; 
	width: 50%; 
	padding: 6px 4px; 
	font-size: 10px;
}

#hd .menu ul.aside li a { 
	display: block; 
	padding: 6px 0; 
	/* border: solid 1px #333; */
	background: #fff; 
	border-radius: 50px; 
	color: #333; 
	text-decoration: none;
}

#hd.open { 
	z-index: 101;
}

#hd.open:after { 
	opacity: 1;
}

#hd.open .menu { 
	right: 0; 
	z-index: 11;
}

@media (max-width: 481px) {
	#hd .menu { 
		padding-top: 20px;
	}

	#hd .menu ul.nav li { 
		padding: 8px 0;
	}

	#hd .menu ul.nav li.logo { 
		margin-bottom: 40px;
	}

	#hd .menu ul.brand2  li:first-child{
		margin-bottom: 0;
	}
}




/* footer */
#ft { 
	position: relative; 
	background: #fff;
}

#ft .inner-ft { 
	position: relative; 
	width: 100%; 
	margin: 0 auto; 
	padding: 80px 0 30px;
}

#ft h3 { 
	margin-bottom: 30px; 
	text-align: center;
}

#ft h3 a { 
	display: block; 
	width: 45%; 
	max-width: 220px; 
	margin: 0 auto;
}

#ft h3 a img { 
	width: 100%;
}

#ft ul { 
	width: 100%; 
	max-width: 780px;
	 margin: 0 auto; 
	 font-size: 0px; 
	 text-align: center;
}

#ft ul li { 
	display: inline-block; 
	padding: 0 18px; 
	font-size: 18px; 
	line-height: 1;
}

#ft ul li:first-child{ 
	border-left: none;
}

#ft ul li a { 
	color: #000; 
	text-decoration: none;
}

#ft .copyright { 
	padding: 10px 0; 
	background: #000;
}

#ft .copyright p { 
	color: #fff; 
	font-size: 17px; 
	text-align: center;
}

@media (max-width: 1001px) {
	#ft ul li { 
		padding: 0 18px;
	}
}

@media (max-width: 801px) {
	#ft .inner-ft { 
		padding: 30px 0;
	}

	#ft ul li { 
		padding: 0 12px; 
		font-size: 12px;
	}

	#ft ul li a span { 
		font-size: 10px;
	}
}

@media (max-width: 641px) {
	#ft .inner-ft { 
		padding: 50px 0;
	}

	#ft h3 { 
		margin-bottom: 20px;
	}

	#ft ul { 
		width: 92%; 
		margin: 0 auto;
	}

	#ft ul li { 
		display: block; 
		width: 100%; 
		margin: 0; 
		font-size: 11px; 
		letter-spacing: 0.2rem;
	}

	#ft ul li a { 
		display: block; 
		margin: 0 auto; 
		padding: 10px 0;
	}

	#ft ul li a span { 
		display: inline-block; 
		font-size: 11px; 
		letter-spacing: 0.05rem;
	}

}
@media (max-width: 481px) {
	#ft .inner-ft { 
		padding: 40px 0 20px;
	}

	#ft h3 { 
		margin-bottom: 20px;
	}

	#ft ul li { 
		padding: 6px;
	}

	#ft ul li a { 
		padding: 8px 0;
		letter-spacing: 0;
	}

	#ft .copyright p { 
		font-size: 10px;
	}

	#ft h3 a{
		max-width: 193px;
	}
}

.note ul li { 
	font-size: 9px;
	color: #808080;
}

.note ul li br.sp { 
	display: none;
}

@media (max-width: 481px) {
	.note ul li { font-size: 9px;}
	.note ul li br.sp { display: block;}
}

/* kv */
#kv { 
	position: relative; 
	width: 100%; 
	margin: 0 auto;
	background: url('./img/kv/mainimg_bg.webp') no-repeat 50% 0 / cover;
}

#kv .inner-kv { 
	position: relative; 
	width: 100%; 
	margin: 0 auto;
}

#kv .logo { 
	width: 100%; 
	position: absolute; 
	left: 0; 
	top: 3.5%; 
	z-index: 10; 
	text-align: center;
}

#kv .logo img { 
	width: 28%; 
	max-width: 295px;
}

#kv .bg { 
	position: relative; 
	width: 100%; 
	padding-top: 805px; 
	z-index: 1;
}

#kv .bg img { 
	display: none; 
	width: 100%;
}

#kv .note { 
	position: absolute; 
	left: 0; 
	bottom: 0; 
	width: 100%; 
	z-index: 9;¥
}

#kv .note ul { 
	width: 100%; 
	max-width: 850px; 
	margin: 0 auto;
}

@media (max-width: 1180px) {
	#kv .bg{
		padding-top: 730px;
	}
	#kv .note{
		left: 32px;
	}
}

@media (max-width: 1024px) {
	#kv .bg{
		padding-top: 640px;
	}
}

@media (max-width: 896px) {
	#kv { 
		background: none;
	}

	#kv .logo { 
		width: 100%; 
		position: absolute; 
		left: 0; 
		top: 4.5%; 
		text-align: center;
	}

	#kv .logo img { 
		width: 46%;
	}

	#kv .bg { 
		padding-top: 0%; 
		padding-bottom: 20px;
	}

	#kv .bg img { 
		display: block;
	}

	#kv .note { 
		bottom: 160px;
        left: 40%;
	}
}

@media (max-width: 640px) {
	#kv .note ul li br.sp{
		display: block;
	}

	#kv .note { 
		bottom: 78px;
	}
}

/* title */
.ttl { 
	position: relative; 
	width: 88%; 
	max-width: 1040px; 
	margin: 0 auto;
}

.ttl:after { 
	content: '';
	display: block; 
	width: 100%; 
	height: 1px; 
	background: #ccc;
 	position: absolute; 
	left: 0; 
	top: 50%;
}

.ttl h2 { 
	position: relative; 
	display: inline-block; 
	padding: 0 40px 0 0; 
	background: #fff; 
	z-index: 2;
 	font-size: 60px; 
	font-weight: 600; 
	letter-spacing: 0.2rem; 
	line-height: 1;
}

@media (max-width: 481px) {
	.ttl h2 { 
		padding: 0 20px 0 0; 
		font-size: 35px;
	}
}

/* story */
#story { 
	position: relative; 
	width: 100%; 
	max-width: 1280px; 
	margin: 0 auto;
}

#story .inner-sct { 
	position: relative; 
	padding: 80px 0;
}

#story .ttl { 
	margin-bottom: 64px;
}

#story .ctn { 
	width: 88%; 
	max-width: 1040px; 
	margin: 0 auto; 
}

#story .ctn .inner { 
	display: flex;
	gap: 32px;
	justify-content: space-between;
}

#story .ctn p {
	margin-bottom: 20px; 
	font-size: 20px; 
	font-weight: 600; 
	letter-spacing: 0.1rem; 
	line-height: 2;
	color: #333;
}

#story .ctn p.-small{
	font-size: 18px;
	margin-top: 32px;
	font-weight: 400;
	line-height: 1.6;
}

#story .ctn p sup { 
	font-size: 12px; 
}

#story .ctn figure { 
	width: 42%;
}

#story .ctn figure img { 
	width: 100%;
}

#story .bg .sp{
	display: none;
}

#story .note.sp{
	display: none;
}

#story br.sp{
	display: none;
}

@media (max-width: 896px) {
	#story br.sp{
		display: block;
	}

	#story .inner-sct{
		padding: 0 0 60px;
	}

	#story:after {
		top: 50%; 
		width: 150px; 
		height: 800px;
	}

	#story .ttl {
		 margin-bottom: 40px;
	}

	#story .ctn { 
		background: none;
	}

	#story .ctn .inner { 
		flex-direction: column;
		gap: 0;
	}

	#story .ctn .inner .pc{
		display: none;
	}

	#story .ctn p { 
		margin-bottom: 0px;
		font-size: 20px;
	}

	#story .ctn p sup { 
		font-size: 10px;
	}

	#story .ctn figure { 
		display: block;
		margin-bottom: 20px;
	}

	#story .bg .sp{
		display: block;
		width: 100%;
	}

	#story .note.sp{
		display: block;
		width: 88%;
		max-width: 1040px;
		margin: 0 auto 64px;
	}

}

@media (max-width: 481px) {
	#story:after { 
		top: 35%; 
		width: 100px; 
		height: 500px;
	}

	#story .inner-sct { 
		padding: 0;
	}

	#story .ctn p { 
		font-size: 14px;
	}

	#story .ctn p span,#story .ctn p.-small{
		font-size: 12px;
	}

	#story .ctn p.-small{
		margin-top: 20px;
	}

	#story .ctn p sup{
		font-size: 8px;
	}
}

/* worries */
#worries {
	background: url('./img/worries/worries_bg.webp') no-repeat 50% 0 / cover;
	background-size: cover;
	position: relative;
	z-index: 0;
}

#worries::before{
	content: "";
	display: block;
	width: 197px;
	height: 1050px;
	background: url('./img/worries/bg01.webp') no-repeat 50% 0 / cover;
	background-size: cover;
	position: absolute;
	left: 0;
	top: -530px;
}

#worries::after{
	content: "";
	display: block;
	width: 202px;
	height: 1054px;
	background: url('./img/worries/bg03.webp') no-repeat 50% 0 / cover;
	background-size: cover;
	position: absolute;
	left: 0;
	bottom: -90px;
	z-index: -1;
}

#worries .bg02{
	position: absolute;
	right: 0;
	bottom: 585px;
	z-index: -1;
}

#worries .inner-sct {
	position: relative;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 80px 0;
}

#worries .worries-inner {
	max-width: 700px;
	margin: 0 auto;
	border: 2px solid #a5ccd4;
	box-shadow: 4px 4px 5px rgba(44, 88, 107, 0.55);
	background-color: #fff;
	margin-bottom: 100px;
}

#worries .worries-content {
	padding: 48px 64px;
	
}

#worries .worries-ttl {
	font-size: 32px;
	text-align: center;
	margin-bottom: 64px;
	position: relative;
	color: #333333;
}

#worries .worries-ttl .ttl-bg{
	position: relative;
}

.ttl-bg:after{
	content: "";
	display: block;
	background: url('./img/worries/title_bg.svg') no-repeat 0% 0% / 100% auto;
	width: 204px;
	height: 8px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -16px;
}

#worries .worries-image img{
	width: 100%;
}

.worries-list li{
	font-size: 24px;
	font-weight: 500;
	padding-left: 18px;
	position: relative;
	margin-bottom: 40px;
	margin-left: 32px;
	color: #333333;
}

.worries-list li:last-child{
	margin-bottom: 0;
}

.worries-list li::before{
	content: "";
	display: block;
	background: url('./img/worries/check.svg') no-repeat 0% 0% / 100% auto;
	width: 30px;
	height: 31px;
	position: absolute;
	left: -30px;
	bottom: 0;
}

#worries .worries-content .note{
	text-align: right;
}

.worries-list-inner li .sp{
	display: none;
}

#worries .copy {
	text-align: center;
}

#worries .text_inner {
	display: flex;
	align-items: center;
	gap: 64px;
	max-width: 840px;
	margin: 0 auto 64px;
}

#worries .text_inner .txt p{
	font-size: 20px;
	font-weight: 600;
	line-height: 2;
	color: #333333;
}

#worries .text_inner .txt p .sp{
	display: none;
}

#worries .text_inner .txt p sup{
	font-size: 12px;
}

#worries .worries-list-inner {
	display: flex;
	gap: 40px;
	max-width: 753px;
	margin: 0 auto 32px;
}

#worries .worries-list-inner li img{
	width: 100%;
}

@media (max-width: 896px) {
	#worries .inner-sct{
		padding: 60px 0;
	}

	#worries .text_inner{
		flex-direction: column;
		gap: 24px;
		margin-top: 40px;
	}

	#worries .worries-content{
		padding: 24px 32px;
	}

	.worries-list li{
		font-size: 13px;
		margin-bottom: 20px;
	}

	.worries-list li::before{
		width: 15px;
		height: 16px;
	}

	#worries .copy{
		width: 88%;
		margin: 0 auto;
	}

	#worries .copy img{
		width: 100%;
		object-fit: cover;
		height: auto;
	}

	#worries .worries-list-inner{
		width: 88%;
	}

	#worries .worries-inner{
		width: 88%;
	}

	#worries .note{
		width: 88%;
		margin: 0 auto;
	}

	#worries .text_inner .txt p .sp{
		display: block;
	}
}

@media (max-width: 480px) {

	.worries-list-inner li .sp{
		display: block;
	}

	.worries-list-inner li .pc{
		display: none;
	}

	#worries .worries-ttl{
		font-size: 16px;
		margin-bottom: 32px;
	}

	#worries .inner-sct{
		padding: 24px 0;
	}

	.ttl-bg:after{
		width: 102px;
		bottom: -12px;
	}

	#worries .worries-inner{
		margin-bottom: 48px;
	}

	#worries .worries-content{
		padding: 24px 12px 24px  32px;
	}

	.worries-list li{
		margin-left: 20px;
		padding-left: 3px;
	}

	.worries-list li::before{
		left: -20px;
		top: 5px;
	}

	#worries .note ul{
		margin-top: 18px;
	}

	#worries .text_inner{
		margin-top: 20px;
	}

	#worries .text_inner{
		width: 88%;
		gap: 10px;
		margin: 18px auto 32px;
	}

	#worries .text_inner .image img{
		width: 185px;
		height: auto;
	}

	#worries .text_inner .txt p{
		font-size: 14px;
		text-align: center;
	}

	#worries .text_inner .txt p sup{
		font-size: 9px;
	}

	#worries .worries-list-inner{
		gap: 8px;
		margin: 0 auto 18px;
	}

	#worries::before{
		width: 117px;
		height: 652px;
		top: -295px;
	}

	#worries .bg02{
		bottom: 414px;
	}

	#worries .bg02 img{
		width: 115px;
		height: auto;
	}

	#worries::after{
		width: 113px;
		height: 660px;
	}
}

/* point */
#point .inner-sct { 
	position: relative; 
	width: 100%; 
	max-width: 1280px; 
	margin: 0 auto; 
	padding: 80px 0;
}

#point .inner-sct:before,
#point .inner-sct:after { 
	content: ''; 
	display: block; 
	height: 1000px; 
	position: absolute;
}

#point .inner-sct:before{ 
	width: 264px; 
	right: 0; 
	top: 0;
 	background: url('./img/point/bg-2.webp') no-repeat 0% 0% / auto 100%;
}

#point .inner-sct:after { 
	width: 266px; 
	left: 0; 
	bottom: 9%;
 	background: url('./img/point/bg-3.webp') no-repeat 100% 0% / auto 100%;
}

#point .bloc { 
	position: relative; 
	z-index: 2; 
	width: 92%; 
	max-width: 1040px;
	margin: 0 auto; 
	padding: 60px 0;
}

#point .bloc#point1 { 
	background: url('./img/point/point01-img.webp') no-repeat 100% 50% / 636px auto;
}

#point .bloc#point2 {
	padding: 60px 0 120px;
	background: url('./img/point/point02-img.webp') no-repeat 100% 60px / 623px auto;
}

#point .bloc#point3 {
	padding: 60px 0 210px;
	background: url('./img/point/point03-img.webp') no-repeat 100% 60px / 578px auto;
}

#point .bloc#point4 .bloc-inner{
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
	row-gap: 0;
}

#point .bloc#point4 .bloc-inner .img{
	width: 54.8%;
}

#point .bloc#point4 .bloc-inner .img img{
	width: 100%;
}

#point .bloc#point4 .bloc-inner .img .sp{
	display: none;
}

.point04-img02{
	flex: 0 0 54.8%;
	width: 54.8%;
	margin: 40px auto 0;
	position: relative;
}

.point04-img02 img{
	width: 100%;
}

.point04-img02::after{
	content: "";
	display: block;
	background: url('./img/point/point04-img02_bg.webp') no-repeat 0% 0% / 100% auto;
	width: 845px;
	height: 305px;
	position: absolute;
	top: 0;
	right: -360px;
	z-index: -1;
}

#point .bloc#point5 { 
	background: url('./img/point/point05-img.webp') no-repeat 100% 50% / 565px auto;
}

#point .bloc#point5 .note{
	margin-top: 32px;
}

#point .tit { 
	margin-bottom: 20px;
}

#point .tit h3 img { 
	width: 180px;
}

#point .bloc#point2 .ctn { 
	margin-bottom: 100px;
}

#point .bloc#point1 .ctn .txt { 
	margin-bottom: 12px; 
	padding-right: 380px;
}

#point .bloc#point2 .ctn .txt { 
	margin-bottom: 12px; 
	padding-right: 360px;
}

#point .bloc#point3 .ctn .txt { 
	margin-bottom: 12px; 
	padding-right: 360px;
}

#point .bloc#point4 .ctn .txt { 
	margin-bottom: 18px; 
}

#point .bloc#point5 .ctn .txt { 
	margin-bottom: 12px;
	padding-right: 400px;
}

#point .ctn h3 {
	margin-bottom: 32px; 
	font-size: clamp(24px,3.0vw,30px); 
	font-weight: 600; 
	letter-spacing: 0.1rem;
}

#point .ctn h3 sup{ 
	font-size: 12px; 
	vertical-align: super;
}

#point .ctn h3 br.sp { 
	display: none;
}

#point .ctn p sup { 
	font-size: 10px; 
}

#point .ctn p br.sp { 
	display: none;
}

#point .bloc .ctn .img { 
	display: none;
}

#point .ctn picture { 
	width: 100%; 
	max-width: 110px; 
	margin: 0 auto;
}

#point .ctn picture img { 
	width: 100%;
}

#point .ctn-flex { 
	position: relative; 
	display: flex; 
	justify-content: 
	space-between; 
	align-items: center;
}

#point .ctn-flex .txt { 
	width: 52%; 
	padding-bottom: 40px;
}

#point .ctn-flex .fig { 
	width: 46%;
}

#point .ctn-flex h3 { 
	font-size: clamp(24px,3.0vw,30px); 
	font-weight: 600; 
	letter-spacing: 0.1rem;
}

#point .ctn-flex h3 sup{ 
	font-size: 12px; 
	vertical-align: super;
}

#point .ctn-flex h3 br.sp { 
	display: none;
}

#point .ctn-flex .fig figure img {
	width: 100%;
}

#point .ctn-flex .note { 
	position: absolute; 
	left: 0; 
	bottom: 20px; 
	width: 56%;
}

#point .bloc#point4 .note.sp{
	display: none;
}

@media (max-width: 1001px) {
	#point .bloc#point1 { 
		background-size: 460px auto;
	}

	#point .bloc#point2 {
		background-size: 460px auto;
		padding-bottom: 40px;
		position: relative;
		z-index: 1;
	}

	#point .bloc#point2::before{
		content: "";
		display: block;
		background: url('./img/point/bg-2@sp.webp') no-repeat 0% 0% / 100% auto;
		width: 116px;
		height: 651px;
		position: absolute;
		top: -48px;
		left: 0;
		z-index: -1;
	}

	#point .bloc#point3 {
		background-size: 450px auto;
		padding-bottom: 120px;
		position: relative;
		z-index: 1;
	}

	#point .bloc#point3::before{
		content: "";
		display: block;
		background: url('./img/point/bg-4@sp.webp') no-repeat 0% 0% / 100% auto;
		width: 119px;
		height: 654px;
		position: absolute;
		right: 0;
		top: -200px;
	}

	#point .bloc#point4 { 
		background-size: 420px auto;
		z-index: 0;
	}

	#point .bloc#point5 { 
		background-size: 420px auto;
		position: relative;
		z-index: 1;
	}

	#point .bloc#point5::before{
		content: "";
		display: block;
		background: url('./img/point/bg-5@sp.webp') no-repeat 0% 0% / 100% auto;
		width: 120px;
		height: 655px;
		position: absolute;
		right: 0;
		top: -208px;
		z-index: -1;
	}

	#point .bloc#point1 .ctn .txt { 
		margin-bottom: 12px; 
		padding-right: 360px;
	}

	#point .bloc#point2 .ctn .txt { 
		margin-bottom: 12px; 
		padding-right: 400px;
	}
}

@media (max-width: 896px) {
	#point .inner-sct:before,
	#point .inner-sct:after { 
		height: 800px;
	}

	#point .inner-sct:before{ 
		width: 160px; top: 8%;
	}

	#point .inner-sct:after { 
		width: 140px; 
		bottom: 25%;
	}

	#point .bloc { 
		width: 100%; 
		padding: 40px 0;
	}

	#point .bloc#point1 { 
		background: none;
	}

	#point .bloc#point2 { 
		background: none;
		padding-bottom: 0;
	}

	#point .bloc#point3 { 
		background: none;
		padding-bottom: 64px;
	}

	#point .bloc#point4 { 
		background: none;
	}

	#point .bloc#point5 { 
		background: none;
	}

	#point .tit { 
		width: 88%; 
		margin: 0 auto;
	}

	#point .bloc#point2 .ctn { 
		margin-bottom: 20px;
	}

	#point .bloc .ctn .txt { 
		width: 88%;
	}

	#point .bloc#point1 .ctn .txt { 
		margin: 0 auto 40px; 
		padding-right: 0px;
	}

	#point .bloc#point2 .ctn .txt { 
		margin: 0 auto 20px; 
		padding-right: 0px;
	}

	#point .bloc#point3 .ctn .txt { 
		margin: 0 auto 20px; 
		padding-right: 0px;
	}

	#point .bloc#point3 .note{
		margin-top: 32px;
	}

	#point .bloc#point4 .ctn .txt { 
		margin: 0 auto 12px; 
		padding-right: 0px;
	}

	#point .bloc#point5 .ctn .txt { 
		margin: 0 auto; 
		padding-right: 0px;
	}

	.point04-img02{
		flex: 0 0 auto;
		width: 90%;
		right: 0;
	}

	.point04-img02::after{
		content: "";
		display: block;
		background: url('./img/point/point04-img02_bg@sp.webp') no-repeat 0% 0% / 100% auto;
		width: 896px;
		height: 100%;
		position: absolute;
		top: 0;
		right: -48px;
		z-index: -1;
		background-size: cover;
	}

	#point .bloc .ctn .img { 
		display: block;
	}

	#point .bloc .ctn .img figure { 
		text-align: center;
	}

	#point .bloc .ctn .img figure img { 
		width: 88%;
	}

	#point .bloc#point2 .ctn .img { 
		margin-bottom: 30px;
	}

	#point .bloc#point4 .ctn .img figure img { 
		width: 100%;
	}

	#point .bloc#point4 .bloc-inner{
		flex-direction: column;
		gap: 24px;
	}

	#point .bloc#point4 .bloc-inner .img .sp{
		display: block;
	}

	#point .bloc#point4 .bloc-inner .img .pc{
		display: none;
	}

	#point .bloc#point4 .bloc-inner .img{
		width: 88%;
		margin: 0 auto;
	}

	#point .bloc#point5 .ctn .img { 
		margin-bottom: 12px;
	}

	#point .bloc#point5 .ctn .img figure img { 
		width: 100%;
	}

	#point .ctn-flex { 
		display: block; 
		width: 88%; 
		margin: 0 auto;
	}

	#point .ctn-flex .txt { 
		width: 100%; 
		margin-bottom: 30px; 
		padding-bottom: 0px;
	}

	#point .ctn-flex .fig { 
		width: 100%;
	}

	#point .note ul { 
		width: 88%; 
		margin: 0 auto;
	}

	#point .ctn-flex .note { 
		position: relative; 
		left: auto; 
		bottom: auto; 
		width: 88%;
	}

	#point .bloc#point4 .note.sp{
		display: block;
	}

	#point .bloc#point4 .note.pc{
		display: none;
	}

}
@media (max-width: 481px) {
	#point .inner-sct { 
		padding: 64px 0;
	}

	#point .bloc#point1{
		padding-top: 48px;
	}

	#point .bloc#point1 .note{
		margin-top: 18px;
	}

	#point .bloc#point1 .ctn .txt{
		margin-bottom: 32px;
	}

	#point .inner-sct:before,
	#point .inner-sct:after { 
		height: 600px;
	}

	#point .inner-sct:before{ 
		width: 100px; 
		top: -5%; 
		z-index: 0;
		background: url('./img/point/bg-1@sp.webp') no-repeat 0% 0% / auto 100%;
	}

	#point .inner-sct:after { 
		display: none;
	}

	#point .bloc#point4{
		position: relative;
		z-index: 0;
	}

	#point .bloc#point4::after{
		content: "";
		display: block;
		position: absolute;
		width: 100px; 
		height: 652px;
		bottom: 25%;
		left: 0;
		z-index: -1;
		background: url('./img/point/bg-3@sp.webp') no-repeat 0% 0% / auto 100%;
	}

	#point .bloc { 
		padding: 20px 0;
	}

	#point .bloc#point3 { 
		padding-bottom: 64px;
	}

	#point .bloc#point2 .ctn .img { 
		margin-bottom: 20px;
	}

	#point .bloc#point4 .bloc-inner{
		gap: 8px;
	}

	.point04-img02::after {
        content: "";
        display: block;
        background: url(./img/point/point04-img02_bg@sp.webp) no-repeat 0% 0% / 100% auto;
        width: 480px;
        height: 224px;
        position: absolute;
        top: 0;
        right: -30px;
        z-index: -1;
        background-size: cover;
    }

	#point .bloc#point4{
		padding-bottom: 64px;
	}

	.point04-img02{
		right: 0;
		margin-top: 20px;
		width: 88%;
	}

	#point .tit h3 img {
		width: 140px;
	}

	#point .ctn h3 { 
		font-size: 20px; 
		letter-spacing: 0.05rem;
		margin-bottom: 24px;
	}

	#point .ctn h3 sup { 
		font-size: 10px;
	}

	#point .ctn h3 br.sp { 
		display: block;
	}

	#point .ctn p { 
		font-size: 14px;
	}

	#point .ctn p br.pc { 
		display: none;
	}

	#point .ctn p br.sp { 
		display: block;
	}

	#point .ctn p span { 
		display: block;
	}

	#point .ctn-flex h3 { 
		font-size: 18px; 
		letter-spacing: 0.05rem;
	}

	#point .ctn-flex h3 sup{ 
		font-size: 10px;
	}

	#point .bloc#point4 .note.sp{
		display: block;
		margin-top: 32px;
	}

	#point .bloc#point5 .ctn{
		margin-top: 24px;
	}

	#point .bloc#point5 .note{
		margin-top: -40px;
	}
}

@media (max-width: 390px) {
	.point04-img02::after{
        width: 401px;
        height: 186px;
        right: -30px;
	}
}

/* how to use */
#how-to-use{
	position: relative;
}

#how-to-use::after{
	content: "";
	display: block;
	width: 228px;
	height: 980px;
	background: url('./img/howto/bg02.webp') no-repeat 0% 0% / auto 100%;
	position: absolute;
	right: 0;
	bottom: -300px;
	z-index: 1;
}

#how-to-use .inner-sct{
	max-width: 1040px;
	margin: -32px auto 0;
	position: relative;
}

#how-to-use .inner-sct::before{
	content: '';
	display: block;
	width: 148px;
	height: 195px;
	background: url('./img/howto/bg01.webp') no-repeat 0% 0% / auto 100%;
	position: absolute;
	right: 32px;
	top: 0;
}

#how-to-use .title img{
	width: 100%;
}

.how-to-use-list li{
	display: flex;
	gap: 18px;
}

.how-to-use-list li:nth-child(2){
	justify-content: flex-end;
	position: relative;
}

.how-to-use-list li:nth-child(2)::before{
	content: '';
	display: block;
	width: 52px;
	height: 52px;
	background: url('./img/howto/list_bg01.webp') no-repeat 0% 0% / auto 100%;
	position: absolute;
	left: 380px;
	top: 32px;
}

.how-to-use-list li:nth-child(2)::after{
	content: '';
	display: block;
	width: 52px;
	height: 52px;
	background: url('./img/howto/list_bg02.webp') no-repeat 0% 0% / auto 100%;
	position: absolute;
	left: 380px;
	bottom: 32px;
}

.how-to-use-list li .how-to-use-item-txt .step_title{
	font-size: 46px;
	color: #a5ccd4;
	font-family: "Playfair Display", serif;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 18px;
}

.how-to-use-list li .how-to-use-item-txt .step_title span.step_number{
	font-size: 80px;
}

.how-to-use-list li .how-to-use-item-txt .step_txt{
	font-size: 22px;
	color: #333;
}

#how-to-use .note ul li{
	text-align: right;
}

#how-to-use .title .sp{
	display: none;
}

@media (max-width: 896px) {
	#how-to-use .title .pc{
		display: none;
	}

	#how-to-use .title .sp{
		display: block;
	}

	#how-to-use .inner-sct::before{
		display: none;
	}

	#how-to-use .inner-sct{
		width: 88%;
		margin: 40px auto 0;
	}

	.how-to-use-item-img img{
		width: 163px;
		height: 163px;
	}

	.how-to-use-list{
		max-width: 350px;
		margin: 0 auto;
	}

	.how-to-use-list li .how-to-use-item-txt .step_title{
		font-size: 24px;
	}

	.how-to-use-list li .how-to-use-item-txt .step_title span.step_number{
		font-size: 48px;
	}

	.how-to-use-list li .how-to-use-item-txt .step_txt{
		font-size: 12px;
	}

	.how-to-use-list li{
		gap: 8px;
		justify-content: center;
	}

	.how-to-use-list li:nth-child(2){
		flex-direction: row-reverse;
		justify-content: center;
		margin: 18px 0;
	}

	#how-to-use::after{
		display: none;
	}

	.how-to-use-list li:nth-child(2)::before {
		width: 29px;
		height: 29px;
		left: 130px;
		top: -14px;
	}

	.how-to-use-list li:nth-child(2)::after {
		width: 29px;
		height: 29px;
		left: 130px;
		bottom: -14px;
	}

	#how-to-use .note ul li{
		margin-top: 24px;
	}
}

/* product */
#product{
	position: relative;
	z-index: 1;
}

#product::before{
	content: "";
	display: block;
	width: 717px;
	height: 536px;
	background: url('./img/product/bg01.webp') no-repeat 0% 0% / auto 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

#product .inner-sct{
	max-width: 1040px;
	margin: 0 auto;
	padding: 300px 0 100px;
}

#product .title{
	font-size: 60px;
	font-weight: 600;
	font-family: "Playfair Display", serif;
	margin-bottom: 32px;
	line-height: 1;
	letter-spacing: 0.2em;
	color: #333333;
}

#product .title span{
	font-size: 32px;
	font-weight: 700;
	font-family: "Noto Serif JP", serif;
	letter-spacing: 0.1em;
}

#product .product-inner{
	display: flex;
	gap: 48px;
	max-width: 780px;
	margin: 0 64px 40px auto;
}

#product .product-inner-item-txt-title{
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 64px;
	position: relative;
}

#product .product-inner-item-txt-title sup{
	font-size: 12px;
}

#product .product-inner-item-txt-title::after{
	content: "";
	display: block;
	background: url('./img/product/bg02.svg') no-repeat 0% 0% / auto 100%;
	width: 395px;
	height: 64px;
	position: absolute;
	left: -76px;
	bottom: -85px;
	z-index: -1;
}

#product .product-title{
	font-size: 34px;
	font-weight: 600;
}

#product .product-title span{
	font-size: 30px;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}

#product .product-price{
	font-size: 27px;
	font-weight: 500;
	margin: 48px 0;
	line-height: 1.4;
}

#product .product-price span{
	font-size: 25px;
}

#product .product-btn img{
	width: 100%;
	object-fit: cover;
}

#product .product-btn a{
	display: block;
}

#product .product-btn a:hover{
	opacity: 0.6;
}

#product .product-price .sp{
	display: none;
}

.product-btn.sp{
	display: none;
}

@media (max-width: 896px) {
	#product .inner-sct{
		width: 88%;
		margin: 0 auto;
		padding: 100px 0 60px;
	}

	#product .title{
		font-size: 32px;
	}

	#product .title span{
		font-size: 15px;
	}

	.product-inner-item img{
		width: 153px;
		height: auto;
	}

	#product .product-inner-item-txt-title{
		font-size: 12px;
		margin-bottom: 40px
	}

	#product .product-inner{
		max-width: 100%;
		margin: 0 auto 24px;
		gap: 13px;
		justify-content: center;
	}

	#product .product-inner-item-txt-title::after{
		width: 230px;
		left: -64px;
	}

	#product .product-inner-item-txt-title sup{
		font-size: 8px;
	}

	#product .product-title{
		font-size: 17px;
	}

	#product .product-title span{
		font-size: 15px;
	}

	#product .product-price{
		font-size: 13px;
		margin: 24px 0;
	}

	#product .product-price span{
		font-size: 12px;;
	}

	#product .product-price .sp{
		display: block;
	}

	.product-btn.sp{
		display: block;
		width: 240px;
		margin: 0 auto;
	}

	.product-btn.sp img{
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.product-btn.pc{
		display: none;
	}
	
	#product .note{
		margin-top: 18px;
	}

	#product::before{
		width: 348px;
		height: 355px;
		background: url(./img/product/bg01@sp.webp) no-repeat 0% 0% / auto 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
}

/*		faq
-------------------------------------------------- */
#faq{
	background: url('./img/faq/faq_bg.webp') no-repeat 0% 0% / auto 100%;
	background-size: cover;
}

#faq .inner-sct {
	width: 100%;
	max-width: 695px;
	margin: 0 auto;
	padding: 80px 0;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.faq-item {
	background: #fff;
	border: 2px solid #a5ccd4;
	border-radius: 20px;
	box-shadow: 3.74px 3.74px 4.68px rgba(44, 88, 107, 0.55);
	overflow: hidden;
}

.faq-q {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 18px 24px;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: #333;
	appearance: none;
	-webkit-appearance: none;
}

.faq-q:hover {
	opacity: 0.85;
}

.faq-label{
	width: 74px;
}

.faq-label img{
	width: 100%;
}

.faq-txt {
	flex: 1;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7;
	color: #333;
}

.faq-txt .sub{
	font-size: 10px;
	color: #808080;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	line-height: 2;
	display: block;
}

.faq-txt sup{
	font-size: 10px;
	vertical-align: super;

}

.faq-icon {
	position: relative;
	flex-shrink: 0;
	width: 27px;
	height: 27px;
}

.faq-icon::before,
.faq-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: #a5ccd4;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease;
}

.faq-icon::before {
	width: 27px;
	height: 3px;
}

.faq-icon::after {
	width: 3px;
	height: 27px;
}

.faq-item.is-open .faq-icon::after {
	opacity: 0;
}

.faq-a {
	display: none;
	align-items: flex-start;
	gap: 16px;
	padding: 0 32px 18px 24px;
	margin-top: -10px;
}

.faq-item.is-open .faq-a {
	display: flex;
}

.faq-a .faq-txt {
	margin: 0;
	padding-top: 8px;
}

@media (max-width: 896px) {
	#faq .inner-sct {
		padding: 32px 0 40px;
        width: 88%;
        margin: 0 auto;
	}

	.faq-label{
		width: 48px;
	}

	.faq-txt{
		font-size: 11px;
		line-height: 1.4;
	}

	.faq-q{
		padding: 12px;
		gap: 10px;
	}

	.faq-item.is-open .faq-a{
		padding: 0 12px 12px;
		gap: 10px;
	}

	.faq-list {
		gap: 12px;
	}
	.faq-item {
		border-radius: 16px;
	}
	.faq-icon {
		width: 14px;
		height: 14px;
	}
	.faq-icon::before {
		width: 14px;
	}
	.faq-icon::after {
		height: 14px;
	}

	.faq-txt .pc{
		display: none;
	}

	.faq-txt sup{
		font-size: 8px;
	}

	.faq-txt .sub{
		font-size: 8px;
	}

}


/*		shop
-------------------------------------------------- */
#shop{
	padding: 80px 0;
}

#shop .shop-txt{
	font-size: 30px;
	font-weight: 600;
	color: #333;
	text-align: center;
}

#shop .shop-txt-sub{
	font-size: 20px;
	font-weight: 300;
	font-family: "Noto Sans JP", sans-serif;
	text-align: center;
	margin: 24px 0 32px;
}

#shop .shop-btn{
	width: 479px;
	margin: 0 auto;
}

#shop .shop-btn a{
	display: block;
}

#shop .shop-btn a:hover{
	opacity: 0.8;
}

@media (max-width: 640px) {
	#shop{
		padding: 32px 0;
	}

	#shop .shop-txt{
		font-size: 15px;
	}

	#shop .shop-txt-sub{
		font-size: 10px;
		margin: 8px 0 18px;
	}

	#shop .shop-btn{
		width: 240px;
	}

	#shop .shop-btn img{
		width: 100%;
		height: auto;
	}
}

/*		banner
-------------------------------------------------- */
#banner{
	background: url('./img/banner/banner_bg.webp') no-repeat 0% 0% / auto 100%;
	background-size: cover;
}

#banner .inner-sct{
    width: fit-content;
    margin: 0 140px 0 auto;
	padding-top: 18px;
}

.banner-logo{
	text-align: center;
}

.banner-logo img{
	width: 244px;
}

.banner-text img{
	width: 500px;
}

.banner-sub img{
	width: 533px;
}

#banner .banner-btn{
	width: 324px;
	background-color: #fff;
	border-radius: 48px;
	margin: 8px auto 0;
}

#banner .banner-btn a{
	display: block;
	font-size: 25px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	padding: 16px 0;
	color: #000;
}

#banner .banner-btn a:hover{
	opacity: 0.6;
}

@media (max-width: 1180px) {
	#banner .inner-sct{
		margin: 0 0 0 auto;
	}
}

@media (max-width: 896px) {
	#banner{
		background: url('./img/banner/banner_bg@sp.webp') no-repeat 0% 0% / auto 100%;
		background-size: cover;
	}

	#banner .inner-sct{
		padding-top: 0;
	}

	.banner-logo img{
		width: 80px;
	}

	.banner-text{
		text-align: center;
	}

	.banner-text img{
		width: 175px;
	}

	.banner-sub img{
		width: 250px;
	}

	#banner .banner-btn a{
		font-size: 12px;
		padding: 6px 0;
	}

	#banner .banner-btn{
		width: 120px;
	}
	}


/*
	SHOP - page
*/
#kv-shop picture img { 
	width: 100%;
}

#shoplist .inner-sct { 
	position: relative; 
	width: 100%; 
	max-width: 1280px; 
	margin: 0 auto; 
	padding: 40px 0; 
	background: url('./shop/img/bg-shop.svg') no-repeat 0% 0% / auto 100%;
	background-color: #fff;
}

#shoplist .inner-sct:before,
#shoplist .inner-sct:after { 
	content: ''; 
	display: block; 
	position: absolute;
}

#shoplist .inner-sct:before{ 
	width: 234px; 
	height: 988px; 
	right: 0; 
	top: -200px;
	background-size: cover;
 	background: url('./shop/img/bg-2.webp') no-repeat 0% 100% / 234px auto;
}

#shoplist .inner-sct:after { 
	width: 214px; 
	height: 871px; 
	left: 0; 
	bottom: 0%;
 	background: url('./shop/img/bg-1.webp') no-repeat 100% 100% / 214px auto;
	background-size: cover;
}

#shoplist ul { 
	position: relative; 
	width: 92%; 
	max-width: 880px; 
	margin: 0 auto; 
	font-size: 0; 
	z-index: 10;
}

#shoplist ul li {
	 display: inline-block; 
	 width: 33%; 
	 padding: 15px; 
	 font-size: 16px
}

#shoplist ul li a { 
	position: relative; 
	display: block; 
	width: 100%; 
	padding: 4px; 
	background: #eff3f6; 
	border-radius: 6px; 
	color: #333; 
	text-decoration: none;
}

#shoplist ul li a span { 
	position: relative; 
	display: block; 
	width: 100%; 
	padding: 16px 12px; 
	background: #eff3f6; 
	border: solid 3px #a4cbd3; 
	border-radius: 6px; 
	font-weight: 500;
}

#shoplist ul li a:after { 
	content: '';
	display: block; 
	width: 8px; 
	height: 8px; 
	border-top: solid 2px #333; 
	border-right: solid 2px #333;
 	position: absolute; right: 20px; top: 50%; 
	transform: translateY(-50%) rotate(45deg);
}

#shoplist ul li a:hover { 
	opacity: 0.8;
}

@media (max-width: 801px) {
	#shoplist .inner-sct:after{ 
		width: 174px; 
		height: 621px; 
		left: 0; 
		bottom: 0;
		background-size: cover;
		background: url('./shop/img/bg-1@sp.webp') no-repeat 0% 100% / 174px auto;
	}

	#shoplist .inner-sct:before { 
		width: 174px; 
		height: 766px; 
		right: 0; 
		top: 0;
		background: url('./shop/img/bg-2@sp.webp') no-repeat 100% 100% / 174px auto;
		background-size: cover;
	}

	#shoplist ul li { 
		padding: 12px 8px; 
		font-size: 14px;
	}
}

@media (max-width: 641px) {
	#shoplist ul li { 
		width: 50%; 
		padding: 5px; 
		font-size: 12px;
	}

	#shoplist ul li a { 
		padding: 3px;
	}

	#shoplist ul li a span { 
		padding: 10px 8px; 
		border-width: 2px;
	}

	#shoplist ul li a:after { 
		width: 6px; 
		height: 6px; 
		right: 15px;}
}

aside.aside { 
	padding: 40px 0 20px;
}

aside.aside .btn-back { 
	width: 60%; 
	max-width: 280px; 
	margin: 0 auto;
}

aside.aside .btn-back a { 
	position: relative; 
	display: block; 
	width: 100%; 
	padding: 3px; 
	background: #fff;
 	border: solid 2px #a5ccd4; 
	border-radius: 50px;
	color: #fff; 
	font-size: 16px; 
	font-weight: 500; 
	text-align: center; 
	text-decoration: none;
}
aside.aside .btn-back a:before { 
	content: ''; 
	display: block; 
	width: 10px; 
	height: 10px; 
	border-bottom: solid 2px #fff; 
	border-left: solid 2px #fff;
 	position: absolute; 
	left: 30px; 
	top: 50%; 
	transform: translateY(-50%) rotate(45deg);
}

aside.aside .btn-back a span { 
	display: block; 
	padding: 12px 0; 
	background: #a4cbd3; 
	border-radius: 50px;
}

@media (max-width: 481px) {
	aside.aside { 
		padding: 20px 0px 0;
	}

	aside.aside .btn-back a { 
		padding: 2px; 
		font-size: 14px;
	}
}