@charset "utf-8";

/* =======================================================
指導資料の操作パネル（検索窓 / リクエスト / カテゴリ）

  資料一覧と資料詳細の両方で使うため、tools.css から切り出している。
  検索窓とリクエストボタン本体（.search__row / .search-form-3 /
  .search__requestBtn）はトップページでも使うので mystyle.css 側にある。
==========================================================*/

.tools__search {
    display: flex;
    justify-content: center;
}

.tools__disease {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 20px;
    margin-top: 40px;
}

.tools__disease--name {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 50px;
    width: 160px;

    border: 2px solid #92CCA4;
    border-radius: 100px;

    background-color: #fff;
    color: #393636;

    font-size: 1.6rem;
    font-weight: 400;

    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* 対象の資料が0件のカテゴリは非活性にする */
.tools__disease--name.is-disabled {
    border-color: #CCCCCC;
    background-color: rgba(204, 204, 204, .3);
    color: #A9A7A7;
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}

/* カテゴリボタン: ホバーで下線が左から伸びる */
.tools__disease--label {
    position: relative;
}

.tools__disease--label::after {
    content: "";
    position: absolute;
    left: 0;
    /* ボックス下端ではなく字面の下端を基準にする */
    bottom: calc((100% - 1em) / 2 - 6px);
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s ease;
    pointer-events: none;
}

.tools__disease--name:hover .tools__disease--label::after {
    transform: scaleX(1);
}

.tools__disease--name.is-disabled .tools__disease--label::after {
    display: none;
}

/* =================================================================================
pc
====================================================================================*/
@media screen and (min-width:788px) {

    .tools__disease {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
        margin: 133px 30px;
    }

    .tools__disease--name {
        height: 70px;
        width: 207px;
        font-size: 2rem;
    }
}

@media screen and (min-width: 1280px) {

    .tools__disease {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {

    .tools__disease--name,
    .tools__disease--label::after {
        transition: none;
    }
}