@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese');
/* initialize */
*,
::before,
::after { box-sizing: border-box;}

html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;}
body { margin: 0;}
main { display: block;}
p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0;}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0;}
ul, ol { margin: 0; padding: 0; list-style: none;}
dd { margin-left: 0;}
hr { box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit;}
pre { font-family: monospace, monospace; font-size: inherit;}
address { font-style: inherit;}
a { background-color: transparent; text-decoration: none; color: inherit;}
abbr[title] { text-decoration: underline dotted;}
code, kbd, samp { font-family: monospace, monospace; font-size: inherit;}
small { font-size: 80%;}
sub,
sup { line-height: 0; position: relative; vertical-align: baseline;}

svg, img, embed, object, iframe { vertical-align: bottom;}

/* Forms */
/* ============================================ */
button, input, optgroup, select, textarea { -webkit-appearance: none; appearance: none; background: transparent; padding: 0; margin: 0; border-radius: 0;
 color: inherit; font: inherit; text-align: inherit; text-transform: inherit; vertical-align: middle;
}
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer;}
button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default;}
:-moz-focusring { outline: auto;}
select:disabled { opacity: inherit;}
option { padding: 0;}
fieldset { margin: 0; padding: 0; min-width: 0;}
legend { padding: 0;}

progress { vertical-align: baseline;}
textarea { overflow: auto;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto;}
[type="search"] { outline-offset: -2px;}
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
[type="number"] { -moz-appearance: textfield;}
label[for] { cursor: pointer;}
details { display: block;}
summary { display: list-item;}
[contenteditable]:focus { outline: auto;}

table { border-color: inherit; border-collapse: collapse;}
td,
th { vertical-align: top; padding: 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; top: 50%; transform: translateY(-50%); border: none; z-index: 100;
 text-indent: -9999em; outline: none;
}
/*
.slick-prev { left: 0px;}
.slick-next { right: 0px;}
.slick-arrow:before{ position: absolute; content: ''; display: block; width: 0px; height: 0px; top: 50%; transform: translateY(-50%);}
.slick-prev:before { left: 30%; border: solid 9px transparent; border-right: solid 16px #fff; border-left: 0;}
.slick-next:before { right: 30%; border: solid 9px transparent; border-left: solid 16px #fff; border-right: 0;}
*/

/** 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; 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 { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0;
	width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black;
}
.slick-dots li.slick-active button:before { opacity: .75; color: black;}

body {
	font-family: "Noto Sans JP","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;
}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min {font-family: "Noto Serif JP","游明朝", "Yu Mincho", "YuMincho", serif;}

body.fixed { position: fixed;}
#wrapper{ background:url('./img/bg/ptn-1.jpg') repeat-y 50% 50% / 1280px auto;}



.ttl { width: 100%; height: 138px;}
.ttl h2 { text-indent: -9999em;}
@media screen and (max-width: 481px){
	.ttl { height: 92px;}
}

.note { width: 100%;}
.note ul { width: 100%;}
.note ul li { color: #727272; font-size: 10px; line-height: 1.4;}

/*
#kv { position: relative; width: 100%; filter: blur(20px); opacity: 0; transition:opacity .6s ease-out, filter .6s ease 0.8s;}
#kv .inner-kv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3;}
#kv .ctn { position: relative; width: 100%; max-width: 1280px; height: 100%; margin: 0 auto;}
#kv .ctn .inner { position: relative; width: 55%; padding-top: 200px;}
#kv .ctn .inner:before { content: ''; display: block; width: 100px; height: 145px;
 background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 21%; top: 72px;
}
#kv .ctn .logo { width: 50%; max-width: 380px; margin: 0 auto 30px; text-align: center;}
#kv .ctn .logo img { width: 100%;}
#kv .ctn .news { width: 86%; max-width: 400px; margin: 0 auto;}
#kv .ctn .news div { position: relative; padding: 24px 0; padding-left: 110px;
 background: linear-gradient(30deg,#f7e4c0,#e6c891); border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,.1);
}
#kv .ctn .news div:before { content: ''; display: block; width: 80px; height: 100%; background: url('./img/icn-play.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 20px; top: 0;
}
#kv .ctn .news div p { font-size: 16px;}
#kv .ctn .news div p sub { font-size: 10px; vertical-align: baseline;}
#kv .ctn .note-sp { display: none;}
#kv .note { position: absolute; bottom: 24px; width: 100%; z-index: 2;}
#kv .note div { width: 94%; max-width: 1200px; margin: 0 auto;}
#kv .note ul { max-width: 540px; margin: 0 0 0 auto;}
#kv .note ul li { color: #646464 }
#kv .kv-bg { position: relative; width: 100%; z-index: 1; text-align: center;}
#kv .kv-bg img { width: 100%; max-width: 1280px;}
#kv .kv-bg img.sp { display: none;}
#kv .news-sp { display: none;}
#kv.show { filter: blur(0px); opacity: 1;}
@media screen and (max-width: 1201px){
	#kv .ctn .inner { padding-top: 18vw;}
	#kv .ctn .inner:before { top: 6vw; left: 18%;}
}
@media screen and (max-width: 1001px){
	#kv .ctn .inner { padding-top: 15vw;}
	#kv .ctn .inner:before { top: 4vw;}
	#kv .ctn .logo { margin: 0 auto 3vw;}
	#kv .ctn .news div { padding: 18px 0; padding-left: 80px;}
	#kv .ctn .news div:before { width: 56px; left: 12px;}
	#kv .ctn .news div p { font-size: 14px;}
}
@media screen and (max-width: 801px){
	#kv .ctn .inner:before { width: 80px; height: 118px;}
	#kv .ctn .news div { padding: 12px 0; padding-left: 60px;}
	#kv .ctn .news div:before { width: 48px; left: 8px;}
	#kv .ctn .news div p { font-size: 11px;}
	#kv .note { bottom: 12px;}
}
@media screen and (max-width: 641px){
	#kv .inner-kv { height: 100%;}
	#kv .ctn .inner { width: 100%; margin: 0 auto; padding-top: 6vw;}
	#kv .ctn .inner:before { top: 22vw; left: 5%;}
	#kv .ctn .logo { width: 40%;}
	#kv .ctn .news { display: none;}
	#kv .ctn .note-sp { display: block; position: absolute; left: 0; bottom: 120px; width: 100%;}
	#kv .ctn .note-sp ul { width: 100%; padding: 12px;}
	#kv .ctn .note-sp ul li { color: #727272; font-size: 10px; line-height: 1.4;}
	
	#kv .kv-bg img.pc { display: none;}
	#kv .kv-bg img.sp { display: block;}

	#kv .news-sp { display: block;}
	#kv .news-sp .inner { background: linear-gradient(30deg,#f7e4c0,#e6c891);}
	#kv .news-sp .ctn { position: relative; width: 92%; max-width: 360px; padding: 24px 0 30px; padding-left: 110px;}
	#kv .news-sp .ctn:before { content: ''; display: block; width: 80px; height: 100%; position: absolute; left: 20px; top: 0;
	 background: url('./img/icn-play.png') no-repeat 50% 50% / 100% auto;
	}
	#kv .note { display: none;}
	#kv .news-sp .note-sp { position: absolute; left: 0; bottom: 0; width: 100%;}
	#kv .news-sp .note-sp ul { width: 100%; padding: 6px 12px; text-align: right;}
	#kv .news-sp .note-sp ul li { color: #727272; font-size: 10px;}
}
@media screen and (max-width: 481px){
	#kv .ctn .inner { padding-top: 5vw;}
	#kv .ctn .inner:before { width: 60px; height: 88px;}
	#kv .ctn .note-sp { bottom: 90px;}
	#kv .news-sp .ctn { padding: 18px 0 24px; padding-left: 90px;}
	#kv .news-sp .ctn:before { width: 60px; left: 18px;}
	#kv .news-sp .ctn p { font-size: 15px;}
}
*/

