@charset "utf-8";
body { color: #53341c;}
#hd .menu { background: #ffd95c;}
#hd .menu ul.brand li.top:after { border-right: solid 15px #ffd95c;}
.menu-trig div span { background: #53341c;}
.menu-cart a svg { fill: #53341c;}

.bogo-language-switcher .ja { display: none !important;}

@keyframes showIn {
 100% { opacity: 1;}
}


#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 200; background: #fff; transition: 0.4s linear 3.2s;}
#loading .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;
 background: url('/img/fleur/loading/bg.jpg') no-repeat 50% 50% / cover; opacity: 0; transition: 0.4s linear;
}
#loading .inner { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); z-index: 2; width: 85%; max-width: 700px; height: 50%;}
#loading .logo { position: relative; width: 50%; max-width: 300px; margin: 0 auto; transform: translateY(60%); opacity: 0; transition: 0.4s linear 0.3s;}
#loading .logo img { width: 100%;}
#loading img.r1, #loading img.r2,
#loading img.l1, #loading img.l2 { position: absolute; width: 200px; transition: 0.8s linear; opacity: 0;}
#loading img.r1 { top: 0%; right: 8%; transform: translate(-80px,-50px); transition-delay: 1.0s;}
#loading img.r2 { top: 52%; right: 4%; transform: translate(60px,-40px); transition-delay: 1.2s;}
#loading img.l1 { top: 30%; left: 0%; transform: translate(80px,-60px); transition-delay: 1.1s;}
#loading img.l2 { top: 60%; left: 8%; transform: translate(-80px,-80px); transition-delay: 1.3s;}
#loading .txt-1,
#loading .txt-2 { position: absolute; left: 0; width: 100%; height: 90px; z-index: 2; opacity: 0;}
#loading .txt-1 { top: 50px; background: url('/img/fleur/loading/txt-1.png') no-repeat -100% 50% / auto 100%; transition: 5.4s linear 1.4s;}
#loading .txt-2 { bottom: 50px; background: url('/img/fleur/loading/txt-2.png') no-repeat 150% 50% / auto 100%; transition: 5.4s linear 1.4s;}

#loading.show .bg { opacity: 1;}
#loading.show .logo { transform: translateY(52%); opacity: 1;}
#loading.show img.r1,
#loading.show img.r2,
#loading.show img.l1,
#loading.show img.l2 { transform: translate(0px,0px); opacity: 1;}
#loading.show .txt-1 { opacity: 1; background-position-x: 1800px;;}
#loading.show .txt-2 { opacity: 1; background-position-x: -750px;}
#loading.fadeOut { opacity: 0;}
@media (max-width: 641px) {
	#loading img.r1, #loading img.r2,
	#loading img.l1, #loading img.l2 { width: 150px;}
}
@media (max-width: 481px) {
	#loading .logo {transform: translateY(100%);}
	#loading img.r1, #loading img.r2,
	#loading img.l1, #loading img.l2 { width: 100px;}
	#loading img.r1 { top: 10%; right: 5%; transform: translate(-40px,-30px);}
	#loading img.r2 { top: 48%; right: 4%; transform: translate(40px,-30px);}
	#loading img.l1 { top: 20%; left: 0%; transform: translate(40px,-30px);}
	#loading img.l2 { top: 50%; left: 4%; transform: translate(-40px,-40px);}

	#loading .txt-1 { background-position: -500px 50%; transition: 4.0s linear 1.4s;}
	#loading .txt-2 { bottom: 100px; background-position: 600px 50%; transition: 4.5s linear 1.4s;}

	#loading.show .logo { transform: translateY(80%);}
	#loading.show .txt-1 { opacity: 1; background-position-x: 800px;;}
	#loading.show .txt-2 { opacity: 1; background-position-x: -800px;}
}

.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}

.spacer { width: 100%; height: 85vh;}
.note ul { width: 92%; max-width: 900px; margin: 0 auto;}
.note ul li { color: #aaa; font-size: 10px; text-align: right;}


@keyframes shake {
	0% { transform: translateY(2px);}
 50% { transform: translateY(-6px);}
 100%{ transform: translateY(2px);}
}

#kv { position: relative; width: 100%; background: url('/img/fleur/kv-wide.jpg') no-repeat 50% 50% / cover;}
#kv:before { content: ''; display: block; width: 100%; height: 230px; background: url('/img/fleur/bg/hd.png') no-repeat 50% 100% / cover;
 position: absolute; left: 0; top: 0px; z-index: 2;
}
#kv .inner-kv { position: absolute; width: 100%; padding-top: 140px; z-index: 3;}
#kv h1 { position: relative; margin-bottom: 20px; text-align: center;}
#kv h1 img { position: relative; width: 30%; max-width: 400px; transition: 0.8s linear 0.4s; opacity: 0; transform: translateY(20px);}
#kv h1:after { content: ''; display: block; width: 100px; height: 150px;
 background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 50%; top: -50px; margin-left: -250px;
}

