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

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

@keyframes fadeIn {
   0% { opacity: 0;}
  10% { opacity: 0.4;}
  11% { opacity: 0.2;}
  30% { opacity: 0.6;}
  31% { opacity: 0.2;}
  50% { opacity: 0.4;}
  51% { opacity: 0.2;}
  80% { opacity: 0.8;}
  81% { opacity: 0.2;}
  90% { opacity: 0.6;}
 100% { opacity: 1;}
}
@keyframes fadeIn1 {
   0% { opacity: 0;}
  10% { opacity: 0.4;}
  11% { opacity: 0.2;}
  40% { opacity: 0.6;}
  41% { opacity: 0.2;}
  60% { opacity: 0.4;}
  61% { opacity: 0.2;}
  80% { opacity: 0.8;}
  81% { opacity: 0.2;}
  90% { opacity: 0.6;}
 100% { opacity: 1;}
}
@keyframes txt-shine {
   0% { opacity: 0; background-position: 0% 50%;}
  60% { opacity: 1; background-position: 0% 50%;}
  61% { background-position: 0% 50%;}
 100% { opacity: 1; background-position: 100% 50%;}
}


#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #d3a6d8; z-index: 200;}
#loading #progress { position: absolute; left: 0; top: 0; width: 100%; height: 100vh;}
#loading #progress svg { width: 60%; max-width: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-65%);}
#loading #progress .progressbar-text { font-size: 30px;}
#loading #progress .progressbar-text span{ font-size: 15px;}
#loading .inner { position: relative; width: 100%; height: 100vh;}
#loading .logo { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-40%); text-align: center;}
#loading .logo svg { width: 50%; max-width: 240px; margin: 0 auto; fill: #fff;}
#loading .logo svg path { opacity: 0; transition: 1.0s linear;}
#loading .logo svg path.icn { opacity: 0; transition: 2.0s linear;}
#loading.start .logo svg path.icn { opacity: 1;}
#loading.start .logo svg path.and { animation: 2.0s fadeIn1 linear forwards; animation-delay: 1.0s;}
#loading.start .logo svg path.h { animation: 1.8s fadeIn linear forwards; animation-delay: 1.4s;}
#loading.start .logo svg path.o { animation: 1.6s fadeIn linear forwards; animation-delay: 1.6s;}
#loading.start .logo svg path.n { animation: 1.4s fadeIn1 linear forwards; animation-delay: 1.8s;}
#loading.start .logo svg path.e { animation: 1.8s fadeIn linear forwards; animation-delay: 1.2s;}
#loading.start .logo svg path.y { animation: 1.6s fadeIn1 linear forwards; animation-delay: 1.8s;}
#loading .logo p { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 0.4rem; line-height: 1; opacity: 0;
 background-image: linear-gradient( 80deg, #fff, #fff 20%, #ffc8e1 40%, #f1dea2 50%, #85bfdb 60%, #c1d7b5 70%, #fff 80%, #fff);
 background-size: 50% 100%;
 background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
 animation:  txt-shine 3.0s ease 4.0s forwards;
}
@media (max-width: 801px) {
	#loading .logo p { font-size: 6.0vw; animation:  txt-shine 2.4s ease 2.2s forwards;
		background-image: linear-gradient( 80deg, #fff, #fff 20%, #ffc8e1 40%, #f1dea2 45%, #85bfdb 55%, #c1d7b5 60%, #fff 70%, #fff);
	}
}
@media (max-width: 481px) {
	#loading #progress svg { max-width: 300px; top: 38%;}
	#loading .logo { transform: translateY(-60%);}
	#loading #progress .progressbar-text { margin-top: -80px !important;}
}


.wave { width: 100%; max-width: 1280px; height: 120px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
 background: url('../../img/color/top/wave-5.png') repeat-x 50% 100%; animation: 6s waves linear 0.2s infinite;
}
.wave:before,
.wave:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0;}
.wave:before{ background: url('../../img/color/top/wave-3.png') repeat-x 50% 100%; animation: 8s waves linear infinite;}
.wave:after { background: url('../../img/color/top/wave-4.png') repeat-x 50% 100%; animation: 10s waves linear infinite;}

.btn a { position: relative; display: block; width: 60%; max-width: 350px; margin: 0 auto; padding: 3px; background: #ddc2eb; border-radius: 50px;
 color: #582e87; font-size: 20px; font-weight: 700; text-align: center; text-decoration: none;
}
.btn a:before,
.btn a:after { content: ''; display: block; position: absolute;}
.btn a:before{ width: 35px; height: 40px; left: 50px; top: 50%; transform: translateY(-50%);
 background: url('../../img/color/top/icn-1.png') no-repeat 50% 50% / 100% auto;
}
.btn a:after { width: 12px; height: 12px; border-top: solid 2px #582e87; border-right: solid 2px #582e87;
 right: 50px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
.btn a span { display: block; border: solid 2px #867599; padding: 12px 0; border-radius: 50px;}
.btn a:hover { opacity: 0.85;}
.note ul { width: 100%; margin: 0 0 0 auto;}
.note ul li { color: #767676; font-size: 10px;}
@media (max-width: 801px) {
	.wave { height: 90px;}
}
@media (max-width: 641px) {
	.wave { background: url('../../img/color/top/wave-5-sp.png') repeat-x 50% 0% / 800px 60%; animation: 18s wavesSp linear 0.2s infinite;}
	.wave:before{ background: url('../../img/color/top/wave-3-sp.png') repeat-x 50% 0% / 800px 80%; animation: 20s wavesSp linear infinite;}
	.wave:after { background: url('../../img/color/top/wave-4-sp.png') repeat-x 50% 0% / 800px 98%; animation: 24s wavesSp linear infinite;}
	.btn a:before{ width: 30px; height: 35px; left: 20px;}
	.btn a:after { right: 30px;}
	.btn a span { padding: 8px 0;}
}
@media (max-width: 481px) {
	.wave { height: 60px;}
	.btn a { padding: 2px; font-size: 15px;}
	.btn a:before{ width: 28px; height: 32px; left: 16px;}
	.btn a:after { width: 8px; height: 8px; right: 20px;}
}

@keyframes waves{
   0% { background-position: 0% 100%;}
 100% { background-position: 1280px 100%;}
}
@keyframes wavesSp{
   0% { background-position-x: 0%;}
 100% { background-position-x: 800px;}
}
@keyframes shiny {
   0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0;}
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5;}
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1;}
 100% { -webkit-transform: scale(20) rotate(45deg); opacity: 0;}
}
@keyframes openNews {
   0% { width: 10px;}
 100% { width: calc( 100% - 110px);}
}
@keyframes openNewsSp {
   0% { width: 6px;}
 100% { width: calc( 100% - 20px);}
}

