@charset "UTF-8";

#scrollBtn {
	position: absolute;
	right: 50px;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 200px;
	width: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	
}

		#scrollBtn > li {
			display: inline-block;
			width: 50%;
			float: left;
/*
			border-left: solid 1px;
			border-bottom: solid 1px;
*/
			text-align: center;
			margin-left: 0px;
			/*! padding: 2em; */
			font-weight: bold;
			line-height: 3.5em;
			text-align: center;
			border: none;
			}

		#scrollBtn > a,
		#scrollBtn > a:link,
		#scrollBtn > a:visited {
			/*! cursor: pointer; */
			display: block;
			/*! outline: none; */
			width: 10px;
			height: 10px;
			background: #fff;
			text-decoration: none;
			/*! color: #fff; */
/* 			color: #5e9cdf; */
			/*! font-weight: normal; */
			filter: drop-shadow(0 0 5px rgba(0, 0, 100, .3));
			  /*! -ms-writing-mode: tb-rl; */
      /*! writing-mode: vertical-rl; */
			transition: .3s;
			/*! width: 2em; */
			/*! margin-bottom: 0em; */
			/*! line-height: 2em; */
			/*! padding: 2em .5em; */
      border-radius:5px;

			z-index: 1;
			position: relative;
			}
		#scrollBtn > a.active {
			background: #fc9;
			width: 5px;
			height: 30px;
/* 				background: linear-gradient(125deg, rgba(0, 183, 255,1) 0%, rgba(44, 3, 193,1) 100%);
			transition: .3s; */
}
		#scrollBtn > a.active:after {
				color: #88bbf2;
			
		}
.wrap { 
  padding-top:0;
background: url(../img/mv_backB.jpg) no-repeat;
	background-size: 100% 100vh;
	background-attachment:  fixed;
position: relative;
	display: block;
  width: 100%;
  /* height: 100vh; */
  scroll-snap-type: y mandatory;
  overflow: scroll;
	
	
}

main {
padding:0;
}

main > section,
.main > section {
	scroll-snap-align: start;
/* 	overflow: scroll; */
	height: 100vh;
	
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}




.mv {
	width: 100%;
	height: 100vh;
	background: url(../img/mv_back_A.png) no-repeat;
	background-size:  100%;
	background-position: bottom  60% center;
	display: flex;
	justify-content: center;
	align-items: flex-start;
/* 	background-attachment: fixed; */
	/*! overflow: scroll; */
}

.mv h1 {
	text-align: center;
	margin-top: 40vh;

}
.sec02 {
	width: 100%;
	height: 100vh;
/* 	margin-top: -100vh; */
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;

/* 	opacity: 0; */

}
.sec02:after {
	content: "";
	width: 100%;
	height: 100vh;
/* 	margin-top: -100vh; */
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	justify-content: center;
	align-items: center;
	overflow: hidden;

	background: url(../img/sec02_back.jpg) no-repeat;
	background-size: cover;
	background-position: bottom center;
  background-attachment: fixed;
	opacity: 0;
}

.sec02_on:after {
	animation: flame-sec02 1s  forwards;
	animation-delay: .7s;
	animation-iteration-count: 1;
}
    @keyframes flame-sec02 {
      0%{
				opacity: 0;
			}
    100%{
			opacity: 1;
			}
    }
.sec02 aside.flame {
	height: 86vh;
	width: 100%;
	mix-blend-mode: screen;
/* 	position: fixed; */
	top: 50%;
	z-index: 100;
	display: block;
position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	pointer-events: none;
}
.sec02 aside.flame .flame_line {
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 0;
	overflow:hidden;
  width: 250px;
	display: none;
}
.sec02 aside.flame .flame_line img {
/* 	width: 200px; */
	height: 66vh;

}
.sec02 aside.flame .flame_light {
  position: absolute;
	bottom: 10vh ;
	left: 30px;
	right: 0;
	margin: auto;
	height: 373px;
	width: 373px;
	mix-blend-mode: screen;
	opacity: 0;

}
section.sec02_on  aside.flame .flame_line{
  animation: flame-line 1s backwards;
  animation-iteration-count:1;
}
section.sec02_on  aside.flame .flame_light{
	animation: flame-light .2s backwards;
	animation-delay: .3s;
  animation-iteration-count:1;
}
    @keyframes flame-line {
      0%{				height: 0;			}
    100%{			height: 86vh;			}
    }
    @keyframes flame-light {
      0%{
				transform: rotate(0) scale(0);
					opacity: 0;
			}
    100%{
			transform: rotate(100deg) scale(.3);
				opacity: 1;
			}
    }


