@charset "utf-8";
.mfp-bg { background: rgba(195,230,250,0.58);}

#hd:after { background: rgba(195,230,250,0.58);}
#hd .menu ul.nav li a:hover { color: #7ac8d5;}
#ft .logo { width: 25%;}
#ft .ft-nav-1 { width: 75%;}
#ft .ft-nav-1 ul li a:hover { color: #7ac8d5;}
@media (max-width: 801px) {
	#ft .logo { width: 40%; margin: 0 auto;}
	#ft .ft-nav-1 { width: 100%;}
}

.wrap { background: linear-gradient(90deg,#dff7f6 50%, #f9facd 50%);}

.trig-popup span { display: inline-block; font-size: 32px; font-weight: bold; margin:0 auto 5%;
	background: linear-gradient(90deg,#96c5e5 35%,#eda1c4 65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn { width: 74%; max-width: 340px; margin: 0 auto;}
.btn a { position: relative; display: block; padding: 18px 0;
 background: linear-gradient(90deg,#95dae6,#95dae6 15%,#eddf68 85%, #eddf68); border-radius: 50px;
 color: #fff; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none;
}
.btn a:after { content: ''; position: absolute; right: 20px; top: 50%; display: inline-block; width: 10px; height: 10px; 
 border-top: solid 2px #fff; border-right: solid 2px #fff; transform: translateY(-50%) rotate(45deg); vertical-align: middle;
}
.btn a:hover { opacity: 0.8;}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	.btn a { padding: 12px 0; font-size: 13px;}
}
.note ul li { color: #a2a2a2;}

#kv .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: #fff;}
#kv img { width: 100%;}
#kv img.sp { display: none;}
@media (max-width: 1281px) {
}
@media (max-width: 801px) {
	#kv img.pc { display: none;}
	#kv img.sp { display: block;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
}

.ttl h2 { background: linear-gradient(90deg, #7ac8d5 35%,#d9c308 65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


#lead { background: url('/img/pair2/bg-lead.jpg') no-repeat 50% 0;}
#lead .inner-sct { width: 100%; padding: 90px 0 50px;}
#lead .ctn h2 { margin-bottom: 130px; text-align: center;}
#lead .ctn h2 img { width: 68%; max-width: 380px;}
#lead .ctn p { margin-bottom: 40px; color: #6a6a6a; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem; line-height: 2.1; text-align: center;
 transition: 0.6s ease 0.4s; opacity: 0; transform: scale(0.85);
}
#lead .ctn p span.line { display: block;}
#lead .ctn h3 { margin-bottom: 20px; color: #7ac8d5; font-size: 32px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;
 transition: 0.6s ease 0.4s; opacity: 0;
}
#lead .ctn .movie { width: 76%; max-width: 480px; margin: 0 auto 40px; transition: 0.3s ease 0.6s; opacity: 0;}
#lead .ctn .movie .in { position: relative; width: 100%;}
#lead .ctn .movie .in #play { position: absolute; left: -1px; top: 0; z-index: 10; width: 102%; padding-top: 56.5%;}
#lead .ctn .movie .in #play.fade { opacity: 0; padding-top: 48%;}
#lead .ctn .movie .in #play img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;}
#lead .ctn .movie .frame { position: relative; width: 100%; padding-top: 56.25%; background: #eee; overflow: hidden;}
#lead .ctn .movie .frame iframe{ width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: none;}
#lead .ctn .movie .frame video { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#lead .note ul { text-align: center;}

#lead .ctn.show p { opacity: 1;transform: scale(1);}
#lead .ctn.show h3 { opacity: 1;}
#lead .ctn.show .movie { opacity: 1;}
@media (max-width: 641px) {
	#lead { background: url('/img/pair2/bg-lead@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#lead .ctn h2 { margin-bottom: 30vw;}
}
@media (max-width: 481px) {
	#lead .inner-sct { padding: 90px 0 30px;}
	#lead .ctn p { margin-bottom: 30px; font-size: 14px; font-weight: 400;}
	#lead .ctn p span.line-sp { display: block;}
	#lead .ctn h3 { margin-bottom: 10px; font-size: 21px;}
	#lead .ctn  .movie { margin: 0 auto 12px;}
	#lead .note ul { width: 90%; margin: 0 auto; text-align: left;}
}


@keyframes shake {
	0% { transform: translate(2px, 0px);}
	5% { transform: translate(-2px, 0px);}
 10% { transform: translate(2px, 0px);}
 15% { transform: translate(-2px, 0px);}
 20% { transform: translate(2px, 0px);}
 25% { transform: translate(-2px, 0px);}
 30% { transform: translate(0px, 0px);}
}

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes topBubbles {
   0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;}
  50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;}
 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
	 background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}
@keyframes bottomBubbles {
   0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;}
  50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}
 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
	 background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}
@keyframes showInOut {
	0% { opacity: 0;}
 10% { opacity: 1;}
 90% { opacity: 1;}
100% { opacity: 0;}
}


#point .inner-sct { width: 100%;}
#point .top-ctn { padding: 72px 0 80px; transition: 0.3s ease; opacity: 0;}
#point .top-ctn .ttl { margin-bottom: 32px; text-align: center;}
#point .top-ctn p.read { margin-bottom: 30px; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem; line-height: 2.2; text-align: center;}
#point .top-ctn p.read span.line { display: block;}
#point .top-ctn .point-nav { width: 92%; max-width: 680px; margin: 0 auto 40px;}
#point .top-ctn .point-nav ul { width: 100%; margin: 0 auto; font-size: 0; text-align: center;}
#point .top-ctn .point-nav ul li { display: inline-block; width: 25%; }
#point .top-ctn .point-nav ul li a { display: block; width: 92%; max-width: 130px; margin: 0 auto;}
#point .top-ctn .point-nav ul li a img { width: 100%;}
#point .top-ctn .point-nav ul li a:hover { opacity: 0.8;}
#point .top-ctn .note ul { text-align: center;}
#point .tips { background: linear-gradient(90deg,#7ac8d5 50%, #dcdf58 50%); transition: 0.4s linear; opacity: 0;}
#point .tips h3 { text-align: center;}
#point .tips h3 img { width: 92%; max-width: 530px;}
#point .top-ctn.show { opacity: 1;}
#point .tips.show { opacity: 1;}
@media (max-width: 641px) {
	#point .top-ctn { padding: 50px 0 40px;}
	#point .top-ctn .ttl { margin-bottom: 32px;}
}
@media (max-width: 481px) {
	#point .top-ctn { padding: 40px 0 20px;}
	#point .top-ctn .ttl { margin-bottom: 15px;}
	#point .top-ctn p.read { margin-bottom: 20px; font-size: 13px;}
	#point .top-ctn .point-nav { margin: 0 auto 20px;}
	#point .top-ctn .note ul { width: 90%; margin: 0 auto; text-align: left;}
}

@keyframes point1a {
	 0% { transform: translate(-50%,20px); opacity: 0;}
  50% { opacity: 1;}
  60% { transform: translate(-50%,0px); opacity: 1;}
  90% { transform: translate(-50%,0px); opacity: 1;}
 100% { transform: translate(-50%,0px); opacity: 0;}
}
@keyframes point1b {
	 0% { transform: translate(-50%,-120px); opacity: 0;}
  50% { opacity: 1;}
  60% { transform: translate(-50%,0px);}
  90% { transform: translate(-50%,0px); opacity: 1;}
 100% { transform: translate(-50%,0px); opacity: 0;}
}
@keyframes point2a {
	 0% { transform: translate(-50%,-120px) scale(1.6); opacity: 0;}
  20% { opacity: 1;}
  90% { opacity: 1;}
 100% { transform: translate(-50%,100px) scale(0.05); opacity: 0;}
}
@keyframes moving {
	0% { transform: translateY(0px);}
 50% { transform: translateY(10px);}
100% { transform: translateY(0px);}
}
@keyframes movingX1 {
	0% { transform: translateX(0px); opacity: 0;}
 20% { opacity: 1;}
 90% { opacity: 1;}
100% { transform: translateX(150px); opacity: 0;}
}
@keyframes movingX2 {
	0% { transform: translateX(0px); opacity: 0;}
 20% { opacity: 1;}
 90% { opacity: 1;}
100% { transform: translateX(-150px); opacity: 0;}
}
@keyframes movingX1sp {
	0% { transform: translateX(0px); opacity: 0;}
 20% { opacity: 1;}
 90% { opacity: 1;}
100% { transform: translateX(90px); opacity: 0;}
}
@keyframes movingX2sp {
	0% { transform: translateX(0px); opacity: 0;}
 20% { opacity: 1;}
 90% { opacity: 1;}
100% { transform: translateX(-90px); opacity: 0;}
}

#point .bloc .bloc-inner { padding: 0px 0 60px;}
#point .bloc .bloc-inner.pt { padding-top: 40px;}
#point .shampoo { position: relative;}
#point .treatment { border-top: solid 3px #fff;}
#point .hairmist { border-top: solid 3px #fff;}
#point .shampoo .inner { position: relative; padding: 40px 0 60px; z-index: 2;}
#point .treatment .inner { padding: 60px 0;}
#point .hairmist .inner { padding: 60px 0 0;}
#point .shampoo .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
#point .shampoo .bg video { position: absolute; left: 50%; transform: translateX(-50%); min-width: 100%; min-height: 100%;}
#point .shampoo .bg video.sp { display: none;}
#point .note ul { width: 92%; margin: 0 auto; text-align: center;}
#point .note ul.w500 { max-width: 500px; text-align: left;}
#point .note ul.w700 { max-width: 700px; text-align: left;}

#point h3.type { margin-bottom: 40px; text-align: center; opacity: 0; transition: 0.4s linear 1.4s;}
#point h3.type img { width: 85%; max-width: 570px;}
#point h3.type.show { opacity: 1;}
#point .ctn { position: relative; width: 100%; max-width: 780px; margin: 0 auto 12px;}
#point .ctn.mb { margin-bottom: 20px;}
#point .ctn .package-1 { width: 20%; max-width: 250px; margin: 0 auto; padding: 110px 0 60px;}
#point .ctn .package-1 figure { position: relative; text-align: center;}
#point .ctn .package-1 figure img { width: 80%; max-width: 120px;}
#point .ctn .package-1 figure img.img-1 { position: absolute; left: 50%; z-index: 1; transform: translate(-50%,20px); opacity: 0;}
#point .ctn .package-1 figure img.img-2 { position: absolute; left: 50%; z-index: 2; transform: translate(-50%,-120px); opacity: 0;}
#point .ctn .package-1 figure img.base { position: relative; width: 80%; max-width: 120px; transition: 0.4s linear 0.5s; opacity: 0; z-index: 3;}

#point .ctn.show .package-1 figure img.img-1 { animation: point1a 0.8s linear forwards;}
#point .ctn.show .package-1 figure img.img-2 { animation: point1b 0.8s cubic-bezier(0.64, 0, 0.78, 0) forwards;}
#point .ctn.show .package-1 figure img.base { opacity: 1;}

#point .ctn .package-2 { width: 20%; max-width: 250px; margin: 0 auto; padding: 120px 0 80px;}
#point .ctn .package-2 figure { position: relative; text-align: center;}
#point .ctn .package-2 figure img { width: 80%; max-width: 120px;}
#point .ctn .package-2 figure img.img-0 { position: absolute; z-index: 2; left: 50%; transform: translate(-50%,-120px) scale(1.6); opacity: 0;}
#point .ctn .package-2 figure img.img-1 { position: absolute; z-index: 1; left: 50%; transform: translate(-50%,20px); opacity: 0;}
#point .ctn .package-2 figure img.base { position: relative; transition: 0.4s linear 0.5s; opacity: 0; z-index: 3;}
#point .ctn .package-2 .bubble { position: absolute; transition: 0.6s linear 1.2s; opacity: 0;}
#point .ctn .package-2 .bubble.bubble-1 { width: 16px; top: 14%; left: 50%; transform: translateX(-50%); margin-left: -90px;}
#point .ctn .package-2 .bubble.bubble-2 { width: 27px; top: 18%; left: 50%; transform: translateX(-50%); margin-left: 80px;}
#point .ctn .package-2 .bubble.bubble-3 { width: 27px; top: 60%; left: 50%; transform: translateX(-50%); margin-left: -110px;}
#point .ctn .package-2 .bubble.bubble-4 { width: 16px; top: 65%; left: 50%; transform: translateX(-50%); margin-left: -80px;}
#point .ctn .package-2 .bubble.bubble-5 { width: 42px; top: 60%; left: 50%; transform: translateX(-50%); margin-left: 90px;}
#point .ctn .package-2 .bubble:before { content: ''; display: block; width: 100%; padding-top: 100%;
 background: url('/img/pair2/point/bubble-1.png') no-repeat 50% 50% / 100% 100%;
 animation: moving 2.8s linear infinite;
}
#point .ctn .package-2 .bubble.bubble-2:before { animation-delay: 0.4s;}
#point .ctn .package-2 .bubble.bubble-3:before { animation-delay: 0.6s;}
#point .ctn .package-2 .bubble.bubble-5:before { animation-delay: 0.2s;}
#point .ctn.show .package-2 .bubble { opacity: 1;}
#point .ctn.show .package-2 figure img.img-0 { animation: point2a 0.8s linear 0.4s forwards;}
#point .ctn.show .package-2 figure img.img-1 { animation: point1a 1.0s cubic-bezier(0.64, 0, 0.78, 0) forwards;}
#point .ctn.show .package-2 figure img.base { opacity: 1;}


