@charset "utf-8";
/* body {
	overflow: hidden;
} */
/* setting of animation  */
@keyframes shiny-btn1 {
   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 shake {
   0% { transform: translateY(0px);}
  50% { transform: translateY(8px);}
 100% { transform: translateY(0px);}
}

@keyframes big-circle {
	 0% { transform: rotate(0deg);}
 100% { transform:rotate(360deg);}
}
@keyframes circle-sp {
	 0% { transform: rotate(0deg);}
 100% { transform: rotate(360deg);}
}
@keyframes circle1 {
	 0% { transform: rotate(0deg);}
 100% { transform: rotate(-360deg);}
}
@keyframes circle2 {
	 0% { transform: rotate(324deg);}
 100% { transform: rotate(-36deg);}
}
@keyframes circle3 {
	 0% { transform: rotate(288deg);}
 100% { transform: rotate(-72deg);}
}
@keyframes circle4 {
	 0% { transform: rotate(252deg);}
 100% { transform: rotate(-108deg);}
}
@keyframes circle5 {
	 0% { transform: rotate(216deg);}
 100% { transform: rotate(-144deg);}
}
@keyframes circle6 {
	 0% { transform: rotate(180deg);}
 100% { transform: rotate(-180deg);}
}
@keyframes circle7 {
	 0% { transform: rotate(144deg);}
 100% { transform: rotate(-216deg);}
}
@keyframes circle8 {
	 0% { transform: rotate(108deg);}
 100% { transform: rotate(-252deg);}
}
@keyframes circle9 {
	 0% { transform: rotate(72deg);}
 100% { transform: rotate(-288deg);}
}

@keyframes circle10{
	 0% { transform: rotate(36deg);}
 100% { transform: rotate(-324deg);}
}

@keyframes package-move {
	 0% { opacity: 0;}
	20% { opacity: 0.2}
	50% { opacity: 0.8;}
	88% { transform: translate(-50%,0); opacity: 1;}
 100% { transform: translate(-50%,0); opacity: 0;}
}
@keyframes package-show {
	 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes pulsate {
   0% { transform: translate(-50%,0%) scale(0.75); opacity: 0;}
  50% { transform: translate(-50%,0%) scale(0.9); opacity: 1;}
 100% { transform: translate(-50%,0%) scale(1.08); opacity: 0;}
}
@keyframes move-in {
 100% { transform: translate(0px,0px); opacity: 1;}
}
@keyframes move-in-sp {
 100% { transform: translate(0px,-50%); opacity: 1;}
}

@media (max-width: 641px) {
	.btn-cart {  right: 12px; top: 60px;}
}
@keyframes slideIn{
	20%{ opacity: 1;}
	100%{ transform: translateX(0px); opacity: 1;}
}
@keyframes open-news{
	20%{ opacity: 1;}
	100%{ width: 100%;}
}

@media (max-width: 768px) {
	.pc-only{ display: none!important; }
}
@media (min-width: 769px) {
	.sp-only{ display: none!important; }
}

#container { background: #d4f9f0;}

/* #loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 100; background: #ffc400;}
#loading .inner { position: relative; width: 100%; height: 100%; overflow: hidden;}
#loading #progress { position: absolute; left: 0; top: 0; width: 100%; height: 100vh;}
#loading #progress svg { display: none; width: 100%; position: absolute; left: 0; top: 0;}
#loading #progress .progressbar-text { font-size: 40px;}
#loading .logo { position: absolute; width: 100%; height: 100vh; left: 0; top: 0; background: #fff; z-index: 2; opacity: 0;
 mask-image: url('../img/logo-mask.svg'); mask-repeat: no-repeat; mask-position: 50% 300px; mask-size: 340px;
 -webkit-mask-image: url('../img/logo-mask.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 300px; -webkit-mask-size: 340px;
}
#loading .mask { width: 100%;  height: 100vh; overflow: hidden; margin: 0 auto; z-index: 1;}
#loading .mask img { width: 100%; opacity: 0;
 mask-image: url('../img/logo-mask.svg'); mask-repeat: no-repeat; mask-position: 50% 300px; mask-size: 340px;
 -webkit-mask-image: url('../img/logo-mask.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 300px; -webkit-mask-size: 340px;
}
#loading .mask-sp { display: block; width: 100%; max-width: 1280px; height: 100vh; overflow: hidden; margin: 0 auto; z-index: 1;}
#loading.start #progress { opacity: 0;}
#loading.start .logo { animation: zoom1 4.0s ease 0.4s forwards; -webkit-animation: zoom1 4.0s ease 0.4s forwards;}
#loading.start .mask img { animation: zoom2 4.0s ease 0.4s forwards; -webkit-animation: zoom2 4.0s ease 0.4s forwards;} */
@keyframes zoom1{
	  0% { mask-size: 340px; mask-position: 50% 300px;}
	 10% { opacity: 1;}
	 30% { opacity: 1;}
	 80% { opacity: 0;}
	100% { mask-size: 2000px; mask-position: 50% -400px; opacity: 0;}
}
@-webkit-keyframes zoom1{
	  0% { -webkit-mask-size: 340px; -webkit-mask-position: 50% 300px;}
	 10% { opacity: 1;}
	 30% { opacity: 1;}
	 80% { opacity: 0;}
	100% { -webkit-mask-size: 2000px; -webkit-mask-position: 50% -400px; opacity: 0;}
}
@keyframes zoom2{
	  0% { opacity: 0; mask-size: 340px; mask-position: 50% 300px;}
	 30% { opacity: 1;}
	100% { mask-size: 2000px; mask-position: 50% -400px; opacity: 1;}
}
@-webkit-keyframes zoom2{
	  0% { opacity: 0; -webkit-mask-size: 340px; -webkit-mask-position: 50% 300px;}
	 30% { opacity: 1;}
	100% { -webkit-mask-size: 2000px; -webkit-mask-position: 50% -400px; opacity: 1;}
}
@media (max-width: 641px) {
	#loading .logo { mask-position: 50% 240px; -webkit-mask-position: 50% 240px; mask-size: 200px; -webkit-mask-size: 200px;}
	#loading .mask { display: none;}
	#loading .mask-sp { display: block;}
	#loading .mask-sp img { width: 100%; mask-image: url('../img/logo-mask.svg'); mask-repeat: no-repeat; mask-position: 50% 240px; mask-size: 200px; opacity: 0;
	 -webkit-mask-image: url('../img/logo-mask.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 240px; -webkit-mask-size: 200px; }
	#loading.start .logo { animation: zoom1sp 4.0s ease 0.4s forwards; -webkit-animation: zoom1sp 4.0s ease 0.4s forwards;}
	#loading.start .mask-sp img { animation: zoom2sp 4.0s ease 0.4s forwards; -webkit-animation: zoom2sp 4.0s ease 0.4s forwards;}
}
@keyframes zoom1sp{
	  0% { mask-size: 200px; mask-position: 50% 240px;}
	 10% { opacity: 1;}
	 30% { opacity: 1;}
	 80% { opacity: 0;}
	100% { mask-size: 1500px; mask-position: 50% -200px; opacity: 0;}
}
@-webkit-keyframes zoom1sp{
		0% { mask-size: 200px; mask-position: 50% 240px; -webkit-mask-size: 200px; -webkit-mask-position: 50% 240px;}
	 10% { opacity: 1;}
	 30% { opacity: 1;}
	 80% { opacity: 0;}
	100% { mask-size: 1500px; mask-position: 50% -200px; -webkit-mask-size: 1500px; -webkit-mask-position: 50% -200px; opacity: 0;}
}
@keyframes zoom2sp{
	  0% { opacity: 0; mask-size: 200px;; mask-position: 50% 240px;}
	 30% { opacity: 1;}
	100% { mask-size: 1500px; mask-position: 50% -200px; opacity: 1;}
}
@-webkit-keyframes zoom2sp{
	  0% { opacity: 0; mask-size: 200px;; mask-position: 50% 240px; -webkit-mask-size: 200px; -webkit-mask-position: 50% 240px;}
	 30% { opacity: 1;}
	100% { mask-size: 1500px; mask-position: 50% -200px; -webkit-mask-size: 1500px; -webkit-mask-position: 50% -200px; opacity: 1;}
}




.wrap-index { position: relative; z-index: 10;}



.sct { position: relative; z-index: 2;}
.sct .inner-sct { position: relative;}

.ttl h2 { color: #f69e03; font-size: 27px; font-weight: 500; line-height: 1; text-align: center;}
.ttl h2 img { width: 80%;}
.ttl h2 img.sp { display: none;}
.ttl h2 span { display: block; margin: 30px 0 0;}
.ttl p { color: #767676; font-size: 20px; letter-spacing: 0.1rem; text-align: center;}
@media (max-width: 641px) {
	.ttl h2 span { margin: 20px 0 0;}
	.ttl p { font-size: 16px;}
	.ttl p span { display: block;}
}
@media (max-width: 481px) {
	.ttl h2 { font-size: 20px;}
	.ttl h2 span { margin: 12px 0 0;}
	.ttl p { font-size: 14px;}
}

/* 
.spacer { width: 100%; height: 72vh;}
.fix-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; opacity: 1;}
.fix-bg.show { opacity: 1;}
.fix-bg .bg-1,
.fix-bg .bg-2,
.fix-bg .bg-3 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.fix-bg .bg-1 { z-index: 3;}
.fix-bg .bg-2 { z-index: 2;}
.fix-bg .bg-3 { z-index: 1;} */
/* .fix-bg .bg-1:before,
.fix-bg .bg-2:before,
.fix-bg .bg-3:before { content: ''; display: block; width: 100%;  margin: 0 auto; height: 1000px;}
.fix-bg .bg-1:before { background: url('../img/bg/bg-fix-1.jpg') no-repeat 50% 50%;}
.fix-bg .bg-2:before { background: url('../img/bg/bg-fix-2.jpg') no-repeat 50% 50%;}
.fix-bg .bg-3:before { background: url('../img/bg/bg-fix-3.jpg') no-repeat 50% 50%;} */
@media (min-width: 1401px) {
	.fix-bg .bg-1 { background-size: 100% auto;}
	.fix-bg .bg-2 { background-size: 100% auto;}
	.fix-bg .bg-3 { background-size: 100% auto;}
}
@media (max-width: 641px) {
	.spacer { height: 40vh;}
	.fix-bg .bg-1:before { background: url('../img/bg/bg-fix-1-sp.jpg') no-repeat 50% 0% / 100% auto;}
	.fix-bg .bg-2:before { background: url('../img/bg/bg-fix-2-sp.jpg') no-repeat 50% 0% / 100% auto;}
	.fix-bg .bg-3:before { background: url('../img/bg/bg-fix-3-sp.jpg') no-repeat 50% 0% / 100% auto;}
}
@media (max-width: 481px) {
	.spacer { height: 45vh;}
}



.note { width: 100%; /* transition: 1.2s ease; opacity: 0;*/}
.note ul { margin: 0 0 0 auto;}
.note ul li { color: #C08408; font-size: 10px !important; text-align: justify;}
.note.show { opacity: 1;}
@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
	.sct p.txt { font-size: 16px;}
}
@media (max-width: 801px) {
	.note { position: relative; width: 100%; margin: 0 auto; left: auto;}
	.note ul { width: 92%; margin: 0 auto; }
}
@media (max-width: 481px) {
	.note { transition: 0.8s ease;}
}



#kv-index { position: relative; margin-bottom: -10%;}
#kv-index .inner-kv { position: absolute; width: 100%; left: 0; top: 0; z-index: 4;}
#kv-index .ctn { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; padding-top: 10%;}
#kv-index .ctn h1 { width: 39%; text-align: center;}
#kv-index .ctn h1 img{ width: 79%;}	
#kv-index .ctn .icn-new { position: absolute; left: 27%; top: 27%; width: 10%; height: 30%; transition: 0.4s ease 0.8s; opacity: 1;}
#kv-index .ctn .icn-new .mask { width: 82%; height: 82%; 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-index .ctn .icn-new .mask::before { content: ''; display: block; width: 40px; height: 200px; background-color: #fff; position: absolute; top: -180px; left: 0;
 animation: shiny-btn1 3s ease-in-out infinite;
}
#kv-index .icn-new .inner { position: relative; width: 100%; overflow: hidden;}
#kv-index .icn-new .inner img { width: 100%;}
#kv-index .bg { position: relative; width: 100%;  margin: 0 auto; height: 0; padding-top: 53%; z-index: 3; background: url('../img/bg/kv.jpg') no-repeat top center / cover;}
@media(min-width: 1441px ){
	#kv-index .ctn .icn-new{ height: 27%; }
}
@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#kv-index .ctn { padding-top: 28vw;}
	
}
@media (max-width: 768px) {
	#kv-index .ctn h1{width: 100%; text-align: center;}
	#kv-index { margin-bottom: 0px;}
	#kv-index .ctn h1 img{width: 49%;}
	#kv-index .ctn .icn-new { width: 100px; height: 100px; top: 38%; left:67%;}
	#kv-index .inner-kv { position: relative; height: 0; padding-top: 72%;}
	#kv-index .bg { position: absolute; left: 0; top: 0; height: 0; padding-top: 172%; background: url('../img/bg/kv-sp.png') no-repeat 50% 0% / 100% auto;}
}
@media (max-width: 481px) {
	#kv-index .ctn .icn-new{width: 70px; height: 70px;}
}

#lead { position: relative; z-index: 2;}
#lead .bg { width: 100%;  margin: 0 auto; background: url('../img/bg/bg-1.png') no-repeat 50% 100% / cover; opacity: 0; transition: 0.4s linear;}
#lead .inner-sct { position: relative;}
#lead .ctn { position: relative; width: 100%; background: url('../img/bg/lead.png') no-repeat 50% 100% / cover;}
#lead .ctn h2 {width: 90%; max-width: 760px; margin: 0 auto;}
#lead .ctn h2 img { width: 86%;}
#lead .ctn .badge { width: 200px; position: absolute; right: 15%; top: 40px;}
#lead .ctn .badge img { width: 100%;}
#lead .txt { width: 90%; max-width: 760px; margin: 0 auto; padding: 60px 0 140px;}
#lead .txt p { color: #767676; font-size: 22px; font-weight: 600; letter-spacing: 0.2rem;}
#lead .txt p sub { font-size: 10px; vertical-align: baseline;}
#lead .note { position: absolute; right: 5%; bottom: 40px; max-width: 200px;}
#lead.show .bg { opacity: 1;  background: url('../img/bg/sec01_bg.png') no-repeat center center / cover; padding: 10% 0 12%;}
@media (max-width: 1001px) {
	#lead .ctn .badge { width: 160px; right: 10%; top: 80px;}
}
@media (max-width: 801px) {
	#lead .txt p { font-size: 2.85vw;}
}
@media (max-width: 641px) {
	#lead .bg { background: url('../img/bg/bg-1-sp.png') no-repeat 50% 100% / 100% auto;}
	#lead .ctn .badge { width: 140px; right: 8%; top: 60px;}
	#lead .txt { padding: 10vw 0 20vw;}
	#lead .txt p { font-size: 4.2vw;}
	#lead .txt p span { display: block;}
}
@media (max-width: 481px) {
	#lead .ctn h2 img { width: 100%;}
	#lead .ctn .badge { width: 80px; right: 4%; top: 40px;}
}


#care { position: relative; z-index: 3;}
#care .bg { width: 100%;  margin: 0 auto; background: url('../img/bg/point_bg.png') no-repeat 50% 50% / cover; padding: 16% 0 18%;}
#care .ctn-flex { display: flex; justify-content: space-between; transition: 0.4s linear;}
#care .txt { width: 50%;}
#care .fig { width: 50%;}
#care .txt h2 { margin-bottom: 40px; text-align: center;}
#care .txt h2 img { width: 95%;}
#care .txt p { font-size: 17px; letter-spacing: 0.1rem; text-align: center;}
#care .txt p sub { font-size: 10px; vertical-align: baseline;}
#care .txt p span{ display: block;}
#care .fig figure{ margin-bottom: 8px; text-align: center;}
#care .fig figure img { width: 100%;}
#care .fig .note {}
#care.show .ctn-flex { opacity: 1;}
@media (max-width: 768px) {
	#care .bg { background: url('../img/bg/sp_point_bg.png') no-repeat 50% 50% / cover;}
	#care .ctn-flex { display: block;}
	#care .txt { width: 100%; margin: 0 auto 20px;}
	#care .fig { width: 100%;}
	#care .txt h2 { margin-bottom: 20px;}
	#care .txt p { font-size: 14px;}
}



#develop { position: relative; z-index: 3;}
#develop .bg { width: 100%; margin: 0 auto; background: url('../img/bg/use_bg.jpg') no-repeat 50% 50% / cover;}
#develop .inner-sct { position: relative; width: 100%; max-width: 65.277%; margin: 0 auto; padding: 14% 0px 18%; overflow: hidden;}
#develop .txt h3 { margin-bottom: 18px; text-align: center;}
#develop .txt h3 img { width: 60%; max-width: 280px;}
#develop .txt p { font-size: 17px; letter-spacing: 0.1rem; text-align: center;}
#develop .txt p span{ display: block;}
#develop .item-pc { display: block; width: 200px; position: absolute; top: 15%;}
#develop .item-pc.item-L { left: 0;}
#develop .item-pc.item-R { right: 0;}
#develop .item-pc img { position: relative; width: 100%; opacity: 0;}
#develop .item-pc.item-L img { transform: translate(-100px,0);}
#develop .item-pc.item-R img { transform: translate(100px,0);}

#develop .item-sp { display: none;}
#develop .note{     position: absolute;
    right: 5%;
    bottom: 18%;
    max-width: 200px; }
#develop .note ul li { text-align: right;}
#develop.show .ctn { opacity: 1;}
#develop.show .item-pc.item-L img { animation: 0.4s move-in linear 0.2s forwards;}
#develop.show .item-pc.item-R img { animation: 0.4s move-in linear 0.2s forwards;}
@media (max-width: 801px) {
	#develop .ctn { padding: 0px 180px;}
	#develop .item-pc { width: 160px;}
}
@media (max-width: 768px) {
	#develop .bg { background: url('../img/bg/sp_use_bg.jpg') no-repeat center center / cover;}
	#develop .inner-sct { width: 100%; margin: 0 auto; max-width: 82.0512%; padding: 44% 0px 44%; }
	#develop .ctn { padding: 0px;}
	#develop .ctn h2 { margin-bottom: 30px;}
	#develop .item-pc { display: none;}
	#develop .item-sp { display: flex; justify-content: space-between; margin: 0 auto 20px;}
	#develop .item-sp .item { width: 50%; text-align: center;}
	#develop .item-sp .item img { position: relative; width: 50%;}
	#develop .item-sp .item.item-L img { transform: translate(-100px,0);}
	#develop .item-sp .item.item-R img { transform: translate(100px,0);}

	#develop .txt { width: 70%;}
	#develop .txt h3 { margin-bottom: 18px; text-align: center;}
	#develop .txt h3 img { width: 60%; max-width: 280px;}
	#develop .txt p { font-size: 2.6vw;}
	#develop .txt p span{ display: block;}
	#develop .note ul { width: 100%;}
	#develop.show .item-sp .item.item-L img { animation: 0.4s move-in ease-in 0.2s forwards;}
	#develop.show .item-sp .item.item-R img { animation: 0.4s move-in ease-in 0.2s forwards;}
	#develop .note{  right: 5%;
		bottom: 9%;}
}
@media (max-width: 481px) {
	#develop .ctn h2 { margin-bottom: 12px;}
	#develop .item-sp { margin: 0 auto 12px;}
	#develop .txt { width: 80%; margin: auto;}
	#develop .txt h3 { margin-bottom: 8px;}	
	#develop .txt p { font-size: 11px; letter-spacing: 0.05rem;}
}


#program { position: relative; z-index: 4;}
#program .bg { width: 100%;  margin: 0 auto; background: url('../img/bg/shop_bg.jpg') no-repeat center center / cover;}
#program .inner-sct { position: relative; margin: 0 auto; padding: 210px 0px 150px;}
#program .ttl { margin-bottom: 40px;}
#program .ttl h2 { margin-bottom: 30px;}
#program .ttl h2 img { max-width: 680px;}
#program .ttl h2 img.sp { display: none;}
#program .box { width: 96%; max-width: 680px; height: 100%; margin: 0 auto; background: #fff; border-radius: 30px; overflow: hidden;}
#program .box .tit { padding: 20px 50px 0;}
#program .box .tit h3 {}
#program .box .tit h3 img { width: 100%;}
#program .box .tit h3 img.sp { display: none;}
#program .box .ctn-flex { position: relative; display: flex; justify-content: space-between;}
#program .box .txt p { color: #767676; font-size: 14px;}
#program .box .txt p sub { font-size: 10px; vertical-align: baseline;}
#program .box .txt p span{ display: block;}
#program .box .memo { width: 100%;}
#program .box .memo ul li { color: #f0b76c; font-size: 10px; line-height: 1.2;}
#program .cpn { position: absolute; right: 4%; bottom: 50px; width: 108px;}
#program .cpn img { width: 100%;}
@media (max-width: 1001px) {
	#program .box .tit { padding: 20px 30px 0;}
}
@media (max-width: 801px) {
	#program .box { border-radius: 20px;}
	#program .box .ctn-flex { display: block;}
	#program .box .txt p span{ display: inline;}
}
@media (max-width: 768px) {
	#program .bg { background: url('../img/bg/sp_shop_bg.jpg') no-repeat center center / cover;}
	#program .inner-sct { padding: 32vw 0px 35vw;}
	#program .ttl h2 { margin-bottom: 20px;}
	#program .ttl h2 img.pc { display: none;}
	#program .ttl h2 img.sp { display: block; margin: 0 auto;}
	#program .box .tit h3 img.pc { display: none;}
	#program .box .tit h3 img.sp { display: block; margin: 0 auto;}
	#program .box .txt p { font-size: 13px;}
}

#program .box.care-1 .ctn-flex { padding: 0 50px; background: url('../img/care-1-bg.jpg') 100% 100% / cover;}
#program .box.care-1 .txt { width: 50%; padding-top: 30px;}
#program .box.care-1 .fig { width: 50%; padding-bottom: 20px;}
#program .box.care-1 .fig .fig-ctn { position: relative;}
#program .box.care-1 .fig .fig-ctn figure { position: relative; z-index: 1; text-align: center;}
#program .box.care-1 .fig .fig-ctn figure img { position: relative; width: 38%; max-width: 110px; margin: 0 auto;
 opacity: 0; transition: 0.8s ease 0.4s; transform: translateY(-20px);
}
#program .box.care-1 .fig .fig-ctn .icn { position: absolute; width: 75px; opacity: 0;}
#program .box.care-1 .fig .fig-ctn .icn.icn-1 { top: 60px; left: 8px; transition: 1.2s ease 0.6s;}
#program .box.care-1 .fig .fig-ctn .icn.icn-2 { top: 160px; left: 20px; transition: 1.2s ease 0.8s;}
#program .box.care-1 .fig .fig-ctn .icn.icn-3 { top: 0px; right: 20px; transition: 1.2s ease 1.0s;}
#program .box.care-1 .fig .fig-ctn .icn.icn-4 { top: 80px; right: 0px; transition: 1.2s ease 1.2s;}
#program .box.care-1 .fig .fig-ctn .icn.icn-5 { top: 180px; right: 10px; transition: 1.2s ease 1.4s;}
#program .box.care-1 .fig .fig-ctn .icn img { position: relative; width: 100%; animation: 3.0s ease-in-out shake infinite;}
#program .box.care-1 .fig .fig-ctn .icn.icn-2 img,
#program .box.care-1 .fig .fig-ctn .icn.icn-4 img { animation: 2.6s ease-in-out shake infinite;}
#program .box.care-1 .memo { position: absolute; left: 0; bottom: 20px;}
#program .box.care-1 .memo ul { width: 50%; padding-left: 50px;}
#program .slick-active .box.care-1 .fig .fig-ctn figure img { opacity: 1; transform: translateY(0px);}
#program .slick-active .box.care-1 .fig .fig-ctn .icn { opacity: 1;}
@media (max-width: 1001px) {
	#program .box.care-1 .ctn-flex { padding: 0 30px;}
	#program .box.care-1 .txt { min-height: 140px; padding-top: 20px;}
	#program .box.care-1 .fig .fig-ctn { padding: 65px 0 20px;}
	#program .box.care-1 .fig .fig-ctn figure img { width: 60px;}
	#program .box.care-1 .fig .fig-ctn .icn { width: 60px;}
	#program .box.care-1 .memo ul { padding-left: 30px;}
}
@media (max-width: 801px) {
	#program .box.care-1 .ctn-flex { padding: 0 30px 20px; background: url('../img/care-1-bg-sp.jpg') 50% 50% / 100% auto;}
	#program .box.care-1 .txt { width: 100%; padding-top: 10px;}
	#program .box.care-1 .fig { width: 60%; margin: 0 auto; padding-bottom: 20px;}
	#program .box.care-1 .memo { position: relative; left: auto; bottom: auto;}
	#program .box.care-1 .memo ul { width: 100%; padding: 0px;}
}
@media (max-width: 641px) {
	#program .box.care-1 .txt { min-height: auto; margin-bottom: 18px; padding-top: 12px;}
	#program .box.care-1 .fig { width: 75%; padding-bottom: 10px;}
	#program .box.care-1 .fig .fig-ctn .icn.icn-5 { top: auto; bottom: 10px;}
}
@media (max-width: 481px) {
	#program .box.care-1 .ctn-flex { padding: 0 15px 10px;}
	#program .box.care-1 .txt { margin-bottom: 0px; padding-top: 8px;}
	#program .box.care-1 .fig { width: 100%;}
	#program .box.care-1 .fig .fig-ctn { padding: 40px 0 10px;}
	#program .box.care-1 .fig .fig-ctn .icn { width: 55px;}
	#program .box.care-1 .fig .fig-ctn .icn.icn-1 { top: 40px; left: 0px;}
	#program .box.care-1 .fig .fig-ctn .icn.icn-2 { top: 120px; left: 10px;}
	#program .box.care-1 .fig .fig-ctn .icn.icn-3 { top: 6px; right: 20px;}
	#program .box.care-1 .fig .fig-ctn .icn.icn-4 { top: 70px; right: 0px;}
	#program .box.care-1 .fig .fig-ctn .icn.icn-5 { top: 140px; right: 10px;}
}



