@charset "utf-8";


/* -- Monitor size is 481px - for PC
-------------------------------------------------------------------------------- */
@media (min-width: 481px) {

	#About header nav > ul > li:nth-of-type(1) > span > a {
		background-position: -180px 0;
		background-color: #004196;
	}
	#About header nav > ul > li:nth-of-type(1) > span > a:first-of-type img {
		opacity: 0;
	}
	#About header nav > ul > li:nth-of-type(1) > span > a:last-of-type img {
		opacity: 1;
	}

	/* -- corporate -- */
	.data article > dl > dd:nth-of-type(7) dd li {
		font-size: 17px;
	}
	.data article > dl > dd div {
		width: 450px;
		padding: 15px 30px;
	}
	.data article > dl > dd div dd {
		margin: -1.75em 0 0 8em;
	}
	.data article > dl > dd:nth-of-type(7) dd li {
		white-space: nowrap;
	}
	.data article > dl > dd img {
		margin: 0 0 15px 0;
		display: block;
        width: 400px;
	}

	/* -- top_message -- */
	.mes article figure img {
		position: absolute;
		right: 5%;
	}
	.mes article section {
		margin-bottom: 60px;
	}
	.mes article section:last-of-type {
		margin-bottom: 0;
	}
	.mes article section h2,
	.mes article section p {
		font-size: 14px;
		margin-right: 330px;
	}
	.mes article section h2 {
		font-size: 20px;
		line-height: 1.4;
		padding: 20px 0 25px;
		position: relative;
	}
	.mes article section h2:before {
		content: "";
		background: #004196;
		width: 75px;
		height: 2px;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
	.mes article section h2.mTitle {
		padding: 0 0 15px;
		font-size: 28px;
		line-height: 1.35;
	}
	.mes article section h2.mTitle:before {
		background: none;
		height: 0;
	}

	/* -- history -- */
	.his article div {
		margin-bottom: -180px;
		position: relative;
	}
	.his article section {
		margin-left: 100px;
		padding: 0 0 100px 145px;
		border-left: dotted 1px #33c2fc;
		position: relative;
	}
	.his article section:last-of-type {
		padding-bottom: 180px;
	}
	.his article section h2 {
		position: absolute;
		left: -101px;
		top: 0;
	}
	.his article section strong {
		font-size: 14px;
		width: 220px;
		padding: 2px 0;
	}
	.his article section h3 {
		font-size: 28px;
		line-height: 1.35;
		margin-bottom: 30px;
	}
	.his article section p {
		font-size: 14px;
		line-height: 2;
		margin-bottom: 1em;
	}
	.his article section p.note {
		font-size: 12px;
	}
    .his article section p.note2 {
		font-size: 12px;
        margin-top: 6px;
	}
	.his article section p:first-of-type {
		margin-bottom: 15px;
	}
	.his article section > ul {
		margin: 40px 0;
		overflow: hidden;
	}
	.his article section > ul li figcaption {
		color: #666;
		font-size: 12px;
		line-height: 1.5;
		padding-top: 5px;
		text-align: center;
	}
	.his article section h4 {
		font-size: 12px;
		width: 120px;
	}
	.his article section > dl {
		font-size: 14px;
		margin-bottom: 20px;
	}
	.his article section aside {
		display: table;
	}
	.his article section aside dl {
		display: table-cell;
		padding: 20px 0 20px 30px;
		width: 50%;
	}
    
    .his article section#p7 .p7_img01 {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .his article section#p7 aside {
        margin: 0 0 20px 0;
        padding: 20px 0;
    }
    .his article section#p7 aside p {
        padding: 0 30px;
    }

	/* -- keyword -- */
	.key article ol {
		width: 700px;
		margin: 0 auto 45px;
		display: block;
		overflow: hidden;
	}
	.key article ol li {
		float: left;
		margin: 0 17px 15px 0;
	}
	.key article ol li:nth-of-type(3n) {
		margin-right: 0;
	}
	.key article section {
		border: solid 10px #004196;
		padding: 45px 60px 25px 70px;
		margin-bottom: 60px;
		position: relative;
	}
	.key article section p:last-child {
		position: absolute;
		right: 20px;
		top: 20px;
	}
	.key article section h2 {
		padding: 0 0 47px 9px;
		margin-bottom: 35px;
		border-bottom: solid 1px #CCC;
		display: block;
	}
	.key article section h2 span {
		display: inline-block;
		vertical-align: middle;
	}
	.key article section h2 span br {
		display: none;
	}
	.key article section h3 {
		font-size: 28px;
		line-height: 1.35;
		margin-bottom: 10px;
	}
	.key article section p {
		font-size: 14px;
		line-height: 2;
		margin-bottom: 35px;
	}
	.data article > dl > dd.oneUp2 {
		margin: -3.2em 0 0;
	}
}



