/* CSS Document */

.before {
    position: relative;
}

.before::before {
    content: '※';
    display: block;
    position: absolute;
    top: 1%;
    left: 2%;
    width: 100%;
    height: 110%;
}

.skip {
    position: relative;
    text-align: center;
    width: 100%;
    margin: 0;
}

.skip a {
    background-color: #fff;
    height: 0;
    width: 0;
    font-size: 0.1%;
    line-height: 0.1;
    position: absolute;
    top: -500px;
    left: 0;
    z-index: 9999;
    padding: 4px 0;
    overflow: hidden;
}
.skip a:focus {
    font-size: 1em;
    padding: 4px 0;
    position: relative;
    top: 5px;
    background: none;
}
a:focus{
    outline: 2px #4876BC dashed;
}

.f_family{
    font-family: 'Oswald', sans-serif;
}

iframe{
    width: 90%;
}

/*pc*/

@media print, screen and (min-width: 769px){
    
    .btn{
        width: 23%;
        margin: 0 auto;
        background: #fff;
        padding: 5px 20px;
        position: relative;
        text-align: center;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
        
    }
    
    .btn a::before{
        position: absolute;
        content: "";
        left: -5px;
        top: -5px;
        background: #fff;
        transition: all 0.8s ease;
        height: 50%;
        width: 1px;
        opacity: 1;
    }
    
    .btn p::before{
        position: absolute;
        content: "";
        left: -5px;
        top: -5px;
        background: #fff;
        transition: all 0.8s ease;
        height: 1px;
        width: 10%;
        opacity: 1;
    }
    
    .btn a::after{
        position: absolute;
        content: "";
        right: -5px;
        bottom: -5px;
        background: #fff;
        transition: all 0.8s ease;
        width: 10%;
        height: 1px;
        opacity: 1;
    }
    
    .btn p::after{
        position: absolute;
        content: "";
        right: -5px;
        bottom: -5px;
        background: #fff;
        transition: all 0.8s ease;
        width: 1px;
        height: 50%;
        opacity: 1;
    }
    
    .btn a:hover::before{
        height: 110%;
        opacity: 0;
    }
    
    .btn p:hover::before{
        width: 100%;
        opacity: 0;
    }
    
    .btn a:hover::after{
        width: 100%;
        opacity: 0;
    }
    
    .btn p:hover::after{
        height: 110%;
        opacity: 0;
    }
    
    .btn a{
        text-decoration: none;
    }
    
    .btn p{
        text-align: center;
        color: #000;
    }
    
    .btn2{
        width: 40%;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #000;
        padding: 5px 20px;
        position: relative;
        text-align: center;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    }
    
    .btn2 a::before{
        position: absolute;
        content: "";
        left: -5px;
        top: -5px;
        background: #033A8D;
        transition: all 0.8s ease;
        height: 50%;
        width: 1px;
        opacity: 1;
    }
    
    .btn2 p::before{
        position: absolute;
        content: "";
        left: -5px;
        top: -5px;
        background: #033A8D;
        transition: all 0.8s ease;
        height: 1px;
        width: 10%;
        opacity: 1;
    }
    
    .btn2 a::after{
        position: absolute;
        content: "";
        right: -5px;
        bottom: -5px;
        background: #033A8D;
        transition: all 0.8s ease;
        width: 10%;
        height: 1px;
        opacity: 1;
    }
    
    .btn2 p::after{
        position: absolute;
        content: "";
        right: -5px;
        bottom: -5px;
        background: #033A8D;
        transition: all 0.8s ease;
        width: 1px;
        height: 50%;
        opacity: 1;
    }
    
    .btn2 a:hover::before{
        height: 110%;
        opacity: 0;
    }
    
    .btn2 p:hover::before{
        width: 100%;
        opacity: 0;
    }
    
    .btn2 a:hover::after{
        width: 100%;
        opacity: 0;
    }
    
    .btn2 p:hover::after{
        height: 110%;
        opacity: 0;
    }
    
    .btn2 a{
        text-decoration: none;
    }
    
    .btn2 p{
        text-align: center;
        color: #000;
    }
    
    
    h3{
        font-size: 1.5em;
        font-weight: bold;
        color: #033A8D;
        letter-spacing: 3px;
    }
    
    h3 span{
        transform: skewX(150deg);
        display: inline-block;
        margin: 0 15px;
    }
    
    h3 span::before{
        content: '';
        border-right: 1px solid #000;
    }
    
}

