@charset "utf-8";
/* 設定カラー ヘッダ　623D95　 ボタン　9A74CF */
@font-face {
    font-family: "Yu Gothic M";
    src: local("Yu Gothic Medium");
}
@font-face {
    font-family: "Yu Gothic M";
    src: local("Yu Gothic Bold");
    font-weight: bold;
}
html {
    background: #edf7fa;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic,
        "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium",
        "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3,
        "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro",
        "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック",
        "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial,
        "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";

    font-size: 16px;

    margin: 0;
    padding: 0;
    color: #696969;
    background-color: #cccccc;

    display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.local {
    background-color: #cccccc;
}

body.staging {
    background-color: #d9e1e1;
    /*     background: linear-gradient(180deg, #D9E1E1 0%, rgba(217, 225, 225, 0) 100%), #C0CBCB; */
}

body.sodanplus {
    /*     background-color: #fbf5ff; */
    background: linear-gradient(
        180deg,
        #f7f1ff 0%,
        rgba(255, 255, 255, 1) 100%
    );
}
body.curetime {
    background-color: rgba(10, 153, 162, 0.4);
}

a {
    text-decoration: none;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
header {
    position: relative;
    left: 0;
    top: 0;
    width: 1920px;
    height: 38px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    padding: 0 10px;
    box-sizing: border-box;
}
header.off {
    background: #999;
}
header a {
    color: #fff;
    text-decoration: none;
}
header .menu_btns {
    display: flex;
}
header .btn_chat_close,
header .btn_window_close,
header .btn_telephone,
header .btn_monitor {
    min-width: 120px;
    margin-left: auto;
}
header .btn_monitor a {
    display: block;
    width: 100px;
    padding: 5px 16px;
    background-color: #339966;
    text-align: center;
    border-radius: 4px;
}
header .btn_telephone a {
    display: block;
    width: 100px;
    padding: 5px 16px;
    background-color: #334e99;
    text-align: center;
    border-radius: 4px;
}
header .btn_chat_close a {
    display: block;
    width: 100px;
    padding: 5px 16px;
    background-color: #cc6666;
    text-align: center;
    border-radius: 4px;
}
header .btn_window_close a {
    display: block;
    width: 100px;
    padding: 5px 16px;
    background-color: #333333;
    text-align: center;
    border-radius: 4px;
}

/* ドロップダウン */
.op_name {
    position: relative;
    width: 240px;
    margin-left: auto;
}
.dropdwn {
    display: flex;
}

ul.op_name {
    text-align: right;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    color: #fff;
}
li.op_name {
    max-width: 100px;
    position: relative;
    padding: 5px;
    display: block;
    cursor: pointer;
}

.op_name > li {
    width: 180px;
    margin: 1px;
    display: inline-block;
    text-align: center;
}

.dropdwn_menu {
    width: 180px;
    display: none;
    position: absolute;
    margin-left: -20px;
    margin-top: 5px;
    padding: 0;
    background: #2e484a;
    z-index: 1001;
}

.dropdwn_menu li {
    width: 100%;
    font-size: 0.875rem;
    border-bottom: 1px dotted #ccc;
}

.dropdwn_menu li a {
    padding: 20px 10px;
    margin: -5px 0 -5px 0;
    display: block;
    color: #fff;
    text-decoration: none;
}

.dropdwn_menu li a:hover {
    background: #b3d7ff;
    color: rgb(65, 65, 65);
}
.dropdwn_menu li:last-child {
    border-bottom: none;
}
/* ボタンの反転 */
header .btn_chat_close a:hover,
header .btn_window_close a:hover,
header .btn_telephone a:active,
header .btn_monitor a:hover {
    opacity: 0.6;
}
header .btn_chat_close a:active,
header .btn_window_close a:active,
header .btn_telephone a:active,
header .btn_monitor a:active {
    background-color: #a7b6b7;
}
/* iframe */
.if-window {
    width: 600px;
    height: 990px;
}
/*
#if-contact-list {
	width: 750px;
	height: 990px;
}
*/
/*
.if-monitor-window {
	width: 430px;
	height: 470px;
}
*/
.front-window {
    position: relative;
    width: 600px;
    height: 30px;
    z-index: 10001;
}

footer {
    width: 100%;
    margin: auto 0 0 0;
    padding: 15px 0;
}
.copyright {
    text-align: center;
}