@charset "utf-8";
@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: #007B42;
}

a:hover {
    opacity: .8;
}


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

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;
    }

    .pc-only {
        display: none;
    }
}


/*適宜変更*/

[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: #F2FBEE;
}

.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: #F2FBEE;
}

.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: #276DAE;
}

.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: #F2FBEE;
}

.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;
    line-height: 1.2;
}

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: #F2FBEE;
}

.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: #F2FBEE;
    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;
}


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


/*非表示*/

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 #007B42;
    border-left: 3px solid #007B42;
    top: 43%;
}

input[type="radio"]:checked+.radio-icon::after {
    height: 1.2rem;
    width: 1.2rem;
    background-color: #007B42;
    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 #007B42;
}


/*disable時*/

input[type="checkbox"]:disabled+.check-icon,
input[type="radio"]:disabled+.radio-icon {
    cursor: not-allowed;
    background-color: #F2FBEE;
    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: #007B42;
    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: #007B42;
    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;
}

thead,
tbody,
tfoot,
tbody tr:nth-child(even) {
    color: inherit;
    background-color: #FFFFFF;
    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: #F2FBEE;
    font-weight: bold;
}


/*行hover*/

.table tbody tr:hover {
    background-color: #F3F2F2;
}


/*縦線なし*/

.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;
}

.table_no-border td span.small {
    font-size: 11px;
}


/*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 {
    width: 45%;
    position: relative;
    display: inline-block;
}

.tooltip__popover {
    position: absolute;
    background-color: #1F5B91;
    color: #fff;
    padding: .8rem 1.2rem;
    /*tooltipの幅は適宜変更してください*/
    width: 5rem;
    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: #2386C8;
    border: 1px solid #2386C8;
    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: #F2FBEE;
    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: #F2FBEE;
}

.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: #F2FBEE;
}

.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;
}

.modal_card dt {
    width: 50%;
}

.modal_card dt .select2-container--default .select2-selection--single{
    height: 32px;
    border: 1px solid #DDDBDA;
}

.modal_card dt .select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 60%;
    margin-left: -8px;
    border-width: 5px 5px 0 5px;
}

.modal_card .form-group {
    width: 65px;
    margin-bottom: 2rem;
}

.modal_card  .form-group__select-container::after {
    top: 30%;
}

.modal-body__detail strong {
    font-weight: bold;
}

.modal-body__detail em {
    font-style: italic;
}

.modal-body__detail ul {
    list-style: revert;
    margin-left: 18px;
}

.modal-body__detail ol {
    list-style: auto;
    margin-left: 18px;
    margin-bottom: 10px;
}

.modal-body__detail ol li ol {
    margin-bottom: 5px;
}

.modal-body__detail ul li ul {
    margin-left: 18px;
    margin-bottom: 10px;
}

.modal-body__detail ul li ul li ul {
    margin-bottom: 5px;
}

.modal-body__detail h1,
.modal-body__detail h2,
.modal-body__detail h3 {
    margin-bottom: 10px;
}

.modal-body__detail h2 {
    margin-top: 40px;
}

.modal-body__detail h3 {
    margin-top: 20px;
}

.modal-body__detail .marker {
    background-color: #ff9;
}

/*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: #F2FBEE;
}

.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: 20rem;
    /*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: 20rem;
    z-index: 80;
    font-size: 1.3rem;
    transition: all 0.3s;
    transform: translateX(0);
    /*sidebarを開いたとき(js)*/
}

.sidebar.on {
    transform: translateX(-200px);
    /*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: #F2FBEE;
    color: #333;
}

.sidebar-nav__link.current {
    border-left: 5px solid #2386C8;
    color: #2386C8;
    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: #F2FBEE;
    /*カラーは適宜変更*/
}

.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(-200px);
        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;
}

.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: #F2FBEE;
    color: #333;
    border-bottom: 2px solid #F2FBEE;
}

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

.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 0.8rem;
    min-width: 16rem;
}

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

.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: #F2FBEE;
}

.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: #F2FBEE;
    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: #276DAE;
}


/*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;
    }

    .header-nav__title {
        min-width: 12rem;
    }
}