@media screen and (max-width: 480px) {
    main article h2 {
        font-size: 25px;
    }

    main article section iframe {
        min-height: 1220px;
    }

    main article section h3 {
        font-size: 25px
    }

    aside.slider {
        height: 550px
    }

    aside.slider ul li {
        bottom: calc(50% - 225px);
        left: calc(50% - 240px)
    }

    aside.slider ul li img {
        max-width: 480px
    }

    #problem-solution_presentation>header::after {
        background-image: url("../img/map_sp.svg")
    }

    #problem-solution_presentation>section>header h3,#problem-solution_presentation>section>header p {
        display: block;
        text-align: left
    }

    #what_is_this {
        padding-left: 10px;
        padding-right: 10px
    }

    #what_is_this>section {
        padding-left: 10px;
        padding-right: 10px
    }

    #what_is_this>ul {
        width: 100%
    }

    #what_is_this>ul li {
        width: 50%;
        text-align: center;
        margin: 5px auto
    }

    #what_is_this>ul li img {
        width: 95%
    }

    #behavioral_guidelines header p,#donation header p {
        text-align: left
    }

    #behavioral_guidelines aside#whats_new {
        padding-left: 10px;
        padding-right: 10px
    }

    #behavioral_guidelines aside#whats_new h3 {
        padding: 0 10px
    }

    #behavioral_guidelines aside#whats_new ul {
        padding-left: 10px;
        padding-right: 10px
    }

    #behavioral_guidelines aside#whats_new ul li,#behavioral_guidelines aside#whats_new ul li a {
        display: flex;
        flex-wrap: wrap
    }

    #behavioral_guidelines aside#whats_new ul li .val,#behavioral_guidelines aside#whats_new ul li a .val {
        width: 100%;
        margin: 0 auto 10px
    }

    #behavioral_guidelines aside#whats_new #modal>div {
        overflow-y: auto
    }

    #behavioral_guidelines aside#whats_new #modal>div header {
        height: auto
    }

    #behavioral_guidelines aside#whats_new #modal>div #inner {
        height: auto;
        overflow-y: visible;
        padding-right: 0;
        padding-bottom: 15px
    }

    #behavioral_guidelines aside#whats_new #modal #close {
        position: static;
        color: #000;
        text-align: center
    }

    #profile {
        display: block;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px
    }

    #profile img {
        margin-bottom: 1em
    }

    #profile p:nth-of-type(1) {
        text-align: left
    }

    #summary h3 {
        font-size: 30px
    }

    #summary>ul li {
        display: block
    }

    #summary>ul li h4 {
        font-size: 24px;
        margin-left: 24px
    }

    #summary>ul li h4::after {
        width: 20px;
        height: 20px;
        background-size: cover
    }

    #summary>ul li img {
        margin: auto;
        display: block
    }

    #donation>ul#assist li {
        width: 80%
    }

    #donation figure {
        width: 100%;
        margin-bottom: 2em
    }

    #donation figure img {
        width: 100% !important;
        height: auto
    }

    #cosponsorship ul li {
        margin: auto;
        margin-bottom: 20px
    }

    #organization_details dl div {
        display: block
    }

    #organization_details dl div dd {
        width: 100%
    }

    #staff {
        border: 0 none
    }

    #staff h2 {
        font-size: 2em
    }

    #staff .profile {
        width: 100%;
        margin-left: 0;
        margin-right: 0
    }

    #staff .profile .portrait {
        display: block
    }

    #staff .profile .portrait img {
        width: 100%;
        height: auto
    }

    #staff .profile .portrait figcaption {
        margin: 20px 0 0
    }

    #staff .profile .portrait figcaption h4::after {
        display: block
    }

    #messages div.swiper-container {
        margin: 0 !important;
        padding: 0 !important
    }

    #messages div.swiper-container section {
        margin: 40px 10px;
        position: static !important
    }

    #donation_list>section>ul li {
        display: list-item;
        list-style-type: none;
        list-style-position: inside
    }

    #donation_list>section>ul li::before {
        content: initial
    }

    #donation_list figure img {
        width: 95%
    }

    .form,#form {
        width: 100% !important
    }

    .form h3,#form h3 {
        font-size: 1.2em
    }

    .form form,#form form {
        margin: auto
    }

    .form ul,#form ul {
        font-size: 14px;
        font-weight: normal;
        margin: 10px
    }

    .form ul li,#form ul li {
        display: block
    }

    .form ul li .insertion,#form ul li .insertion {
        display: block
    }

    .form aside,#form aside {
        margin: calc(2em + 10px) 20px;
        font-size: 12px
    }

    #videos>section,.media>section {
        display: block
    }

    #videos>section header,#videos>section figure,.media>section header,.media>section figure {
        width: 95%;
        margin: auto;
        padding: initial
    }

    #videos>section .video,.media>section .video {
        width: 95%;
        margin-left: auto;
        margin-right: auto
    }

    #videos>section .video.finish,.media>section .video.finish {
        margin-top: 70px
    }

    .media>aside header {
        column-gap: 10px
    }

    .image-list ul li {
        width: 95% !important;
        max-width: 480px !important
    }

    .image-list.enlargement ul li:hover img {
        transform: none
    }
}

