@charset "UTF-8";

body {
    font-size: 1.4rem;
}

@media (min-width: 940px) {
    body {
        font-size: 1.6rem;
    }
}

/*----------------------------------------------------
 section
----------------------------------------------------*/
.triauto-lp-section {
    padding: 7rem 2rem;
    position: relative;
}
.triauto-lp-section-title {
    position: relative;
    z-index: 2;
}
.triauto-lp-section-in {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
}
/* メインビジュアル後ろ */
.triauto-select-main-visual + .triauto-lp-section {
    padding-top: 5rem;
}

.triauto-lp-thin-flamingo {
    background: #F1E7E4;
}
.triauto-lp-thin-green {
    background: #E6EFDD;
}
.triauto-lp-thin-purple {
    background: #EDE0F4;
}
.triauto-lp-thin-red {
    background: #FDE4E7;
}
.triauto-lp-thin-blue {
    background: #CCE8FA;
}
.triauto-lp-white::before,
.triauto-lp-thin-green::before,
.triauto-lp-thin-purple::before,
.triauto-lp-thin-red::before,
.triauto-lp-thin-blue::before,
.triauto-lp-thin-flamingo::before {
    content: '';
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #F1E7E4;
    position: absolute;
    left: 50%;
    top: 0;
    height: 0;
    width: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.triauto-lp-thin-green::before,
.triauto-lp-thin-purple::before,
.triauto-lp-thin-red::before,
.triauto-lp-thin-blue::before,
.triauto-lp-thin-flamingo::before {
    border-top-color: #fff;
}
/* 一つ目は不要 */
.triauto-select-main-visual + .triauto-lp-thin-green::before,
.triauto-select-main-visual + .triauto-lp-thin-purple::before,
.triauto-select-main-visual + .triauto-lp-thin-red::before,
.triauto-select-main-visual + .triauto-lp-thin-blue::before,
.triauto-select-main-visual + .triauto-lp-thin-flamingo::before {
    content: none;
}

/* section-titleの後ろの場合 */
.triauto-lp-section-title + .triauto-lp-thin-green::before,
.triauto-lp-section-title + .triauto-lp-thin-purple::before,
.triauto-lp-section-title + .triauto-lp-thin-red::before,
.triauto-lp-section-title + .triauto-lp-thin-blue::before,
.triauto-lp-section-title + .triauto-lp-thin-flamingo::before {
    content: none;
}

@media (min-width: 940px) {
    .triauto-lp-section {
        padding: 12rem 4rem 10rem;
    }
    .triauto-lp-section-title {
    }
    .triauto-lp-section-title + .triauto-lp-section  {
        padding-top: 15rem;
    }
    .triauto-select-main-visual + .triauto-lp-section {
        padding-top: 9rem;
    }
    .triauto-lp-white::before,
    .triauto-lp-thin-green::before,
    .triauto-lp-thin-purple::before,
    .triauto-lp-thin-red::before,
    .triauto-lp-thin-blue::before,
    .triauto-lp-thin-flamingo::before {
        content: '';
        border-left-width: 75px;
        border-right-width: 75px;
        border-top-width: 50px;
    }
}

/*----------------------------------------------------
 title
----------------------------------------------------*/
.triauto-lp-title-bg-blue {
}
.triauto-lp-title-bg-text {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 2rem 0;
}

.triauto-lp-title-bg-blue .triauto-lp-title-bg-text {
    background-image: url(../img/bg-gradation-blue.png);
}
.triauto-lp-title-bg-red .triauto-lp-title-bg-text {
    background-image: url(../img/bg-gradation-red.png);
}
.triauto-lp-title-bg-orange .triauto-lp-title-bg-text {
    background-image: url(../img/bg-gradation-orange.png);
}
.triauto-lp-title-bg-text img {
    display: block;
    max-height: 35px;
    margin: 0 auto;
}
.triauto-lp-title-bg-arrow {
    position: absolute;
    width: 100%;
}
@media screen and (min-width: 940px) {
    .triauto-lp-title-bg-text {
        padding: 5rem 0;
    }
    .triauto-lp-title-bg-text img {
        max-height: 70px;
    }
}
@media (min-width: 1280px) {
    .triauto-lp-title-bg-text {
        padding: 8rem 0;
    }
    .triauto-lp-title-bg-text img {
        max-height: 90px;
    }
}

/*--------------------------------------------------------------------------
    modal
--------------------------------------------------------------------------*/
.modal-pop {
    width: 100vw;
    height: 100vh;
    position:fixed;
    top: 0;
    left:0;
    z-index:9997!important;
}
.modal-pop-bg {
    background-color: #1119;
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:9998!important;
}
.modal-pop-main {
    max-width: 90%;
    position: relative;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index:9999!important;
}
.modal-pop-main-in {
    padding-top: 56.25%;
    position: relative;
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
}
.modal-pop-main iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 940px) {
    .modal-pop-main {
      left: 15%;
      max-width: 70%;
    }
}