@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One&subset=latin-ext');

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,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video,
button {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /*letter-spacing: .05em;*/
    /*font-size: 1em*/
}

html {
    font-size: 10px
}

body,
table,
input,
textarea,
select,
option,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lato', "a-otf-gothic-bbb-pr6n", 'Noto Sans Japanese', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.1;
    letter-spacing: 0.06em;
    font-feature-settings: "palt"1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold
}

p {
    line-height: 1.7em
}

table,
input,
textarea,
select,
option {
    line-height: 1.1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

fieldset {
    min-width: 100%;
    width: 100%;
    display: table
}

button {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer
}

:focus {
    outline: 0
}

ins {
    text-decoration: none
}

del {
    text-decoration: line-through
}

img {
    vertical-align: top
}

.pc-layout {
    display: block;
}

.sp-layout {
    display: none;
}

@media only screen and (max-width: 1024px) {
    img {
        max-width: 100%;
        height: auto
    }

    .pc-layout {
        display: none;
    }

    .sp-layout {
        display: block;
    }
}

a {
    color: #333;
    text-decoration: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

@media only screen and (min-width: 1025px) {
    a:hover {
        text-decoration: none;
        color: #999999;
    }
}

@font-face {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-style: normal;
    font-weight: 200;
    /*    src: url("/font/NotoSansCJKjp-Light.eot");
    src: url("/font/NotoSansCJKjp-Light-.eot#iefix") format("embedded-opentype"), url("/font/NotoSansCJKjp-Light.woff") format("woff"), url("/font/NotoSansCJKjp-Light.ttf") format("truetype")*/
}

@font-face {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-style: normal;
    font-weight: 400;
    /*    src: url("/font/NotoSansCJKjp-Regular.eot");
    src: url("/font/NotoSansCJKjp-Regular-.eot#iefix") format("embedded-opentype"), url("/font/NotoSansCJKjp-Regular.woff") format("woff"), url("/font/NotoSansCJKjp-Regular.ttf") format("truetype")*/
}

@font-face {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-style: normal;
    font-weight: 500;
    /*    src: url("/font/NotoSansCJKjp-Medium.eot");
    src: url("/font/NotoSansCJKjp-Medium-.eot#iefix") format("embedded-opentype"), url("/font/NotoSansCJKjp-Medium.woff") format("woff"), url("/font/NotoSansCJKjp-Medium.ttf") format("truetype")*/
}

.ffNotoLight {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-weight: 200
}

.ffNotoRegular {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-weight: 400
}

.ffNotoMedium {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-weight: 500
}

.jspContainer {
    overflow: hidden;
    position: relative
}

.jspPane {
    position: absolute
}

.jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 100%;
    background: red
}

.jspHorizontalBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: red
}

.jspCap {
    display: none
}

.jspHorizontalBar .jspCap {
    float: left
}

.jspTrack {
    background: #dde;
    position: relative
}

.jspDrag {
    background: #bbd;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
    float: left;
    height: 100%
}

.jspArrow {
    background: #50506d;
    text-indent: -20000px;
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0
}

.jspArrow.jspDisabled {
    cursor: default;
    background: #80808d
}

.jspVerticalBar .jspArrow {
    height: 16px
}

.jspHorizontalBar .jspArrow {
    width: 16px;
    float: left;
    height: 100%
}

.jspVerticalBar .jspArrow:focus {
    outline: none
}

.jspCorner {
    background: #eeeef4;
    float: left;
    height: 100%
}

* html .jspCorner {
    margin: 0 -3px 0 0
}

.taLeft {
    text-align: left !important
}

.taCenter {
    text-align: center !important
}

.taRight {
    text-align: right !important
}

.vTop {
    vertical-align: top !important
}

.vMiddle {
    vertical-align: middle !important
}

.fwNormal {
    font-weight: normal !important
}

.fwBold {
    font-weight: bold !important
}

.mt0 {
    margin-top: 0 !important
}

.mb0 {
    margin-bottom: 0 !important
}

.clearfix {
    *zoom: 1
}

.clearfix:after {
    display: block;
    clear: both;
    content: ""
}

.trackTags {
    display: none
}

.ffNotoLight {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-weight: 200
}

.ffNotoRegular {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-weight: 400
}

.ffNotoMedium {
    font-family: "a-otf-gothic-bbb-pr6n", sans-serif;
    font-weight: 500
}

.ffRoboto {
    font-family: 'Lato', "a-otf-gothic-bbb-pr6n", sans-serif
}

@media only screen and (max-width: 1560px) {
    html {
        font-size: 10px
    }
}

@media only screen and (max-width: 1280px) {
    html {
        font-size: 8px
    }
}

@media only screen and (min-width: 1025px) {
    .pcHide {
        display: none !important
    }
}

@media only screen and (max-width: 1024px) {
    html {
        font-size: 10px
    }

    .spHide {
        display: none !important
    }

    .read-text {
        font-size: 1.6rem
    }
}

body {
    color: #333;
    line-height: 2;
    text-align: center;
    -webkit-text-size-adjust: 100%
}

body:after {
    width: 0;
    max-width: 960px;
    height: 100%;
    background-color: rgba(240, 0, 0, .9);
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    content: ""
}

.lt-ie9 body {
    display: none
}

#container {
    background-color: #fff;
    text-align: left
}

@media only screen and (min-width: 1025px) {
    body:after {
        -webkit-transition: width 500ms ease, opacity 500ms ease;
        transition: width 500ms ease, opacity 500ms ease
    }

    #container {
        box-sizing: border-box;
        margin-right: auto;
        margin-left: auto;
        max-width: 1920px
    }

    #main {
        padding: 40px;
        padding-top: 0;
        font-size: 1.6rem
    }
}

@media only screen and (min-width: 1025px) {
    #container {
        padding-left: 248px
    }
}

@media only screen and (max-width: 1024px) and (min-width: 1025px) {
    #container {
        padding-left: 80px
    }
}

@media only screen and (max-width: 1024px) {
    body {
        min-width: 320px
    }

    body:after {
        -webkit-transition: opacity 500ms ease;
        transition: opacity 500ms ease
    }

    #container {
        padding-top: 60px
    }

    #main {
        padding: 0 20px 30px;
        font-size: 1.2rem
    }
}

.sitemapBtn {
    display: block;
    border-radius: 0;
    position: absolute;
    z-index: 500
}

.sitemapBtn .frame {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

.sitemapBtn .bar {
    width: 100%;
    height: 2px;
    background-color: #FFF;
    display: block;
    position: absolute;
    left: 0
}

.sitemapBtn .top {
    top: 0
}

.sitemapBtn .middle {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

.sitemapBtn .bottom {
    bottom: 0
}

@media only screen and (min-width: 1025px) {
    .sitemapBtn {
        width: 76px;
        height: 76px;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    .sitemapBtn .bar {
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    .sitemapBtn:hover {
        background-color: rgba(255, 183, 0, .9)
    }

    .sitemapBtn:hover .bar {
        background-color: #FFF
    }

    .sitemapBtn .frame {
        margin-left: -10px;
        width: 20px;
        height: 20px
    }

    .touch_device .sitemapBtn:hover {
        background-color: transparent
    }

    .touch_device .sitemapBtn:hover .bar {
        background-color: #222
    }

    .touch_device .true_sitemap_open .sitemapBtn .bar {
        background-color: #fff
    }
}

@media only screen and (max-width: 1024px) {
    .sitemapBtn {
        width: 38px;
        height: 38px
    }

    .sitemapBtn .frame {
        margin-left: -5px;
        width: 10px;
        height: 10px
    }

    .sitemapBtn .bar {
        height: 1px
    }
}

#header {
    top: 0;
    z-index: 1000
}

#header .logo {
    z-index: 1
}

.spLink {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    text-align: center
}

.spLink a {
    background-color: #222;
    display: block;
    color: #FFF
}

@media only screen and (min-width: 1025px) {
    #header {
        width: 80px;
        height: 100%;
        position: fixed;
        left: 0
    }

    #header:before {
        width: 2px;
        height: 100%;
        background-color: rgba(255, 183, 0, .9);
        position: absolute;
        top: 0;
        left: 80px;
        content: ""
    }

    #header .logo {
        position: absolute;
        top: 30px;
        right: 55px
    }

    #header .logo a:hover {
        text-decoration: none
    }

    #header .sitemapBtn {
        top: 2px;
        left: 2px
    }

    #header.careerHeader .logo {
        right: 105px
    }

    #header.careerHeader .careerTtl {
        margin-top: 5px;
        padding-top: 2px;
        padding-bottom: 2px;
        border: 1px solid #06382D;
        border-radius: 2px;
        display: block;
        color: #06382D;
        font-size: 1.2rem;
        line-height: 1;
        text-align: center
    }

    .touch_device .spLink {
        display: block
    }

    .touch_device .spLink {
        box-sizing: border-box;
        margin-right: -80px;
        padding: 40px;
        width: 100%;
        background-color: #FFF
    }

    .touch_device .spLink a {
        padding-top: 34px;
        padding-bottom: 34px;
        font-size: 1.6rem
    }

    .touch_device .spLink + #container {
        padding-top: 180px
    }

    .touch_device .spLink + #container #header .logo {
        top: 220px
    }

    .touch_device .spLink + #container #header .sitemapBtn {
        top: 193px
    }
}

@media only screen and (min-width: 1001px) {
    .touch_device .spLink {
        display: none
    }

    .touch_device .spLink + #container {
        padding-top: 0
    }

    .touch_device .spLink + #container #header .logo {
        top: 30px
    }

    .touch_device .spLink + #container #header .sitemapBtn {
        top: 2px
    }
}

@media only screen and (min-width: 1025px) {
    #header {
        width: 248px;
        background-color: rgba(255, 255, 255, 1)
    }

    #header:after {
        width: 80px;
        height: 100%;
        background-color: rgba(240, 0, 0, .9);
        position: absolute;
        top: 0;
        left: 0;
        content: ""
    }
}

