@charset "utf-8";
/***************************************************************************************************
	page_top.css
***************************************************************************************************/
/*
*/
#header {
  mix-blend-mode: difference;
}
#header .hd_blk_1_1 nav ul li a {
	color:#ffffff;
}
#header .hd_blk_1_1 nav ul li a.nm_hover {
	color:#ffffff;
}
#hdhover {
  display: flex;
}
/*
*/
#content_height {
  left:0;
  top:0;
  width: 100%;
  height: 10000px;
  pointer-events: none;
}
/*
*/
#ex {
  position: fixed;
  left:0;
  top:0;
  width: 100%;
  height: 100lvh;
  pointer-events: none;
}
#ex.hide {
  opacity:0;
}
#ex .ex_content {
  left:50%;
  top: 50%;
  translate:-50% -48%;
  height:110%;
  aspect-ratio: 154 / 565;
	background-image: url('../images/top_img_01.svg');
	background-position: 50% 50%;
	background-size: contain;
}
/*
*/
#page_top {
  position: fixed;
  left:0;
  top:0;
  width: 100%;
  height: 100lvh;
  overflow: hidden;
}
/*  */
#page_top .pagebody {
  display: table;
  width:calc(4400px + 250vw);
  height: 100%;
  transition:left 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
}
#page_top .pagebody.noanim {
  transition:none;
}
#page_top .blk_1,
#page_top .blk_2,
#page_top .blk_3,
#page_top .blk_4 {
  width:1100px;
}
#page_top .blk_5 {
  width: 100vw;
}
#page_top .blk_1 .rep_1::before,
#page_top .blk_2 .rep_1::before {
  position: absolute;
  content:'';
  display: block;
  height: 100lvh;
  left:50%;
  top:50%;
  translate:-50% -50%;
  background-color: #ffffff;
  pointer-events: none;
}
#page_top .blk_1 .rep_1::before {
  width:1100px;
  left:30%;
  /* background-color: #ff0000; */
}
#page_top .blk_2 .rep_1::before {
  width:1200px;
  left:calc(50% + 100px);
  /* background-color: #ff00ff; */
}
/*  */
#page_top .pagebody .blk_mv {
  display: table-cell;
  width: 50vw;
  height:100%;
  pointer-events: none;
}
/*  */
#page_top .pagebody .blk_ex {
  display: table-cell;
  width: 100vw;
  height:100%;
  pointer-events: none;
}
/*
*/
#page_top .blk_1 {
  display: table-cell;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease-out 0s;
}
#page_top .blk_1.show {
  opacity: 1;
  pointer-events: auto;
}
#page_top .blk_1 .rep_1 {
  left:58%;
}
#page_top .blk_1 .rep_1 .i {
  left:-135px;
  top:50%;
  translate:0 -48%;
  height:110%;
  pointer-events: none;
  opacity: 1;
}
#page_top .blk_1 .rep_1 .i .tgt_ex {
  position: absolute;
  left:0;
  top:0;
  translate:-50% 0;
  width: auto;
  height:100%;
  aspect-ratio: 154 / 565;
	background-image: url('../images/top_img_01.svg');
	background-position: 50% 50%;
	background-size: contain;
  opacity:0;
}
#page_top .blk_1 .rep_1 .i .tgt_ex.show {
  opacity:1;
}
#page_top .blk_1 .rep_1 .t {
  top:50%;
  translate: 0 -50%;
  mix-blend-mode: difference;
  color:#ffffff;
}
#page_top .blk_1 .rep_1 .t h2 {
  height: calc(min(3lvh, 21.5px) + min(15lvh, 86px));
}
#page_top .blk_1 .rep_1 .t h2 .tit_img {
  height: min(15lvh, 86px);
  translate: -22% 0;
}
#page_top .blk_1 .rep_1 .t .t_t p {
  font-size: min(2.5lvh, 14px);
}
/*
*/
#page_top .blk_2 {
  display: table-cell;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease-out 0s;
}
#page_top .blk_2.show {
  opacity: 1;
  pointer-events: auto;
}
#page_top .blk_2 .rep_1 .i {
  height:100%;
  left:-6%;
  top:0;
}
#page_top .blk_2 .rep_1 .i .img_wrap_wrap {
  height:100%;
  aspect-ratio: 270 / 530;
}
#page_top .blk_2 .rep_1 .i .img_wrap {
  position: absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  overflow: hidden; 
}
#page_top .blk_2 .rep_1 .i .img {
  height:100%;
}
#page_top .blk_2 .rep_1 .i .img::before {
  display: block;
  content:'';
  left:40%;
  translate:-40% 0;
  height:100%;
  aspect-ratio: 2136 / 1060;
	background-image: url('../images/top_img_02.jpg');
	background-position: 50% 50%;
	background-size: cover;
}

