@charset "utf-8";
/*=================================
1: reset-CSS
2: setting
3: header
4: footer
5: common-content
6: top page
7: second page
8: JS
=================================*/


/* =========================================
   MODERN RESET
========================================= */
*,
*::before,
*::after{
	box-sizing:border-box;
}

*{
	margin:0;
}

html{
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
}

body{
	min-height:100vh;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
}

img,
picture,
video,
canvas{
	display:block;
	max-width:100%;
}
svg{
	display:block;
}

input,
button,
textarea,
select{
	font:inherit;
}

button{
	border:none;
	background:none;
	cursor:pointer;
}

a{
	color:inherit;
	text-decoration:none;
}

ul,
ol{
	list-style:none;
}
::selection{
  background:rgba(120,160,255,.25);
}

@media
(prefers-reduced-motion:reduce){
	*{
		animation:none !important;
		transition:none !important;
		scroll-behavior:auto !important;
	}
}

/* 2: setting
================================== */
/* clearfix*/
.cf:after { content: ""; clear: both; display: block; }
.clear { clear: both;}

/* font */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../font/NotoSansJP-Regular.woff2') format('woff2'),
  url('../font/NotoSansJP-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: bold;
  font-display: swap;
  src: url('../font/NotoSansJP-Bold.woff2') format('woff2'),
  url('../font/NotoSansJP-Bold.woff') format('woff');
}

html {
  font-size: 62.5%;
  /* 1rem = 10px */
}

@media print,
screen and (min-width: 768px) {
  html {
    overflow: auto;
    min-width: 1000px;
  }
}


body {
	font-family: 'Noto Sans JP', sans-serif, 'Yu Gothic', '游ゴシック', '游ゴシック体', YuGothic, Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-style: normal;
	color: #323232;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.7;
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact; /* background_print */
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;/* safari_textBold*/
	-webkit-text-size-adjust: 100%;/* safari_textBold*/
	min-width:950px;
}

@media(max-width:768px){
	body {min-width:auto;}
}
img {
	display: block;
	line-height: 0;
	max-width:100%;
	height:auto;
	position:relative;
	z-index:10;
}

.sp_none {display:block;}
.sp_show {display:none;}

/* var(color) */

:root{
  --main-bl: #174784;
  --main-gray: #d0dae2;
  --main-purple:#f6f6fe;

}


/* link */
a {
	color:var(--main-bl);
	-webkit-transition: all .2s;
	transition: all .2s;
	text-decoration: none;
}
a:hover {
	color: #1ba3f9;
	text-decoration:underline;
}

.sec .section a[target="_blank"]::after,
body:not(.news).sec .contents a[target="_blank"]::after{
	content:"";
	width:20px;
	height:20px;
	background:url(../img/icn_blank.svg) no-repeat ;
	display:inline-block;
	margin-left:5px;
}

a[href$=".pdf"]::before{
	content:"";
	width:20px;
	height:20px;
	background:url(../img/icn_pdf.svg) no-repeat ;
	background-size:20px;
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
}

a img {
	-webkit-transition: all .2s;
	transition: all .2s;
}
a img:hover {
	opacity:.7;
}

.inr {
	max-width:1200px;
	margin:0 auto;
}

h2 {
	color:var(--main-bl);
	font-size:3.5rem;
	font-weight:bold;
	position:relative;
	line-height:1.4;
}
	h2 span {
		display:block;
		font-size:1.8rem;
		font-weight:normal;
	}

	h2::after {
		content:"";
		display:block;
		width:60px;
		height:1px;
		background:var(--main-bl);
		margin:0.5em 0 1em 0;
	}

	h2.tC::after {
		margin:0.5em auto 1em auto;
	}

@media(max-width:768px){
	.sec section:not(#title) h2 {font-size:2.4rem;}
}

.tC {text-align:center!important;}
.mT1em {margin-top:1em!important;}
.mT2em {margin-top:2em!important;}
.mB1em {margin-bottom:1em!important;}
.btn {
	background:var(--main-bl);
	color:white;
	display:block;
	width:12em;
	margin:1.5em auto;
	text-align:center;
	padding:0.8em 2em;
	border-radius:25px;
}
#main ul li {list-style:disc;}
#main ul {margin-bottom:1em;}

.btn:hover {
	color:var(--main-bl);
	background:white;
}
.flexbox_wap {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
    justify-content: flex-start;
}
.flexbox_sbwap {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between; /* Safari */
	justify-content: space-between;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}
.flexbox_cwap {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center; /* Safari */
	justify-content: center;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}

.contents {
	padding:3% 5%;
}

@media(max-width:768px){
	.contents {
		max-width:768px;
		width:100%;
		padding:40px 20px;
	}
}

/* =========================================
   HEADER
========================================= */

.site-header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:88px;
	padding:0 40px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	z-index:9999;
	background:rgba(255,255,255,0.95)
}
	.site-header.is-active {
		background:none;
	}

