@charset "utf-8";

/* ==========================================================================//
//
//　reset
//
// ========================================================================== */

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,
canvas,
details,
figcaption,
figure,
footer,
main,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight: normal;
    font-style: normal;
    background: transparent;
    box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

caption,
th {
    text-align: left;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: normal;
    box-sizing: border-box;
}

label {
    white-space: nowrap;
}

img {
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

strong {
    font-weight: bold;
}

body {
    -webkit-text-size-adjust: 100%;
}

@media print {
    body {
        width: 1100px;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}

/* ==========================================================================//
//
//　baseSet
//
// ========================================================================== */

/* common class */
html {
    font-size: calc(100vw / 37.5);
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1a1a1a;
    font-size: 1.4rem;
    line-height: 1.4;
    font-family:
        YakuHanJPs, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Noto Sans JP", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック",
        "MS PGothic", sans-serif;
    letter-spacing: 0.1em;
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: break-word;
}

a {
    color: #1a1a1a;
    outline: none;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

body.scroll-none {
    overflow: hidden;
}

@media print, screen and (min-width: 768px) {
    html {
        font-size: 62.5%;
    }

    /* 768px Over */
    body {
        font-size: 1.4rem;
        line-height: 1.6;
    }

    a:hover {
        opacity: 0.8;
    }
}

img[src$=".svg"] {
    width: 100%;
}

@media print, screen and (min-width: 1024px) {
    body {
        font-size: 1.6rem;
    }
}

@media all and (-ms-high-contrast: none) {
    /* ここに書く */
    body {
        letter-spacing: 0.1rem;
    }
}

/* unique class */
.inner {
    position: relative;
    max-width: 113rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.only-pc {
    display: none;
}

.f-open {
    font-family: YakuHanJPs, "Open Sans", sans-serif;
    font-weight: 400;
}

@media print, screen and (min-width: 768px) {
    .inner {
        padding: 0 3rem;
    }

    .only-sp {
        display: none;
    }

    .only-pc {
        display: block;
    }
}

@media print, screen and (min-width: 1024px) {
    .inner {
        padding: 0 1rem;
    }
}

/* c-pagetitle
---------------------------------------------------------- */
@media print, screen and (min-width: 1024px) {
    .main-wrap {
        padding: 8rem 0;
    }
}

.c-pagetitle {
    padding: 1rem 0;
    background: #c8c8c8;
}

.c-pagetitle .title {
    font-size: 1.2rem;
}

.c-pagetitle .title span {
    position: relative;
    display: inline-block;
    padding-right: 8.5rem;
    font-size: 2.2rem;
    font-weight: bold;
}

.c-pagetitle .title span:after {
    content: "";
    display: inline-block;
    width: 8rem;
    height: 1px;
    background: #1a1a1a;
    overflow: hidden;
    position: absolute;
    bottom: 1rem;
    right: 0;
}

@media print, screen and (min-width: 768px) {
    .c-pagetitle {
        padding: 1.6rem 0 2rem;
    }

    .c-pagetitle .title {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .c-pagetitle .title span {
        padding-right: 8.5rem;
        font-size: 3.5rem;
    }
}

@media print, screen and (min-width: 1024px) {
    .c-pagetitle .title {
        font-size: 1.4rem;
    }

    .c-pagetitle .title span {
        font-size: 4rem;
    }
}

/* c-title-sect
---------------------------------------------------------- */

.c-title-sect {
    margin-bottom: 3rem;
    font-size: 1.2rem;
}

.c-title-sect span {
    position: relative;
    display: inline-block;
    padding-right: 8.5rem;
    font-size: 2.2rem;
    font-weight: bold;
}

.c-title-sect span:after {
    content: "";
    display: inline-block;
    width: 8rem;
    height: 1px;
    background: #1a1a1a;
    overflow: hidden;
    position: absolute;
    bottom: 1rem;
    right: 0;
}

@media print, screen and (min-width: 768px) {
    .c-title-sect {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .c-title-sect span {
        padding-right: 8.5rem;
        font-size: 3.5rem;
    }
}

@media print, screen and (min-width: 1024px) {
    .c-title-sect {
        margin-bottom: 5rem;
        font-size: 1.4rem;
    }

    .c-title-sect span {
        font-size: 4rem;
    }
}

/* c-title-tertiary
---------------------------------------------------------- */

.c-title-tertiary {
    margin-bottom: 3rem;
    font-size: 1.2rem;
    text-align: center;
}

.c-title-tertiary span {
    display: block;
    font-size: 2.2rem;
    font-weight: bold;
}

@media print, screen and (min-width: 768px) {
    .c-title-tertiary {
        margin-bottom: 5rem;
        font-size: 1.4rem;
    }

    .c-title-tertiary span {
        font-size: 3rem;
    }
}

@media print, screen and (min-width: 1024px) {
}

/* ==========================================================================//
//
//　side-btn
//
// ========================================================================== */

.side-btn {
    width: 100%;
    height: 0;
    position: static;
}

.side-btn .btn {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 6rem;
    position: fixed;
    right: 0px;
    bottom: -100%;
    z-index: 8;
    transition: 0.5s;
}

.side-btn .btn li {
}

.side-btn .btn li a {
    display: block;
    height: 6rem;
    box-sizing: border-box;
}

.side-btn .btn li:nth-child(1) {
    width: 20%;
}

.side-btn .btn li:nth-child(1) a {
    padding: 1.8rem 2.5rem;
    background: #333333;
}

.side-btn .btn li:nth-child(2) {
    width: 100%;
    flex: 1;
}

.side-btn .btn li:nth-child(2) a {
    padding: 2.2rem 2.5rem;
    background: #1c85a8;
    color: #fff;
    text-align: center;
}

.scooter .side-btn .btn li:nth-child(2) a {
    background: #00bfaa;
}

.smart .side-btn .btn li:nth-child(2) a {
    background: #ec2329;
}

.cruiser .side-btn .btn li:nth-child(2) a {
    background: #27339a;
}

.trike .side-btn .btn li:nth-child(2) a {
    background: #d15e00;
}

.classic .side-btn .btn li:nth-child(2) a {
    background: #939393;
}

.side-btn .btn .sm {
    display: none;
}

@media screen and (max-width: 767px) {
    .side-btn {
        z-index: 10;
    }

    .side-btn .btn .sm {
        display: block;
        width: 100%;
        flex: 1;
        background-color: #4388ae;
    }

    .side-btn .btn .sm a {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .side-btn .btn .sm:last-of-type {
        background-color: #499fcf;
    }

    .side-btn .btn .sm a img {
        height: 80%;
    }

    .side-btn .btn .pc {
        display: none;
    }
}

/* フェードイン */
.side-btn.in .btn {
    bottom: 0;
}

/* バナー停止時 */
.side-btn.stop {
    position: relative;
}

.side-btn.stop .btn {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
}

@media print, screen and (min-width: 768px) {
    .side-btn .btn {
        display: -webkit-block;
        display: block;
        width: 6rem;
        height: 18rem;
        bottom: 10rem;
        right: -100%;
    }

    .side-btn .btn li {
        text-align: center;
    }

    .side-btn .btn li:nth-child(1) {
        width: 100%;
    }

    .side-btn .btn li:nth-child(1) a {
        padding: 1.5rem 0;
    }

    .side-btn .btn li:nth-child(1) a img {
        width: 2.9rem;
    }

    .side-btn .btn li:nth-child(2) {
        width: 100%;
        flex: initial;
    }

    .side-btn .btn li:nth-child(2) a {
        width: 6rem;
        height: 12rem;
        padding: 2.2rem 2.1rem;
        font-size: 1.4rem;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }

    /* フェードイン */
    .side-btn.in .btn {
        right: 0;
        bottom: 10rem;
    }

    /* バナー停止時 */
    .side-btn.stop .btn {
        bottom: 0;
    }
}