@charset "utf-8";

:root {
    --main_c: #FFDE01;
    --sub_c: #fff;
    --bc_c1: #CDE6F5;
    --bc_c2: #0000ac;
    --bc_c3: #FFFDE8;
    --bc_c4: #D9D9D9;
    --bc_c5: #CDEDFF;
    --bcgray_c: #555;
    --bclgray_c: #EAE7E7;
    --act_c1: #45BC90;
    --act_c2: #FC4A4A;
    --act_c3: #008CE6;
    --act_c4: #FF8515;
    --act_c5: #1800AE;
    --act_c6: #305BF4;
    --act_c7: #3051FD;
    --act_c8: #047FC2;
    --act_c9: #000B45;
    --act_c10: #FF3526;
    --act_c11: #00C24E;
    --act_c12: #FAFF1E;
    --act_c13: #054984;
    --act_c14: #ff3434;
    --act_c15: #51D78A;
    --act_c16: #912009;
    --act_c17: #2E5497;
    --act_c18: #666;
    --gr_c1: #0E3E74;
    --gr_c2: #63C58D;
    --gr_c3: #65A4CD;
    --huki_c1: #e0edff;
    --line_c1: #c4c4c4;
    --pre_1: #3B3943;
    --pre_2: #121A4A;
    --pre_3: linear-gradient(180deg, #3B3B47 0%, #1F1E2C 100%);
    --pre_4: #E60012;
    --pre_5: #201F2D;
    --pre_6: #384087;
    --pre_7: #808199;
    --pre_8: #1a1a1a;
    --pre_9: #121D4D;
    --pre_10: #21202E;
    --shake_1: #93DCFF;
    --shake_2: #121A4A;
    --shake_3: #FFF67C;
    --shake_4: #F54600;
    --shake_5: #09609D;
    --shake_6: #DBF8ED;
    --shake_7: #FFCACA;
    --shake_8: #f6f6f6;
    --shake_9: #4EBBEF;
    --shake_10: #A3E5ED;
    --text_c1: #000;
    --text_c2: #FF6476;
    --text_c3: #f00;
    --text_c4: #7a7a7a;
    --font_13: 0.8125em;
    --font_15: 0.9375em;
    --font_18: 1.125em;
    --font_20: 1.25em;
    --font_22: 1.375em;
    --font_25: 1.5625em;
    --font_30: 1.875em;
    --font_32: 2em;
    --font_34: 2.125em;
    --font_36: 2.25em;
    --font_42: 2.625em;
    --font_50: 3.125em;
    --font_57: 3.5625em;
    --font_73: 4.5625em;
    --font_87: 5.4375em;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    min-width: 1280px;
    position: relative;
}

main {
    /* margin-top: 140px; */
}

figure {
    height: inherit;
}

img {
    /* height: 100%; */
    height: auto;
    image-rendering: auto;
    /* image-rendering: -webkit-optimize-contrast; */
    object-fit: cover;
    object-position: center;
    /* vertical-align: baseline; */
    width: 100%;
    max-width: 100%;
}

section {
    padding: 100px 0;
}

dl {
    width: 100%;
}

li {
    list-style: none;
}

main a,
footer a,
.sub_banner .flex_box>*,
.target_card_picture,
.btn_section,
.main_visial_btn img {
    transition-duration: .4s;
}

main a:hover,
footer a:hover,
.sub_banner .flex_box>*:hover,
.target_card_picture:hover,
/* .btn_section:hover, */
.main_visial_btn img:hover {
    transform: scale(1.1);
}

#maker_select,
#body_type {
    display: flex;
    opacity: 1;
}

.wrap {
    overflow: hidden;
}

.container {
    width: 1188px;
    min-width: 1188px;
    margin: auto;
}

.desktop {
    display: block;
}    

.flex_box {
    display: flex;
    flex-wrap: wrap;
}

.mobile {
    display: none;
}    

.d-none {
    display: none;
}    

.grid_box {
    display: grid;
}

.br::after {
    content: "\A";
    white-space: pre;
}

.f_small {
    font-size: smaller;
}

.text_red {
    color: var(--text_c2);
}

.text_blue {
    color: var(--act_c3);
}

.text_red2 {
    color: var(--text_c3);
}

.text_act5 {
    color: var(--act_c5);
}

.text_act6 {
    color: var(--act_c6);
}