#kv .news { width: 80%; max-width: 360px; margin: 0 auto;}
#kv .news div { position: relative; display: block; transition: 0.8s linear 1.0s; opacity: 0; transform: translateY(20px);}
#kv .news ul li { display: none;}
#kv .news ul li:first-child { display: block;}
#kv .news ul li a { position: relative; display: block; background: #fff; text-decoration: none; animation: shake 3.0s linear infinite;}
#kv .news ul li a dl { display: table; width: 100%; padding: 10px; background: linear-gradient(40deg,#ffff33,#ffb421);}
#kv .news ul li a dl dt,
#kv .news ul li a dl dd { display: table-cell; vertical-align: middle;}
#kv .news ul li a dl dt { width: 70px;}
#kv .news ul li a dl dt img { width: 100%;}
#kv .news ul li a dl dd { padding-left: 10px; font-size: 10px; font-feature-settings: 'palt'; letter-spacing: 0.045rem;}
#kv .news ul li a dl dd span { display: block;}
#kv .news ul li a:hover dl { opacity: 0.8;}
#kv .note { position: absolute; left: 0; bottom: 12px; width: 100%; z-index: 2;}
#kv .note ul { width: 100%; max-width: 680px; margin: 0 0 0 auto; padding: 0 20px;}
#kv .note ul li { color: #b4b4b4; text-align: left;}
#kv .note ul li span { display: block;}
#kv .bg { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; text-align: center;}
#kv .bg img { width: 100%;}
#kv .bg img.sp { display: none;}
#kv.show h1 img { opacity: 1; transform: translateY(0px);}
#kv.show .news div{ opacity: 1; transform: translateY(0px);}
@media (min-width: 1281px) {
	#kv .bg { opacity: 0;}
}
@media (max-width: 1281px) {
	#kv { background: none;}
	#kv:before { height: 16vw;}
	#kv .inner-kv { padding-top: 9.5vw;}
	#kv h1 { margin-bottom: 1.8vw;}
}
@media (max-width: 1001px) {
	#kv h1:after { width: 80px; height: 120px; left: 50%; top: -40px; margin-left: -200px;}
}
@media (max-width: 801px) {
	#kv:before { height: 45vw;}
	#kv .inner-kv { padding-top: 3.0vw;}
	#kv h1 img { width: 48%;}
	#kv h1:after { left: 5%; top: 8vw; margin-left: 0px;}
	#kv .news { display: none;}
	#kv .note ul li { color: #fff; text-shadow: 0 0 4px #e38f2b;}
	#kv .bg img.pc { display: none;}
	#kv .bg img.sp { display: block;}
}
@media (max-width: 481px) {
	#kv .inner-kv { padding-top: 4.0vw;}
	#kv h1:after { width: 60px; height: 90px; top: 7vw;}
	#kv .note { bottom: 8px;}
	#kv .note ul { margin: 0 auto; padding: 0 12px;}
	#kv .note ul li span { display: inline;}
}


