@charset "utf-8";

/* SPファーストビュー 
==========================*/
h2 {
    margin-bottom: 36px !important;
}

/* =======img====== */
.soundsFight img,
.foodListMain01 img,
.foodListMain02 img,
.foodListSide01 img,
.coatImg img,
.teethImg img {
    position: absolute;
}

/* 個別の位置指定 */
.soundsFight img {
    bottom: 14px;
    left: 65px;
}
.foodListMain01 img {
    top: 6px;
    right: 6px;
}
.foodListMain02 img {
    top: 20px;
    right: 0;
}
.foodListSide01 img {
    top: 0;
    right: -4px;
}
.coatImg img {
    bottom: 265px;
    right: 25px;
}
.teethImg img {
    bottom: 150px;
    right: 30px;
}

/* --- #soundsGuide --- */
#soundsGuide p {
    font-size: 1.7rem;
    text-align: center;
}
#soundsGuide .soundsGrid > section {
    position: relative;
    margin-top: 26px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
}
#soundsGuide .soundsGrid h3 {
    margin-bottom: 12px;
    font-size: 1.9rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
}
#soundsGuide .soundsGrid h3 span.soundsNote {
    font-size: 1.1rem;
}
#soundsGuide .soundsWrap {
    display: flex;
    justify-content: space-around;
    gap: 25px;
    font-size: 1.3rem;
}
#soundsGuide .soundsWrap section {
    width: 100%;
}
#soundsGuide .soundsWrap h4 {
    margin-bottom: 6px;
    padding: 0 8px;
    border-radius: 4px;
    background-color: #78B75E;
    color: #fff;
    font-weight: bold;
    line-height: 1.5em;
}
#soundsGuide .soundsWrap ul li {
    position: relative;
    padding-left: 16px;
}
#soundsGuide .soundsWrap ul li::before {
    content: "";
    position: absolute;
    top: 0.95em;
    left: 2.5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #78B55F;
    transform: translateY(-50%);
}
/* --- /#soundsGuide --- */

/* --- #foodGuide --- */
#foodGuide {
    margin-top: 45px;
}
#foodGuide .foodInfo {
    padding: 16px 20px 26px;
}
#foodGuide .foodInfo p {
    font-size: 1.5rem;
    text-align: center;
}
#foodGuide .foodInfoWrap section + section {
    margin-top: 20px;
    padding-top: 11px;
    border-top: 2px dotted #78B55F;
}
dl.foodList {
    grid-template-columns: none;
    row-gap: 2em;
}
dl.foodList dt {
    letter-spacing: 0.1em;
}
dl.foodList dd span.foodListTitle {
    color: #78B55F;
}
.foodListMain01,
.foodListMain02,
.foodListSide01 {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 1em;
    column-gap: 1em;
    position: relative;
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
}
.foodInfoPoop .imgWrap {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}
.foodInfoPoop .imgWrap figcaption {
    margin-top: 6px;
    font-size: 1.5rem;
    text-align: center;
}
/* --- /#foodGuide --- */

/* --- #healthAlert --- */
#healthAlert .diseaseGraph {
    width: 250px;
    margin: 12px auto 64px;
    justify-content: center;
}
.dataSource {
    bottom: -35px;
}
.headsUpContent {
    padding: 20px 20px 60px 20px;
}
.otherDisease {
    max-width: 331px;
    margin: 27px auto 0;
    padding: 25px 24px 0;
    border-radius: 10px;
    background-color: #fff;
}
.otherDiseaseTitle {
    margin-bottom: 15px;
    font-size: 1.9rem;
    font-weight: bold;
}
.otherDiseaseContent {
    padding-bottom: 30px;
}
.otherDiseaseContent p {
    font-size: 1.4rem;
}
.otherDiseaseName {
    margin-bottom: 8px;
    padding: 2px 15px;
    border-radius: 50px;
    background-color: #EFEEE8;
    font-size: 1.6rem !important;
    font-weight: bold;
}
/* --- /#healthAlert --- */

/* --- #familiarDanger --- */
.dangerHeader {
    background-color: #78B55E;
}
/* --- /#familiarDanger --- */

