@charset "utf-8";
@import 'vender/foundation.css';
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');
/*-- Reset Foundation.. --------------------------------------------------------------------------*/

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    line-height: 1.5;
    color: #333333;
}

/*font-family*/

body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    display: block;
    margin: 0;
    font-weight: bold;
}

.h1-m, .h2-m, .h3-m, .h4-m, .h5-m, .h6-m {
    margin-bottom: 1rem;
}

.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, label {
    color: #333333;
}

/*ベースのフォントカラーは適宜変更*/

ul, ol, dl, ul ul, ol ul, ul ol, ol ol {
    margin: 0;
    list-style: none;
}

dl dt, strong, b, em {
    font-weight: normal;
    margin: 0;
}

em {
    font-style: normal;
}

button, optgroup, select {
    margin: 0;
}

div, p {
    margin: 0;
    font-size: 1.3rem;
}

p {
    margin-bottom: 1rem;
}

small, label, legend {
    font-size: 1.2rem;
}


article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

/*リンク*/

a, a:hover, a:focus {
    color: #2386C8;
}

a:hover {
    opacity: .8;
}

div a:hover {
    opacity: 1;
}

/*見出しフォントサイズ*/

h1, .h1 {
    font-size: 3rem;
}

h2, .h2 {
    font-size: 2.6rem;
}

h3, .h3 {
    font-size: 2.2rem;
}

h4, .h4 {
    font-size: 1.8rem;
}

h5, .h5 {
    font-size: 1.4rem;
}

@media only screen and (max-width: 767px), only screen and (max-width: 896px) and (orientation: landscape) {
    
    
    body {
        font-size: 1.4rem;
    }
    p, div {
        font-size: 1.4rem;
    }
    small, label, legend {
        font-size: 1.3rem;
    }
    /*見出しフォントサイズ*/
    
    h1, .h1 {
        font-size: 2.8rem;
    }
    h2, .h2 {
        font-size: 2.4rem;
    }
    h3, .h3 {
        font-size: 2rem;
    }
    h4, .h4 {
        font-size: 1.6rem;
    }
    h5, .h5 {
        font-size: 1.6rem;
    }
    
}

/*適宜変更*/

[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
    font-size: 1.3rem;
}

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {
    margin-bottom: .5rem;
}

hr {
    margin: 1rem auto;
    border-bottom: 1px solid #ECEBEA;
    max-width: none;
}

/*-- button -----------------------------------------------------------------------*/

.btn {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    position: relative;
    font-size: 1.3rem;
    padding: 0.8rem 1.6rem;
    line-height: 1.4;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.35s ease 0s;
}

.btn_normal {
    color: #276DAE;
    border: 1px solid #DDDBDA;
    background-color: #fff;
}

.btn_normal:hover {
    background-color: #F4F6F9;
}

.btn_brand {
    color: #fff;
    background-color: #2386C8;
}

.btn_brand:hover {
    background-color: #276DAE;
}

.btn_outline {
    color: #276DAE;
    border: 1px solid #276DAE;
    background-color: #fff;
}

.btn_outline:hover {
    background-color: #2386C8;
    color: #fff;
    border: 1px solid #2386C8;
}

.btn_danger {
    color: #fff;
    background-color: #CC4940;
}

.btn_danger:hover {
    background-color: #AA2920;
}

.btn_success {
    color: #fff;
    background-color: #389F48;
}

.btn_success:hover {
    background-color: #2B8A3D;
}

.btn_left-icon i {
    margin-right: 1rem;
}

.btn_right-icon i {
    margin-left: 1rem;
    transition: all 0.2s ease 0s;
}

.btn-group {
    position: relative;
    display: inline-block;
}

