/* Reset
-------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
input, textarea {border:0; padding:0; margin:0; outline: 0;}
iframe {border:0; margin:0; padding:0;}
input, textarea, select {margin:0; padding:0px;}


/* Font
-------------------------------------------- */
.text11 { font-size:0.6875rem; }
.text12 { font-size:0.75rem; }
.text13 { font-size:0.8125rem; }
.text14 { font-size:0.875rem; }
.text15 { font-size:0.9375rem; }
.text16 { font-size:1.0rem; }
.text17 { font-size:1.0625rem; }
.text18 { font-size:1.125rem; }
.text19 { font-size:1.1875rem; }
.text20 { font-size:1.25rem; }
.text21 { font-size:1.3125rem; }
.text22 { font-size:1.375rem; }
.text23 { font-size:1.4375rem; }
.text24 { font-size:1.5rem; }
.text25 { font-size:1.5625rem; }
.text26 { font-size:1.625rem; }
.text27 { font-size:1.6875rem; }
.text28 { font-size:1.75rem; }


/* Style
-------------------------------------------- */
html, body {
    width:100%; 
    padding:0; 
    margin:0;
	font-size: 100%; /* =16px */   
}

body {	
	background-color: #ffffff;
	color: #333333;
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,Osaka,'MS PGothic',arial,helvetica,sans-serif;
	*font-size:small;
	*font:x-small;	
	line-height: 1.6;
	position:relative;
}

a {
	color: #333333;
	text-decoration:none;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}
a:hover {
	color: #333333;
	text-decoration:none;	
}

.clear{content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

br.narrow-hide{display: inline-block;}
br.narrow-show{display: none;}

.fadein {
    opacity : 1;
    transform : translate(0, 0);
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
    }
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.fadein-foot {
    opacity : 1;
    transform : translate(0, 0);
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
    }
.fadein-foot.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.effect-off .fadein {
    opacity : 1;
    transform : translate(0, 0);
    }

.leftin {
    opacity : 0.1;
    transform : translate(-200px, 0);
	transition: all 0.6s ease-out;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
    }
.leftin.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.rightin {
    opacity : 0.1;
    transform : translate(200px, 0);
	transition: all 0.6s ease-out;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
    }
.rightin.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.preparation{
	opacity: 0.5;
}


.rotation {
	transition: all 0.6s ease-out;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
    }
.rotation.scrollin {
    transform: rotateY( 360deg ) ;
    }
a:hover .rotation{
    transform: rotateY( 180deg ) ;
}

a.icon-clickable-area .icon-area,
a.icon-clickable-area .title-area,
a.icon-clickable-area .desc-area
{
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    
}
a.icon-clickable-area:hover .icon-area{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
a.icon-clickable-area:hover .title-area{
    color: #2f5d97;
    text-decoration: underline;    
}
a.icon-clickable-area:hover .copy-area{
    color: #2f5d97;
    text-decoration: underline;
}
a.icon-clickable-area:hover .desc-area{
}
a.icon-clickable-area .title-area:after{
    transition: all 0.5s ease-out !important;
    -webkit-transition: all 0.5s ease-out !important;
    -moz-transition: all 0.5s ease-out !important;
    -o-transition: all 0.5s ease-out !important;
}
a.icon-clickable-area:hover .title-area:after{
    transform: translateY(0%) translateX(-50%) scale(2.0,1.0) !important;
    -webkit- transform: translateY(0%) translateX(-50%) scale(2.0,1.0) !important;
}
/* Header
-------------------------------------------- */
header {
	position:fixed;
	z-index: 10;
	top: 0px;
	left:0px;
	width: 100%;
	opacity: 1.0;
}
header .wrap-header{
	padding: 1.16% 0% 1.16% 0%;
}

header .wrap-header #logo {
	display: inline-block;
	float: left;
    width: 24.45%;
	padding: 1.5% 0% 0% 0%;  
}
header .wrap-header  #logo a{
	display: block;
	padding: 0px;
    text-align: center;
}
header .wrap-header  #logo a .logo-img{
    width: 100%;
    margin: 0 auto;
}
header .wrap-header #logo a h1.main{
	font-size:0.9375rem; 
	padding: 3.4% 0% 1.5% 0%;  
    font-weight: normal;
}
header .wrap-header  #logo a h2.sub{
	font-size:0.6875rem;
    font-weight: normal; 
    color: #444444;
    opacity: 0.6;
}



