@charset'utf-8';

:root { --shoesplus-bl:5,142,164; --shoesplus-gr:22,161,132; --shoesplus-gl:128,111,44; }



/*==============================
	common
==============================*/
#sp-shoes.plus { font-weight:500; line-height:1em; }
#sp-shoes.plus > section:nth-of-type(n+2) { margin-top:6em; }
#sp-shoes.plus > section.bg-color { padding:6em 0; }


/*title*/
#sp-shoes.plus h2 {	width:calc(100% - 1em);	margin:0 auto 1.6em;	text-align:center;	font-size:1.6em; font-weight:600; letter-spacing:2px;	}
#sp-shoes.plus h2:not([class]) { line-height:1.6em; }
#sp-shoes.plus h2.ttl {	width:calc(100% - 4em);	max-width:18em; }
#sp-shoes.plus h2.ttl:before {	position:relative;	top:.5em;	content:'';	display:block;	width:100%;	height:1px;	margin:auto;	background:#35380A; }
#sp-shoes.plus h2 em {
 display:inline-block;
 margin-bottom:1em;
 padding:0 .4em .6em;
 font-size:.7em;
 font-style:normal;
 line-height:1em;
 letter-spacing:.1em;
 color:rgba(var(--shoesplus-gr),1);
 border-bottom:.2em solid;
}
#sp-shoes.plus h2:not([class]) span { font-size:.8em; }
#sp-shoes.plus h2.ttl span {	position:relative;	padding:0 .6em;	background:#fff; }
#sp-shoes.plus h2 b { color:rgba(var(--shoesplus-bl),1); }


@media screen and (max-width:768px) {
#sp-shoes.plus > section:nth-of-type(n+2) { margin-top:4em; }
#sp-shoes.plus > section.bg-color { padding:4em 0; }
#sp-shoes.plus h2 {	font-size:1.5em; }
#sp-shoes.plus h2.ttl {	width:calc(100% - 2em); }
}

@media screen and (max-width:425px) {
#sp-shoes.plus h2 {	margin-bottom:1em; font-size:1.36em; }
#sp-shoes.plus h2.ttl span { padding:0 .4em; }
}

@media screen and (max-width:320px) {
#sp-shoes.plus h2 { letter-spacing:1px; }
}



/*==============================
	main
==============================*/
#sp-shoes.plus #main-vs { position:relative; max-width:1400px; height:50vw; max-height:700px; margin:4em auto 0; text-align:center; }
#sp-shoes.plus #main-vs picture { position:absolute; top:0; left:0; display:block; width:100%; aspect-ratio:7/4; z-index:-1; }
#sp-shoes.plus #main-vs img { display:block; width:100%; }

#sp-shoes.plus #main-vs h1 {
 position:absolute;
 bottom:2em;
 right:2em;
 display:flex;
 flex-wrap:wrap;
 align-content:center;
 text-align:center;
}

#sp-shoes.plus #main-vs h1 * { display:block; width:100%; margin:auto; z-index:1; }
#sp-shoes.plus #main-vs h1 img { width:calc(100% - 12em); min-width:160px; }
#sp-shoes.plus #main-vs h1 span { margin-top:1.6em; }

#sp-shoes.plus #main-vs p:not([class]) { position:absolute; top:-3em; width:100%; padding:1em 0; color:#fff; background:rgba(var(--shoesplus-bl),.8); }
#sp-shoes.plus #main-vs .catch { max-width:20em; margin:auto; padding-top:1em; font-size:2em; font-weight:600; letter-spacing:1px; color:rgba(var(--shoesplus-bl),1); }
#sp-shoes.plus #main-vs .catch span { display:inline-block; margin:.2em; padding:.6em; background:#fff; }


@media screen and (max-width:1440px) {
#sp-shoes.plus #main-vs { margin-bottom:0; }
#sp-shoes.plus #main-vs h1 { bottom:1em;right:1em;max-width:24em; max-height:24em; }
#sp-shoes.plus #main-vs .catch { padding-top:2vw; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#sp-shoes.plus #main-vs h1 {bottom:.5em;right:.5em; }
#sp-shoes.plus #main-vs .catch { font-size:1.6em; }
}

