@charset "UTF-8";
/* ==========================================================================
   Variables
   ========================================================================== */ :root {
    --color-bg-dark: #111111;
    --color-text: #323638;
    --color-sub-text: #6e7274;
    --color-button: #6e7274;
    --color-tab: #8e9294;
    --color-border: #bec2c4;
    --color-bg-light: #eeeff0;
    --color-white: #ffffff;
    --color-blue: #3e8acc;
    --color-red: #d2321e;
    --color-yellow: #f2b600;
    --color-green: #007d74;
    --font-sans: Arial, Helvetica, Verdana, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif;
    --font-noto: Arial, 'Noto Sans Japanese', sans-serif;
    --font-yu: Arial, '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'Noto Sans Japanese', 'メイリオ', Meiryo, sans-serif;
    --font-serif-greek: 'Caudex', serif;
}
/* ==========================================================================
   1. Fonts
   ========================================================================== */
@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');
}
/* ==========================================================================
   2. Base Styles & General Utilities
   ========================================================================== */
body {
    font-family: var(--font-sans);
    color: var(--color-text);
    font-size: 14px;
}
.wrap {
    overflow: hidden;
}
.c-both {
    clear: both;
}
.inline-block {
    display: inline-block;
}
hr {
    border-width: 1px 0 0;
    border-style: solid none none;
    border-color: var(--color-border);
    margin: 0;
    padding: 0;
}
.container {
    margin-bottom: 25px;
}
/* ギリシャ文字 */
.greek {
    font-family: var(--font-serif-greek);
    font-size: 120%;
    line-height: 0;
}
/* カウンター用 */
.counter-box {
    display: none;
}
/* ==========================================================================
   3. Typography & Text Style
   ========================================================================== */
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, h1 .small, .h1 .small, h2 small, .h2 small, h2 .small, .h2 .small, h3 small, .h3 small, h3 .small, .h3 .small {
    font-size: 55%;
    font-weight: 400;
    color: var(--color-text);
}
h4 small, .h4 small, h4 .small, .h4 .small, h5 small, .h5 small, h5 .small, .h5 .small, h6 small, .h6 small, h6 .small, .h6 .small {
    font-size: 65%;
    font-weight: 400;
    color: var(--color-text);
}
.noto700 {
    font-family: var(--font-noto);
    font-weight: 700;
}
/* フォントサイズ・文字装飾クラス */
.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%;
}
.small-text-3da {
    font-size: 77%;
    letter-spacing: -0.02em;
}
span.text-icon-mm {
    background: var(--color-red);
    padding: 2px 2px 1px 3px;
    vertical-align: middle;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-white);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.08em;
    position: relative;
    top: -0.1em;
    margin-right: 14px;
    margin-left: 1em;
}
/* カラー定義 */
.c_blue {
    color: var(--color-blue);
}
.c_red {
    color: var(--color-red);
}
.c_yellow {
    color: var(--color-yellow);
}
.c_green {
    color: var(--color-green);
}
/* ==========================================================================
   4. Links & Interactive Elements
   ========================================================================== */
