@charset "utf-8";

body, h1, h2, h3, h4, h5, h6, input, button, textarea, select, textarea, select {font-family:Arial,游ゴシック体,YuGothic,メイリオ,Meiryo,sans-serif}

.cheditor-popup-cframe { height:auto !important; }

.cutstr {overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word;}
.cut2str {overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;}
.cut3str {overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap:break-word;}
.cut4str {overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-wrap:break-word;}

.clearfix {clear:both}
.h10 {height:10px;}
.h20 {height:20px;}
.h30 {height:30px;}
.h40 {height:40px;}
.h50 {height:50px;}
.h60 {height:60px;}
.h70 {height:70px;}
.h80 {height:80px;}
.h90 {height:90px;}
.h100 {height:1030px;}

.color_red {color:#FF0000}
.color_01 {color:#ff008c}
.text_link {text-decoration:underline}

.text-right {text-align:right}

.displaynone {display:none}

.bold {font-weight:700}

.active {color:#ffffff}

.btn {border-radius:5em !important}

/*a img:hover {filter: alpha(opacity=65);opacity: .65;-ms-filter: "alpha(opacity=65)"}*/

.tbl_wrap2 {margin:0 10px 10px}
.tbl_wrap2 table {border-collapse:collapse;border-spacing:0}
.tbl_wrap2 caption {padding:10px 0;color:#4b8b99;font-weight:bold;text-align:left}

.w100p {width:100%}

.tbl_head04 {margin:0 0 10px}
.tbl_head04 thead th {color:#fff;background:#666;padding:8px;border:1px solid #e8e8e8}
.tbl_head04 thead td {color:#fff;background:#666;padding:8px;border:1px solid #e8e8e8;word-break:break-all}
.tbl_head04 tbody th {padding:8px;background:#f5f5f5;border:1px solid #e8e8e8}
.tbl_head04 tbody td {color:#666;padding:8px;border:1px solid #e8e8e8;word-break:break-all}

.tbl_head05 {margin:0 0 10px}
.tbl_head05 th {padding:8px;background:#f5f5f5;border:1px solid #e8e8e8;width:25%}
.tbl_head05 td {color:#666;padding:8px;border:1px solid #e8e8e8;word-break:break-all;width:75%}

.tbl_head06 {margin:0 0 10px}
.tbl_head06 th {padding:8px;background:#f5f5f5;border:1px solid #e8e8e8}
.tbl_head06 td {color:#666;padding:8px;border:1px solid #e8e8e8;word-break:break-all}

.tbl_head07 {margin:0 0 10px}
.tbl_head07 th {padding:8px;background:#f5f5f5;border:1px solid #e8e8e8;text-align:center}
.tbl_head07 td {color:#666;padding:8px;border:1px solid #e8e8e8;word-break:break-all;text-align:center}
.tbl_head07 td.txt {padding:8px;background:#f5f5f5;border:1px solid #e8e8e8;text-align:left}

.onecoinss .title02 {background:#666;color:#ffffff;font-size:18px;font-weight:700;padding:10px;text-align:center;margin-top:15px;}
.onecoinss .index-box03 {border:2px solid #666;font-size:13px;padding:20px 15px;}
.onecoinss .index-box03 table {width:100%;border-collapse:collapse;border-spacing:0;font-size:12px;}
.onecoinss .index-box03 th {padding:8px;border:1px solid #666;background:#f5f5f5}
.onecoinss .index-box03 td {padding:8px;border:1px solid #666}
.onecoinss a.btn_b02, .onecoinss .btn_b02 {display:inline-block;background:#ffc700;padding:0 10px;color:#000;text-decoration:none;border:0;vertical-align:middle;}
.onecoinss a.btn_b02:hover, .onecoinss .btn_b02:hover {background:#ffd038}

#foot_table {width:100%;font-size:12px;color:#333;background:#f5f5f5;padding:15px;}
#foot_table img {vertical-align:middle;margin-right:10px;}
#foot_table table {width:100%;border-collapse:collapse;border-spacing: 0;font-size:12px;color:#888;}
#foot_table table td {width:33.333%;padding:10px 10px 20px 10px;vertical-align:top;}
#foot_table .fcon01 {padding:10px 15px;background:#ffffff;border-radius:10px;margin-bottom:10px;}
#foot_table .fcon01 h2 {padding:0 10px;margin:0;color:#333;}
#foot_table .fcon01 h2 i {font-size:1.5em;margin:0;vertical-align:middle;}
#foot_table .fcon02 {padding:20px;background:#ffffff;border-radius:10px;margin-bottom:20px;line-height:20px;}
#foot_table .fcon02 h3 {border-bottom:1px solid #DDD;padding:0;margin:0 0 10px 0;color:#333;}
#foot_table .fcon02 h3 i {font-size:1.2em;margin:0;vertical-align:middle;}
#foot_cs {text-align:center;font-size:12px;margin-top:10px}

.sub-banner {width:100%;margin:0 auto;text-align:center;}
.sub-banner ul, li{margin:0;padding:0;list-style:none;}
.sub-banner a img {border:1px solid #333}
.sub-banner img {width:calc(100% - 2px);}
.sub2-banner {width:100%;margin:0 auto;text-align:center;}
.color_red {color:#ff0000;}
.sub2-content img {max-width:100%;}
.sub2-content .title {background:#23D59D;color:#ffffff;font-size:18px;font-weight:700;padding:10px;text-align:center;margin-top:15px;}
.sub2-content .index-box01 {border:2px solid #23D59D;font-size:15px;padding:20px 30px;}
.sub2-content .index-box02 {background: #FCF7F7;border-radius: 10px;padding:20px 30px;}
.sub2-content .title02 {background:#666;color:#ffffff;font-size:18px;font-weight:700;padding:10px;text-align:center;margin-top:15px;}
.sub2-content .index-box03 {border:2px solid #666;font-size:13px;padding:20px 15px;}
.sub2-content .index-box03 table {width:100%;border-collapse:collapse;border-spacing:0;font-size:12px;}
.sub2-content .index-box03 th {padding:8px;border:1px solid #666;background:#f5f5f5;width:80px;}
.sub2-content .index-box03 td {padding:8px;border:1px solid #666}

#left_box {width:265px}
#left_box img {max-width:100%}
#left_item_box {background:#f5f5f5;padding:10px;margin-bottom:10px;font-size:13px;}
.left_item_box a.btn01 {display:inline-block;margin:3px 0;padding:3px 8px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
.left_item_box a.btn01:focus, a.btn01:hover {text-decoration:underline}
.left_item_box a.btn02 {display:inline-block;margin:3px 0;padding:3px 8px;border:1px solid #ffc700;background:#ffc700;color:#000;text-decoration:none;vertical-align:middle}
.left_item_box a.btn02:focus, a.btn01:hover {text-decoration:underline}
.font-13 {font-size:13px}
#left-search {margin-bottom:30px;}
#left-category {margin-bottom:30px;}
#left-category ul, li{margin:0;padding:0;list-style:none;}
#left-category ul {margin-bottom:10px;}
#left-category ul li {padding:0 0 2px 10px;font-size:13px;}
#left-search {background:#ffa8a8;padding:10px;}
#left-search form {padding:0;margin:0;}
#left-search .frm_input {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;padding:5px;width:120px;}
#left_box .daystop {font-size:12px;text-align:center;}

.btn_re_submit {border:1px solid #ff008c;background:#ff008c;color:#fff;cursor:pointer;border-radius:3px;display:block;margin:0 0 10px 0;padding:15px 0;font-weight: 700;}
.btn_re_submit:hover {background:#ff008c}

.noti-icon .bx-bell {padding-top:15px;}
.header-login {padding-top:15px;}

.logo-lg {font-size:2rem;color:#ffffff;font-weight:700}
.logo {line-height: 65px;}

.foot {
    padding: 20px calc(24px / 2);
    position: absolute;
    right: 0;
    color: #74788d;
    left: 250px;
    height: 60px
}
@media screen and (max-width: 991.98px) {
    .foot {
        left: 0;
    }
}

.table-light {
  --bs-table-bg: #343a40;
  --bs-table-striped-bg: #3e444a;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #484e53;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #43494e;
  --bs-table-hover-color: #fff;
}

.table-light th {
  color: #fff !important;
}
.table-light th a {
  color: #fff !important;
}

.table > :not(caption) > * > * {
  border-bottom-width: 0px;
}


.table-responsive table tbody td {
    border-bottom: 1px solid #dddddd;
}
.table-responsive .even {background:#F8F8FB}

.btn-light {background-color: #ddd;border-color: #ddd;}
.btn-light:hover {background-color: #ccc;border-color: #ccc;}

#logo {background: #485ec4;text-align:center;padding:0 10px;font-weight:700;font-size:2em;color:#fff;height: 50px;line-height: 50px;}
#logo a {color:#fff}
#logo img {height:40px;margin-top:-5px;margin-right:5px}

#page-topbar {
  min-width:320px
}

.navbar-header {
  height: 50px;
}

.vertical-menu {
  top: 100px;
}

.main-content {
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
.page-content {
  padding: calc(70px + 24px) 0 60px 0;
}
}
.header-item {
  height: 50px;
}

.vertical-collpsed .vertical-menu {
  width: 0px !important;
}

.vertical-collpsed .main-content {
  margin-left:0;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {padding: 15px 0px !important}
#sidebar-menu ul li ul.sub-menu li a {padding: .4rem 1.5rem .4rem 2.5rem}
.prepayment_point {padding:10px;border:1px solid #556ee6;text-align:center;border-radius:5px;font-size:1.25em}

#bo_v_con table {width:100%;border-collapse:collapse;border-spacing:0 5px;border:1px solid #ececec;margin:0 0 10px} 
#bo_v_con th {padding:8px 5px;border:1px solid #e8e8e8;background:#f5f5f5;text-align:center}
#bo_v_con td {padding:5px 5px;border:1px solid #ecf0f1;word-break:break-all;text-align:center}

.card-body-w  {border:5px solid #343a40}

@media (max-width: 575px) {
  .d-esm-block {
    display: block !important; }
}

.cancel_class {background:#f8d7da !important;}
.over_class {background:#c4fffd !important;}
.confirm_class {background:#fffdea !important;}
.stop_class {background:#ffeff3 !important;}

.alert_msg {padding:10px;font-size:18px}

.td_wr50 {width:50px}
.td_wr60 {width:60px}
.td_wr70 {width:70px}
.td_wr80 {width:80px}
.td_wr90 {width:90px}
.td_wr100 {width:100px}
.td_wr200 {width:200px}
.td_wr300 {width:300px}
.td_wr400 {width:400px}
.td_wr500 {width:500px}

.table-nowrap td, .table-nowrap th {
  white-space: normal;
}

.wr_status {border:2px solid #485ec4;padding:15px;}
.wr_error {border:2px solid #ff0000;padding:15px;}
.wr_dev {border:2px solid #000000;padding:15px;}
.wr_callback {border:2px solid #38d159;padding:15px;}
.status_box {padding:10px;background:#f5f5f5;margin:0 0 15px 0;border:1px solid #ddd}

#excelfile_upload {margin:10px ;padding:20px;border:1px solid #e9e9e9;background:#fff}
#excelfile_upload label {font-weight:bold}

.top_nav {line-height:50px}

p {margin:0;padding:0}

.class1 {background:#0B5ED7;color:#ffffff;padding:5px 8px;border-radius:50%}
.class2 {background:#157347;color:#ffffff;padding:5px 8px;border-radius:50%}
.class3 {background:#BB2D3B;color:#ffffff;padding:5px 8px;border-radius:50%}
.class4 {background:#FFCA2C;color:#ffffff;padding:5px 8px;border-radius:50%}
.class5 {background:#31D2F2;color:#ffffff;padding:5px 8px;border-radius:50%}
.class6 {background:#5C636A;color:#ffffff;padding:5px 8px;border-radius:50%}

.card_sbox_color {border:3px solid #CC0033}
.card_sbox_color label {display:block}
.card_wbox_color {border:3px solid #000}
.card_wbox_color label {display:block}

.form-select {display:inline-block;width:auto}

/* aladin 게시판 폼(write #bo_w / search .card_sbox_color): 셀렉트를 컬럼 폭에 맞춰 긴 옵션 넘침 방지 */
#bo_w .row > [class*="col-"],
.card_sbox_color .row > [class*="col-"] {min-width:0}
#bo_w .form-select,
.card_sbox_color .form-select {display:block;width:100% !important;max-width:100%}
/* ===== モバイルAPI 照会結果テーブル (yh_api_result_html) =====
   1-1 / 1-2 / 1-7 / 2-2 / 2-3 / 3-1 / 3-2 / A2-1 / A2-2 の照会結果。
   応答構造がAPIごとに違い入れ子になるため、罫線と余白をここで一括指定する。 */

/* 罫線色。薄すぎると項目の区切りが追いにくいので既定(#dee2e6)より濃くする。
   濃さの調整はこの1変数だけ変えればよい。 */
.yh-api-result {--yh-api-border:#8d97a1}

.yh-api-result table {margin:0}
.yh-api-result table,
.yh-api-result thead th,
.yh-api-result th,
.yh-api-result td {border-color:var(--yh-api-border) !important}
.yh-api-result th,
.yh-api-result td {padding:.45rem .6rem; vertical-align:middle; word-break:break-all}

/* 見出し列(項目名)は左寄せ・折返しなしで読みやすく */
.yh-api-result > table > tbody > tr > th {
    text-align:left; white-space:nowrap; font-weight:600; width:240px;
}

/* 値が空の行を目立たせない */
.yh-api-result .text-muted {opacity:.6}

/* 入れ子テーブル (td.yh-nest): セルの中に表が入るケース。
   td の padding がそのまま表の外側の余白になってしまうので padding を殺し、
   表を td いっぱいに広げる。外周の罫線は親セルのものと重なるため消す。 */
.yh-api-result td.yh-nest {padding:0}
.yh-api-result td.yh-nest > table,
.yh-api-result td.yh-nest > .table-responsive {margin:0; width:100%; max-width:none; border:0}
.yh-api-result td.yh-nest > .table-responsive > table {margin:0; width:100%; border:0}

/* 入れ子の表の外周罫線を落とす (親セルの罫線と重なって二重線になるため)。
   Bootstrap の .table-bordered は罫線を次の2箇所に分けて付けている:
     .table-bordered > :not(caption) > *     -> tr    に border-width:1px 0  (横罫線)
     .table-bordered > :not(caption) > * > * -> td/th に border-width:0 1px  (縦罫線)
   つまり横罫線は tr、縦罫線はセルを狙わないと消えない。
   (tbody には罫線が無いので tbody を指定しても効かない) */

/* 横: 入れ子の表の上端/下端 ← 親セルの横罫線と重なる */
.yh-api-result td.yh-nest table > thead > tr:first-child,
.yh-api-result td.yh-nest table > tbody > tr:first-child {border-top:0}
.yh-api-result td.yh-nest table > tbody > tr:last-child {border-bottom:0}

/* 縦: 入れ子の表の左端/右端 ← 親セルの縦罫線と重なる */
.yh-api-result td.yh-nest table > thead > tr > *:first-child,
.yh-api-result td.yh-nest table > tbody > tr > *:first-child {border-left:0}
.yh-api-result td.yh-nest table > thead > tr > *:last-child,
.yh-api-result td.yh-nest table > tbody > tr > *:last-child {border-right:0}

/* 一覧表(オブジェクト配列)の見出しは中央・折返しなし */
.yh-api-result thead th {text-align:center; white-space:nowrap; font-weight:600}

/* 行の視認性 (照会結果は読むだけなのでホバー強調はしない) */
.yh-api-result tbody tr.even {background:rgba(0,0,0,.02)}

/* 横に長い応答(SO一覧など)は表内だけ横スクロールさせ、ページ自体は崩さない */
.yh-api-result .table-responsive {overflow-x:auto; max-width:100%}

/* 照会結果のページャ (3-1 SO一覧 / A2-1 ALADIN-SO一覧)。
   APIは全件返すので表示側で50件ずつ切り出している。 */
.yh-api-pager {
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem;
}
.yh-api-pager .yh-api-total {font-size:.9rem}
.yh-api-pager .pagination {margin:0}

/* ===== 日時入力 (日付 + 時 + 分) を必ず1行に収める =====
   yh_datetime_input() が出す .yh-dt。datetime-local を使わず3分割しているのは
   AM/PM 表記がブラウザ言語で決まり強制できないため (24時間表記を確実にする)。

   ※上の「#bo_w .form-select {width:100% !important}」は長い選択肢の
     はみ出し対策。ここでは時/分が各100%幅になって折り返してしまうので、
     .yh-dt の中だけ打ち消す。 */
/* .input-group は width:100% なので、そのままだと日付欄が余白を全部吸って間延びする。
   inline-flex + flex:0 0 auto で「中身の幅」に収める。 */
.yh-dt {display:inline-flex; width:auto; max-width:100%; flex-wrap:nowrap}
.yh-dt > input[type="date"] {flex:0 0 auto; width:auto; min-width:0}

#bo_w .yh-dt > .form-select,
.card_sbox_color .yh-dt > .form-select,
.yh-dt > .form-select {
    display:block; width:auto !important; max-width:none;
    flex:0 0 auto; padding-right:1.9rem;
}

/* 表の下に置く2つ目のページャ (件数表示なし) は右寄せにする */
.yh-api-pager-bottom {margin-top:.6rem; margin-bottom:0; justify-content:flex-end}

/* 検索フォームの開閉ボタン (登録系ボードの一覧)。
   既定は畳んでおき、検索実行中(sch=1)は開いた状態で出す。 */
.yh-sch-btn {margin-bottom:0}
.yh-sch-btn[aria-expanded="true"] {margin-bottom:1rem}

/* カードの内側余白を少し詰める (bootstrap 既定 1.25rem)。
   一覧・フォームともカードが入れ子になる画面が多く、既定だと余白が嵩む。 */
.card-body {padding:0.85rem}

/* 一覧の見出しは折り返さない。
   スキン側の .table-nowrap (white-space:nowrap) だけでは折り返されることがあるため、
   ID を含む優先度の高い指定で確実にする。 */
#bo_list thead th {white-space:nowrap}

/* トップの掲示板ボタン一覧 (theme/basic/mobile/index.php)。
   掲示板名は「回線グループの追加チャージ(クーポン)容量・期間追加」のように長いので、
   高さを揃えて折り返し前提で表示する。 */
.yh-board-btn {
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:3.4rem; padding:.5rem .6rem;
    font-size:.85rem; line-height:1.3;
    white-space:normal; word-break:break-word;
}

/* API処理コード: title属性に仕様書の説明を出す (extend/yh_process_code.php) */
.yh-pcode {border-bottom:1px dotted #888; cursor:help}