@media screen and (max-width:768px) {
#sp-shoes.plus #main-vs { height:110vw; max-height:880px;  }
#sp-shoes.plus #main-vs picture { aspect-ratio:10/11; }
#sp-shoes.plus #main-vs h1 { }
#sp-shoes.plus #main-vs h1:before { top:4vw; left:4vw; width:calc(100% - 8vw); height:calc(100% - 8vw); }
#sp-shoes.plus #main-vs .catch { font-size:5vw; }
}

@media screen and (max-width:425px) {
#sp-shoes.plus #main-vs { }
#sp-shoes.plus #main-vs h1 {   }
#sp-shoes.plus #main-vs h1 img { min-width:140px; }
#sp-shoes.plus #main-vs h1 span { margin-top:1.4em; font-size:.8em; }
#sp-shoes.plus #main-vs p:not([class]) { font-size:3.76vw; }
#sp-shoes.plus #main-vs .catch { padding-top:4vw; font-size:4.8vw; }
}
/*==============================
	trouble
==============================*/

#sp-shoes.plus #trouble { position:relative; max-width:1400px; /*height:50vw; max-height:700px;*/ margin:4em auto 0; text-align:center; }
#sp-shoes.plus #trouble picture {  display:block; width:100%; /*aspect-ratio:7/4;*/ z-index:-1; }
#sp-shoes.plus #trouble img { display:block; width:100%; }


/*==============================
	lineup
==============================*/
#sp-shoes.plus #lineup li > a:first-child:hover { background:rgba(var(--shoesplus-bl),.1); }



/*==============================
	about
==============================*/
#sp-shoes.plus #about p { text-align:center; font-size:1.1em; line-height:2em; letter-spacing:1px; }
#sp-shoes.plus #about p span { display:block; }
#sp-shoes.plus #about p span:nth-of-type(n+2) { margin-top:1em; }
#sp-shoes.plus #about p b { padding:0 .2em; color:rgba(var(--shoesplus-bl),1); background:rgba(var(--shoesplus-bl),.1); }
#sp-shoes.plus #about .img { display:flex; max-width:800px; }
#sp-shoes.plus #about picture { display:block; width:calc(100%/2); }
#sp-shoes.plus #about img { display:block; width:100%; }


@media screen and (min-width:1441px) {
#sp-shoes.plus #about { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
#sp-shoes.plus #about h2 { width:100%; }
#sp-shoes.plus #about p { margin:0 2em; font-size:1.2em; line-height:2.2em; }
#sp-shoes.plus #about .img { max-width:600px; }
}

@media screen and (max-width:1440px) {
#sp-shoes.plus #about .img { margin:2em auto 0; }
}

@media screen and (max-width:768px) {
#sp-shoes.plus #about p { font-size:1em; }
}

@media screen and (max-width:425px) {
#sp-shoes.plus #about p { font-size:4vw; letter-spacing:0; }
}

@media screen and (max-width:320px) {
#sp-shoes.plus #about h2 span { display:block; }
}



/*==============================
	review
==============================*/
#sp-shoes.plus #review { position:relative; padding-top:10em; background:rgba(var(--shoesplus-gl),.1); }

#sp-shoes.plus #review h2 strong { position:relative; top:.1em; margin-left:.2em; font-size:1.6em; font-weight:500; letter-spacing:0; color:#b43636; }
#sp-shoes.plus #review h2 svg,
#sp-shoes.plus #review h2 i { position:relative; width:.8em; }
#sp-shoes.plus #review h2 svg { top:1px; margin-right:.1em; fill:rgba(var(--shoesplus-gl),1); }
#sp-shoes.plus #review h2 i { top:-2px; font-style:normal; color:rgba(var(--shoesplus-gl),1); }
#sp-shoes.plus #review h2 + .info { width:calc(100% - 2em); max-width:36em; margin:-3em auto 3em; text-align:right; font-size:12px; }

#sp-shoes.plus #review .balloon { position:absolute; top:4em; left:0; right:0; text-align:center; line-height:1.4em; background:#fff; }
#sp-shoes.plus #review .balloon * { background:#f2f0e9; }
#sp-shoes.plus #review .balloon:before,
#sp-shoes.plus #review .balloon:after { position:absolute; left:0; right:0; content:''; display:block; margin:auto; }
#sp-shoes.plus #review .balloon:before { width:calc(100% - 2em); max-width:20em; height:4em; border:1px solid; border-radius:4em; z-index:2; }
#sp-shoes.plus #review .balloon:after { bottom:-4.5em; width:1em; height:1em; border:1px solid; transform:rotate(45deg); z-index:1; }
#sp-shoes.plus #review .balloon span { position:absolute; top:-1px; left:0; right:0; display:block; z-index:3; }
#sp-shoes.plus #review .balloon span:after { position:absolute; bottom:calc(-1.4em + 1px); left:0; right:0; content:''; width:1.6em; height:1em; margin:auto; background:#f2f0e9; }
#sp-shoes.plus #review .balloon em { text-decoration:underline; font-style:normal; }

