@charset "utf-8";
/* CSS Document */

body {background:url(../../image/background.jpg);
background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

.view-area {/*width: 100vh;*/height:100vh;}
.main-contents { width: 100%; height: 100%; display:table; overflow:scroll;}

.title-area { width:40%; height:100%; display: table-cell; position:relative; vertical-align:top;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(47%, rgba(246,246,246,0.47)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );}

.float-title { position:fixed; top:10vh; width:40%; text-align:center;}
.float-title .logoimg { width: 80%; margin: 0 auto;}
.float-title .logoimg img { max-width:100%; height:auto;}
.float-title .linklistopen { display:inline-block; padding: 6px; background: rgba(255,255,255,0.8); margin: 0 auto; width:70%;}
.float-title .linklist {margin: 0 auto; width:70%; list-style:none; overflow-y:scroll; height:60vh; padding: 0; display:none;}
.float-title .linklist li { text-align:left; margin: 0; padding: 0; width:100%;}
.float-title .linklist li a { display:block; text-decoration: none; background: rgba(255,255,255,0.6); padding:8px 12px; border-bottom: 1px #999999 solid; margin-bottom: 2px;color:#1a7575;}
.float-title .linklist li a:hover { color:#6594e0;}




.contents-area {height: 100%; width: calc(60% - 40px); background-color:#FFFFFF; display: table-cell; color:#333333; padding: 20px; vertical-align:top;}
.contents-area h1 { font-size: 22px; margin: 100px 0 20px; padding:0;border-bottom: dashed 2px #6594e0;color: #6594e0;}
.contents-area h2 { font-size: 20px; margin: 40px 0 20px; padding:0;border-bottom: dashed 2px #6594e0;color: #6594e0;}
.contents-area h3 { font-size: 18px; margin: 40px 0 20px; padding:0;border-bottom: dashed 2px #6594e0;color: #6594e0;}
.contents-area h2:before {
    content:"";clear: both;height: 0;display: block;visibility: hidden;font-size: 0.1em;
}
.contents-area h3:before {
    content:"";clear: both;height: 0;display: block;visibility: hidden;font-size: 0.1em;
}
.contents-area p { font-size:13px;}
.contents-area p a {color: #6594e0;}
.contents-area p a:hover {color: #FF9933;;}

.contents-area .f-right { float:right; width: 40%; margin: 0 0 16px 16px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; overflow:hidden;}
.contents-area .f-left { float:left; width: 40%; margin: 0 16px 16px 0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; overflow:hidden;}
.contents-area .img-center { width:100%; margin:0 auto 16px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; overflow:hidden;}
.contents-area .f-right img,.contents-area .f-left img,.contents-area .img-center img { width: 100%; height: auto; vertical-align:bottom;}

.foot-area { position:fixed; width:100%; bottom:0; text-align:center; background-color:#696969; font-size:11px; color:#FFFFFF;}
.foot-area a { color:#FFFFFF;text-decoration:none;}


@media screen and (max-width: 680px) {

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

.view-area {/*width: 100vh;*/height:auto;}
.main-contents { width: 100%; height: 100%; display: block; overflow:auto;}

.title-area { width:100%; height:100%; display: block; position:relative; vertical-align:top;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(47%, rgba(246,246,246,0.47)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );}

.float-title { position: static; top:0; width:95%; text-align:center; margin:10px auto;}
.float-title .logoimg { width: 80%; margin: 0 auto;}
.float-title .logoimg img { max-width:100%; height:auto;}
.float-title .linklistopen { display:inline-block; padding: 6px; background: rgba(255,255,255,0.8); margin: 0 auto; width:100%;}
.float-title .linklist {margin: 0 auto; width:100%; list-style:none; overflow-y: auto; height:auto; padding: 0;}
.float-title .linklist li { text-align:left; margin: 0; padding: 0; width:100%;}
.float-title .linklist li a { display:block; text-decoration: none; background: rgba(255,255,255,0.6); padding:8px 12px; border-bottom: 1px #999999 solid; margin-bottom: 2px;}



.contents-area {height:auto; width: calc(95% - 16px); background-color:#FFFFFF; display: block; color:#333333; padding: 8px; vertical-align:top; margin: 0 auto;}
.contents-area h1 { font-size: 22px; margin: 40px 0 20px; padding:0;border-bottom: dashed 2px #6594e0;color: #6594e0;}
.contents-area h2 { font-size: 20px; margin: 40px 0 20px; padding:0;border-bottom: dashed 2px #6594e0;color: #6594e0;}
.contents-area h3 { font-size: 18px; margin: 40px 0 20px; padding:0;border-bottom: dashed 2px #6594e0;color: #6594e0;}
.contents-area h2:before {
    content:"";clear: both;height: 0;display: block;visibility: hidden;font-size: 0.1em;
}
.contents-area h3:before {
    content:"";clear: both;height: 0;display: block;visibility: hidden;font-size: 0.1em;
}
.contents-area p { font-size:13px;}
.contents-area p a {color: #6594e0;}
.contents-area p a:hover {color: #FF9933;;}

.contents-area .f-right { float:right; width: 40%; margin: 0 0 16px 16px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; overflow:hidden;}
.contents-area .f-left { float:left; width: 40%; margin: 0 16px 16px 0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; overflow:hidden;}
.contents-area .img-center { width:100%; margin:0 auto 16px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; overflow:hidden;}
.contents-area .f-right img,.contents-area .f-left img,.contents-area .img-center img { width: 100%; height: auto; vertical-align:bottom;}

.foot-area { position:fixed; width:100%; bottom:0; text-align:center; background-color:#696969; font-size:11px; color:#FFFFFF;}
.foot-area a { color:#FFFFFF; text-decoration:none;}

}

.bnr { width: 480px; max-width: calc(100% - 20px); margin: 0 auto 10px; padding: 30px 10px; }
.bnr img { width: 100%; height: auto; }
.bnr span { display: block; font-size: 12px; }