@charset "UTF-8";
/* +++メインビジュアル　タイトル+++ */
#page-ttl h1 {
	flex-direction: column;
	margin-top: -5em;
}
h1.sec-ttl02>span {
    margin-top: 4em;
    padding-top: 1.5em;
}
/*0513追加*/
#key-visual .name{
	position: fixed;
    bottom: 1vw;
    left: 5rem;
}

/* +++#sec01+++ */
#sec01{
	padding-top: 25.3rem;
	padding-bottom: 31.3rem;
	background: url(../images/about-sec01-bg01.png) no-repeat;
	background-size: 100% auto;
	background-position: center top 21.31637995512341%;
}
#sec01 .inner{
	display: flex;
	flex-direction: column;
}
#sec01 .sec-ttl02 {
  white-space: nowrap;
}
#sec01 .sec-ttl02>div.m_top{
	padding-top: 2.8em;
}
#sec01 .sec-ttl02:nth-child(2)>div.m_top{
	padding-top: 8em;
}
#sec01 .sec-ttl02{
	margin: 0 auto;
	min-height: 11em;
}
#sec01 p{
	max-width: 47rem;
	margin-left: auto;
	margin-right: auto;
	letter-spacing: 0;
}
#sec01 p.ja{
	margin-top: 8rem;
}
#sec01 p.english{
	margin-top: 2rem;
}
#sec01 .sec-ttl02:last-of-type{
	margin-top: 17.4rem;
}
#sec01 p.english:last-of-type{
	margin-top: 4rem;
}
#sec01 .pic{
	position: absolute;
}
#sec01 .pic01{
	width: min(25rem, 16%);
	right: 15.277%;
	top: 15.3rem;
}
#sec01 .pic02{
/*
	width: 36.25%;
*/
	width: min(43.5rem, 30.208%);
	left: 5rem;
	top: 29.3rem;
}
#sec01 .pic03{
/*
	width: min(45rem, 31.25%);
*/
	width: min(45rem, 28%);
	right: 1.25%;
	top: 67.2rem;
}
#sec01 .pic04{
	width: min(20.4rem, 14.166%);
	left: 5rem;
	top: 114.3rem;
}
#sec01 .pic05{
	width: min(28.7rem, 19.930%);
	left: 17.638%;
	top: 139.6rem;
}
#sec01 .pic06{
	width: min(28.1rem, 19.513%);
	right: 8.333%;
	top: 159.4rem;
}
#sec01 .pic07{
	width: min(41.8rem, 29.027%);
	left: 0;
	bottom: 21.2rem;
}
#sec01 .pic08{
	width: min(28.1rem, 19.513%);
	right: 11.944%;
	bottom: 0;
}
/* +++#sec02+++ */
#sec02{
	padding-top: 11.2rem;
}
#sec02 .sec-ttl01{
	align-items: center;
	position: relative;
	z-index: 9;
	margin-bottom: 0;
}
#sec02 .sec-ttl01:after{
	content: "";
	display: block;
	width: 1px;
	height: 8rem;
	background: linear-gradient(180deg, #222, #222 50%, #fff 50%, #fff 100%);
	margin: 4rem auto -4rem;
}
.process_wrap{
	position: relative;
	/*height:100vh;*/
	/*height: 700vh;*/

}
.process{
	/*height: 77.3rem;*/
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	/*position: sticky;
	top:0;*/
}
.process .inner{
	align-items: center;
	height: 100%;
}
.process *{
	color: #fff !important;
}
.process .figure100{
	width: 100%;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.process .figure100 video {
  width: 100% !important;
  height: auto;
  display: block;
  object-fit: cover; /* 必要に応じて調整 */
  z-index: 1;
  position: relative;
}
 video {
	  width: 100% !important;
 }
.process01{
	background-image: url(../images/about-sec02-bg01.jpg);
	transition: background-image 0.3s ease-in-out;
	padding-top: 12rem;
    padding-bottom: 12rem;
}
.process01{
	background-image: url(../images/about-sec02-bg01.jpg);
}
.process02{
	background-image: url(../images/about-sec02-bg02.jpg);
}
.process03{
	background-image: url(../images/about-sec02-bg03.jpg);
}
.process04{
	background-image: url(../images/about-sec02-bg04.jpg);
}
.process05{
	background-image: url(../images/about-sec02-bg05.jpg);
}
.process06{
	background-image: url(../images/about-sec02-bg06.jpg);
}

.process p{
	line-height: 2.285;
}
.process .txt{
	width: 50rem;
}
.process .en{
	display: flex;
	align-items: center;
}
.process .en:before{
	content: "";
	display: block;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: #D9D9D9;
	margin-right: 1rem;
}
.process h3{
	font-weight: 400;
	font-size: 3rem;
	margin: 1rem 0 3rem;
}
.process:nth-of-type(even) .txt{
	margin-right: 0;
	margin-left: auto;
}
.process .en:nth-of-type(2){
	margin-top: 4rem;
}
.process01{
	height: auto;
}
.process01 .txt{
	width: calc(100% - 40rem);
	margin-bottom: 8rem;
}
.process01 .flex .figure{
	width: 36rem;
}
.process01 .figure img{
	width: 100%;
}
.process01 .figure100 img{
	width: 100%;
}
/* +++#sec03+++ */
#sec03{
	background: #E4E4E4;
	background-image: url(../images/about-sec03-bg01.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 104rem auto;
	padding-top: 20rem;
	padding-bottom: 20.5rem;
	overflow: hidden;

}
#sec03 .contents{
	margin-left: auto;
	justify-content: flex-start;
}
#sec03 .txt{
	width: max(calc(100% - 60rem), 50%);
	padding-left: 2rem;
}
#sec03 p{
	margin-top: 2rem;
