@charset "UTF-8";
/* CSS Document */

html,
body {
	padding: 0;
	margin: 0;
}

	.sticky-contner{
		display: flex;
		background-color: #fff;
		padding: 0;
		border-top: solid 1px #e1e0e0;
	}

	.pc-box{
		width: 31.5%;
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.pc-box__left{
		width: 100%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.pc-box__left img{
		width: 80%;
		margin: 0 auto;
	}
	
	.pc-box__right{
		width: 100%;
		margin: auto;
	}
	
	.pc-box__right img{
		width: 100%;
		margin-top: -3%;
	}

@media only screen and (max-width: 900px) {
	
.pc-box{
	display: none;
}
	#main_ {
	width: 100%;
	}
	
	.w_600 {
	width: 100%;
	}
}
	
	
.pc {
	display:block;
}
.sp {
	display:none;
}

.clear {clear: both;}
	
.st_wrap {
		background-color: #fff;
	width: 37%;
	margin: auto;
	padding: 0%;
	border-right: solid 1px #000;
	border-left: solid 1px #000;
	box-sizing: border-box;
	}
	
	.st_wrap img {
	width: 100%;
	}
	
	#main_ {
	width: 800px;
		margin: auto;
	}
	
	.w_600 {
	width: 600px;
		margin: auto;
	}
	
	.w_600 img {
	width: 100%;
	}
	
@media only screen and (max-width: 900px) {
	
.pc-box{
	display: none;
}
	#main_ {
	width: 100%;
	}
	
	.w_600 {
	width: 100%;
	}
.pc {
	display:none;
}
.sp {
	display:block;
}
	
.st_wrap {
		background-color: #fff;
	width: 100%;
	margin: 0;
	padding: 0;
	border-right: solid 0px #000;
	border-left: solid 0px #000;
	}
}
	
	

.mv_box {
	width: 100%;
	margin: auto;
	background-image: url("https://www.dot-st.com/static/docs/jeanasis/pages/260724_bei/images/mv_bg2.png");
	background-size: contain;
	background-position: top;
}

.mv_box video {
	width: 76%;
	margin: 5% 12%;
}

.mv_box2 {
	width: 100%;
	margin: auto;
	background-image: url("https://www.dot-st.com/static/docs/jeanasis/pages/260724_bei/images/mv_bg.png");
	background-size: cover;
	background-position: top;
}

.mv_box2 video {
	width: 68%;
	margin: 5% 16%;
}


.sub_title {
	width: 100%;
	margin: 10% 0 0;
}

.sub_title2 {
	width: 100%;
	margin: 9% 0 0;
}

#profile {
	width: 100%;
	margin: 6% auto 6%;
	text-align: center;
}

#profile .main .img {
	width: 50%;
	margin: 0 auto;
}

#profile .main p {
	width: 100%;
	margin: 3% 0 0;
	line-height: 1.4;
	text-align: center;
	font-size: 12px;
	font-weight: 400;
}

#profile .main span {
	width: 100%;
	line-height: 1.5;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
}

#profile .main .img span {
	font-weight: 400;
	line-height: 2.0;
}

#no1 {
	width: 100%;
	margin: 5% auto 0;
}

#no1 .sub {
	width: 98%;
	margin: 0 auto;
}

#no1 .sub .img:nth-of-type(1) {
	width: 31.333%;
	margin: 0 1%;
	float: left;
}
#no1 .sub .img:nth-of-type(2) {
	width: 31.333%;
	margin: 0 1%;
	float: left;
}
#no1 .sub .img:nth-of-type(3) {
	width: 31.333%;
	margin: 0 1%;
	float: left;
}

#no1 .sub .img p {
	margin: 6% 0 2%;
	line-height: 1.4;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

@media only screen and (max-width: 900px) {
#no1 .sub .img p {
	font-size: 12px;
}
}

#no1 .sub .img span {
	font-weight: 400;
	line-height: 2.0;
}

#no1 .sub .img img {
	margin-top: 4px;
}

.btn_code {
	color: #fff;
	font-size: 80%;
	text-align: center;
	margin: 6px 0;
	padding:2.2% 0;
	border:1px solid #000;
	width:100%;
	background-color: #fff;
	box-sizing: border-box;
	border-radius: 6px;
}

.btn_code a{
	text-decoration: none;
	display: block;
	color:#000;
}

#no2 {
	width: 100%;
	margin: 2% auto 0;
	text-align: center;
}

#no2 .main .img {
	width: 100%;
	margin: 0;
}

#no2 .main .img p {
	width: 50%;
	margin: 3% 25% 2%;
	line-height: 1.4;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

#no2 .main .img span {
	font-weight: 400;
	line-height: 2.0;
}