#lead { background: url('/img/fleur/bg/lead.png') no-repeat 50% 0;}
#lead .news { display: none;}
#lead .lead-1 { position: relative; padding: 20px 0 80px;}
#lead .lead-1 h2 { position: relative; text-align: center; transition: 0.4s linear 1.0s; opacity: 0; transform: translateY(20px);}
#lead .lead-1 h2 img { width: 85%; max-width: 680px;}
#lead .lead-1 h2 img.sp { display: none;}
#lead .lead-1 .note { position: absolute; left: 0; bottom: 0; width: 100%;}
#lead .lead-2 { position: relative; padding: 20px 0 154px;}
#lead .lead-2 h3 { position: relative; margin-bottom: 15px; text-align: center; transition: 0.4s linear 1.4s; opacity: 0; transform: translateY(20px);}
#lead .lead-2 h3 img { width: 80%; max-width: 600px;}
#lead .lead-2 h3 img.sp { display: none;}
#lead .lead-2 .note { width: 100%;}
#lead.show .lead-1 h2 { opacity: 1; transform: translateY(0px);}
#lead.show .lead-2 h3 { opacity: 1; transform: translateY(0px);}
@media (min-width: 1901px) {
	#lead { background-size: 100% 100%;}
}
@media (max-width: 1201px) {
}
@media (max-width: 801px) {
	#lead { background: url('/img/fleur/bg/lead-sp.png') no-repeat 50% 100% / 100% auto;}
	#lead .news { display: block; margin: 0 auto 20px;}
	#lead .news div { position: relative; display: block; width: 96%; max-width: 480px; margin: 0 auto;
	 transition: 0.4s linear; opacity: 0; transform: translateY(20px);
	}
	#lead .news div ul li { display: none;}
	#lead .news div ul li:first-child{ display: block;}
	#lead .news div ul li a { position: relative; display: block; width: 100%; background: #fff; text-decoration: none; animation: shake 3.0s linear infinite;}
	#lead .news div ul li a dl { display: table; width: 100%; padding: 10px; background: linear-gradient(40deg,#ffff33,#ffb421);}
	#lead .news div ul li a dl dt,
	#lead .news div ul li a dl dd { display: table-cell; vertical-align: middle;}
	#lead .news div ul li a dl dt { width: 120px;}
	#lead .news div ul li a dl dt img { width: 100%;}
	#lead .news div ul li a dl dd { padding-left: 10px; font-size: 14px; font-feature-settings: 'palt';}
	#lead .news div ul li a dl dd span { display: block;}
	#lead .lead-1 { padding: 20px 0 10vw;}
	#lead .lead-1 h2 img.pc { display: none;}
	#lead .lead-1 h2 img.sp { display: block; width: 76%; margin: 0 auto;}
	#lead .lead-1 .note { bottom: 30px;}
	#lead .lead-2 { padding: 20px 0 21vw;}
	#lead .lead-2 h3 { margin-bottom: 0px;}
	#lead .lead-2 h3 img { width: 92%; max-width: 92%;}
	#lead .lead-2 .note { position: absolute; left: 0; bottom: 60px;}
	
	#lead.show .lead-1 .news div { opacity: 1; transform: translateY(0px);}
}
@media (max-width: 641px) {
	#lead .news a dl dd { font-size: 12px;}
	#lead .lead-1 { padding: 20px 0 6vw;}
	#lead .lead-1 .note { bottom: 15px;}
	#lead .lead-2 { padding: 15px 0 14vw;}
	#lead .lead-2 h3 img.pc { display: none;}
	#lead .lead-2 h3 img.sp { display: inline;}
}
@media (max-width: 481px) {
	#lead .lead-1 { padding: 8px 0 6vw;}
	#lead .news { margin: 0 auto 12px;}
	#lead .news div ul li a dl { padding: 8px;}
	#lead .news div ul li a dl dt { width: 80px;}
	#lead .news div ul li a dl dd { font-size: 11px;}
	#lead .lead-1 h2 img.sp { width: 70%;}
	#lead .lead-1 .note { bottom: 6px;}
	#lead .lead-2 { padding: 8px 0 18vw;}
	#lead .lead-2 .note { bottom: 30px;}
}