/*
	max-width: 64rem;
*/
	padding-left: 4rem;
	line-height: 2.285;
	letter-spacing: 0;
}
#sec03 .pic{
	width: 50%;
	max-width: 60rem;
	padding-top: 2.5rem;
}

/* +++#sec04+++ */
#sec04{
	padding-bottom: 20rem;
	background: #E4E4E4;
}
#sec04 table{
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	line-height: 2.285;
	border-top: 1px solid #2f2f2f;
}
#sec04 tr{
	border-bottom: 1px solid #2f2f2f;
}
#sec04 th{
	vertical-align: top;
	text-align: left;
	width: 20rem;
	padding: 1.6rem;
	font-weight: 400;
}
#sec04 td{
	/*width: calc(100% - 20rem);*/
	padding: 1.6rem 1.6rem 1.6rem 0;
}

/* +++#sec05+++ */
#sec05{
	align-items: center;
	padding-top: 20.4rem;
	padding-bottom: 20rem;
	background: url(../images/about-sec05-bg01.jpg) no-repeat;
	background-position: center;
	background-size: cover;
}
#sec05 *{
	color: #fff;
}
.history{
	max-width: 60rem;
	margin: 2rem auto 0;
}
.history dl{
	display: flex;
	position: relative;
	line-height: 2.285;
	padding-bottom: 4rem;
}
.history dl:last-of-type{
	padding-bottom: 0;
}
.history dl:before{
	content: "";
	display: block;
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	left: -.4rem;
	top: 1.2rem;
	background: #fff;
}
.history dl:not(:last-of-type):after{
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	background: #fff;
	position: absolute;
	left: 0;
	top: 1.2rem;
	background: #fff;
}
.history dt{
	width: 17.7rem;
	padding-left: 4.5rem;
}
.history dd{
	width: calc(100% - 17.7rem);
}
/* +++++++++++++++++++++++++++++++++++ */
/* ++++++++smartphone style+++++++++++ */
/* +++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 768px){
#page-ttl h1 {
	margin-top: -7em;
}
	#key-visual .name{
		left: 0.5rem;
        font-size: 1.2rem;
	}
/* +++#sec01+++ */
	#sec01 .inner{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
#sec01{
	padding-top: 18rem;
	padding-bottom: 20rem;
	background: url(../images/about-sec01-bg01.png) no-repeat;
	background-size: 100% auto;
	background-position: center top 21.31637995512341%;
	}
	#sec01 p{
		max-width: 80%;
	}
	#sec01 p.ja{
		margin-top: 4rem;
	}
	#sec01 p.english{
		margin-top: 2rem;
	}
	#sec01 .sec-ttl02:last-of-type{
		margin-top: 8rem;
	}
	#sec01 p.english:last-of-type{
		margin-top: 4rem;
	}

	#sec01 .pic01{
		width: 30%;
		right: 2rem;
		top: 5rem;
	}
	#sec01 .pic02{
		width: 38%;
		left: 0;
		top: 9rem;
	}
	#sec01 .pic03{
		width: 32%;
		right: 0;
		top: 32rem;
	}
	#sec01 .pic04{
		width: 23%;
        left: 2rem;
        top: 100rem;
	}
	#sec01 .pic05{
		width: 30%;
		left: 0;
		top: 123rem;
	}
	#sec01 .pic06{
		width: 32%;
		right: 0;
		top: 105rem;
	}
	#sec01 .pic07{
		width: 50%;
		left: 0;
		bottom: 2rem;
	}
	#sec01 .pic08{
		width: 36%;
		right: 2rem;
		bottom: -3rem;
	}