.i-dropdown {
    display: inline-block;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.btn .i-dropdown {
    margin-left: .5rem;
}

.dropdown-menu {
    border: 1px solid #DDDBDA;
    padding: .5rem 0 .8rem;
    border-radius: .4rem;
    background-color: #fff;
    position: absolute;
    min-width: 15rem;
    line-height: 1.4;
    z-index: 100;
    margin: .2rem 0 0;
    top: 100%;
    display: none;
}

.open>.dropdown-menu {
    display: block;
}

/*どこを押してもメニューが閉じるように*/

.btn-group.open::after {
    content: "";
    width: 100%;
    height: 100%;
    cursor: default;
    /* カーソルはデフォルトに戻しておく */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}

.dropdown-menu__link {
    display: block;
    padding: .8rem 1.2rem;
}

.dropdown-menu__link:hover {
    background-color: #F4F6F9;
}

.btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn_block {
    display: block;
    width: 100%;
}

/*ボタンサイズ*/

.btn_m {
    padding: 1.1rem 2rem;
}

.btn_l {
    padding: 1.4rem 3rem;
}

/*ボタンテキスト*/

.btn_text-normal, .btn_text-underline {
    color: #2386C8;
    padding-left: .2rem;
    padding-right: .2rem;
}

.btn_text-underline:after {
    content: "";
    position: absolute;
    display: block;
    width: 6rem;
    height: .3rem;
    background-color: #2386C8;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    transition: all 0.35s ease 0s;
}

.btn_text-normal:hover, .btn_text-underline:hover {
    color: #276DAE;
}

.btn_text-underline:hover:after {
    background-color: #276DAE;
    width: 100%;
}

.btn_right-icon:hover > i {
    margin-left: 1.5rem;
}

/*ボタンアイコン*/

.btn_icon {
    padding: .5rem .8rem;
    font-size: 1.3rem;
}

.btn_icon-normal {
    color: #706E6B;
}

.btn_icon-normal:hover {
    color: #3DACDF;
}
.btn_icon-white {
    color: #fff;
}

.btn_icon-white:hover {
    color: #fff;
    opacity: .7;
}

.btn_icon-outline {
    color: #706E6B;
    border: 1px solid #DDDBDA;
    background-color: transparent;
}

.btn_icon-outline:hover {
    color: #276DAE;
    background-color: #F4F6F9;
}

.btn_icon-outline:focus {
    background-color: #2386C8;
    color: #fff;
    border: 1px solid #2386C8;
}

.btn_icon-brand {
    color: #fff;
    border: 1px solid #2386C8;
    background-color: #2386C8;
}

.btn_icon-brand:hover {
    background-color: #276DAE;
    border: 1px solid #276DAE;
}

.btn_icon-brand:focus {
    background-color: #276DAE;
    color: #fff;
    border: 1px solid #276DAE;
}



/*ボタンアイコンサイズ*/

.btn_icon-m {
    padding: .8rem 1rem;
    font-size: 1.6rem;
}

.btn_icon-l {
    padding: 1rem 1.2rem;
    font-size: 1.8rem;
}

/*グループボタン*/

/*左端のボタン*/

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*真ん中のボタン*/

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

/*右端のボタン*/

.btn-group>.btn:last-child:not(:first-child), .btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group>.btn {
    position: relative;
    float: left;
}

.btn-group .btn+.btn, .btn-group .btn+.btn-group {
    margin-left: -.1rem;
}

/*-- アイコンのみ --------------------------------------------------------------------*/
.icon {
    font-size: 1.3rem;
    padding-right: .5em;
}

.icon-normal {
    color: #706E6B;
}

.icon-white {
    color: #fff;
}

.icon-m {
    font-size: 1.6rem;
}

.icon-l {
    font-size: 1.8rem;
}

/*-- Badge -------------------------------------------------------------------------*/

.badge {
    padding: .5rem 1rem;
    border-radius: 5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

a.badge:hover {
    opacity: 1;
}

.badge+.badge {
    margin-left: 1rem;
}

.badge-default {
    background-color: #ECEBEA;
    color: #3E3E3C;
}

a.badge-default:hover {
    background-color: #B2B3B5;
    color: #3E3E3C;
}

.badge-darker {
    background-color: #706E6B;
    color: #fff;
}

a.badge-darker:hover {
    background-color: #575553;
    color: #fff;
}

.badge-lightest {
    background-color: #fff;
    color: #3E3E3C;
    border: 1px solid #DDDBDA;
}

a.badge-lightest:hover {
    background-color: #EAEAEA;
}

.badge-primary {
    background-color: #2386C8;
    color: #fff;
}

a.badge-primary:hover {
    background-color: #276DAE;
    color: #fff;
}

.badge-danger {
    background-color: #CC4940;
    color: #fff;
}

a.badge-danger:hover {
    background-color: #AA2920;
    color: #fff;
}

.badge-warning {
    background-color: #E8A014;
    color: #fff;
}

a.badge-warning:hover {
    background-color: #E8900C;
    color: #fff;
}

.badge-success {
    background-color: #389F48;
    color: #fff;
}

a.badge-success:hover {
    background-color: #2B8A3D;
    color: #fff;
}

/*-- Progress bar ------------------------------------------------------------------*/
.progress {
    border-radius: 0;
    background-color: #F4F6F9;
}

.progress-meter {
    border-radius: 0;
}

.progress-meter_default {
    background-color: #ECEBEA;
}
.progress-meter_darker {
    background-color: #706E6B;
}
.progress-meter_primary {
    background-color: #2386C8;
}
.progress-meter_danger {
    background-color: #CC4940;
}
.progress-meter_warning {
    background-color: #E8A014;
}
.progress-meter_success {
    background-color: #389F48;
}
.progress-meter_primary {
    background-color: #2386C8;
}
.progress-meter_primary {
    background-color: #2386C8;
}

/*-- Alert -------------------------------------------------------------------------*/

.alert {
    padding: 1rem 2.5rem;
    color: #fff;
    border-radius: .4rem;
    font-weight: bold;
    margin-bottom: 2rem;
    position: relative;
}

.alert i {
    margin-right: 1rem;
    font-size: 1.5rem;
}

.alert__link {
    color: #fff;
    text-decoration: underline;
    margin-left: 1em;
}

.alert__link:hover, .alert__link:focus {
    color: #fff;
}

.alert .close {
    position: absolute;
    cursor: pointer;
    float: right;
    right: 0rem;
    color: #fff;
    top: 1rem;
}

.alert-body {
    background-color: #F4F6F9;
    color: #333;
    font-weight: normal;
    padding: 2rem 2.4rem;
    margin: 1rem -2.5rem -1rem -2.5rem;
    border-radius: 0 0 .4rem .4rem;
}

.alert-default {
    background-color: #706E6B;
    box-shadow: 0 3px #51504E;
    border: 1px solid #B2B3B5;
}

.alert-warning {
    background-color: #E8A014;
    box-shadow: 0 3px #E8900C;
    border: 1px solid #E8A014;
}

.alert-danger {
    background-color: #CC4940;
    box-shadow: 0 3px #AA2920;
    border: 1px solid #CC4940;
}

.alert-primary {
    background-color: #2386C8;
    box-shadow: 0 3px #276DAE;
    border: 1px solid #2386C8;
}

.alert-success {
    background-color: #389F48;
    box-shadow: 0 3px #2B8A3D;
    border: 1px solid #389F48;
}

.alert-info {
    background-color: #ECEBEA;
    color: #333;
    box-shadow: 0 3px #B2B3B5;
    border: 1px solid #ECEBEA;
}

.alert-info i, .alert-info .close {
    color: #706E6B;
}

.alert-info .alert__link {
    color: #333;
}

@media only screen and (max-width: 767px), only screen and (max-width: 896px) and (orientation: landscape) {
    .alert {
        padding: 1rem 2.5rem 1rem 1.5rem;
    }

    .alert-body {
        margin: 1rem -2.5rem -1rem -1.5rem;
    }
}

/*-- Form -------------------------------------------------------------------------*/

.form-group {
    margin-bottom: 3.6rem;
}

.form-group__label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: .5rem;
    color: #706E6B;
    font-weight: bold;
}

.form-group__control {
    display: block;
    width: 100%;
    padding: .5rem 1rem;
    height: 3.2rem;
    border: 1px solid #DDDBDA;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: none;
}

.form-group__control:focus, select:focus {
    border: 2px solid #2386C8;
    box-shadow: none;
}

.form-group__control[disabled] {
    cursor: not-allowed;
    background-color: #D8DDE6;
    border: 1px solid #B2B3B5;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    background-color: #fff;
    background-image: none;
    height: 3.2rem;
    border: .1rem solid #DDDBDA;
    font-size: 1.3rem;
    color: #333333;
    padding: .5rem 1rem;
    box-shadow: none;
}

.form-group__select-container {
    position: relative;
}

.form-group__select-container::after {
    position: absolute;
    content: "";
    display: inline-block;
    vertical-align: middle;
    border-top: 5px dashed;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    right: 1rem;
    top: 50%;
    color: #797979;
}

.form-group__cancel-btn-wrap{
    position: relative;
}

.form-group__cancel-btn{
    position: absolute;
    right: 5px;
    top: 2px;
}

.form-id + .form-group__cancel-btn-wrap .form-group__cancel-btn{
    right: 50%;
}

.postal-code + .form-group__cancel-btn-wrap .form-group__cancel-btn{
    right: inherit;
    left: 17rem;
}

/*---- チェックボックス、ラジオボタン----*/

/*非表示*/

input[type="radio"], input[type="checkbox"] {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    width: auto;
}

/*共通*/

.checkbox label, .radio label {
    font-weight: normal;
    cursor: pointer;
}


/*外枠*/

input[type="checkbox"]+.check-icon, input[type="radio"]+.radio-icon {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    border: 1px solid #DDDBDA;
    background: #fff;
    transition: border .1s linear, background-color .1s linear;
    margin-right: .5rem;
}

input[type="checkbox"]+.check-icon {
    border-radius: .2rem;
}

input[type="radio"]+.radio-icon {
    border-radius: 50%;
}

/*hover時*/

label:hover input[type="checkbox"]:not(:disabled)+.check-icon, label:hover input[type="radio"]:not(:disabled)+.radio-icon {
    border: 2px solid #DDDBDA;
}

/*check時*/

input[type="checkbox"]:checked+.check-icon::after, input[type="radio"]:checked+.radio-icon::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
}