.sec02_on aside.flame:after {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100vw;
	height: 100vw;
	background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	z-index: 1000;
	border-radius: 50%;
	transform:  scale(0);
	animation: flame-backA 1s backwards;
	animation-delay: .5s;
	animation-iteration-count: 1;
}
    @keyframes flame-backA {
      0%{
				transform:  scale(0);
			}
    90%{
			transform:  scale(2) ;
			}
    100%{
			opacity: 0;
			}
    }


.text {
	font-family: var(--f-min);
z-index: 1001;
	/*! scroll-snap-align: start; */
}
.text.inview {
  transform: translate(0, 50px);
	opacity: 0;
	transition: 2s;
	transition-delay: .8s;
}
.text.inview_on {
	  transform: translate(0, 0px);
	opacity: 1;
}
.comment {
}

.sec03 {
  display: flex;
  justify-content: center;
  align-items: stretch;
	flex-direction: column;
  width: 100%;
  /*! height: 500px; */
  padding: 0;
	background: #fff;
}
.sec03map {
  flex: 1;
	order: 3;
}
.sec03map iframe {
  width: 100%;
/*   height: 100%; */
	aspect-ratio: 5 / 3;
  display: block;
}

.sec03dit {
	order: 2;
  flex: 1;
  /*! padding-left: 100px; */
  
  padding: 0 5%;
}

.sec03ditCampany {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
	gap: 1em 2em;
  margin: 100px 0;
}
.sec03ditCampany dt {
  flex:0 0 8em;
	text-align:  center;
	text-align-last: justify;
	font-weight: bold;
  
}
.sec03ditCampany dd {
  flex:1 calc(100% - 10em);
  
}
.sec03ditCampany dt.sec03ditCampany_logo {
  flex: 0 0 100%;
}


.sec03ditProfCheck {
	display: none;
}

.sec03dit .prof {
	background: var(--c-accent1);
	color: #fff;
	font-size: .8em;
	padding: .1em 2em;
	border-radius: 1em;
	margin-left: 1em;
}
.sec03ditProfBack {
	position: fixed;
	top: 10%;
/* 	bottom: 0; */
	left: 0;
	right: 0;
	margin: auto;
/* 	padding: 50px; */
	box-sizing: border-box;
	width: 95%;
	max-width: 550px;
	height: auto;
	display: block;
	text-align: left;
	transition: .3s;

	z-index: -1;
	opacity: 0;
}
.sec03ditProfBack:after {
	content: "";
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .8);
/* 	filter: blur(2px); */
	display: block;
	z-index: -1;
	filter: drop-shadow(0 0 5px #ddd);
}