.message { padding: 20px; background: #eee; text-align: center;}
.message h3 { margin-bottom: 12px; color: #d00; font-size: 16px;}
.message p { display: inline-block; font-size: 14px;}
@media (max-width: 1001px) {
	.message p { font-size: 14px; text-align: left;}
}
@media (max-width: 801px) {
	.message p { font-size: 12px;}
}
@media (max-width: 641px) {
	.message h3 { font-size: 14px; text-align: left;}
	.message p br.pc { display: none;}
}
@media (max-width: 481px) {
	.message h3 { font-size: 12px;}
	.message p { font-size: 10px;}
}


#kv { position: relative; margin-bottom: -100px; padding-bottom: 120px;}
#kv .bg { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: #d3a6d8;}
#kv .bg:before,
#kv .bg:after { content: ''; display: block; width: 100%; height: 120px; position: absolute; left: 0;}
#kv .bg:before{ bottom: -110px; background: url('../../img/color/top/wave-2.png') repeat-x 50% 100%; animation: 6s waves linear infinite; z-index: 2;}
#kv .bg:after { bottom: -90px; background: url('../../img/color/top/wave-1.png') repeat-x -300px 0%; z-index: 3;}
#kv .logo { position: relative; margin-bottom: -65px; padding-top: 12px; padding-bottom: 110px;}
#kv .logo:before,
#kv .logo:after { content: ''; display: block; width: 100%; height: 120px; position: absolute; left: 0; bottom: 28px;}
#kv .logo:before{ background: url('../../img/color/top/wave-2.png') repeat-x 50% 100%; animation: 6s waves linear infinite; z-index: 6;}
#kv .logo:after { background: url('../../img/color/top/wave-1.png') repeat-x -300px 0%; z-index: 7;}
#kv .logo h1 { position: relative; text-align: center; z-index: 10;}
#kv .logo h1 img { width: 26%; max-width: 150px;}
#kv .logo .wave { z-index: 5;}
#kv .view { position: relative; width: 100%; height: 520px; background: url('../../img/color/top/bg-kv.jpg') no-repeat 50% 50% / 110% auto; transition: 2.0s ease-out; opacity: 0;}
#kv .view:after { content: none; display: block; width: 100%; height: 60px; background: linear-gradient(rgba(211,166,216,0) 12%,rgba(211,166,216,1) 60%); z-index: 10;
 position: absolute; left: 0; bottom: 0;
}
#kv .view p { display: none; text-align: center;}
#kv .view p img { width: 100%;}
#kv .awards { padding: 18px 0; background: linear-gradient(80deg, #fdfbdb,#f7dff1 20%, #f5f9ff 65%, #f7ddf0)}
#kv .awards ul { width: 92%; max-width: 520px; margin: 0 auto;}
#kv .awards ul li img { width: 100%;}
#kv .txt { position: relative; width: 100%; max-width: 600px; margin: 0px auto; padding-top: 20px;}
#kv .txt:after { content: ''; display: block; width: 100%; height: 100%; background: #d3a6d8; position: absolute; right: 0; top: 0; transition: 2.4s ease;}
#kv .txt h2 { position: relative; margin-bottom: 25px; text-align: center;}
#kv .txt h2 img { width: 68%; max-width: 420px;}
#kv .txt .debut { width: 100%; max-width: 480px; margin: 0 auto;}
#kv .txt .debut p { text-align: center;}
#kv .txt .debut p img { width: 100%;}
#kv .txt .icn-new { width: 100px; height: 100px; position: absolute; left: 0; top: 20px; transition: 0.4s ease 0.8s; opacity: 0; transition: 0.3s linear;}
#kv .txt .icn-new .mask { width: 100%; height: 100%; border-radius: 50%;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; z-index: 2; box-shadow: 0 0 6px rgba(255,255,255,0.6), 0 0 6px inset #fff;
}
#kv .txt .icn-new .mask::before { content: ''; display: block; width: 40px; height: 200px; background-color: #fff; position: absolute; top: -180px; left: 0;
 animation: shiny 3s ease-in-out infinite;
}
#kv .txt .icn-new .inner { position: relative; width: 100%; overflow: hidden;}
#kv .txt .icn-new .inner img { width: 100%;}
#kv .news { position: relative; width: 100%; max-width: 520px; height: 100px; margin: 0 auto; z-index: 10; font-size: 0px; overflow: hidden;}
#kv .news div { position: relative; transform: translateX(600px); display: inline-block; width: 10px; height: 100px; margin-right: 8px; background: #f5f1dc; overflow: hidden; transition: 0.4s ease-out;}
#kv .news div:nth-child(1) { transition-delay: 0.8s;}
#kv .news div:nth-child(2) { transition-delay: 1.0s;}
#kv .news div:nth-child(3) { transition-delay: 1.2s;}
#kv .news div:nth-child(4) { transition-delay: 1.4s;}
#kv .news div:nth-child(5) { transition-delay: 1.6s;}
#kv .news div:nth-child(6) { transition-delay: 1.8s;}
#kv .news div:nth-child(7) { transition-delay: 2.0s;}
#kv .news div:last-child { margin-right: 0px;}
#kv .news div ul li { display: none;}
#kv .news div ul li:first-child { display: block;}
#kv .news div ul li a { display: block; background: linear-gradient(90deg,#f8ddf0 20%, #e5f9ff, #f0f7e6, #fadbdf); color: #582e87; text-decoration: none;
 transition: 0.2s ease 2.4s; opacity: 0;
}
#kv .news div ul li a dl { position: relative; display: table; width: 100%;}
#kv .news div ul li a dl dt,
#kv .news div ul li a dl dd { display: table-cell; vertical-align: middle;}
#kv .news div ul li a dl dt { width: 100px;}
#kv .news div ul li a dl dt img { width: 100%;}
#kv .news div ul li a dl dd { padding-left: 16px; font-size: 12px;}
#kv .news div ul li a dl dd span.tit { display: block; font-weight: 700;}
#kv .news div ul li a dl dd span.update{ display: block;}
#kv .news div ul li a:hover { opacity: 0.8;}

