@charset "utf-8";

/* ==========================================================================
   insole
   ========================================================================== */
#page_insole .contents_wrap{
	padding: 66px 0 0 0;
	margin: 0;
}
@media (min-width: 960px){
#page_insole .contents_wrap{
	padding: 90px 0 0 0;
}
}


@media (min-width: 960px){
#page_insole .contents_wrap .wrap{
	max-width: calc(1000px + 10vw + 10vw);
	padding: 0 10vw;
}
}


/* pv
============================================================ */
#page_insole #pv{
	width: 100vw;
	position: relative;
	background-image: url(../img/originality/originality-bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #0065B3;
	padding: 80px 0 100px 0;
}
@media (min-width: 960px){
#page_insole #pv{
	padding: 80px 0 180px 0;
}
}

#page_insole #pv .wrap{
	padding: 0;
}

#page_insole #pv .wrap .text_block{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#page_insole #pv h1.section-title{
	width: 276px;
	height: auto;
	padding-bottom: 20px;
}
@media (min-width: 960px){
#page_insole #pv h1.section-title{
	width: 600px;
	padding-bottom: 30px;
}
}

#page_insole #pv h1.section-title img{
	width: auto;
	height: 100%;
	display: block;
}

#page_insole #pv h2.pv-head{
	color: #0065B3;
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1.9;
	text-align: center;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.06em;
}
@media (min-width: 960px){
#page_insole #pv h2.pv-head{
	font-size: 2.6rem;
	letter-spacing: 0.08em;
}
}

#page_insole #pv h2.pv-head span{
	padding: 0px 5.5px 2px 5.5px;
	background-color: #FFF;
}

#page_insole #pv .pv-article{
	color: #FFF;
	font-size: 1.6rem;
	line-height: 1.5;
	text-align: center;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.14em;
	margin-top: 15px;
}
@media (min-width: 960px){
#page_insole #pv .pv-article{
	font-size: 1.8rem;
	line-height: 1;
	text-align: center;
	letter-spacing: 0.1em;
	margin-top: 24px;
}
}

#page_insole #pv .pv-article span{
	display: none;
}
@media (min-width: 960px){
#page_insole #pv .pv-article span{
	display: inline-block;
}
}


/* common
============================================================ */
#page_insole .box-row{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
@media (min-width: 960px){
#page_insole .box-row{
	flex-direction: row;
  align-items: flex-start;
	justify-content: space-between;
}
}

#page_insole .box-row .text_block{
	width: 100%;
}
@media (min-width: 960px){
#page_insole .box-row .text_block{
	width: 50%;
}
}

#page_insole .box-row .img_block{
	width: 100%;
	position: relative;
}
@media (min-width: 960px){
#page_insole .box-row .img_block{
	width: 50%;
}
}

#page_insole .insole-red{
	color: #F17336;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.06em;
}

#page_insole .bold{
	font-weight: 600;
}

#page_insole .number{
	width: auto;
	height: 34px;
	display: block;
}
@media (min-width: 960px){
#page_insole .number{
	width: auto;
	height: 57px;
}
}

#page_insole .border{
	width: 2px;
	height: 22px;
	background-color: #444;
	margin: 11px 0 8px 8px;
}
@media (min-width: 960px){
#page_insole .border{
	width: 2px;
	height: 30px;
	margin: 18px 0 14px 10px;
}
}

#four .border,
#seven .border{
	margin: 11px 0 8px 0!important;
}
@media (min-width: 960px){
#four .border,
#seven .border{
	margin: 18px 0 14px 0!important;
}
}

#page_insole h2.head{
	color: #FFF;
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.8;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.06em;
}
@media (min-width: 960px){
#page_insole h2.head{
	font-size: 3.4rem;
	letter-spacing: 0.08em;
}
}

#page_insole h2.head span{
	padding: 0px 5.5px 2px 5.5px;
	background-color: #222222;
}

#page_insole p.article{
	font-size: 1.5rem;
	line-height: 1.8;
	text-align: justify;
}
@media (min-width: 960px){
#page_insole p.article{
	font-size: 1.5rem;
}
}

#page_insole p.article.large{
	font-size: 1.7rem!important;
	line-height: 1.6!important;
}
@media (min-width: 960px){
#page_insole p.article.large{
	font-size: 2.2rem!important;
}
}

#first .for-pc,
#second .for-pc,
#third .for-pc,
#four .for-pc,
#five .for-pc,
#six .for-pc,
#seven .for-pc,
#insole-contact .for-pc{
	display: none!important;
}
@media (min-width: 960px){
#first .for-pc,
#second .for-pc,
#third .for-pc,
#four .for-pc,
#five .for-pc,
#six .for-pc,
#seven .for-pc,
#insole-contact .for-pc{
	display: block!important;
}
}

#first .for-sp,
#second .for-sp,
#third .for-sp,
#four .for-sp,
#five .for-sp,
#six .for-sp,
#seven .for-sp,
#insole-contact .for-sp{
	display: block!important;
}
@media (min-width: 960px){
#first .for-sp,
#second .for-sp,
#third .for-sp,
#four .for-sp,
#five .for-sp,
#six .for-sp,
#seven .for-sp,
#insole-contact .for-sp{
	display: none!important;
}
}


