@charset "UTF-8";

/* 見出し2 */
article h2 {
    color: #fff;
    clear: both;
    font-size: 1.1875rem;
    font-weight: normal;
    line-height: 1;
    text-align: left;
    text-shadow: 1px 1px 2px #000;
    vertical-align: top;
    padding: 6px 0 4px 1em;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    letter-spacing: 3px;
}

/* ---- 検索 ---- */
div#Gsearch {
    text-align: right;
}

div#Gsearch form p {
    font-size: .9em;
    line-height: 1;
}

/*更新情報 */
.history {
    margin-top: 20px;
    margin-bottom: 1em;
    border: 1px solid #ccc;
}

.history h2 {
    margin: 0 0 1em;
    background: -ms-linear-gradient(top, #c3d9ff 0%, #97b0d9 100%);
    background: linear-gradient(#c3d9ff 0%, #97b0d9 100%);
    font-size: 1em;
    color: #ffffff;
    text-shadow: 1px 1px 2px #666;
}

.dl-horizontal {
    margin: 0 1em .5em;
    display: flex;
    flex-direction: column;
}

.dl-horizontal dt {
    display: inline-block;
    max-width: 10em;
    margin-right: 1em;
    width: 100%;
    text-align: right;
    vertical-align: top;
}

.dl-horizontal dd {
    display: inline-block;
    max-width: calc(100% - 11.375em);
    width: 100%;
    margin-bottom: .1875rem;
}

.dl-horizontal dd + dd {
    margin-left: 11.375em;
    display: block;
}

/*---------------------
anti-hiv-medicine list
---------------------*/

/* 共通 */
.anti-hiv-medicine {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0.2em 0;
    font-size: .875em;
}

.contents-menu ul {
    margin: .3125rem 0;
}

.contents-menu ul li a {
    font-size: 1em;
}

/* NEWの調整用 */
#contents .new {
    margin-left: 0.5em;
    bottom: 0.3em;
}

/*---------------------
 種類別
---------------------*/

/* 核酸系逆転写酵素阻害剤 */
#nrti h2 {
    margin-top: 1em;
    background-color: #43b989;
}

#nrti .anti-hiv-medicine {
    border: 1px solid #43b989;
}

#nrti .code,
#nrti .name {
    color: #43b989;
}

/* 非核酸系逆転写酵素阻害剤 */
#nnrti h2 {
    background-color: #d63c8d;
}

#nnrti .anti-hiv-medicine {
    border: 1px solid #d63c8d;
}

#nnrti .code,
#nnrti .name {
    color: #d63c8d;
}

/* 核酸系逆転写酵素阻害剤 + 非核酸系逆転写酵素阻害剤 */
#nrti-and-nnrti h2 {
    background-color: #8ba627;
}

#nrti-and-nnrti .anti-hiv-medicine {
    border: 1px solid #8ba627;
}

#nrti-and-nnrti .code,
#nrti-and-nnrti .name {
    color: #8ba627;
}

/* インテグラーゼ阻害剤 */

#ir h2 {
    background-color: #fb7f2e;
}

#ir .anti-hiv-medicine {
    border: 1px solid #fb7f2e;
}

#ir .code,
#ir .name {
    color: #fb7f2e;
}

/* 核酸系逆転写酵素阻害剤 ＋ インテグラーゼ阻害剤 */
#nrti-and-ir h2 {
    background-color: #f54f51;
}

#nrti-and-ir .anti-hiv-medicine {
    border: 1px solid #f54f51;
}

#nrti-and-ir .code,
#nrti-and-ir .name {
    color: #f54f51;
}

/* 非核酸系逆転写酵素阻害剤 ＋ インテグラーゼ阻害剤 */
#nnrti-and-ir h2 {
    background-color: #cfcf2d;
    /*background-color: #ffc500;*/
}

#nnrti-and-ir .anti-hiv-medicine {
    border: 1px solid #cfcf2d;
}

#nnrti-and-ir .code,
#nnrti-and-ir .name {
    color: #cfcf2d;
}

/* プロテアーゼ阻害剤 */
#pi h2 {
    background-color: #6699cc;
}

#pi .anti-hiv-medicine {
    border: 1px solid #6699cc;
}

#pi .code,
#pi .name {
    color: #6699cc;
}

/* 核酸系逆転写酵素阻害薬＋プロテアーゼ阻害薬 */
#nrti-and-pi h2 {
    background-color: #40bac9;
}