#concept { position: relative; height: 3500px;}
#concept .concept-posi { position: absolute; left: 0; top: -90px; width: 100%;}
#concept .concept-posi.fixed { position: fixed;}
#concept .bg { width: 100%; max-width: 1280px; margin: 0 auto; background: url('/img/fleur/bg/concept.png') no-repeat 50% 50%;}
#concept .inner-sct { padding: 150px 0 250px; transition: 0.4s linear; opacity: 0;}
#concept h2 { margin-bottom: 30px; text-align: center;}
#concept h2 img { width: 62%; max-width: 400px;}
#concept p { margin-bottom: 30px; font-size: 18px; font-weight: 700; text-align: center;}
#concept p sup { font-size: 12px; vertical-align: text-top;}
#concept .pc-step { width: 100%;}
#concept .pc-step .inner { position: relative; width: 90%; max-width: 1080px; margin: 0 auto;}
#concept .pc-step img { width: 100%;}
#concept .pc-step .step-1 { position: relative; width: 100%; padding: 50px 0; opacity: 0;}
#concept .pc-step .step-2,
#concept .pc-step .step-3,
#concept .pc-step .step-4 { position: absolute; left: 0; top: 0px; padding: 50px 0; width: 100%; opacity: 0;}
#concept .pc-step .step-1.on,
#concept .pc-step .step-2.on,
#concept .pc-step .step-3.on,
#concept .pc-step .step-4.on { opacity: 1;}
#concept .sp-step { display: none;}
#concept.show .inner-sct { opacity: 1;}
@media (min-width: 1901px) {
 #concept .concept-posi { background-size: 100% 100%;}
}
@media (max-width: 1201px) {
	#concept .concept-posi { background-size: auto 100%;}
}
@media (max-width: 801px) {
	#concept { height: auto;}
	#concept .concept-posi { position: relative; top: auto; width: 100%;}
	#concept .bg {
	 background-image: url('/img/fleur/bg/concept-top-sp.png'), url('/img/fleur/bg/concept-bottom-sp.png');
	 background-size: 100% auto, 100% auto;
	 background-position: 50% 0, 50% 100%;
	}
	#concept .inner-sct { padding: 120px 0 150px;}
	#concept .pc-step { display: none;}
	#concept .sp-step { display: block; padding: 20px 0; background: url('/img/fleur/bg/concept-mid-sp.png') repeat-y 50% 50% / 100% auto;}
	#concept .sp-step .inner { width: 90%; margin: 0 auto;}
	#concept .sp-step ul { width: 100%; max-width: 640px; margin: 0 auto;}
	#concept .sp-step ul li { }
	#concept .sp-step ul li dl dt,
	#concept .sp-step ul li dl dd {}
	#concept .sp-step ul li dl dt { position: relative;}
	#concept .sp-step ul li dl dt:after { content: ''; display: block; width: 20px; height: 20px; border-top: solid 2px #53341c; border-right: solid 2px #53341c;
	 position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(135deg);
	}
	#concept .sp-step ul li dl dt.open:after { transform: translateY(-50%) rotate(-45deg);}
	#concept .sp-step ul li dl dd { display: none;}
	#concept .sp-step ul li dl dt img,
	#concept .sp-step ul li dl dd img { width: 100%;}
}
@media (max-width: 641px) {
	#concept h2 { margin-bottom: 20px;}
	#concept p { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#concept .inner-sct { padding: 60px 0 80px;}
	#concept p { margin-bottom: 12px; font-size: 14px;}
	#concept p sup { font-size: 10px;}
	#concept .sp-step { display: block; padding: 8px 0;}
	#concept .sp-step ul li dl dt:after { width: 12px; height: 12px;}
}


#campaign { position: relative; z-index: 3; margin-bottom: -160px; background: url('/img/fleur/bg/tweet.png') no-repeat 50% 100%;}
#campaign .tit { position: relative; height: 456px; margin-bottom: -100px; padding-top: 150px; background: url('/img/fleur/bg/campaign.png') no-repeat 50% 0;}
#campaign .tit h2 { margin-bottom: 0px; text-align: center; transition: 0.4s linear; opacity: 0;}
#campaign .tit h2 img { width: 76%; max-width: 480px;}
#campaign .tit .date { width: 85%; max-width: 520px; margin: 0 auto 30px; transition: 0.4s linear 0.2s; opacity: 0;}
#campaign .tit .date img { width: 100%;}
#campaign .tit p { font-size: 23px; font-weight: 700; letter-spacing: 0.15rem; line-height: 1.5; text-align: center; transition: 0.4s linear 0.4s; opacity: 0;}
#campaign .tit p span { display: block; padding: 8px 0;}
#campaign .tit p em { display: inline-block; padding: 0 5px; background: #fff;}
#campaign .inner-sct {  padding: 0px 0 120px;}
#campaign figure { width: 90%; max-width: 1080px; margin: 0 auto 20px; transition: 0.4s linear; opacity: 0;}
#campaign figure img { width: 100%;}
#campaign figure img.sp { display: none;}
#campaign figure figcaption { font-size: 28px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
#campaign figure figcaption em { font-size: 28px; letter-spacing: 0.0rem;}
#campaign ul.tweet { width: 94%; max-width: 680px; margin: 0 auto 20px; font-size: 0; text-align: center;}
#campaign ul.tweet li { display: inline-block; width: 50%;}
#campaign ul.tweet li span { display: block; width: 96%; margin: 0 auto;}
#campaign ul.tweet li span img { width: 100%;}
#campaign ul.tweet li a { display: block; width: 96%; margin: 0 auto;}
#campaign ul.tweet li a img { width: 100%;}
#campaign ul.tweet li a:hover img{ opacity: 0.8;}
#campaign p.txt { margin-bottom: 50px; font-size: 21px; font-weight: 700; letter-spacing: 0.15rem; text-align: center;}
#campaign .btn-tw { width: 62%; max-width: 350px; margin: 0 auto 20px;}
#campaign .btn-tw a { display: block; border-radius: 6px; overflow: hidden;}
#campaign .btn-tw a img { width: 100%;}
#campaign .btn-tw a:hover img { opacity: 0.8;}