#program .box.care-2 .ctn-flex { padding: 0 20px;}
#program .box.care-2 .txt { width: 50%; padding-top: 30px; padding-left: 30px;}
#program .box.care-2 .fig { width: 50%;}
#program .box.care-2 .fig .fig-ctn { position: relative; width: 92%; margin: 0 auto; padding-top: 92%;}
#program .box.care-2 .fig .fig-ctn .icns { position: absolute; top: 0%; left: 0%; bottom: 0%; right: 0%; width: 96%; height: 96%;
 animation: 200.0s linear big-circle infinite;
}
#program .box.care-2 .fig .fig-ctn .icn { position: absolute; top: 0%; left: 50%; width: 24%; max-width: 100px; height: 50%; transform-origin: 50% 100%;}
#program .box.care-2 .fig .fig-ctn .icn div { position: relative; transform: translateY(100%); opacity: 0;}

#program .box.care-2 .fig .fig-ctn .icn img { position: relative; width: 100%;}
#program .box.care-2 .fig .fig-ctn .icn.icn-1 { transform: translate(-50%,0);}
#program .box.care-2 .fig .fig-ctn .icn.icn-2 { transform: translate(-50%,0) rotate(36deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-3 { transform: translate(-50%,0) rotate(72deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-4 { transform: translate(-50%,0) rotate(108deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-5 { transform: translate(-50%,0) rotate(144deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-6 { transform: translate(-50%,0) rotate(180deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-7 { transform: translate(-50%,0) rotate(216deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-8 { transform: translate(-50%,0) rotate(252deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-9 { transform: translate(-50%,0) rotate(288deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-10{ transform: translate(-50%,0) rotate(324deg);}
#program .box.care-2 .fig .fig-ctn .icn.icn-1 div { transition: 0.5s ease-out 0.0s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-2 div { transition: 0.5s ease-out 0.1s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-3 div { transition: 0.5s ease-out 0.2s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-4 div { transition: 0.5s ease-out 0.3s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-5 div { transition: 0.5s ease-out 0.4s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-6 div { transition: 0.5s ease-out 0.5s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-7 div { transition: 0.5s ease-out 0.6s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-8 div { transition: 0.5s ease-out 0.7s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-9 div { transition: 0.5s ease-out 0.8s;}
#program .box.care-2 .fig .fig-ctn .icn.icn-10 div{ transition: 0.5s ease-out 0.9s;}

