@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;
}


/*	Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
  	  touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; top: 0; left: 0; display: block;}
.slick-track:before,
.slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.slick-initialized .slick-slide { display: block; outline: none;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto;}
.slick-arrow.slick-hidden { display: none;}

.slick-arrow{ width: 50px; height: 50px; position: absolute; bottom: 50px; background: transparent; border: none; z-index: 100; text-indent: -9999em; outline: none;}
.slick-prev { left: 5%;}
.slick-next { right: 5%;}
.slick-arrow:before{ position: absolute; content: ''; display: block; width: 30px; height: 30px; top: 50%; transform: translateY(-50%) rotate(45deg);}
.slick-prev:before { left: 30%; border-bottom: solid 2px #000; border-left: solid 2px #000;}
.slick-next:before { right: 30%; border-top: solid 2px #000; border-right: solid 2px #000;}


/** Dots */
.slick-dotted.slick-slider{ margin-bottom: 30px;}
.slick-dots { position: absolute; bottom: 0px; display: block; width: 100%; padding: 0; margin: 0; text-align: center;}
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer;}
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer;
 color: transparent; border: 0; outline: none; background: transparent; 
}
.slick-dots li button:hover,
.slick-dots li button:focus{ outline: none;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before { opacity: 1;}
.slick-dots li button:before { content: ''; position: absolute; text-align: center;}
.slick-dots li.slick-active button:before { opacity: .75; color: black;}


/** Dots */
.slick-dotted.slick-slider{ margin-bottom: 30px;}
.slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; text-align: center;}
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer;}
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; cursor: pointer;
 color: transparent; border: 0; outline: none; background: transparent; 
}
.slick-dots li button:hover,
.slick-dots li button:focus{ outline: none;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before { opacity: 1;}
.slick-dots li button:before { position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: ''; text-align: center;}
.slick-dots li.slick-active button:before { opacity: .75; color: black;}
@media (max-width: 481px) {
	.slick-arrow{ width: 45px; height: 45px; bottom: 30px;}
	.slick-arrow:before{ width: 24px; height: 24px; border-width: 1px;}
}


/* Magnific Popup CSS */
.mfp-bg { position: fixed; top: 0; left: 0; z-index: 1042; width: 100%; height: 100%; overflow: hidden; background: #fff; opacity: 0.95; }
.mfp-wrap { position: fixed; top: 0; left: 0; z-index: 1043; width: 100%; height: 100%; outline: none !important; -webkit-backface-visibility: hidden;}
.mfp-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 8px; text-align: center;}

.mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.mfp-align-top .mfp-container:before { display: none; }
.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045;}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }
.mfp-ajax-cur { cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; }
.mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.mfp-auto-cursor .mfp-content { cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.mfp-loading.mfp-figure { display: none; }
.mfp-hide { display: none !important; }
.mfp-preloader { position: absolute; top: 50%; left: 8px; right: 8px; z-index: 1044; 
width: auto; margin-top: -0.8em; color: #CCC; text-align: center;}
.mfp-preloader a { color: #CCC; }
.mfp-preloader a:hover { color: #FFF; }
.mfp-s-ready .mfp-preloader { 	display: none; }
.mfp-s-error .mfp-content { display: none; }
button.mfp-close,
button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none;
display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; }

button::-moz-focus-inner { padding: 0; border: 0;}

.mfp-close { position: absolute; right: 0%; top: 0px; display: block; width: 42px; height: 42px;
 color: #FFF; text-decoration: none; font-size: 0px; text-indent: -9999em;
}
.mfp-close-btn-in .mfp-close { color: #333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close { width: 50%; color: #FFF; text-align: right; }
.mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; }

.mfp-arrow { position: absolute; top: 50%; opacity: 0.65; margin: 0; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; }
.mfp-arrow:active{ margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus { opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after { content: ''; display: block; width: 0; height: 0;
 position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent;
}
.mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
.mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }

.mfp-arrow-left { left: 0; }
.mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; }
.mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; }

.mfp-arrow-right { right: 0; }
.mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; }
.mfp-arrow-right:before { border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }
.mfp-iframe-holder .mfp-close { top: -40px; }

.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe { position: absolute; top: 0; left: 0;
 display: block; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000;
}

/* Main image in popup */
img.mfp-img { display: block; width: auto; max-width: 100%; height: auto; line-height: 0; box-sizing: border-box; margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure { line-height: 0; }
.mfp-figure:after { content: ''; display: block; width: auto; height: auto; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444;
 position: absolute; left: 0; top: 40px; bottom: 40px; right: 0; z-index: -1;
}
.mfp-figure small { display: block; color: #BDBDBD; font-size: 12px; line-height: 14px; }
.mfp-figure figure{ margin: 0; }

.mfp-bottom-bar { width: 100%; margin-top: -36px; position: absolute; top: 100%; left: 0; cursor: auto; }

.mfp-title { padding-right: 36px; color: #F3F3F3; text-align: left; line-height: 18px; word-wrap: break-word; }

.mfp-image-holder .mfp-content { max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
	/**
	 * Remove all paddings around the image on small screen
	 */
	.mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; }
	.mfp-img-mobile img.mfp-img { padding: 0; }
	.mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; }
	.mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; }
	.mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; }
	.mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }
	.mfp-img-mobile .mfp-counter { right: 5px; top: 3px; }
	.mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; }
}
@media all and (max-width: 901px) {
	.mfp-close {}
	.mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); }
	.mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; }
	.mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%;}
	.mfp-container { padding-left: 6px; padding-right: 6px; }
}




/*		font-style
-------------------------------------------------- */
body { width: 100%;
	color: #692407;
	font-family: "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;
}
body.fixed { position: fixed;}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min {font-family: "游明朝", "Yu Mincho", "YuMincho", 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;}



#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #fff; z-index: 101;}
#loading div { width: 70%; max-width: 500px; position: absolute; left: 50%; top: 30%; transform: translate(-50%,0);}
#loading div svg { stroke-dasharray: 500; stroke-dashoffset: 500; stroke-width: 0.6px; fill: rgba(255,255,255,0);
 animation: strokeAnime 2.5s linear 0.5s forwards;
}
@keyframes strokeAnime {
  0% { stroke-dashoffset: 500; fill: rgba(255,255,255,0); stroke: rgb(105, 36, 8,1);}
	60% { fill: rgba(255,255,255,0);}
	80% { stroke-dashoffset: 0;}
  100%{ fill: rgba(105, 36, 8,1); stroke: #fff;}
}



.menu-btn { position: fixed; right: 0; top: 0; width: 100%; z-index: 102; transition: 0.4s linear; opacity: 0;}
.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: #42220f; 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: #621a14;}
.menu-trig.active div span:nth-of-type(2) { width: 72%; transform: translate(-50%,-5px) rotate(-45deg); background: #621a14;}
.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; overflow: hidden;}


#hd { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; 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: 350px; height: 100%; padding: 40px 0 20px; background: #fdf6d2; transition: 0.4s linear 0.2s;}
#hd .menu .scroll { width: 100%; height: 100%; padding: 20px 0; overflow-y: scroll; }
#hd .menu ul.nav { width: 90%; max-width: 300px; margin: 0 auto 20px;}
#hd .menu ul.nav li { padding: 10px 0; font-size: 14px;}
#hd .menu ul.nav li a { color: #5c322f; font-weight: 700; letter-spacing: 0.2rem; text-decoration: none;}

#hd .menu ul.nav li ul.sns { width: 100%;}
#hd .menu ul.nav li ul.sns li { display: inline-block; width: 50px; padding: 0; vertical-align: middle;}
#hd .menu ul.nav li ul.sns li a { display: block; width: 21px;}
#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 { width: 90%; max-width: 300px; margin: 0 auto 20px; font-size: 0;}
#hd .menu ul.brand li { position: relative; border-bottom: solid 1px #5c322f; font-size: 12px;}
#hd .menu ul.brand li.top { padding: 0; border-bottom: none; font-size: 12px;}
#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; font-weight: 700; 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: #5c322f;
 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 #5c322f; color: #5c322f; 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: 12px; 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="%235c322f" /></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 #5c322f; border-right: solid 2px #5c322f;
 position: absolute; right: 10px; 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: 10px;}
