@charset "utf-8";

.h2_about {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: min(5.3125vw, 153px) auto min(5.625vw, 162px) ;
}
.h2_about .h2_img {
	width: min(5.625vw, 162px);
}
.h2_about .h2_img .logo_pth {
	fill: #898989;
}
.h2_about .pname {
	color: #898989;
	font-family: 'Montserrat', serif;
	font-size: clamp(0.85rem, 1.736vw, 1.7rem);
	font-weight: 400;
	margin-top: min(1.25vw, 36px);
}


@media screen and (min-width:641px) {
	
}
@media screen and (max-width:640px) {
	.h2_about {
		margin: min(15.2vw, 114px) auto min(16vw, 120px);
	}
	.h2_about .h2_img {
		width: min(17.6vw, 132px);
	}
	.h2_about .pname {
		font-size: clamp(1.65rem, 4.3vw, 3.3rem);
		margin-top: min(4.8vw, 36px);
	}
}


/*top read*/
.top_about .wp_read,
.top_about {
	position: relative;
}
.top_about .wp_read::after,
.top_about::before {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: #c4c4c4;
	position: absolute;
	left: 0;
	opacity: 0;
	transform: scale(0,1);
	transform-origin: center left;
}
.top_about::before {
	bottom: 0;
	animation: barSlide 1s 5.5s forwards;
}
.top_about .wp_read::after {
	top: 0;
}
.top_about .read_01::after {
	animation: barSlide 1s forwards;
}
.top_about .read_02::after {
	animation: barSlide 1s 2s forwards;
}
.top_about .read_03::after {
	animation: barSlide 1s 4s forwards;
}


@keyframes barSlide {
	0% {
		opacity: 0;
		transform: scale(0,1);
		transform-origin: center left;
	}
	100% {
		opacity: 1;
		transform: scale(1,1);
		transform-origin: center left;
	}
}


.top_about .read {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.top_about .read._eng {
	color: #898989;
	font-family: 'DMSerifDisplay', serif;
	line-height: 1.6;
}
.top_about .read._jp {
	color: #898989;
	font-family: 'Noto Sans JP', serif;
	font-weight: 300;
}
.top_about .read {
	opacity: 0;
}
.letter {
  opacity: 0;
  display: inline-block;
  transform: translateX(-20px);
  animation: fadeInR 0.14s forwards;
}
/*.top_about .wp_read:hover .read._eng {opacity: 0;visibility: hidden;}*/

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}
@keyframes slideOut {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	50% {opacity: 0;}
	100% {
		transform: translateX(110vw);
		opacity: 0;
	}
}

