@charset "utf-8";

html { 	
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    overflow-x: hidden;/*横幅はみ出し分を隠す*/
}

body{
  background-color: #000000;
  width: auto;
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-size: 16px;
  color: #ffffff;
  line-height: 1.7em;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1, h2, h2, h3, h5, h6  {
  font-size: 100%;
}

img {
  border: none;
  display: block; 
}

a{
  text-decoration: none;
}


/* 画面全体を覆うローダー */
#loading{
  position: fixed;
  inset: 0;
  background:#000000;              /* 背景色はお好みで */
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  /* ▼ 一定時間後にフェードアウトして非表示化 */
  animation: loader-fade 1.5s ease forwards;
  animation-delay: 2s;           /* ← 表示しておきたい最小時間を調整（例: 2秒） */
}

/* フェードアウト後はクリックも通す */
@keyframes loader-fade{
  to{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}

/* パルス本体 */
.pulse{
  width:100px;
  height:100px;
  background:#D1EAEB;
  border-radius:20%;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(0.8); opacity:0.8; }
  50%    { transform:scale(1);   opacity:1; }
}

/* 動きが苦手な人向けに軽減 */
@media (prefers-reduced-motion: reduce){
  .pulse{ animation:none }
  #loading{ animation: loader-fade 0.01s linear forwards; animation-delay:0.3s; }
}


 .fade-in{
  opacity: 0;
  transition: opacity 3s ease-in-out;
}
.fade-in.show {
  opacity: 1;
}

.img {
  opacity: 0;
  transition: 1s ease-in-out;
  filter: blur(20px);
  translate: 100px;
  position: relative;
	z-index: 3;
}
.img.show {
  opacity: 5;
  filter: blur(0);
  translate: 0;
}

	.top-wrapper{
		position: relative;
	}
	
	.top-pc{
		width: 100%;
		z-index: 0;
	}

	.top-phone{
		display: none;
	}
	
	.top-title{
		position: absolute;
		top:10%;
		left: 15%;
	}
	
	.top-name{
		writing-mode: vertical-rl;
		font-size: 5vw;
		line-height: 100px;
		font-family: "dnp-shuei-shogomincho-std", sans-serif;
		font-weight: 700;
		font-style: normal;
	}

	.middle-br{
	display: none;
}

	.small-br{
	display: none;
}

	.history-section{
		background-color: #1b1c1d;
		padding: 0 0 150px 0;
	}
	.history-wrapper{
		z-index: 1;
		position: relative;
	}
	
	.history-phone{
	display: none;
}

	.history-wrapper img{
		width: 400px;
		opacity: 0.2;
		position: absolute;
		top:15%;
		left:15%;
		z-index: 0;
	}
	
	.history-name{
		font-size: 40px;
		letter-spacing: 6px;
		margin: 0;
	}
	
	.history-name2{
		writing-mode: vertical-rl;
		letter-spacing: 3px;
		font-size: 18px;
		padding: 50px  0 0 35px;
	}
	
	.history-text{
		padding: 35px 0px 0 55px;
		width: auto;
		line-height: 35px;
	}
	.history-outer{
		width: 800px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 220px;
	}
	
	.history-text span{
		font-size:20px;
	}
	
	.text-wrapper{
		display: flex;
	}
	
	.history-wrapper2{
		z-index: 1;
		position: relative;
	}
	
	.history-wrapper2 img{
		width: 300px;
		opacity: 0.2;
		position: absolute;
		top:15%;
		right:15%;
		z-index: 0;
		transform: rotate(70deg)
	}
	
	.history-name3{
		font-size: 40px;
		letter-spacing: 6px;
		margin: 0;
		text-align: right;
	}
	
	.history-name4{
		writing-mode: vertical-rl;
		letter-spacing: 3px;
		font-size: 18px;
		padding: 50px  0 0 35px;
	}
	
	.history-text2{
		padding: 35px 0px 0 55px;
		width: auto;
		text-align: right;
		line-height: 35px;
	}
	.history-outer2{
		width: 681px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 155px;
	}
	
	.text-wrapper2{
		display: flex;
		flex-direction:row-reverse;
	}

.machi_wrapper h1{
	font-size: 40px;
	letter-spacing: 8px;
	text-decoration: underline;
	text-align: center;
	padding-top: 80px;
}

.machi_wrapper{
	position: relative;
	width: 100%;
	height: 1000px;
}

.machi_background{
	position: absolute;
	opacity: 0.2;
	width: 600px;
	top:10%;
	left: 5%;
	z-index: 0;
}

.machi_img{
	padding-top: 80px;
	margin: 0 auto;
	z-index: 3;
	width: 550px;
	position: relative;
}

.machi_container{
	writing-mode: vertical-rl; /* 縦書き */
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	color: white;
	font-family: serif;
	position: relative;
}