/* +++#sec02+++ */
	#sec02{
		padding-top: 10rem;
	}

	#sec02 .sec-ttl01:after{
		height: 6rem;
		margin: 3rem auto -3rem;
	}
	.process{
		height: 75rem;
	}
	.process .inner{
		align-items: flex-start;
		height: 100%;
	}
	.process01{
		background-image: url(../images/about-sec02-bg01-sp.jpg);	
		height: auto;
	}
	.process02{
		background-image: url(../images/about-sec02-bg02-sp.jpg);		
		height: 120rem;
	}
	.process03{
		background-image: url(../images/about-sec02-bg03-sp.jpg);	
	}
	.process04{
		background-image: url(../images/about-sec02-bg04-sp.jpg);		
	}
	.process05{
		background-image: url(../images/about-sec02-bg05-sp.jpg);	
	}
	.process06{
		background-image: url(../images/about-sec02-bg06-sp.jpg);
	}
	.process p{
		line-height: 2.285;
	}
	.process .txt{
		width: 100%;
		margin-top: 6rem;
	}
	.process h3{
		font-weight: 400;
		font-size: 2rem;
		margin: 1rem 0 2rem;
	}

	.process .en:nth-of-type(2){
		margin-top: 4rem;
	}
	.process .en{
		font-size: 1.2rem;
	}
	.process01 .flex{
		flex-direction: column;
	}
	.process01 .figure {
		width: 100%;
		margin-bottom: 3rem;
	}
	.process01 .flex .figure{
		width: 100%;
	}
	.process01 .figure img{
		width: 100%;
	}
	.process01 .figure100 img{
		width: 100%;
	}
/* +++#sec03+++ */
	#sec03{
		background-size: 100% auto;
		padding-top: 10rem;
		padding-bottom: 10rem;
	}
	#sec03 .contents{
		margin-left: 0;
		position: relative;
		justify-content: flex-start;
		flex-direction: column-reverse;
	}
	#sec03 .txt{
		width: 100%;
		padding-left: 0;
	}
	#sec03 .txt.column{
		position: relative;
	}
	#sec03 p{
		margin-top: 28rem;
		padding-left: 0;
	}
	#sec03 .pic{
		width: 100%;
		max-width: 100%;
		padding-top: 4rem;
		position: absolute;
		top: 6rem;
	}

/* +++#sec04+++ */
	#sec04{
		padding-bottom: 10rem;
	}
	#sec04 table{
		width: 100%;
		max-width: 100%;
	}
	#sec04 th{
		vertical-align: top;
		text-align: left;
		width: 9rem;
		padding: 1.2rem;
		font-weight: 400;
		letter-spacing: 0;
	}
	#sec04 td{
		/*width: calc(100% - 9rem);*/
		padding: 1.2rem 1.2rem 1.2rem 0;
		letter-spacing: 0;
	}

/* +++#sec05+++ */
	#sec05{
		padding-top: 10rem;
		padding-bottom: 10rem;
		background: url(../images/about-sec05-bg01-sp.jpg) no-repeat;
		background-size: cover;
	}
	.history{
		max-width: 100%;
		margin: 2rem auto 0;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.history dl{
		padding-bottom: 2.4rem;
	}
	.history dl:last-of-type{
		padding-bottom: 0;
	}
	.history dl:before{
		content: "";
		display: block;
		width: .9rem;
		height: .9rem;
		border-radius: 50%;
		background: #fff;
		position: absolute;
		left: -.4rem;
		top: 1.2rem;
		background: #fff;
	}
	.history dl:not(:last-of-type):after{
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		background: #fff;
		position: absolute;
		left: 0;
		top: 1.2rem;
		background: #fff;
	}
	.history dt{
		width: 9rem;
		padding-left: 2rem;
		letter-spacing: 0;
	}
	.history dd{
		width: calc(100% - 9rem);
		letter-spacing: 0;
	}
}