#page_top .blk_2 .rep_1 .t {
  display: flex;
  height: 100%;
}
#page_top .blk_2 .rep_1 .t_l {
  height:100%;
  aspect-ratio: 270 / 530;
}
#page_top .blk_2 .rep_1 .t_r > div {
  top:100%;
  translate: 0 -100%;
  mix-blend-mode: difference;
  color:#ffffff;
  /* transform: scale3d(1,1,1); */
  will-change: transform;
}
#page_top .blk_2 .rep_1 .t h2 {
  height: calc(min(3lvh, 21.5px) + min(15lvh, 86px));
}
#page_top .blk_2 .rep_1 .t h2 .tit_img {
  height: min(15lvh, 86px);
}
/*
*/
#page_top .blk_3 {
  display: table-cell;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease-out 0s;
}
#page_top .blk_3.show {
  opacity: 1;
  pointer-events: auto;
}
#page_top .blk_3 .rep_1 .i {
  left:100%;
  top:100%;
  translate:-100% -100%;
  width: min(50lvh, 320px);
  height: auto;
  padding:0 0 calc(min(6lvh, 43px) + min(15lvh, 86px))  0;
}
#page_top .blk_3 .rep_1 .i .img_wrap_wrap {
  width:100%;
  aspect-ratio: 330 / 400;
}
#page_top .blk_3 .rep_1 .i .img_wrap {
  position: absolute;
  width:100%;
  height:100%;
  overflow: hidden;
}
#page_top .blk_3 .rep_1 .i .img {
  height:100%;
}
#page_top .blk_3 .rep_1 .i .img::before {
  display: block;
  content:'';
  left:50%;
  top:-10%;
  translate:-50% 0;
  height:max(400px, 125%);
  aspect-ratio: 1632 / 810;
	background-image: url('../images/top_img_03.jpg');
	background-position: 50% 50%;
	background-size: cover;
}
#page_top .blk_3 .rep_1 .t {
  top:100%;
  translate: 0 -100%;
}
#page_top .blk_3 .rep_1 .t::after {
  display:block;
  content:'';
  height: calc(min(6lvh, 43px) + min(15lvh, 86px));
}
#page_top .blk_3 .rep_1 .t_t {
  padding:0 min(56.25lvh, 360px) 0 0;
}
#page_top .blk_3 .rep_1 .t h2 {
  position: absolute;
  left:0;
  top:100%;
  translate:0 -100%;
  height: min(15lvh, 86px);
}
#page_top .blk_3 .rep_1 .t h2 .tit_img {
  height: min(15lvh, 86px);
}
#page_top .blk_3 .rep_1 .t h2 .tit_img img {
  height: 100%;
}

