html,body{
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
    font-size:16px;
    line-height: 1.6;
    padding:0;
    margin: 0;
    background: #FFFEEC;
}

.wrap{
    width:1280px;
    margin:0 auto;
}
img.full{
    display:block;
    width:100%;
    height:auto;
}
a{
    display:inline-block;
}
.mb{
    margin-bottom: 30px;
}
.pb{
    padding-bottom: 20px;
}

.pad20_0{
   padding:20px 0; 
}
.pc{
    display:block;
}
.sp{
    display:none;
}
.al_center{
    text-align: center;
}
/*header*/
.head_title_area{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}
.head_title_area >div{
    width:50%;
    padding:5px;
}
.head_title_area strong{
    font-size:36px;
    padding:0;
    padding-top:5px;
    color:#24507A;
    display:inline-block;
}
.head_title_area >div.d2{
    text-align: right;
}
.head_title_area >div.d2 span{
    color:#24507A;
    display:inline-block;
    margin-right: 12px;
    font-size: 21px;
    font-weight: bold;
    vertical-align: bottom;
}
a.btn_a{
    border-radius: 12px;
    padding:.4em 1em;
    border:3px solid #fff;
    background:#F39800;
    color:#fff;
    box-shadow: 0 0 5px #000;
    display:inline-block;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.3;
}
a.btn_head{
    font-size:21px;
}

.head_area{
    background-image: url(images/head_bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.head_title_area ruby > rt {
    font-size: 40%;
    text-align: center;
}


a.block{
    display:block;
    outline: none;
    padding:20px;
}
a.iblock{
    outline: none;
    padding:20px;
}
img.max_full{
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

.bg_navy{
    background:#1F4E78;
}
.bg_blue{
    background: #4472C4;
}
.bg_sky{
    background: #EAEFF8;
}
.bg_white{
    background: #fff;
}
.arrow{
    position: relative;
}
.arrow::after{
    content:'';
    display:block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 100px 0 100px;
    border-color: #fe0 transparent transparent transparent;
    position: absolute;
    bottom:-30px;
    left:calc(50% - 100px);
    animation: arrow .7s linear infinite
}
@keyframes arrow{
    0%{
        bottom:0px;
    }
    100%{
        bottom:-30px;
    }
}

.icon_h{
    position: relative;
}
.icon_h::after{
    position: absolute;
    content:'';
    width:300px;
    height:100px;
    background-image:url(images/img_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    bottom:50%;
    left:7%;
}

.flex_img3{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.flex_img3 > div{
    width:40%;
    text-align: center;
}
.flex_img3 > div.f2{
    width:20%;
}

footer{
    text-align: center;
    padding:14px;
    font-size:14px;
    color:#fff;
    background:#1F4E78;
}





.mail_area{
    position: relative;
}
.form_area{
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
    width:100%;
    height:100%;
}

.form_area form{
    position: relative;
    top:59%;
    display:block;
    left:16%;
    width:68%;
}

.count_area{
    padding:2%;
    font-size:22px;
    text-align: center;
    background-image: linear-gradient(90deg,#f0f,#00f);
    color:#fff;
    text-shadow: 1px 1px 1px #000;
}
input{
    width:100%;
    font-size:18px;
    padding:2%;
    margin:1% 0;
}
button{
    border:none;
    background:none;
    width:100%;
    display:block;
    padding:0;
}
@media(max-width:1300px){
    .wrap{
        width:100%;
    }
    .icon_h::after{
        position: absolute;
        content:'';
        width:300px;
        height:100px;
        background-image:url(images/img_icon.png);
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        bottom:50%;
        left:4%;
    }
}
@media(max-width:767px){
    .wrap{
        width:100%;
    }
    .head_title_area >div{
        width:100%;
    }
    .head_title_area >div.d2{
        display:none;
    }
    .icon_h::after{
        position: absolute;
        content:'';
        width:250px;
        height:100px;
        background-image:url(images/img_icon.png);
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        bottom:20%;
        left:0%;
    }
}
@media(max-width:640px){
    .pc{
        display:none;
    }
    .sp{
        display:block;
    }
    .wrap{
        padding:0 5px;
    }
    
    .head_title_area strong{
        font-size: 32px;
    }
    
    a.block{
        padding:0px;
    }
    a.iblock{
        outline: none;
        padding:0px;
    }
    .flex_img3 > div {
        width: 45%;
    }
    .flex_img3 > div.f2 {
        width: 10%;
    }
    
    .arrow::after{
        content:'';
        display:block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 30px 60px 0 60px;
        border-color: #fe0 transparent transparent transparent;
        position: absolute;
        bottom:-20px;
        left:calc(50% - 60px);
        animation: arrow_sp .7s linear infinite
    }
    @keyframes arrow_sp{
        0%{
            bottom:0px;
        }
        100%{
            bottom:-20px;
        }
    }
    
    .icon_h::after{
        position: absolute;
        content:'';
        width:200px;
        height:80px;
        background-image:url(images/img_icon.png);
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        bottom:0%;
        left:0%;
    }
    
    .count_area{
        font-size:14px;
    }
    .count_area,input{
        font-size:16px;
        padding:1%;
    }
}

@media(min-width:790px){
    .furu{

    }
    .furu:hover{
        animation: furu 2.2s linear infinite;
    }

    @keyframes furu {
        0% {
            transform: translate(0px, 0px) rotateZ(0deg)
        }
        2% {
            transform: translate(2px, 2px) rotateZ(2deg)
        }
        4% {
            transform: translate(0px, 2px) rotateZ(0deg)
        }
        6% {
            transform: translate(2px, 0px) rotateZ(-2deg)
        }
        8% {
            transform: translate(0px, 0px) rotateZ(0deg)
        }
        10% {
            transform: translate(2px, 2px) rotateZ(2deg)
        }
        12% {
            transform: translate(0px, 0px) rotateZ(0deg)
        }
        14% {
            transform: translate(2px, 0px) rotateZ(-2deg)
        }
        16% {
            transform: translate(0px, 2px) rotateZ(0deg)
        }
        18% {
            transform: translate(0px, 0px) rotateZ(0deg)
        }
        100% {
            transform: translate(0px, 0px) rotateZ(0deg)
        }
    }
}