#program .box.care-2 .fig .fig-ctn .icn.icn-1 img { animation: 200.0s linear circle1 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-2 img { animation: 200.0s linear circle2 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-3 img { animation: 200.0s linear circle3 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-4 img { animation: 200.0s linear circle4 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-5 img { animation: 200.0s linear circle5 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-6 img { animation: 200.0s linear circle6 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-7 img { animation: 200.0s linear circle7 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-8 img { animation: 200.0s linear circle8 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-9 img { animation: 200.0s linear circle9 infinite;}
#program .box.care-2 .fig .fig-ctn .icn.icn-10 img{ animation: 200.0s linear circle10 infinite;}
#program .box.care-2 .memo { position: absolute; left: 0; bottom: 20px;}
#program .box.care-2 .memo ul { width: 50%; padding-left: 50px;}
#program .slick-active .box.care-2 .fig .fig-ctn .icn div { opacity: 1; transform: translateY(0%);}
@media (max-width: 1001px) {
	#program .box.care-2 .ctn-flex { padding: 0 20px 20px;}
	#program .box.care-2 .txt { padding-top: 10px; padding-left: 10px;}
	#program .box.care-2 .memo ul { padding-left: 30px;}
}
@media (max-width: 801px) {
	#program .box.care-2 .ctn-flex { padding: 0 30px 20px;}
	#program .box.care-2 .txt { width: 100%; min-height: 90px; padding-top: 12px; padding-left: 0px;}
	#program .box.care-2 .fig { width: 65%; margin: 0 auto;}
	#program .box.care-2 .memo { position: relative; left: auto; bottom: auto;}
	#program .box.care-2 .memo ul { width:100%; padding-left: 0px;}
}
@media (max-width: 641px) {
	#program .box.care-2 .txt { min-height: auto; margin-bottom: 8px;}
	#program .box.care-2 .fig { width: 100%;}
}
@media (max-width: 481px) {
	#program .box.care-2 .ctn-flex { padding: 0 15px 12px;}
	#program .box.care-2 .fig { margin: 0 auto 10px;}
	#program .box.care-2 .fig .fig-ctn { width: 100%; padding-top: 100%;}

}

#program .box.care-3 .ctn-flex { padding: 20px 20px 30px;}
#program .box.care-3 .txt { width: 50%; padding-top: 30px; padding-left: 30px;}
#program .box.care-3 .fig { width: 50%; padding-top: 12px;}
#program .box.care-3 .fig figure { text-align: center;}
#program .box.care-3 .fig figure img { width: 100%;}
#program .box.care-3 .fig figure img.sp { display: none;}
#program .box.care-3 .fig figure figcaption { margin-top: 10px; font-size: 10px;}
#program .box.care-3 .memo { position: absolute; left: 0; bottom: 20px;}
#program .box.care-3 .memo ul { width: 50%; padding-left: 50px;}
@media (max-width: 1001px) {
	#program .box.care-3 .txt { padding-left: 10px;}
	#program .box.care-3 .memo ul { padding-left: 30px;}
}
@media (max-width: 801px) {
	#program .box.care-3 .ctn-flex { padding: 20px 30px 20px;}
	#program .box.care-3 .txt { width: 100%; min-height: 140px; padding-top: 0px; padding-left: 0px;}
	#program .box.care-3 .fig { width: 100%; margin-bottom: 24px; padding-top: 6px;}
	#program .box.care-3 .fig figure img { width: 80%; max-width: 350px; margin: 0 auto;}
	#program .box.care-3 .fig figure figcaption { margin-top: 6px;}
	#program .box.care-3 .memo { position: relative; left: auto; bottom: auto;}
	#program .box.care-3 .memo ul { width: 100%; padding-left: 0px;}
}
@media (max-width: 641px) {
	#program .box.care-3 .ctn-flex { padding: 10px 30px 20px;}
	#program .box.care-3 .txt { min-height: auto;}
	#program .box.care-3 .fig { margin-bottom: 12px; padding-top: 6px;}
	#program .box.care-3 .fig figure img.pc { display: none;}
	#program .box.care-3 .fig figure img.sp { display: block; max-width: 250px; margin: 0 auto;}
}
@media (max-width:481px) {
	#program .box.care-3 .ctn-flex { padding: 10px 15px 12px;}
	#program .box.care-3 .fig { padding-top: 12px;}
}


