@charset "utf-8";
/* ************************************************** 
Name: common.css
Description: Main CSS
Create: 2017.12.25
Update: -
Copyright 2017 Hitachi ICT business Services, Ltd.
***************************************************** */ 

/* ================================================== 
Basic 
[-] Reset
[-] Html Setting
[-] Body Setting
[-] Link Setting
Layout
#[-] Skip Link
#[l1] Area
#[l2] Grid Systems

Module
#[-] Section

===================================================== */

/* --------------------------------------------------------------------------------------- 

Basic 

------------------------------------------------------------------------------------------ */

/* [-] Reset
=========================================================================================== */ 
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

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, menu, nav, section, summary,
time, mark, audio, video {
	background:transparent;
	border:0;
	font-size:100%;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline;
}
body {
	line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}
nav ul {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	background:transparent;
	font-size:100%;
	margin:0;
	padding:0;
	vertical-align:baseline;
}
/* change colours to suit your needs */
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
/* change colours to suit your needs */
mark {
	background-color:#ff9;
	color:#000; 
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
/* change border colour to suit your needs */
hr {
	border:0;   
	border-top:1px solid #eee;
	display:block;
	height:1px;
	margin-bottom: 12px;
	padding:0;
}
input, select {
	vertical-align:middle;
}
ul{
	list-style-type : none;
}


/* [-] Html Setting
=========================================================================================== */ 
html{
	font-size: 62.5%;
	scroll-padding-top: 129.045px;
}
@media screen and (max-width: 1021px){
	html{
		scroll-padding-top: 65.9722px;
	}
}
@media screen and (max-width: 600px){
	html{
		scroll-padding-top: 53.9757px;
	}
}

/* [-] Body Setting
=========================================================================================== */ 
body{
	background: #fff;
	color: #666;
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;;
	font-size: 1.6rem;
	line-height: 1.6;
}

/* [-] Link Setting
=========================================================================================== */ 
a,
a:link{
	color: #004894;
	text-decoration: underline;
	-webkit-tap-highlight-color:rgba(0,72,148,.5);
}
a:visited{
	color:#4c3649;
	text-decoration: underline;
}
a:hover,
a:focus{
	text-decoration: none;
}
a:active{
	color: #2576B1;
	text-decoration: underline;
}


/* [-] img
=========================================================================================== */ 
img{
	max-width: 100%;
	vertical-align: bottom;
}

/* [-] sup /sub
=========================================================================================== */ 
sup{
	font-size: .6em;
	margin: auto 1px;
	position: relative;
	top: -.1em;
	vertical-align: top;/*.25em;*/
}
sub{
	bottom: -.1em;
	font-size: .6em;
	margin: auto 1px;
	position: relative;
	vertical-align: bottom;
}

/* [-] 入れ子の上余白調整 
=========================================================================================== */ 
ul ul, ul ol, ul dl, ol ul, ol ul, ol dl, dl ul, dl ol, dl dl{
	margin-top: 6px;
}


/* [-] フォーム要素のフォント指定
=========================================================================================== */ 	
input, button, select, option radio{
	font-size: 1.4rem;
} 


/* [-] textarea
=========================================================================================== */ 	
textarea{
	border: 1px solid #ccc;
	box-sizing: border-box;
	color: #666;
	width: 100%;
	padding: 8px 0 8px 8px;
}

@media screen and (max-width: 600px){
	textarea{
		width: 95%;
	}
}

/* [-] select
=========================================================================================== */ 	
select{
	border: 1px solid #ccc;
	box-sizing: border-box;
	color: #666;
	padding: 8px 0 8px 8px;
}

/* [-] input
=========================================================================================== */ 	
input[type="text"]{
	border: 1px solid #ccc;
	box-sizing: border-box;
	padding: 8px;
}

/* --------------------------------------------------------------------------------------- 

Layout

------------------------------------------------------------------------------------------ */

/* [-] Skip Link
=========================================================================================== */ 
.l-skip{
	background: #000;
}
/* [l1] Layout
=========================================================================================== */ 

/* --- [l1-1] Layout > Header Area --- */
.l-header{
	background: #fff;
}
.l-globalnavi{
	background: #fff;
	padding: 12px 0 0;
}
@media screen and (max-width: 600px){
	.l-globalnavi{
		padding: 0;
	}
}

/* --- ヘッダー固定表示 --- */
.l-headerarea{
	position: fixed;
	z-index: 101;
	top: 0px;
	width: 100%;
	max-height: 100vh;
	overflow-y: auto;
}
.l-headerarea + *{
	padding-top: 140px;
}

@media screen and (max-width: 1021px){
	.l-headerarea + *{
		padding-top: 76px;
	}
}

@media screen and (max-width: 600px){
	.l-headerarea + *{
		padding-top: 64px;
	}
}

/* --- [l1-2] Layout > Breadcram Area --- */
.l-breadcram{
	background: #fff;
}

/* --- [l1-3] Layout > Pagetitle Area --- */
.l-pagetitle{
	background: #004894;	
}

/* --- [l1-4] Layout > Contents Area --- */
.l-content{
	background: #fff;
	padding: 40px 0 6px;
}
.l-content:nth-child(even){
	background: #bad6e5;
}

/* --- [l1-5] Layout > Related  Area --- */
.l-related{
	background: #e6e6e6;
	padding: 42px 0 0 0;
}

/* --- [l1-6] Layout > Sitemap Area --- */
.l-sitemap{
	background: #ccc;
	padding: 42px 0 0 0;
}
@media screen and (max-width: 1021px){
	.l-sitemap{
		display: none;
	}
}

/* --- [l1-7] Layout > Footer Area --- */
.l-footerset{
	position: static;
	top:0;
}
.l-footer{
	background: #666;
	padding: 10px 0 0;
}
@media screen and (max-width: 600px){
	.l-footer{
		padding: 0;
	}
}


/* --- [l1-8] Layout > Display Area --- */
.l-gridset{
	margin: 0 auto;
	width: 1000px;
}
.l-gridset:after{
	clear: both;
	content: " ";
	display: block;
}
@media screen and (max-width: 1021px){
	.l-gridset{
		box-sizing: border-box;
		padding: 0 10px;
		width: 100%;
	}
}
@media screen and (max-width: 600px){
	.l-gridset, .l-area{
		min-width: 320px;
	}
}

/* --- [l1-7] Layout > anchor Area --- */
.l-anchor{
	background: rgba( 255, 255, 255, 0.8 );
	width: 100%;
	padding: 12px 0 6px;
    transition: all 800ms ease;
}

/* --- [l1-8] Layout > Pagetop Area --- */
.l-pagetop{
    position: fixed;
	height: 40px;
    bottom: 50px;
    right: 0;
	z-index: 100;
}

/* --- [l1-9] Layout > Search Area --- */
.l-searcharea{
	background: #ccc;
	display: none;
}

/* --- [l1-10] Layout > Top Page > Branding Area --- */
.l-branding{
	width: 100%;
}


/* [l2] Glid Systems
=========================================================================================== */ 

/* --- [l2-1] Grid Systems > Horizontal Setting（width: 100%,16グリッド分の役割を持つ）--- */
.l-grid{
	float: left;
	margin: 0 2.4% 0 0;
	width: 100%;
}
.l-grid:last-child{
	margin-right: 0;
}

/* --- [l2-2] Glid Systems > 1Grid Size --- */
.l-grid-1 {
 	width: 4%;
}

/* --- [l2-3] Glid Systems > 2Grid Size  --- */
.l-grid-2 {
 	width: 10.4%;
}

/* --- [l2-4] Glid Systems > 3Grid Size  --- */
.l-grid-3 {
 	width: 16.8%;
}

/* --- [l2-5] Glid Systems > 4Grid Size  --- */
.l-grid-4 {
 	width: 22.0%;
}

/* --- [l2-6] Glid Systems > 5Grid Size  --- */
.l-grid-5 {
 	width: 29.6%;
}

/* --- [l2-7] Glid Systems > 6Grid Size  --- */
.l-grid-6 {
 	width: 36%;
}

/* --- [l2-8] Glid Systems > 7Grid Size  --- */
.l-grid-7 {
 	width: 42.4%;
}

/* --- [l2-9] Glid Systems > 8Grid Size  --- */
.l-grid-8 {
 	width: 48.8%;
}
@media screen and (max-width: 600px){
	.l-grid-8 {
		margin: 0 4.4% 0 0;
        width: 47.8%;
	}
}
/* --- [l2-10] Glid Systems > 9Grid Size  --- */
.l-grid-9 {
 	width: 55.2%;
}

/* --- [l2-11] Glid Systems > 10Grid Size  --- */
.l-grid-10 {
 	width: 61.6%;
}

/* --- [l2-12] Glid Systems > 11Grid Size  --- */
.l-grid-11 {
 	width: 68%;
}

/* --- [l2-13] Glid Systems > 12Grid Size  --- */
.l-grid-12 {
 	width: 74.4%;
}

/* --- [l2-14] Glid Systems > 13Grid Size  --- */
.l-grid-13 {
 	width: 80.8%;
}

/* --- [l2-15] Glid Systems > 14Grid Size  --- */
.l-grid-14 {
 	width: 87.2%;
}

/* --- [l2-16] Glid Systems > 15Grid Size  --- */
.l-grid-15 {
 	width: 93.6%;
}

/* --- [l2-17] Glid Systems > Grid Size 1/3 --- */
.l-grid-trichotomy {
	margin: 0 2.45% 0 0;
	width: 31.7%;
}
@media screen and (max-width: 600px){
	.l-grid-trichotomy {
		margin: 0 4.4% 0 0;
        width: 30.4%;
	}
}

@media screen and (max-width: 600px){
	.l-grid-4,.l-grid-5,.l-grid-6,.l-grid-7,.l-grid-8,
	.l-grid-9,.l-grid-10,.l-grid-11,.l-grid-12,.l-grid-13,.l-grid-14,.l-grid-15,.l-grid-trichotomy{
		width: 100%;
	}
	.l-grid-s-half{
		width: 47.6%;
		margin: 0 1.2% 0 1.2%;
	}
	
	.l-grid-s-all{
		width: 100%;
		margin: 0;
	}
}
@media screen and (max-width: 1021px){
	.l-grid-m-half{
		width: 47.6%;
		margin: 0 1.2% 0 1.2%;
	}
	.l-grid-m-all{
		width: 100%;
		margin: 0;
	}
}


/* --------------------------------------------------------------------------------------- 

Module

------------------------------------------------------------------------------------------ */



/* [m1] 基本モジュール
=========================================================================================== */ 
/* --- [m1-1-1] ページタイトル > テキスト --- */
.title-page{
	color: #fff;
	padding: 7.4% 0;
}
.title-page h1{
	font-size: 3.2rem;
	margin-bottom: 8px;
}
.title-page p{
	font-size: 1.8rem;
}
@media screen and (max-width: 600px){
	.title-page h1{
		font-size: 1.8rem;
	}
	.title-page p{
		font-size: 1.4rem;
	}
}
		

/* --- [m1-1-2] ページタイトル > 画像 --- */

.title-page-image-corp{
	background: url(image/corporate.png) no-repeat;
	background-size: contain;
	background-position: right;	
}

.title-page-image-prod{
	background: url(image/products.png) no-repeat;
	background-size: contain;
	background-position: right;	
}

.title-page-image-apli{
	background: url(image/application.png) no-repeat;
	background-size: contain;
	background-position: right;	
}

/* --- [m1-2] 見出し --- */
.title{
	color: #222;
	text-align: center;
	line-height: 1.4;
	margin-bottom: 24px;
}

/* --- [m1-2-1] 見出し > 見出しレベル1 --- */
.title-level1{
	font-size: 3.2rem;
}

/* --- [m1-2-2] 見出し > 見出しレベル2 --- */
.title-level2{
	font-size: 2.4rem;
}

/* --- [m1-2-3] 見出し > 見出しレベル3 --- */
.title-level3{
	font-size: 2rem;
}

/* --- [m1-2-4] 見出し > 見出しレベル4 --- */
.title-level4{
	font-size: 1.8rem;
}

/* --- [m1-2-4] 見出し > 見出しレベル5 --- */
.title-level5{
	font-size: 1.6rem;
}

/* --- [m1-3-1] テキスト --- */
.text{
	margin-bottom: 24px;
}


/* --- [m1-4] リスト --- */
.list{
	margin-bottom: 24px;
}
.list-li {
	margin-bottom: 8px;
	position: relative;
}
/* --- [m1-4-1] リスト > 箇条書き --- */
.list-mark-dot{
	background: url(image/mark-dot.svg) no-repeat 1em .6em;
	background-size: 8px;
	padding-left: 2em;
}	

/* --- [m1-4-2] リスト > リンク --- */
.list-mark-link{
	background: url(image/mark-link.svg) no-repeat 1em .5em;
	background-size: 8px;
	padding-left: 2em;
}
a.list-mark-link{
	background-position: 1em .5em;
	padding: .1em 0 .1em 2em;
}

/* --- [m1-4-3] リスト > アンカーリンク --- */
.list-mark-anchor{
	background: url(image/mark-anchor.svg) no-repeat .9em .3em;
	background-size: 16px;
	padding-left: 2em;
}

/* --- [m1-4-4] リスト > ダウンロード --- */
.list-mark-download{
	background: url(image/mark-download.svg) no-repeat 1em .4em;
	background-size: 12px;
	padding-left: 2em;
}
a.list-mark-download{
	background-position: 1em .4em;
	padding: .1em 0 .1em 2em;
}

/* --- [m1-4-5] リスト > PDF --- */
.list-mark-pdf{
	background: url(image/mark-pdf.svg) no-repeat 1em .4em;
	background-size: 12px;
	padding-left: 2em;
}
a.list-mark-pdf{
	background-position: 1em .4em;
	padding: .1em 0 .1em 2em;
}
/* --- [m1-4-6] リスト > 番号付きリスト --- */
.list-number{
	list-style-position: outside;
	margin-left: 2em;
	padding-left: 0;
}

/* --- [m1-4-7] リスト > 注釈 --- */
.list-notes{
	clear: left;
	float: left;
	font-size: 1.4rem;
	margin-bottom: 12px;
	width: 2em;
}
.list-notes-text{
	margin-bottom: 12px;
	margin-left: 2em;
}

/* --- [m1-4-8] リスト > 注意書き --- */
.list-comments{
	clear: left;
	float: left;
	margin-bottom: 12px;
	width: 1.5em;
}
.list-comments-text{
	margin-bottom: 12px;
	margin-left: 1.5em;
}


/* --- [m1-4-9] リスト > 横並び --- */
.list-side{
	float: left;
	padding: 0 12px 0 1.5em;
	margin-bottom: 12px;
}
.list-side-dot{
	background: url(image/mark-dot.svg) no-repeat 10px 8px;
	background-size: 8px;
}
.list-side-link{
	background: url(image/mark-link.svg) no-repeat 10px 8px;
	background-size: 8px;
}

/* --- [---] リスト > 入れ子 --- */
.list-nest{
	margin-bottom: 6px;
}

/* --- [m1-5-1] 説明文付きリスト--- */
.explain-text{
	margin-bottom: 12px;
	padding-left: 1.2em;
}

/* --- [m1-5-1-2] 説明文付きリスト > 縦並び--- */
.explain-brackets:before{
	content: "【";
	padding-right: 0.2em;
}

.explain-brackets:after{
	content: "】";
	padding-left: 0.2em;
}


/* --- [m1-5-1-2] 説明文付きリスト > リンク--- */
.explain-link{
	border-bottom: dashed 1px #222;
}

.explain-link-border{
	border-top: dashed 1px #222;
	padding-top: 12px;
}

.explain-link-border:first-child{
	border: none;
}

/* --- [m1-5-2] 日付けリスト > 横並び--- */
.dateside-title{
	float: left;
	width: 9em;
}
@media screen and (max-width: 600px){
	.dateside-title{
		float: none;
		width: 100%;
	}
}
.dateside-text{
	margin-left: 9em;
}
@media screen and (max-width: 600px){
	.dateside-text{
		margin-left: 0;
	}
}

/* --- [m1-5-3] テーブル > top展示会・セミナー情報スケジュール --- */
.table-schedule{
	width: 90%;
	margin: 24px auto;
	border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;

}

/* --- [m1-6] テーブル--- */

.table{
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	margin-bottom: 24px;
	width: 100%;
}

.table-th, .table-td{
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
	box-sizing: border-box;
	text-align: left;
	padding: 12px 18px;
	vertical-align: top;
}
@media screen and (max-width: 1021px){
	.table-th, .table-td{
		display: block;
		text-align: center;
	}
	.table-wdimensional > tbody > tr > th:first-child {
		background-color: #888;
		color: #fff;
	}
	.table-wdimensional > tbody > tr > th:nth-child(2) {
		background-color: #bbb;
		color: #333;
	}
}

.table-th{
	background-color: #E6E6E6;
	font-weight: normal;
}

.table-th-fixed{
	width: 8.5em;
}
@media screen and (max-width: 1021px){
	.table-th-fixed{
		width: auto;
	}
}
.table-td{
	background-color: #fff;
}
.table-td > ol{
	margin-left: 18px;
}
.table-td ol:last-child, .table-td ul:last-child, .table-td dl:last-child, .table-td p:last-child{
	margin-bottom: 0;
}

/* --- [m1-6-1] テーブル > キャプションあり--- */
.table-caption{
	text-align: left;
	margin-bottom: 5px;
}
@media screen and (max-width: 1021px){
	.scrolltableset .table-caption{
		display: none;
	}
}
/* --- [m1-6-2] テーブル > キャプションなし--- */
.table-captionnone{
	display: none;
}

/* --- [m1-6--] テーブル > 幅30%--- */
.table-width30{
	width: 30%;
}

@media screen and (max-width: 1021px){
	.table-width30{
		width: 100%;
	}
}

/* --- テーブル組み換え --- */
@media screen and (max-width: 1021px){
	/* パターン1 */
	.exchangetable1 > tbody > tr > th:first-child{
		background-color: #888;
		color: #fff;
	}
	.exchangetable1 > tbody > tr > th:nth-child(2){
		background-color: #bbb;
		color: #333;
	}
	.exchangetable1 > tbody > tr > th:nth-child(n+3){
		background-color: #d1d1d3;
	}
	
	/* パターン2 */
	.exchangetable2 > tbody > tr > th:first-child{
		background-color: #888;
		color: #fff;
	}
	.exchangetable2 > tbody > tr > th:nth-child(2){
		background-color: #bbb;
		color: #333;
	}
	.exchangetable2 > tbody > tr > .affiliation{
		background-color: #d1d1d3;
	}
	.exchangetable2 > tbody > tr > .affiliation-item{
		background-color: #e6e6e6;
	}
	
	/* パターン3 */
	.exchangetable3 > tbody > tr > th:first-child{
		background-color: #888;
		color: #fff;
	}
	.exchangetable3 > tbody > tr > th:nth-child(n+2){
		background-color: #bbb;
		color: #333;
	}
	
	/* パターン4 */
	.exchangetable4 > tbody > tr > .affiliation{
		background-color: #888;
		color: #fff;
	}
	.exchangetable4 > tbody > tr > .affiliation-item{
		background-color: #bbb;
		color: #333;
	}
	.exchangetable4 > tbody > tr > th:nth-child(n+3){
		background-color: #d1d1d3;
	}
}
/* --- スクロールテーブル --- */
.scrolltableset{
	background-color:transparent;
	overflow: auto;
	height: auto;
	margin-bottom: 24px;
	max-height: 550px;
	width: 100%;
}
@media screen and (max-width: 1021px){
	.scrolltableset{
		max-height: none;
	}
}

.scrolltable{
	border-top: solid 1px #cccccc;
    border-left: solid 1px #cccccc;
}
@media screen and (max-width: 1021px){
	.scrolltable .table-th{
		display: table-cell;
	}
	.scrolltable .table-td{
		display: table-cell;
	}
}
/* --- テーブル colgroup--- */
.colgroup-line{
	border: solid 6px #bad6e5;
}
.colgroup-th{
	background-color: #bad6e5;
	font-weight: bold;
}


/* --- [m1-7] 画像--- */
.image{
	margin-bottom: 24px;
}
/* --- [m1-7-1] 画像--- */
.arrow-right{
	padding-top: 100px;
}
@media screen and (max-width: 600px){
.arrow-right{
	padding-top: 0px;
	transform: rotate( 90deg );
	}
}
/* --- [m1-8] 枠囲み--- */
.box{
	margin-bottom: 24px;
	padding: 18px 12px;
}
.box-title{
	color: #222;
	font-size: 2rem;
	line-height: 1.75;
	margin-bottom: 18px;
	text-align: center;
}

/* --- [m1-8-1] 枠囲み > 背景水色--- */
.box-background-lightblue{
	background-color: #ccefff;
}

/* --- [m1-8-2] 枠囲み > 背景白--- */
.box-background-white{
	background-color: #fff;
}

/* --- [m1-8-3] 枠囲み > 見出し左寄せ--- */
.box-title-left{
	text-align: left;
}


/* --- [m1-9] タブナビゲーション--- */
.tabnavi{
	border-bottom: solid 2px #01418F;
	margin-bottom: 24px;
	position: relative;
	width: 100%;
}

/* タブナビ表示領域 */
.tabnavi-area{
    margin: 0 auto;
    overflow: hidden;
	width: 90%;
}
@media screen and (max-width: 600px){
	.tabnavi-area{
		width: 85%;
	}
}

/* loopSlider */
.tabnavi-inner {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    position: relative;
	text-align: left;
	z-index: 2;
}
/* loopSlider　CLEARFIX ELEMENTS */
.tabnavi-inner:after {
	clear: none;
	content: "";
    display: none;
}

.tabnavi-list{
	background-color: #7A98AE;
	margin: 0 6px;
	overflow: hidden;
}
@media screen and (max-width: 600px){
	.tabnavi-list{
		margin: 0 3px;
	}
}

.tabnavi-a:link{
	color: #222;
	display: block;
	padding: 12px 18px;
	text-decoration: none;
}
.tabnavi-current{
	background-color: #01418F;
}
.tabnavi-current-a:link{
	color: #fff;
	text-decoration: none;
}
.tabnavi-a:hover{
	background-color: rgba( 186, 214, 229, 0.6 );
}
.tabnavi-a:visited{
	color: #222;
}
.tabnavi-current-a:visited{
	color: #fff;
}

/*　タブナビコントローラー　*/
.tabnavi-controler{
    display: table;
	padding:0;
	position: absolute;
    top: 0;
	width: 100%;
}

.tabnavi-controler-before{
	display: table-cell;
	text-align: left;
}

.tabnavi-arrow-before{
	background-color: transparent;
	border: 0;
    font-size: 0;
	margin-right: 1%;
	padding: 8.6px 0;
	width: 9%;
}
.tabnavi-arrow-before:before{
	content: "<";
	color: #004894;
	font-size: 2.8rem;
}

.tabnavi-controler-next{
	display: table-cell;
	text-align: right;
}

.tabnavi-arrow-next{
	background-color: transparent;
	border: 0;
    font-size: 0;
    margin-left: 1%;
	padding: 8.6px 0;
	width: 9%;
}
.tabnavi-arrow-next:before{
	content: ">";
	color: #004894;
	font-size: 2.8rem;
}

/* --- [m1-10] フューチャーユニット [m1-11] パネルユニット 共通 --- */
.unit{
	background-color: #222;
	margin-bottom: 24px;
}
.unit-a:link{
	color: #fff;
	text-decoration: none;
}
.unit-a:hover{
	opacity: .8;
}
.unit-a:visited{
	color: #fffff0;
}
.unit-title{
	font-size: 1.8rem;
	line-height: 1.75;
	margin-bottom: 24px;
}
.unit-inner{
	box-sizing: border-box;
	padding: 18px 12px 6px;
}

/* --- [m1-10] フューチャーユニット--- */
.unit-future{
	align-items:stretch;
	display: flex;
	flex-direction: row-reverse;
}
@media screen and (max-width: 1021px) {
	.unit-future{
		flex-direction: column-reverse;
	}
}
.unit-inner-future{
	width: 48%;
}
@media screen and (max-width: 1021px) {
	.unit-inner-future{
		width: 100%;
	}
}
.unit-image-future{
	width: 52%;
}
@media screen and (max-width: 1021px) {
	.unit-image-future{
		width: 100%;
	}
}

/* --- [m1-11] パネルユニット--- */
.unit-panel{
	align-items:stretch;
	display: flex;
	flex-direction: column-reverse;
}

/* --- [m1-11] パネルユニット IE11対策--- */
.unit-panel a,
.unit-panel p{
	min-height: 0%;
}

/* --- [m1-11-2] パネルユニット > テキスト--- */
.panel-list{
	margin-bottom: 12px;
	padding: 12px 24px 0;
}

/* --- [m1-11-3] パネルユニット > ニュースリリース（ 画像縦横100％（テキスト背景透過）） --- */
/* 
.unit-innerset{
	position: relative;
}

.unit-inner2{
	background-color: rgba(34,34,34,.8);
	bottom: 0;
	box-sizing: border-box;
	padding: 18px 12px 6px;
    position: absolute;
	width: 100%;
}
@media screen and (max-width: 1021px){
	.unit-inner2{
		background-color: #222;
		position: static;
	}
}
*/
.unit-innerset p{
	position: relative;
	overflow: hidden;
	padding-top: 75% /* 画像縦横比 */
}
.unit-innerset img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.unit-inner2{
	background-color: #222;
	bottom: 0;
	box-sizing: border-box;
	padding: 18px 12px 6px;
	position: static;
	width: 100%;
}

.explain2, 
.explain-text2{
	line-height: 1.5;
}
.unit-image{
	vertical-align: top;
}



/* --- [m1-12] リンクボタン--- */
.btn{
	margin-bottom: 24px;	
}

.btn-a{
	color: #fff;
	display: inline-block;
	padding: 12px 24px;
}

.btn-a:link{
	color: #fff;
	text-decoration: none;
}

.btn-a:visited{
	color: #fffff0;
}

/* --- [m1-12-2] リンクボタン > 青--- */
.btn-blue{
	background-color: #01418F; 
	border: 2px solid #01418F;
}

.btn-blue:hover{
	background-color: #fff;
	border: 2px solid #01418F;
	color: #01418F;
}

/* --- [m1-12-3] リンクボタン > グレー--- */
.btn-gray{
	background-color: #4c4c4c;
	border: 2px solid #4c4c4c;
}

.btn-gray:hover{
	background-color: #fff;
	border: 2px solid #4c4c4c;
	color: #4c4c4c;
}

/* --- [m1-12-4] リンクボタン > 横並び--- */
.btn-side{
	display: inline-block;
	margin: 0 12px 12px 0;
}

/* --- [m1-13] ローテーションリンク--- */
.rotation{
	margin-bottom: 24px;
}

.rotation-box{
	float: left;
	position:	relative;
	margin: 0 24px 12px 0;
}

.rotation-box-marginnone{
	margin-right: 0;
}

.rotation-box-text{
	background-color: #222;
	bottom:	0;
	box-sizing: border-box;
	padding: 6px;
	position: absolute;
	text-align:	center;
	width: 100%;
}

.rotation-controll{
	margin: 10px auto;
	overflow: hidden;
	width: 220px;
}

.rotation-controll-btn,
.rotation-controll-play{
	float: left;
	height: 20px;
	overflow: hidden;
	width: 20px;
}

.rotation-controll-btn{
	margin-right: 20px;
}

/* --- ページネーション --- */
.slick-controler{
	display: flex;
	-webkit-justify-content: center;
  	justify-content: center;
}

.slick-controler .slick-dots li {
	cursor: pointer;
	display: inline-block;
	margin-right: 20px;
	padding: 0;
	position: relative;
	width: 15px;
}
.slick-controler .slick-dots li button {
	background: transparent none repeat scroll 0 0;
	border: 0 none;
    color: transparent;
    cursor: pointer;
    display: block;
    width: 20px;
    height: 20px;
}

.slick-controler .slick-dots li button:hover,
.slick-controler .slick-dots li button:focus {
	outline: medium none;
}
.slick-controler .slick-dots li button:hover:before,
.slick-controler .slick-dots li button:focus:before {
	color: #666;
}
.slick-controler .slick-dots li button:before {
	color: #ccc;
    content: "●";
    font-size: 45px;
    height: 20px;
    left: -3px;
    line-height: 22px;
    position: absolute;
    text-align: center;
    top: -2.5px;
}
.slick-controler .slick-dots li.slick-active button:before {
	color: #01418f;
	font-size: 45px;
}

/* --- 再生・停止ボタン --- */
.slick-controler .slick-auto .tglbtn{
	background: transparent none repeat scroll 0 0;
	border:0 none;
	color: transparent;
	cursor: pointer;
	outline: medium none;
	margin-left: -6px;
}

.slick-controler .slick-auto .tglbtn span{
	display: block;
}
.slick-controler .slick-auto .tglbtn .stopbtn{
	background-image:url("image/rotation_stop.svg");
	background-repeat: no-repeat;
	height: 22px;
	width: 22px;
}

.slick-controler .slick-auto .tglbtn .startbtn{
	background-image: url("image/rotation_play.svg");
	background-repeat: no-repeat;
	height: 22px;
	width: 22px;
}
.slick-controler .slick-auto .tglbtn:hover,
.slick-controler .slick-auto .tglbtn:active{
	opacity:0.7;
}
.slick-controler .slick-auto .tglbtn:focus{
	border: solid 1px orange;
}

/* --- [m1-14] ページ内リンク--- */

/* --- [m1-14-1] ページ内リンク > ボックス型--- */
.anchor{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1.4rem;
}
@media screen and (max-width: 600px){
	.anchor{
		justify-content: flex-start;
	}
}
.anchor-list{
	background-color: #E6E6E6;
	margin: 0 3px 6px;
	text-align: center;
}
@media screen and (max-width: 600px){
.anchor-list{
	flex-basis: 48%;
	}
}

.anchor-a:link{
	color: #222;
	display: block;
	padding: 12px 18px;
	text-decoration: none;
}

.anchor-current{
	background-color: #01418F;
}

.anchor-current-a:link{
	color: #fff;
	text-decoration: none;
}

.anchor-a:visited{
	color: #222;
}

.anchor-current-a:visited{
	color: #fff;
}

.anchor-a:hover{
	background-color: #4c4c4c;
	color: #fff;
}

.anchor-fixed{
	position: fixed;
	bottom: -48px;
	transition: all 0.8s ease-in-out;
	transform: translateY(-48px);
}

/* --- [m1-15-1] ページトップリンク--- */

.pagetop-button{
	background-color: #01418F;
	display: inline-block;
	padding: 20px;
	position: relative;
}
.pagetop-button:hover{
	background-color: #4c4c4c;
}
.pagetop-icon{
	border: 8px solid transparent;
	border-bottom: 16px solid #fff;
	bottom: 12px;
	height: 0;
	position: absolute;
	right: 12px;
	width: 0;
}

/* --- [m1-16] カテゴリーアクセスポイント--- */

.category-access-pointset{	
	position: relative;
}
@media screen and (max-width: 1021px){
	.category-access-pointset{
		padding: 0;
	}
}
.category-access-point{
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	position: absolute;
	text-align: center;
	width: 100%;
}
@media screen and (max-width: 1021px){
	.category-access-point{
		position: static;
	}
}
@media screen and (max-width: 600px){
	.category-access-wrap{
		flex-wrap: wrap;
	}
}
.category-access{
	padding-bottom: 40px;
}
@media screen and (max-width: 1021px){
	.category-access{
		padding: 0;
	}
}
	.category-access-navi{
	background-color: #222;
	position: relative;
	width: 25%;
	z-index: 1;
}
@media screen and (max-width: 600px){
	.category-access-navi{
		width: 50%;
	}
}
.category-access-anchor:hover{
	opacity: .8;
}
.category-access-title{
	background: -webkit-linear-gradient(top,rgba(17,17,17,.9),rgba(87,87,87,.2));
	background: -o-linear-gradient(top,rgba(17,17,17,.9),rgba(87,87,87,.2));
	background: linear-gradient(to top,rgba(17,17,17,.9),rgba(87,87,87,.2));
	bottom: 0;
	color: #fff;
	display: block;
	padding:18px 0;
	position: absolute;
	width: 100%;
}
/* --- [m1-17] google map--- */
.googlemap {
	height: 0;
	margin-bottom: 24px;
	overflow: hidden;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
}
 
.googlemap iframe,
.googlemap object,
.googlemap embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* --- [m1-18] 検索用 ページャー--- */
.search-pagerset{
	display: flex;
	margin-bottom: 6px;
}
@media screen and (max-width: 600px){
	.search-pagerset{
		display: block;
	}
}

.search-pager-all{
	padding: 0 12px;
	width: 50%;
}
@media screen and (max-width: 600px){
	.search-pager-all{
		padding: 0;
		text-align: right;
		width: 100%;
	}
}

.search-pager-parta{
	width: 50%;
}
@media screen and (max-width: 600px){
	.search-pager-parta{
		width: 100%;
	}
}

.search-pager-item{
	display: flex;
	justify-content: flex-end;
	margin:0;
}

.search-pager-prev{
	border-right: solid 1px #bbb;
	height: 20px;
	padding: 0 12px;
}

.search-pager-next{
	height: 20px;
	padding: 0 12px;
}
@media screen and (max-width: 600px){
	.search-pager-next{
		padding: 0 0 0 12px;
	}
}

/* --- [m1-19] お問い合わせ　アイコンエリア　--- */
.phone-erea{
	display: flex;
	justify-content: center;
}
.phone-number{
	padding: 5px 0 0 12px;
}

/* --- [m1-20] 展示会セミナー画像--- */
.exhibition-icon{
	margin-right: 10px;
	vertical-align: middle;
}



/* [m4] フッターモジュール
=========================================================================================== */ 

/* --- [m4-1] メガフッター--- */
/* --- [m4-1-1] フッターリスト --- */
.flex-container{
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1000px;
}

@media screen and (max-width: 1021px){
	.flex-container{
		display: block;
	}
}

@media screen and (max-width: 1021px){
	.flex-m-reset{
		display: block;
	}
}
.flex-culumn1-1{
	flex-basis: 23.2%;
}

.flex-culumn1-2{
	flex-basis: 48.8%;
}

.flex-culumn1-3{
	flex-basis: 74.4%;
}

.flex-culumn2-2{
	flex-basis: 65.591%;
}

.flex-culumn2-1{
	flex-basis: 31.182%;
}

.flex-culumn3-1{
	flex-basis: 47.54%;
}

.flex-culumn-half{
	flex-basis:50%;
}

@media screen and (max-width: 1021px){
	.flex-m-culumn-half{
		flex-basis:50%;
	}
	.flex-m-order1{
		order: 1;
	}
	.flex-m-order2{
		order: 2;
	}
	.flex-m-order3{
		order: 3;
	}
}
@media screen and (max-width: 600px){
	.flex-m-culumn-half{
		flex-basis:100%;
	}
	.flex-m-order1{
		order: 0;
	}
	.flex-m-order2{
		order: 0;
	}
	.flex-m-order3{
		order: 0;
	}
}

.flex-center{
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-footer-title{
	background: url(image/mark-menulink.svg) no-repeat 8px 8px;
	background-size: 8px;	
	margin-bottom: 12px;
	padding-left: 1.5em;
}
.flex-container > *{
 	box-sizing: border-box;
}



/* --- [m4-2] フッター--- */
.footer{
	display: inline-block;
}

.footer-list{
	background: url(image/mark-footer.svg) no-repeat 6px 8px;
	background-size: 8px;
	float: left;
	padding: 0 12px 6px 1em;
}

.footer-a:link{
	color: #fff;
	font-size: 1.4rem;	
}

.footer-a:visited{
	color: #fff;
}

@media screen and (max-width: 600px){
	.footer{
		border-top: 1px solid #444;
		display: block;
		text-align: center;
		margin: 0;
	}
	.footer-list{
		background: none;
		border-bottom: 1px solid #444;
		float: none;
		padding: 0;
	}
	.footer-a{
		display: block;
		padding: 12px 0;
	}
	.footer-a:hover{
		background: #888;
	}
}

.footer-copyright{
	color: #fff;
	float: right;
}

@media screen and (max-width: 600px){
	.footer-copyright{
		float: none;
		text-align: center;
		padding: 6px 0;

	}
}

/* [m5] ヘッダーモジュール
=========================================================================================== */ 

/* --- [m5-1] ロゴ--- */
.siteidentity{
	padding:  18px 0 6px;
}
@media screen and (max-width:600px){
	.siteidentity{
		padding: 6px 0;
	}
}
.siteidentity-logo{
	height: auto;
	margin: 0;
	vertical-align: bottom;
	width: auto;
}
@media screen and (max-width:600px){
	.siteidentity-logo{
		max-width: 80%;
	}
}
/* --- [m5-2] コーテシーナビ--- */
.courtesynavi{
	float: left;
	width: 91.805%;
}

.courtesynavi-list{
	margin: 24px 12px 24px 0;
	text-align: right;
}

.courtesynavi-item{
	background: url(image/mark-courtesy.svg) no-repeat 2px 6px;
	background-size: 8px;
	display: inline-block;
	font-size: 1.4rem;
	margin-left: 4px;
	padding-left: 1em;
}

@media screen and (max-width: 1021px){
	.courtesynavi{
		background: #ccc;
		float: none;
		width: 100%;		
	}
	.courtesynavi-list{
		float: none;
		text-align: center;
		margin: 0;
		display: flex;
		padding-bottom: 12px;
	}
	.courtesynavi-item{
		background: none;
		border-top: #fff solid 1px;
		border-bottom: #fff solid 1px;
		border-right: #fff solid 1px;
		box-sizing: border-box;
		flex-grow: 1;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.courtesynavi-item:last-child{
		border-right: none;
	}

}

/* --- [m5-2] コーテシーナビ--- */
.searchbox {
	float: right;
}
@media screen and (max-width: 1021px){
	.searchbox-item{
		float: left;
		margin: 0 0 0 12px;
	}
}

/* --- [m5-3] サイト内検索--- */
.search-set{
	background-color: #ccc;
	height: 150px;
	padding-bottom: 30px;
}

.btnclose{
	float: right;
	width: 40px;
	margin-bottom: 24px;
}

.search-box{
	clear: both;
}

#search-box-form .gsc-control-cse { 
	background-color: #ccc;
	border: none;
	margin: 24px auto 0;
	padding: 0;
	width: 50%;
	min-width: 280px;
}
#search-box-form .gsc-control-cse .gsst_a{
	padding-top: 6.5px;
}
/* デフォルトで設定されている(疑似的な)テキストボックスの
デザイン設定を解除 */
#search-box-form .gsc-search-box .gsc-input-box,
#search-box-form .gsc-search-box .gsc-input-box-hover,
#search-box-form .gsc-search-box .gsc-input-box-focus {
	border: none;
	box-shadow: none;
	height: 31px;
}
/* 検索ボタンの背景をボタンのように見せかける */
#search-box-form .gsc-search-box .gsc-search-button {
	position: relative;
	border-radius: 5px;
	background: #004894;
	cursor: pointer;
	min-width: 5em;
}
/* 検索ボタンの背景部分にテキストを表示させる */
#search-box-form .gsc-search-box .gsc-search-button:before {
	color: #FFF;
	content: '検索';
	font-size: 1.4rem;
	left: 28%;
	line-height: 1;
	position: absolute;
	top: 30%;
	z-index: 1;
}
/* 検索ボタンを透明化し背景のみを表示させる */
#search-box-form .gsc-search-box button.gsc-search-button-v2,
#search-box-form .gsc-search-box button.gsc-search-button {
	padding: 0 0 12px;
	opacity: 0;
}
#search-box-form .gsc-search-button button{
	width: 100%;
	display: block;
}
#search-box-form .gsc-search-box button.gsc-search-button-v2{
	z-index: 2;
}
/* --- [m5-4] グローバルナビゲーション--- */
.globalnavi{
	width: 14.2%;
	text-align: center;
	color: #666;
	float: left;
	line-height: 2.5;
	box-sizing: border-box;
	border-left: dotted 1px #8FA4B2;
}