/* first
============================================================ */
#first .text_block{
	width: 100%;
}
@media (min-width: 960px){
#first .text_block{
	width: 50%;
}
}

#first .img_block{
	width: 100%;
	position: relative;
}
@media (min-width: 960px){
#first .img_block{
	width: 48%;
}
}

#first .img_block img{
	width: 93%;
	height: auto;
	display: block;
	margin: 0 auto;
}
@media (min-width: 960px){
#first .img_block img{
	width: 525px;
	position: absolute;
	top: 0;
	right: -85px;
}
}


/* second
============================================================ */
#second{
	max-width: 1920px;
	max-width: 1500px;
	position: relative;
	margin: 0 auto;
}

#second .img_wrap{
	width: 100%;
	display: block;
	position: relative;
	margin-left: -5.5vw;
}
@media (min-width: 960px){
#second .img_wrap{
	width: 43%;
	margin-left: 0;
	position: absolute;
	top: 40px;
	left: 0;
}
}

#second .image{
	width: 100%;
	height: auto;
	display: block;
}

#second .name{
	width: 120px;
	height: auto;
	display: block;
	position: absolute;
	bottom: -30px;
	right: -20px;
}
@media (min-width: 960px){
#second .name{
	width: 180px;
	bottom: -45px;
	right: 28px;
}
}


/* third
============================================================ */
#third .text_block{
	width: 100%;
}
@media (min-width: 960px){
#third .text_block{
	width: 46%!important;
}
}

#third .img_block{
	width: 100%;
}
@media (min-width: 960px){
#third .img_block{
	width: 50%;
}
}

#third .img_block img{
	width: 93%;
	height: auto;
	display: block;
	margin: 0 auto;
}
@media (min-width: 960px){
#third .img_block img{
	width: 504px;
	position: absolute;
	top: 80px;
	right: -40px;
}
}


/* four
============================================================ */
#four .wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
}


/* five
============================================================ */
#five .text_block{
	width: 100%;
}
@media (min-width: 960px){
#five .text_block{
	width: 46%!important;
}
}

#five .img_block{
	width: 100%;
}
@media (min-width: 960px){
#five .img_block{
	width: 50%;
}
}

#five .img_block img{
	width: 93%;
	height: auto;
	display: block;
	margin: 0 auto;
}
@media (min-width: 960px){
#five .img_block img{
	width: 504px;
	position: absolute;
	top: 35px;
	left: -50px;
}
}


/* six
============================================================ */


/* seven
============================================================ */
#seven{
	background-color: #F2F7FB;
	padding: 60px 0 60px 0;
}
@media (min-width: 960px){
#seven{
	padding: 140px 0 100px 0;
}
}

#seven .wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#seven .img_block{
	width: 100%;
}
@media (min-width: 960px){
#seven .img_block{
	width: 46.3%!important;
}
}

#seven .img_block img{
	width: 93%;
	height: auto;
	display: block;
	margin: 0 auto;
}
@media (min-width: 960px){
#seven .img_block img{
	width: 435.5px;
	position: absolute;
	top: 6px;
	left: -60px;
}
}

#seven .text_block{
	width: 100%;
}
@media (min-width: 960px){
#seven .text_block{
	width: 57.7%!important;
}
}

#seven .text_block img{
	width: 93%;
	height: auto;
	display: block;
	margin: 0 auto;
}
@media (min-width: 960px){
#seven .text_block img{
	width: 576.9px;
	margin-top: 70px;
}
}


/* insole-contact
============================================================ */
#insole-contact{
	width: 100vw;
	position: relative;
	padding: 80px 0 70px 0;
}
@media (min-width: 960px){
#insole-contact{
	padding: 150px 0 120px 0;
}
}

#insole-contact{
	width: 100vw;
	background-image: url(../img/insole/insole-contact-bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media (min-width: 960px){
#insole-contact{
}
}

#insole-contact .wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#insole-contact h2.contact-head{
	color: #0065B3;
	font-size: 2.3rem;
	font-weight: 600;
	line-height: 1.9;
	text-align: center;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.06em;
}
@media (min-width: 960px){
#insole-contact h2.contact-head{
	font-size: 2.9rem;
	letter-spacing: 0.08em;
}
}

#insole-contact h2.contact-head span{
	padding: 0px 5.5px 2px 5.5px;
	background-color: #FFF;
}

#insole-contact .contact-article{
	color: #FFF;
	font-size: 1.5rem;
	line-height: 1.8;
	text-align: center;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.10em;
	margin-top: 20px;
}
@media (min-width: 960px){
#insole-contact .contact-article{
	font-size: 1.8rem;
	line-height: 1.8;
	text-align: center;
	letter-spacing: 0.11em;
	margin-top: 28px;
}
}

#insole-contact .insole-mark{
	width: 200px;
	height: auto;
	display: block;
}
@media (min-width: 960px){
#insole-contact .insole-mark{
	width: 232px;
}
}