#campaign .tit.show h2,
#campaign .tit.show .date,
#campaign .tit.show p,
#campaign figure.show { opacity: 1;}
@media (min-width: 1901px) {
 #campaign .tit { background-size: 100% 100%;}
}
@media (max-width: 801px) {
	#campaign { margin-bottom: -10vw; background: url('/img/fleur/bg/tweet-sp.png') no-repeat 50% 100% / 100% auto;}
	#campaign .tit { height: 76vw; margin-bottom: -32vw; padding-top: 20vw; background: url('/img/fleur/bg/campaign-sp.png') no-repeat 50% 0 / 100% auto;}
	#campaign figure img.pc { display: none;}
	#campaign figure img.sp { display: block; margin: 0 auto 15px;}
}
@media (max-width: 641px) {
	#campaign .tit { padding-top: 18vw;}
	#campaign .tit .date { margin: 0 auto 10px;}
	#campaign .tit p { font-size: 3.4vw;}
	#campaign figure figcaption { font-size: 3.2vw; letter-spacing: 0.05rem;}
	#campaign figure figcaption em { font-size: 5.0vw;}
	#campaign p.txt { margin-bottom: 30px; font-size: 3.8vw;}
}
@media (max-width: 481px) {
	#campaign { margin-bottom: -18vw;}
	#campaign .tit { height: 76vw; margin-bottom: -46vw;}
	#campaign .tit .date { margin: 0 auto 6px;}
	#campaign .tit p { font-size: 14px; line-height: 1.25; letter-spacing: 0.075rem;}
	#campaign .tit p em { padding: 0 2px;}
	#campaign .inner-sct {  padding: 60px 0 60px;}
	#campaign figure { margin: 0 auto 12px;}
	#campaign figure figcaption { font-size: 20px;}
	#campaign ul.tweet { margin: 0 auto 10px;}
	#campaign .btn-tw { margin: 0 auto 10px;}
	#campaign p.txt { margin-bottom: 20px; font-size: 15px; letter-spacing: 0.05rem;}
}


#product { position: relative; z-index: 2; background: url('/img/fleur/bg/product.jpg') no-repeat 50% 0%;}
#product .inner-sct { padding-top: 180px;}
#product h2 { text-align: center; transition: 0.4s linear; opacity: 0;}
#product h2 img { width: 62%; max-width: 400px;}
#product .space { position: relative; width: 100%; height: 840px; margin: 0 auto; transition: 0.3s linear;}
#product .space .more { position: absolute; left: 0; bottom: 40px; width: 100%; transition: 0.3s linear;}
#product .space .more .toggle { width: 60%; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 8px; overflow: hidden; cursor: pointer;}
#product .space .more .toggle img { width: 100%;}
#product .space .more .toggle:hover img { opacity: 0.8;}
#product .space.open { height: 720px;}
#product .space.open .more { bottom: -45px;}
#product .hide-ctn { display: none;}
#product #item-1 { background: url('/img/fleur/bg/product-1.jpg') no-repeat 50% 50% / cover;}
#product #item-2 { background: url('/img/fleur/bg/product-2.jpg') no-repeat 50% 50% / cover;}
#product #item-3 { background: url('/img/fleur/bg/product-3.jpg') no-repeat 50% 50% / cover;}
#product #item-4 { padding-bottom: 50px; background: url('/img/fleur/bg/product-4.jpg') no-repeat 50% 50% / cover;}
#product .item .inner { width: 94%; max-width: 1080px; margin: 0 auto; padding: 80px 0 50px;}
#product .item figure { width: 100%; margin: 0 auto 30px; text-align: center;}
#product .item figure.main-item { width: 100%; max-width: 200px;}
#product .item figure img { width: 100%;}
#product .item h3 { margin-bottom: 30px; text-align: center;}
#product .item h3 img { width: 80%; max-width: 450px;}
#product .item p { text-align: center;}
#product .item p.txt { margin-bottom: 50px; font-size: 20px; font-weight: 700; letter-spacing: 0.1rem;}
#product .item p.txt sup { font-size: 12px; vertical-align: middle;}
#product .item p.price { font-size: 12px; font-weight: 700; letter-spacing: 0.05rem;}
#product .item p.price span { font-size: 18px;}
#product .item p.price.sp { display: none;}
#product .item .flex { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 700px; margin: 0 auto;}
#product .item .flavor { width: 50%;}
#product .item .cart { width: 50%;}
#product .item .flavor p { text-align: center;}
#product .item .flavor p img { width: 90%;}
#product .item .cart span,
#product .item .cart a{ position: relative; display: block; width: 80%; max-width: 310px; margin: 0 auto; padding: 8px 0; border-radius: 50px;
 background: linear-gradient(50deg,#ff7e00,#fbae26,#ff926a); color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
}
#product .item .cart span{ padding: 6px 0 10px;}