#program .box.care-4 .ctn-flex { padding: 0 50px;}
#program .box.care-4 .txt { width: 52%; padding-top: 15px;}
#program .box.care-4 .fig { width: 48%; padding-bottom: 20px;}
#program .box.care-4 .txt p.icn { margin-bottom: 10px;}
#program .box.care-4 .txt p.icn img { width: 60%; max-width: 210px;}
#program .box.care-4 .fig .fig-ctn { position: relative; margin: -10px 0 10px;}
#program .box.care-4 .fig figure { position: relative; z-index: 1; text-align: center; opacity: 0; transition: 0.8s linear 1.0s;}
#program .box.care-4 .fig figure img { width: 72px; margin: 0 auto;}
#program .box.care-4 .fig .package-1,
#program .box.care-4 .fig .package-2 { width: 72px; position: absolute; left: 50%; top: 0; opacity: 1; transform: translateX(-50%);}
#program .box.care-4 .fig .package-1 img { width: 100%; transform: translateX(-120%);}
#program .box.care-4 .fig .package-2 img { width: 100%; transform: translatex(140%);}
#program .box.care-4 .fig ul { font-size: 0; text-align: center;}
#program .box.care-4 .fig ul li { position: relative; display: inline-block; width: 28%; margin: 0 auto;}
#program .box.care-4 .fig ul li img { width: 100%;}
#program .box.care-4 .fig ul li img.def{ position: relative; z-index: 1; opacity: 1;}
#program .box.care-4 .fig ul li img.hv { position: absolute; left: 0; top: 0; opacity: 0; z-index: 2;}
#program .box.care-4 .fig li:nth-child(1) img.hv { animation: 10.0s linear fade-InOut-1 1.0s infinite; }
#program .box.care-4 .fig li:nth-child(2) img.hv { animation: 10.0s linear fade-InOut-2 1.0s infinite; }
#program .box.care-4 .fig li:nth-child(3) img.hv { animation: 10.0s linear fade-InOut-3 1.0s infinite; }
#program .box.care-4 .fig ul li span { position: relative; display: block; width: 100%;}
#program .box.care-4 .fig ul li span:before,
#program .box.care-4 .fig ul li span:after { content: ""; display: block; position: absolute; top: 0%; left: 50%;
 width: 100%; height: 100%; border-radius: 50%; pointer-events: none; transform: translate(-50%,0%) scale(0.75);
 animation: pulsate 3.0s linear infinite; z-index: 3;
}
#program .box.care-4 .fig ul li:nth-child(1) span:before,
#program .box.care-4 .fig ul li:nth-child(1) span:after { border: 1px solid #c3cc42;}
#program .box.care-4 .fig ul li:nth-child(2) span:before,
#program .box.care-4 .fig ul li:nth-child(2) span:after { border: 1px solid #69c3be;}
#program .box.care-4 .fig ul li:nth-child(3) span:before,
#program .box.care-4 .fig ul li:nth-child(3) span:after { border: 1px solid #8297d9;}
#program .box.care-4 .fig ul li span:after { animation-delay: 1s;}
#program .box.care-4 .memo { position: absolute; left: 0; bottom: 20px;}
#program .box.care-4 .memo ul { width: 50%; padding-left: 50px;}
@media (max-width: 1001px) {
	#program .box.care-4 .ctn-flex { padding: 0 20px;}
	#program .box.care-4 .txt { padding-top: 6px; padding-left: 10px;}
	#program .box.care-4 .txt p.icn { margin-bottom: 6px;}
	#program .box.care-4 .txt p span { display: inline; }
	#program .box.care-4 .fig .fig-ctn { margin: 10px 0 20px;}
	#program .box.care-4 .fig figure img { width: 50px;}
	#program .box.care-4 .fig .package-1,
	#program .box.care-4 .fig .package-2 { width: 50px;}
	#program .box.care-4 .memo ul { padding-left: 30px;}
}
@media (max-width: 801px) {
	#program .box.care-4 .ctn-flex { padding: 0 30px 20px;}
	#program .box.care-4 .txt { width: 100%; padding-top: 0px; padding-left: 0px;}
	#program .box.care-4 .fig { width: 100%; padding: 12px 0;}
	#program .box.care-4 .txt p.icn { margin-bottom: 10px;}
	#program .box.care-4 .txt p.icn img { max-width: 180px; margin: 0 auto;}
	#program .box.care-4 .fig .fig-ctn { margin: 0px auto 10px;}
	#program .box.care-4 .fig ul { max-width: 320px; margin: 0 auto;}
	#program .box.care-4 .memo { position: relative; left: auto; bottom: auto;}
	#program .box.care-4 .memo ul { width: 100%; padding-left: 0px;}
}
@media (max-width: 641px) {
	#program .box.care-4 .ctn-flex { padding: 10px 30px 20px;}
	#program .box.care-4 .txt p.icn img { max-width: 200px;}
}
@media (max-width:481px) {
	#program .box.care-4 .ctn-flex { padding: 0 15px 12px;}
	#program .box.care-4 .txt { padding-top: 10px;}
	#program .box.care-4 .fig { padding: 6px 0;}
	#program .box.care-4 .fig ul { max-width: 85%;}
}


#program .slick-active .box.care-4 .fig .fig-ctn .package-1 img { animation: 0.8s linear movin 0.4s forwards;}
#program .slick-active .box.care-4 .fig .fig-ctn .package-2 img { animation: 0.8s linear movin 0.4s forwards;}
#program .slick-active .box.care-4 .fig figure { opacity: 1;}
@keyframes movin{
	0% { opacity: 1;}
	90%{ opacity: 1; transform: translateX(0%);}
 100%{ opacity: 0; transform: translateX(0%);}
}

#program .box.care-5 .ctn-flex { padding: 0 20px;}
#program .box.care-5 .txt { width: 48%; padding-top: 40px; padding-left: 30px; padding-right: 20px;}
#program .box.care-5 .fig { width: 52%; padding: 35px 0;}
#program .box.care-5 .fig figure img { width: 100%;}
#program .box.care-5 .fig figure figcaption { color: #f0b76c; font-size: 10px; text-align: right;}
#program .box.care-5 .memo { position: absolute; left: 0; bottom: 20px;}
#program .box.care-5 .memo ul { width: 45%; padding-left: 50px;}
@media (max-width: 1001px) {
	#program .box.care-5 .txt { width: 52%; padding-top: 10px; padding-left: 10px;}
	#program .box.care-5 .fig { width: 48%; padding: 15px 0 70px;}
	#program .box.care-5 .memo ul { width: 90%; padding-left: 30px;}
}
@media (max-width: 801px) {
	#program .box.care-5 .ctn-flex { padding: 0 30px 20px;}
	#program .box.care-5 .txt { width: 100%; padding-top: 10px; padding-left: 0px; padding-right: 0px;}
	#program .box.care-5 .fig { width: 100%; padding: 15px 0;}
	#program .box.care-5 .fig figure img { max-width: 400px; margin: 0 auto;}
	#program .box.care-5 .memo { position: relative; left: auto; bottom: auto;}
	#program .box.care-5 .memo ul { width: 100%; padding-left: 0px;}
}
@media (max-width: 641px) {
}
@media (max-width:481px) {
	#program .box.care-5 .ctn-flex { padding: 0 15px 12px;}
	#program .box.care-5 .fig { padding: 25px 0;}
}


#program .slide-aside { width: 80%; max-width: 640px; margin: 0 auto; padding: 30px 0;}
#program .slide-aside ul { font-size: 0; text-align: center;}
#program .slide-aside ul li { position: relative; display: inline-block; width: 27px; margin: 0 8px;}
#program .slide-aside ul li span { position: relative; z-index: 2; display: block; color: #fcd88b; font-size: 13px; font-weight: 700; cursor: pointer;}
#program .slide-aside ul li.current span { color: #f09805;}
#program .slide-aside ul li:after{ content: ''; display: block; width: 22px; height: 22px; border: solid 2px #fcd88b; border-radius: 50%;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1;
}
#program .slide-aside ul li svg { position: absolute; left: 50%; top: 50%; width: 25px; height: 25px; transform: translate(-50%,-50%) rotate(-90deg); z-index: 2;}
#program .slide-aside ul li svg circle { fill: transparent;}
#program .slide-aside ul li.current svg circle { stroke: #f09805; stroke-width: 8; animation: circle 4.8s forwards;}

#program .slick-arrow{ bottom: -60px; left: 50%; background: none;}
#program .slick-prev { transform: translateX(-160px);}
#program .slick-next { transform: translateX(120px);}
@media (max-width:481px) {
	#program .slide-aside { padding: 20px 0;}
	#program .slick-arrow{ bottom: -50px;}
	#program .slick-prev { transform: translateX(-150px);}
	#program .slick-next { transform: translateX(110px);}
}



#product { position: relative; z-index: 3;}
#product .bg { width: 100%;  margin: 0 auto; background: url('../img/bg/product.jpg') no-repeat 50% 0;}
#product .inner-sct { padding-top: 110px;}
#product .ttl h2 { margin-bottom: 20px;}
#product .ttl h2 img { max-width: 450px;}
#product .blank { position: relative; width: 100%; height: 540px; z-index: 5;}

#product .btn-open { position: absolute; width: 100%; z-index: 2; bottom: 60px; transition: 0.4s linear;}
#product .btn-open .btn-inner { width: 72%; max-width: 440px; margin: 0 auto; padding: 4px; background: #f69f03; border-radius: 10px; cursor: pointer;}
#product .btn-open .btn-inner div { position: relative; padding: 15px; border: solid 2px #fff; border-radius: 8px;}
#product .btn-open .btn-inner div:before,
#product .btn-open .btn-inner div:after { content: ''; display: block; width: 2px; height: 20px; background: #fff;
 position: absolute; right: 22px; top: 50%; transition: 0.4s linear;
}
#product .btn-open .btn-inner div:before{ transform: translate(0,-50%);}
#product .btn-open .btn-inner div:after { transform: translate(0,-50%) rotate(90deg);}
#product .btn-open .btn-inner div p { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.18rem; line-height: 1; text-align: center;}
#product .btn-open .btn-inner:hover { background: #f8b235;}

#product .btn-open.open { transform: translateY(88px);}
#product .btn-open.open .btn-inner div:before{ transform: translate(0,-50%) rotate(90deg);}
#product .hide-ctn { position: relative; display: none; z-index: 2;}
#product .product-bloc { position: relative; background: linear-gradient(#fff4c9,#ffe04e);}
#product .product-bloc .inner-bloc { position: relative; width: 92%; margin: 0 auto; padding: 80px 0 60px; z-index: 2;}
#product .product-bloc .ctn-flex { display: flex; width: 100%;}
#product .product-bloc .pht { width: 36%;}
#product .product-bloc .txt { width: 64%; padding-left: 40px;}
#product .product-bloc .pht figure { text-align: center;}
#product .product-bloc .pht figure.tr { text-align: right;}
#product .product-bloc .pht figure.tr img { width: 50%; max-width: 135px;}
#product .product-bloc .txt h3 { margin-bottom: 18px;}
#product .product-bloc .txt h3 img { width: 100%; max-width: 480px;}
#product .product-bloc .txt h3 img.sp { display: none;}
#product .product-bloc .txt p.lead { margin-bottom: 18px; color: #786245; font-size: 15px; font-weight: 700; letter-spacing: 0.1rem;}
#product .product-bloc .txt p.lead sub { font-size: 10px; vertical-align: baseline;}
#product .product-bloc .txt p.price { margin-bottom: 10px; color: #f68703; font-weight: 700; letter-spacing: 0.1rem;}
#product .product-bloc .txt dl { display: table; width: 100%; margin-bottom: 18px;}
#product .product-bloc .txt dl dt,
#product .product-bloc .txt dl dd { display: table-cell; vertical-align: middle;}
#product .product-bloc .txt dl dt { width: 72px; }
#product .product-bloc .txt dl dt img { width: 100%;}
#product .product-bloc .txt dl dd { width: auto; padding-left: 20px; color: #786245; font-size: 18px; font-weight: 700;}
#product .product-bloc .txt .btn-cart { width: 100%; max-width: 260px;}
#product .product-bloc .txt .btn-cart a { position: relative; display: block; width: 100%; padding: 8px 0;
 background: linear-gradient(#ffb96e,#ff9e47 70%,#ff962f); border-radius: 50px;
 color: #fff; font-size: 18px; text-align: center;
}
#product .product-bloc .txt .btn-cart a:after { content: ''; display: block; width: 8px; height: 8px; border-top: solid 3px #fff; border-right: solid 3px #fff;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#product .product-bloc .txt .btn-cart a svg { display: inline-block; width: 25px; margin-right: 10px; vertical-align: middle; fill: #fff;}
#product .product-bloc .txt .btn-cart a em { display: inline-block; font-weight: 700; vertical-align: middle;}
#product .product-bloc .txt .btn-cart a:hover { opacity: 0.8;}