@keyframes fadeInR {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInDown {
	to {
		opacity: 1;
    transform: translateY(0);
	}
}

@media screen and (min-width:641px) {
	.top_about .wp_read {
		/*position: relative;
		height: min(18vw, 400px);*/
	}
	.top_about .read._eng {
		font-size: clamp(6rem, 12.242vw, 12rem);
		/*height: min(18vw, 400px);*/
		position: relative;
		z-index: 2;
	}
	.top_about .read._jp {
		font-size: clamp(1.4rem, 2.858vw, 2.8rem);
		transform: translateY(-1.5em);
		/*position: absolute;
		top: -1px;
		left: 0;
		right: 0;
		z-index: 1;*/
	}

	.top_about .read#read01 {
		/*animation: fadeIn .5s .1s forwards, slideOut 2s 6s forwards;*/
		animation: fadeIn .5s .1s forwards;
	}
	.top_about .read#read02 {
		/*animation: fadeIn .5s 2.2s forwards, slideOut 2s 6.5s forwards;*/
		animation: fadeIn .5s 2.2s forwards;
	}
	.top_about .read#read03 {
		/*animation: fadeIn .5s 4.2s forwards, slideOut 2s 7s forwards;*/
		animation: fadeIn .5s 4.2s forwards;
	}
	/*
	.top_about .read#read04 {
		animation: fadeIn 1s 6.5s forwards;
	}
	.top_about .read#read05 {
		animation: fadeIn 1s 7s forwards;
	}
	.top_about .read#read06 {
		animation: fadeIn 1s 7.5s forwards;
	}
	*/
	.top_about .read._jp {
		animation: fadeInDown 1s 6.2s forwards;
		padding-bottom: .5em;
	}

}
@media screen and (min-width:1400px) {
	.top_about .read._eng {
		font-size: clamp(8rem, 16.32vw, 16rem);
	}
	.top_about .read._jp {
		font-size: clamp(2rem, 4.082vw, 4rem);
	}
}
@media screen and (min-width:2040px) {
	.top_about .read._eng {
		font-size: clamp(13rem, 26.54vw, 26rem);
	}
	.top_about .read._jp {
		font-size: clamp(2.5rem, 5.102vw, 5rem);
	}
}
@media screen and (min-width:2880px) {
	.top_about .read._eng {
		font-size: clamp(16rem, 32.65vw, 32rem);
	}
}
@media screen and (max-width:640px) {
	.top_about .wp_read {
		padding: min(4vw, 30px) 0 min(8vw, 60px);
	}
	.top_about .read._eng {
		font-size: clamp(3.65rem, 9.5vw, 7.3rem);
		height: 1.5em;
		margin: .2em 0 .15em;
	}
	.top_about .read._jp {
		font-size: clamp(1.1rem, 2.865vw, 2.2rem);
		text-align: center;
		line-height: 1.6;
	}
	.top_about .read#read01 {
		animation: fadeIn .5s forwards;
	}
	.top_about .read#read02 {
		animation: fadeIn .5s 2.2s forwards;
	}
	.top_about .read#read03 {
		animation: fadeIn .5s 4.2s forwards;
	}
	.top_about .read#read04 {
		animation: fadeIn 1s 1s forwards;
	}
	.top_about .read#read05 {
		animation: fadeIn 1s 3s forwards;
	}
	.top_about .read#read06 {
		animation: fadeIn 1s 5s forwards;
	}
}