#hd .menu ul.brand li ul.col li { display: inline-block; width: 50%; padding: 5px; border-bottom: none;}
#hd .menu ul.brand li ul.col li a { display: block; padding: 4px 0px; padding-left: 30px; }

#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: 10px;}
#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; font-size: 10px;}
#hd .menu ul.aside li a { display: block; padding: 5px 0; border: solid 1px #53341c; border-radius: 50px; color: #53341c; 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: 30px; }
	#hd .menu ul.nav li { padding: 8px 0;}
}




#ft { background: #fff;}
#ft .inner-ft { padding: 40px 0px 30px;}
#ft h3 { margin-bottom: 30px; text-align: center;}
#ft h3 img { width: 40%; max-width: 160px;}
#ft ul { font-size: 0; text-align: center;}
#ft ul li { position: relative; display: inline-block; padding: 0 30px; font-size: 14px; vertical-align: middle;}
#ft ul li a { color: #000; text-decoration: none;}
#ft ul li a span { display: block; font-size: 12px;}
#ft .copyright { padding: 10px 0; background: #000;}
#ft .copyright p { color: #fff; font-size: 12px; 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: 13px; 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 30px;}
	#ft h3 { margin-bottom: 20px;}
	#ft ul li a { padding: 8px 0;}
	#ft .copyright p { font-size: 10px;}
}