/* Navigation
-------------------------------------------- */
nav {
	display: inline-block;
	float: right;
    width: 70%;
}
nav .wrap-nav{
	padding: 2.8% 0% 0% 0%;
}

.menu ul {list-style: none;margin: 0;padding: 0;}
.menu  ul li {
	position: relative;
	float: left;
    width: 20%;
}
.menu  ul li:last-child{
	position: relative;
	float: left;
}
.menu  ul li a {
	display: block;
	text-align:center;
    width: 63%;
    margin: 0 auto;
}
/*.menu  ul li a.current{
    color: #2f5d97;
}*/
.menu  ul li a .en{
	display: block;
	font-size:1.125rem;
	font-family: 'Oswald', sans-serif;
}
.menu  ul li a .ja{
	display: block;
	font-size:0.75rem;
}

/* Effect 3: bottom line slides/fades in */
.cl-effect-3 a {
    position:relative;
}

.cl-effect-3 a::after {
    position: absolute;
    top: 125%;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #2f5d97;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    transform: translateY(10px);
}

.cl-effect-3 a:hover::after{
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}
.cl-effect-3 a.current::after{
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}



/* Menu Fixed (anifixed)
-------------------------------------------- */
header,
header .wrap-header,
header .wrap-header  #logo a .logo-img,
header .wrap-header  #logo a h1.main,
header .wrap-header  #logo a h2.sub,
header nav .wrap-nav,
header .menu  ul li a .en,
header .menu  ul li a .ja,
header nav 
{
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}

header.anifixed {
    position: fixed;
    background-color: rgba(255,255,255,0.96);
    box-shadow:0px 2px 4px 0px rgba(100,100,100,0.1);
    top:0px;
    left:0px;
    opacity: 1.0;
}
header.anifixed .wrap-header{
	padding: 0.66% 0% 0.66% 0%;
}
header.anifixed .wrap-header  #logo {
	padding: 1.2% 0% 0% 0%;  
}

header.anifixed .wrap-header  #logo a .logo-img{
    width: 85%;
}
header.anifixed .wrap-header #logo a h1.main{
	font-size:0.75rem;
    padding: 2.4% 0% 1.5% 0%; 
}
header.anifixed .wrap-header  #logo a h2.sub{
    display: none;
    opacity: 0.0;
    font-size: 0;
}
header.anifixed nav {
    width: 68%;
}
header.anifixed nav .wrap-nav{
	padding: 1.3% 0% 0% 0%;
}
header.anifixed .menu  ul li a .en{
	font-size:1.0rem;
}
header.anifixed .menu  ul li a .ja{
	font-size:0.6875rem;
 
}
header.anifixed .cl-effect-3 a::after {
    top: 115%;
}


/* Content
-------------------------------------------- */
.content {
	position: relative;
	background-color: #ffffff;   
}
.content.color-bg{
	background-color: #f6f6f6;
}
.content .wrap-content{}
.main-content{}
.wrap-col{
	padding: 6% 0 6% 0;
}
.content-title-wrap{
	text-align: center;
	margin: 0 0 5% 0;
    position: relative;
	padding: 0 0 1.3% 0;   
}
.content-title-wrap:after{
    content: "";
    position: absolute;
    height: 2px;
    width: 4.38%;
    bottom: 0;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit- transform: translateY(0%) translateX(-50%);
    background-color: #2f5d97;
}

.content-title-wrap .en{
	font-size:2.8125rem;
	font-family: 'Oswald', sans-serif;
	line-height: 1.1;
	padding: 0 0 0.2% 0;
}
.content-title-wrap .ja{
	font-size:0.875rem;	
}
.content-desc-wrap{
	text-align: center;
}

.content-btn-wrap{
	text-align: center;
	padding: 1% 0 0 0;  
}

