/*
カラーパレット候補
#005694

#306B34
#157F1F


#D00000
#ED1C24
#CE2D4F

#4E0250


#CB3D00
*/

/* メニュー（全体更新後menu.cssに反映） */

#menu{
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0px;
    background-color: transparent;
    box-shadow: none;
    padding: 0px;
    font-size: 0;
    list-style-type: none;
    text-align: center;
    box-sizing: border-box;
    letter-spacing: -0.5em;
    position: relative;
    z-index:2;
}

#menu li{
    width: 150px;
    display: inline-block;
    padding: 1px;
    margin: 0px;
    text-align: center;
    letter-spacing: normal;
}

#menu li a{
    width: auto;
    color: #202124;
    font-size: 0.95rem;
    margin: 0px;
    padding: 10px 0px;
    text-decoration: none;
    display: block;
    position: relative;
}

#menu li a:hover{
    background-color: #eee;
/*    color: #0b8f5e;*/
    color: #333;
    font-weight: bold;
    transition: 0.5s ;
}

/* メニューアニメーション（ボトムライン） */
#menu a:before,
#menu a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
#menu a:before {
    bottom: 0;
    display: block;
    height: 3px;
    width: 0%;
    content: "";
    background-color: #0b8f5e;
}

/* 汎用 */
body {
    background-color: #f9f9f9;
    font-size: 1.1rem;
}

#menu li a {
    font-size: 1.1rem;
}

/* メインビジュアル */
#mvbox {
    background-color: #0b8f5e;
    height: 390px;
    width: 100%;
    /* overflow: hidden; */
    position: relative;
}

#mvbox #mv {
    position: absolute;
    right: 0;
}

#mvbox #mvlogo {
    position: absolute;
    left: 0;
    bottom: 0;
}

#mvbox #mvlogo img {
    max-width: 600px;
}

/* ボックス型箇条書き */
ul.boxBulletWrap {
    display: flex;
    gap: 2em;
    justify-content: center;
    margin: 1em;
    box-sizing: border-box;
    padding: 0;
}

.boxBulletWrap li {
    display: inline-block;
    list-style: none;
    background-color: #eee;
    width: 200px;
    height: 200px;
    font-size: 0.9em;
    line-height: 1.5em;
    /* padding: 1em; */
    box-sizing: border-box;
    position: relative;
}

.boxBulletWrap li img.bulletIcon {
    display: block;
    margin: auto;
    margin-top: 1em;
    width: 80px;
}

.boxBulletWrap li p{
    padding: 1em;
    box-sizing: border-box;
    /* position: absolute; */
    /* bottom: 0; */
    margin: 0;
}

.svgCol1 {
    /* #4E0250 */
    filter: invert(13%) sepia(34%) saturate(5232%) hue-rotate(282deg) brightness(81%);
}

.svgCol2 {
    /* #005694 */
    filter: invert(19%) sepia(86%) saturate(2061%) hue-rotate(187deg) brightness(97%) contrast(101%);
}

.svgCol3 {
    /* 157F1F */
    filter: invert(17%) sepia(59%) saturate(6542%) hue-rotate(139deg) brightness(93%) contrast(84%);
}


/* トップページのみのスタイル */
h1 {
    text-align: center;
    color: #333;
    border-bottom: 3px solid #ccc;
    position: relative;
    padding-bottom: 10px;
}

h1::after {
    padding-bottom: 10px;
    content: "　";
    width: 33%;
    border-bottom: 3px solid #0b8f5e;
    position: absolute;
    left: 33%;
}

h2 {
    border: none;
    box-sizing: border-box;
    width: 100%;
}

h2::after {
    border: none;
}

/* 汎用 */
p {
    margin: 1em 0;
}

.mb1em {
    margin-bottom: 1em;
}

.innerWrap {
    max-width: 1000px;
    padding: 1em;
    margin: auto;
}

.innerWrap.bgRight {
 box-sizing: border-box;
 padding: 0;
 position: relative;
}

.innerWrap.bgRight::after{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    content: " ";
    height: 100%;
    width: 400px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    opacity: .5;
}

.innerWrap.bgRight.bg1::after{
    background-image: url('/top/cadimg.png');
    background-position: center right;
}

.innerWrap.bgRight.bg2::after{
    background-image: url('/top/statistics.png');
    background-position: top center;
}

.innerWrap.bgRight.bg3::after{
    background-image: url('/top/dbapp.png');
}

.innerWrap.bgRight.bg4::after{
    background-image: url('/top/webpage.png');
    background-position: top left;
}

.bgCont {
    position: relative;
    z-index: 100;
}

a.linkButton {
    display: inline-block;
    box-sizing: border-box;
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    line-height: 1;
    border: 2px solid #0033cc;
    text-decoration: none;
    transition: 0.3s;
}

a.linkButton:hover {
    background-color: #0033cc20;
    color: #0033cc;
    transition: 0.3s;
}

a.linkButton:visited {
    color: #0033cc;
}

.bgDark,
.bgDark p,
.bgDark h2,
.bgDark h1 {
    color: white;
}

.bgDark a:link {
    color: white;
}

.bgDark a:visited {
    color: #ccc;
}

.bgDark strong {
    color: yellow;
}


.bgCont {
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
}

.bgColorWrap {
    box-sizing: border-box;
    color: white;
    width: 100%;
}

.bgColor1 {
    background-color: #4E0250;
}

.bgColor2 {
    background-color: #005694;
}


.bgColor3 {
    background-color: #157F1F;
}

.bgColor4 {
    background-color: #CB3D00;
}

ul.borderList {
    padding: 0;
}

ul.borderList li {
    list-style: none;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    padding: 0.5em 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

ul.borderList li:last-child {
    border-bottom: none;
}

ul.borderList li span.date {
    display: inline-block;
    box-sizing: border-box;
    white-space: nowrap;
    width: 10%;
}

ul.borderList li p {
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    width: calc(88% - 1em);
}

/* その他 */
#topMsgCont {
    margin: 0;
    padding: 0;

    background-color: rgba(246, 246, 246, 0.9);
    width: 100%;
    position: relative;
}

#topNews {
    padding: 10px;
    width: auto;
    height: 80px;
    overflow-y: scroll;
    font-size: 0.8rem;
    line-height: 120%;
}

table.list_2col caption{
    display: none;
}

table.list_2col th,
table.list_2col td{
    padding: 0.5em;
    font-size: 1rem;
}

@media (max-width: 600px) {
    #header {
        display: block;
    }

    #mvbox {
        background-color: #0b8f5e;
        height: 100px;
        width: 100%;
        /* overflow: hidden; */
        position: relative;
    }
    
    #mvbox #mv {
        height: 100%;
    }
    
    #mvbox #mvlogo {
        position: absolute;
        display: block;
        width: 100%;
    }

    #mvbox #mvlogo img{
        width: 95%;
    }

    ul.boxBulletWrap {
        display: block;
        margin: 1em;
    }

    .boxBulletWrap li {
        margin-bottom: 1em;
    }

    table.list_2col tr {
        border-bottom: 1px solid #ccc;
    }

    table.list_2col td {
        text-align: center;
    }

    table.list_2col td:nth-child(odd) {
        background-color: #eee;
    }

    ul.borderList li {
        display: block;
    }

    ul.borderList li span.date {
        display: block;
        box-sizing: border-box;
        white-space: nowrap;
        width: 100%;
    }

    ul.borderList li p {
        display: block;
        width: 100%;
        padding-left: 1em;
    }

}