/* -- Monitor size 480px width below - for Smartphone
-------------------------------------------------------------------------------- */
@media (max-width: 480px) {

	/* -- corporate -- */
	.data article > dl > dt:nth-of-type(2) br {
		display: none;
	}
	.data article > dl > dd:nth-of-type(7) dd li {
		font-size: 13px;
	}
	.data article > dl > dd div {
		padding: 10px 15px;
	}
	.data article > dl > dd div dl {
		font-size:12px;
	}
	.data article > dl > dd div dd {
		margin: -1.75em 0 0 7em;
	}
	.data article > dl > dd img {
		width: 90%;
		margin: 20px 0 15px 0;
		display: block;
	}

	/* -- top_message -- */
	article > h1 img:nth-of-type(1) {
		height: 44px;
		top: 23px;
	}
	.mes article figure {
		width: 194px;
		margin: 0 auto;
	}
	.mes article section {
		margin-top: 40px;
	}
	.mes article section h2 {
		font-size: 19px;
		line-height: 1.4;
		padding: 15px 0;
		position: relative;
	}
	.mes article section h2:before {
		content: "";
		background: #004196;
		width: 90px;
		height: 1px;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
	.mes article section h2 br {
		display: none;
	}

	.mes article section h2.mTitle {
		padding: 0 0 10px;
		font-size: 24px;
	}
	.mes article section h2.mTitle:before {
		background: none;
		height: 0;
	}

	/* -- history -- */
	.his article section {
		padding-bottom: 50px;
		position: relative;
	}
	.his article section:last-of-type {
		padding-bottom: 0;
	}
	.his article section h2 {
		position: absolute;
		left: 0;
		top: 0;
		width: 60px;
		height: 60px;
	}
	.his article section p:first-of-type {
		margin: 0 0 5px 75px;
	}
	.his article section strong {
		font-size: 10px;
		width: 140px;
		padding: 5px 0;
	}
	.his article section h3 {
		font-size: 19px;
		margin: 0 0 15px 75px;
	}
	.his article section p {
		font-size: 13px;
		margin-bottom: 1em;
	}
	.his article section > ul {
		margin: 20px 0;
		overflow: hidden;
	}
	.his article section > ul li figcaption {
		margin: 5px 10% 0 0;
		font-size: 9px;
	}
	.his article section > ul li figcaption br {
		display: none;
	}
	.his article section h4 {
		font-size: 10px;
		width: 120px;
	}
	.his article section > dl {
		font-size: 13px;
		margin-bottom: 15px;
	}
	.his article section aside {
		display: block;
		padding-bottom: 15px;
	}
	.his article section aside dl {
		font-size: 11px;
		display: block;
		padding: 15px 15px 0;
	}
    
    .his article section#p7 .p7_img01 {
        margin: 0 0 20px 0;
    }
    .his article section#p7 aside {
        margin: 0 0 20px 0;
        padding: 15px 0;
    }
    .his article section#p7 aside p {
        padding: 0 15px;
        margin: 0 0 1em 0;
    }
    .his article section p.note2 {
		font-size: 12px;
        margin: 5px 0;
	}

	/* -- keyword -- */
	.key article section p:last-child,
	.key article ol {
		display: none;
	}
	.key article section {
		border: solid 5px #004196;
		padding: 15px;
	}
	.key article section {
		border: solid 5px #004196;
		padding: 15px;
		margin-bottom: 30px;
	}
	.key article section h2 {
		padding: 0 0 20px;
		margin-bottom: 20px;
		border-bottom: solid 1px #CCC;
	}
	.key article section h2 img {
		height: 40px;
		width: auto;
	}
	.key article section h2 span {
		display: inline-block;
		vertical-align: middle;
	}
	.key article section h2 span:nth-of-type(2) img {
		height: 26px;
		width: auto;
	}
	.key article section h3 {
		font-size: 19px;
		margin-bottom: 10px;
	}
	.key article section h3 br {
		display: none;
	}
	.key article section p {
		font-size: 13px;
		line-height: 1.7;
		margin-bottom: 20px;
	}
}



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

/* -- corporate -- */
.data article > dl > dd:nth-of-type(7) li {
	margin-bottom: 10px;
}
.data article > dl > dd:nth-of-type(7) li span {
	display: block;
	line-height: 1.25;
}
.data article > dl > dd:nth-of-type(8) dd {
	margin: -1.75em 0 10px 8.5em;
	/*text-indent: -1em;*/
}
.data article > dl > dd:nth-of-type(8) dd.oneUp {
	margin: -3.5em 0 10px 8.5em;
}
/*.data article > dl > dd:nth-of-type(8) dd ul {
	display: inline;
	margin-left: -0.3em;
}
.data article > dl > dd:nth-of-type(8) dd li {
	display: inline;
}
.data article > dl > dd:nth-of-type(8) dd li:after {
	content: "、";
	display: inline;
	margin-right: -0.3em;
}*/
.data article > dl > dd:nth-of-type(8) ul li:last-child:after {
	display: none;
}
.data article > dl > dd div {
	margin-top: 15px;
	border: solid 2px #f1f1f1;
}
.data article > dl > dd div h3 {
	color: #004196;
	margin-bottom: 10px;
}

/* -- top_message -- */
.mes article section p + p {
	margin-top: 2em;
}

/* -- history -- */
.his article section strong {
	color: #FFF;
	background: #004196;
	text-align: center;
	display: block;
}
.his article section > ul li {
	float: left;
	width: 33.33%;
}
.his article section > ul li img {
	width: 100%;
}
.his article section h4 {
	color: #004196;
	text-align: center;
	margin-bottom: 10px;
	padding: 5px 0;
	border: solid 1px #004196;
}
.his article section > dl dd {
	margin: -1.75em 0 0 5em;
}
.his article section aside {
	background: #f1f1f1;
	overflow: hidden;
	width: 100%;
}
.his article section aside dl dt {
	font-weight: bold;
	margin-bottom: 5px;
}
.his article section aside dl dd li {
	margin-left: 5em;
}
.his article section aside dl dd em {
	display: inline-block;
	width: 5em;
	margin-left: -5em;
}
.his article sup {
    vertical-align: top;
}

/* -- keyword -- */
.key article section figure img {
	width: 100%;
}
.key article section:last-of-type {
	margin-bottom: 0;
}