.globalnavi:last-child{
	border-right: dotted 1px #8FA4B2;
}

.glovalnavi-a{
	border-bottom: solid 4px #fff;	
}
.glovalnavi-a:link{
	display: block;
	text-decoration: none;
	color: #4c4c4c;
}

.glovalnavi-current{
	border-bottom: solid 4px #01418F;
	font-weight: bold;
}

.glovalnavi-a:hover, .glovalnavi-a:active{
	background-color: rgba( 186, 214, 229, 0.2 );
	border-bottom: solid 4px #01418F;
}

/* --- [m5-4] グローバルナビゲーション > メガメニュー--- */
.globalnavi-box{
	background-color: #ccc;
	display: none;
	padding: 12px 0 12px;
}
@media screen and (max-width: 1021px){
	.globalnavi-box{
		border-bottom: solid #888 1px;
		padding: 0;
	}
	.globalnavi-box .list{
		margin-bottom: 0;
	}
	.globalnavi-box-inner{
		padding-top: 12px;
	}
}
.menu-title{
	background: url(image/mark-menulink.svg) no-repeat 32px 6px;
	background-size: 8px;
	margin-bottom: 12px;
	padding-left: 3em;
}

.menu-title-a:link{
	color: #222;
}

.menu-title-a:visited{
	color: #222;
}
@media screen and (max-width: 1021px){
	.menu-title-link{
		font-weight: bold;
		padding: 10px;
	}
	.menu-title-link-a{
		color: #222;
		display: block;
	}
	.menu-title-link-a:link{
		color: #222;
	}
	.menu-title-link-a:visited{
		color: #222;
	}
}
.list-menu{
	display: flex;
	flex-wrap: wrap;
}
.list-menu-3col li{
	width: 27%;
}
.list-menu-2col li{
	width: 41%;
}
@media screen and (max-width: 1021px){
	.list-menu{
		display: block;
	}
	.list-menu-3col li{
		width: 100%;
	}
	.list-menu-2col li{
		width: 100%;
	}

}
.list-mark-menulink{
	background: url(image/mark-menulink.svg) no-repeat 28px 6px;
	background-size: 8px;
	font-size: 1.4rem;
	margin-bottom: 6px;
	padding-left: 3em;
}

