@charset "UTF-8";

/* ───────────────────────────────────────────────────────────── Default */

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, input, textarea, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {



font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;


 
}

html {
height:auto;
overflow-y:scroll;




}

body {
background:#2f3736;
min-width:1024px;
height:100%;
color:#2f3736;
_display:inline;
_zoom:1;
-webkit-text-size-adjust:100%;
}

li {
list-style:none;
}

a {
border:none;
text-decoration:none;
outline:none;
}

em {
font-style:normal;
font-weight:bold;
}

img {
vertical-align:bottom;
}

input, textarea {
margin:0;
padding:0;
}


/* ───────────────────────────────────────────────────────────── Web Font */

@font-face {
font-family:"makinas";
src:url("../font/makinas_web.eot?") format("eot");
src:
url("../font/makinas_web.eot?#iefix") format("embedded-opentype"), 
url("../font/makinas_web.woff") format("woff");
font-style:normal;
font-weight:normal;
}



.makinas, .makinas span, .ltg, .ltg span {
font:  '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;


}

.ie9 .makinas, .ie9 .makinas span,
.ie8 .makinas, .ie8 .makinas span {
font:  '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;

}


/* ───────────────────────────────────────────────────────────── Common Style */

.clearfix {
overflow:hidden;
position:relative;
}

a {
color:#e61a69;
-webkit-transition:all 0.25s ease;
-moz-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
}

a:hover {
text-decoration:none;
}

span.brk {
display:block;
line-height:inherit;
}

span.halfSpacing {
margin-left:-0.5em;
}


/* ───────────────────────────────────────────────────────────── Common Layout */

/*
header
*/

header {
background:#fff;
}

#header {
background:url("../img/bg_tech.svg") center top #2b2259;
position:relative;
}

#siteId {
font-size:375%;
font-weight:normal;
text-align:center;
line-height:1em;
}

#siteId a {
color:#2f3736;
}

#siteId span {
display:block;
}

/*#siteId img {
margin-top:0.25em;
}*/

/*
globalNavi
*/

#globalNav {
background:#2f3736;
width:100%;
/*position:relative;*/
}

#globalNav {
position:fixed;
top:0;
left:0;
z-index:100;
}

#globalNav nav {
text-align:center;
}

#globalNav ul {
display:inline-block;
min-width:960px;
vertical-align:bottom;
margin:0 auto;
padding:0 3.125%;
}

#globalNav ul li {
width:25%;
height:2.5em;
font-size:150%;
float:left;
line-height:110%;
}

#globalNav ul li a {
display:table-cell;
width:25%;
height:2.5em;
vertical-align:middle;
}

#globalNav ul li span.brk {
display:block;
line-height:1.25em;
}

.nav-toggle, #globalNav a, #globalNav a span {
color:#fff;
}

.nav-collapse li {
width:100%;
display:block;
}

.js .nav-collapse {
clip:rect(0 0 0 0);
max-height:0;
position:absolute;
display:block;
overflow:hidden;
zoom:1;
}

.nav-collapse.opened {
max-height:9999px;
}

.disable-pointer-events {
pointer-events:none !important;
}

.nav-toggle {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

.fixed {
position:fixed;
width:100%;
left:0;
top:0;
}

.nav-collapse a {
-webkit-tap-highlight-color:rgba(0,0,0,0);
border-top:1px solid #fff;
width:100%;
color:#fff;
text-decoration:none;
}

.nav-collapse a:active,
.nav-collapse .active a {
background:#2b2259;
}

.nav-collapse ul a {
background:#2f3736;
}

.nav-toggle {
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
width:40px;
height:40px;
text-decoration:none;
text-indent:-300px;
overflow:hidden;
position:relative;
float:right;
}

.nav-toggle:before {
background:url("../img/icon_menu.svg") no-repeat center center;
content:" ";
display:block;
width:40px;
height:40px;
text-align:center;
text-indent:0;
text-transform:none;
speak:none;
position:absolute;
top:0;
left:0;
}

.nav-toggle.active:before {
background:url("../img/icon_close.svg") no-repeat center center;
}

/*
main(common)
*/

#contents {
background:#fff;
/*padding-bottom:5em;*/
}

/*
section
*/

section {
padding:3.75em 0 5em;
}

.container {
margin:0 auto;
}


/*
h1-h6, p
*/

.heading {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
display:block;
font-size:450%;
font-weight:normal;
text-align:center;
line-height:1.125em;
margin:0 auto 0.75em;
}

.heading span.brk {
line-height:1.125em;
}

.subheading {
font-size:150%;
line-height:1.25em;
margin:1em 0;
}

