@charset "UTF-8";
/* CSS Document */
/*PCSP順番逆に
*/
html,
body {
	padding: 0;
	margin: 0;
}
#br img {
	max-width: 100%;
	width: 100%;
	border: none;
}
#br ul,#br li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#br {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	 font-family: "Hanken Grotesk", sans-serif;
}
.title {
	position: relative;
	top: 0;
	left: 0%;
	width: 100%;
	z-index: 100;
}
 .title span {
	box-sizing: border-box;
	padding:15px 5%;
	 width: 90%;
	display: block;
	position: sticky;
	top: 0;
	 margin: 0 auto;
	 background: #FFF;
}
#br .section {
    width: 100%;
    height: auto;
    position: relative;

}	
#br .scroll-infinity {
    position: sticky;
    top: 70px;
    width: 100%;

}

#br .scroll-infinity__wrap {
	display: flex;
	overflow: hidden;
}
#br .scroll-infinity__list {
	display: flex;
	list-style: none;
	padding: 0;
	height: 100%;
}
#br .scroll-infinity__list--left {
	animation: infinity-scroll-left 15s infinite linear 0.1s both;
}
#br .scroll-infinity__list--right{
	animation :infinity-scroll-right 15s infinite linear 0.1s both;
}
#br .scroll-infinity__item {
    width: 60vw;
    height: 100svh;
    box-sizing: border-box;
    padding: 4px 2px;
    line-height: 0;
    position: relative;
}

#br .scroll-infinity__item>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 769px)  {
	.title {
		position: absolute;
		top: 0;
		left: 0%;
		width: 30%;
		height: 100%;
		z-index: 100;
	}
	 .title span {
		box-sizing: border-box;
		padding:15px 5%;
		 width: 90%;
		display: block;
		position: sticky;
		top: 70px;
		 margin: 0;
	background: rgba(255,255,255,0.7)
	}
	#br .inner {
		position: relative;
/*		height: 100vh;
		overflow-y: scroll;
	  scroll-snap-type: y mandatory;

	  scroll-behavior: smooth;*/
	}
	#br .section {
		width: 100%;
		height: 100vh;
		position: relative;
		position: sticky;
		top: 0;
		border-bottom: 1px solid #000;
		background: #FFF;
	  /* 各ページの開始位置で吸着 */
	  scroll-snap-align: start;
			overflow: hidden;

	}
	#br .scroll-infinity {
		position: relative;
		top: 0;

	}
	#br .scroll-infinity__list--left {
		animation: infinity-scroll-left 25s infinite linear 0.1s both;
	}
	#br .scroll-infinity__list--right{
		animation :infinity-scroll-right 25s infinite linear 0.1s both;
	}
	#br .scroll-infinity__item {
		width: 30vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 20px 10px;
		line-height: 0;
		position: relative;
	}
}

#br .data {
	position: sticky;
	width: 100%;
	background: rgba(255,255,255,0.7)
}

#br .data ul {
	padding: 25% 0;
	width: 90%;
	margin: 0 auto;
}
#br .data ul li {
	margin: 5% auto;
	text-align: left;
	font-size: 10px;
	letter-spacing: 0.5px;
	display: grid;
	grid-template-columns: 40% 60%;
}
#br .data ul li .item {
	width: 90%;
	margin-left: 10%;
}
#br .data ul li .item .no {
	font-size: 13px;
	margin: 0 0 5px;
	padding: 0;
}
#br .data ul li .item .name {
	font-size: 13px;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
#br .data ul li .item .name span {
	display: block;
	font-size: 10px;
	font-weight: 400;
	margin-top: 5px;
}
#br .data ul li .item a{
	display: inline-block;
	font-size: 12px;
	border-bottom: 1px solid #000;
	color: #000;
	text-decoration: none;
	margin: 10px 0 0;
	font-weight: 600;
}
@media only screen and (min-width: 769px)  {
	#br .data {
		position: relative;
		position: absolute;
		top: 0;
		right: 0;
		width: 260px;
		height: 100%;
	}
	#br .data ul li {
		margin: 25px auto;
		text-align: left;
		font-size: 12px;
		letter-spacing: 0.5px;
		display: grid;
		grid-template-columns: 30% 70%;
	}
	#br .data ul {
		padding: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);

	}
}
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
@keyframes infinity-scroll-right {
from {
  transform: translateX(-100%);
}
  to {
  transform: translateX(0%);
}
}

@media only screen and (min-width: 769px)  {
#br .data {
	transform: translate(100%,0);
	transition: 1s all 0.5s ease;
}
#br .data.ac {
	transform: translate(0);
}
}
.anim {
	opacity: 0;
	transition: 1s all 0s ease;
}
.anim.ac {
	opacity: 1;
}