.popup-box { width: 86%; max-width: 780px; margin: 0 auto;}
.popup-box#win-deep { background: #fffbe1;}
.popup-box#win-melty { background: #fff5fa;}
.popup-box#win-milky { background: #fff8f3;}
.popup-box .inner { position: relative; padding: 30px;}
.popup-box .tit { text-align:center;}
.popup-box .tit h3 { color: #613d22; font-size: clamp(16px,3.6vw,32px); font-weight: 700; letter-spacing: 0.1rem; line-height: 1; text-align: center;}
.popup-box .tit h3:before { content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 12px; vertical-align: middle;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><g fill="%23613d22"><path d="M5.7,26.5a1.06,1.06,0,0,1,0-2.11H20l.66-2.46H5.54a1.07,1.07,0,0,1-1-.77L.77,7.78A1.05,1.05,0,0,1,1,6.86a1.07,1.07,0,0,1,.84-.42h23L26.22,1a1.06,1.06,0,0,1,1-.79h5a1.07,1.07,0,0,1,1.06,1.06,1.06,1.06,0,0,1-1.06,1.05H28.05L21.81,25.72a1.05,1.05,0,0,1-1,.78Zm12.48-6.68h3l1.21-4.58H18.18Zm-7.1,0h5V15.24h-5Zm-4.74,0H9V15.24H5.06Zm11.84-6.69H23l1.21-4.58h-6Zm-7.1,0h5V8.55h-5Zm-6.62,0H9V8.55H3.18Z"/><path d="M7.94,33.84a3,3,0,1,1,3-3A3,3,0,0,1,7.94,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.91.91,0,0,0,7.94,29.92Z"/><path d="M19,33.84a3,3,0,1,1,3-3A3,3,0,0,1,19,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.9.9,0,0,0,19,29.92Z"/></g></svg>');
 background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% auto;}
.popup-box .ctn { padding: 20px 0;}
.popup-box .ctn p { color: #929292; font-size: 36px; font-weight: 700; text-align: center;}
.popup-box .ctn ul { width: 100%; max-width: 580px; margin: 0 auto; font-size: 0;}
.popup-box .ctn ul li { display: inline-block; width: 50%; padding: 15px; font-weight: 700; line-height: 1; vertical-align: top;}
.popup-box .ctn ul li a { display: block; padding: 16px; color: #fff; text-align: center; text-decoration: none;}
.popup-box#win-deep .ctn ul li a { background: #ffd300;}
.popup-box#win-melty .ctn ul li a { background: #f9b2c6;}
.popup-box#win-milky .ctn ul li a { background: #fc9b6b;}
.popup-box .ctn ul li a em,
.popup-box .ctn ul li a span { display: inline-block; vertical-align: baseline;}
.popup-box .ctn ul li a em { font-size: clamp(18px,2.6vw,24px);}
.popup-box .ctn ul li a span { font-size: clamp(14px,2.1vw,18px);}
.popup-box .ctn ul li a:hover { opacity: 0.8}

.popup-box .ctn ul li span.nolink { display: block; padding: 0px; border: solid 1px #ccc;  background: #ccc;}
.popup-box .ctn ul li span.nolink img { width: 100%;}
.popup-box .ctn ul li a.nolink { border: solid 1px #ccc; color: #ccc; pointer-events: none;}

.popup-box .win-close { width: 36px; height: 36px; position: absolute; right: 30px; top: 30px;}
.popup-box .win-close div { position: relative; width: 100%; height: 100%; text-indent: -99999em; cursor: pointer;}
.popup-box .win-close div:before,
.popup-box .win-close div:after { content: ''; display: block; width: 2px; height: 40px; background: #6a6a6a; position: absolute; left: 50%; top: 50%;}
.popup-box .win-close div:before{ transform: translate(-50%,-50%) rotate(45deg);}
.popup-box .win-close div:after { transform: translate(-50%,-50%) rotate(-45deg);}
@media (max-width: 801px) {
	.popup-box .ctn ul li { padding: 10px;}
}
@media (max-width: 481px) {
	.popup-box .inner { padding: 40px 20px;}
	.popup-box .tit h3 { letter-spacing: 0.05rem;}
	.popup-box .tit h3:before { width: 18px; height: 18px; margin-right: 8px;}
	.popup-box .ctn { padding: 12px 0;}
	.popup-box .ctn ul { width: 82%; max-width: 220px;}
	.popup-box .ctn ul li { display: block; width: 100%; padding: 10px 0;}
	.popup-box .ctn ul li a { padding: 12px 0;}
	.popup-box .win-close { width: 24px; height: 24px; right: 10px; top: 10px;}
	.popup-box .win-close div:before,
	.popup-box .win-close div:after { height: 21px;}
}





.note { width: 100%;}
.note div{ width: 100%; margin: 0 auto;}
.note ul { width: 100%;}
.note ul li { color: #9b9b9b; font-size: 10px;}
@media (max-width: 481px) {
	.note ul li { line-height: 1.25;}
}

.sct { position: relative;}
.pos { position: absolute;}

.ttl-1,
.ttl-2 { position: relative; width: 100%;}
.ttl-1 div,
.ttl-2 div { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; transition: 0.4s linear; opacity: 0;}
.ttl-1:after,
.ttl-2:after { content: ''; display: block; width: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.ttl-1:after { padding-top: 320px; background: url('./img/ttl/bg-1.png') no-repeat 50% 100%;}
.ttl-2:after { padding-top: 420px; background: url('./img/ttl/bg-2.png') no-repeat 50% 100%;}
.ttl-1 h2,
.ttl-2 h2 { position: absolute; left: 0; width: 100%; text-align: center; z-index: 2;}
.ttl-1 h2 picture,
.ttl-2 h2 picture { display: block; width: 90%; max-width: 520px; margin: 0 auto;}
.ttl-1 h2 picture img,
.ttl-2 h2 picture img { width: 100%;}
.ttl-1 h2 > img,
.ttl-2 h2 > img { width: 90%; max-width: 520px;}
.ttl-1.show div,
.ttl-2.show div { opacity: 1;}
@media (max-width: 801px) {
	.ttl-1:after { padding-top: 40%; background: url('./img/ttl/bg-1@sp.png') no-repeat 50% 100% / 100% auto;}
	.ttl-2:after { background: url('./img/ttl/bg-2@sp.png') no-repeat 50% 100% / 100% auto;}
}


@keyframes moving {
	 0% { transform: translateY(0px);}
	50% { transform: translateY(8px);}
 100% { transform: translateY(0px);}
}


#kv .inner-kv { position: relative;}
#kv .ctn { position: absolute; width: 100%; left: 0; top: 0; z-index: 2;}
#kv .ctn .txt { position: relative; width: 90%; max-width: 1024px; margin: 0 auto; transition: 0.8s linear 0.6s; opacity: 0;}
#kv .ctn .txt .inner { position: relative; width: 62%; max-width: 640px; padding-top: 100px;}
#kv .ctn .txt .inner:before { content: ''; display: block; width: 120px; height: 180px;
 position: absolute; left: 0px; top: 72px;
 background: url('./img/badge-cosme.png') no-repeat 50% 0 / 100% auto;
}
#kv .ctn .txt h1 { text-align: center;}
#kv .ctn .txt h1 img { width: 75%; max-width: 500px;}
#kv .note { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2;}
#kv .note div { width: 100%; max-width: 1048px; margin: 0 auto; padding: 20px;}
#kv .note ul {}
#kv .note ul li { color: #853522; font-size: 10px; text-align: left;}

#kv .bg { position: relative; width: 100%;}
#kv .bg picture { display: block; width: 100%;}
#kv .bg picture img { width: 100%;}
#kv.show .ctn .txt { opacity: 1;}
@media (max-width: 1281px) {
	#kv .ctn .txt .inner { padding-top: 6vw;}
}
@media (max-width: 801px) {
	#kv .ctn .txt .inner { padding-top: 8vw;}

	#kv .ctn {}
	#kv .ctn .txt { width: 90%; }
	#kv .ctn .txt .inner { width: 100%; max-width: 100%; margin: 0 auto; padding-top: 6vw;}
	#kv .ctn .txt .inner:before { left: 0px; top: 15%; background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 0 / 100% auto;}
}
@media (max-width: 481px) {
	#kv .ctn .txt .inner:before { width: 72px; height: 100px;}
	#kv .note div { padding: 12px;}
}


#award .award-tit { position: relative; background: #f89200; padding: 12px 0; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 12px; height: 12px;
 border-top: solid 3px #fff; border-right: solid 3px #fff;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(135deg); margin-left: 300px;
}
#award .award-tit.open:after { transform: translate(-50%,-35%) rotate(-45deg);}
#award .award-tit h2 { color: #fff; font-size: 30px; letter-spacing: 0.2rem; text-align: center;}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 38px; height: 30px;
 background: url('/img/awards/icn.png') no-repeat 50% 50% / 100% auto; vertical-align: middle;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
@media (max-width: 801px) {
	#award .award-tit:after { left: auto; right: 30px; transform: translate(0%,-50%) rotate(135deg); margin-left: 0px;}
}
@media (max-width: 481px) {
	#award .award-tit { padding: 6px 0;}
	#award .award-tit:after { right: 20px; width: 10px; height: 10px;}
	#award .award-tit h2 { font-size: 20px;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 32px; height: 24px;}
}
#award .ctn { display: none;}
#award .ctn .inner { background: #fff;}



#about { position: relative; background: linear-gradient(#fcf9de, #fff4c7, #fcfbf5);}
#about .ttl-1 div { padding-top: 60px;}
#about .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 300px 0 20px; z-index: 2;}
#about .ctn { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; transition: 0.4s linear; opacity: 0;}
#about .ctn figure { position: relative; margin-bottom: 60px; text-align: center; z-index: 2;}
#about .ctn figure img { width: 88%; max-width: 660px;}
#about .ctn ul { width: 84%; max-width: 660px; margin: 0 auto; font-size: 0; text-align: center;}
#about .ctn ul li { display: inline-block; width: 50%; }
#about .ctn ul li dl { width: 92%; max-width: 320px; margin: 0 auto;}
#about .ctn ul li dl dt { margin-bottom: 20px;}
#about .ctn ul li dl dt img { width: 72%;}
#about .ctn ul li dl dd img { width: 50%; max-width: 160px;}
#about .note div { width: 88%; max-width: 1024px;}

#about .ctn .illust { position: absolute;}
#about .ctn .illust.hex { animation: 2s moving linear infinite;}
#about .ctn .illust:before { content: ''; display: block; width: 100%; padding-top: 100%;}
#about .ctn .illust.flower-1 { width: 80px; left: 15%; top: 42%; background: url('./img/illust/flower-1.png') no-repeat 50% 50% / 100% auto;}
#about .ctn .illust.flower-2 { width: 100px; left: 0; bottom: 15%; background: url('./img/illust/flower-2.png') no-repeat 50% 50% / 100% auto;}
#about .ctn .illust.flower-3 { width: 100px; right: 0; bottom: 5%; background: url('./img/illust/flower-3.png') no-repeat 50% 50% / 100% auto;}
#about .ctn .illust.hex-1 { width: 50px; right: 15%; top: 40%; background: url('./img/illust/hex-1.svg') no-repeat 50% 50% / 100% auto; animation-delay: 0.5s;}
#about .ctn .illust.hex-2 { width: 60px; left: 8%; bottom: 5%; background: url('./img/illust/hex-2.svg') no-repeat 50% 50% / 100% auto;}
#about .ctn .illust.hex-3 { width: 40px; right: 10%; bottom: 30%; background: url('./img/illust/hex-3.svg') no-repeat 50% 50% / 100% auto;}
#about .ctn.show { opacity: 1;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#about .ttl-1 div { padding-top: 6vw;}
	#about .inner-sct { padding: 40vw 0 60px;}
	#about .ctn { padding-bottom: 10vw;}

	#about .ctn .illust.flower-1 { width: 60px; left: 4%; top: 42%;}
	#about .ctn .illust.flower-2 { width: 80px; left: 2%; bottom: 3%;}
	#about .ctn .illust.flower-3 { width: 80px; right: 2%; bottom: 0%;}
	#about .ctn .illust.hex-1 { width: 40px; right: 8%; top: 40%;}
	#about .ctn .illust.hex-2 { width: 50px; left: 2%; bottom: 18%;}
	#about .ctn .illust.hex-3 { width: 30px; right: 4%; bottom: 30%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#about .inner-sct { padding: 40vw 0 20px;}
	#about .ctn figure { margin-bottom: 30px;}
	#about .ctn .illust.flower-1 { width: 40px;}
	#about .ctn .illust.flower-2 { width: 50px;}
	#about .ctn .illust.flower-3 { width: 50px;}
	#about .ctn .illust.hex-1 { width: 32px;}
	#about .ctn .illust.hex-2 { width: 36px;}
	#about .ctn .illust.hex-3 { width: 20px;}
}



#point { position: relative; background: linear-gradient(#fcf9de, #fff4c7 80%, #fcfbf5);}
#point .ttl-1 {}
#point .ttl-1 div { padding-top: 60px;}
#point .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 300px 0 60px;}
#point .bloc { position: relative; padding: 50px 0; transition: 0.4s linear; opacity: 0;}
#point .bloc .ctn { position: relative; width: 100%; max-width: 1080px; margin: 0 auto;}
#point .bloc .tit { position: absolute; top: 0; left: 0; width: 72%;}
#point .bloc .fig { margin: 0 0 0 auto;}
#point .bloc#point-1 .fig { width: 54%; max-width: 600px; padding-top: 60px;}
#point .bloc#point-2 .fig { width: 52%; max-width: 550px; padding-top: 180px; padding-right: 50px;}
#point .bloc#point-3 .fig { width: 58%; max-width: 680px; padding-top: 60px;}
#point .bloc#point-4 .fig { width: 55%; max-width: 600px; padding-top: 120px; padding-right: 50px;}
#point .bloc#point-5 .fig { width: 54%; max-width: 550px; padding-top: 180px; padding-right: 50px;}
#point .bloc#point-5 .fig figure img { border-radius: 10px;}

#point .bloc .tit h3 img { width: 100%; max-width: 600px;}
#point .bloc .fig picture { position: relative; display: block; width: 100%;}
#point .bloc .fig picture img { width: 100%;}
#point .bloc .fig figure { position: relative; text-align: center;}
#point .bloc .fig figure img { width: 100%;}
#point .bloc .fig p { display: none; text-align: center;}
#point .bloc .fig p img { width: 88%;}

#point .note div { width: 88%; max-width: 1024px; margin: 0 auto;}
#point .note div.pt { padding-top: 40px;}
#point .note ul li { color: #9b9b9b;}

#point .bloc.show { opacity: 1;}
@media (max-width: 1001px) {
	#point .bloc#point-2 .fig { width: 46%;}
	#point .bloc#point-4 .fig { padding-right: 32px;}
	#point .bloc#point-5 .fig { width: 46%; padding-right: 32px;}
}
@media (max-width: 801px) {
	#point .ttl-1 div { padding-top: 6vw;}
	#point .inner-sct { padding: 42vw 0 60px;}
	#point .bloc .tit { position: relative; top: auto; left: auto; width: 98%; max-width: 98%; margin: 0 auto;}
	#point .bloc .tit h3 img { width: 100%; max-width: 100%;}
	#point .bloc#point-1 .tit { display: none; }
	#point .bloc#point-1 .fig { width: 100%; max-width: 100%; padding-top: 0px;}
	#point .bloc#point-2 .fig { width: 88%; max-width: 550px; margin: 0 auto; padding: 20px 0;}
	#point .bloc#point-3 .tit { display: none; }
	#point .bloc#point-3 .fig { width: 100%; max-width: 100%; padding-top: 0px;}
	#point .bloc#point-4 .fig { width: 92%; max-width: 600px; margin: 0 auto; padding-top: 20px; padding-right: 0px;}
	#point .bloc#point-5 .fig { width: 88%; max-width: 600px; padding-top: 20px; padding-right: 0px; margin: 0 auto;}
	#point .bloc#point-5 .fig figure { margin-bottom: 30px;}
	#point .bloc .fig p { display: block;}
	#point .note div.pt { padding-top: 20px;}
	#point .note ul li br.pc { display: none;}
}
@media (max-width: 481px) {
	#point .inner-sct { padding: 36vw 0 60px;}
	#point .bloc { padding: 20px 0;}
	#point .bloc#point-5 .fig figure { margin-bottom: 12px;}
	#point .note div.pt { padding-top: 12px;}
}


#point .ctn .illust { position: absolute; z-index: 1;}
#point .ctn .illust:before { content: ''; display: block; width: 100%; padding-top: 100%;}
#point .ctn .illust.hex { animation: 2s moving linear infinite;}
#point .ctn .illust.hex-1 { background: url('./img/illust/hex-1.svg') no-repeat 50% 50% / 100%;}
#point .ctn .illust.hex-2 { background: url('./img/illust/hex-2.svg') no-repeat 50% 50% / 100%;}
#point .ctn .illust.hex-3 { background: url('./img/illust/hex-3.svg') no-repeat 50% 50% / 100%;}
#point .ctn .illust.hex-4 { background: url('./img/illust/hex-4.svg') no-repeat 50% 50% / 100%;}


#point #point-1 .ctn .illust.illust-1 { width: 90px; left: 40%; top: 0%; background: url('./img/illust/2.png') no-repeat 50% 50% / 100% auto;}
#point #point-1 .ctn .illust.illust-1:before { padding-top: 150%;}
#point #point-1 .ctn .illust.hex-1 { width: 70px; left: 60%; top: 0%; animation-delay: 0.3s;}
#point #point-1 .ctn .illust.hex-2 { width: 50px; left: 25%; top: 8%; animation-delay: 0.7s;}
#point #point-1 .ctn .illust.hex-3 { width: 40px; left: 30%; bottom: 5%;}
#point #point-1 .ctn .illust.hex-4 { width: 70px; left: 15%; bottom: 20%; animation-delay: 0.5s;}

#point #point-2 .ctn .illust.illust-2 { width: 45%; max-width: 460px; left: 20%; top: 0%; background: url('./img/illust/3.png') no-repeat 50% 50% / 100% auto;}
#point #point-2 .ctn .illust.illust-2:before { padding-top: 36%;}
#point #point-2 .ctn .illust.hex-1 { width: 70px; left: 30%; bottom: 30%;}
#point #point-2 .ctn .illust.hex-2 { width: 40px; right: 25%; top: 8%; animation-delay: 0.3s;}
#point #point-2 .ctn .illust.hex-3 { width: 60px; right: 12%; top: 0%;}
#point #point-2 .ctn .illust.hex-4 { width: 50px; left: 12%; bottom: 20%; animation-delay: 0.6s;}

#point #point-3 .ctn .illust.illust-3 { width: 25%; max-width: 220px; left: 25%; top: 8%; background: url('./img/illust/4.png') no-repeat 50% 50% / 100% auto;}
#point #point-3 .ctn .illust.illust-3:before { padding-top: 48%;}
#point #point-3 .ctn .illust.hex-1 { width: 60px; left: 55%; top: -40px;}
#point #point-3 .ctn .illust.hex-2 { width: 60px; left: 25%; bottom: 12%; animation-delay: 0.3s;}
#point #point-3 .ctn .illust.hex-3 { width: 40px; left: 0%; bottom: 5%;}
#point #point-3 .ctn .illust.hex-4 { width: 80px; right: 20%; top: 12%; animation-delay: 0.7s;}

#point #point-4 .ctn .illust.illust-4 { width: 45%; max-width: 380px; left: 22%; top: 0%; background: url('./img/illust/5.png') no-repeat 50% 50% / 100% auto;}
#point #point-4 .ctn .illust.illust-4:before { padding-top: 32%;}
#point #point-4 .ctn .illust.hex-1 { width: 60px; right: 5%; top: -40px;}
#point #point-4 .ctn .illust.hex-2 { width: 40px; left: 5%; bottom: 12%; animation-delay: 0.3s;}
#point #point-4 .ctn .illust.hex-3 { width: 50px; left: 12%; bottom: 35%;}
#point #point-4 .ctn .illust.hex-4 { width: 70px; left: 32%; bottom: 20%; animation-delay: 0.7s;}

#point #point-5 .ctn .illust.hex-1 { width: 50px; left: 25%; top: 5%;}
#point #point-5 .ctn .illust.hex-2 { width: 40px; right: 5%; top: -20px; animation-delay: 0.3s;}
#point #point-5 .ctn .illust.hex-3 { width: 50px; left: 5%; bottom: 0%;}
#point #point-5 .ctn .illust.hex-4 { width: 70px; left: 52%; top: 10%; animation-delay: 0.7s;}

#point .bloc.show { opacity: 1;}
@media (max-width: 801px) {
	#point #point-1 .ctn .illust.illust-1 { width: 100px; left: 58%; top: 4%;}
	#point #point-1 .ctn .illust.hex-1 { width: 70px; left: 42%; top: 9%;}
	#point #point-1 .ctn .illust.hex-2 { width: 50px; left: auto; right:  15%; top: 4%;}
	#point #point-1 .ctn .illust.hex-3 { width: 50px; left: auto; right: 3%; bottom: 30%;}
	#point #point-1 .ctn .illust.hex-4 { display: none;}

	#point #point-2 .ctn .illust.illust-2 { width: 50%; max-width: 460px; left: auto; right: 5%; top: -20px; background: url('./img/illust/3@sp.png') no-repeat 50% 50% / 100% auto;}
	#point #point-2 .ctn .illust.illust-2:before { padding-top: 60%;}
	#point #point-2 .ctn .illust.hex-1 { display: none;}
	#point #point-2 .ctn .illust.hex-2 { display: none;}
	#point #point-2 .ctn .illust.hex-3 { display: none;}
	#point #point-2 .ctn .illust.hex-4 { display: none;}

	#point #point-3 .ctn .illust.illust-3 { width: 40%; max-width: 300px; left: 40%; top: 0%;}
	#point #point-3 .ctn .illust.hex-1 { width: 60px; left: 80%; top: -80px;}
	#point #point-3 .ctn .illust.hex-2 { width: 60px; left: 55%; bottom: 2%;}
	#point #point-3 .ctn .illust.hex-3 { width: 30px; left: 4%; bottom: 2%;}
	#point #point-3 .ctn .illust.hex-4 { display: none;}

	#point #point-4 .ctn .illust.illust-4 { width: 45%; max-width: 380px; left: auto; right: 5%; top: 0%; background: url('./img/illust/5@sp.png') no-repeat 50% 50% / 100% auto;}
	#point #point-4 .ctn .illust.illust-4:before { padding-top: 48%;}
	#point #point-4 .ctn .illust.hex-1 { top: 40%;}
	#point #point-4 .ctn .illust.hex-2 { display: none;}
	#point #point-4 .ctn .illust.hex-3 { display: none;}
	#point #point-4 .ctn .illust.hex-4 { left: 5%; bottom: 25%;}

	#point #point-5 .ctn .illust.hex-1 { width: 50px; left: auto; right: 5%; top: 5%;}
	#point #point-5 .ctn .illust.hex-2 { width: 50px; right: auto; left: 12%; top: auto; bottom: 0px;}
	#point #point-5 .ctn .illust.hex-3 { width: 40px; left: 5%; bottom: 8%;}
	#point #point-5 .ctn .illust.hex-4 { left: auto; right: 20%; top: 10%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#point #point-1 .ctn .illust.illust-1 { width: 65px; left: 58%; top: 4%;}
	#point #point-1 .ctn .illust.hex-1 { width: 40px;}
	#point #point-1 .ctn .illust.hex-2 { width: 30px;}
	#point #point-1 .ctn .illust.hex-3 { width: 30px;}

	#point #point-3 .ctn .illust.hex-1 { width: 40px; top: -50px;}
	#point #point-3 .ctn .illust.hex-2 { width: 40px;}
	#point #point-3 .ctn .illust.hex-3 { width: 24px;}

	#point #point-4 .ctn .illust.hex-1 { width: 40px; top: 36%;}
	#point #point-4 .ctn .illust.hex-4 { width: 40px;}

	#point #point-5 .ctn .illust.hex-1 { width: 32px;}
	#point #point-5 .ctn .illust.hex-2 { width: 32px; bottom: -10px;}
	#point #point-5 .ctn .illust.hex-3 { width: 25px; bottom: 4%;}
	#point #point-5 .ctn .illust.hex-4 { width: 40px;}
}


@keyframes shakes {
    0% { transform: translate(0px,0px) rotate(0deg);}
 12.5% { transform: translate(0px,1px) rotate(3deg);}
 25.0% { transform: translate(1px,0px) rotate(0deg);}
 37.5% { transform: translate(1px,-1px) rotate(-3deg);}
 50.0% { transform: translate(0px,0px) rotate(0deg);}
 62.5% { transform: translate(-1px,0px) rotate(2deg);}
 75.0% { transform: translate(0px,-1px) rotate(0deg);}
 87.5% { transform: translate(-1px,0px) rotate(-2deg);}
  100% { transform: translate(0px,0px) rotate(0deg);}
}


#product { position: relative;}
#product .pos { top: 60px;}
#product .ttl-2 div { padding-top: 100px;}
#product .ttl-2 .illust { position: absolute; padding: 0;}
#product .ttl-2 .illust:before { content: ''; display: block; width: 100%;}
#product .ttl-2 .illust.illust-1 { width: 15%; max-width: 140px; left: auto; right: 10%; top: 50px; background: url('./img/illust/6.png') no-repeat 50% 50% / 100% auto;}
#product .ttl-2 .illust.illust-1:before { padding-top: 130%;}
#product .ttl-2 .illust.illust-2 { width: 28%; max-width: 250px; left: 5%; top: 120px; background: url('./img/illust/7.png') no-repeat 50% 50% / 100% auto;}
#product .ttl-2 .illust.illust-2:before { padding-top: 64%;}

#product .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto;}

#product .bloc { position: relative;}
#product .bloc#deep { background: linear-gradient(#fcf9de, #fff4c7 80%, #fcfbf5);}
#product .bloc#melty{ background: linear-gradient(#faf1f3, #f6dee9);}
#product .ctn { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; padding: 400px 0 60px; transition: 0.4s linear; opacity: 0;}
#product .ctn .tit { margin-bottom: 60px;}
#product .ctn .tit h3 { text-align: center;}
#product .ctn .tit h3 img { width: 40%; max-width: 220px;}
#product .ctn .flex { display: flex; align-items: center; width: 100%; margin-bottom: 50px;}
#product .ctn .txt { width: 50%; transition: 0.4s linear; opacity: 1;}
#product .ctn .fig { width: 50%; transition: 0.4s linear; opacity: 1;}

#product .ctn .txt .img { position: relative; width: 95%; max-width: 420px; margin: 0 auto 20px;}
#product .ctn .txt .img figure { position: relative; text-align: center; z-index: 1;}
#product .ctn .txt .img figure img { position: relative; z-index: 1; width: 80%; max-width: 200px;}
#product .ctn .txt .img .icn { position: absolute; z-index: 2; animation: 2s moving linear infinite;}
#product .ctn .txt .img .icn.icn-1 { width: 140px; top: 15%; right: 75%; animation-delay: 0.0s}
#product .ctn .txt .img .icn.icn-2 { width: 100px; top: 45%; left: 75%; animation-delay: 0.8s}
#product .ctn .txt .img .icn.icn-3 { width: 140px; bottom: 50px; right: 70%; animation-delay: 0.6s}
#product .ctn .txt .img .icn img { width: 100%;}

#product .bloc#deep .ctn h3 { color: #f2a001;}
#product .bloc#melty .ctn h3{ color: #e04776;}

#product .ctn .txt h3 { display: none; margin-bottom: 12px; text-align: center;}
#product .ctn .txt p { text-align: center;}
#product .ctn .txt p.name { font-size: clamp(13px,1.6vw,18px); font-weight: 600;}
#product .ctn .txt p.price{ margin-bottom: 20px; font-size: clamp(13px,1.8vw,18px);}
#product .ctn .txt .cart { width: 80%; max-width: 380px; margin: 0 auto;}
#product .ctn .txt .cart a { position: relative; display: block; width: 100%; padding: 12px 0; border-radius: 50px; border: none; z-index: 1;
 color: #6a3906; font-size: clamp(14px,1.8vw,16px); font-weight: 700; text-indent: 20px; text-align: center; text-decoration: none;}
#product .bloc#deep .ctn .txt .cart a { background: #ffd300;}
#product .bloc#melty .ctn .txt .cart a { background: #fbbbc6;}
#product .ctn .txt .cart a.yet { pointer-events: none; background: #ddd !important;}
#product .ctn .txt .cart a:before { content: ''; display: block; width: 20px; height: 20px;
 position: absolute; left: 50%; top: 50%; transform: translate(-80px, -50%);
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill="%236a3906"><path d="M41.3.5c-.9,0-1.7.6-1.9,1.5l-1.9,7.5H3.3c-.6,0-1.2.3-1.6.8-.4.5-.5,1.1-.3,1.7l5.6,19.5c.2.8,1,1.4,1.9,1.4h22.5l-.8,3.3H9.1v3.5h22.6c.9,0,1.7-.6,1.9-1.5L42.4,4h6.3V.5h-7.4ZM34,22.9l-1.7,6.6h-4.3v-6.6h6ZM36.5,12.9l-1.7,6.5h-6.9v-6.5h8.6ZM24.5,22.9v6.6h-7.4v-6.6h7.4ZM24.5,12.9v6.5h-7.4v-6.5h7.4ZM14.2,12.9v6.5h-7.1l-1.9-6.5h9ZM14.2,22.9v6.6h-4.2l-1.9-6.6h6.1Z"/><path d="M12.4,42.3c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5,3.5-1.6,3.5-3.5-1.6-3.5-3.5-3.5Z"/><path d="M29.2,42.5c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5,3.5-1.6,3.5-3.5-1.6-3.5-3.5-3.5Z"/></g></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;
}

#product .ctn .fig  h3 { margin-bottom: 50px; font-size: clamp(20px,3.0vw,26px); text-align: center;}
#product .ctn .fig  h3 span.bk { display: block;}
#product .ctn .fig  h3 span.ruby { position: relative; display: inline-block;}
#product .ctn .fig  h3 span.ruby span.rt { position: absolute; right: 0; bottom: -12px; font-size: 12px;}
#product .ctn .fig .fig-ctn { position: relative; width: 98%; max-width: 500px; margin: 0 auto;}
#product .ctn .fig .fig-ctn .base { position: relative; width: 100%;}
#product .ctn .fig .fig-ctn .base img { width: 100%;}
#product .ctn .fig .fig-ctn .icn { position: absolute; z-index: 2; animation: shakes 2.0s linear infinite;}
#product .ctn .fig .fig-ctn .icn.icn-1 { width: 150px; right: 18%; top: 25%; animation-delay: 0.3s;}
#product .ctn .fig .fig-ctn .icn.icn-2 { width: 120px; right: 2%; top: 48.5%; animation-delay: 0.6s;}
#product .ctn .fig .fig-ctn .icn.icn-3 { width: 120px; right: 17%; top: 68.0%; animation-delay: 0.9s;}
#product .ctn .fig .fig-ctn .icn img { width: 100%;}

#product .note {}
#product .note div { width: 100%;}
#product .note ul li { color: #9b9b9b;}

#product .ctn .illust { position: absolute; padding: 0;}
#product .ctn .illust:before { content: ''; display: block; width: 100%;}
#product .ctn .illust.illust-1 { width: 150px; right: -40px; top: 0%; background: url('./img/illust/8.png') no-repeat 50% 50% / 100% auto;}
#product .ctn .illust.illust-1:before { padding-top: 62%;}
#product .ctn .illust.illust-2 { width: 150px; right: 2%; bottom: 120px; background: url('./img/illust/9.png') no-repeat 50% 50% / 100% auto;}
#product .ctn .illust.illust-2:before { padding-top: 94%;}
#product .ctn .illust.illust-3 { width: 100px; right: 2%; bottom: 80px; background: url('./img/illust/10.png') no-repeat 50% 50% / 100% auto;}
#product .ctn .illust.illust-3:before { padding-top: 100%;}


#product .spacer { position: relative; width: 100%;}
#product .spacer:before,
#product .spacer:after { content: ''; display: block; position: absolute;}
#product .spacer:before{ width: 72%; max-width: 700px; height: 230px; left: 5%; top: 80px;
 background: url('./img/illust/11.png') no-repeat 50% 50% / 100% auto; z-index: 2;
}
#product .spacer:after { content: ''; display: block; width: 100%; position: absolute; left: 0; top: 0; z-index: 1;
 padding-top: 420px; background: url('./img/ttl/bg-2.png') no-repeat 50% 100% / auto 100%;
}

#product .ctn.show { opacity: 1;}
@media (max-width: 1024px) {
	#product .note div { width: 90%;}
	#product .ctn .illust.illust-2 { width: 100px; bottom: 170px;}
	#product .ctn .illust.illust-3 { width: 80px; bottom: 40px;}
}
@media (max-width: 801px) {
	#product .pos { top: 0px;}
	#product .ttl-2 div { padding-top: 6vw;}
	#product .ttl-2:after { padding-top: 60%;}
	#product .ttl-2 .illust.illust-1 { display: none;}
	#product .ttl-2 .illust.illust-2 { left: 4%; top: 34vw;}

	#product .inner-sct { padding-top: 40px;}
	#product .ctn { padding: 50vw 0 60px;}
	#product .ctn .tit { margin-bottom: 40px;}

	#product .ctn .flex { display: block; margin-bottom: 40px;}
	#product .ctn .txt { width: 100%; margin-bottom: 30px;}
	#product .ctn .fig { width: 100%;}
	
	#product .ctn .txt .img figure img { width: 32%; max-width: 200px;}
	#product .ctn .txt .img .icn.icn-1 { width: 100px; top: 10%; right: 64%;}
	#product .ctn .txt .img .icn.icn-2 { width: 80px; top: 45%; }
	#product .ctn .txt .img .icn.icn-3 { width: 100px; bottom: 30px; right: auto; left: 0px;}

	#product .ctn .txt h3 { display: block; font-size: clamp(18px,3.2vw,32px);}
	#product .ctn .txt h3 span.bk { display: block;}
	#product .ctn .txt h3 span.ruby { position: relative; display: inline-block;}
	#product .ctn .txt h3 span.ruby span.rt { position: absolute; right: 0; bottom: -10px; font-size: 10px;}
	#product .ctn .txt p.name { letter-spacing: -0.04rem;}

	#product .ctn .fig h3 { display: none;}
	#product .ctn .fig .fig-ctn { width: 90%;}
	
	#product .spacer:before{ height: 180px; top: 40px;}
	#product .spacer:after { padding-top: 40%;}

	#product .ctn .illust.illust-2 { width: 120px; right: 8%; bottom: 52%;}
	#product .ctn .illust.illust-2:before { padding-top: 94%;}
	#product .ctn .illust.illust-3 { right: 8%; bottom: 52%;}
	#product .ctn .illust.illust-3:before { padding-top: 100%;}

}
@media (max-width: 641px) {
	#product .spacer:before{ width: 80%; height: 30vw; top: 3vw;
	 background: url('./img/illust/11@sp.png') no-repeat 50% 50% / 100% auto;
	}
}
@media (max-width: 481px) {
	#product .pos { top: -20px;}

	#product .ttl-2 div { padding-top: 0vw;}
	#product .inner-sct { padding-top: 50px;}

	#product .ctn { padding: 42vw 0 40px;}
	#product .ctn .tit { margin-bottom: 20px;}
	#product .ctn .flex { display: block; margin-bottom: 20px;}
	#product .ctn .txt .img { margin-bottom: 40px;}
	#product .ctn .txt .img figure img { width: 32%; max-width: 200px;}
	#product .ctn .txt .img .icn.icn-1 { width: 100px;}
	#product .ctn .txt .img .icn.icn-2 { width: 80px; left: 70%;}
	#product .ctn .txt .img .icn.icn-3 { width: 100px; bottom: 0px;}
	#product .ctn .txt .cart a { padding: 8px 0;}
	#product .ctn .txt .cart a:before { width: 18px; transform: translate(-72px, -50%);}

	#product .ctn .fig .fig-ctn .icn.icn-1 { width: 100px;}
	#product .ctn .fig .fig-ctn .icn.icn-2 { width: 78px;}
	#product .ctn .fig .fig-ctn .icn.icn-3 { width: 78px;}

	#product .ctn .illust.illust-1 { width: 100px; right: 5%;}
	#product .ctn .illust.illust-2 { width: 80px; right: 4%; bottom: 58%;}
	#product .ctn .illust.illust-3 { width: 60px; right: 4%; bottom: 60%;}
}


#which { position: relative; z-index: 2;}
#which .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 100px 0 20px;
 background: linear-gradient(#f5f4f1,#fcfbf5);
}
#which .ctn { width: 92%; max-width: 900px; margin: 0 auto; transition: 0.4s linear; opacity: 0;}
#which .ctn h3 { margin-bottom: 60px; text-align: center;}
#which .ctn h3 img { width: 100%; max-width: 480px;}
#which .ctn ul { font-size: 0; text-align: center;}
#which .ctn ul li { display: inline-block; width: 50%; vertical-align: top;}
#which .ctn ul li dl {}
#which .ctn ul li dl dt { margin-bottom: 24px;}
#which .ctn ul li dl dt img { width: 82%; max-width: 350px;}
#which .ctn ul li dl dd a { display: block; width: 80%; max-width: 260px; margin: 0 auto; padding: 12px 20px;}
#which .ctn ul li:nth-child(1) dl dd a { background: #f8eb95;}
#which .ctn ul li:nth-child(2) dl dd a { background: #ffd2d7;}
#which .ctn ul li dl dd a img { width: 100%; max-width: 160px;}
#which .ctn ul li dl dd a:hover { opacity: 0.8;}
#which .ctn.show { opacity: 1;}
@media (max-width: 801px) {
	#which .inner-sct { padding: 60px 0 20px;}
}
@media (max-width: 641px) {
	#which .ctn h3 { margin-bottom: 20px;}
	#which .ctn ul li { display: block; width: 100%; padding: 32px 0;}
}
@media (max-width: 481px) {
	#which .inner-sct { padding: 40px 0 8px;}
	#which .ctn h3 { margin-bottom: 12px;}
	#which .ctn ul li { padding: 20px 0;}
	#which .ctn ul li dl dd a { width: 65%;}
}



#shop { position: relative;}
#shop .pos { top: 140px;}
#shop .ttl-2 div{ padding-top: 180px;}
#shop .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 380px 0 80px; background: linear-gradient(90deg,#fcf9de,#fef4c6);}

#shop .ctn { width: 90%; max-width: 1048px; margin: 0 auto;}
#shop h3 { margin-bottom: 20px; font-size: 24px; font-weight: 700; text-align: center;}
#shop p { margin-bottom: 50px; font-size: 16px; font-weight: 700; text-align: center;}
#shop ul.shoplist { width: 100%; font-size: 0; text-align: center;}
#shop ul.shoplist li { display: inline-block; width: 33.33334%; padding: 15px; vertical-align: top; font-size: clamp(14px,2.0vw,18px);}
#shop ul.shoplist li a { position: relative; display: block; width: 100%; padding: 3px; background: #fff; border-radius: 6px;
 color: #67524c; font-weight: 700; text-align: left; text-decoration: none;
}
#shop ul.shoplist li a span { position: relative; display: block; width: 100%; padding: 18px; padding-left: 60px;
 background: #fff; border: solid 1px #f89200; border-radius: 6px;
 color: #67524c; font-weight: 700; text-align: left; text-decoration: none;
}
#shop ul.shoplist li a span:before { content: ''; display: block; width: 24px; height: 100%;
 position: absolute; left: 20px; 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 50 52"><g fill="%23f89200"><path d="M47.61,19.24c-1.15-1.13-2.37-1.95-3.59-2.61-.18-.09-.35-.16-.53-.24.96-1.08,1.82-2.24,2.49-3.21.56-.82,1.7-3.05,2.02-4.06.2-.47.31-1.2.18-1.79-.14-.6-.46-1.07-1.03-1.14-.63-.08-1.06.28-1.42.83-.35.53-.37,1.29-.39,1.52-.1,1.23-.31,2.95-.72,4.08-.4,1.13-1.24,2.5-2.19,3.3-1.91-.77-3.8-1.01-5.44-.79-2.06.27-3.71,1.3-4.39,2.09-.63.72-.67,1.26-.46,1.76.11.27.42.41.74.34.49-.1.67-.27,1.04-.6.37-.33,1.5-1.9,3.22-2.12,1.09-.15,2.48.05,3.85.57-.16.12-.3.25-.47.37-2.07,1.47-4.72,2.78-7.63,4.06-2.4,1.05-5.01,2.07-7.79,3.07-1.14-.81-3.15-2.35-4.77-3.64-1.65-1.35-3.41-2.69-5.44-3.69-2.04-.99-4.12-1.58-6.76-1.46s-4.8,1.29-6.38,3.37c-1.58,2.08-2.31,4.95-1.28,7.6,1.18,3.03,3.67,4.43,5.05,4.93,1.6.58,3.9,1.05,7.64.34,3.17-.6,12.18-4.74,12.71-4.98,1.27.81,5.8,3.58,9.56,4.51,4.01.99,6.8.43,9.27-.56,2.81-1.13,5.26-3.7,5.29-6.68.02-2.1-1.09-3.86-2.39-5.14ZM17.9,27.09c-1.86.6-3.65,1.2-5.46,1.48-.88.14-4.31.06-5.12-.23-1.58-.53-2.93-1.54-3.58-2.85-.66-1.27-.55-3.12.3-4.64.84-1.52,2.42-2.55,4.32-2.79,1.87-.26,3.91.12,5.73.92,1.84.83,3.54,2.04,5.2,3.31,1.26,1.04,2.57,2.04,3.91,3.01-1.73.57-3.51,1.17-5.32,1.77ZM45.38,27.06c-1.04.67-3.02,1.76-6.38,1.83-3.39.07-7.54-.78-11.2-2.66,2.08-.98,4.07-1.98,5.91-2.98,2.86-1.57,8.18-5.28,8.48-5.55,1.5.63,5.36,3.47,5.27,6.4-.04,1.3-1.02,2.28-2.08,2.96ZM24.17,19.98c-.44-.32-3.39-3.34-5.11-6.02-1.72-2.68-2.23-5.46-2.1-6.68.1-.96.38-3.26,2.48-5.11,2.18-1.92,4.27-2.18,5.69-2.18s3.52.25,5.69,2.18c2.09,1.85,2.38,4.15,2.48,5.11.13,1.21-.38,4-2.1,6.68-1.72,2.68-4.67,5.7-5.11,6.02-.38.28-.71.46-.96.46s-.58-.18-.96-.46ZM25.13,19.15c.35,0,2.4-2.78,3.62-4.88,1.31-2.26,1.74-4.16,1.9-5.18.15-.99,0-2.89-1.37-4.17-1.38-1.29-3.11-1.67-4.14-1.67s-2.76.38-4.14,1.67c-1.38,1.28-1.52,3.19-1.37,4.17.16,1.03.59,2.92,1.9,5.18,1.21,2.1,3.27,4.88,3.62,4.88ZM18.85,42.22c.03-.17.07-.37.13-.59h12.29c.05.21.1.42.13.59.06.39.06.91-.05,1.48h-12.45c-.11-.56-.11-1.08-.05-1.48ZM29.53,37.5c.41.74.75,1.43,1.02,2.06h-10.85c.27-.63.6-1.32,1.02-2.06h8.81ZM25.13,31.65c.32,0,1.85,1.87,3.13,3.78h-6.27c1.29-1.91,2.81-3.78,3.13-3.78ZM25.13,48.36c-1.15,0-3.06-.41-4.6-1.78-.28-.25-.51-.53-.72-.81h10.64c-.2.28-.43.56-.72.81-1.54,1.38-3.46,1.78-4.6,1.78ZM23.06,49.84c.25.4.75,1.13,1.09,1.65.23.35.61.54.97.54s.74-.19.97-.54c.33-.51.84-1.24,1.09-1.65,1.3-.29,2.75-.83,3.76-1.71,2.1-1.84,2.41-4.04,2.38-5.16-.03-1.01-.71-3.69-2.43-6.37-1.72-2.68-4.38-5.75-4.82-6.07-.38-.28-.7-.46-.95-.46s-.57.18-.95.46c-.44.32-3.1,3.39-4.82,6.07-1.72,2.68-2.4,5.36-2.43,6.37-.04,1.12.27,3.32,2.38,5.16,1.01.88,2.46,1.42,3.75,1.71Z"/></g></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; 
}
#shop ul.shoplist li a:hover { opacity: 0.85;}
#shop .ctn.show { opacity: 1;}