#product .product-bloc .txt .btn-cart span { position: relative; display: block; width: 100%; padding: 8px 0; background: #aaa; border-radius: 50px;
 color: #fff; font-size: 18px; text-align: center;
}
#product .product-bloc .txt .btn-cart span svg { display: inline-block; width: 25px; margin-right: 10px; vertical-align: middle; fill: #fff;}
#product .product-bloc .txt .btn-cart span em { display: inline-block; font-weight: 700; vertical-align: middle;}

#product .product-bloc .note { position: absolute; bottom: 15px; z-index: 1;}
#product .product-bloc .note ul { width: 92%; margin: 0 auto;}
#product .product-bloc .note ul li { text-align: right;}
#product .product-bloc .note ul li br { display: none;}
#product .product-bloc .line { height: 90px;}

#product .product-bloc .bubble { position: absolute; width: 160px; height: 100%; position: absolute; top: 0; background-size: 100% auto; background-repeat: no-repeat;}
#product .product-bloc .bubble.bubble-1-L { left: 8%; background-image: url('../img/product/bubble-1.png');}
#product .product-bloc .bubble.bubble-1-R { right: 8%; background-image: url('../img/product/bubble-2.png');}
#product .product-bloc .bubble.bubble-2-L { left: 8%; background-image: url('../img/product/bubble-1.png');}
#product .product-bloc .bubble.bubble-2-R { right: 8%; background-image: url('../img/product/bubble-2.png');}
#product .product-bloc .bubble.bubble-3-L { left: 8%; background-image: url('../img/product/bubble-1.png');}
#product .product-bloc .bubble.bubble-3-R { right: 8%; background-image: url('../img/product/bubble-2.png');}
#product .product-bloc .bubble.bubble-4-L { left: 8%; background-image: url('../img/product/bubble-2.png');}
#product .product-bloc .bubble.bubble-4-R { right: 8%; background-image: url('../img/product/bubble-1.png');}
@media (max-width: 801px) {
	#product .product-bloc .pht { width: 30%;}
	#product .product-bloc .txt { width: 70%; padding-left: 0px;}
	#product .product-bloc .pht figure.tr { text-align: center;}
}
@media (max-width: 641px) {
	#product .bg { background: url('../img/bg/product-sp.jpg') no-repeat 50% 0 / 100% auto;}
	#product .blank { height: 90vw;}
	#product .btn-open { bottom: 40px;}
	#product .btn-open.open { transform: translateY(68px);}

	#product .product-bloc { padding-bottom: 20px;}
	#product .product-bloc .inner-bloc { padding: 60px 0 20px;}
	#product .product-bloc .ctn-flex { display: block;}
	#product .product-bloc .pht { width: 100%; margin: 0 auto 20px;}
	#product .product-bloc .txt { width: 100%;}
	#product .product-bloc .txt h3 img { width: 80%; max-width: 480px;}
	#product .product-bloc .txt h3 img.pc { display: none;}
	#product .product-bloc .txt h3 img.sp { display: block; margin: 0 auto;}
	#product .product-bloc .txt p.lead { text-align: center;}
	#product .product-bloc .txt p.price { text-align: center;}
	#product .product-bloc .txt dl { display: inline-block; margin: 0 auto 12px; text-align: center;}
	#product .product-bloc .txt dl dt,
	#product .product-bloc .txt dl dd { display: inline-block;}
	#product .product-bloc .txt dl dd { padding-left: 12px;}
	#product .product-bloc .txt .btn-cart { margin: 0 auto;}
	#product .product-bloc .note { position: relative; bottom: auto;}
	#product .product-bloc .note ul li { text-align: center;}

	#product .product-bloc .line { height: 60px;}

	#product .product-bloc .bubble { width: 120px;}
	#product .product-bloc .bubble.bubble-1-L { left: 2%;}
	#product .product-bloc .bubble.bubble-1-R { right: 2%;}
	#product .product-bloc .bubble.bubble-2-L { left: 2%;}
	#product .product-bloc .bubble.bubble-2-R { right: 2%;}
	#product .product-bloc .bubble.bubble-3-L { left: 2%;}
	#product .product-bloc .bubble.bubble-3-R { right: 2%;}
	#product .product-bloc .bubble.bubble-4-L { left: 2%;}
	#product .product-bloc .bubble.bubble-4-R { right: 2%;}
}
@media (max-width: 481px) {
	#product .inner-sct { padding-top: 90px;}
	#product .ttl h2 { margin-bottom: 12px;}
	#product .ttl h2 img { width: 65%;}
	#product .blank { height: 86vw;}
	#product .btn-open .btn-inner {  padding: 3px; border-radius: 8px;}
	#product .btn-open .btn-inner div { padding: 12px; border-width: 1px; border-radius: 6px;}
	#product .btn-open .btn-inner div:before,
	#product .btn-open .btn-inner div:after { height: 18px;}
	#product .btn-open .btn-inner div p { font-size: 14px;}
	#product .btn-open.open { transform: translateY(62px);}

	#product .product-bloc { padding-bottom: 12px;}
	#product .product-bloc .inner-bloc { padding: 40px 0 15px;}
	#product .product-bloc .txt h3 { margin-bottom: 10px;}
	#product .product-bloc .txt p.lead { margin-bottom: 8px; font-size: 14px; letter-spacing: 0.05rem;}
	#product .product-bloc .txt dl { margin-bottom: 8px;}
	#product .product-bloc .txt dl dt { width: 50px;}
	#product .product-bloc .txt dl dd { padding-left: 8px; font-size: 13px;}
	#product .product-bloc .txt p.price { font-size: 13px; letter-spacing: 0.05rem;}
	#product .product-bloc .txt .btn-cart { max-width: 240px;}
	#product .product-bloc .txt .btn-cart a { padding: 6px 0; font-size: 16px;}
	#product .product-bloc .txt .btn-cart a svg { width: 20px;}
	#product .product-bloc .note ul li br { display: block;}

	#product .product-bloc .bubble { width: 120px;}
	#product .product-bloc .bubble.bubble-1-L { left: 0%; background-size: 150px auto; background-position-x: 100%;}
	#product .product-bloc .bubble.bubble-1-R { right: 0%; background-size: 150px auto; background-position-x: 0%;}
	#product .product-bloc .bubble.bubble-2-L { left: 0%; background-size: 150px auto; background-position-x: 100%;}
	#product .product-bloc .bubble.bubble-2-R { right: 0%; background-size: 150px auto; background-position-x: 0%;}
	#product .product-bloc .bubble.bubble-3-L { left: 0%; background-size: 150px auto; background-position-x: 100%;}
	#product .product-bloc .bubble.bubble-3-R { right: 0%; background-size: 150px auto; background-position-x: 0%;}
	#product .product-bloc .bubble.bubble-4-L { left: 0%; background-size: 150px auto; background-position-x: 100%;}
	#product .product-bloc .bubble.bubble-4-R { right: 0%; background-size: 150px auto; background-position-x: 0%;}
}


#shop { position: relative; z-index: 3;}
#shop .bg { width: 100%;  margin: 0 auto; background: url('../img/bg/shop.jpg') no-repeat 50% 50% / cover;}
#shop .inner-sct { padding: 90px 0 60px;}
#shop h2 { margin-bottom: 40px; text-align: center;}
#shop h2 img { width: 60%; max-width: 340px;}
#shop .ctn { width: 92%; margin: 0 auto;}
#shop .ctn h3 { margin-bottom: 20px; color: #fff; font-size: 28px; font-weight: 600; text-align: center;}
#shop .ctn p { margin-bottom: 40px; color: #fff; font-size: 12px; font-weight: 700; text-align: center;}
#shop .ctn .btn-more { width: 40%; max-width: 330px; margin: 0 auto;}
#shop .ctn .btn-more a { position: relative; display: block; padding: 18px 0; background: #fff; border-radius: 10px;
 color: #f68703; font-size: 30px; font-weight: 700; line-height: 1; text-align: center;
}
#shop .ctn .btn-more a svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 40px; fill: #f68703;}
#shop .ctn .btn-more a:hover { opacity: 0.8;}
@media (max-width: 641px) {
	#shop .ctn h3 { margin-bottom: 12px; font-size: 4.0vw;}
	#shop .ctn .btn-more a { font-size: 4.0vw;}
}
@media (max-width: 481px) {
	#shop .bg { background: url('../img/bg/shop-sp.jpg') no-repeat 50% 50% / 100% auto;}
	#shop .inner-sct { padding: 10vw 0 8vw;}
	#shop h2 { margin-bottom: 16px;}
	#shop .ctn h3 { margin-bottom: 6px; font-size: 16px;}
	#shop .ctn p { margin-bottom: 25px; font-size: 10px;}
	#shop .ctn .btn-more a { padding: 12px 0; border-radius: 4px; font-size: 15px;}
	#shop .ctn .btn-more a svg { width: 25px; right: 10px;}
}

#insta { position: relative; z-index: 3;}
#insta .bg { width: 100%;  margin: 0 auto; background: #fff;}
#insta .inner-sct { padding: 80px 0 50px;}
#insta .ttl { margin-bottom: 30px;}
#insta .ttl h2 { margin-bottom: 30px;}
#insta .ttl h2 img { max-width: 370px;}
#insta .ctn { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; height: 740px; overflow: hidden;}
#insta .ctn .pht { position: absolute; left: 0%; transform: translateX(100vw);}
#insta .ctn .pht.pht-1 { top: 30%; width: 450px; animation: moveX 28s ease infinite; animation-delay: 0.0s;}
#insta .ctn .pht.pht-2 { top: 0%; width: 360px; animation: moveX 30s ease infinite; animation-delay: 4.0s;}
#insta .ctn .pht.pht-3 { bottom: 0%; width: 320px; animation: moveX 40s linear infinite; animation-delay: 6.0s;}
#insta .ctn .pht.pht-4 { top: 0%; width: 460px; animation: moveX 36s ease infinite; animation-delay: 12.0s;}
#insta .ctn .pht img { width: 100%;}
#insta .ctn .pht a:hover { opacity: 0.85;}
@keyframes moveX {
 to{ transform: translateX(-50vw);}
}
@media (max-width: 481px) {
	#insta .inner-sct { padding: 40px 0;}
	#insta .ttl h2 { margin-bottom: 12px;}
	#insta .ctn { height: 500px;}
	#insta .ctn .pht.pht-1 { top: 30%; width: 240px; animation-duration: 20s;}
	#insta .ctn .pht.pht-2 { top: 0%; width: 180px; animation-duration: 30s;}
	#insta .ctn .pht.pht-3 { bottom: 0%; width: 160px; animation-duration: 25s;}
	#insta .ctn .pht.pht-4 { top: 5%; width: 200px; animation-duration: 25s;}
}