#sp-shoes.plus #review ul { max-width:1000px; margin:auto; }
#sp-shoes.plus #review li { max-width:50em; background:#fff; }
#sp-shoes.plus #review li h3 { display:flex; justify-content:center; align-items:center; margin-bottom:1em; line-height:1.6em; color:rgba(var(--shoesplus-gl),1); }
#sp-shoes.plus #review li h3 picture { display:block; width:4em; margin-right:.4em; padding:.4em; background:rgba(var(--shoesplus-gl),.1); border-radius:50%; }
#sp-shoes.plus #review li h3 img { display:block; width:100%; }
#sp-shoes.plus #review li h3 span { font-size:1.1em; }
#sp-shoes.plus #review li > p { line-height:1.6em; }


@media screen and (min-width:769px) {
#sp-shoes.plus #review ul { width:calc(100% - 4em); }
#sp-shoes.plus #review li { width:80%; padding:3em; }
}

@media screen and (max-width:768px) {
#sp-shoes.plus #review ul { width:calc(100% - 2em); }
#sp-shoes.plus #review li { width:100%; padding:2em 1em; }
}

@media screen and (min-width:426px) {
#sp-shoes.plus #review h2 br { display:none; }
#sp-shoes.plus #review li:nth-of-type(even) { margin-left:auto; }
#sp-shoes.plus #review li:nth-of-type(n+2) { margin-top:1em; }
#sp-shoes.plus #review li h3 br { display:none; }
}

@media screen and (max-width:425px) {
#sp-shoes.plus #review { margin-top:0; padding-top:8em; }
#sp-shoes.plus #review h2 + .info { margin:-1.6em auto 1.6em; }
#sp-shoes.plus #review .balloon { top:3em; font-size:.9em; }
#sp-shoes.plus #review ul { width:100%; padding:0 1em 1em; overflow-x:auto; white-space:nowrap; }
#sp-shoes.plus #review li { display:inline-block; width:calc(100% - 1em); vertical-align:top; white-space:normal; }
#sp-shoes.plus #review li > p { font-size:.9em; }
}



/*==============================
	lead
==============================*/
#sp-shoes.plus .lead { position:relative; padding:2em 0; text-align:center; background:linear-gradient(rgba(var(--shoesplus-gl),.1),rgba(var(--shoesplus-bl),.08)); }
#sp-shoes.plus .lead p { font-size:1.2em; font-weight:600; line-height:2.4em; letter-spacing:.1em; }
#sp-shoes.plus .lead p b { position:relative; top:.1em; margin:0 .1em; font-size:1.5em; }

#sp-shoes.plus .lead img[alt*='item-'] { position:absolute; width:1em; margin:auto; }
#sp-shoes.plus .lead img[alt*='normal'] { top:-1em; left:-22em; right:0; width:2em; transform:rotate(-10deg); }
#sp-shoes.plus .lead img[alt*='plus'] { top:4em; left:0; right:-27em; width:2.8em; transform:rotate(12deg); }

#sp-shoes.plus .lead picture:last-of-type { display:block; width:100%; max-width:1400px; margin:2em auto 0; }
#sp-shoes.plus .lead img[alt='image'] { display:block; width:100%; }


@media screen and (min-width:1025px) {
#sp-shoes.plus .lead { font-size:1.2em; }
}

@media screen and (max-width:768px) {
#sp-shoes.plus .lead img[alt*='normal'] { top:.6em; left:-21em; width:1.6em; }
#sp-shoes.plus .lead img[alt*='plus'] { top:5em; right:-23em; width:1.8em; }
#sp-shoes.plus .lead picture:last-of-type { margin-top:1em; }
}

@media screen and (max-width:425px) {
#sp-shoes.plus .lead p { font-size:4.6vw; }
#sp-shoes.plus .lead img[alt*='normal'] { top:0; left:1em; right:auto; }
#sp-shoes.plus .lead img[alt*='plus'] { left:auto; right:.6em; }
}