@media only screen and (max-width: 1024px) {
    #header {
        box-sizing: border-box;
        padding: 20px;
        width: 100%;
        height: 60px;
        background-color: rgba(255, 255, 255, .8);
        position: absolute;
        left: 0
    }

    .true_sitemap_open #header {
        background-color: rgba(255, 255, 255, .0)
    }

    #header .logo {
        margin-top: -5px
    }

    #header .logo img {
        width: 60px
    }

    #header .sitemapBtn {
        width: 38px;
        height: 38px;
        top: 10px;
        right: 10px;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        background-color: rgba(240, 0, 0, .9)
    }

    #header .sitemapBtn.scrl {
        position: fixed;
        background-color: rgba(240, 0, 0, .9)
    }

    .true_sitemap_open #header .sitemapBtn {
        background-color: rgba(255, 183, 0, .9)
    }

    #header .sitemapBtn.scrl .bar {
        background-color: #fff
    }

    #header .sitemapBtn .bar {
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #header .sitemapBtn .frame {
        margin-left: -5px;
        width: 10px;
        height: 10px
    }

    #header.careerHeader .careerTtl {
        display: none
    }
}

@media only screen and (min-width: 1025px) {
    #gNavi {
        box-sizing: border-box;
        width: 166px;
        position: absolute;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -ms-transform: translateY(-50%)
    }

    #gNavi .list {
        margin-top: 2px;
        padding-right: 2px;
        padding-left: 2px;
        position: relative
    }

    #gNavi .list:first-child {
        margin-top: 0
    }

    #gNavi .anchor {
        font-size: 1.6rem;
        padding-top: 25px;
        padding-bottom: 23px;
        display: block;
        color: #333;
        line-height: 1;
        text-align: center;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease
    }

    #gNavi .anchor.current,
    #gNavi .anchor:hover {
        color: #FFF;
        text-decoration: none
    }

    #gNavi .anchor > .en {
        font-size: 1.6rem;
        font-weight: bold
    }

    #gNavi .anchor > .ja {
        margin-top: 0;
        font-size: 16px
    }

    #gNavi .en,
    #gNavi .ja {
        display: block
    }

    #gNavi .megaDropMenu {
        padding-right: 4px;
        width: 0;
        height: 390px;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 166px;
        z-index: -1;
        text-align: right;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #gNavi .megaDropMenu:after {
        display: block;
        clear: both;
        content: ""
    }

    #gNavi .megaDropMenu li {
        width: 240px;
        height: 60px;
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease
    }

    #gNavi .megaDropMenu .index .frame:hover .bg {
        background-color: rgba(255, 255, 255, .25)
    }

    /*    #gNavi .megaDropMenu .index .frame:hover .bg:after {
        display: none;
        content: none
    }*/
    #gNavi .megaDropMenu .frame {
        width: 100%;
        height: 60px;
        display: block;
        position: relative;
        overflow: hidden;
        color: #fff;
        line-height: 1;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease
    }

    #gNavi .megaDropMenu .frame:before,
    #gNavi .megaDropMenu .frame:after {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        content: ""
    }

    #gNavi .megaDropMenu .frame:before {
        background-color: rgba(0, 0, 0, .25);
        z-index: 1;
        top: -1px;
        padding-bottom: 1px
    }

    #gNavi .megaDropMenu .index .frame:before {
        display: none;
    }

    #gNavi .megaDropMenu .frame:after {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        z-index: 0
    }

    #gNavi .megaDropMenu .frame:hover {
        text-decoration: none
    }

    #gNavi .megaDropMenu .frame:hover .bg:before {
        margin-left: 0;
        width: 16px;
        height: 16px;
        border-width: 0
    }

    #gNavi .megaDropMenu .frame:hover .bg:after {
        /*        width: 80%;
        height: 80%;*/
        opacity: .5
    }

    /*    #gNavi .megaDropMenu .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }
    #gNavi .megaDropMenu .bg:before,
    #gNavi .megaDropMenu .bg:after {
        box-sizing: border-box;
        border-radius: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        content: "";
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
             -o-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    #gNavi .megaDropMenu .bg:before {
        margin-top: 29px;
        width: 16px;
        height: 16px;
        border-width: 0;
        border-color: #fff;
        background-color: #FFF;
        top: 10px;
        border-radius: 50%;
        z-index: 200;
        content: ""
    }
    #gNavi .megaDropMenu .bg:after {
        box-sizing: border-box;
        border-top-style: solid;
        border-top-color: rgba(0, 0, 0, .9);
        border-right-style: solid;
        border-right-color: rgba(0, 0, 0, .9);
        left: 50%;
        top: 43px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        position: absolute;
        content: "";
        margin-left: -5px;
        width: 8px;
        height: 8px;
        border-radius: 0;
        z-index: 201;
        background-color: rgba(255,255,255,1) !important
    }*/
    #gNavi .megaDropMenu .newWindow {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 5
    }

    #gNavi .megaDropMenu .txt {
        /*margin-top: -5px;*/
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        color: #FFF;
        z-index: 2;
        text-align: center;
        vertical-align: top;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -ms-transform: translateY(-50%)
    }

    #gNavi .megaDropMenu .en {
        margin-bottom: 5px;
        font-size: 2rem;
        font-weight: 100
    }

    #gNavi .megaDropMenu .em {
        font-weight: 400
    }

    #gNavi .megaDropMenu .ja {
        font-size: 1.6rem
    }

    #gNavi .onMouth .anchor {
        color: #FFF
    }

    #gNavi .onMouth > .megaDropMenu {
        z-index: 500;
        width: 242px
    }

    #gNavi .onMouth > .megaDropMenu li {
        opacity: 1
    }

    #gNavi .onMouth > .megaDropMenu li:last-child {
        margin-bottom: 0;
    }

    #gNavi .onMouth > .megaDropMenu .openNum01 {
        top: 0;
        -webkit-transition-delay: 50ms;
        transition-delay: 50ms
    }

    #gNavi .onMouth > .megaDropMenu .openNum02 {
        top: 65px;
        -webkit-transition-delay: 100ms;
        transition-delay: 100ms
    }

    #gNavi .onMouth > .megaDropMenu .openNum03 {
        top: 130px;
        -webkit-transition-delay: 150ms;
        transition-delay: 150ms
    }

    #gNavi .onMouth > .megaDropMenu .openNum04 {
        top: 195px;
        -webkit-transition-delay: 200ms;
        transition-delay: 200ms
    }

    #gNavi .onMouth > .megaDropMenu .openNum05 {
        top: 260px;
        -webkit-transition-delay: 250ms;
        transition-delay: 250ms
    }

    #gNavi .onMouth > .megaDropMenu .openNum06 {
        top: 325px;
        -webkit-transition-delay: 300ms;
        transition-delay: 300ms
    }

    #gNavi .onMouth > .megaDropMenu .openNum07 {
        top: 390px;
        -webkit-transition-delay: 300ms;
        transition-delay: 300ms
    }

    #gNavi .service .anchor.current,
    #gNavi .service .anchor:hover {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .service .megaDropMenu .bg:after {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .service .index {
        background-color: rgba(255, 183, 0, 1)
    }

    /*    #gNavi .service .cs .frame:after {
        background-image: url("")
    }
    #gNavi .service .value .frame:after {
        background-image: url("")
    }
    #gNavi .service .philosophy .frame:after {
        background-image: url("")
    }
    #gNavi .service .voice .frame:after {
        background-image: url("")
    }*/
    #gNavi .service.onMouth .anchor {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .service.onMouth .megaDropMenu {
        height: 320px
    }

    #gNavi .mission .anchor.current,
    #gNavi .mission .anchor:hover {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .mission .megaDropMenu .bg:after {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .mission .index {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .mission .philosophy .frame:after {
        /*background-image: url("")*/
    }

    #gNavi .mission.onMouth .anchor {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .mission.onMouth .megaDropMenu {
        height: 320px
    }

    #gNavi .aboutUs .anchor.current,
    #gNavi .aboutUs .anchor:hover {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .aboutUs .megaDropMenu .bg:after {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .aboutUs .index {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .aboutUs .company .frame:after {
        /*background-image: url("/img/common/")*/
    }

    #gNavi .aboutUs .enjoy .frame:after {
        /*background-image: url("")*/
    }

    #gNavi .aboutUs.onMouth .anchor {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .aboutUs.onMouth .megaDropMenu {
        height: 455px
    }

    #gNavi .recruit .anchor.current,
    #gNavi .recruit .anchor:hover {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .recruit .megaDropMenu .bg:after {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .recruit .index {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .recruit .saiyo .frame:after {
        /*background-image: url("")*/
    }

    #gNavi .recruit .career .frame:after {
        /*background-image: url("")*/
    }

    #gNavi .recruit.onMouth .anchor {
        background-color: rgba(255, 183, 0, 1)
    }

    #gNavi .recruit.onMouth .megaDropMenu {
        height: 190px
    }

    #gNavi .contact .anchor.current,
    #gNavi .contact .anchor:hover {
        background-color: rgba(255, 183, 0, .9)
    }

    .careerHeader #gNavi .anchor {
        padding-top: 20px;
        padding-bottom: 18px;
        color: #333;
        font-size: 1.3rem
    }

    .careerHeader #gNavi .anchor:hover {
        background-color: #07382E;
        color: #FFF
    }

    .cssfilters.no_touch_device .filter_conts #wrap,
    .cssfilters.no_touch_device .filter_conts #main,
    .cssfilters.no_touch_device .filter_conts #sitemap .inner {
        /*-webkit-filter: blur(2px);
        filter: blur(2px);*/
        opacity: .2;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease
    }

    .cssfilters.no_touch_device #gNavi .megaDropMenu .index .frame:hover {
        background: none
    }

    .cssfilters.no_touch_device #gNavi .megaDropMenu .frame:hover {
        background-color: rgba(255, 255, 255, .5);
        opacity: 0.5
    }

    .cssfilters.no_touch_device #gNavi .megaDropMenu .frame:hover:after {
        /*-webkit-filter: blur(3px);
        filter: blur(3px)*/
        opacity: .2
    }

    .recruit_entry #gNavi .contact .anchor.current {
        background-color: transparent;
        color: #333
    }

    .recruit_entry #gNavi .contact .anchor:hover {
        background-color: #3D1839;
        color: #FFF
    }
}