.list-mark-menudot{
	background: url(image/mark-menudot.svg) no-repeat 8px 2px;
	background-size: 12px;
	margin: 12px 0 6px;
	padding-left: 1.5em;
}

.menu-title-sub{
	font-size: 1.4rem;
	padding: 8px 0 4px 12px;
	color: #222;
}
@media screen and (max-width: 1021px){
	.menu-title-sub{
		border-top: solid #999 1px;
	}
}
.menu-a:link{
	color: #222;
}

.menu-a:visited{
	color: #222;
}

@media screen and (max-width: 1021px){
	.list-m-box{
		background: #ddd;
		border-top: solid #999 1px;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.list-m-box:hover{
		background: #bbb;
	}
	.menu-a{
		background: url(image/mark-menulink.svg) no-repeat 95% 1.2em;
		background-size: 10px;
		display: block;
		padding: 10px 2em 10px 2em;
	}
	.menu-a:hover{
	}
}

.acordion-head{
	color: #222;
/*	font-weight: bold;*/
}
.acordion-head:hover{
	background: #bbb;
}
.acordion-head span, .acordion-head a{
	display: block;
	padding: 12px 25px 12px 20px;
	color: #222;
}
.acordion-head a{
	background: url(image/mark-menulink.svg) no-repeat 98% center;
    background-size: 15px;
}

