@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Merriweather);

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

背景

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

html {
    font-size: 62.5%;
    overflow: -moz-scrollbars-vertical;
}

body {
    background-color: #fff;
    word-wrap: break-word;
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    color: #000;
    font-weight: 500;
    line-height: 1.61;
    letter-spacing: .1em;
    overflow-x: hidden;
}

.wrap {
    width: 980px;
    height: auto;
    min-height: 100%;
    margin: auto;
    padding: 0;
}

ul {
    display: block;
    list-style: none;
    margin: 0;
}

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

ヘッダー

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

header .navbar {
    margin-bottom: 1.15em;
}

header h1 {
    font-size: 1.2rem;
    color: rgba(27, 27, 27, .7);
    font-weight: 400;
    padding-top: 1em;
    margin-bottom: 1.35em;
}

header .navbar.navbar-right {
    width: 500px;
    margin-top: -2.15em;
}

header .navbar.navbar-right li {
    float: right;
}

header .navbar.navbar-right li a span,
header .navbar.navbar-right li span {
    display: inline;
    color: #000;
}

header li.normal {
    font-size: 1.3rem;
    margin-bottom: 1.4em;
}

header li.tel,
header li.normal a {
    color: #1b1b1b;
}

header li.normal a:before {
    font-family: 'FontAwesome';
    content: "\f0da";
    color: #0068c4;
    margin-right: .45em;
}

header li.normal a:hover {
    color: #0068c4;
    text-decoration: none;
}

header li.tel {
    font-size: 2.4rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700;
    margin-left: 0 !important;
}

header li.tel:before {
    display: block;
    float: left;
    content: "";
    background: url(../img/icon-tel.png) no-repeat;
    vertical-align: top;
    width: 25px;
    height: 32px;
    margin-right: .2em;
    margin-top: -.15em;
}

header .navbar.navbar-right li:nth-child(2) {
    margin-left: 240px;
}

header li.contact {
    width: 250px;
    margin-top: -.7em;
}

header li.contact a:before {
    display: inline-block;
    vertical-align: top;
    content: "";
    background: url(../img/icon-mail.png) no-repeat;
    vertical-align: middle;
    width: 22px;
    height: 16px;
    margin-right: .45em;
    margin-top: -.15em;
}

