@charset "UTF-8";

/* ========== concept ========== */
.concept_mv {
min-height: 165vw;
}
.concept_mv .mv_title {
left: 0;
top: 81vw;
width: 100%;
font-size: 6.88133vw;
color: #fff;
filter: blur(100px);
animation: concept-blur 2s forwards;
animation-delay: 0.5s;
letter-spacing: 0.175em;
text-indent: 1em;
}
@keyframes concept-blur {
	100% { filter: blur(0); }
}
.concept_titletext {
font-size: 5.85vw;
letter-spacing: 0.15em;
}
.concept_sec01 .textbox01 .concept_titletext,
.concept_sec01 .textbox02 .concept_titletext,
.concept_sec01 .textbox03 .concept_titletext,
.concept_sec01 .textbox04 .concept_titletext,
.concept_sec02 .textbox02 .concept_titletext {
margin-bottom: -0.25em;
}
.concept sup {
vertical-align: super;
font-size: 0.6em;
}
.concept_secbox p {
margin-top: 5.33vw;
font-size: 3.2vw;
}
.concept_sec01 {
padding: 14.6666vw 0 20vw;
}
.concept_sec01 .img01 {
width: 72vw;
margin-top: 14vw;
}
.concept_sec01 .textbox01 {
width: 86.6666vw;
margin-top: 16.5vw;
}
.concept_sec01 .img02 {
width: 60vw;
margin: 12vw auto 0 0;
}
.concept_sec01 .textbox02 {
width: 66.6666vw;
margin: 10.6666vw auto 0 26.6666vw;
}
.concept_sec01 .img03 {
width: 68vw;
margin: 24vw auto 0 26.6666vw ;
}
.concept_sec01 .textbox03 {
width: 86.6666vw;
margin-top: 16vw;
}
.concept_sec01 .img04 {
width: 53.3333vw;
margin-top: 18.6666vw;
}
.concept_sec01 .textbox04 {
width: 86.6666vw;
margin-top: 20vw;
}
.concept_sec01 .img05 {
width: 52vw;
margin: 12vw auto 0 41.6vw;
}
.concept_arrowarea {
padding-bottom: 20vw;
}
.concept_arrow {
width: 16vw;
}
.concept_sec02 {
padding: 18.6666vw 0 19.3333vw;
}
.concept_sec02 .img01 {
width: 74vw;
margin: 18.6666vw 0 0 auto;
}
.concept_sec02 .textbox01 {
width: 67.3333vw;
margin: 11.3333vw auto 0 26vw;
}
.concept_sec02 .textbox02 {
width: 86.6666vw;
margin-top: 34.5vw;
}
.concept_sec02 .img02 {
width: 93.3vw;
margin: 12vw 0 0 auto;
}
.concept_sec02 .notice {
margin: 18.6vw auto 0 6.6vw;
letter-spacing: 0.14em;
}
.concept_movie {
width: 100%;
height: 0;
margin-top: 6vw;
padding-top: 56vw;
}
.concept_movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.concept .products_annotation {
padding: 17.3333vw 0 0;
}
@media (min-width:768px){
	.concept_mv {
	min-height: 42vw;
	}
	.concept_mv .mv_title {
	top: 20.7142vw;
	font-size: 3.5vw;
	}
	.concept_titletext {
	font-size: 24px;
	}
	.concept_sec01 h3.concept_titletext,
	.concept_sec02 h3.concept_titletext {
	line-height: 100%;
	}
	.concept_secbox p {
	margin-top: 25px;
	font-size: 14px;
	}
	.concept_sec01 {
	padding: 110px 0 100px;
	}
	.concept_sec01 .img01 {
	width: 320px;
	margin: 110px calc(50% - 344px) 0 auto;
	}
	.concept_sec01 .textbox01 {
	width: 330px;
	margin: -400px auto 0 calc(50% - 344px);
	}
	.concept_sec01 .img02 {
	width: 280px;
	margin: 170px auto 0 calc(50% - 344px);
	}
	.concept_sec01 .textbox02 {
	width: 370px;
	margin: -350px calc(50% - 344px) 0 auto;
	}
	.concept_sec01 .img03 {
	width: 320px;
	margin: 120px calc(50% - 344px) 0 auto;
	}
	.concept_sec01 .textbox03 {
	width: 330px;
	margin: -215px auto 0 calc(50% - 344px);
	}
	.concept_sec01 .img04 {
	width: 320px;
	margin: 140px auto 0 calc(50% - 344px);
	}
	.concept_sec01 .textbox04 {
	width: 330px;
	margin: -400px calc(50% - 344px) 0 auto;
	}
	.concept_sec01 .img05 {
	width: 320px;
	margin: 130px auto 0;
	}
	.concept_arrowarea {
	padding-bottom: 100px;
	}
	.concept_arrow {
	width: 70px;
	}
	.concept_sec02 {
	padding: 90px 0 120px;
	}
	.concept_sec02 .img01 {
	width: 320px;
	margin: 95px auto 0 calc(50% - 344px);
	}
	.concept_sec02 .textbox01 {
	width: 330px;
	margin: -410px calc(50% - 344px) 0 auto;
	}
	.concept_sec02 .textbox02 {
	width: 500px;
	margin: 150px auto 0 calc(50% - 344px);
	}
	.concept_sec02 .textbox02 p {
	width: 420px;
	}
	.concept_sec02 .img02 {
	max-width: 500px;
	margin-top: 60px;
	}
	.concept_sec02 .notice {
	margin: 100px 20px 0 0;
	text-align: center;
	}
	.concept_outroimg {
	margin-top: 40px;
	}
	.concept .products_annotation {
	padding-top: 50px;
	}
}
@media (min-width:1200px){
	.concept_mv .mv_title {	
	font-size: 2.19vw;
	}
	.concept_titletext {
	font-size: 29px;
	}
	.concept_secbox p {
	margin-top: 40px;
	font-size: 16px;
	letter-spacing: 0.125em;
	}
	.concept_sec01 {
	padding-bottom: 75px;
	}
	.concept_sec01 .img01 {
	width: 600px;
	margin: 110px calc(50% - 575px) 0 auto;
	}
	.concept_sec01 .textbox01 {
	width: 418px;
	margin: -730px auto 0 calc(50% - 535px);
	}
	.concept_sec01 .img02 {
	width: 440px;
	margin: 205px auto 0 calc(50% - 575px);
	}
	.concept_sec01 .textbox02 {
	width: 415px;
	margin: -160px calc(50% - 485px) 0 auto;
	}
	.concept_sec01 .img03 {
	width: 550px;
	margin: 140px calc(50% - 575px) 0 auto;
	}
	.concept_sec01 .textbox03 {
	width: 415px;
	margin: -305px auto 0 calc(50% - 515px);
	}
	.concept_sec01 .img04 {
	width: 510px;
	margin: 280px auto 0 calc(50% - 575px);
	}
	.concept_sec01 .textbox04 {
	width: 420px;
	margin: -640px calc(50% - 525px) 0 auto;
	}
	.concept_sec01 .textbox04 .concept_titletext {
	margin-right: -90px;
	}
	.concept_sec01 .img05 {
	width: 460px;
	margin: 90px calc(50% - 565px) 0 auto;
	}
	.concept_arrow01 {
	width: 80px;
	margin-bottom: 75px;
	}
	.concept_sec02 .img01 {
	width: 600px;
	margin: 95px auto 0 calc(50% - 575px);
	}
	.concept_sec02 .textbox01 {
	width: 420px;
	margin: -590px calc(50% - 525px) 0 auto;
	}
	.concept_sec02 .textbox02 {
	width: 488px;
	margin: 390px auto 0 calc(50% - 480px);
	}
	.concept_sec02 .textbox02 p {
	width: 100%;
	}
	.concept_sec02 .img02 {
	max-width: 750px;
	margin: 120px auto 0 calc(50% - 287px);
	}
	.concept_outroimg {
	margin-top: 60px;
	}
	.concept_sec02 .notice {
	width: 100%;
	margin: 120px auto 0;
	font-size: 12px !important;
	}
	.concept .products_annotation {
	padding-top: 50px;
	}
}