input[type="checkbox"]:checked+.check-icon::after {
    height: .8rem;
    width: 1.1rem;
    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    border-bottom: 3px solid #276DAE;
    border-left: 3px solid #276DAE;
    top: 43%;
}

input[type="radio"]:checked+.radio-icon::after {
    height: 1.2rem;
    width: 1.2rem;
    background-color: #276DAE;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/*focus時*/

input[type="checkbox"]:focus+.check-icon, input[type="radio"]:focus+.radio-icon {
    box-shadow: 0px 0px 0px 2px #276dae;
}

/*disable時*/

input[type="checkbox"]:disabled+.check-icon, input[type="radio"]:disabled+.radio-icon {
    cursor: not-allowed;
    background-color: #F4F6F9;
    opacity: .7;
}

/*---- Toggle Switch----*/

.toggle-switch {
    display: inline-block;
    width: 4rem;
    height: 2.4rem;
    background-color: #919293;
    border-radius: 3.2rem;
    position: relative;
    vertical-align: bottom;
    margin-right: .5rem;
}

.toggle-switch::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .2rem;
}

/*hover時*/

input[type="checkbox"]:hover+.toggle-switch, .toggle-switch:hover {
    background-color: #706E6B;
}

/*check時*/

input[type="checkbox"]:checked+.toggle-switch {
    background-color: #2386C8;
}

input[type="checkbox"]:checked+.toggle-switch::before {
    right: .2rem;
    left: auto;
}

/*focus時*/

input[type="checkbox"]:focus+.toggle-switch {
    box-shadow: 0px 0px 0px 2.5px #276dae;
}

/*disable時*/

input[type="checkbox"]:disabled+.toggle-switch {
    cursor: not-allowed;
    background-color: #9FAAB5;
}

input[type="checkbox"]:disabled+.toggle-switch::before {
    background-color: #D8DDE6;
}

/*---- required*アイコン ----*/

.form-group__required-asta {
    color: #C23934;
    margin: 0 .2rem;
}

/*---- requiredテキスト ----*/

.form-group__required-text, .form-group__option-text {
    color: #fff;
    margin: 0 1rem 0 .2rem;
    font-size: 1.1rem;
    padding: .2rem .5rem;
    border-radius: 3px;
}

/* 必須 */

.form-group__required-text {
    background-color: #C23934;
}

/* 任意 */

.form-group__option-text {
    background-color: #706E6B;
}

/*---- ヘルプテキスト ----*/

.help-text {
    color: #706E6B;
    font-size: 1.2rem;
    margin-top: .5rem;
    font-style: normal;
}

/*---- エラー ----*/

.has-error .form-group__control {
    border: 2px solid #C23934;
}

.error {
    color: #CC4940;
    font-size: 1.2rem;
    margin-top: .5rem;
}

span.help-text {
    display: block;
    font-weight: normal;
}

/*---- 郵便番号 ----*/

.postal-code {
    width: 20rem;
    margin-right: 1rem;
}

.postal-code_2box {
    width: 8.7rem;
    margin-right: 1rem;
}

.postal-hyphen {
    margin-right: 1rem;
    line-height: 2.7rem;
}

/*-- datepickerレイアウト ---------------------------------------------------------------------*/
.datepicker-container {
    width: 100%;
    max-width: 20rem;
}

.grid-x > .datepicker-container:first-of-type {
    margin-right: 2rem;
}

@media only screen and (max-width: 767px), only screen and (max-width: 896px) and (orientation: landscape) {
    .datepicker-container {
        width: 100%;
    }
}

@media only screen and (max-width: 479px) {
    .grid-x > .datepicker-container:first-of-type {
        margin-right: 0;
    }
}

/*-- datepickerデザイン -----------------------------------------------------------------------*/

/*線なし*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid transparent;
}

/*今日ボタン活性化*/
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
    opacity: 1;
}

/*今日、閉じるボタン*/
.ui-datepicker .ui-datepicker-buttonpane button {
    border: 1px solid #DDDBDA;
    padding: .5em .8em .6em .8em;
    color: #276DAE;
    background-color: #fff;
}

/*選択時*/
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: #2386C8;
    color: #fff;
}

/*today表示*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background-color: #FFEB6A;
    color: #3E3E3C;
}

/*hover時*/
.ui-state-default:hover, .ui-widget-content .ui-state-default:hover, .ui-widget-header .ui-state-default:hover {
    background-color: #e4e4e4;
    opacity: 1;
}

.ui-button.ui-state-active:hover, .ui-widget-content .ui-state-active:hover, .ui-widget-header .ui-state-active:hover {
    background: #276dae;
    opacity: 1;
}
.ui-state-highlight:hover, .ui-widget-content .ui-state-highlight:hover, .ui-widget-header .ui-state-highlight:hover {
    background-color: #f9d916;
    opacity: 1;
}

/*次の月、前の月アイコン変更*/
.ui-datepicker-prev span, .ui-datepicker-next span {
    background-image: none !important;
}

.ui-datepicker-prev:before, .ui-datepicker-next:before {
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    font-weight: 900;
    align-items: center;
    justify-content: center;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 50%;
    transform: translateY(-50%);
}

.ui-datepicker-prev:before {
    content: "\f0d9";
}

.ui-datepicker-next:before {
    content: "\f0da";
}

/*timepicker select 枠*/
.ui-timepicker-select, .ui-widget-content .ui-timepicker-select, .ui-widget-header .ui-timepicker-select, .ui-slider-handle, .ui-widget-content .ui-slider-handle, .ui-widget-header .ui-slider-handle {
    border: 1px solid #DDDBDA;
}

/*-- Dropzoneデザイン（ファイルアップロード） ---------------------------------------------*/
.dropzone {
    border: 2px dashed #B2B3B5;
    border-radius: 1rem;
    background-color: #FBFBFB;
}

.dz-message__icon {
    color: #ECEBEA;
    font-size: 5rem;
    margin: 1rem 2rem;
}

.dz-message__right-box {
    text-align: center;
}

.dz-message__text, 
.dz-message__box {
    display: block;
    margin: .5rem 0;
}
.dz-message__text {
    color: #9B9894;
}

.dz-message__box {
    border: 1px solid #B2B3B5;
    display: inline-block;
    padding: .8rem 1.6rem;
    border-radius: 4px;
    background-color: #fff;
}

/*-- テーブル ----------------------------------------------------------------------------------*/

/*-- foundation reset ---*/
table {
    margin: 0;
}

tbody tr:nth-child(even){
    background-color: rgba(244, 246, 249, 0.8);
    color: inherit;
    border: none;
}