@media screen and (min-width: 481px)and (max-width: 768px) {
    #what_is_this>ul {
        width:100%
    }

    #what_is_this>ul li {
        width: 50%;
        text-align: center
    }

    #what_is_this>ul li img {
        width: 95%
    }
}

@media screen and (min-width: 481px) and (max-width: 1102px){

    main article section iframe {
        max-height: 1387px;
        height: 175vh;
    }
}

@media screen and (min-width: 1024px) {
    main article section {
        min-width:990px;
        max-width: 1200px
    }

    #problem-solution_presentation>header {
        height: 650px;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    #problem-solution_presentation>header h2 {
        margin-top: 0
    }

    #problem-solution_presentation>header::after {
        background-size: 960px 650px;
        background-position-x: right;
        width: 50vw;
        height: 650px;
        position: absolute;
        top: 0;
        left: 0
    }

    #problem-solution_presentation>header>* {
        width: auto;
        min-width: 480px;
        max-width: 600px;
        margin-left: 50vw;
        margin-right: 35px
    }

    #what_is_this>ul {
        min-width: 990px;
        max-width: 1200px
    }

    #behavioral_guidelines header p,#donation header p {
        min-width: 990px;
        max-width: 1200px
    }

    #behavioral_guidelines aside#whats_new {
        min-width: 990px;
        max-width: 1200px
    }

    #summary {
        padding-bottom: 140px
    }

    #summary h3 {
        height: 75px
    }

    #summary>ul {
        position: relative;
        min-width: 990px;
        max-width: 1200px;
        background: url("../img/activity_pc.png") top left;
        background-repeat: no-repeat repeat;
        background-position-x: 99px
    }

    #summary>ul li {
        max-width: 910px;
        margin: 35px 0;
        margin-left: 290px
    }

    #summary>ul li h4 {
        position: absolute;
        right: 100%;
        top: 10px;
        bottom: initial;
        left: initial;
        width: 160px
    }

    #summary>ul li:last-child h4 {
        height: 100%
    }

    #summary>ul::before {
        content: "";
        background: url("../img/activity_pc.png") no-repeat top left;
        width: 100%;
        height: 250px;
        display: block;
        position: absolute;
        bottom: 100%;
        left: 0;
        background-position-x: 99px
    }

    #summary>ul::after {
        content: "";
        background: url("../img/activity03_pc.png") no-repeat top left;
        width: 100%;
        height: 175px;
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        background-position-x: 110px
    }

    #donation>ul {
        min-width: 990px;
        max-width: 1200px
    }

    #donation_list>section>dl div {
        margin: 35px
    }

    #cosponsorship ul {
        min-width: 990px;
        max-width: 1200px
    }

    #organization_details {
        min-width: 990px;
        max-width: 1200px
    }

    #staff {
        min-width: 990px;
        max-width: 1200px
    }

    #staff .profile {
        width: calc(50% - 45px)
    }

    #messages {
        min-width: 990px;
        max-width: 1200px
    }

    #videos {
        min-width: 990px;
        max-width: 1200px
    }

    .media {
        min-width: 990px;
        max-width: 1200px
    }

    .media .introduction>* {
        width: 50%;
        min-width: initial;
        margin-left: 0
    }

    .media .introduction figure {
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 0
    }

    .media>aside {
        min-width: 990px;
        max-width: 1200px
    }
}

/*# sourceMappingURL=responsive.css.map */