@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700&display=swap");
* {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

html {
	font-size: 16px;
	overflow-y: scroll;
}
html.sp {
	font-size: 16px !important;
}

body, th, td, input, select, textarea {
	font-size: min(1.316872428vw, 16px);
	font-weight: 500;
	font-family: 'Zen Kaku Gothic New', sans-serif;
}
.sp body, .sp th, .sp td, .sp input, .sp select, .sp textarea {
	font-size: min(3.9104112196vw, 14.6640420736px);
}

body {
	margin: 0px auto;
	color: #000000;
	background: #ffffff;
	overflow: hidden;
}

img {
	border: 0px;
}

a {
	text-decoration: none;
}

dl, ul, ol {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

p {
	margin: 0px;
}

.clear {
	clear: both;
}

.sp .view_pc {
	display: none !important;
}

.view_sp {
	display: none !important;
}
.sp .view_sp {
	display: block !important;
}

.loading * {
	-webkit-transition: 0ms !important;
	transition: 0ms !important;
}
.loading *:before, .loading *:after {
	-webkit-transition: 0ms !important;
	transition: 0ms !important;
}

main * + .image, main * + .column, #footer .body * + p {
	margin-top: 20px;
}

header {
	display: block;
	position: absolute;
	top: 0px;
	left: 50%;
	width: 100%;
	max-width: 1255px;
	z-index: 50;
	transform: translateX(-50%);
}
.sp header {
	height: 56px;
	background: #fff;
}

#logo {
	position: absolute;
	top: 30px;
	left: 20px;
	z-index: 100;
}
.sp #logo {
	top: 10px;
	left: 10px;
}
#logo a {
	position: relative;
	display: block;
	width: 52px;
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
}
#logo a:hover {
	opacity: 0.7;
}
#logo a img {
	display: block;
	width: 100%;
	height: auto;
}

#menu {
	position: fixed;
	display: none;
	right: 10px;
	top: 10px;
	z-index: 1050;
}
.sp #menu {
	display: block;
}
#menu a {
	display: block;
	width: 60px;
	height: 60px;
	text-indent: -1000px;
	background: #fff;
	overflow: hidden;
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
	transition: opacity 0.2s;
	border-radius: 50%;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
}
#menu a:hover {
	opacity: 0.7;
}
#menu a:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url(../images/menu.svg) no-repeat center center;
	opacity: 1;
	transition: 400ms;
}
#menu a:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url(../images/close.svg) no-repeat center center;
	opacity: 0;
	transition: 400ms;
}
.menuopen #menu a:before {
	opacity: 0;
}
.menuopen #menu a:after {
	opacity: 1;
}

#fullmenu {
	position: fixed;
	flex-direction: column;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	color: #fff;
	padding-top: 90px;
	background: #0057A4;
	z-index: 1001;
	opacity: 0;
	transform: translateX(40%);
	transition: opacity 600ms, transform 600ms, top 600ms, height 600ms;
	pointer-events: none;
	overflow-y: auto;
	overflow-x: hidden;
}
.sp.menuopen #fullmenu {
	transform: translateX(0%);
	opacity: 1;
	pointer-events: auto;
}
#fullmenu .menu {
	position: relative;
}
#fullmenu .menu a {
	display: flex;
	align-items: center;
	padding: 10px;
	min-height: 64px;
	font-size: min(4.2666666667vw, 16px);
	line-height: 1.3;
	font-weight: bold;
	color: #fff;
}
#fullmenu .menu ul {
	border-top: 1px solid #fff;
}
#fullmenu .menu li {
	border-bottom: 1px solid #fff;
}
#fullmenu .footer {
	padding: 40px 10px 20px;
}
#fullmenu .footer ul {
	display: flex;
	gap: 20px;
	justify-content: center;
}
#fullmenu .footer ul a {
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
}
#fullmenu .footer ul a:hover {
	opacity: 0.7;
}
#fullmenu .footer ul img {
	display: block;
}
#fullmenu .footer p {
	margin-top: 20px;
	font-size: min(3.7333333333vw, 14px);
	line-height: 1.2;
	text-align: center;
}