.acordion-head-darkgray{
	background-color:#4e4e4e;
}
.acordion-head-darkgray span, .acordion-head-darkgray a{
	display: block;
	padding: 12px 25px 12px 20px;
	color: #fff;
}
.acordion-head-darkgray a{
	background: url(image/mark-menulink.svg) no-repeat 98% center;
    background-size: 15px;
    fill: #fff;
}



/* --- [m5-5] ブレッドクラム--- */
.breadcrumb{
	background: url(image/mark-courtesy.svg) no-repeat 4px center;
	background-size: 8px;
	float: left;
	font-size: 1.4rem;
	margin-bottom: 6px;
	padding-left: 14px;
}

.breadcrumb:first-child{
	background: none;
	padding: 0;
}

.breadcrumb-current{
	font-weight: normal;
}

/* [m6] スキップリンクモジュール
=========================================================================================== */ 
.skip{
	line-height: 2;
	text-align: center;
}
.skip-a:link{
	color: #fff;
}
.skip-a:visited{
	color: #fff;
}
.skip-a {
  position: absolute;
  top: -10em;
}
.focus {
  position: static; /*JS用クラスであれば、is-つけて*/
}


/* [m] 共通モジュール
=========================================================================================== */ 
/* --- [--] 表示制御 --- */
/* --- 600px以下で非表示 --- */
@media screen and (max-width: 600px){
	.min-hidden-600{
		display: none;
	}
}