/*
*/
#page_top .blk_4 {
  display: table-cell;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease-out 0s;
}
#page_top .blk_4.show {
  opacity: 1;
  pointer-events: auto;
}
#page_top .blk_4 .rep_1 .t {
  top:100%;
  translate: 0 -100%;
}
#page_top .blk_4 .rep_1 .t::after {
  display:block;
  content:'';
  width: 100%;
  aspect-ratio: 470 / 206;
}
#page_top .blk_4 .rep_1 .i {
  position: absolute;
  top:100%;
  width:100%;
  aspect-ratio: 460 / 180;
}
#page_top .blk_4 .rep_1 .i .img_wrap_wrap {
  width:100%;
  height:100%;
  translate:0 -100%;
}
#page_top .blk_4 .rep_1 .i .img_wrap {
  top:10%;
  height:90%;
  aspect-ratio: 695 / 175;
  overflow: hidden;
}
#page_top .blk_4 .rep_1 .i .img {
  height:100%;
  aspect-ratio: 2177 / 350;
}
#page_top .blk_4 .rep_1 .i .img::before {
  position:absolute;
	display: block;
  content:'';
  left:100%;
  top:50%;
  translate:-100% -50%;
  width:1380px;
  aspect-ratio: 2177 / 1038;
  background-image: url('../images/top_img_04.jpg');
	background-position: 50% 50%;
	background-size: cover;
}
#page_top .blk_4 .rep_1 .t h2 {
  height: calc(min(3lvh, 21.5px) + min(15lvh, 86px));
}
#page_top .blk_4 .rep_1 .t h2 .tit_img {
  height: min(15lvh, 86px);
  translate:-12% 0;
}
/*
*/
#page_top .blk_5 {
  display: table-cell;
  height: 100%;
  background-color: #ffffff;
  text-align: center;
  vertical-align: middle;
}
#page_top .blk_5 section {
  display: inline-block;
  padding:min(10lvh, 70px) 80px;
}
#page_top .blk_5 section::before,
#page_top .blk_5 section::after {
	position: absolute;
	display: block;
	content: '';
	width: 60px;
	height: 100%;
	left:10%;
	top:50%;
  translate:0 -50%;
  border: solid #000000;
  border-width: 19px 0 19px 19px;
  height: 40%;
  transition:
  height .4s ease-out 0s,
  left .4s ease-out 0s;
}
#page_top .blk_5 section::after {
  left:90%;
  border-width: 19px 19px 19px 0;
  translate:-100% -50%;
}
#page_top .blk_5.show section::before {
  left:0;
  height: 100%;
}
#page_top .blk_5.show section::after {
  left:100%;
  height: 100%;
}
#page_top .blk_5 section > div::after {
	position: absolute;
	display: block;
	content: 'ABOUT US';
	left:50%;
	top:50%;
  translate:-50% -50%;
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  scale:.7;
  transition:
  scale .4s ease-out 0s,
  top .4s ease-out 0s,
  translate .4s ease-out 0s;
}
#page_top .blk_5.show section > div::after {
	top:0;
  translate:-50% 0;
  scale:1;
  /* transition-delay:.4s; */
}
#page_top .blk_5 section h2 {
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  opacity:0;
}
#page_top .blk_5 section h3 {
  padding:15px 0 15px 0;
  overflow: hidden;
}
#page_top .blk_5 section h3 span {
  display: block;
  font-size: 19px;
  line-height: 1;
  font-weight: 600;
  padding:0 0 5px 0;
  opacity:0;
  transition:
  opacity .1s ease-out 0s;
}
#page_top .blk_5.show section h3 span {
  opacity:1;
  transition-delay:.2s;
  transition-duration: .4s;
}
#page_top .blk_5 section dl {
  display:table;
  margin: auto;
}
#page_top .blk_5 section dl div {
  display:table-row;
  opacity:0;
  translate: 10% 0;
  transition:
  translate 0s ease-out .1s,
  opacity .1s ease-out 0s;
}
#page_top .blk_5.show section dl div {
  opacity:1;
  translate: 0 0;
  transition-duration: .4s;
}
#page_top .blk_5.show section dl div:nth-of-type(1) {
  transition-delay:.2s; 
}
#page_top .blk_5.show section dl div:nth-of-type(2) {
  transition-delay:.3s; 
}
#page_top .blk_5.show section dl div:nth-of-type(3) {
  transition-delay:.4s; 
}
#page_top .blk_5.show section dl div:nth-of-type(4) {
  transition-delay:.5s; 
}
#page_top .blk_5 section dl div dt {
  display:table-cell;
  text-align: left;
  vertical-align: top;
  font-size:12px;
  line-height: 1.8;
  font-weight: 700;
  padding:0 10px 10px 0;
}
#page_top .blk_5 section dl div dd {
  display:table-cell;
  text-align: left;
  vertical-align: top;
  font-size:12px;
  line-height: 1.8;
  padding:0 0 10px 0;
}
/*
*/
#page_top .blk_6 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  background-color: #ffffff;
}
/*
*/
#page_top .rep_1 {
  position: absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  height: min(540px, 84%);
}
#page_top .rep_1 .t h2 span {
  display: block;
  font-size: min(21.5lvh, 120px);
  line-height: 1;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}