#bnr { position: relative; filter: blur(20px); opacity: 0; transition:opacity .6s ease-out, filter .6s ease 0.8s;}
#bnr .inner { width: 100%; max-width: 1280px; margin: 0 auto;}
#bnr p { text-align: center;}
#bnr p img { width: 100%;}
#bnr p img.sp { display: none;}
#bnr.show { filter: blur(0px); opacity: 1;}
@media screen and (max-width: 801px){
	#bnr p img.pc { display: none;}
	#bnr p img.sp { display: block;}
}

#kv-mh { position: relative; width: 100%; filter: blur(20px); opacity: 0; transition:opacity .6s ease-out, filter .6s ease 0.8s;}
#kv-mh .inner-kv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3;}
#kv-mh .ctn { position: relative; width: 100%; max-width: 1280px; height: 100%; margin: 0 auto;}
#kv-mh .ctn .inner { position: relative; width: 43%; margin: 0 0 0 auto; padding-top: 108px;}
#kv-mh .ctn .logo { width: 52%; max-width: 280px; margin: 0 auto 40px; text-align: center;}
#kv-mh .ctn .logo img { width: 100%;}
#kv-mh .ctn h1 { margin-bottom: 40px; text-align: center;}
#kv-mh .ctn h1 img { width: 72%; max-width: 420px;}
#kv-mh .ctn .news { width: 86%; max-width: 400px; margin: 0 auto;}
#kv-mh .ctn .news div { position: relative; padding: 24px 0; padding-left: 110px; background: linear-gradient(30deg,#ebe3e3,#fff,#ebe3e3); border-radius: 10px;}
#kv-mh .ctn .news div:before { content: ''; display: block; width: 80px; height: 100%; background: url('./img/icn-play.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 20px; top: 0;
}
#kv-mh .ctn .news div p { font-size: 16px;}
#kv-mh .ctn .news div p sub { font-size: 10px; vertical-align: baseline;}
#kv-mh .ctn .note-sp { display: none;}
#kv-mh .note { position: absolute; bottom: 24px; width: 100%; z-index: 2;}
#kv-mh .note div { width: 94%; max-width: 1200px; margin: 0 auto;}
#kv-mh .note ul { max-width: 280px; margin: 0 0 0 auto;}
#kv-mh .kv-bg { position: relative; width: 100%; z-index: 1; text-align: center;}
#kv-mh .kv-bg img { width: 100%; max-width: 1280px;}
#kv-mh .kv-bg img.sp { display: none;}
#kv-mh.show { filter: blur(0px); opacity: 1;}
@media screen and (max-width: 1201px){
	#kv-mh .ctn .inner { padding-top: 7vw;}
}
@media screen and (max-width: 1001px){
	#kv-mh .ctn .logo { margin: 0 auto 3vw;}
	#kv-mh .ctn h1 { margin-bottom: 3vw;}
	#kv-mh .ctn .news div { padding: 18px 0; padding-left: 80px;}
	#kv-mh .ctn .news div:before { width: 56px; left: 12px;}
	#kv-mh .ctn .news div p { font-size: 14px;}
}
@media screen and (max-width: 801px){
	#kv-mh .ctn .logo { width: 35%; margin: 0 auto 5vw;}
	#kv-mh .ctn .news div { padding: 12px 0; padding-left: 60px;}
	#kv-mh .ctn .news div:before { width: 48px; left: 8px;}
	#kv-mh .ctn .news div p { font-size: 11px;}
	#kv-mh .note { bottom: 12px;}
}
@media screen and (max-width: 641px){
	#kv-mh .inner-kv { position: relative; left: auto; top: auto; height: 100%;}
	#kv-mh .ctn .inner { width: 100%; margin: 0 auto; padding: 12vw 0; background: url('./img/kv/bg-202502-sp.jpg') no-repeat 50% 50% / cover;}

	#kv-mh .ctn h1 { margin-bottom: 0;}

	#kv-mh .ctn .news { display: none;}
	#kv-mh .ctn .note-sp { display: block; position: absolute; left: 0; bottom: 0; width: 100%;}
	#kv-mh .ctn .note-sp ul { width: 100%; padding: 12px; text-align: right;}
	#kv-mh .ctn .note-sp ul li { color: #727272; font-size: 10px; line-height: 1.4;}
	
	#kv-mh .kv-bg img.pc { display: none;}
	#kv-mh .kv-bg img.sp { display: block;}
	#kv-mh .note { display: none;}
}
@media screen and (max-width: 481px){
	#kv-mh .ctn .inner { padding: 10vw 0 14vw;}
}


