@charset "Shift-JIS";

:root {
	--color-blue: #004EA1;
	/* --color-light-blue: #F3FBFF; */
	--color-light-blue: #edf8fe;
	--color-gray: #C6D0DF;
	--color-lower-base: #F0F2F5;
}

@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400 500 700;
	src: url('/common/font/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2') format("woff2-variations");
}




/*-------------------
base.css
-------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	line-height: 1;
}

img {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 0;
	font-size: 0;
	vertical-align: top;
}

html {
	width: 100%;
	height: 100%;
}

br{
	line-height: 0;
}

ul, li {
	list-style: none;
}

p, th, td, dd {
	font-style: normal;
	font-weight: 0;
	word-break: normal;
}

dd {
	word-break: break-all;
}

a {
	margin: 0;
	padding: 0;
	border: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	-webkit-transition: color .3s linear;
	transition: color .3s linear;
	text-decoration: none;
	color: #222222;
}

a:visited {
	color: #222222;
}

a:hover {
	/*opacity: 0.9;*/
}

body {
	background-color: #ffffff;
  font-family: "Noto Sans JP", serif;
	/*font-size: 13px;*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	font-weight: 500;
	font-feature-settings: "palt";
	letter-spacing: 0.05rem;
	position: relative;
	color: #333333;
}

/*
@font-face {
	font-family: 'Noto Sans CJK JP-Medium';
	src: url('../font/NotoSansCJKjp-Medium.eot');
	src: url('../font/NotoSansCJKjp-Medium.eot?#iefix') format('embedded-opentype'),
		url('../font/NotoSansCJKjp-Medium.woff2') format('woff2'),
		url('../font/NotoSansCJKjp-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Noto Sans CJK JP-Bold';
	src: url('../font/NotoSansCJKjp-Bold.eot');
	src: url('../font/NotoSansCJKjp-Bold.eot?#iefix') format('embedded-opentype'),
		url('../font/NotoSansCJKjp-Bold.woff2') format('woff2'),
		url('../font/NotoSansCJKjp-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
*/

.bold {
	/* font-family: 'Noto Sans CJK JP-Bold', 'Noto Sans Japanese', '????? Medium', '??????', '?????', 'Yu Gothic Medium', YuGothic, '?????? ProN', 'Hiragino Kaku Gothic ProN', '????', Meiryo, '?? ?????', 'MS PGothic', sans-serif; */
  font-family: "Noto Sans JP", serif;
	font-weight: 700;
}

@media screen and (min-width : 960px) {

	html {
		font-size: 18px;
		/* padding: 8.75rem 0 0 0; */
		padding: 8.4rem 0 0 0;
	}

	html.fzL {
		font-size: 28px;
		padding: 7.25rem 0 0 0;
	}
	html.fzM {
		font-size: 18px;
		padding: 8.4rem 0 0 0;
	}
	html.fzS {
		font-size: 16px;
		padding: 8.75rem 0 0 0;
	}

	html.fzL .fzL-only{
		display: block;
	}
	html:not(.fzL) .fzL-only{
		display: none;
	}
	


	/*
		html.fzL{
			font-size: 20px;
		}
		html.fzM{
			font-size: 16px;
		}
		html.fzS{
			font-size: 13px;
		}
*/

	/*layout style*/
	.pc {
		display: block;
	}

	.sp {
		display: none;
	}

	.transition {
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	.transition:hover {
		opacity: 0.7;
	}

	div.inner {
		position: relative;
		width: 90vw;
		margin: 0 auto;
		max-width: 1024px;
	}
	body:not(.top) #contents div.inner {
		max-width: 960px;
		z-index: 1;
	}

	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border: 1px solid var(--color-blue);
		border-radius: 100px;
		color: var(--color-blue);
		font-size: 1rem;
		line-height: 1.34;
		/* padding: 20px 0; */
		height: 3.223rem;
		position: relative;
		width: 100%;
		text-align: center;
	}
	.btn:visited{
		color: var(--color-blue);
	}
	.btn:hover,
	.btn:focus {
		background-color: var(--color-blue);
		color: #ffffff;
	}

	.btn::after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		aspect-ratio: 1 / 1;
		width: 1.111em;
		height: 1.111em;
		background-image: url('../img/icon_arrow_white.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translateY(-50%);
		transition: background-image 0.3s;
	}

	a.link-arrow {
		color: var(--color-blue);
		display: inline-block;
		vertical-align: top;
		font-size: 0.889rem;
		position: relative;
		padding-right: 1.5em;
		text-underline-offset: 0.3em;
	}
	a.link-arrow:hover {
		text-decoration: underline;
	}

	a.link-arrow::after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 0.889em;
		height: 0.889em;
		background-image: url('../img/icon_arrow_white.svg');
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}




	/* -------------------------------------------------------------------------------------------
	*
	* header
	*
	* ----------------------------------------------------------------------------------------- */

	header {
		background-color: #ffffff;
		position: fixed;
		top: 0;
		width: 100%;
		border-bottom: 1px solid #dadada;
		z-index: 5;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		opacity: 1;
		pointer-events: auto;
	}
	header.is-hidden {
		opacity: 0;
		pointer-events: none;
		/* transform: translateY(-100%); */
	}


	header div.inner {
		margin: 0 auto;
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	header div.container {
		overflow: hidden;
		height: 54px;
	}

	header div.container h1 {
		float: left;
		margin: 0 0 0 18px;
		height: 100%;
		display: flex;
		align-items: center;
	}

	header div.container h1 a,
	header div.container h1 a picture {
		display: flex;
		align-items: center;
	}

	header div.container h1 a img {
		width: 257px;
	}


	/* textsize */
	header div.container div#textsize {
		float: right;
		/* margin: 1.4rem 0 0 0; */
		display: flex;
		align-items: center;
		height: 100%;
		/* gap: 10px; */
	}

	header div.container div#textsize p {
		display: inline-block;
		vertical-align: middle;
		font-size: 0.778rem;
		line-height: 1;
		margin: 0 5px 0 0;
	}

	header div.container div#textsize a {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.778rem;
		letter-spacing: 0;
		line-height: 1;
		padding: 0.334rem;
		background-color: #eeeeee;
	}

	header div.container div#textsize a.textresizer-active {
		background-color: #197EC6;
		color: #ffffff;
	}




	/* langBtn */
	header div.container a.langBtn {
		float: right;
		display: block;
		font-size: 0.778rem;
		line-height: 1;
		padding: 0.3rem 0.4rem 0.35rem 0.4rem;
		margin: 2.3% 1.25rem 0 0;
		background-color: var(--color-blue);
		color: #ffffff;
	}



	/* logo_list */
	header div.container ul.logo_list {
		float: right;
		height: 100%;
		margin: 0 20px;
		padding: 0 0 0 20px;
		position: relative;
		display: flex;
		align-items: center;
	}

	header div.container ul.logo_list::before {
		content: '';
		display: block;
		width: 1px;
		height: 60%;
		background-color: #dadada;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}


	header div.container ul.logo_list li {
		display: inline-block;
		vertical-align: top;
	}

	header div.container ul.logo_list li:nth-of-type(n+2) {
		margin: 0 0 0 20px;
	}

	header div.container ul.logo_list li a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	header div.container ul.logo_list li a img {
		height: auto;
	}

	header div.container ul.logo_list li[data-name="mic"] a img {
		aspect-ratio: 76 / 26;
		width: 76px;
	}

	header div.container ul.logo_list li[data-name="meti"] a img {
		aspect-ratio: 119 / 35;
		width: 119px;
	}

	/* nav */
	header nav {
		border-top: 1px solid #dadada;
		box-sizing: border-box;
	}

	header nav ul.mega-menu {
		font-size: 0;
		letter-spacing: 0;
		display: flex;
	}

	header nav ul.mega-menu>li {
		display: inline-block;
		vertical-align: top;
		width: 25%;
	}

	header nav ul.mega-menu>li:nth-of-type(n+2) {
		padding: 0 0 0 1px;
	}


	header nav ul.mega-menu>li .menu-title {
		margin: 0;
		border: none;
		background: none;
		color: inherit;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;

		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		vertical-align: top;
		width: 100%;
		height: 5.334rem;
		padding: 16px 0 0 0;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		cursor: pointer;
		position: relative;
	}

	header nav ul.mega-menu>li:nth-of-type(n+2) .menu-title::before {
		content: '';
		display: block;
		width: 1px;
		height: 100%;
		background-color: #dadada;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}


	header nav ul.mega-menu>li .menu-title span {
		margin: 14px 0 0 0;
		font-size: 0.833rem;
		letter-spacing: 0.05em;
		line-height: 1.3;
		position: relative;
		display: inline-block;
		vertical-align: top;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	header nav ul.mega-menu>li.is-active .menu-title span {
		color: var(--color-blue);
	}

	header nav ul.mega-menu>li:hover .menu-title span,
	header nav ul.mega-menu>li.active:hover .menu-title span {
		/* color: #ffffff; */
	}

	header nav ul.mega-menu>li .menu-title span::before {
		content: '';
		display: inline-block;
		vertical-align: top;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		position: absolute;
		right: 0;
		left: 0;
		margin: auto;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	header nav ul.mega-menu>li[data-name="about"] .menu-title span::before {
		width: 23px;
		height: 23px;
		background-image: url(../img/nav_icon_about.svg);
		top: -36px;
	}

	header nav ul.mega-menu>li[data-name="flow"] .menu-title span::before {
		width: 27px;
		height: 23px;
		background-image: url(../img/nav_icon_flow.svg);
		top: -36px;
	}

	header nav ul.mega-menu>li[data-name="collaboration"] .menu-title span::before {
		width: 40px;
		height: 25px;
		background-image: url(../img/nav_icon_collaboration.svg);
		top: -28px;
	}

	header nav ul.mega-menu>li[data-name="gallery"] .menu-title span::before {
		width: 27px;
		height: 23px;
		background-image: url(../img/nav_icon_gallery.svg);
		top: -28px;
	}

	header nav ul.mega-menu>li .menu-title span::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -0.4rem;
		height: 4px;
		border-radius: 20px;
		background: linear-gradient(90deg, #57C4F5 0%, #0580F2 100%);
		transform-origin: left center;
		transform: scaleX(0);
		transition: transform 0.3s;
	}

	header nav ul.mega-menu>li.is-active .menu-title span::after,
	header nav ul.mega-menu>li .menu-title[aria-expanded="true"] p::after {
		transform: scaleX(1);
	}

	/* Mega Drop Menu */
	header nav ul.mega-menu {
		position: relative;
		display: flex;
		justify-content: center;
		background: none;
		z-index: 10;
	}

	header nav ul.mega-menu>li>.submenu a.lower-top {
		margin: 0 auto 20px auto;
	}

	header nav ul.mega-menu>li.has-submenu .menu-title[aria-expanded="true"]+.submenu {
		display: block;
		opacity: 1;
		pointer-events: auto;
	}

	header nav ul.mega-menu>li>.submenu {
		display: none;
		position: absolute;
		left: 0;
		top: 100%;
		min-width: 100vw;
		background: #ffffff;
		border-top: 1px solid #dadada;
		padding: 40px 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s;
		z-index: 20;
	}

	header nav ul.mega-menu>li>.submenu .inner {
		width: 90vw;
		max-width: 960px;
		margin: 0 auto;
		box-sizing: border-box;
		text-align: left;
	}

	header nav ul.mega-menu>li>.submenu ul {
		display: flex;
		justify-content: center;
		margin: 0 auto;
		max-width: 960px;
	}

	header nav ul.mega-menu>li>.submenu li {
		width: 265px;
	}

	header nav ul.mega-menu>li>.submenu li:nth-of-type(n+2) {
		border-left: 1px solid #E5E5E5;
		margin: 0 0 0 40px;
		padding: 0 0 0 40px;
	}

	header nav ul.mega-menu>li>.submenu li a {
		display: block;
		font-size: 0.95rem;
		text-align: left;
	}

	header nav ul.mega-menu>li>.submenu li a figure {
		display: flex;
		flex-direction: column;
	}

	header nav ul.mega-menu>li>.submenu li a figure img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		height: auto;
	}

	header nav ul.mega-menu>li>.submenu li a figure figcaption {
		color: var(--color-blue);
		font-size: 0.778rem;
		margin: 14px 0 0 0;
		text-underline-offset: 0.3em;
	}

	header nav ul.mega-menu>li>.submenu li a:hover figure figcaption {
		text-decoration: underline;
	}









	/* -------------------------------------------------------------------------------------------
	*
	* pageGuide
	*
	* ----------------------------------------------------------------------------------------- */

	#pageGuide {
		padding: 0.625rem;
		box-sizing: border-box;
	}

	#pageGuide ul {
		font-size: 0;
		letter-spacing: 0;
	}

	#pageGuide ul li {
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}

	#pageGuide ul li:nth-of-type(n+2) {
		padding: 0 0 0 0.5rem;
		margin: 0 0 0 0.6rem;
	}

	#pageGuide ul li:nth-of-type(n+2)::before {
		content: "";
		position: absolute;
		top: 0.225rem;
		left: -0.3rem;
		width: 0.3rem;
		height: 0.3rem;
		border-top: 1px solid #000000;
		border-right: 1px solid #000000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#pageGuide ul li a {
		font-size: 0.75rem;
	}

	#pageGuide ul li:nth-of-type(1) a {
		color: var(--color-blue);
	}



	/* -------------------------------------------------------------------------------------------
	*
	* headline
	*
	* ----------------------------------------------------------------------------------------- */

	#headline {
		text-align: center;
		background-color: #006EC3;
		background-image: url(../img/headline_bg_pc.png);
		background-repeat: no-repeat;
		background-position: top center;
		/* background-size: auto 100%; */
		background-size: cover;
		height: 220px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#headline h2 {
		display: flex;
		flex-direction: column;
	}

	#headline h2 .icon {
		margin: 0 0 10px 0;
	}

	#headline h2 .icon img {
		display: inline-block;
		vertical-align: top;
	}

	#headline.about h2 .icon img {
		width: 46px;
		height: 46px;
	}

	#headline.collaboration h2 .icon img {
		width: 77px;
		height: 48px;
	}

	#headline.flow h2 .icon img {
		width: 54px;
		height: 47px;
	}

	#headline.internet h2 .icon img {
		width: 66px;
		height: 60px;
	}

	#headline.faq h2 .icon img {
		width: 65px;
		height: 59px;
	}

	#headline.gallery h2 .icon img {
		width: 55px;
		height: 46px;
	}

	#headline.info h2 .icon img {
		width: 90px;
		height: 50px;
	}

	#headline h2 .title {
		color: #ffffff;
		font-size: 1.556rem;
		letter-spacing: 0.05em;
		line-height: 1.6;
		padding: 0 0 10px 0;
		position: relative;
	}
	#headline h2 .title::after {
		content: '';
		display: block;
		width: 100%;
		height: 4px;
		background-color: #ffffff;
		border-radius: 30px;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}


	/* -------------------------------------------------------------------------------------------
	*
	* contents
	*
	* ----------------------------------------------------------------------------------------- */

	#contents {
		position: relative;
		text-align: left;
	}
	body:not(.top) #contents{
		background-color: var(--color-lower-base);
		padding: 80px 0 120px 0;
	}
	body:not(.top) #contents::before,
	body:not(.top) #contents::after {
		content: '';
		display: block;
		width: 537px;
		height: 402px;
		position: absolute;
		background-repeat: no-repeat;
		background-size: contain;
	}
	body:not(.top) #contents::before {
		background-image: url(../img/contents_bg_head.png);
		right: 0;
		top: 0;
	}
	body:not(.top) #contents::after {
		background-image: url(../img/contents_bg_bottom.png);
		left: 0;
		bottom: 0;
	}

	body:not(.top):not(.flow) #contents section:not(.anchor) h3 {
		color: #ffffff;
		font-size: 1.111rem;
		line-height: 1.6;
		margin: 0 0 1.667rem 0;
		padding: 0.556rem 0.889rem;
		background: linear-gradient(to right, #056CD8 0%, #57C4F5 100%);
	}

	body.faq #contents h3 {
		margin: 0 0 2.5rem 0;
	}

	body:not(.top) #contents h4{
		margin: 0 0 0.889rem 0;
	}
	body:not(.top) #contents h4 span{
		display: inline-block;
		vertical-align: top;
		color: var(--color-blue);
		font-size: 1.111rem;
		line-height: 1.6;
		padding: 0 0 0.444rem 1.222rem;
		position: relative;
	}
	body:not(.top) #contents h4 span::before{
		content: '';
		display: block;
		background: linear-gradient(to left, #056CD8 0%, #57C4F5 100%);
		box-sizing: border-box;
		width: 0.889rem;
		height: 0.889rem;
		border-radius: 100px;
		position: absolute;
		top: 0.5rem; left: 0;
	}
	body:not(.top) #contents h4 span::after{
		content: '';
		display: block;
		background: linear-gradient(to left, #056CD8 0%, #57C4F5 100%);
		box-sizing: border-box;
		width: 100%;
		height: 0.222rem;
		border-radius: 100px;
		position: absolute;
		bottom: 0; left: 0;
	}



	/* -------------------------------------------------------------------------------------------
	*
	* pageTop
	*
	* ----------------------------------------------------------------------------------------- */

	#pageTop {
		position: fixed;
		bottom: 2rem;
		right: 2rem;
		z-index: 1;
	}

	#pageTop a {
		display: inline-block;
		vertical-align: top;
	}

	#pageTop a img {
		width: 3.75rem;
		height: 3.75rem;
	}




	/* -------------------------------------------------------------------------------------------
	*
	* footer
	*
	* ----------------------------------------------------------------------------------------- */

	footer {
		border-top: 1px solid #dadada;
		background-color: #ffffff;
		text-align: center;
	}

	footer div.description div.inner{
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
		padding: 0 60px;
	}


	footer .sns {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 26px 0;
	}

	footer .sns p {
		display: flex;
		align-items: center;
		font-size: 1em;
		font-weight: 500;
	}

	footer .sns ul {
		border-left: 1px solid #dadada;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 36px;
		padding: 0 0 0 28px;
		margin: 0 0 0 28px;
	}

	footer .sns ul li {
		width: 38px;
		height: 38px;
	}

	footer .sns ul li[data-name="YouTube"] {
		width: 40px;
		height: 29px;
	}

	footer .sns ul li a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	footer .sns ul li a img {
		width: 100%;
		height: auto;
	}


	footer div.description {
		background-color: var(--color-light-blue);
		padding: 24px 0;
		font-size: 0;
		letter-spacing: 0;
		text-align: left;
		position: relative;
	}


	footer div.description dl {
		display: inline-block;
		vertical-align: top;
		text-align: left;
		box-sizing: border-box;
		position: relative;
	}

	footer div.description dl.n1 {
		width: 18%;
	}

	footer div.description dl.n2 {
		width: 21.4%;
	}

	footer div.description dl.n3 {
		width: 56%;
	}

	footer div.description dl:nth-of-type(n+2) {
		padding: 0 0 0 2%;
		margin: 0 0 0 2%;
	}

	footer div.description dl:nth-of-type(n+2)::before {
		content: '';
		display: block;
		width: 1px;
		height: 100%;
		background-image: url(../img/dot_line_vertical.png);
		background-repeat: repeat-y;
		background-position: 0 0;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 0;
	}

	footer div.description dl dt {
		font-size: 0.875rem;
		color: var(--color-blue);
		margin: 0 0 0.625rem 0;
	}

	footer div.description dl dd {
		font-size: 0.75rem;
		line-height: 1.6;
		text-align: justify;
	}


	footer div.container {
		padding: 60px 0 30px 0;
	}

	footer div.container .inner {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		padding: 0 60px;
		width: 100%;
		max-width: 100%;
	}

	footer div.container div.info {
		grid-area: 1 / 1 / 2 / 2;
		text-align: left;
	}

	footer div.container div.info .info_logo {
		margin: 0 0 11px 0;
	}

	footer div.container div.info .info_logo img {
		width: 188px;
		height: auto;
	}

	footer div.container div.info .info_icon {
		aspect-ratio: 1 / 1;
		display: inline-block;
		vertical-align: middle;
		width: 2.25rem;
	}

	footer div.container div.info .info_icon img {
		width: 100%;
		height: auto;
	}

	footer div.container div.info p {
		display: inline-block;
		vertical-align: middle;
		font-size: 0.875rem;
		line-height: 1.6;
	}

	footer div.container ul {
		font-size: 0;
		text-align: left;
		display: flex;
		flex-direction: column;
		gap: 0.889rem;
	}

	footer div.container div.footer_nav {
		grid-area: 1 / 2 / 2 / 3;
		display: flex;
		gap: 42px;
	}

	footer div.container ul li a {
		font-size: 0.778rem;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		text-underline-offset: 0.3em;
	}

	footer div.container ul li a:hover {
		text-decoration: underline;
	}

	footer div.container ul li a[target="_blank"]::after {
		content: "";
		display: inline-block;
		vertical-align: middle;
		margin: -0.1875rem 0 0 0.25rem;
		width: 0.625rem;
		height: 0.625rem;
		background-image: url(../img/icon_blank.svg);
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
	}

	footer div.container ul.other {
		gap: 1.444rem;
		margin: 1em 0 0 0;
	}

	footer div.container ul.other li img {
		max-width: 420px;
		height: auto;
	}




	footer div.container p.copy {
		grid-area: 2 / 1 / 3 / 2;
		font-size: 0.6875rem;
		line-height: 1.6;
		text-align: left;
		align-self: end;
		margin: 0 0 2rem 0;
	}





}

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

	html {
		font-size: 4.6vw;
		padding: 18vw 0 0 0;
	}

	/*
		html.fzL{
			font-size: 4.5vw;
		}
		html.fzM{
			font-size: 4vw;
		}
		html.fzS{
			font-size: 3.6vw;
		}
*/

	body {
		letter-spacing: 0.06rem;
	}
	body.is-fixed {
		overflow: hidden;
		height: 100%;
	}

	.bold {
		font-weight: 600;
	}

	/*layout style*/
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	.fzL-only{
		display: none;
	}


	img {
		width: 100%;
	}

	div.inner {
		position: relative;
		width: 90vw;
		margin: 0 auto;
	}
	body:not(.top) #contents div.inner {
		z-index: 1;
	}

	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border: 1px solid var(--color-blue);
		border-radius: 100px;
		color: var(--color-blue);
		font-size: 3.846vw;
		line-height: 1.34;
		/* padding: 20px 0; */
		height: 15.385vw;
		position: relative;
		width: 100%;
		text-align: center;
	}
	.btn:visited{
		color: var(--color-blue);
	}
	.btn:hover,
	.btn:focus {
		background-color: var(--color-blue);
		color: #ffffff;
	}

	.btn::after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		aspect-ratio: 1 / 1;
		width: 6.15vw;
		height: 6.15vw;
		background-image: url('../img/icon_arrow_white.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translateY(-50%);
		transition: background-image 0.3s;
	}

	a.link-arrow {
		color: var(--color-blue);
		display: inline-block;
		vertical-align: top;
		font-size: 0.889rem;
		position: relative;
		padding-right: 1.5em;
		text-underline-offset: 0.3em;
	}
	a.link-arrow:hover {
		text-decoration: underline;
	}

	a.link-arrow::after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 0.889em;
		height: 0.889em;
		background-image: url('../img/icon_arrow_white.svg');
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}



	.sns {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7.7vw 0;
	}
	header nav .sns {
		padding: 5.13vw 0;
	}

	.sns p {
		display: flex;
		align-items: center;
		font-size: 4.6vw;
		font-weight: 500;
	}

	.sns ul {
		border-left: 1px solid #dadada;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6vw;
		padding: 0 0 0 4.6vw;
		margin: 0 0 0 4.6vw;
	}

	.sns ul li {
		width: 12vw;
		height: 12vw;
	}
	header nav .sns ul li {
		width: 8.97vw;
		height: 8.97vw;
	}

	.sns ul li[data-name="YouTube"] {
		width: 12vw;
		height: 8.97vw;
	}
	header nav .sns ul li[data-name="YouTube"] {
		width: 8.97vw;
		height: 6.41vw;
	}
	

	.sns ul li a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.sns ul li a img {
		width: 100%;
		height: auto;
	}



	/* -------------------------------------------------------------------------------------------
	*
	* header
	*
	* ----------------------------------------------------------------------------------------- */

	header {
		background-color: #ffffff;
		position: fixed;
		top: 0;
		width: 100%;
		border-bottom: 1px solid #dadada;
		z-index: 5;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		opacity: 1;
		pointer-events: auto;
	}
	header.is-hidden {
		opacity: 0;
		pointer-events: none;
		/* transform: translateY(-100%); */
	}

	header div.inner {
		margin: 0 auto;
		width: 92.8vw;
		max-width: 92.8vw;
		text-align: center;
	}

	header div.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 18vw;
		padding: 0 10vw 0 0;
	}

	header div.container h1 a {
		display: flex;
	}

	header div.container h1 a img {
		width: 21.282vw;
	}


	/* logo_list */
	header div.container ul.logo_list {
		/* float: right; */
		height: 100%;
		margin: 0;
		padding: 0 5vw 0 0;
		position: relative;
		display: flex;
		align-items: center;
	}

	header div.container ul.logo_list::before {
		content: '';
		display: block;
		width: 1px;
		height: 60%;
		background-color: #dadada;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}


	header div.container ul.logo_list li {
		display: inline-block;
		vertical-align: top;
	}

	header div.container ul.logo_list li:nth-of-type(n+2) {
		margin: 0 0 0 20px;
	}

	header div.container ul.logo_list li a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	header div.container ul.logo_list li a img {
		height: auto;
	}

	header div.container ul.logo_list li[data-name="mic"] a img {
		aspect-ratio: 76 / 26;
		width: 16.154vw;
	}

	header div.container ul.logo_list li[data-name="meti"] a img {
		aspect-ratio: 119 / 35;
		width: 25.128vw;
	}


	header div#menuBar {
		position: absolute;
		width: 7vw;
		top: 0;
		right: 3vw;
		bottom: 0;
		margin: auto;
	}

	header div#menuBar div.menu-trigger {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: end;
		cursor: pointer;
		position: relative;
		gap: 1.6vw;
	}

	header div#menuBar div.menu-trigger span {
		display: block;
		width: 100%;
		height: 0.5128vw;
		background: var(--color-blue);
		transition: all 0.3s;
	}
	header div#menuBar div.menu-trigger span:nth-of-type(2) {
		width: 55.56%;
	}

	header div#menuBar.is-active div.menu-trigger span:nth-of-type(2) {
		opacity: 0;
	}

	header div#menuBar.is-active div.menu-trigger span:nth-of-type(1) {
		transform: translateY(2.1vw) rotate(45deg);
	}

	header div#menuBar.is-active div.menu-trigger span:nth-of-type(3) {
		transform: translateY(-2.1vw) rotate(-45deg);
	}

	header div.container a.langBtn {
		position: absolute;
		top: 4.2vw;
		right: 14vw;
		display: block;
		font-size: 0.875rem;
		line-height: 1;
		padding: 1.5vw 2vw 2vw 2vw;
		margin: auto;
		background-color: var(--color-blue);
		color: #ffffff;
	}


	header nav {
		position: fixed;
		width: 100%;
		padding: 7.2vw 7.2vw 2vw 7.2vw;
		box-sizing: border-box;
		background-color: #ffffff;
		z-index: 5;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	header nav.is-active {
		visibility: visible;
		opacity: 1;
	}

	header nav div.inner {
		width: 100%;
		max-width: 100%;
	}


	header nav ul.mega-menu {
		border-bottom: 1px solid #dadada;
		flex-direction: column;
		width: 100%;
	}

	header nav ul.mega-menu>li {
		border-top: 1px solid #dadada;
		width: 100%;
	}

	header nav ul.mega-menu>li .menu-title {
		margin: 0;
		border: none;
		background: none;
		color: inherit;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		vertical-align: top;
		width: 100%;
		height: 18.72vw;
		padding: 16px 0 0 0;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		cursor: pointer;
		padding: 0 0 0 12vw;
		position: relative;
	}

	header nav ul.mega-menu>li .menu-title::after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		aspect-ratio: 1 / 1;
		width: 6.154vw;
		height: 6.154vw;
		background-image: url('../img/icon_plus.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translateY(-50%);
		transition: background-image 0.3s;
	}
	header nav ul.mega-menu>li .menu-title[aria-expanded="true"]::after {
		background-image: url('../img/icon_minus.svg');
	}
	header nav ul.mega-menu>li:not(.has-submenu) .menu-title::after {
		background-image: url('../img/icon_arrow_nav.svg');
	}



	header nav ul.mega-menu>li .menu-title span {
		margin: 0;
		font-size: 4.1vw;
		font-weight: 500;
		letter-spacing: 0.05em;
		line-height: 1.3;
		position: relative;
		display: inline-block;
		vertical-align: top;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		text-align: left;
	}

	header nav ul.mega-menu>li.active .menu-title span {
		color: var(--color-blue);
	}

	header nav ul.mega-menu>li:hover .menu-title span,
	header nav ul.mega-menu>li.active:hover .menu-title span {
		/* color: #ffffff; */
	}

	header nav ul.mega-menu>li .menu-title span::before {
		content: '';
		display: inline-block;
		vertical-align: top;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		position: absolute;
		right: unset;
		top: 0;
		bottom: 0;
		margin: auto;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	header nav ul.mega-menu>li[data-name="about"] .menu-title span::before {
		width: 6vw;
		height: 6vw;
		background-image: url(../img/nav_icon_about.svg);
		left: -9.5vw;
	}

	header nav ul.mega-menu>li[data-name="flow"] .menu-title span::before {
		width: 7vw;
		height: 6vw;
		background-image: url(../img/nav_icon_flow.svg);
		left: -10vw;
	}

	header nav ul.mega-menu>li[data-name="collaboration"] .menu-title span::before {
		width: 10.26vw;
		height: 6.5vw;
		background-image: url(../img/nav_icon_collaboration.svg);
		left: -12vw;
	}

	header nav ul.mega-menu>li[data-name="gallery"] .menu-title span::before {
		width: 7vw;
		height: 6vw;
		background-image: url(../img/nav_icon_gallery.svg);
		left: -10vw;
	}

	header nav ul.mega-menu>li .menu-title span::after {
		display: none;
	}

	header nav ul.mega-menu>li.is-active .menu-title span::after,
	header nav ul.mega-menu>li .menu-title[aria-expanded="true"] p::after {
		transform: scaleX(1);
	}

	/* Mega Drop Menu */
	header nav ul.mega-menu {
		position: relative;
		display: flex;
		justify-content: center;
		background: none;
		z-index: 10;
	}

	header nav ul.mega-menu>li>.submenu a.lower-top {
		display: inline-block;
		color: var(--color-blue);
		font-size: 3.6vw;
		font-weight: 500;
		margin: 0 auto 4.1vw auto;
	}

	header nav ul.mega-menu>li.has-submenu .menu-title[aria-expanded="true"]+.submenu {
		display: block;
		opacity: 1;
		pointer-events: auto;
	}

	header nav ul.mega-menu>li>.submenu {
		display: none;
		min-width: unset;
		width: 100%;
		background: #ffffff;
		padding: 0 0 5.128vw 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s;
		z-index: 20;
	}

	header nav ul.mega-menu>li>.submenu .inner {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		text-align: left;
	}

	header nav ul.mega-menu>li>.submenu ul {
		display: flex;
		justify-content: center;
		margin: 0 auto;
		gap: 2.82vw;
	}

	header nav ul.mega-menu>li>.submenu li {
		width: calc((100% - 5.64vw) / 3);
	}

	header nav ul.mega-menu>li>.submenu li a {
		display: block;
		font-size: 3vw;
		font-weight: 500;
		text-align: left;
	}

	header nav ul.mega-menu>li>.submenu li a figure {
		display: flex;
		flex-direction: column;
	}

	header nav ul.mega-menu>li>.submenu li a figure img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		height: auto;
	}

	header nav ul.mega-menu>li>.submenu li a figure figcaption {
		color: var(--color-blue);
		font-size: 3vw;
		font-weight: 500;
		margin: 1.5vw 0 0 0;
		text-underline-offset: 0.3em;
	}

	header nav ul.mega-menu>li>.submenu li a:hover figure figcaption {
		text-decoration: underline;
	}



	/* -------------------------------------------------------------------------------------------
	*
	* pageGuide
	*
	* ----------------------------------------------------------------------------------------- */

	#pageGuide {
		padding: 0.625rem;
		box-sizing: border-box;
	}

	#pageGuide ul {
		font-size: 0;
		letter-spacing: 0;
	}

	#pageGuide ul li {
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}

	#pageGuide ul li:nth-of-type(n+2) {
		padding: 0 0 0 0.6rem;
		margin: 0 0 0 0.6rem;
	}

	#pageGuide ul li:nth-of-type(n+2)::before {
		content: "";
		position: absolute;
		top: 0.15rem;
		left: -0.3rem;
		width: 0.3rem;
		height: 0.3rem;
		border-top: 1px solid #000000;
		border-right: 1px solid #000000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#pageGuide ul li a {
		font-size: 0.75rem;
	}

	#pageGuide ul li:nth-of-type(1) a {
		color: var(--color-blue);
	}



	/* -------------------------------------------------------------------------------------------
	*
	* headline
	*
	* ----------------------------------------------------------------------------------------- */

	#headline {
		text-align: center;
		background-color: #006EC3;
		background-image: url(../img/headline_bg_sp.png);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 7.69vw 0;
	}


	#headline h2 {
		display: flex;
		flex-direction: column;
	}

	#headline h2 .icon {
		margin: 0 0 3vw;
	}

	#headline h2 .icon img {
		display: inline-block;
		vertical-align: top;
		width: 11.6vw;
	}

	#headline.about h2 .icon img {
		width: 11.6vw;
	}

	#headline.collaboration h2 .icon img {
		width: 16.4vw;
	}

	#headline.flow h2 .icon img {
		width: 11vw;
	}

	#headline.internet h2 .icon img {
		width: 11.6vw;
	}

	#headline.faq h2 .icon img {
		width: 11.6vw;
	}

	#headline.gallery h2 .icon img {
		width: 10.27vw;
	}

	#headline.info h2 .icon img {
		width: 13.07vw;
	}


	#headline h2 .title {
		color: #ffffff;
		font-size: 6.67vw;
		letter-spacing: 0.05em;
		line-height: 1.6;
		padding: 0 0 2.56vw 0;
		position: relative;
	}
	#headline h2 .title::after {
		content: '';
		display: block;
		width: 100%;
		height: 1vw;
		background-color: #ffffff;
		border-radius: 7.69vw;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}



	/* -------------------------------------------------------------------------------------------
	*
	* contents
	*
	* ----------------------------------------------------------------------------------------- */

	#contents {
		position: relative;
	}
	body:not(.top) #contents{
		background-color: var(--color-lower-base);
		padding: 15.38vw 0 12.82vw 0;
	}
	body:not(.top) #contents::before,
	body:not(.top) #contents::after {
		content: '';
		display: block;
		width: 57.18vw;
		height: 42.82vw;
		position: absolute;
		background-repeat: no-repeat;
		background-size: contain;
	}
	body:not(.top) #contents::before {
		background-image: url(../img/contents_bg_head.png);
		right: 0;
		top: 0;
	}
	body:not(.top) #contents::after {
		background-image: url(../img/contents_bg_bottom.png);
		left: 0;
		bottom: 0;
	}

	body:not(.top):not(.flow) #contents section:not(.anchor) h3 {
		color: #ffffff;
		font-size: 1.222rem;
		line-height: 1.6;
		margin: 0 0 1.667rem 0;
		padding: 0.556rem 0.889rem;
		background: linear-gradient(to right, #056CD8 0%, #57C4F5 100%);
	}

	body.faq #contents h3 {
		margin: 0 0 2.5rem 0;
	}

	body:not(.top) #contents h4{
		margin: 0 0 0.889rem 0;
	}
	body:not(.top) #contents h4 span{
		display: inline-block;
		vertical-align: top;
		color: var(--color-blue);
		font-size: 1.111rem;
		line-height: 1.6;
		padding: 0 0 0.444rem 1.222rem;
		position: relative;
	}
	body:not(.top) #contents h4 span::before{
		content: '';
		display: block;
		background: linear-gradient(to left, #056CD8 0%, #57C4F5 100%);
		box-sizing: border-box;
		width: 0.889rem;
		height: 0.889rem;
		border-radius: 100px;
		position: absolute;
		top: 0.5rem; left: 0;
	}
	body:not(.top) #contents h4 span::after{
		content: '';
		display: block;
		background: linear-gradient(to left, #056CD8 0%, #57C4F5 100%);
		box-sizing: border-box;
		width: 100%;
		height: 0.222rem;
		border-radius: 100px;
		position: absolute;
		bottom: 0; left: 0;
	}





	/* -------------------------------------------------------------------------------------------
	*
	* pageTop
	*
	* ----------------------------------------------------------------------------------------- */

	#pageTop {
		position: fixed;
		bottom: 5vw;
		right: 5vw;
		z-index: 1;
	}

	#pageTop a {
		display: inline-block;
		vertical-align: top;
	}

	#pageTop a img {
		width: 12vw;
		height: 12vw;
	}




	/* -------------------------------------------------------------------------------------------
	*
	* footer
	*
	* ----------------------------------------------------------------------------------------- */

	footer {
		border-top: 1px solid #dadada;
		background-color: #ffffff;
		text-align: center;
	}

	footer div.description {
		background-color: var(--color-light-blue);
		padding: 6vw 0;
		font-size: 0;
		letter-spacing: 0;
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: 42vw auto;
	}

	footer div.description dl {
		text-align: left;
		box-sizing: border-box;
		position: relative;
	}

	footer div.description dl:nth-of-type(n+2) {
		padding: 4vw 0 0 0;
		margin: 4vw 0 0 0;
	}

	footer div.description dl:nth-of-type(n+2)::before {
		content: '';
		display: block;
		width: 100%;
		height: 0.2vw;
		background-image: url(../img/dot_line_horizontal.png);
		background-repeat: repeat-x;
		background-position: 0 0;
		background-size: auto 0.2vw;
		position: absolute;
		top: 0;
		left: 0;
	}

	footer div.description dl dt {
		font-size: 0.875rem;
		color: var(--color-blue);
		margin: 0 0 0.625rem 0;
	}

	footer div.description dl dd {
		font-size: 0.75rem;
		line-height: 1.6;
	}


	footer div.container {
		padding: 7.69vw 7.18vw;
	}
	footer div.container div.inner{
		max-width: 100%;
		width: 100%;
	}

	footer div.container div.info {
		text-align: left;
	}

	footer div.container div.info .info_logo {
		margin: 0 0 2.82vw 0;
	}

	footer div.container div.info .info_logo img {
		width: 48.2vw;
		height: auto;
	}

	footer div.container div.info .info_icon {
		aspect-ratio: 1 / 1;
		display: inline-block;
		vertical-align: middle;
		width: 8.2vw;
	}

	footer div.container div.info .info_icon img {
		width: 100%;
		height: auto;
	}

	footer div.container div.info p {
		display: inline-block;
		vertical-align: middle;
		font-size: 3.6vw;
		width: calc(100% - 10.5vw);
	}

	footer div.container ul {
		font-size: 0;
		text-align: left;
		display: flex;
		flex-direction: column;
		gap: 3.6vw;
	}

	footer div.container div.footer_nav {
		display: flex;
		justify-content: space-between;
		padding: 7.69vw 0 0 0;
	}

	footer div.container ul li a {
		font-size: 3.6vw;
		line-height: 1.4;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		text-underline-offset: 0.3em;
	}

	footer div.container ul li a:hover {
		text-decoration: underline;
	}

	footer div.container ul li a[target="_blank"]::after {
		content: "";
		display: inline-block;
		vertical-align: middle;
		margin: -0.1875rem 0 0 0.25rem;
		width: 0.625rem;
		height: 0.625rem;
		background-image: url(../img/icon_blank.svg);
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
	}

	footer div.container ul.other {
		gap: 6.15vw;
		margin: 6.15vw 0 0 0;
	}

	footer div.container ul.other li img {
		max-width: 100%;
		height: auto;
	}




	footer div.container p.copy {
		border-top: 1px solid #E7E7E7;
		font-size: 3vw;
		line-height: 1.6;
		text-align: left;
		align-self: end;
		margin: 7.69vw 0 0 0;
		padding: 7.69vw 0 0 0;
	}



}