#campaign { position: relative; z-index: 3;}
#campaign .bg { width: 100%;  margin: 0 auto; background: url('../img/bg/present.jpg') no-repeat 50% 50% / cover;}
#campaign .inner-sct { padding: 40px 0 20px;}
#campaign h2 { margin-bottom: 80px; text-align: center;}
#campaign h2 img { width: 90%; max-width: 560px;}
#campaign .ctn { position: relative; width: 92%; max-width: 780px; margin: 0 auto;}
#campaign figure { position: relative; z-index: 1;}
#campaign figure img { width: 100%;}
#campaign figure img.sp { display: none;}
#campaign .btn { position: absolute; width: 100%; bottom: 20px; z-index: 2;}
#campaign .btn a { display: block; width: 40%; max-width: 310px; margin: 0 10px 0 auto; border-radius: 10px; overflow: hidden;}
#campaign .btn a img { width: 100%; }
#campaign .btn a img.sp { display: none;}
#campaign .btn a:hover { opacity: 0.8;}
@media (max-width: 801px) {
	#campaign .btn a { margin: 0 8px 0 auto;}
}
@media (max-width: 641px) {
	#campaign .inner-sct { padding: 0px;}
	#campaign h2 { display: none;}
	#campaign .ctn { width: 100%;}
	#campaign figure img.pc { display: none;}
	#campaign figure img.sp { display: block;}
	#campaign .btn { bottom: 6vw; padding: 0 16vw;}
	#campaign .btn a { width: 55%; margin: 0px 0px 0px auto; border-radius: 6px;}
	#campaign .btn a img.pc { display: none;}
	#campaign .btn a img.sp { display: block;}
}

#lineup { position: relative; z-index: 3;}
#lineup .bg { width: 100%;  margin: 0 auto; background: url('../img/bg/lineup.jpg') no-repeat 50% 50% / cover;}
#lineup .inner-sct { width: 90%; max-width: 840px; margin: 0 auto; padding: 50px 0 60px;}
#lineup .ctn { width: 55%; padding-left: 8%;}
#lineup .ctn h3 { text-align: center;}
#lineup .ctn h3 img { width: 100%;}
#lineup .ctn .btn-more { width: 85%; max-width: 350px; margin: 0 auto;}
#lineup .ctn .btn-more a { position: relative; display: block; width: 100%; padding: 10px 0; border-radius: 8px;
 background: url('../img/bg/btn-lineup.jpg') no-repeat 50% 50% / cover;
 color: #6e6e6e; font-size: 18px; font-weight: 700; text-align: center;
}
#lineup .ctn .btn-more a svg { display: block; width: 40px; fill: #6e6e6e; position: absolute; right: 15px; top: 50%; transform: translate(0,-50%);}
#lineup .ctn .btn-more a:hover { opacity: 0.8;}
@media (max-width: 641px) {
	#lineup .bg { background: url('../img/bg/lineup-sp.jpg') no-repeat 50% 50% / 100% auto;}
	#lineup .inner-sct { padding: 10vw 0 8vw;}
	#lineup .ctn { width: 100%; padding-left: 0%;}
	#lineup .ctn h3 { width: 52%; margin: 0 0 30px; text-align: center;}
	#lineup .ctn h3 img { width: 90%;}
	#lineup .ctn .btn-more { width: 90%; margin: 0 auto;}
}
@media (max-width: 481px) {
	#lineup .ctn h3 { margin: 0 0 20px;}
	#lineup .ctn .btn-more a { border-radius: 5px; font-size: 14px;}
	#lineup .ctn .btn-more a svg { width: 30px;}
}




