/*------   初期スタイル    ------*/
*,
*::after,
*::before{
    box-sizing: border-box;
}

a {
    cursor: pointer;
}
a:hover {
    text-decoration: none;
}

.disp-sp {
    display: block;
}
.disp-pc {
    display: none;
}

@media screen and (min-width: 767px) {
    .disp-sp {
        display: none;
    }
    .disp-pc {
        display: block;
    }
}

/*------   色ほか    ------*/
:root {
    --bg-gray: #F9F9FA;
    --red: #CF2C2B;
    --padding-lr: 16px;
}

@media screen and (min-width: 767px) {
    :root {
        --padding-lr: 40px;
    }
}
/*------   フォント    ------*/
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap'); */

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 400;
    src: local("Noto Sans CJK JP"), local("NotoSansJP-Regular"), local("NotoSansJP-Regular"), url("/font/NotoSansJP-Regular.woff2") format("woff2"), url("/font/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 600;
    src: local("NotoSansJP-Bold"), local("NotoSansJP-Bold"), url("/font/NotoSansJP-Bold.woff2") format("woff2"), url("/font/NotoSansJP-Bold.woff") format("woff");
}
@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 900;
    src: local("NotoSansJP-Black"), local("NotoSansJP-Black"), url("/font/NotoSansJP-Black.woff2") format("woff2"), url("/font/NotoSansJP-Black.woff") format("woff");
}

.apros{
    font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    font-family: "NotoSansJP","Hiragino Sans", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #111;
}

@media screen and (min-width: 767px) {
    .apros {
        font-size: 18px;
        min-width: 1200px;
    }
}

/*------   タイトル / テキスト    ------*/
.apros span {
    /* color: inherit; */
    font-weight: inherit;
}

.headingLv2 {
    text-align: center;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 28px;
}
.headingLv2 .--strong {
    font-size: 32px;
    font-weight: 600;
    color: #CF2C2B;
}
.headingLv2 .--sub {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #CF2C2B;
    margin-bottom: 4px;
}
.headingLv2::after {
    content: "";
    display: block;
    width: 230px;
    height: 4px;
    background: #CF2C2B;
    margin: 12px auto 0;
}

@media screen and (min-width: 767px) {
    .headingLv2 {
        font-size: 48px;
        margin-bottom: 40px;
    }
    .advantages .headingLv2 {
        font-size: 37px;
    }
    .headingLv2 .--strong {
        font-size: 48px;
    }
    .headingLv2 .--sub {
        font-size: 21px;
    }
    .headingLv2::after {
        width: 400px;
        margin: 16px auto 0;
    }
}

.headingLv3 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 16px;
}

@media screen and (min-width: 767px) {
    .headingLv3 {
        font-size: 33px;
    }
}

.headingLv4 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 8px;
}

@media screen and (min-width: 767px) {
    .headingLv4 {
        font-size: 18px;
        margin-top: 32px;
    }
    .carte .headingLv4 {
        margin-bottom: 16px;
    }
}

.apros .article__text-link,
.appointed-day__menu-list a {
    color: #1e77c9;
    text-decoration: underline;
}
.apros .article__text-link:hover {
    color: #1e77c9;
    text-decoration: underline;
    opacity: 0.8;
}
/* 外部リンクアイコン */
.apros .article__text-link[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 12px;
    margin-left: 2px;
    margin-right: 1px;
    background-image: url("../_images/icon_new_win_blue.svg");
    background-repeat: no-repeat;
    background-position: center;
    /* mask-image: url("../_images/icon_new_win.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #1e77c9; */
}