/*sp*/

@media only screen and (max-width: 768px){
    
    .btn{
        width: 25%;
        background: #fff;
        padding: 5px 10px;
        position: relative;
        text-align: center;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
        
    }
    
    .btn a::before{
        position: absolute;
        content: "";
        left: -5px;
        top: -5px;
        background: #fff;
        transition: all 0.8s ease;
        height: 50%;
        width: 1px;
        opacity: 1;
    }
    
    .btn p::before{
        position: absolute;
        content: "";
        left: -5px;
        top: -5px;
        background: #fff;
        transition: all 0.8s ease;
        height: 1px;
        width: 10%;
        opacity: 1;
    }
    
    .btn a::after{
        position: absolute;
        content: "";
        right: -5px;
        bottom: -5px;
        background: #fff;
        transition: all 0.8s ease;
        width: 10%;
        height: 1px;
        opacity: 1;
    }
    
    .btn p::after{
        position: absolute;
        content: "";
        right: -5px;
        bottom: -5px;
        background: #fff;
        transition: all 0.8s ease;
        width: 1px;
        height: 50%;
        opacity: 1;
    }
    
    .btn a:hover::before{
        height: 110%;
        opacity: 0;
    }
    
    .btn p:hover::before{
        width: 100%;
        opacity: 0;
    }
    
    .btn a:hover::after{
        width: 100%;
        opacity: 0;
    }
    
    .btn p:hover::after{
        height: 110%;
        opacity: 0;
    }
    
    .btn a{
        text-decoration: none;
    }
    
    .btn p{
        text-align: center;
        color: #000;
        font-size: 0.7em;
    }
    
    .btn2{
        width: 40%;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #000;
        padding: 5px 20px;
        position: relative;
        text-align: center;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    }
    
    .btn2 a::before{
        position: absolute;
        content: "";
        left: -5px;
        top: -5px;
        background: #033A8D;
        transition: all 0.8s ease;
        height: 50%;
        width: 1px;
        opacity: 1;
    }
    
    .btn2 p::before{
        position: absolute;
        content: "";
        left: -5px;
        top: -5px;
        background: #033A8D;
        transition: all 0.8s ease;
        height: 1px;
        width: 10%;
        opacity: 1;
    }
    
    .btn2 a::after{
        position: absolute;
        content: "";
        right: -5px;
        bottom: -5px;
        background: #033A8D;
        transition: all 0.8s ease;
        width: 10%;
        height: 1px;
        opacity: 1;
    }
    
    .btn2 p::after{
        position: absolute;
        content: "";
        right: -5px;
        bottom: -5px;
        background: #033A8D;
        transition: all 0.8s ease;
        width: 1px;
        height: 50%;
        opacity: 1;
    }
    
    .btn2 a:hover::before{
        height: 110%;
        opacity: 0;
    }
    
    .btn2 p:hover::before{
        width: 100%;
        opacity: 0;
    }
    
    .btn2 a:hover::after{
        width: 100%;
        opacity: 0;
    }
    
    .btn2 p:hover::after{
        height: 110%;
        opacity: 0;
    }
    
    .btn2 a{
        text-decoration: none;
    }
    
    .btn2 p{
        text-align: center;
        color: #000;
        font-size: 0.6em;
    }
    
    
    h3{
        font-size: 1em;
        font-weight: bold;
        color: #033A8D;
        letter-spacing: 3px;
    }
    
    h3 span{
        transform: skewX(150deg);
        display: inline-block;
        margin: 0 15px;
    }
    
    h3 span::before{
        content: '';
        border-right: 1px solid #000;
    }
    
    .contents{
        margin-top: 51px;
    }
    
}