@charset "UTF-8";
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(255, 255, 255);
    color:rgb(9, 142, 251);
    flex:100%;
    margin: 0;
    padding: 0;
}

.common_header {
    flex:100%;
}

.common_menu2 {
    flex:100%;
}

.common_hero_header {
    flex:100%;
}

.common_information {
    display:flex;
    flex:100%;
    flex-flow: column;
}

a {
/*color:#00fbff;*/
color:#9012ff;
text-decoration:none;
}

/*a:link {
color:rgb(0, 255, 255);
text-decoration:underline;
}

a:visited {
color:#dd00ff;
text-decoration:underline;
}

a:hover {
color:#f375f3;
text-decoration:underline;
}

a:active {
color:#000000;
text-decoration:none;
}
*/
img
{
    display: block;
    width:200px;
}

table{
    text-align: center;
    border:solid black 1px;
    border-collapse:collapse
}

th,td {
    text-align: center;
    border:solid black 1px;
}

.container {
    display: flex;
    flex-flow: row wrap;
    flex-direction: row-reverse;
    margin: 0px auto;
}

.header {
    flex: 0 0 100%;
    color:#9012ff;
    border-bottom: 2px solid #9012ff;
    padding-bottom:1px;
}

.header-container {
    display: flex;
    flex-flow: row;
    flex-direction: row;
    justify-content:space-between;
}

.header-logo {
    background-color: #000000;
    display:flex;
    justify-content: center;
}

.site-map {
    justify-content: right;
}

.header-logo2 {
    display:flex;
    justify-content: left;
}

.header-logo img{
    display:block;
    width:250px;
}

.header-logo2 img{
    display:block;
    width:250px;
}

.menu-container {
    display: flex;
    flex-flow: row wrap;
    flex-direction: row;
    margin:2 auto;
}

.h-menu {
    flex: 1px;
    margin: 0px 2px 0px 2px;
    text-align:center;
    background: #ffeafd;
}

.f-menu {
    flex: 0px;
    margin: 0px 2px 0px 2px;
    text-align:center;
    justify-content: center;
}

.menu2 {
    flex:0 0 100%;
    flex-flow: column;
    flex-direction: column;
    background-color: #ffeafd;
    display:none;
    clear:both;
}

.faq {
    display:none;
    clear:both;
}

.menu2-container {
    
    color:#9012ff;
    display: flex;
    flex-flow: row wrap;
    flex-direction: row;
}

.h-menu2 {
    flex: 10px;
    margin: 0px 2px 0px 2px;
    text-align:center;
    background: #ffeafd;
}

.menu2 h2 {
    color:#9012ff;
    border-left:0px;
}

.left {
    flex:100%;
    justify-content: left;
    background-color: #ffeafd;
}

.content {
    flex:100%;
    display: flex;
    flex-flow: row wrap;
    flex-direction: row-reverse;
    margin: 0px 100px 0px 100px;
}

.main {
    flex:1;
}

.side {
    flex:0 0 300px;
    margin:3px 0px 0px 50px;
}

.side-container {
    display:flex;
    flex-flow: column wrap;
    flex-direction: column;
}
.side img{
    display:block;
    width:100%;
    margin:0px 0px 20px 0px;
}

.item-infomation {
    border:solid 2px #b651b4;
    display:flex;
}

.info-container {
    display:flex;
    flex-flow: column;
    flex-direction: column;
    flex:100%;
}

.infomation {
    display:flex;
    flex-flow: row;
    flex-direction: row;
    flex:100%;
    /*margin:20 auto;
    font-size:8px;*/
}

.info-date {
    flex:0.4px;
    margin:0px 0px 0px 20px;
}

.info-content {
    flex:4;
    margin:0px 0px 0px 20px;
}

.radius {
  border-radius: 10px;
}

.item-container {
    display:flex;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item-box {
    display:block;
    flex: 0 0 340px;
    flex-flow: column;
}

.item {
    display:block;
    background-image:url("");
    flex: 0 0 340px;
    margin:10px;
    border-bottom:dotted 0.25px #b5b5b5;
    overflow-wrap: break-word;
}

h1{
    font-size: 2em;
    padding: 0.5em;
    color: #9012ff;
    background: #ffeafd;
}

h2{
    font-size: 1.5em;
    padding: 0.5em;
    color: #9012ff;
    background: #ffeafd;
    border-left: solid 3px #b651b4;
}

h3{
    font-size: 1.17em;
    padding: 0.5em;
    color: #9012ff;
    background: #ffeafd;
    border-bottom: solid 3px #b651b4;
}

h4{
    font-size: 1em;
    padding: 0.5em;
    color: #9012ff;
    background: #ffeafd;
    border-bottom: solid 3px #b651b4;
}

h5{
    font-size: 0.83em;
    padding: 0.5em;
    color: #9012ff;
    background: #ffeafd;
    border-bottom: solid 3px #b651b4;
}

h6{
    font-size: 0.75em;
    padding: 0.5em;
    color: #9012ff;
    background: #ffeafd;
    border-bottom: solid 3px #b651b4;
    border-radius: 10px;
}

.item-related-sites {
    flex:100%;
}

.related-sites-container {
    background:#ffeafd;
    display:flex;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:10px;
}

.related-sites-container a {
    background:white;
    /*white-space: nowrap;*/
    margin: 5px 10px 5px 10px;
    width: 16%;
    height: 50px;
    line-height:50px;
    text-align:center;
    border-radius:10px;
}
/*
.related-site {
    background:white;
    white-space: nowrap;
    margin: 5px 10px 5px 10px;
    width: 16%;
    height: 50px;
    line-height:50px;
    text-align:center;
    border-radius:10px;
}
*/
.AD-container {
    flex:100%;
    margin:0px 100px 0px 100px;
}

.AD-container h2 {
    border:0px;
    text-align:center;
}

.AD-content {
    display:flex;
    flex-flow: row wrap;
    flex-direction: row;
    justify-content: left;
    margin-left:80px;
}

.AD {
    margin:10px;
}

footer{
    flex:100%;
    font-size: 0.75em;
    border-top:2px solid #9012ff;
    background: #ffeafd;
}

.footer-container {
    flex:100%;
}
/*
.footer-top {
    background-image:url(/yomi-city/icon/footer-rogo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding:150px;
}
*/
.footer-bottom {
    flex:100%;
    font-size: 0.75em;
    color: black;
    /*background-color: rgb(109, 109, 109);*/
    padding: 0.5rem;
    text-align: center;
}

.black{
    color:#000000;
}

.lightbule {
    color:#eaf3ff;
}