#point .ctn .package-3 { width: 20%; max-width: 250px; margin: 0 auto; padding: 100px 0 150px;}
#point .ctn .package-3 figure { position: relative; text-align: center; transition: 0.4s linear 0.62s; opacity: 0;}
#point .ctn .package-3 figure img { width: 80%; max-width: 120px;}
#point .ctn .package-3 .bubble { position: absolute; width: 100px; top: 35%; left: 50%; transform: translateX(-50%); z-index: 10; transition: 0.4s linear; opacity: 0;}
#point .ctn .package-3 .bubble div { display: block; width: 100%; padding-top: 100%; background: url('/img/pair1/point/bubble-2.png') no-repeat 50% 50% / 100% 100%;}
#point .ctn .package-3 .bubble:before,
#point .ctn .package-3 .bubble:after { content: ''; display: block; width: 180%; height: 100%; position: absolute; left: -20%; z-index: -1000;
 transition: all ease-in-out 5s; background-repeat: no-repeat;
}
#point .ctn .package-3 .bubble:before { display: none; top: -35%;
    background-image:
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%);
  background-size: 20% 20%, 30% 30%, 35% 35%, 30% 30%, 28% 28%, 20% 20%, 25% 25%, 20% 20%, 28% 28%;
}
#point .ctn .package-3 .bubble:after{ display: none; bottom: -35%;
    background-image:  
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%),
    radial-gradient(circle, #fff 20%, transparent 30%);
  background-size: 25% 25%, 30% 30%, 28% 28%, 30% 30%, 25% 25%, 20% 20%, 30% 30%;
}
#point .ctn.show .package-3 figure { opacity: 1;}
#point .ctn.show .package-3 .bubble{ animation: showInOut 0.8s ease-in-out forwards;}
#point .ctn.show .package-3 .bubble div { animation: purun 0.6s linear forwards;}
#point .ctn.show .package-3 .bubble:before{ display: block; animation: topBubbles ease-in-out 0.85s forwards;}
#point .ctn.show .package-3 .bubble:after{ display: block; animation: bottomBubbles ease-in-out 0.85s forwards;}