.text_act17 {
    color: var(--act_c17);
}

.text_act18 {
    color: var(--act_c18);
}

.text_sha5 {
    color: var(--shake_5);
}

.cl {
    text-transform: uppercase;
}

.clear {
    clear: both;
}

.white_bc {
    background: var(--sub_c);
}

.transparent_bc {
    background: rgba(0, 0, 0, 0);
}

.p_re {
    position: relative;
}

.photo_area>.p_re {
    flex-basis: 100%;
}

.mbn {
    margin-bottom: 0px;
}

.slick-slide img.desktop {
    display: block;
}

.slick-slide img.mobile {
    display: none;
}

.underline {
    text-decoration: underline;
    text-decoration-thickness: 0.5em;
    text-decoration-color: var(--main_c);
    text-underline-offset: -0.2em;
    text-decoration-skip-ink: none;
}

.underboxline {
    background: linear-gradient(transparent 90%, var(--main_c) 0%);
}

.title_style_01 {
    /* box-shadow: 3px 3px 0px var(--text_c1); */
    filter: drop-shadow(3px 3px var(--text_c1));
    flex-basis: max-content;
    font-family: toppan-bunkyu-midashi-go-std, sans-serif;
    font-size: var(--font_20);
    font-style: normal;
    font-weight: 900;
    transform: rotate(-3.12deg);
    padding: 10px 1em 10px;
    width: max-content;
}

