@charset "utf-8";
html,
body {
    height: 100%;
    font-family: Meiryo, "Noto Sans Japanese", "ヒラギノ角ゴシック Pro", Hiragino Kaku Gothic Pro, "游ゴシック体", Yu Gothic, YuGothic, "ＭＳ Ｐゴシック", MS PGothic, Helvetica, Arial, sans-serif;
}

body {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    line-height: 1.5em;
    color: #333333;
    text-align: center;
}

body.PC {
    font-size: 16px;
}

img,
form,
ul,
li,
h1,
h2,
h3,
p,
a {
    margin: 0px;
    padding: 0px;
    border: solid 0px #cccccc;
}

img {
    vertical-align: bottom;
}

ul {
    list-style-type: decimal;
}

a {
    color: #D80000;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.Center {
    text-align: center;
}

.Right {
    text-align: right;
}

.Left {
    text-align: left;
}
.Clear {
    clear: both;
}

.Red {
    display: inline;
    color: #D80000;
}

.TopBorder {
    border-top: solid 1px #cccccc;
}

.BotBorder {
    border-bottom: solid 1px #cccccc;
}

.MB20 {
    margin-bottom: 20px!important;
}

.PTB50 {
    padding: 50px 0px!important;
}

.PLR10 {
    padding: 0px 10px!important;
}

/***** AdSpace *****/

.TopAdSpace {
    height: 50px;
    font-size: 12px;
    position: relative;
}

.TopAdSpace .AdText {
    display: table-cell;
    position: absolute;
    background: #000000;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    height: 100%;
    font-weight: bold;
    color: #ffffff;
}

.BotAdSpace .AdText {
    display: block;
    line-height: 30px;
    font-size: 12px;
}

.BotAdSpace #adg_79667 {
    margin-bottom: 20px!important;
}

.BotAdSpace #adg_79957 {
    margin-bottom: 20px!important;
}

.BotAdSpace #adg_79958 {
    margin-bottom: 20px!important;
}


/***** TopContents *****/

#TopContets {
    display: flex;
    flex-wrap: wrap; /* 要素を折り返す */
    align-items: center; /* 子要素を垂直に中央に配置 */
    width: 100%;
    min-height: 60px;
}

@media only screen and (min-width: 600px) {
    #TopContets {
        table-layout: fixed;
    }
}

#TopContets div {
    flex: 1; /* 各要素が同じ幅を持つようにする */
    vertical-align: middle;
}

#TopContets .TopLogo a img {
    height: 50px;
}

#TopContets .TopMenu {
    text-align: right;
}

#TopContets .TopMenu a {
    padding-right: 10px;
}

@media only screen and (min-width: 600px) {
    #TopContets .TopMenu a {
        padding-right: 20px;
    }
}

#TopContets .TopMenu a img {
    height: 40px;
}

/* AdSense用 */
#TopContets div.google-auto-placed {
    flex-basis: 100%; /* 最後の要素 (c) の幅を100%にする */
}


/***** Welcome *****/

#Welcome {
    margin-top: 4px;
    line-height: 2em;
}

#Welcome span {
    font-weight: bold;
}


/***** UserData *****/

#UserData {
    display: table;
    width: 100%;
    height: 60px;
}

#UserData div {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

#UserData div.content {
    font-size: 28px;
    font-weight: bold;
    padding-top: 6px;
}

#UserData div.content span {
    font-size: 12px;
}


/***** ContentTitle *****/

#ContentTitle {
    width: 100%;
    font-size: 16px;
    line-height: 40px;
    color: #ffffff;
    background-color: #D80000;
}

.ContentTitle {
    width: 100%;
    font-size: 16px;
    line-height: 40px;
    color: #ffffff;
    background-color: #D80000;
}


/***** MainContents *****/

#MainContents {
    display: table;
    width: 100%;
}


/***** BottomContents *****/

#BottomContents {
    font-size: 12px;
    background: #f0f0f0;
    padding: 10px 0px 30px;
}

#BottomContents a {
    text-decoration: underline;
    padding: 0px 5px;
}

#BottomContents span {
    display: block;
    padding-top: 10px;
}

#EjoicaCaution {
    font-size: 10px;
    background: #f0f0f0;
    padding: 0px 10px 30px;
    text-align: left;
    line-height: 1.4em;
}