#point .ctn .l,
#point .ctn .r { position: absolute; top: 0; width: 38%; transition: 0.4s linear 1.0s; opacity: 0;}
#point .ctn .l { left: 0; transform: translateX(-80px);}
#point .ctn .r { right: 0; transform: translateX(80px);}
#point .ctn .l h3,
#point .ctn .r h3 { margin-bottom: 10px; text-align: center;}
#point .ctn .l h3 img,
#point .ctn .r h3 img { width: 92%;}
#point .ctn .l h4,
#point .ctn .r h4 { margin-bottom: 12px; font-size: 18px; font-weight: 700; line-height: 1.8; text-align: center;}
#point .ctn .l h4 { color: #49b5c7;}
#point .ctn .r h4 { color: #b09e00;}
#point .ctn .l p,
#point .ctn .r p { font-size: 16px; font-weight: 700; line-height: 1.8; text-align: center;}
#point .ctn .l p.lh1 { line-height: 1.4;}
#point .ctn.show .l,
#point .ctn.show .r { opacity: 1; transform: translateX(0px);}

#point .ctn .descript { transition: 0.4s linear 0.8s; opacity: 0;}
#point .ctn .descript dl { margin-bottom: 8px; text-align: center;}
#point .ctn .descript dl dt { margin-bottom: 8px; text-align: center;}
#point .ctn .descript dl dt img { width: 24%; max-width: 80px; border-radius: 50%;}
#point .ctn .descript dl dt img.shake { animation: shake 2s infinite;}
#point .ctn .descript dl dd { text-align: center;}
#point .ctn .descript dl dd img { width: 80%; max-width: 500px;}
#point .ctn .descript p { text-align: center;}
#point .ctn .descript p img { width: 80%; max-width: 500px;}
#point .ctn.show .descript { opacity: 1;}

#point .memo { position: relative; width: 84%; max-width: 400px; margin: 0 auto; padding: 8px; padding-left: 55px; border-radius: 10px;
 background: #7ac8d5;
}
#point .memo:before { content: ''; display: block; width: 40px; height: 48px;
 background: url('/img/top/icn-point.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
}
#point .memo p { color: #fff; font-size: 14px; line-height: 1.4; text-align: left !important;}

#point .shake2 { position: relative; width: 84%; max-width: 500px; margin: 0 auto 20px; padding-top: 12px;}
#point .shake2 .shake-txt { position: absolute; left: 0; top: 0; width: 100%; z-index: 2;}
#point .shake2 .shake-txt img { width: 36%; max-width: 180px;}
#point .shake2 .img { position: relative; width: 60%; max-width: 240px; margin: 0 auto;}
#point .shake2 .img figure { position: relative; width: 100%; padding-top: 100%; border-radius: 20px; background: #fff; overflow: hidden; text-align: center; z-index: 1;}
#point .shake2 .img figure img { width: 150%; position: absolute; left: 50%; top: 50%; transform: translate(-45%,-50%);}
/*
#point .shake .img figure img { width: 120%; position: absolute; right: -20%; top: 50%; transform: translate(0%,-50%) rotate(0deg); transform-origin: 100% 50%;
 animation: shake2 1.0s linear infinite;
}
*/
#point .shake2 .img:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;
 background: url('/img/pair2/point/shake-icn.png') no-repeat 50% 50% / 100% auto;
}
@keyframes shake2 {
  0% { transform: translate(0%,-50%) rotate(0deg);}
 20% { transform: translate(0%,-52%) rotate(8deg);}
 45% { transform: translate(0%,-54%) rotate(-2deg);}
 70% { transform: translate(0%,-50%) rotate(-10deg);}
100% { transform: translate(0%,-50%) rotate(0deg);}
}

