/* ------------------------------------------------- */
/* --- ページ全体のCSS --- */
/* ------------------------------------------------- */
/* --- ヘッダ --- */
header {
    position                : fixed ;
    z-index                 : +10 ;
    top                     : 0px ;
    left                    : 0px ;
    display                 : flex ;
    display                 : -webkit-flex ;
    display                 : -moz-flex ;
    display                 : -ms-flex ;
    display                 : -o-flex ;
    -webkit-justify-content : center ;
    justify-content         : center ;
    -webkit-align-items     : center ;
    align-items             : center ;
    text-align              : center ;
    width                   : 100% ;
    height                  : 5vmin ;
    background-color        : rgb(0, 60, 80) ;
    filter                  : drop-shadow( 0px 0px 2px rgba(0,0,0,0.2)) ;
}

/* 印刷時 */
@media print {
  header{display:none;}
}

a.header-taitle {
    color                   : rgb(255, 255, 255) ;
    line-height             : normal ;
    font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-weight             : 525 ;
    font-size               : 2.5vmin ;
    letter-spacing          : 0.3vmin ;
    text-decoration         : none ;
    margin-bottom: 0vmin;
}
a.header-taitle:hover { opacity: 0.8 ;}

.header-right {
    position                : absolute ;
    right                   : 0.75%;
    display                 : flex ;
    display                 : -webkit-flex ;
    display                 : -moz-flex ;
    display                 : -ms-flex ;
    display                 : -o-flex ;
    -webkit-justify-content : center ;
    justify-content         : center ;
    -webkit-align-items     : center ;
    align-items             : center ;
    text-align              : center ;
    height                  : 50% ;
}
/* ------------------------------------------------- */
/* --- コンテンツ部分 --- */

main {
    position                : relative ;
    margin-top              : 5vmin ;
    display                 : flex ;
    flex-direction          : column ;
    width                   : 100%;
}

/* --- サブタイトル --- */
.sub-taitle {
    display                 : flex ;
    display                 : -webkit-flex ;
    display                 : -moz-flex ;
    display                 : -ms-flex ;
    display                 : -o-flex ;
    -webkit-justify-content : center ;
    justify-content         : center ;
    -webkit-align-items     : center ;
    align-items             : center ;
    text-align              : center ;
    width                   : 100%;
    height                  : 20vmin;
    background-color        : rgb(245, 245, 245);
    border-bottom           : 1px solid rgb(200,200,200);
    margin-bottom           : 5vmin;
    font-size               : 6vmin;
    color                   : rgb(0,0,0);
    font-weight             : 600;
    letter-spacing          : 0.3vmin;
    font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}

/* --- テキストエリア --- */
.text-container {
    position                : relative ;
    width                   : 86vw ;
    text-align              : justify ;
    margin                  : 2.5vmin auto 2.5vmin auto ;
    font-size               : 1.8vw ;
    color                   : rgb(30,30,30);
    line-height             : normal ;
    font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}

/* --- テキスト改行を指定する場合<span>に記述する --- */
span.aks {
    display: inline-block;
 }

/* --- バナーボタン --- */
.put-banner {
    display         : inline-block;
    min-width       : 40% ;
    background-color: rgba(40, 60, 120, 1) ;
    padding         : 1vmin 5% ;
    border-radius   : 1.5vmin;
    font-size       : 2.5vw ;
    font-family     :"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight     : bold ;
    line-height     : normal ;
    text-align      : center ;
    margin          : 5vmin 5% 15vmin 5% ;
    filter          : drop-shadow( 1px 1px 2px rgba(0,0,0,0.3)) ;
}
a.put-banner {color:rgb(255, 255, 255)}
.put-banner:hover { opacity: 0.7; }

/* ------------------------------------------------- */
/* --- フッタ --- */

footer {
    position                : sticky ;
    top                     : 100vh ;
    bottom                  : 0px ;
    display                 : flex ;
    flex-flow               : column;
    display                 : -webkit-flex ;
    display                 : -moz-flex ;
    display                 : -ms-flex ;
    display                 : -o-flex ;
    -webkit-justify-content : center ;
    justify-content         : center ;
    -webkit-align-items     : center ;
    align-items             : center ;
    text-align              : center ;
    width                   : 100% ;
    height                  : 500px ;
    border-top: 1px solid rgba(0,0,0,0.3);
    background-color: rgba(240,240,240,0);
}


.under-link {
    margin: 1vmin auto 2.5vmin auto;
    width: 100%;
    font-size: 2vmin;
}

.credit {
    font-size               : 1.5vmin ;
    color                   : rgba(0,0,0,0.7) ;
    line-height             : normal ;
    font-weight             : 400 ;
    margin-bottom           : 0.25%;
}

/* --- 次へボタン --- */
.put-next {
    position: absolute ;
    bottom          : 2vmin ;
    right           : 2vmin ;
    background-color: rgba(40, 60, 120, 1) ;
    padding         : 0.4vmin 2.5vmin 0.1vmin 2.5vmin ;
    border-radius   : 1vmin;
    font-size       : 2.5vmin ;
    font-weight     : 600 ;
    line-height     : normal ;
    letter-spacing  : 0.25vmin ;
    text-decoration : none;
    filter          : drop-shadow( 1px 1px 2px rgba(0,0,0,0.3)) ;
}
a.put-next {color:rgba(255, 255, 255,1)}
.put-next:hover { opacity: 0.7; }

/* --- 戻るボタン --- */
.put-back {
    position: absolute ;
    bottom          : 2vmin ;
    left            : 2vmin ;
    background-color: rgba(160, 160, 160, 1) ;
    padding         : 0.4vmin 2.5vmin 0.1vmin 2.5vmin ;
    border-radius   : 1vmin;
    font-size       : 2.5vmin ;
    font-weight     : 600 ;
    line-height     : normal ;
    letter-spacing  : 0.25vmin ;
    text-decoration : none;
    filter          : drop-shadow( 1px 1px 2px rgba(0,0,0,0.3)) ;
}
a.put-back {color:rgba(255, 255, 255,1)}
.put-back:hover { opacity: 0.7; }

/* ------------------------------------------------- */
/* --- レイアウト調整 --- */

.h-5vmin  {height: 5vmin;}
.h-10vmin {height: 10vmin;}