#no2 .sub {
	width: 40%;
	margin: 0 auto;
}
	
#no2 .sub .img {
	width: 50%;
	padding: 0;
	margin: -7% 3% 1%;
}

#no2 .sub .img img {
	margin-top: 10px;
	padding-top: 10px;
}


#no3 {
	width: 90%;
	margin: 8% auto 0;
}

#no3 .main {
	position: relative;
}

#no3 .main .img {
	width: 100%;
	margin: 0;
}

#no3 .main .img img {
	width: 100%;
	padding-bottom: 3%;
}


#no4 {
	width: 100%;
	margin: 2% auto 0;
	text-align: center;
}

#no4 .main .img {
	width: 100%;
	margin: 0;
}

#no4 .main .img p {
	width: 50%;
	margin: 3% 25% 2%;
	line-height: 1.4;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

#no4 .main .img span {
	font-weight: 400;
	line-height: 2.0;
}

#no4 .sub {
	width: 40%;
	margin: 0 auto;
}
	
#no4 .sub .img {
	width: 50%;
	padding: 0;
	margin: -7% 3% 3%;
}

#no4 .sub .img img {
	width: 100%;
	padding-top: 20px;
}


#no5 {
	width: 100%;
	margin: 2% auto 0;
	text-align: center;
}

#no5 .main .img {
	width: 100%;
	margin: 0;
}

#no5 .main .img p {
	width: 50%;
	margin: 3% 25% 2%;
	line-height: 1.4;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

#no5 .main .img span {
	font-weight: 400;
	line-height: 2.0;
}

#no5 .sub {
	width: 40%;
	margin: 0 auto;
}
	
#no5 .sub .img {
	width: 50%;
	padding: 0;
	margin: -7% 3% 3%;
}

#no5 .sub .img img {
	width: 100%;
	padding-top: 20px;
}


#no6 {
	width: 100%;
	margin: 2% auto 0;
	text-align: center;
}

#no6 .sub {
	width: 90%;
	margin: 5%;
}

#no6 .sub .img:nth-of-type(1) {
	width: 80%;
	margin: 3% 10% 10%;
}

#no6 .sub .img:nth-of-type(2) {
	width: 50%;
	margin: 0;
	float: left;
}
#no6 .sub .img:nth-of-type(3) {
	width: 50%;
	margin: 0 0 0 -1px;
	float: left;
}
#no6 .sub .img:nth-of-type(4) {
	width: 50%;
	margin: -7px 0 0 0;
	float: left;
}
#no6 .sub .img:nth-of-type(5) {
	width: 50%;
	margin: -7px 0 0 -1px;
	float: left;
}

#no6 .sub .img:nth-of-type(6) {
	width: 70%;
	margin: 10% 15% 8%;
	padding-top: 10%;
	clear: both;
}

@media only screen and (max-width: 900px) {
.sub_title2 {
	width: 100%;
	margin: 14% 0 0;
}
#no6 .sub .img:nth-of-type(4) {
	width: 50%;
	margin: -7px 0 0 0;
	float: left;
}
#no6 .sub .img:nth-of-type(5) {
	width: 50%;
	margin: -7px 0 0 -1px;
	float: left;
}	
.scroll {
	padding-top: 12%;
}
.btn_code_all {
	font-size: 80%;
}

}

#no7 {
	width: 40%;
	margin: 10% auto 0%;
}

#no7 .main {
	width: 100%;
	padding-bottom: 20%;
}

.scroll {
	margin-top: -8%;
}

@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0;
	line-height: 0;
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: 60vw;
}
.scroll-infinity__item>img {
  width: 90%;
	margin: 0 auto;
}
@media only screen and (min-width: 769px) {
	.scroll-infinity__item {
	  width: 300px;
		margin-top: 4%;
	}
	
}


.btn_code_all {
	color: #fff;
	font-size: 90%;
	text-align: center;
	margin: 3% auto;
	padding:1% 0;
	border:1px solid #000;
	width:70%;
	background-color: #fff;
	box-sizing: border-box;
}

.btn_code_all a{
	text-decoration: none;
	display: block;
	color:#000;
	padding: 3%;
}


/* スライダー全体のスタイル */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* 各スライド画像のスタイル */
.slideimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: fadeInOut 6s infinite;
    transition: opacity 1.5s ease-in-out;
}
/* 最初の画像だけ親要素の高さを確保させる */
.slideimg:nth-child(1) {
    position: relative;
    animation-delay: 0s;
}
/* 2枚目の画像のアニメーション遅延 */
.slideimg:nth-child(2) {
    animation-delay: 3s;
}
/* フェードイン・アウトのアニメーション */
@keyframes fadeInOut {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}
/* 画像の表示調整 */
.slideimg img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}