/* ------------------------------
	about
------------------------------- */

#about_main {
/*	width:100vw; */
	width: calc( var(--vw) * 100 );
	display:block;
	text-align:center;
	padding-bottom:5.0em;
	background: linear-gradient(360deg, rgb(229, 239, 243), rgb(255, 255, 255));
}

#about_main > h1 {
	margin-top:4.0em;
}
#about_main > h1.index_ttl {
	font-size:300% !important;
	margin-top:3.0em;
	margin-bottom:1.0em;
}
#about_main > h1.sub_ttl {
	font-size:190% !important;
	margin-top:2.0em;
	margin-bottom:2.0em;
}

#about_main > p {
	width:90%;
	max-width:29.0em;
	margin:2.0em auto;
}

@media only screen and (max-width: 849px) {
#about_main {
	margin-top:2.5em;
}
#about_main > h1.index_ttl {
	width:90%;
	text-align:center !important;
	margin:0em auto 0.5em auto;
}
#insole > h1.index_ttl {
	width:90%;
	text-align:left !important;
}
#product_atten > h1.index_ttl {
	width:90%;
	text-align:left !important;
	margin-left:0.4em !important;
	font-size:200% !important;
}
#about_main > h1.sub_ttl {
	width:90%;
	text-align:center;
	margin:2.0em auto 2.0em auto;
}
#about_main > p {
	width:90%;
	max-width:800px;
	margin:2.0em auto;
}
}


#about p.num {
	width:2.0em;
	height:2.0em;
	font-size:120% !important;
	line-height:2.0em;
	text-align:center;
	color:#fff;
	background:#2a98c3;
	border-radius:50% 50%;
	margin:0 auto 0.7em 0 !important;
}
#about span.marker {
	position:relative;
}
#insole span.marker {
	margin-left:-0.5em;
}
#about span.marker:before {
	content:"";
	display:block;
	width:100%;
	height:0.7em;
	background:#aed8e8;
	position:absolute;
	bottom:-0.1em;
	left:50%;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	z-index:-1;
}
#insole span.marker:before {
	content:"";
	display:block;
	width:calc(100% - 1.0em);
	height:0.7em;
	background:#aed8e8;
	position:absolute;
	bottom:-0.1em;
	left:0.5em;
	transform: translate(0%, 0%);
	-webkit-transform: translate(0%, 0%);
	-ms-transform: translate(0%, 0%);
	z-index:-1;
}

#material #eva_wrap {
	width:90%;
	max-width:1000px;
	margin:2.0em auto;
}
.about_txt h2 {
	line-height:1.2em;
}
.about_txt  p {
	margin:1.0em auto;
}

#material #eva_wrap #eva_img {
	width:100%;
	height:0;
	padding-bottom:calc(30% * 2.0725);
	display:block;
	position:relative;
	z-index:-1;
}
#material #eva_wrap #eva_img > img {
	max-width:100%;
	position:absolute;
	top:0;
	left:-5%;
}
#material #eva_wrap #eva_img #one {
	position:absolute;
	top:50%;
	left:48%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#material h1.sub_ttl,
#techno h1.sub_ttl,
#arch h1.sub_ttl,
#rocker h1.sub_ttl {
	font-size:180% !important;
}


@media only screen and (max-width: 1065px) {
#about p.num {
	font-size:1.8vw !important;
}
}


@media only screen and (max-width: 849px) {
#material h1.sub_ttl,
#arch h1.sub_ttl,
#rocker h1.sub_ttl{
	width:90%;
	text-align:left;
	margin:0 auto;
	font-size:180%;
}
#material h1.sub_ttl,
#arch h1.sub_ttl {
	margin:0 auto 3.0em auto !important;
}
#arch h1.sub_ttl {
	line-height:1.3em;
}
#about p.num {
	width:2.0em;
	height:2.0em;
	font-size:120% !important;
	line-height:2.0em;
	text-align:center;
	color:#fff;
	background:#2a98c3;
	border-radius:50% 50%;
	margin:0 auto 0.7em 0 !important;
}
#material #eva_wrap {
	flex-wrap:wrap;
}
#material #eva_wrap > div { width:100%; margin-bottom:2.0em; }
#material #eva_wrap > div:nth-of-type(1) { order:2; }
#material #eva_wrap > div:nth-of-type(2) { order:1; }
#material #eva_wrap > div:nth-of-type(3) { order:3; }