tfoot td, tfoot th, thead td, thead th, tbody td, tbody th {
    font-weight: normal;
    border: .1rem solid #D7D7D7;
    padding: .4rem 1rem; /*テーブル内のpaddingは適宜変更*/
}

thead th, tbody th {
    color: #333;
}

.table thead > tr > th:last-of-type,
.table tbody > tr > td:last-of-type,
.table tbody > tr > th:last-of-type {
    padding-right: 2rem;
}
.table thead > tr > th:first-of-type,
.table tbody > tr > td:first-of-type,
.table tbody > tr > th:first-of-type {
    padding-left: 2rem;
}

/*テーブル見出しカラー*/
thead th {
    background-color: #F4F6F9;
    font-weight: bold;
}


/*縦線なし*/
.table_no-border th, 
.table_no-border td {
    border-right: none;
    border-left: none;
}

/*ストライプ*/
.table_striped tbody tr:nth-child(even) {
    background-color: #EEF1F6;
}

/*縦線なし*/
.table_th-border td {
    border-right: none;
    border-left: none;
}

/*Medium*/
.table_m tfoot td, 
.table_m  tfoot th, 
.table_m thead td, 
.table_m thead th, 
.table_m tbody td, 
.table_m tbody th {
    padding: .8rem 1rem; /*テーブル内のpaddingは適宜変更*/
}

/*Large*/
.table_l tfoot td, 
.table_l  tfoot th, 
.table_l thead td, 
.table_l thead th, 
.table_l tbody td, 
.table_l tbody th {
    padding: 1.2rem 1rem; /*テーブル内のpaddingは適宜変更*/
}

@media only screen and (max-width: 999px) {
    .table-wrapper {
        overflow: auto;
        white-space: nowrap;
    }
}




/*-- Image gallery  ----------------------------------------------------------------------------*/
.upload-block {
    margin-bottom: 3rem;
}
.thumbnail-wrapper {
    display: flex;
    flex-direction: column;
}

.thumbnail-image {
    min-height: 1%; /*IEで縦の空白ができるのを回避*/
}

.thumbnail-image__item {
    width: 100%;
}

.thumbnail-info__title, 
.thumbnail-info__content {
    padding: 1.6rem;
}

.thumbnail-info__title {
    font-size: 1.4rem;
    font-weight: bold;
}

.thumbnail-info__content {
    border-top: 1px solid #ECEBEA;
}

.thumbnail-info__item + .thumbnail-info__item  {
    margin-top: 1rem;
}

/*-- DropzoneデザインImage gallery用 -------------------------------------------------*/

.dropzone .dz-message {
    margin: 5em 0;
}

.dz-message__icon {
    font-size: 8rem;
}

.dz-message__text {
    font-size: 1.6rem;
}

@media only screen and (max-width: 767px), only screen and (max-width: 896px) and (orientation: landscape) {
    .dz-message__icon {
        font-size: 6rem;
    }
}


/*-- Tooltip -------------------------------------------------------------------------*/

/*共通*/

.tooltip-block {
    position: relative;
    display: inline-block;
}

.tooltip__popover {
    position: absolute;
    background-color: #1F5B91;
    color: #fff;
    padding: .8rem 1.2rem;
    /*tooltipの幅は適宜変更してください*/
    width: 20rem;
    border-radius: 4px;
    z-index: 2;
    display: none;
}

.tooltip__popover::before {
    width: 1rem;
    height: 1rem;
    position: absolute;
    transform: rotate(45deg);
    content: "";
    background-color: inherit;
    left: 50%;
    bottom: -.5rem;
    margin-left: -.5rem;
}

.tooltip__target:hover+.tooltip__popover {
    display: inline-block;
}

/*Tooltip top*/

.tooltip__popover_top {
    bottom: calc(100% + 1rem);
    left: 0;
}

.tooltip__popover_top::before {
    left: 1.5rem;
    top: 100%;
    margin-top: -.5rem;
}

/*Tooltip bottom*/

.tooltip__popover_bottom {
    top: calc(100% + 1rem);
    left: 0;
}

.tooltip__popover_bottom::before {
    left: 1.5rem;
    bottom: 100%;
    margin-bottom: -.5rem;
}

/*Tooltip right*/

.tooltip__popover_right {
    left: calc(100% + 1rem);
    top: -1rem;
}

.tooltip__popover_right::before {
    top: 1.5rem;
    right: 100%;
    left: auto;
    margin-right: -.5rem;
}

/*Tooltip left*/

.tooltip__popover_left {
    right: calc(100% + 1rem);
    top: -1rem;
}

.tooltip__popover_left::before {
    top: 1.5rem;
    left: 100%;
    margin-left: -.5rem;
}

/*Tooltip アイコン用*/
.tooltip_for-icon .tooltip__popover {
    width: 5rem;
}

/*Tooltip カスタム*/

.tooltip__popover_custum {
    /*tooltipの幅は適宜変更してください*/
    width: 32rem;
    padding: 1.5rem 2rem;
}

.tooltip__outer-wrap {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2rem;
    border-radius: 4px;
    color: #333;
}

.tooltip__inner-wrap+.tooltip__inner-wrap {
    margin-left: 2rem;
}

/*Tooltip カードセキュリティコード用*/

.tooltip-card .tooltip__popover_custum {
    width: 64rem;
}

.tooltip-card .tooltip__inner-wrap {
    width: 47%;
    text-align: center;
}

.tooltip-card .tooltip__inner-wrap img {
    width: 20rem;
}

@media only screen and (max-width: 900px) {
    .tooltip-card .tooltip__popover_custum {
        width: 70vw;
    }

    /*位置は適宜変更してください*/
    .tooltip-card .tooltip__popover_top {
        left: -13rem;
    }
    .tooltip-card .tooltip__popover_top::before {
        left: 14.5rem;
    }
    
}

@media only screen and (max-width: 767px), only screen and (max-width: 896px) and (orientation: landscape) {
    .tooltip-card .tooltip__inner-wrap p {
        font-size: 1.3rem;
    }
    .tooltip-card .tooltip-card .tooltip__popover_custum {
        width: 85vw;
    }
    
}

@media only screen and (max-width: 600px) {
    .tooltip-card .tooltip__popover_custum {
        padding: 1rem;
    }
    .tooltip-card .tooltip__outer-wrap {
        padding: 1rem;
    }
    .tooltip-card .tooltip__inner-wrap {
        width: 100%;
    }
    .tooltip-card .tooltip__inner-wrap+.tooltip__inner-wrap {
        margin-left: 0;
        margin-top: 2rem;
    }
    .tooltip-card .tooltip__inner-wrap img {
        width: 80%;
    }
}

/*-- List -------------------------------------------------------------------------*/

/*List丸*/

.list-dotted {
    list-style: disc;
    margin-left: 1.5rem;
}

.list-dotted li {
    margin-bottom: .5rem;
}

/*List数字1.*/