.contact-btn {
    display: block;
    width: 100%;
    height: 45px;
    background-color: #0068c4;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    padding-top: .82em;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .2);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

.contact-btn:hover {
    background-color: #004d92;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: none;
}

.menu {
    display: block;
    position: relative;
    background: url(../img/nav-back.png) repeat-x center top;
    width: 100%;
    height: 62px;
    box-shadow: 2px 0 4px rgba(0, 0, 0, .5);
    z-index: 2;
}

.menu ul {
    display: block;
    width: 980px;
    margin: 0 auto;
}

.menu li {
    display: block;
    position: relative;
    float: left;
    width: 20%;
    text-align: center;
}

.menu li:before {
    display: block;
    content: "";
    position: absolute;
    background: url(../img/nav-line.png) center center no-repeat;
    width: 9px;
    height: 60px;
    bottom: 0;
    left: -4.5px;
}

.menu li:last-child:after {
    display: block;
    content: "";
    position: absolute;
    background: url(../img/nav-line.png) center center no-repeat;
    width: 9px;
    height: 60px;
    bottom: 0;
    right: -4.5px;
}

.menu li a {
    display: block;
    width: 100%;
    height: 62px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1b1b1b;
    padding-top: 1.85rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

.menu li a:hover,
.menu li a:focus,
.menu li a:active {
    background: rgba(0, 85, 160, .9);
    color: white;
}



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

メイン

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

.main li {
    display: block;
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 612px;
    z-index: 1;
}

.main li:nth-child(1) {
    background-image: url(../img/main04.png);
}

.main li:nth-child(2) {
    background-image: url(../img/main01.png);
}

.main li:nth-child(3) {
    background-image: url(../img/main02.png);
}

.main li:nth-child(4) {
    background-image: url(../img/main03.png);
}

.main li:nth-child(4) .wrap,
.main li:nth-child(2) .wrap,
.main li:nth-child(1) .wrap {
    padding-top: 120px;
}

.main li:nth-child(3) .wrap {
    padding-top: 112px;
}

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

中面

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

.intro-btn {
    margin-top: -17em;
    position: relative;
    margin-bottom: 6.65em;
    z-index: 10000;
}

.intro-btn ul {
    display: block;
    text-align: center;
}

.intro-btn li {
    display: inline-block;
    background: url(../img/back-circle.png) no-repeat center bottom;
    width: 190px;
    text-align: center;
    padding-bottom: 4.35em;
}

.intro-btn li a,
.intro-btn li span,
.intro-btn li img {
    display: block;
}

.intro-btn li img {
    margin: 0 auto 1.25em;
}

.intro-btn li a:hover img {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

.intro-btn li a span {
    color: #1b1b1b;
    font-weight: 700;
}

.intro-btn li a span:before {
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: url(../img/icon-left.png) no-repeat;
    width: 13px;
    height: 13px;
    margin-right: .25em;
}

.intro-btn li a:hover span {
    color: #0068c4;
}

.top-box {
    width: 100%;
    min-width: 980px;
    margin: 0 3px 0;
}

.top-box.units-split .unit-50 {
    width: 49.65%;
    height: 300px;
    text-align: center;
}

.top-box.units-split .unit-50 + .unit-50 {
    margin-left: 3px;
}

.case-btn {
    display: block;
    background: url(../img/case-back.png) no-repeat center center;
    -moz-background-size: cover;
    background-size: cover;
}

.equipment-btn {
    display: block;
    background: url(../img/equipment-back.png) no-repeat center center;
    -moz-background-size: cover;
    background-size: cover;
}

.case-btn:hover {
    background: url(../img/case-back-ol.png) no-repeat center center;
    -moz-background-size: cover;
    background-size: cover;
}

.equipment-btn:hover {
    background: url(../img/equipment-back-ol.png) no-repeat center center;
    -moz-background-size: cover;
    background-size: cover;
}

.equipment-btn span,
.case-btn span {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
    padding-top: 6.65em;
}

.equipment-btn:hover span,
.case-btn:hover span {
    background-color: rgba(0, 0, 0, .16);
}

.top-box h1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "メイリオ", Meiryo, serif;
    font-size: 3.6rem;
    color: #fff;
    font-weight: 400;
}

.top-box h1:first-letter {
    color: #fff45c;
}

.heading01 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "メイリオ", Meiryo, serif;
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
}

.heading01:first-letter {
    color: #0068c4;
}

.heading01 span {
    display: block;
}

.heading01 span {
    font-family: 'Merriweather', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "メイリオ", Meiryo, serif;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, .5);
    margin: .65em 0 4.35em;
}

.heading01 span:before,
.heading01 span:after {
    display: inline-block;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, .2);
    content: "";
    width: 35px;
    height: 1px;
}

.heading01 span:before {
    margin-right: .65em;
}

.heading01 span:after {
    margin-left: .65em;
}

.news-list {
    width: 800px;
    margin: 0 auto 5.25em;
}

.news-list li {
    display: block;
    position: relative;
    padding-left: 230px;
    padding-right: .3em;
}

.news-list li + li {
    border-top: 1px dotted rgba(0, 0, 0, .2);
    margin-top: 1.65em;
    padding-top: 1.65em;
}

.news-list li span {
    display: inline-block;
    position: absolute;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.5rem;
    top: auto;
    left: 0;
}

.news-list li span em {
    display: inline-block;
    font-family: 'Merriweather', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "メイリオ", Meiryo, serif;
    font-size: 1.2rem;
    color: #fff;
    background-color: #0068c4;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    margin-right: 1.2em;
    width: 80px;
    text-align: center;
}

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

ページトップへ戻る

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

@-webkit-keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@-webkit-keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