#sitetitle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 67vh;
	max-height: 655px;
	background: #fff;
}
.sp #sitetitle {
	padding: 110px 20px 70px;
	height: auto;
}
#sitetitle h1 {
	margin: 0px;
	padding: 0px;
}
#sitetitle img {
	display: block;
	width: auto;
	height: 50vh;
	max-height: 294px;
}
.sp #sitetitle img {
	width: 100%;
	max-width: 596px;
	height: auto;
}
#sitetitle .en img {
	max-height: 214px;
}
#sitetitle p {
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-size: min(1.1522633745vw, 14px);
	line-height: 1;
	font-weight: 500;
	color: #000000;
}
.sp #sitetitle p {
	font-size: min(3.5101587779vw, 13.163095417px);
}

#bg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -5;
}
#bg:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 75%;
	background: -moz-linear-gradient(top, rgba(0, 87, 164, 0) 0%, #0057a4 100%);
	background: -webkit-linear-gradient(top, rgba(0, 87, 164, 0) 0%, #0057a4 100%);
	background: linear-gradient(to bottom, rgba(0, 87, 164, 0) 0%, #0057a4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000057a4', endColorstr='#0057a4',GradientType=0 );
	mix-blend-mode: screen;
}
#bg video {
	position: absolute;
	left: 50%;
	top: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}
.sp #bg video {
	height: 100%;
}

main {
	display: block;
}
main .imagebox {
	display: flex;
}
.sp main .imagebox.spcol1 {
	display: block;
}
.sp main .imagebox.spcol1 > * {
	display: block;
	width: auto !important;
}
.sp main .imagebox.spcol1 > * + * {
	padding-top: 20px;
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.sp main .imagebox.spcol1 > .image img,
.sp main .imagebox.spcol1 > .image > a {
	display: block;
	width: auto;
}
.sp main .imagebox.spcol1 > .image > *:not(img),
.sp main .imagebox.spcol1 > .image > *:not(a) {
	margin-left: auto;
	margin-right: auto;
}
.sp main .imagebox.spcol1 > .image > *:not(img).text,
.sp main .imagebox.spcol1 > .image > *:not(a).text {
	width: auto !important;
}
main .imagebox > * {
	margin-top: 0px !important;
}
main .imagebox > * + * {
	padding-left: min(20px, 1.646090535vw);
}
main .imagebox.reverse {
	flex-direction: row-reverse;
}
main .imagebox.reverse > * + * {
	padding-left: 0px;
	padding-right: min(20px, 1.646090535vw);
}
main .imagebox > *:not(.image) {
	width: 100%;
}
main .imagebox > .image {
	flex-shrink: 0;
}
main .imagebox > .image img,
main .imagebox > .image > a {
	display: block;
	width: 100%;
}
main .imagebox > .image p {
	width: auto !important;
}
main .imagebox > .image > * + img,
main .imagebox > .image > * + a {
	margin-top: 10px;
}
main .image img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}
main .youtube {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
main .youtube.w800 {
	max-width: 800px;
}
main .youtube.w960 {
	max-width: 960px;
}
main .youtube > div {
	position: relative;
	padding-top: 56.25%;
}
main .youtube > div > iframe,
main .youtube > div > video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
}
main .column {
	display: flex;
	gap: 20px;
}

.ovs #overview > div {
	position: fixed;
	bottom: -150px;
	left: 50%;
	transform: translateX(-50%);
}
#overview > div {
	position: relative;
	width: 100%;
	max-width: 1335px;
	margin: auto;
	padding: 100px 60px 400px;
	min-height: calc(100vh + 150px);
}
.tablet #overview > div {
	padding: 50px 30px 200px;
}
.sp #overview > div {
	padding: 50px 22.5px 200px;
}
#overview > div:after {
	content: "";
	display: block;
	position: absolute;
	width: 100px;
	height: 144px;
	bottom: 180px;
	left: 50%;
	margin-left: -50px;
	background: url(../images/scroll.png) no-repeat center center;
}
.sp #overview > div:after {
	display: none;
}
#overview .column {
	display: flex;
	flex-wrap: wrap;
	gap: min(50px, 4.1152263374vw) min(45px, 3.7037037037vw);
}
.sp #overview .column {
	gap: min(45px, 12vw);
}
#overview .column > div {
	width: calc((100% - min(45px, 45/1215*100vw)) / 2);
}
.sp #overview .column > div {
	width: 100%;
}
#overview .column > div.size2 {
	width: 100%;
}
#overview .title {
	margin-bottom: 25px;
	font-size: min(2.633744856vw, 32px);
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
}
.sp #overview .title {
	font-size: min(6.6346666667vw, 24.88px);
}
#overview p {
	font-size: min(1.4814814815vw, 18px);
	line-height: 2;
	font-weight: 500;
	color: #fff;
}
.sp #overview p {
	font-size: min(4.2967192587vw, 16.1126972201px);
}

