@charset "utf-8";

html,
body {
	width: 100%;
	font-size: 62.5%;
	color: #1a2333;
	background: #f3f6fd;
}

#wrap {
	min-width: 1024px;
	overflow: hidden;
}

@media screen and (max-width: 640px) {

	html,
	body {
		width: 640px;
		min-width: 640px;
		/* font-size: 106.67%; */
		font-size: 90%;
	}

	#wrap {
		width: 640px;
		min-width: 640px;
	}
}

a {
	color: var(--c-text);
	text-decoration: none;
	transition: 0.3s;
}

a img {
	transition: 0.3s;
}

@media (hover:hover) {
	a:hover img {
		opacity: 0.7;
	}
}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}


/* セレクト時の色指定 */
::selection {
	background: var(--c-bg);
	color: var(--c-text);
}

::-moz-selection {
	background: var(--c-bg);
	/*Firefox*/
	color: var(--c-text);
}

.-flex {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: auto;
}

.showSp {
	display: none !important;
}

@media screen and (max-width:640px) {

	.showPc {
		display: none !important;
	}

	.showSp {
		display: block !important;
	}
}


/* --------------------------------------------

color

---------------------------------------------- */

:root {
	--c-text: #1a2333;
	--c-bg: #f3f6fd;
	--c-blue: #1f3e8c;
	--c-green: #5f9e3a;
	--c-blue-bg: #1f98d0;
	--c-green-bg: #2fa77c;
	--c-paleblue: #c4d7f7;
	--c-palegreen: #c9efb4;

}


/* --------------------------------------------

fonts

---------------------------------------------- */

:root {
    --ff-en: "Segoe UI", "Arial", "Helvetica", sans-serif;

	--fz-xs: 1.2rem;
    --fz-s: 1.4rem;
    --fz-m: 1.6rem;
    --fz-l: 1.8rem;
    --fz-xl: 2.0rem;
    --fz-xxl: 2.4rem;
	--fz-3xl: 3.0rem;
	--fz-4xl: 3.2rem;

    --fw-light: 300;
	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 900;
}

@media screen and (max-width:640px) {
	:root {
		--fz-xs: 1rem;
		--fz-s: 1.2rem;
		--fz-m: 1.5rem;
		--fz-l: 1.6rem;
		--fz-xl: 1.8rem;
		--fz-xxl: 2.0rem;
		--fz-3xl: 2.6rem;
		--fz-4xl: 2.8rem;
	}
}

body,
input,
select,
textarea {
	font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	font-size: var(--fz-m);
	font-weight: var(--fw-bold);
	line-height: 1.7;
	letter-spacing: 0.02em;
	font-feature-settings: "palt";
}

.-ff-en {
	text-align: left;
	font-family: var(--ff-en);
	font-weight: var(--fw-black);
	letter-spacing: 0;
}


/* --------------------------------------------

bg

---------------------------------------------- */

.bg {
	position: fixed;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 0;
}

.bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -10%);
	width: 200%;
	height: 200%;
	background: url("../_image/common/background-blur.svg") center top / cover no-repeat;
	z-index: 1;
	opacity: 0.8;

	animation: backgroundMove 90s ease-in-out infinite;
}

@keyframes backgroundMove {
	0% {
		transform: translateX(-50%) translateY(-10%) scale(1);
	}
	20% {
		transform: translateX(-75%) translateY(-20%) scale(1.25);
	}
	40% {
		transform: translateX(-35%) translateY(-20%) scale(1);
	}
	60% {
		transform: translateX(-20%) translateY(-5%) scale(1.15);
	}
	80% {
		transform: translateX(-25%) translateY(-25%) scale(1.05);
	}
	100% {
		transform: translateX(-50%) translateY(-10%) scale(1);
	}
}

.hexWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.hexWorld {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 六角形アニメーション */
.hexWorld use {
    transform-box: fill-box;
    transform-origin: center;

    opacity: 0;

    /* 個体差用の変数（HTML側で上書き可能） */
    --dx: 1;
    --dy: 1;
    --rot: 1;
    --duration: 18s;
    --delay: 0s;

    animation:
        hexFloat var(--duration) ease-in-out infinite,
		fadeIn 2.4s ease-out both;

    animation-delay:
        var(--delay),
        var(--delay);
}

/* きらめきON時 */
.hexWorld.is-sparkle-on use {
    animation:
        hexFloat var(--duration) ease-in-out infinite,
        sparkle 6s ease-in-out infinite,
        fadeIn 2.4s ease-out forwards;

    animation-delay:
        var(--delay),
        calc(var(--delay) + 1s),
        var(--delay);
}

/* メイン浮遊（左右＋上下＋回転） */
@keyframes hexFloat {
    0% {
        transform:
            translate(0px, 0px)
            rotate(calc(var(--rot) * 0deg))
            scale(1);
    }

    25% {
        transform:
            translate(
                calc(var(--dx) * 1px),
                calc(var(--dy) * 1px)
            )
            rotate(calc(var(--rot) * 8deg))
            scale(1.005);
    }

    50% {
        transform:
            translate(
                calc(var(--dx) * 2px),
                calc(var(--dy) * 2px)
            )
            rotate(calc(var(--rot) * 16deg))
            scale(1.01);
    }

    75% {
        transform:
            translate(
                calc(var(--dx) * 1px),
                calc(var(--dy) * 1px)
            )
            rotate(calc(var(--rot) * 6deg))
            scale(1.005);
    }

    100% {
        transform:
            translate(0px, 0px)
            rotate(calc(var(--rot) * 0deg))
            scale(1);
    }
}

/* きらめき（自然な呼吸感） */
@keyframes sparkle {
    0%   { opacity: 0.18; }
    25%  { opacity: 0.35; }
    50%  { opacity: 0.55; }
    75%  { opacity: 0.32; }
    100% { opacity: 0.18; }
}


/* 初期フェードイン */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hexWorld use.hex-blue {
    fill: rgba(31, 152, 208, 0.06);
}

.hexWorld use.hex-white {
    fill: rgba(255, 255, 255, 0.22);
}

/* 個体差 */
.hexWorld use:nth-child(1) {
    --dx: 1;
    --dy: 1;
    --rot: 1;
    --duration: 22s;
    --delay: 0s;
}

.hexWorld use:nth-child(2) {
    --dx: -1;
    --dy: 1;
    --rot: -1;
    --duration: 18s;
    --delay: 1s;
}

.hexWorld use:nth-child(3) {
    --dx: 1;
    --dy: -1;
    --rot: 1;
    --duration: 24s;
    --delay: 2s;
}

.hexWorld use:nth-child(4) {
    --dx: -1;
    --dy: -1;
    --rot: -1;
    --duration: 20s;
    --delay: 0.5s;
}

.hexWorld use:nth-child(5) {
    --dx: 1;
    --dy: 1;
    --rot: -1;
    --duration: 26s;
    --delay: 1.5s;
}

.hexWorld use.hex-blue {
    fill: rgba(31, 152, 208, 0.05);
}

.hexWorld use.hex-white {
    fill: rgba(255, 255, 255, 0.20);
}

@media screen and (max-width:640px) {
	.bg {
		height: 100svh;
	}

	.bg::before {
        width: 150%;
        height: 150%;
        animation: backgroundMove 180s ease-in-out infinite;
    }
}

/* --------------------------------------------

animation

---------------------------------------------- */

.fadeIn,
.fromBottom {
	opacity: 0;
}

.anime.is-animated.fadeIn,
.anime.is-animated .fadeIn {
	animation: fadeIn 1s ease forwards;
}

.anime.is-animated.fromBottom,
.anime.is-animated .fromBottom {
	animation: fadeInUp 1s ease forwards;
}

@keyframes fadeIn {
	to { opacity: 1; }
}

@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(4rem);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}

/* 遅延で順に表示、スマホでは解除 */
.pcDelay-02 {
	animation-delay: 0.2s;
}

.pcDelay-04 {
	animation-delay: 0.4s;
}

.pcDelay-06 {
	animation-delay: 0.6s;
}

.pcDelay-08 {
	animation-delay: 0.8s;
}

.pcDelay-10 {
	animation-delay: 1.0s;
}

@media screen and (max-width:640px) {
	.pcDelay-02,
	.pcDelay-04,
	.pcDelay-06,
	.pcDelay-08,
	.pcDelay-1 {
		animation-delay: 0s;
	}
}

/* --------------------------------------------

breadcrumb

---------------------------------------------- */

.breadcrumb {
	margin-bottom: 9rem;
}

.breadcrumbList {
    display: flex;
	justify-content: flex-end;
	font-size: var(--fz-s);
	color: var(--c-green);
}

.breadcrumbItem {
    display: flex;
    align-items: center;
}

.breadcrumbItem a {
	color: var(--c-blue);
}

@media (hover:hover) {
	.breadcrumbItem a:hover {
		color: var(--c-green);
		transition: 0.3s;
	}
}

.breadcrumbItem + .breadcrumbItem::before {
    content: "";
    width: 12px;
    height: 2px;
    background-color: var(--c-blue);
    margin: 0 0.8em;
}

@media screen and (max-width:640px) {
	.breadcrumb {
		margin-bottom: 5rem;
	}
}

/* --------------------------------------------

共通パーツ

---------------------------------------------- */

.main {
    position: relative;
    z-index: 1;
}

.contentsTitle  {
	width: 98%;
	max-width: 1760px;
	margin: 0 0 0 auto;
	padding: 16rem 0 6rem;
}

.contentsTitle h2 {
	margin-bottom: 2.5rem;
	font-size: 6.0rem;
	color: var(--c-green);
}

.contentsTitle .innerTitle {
	display: block;
	font-size: var(--fz-l);
	font-weight: var(--fw-bold);
	color: var(--c-blue);
}

.contents.-contents {
	width: 98%;
	max-width: 1760px;
	margin: 0 0 0 auto;
	background-color: #fff;
	border-radius: 25px 0 0 0;
}

.contentsWrap {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem 0 12rem;
}

#research-01,
#research-02,
#research-03,
#research-04 {
	scroll-margin-top: 100px;
}

@media screen and (max-width:640px) {
	.contentsTitle  {
		width: 96%;
		padding: 12rem 0 4rem;
	}
}