.content-btn-wrap a{
	display:inline-block;
	text-align: center;
    background-color: #2f5d97;
    color: rgba(255,255,255,0.85);
    padding: 1.0% 6% 0.8% 6%;
	box-sizing: border-box;
}
.content-btn-wrap a:hover{
	opacity: 0.5;
}
.content-btn-wrap a .ja{
    font-size:0.8125rem;
    line-height: 1.4;
}
.content-btn-wrap a .en{
	font-size:0.9375rem;
	font-family: 'Oswald', sans-serif;   
}
/* list content
-------------------------------------------- */
.list-content{
	display: block;
    padding: 0;
}
/*trisect
-------------------------------------------- */
.list-content .trisect-wrap{
    display:block;
    float: left;
    width: 33.33%;
    text-align: center;    
}
.list-content .trisect-wrap.line{
    padding: 4% 0 0 0;   
}
/*list box(trisect)
-------------------------------------------- */
.list-content .trisect-wrap .list-box{
    display: block;
    position: relative;
    width: 87.6%;
    margin: 0 auto;
    background-color: #f5f5f5;
    padding: 5% 5% 5% 5%;
    box-sizing: border-box; 
    
    -webkit-perspective: 5000px;
    perspective: 5000px;     
}
.list-content .trisect-wrap .list-box.use-step{
    padding: 28% 5% 5% 5%;
}
.list-content .trisect-wrap a.list-box:hover{
	/*background-color: #EBEBEB;*/
	background-color: #DDDDDD;
}
.list-content .trisect-wrap .list-box .icon-area{
    position: relative;
    text-align: center;
    padding: 0 0 55% 0;
    height: 0px;
}
.list-content .trisect-wrap .list-box .icon-area img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);   
}
.list-content .trisect-wrap .list-box .copy-area{
    text-align: center;
    position: relative;
    font-size: 0.8125rem;
}
.list-content .trisect-wrap .list-box .copy-area.long{
    letter-spacing: -0.09em;
}
.list-content .trisect-wrap .list-box .title-area{
    text-align: center;
    padding: 3% 0 4% 0;
    position: relative;
}
.list-content .trisect-wrap .list-box .title-area:after{
    content: "";
    position: absolute;
    height: 2px;
    width: 12%;
    bottom: 0;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit- transform: translateY(0%) translateX(-50%);
    background-color: #2f5d97;
}
.list-content .trisect-wrap .list-box .title-area .ja{
	font-size:0.9375rem;	
}
.list-content .trisect-wrap .list-box .title-area .en{
	font-size:0.9375rem;
	font-family: 'Oswald', sans-serif;
}
.list-content .trisect-wrap .list-box .desc-area{
    position: relative;
    text-align: left;
    padding: 10% 0 5% 0;
	font-size:0.8125rem;	
}
.list-content .trisect-wrap .list-box .step-area{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%); 
    width: 100%;
    font-family: 'AileronLight';
    font-weight: normal;
    font-style: normal;
    font-size: 1.375rem;
    line-height: 1.4;
}
.list-content .trisect-wrap .list-box .step-area p.step01{
    color:#21a8a7;
}
.list-content .trisect-wrap .list-box .step-area p.step02{
    color:#d67e27;
}
.list-content .trisect-wrap .list-box .step-area p.step03{
    color:#dba91b;
}

.list-content .trisect-wrap .list-box .detail-area{
    position: relative;
    text-align: center;
    padding: 4% 0 0 0;
	font-size:0.8125rem;
    max-width: 345px;
    margin: 0 auto;
    /*height: 10%;*/
    height: 60px;
}
.list-content .trisect-wrap .list-box .portfolio-desc-area{
    position: relative;
    text-align: center;
    padding: 5% 0 5% 0;
	font-size:0.8125rem;
    max-width: 310px;
    margin: 0 auto;
}
.list-content .trisect-wrap .list-box .portfolio-desc-area p.category{
    display: inline-block;
    color:#ffffff;
    width: 100px;
    text-align: center;
    padding: 5px 0px 4px 0px;
    margin: 0 auto 5% auto;
} 
.list-content .trisect-wrap .list-box .portfolio-desc-area p.category.cat01{
    background-color: #0094e1;
}
.list-content .trisect-wrap .list-box .portfolio-desc-area p.category.cat02{
    background-color: #a03fdd;
}
.list-content .trisect-wrap .list-box .portfolio-desc-area p.category.cat03{
    background-color: #eb8a00;
}




