@charset "utf-8";

/*-------------------
共通モーダル
------------------- */
.small-button {
    width: 65px;
}
.modal-height {
    height: calc(100% - 3.5rem);
}
.modal-content-height{
    height: 80%;
}
.modal-body{
    display: flex;
    flex-direction: column;
    height: calc(90% - 6rem);
}
.modal-num-width{
    max-width: 60px;
    width: 100px;
}
@media screen and (max-height: 650px){
    .modal-content-height{
        height: 100% !important;
    }
}


/*-------------------
RESPONSIVE
------------------- */
/*-------------------
　タグに適用
------------------- */
body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    margin-bottom: 0 !important;
    min-width: fit-content();
    color: #595757;
    background-color: #eceff7;
}

li {
    list-style: none;
}


/*-------------------
　画面全体に適用
------------------- */

/* スクロールバーの見た目を変更 */
/* IEなど一部のブラウザでは反映されません */
::-webkit-scrollbar-thumb {
    background-color: rgb(150,150,150);
}

/*　w-100ではみ出る対策　*/
*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*　チェックボックスを大きくする　*/
.large-checkbox{
    transform: scale(1.5);
    margin-left: 4px;
}
/*-------------------
　bootstrap風クラスの追加
------------------- */

.bg-main {
    background-color: #6eb92b;
    color: white;
    font-weight: bold;
}

.bg-gray {
    background-color: #eeeeef;
}

.bg-beige {
    background-color: #656254;
}

.bg-pink {
    background-color: #ff3b3b29;
}

.bg-pretty-white {
    background-color: #ffffffdb;
}

.bg-light-blue {
    background-color: #ebf2f7;
}

.bg-orange {
    background: #ffad34 !important;
}

.bg-yellow {
    background-color: #fff3b5;
}

.bg-green {
    background-color: #6eb92b;
}

/* 破線(下側) */
.border-bottom-dashed {
    border-bottom: 1px dashed #999;
}

/*　不透明度0％　*/
.opacity-0 {
    opacity: 0;
}

/*　テキストカラー　*/
.text-beige {
    color: #656254;
}

/*　メインのテキストカラー　*/
.text-main {
    color: #4da131;
}

/*　取り消し線　*/
.text-decoration-line-through {
    text-decoration: line-through;
}

/*　justify-contentクラス追加　*/
.justify-content-space-between {
    justify-content: space-between;
}

.justify-content-space-evenly {
    justify-content: space-evenly;
}

.justify-content-space-around {
    justify-content: space-around;
}

/*　align-contentクラス追加　*/
.align-content-space-around {
    align-content: space-around;
}

/*　white-space:nowrapクラス追加　*/
.white-space-nowrap {
    white-space: nowrap;
}

/*　overflow-x:scrollクラス追加　*/
.overflow-x-scroll {
    overflow-x: scroll;
}

/*　line-heightクラス追加　*/
.lh-1 {
    line-height: 1rem;
}

.lh-2 {
    line-height: 2rem;
}

.lh-4 {
    line-height: 4rem;
}

/*　border-colorクラス追加　*/
.border-beige {
    border-color: #656254;
}

/*　角丸　*/
.rounded-small-pill {
    border-radius: 4rem !important;
}

/* textareaのリサイズ機能をOFFにする */
.resize-none {
    resize: none;
}

.logo-img {
    width: 1rem;
}

.cursor-pointer {
    cursor: pointer;
}

/*-------------------
共通パーツなど
------------------- */
/*-------------------
共通デザイン
------------------- */
/* カラー設定 */
.color-pink {
    color: #EA4262;
}

/*タイトル*/
.title-design {
    position: relative;
    letter-spacing: .1em;
    line-height: 1.2;
}

    .title-design:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 7px;
        border: 4px solid #4EACE5;
        border-image: linear-gradient(to right, #4EACE5 0%, #4EACE5 40%, #EA4262 60%, #EA4262 100%);
        border-image-slice: 1;
    }

/*ボタン*/
.blue-button {
    color: #fff;
    background-color: #4eace5;
    border-color: #4eace5;
    width: 100px;
}