#index {
	position: relative;
	background: #0057A4;
}
.ids #index > div {
	position: fixed;
	bottom: -150px;
	left: 50%;
	transform: translateX(-50%);
}
#index > div {
	position: relative;
	width: 100%;
	max-width: 1335px;
	margin: auto;
	padding: 100px 60px 250px;
	min-height: calc(100vh + 150px);
}
.tablet #index > div {
	padding: 50px 30px 125px;
}
.sp #index > div {
	padding: 50px 22.5px 125px;
}
#index.show .headding {
	opacity: 1;
	transform: translateY(0%);
	transition: opacity 800ms, transform 800ms;
}
#index.show .list li {
	opacity: 1;
	transform: translateY(0%);
}
#index.show .list li:nth-child(1) {
	transition: opacity 600ms 675ms, transform 600ms 675ms;
}
#index.show .list li:nth-child(2) {
	transition: opacity 600ms 750ms, transform 600ms 750ms;
}
#index.show .list li:nth-child(3) {
	transition: opacity 600ms 825ms, transform 600ms 825ms;
}
#index.show .list li:nth-child(4) {
	transition: opacity 600ms 900ms, transform 600ms 900ms;
}
#index.show .list li:nth-child(5) {
	transition: opacity 600ms 975ms, transform 600ms 975ms;
}
#index.show .list li:nth-child(6) {
	transition: opacity 600ms 1050ms, transform 600ms 1050ms;
}
#index.show .list li:nth-child(7) {
	transition: opacity 600ms 1125ms, transform 600ms 1125ms;
}
#index.show .list li:nth-child(8) {
	transition: opacity 600ms 1200ms, transform 600ms 1200ms;
}
#index.show .list li:nth-child(9) {
	transition: opacity 600ms 1275ms, transform 600ms 1275ms;
}
#index .headding {
	margin-bottom: 50px;
	font-size: min(3.950617284vw, 48px);
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
	text-align: center;
	opacity: 0;
	transform: translateY(80%);
	transition: opacity 0ms 600ms, transform 0ms 600ms;
}
.sp #index .headding {
	font-size: min(8.614194841vw, 32.3032306536px);
}
#index .list ul {
	display: flex;
	flex-wrap: wrap;
	gap: min(45px, 3.7037037037vw);
}
#index .list li {
	width: calc((100% - min(45px, 45/1215*100vw) * 2) / 3);
	opacity: 0;
	transform: translateY(20%);
}
.sp #index .list li {
	width: calc((100% - min(45px, 45/1215*100vw)) / 2);
}
#index .list li:not(.totop) a {
	position: relative;
	display: block;
	overflow: hidden;
	transition: border-radius 400ms;
}
#index .list li:not(.totop) a:hover {
	border-radius: 50px;
}
#index .list li:not(.totop) a:hover:after {
	background: rgba(72, 161, 240, 0.5);
	mix-blend-mode: multiply;
	transition: background 400ms;
}
#index .list li:not(.totop) a:hover .image img {
	filter: blur(0px);
}
#index .list li:not(.totop) a:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: rgba(0, 0, 0, 0.1);
	z-index: 1;
	mix-blend-mode: multiply;
	transition: background 400ms;
}
#index .list li:not(.totop) a canvas {
	z-index: 0 !important;
}
#index .list li:not(.totop) a .image {
	position: relative;
	z-index: 0;
}
#index .list li:not(.totop) a .image img {
	filter: blur(4px);
	transition: filter 400ms;
}
#index .list li:not(.totop) a .body {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 5;
}
#index .list li:not(.totop) a .phase {
	max-width: 22.9333333333%;
}
#index .list li:not(.totop) a .phase img {
	display: block;
	width: 100%;
	height: auto;
}
#index .list li:not(.totop) a .title {
	margin-top: 10px;
	font-size: min(2.633744856vw, 32px);
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
}
.sp #index .list li:not(.totop) a .title {
	font-size: min(4.8vw, 18px);
}
#index .list li:not(.totop) a .title.small {
	font-size: min(2.304526749vw, 28px);
}
.sp #index .list li:not(.totop) a .title.small {
	font-size: min(3.7333333333vw, 14px);
}
#index li.totop {
	display: flex;
	align-items: center;
	justify-content: center;
}
.sp #index li.totop {
	width: 100%;
	padding: 20px 0px;
}
#index li.totop a {
	font-size: min(1.975308642vw, 24px);
	line-height: 1.3;
	font-weight: 500;
	color: #fff;
	position: relative;
	display: inline-block;
}
.sp #index li.totop a {
	font-size: min(5.3748620085vw, 20.1557325319px);
}
#index li.totop a:before {
	content: "";
	display: block;
	position: absolute;
	bottom: calc(0.15em - 5px);
	left: 0px;
	width: 100%;
	height: 1px;
	background: #fff;
	transition: 0.2s;
	transform: scale(0);
}
#index li.totop a:hover:before {
	transform: scale(1);
}