#point .txt-2 { margin-bottom: 30px; padding-top: 40px; transition: 0.4s linear; opacity: 0;}
#point .txt-2 p { font-size: 20px; font-weight: 700; line-height: 1.85; text-align: center;}
#point .essence { position: relative; width: 90%; max-width: 520px; margin: 0 auto; background: url('/img/pair2/point/2-fig.png') no-repeat 50% 40% / auto 72%;
 transition: 0.4s linear; opacity: 0;
}
#point .essence:after { content: ''; display: block; width: 100%; padding-top: 92%;}

#point .essence .icn { position: absolute; width: 20%; transition: 0.4s linear 0.4s; opacity: 0;}
#point .essence .icn.icn-1 { top: 0%; left: 12%;}
#point .essence .icn.icn-2 { top: 23%; left: 0%;}
#point .essence .icn.icn-3 { top: 48%; left: 0%;}
#point .essence .icn.icn-4 { bottom: 5%; left: 12%;}
#point .essence .icn.icn-5 { top: 0%; right: 12%;}
#point .essence .icn.icn-6 { top: 23%; right: 0%;}
#point .essence .icn.icn-7 { top: 48%; right: 0%;}
#point .essence .icn.icn-8 { bottom: 5%; right: 12%;}
#point .essence .icn:before { content: ''; display: block; width: 100%; padding-top: 100%; animation: moving 2.8s linear infinite;}
#point .essence .icn.icn-1:before { background: url('/img/pair2/point/2-icn-1.png') no-repeat 50% 50% / cover;}
#point .essence .icn.icn-2:before { background: url('/img/pair2/point/2-icn-2.png') no-repeat 50% 50% / cover; animation-delay: 0.3s;}
#point .essence .icn.icn-3:before { background: url('/img/pair2/point/2-icn-3.png') no-repeat 50% 50% / cover;}
#point .essence .icn.icn-4:before { background: url('/img/pair2/point/2-icn-4.png') no-repeat 50% 50% / cover; animation-delay: 0.2s;}
#point .essence .icn.icn-5:before { background: url('/img/pair2/point/2-icn-5.png') no-repeat 50% 50% / cover;}
#point .essence .icn.icn-6:before { background: url('/img/pair2/point/2-icn-6.png') no-repeat 50% 50% / cover; animation-delay: 0.2s;}
#point .essence .icn.icn-7:before { background: url('/img/pair2/point/2-icn-7.png') no-repeat 50% 50% / cover; animation-delay: 0.5s;}
#point .essence .icn.icn-8:before { background: url('/img/pair2/point/2-icn-8.png') no-repeat 50% 50% / cover;}

#point .txt-2.show { opacity: 1;}
#point .essence.show { opacity: 1;}
#point .essence.show .icn { opacity: 1;}


#point .txt-3 { margin-bottom: 30px; padding-top: 40px; text-align: center; transition: 0.4s linear; opacity: 0;}
#point .txt-3 figure { margin-bottom: 10px;}
#point .txt-3 figure img { width: 80%; max-width: 580px;}
#point .txt-3 p { font-size: 20px; font-weight: 700; line-height: 1.85;}
#point .txt-3.show { opacity: 1;}

#point .fusion { position: relative; width: 100%; max-width: 780px; margin: 0 auto; padding: 40px 0;}
#point .fusion:after { content: ''; display: block; width: 100%; height: 100%;
 position: absolute; left: 0; top: 0; z-index: 1; background: url('/img/pair2/point/bg-4.png') no-repeat 50% 80%;
 transition: 0.4s linear 0.6s; opacity: 0;
}
#point .fusion .package-L,
#point .fusion .package-R { position: absolute; left: 0; top: 12%; width: 100%;}
#point .fusion .package-L dl,
#point .fusion .package-R dl { position: relative; width: 32%; max-width: 200px; margin: 0 auto; text-align: center;}
#point .fusion .package-L dl { transform: translateX(-180px);}
#point .fusion .package-R dl { transform: translateX(180px);}
#point .fusion .package-L dl dt,
#point .fusion .package-R dl dt { margin-bottom: 30px; padding-top: 30px; opacity: 0;}
#point .fusion .package-L dl dt img,
#point .fusion .package-R dl dt img { width: 90%;}
#point .fusion .package-L dl dd,
#point .fusion .package-R dl dd { position: relative; opacity: 0;}
#point .fusion .package-L dl dd img,
#point .fusion .package-R dl dd img { width: 72%;}
#point .fusion .logo { width: 32%; max-width: 180px; margin: 0 auto 20px; transition: 0.4s linear 0.4s; opacity: 0;}
#point .fusion .logo img{ width: 100%;}
#point .fusion .package { position: relative; width: 28%; max-width: 160px; margin: 0 auto; transition: 0.4s linear 0.4s; opacity: 0; z-index: 2;}
#point .fusion .package img{ width: 100%;}
#point .fusion.show .package-L dl dt,
#point .fusion.show .package-R dl dt { animation: showInOut 0.6s ease-in-out forwards;}
#point .fusion.show .package-L dl dd { animation: movingX1 0.6s linear forwards;}
#point .fusion.show .package-R dl dd { animation: movingX2 0.6s linear forwards;}
#point .fusion.show:after { opacity: 1}
#point .fusion.show .logo { opacity: 1;}
#point .fusion.show .package { opacity: 1;}

