@charset "UTF-8";
/* Noto Sans Japanese */
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/NotoSansCJKjp-Bold.woff2) format('woff2'), url(../fonts/NotoSansCJKjp-Bold.woff) format('woff'), url(../fonts/NotoSansCJKjp-Bold.otf) format('opentype');
}
.c-both {
    clear: both;
}
.wrap {
    overflow: hidden;
}
body {
    font-family: Arial, Helvetica, Verdana, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif;
    color: #323638;
    font-size: 13px;
}
.small-text-3da {
    font-size: 77%;
    letter-spacing: -0.02em;
}
/* テキスト関連 */
.noto700 {
    font-family: Arial, 'Noto Sans Japanese', sans-serif;
    font-weight: 700;
}
.inline-block {
    display: inline-block;
    /* For IE 6/7 */
    *display: inline;
    *zoom: 1;
}
.font75 {
    font-size: 75%;
}
.font80 {
    font-size: 80%;
}
.font85 {
    font-size: 85%;
}
.font90 {
    font-size: 90%;
}
.font95 {
    font-size: 95%;
}
.font105 {
    font-size: 105%;
}
.font110 {
    font-size: 110%;
}
.font115 {
    font-size: 115%;
}
.font120 {
    font-size: 120%;
}
span.text-icon-mm {
    background: #E12D0A;
    padding: 2px 2px 1px 3px;
    vertical-align: middle;
    font-size: 11px;
    line-height: 1.4;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.08em;
    position: relative;
    top: -0.1em;
    margin-right: 14px;
    margin-left: 1em;
}
/* 色関連 */
.c_blue {
    color: #3E8ACC;
}
.c_red {
    color: #E12D0A;
}
.c_yellow {
    color: #F2B600;
}
.c_green {
    color: #007D74;
}
/* リンク */
a {
    color: #323638;
}
a:link, a:link img {
    /* リンクのイージング効果 */
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -ms-transition: all .15s ease-out;
    transition: all 0.15s ease-out;
}
a:hover, a:focus {
    color: #3E8ACC;
    text-decoration: none;
}
a:focus, *:focus {
    outline: none;
}
a:hover img {
    opacity: 0.7;
}
/* ドロップシャドウリンク */
.link-drop-shadow:link, .link-drop-shadow:link img {
    /* リンクのイージング効果 */
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -ms-transition: all .15s ease-out;
    transition: all 0.15s ease-out;
}
.link-drop-shadow > section:hover, .link-drop-shadow > section:focus {
    /*box-shadow*/
    box-shadow: 0px 0px 5px 4px rgba(104, 106, 110, 0.63);
    -webkit-box-shadow: 0px 0px 5px 4px rgba(104, 106, 110, 0.63);
    -moz-box-shadow: 0px 0px 5px 4px rgba(104, 106, 110, 0.63);
    color: #323638;
}
.link-drop-shadow:hover, .link-drop-shadow:focus {
    color: #323638;
    text-decoration: none;
}
.link-drop-shadow:hover img {
    opacity: 0.7;
}
/* ドロップシャドウリンク */
/* 区切り線 */
hr {
    border-width: 1px 0px 0px;
    border-style: solid none none;
    border-color: #BEC2C4;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    margin: 0px;
    padding: 0px;
}
/* 見出し */
h1, .h1 {
    font-weight: 700;
    font-size: 33px;
}
h2, .h2 {
    font-weight: 700;
    font-size: 28px;
}
h3, .h3 {
    font-weight: 700;
    font-size: 24px;
}
h4, .h4 {
    font-weight: 700;
    font-size: 21px;
}
h5, .h5 {
    font-weight: 700;
    font-size: 16px;
}
h6, .h6 {
    font-weight: 700;
    font-size: 14px;
}
h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small {
    font-size: 55%;
    font-weight: 400;
    color: #323638;
}
h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small, h4 .small, .h4 .small, h5 .small, .h5 .small, h6 .small, .h6 .small {
    font-size: 65%;
    font-weight: 400;
    color: #323638;
}
/*　container　*/
.container {
    margin-bottom: 25px;
}
/*　ガター(カラム間マージン)の調整　*/
.row-0 {
    margin-left: 0px;
    margin-right: 0px;
}
.row-0 > div {
    padding-right: 0px;
    padding-left: 0px;
}
.row-10 {
    margin-left: -5px;
    margin-right: -5px;
}
.row-10 > div {
    padding-right: 5px;
    padding-left: 5px;
}
.row-20 {
    margin-left: -10px;
    margin-right: -10px;
}
.row-20 > div {
    padding-right: 10px;
    padding-left: 10px;
}
.row-40 {
    margin-left: -20px;
    margin-right: -20px;
}
.row-40 > div {
    padding-right: 20px;
    padding-left: 20px;
}
.row-50 {
    margin-left: -25px;
    margin-right: -25px;
}
.row-50 > div {
    padding-right: 25px;
    padding-left: 25px;
}
.row-60 {
    margin-left: -30px;
    margin-right: -30px;
}
.row-60 > div {
    padding-right: 30px;
    padding-left: 30px;
}
.row-70 {
    margin-left: -35px;
    margin-right: -35px;
}
.row-70 > div {
    padding-right: 35px;
    padding-left: 35px;
}
.row-80 {
    margin-left: -40px;
    margin-right: -40px;
}
.row-80 > div {
    padding-right: 40px;
    padding-left: 40px;
}
/* 縦位置中央ぞろえ用 */
.row--v-middle {
    font-size: 0;
}
.row--v-middle > [class*="col-"] {
    float: none;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
}
/* ボタン */
.btn-default.override {
    color: #323638;
    border-color: #AAB0B2;
}
.btn-default.override:hover {
    color: #3E8ACC;
    background-color: #FFFFFF;
    border-color: #3E8ACC;
}
.btn-download {
    color: #FFFFFF;
    background-color: #6E7274;
}
.btn-download:hover {
    color: #FFFFFF;
    background-color: #3E8ACC;
}
@media (max-width: 350px) {
    .btn {
        font-size: 13px;
    }
}
/* ギリシャ文字（α・βなど） */
.greek {
    font-family: 'Caudex', serif;
    font-size: 120%;
    line-height: 0px;
}
/* PAGE TOP　ボタン */
.page-top {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 20px;
    z-index: 999;
}
.page-top a {
    display: block;
    text-align: center;
    color: #323638;
    background: #FFF;
    font-size: 14px;
    text-decoration: none;
    border: #BEC2C4 1px solid;
    border-radius: 4px;
    padding: 10px 16px;
    /*	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
*/
}
.page-top a:hover {
    display: block;
    color: #3E8ACC;
    background: #FFF;
    font-size: 14px;
    text-decoration: none;
    border: #3E8ACC 1px solid;
    border-radius: 4px;
    padding: 10px 16px;
}
.page-top i {
    color: #3E8ACC;
    padding-right: 9px;
}
/* カウンター用 */
.counter-box {
    display: none;
}
/* ナビゲーション */
.pageheader {
    background-color: #111;
    top: 0px;
    z-index: 999;
    width: 100%;
    height: 80px;
    position: absolute;
    font-size: 12px;
}
.megamenu {
    display: inline-block;
    position: relative;
    width: 100%;
}
.mm_overlay {
    background: #000;
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
}
.logo {
    display: block;
    width: 38%;
    float: left;
}
.logo img {
    width: 109px;
    margin-top: 13px;
    margin-left: 10px;
}
span.careers-text {
    font-size: 110%;
    font-weight: 700;
    color: #3e8acc;
}
.mm-navbox {
    float: left;
    width: 100%;
    background-color: #252627;
}
.mm-nav {
    width: 33.3333%;
    display: block;
    float: left;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all .1s ease-out;
    transition: all 0.1s ease-out;
    height: 40px;
}
.mm-nav:hover {
    background-color: #3E8ACC;
}
.mm-nav > a {
    text-align: center;
    color: #EEEFf0;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 40px;
}
.mm-nav > a:focus {
    color: #EEEFf0;
}
.mm-nav > a:after {
    font-family: icomoon;
    content: '\e900';
    font-size: 1.33333em;
    line-height: 0.75em;
    vertical-align: -15%;
    margin: 0 0 0 5px;
}
.mm-nav-shop-box {
    width: 62%;
    float: left;
    font-size: 12px;
}
.mm-nav-shop {
    width: 33.333%;
}
.mm-nav-shop-os {
    width: 37%;
}
@media (max-width: 470px) {
    .mm-nav-shop-os > a {
        line-height: 14px;
        padding-top: 3px;
        text-align: left;
    }
    .mm-nav-shop-os > a > .inline-block {
        padding-left: 1.5em;
    }
    .mm-nav-shop-spico > a {
        line-height: 14px;
        padding-top: 3px;
        text-align: left;
    }
    .mm-nav-shop-spico > a > .inline-block {
        padding-left: 1.5em;
    }
    .mm-nav-shop-eng > a {
        line-height: 14px;
        padding-top: 3px;
        text-align: left;
    }
    .mm-nav-shop-eng > a > .inline-block {
        padding-left: 1.5em;
    }
    .mm-nav-shop-box {
        font-size: 11px;
    }
}
.mm-nav-shop-careers {
    display: none;
}
.mm-nav-shop-spico {
    width: 37%;
}
.mm-nav-shop-careers a {
    color: #8dddf7;
}
.mm-nav-shop-careers a:hover {
    color: #fff;
}
.mm-nav-shop-eng {
    width: 26%;
}
.mm-nav-shop > a:before {
    font-family: icomoon;
    content: '\e905';
    margin: 0 5px 0 0;
}
.mm-nav-shop-careers > a:before {
    color: #fff;
}
.mm-nav-shop > a:after {
    content: none;
}
.mm-dropdown {
    display: none;
    z-index: 9999;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.92);
    position: absolute;
    padding: 0;
}
.mm-category-box {
    float: left;
    text-align: left;
    width: 100%;
    margin-bottom: 0;
    border-bottom: 1px solid #BEC2C4;
    padding: 10px 0 0;
}
.mm-category-inner {
    margin: 0 10px;
}
.mm-category-inner > a {
    display: block;
}
.mm-category-inner img {
    width: 75px;
    height: auto;
    margin: 0 10px 10px 0;
    float: left;
}
.mm-category-title {
    width: 50%;
    float: left;
}
.mm-category-name-e {
    display: block;
    font-size: 17px;
    margin: 0 0 4px;
    line-height: 100%;
}
.mm-category-name-jl {
    display: block;
    font-family: Arial, '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'Noto Sans Japanese', 'メイリオ', Meiryo, sans-serif;
    font-weight: 700;
    font-size: 17px;
    margin: 6px 0 15px;
    line-height: 100%;
}
.mm-category-name-jl i {
    margin-right: 2px;
}
.mm-category-name-j {
    display: block;
    margin-bottom: 10px;
}
.btn-toggle {
    width: 15%;
    float: right;
    border: 1px solid #BEC2C4;
    background-color: #FFF;
    margin: 0 0 10px;
}
.btn-toggle:after {
    font-family: icomoon;
    content: "\e900";
    font-size: 150%;
}
.btn-toggle.open:after {
    font-family: icomoon;
    content: "\e906";
    font-size: 150%;
}
.mm-category-box ul {
    padding: 0;
    display: none;
    border-top: 1px solid #BEC2C4;
    clear: both;
}
.mm-dropdown-mini .mm-category-box ul {
    display: block;
}
.mm-category-box ul li {
    list-style: none;
    border-bottom: 1px solid #BEC2C4;
    line-height: 1.6;
}
.mm-category-box ul li a {
    width: 100%;
    display: block;
    padding: 9px 0;
}
.mm-category-box ul li a:hover {
    background-color: #3E8ACC;
    color: #FFF;
    padding-left: 8px;
}
.mm-category-box ul li a:hover span.careers-text {
    color: #FFF;
}
.mm-nolink {
    line-height: 2.7;
}
/* フッター */
.footer-container {
    background-color: #111;
    padding-top: 25px;
    color: #BEC2C4;
    padding-bottom: 20px;
    font-size: 13px;
}
.footer-container a {
    color: #BEC2C4;
}
.footer-container a:hover, a:focus {
    color: #3E8ACC;
    text-decoration: none;
}
.footer-container .container {
    margin-bottom: 0px;
}
.footer-container ul {
    margin-bottom: 10px;
}
.footer-nav {
    margin-bottom: 20px;
}
.footer-nav-title {
    font-size: 16px;
    font-weight: 700;
    margin: 10px 0;
    line-height: 1.1;
}
.footer-nav-item {
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    text-align: left;
    margin: 0;
    padding: 0;
}
.footer-nav-item li {
    border-bottom: 1px solid #414547;
    padding: 7px 0;
}
.footer-company {
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.footer-company > p > i {
    margin-right: 5px;
}
.footer-logo {
    margin-bottom: 20px;
    margin-top: 5px;
    opacity: 0.8;
    width: 130px;
    height: auto;
}
.social-icon .instagram img {
    width: 36px;
}
.social-icon .facebook a:hover {
    color: #4467AE;
}
.social-icon .twitter a:hover {
    color: #55ACEE;
}
.social-icon .youtube a:hover {
    color: #CF1E14;
}
.list-inline-footer > li {
    padding-right: 12px;
    display: table-cell;
    vertical-align: middle;
}
.footer-link li:before {
    font-family: 'icomoon';
    content: '\e904';
    margin-right: 5px;
}
/* フッター */
/* ########### 768px以上 ########### */
@media (min-width: 768px) {
    /* ヘッダー */
    .mm_overlay {
        top: 0;
    }
    .pageheader {
        height: 47px;
        position: fixed;
    }
    .logo {
        float: left;
        width: 25%;
    }
    .logo img {
        width: 140px;
        margin-top: 13px;
        margin-left: 15px;
    }
    .mm-navbox {
        width: 31%;
        background-color: #111;
    }
    .mm-nav {
        float: left;
        border-left: 1px solid #6E7274;
        -webkit-transition: all 0.1s ease-out;
        -moz-transition: all 0.1s ease-out;
        -ms-transition: all .1s ease-out;
        transition: all 0.1s ease-out;
        height: 47px;
    }
    .mm-nav > a {
        line-height: 47px;
    }
    .mm-nav-shop-box {
        float: right;
        width: 44%;
        font-size: 12px;
    }
    .mm-nav-shop > a {
        text-align: center;
        padding-right: 0;
    }
    .mm-nav-shop-os {
        width: 28%;
    }
    .mm-nav-shop-careers {
        display: block;
        width: 22%;
    }
    .mm-nav-shop-spico {
        width: 28%;
    }
    .mm-nav-shop-eng {
        display: block;
        width: 22%;
    }
    .mm-dropdown {
        height: auto;
        max-height: none;
        padding: 14px 15px;
    }
    .mm-dropdown-mini {
        left: 45.7%;
        width: 54.3%;
    }
    .mm-row-5 {
        width: 20%;
        float: left;
    }
    .mm-row-6 {
        width: 16.66666%;
        float: left;
    }
    .mm-category-box {
        border-style: none;
        padding-top: 4px;
        margin-bottom: 25px;
    }
    .mm-category-box-mini {
        width: 100%;
    }
    .mm-category-inner img {
        width: 100%;
        margin-right: 0;
    }
    .mm-category-title {
        width: 100%;
    }
    .mm-category-name-jl {
        font-size: 14px;
    }
    .mm-category-name-j {
        margin-bottom: 8px;
    }
    .btn-toggle {
        display: none;
    }
    .mm-category-box ul {
        display: block;
        border-top-width: 3px;
        border-top-color: #6E7274;
        margin-bottom: 10px;
    }
    .mm-category-box ul li a {
        padding: 8px 0;
    }
    /* ヘッダー */
    /* フッター */
    .footer-nav-item li {
        border-bottom: none;
    }
    .social-icon .instagram img {
        width: 37px;
    }
    /* フッター */
}
/* ########### 992px以上 ########### */
@media (min-width: 992px) {
    body {
        font-size: 14px;
    }
    .mm-category-name-e {
        font-size: 19px;
    }
    .mm-category-name-jl {
        font-size: 18px;
    }
}
/* ########### 1200px以上 ########### */
@media (min-width: 1200px) {
    /* ヘッダー */
    /* ナビゲーション */
    .pageheader {
        width: 1140px;
        left: 50%;
        margin-left: -570px;
        padding: 0;
        font-size: 14px;
    }
    .logo {
        width: 30%;
    }
    .social-icon .instagram img {
        width: 38px;
    }
    .mm-navbox {
        width: 30%;
    }
    .mm-nav-shop-box {
        width: 40%;
    }
    .mm-dropdown-mini {
        left: 50%;
        width: 50%;
    }
    .mm-category-inner {
        margin: 0 13px;
    }
    .mm-category-box ul li a {
        padding: 6px 0;
    }
    /* ヘッダー */
    /* フッター */
    .footer-container {
        font-size: 14px;
    }
    /* フッター */
}