@charset "UTF-8";
/* CSS Document */

.d-block { display: block !important;}
.d-flex { display: flex;}
.flex-1 { flex: 1 !important;}
.flex-wrap-wrap { flex-wrap: wrap !important;}
.flex-flow-column { flex-flow: column !important;}
.justify-content-start { justify-content: start !important;}
.justify-content-flex-start { justify-content: flex-start !important;}
.justify-content-end { justify-content: end !important;}
.justify-content-between { justify-content: space-between !important;}
.align-items-start { align-items: start !important;}
.align-items-center { align-items: center !important;}
.align-items-end { align-items: end !important;}
.font-weight-bold {font-weight: bold !important;}
input { -webkit-appearance: auto !important;}

.g50 {gap:50px !important;}
.g45 {gap:45px !important;}
.g40 {gap:40px !important;}
.g35 {gap:35px !important;}
.g30 {gap:30px !important;}
.g25 {gap:25px !important;}
.g20 {gap:20px !important;}
.g15 {gap:15px !important;}
.g10 {gap:10px !important;}
.g5 {gap:5px !important;}

.overflow-auto { overflow: auto !important;}

.position-re {position: relative !important;}
.position-ab {position: absolute !important;}

.nowrap { white-space: nowrap !important;}

/* ------------------------------ title text
*/
big {font-size:2.0rem; font-weight: bold;}

.t80 {font-size:8.0rem !important;}
.t50 {font-size:5.0rem !important;}
.t40 {font-size:4.0rem !important;}
.t30 {font-size:3.0rem !important;}
.t28 {font-size:2.8rem !important;}
.t24 {font-size:2.4rem !important;}
.t22 {font-size:2.2rem !important;}
.t20 {font-size:2.0rem !important;}
.t18 {font-size:1.8rem !important;}
.t17 {font-size:1.7rem !important;}
.t16 {font-size:1.6rem !important;}
.t15 {font-size:1.5rem !important;}
.t14 {font-size:1.4rem !important;}
.t13 {font-size:1.3rem !important;}
.t12 {font-size:1.2rem !important;}
.t11 {font-size:1.1rem !important;}
.t10 {font-size:1.0rem !important;}


/* ----------------------------- margin
*/
.m-a {margin: auto !important;}

.m-0 {margin: 0 !important;}
.m-3 {margin: 3px !important;}
.m-5 {margin: 5px !important;}
.m-10 {margin: 10px !important;}
.m-20 {margin: 20px !important;}
.m-30 {margin: 30px !important;}

.mt-0 {margin-top: 0 !important;}
.mt-5 {margin-top: 5px !important;}
.mt-10 {margin-top: 10px !important;}
.mt-15 {margin-top: 15px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-30 {margin-top: 30px !important;}

.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;;}
.mb20 {margin-bottom:20px !important;;}
.mb30 {margin-bottom:30px !important;;}
.mb40 {margin-bottom:40px !important;;}
.mb60 {margin-bottom:60px !important;;}

.mb-0 {margin-bottom: 0 !important;}
.mb-5 {margin-bottom: 5px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-50 {margin-bottom: 50px !important;}
.mb-60 {margin-bottom: 60px !important;}
.mb-70 {margin-bottom: 70px !important;}
.mb-80 {margin-bottom: 80px !important;}
.mb-90 {margin-bottom: 90px !important;}
.mb-100 {margin-bottom: 100px !important;}

.ml-a {margin-left: auto !important;}
.ml-0 {margin-left: 0 !important;}
.ml-5 {margin-left: 5px !important;}
.ml-10 {margin-left: 10px !important;}
.ml-20 {margin-left: 20px !important;}
.ml-30 {margin-left: 30px !important;}
.ml-40 {margin-left: 40px !important;}
.ml-60 {margin-left: 60px !important;}

.mr-a {margin-right: auto !important;}
.mr-0 {margin-right: 0 !important;}
.mr-3 {margin-right: 3px !important;}
.mr-5 {margin-right: 5px !important;}
.mr-10 {margin-right: 10px !important;}
.mr-20 {margin-right: 20px !important;}
.mr-30 {margin-right: 30px !important;}
.mr-40 {margin-right: 40px !important;}
.mr-50 {margin-right: 50px !important;}
.mr-60 {margin-right: 60px !important;}

.p-0 {padding: 0 !important;}
.p-5 {padding: 5px !important;}
.p-10 {padding: 10px !important;}
.p-20 {padding: 20px !important;}
.p-30 {padding: 30px !important;}
.p-40 {padding: 40px !important;}
.p-50 {padding: 50px !important;}
.p-60 {padding: 60px !important;}

.pl-0 {padding-left: 0 !important;}
.pl-3 {padding-left: 3px !important;}
.pl-5 {padding-left: 5px !important;}
.pl-10 {padding-left: 10px !important;}
.pl-20 {padding-left: 20px !important;}
.pl-30 {padding-left: 30px !important;}
.pl-40 {padding-left: 40px !important;}
.pl-50 {padding-left: 50px !important;}

.pr-0 {padding-right: 0 !important;}
.pr-5 {padding-right: 5px !important;}
.pr-10 {padding-right: 10px !important;}
.pr-20 {padding-right: 20px !important;}
.pr-30 {padding-right: 30px !important;}
.pr-40 {padding-right: 40px !important;}
.pr-50 {padding-right: 50px !important;}

.pt-0 {padding-top: 0 !important;}
.pt-5 {padding-top: 5px !important;}
.pt-10 {padding-top: 10px !important;}
.pt-20 {padding-top: 20px !important;}
.pt-30 {padding-top: 30px !important;}
.pt-40 {padding-top: 40px !important;}
.pt-50 {padding-top: 50px !important;}

.pb-0 {padding-bottom: 0 !important;}
.pb-5 {padding-bottom: 5px !important;}
.pb-10 {padding-bottom: 10px !important;}
.pb-20 {padding-bottom: 20px !important;}
.pb-30 {padding-bottom: 30px !important;}
.pb-40 {padding-bottom: 40px !important;}
.pb-50 {padding-bottom: 50px !important;}

.px-0 {padding: 0 !important;}
.px-2 {padding: 0 2px !important;}
.px-5 {padding: 0 5px !important;}
.px-10 {padding: 0 10px !important;}
.px-16 {padding: 0 16px !important;}
.px-20 {padding: 0 20px !important;}
.px-30 {padding: 0 30px !important;}
.px-40 {padding: 0 40px !important;}
.px-50 {padding: 0 50px !important;}

.py-0 {padding: 0 !important;}
.py-5 {padding: 5px  0!important;}
.py-10 {padding: 10px 0 !important;}
.py-20 {padding: 20px 0 !important;}
.py-30 {padding: 30px 0 !important;}
.py-40 {padding: 40px 0 !important;}
.py-50 {padding: 50px 0 !important;}

.pd-20-all {padding: 20px;}
.pd-10-all {padding: 10px;}
.pd-5-all {padding: 5px;}
.pd-20-bottom {padding-bottom: 20px !important;}
.pd-10-bottom {padding-bottom: 10px !important;}
.pd-20-top {padding-top: 20px !important;}
.pd-10-top {padding-top: 10px !important;}
.s-mr-15 {margin-right: 15px;}

html, body {
	height: 100%;
}

.header {
	width: 100%;
    min-width: 768px;
	height: 60px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);

}

.main {
	width:100%;
	padding:25px 20px;
	 box-sizing: border-box;
}
.dash {
	width:100%;
	min-width: 1000px;
	padding:25px 20px;
	 box-sizing: border-box;
}