#indicator {
	position: fixed;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1200ms;
}
#indicator.show {
	opacity: 1;
	pointer-events: auto;
}
#indicator:before {
	content: "";
	display: block;
	position: absolute;
	width: 30px;
	height: calc(100% + 20px);
	z-index: -1;
	right: -10px;
	top: -10px;
}
#indicator:after {
	content: "";
	display: block;
	position: fixed;
	top: 50%;
	right: -50px;
	margin-top: -50vh;
	width: calc(100% + 150px);
	height: 100vh;
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 25%, white 100%);
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 25%, white 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 25%, white 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
	z-index: -2;
	opacity: 0;
	transform: translateX(100%);
	transition: opacity 400ms, transform 400ms;
	pointer-events: none;
}
.pc #indicator:hover:after {
	transform: translateX(0%);
	opacity: 1;
}
.pc #indicator:hover ul {
	padding-left: 20px;
	width: 100%;
}
.spc #indicator {
	right: 20px;
}
.sp #indicator {
	display: none;
}
#indicator ul {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 15px;
	margin-right: 0;
	margin-left: auto;
	padding-left: 20px;
	width: 100%;
	overflow: hidden;
	transition: padding 400ms, width 400ms;
}
.pc #indicator ul {
	padding-left: 0px;
	width: 10px;
}
#indicator a {
	display: block;
	position: relative;
	width: 9em;
	padding-right: 10px;
	font-size: min(1.1522633745vw, 14px);
	line-height: 1;
	font-weight: 700;
	color: #BCBCBC;
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
	transition: opacity 0.2s, margin 400ms, width 400ms, color 400ms;
}
.sp #indicator a {
	font-size: min(3.5101587779vw, 13.163095417px);
}
#indicator a:hover {
	opacity: 0.7;
}
#indicator a:before {
	content: attr(data-phase);
	display: block;
	margin-bottom: 2px;
	padding: 0px 0px 4px;
	font-size: min(0.987654321vw, 12px);
	line-height: 1;
	border-bottom: 1px solid #BCBCBC;
	transition: border 400ms;
}
.sp #indicator a:before {
	font-size: min(3.0956734285vw, 11.6087753569px);
}
#indicator a:after {
	content: "";
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	right: 0px;
	top: calc(1em + 5px);
	margin-top: -5px;
	font-size: min(0.987654321vw, 12px);
	line-height: 1;
	background: #BCBCBC;
	border-radius: 50%;
	transition: background 400ms;
}
.sp #indicator a:after {
	font-size: min(3.0956734285vw, 11.6087753569px);
}
#indicator .current a {
	margin-left: -20px;
	width: calc(9em + 20px);
	color: #48A1F0;
}
#indicator .current a:before {
	border-bottom-color: #48A1F0;
}
#indicator .current a:after {
	background: #48A1F0;
}

.wave {
	position: relative;
	margin-top: -150px;
	pointer-events: none;
}
.wave svg {
	display: block;
}

