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

body{
	margin: 0;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	 font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.wrapper img{
	display: block;
	line-height: 0;
}

.pcBox{
	display: none;
}

.top{
	margin: 0% auto;
}

.top h1{
	text-align: center;
	font-size: 21px;
	font-weight: normal;
	margin: 8% auto;
}

.top p{
	text-align: center;
	font-size: 14px;
	line-height: 2;
	margin: 8% auto;
}

.member{
	margin: 10% auto;
	width: 90%;
}

.member h1{
	text-align: center;
	font-size: 22px;
	font-weight: normal;
	margin: 2% auto;
}

.member ul{
	padding: 0;
	list-style: none;
	display: flex;
	column-gap: 5px;
}

.member ul li{
	border: solid 1px #000;
	position: relative;
}

.member ul li img{
	padding-bottom: 25%;
	position: relative;
}

.member ul li a{
	position: relative;
}

.member ul li a:after{
	display: block;
	position: absolute;
	bottom: 7px;
	/*left: 50%;*/
	left: 40px;
	width: 6px;
	height: 6px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	content: "";
	transform: translateX(-50%)  rotate(135deg);
}

.main-content{
	margin: 0 auto 10%;
	padding-top: 10%;
}

/* 外枠：はみ出した部分を隠す */
.loop-container {
  overflow: hidden; /* 必須 */
  width: 100%;
}

/* 内側の箱：横並びにする */
.loop-wrap {
  display: flex;
  white-space: nowrap; /* 折り返しなし */
}

/* テキスト部分：アニメーション設定 */
.loop-content {
  /* 幅を自動計算させる */
  width: max-content;
  
  /* テキスト間の余白 */
  padding-left: 20px; 
  
  /* アニメーション：名前 時間 動き 無限 */
  animation: loop-slide 10s linear infinite;
	
	font-family: "Times New Roman", Times, "serif";
	color: #0091bb;
	font-size: 40px;
}

/* アニメーションの定義 */
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    /* 2つ並べたうちの1つ分（-100%）だけ動かす */
    transform: translateX(-100%);
  }
}

.box{
	width: 92%;
	margin: 5% auto 0;
	padding-bottom: 20%;
}

.box-last{
	padding-bottom: 5%;
}

.box-border{
	border: solid 1px #000;
}

.box-profile{
	display: grid;
	grid-template-columns: 1.25fr 2fr;
	justify-content: center;
	align-items: center;
	column-gap: 15px;
	border-bottom: solid 1px #000;
}

.box-profile p{
	font-size: 14px;
	line-height: 1.8;
}

.box-profile span{
	font-size: 17px;
	line-height: 1.6;
}

.box-profile .staff-sns{
	margin: 3% 0;
	width: 50%;
}

.box-profile .staff-sns ul{
	padding: 0;
	list-style: none;
	display: flex;
	column-gap: 10px;
	margin: 5% auto;
	align-items: center;
}

.box-profile .staff-sns ul li img{
	width: 25px;
	height: auto;
}

.box-profile .staff-sns ul li .sb{
	width: 90px;
	height: auto;
}

.coment{
	font-size: 12px;
	line-height: 1.8;
	box-sizing: border-box;
	padding: 5% 3% 0%;
	margin: 0;
}

.coment span{
	font-family: "Times New Roman", Times, "serif";
	font-size: 25px;
	display: inline-block;
	margin-bottom: 0%;
}

.other{
	padding: 3%;
	list-style: none;
	display: flex;
	column-gap: 5px;
	justify-content: center;
	box-sizing: border-box;
}

.best-buy{
	margin: 10% auto;
}

.best-buy h1{
	font-family: "Times New Roman", Times, "serif";
	margin: 1% auto;
	font-weight: normal;
	color: #0091bb;
	font-size: 40px;
}

.main{
	margin-bottom: 5%;
}

.best-buy h2{
	font-size: 20px;
	line-height: 1.8;
	margin: 5% auto;
	font-weight: normal;
	text-align: center;
}

.best-buy p{
	font-size: 13px;
	line-height: 1.8;
}

.box-credit{
	width: 90%;
	margin: 10% auto;
}

.credit{
	position: relative;
    border-bottom: solid 1px #808080;
    margin-bottom: 3%;
    letter-spacing: .3px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	display: flex;
	align-items: center;
	column-gap: 10px;
	padding-bottom: 2%;
}

.credit a{
	display: block;
	text-decoration: none;
	color: #000;
	font-size: 12px;
	line-height: 1.5;
}

.credit-img{
	width: 15%;
}

.credit a::after {
	content: "BUY";
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0, -50%);
    font-size: 14px;
}

.credit .cms::after {
	content: "COMING SOON";
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0, -50%);
    font-size: 10px;
	color: #656565;
}

.movie{
	width: 100%;
	margin: 10% auto 5%;
}

video{
	width: 100%;
	height: auto;
}

.sub-img{
	margin: 5% auto;
}

.sub-img img:first-child{
	width: 70%;
	margin-left: 30%;
}

.sub-img img:last-child{
	width: 45%;
	margin-top: -20%;
}

.sub-img2{
	margin: 5% auto;
}

.sub-img2 img:first-child{
	width: 70%;
}

.sub-img2 img:last-child{
	width: 45%;
	margin-left: 55%;
	margin-top: -20%;
}

.all a{
	display: block;
	width: 70%;
	margin: 10% auto 15%;
	text-align: center;
	background-color: #333333;
	color: #fff;
	text-decoration: none;
	line-height: 3;
	position: relative;
}

.all a:after{
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}

@media(min-width:750px){
	.sticky_contener{
		display: flex;
		background-color: #e8eff1;
	}
	
	.pcBox{
		width: 33%;
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		
	.left img{
		display: block;
		width: 45vh;
	}
	
	.snsBOX{
		font-family: 'Arial',sans-serif;
	}
	
	.snsBOX__inner{
		border-radius: 15px;
		text-align: center;
	}
	
	.snsBOX__list01{
		display: flex;
		padding: 0;
		list-style: none;
		justify-content: center;
		margin: 0;
	}
	
	.snsBOX__list01 li{
		margin: 0 7px;
		line-height: 0;
	}
	
	.snsBOX__list01 li img{
		width: 50px;
		height: auto;
	}
	
	.header_logo_bayflow{
		width: 65%;
		margin: 2% auto 4%;
	}
	

	.wrapper{
		width: 35%;
		box-sizing: border-box;
		margin: 0 auto;
		background-color: #fff;
	}

	/*.br_s{
		display:none
	}*/

	.top h1{
		font-size: 23px;
	}

	.member ul li a:after{
		display: block;
		position: absolute;
		bottom: 8%;
		left: 50%;
		right: 15px;
		width: 6px;
		height: 6px;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		content: "";
		transform: translateX(-50%)  rotate(135deg);
	}

}