/* contents.css */
/*--------------------------------------*/

#wrapper {
    background-image: url(../images/bg_main.png);
    padding-top: 20px;
    padding-bottom: 60px;
}
@media only screen and (max-width: 750px) {
    #wrapper {
        padding-top: 4vw;
        padding-bottom: 14vw;
    }
}

.logo {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}
@media only screen and (max-width: 750px) {
    .logo {
        width: 60%;
        margin-bottom: 4vw;
    }
}

section {
    width: 860px;
    background-color: #f9e943;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3%;
    padding-right: 3%;
    text-align: center;
    line-height: 1.8;
    font-size: 16px;
}
@media only screen and (max-width: 750px) {
    section {
        width: 90%;
        padding-left: 6%;
        padding-right: 6%;
        text-align: left;
        font-size: 3.4vw;
    }
}

#kv {
    width: 860px;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border: 10px solid #f9e943;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
#kv h1 {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
}
#kv h1 img {
    width: 100%;
}
@media only screen and (max-width: 750px) {
    #kv {
        width: 90%;
    }
    #kv h1 {
        width: calc(100% + 8vw);
        margin-left: -4vw;
        margin-right: -4vw;
    }
}

#contents {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.action {
    margin-bottom: 40px;
}
.action article {
    position: relative;
    width: 32.5%;
    background-color: #ffffff;
    padding: 6% 0 4%;
    border: 2px solid #fdd400;
    border-radius: 12px;
}
.action article:before,
.action article:after {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    content: "";
}
.action article:before {
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 1;
}
.action article:after {
    top: 6px;
    left: 6px;
    background-color: #fdd400;
    background-image: url(../images/bg_action.png);
    background-size: 7%;
}
.action article h2 {
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    line-height: 1.0;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 900;
    font-size: 36px;
    color: #f5a21c;
    letter-spacing: 0.1em;
    text-shadow:1px 1px 0 #856031,-1px 1px 0 #856031,-1px -1px 0 #856031,1px -1px 0 #856031;
    z-index: 2;
}
.action article h2 span {
    font-size: 54px;
}
.action article p {
    position: relative;
    line-height: 1.4;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #00903d;
    z-index: 2;
}
@media only screen and (max-width: 750px) {
    .action {
        margin-bottom: 8vw;
    }
    .action article {
        width: 84%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8vw;
        padding: 8% 0 6%;
        text-align: center;
    }
    .action article:after {
        top: 1.4vw;
        left: 1.4vw;
    }
    .action article h2 {
        font-size: 6.2vw;
    }
    .action article h2 span {
        font-size: 9.0vw;
    }
    .action article p {
        font-size: 5.0vw;
    }
}

h3.copy {
    display: inline;
    background: linear-gradient(transparent 70%, #ffffff 30%);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #00903d;
}
@media only screen and (max-width: 750px) {
    h3.copy {
        font-size: 4.4vw;
    }
}

p.lead {
    margin-top: 1.5em;
    margin-bottom: 2em;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
}
@media only screen and (max-width: 750px) {
    p.lead {
        font-size: 3.8vw;
    }
}

.buttons {
    margin-bottom: 40px;
}
@media only screen and (max-width: 750px) {
    .buttons {
        margin-bottom: 12vw;
    }
}

.btn {
    position: relative;
    width: 48.5%;
    background-repeat: no-repeat;
    background-position: left 5% center;
    background-size: 16%;
    padding: 3%;
    border: 3px solid #ffffff;
    border-radius: 16px;
    text-align: left;
    transition: all .3s ease;
}
.btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    z-index: 1;
}
.btn:hover {
    opacity: 0.7;
}
.btn p {
    position: relative;
    margin-left: 20%;
    font-weight: 700;
    color: #ffffff;
}
.btn p span {
    display: inline-block;
    position: relative;
    padding-right: 1em;
}
.btn p span:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.55em;
    height: 0.65em;
    background-color: #ffffff;
    margin: auto;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    content: "";
}

.guideline {
    background-color: #00903d;
    background-image: url(../images/icon_note.png);
}
.kickoff {
    background-color: #109e89;
    background-image: url(../images/icon_chara.png);
}

@media only screen and (max-width: 750px) {
    .btn {
        width: 100%;
        margin-bottom: 4vw;
    }
}


.cse {
    background-color: #ffffff;
    margin-bottom: 40px;
    padding: 3%;
    border: 3px solid #00903d;
    border-radius: 16px;
}
@media only screen and (max-width: 750px) {
    .cse {
        margin-bottom: 8vw;
    }
}

.cse h3 {
    margin-bottom: 0.5em;
    font-weight: 700;
    color: #00903d;
}
.cse p {
    text-align: left;
}

.approve {
    background-color: #ffffff;
    border: 3px solid #16288b;
    margin-bottom: 50px;
    padding-bottom: 3%;
}
.approve h3 {
    background-color: #16288b;
    margin-bottom: 1em;
    line-height: 2.0;
    font-size: 20px;
    color: #ffffff;
}
.approve .flex-wrap {
    align-items: center;
    padding: 0 3%;
}
.approve .flex-wrap > div {
    width: 70%;
    text-align: left;
}
.approve ol {
    margin-bottom: 1em;
    padding-left: 1.25em;
    text-indent: -1.25em;
}
.approve dl div {
    display: flex;
    margin-bottom: 0.25em;
}
.approve dl dt {
    width: 8em;
}
.approve figure {
    width: 25%;
}
.approve figcaption {
    font-size: 0.8em;
}
.approve figcaption a {
    color: #16288b;
}
@media only screen and (max-width: 750px) {
    .approve {
        margin-bottom: 6vw;
    }
    .approve h3 {
        text-align: center;
        font-size: 4.0vw;
    }
    .approve .flex-wrap > div {
        width: 100%;
        margin-bottom: 1em;
    }
    .approve dl div {
        flex-direction: column;
        margin-bottom: 0.5em;
    }
    .approve dl dt {
        width: auto;
    }
    .approve figure {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}