/*==============================
	point
==============================*/
#sp-shoes.plus #point { margin-top:0; text-align:center; background:rgba(var(--shoesplus-bl),.08); }
#sp-shoes.plus #point img { display:block; }

#sp-shoes.plus #point h2 strong { font-size:1.2em; }
#sp-shoes.plus #point h3 {
 margin-bottom:1.6em;
 padding:1em 0;
 text-align:center;
 font-size:1.4em;
 line-height:1.6em;
 letter-spacing:1px;
 color:rgba(var(--shoesplus-bl),1);
 background:rgba(var(--shoesplus-bl),.08);
}
#sp-shoes.plus #point h3:nth-of-type(n+2) { margin-top:2em; }

#sp-shoes.plus #point dl { display:flex; flex-wrap:wrap; justify-content:center; margin:auto; }
#sp-shoes.plus #point dt { width:100%; margin-bottom:.2em; font-size:1.3em; letter-spacing:1px; }
#sp-shoes.plus #point dd { width:8em; margin:1em 1em 0; }
#sp-shoes.plus #point dd img { width:100%; margin-bottom:1em; border-radius:50%; }
#sp-shoes.plus #point dd p { font-size:1.1em; }
#sp-shoes.plus #point dl + p { margin-top:2em; line-height:1.6em; }

#sp-shoes.plus #point .design { position:relative; margin:auto; padding:2em; background:#fff; border-radius:50%; }
#sp-shoes.plus #point .design img { border-radius:2em; }

#sp-shoes.plus #point .cocoen { position:relative; margin:auto; overflow:inherit; }
#sp-shoes.plus #point .cocoen > div:first-child,
#sp-shoes.plus #point picture .cocoen > div { width:56%; }
#sp-shoes.plus #point .cocoen-drag { left:56%; width:.2em; margin-left:-.2em; }
#sp-shoes.plus #point .cocoen-drag:before,
#sp-shoes.plus #point .cocoen-drag:after { position:absolute; top:0; bottom:0; content:''; margin:auto; animation:move 4s ease infinite; }
#sp-shoes.plus #point .cocoen-drag:before {	left:calc(50% - 2em);	width:4em;	height:4em;	background:rgba(var(--shoesplus-bl),.8);	border-radius:50%; }
#sp-shoes.plus #point .cocoen-drag:after { left:calc(50% - 1em); display:block; width:2em; height:2em; background:url(img/cocoen-arrow.svg) center / 100% no-repeat; transform:rotate(45deg); }

@keyframes move {
0% { transform:translateX(0)rotate(45deg); }
30% { transform:translateX(-5px)rotate(45deg); }
70% { transform:translateX(5px)rotate(45deg); }
100% { transform:translateX(0)rotate(45deg); }
}


@media screen and (min-width:1025px) {
#sp-shoes.plus #point dl + p br { display:none; }
#sp-shoes.plus #point .design { font-size:1.2em; }
}

@media screen and (max-width:1024px) {
#sp-shoes.plus #point h2 strong { display:block; }
#sp-shoes.plus #point dl { max-width:30em; font-size:.9em; }
}

@media screen and (min-width:769px) {
#sp-shoes.plus #point .design { width:30em; height:30em; }
#sp-shoes.plus #point .cocoen,
#sp-shoes.plus #point .design img { width:16em!important; }
}

@media screen and (max-width:768px) {
#sp-shoes.plus #point h3 { font-size:1.3em; }
#sp-shoes.plus #point dl { font-size:.9em; }
#sp-shoes.plus #point dd { margin:1em .6em 0; }
#sp-shoes.plus #point .design { width:76vw; height:76vw; }
#sp-shoes.plus #point .cocoen,
#sp-shoes.plus #point .design img { width:40vw!important; }
}

@media screen and (max-width:425px) {
#sp-shoes.plus #point h3 { font-size:1.1em; }
#sp-shoes.plus #point dl { font-size:.8em; }
#sp-shoes.plus #point .design { width:96vw; height:96vw; }
#sp-shoes.plus #point .cocoen,
#sp-shoes.plus #point .design img { width:48vw!important; }
}



/*==============================
	point cocoen
==============================*/