#product .item .cart a svg { display: inline-block; width: 27px; margin-right: 8px; fill: #fff; vertical-align: middle;}
#product .item .cart a:after { content: ''; display: block; width: 10px; height: 10px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#product .item .cart span em,
#product .item .cart a em { display: inline-block; vertical-align: middle;}

#product .item .cart form { position: relative; display: block; width: 80%; max-width: 310px; margin: 0 auto; border-radius: 50px; overflow: hidden;}
#product .item .cart form:after { content: ''; display: block; width: 10px; height: 10px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg); z-index: 2;
}
#product .item .cart form svg { display: block; width: 27px; fill: #fff; position: absolute; left: 50px; top: 50%; transform: translateY(-50%); z-index: 2;}
#product .item .cart form input[type="submit"] { position: relative; display: block; width: 100%; padding: 8px 0; border: none; z-index: 1;
 background: linear-gradient(50deg,#ff7e00,#fbae26,#ff926a);
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; text-indent: 30px;
}

#product .item-flex { display: flex; justify-content: space-between; width: 100%; max-width: 1080px; margin: 0 auto 40px; padding: 80px 0 0;}
#product .item-flex .sub-item { width: 50%;}
#product .sub-item figure img { max-width: 220px;}
#product .sub-item h4 { margin-bottom: 20px; text-align: center;}
#product .sub-item h4 img { width: 90%; max-width: 450px;}
#product .sub-item p.price{ margin-bottom: 60px;}
#product .sub-item .cart { width: 100%;}
#product .item .note p { color: #aaa; font-size: 10px; text-align: center; }
#product h2.show { opacity: 1;}
@media (max-width: 801px) {
	#product { background: url('/img/fleur/bg/product-sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product .space { height: 100vw;}
	#product .space.open { height: 94vw;}
	#product .item p.price { font-size: 10px; letter-spacing: 0.025rem;}
	#product .item p.price span { font-size: 16px;}
	#product .sub-item figure { margin: 0 auto 50px;}
	#product .sub-item figure img { max-width: 200px;}
	#product .sub-item h4 { margin-bottom: 40px;}
}
@media (max-width: 641px) {
	#product .space { height: 92vw;}
	#product .space.open { height: 84vw;}
	#product .space.open .more { bottom: -30px;}
	#product #item-1 { background: url('/img/fleur/bg/product-1-sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product #item-2 { background: url('/img/fleur/bg/product-2-sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product #item-3 { background: url('/img/fleur/bg/product-3-sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product #item-4 { padding-bottom: 30px; background: url('/img/fleur/bg/product-4b-sp.jpg') no-repeat 50% 100% / 100% auto;}
	#product #item-4a { padding: 80px 0 40px; background: url('/img/fleur/bg/product-4a-sp.jpg') no-repeat 50% 0% / 100% auto;}
	#product #item-4b { padding: 40px 0 20px;}
	#product .item .inner { padding: 80px 0 50px;}
	#product .item figure { margin: 0 auto 8.5vw;}
	#product .item figure.main-item { width: 28%;}
	#product .item p.txt { margin-bottom: 50px; font-size: 3.2vw; letter-spacing: 0.05rem;}
	#product .item p.txt sup { font-size: 10px;}
	#product .item p.price.pc { display: none;}
	#product .item p.price.sp { display: block;}
	#product .item p.price { font-size: 12px;}
	#product .item p.price span { font-size: 20px;}
	#product .item .flex { display: block;}
	#product .item .flavor { width: 100%; margin-bottom: 20px;}
	#product .item .cart { width: 100%;}
	#product .item .flavor p.img { margin-bottom: 15px;}
	#product .item .flavor p img { width: 80%; max-width: 360px;}
	#product .item-flex { display: block; margin: 0 auto; padding: 0px;}
	#product .item-flex .sub-item { width: 100%;}
	#product .sub-item figure img { width: 36%;}
	#product .sub-item p.price{ margin-bottom: 12px;}
	#product .item .note { width: 90%; margin: 0 auto;}
	#product .item .note p { text-align: left;}
}
@media (max-width: 481px) {
	#product .inner-sct { padding-top: 80px;}
	#product .space { height: 96vw;}
	#product .space .more { bottom: 20px;}
	#product .space.open .more { bottom: -24px;}

	#product #item-4 { padding-bottom: 15px;}
	#product #item-4a { padding: 20px 0 30px;}
	#product #item-4b { padding: 30px 0 12px;}

	#product .item .inner { padding: 50px 0 30px;}
	#product .item h3 { margin-bottom: 20px;}
	#product .item p.txt { margin-bottom: 30px; font-size: 14px; letter-spacing: 0.025rem;}
	#product .item p.price { font-size: 11px;}
	#product .item p.price span { font-size: 17px;}
	#product .item .flavor { margin-bottom: 12px;}
	#product .item .flavor p.img { margin-bottom: 8px;}

	#product .item .cart span,
	#product .item .cart a { max-width: 280px; padding: 6px 0; font-size: 16px;}
	#product .item .cart a svg { width: 20px; margin-right: 5px;}
	#product .item .cart a:after { width: 8px; height: 8px;}
	
	#product .item .cart form svg { width: 20px; left: 70px;}
	#product .item .cart form input[type="submit"] { padding: 6px 0; font-size: 16px; text-indent: 20px;}

	#product .sub-item figure { margin: 0 auto 12.5vw;}
	#product .sub-item h4 { margin-bottom: 15px;}
	#product .sub-item h4 img { width: 78%;}
	#product .sub-item .cart { width: 90%; margin: 0 auto;}
	#product .item .note p br { display: none;}
}