/* =========================================
   MENU BUTTON
========================================= */
.menu-trigger{
	display:flex;
	align-items:center;
	gap:14px;
	border:none;
	background:none;
	cursor:pointer;
	position:relative;
	z-index:10000;
}

/* =========================================
   DOTS
========================================= */
.dots{
	position:relative;
	width:24px;
	height:24px;
}

/* dot */
.dots i{
	position:absolute;
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--main-bl);
	transition:all .5s ease;
}

/* initial */
.dots i:nth-child(1){
	left:0;
	top:8px;
}
.dots i:nth-child(2){
	left:8px;
	top:8px;
}
.dots i:nth-child(3){
	left:16px;
	top:8px;
}

.menu-trigger:hover .dots i{
  box-shadow:0 0 14px rgba(14,59,103,.6);
}

.menu-trigger.active .dots i:nth-child(1){
	width:18px;
	height:2px;
	border-radius:2px;
	top:11px;
	left:3px;
	transform:rotate(45deg);
}
.menu-trigger.active .dots i:nth-child(2){
	opacity:0;
}
.menu-trigger.active .dots i:nth-child(3){
	width:18px;
	height:2px;
	border-radius:2px;
	top:11px;
	left:3px;
	transform:rotate(-45deg);
}

/* =========================================
   MENU TEXT
========================================= */
.menu-text{
	font-size:1.6rem;
	letter-spacing:.18em;
	color:var(--main-bl);
	font-weight:600;
}
@media(max-width:768px){
	.menu-text{font-size:1.4rem;}
}

/* =========================================
   MENU OVERLAY
========================================= */
.menu-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  padding:120px 20px;
  background:
    rgba(248,250,255,.96);
  backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  transition:
    opacity .5s ease,
    visibility .5s ease;
  z-index:9990;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

/* =========================================
   MENU LIST
========================================= */
.menu-nav{
  margin:0 auto;
  position:relative;
  transform:none;
  left:auto;
  top:auto;
}

.menu-nav ul{
  display:flex;
  flex-direction:column;
  gap:28px;
}


/* =========================================
   MENU ITEM
========================================= */
.menu-nav a{
  position:relative;
  display:inline-block;
  font-size:clamp(2.0rem,2vw,40px);
  font-weight:300;
  letter-spacing:.04em;
  color:var(--main-bl);
  text-decoration:none;
  transition:
    transform .3s ease,
    color .3s ease;
}

.menu-nav a:hover{
  transform:translateX(10px);
  color:#3f6fc5;
}


/* =========================================
   UNDERLINE
========================================= */
.menu-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:1px;
  background:var(--main-bl);
  transition:.4s ease;
}

.menu-nav a:hover::after{
  width:100%;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){
  .site-header{
    padding:0 12px;
	height:60px;
  }
  .menu-node{
    width:150px;
    height:150px;
    font-size:1.6rem;
  }
  .logo {margin-right:5px;}

}


/* =========================
   HERO
========================= */
.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#fcfdff;
}

/* =========================
   背景画像
========================= */
.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  z-index:0;
}


@media(max-width:768px){
	.bg {
		max-width:768px;
		height:auto;
		top:25%;
	}
}

/* =========================
   粒子SVG
========================= */

#particles{
  position:absolute;
  inset:0;
  opacity:.7;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

/* =========================
   粒子
========================= */

.hero-particle{
  fill:rgba(14,59,103,.30);
  /*filter:blur(.5px);*/
  filter:none;
}

/* 大きめ粒子 */
.hero-particle.large{
  fill:rgba(14,59,103,.12);
 /*filter:blur(1px);*/
  filter:none;
}