#material #eva_wrap #eva_img {
	width:100%;
	height:auto;
	padding-bottom:0;
	display:block;
	position:relative;
	z-index:1;
}
#material #eva_wrap #eva_img > img {
	width:60%;
	position:relative;
	top:0;
	left:auto;
	margin:0 auto;
}
#material #eva_wrap #eva_img #one {
	position:absolute;
	top:60%;
	left:51%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
}

#material #techno {
	width:90%;
	max-width:1000px;
	margin:1.0em auto;
	box-sizing:border-box;
	padding:2.0em 3.0em 3.0em 3.0em;
	border:1px solid #ababab;
	border-radius:12px;
}
#material #techno > p {
	font-size:110%;
}
#material #techno .tec_wrap {
	margin:2.0em auto 0 auto;
}
#material #techno .tec_wrap > div {
	width:45%;
}
#material #techno .tec_wrap > div > div:nth-of-type(1) {
	width:30%;
}
#material #techno .tec_wrap > div > div:nth-of-type(2) {
	width:65%;
}
#material #techno .tec_wrap > div > div:nth-of-type(2) p > span {
	display:block;
}


@media only screen and (max-width: 849px) {

#material #techno {
	width:90%;
	padding:2.0em 2.0em 1.0em 2.0em;
}
#material #techno .tec_wrap,
#material #techno .tec_wrap > div {
	flex-wrap:wrap;
}
#material #techno .tec_wrap > div,
#material #techno .tec_wrap > div > div:nth-of-type(1),
#material #techno .tec_wrap > div > div:nth-of-type(2) {
	width:100%;
}
#material #techno .tec_wrap > div > div:nth-of-type(1) img {
	width:70%;
	margin:0 auto;
}
#material #techno .tec_wrap > div > div:nth-of-type(2) p {
	margin:1.0em auto 3.0em auto;
}
}



#arch #cup_wrap {
	width:90%;
	max-width:1000px;
	margin:2.0em auto;
	align-items:stretch;
}
#arch #cup_wrap > div {
	display:flex;
	flex-direction:column;
}
#arch #cup_wrap > div:nth-of-type(1) .txt_wrap {
	margin-top:auto;
}
#arch #cup_wrap > div:nth-of-type(3) .txt_wrap {
	margin-bottom:auto;
}
#arch #cup_wrap > div:nth-of-type(1),
#arch #cup_wrap > div:nth-of-type(3) {
	width:35%;
}
#arch #cup_wrap #cup_img {
	width:30%;
	height:0;
	padding-bottom:calc(30% * 0.696);
	display:block;
	position:relative;
	z-index:-1;
	margin:7.0em 0 5.0em auto;
}
#arch #cup_wrap #cup_img > img {
	max-width:100%;
	transform: scale(1.2);
	position:absolute;
	top:-10%;
	left:-10%;
}
#arch #cup_wrap #cup_img #two {
	position:absolute;
	top:50%;
	left:70%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#arch #cup_wrap #cup_img #three {
	position:absolute;
	top:20%;
	left:57%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}


@media only screen and (max-width: 975px) {
#arch #cup_wrap #cup_img > img {
	max-width:100%;
	transform: scale(1.1);
	position:absolute;
	top:-13%;
	left:-10%;
}
}


@media only screen and (max-width: 849px) {
#arch #cup_wrap {
	flex-wrap:wrap;
}
#arch #cup_wrap > div:nth-of-type(1),
#arch #cup_wrap > div:nth-of-type(2),
#arch #cup_wrap > div:nth-of-type(3) { width:100%; }
#arch #cup_wrap > div:nth-of-type(1) { order:3; }
#arch #cup_wrap > div:nth-of-type(2) { order:1; }
#arch #cup_wrap > div:nth-of-type(3) { order:2; }

#arch #cup_wrap #cup_img {
	width:100%;
	height:auto;
	padding-bottom:0;
	display:block;
	position:relative;
	z-index:1;
	margin:0 auto;
}
#arch #cup_wrap #cup_img > img {
	max-width:100%;
	transform: scale(1.0);
	position:static;
}
#arch #cup_wrap #cup_img #two {
	position:absolute;
	top:63%;
	left:75%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#arch #cup_wrap #cup_img #three {
	position:absolute;
	top:40%;
	left:65%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
}