#point .txt-4 { margin-bottom: 30px;}
#point .txt-4 p { font-size: 20px; font-weight: 700; line-height: 1.85; text-align: center;}
@media (max-width: 801px) {
	#point .ctn { overflow: hidden;}
	#point .ctn .l h4,
	#point .ctn .r h4 { font-size: 16px;}
}
@media (max-width: 641px) {
	#point .ctn .l h4,
	#point .ctn .r h4 { font-size: 14px;}
	#point .ctn .l p,
	#point .ctn .r p { font-size: 13px;}

	#point .ctn .package-1 { padding: 90px 0 60px;}
	#point .ctn .package-1 figure img.img-1 { transform: translate(-50%,20px);}
	#point .ctn .package-1 figure img.img-2 { transform: translate(-50%,-80px);}
	#point .shampoo .bg video.pc { display: none;}
	#point .shampoo .bg video.sp { display: block;}
	#point .shampoo .bg video { top: 50%; transform: translate(-50%,-50%);}


	#point .ctn .package-2 { padding: 80px 0 60px;}
	#point .ctn .package-2 figure img.img-1 { transform: translate(-50%,20px);}

	#point .ctn .package-2 .bubble.bubble-1 { width: 16px; top: 14%; left: 50%; transform: translateX(-50%); margin-left: -90px;}
	#point .ctn .package-2 .bubble.bubble-2 { width: 27px; top: 18%; left: 50%; transform: translateX(-50%); margin-left: 80px;}
	#point .ctn .package-2 .bubble.bubble-3 { width: 27px; top: 60%; left: 50%; transform: translateX(-50%); margin-left: -110px;}
	#point .ctn .package-2 .bubble.bubble-4 { width: 16px; top: 65%; left: 50%; transform: translateX(-50%); margin-left: -80px;}
	#point .ctn .package-2 .bubble.bubble-5 { width: 42px; top: 60%; left: 50%; transform: translateX(-50%); margin-left: 90px;}

	#point .ctn .package-3 { padding: 80px 0 120px;}

	#point .note ul.tl { text-align: left;}

	#point .txt-2 { margin-bottom: 20px;}
	#point .txt-2 p { font-size: 16px;}

	#point .txt-3 { margin-bottom: 20px;}
	#point .txt-3 p { font-size: 16px;}
	#point .fusion { overflow: hidden;}

	#point .txt-4 { margin-bottom: 20px;}
	#point .txt-4 p { font-size: 16px;}
	#point .txt-4 p span.line { display: block;}
}
@media (max-width: 481px) {
	#point .bloc .bloc-inner { padding: 0px 0 40px;}
	#point .treatment { border-width: 2px;}
	#point .hairmist { border-width: 2px;}
	#point .shampoo .inner  { padding: 30px 0;}
	#point .treatment .inner  { padding: 30px 0;}
	#point .hairmist .inner  { padding: 30px 0 0;}
	#point h3.type { margin-bottom: 20px;}

	#point .ctn.mb { margin-bottom: 12px;}

	#point .ctn .package-2 { padding: 90px 0 100px;}
	#point .ctn .package-2 figure img.img-0 { transform: translate(-50%,-80px) scale(1.4);}
	#point .ctn .package-2 .bubble.bubble-1 { width: 10px; top: 14%; margin-left: -36px;}
	#point .ctn .package-2 .bubble.bubble-2 { width: 18px; top: 18%; margin-left: 40px;}
	#point .ctn .package-2 .bubble.bubble-3 { width: 18px; top: 40%; margin-left: -45px;}
	#point .ctn .package-2 .bubble.bubble-4 { width: 10px; top: 56%; margin-left: -20px;}
	#point .ctn .package-2 .bubble.bubble-5 { width: 25px; top: 50%; margin-left: 45px;}

	#point .ctn .package-3 { padding: 80px 0 140px;}
	#point .ctn .package-3 .bubble { width: 80px; top: 30%;}

	#point .ctn .l,
	#point .ctn .r { width: 50%;}
	#point .ctn .l h4,
	#point .ctn .r h4 { font-size: 11px;}
	#point .ctn .l p,
	#point .ctn .r p { font-size: 10px; line-height: 2.2;}
	
	#point .ctn .descript dl dt img { max-width: 50px;}
	#point .memo { padding: 4px; padding-left: 45px; border-radius: 6px;}
	#point .memo:before { width: 32px; height: 45px; left: 6px;}
	#point .memo p { font-size: 11px; text-align: left;}

	#point .txt-2 { margin-bottom: 12px; padding-top: 20px;}
	#point .txt-2 p { font-size: 13px;}
	#point .txt-3 { margin-bottom: 12px; padding-top: 20px;}
	#point .txt-3 p { font-size: 13px;}
	#point .txt-4 { margin-bottom: 12px;}
	#point .txt-4 p { font-size: 13px;}

	#point .fusion { padding: 20px 0;}
	#point .fusion:after { background-size: 100% auto;}
	#point .fusion .logo { margin: 0 auto 12px;}
	#point .fusion .package-L dl { transform: translateX(-110px);}
	#point .fusion .package-R dl { transform: translateX(110px);}
	#point .fusion.show .package-L dl dd { animation: movingX1sp 0.6s linear forwards;}
	#point .fusion.show .package-R dl dd { animation: movingX2sp 0.6s linear forwards;}
}