@media only screen and (max-width: 1024px) {
    #gNavi {
        display: none
    }
}

@media only screen and (min-width: 1025px) {
    #pagePath {
        margin-bottom: 80px;
        text-align: center;
        letter-spacing: -.3em
    }

    #pagePath .pathList {
        display: inline-block;
        letter-spacing: normal
    }

    #pagePath .pathList:after {
        margin-right: 5px;
        content: ">"
    }

    #pagePath .pathList:last-child:after {
        display: none;
        content: none
    }

    #pagePath a {
        font-size: 1.2rem
    }

    #pagePath .noLink {
        color: #535353;
        cursor: text;
        pointer-events: none
    }

    #pagePath .noLink:hover {
        text-decoration: none
    }
}

@media only screen and (max-width: 1024px) {
    #pagePath {
        display: none
    }
}

@media only screen and (min-width: 1025px) {
    .contInner {
        margin-right: auto;
        margin-left: auto;
        max-width: 870px
    }
}

.business_field #categoryLink a:hover {
    color: #0C3754
}

.business_field #categoryLink a:hover:before {
    border-color: #0C3754
}

.business_field #categoryLink .current a {
    color: #0C3754
}

.business_field #categoryLink .current a:before {
    border-color: #0C3754
}

.mission #categoryLink a:hover {
    color: #660F27
}

.mission #categoryLink a:hover:before {
    border-color: #660F27
}

.mission #categoryLink .current a {
    color: #660F27
}

.mission #categoryLink .current a:before {
    border-color: #660F27
}

.about_us #categoryLink a:hover {
    color: #702810
}

.about_us #categoryLink a:hover:before {
    border-color: #702810
}

.about_us #categoryLink .current a {
    color: #702810
}

.about_us #categoryLink .current a:before {
    border-color: #702810
}

.recruit #categoryLink a:hover {
    color: #07382E
}

.recruit #categoryLink a:hover:before {
    border-color: #07382E
}

.recruit #categoryLink .current a {
    color: #07382E
}

.recruit #categoryLink .current a:before {
    border-color: #07382E
}

@media only screen and (min-width: 1025px) {
    #categoryLink {
        margin-bottom: 80px;
        text-align: center;
        letter-spacing: -.4em
    }

    #categoryLink li {
        padding-right: 2%;
        padding-left: 2.5%;
        display: inline-block;
        vertical-align: bottom;
        letter-spacing: normal;
        position: relative
    }

    #categoryLink li:before {
        width: 12%;
        height: 1px;
        background-color: #000;
        position: absolute;
        top: 50%;
        left: 0;
        content: "";
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg)
    }

    #categoryLink li:first-child:before {
        display: none;
        content: none
    }

    #categoryLink a {
        padding-top: 25px;
        display: block;
        position: relative;
        color: #333;
        font-size: 1.6rem;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #categoryLink a:before {
        box-sizing: border-box;
        margin-left: -8px;
        width: 16px;
        height: 16px;
        background-color: #FFF;
        border-width: 6px;
        border-style: solid;
        border-color: rgba(0, 0, 0, .25);
        border-radius: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        content: "";
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #categoryLink a:hover {
        text-decoration: none
    }

    #categoryLink a:hover:before {
        margin-left: -12px;
        width: 24px;
        height: 24px;
        border-width: 4px;
        top: -6px
    }

    #categoryLink .current a:before {
        margin-left: -12px;
        width: 24px;
        height: 24px;
        border-width: 4px;
        top: -6px
    }

    .business_field #categoryLink li {
        width: 130px
    }

    .mission #categoryLink li {
        width: 120px
    }

    .about_us #categoryLink li {
        width: 130px
    }
}

@media only screen and (max-width: 1024px) {
    #categoryLink {
        display: none
    }
}

#subNavi .column {
    border-radius: 0;
    overflow: hidden;
    position: relative
}

#subNavi .newWindow {
    position: absolute;
    z-index: 5
}

#subNavi .frame {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: block;
    position: relative;
    color: #fff;
    line-height: 1
}

#subNavi .frame:before,
#subNavi .frame:after {
    border-radius: 0;
    content: ""
}

#subNavi .frame:before {
    background-color: rgba(0, 0, 0, .25);
    z-index: 1
}

#subNavi .frame:after {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0
}

#subNavi .bg {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

#subNavi .bg:before,
#subNavi .bg:after {
    border-radius: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    content: ""
}

#subNavi .bg:before {
    box-sizing: border-box;
    border-style: solid;
    border-color: #FFF;
    border-radius: 100%;
    z-index: 2;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

#subNavi .bg:after {
    opacity: 0;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%)
}

#subNavi .txt {
    width: 100%;
    position: absolute;
    top: 50%;
    z-index: 2;
    line-height: 1.5;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

#subNavi .en,
#subNavi .ja {
    display: block
}

#subNavi .en {
    font-weight: 100
}

#subNavi .em {
    font-weight: 400
}

#subNavi .current .bg:after {
    opacity: .5
}

.category_conts #subNavi {
    position: relative
}

.category_conts #subNavi:before,
.category_conts #subNavi:after {
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 0;
    content: ""
}

.category_conts #subNavi:before {
    width: 100%;
    left: 0
}

.category_conts #subNavi:after {
    top: 0;
    left: 50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg)
}

.business_field #subNavi .bg:after {
    background-color: #0C3754
}

.mission #subNavi .bg:after {
    background-color: #660F27
}

.about_us #subNavi .bg:after {
    background-color: #702810
}

.recruit #subNavi .bg:after {
    background-color: #07382E
}

.recruit #subNavi .noImg .frame:before {
    background-color: #07382E
}

.recruit #subNavi .noImg.current .frame:before {
    opacity: 1
}

.recruit #subNavi .noImg.current .frame .bg:after {
    background-color: #FFF
}

.special #subNavi .bg:after {
    background-color: #07382E
}

.cssfilters.no_touch_device #subNavi .noImg .frame:hover {
    background: none
}

@media only screen and (min-width: 1025px) {
    #subNavi {
        margin-top: 80px
    }

    #subNavi .inner {
        margin-left: -2px;
        width: 100%;
        display: table
    }

    #subNavi .column {
        padding-left: 2px;
        display: table-cell;
        vertical-align: top
    }

    #subNavi .newWindow {
        top: 10px;
        right: 10px
    }

    #subNavi .frame {
        max-height: 396px;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #subNavi .frame:before {
        padding-top: 75%;
        display: block;
        position: relative
    }

    #subNavi .frame:after {
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #subNavi .frame:hover {
        text-decoration: none
    }

    #subNavi .frame:hover .bg:before {
        margin-left: -12px;
        width: 24px;
        height: 24px;
        border-width: 4px
    }

    #subNavi .frame:hover .bg:after {
        width: 198px;
        height: 198px;
        opacity: .5
    }

    #subNavi .bg:before {
        margin-top: 45px;
        margin-left: -8px;
        width: 16px;
        height: 16px;
        border-width: 6px;
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease
    }

    #subNavi .bg:after {
        width: 0;
        height: 0;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #subNavi .txt {
        margin-top: -27px
    }

    #subNavi .en {
        margin-bottom: 5px
    }

    #subNavi .twoColumn .column {
        width: 50%
    }

    #subNavi .threeColumn .column {
        width: 33.3%
    }

    #subNavi .fourColumn .column {
        width: 25%
    }

    #subNavi .current .bg:before {
        margin-left: -12px;
        width: 24px;
        height: 24px;
        border-width: 4px
    }

    #subNavi .current .bg:after {
        width: 198px;
        height: 198px
    }

    .cssfilters.no_touch_device #subNavi .frame:hover {
        background-color: rgba(255, 255, 255, .5)
    }

    .cssfilters.no_touch_device #subNavi .frame:hover:after {
        /*-webkit-filter: blur(3px);
        filter: blur(3px)*/
        opacity: .2
    }

    .cssfilters.no_touch_device #subNavi .current .frame {
        background-color: rgba(255, 255, 255, .5)
    }

    .cssfilters.no_touch_device #subNavi .current .frame:after {
        /*-webkit-filter: blur(3px);
        filter: blur(3px)*/
        opacity: .2
    }

    .category_index #subNavi .en {
        font-size: 2rem
    }

    .category_index #subNavi .ja {
        font-size: 1.6rem
    }

    .category_conts #subNavi {
        padding-top: 80px
    }

    .category_conts #subNavi:after {
        width: 30px
    }

    .category_conts #subNavi .en {
        font-size: 2rem
    }

    .category_conts #subNavi .ja {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1024px) {
    #subNavi {
        margin-top: 30px
    }

    #subNavi .column {
        margin-top: 2px
    }

    #subNavi .newWindow {
        top: 5px;
        right: 5px
    }

    #subNavi .frame:before {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    #subNavi .bg:before {
        margin-top: 25px;
        margin-left: -8px;
        width: 8px;
        height: 8px;
        border-width: 3px
    }

    #subNavi .bg:after {
        width: 80%;
        height: 80%
    }

    #subNavi .current .bg:before {
        margin-left: -6px;
        width: 12px;
        height: 12px;
        border-width: 2px
    }

    .category_index #subNavi .frame {
        height: 180px
    }

    .category_index #subNavi .txt {
        margin-top: -20px
    }

    .category_index #subNavi .en {
        margin-bottom: 5px;
        font-size: 2.0rem
    }

    .category_index #subNavi .ja {
        font-size: 1.2rem
    }

    .category_conts #subNavi {
        padding-top: 30px
    }

    .category_conts #subNavi:after {
        width: 15px
    }

    .category_conts #subNavi .inner {
        margin-left: -2px
    }

    .category_conts #subNavi .inner:after {
        display: block;
        clear: both;
        content: ""
    }

    .category_conts #subNavi .frame {
        height: 180px
    }

    .category_conts #subNavi .column {
        box-sizing: border-box;
        width: 50%;
        border-left: 2px solid #fff;
        float: left
    }

    .category_conts #subNavi .txt {
        margin-top: -15px
    }

    .category_conts #subNavi .en {
        margin-bottom: 5px;
        font-size: 1.2rem
    }

    .category_conts #subNavi .ja {
        font-size: .8rem
    }
}

