body{background-color:#fff;background-repeat:repeat-y;background-position:50% 50%;font-family:times;color:#000;text-align:center;}
div#container{margin-left:auto;margin-right:auto;text-align:center;background-repeat:no-repeat;background-attachment:fixed;}
/* .menu{height:50px;line-height:25px;background-image:url("../images/menubar.jpg");background-repeat:repeat-x;background-position:50% 0%;font-size:15px;padding-top:5px;} */
div#outline{margin:0px 0px;text-align:center;border-color:#bbb;border-style:double;border-width:0px;}
div.bg_program{background-position:50% 0%;}
div.bg_about{background-position:50% 50%;}
div.bg_music{background-position:50% 50%;}
div.bg_links{background-position:50% 90%;}
div.contentBlock{margin:10px auto;padding-top:20px;padding-bottom:20px;background-color:#FFF;}
div.subContent{marign:10px auto;padding-top:20px;padding-bottom:20px;background-color:#fff;}
div.board{margin:-15px auto;border-style:inset;border-color:#777;background-color:#333;}
div.pageTitle{background-color:#fff;padding:5px 0px 5px 0px;font-weight:bold;margin:0px auto 10px auto;text-align:center;}
div.sectionTitle{color:#000;font-weight:bold;margin:20px auto 20px auto;text-align:center;}
div.subsectionTitle{color:#000;font-weight:bold;padding:20px auto 20px auto;text-align:center;}
div.painting{padding-top:20px;}
div.code{padding:10px 20px 10px 20px;border-width:3px;border-style:double;border-color:#ccc;background-color:#eee;}
a{color:#369;text-decoration:none;font-weight:bold;}
a:hover{background:none;text-decoration:underline;color:#7ad;}
a.tag{background-color:#6680d8;text-decoration:none;color:#eee;border:0px solid #33a;border-radius:12px;padding:5px 8px;font-weight:normal}
a.tag:hover{background-color:#49a8fb;}
.amenu{text-decoration:none;padding-left:12px;padding-right:12px;}
.amenu:link{color:#666;}
.amenu:visited{color:#666;}
.amenu:hover{color:#000;text-decoration:none;background-color:#fff;}
.amenu:active{color:#666;}
.aimg{text-decoration:none;border:none;background:none;}
.aimg:hover{text-decoration:none;background:none;}
/* h1{margin:10px 10px;color:#333;font-size:28px;text-align:center;padding-top:5px;border-color:#aaa;border-width:2px;border-bottom-style:dotted;background-repeat:no-repeat;background-position:50% 50%;} */
h1 {
margin:  0;             /* デフォルトCSS打ち消し */
font-size:  24px;       /* 文字サイズ指定 */
border-bottom: 5px solid black;  /* 線指定 */
padding-bottom:  1px;   /* 余白指定 */
margin-bottom: 15px;    /* 周りの余白指定 */
color:black;
}
/* h2{padding: 5px 15px;color:#eee;font-size:25px;border-color:#aaa;border-width:5px;border-style: double;background-color: #466} */
h2 {
font-size:22px;
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
h3{
font-size:20px;
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}

h4{
    font-size:18px;color:#333;border-color:#aaa;border-bottom-style: dotted;border-width: 1px
}
img{max-width:100%;max-height:100%;border-color:#aaa;vertical-align:middle;}
iframe{max-width:100%;}
.clear{clear:both;}
ul{list-style-type:square;}
font.title{padding-left:20pt;padding-right:20pt;background-color:#00000f;font-family:times;border-style:ridge;border-color:gray;border-width:2px;}
.english{color:#777;}
table{border-collapse: collapse;border-style:solid;border-width:1px;}
td{}
th{background-color: #eee;padding:5px;}
ul.breadcrumb{list-style:none;padding:0;}
ul.breadcrumb li{display:inline;font-size:10pt;}
ul.breadcrumb li+li:before{padding-left:2px;padding-right:2px;content:">\00a0";}
.ref{font-weight:bold;padding-top:20px;padding-bottom:20px;}
.ref:before{content: "Reference" }
.refItem{font-weight:normal;padding-left:20px;}
.refItem:before{content: "-" }

.menuList{
    font-size: 10px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.menuElem{
    float: left;
    border-right: 1px solid #bbb;
    border-radius: 5px;
    border: 1px solid #bbb;
    height: 22px;
    min-width: 150px;
    background-color: #f5f5f5;
}

.menuLink{
    display: block;
    text-align: center;
    padding: 3px 5px;
    text-decoration: none;
}

.menuLink:hover{
    background-color: #444;
    color:#eee;
    font-weight:bold;
}

.menuLinkCurrent{
    background-color: #444;
    color:#eee;
    font-weight:bold;
}


.flexBoxContainer {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}

.flexBox {
    display: block;
    width: 49.5%;
    height: 350px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    border: 1px solid #CCC;

    margin: 3px 1px;
    background: rgb(255, 255, 255);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    border-radius: 10px;/*角の丸み*/
}

.flexBox img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto 0;
    padding: 0;
    object-fit: cover;
    border: 0px solid #CCC;
}

.flexBoxInner1 {
    position: relative;
    width: 100%;
    display: block;
    border: 0px solid #00f;
    height: 220px;
}

.flexBoxInner2 {
    display: block;
    padding-left: 5px;
    padding-right: 5px;
    border: 0px solid #f00;
}

.flexBoxInnerDesktopAdv {
    display: block;
    width: 100%;
    height:100%;
}

.flexBoxInnerMobileAdv {
    display: block;
    width: 0%;
    height:0%;
}

.flexBoxDigestComment{
    display:block;
}


.flexBoxFixed {
    display: block;
    width: 20%;
    height: auto;
    margin: 0px;
    padding: 0 0 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    border: 1px solid #CCC;
}

.flexBoxFixedDigestComment{
    display:none;
}

/* レスポンシブの設定。小さいスクリーンでスタイルを変える */
@media screen and (max-width: 600px) {
    .flexBox {
        width: 100%;
        height:auto;
        display: table-row;
        margin: 0px;
        padding:0px;
    }

    
    .flexBoxInnerDesktopAdv {
        display: block;
        width: 0%;
        height:0%;
    }

    .flexBoxInnerMobileAdv {
        display: block;
        width: 100%;
        height:100%;
    }

    .flexBox img {
        float: left;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .flexBox5 {
        width: 100%;
        display: table-row;
    }

    .flexBox5 img {
        float: left;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }    

    .flexBoxInner1 {
        display: table-cell;
        width: 110px;
        height: 110px;
    }

    .flexBoxInner2 {
        display: table-cell;
        vertical-align: top;
        width:auto;
        padding-left: 10px;
        height: 100%;
    }

    a.tag{
        font-size:8px;
        display:none;
    }

    .flexBoxDigestComment {
        display:none;
    }
}

@media screen and (min-width: 960px) {
    .flexBox {
        width: 33%;

    }    
}

@media screen and (min-width: 1280px) {
    .flexBox {
        width: 24.5%;

    }    
}

.flexBoxFixed {
    width: 24%;
    margin: 2px;
    word-wrap: break-word;
    border: 1px solid #CCC;
    border-width: 0px;
}

.flexBoxFixed img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flexBoxFixedInner1 {height:110px}

.flexBoxFixedInner2 {}
.flexBoxFixedInner2 a{color:black}

/* レスポンシブの設定。小さいスクリーンでリストスタイルに変える */
@media screen and (max-width: 600px) {

    .flexBoxFixed {
        width: 100%;
        display: table-row;
    }

    .flexBoxFixed img {
        float: left;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .flexBoxFixedInner1 {
        display: table-cell;
        width: 130px;
        height: 80px;
    }

    .flexBoxFixedInner2 {
        display: table-cell;
        vertical-align: middle;
        font-size:14px;
        height: 100%;
        height:80px
    }
}


.flexBoxFixedHalf {
    width: 49%;
    margin: 2px;
    word-wrap: break-word;
    border: 1px solid #CCC;
    border-width: 0px;
}

.flexBoxFixedHalf img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flexBoxFixedHalfInner1 {height:110px}

.flexBoxFixedHalfInner2 {}
.flexBoxFixedHalfInner2 a{color:black}

/* レスポンシブの設定。小さいスクリーンでリストスタイルに変える */
@media screen and (max-width: 600px) {

    .flexBoxFixedHalf {
        width: 100%;
        display: table-row;
    }

    .flexBoxFixedHalf img {
        float: left;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .flexBoxFixedHalfInner1 {
        display: table-cell;
        width: 130px;
        height: 80px;
    }

    .flexBoxFixedHalfInner2 {
        display: table-cell;
        vertical-align: middle;
        font-size:14px;
        height: 100%;
        height:80px
    }
}