.list-decimal {
    list-style: decimal;
    margin-left: 1.5rem;
}

.list-decimal li {
    margin-bottom: .5rem;
}

/*List数字(1)*/

.list-brackets {
    margin-left: 1.1em;
}

.list-brackets li {
    counter-increment: cnt;
    margin-bottom: .5rem;
}

.list-brackets li::before {
    content: "(" counter(cnt) ")";
    display: inline-block;
    margin-left: -1.5em;
    /* サイトに合せて調整 */
    width: 1.5em;
    /* サイトに合せて調整 */
}

/*List数字①*/

.list-circle {
    counter-reset: my-counter;
    list-style: none;
}

.list-circle li {
    margin-bottom: .5rem;
    padding-left: 1.4rem;
    position: relative;
}

.list-circle li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: #2386C8;
    color: #fff;
    display: block;
    float: left;
    line-height: 1.7rem;
    margin-left: -2.3rem;
    text-align: center;
    height: 1.7rem;
    width: 1.7rem;
    border-radius: 50%;
}

/*Listアイコン*/

.list-icon {
    position: relative;
}

.list-icon li {
    margin-bottom: .5rem;
    padding-left: 1.4rem;
}

.list-icon li:before {
    font-family: "Font Awesome 5 Free";
    /*ここを変えるとアイコンの種類が変えられます（font-weightに注意）*/
    content: "\f00c";
    font-weight: 900;
    position: absolute;
    left: -.5em;
    color: #2386C8;
}

/*-- Breadcrumb --------------------------------------------------------------------*/

.breadcrumb {
    display: flex;
}

.breadcrumb__item+.breadcrumb__item {
    margin-left: 1rem;
}

.breadcrumb__item:not(:first-child)::before {
    content: "";
    margin-right: .8rem;
}

.breadcrumb_angle .breadcrumb__item:not(:first-child)::before {
    content: ">";
}

.breadcrumb_slash .breadcrumb__item:not(:first-child)::before {
    content: "/";
}

/*-- Pagination --------------------------------------------------------------------*/

.pagination li {
    font-size: 1.3rem;
    margin-right: .8rem;
    padding: 0;
    border: 1px solid #DDDBDA;
    border-radius: 4px;
    pointer-events: none;
    background-color: #fff;
}

.pagination li:hover {
    border: 1px solid #2386C8;
}

.pagination .current {
    padding: .7rem 1.2rem;
    background: #3DACDF;
    border: 1px solid #3DACDF;
    color: #fff;
    cursor: default;
}

.pagination .disabled {
    padding: .7rem 1.2rem;
    color: #cacaca;
    cursor: not-allowed;
}

.pagination a, .pagination button {
    padding: .7rem 1.2rem;
    display: block;
    pointer-events: auto;
}

.pagination a:hover {
    background-color: #2386C8;
    opacity: 1;
    color: #fff;
}

.pagination .ellipsis {
    padding: .7rem 1.2rem;
}

.pagination .ellipsis::after {
    padding: 0;
}

.pagination-previous a::before, .pagination-previous.disabled::before {
    content: "<";
}

.pagination-next a::after, .pagination-next.disabled::after {
    content: ">";
}

.pagination-first a::before, .pagination-first.disabled::before {
    content: "<<";
}

.pagination-last a::after, .pagination-last.disabled::after {
    content: ">>";
}

/*--Accordion -------------------------------------------------------------------*/

.accordion__list-item {
    padding: 1rem;
    padding-left: 3.4rem;
}

.accordion__header {
    position: relative;
    cursor: pointer;
}

.accordion__header::before {
    display: inline-block;
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -2rem;
    transition: all 0.2s ease-in-out;
}

.accordion__header.open {
    margin-bottom: 1rem;
}

.accordion__header.open::before {
    transform: rotate(90deg);
    top: 10%;
}

.accordion__title {
    font-size: 1.6rem;
}

.accordion__contents {
    display: none;
    margin: 0 -1rem -1rem -3.4rem;
    padding: 0.5rem 1rem 1rem 3.4rem;
}

/*color*/

.accordion_color .accordion__list-item {
    border: 1px solid #D8DDE6;
}

.accordion_color .accordion__contents {
    background-color: #F4F6F9;
    padding-top: 1rem;
}

/*--Tab -------------------------------------------------------------------*/

.tab__list {
    display: flex;
    border-bottom: 1px solid #DDDBDA;
}

.tab__list-item {
    pointer-events: none;
    border-bottom: 2px solid transparent;
}

.tab__link {
    display: block;
    padding: 1rem 2rem;
    color: #706E6B;
    font-weight: bold;
    pointer-events: auto;
}

.tab__list-item:hover {
    border-bottom: 2px solid #2386C8;
}

.tab__link:hover {
    color: #276DAE;
}

.tab__list-item.active {
    border-bottom: 2px solid #2386C8;
}

.tab__list-item.active .tab__link {
    color: #3E3E3C;
}

.tab-contents__item {
    padding: 1.6rem 0;
    display: none;
}

.tab-contents__item.active {
    display: block;
}

.tab-contents__title {
    font-size: 1.6rem;
}

/*tab color*/

.tab_color .tab__list {
    background-color: #F4F6F9;
}

.tab_color .tab__list-item:hover {
    background-color: #276DAE;
    border-bottom: 2px solid #276DAE;
}

.tab_color .tab__link:hover {
    color: #fff;
}

.tab_color .tab__list-item.active {
    background-color: #2386C8;
    border-bottom: 2px solid #2386C8;
}

.tab_color .tab__list-item.active>.tab__link {
    color: #fff;
}

/*tab 縦並び, 縦並びcolor共通*/

.tab_vertical, .tab_vertical-color {
    border: 1px solid #DDDBDA;
}

.tab_vertical .tab__list, .tab_vertical-color .tab__list {
    display: block;
    max-width: 75rem;
}

.tab_vertical .tab__list-item, .tab_vertical-color .tab__list-item {
    border: 1px solid #DDDBDA;
    border-left: none;
}

.tab_vertical .tab__list-item:first-of-type, .tab_vertical-color .tab__list-item:first-of-type {
    border-top: none;
}

.tab_vertical .tab__list-item:last-of-type, .tab_vertical-color .tab__list-item:last-of-type {
    border-bottom: none;
}

.tab_vertical .tab-contents__item, .tab_vertical-color .tab-contents__item {
    padding: 1.6rem;
}

/*tab 縦並び*/

.tab_vertical .tab__list-item.active {
    border-bottom: 2px solid #2386C8;
}

/*tab 縦並びcolor*/

.tab_vertical-color .tab__list-item {
    background-color: #F4F6F9;
}

.tab_vertical-color .tab__list-item:hover {
    background-color: #276DAE;
    border-bottom: 1px solid #DDDBDA;
}

.tab_vertical-color .tab__list-item:hover>.tab__link {
    color: #fff;
}

.tab_vertical-color .tab__list-item.active {
    background-color: #2386C8;
    border-bottom: 1px solid #DDDBDA;
}

