.hero {
    background-image: url(../img/bg-top.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 20%;
    height: 100vh;
    position: relative;
    padding: 5%;
}

.hero--body {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
}

.hero--title {
    margin-bottom: 32px;
    color: var(--white);
    font-size: var(--font-size-title-hero);
    filter: drop-shadow(1px 1px 3px var(--black));
}

.hero--logo {
    width: 100%;
}

.hero--text {
    background-color: var(--white);
    padding: 8px 16px;
    margin-bottom: 32px;
    line-height: 1.5em;
}

.hero--text-s {
    color: var(--white);
    font-size: 1.4rem;
    padding: 8px 16px;
    /* margin-bottom: 32px; */
    line-height: 1.5em;
    filter: drop-shadow(1px 1px 3px var(--black));
}

.hero .plusButton {
    position: relative;
    display: block;
    width: 100%;
    max-width: 510.5px;
    padding: 24px 64px;
    font-size: var(--font-size-xlarge);
    color: var(--white);
    text-align: center;
    background: var(--primary-bland-color);
}

.hero .plusButton::after {
    position: absolute;
    content: "+";
    right: 16px;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .hero--body {
        position: static;
        transform: translateY(0);
        margin-top: 45vh;
    }

    .hero--title {
        margin-bottom: 16px;
    }

    .hero--logo {
        width: 100%;
    }

    .hero--text {
        margin-bottom: 16px;
    }

    .hero .plusButton {
        padding: 12px 24px;
    }
}

/* 出会いを超える楽しさをお手軽に */

.enjoySection .section--inner {
}

.whatsApp .media {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.whatsApp .media--imgBox {
    flex: 0 0 456px;
    margin-right: 24px;
}

.whatsApp .media--body {
    flex: 1 1 auto;
    text-align: left;
}

.whatsApp .media--img {
    width: 100%;
    height: var(--aspect-ratio-4-3);
    margin-bottom: 2.4rem;
}

.whatsApp .media--titleBox {
    margin-bottom: 2.4rem;
}

.whatsApp .media--text {
    margin-bottom: 1.6rem;
}

.whatsApp .media--text:last-of-type {
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .whatsApp .media--imgBox {
        flex: 1 0 40%;
        margin-right: 24px;
    }

    .whatsApp .media--body {
        flex: 1 1 auto;
        text-align: left;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .whatsApp .media {
        display: block;
        margin: 0 auto;
    }

    .whatsApp .media--imgBox {
        width: 100%;
        margin-right: 0;
    }

    .whatsApp .media--titleBox {
        margin-bottom: 1.6rem;
    }
}

.worry .gridCol2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    grid-auto-flow: row;
}

.worry .gridCol2--body {
    text-align: left;
}

.worry .gridCol2--titleBox {
    margin-bottom: 8px;
}

.worry .gridCol2--title {
    
}

.worry .gridCol2--list {
    padding-left: 24px;
}

.worry .gridCol2--listItem {
    
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .worry .gridCol2 {
        display: block;
    }

    .worry .gridCol2--body {
        margin-bottom: 24px;
    }
}

.yell .media {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.yell .media--imgBox {
    flex: 0 0 var(--col-6);
    margin-right: 24px;
}

.yell .media--body {
    flex: 1 1 var(--col-4);
    text-align: left;
}

.yell .media--img {
    width: 100%;
    height: var(--aspect-ratio-4-3);
}

.yell .media--textBox {
    border: 5px double var(--black);
    padding: 30px;
}

.yell .media--text {
    font-size: var(--font-size-large);
    font-weight: bold;
}

.yell .media--text:last-of-type {
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .yell .media--body {
        flex: 1 1 auto;
    }

    .yell .media--imgBox {
        flex: 0 0 40%;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .yell .media {
        display: block;
    }

    .yell .media--imgBox {
        width: 100%;
    }

    .yell .media--textBox {
        margin-bottom: 24px;
    }
}

/* 相席するまでのステップ */
.stepSection .gridCol3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 40px;
    row-gap: 64px;
    grid-auto-flow: row;
    width: 100%;
}

.stepSection .card--imgBox {
    margin-bottom: 32px;
}

.stepSection .card--img {
    width: 100%;
    border-radius: 16px;
}

.stepSection .card--title {
    margin-bottom: 8px;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .stepSection .gridCol3 {
        /* display: block; */
        grid-template-columns: repeat(5, 100%);
        overflow-x: scroll;
    }

    .stepSection .card--imgBox {
        
    }

    .stepSection .card--img {
        width: 75%;
    }
}

/* 審査基準 */

.examinationBox {
    width: 100%;
    max-width: var(--col-8);
    margin: 0 auto;
}

.mensExamination {
    position: relative;
    background-image: url(../img/examination01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 43.26%;
    margin-bottom: 40px;
}

.mensExamination--list {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3%;
}

.mensExamination--listItem,
.ladiesExamination--listItem {
    text-align: left;
}

.ladiesExamination {
    position: relative;
    background-image: url(../img/examination02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 43.26%;
}

.ladiesExamination--list {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .ladiesExamination {
        background-position: top 50%;
    }
}

/* 安心・安全な理由 */

.safetySection {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

.safetySection .gridCol3 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 40px;
    row-gap: 64px;
    grid-auto-flow: row;
}

.safetySection .card--imgBox {
    margin-bottom: 32px;
}

.safetySection .card--img {
    width: 100%;
    max-width: 270px;
}

.safetySection .card--title {
    margin-bottom: 8px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .safetySection .card--text {
        text-align: left;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .safetySection .gridCol3 {
        display: block;
    }

    .safetySection .card--imgBox {
        margin-bottom: 16px;
    }

    .safetySection .card {
        margin-bottom: 32px;
    }

    .safetySection .card--text {
        text-align: center;
    }
}