.header-inner {
    padding:0 20px;
    /*min-width: 1000px;*/
    width: 100%; position: relative; box-sizing: border-box;  height: 100%; background-color: #0068b7;}

.inner { margin-left: auto; margin-right: auto; width: 1000px; }


/* ------------------------------ text-color
*/
.white {color: white !important;}

/* ------------------------------ background
*/
.bg-black {background: #000 !important;}
.bg-white {background: #fff !important;}
.bg-gray {background: #EFEFEF;}
.bg-grey {background: #f2f2f2;}
.bg-dk-grey {background: #6B6D6E;}
.bg-mizu {background: #DFEEFF;}
.bg-blue {background: #0071BC;}
.bg-orange{background: #F7931E ;}
.bg-emerald {background:#58BCBC;}
.bg-red {background: red !important;}

.bg-about {background-image: url("../img/about_bg.jpg");
background-repeat: no-repeat;
background-position:-150px bottom ;}

/* ------------------------------ background
*/

.border-orange{border: 1px solid #FF6010;}


/* ------------------------------ header
*/
h1 {
    float: left;
    margin-right: 20px;
    margin-top: 12px;
    font-size: 0;
}

h1.dxtab {float: left; margin-right: 30px; margin-top: 0px;}

/* ------------------------------ navi
*/
.navi { float: left; padding-top: 8px;}
.navi li {display: inline-block; margin-left: 4px;}
.navi li a.no_contract { opacity: 0.4;}
/*.navi li a.no_contract:hover { opacity: 1;}*/

.btn-about {
    float: left;
    margin-left: 10px;
    margin-top:10px;
    cursor: pointer;
}

/*.btn-app {float:left; margin-left: 20px; margin-top: 6px;}*/
.btn-app a {padding: 3px 5px; border: 1px solid #ccc; display: block; text-align: center; font-size: 1.2rem; color: #fff; border-radius: 3px;}
.btn-app a:hover {background: #3FAEFF; border: 1px solid #fff;}

li.btn_more {
    height: 45px;
    position: absolute;
    right: -40px;
    box-sizing: border-box;
    margin-left: 10px;
}
#btn_list { display: none;}
.btn_list-open { cursor: pointer; color: #FFF; padding: 10px;}
.btn_list-open i { padding-top: 17px;}
.btn_list-overlay { display: none;}
#btn_list:checked ~ .btn_list-overlay {
    display: block;
    z-index: 99999;
    /*background-color: #00000070;*/
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}
.btn_list-window {
    max-width: 206px;
    margin-right: 10px;
    padding: 20px;
    background-color: #0068b7;
    border-radius: 6px;
    position: fixed;
    top: 45px;
    left: 660px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
}
.btn_list-text { margin: 0;}
.btn_list-text:not(:last-of-type) { margin-bottom: 1em;}

.btn_list-text ul { display: flex; flex-wrap: wrap; gap: 5px;}

/* ------------------------------ 修正版 menu
*/

.hd-menu {position: relative; float: left; display: flex; align-items: center; padding-top: 8px; margin-right: 40px; gap: 4px}
.hd-menu a { display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; width: 60px; height: 45px; border: 1px solid #fff; border-radius: 4px; color: #fff; text-align: center; font-size: 10px;}
.hd-menu img { padding-top: 5px;}
.hd-menu a:hover { opacity: 1;}

.hd-menu.lt-green a:hover, .hd-menu.lt-green a.current { background: #4DD0B2;}
.hd-menu.lt-blue a:hover, .hd-menu.lt-blue a.current { background: #3FAEFF;}
.hd-menu.ltd-blue a:hover, .hd-menu.ltd-blue a.current { background: #0A98D8;}
.hd-menu a:hover img { opacity: 1 !important;}

/*.header-inner a.no_contract { opacity: 0.4; pointer-events: none;}*/

/* ------------------------------ 修正版 sub menu
*/
.hd-menu-sub { display: flex; align-items: center; gap: 5px; padding-bottom: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;}
.hd-menu-sub a { display: block; box-sizing: border-box; border: 1px solid #707070; border-radius: 4px; color: #333; white-space: nowrap; font-size: 16px; font-weight: bold; padding: 5px 12px 5px 41px;}
.hd-menu-sub a img { margin-right: 5px;}
.hd-menu-sub a:hover, .hd-menu-sub a.current { color: #fff;}

.hd-menu-sub .menu_item_01 a { background: url(/img/ic_menu_01.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_01 a:hover, .hd-menu-sub .menu_item_01 a.current { background: url(/img/ic_menu_01_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_02 a { background: url(/img/ic_menu_02.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_02 a:hover, .hd-menu-sub .menu_item_02 a.current { background: url(/img/ic_menu_02_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_03 a { background: url(/img/ic_menu_03.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_03 a:hover, .hd-menu-sub .menu_item_03 a.current { background: url(/img/ic_menu_03_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_04 a { background: url(/img/ic_menu_04.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_04 a:hover, .hd-menu-sub .menu_item_04 a.current { background: url(/img/ic_menu_04_on.svg) no-repeat 12px 50%;}

.hd-menu-sub .menu_item_05 a { background: url(/img/ic_menu_05.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_05 a:hover, .hd-menu-sub .menu_item_05 a.current { background: url(/img/ic_menu_05_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_06 a { background: url(/img/ic_menu_06.svg) no-repeat 10px 50%;}
.hd-menu-sub .menu_item_06 a:hover, .hd-menu-sub .menu_item_06 a.current { background: url(/img/ic_menu_06_on.svg) no-repeat 10px 50%;}
.hd-menu-sub .menu_item_07 a { background: url(/img/ic_menu_07.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_07 a:hover, .hd-menu-sub .menu_item_07 a.current { background: url(/img/ic_menu_07_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_08 a { background: url(/img/ic_menu_08.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_08 a:hover, .hd-menu-sub .menu_item_08 a.current { background: url(/img/ic_menu_08_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_09 a { background: url(/img/ic_menu_09.svg) no-repeat 16px 50%;}
.hd-menu-sub .menu_item_09 a:hover, .hd-menu-sub .menu_item_09 a.current { background: url(/img/ic_menu_09_on.svg) no-repeat 16px 50%;}
.hd-menu-sub .menu_item_10 a { background: url(/img/ic_menu_10.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_10 a:hover, .hd-menu-sub .menu_item_10 a.current { background: url(/img/ic_menu_10_on.svg) no-repeat 12px 50%;}

.hd-menu-sub .menu_item_11 a { background: url(/img/ic_menu_11.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_11 a:hover, .hd-menu-sub .menu_item_11 a.current { background: url(/img/ic_menu_11_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_12 a { background: url(/img/ic_menu_12.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_12 a:hover, .hd-menu-sub .menu_item_12 a.current { background: url(/img/ic_menu_12_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_13 a { background: url(/img/ic_menu_13.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_13 a:hover, .hd-menu-sub .menu_item_13 a.current { background: url(/img/ic_menu_13_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_14 a { background: url(/img/ic_menu_14.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_14 a:hover, .hd-menu-sub .menu_item_14 a.current { background: url(/img/ic_menu_14_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_15 a { background: url(/img/ic_menu_15.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_15 a:hover, .hd-menu-sub .menu_item_15 a.current { background: url(/img/ic_menu_15_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_16 a { background: url(/img/ic_menu_16.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_16 a:hover, .hd-menu-sub .menu_item_16 a.current { background: url(/img/ic_menu_16_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_17 a { background: url(/img/ic_menu_17.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_17 a:hover, .hd-menu-sub .menu_item_17 a.current { background: url(/img/ic_menu_17_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_18 a { background: url(/img/ic_menu_18.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_18 a:hover, .hd-menu-sub .menu_item_18 a.current { background: url(/img/ic_menu_18_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_19 a { background: url(/img/ic_menu_19.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_19 a:hover, .hd-menu-sub .menu_item_19 a.current { background: url(/img/ic_menu_19_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_20 a { background: url(/img/ic_menu_20.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_20 a:hover, .hd-menu-sub .menu_item_20 a.current { background: url(/img/ic_menu_20_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_21 a { background: url(/img/ic_menu_21.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_21 a:hover, .hd-menu-sub .menu_item_21 a.current { background: url(/img/ic_menu_21_on.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_22 a { background: url(/img/ic_menu_22.svg) no-repeat 12px 50%;}
.hd-menu-sub .menu_item_22 a:hover, .hd-menu-sub .menu_item_22 a.current { background: url(/img/ic_menu_22_on.svg) no-repeat 12px 50%;}

.hd-menu-sub.blue a:hover, .hd-menu-sub.blue a.current { background-color: #3FAEFF !important; border: 1px solid #3FAEFF;}
.hd-menu-sub.green a:hover, .hd-menu-sub.green a.current { background-color: #24868E !important; border: 1px solid #24868E;}


/* ------------------------------ logout
*/
.head-right-area {float: right;}
.head-right-area a {padding: 3px 5px; border: 1px solid #fff; display: block; text-align: center; font-size: 1.2rem; color: #fff; border-radius: 3px;}
.head-right-area a:hover {color: white !important;}
.head-right-area a#manual:hover {background: #070; border: 1px solid #070;}
.head-right-area a#logout {padding: 3px 5px; border: 1px solid #fff; display: block; text-align: center; font-size: 1.2rem; color: #fff; border-radius: 3px;}
.head-right-area a#logout:hover {background: #3FAEFF; border: 1px solid #fff;}

.head-right-area-2 {float: right; margin: 15px 15px 0 0;}

/* ------------------------------ logout
*/
.logout-box {float: right; margin-top: 6px;}
.logout-box a {padding: 3px 5px; border: 1px solid #ccc; display: block; text-align: center; font-size: 1.2rem; color: #fff; border-radius: 3px;}
.logout-box a:hover {background: #f00; border: 1px solid #f00;}

/* ------------------------------ 通知
*/
.head-notice {position: relative; float: right; text-align: center; padding: 13px 6px 0 0;}
.head-notice a {display: inline-block; text-align: center; width: 40px; color: #fff; font-size: 10px;}
.head-notice a:hover { color: #fff !important; opacity: .7;}
.head-notice i {display: block; font-size: 22px; padding-bottom: 1px;}
.head-notice .badge {display: grid; place-items: center; position: absolute; top: 7px; right: 5px; min-width: 12px; height: 11px; font-size: 10px; border-radius: 50px; color: #fff; background: #D03C3C; padding: 3px;}
.head-notice span {display: inline-block; max-width: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* ------------------------------ 各種配信お知らせ
*/
.delivery_message {
    display: grid;
    place-items: center;
    position: absolute;
    top: 2px;
    height: 14px;
    width: 50px;
    font-size: 10px;
    border-radius: 10px;
    background: yellow;
    padding: 3px;
    color: black;
}

/* ------------------------------ TITLE
*/
b { font-weight: bold !important;}
.kei {border-bottom: 1px solid #ccc;}
.dash-tit {background: #ccc; border-radius: 7px 7px 0px 0px; padding: 3px 10px; }
.kei-all {border: 1px solid #ccc;}

/* ------------------------------ Support
--*/
/* faq */
.faq-menu dt { position: relative; cursor: pointer; border-top:1px dotted #ccc; padding: 10px 15px;}
.faq-menu dt::before {
    font-family: "Font Awesome 5 Free";
	content: "\f054";
    position: absolute;
    left: 0;
}
.faq-menu dt.active:before {
    content: "\f078";
}
.faq-menu dt:first-child{border:none;}
.faq-menu dd {
	display: none;/* 最初は隠しておく */
	padding: 5px 20px 20px;

}

/* ------------------------------ dash
--*/
.dash-main {width:76.6666%; float: left;}
.dash-side {width:21.6666%; float: right;}
.dash-info-box {background: #fff; border-radius: 0px 0px 7px 7px; box-sizing: border-box;}

.list-dash {
    border-bottom: 1px dashed gray;
    padding: 5px 0px;
}
.list-dash a{color:#333;}
.list-dash a:hover{color:#0071BC;}
.list-dash dt {display: inline-block; width: 20%; vertical-align: top;}
.list-dash dd {display: inline-block; width: 79%; vertical-align: top;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ------------------------------ solid
--*/
.list-solid {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    font-size: 1.2rem;
}
.list-solid .day { width: 28%;}
.list-solid .user { width: 30%; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.list-solid .ic_badge { position: absolute; top: 50%; left: -20px; transform: translateY(-50%); -webkit- transform: translateY(-50%); border-radius: 50px; background-color: #D03C3C; width: 6px; height: 6px;}
.list-solid .btn_area {
    width: 12%;
}

.list-solid:hover span.btn { opacity: .7;}

.pull-tag,.pull-tag-2 {position: relative;}
.pull-tag .tag,.pull-tag-2 .tag  {
position: absolute;
top: 100%;
left: 50%;
width: 20px;
border-top:1px solid #eee;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ccc;
    border-radius: 0 0 5px 5px;
    padding: 5px 10px;
    margin: -1px 0 0 -21px;
    background: #fff;
}
.pull-tag .tag span,.pull-tag-2 .tag span {
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: 2px;
    background-color: #999;
}
.pull-tag .accordion_box { display:none;}

/* dash zaiko */
.dash_zaiko dt img {max-width: 100%; height: auto;}
.dash_zaiko dt {float: left; width:38%;}
.dash_zaiko dd {float: right; width: 60%;}

/* popup */
.position-re {position: relative;}
/*.pop-open,.pop-coad,.pop-meisai {cursor: pointer;}*/
.box-side-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 10px;
    /*width: 380px;*/
    min-height: 320px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
.box-side-popup::before {
    content: "";
    position: absolute;
    top: 0;
    right: 10%;
    /*width: 0;*/
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
}

.box-popup-coad {
    position: absolute;
    top: 68px;
    left: 120px;;
    width: 330px;
    min-height: 400px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
.box-popup-coad::before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
}

.box-popup-qr {
    position: absolute;
    top: 68px;
    left: -50px;;
    width: 200px;

    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
.box-popup-qr::before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
}

.box-popup-meisai {
    position: absolute;
    bottom: 40px;
    /*left: -230px;*/
    left: 0;
    width: 595px;
    height: 300px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 5555;
}
/*
.box-popup-meisai::before {
    content: "";
    position: absolute;
    bottom: -19px;
    right: 52%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-top: 8px solid #000;
}
*/
.box-popup-memo-new	{
    display: none;
    position: absolute;
    top: 35px;
    right: 50px;
    width: 330px;
    min-height: 400px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
.box-popup-memo-new::before {
    content: "";
    position: absolute;
    top: 0;
    right: 5%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
}

/* alert */
.box-alert{
    display: none;
    position: fixed;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    width: 595px;
    height: 220px;
    margin: auto;
    padding: 20px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}

/* sms */
.box-sms{
    display: none;
    position: absolute;
    top: 0px;
    left: 0;
    right:0;
    width: 500px;
    min-height: 300px;
    margin: auto;
    /*padding: 20px 15px;*/
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}

.box-mes {
	border:1px solid #ccc;
	border-radius: 6px;
	width:98%;
	margin: 15px auto;
	background-color: #fff;
	box-shadow:1px 2px 10px -2px #666;
	-moz-box-shadow:1px 2px 10px -2px #666;
	-webkit-box-shadow:1px 2px 10px -2px #666;
	box-sizing: border-box;
}
.box-mes textarea {border:none; padding:0 0.5em;}



/* table */
.table-style-1 th, .table-style-1 td {padding: 3px; vertical-align: middle;}

.no-border th,.no-border td {border: none !important; vertical-align: middle; padding: 3px;}

.border-none { border: none !important;}

/* list */
.list-title-label {
    margin-top: 20px; margin-left: 10px; margin-right: 10px; padding: 0 10px; border-radius: 4px; background: #666; cursor: pointer;
    color: #FFF; display: block; height: 50px; line-height: 50px; position: relative;
    font-size: 18px; font-weight: bold;
}
.list-title-label:hover { background: #888;}
.list-title-label::after {
    content: '＞'; position: absolute; top: 0; right: 10px; transform: rotate(90deg);
}
.list-title-label.active::after {
    content: '＞'; position: absolute; top: 0; right: 10px; transform: rotate(-90deg);
}

.list-2column { margin-left: 10px; margin-right: 10px; margin-bottom: 20px; font-size: 1.6rem;}
.list-2column > div { display: flex; align-items: center;}
.list-2column > div > div:nth-child(1) { width: 80%; padding-left: 10px;}
.list-2column > div > div:nth-child(2) { width: 20%; padding-right: 20px; text-align: right;}
.list-2column .row { padding: 15px 0; border-bottom: solid 1px #CCC; background: #FFF;}
.list-2column .row:first-child { border-top-left-radius: 7px; border-top-right-radius: 10px;}
.list-2column .row:last-child { border-bottom: none; border-bottom-left-radius: 7px; border-bottom-right-radius: 10px;}
.list-2column a:hover { opacity: 0.6;}


.list-3column { margin: 10px 0; font-size: 1.6rem;}
.list-3column > div { display: flex; align-items: center;}
.list-3column > div > div:nth-child(1) { width: 8%; text-align: center;}
.list-3column > div > div:nth-child(2) { width: 72%;}
.list-3column > div > div:nth-child(3) { width: 20%; text-align: center;}
.list-3column .head {
    padding: 10px 0; line-height: 1; font-weight: bold;
    border-top-left-radius: 7px; border-top-right-radius: 7px; background: #CCC;
}
.list-3column .row { padding: 15px 0; border-bottom: solid 1px #CCC; background: #FFF;}
.list-3column .row:last-child { border-bottom: none; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;}
.list-3column a:hover { opacity: 0.6;}

/* fukidasi */
.fukidasi {
	background: #E6E6E6;
	padding: 10px 15px;
	border-radius: 6px 0px 6px 6px;
	position: relative;
}
.fukidasi::before {
    content: '';
    border: 14px solid transparent;
    border-top-color: #e6e6e6;
    position: absolute;
    top: 0;
    right:-10px;
}

/* ボーダーありの吹き出し */

.balloon-set-box {
    display: flex;
    flex-wrap: wrap;
}
.balloon-set-box.left { /* 左 */
    flex-direction: row;
}
.balloon-set-box.right { /* 右 */
    flex-direction: row-reverse; /* アイコンと吹き出しの並びを入れ替える */
}
.balloon {
    position: relative; /* 三角の位置を固定するために設定 */
    display: inline-block;
    max-width: 300px;
    margin: 10px 20px 20px; /* 上 左右 下のマージン */
    padding: 8px 15px; /* ふきだし内の余白 */
    background: #fff; /* 背景色 */
    text-align: left; /* テキストの揃え */
    border-radius: 6px;
    border:1px solid #ccc;
}
.balloon::before,.balloon::after {
    content: '';
    border: 14px solid transparent;
    border-top-color: #fff;
    position: absolute;
    top: 0;
}
.right .balloon{border:1px solid #7FB8DD;}
.left .balloon::before { /* 左側からの三角の位置 */
 	border-top-color: #ccc;
	top:-1px;
	left: -14px;
}
.left .balloon::after { /* 左側からの三角の位置 */
	border-top-color: #fff;
    left: -11px;
}
.right .balloon::before { /* 左側からの三角の位置 */
 	border-top-color: #7FB8DD;
	top:-1px;
	right: -14px;
}
.right .balloon::after { /* 右側からの三角の位置 */
    right: -11px;
}


/* width */

.w_half { width: 50% !important;}
.w140, .w140 dt	{ width: 140px;}
.w600 {width:600px !important;}
.w500 {width:500px !important;}
.w400 {width:400px !important;}
.w300 {width:300px !important;}
.w280 {width:280px !important;}
.w240 {width:240px !important;}
.w220 {width:220px !important;}
.w200 {width:200px !important;}
.w180 {width:180px !important;}
.w160 {width:160px !important;}
.w150 {width:150px !important;}
.w130 {width:130px !important;}
.w120 {width:120px !important;}
.w110 {width:110px !important;}
.w100 {width:100px !important;}
.w90 {width:90px !important;}
.w80 {width:80px !important;}
.w70 {width:70px !important;}
.w63 {width:63px !important;}
.w60 {width:60px !important;}
.w50 {width:50px !important;}
.w55 {width:55px !important;}
.w40 {width:40px !important;}
.w30 {width:30px !important;}
.w20 {width:20px !important;}
.w10 {width:10px !important;}

.w100p {width:100% !important;}
.w90p {width:90% !important;}
.w85p {width:85% !important;}
.w80p {width:80% !important;}
.w70p {width:70% !important;}
.w60p {width:60% !important;}
.w52p {width:52% !important;}
.w50p {width:50% !important;}
.w49p {width:49% !important;}
.w40p {width:40% !important;}
.w35p {width:35% !important;}
.w33p {width:33% !important;}
.w30p {width:30% !important;}
.w25p {width:25% !important;}
.w20p {width:20% !important;}
.w15p {width:15% !important;}
.w10p {width:10% !important;}
.w5p {width:5% !important;}
.w_auto {width:auto !important;}

/* height */
.h_auto { height: auto !important;}
.h10 { height: 10px !important;}
.h20 { height: 20px !important;}
.h25 { height: 25px !important;}
.h30 { height: 30px !important;}
.h40 { height: 40px !important;}
.h50 { height: 50px !important;}
.h55 { height: 55px !important;}
.h60 { height: 60px !important;}
.h70 { height: 70px !important;}
.h80 { height: 80px !important;}
.h90 { height: 90px !important;}
.h100 { height: 100px !important;}
.h150 { height: 150px !important;}
.h200 { height: 200px !important;}
.h250 { height: 250px !important;}
.h300 { height: 300px !important;}
.h400 { height: 400px !important;}
.h500 { height: 500px !important;}
.h600 { height: 600px !important;}
.h100p {height:100% !important;}
.h100svh { height: 100svh !important;}

.part.col1 { width: 100%; float: none;}
.part.col2,.part-2.col2 { width: 50%;}
.part.col2_2 {}
.part.col3 { width: 33.33%;}
.part.col3-2 { width: 66.66%;}

.pdt20 {padding-top:20px;}

.mr {margin-right:3px;}

.br-4 { border-radius: 4px; }

/* color */
.black {color: black !important;}
.green {color: #b0d547;}
.purple {color:#bf8ff2;}
.yellow {color:#feca00;}
.pink {color:#f77876;}
.blue {color:#00a3fc !important;}
.dark_blue {color:#336699;}
.oran {color:#f7931e;}
.orange {color:#F7931E;}
.orange_d {color:#FF6010;}
.red {color: #f00 !important;}
.red02 {color: #EB0606 !important;}
.whi {color:#fff !important;}
.blu {color:#0071BC;}
.emerald {color:#58BCBC;}

.label_yellow { background-color: #feca00;}

/*---------------------------------- button
*/
/* ボタンにカーソルが乗ったら少し薄くする */
a.btn:hover,a.btn-s:hover,a.btn-ss:hover,a.btn-sss:hover,a.btn-waku-s:hover,a.btn-b:hover,a.btn-30:hover,a.btn-40:hover,button:hover {
    opacity: 0.6;
}

.text-mouseover:hover {
    color: #1378dc;
    opacity: 0.6;
}
.bd-blue {border-color: #0071BC !important;}
.bd-red {border-color: #f00 !important;}
.bd-whi {border-color: #fff !important;}
.btn-waku-s {
	box-sizing: border-box; -webkit-box-sizing: border-box;
	padding: 2px 5px;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #ccc;
	border-radius: 4px; -webkit-border-radius: 4px;
	position: relative;
	text-align: center;
}
.btn-waku-about {
	box-sizing: border-box; -webkit-box-sizing: border-box;
	padding: 5px 20px;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #ccc;
	border-radius: 30px; -webkit-border-radius: 30px;
	position: relative;
	text-align: center;
}

.btn{
	box-sizing: border-box; -webkit-box-sizing: border-box;
	padding: 2px 15px;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px; -webkit-border-radius: 4px;
	color:#fff !important;
	position: relative;
	text-align: center;
}
.btn-s{
	box-sizing: border-box; -webkit-box-sizing: border-box;
	padding: 2px 10px;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px; -webkit-border-radius: 4px;
	color:#fff !important;
	position: relative;
	text-align: center;
}
.btn-ss{
	box-sizing: border-box; -webkit-box-sizing: border-box;
	padding: 2px 5px;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px; -webkit-border-radius: 4px;
	color:#fff !important;
	position: relative;
	text-align: center;
}
.btn-sss{
    box-sizing: border-box; -webkit-box-sizing: border-box;
    /*padding: 0px 2px;*/
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px; -webkit-border-radius: 4px;
    color:#fff !important;
    position: relative;
    text-align: center;
}
.btn-b{
	box-sizing: border-box; -webkit-box-sizing: border-box;
	padding: 15px 30px;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px; -webkit-border-radius: 4px;
	color:#fff !important;
	position: relative;
	text-align: center;
}
.btn-waku {
	box-sizing: border-box; -webkit-box-sizing: border-box;
	padding: 3px 10px;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	border-radius: 2px; -webkit-border-radius: 2px;
    position: relative;
    text-align: center;
}
.btn-30 {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    vertical-align: middle;
    color:#fff;
}
.btn-40 {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px !important;
    padding: 0 12px;
    border-radius: 6px !important;
    vertical-align: middle;
    color:#fff;
}
.circle_label{
    box-sizing: border-box; -webkit-box-sizing: border-box;
    padding: 2px 8px;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    color:#fff !important;
    position: relative;
    text-align: center;
}

.bd-orange {border:1px solid #f7931e;}
.bd-blue {border:1px solid #0071BC;}

.mat-white {background:white; color: black !important;}
.mat-white-outline { border: solid 1px black; color:black !important; background:white;}
.mat-blue {background:#0071BC ;}
.mat-blue:hover {color: #fff !important;}
.mat-blue-outline { border: solid 1px #0071BC; color:#0071BC; background:#FFF;}
.mat-orange {background:#F7931E ;}
.mat-orange:hover { color: #fff !important;}
.mat-grey {background:#ccc ;}
.mat-dkGrey {background:#6B6D6E ;}
.mat-dkblack {background:#333;}
.mat-dkblack:hover {color: #fff !important;}
/*.mat-red {background: #f00;}*/
.mat-red {background: #DD1F1F;}
.mat-green {background:#3CB371 ;}
.mat-water {background:#00AEEF ;}
.mat-brown {background:#7B611D ;}
.mat-purple {background:#4472C4 ;}
.mat-pBlue {background: #DDF1FF ;}

.mat-orico {
    background:#FF3C00;
}
.mat-kinto {
    background:#0D708D ;
}
.mat-orico:hover {
    color: #fff !important;
}
.mat-kinto:hover {
    color: #fff !important;
}
.mat-red:hover {
    color: #fff !important;
}



.arrow::after{
	font-family: "Font Awesome 5 Free";
	content: '\f054';
	position: absolute;
	right: 5px;
}
.cak::before{
	font-family: "Font Awesome 5 Free";
	content: '\f00c';
	position: absolute;
	left: 5px;
}

.pek::before{
	font-family: "Font Awesome 5 Free";
	content: '\f00d';
	position: absolute;
	left: 5px;
}

.sea::before{
	font-family: "Font Awesome 5 Free";
	content: '\f002';
	position: absolute;
	left: 5px;
}

.arrow-down::after{
	font-family: "Font Awesome 5 Free";
	content: '\f078';
	position: absolute;
	right: 5px;
}

.btn-group {
    display: flex;
}
.btn-group .btn {
    border-radius: 0;
}
.btn-group .btn:first-child {
    border-radius: 4px 0 0 4px;
}
.btn-group .btn:last-child {
    border-radius: 0 4px 4px 0;
}

/*---------------------------------- stepbar
*/
.stepbar {
    display: flex;
}
.stepbar > * {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 40px;
    padding: 0 10px;
    color: #fff;
    background: #0071BC;
    position: relative;
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: bold;
}
.stepbar > :not(:first-child) {
    padding-left: 30px;
}
.stepbar > :not(:first-child)::before,
.stepbar > :not(:first-child)::after {
    display: block; content: '';
    width: 0; height: 0;
    margin: auto;
    border-style: solid;
    border-width: 30px 0 30px 12px;
    border-color: transparent;
    position: absolute;
    top: 0; bottom: 0;
}

.stepbar > :not(:first-child)::before {
    border-left-color: #fff;
    left: 0px;
}
.stepbar > :not(:first-child)::after {
    border-left-color: #0071BC;
    left: -2px;
}
.stepbar .current ~ * {
    background: #ccc;
}
.stepbar .current + * ~ ::after {
    border-left-color: #ccc;
}

/*---------------------------------- part
*/

.part, .part dl, .part dt, .part dd,
.part div {
	box-sizing: border-box;	-webkit-box-sizing: border-box;
	vertical-align: middle;
	padding: 0;
	margin: 0;
}
.part div{ display: inline-block;}
.part > div { display: inline;}

.slct-inline > div {display:inline;}

.part {
	height: auto;
	float: left;
	/*padding: 0 15px 20px;*/
	overflow: hidden;
	padding-bottom:20px;
	padding-right: 15px;
	/*border:1px solid #f00;*/
}
.section .part:nth-child(even){
	padding-left: 15px;
	padding-right:15px;
	/*padding-right:0px;*/

}


.no_padding {padding: 0 !important; border: 0px solid #fff !important;}
.no_float { display: block; float: none;}
.part dl {
	position: relative;
	display: table;
	width: 100%;
    height: 45px;
	border: 1px #ddd solid;
}
.part dt, .part dd { display: table-cell;}
.part dt { padding: 0 5px; background: #DFEEFF; border-right: 1px solid #ddd; font-weight: normal;}
.part dt input, .part dt .slct, .part dt .slct_full { color: #333; font-weight: bold;}
.part dd { padding: 4px 7px; background: #F2F2F2;}
.part dd div input,
.part .slct select,
.part .slct .customSelect { vertical-align: middle;}
.part label { display: inline-block; vertical-align: middle; white-space: nowrap;}

.part p {
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px;
    width: 100%;
}

/*---------------------------------- stock
*/

.list-tbl td, .list-tbl th { vertical-align: middle; font-size:1.2rem; border-color: #B3B3B3;}
.exist_option {border:1px solid #333; border-radius:3px; padding:1px 2px; font-size: 1.0rem;}
.not_exist_option{border:1px solid #B3B3B3; border-radius:3px; padding:1px 2px; color:#B3B3B3;  font-size: 1.0rem;}

.list-sobi dt {float:left;}
.list-sobi dd {margin-left:50px;}

.zaiko-sort {letter-spacing: -.4em;;}
.zaiko-sort li {display: inline-block; letter-spacing: normal;}
.zaiko-sort-btn {
    display:block;
    border:1px solid #B3B3B3;
    padding:2px 5px;
    color:#333 !important;
    font-size:1.1rem;
    background-color: #FFF;
    margin-right: 2px;
}

/* tab */
#tabnavi ul{
	margin:0;
	padding:0;
}
#tabnavi li{
	display:inline;
}
#tabnavi li a{
	display:inline-block;
	background:#F2F2F2;
	color:#333;
	padding:5px 20px;
	border-color: #ccc;
	border-style: solid;
	border-width: 1px;
	border-radius:5px 5px 0 0;
	text-decoration:none;
	width:150px;
	font-size:1.6rem;
	text-align:center;
}
#tabnavi li a:hover,
#tabnavi li a.active{
	background:#fff;
	color:#f00;
	border-bottom: 1px solid #fff !important;
}
a.tab02-on:hover {color:#0071BC !important;}
#tabnavi li a.active2{
	background:#fff;
	color:#0071BC;
	border-bottom: 1px solid #fff !important;
}
#tabcontent{
	padding:30px 0;
	border-top:1px solid #ccc;
	margin-top: -1px;
	/*border:1px dotted #ccc;*/
}

.box-popup-code-zaiko,.box-popup-code-zaiko2 {
    display: none;
    position: absolute;
    top: 60px;
    right: 0px;
    width: 330px;
    min-height: 400px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
/* .box-popup-code-zaiko::before, .box-popup-code-zaiko2::before {
    content: "";
    position: absolute;
    top: 0;
    right: 13%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
} */

.box-popup-code-zaiko-header {
    display: none;
    position: absolute;
    top: 80px;
    left: 230px;
    width: 330px;
    min-height: 400px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
.box-popup-code-zaiko-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
}

.box-popup-cs {
    display: none;
    position: absolute;
    top: 60px;
    right: 0px;
    width: 330px;
    min-height: 330px;
    padding: 10px 15px 20px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
/* .box-popup-cs::before {
    content: "";
    position: absolute;
    top: 0;
    right: 13%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
} */
.box-popup-cs .message {
    margin-bottom: 8px;
}
.box-popup-cs .message.error {
    font-size: 14px;
    color: red;
}
.box-popup-cs .message.success {
    font-size: 14px;
    color: blue;
}
.box-popup-cs .input_wrapper {
    position: relative;
}
.box-popup-cs .input_wrapper .suggest_btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    line-height: 1;
}
.box-popup-cs .input_wrapper .suggest_btn:hover {
    opacity: 0.5;
}
.box-popup-cs .input_wrapper .suggest_box {
    position: absolute;
    bottom: calc(100% + 1px);
    left: 0;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    border: solid 1px #999;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_list {
    max-height: 300px;
    overflow-y: auto;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_list .suggest_item {
    display: block;
    padding: 6px 10px;
    border-bottom: solid 1px #999;
    color: inherit;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_list .suggest_item:last-child { border-bottom: none; }
.box-popup-cs .input_wrapper .suggest_box .suggest_list .suggest_item:hover {
    background-color: #eaeaea;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_list .suggest_item .name {
    display: block;
    font-weight: bold;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_list .suggest_item .sub_info_wrapper {
    display: block;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_list .suggest_item .sub_info_wrapper .sub_info {
    display: flex;
    font-size: 10px;
    line-height: 1.4;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_list .suggest_item .sub_info_wrapper .sub_info .label {
}
.box-popup-cs .input_wrapper .suggest_box .suggest_list .suggest_item .sub_info_wrapper .sub_info .value {
    margin-left: 2px;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_empty_message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 150px;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 150px;
}
.box-popup-cs .input_wrapper .suggest_box .suggest_loading i {
    font-size: 21px;
    line-height: 1;
    color: #999999;
    animation: suggest_loading_spin 0.85s linear 0s infinite;
}
@keyframes suggest_loading_spin {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(359deg); }
}
.box-popup-cs .input_wrapper .suggest_box:not(.open) { display: none; }
.box-popup-cs .input_wrapper .suggest_box:not(.empty) .suggest_empty_message { display: none; }
.box-popup-cs .input_wrapper .suggest_box:not(.loading) .suggest_loading { display: none; }
.box-popup-cs .input_wrapper .suggest_box.loading .suggest_list,
.box-popup-cs .input_wrapper .suggest_box.empty .suggest_list { display: none; }



.box-popup-sms-header {
    display: none;
    position: absolute;
    top: 80px;
    left: 330px;
    width: 330px;
    min-height: 400px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
.box-popup-sms-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
}

.box-popup-slip,.box-popup-slip2 {
    display: none;
    position: absolute;
    top: 80px;
    right: 0px;
    width: 350px;
    min-height: 168px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
/* .box-popup-slip::before, .box-popup-slip2::before {
    content: "";
    position: absolute;
    top: 0;
    right: 10%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
} */

.box-popup-memo,.box-popup-memo2 {
    display: none;
    position: absolute;
    top: 80px;
    right: 0px;
    width: 350px;
    height: 180px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9990;
}
.box-popup-memo::before, .box-popup-memo2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 77%;
    width: 0;
    height: 0;
    margin: -17px 0 0 -60px;
    border: 9px solid transparent;
    border-bottom: 8px solid #000;
}

.box-popup-rireki,.box-popup-rireki2 {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 450px;
    height: 550px;
    padding: 10px 15px;
    border: 2px solid #000;
    background-color: #fff;
    box-shadow:1px 3px 18px -6px #000000;
    -moz-box-shadow:1px 3px 18px -6px #000000;
    -webkit-box-shadow:1px 3px 18px -6px #000000;
    box-sizing: border-box;
    z-index: 9999;
}
/* ----------------------------------area-pagenation
*/
.area-pagenation {
	text-align: center;
	margin-bottom: 40px;
}
.area-pagenation > a { padding: 0 5px; }
.area-pagenation a {
    display: inline-block;
    text-decoration: none;
}
.area-pagenation button,
.area-pagenation a {
	font-size: 2.0rem;
	color: #1378dc;
	background-color: transparent;
}
.area-pagenation button:hover,
.area-pagenation a:hover {
    color: #333;
    background-color: #cce2f8;
}
.area-pagenation .numberlink {
    display: inline-block;
    text-align: center;
}
.area-pagenation .numberlink > li {
    display: inline-block;
}
.area-pagenation .numberlink > li:not(:first-child) {
    margin-left: 2px;
}
.area-pagenation .numberlink > li button ,
.area-pagenation .numberlink > li a {
    font-size: 1.6rem;
    line-height: 1.9;
    width: 30px;
    border: 1px solid #ccc;
    color: #333;
}
.area-pagenation .numberlink > li button:hover ,
.area-pagenation .numberlink > li a:hover {
    border: 1px solid #99c4f0;
    color: #333;
}
.area-pagenation .numberlink > li.act {
}
.area-pagenation .numberlink > li.act button ,
.area-pagenation .numberlink > li.act a {
    border: 1px solid #99c4f0;
    color: #333;
    background-color: #cce2f8;
}
.current_page {
    font-size: 1.6rem;
    padding: 3.5px 10px;
    margin: 0px 4px;
    line-height: 1.9;
    width: 30px;
    border: 1px solid #99c4f0;
    color: #333;
    background-color: #cce2f8;
}
.page_button > a {
    font-size: 1.6rem;
    line-height: 1.9;
    margin: 0px 4px;
    width: 30px;
    border: 1px solid #ccc;
    color: #333;
}

/* -------------------------------- about
*/
#box-about {
	display: block;
	position: absolute;
	top:70px;
	width:100%;
    height: 650px;
	z-index: 9999;
	box-shadow: 1px 3px 10px -3px #666;
	background: #fff;
}
#box-about::before{
	content: "";
	position: absolute;
	top: 0;
    left: 37.5%;
	width: 0;
	height: 0;
	margin: -17px 0 0 -60px;
	border: 9px solid transparent;
	border-bottom: 8px solid #000;
}
.about-popup{
	width:100%;
	height: 650px;
}
#about-main{
    width:100%;
    /*height: calc(100% - 60px);*/
    height:100%;
    position: relative;
}

.about-inner{
    width:720px;
    margin: 0 auto;
    padding:20px 0 0 0;
/*    position: absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
    width:720px;
    height: 530px;
    margin: 0 auto;
    padding:20px 0 0 0;
*/
}
.about-home {
	/*border:1px solid #f00;*/
	width:320px;
	height: 200px;
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
    margin: auto;
}

/* 上のナビ*/
.about-navi-h li{float:left;
	width:220px;
}
.about-navi-h li:nth-child(2){
	margin-left:30px;
	margin-right: 30px;
}
/*  下のナビ */
.about-navi-ss {position: absolute; bottom:20px; left:0; right:0; /*border:1px solid #f00;*/}
.about-navi-ss ul {text-align: center;}
.about-navi-ss ul li{
	display: inline-block;
	margin: 5px 10px;
}
.about-navi-ss ul  li a{color:#fff;}

/* 左右のナビ */
.about-sidenav-L {
    position:absolute;
    left:10px;
    top:50%;
}
.about-sidenav-R {
    position:absolute;
    right:10px;
    top:50%;
}

.anime-next {border:10px solid #f00;}

/*==================================================================== login
*/

.login-inner {margin:40px auto; width:320px; background: #fff; padding:20px; border-radius: 4px; box-shadow: 0px 0px 5px -2px #999;}
.login-tt {float:none; text-align: center; margin: 0 0 20px;}
.login-tt .name { font-weight: bold; font-size: 22px; }

.login-col-3 {
	display: flex;
  	-webkit-box-pack: justify;
     -ms-flex-pack: justify;
    justify-content: space-between;
}
.login-col-3 li {
	width:30%;
}
.login-inner input[type="text"],
.login-inner input[type="tel"],
.login-inner input[type="password"] {
	width:100%;
	padding:5px;
	font-size: 1.6rem;
	box-sizing: border-box; /*paddingやborderの大きさもwidthとheightに含める*/
}

.login-section a {color:#333;}
.login-section a:hover {color:#1478dc;}

.password_input_wrapper {
    position: relative;
    width: 100%;
}
.password_input_wrapper input[type="text"],
.password_input_wrapper input[type="password"] {
    padding-right: 35px;
}
.password_input_wrapper .toggle_password_btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}
.password_input_wrapper .toggle_password_btn:hover {
    opacity: 0.5;
}
.password_input_wrapper .toggle_password_btn:not(.active) i.on { display: none; }
.password_input_wrapper .toggle_password_btn.active i.off { display: none; }

/* --------------------------------------------------  mgr_login_box */

.mgr_login_box {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 100%; height: 100%; min-width: 940px; min-height: 440px; padding: 20px;
}
.mgr_login_box .box_inner {
    display: flex; overflow: hidden; box-sizing: border-box; flex: 0 1 900px; min-height: 400px; margin: 0 auto;
    background-color: #fff; border-radius: 4px; box-shadow: 0px 0px 5px -2px #999;
}

.mgr_login_box .header_column {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 40%; padding: 20px;
    border-left: solid 4px #0068b7;
}
.mgr_login_box .header_column .app_logo { text-align: center; }
.mgr_login_box .header_column .app_logo .name { font-weight: bold; font-size: 22px; }

.mgr_login_box .content_column {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 1 1 auto; padding: 20px 50px;
    border-left: solid 1px #ccc;
}
.mgr_login_box .content_column .login_form { flex: 1 1 auto; padding-top: 20px; }
.mgr_login_box .content_column .login_form form { padding: 0; }
.mgr_login_box .content_column .login_form .error_message {
    margin-bottom: 10px; text-align: center; color: #f00; font-size: 13px; font-weight: bold;
}
.mgr_login_box .content_column .login_form .error_message ul li:not(:first-child) { margin-top: 2px; }
.mgr_login_box .content_column .login_form .fields .field:not(:first-child) { margin-top: 20px; }
.mgr_login_box .content_column .login_form .fields .field .title { color: #787878; margin-bottom: 3px; }
.mgr_login_box .content_column .login_form .fields .field .interface input[type="text"],
.mgr_login_box .content_column .login_form .fields .field .interface input[type="tel"],
.mgr_login_box .content_column .login_form .fields .field .interface input[type="password"] {
    width: 100%; padding: 5px 10px; font-size: 1.5rem; box-sizing: border-box; border-radius: 4px;
}
.mgr_login_box .content_column .login_form .buttons { margin-top: 25px; }
.mgr_login_box .content_column .login_form .buttons .btn { padding-top: 5px; padding-bottom: 5px; }
.mgr_login_box .content_column .login_form .buttons .btn:not(:first-child) { margin-top: 15px; }
.mgr_login_box .content_column .login_form .reminder_message { margin-top: 15px; text-align: right; }
.mgr_login_box .content_column .login_form .reminder_message a { color: #333; text-decoration: underline; font-size: 13px; }
.mgr_login_box .content_column .login_form .enviroment_message { margin-top: 15px; text-align: left; color: #f00; font-size: 12px; }
.mgr_login_box .content_column .login_form .force_login_message { color: #f00; line-height: 1.75; }


/* --------------------------------------------------  banner */
/* ログインページ */
.pr-inner {width: 1000px; margin-left: auto; margin-right: auto; padding: 20px 0;}
/* ヘッダーのQRコードの下 */
.bnr-app {
    position: absolute;
    top: 58px;
    left:-70px;
    width: 210px;
	padding: 5px;
    border: 1px solid #c96;
    background: linear-gradient(#fe9, #f90);
}
.bnr-app p {color:#000; text-align: center; font-weight: bold; font-size: 1.3rem; text-shadow: 1px 1px 0px #fc0; }

/* ヘッダーのバナー */
.bnr-guide {
    position: absolute;
    top: 58px;
    right: 0px;
    width: 170px;
    padding: 5px;
}

#y_video {
    background-color: black;
}

/* alert */
/* alert */
.alert{
	position: fixed;
	top       : 50%;
	left      : 50%;
	transform : translate(-50%, -50%);
	width:300px;
	padding: 1em;
	border: 2px solid #000;
	background-color: #fff;
	box-shadow:1px 3px 18px -6px #000000;
	-moz-box-shadow:1px 3px 18px -6px #000000;
	-webkit-box-shadow:1px 3px 18px -6px #000000;
	box-sizing: border-box;
	z-index: 9999;
}
.staff_table {
/*    max-width: 800px;*/
    width: 100%;
}
.staff_table th,
.staff_table td {
    height: 33px;
}
.staff_table th {
    background-color: #DFEEFF;
}
.staff_table td {
    /*background-color: #F2F2F2;*/
    border: solid 1px #ddd;
}
.video_popup {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0, 0.3);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	overflow: auto;
}

.video_content {
	position: fixed;
	top: 10%;
	right: 5%;
	bottom: 5%;
	left: 5%;
	z-index: 1000;
}


.dis_none {
    display: none !important;
 }

.hide {
    display: none;
 }

.date_fields { position: relative; }

.date_fields .date_btn {
    appearance: none; -webkit-appearance: none; position: absolute; top: 0; bottom: 0; right: 5px;
    padding: 0; margin: auto; background: none;
}

#popup_background{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.01);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#44000000,EndColorStr=#44000000);
    z-index: 999;
}

.popup_screen {
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.4);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#44000000,EndColorStr=#44000000);
    z-index: 999;
}

.inline {
    display: inline-block
}
i {
    cursor: pointer;
}

.css-fade1,.css-fade2,.css-fade3,.css-fade4,.css-fade5,.css-fade6,.css-fade7,.css-fade8,.css-fade9,.css-fade10,.css-fade11 {opacity: 0;}
.css-fade1,.css-fade2,.css-fade3,.css-fade4,.css-fade5,.css-fade6,.css-fade7,.css-fade8,.css-fade9,.css-fade10,.css-fade11{
  animation-name:fade-in;
  animation-duration:0.5s;
  animation-timing-function: ease-out;
  animation-delay:0.5s;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  0% {opacity: 0; transform: translate3d(0,10px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

/* ---------------------------------------------- meihen 2020-1-8 */
.meihen_box{border:1px dotted #ccc; padding: 1em; text-align: center;}

/* 利用規約　*/
.terms-box {width:100%; height:400px; overflow-y: scroll; border:1px solid #ccc; box-sizing: border-box;}
.terms-inner {padding: 20px 20px;  }


/* 商談管理 - アンケート情報 */
.questionnaire_label { padding-left: 12px; font-size: 12px; color: #1378dc; position: relative; cursor: pointer;}
.questionnaire_label::after { content: '＋'; position: absolute; top: 0; left: 0;}
.questionnaire_label.active::after { content: '−'; position: absolute; top: -1px; left: 2px;}

.questionnaire_label_red { font-size: 12px; color: red; position: relative;}

.questionnaire_box { margin: 0 10px 10px;}
.questionnaire_box dt { margin-top: 5px; font-size: 12px;}
.questionnaire_box dd { font-size: 12px;}


/* ---------------------------------------------- businessmeeting 2021-08-15 */

.businessmeeting_table_cs_actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.businessmeeting_table_cs_actions .btns {
    display: flex;
    align-items: center;
    margin: 5px 5px;
}

.businessmeeting_table_cs_actions .btns .btn-s:not(:first-child) {
    margin-left: 5px;
}

.businessmeeting_table_cs_actions .btns .btn-s.disabled,
.businessmeeting_table_cs_actions .btns .btn-s[disabled] {
    pointer-events: none;
    background-color: #c5c5c5;
}

.businessmeeting_table_cs_actions .btns .preview {
    padding-left: 30px;
    background: #FF5F12;
    position: relative;
    color: #FFF !important;
}

.businessmeeting_table_cs_actions .btns .preview::after {
    content: '';
    width: 15px;
    height: 13px;
    background: url('/img/ic_window.svg') no-repeat;
    position: absolute;
    top: 6px;
    left: 10px;
}

.businessmeeting_table_cs_actions .btns .btn-orange {
    color: #666 !important;
    border: solid 1px #BBB;
    background: linear-gradient( 180deg, rgb(255 255 255) 70%, rgb(234 234 234) 100%);
}

.businessmeeting_table_cs_actions .btns .btn-orange.on,
.businessmeeting_table_cs_actions .btns .btn-orange:hover {
    color: #FFF !important;
    border: solid 1px #F7931E;
    background: #F7931E;
    opacity: 1;
}

.businessmeeting_table_cs_actions .btns .btn-orico {
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    opacity: 1;
    border: solid 1px #BBB;
    background: linear-gradient( 180deg, rgb(255 255 255) 70%, rgb(234 234 234) 100%);
    color: transparent !important;
    text-indent: -9999px;
    font-size: 0;
}

.businessmeeting_table_cs_actions .btns .btn-orico::after {
    content: '';
    display: block;
    box-sizing: content-box;
    height: 21px;
    width: 70px;
    background-image: url('/img/logo_orico-black.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 75%;
}

.businessmeeting_table_cs_actions .btns .btn-orico:hover {
    opacity: 0.5;
}

.businessmeeting_table_cs_actions .step_btns {
    display: flex;
    align-items: center;
    margin-left: 10px;
    overflow-y: hidden;
    margin: 5px 5px;
}

.businessmeeting_table_cs_actions .step_btns .step_btn {
    position: relative;
    box-sizing: border-box;
    padding: 2px 10px;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    color: #666 !important;
    position: relative;
    text-align: center;
    background: linear-gradient(180deg, rgba(245,245,245,1) 50%, rgba(190,190,190,1) 100%);
    white-space: nowrap;
    border: solid 1px #999;
}

.businessmeeting_table_cs_actions .step_btns .step_btn.on,
.businessmeeting_table_cs_actions .step_btns .step_btn:hover {
    color: #FFF !important;
    border: solid 1px #287b4e;
    background: linear-gradient(180deg, rgba(33,132,77,1) 0%, rgba(60,179,113,1) 60%);
    box-shadow: 0px 0px 3px 2px #2e9c5f inset;
}

.businessmeeting_table_cs_actions .step_btns .step_btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.businessmeeting_table_cs_actions .step_btns .step_btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: none;
}


/* ---------------------------------------------- float_qr_box 2021-08-31 */

.float_qr_box {
    width: 70px;
    height: 70px;
    position: fixed;
    bottom: 8px;
    left: 8px;
    z-index: 100;
}

.float_qr_box .qr_link {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: #272727;
    padding: 13px;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 0px 0px 3px 0px #0000006e;
    opacity: 1;
}

.float_qr_box .qr_link img {
    width: 100%;
}

.float_qr_box .qr_link:hover { opacity: 0.5; }


/* -- モーダル ---------------------------------------------------------- */

.modal_bg {
    display: none; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.5);
    position: fixed; top: 0; left: 0; z-index: 6666;
}
.modal_box { display: none; box-shadow: 0px 0px 30px 0px rgba( 0, 0, 0, 0.5); position: fixed; z-index: 7777;}

.meihen_price_list {}
.meihen_price_list .title { margin: 10px 0 10px; font-size: 2.3rem; font-weight: bold; text-align: center;}
.meihen_price_list .modal_close { position: absolute; top: 12px; right: 12px;}
.meihen_price_list .dash-info-box2 { padding: 20px; border-radius: 7px;}
.meihen_price_list table {margin: 10px auto; }
.meihen_price_list table tr.bgColor { background: #eff6ff;}
.meihen_price_list table tr td { padding: 6px 18px !important; border: 1px solid #aaa; vertical-align: middle;}
.meihen_price_list table tr td.bgColor_fst { color: #FFF; background: #296abd;}
.meihen_price_list table tr td.bgColor_snd { background: #c7d3f8;}
.meihen_price_list table tr td.bgColor_thd { background: #e3e9fc;}
.meihen_price_list .comment1 { margin: 20px 0 18px;}
.meihen_price_list .comment1 p { font-size: 1.9rem; font-weight: bold; color: #D80606;}
.meihen_price_list .comment2 p { font-size: 1.2rem;}
.meihen_price_list .comment2 p span { display: inline-block; width: 25px;}
.meihen_price_list .img01 { width: 164px; height: auto; position: absolute; top: 8px; right: 50px;}
.meihen_price_list .img02 { width: 134px; height: auto; position: absolute; top: 250px; right: 170px;}

.pop-up2{width:500px;margin:auto;}
.pop-up2 .dash-tit2{position:relative;width:100%;box-sizing:border-box;height:40px;background:#ccc;border-radius:7px 7px 0px 0px;padding:0 15px;}
.pop-up2 .dash-tit2 p{font-size:16px;text-align:center;font-weight:bold;line-height:40px;}
.pop-up2 .dash-tit2 img{position:absolute;top:8px;right:8px;}
.pop-up2 .dash-tit2 a.close_text{position:absolute;top:8px;right:8px;color: inherit;}
.pop-up2 .dash-tit2 a.close_text:hover{opacity: .7;}
.pop-up2 .dash-info-box2{background:#fff;border-radius:0px 0px 7px 7px;box-sizing:border-box;padding:0 30px 24px;overflow:hidden;min-height:270px;}
.pop-up2 p.title{font-size:14px;line-height:100%;text-align:center;font-weight:bold;padding:15px 0;}
.pop-up2 .dash-info-box2 a.yes{display:block;color:#FFF;width:140px;height:36px;line-height:36px;background:#0071BC;border-radius:6px;margin-right:60px;}
.pop-up2 .dash-info-box2 a.no{display:block;color:#FFF;width:140px;height:36px;line-height:36px;background:#6B6D6E;border-radius:6px;margin-left:60px;}
.pop-up2 .dash-info-box2 a:hover{opacity:0.6!important;color:#FFF!important;;}
.pop-up2 .dash-info-box2 table{width:440px;border:solid 1px #B3B3B3;}
.pop-up2 .dash-info-box2 table th{background:#DFEEFF;width:100px;text-align:center;vertical-align:middle;height:39px;font-weight:100;}
.pop-up2 .dash-info-box2 table td.office_address{height:59px;padding:0 20px;}
.pop-up2 .dash-info-box2 table td{vertical-align:middle;line-height:20px;padding:0;padding-left:20px;}
.pop-up2 .dash-info-box2 table td.name{position:relative;}
.pop-up .dash-info-box2 button.yes{display:block;color:#FFF;min-width:140px;height:36px;line-height:36px;background:#0071BC;border-radius:6px;}
.pop-up .dash-info-box2 button.no{display:block;color:#FFF;min-width:140px;height:36px;line-height:36px;background:#6B6D6E;border-radius:6px;}
.pop-up .dash-info-box2 button:hover{opacity:0.6!important;color:#FFF!important;;}


/* -- 汎用モーダルスタイル ---------------------------------------*/

.modal_box.basic_style {
    overflow: hidden;
}

.modal_box.basic_style .modal_box_inner {
    display: flex;
    flex-direction: column;
    width: 650px;
    height: 100%;
    margin: auto;
}

.modal_box.basic_style .modal_header {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    height: 40px;
    padding: 0 15px;
    background: #ccc;
    border-radius: 7px 7px 0px 0px;
}

.modal_box.basic_style .modal_header .title {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    line-height: 40px;
}

.modal_box.basic_style .modal_header .modal_close img {
    position: absolute;
    top: 8px;
    right: 8px;
}

.modal_box.basic_style .modal_body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
    background: #fff;
    border-radius: 0px 0px 7px 7px;
}

.modal_box.basic_style .modal_body .modal_body_inner {
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: auto;
    padding: 20px 20px 15px;
    border-top: solid 1px #b3b3b3;
}

.modal_box-basic_style .modal_body .modal_body_inner form {
    padding: 0;
}

.modal_style_common .modal_box_inner { width: 600px;}
.modal_style_common .dash-tit2 {
	display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; font-size: 1.6rem; font-weight: bold;
	border-radius: 7px 7px 0px 0px; background: #ccc; box-sizing: border-box; position: relative;
}
.modal_style_common .dash-tit2 .icon { margin-right: 8px;}
.modal_style_common .dash-tit2 .modal_close { position: absolute; top: 8px; right: 8px;}
.modal_style_common .inner_wrap {
    padding: 20px; border-radius: 0px 0px 7px 7px; box-sizing: border-box;
    background: #fff;
}


/* -- 博報堂対応 ---------------------------------------------------------- */

table.table01 { font-size:16px; width:100%; margin:auto; border:#DDDDDD solid 1px; border-collapse:collapse;}
table.table01 caption { height:54px; line-height:54px; font-weight:bold; background-color:#F9F9F9; border:#DDDDDD solid 1px; border-bottom:none; position:relative;}
table.table01 caption a { color:#2C71AB; text-decoration:none;}
table.table01 caption a.previous { position:absolute; left:20px;}
table.table01 caption a.next { position:absolute; right:20px;}
table.table01 caption span.previous { position:absolute; left:20px; color:#CDCDCD;}
table.table01 caption span.next { position:absolute; right:20px; color:#CDCDCD;}
table.table01 thead th { height:54px; font-size:14px; vertical-align:middle; font-weight:bold; color:#444444; border:#DDDDDD solid 1px;}
table.table01 tbody th { padding:0 10px; font-size:14px; text-align: center; vertical-align:middle; color:#444444; border:#DDDDDD solid 1px;}
table.table01 tbody td { width:106px; height:54px; vertical-align:middle; color:#DDDDDD; text-align:center; border:#DDDDDD solid 1px; cursor:pointer;}
table.table01 tbody td:hover { background-color:rgba(44,113,171,0.1);}
table.table01 tbody td.close { color:#CDCDCD; font-weight:bold; background:#F9F9F9; border:#DDDDDD solid 1px; cursor:default;}
table.table01 tbody td.current { background-color:rgba(44,113,171,0.1); color:#2C71AB;}
table.table01 tbody td span.team_schedule { font-size:11px; background-color:rgba(44,113,171,0.1); color:#2C71AB;}
table.table01 tbody td span.team_reserve { font-size:11px; color:red;}

table.table02 { font-size:16px; width:100%; margin:auto; border:#DDDDDD solid 1px; border-collapse:collapse;}
table.table02 caption { height:54px; line-height:54px; font-weight:bold; background-color:#F9F9F9; border:#DDDDDD solid 1px; border-bottom:none; position:relative;}
table.table02 thead th { height:54px; font-size:14px; vertical-align:middle; font-weight:bold; color:#444444; border:#DDDDDD solid 1px;}
table.table02 tbody th { padding:0 10px; font-size:14px; text-align: center; vertical-align:middle; color:#444444; border:#DDDDDD solid 1px;}
table.table02 tbody td { width:106px; height:54px; vertical-align:middle; color:#DDDDDD; text-align:center; border:#DDDDDD solid 1px; }
table.table02 tbody td.close { color:#CDCDCD; font-weight:bold; background:#F9F9F9; border:#DDDDDD solid 1px; cursor:default;}
table.table02 tbody td.current { background-color:rgba(44,113,171,0.1); color:#2C71AB;}

/*live画面のカメラ部分の調整*/
.camera_div {
    border-radius: 6px;
    width: 320px;
    height: 426px;
    overflow: hidden;
    position: relative;
}
.camera_div video {
    height: 100%;
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.on_off_btn {
    padding-top: 5px;
}


/* -- 各種お問合せ窓口コールセンター ---------------------------------------------------------- */

.callcenter_banner_wrap {
    position: fixed;
    right: 15px;
    bottom: 12px;
}
.callcenter_banner_close {
    position: absolute;
    top: -4px;
    right: -6px;
}
.callcenter_banner:hover,
.callcenter_banner_close:hover {
    cursor: pointer;
    opacity: 0.8;
}

.callcenter_list {
    padding: 20px;
    border-radius: 7px;
    background: #FFF;
}
.callcenter_list .title {
    margin: 10px 0 20px;
    font-size: 2.3rem;
    font-weight: bold;
    text-align: center;
}
.callcenter_list .modal_close {
    position: absolute;
    top: 12px;
    right: 12px;
}
.callcenter_list .box {
    display: flex;
    margin: 10px 0 0;
    border: solid 1px #C6C6C6;
    border-radius: 10px;
}
.callcenter_list .box > div {
    display: flex;
    align-items: center;
    height: 110px;
}
.callcenter_list .box > div:nth-child(1) {
    width: 240px;
    border-right: solid 1px #C6C6C6;
    border-radius: 10px 0 0 10px;
    background: #F7F9FF;
}
.callcenter_list .box > div:nth-child(1) p {
    width: 100%;
    text-align: center;
}
.callcenter_list .box > div:nth-child(2) {
    width: 400px;
}
.callcenter_list .box > div:nth-child(2) p {
    width: 100%;
    padding: 0 30px;
}
.callcenter_list .box > div p {
    font-size: 1.6rem;
    font-weight: bold;
}
.callcenter_list .box > div p.text_carsensor {
    font-size: 2.0rem;
}


/* ---------------------------------------------- lease 2021-12-14 */

.page-lease-lists a.btn-30:hover {
    color: #fff !important;
}

.page-lease-result_lists .car_table {
}

.page-lease-result_lists .car_table tr {
}

.page-lease-result_lists .car_table tr th,
.page-lease-result_lists .car_table tr td {
    background-color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 1.25;
    vertical-align: middle;
    padding: 6px;
}

.page-lease-result_lists .car_table tr th {
    background-color: #bbbbbb;
    font-weight: bold;
    height: 18px;
}

.page-lease-result_lists .car_table tr td {
    vertical-align: middle;
    text-align: center;
}

.page-lease-result_lists .car_table tr td.image img {
    display: block;
    max-width: 100%;
}


.modal-lease_step {
}

.modal-lease_step .modal_box_inner {
    width: 700px !important;
}

.modal-lease_step .modal_body .container {
    padding: 5px 0;
}

.modal-lease_step .modal_body .lead_area {
    border-bottom: solid 1px #000;
    padding-bottom: 10px;
}

.modal-lease_step .modal_body .lead_area .lead {
    font-size: 18px;
    line-height: 1.4;
}

.modal-lease_step .modal_body .lead_area .lead b {
    font-weight: bold;
    color: #000;
}

.modal-lease_step .modal_body .content_area {
    margin-top: 20px;
    padding: 0 5px;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.modal-lease_step .modal_body .content_area .content {
}

.modal-lease_step .modal_body .content_area .content p {
    margin: 0;
    padding: 0;
}

.modal-lease_step .modal_body .interface_area {
    margin-top: 20px;
}

.modal-lease_step .modal_body .interface_area .choice_list {
    display: flex;
    margin: 0 -5px;
    height: 200px;
}

.modal-lease_step .modal_body .interface_area .choice_list .label {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    border: solid 3px #a9a9a9;
    border-radius: 6px;
    padding: 8px 15px;
    margin: 0 5px;
    background-color: #fff;
}

.modal-lease_step .modal_body .interface_area .choice_list .label:hover {
    background-color: #daeeff;
    border-color: #0271bb;
}

.modal-lease_step .modal_body .interface_area .choice_list .label .input {
    flex: 0 0 auto;
}

.modal-lease_step .modal_body .interface_area .choice_list .label .input input {
    display: none;
}

.modal-lease_step .modal_body .interface_area .choice_list .label .input .dummy_circle {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    border: solid 2px #a9a9a9;
    box-shadow: 0 0 0 3px #fff inset;
}

.modal-lease_step .modal_body .interface_area .choice_list .label .input input:checked ~ .dummy_circle {
    border-color: #0271bb;
    background-color: #0271bb;
}

.modal-lease_step .modal_body .interface_area .choice_list .label .input::after {
}

.modal-lease_step .modal_body .interface_area .choice_list .label .text {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
}

.modal-lease_step .modal_body .interface_area .choice_list .label .text .sub_text {
    display: block;
    font-size: 12px;
}

.modal-lease_step .modal_body .interface_area .choice_list .label .text .main_text {
    display: block;
    font-size: 16px;
    font-weight: bold;
}


.modal-lease_calc .modal_box {
}

.modal-lease_calc .modal_box_inner {
    width: 850px !important;
}

.modal-lease_calc .modal_body .lead_area {
    border-bottom: solid 1px #000;
    padding-bottom: 10px;
}

.modal-lease_calc .modal_body .lead_area .lead {
    font-size: 18px;
    line-height: 1.4;
}

.modal-lease_calc .modal_body .car_table {
}

.modal-lease_calc .modal_body .car_table tr {
}

.modal-lease_calc .modal_body .car_table tr th {
    background-color: #bbbbbb;
    color: #000;
    font-weight: bold;
    height: 27px;
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
}

.modal-lease_calc .modal_body .car_table tr td {
    vertical-align: middle;
    text-align: center;
    padding: 6px;
}

.modal-lease_calc .modal_body .car_table tr td.image {
    width: 70px;
}

.modal-lease_calc .modal_body .car_table tr td.image img {
    display: block;
    max-width: 100%;
}


.modal-lease_calc .modal_body .form_table {
    width: 100%;
    table-layout: fixed;
}

.modal-lease_calc .modal_body .form_table tr th,
.modal-lease_calc .modal_body .form_table tr td {
    font-size: 12px;
    vertical-align: middle;
    padding: 8px;
    line-height: 1.25;
}

.modal-lease_calc .modal_body .form_table tr th {
    text-align: center;
    background: #DFEEFF;
    box-sizing: border-box;
    width: 100px;
    padding-left: 5px;
    padding-right: 5px;
}

.modal-lease_calc .modal_body .form_table tr th .require {
    margin-left: 1px;
    color: #db0c10;
    font-size: 1rem;
    font-weight: bold;
}

.modal-lease_calc .modal_body .form_table tr td {
    vertical-align: middle;
}

.modal-lease_calc .modal_body .form_table input,
.modal-lease_calc .modal_body .form_table select,
.modal-lease_calc .modal_body .form_table textarea {
    max-width: 100%;
    font-size: 12px;
}

.modal-lease_calc .modal_body .form_table input,
.modal-lease_calc .modal_body .form_table select {
    height: 28px;
    padding: 0 7px;

}
.modal-lease_calc .modal_body .form_table input:read-only {
  background-color: #ddd;
}


.modal-lease_calc .modal_body .form_table textarea {
    padding: 6px 7px;
}

.modal-lease_calc .modal_body .form_table input[type="radio"],
.modal-lease_calc .modal_body .form_table input[type="checkbox"] {
    display: none;
}

.modal-lease_calc .modal_body .form_table input[type="radio"] + .label,
.modal-lease_calc .modal_body .form_table input[type="checkbox"] + .label {
    padding: 2px 5px 2px 20px;
    background-repeat: no-repeat;
    background-position: left center;
}

.modal-lease_calc .modal_body .form_table input[type="radio"] + .label {
    background-image: url(/img/mgr/icon_radio.svg);
}

.modal-lease_calc .modal_body .form_table input[type="radio"]:checked + .label {
    background-image: url(/img/mgr/icon_radio_on.svg);
}

.modal-lease_calc .modal_body .form_table input[type="checkbox"] + .label {
    background-image: url(/img/mgr/icon_checkbox.svg);
}

.modal-lease_calc .modal_body .form_table input[type="checkbox"]:checked + .label {
    background-image: url(/img/mgr/icon_checkbox_on.svg);
}


.modal-lease_calc .modal_body .result_table {
}

.modal-lease_calc .modal_body .result_table tr {
}

.modal-lease_calc .modal_body .result_table tr th,
.modal-lease_calc .modal_body .result_table tr td {
    font-size: 12px;
    vertical-align: middle;
    padding: 8px;
    line-height: 1.25;
}

.modal-lease_calc .modal_body .result_table tr th {
    text-align: center;
    background: #DFEEFF;
    box-sizing: border-box;
    width: 50%;
    padding-left: 5px;
    padding-right: 5px;
}

.modal-lease_calc .modal_body .result_table tr td {
}


/* ---------------------------------------------- タブデザイン 2022-4-8 */

.tab_contents {
    display: flex;
    margin: 0 0 30px;
    border-bottom: solid 1px #ccc;
}
.tab_contents a {
    display: block;
    margin-right: 6px;
    padding: 8px 26px 6px;
    color: #333;
    font-size: 2.2rem;
    font-weight: bold;
    border: solid 1px #707070;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    position: relative;
    opacity: .5;
}
.tab_contents a.current,
.tab_contents a:hover {
    color: #333 !important;
    opacity: 1;
}
.tab_contents a.current::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #f2f2f2;
    position: absolute;
    left: 0;
    bottom: -1px;
}
.tab_contents .tab_zaiko span {
    padding-left: 36px;
    background: url("../img/ic_tab_stock.svg") no-repeat;
    background-position: left center;
}
.tab_contents .tab_catalog span {
    padding-left: 32px;
    background: url("../img/ic_tab_catalog.svg") no-repeat;
    background-position: left center;
}

.date-change a {
    padding: 6px 4px;
    color: #FFF;
    border-radius: 4px;
    background: #0071BC;
}


/* ---------------------------------------------- リモート来店設置アニュアル 2022-07-08 */

.remote_manual_block {
    /*padding-bottom: 20px;*/
    padding-right: 15px;
}

.remote_manual_block .toggle_link_wrap {
    text-align: center;
    margin-bottom: 20px;
}

.remote_manual_block .toggle_link {
    box-sizing: border-box;
    padding: 5px 15px;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    color: #fff !important;
    position: relative;
    text-align: center;
    background-color: rgb(166, 166, 166);
    cursor: pointer;
}

.remote_manual_block .toggle_link:hover {
    opacity: 0.6;
}

.remote_manual_block .toggle_link .text::after {
    content: ' ▷';
}

.remote_manual_block.open .toggle_link .text::after {
    content: ' ▲';
}

.remote_manual_block .body {
    padding: 20px;
    background-color: #d7d7d7;
    font-size: 16px;
    border-radius: 6px;
}

.remote_manual_block .body table {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
}

.remote_manual_block .body td {
    border: solid 1px #000;
    padding: 10px;
}

.remote_manual_block .body pre {
    margin-top: 10px;
    margin-bottom: 10px;
}

.remote_manual_block .body p {
    margin-left: 30px;
}

.remote_manual_block .body dl {
    border-bottom: solid 1px #CCC;
}

.remote_manual_block .body dl dt {
    padding: 15px 10px;
    border-top: solid 1px #CCC;
    position: relative;
    color: #002897;
    font-weight: bold;
    background: #F4F4F4;
}

.remote_manual_block .body dl dd {
    padding: 25px;
    background-color: #fff;
}

.remote_manual_block .body i {
    margin: 0 0 0 5px;
    font-size: 20px;
    vertical-align: top;
}


/* ---------------------------------------------- 新車カタログ一覧 2022-07-15 */

.catalog_thumbnail {
    position: relative;
}

.catalog_thumbnail .btn_area {
    position: absolute;
    top: -4px;
    right: -4px;
}

.catalog_thumbnail .btn_area a {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 0 5px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
}

.catalog_thumbnail .btn_area img {
    vertical-align: top;
}


.foo .suggest_box .suggest_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 150px;
}
.foo .suggest_box .suggest_loading i {
    font-size: 21px;
    line-height: 1;
    color: #999999;
    animation: suggest_loading_spin 0.85s linear 0s infinite;
}
@keyframes suggest_loading_spin {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(359deg); }
}

.foo .suggest_box:not(.loading) .suggest_loading { display: none; }

/* 商談App ヘッダー追加 */
header.app_header {
    position: sticky;
    z-index: 1000;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    height: 56px;
    padding: 5px 16px;
    border-bottom: 1px solid #DEDEDE;
    color: #333;
    background-color: #fff;
    line-height: calc(20/14);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3),
                0 2px 6px 2px rgba(0,0,0,0.15);
    clip-path: polygon(0 0, 100% 0, 100% 10000px, 0 10000px); /* 左右の影を非表示 */
    box-sizing: border-box;
}
header.app_header .app_header_title {
    flex-grow: 1;
    min-width: 0;
    text-align: center;
}
header.app_header .app_header_heading {
    font-weight: bold;
    font-size: 16px;
    font-family: Arial, "Hiragino Kaku Gothic Pro", "Meiryo", "Yu Gothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN W3", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Helvetica, "MS PGothic", "ＭＳ Ｐゴシック", Osaka, sans-serif, 'PingFang SC';
}
header.app_header .app_header_heading.small {
    font-size: 14px;
}
header.app_header .app_header_control {
    display: flex;
    column-gap: 8px;
}
header.app_header a {
    display: block;
    color: #FFF;
}
header.app_header .header2_back img {
    rotate: 90deg;
}

/* 商談App ヘッダ・フッター追加 */
header.header2 {
    height: 56px;
    position: sticky;
    z-index: 1000;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 5px 16px;
    border-bottom: 1px solid #DEDEDE;
    color: #333;
    background-color: #fff;
    line-height: calc(20/14);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3),
                0 2px 6px 2px rgba(0,0,0,0.15);
    clip-path: polygon(0 0, 100% 0, 100% 10000px, 0 10000px); /* 左右の影を非表示 */
}
header.header2 .header2_title {
    flex-grow: 1;
    min-width: 0;
    text-align: center;
}
header.header2 .header2_heading {
    font-weight: bold;
    font-size: 1.6rem;
}
header.header2 .header2_heading.small {
    font-size: 1.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
header.header2 .header2_subtitle {
    padding: 0;
}
header.header2 .header2_back {
    order: -10;
}
header.header2 .header2_back img {
    rotate: 90deg;
}
header.header2 .header2_control {
    display: flex;
    column-gap: 8px;
}
header.header2 h1 {
    float: initial;
    margin: initial;
}

.nav_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 8px 16px;
    background-color: #FFF;
    font-size: 14px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 10px;
    z-index: 1000;
    box-shadow: 0 4px 8px 3px rgba(0,0,0,0.15),
                0 1px 3px rgba(0,0,0,0.3);
}
.nav_bar.column_1 {
    grid-template-columns: repeat(1,1fr);
}
.nav_bar.column_2 {
    grid-template-columns: repeat(2,1fr);
}
.nav_bar.column_3 {
    grid-template-columns: repeat(3,1fr);
}
.nav_bar.column_other {
    grid-template-columns: 150px 1fr;
}
.nav_bar .btn_outline_black {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    color: #333333;
    font-weight: bold;
    border-radius: 12px;
    background: #FFF;
}
.nav_bar .btn_orange {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-weight: bold;
    border-radius: 12px;
    background: #FF6010;
    padding: 0;
    font-size: 14px;
}
.nav_bar .btn_other {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-weight: bold;
    border-radius: 12px;
    background: #0071BC;
    padding: 0;
    font-size: 14px;
}
.nav_bar .mr_5 {
    margin-right: 5px;
}



/* 汎用ポップアップ */

.common_modal { overflow: hidden; }
.common_modal .modal_box_inner { display: flex; flex-direction: column; width: 650px; height: 100%; margin: auto; }
.common_modal .dash-tit2 {
    position: relative; box-sizing: border-box; flex: 0 0 auto; width: 100%; height: 40px; padding: 0 15px;
    background: #ccc; border-radius: 7px 7px 0px 0px;
}
.common_modal .dash-tit2 p { font-size: 16px; text-align: center; font-weight: bold; line-height: 40px; }
.common_modal .dash-tit2 img { position: absolute; top: 8px; right: 8px; }
.common_modal .dash-tit2 a.close_text { position: absolute; top: 8px; right: 8px; color: #333; }
.common_modal .dash-tit2 a.close_text:hover { opacity: .7; }

.common_modal .modal_body {
    display: flex; flex-direction: column; overflow: hidden; flex: 1 1 auto; background: #fff; border-radius: 0px 0px 7px 7px;
}

.common_modal .tab_navigation {
    display: flex; overflow: hidden; position: relative; bottom: -1px; z-index: 1; flex: 0 0 auto; padding: 10px 10px 0;
}
.common_modal .tab_navigation a {
    position: relative; padding: 9px 15px; background: #f2f2f2; border: solid 1px #b3b3b3;
    border-radius: 7px 7px 0 0; color: #333; font-size: 1.5rem; font-weight: bold;
}
.common_modal .tab_navigation a:not(:first-child) { margin-left: 10px; }
.common_modal .tab_navigation a:hover { background-color: #fff; }
.common_modal .tab_navigation a.active { background: #fff; border-bottom: none; color: #0071bc; }

.common_modal .dash-info-box2 {
    overflow-x: hidden; overflow-y: auto; box-sizing: border-box; flex: 1 1 auto; min-height: auto; padding: 20px 20px 15px;
    border-top: solid 1px #b3b3b3;
}
.common_modal .dash-info-box2:not(.active) { display: none; }
.common_modal .dash-info-box2 .form_table { width: 100%; }
.common_modal .dash-info-box2 .form_table tr th,
.common_modal .dash-info-box2 .form_table tr td { padding: 0 0 12px 0; border: none; font-size: 1.2rem; }
.common_modal .dash-info-box2 .form_table tr:last-child th,
.common_modal .dash-info-box2 .form_table tr:last-child td { padding-bottom: 0; }
.common_modal .dash-info-box2 .form_table tr th:nth-child(3) { padding-left: 20px; }
.common_modal .dash-info-box2 .form_table tr td:not([colspan="3"]) { width: 190px; }
.common_modal .dash-info-box2 .form_table tr th { font-weight: normal; padding-top: 5px; }
.common_modal .dash-info-box2 .form_table tr th .require {
    margin-left: 1px; color: #db0c10; font-size: 1rem; font-weight: bold;
}
.common_modal .dash-info-box2 .form_table tr td { vertical-align: middle; }
.common_modal .dash-info-box2 .form_table tr td input[type="text"],
.common_modal .dash-info-box2 .form_table tr td select,
.common_modal .dash-info-box2 .form_table tr td textarea { width: 100%; }
.common_modal .dash-info-box2 .form_table tr td input,
.common_modal .dash-info-box2 .form_table tr td select { height: 30px; padding: 0 10px; }
.common_modal .dash-info-box2 .form_table tr td textarea { padding: 6px 10px; }
.common_modal .dash-info-box2 .form_table tr td .date_fields { position: relative; }
.common_modal .dash-info-box2 .form_table tr td .date_fields .date_btn {
    appearance: none; -webkit-appearance: none; position: absolute; top: 0; bottom: 0; right: 5px;
    padding: 0; margin: auto; background: none;
}
.common_modal .dash-info-box2 .form_table tr td .price_input {
    width: 80% !important; margin-right: 10px; text-align: right;
}
.common_modal .dash-info-box2 .form_table tr.next_step_row td input { margin-bottom: 12px; }
/*.common_modal .dash-info-box2 .form_table tr.next_step_row td textarea { height: 80px; }*/
.common_modal .dash-info-box2 .form_btns { display: flex; justify-content: center; margin-top: 15px; }
.common_modal .dash-info-box2 .form_btns .btn {
    width: 140px; height: 36px; padding: 0 10px; margin: 0 10px; border-radius: 6px; font-size: 1.4rem;
}
.common_modal .dash-info-box2 .dash-option-title {
    display: flex; align-items: center; background: #efefef; border-radius: 4px; font-weight: bold; padding: 8px 10px;
}

/* 通知ポップアップ */
#modal-unread_chat_list .modal_box_inner {
    width: 780px;
}
.common_modal .modal_body.notice_list {
    overflow-y: scroll;
    max-height: 400px;
    padding: 10px 50px 30px;
}
.common_modal .modal_body.notice_list a {
    color: #333;
    position: relative;
}
.common_modal .modal_body.notice_list a:hover {
    color: #333;
}
.common_modal .modal_body.notice_list input[type=checkbox] {
    /*position: absolute; right: 6px; top: 5px;*/
    width: 16px; cursor: pointer;
}
.common_modal .modal_body.notice_list .delete {
    /*position: absolute;*/
    /*right: 7px;*/
    /*right: 56px; top: 48px;*/
    z-index: 99;
}

@media screen and (max-width: 780px) {
    #modal-unread_chat_list .modal_box_inner {
         width: 350px;
    }
    .common_modal .modal_body.notice_list {
        overflow-y: scroll;
        max-height: 400px;
        padding: 0px 10px 50px 25px;
    }
    .list-solid { font-size: 1.1rem; }
    .list-solid .ic_badge { position: absolute; top: 50%; left: -10px; transform: translateY(-50%); -webkit- transform: translateY(-50%); border-radius: 50px; background-color: #D03C3C; width: 6px; height: 6px;}
    .list-solid .day { width: 35%;}
}

/* ToDoポップアップ */
#modal-todo_list .modal_box_inner {
    width: 780px;
}
#modal-todo_list .todo_list {
    max-height: 430px;
    padding: 10px 50px 30px;
    overflow-y: scroll;
}
/*#modal-todo_list .todo_list a {
    color: #333;
    position: relative;
}
#modal-todo_list .todo_list span {
    position: relative;
}*/
#modal-todo_list .todo_list .staff {
    width: 15%;
    padding-right: 10px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#modal-todo_list .todo_list .customer {
    width: 15%;
    padding-right: 10px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#modal-todo_list .todo_list .title_area {
    width: 40%;
    padding-right: 10px;
    box-sizing: border-box;
}
#modal-todo_list .todo_list .title_area .title {
    padding-bottom: 4px;
    font-weight: bold;
}
#modal-todo_list .todo_list .deadline {
    width: 18%;
}
#modal-todo_list .todo_list .btn_area {
    width: 12%;
}
#modal-todo_list .todo_list input[type=checkbox] {
    /*position: absolute;*/
    /*right: 6px;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    width: 16px;
    cursor: pointer;
}
#modal-todo_list .todo_list .more {
    /*position: absolute;*/
    /*right: 36px;*/
    /*right: 105px;*/
    /*top: 48px;*/
    z-index: 99;
}
#modal-todo_list .todo_list .more img {
    width: 24px;
    height: 24px;
}
#modal-todo_list .todo_list .delete {
    /*position: absolute;*/
    /*right: 7px;*/
    /*right: 56px;*/
    /*top: 48px;*/
    z-index: 99;
}
#modal-todo_list .todo_list .deadline span {
    display: block;
    padding-left: 18px;
    position: relative;
}
#modal-todo_list .todo_list .deadline span::before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background: url("/img/mgr/icon-clock.svg") 0 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 2px;
    left: 0;
}
#modal-todo_list .todo_list .date_approaching {
    background: #FEFFF0;
}
#modal-todo_list .todo_list .date_approaching .ic_badge {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: url("/img/mgr/icon_alert_1.svg") no-repeat;
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
}
#modal-todo_list .todo_list .date_overdue {
    /*background: #FFD9D9;*/
    background: #FFF2F2;
}
#modal-todo_list .todo_list .date_overdue .ic_badge {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: url("/img/mgr/icon_alert_2.svg") no-repeat;
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
}

.setting_cd_values_css {height: 15px !important;}
.setting_cd_btn_css{padding: 2px 7px !important;}

.guide_action {
    border-color: #0068b7;
    background-color: rgb(252, 252, 252) !important;
    color: #0068b7 !important;
    font-size: 16px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
}
.guide_action:hover {
    opacity: 0.6;
    color: #0068b7 !important;
}

.word-keep {
    word-break: keep-all;
}