#kv.show .view { background-size: 100% auto; opacity: 1;}
#kv.show .txt:after { width: 0%;}
#kv.show .txt .icn-new { opacity: 1;}
#kv.show .news div { transform: translateX(0px);}
#kv.show .news div.box { animation: 0.2s openNews ease 2.1s forwards;}
#kv.show .news div.box ul li a { opacity: 1;}
@media (max-width: 1281px) {
	#kv .view { background-size: auto 120%;}
	#kv.show .view { background-size: auto 100%;}
}
@media (max-width: 801px) {
	#kv { padding-bottom: 90px;}
	#kv .bg:after { background-position: -600px 100%;}
	#kv .logo { margin-bottom: -90px; padding-bottom: 80px;}
	#kv .logo:after { background-position: -600px 100%;}
	#kv .logo .wave { bottom: 0px;}
}
@media (max-width: 641px) {
	#kv .bg:before,
	#kv .bg:after { height: 80px; bottom: -80px;}
	#kv .bg:before{ background: url('../../img/color/top/wave-2-sp.png') repeat-x 50% 0% / 800px 90%; animation: 6s wavesSp linear infinite;}
	#kv .bg:after { background: url('../../img/color/top/wave-1-sp.png') repeat-x 240% 0% / 120% 85%;}
	#kv .logo { margin-bottom: -14vw; padding-bottom: 50px;}
	#kv .logo:before,
	#kv .logo:after {}
	#kv .logo:before{ height: 90px; bottom: 10px; background: url('../../img/color/top/wave-2-sp.png') repeat-x 20% 2% / 800px 85%; animation: 6s wavesSp linear infinite;}
	#kv .logo:after { height: 120px; bottom: 20px; background: url('../../img/color/top/hd-sp.png') repeat-x 240% 100% / 120% 120%;}
	#kv .logo .wave { bottom: 8px;}
	#kv .view { height: 0px; padding-top: 74%; background: url('../../img/color/top/bg-kv-sp.jpg') no-repeat 50% 50% / 110% auto;}
	#kv .view p { display: block;}
	#kv .txt { padding-top: 20px;}
	#kv .txt .icn-new { width: 80px; height: 80px; left: 20px;}
	#kv.show .view { background-size: 100% auto;}
}
@media (max-width: 481px) {
	#kv { padding-bottom: 60px;}
	#kv .bg:before,
	#kv .bg:after { height: 50px; bottom: -50px;}
	#kv .bg:after { background-size: 120% 100%; background-position: 300px 0%;}
	#kv .logo { margin-bottom: -12vw; padding-bottom: 50px;}
	#kv .logo:before{ height: 15vw;}
	#kv .logo:after { bottom: 4vw; height: 16vw; background-size: 120% 140%;}
	#kv .logo .wave { bottom: 0px;}
	#kv .txt .icn-new { width: 52px; height: 52px; left: 12px;}
	#kv .news { height: 80px;}
	#kv .news div { width: 6px; margin-right: 4px;}
	#kv .news div:nth-child(2),
	#kv .news div:nth-child(3),
	#kv .news div:nth-child(4),
	#kv .news div:nth-child(6) { display: none;}
	#kv .news div:nth-child(1) { transition-delay: 0.0s;}
	#kv .news div:nth-child(5) { transition-delay: 0.2s;}
	#kv .news div:nth-child(7) { transition-delay: 0.4s;}
	#kv .news div ul li a { transition: 0.2s ease 1.0s;}
	#kv .news div ul li a dl dt { width: 80px;}
	#kv .news div ul li a dl dd { padding-left: 12px; font-size: 10px;}
	#kv.show .news div.box { animation: 0.2s openNewsSp ease 2.1s forwards;}
}



#lead .bg { width: 100%; max-width: 1280px; margin: 0 auto; background: url('../../img/color/top/bg-lead.jpg') no-repeat 50% 50% / cover;}
#lead .inner-sct { padding: 150px 0 20px;}
#lead .ttl { margin: 0 auto 70px;}
#lead .ttl .row1 { position: relative; width: 100%; height: 150px; overflow: hidden;}
#lead .ttl .row1 .inner { position: relative; width: 100%; max-width: 700px; margin: 0 auto; padding-left: 100px; height: 100%; transition: 1.0s linear;}
#lead .ttl .row1 .char { position: relative; display: inline-block; margin-right: 8px;}
#lead .ttl .row1 .char:last-child { margin-right: 0px;}
#lead .ttl .row1 .char img { position: relative; width: auto; transform-origin: 50% 100%; transform: rotate3d(0,1,0,90deg) rotate(90deg); transition: 0.6s ease;}
#lead .ttl .row1 .char:nth-child(1) img { transition-delay: 0.8s;}
#lead .ttl .row1 .char:nth-child(2) img { transition-delay: 1.0s;}
#lead .ttl .row1 .char:nth-child(3) img { transition-delay: 1.2s;}
#lead .ttl .row1 .char:nth-child(4) img { transition-delay: 1.4s;}
#lead .ttl .row1 .char:nth-child(5) img { transition-delay: 1.6s;}
#lead .ttl .row1 .char:nth-child(6) img { transition-delay: 1.8s;}

#lead .ttl .row2 { position: relative; width: 100%; height: 120px; overflow: hidden;}
#lead .ttl .row2 .inner { position: relative; width: 100%; max-width: 700px; margin: 0 auto; height: 100%; transition: 1.0s linear;}
#lead .ttl .row2 .char { position: relative; display: inline-block; margin-right: 6px;}
#lead .ttl .row2 .char:last-child { margin-right: 0px;}
#lead .ttl .row2 .char img { position: relative; width: auto; height: 100%; transform-origin: 50% 100%; transform: rotate3d(0,1,0,90deg) rotate(90deg); transition: 0.6s ease;}
#lead .ttl .row2 .char:nth-child(1) img { transition-delay: 1.2s;}
#lead .ttl .row2 .char:nth-child(2) img { transition-delay: 1.4s;}
#lead .ttl .row2 .char:nth-child(3) img { transition-delay: 1.6s;}
#lead .ttl .row2 .char:nth-child(4) img { transition-delay: 1.8s;}
#lead .ttl .row2 .char:nth-child(5) img { transition-delay: 2.0s;}
#lead .ttl .row2 .char:nth-child(6) img { transition-delay: 2.2s;}
#lead.show .ttl .row1 .char img { transform: rotate3d(1,1,1,0deg);}
#lead.show .ttl .row2 .char img { transform: rotate3d(1,1,1,0deg);}
#lead.move .ttl .row1 .inner { transform: translateX(1000px);}
#lead.move .ttl .row1 .char img { transform: rotate3d(1,1,1,0deg);}
#lead.move .ttl .row2 .inner { transform: translateX(-1000px);}
#lead.move .ttl .row2 .char img { transform: rotate3d(1,1,1,0deg);}