a {
    color: var(--color-text);
    transition: all 0.15s ease-out;
}
a:focus {
    outline: none;
    text-decoration: none;
}
a img, .link-drop-shadow, .link-drop-shadow img {
    transition: all 0.15s ease-out;
}
/* タッチデバイス配慮：PC等のホバー環境のみ適用 */
@media (hover: hover) and (pointer: fine) {
    a:hover {
        color: var(--color-blue);
        text-decoration: none;
    }
    a:hover img {
        opacity: 0.7;
    }
    .link-drop-shadow:hover {
        color: var(--color-text);
        text-decoration: none;
    }
    .link-drop-shadow:hover img {
        opacity: 0.7;
    }
    .link-drop-shadow:hover > section {
        box-shadow: 0px 0px 5px 4px rgba(104, 106, 110, 0.63);
        color: var(--color-text);
    }
    .btn-default.override:hover {
        color: var(--color-blue);
        background-color: var(--color-white);
        border-color: var(--color-blue);
    }
    .btn-download:hover {
        color: var(--color-white);
        background-color: var(--color-blue);
    }
    .page-top a:hover {
        color: var(--color-blue);
        border-color: var(--color-blue);
    }
    .mm-nav:hover {
        background-color: var(--color-blue);
    }
    .mm-nav-shop-careers a:hover {
        color: var(--color-white);
    }
    .mm-category-box ul li a:hover {
        background-color: var(--color-blue);
        color: var(--color-white);
        padding-left: 8px;
    }
    .mm-category-box ul li a:hover span.careers-text {
        color: var(--color-white);
    }
    .footer-container a:hover {
        color: var(--color-blue);
        text-decoration: none;
    }
    .social-icon .facebook a:hover {
        color: #4467AE;
    }
    .social-icon .twitter a:hover {
        color: #55ACEE;
    }
    .social-icon .youtube a:hover {
        color: #CF1E14;
    }
}
.link-drop-shadow:focus, .footer-container a:focus {
    text-decoration: none;
}
.link-drop-shadow > section:focus {
    box-shadow: 0px 0px 5px 4px rgba(104, 106, 110, 0.63);
    color: var(--color-text);
}
/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn-default.override {
    color: var(--color-text);
    border-color: #AAB0B2;
}
.btn-download {
    color: var(--color-white);
    background-color: #6E7274;
}
/* PAGE TOP ボタン */
.page-top {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 20px;
    z-index: 999;
}
.page-top a {
    display: block;
    text-align: center;
    color: var(--color-text);
    background: var(--color-white);
    font-size: 14px;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 10px 16px;
}
.page-top i {
    color: var(--color-blue);
    padding-right: 9px;
}
/* ==========================================================================
   6. Grid & Layout (Gutter Setup & Vertical Align)
   ========================================================================== */
.row-0 {
    margin-inline: 0;
}
.row-0 > div {
    padding-inline: 0;
}
.row-10 {
    margin-inline: -5px;
}
.row-10 > div {
    padding-inline: 5px;
}
.row-20 {
    margin-inline: -10px;
}
.row-20 > div {
    padding-inline: 10px;
}
.row-40 {
    margin-inline: -20px;
}
.row-40 > div {
    padding-inline: 20px;
}
.row-50 {
    margin-inline: -25px;
}
.row-50 > div {
    padding-inline: 25px;
}
.row-60 {
    margin-inline: -30px;
}
.row-60 > div {
    padding-inline: 30px;
}
.row-70 {
    margin-inline: -35px;
}
.row-70 > div {
    padding-inline: 35px;
}
.row-80 {
    margin-inline: -40px;
}
.row-80 > div {
    padding-inline: 40px;
}
.row--v-middle {
    font-size: 0;
}
.row--v-middle > [class*="col-"] {
    float: none;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
}
/* ==========================================================================
   7. PC Base Styles (Default: Header, Megamenu, Footer)
   ========================================================================== */
