@charset "UTF-8";
main{
	color: #fff;
	position: relative;
	background: #2a2c31;
}
/*------------------------
ページタイトル部分
------------------------*/
.page-title .main {
	position: relative;
	text-align: center;
}
.page-title .head {
	position: relative;
	z-index: 50;
}
.page-title .en {
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.06em;
}
.page-title h1 {
	font-weight: normal;
	letter-spacing: 0.18em;
}
.page-title .lead {
	letter-spacing: 0.18em;
}
.page-title .lead p {
	font-weight: 300;
}

/* PC */
@media screen and (min-width:768px) {
	main{
		padding-bottom: 260px;
	}
	.page-title{
		width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding: 320px 18px 0 100px;
	}	
	.page-title .text-area {
		display:flex;
		justify-content: space-between;
	}
	.page-title .main {
		position: relative;
		text-align: center;
		width: 370px;
		height: 350px;
		margin-right: 155px;
	}
	.page-title .head:after{
		content: "";
		width: 976px;
		height: 1px;
		display: inline-block;
		position: absolute;
		top: 37px;
		left: 104px;
		background: #fff;
	}	
	.page-title h1 {
		font-weight: normal;
		letter-spacing: 0.18em;
	}
	.page-title .main .en {
		font-size: 34px;
		margin-bottom: 6px;
	}
	.page-title h2 {
		font-size: 22px;
		margin-bottom: 30px;
		letter-spacing: 0.2em;
	}
	.page-title .lead {
		flex:1;
		margin-top:-5px;
	}
	.page-title .lead p {
		line-height: 2.32;
	}
}
/* SP */
@media screen and (max-width:767px) {
	main{
		padding: 0vw 4vw 22vw;
		overflow: hidden;
	}
	.page-title{
		padding: 50vw 0 0;
		margin-bottom: 1vw;
	}
	.page-title h1 {
	font-weight: normal;
	letter-spacing: 0.18em;
	}
	.page-title .main{
		margin-bottom: 40vw;
	}
	.page-title .main .en {
		font-size: 34px;
		margin-bottom: 6px;
		position: relative;
	}
	.page-title .main .en:after{
		content: "";
		width: 39.5vw;
		height: 1px;
		display: block;
		background: #fff;
		position: absolute;
		bottom: -1.0vw;
		left: 50%;
		transform: translateX(-50%);
	}	
	.page-title .box .txt .label {
		font-size: 4.8vw;
	}
	.page-title .box .txt .s-en {
		font-size: 4.26vw;
	}
	.page-title .lead h2{
		font-size: 4.8vw;
		line-height: 1.68;
		text-align: center;
		letter-spacing: 0.2em;
		margin-bottom: 4vw;
	}
	.page-title .lead p {
    font-size: 3.74vw;
    line-height: 1.86;
		text-align: justify;
	}
}
/*------------------------
ページタイトルのサークル部分
------------------------*/
/* サークル部分 */
.page-title .box-wrap{
	height: auto;
}
:root{
  --stripe-w-pc: 4px;      /* PCのストライプ太さ */
  --stripe-w-sp: 1.06vw;    /* SPのストライプ太さ*/
	--stripe-angle: -135deg;     /* 既定の角度（↘） */
}
.page-title .box{ position: relative; }
.page-title .box .s-en{
	font-weight: normal;
	letter-spacing: 0.06em;
}
.page-title .box .in{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	color:#fff;
	position:relative;
	overflow:hidden;
	border-radius:50%;
	background:linear-gradient(-135deg, rgba(102,100,100,1), rgba(62,58,57,1));
}
/* 円の擬似要素に適用 */
.page-title .box .in::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
	background-image:
		repeating-linear-gradient(
			90deg,
			rgba(42,44,49,.85) 0,
			rgba(42,44,49,.85) var(--stripe-w),
			transparent var(--stripe-w),
			transparent calc(var(--stripe-w) * 2)
		);
	background-repeat: repeat;
	background-size: auto !important; 
	background-position: 0 0;
	/* 回転させるので、十分に大きくしておく */
	width: 160%;
	height: 160%;
	left: -30%;
	top: -30%;
	transform-origin: 50% 50%;
	will-change: transform;
}
  /* 角度：上の円は -135°（右下がり） */
  .page-title .box.num01 .in::before{
    transform: rotate(135deg);
  }
  /* 右下・左下は +135°（右上がり） */
  .page-title .box.num02 .in::before,
  .page-title .box.num03 .in::before{
    transform: rotate(-135deg);
  }

