@charset "UTF-8";
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch; /* 古いAndroid対策 */
    height: auto;
  min-height: 100%;
  overflow-x: hidden;
}

body{
	color: #fff;
	background-color: #000;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
/* ─ header の初期状態 ───────────────── */
#header{
  position: fixed;          /* どこからでもすぐ見えるように固定 */
  top: 0; left: 0; width: 100%;
  z-index: 100;             /* 他要素より前面に */
  opacity: 0;               /* ← 非表示 */
  pointer-events: none;     /* クリックも無効にしておく */
  transition: opacity .6s ease;   /* フェード時間 */
}

/* ─ 表示させたいときに付くクラス ─────── */
#header.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.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);
  }
}

/* どちらのセクションも viewport＝100vh */
.scroll-scene{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.scene-layer{position:absolute;inset:0;}
.scene-layer img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.layer-city {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.layer-city::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%; 
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  pointer-events: none; /* クリックなどに干渉させない */
  z-index: 5; /* city1・city2より上 */
}
.city1,
.city2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* city2 にマスクを適用して下から表示 */
.city2 {
z-index: 2; /* 上に重ねる */

  /* 最初は全てマスクされて非表示 → 下から上に表示 */
  mask-image: linear-gradient(to top, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
  mask-position: 0% 100%;
  -webkit-mask-position: 0% 100%;
  mask-size: 100% 200%;
  -webkit-mask-size: 100% 200%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  opacity: 0;
}

.kv-sec{
  position:relative;
  min-height:calc(var(--vh, 1vh) * 100);
}
@media (min-width: 768px) {
.kv-sec{
  overflow:hidden;
}
}

/* ❶ ラッパー自体（＝2 枚のロゴを束ねる div） */
.title-img {
  position: absolute; /* 親の .kv-sec を基準に固定 */
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100vh; */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 10;
  padding: 0 1rem 5rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  /* 念のためバグ回避 */
  box-sizing: border-box;
  will-change: transform, opacity;
}

/* 画像は自動幅＆上下マージンで間隔を調整 */
.title-img-item1,.title-img-item2{
  width:auto;
  margin:0.5rem auto;
  opacity:0;
}
.mv-t1{
	margin-top: 2rem;
	opacity: 0;
	font-size:1.5rem;
	letter-spacing: 1rem;
}
.mv-t2{
	position: absolute;
	bottom: 10vh;
	opacity: 0;
	font-size:0.8rem;
	letter-spacing: 0.5rem;
}
.mv-logo-block {
  position: fixed;       /* 画面上に固定表示 */
  top: 0%;            /* 上から100pxの位置に配置 */
  left: 50%;
  transform: translateX(-50%) translateY(20px); /* 中央寄せ + 下から登場 */
  z-index: 1000;         /* 最前面（必要ならもっと大きく） */
  opacity: 1;            /* 最初は非表示 */
  pointer-events: none;  /* 必要であれば：スクロールやクリックの邪魔にならない */
  width: 100%;
  padding: 1rem 2rem;
}

.mv-title-log{
	width: 20%;
}
.mv-title-log img{
	width: 100%;
	max-width: 150px;
}
.mv-title-box{
	width: 100%;
}
.mv-title-box img{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	margin-top: -2rem;
}

.mv-notice{
  font-size:10px;
  letter-spacing: 0.05rem;
  position: absolute;
  bottom: 0.5rem;
  left:1rem;
}
.feature-sec{
	margin-top: 0vh;
	padding: 2rem 1rem;
	background-image: url('../images/index/feature_bg.jpg');	
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	z-index: 0;
}
.feature{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.feature picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* セクション自体のセンタリングはここで完結 */
.request-sec{
  width:100%;
  background:#221815;
  text-align:center;
 	position:relative;
	z-index: 0;
}

.request{
  display:block;
  width:100%;
  margin:0 auto;
  color:#fff;
  text-decoration:none;
  font-size:3rem;
  letter-spacing:.4rem;
  padding: 1rem;
}

.request-btn-inner{
  max-width:700px;  
  margin:0 auto;
  display:inline-flex;
  align-items:center;
  gap:1.5rem;
  position:relative;
  transition: .3s ease;
}

.request-btn-inner::after{
  content:"";
  width:3rem;
  height:2.5rem;
  flex:0 0 auto;
  background:url(../images/index/btn-arrow.png) center/contain no-repeat;
   transition: .3s ease;
}
.request-btn-inner:hover::after {
background:url(../images/index/btn-arrow-hover.png) center/contain no-repeat;
}
.section-information{
 	position:relative;
	z-index: 0;
	background-color: #000;
	padding: 3rem 1rem;
}
.information{
	width: 100%;
	max-width: 1200px;
	margin: 1rem auto;
display:flex;
  justify-content:space-between;  /* ←左右いっぱい */
  gap:1.5rem;    
}
.info-header{
	font-size: 2.2rem;
	font-family: 'Nanum Myeongjo', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN',
               'Times New Roman', Times, serif;
			color:#fff;
			font-weight: normal;
			letter-spacing: 0.2rem;
}

.info-header-bottom{
	font-size:0.8rem;
	color:#fff;
	letter-spacing: 0.1rem;
}
.infomation_container{
	width: 80%;
	max-width: 650px;
}

ul.information_list li{
	width: 100%;
	border-bottom: 1px solid #fff;
	padding: 20px 0;
	letter-spacing: 0.1em;
}
ul.information_list li span.day{
	display: block;
	font-family: var(--ff-en);
	font-weight: 800;
	font-size: 0.9em;
}
ul.information_list li a{
	color: #B8824E;
	text-decoration: underline;
	letter-spacing: 0.1em;
}
ul.information_list li a:hover{
	filter: brightness(80%);
}

@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;
}
.layer-pers{
width: 120vw; 
position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.layer-pers img{
	width: 100%;
  object-fit: contain;
  object-position: center;
  position: absolute;
  top:30%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.title-img{
  /* 画面のど真ん中に *重ねる* */
  position:absolute;              /* ＝ .kv-sec を基準に絶対配置          */
  top:0; left:0;
  /* transform:translate(-50%, -50%); */

  /* 中身をまとめて中央寄せしたいので Flex に */
  display:flex;
  flex-direction:column;          /* 上下に 2 枚並べる */
  align-items:center;             /* 左右中央 */
  justify-content:flex-end;         /* 上下中央（高さが足りない場合）       */

  /* レイアウト系 */
  width:100%; 
  height: calc(100vh - 40px);
  z-index:10; 
  padding: 2rem 2.5rem 5rem;
}
.title-img-item1{
  width:70%;
  margin:0.5rem auto;
  opacity:0;
}
.title-img-item2{
  width:90%;
  margin:0.5rem auto;
  opacity:0;
}

.mv-t1{
	margin-top: 0.5rem;
	opacity: 0;
	font-size:1rem;
	letter-spacing: 0.5rem;
}
.mv-t2{
	display: none;
}

.mv-notice{
  width: 90%;
  padding-top: 1rem;
  font-size:9px;
  letter-spacing: 0;
}

.mv-title-box img{
	margin-top: 2rem;
}

.feature-sec{
	padding:1rem;
}
.request{
  font-size:1.5rem;
  letter-spacing: 0.2rem;
  padding: 1rem;
}

.request-btn-inner::after{
  content:"";
  width:1.5rem;
  height:1.3rem;
  flex:0 0 auto;
  background:url(../images/index/btn-arrow.png) center/contain no-repeat;
}
  .information {
    flex-direction: column;
    align-items: flex-start;
  }

  .infomation_container {
    width: 100%;
  }
}

/* ---------- Android 専用 ---------- */
/* ▼共通 : 画面に重ねてフェードさせるボックス  */
/* 追従は JS で fixed⇆absolute を切り替えるより sticky が軽い */
.title-img-android{
  position: sticky;     /* スクロールに吸着 */
  top: 0;               /* 画面上端に貼り付き */
  width: 100%;
  z-index: 1000;
  pointer-events: none; /* クリック無視 */
}

.mv-logo-block-a,
.title-img-item1-a,
.title-img-item2-a,
.mv-t1-a{ opacity:0; } 


.title-img-item1-a{
  width:70%;
  margin:0.5rem auto;
  opacity:0;
}
.title-img-item2-a{
  width:90%;
  margin:0.5rem auto;
  opacity:0;
}

.mv-t1-a{
	margin-top: 0.5rem;
	opacity: 0;
	font-size:1rem;
	letter-spacing: 0.5rem;
}

.mv-logo-block-a {
  position: fixed;       /* 画面上に固定表示 */
  top: 0%;            /* 上から100pxの位置に配置 */
  left: 50%;
  transform: translateX(-50%) translateY(20px); /* 中央寄せ + 下から登場 */
  z-index: 1000;         /* 最前面（必要ならもっと大きく） */
   display:flex;
  flex-direction:column;   /* 上下に並べる */
  justify-content:flex-start; 
  opacity: 1;            /* 最初は非表示 */
  pointer-events: none;  /* 必要であれば：スクロールやクリックの邪魔にならない */
  width: 100%;
  height: calc(100vh - 40px);
  padding: 1rem 2rem;
}

.mv-title-box-a2{
width: 100%;
  position:absolute;
  top:80%;
  left:50%;
  transform:translate(-50%, -50%);  /* 真ん中寄せ */
  text-align:center;
}

.mv-title-log-a{
	width: 20%;
}
.mv-title-log-a img{
	width: 100%;
	max-width: 150px;
}
.mv-title-box-a{
	width: 100%;
}
.mv-title-box-a img{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	margin-top: 2rem;
}
.mv-title-box-a2 .mv-notice{
  width: 90%;
  padding-top: 1rem;
  font-size:9px;
  letter-spacing: 0;
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, -50%);  /* 真ん中寄せ */
  text-align:left;
}

/* 文教バナー */
.bunkyo-bnr{
  padding: 5rem 1rem;
}

.bunkyo-bnr .container img{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
@media (max-width:767px){
  .bunkyo-bnr{
  padding: 2rem 1rem;
}
}