/* --- 1021px以下で非表示 --- */
@media screen and (max-width: 1021px){
	.min-hidden-1021{
		display: none;
	}
}

/* --- スマートフォン専用　表示・非表示 --- */
.display-sp{
	display: none;
}

@media screen and (max-width: 1021px){
	.display-sp{
		display: block;
	}
}
/* --- すべてのデバイスで非表示 --- */
.hidden-all{
	display: none;
}

/* --- [--] Section --- */
.section{
	margin-bottom: 40px;
}

/* --- [--] cleafix --- */
.clearfix:after{
	clear: both;
	content: " ";
	display: block;	
}
/* --- [--] 画像制御 --- */
.img-all{
	width: 100%;
	height: auto;
}

/* --- [--] display:block --- */
.block{
	display: block;
}

.block-sp-inlineblock{
	display: block;
}

@media screen and (max-width: 600px){
	.block-sp-inlineblock{
		display: inline-block;
	}	
}

.inlineblock{
	display: inline-block;
}

/* --- [--] 背景色 > 白 --- */
.background-white{
	background: #fff;
}

/* --- [--] 背景色 > 水色 --- */
.background-lightblue{
	background: #ccefff;
}

/* --- [--] 背景色 > グレー --- */
.background-lightgray{
	background: #e6e6e6;
}