.news-sp { display: none; position: relative; z-index: 10;}
@media screen and (max-width: 641px){
	.news-sp { display: block;}
	.news-sp .inner { background: linear-gradient(30deg,#ebe3e3,#fff,#ebe3e3);}
	.news-sp .ctn { position: relative; width: 92%; max-width: 360px; padding: 24px 0 30px; padding-left: 110px;}
	.news-sp .ctn:before { content: ''; display: block; width: 80px; height: 100%; position: absolute; left: 20px; top: 0;
	 background: url('./img/icn-play.png') no-repeat 50% 50% / 100% auto;
	}
	.news-sp .note-sp { position: absolute; left: 0; bottom: 0; width: 100%;}
	.news-sp .note-sp ul { width: 100%; padding: 6px 12px; text-align: right;}
	.news-sp .note-sp ul li { color: #727272; font-size: 10px;}
}
@media screen and (max-width: 481px){
	.news-sp .ctn { padding: 18px 0 24px; padding-left: 90px;}
	.news-sp .ctn:before { width: 60px; left: 18px;}
	.news-sp .ctn p { font-size: 15px;}
}



#release { position: relative; filter: blur(20px); opacity: 0; transition:opacity .6s ease-out, filter .6s ease 0.8s;}
#release .inner { width: 100%; max-width: 1280px; margin: 0 auto; background: url('./img/bg/ptn-2.jpg') no-repeat 50% 50% / cover;}
#release .tips { height: 210px; padding-top: 50px; background: url('./img/bg/tips-release.png') no-repeat 50% 100%;}
#release .tips h2 { color: #fff; font-size: 38px; font-weight: 700; letter-spacing: 0.2rem; line-height: 1; text-align: center;}
#release .ctn { position: relative; width: 94%; max-width: 860px; margin: 0 auto; padding: 20px 0px;}
#release .ctn:after { content: ''; display: block; width: 240px; height: 370px; background: url('./img/new-item_0319.png') no-repeat 50% 0% / 100% auto;
 position: absolute; right: 0; bottom: -10px;
}
#release .ctn h3 { margin-bottom: 20px; text-align: center;}
#release .ctn h3 img { width: 80%; max-width: 260px; }
#release .ctn p { color: #8b483b; font-size: 20px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.8; text-align: center;}
#release .ctn p sub { font-size: 14px; vertical-align: baseline;}
#release .note div { width: 94%; margin: 0 auto; padding: 10px;}
#release .note ul { text-align: right;}
#release.show { filter: blur(0px); opacity: 1;}
@media screen and (max-width:1001px){
	#release .ctn { max-width: 680px; padding: 40px 0; padding-right: 30%;}
}
@media screen and (max-width:641px){
	#release .ctn:after { width: 200px; height: 320px;}
	#release .ctn p { font-size: 18px;}
}
@media screen and (max-width:481px){
	#release .tips { height: 100px; padding-top: 20px; background: url('./img/bg/tips-release@sp.png') no-repeat 50% 100%/ 100% auto;}
	#release .tips h2 { font-size: 24px;}
	#release .ctn { padding: 20px 0px; padding-right: 35%;}
	#release .ctn:after { width: 150px; height: 240px; bottom: -16px;}
	#release .ctn p { font-size: 14px; letter-spacing: 0;}
	#release .ctn p span { display: block;}
	#release .ctn p br.pc { display: none;}
	#release .ctn p sub { font-size: 10px;}
	#release .note div { padding: 8px 0;}
}


#award-2025 { position: relative; z-index: 2;}
#award-2025 .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: #fff;
 opacity: 0; transition:opacity .6s ease-out;
}
#award-2025 .ctn { width: 100%; max-width: 1000px; margin: 0 auto;}
#award-2025 .ctn ul { padding: 0 20px;}
#award-2025 .ctn ul li { border-bottom: solid 1px #e1e1e1;}
#award-2025 .ctn ul li:last-child { border-bottom: none;}
#award-2025 .ctn ul li dl { position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding: 25px 0; text-align: center;}
#award-2025 .ctn ul li dl:before { content: ''; display: block; width: 80px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
#award-2025 .ctn ul li dl.arward2025_1:before { height: 100px; background: url('./img/awards-2025-1.png') no-repeat 50% 50% / 100% auto;}
#award-2025 .ctn ul li dl.arward2025_2:before { height: 120px; background: url('./img/awards-2025-2.png') no-repeat 50% 50% / auto 100%;}
#award-2025 .ctn ul li dl dt { margin-bottom: 6px; font-size: 25px; font-weight: 700; line-height: 1.25;
 background: linear-gradient(#977720 10%, #d9bb53 50%, #a57904 90%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
#award-2025 .ctn ul li dl dd.txt { color: #6a3906; font-size: 17px; font-weight: 700; line-height: 1.4;}
#award-2025 .ctn ul li dl dd.txt sub { vertical-align: baseline; font-size: 10px;}
#award-2025 .ctn ul li dl dd.txt span { display: inline-block; padding-left: 8px;}
#award-2025 .ctn ul li dl dd.note { margin-top: 8px; color: #6b6b6b; font-size: 10px; line-height: 1.4;}
#award-2025 .ctn ul li dl dd.img { width: 100px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
#award-2025 .ctn ul li dl dd.img img { width: 100%;}
#award-2025.show .inner-sct { opacity: 1;}
@media (max-width: 801px) {
	#award-2025 .ctn ul li dl dt { font-size: 3.0vw;}
	#award-2025 .ctn ul li dl dd.txt { font-size: 14px;}
}
@media (max-width: 641px) {
	#award-2025 .ctn ul li dl { padding: 30px 0 20px;}
	#award-2025 .ctn ul li dl:before { width: 60px;}
	#award-2025 .ctn ul li dl.arward2025_1:before { height: 80px;}
	#award-2025 .ctn ul li dl.arward2025_2:before { height: 100px;}
	#award-2025 .ctn ul li dl dd.txt span { display: block;}
	#award-2025 .ctn ul li dl dd.note { margin-top: 12px;}
	#award-2025 .ctn ul li dl dd.img { width: 80px; right: 0px;}
}
@media (max-width: 481px) {
	#award-2025 .ctn ul li dl { padding: 20px 0 15px;}
	#award-2025 .ctn ul li dl dt { font-size: 14px;}
	#award-2025 .ctn ul li dl dt br { display: block;}
	#award-2025 .ctn ul li dl:before { width: 40px; left: 0px;}
	#award-2025 .ctn ul li dl.arward2025_1:before { height: 60px;}
	#award-2025 .ctn ul li dl.arward2025_2:before { height: 80px; background-size: 100% auto;}
	#award-2025 .ctn ul li dl dd.txt { font-size: 10px;}
	#award-2025 .ctn ul li dl dd.img { width: 65px; right: -16px;}
	#award-2025 .ctn ul li dl dd.note br { display: none; }
}


#award { position: relative; z-index: 2;}
#award .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: #fff;}
#award .award-tit { position: relative; padding: 8px 0; background: #fca51c; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 4px #fff; border-right: solid 4px #fff;
 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: #fff; 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/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 {}
	#award .award-tit:after { bottom: 21px; width: 12px; height: 12px; 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;}
}


.award { }
.award ul { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px;}
.award ul li { border-bottom: solid 1px #e1e1e1;}
.award ul li:last-child { border-bottom: none;}
.award ul li dl { position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding: 25px 0; text-align: center;}
.award ul li dl:before { content: ''; display: block; width: 80px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.award ul li dl.arward2025_1:before { height: 120px; background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2025_2:before { height: 120px; background: url('/img/awards/badge-no2-2025.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2025_p:before { height: 100px; background: url('/img/awards/badge-2024-point.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2024_cl:before { height: 120px; background: url('/img/awards/badge-2024-cl.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2024_k:before { height: 100px; background: url('/img/awards/badge-2024-keana-3.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2024_body:before { height: 100px; background: url('/img/awards/badge-2024-body.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2024_useful:before { height: 100px; background: url('/img/awards/badge-2024-useful.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2025ldk_body:before { height: 100px; background: url('/img/awards/badge-2025ldk-body.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2025ldk_hair:before { height: 100px; background: url('/img/awards/badge-2025ldk-hairoil.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.nicola2024_1:before { height: 100px; background: url('/img/awards/nicola-2024-1.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.nicola2024_2:before { height: 100px; background: url('/img/awards/nicola-2024-2.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.nicola2024_3:before { height: 100px; background: url('/img/awards/nicola-2024-3.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl dt { margin-bottom: 6px; font-size: 25px; font-weight: 700; line-height: 1.25;
 background: linear-gradient(#977720 10%, #d9bb53 50%, #a57904 90%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.award ul li dl dt br.sp { display: none;}
.award ul li dl dd.txt { color: #6a3906; font-size: 17px; font-weight: 700; line-height: 1.4;}
.award ul li dl dd.txt sub { vertical-align: baseline; font-size: 10px;}
.award ul li dl dd.txt span { display: inline-block; padding-left: 8px;}
.award ul li dl dd.note { margin-top: 8px; color: #6b6b6b; font-size: 10px; line-height: 1.4;}
.award ul li dl dd.img { width: 100px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.award ul li dl dd.img img { width: 100%;}
@media (max-width: 801px) {
	.award ul li dl dt { font-size: 3.0vw;}
}
@media (max-width: 641px) {
	.award ul li dl { padding: 30px 0 20px;}
	.award ul li dl:before { width: 60px; top: 6px; transform: translateY(0%);}
	.award ul li dl.arward2023_1:before { height: 100px;}
	.award ul li dl.arward2023_2:before { height: 80px;}
	.award ul li dl.arward2023_3:before { height: 80px;}
	.award ul li dl.arward2023_4:before { height: 80px;}
	.award ul li dl.arward2024_1:before { height: 80px;}
	.award ul li dl.arward2024_2:before { height: 80px;}
	.award ul li dl dd.txt span { display: block;}
	.award ul li dl dd.note { margin-top: 12px;}
	.award ul li dl dd.img { width: 80px; right: 10px; top: 20px; transform: translateY(0%);}
}
@media (max-width: 481px) {
	.award ul { padding: 0 15px;}
	.award ul li dl { padding: 20px 0 15px;}
	.award ul li dl.arward2025_1:before { height: 72px;}
	.award ul li dl.arward2025_2:before { height: 72px;}
	.award ul li dl.arward2025_p:before { height: 65px;}
	.award ul li dl.arward2024_cl:before { height: 72px;}
	.award ul li dl.arward2024_k:before { height: 60px;}
	.award ul li dl.arward2024_body:before { height: 60px;}
	.award ul li dl.arward2024_useful:before { height: 60px;}
	.award ul li dl.arward2024ldk_body:before { height: 60px;}
	.award ul li dl.arward2024ldk_hair:before { height: 60px;}
	.award ul li dl.nicola2024_1:before { height: 60px;}
	.award ul li dl.nicola2024_2:before { height: 60px;}
	.award ul li dl.nicola2024_3:before { height: 60px;}

	.award ul li dl dt { font-size: 16px;}
	.award ul li dl dt br.sp { display: block;}
	.award ul li dl:before { width: 40px; left: 0px;}
	.award ul li dl.arward2023_1:before { height: 80px;}
	.award ul li dl.arward2023_2:before { height: 60px;}
	.award ul li dl.arward2023_3:before { height: 60px;}
	.award ul li dl.arward2023_4:before { height: 60px;}
	.award ul li dl.arward2024_1:before { height: 60px;}
	.award ul li dl.arward2024_2:before { height: 50px;}
	.award ul li dl dd.txt { font-size: 12px;}
	.award ul li dl dd.img { width: 50px; right: 0px; top: 20px;}
	.award ul li dl dd.note br { display: none; }
}



/* choice */
@keyframes zoomIn{
  0% { transform: scale(0);}
 70% { transform: scale(1.1);}
 80% { transform: scale(1);}
 90% { transform: scale(1.05);}
100% { transform: scale(1);}
}
#choice .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 50px 0;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#choice .ttl { background: url('./img/ttl-choice4.png') no-repeat 50% 50% / auto 100%;}
#choice .ctn { width: 100%;}
#choice .ctn figure { padding: 20px 0; text-align: center;}
#choice .ctn figure img { position: relative; width: 100%; max-width: 560px; margin: 0 auto; transition: 1.0s ease 0.4s; opacity: 0.6;}
#choice .ctn figure img.sp { display: none;}
#choice .ctn .slick-active figure img { opacity: 1; animation: zoomIn 1.0s ease;}
#choice .slick-arrow { width: 40px; height: 72px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 100;
 background-color: transparent;
 background-image: url('./img/arw.png'); background-repeat: no-repeat; background-size: auto 100%;
 border: none;
 text-indent: -9999em; outline: none;
}
#choice .slick-prev { left: 21%; background-position: 0 50%;}
#choice .slick-next { right: 21%; background-position: 100% 50%;}
#choice .note div { width: 94%; max-width: 1000px; margin: 0 auto; padding: 10px;}
#choice .note ul { text-align: right;}
#choice.show .inner-sct { opacity: 1; transform: translateY(0px);}
@media screen and (max-width: 1001px){
	#choice .slick-prev { left: 14%;}
	#choice .slick-next { right: 14%;}
}
@media screen and (max-width:801px){
	#choice .ctn figure img.pc { display: none;}
	#choice .ctn figure img.sp { display: block; width: 100%; margin: 0 auto;}
}
@media screen and (max-width:641px){
}
@media screen and (max-width:481px){
	#choice .inner-sct { padding: 30px 0;}
	#choice .slick-arrow { width: 22px; height: 40px; top: 35%;}
	#choice .slick-prev { left: 12%;}
	#choice .slick-next { right: 12%;}
}



/* how to */
#howto { position: relative;}
#howto .inner-sct { position: relative; width: 100%; max-width: 1280px; margin:0 auto; padding: 40px 0 0px;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#howto .ttl { background: url('./img/ttl-howto.png') no-repeat 50% 50% / auto 100%;}
#howto .ctn { width: 94%; max-width: 1080px; margin: 0 auto; padding: 30px 0;}
#howto .ctn ul.case { display:flex; justify-content:space-between; width: 100%; margin-bottom: 20px;}
#howto .ctn ul.case li { position: relative; width: 33%;}
#howto .ctn ul.case li dl { position: relative; display:block; width: 94%; margin: 0 auto;}
#howto .ctn ul.case li dt {}
#howto .ctn ul.case li dt img { width: 100%;}
#howto .ctn ul.case li dt img.sp { display: none;}
#howto .ctn ul.case li dd { width: 100%; text-align: center;}
#howto .ctn ul.case li dd a { position: relative; display: block; width: 92%; max-width: 300px; margin: 0 auto;
 background: #ee6b5d; border-radius: 10px; padding: 3px;
 color: #fff; font-size: 14px; font-weight: 700;
}
#howto .ctn ul.case li dd a:before { content: ''; display: block; width: 24px; height: 100%; position: absolute; left: 28%; top: 0;
 background: url('./img/icn-play-2.png') no-repeat 50% 50% / 100% auto;
}
#howto .ctn ul.case li dd a span { position: relative; display: block; width: 100%; padding: 8px 0; padding-left: 30px; border: solid 1px #fff; border-radius: 8px;}
#howto .ctn ul.case li dd a span:after { content: ''; display: block; width: 0; height: 0; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
 border: solid 4px transparent; border-left: solid 5px #fff; border-right: 0;
}
#howto .ctn ul.case li dd a:hover { opacity: 0.8;}
#howto .ctn .note { }
#howto .ctn .note ul { max-width: 240px; margin: 0 0 0 auto;}
#howto.show .inner-sct { opacity: 1; transform: translateY(0px);}
@media screen and (max-width:801px){
	#howto .ctn {}
	#howto .ctn ul.case { display: block;}
	#howto .ctn ul.case li { width: 100%; z-index: 1;}
	#howto .ctn ul.case li:nth-child(1) { margin-bottom: -10px; z-index: 3;}
	#howto .ctn ul.case li:nth-child(2) { margin-bottom: -30px; z-index: 2;}
	#howto .ctn ul.case li dt img.pc { display: none;}
	#howto .ctn ul.case li dt img.sp { display: block;}
	#howto .ctn ul.case li dd { position: absolute; bottom: 0;}
	#howto .ctn ul.case li dd a { width: 50%; max-width: 180px; margin: 0 0 0 20%; padding: 2px; border-radius: 14px; font-size: 16px;}
	#howto .ctn ul.case li:nth-child(2) dd a { margin: 0 0 0 auto;}
	#howto .ctn ul.case li dd a:before { left: 30px;}
	#howto .ctn ul.case li dd a span { padding: 10px 0; padding-left: 20px; border-radius: 12px;}
	#howto .ctn ul.case li dd a span:after { content: none;}
}
@media screen and (max-width:481px){
	#howto .inner-sct { padding: 20px 0;}
	#howto .ctn { padding: 12px 0;}
	#howto .ctn ul.case { margin: 0 auto 10px;}
	#howto .ctn ul.case li dl { width: 100%; padding-bottom: 10px;}
	#howto .ctn ul.case li dd a { width: 50%; max-width: 100px; border-radius: 10px; font-size: 11px;}
	#howto .ctn ul.case li dd a:before { left: 10px; width: 16px;}
	#howto .ctn ul.case li dd a span { padding: 5px 0; padding-left: 24px; border-radius: 8px; border-width: 0.6px;}

	#howto .ctn .note ul { max-width: 200px;}
}


/* style */
#style { position: relative;}
#style .inner-sct { position: relative; width: 100%; max-width: 1280px; margin:0 auto; padding: 40px 0px;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#style .ttl { background: url('./img/ttl-style.png') no-repeat 50% 50% / auto 100%;}
#style .ctn { width: 92%; max-width: 1048px; margin:0 auto; padding: 30px 0;}
#style .ctn ol { display: flex; justify-content:space-between; margin:0 auto; text-align: center;}
#style .ctn ol li { width: 33%;}
#style .ctn ol li img {  width: 94%; max-width: 330px; margin: 0 auto;}
#style .ctn ol li img.sp { display: none;}
#style .note div{ width: 94%; max-width: 1024px; margin: 0 auto;}
#style .note ul { width: 100%; max-width: 200px; margin: 0 0 0 auto;}
#style .ctn ul li { color: #727272; font-size: 11px; line-height: 1.2;}
#style.show .inner-sct { opacity: 1; transform: translateY(0px);}
@media screen and (max-width:801px){
	#style .ctn { padding: 20px 0;}
	#style .ctn ol { display: block; width: 100%;}
	#style .ctn ol li { width: 100%; padding: 10px 0;}
	#style .ctn ol li img.pc { display: none;}
	#style .ctn ol li img.sp { display: block; max-width: 580px;}
}
@media screen and (max-width:481px){
	#style .inner-sct { padding: 20px 0px;}
	#style .ctn { padding: 12px 0;}
	#style .ctn ol li { padding: 6px 0;}
}


/* mix introduction */
#mix { position: relative;}
#mix .inner-sct { position: relative; width: 100%; max-width: 1280px; margin:0 auto; padding: 40px 0px 60px;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#mix .ttl { background: url('./img/ttl-mix.png') no-repeat 50% 50% / auto 100%;}

#mix .ctn { position: relative; width: 92%; max-width: 920px; margin:0 auto -20px;}
#mix .inner { position: relative; width: 100%; padding-left: 350px;}
#mix .inner:before { content: ''; display: block; width: 350px; height: 320px; position: absolute; left: 0; bottom: 0;
 background: url('./img/img-mix.png') no-repeat 50% 50% / auto 100%;
}
#mix .txt { width: 100%; padding: 60px 0 40px;}
#mix .txt h3 { margin: 0 0 10px; text-indent: -10px;}
#mix .txt h3 img { width: 92%; max-width: 530px; height: auto;}
#mix .txt h3 img.sp { display: none;}
#mix .txt p { font-weight: 700; line-height: 2;}
#mix .txt p sub { font-size: 10px; vertical-align: baseline;}
#mix .note div { width: 92%; max-width: 1024px; margin: 0 auto; padding: 0 0 30px;}
#mix .note ul { max-width: 220px; margin: 0 0 0 auto;}
#mix .step { width: 92%; max-width: 1024px; margin: 0 auto;}
#mix .step figure { width: 100%; margin: 0 auto 15px; background:rgba(255,255,255,.6); border-radius:10px; list-style:none;}
#mix .step figure img { width: 100%;}
#mix .step figure img.sp { display: none;}
#mix .step p { color: #727272; font-size: 10px; line-height: 1.2; text-align: right;}
#mix.show .inner-sct { opacity: 1; transform: translateY(0px);}
@media screen and (max-width:801px){
	#mix .ctn { margin:0 auto -12px;}
	#mix .inner { padding-left: 280px;}
	#mix .inner:before { width: 300px; height: 280px;}
	#mix .txt { padding: 60px 0 30px;}
	#mix .step figure img.pc { display: none;}
	#mix .step figure img.sp { display: block;}
	#mix .txt p { font-size: 14px;}
}
@media screen and (max-width:641px){
	#mix .ctn { margin:0 auto -12px;}
	#mix .inner { padding-left: 250px;}
	#mix .inner:before { width: 260px; height: 320px;}
	#mix .txt h3 img.pc { display: none;}
	#mix .txt h3 img.sp { display: block;}
}
@media screen and (max-width:481px){
	#mix .ctn { margin:0 auto;}
	#mix .inner { padding-left: 130px;}
	#mix .inner:before { width: 42%; height: 180px; bottom: -20px;}
	#mix .txt { padding: 30px 0 8px;}
	#mix .txt h3 { margin: 0 0 8px;}
	#mix .txt p { padding-left: 6px; font-size: 10px; line-height: 1.5;}
	#mix .note div { padding: 0 0 20px;}
	#mix .note ul { max-width: 210px;}
	#mix .step figure { margin: 0 auto 8px;}
}


/* type comparison */
#type { position: relative;}
#type .inner-sct { position: relative; width: 100%; max-width: 1280px; margin:0 auto; padding: 40px 0px;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#type .ttl { background: url('./img/ttl-lineup.png') no-repeat 50% 50% / auto 100%;}

#type .ctn { padding: 25px 0 100px;}
#type .ctn p { margin-bottom: 20px; color: #4d3823; font-size: 20px; font-weight: 700; letter-spacing: 0.08rem; text-align: center;}
#type .ctn p br { display: none;}

#type .ctn .slide .inner { position: relative; width: 100%; max-width: 700px; margin: 0 auto; padding: 0 50px;}
#type .ctn .icn { width: 172px; position: absolute; left: -120px; top: 0; opacity: 0; transition: 0.1s linear 0.4s;}
#type .ctn .icn img { width: 100%;}
#type .ctn figure { text-align: center;}
#type .ctn figure img { width: 100%; margin: 0 auto;}
#type .ctn figure img.sp { display: none;}
#type .ctn .btn { position: absolute; bottom: 0; left: 0; width: 100%;}
#type .ctn .btn a { display: block; width: 55%; max-width: 400px; margin: 0 50px 0 auto; border-radius: 10px; overflow: hidden;}
#type .ctn .btn a img { width: 100%;}
#type .ctn .btn a img.sp { display: none;}
#type .ctn .btn a:hover { opacity: 0.8;}

#type .ctn .slick-active .icn { opacity: 1;}
#type .ctn .slick-arrow { width: 84px; height: 84px; position: absolute; top: 50%; transform: translateY(-25%);
 background: #fff; border: none; border-radius: 50%; z-index: 100;
 text-indent: -9999em; outline: none;
}
#type .ctn .slick-prev { left: 14%;}
#type .ctn .slick-next { right: 14%;}
#type .ctn .slick-arrow:before{ position: absolute; content: ''; display: block; width: 26px; height: 40px; top: 50%; transform: translateY(-50%);
 background-image: url('./img/arw.png'); background-repeat: no-repeat; background-size: auto 100%;
}
#type .ctn .slick-prev:before { left: 29px; background-position: 0 50%;}
#type .ctn .slick-next:before { right: 29px; background-position: 100% 50%;}
#type .ctn .slick-arrow:hover { opacity: 0.8;}
#type.show .inner-sct { opacity: 1; transform: translateY(0px);}
@media screen and (max-width: 1024px){
	#type .ctn .icn { width: 120px; left: -80px;}
	#type .ctn .slick-prev { left: 8%;}
	#type .ctn .slick-next { right: 8%;}
}
@media screen and (max-width:801px){
	#type .ctn .slide .inner { padding: 0 20px;}
	#type .ctn .icn { width: 150px; left: 0px;}
	#type .ctn figure img.pc { display: none;}
	#type .ctn figure img.sp { display: block; margin: 0 auto;}
	#type .ctn figure { margin: 0 auto 8px;}
	#type .ctn .btn { position: relative; bottom: auto;}
	#type .ctn .btn a { display: block; width: 80%; max-width: 380px; margin: 0 auto;}
	#type .ctn .btn a img.pc { display: none;}
	#type .ctn .btn a img.sp { display: block;}
	#type .ctn .slick-arrow { width: 62px; height: 62px; top: 35%; transform: translateY(0%);}
	#type .ctn .slick-prev { left: 12%;}
	#type .ctn .slick-next { right: 12%;}
	#type .ctn .slick-prev:before { left: 17px;}
	#type .ctn .slick-next:before { right: 17px;}
}
@media screen and (max-width:481px){
	#type .inner-sct { padding: 20px 0px;}
	#type .ctn { padding: 15px 0 20px;}
	#type .ctn p { margin-bottom: 12px; font-size: 15px; letter-spacing: 0rem;}
	#type .ctn p br { display: block;}
	#type .ctn .slide .inner { padding: 0px;}

	#type .ctn .icn { width: 90px; left: -12px;}
	#type .ctn .slick-arrow{ width: 40px; height: 40px;}
	#type .ctn .slick-arrow:before{ width: 16px; height: 25px;}
	#type .ctn .slick-prev:before { left: 12px;}
	#type .ctn .slick-next:before { right: 12px;}

}


/* products */
#product {}
#product .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#product .bloc { position: relative; padding: 0px 0 100px; transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);}
#product .bloc#item01 { background: url('./img/item/line-1.png') repeat-x 50% 0;}
#product .bloc#item02 { background: url('./img/item/line-2.png') repeat-x 50% 0;}
#product .bloc#item03 { background: url('./img/item/line-3.png') repeat-x 50% 0;}
#product .bloc#item04 { background: url('./img/item/line-4.png') repeat-x 50% 0;}
#product .bloc .tit { position: relative; margin-bottom: 50px; padding-top: 100px;}
#product .bloc .tit.new { padding-top: 132px;}
#product .bloc .tit.new:before { content: ''; display: block; width: 126px; height: 72px; background: url('./img/item/tag-new.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 50%; top: 72px; transform: translateX(-50%); margin-left: -250px;
}
#product .bloc .tit h2 { text-align: center;}
#product .bloc .tit h2 img { width: 72%; max-width: 480px;}
#product .bloc .ctn-flex { display: flex; width: 100%; max-width: 880px; margin: 0 auto;}
#product .bloc .fig { width: 48%; position: relative;}
#product .bloc .txt { width: 52%;}
#product .bloc .fig figure { width: 100%; text-align: center;}
#product .bloc .fig figure img{ width: 85%; max-width: 280px;}
#product .bloc .txt h3 { margin-bottom: 20px;}
#product .bloc .txt h3 img { width: 100%; max-width: 378px;}
#product .bloc .txt p.read { margin-bottom: 20px; padding-left: 8px; color: #4d3823; font-weight: bold;}
#product .bloc .txt p.read sub { font-size: 10px;}
#product .bloc .txt dl { display: table; width: 100%; margin-bottom: 12px;}
#product .bloc .txt dl dt,
#product .bloc .txt dl dd { display: table-cell; vertical-align: middle;}
#product .bloc .txt dl dt { width: 100px; text-align: center;}
#product .bloc .txt dl dd { width: auto; padding-left: 10px; color: #853522; font-size: 16px; font-weight: 700; line-height: 1.4; }
#product .bloc .txt dl dt img { width: 92%;}
#product .bloc .txt dl dd span{ display: block; font-size: 20px;}
#product .bloc .txt dl dd span.color1 { color: #e99723;}
#product .bloc .txt dl dd span.color2 { color: #e77583;}
#product .bloc .txt dl dd span.color3 { color: #ec6933;}
#product .bloc .txt dl dd span.color4 { color: #d15052;}
#product .bloc .txt dl dd sub { font-size: 10px; vertical-align: baseline;}
#product .bloc .txt p.price { margin-bottom: 10px; color: #853522; font-size: 18px; font-weight: 700; line-height: 1;}
#product .bloc .txt p.price span { font-size: 21px;}
#product .bloc .txt p.price span em { font-size: 26px; font-style: normal;}
#product .bloc .txt .cart { width: 98%; max-width: 310px;}
#product .bloc .cart form { position: relative; display: block; width: 100%; padding: 3px; border-radius: 12px;}
#product .bloc .cart form.cart1 { background: #ecb41b;}
#product .bloc .cart form.cart2 { background: #e77583;}
#product .bloc .cart form.cart3 { background: #ed6d34;}
#product .bloc .cart form.cart4 { background: #d15052;}
#product .bloc .cart form:after { content: ''; display: block; width: 0px; height: 0px;
 border: solid 4px transparent; border-left: solid 6px #fff; border-right: 0px;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
}
#product .bloc .cart form svg { display: block; width: 20px; fill: #fff;
 position: absolute; left: 50%; top: 50%; transform: translate(-80px,-50%);
}
#product .bloc .cart form input[type="submit"] { position: relative; display: block; width: 100%;
 padding: 10px 0; background: rgba(255,255,255,0); border: solid 1px #eee; border-radius: 10px;
 color: #fff; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none;
}
#product .bloc .cart form input[type="submit"]:hover { background: rgba(255,255,255,0.2);}
#product .bloc .cart span { position: relative; display: block; width: 100%; padding: 3px; border-radius: 12px; background: #ccc;}
#product .bloc .cart span:after { content: ''; display: block; width: 0px; height: 0px;
 border: solid 4px transparent; border-left: solid 6px #fff; border-right: 0px;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
}
#product .bloc .cart span svg { display: block; width: 20px; fill: #fff;
 position: absolute; left: 50%; top: 50%; transform: translate(-80px,-50%);
}
#product .bloc .cart span em { position: relative; display: block; width: 100%;
 padding: 10px 0; background: rgba(255,255,255,0); border: solid 1px #eee; border-radius: 10px;
 color: #fff; font-size: 14px; font-style: normal; font-weight: 700; text-align: center; text-decoration: none;
}
#product .note { position: absolute; left: 0; bottom: 40px;}
#product .note ul { max-width: 280px; margin: 0 40px 0 auto;}
#product .note ul li { color: #727272; font-size: 10px;}
#product.show .inner-sct { opacity: 1; transform: translateY(0px);}
#product .bloc.show { opacity: 1; transform: translateY(0px);}
@media screen and (max-width:801px){
	#product .bloc { padding: 0px 0 80px;}
	#product .bloc#item01 { background: url('./img/item/line-1@sp.png') repeat-x 100% 0 / 100% auto;}
	#product .bloc#item02 { background: url('./img/item/line-2@sp.png') repeat-x 100% 0 / 100% auto;}
	#product .bloc#item03 { background: url('./img/item/line-3@sp.png') repeat-x 100% 0 / 100% auto;}
	#product .bloc#item04 { background: url('./img/item/line-4@sp.png') repeat-x 100% 0 / 100% auto;}
	#product .bloc .fig { width: 45%;}
	#product .bloc .txt { width: 55%;}
	#product .bloc .txt dl dt { width: 80px;}
	#product .bloc .txt dl dd { font-size: 13px;}
	#product .bloc .txt dl dd span{ font-size: 16px;}
	#product .bloc .txt p.price { font-size: 13px;}
	#product .bloc .txt p.price span { font-size: 20px;}
}
@media screen and (max-width:481px){
	#product .bloc { padding: 0px 0 50px;}
	#product .bloc#item04 { padding-bottom: 80px;}
	#product .bloc .tit { margin-bottom: 24px; padding-top: 15vw;}
	#product .bloc .tit.new { padding-top: 20vw;}
	#product .bloc .tit.new:before { content: ''; display: block; width: 80px; height: 46px; top: 10vw; margin-left: -130px;}
	#product .bloc .fig { width: 40%;}
	#product .bloc .txt { width: 58%;}
	#product .bloc .txt h3 { margin-bottom: 8px;}
	#product .bloc .txt p.read { margin-bottom: 8px; padding-left: 6px; font-size: 11px;}
	#product .bloc .txt dl {margin-bottom: 8px;}
	#product .bloc .txt dl dt { width: 60px;}
	#product .bloc .txt dl dd { padding-left: 6px; font-size: 10px;}
	#product .bloc .txt dl dd span{ font-size: 11px;}
	#product .bloc .txt dl dd sub { font-size: 9px;}
	#product .bloc .txt p.price { font-size: 9px;}
	#product .bloc .txt p.price span { font-size: 13px;}
	#product .bloc .txt .cart { width: 90%;}
	#product .note { bottom: 16px;}
	#product .note ul { margin: 0 12px 0 auto;}
}




.bg-color {width: 100%; max-width: 1280px; margin: 0 auto; background: linear-gradient(136deg,#f4dbe2,#fffbe8);}
@media screen and (max-width:480px){
	.bg { background: linear-gradient(-285deg,#f4dbe2,#fffbe8);}
}
#shop .inner-sct { position: relative; width: 100%;}
#shop .shop-kv { position: relative; width: 100%; background: url('./img/bg/shop.jpg') no-repeat 50% 50% / cover;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#shop .shop-kv .inner { width: 92%; margin: 0 auto; padding: 240px 0;}
#shop .shop-kv h2 { width: 55%; margin-bottom: 50px; text-align: center;}
#shop .shop-kv h2 img { width: 80%; max-width: 300px;}
#shop .shop-kv .btn { width: 55%;}
#shop .shop-kv .btn a { position: relative; display: block; width: 80%; max-width: 320px; margin: 0 auto; padding: 15px 0;
 background: #faa945; border-radius: 5px; transition: 0.3s ease;
 color: #4d3823; font-size: 23px; font-weight: 700; letter-spacing: 0.15rem; text-align: center; text-indent: -2em;
}
#shop .shop-kv .btn a:after { content: ''; display: block; width: 18px; height: 18px; border-bottom: solid 3px #4d3823; border-right: solid 3px #4d3823;
 position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#shop .shop-kv .btn a:hover { opacity: 0.8;}
#shop .shop-kv.show { opacity: 1; transform: translateY(0px);}
@media screen and (max-width:801px){
	#shop .shop-kv .inner { padding: 20vw 0;}
	#shop .shop-kv h2 { margin-bottom: 30px;}
	#shop .shop-kv .btn a { font-size: 2.4vw;}
}
@media screen and (max-width:481px){
	#shop .shop-kv .inner { padding: 20vw 0 18vw;}
	#shop .shop-kv h2 { margin-bottom: 20px;}
	#shop .shop-kv .btn a { padding: 8px 0; font-size: 13px; letter-spacing: 0.1rem; text-indent: -1em;}
	#shop .shop-kv .btn a:after { width: 10px; height: 10px; right: 12px; border-width: 2px;}
}

#shop .ctn { position: relative; width: 92%; max-width: 1024px; margin: 0 auto; padding: 100px 0;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#shop .ctn ul { display: flex; flex-wrap: wrap;}
#shop .ctn ul li { width: 33%; padding: 14px;}
#shop .ctn ul li a { position: relative;
 display: block; width: 100%; margin: 0 auto; padding: 18px 0; padding-left: 70px; background: #ffd45b; border-radius: 6px;
 color: #4d3823; font-size: 18px; font-weight: 700; text-decoration: none;
}
#shop .ctn ul li a:before { content: ''; width: 36px; height: 100%; position: absolute; left: 6%; top: 0;
 background: url('./img/icn-logo.png') no-repeat 50% 50% / 100% auto;
}
#shop .ctn ul li a:hover { opacity: 0.65;}
#shop .ctn.show { opacity: 1; transform: translateY(0px);}
@media screen and (max-width: 801px){
	#shop .ctn { padding: 50px 0 80px;}
	#shop .ctn ul li { width: 50%; padding: 10px;}
	#shop .ctn ul li a { padding: 12px 0; padding-left: 60px; font-size: 14px;}
	#shop .ctn ul li a:before { width: 30px;}
}
@media screen and (max-width:481px){
	#shop .ctn { padding: 40px 0;}
	#shop .ctn ul li { padding: 6px;}
	#shop .ctn ul li a { padding: 8px 0; padding-left: 32px; font-size: 11px;}
	#shop .ctn ul li a:before { width: 21px; left: 4%;}
}


#series { position: relative;}
#series .inner-sct { position: relative; width: 94%; max-width: 1200px; margin: 0 auto; padding: 40px 0 80px;
 transition: 1.2s cubic-bezier(.17,.67,.82,.4); opacity: 0; transform: translateY(30px);
}
#series h2 { margin-bottom: 50px; font-size: 32px; font-weight: 700; text-align: center;}

#series p.note { padding-right: 20px; color: #727272; font-size: 10px; text-align: right;}
#series .pc-show { margin: 0 auto 20px;}
#series .sp-show { display: none;}
#series ul { font-size: 0; text-align: center;}
#series ul.series li { position: relative; display: inline-block; width: 20%; padding: 0 6px;}
#series ul.series li img { width: 100%;}
#series ul.series li a { display: block; width: 80%; max-width: 130px; padding: 6px 0; background: #000; border-radius: 50px;
 color: #fff; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; text-indent: -15px;
 position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
}
#series ul.series li a.btn-deep { background: #ed7910; box-shadow: 0 5px 10px #d1920b;}
#series ul.series li a.btn-melty { background: #e97d81; box-shadow: 0 5px 10px #da919c;}
#series ul.series li a.btn-pixie { background: #f8c302; box-shadow: 0 5px 10px #d8bf54;}
#series ul.series li a.btn-creamy{ background: #d73e18; box-shadow: 0 5px 10px #ba3f1f;}
#series ul.series li a.btn-milky { background: #d73e18; box-shadow: 0 5px 10px #ba3f1f;}
#series ul.series li a.btn-fleur { background: #fb9a00; box-shadow: 0 5px 10px #d58a12;}
#series ul.series li a.btn-color { background: #b185e1; box-shadow: 0 5px 10px #be90c3;}
#series ul.series li a:after { content: ''; display: block; width: 6px; height: 6px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#series ul.series li a:hover { opacity: 0.65;}
#series ul.series li span { display: block; width: 100%; position: absolute; left: 0; bottom: 18px; font-size: 9px; line-height: 1.2; text-align: center;}

#series .sp-show div { position: relative;}
#series .sp-show div img { width: 90%; margin: 0 auto;}
#series .sp-show div .btn-more { position: absolute; left: 0; bottom: 11.0vw; width: 100%;}
#series .sp-show div .btn-more a { position: relative; display: block; width: 72%; margin: 0 auto; padding: 12px 0; background: #000; border-radius: 50px;
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; text-indent: -15px;
}
#series .sp-show div .btn-more a:after { content: ''; display: block; width: 12px; height: 12px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 24px; top: 50%; transform: translateY(-50%) rotate(45deg);
}

#series .sp-show div .btn-more a.btn-deep { background: #ed7910; box-shadow: 0 5px 10px #d1920b;}
#series .sp-show div .btn-more a.btn-melty { background: #e97d81; box-shadow: 0 5px 10px #da919c;}
#series .sp-show div .btn-more a.btn-pixie { background: #f8c302; box-shadow: 0 5px 10px #d8bf54;}
#series .sp-show div .btn-more a.btn-creamy{ background: #d73e18; box-shadow: 0 5px 10px #ba3f1f;}
#series .sp-show div .btn-more a.btn-milky { background: #d73e18; box-shadow: 0 5px 10px #ba3f1f;}
#series .sp-show div .btn-more a.btn-fleur { background: #fb9a00; box-shadow: 0 5px 10px #d58a12;}
#series .sp-show div .btn-more a.btn-color { background: #b185e1; box-shadow: 0 5px 10px #be90c3;}
#series .sp-show div span { display: block; width: 100%; position: absolute; left: 0; bottom: 16px; font-size: 9px; line-height: 1.2; text-align: center;}
#series.show .inner-sct { opacity: 1; transform: translateY(0px);}
@media (max-width: 801px) {
	section#series .inner-sct { width: 100%;}
	section#series h2 { margin-bottom: 30px; font-size: 24px;}
	#series .pc-show { display: none;}
	#series .sp-show { display: block; margin: 0 auto 2px;}
	#series .slider { display: block; padding-bottom: 200px;}
	#series .slider .slick-arrow { bottom: 50px;}
	#series .slider .slick-dots { position: absolute; bottom: 0px; display: block; width: 100%; padding: 0; margin: 0; font-size: 0; text-align: center;}
	#series .slider .slick-dots li { position: relative; display: inline-block;  width: 80px; height: 180px; margin: 0 5px; padding: 0; cursor: pointer;}
	#series .slider .slick-dots li:nth-child(1) { background: url('/img/series/th-deep.png') no-repeat 50% 100% / 94% auto;}
	#series .slider .slick-dots li:nth-child(2) { background: url('/img/series/th-melty.png') no-repeat 50% 100% / 94% auto;}
	#series .slider .slick-dots li:nth-child(3) { background: url('/img/series/th-pixie.png') no-repeat 50% 100% / 94% auto;}
	#series .slider .slick-dots li:nth-child(4) { background: url('/img/series/th-milky.png') no-repeat 50% 100% / 94% auto;}
	#series .slider .slick-dots li:nth-child(5) { background: url('/img/series/th-fleur.png') no-repeat 50% 100% / 94% auto;}
	#series .slider .slick-dots li:nth-child(6) { background: url('/img/series/th-color.png') no-repeat 50% 100% / 94% auto;}
	#series .slider .slick-dots li button { line-height: 0;
	 display: block; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; cursor: pointer;
	 color: transparent; border: 0; outline: none; background: transparent; border: solid 1px transparent;
	}
	#series .slider .slick-dots li button:before { content: ''; width: 20px; height: 20px; border-radius: 50%; top: 5px; left: 50%; transform: translate(-50%, 0%);}
	#series .slider .slick-dots li:nth-child(1) button:before { background: #fdb71b;}
	#series .slider .slick-dots li:nth-child(2) button:before { background: #f0989e;}
	#series .slider .slick-dots li:nth-child(3) button:before { background: #f7dc49;}
	#series .slider .slick-dots li:nth-child(4) button:before { background: #673b1c;}
	#series .slider .slick-dots li:nth-child(5) button:before { background: #f5bf4b;}
	#series .slider .slick-dots li:nth-child(6) button:before { background: #8f6fb3;}

	#series .slider .slick-dots li button:hover,
	#series .slider .slick-dots li button:focus{ outline: none;}
	#series .slider .slick-dots li button:hover:before,
	#series .slider .slick-dots li button:focus:before { opacity: 0.8;}
	#series .slider .slick-dots li.slick-active button { border: solid 1px #621a14;}
	#series .slider .slick-prev { left: 20px;}
	#series .slider .slick-next { right: 20px;}
	#series .slider .slick-arrow:before{ position: absolute; content: ''; display: block; width: 20px; height: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);}
	#series .slider .slick-prev:before { left: 40%; border-bottom: solid 2px #010101; border-left: solid 2px #010101;}
	#series .slider .slick-next:before { right: 40%; border-top: solid 2px #010101; border-right: solid 2px #010101;}
}
@media (max-width: 641px) {
	#series .slider { padding-bottom: 150px;}
	#series .slider .slick-arrow { bottom: 30px;}
	#series .slider .slick-dots li { width: 50px; height: 120px;}
}
@media screen and (max-width:480px){
	section#series .inner-sct { padding: 20px 0 40px;}
	section#series h2 { margin-bottom: 20px; font-size: 18px; line-height: 1.4;}
	section#series h2 span { display: block;}

	#series .slider { padding-bottom: 130px;}

	#series .sp-show div .btn-more a { padding: 8px 0; font-size: 14px; text-indent: -10px;}
	#series .sp-show div .btn-more a:after { width: 10px; height: 10px; right: 16px;}

	#series .slider .slick-arrow { bottom: 30px;}
	#series .slider .slick-dots li { width: 45px; height: 110px; margin: 0 2px;}
	#series .slider .slick-dots li button { width: 24px; height: 24px;}
	#series .slider .slick-dots li button:before { width: 16px; height: 16px; top: 4px;}

	#series .slider .slick-prev { left: 0px;}
	#series .slider .slick-next { right: 0px;}
	#series .slider .slick-prev:before,
	#series .slider .slick-next:before { width: 15px; height: 15px; border-width: 1px;}
}




/* footer */
#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;}
}








/* shop list */
.modalBase{width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(255,255,255,.7); display:flex; align-content:center; align-items:center; justify-content:center; z-index:9999; display:none;}
/* movie */
.modalBase.movie{background:rgba(0,0,0,0.7);}
.movieConttainer{width:1024px; height:576px; position:relative;}
.movieConttainer video{width:100%; height:auto; display:block;}
.movieConttainer .close{width:40px; height:40px; position:absolute; right:0; top:-40px;}
.movieConttainer .close a{width:40px; height:40px; display:block; text-indent:-100px; overflow:hidden; white-space:nowrap; position:relative;}
.movieConttainer .close a::before,
.movieConttainer .close a::after{width:141.1%; height:1px; background:#fff; content:''; display:block; position:absolute; top:16px;}
.movieConttainer .close a::before{transform:rotate(45deg); right:-6px;}
.movieConttainer .close a::after{transform:rotate(-45deg); left:-6px;}
.Cchannel .movieConttainer {width: auto !important; height: 85%;}
.Cchannel .movieConttainer video {width: auto !important; height: 100%;}

.aItem{opacity:0; position:relative; top:75px; transition:opacity 1.2s cubic-bezier(.17,.67,.82,.4) .5s,top 0.8s cubic-bezier(.1,.59,.28,.81) .2s;}
.aItem.play{opacity:1; top:0;}



@media screen and (max-width:767px){
	/* movie */
	.movieConttainer{width:100%; height:auto; background:#000;}
	.movieConttainer video{width:100%; height:auto; display:block;}
	.movieConttainer .close{right:20px; top:20px; position:fixed;}
}