#award { background: #fff;}
#award .award-tit { position: relative; padding: 15px 0; background: url('/img/fleur/bg/award-ttl.jpg') no-repeat 50% 0% / cover; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 3px #ff7e00; border-right: solid 3px #ff7e00;
 position: absolute; left: 50%; top: 50%; transform: translateY(-70%) rotate(45deg); transition: 0.4s linear;
}
#award .award-tit.open:after { transform: translateY(-30%) rotate(-135deg);}
#award .award-tit h2 { padding: 16px 0;
 color: #621a14; font-size: 32px; font-weight: 600; letter-spacing: 0.12rem; line-height: 1; text-align: center;
}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 50px; height: 40px; vertical-align: middle;
 background: url('/img/fleur/icn-award.png') no-repeat 50% 50% / 100% auto;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
#award .ctn { display: none;}
@media (max-width: 801px) {
	#award .award-tit:after { margin: 0px; left: auto; right: 5%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#award { border-width: 1px;}
	#award .award-tit { padding: 4px 0;}
	#award .award-tit:after { width: 15px; height: 15px; border-width: 2px;}
	#award .award-tit h2 { padding: 8px 0; font-size: 20px; letter-spacing: 0rem;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 30px; height: 24px;}
	#award .award-tit h2 span { margin: 0 12px;}
}



#series { position: relative; z-index: 1; margin-bottom: -120px;}
#series .bg { background: url('/img/fleur/bg/series.png') no-repeat 50% 100% / cover;}
#series .inner-sct { width: 94%; max-width: 1200px; margin: 0 auto; padding: 70px 0 180px; transition: 0.4s linear; opacity: 0; }
#series h2 { margin-bottom: 40px; text-align: center;}
#series h2 img { width: 72%; max-width: 500px;}
#series h2 img.sp { display: none;}

#series.show .inner-sct { opacity: 1;}
@media (max-width: 801px) {
	#series .inner-sct { width: 100%;}
}
@media (max-width: 641px) {
	#series { margin-bottom: -100px;}
	#series .bg{ background: url('/img/fleur/bg/series-sp.png') no-repeat 50% 100% / cover;}
	#series .inner-sct { padding: 40px 0 120px;}
	#series h2 { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#series .inner-sct { padding: 30px 0 80px;}
	#series h2 img.pc { display: none;}
	#series h2 img.sp { display: block; margin: 0 auto;}
}