/*--- unit --------------------------------------------------------------------------------*/

.col-0 {
    width: 0%
}

.col-10 {
    width: 10%
}

.col-20 {
    width: 20%
}

.col-25 {
    width: 25%
}

.col-30 {
    width: 30%
}

.col-40 {
    width: 40%
}

.col-50 {
    width: 50%
}

.col-60 {
    width: 60%
}

.col-70 {
    width: 70%
}

.col-80 {
    width: 80%
}

.col-90 {
    width: 90%
}

.col-100 {
    width: 100%
}

/*--- hex ---------------------------------------------------------------------------------*/

.inner {
    position: relative;
    overflow: hidden
}

.hexagon-block,
.hexagon-lests {
    position: absolute;
    overflow: hidden
}

.hexagon-lests {
    float: left;
    position: absolute;
    margin: 0 10px 10px 0;
    width: calc(166px - 10px);
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear
}


.hexagon-lests.y1 {
    top: 0%
}

.hexagon-lests.y2 {
    top: 19%
}

.hexagon-lests.y3 {
    top: 38%
}

.hexagon-lests.y4 {
    top: 57%
}

.hexagon-lests.y5 {
    top: 76%
}

.hexagon-lests.x1 {
    right: 85.7%
}

.hexagon-lests.x2 {
    right: 71.5%
}

.hexagon-lests.x3 {
    right: 57.1%
}

.hexagon-lests.x4 {
    right: 42.9%
}

.hexagon-lests.x5 {
    right: 28.6%
}

.hexagon-lests.x6 {
    right: 14.3%
}

.hexagon-lests.x7 {
    right: 0
}

.hexagon-lests.x1.y1,
.hexagon-lests.x1.y3,
.hexagon-lests.x1.y5 {
    right: 78.6%
}

.hexagon-lests.x2.y1,
.hexagon-lests.x2.y3,
.hexagon-lests.x2.y5 {
    right: 64.3%
}

.hexagon-lests.x3.y1,
.hexagon-lests.x3.y3,
.hexagon-lests.x3.y5 {
    right: 49.9%
}

.hexagon-lests.x4.y1,
.hexagon-lests.x4.y3,
.hexagon-lests.x4.y5 {
    right: 35.8%
}

.hexagon-lests.x5.y1,
.hexagon-lests.x5.y3,
.hexagon-lests.x5.y5 {
    right: 21.4%
}

.hexagon-lests.x6.y1,
.hexagon-lests.x6.y3,
.hexagon-lests.x6.y5 {
    right: 7.2%
}

.hexagon-lests.x7.y1,
.hexagon-lests.x7.y3,
.hexagon-lests.x7.y5 {
    right: 0%
}


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

    .hexagon-lests {
        transform: scale(0.8);
    }

    .hexagon-lests.y1 {
        top: 16.5%
    }

    .hexagon-lests.y2 {
        top: 31.8%
    }

    .hexagon-lests.y3 {
        top: 47.2%
    }

    .hexagon-lests.y4 {
        top: 62.5%
    }

    .hexagon-lests.y5 {
        top: 78%
    }

    .hexagon-lests.x1 {
        right: 69.4%
    }

    .hexagon-lests.x2 {
        right: 58%
    }

    .hexagon-lests.x3 {
        right: 46.4%
    }

    .hexagon-lests.x4 {
        right: 34.8%
    }

    .hexagon-lests.x5 {
        right: 23.3%
    }

    .hexagon-lests.x6 {
        right: 11.8%
    }

    .hexagon-lests.x7 {
        right: 0
    }

    .hexagon-lests.x1.y1,
    .hexagon-lests.x1.y3,
    .hexagon-lests.x1.y5 {
        right: 63.8%
    }

    .hexagon-lests.x2.y1,
    .hexagon-lests.x2.y3,
    .hexagon-lests.x2.y5 {
        right: 52.2%
    }

    .hexagon-lests.x3.y1,
    .hexagon-lests.x3.y3,
    .hexagon-lests.x3.y5 {
        right: 40.5%
    }

    .hexagon-lests.x4.y1,
    .hexagon-lests.x4.y3,
    .hexagon-lests.x4.y5 {
        right: 29.1%
    }

    .hexagon-lests.x5.y1,
    .hexagon-lests.x5.y3,
    .hexagon-lests.x5.y5 {
        right: 17.6%
    }

    .hexagon-lests.x6.y1,
    .hexagon-lests.x6.y3,
    .hexagon-lests.x6.y5 {
        right: 5.9%
    }

    .hexagon-lests.x7.y1,
    .hexagon-lests.x7.y3,
    .hexagon-lests.x7.y5 {
        right: 0%
    }
}

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

    .hexagon-lests {
        transform: scale(0.6);
    }

    .hexagon-lests.y1 {
        top: 30.3%
    }

    .hexagon-lests.y2 {
        top: 42.3%
    }

    .hexagon-lests.y3 {
        top: 54.2%
    }

    .hexagon-lests.y4 {
        top: 66%
    }

    .hexagon-lests.y5 {
        top: 78%
    }

    .hexagon-lests.x1 {
        right: 54.6%
    }

    .hexagon-lests.x2 {
        right: 45.5%
    }

    .hexagon-lests.x3 {
        right: 36.3%
    }

    .hexagon-lests.x4 {
        right: 27.2%
    }

    .hexagon-lests.x5 {
        right: 18.2%
    }

    .hexagon-lests.x6 {
        right: 9%
    }

    .hexagon-lests.x7 {
        right: 0
    }

    .hexagon-lests.x1.y1,
    .hexagon-lests.x1.y3,
    .hexagon-lests.x1.y5 {
        right: 50.2%
    }

    .hexagon-lests.x2.y1,
    .hexagon-lests.x2.y3,
    .hexagon-lests.x2.y5 {
        right: 41%
    }

    .hexagon-lests.x3.y1,
    .hexagon-lests.x3.y3,
    .hexagon-lests.x3.y5 {
        right: 31.7%
    }

    .hexagon-lests.x4.y1,
    .hexagon-lests.x4.y3,
    .hexagon-lests.x4.y5 {
        right: 22.7%
    }

    .hexagon-lests.x5.y1,
    .hexagon-lests.x5.y3,
    .hexagon-lests.x5.y5 {
        right: 13.6%
    }

    .hexagon-lests.x6.y1,
    .hexagon-lests.x6.y3,
    .hexagon-lests.x6.y5 {
        right: 4.5%
    }

    .hexagon-lests.x7.y1,
    .hexagon-lests.x7.y3,
    .hexagon-lests.x7.y5 {
        right: 0%
    }
}

.hexagon-lests > a {
    display: block;
    max-width: 156px;
    opacity: 0.8;
    -webkit-pointer-events: auto;
    -moz-pointer-events: auto;
    -ms-pointer-events: auto;
    -o-pointer-events: auto;
    pointer-events: auto
}

article.hexagon-lests.link-base > a {
    opacity: 1
}

article.hexagon-lests.link-base > a:hover {
    -webkit-transform: scale(0.9, 0.9);
    -moz-transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    -o-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
}

.hexagon {
    position: relative;
    width: 150px;
    height: 86.605px;
    background-color: #FFFFFF;
    margin: 48px 0;
    border-left: solid 3px #333333;
    border-right: solid 3px #333333
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 106.065px;
    height: 106.065px;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 19.467px
}

.hexagon:before {
    top: -56px;
    border-top: solid 5px #333333;
    border-right: solid 5px #333333
}

.hexagon:after {
    bottom: -56px;
    border-bottom: solid 5px #333333;
    border-left: solid 5px #333333
}

/*.hexagon:after {
    -webkit-transform: rotateZ(300deg);
       -moz-transform: rotateZ(300deg);
        -ms-transform: rotateZ(300deg);
         -o-transform: rotateZ(300deg);
            transform: rotateZ(300deg)
}*/

.hexagon p {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    text-align: center;
    font-size: 1.6rem;
    color: #333;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    width: -ms-calc(100% - 10px);
    width: -o-calc(100% - 10px);
    width: calc(100% - 10px);
    padding-right: 5px;
    padding-left: 5px;
    line-height: 1.6em;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.link-base .hexagon p {
    color: #FFFFFF
}

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

.text-right {
    text-align: right
}

.arrow {
    position: relative
}

.arrow i {
    width: 1em;
    height: 1em;
    font-size: 1em;
    display: inline-block;
    text-align: center;
    line-height: 1em;
    border-radius: 50%;
    margin-right: 10px;
    color: #FFFFFF;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.fa-chevron-circle-right:before {
    margin-right: -.14em
}

.arrow:hover:before,
.arrow.active:before,
.arrow.ar-y:before {
    background: rgba(255, 183, 0, .9)
}

.arrow i.fas.fa-chevron-circle-right.b-yellow {
    color: rgba(255, 183, 0, .9)
}

.arrow i.fas.fa-chevron-circle-right.b-red {
    color: rgba(240, 0, 0, .9)
}

.arrow i.fas.fa-chevron-circle-right.b-white {
    color: rgba(255, 255, 255, .9)
}

section.page-navi .arrow i.fas.fa-chevron-circle-right.b-yellow {
    margin-right: 0;
    margin-bottom: 10px;
    color: #999999;
    font-size: 1.4em
}

section.page-navi .arrow.active i.fas.fa-chevron-circle-right.b-yellow,
section.page-navi .arrow:hover i.fas.fa-chevron-circle-right.b-yellow {
    color: rgba(255, 183, 0, .9)
}

#service .arrow i.fas.fa-chevron-circle-right.b-white {
    background-image: url(/img/common/icon/arrow-right-y.png);
    background-size: 100%;
    text-indent: -99999em
}