#lead .ctn { width: 100%; max-width: 700px; margin: 0 auto;}
#lead .ctn h3 { margin-bottom: 20px; color: #fff; font-size: 30px; letter-spacing: 0.1rem; text-align: center;}
#lead .ctn p { margin-bottom: 50px; color: #fff; font-size: 18px; font-weight: 700; text-align: center;}
#lead .ctn p span { display: block;}
#lead .ctn p sub { font-size: 10px; vertical-align: baseline;}
#lead .note ul { max-width: 300px; }
#lead .note ul li { color: #f3d6f6;}
@media (max-width: 801px) {
	#lead .ttl .row1 { height: 100px; text-align: right;}
	#lead .ttl .row1 .inner { padding-left: 0px; padding-right: 40px;}
	#lead .ttl .row1 .char img { height: 100px;}
	#lead .ttl .row2 { height: 80px;}
	#lead .ttl .row2 .inner { padding-left: 60px;}
	#lead .ttl .row2 .char img { height: 80px;}
}
@media (max-width: 641px) {
	#lead .note ul { max-width: 90%; margin: 0 auto;}
}
@media (max-width: 481px) {
	#lead .inner-sct { padding: 120px 0 20px;}
	#lead .ttl { margin: 0 auto 30px;}
	#lead .ttl .row1 { margin-bottom: 10px; height: 60px;}
	#lead .ttl .row1 .inner { padding-right: 30px;}
	#lead .ttl .row1 .char { margin-right: 4px;}
	#lead .ttl .row1 .char img { height: 60px;}
	#lead .ttl .row2 { height: 50px;}
	#lead .ttl .row2 .inner { padding-left: 30px;}
	#lead .ttl .row2 .char { margin-right: 2px;}
	#lead .ttl .row2 .char img { height: 50px;}
	#lead .ctn h3 { font-size: 24px; letter-spacing: 0.05rem;}
	#lead .ctn p { margin-bottom: 30px; font-size: 15px;}
}


#point { position: relative; margin-bottom: -120px; padding-bottom: 80px; z-index: 3;}
#point:before,
#point:after { content: ''; display: block; width: 100%; max-width: 1280px; height: 120px; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);}
#point:before{ background: url('../../img/color/top/wave-2.png') repeat-x 0% 100%; z-index: 2;}
#point:after { background: url('../../img/color/top/wave-1.png') repeat-x 50% 100%; animation: 8.0s waves linear infinite;}
#point .bg { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;
 background: linear-gradient(-8deg,
 #f8ddf0 4%, #f8ddf0 8%,#e5f9ff 15%,#f0f7e6 20%,
 #f8ddf0 25%, #f8ddf0 28%,#e5f9ff 35%,#f0f7e6 40%,
 #f8ddf0 45%, #f8ddf0 48%,#e5f9ff 55%,#f0f7e6 60%,
 #f8ddf0 65%, #f8ddf0 68%,#e5f9ff 75%,#f0f7e6 80%,
 #f8ddf0 85%, #f8ddf0 88%,#e5f9ff 95%,#f0f7e6 100%);
}

#point .bg:after { content: ''; display: block; width: 100%; height: 120px; position: absolute; left: 0; bottom: -40px; z-index: 5;
 background: url('../../img/color/top/wave-2.png') repeat-x 50% 100%; animation: 24.0s waves linear infinite;
}

#point .inner-sct { padding: 85px 0 100px; background: url('../../img/color/top/bg-flower.png') no-repeat 50% 0;}
#point .box { position: relative; width: 90%; max-width: 800px; margin: 0 auto 150px; padding: 60px 0 80px; background: rgba(255,255,255,0.7); box-shadow: 0 0 20px  rgba(130,120,130,0.35);}
#point .box:after { content: ''; display: block; width: 100%; height: 80px; background: url('../../img/color/top/arw.png') no-repeat 50% 50% / auto 100%;
 position: absolute; left: 0; bottom: -40px;
}
#point .box h3 { margin-bottom: 35px; color: #582e87; font-size: 23px; line-height: 1.4; text-align: center;}
#point .box h3 img { display: block; width: 90%; max-width: 600px; margin: 0 auto 30px;}
#point .box h3 span{ font-size: 27px;}
#point .box h3 em { font-size: 32px;}
#point .box ul { width: 82%; max-width: 360px; margin: 0 auto 40px;}
#point .box ul li { position: relative; margin-bottom: 25px; padding-left: 35px; background: linear-gradient(transparent 60%, #fce1f7 60%);
 color: #b252b1; font-size: 20px; font-weight: 700; letter-spacing: 0.15rem; line-height: 1.4;
}
#point .box ul li:last-child { margin-bottom: 0px;}
#point .box ul li:before { content: ''; display: block; width: 21px; height: 18px; background: url('../../img/color/top/check.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
}
#point .box p { color: #582e87; font-size: 20px; font-weight: 700; letter-spacing: 0.04rem; text-align: center;}
@media (max-width: 801px) {
	#point .box { margin: 0 auto 80px;}
}
@media (max-width: 641px) {
	#point { margin-bottom: -120px; padding-bottom: 100px;}
	#point:before,
	#point:after { height: 90px; bottom: 10px;}
	#point:before{ background: url('../../img/color/top/wave-2-sp.png') repeat-x 210% 0% / 120% 80%;}
	#point:after { background: url('../../img/color/top/wave-1-sp.png') repeat-x 50% 100% / 800px auto; animation: 9.0s wavesSp linear infinite;}
	#point .box { padding: 30px 0 50px;}
	#point .box h3 { font-size: 20px;}
	#point .box h3 img { margin: 0 auto 24px;}
	#point .box h3 span{ font-size: 20px;}
	#point .box h3 em { font-size: 23px;}
	#point .box p { font-size: 18px;}
	#point .wave{ bottom: 10px;}
}
@media (max-width: 481px) {
	#point { margin-bottom: -80px; padding-bottom: 60px;}
	#point:before,
	#point:after { height: 60px;}
	#point .inner-sct { padding: 60px 0 80px; background-size: auto 100px; background-position: 5% 0;}
	#point .box { margin: 0 auto 50px; padding: 20px 0 40px; box-shadow: 0 0 12px rgba(130,120,130,0.35);}

	#point .box:after { height: 50px; bottom: -30px;}
	#point .box h3 { margin-bottom: 25px;}
	#point .box ul li { margin-bottom: 18px; padding-left: 30px; font-size: 15px; letter-spacing: 0.1rem;}
	#point .box ul li:before { width: 18px; height: 16px;}
	#point .box p { font-size: 14px;}
}