/*mdl*/
.mdl_read * {
	color: #898989;
	font-family: 'Noto Sans JP', serif;
}
.mdl_read .flex_txt {
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.mdl_read .read_main {
	font-weight: 300;
	line-height: 1.8;
	writing-mode: vertical-rl;
}
.mdl_read .read_main .wp_txt {
	opacity: 0;
}
.mdl_read .read_txt {
	font-weight: 400;
	opacity: 0;
	transition: all 1s;
}
.mdl_read .read_txt.view {
	opacity: 1;
}


@media screen and (min-width:641px) {
	.mdl_read .flex_txt {
		margin-bottom: min(13.75vw, 390px);
	}
	.mdl_read .read_main {
		font-size: clamp(2.5rem, 5.102vw, 5rem);
	}
	.mdl_read .read_txt {
		font-size: clamp(0.85rem, 1.736vw, 1.7rem);
		text-align: center;
		line-height: 3;
		padding-bottom: min(13.75vw, 390px);
	}
	.mdl_read .read_main.view .wp_txt._01,
	.mdl_read .read_main.view .wp_txt._02 {
		animation: fadeIn 1s forwards;
	}
	.mdl_read .read_main.view .wp_txt._03,
	.mdl_read .read_main.view .wp_txt._04 {
		animation: fadeIn 1s .5s forwards;
	}

}
@media screen and (max-width:640px) {
	.mdl_read:not(.mv) {
		margin: min(36vw, 270px) min(10.8vw, 81px) min(28vw, 210px);
	}
	.mdl_read .flex_txt {
		margin-bottom: min(31.2vw, 234px);
	}
	.mdl_read .read_main {
		font-size: clamp(2.4rem, 6.25vw, 4.8rem);
	}
	.mdl_read .read_txt {
		font-size: clamp(1.4rem, 3.646vw, 2.8rem);
		line-height: 2.18;
		margin-bottom: 0;
	}
	.mdl_read .read_main.view .wp_txt._01 {
		animation: fadeIn 2s forwards;
	}
	.mdl_read .read_main.view .wp_txt._02 {
		animation: fadeIn 2s .5s forwards;
	}
	.mdl_read .read_main.view .wp_txt._03 {
		animation: fadeIn 2s 1s forwards;
	}
	.mdl_read .read_main.view .wp_txt._04 {
		animation: fadeIn 2s 1.5s forwards;
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateX(15em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/*last*/
.lst_catch {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.lst_catch .txt_01 {
	color: #898989;
	font-family: 'DMSerifDisplay', serif;
	font-weight: 400;
	display: flex;
	align-items: center;
}
.lst_catch .txt_01._lineH {
	line-height: .85;
}
.lst_catch .txt_01 ._symbol {
	display: inline-block;
	text-indent: -110vw;
	position: relative;
}
.lst_catch .txt_01 ._symbol::before,
.lst_catch .txt_01 ._symbol::after {
	content: '';
	display: block;
	position: absolute;
	height: 1px;
	width: min(3.888888888888889vw, 112px);
	background-color: #898989;
	left: min(1.25vw, 36px);
}
.lst_catch .txt_01 .times::after,
.lst_catch .txt_01 .times::before {
	top: 60%;
}
.lst_catch .txt_01 .times::after {
	transform: rotate(45deg);
}
.lst_catch .txt_01 .times::before {
	transform: rotate(-45deg);
}
.lst_catch .txt_01 .equal::before {
	top: 50%;
}
.lst_catch .txt_01 .equal::after {
	top: calc(50% + min(1.5625vw, 45px));
}

.lst_catch .txt_02 {
	color: #898989;
	font-family: 'Bebas Neue', serif;
	font-weight: 400;
	line-height: 0.92;
	margin-left: -0.03em;
	margin-bottom: -0.18em;
}
.lst_catch .txt_03 .txt_fade {
	color: #898989;
	font-family: 'Noto Sans JP', serif;
}

.lst_catch .fadeAnm2 {
	overflow: hidden;
}
.lst_catch .txt_01,
.lst_catch .txt_02,
.lst_catch .txt_03 .txt_fade {
	opacity: 0;
}
.lst_catch .txt_03 .txt_fade[data-animated="true"],
.lst_catch .txt_01[data-animated="true"] {
	animation: fadeIn 0.14s .2s forwards;
	visibility: visible;
}
.lst_catch .txt_02[data-animated="true"] {
	animation: fadeIn 0.4s forwards;
	visibility: visible;
}

.txt_01 .letter2 {
  opacity: 0;
  display: inline-block;
  transform: translateY(-1em);
  animation: fadeInDown .8s forwards;
}
.txt_03 .letter2 {
  opacity: 0;
  display: inline-block;
  transform: translateX(-1em);
  animation: fadeInR .5s forwards;
}
.letter3 {
  opacity: 0;
  display: inline-block;
  transform: translateY(-1em);
  animation: fadeInDown 1.5s forwards;
}


@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



@media screen and (min-width:641px) {
	.lst_catch .txt_01 {
		font-size: clamp(8rem, 16.32vw, 16rem);
	}
	.lst_catch .txt_02 {
		font-size: calc(clamp(46.25rem, 77.2vw, 92.5rem) / 2);
		line-height: 0.92;
	}
	.lst_catch .wp_txt {
		margin-bottom: min(18.75vw, 540px);
	}
	.lst_catch .txt_03 {
		font-size: clamp(4.25rem, 4.592vw, 4.5rem);
	}
}
@media screen and (max-width:640px) {
	.lst_catch:not(.mv) {
		margin: 0 min(10.8vw, 81px) min(28vw, 210px);
	}
	.lst_catch .wp_txt {
		margin-bottom: min(16vw, 120px);
	}
	.lst_catch .txt_01 {
		font-size: clamp(5.1rem, 13.282vw, 10.2rem);
	}
	.lst_catch .txt_02 {
		font-size: clamp(15rem, 39.075vw, 30rem);
	}
	.lst_catch .txt_03 {
		font-size: clamp(1.9rem, 4.948vw, 3.8rem);
		line-height: 1.81;
	}
}