#rocker #rocker_wrap {
	width:90%;
	max-width:1000px;
	margin:2.0em auto;
	align-items:stretch;
}
#rocker #rocker_wrap > div {
	display:flex;
	flex-direction:column;
}
#rocker #rocker_wrap .txt_wrap {
	margin-top:auto;
}
#rocker #rocker_wrap > div:nth-of-type(2) {
	width:35%;
}
#rocker #rocker_wrap #rocker_img {
	width:50%;
	display:block;
	position:relative;
	z-index:-1;
	margin:0 auto;
}
#rocker #rocker_wrap #rocker_img > img {
	max-width:100%;
	position:relative;
}
#rocker #rocker_wrap #rocker_img #four_a {
	position:absolute;
	top:40%;
	left:-5%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
#rocker #rocker_wrap #rocker_img #four_b {
	position:absolute;
	top:40%;
	right:-8%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}


@media only screen and (max-width: 1065px) {
#rocker #rocker_wrap #rocker_img #four_a {
	position:absolute;
	top:35%;
	left:-7%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
#rocker #rocker_wrap #rocker_img #four_b {
	position:absolute;
	top:35%;
	right:-8%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
}


@media only screen and (max-width: 889px) {
#rocker #rocker_wrap #rocker_img #four_a {
	position:absolute;
	top:25%;
	left:-7%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
#rocker #rocker_wrap #rocker_img #four_b {
	position:absolute;
	top:25%;
	right:-8%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
}


@media only screen and (max-width: 849px) {
#rocker #rocker_wrap {
	flex-wrap:wrap;
}
#rocker #rocker_wrap > div:nth-of-type(2) {
	width:100%;
}
#rocker #rocker_wrap #rocker_img {
	width:88%;
	display:block;
	position:relative;
	z-index:-1;
	margin:0 auto;
}
#rocker #rocker_wrap #rocker_img #four_a {
	position:absolute;
	top:60%;
	left:-7%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
#rocker #rocker_wrap #rocker_img #four_b {
	position:absolute;
	top:60%;
	right:-8%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
}



#insole h1.index_ttl > span {
	color:#000;
	font-size:50%;
}
#insole #insole_wrap {
	width:90%;
	max-width:1000px;
	margin:2.0em auto;
	align-items:stretch;
}
#insole #insole_wrap > div:nth-of-type(1) {
	width:50%;
	order:2;
}
#insole #insole_wrap > div:nth-of-type(2) {
	width:40%;
	text-align:left;
	order:1;
}
#insole #insole_wrap > div p {
	margin-bottom:2.0em;
}


@media only screen and (max-width: 849px) {
#insole h1.index_ttl > span {
	color:#000;
	font-size:65%;
}
#insole #insole_wrap {
	flex-wrap:wrap;
}
#insole #insole_wrap > div:nth-of-type(1) {
	width:100%;
	order:1;
	margin:2.0em auto;
}
#insole #insole_wrap > div:nth-of-type(2) {
	width:100%;
	order:2;
}
}



@media only screen and (max-width: 498px) {
#about_main > h1.index_ttl {
	font-size:220% !important;
}
#about_main > h1.sub_ttl {
	font-size:160% !important;
}
#material h1.sub_ttl,
#arch h1.sub_ttl,
#rocker h1.sub_ttl{
	width:90%;
	text-align:left;
	margin:0 auto;
	font-size:160% !important;
}
#about p.num {
	width:1.5em;
	height:1.5em;
	font-size:120% !important;
	line-height:1.5em;
	text-align:center;
	color:#fff;
	background:#2a98c3;
	border-radius:50% 50%;
	margin:0 auto 0.7em 0 !important;
}
.about_txt h2 {
	line-height:1.2em;
	font-size:125% !important;
}
}


#product_atten > div {
	width:90%;
	max-width:1000px;
	margin:2.0em auto;
}
#product_atten dl {
	text-align:left;
	line-height:1.7em;
	margin:3.0em auto;
}
#product_atten dl dt{
	display:block;
	font-size:120%;
	font-weight:bold;
	margin-bottom:1.0em;
	margin-left:-0.5em;
}
#product_atten dl dd{
	text-indent:-1.0em;
	padding-left:1.0em;
	display:block;
	width:calc(100% - 1.0em);
	margin:0 0 0 auto;
}