#point .ttl { margin-bottom: 20px; text-align: center;}
#point .ttl img { width: 68%; max-width: 420px;}
#point p.read { margin-bottom: 30px; color: #3a3a3a; font-size: 16px; font-weight: 700; text-align: center;}
#point .bloc { position: relative; width: 100%;}
#point .bloc .circle { position: absolute; width: 100%; top: 300px; left: 0; transition: 0.4s linear; z-index: 10;}
#point .bloc.fixed .circle { position: fixed;}
#point .bloc .circle .inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#point .bloc .circle .space { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 80%; max-width: 430px; transition: 0.6s linear;}
#point .bloc .circle .space .icn { position: relative; width: 100%; padding-top: 100%; transition: 1.0s linear; opacity: 0; transform: rotate(-180deg);}
#point .bloc .circle .space .icn div { width: 40%; max-width: 168px; padding-top: 100%; position: absolute; left: 50%; top: 50%;}
#point .bloc .circle .space .icn div:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg);}
#point .bloc .circle .space .icn div:nth-child(2) { transform: translate(-50%,-50%) rotate(90deg);}
#point .bloc .circle .space .icn div:nth-child(3) { transform: translate(-50%,-50%) rotate(180deg);}
#point .bloc .circle .space .icn div:nth-child(4) { transform: translate(-50%,-50%) rotate(270deg);}
#point .bloc .circle .space .icn div img { position: absolute; bottom: 0; left: 0; width: 100%; transition: 1.0s linear;}
#point .bloc .circle .space .icn div:nth-child(1) img { transform: translateY(-100px) rotate(0deg);}
#point .bloc .circle .space .icn div:nth-child(2) img { transform: translateY(-100px) rotate(-90deg);}
#point .bloc .circle .space .icn div:nth-child(3) img { transform: translateY(-100px) rotate(-180deg);}
#point .bloc .circle .space .icn div:nth-child(4) img { transform: translateY(-100px) rotate(90deg);}

#point .bloc .circle.point0 .space .icn { opacity: 1; transform: rotate(180deg);}
#point .bloc .circle.point0 .space .icn div:nth-child(1) img { transform: translateY(0px) rotate(180deg);}
#point .bloc .circle.point0 .space .icn div:nth-child(2) img { transform: translateY(0px) rotate(90deg);}
#point .bloc .circle.point0 .space .icn div:nth-child(3) img { transform: translateY(0px) rotate(0deg);}
#point .bloc .circle.point0 .space .icn div:nth-child(4) img { transform: translateY(0px) rotate(270deg);}
#point .bloc .circle.point1 { top: 120px;}
#point .bloc .circle.point1 .space { width: 200px; left: 120px; transform: translateX(0%);}
#point .bloc .circle.point1 .space .icn { opacity: 1; transform: rotate(540deg);}
#point .bloc .circle.point1 .space .icn div:nth-child(1) img { transform: translateY(0px) rotate(180deg); opacity: 1;}
#point .bloc .circle.point1 .space .icn div:nth-child(2) img { transform: translateY(0px) rotate(90deg); opacity: 0.6;}
#point .bloc .circle.point1 .space .icn div:nth-child(3) img { transform: translateY(0px) rotate(0deg); opacity: 0.6;}
#point .bloc .circle.point1 .space .icn div:nth-child(4) img { transform: translateY(0px) rotate(270deg); opacity: 0.6;}
#point .bloc .circle.point2 { top: 120px;}
#point .bloc .circle.point2 .space { width: 200px; left: 120px; transform: translateX(0%);}
#point .bloc .circle.point2 .space .icn { opacity: 1; transform: rotate(630deg);}
#point .bloc .circle.point2 .space .icn div:nth-child(1) img { transform: translateY(0px) rotate(90deg); opacity: 0.6;}
#point .bloc .circle.point2 .space .icn div:nth-child(2) img { transform: translateY(0px) rotate(0deg); opacity: 0.6;}
#point .bloc .circle.point2 .space .icn div:nth-child(3) img { transform: translateY(0px) rotate(-90deg); opacity: 0.6;}
#point .bloc .circle.point2 .space .icn div:nth-child(4) img { transform: translateY(0px) rotate(180deg); opacity: 1;}
#point .bloc .circle.point3 { top: 120px;}
#point .bloc .circle.point3 .space { width: 200px; left: 120px; transform: translateX(0%);}
#point .bloc .circle.point3 .space .icn { opacity: 1; transform: rotate(720deg);}
#point .bloc .circle.point3 .space .icn div:nth-child(1) img { transform: translateY(0px) rotate(0deg); opacity: 0.6;}
#point .bloc .circle.point3 .space .icn div:nth-child(2) img { transform: translateY(0px) rotate(-90deg); opacity: 0.6;}
#point .bloc .circle.point3 .space .icn div:nth-child(3) img { transform: translateY(0px) rotate(-180deg); opacity: 1;}
#point .bloc .circle.point3 .space .icn div:nth-child(4) img { transform: translateY(0px) rotate(90deg); opacity: 0.6;}
#point .bloc .circle.point4 { top: 120px;}
#point .bloc .circle.point4 .space { width: 200px; left: 120px; transform: translateX(0%);}
#point .bloc .circle.point4 .space .icn { opacity: 1; transform: rotate(810deg);}
#point .bloc .circle.point4 .space .icn div:nth-child(1) img { transform: translateY(0px) rotate(-90deg); opacity: 0.6;}
#point .bloc .circle.point4 .space .icn div:nth-child(2) img { transform: translateY(0px) rotate(-180deg); opacity: 1;}
#point .bloc .circle.point4 .space .icn div:nth-child(3) img { transform: translateY(0px) rotate(-270deg); opacity: 0.6;}
#point .bloc .circle.point4 .space .icn div:nth-child(4) img { transform: translateY(0px) rotate(0deg); opacity: 0.6;}


