@charset "utf-8";

/*SPの設定*/

main {
    background-color: #9eb4dd;
    margin-top: 87px;
    padding-top: 45px;
}

section#kyosan {
    max-width: 1200px;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}

section#kyosan .mds {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    width: 88%;
}

section#kyosan .txt {
    max-width: 788px;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

section#kyosan .bb {
    max-width: 631px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}



section#cooperation {
    max-width: 1200px;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    background-image: url(../images/dzb.svg);
    background-size: 40px;
    border-radius: 30px;
    padding: 20px;
}

section#cooperation > div {
    background-color: #ffffff;
    padding-top: 40px;
    padding-bottom: 40px;
}

section#cooperation > div > h2 {
    max-width: 880px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

section#cooperation > div > div {
    max-width: 748px;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

section#cooperation > div > dl {
    display: flex;
    flex-flow: column;
    margin-top: 30px;
    width: 100%;
}

section#cooperation > div > dl > * {
    width: 100%;
    text-align: center;
}

section#cooperation > div > dl > dd {
    margin-top: 25px;
}

section#cooperation > div > dl {
    max-width: 421px;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7%;
}



section#merit {
    max-width: 1200px;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    background-image: url(../images/dzb.svg);
    background-size: 40px;
    border-radius: 30px;
    padding: 20px;
}

section#merit > div {
    background-color: #ffffff;
    padding-top: 40px;
    padding-bottom: 40px;
}

section#merit > div > h2 {
    max-width: 402px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    line-height: 0;
}

section#merit > div > dl {
    display: flex;
    flex-flow: column;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
}

section#merit > div > dl > div {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 30px 0;
    background-image: url(../images/dline.svg);
    background-repeat: repeat-x;
    background-position: top -5px;
    background-size: 10px;
}

section#merit > div > dl > div:first-of-type {
    background: none;
}

section#merit > div > dl > div:last-of-type {
    padding-bottom: 0;
}

section#merit > div > dl > div > *:first-child {
    width: 30%;
}

section#merit > div > dl > div > *:nth-child(2) {
    width: 60%;
    margin-top: 15px;
}

section#merit > div > dl > div > *:last-child {
    margin-top: 20px;
    font-size: 1.6rem;
}

section#merit > div > dl > div > div > dd {
    margin-top: 10px;
}

section#merit > div > dl > div > *:last-child .note {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

section#merit > div > dl > div > *:last-child .note > li {
    display: flex;
}

section#merit > div > dl > div > *:last-child .note > li::before {
    content: "※";
    display: block;
}







#kyosan_link {
    max-width: 808px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6%;
}

#kyosan_link > a {
    display: block;
}

#kyosan_link > a + a {
    margin-top: 6%;
}


main #kyosan_link.active div.modal {
    opacity: 1;
    pointer-events: auto;
}







main #kyosan_link > #secondary_page_modal {
    margin-top: 8%;
}



main #kyosan_link > #secondary_page_modal div.primary {
    padding-top: 0;
    padding-bottom: 0;
}

main #kyosan_link > #secondary_page_modal > div.modal > div {
    background-color: #ffffff;
    border-radius: 30px;
    max-width: 1200px;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 70px;
    overflow: hidden;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary {
    width: 84%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > h2 {
    text-align: center;
    max-width: 354px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dt {
    margin-top: 50px;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dt img {
    width: 100%;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dd {
    max-width: 600px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dd > div {
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 7px;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dd > p {
    font-size: 1.4rem;
    margin-top: 7px;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dd a {
    display: block;
    color: #000000;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dd a img {
    width: 100%;
    filter: drop-shadow(3px 3px 4px #cdcdcd);
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > div {
    text-align: center;
    margin-top: 40px;
    max-width: 50px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

main #kyosan_link > #secondary_page_modal > div.active_bb {
    cursor: pointer;
}











/***********************************************/
@media only screen and (min-width:768px) {
/*PCの設定*/

main {
    padding-top: 120px;
    margin-top: 151px;
}



section#kyosan .mds {
    margin-top: 7%;
}

section#kyosan .txt {
    margin-top: 5%;
}

section#kyosan .bb {
    margin-top: 7%;
}

section#cooperation {
    margin-top: 7%;
    padding: 20px;
}

section#cooperation > div > h2 {
    width: 88%;
}


section#cooperation > div {
    padding-top: 6%;
    padding-bottom: 6%;
}

section#cooperation > div > div {
    width: 75%;
    margin-top: 5%;
}

section#cooperation > div > dl {
    margin-top: 4%;
}

section#cooperation > div > dl > dd {
    margin-top: 5%;
}

section#merit {
    margin-top: 9%;
    padding: 20px;
}

section#merit > div {
    padding-top: 6%;
    padding-bottom: 6%;
}

section#merit > div > h2 {
    width: 40%;
}

section#merit > div > dl {
    margin-top: 3%;
}

section#merit > div > dl > div {
    flex-flow: row;
    gap: 3%;
    padding: 3% 3%;
}

section#merit > div > dl > div > *:first-child {
    width: 78px;
    max-width: 78px;
    min-width: 78px;
}

section#merit > div > dl > div > *:nth-child(2) {
    width: 246px;
    margin-top: 0;
    max-width: 246px;
    min-width: 246px;
}

section#merit > div > dl > div > *:last-child {
    margin-top: 0;
}

section#merit > div > dl > div > div > dd {
    margin-top: 15px;
}

#kyosan_link {
    width: 60%;
}






main #kyosan_link > #secondary_page_modal {
    margin-top: 6%;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dd a {
    transition: all 0.25s 0s ease;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > dl > div > dd a:hover {
    opacity: 0.7;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > div {
    transition: all 0.25s 0s ease;
}

main #kyosan_link > #secondary_page_modal > div.modal > div > div.primary > div:hover {
    opacity: 0.7;
}



main #pagetop {
    padding-top: 5%;
}

}