#page-top {
    position: fixed;
    z-index: 99999;
    right: 20px;
    bottom: 0;
    margin-bottom: 0;
}

#page-top a {
    width: 80px;
    height: 20px;
    padding: 2px 0 0;
    display: block;
    cursor: pointer;
    font-size: 1.3rem;
    text-align: center;
    background-color: #272935;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}

#page-top a i {
    color: #fff;
}

#page-top a:hover {
    text-decoration: none;
    background-color: #000;
    height: 40px;
    margin-bottom: -10px;
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

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

フッター

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

.contact-box {
    background-color: #f3f3f3;
}

.contact-box .wrap {
    background: url(../img/area.png) no-repeat right center;
    padding: 2.95em 500px 3.65em 0;
}

.contact-box h2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "メイリオ", Meiryo, serif;
    font-size: 2.6rem;
    font-weight: 400;
    margin-bottom: .45em;
}

.contact-box h2:first-letter {
    color: #0068c4;
}

.contact-box h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2.35em;
}

.contact-box h3:before {
    display: block;
    float: left;
    content: "";
    background: url(../img/icon-corner.png) no-repeat;
    width: 8px;
    height: 8px;
    margin-right: .75em;
    margin-top: .35em;
}

.foot-text {
    font-size: 1.3rem;
    margin-bottom: .9em;
}

.foot-text02 {
    margin-bottom: 1.35em;
}

.foot-text02 span {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 2.7rem;
    font-weight: 600;
    margin-top: .65em;
    letter-spacing: 0.05em;
}

.foot-tel:before {
    display: inline-block;
    vertical-align: bottom;
    content: "";
    background: url(../img/foot-tel.png) no-repeat;
    width: 26px;
    height: 30px;
    margin-right: .25em;
}

.foot-fax:before {
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: url(../img/foot-fax.png) no-repeat;
    width: 30px;
    height: 24px;
    margin-right: .35em;
    margin-left: .65em;
}

.contact-box a:before {
    display: none;
    /*vertical-align:top;
	content: "";
	background:url(../img/foot-mail.png) no-repeat;
	vertical-align:middle;
	width:34px;
	height:26px;
	margin-right:.9em;
	margin-top:-.15em;*/
}

.contact-box .contact-btn {
    height: 70px;
    font-size: 1.6rem;
    padding-top: .72em;
}

@media all and (-ms-high-contrast:none) {
    .contact-box .contact-btn {
        padding-top: .85em;
    }
}

.foot-box {
    background: url(../img/foot-back.png) no-repeat center top;
    width: 100%;
    height: 97px;
    padding-top: 2.15em;
}

.sitemap li {
    display: block;
    float: right;
    margin-left: 1.25em;
    margin-bottom: .35em;
}

.sitemap li a {
    font-size: 1.3rem;
    color: #ffffff;
}

.sitemap li a:hover {
    color: rgba(255, 255, 255, .6);
}

small.copy {
    display: block;
    text-align: right;
    font-size: 1rem;
    color: rgba(255, 255, 255, .3);
}

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

ボタン

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