#service .sol-section .arrow i.fas.fa-chevron-circle-right.b-white,
#service .sol .arrow i.fas.fa-chevron-circle-right.b-white {
    background-image: url(/img/common/icon/arrow-right-sol.png);
}

#service .sunny-section .arrow i.fas.fa-chevron-circle-right.b-white,
#service .sc .arrow i.fas.fa-chevron-circle-right.b-white {
    background-image: url(/img/common/icon/arrow-right-sc.png);
}

#service .ecweb-section .arrow i.fas.fa-chevron-circle-right.b-white,
#service .ecw .arrow i.fas.fa-chevron-circle-right.b-white {
    background-image: url(/img/common/icon/arrow-right-ecw.png);
}

#service .ses-section .arrow i.fas.fa-chevron-circle-right.b-white,
#service .ses .arrow i.fas.fa-chevron-circle-right.b-white {
    background-image: url(/img/common/icon/arrow-right-ses.png);
}

#service .sl-section .arrow i.fas.fa-chevron-circle-right.b-white,
#service .sl .arrow i.fas.fa-chevron-circle-right.b-white {
    background-image: url(/img/common/icon/arrow-right-sl.png);
}

.arrow:after {
    /*    box-sizing: border-box;
    border-top-style: solid;
    border-top-color: rgba(255, 255, 255, .9);
    border-right-style: solid;
    border-right-color: rgba(255, 255, 255, .9);
    left: 1rem;
    top: .6rem;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    position: absolute;
    content: "";
    margin-left: -5px;
    width: .8rem;
    height: .8rem;
    z-index: 201;
    background-color: rgba(255,255,255,0) !important*/
}

.arrow.arrow-bk:before,
.arrow.arrow-bk:after {
    display: block
}

.section-index #wrap .box .frame > .txt > span:before,
.section-index #wrap .box .frame > .txt > span:after {
    margin: 0 auto;
    left: 47%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.section-index #wrap .box .frame:hover > .txt > span:before {
    background: rgba(255, 183, 0, .9)
}

.section-index #wrap .box .frame:hover > .txt > span:after {
    border-top-color: rgba(0, 0, 0, .9);
    border-right-color: rgba(0, 0, 0, .9);
}

i.icon-hex,
i.icon-hex:before,
i.icon-hex:after {
    margin-right: 20px;
    display: inline-block;
    width: 19px;
    height: 10px;
    position: relative;
    content: "";
    background-color: #CCCCCC
}

i.icon-hex:before,
i.icon-hex:after {
    position: absolute;
    top: 0;
    left: 0
}

i.icon-hex:before {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg)
}

i.icon-hex:after {
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg)
}

.sol-page i.icon-hex,
.sol-page i.icon-hex:before,
.sol-page i.icon-hex:after {
    background-color: rgba(0, 163, 226, 1)
}

.sc-page i.icon-hex,
.sc-page i.icon-hex:before,
.sc-page i.icon-hex:after {
    background-color: rgba(237, 137, 20, 1)
}

.ecw-page i.icon-hex,
.ecw-page i.icon-hex:before,
.ecw-page i.icon-hex:after {
    background-color: rgba(172, 207, 53, 1)
}

.ses-page i.icon-hex,
.ses-page i.icon-hex:before,
.ses-page i.icon-hex:after {
    background-color: rgba(29, 43, 100, 1)
}

.sl-page i.icon-hex,
.sl-page i.icon-hex:before,
.sl-page i.icon-hex:after {
    background-color: rgba(214, 89, 151, 1)
}

.section-index.parallax_page #wrap .cateConts .side-contents {
    z-index: 1
}

#mission-page.parallax_page #wrap #mission.cateConts:before {
    background-color: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0.5;
    width: 100%;
    height: 100%;
    /* height: 960px; */
    content: "";
    opacity: 0.3
}

@media only screen and (max-width: 1024px) {
    #mission-page.parallax_page #wrap #mission.cateConts:before {
        background-color: #FFF;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0.5;
        width: 100%;
        height: 100%;
        content: "";
        opacity: 0.3
    }
}


/*--- footer ---------------------------------------------------------------------------------*/

#footer {
    box-sizing: border-box;
    color: #000
}

#footer a {
    color: #000
}

#footer .inner {
    box-sizing: border-box
}

#footer .office,
#footer .other {
    box-sizing: border-box
}

#footer .logo img,
#footer .logo .txt {
    vertical-align: middle
}

#footer .address p {
    color: #CCC
}

#footer .navi {
    letter-spacing: -.4em
}

#footer .navi li {
    margin-right: 10px;
    display: inline-block;
    letter-spacing: normal;
    vertical-align: top
}

#footer .navi li:after {
    color: #000;
    margin-top: -1px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    content: "/"
}

#footer .navi li:last-child {
    margin-right: 0
}

#footer .navi li:last-child:after {
    display: none;
    content: none
}

.pageTop {
    display: block
}

.pageTop a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}

.pageTop a:before,
.pageTop a:after {
    position: absolute;
    content: ""
}

.pageTop a:after {
    box-sizing: border-box;
    border-top-style: solid;
    border-top-color: rgba(240, 0, 0, .9);
    border-right-style: solid;
    border-right-color: rgba(240, 0, 0, .9);
    left: 50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg)
}

.parallax_page #footer.small-footer .inner {
    padding: 5px 0 0;
    height: auto
}

#footer.small-footer .other {
    width: 100%;
    padding-right: 0
}

#footer.small-footer .navi {
    text-align: center;
    position: relative;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
}

#footer.small-footer #copyright {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center
}


@media only screen and (min-width: 1025px) {
    #footer {
        margin-top: 80px;
        width: 100%;
        background-color: #efefef;
        border-radius: 0
    }

    .parallax_page #footer.small-footer {
        height: 60px;
        position: relative;
        bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 248px;
        padding-left: 0;
        width: -webkit-calc(100% - 248px);
        width: -moz-calc(100% - 248px);
        width: -ms-calc(100% - 248px);
        width: -o-calc(100% - 248px);
        width: calc(100% - 248px);
    }

    #footer .inner {
        padding-top: 40px;
        height: 100%;
        position: relative
    }

    #footer .inner:after {
        display: block;
        clear: both;
        content: ""
    }

    #footer .office,
    #footer .other {
        box-sizing: border-box;
        float: left
    }

    #footer .office {
        padding-right: 20px;
        width: 100%;
        height: 100%;
        position: relative
    }

    #footer .logo {
        padding-left: 40px;
        position: absolute;
        /*top: 0;*/
        left: 0
    }

    #footer .logo .txt {
        margin-left: 20px;
        font-size: 1.6rem
    }

    #footer .location {
        width: 100%;
        height: 100%;
        min-height: 190px;
        display: table
    }

    #footer .address {
        padding-right: 40px;
        padding-bottom: 35px;
        padding-left: 40px;
        width: 50%;
        border-right: 1px solid rgba(255, 255, 255, .1);
        display: table-cell;
        vertical-align: top
    }

    #footer .address .name {
        margin-bottom: 10px;
        font-size: 1.6rem
    }

    #footer .address p {
        font-size: 1.2rem;
        letter-spacing: -.08em
    }

    #footer .address + .address {
        padding-left: 40px
    }

    #footer .other {
        padding-right: 40px;
        width: 33%
    }

    #footer .navi {
        text-align: right;
        position: absolute;
        left: 100px;
        top: 30px
    }

    #footer .navi li {
        font-size: 1.6rem
    }

    #footer .navi a {
        font-size: 1.6rem
    }

    #footer .navi a:hover {
        text-decoration: underline
    }

    #footer .spNavi {
        display: none
    }

    #fixPageTop {
        width: 76px;
        height: 76px;
        position: fixed;
        left: 2px;
        bottom: 2px;
        z-index: 3000
    }

    #fixPageTop a {
        border-radius: 50%;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        width: 40px;
        height: 40px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        background-color: rgba(255, 255, 255, 1)
    }

    #fixPageTop a:before,
    #fixPageTop a:after {
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #fixPageTop a:after {
        margin-left: -7px;
        width: 14px;
        height: 14px;
        border-top-width: 2px;
        border-right-width: 2px;
        bottom: 10px
    }

    #fixPageTop a:hover {
        background-color: rgba(255, 183, 0, .9)
    }

    #fixPageTop a:hover:before {
        background-color: #FFF
    }

    #fixPageTop a:hover:after {
        border-top-color: #FFF;
        border-right-color: #FFF
    }
}

@media only screen and (min-width: 1025px) {
    #footer .inner {
        padding-top: 20px
    }

    #footer .other {
        padding-right: 60px
    }

    #footer .office {
        padding-top: 70px;
        padding-right: 30px
    }

    #footer .logo {
        padding-left: 40px
    }

    #footer .address {
        padding-right: 60px;
        padding-bottom: 55px;
        padding-left: 60px
    }

    #footer .address + .address {
        padding-left: 60px
    }
}

