main{
    background-color: #000;
}

.top_visual{
	position: relative;
  	width: 100%;
  	height: 100vh;
  	overflow: hidden;
	background-color: #000;
}

.top_visual_img01,
.top_visual_img02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 1;
  color: #FFFFFF;
}

.top_visual_img01{
	background-image: url(../images/index/top_visual_img01.jpg);
	background-position: top right;
  	z-index: 2;
}

.top_visual_img02{
	background-image: url(../images/index/top_visual_img02.jpg);
	z-index: 2;
}

.fade-in {
  opacity: 1;
}

.top_visual_inner01{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100vh;
}
.top_visual_text01{
	width: 50%;
	font-size:1.6rem;
	letter-spacing: 0.5rem;
	line-height: 2.5;
	padding: 0 2rem;
}

.top_visual_text01 .t1{
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 1s;
}
.top_visual_text01 .t2{
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 1.5s;
}
.top_visual_inner_img01{
	width: 50%;
	opacity: 0;
  animation: fadeInImage 1s ease forwards;
  animation-delay: 3s; /* テキスト後に遅れて出現 */
}
.top_visual_inner_img01 img{
	width: 80%;
}

.top_visual_inner_img01 img {
  width: 80%;
}

.top_visual_inner02 {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100vh;
}
.top_visual_text02{
	width: 33%;
	font-size:1.6rem;
	letter-spacing: 0.5rem;
	line-height: 2.5;
	padding: 0 2rem;
}

.top_visual_text02 .t1{
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 6.5s;
}
.top_visual_text02 .t2{
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 7s;
}
.top_visual_text02 .t3{
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 7.5s;
}

.top_visual_inner_img0201{
	width: 33%;
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 9s;
}
.top_visual_inner_img0201 img{
	width: 90%;
}
.top_visual_inner_img0202{
	width: 33%;
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 9s;
}
.top_visual_inner_img0202 img{
	width: 70%;
}
.top_visual_inner_img02_sp{
	display: none;
}

@keyframes fadeInText {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInImage {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.concept-pers{
    width: 100%;
    height: 100vh;
    min-height: 1000px;
    max-height: 1200px;
    padding: 1rem;
    box-sizing: border-box;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url(../images/concept/concept-img01.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
        position: relative;
}
.concept-pers-inner{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    max-width: 1400px;
    text-align: center;
}

.title-img {

  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  box-sizing: border-box;
  margin: 0 auto;
}

/* 画像は自動幅＆上下マージンで間隔を調整 */
.title-img-item1{
  width:35%;
  max-width: 350px;
  margin:0.5rem auto 2rem;
}

.title-img-item2{
    width:80%;
  max-width: 800px;
  margin:0.5rem auto;
}

.title-text{
	margin-top: 2rem;
	font-size:1.5rem;
	letter-spacing: 1rem;
    color: #FFFFFF;
}

.concept-msg{
    font-size: 1rem;
    color: #FFFFFF;
    line-height: 3;
    letter-spacing: 0.1rem;
    margin-top: 5rem;
}
.concept-notice{
    font-size: 0.8rem;
    color: #fff;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}
@media (max-width: 767px) {
	.top_visual_img01{
	background-image: url(../images/index/top_visual_img01_sp.jpg);
  	background-size: cover;
	background-position: top right;
}

.top_visual_img02{
	background-image: url(../images/index/top_visual_img02_sp.jpg);
	background-size: cover;
	background-position: top left;
	position: relative
}
	.top_visual_inner01{
	position: absolute;
	bottom:40px;
	width: 100%;
	max-width: none;
	margin: 0 auto;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	height: calc(100vh - 40px);
	padding-bottom: 40px;
}
.top_visual_inner01::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%; 
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  pointer-events: none; /* クリックなどに干渉させない */
  z-index: 1; /* city1・city2より上 */
}
.top_visual_text01{
	width: 100%;
	font-size:1.5rem;
	letter-spacing: 0.6rem;
	line-height: 1.8;
	padding: 2rem 1rem;
	text-align: center;
	z-index: 2;
}


.top_visual_inner_img01{
	width: 100%;
	
}

.top_visual_inner_img01 img{
	width: 60%;
	margin: 0 auto;
}

.top_visual_inner02 {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	height: calc(100vh - 40px);
	padding-bottom: 40px;
}
.top_visual_inner02::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%; 
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.0));
  pointer-events: none; /* クリックなどに干渉させない */
  z-index: 1; /* city1・city2より上 */
}
.top_visual_text02{
	width: 100%;
	font-size:1.5rem;
	letter-spacing: 0.6rem;
	line-height: 1.8;
	padding: 2rem 1rem;
	text-align: center;
	z-index: 2;
}

.top_visual_text02 .t1{
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 6.5s;
}
.top_visual_text02 .t2{
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 7s;
}
.top_visual_text02 .t3{
	opacity: 0;
  	animation: fadeInText 1s ease forwards;
  	animation-delay: 7.5s;
}

.top_visual_inner_img0201{
	display: none;
}
.top_visual_inner_img0201 img{
	width: 90%;
}
.top_visual_inner_img0202{
	display: none;
}
.top_visual_inner_img0202 img{
	width: 70%;
}

.top_visual_inner_img02_sp{
	display: block;
	opacity: 0;
	width: 100%;
	animation: fadeInText 1s ease forwards;
  	animation-delay: 9s;
}
.top_visual_inner_img02_sp img{
	width: 70%;
	margin: 0 auto;
}

.concept-pers{
    width: 100%;
    height: 90vh;
    min-height:unset;
    max-height: none;
    padding: 1rem;
    box-sizing: border-box;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url(../images/concept/concept-img01.png) ;
    background-repeat:  no-repeat;
    background-size: 100% auto;
    background-position: center top;
        position: relative;
}
.title-img {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  box-sizing: border-box;
  margin: 0 auto;
}

.title-img-item1{
  width:35%;
  max-width: 350px;
  margin:0.5rem auto;
}

.title-text{
	margin-top: 1rem;
	font-size:1rem;
	letter-spacing: 0.5rem;
}
.concept-msg{
    font-size: 16px;
    color: #FFFFFF;
    line-height: 2.5;
    letter-spacing: 0.1rem;
    text-align: left;
    width: 90%;
    margin: 4rem auto 0;
}
.concept-notice{
    font-size: 12px;
    color: #fff;
    position: absolute;
    padding: 1rem;
    left: 0;
    bottom:0;
}
}