#nrti-and-pi .anti-hiv-medicine {
    border: 1px solid #40bac9;
}

#nrti-and-pi .code,
#nrti-and-pi .name {
    color: #40bac9;
}

/* CCR5阻害剤 */
#ccr5 h2 {
    background-color: #9456dc;
}

#ccr5 .anti-hiv-medicine {
    border: 1px solid #9456dc;
}

#ccr5 .code,
#ccr5 .name {
    color: #9456dc;
}

/* 未使用 */
.flex-item {
    flex: 0 0 100px;
}

/* 上記を指定すると、幅を小さくした時に右からはみ出すため */

/* Illust */
.shape {
    flex-basis: 100px;
    min-width: 78px;
    text-align: center;
}

/* 略称 */
.code {
    flex-basis: 100px;
    font-size: 1.5em;
    text-shadow: 1px 1px 2px #666;
}

/* 薬剤名 */
.name {
    flex-basis: 200px;
    font-size: 1.2em;
    text-align: left;
    text-shadow: 1px 1px 2px #666;
}


/*-------------------
 各薬剤のメニュー
 --------------------*/
.contents-menu {
    flex-basis: calc(100% - 400px);
}

.contents-menu ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 0;
    list-style-type: none;
}

.contents-menu li {
    padding: 0.3em;
}

/* 薬カード */
.btn-card:link,
.btn-card:visited {
    background-color: #6666ff;
    border-color: #6666ff;
    color: #ffffff;
}

.btn-card:hover,
.btn-card:focus,
.btn-card:active {
    background-color: #8c8cff;
    border-color: #8c8cff;
}

/* Q&A */
.btn-qa:link,
.btn-qa:visited {
    background-color: #ff6600;
    border-color: #ff6600;
    color: #ffffff;
}

.btn-qa:hover,
.btn-qa:focus,
.btn-qa:active {
    background-color: #ff9a56;
    border-color: #ff9a56;
}

/* ペイシェントインフォメーション */
.btn-patient-info:link,
.btn-patient-info:visited {
    background-color: #009966;
    border-color: #009966;
    color: #ffffff;
}

.btn-patient-info:hover,
.btn-patient-info:focus,
.btn-patient-info:active {
    background-color: #4c997f;
    border-color: #4c997f;
}

/* 添付文書 */
.btn-document:link,
.btn-document:visited {
    background-color: #ff33ff;
    border-color: #ff33ff;
    color: #ffffff;
}

.btn-document:hover,
.btn-document:focus,
.btn-document:active {
    background-color: #ff7fff;
    border-color: #ff7fff;
}

/* 患者向け医薬品ガイド */
.btn-guide:link,
.btn-guide:visited {
    background-color: #feb837;
    border-color: #feb837;
    color: #ffffff;
}

.btn-guide:hover,
.btn-guide:focus,
.btn-guide:active {
    background-color: #fed078;
    border-color: #fed078;
}

/* くすりのしおり */
.btn-shiori:link,
.btn-shiori:visited {
    background-color: #800040;
    border-color: #800040;
    color: #ffffff;
}

.btn-shiori:hover,
.btn-shiori:focus,
.btn-shiori:active {
    background-color: #6b2d4d;
    border-color: #6b2d4d;
}

/* 無し */
.btn-card[href=""],
.btn-qa[href=""],
.btn-patient-info[href=""],
.btn-document[href=""],
.btn-guide[href=""],
.btn-shiori[href=""] {
    background-color: #ffffff;
    border-color: #cccccc;
    color: #cccccc;
    cursor: default;
    pointer-events: none;
}

/* Responsive */
@media only screen and (max-width: 767px) {
    .anti-hiv-medicine {
        flex-direction: column;
    }

    .shape {
        margin-top: .4375rem;
        flex-basis: auto;
    }

    .code,
    .name,
    .contents-menu {
        flex-basis: auto;
    }

    .contents-menu ul {
        justify-content: center;
    }

    .dl-horizontal {
        font-size: .875rem;
        margin: 0 .5em .5em;
    }

    .dl-horizontal div {
        margin-bottom: .375rem;
    }

    .dl-horizontal dt {
        display: block;
        min-width: auto;
        margin-right: 0;
        text-align: left;
    }

    .dl-horizontal dd {
        margin-left: .5em;
        min-width: 100%;
        display: block;
    }

    .dl-horizontal dd + dd {
        margin-left: .5em;
        display: block;
    }
}