@media only screen and (max-width: 1024px) and (min-width: 1025px) {
    #footer .office {
        padding-top: 40px
    }
}

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

    main#wrap {
        padding-top: 60px
    }

    section.page-navi .arrow i.fas.fa-chevron-circle-right.b-yellow {
        margin-bottom: 0;
        position: absolute;
        top: 50%;
        right: 15px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    article.hexagon-lests.link-base > a:hover {
        transform: none;
    }

    #footer {
        margin-top: 0
    }

    #footer .office {
        padding-right: 20px;
        padding-left: 20px;
        background-color: #222;
        padding-bottom: 20px
    }

    #footer .logo {
        margin-bottom: 0;
        padding-top: 20px
    }

    #footer .logo img {
        width: 60px
    }

    #footer .logo .txt {
        margin-left: 15px;
        font-size: 1.2rem
    }

    #footer .address {
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    #footer .address .name {
        margin-bottom: 10px;
        font-size: 1.1rem
    }

    #footer .address p {
        font-size: 1rem;
        line-height: 2
    }

    #footer .address + .address {
        margin-top: 20px
    }

    #footer .navi {
        margin-top: -1px;
        padding-top: 25px;
        padding-bottom: 25px;
        background-color: #222;
        text-align: center
    }

    #footer .navi .sitemap {
        display: none
    }

    #footer .navi a {
        font-size: 1rem
    }

    #footer .spNavi {
        box-sizing: border-box;
        /*margin-top: 2px;*/
        padding: 25px 15px;
        background-color: #FFF;
        position: relative
    }

    #footer .spNavi:after {
        display: block;
        clear: both;
        content: ""
    }

    #footer .pcLink a {
        padding-left: 20px;
        position: relative;
        color: #212121
    }

    #footer .pcLink a:after {
        margin-top: -5px;
        width: 10px;
        height: 10px;
        background: url("/img/common/icon/pc_icon02.png") no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 0;
        content: ""
    }

    #footer .sitemapBtn {
        margin-top: -19px;
        margin-left: -19px;
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        z-index: 500
    }

    #footer .pageTop {
        margin-top: -19px;
        margin-left: -19px;
        width: 38px;
        height: 38px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%
    }

    #footer .pageTop a:before {
        margin-left: -5px;
        width: 9px;
        height: 1px;
        top: 15px
    }

    #footer .pageTop a:after {
        margin-left: -4px;
        width: 7px;
        height: 7px;
        border-top-width: 1px;
        border-right-width: 1px;
        bottom: 8px
    }

    #fixPageTop {
        display: none
    }

    #footer.small-footer #copyright {
        margin-bottom: 0
    }
}

#copyright {
    color: #666
}

@media only screen and (min-width: 1025px) {
    #copyright {
        width: 100%;
        position: absolute;
        left: 50%;
        bottom: 30px;
        font-size: 1.4rem;
        text-align: center;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #copyright small {
        font-size: 1.4rem
    }
}

@media only screen and (min-width: 1025px) {
    #footer #copyright {
        padding-left: 248px;
    }
}

@media only screen and (max-width: 1024px) {
    #copyright {
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid #D6D6D6;
        background-color: #FFF;
        border-radius: 0 0 4px 4px;
        text-align: center;
        position: relative
    }
}

.true_sitemap_open {
    overflow: hidden
}

.true_sitemap_open .sitemapBtn .frame {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

.true_sitemap_open .sitemapBtn .bar {
    background-color: #FFF
}

.true_sitemap_open .sitemapBtn .middle {
    opacity: 0
}

.true_sitemap_open #header {
    position: fixed;
    z-index: 2500
}

.true_sitemap_open #header .logo {
    background-image: url("/img/common/template/logo02.png");
    background-size: 100%;
    background-repeat: no-repeat
}

.true_sitemap_open #header .logo img {
    visibility: hidden
}

.true_sitemap_open #sitemap {
    opacity: 1;
    z-index: 2000;
    display: block
}

.true_sitemap_open #sitemap .inner {
    z-index: 1500
}

#sitemap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    text-align: left;
    padding-left: 282px
}

#sitemap.hidden {
    opacity: 0;
    right: -100%
}

#sitemap .inner {
    box-sizing: border-box;
    position: relative;
    z-index: -1
}

#sitemap .en {
    font-weight: 100
}

#sitemap .em {
    font-weight: 400
}

#sitemap .link > a .en,
#sitemap .link > a .ja {
    vertical-align: middle
}

#sitemap .index {
    margin-top: 0
}

#sitemap .categoryList .anchor {
    position: relative;
    line-height: 1
}

/*#sitemap .categoryList .anchor:before {
    border-style: solid;
    border-radius: 100%;
    position: absolute;
    content: ""
}*/


@media only screen and (min-width: 1025px) {
    .true_sitemap_open:after {
        width: 100%;
        opacity: 1
    }

    .true_sitemap_open .sitemapBtn .top {
        -webkit-transform: translateY(9px) rotate(-45deg);
        transform: translateY(9px) rotate(-45deg);
        -ms-transform: translateY(9px) rotate(-45deg)
    }

    .true_sitemap_open .sitemapBtn .bottom {
        -webkit-transform: translateY(-9px) rotate(45deg);
        transform: translateY(-9px) rotate(45deg);
        -ms-transform: translateY(-9px) rotate(45deg)
    }

    .true_sitemap_open #header:before {
        background-color: rgba(255, 183, 0, .9)
    }

    .true_sitemap_open #header:after {
        background-color: rgba(240, 0, 0, .9)
    }

    .true_sitemap_open #fixPageTop a:before {
        background-color: #FFF
    }

    .true_sitemap_open #gNavi a {
        color: #FFF
    }

    .true_sitemap_open #sitemap {
        width: 100%;
        opacity: 1
    }

    .true_sitemap_open #sitemap .inner {
        opacity: 1;
        -webkit-transition: opacity 500ms ease;
        transition: opacity 500ms ease
    }

    .cssfilters.no_touch_device .true_sitemap_open #header {
        z-index: 2500;
        background-color: rgba(134, 20, 28, .9)
    }

    .cssfilters.no_touch_device .true_sitemap_open #wrap,
    .cssfilters.no_touch_device .true_sitemap_open #main {
        /*-webkit-filter: blur(2px);
        filter: blur(2px);*/
        opacity: .2;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease
    }

    #sitemap {
        padding-top: 10px;
        padding-bottom: 10px;
        width: 0;
        max-width: 960px;
        opacity: 0;
        -webkit-transition: opacity 500ms ease;
        transition: opacity 500ms ease
    }

    #sitemap .inner {
        padding: 30px;
        padding-right: 248px;
        opacity: 0;
        -webkit-transition: opacity 500ms ease;
        transition: opacity 500ms ease
    }

    #sitemap a,
    #sitemap .anchor {
        color: #FFF;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #sitemap a:hover,
    #sitemap .anchor:hover {
        opacity: .7;
        text-decoration: none
    }

    #sitemap .link {
        margin-top: 25px
    }

    #sitemap .link > a .en {
        font-size: 3.2rem
    }

    #sitemap .link > a .ja {
        margin-left: 0;
        font-size: 2.8rem;
        font-weight: bold
    }

    #sitemap .smallTxt {
        margin-top: 5px
    }

    #sitemap .smallTxt > a .en {
        font-size: 2.4rem
    }

    #sitemap .smallTxt > a .ja {
        font-size: 1.6rem
    }

    #sitemap .categoryList .anchor:before {
        box-sizing: border-box;
        left: 0
    }

    #sitemap .categoryList > li {
        margin-top: 5px;
        line-height: 1.7em
    }

    #sitemap .categoryList > li > .arrow {
        padding-left: 25px;
        font-size: 1.6rem;
        line-height: 1.6em
    }

    #sitemap .inner > .link > a {
        position: relative;
    }

    /*    #sitemap .categoryList>li>.anchor:before,
    #sitemap .inner > .link > a:before {
        width: 16px;
        height: 16px;
        border-width: 0;
        border-color: #fff;
        background-color: #FFF;
        top: 2px;
        left: 0;
        content: ""
    }
    #sitemap .categoryList>li>.anchor:after,
    #sitemap .inner > .link > a:after {
        box-sizing: border-box;
        border-top-style: solid;
        border-top-color: rgba(0, 0, 0, .9);
        border-right-style: solid;
        border-right-color: rgba(0, 0, 0, .9);
        left: 5px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        position: absolute;
        content: "";
        margin-left: -2px;
        width: 8px;
        height: 8px;
        border-top-width: 2px;
        border-right-width: 2px;
        bottom: 10px;
        top: 6px;
        margin-top: 0
    }
    #sitemap .inner > .link > a:before {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        border-radius: 100%
    }
    #sitemap .inner > .link > a:after {
        width: 10px;
        height: 10px;
        top: 3px
    }*/
    #sitemap .link > ul.categoryList {
        padding-left: 3rem;
    }

    #sitemap .inner > .link > a > span {
        padding-left: 1rem
    }

    #sitemap .level02 {
        margin-bottom: 30px;
        margin-top: 5px;
        padding-left: 25px
    }

    #sitemap .level02 > li {
        margin-top: 15px
    }

    #sitemap .level02 > li span {
        display: block
    }

    #sitemap .level02 > li span a {
        line-height: 1.3
    }

    #sitemap .level02 > li > .anchor {
        padding-left: 20px;
        font-size: 1.6rem
    }

    #sitemap .level03 {
        margin-top: 10px;
        margin-bottom: 30px;
        padding-left: 20px
    }

    #sitemap .level03:after {
        display: block;
        clear: both;
        content: ""
    }

    #sitemap .level03 > li {
        box-sizing: border-box;
        margin-top: 15px;
        width: 189px;
        float: left
    }

    #sitemap .level03 > li > .anchor {
        padding-left: 10px;
        font-size: 1.2rem
    }

    #sitemap .level03 > li > .anchor:before {
        width: 2px;
        height: 2px;
        border-color: rgba(255, 255, 255, .5);
        top: 5px
    }

    #sitemap a[target="_blank"] {
        padding-right: 20px
    }

    #sitemap a[target="_blank"]:after {
        background-image: url("/img/common/icon/newwin01_l.png")
    }

    #sitemap .spNavi {
        display: none
    }

    #sitemap .recruit {
        margin-bottom: 40px
    }

    #scollNavi {
        height: 100%;
        position: relative
    }

    #scollNavi .jspVerticalBar {
        width: 5px;
        background-color: #444;
        right: 10px;
        opacity: .3
    }

    #scollNavi .jspVerticalBar:hover {
        opacity: .5
    }

    #scollNavi .jspTrack {
        background-color: #444;
        border-radius: 5px
    }

    #scollNavi .jspDrag {
        background-color: #888;
        border-radius: 5px
    }
}