/*matter box
-------------------------------------------- */
.list-content .trisect-wrap .matter-box{
    display: block;
    width: 87.6%;
    margin: 0 auto;
    padding: 0% 0% 0% 0%;
    box-sizing: border-box;
}
.list-content .trisect-wrap .matter-box .img-area{
    position: relative;
    text-align: center;
}
.list-content .trisect-wrap .matter-box .img-area img{
    position: relative;
}
.list-content .trisect-wrap .matter-box .title-area{
    text-align: center;
    padding: 9% 0 4% 0;
    position: relative;
}
.list-content .trisect-wrap .matter-box .title-area:after{
    content: "";
    position: absolute;
    height: 2px;
    width: 12%;
    bottom: 0;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit- transform: translateY(0%) translateX(-50%);
    background-color: #2f5d97;
}
.list-content .trisect-wrap .matter-box .title-area .ja{
	font-size:0.9375rem;	
}
.list-content .trisect-wrap .matter-box .desc-area{
    position: relative;
    text-align: left;
    padding: 6% 5% 0% 5%;
	font-size:0.8125rem;
}
/*list-quarter
-------------------------------------------- */
.list-content .list-quarter-wrap{
    display:block;
    float: left;
    width: 25%;
    text-align: center; 
}
/*list box(list-quarter)
-------------------------------------------- */
.list-content .list-quarter-wrap .list-box{
    display: block;
    width: 90.5%;
    margin: 0 auto 10% auto;
    background-color: #f5f5f5;
    padding: 8% 6% 8% 6%;
    box-sizing: border-box;
    
    -webkit-perspective: 5000px;
    perspective: 5000px;      
}
.list-content .list-quarter-wrap .list-box .icon-area{
    position: relative;
    text-align: center;
    padding: 0 0 65% 0;
    height: 0px;
}
.list-content .list-quarter-wrap .list-box .icon-area img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);   
}
.list-content .list-quarter-wrap .list-box .title-area{
    text-align: center;
    padding: 3% 0 4% 0;
    position: relative;
}
.list-content .list-quarter-wrap .list-box .title-area:after{
    content: "";
    position: absolute;
    height: 2px;
    width: 15%;
    bottom: 0;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit- transform: translateY(0%) translateX(-50%);
    background-color: #2f5d97;
}
.list-content .list-quarter-wrap .list-box .title-area .ja{
	font-size:0.9375rem;	
}
.list-content .list-quarter-wrap .list-box .title-area .en{
	font-size:0.9375rem;
	font-family: 'Oswald', sans-serif;
}
.list-content .list-quarter-wrap .list-box .desc-area{
    position: relative;
    text-align: left;
    padding: 10% 0 5% 0;
	font-size:0.8125rem;	
}


/*quarter
-------------------------------------------- */
.list-content .quarter-wrap{
    display:block;
    float: left;
    width: 25%;
    text-align: center;    
}
.list-content .quarter-wrap .news-list-box{
    display: block;
    position: relative;
    width: 90%;
    margin: 3px auto 10% auto;
}
.list-content .quarter-wrap .news-list-box:hover{
    background-color: #EBEBEB;
}
.list-content .quarter-wrap .news-list-box .img-area{
    position: relative;
    text-align: center;
}