main section p, main aside p {
text-align:justify;
text-justify:inter-ideograph;
line-height:1.75em;
}

/*
Convertion Button
*/

.btnConversion {
font-size:150%;
text-align:center;
margin-top:3em;
}

.btnConversion a {
display:inline-block;
background:#e61a69;
border-radius:6px;
box-shadow:0 5px 0 #b21451;
color:#fff;
text-decoration:none;
line-height:1em;
padding:0.875em 1em;
position:relative;
}

@media all and (-ms-high-contrast:none){
	
.btnConversion a {
line-height:normal;
padding:0.75em 1em 0.375em;
}

}

.btnConversion a span {
color:#fff;
}

.btnConversion a:hover {
box-shadow:none;
margin:5px auto -5px;
position:relative;
}

span.notice {
display:block;
font-size:87.5%;
}

.linkContact { /* 2015.10.28追加 */
text-align:center;
margin-top:2em;
}

/*
footer
*/

#footer {
text-align:center;
padding:1.5em 0 1.75em;
}

#footerNavi {
font-size:75%;
margin-bottom:2em;
}

#footerNavi li {
display:inline;
padding:0 0.5em;
}

#footerNavi li a {
color:#fff;
}

#footer p {
font-size:75%;
}

#footer p small {
color:#fff;
}

/*
Page Top
*/

p#pageTop {
position:fixed;
bottom:1em;
right:1em;
}

p#pageTop a {
background:#fff;
display:block;
width:3.125em;
height:3.125em;
opacity:0.8;
}

p#pageTop img {
width:100%;
max-width:50px;
height:auto;
}

p#pageTop a:hover {
opacity:0.75;
}


/* ───────────────────────────────────────────────────────────── IE8 Hack */

.ie8 .js .nav-collapse {
max-height:auto;
position:relative;
display:block;
overflow:auto;
zoom:1;
}

.ie8 #header {
background:url("../img/bg_tech.png") center top #2b2259;
}


/* ───────────────────────────────────────────────────────────── Tablet & Desktop CSS */

@media only screen and (min-width:801px) {

.container {
width:960px;
margin:0 auto;
padding:0 32px;
}

.js .nav-collapse {
position:relative;
}

.js .nav-collapse.closed {
max-height:none;
}

.nav-toggle {
display:none;
}

.nav-collapse li {
width:auto;
}

.nav-collapse a {
text-align:center;
border-top:0;
}

.nav-collapse ul ul a {
display:none;
}

a:hover {
opacity:0.75;
}

.btnConversion a {
width:12em;
}

.btnConversion a:hover {
opacity:1.0;
}

}


/* ───────────────────────────────────────────────────────────── Tablet CSS */

@media only screen and (max-width: 800px) {

body {
min-width:100%;
}

.container {
width:93.75%;
padding:0 3.125%;
}

span.brk {
display:inline;
}

.bottom #siteId span {
line-height:1.5em;
}

#siteId img {
width:100%;
max-width:256px;
height:auto;
}



.soun img {
width:100%;
max-width:256px;
height:auto;
}







#globalNav nav {
width:100%;
text-align:left;
}

#globalNav ul {
width:100%;
min-width:inherit;
margin:0 auto;
padding:0;
}

#globalNav ul li {
width:100%;
height:auto;
font-size:112.5%;
float:none;
}

#globalNav ul li a {
display:block;
width:100%;
height:auto;
vertical-align:middle;
padding:0.75em 0.625em;
}

#globalNav ul li span.brk {
display:inline;
line-height:1em;
}

#contents {
background:#fff;
}

section {
padding:2.5em 0;
}

.container {
width:93.75%;
padding:0 3.125%;
}

.heading span.brk {
display:inline;
}

main section p, main aside p {
font-size:87.5%;
}

.btnConversion {
font-size:150%;
text-align:center;
margin-top:1.25em;
}

.btnConversion a {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:100%;
max-width:18em;
padding:0.75em 1em;
}

}


/* ───────────────────────────────────────────────────────────── Tablet & SmartPhone CSS */

@media only screen and (min-width: 600px) and (max-width: 800px) {

#siteId {
font-size:337.5%;
}

.heading {
font-size:300%;
}

}


/* ───────────────────────────────────────────────────────────── SmartPhone CSS */

@media only screen and (max-width: 599px) {

#siteId {
font-size:200%;
}

.heading {
display:block;
min-width:inherit;
width:100%;
font-size:200%;
}

.heading span {
padding:0.625em 0;
}

.btnConversion {
font-size:125%;
text-align:center;
margin-top:2em;
}

}


/* ───────────────────────────────────────────────────────────── SmartPhone CSS(Retina) */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {


}