/*==============================
	mechanism
==============================*/
#sp-shoes.plus #mechanism picture { display:block; width:100%; margin:auto; }
#sp-shoes.plus #mechanism > picture { width:calc(100% - 2em); max-width:600px; box-shadow:2px 2px 8px rgba(0,0,0,.1); }
#sp-shoes.plus #mechanism img { display:block; width:100%; }

#sp-shoes.plus #mechanism h2:nth-of-type(n+2) { margin:2em auto 1em; }
#sp-shoes.plus #mechanism h2 strong { font-size:1.2em; }

#sp-shoes.plus #mechanism > p { width:calc(100% - 1em); margin:auto; text-align:center; line-height:2em; }
#sp-shoes.plus #mechanism > p span { display:block; }
#sp-shoes.plus #mechanism > p:last-of-type { margin-top:2em; font-size:1.2em; }

#sp-shoes.plus #mechanism > *:not(h2) + *:not(h2):not(dl) { margin-top:1em; }

#sp-shoes.plus #mechanism dl { width:calc(100% - 2em); max-width:600px; margin:1.6em auto 0; padding:2em; font-size:.9em; line-height:1.6em; background:#f3f3f3; }
#sp-shoes.plus #mechanism dl > * { background:#f3f3f3; }
#sp-shoes.plus #mechanism dt { padding-bottom:.6em; font-size:1.2em; letter-spacing:1px; }
#sp-shoes.plus #mechanism dd picture { margin-top:1em; }
#sp-shoes.plus #mechanism dd + dd { padding-top:1em; }


@media screen and (min-width:1025px) {
#sp-shoes.plus #mechanism > p { font-size:1.06em; }
#sp-shoes.plus #mechanism > p span { display:block; }
}

@media screen and (min-width:769px) {
#sp-shoes.plus #mechanism h2:last-of-type br { display:none; }
#sp-shoes.plus #mechanism > p { word-break:keep-all; word-wrap:break-word; }
#sp-shoes.plus #mechanism > p:not(:last-of-type) br { display:none; }
#sp-shoes.plus #mechanism > p:last-of-type br:last-of-type { display:none; }
}

@media screen and (max-width:768px) {
#sp-shoes.plus #mechanism h2:first-of-type strong { display:block; }
}

@media screen and (max-width:425px) {
#sp-shoes.plus #mechanism > picture { width:100%; box-shadow:none; }
#sp-shoes.plus #mechanism > p { font-size:.96em; }
#sp-shoes.plus #mechanism > p:last-of-type { font-size:4.6vw; }
#sp-shoes.plus #mechanism dl { padding:2em 1em; }
#sp-shoes.plus #mechanism dt { font-size:1.1em; letter-spacing:0; }
}



/*==============================
	use
==============================*/
#sp-shoes.plus #use h2 strong { font-size:1.2em; }

#sp-shoes.plus #use li { position:relative; max-width:800px; }
#sp-shoes.plus #use li img { display:block; width:100%; }
#sp-shoes.plus #use li p {
 position:absolute;
 bottom:1em;
 left:1em;
 padding:1.4em 1.6em;
 font-size:1.4em;
 font-weight:600;
 letter-spacing:1px;
 color:rgba(var(--shoesplus-bl),1);
 background:rgba(255,255,255,.9);
 border-radius:5em 6em;
}

#sp-shoes.plus #use li b { font-size:1.2em; }

#sp-shoes.plus #use ul + p { margin-top:1em; text-align:center; line-height:1.6em; }
#sp-shoes.plus #use ul + p span { display:inline-block; }
#sp-shoes.plus #use ul + p span + span:before { content:'/'; margin:0 .6em; }
#sp-shoes.plus #use ul + p span b { font-size:1.1em; font-weight:500; }


@media screen and (min-width:1025px) {
#sp-shoes.plus #use { font-size:1.1em; }
}

@media screen and (min-width:769px) {
#sp-shoes.plus #use ul { display:flex; justify-content:center; align-items:stretch; }
#sp-shoes.plus #use li { width:calc(100%/2); }
}

@media screen and (max-width:768px) {
#sp-shoes.plus #use li:nth-of-type(n+2) { margin-top:.6em; }
#sp-shoes.plus #use li p { font-size:1.2em; }
}

@media screen and (max-width:425px) {
#sp-shoes.plus #use li p { font-size:4.6vw; }
#sp-shoes.plus #use ul + p { font-size:.9em; }
}