/******  共通設定  *******/
@media screen and (min-width: 767px) {
    .section {
        min-width: 1200px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/******  メインコンテンツ  *******/

/*------   メインビジュアル    ------*/

/* .mv {
    width: 100%;
    background: url(../_image/KV_bg_SP.jpg) no-repeat center / cover;
    padding-top: 30px;
    padding-bottom: 45px;
} */

/* .mv__inner {
    padding: 0 3.9vw;
    background: #EDF1F5;
    padding-top: 30px;
} */

/* .mv__content {
    max-width: 340px;
    width: 100%;
    margin: auto;
} */

/* .mv__subtitle {
}
.mv__subtitle__badge {
    display: inline-block;
    background: #fff;
    color: #738A9F;
    padding: 4px;
    line-height: 1.4;
    font-size: 14px;
} */

/* .mv__title {
    color: #002445;
    font-size: 40px;
    font-weight: 600;
    margin-top: 16px;
    line-height: 1.38;
    text-align: center;
} */

/* .mv__title .__sm {
    font-size: 30px;
    font-weight: 600;
} */

.top-btn{
    width: 100%;
    text-align: center;
}

.kv {
    position: relative;
    height: 490px;
    background: #EDF1F5;
    margin-bottom: 40px;
}
.kv__slant-bg {
    height: 100%;
    width: 100%;
    clip-path: polygon(0 76%, 100% 37%, 100% 100%, 0 100%);
    background-color: #002445;

    position: absolute;
    bottom: 0;
}

.kv__inner {
    position: relative;
    z-index: 2;
    padding-top: 40px;
}
.kv__content {
    text-align: center;
}

.kv__subtitle__badge {
    display: inline-block;
    background: #fff;
    color: #738A9F;
    padding: 4px;
    line-height: 1.4;
    font-size: 14px;
}
.kv__title {
    color: #002445;
    font-size: 40px;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 12px;
    line-height: 1.38;
}
.kv__title .__sm {
    font-size: 30px;
}
.kv__img {
    width: 170px;
    margin: 0 auto;
}
.kv__img img {
    width: 100%;
}

@media screen and (min-width: 767px) {
    .kv {
        height: 362px;
        margin-bottom: 80px;
    }
    .kv__inner {
        display: flex;
        width: 870px;
        margin: 0 auto;
    }
    .kv__content {
        text-align: left;
        padding-top: 28px;
    }
    .kv__slant-bg {
        clip-path: polygon(calc(50% + 430px) 0, 100% 0, 100% 100%, calc(50% + 100px) 100%);
    }

    .kv__title {
        font-size: 62px;
    }
    .kv__title .__sm {
        font-size: 52px;
    }
    .kv__subtitle__badge {
        padding: 4px;
        line-height: 1.4;
        font-size: 17px;
    }
    .top-btn{
        width: 100%;
        margin-top: 16px;
        text-align: left;
    }

    .kv__img {
        width: 210px;
        margin-left: 140px;
    }
}

/*------   CTA    ------*/
.appeal {
    background-color: #002445;
    padding: 57px 0 48px;
    margin-top: 80px;
    margin-bottom: 80px;
}

.appeal__inner {
    width: 100%;
    padding: 0 20px;
    margin: auto;
}

.appeal__items {
    display: flex;
    align-items: center;
    justify-content: center;
}

.appeal__item {
    font-size: 17px;
    font-weight: 600;
    padding: 0 16px;
    border-right: 2px solid #fff;
    color: #fff;
    line-height: 1;
}

.appeal__item:last-child {
    border-right: none;
}

.appeal__item:first-child {
    margin-left: 0;
}


.appeal__point {
    margin-top: 8px;
    font-size: 17px;
    line-height: 1.8;
    color: #fff;
    text-align: center;
}

.appeal__point span {
    background-color: #CF2C2B;
    padding: 8px 4px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

/*------   リニューアルのポイント    ------*/
.btn{
    text-align: center;
}

.btn.btn-red--mt24{
    margin-top: 24px;
}

.btn.btn-red--mt16{
    margin-top: 16px;
}

a.cta__btn{
    max-width: 270px;
    width: 100%;
    display: inline-block;
    padding: 16px 0;
    color: #fff;
    /* font-weight: 700; */
    /* font-family: 'Noto Sans JP', sans-serif; */
    font-size: 16px;
    background-color: #CA4539;
    border-radius: 30px;
    text-align: center;
    letter-spacing: 0.05em;
    box-shadow: 5px 5px 0 0 #EAB4AF;
    position: relative;
    transition: 0.3s ease;
}

a.cta__btn::before { 
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    opacity: 0;
    transition: opacity 0.3s ease;
}

a.cta__btn:hover::before {
    opacity: 0.2;
}

a.cta__btn:active{
    box-shadow: none;
    transform: translateY(5px);
}


/*------   ピットサービスWEB予約 3つのポイント    ------*/
.advantages__list {
    background: var(--bg-gray);
    padding: 16px var(--padding-lr) 0;
}
.advantages__item {
    position: relative;
    padding-bottom: 40px;
    max-width: 343px;
    margin: 0 auto;
}
.advantages__item__image {
    display: block;
    width: 98px;
    position: absolute;
    right: 0;
    top: 0;
}

@media screen and (min-width: 767px) {
    .advantages__list {
        background: transparent;
        padding: 0;

        display: flex;
        gap: 16px;
        margin: 0 auto;
        width: 1100px;
        margin-top: 80px;
    }
    .advantages__item {
        max-width: initial;
        margin: 0;

        background: var(--bg-gray);
        width: 356px;
        text-align: center;
        position: relative;
        padding: 32px 0 24px;
    }
    .advantages__item__image {
        display: inline-block;
        width: 204px;
        position: relative;
    }
}

.advantages__item__text {
    font-size: 17px;
    font-weight: 600;
}
.advantages__item .--red {
    font-size: 17px;
    font-weight: 600;
    color: #CF2C2B;
}
.advantages__item__number {
    font-size: 12px;
    font-weight: 600;
    color: #CF2C2B;
}
.advantages__item__number .--strong {
    font-size: 15px;
    font-weight: 600;
}

@media screen and (min-width: 767px) {
    .advantages__item__number {
        font-size: 29px;
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
    }
    .advantages__item__number .--strong {
        font-size: 45px;
    }
    .advantages__item__text {
        font-size: 21px;
    }
    .advantages__item .--red {
        font-size: 21px;
    }
}

.icon-arrow {
    display: block;
    margin-top: 48px;
    margin: 48px auto 40px;

}
/*------   WEB予約の流れ    ------*/
.flow__step__number {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: var(--red);
}

@media screen and (min-width:767px) {
    .flow__step__number {
        font-size: 21px;
    }
    .flow__step__number span {
        font-size: 26px;
    }
}

/* 斜め背景 */
.flow__step {
    position: relative;
}
.flow__step__slant-bg {
    height: 100%;
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 50% 100%, 0 calc(100% - 32px));
    background-color: var(--bg-gray);

    position: absolute;
    bottom: 0;
}

@media screen and (min-width:767px) {
    .flow__step__slant-bg {
        height: 100%;
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
        background-color: var(--bg-gray);
    }
}

.flow__step__inner {
    position: relative;
    z-index: 2;
    padding: 0 var(--padding-lr);
}


.flow__step {
    padding: 40px 0 44px;
    /* padding: 40px var(--padding-lr) 20px; */
    /* background: var(--bg-gray); */
    margin-bottom: 20px;
    max-width: 1100px;
    margin: 0 auto 1px;
}

.flow .flow__step:last-child {
    background: var(--bg-gray);
    padding-bottom: 12px;
}

@media screen and (min-width:767px) {
    .flow__step {
        padding: 40px 0 72px;
        margin-bottom: 16px;
    }
    
    .flow .flow__step:last-child {
        background: var(--bg-gray);
        padding-bottom: 40px;
    }
}

.flow__step__image {
    width: 100%;
    max-width: 400px;
    margin: 16px auto 24px;
}
@media screen and (max-width:766px) {
    .flow__step__image:not(.disp-pc) {
        display: block;
    }
}

.flow__step__login {
    background: #fff;
    padding: 20px 24px 0px;
    border-radius: 8px;

    position: relative;
    z-index: 2;
    margin: 0 var(--padding-lr);
}
.flow__step__login .headingLv4 {
    margin-top: 0;
}
@media screen and (min-width:767px) {
    .flow__step__inner, .flow__step__login {
        display: flex;
        align-items: flex-start;
    }
    .flow__step.__step1 .flow__step__inner {
        padding-bottom: 26px;
    }
    .flow__step__login {
        padding-left: 40px;
        padding-right: 40px;
    }

    .flow__step__text {
        width: 614px;
    }
    .flow__step__image {
        width: 408px;
        margin-top: 0;
    }
    .flow__step__login .flow__step__image {
        width: 300px;
    }
    .flow__step__image.one-click {
        margin-bottom: 0;
        width: 495px;
        max-width: inherit;
    }
}

.flow__step__cation,
.flow__step__cation--sm {
    position: relative;
    padding-left: 1em;
    /* margin-top: 8px; */
}
.flow__step__cation::before,
.flow__step__cation--sm::before {
    content: "※";
    position: absolute;
    left: 0;
}

.flow__step__cation{
    margin-top: 8px;
}
.flow__step__cation--sm {
    color: #666;
    font-size: 15px;
    margin-top: 4px;
    margin-bottom: 12px;
}

.flow__step__cation span {
    color: var(--red);
}

/*------   ご予約当日の流れ    ------*/
.appointed-day {
    margin: 80px 0;
}

.appointed-day__bg-wrapper,
.carte__bg-wrapper {
    background-color: var(--bg-gray);
    padding: 40px var(--padding-lr);
    max-width: 1100px;
    margin: 0 auto;
}


.appointed-day__bg-wrapper .appointed-day__step:not(:first-child) {
    margin-top: 40px;
}

.appointed-day__step__image {
    display: block;
    width: 246px;
    margin: 24px auto 0;
}

.appointed-day__menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 350px;
    margin-top: 8px;
}

.appointed-day__menu-list li {
    display: block;
    margin-bottom: 8px;
}
@media screen and (min-width:767px) {
    .appointed-day__menu-list {
        max-width: initial;
        justify-content: left;
        column-gap: 30px;
    }
}

.carte__bg-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
}

