@charset "UTF-8";
@import url("common.sp.css");

/* ---------------------------------------------------------
	CSS Document hedar_navi
--------------------------------------------------------- */
#headar_navi {
	position: fixed;
	/* top: 20px; */
	top: 8px;
	right: 10px;
	/* width: 480px; */
	z-index: 99999;
}

#hnavi li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin-left: 20px;
	font-size: 14px;
	line-height: 35px;
}

#hnavi li.hnavi a {
	text-decoration: none;
	color: #333;
	position: relative;
}

#hnavi li.hnavi a:before {
	content: "";
	width: 0;
	height: 0;
	margin-top: -5px;
	border: solid 5px transparent;
	border-left: solid 7px #333;
	position: absolute;
	top: 50%;
	left: -12px;
}

#lang_btn {
	/* width: 120px; */
	border: 1px solid #333;
	border-radius: 50px;
}
#hnavi #lang_btn {
	margin-left: 10px;
}
#lang_btn p {
	line-height: 30px;
	font-size: 14px;
	color: #333;
	text-align: center;
	margin-bottom: 0px;
}
#lang_btn a {
	display: inline-block;
	margin: auto 8px;
	color: #333;
	text-decoration: none;
}

/* ---------------------------------------------------------
	CSS Document video
--------------------------------------------------------- */

#video {
    position: relative;
    padding-bottom: 56.25%;
    margin: 0 auto 30px;
    height: 100%;
    overflow: hidden;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ---------------------------------------------------------
	CSS Document bnr
--------------------------------------------------------- */

ul#bnr {
	margin: 0 0 20px;
}

ul#bnr li {
	display: inline-block;
	margin: 0 10px 10px;
}

ul#bnr li.left {
}

ul#bnr li.right {
}

/* ---------------------------------------------------------
	CSS Document news
--------------------------------------------------------- */

#news {
	margin-bottom: 40px;
	font-size: 0;
}

#news .bnr {
	margin: 0 0 30px;
}

#news .bnr img {
	display: inline-block;
	margin: 0 5px 10px;
	width: 30%;
}

#news h2 {
	margin: 0 auto 30px;
	width: 148px;
}

#news .section {
/*	height: 350px;
	overflow: auto;*/
	padding: 0 15px 1px;
	text-align: left;
}

#news .find {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: solid 1px #e0e0e0;
}

#news .find:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

#news .find:hover {
	opacity: 0.8;
	filter: Alpha(opacity=80);
}

#news p {
	display: inline-block;
	vertical-align: top;
	width: 55px;
	margin-right: 15px;
}

#news dl {
	display: inline;
}

#news dt {
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255,69,0,1);
}

#news dt a {
	display: block;
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	color: rgba(255,69,0,1);
}

#news dt span {
	display: block;
	color: rgba(255,69,0,1);
}

#news dd {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.4;
	color: #333;
}

#news dd span {
	margin-left: 10px;
	text-decoration: underline;
}
/* ---------------------------------------------------------
	CSS Document multiple
--------------------------------------------------------- */

#multiple {
	margin: 20px 20px 40px;
}

#multiple h2 {
	margin-bottom: 20px;
	font-weight: 900;
	font-size: 24px;
	line-height: 42px;
	color: #00669f;
}

#multiple h2 span {
	display: inline-block;
	vertical-align: top;
	font-size: 44px;
	line-height: 32px;
	color: #00d8fd;
}

#multiple h3 {
	margin-bottom: 20px;
	padding-top: 20px;
	border-top: solid 1px #00669f;
	font-weight: 900;
	font-size: 6vw;
	line-height: 1.3;
	color: #00d8fd;
}

#multiple p {
	margin-bottom: 20px;
}

#multiple .f_right {
	text-align: left;
}

#multiple figure {
	margin: 0 auto;
}

/* ---------------------------------------------------------
	CSS Document distribute
--------------------------------------------------------- */

#distribute {
	margin: 30px 20px 60px;
}

#distribute .container {
	text-align: left;
}

#distribute h3 {
	margin-bottom: 20px;
	padding-top: 20px;
	text-align: center;
	border-top: solid 1px #00669f;
	font-weight: 900;
	font-size: 6vw;
	line-height: 1.3;
	color: #00d8fd;
}

#distribute figure {
	margin: 0 auto 20px;
	text-align: center;
}

#distribute p {
	margin-top: 20px;
}

#distribute ul {
}

#distribute li {
	margin-top: 20px;
	margin-left: 18px;
	list-style: decimal;
}

/* ---------------------------------------------------------
	CSS Document api
--------------------------------------------------------- */

#api {
	margin: 0 20px 60px;
}

#api h3 {
	margin-bottom: 20px;
	padding-top: 20px;
	text-align: center;
	border-top: solid 1px #00669f;
	font-weight: 900;
	font-size: 6vw;
	line-height: 1.3;
	color: #00d8fd;
}

#api p {
	margin-bottom: 2em;
	text-align: justify;
}

#api em {
	color: #e9481a;
}

#api .table {
	text-align: justify;
}

#api .table dl {
	margin-bottom: 8vw;
}

#api .table dt {
	margin-bottom: 10px;
	background: #159384;
	text-align: center;
	font-size: 4.5vw;
	line-height: 2.3em;
	color: #fff;
}

/* ---------------------------------------------------------
	CSS Document application
--------------------------------------------------------- */