/* Header & Navigation */
.pageheader {
    background-color: var(--color-bg-dark);
    top: 0;
    z-index: 999;
    width: 1140px;
    height: 47px;
    position: fixed;
    left: 50%;
    margin-left: -570px;
    padding: 0;
    font-size: 14px;
}
.megamenu {
    display: inline-block;
    position: relative;
    width: 100%;
}
.mm_overlay {
    background: #000;
    opacity: 0.7;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
}
.logo {
    display: block;
    width: 30%;
    float: left;
}
.logo img {
    width: 140px;
    margin-top: 13px;
    margin-left: 15px;
}
span.careers-text {
    font-size: 110%;
    font-weight: 700;
    color: var(--color-blue);
}
.mm-navbox {
    float: left;
    width: 30%;
    background-color: var(--color-bg-dark);
}
.mm-nav {
    width: 33.3333%;
    display: block;
    float: left;
    transition: all 0.1s ease-out;
    height: 47px;
    border-left: 1px solid #6E7274;
}
.mm-nav > a {
    text-align: center;
    color: var(--color-bg-light);
    display: block;
    height: 100%;
    width: 100%;
    line-height: 47px;
}
.mm-nav > a:focus {
    color: var(--color-bg-light);
}
.mm-nav > a::after {
    font-family: icomoon;
    content: '\e900';
    font-size: 1.33333em;
    line-height: 0.75em;
    vertical-align: -15%;
    margin-left: 5px;
}
.mm-nav-shop-box {
    float: right;
    width: 40%;
    font-size: 12px;
}
.mm-nav-shop {
    width: 33.333%;
}
.mm-nav-shop > a {
    text-align: center;
    padding-right: 0;
}
.mm-nav-shop > a::before {
    font-family: icomoon;
    content: '\e905';
    margin-right: 5px;
}
.mm-nav-shop > a::after {
    content: none;
}
.mm-nav-shop-os, .mm-nav-shop-spico {
    width: 28%;
}
.mm-nav-shop-careers, .mm-nav-shop-eng {
    display: block;
    width: 22%;
}
.mm-nav-shop-careers a {
    color: #8dddf7;
}
.mm-nav-shop-careers > a::before {
    color: var(--color-white);
}
/* Megamenu Dropdown */
.mm-dropdown {
    display: none;
    z-index: 9999;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    max-height: none;
    background-color: rgba(255, 255, 255, 0.92);
    position: absolute;
    padding: 14px 15px;
}
.mm-dropdown-mini {
    left: 50%;
    width: 50%;
}
.mm-dropdown-mini .mm-category-box ul {
    display: block;
}
.mm-row-5 {
    width: 20%;
    float: left;
}
.mm-row-6 {
    width: 16.66666%;
    float: left;
}
.mm-category-box {
    float: left;
    text-align: left;
    width: 100%;
    margin-bottom: 25px;
    border-style: none;
    padding-top: 4px;
}
.mm-category-box-mini {
    width: 100%;
}
.mm-category-inner {
    margin: 0 13px;
}
.mm-category-inner > a {
    display: block;
}
.mm-category-inner img {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-bottom: 10px;
    float: left;
}
.mm-category-inner li.two-lines {
    line-height: 1.3;
}
.mm-category-inner .small-text-rs-suzuki {
    font-size: 70%;
}
.mm-category-title {
    width: 100%;
    float: left;
}
.mm-category-name-e {
    display: block;
    font-size: 19px;
    margin-bottom: 4px;
    line-height: 100%;
}
.mm-category-name-jl {
    display: block;
    font-family: var(--font-yu);
    font-weight: 700;
    font-size: 18px;
    margin: 6px 0 15px;
    line-height: 100%;
}
.mm-category-name-jl i {
    margin-right: 2px;
}
.mm-category-name-j {
    display: block;
    margin-bottom: 8px;
}
.btn-toggle {
    display: none;
    width: 15%;
    float: right;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    margin-bottom: 10px;
}
.btn-toggle::after {
    font-family: icomoon;
    content: "\e900";
    font-size: 150%;
}
.btn-toggle.open::after {
    content: "\e906";
}
.mm-category-box ul {
    padding: 0;
    display: block;
    border-top: 3px solid #6E7274;
    clear: both;
    margin-bottom: 10px;
}
.mm-category-box ul li {
    list-style: none;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.6;
}
.mm-category-box ul li a {
    width: 100%;
    display: block;
    padding: 6px 0;
}
.mm-nolink {
    line-height: 2.7;
}
/* Footer Base */
.footer-container {
    background-color: var(--color-bg-dark);
    padding-top: 25px;
    padding-bottom: 20px;
    color: var(--color-border);
    font-size: 14px;
}
.footer-container a {
    color: var(--color-border);
}
.footer-container .container {
    margin-bottom: 0;
}
.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;
    text-align: left;
    margin: 0;
    padding: 0;
}
.footer-nav-item li {
    border-bottom: none;
    padding: 7px 0;
}
.footer-company {
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.footer-company > p > i {
    margin-right: 5px;
}
.footer-logo {
    margin-block: 5px 20px;
    opacity: 0.8;
    width: 130px;
    height: auto;
}
.social-icon .instagram img {
    width: 38px;
}
.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;
}
/* ==========================================================================
   8. Screen-Only Responsive Overrides (Ignored on Print)
   ========================================================================== */