@media only screen and (max-width: 1024px) and (min-width: 1025px) {
    #scollNavi {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

    #sitemap .inner {
        padding-right: 80px
    }
}

@media only screen and (max-width: 1024px) {
    .true_sitemap_open:after {
        width: 100%;
        opacity: 1
    }

    .true_sitemap_open .sitemapBtn .bar {
        background-color: #FFF
    }

    .true_sitemap_open .sitemapBtn .top {
        -webkit-transform: translateY(4px) rotate(-45deg);
        transform: translateY(4px) rotate(-45deg);
        -ms-transform: translateY(4px) rotate(-45deg)
    }

    .true_sitemap_open .sitemapBtn .bottom {
        -webkit-transform: translateY(-5px) rotate(45deg);
        transform: translateY(-5px) rotate(45deg);
        -ms-transform: translateY(-5px) rotate(45deg)
    }

    .true_sitemap_open #header .logo {
        width: 60px;
        background-size: 60px auto
    }

    .true_sitemap_open #sitemap .inner {
        display: block
    }

    #scollNavi {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

    #sitemap {
        width: 100%;
        min-width: 320px;
        padding-left: 0;
        top: 60px;
        opacity: 0;
        z-index: -1;
        -webkit-transition: opacity 500ms ease;
        transition: opacity 500ms ease
    }

    #sitemap .inner {
        padding-right: 20px;
        padding-bottom: 60px;
        padding-left: 20px;
        display: none
    }

    #sitemap .link {
        margin-top: 10px
    }

    #sitemap .link:first-child {
        margin-top: 0
    }

    #sitemap .link > a {
        padding: 15px 20px;
        padding-right: 25px;
        background-color: #FFF;
        border-radius: 0;
        display: block;
        line-height: 1
    }

    #sitemap .link > a .en,
    #sitemap .link > a .ja {
        display: block;
        margin-bottom: 0;
        font-size: 2rem
    }

    #sitemap .categoryList a,
    #sitemap .link > a.arrow {
        color: #333;
        padding: 15px 20px;
        display: block;
        background-color: #FFFFFF;
        position: relative
    }

    #sitemap .categoryList a i,
    #sitemap .link > a.arrow i {
        position: absolute;
        right: 10px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        color: rgba(255, 183, 0, 1)
            /*background-color: rgba(255,183,0,1)*/
    }

    #sitemap .categoryList .anchor {
        padding-top: 15px;
        padding-right: 50px;
        padding-bottom: 12px;
        background-color: #fff;
        display: block;
        color: #333;
        line-height: 1.5
    }

    #sitemap .categoryList .anchor:before {
        right: 15px
    }

    #sitemap .categoryList > li {
        margin-top: 2px;
        line-height: 1;
        font-size: 1.4em;
    }

    #sitemap .categoryList > li > .anchor {
        padding-left: 20px;
        border-radius: 0;
        font-size: 1.4rem
    }

    /*    #sitemap .categoryList>li>.anchor:before {
        width: 4px;
        height: 4px;
        border-width: 8px;
        top: 50%;
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
        background-color: rgba(255, 183, 0, .9);
        border-color: rgba(255, 183, 0, .9);
    }
    #sitemap .categoryList>li>.anchor:after {
        box-sizing: border-box;
        border-top-style: solid;
        border-top-color: rgba(17, 17, 17, .9);
        border-right-style: solid;
        border-right-color: rgba(17, 17, 17, .9);
        right: 24px;
        top: 50%;
        -webkit-transform: rotate(45deg) translateY(-50%);
           -moz-transform: rotate(45deg) translateY(-50%);
            -ms-transform: rotate(45deg) translateY(-50%);
             -o-transform: rotate(45deg) translateY(-50%);
                transform: rotate(45deg) translateY(-50%);
        position: absolute;
        content: "";
        margin-left: -5px;
        width: 8px;
        height: 8px;
        z-index: 201;
        background-color: rgba(255,255,255,0) !important;
    }*/
    #sitemap .categoryList .trueBgColor {
        background-color: #FFF;
        border-radius: 0
    }

    #sitemap .level02 {
        padding-bottom: 10px
    }

    #sitemap .level02 > li {
        border-top: 1px solid #D6D6D6
    }

    #sitemap .level02 > li:last-child {
        border-bottom: 1px solid #D6D6D6
    }

    #sitemap .level02 > li > .anchor {
        padding-left: 35px;
        font-size: 1.1rem
    }

    #sitemap .level02 > li > .anchor:before {
        margin-top: -8px;
        width: 3px;
        height: 3px;
        border-width: 6px;
        top: 50%;
        right: 18px
    }

    #sitemap .level03 {
        background-color: #F6F6F6;
        border-top: 1px solid #D6D6D6
    }

    #sitemap .level03 > li {
        border-bottom: 1px solid #D6D6D6
    }

    #sitemap .level03 > li:last-child {
        border-bottom: none
    }

    #sitemap .level03 > li > .anchor {
        padding-left: 50px;
        font-size: 1rem
    }

    #sitemap .level03 > li > .anchor:before {
        margin-top: -1px;
        width: 0;
        height: 0;
        top: 50%;
        right: 22px
    }

    #sitemap .spNavi {
        box-sizing: border-box;
        padding: 25px 15px;
        width: 100%;
        position: relative
    }

    #sitemap .spNavi:after {
        display: block;
        clear: both;
        content: ""
    }

    #sitemap .spNavi .pcLink a {
        padding-left: 20px;
        position: relative;
        color: #FFF
    }

    #sitemap .spNavi .pcLink a:after {
        margin-top: -5px;
        width: 10px;
        height: 10px;
        background: url("/img/common/icon/pc_icon01.png") no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 0;
        content: ""
    }

    #sitemap .pageTop {
        margin-top: -19px;
        margin-left: -19px;
        width: 38px;
        height: 38px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        display: block
    }

    #sitemap .pageTop a {
        width: 100%;
        height: 100%;
        display: block;
        position: relative
    }

    #sitemap .pageTop a:before,
    #sitemap .pageTop a:after {
        position: absolute;
        content: ""
    }

    #sitemap .pageTop a:before {
        margin-left: -5px;
        width: 10px;
        height: 1px;
        background-color: #fff;
        top: 15px;
        left: 50%
    }

    #sitemap .pageTop a:after {
        box-sizing: border-box;
        margin-left: -4px;
        width: 7px;
        height: 7px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        bottom: 8px;
        left: 50%;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg)
    }

}

.category_index #container {
    background-color: transparent
}

.category_index #container:before,
.category_index #container:after {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    content: ""
}

.category_index #container:before {
    background-color: rgba(255, 255, 255, .5);
    z-index: -1
}

.category_index #container:after {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -2
}

.category_conts .headline01 {
    overflow: hidden;
    position: relative
}

.category_conts .headline01:before {
    width: 100%;
    background-color: rgba(255, 255, 255, .5);
    overflow: hidden;
    position: absolute;
    left: 0;
    z-index: 1;
    content: ""
}

.category_conts .headline01 .bg {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 0;
    -webkit-transform: translate(0)
}

.category_conts .headline01 .bg:before,
.category_conts .headline01 .bg:after {
    width: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    left: 0;
    content: "";
    -webkit-transform: translate(0)
}

.category_conts .headline01 .bg:before {
    background-clip: content-box;
    z-index: 1;
    overflow: hidden
}

.category_conts .headline01 .bg:after {
    top: 0;
    z-index: 0
}

@media only screen and (min-width: 1025px) {
    .category_conts .headline01:before {
        height: 80px;
        top: 160px
    }

    .category_conts .headline01 .bg {
        height: 240px;
        border-radius: 0 0 4px 4px
    }

    .category_conts .headline01 .bg:before,
    .category_conts .headline01 .bg:after {
        background-position: center 65%;
        border-radius: 0 0 4px 4px
    }

    .category_conts .headline01 .bg:before {
        padding-top: 160px;
        height: 80px
    }

    .category_conts .headline01 .bg:after {
        height: 240px
    }

    .cssfilters.no_touch_device .category_conts .headline01 .bg:before {
        /*-webkit-filter: blur(8px);
        filter: blur(8px)*/
        opacity: .2
    }
}

@media only screen and (max-width: 1024px) {
    .category_conts .headline01 {
        margin-right: -20px;
        margin-left: -20px
    }

    .category_conts .headline01:before {
        height: 40px;
        top: 80px
    }

    .category_conts .headline01 .bg {
        height: 120px
    }

    .category_conts .headline01 .bg:before,
    .category_conts .headline01 .bg:after {
        background-position: center 55%;
        background-size: auto 500%
    }

    .category_conts .headline01 .bg:before {
        padding-top: 80px;
        height: 40px
    }

    .category_conts .headline01 .bg:after {
        height: 120px
    }
}

.black_layout {
    color: #FFF
}

.black_layout a {
    color: #FFF
}

.black_layout #container:before {
    background-color: rgba(0, 0, 0, .5)
}

.black_layout #pagePath .noLink {
    color: #FFF
}

.black_layout #header:before,
.black_layout #header:after {
    background-color: rgba(255, 255, 255, .1)
}

.black_layout #header .logo {
    background-image: url("/img/common/template/logo02.png");
    background-repeat: no-repeat
}

.black_layout #header .logo img {
    visibility: hidden
}

.black_layout #header .sitemapBtn.scrl {
    background-color: #FFF
}

.black_layout #header .sitemapBtn.scrl .bar {
    background-color: #222
}

.black_layout #header .sitemapBtn .bar {
    background-color: #FFF
}

.black_layout #gNavi a {
    color: #FFF
}

.black_layout #conts .headline01:after {
    background-color: #FFF
}

.black_layout #conts .headline01 .en {
    color: #FFF
}

.black_layout #conts .ttl01 .en {
    color: #FFF
}

.black_layout #fixPageTop a:before {
    background-color: #FFF
}

.black_layout #fixPageTop a:after {
    border-top-color: #FFF;
    border-right-color: #FFF
}

@media only screen and (max-width: 1024px) {
    .black_layout #header .logo {
        width: 60px;
        background-size: 60px auto
    }
}