#point .ctn { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: 0.3s linear;}
#point .bloc.fixed .ctn { position: fixed;}
#point .ctn.show { opacity: 1;}
#point .ctn-inner { width: 100%; max-width: 1280px; min-height: 820px; margin: 0 auto; padding-top: 80px;}
#point #point-1 .ctn-inner { background: url('../../img/color/top/side-txt-1.png') no-repeat 0 100% / 72px auto;}
#point #point-2 .ctn-inner { background: url('../../img/color/top/side-txt-2.png') no-repeat 0 100% / 72px auto;}
#point #point-3 .ctn-inner { background: url('../../img/color/top/side-txt-3.png') no-repeat 0 100% / 72px auto;}
#point #point-4 .ctn-inner { background: url('../../img/color/top/side-txt-4.png') no-repeat 0 100% / 72px auto;}
#point .ctn .spacer { height: 540px;}
#point .ctn .ctn-flex { display: flex; flex-direction: row-reverse; width: 90%; max-width: 850px; margin: 0 auto;}
#point .ctn .fig { width: 50%;}
#point .ctn .txt { width: 50%;}
#point .ctn .fig figure { text-align: center;}
#point .ctn .fig figure img { width: 100%;}
#point .ctn .txt .tit { position: relative; width: 100%; margin-bottom: 10px;}
#point .ctn .txt .tit:before { content: ''; display: block; width: 100%; height: 150px; opacity: 0.1; background: url('../../img/color/top/icn-2.png') no-repeat 50% 50% / auto 100%;}
#point .ctn .txt .tit h3 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; color: #e255ab; font-size: 22px; line-height: 1.25; text-align: center;}
#point .ctn .txt .tit h3 span { font-size: 28px;}
#point .ctn .txt .tit h3 sub { font-size: 12px;}
#point .ctn .txt p { margin-bottom: 20px; color: #5c322f; font-size: 16px;}
#point .ctn .txt p sub { font-size: 10px; vertical-align: baseline;}
#point .ctn .txt ul.memo { color: #8d6663;}
#point .ctn .txt ul.memo li { font-size: 10px; line-height: 1.4;}
@media (min-width: 1001px) and (max-height: 700px) {
	#point .bloc .circle { top: 240px;}
	#point .bloc .circle.point1 { top: 60px;}
	#point .bloc .circle.point2 { top: 60px;}
	#point .bloc .circle.point3 { top: 60px;}
	#point .bloc .circle.point4 { top: 60px;}
	#point .ctn-inner { padding-top: 20px;}
}
@media (max-width: 1001px) {
	#point .bloc .circle.point1 .space { left: 20px;}
	#point .bloc .circle.point2 .space { left: 20px;}
	#point .bloc .circle.point3 .space { left: 20px;}
	#point .bloc .circle.point4 .space { left: 20px;}
	#point .ctn .txt .tit h3 { font-size: 2.4vw;}
	#point .ctn .txt .tit h3 span { font-size: 3.0vw;}
}
@media (max-width: 801px) {
	#point p.read span { display: block;}
	#point .bloc .circle{ top: 320px;}
	#point .bloc .circle.point1 { top: 160px;}
	#point .bloc .circle.point1 .space { width: 160px; left: 20px;}
	#point .bloc .circle.point2 { top: 160px;}
	#point .bloc .circle.point2 .space { width: 160px; left: 20px;}
	#point .bloc .circle.point3 { top: 160px;}
	#point .bloc .circle.point3 .space { width: 160px; left: 20px;}
	#point .bloc .circle.point4 { top: 160px;}
	#point .bloc .circle.point4 .space { width: 160px; left: 20px;}
	#point .ctn .txt .tit:before { height: 100px;}
	#point .ctn .txt p { font-size: 14px;}
}
@media (max-width: 641px) {
	#point .bloc .circle.point1 { top: 240px;}
	#point .bloc .circle.point2 { top: 240px;}
	#point .bloc .circle.point3 { top: 240px;}
	#point .bloc .circle.point4 { top: 240px;}

	#point #point-1 .ctn-inner { background-size: 60px auto;}
	#point #point-2 .ctn-inner { background-size: 60px auto;}
	#point #point-3 .ctn-inner { background-size: 60px auto;}
	#point #point-4 .ctn-inner { background-size: 60px auto;}

	#point .ctn .ctn-flex { display: block;}
	#point .ctn .fig { width: 100%; margin-bottom: 20px; padding-left: 160px;}
	#point .ctn .txt { width: 94%; margin: 0 auto; padding-left: 10px;}
	#point .ctn .txt .tit:before { display: inline-block; width: 58px; height: 60px; margin-right: 8px; opacity: 1; vertical-align: text-top;}
	#point .ctn .txt .tit h3 { position: relative; left: auto; top: auto; transform: translateY(0%); width: auto; display: inline-block;
	 font-size: 3.0vw; vertical-align: text-top; text-align: left;
	}
	#point .ctn .txt .tit h3 span { font-size: 3.6vw;}
	#point .ctn .txt .tit h3 br.pc { display: none;}
	#point .ctn .txt p { margin-bottom: 8px;}
}
@media (max-width: 481px) {
	#point .ttl { margin-bottom: 12px;}
	#point p.read { margin-bottom: 16px; font-size: 14px; line-height: 1.4;}

	#point .bloc { overflow: hidden;}
	#point .bloc .circle { top: 200px;}
	#point .bloc .circle.point1 { top: 190px;}
	#point .bloc .circle.point1 .space { left: 15px; width: 120px;}
	#point .bloc .circle.point2 { top: 190px;}
	#point .bloc .circle.point2 .space { left: 15px; width: 120px;}
	#point .bloc .circle.point3 { top: 190px;}
	#point .bloc .circle.point3 .space { left: 15px; width: 120px;}
	#point .bloc .circle.point4 { top: 190px;}
	#point .bloc .circle.point4 .space { left: 15px; width: 120px;}

	#point .ctn .spacer { height: 340px;}
	#point .ctn-inner { min-height: 620px; padding-top: 20px;}
	#point #point-1 .ctn-inner { background-size: 32px auto;}
	#point #point-2 .ctn-inner { background-size: 32px auto;}
	#point #point-3 .ctn-inner { background-size: 32px auto;}
	#point #point-4 .ctn-inner { background-size: 32px auto;}

	#point .ctn .fig { margin-bottom: 12px; padding-left: 125px;}
	#point .ctn .txt .tit { margin-bottom: 8px;}
	#point .ctn .txt .tit:before { width: 26px; height: 28px; margin-right: 2px;}
	#point .ctn .txt .tit h3 { font-size: 13px;}
	#point .ctn .txt .tit h3 span { font-size: 18px;}
	#point .ctn .txt .tit h3 sub { font-size: 10px;}
	#point .ctn .txt p { margin-bottom: 0px; font-size: 12px; line-height: 1.4;}
}


