@charset "utf-8";

.main .container {
    max-width: 1020px;
    padding: 0 30px;
    margin-left: auto;
    margin-right: auto;
}

.list-page .main .container {
    max-width: 1100px;
    padding: 0 120px;
}

.list-page .main {
    background: #f6f7f8;
}

.page-heading__sub {
    margin: 0px 0 14px;
}

@media print, only screen and (max-width: 767.98px) {

    .page-heading__sub {
        margin: 0 0 calc( 14px * .7 );
    }

}

@media print, only screen and (max-width: 575.98px) {

    .page-heading__sub {
        margin: 0 0 calc( 14px * .55 );
    }

}

@media print,only screen and (max-width: 479.98px) {

    .page-heading__sub {
        margin: 0 0 calc( 14px * .5 );
    }

}

/* .page-heading-block__inner {
    max-width: 960px;
} */

/*
------------------------------------------------------------
一覧
------------------------------------------------------------
*/

.infection-group__name {
    border-radius: 10em;
    background: #47bcb2;
    color: #fff;
    width: 224px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    margin: 26px auto 0;
    position: relative;
    z-index: 2;
}

.infection-group__name:first-child {
    margin-top: 0;
}

.infection-group__contents {
    border: 3px solid #47bcb2;
    border-radius: 6px;
    background: #fff;
    padding: 40px 60px;
    margin: -17px 0 0;
    display: flex;
    justify-content: center;
    position: relative;
}

.infection__list {
    list-style: none;
    margin: -6px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.infection-group--infection.infection-group__name {
    background: #eb6c6f;
}

.infection-group--stomach-virus.infection-group__name {
    background: #e7cb5f;
}

.infection-group--respiratory.infection-group__name {
    background: #92c555;
}

.infection-group--stomach-bug.infection-group__name {
    background: #cb94c8;
}

.infection-group--summer-cold.infection-group__name {
    background: #7aacd0;
}

.infection-group--infection.infection-group__contents {
    border-color: #eb6c6f;
    background-color: #faf2f2;
}

.infection-group--stomach-virus.infection-group__contents {
    border-color: #e7cb5f;
    background-color: #fbf8ee;
}

.infection-group--respiratory.infection-group__contents {
    border-color: #92c555;
    background-color: #f0f8e6;
}

.infection-group--stomach-bug.infection-group__contents {
    border-color: #cb94c8;
    background-color: #f7f2f7;
}

.infection-group--summer-cold.infection-group__contents {
    border-color: #7aacd0;
    background-color: #e8f3fa;
}

.infection__list:before {
    content: '';
    display: block;
    position: absolute;
    background: transparent no-repeat center;
    max-width: 1100px;
    width: 96vw;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%,-50%);
}

.infection-group--infection .infection__list:before {
    background-image: url(../png/chara_index_01%402x.png);
    background-size: 181px 196px;
    background-position: center left;
    height: 196px;
    transform-origin: left bottom;
}

.infection-group--stomach-virus .infection__list:before {
    background-image: url(../png/chara_index_02%402x.png);
    background-size: 198px 219px;
    background-position: center right;
    height: 219px;
    transform-origin: right bottom;
}

.infection-group--respiratory .infection__list:before {
    background-image: url(../png/chara_index_03%402x.png);
    background-size: 209px 135px;
    background-position: center left;
    height: 135px;
    transform-origin: left top;
}

.infection-group--stomach-bug .infection__list:before {
    background-image: url(../png/chara_index_04%402x.png);
    background-size: 193px 182px;
    background-position: center right;
    height: 182px;
    transform-origin: right bottom;
}

.infection-group--summer-cold .infection__list:before {
    background-image: url(../png/chara_index_05%402x.png);
    background-size: 132px 223px;
    background-position: center left;
    height: 223px;
    transform-origin: left bottom;
}



.infection-group__contents .infection__list:before {
    max-width: 1100px;
}

.infection-group--infection .infection__list:before {
    top: auto;
    bottom: -10px;
    transform: translate(-50%,0);
}

.infection-group--stomach-virus .infection__list:before {
    max-width: 1030px;
    top: auto;
    bottom: -50px;
    transform: translate(-50%,0);
}

.infection-group--respiratory .infection__list:before {
    max-width: 1180px;
    top: auto;
    bottom: -35px;
    transform: translate(-50%,0);
}

.infection-group--stomach-bug .infection__list:before {
    top: auto;
    bottom: -15px;
    transform: translate(-50%,0) scale(.95);
}

