@charset "utf-8";

body {
  margin: 0;
  padding: 0;
  font-size:18px;
  font-family: -apple-system,sans-serif;
  color:white;
}
strong {
    color: white;
}
a {
    color: #0366D6;
    text-decoration: none
}
a:hover {
    color: #1A0DAB;
    text-decoration: underline;
}
a:hover img { opacity: 0.7;}
h1, h2, h3, h4, h5, h6 {
    margin-top: 3;
}
p {
    line-height: 1.6;
}
header {
    width: 980px;
    margin: 0 auto;
}
header h1 {
    padding: 3px;
    float: left;
}
#main h1 {
    color: black;
    font-size: 26px;
    position: relative;
    padding: 15px 20px 15px 20px;
    border-bottom: 3px solid #3a687e;
    animation-name: fadein;
    animation-duration: 0.4s;
}
#main h1:before, #main h1:after {
  content: "";
  position: absolute;
  margin: auto;
}
#main h1:before {
    width: 9px;
    height: 9px;
    top: 3px;
    left: 8px;
    background: #3a687e;
    border-radius: 1px;
  transform: rotate(40deg);
}
#main h1:after {
    width: 6px;
    height: 6px;
    top: 15px;
    left: 3px;
    background: #3a687e;
    border-radius: 0.5px;
  transform: rotate(20deg);
}

h2 {
    font-size: 22px;
    border-bottom: solid 2.5px #3a687e;
    padding: 8px 14px;
}
h3 {
    font-size: 19px;
    border-left: solid 2.5px #3a687e;
    padding: 4px 9px 4px 14px;
}
h4 {
    font-size: 18px;
    border-left: solid 3px #3a687e;
    padding: 4px 9px 4px 14px;
}
#global_navi {
    width: 980px;
    clear: both;
    overflow: hidden;
    margin: 0px auto;
}
#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#global_navi ul li {
    background-color: midnightblue;
    width: 162.3333333px;
    font-size: 12px;
    float: left;
    margin-top: auto;
    padding: 0.5px;
    text-align: center;
}
#global_navi ul li a {
    display: block;
    padding: 7px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.8s linear;
}
#global_navi ul li a:hover {
    background-color: black;
}
#global_navi ul li.current a {
    background-color: black;
}
#main_visual {
    width: 980px;
    height: 330px;
    margin: 0 auto 1px;
    position: relative;
}
#wrapper {
    width: 980px;
    margin: 0 auto;
    overflow: hidden;
}
#main {
    width: 660px;
    padding: 0 0.7%;
    float: left;
}
#sidebar {
    width: 300px;
    float: right;
}
footer {
    background-color: midnightblue;
    text-align: center;
}
footer #footer_nav {
    background-color: #efefef;
    padding: 10px 0;
}
footer #footer_nav ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}
footer #footer_nav li {
    display: inline;
    border-left: solid 1px #aaa;
    margin-left: 8px;
    padding-left: 8px;
    font-size: smaller;
}
footer #footer_nav li:last-child {
    display: inline;
    border-right: solid 1px #aaa;
    padding: 0 8px;
}
footer small {
    display: block;
    padding: 8px 0;
    color: #fff;
}
#breadcrumb {
    font-size: smaller;
    padding: 1px;
}
#breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
#breadcrumb ol li {
    display: inline;
}
#breadcrumb ol li::after {
    content: ">";
    padding-left: 7px;
}
#breadcrumb ol li:last-child::after { content: none; }

#news dl {overflow: hidden; }
#news dt {
    width: 8em;
    float: left;
    margin-bottom: 10px;
    clear: both;
}
#news dd {
    margin-left: 8em;
    margin-bottom: 10px;
}
#responsive-unit {
    max-width: 336px;
}
.mokuji{
    margin:2em 0;
    position: relative;
    padding: 0.3em 1.5em;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}