.carte__image {
    display: block;
    width: 376px;
    margin: 16px auto 0;
}

@media screen and (min-width:767px) {
    .appointed-day__step,
    .carte__bg-wrapper {
        display: flex;
        align-items: flex-start;
    }
    .carte__bg-wrapper {
        padding: 40px;
    }
    .appointed-day__step__image {
        width: 366px;
        margin: 0;
    }
    .carte__image {
        width: 376px;
        margin: 0 0 0 36px;
    }

    .carte__text .headingLv4:first-child {
        margin-top: 0;
    }
}

.apros span.carte__strong {
    color: var(--red);
    font-weight: 600;
}

@media screen and (min-width:767px) {
    .carte .headingLv4 {
        font-size: 29px;
    }
}

/******  PC  *******/

@media screen and (min-width:767px) {

    /*------   ボタン    ------*/
    .btn.btn--left {
        text-align: left;
    }
    
    .btn.btn-red--mt24 {
        margin-top: 32px;
    }
    
    .btn.btn-red--mt16{
        margin-top: 20px;
    }


    .appeal{
        padding: 40px 0;
    }

    .appeal__inner{
        padding: 0;
    }
    
    .appeal__item{
        font-size: 23px;
        padding: 0 32px;
    }
    
    .appeal__point{
        margin-top: 16px;
        font-size: 23px;
        line-height: 2;
    }
    
    .appeal__point span{
        background-color: #CF2C2B;
        padding: 8px 4px;
        font-size: 23px;
        margin-right: 8px;
    }

    .mv{
        width: 100%;
        /* background: url(../_image/KV_bg_PC.jpg) repeat center center / 1366px; */
        /* height: 570px; */
        padding-top: 30px;
    }
    
    .mv__inner{
        max-width: 930px;
        width: 100%;
        margin: auto;
        box-sizing: content-box;
        padding: 0 40px;
    }

    .mv__flex{
        display: flex;
        align-items: center;
    }
    
    .mv__content{
        max-width: initial;
        width: calc(100% - 415px);
        /* margin-top: 100px; */
        margin-right: 70px;
    }

    .mv__subtitle{
        font-size: min(1.68vw, 23px);
        /* display: inline-block; */
    }
    
    .mv__title{
        font-size: min(3.8vw, 52px);
        margin-top: 30px;
        text-align: left;
    }
    
    .mv__img {
        width: 210px;
    }
    
    .mv__img img{
        width: 100%;
    }
    

    
    /*------   リニューアルのポイント    ------*/
    

}