@media only screen and (min-width: 1025px) {
    .fixed_conts_layout #main {
        position: relative
    }

    .fixed_conts_layout .contInner > .frame {
        max-width: 435px
    }

    .fixed_conts_layout .placement {
        width: 435px;
        position: absolute;
        top: 0;
        right: 40px
    }
}

.headline01 {
    position: relative;
    z-index: 100;
    line-height: 1.1;
    text-align: center
}

.headline01:after {
    margin-right: auto;
    margin-left: auto;
    height: 1px;
    background-color: #000;
    display: block;
    content: ""
}

.headline01 > span {
    display: block;
    position: relative;
    z-index: 1
}

.headline01 .en {
    font-weight: 100
}

.headline01 .em {
    font-weight: 400
}

.business_field .headline01 .en {
    color: #0C3754
}

.mission .headline01 .en {
    color: #660F27
}

.about_us .headline01 .en {
    color: #702810
}

.recruit .headline01 .en {
    color: #07382E
}

.other_page .headline01 .en {
    color: #3D1839
}

@media only screen and (min-width: 1025px) {
    .headline01 {
        margin-bottom: 40px;
        padding-top: 80px
    }

    .headline01:after {
        margin-top: 40px;
        width: 20px
    }

    .headline01 .en {
        margin-bottom: 25px;
        font-size: 5.6rem
    }

    .headline01 .ja {
        font-size: 3.2rem
    }

    .category_conts .headline01 {
        padding-top: 210px
    }
}

@media only screen and (max-width: 1024px) {
    .headline01 {
        margin-bottom: 30px;
        padding-top: 20px
    }

    .headline01:after {
        margin-top: 20px;
        width: 10px
    }

    .headline01 .en {
        margin-bottom: 15px;
        font-size: 2.8rem
    }

    .headline01 .ja {
        font-size: 1.6rem
    }

    .category_conts .headline01 {
        padding-top: 105px
    }
}

.ttl01 {
    text-align: center
}

.ttl01 > span {
    display: block
}

.ttl01 .en {
    font-weight: 100
}

.ttl01 .em {
    font-weight: 400
}

.business_field .ttl01 .en {
    color: #0C3754
}

.mission .ttl01 .en {
    color: #660F27
}

.about_us .ttl01 .en {
    color: #702810
}

.recruit .ttl01 .en {
    color: #07382E
}

.other_page .ttl01 .en {
    color: #3D1839
}

@media only screen and (min-width: 1025px) {
    .ttl01 {
        margin-bottom: 35px
    }

    .ttl01 .en {
        margin-bottom: 5px;
        font-size: 4rem
    }

    .ttl01 .ja {
        font-size: 2.4rem
    }

    .category_index .ttl01 .en {
        margin-bottom: 10px;
        font-size: 4.8rem
    }

    .category_index .ttl01 .ja {
        font-size: 3.2rem
    }
}

@media only screen and (max-width: 1024px) {
    .ttl01 {
        margin-bottom: 25px
    }

    .ttl01 .en {
        margin-bottom: 5px;
        font-size: 2.4rem
    }

    .ttl01 .ja {
        font-size: 1.5rem
    }
}

.txtEm01 {
    color: #660D26;
    font-weight: bold
}

.sentenceBox01 {
    background-color: #222;
    border-radius: 0;
    color: #FFF;
    line-height: 2
}

@media only screen and (min-width: 1025px) {
    .sentenceBox01 {
        padding: 60px;
        padding-bottom: 55px
    }
}

@media only screen and (max-width: 1024px) and (min-width: 1025px) {
    .sentenceBox01 {
        padding: 40px;
        padding-bottom: 35px
    }
}

@media only screen and (max-width: 1024px) {
    .sentenceBox01 {
        padding: 20px;
        padding-bottom: 15px
    }
}

@media only screen and (min-width: 1025px) {
    .sentence01 {
        text-align: center
    }

    .sentence01 p + p {
        margin-top: 2em
    }
}

@media only screen and (max-width: 1024px) {
    .sentence01 {
        text-align: left
    }
}

.other_page .headline01 .bg:before,
.other_page .headline01 .bg:after {
    background-image: url("/img/common/template/headline_bg.jpg");
    background-position: center 40%
}

#notFound .homeBtn {
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #D6D6D6;
    border-radius: 0;
    display: table;
    position: relative
}

#notFound .homeBtn:after {
    box-sizing: border-box;
    border-style: solid;
    border-color: #3D1839;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    content: ""
}

@media only screen and (min-width: 1025px) {
    #notFound .homeBtn {
        margin-top: 40px;
        padding: 20px;
        padding-right: 50px
    }

    #notFound .homeBtn:after {
        margin-top: -8px;
        width: 16px;
        height: 16px;
        border-width: 6px;
        right: 20px;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease
    }

    #notFound .homeBtn:hover:after {
        margin-top: -12px;
        width: 24px;
        height: 24px;
        border-width: 4px;
        right: 16px
    }
}

@media only screen and (max-width: 1024px) {
    #notFound .homeBtn {
        box-sizing: border-box;
        margin-top: 20px;
        padding: 15px;
        width: 100%;
        padding-right: 40px;
        font-size: 1.2rem
    }

    #notFound .homeBtn:after {
        margin-top: -4px;
        width: 8px;
        height: 8px;
        border-width: 3px;
        right: 15px
    }
}

/*breadcrumb*/

.bcl-contents {
    text-align: center;
    position: relative;
    overflow: hidden;
    left: 0;
    margin: 30px 0 25px
}

.bcl-contents li {
    display: inline-block;
    width: auto;
    font-size: 1.6rem;
    margin: 0 6px
}

.bcl-contents li:last-child {
    font-weight: bold
}

.bcl-contents li:after {
    display: inline-block;
    content: ">";
    padding-left: 12px
}

.bcl-contents li:last-child:after {
    display: none
}

.tag {
    box-sizing: border-box;
    display: inline-block;
    border-radius: 2px;
    color: #FFF;
    text-align: center;
    font-weight: normal;
    vertical-align: middle
}

.tag.is_news {
    background-color: #660F27
}

.tag.is_saiyo {
    background-color: #702810
}

.tag.is_career {
    background-color: #07382E
}

.tag.is_service_cate {
    background-color: #0C3754
}

@media only screen and (min-width: 1025px) {
    .tag {
        min-width: 70px;
        margin-left: 2px;
        padding: 2px 5px;
        font-size: 1rem
    }
}

@media only screen and (max-width: 1024px) {
    .tag {
        margin-left: 2px;
        min-width: 70px;
        padding: 1px 3px;
        font-size: 1rem
    }
}

section.block-content.posts-list-block,
section.block-content.posts-list-block > ul {
    position: relative;
    overflow: hidden;
    display: block
}

section.block-content.posts-list-block > ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

section.block-content.posts-list-block > ul li {
    width: -webkit-calc(25% - 22px);
    width: -moz-calc(25% - 22px);
    width: -ms-calc(25% - 22px);
    width: -o-calc(25% - 22px);
    width: calc(25% - 22px);
    margin: 10px;
    float: left;
    background-color: #FFF;
    border: 1px solid #CFCFCF;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

section.block-content.posts-list-block > ul li:hover {
    background-color: #EFEFEF;
    border: 1px solid #EFEFEF;
}

section.block-content.posts-list-block > ul li a {
    margin-bottom: 20px;
    display: block;
    height: 100%
}

section.block-content.posts-list-block > ul li a:hover {
    color: #333
}

section.block-content.posts-list-block > ul li .posts-list-header img {
    width: 100%
}

section.block-content.posts-list-block > ul li .posts-list-content {
    padding: 15px
}

section.block-content.posts-list-block > ul li .posts-list-content .lists-meta-data {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 5px
}

section.block-content.posts-list-block > ul li .posts-list-content .lists-meta-data .category {
    margin-left: 5px;
    color: #FFFFFF;
    background: #666666;
    line-height: 1.7em;
    padding-right: 5px;
    padding-left: 5px
}

section.block-content.posts-list-block > ul li .posts-list-content .lists-title {
    font-size: 1.6rem;
    line-height: 1.7em;
    letter-spacing: -.01em
}


/*table*/

section.block-content table tr th,
section.block-content table tr td {
    border: 3px solid #FFFFFF;
    padding: 13px 20px;
    line-height: 1.5em;
    vertical-align: top;
    font-size: 1.6rem
}

section.block-content table tr th {
    background: #EFEFEF
}

section.block-content table tr td p {
    margin-bottom: 1em
}

section.block-content table tr td p:last-child {
    margin-bottom: 0
}

/*フローティングバナー設定*/
img {
    width: 100%;
  }
/* ==========================
  フローティングバナー（追従バナー）
========================== */
.bl_floatingBanner{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99999; /* 他の要素の下に隠れないように */
  width: 35%;
  height: auto;
  max-width: 200px;
} 
.bl_floatingBanner.js_close{
  display: none;
}
.bl_floatingBanner_img{
    display: block;
  transition: 0.3s;
}
/*.bl_floatingBanner_img:hover {
  opacity: 0.6;
}*/
.bl_floatingBanner_close{
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: -15px;
  cursor: pointer;
  background-color: rgba(240, 0, 0, 1);;
}
.bl_floatingBanner_close span:nth-of-type(1){
  position: absolute;
  top: 7px;
  right: 2px;
  width: 15px;
  height: 3px;
  background-color: #ffffff;
  transform: rotate(45deg);
}
.bl_floatingBanner_close span:nth-of-type(2){
  position: absolute;
  top: 1px;
  right: 8px;
  width: 3px;
  height: 15px;
  background-color: #ffffff;
  transform: rotate(45deg);
}

#followup-bg{
	width: 100%;
	bottom: 0;
	left:0;
	background-color:rgba(0,5,8,0.2);
	position: fixed;
}
#followup-main {
	width:100%;
	padding: 5px 0 10px 0;
	text-align: center;
	z-index: 2;
}