.mokuji:before, .mokuji:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 1px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.mokuji:before {left: 10px;}
.mokuji:after {right: 10px;}
.waku {
    padding:8px;
    border-radius:6px;
    overflow:auto;
    background:#FBFFFF;
    box-shadow:0px 0px 1px #AAA;
}
.waku2 {
    padding:8px;
    border: 1px solid;
    border-color: #f8f8f8;
    border-radius:6px;
    overflow:auto;
    background:#fdfdfd;
}
.waku3 {
    padding: 0.3em 0.5em;
    margin: 0.01px 0;
    color: #494949;
    background: #fcfcfc;
    font-size: 13px;
    box-shadow:0px 0px 1px #AAA;
}
.waku3 p {
    margin: 0; 
    padding: 0;
    text-align: right
}
.waku3level {
    color: blue;
}
.waku4 {
    padding: 0.3em 0.5em;
    margin: 0.01px 0;
    color: #494949;
    background: #f1f1f1;
    font-size: 13px;
}
.wakumei {
    color: blue;
}
.openpr{
    font-size: 16px;
    background: linear-gradient(#ffffff 0%, #f0f8ff 100%);
    color: black;
    cursor: pointer;
    width: 96px;
    padding: 5px;
    box-shadow:0px 0px 1px #AAA;
    border-radius:5px;
}
.openpr1{
    font-size: 16px;
    background: linear-gradient(#ffffff 0%, #f0f8ff 100%);
    color: black;
    cursor: pointer;
    width: 106px;
    padding: 5px;
    box-shadow:0px 0px 1px #AAA;
    border-radius:5px;
}
.openpr2{
    font-size: 16px;
    background: linear-gradient(#ffffff 0%, #f0f8ff 100%);
    color: black;
    cursor: pointer;
    width: 106px;
    padding: 5px;
    box-shadow:0px 0px 1px #AAA;
    border-radius:5px;
}
.openpr3{
    font-size: 16px;
    background: linear-gradient(#ffffff 0%, #f0f8ff 100%);
    color: black;
    cursor: pointer;
    width: 106px;
    padding: 5px;
    box-shadow:0px 0px 1px #AAA;
    border-radius:5px;
}

.openp{
    font-size: 16px;
    background: linear-gradient(#ffffff 0%, #f0f8ff 100%);
    color: black;
    cursor: pointer;
    padding: 5px;
    box-shadow:0px 0px 1px #AAA;
    border-radius:5px;
}
.openpp{
    font-size: 16px;
    background: linear-gradient(#ffffff 0%, #f0f8ff 100%);
    color: black;
    cursor: pointer;
    padding: 5px;
    box-shadow:0px 0px 1px #AAA;
    border-radius:5px;
}
.openppp{
    font-size: 16px;
    background: linear-gradient(#ffffff 0%, #f0f8ff 100%);
    color: black;
    cursor: pointer;
    padding: 5px;
    box-shadow:0px 0px 1px #AAA;
    border-radius:5px;
}
.imp {
    color: red;
}
.aoiro {
    color: blue;
}
.kakomoncolor {
    color: navy;
}
.black {
    color: black;
}

.fade-in1 {
    animation-name: fadeinindex;
    animation-duration: 2.7s;
}

.fade-ininf {
    animation-name: fadeininf;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes fadein {
    from {
        opacity: 0.1;
        transform: translateY(9px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeinindex {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeininf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */
#particles-js{ position:absolute; width: 100%; height: 100%; background-color: #2a2c3e; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; color: white;}
#topcatchcopy {
    position: absolute; left: 0; right: 0; top: 110px;bottom: 0; text-align: center;
    color: white;
    font-family: monospace;
}

#menu3 {
    display: none;
}

.arrow-pp::before, .arrow-pp::after, .arrow-pm::before, .arrow-pm::after, .arrow-mp::before, .arrow-mp::after, .arrow-mm::before, .arrow-mm::after {
    content: "";
    position: absolute;
    margin: auto;
}
.arrow-pp {
    left: 3px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0 0 100% 0;
    background: #fff;
}
.arrow-pp::after {
    left: 11px;
    top: -4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2px 5px 2px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(9deg);
}
.arrow-pm {
    left: 3px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 100% 0 0 0;
    background: #fff;
}
.arrow-pm::after {
    left: 12px;
    top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2px 5px 2px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(87deg);
}
.arrow-mp {
    left: 3px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0 0 0 100%;
    background: #fff;
}
.arrow-mp::after {
    left: 12px;
    top: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2px 5px 2px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(91deg);
}
.arrow-mm {
    left: 3px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0 100% 0 0;
    background: #fff;
}
.arrow-mm::after {
    left: 11px;
    top: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2px 5px 2px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(165deg);
}

@media screen and (max-width : 767px){
    body {
        font-size: 16px;
    }
    header {
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
    }
    header,
    #wrapper{
        width: 100%;
    }
    header h1 {
        width: 70%;
        margin-top: 5px;
        margin-bottom: inherit;
        margin-right: auto;
        margin-left: auto;
        float: left;
        text-align: right;
    }
    header h1 img {
        width: 65%;
    }
    #main h1 {
        padding: 10px 20px 10px 20px;
        font-size: 21px;
        border-bottom: solid 3px #3a687e;
    }
    #main h1:before, #main h1:after {
        content: "";
        position: absolute;
        margin: auto;
    }
    #main h1:before {
        width: 8px;
        height: 8px;
        top: 3px;
        left: 8px;
        background: #3a687e;
        border-radius: 1px;
        transform: rotate(40deg);
    }
    #main h1:after {
        width: 5px;
        height: 5px;
        top: 15px;
        left: 3px;
        background: #3a687e;
        border-radius: 0.5px;
        transform: rotate(20deg);
    }
    h2 {
        font-size: 18px;
        border-bottom: solid 2.5px #3a687e;
        padding: 6px 15px;
    }
    h3 {
        font-size: 16px;
        border-left: solid 2.5px #3a687e;
        padding: 3px 9px 3px 14px;
    }
    img {
        max-width: 100%;
    }
    #main {
        width: 100%;
        padding: 0 3% 0 3%;
        box-sizing: border-box;
    }
    #main_visual {
        width: 100%;
        height: 290px;
        clear: both;
    }
    #sidebar {
        width: 100%;
        text-align: left;
        margin: 11px auto;
        padding: 0 3%;
        box-sizing: border-box;
    }
    .iframe-wrap{
        position: relative;
        width: 100%;
        padding-top: 1120px;
        margin-left: auto;
        margin-right: auto;
    }
    .iframe-wrap iframe{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }
    #particles-js{ position:absolute; width: 100%; height: 250px; background-color: #2a2c3e; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;}
    #topcatchcopy {
        position: absolute; left: 0; right: 0; top: 78px;bottom: 0; text-align: center;
        color: white;
        font-family: monospace;
}
    .menu {
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
        margin: 12px 2px 0 0;
        font-size: 0;
        float: right;
    }
    #menu3 {
        display: none;
    }
    .menu3-1,
    .menu3-2,
    .menu3-3 {
        box-sizing: border-box;
        display: block;
        width: 30px;
        height: 4px;
        margin: 6px 0;
        background-color: #333;
        border-radius: 4px;
        transition: all 0.4s;
    }
    #menu3:checked ~ .menu3-1 { /*checkboxがチェックされたときの挙動*/
        transform: translateY(10px) rotate(-45deg);
    }
    #menu3:checked ~ .menu3-2 {
        opacity: 0;
    }
    #menu3:checked ~ .menu3-3 {
        transform: translateY(-10px) rotate(45deg);
    }
    #global_navi {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;/*最前面に*/
        width: 75%;/*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 350px;/*最大幅（調整してください）*/
        height: 100%;
        background: #fff;/*背景色*/
        transition: 0.4s cubic-bezier(0.06, 0.94, 0.13, 0.96);/*滑らかに表示*/
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);/*左に隠しておく*/
        opacity: 0.9;
    }
    #global_navi ul li {
        font-size: 16px;
        width: 100%;
        padding: 0.5px;
        margin: 0px;
        box-sizing: border-box;
    }
    #global_navi ul li a {
        margin: 0;
        padding: 9px 2px;
    }
    #global_navi ul li .list1 {
        background-color: midnightblue;
        transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96);
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);/*左に隠しておく*/
    }
    #global_navi ul li .list2 {
        transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.025s;
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);/*左に隠しておく*/
    }
    #global_navi ul li .list3 {
        transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.05s;
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);/*左に隠しておく*/
    }
    #global_navi ul li .list4 {
        transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.075s;
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);/*左に隠しておく*/
    }
    #global_navi ul li .list5 {
        transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.1s;
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);/*左に隠しておく*/
    }
    #global_navi ul li .list6 {
        transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.125s;
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);/*左に隠しておく*/
    }
    .mobilemenutop {
        background-color: #fff !important;
        padding: 13px !important;
    }
    .mobilemenubottom {
        background-color: #fff !important;
        position: absolute;
        padding: 8px !important;
        bottom: 0;
    }
    #menu3:checked ~ #global_navi {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
    }
    #menu3:checked ~ #global_navi ul li .list1 {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
    }
    #menu3:checked ~ #global_navi ul li .list2 {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
    }
    #menu3:checked ~ #global_navi ul li .list3 {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
    }
    #menu3:checked ~ #global_navi ul li .list4 {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
    }
    #menu3:checked ~ #global_navi ul li .list5 {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
    }
    #menu3:checked ~ #global_navi ul li .list6 {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
    }
    #menu-background {
        background-color: #666; /*黒背景*/
        display: block;
        height: 100%;
        position: fixed;
        right: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        -webkit-transition: all 0.001s linear 0.02s; /*0.3s はアニメーションにかかる時間*/
        transition: all 0.001s linear 0s; /*0.3s はアニメーションにかかる時間*/
        z-index: -1;
    }
    #menu3:checked ~ #menu-background {
        opacity: 0.3;
        z-index: 1;
    }
}

@media screen and (min-width : 767px){
    #menu3 .menu3-1 .menu3-2 .menu3-3 {
        display: none;
    }
    .mobilemenutop {
        display: none;
    }
    .mobilemenubottom {
        display: none;
    }
}

@media screen and (min-width:430px) and (max-width:1024px){
    body,html{
    min-width: 980px;
}