html{
    height: 100%;
}

body{
    background: rgb(177, 184, 190) ;
    /*background-color: white;*/
    font-family:"Hiragino Kaku Gothic ProN";
    font-size: 16px;
    width: 100%;
    height: 100%;
    margin:0;
}

#page {
    /*background-color: #00FFFF;*/ /*青色*/
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*↓↓レスポンシブ対応↓↓*/
/*ウィンドウ幅が767px以上の場合に適用*/
@media screen and (min-width: 896px) { 
    body{
        background: rgb(177, 184, 190) ;
    }
    header{
        background-color: transparent;
    }
    .top-image{
        padding: 10px;
    }
    .tf-2{
        color: black;
        font-size: 60px;
        top:40%;
    }
    .choice-icon{
        visibility: hidden;
    }
    .footer-frame{
        height: 50px;
    }
    #sumaho{
        display: none;
    }
}
/*ウィンドウ幅が最大896pxまでの場合に適用(スマホ横)*/
@media screen and (max-width: 896px) { 
    body{
        background: navy ;
    }
    header{
        background-color: navy;
    }
    .top-image{
        padding: 0px;
    }
    /*★横の変更箇所➀★*/
    .tf-2{
        color: white;
        font-size: 50px;
        top:70%;
    }
    .choice-icon{
        visibility:visible;
        animation: fadeIn 2s ease 0s 1 normal;
        -webkit-animation: fadeIn 2s ease 0s 1 normal;
    }
    /*★横の変更箇所➁★*/
    .footer-frame{
        height: 50px;
    }
    /*★横の変更箇所➂★*/
    .top-frame{
        padding-top: 5%;
    }
    .top-frame2 {
        /*background-color: #00FF00;*/ /*緑色*/
        display: none;
    }
    #sumaho{
        padding-top: 5%;
        display: block;
        color: white;
        text-align: center;
        /*アニメーション*/
        -webkit-animation: t-2 2.9s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation: t-2 2.9s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }
}

/*ウィンドウ幅が最大479pxまでの場合に適用(スマホ縦)*/
@media screen and (max-width: 479px) { 
    body{
        background: navy ;
    }
    header{
        background-color: navy;
    }
    .top-image{
        padding: 0px;
    }
    .tf-2{
        color: white;
        font-size: 30px;
        top:30%;
    }
    .choice-icon{
        visibility:visible;
        animation: fadeIn 2s ease 0s 1 normal;
        -webkit-animation: fadeIn 2s ease 0s 1 normal;
    }
    .footer-frame{
        height: 80px;
    }
    .top-frame{
        padding-top: 30%;
    }
    .top-frame2 {
        /*background-color: #00FF00;*/ /*緑色*/
        display: none;
    }
    #sumaho{
        padding-top: 5%;
        display: block;
        color: white;
        text-align: center;
        /*アニメーション*/
        -webkit-animation: t-2 2.9s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation: t-2 2.9s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }
}

header{
    position: fixed;
    z-index: 10;
    width: 100%;
    /*background-color: transparent;*/
}

.header-frame{
    /*background: linear-gradient(180deg, rgb(28, 40, 117)90%,rgb(255, 215, 0)100%);*/
    /*グラデーション指定*/
    /*background-color: rgb(28,40,117);*/
    width: auto;
    padding: 0 20px;
    position: relative;
    z-index: 1000;
}

.header-logo{
    padding-top: 5px;
}

.h-1{
    padding-top: 1%;
    float: left;
    font-size: 20px;
    color:rgb(70 ,70, 70);
    font-style: italic;
    font-family: 'Amita', cursive;
    user-select: none;
}

.header-table{
    float: right;
    user-select: none;
}
.header-table td{
    font-size: 17px;
    height: 50px;
    text-align: center;
    color: rgb(70 ,70, 70);
    cursor:pointer;
}
/*マウスオーバー設定※「：」のスペース空けないこと*/
.header-table td:hover{
    color: rgb(100,100,100);
}

.frame-line{
    height: 5px;
    background: rgb(255, 215, 0);
}

.top-frame {
    /*画面幅に収まるサイズで背景画像を表示
    background-size: auto auto;*/
    color: white;
    text-align: center;    
  }

.top-image{
    /*padding: 10px;*/
    user-select: none;
}
.tf-1{
    /*透過率 ※opacityを使用した際、positionでz-indexを指定しないと前面設定にならない*/
    opacity: 0.6;
    position: relative;
    z-index: -1;
    /*画面サイズに*/
    width: 100%;
    height: 100%;
}
.tf-2{
    /*フォント指定*/
    /*color: black;*/
    font-style: italic;
    font-family: 'Amita', cursive;


    /*中心配置*/
    position: absolute;
    left:50%;
    /*top:40%;*/
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);

    /*アニメーション*/
    -webkit-animation: t-2 2.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: t-2 2.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes t-2 {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes t-2 {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

.top-frame2{
    width: 100%;
    height: 100%;
    background-color: #708090;
}

.tf2-1{
    width: 30%;
    height: 50%;
    min-height: 300px;
    /*padding: 10px 0px 30px 20px;*/
    margin: 5% 0 0 20%;
    float: left;
    user-select: none;

    /*cssアニメーションの指定
    animation: SlideIn 2.0s;*/
}
.tA{
    animation: SlideIn 2.0s;
}
/*cssアニメーションの設定*/
@keyframes SlideIn{
    0%{
        opacity: 0;/*初期状態では透明に*/
        transform: translateX(-300px);/*左から右に*/
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.tf2-2{
    width: 30%;
    height: 50%;
    min-height: 300px;
    display: inline-block;
    margin-top: 15%;
    background-color: navy;
    text-align: center;
    color: white;
    overflow: hidden;
    
    /*cssアニメーションの指定
    animation: SlideIn2 3s;*/
}
.tA2{
    animation: SlideIn2 2.0s;
}
@keyframes SlideIn2{
    0%{
        opacity: 0;
        transform: translateY(300px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

#tf2-2-1{
    font-size: 18px;
}
#tf2-2-2{
    font-size: 25px;
    font-weight: bold;
}
#tf2-2-3{
    font-size: 16px;
}
#tf2-2-4{
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    user-select: none;
}
#tf2-2-4:hover{
    background-color: white;
    color: navy;
    cursor: pointer;
}

.top-contents{
    color: gold;
    /*height: 100vw;*/
}

.choice-frame{
    /*background-color: rgb(28,40,117);*/
    background-color: navy;
    height: 200px;
}

.choices{
    text-align: center;
    padding-top: 50px;
    /*均等配置*/
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.choice-icon{
    cursor: pointer;
    width: 100px;
    height: 100px;
    background-color: burlywood;
    border-radius: 50%;
    /*visibility: hidden;*/
    /*ぼかし*/
    filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
    box-shadow: 0px 0px 15px 8px rgb(170, 153, 121) inset;
}
.choice-icon:hover{
    background-color: rgb(121, 118, 114);
}
.fadeInDown{
    visibility:visible;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn{
    
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


.footer-frame{
    background-color: gray;
    /*height: 50px;*/
    vertical-align: middle;
    user-select: none;
}

.footer1{
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    
}

.footer2{
    margin-top: 10px;
    margin-right: 10px;
    float: right;
}