.page {
	position: relative;
	min-height: 120vh;
	background: #fff;
}
.page > div {
	position: relative;
	width: 100%;
	max-width: 1335px;
	margin: auto;
	padding: 80px 60px 100px;
}
.tablet .page > div {
	padding: 40px 30px 50px;
}
.sp .page > div {
	padding: 40px 22.5px 50px;
}
.tablet .page > div {
	padding-left: 60px;
	padding-right: 60px;
}
.sp .page > div {
	padding: 100px 22.5px;
}
.page.current .cover {
	opacity: 1;
	transition: opacity 800ms;
	z-index: 15;
}
.page.current .cover img {
	opacity: 1;
	transform: translateX(0%);
	transition: opacity 800ms 200ms, transform 800ms 200ms;
}
.page .cover {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0%;
	left: 0%;
	width: 46.25vw;
	height: 100vh;
	background: none no-repeat center center;
	background-size: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 800ms;
	z-index: 10;
}
.tablet .page .cover {
	width: 41vw;
}
.sp .page .cover {
	position: relative;
	width: calc(100% + 45px);
	height: 228px;
	margin-left: -22.5px;
	opacity: 1;
}
.page .cover:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(72, 161, 240, 0.5);
	mix-blend-mode: overlay;
}
.page .cover img {
	display: block;
	opacity: 0;
	transform: translateX(-35%);
	transition: opacity 0ms 600ms, transform 0ms 600ms;
}
.sp .page .cover img {
	width: 124px;
	height: auto;
	opacity: 1;
	transform: translateX(0%);
}
.page .body {
	margin-left: min(630px, 51.8518518519vw);
}
.spc .page .body {
	margin-left: 50%;
}
.tablet .page .body {
	margin-left: 45%;
}
.sp .page .body {
	margin-left: 0px;
	padding-top: 40px;
}
.page#PHASE01 .cover {
	background-image: url(../../images/c01.jpg);
}
.page#PHASE02 .cover {
	background-image: url(../../images/c02.jpg);
}
.page#PHASE03 .cover {
	background-image: url(../../images/c03.jpg);
}
.page#PHASE04 .cover {
	background-image: url(../../images/c04.jpg);
}
.page#PHASE05 .cover {
	background-image: url(../../images/c05.jpg);
}
.page#PHASE06 .cover {
	background-image: url(../../images/c06.jpg);
}
.page#PHASE07 .cover {
	background-image: url(../../images/c07.jpg);
}
.page#PHASE08 .cover {
	background-image: url(../../images/c08.jpg);
}
.sp .page#PHASE01 .cover {
	background-image: url(../../images/c01s.jpg);
}
.sp .page#PHASE02 .cover {
	background-image: url(../../images/c02s.jpg);
}
.sp .page#PHASE03 .cover {
	background-image: url(../../images/c03s.jpg);
}
.sp .page#PHASE04 .cover {
	background-image: url(../../images/c04s.jpg);
}
.sp .page#PHASE05 .cover {
	background-image: url(../../images/c05s.jpg);
}
.sp .page#PHASE06 .cover {
	background-image: url(../../images/c06s.jpg);
}
.sp .page#PHASE07 .cover {
	background-image: url(../../images/c07s.jpg);
}
.sp .page#PHASE08 .cover {
	background-image: url(../../images/c08s.jpg);
}
.page h2 {
	margin: 0px 0px 30px;
	padding: 0px;
	font-size: min(5.2674897119vw, 64px);
	line-height: 1.3;
	font-weight: 500;
}
.sp .page h2 {
	font-size: min(9.9967102429vw, 37.487663411px);
}
.page h2:after {
	content: "";
	display: block;
	width: 60px;
	height: 8px;
	margin-top: 20px;
	background: #0057a4;
	background: -moz-linear-gradient(left, #0057a4 0%, #00d8ff 100%);
	background: -webkit-linear-gradient(left, #0057a4 0%, #00d8ff 100%);
	background: linear-gradient(to right, #0057a4 0%, #00d8ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0057a4', endColorstr='#00d8ff',GradientType=1 );
	border-radius: 4px;
}
.page .lead p {
	font-size: min(1.975308642vw, 24px);
	line-height: 2;
	font-weight: 500;
}
.sp .page .lead p {
	font-size: min(5.3748620085vw, 20.1557325319px);
}
.page .contents {
	margin-top: 50px;
	border-top: 1px solid #E0E0E0;
}
.page .contents > div {
	padding: 20px 0px;
	border-bottom: 1px solid #E0E0E0;
}
.page .contents h3 {
	margin: 0px 0px 10px;
	padding: 0px;
	font-size: min(1.975308642vw, 24px);
	line-height: 1.3;
	font-weight: 500;
	color: #48A1F0;
}
.sp .page .contents h3 {
	font-size: min(5.3748620085vw, 20.1557325319px);
}
.page .contents p {
	font-size: min(1.316872428vw, 16px);
	line-height: 2;
	font-weight: 500;
}
.sp .page .contents p {
	font-size: min(3.9104112196vw, 14.6640420736px);
}
.page .contents .image {
	text-align: center;
}
.page .contents .image a {
	display: inline-block;
	overflow: hidden;
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
}
.page .contents .image a:hover {
	opacity: 0.7;
}
.page .contents .image a.popmovie {
	position: relative;
	border-radius: 20px;
}
.page .contents .image a.popmovie:after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url(../images/movie.svg) no-repeat center center;
}
.page .glossary {
	margin-top: 50px;
}
.page .glossary h3 {
	margin: 0px 0px 20px;
	padding: 0px 0px 10px;
	font-size: min(1.316872428vw, 16px);
	line-height: 1;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid #48A1F0;
}
.sp .page .glossary h3 {
	font-size: min(3.9104112196vw, 14.6640420736px);
}
.page .glossary h3 span {
	display: inline-block;
	padding: 2px 16px 4px;
	background: #0057A4;
	border-radius: 5px;
}
.page .glossary dt {
	font-size: min(1.316872428vw, 16px);
	line-height: 1.3;
	font-weight: 700;
	color: #0057A4;
}
.sp .page .glossary dt {
	font-size: min(3.9104112196vw, 14.6640420736px);
}
.page .glossary * + dt {
	margin-top: 20px;
}
.page .glossary dd {
	margin: 10px 0px 0px;
	font-size: min(1.316872428vw, 16px);
	line-height: 1.5;
}
.sp .page .glossary dd {
	font-size: min(3.9104112196vw, 14.6640420736px);
}

#footer {
	min-height: 100vh;
}
#footer > div {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-top: 200px;
	padding-bottom: 200px;
}
.sp #footer > div {
	display: block;
	padding-top: 100px;
	padding-bottom: 40px;
}
#footer .cover {
	background: #48A1F0;
}
#footer .cover img {
	max-width: 80%;
}
.sp #footer .cover img {
	width: 300px;
}
#footer .body p {
	font-size: min(1.4814814815vw, 18px);
	line-height: 2.5;
	font-weight: 700;
}
.sp #footer .body p {
	font-size: min(4.2967192587vw, 16.1126972201px);
}
#footer .footer {
	position: absolute;
	bottom: 50px;
	left: min(922px, 75.8847736626vw);
	transform: translateX(-50%);
}
.spc #footer .footer {
	left: 50%;
	transform: translateX(0%);
}
.tablet #footer .footer {
	left: 45%;
	transform: translateX(0%);
}
.sp #footer .footer {
	position: static;
	margin-top: 40px;
}
#footer .footer ul {
	display: flex;
	gap: 20px;
	justify-content: center;
}
.spc #footer .footer ul {
	justify-content: flex-start;
}
.sp #footer .footer ul {
	justify-content: center;
}
#footer .footer ul a {
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
}
#footer .footer ul a:hover {
	opacity: 0.7;
}
#footer .footer ul img {
	display: block;
}
#footer .footer p {
	margin-top: 20px;
	font-size: min(1.316872428vw, 16px);
	line-height: 1.2;
	white-space: nowrap;
}
.sp #footer .footer p {
	font-size: min(3.9104112196vw, 14.6640420736px);
}
.sp #footer .footer p {
	text-align: center;
}