/* =========================
   コピー
========================= */
.catchcopy{
  position:absolute;
  left:8%;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
}
.catchcopy h1{
	font-size:clamp(64px,6vw,120px);
	line-height:1.15;
	letter-spacing:.04em;
	font-weight:600;
	color:#111;
	margin-bottom:40px;
}

@media(max-width:768px){
.catchcopy h1{
	font-size:clamp(45px,6vw,120px);
}
}



.catchcopy p{
  font-size:clamp(18px,2vw,28px);
  line-height:1.8;
  color:#333;
}

.link a {
	font-size:1.6rem;
	border-bottom:solid 1px var(--main-bl);
	padding:0.2em 4.5em 0.5em 0.2em;
	background:url(../img/menu-arrow.svg) no-repeat center right;
}

.catchcopy .link {
	margin-top:50px;
}

/* =========================
   スクロール表示
========================= */
.scroll{
  position:absolute;
  left:32px;
  bottom:40px;
  writing-mode:vertical-rl;
  font-size:12px;
  letter-spacing:.3em;
  color:#111;
  z-index:10;
}
@media(max-width:768px){
	.scroll{bottom:60px}
}

/* =========================
   ノイズ質感
========================= */
.noise{
  position:absolute;
  inset:0;
  opacity:.03;
  mix-blend-mode:multiply;
  pointer-events:none;
  background-image:
    radial-gradient(#000 0.5px, transparent 0.5px);
  background-size:6px 6px;
}



/* =========================
   Concept
========================= */
#concept {
	background:var(--main-purple) url(../img/back_concept.png) no-repeat center center;
}

#concept .contents{
	position:relative;
}

.concept-flow{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px;
}

.step{
  position:relative;
  z-index:2;
  width:20%;
}

@media(max-width:768px){
	.concept-flow {display:block;}
	.step {width:100%;}
}

.num{
  font-size:3.0rem;
  font-weight:300;
  color:var(--main-bl);
  margin-bottom:12px;
}

.card{
  background:#fff;
  margin-top:-40px;
  min-height:220px;
  padding:24px;
  box-shadow:
    0 6px 18px rgba(0,0,0,.05);
}

.card img{
  width:90px;
  margin:0 auto 20px;
}

.card h3{
  font-size:2.0rem;
  color:white;
  margin-bottom:10px;
  position:absolute;
  width:100%;
  height:40px;
  left:0;
  bottom:35px;
  background:var(--main-bl);
  padding-left:10px;
}
@media(max-width:768px){
	.card, .card p {text-align:center; width:100%}
}

@media(min-width:768px){

.flow-line{
  position:absolute;
  left:-20px;
  right:0;
  bottom:45px;
  height:40px;
  width:103%;
  background:var(--main-bl);
  clip-path:polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 50%,
    calc(100% - 20px) 100%,
    0 100%,
    20px 50%
  );
}
.step:not(:last-child) .card h3::after {
  content:"";
  position:absolute;
  right:-13px;
  top:50%;
  width:30px;
  height:30px;
  border-top:3px solid white;
  border-right:3px solid white;
  transform:
    translateY(-50%)
    rotate(45deg);
}
}

.card p{
  font-size:1.6rem;
  position:absolute;
  left:10px;
  bottom:10px;
}


/* =========================
   TOPICS
========================= */
#topics {
	background:url(../img/back_topics.png) no-repeat center center var(--main-gray);
	background-size:680px;
	
}
@media(max-width:768px){
	#topics {background-size:450px;}
}

#topics .contents {
	position:relative;
}

#topics .link {
	position:absolute;
	right:5%;
	top:50px;
	z-index:10;
}

@media(max-width:768px){
	#topics .contents {padding-bottom:100px;}
	#topics .link { right:20px; bottom:30px; top:auto;}
}


/* =========================================
   SECTION
========================================= */

.topics-section{
  width:100%;
  height:600px;
  overflow:hidden;
}

@media(max-width:768px){
	.topics-section{height:auto;}
}

/* =========================================
   NETWORK
========================================= */