/* Max-width: 1199px (1200px未満) */
@media screen and (max-width: 1199px) {
    .pageheader {
        width: 100%;
        left: 0;
        margin-left: 0;
        font-size: 12px;
    }
    .logo {
        width: 25%;
    }
    .mm-navbox {
        width: 31%;
    }
    .mm-nav-shop-box {
        width: 44%;
    }
    .mm-dropdown-mini {
        left: 45.7%;
        width: 54.3%;
    }
    .mm-category-inner {
        margin: 0 10px;
    }
    .mm-category-box ul li a {
        padding: 8px 0;
    }
    .footer-container {
        font-size: 13px;
    }
}
/* Max-width: 991px (992px未満) */
@media screen and (max-width: 991px) {
    body {
        font-size: 13px;
    }
    .mm-category-name-e {
        font-size: 17px;
    }
    .mm-category-name-jl {
        font-size: 14px;
    }
}
/* Max-width: 767px (Smartphone / Small Tablet Screen) */
@media screen and (max-width: 767px) {
    .pageheader {
        height: 80px;
        position: absolute;
    }
    .logo {
        width: 38%;
        float: left;
    }
    .logo img {
        width: 109px;
        margin-top: 13px;
        margin-left: 10px;
    }
    .mm-navbox {
        width: 100%;
        background-color: #252627;
    }
    .mm-nav {
        width: 33.3333%;
        height: 40px;
        border-left: none;
    }
    .mm-nav > a {
        line-height: 40px;
    }
    .mm-nav-shop-box {
        width: 62%;
        float: left;
    }
    .mm-nav-shop {
        width: 33.333%;
    }
    .mm-nav-shop > a {
        text-align: left;
    }
    .mm-nav-shop-os, .mm-nav-shop-spico {
        width: 37%;
    }
    .mm-nav-shop-eng {
        width: 26%;
    }
    .mm-nav-shop-careers {
        display: none;
    }
    .mm-dropdown {
        padding: 0;
    }
    .mm-dropdown .mm-category-box ul {
        display: none;
    }
    .mm-dropdown-mini {
        left: 0;
        width: 100%;
    }
    .mm-dropdown .mm-category-box-mini ul {
        display: block;
    }
    .mm-category-box {
        border-bottom: 1px solid var(--color-border);
        padding: 10px 0 0;
        margin-bottom: 0;
    }
    .mm-category-inner img {
        width: 75px;
        margin: 0 10px 10px 0;
    }
    .mm-category-title {
        width: 50%;
    }
    .mm-category-name-jl {
        font-size: 17px;
    }
    .mm-category-name-j {
        margin-bottom: 10px;
    }
    .btn-toggle {
        display: block;
    }
    .mm-category-box ul {
        border-top: 1px solid var(--color-border);
    }
    .mm-category-box ul li a {
        padding: 9px 0;
    }
    .footer-nav-item li {
        border-bottom: 1px solid #414547;
    }
    .social-icon .instagram img {
        width: 36px;
    }
    .mm-row-5 {
        width: 100%;
    }
    .mm-row-6 {
        width: 100%;
    }
}
/* Max-width: 470px */
@media screen and (max-width: 470px) {
    .mm-nav-shop-os > a, .mm-nav-shop-spico > a, .mm-nav-shop-eng > a {
        line-height: 14px;
        padding-top: 3px;
        text-align: left;
    }
    .mm-nav-shop-os > a > .inline-block, .mm-nav-shop-spico > a > .inline-block, .mm-nav-shop-eng > a > .inline-block {
        padding-left: 1.5em;
    }
    .mm-nav-shop-box {
        font-size: 11px;
    }
}
/* Max-width: 350px */
@media screen and (max-width: 350px) {
    .btn {
        font-size: 13px;
    }
}
/* ==========================================================================
   9. Print Specific Adjustments
   ========================================================================== */
@media print {
    .pageheader {
        position: static;
        width: 100%;
        left: 0;
        margin-left: 0;
    }
    .mm-dropdown, .mm_overlay, .page-top {
        display: none !important;
    }
}