.infection-group--summer-cold .infection__list:before {
    max-width: 1030px;
    width: 93vw;
    top: auto;
    bottom: -10px;
    transform: translate(-50%,0);
}


/* item */

.infection__item {
    position: relative;
    z-index: 2;
    margin: 6px;
    width: 170px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: normal;
}
  
.infection__link {
    border-radius: 6px;
    background: #fff;
    color: #333 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    box-shadow: 0px 4px 9.4px 0.6px rgba(0, 0, 0, 0.1);
}

.main a.infection__link,
.main a.infection__link:link,
.main a.infection__link:hover,
.main a.infection__link:focus,
.main a.infection__link:visited,
.main a.infection__link:active {
    text-decoration: none;
    color: inherit;
}

.infection-group--infection a.infection__link:hover,
.infection-group--infection a.infection__link:focus {
    color: #eb6c6f !important;
}

.infection-group--stomach-virus a.infection__link:hover,
.infection-group--stomach-virus a.infection__link:focus {
    color: #e7cb5f !important;
}

.infection-group--respiratory a.infection__link:hover,
.infection-group--respiratory a.infection__link:focus {
    color: #92c555 !important;
}

.infection-group--stomach-bug a.infection__link:hover,
.infection-group--stomach-bug a.infection__link:focus {
    color: #cb94c8 !important;
}

.infection-group--summer-cold a.infection__link:hover,
.infection-group--summer-cold a.infection__link:focus {
    color: #7aacd0 !important;
}

/*
------------------------------------------------------------
詳細
------------------------------------------------------------
*/

.infection-detail__sec {
    display: flex;
    align-items: center;
}

.infection-detail__sec + .infection-detail__sec {
    margin-top: 40px;
}

.infection-detail__sec--img-left {
    flex-direction: row-reverse;
}

.infection-detail__sec--img-right .infection-detail__img-col {
    margin-left: 60px;
}

.infection-detail__sec--img-left .infection-detail__img-col {
    margin-right: 60px;
}

.infection-detail__img-col {
    flex: 1 0 auto;
}

.infection-detail__heading {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    color: #47bcb2;
    position: relative;
    margin: 0 0 calc( 20 / 32 * 1em );
    padding-left: calc( 38 / 32 * 1em );
}

.infection-detail__heading:before {
    content: '';
    display: block;
    width: calc( 24 / 32 * 1em );
    height: calc( 5 / 32 * 1em );
    background: #47bcb2;
    position: absolute;
    left: 0;
    top: .7em;
}

.infection-detail__text {
    margin: 0;
}

.infection-slide-nav {
    position: relative;
    left: 50%;
    width: 100vw;
    transform: translate(-50%,0);
    margin: 80px 0 0;
    padding: 40px 0 0;
    border-top: 1px solid #e5e5e5;
}

.infection-slide-nav .slick-track {
    display: flex;
}

.infection-slide-nav .slick-slide {
    float: none;
    display: flex;
    height: auto;
}

.slick-prev, .slick-next {
    width: 34px;
    height: 34px;
}

.slick-prev {
    left: -30px;
}

.slick-next {
    right: -30px;
}

.slick-prev:before, .slick-next:before {
    font-family: 'Material Icons';
    font-size: 34px;
    color: #47bbb2;
}

.slick-prev:before {
    content: 'keyboard_arrow_left';
    content: '\e314';
}

.slick-next:before {
    content: 'keyboard_arrow_right';
    content: '\e315';
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    color: #333;
}

.infection-slide-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;   
}

.infection-slide-nav__item {
    margin: 0 5px;
}

.infection-slide-nav__link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 78px;
    border: 2px solid #47bcb2;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
    box-sizing: border-box;
    padding: calc( 22px + .4em ) 1em .4em;
    width: 100%;
    position: relative;
    height: 100%;
    color: #333 !important;
}

.main a.infection-slide-nav__link,
.main a.infection-slide-nav__link:link,
.main a.infection-slide-nav__link:hover,
.main a.infection-slide-nav__link:focus,
.main a.infection-slide-nav__link:visited,
.main a.infection-slide-nav__link:active {
    text-decoration: none;
    color: inherit;
}

.infection-slide-nav__link:hover,
.infection-slide-nav__link:focus {
    opacity: .7;
}

.infection-slide-nav__tag {
    position: absolute;
    top: 5px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.6em;
    font-size: 12px;
    font-weight: 500;
    background: #47bcb2;
    color: #fff;
    border-radius: 10em;
}

.infection-group--infection .infection-slide-nav__tag {
    background: #eb6c6f;
}

