/* 
NOTICE: 
This CSS file contains customized styles for certain pages. Some components could be used in multiple pages.
Please add comment to each component so we can find what component does this style belong to, 
as we will merge CSS files together and remove unnecessary lines or duplicated lines.
When coping with responsive design, please follow the breakpoint in this file.
This file must be loaded after bootstrap.min.css.
*/

/* Desktop Style */
/*-- Content Wrapper with grayish beige rounded corner--*/
.grayish-beige-round-wrapper {
    background-color: var(--color-light-grayish-orange);
    width: calc(100% - 180px);
    padding: 30px;
    border-radius: 28px;
    margin-top: 70px;
    font-size: 1.125rem;
    line-height: 1.75;
}
.grayish-beige-round-wrapper ol {
    margin-bottom: 0;
}
.grayish-beige-round-wrapper ol li {
    padding-left: .5rem;
}
/*--End of Content Wrapper with grayish beige rounded corner--*/

/* Page 2001-005 Image container */
.img-container {
    max-width: 600px;
    width: 100%;
}
.img-container .img-inner {
    width: 100%;
}
.img-container .img-note {
    margin-top: 40px;
    font-size: 13px;
}
/* End of Page 2001-005 Image container */

/* Beige background section */
.beige-bg {
    background-color: var(--color-background-beige);
    width: 100vw;
    margin:0 calc(50% - 50vw);
    padding: 80px calc(50vw - 50%);
    margin-top: 80px;
    margin-bottom: 50px;
}
/* End of Beige background section */

/* Symptoms Wrapper */
.symptom-wrapper {
    background-color: #FFFFFF;
    border-radius: 28px;
    padding: 50px 90px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.symptom-wrapper:first-of-type {
    margin-top: 50px;
}
.symptom-wrapper:last-of-type {
    margin-bottom: 20px;
}
.symptom-wrapper .symptom-grid {
    display: grid;
    column-gap: 3rem;
    align-items: center;
}
.symptom-wrapper .symptom-grid--left {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "image name"
      "image intro";
}
.symptom-wrapper .symptom-grid--right {
    grid-template-columns: 1fr 200px;
    grid-template-areas:
      "name image"
      "intro image";
}
.symptom-wrapper#symptom06 .symptom-grid--right {
    grid-template-columns: 1fr 270px;
    column-gap: 1rem;
}
.symptom-wrapper .symptom-name {
    grid-area: name;
}
.symptom-wrapper .symptom-img-wrapper {
    grid-area: image;
}
.symptom-wrapper .symptom-intro {
    grid-area: intro;
}
/* Grid for multiple images content */
.symptom-wrapper .symptom-grid--multi_images {
    grid-template-columns: 1fr 200px;
    grid-template-areas:
      "name ."
      "intro1 image1"
      "intro2 image2";
}
.symptom-wrapper .symptom-img-wrapper--one {
    grid-area: image1;
}
.symptom-wrapper .symptom-img-wrapper--two {
    grid-area: image2;
}
.symptom-wrapper .symptom-intro--one {
    grid-area: intro1;
}
.symptom-wrapper .symptom-intro--two {
    grid-area: intro2;
}
.symptom-wrapper .symptom-img-wrapper {
    width: 200px;
    min-width: 200px;
    height: fit-content;
    display: flex;
    justify-content: center;
    text-align: center;
}
.symptom-wrapper#symptom06 .symptom-img-wrapper {
    width: 270px;
}
.symptom-wrapper .symptom-img-wrapper .symptom-img {
    max-width: 100%;
    object-fit: contain;
}
/* .symptom-wrapper .symptom-img-wrapper-column {
    width: 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 30px;
}
.symptom-wrapper .symptom-img-wrapper-column .symptom-img {
    max-width: 100%;
    object-fit: contain;
} */
.symptom-wrapper .symptom-intro {
    line-height: 1.75;
}
.symptom-wrapper .symptom-name {
    font-size: 1.375rem;
    font-weight: 500;
    margin-bottom: 25px;
    line-height: 2.25;
}
.symptom-wrapper .symptom-name span {
    border-bottom: 5px dotted var(--color-orange-dark);
    padding-bottom: 4px;
}
.symptom-wrapper .symptom-intro .dot-ul {
    list-style: "・";
    font-size: 1.125rem;
    padding-left: 1.25rem;
    margin-bottom: 0;
}
.symptom-wrapper .symptom-intro .dot-ul .dot-li {
    padding-left: 0.25rem;
}
.symptom-wrapper .symptom-intro .dash-ul {
    list-style: "ー";
    padding-left: 1rem;
}
.symptom-wrapper .symptom-intro .dash-ul .dash-li {
    padding-left: 0.25rem;
}
.symptom-wrapper .annotation {
    margin-top: 40px;
}
.symptom-wrapper .asterisk-ol {
    font-size: 13px;
    padding-left: 1.25rem;
    list-style: none;
}
.symptom-wrapper .asterisk-ol .asterisk-li {
    padding-left: 0.25rem;
    counter-increment: item;
}
.symptom-wrapper .asterisk-ol .asterisk-li::before {
    content: "＊"counter(item);
    position: absolute;
    margin-left: -1.5rem;
}
/* End of Symptoms Wrapper */

/* Citation */
.citation {
    width: 100%;
    font-size: 13px;
    margin-bottom: 2rem;
    word-break: break-word;
}
.citation .numbering-ol {
    padding-left: 1.5rem;
    list-style: none;
}
.citation .numbering-ol .numbering-li {
    counter-increment: item;
}
.citation .numbering-ol .numbering-li::before {
    content: counter(item)"）";
    position: absolute;
    margin-left: -1.25rem;
}
/* End of Citation */
/* Responsive: Mobile view 390px~768px */
@media (max-width: 767.98px) {
    /*-- Content Wrapper with grayish beige rounded corner--*/
    .grayish-beige-round-wrapper {
        width: 100%;
        margin-top: 30px;
        padding: 16px;
    }
    /*--End of Content Wrapper with grayish beige rounded corner--*/

    /* Page 2001-005 Image container */
    .img-container .img-note {
        margin-top: 60px;
    }
    /* End of Page 2001-005 Image container */

    /* Beige background section */
    .beige-bg {
        margin-top: 50px;
        padding: 50px calc(50vw - 50%);
    }
    /* End of Beige background section */

    /* Symptoms Wrapper */
    .symptom-wrapper {
        padding: 20px;
    }
    .symptom-wrapper .symptom-grid {
        display: block;
    }
    .symptom-wrapper .symptom-grid .symptom-img-wrapper {
        width: 100%;
        margin: 50px 0 30px;
        font-size: 1.125rem;
    }
    .symptom-wrapper#symptom02 .symptom-grid .symptom-img-wrapper {
        margin: 20px 0 30px;
    }
    .symptom-wrapper#symptom06 .symptom-img-wrapper {
        width: 100%;
    }
    .symptom-wrapper .symptom-name {
        font-size: 1.25rem;
    }
    /* End of Symptoms Wrapper */
}
/*--END of mobile responsive--*/

/* Responsive: Tablet view 769px~1080px */
@media (min-width: 768px) and (max-width: 1079.98px) {
}
/*--END of table responsive--*/

/* Responsive: Desktop view 1440px~1920px only if necessary */
@media (min-width: 1440px) and (max-width: 1919.98px) {
}
/*--END of desktop responsive--*/

/* Responsive: Extra Large Desktop view > 1920px */
@media (min-width: 1920px) {
}
/*--END of extra large desktop responsive--*/