#application {
	margin: 0 20px 60px;
}

#application h3 {
	margin-bottom: 20px;
	padding-top: 20px;
	text-align: center;
	border-top: solid 1px #00669f;
	font-weight: 900;
	font-size: 6vw;
	line-height: 1.4;
	color: #00d8fd;
}

#application h3 span {
	display: block;
	font-size: 20px;
}

#application p {
	margin-bottom: 2em;
	text-align: justify;
}

#application figure {
	height: 40.82538461538462vw;
	margin-bottom: 5vw;
}

#application h4 {
	margin-bottom: 5vw;
	font-family: 'Zen Antique', serif;
	font-size: 5vw;
	letter-spacing: -0.05em;
	line-height: 1.3;
}

#application .table {
	text-align: justify;
}

#application .table dl {
	margin-bottom: 8vw;
}

#application .table dt {
	margin-bottom: 10px;
	background: #159384;
	padding-left: 1em;
	font-size: 4vw;
	line-height: 2.5em;
	color: #fff;
}

/* ---------------------------------------------------------
	CSS Document contract
--------------------------------------------------------- */

#contract {
	margin: 0 20px 60px;
}

#contract h3 {
	margin-bottom: 20px;
	padding-top: 20px;
	text-align: center;
	border-top: solid 1px #00669f;
	font-weight: 900;
	font-size: 6vw;
	line-height: 1.4;
	color: #00d8fd;
}

#contract h3 span {
	display: block;
	font-size: 20px;
}

#contract p {
	margin-bottom: 2em;
	text-align: justify;
}

#contract strong,
#contract em {
	color: #e9481a;
}

#contract .section {
	margin-bottom: 5vw;
	padding: 8vw 0;
	border: dashed 1px #ccc;
}

#contract dt {
	margin-bottom: 20px;
	font-weight: bold;
	font-family: 'Zen Antique', serif;
	font-size: 5.5vw;
	letter-spacing: -0.05em;
	line-height: 1;
	color: #159384;
}

#contract figure {
	margin-top: 5vw;
}

#contract figure img {
	height: 50vw;
}

/* ---------------------------------------------------------
	CSS Document layer
--------------------------------------------------------- */

#layer {
	margin: 0 20px 60px;
}

#layer h3 {
	margin-bottom: 10vw;
	padding-top: 20px;
	text-align: center;
	border-top: solid 1px #00669f;
	font-weight: 900;
	font-size: 6vw;
	line-height: 1.4;
	color: #00d8fd;
}

#layer figure {
	margin-bottom: 10vw;
}

#layer figure img {
	height: 100vw;
}

#layer .section {
	margin-bottom: 10vw;
}

#layer dl {
	margin-top: 10vw;
	font-weight: 500;
	font-size: 4.2vw;
}

#layer .layer_01 {
	margin-top: 0;
}

#layer dl {
	margin-bottom: 5vw;
}

#layer dt {
	margin-bottom: 10px;
	padding-bottom: 15px;
	border-bottom: solid 2px #00669f;
	font-weight: bold;
	font-family: 'Zen Antique', serif;
	font-size: 6.5vw;
	letter-spacing: -0.05em;
	line-height: 1;
	color: #00669f;
}

#layer .layer_03 dt {
	border-bottom: solid 2px #ec6a4e;
	color: #ec6a4e;
}

#layer .layer_03 dd span {
	color: #ec6a4e;
}

#layer li {
	margin-left: 1.4em;
	text-align: justify;
	list-style: disc;
}

/* ---------------------------------------------------------
	CSS Document linux
--------------------------------------------------------- */

#linux {
	margin: 30px 20px 60px;
}

#linux .container {
	text-align: left;
}

#linux h3 {
	margin-bottom: 20px;
	padding-top: 20px;
	text-align: center;
	border-top: solid 1px #00669f;
	font-weight: 900;
	font-size: 6vw;
	line-height: 1.3;
	color: #00d8fd;
}

#linux figure {
	margin: 20px auto;
	text-align: center;
}

#linux p {
	margin-top: 20px;
}

#linux ul {
}

#linux li {
	margin-top: 20px;
	margin-left: 18px;
	list-style: decimal;
}

/* ---------------------------------------------------------
	CSS Document evolution
--------------------------------------------------------- */

#evo {
	margin: 0 5vw 60px;
}

#evo h3 {
	margin-bottom: 8vw;
	padding-top: 8vw;
	text-align: center;
	border-top: solid 1px #00669f;
	font-size: 6vw;
	line-height: 1.3;
	color: #00d8fd;
}

#evo dl:not(:last-of-type):after {
	display: block;
	content: '';
	height: 15vw;
	background: url(../images/evolution_arrow.png) no-repeat center / auto 10vw;
}

#evo dt {
	margin-bottom: 5vw;
}

#evo dt img {
	height: 27vw;
	margin-left: -5.5vw;
}

#evo dd {
	text-align: justify;
	font-size: 3.5vw;
}

#evo ul {
	margin-top: 5vw;
	padding: 5vw;
	background: #d9f9ff;
	background: rgba(192, 246, 251, 0.3);
	font-size: 3vw;
	line-height: 1.6;
}

#evo li:not(:first-of-type) {
	margin-top: 5vw;
}

#evo li figure {
	height: 31.9168vw;
	margin-bottom: 4vw;
}

#evo li .caption a {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 1.5vw;
	font-weight: bold;
}