.infection-group--stomach-virus .infection-slide-nav__tag {
    background: #e7cb5f;
}

.infection-group--respiratory .infection-slide-nav__tag {
    background: #92c555;
}

.infection-group--stomach-bug .infection-slide-nav__tag {
    background: #cb94c8;
}

.infection-group--summer-cold .infection-slide-nav__tag {
    background: #7aacd0;
}

.infection-group--infection .infection-slide-nav__link {
    border-color: #eb6c6f;
    background-color: #faf2f2;
}

.infection-group--stomach-virus .infection-slide-nav__link {
    border-color: #e7cb5f;
    background-color: #fbf8ee;
}

.infection-group--respiratory .infection-slide-nav__link {
    border-color: #92c555;
    background-color: #f0f8e6;
}

.infection-group--stomach-bug .infection-slide-nav__link {
    border-color: #cb94c8;
    background-color: #f7f2f7;
}

.infection-group--summer-cold .infection-slide-nav__link {
    border-color: #7aacd0;
    background-color: #e8f3fa;
}

@media print,only screen and (max-width: 1199.98px) {

    

}

@media print,only screen and (max-width: 1069.98px) {

        

}

@media print,only screen and (max-width: 1019.98px) {

    

}

@media print,only screen and (max-width: 991.98px) {

    .infection-detail__text-col {
        
    }

    .infection-detail__img-col {

    }

    .infection-detail__sec--img-left .infection-detail__img-col {
        margin: 0;
    }

    .infection-detail__sec--img-right .infection-detail__img-col {
        margin: 0;
    }

    .infection-detail__sec--img-left .infection-detail__img {
        transform-origin: left center;
    }

    .infection-detail__sec--img-right .infection-detail__img {
        transform-origin: right center;
    }

    .infection-detail__img {
        transform: scale(.8);
    }

}

@media print, only screen and (max-width: 767.98px) {

    .main {
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .infection-detail__sec {
        display: block;
    }

    .infection-detail__img-col {
        text-align: center;
    }

    .infection-detail__sec--img-left .infection-detail__img {
        transform-origin: center center;
    }

    .infection-detail__sec--img-right .infection-detail__img {
        transform-origin: center center;
    }

    .infection-detail__img {
        transform: scale(1);
    }

    .infection-detail__img-col {
        padding: 8vw 10vw;
    }

    .infection-slide-nav {
        margin: 4vw 0 0;
        padding: 4vw 0 0;
    }

}

@media print, only screen and (max-width: 719.98px) {

    .list-page .main .container {
        padding: 0 8vw;
    }

    .infection-group__contents {
        padding-bottom: calc( 180 / 768 * 100vw );;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .infection__list.infection__list:before {
        height: calc( 180 / 768 * 100vw );
        top: auto;
        bottom: calc( -1 * 20 / 768 * 100vw );
        background-size: auto 100%;
        max-width: none;
        background-position: right bottom;
        transform-origin: right bottom;
    }

    .infection-group--infection .infection__list:before {
        
    }

    .infection-group--stomach-virus .infection__list:before {
        height: calc( 200 / 768 * 100vw );
    }

    .infection-group--respiratory .infection__list:before {
        height: calc( 160 / 768 * 100vw );
    }

    .infection-group--stomach-bug .infection__list:before {
        height: calc( 200 / 768 * 100vw );
    }

    .infection-group--summer-cold .infection__list:before {
        
    }

    .infection__item {
        min-width: calc(50% - 12px);
    }

}

@media print, only screen and (max-width: 575.98px) {

    .infection-group__name {
        margin-top: 10vw;
    }

    .infection__item {
        min-width: 0;
        width: 11em;
        font-size: 14px;
        margin: 4px;
    }

    .infection__link {
        height: 7em;
        box-shadow: 0px 2px 4px 0.3px rgba(0, 0, 0, 0.1);
    }

    .detail-page .page-contents {
        margin-bottom: 4vw;
    }

}

@media print,only screen and (max-width: 479.98px) {

    .infection-group__name {
        width: 13em;
        height: 2em;
    }

    .infection__item {
        font-size: 3vw;
    }

    
    .infection-detail__heading {
        font-size: 21px;
    }

    .infection-detail__sec + .infection-detail__sec {
        margin-top: 4vw;
    }

    .infection-slide-nav__tag {
        font-size: 10px;
    }

    .infection-slide-nav__link {
        font-size: 12px;
    }

    .infection-slide-nav__link br {
        display: none;
    }


}