#page_top .rep_1 .t h2 span span {
  display: block;
}
#page_top .rep_1 .t h2 span span span {
  display: block;
  opacity:0;
  translate:60px 0;
  transition: 
  opacity .6s ease-out 0s,
  translate 0s .6s;
}
#page_top .rep_1 .t.show h2 span span span {
  translate:0 0;
  opacity:1;
  transition: 
  opacity .6s ease-out 0s,
  translate .6s ease-out 0s;
}
#page_top .rep_1 .t h2 .tit_img {
  display: block;
}
#page_top .rep_1 .t h3 {
  opacity:0;
  translate:60px 0;
  transition: 
  opacity .6s ease-out 0s,
  translate 0s .6s;
}
#page_top .rep_1 .t.show h3 {
  translate:0 0;
  opacity:1;
  transition: 
  opacity .6s ease-out 0s,
  translate .6s ease-out 0s;
}
#page_top .rep_1 .t h3 span {
  display: block;
  font-size: min(4.3lvh, 24px);
  line-height: 1.8;
  font-weight: 600;
  white-space: nowrap;
}
#page_top .rep_1 .t_t {
  padding:min(20px, 1lvh) 0 0 0;
  opacity:0;
  translate:60px 0;
  transition: 
  opacity .6s ease-out 0s,
  translate 0s .6s;
}
#page_top .rep_1 .t.show .t_t {
  translate:0 0;
  opacity:1;
  transition: 
  opacity .6s ease-out 0s,
  translate .6s ease-out 0s;
}
#page_top .rep_1 .t_t p {
  font-size: min(2.15lvh, 12px);
  line-height: 1.8;
  padding:0 0 min(10px, 1.5lvh) 0;
  white-space: nowrap;
}
/*  */
#page_top .rep_1 .i {
  position: absolute;
  opacity:0;
  transition: opacity .6s ease-out 0s;
}
#page_top .rep_1 .i.show {
  opacity:1;
  transition: opacity .6s ease-out 0s;
}
#page_top .rep_1 .i .img_wrap_wrap {
  left:60px;
  transition: left 0s .6s;
}
#page_top .rep_1 .i.show .img_wrap_wrap {
  left:0;
  transition: left .6s ease-out 0s;
}
/*
*/
#page_top #footer {
  position: absolute;
  left:-10vw;
  top:50%;
  translate:-100% -50%;

}
/*  */
#page_top #footer .ft_blk_1 {
  display:none;
}
/*  */
#page_top #footer .ft_blk_2 {
  position:absolute;
  rotate:-90deg;
}
#page_top #footer .ft_blk_2 p {
  position:absolute;
  font-size:10px;
  line-height: 1;
  white-space:nowrap;
  translate:-50% -100%;
}
/*
*/
#page_top .ak {
  position:absolute;
  left:50%;
  top:0;
  opacity: 0;
  pointer-events: none;
  /* opacity: 1;
  width:100px;
  height:100px;
  border:1px solid #ff0000; */
}
/***************************************************************************************************
  responsive
***************************************************************************************************/

@media screen and (width <= 1000px) {
/*
*/
#header {
	mix-blend-mode:normal;
}
#header .hd_blk_1_1 nav ul li a {
	color:#ffffff;
}
#header .hd_blk_1_1 nav ul li a.nm_hover {
	color:#FF00D0;
}
#hdhover {
  display: none;
}


