@charset "utf-8";

#jkc_contents {
    background-color: #f4f4f2;
    overflow: hidden;
    font-family: 'Noto Sans JP', sans-serif;
}

#jkc_contents * {
    box-sizing: border-box;
}

#jkc_mainContent {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
}

#jkc_mainContent img {
    max-width: 100%;
}

#jkc_mainContent h2 {
    text-align: center;
    font-size: 4.2vw;
    line-height: 1.4;
    font-weight: bold;
}

#jkc_mainContent h3 {
    text-align: center;
    font-size: 4.6vw;
    line-height: 1.4;
    padding: 0.5em;
    background-color: #ffbe17;
    border-radius: 8px;
    margin: 1em 0;
    font-weight: bold;
}

#jkc_mainContent h4 {
    font-weight: bold;
    margin-bottom: 0.2em;
    font-size: 4.6vw;
}

#jkc_mainContent .nipper_inner {
    padding: 1em;
    font-size: 4.4vw;
    line-height: 1.6;
}

.keyword-box {
    padding: 1em 3em;
    ;
    background-color: #dd7a80;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    font-size: 4.0vw;
}

.keyword-box-btn {
    display: block;
    cursor: pointer;
    padding: 0.5em;
    background-color: #fff;
    color: #333;
    border-radius: 8px;
    margin: 1em 0;
    font-size: 4.6vw;
    font-weight: bold;
}

.keyword-box-btn:active {
    color: #333;
    background-color: #fffbd2;
}

a.oubo_btn {
    color: #fff;
    background-color: #fe7b77;
    display: block;
    border-radius: 8px;
    padding: 0.8em;
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
    font-size: 5vw;
}


.pc {
    display: none;
}

.sp {
    display: block;
}

@media (min-width: 769px) {
    #jkc_mainContent .nipper_inner {
        font-size: 34px;
    }

    #jkc_mainContent h3,
    #jkc_mainContent h4 {
        font-size: 36px;
    }

    .keyword-box,
    .keyword-box-btn {
        font-size: 32px;
    }

    a.oubo_btn {
        font-size: 40px;
    }

    .pc {
        display: block;
    }

    .sp {
        display: none;
    }
}

@media (min-width: 1200px) {
    #jkc_mainContent h2 {
        font-size: 54px;
    }
    a.oubo_btn {
        font-size: 45px;
    }
}
/* 共通style */
a.btn::after {
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    font-size: 90%;
    font-weight: 600;
    margin-left: 0.5em;
}

a.btn.external-link::after {
    font-family: "Font Awesome 5 Free";
    content: '\f35d';
    font-size: 90%;
    font-weight: 600;
    margin-left: 0.5em;
}

a:hover {
    opacity: 0.8;
}

a.target_blank {
    padding-right: 1.5em;
    position: relative;
    text-decoration: none;
    color: #0290dc;
}

a.target_blank::after {
    font-family: "Font Awesome 5 Free";
    content: '\f35d';
    font-size: 100%;
    font-weight: 600;
    top: 0;
    position: absolute;
    right: 3px;
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 1em !important;
}

.mt-1 {
    margin-top: 1em !important;
}

.mb-2 {
    margin-bottom: 2em !important;
}

.mt-2 {
    margin-top: 2em !important;
}

.mb-3 {
    margin-bottom: 3em !important;
}

.mt-3 {
    margin-top: 3em !important;
}

.red {
    color: red !important;
}


.brPC {
    display: block;
}

.brSP {
    display: none;
}

@media (max-width: 768px) {
    .brPC {
        display: none;
    }

    .brSP {
        display: block;
    }
}