.sct-special { position: relative; margin-top: -150px; background: url(../img/top/bg-ptn-6.png) no-repeat 50% 50% / auto 100%;}
.sct-special .inner-sct { position: relative; width: 100%; margin: 0 auto; padding: 100px 0 120px; overflow: hidden;}
.sct-special .ttl p { color: #2c7cb5;}
.sct-special .slider-special { width: 90%; max-width: 1240px; margin: 0 auto; padding: 0 90px 30px; text-align: center;}
.sct-special .slider-special a { display: block; width: 94%; max-width: 320px; margin: 0 auto; }
.sct-special .slider-special a dl dt img { width: 100%; margin: 0 auto 15px; border-radius: 15px; }
.sct-special .slider-special a dl dd { font-size: 18px; text-align: left;}
.sct-special .slider-special a dl dd.tit { margin-bottom: 10px; padding-bottom: 12px; border-bottom: solid 1px #5c5c5c; color: #5c5c5c; font-weight: 700; text-align: center;
}
.sct-special .slider-special a dl dd.tit sub { font-size: 12px; vertical-align: bottom;}
.sct-special .slider-special a dl dd.txt { margin-bottom: 10px; color: #5c5c5c;}
.sct-special .slider-special a dl dd.txt sub { font-size: 12px; vertical-align: bottom;}
.sct-special .slider-special a dl dd.kome{ padding-bottom: 12px; color: #9c9c9c; font-size: 12px;}
.sct-special .slider-special a:hover { opacity: 0.85;}
.sct-special .slider-special .slick-dots { left: 0; bottom: 0px;}

@media (min-width: 1401px) {
	.sct-special { background-size: 100% 100%;}
}
@media (max-width: 801px) {
	.sct-special { margin-top: 0px; margin-bottom: -80px;}
	.sct-special .inner-sct { padding: 12vw 0 16vw;}
	.sct-special .ttl { margin-bottom: 60px;}
	.sct-special .slider-special { padding: 0px 60px 30px;}
	.sct-special .slider-special .slick-prev { left: 0px;}
	.sct-special .slider-special .slick-next { right: 0px;}
}
@media (max-width: 641px) {
	.sct-special .ttl { margin-bottom: 40px;}
	.sct-special .slider-special { width: 92%; padding: 0 50px 30px;}
	.sct-special .slider-special a dl dd { font-size: 14px;}
}
@media (max-width: 481px) {
	.sct-special { margin-top: 0px; background: url(../img/top/bg-ptn-6-sp.png) no-repeat 50% 50% / 100% auto;}
	.sct-special .inner-sct { padding: 24vw 0 30vw;}
	.sct-special .ttl { margin-bottom: 30px;}
	.sct-special .ttl h2 { margin-bottom: 6px;}
	.sct-special .ttl h2 img { width: 92%;}
	.sct-special .slider-special { padding: 0px 0px 30px;}
	.sct-special .slider-special a { width: 92%; max-width: 92%;}
	.sct-special .slider-special a dl dd.tit sup { font-size: 10px;}
	.sct-special .slider-special a dl dd.txt sup { font-size: 10px;}
	.sct-special .slider-special .slick-arrow{ top: 26%;}

}

.sct-honey { position: relative; margin-top: -80px; margin-bottom: -120px; background: url(../img/top/bg-ptn-honey.png) no-repeat 50% 50% / cover;}
.sct-honey .inner-sct { position: relative; width: 100%; margin: 0 auto; padding: 80px 0 120px; overflow: hidden;}
.sct-honey h2 { position: relative; margin-bottom: 20px; text-align: center; transition: 1.0s ease; opacity: 0;}
.sct-honey h2:before,
.sct-honey h2:after { content: ''; display: block; width: 1px; height: 60px; background: #000; position: absolute; left: 50%; top: 50%;}
.sct-honey h2:before{ transform: translate(10px,-20%) rotate(45deg);}
.sct-honey h2:after { transform: translate(10px,-20%) rotate(-45deg);}
.sct-honey h2 img { display: inline-block; vertical-align: middle;}
.sct-honey h2 img.l { width: 42%; max-width: 350px; margin-right: 60px;}
.sct-honey h2 img.r { width: 40%; max-width: 320px; margin-left: 60px;}
.sct-honey h3 { margin-bottom: 20px; text-align: center;}
.sct-honey h3 img { position: relative; width: 90%; max-width: 680px; transition: 1.2s ease .2s; opacity: 0; transform: translateY(30px);}
.sct-honey p { position: relative; margin-bottom: 10px; font-size: 18px; text-align: center; transition: 1.2s ease .5s; opacity: 0; transform: translateY(30px);}
.sct-honey p sub { font-size: 12px; vertical-align: bottom;}
.sct-honey .btn { width: 80%; max-width: 360px; margin: 0 auto 20px;}
.sct-honey .btn a { display: block; border-radius: 5px; overflow: hidden; box-shadow: 0 0 8px #999; transition: 1.2s ease .8s; opacity: 0; transform: translateY(30px);}
.sct-honey .btn a:hover { opacity: 0.8;}
.sct-honey .btn a img { width: 100%;}
.sct-honey figure { width: 90%; max-width: 680px; margin: 0 auto; transition: 1.8s ease .8s; opacity: 0;}
.sct-honey figure img { width: 100%;}
.sct-honey .float-item { position: relative; width: 94%; max-width: 1200px; margin: 0 auto;}
.sct-honey .float { position: absolute; width: 160px; height: 380px;}
.sct-honey .item1 { top: -180px; left: 0%; background: url(../img/top/item-ululis-1.png) no-repeat 50% 0 / 100% auto; transform: translate(-100px,0); opacity: 0;}
.sct-honey .item2 { top: -180px; right: 0%; background: url(../img/top/item-honey-1.png) no-repeat 50% 0 / 100% auto; transform: translate(100px,0); opacity: 0;}
.sct-honey .item3 { top: 35%; left: 6%; background: url(../img/top/item-ululis-2.png) no-repeat 50% 40% / 100% auto; transform: translate(-100px,0); opacity: 0;}
.sct-honey .item4 { top: 35%; right: 6%; background: url(../img/top/item-honey-2.png) no-repeat 50% 40% / 100% auto; transform: translate(100px,0); opacity: 0;}
.sct-honey .note { bottom: 140px;}
.sct-honey .note ul { max-width: 300px; padding-right: 50px;}
.sct-honey .note ul li { color: #b4b4b4;}

.sct-honey.show h2 { opacity: 1;}
.sct-honey.show h3 img,
.sct-honey.show p,
.sct-honey.show .btn a { opacity: 1; transform: translateY(0px);}
.sct-honey.show figure { opacity: 1;}
.sct-honey.show .item1 { animation: 1.0s ease move-in .4s forwards;}
.sct-honey.show .item2 { animation: 1.0s ease move-in .4s forwards;}
.sct-honey.show .item3 { animation: 0.8s ease move-in .8s forwards;}
.sct-honey.show .item4 { animation: 0.8s ease move-in .8s forwards;}

@media (min-width: 1401px) {
	.sct-honey { background-size: 100% 100%;}
}
@media (max-width: 1201px) {
	.sct-honey h2 img.l { max-width: 280px; margin-right: 40px;}
	.sct-honey h2 img.r { max-width: 260px; margin-left: 40px;}
	.sct-honey h3 img { max-width: 500px;}
}
@media (max-width: 1001px) {
	.sct-honey .float { width: 120px; height: 285px;}
	.sct-honey p span { display: block;}
}
@media (max-width: 801px) {
	.sct-honey { margin-top: -50px; background: url(../img/top/bg-ptn-honey-sp.png) no-repeat 50% 50% / 100% 100%;}
	.sct-honey .inner-sct { padding: 80px 0 60px;}

	.sct-honey .float-item { margin: 0 auto 30px;}
	.sct-honey .item1 { position: relative; top: 0px; left: 5%; background-position: 50% 50%; transform: translate(-100px,0);opacity: 0;}
	.sct-honey .item2 { top: 50%; right: 5%; background-position: 50% 50%; transform: translate(100px,-50%); opacity: 0;}
	.sct-honey .item3 { top: 0px; left: 23%; background-position: 50% 50%; transform: translate(-100px,0); opacity: 0;}
	.sct-honey .item4 { top: 50%; right: 23%; background-position: 50% 50%; transform: translate(100px,-50%); opacity: 0;}
	.sct-honey figure { margin: 0 auto 30px;}
	.sct-honey.show .item1 { animation: 1.0s ease move-in .4s forwards;}
	.sct-honey.show .item2 { animation: 1.0s ease move-in-sp .4s forwards;}
	.sct-honey.show .item3 { animation: 0.8s ease move-in .8s forwards;}
	.sct-honey.show .item4 { animation: 0.8s ease move-in-sp .8s forwards;}
	.sct-honey .note { bottom: auto;}
	.sct-honey .note ul { max-width: 250px; margin: 0 0 0 auto; padding-right: 20px;}
}
@media (max-width: 481px) {
	.sct-honey .inner-sct { padding: 60px 0 40px;}
	.sct-honey h2 { margin-bottom: 10px;}
	.sct-honey h2:before,
	.sct-honey h2:after { height: 30px;}
	.sct-honey h2:before{ transform: translate(2px,-20%) rotate(45deg);}
	.sct-honey h2:after { transform: translate(2px,-20%) rotate(-45deg);}
	.sct-honey h2 img { display: inline-block; vertical-align: middle;}
	.sct-honey h2 img.l { width: 36%; max-width: 180px; margin-right: 20px;}
	.sct-honey h2 img.r { width: 34%; max-width: 160px; margin-left: 30px;}
	.sct-honey h3 { margin-bottom: 10px;}
	.sct-honey p { margin-bottom: 10px; font-size: 13px;}
	.sct-honey .float { width: 80px; height: 190px;}
	.sct-honey .item1 { left: 2%;}
	.sct-honey .item2 { right: 2%;}
	.sct-honey .item3 { left: 23%;}
	.sct-honey .item4 { right: 23%;}
	.sct-honey figure { margin: 0 auto 10px;}
}


.sct-type { background: #fff url('../img/top/bg-ptn-5.png') no-repeat 50% 100% / 100% auto;}
.sct-type .inner-sct { width: 100%; margin: 0 auto; padding: 80px 0 180px; transition: 0.8s ease; opacity: 0;}
.sct-type p.txt { margin-bottom: 30px; text-align: center;}
.sct-type .ctn { position: relative; width: 100%; max-width: 1080px; margin: 0 auto;}
.sct-type .ctn figure { position: relative; width: 100%; margin: 0 auto; z-index: 1;}
.sct-type .ctn figure img { width: 100%;}
.sct-type .ctn ul { position: absolute; left: 0; bottom: 0; width: 100%; padding-left: 7.5%; font-size: 0; text-align: right; z-index: 2;}
.sct-type .ctn ul li { display: inline-block; width: 25%;}
.sct-type .ctn ul li a { display: block; width: 85%; margin: 0 auto; padding: 8px 0; border-radius: 50px;
 color: #fff; font-size: 20px; font-weight: 700; text-align: center;
}
.sct-type .ctn ul li:nth-child(1) a { background: #ffa824;}
.sct-type .ctn ul li:nth-child(2) a { background: #ff8096;}
.sct-type .ctn ul li:nth-child(3) a { background: #9e63a8;}
.sct-type .ctn ul li a:after { content: ''; display: inline-block; width: 12px; height: 12px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 transform: rotate(45deg); vertical-align: middle;
}
.sct-type .ctn ul li a span { display: inline-block; margin-right: 10px; vertical-align: middle;}
.sct-type .ctn ul li a:hover { opacity: 0.85;}
.sct-type ul.compare-sp { display: none; width: 100%; max-width: 800px; margin: 0 auto;}
.sct-type ul.compare-sp li { width: 100%;}
.sct-type ul.compare-sp li dl dt { position: relative; padding: 12px; text-align: center;}
.sct-type ul.compare-sp li dl dt:after { content: ''; display: block; width: 20px; height: 20px; transform: translate(0,-60%) rotate(38deg) skew(-15deg);
 position: absolute; right: 20px; top: 50%;
}
.sct-type ul.compare-sp li:nth-child(1) { background: #e1f5ff;}
.sct-type ul.compare-sp li:nth-child(1) dl dt:after { border-bottom: solid 3px #4eb8b2; border-right: solid 3px #4eb8b2;}
.sct-type ul.compare-sp li:nth-child(2) { background: #f9ffd2;}
.sct-type ul.compare-sp li:nth-child(2) dl dt:after { border-bottom: solid 3px #ffa824; border-right: solid 3px #ffa824;}
.sct-type ul.compare-sp li:nth-child(3) { background: #ffecf1;}
.sct-type ul.compare-sp li:nth-child(3) dl dt:after { border-bottom: solid 3px #ff8096; border-right: solid 3px #ff8096;}
.sct-type ul.compare-sp li:nth-child(4) { background: #e9d8f5;}
.sct-type ul.compare-sp li:nth-child(4) dl dt:after { border-bottom: solid 3px #9e63a8; border-right: solid 3px #9e63a8;}

.sct-type ul.compare-sp li dl dd { display: none;}
.sct-type ul.compare-sp li dl dt img,
.sct-type ul.compare-sp li dl dd img { width: 100%;}
.sct-type ul.compare-sp li dl dd span { display: block; padding: 15px;}
.sct-type ul.compare-sp li dl dd a { display: block; width: 92%; margin: 0 auto; padding: 8px 0; border-radius: 6px; text-align: center;}
.sct-type ul.compare-sp li:nth-child(2) dl dd span { border-top: solid 1px #f9f2ba;}
.sct-type ul.compare-sp li:nth-child(3) dl dd span { border-top: solid 1px #ffcad4;}
.sct-type ul.compare-sp li:nth-child(4) dl dd span { border-top: solid 1px #d1b3dd;}
.sct-type ul.compare-sp li:nth-child(2) dl dd a { background: #ffa824;}
.sct-type ul.compare-sp li:nth-child(3) dl dd a { background: #ff8096;}
.sct-type ul.compare-sp li:nth-child(4) dl dd a { background: #9e63a8;}
.sct-type ul.compare-sp li dl dd a:after { content: ''; display: inline-block; width: 8px; height: 8px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 transform: rotate(45deg); vertical-align: middle;
}
.sct-type ul.compare-sp li dl dd a em { display: inline-block; margin-right: 10px; color: #fff; font-size: 16px; font-weight: 700; vertical-align: middle;}

.sct-type ul.compare-sp li dl dt.open:after { transform: translate(0,-50%) rotate(218deg) skew(-15deg);}
.sct-type.show .inner-sct { opacity: 1;}
@media (max-width: 801px) {
	.sct-type { background: #fff url('../img/top/bg-ptn-5-sp.png') no-repeat 50% 100% / 100% auto;}
	.sct-type .inner-sct { padding: 120px 0 140px;}
	.sct-type .ctn  { display: none;}
	.sct-type ul.compare-sp { display: block;}
}
@media (max-width: 641px) {
	.sct-type .inner-sct { padding: 120px 0 80px;}
	.sct-type p.txt { font-size: 14px;}
	.sct-type p.txt span { display: block;}
}

/*.sct-lineup { background: #e3f3fc url(../img/top/bg-ptn-5.png) no-repeat 50% 100% / 100% auto;}*/
.sct-lineup { background: url(../img/top/bg-ptn-5.png) no-repeat 50% 100% / 100% auto;}
.sct-lineup .inner-sct { width: 92%; margin: 0 auto; padding: 40px 0 150px; transition: 0.8s ease; opacity: 0;}
.sct-lineup p.txt { margin-bottom: 20px; text-align: center;}
.sct-lineup figure { width: 90%; max-width: 940px; margin: 0 auto 20px;}
.sct-lineup figure img{ width: 100%;}
.sct-lineup .btn { width: 80%; max-width: 420px; margin: 0 auto; box-shadow: 0 1px 8px #ccc; border-radius: 6px; overflow: hidden;}
.sct-lineup .btn a { display: block;}
.sct-lineup .btn a img { width: 100%;}
.sct-lineup.show .inner-sct { opacity: 1;}
@media (max-width: 801px) {
/*	.sct-lineup { background: #e3f3fc url(../img/top/bg-ptn-5-sp.png) no-repeat 50% 100% / 100% auto;}*/
	.sct-lineup { background: #fff url('../img/top/bg-ptn-5-sp.png') no-repeat 50% 100% / 100% auto;}
	.sct-lineup .inner-sct { padding: 40px 0 140px;}
}
@media (max-width: 641px) {
	.sct-lineup p.txt { font-size: 14px;}
}
@media (max-width: 481px) {
	.sct-lineup .inner-sct { padding: 40px 0 80px;}
}

.sct-shop { position: relative; z-index: 1; background: #fff; /* background: #e3f3fc;*/}
.sct-shop .inner-sct { width: 92%; margin: 0 auto; padding: 20px 0px;/* padding: 20px 0 300px;*/}
.sct-shop h2 { margin-bottom: 30px; font-size: 24px; font-weight: 400; text-align: center;}
.sct-shop h2 em { display: block; margin: 0 auto 20px; color: #7e97e5; font-size: 10px;}
.sct-shop p { margin-bottom: 30px; text-align: center;}
.sct-shop .btn { width: 80%; max-width: 420px; margin: 0 auto;}
.sct-shop .btn a { display: block; }
.sct-shop .btn a img { width: 100%;}
@media (max-width: 481px) {
	.sct-shop .inner-sct { padding: 20px 0 40px; /* padding: 20px 0 200px; */}
	.sct-shop h2 { margin-bottom: 15px;}
	.sct-shop p { font-size: 13px;}
}


.sct-present { background: url('../img/top/bg-present.jpg') no-repeat 50% 0 / auto 100%;}
.sct-present .inner-sct { position: relative; width: 92%; margin: 0 auto; padding: 50px 0 120px;}
.sct-present h2 { position: relative; margin-bottom: 120px; text-align: center;}
.sct-present h2 img { width: 100%; max-width: 620px;}
.sct-present h2 img.sp { display: none;}
.sct-present .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 100px;}
.sct-present .ctn:before { content: ''; display: block; width: 110px; height: 110px;
 background: url('../img/top/code_sakura.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 0%; top: 0%; transform: translateY(-50%);
}
.sct-present .ctn .ctn-flex { display: flex; justify-content: space-between;}
.sct-present .img { width: 56%;}
.sct-present .txt { width: 44%;}
.sct-present .img img { width: 96%;}
.sct-present .txt img { width: 92%;}
.sct-present .btn { position: absolute; left: 58%; bottom: 4%; width: 30%;}
.sct-present .btn a { display: block; width: 94%; border-radius: 6px; box-shadow: 0 0 8px #fff; overflow: hidden;}
.sct-present .btn a img { width: 100%;}
.sct-present .btn a img.sp { display: none;}
.sct-present .btn a:hover img { opacity: 0.85;}
@media (min-width: 1601px) {
	.sct-present { background-size: 100% 100%;}
}
@media (max-width: 1201px) {
	.sct-present h2:after { right: 2%;}
}
@media (max-width: 1001px) {
	.sct-present h2 { padding-right: 30px;}
	.sct-present h2:after { width: 100px; height: 100px; right: 0%;}
	.sct-present .ctn { padding: 0 80px;}
	.sct-present .ctn:before { width: 80px; height: 80px;}
}
@media (max-width: 801px) {
	.sct-present h2 { padding-right: 80px;}
	.sct-present h2:after { width: 80px; height: 80px;}
	.sct-present .ctn { padding: 0 60px;}
	.sct-present .ctn:before { width: 60px; height: 60px;}
}
@media (max-width: 641px) {
	.sct-present { background: none;}
	.sct-present .inner-sct { width: 100%; padding: 0px;}
	.sct-present h2 { margin-bottom: 0px; padding-right: 0px;}
	.sct-present h2:after { content: none;}
	.sct-present h2 img.pc { display: none;}
	.sct-present h2 img.sp { display: block; max-width: 100%;}
	.sct-present .ctn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0px;}
	.sct-present .ctn:before { content: none;}
	.sct-present .ctn .ctn-flex { display: none;}
	.sct-present .btn { left: 48%; bottom: auto; top: 72%; width: 48%;}
	.sct-present .btn a img.pc{ display: none;}
	.sct-present .btn a img.sp{ display: block;}
}

#ft.index-ft { margin-top: 0px; /* margin-top: -120px; */}
/* @media (max-width: 641px) {
	#ft { background: #fff;}
} */


.show .ctn .sec01_img{ text-align: center;}	
.show .ctn .sec01_img img{ width: 38%;}	
@media (max-width: 768px) {
	.show .ctn .sec01_img img{ width: 82%;}	
	#lead.show .bg{ padding: 30% 0 50%; }
	#lead.show{
		margin-top: 81%;
	}
	
}

#care .title_sec{position: absolute; top: 0; left: 0; height: 0; width: 100%; padding-top: 22%; transform: translateY(-50%); background: url('../img/title_bg01.png') no-repeat center center / cover;}
#care .title_sec .title_img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -63%); width: 29%;}
#care .title_sec .title_img img { width: 100%; }
@media (max-width: 768px) {
	#care .title_sec{ background: url('../img/sp_title_bg01.png') no-repeat center center / cover;}
	#care .title_sec{ padding-top: 53%; }
	#care .title_sec .title_img{ width: 74%; }
	#lead .note{ bottom: -24%; }
}
/* 
#care{ padding-top:12%; } */

#care .content_box{ width: 48.847926%; position: absolute;}
#care .content_inner{  background: url('../img/point_content_bg.png') no-repeat center center / cover; padding-top: 32%; padding-bottom: 4%; position: relative; animation: 2.4s moving linear infinite; }
#care .content_inner .content_title{ margin-bottom: 6%;}
#care .content_inner .content_title h3{ width: 57.35%; margin: auto	;}
#care .content_inner .content_title h3 img{ width: 100%; }
#care .content_inner .content_txt p{ font-size: 1.3888vw; color: #D09210; text-align: center; line-height: 1.8;}
#care .content_inner .content_txt p span { font-size: 0.6944vw; }
#care .content_inner .content_img{ text-align: center;}
#care .content_inner .content_img img{ width: 30.1886%; }

#care .out_line{ width: 75.3472%; margin: auto; position: relative; padding-top: 81%;}
#care .tyuui{ font-size: 10px; color: #C08408; margin-top: 3%;}
#care .content_box.point_02 .content_inner{ padding-top: 37%; animation-delay: .8s;}
#care .content_box.point_02{ right: 1%; top: 20%;}
#care .content_box.point_02 h3{ width: 65.235%; margin: auto	;}
#care .content_box.point_02 .content_img img{ width: 28.30%; }
#care .content_box.point_02 .tyuui{ max-width: 63%; margin: auto; margin-top: 3%;}

#care .content_box.point_01{ top: 0;}
#care .content_box.point_03 h3{ width: 85.234%; margin: auto	;}
#care .content_box.point_03 .content_inner{ padding-top: 27%; animation-delay: 1.6s;}
#care .content_box.point_03{ left: 11.0599%; top: 55%;}

#care .content_inner:before{display: block; content: ''; position: absolute; left: 0; top: 0; width: 31.32%; height: 0; padding-top: 31.5%; background: url('../img/point01.png') no-repeat center center / cover; transform: translateY(-28%);}
#care .content_box.point_02 .content_inner:before{left: auto; right: 3%; background: url('../img/point02.png') no-repeat center center / cover;}
#care .content_box.point_03 .content_inner:before{background: url('../img/point03.png') no-repeat center center / cover;}

#care .note { position: absolute; right: 5%; bottom: 11%; max-width: 200px;}
@media (max-width: 1439px) and (min-width: 769px) {
	#care .content_box.point_03{ top: 57%;}
}
@media (max-width: 768px) {
	#care .note{ bottom: 7%; }
	#care .content_box{ width: 100%;}
	#care .out_line{ width: 89.74%; margin: auto; position: relative; padding-top: 300%;}
	#care .content_inner .content_txt p{ font-size: 3.3333vw;}
	#care .content_box.point_03{ left: 0%; top: 78%;}
	#care .bg{ padding: 43% 0 56%; }
	#care .content_box.point_02{ top:38%; }
	#care .content_box.point_02 .tyuui{ max-width: 100%;}
	#care .content_box.point_03 .content_inner{ padding-bottom: 4.5%;}
}
@media (max-width: 375px) {
	#care .note{ bottom: 8%; }
	#care .content_box.point_02{ top:39%; }
	#care .content_box.point_03{ top:79%; }
}

#develop .title_sec{position: absolute; top: 0; left: 0; height: 0; width: 100%; padding-top: 22%; transform: translateY(-50%); background: url('../img/title_bg02.png') no-repeat center center / cover;}
#develop .title_sec .title_img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -63%); width: 29%;}
#develop .title_sec .title_img img { width: 100%; }
@media (max-width: 768px) {
	#develop .title_sec{ background: url('../img/sp_title_bg02.png') no-repeat center center / cover;}
	#develop .title_sec{ padding-top: 53%; }
	#develop .title_sec .title_img{ width: 74%; }
	#care .bg{ padding: 43% 0 73%; }
}


#develop .flex { display: flex;  margin-bottom: 4%;}
#develop .flex .inner_box { width: 48%; }
#develop .flex .inner_box:not(:last-child) { margin-right: 4%; }
#develop .flex .inner_box img{ width: 100%; }
#develop .flow_img{ display: flex; align-items: center;  justify-content: center;}
#develop .flow_img img{ width: 100%; }
#develop .flow_img .img_box{ position: relative; }
#develop .flow_img .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; */
}
#develop .flow_img .mask:before{
	content: '';
    display: block;
    width: 40px;
    height: 200px;
    background-color: #fff;
    position: absolute;
    top: -180px;
    left: 0;
    animation: shiny-btn1 3s ease-in-out infinite;
}
#develop .flow_img .inner{
	position: relative;
    width: 100%;
    overflow: hidden;
}
#develop .txt_box{ margin-top: 5%; }
#develop .txt_box p{ font-size:1.25vw; color:#483704; text-align: center; }

@media (max-width: 768px) {
	#develop .flex { display: block; margin-bottom: 14%; }
	#develop .flow_img{ display: block; align-items: center; margin: auto; width: 80%;}
	#develop .flex .inner_box { width: 100%; }
	#develop .flex .inner_box:not(:last-child) { margin-right: 0; margin-bottom: 3%;}
	#develop .txt_box p{ font-size:4.102vw; }
	#develop .flow_img .img_box:nth-child(2n){ padding: 0 1.3%; }
}

#program .title_sec{position: absolute; top: 0; left: 0; height: 0; width: 100%; padding-top: 22%; transform: translateY(-50%); background: url('../img/title_bg03.png') no-repeat center center / cover;}
#program .title_sec .title_img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -63%); width: 18%;}
#program .title_sec .title_img img { width: 100%; }
@media (max-width: 768px) {
	#program .title_sec{ background: url('../img/sp_title_bg03.png') no-repeat center center / cover;}
	#program .title_sec{ padding-top: 53%; }
	#program .title_sec .title_img{ width: 50%; }
	#care .bg{ padding: 43% 0 73%; }
}

#program .content_box {width: 39.9107%; text-align: center;}
#program .content_box img {width: 100%;}
#program .content_box img {width: 100%;}
#program .btn_box a{width: 89.48%; display: block; margin: auto; background: url('../img/btn_img.png') no-repeat center center / cover; padding-top: 19%; transition: 0.5s; }
#program .txt_box p {color: #fff; font-size: 1.041vw;}
#program .btn_box a:hover{background: url('../img/h_btn_img.png') no-repeat center center / cover;}
#program .inner-sct{ max-width: 77.77777%; margin: auto; padding: 30% 0 20%;}
#program .content_box .img_box {margin-bottom: 3%;}
#program .content_box .txt_box {margin-bottom: 10%;}
#program .note{ position: absolute; right: 5%; bottom: 8%; max-width: 200px; }
#program .note ul li{ color: #fff; }
@media (max-width: 768px) {
	#program .inner-sct {width: 87.69230%; padding: 119% 0 20%;}
	#program .js-show {margin-top: 0;}
	#program .content_box {width: 100%; text-align: center;}
	#program .txt_box p {font-size: 2.564vw;}
	#program .note{ bottom: 1%; }
}
@keyframes moving{
	0% { transform: translateY(0px);}
	25% { transform: translateY(6px);}
	50% { transform: translateY(0px);}
	75% { transform: translateY(-6px);}
	100%{ transform: translateY(0px);}
}
#present{position: relative;}
#present .title_sec{position: absolute; top: 0; left: 0; height: 0; width: 100%; padding-top: 22%; transform: translateY(-50%); background: url('../img/title_bg02.png') no-repeat center center / cover; z-index: 4;}
#present .title_sec .title_img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -63%); width: 52%;}
#present .title_sec .title_img img { width: 100%; }
#present .bg { width: 100%;  margin: 0 auto; background: url('../img/bg/camp_bg.jpg') no-repeat center center / cover;}
#present .inner-sct { position: relative; margin: 0 auto; padding: 16% 0 18%;}
#present .content_box {width: 62.10%; text-align: center;}
#present .content_box img {width: 100%;}
#present .content_box img {width: 100%;}
#present .btn_box a{width: 46.83%; display: block; margin: auto; background: url('../img/cam_btn_img.png') no-repeat center center / cover; padding-top: 10%; transition: 0.5s; margin-left: 32%;}
#present .btn_box a:hover{background: url('../img/cam_h_btn_img.png') no-repeat center center / cover;}
#present .inner-sct{ max-width: 94.58%; margin: auto;}
#present .content_box .img_box {margin-bottom: 3%;}
#present .note{     position: absolute;
    right: 5%;
    bottom: 18%;
    max-width: 200px; }
#present .note li { color: #fff; }
@media (max-width: 768px) {
	#present .title_sec{ background: url('../img/sp_title_bg02.png') no-repeat center center / cover;}
	#present .title_sec{ padding-top: 53%; }
	#present .title_sec .title_img{ width: 92%; }
	#care .bg{ padding: 43% 0 73%; }
	#present .bg { background: url('../img/bg/sp_camp_bg.jpg') no-repeat center center / cover;}
	#present .inner-sct { padding: 120vw 0px 45vw;}
	#present .btn_box a{ width: 85.71%; margin-left: auto; padding-top: 18.5%;}
	#present .box .txt p { font-size: 13px;}
	#present .content_box { width: 100%; }
	#present .content_box .img_box{ margin-bottom: 8%; margin-left: -3%;}
	#present .note{ right: 1%;
		bottom: 11%;}
}

section .container {
	max-width: 750px;
	margin: auto;
	width: 100%;
}
img{
	width: 100%;
}
.position_calss{
	position: relative;
}
.position_calss a{
	position: absolute;
}
#sec01 .position_calss a{
    width: 77%;
    height: 0;
    padding-top: 16%;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
}
#sec05 .position_calss a{
	width: 43%;
    height: 0;
    padding-top: 11%;
    left: 40%;
    bottom: 22%;
    transform: translateX(-50%);
}
#sec09 .position_calss a{
    width: 43%;
    height: 0;
    padding-top: 11%;
    left: 40%;
    bottom: 29%;
    transform: translateX(-50%);
}
#sec10 .position_calss a{
    width: 77%;
    height: 0;
    padding-top: 16%;
    left: 50%;
    bottom: 9.5%;
    transform: translateX(-50%);
}