.sec03ditProfBackName {
	font-size: var(--f-l);
	font-family: var(--f-min);
	display: inline-block;
	margin-top: 2em;
	margin-right: .5em;
	padding-left:5%;
}
.sec03ditProfBackTag {
	padding: 0 2em ;
	display: inline-block;
	text-align: center;
	font-size: var(--f-ss);
	line-height: var(--f-s);
	height: var(--f-s);
	background: var(--c-accent2);
	color: #fff;
	
}
.sec03ditProfBackText {
	padding: 15px 5% 30px;
	text-align: left;
	line-height: 2.5;
}
.sec03ditProfBackBtn {
	position: absolute;
	right: -5px;
	top: -15px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background: var(--c-base);
	color: var(--c-main);
	text-align: center;
	filter: drop-shadow(0 0 3px #aaa)
}
.sec03ditProfCheck:checked ~ .sec03ditProfBack {
	z-index: 3;
	opacity: 1;
}







.sec04 {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
position: relative;
	overflow: hidden;
}
.sec04:after {
	content: "";
	width: 100%;
	height: 100vh;
/* 	margin-top: -100vh; */
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: url(../img/sec04_A.png) no-repeat,url(../img/sec04_b.png) no-repeat,url(../img/sec04_back.jpg) no-repeat;
	background-size:  auto,auto,cover;
	background-position: center top 75% ,center top 90% ,bottom center;
  background-attachment: fixed;
	opacity: 0;
}
.sec04_on:after {
	animation: flame-sec04 1s forwards;
	animation-delay: .7s;
	animation-iteration-count: 1;
}
    @keyframes flame-sec04 {
      0%{
				opacity: 0;
			}
    100%{
			opacity: 1;
			}
    }

.sec04 aside.flame {
	height: 1000px;
	width: 100%;
	mix-blend-mode: screen;
/* 	position: fixed; */
	top: 50%;
	z-index: 100;
	display: block;
position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	justify-content: center;
	align-items: stretch;
	pointer-events: none;
}
.sec04 aside.flame .flame_line {
  position: relative;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 100% !important;
	/*! overflow:hidden; */
  width: 270px;
	display: block;
	background: url(../img/flame_line.png) no-repeat;
	background-attachment:  fixed;
	background-position: center top;
	background-size: auto 72vh;
	overflow: hidden;
	opacity: 0;

}



.sec04_on aside.flame:before {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100vw;
	height: 100vw;
	background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	z-index: 1000;
	border-radius: 50%;
	transform:  scale(0);
	animation: flame-backB 1s backwards;
	animation-delay: .5s;
	animation-iteration-count: 1;
}
    @keyframes flame-backB {
      0%{
				transform:  scale(0);
			}
    90%{
			transform:  scale(2) ;
			}
    100%{
			opacity: 0;
			}
    }


.sec04 aside.flame:after {
	content: "";
	background: url(../img/flame_light.png) no-repeat;
	background-attachment:  fixed;
	background-position: center top;
  position: fixed;
	bottom: 20vh;
	left: 20px;
	right: 0;
	margin: auto;
	height: 373px;
	width: 373px;
	mix-blend-mode: screen;
	opacity: 0;

}
section.sec04_on aside.flame .flame_line {
  animation: flame-line04 1s forwards;
	animation-delay: .3s;
  animation-iteration-count:1;
}
section.sec04_on aside.flame:after{
	animation: flame-light04 .2s forwards;
	animation-delay: .3s;
  animation-iteration-count:1;


}
    @keyframes flame-line04 {
      0%{
      	margin-bottom: 50px;
        opacity: 0;
			}
    100%{			
      	margin-bottom: 0px;
			 opacity: 1;
			}
    }
    @keyframes flame-light04 {
      0%{
				transform: rotate(0) scale(0);
					opacity: 0;
			}
    100%{
			transform: rotate(100deg) scale(.3);
				opacity: 1;
			}
    }





.sec04 .text {
	color: var(--c-base);
	filter: drop-shadow(0 0 2px #000);
}
.sec05 {
	width: 100%;
	height: 100vh;
  background: url(../img/mv_backB.jpg) no-repeat;
	background-size: cover;
	background-position: top center, bottom center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: var(--c-base);
	text-align: center;
}
.sec05 h2 {
  font-weight: normal;
	font-family: var(--f-min);
	font-size: var(--f-ll);
	line-height: 1;
	margin-bottom: 50px;
}
.sec05_subtitle {
	font-size: var(--f-s);
	display: block;
}
.sec05_subcomme {
	font-size: var(--f-ss);
}
.sec05inner {
}

.sec05inner  img{
	width: 95%;
}

.sec06 {
	width: 100%;
	height: 100vh;
	background: url(../company_img/company_img.png) no-repeat,linear-gradient(155deg, #dbd7d7,#d3ced0) no-repeat;
	background-size:  auto min(50% , 800px),auto;
	background-position: left 80% bottom;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--c-main);
	flex-wrap: wrap;
}
.sec06:after {
	content: "";
	flex: 1 500px;
	align-self: stretch;
}
.sec06text {
	flex: 1 500px ;
	margin-right: 0%;
	text-align: left;
	font-size: var(--f-s);
	line-height: 2;
	padding: 0 50px;
}
.sec06text_comme {
	margin-bottom: 60px;
}
.sec06text_name {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.sec06text_namePre {
	flex: 0 2 200px;
	text-align:  center;
	line-height: 1.5;
/* 	font-weight: bold; */
	
}
.sec06text_namePre br {
	display: block;
	
}
.sec06text_nameImg {
		flex: 0 2 230px;
		padding-left: 10px;
}
.sec06text_nameImg img {
		width: min(100%, 200px);
}