#illucent { position: relative;}
#illucent .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 160px 0 40px; padding-left: 600px;
 background: linear-gradient(30deg,#d4d3d5,#f8f8f8,#dad6db);
}
#illucent .inner-sct:before { content: ''; display: block; width: 540px; height: 100%; position: absolute; left: 0; bottom: 0;
 background: url('../../img/color/top/img.jpg') no-repeat 90% 100% / cover;
}
#illucent .ctn { width: 100%; max-width: 500px;}
#illucent .ctn h2 { margin-bottom: 15px; color: #e255ab; font-size: 32px;}
#illucent .ctn .tit { margin-bottom: 20px; padding-top: 20px; border-top: solid 1px #e255ab; background: url('../../img/color/top/logo-illu.png') no-repeat 100% 50% / 180px auto;}
#illucent .ctn .tit h3 { color: #582e87; font-size: 25px; line-height: 1.4;}
#illucent .ctn .tit h3 span { display: block; font-size: 20px;}
#illucent .ctn p { color: #3a3a3a; line-height: 1.68;}
@media (max-width: 1281px) {
	#illucent .inner-sct { padding-left: 46%; padding-right: 40px;}
	#illucent .inner-sct:before { width: 42%;}
}
@media (max-width: 1001px) {
	#illucent .ctn h2 { font-size: 3.2vw;}
	#illucent .ctn .tit h3 { font-size: 2.5vw;}
	#illucent .ctn .tit h3 span { font-size: 2.0vw;}
	#illucent .ctn p { font-size: 14px;}
}
@media (max-width: 801px) {
	#illucent .inner-sct { padding: 140px 20px 30px; padding-left: 40%;}
	#illucent .inner-sct:before { width: 36%;}
}
@media (max-width: 641px) {
	#illucent .ctn h2 { margin-bottom: 6px; font-size: 4.2vw;}
	#illucent .ctn .tit { margin-bottom: 20px; padding-top: 12px; background-size: 120px auto;}
	#illucent .ctn .tit h3 { font-size: 3.4vw;}
	#illucent .ctn .tit h3 span { font-size: 2.8vw;}
	#illucent .ctn p span { display: block;}
}
@media (max-width: 481px) {
	#illucent .inner-sct { padding: 90px 20px 30px; padding-left: 40%;}
	#illucent .inner-sct:before { background-size: auto 100%;}
	#illucent .ctn h2 { margin-bottom: 6px; font-size: 16px;}
	#illucent .ctn .tit { margin-bottom: 10px; padding-top: 12px; background-size: 65px auto;}
	#illucent .ctn .tit h3 { font-size: 13px;}
	#illucent .ctn .tit h3 span { font-size: 11px;}
	#illucent .ctn p { font-size: 12px; line-height: 1.4;}
}


#step { position: relative; margin-bottom: -100px; z-index: 2;}
#step:before,
#step:after { content: ''; display: block; width: 100%; max-width: 1280px; height: 120px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
#step:before{ background: url('../../img/color/top/wave-2.png') repeat-x 50% 100%; animation: 10.0s waves linear infinite;}
#step:after { background: url('../../img/color/top/wave-1.png') repeat-x 50% 100%; animation: 8.0s waves linear infinite;}
#step .bg { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: url('../../img/color/top/bg-step.png') no-repeat 50% 100% / 1280px auto; z-index: 2;}
#step .inner-sct { position: relative; width: 92%; margin: 0 auto; padding: 180px 0 100px; /* padding: 100px 0px; */}
#step h2 { margin-bottom: 20px; text-align: center;}
#step h2 img { width: 68%; max-width: 420px;}
#step p.read { color: #3a3a3a; font-size: 16px; font-weight: 700; text-align: center;}
#step p.read span { display: block;}
#step ol { width: 100%; max-width: 800px; margin: 0 auto;}
#step ol li { padding: 40px 0;}
#step ol li:nth-child(1) { margin-bottom: -40px; padding-left: 220px; background: url('../../img/color/top/item-shampoo.png') no-repeat 0 50% / 220px auto;}
#step ol li:nth-child(2) { margin-bottom: -40px; padding-right: 220px; background: url('../../img/color/top/item-treatment.png') no-repeat 100% 50% / 220px auto;}
#step ol li:nth-child(3) { margin-bottom: -40px; padding-left: 220px; background: url('../../img/color/top/item-harimilk.png') no-repeat 0 50% / 240px auto;}
#step ol li:nth-child(4) { padding-right: 220px; background: url('../../img/color/top/item-harioil.png') no-repeat 100% 50% / 240px auto;}
#step ol li dl { width: 100%; max-width: 280px;}
#step ol li:nth-child(2) dl,
#step ol li:nth-child(4) dl { margin: 0 0 0 auto;}
#step ol li dl dt { margin-bottom: 6px; padding-bottom: 10px; border-bottom: solid 1px #582e87; color: #e255ab; font-size: 12px; font-weight: 700; line-height: 1.4;}
#step ol li dl dt img { display: block; width: 90px; margin: 0 0 30px;}
#step ol li dl dt span{ display: inline-block; font-size: 16px;}
#step ol li dl dt span.min { font-size: 18px; margin-right: 10px;}
#step ol li dl dd.name { margin-bottom: 20px; color: #582e87; font-size: 27px; font-weight: 700; line-height: 1.4;}
#step ol li dl dd.aroma img { width: 100%; border-radius: 20px;}
#step .note ul { max-width: 310px;}
@media (max-width: 641px) {
	#step { margin-bottom: -60px;}
	#step:before,
	#step:after { height: 106px; bottom: -20px;}
	#step:before{ background: url('../../img/color/top/wave-2-sp.png') repeat-x 50% 0% / 800px 90%; animation: 10.0s wavesSp linear infinite;}
	#step:after { background: url('../../img/color/top/wave-1-sp.png') repeat-x 50% 0% / 800px 95%; animation: 8.0s wavesSp linear infinite;}
	#step .bg { background: url('../../img/color/top/bg-step-sp.png') no-repeat 50% 100% / 100% auto;}
	#step .inner-sct { /* padding: 160px 0 80px; */ padding: 80px 0px;}
	#step ol li:nth-child(1) { margin-bottom: -20px; padding-left: 180px; background-size: 200px auto;}
	#step ol li:nth-child(2) { margin-bottom: -20px; padding-right: 180px; background-size: 200px auto;}
	#step ol li:nth-child(3) { margin-bottom: -20px; padding-left: 180px; background-size: 200px auto;}
	#step ol li:nth-child(4) { padding-right: 180px; background-size: 200px auto;}
	#step .wave { bottom: -20px;}
}
@media (max-width: 481px) {
	#step { margin-bottom: -40px;}
	#step .inner-sct { width: 94%;/* padding: 100px 0 60px;*/  padding: 60px 0px;}
	#step h2 { margin-bottom: 12px;}
	#step p.read { font-size: 12px;}
	#step ol li:nth-child(1) { padding-left: 140px; background-size: 140px auto;}
	#step ol li:nth-child(2) { padding-right: 120px; background-size: 140px auto;}
	#step ol li:nth-child(3) { padding-left: 100px; background-position: -30px 50%; background-size: 160px auto;}
	#step ol li:nth-child(4) { padding-right: 120px; background-size: 160px auto;}
	#step ol li dl { max-width: 210px; margin: 0 auto;}
	#step ol li:nth-child(4) dl { max-width: 220px;}
	#step ol li dl dt { margin-bottom: 4px; padding-bottom: 6px; font-size: 10px;}
	#step ol li dl dt img { width: 60px; margin: 0 0 8px;}
	#step ol li dl dt span { font-size: 16px; letter-spacing: -0.05rem;}
	#step ol li dl dd.name { margin-bottom: 10px; font-size: 20px;}
	#step .note ul { max-width: 94%; margin: 0 auto;}
}