.blue-button:hover {
    color: #fff;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
    transform: translateY(-5px);
}

.blue-button-sm {
    color: #fff;
    background-color: #4eace5;
    border-color: #4eace5;
    width: 65px;
}
.blue-button-sm:hover {
    background-color: #7ac1ec;
    border-color: #7ac1ec;
}

.gray-button-sm {
    color: #fff;
    background-color: #838181;
    border-color: #838181;
    width: 65px;
}
.gray-button-sm:hover {
    background-color: #acabab;
    border-color: #acabab;
}

/* 名称表示枠 */
.name-frame {
    background-color: #eeeeee;
    border: solid #595757 0.5px;
    outline: none;
}

/* KEY項目の入力欄の背景色 */
.key-input {
    background-color: #d3eaf8;
}


/*-------------------
共通デザインEND
------------------- */

/*　幅に応じてアイテムを２段組みにする　*/
.Two-columns-grid {
    display: grid;
    grid-gap: 1rem;
}

/*　幅に応じてアイテムを３段組みにする　*/
.three-columns-grid {
    display: grid;
    grid-gap: 1rem;
}

/*　メインのボタン　*/
.main-button {
    font-size: 1rem !important;
    border: none;
    background: #6eb92b;
    color: white;
    font-weight: bold;
    transition: 0.2s;
    padding: 1rem;
}

    .main-button:hover {
        font-size: 1rem !important;
        border: none;
        background: #6eb92b;
        color: white;
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　オレンジのボタン　*/
.orange-button {
    font-size: 1.3rem !important;
    border: solid #ffad34 1px;
    background: #ffad34;
    color: white;
    font-weight: bold;
    transition: 0.2s;
    padding: 1rem;
}

    .orange-button:hover {
        font-size: 1.3rem !important;
        border: solid #ffad34 1px;
        background: #ffad34;
        color: white;
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　オレンジのボタン 小さめ　*/
.orange-button-sm {
    font-size: 1.0rem !important;
    border: solid #ffad34 1px;
    background: #ffad34;
    color: white;
    font-weight: bold;
    transition: 0.2s;
    padding: 0.4rem;
}

    .orange-button-sm:hover {
        color: white;
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　シルバーのボタン　*/
.silver-button {
    font-size: 1.3rem !important;
    border: solid #8b8d8a 1px;
    background: #ffffff;
    color: #000000;
    font-weight: bold;
    transition: 0.2s;
    padding: 1rem;
}

    .silver-button:hover {
        font-size: 1.3rem !important;
        border: solid #8b8d8a 1px;
        background: #ffffff;
        color: #000000;
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　シルバーのボタン (小さめ)　*/
.silver-button-sm {
    font-size: 1.0rem !important;
    border: solid #8b8d8a 1px;
    background: #ffffff;
    color: #000000;
    font-weight: bold;
    transition: 0.2s;
    padding:0.5rem;
}

    .silver-button-sm:hover {
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　赤のボタン　*/
.red-button {
    font-size: 1.1rem !important;
    border: solid #ff0000 1px;
    background: #eb3c5b;
    color: #ffffff;
    font-weight: bold;
    transition: 0.2s;
    padding: 1rem;
}

    .red-button:hover {
        font-size: 1.3rem !important;
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　赤のボタン (小さめ)　*/
.red-button-sm {
    font-size: 1.0rem !important;
    border: solid #ff0000 1px;
    background: #eb3c5b;
    color: #ffffff;
    font-weight: bold;
    transition: 0.2s;
    padding: 0.5rem;
}

    .red-button-sm:hover {
        color: #ffffff;
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　シルバー枠のボタン　*/
.silver-outline-button {
    border: solid #999999 1px;
    background-color: white;
    font-weight: bold;
    padding: 0.4rem;
}

    .silver-outline-button:hover {
        background: #bbbbbb;
        color: white;
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　緑枠のボタン　*/
.green-outline-button {
    border: solid #6eb92b 1px;
    background-color: white;
    font-weight: bold;
    padding: 0.4rem;
}

    .green-outline-button:hover {
        background: #6eb92b;
        color: white;
    }

/*　赤枠のボタン　*/
.red-outline-button {
    border: solid #eb3c5b 1px;
    background-color: white;
    font-weight: bold;
    padding: 0.4rem;
}

    .red-outline-button:hover {
        background: #eb3c5b;
        color: white;
    }

/*　オレンジ枠のボタン　*/
.orange-outline-button {
    border: solid #ffad34 1px;
    background-color: white;
    font-weight: bold;
    padding: 0.4rem;
}

    .orange-outline-button:hover {
        background: #ffad34;
        color: white;
    }

/*　青枠のボタン　*/
.blue-outline-button {
    border: solid #4ba3e1 1px;
    background-color: white;
    font-weight: bold;
    padding: 0.4rem;
}

    .blue-outline-button:hover {
        background: #4ba3e1;
        color: white;
    }

/*　変更を保存するボタン　あんまり目立たない感じ　*/
.save-outline-button {
    font-size: 1.1rem !important;
    border: solid #8b8d8a 2px;
    background: #ffffff;
    color: #000000;
    font-weight: bold;
    transition: 0.2s;
    padding: 1rem;
}

    .save-outline-button:hover {
        font-size: 1.3rem !important;
        border: solid #6eb92b 2px;
        background: #ffffff;
        color: #6eb92b;
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
    }

/*　検索条件エリア　*/
.search-area {
    background-color: white;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-right: 8%;
    z-index: 1;
}

/*　検索結果表示　*/
.search-results[data-view="normal"] li:before {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    content: '';
    background-color: #dbdbdb;
    top: -1.2rem;
}

.search-results[data-view="grid"] li:before {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    content: '';
    background-color: #dbdbdb;
}

/*　表示方法：リスト　--------- */
.search-results[data-view="normal"] li {
    width: 100%;
    margin-bottom: 40px;
}

    .search-results[data-view="normal"] li > form > button {
        display: flex;
        flex-direction: row;
    }
/*　表示方法：グリッド　------- */
.search-results[data-view="grid"] li {
    width: 220px;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

    .search-results[data-view="grid"] li > button {
        display: normal;
    }


    .search-results[data-view="grid"] li:before {
        width: 120%;
    }

.search-results[data-view="grid"] p:first-of-type {
    margin-top: 1rem;
}


/* 色ボタン共通装飾 */
.white-btn {
    color: #3e3a39;
    border: 1.5px solid;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
}

.white-btn-disabled {
    color: #3e3a39;
    border: 1.5px solid;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
}

.white-btn:hover {
    color: white;
}

/* ボタン(緑) */
.green-square {
    border-color: #8dc21f !important;
}

.green-square-disabled {
    border-color: #8dc21f !important;
}

.green-square:hover {
    background: #8dc21f !important;
}
/* ボタン(青) */
.blue-square {
    border-color: #11aced !important;
}

.blue-square-disabled {
    border-color: #11aced !important;
}

.blue-square:hover {
    background: #11aced !important;
}

/* ボタン(ピンク) */
.pink-square {
    border-color: #fd86b6 !important;
}

.pink-square-disabled {
    border-color: #fd86b6 !important;
}

.pink-square:hover {
    background: #fd86b6 !important;
}

/* ボタン(オレンジ) */
.orange-square {
    border-color: #f29600 !important;
}

.orange-square-disabled {
    border-color: #f29600 !important;
}

.orange-square:hover {
    background: #f29600 !important;
}

/* ボタン(グレー) */
.gray-square {
    border-color: #9e9e9e !important;
}

.gray-square-disabled {
    border-color: #9e9e9e !important;
}

.gray-square:hover {
    background: #9e9e9e !important;
}

/*　三点リーダーボタン　位置　*/
.delete-button-position {
    right: 0;
    top: 0;
    font-size: 1.8rem !important;
    color: gray;
}

/* ラベル */
.Option-label {
    position: relative;
    border: none;
    border-bottom: solid 1px;
    padding-left: 1rem;
}

    .Option-label:before {
        content: "";
        position: absolute;
        background: #036fb7;
        top: 50%;
        left: 0px;
        height: 1.5rem;
        width: 0.2rem;
        transform: translate(0, -50%);
    }

/*　検索ヘッダー　*/
.search-header {
    display: grid;
    grid-template-columns: 30rem 315px;
}

/* 背景画像を設定 中央に配置し、幅高さいっぱいに表示 */
.photo-square {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/*　リスト表示　--------- */
[data-view="normal"] .photo-square {
    width: 140px;
    height: 140px;
}

/*　グリッド表示　------- */
[data-view="grid"] .photo-square {
    width: 180px;
    height: 180px;
    margin-top: 2.5rem;
}


/*　テーブル　*/
.spec-table {
    font-size: 0.9rem !important;
    line-height: 1.4rem;
    font-size: 1rem;
    width: 100%;
    border-spacing: 0;
    border-top: 1px solid #aaaaaa;
    position: relative;
    z-index: 0;
}

    .spec-table th {
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        background-color: #eeeeef;
        padding: 12px 15px;
        border-bottom: 1px solid #aaaaaa;
    }

    .spec-table td {
        width: 100%;
        height: auto;
        padding: 12px 15px;
        vertical-align: top;
        border-bottom: 1px solid #aaaaaa;
    }

    .spec-table tr:first-of-type {
        background-color: #fff;
        border-top: none;
    }



/* メニュー */
.menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 0.2rem solid #6eb92b;
    padding: 10px 15px;
}

    .menu-container img {
        height: 60px;
        width: 60px;
    }

    .menu-container button {
        height: 170px;
        width: 10rem;
        padding: 10px;
        background-color: white;
        font-weight: bold;
        transition: 0.2s;
    }

        .menu-container button:hover {
            box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
            transform: translateY(-5px);
        }

        .menu-container button > p:nth-of-type(2) {
            font-size: 0.8rem !important;
            color: #5a5a5a;
        }

    .menu-container div {
        width: 70px;
        height: 70px;
        background-color: #eeeeef;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin: 0px auto;
    }

    .menu-container p {
        margin-bottom: 5px;
    }

/* メニュー内アイコン */
.menu-iconbox div:first-of-type {
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
}

    .menu-iconbox div:first-of-type img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 40px;
    }

.menu-iconbox div:last-of-type {
    padding-left: 80px;
}

/*　絞り込み条件　見出し幅　*/
.sortWidth {
    width: 5em;
    text-align: right;
}

/*　絞り込み条件　入力枠　*/
.text-search img {
    height: 1.5rem;
}

.text-search input, select {
    border-radius: 0.5rem;
    height: 2.2rem;
    width: 8rem;
    padding: 0.3rem 0.6rem;
    border: solid 1px #656254;
}

/*　検索ワード入力　*/
.serch_text {
    width: 100%;
}

    .serch_text input {
        height: 2.2rem;
        width: 60%;
        max-width: 400px;
        padding: 0.3rem 0.6rem;
        border: solid 1px #656254;
        border-right: none;
        position: relative;
        top: 0px;
    }

    .serch_text > *:first-child {
        height: 2.2rem;
        border-radius: 0.5rem 0rem 0rem 0.5rem;
        border: solid 1px #656254;
        border-right: none;
    }

    .serch_text > *:last-child {
        height: 2.2rem;
        border-radius: 0rem 0.5rem 0.5rem 0rem;
        padding: 0.3rem 0.6rem;
        border: solid 1px #656254;
        border-left: none;
        width: 60px;
    }

    .serch_text img {
        height: 1.5rem;
    }


/*　検索する　ボタン　*/
.btn-login-parents button {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn-login-parents button:after {
        content: '';
        width: 0.5rem;
        height: 0.5rem;
        border-top: 0.15rem solid #2285b1;
        border-right: 0.15rem solid #2285b1;
        transform: rotate(45deg);
        margin: 1rem;
    }

    .btn-login-parents button:hover:after {
        border-top: 0.15rem solid #fff;
        border-right: 0.15rem solid #fff;
    }

/*　ボタン　*/
.btn-login {
    width: 100%;
    height: 3rem;
    border-radius: 0.6rem;
    color: #656254;
    background-color: rgb(0 0 0 / 0.00);
    font-weight: bold;
    border: solid #a6dee9 0.15rem;
}

    .btn-login:hover {
        color: #fff;
        background-color: #a6dee9;
        border-style: none;
    }


/*　明細　*/
.detail-body {
    background: #fff;
    /*    margin-bottom: 0.5rem;*/
    width: 100%;
    color: #000;
    border: solid black 0.1rem;
}

    .detail-body:hover {
        background-color: #eeeeef;
    }

    .detail-body img {
        height: 100%;
        width: auto;
    }

/*　マウスホバーで色を変更する　*/
.hover-color-change-main:hover {
    color: #4da131;
}

/*　アコーディオンメニュー　*/
.qa {
}

    .qa .q {
        position: relative;
        cursor: pointer;
        border: solid 0.12rem rgba(191, 187, 187, 1.00);
    }

        .qa .q:before {
            position: absolute;
            content: "";
            display: block;
            width: 10px;
            height: 2px;
            background-color: #656254;
            right: 15px;
            top: 50%;
            transform: translate(0, -50%);
        }

        .qa .q:after {
            position: absolute;
            content: "";
            display: block;
            width: 10px;
            height: 2px;
            background-color: #656254;
            right: 15px;
            top: 50%;
            transform: translate(0, -50%) rotate(90deg);
        }

        .qa .q .active:after {
            display: none;
        }


    .qa .a {
        display: none;
        padding: 15px;
    }

        .qa .a ul {
            list-style: none;
            line-height: 2.5rem;
        }

/*　アイコン付きボタン　*/
.button-icon {
    /*　background-imageを別途指定する　*/
    background: no-repeat 0px 0px;
    padding-left: 2rem;
    float: right;
}


.border-left-right {
    border-left: solid 1px #dbdbdb;
    border-right: solid 1px #dbdbdb;
}

/* input (type=text) の幅 */
.text-width-short {
    width: 40px;
}
.text-width-middle {
    width: 160px;
}
.text-width-long {
    width: 380px;
}

.modal-width {
    max-width: 960px !important;
}

.scrollbar::-webkit-scrollbar {
    width: 10px;
}

.scrollbar::-webkit-scrollbar-track {
    background-color: #eceff7;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #d3eaf8;
    border-radius: 8px;
}

.common-modal-table thead td {
    background-color: #a6d5f2 !important;
    font: 14px / 18px Arial, Sans-serif;
    color: #595757;
    border-spacing: 0;
    padding: 4px;
    font-weight: 700;
    border-collapse: collapse;
    vertical-align: middle;
}

.common-modal-table tbody td {
    font: 12px / 18px Arial, Sans-serif;
    color: #333;
    border-spacing: 0;
    padding: 4px;
    border-collapse: collapse;
    vertical-align: top;
    border-left: #ccc 1px solid;
    border-right: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
}

.label-border{
    position: sticky;
    top: 0;
}

.label-border::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    border: #4eace5 1px solid;
    z-index: -1;
}

/* エラーメッセージ表示時の画像のサイズ */
.error-img {
    max-height: 16px;
    max-width: 16px;
}

/*-----------------
    文字入力欄の幅
 ------------------*/
.text-width-50{
    width: 50px;
}
.text-width-60 {
    width: 60px;
}
.text-width-95 {
    width: 95px;
}
.text-width-100 {
    width: 100px;
}
.text-width-105 {
    width: 105px;
}
.text-width-260 {
    width: 260px;
}
.text-width-340 {
    width: 340px;
}
.text-width-365 {
    width: 365px;
}
.text-width-390 {
    width: 390px;
}
.text-width-500 {
    width: 500px;
}
.text-width-810 {
    width: 810px;
}

/* セレクトボックスdisabled時の設定 */
select:disabled {
    background-color: #f5f5f5;
    border-color: rgba(118, 118, 118, 0.3);
}

/* ── Heading Block ── */
.heading-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 999px;
    width: fit-content;
}

.badge svg {
    width: 14px;
    height: 14px;
    color: #4EACE5;
    flex-shrink: 0;
}

.badge-text {
    font-size: 12px;
    font-weight: 600;
    color: #4EACE5;
}

.heading {
    font-size: 44px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
}

.description {
    font-size: 15px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.75;
}