@charset "utf-8";
    ul {
        list-style-type: none;
    }
    
    .mainvl {
        position: relative;
    }
    
    .content {
        width: calc(90% - 80px);
        max-width: 1100px;
        margin: 0 auto !important;
        position: relative;
    }
    /*main*/
    
    h1 {
        padding-top: 82px;
    }
    
    main {
        position: relative;
        margin-bottom: -5%;
        padding-top: 0;
    }
    
    .cover {
        position: relative;
        z-index: 50;
    }
    /* read */
    
    .read {
        background-image: url(img/read-bg.jpg);
        background-position: top center;
        background-size: 100%;
        background-repeat: no-repeat;
        text-align: center;
        padding: 70px 0 70px;
        color: #fff;
    }
    
    .read h3 {
        font-size: 1.5em;
        font-weight: 400;
        padding-bottom: 40px;
        line-height: 1.7;
        letter-spacing: 1.5px;
    }
    
    .read .read-info {
        background-color: rgba(0, 0, 0, 0.5);
        padding: 50px 0 50px;
        position: relative;
    }
    
    .read .read-info .deco {
        position: absolute;
        top: -8%;
        left: -4%;
        width: 30%;
    }
    
    .read .read-info h2 {
        width: 45%;
        margin: 0 auto;
        padding-bottom: 10px;
    }
    
    .read .read-info h2 span {
        font-size: 0.7em;
        font-weight: 400;
        padding: 10px 0 40px;
        display: block;
    }
    
    .read .read-info dl {
        width: 60%;
        margin: 0 auto;
        padding-bottom: 40px;
    }
    
    .read .read-info dl div {
        display: flex;
        justify-content: space-between;
        text-align: left;
        padding: 10px 0 10px 10px;
    }
    
    .read .read-info dl div:first-of-type {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }
    
    .read .read-info dl div:last-of-type {
        border-bottom: 1px solid #fff;
    }
    
    .read .read-info dl dt {
        width: 20%;
    }
    
    .read .read-info dl dd {
        width: 80%;
    }
    /* プレゼント */
    
    .pre {
        background: linear-gradient(45deg, #001721, #003F7E);
        text-align: center;
        padding: 70px 0 70px;
        color: #000;
        margin: 0 auto;
    }
    
    .pre h2 {
        width: 40%;
        margin: 0 auto;
        padding-bottom: 50px;
    }
    
    .pre .cont,
    .pre .visit {
        background: #fff;
        padding: 40px 0 40px;
    }
    
    .pre .cont {
        margin: 0 0 30px;
    }
    
    .pre .cont h3,
    .pre .visit h3 {
        width: 40%;
        margin: 0 auto;
    }
    
    .pre .cont h4,
    .pre .visit h4 {
        width: 50%;
        padding: 30px 0;
        margin: 0 auto;
    }
    
    .pre .cont h5 {
        width: 50%;
        margin: 0 auto;
    }
    
    .pre .cont h5 span {
        display: block;
        font-size: 1.1em;
        font-weight: 400;
        padding: 10px 0 40px;
    }
    
    .pre .visit h5 {
        width: 65%;
        margin: 0 auto;
        padding: 0 0 40px;
    }
    
    .pre .cont ul,
    .pre .visit ul {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }
    
    .pre .cont ul li {
        width: 32%;
    }
    
    .pre .cont ul li h6 {
        font-size: 1.1em;
        font-weight: 500;
        padding: 10px 0;
    }
    
    .pre .visit ul li:first-of-type {
        width: 52%;
    }
    
    .pre .visit ul li:last-of-type {
        width: 46%;
        padding: 20px;
        text-align: left;
        background: #EAF6FA;
        font-size: 1.1em;
        font-weight: 400;
        line-height: 2;
    }
    
    .pre .att {
        width: 90%;
        margin: 0 auto;
        padding: 3% 0 0;
        text-align: left;
    }
    /* CAR LINEUP */
    
    .lineup {
        background-image: url(img/lineup-bg.jpg);
        background-position: bottom center;
        background-size: 100%;
        background-repeat: no-repeat;
        text-align: center;
        padding: 70px 0 70px;
        color: #fff;
    }
    
    .lineup h2 {
        margin: 0 auto;
        width: 50%;
    }
    
    .lineup h3 {
        font-size: 1.3em;
        font-weight: 400;
        padding: 40px 0 0;
    }
    
    .lineup ul li {
        padding: 0 0 60px;
    }
    
    .lineup ul li h4 {
        padding: 0 40px;
        width: 45%;
        margin: 0 auto;
    }
    /* REX */
    
    .rexmv {
        line-height: 0;
    }
    
    .rex {
        background: #86C5DD;
        text-align: center;
        padding: 70px 0 70px;
        color: #fff;
    }
    
    .rex h2 {
        margin: 0 auto;
        width: 25%;
    }
    
    .rex h3 {
        font-size: 2em;
        font-weight: 400;
        padding: 40px 0 40px;
    }
    
    .rex ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .rex ul li {
        width: 32%;
        padding: 0 0 20px;
    }
    
    .rex ul li dl dt {
        display: inline-block;
        font-size: 2em;
        font-weight: 400;
        letter-spacing: 1.5px;
        border-bottom: 2.5px dotted #C2E2EE;
        padding: 5px 0 5px;
    }
    
    .rex ul li dl dd {
        padding: 10px 0 0;
    }
    
    .rex .btn2 {
        margin: 30px auto 0;
    }
    /* バナー */
    
    .banner {
        background-image: url(img/read-bg.jpg);
        background-position: top center;
        background-size: 100%;
        background-repeat: repeat-y;
        padding: 70px 0 70px;
        text-align: center;
    }
    
    .banner div {
        display: inline-block;
        overflow: hidden;
    }
    
    .banner div a {
        display: block;
        transition-duration: .3s;
        line-height: 0;
    }
    
    .banner div a:hover {
        transform: scale(1.05);
    }
    /*ボタン*/
    
    .btn {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }
    
    .btn div {
        width: 49%;
    }
    
    .btn div a {
        text-decoration: none;
        display: block;
        background: #0E79D6;
        border: 2px solid #0E79D6;
        text-align: center;
        color: #fff;
        font-weight: 400;
        font-size: 1.1em;
        padding: 15px 0;
        letter-spacing: 2px;
        transition: ease all 0.3s;
    }
    
    .btn div a:hover {
        background: #fff;
        color: #0E79D6;
    }
    
    .btn2 {
        width: 60%;
        margin: 0 auto;
    }
    
    .btn2 a {
        text-decoration: none;
        display: block;
        background: #17A1DD;
        border: 2px solid #17A1DD;
        text-align: center;
        color: #fff;
        font-weight: 400;
        font-size: 1.1em;
        padding: 15px 0;
        transition: ease all 0.3s;
        letter-spacing: 2px;
    }
    
    .btn2 a:hover {
        background: #fff;
        color: #17A1DD;
    }
    
    .btn3 {
        padding: 50px 0 0;
    }
    
    .btn4 {
        padding: 50px 0;
    }
    
    .btn2,
    .btn div {
        position: relative;
    }
    
    .btn2::after,
    .btn div::after,
    .btn4 .btn div::after {
        content: '';
        border: 0;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        display: inline-block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%) rotate(45deg);
    }
    
    .btn2:hover::after,
    .btn3 .btn div:hover::after {
        border-top: solid 2px #17A1DD;
        border-right: solid 2px #17A1DD;
    }
    
    .btn4 .btn div a {
        background: #0E79D6;
        border: 2px solid #0E79D6;
        color: #fff;
    }
    
    .btn4 .btn div a:hover {
        background: #fff;
        color: #0E79D6;
    }
    
    .btn4 .btn div:hover::after {
        border-top: solid 2px #0E79D6;
        border-right: solid 2px #0E79D6;
    }
    
    .btn5 a {
        color: #C41949;
        text-decoration: none;
        text-align: right;
        display: block;
        transition: ease all 0.3s;
        padding: 10px 0 0 0;
        border-top: 2px solid #C41949;
        font-weight: 500;
    }
    
    .btn5 a::after {
        content: url(img/btn.svg);
        vertical-align: middle;
        padding: 0 0 0 5px;
    }
    
    .btn5 a:hover {
        color: #17A1DD;
        border-top: 2px solid #17A1DD;
    }
    
    .btn5 a:hover::after {
        content: url(img/btn-hover.svg);
    }
    /*Youtube*/
    
    .video {
        margin: 0 auto;
        width: 80%;
    }
    
    .video .wrap_box {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
    }
    
    .video .wrap_box iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        padding-top: 5%;
    }
    
    @media screen and (max-width: 480px) {
        .content {
            width: 90%;
            max-width: inherit;
        }
        p,
        dd {
            font-size: 1.2em;
        }
        /* read */
        .read {
            background-size: cover;
            padding: 40px 0 40px;
        }
        .read h3 {
            font-size: 1.2em;
            padding-bottom: 20px;
        }
        .read .read-info {
            padding: 40px 0 20px;
        }
        .read .read-info .deco {
            top: -6%;
            left: -2%;
            width: 50%;
        }
        .read .read-info h2 {
            width: 70%;
        }
        .read .read-info h2 span {
            font-size: 1em;
            padding: 10px 0 20px;
        }
        .read .read-info dl {
            width: 90%;
            padding-bottom: 20px;
        }
        .read .read-info .btn2 {
            width: 90%;
        }
        /* プレゼント */
        .pre {
            padding: 40px 0 40px;
        }
        .pre h2 {
            width: 70%;
            padding-bottom: 20px;
        }
        .pre .cont,
        .pre .visit {
            padding: 20px 0 20px;
        }
        .pre .cont {
            margin: 0 0 20px;
        }
        .pre .cont h3,
        .pre .visit h3 {
            width: 80%;
        }
        .pre .cont h4,
        .pre .visit h4 {
            width: 80%;
            padding: 20px 0;
        }
        .pre .cont h5 {
            width: 90%;
            /* margin: 0 auto; */
        }
        .pre .cont h5 span {
            padding: 10px 0 20px;
        }
        .pre .visit h5 {
            width: 70%;
            padding: 0 0 20px;
        }
        .pre .cont ul li h6 {
            font-size: 1em;
        }
        .pre .visit ul {
            display: block;
        }
        .pre .visit ul li:first-of-type {
            width: 100%;
        }
        .pre .visit ul li p {
            font-size: 0.8em;
            padding-bottom: 10px;
        }
        .pre .visit ul li:last-of-type {
            width: 100%;
            padding: 10px;
            font-size: 1em;
            line-height: 1.5;
        }
        /* CAR LINEUP */
        .lineup {
            background-size: cover;
            padding: 40px 0 40px;
        }
        .lineup h2 {
            width: 70%;
        }
        .lineup h3 {
            font-size: 1.2em;
            padding: 20px 0 10px;
        }
        .lineup ul li {
            padding: 0 0 30px;
        }
        .lineup ul li h4 {
            width: 80%;
        }
        /* REX */
        .rex {
            padding: 30px 0 40px;
        }
        .rex h2 {
            width: 45%;
        }
        .rex h3 {
            font-size: 1.5em;
            padding: 20px 0 20px;
        }
        .rex ul li {
            width: 49%;
            padding: 0 0 20px;
        }
        .rex ul li dl dt {
            font-size: 1.7em;
            padding: 3px 0 3px;
        }
        .rex ul li dl dd {
            padding: 5px 0 0;
        }
        .rex .btn2 {
            margin: 10px auto 0;
        }
        .rex .btn2 a {
            font-size: 1.3em;
        }
        /* バナー */
        .banner {
            padding: 40px 0 40px;
        }
        .banner ul li:first-of-type {
            margin: 0 auto 10px;
        }
        .banner ul {
            justify-content: space-between;
            display: block;
        }
        .banner ul li {
            width: 90%;
            margin: 0 auto;
        }
        .btn2 {
            width: 100%;
            margin: 0 auto;
        }
        .btn {
            flex-wrap: wrap;
            padding: 0 0;
            gap: 10px 0;
        }
        .btn div {
            width: 100%;
        }
        .btn3 {
            padding: 0 0;
        }
        .btn4 {
            padding: 30px 0 30px;
        }
        .btn div a {
            font-size: 1.3em;
        }
        /* Youtube */
        .video {
            width: 90%;
            margin: 0 auto;
        }
        .video .btn2 {
            width: 90%;
        }
        .video .wrap_box {
            margin-top: 0;
            margin-bottom: 0;
        }
        .btn2 {
            width: 100%;
            margin: 0 auto;
        }
        .lineup .btn2 a {
            font-size: 1.3em;
        }
    }