/*
*/
#page_top .pagebody {
  width:calc(4400px + 350vw);
}
#page_top .blk_6 {
  width: 100vw;
}
/*
*/
#page_top #footer {
  position: relative;
  display: inline-block;
  left:0;
  top:0;
  translate:0 0;
  width: 100%;
  height: 64%;
}
/*  */
#page_top #footer .ft_blk_1 {
  display:block;
  left:0;
  top:50%;
  translate: 0 -50%;
}
#page_top #footer .ft_blk_1 p {
  padding:20px 0 15px 0;
}
#page_top #footer .ft_blk_1 p a {
  display: inline-block;
  pointer-events: none;
  overflow: hidden;
}
#page_top .show #footer .ft_blk_1 p a {
  pointer-events: auto;

}
#page_top #footer .ft_blk_1 p a span {
  display: block;
  font-size:30px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
	font-family: "Montserrat", sans-serif;
  translate:0 100%;
  padding:0 0 5px 0;
  opacity:0;
  transition:
  translate 0s  .4s,
  opacity .4s ease-out 0s,
  color .4s ease-out 0s;
}
#page_top #footer .ft_blk_1 p a.nm_hover span {
  color:#FF00D0;
}
#page_top .show #footer .ft_blk_1 p a span {
  opacity:1;
  translate:0 0;
  transition-duration: .6s, .6s, .4s;
}
#page_top .show #footer .ft_blk_1 p:nth-of-type(1) a span {
  transition-delay: 0s, 0s, 0s;
}
#page_top .show #footer .ft_blk_1 p:nth-of-type(2) a span {
  transition-delay: .2s, .2s, 0s;
} 
/*  */
#page_top #footer .ft_blk_2 {
  rotate:0deg;
  left:50%;
  top:100%;
  translate: -50% -100%;
}
#page_top #footer .ft_blk_2 p {
  position:relative;
  translate:0 0;
}
/*  */
}

/***************************************************************************************************
  responsive
***************************************************************************************************/

@media screen and (width <= 800px) {

/*
*/
#page_top .blk_1 .rep_1 .t h2 img {
  translate: -15% 0;
}
#page_top .blk_1 .rep_1 .t .t_t p {
  font-size: min(2.15lvh, 12px);
}
/*
*/
#page_top .blk_2 .rep_1 .t {
  display: block;
  height: 100%;
  max-width: 560px;
}
#page_top .blk_2 .rep_1 .t_l {
  display: none;
}
#page_top .blk_2 .rep_1 .t_r {
  height: 100%;
}
#page_top .blk_2 .rep_1 .t_r::before {
	position: absolute;
	display: block;
	content: '';
  height:100%;
  aspect-ratio: 270 / 530;
  pointer-events: none;
}
#page_top .blk_2 .rep_1 .t_r > div {
  top:100%;
  translate: 0 -100%;
}
#page_top .blk_2 .rep_1 .i {
  translate: -100% 0;
}
/*
*/
#page_top .blk_3 .rep_1 .i {
  left:103%;
  width: calc(min(50lvh, 320px) * .8);
}
#page_top .blk_3 .rep_1 .t {
  max-width: 600px;
}
#page_top .blk_3 .rep_1 .t_t {
  padding:0 calc(min(50lvh, 320px) * .8) 0 0;
}
#page_top .blk_3 .rep_1 .t_t p {
  white-space: normal;
}
#page_top .blk_3 .rep_1 .t_t br {
  display: none;
}

/*  */
}