#lineup { background: url('../../img/color/top/bg-lineup.jpg') no-repeat 50% 100% / 1280px auto;}
#lineup .inner-sct { position: relative; width: 100%; max-width: 1000px; height: 850px; margin: 0 auto; padding-top: 150px;}
#lineup h2 { color: #582e87; font-size: 40px; text-align: center;}
#lineup h2 img { width: 68%; max-width: 420px;}
#lineup h2 span { display: block;}
#lineup .btn { position: absolute; width: 100%; bottom: 60px;}
@media (max-width: 641px) {
	#lineup { background: url('../../img/color/top/bg-lineup-sp.jpg') no-repeat 50% 100% / 100% auto;}
	#lineup .inner-sct { height: 124vw; padding-top: 18vw;}
	#lineup h2 { font-size: 6.0vw;}
	#lineup .btn { bottom: 40px;}
}



#series {}
#series .bg { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: linear-gradient(96deg, #ead3f5, #eedcee 30%, #e9cef0 45%, #efeaf2 70%, #eedcee);}
#series .bg:before{ content: ''; display: block; width: 100%; height: 200px; position: absolute; top: 0; left: 0;
 background-image: url('../../img/color/top/bg-series-L.png'), url('../../img/color/top/bg-series-R.png');
 background-repeat: no-repeat, no-repeat;
 background-position: 0% 0%, 100% 0%;
 background-size: auto 100%, auto 100%;
}
#series .inner-sct { width: 94%; max-width: 1200px; margin: 0 auto; padding: 100px 0;}
#series h2 { margin-bottom: 50px; text-align: center;}
#series h2 img { width: 68%; max-width: 420px;}
#series h3 { margin-bottom: 30px; color: #582e87; font-size: 30px; text-align: center;}

#series .check ul.btn-1 li,
#series .check ul.btn-2 li { display: inline-block; width: 33%; padding: 0 8px;}
#series .check ul.btn-1 li:nth-child(3) { display: none;}
#series .check ul.btn-1 li a,
#series .check ul.btn-2 li a { display: block;}
#series .check ul.btn-1 li a:hover,
#series .check ul.btn-2 li a:hover { opacity: 0.8;}
#series .check ul.btn-1 li a img,
#series .check ul.btn-2 li a img { width: 100%;}
#series .check ul.btn-1 li a img.sp,
#series .check ul.btn-2 li a img.sp { display: none;}
#series .check ul.btn-2 {}

@media (max-width: 801px) {
	#series .inner-sct { width: 100%;}
}
@media (max-width: 641px) {
	#series .bg:before{ height: 120px;}
	#series .check h3 { margin-bottom: 20px; font-size: 5.0vw;}
	#series .check ul.btn-1,
	#series .check ul.btn-2 { width: 78%; margin: 0 auto;}
	#series .check ul.btn-1 li,
	#series .check ul.btn-2 li { display: block; width: 100%; padding: 0px;}
	#series .check ul.btn-1 li:nth-child(3) { display: block;}
	#series .check ul.btn-2 li:nth-child(2) { display: none;}
	#series .check ul.btn-1 li a img.pc,
	#series .check ul.btn-2 li a img.pc { display: none;}
	#series .check ul.btn-1 li a img.sp,
	#series .check ul.btn-2 li a img.sp { display: block;}
}
@media (max-width: 481px) {
	#series .inner-sct { padding: 50px 0;}
	#series h2 { margin-bottom: 30px;}
	#series .check h3 { margin-bottom: 8px; font-size: 21px;}
}


#shop { background: url('../../img/color/top/bg-shop.jpg') no-repeat 50% 50% / 1280px auto;}
#shop .inner-sct { width: 92%; margin: 0 auto; padding: 100px 0;}
#shop h2 { margin-bottom: 30px; text-align: center;}
#shop h2 img { display: block; width: 68%; max-width: 420px; margin: 0 auto 8px;}
#shop h2 span{ display: block; color: #582e87; font-size: 32px; letter-spacing: 0.1rem;}
#shop h3 { color: #3a3a3a; font-size: 27px; text-align: center; text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;}
#shop p { margin-bottom: 40px; color: #3a3a3a; font-size: 15px; text-align: center;}
@media (max-width: 641px) {
	#shop { background-size: cover;}
	#shop h3 { font-size: 4.2vw;}
}
@media (max-width: 481px) {
	#shop .inner-sct { padding: 40px 0;}
	#shop h2 { margin-bottom: 20px;}
	#shop h2 span{ font-size: 18px;}
	#shop h3 { font-size: 18px;}
	#shop h3 span { display: block;}
	#shop p { margin-bottom: 30px; font-size: 10px;}
}