.machi_title{
	position: absolute;
	top:80px;;
	left: 80%;
	font-size: 80px;
	font-weight: bold;
	margin-bottom: 10px;
	z-index: 2;
}

.line{
	width: 2px;
	background-color: white;
	height: 350px;
	position: absolute;
	top:200px;
	right: 19%;
}

.machi_text{
	text-align: center;
	justify-content: center;
	font-size: 20px;
	line-height: 35px;
	z-index: 3;
	padding: 30px 0 ;
}

.button{
	width: 250px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 3;
}

.blackflame_wrapper{
	position: relative;
	width: 100%;
	height: 1330px;
}

.blackflame_background{
	position: absolute;
	opacity: 0.15;
	width: 660px;
	top:25%;
	right: 5%;
	z-index: 0;
}

.blackflame_img{
	padding-top: 80px;
	margin: 0 auto;
	z-index: 3;
	width: 550px;
	position: relative;
}

.blackflame_container{
    width: 100%;
    display: flex;             /* ← これを追加 */
    flex-direction: column;
    align-items: center;
    color: white;
    font-family: serif;
    position: relative;
    height: 200px;
}

.blackflame_title{
	writing-mode: vertical-rl;
	position: absolute;
	top:250px;;
	right: 80%;
	height: 300px;
	font-size: 80px;
	font-weight: bold;
}

.blackflame_line{
	width: 2px;
	background-color: white;
	height: 350px;
	position: absolute;
	top:500px;
	left: 19%;
}

.blackflame_text{
	text-align: center;
	justify-content: center;
	font-size: 20px;
	line-height: 35px;
	z-index: 3;
	padding: 30px 0 ;
}

.rakuen_wrapper{
	position: relative;
	width: 100%;
	height: 1330px;
}

.rakuen_background{
	position: absolute;
	opacity: 0.15;
	width: 660px;
	top:25%;
	left: 5%;
	z-index: 0;
}

.rakuen_img{
	padding-top: 80px;
	margin: 0 auto;
	z-index: 3;
	width: 550px;
	position: relative;
}

.rakuen_container{
    width: 100%;
    display: flex;             /* ← これを追加 */
    flex-direction: column;
    align-items: center;
    color: white;
    font-family: serif;
    position: relative;
    height: 200px;
}

.rakuen_title{
	writing-mode: vertical-rl;
	position: absolute;
	top:250px;;
	left: 80%;
	height: 500px;
	font-size: 80px;
	font-weight: bold;
}

.rakuen_line{
	width: 2px;
	background-color: white;
	height: 350px;
	position: absolute;
	top:690px;
	right: 19%;
}

.rakuen_text{
	text-align: center;
	justify-content: center;
	font-size: 20px;
	line-height: 35px;
	z-index: 3;
	padding: 30px 0 ;
}

.standstill_wrapper{
	position: relative;
	width: 100%;
	height: 1430px;
}

.standstill_background{
	position: absolute;
	opacity: 0.15;
	width: 660px;
	top:25%;
	right: 5%;
	z-index: 0;
}

.standstill_img{
	padding-top: 80px;
	margin: 0 auto;
	z-index: 3;
	width: 550px;
	position: relative;
}

.standstill_container{
    width: 100%;
    display: flex;             /* ← これを追加 */
    flex-direction: column;
    align-items: center;
    color: white;
    font-family: serif;
    position: relative;
    height: 200px;
}

.standstill_title{
	writing-mode: vertical-rl;
	position: absolute;
	top:250px;;
	right: 80%;
	height: 300px;
	font-size: 80px;
	font-weight: bold;
}

.standstill_line{
	width: 2px;
	background-color: white;
	height: 350px;
	position: absolute;
	top:500px;
	left: 19%;
}

.standstill_text{
	text-align: center;
	justify-content: center;
	font-size: 20px;
	line-height: 35px;
	z-index: 3;
	padding: 30px 0 ;
}

.share_section{
	padding: 50px 0;
	background-color: #1b1c1d;
}

h2{
	width: 100%;
	text-align: center;
	font-size: 30px;
}

.share{
	display: flex;
	justify-content: center;
}

.share-biutton{
	padding: 0 30px;
}

.footer {
    padding: 16px 0;
    background-color: #ffffff; 
    text-align: center;
}

.footer-logo {
    width: 200px;
    height: auto;
    margin:0 auto;
	padding-top: 10px;
	justify-content: center;
}

.footer-nav {
    margin-top: 16px; 
}

.footer-nav a {
    margin: 0 8px;
    font-size: 1.5vw;
    color: #5d8ca6; 
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #ECA642; 
}

footer p {
    margin-top: 16px;
    font-size: 1vw;
    color: #777;
}

/* CSS Document */