.network{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.network path{
  fill:none;
  stroke:rgba(40,80,140,.08);
  stroke-width:1.2;
  stroke-linecap:round;
}

@media(max-width:768px){
	  .network{
		display:none;
	}
	.topics-stage{
		height:auto;
	}

  .topic{
	position:relative !important;
	transform:none !important;
	left:auto !important;
	top:auto !important;
    width:90%;
    max-width:420px;
    margin:auto;
  }

}

/* =========================================
   STAGE
========================================= */

.topics-stage{
 position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

@media(max-width:768px){
	.topics-stage {position:relative;}
}

.topics-network{
  position:relative;
  min-height:900px;
}

/* =========================================
   TOPIC
========================================= */

.topic{
  position:absolute;
  width:320px;
  transition:opacity .5s ease;
  will-change:transform;
  border-radius:10px;
  overflow:hidden;
  background: url(../img/box-arrow.svg) no-repeat 98% bottom white;
  text-decoration:none;
  color:inherit;
  box-shadow:
    0 10px 30px rgba(0,0,0,.06);
  opacity:1;
  padding-bottom:25px;
}
	.sec .topic{position:relative;}

.topic:hover{
  z-index:99999 !important;
  text-decoration:none;
  box-shadow:
    0 24px 60px rgba(0,0,0,.18);
}
	.sec .topic:hover {z-index:1;}
.topic:hover .topic-image{
  transform:scale(1.04);
}
@media(max-width:768px){
	.topics {position:relative;}
}


/* =========================================
   IMAGE
========================================= */

.topic-image-wrap{
  position:relative;
  height:180px;
  overflow:hidden;
}

.topic-image{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  transition:
    transform 1s ease;
}

/* =========================================
   LABEL
========================================= */

.topic-label{
  position:absolute;
  top:16px;
  left:0;
  padding:10px;
  background:var(--main-bl);
  color:white;
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.02em;
}
	.topics .topic-label {display:block;}

/* =========================================
   BODY
========================================= */

.topic-body{
  padding:24px;
  background:white;
}

.topic-body h3{
  font-size:1.8rem;
  margin-bottom:12px;
  color:var(--main-bl);
}

.topic-body p{
  font-size:1.4rem;
}

/* =========================================
   FLOAT
========================================= */

.topic-inner{
  animation:
    float 10s ease-in-out infinite;
}

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-8px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* =========================
   Outputs
========================= */

#outputs .title .link {
	position:absolute;
	bottom:0;
	left:0;
}
#outputs .news_list {
	width:100%
}

@media(min-width:768px){
#outputs .news_list {
	max-height:350px;
	overflow-y:auto;
}
#outputs .title {
	width:30%;
	position:relative;
}
#outputs .news_list {
	width:70%;
}
}

.news_list dl {
	border-bottom:solid 1px var(--main-bl);
	padding:0.5em 0.2em;
}
.news_list a dl {
	background:url(../img/link_arrow.svg) no-repeat 99% center;
	padding-right:50px;
}
.news_list dt {
	font-weight:bold;
	font-size:1.8rem;
}
.news_list dt span {
	width:6em;
	display:inline-block;
	text-align:center;
	margin-left:1em;
	background:black;
	color:white;
}
@media(max-width:768px){
	.news_list dt span {display:block; margin-left:0;}
}
.news_list a {
	color:#323232
}

@media(max-width:768px){
	#outputs .contents {
		position:relative;
		padding-bottom:100px;
	}
	#outputs .title .link {
		bottom:30px;
		right:20px;
		left:auto;
	}
}

/* =========================
   About
========================= */
#about {
	background:url(../img/back_about.png) no-repeat center center var(--main-gray);
	background-size:cover;
	padding:1em;
}

.about_zu {margin:0 auto;}

@media(min-width:768px){
	.txt_box {width:70%;}
	.about_zu {width:30%;}
}


/* =========================
   LINK
========================= */
.box {
	box-shadow:
		0 4px 12px rgba(0,0,0,.04),
		0 12px 32px rgba(0,0,0,.08);
	background:white;
	border-radius:20px;
	padding:20px 20px 100px 20px;
	background:url(../img/box-arrow.svg) no-repeat 98% bottom;
    transition:
    transform .4s ease,
    box-shadow .4s ease;
}
.box:hover {
	  transform:translateY(-6px);
	  box-shadow:
	  0 8px 20px rgba(15,23,42,.05),
	  0 24px 48px rgba(15,23,42,.12);
}

.topic:hover .topic-image{
  transform:scale(1.08);
}

#join .contents {padding-bottom:0;}

#join .box {
	margin-bottom:25px;
}