.title_style_02 {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-weight: 700;
    background: rgb(78, 187, 239);
    background: linear-gradient(90deg, rgba(78, 187, 239, 1) 0%, rgba(14, 62, 116, 1) 50%, rgba(78, 187, 239, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    position: relative;
    line-height: 1;
}

.title_style_02:after {
    background: rgb(78, 187, 239);
    background: linear-gradient(90deg, rgba(78, 187, 239, 1) 0%, rgba(14, 62, 116, 1) 50%, rgba(78, 187, 239, 1) 100%);
    height: 2px;
    width: 200%;
    display: block;
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.title_style_03 {
    display: flex;
    align-items: flex-end;
}

.title_style_03 p {
    border-bottom: 2px solid var(--shake_1);
    font-size: var(--font_34);
    font-weight: 900;
    margin-left: -1em;
    margin-bottom: 1px;
    padding-left: 2em;
    width: calc(100% + 1em);
}

.title_style_03 img {
    width: 98px;
}

.title_style_04 {
    font-size: var(--font_20);
    font-weight: 700;
    line-height: 1;
    padding-bottom: 0.75em;
}

.title_style_04::after {
    display: block;
    content: "";
    border-bottom: 2px solid var(--act_c4);
    margin: 0.5em auto 0;
    width: 40%;
}

.title_style_h3 {
    font-size: var(--font_42);
    font-weight: 900;
    line-height: 62px;
    text-align: center;
    letter-spacing: 0.15em;
}

.title_type_h4 {
    font-size: var(--font_25);
    font-weight: 900;
    line-height: 37px;
    text-align: center;
    letter-spacing: 0.15em;
}

.title_style_h5 {
    padding-left: 0.5em;
    font-weight: 900;
    font-size: var(--font_25);
    line-height: 1;
    letter-spacing: 0.15em;
    border-left: 4px solid var(--act_c1);
}

.text_slash {
    color: var(--sub_c);
    font-size: 1.5625em;
    font-weight: 700;
    text-align: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.text_slash::before,
.text_slash::after {
    display: inline-block;
    content: '';
    height: 0;
    width: 42px;
    border: 1px solid var(--sub_c);
    position: absolute;
    top: 50%;
}

.text_slash::before {
    left: calc(-1em - 42px);
    transform: rotate(46deg) translateY(-50%);
    -webkit-transform: rotate(46deg) translateY(-50%);
    -ms-transform: rotate(46deg) translateY(-50%);
}

.text_slash::after {
    right: calc(-1em - 42px);
    transform: rotate(-46deg) translateY(50%);
    -webkit-transform: rotate(-46deg) translateY(50%);
    -ms-transform: rotate(-46deg) translateY(50%);
}

.under_page .title_area {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 50px;
}

.btn_area {
    width: max-content;
    margin: 50px auto;
}

.btn_style_01,
.btn_style_02,
.btn_style_03,
.btn_style_04,
.btn_style_05,
.btn_style_06,
.btn_style_07 {
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    font-size: var(--font_20);
    font-weight: 600;
    letter-spacing: 0.1em;
    overflow: hidden;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn_style_01 {
    background: var(--text_c1);
    color: var(--sub_c);
    width: 360px;
    line-height: 1;
    padding: 1em 1.5em 1em 1em;
}

.btn_style_01 .fas {
    font-size: var(--font_20);
}

.btn_style_02 {
    background: var(--main_c);
    color: var(--text_c1);
    width: 100%;
}

.btn_style_03 {
    background: var(--act_c3);
    color: var(--sub_c);
    width: 360px;
}

.btn_style_04 {
    background: var(--text_c1);
    border-radius: 5px;
    color: var(--sub_c);
    display: inline-flex;
    font-size: var(--font_34);
    justify-content: center;
    align-items: center;
    text-align: start;
}

.btn_style_05 {
    background: var(--sub_c);
    color: var(--text_c1);
    width: 360px;
}

.btn_style_06 {
    background: var(--text_c1);
    color: var(--sub_c);
    width: 100%;
}

.btn_style_07 {
    background: var(--act_c9);
    color: var(--sub_c);
    width: 100%;
}

.btn_style_01 span,
.btn_style_02 span,
.btn_style_03 span,
.btn_style_04 figure,
.btn_style_05 span,
.btn_style_06 span,
.btn_style_07 span,
.btn_style_04 i,
.btn_style_04 p,
.btn_style_04 span {
    position: relative;
}

.btn_style_01 .fa-position-right,
.btn_style_02 .fa-position-right,
.btn_style_04 .fa-position-right,
.btn_style_06 .fa-position-right,
.btn_style_07 .fa-position-right {
    position: absolute;
    top: calc(50% - .5em);
    right: 1rem;
}

.btn_style_01 .fa-position-left,
.btn_style_03 .fa-position-left,
.btn_style_05 .fa-position-left {
    position: absolute;
    top: calc(50% - .45em);
    left: 1rem;
}


.btn_style_01:hover span,
.btn_style_01:hover i,
.btn_style_03:hover span,
.btn_style_03:hover i,
.btn_style_05:hover span,
.btn_style_05:hover i,
.btn_style_06:hover span,
.btn_style_06:hover i,
.btn_style_07:hover span,
.btn_style_07:hover i {
    color: var(--text_c1);
}

.btn_style_02:hover i,
.btn_style_02:hover span {
    color: var(--sub_c);
}

.btn_style_07:hover span {
    z-index: 1;
}


.btn_style_01:before,
.btn_style_01:after,
.btn_style_02:before,
.btn_style_02:after,
.btn_style_03:before,
.btn_style_03:after,
.btn_style_04:before,
.btn_style_04:after,
.btn_style_05:before,
.btn_style_05:after,
.btn_style_06:before,
.btn_style_06:after,
.btn_style_07:before,
.btn_style_07:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.btn_style_01:before,
.btn_style_02:before,
.btn_style_03:before,
.btn_style_04:before,
.btn_style_05:before,
.btn_style_06:before,
.btn_style_07:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.btn_style_01:before,
.btn_style_03:before,
.btn_style_05:before,
.btn_style_07:before {
    background: var(--main_c);
}

.btn_style_02:before {
    background: var(--text_c1);
}

.btn_style_04:before,
.btn_style_06:before {
    background: var(--act_c3);
    z-index: 0;
}

.btn_style_01:hover:before,
.btn_style_02:hover:before,
.btn_style_03:hover:before,
.btn_style_04:hover:before,
.btn_style_05:hover:before,
.btn_style_06:hover:before,
.btn_style_07:hover:before {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.ribbon {
    display: inline-block;
    position: relative;
    text-align: center;
    box-sizing: border-box;
}

.ribbon:before {
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    left: -25px;
    z-index: 1;
    border: 20px solid var(--main_c);
    border-left-color: transparent;
}

.ribbon:after {
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    right: -25px;
    z-index: 1;
    border: 20px solid var(--main_c);
    border-right-color: transparent;
}

.ribbon h3 {
    background: var(--main_c);
    color: var(--text_c2);
    display: inline-block;
    font-size: var(--font_15);
    font-weight: 900;
    line-height: 1.5;
    margin: 0;
    padding: 0.5em 45px;
    text-shadow: 2px 2px 0 var(--main_c);
    position: relative;
    z-index: 3;
}

.ribbon h3:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px var(--main_c);
    z-index: 2;
}

.ribbon h3:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px var(--main_c);
    z-index: 2;
}

.ribbon11 {
    background: var(--act_c16);
    border: 3px solid var(--sub_c);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 10px;
    width: 380px;
    text-align: center;
    color: var(--sub_c);
    font-size: var(--font_25);
    font-weight: bold;
    position: relative;
    letter-spacing: 0.175em;
}
.ribbon11:before {
    position: absolute;
    content: '';
    top: -28px;
    left: 0;
    border-top: solid 25px transparent;
    border-right: solid 57px var(--act_c16);
}

.text_gra {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: var(--font_50);
    line-height: 1;
    text-align: right;
    letter-spacing: 0.15em;
    background: linear-gradient(45deg, rgba(14, 62, 116, 1) 0%, rgba(78, 187, 239, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.tab {
    display: flex;
    flex-wrap: wrap;
}

.tab li a {
    display: block;
    margin: 0 2px;
    padding: 10px 20px;
}

.tab li a img {
    filter: drop-shadow(0 0 0.4rem var(--line_c1));
}

.area {
    display: none;
    opacity: 0;
    /* background: var(--sub_c); */
    padding: 50px 20px;
}

.area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.function_icon_box {
    justify-content: space-between;
}

.border_box_1 {
    box-sizing: border-box;
    border: 1px solid var(--act_c3);
    border-radius: 5px;
    color: var(--act_c3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

/* ================================================================
フキダシ
================================================================ */

.balloon1 {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    font-size: 16px;
    background: var(--huki_c1);
}

.balloon1:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid var(--huki_c1);
}

.balloon1 p {
    margin: 0;
    padding: 0;
}

.balloon1-top {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    font-size: 16px;
    background: var(--main_c);
}

.balloon1-top:before {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid var(--main_c);
}

.balloon1-top p {
    margin: 0;
    padding: 0;
}

.balloon1-left {
    position: relative;
    display: inline-block;
    margin: 1.5em 0 1.5em 15px;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    font-size: 16px;
    background: var(--huki_c1);
}

.balloon1-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid var(--huki_c1);
}

.balloon1-left p {
    margin: 0;
    padding: 0;
}

#raitenyoyaku,
#karishinsa {
    position: fixed;
    bottom: 0;
    right: 0;
    opacity: 0;
}
/* ================================================================================================================================
8/10追加分
================================================================================================================================ */
.btn-social-isometric:hover {
    border-bottom: none;
    border-right: none;
    transform: translateY(0px);
}

.over_view {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

/* ================================================================
to top
================================================================ */
#page-top a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--main_c);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: var(--shake_5);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 2em;
    transition: all 0.3s;
}

#page-top a:hover {
    background: var(--act_c4);
}

#page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;
    opacity: 0;
    transform: translateY(100px);
}

#page-top.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#page-top.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(100px);
    }
}

/* ================================================================
モーダルウィンドウ
================================================================ */
.hide-area {
    display: none;
}

.modaal-close:after,
.modaal-close:before {
    background: var(--sub_c);
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: var(--bcgray_c);
}

.slider_banner,
.thumbnail {
    display: none;
}

.slider_banner.slick-initialized,
.thumbnail.slick-initialized {
    display: block;
}

/* ================================================================
スクロールしてフェードイン
================================================================ */
/* フェードイン(初期値) */
.js-fadeUp {
    /* opacity: 0; */
    /* transform: translateY(30px); */
    /* transition: opacity .8s, transform .8s; */
}

.js-fadeLeft {
    /* opacity: 0; */
    /* transform: translateX(-30px); */
    /* transition: opacity .8s, transform .8s; */
}

.js-fadeRight {
    /* opacity: 0; */
    /* transform: translateX(30px); */
    /* transition: opacity .8s, transform .8s; */
}

/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
    /* opacity: 1; */
    /* transform: translateY(0); */
    /* transition-delay: .2s; */
}

.js-fadeLeft.is-inview {
    /* opacity: 1; */
    /* transform: translateX(0); */
    /* transition-delay: .2s; */
}

.js-fadeRight.is-inview {
    /* opacity: 1; */
    /* transform: translateX(0); */
    /* transition-delay: .2s; */
}


/* 8/21追加分 */
.mb40 {
    margin-bottom: 40px;
}