/* ------------------------------------------------- */
/* --- ページ全体の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-weight             : 525 ;
    font-size               : 2.5vmin ;
    letter-spacing          : 0.3vmin ;
    text-decoration         : none ;
}
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 : rgba(200, 235, 240, 1.0);
    border-bottom : 1px solid rgb(200,200,200);
    margin-bottom : 5vmin;
    font-size : 6vmin;
    color : rgb(0, 60, 80);
    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                  : 5vmin auto 5vmin auto ;
    font-size               : 2.5vw ;
    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;
    vertical-align: middle;
    min-width       : 40% ;
    min-height      : 8vmin;
    background-color: rgba(40, 60, 120, 1) ;
    padding         : 2vmin 5% ;
    border-radius   : 1.5vmin;
    font-size       : 2.5vw ;
    font-family     :"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight     : bold ;
    line-height     : 8vmin ;
    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; }


/* エビデンスのリンク */
.evidence-link {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
}
.evidence-link:hover { opacity : 0.5 ; }

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

.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% ;
}

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

.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.5vmin 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.5vmin 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;}


/* ------------------------------------------------- */
/* --- レスポンシブ対応 --- */
/* ------------------------------------------------- */
@media only screen and (max-width: 600px) {

/* --- ヘッダ --- */
header {
    height                  : 6vmin ;
}
a.header-taitle {
    font-size               : 3vmin ;
    letter-spacing          : 0.3vmin ;
}

/* --- サブタイトル --- */
.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 : 30vmin;
    background-color : rgba(200, 235, 240, 1.0);
    border-bottom : 1px solid rgb(200,200,200);
    margin-bottom : 5vmin;
    font-size : 8vmin;
    color : rgb(0, 60, 80);
    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                  : 5vmin auto 5vmin auto ;
    font-size               : 6vw ;
    color                   : rgb(30,30,30);
    line-height             : normal ;
    font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}


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

/* --- フッタ --- */
footer {
    position                : relative ;
    top                     : 0% ;
    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% ;
    border-top: 1px solid rgba(0,0,0,0.3);
    background-color: rgba(240,240,240,0);
}
.credit {
    font-size               : 2.5vmin ;
    color                   : rgba(0,0,0,0.7) ;
    line-height             : normal ;
    font-weight             : 400 ;
    margin-bottom           : 2vmin;
}
/* --- 次へボタン --- */
.put-next {
    font-size       : 3.6vmin ;
    padding         : 1.4vmin 1.5vmin 1.1vmin 1.5vmin 
}
/* --- 戻るボタン --- */
.put-back {
    position: absolute ;
    font-size       : 3.6vmin ;
    padding         : 1.4vmin 1.5vmin 1.1vmin 1.5vmin ;
}

/* ------------------------------------------------- */
/* --- レイアウト調整 --- */
.br-break {display:block;}

}