.tab_vertical-color .tab__list-item.active>.tab__link {
    color: #fff;
}

/*-- activity(timeline) ---------------------------------------------------------------------*/

.activity {
    position: relative;
}

.activity::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: .2rem;
    left: 2rem;
    border-radius: .2rem;
    background-color: #2386C8;
}

.activity-item {
    position: relative;
    margin-bottom: 3rem;
}

.activity-icon {
    position: absolute;
    top: 0;
    left: .8rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.3rem;
    line-height: 2.5rem;
    background-color: #2386C8;
    border-radius: 50%;
    text-align: center;
    color: #fff;
}

.activity-content {
    margin-left: 5rem;
}

.activity-content__title {
    font-size: 1.4rem;
    padding: .2rem .5rem .5rem;
}

.activity-content__time {
    color: #706E6B;
    font-size: 1.2rem;
    padding: .5rem;
}

.activity-content__body {
    padding: .5rem;
}

/*icon-large*/

.activity-icon_large {
    width: 3.2rem;
    height: 3.2rem;
    line-height: 3.2rem;
    font-size: 1.8rem;
    left: .5rem;
}

/*-- Modal ------------------------------------------------------------------------*/

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.3);
    display: none;
}

.modal-dialog {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ECEBEA;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
    margin: 0 auto;
}

.modal-header {
    border-bottom: 1px solid #ECEBEA;
    padding: 2.4rem 3.6rem;
}

.modal-content__close-icon {
    position: absolute;
    top: .6rem;
    right: 0.6rem;
    padding: 1rem;
}

.modal-body {
    padding: 2.4rem 3.6rem;
}

.modal-footer {
    border-top: 1px solid #ECEBEA;
    padding: 1.6rem;
}

.modal-footer .btn+.btn {
    margin-left: 1rem;
}

/*size*/

@media print, screen and (min-width: 40em) {
    .modal-content_small {
        width: 30%;
        max-width: 75rem;
        min-width: 40rem;
    }
    .modal-content_medium {
        width: 50%;
        max-width: 75rem;
        min-width: 40rem;
    }
    .modal-content_large {
        width: 90%;
        max-width: none;
        min-width: 40rem;
    }
}

@media print, screen and (max-width: 39.99875em) {
    .modal-dialog {
        height: 90%;
        overflow-y: scroll;
    }
    .modal-content {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 90%;
        max-width: none;
    }
}

.modal-content_full {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    margin-left: 0;
    border: 0;
    border-radius: 0;
}

@media print, screen and (max-width: 39.99875em) {
    .modal-content_full {
        margin-left: 0;
        width: 100%;
    }
}

/*no-header*/

.modal_no-header .modal-body {
    padding-top: 4rem;
}

/*scroll*/

.modal_scroll .modal-dialog {
    height: 90%;
    overflow-y: scroll;
}

/*-- box     -----------------------------------------------------------------------*/

.box {
    position: relative;
    border-radius: 4px;
    background: #ffffff;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid #DDDBDA;
}

.box-header {
    border-top: 4px solid #2386C8;
    padding: 1.6rem 2.4rem;
    border-bottom: 1px solid #DDDBDA;
    border-radius: 4px 4px 0 0;
}

.box-header__title {
    font-size: 1.6rem;
    font-weight: bold;
}

.box-header__right-block {
    margin: 0 0 0 auto;
}

.box-body {
    padding: 2.4rem;
}

.box-footer {
    background-color: #2386C8;
    color: #fff;
    padding: 1rem 2.4rem;
    border-radius: 0 0 4px 4px;
}

.box-footer__more-btn, .box-footer__more-btn:hover, .box-footer__more-btn:focus {
    display: block;
    text-align: center;
    color: #fff;
}

.box-footer__more-btn i {
    margin-left: 2rem;
    transition: all 0.35s ease 0s;
}

.box-footer__more-btn:hover i {
    margin-left: 2.5rem;
}

.box-body__tool-block {
    padding: 1rem 0;
}

.box-body__item {
    margin: 0;
    padding: 0;
}

.box-body__item+.box-body__item {
    margin-left: 2rem;
}

/*header color*/

.box-header_color {
    background-color: #2386C8;
    color: #fff;
}

/*header light*/
.box-header_light {
    border-top: 4px solid transparent;
}

/*footer light*/

.box-footer_light {
    background-color: #F4F6F9;
}

.box-footer_light .box-footer__more-btn, 
.box-footer_light .box-footer__more-btn:hover, 
.box-footer_light .box-footer__more-btn:focus {
    color: #333;
}




/*-- table(Cheetah Grid) -----------------------------------------------------------------------*/

.cheetah-grid {
    overflow: hidden;
    padding: 3.6rem 3.2rem;
}

/*-- fullcalender -----------------------------------------------------------------------*/
.fullcalender-wrapper {
    display: flex;
    justify-content: space-between;
}

/*左側のボックス*/
.fullcalender__l-con {
    width: 25%;
    padding: 0;
    height: 100%;
}

.fullcalender__title {
    font-size: 1.4rem;
}

.fc-event {
    margin-bottom: 1rem;
}

.fc-event-main {
    padding: .3rem 1.2rem;
    font-weight: bold;
    border-radius: 4px;
}

.event-primary {
    background-color: #2386C8;
    border-color: #2386C8;
    color: #fff;
}
.event-primary:hover {
    background-color: #276DAE;
    border-color: #276DAE;
    color: #fff;
}

.event-danger {
    background-color: #CC4940;
    border-color: #CC4940;
    color: #fff;
}
.event-danger:hover {
    background-color: #AA2920;
    border-color: #AA2920;
    color: #fff;
}

.event-warning {
    background-color: #E8A014;
    border-color: #E8A014;
    color: #fff;
}
.event-warning:hover {
    background-color: #E8900C;
    border-color: #E8900C;
    color: #fff;
}

.event-success {
    background-color: #389F48;
    border-color: #389F48;
    color: #fff;
}
.event-success:hover {
    background-color: #2B8A3D;
    border-color: #2B8A3D;
    color: #fff;
}

.event-darker {
    background-color: #706E6B;
    border-color: #706E6B;
    color: #fff;
}
.event-darker:hover {
    background-color: #575553;
    border-color: #575553;
    color: #fff;
}

.fc-color-picker {
    margin-bottom: 1.6rem;
}
.fc-color-picker > li {
    font-size: 3rem;
    line-height: 3rem;
    margin-right: .5rem;
}
.event-tprimary {
    color: #2386C8;
}
.event-tprimary:hover, 
.event-tprimary:focus {
    color: #2386C8;
}

.event-tdanger {
    color: #CC4940;
}
.event-tdanger:hover, 
.event-tdanger:focus {
    color: #AA2920;
}

.event-twarning {
    color: #E8A014;
}
.event-twarning:hover, 
.event-twarning:focus {
    color: #E8900C;
}

