* {
    /*font-family: 'Meiryo UI',Meiryo,'MS PGothic',Osaka;*/
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 100%;
    letter-spacing: 0.03em;
}

body {
    background-color: #FFFFFF;
    color: #444444;
    font-size: 0.8em;
    margin: 0;
    overflow: auto;
}

form {
    margin: 0;
}

pre {
    white-space: pre-wrap;
}

#baseBody {
    width: 100%;
}

button {
    cursor: pointer;
}

.allCamvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;

    background-color: black;
    /*	opacity: 0.5;*/
}

div#mes_pos {
    width: 100%;
    border: 0px solid gray;
    text-align: center;
}

div#mes_box {
    overflow: scroll;
    width: 100%;
    height: 160px;
    border: 1px solid gray;
    text-align: left;
}

div#LOGINFORM_AREA {
    border: 1px double gray;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 320px;
}

div#in_form {
    text-align: center;
}

div#create_user {
    border: 1px double gray;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 320px;
}

div#info {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 640px; 
}

div#attention {
    border: 1px double #FF0033;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
    font: normal bold 120%/150% serif;
    color: #ea1414;
    /*	color: #FF3366;*/
}

div.pholder {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
}

div.placeholder {
    background-color: transparent;
    color: #999999;
    margin-left: 9px;
    margin-top: 6px;
    white-space: nowrap;
}

div.openWindow {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    margin: auto;
    padding: 12px;
    text-align: center;
    background-color: rgba(64, 64, 64, 0.8);
    overflow: auto;
    overflow-y: scroll;
    transition: opacity 0.5s, transform 0s 0.5s;
/*    transform: scale(0);*/
}

div#contentWindow {
    background-color: #FFF;
    width: 400px;
    min-height: 400px;
    margin: auto;
    padding-bottom: 24px;
}

.contentWindow {
    background-color: #FFF;
    width: 400px;
    min-height: 400px;
    margin: auto;
    padding-bottom: 24px;
}

input#user_name {
    ime-mode: disabled;
}

input#login {
}

input#form_clear {
}

/*リンクの色*/
a:link { 
    color: #0000ff;
}

/*訪問済みリンクの色*/
a:visited {
    color: #aa0055;
}

/*マウスオン時のリンクの色*/
a:hover {
    color: #ff0000;
}

/*クリックしている時のリンクの色*/
a:active {
    color: #00ff00;
}

/*アンカー無効化*/
a.disable {
    text-decoration: none;
    color: #0000ff;
    cursor: pointer;
}

a.disable:hover {
    color: #0000ff;
}

a.disable:visited {
    color: #0000ff;
}

a.disable:active {
    color: #0000ff;
}