#insta { background: linear-gradient(20deg,#ffb421,#fff248);}
#insta .inner-sct { padding: 180px 0 100px; transition: 0.4s linear; opacity: 0;}
#insta h2 { margin-bottom: 30px; text-align: center;}
#insta h2 img { width: 62%; max-width: 400px;}
#insta p.read { margin-bottom: 20px; font-size: 21px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#insta ul { width: 90%; max-width: 680px; margin: 0 auto 40px; font-size: 0; text-align: center;}
#insta ul li { display: inline-block; width: 33%;}
#insta ul li a { display: block; width: 90%; margin: 0 auto; background: #fff;}
#insta ul li a img { width: 100%;}
#insta ul li a:hover img { opacity: 0.8;}
#insta .btn { width: 60%; max-width: 420px; margin: 0 auto;}
#insta .btn a { display: block;}
#insta .btn a img { width: 100%;}
#insta .btn a:hover { opacity: 0.8;}
#insta.show .inner-sct { opacity: 1;}
@media (max-width: 641px) {
	#insta .inner-sct { padding: 140px 0 60px;}
	#insta h2 { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#insta .inner-sct { padding: 120px 0 50px;}
	#insta h2 { margin-bottom: 10px;}
	#insta p.read { margin-bottom: 15px; font-size: 18px;}
	#insta ul { width: 84%; margin: 0 auto 20px;}
}


#shop { background: url('/img/fleur/bg/shop.jpg');}
#shop .inner-sct { width: 90%; margin: 0 auto; padding: 80px 0 100px; transition: 0.4s linear; opacity: 0; }
#shop h2 { margin-bottom: 40px; text-align: center;}
#shop h2 img { width: 62%; max-width: 400px;}
#shop p.read { margin-bottom: 20px; font-size: 21px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#shop p.note { margin-bottom: 30px; font-size: 13px; font-weight: 700; text-align: center;}
#shop ul { width: 100%; max-width: 860px; margin: 0 auto; font-size: 0;}
#shop ul li { display: inline-block; width: 33.333334%; padding: 12px 0;}
#shop ul li a { position: relative; display: block; width: 94%; margin: 0 auto; padding: 2px; border-radius: 5px; background: linear-gradient(50deg,#ff7e00,#fbae26,#ff926a); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;}
#shop ul li a:before,
#shop ul li a:after { content: ''; display: block; position: absolute; }
#shop ul li a:before{ width: 18px; height: 20px; background: url('/img/fleur/icn.png') no-repeat 50% 50% / 100% auto; left: 10px; top: 50%; transform: translateY(-50%);}
#shop ul li a:after { right: 18px; top: 50%; width: 6px; height: 8px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 transform: translateY(-50%) rotate(45deg);
}
#shop ul li a span{ display: block; width: 100%; padding: 12px 0; padding-left: 32px; border: solid 2px #fff; border-radius: 4px; line-height: 1.2;}
#shop ul li a:hover { opacity: 0.8;}
#shop.show .inner-sct { opacity: 1;}
@media (max-width: 641px) {
	#shop { background: url('/img/fleur/bg/shop-sp.jpg') repeat-y 50% 0% / 100% auto;}
	#shop .inner-sct { padding: 40px 0 60px;}
	#shop h2 { margin-bottom: 20px;}
	#shop p.read { margin-bottom: 10px;}
	#shop p.note { margin-bottom: 20px;}
	#shop ul li { width: 50%; padding: 8px 0;}
	#shop ul li a { font-size: 13px;}
	#shop ul li a:before{ width: 12px; height: 18px; left: 8px;}
	#shop ul li a:after { right: 10px; width: 6px; height: 6px;}
	#shop ul li a span{ padding: 10px 0; padding-left: 24px; border-width: 1px;}
}
@media (max-width: 481px) {
	#shop .inner-sct { padding: 30px 0 40px;}
	#shop h2 { margin-bottom: 12px;}
	#shop p.read { margin-bottom: 6px; font-size: 16px;}
	#shop p.note { font-size: 12px;}
}

.fix-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: -1}
.fix-bg .bg-1,
.fix-bg .bg-2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.2s linear;}
.fix-bg .bg-1:before,
.fix-bg .bg-2:before { content: ''; display: block; width: 100%; max-width: 1280px; height: 100%; margin: 0 auto;}
.fix-bg .bg-1:before { background-image: url('/img/fleur/bg/bg-1.jpg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
.fix-bg .bg-2:before { background-image: url('/img/fleur/bg/bg-2.jpg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; opacity: 0;}
.fix-bg .bg-2.show { opacity: 1;}
@media (max-width: 801px) {
	.fix-bg .bg-1:before { background-image: url('/img/fleur/bg/bg-1-sp.jpg');}
	.fix-bg .bg-2:before { background-image: url('/img/fleur/bg/bg-2-sp.jpg');}
}