/***************************************************************************************************
  responsive
***************************************************************************************************/
@media screen and (width <= 600px) {
/*
*/
#content_height {
  height: 8000px;
}
/*
*/
#page_top .pagebody {
  width:calc(900px + 600px + 600px + 900px + 350vw);
}
#page_top .blk_1 {
  width:900px;
}
#page_top .blk_2 {
  width:600px;
}
#page_top .blk_3 {
  width:600px;
}
#page_top .blk_4 {
  width:900px;
}
/*  */
#page_top .blk_1 .rep_1::before {
  width:800px;
}
#page_top .blk_2 .rep_1::before {
  left:50%;
  width:800px;
}
/*
*/
#page_top .blk_1 .rep_1 {
  left:50%;
}
#page_top .blk_1 .rep_1 .i {
  left:0;
}
#page_top .blk_1 .rep_1 .t {
  padding:0 4% 0 4%;
  width: min(400px, 100vw);
}
#page_top .blk_1 .rep_1 .t h2 {
  height: calc(min(3lvh, 21.5px) * .8 + min(15lvh, 86px) * .8);
}
#page_top .blk_1 .rep_1 .t h2 .tit_img {
  height: calc(min(15lvh, 86px) * .8);
  translate: 0 0;
}
/*
*/
#page_top .blk_2 .rep_1 .t_r > div {
  padding-left:4%;
  padding-right:4%;
  width: min(400px, 100vw);
}
#page_top .blk_2 .rep_1 .t h2 {
  height: calc(min(3lvh, 21.5px) * .8 + min(15lvh, 86px) * .8);
}
#page_top .blk_2 .rep_1 .t h2 .tit_img {
   height: calc(min(15lvh, 86px) * .8);
}
/*
*/
#page_top .blk_3 .rep_1 .i {
  left:101%;
  translate:0 -100%;
}

#page_top .blk_3 .rep_1 .t {
  padding-left:4%;
  padding-right:4%;
  width: min(400px, 100vw);
}
#page_top .blk_3 .rep_1 .t::after {
  display:block;
  content:'';
  height: calc(min(6lvh, 43px) + min(15lvh, 86px) * .8);
}
#page_top .blk_3 .rep_1 .t_t {
  padding:0;
}
#page_top .blk_3 .rep_1 .t h2 {
   height: calc(min(6lvh, 43px) + min(15lvh, 86px) * .8);
}
#page_top .blk_3 .rep_1 .t h2 .tit_img {
   height: calc(min(15lvh, 86px) * .8);
   left:calc(min(400px, 100vw) * .04);
}
/*
*/
#page_top .blk_4 .rep_1 .t {
  padding-left:4%;
  padding-right:4%;
  width: min(400px, 100vw);
}
#page_top .blk_4 .rep_1 .t_t {
  width:100%;
}
#page_top .blk_4 .rep_1 .t_t > div {
  display: flex;
  justify-content: space-between;
  width: 500px;
}
#page_top .blk_4 .rep_1 .t_t > div > div {
  width:48%;
}
#page_top .blk_4 .rep_1 .t h2 {
  height: calc(min(3lvh, 21.5px) + min(15lvh, 86px) * .8);
}
#page_top .blk_4 .rep_1 .t h2 .tit_img {
   height: calc(min(15lvh, 86px) * .8);
}
#page_top .blk_4 .rep_1 .i {
  left:4%;
}
/*
*/
#page_top .blk_5 section {
  width:min(500px, 90vw);
  padding:min(8lvh, 56px) 20px;
}
#page_top .blk_5 section::before,
#page_top .blk_5 section::after {
  left:2%;
	width: 60px;
  border-width: 16px 0 16px 16px;
}
#page_top .blk_5 section::after {
  border-width: 16px 16px 16px 0;
  left:98%;
}
#page_top .blk_5 section > div::after {
  font-size: min(11vw, 60px);
}
#page_top .blk_5 section h2 {
  font-size: min(11vw, 60px);
}
#page_top .blk_5 section dl div dt {
  font-size:11px;
  padding:0 8px 8px 0;
}
#page_top .blk_5 section dl div dd {
  font-size:11px;
  padding:0 8px 8px 0;
}
/*
*/
#page_top .rep_1 {
  height: min(540px, 64%);
}
#page_top .rep_1 .t h3 span {
  font-size: calc(min(4.3lvh, 24px) * .9);
}
#page_top .rep_1 .t .t_t p {
  white-space:normal;
}
#page_top .rep_1 .t .t_t p br {
  display: none;
}

/*  */
}