/*↓↓レスポンシブ対応↓↓*/
/*ウィンドウ幅が767px以上の場合に適用*/
@media screen and (min-width: 896px) { 
    /*★outline★*/
    .outline-top{
        height: 1900px;
    }
    .outline-top2{
        display: flex;
    }
    .outline-frame{
        width: 1000px;
        position: absolute;
        top:600px;
        left: 10%;
    }
    .outline-frame1{
        padding: 2% 5%;
    }
    .outline-table tr{
        height: 100px;
    }
    /*★content★*/
    .content-top{
        height: 1400px;
    }
    /*★inquiry★*/
    .inqu-frame2{
        display: none;
    }
}
/*ウィンドウ幅が最大896pxまでの場合に適用(スマホ横)*/
@media screen and (max-width: 896px) { 
    /*★outline★*/
    .outline-top1,.outline-top1-1{
        display: none;
    }
    .outline-top2,.outline-top2-img,.outline-top2-img2{
        display: none;
    }
    .outline-top3{
        display: none;
    }

    .outline-frame{
        margin-top:5%;
    }
    .outline-frame1{
        padding: 0%;
    }
    .outline-frame2{
        width: 100%;
        height: 120%;
        /*トリミング効果
        object-fit: cover;*/
    }
    .outline-table tr{
        height: 50px;
    }

    /*★content★*/
    .content-top{
        display: inline-block;
    }
    .content-frame1{
        font-size: 15px;
    }

    /*★inquiry★*/
    .inqu-frame1{
        display: none;
    }
    .inqu-frame2{
        height: 90%;
        /*中央配置*/
        text-align: center;
        display: table;
        width: 100%;
    }
    .inqu-1{
        color: white;
        /*中央配置*/
        display: table-cell;
        vertical-align: middle;
    }
    .inqu-2{
        font-size: 20px;
        font-style: italic;
        text-decoration: underline;
        
    }

    footer{
        position: absolute;
        width: 100%;
    }
}
/*ウィンドウ幅が最大479pxまでの場合に適用(スマホ縦)*/
@media screen and (max-width: 479px) {
    /*★outline★*/
    .outline-top1,.outline-top1-1{
        display: none;
    }
    .outline-top2,.outline-top2-img,.outline-top2-img2{
        display: none;
    }
    .outline-top3{
        display: none;
    }

    .outline-frame{
        margin-top:25%;
     }
    .outline-frame1{
        padding: 0%;
    }
    .outline-frame2{
        width: 100%;
        height: 85%;
        /*トリミング効果
        object-fit: cover;*/
    }
    .outline-table tr{
        height: 70px;
    }
    .outline-table tr:nth-child(6){
        height: 90px;
    }

    /*★content★*/
    .content-top{
        display: inline-block;
    }
    .content-frame1{
        font-size: 15px;
    }

    /*★inquiry★*/
    .inqu-frame1{
        display: none;
    }
    .inqu-frame2{
        height: 90%;
        /*中央配置*/
        text-align: center;
        display: table;
        width: 100%;
    }
    .inqu-1{
        color: white;
        /*中央配置*/
        display: table-cell;
        vertical-align: middle;
    }
    .inqu-2{
        font-size: 20px;
        font-style: italic;
        text-decoration: underline;
        
    }

    footer{
        position: absolute;
    }
 }

/*★outline★*/
.outline-top{
    background-color: rgb(227, 228, 233);
    width: 100%;
    /*height: 1900px;*/
    user-select: none;
}

.outline-top1{
    background-color: #708090;
    width: 100%;
    height: 300px;
    position:absolute;
    z-index: 1;
}

.outline-top1-1{
    color: black;
    font-size: 45px;
    font-weight: bold;
    position: absolute;
    z-index: 4;
    top:170px;
    -webkit-text-stroke: 1px #FFF;
    /*left: 700px;*/
    width: 100%;
    min-width:800px;
    text-align: right;
    
    animation: Fadein 1s ease 1.8s;
    animation-fill-mode: backwards;
}

@keyframes Fadein{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.outline-top2{
    background-color: navy;
    width: 80%;
    height: 300px;
    position: absolute;
    top:200px;
    z-index: 2;
    user-select: none;
    /*アニメーション指定*/
    animation: sizeScale 1.5s ease 0.5s;
    animation-fill-mode: backwards;/*アニメーション開始時のスタイル適応*/


}

@keyframes sizeScale{
    0%{
        opacity: 0;
        width:0%;
    }
    100%{
        opacity: 1;
        width:80%;
    }
}

.outline-top2-img{
    width: 45%;
    user-select: none;
}
.outline-top2-img2{
    width: 55%;
    user-select: none;
}

.outline-frame{
    /*height: auto;*/
    /*background-color: olive;*/
    /*width: 1000px;
    position: absolute;
    top:600px;
    left: 10%;*/
    background-color: rgb(227, 228, 233);
    user-select: none;
}
/*
.outline-frame1{
    padding: 2% 5%;
}
*/
.outline-frame2{
    opacity: 0.2;
    position: absolute;
    top:50px;
}

.outline-top3{
    background-color: navy;
    width: 80%;
    height: 500px;
    position: absolute;
    top:1200px;
    left: 20%;
    z-index: 3;
}
.outline-top3-map{
    color: white;
    padding: 30px 0 0 100px;
}

.outline-title{
    color:black;
    font-size: 20px;
}

.outline-line{
    height: 5px;
    background: rgb(14, 13, 13);
}


/*★content★*/
.content-top{
    background-color: rgb(227, 228, 233);
    width: 100%;
    /*height: 1400px;*/
    user-select: none;
}

.content-frame{
    height: 130px;
    margin-bottom: 2%;
}
.content-frame-img{
    float: left;
    width: 180px;
    height: 120px;
    margin-right: 15px;
}
#cfi1{
    animation: SrideIn1 1.5s ease;
    animation-fill-mode: backwards;
}
#cfi2{
    animation: SrideIn1 1.5s ease 0.3s;
    animation-fill-mode: backwards;
}
#cfi3{
    animation: SrideIn1 1.5s ease 0.6s;
    animation-fill-mode: backwards;
}
#cfi4{
    animation: SrideIn1 1.5s ease 0.9s;
    animation-fill-mode: backwards;
}
@keyframes SrideIn1{
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

.content-frame1{
    margin-left: 170px;
    animation: SrideIn2 1.5s ease 1s;
    animation-fill-mode: backwards;
}
@keyframes SrideIn2{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/*★inquiry★*/
.inqu-subtitle{
    color: black;
}

span{
    /*font-size: 12px;*/
    font-size:16px;
    color: red;
}

.inqu-subtitle span2{
    /*font-size: 12px;*/
    font-size: 16px;
}

.inqu-line{
    height: 2px;
    border-top: 2px dashed ;
    margin-bottom: 2%;
}

.table-inqu{
    width: 100%;
    padding: 2%;
    border: 1px solid ;
    border-collapse: collapse;
}

.table-inqu th{
    border-right: 1px solid ;
    height: 30px;
    width: 200px;
}

.table-inqu td{
    padding-left: 2%;
    padding-bottom: 2%;
}

.inqu-submit{
    padding-top: 2%;
    text-align: center;
}