/* --- #healthCheck --- */
#healthCheck .healthCheckInner {
    padding: 60px 13px 60px 19px;
}
.reference {
    margin-top: 19px;
    font-size: 0.9rem;
}
/* --- /#healthCheck --- */

/* --- #closingMessage --- */
.closingMessage {
    margin-top: 42px;
}

@media (max-width: 767px) {
    /* --- #foodGuide -- */
    .foodInfoWrap {
        display: flex;
        flex-direction: column;
    }
    .foodInfoLeft,
    .foodInfoRight,
    dl.foodList {
        display: contents;
    }
    .foodListMain01 {
        order: 1;
    }
    .foodInfoGrass {
        order: 2;
        margin-top: 20px;
        padding-top: 11px;
        border-top: 2px dotted #78B55F;
    }
    .foodListMain02 {
        order: 3;
        margin-top: 20px;
        padding-top: 11px;
        border-top: 2px dotted #78B55F;
    }
    .foodListSide01 {
        order: 4;
        margin-top: 16px;
    }
    .foodInfoPoop {
        order: 5;
    }
    /* --- /#foodGuide --- */
}

@media only screen and (min-width: 768px) {
    /* --- #soundsGuide --- */
    #soundsGuide .soundsGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    #soundsGuide .soundsGrid > section{
        display:flex;
        flex-direction:column;
        padding-bottom: 80px;
    }
    #soundsGuide .soundsWrap {
        flex-direction:column;
        flex:1;
        gap:15px;
    }
    #soundsGuide .soundsWrap > section:first-child {
        flex:1;
    }
    #soundsGuide .soundsWrap h4 {
        margin-bottom: 4px;
        padding: 1px 8px;
        font-size: 1.4rem;
    }
    /* --- /#soundsGuide --- */

    /* --- #foodGuide -- */
    #foodGuide .foodInfoWrap {
        display: flex;
        gap: 24px;
    }
    #foodGuide .foodInfoWrap > * {
        flex: 1;
        min-width: 0;
    }
    #foodGuide .foodInfo {
        overflow: auto;
        padding: 28px 34px 32px;
    }
    #foodGuide .foodInfo h3 {
        text-align: left;
    }
    #foodGuide .foodInfo .foodInfoGrass h3 {
        padding-top: 0;
    }
    #foodGuide .foodInfo p {
        text-align: left;
    }
    .foodInfoPoop .imgWrap {
        justify-content: flex-end;
        gap: 60px;
    }
    /* --- /#foodGuide --- */

    /* --- #familiarDanger --- */
    #familiarDanger .dangerGrid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* --- /#familiarDanger --- */

    /* ---#healthAlert */
    #healthAlert .diseaseGraph {
        width: 275px;
        margin: 0 0 0 27px;
    }
    #healthAlert .healthAlertWrap {
        margin-top: 10px;
        gap: 0;
    }
    .otherDisease {
        padding: 18px 39px 0;
        max-width: 100%;
    }
    .otherDiseaseTitle {
        font-size: 2.1rem;
        text-align: center;
    }
    .otherDiseaseWrap {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0 26px;
    }
    /* --- /#healthAlert --- */

    /* --- #healthCheck --- */
    #healthCheck {
        margin-top: 43px;
    }
    #healthCheck .healthCheckInner {
        padding: 20px 20px 30px;
    }
    #healthCheck .healthCheckContent {
        display: grid;
        padding: 0 14px;
        grid-auto-flow: column;
        gap: 20px 27.5px;
    }
    #healthCheck .healthCheckContent > section {
        position: relative;
    }
    #healthCheck .healthCheckContent > section:nth-child(n + 3) {
        grid-column: 2;
    }
    .reference {
        margin-top: 11px;
    }
    /* --- /#healthCheck --- */

    /* --- #closingMessage --- */
    .closingMessage {
        margin-top: 49px;
    }
    /* --- /#closingMessage --- */

    /* ---img--- */
    .foodListMain02 img {
        top: -4px;
        right: 30px;
    }
    .foodListSide01 img {
        top: auto;
        bottom: -5px;
        right: 20px;
    }
    .coatImg img {
        bottom: 0;
        right: 10px;
    }
    .teethImg img {
        top: 65px;
        right: 0px;
    }
}