#toindex {
	position: fixed;
	bottom: 50px;
	right: 50px;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	transition: opacity 600ms;
}
.tablet #toindex {
	right: 30px;
}
#toindex.show {
	opacity: 1;
	pointer-events: auto;
}
.sp #toindex {
	display: none;
}
#toindex a {
	display: block;
	position: relative;
	width: 44px;
	height: 44px;
	background: url(../images/toindex.svg);
	overflow: hidden;
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
}
#toindex a:hover {
	opacity: 0.7;
}
#toindex a span {
	display: block;
	text-indent: -1000px;
	overflow: hidden;
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	-webkit-transform: translate3d(0, 0, 0);
}

#cboxWrapper {
	max-width: none;
}

#cboxOverlay {
	position: fixed;
	width: 100%;
	height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
	clear: left;
}

#cboxContent {
	position: relative;
}

#cboxLoadedContent {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#cboxTitle {
	margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
	cursor: pointer;
}

.cboxPhoto {
	float: left;
	margin: auto;
	border: 0;
	display: block;
	max-width: none;
	-ms-interpolation-mode: bicubic;
}

.cboxIframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
}

#colorbox, #cboxContent, #cboxLoadedContent {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
	background: #333;
	opacity: 0.8;
	filter: alpha(opacity=80);
}
#cboxOverlay:before {
	position: absolute;
	content: "";
	display: block;
	width: min(60px, 5vw);
	height: 60px;
	top: min(50px, 3vw);
	right: 3.75vw;
	background: url(../images/popclose.svg) no-repeat top center;
	background-size: 100% auto;
	transform: translateX(50%);
}