.event-tsuccess {
    color: #389F48;
}
.event-tsuccess:hover, 
.event-tsuccess:focus {
    color: #2B8A3D;
}

.event-tdarker {
    color: #706E6B;
}
.event-tdarker:hover, 
.event-tdarker:focus {
    color: #575553;
}


/*カレンダー*/

.fullcalender__r-con {
    width: 73%;

}

.calender-wrap {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.fc .fc-toolbar.fc-header-toolbar {
    margin: 0;
    padding: 2.4rem 1.6rem 3.2rem;
}

.fc .fc-button {
    border-radius: 4px;
}


.fc-prev-button, 
.fc-next-button {
    background-color: #fff!important;
    border: 1px solid #DDDBDA!important;
    color: #706E6B!important;
}

.fc-today-button {
    background-color: #fff!important;
    border: 1px solid #DDDBDA!important;
    color: #276DAE!important;
}

.fc-dayGridMonth-button, 
.fc-timeGridWeek-button, 
.fc-timeGridDay-button, 
.fc-listWeek-button {
    background-color: #2386C8!important;
    border-color: #fff!important;
    color: #fff!important;
} 
.fc-dayGridMonth-button:hover, 
.fc-timeGridWeek-button:hover, 
.fc-timeGridDay-button:hover, 
.fc-listWeek-button:hover {
    background-color: #276DAE!important;
    border-color: #fff!important;
    color: #fff!important;
} 



@media screen and (max-width: 768px) {
    .fullcalender-wrapper {
        display: block;
    }
    .fullcalender__l-con {
        width: 100%;
    }
    
    
    .fullcalender__r-con {
        width: 100%;
    
    }
}

/*-- 全体のページレイアウト ----------------------------------------------------------------------------*/

/*-- Content wrapper ----------------------------------------------------------------------------*/

.content-wrapper {
    margin-left: 0;
    padding-top: 5rem;
    transition: all 0.3s;
    background-color: #E7EAF2;
    min-height: 100vh;
    margin-left: 22rem;
    /*sidebarを開いたとき(js)*/
}

.content-wrapper.on {
    margin-left: 0;
    /*sidebarを閉じたとき(js)*/
}

.content-wrapper_hidden-side {
    margin-left: 0;
    /*sidebarを閉じたとき(js)*/
}

.content-wrapper_hidden-side.on {
    margin-left: 20rem;
    /*sidebarを開いたとき(js)*/
}

.content-mask {
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, .7);
    position: fixed;
    display: none;
    z-index: 20;
}

.content-header {
    padding: 2.4rem 3.2rem;
    background-color: #fff;
}

.content-header__item+.content-header__item {
    margin-top: 1.6rem;
}

.content {
    padding: 3.6rem 3.2rem 2rem;
}

@media only screen and (max-width: 999px) {
    .content-wrapper {
        margin-left: 0;
        padding-top: 4.8rem;
    }
    .content-wrapper.on {
        margin-left: 0;
    }

    .content-wrapper.on .content-mask {
        display: block;
    }

    .content {
        padding: 2rem 1.5rem;
    }
}

/*-- sidebar -----------------------------------------------------------------------*/

.sidebar {
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    padding-top: 4.8rem;
    padding-bottom: 10rem;
    min-height: 100%;
    height: calc(100vh);
    width: 22rem;
    z-index: 80;
    font-size: 1.3rem;
    transition: all 0.3s;
    transform: translateX(0);
    /*sidebarを開いたとき(js)*/
}

.sidebar.on {
    transform: translateX(-220px);
    /*sidebarを閉じたとき(js)*/
}

.sidebar_hidden-side {
    transform: translateX(-200px);
}

.sidebar_hidden-side.on {
    transform: translateX(0);
}

.sidebar-nav>.sidebar-nav__list {
    padding-top: 2rem;
}

.sidebar-nav__link {
    padding: 1rem 1.2rem 1rem 2.4rem;
    display: block;
    color: #333;
    position: relative;
}

.sidebar-nav__link:hover, .sidebar-nav__link:focus {
    background-color: #F4F6F9;
    color: #333;
}

.sidebar-nav__link.current {
    border-left: 5px solid #3DACDF;
    color: #3DACDF;
    font-weight: bold;
}

.nested .sidebar-nav__link.current, 
.nested .nested .sidebar-nav__link.current, 
.nested .nested .nested .sidebar-nav__link.current {
    border-left: none;
}

.sidebar-nav__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    transition: all 0.2s ease-in-out;
}

.sidebar-nav__list-item[aria-expanded="true"]>.sidebar-nav__link .sidebar-nav__icon {
    transform: rotate(90deg);
    top: 20%;
}

.nested .sidebar-nav__link {
    padding-left: 3.8rem;
}

.nested .nested .sidebar-nav__link {
    padding-left: 6.2rem;
}

.nested .nested .nested .sidebar-nav__link {
    padding-left: 8.6rem;
}

/*color*/

.sidebar_color {
    background-color: #F4F6F9;
    /*カラーは適宜変更*/
}

.sidebar_color .nested .sidebar-nav__link {
    box-shadow: 2px 2px 0 50px rgba(255, 255, 255, 0.7) inset;
    /*メニューopen時のカラー。適宜変更*/
}

.sidebar_color .sidebar-nav__link:hover, 
.sidebar_color .sidebar-nav__link:focus,
.sidebar_color .nested .sidebar-nav__link:hover, 
.sidebar_color .nested .sidebar-nav__link:focus,
.sidebar_color .nested .nested .sidebar-nav__link:hover, 
.sidebar_color .nested .nested .sidebar-nav__link:focus {
    box-shadow: 2px 2px 0 50px rgba(200, 200, 200, 0.2) inset;
    opacity: 1;
}

/*Sidebar-top(PC時は非表示)*/

.sidebar-top__link {
    padding: 1rem 1.2rem 1rem 2.4rem;
    display: block;
    color: #fff;
    position: relative;
    background-color: #2386C8;
}

.sidebar-top__link:hover, .sidebar-top__link:focus {
    background-color: #276DAE;
    color: #fff;
}

.sidebar-top__link.current {
    background-color: #276DAE;
    ;
    color: #fff;
    font-weight: bold;
}

.sidebar-top__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    transition: all 0.2s ease-in-out;
}

.sidebar-top__list-item[aria-expanded="true"]>.sidebar-top__link .sidebar-top__icon {
    transform: rotate(90deg);
    top: 20%;
}

.nested .sidebar-top__link {
    padding-left: 3.8rem;
}

.nested .nested .sidebar-top__link {
    padding-left: 6.2rem;
}

.nested .nested .nested .sidebar-top__link {
    padding-left: 8.6rem;
}

@media only screen and (max-width: 999px) {
    .sidebar {
        transform: translateX(-220px);
        background-color: #fff;
    }
    .sidebar.on {
        transform: translateX(0);
    }

    .sidebar-top__link {
        font-size: 1.3rem;
    }

    .sidebar-nav__icon, 
    .sidebar-top__icon {
        right: 1rem;
    }
}