/* box1 */
.page-title .box.num01{
	z-index: 5;
}
.page-title .box.num01 .in{
	margin: 0 auto;
}
/* box2 */
.page-title .box.num02{
	position: relative;
	z-index: 0;
}
.page-title .box.num02 .in{
	background: linear-gradient(135deg,rgba(83, 122, 146, 1) 0%, rgba(0, 0, 1, 1) 100%);
	}
.page-title .box.num02 .in::before{
	--stripe-angle: 135deg;
}
/* box3 */
.page-title .box.num03 .in{
	background: linear-gradient(135deg,rgba(38, 77, 50, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
.page-title .box.num03 .in::before{
	--stripe-angle: 135deg;
}
/* テキスト */
.page-title .box .txt{ position: relative; z-index: 10; }
.page-title .box .txt .label{ letter-spacing: .06em; font-weight: 400; line-height: 1; }
.page-title .box .txt .en{ letter-spacing: 0.06em; font-weight: normal; line-height: 1; }

/* PC */
@media screen and (min-width:768px) {
	.page-title .box-wrap{
		--stripe-w: var(--stripe-w-pc);
	}
	/* サークル部分 */
	.page-title .box-wrap{
		position: absolute;
		width: 100%;
		height:350px;
		top: -155px;
		left: 0;
	}
	.page-title .box .in{
		width: 200px;
		height: 200px;
	}
	.page-title .box .txt .s-en{
		font-size: 18px;
	}
	/* box1 */
	.page-title .box.num01{
		top:0
	}
	.page-title .box.num01 .txt{
		padding-bottom: 20px;
	}
	/* box2 */
	.page-title .box.num02{
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.page-title .box.num02 .txt{
		padding-top: 50px;
	}
		/* box3 */
	.page-title .box.num03{
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.page-title .box.num03 .txt{
		padding-top: 50px;
	}
	.page-title .box .txt .label{
		font-size: 20px;
		margin-bottom: -2px;
	}
}
/* SP */
@media (max-width: 767px){
	.page-title .box-wrap{
		--stripe-w: var(--stripe-w-sp);
		position: absolute;
		width: 100%;
		height: 84vw;
		top: -36vw;
		left: 0;
	}
	.page-title .box .in{
		width: 48vw;
		height: 48vw;
	}
	/* box1 */
	.page-title .box.num01{
		top:0
	}
	.page-title .box.num01 .txt{
		padding-bottom:6.4vw;
	}
	/* box2 */
	.page-title .box.num02{
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.page-title .box.num02 .txt{
		padding-top:13.33vw;
	}
		/* box3 */
	.page-title .box.num03{
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.page-title .box.num03 .txt{
		padding-top:13.33vw;
	}
}



/*------------------------
各セクション内のcircle
------------------------*/
:root{
  --stripe-l-pc: 8px;
  --stripe-l-sp: 1.6vw;
  --stripe-l: var(--stripe-l-pc);        /* 実使用長さ（PC/SPで切替）*/
  --stripe-speed: 0.9s;                  /* アニメ速度 */
  --stripe-color: #2a2c31; /
}
.b-section .circle{
  position:absolute;
  border-radius:50%;
  overflow:hidden;
  background: linear-gradient(-135deg,#666464 0%,#3E3A39 100%);
}
.b-section .circle .in{
  position:relative;
  width:100%;
  height:100%;
  /* 方向（1周期あたりの移動量）をCSS変数で制御 */
  --dx: 2;   /* x方向 +2, -2 */
  --dy:-2;   /* y方向 +2, -2 */
}
.b-section .circle .in::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  /* “上半分だけ塗り”の小タイル = 50%塗りの水平ストライプ */
  background-image: repeating-linear-gradient(
    0deg,
    var(--stripe-color) 0,
    var(--stripe-color) var(--stripe-l),
    transparent var(--stripe-l),
    transparent calc(var(--stripe-l) * 2)
  );
  /* タイル周期を明示（なくてもOK。入れると位相管理が直感的） */
  background-size: calc(var(--stripe-l) * 2) calc(var(--stripe-l) * 2);
  background-position: 0 0;
  transform: rotate(-135deg);
  will-change: background-position;
  backface-visibility:hidden;
  animation: stripe-slide var(--stripe-speed) linear infinite;
}
#structure.b-section .circle .in{ --dx: 2; --dy: 2; }   /* ↖へ流す */ 
#environment.b-section .circle .in{ --dx:-2; --dy:-2; } /* ↘へ流す */

@keyframes stripe-slide{
  from{
    background-position: 0 0;
  }
  to{
    background-position:
      calc(var(--stripe-l) * var(--dx))
      calc(var(--stripe-l) * var(--dy));
  }
}
/*02,03*/
#structure.b-section .circle{
  background: linear-gradient(135deg, rgba(83, 122, 146, 1) 0%, rgba(0, 0, 1, 1) 100%);
}
#structure.b-section .in::before{
  transform: rotate(135deg);
}
#environment.b-section .circle{
	background: linear-gradient(135deg,rgba(38, 77, 50, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
#environment.b-section .in::before{
  transform: rotate(135deg);
}

/* PC */
@media screen and (min-width:768px) {
	.b-section{
		--stripe-l: var(--stripe-l-pc);
	}
	.b-section .circle{
		width: 776px;
		height: 776px;
	}
	#architecture.b-section .circle{
		top: -145px;
		left: -180px;
	}
	#environment.b-section .circle{
		top: -145px;
		left: -180px;
	}
}
/* SP */
@media (max-width: 767px){
  :root{ --stripe-l: var(--stripe-l-sp); }
	.b-section .circle{
		width: 155vw;
		height: 155vw;
		top: -44vw;
		left: 50%;
		transform: translateX(-50%);
	}
	#environment.b-section .circle{
		top: -25vw;
	}
}

/*------------------------
セクション共通
------------------------*/
.b-section .txt-wrap .fadein,
.b-section .image{
	position: relative;
	z-index:5 ;
}

.b-section h2{
	letter-spacing: 0.08em;
}
.b-section .label{
	font-weight: 300;
	letter-spacing: 0.08em;
}
.b-section .textarea p{
	letter-spacing: 0.2em;
	line-height: 2.32;
	text-align: justify;
	font-weight: 300;
}
.b-section .textarea .list{
	font-weight: normal;
	letter-spacing: .2em;
}
.b-section .textarea .list li{
  position:relative;
  padding-left:1.5em; /* ここでインデント幅を確保 */
  text-indent:0;      /* 折り返し時に左端に揃える */
}
.list li::before{
  content:"■";
  position:absolute;
  left:0;
  top:0;
  color:#fff; /* オレンジなど */
  line-height:inherit;
}
.b-section .logo-link span::after{
  --s: 22px;      /* 矢印サイズ */
  --w: 1px;       /* 線の太さ */
  content: "";
  position: absolute;
  top: 50%;
  right: 0;                               /* 右端 */
  width: var(--s);
  height: var(--s);
  border-top: var(--w) solid #fff;
  border-right: var(--w) solid #fff;
  transform: translateY(-50%) rotate(45deg);  /* 上下中央 & 右向き */
  transform-origin: 50% 50%;
  pointer-events: none;
}
.b-section .txt-wrap {
	position: relative;
}
.b-section .logo-link span{
	position: relative;
	display:inline-block;
}
.b-section .image img {
	object-fit: cover;
}

/* PC */
@media screen and (min-width:768px) {
	.b-section{
		overflow-x: clip;   
	}
	.b-section .inner {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 60px;
	}
	.b-section h2 {
		margin-bottom: 40px;
	}
	.b-section .txt-wrap {
	width: 400px;
	}
	.b-section .logo-link{
		margin-bottom: 70px;
	}
	.b-section .logo-link a:hover{
		opacity: .6;
	}
	.b-section .logo-link span::after{
		top: 50%;
		right: -30px; 
		transition:right 0.2s ease;
	}
	.b-section .logo-link span:hover::after{
 	 right: -40px;
	}
	.b-section .logo-link img{
		width: auto;
		height: 32px;
	}
	.b-section h2{
		font-size: 32px;
	}
	.b-section .label{
		font-size: 20px;
		margin-bottom: 4px;
	}
	.b-section .textarea p{
		margin-bottom: 26px;
	}
	.b-section .textarea .list {
		font-size: 16px;
	}
	.b-section .textarea .list li{
		margin-bottom: 6px;
	}
	.b-section  .image {
		flex: 1;
		height: 700px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	.b-section:last-of-type{
	padding-bottom:0;
	}
	.b-section{
		padding-top:14vw;
		padding-bottom:14vw;
	}
	.b-section .inner {
		display: flex;
		flex-direction: column-reverse; 
		padding: 0 4.6vw;
		margin-right: 0;
		margin-left: 0;
	}
	.b-section .inner h2{
		text-align: left;
		margin-bottom: 8.26vw;
	}
	.b-section  .image {
		margin-bottom: 5vw;
	}
	.b-section .logo-link{
		margin-bottom: 9.33vw;
	}
	.b-section .logo-link span::after{
		top: 50%;
		right: -7.1vw; 
	}
	.b-section .logo-link img{
		width: auto;
		height:7.2vw;
	}
	.b-section .textarea p {
		font-size: 3.47vw;
    line-height: 1.8;
		margin: 0 -4.6vw 6.133vw;
	}
  .b-section .logo-link span::after{
    --s:4.26vw;
    --w:1px;
  }
	.b-section .textarea .list {
		font-size: 4.2vw;
	}
	.b-section .textarea .list li{
		margin-bottom: 1.2vw;
	}
}

/*------------------------
architecture
------------------------*/
/* PC */
@media screen and (min-width:768px) {
	#architecture {
		padding-top: 200px;
	}
	#architecture .txt-wrap {
		padding: 0 0 0 40px;
	}
	#architecture .image {
		margin-right: calc((100dvw - 1200px)/-2 - 60px);
	}
}
/*SP*/
@media screen and (max-width:767px) {
	#architecture {
		padding-top: 15vw;
	}
}	

/*------------------------
structure
------------------------*/
/* PC */
@media screen and (min-width:768px) {
	#structure {
		padding-top: 200px;
	}
	#structure .inner {
		flex-direction: row-reverse;
	}
	#structure .txt-wrap {
	padding: 0 40px 0 0;
	}
	#structure .inner .image{
		margin-left: calc((100dvw - 1200px)/-2 - 60px);
	}
	#structure.b-section .circle{
		top: -125px;
		left: -210px;
	}
}
/* SP */
@media screen and (max-width:767px) {
}
/*------------------------
environment
------------------------*/
#environment {
}
#environment .inner {
}

/* PC */
@media screen and (min-width:768px) {
	#environment {
		padding-top: 200px;
	}
	#environment .txt-wrap {
		padding: 0 0 0 40px;
	}
	#environment .image {
		margin-right: calc((100dvw - 1200px)/-2 - 60px);
	}
}
/*SP*/
@media screen and (max-width:767px) {
}