.concept_secbox, .concept_arrowarea {
	background-color: #fff;
  }
  
  .concept_interval {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
  }
  .concept_interval.is-inview .concept_interval__lead:before {
	visibility: visible;
	transform: translate3d(0, 0, 0) scale(1);
	opacity: 1;
	transition: transform 2.2s cubic-bezier(0.18, 0.06, 0.23, 1) 0s, visibility 1.2s cubic-bezier(0.18, 0.06, 0.23, 1) 0s, opacity 1.2s cubic-bezier(0.18, 0.06, 0.23, 1) 0s;
  }
  .concept_interval .concept_interval__lead span:not([class]) {
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	box-sizing: border-box;
	padding-top: 100%;
	opacity: 1;
	transition: background 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	background: rgba(255, 255, 255, 0);
  }
  .concept_interval .concept_interval__lead:before {
	display: block;
	content: "";
	pointer-events: none;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	margin: auto;
	background: url(/wp-content/themes/sophistance/images/concept/interval01_sp.jpg) no-repeat center center/cover;
	opacity: 0;
	transform: translate3d(0, 0, 0) scale(1);
  }
  .concept_interval .concept_interval__lead-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	font-feature-settings: normal;
	white-space: nowrap;
	font-size: 1.3125rem;
	line-height: 1.75;
	letter-spacing: 0.05em;
	color: #fff;
  }
  @media (max-width: 374px) {
	.concept_interval .concept_interval__lead-text {
	  font-size: 5.6vw;
	}
  }
  @media (min-width: 768px) {
	.concept_interval .concept_interval__lead span:not([class]) {
	  display: block;
	  position: relative;
	  width: 100%;
	  height: 0;
	  box-sizing: border-box;
	  padding-top: 33.9285714286%;
	}
	.concept_interval .concept_interval__lead:before {
	  background: url(/wp-content/themes/sophistance/images/concept/interval01_pc.jpg) no-repeat center center/cover;
	}
	.concept_interval .concept_interval__lead-text {
	  font-size: 2.6666666667vw;
	}
  }
  @media (min-width: 1200px) {
	.concept_interval .concept_interval__lead-text {
	  font-size: 2rem;
	}
  }