@charset "utf-8";

/* reset
-------------------------------------------------------------*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

header,footer,main,section,article,nav,aside {
	display: block;
}

*,:before,:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

ol,ul {
	list-style: none;
}

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

html {
	font-size: 62.5%
}

a {
	text-decoration: none;
}


/* font-family
-------------------------------------------------------------*/

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}

/* common
-------------------------------------------------------------*/

body {
	background: #fff;
	color: #707070;
	font-size: 2rem;
/* 
	font-feature-settings: 'palt';
	letter-spacing: 1px;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-font-smoothing: subpixel-antialiased;
 */
}

a {
	color: #707070;
}

.center {
	text-align: center;
}
.nowrap {
	white-space: nowrap;
}

@media screen and (min-width:1001px) {
	.sp {
		display: none !important;
	}
}
@media screen and (max-width:1000px) {
	.pc {
		display: none !important;
	}
}

/* variables
-------------------------------------------------------------*/

:root {
	--green: #6FCADB;
	--gray: #707070;
	--blue: ##0084D6;
}

/* ============================================================
background / current
============================================================ */

body.toppage header .nav2 a.top,
body.process header .nav2 a.process,
body.p1 header .nav2 a.p1,
body.p2 header .nav2 a.p2,
body.p3 header .nav2 a.p3,
body.technology header .nav2 a.technology,
body.product header .nav2 a.product {
	color: var(--green);
}
article.process ul.anchor li.p1 {background: #25459d;}
article.process ul.anchor li.p2 {background: #5d9bbc;}
article.process ul.anchor li.p3 {background: #5dbca6;}

li.cat1 dd.tech {background: #25459d;}
li.cat2 dd.tech {background: #0084d6;}
li.cat3 dd.tech {background: #48b2c6;}
li.cat4 dd.tech {background: #169f36;}
li.cat6 dd.tech {background: #13acc4;}

article.process h2#cat1 a {color: #25459d;}
article.process h2#cat2 a {color: #0084d6;}
article.process h2#cat3 a {color: #48b2c6;}
article.process h2#cat4 a:nth-child(1) {color: #158f84;}
article.process h2#cat4 a:nth-child(2) {color: #169f36;}
article.process h2#cat6 a {color: #13acc4;}

article.process h2.sp {color: #169f36;}

article.process h2#cat1::after {background: #25459d;}
article.process h2#cat2::after {background: #0084d6;}
article.process h2#cat3::after {background: #48b2c6;}
article.process h2#cat4 a:nth-child(1)::after {background: #158f84;}
article.process h2#cat4 a:nth-child(2)::after {background: #169f36;}
article.process h2#cat6::after {background: #13acc4;}

article.process h2#cat4::after {background: #158f84;}
article.process h2.sp::after {background: #169f36;}


/* ============================================================
header
============================================================ */


/* ============================================================
main
============================================================ */

main {
	opacity: 0;
}
main.show {
	opacity: 1;
	transition: opacity .3s ease-in;
}

/* ============================================================
toppage
============================================================ */


body.toppage aside.ttl p.copy,
body.toppage aside.ttl h1,
body.toppage aside.ttl > dl,
body.toppage aside.ttl p.img {
	opacity: 0;
	transition: opacity .2s ease-in;
}

body.toppage aside.ttl p.copy.show,
body.toppage aside.ttl h1.show,
body.toppage aside.ttl > dl.show,
body.toppage aside.ttl p.img.show {
	opacity: 1;
}

/* ============================================================
pages
============================================================ */

h2.process {
	display: none !important;
}

body.p1 article.process ul.main > li:not(.p1),
body.p2 article.process ul.main > li:not(.p2),
body.p3 article.process ul.main > li:not(.p3) {
	display: none;
}