#products { transition: 0.4s linear; opacity: 0;}
#products .inner-sct { width: 100%;}
#products .view { position: relative;}
#products .view .ttl { position: absolute; top: 9%; z-index: 2;}
#products .view .bg { position: relative; width: 100%; z-index: 1;}
#products .view .bg img { width: 100%;}
#products .view .bg img.sp { display: none;}
#products .view .btn-trig { position: absolute; bottom: 9%; width: 100%; z-index: 2;}
#products .view .btn-trig div { position: relative; display: block; width: 72%; max-width: 340px; margin: 0 auto; padding: 20px 0;
 background: linear-gradient(90deg,#95dae6,#95dae6 15%,#eddf68 85%, #eddf68); border-radius: 50px;
 color: #fff; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
#products .view .btn-trig div:before,
#products .view .btn-trig div:after { content: ''; position: absolute; right: 20px; top: 50%; display: block; width: 22px; height: 2px; background: #fff;}
#products .view .btn-trig div:before{ transform: translateY(-50%);}
#products .view .btn-trig div:after { transform: translateY(-50%) rotate(90deg); transition: 0.3s linear;}
#products .view .btn-trig div:hover { opacity: 0.8;}
#products .view .btn-trig.open div:after { transform: translateY(-50%) rotate(180deg);}
#products.show { opacity: 1;}
@media (max-width: 641px) {
	#products .view .bg img.pc { display: none;}
	#products .view .bg img.sp { display: block;}
	#products .view .btn-trig { bottom: 5%;}
	#products .view .btn-trig div { padding: 12px 0; font-size: 14px;}
	#products .view .btn-trig div:before,
	#products .view .btn-trig div:after { right: 15px; width: 18px;}
}
#products .hide-ctn { display: none; padding-bottom: 40px;}
#products .bloc .ctn { width: 100%; max-width: 980px; margin: 0 auto; padding: 80px 0 20px; text-align: center;}
#products .bloc .ctn#step-1 { background: url('/img/pair2/product/step-1.png') no-repeat 5% 50px / 120px auto;}
#products .bloc .ctn#step-2 { background: url('/img/pair2/product/step-2.png') no-repeat 5% 50px / 120px auto;}
#products .bloc .ctn#step-3 { background: url('/img/pair2/product/step-3.png') no-repeat 5% 50px / 120px auto;}
#products .bloc .ctn p.tit { margin-bottom: 20px; text-align: center;}
#products .bloc .ctn p.tit img { width: 72%; max-width: 210px;}
#products .bloc .ctn figure { margin-bottom: 30px;}
#products .bloc .ctn figure img { width: 88%; max-width: 420px;}
#products .bloc .ctn h3 { margin-bottom: 16px;}
#products .bloc .ctn h3 img { width: 88%; max-width: 430px;}
#products .bloc .ctn p.txt { margin-bottom: 20px; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem;}
#products .bloc .ctn aside { margin-bottom: 20px;}
#products .bloc .ctn aside h4 { margin-bottom: 6px;}
#products .bloc .ctn aside h4 span { display: block;}
#products .bloc .ctn aside h4 span.icn { width: 100px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden;}
#products .bloc .ctn aside h4 span.icn img { width: 100%;}
#products .bloc .ctn aside h4 span.tit { width: 85%; max-width: 420px; margin: 0 auto;}
#products .bloc .ctn aside h4 span.tit img { width: 100%;}
#products .bloc .ctn aside .memo { position: relative; width: 80%; max-width: 350px; margin: 0 auto; padding: 8px; padding-left: 50px; border-radius: 10px;
 background: #7ac8d5;
}
#products .bloc .ctn aside .memo:before { content: ''; display: block; width: 40px; height: 48px;
 background: url('/img/pair2/icn-point.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
}
#products .bloc .ctn aside .memo p { color: #fff; font-size: 14px; text-align: left;}
#products .bloc .ctn aside figure { margin-bottom: 0px;}
#products .bloc .ctn aside figure img { max-width: 430px; }
#products .bloc .ctn p.aroma { margin-bottom: 25px;}
#products .bloc .ctn p.aroma img { width: 94%; max-width: 480px; }
#products .bloc .ctn .cart { width: 80%; max-width: 470px; margin: 0 auto 18px;}
#products .bloc .ctn .cart span { position: relative; display: block; width: 100%; padding: 12px 0; background: #a2a2a2; border-radius: 50px; color: #fff;}
#products .bloc .ctn .cart span:after { content: ''; display: block; width: 10px; height: 10px;
 border-top: solid 2px #fff; border-right: solid 2px #fff; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#products .bloc .ctn .cart span svg{ display: inline-block; width: 20px; margin-right: 10px; fill: #fff; vertical-align: middle;}
#products .bloc .ctn .cart span em { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: 0.05rem; vertical-align: middle;}
#products .bloc .ctn .cart a { position: relative; display: block; width: 100%; padding: 12px 0; background: linear-gradient(90deg,#95dae6,#95dae6 15%,#eddf68 85%, #eddf68); border-radius: 50px; color: #fff; text-decoration: none;}
#products .bloc .ctn .cart a:after { content: ''; display: block; width: 10px; height: 10px; 
 border-top: solid 2px #fff; border-right: solid 2px #fff; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#products .bloc .ctn .cart a svg{ display: inline-block; width: 20px; margin-right: 10px; fill: #fff; vertical-align: middle;}
#products .bloc .ctn .cart a em { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: 0.05rem; vertical-align: middle;}
#products .bloc .ctn .cart a:hover{ opacity: 0.8;}
#products .bloc .ctn p.price { margin-bottom: 30px; font-size: 17px; font-weight: 700;}
#products .bloc .note ul { width: 92%; max-width: 500px; margin: 0 auto;}
@media (max-width: 641px) {
	#products .bloc .ctn p.txt { font-size: 16px;}
	#products .bloc .ctn p.txt span.br { display: block;}
	#products .bloc .ctn aside h4 span.icn { width: 85px;}
	#products .bloc .ctn aside .memo{ padding: 5px; padding-left: 50px; border-radius: 6px;}
	#products .bloc .ctn aside .memo:before { width: 32px; height: 40px; left: 9px;}
	#products .bloc .ctn aside .memo p { font-size: 12px;}
	#products .bloc .note ul { text-align: left;}
}
@media (max-width: 481px) {
	#products .bloc .ctn { padding: 40px 0 12px;}
	#products .bloc .ctn#step-1 { background-size: 90px auto; background-position: 2% 30px;}
	#products .bloc .ctn#step-2 { background-size: 90px auto; background-position: 2% 30px;}
	#products .bloc .ctn#step-3 { background-size: 90px auto; background-position: 2% 30px;}
	#products .bloc .ctn p.tit { margin-bottom: 6px;}
	#products .bloc .ctn p.tit img { width: 50%; max-width:50%;}
	#products .bloc .ctn figure { margin-bottom: 8px;}
	#products .bloc .ctn h3 { margin-bottom: 8px;}
	#products .bloc .ctn p.txt { font-size: 13px;}
	#products .bloc .ctn p.aroma { margin-bottom: 6px;}
	#products .bloc .ctn aside { margin-bottom: 8px;}
	#products .bloc .ctn p.price { margin-bottom: 15px; font-size: 13px;}

	#products .bloc .ctn .cart span { padding: 12px 0;}
	#products .bloc .ctn .cart span:after { width: 8px; height: 8px; right: 12px;}
	#products .bloc .ctn .cart span svg{ width: 15px; margin-right: 8px;}
	#products .bloc .ctn .cart span em { font-size: 12px;}
	#products .bloc .ctn .cart a { padding: 12px 0;}
	#products .bloc .ctn .cart a:after { width: 8px; height: 8px; right: 12px;}
	#products .bloc .ctn .cart a svg{ width: 15px; margin-right: 8px;}
	#products .bloc .ctn .cart a em { font-size: 12px;}
}


