@charset "UTF-8";

/*------------------------
common.css上書き
------------------------*/

h2{
	font-size: 24px;
	line-height: 1;
	/* display: inline;
	position: relative; */
}


/*------------------------
ファーストビュー
------------------------*/
#topimg {
	background: url(/pc/img/index/main_fv_bg.jpg) no-repeat center;
	background-size: cover;
	height: 720px;
}
#topimg .inner{
	padding-top: 190px;
	padding-left: 150px;
}

#topimg .inner h1{
	font-weight: bold;
	font-size: 98px;
	color: #333;
	line-height: 1;
	display: inline-block;

}

/*------------------------
セクション共通
------------------------*/
section .inner{
	width: 1080px;
	margin: 0 auto;
	padding: 60px 0 120px;
	position: relative;
}
.column{
	display: flex;
	justify-content: space-between;
}

.column .column-text{
	padding-top: 120px;
}

  /*--------------------
  vision
   ----------------------*/
  #vision {
	background-color: var(--main);

  }

  #vision .column-text{
	color: #fff;
 }
 #vision .column-text h2{
	font-size: 36px;
	padding-bottom: 46px;
	border-bottom:1px solid #fff;
	margin-bottom: 32px;
 }
 #vision .column-text p{
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 12px;
 }

 #vision .column-img .img-item{
	height: 500px;
	width: 540px;
	background-image: url(/pc/img/index/vision_img.jpg);
 }
 #vision .bg-text{
    z-index: 100;
    position: absolute;
    top: 68%;
    left: 0;
 }


   /*--------------------
  projects
   ----------------------*/
   #projects {
	background-color: #ddd;

  }

  #projects .column-text{
	color: var(--text);
 }
 #projects .column-text h2{
	font-size: 36px;
	padding-bottom: 46px;
	border-bottom:1px solid var(--text);
	margin-bottom: 32px;
 }
 #projects .column-text a{
	font-size: 20px;
	font-weight: bold;
	color: #333;
    line-height: 1;
    margin-bottom: 20px;
    position: relative;
    padding-right: 20px;
    display: inline-block;
 }
 #projects .column-text a::after{
	content: "";
    background: url(/pc/img/common/link_icon2.png);
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    top: 0;
    right: -10px;
    background-size: contain;
    background-repeat: no-repeat;
}
 #projects .column-text p{
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 12px;
 }

 #projects .column-img .img-item{
	height: 500px;
	width: 540px;
	background-image: url(/pc/img/index/project_img.webp);
	background-repeat: no-repeat;
 }
 #projects .bg-text{
    z-index: 100;
    position: absolute;
    top: 68%;
	right: 0;
 }

   /*--------------------
  organization
   ----------------------*/
   #organization {
	background-color: var(--main);

  }

  #organization .column-text{
	color: #fff;
 }
 #organization .og-h2{
	width: 480px;
	margin: 0 auto;
 }
 #organization h2{
	width: 480px;
	text-align: center;
	font-size: 36px;
	color: #fff;
	padding-bottom: 46px;
	border-bottom:1px solid #fff;
	margin-bottom: 32px;
 }
 #organization .column-text p{
	line-height: 1.2;
	margin-bottom: 12px;
 }

 #organization .column-img .img-item{
	height: 500px;
	width: 540px;
	background-image: url(/pc/img/index/organization_img.jpg);
	background-repeat: no-repeat;
 }
 #organization .bg-text{
    z-index: 100;
    position: absolute;
    top: 68%;
	left: 0;
 }

 #organization .table-flex{
	display: flex;

 }

 #organization .table-flex .th{
	padding-bottom: 20px;
	border-bottom: 2px solid var(--sub);
	margin-bottom: 20px;
	width: 150px;
 }
 #organization .table-flex .td{
	padding-bottom: 20px;
	border-bottom: 2px solid var(--line);
	margin-bottom: 20px;
	width: 330px;
 }

 article {
	background-color: #ddd;
	padding-top: 80px;
 }

 article .h2{
	width: 480px;
	margin: 0 auto;
 }
 article h2{
	width: 480px;
	text-align: center;
	font-size: 36px;
	color: var(--sub);
	padding-bottom: 46px;
	border-bottom:1px solid var(--sub);
	margin-bottom: 32px;
 }

 body{
	background-color: #ddd;
 }


 :root {
	--delay: 0;
	--duration: 800ms;
	--iterations: 1;
  }
  
  .reveal-text,
  .reveal-text::after {
	animation-delay: var(--animation-delay, 2s);
	animation-iteration-count: var(--iterations, 1);
	animation-duration: var(--duration, 800ms);
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .reveal-text {
	--animation-delay: var(--delay, 0);
	--animation-duration: var(--duration, 800ms);
	--animation-iterations: var(--iterations, 1);
	position: relative;
	animation-name: clip-text;
	white-space: nowrap;
	cursor: default;
  }
  
  .reveal-text::after {
	content: "";
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #9b3f3f;
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
	animation-name: text-revealer;
  }
  
  @keyframes clip-text {
	from {
	  clip-path: inset(0 100% -10% 0);
	}
	to {
	  clip-path: inset(0 0 -10% 0);
	}
  }
  
  @keyframes text-revealer {
	0%, 50% {
	  transform-origin: 0 50%;
	}
	60%, 100% {
	  transform-origin: 100% 50%;
	}
	60% {
	  transform: scaleX(1);
	}
	100% {
	  transform: scaleX(0);
	}
  }