.list-content .quarter-wrap .news-list-box .img-area{
	display: block;
	overflow: hidden;
}
.list-content .quarter-wrap .news-list-box .img-area img{
    -moz-transition: -moz-transform 0.3s ease-out;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    -ms-transition: -ms-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
.list-content .quarter-wrap .news-list-box:hover .img-area img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.list-content .quarter-wrap .news-list-box .text-area{
    position: relative;
    text-align: left;
    padding: 5% 5% 7% 5%;   
}
.list-content .quarter-wrap .news-list-box .text-area .date{
    display: inline-block;
    font-size:0.75rem;
    background-color: #2f5d97;
    color:#ffffff;
    padding: 1.2% 5% 1% 5%; 
    margin: 0 0 6% 0;
}
.list-content .quarter-wrap .news-list-box .text-area .title{
    font-size:0.8125rem;   
}
.list-content .quarter-wrap .news-list-box .new{
    display: block;
    position: absolute;
    top:-3px;
    right:-3px;
    width: 19%;
}
/* table content
-------------------------------------------- */
.table-content{
	display: block;
    padding: 0 0 3% 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    text-align: center;
}
.cost-table-wrap{
    display: table;
    width: 100%;
    font-size:0.8125rem; 
}
.cost-table-wrap .cost-box-wrap{
    position: relative;
    display: table-cell;
    width: 33.33%;
    vertical-align: middle;
    border-bottom: 1px solid #444444;
    border-left: 1px solid #444444;
    border-top: 1px solid #444444;
}
.cost-table-wrap .cost-box-wrap:last-child{
    border-right: 1px solid #444444;
}
.cost-table-wrap .cost-box-wrap .cost-title{
    position: relative;
    background-color: #e7e7e7; 
    border-bottom: 1px solid #444444; 
    padding: 12% 2% 12% 2%;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.cost-table-wrap .cost-box-wrap .cost-title span{
}
.cost-table-wrap .cost-box-wrap .cost-content{
    position: relative;
    padding: 12% 2% 12% 2%;
    display: flex;
    justify-content: center;
    align-items: center;     
}
.cost-table-wrap .cost-box-wrap .cost-content span{
}


/* banner content
-------------------------------------------- */
.wrap-banner-col{
	padding: 5% 0 5% 0;
}
.wrap-banner-col02{
	padding: 2% 0 5% 0;
}
.banner-content{
	display: block;
    text-align: center;
}
.banner-content a{
	display:inline-block;
    width: 28.46%;
    margin: 0 5% 0 5%;
}
.banner-content a.matomo{
    background-color: #E8A82B;
}
/*.banner-content a.matomo:hover{
    background-color: #BB2845;
}*/
.banner-content a.filemanager{
    background-color: #69B1DD;
}
/*.banner-content a.filemanager:hover{
    background-color: #059B9B;
}*/




/* split content
-------------------------------------------- */
.wrap-split-col{
	padding: 5% 0 5% 0;
}
.split-content{
    display: flex;
    flex-wrap: wrap; 
}

.split-content .content-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%; 
}
.split-content .content-box.right-box{}
.split-content .content-box.left-box{
    -webkit-order: -1;
    order: -1;
}

.split-content .content-box .img-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.split-content .content-box .img-box div{
    width: 89%;
}
.split-content .content-box .inner-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.split-content .content-box .inner-box .content-title-wrap{
    display: block;
	text-align:left;
	margin: 0 0 40px 0;
	padding: 0 0 20px 0;  
}
.split-content .content-box .inner-box .content-title-wrap:after{
    width: 60px;
    left: 0%;
    transform: translateY(0%) translateX(-0%);
    -webkit- transform: translateY(0%) translateX(-0%);
}
.split-content .content-box .inner-box .content-desc-wrap{
	text-align: left;
    font-size:0.8125rem;
}
.split-content .content-box .inner-box .content-desc-wrap.use-block{
    display:flex;
    justify-content: center;
    align-items: flex-start;
}
.split-content .content-box .inner-box .content-desc-wrap.width-limit{
    max-width: 600px;
}
.split-content .content-box .inner-box .content-desc-wrap .desc-block{
    padding: 0 60px 0 0;
}
.split-content .content-box .inner-box .content-desc-wrap .desc-block:last-child{
    padding: 0 0px 0 0;
}
.split-content .content-box .inner-box .content-desc-wrap p{
    margin-bottom: 1.0em;
}
.split-content .content-box .inner-box .content-desc-wrap p.list-style{
    margin-bottom: 1.6em;
}
.split-content .content-box .inner-box .content-desc-wrap p.box-list-style{
    display:flex;
    margin-bottom: 2.0em;
}
.split-content .content-box .inner-box .content-desc-wrap p.box-list-style span:nth-child(1){
    white-space: nowrap;
}
.split-content .content-box .inner-box .content-desc-wrap p.box-list-style span:nth-child(2){
}

.split-content .content-box .inner-box .content-desc-wrap p.box-list-style span{

}
.split-content .content-box .inner-box .content-desc-wrap p:last-child{
    margin-bottom: 0.0em;
}   
.split-content .content-box .inner-box .content-desc-wrap div.block-style{
    margin-bottom: 1.9em;
}    
.split-content .content-box .inner-box .content-desc-wrap div.block-style p{
    margin-bottom: 0.0em;
} 
.split-content .content-box .inner-box .content-desc-wrap div.block-style p.block-title{
    display: inline-block;
    color:#ffffff;
    width: 100px;
    text-align: center;
    padding: 4px 0px 3px 0px;
    margin: 0px 0px 10px 0px;
} 
.split-content .content-box .inner-box .content-desc-wrap div.block-style p.block-title.title01{
    background-color: #0094e1;
}
.split-content .content-box .inner-box .content-desc-wrap div.block-style p.block-title.title02{
    background-color: #a03fdd;
}
.split-content .content-box .inner-box .content-desc-wrap div.block-style p.block-title.title03{
    background-color: #eb8a00;
} 

/* intro
-------------------------------------------- */
.content.intro{
    background-color: #f6f6f6;
}
.wrap-intro-col{
    padding: 5% 0 5% 0;
}
.intro-content{ 
}
.intro-content .intro-img-wrap{
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    width: 50%; 
}
@media all and (-ms-high-contrast: none){
    .intro-content .intro-img-wrap{
        display: inline-block;
        float: left;
        height: 315px;
    }   
}
@media all and (-ms-high-contrast: none) and (max-width: 1370px) {
    .intro-content .intro-img-wrap{ 
            height: 23vw; 
     }
}  

.intro-content .intro-img-wrap .intro-img{
    width: 71.5%;
    margin: 0 auto;
    position: relative;
}
.intro-content .intro-img-wrap .intro-img .back-ground{
    position: absolute;
    top: 0;
    left:0;
    z-index: -1;
    opacity : 0.0;
    transform : translate(0, 0);
	transition: all 1.0s ease-out;
	-webkit-transition: all 1.0s ease-out;
	-moz-transition: all 1.0s ease-out;
	-o-transition: all 1.0s ease-out;
}
.intro-content .intro-img-wrap .intro-img .back-ground.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.intro-content .intro-text-wrap{
    display:table-cell;
    text-align: left;
    vertical-align: middle;    
    width: 50%;   
}
@media all and (-ms-high-contrast: none){
    .intro-content .intro-text-wrap{
        display: inline-block;
        float: left;
        height: 315px; 
        position: relative;
    }
    .intro-content .intro-text-wrap div.ie-block{
        display: block;
        position: absolute;
        width: 100%;
        left: 0%;
        top:50%;
        transform: translateY(-50%) translateX(0%);
        -webkit- transform: translateY(-50%) translateX(0%);
    }
}
@media all and (-ms-high-contrast: none) and (max-width: 1370px) {
    .intro-content .intro-text-wrap{ 
            height: 23vw; 
     }
}
.intro-content .intro-text-wrap .intro-title{
    margin: 0 0 5% 0;
}
.intro-content .intro-text-wrap .intro-title p.main{
	font-size:3.125rem;
	font-family: 'Oswald', sans-serif;
    line-height: 1.3;
}
.intro-content .intro-text-wrap .intro-title p.sub{
	font-size:0.875rem;
}
.intro-content .intro-text-wrap .intro-desc{
    font-size:0.8125rem;
    max-width: 580px;
    width: 100%;
}
.intro-content .intro-text-wrap .intro-desc p{
    margin-bottom: 1.0em;
}
.intro-content .intro-text-wrap .intro-desc p:last-child{
    margin-bottom: 0;
}


/* Contact message
-------------------------------------------- */
.content.contact-message{
    background-image: url(../images/contact-message-bg.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center center;
    background-attachment:fixed;
}
@media all and (-ms-high-contrast: none){
    .content.contact-message{
        background-attachment:scroll;
    }
}
.message-content-wrap{
	position: relative;
	height: 600px;
}
.message-content{
	position: absolute;
  	top: 50%;
  	left: 5%;
  	transform: translateY(-50%) translateX(0%);
  	-webkit- transform: translateY(-50%) translateX(0%);
	width: 47%;
    color:#ffffff;
}
.message-content .title{
    padding: 0 0 3% 0;
}
.message-content .title p.en{
    font-size: 3.125rem;
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    padding: 0 0 1% 0;
/*display: flex;
align-items: center;*/
}
/*.message-content .title p.en:before,
.message-content .title p.en:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.message-content .title p.en:before {
margin-right: 1rem;
}
.message-content .title p.en:after {
margin-left: 1rem;
}
*/

.message-content .title p.ja{
	font-size:0.8125rem;
}
.message-content .desc{
    padding: 5% 0 4% 0;
	font-size:0.75rem; 
}
.message-content .campany-info{
    padding: 3% 0 3% 0;
	font-size:0.75rem;
}
.message-btn-wrap{
	text-align: left;
    padding: 5% 0 0 0;
}
.message-btn-wrap a{
    display: inline-block;
    text-align: center;
    /*background-color: rgba(64,151,199,0.95);*/
    background-color: rgba(47,93,151,0.95);
    color: rgba(255,255,255,0.90);
    padding: 2.6% 6% 2% 5%;
    box-sizing: border-box;
}
.message-btn-wrap a:hover{
	opacity: 0.5;
}
.message-btn-wrap a .btn-text-wrap{
	display:inline-block;
	text-align: left;
    margin: 0 auto;
    background-image: url(../images/icon-btn-mail.png);
    background-repeat: no-repeat;
    background-position: left 40%;
    background-size: 34px 23.5px;
    padding-left: 57px;
}
.message-btn-wrap a .btn-text-wrap .icon{
	display:block;
    float: left;
    width: 30%;
}
.message-btn-wrap a .btn-text-wrap .ja{
    font-size:0.8125rem;
}
.message-btn-wrap a .btn-text-wrap .en{
	font-size:0.9375rem;
	font-family: 'Oswald', sans-serif;   
}
/* Access
-------------------------------------------- */
.wrap-access-col{
}
.wrap-page-access-col{
	padding: 6% 0 0 0;
}
.access-info-wrap{
	margin: -2% 0 2% 0;
    font-size:0.8125rem;
    text-align: center;
}
.access-info-wrap p{
    padding: 0 0 2% 0;
}
.map-wrap{
	padding: 0px 0px 0px 0px;
	text-align: center;
	margin: 0px auto;
}
#mapcanvas01{
	height: 600px;
	width: 100%;
	text-align: center;
	margin: 0px auto;	
}


/* Footer
-------------------------------------------- */
footer {
	background-color: #ffffff;
	padding: 3% 0 3% 0;
    box-shadow:0px 10px 20px -7px rgba(0,0,0,0.3) inset;
}
footer .footer-content {}
footer .footer-content .footer-info-wrap {
	text-align: center;
	margin: 0px auto;
}
footer .footer-content .footer-info-wrap .footlogo {
	display: block;
    width: 24.45%;
    margin: 0 auto;
    padding: 1% 0 2% 0;
}
footer .footer-content .footer-info-wrap .footlogo a{}
footer .footer-content .footer-info-wrap .company-info {
    padding: 0 0 2% 0;
    font-size:0.75rem;
}
footer .footer-content .footer-info-wrap .copyright {
	display: block;
    font-size:0.75rem;
    padding: 0;	
}
footer .footer-content .footer-info-wrap .copyright a {
	text-decoration: none;
}
footer .footer-content .footer-info-wrap .copyright a:hover{
	text-decoration: none;
}

/* to top
-------------------------------------------- */
.to-top-wrap {
    display: block;
    position: fixed;
    bottom: 10px;
    right:10px;
	text-align: center;
    opacity: 0;
    transition: all 0.8s ease-out;
	-webkit-transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
	-o-transition: all 0.8s ease-out;
}
.to-top-wrap.usetop {
    opacity: 1.0;
}
.to-top-wrap a{
	display: inline-block;
	position: relative;
	width: 60px;
	height: 60px;
    background-color: #2f5d97;
}
.to-top-wrap a:hover{
	opacity: 0.5;
}
.to-top-wrap a span{
	display: block;
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translateY(-10%) translateX(-50%) rotate(45deg);
  	-webkit- transform: translateY(-10%) translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
    border: 1px solid;
    border-color:  #ffffff transparent transparent #ffffff;
}
/* infinite scroll
-------------------------------------------- */
#infscr-loading{
    text-align:center;
    margin:0 auto;   
}
#infscr-loading .loading-end{
	display:inline-block;
	text-align: center;
    background-color: #2f5d97;
    color: rgba(255,255,255,0.85);
    padding: 1.0% 6% 0.8% 6%;
	box-sizing: border-box;
}
#infscr-loading .loading-end .ja{
    font-size:0.8125rem;
    line-height: 1.4;
}
#infscr-loading .loading-end .en{
	font-size:0.9375rem;
	font-family: 'Oswald', sans-serif;   
}