#faq { background: linear-gradient(90deg,#d9effc,#f7f7d2); transition: 0.4s linear; opacity: 0;}
#faq .inner-sct { width: 100%; padding: 60px 0;}
#faq .ctn { width: 90%; max-width: 800px; margin: 0 auto;}
#faq .ctn ul li { border-bottom: solid 0.5px #6a6a6a;}
#faq .ctn ul li dl dt,
#faq .ctn ul li dl dd { position: relative; font-size: 17px; font-weight: 700;}
#faq .ctn ul li dl dt { padding: 30px 60px 35px 120px; cursor: pointer;}
#faq .ctn ul li dl dd { display: none; padding: 20px 20px 30px; padding-left: 120px;}
#faq .ctn ul li dl dt span.icn,
#faq .ctn ul li dl dd span.icn { position: absolute; left: 8px; color: #fff; font-size: 48px; font-weight: 700; line-height: 1;}
#faq .ctn ul li dl dt span.icn { top: 50%; transform: translateY(-60%);}
#faq .ctn ul li dl dd span.icn { top: 10px;}
#faq .ctn ul li dl dd span.kome { display: block; padding-top: 10px; font-size: 13px;}
#faq .ctn ul li dl dt:before,
#faq .ctn ul li dl dt:after { content: ''; display: block; width: 27px; height: 3px; background: #6a6a6a;
 position: absolute; right: 20px; top: 50%;
}
#faq .ctn ul li dl dt:before{ transform: translateY(-50%);}
#faq .ctn ul li dl dt:after { transform: translateY(-50%) rotate(90deg); transition: 0.3s ease;}
#faq .ctn ul li dl dt.open:after { transform: translateY(-50%) rotate(180deg);}
#faq.show { opacity: 1;}
@media (max-width: 641px) {
	#faq .ctn ul li dl dt,
	#faq .ctn ul li dl dd { font-size: 15px;}
	#faq .ctn ul li dl dt { padding: 20px 40px 25px 100px;}
	#faq .ctn ul li dl dd { display: none; padding: 20px 15px 30px; padding-left: 100px;}
	#faq .ctn ul li dl dt span.icn,
	#faq .ctn ul li dl dd span.icn { font-size: 6.8vw;}
	#faq .ctn ul li dl dt:before,
	#faq .ctn ul li dl dt:after { width: 24px; height: 2px; right: 10px;}
}
@media (max-width: 481px) {
	#faq .inner-sct { padding: 40px 0;}
	#faq .ctn ul li dl dt,
	#faq .ctn ul li dl dd { font-size: 13px;}
	#faq .ctn ul li dl dt { padding: 10px 30px 12px 70px;}
	#faq .ctn ul li dl dd { display: none; padding: 8px 15px 12px; padding-left: 70px;}
	#faq .ctn ul li dl dt:before,
	#faq .ctn ul li dl dt:after { width: 18px; right: 5px;}
	#faq .ctn ul li dl dd span.kome { font-size: 10px;}
}

#shop { background: url('/img/pair2/bg-shop.jpg') no-repeat 50% 0% / cover;}
#shop .inner-sct { width: 100%; padding: 100px 0 60px;}
#shop .ttl { margin-bottom: 60px;}
#shop .ctn h3 { margin-bottom: 25px; font-size: 26px; font-weight: 700; letter-spacing: 0.14rem; text-align: center;}
#shop .ctn p { margin-bottom: 50px; font-size: 14px; text-align: center;}
#shop .campaign { position: relative; width: 88%; max-width: 700px; margin: 0 auto; padding-top: 60px;}
#shop .campaign figure img { width: 100%;}
#shop .campaign .btn-campaign { position: absolute; bottom: 75px; width: 100%;}
#shop .campaign .btn-campaign a { display: block; width: 42%; max-width: 290px; margin: 0 30px 0 auto; border-radius: 50px; overflow: hidden;}
#shop .campaign .btn-campaign a img { width: 100%;}
#shop .campaign .btn-campaign a:hover { opacity: 0.8;}
@media (max-width: 641px) {
	#shop { background: url('/img/pair2/bg-shop@sp.jpg') no-repeat 50% 50% / cover;}
	#shop .ctn h3 span{ display: block;}
	#shop .campaign .btn-campaign { bottom: 10vw;}
}
@media (max-width: 481px) {
	#shop .inner-sct { padding: 40px 0 30px;}
	#shop .ttl { margin-bottom: 30px;}
	#shop .ctn h3 { margin-bottom: 8px; font-size: 18px;}
	#shop .ctn p { margin-bottom: 30px; font-size: 12px;}
	#shop .campaign { padding-top: 20px;}
	#shop .campaign .btn-campaign a { margin: 0 10px 0 auto;}
}


#choose {}
#choose .inner-sct { width: 100%; padding: 70px 0 60px;}
#choose .ttl { margin-bottom: 20px;}
#choose h3 { margin-bottom: 12px; font-size: 26px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#choose p.min { margin-bottom: 30px; font-size: 17px; text-align: center;}
#choose p.min span { display: block;}
#choose .ctn { margin-bottom: 20px;}
#choose .ctn ul { width: 96%; max-width: 540px; margin: 0 auto; font-size: 0; text-align: center;}
#choose .ctn ul li { position: relative; display: inline-block; width: 50%; padding: 0 12px;}
#choose .ctn ul li img { width: 100%; border-radius: 30px;}
#choose .ctn ul li .btn-more-moist,
#choose .ctn ul li .btn-more-repair { position: absolute; left: 0; bottom: 15px; width: 100%;}
#choose .ctn ul li .btn-more-moist a,
#choose .ctn ul li .btn-more-repair a { position: relative; display: block; width: 82%; margin: 0 auto; padding: 12px 0; border-radius: 50px;
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
}
#choose .ctn ul li .btn-more-moist a { background: #60bbe1;}
#choose .ctn ul li .btn-more-repair a{ background: #f2aecc;}
#choose .ctn ul li .btn-more-moist a:after ,
#choose .ctn ul li .btn-more-repair a:after{ content: ''; display: block; width: 12px; height: 12px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#choose .ctn ul li .btn-more-moist a:hover,
#choose .ctn ul li .btn-more-repair a:hover { opacity: 0.8;}
#choose .note ul { text-align: center;}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#choose .inner-sct { padding: 40px 0 30px;}
	#choose .ttl { margin-bottom: 20px;}
	#choose h3 { margin-bottom: 4px; font-size: 18px;}
	#choose p.min { margin-bottom: 30px; font-size: 13px;}
	#choose .ctn { margin-bottom: 12px;}
	#choose .ctn ul li { padding: 0 6px;}
	#choose .ctn ul li img { border-radius: 15px;}
	#choose .ctn ul li .btn-more-moist,
	#choose .ctn ul li .btn-more-repair { bottom: 10px;}
	#choose .ctn ul li .btn-more-moist a,
	#choose .ctn ul li .btn-more-repair a { padding: 8px 0; font-size: 13px;}
	#choose .ctn ul li .btn-more-moist a:after ,
	#choose .ctn ul li .btn-more-repair a:after{ width: 10px; height: 10px; right: 15px;}
	#choose .note ul { width: 92%; margin: 0 auto; text-align: left;}
}



