@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap');

/* X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px */
/* // X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px) スマホ以下
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px) タブレット以下
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px
@media (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... } */

/* 共通 */
html {
    font-family: "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
    /* font-size: 1.12rem; */
}

/* タブレット以下 */
@media (max-width: 767.98px) {
    html {
        font-size: 1rem;
    }
}

.noto_sans {
    font-family: 'Noto Sans JP', sans-serif;
}

body {
    font-family: "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
    color: #000;
    font-weight: 500;
    background-color: #eeece5;
}

a, a:hover {
    color: #444444;
}

h1, h2, h3, h4, p, ul, ol, li {
    margin: 0;
    padding: 0;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

label {
    font-size: 0.75rem;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield;
}

a.disabled, a:disabled, .btn.disabled, .btn:disabled, fieldset:disabled .btn {
    opacity: .3;
    pointer-events: none;
}

/* メインレイアウト */
header {
    padding: .5rem;
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 1000 !important;
    /* border-bottom: 1px solid #0f680d; */
}

header p.user {
    font-size: 0.687rem;
}

main {
    font-size: .75rem;
    padding-top: 60px;
    padding-bottom: 120px;
}

footer {
    padding: .5rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    /* height: 50px; */
    /* border-top: 1px solid #ddd; */
    /* border-top: 1px solid #ff1e00; */
    /* background-color: #fff; */
    /* background-color: #fffbe8; */
    font-size: .75rem;
    z-index: 999;
}

/* フォーム系 */
.form-control, .form-select {
    color: #000;
    /* background-color: #fffef7; */
    font-size: 0.812rem;
    width: auto;
}

.form-control-sm, .form-select-sm {
    font-size: 0.75rem;
}

.btn-xs {
    padding: 0.1rem 0.3rem !important;
    font-size: 0.75rem;
}

.btn {
    font-size: 0.75rem;
}

::placeholder {
    color: #aaaaaa !important;
    font-size: 0.687rem;
}

input[type="checkbox"] {
    transform: scale(1.4);
}

.form-check-input:checked {
    background-color: #ff1e00;
    border-color: #ff1e00;
}

/* アラート */
.alert {
    position: absolute;
    top: 100px;
    width: 99%;
    border-radius: .2rem;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.75rem !important;
    border: 1px solid #ff1e00 !important;
    /* border:none !important; */
    background-color: #fff0e7 !important;
    color: #ff1e00 !important;
    z-index: 1000 !important;
    font-weight: 500;
    padding: 1rem;
    background: rgba(255, 240, 231, 0.9) !important;
}

/* オリジナプラン登録編集中 */
.plan_edit {
    position: absolute;
    top: 60px;
    width: 99%;
    border-radius: .2rem;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.75rem !important;
    border: 1px solid #fff !important;
    /* background-color: #fff0e7 !important; */
    color: #fff !important;
    z-index: 1000 !important;
    font-weight: 500;
    padding: .4rem;
    background: #ff1e00 !important;
}


/* ページ送り */
.pagination {
    font-size: 0.75rem !important;
    z-index: 1 !important;
}

.pagination strong {
    color: #fff;
    background-color: #0d6efd;

}

.pagination strong, .pagination a {
    padding: 0.375rem 0.75rem;
    position: relative;
    display: block;
    margin-right: .2rem;
    text-decoration: none;
    border: 1px solid #dee2e6;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* モーダル */
.modal {
    font-size: .75rem !important;
}

.modal label {
    font-size: .75rem !important;
}

.modal-header {
    color: #000 !important;
    /* background-color: #eeece5 !important; */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: #343a40;
    color: #fff !important;
}

.modal-body {
    line-height: 1.6;
}

h5.modal-title {
    color: #fff !important;
    font-weight: 500;
    font-size: .812rem !important;
}

/* タイトル */
.big_title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.0rem;
    font-weight: 700;
    color: #444 !important;
}

/* アコーディオン */
.toggle_btn {
    cursor: pointer;
}

/* デバイス別のdisplay */
/* スマホ以下非表示 */
@media (max-width: 767.98px) {
    .tablet {
        display: none !important;
    }
}

/* タブレット以下非表示 */
@media (max-width: 991.98px) {
    .pc {
        display: none !important;
    }
}

/* 価格表示 */
#plan_total {
    width: 140px;
    display: inline-block;
    text-align: right;
}

#all_total {
    width: 140px;
    height: 20px;
    display: inline-block;
    text-align: right;
}

#all_tax, #plan_tax, #all_truncate, #plan_truncate {
    width: 60px;
    display: inline-block;
    text-align: right;
}

/**スマホ対応****************/
/* スマホ以下*/
@media (max-width: 767.98px) {
    .sp-small {
        padding: 0.4rem 0.25rem !important;
        font-size: .687rem !important;
    }
}

/* ヘルプアイコン */
.help_icon {
    cursor: pointer;
}

/** multipleSelect ****************/
.ms-choice {
    border: 1px solid #ced4da !important;
}

.tooltip-inner {
    max-width: 100%;
    font-size: .8em !important;
}

.tooltip-multiline .tooltip-inner {
    white-space: pre-wrap;
}

.choice_txt {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
    cursor: pointer;
    font-size:1rem;
}