/* Components
-------------------------------------------- */
#anc01{
	position: absolute;
	left: 0px;
	top:0px;
}
#anc02{
	position: absolute;
	left: 0px;
	top:0px;
}
#anc03{
	position: absolute;
	left: 0px;
	top:0px;
}
#anc04{
	position: absolute;
	left: 0px;
	top:0px;
}
a.tel-link{
    vertical-align: middle;
}
.content.contact-message a.tel-link{
    color:#ffffff;
}
a[href^="tel:"] { cursor: default; }

/* corporation content
-------------------------------------------- */
.key-facts-content{
	display: block;
    padding: 0 0 0 0;
    margin: 0 auto;
    width: 100%;
    max-width: 950px;
    text-align: center;
    font-size:0.875rem;
}
.key-facts-content .fact-desc{
    padding: 0 0 5% 0;    
}
.key-facts-content .fact-table{
    display: table;
    width: 100%;
}
.key-facts-content .fact-table:last-child{
    margin-bottom: 3%;
}
.key-facts-content .fact-table div{
    display: table-cell;
    vertical-align: middle;
    border-bottom: 1px solid #999999;
    padding: 5% 0 4% 0;
}
.key-facts-content .fact-table div.title{
    width: 35%;
    text-align: left;
    padding: 0 3% 0 3%;
    box-sizing: border-box;
}
.key-facts-content .fact-table div.body{
    width: 65%;
    text-align: left;
}
.key-facts-content .fact-table div.body p{
    display: inline-block;
    margin: 0 5% 0 0;
}
.corporate-information-content{
	display: block;
    padding: 0 0 0 0;
    margin: -1% auto 0 auto;
    width: 100%;
    max-width: 800px;
    text-align: center;
    font-size:1.0rem;
}
.corporate-information-content .information-table{
    display: table;
    width: 100%;
}
.corporate-information-content .information-table:last-child{
    margin-bottom: 3%;
}
.corporate-information-content .information-table div{
    display: table-cell;
    vertical-align: middle;
    border-bottom: 1px solid #999999;
    padding: 4% 0 3.5% 0;
}
.corporate-information-content .information-table div.title{
    width: 35%;
    text-align: center;
}
.corporate-information-content .information-table div.body{
    width: 65%;
    text-align: left;
}
/* contact
-------------------------------------------- */
.contact-form-content{
	display: block;
    padding: 0 0 0 0;
    margin: 0 auto;
    width: 100%;
    max-width: 850px;
    text-align: center;
    font-size:0.875rem;
}
.contact-form-content .req{
	display: inline-block;
	color:#d70000;
    font-size:1.3rem;
	margin: 0px 0px 0px 3px;
    line-height: 1.0;
}
.contact-form-content .form-caution{
    padding: 0 0 1% 0; 
    text-align: right;
}
.contact-form-content .form-caution .req{
    font-size:1.5rem;
	margin: 0px 5px 0px 0px;
    line-height: 1.5;
}
.contact-form-content .form-table{
    display: block;
    width: 100%;
    padding: 0 0 5% 0;   
}
.contact-form-content .form-table:last-child{

}
.contact-form-content .form-table div{
    display: block;
}
.contact-form-content .form-table div.title{
    width: 100%;
    text-align: left;
    padding: 0 0 0.8% 0;
}
.contact-form-content .form-table div.body{
    width: 100%;
    text-align: left;
    clear: both;
}
.contact-form-content .form-table div.body.radio{
    padding: 1% 0 1% 0;
}

/* ******************************************************************** */ 
/* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
/* ******************************************************************** */
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;overflow:hidden;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */