@charset "UTF-8";
/* CSS Document */



/*-----------------------------------
	about_purpose
-----------------------------------*/
#about_purpose {
	padding:calc(var(--basevw, 150px)*150) 0;
}

#about_purpose .section-inner .page_bn_img-block figure img {
	width:100%;
}
#about_purpose .page_bn_title-block {
	margin-bottom:calc(var(--basevw, 60px)*60);
}
#about_purpose .index-tit_box h4, #about_purpose .index-txt_box h4{
	margin-bottom:calc(var(--basevw, 30px)*30);
}
#about_purpose .index-tit_h2 + h5 {
    margin-top: calc(var(--basevw) * 20);
}
#about_purpose .page_bn_img-block figure video {
	width:100%;
	max-height:calc(100% - 120px);
	margin:0 auto;
}
#about_purpose .page_bn_img-block {
	position:relative;
}
#about_purpose .page_bn_img-block figure + .video-trigar {
	position:absolute;
	top:90%;
}
#about_purpose .page_bn_img-block .btn_audio_box {
	position:absolute;
	width:100%;
	height:62px;
	left:0;
	bottom:0;
	display: block;
	padding:0 10px 20px;
}
#about_purpose .page_bn_img-block .btn_audio_box .btn_audio {
	width:42px;
	height:42px;
	margin:0 0 0 auto;
	display: block;
	background: url("") no-repeat;
	background-size:100% auto;
}
#about_purpose .page_bn_img-block .btn_audio_box.muted .btn_audio {
	width:42px;
	height:42px;
	margin:0 0 0 auto;
	display: block;
	background: url("") no-repeat;
	background-size:100% auto;
}
@media (max-width: 768px) {
	#about_purpose {
		padding:calc(var(--basevw)*60) 0;
	}
	#about_purpose .page_bn_title-block {
		margin-bottom:calc(var(--basevw)*30);
	}
	#about_purpose .index-tit_box h4, #about_purpose .index-txt_box h4{
	margin-bottom:calc(var(--basevw)*7.5);
}
	#about_purpose .index-txt_box h5, #about_purpose .index-tit_box h5 {
		font-size: 1.4rem;
		line-height: 1.85;
	}
	#about_purpose .index-tit_h2 + h5 {
		margin-top: 1.4rem;
	}
	#about_purpose .page_bn_img-block .btn_audio_box {
		padding:0 calc(var(--basevw)*10) calc(var(--basevw)*10);
		height:calc(var(--basevw)*52);
	}
	#about_purpose .page_bn_img-block .btn_audio_box .btn_audio, #about_purpose .page_bn_img-block .btn_audio_box.muted .btn_audio {
		width:calc(var(--basevw)*32);
		height:calc(var(--basevw)*32);
	}
	
}

/*-----------------------------------
	about_vision　/ about_mission
-----------------------------------*/
.photo-section {
	padding-bottom:calc(var(--basevw)*80);
	margin-bottom:calc(var(--basevw)*120);
}
#about_vision {
	margin-bottom:calc(var(--basevw)*150);
}
.photo-section:before {
	content:"";
	width:60%;
	height:75.4%;
	background: #F7F9FB;
	position:absolute;
	left:0;
	bottom:0;
} 
#about_vision.photo-section:before {
	width:72.5%;
}
#about_vision.photo-section:before  {
	left:auto;
	right:0;
}
.photo-section .page_bn_img-block {
	width:60%;
	margin-left:6.25%;
	height:calc(var(--basevw, 750px)*750);
	overflow: hidden;
}
.photo-section .page_bn_img-block img {
	width:100%;
}
.photo-section .page_bn_title-block {
	position:absolute;
	width:45.3125%;
	right:0;
	top:0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height:calc(100% - var(--basevw, 80px)*80);
}
.photo-section .page_bn_title-block .index-txt_box {
	background:#FFF;
	width:100%;
	height:auto;
	padding:calc(var(--basevw, 80px)*50);
}

#about_vision .is-flex-tablet {
	flex-flow: row-reverse;
}
#about_vision.photo-section .page_bn_img-block {
	margin-left:0;
	margin-right:6.25%;
}
#about_vision.photo-section .page_bn_title-block {
	left:0;
	right:auto;
}


@media (max-width: 768px) {
	
	.photo-section,#about_vision {
		padding-bottom:0;
		margin-bottom:calc(var(--basevw, 40px)*40);
	}
	.photo-section:before {
		content: "";
		width: 100% !important;
		height: calc(var(--basevw, 279px)*279);
		background: #F7F9FB;
		position: absolute;
		left: 0;
		bottom: auto;
		top:calc(var(--basevw, 165px)*165);
	}
	.photo-section .page_bn_img-block {
		width: 100%;
		margin-left:0;
		padding-right:5.33%;
		height: calc(var(--basevw, 330px)*330);
	}
	.photo-section .page_bn_title-block {
		position: relative;
		width: 94.67%;
		margin:0 0 calc(var(--basevw, -60px)*-60) auto;
		height:auto;
		top:calc(var(--basevw, -60px)*-60);
	}
	.photo-section .page_bn_title-block .index-txt_box {
		padding: calc(var(--basevw, 30px)*30) calc(var(--basevw, 30px)*30) calc(var(--basevw, 40px)*40);
	}
	#about_vision.photo-section .page_bn_img-block {
		margin-left: 5.33%;
		margin-right: 0;
	}
	#about_vision.photo-section .page_bn_title-block {
		left: auto;
		right: auto;
		margin:0 auto -7.3vh 0;
	}
}

/*-----------------------------------
	about_strategy
-----------------------------------*/

#about_strategy {
	background: var(--bg-light-color);
	padding:calc(var(--basevw)*150) 0;
}
.column .page_bn_title-block {
	padding:0 4.2% 0  14.2%;
	display: flex;
	height:100%;
	flex-flow: column;
	justify-content: center;
	align-items: flex-start;
}

.cometo-mask-out.item-o {
	position:relative;
	overflow: hidden;
	margin-top: 100px;

}
.cometo-mask-out.item-o:after {
	content:"";
	width:100%;
	height:100%;
	background:var(--bg-light-color);
	transform: translateY(0);
	position:absolute;
	left:0;
	top:0;
} 
.cometo-mask-out.item-o.inview:after {
	transform: translateY(-100%);
	transition: all 1s ease;
} 

@media (max-width: 768px) {
	#about_strategy {
		padding:0 10px 50px;
	}
	.column .page_bn_title-block {
		padding:0vh 0 2.46vh;
		margin-top: 0px!important;
	}
	#about_strategy .column .page_bn_title-block {
		padding:0 10px;
	}
	
	.cometo-mask-out.item-o {
	position:relative;
	overflow: hidden;
	margin-top: 0px;

}
	
}

/*-----------------------------------
	Corporate Logo
-----------------------------------*/

.logo-section .page_bn_img-block {
	background:var(--corp-color);
	min-height:1250px;
}

#mark {
	fill:#FFF;
	width:calc(var(--basevw, 202px)*202);
}
.logo-box-o {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding:calc(var(--basevw, 75px)*75) 14.2%;
	color:#FFF;
	width:100%;
	height:100%;
	text-align: center;
}
.logo-box-o .logo {
	padding-top:calc(var(--basevw, 50px)*50);
	padding-bottom:calc(var(--basevw, 0px)*0);
}
.logo-box-o h4 {
	font-size:2.4rem;
	line-height: 1;
	margin-bottom:calc(var(--basevw, 10px)*10);
}
.logo-box-o h4 + p{
	font-size:1.1rem;
	line-height: 1;
}
.logo-box-o.small-box {
	background: #208463;
	padding:calc(var(--basevw, 42px)*42) 14%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page_bn_img-block > .column:nth-of-type(2n+1) .logo-box-o.small-box {
	background: #298967;
}
.inview #mark .st0 { 
	fill:#FFF;
	stroke-width: 1; 
	animation: anime-logo 1.5s ease-in both ;
}

/* アニメーション設定 */
@keyframes anime-logo {
  0% {
    fill: transparent;
    stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
  }
  90% {
	stroke-dashoffset: 0;
	  fill: transparent;
  }
  100% {
    fill:#FFF;/*パスの色*/
  }
}


.logo-box-o.small-box .logo {
	width:calc(var(--basevw, 56px)*56);
	height:calc(var(--basevw, 56px)*56);
	border-radius: calc(var(--basevw, 28px)*28);
	border:1px solid rgba(255,255,255,0.1);
	padding:0;
	margin-bottom:calc(var(--basevw, 0px)*0);
}
.logo-box-o.small-box h4 {
	font-size:1.5rem;
	line-height: 1;
	white-space: nowrap;
}
.logo-box-o.small-box h4 + p{
	font-size:1rem;
	line-height: 1;
}


#about_name .columns{
	flex-flow: row-reverse;
}
#about_name .index-tit_h2 span{
	font-size:5rem;
	margin:0 calc(var(--basevw, 10px)*10);
}

#logotxt {
	width:calc(var(--basevw, 352px)*352);
	fill: transparent;
}
.inview #logotxt .st0 { 
  stroke:#FFF;
  stroke-width: 1; 
  animation: anime-logotxt 2.5s ease-in 1s both ;
}

@keyframes anime-logotxt {
  0% {
    fill: transparent;
    stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
  }
  80% {
	stroke-dashoffset: 0;
	fill: transparent;
  }
  100% {
    fill:#FFF;               
  }
}
@media (max-width: 768px) {
	#about_logo {
		padding: calc(var(--basevw, 80px)*80) 0 0;
	}
	#mark {
    width: 42.9%;
}


	.about_logo_cont .page_bn_title-block{
		width:89.34%;
		margin-left:auto;
		margin-right:auto;
		padding: 0 0 calc(var(--basevw, 40px)*40);
	}
	.logo-section .page_bn_img-block {
		min-height:0;
		padding:calc(var(--basevw, 60px)*60) 0 0;
	}
	.logo-box-o {
    padding: 0 5.33% calc(var(--basevw, 48px)*48);
}
	.logo-box-o .logo {
		padding-top:0;
		padding-bottom:calc(var(--basevw, 0px)*0);
		width:100%;
}
	.logo-box-o h4 {
    font-size: 2.2rem;
    line-height: 1;
	margin-bottom:calc(var(--basevw, 10px)*10);
}
	.logo-box-o h4 + p {
    font-size: 1.1rem;
		line-height: 1.8;
}
	.logo-box-o.small-box {
    padding:calc(var(--basevw, 24px)*24) 14%;
}
	.logo-box-o.small-box .logo {
		margin-bottom:calc(var(--basevw, 10px)*10);
	}
	.logo-box-o.small-box h4 {
    line-height:1;
		margin-bottom:calc(var(--basevw, 5px)*5);
}
	.page_bn_img-block > .column:nth-of-type(2n+1) .logo-box-o.small-box {
    background: #208463;
}
	.page_bn_img-block > .column:nth-of-type(3) .logo-box-o.small-box, .page_bn_img-block > .column:nth-of-type(4) .logo-box-o.small-box{
	background: #298967;
}
	#about_name {
		padding: calc(var(--basevw, 80px)*80) 0 0;
	}
	#about_name .index-tit_h2 span {
		font-size: 8.6vw;
		margin: 0 2vw;
	}
	#logotxt {
    width: 55.7%;
}
	#about_name.logo-section .page_bn_img-block {
		padding:8rem 0;
	}
	#about_name.logo-section .page_bn_img-block .logo {
		padding-bottom:0;
	}
}
/*-----------------------------------
	about_message
-----------------------------------*/

#about_message {
	padding:calc(var(--basevw)*150) 0 calc(var(--basevw)*200);
}
#about_message .page_bn_title-block {
	padding-top:calc(var(--basevw)*80);
}
#about_message .index-txt_box p{
	text-align: justify;
	letter-spacing: 0.1em;
}
#about_message .item__img {
	height:calc(var(--basevw)*541);
	overflow: hidden;

}
#about_message .item__img > div {
	display: flex;
	justify-content: center;
	align-items: center;
	height:100%;
}
#about_message .index-tit_box {
	padding-right:calc(var(--basevw)*80);
}
#about_message .index-txt_box h5 {
    font-size: calc(var(--baseft) * 1.5);
}
.message-name-txt {
	font-size:1.4rem;
	margin-bottom: 200px;
}

.ceoimg img{
	height:auto;
	width:100%;
	margin: 150px 0 50px;
}

@media (max-width: 768px) {
	#about_message {
		padding:calc(var(--basevw, 80px)*80) 0 ;
	}

	#about_message .page_bn_title-block {
		padding-top:calc(var(--basevw, 40px)*40);
	}
	.message-name-txt {
	font-size:1.3rem;
		margin-bottom: 100px;
}
	#about_message .item__img {
	height:calc(var(--basevw, 220px)*220);

}
#about_message .item__img img {
	height:100%;
	width:auto;
	max-width: none;
}
	.ceoimg img{
	height:auto;
	width:100%;
	margin: 50px 0 30px;
}
	
}