/*-- header --------------------------------------------------------------------*/

.main-header {
    position: fixed;
    max-height: 10rem;
    z-index: 100;
    width: 100%;
}

/*foundation reset*/

.top-bar, .top-bar ul {
    background-color: #fff;
    padding: 0;
}

.menu a, .menu .button {
    line-height: 3.6rem;
}

.dropdown.menu>li>a {
    padding: .7rem 2rem;
}

.dropdown.menu>li.is-dropdown-submenu-parent>a::after {
    display: inline-block;
    width: 0;
    height: 3.6rem;
    border: none;
    content: '\f078';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 3.6rem;
    right: 1.8rem;
    left: auto;
    margin-top: .1rem;
    top: 50%;
    transform: translateY(-50%);
}

.dropdown.menu>li.is-dropdown-submenu-parent>a {
    padding-right: 3rem;
}

.dropdown.menu>li.is-dropdown-submenu-parent.opens-left>a {
    padding-right: 4.5rem;
}

.dropdown.menu>li.is-dropdown-submenu-parent.opens-left>a::after {
    right: 3.5rem;
}

.dropdown.menu>li.opens-right>.is-dropdown-submenu, .dropdown.menu>li.opens-left>.is-dropdown-submenu {
    margin-top: .2rem;
    background-color: #fff;
}

.is-dropdown-submenu {
    border: none;
    background: #fff;
    box-shadow: 0 0 8px rgba(112, 110, 107, 0.3);
}

.is-dropdown-submenu .is-dropdown-submenu {
    margin-top: 0;
}

.dropdown .is-dropdown-submenu a {
    padding: 0.7rem 1rem;
}

.dropdown .opens-left .is-dropdown-submenu a {
    padding-left: 3rem;
}

.menu .is-active>a {
    background: #F4F6F9;
    color: #333;
    border-bottom: 2px solid #F4F6F9;
}

.menu .is-active>a:hover, .menu .is-active>a:focus {
    background: #F4F6F9;
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a::after {
    display: block;
    width: 0;
    height: 3.6rem;
    line-height: 3.6rem;
    border: none;
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    top: 50%;
    transform: translateY(-50%);
    margin-top: .2rem;
    right: 1.8rem;
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left>a::after {
    display: block;
    width: 0;
    height: 3.6rem;
    line-height: 3.6rem;
    border: none;
    content: '\f053';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    top: 50%;
    transform: translateY(-50%);
    margin-top: .2rem;
    right: auto;
    left: 1rem;
}

/*基本*/

.header-nav {
    min-height: 4.8rem;
    position: relative;
}

.header-nav__title {
    padding: 0 2.7rem;
    min-width: 20rem;
}

.header-nav__title-link {
    font-size: 1.8rem;
    font-weight: bold;
    height: 4.8rem;
    line-height: 4.8rem;
    color: #2386C8;
}

.header-nav__title-link img {
    display: inline-block;
}

.header-nav__menu .vertical {
    writing-mode: inherit;
}

.header-nav__menu-list {
    pointer-events: none;
    border-bottom: 2px solid transparent;
}

.header-nav__menu-list:hover {
    border-bottom: 2px solid #2386C8;
}

.is-active .header-nav__menu-list:hover {
    border-bottom: 2px solid transparent;
    background-color: #F4F6F9;
}

.header-nav__menu-link {
    font-weight: bold;
    height: 4.8rem;
    color: #333;
    pointer-events: auto;
}

.header-nav__menu-link:hover {
    color: #2386C8;
    opacity: 1;
}

.is-active .header-nav__menu-link:hover {
    color: #333;
}

/*検索ボックス*/

.search-group {
    min-height: 4.8rem;
    padding: 1rem 2rem;
    position: relative;
    display: table;
}

.search-group__form-box, .search-group__input-btn {
    display: table-cell;
}

.search-group__form-box {
    height: 3rem;
    background-color: #F4F6F9;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.top-bar input {
    margin-right: 0;/*IEで崩れるのを回避,foundation上書き*/
}

.search-group__btn {
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    right: 3rem;
    cursor: pointer;
}

/*SP用-検索ボックス表示Toggle btn*/

.top-bar__search-toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 2rem;
}

.top-bar__toggle-btn {
    display: none;
}

.top-bar__toggle-btn.active {
    display: block;
}

/*color*/

.header-nav_color .top-bar, .header-nav_color .top-bar ul {
    background-color: #2386C8;
    /*foundation reset*/
}

.header-nav_color .is-dropdown-submenu-parent ul {
    background-color: #fff;
}

.header-nav_color .header-nav__title-link, .header-nav_color .header-nav__menu-link {
    color: #fff;
}

.header-nav_color .is-active .header-nav__menu-link {
    color: #333;
}

.header-nav_color .dropdown.menu>li.is-active>a {
    color: #fff;
}

.header-nav_color .menu .is-active>a {
    border-bottom: 2px solid transparent;
}

.header-nav_color .dropdown>.header-nav__menu-list:hover {
    border-bottom: 2px solid transparent;
    background-color: #1399D2;
}

/*SP用-検索ボックス表示Toggle btn color*/

.header-nav_color .top-bar__toggle-btn {
    color: #fff;
}

.header-nav_color .top-bar__toggle-btn:hover, .header-nav_color .top-bar__toggle-btn:active {
    color: #fff;
    background-color: #276DAE;
}

/*main-hamburger*/

.sidebar-toggle__btn {
    height: 4.8rem;
    display: block;
    padding: 0 1rem;
}

.sidebar-toggle__btn i {
    font-size: 2.5rem;
    line-height: 4.8rem;
}

/*main-hamburger color*/

.header-nav_color .sidebar-toggle__btn {
    color: #fff;
}




@media only screen and (min-width: 1000px) {
    .sp-only {
        display: none;
    }
}

@media only screen and (max-width: 999px) {
    .pc-only {
        display: none;
    }
    .top-bar .top-bar-left, .top-bar .top-bar-right {
        width: 100%;
    }
    .top-bar input {
        max-width: 1000px;
    }
    .main-navbar__top-form, .search-group {
        width: 100%;
    }
    .main-navbar__top-form.sp-only {
        display: none;
    }
}

img.pc {
    display: block;
}

img.sp {
    display: none;
}

@media only screen and (max-width:897px) {
    img.pc {
        display: none;
    }
    img.sp {
        display: block;
    }
}

/*追加分*/

#wizard-tools > .btn{
    cursor: inherit;
}

.admin-reserve-complete-message{
    margin-bottom:5rem;
}

.admin-reserve-complete-return-text{
    color: #c23a44;
}

.admin-required{
    color: #c23a44;
    margin-left: 10px;
}

.di-radio{
    opacity: 1 !important;
    appearance: auto !important;
    position: static !important;
}

.hp-hide{
    display: none;
}