#online { background: #cdedf1;}
#online .inner-sct { width: 100%; padding: 80px 0;}
#online .ctn { width: 80%; max-width: 570px; margin: 0 auto;}
#online .btn-online { width: 100%; margin: 0 auto 40px;}
#online .btn-online a { display: block; width: 100%; padding: 25px 0; background: #fff; border-radius: 20px; font-size: 20px; font-weight: bold; text-align: center;
 transition: 0.3s linear;
}
#online .btn-online a:after { content: ''; position: relative; display: inline-block; width: 10px; height: 10px; 
 border-top: solid 2px #d9c308; border-right: solid 2px #d9c308; transform: rotate(45deg); vertical-align: middle;
}
#online .btn-online a span { display: inline-block; margin-right: 20px; vertical-align: middle;
 background: linear-gradient(90deg, #7ac8d5 35%,#d9c308 65%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
#online .btn-online a:hover { opacity: 0.8;}
#online ul { width: 60%; max-width: 360px; margin: 0 auto; font-size: 0; text-align: center;}
#online ul li { display: inline-block; width: 50%; }
#online ul li a { display: block; width: 52px; margin: 0 auto; transition: 0.3s linear;}
#online ul li a img { width: 100%;}
#online ul li a:hover { opacity: 0.5;}
@media (max-width: 481px) {
	#online .inner-sct { padding: 50px 0;}
	#online .btn-online a { padding: 16px 0; border-radius: 10px; font-size: 16px;}
	#online ul li a { width: 40px;}
}



.popup-box .tit h3 { display: inline-block; font-size: 42px; font-weight: 700; letter-spacing: 0.15rem; line-height: 1; text-align: center;
  background: linear-gradient(90deg,#7ac8d5,#7ac8d5 35%,#d9c308 65%, #d9c308);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.popup-box .tit p { display: inline-block; font-size: 18px; font-weight: 700; letter-spacing: 0.15rem; line-height: 1; text-align: center;
  background: linear-gradient(90deg,#7ac8d5,#7ac8d5 35%,#d9c308 65%, #d9c308);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.popup-box .ctn ul li a:hover { border-color: #7ac8d5; color: #7ac8d5;}
.popup-box .ctn ul li form input[type="image"]:hover{ background: #7ac8d5; border: solid 1px #7ac8d5;}


/* Page of SHOP */
#shoplist {}
#shoplist .inner-sct { width: 100%; padding: 100px 0;}
#shoplist .ttl { margin-bottom: 60px;}
#shoplist .ctn h3 { margin-bottom: 20px; font-size: 28px; font-weight: 700; letter-spacing: 0.14rem; text-align: center;}
#shoplist .ctn p { margin-bottom: 50px; font-size: 14px; text-align: center;}
#shoplist .ctn ul { width: 90%; max-width: 920px; margin: 0 auto; font-size: 0;}
#shoplist .ctn ul li { display: inline-block; width: 33.3334%; padding: 14px 10px; font-size: 17px; font-weight: 700; vertical-align: top;}
#shoplist .ctn ul li.up2 { display: none;}
#shoplist .ctn ul li a { position: relative; display: block; border: solid 4px #fff; border-radius: 10px; padding: 1px;
 background: linear-gradient(90deg,#9bced0 15%,#e1e386 85%);
 color: #6a6a6a; text-decoration: none;
}
#shoplist .ctn ul li a:before,
#shoplist .ctn ul li a:after { content: ''; display: block; position: absolute; top: 50%;}
#shoplist .ctn ul li a:before{ width: 28px; height: 100px; left: 12px; background: url('/img/pair2/icn.png') no-repeat 50% 50% / 100% auto;
 transform: translateY(-50%); z-index: 2;
}
#shoplist .ctn ul li a:after { width: 8px; height: 8px; border-top: solid 2px #6a6a6a; border-right: solid 2px #6a6a6a;
 right: 18px; transform: translateY(-50%) rotate(45deg); z-index: 2;
}
#shoplist .ctn ul li a span { position: relative; display: block; padding: 20px; padding-left: 48px; background: #fff; border-radius: 6px; z-index: 1;}
#shoplist .ctn ul li a:hover { opacity: 0.8;}
@media (max-width: 801px) {
	#shoplist .ctn ul li { width: 50%; padding: 10px 8px; font-size: 16px;}
	#shoplist .ctn ul li a span { padding: 15px; padding-left: 48px;}
}
@media (max-width: 641px) {
	#shoplist .ctn h3 span{ display: block;}
}
@media (max-width: 481px) {
	#shoplist .inner-sct { padding: 80px 0 30px;}
	#shoplist .ttl { margin-bottom: 30px;}
	#shoplist .ctn h3 { margin-bottom: 8px; font-size: 18px;}
	#shoplist .ctn p { margin-bottom: 30px; font-size: 12px;}
	#shoplist .ctn ul li { padding: 8px; font-size: 11px;}
	#shoplist .ctn ul li a { border-width: 2px; border-radius: 6px;}
	#shoplist .ctn ul li a:before{ width: 14px; left: 8px;}
	#shoplist .ctn ul li a:after { width: 5px; height: 5px; border-width: 1px; right: 10px;}
	#shoplist .ctn ul li a span { padding: 8px; padding-left: 26px; border-radius: 4px;}
}