@charset "UTF-8";

main{
    background: url(../images/mv.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 0 0 calc(22vh * 0.6) 0;
    height: 70vh;
    min-height: 640px;
    display: flex;
    flex-wrap: wrap;
    justify-content: unset;
    align-items: center;
    overflow:hidden;
}
main .inner{
    max-width: 1200px;
    width: 95%;
    margin: 0 auto 0;
    padding: 0;
}
main .inner figure{
    width:50%;
}
main .bottom{
    position: absolute;
    width: 100%;
    bottom: 0;
}
main .bottom:after{
    content:"";
    background:#00913a;
    width:100%;
    height:60%;
    z-index:0;
    position:absolute;
    bottom:0;
    left:0;
}
main .bottom h2{
    /*display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size: var(--size43);
    font-weight:500;
    max-width:1200px;
    width:95%;
    margin:0 auto 0;
    padding:0;*/
    text-align:center;
    z-index:1;
    position:relative;
}
/*main .bottom h2 span{
    background: #fff;
    color: #00913a;
    text-align: center;
    margin: 8% 10px 0 0;
    padding: 0 10px;
}
main .bottom h2 span b{
    font-size:1.2em;
}
main .bottom h2 p{
    margin: 8% 0 0 0;
}*/
main .bottom h2 img{
    max-width:1200px;
    margin: 10px auto 10px;
    width:90%;
}
.content .inner{
    max-width: var(--haba3);
    width:95%;
    margin:0 auto 0;
    padding: 0;
}
#problem{
    background:url(../images/problem_bg.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center bottom;
    width:100%;
    padding: 3% 0 0;
}
#problem video{
    display: block;
    margin:0 auto 5%;
    max-width:840px;
    width:95%;
}
#problem .inner h2{
    width:85%;
    margin:0 auto 5%;
    padding: 0;
}
#problem .inner ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    margin:0 auto;
    padding: 0;
}
#problem .inner ul li{
    width: calc(100% / 3);
    margin: 0 0 5%;
    padding: 0;
}
#regular_support{
    padding: 8em 0;
}
#total_support{
    background-color: var(--regular);
    background-image: url(../images/support_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top -350px;
    padding: 0 0 3%;
}
#problem .movie h2,
.support h2{
    background: var(--regular);
    border-radius: 16px;
    color: var(--white);
    text-align:center;
    width:100%;
    margin:0 auto 5%;
    padding: 2% 0;
}
#problem .movie h2{
    margin:0 auto 1%;
}
#problem .movie h2 span,
.support h2 span{
    display: block;
    font-size: var(--size50);
    font-weight: var(--b600);
    margin: 0 auto 1.5%;
}
#problem .movie h2 span{
    font-size: var(--size32);
    margin: 0 auto 0;
}
#problem .movie p{
    font-size: var(--size24);
    line-height: 1.4;
    text-align: center;
    margin: 0 auto 1%;
    padding: 0;
}
.support h2 ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:0 auto;
    padding: 0;
}
.support h2 ul li{
    font-size: var(--size24);
    padding:0 10px 0 0;
}
.support ul.support_menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
.support ul.support_menu li{
    width: calc(97% / 3);
    margin: 0 0 5%;
    padding: 0;
    position:relative;
}
.support ul.support_menu li:before{
    content:"";
    width: 24%;
    height:28%;
    position:absolute;
    top:2%;
    left:2%;
}
#regular_support ul.support_menu li:nth-child(1):before{
    background: url(../images/support01_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
#regular_support ul.support_menu li:nth-child(2):before{
    background: url(../images/support02_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
#regular_support ul.support_menu li:nth-child(3):before{
    background: url(../images/support03_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
#total_support ul.support_menu li:nth-child(1):before{
    background: url(../images/support04_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
#total_support ul.support_menu li:nth-child(2):before{
    background: url(../images/support05_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
#total_support ul.support_menu li:nth-child(3):before{
    background: url(../images/support06_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
#total_support ul.support_menu li:nth-child(4):before{
    background: url(../images/support07_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
#total_support ul.support_menu li:nth-child(5):before{
    background: url(../images/support08_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
#total_support ul.support_menu li:nth-child(6):before{
    background: url(../images/support09_icon.svg);
    background-size:100%;
    background-repeat:no-repeat;
}
.support ul.support_menu li p{
    font-size: var(--size24);
    font-weight: var(--b500);
    line-height: 1.4;
    margin: 0;
    padding: 3% 0;
}
.support ul.support_menu li span{
    font-size: var(--size16);
    font-weight: var(--b500);
    line-height: 1.4;
    margin: 0;
    padding: 0;
}
#options{
    background: var(--regular);
    padding: 3% 0;
}
#options .inner{
    background-color: var(--beige);
    padding: 3%;
    margin: 0 auto 8%;
    position: relative;
    max-width: var(--haba2)
}
#options .inner figure{
    width: 210px;
    position: absolute;
    bottom: 5%;
    right: 5%;
}
#options h2{
    background: var(--regular);
    border-radius: 8px;
    color: var(--white);
    font-size: var(--size32);
    font-weight: var(--b600);
    text-align: center;
    margin: 0 auto 5%;
    padding: 2% 0;
    position:relative;
    width:84%;
}
#options dl{
    background: var(--bright);
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 2%;
    padding: 0;
    width: 80%;
    border-left: 5px solid var(--dark);
    box-sizing: border-box;
}
#options dl dt,
#options dl dd{
    font-size: var(--size22);
    font-weight: var(--b400);
    width: 36%;
    margin: 0 1%;
    padding: 2% 4%;
    position: relative;
}
#options dl dd{
    width: 60%;
}
#checksheet{
    background: var(--regular);
    padding: 3% 0;
}
#checksheet .inner{
    background-color: var(--beige);
    background-image: url(../images/check_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 3%;
    margin: 0 auto 8%;
    position: relative;
    max-width: var(--haba2)
}
#checksheet .inner p{
    background: var(--light);
    color: var(--regular);
    font-size: var(--size24);
    font-weight: var(--b700);
    line-height: 1.4em;
    text-align: center;
    width: fit-content;
    padding: 2% 2% 0;
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translate(-50%, 0);
}
#checksheet .inner p:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 145px solid transparent;
    border-left: 145px solid transparent;
    border-top: 50px solid #d1e4a4;
    border-bottom: 0;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translate(-50%, 0);
    
}
#checksheet h2{
    background: var(--regular);
    border-radius: 8px;
    color: var(--white);
    font-size: var(--size32);
    font-weight: var(--b600);
    text-align: center;
    margin: 0 auto 5%;
    padding: 2% 0;
    position:relative;
    width:84%;
}
#checksheet h2 span{
    position:relative;
    padding:0 0 0 60px;
}
#checksheet h2 span:before{
    content:"";
    background: url(../images/check_icon.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    position:absolute;
    top:50%;
    left:0;
    transform:translate(0,-50%);
}
#checksheet h2:after{
    content: "";
    background: url(../images/check_img.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 180px;
    height: 160px;
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(0, -50%);
}
#checksheet ul{
    display:flex;
    flex-wrap:wrap;
    margin:0 auto;
    padding: 0;
}
#checksheet ul li{
    border-bottom: 2px solid var(--black);
    font-size: var(--size22);
    font-weight: var(--b400);
    width: calc(96% / 2);
    margin: 0 1% 2%;
    padding: 0 0 1.2% 4%;
    position: relative;
}
#checksheet ul li:before{
    content:"";
    border: 2px solid var(--black);
    width: 20px;
    height: 20px;
    position:absolute;
    top: 36%;
    left:2%;
    transform:translate(0,-50%);
}
#message{
    background-color: var(--regular);
    margin: 0 auto;
    padding: 0 0 3%;
}
#message .inner{
    background-image: url(../images/message_bg.png);
    background-size: cover;
    background-position: center;
    margin: 0 auto 2%;
    padding: 5% 0;
    max-width: unset;
    width: 100%;
}
#message .inner h2{
    color: var(--red);
    font-size: var(--size43);
    font-weight: var(--b600);
    text-align: center;
    margin: 0 auto 3%;
    padding: 0;
}
#message .inner p{
    font-size: var(--size24);
    line-height: 2.0em;
    text-align: center;
}
#message .bottom{
    color: var(--white);
    font-size: var(--size20);
    line-height: 2.0em;
    text-align: center;
}
/*@media all and (max-width:1050px) {
    main .bottom h2 img{
        width: 22vw;
    }
}
@media all and (max-width:1220px) and (min-width:1051px) {
    main .bottom h2 img{
        width: 25vw;
    }
}
@media all and (min-width:1201px) {
    main .bottom h2 img{
        width: 28vw;
        max-width: 185px;
    }
}*/
@media all and (min-width:1601px) and (min-width:1560px) {
    main .inner{
        bottom:6vw
    }
}
@media all and (min-width:1201px) and (max-width:1400px){
    main .inner{
        bottom:12vw
    }
}
@media all and (min-width:769px) and (max-width:800px){
    main .inner{
        position: relative;
        bottom: unset;
        left: unset;
        transform: unset;
    }
    main .inner figure{
        width: 80%;
        margin: 0 auto 0;
    }
    main .bottom:after{
        height:50%;
    }
    main .bottom h2 span{
        width: 18%;
        padding: 0;
    }
    main .bottom h2 p{
        width: unset;
        text-align: center;
    }
}
@media all and (max-width:900px){
    main{
        height:50vh;
        min-height:640px;
    }
    main .inner{
        margin: 10% auto 0;
    }
    main .bottom h2{
        font-size: var(--size32);
    }
    /*main .bottom h2 img{
        max-width: 180px;
    }*/
    main .inner figure{
        width:70%;
    }
    #message .bottom{
        font-size: var(--size18);
    }
    #checksheet h2{
        font-size: var(--size27);
    }
    #checksheet h2 span:before{
        width: 40px;
        height: 40px;
    }
    #checksheet h2:after{
        width: 150px;
        height: 130px;
        top: 30%;
        right: -7%;
    }
    #checksheet ul li{
        padding: 0 0 1.2% 5%;   
    }
    #checksheet .inner{
        margin: 0 auto 14%;
    }
    #message .inner h2{
        width: 90%;
    }
}