@charset "utf-8";
/*
 cs-lab.css
*/
html {
	scroll-behavior: smooth;
}
/* -----------------------------------------------
= main
----------------------------------------------- */
.main {
	padding: 8rem 0 0;
	background: #F6F8FC;
}
@media print, screen and (min-width: 768px) {/* PC */
.main {
	padding: 11rem 0 0;
}
}/* @media */
/* -----------------------------------------------
= intro
----------------------------------------------- */
.intro {
	position: relative;
	padding-bottom: 28rem;
	letter-spacing: .02em;
	background: #F6F8FC;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.intro.visible {
	opacity: 1;
	transform: translateY(0);
}
.intro::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 4rem;
	width: 60rem;
	height: 40rem;
	background: url(../../img/future/cs-lab_main_bg_sp.png) no-repeat 50% / cover;
	mix-blend-mode: multiply;
}
.intro .title {
	padding: 9rem 2rem;
	line-height: 1.5;
	text-align: center;
}
.intro .title .en {
	display: block;
	font-size: 2.6rem;
}
.intro .title .jp {
	display: block;
	font-size: 4rem;
	font-weight: 700;
}
.intro .img {
	position: relative;
	margin-bottom: 2rem;
}
.intro .img .text01 {
	position: absolute;
	left: 0;
	bottom: 2rem;
	width: 100%;
	color: #fff;
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-shadow: 2px 1px 0 #3C76CD;
}
.intro .text02 {
	color: #3C76CD;
	font-size: 6rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
@media print, screen and (min-width: 768px) {/* PC */
.intro {
	display: grid;
	grid-template-columns: calc(920 / 1440 * 100%) auto;
	gap: 0 6rem;
	padding-bottom: 11.6rem;
}
.intro::before {
	bottom: 9.1rem;
	width: calc(520 / 1440 * 100vw);
	height: calc(440 / 1440 * 100vw);
	background-image: url(../../img/future/cs-lab_main_bg_pc.png);
}
.intro .title {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	padding: 9rem 0;
	text-align: left;
}
.intro .title .en {
	font-size: 1.4rem;
}
.intro .title .jp {
	font-size: 2.4rem;
}
.intro .img {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	margin-bottom: 0;
}
.intro .img img {
	width: 100%;
	height: 55rem;
	object-fit: cover;
}
.intro .img .text01 {
	right: 3rem;
	left: 3rem;
	bottom: 1rem;
	width: auto;
	font-size: 4.5rem;
	text-align: left;
	text-shadow: 3px 3px 0 #3C76CD;
}
.intro .text02 {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	margin-left: 3rem;
	font-size: 7.2rem;
	text-align: left;
}
}/* @media */
/* -----------------------------------------------
= pagelink
----------------------------------------------- */
.pagelink {
	display: flex;
	padding: 0 1.4rem 8rem;
	letter-spacing: .02em;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.pagelink.visible {
	opacity: 1;
	transform: translateY(0);
}
.pagelink li {
	width: 100%;
}
.pagelink li a {
	display: block;
	position: relative;
	margin: 0 .8rem;
	padding: 3.2rem 2rem 8rem;
	color: #3B76CD;
	border: 1px dashed #3B76CD;
	border-radius: 1rem;
	text-align: center;
}
.pagelink li a::before,
.pagelink li a::after {
	content: "";
	position: absolute;
}
.pagelink li a::before {
	left: calc(50% - 6.4rem);
	bottom: 3rem;
	width: 12.8rem;
	height: 2.8rem;
	border: 1px solid #3B76CD;
	border-radius: 3em;
}
.pagelink li a::after {
	left: calc(50% - .5rem);
	bottom: 3.8rem;
	width: 1.8rem;
	height: 1.2rem;
	background: #3B76CD;
	clip-path: polygon(0 0, 100% 0,50% 100%);
}
.pagelink li .en {
	display: block;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.5;
}
.pagelink li .jp {
	display: block;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.5;
}
@media print, screen and (min-width: 768px) {/* PC */
.pagelink {
	max-width: 96rem;
	margin: 0 auto;
}
.pagelink li a {
	height: 100%;
	margin: 0 3rem;
	padding: 4.6rem 2rem 8.7rem;
	border-radius: 1.5rem;
	box-sizing: border-box;
	transition: .3s;
}
.pagelink li a::before,
.pagelink li a::after {
	transition: .3s;
}
.pagelink li a::before {
	left: calc(50% - 6rem);
	bottom: 2rem;
	width: 12rem;
	height: 2.4rem;
}
.pagelink li a::after {
	left: calc(50% - .5rem);
	bottom: 2.7rem;
	width: 1.6rem;
	height: 1rem;
}
.pagelink li .en {
	font-size: 2.4rem;
}
.pagelink li a:hover {
	background: #fff;
	border-style: solid;
	opacity: 1;
}
.pagelink li a:hover::before {
	background: #3B76CD;
}
.pagelink li a:hover::after {
	background: #fff;
}
}/* @media */
/* -----------------------------------------------
= block
----------------------------------------------- */
.block {
	scroll-margin-top: 10rem;
}
.block_in {
	position: relative;
	overflow: hidden;
}
.block .inner {
	padding: 3rem 3rem 12rem;
	letter-spacing: .02em;
}
.block .subtitle {
	display: inline-block;
	position: relative;
	margin-bottom: 2rem;
	padding-right: 14rem;
	color: #3B76CD;
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block .subtitle.visible {
	opacity: 1;
	transform: translateY(0);
}
.block .subtitle::after {
	content: "";
	position: absolute;
	top: 10%;
	right: 0;
	width: 12rem;
	height: 80%;
	background: linear-gradient(90deg,#FAE61C,#F6F8FC);
}
.block .en {
	position: absolute;
	color: #4D94FE;
	font-size: 11rem;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block .en.visible {
	opacity: 1;
	transform: translateY(0);
}
.block .text {
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 2;
	letter-spacing: .04em;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block .text.visible {
	opacity: 1;
	transform: translateY(0);
}
@media print, screen and (min-width: 768px) {/* PC */
.block {
	scroll-margin-top: 13rem;
}
.block .inner {
	max-width: 96rem;
	margin: 0 auto;
	padding: 0 0 15rem;
}
.block .subtitle {
	margin-bottom: 5.5rem;
	padding-right: 10rem;
	font-size: 3rem;
}
.block .subtitle::after {
	width: 8rem;
}
.block .en {
	font-size: 14rem;
}
.block .text {
	font-size: 1.6rem;
}
}/* @media */
/* -----------------------------------------------
= about
----------------------------------------------- */
.block.about {
	background: url(../../img/future/cs-lab_about_bg.png) no-repeat 57% 30% / auto 110rem;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block.about.visible {
	opacity: 1;
	transform: translateY(0);
}
.block.about .en {
	top: 6rem;
	right: -2rem;
	transform: rotate(-90deg);
	transform-origin: right bottom;
}
.block.about img {
	display: block;
	width: 64rem;
	margin-bottom: 4.8rem;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block.about img.visible {
	opacity: 1;
	transform: translateY(0);
}
.block.about .data {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block.about .data.visible {
	opacity: 1;
	transform: translateY(0);
}
.block.about .data h3 {
	margin-bottom: 2.4rem;
	color: #3C76CD;
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.5;
}
.block.about .data dl {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 7.2rem;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
}
.block.about .data dt {
	width: 7em;
	margin-bottom: 1.2rem;
	color: #3C76CD;
	font-weight: 700;
}
.block.about .data dd {
	width: calc(100% - 7em);
	margin-bottom: 1.2rem;
	font-weight: 500;
}
.block.about .text {
	margin: 0 3rem;
}
@media print, screen and (min-width: 768px) {/* PC */
.block.about {
	background-position: 50% 0;
	background-size: 144rem auto;
}
.block.about .inner {
	padding: 6.7rem 6rem 15rem;
}
.block.about .en {
	top: 0;
	right: -3rem;
}
.block.about .set {
	display: flex;
	align-items: start;
	margin-bottom: 4rem;
}
.block.about .set img {
	width: calc(500 / 960 * 100%);
	margin-right: calc(46 / 960 * 100%);
	margin-bottom: 0;
}
.block.about .set .data {
	flex: 1;
}
.block.about .data h3 {
	margin-bottom: 2rem;
	font-size: 3rem;
}
.block.about .data dl {
	margin-bottom: 0;
	font-size: 1.8rem;
}
.block.about .data dt {
	margin-bottom: 1.2rem;
}
.block.about .data dd {
	margin-bottom: 1.2rem;
}
.block.about .text {
	margin: 0 4rem;
}
}/* @media */
/* -----------------------------------------------
= mission
----------------------------------------------- */
.mission {
	margin-top: 6rem;
}
.mission ol {
	margin-top: 2.4rem;
}
.mission li {
	position: relative;
	margin-bottom: 2.4rem;
	padding: 3.2rem 2rem 3.2rem 10rem;
	color: #3C76CD;
	background: #fff;
	border: 2px solid #3C76CD;
	border-radius: 0 2.4rem 2.4rem 2.4rem;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .05em;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.mission li.visible {
	opacity: 1;
	transform: translateY(0);
}
.mission li p:first-child {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	padding: .8rem 1.5rem 1rem;
	color: #fff;
	background: #3C76CD;
	border-radius: 0 0 2.4rem 0;
	font-weight: 500;
}
.mission li p span {
	background: linear-gradient(transparent 70%,#FAE61C 71%);
}
@media print, screen and (min-width: 768px) {/* PC */
.mission {
	max-width: 88rem;
	margin: 8rem auto 0;
	text-align: center;
}
.mission ol {
	margin-top: 0;
	text-align: left;
}
.mission li {
	margin-bottom: 1.5rem;
	padding: 2.5rem 3.4rem 2.5rem 10.6rem;
	border-radius: 4rem;
	font-size: 1.8rem;
}
.mission li p:first-child {
	top: -2px;
	left: -1px;
	width: 8rem;
	height: 8rem;
	padding: 0;
	border-radius: 4rem;
	font-size: 2.4rem;
	line-height: 8rem;
	text-align: center;
}
}/* @media */
/* -----------------------------------------------
= field
----------------------------------------------- */
.block.field .block_in {
	padding-left: 11rem;
}
.block.field .subtitle {
	margin-left: -8rem;
}
.block.field .en {
	top: 7rem;
	left: -2rem;
	transform: rotate(90deg);
	transform-origin: left bottom;
}
.block.field ul {
	display: flex;
	flex-wrap: wrap;
	margin: 4rem 0 7rem;
}
.block.field li {
	position: relative;
	width: calc(50% - 10rem);
	margin: 1rem;
	padding: 4rem;
	text-align: center;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block.field li.visible {
	opacity: 1;
	transform: translateY(0);
}
.block.field li p {
	position: absolute;
	top: 0;
	left: 5rem;
	color: #4D94FE;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	transform: rotate(90deg);
	transform-origin: top left;
}
.block.field li img {
	width: 21.6rem;
}
.block.field li span {
	display: inline-block;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: .4rem .8rem;
	border: 1px solid #bbb;
	font-size: 2rem;
}
@media print, screen and (min-width: 768px) {/* PC */
.block.field .block_in {
	padding: 0 10rem;
}
.block.field .subtitle {
	margin-left: 0;
}
.block.field .en {
	top: -14rem;
	left: -3rem;
}
.block.field ul {
	margin: 0 0 4rem;
}
.block.field li {
	width: calc(1 / 6 * 100% - 2rem);
	margin: 0 1rem;
	padding: 12rem 0 2.5rem;
}
.block.field li p {
	position: absolute;
	top: 0;
	left: 5rem;
	font-size: 2.4rem;
	white-space: nowrap;
}
.block.field li img {
	width: 13.6rem;
}
.block.field li span {
	padding: .4rem .8rem;
	font-size: 1rem;
}
.block.field .text {
	margin: 0 4rem;
}
}/* @media */
/* -----------------------------------------------
= concept
----------------------------------------------- */
.block.concept {
	background: url(../../img/future/cs-lab_concept_bg.png) no-repeat 50% 90% / auto 72rem;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block.concept .block_in {
	padding-right: 11rem;
}
.block.concept.visible {
	opacity: 1;
	transform: translateY(0);
}
.block.concept .en {
	top: 6rem;
	right: -2rem;
	transform: rotate(-90deg);
	transform-origin: right bottom;
}
.block.concept .text + .text {
	margin-top: 1em;
}
@media print, screen and (min-width: 768px) {/* PC */
.block.concept {
	background-position: right calc(50% + 32rem) bottom 40%;
	background-size: 64rem auto;
}
.block.concept .block_in {
	padding: 0 6rem;
}
.block.concept .inner {
	max-width: 96rem;
	margin: 0 auto;
}
.block.concept .en {
	top: -14rem;
	right: -3rem;
}
.block.concept .text {
	margin-left: 4rem;
}
}/* @media */
/* -----------------------------------------------
= photo
----------------------------------------------- */
.block.photo {
	padding: 0 3rem 8rem;
}
.block.photo .en {
	position: static;
	margin: 0 0 4.8rem -1rem;
	font-size: 10.8rem;
}
.block.photo .gallery img {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block.photo .gallery img.visible {
	opacity: 1;
	transform: translateY(0);
}
@media print, screen and (min-width: 768px) {/* PC */
.block.photo .en {
	margin: 0 0 4rem;
	font-size: 14rem;
}
.block.photo .gallery {
	display: flex;
	flex-wrap: wrap;
	max-width: 108rem;
	margin: 0 auto;
	padding: 0 0 15rem;
}
.block.photo .gallery img {
	width: 50%;
	max-width: 54rem;
}
}/* @media */
/* -----------------------------------------------
= interview
----------------------------------------------- */
.block.interview .link {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .8s .2s, transform .8s .2s;
}
.block.interview .link.visible {
	opacity: 1;
	transform: translateY(0);
}
.block.interview .link a {
	display: block;
	position: relative;
}
.block.interview .link a::before,
.block.interview .link a::after {
	content: "";
	position: absolute;
}
.block.interview .link a::before {
	right: 3rem;
	bottom: 4rem;
	width: 18rem;
	height: 3.6rem;
	background: #FAE61C;
	border: 1px solid #4D94FE;
	border-radius: 3em;
}
.block.interview .link a::after {
	right: 4.8rem;
	bottom: 5.1rem;
	width: 4.5rem;
	height: 1.8rem;
	background: url(../../img/future/cs-lab_icon_link.png) no-repeat 50% / cover;
}
.block.interview .link img {
	height: 84rem;
	object-fit: cover;
}
.block.interview .link p {
	position: absolute;
	left: 3rem;
	bottom: 10rem;
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 7rem;
}
.block.interview .link p span {
	display: inline-block;
	margin-bottom: .8rem;
	padding: 0 1rem;
}
.block.interview .link p .type01 {
	color: #fff;
	background: #3C76CD;
	border: 1px solid #fff;
}
.block.interview .link p .type02 {
	color: #3C76CD;
	background: #fff;
	border: 1px solid #3C76CD;
}
@media print, screen and (min-width: 768px) {/* PC */
.block.interview .en {
	top: -14rem;
	left: -3rem;
	transform: rotate(90deg);
	transform-origin: left bottom;
}
.block.interview .block_in {
	padding: 0 9rem;
}
.block.interview .inner {
	max-width: 96rem;
	margin: 0 auto;
}
.block.interview .link a::before {
	right: 6rem;
	width: 12rem;
	height: 2.4rem;
}
.block.interview .link a::after {
	right: 7.2rem;
	bottom: 4.7rem;
	width: 3rem;
	height: 1.2rem;
}
.block.interview .link img {
	height: 52rem;
}
.block.interview .link p {
	left: 4rem;
	bottom: 3rem;
	font-size: 3rem;
	line-height: 4.4rem;
}
.block.interview .link p span {
	padding: 0 1rem;
}
.block.interview .link p br.is-sp + span {
	margin-left: -1.5rem;
	border-left: none;
}
}/* @media */
/* -----------------------------------------------
= print
----------------------------------------------- */
@media print {
.intro,
.pagelink,
.block .subtitle,
.block .en,
.block .text,
.block.about,
.block.about img,
.block.about .data,
.mission li,
.block.field li,
.block.concept,
.block.photo .gallery img,
.block.interview .link {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}
}/* media */