.loadingImage {
    z-index:300;
    padding: 0px;
    background-image: url(../images/loading.gif);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: table-cell;
    vertical-align: middle;
    animation: fadeIn 1s ease-in 0.5s 1 normal both;
    -webkit-animation: fadeIn 1s ease-in 0.5s 1 normal both;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.noscroll {
    position: absolute;
    overflow: hidden;
}

.hr {
    border-color: #CCCCCC;
    border-style: solid none none;
    border-width: 1px 0 0;
    height: 1px;
    margin: 8px 0;
    padding: 1px 0;
    position: relative;
}

.spacer {
    height: 1px;
    margin: 8px 0;
    padding: 1px 0;
    position: relative;
}

.linkbutton_base {
    height: 28px;
    margin-top: 10px;
    text-align: left;
}

.linkbutton_image {
    border: 0 none;
    margin: 0;
    padding: 0;
}

.widthCenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

/* 注： centering クラスを使用する場合、必ず親要素に position:relative を指定しておく*/

.centeringBase {
    position:relative;
}

.centering {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.centeringX {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.centeringY {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.alignLeft {
    text-align: left;
}

#disp_changer {
    text-align: center;
    width: 140px;
}

#go_back_parent {
    text-align: right;
}

#go_back {
    text-align: center;
}

.TITLE_LOGO {
    font: normal bold 140%/180% serif;
    color: #666666;
}

.ITEM_NAME {
    font: normal bold 120%/150% serif;
}

.ITEM_TEXT {
    width: 128px;
    ime-mode: disabled;
    text-align: left;
    font-size: 80%;
}

.MESSAGE_TITLE {
    font: normal bold 140%/180% serif;
    text-decoration: underline;
}

.STATE {
    width: 360px;
    border: 0px double gray;
    margin-left: 10%;
    margin-right: 10%;
    text-align: left;
    font: normal normal 100%/120% serif;
}

.ATTENTION {
    border: 1px double #FF0033;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
    font: normal bold 120%/150% serif;
    color: #ea1414;
    /*	color: #FF3366;*/
}

.box_caution_multiple {
	width: 90%;
    box-shadow: 5px 5px 10px 0px #333333, 5px 5px 10px 0px #333333 inset;
    padding: 20px;
    border-radius: 15px;
    border: 8px solid #cc6666;
    background-color: #ffcccc;
    /*    margin: 0em 0em 1em 1em;*/
}

.warning {
    /*font-family: "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;*/
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    background-color: #F03;
    width: 80%;
    padding: 3px;
    text-align: center;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
}

.TITLE {
    text-align: center;
    font-size: 120%;
    font-weight: bold;
}

.TITLE_MES {
    text-align: left;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.edit_box {
    border: 1px double gray;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 320px;
}

.button1 {
    text-align: center;
    font-size: 80%;
    border: 1px solid gray;
    cursor: pointer;
}

.buttonNomal {
    text-align: center;
    font-size: 100%;
    border: 1px solid gray;
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer;
}

.pageMatchFlame {
/*
    width: 100%;
    height: 100%;
*/
    border: 0;
}

.inline-table { 
    display: inline-table;
    border-collapse: collapse;
}

.table { 
    display: table;
    border-collapse: collapse;
}

.caption { 
    display: table-caption;
    font-weight: bold;
/*    width: 100%;*/
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
    border: solid 1px black;
    min-width: 24px;
    text-align: center;
}

.disp-hidden { visibility: hidden; }
.disp-none { display: none; }
.disp-inline { display: inline; }
.disp-inblock { display: inline-block; }
.disp-block { display: block; }
.disp-flex { 
    display: -webkit-box;   /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
    display: -webkit-flex;  /* Chrome 21-27 */
    display: -moz-box;      /* Firefox 2-21 */
    display: -ms-flexbox;   /* IE9 */
    display: flex;
}

.flex-start {
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
            -ms-flex-pack: start;
}

.flex-end {
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
            -ms-flex-pack: end;
}

.flex-center {
  -webkit-justify-content: center;
          justify-content: center;
            -ms-flex-pack: center;
}

.flex-space-between {
  -webkit-justify-content: space-between;
          justify-content: space-between;
            -ms-flex-pack: space-between;
}

.flex-space-around {
  -webkit-justify-content: space-around;
          justify-content: space-around;
            -ms-flex-pack: space-around;
}

.wsize-full { width: 100%; }
.wmax-90p { max-width: 90%; }
.wmax-80p { max-width: 80%; }
.wmax-60p { max-width: 60%; }
.wmax-50p { max-width: 50%; }
.wmax-800px { max-width: 800px; }
.wmax-640px { max-width: 640px; }
.wmax-480px { max-width: 480px; }
.wmax-320px { max-width: 320px; }
.wmin-90p { min-width: 90%; }
.wmin-80p { min-width: 80%; }
.wmin-60p { min-width: 60%; }
.wmin-50p { min-width: 50%; }
.wmin-32 { min-width: 32px; }

.height32{ height: 32px; }
.height64{ height: 64px; }
.height128{ height: 128px; }
.height256{ height: 256px; }

.font-xlarge { font-size: x-large; }
.font-large { font-size: large; }
.font-larger { font-size: larger; }
.font-smaller { font-size: smaller; }
.font-small { font-size: small; }
.font-xsmalle { font-size: x-small }
.font-bold { font-weight: bold; }

.bd1 { border: 1px solid gray; }
.nowrap { white-space: nowrap; }
.inline-box { display: inline; }
.border0 { border-width: 0px; }
.border-none { border-style: none; }

.align-left { text-align: left; }
.align-center { 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.align-right { text-align: right; }
.align-top { vertical-align: top; }
.align-middle { 
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
}
.align-bottom { vertical-align: bottom; }

.both-left { float: left; }
.both-clear { clear: both; }

.bg_white { background-color: #ffffff; }
.bg_lightblue { background-color: lightblue; }
.bg_lightcyan { background-color: lightcyan; }
.bg_lightgreen { background-color: lightgreen; }
.bg_lightgray { background-color: lightgray; }
.bg_lightpink { background-color: lightpink; }
.bg_lightyellow { background-color: lightgoldenrodyellow; }
.bg-while { background-color: #fbf7f7; }
.bg-tranceport { background-color: transparent; }
.cursor-pointer { cursor: pointer; }

.ime-auto { ime-mode: auto; }
.ime-active { ime-mode: active; }
.ime-inactive { ime-mode: inactive; }
.ime-disabled { ime-mode: disabled; }

.color-black { color: #101010; }
.color-red { color: #ea1414; }
.color-green { color: #14db0c; }
.color-blue { color: #405bff; }
.color-white { color: #fbf7f7; }

.transparency-09 { opacity: 0.9; }
.transparency-08 { opacity: 0.8; }
.transparency-07 { opacity: 0.7; }
.transparency-06 { opacity: 0.6; }
.transparency-05 { opacity: 0.5; }
.transparency-04 { opacity: 0.4; }
.transparency-03 { opacity: 0.3; }
.transparency-02 { opacity: 0.2; }
.transparency-01 { opacity: 0.1; }

.pre-wrap { white-space: pre-wrap; }

.align-left table,
.align-left div,
.align-left p {
    margin-right: auto;
    margin-left: 0px;
}

.align-center table,
.align-center div,
.align-center p {
    margin-right: auto;
    margin-left: auto;
}

.align-right table,
.align-right div,
.align-right p {
    margin-right: 0px;
    margin-left: auto;
}

.align-top table,
.align-top div,
.align-top p {
    margin-top: 0px;
    margin-bottom: auto;
}

.align-middle table,
.align-middle div,
.align-middle p {
    margin-top: auto;
    margin-bottom: auto;
}

.align-bottom table,
.align-bottom div,
.align-bottom p {
    margin-top: auto;
    margin-bottom: 0px;
}

.panel-frame {
    text-align: left;
    max-width: 90%;
}

.panel-object {
    display: inline;
    white-space: nowrap;
}

.panel-base {
    width: 160px;
    height: 160px;
}

.float-box {
    display: inline-table;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 2;
    border: #e0e0e0 4px solid;
    background-color: white;
    padding: 6px;
    margin: 6px;
    transition: 0.2s;
    transition: -webkit-flex 500ms ease-out;
    transition: -moz-flex 500ms ease-out;
    transition: -ms-flex 500ms ease-out;
    transition: -o-flex 500ms ease-out;
    transition: flex 500ms ease-out;
}

.float-inflex {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

.float-parent {
    position: relative;
}

.float-child-box {
    display: inline-table;
    position: absolute;
    left: 0px;
    z-index: 2;
    border: #e0e0e0 1px solid;
    background-color: white;
    padding: 2px;
}

.float-child {
    display: inline-table;
    position: relative;
    /*top: 80px;*/
    left: -160px;
    z-index: 2;
    border: #e0e0e0 1px solid;
    background-color: white;
    padding: 2px;
}

.float-child-inbox {
    position: absolute;
    top: -8px;
    left: -16px;
    border: #e0e0e0 2px solid;
    background-color: white;
    padding: 2px;
    box-shadow: 8px 8px 16px;
    white-space: nowrap;
}

.float-child-center {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    border: #e0e0e0 1px solid;
    background-color: white;
    padding: 2px;
}

.float-header {
    height: 24px;
    margin-bottom: 16px;
    padding: 0px;
}

.float-header-title {
    float: left;
    margin-left: 32px;
    font-size: 120%;
    font-weight: bold;
}

.float-closer {
    width: 24px;
    float: right;
    border: #e0e0e0 2px solid;
    padding: 0px;
    padding-bottom: 2px;
    font-size: 80%;
    cursor: pointer;
    text-align: center;
}

/*

transition-timing-functionパラメータ関数
linear	最初から最後まで同じ速さで変化します。
ease	最初すばやく、後半ゆっくり変化します。
ease-in	最初ゆっくり、後半すばやく変化します。
ease-out	最初すばやく、後半ゆっくり変化します。ease に似ていますが、開始時は ease-out の方が若干素早いです。
ease-in-out	最初ゆっくり、中盤すばやく、後半ゆっくり変化します。
step-start	最初からアニメーション終了時の状態にします。
step-end	最後に一瞬でアニメーション終了時の状態にします。
steps(n, flag)	n段階で変化します。flag に start を指定すると、開始直後に 1段階目の変化が発生します。end を指定すると、最初のインターバル経過後に 1段階目の変化が発生します。デフォルトは end です。
cubic-bezier(x1, y1, x2, y2)	[0.0, 0.0] から始まり、[x1, y1], [x2, y2] を経由して [1.0, 1.0] に到達する三次ベジェ曲線に従い変化します。X軸は時間経過率を、Y軸は変化率を示します。x1, x2 は、0.0〜1.0 の範囲で指定します。y1, y2 は 1.0 を超えたり負の値を指定することができます。
*/
.baseTransition {
    -moz-transition-property: width, height, opacity;
    -webkit-transition-property: width, height, opacity;
    -o-transition-property: width, height, opacity;
    -ms-transition-property: width, height, opacity;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -moz-transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
}

.T1 {
    font-size: 14px;
    font-weight: bold;
    color: #101010;
    line-height: normal;
}

/*デバイスの横幅が979px以下の場合*/
@media only screen and (max-width: 979px) {
} 

/*デバイスの横幅が321以上768以下の場合*/
@media only screen and (min-width: 321px) and (max-width: 768px) {
/*    body {
        width: 420px;
    }
*/    
/*    #contentArea {
        width: 420px;
    }
*/
}

/* デバイスの横幅が320px以下の場合 */
@media only screen and (max-width: 320px) {
/*    body {
        width: 320px;
    }
*/    
/*    #contentArea {
        width: 320px;
    }
*/
}