/* --- [--] 文字サイズ > 小 --- */
.text-small{
	font-size: 1.4rem;
}

/* --- [--] 文字サイズ > 大 --- */
.text-large{
	font-size: 1.8rem;
}

/* --- [--] 文字サイズ > 最大 --- */
.text-xlarge{
	font-size: 2.2rem;
}

/* --- [--] フォントカラー > 赤 --- */
.fontcolor-red{
	color: #ff0025;
}

/* --- [--] フォントカラー > 濃紺 --- */
.fontcolor-deepblue{
	color: #004894;
}
	
/* --- [--] 中央寄せ --- */
.center{
	text-align: center;
}

/* --- [--] 右寄せ --- */
.right{
	text-align: right;
}

/* --- [--] 左寄せ --- */
.left{
	text-align: left;
}


/* --------------------------------------------------------------------------------------- 

States

------------------------------------------------------------------------------------------ */

/* [-] ハンバーガーメニュー
=========================================================================================== */ 
.is-close span{
	background: url(image/sp_open.svg) no-repeat 98% center;
	background-size: 15px;
}

.is-open span{
	background: url(image/sp_close.svg) no-repeat 98% center;
	background-size: 15px;
}	


/* --------------------------------------------------------------------------------------- 

application

------------------------------------------------------------------------------------------ */

/* [-] メニュー
=========================================================================================== */ 

.list-block{
    display: flex;
    flex-wrap: wrap;
}

.list-block-link{
    display: flex;
    flex-direction: column;
    width: 25%;
    position: relative;
    box-sizing: content-box;
    text-align: center;
}

@media screen and (max-width: 600px){
	.list-block-link{
    width: 100%;
	}
}

.block-link-a:link{
    flex-grow: 1;
    display: block;
    text-decoration: none;
    color: #003a77;
    background-color: #e9e9e9;
    padding: 20px 5px 20px;
    margin: 8px 10px 8px 10px;
}

.block-link-a:hover{
    opacity: .8;
	color: #2576B1;
}