#shop .check { width: 94%; max-width: 1024px; margin: 0 auto; transition: 0.4s linear; opacity: 0;}
#shop .check h4 { margin-bottom: 50px; font-size: clamp(18px,4.0vw,30px); text-align: center;}
#shop .check ul { font-size: 0; text-align: center;}
#shop .check ul li { display: inline-block; width: 20%;}
#shop .check ul li a { display: block; width: 92%; max-width: 160px; margin: 0 auto; text-decoration: none;}
#shop .check ul li dl dt { margin-bottom: 20px; text-align: center;}
#shop .check ul li dl dt img { width: 35%; max-width: 92px;}
#shop .check ul li dl dd { position: relative; font-weight: 700;}
#shop .check ul li dl dd:before,
#shop .check ul li dl dd:after { content: ''; display: block;}
#shop .check ul li dl dd:before{ width: 7px; height: 7px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; top: 50%; right: 12%; transform: translateY(-50%) rotate(45deg); z-index: 2;
}
#shop .check ul li dl dd:after { position: relative; z-index: 1; width: 100%; height: 48px;
 clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}
#shop .check ul li:nth-child(1) dl dd:after { background: #e5864b;}
#shop .check ul li:nth-child(2) dl dd:after { background: #e78c8f;}
#shop .check ul li:nth-child(3) dl dd:after { background: #e06b51;}
#shop .check ul li:nth-child(4) dl dd:after { background: #a0aab9;}
#shop .check ul li:nth-child(5) dl dd:after { background: #f7b852;}
#shop .check ul li dl dd span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3;
 display: block; width: 100%; color: #fff; font-size: 15px;
}
#shop .check ul li dl dd span.fs { font-size: 13px;}
#shop .check ul li a:hover { opacity: 0.8;}#shop .check.show{ opacity: 1;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#shop .pos { top: 40px;}
	#shop .inner-sct { padding: 48vw 0 60px;}
	#shop .ttl-2 div{ padding-top: 16vw;}
	#shop .ttl-2:after { padding-top: 52%;}
	#shop h3 span { display: block;}
	#shop ul.shoplist li { width: 50%; padding: 10px; font-size: 18px;}
	#shop ul.shoplist li a { }
	#shop ul.shoplist li a span{ padding: 15px; padding-left: 60px;}
	#shop ul.shoplist li a:before { width: 30px; left: 15px;}

	#shop .check h4 { margin-bottom: 20px;}
	#shop .check ul li { width: 33%; padding: 12px 0;}
}
@media (max-width: 641px) {
	#shop h3 { margin-bottom: 20px; font-size: 30px;}
	#shop p { margin-bottom: 30px; font-size: 18px;}
	#shop ul.shoplist li { padding: 6px; font-size: 15px;}

	#shop .check ul li { width: 50%; padding: 10px;}
	#shop .check ul li.blank{ display: inline-block;}
	#shop .check ul li dl dt { margin-bottom: 12px;}
}
@media (max-width: 481px) {
	#shop .pos { top: 20px;}
	#shop .ttl-2 div{ padding-top: 12vw;}

	#shop h3 { margin-bottom: 10px; font-size: 20px;}
	#shop p { margin-bottom: 20px; font-size: 13px;}
	#shop ul.shoplist li { padding: 5px; font-size: 12px;}
	#shop ul.shoplist li a { padding: 2px; border-radius: 6px;}
	#shop ul.shoplist li a span { padding: 6px 0; padding-left: 30px; border-radius: 4px;}
	#shop ul.shoplist li a span:before { width: 18px; left: 6px;}

	#shop .check h4 { margin-bottom: 8px;}
	#shop .check ul li dl dt { margin-bottom: 8px;}
	#shop .check ul li dl dd:before { width: 6px; height: 6px; right: 18px;}
	#shop .check ul li dl dd:after { height: 32px;}
	#shop .check ul li dl dd span { font-size: 12px;}
	#shop .check ul li dl dd span.fs { font-size: 10px;}
}



#lineup { background: #fbf9de;}
#lineup .ttl { width: 100%; height: 130px; padding-top: 30px; background: url('/img/index/bg-ttl.png') no-repeat 50% 0;}
#lineup .ttl h2 { font-size: clamp(24px,4.0vw,30px); letter-spacing: 0.2rem; text-align: center;}
#lineup .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 40px 0 80px;}
@media (max-width: 641px) {
	#lineup .ttl { height: 25vw; padding-top: 6.8vw; background: url('/img/index/bg-ttl-sp.png') no-repeat 50% 0 / 100% auto;}
}
@media (max-width: 481px) {
	#lineup .inner-sct { padding: 20px 0 60px;}
}