#colorbox {
	outline: 0;
}

#cboxContent {
	background: #fff;
}

.cboxIframe {
	background: #000000;
}

#cboxError {
	padding: 50px;
	border: 1px solid #ccc;
}

#cboxLoadedContent {
	border: 0px solid #000;
	background: #fff;
}

#cboxTitle {
	position: absolute;
	top: -20px;
	left: 0;
	color: #ccc;
}

#cboxCurrent {
	position: absolute;
	top: -10px;
	left: 50%;
	font-size: min(1.4814814815vw, 18px);
	font-weight: bold;
	color: #ffffff;
	-webkit-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
	-webkit-transition: 400ms;
	transition: 400ms;
	opacity: 0;
}
.sp #cboxCurrent {
	font-size: min(4.2967192587vw, 16.1126972201px);
}
#cboxCurrent.view {
	opacity: 1;
}

#cboxLoadingGraphic {
	background: url(../images/loading.gif) no-repeat center center;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
	border: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
	width: auto;
	background: none;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
	outline: 0;
}

#cboxSlideshow {
	position: absolute;
	top: -20px;
	right: 90px;
	color: #fff;
}

#cboxPrevious {
	display: block;
	position: absolute;
	width: 80px;
	height: 80px;
	top: 50%;
	left: -120px;
	margin-top: -40px;
	text-indent: -9999px;
	background: none no-repeat center center #48A1F0;
	border-radius: 50%;
	box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.3);
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
	z-index: 30;
	-webkit-transition: 400ms;
	transition: 400ms;
	opacity: 0;
}
#cboxPrevious:hover {
	opacity: 0.7;
}
#cboxPrevious.view {
	opacity: 1;
}
.pc #cboxPrevious {
	width: 64px;
	height: 64px;
	left: -84px;
	margin-top: -32px;
}
.sp #cboxPrevious {
	width: 50px;
	height: 50px;
	left: -40px;
	margin-top: -25px;
}

#cboxNext {
	display: block;
	position: absolute;
	width: 80px;
	height: 80px;
	top: 50%;
	right: -120px;
	margin-top: -40px;
	text-indent: -9999px;
	background: none no-repeat center center #48A1F0;
	border-radius: 50%;
	box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.3);
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
	z-index: 30;
	-webkit-transition: 400ms;
	transition: 400ms;
	opacity: 0;
}
#cboxNext:hover {
	opacity: 0.7;
}
#cboxNext.view {
	opacity: 1;
}
.pc #cboxNext {
	width: 64px;
	height: 64px;
	right: -84px;
	margin-top: -32px;
}
.sp #cboxNext {
	width: 50px;
	height: 50px;
	right: -40px;
	margin-top: -25px;
}

#cboxClose {
	position: absolute;
	display: none;
	top: 28px;
	right: 28px;
	width: 42px;
	height: 42px;
	text-indent: -9999px;
	background: url(../images/close.svg) no-repeat center center;
	transition: opacity 0.2s, background 0.2s;
	cursor: pointer;
	opacity: 0;
	z-index: 10;
}
#cboxClose:hover {
	opacity: 0.7;
}
.sp #cboxClose {
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	background-size: 100%;
}
#cboxClose.view {
	opacity: 1;
}

#colorbox #waiting {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: rgba(255, 255, 255, 0.7);
	z-index: 5;
}
#colorbox #waiting > div {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0px;
	padding: 20px;
	font-size: min(1.8106995885vw, 22px);
	line-height: 1.7;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.sp #colorbox #waiting > div {
	font-size: min(5.0286561483vw, 18.857460556px);
}
#colorbox #waiting > div span {
	display: block;
	margin: auto;
	width: 16px;
	height: 16px;
	background: url(../images/loading.gif) no-repeat center center;
}