@media(min-width:768px){
	#join .box {
		width:calc(100%/2 - 50px);
		margin:0 25px 25px 25px;
	}
}
.box p {color:black;}


/* =========================
   CONTACT US
========================= */
.back {
	background:var(--main-gray);
	border-radius:20px;
	margin:5%;
	padding:2em;
}


/* =========================
   Footer
========================= */
#footer .inr {
	padding:10px;
}
#f_link {
	background:var(--main-bl);
	padding:0.5em;
}
#f_link li {
	margin:0.2em 0;
	padding:0 0.5em;
}
#f_link li:first-child::after {
	content:"|";
	color:white;
	padding-left:1em;
}
#f_link a {
	color:white;
	text-decoration:none;
}

#f_banner {
	margin:10px;
}
#f_banner ul {
	margin:0 auto;
	max-width:1000px;
	padding:0;
}

#f_banner li {
	width: calc(100%/3 - 10px);
}

#f_banner li img {
	max-width:100%;
	height:auto;
	margin:0 auto;
}

#copy {
	background:var(--main-gray);
	text-align:center;
}
#copy img {
	margin:0 auto;
	padding:1em 0 0.5em 0;
	max-width:500px;
}

#copy p {
	color:var(--main-bl);
	font-size:1.6rem;
	padding-bottom:0.5em;
}

@media(max-width:768px){
	#copy img {width:80%; height:auto;}
	#copy p {font-size:1.4rem;}
	#f_banner li {width:100%;}
}

.pageTop{
  position:fixed;
  right:30px;
  bottom:30px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:18px 14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border:1px solid rgba(13,75,140,.15);
  border-radius:40px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.08);
  transition:.3s ease;
  opacity:0;
  visibility:hidden;
}
.pageTop.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.pageTop:hover{
  transform:translateY(-4px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.12);
}

.pageTop .dots{
  display:flex;
  gap:4px;
}

.pageTop .dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--main-bl);
  transition:.3s ease;
}

.pageTop .label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.25em;
  color:var(--main-bl);
}

/* hoverで中央だけ上昇 */
.pageTop:hover .dots span:nth-child(2){
  transform:translateY(-5px);
}


/* =========================
   2階層目-共通
========================= */
#title {
	padding-top:70px;
	background:var(--main-gray) url(../img/back_concept.png) no-repeat top center;
}

.sec #title h2 {text-align:center;}
.sec #title h2::after {margin:0; height:0}
.sec #main section:not(#title) h2 {font-size:2.6rem;}
.sec #main section:not(#title) h2:nth-child(n+2) {margin-top:2em;}
.sec h3 {
	font-size:2.0rem;
	padding:0.5em 0;
	margin-bottom:0.5em;
}
	.sec h3::before {
		content:"●";
		color:var(--main-bl);
		margin-right:5px;
	}

.sec h4 {
	font-size:1.8rem;
	padding:0.2em 0;
	margin-bottom:0.2em;
}
	.sec h4::before {
		content:"■";
		color:var(--main-bl);
		margin-right:5px;
		font-size:1.0rem;
	}

.sec {counter-reset: section;}
.sec.about section:not(#title) h2::before,
.sec.bio-agile section:not(#title) h2::before{
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
  display:block;
  font-size:6rem;
  color:var(--main-gray);
  position:absolute;
  top:-65px;
  left:-20px;
}
.sec section:not(#title):nth-child(odd) {
	background:var(--main-purple)
}
.sec p {margin-bottom:1em;}

/* =========================
   2階層目-about
========================= */
.about section:nth-child(4) {
	background:url(../img/back_mission.jpg) no-repeat top right;
}
.sec.about section:nth-child(5),
.sec.bio-agile section:nth-child(3) {
	background:url(../img/back_member.png) no-repeat top right var(--main-purple)!important;
}
.about section:nth-child(5) dl {
	display:flex;
	border-bottom:solid 1px #eee;
	padding:0.5em;
}

.about section:nth-child(5) dt {width:8em}

.member-list{
  columns:2;
  column-gap:80px;
}
.member-list2{
  columns:3;
  column-gap:80px;
}

@media(max-width:768px){
	.member-list,.member-list2{columns:1}
}

.topics #main .flexbox_cwap a {
	margin:0 34px 24px 0;
}

.detail #main img {margin:0 auto 1em auto; height:auto; max-width:100%;}