a.black-btn,
a.white-btn {
    display: block;
    background-color: transparent;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

a.white-btn {
    width: 180px;
    height: 45px;
    border: 3px solid #fff;
    color: #fff;
    padding-top: .62em;
    margin: 1.25em auto;
}

a.white-btn:hover {
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

a.white-btn:before {
    font-family: 'FontAwesome';
    content: "\f0c9";
    margin-right: .25em;
    font-weight: 400;
}

a.black-btn {
    width: 300px;
    height: 60px;
    border: 3px solid #2e303c;
    color: #2e303c;
    padding-top: 1.05em;
    margin: 4.65em auto 1.65em;
    cursor: pointer;
}

.product-detail a.black-btn {
    margin: 2.65em auto 1.65em;
}

a.black-btn:hover {
    background-color: #2e303c;
    color: #fff;
    text-decoration: none;
}

a.black-btn:before {
    font-family: 'FontAwesome';
    content: "\f0da";
    margin-right: .25em;
    font-weight: 400;
}

a.black-btn.long {
    width: 360px;
    margin: 1.25em auto .6em;
}

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

テーブル

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

table td {
    word-break: break-all;
}

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

リスト

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

.list-flat {
    margin-bottom: 0;
}

.list-flat li {
    margin-bottom: 1em;
}

.list-flat li:last-child {
    margin-bottom: 0;
}

.list-left li {
    margin-right: 1em;
    float: left;
}

.list-left li:last-child {
    margin-right: 0;
}

.link {
    margin: 0;
}

.link li {
    list-style: none;
    line-height: 1.35;
}

.link li a {
    margin-left: 1em;
    display: block;
    text-decoration: none;
    text-indent: -1em;
}

.link li a:before {
    margin-right: .5em;
    content: '\f0da';
    color: #e60013;
    font: normal normal normal 14px/1 FontAwesome;
}

.list-center {
    display: inline-block;
    zoom: 1;
}

.list-before li {
    padding-left: 1em;
    display: block;
}

.list-before li:before {
    width: 1em;
    margin-left: -1em;
    padding: .5em 0;
    display: block;
    float: left;
    content: '';
    color: #007f2d;
    font-family: 'FontAwesome';
    text-align: center;
}

.list-before li.second:before {
    width: 1em;
    margin-left: 0;
    padding: .5em 0;
    display: block;
    float: left;
    content: '';
    color: #007f2d;
    font-family: 'FontAwesome';
    text-align: center;
}

.list-after li {
    padding-right: 15px;
    position: relative;
}

.list-after li:after {
    margin-top: -12px;
    position: absolute;
    top: 50%;
    right: 10px;
    content: '';
    color: #007f2d;
    font-family: 'FontAwesome';
}

.list-centered {
    text-align: center;
}

.list-centered ul {
    display: inline-block;
    zoom: 1;
}

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

画像

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

a:hover img {
    opacity: .6;
    filter: alpha(opacity=60);
    -moz-opacity: .6;
}

img.left {
    margin-right: 1em;
}

img.right {
    margin-left: 1em;
}

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

レイアウト

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

.v-bottom {
    position: absolute !important;
    right: 0;
    bottom: 0;
}

.v-center {
    width: 100%;
    display: table;
}

.v-center p,
.v-center > div,
.v-center img {
    padding: 0 .5em;
    display: table-cell;
    vertical-align: middle;
}

img {
    vertical-align: bottom;
}

.img-centered img {
    margin: 0 auto;
    display: block;
}

.btn-centered {
    text-align: center;
}

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

Typography

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

i {
    margin: 0 .5em;
    color: #005eae;
}

em,
i {
    font-style: normal;
}

.red {
    color: #c3000f;
}

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

余白

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

.mt-05 {
    margin-top: -5px;
}

.mt05 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt70 {
    margin-top: 70px;
}

.mt100 {
    margin-top: 100px;
}

.mt_20 {
    margin-top: -20px;
}

.mtb05 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.mtb10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mtb15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.mtb20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mtb30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mb05 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.ml05 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml20 {
    margin-left: 20px;
}

.ml30 {
    margin-left: 30px;
}

.mr05 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}


.pt40 {
    padding-top: 40px;
}

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

表示・非表示

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

.hidden {
    display: none;
    visibility: hidden;
}

.visible-phone {
    display: none !important;
}

.visible-tablet {
    display: none !important;
}

.hidden-desktop {
    display: none !important;
}

.visible-desktop {
    display: inline-block !important;
}

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

clearfix

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

.clearfix:before,
.clearfix:after {
    height: 0;
    display: block;
    overflow: hidden;
    content: '.';
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

/* IE < 8 */

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

contact

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

.con-btn {
    text-align: center;
}

.privacy {
    margin-top: 5em;
}

.privacy h3 {
    border: 1px solid #ccc;
    padding: 10px;
}

.privacy .text_bold {
    font-weight: bold;
}

.box_fot_content ul {
    width: 100%;
    background-color: #f5fbff;
    padding: 2%;
}