@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
* {
    box-sizing: border-box;
}
:root {
    --color01: #FA4F12;
    --color02: #B64922;
    --color03: #9CC813;
    --color04: #FABE00;
    --color05: #1EB9EE;
    --color06: #F8ECE8;
}
p {
    width: 100%;
}
span {
    font: normal normal 900 2.4rem/2 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
.dentalcare {
    margin: 0 auto;
    padding: 64px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 128px;
    font: normal normal 500 1.8rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.12em;
    font-feature-settings: "palt";
}
@media screen and (min-width:768px) {
    hr {
        width: 100%;
        height: 150px;
        background: url("/img/dentalcare/dentalcare__hr-back.webp");
        background-repeat: no-repeat;
        background-size: contain;
        border: none;
    }
}
@media screen and (max-width:767px) {
    h1 {
        font: normal normal 900 2.4rem/1 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0.05em;
    }
    h2 {
        font: normal normal 700 2.2rem/1.25 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0.05em;
    }
    h3 {
        font: normal normal 900 2rem/1.25 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0.12em;
    }
    hr {
        width: 100%;
        height: 50px;
        background: url("/img/dentalcare/dentalcare__hr-back.webp");
        background-repeat: no-repeat;
        background-size: contain;
        border: none;
    }
    rt {
        letter-spacing: 0.12em;
    }
    .dentalcare {
        padding: 0;
        width: 100%;
        gap: 48px;
    }
    span {
        font: normal normal 900 1.8rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
}
/*インデックスページ*/
#dentalcare__lead {
    padding: 0 0 64px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #F8ECE8 100%);
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}
#dentalcare__lead h1 {
    padding: 64px 0;
}
#dentalcare__lead p {
    text-align: center;
    font: normal normal 500 1.8rem/2 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.12em;
}
.lead__question {
    padding: 8px 24px;
    width: fit-cotnent !important;
    display: block;
    position: relative;
    background: var(--color01);
    color: #FFFFFF;
    font: normal normal 700 2.4rem/2 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
.lead__question::after {
    content: "";
    width: 24px;
    height: 24px;
    background: var(--color01);
    clip-path: polygon(0 0, 50% 50%, 100% 0);
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
}
.lead__answer {
    text-align: center;
    font: normal normal 500 1.8rem/2 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.12em;
}
.lead__answer span {
    font: normal normal 900 3.6rem/2 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    color: var(--color01);
}
.dentalcare-index {
    margin: 0 auto;
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex-wrap: nowrap;
    align-items: center;
    background: var(--color06);
    counter-reset: number 0;
}
.dentalcare-index__item {
    width: 1200px;
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    border: 1px solid #D7D7D7;
    background: #FFFFFF;
}
.dentalcare-index__item img {
    width: 580px;
    height: 363px;
    border: none;
}
.dentalcare-index__text-area {
    width: 100%;
    padding: 24px 16px 24px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    letter-spacing: 0.12em;
}
.dentalcare-index__text-area dt {
    font: normal normal 900 2.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
    color: var(--color02);
    display: flex;
    gap: 8px;
    align-items: baseline;
    counter-reset: sub-number 0;
}
.dentalcare-index__text-area dt::before {
    width: 40px;
    height: 46px;
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero);
    background: url("/img/dentalcare/icon_footprints.svg") center no-repeat;
    font: normal normal 900 3.2rem/1.5 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    color: #FFFFFF;
    letter-spacing: -0.05em;
    text-shadow: 1px 1px 0 var(--color02), -1px 1px 0 var(--color02), -1px -1px 0 var(--color02), 1px -1px 0 var(--color02);
}
.dentalcare-index__text-area dd {
    width: 100%;
    font: normal normal 700 1.8rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    display: flex;
    gap: 8px;
}
.dentalcare-index__text-area dd::before {
    counter-increment: sub-number 1;
    content: counter(sub-number, decimal)".";
    font: normal normal 900 2rem/1.5 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
}
.dentalcare-index__text-area dd a {
    text-decoration: underline;
}
@media screen and (max-width: 767px) {
    #dentalcare__lead h1 {
        padding: 32px 8px 0 8px;
    }
    #dentalcare__lead p {
        text-align: center;
        font: normal normal 500 1.6rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0.12em;
    }
    .lead__question {
        text-align: center;
        font: normal normal 900 2rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        letter-spacing: 0.12em;
    }
    .lead__answer {
        font: normal normal 500 1.4rem/2 "Zen Maru Gothic", "Noto Sans JP", sans-serif !important;
    }
    .lead__answer span {
        font: normal normal 900 2.4rem/1.25 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    .dentalcare-index {
        padding: 24px 8px;
    }
    .dentalcare-index__item {
        width: 100%;
        gap: 0;
        flex-direction: column;
    }
    .dentalcare-index__item img {
        width: 100%;
        height: fit-content;
        object-fit: cover;
    }
    .dentalcare-index__text-area {
        width: 100%;
        padding: 24px 16px;
    }
    .dentalcare-index__text-area dt {
        font: normal normal 700 1.8rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        color: var(--color02);
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .dentalcare-index__text-area dd {
        font: normal normal 700 1.6rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
}
/*コンテンツページ共通*/
#section01, #section02, #section03, #section04 {
    box-sizing: border-box;
    margin: -130px auto 0;
    padding: 130px 0 0 0;
    width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
#dentalcare__title-area {
    padding: 48px 32px;
    margin: 24px auto 0;
    width: 1200px;
    height: 204px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("/img/dentalcare/background__h1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    counter-reset: title-number 0;
}
#dentalcare__h1 {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-shadow: 1px 1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF;
    font: normal normal 700 6rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.05em;
    color: var(--color01);
    text-align: center;
    font-feature-settings: "palt";
}
#dentalcare__h1::after {
    content: "――"attr(data-en);
    font: normal normal 400 2.4rem/1 "Noto Serif JP", sans-serif;
    text-align: right;
    color: #8E8E8E;
}
.content-title-area {
    width: 1200px;
    display: flex;
    gap: 16px;
    align-items: center;
}
.content-title-area::before {
    padding: 8px;
    counter-increment: title-number 1;
    content: counter(title-number, decimal-leading-zero);
    background: url("/img/dentalcare/content_number_background.svg") center no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal 900 7.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    color: #FFFFFF;
    letter-spacing: -0.05em;
    text-shadow: 1px 1px 0 var(--color02), -1px 1px 0 var(--color02), -1px -1px 0 var(--color02), 1px -1px 0 var(--color02);
}
.dentalcare__h2 {
    width: 100%;
    font: normal normal 900 4rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
    vertical-align: middle;
}
.dentalcare__h2 span {
    color: var(--color02);
    font: normal normal 900 4.8rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
}
.index-area {
    width: 100%;
    background: var(--color06);
}
.index-area h2 {
    margin: 0 auto;
    padding: 8px 0 0 0;
    width: 100%;
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
    background: var(--color02);
}
.index-area h2 span {
    width: 1200px;
    display: flex;
    gap: 32px;
    justify-content: flex-start;
    font: normal normal 900 3.6rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
    vertical-align: middle;
    color: #FFFFFF;
}
.index-area h2 span::before {
    content: url("/img/dentalcare/icon_dog02.webp");
}
.conclusion {
    margin: 0;
    padding: 7.5vh 0 0 0;
    width: 100%;
    min-height: 200px;
    display: flex;
    gap: 16px;
    align-items: flex-end;
    position: relative;
}
.conclusion::before {
    content: '';
    width: 7.5vh;
    height: 7.5vh;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color02);
    clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
}
.conclusion::after {
    content: '';
    width: 150px;
    height: 200px;
    background-image: url("/img/dentalcare/08.svg");
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
}
.conclusion__speech-bubble {
    margin: 0;
    padding: 24px;
    width: calc(100% - 150px - 24px);
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    color: var(--color02);
    background: var(--color06);
    font: normal normal 900 2.8rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.12em;
    font-feature-settings: "palt";
}
.conclusion__speech-bubble::before {
    content: "";
    position: absolute;
    bottom: 16px;
    left: 100%;
    margin-top: -15px;
    border: 15px solid transparent;
    border-left: 15px solid var(--color06);
}
.conclusion__speech-bubble p {
    margin: 0;
    padding: 0;
    text-align: center;
}
.conclusion img {
    width: 150px;
    object-position: center top 20px;
}
/*ページ遷移のボタン*/
.button-area {
    margin: 0 auto;
    padding: 0;
    width: 1200px;
}
.button-area ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.button-area ul li {
    width: 580px;
    background: var(--color06);
    border: 1px solid var(--color02);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.button-area ul li a {
    padding: 0 48px;
    width: 100%;
    display: block;
    font: normal normal 700 2rem/3 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    color: var(--color02);
    letter-spacing: 0.08em;
    background: url("/img/dentalcare/icon_footprints.png")no-repeat 10px center;
    background-size: 24px auto;
    position: relative;
}
.button-area ul li.button__prev a {
    text-align: right;
    background: url("/img/dentalcare/icon_footprints.png")no-repeat 540px center;
    background-size: 24px auto;
}
.button-area ul li a::after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background-color: var(--color02);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.button-area ul li.button__prev a::after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    background-color: var(--color02);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.button-area ul li a:hover {
    text-decoration: none;
    opacity: 0.5;
}
.button-area ul li.button--notlink {
    background-color: #D7D7D7;
    border-color: #8E8E8E;
}
.button-area ul li.button__next.button--notlink a {
    mix-blend-mode: luminosity;
}
.button-area ul li.button__prev.button--notlink a {
    background: url("/img/dentalcare/icon_footprints.png")no-repeat 540px center;
    background-size: 24px auto;
    mix-blend-mode: luminosity;
}
.button-area ul li.button--notlink a::after {
    background-color: #8E8E8E !important;
}
.button-area ul li.button--notlink a:hover {
    text-decoration: none;
    opacity: 1 !important;
    pointer-events: none;
}
@media screen and (max-width:767px) {
    #section01, #section02, #section03, #section04 {
        margin: 0;
        padding: 0 8px;
        width: 100%;
        gap: 24px;
    }
    #section01 {
        margin: -32px 0 0 0 !important;
    }
    #dentalcare__title-area {
        margin: 0 0 8px 0;
        padding: 0 16px;
        width: 100%;
        height: 100px;
    }
    #dentalcare__h1 {
        padding: 8px 0;
        width: fit-content;
        gap: 0;
        font: normal normal 900 2.8rem/1 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    #dentalcare__h1::after {
        content: attr(data-en);
        font: normal normal 400 1.2rem/1.25 "Noto Serif JP", sans-serif;
        text-align: center;
    }
    .content-title-area {
        width: 100%;
        gap: 8px;
        align-items: center;
    }
    .content-title-area::before {
        padding: 8px;
        width: 80px;
        height: 100px;
        counter-increment: title-number 1;
        content: counter(title-number, decimal-leading-zero);
        background: url("/img/dentalcare/content_number_background.svg") center no-repeat;
        background-size: contain;
        display: flex;
        justify-content: center;
        align-items: center;
        font: normal normal 900 6.4rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        color: #FFFFFF;
        letter-spacing: -0.1em;
        text-shadow: 1px 1px 0 var(--color02), -1px 1px 0 var(--color02), -1px -1px 0 var(--color02), 1px -1px 0 var(--color02);
    }
    .dentalcare__h2 {
        font: normal normal 900 2.4rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        letter-spacing: 0.05em;
        font-feature-settings: "palt"1;
    }
    .dentalcare__h2 span {
        color: var(--color02);
        font: normal normal 900 2.8rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    .index-area h2 {
        padding: 8px 8px 0 8px;
        gap: 0;
    }
    .index-area h2 span {
        padding: 0;
        width: 100%;
        gap: 16px;
        align-items: center;
        font: normal normal 900 2.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    .index-area h2 span::before {
        content: url("/img/dentalcare/icon_dog02.webp");
        width: 75px;
    }
    .conclusion {
        min-height: 120px;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;
    }
    .conclusion::after {
        content: '';
        width: 100px;
        height: 120px;
    }
    .conclusion__speech-bubble {
        margin: 0;
        padding: 16px 8px;
        width: calc(100% - 100px - 16px);
        height: fit-content;
        gap: 24px;
        font: normal normal 900 1.8rem/1.25 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    .conclusion__speech-bubble p {
        text-align: left;
    }
    .conclusion img {
        width: 100px;
    }
    /*ページ遷移のボタン*/
    .button-area {
        width: 100%;
    }
    .button-area ul {
        padding: 0 8px;
        justify-content: space-between;
        gap: 24px;
    }
    .button-area ul li {
        padding: 8px;
        width: 100%;
    }
    .button-area ul li a {
        padding: 0 24px;
        width: 100%;
        height: 100%;
        font: normal normal 900 1.2rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        letter-spacing: -0.05em;
        background: url("/img/dentalcare/icon_footprints.png")no-repeat left center;
        background-size: 16px auto;
        position: relative;
    }
    .button-area ul li.button__prev a {
        background: url("/img/dentalcare/icon_footprints.png")no-repeat right center;
        background-size: 16px auto;
    }
    .button-area ul li a::after {
        content: "";
        width: 8px;
        height: 8px;
        top: 50%;
        right: 4px;
    }
    .button-area ul li.button__prev a::after {
        content: "";
        width: 8px;
        height: 8px;
        top: 50%;
        left: 4px;
        transform: translateY(-50%);
    }
}
/*---------------------
　content01
---------------------*/
#tooth-stracture {
    width: 100%;
    height: 1200px;
    position: relative;
    counter-reset: tooth-check 0;
    background-image: url("/img/dentalcare/01.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 800px 600px;
}
#tooth-stracture li {
    width: 1000px;
    height: 150px;
    padding: 16px 16px 16px 96px;
    border: 1px solid var(--color01);
    position: relative;
    vertical-align: middle;
    background: #FFFFFF;
}
#tooth-stracture li:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
#tooth-stracture li:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
}
#tooth-stracture li:nth-child(3) {
    position: absolute;
    bottom: 198px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
#tooth-stracture li:nth-child(4) {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
#tooth-stracture li:nth-child(1)::after {
    content: '';
    width: 250px;
    height: 250px;
    position: absolute;
    top: 105%;
    left: 0;
    background-image: url("/img/dentalcare/02.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
#tooth-stracture li:nth-child(2)::after {
    content: '';
    width: 250px;
    height: 250px;
    position: absolute;
    top: 105%;
    right: 0;
    background-image: url("/img/dentalcare/03.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
#tooth-stracture li:nth-child(3)::after {
    content: '';
    width: 250px;
    height: 250px;
    position: absolute;
    bottom: 105%;
    left: 100%;
    transform: translateX(-55%);
    background-image: url("/img/dentalcare/04.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
#tooth-stracture li:nth-child(4)::after {
    content: '';
    width: 250px;
    height: 250px;
    position: absolute;
    bottom: 0;
    left: 100%;
    transform: translateX(-55%);
    background-image: url("/img/dentalcare/05.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
#tooth-stracture li dl {}
#tooth-stracture li dl dt {
    margin: 0;
    padding: 0;
    width: 75px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 8px;
    background: var(--color01);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85px, 0 100%);
    text-align: center;
    font: normal normal 900 3.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0;
    color: #FFFFFF;
}
#tooth-stracture li dl dt span {
    font: normal normal 900 1.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    text-transform: uppercase;
}
#tooth-stracture li dl dd {
    font: normal normal 500 2rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
}
#tooth-stracture li dl dd span {
    line-height: 1;
    letter-spacing: 0;
}
#tooth-stracture li:nth-child(-n+2) {
    width: 550px;
    height: 200px;
}
#tooth-stracture li p span {
    line-height: 1;
    letter-spacing: 0;
}
#column {
    padding: 32px;
    width: 100%;
    border: 2px solid var(--color02);
    display: flex;
    flex-direction: column;
    gap: 48px;
}
#column h3, #dentalcare__check-inner h3 {
    margin: 0 auto;
    padding: 16px 24px;
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--color02);
    font: normal normal 900 3.2rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--color02);
}
#column h3::before {
    content: url("/img/dentalcare/icon__column.svg");
}
#column__content-area {
    display: flex;
    justify-content: space-between;
    font: normal normal 500 2rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
#column__text {
    width: calc(100% / 3);
    background-image: url("/img/useful/0002_main.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-color: rgba(255, 255, 255, 0.7) !important;
    background-blend-mode: lighten;
    text-align: center;
    vertical-align: middle;
}
#column__img {
    padding: 0;
    width: calc(100% / 3);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#column__img img {
    order: 2;
}
#column__table {
    margin: 0;
    padding: 0;
    border: 1px solid #D7D7D7;
}
#column__table caption {
    text-align: center;
    vertical-align: middle;
    font: normal normal 500 2rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
#column__table thead tr th {
    background: var(--color02);
    color: #FFFFFF;
}
#column__table th, #column__table td {
    padding: 4px;
    border: 1px solid #D7D7D7;
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
}
#point {
    margin: 620px 0 0 0;
    padding: 0 0 48px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    justify-content: center;
    background: linear-gradient(to bottom, #FFFFFF 10%, transparent 50%), url("/img/dentalcare/background__footstamp.png");
}
#point ol {
    margin: 0;
    padding: 32px 0 0 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    counter-reset: point 0;
    position: relative;
}
#point ol::before {
    content: '';
    width: 1200px;
    height: 700px;
    background-image: url("/img/dentalcare/07.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(-40%);
}
#point ol li {
    margin: 0;
    padding: 48px 16px 16px 16px;
    width: 350px;
    border: 1px solid var(--color01);
    text-align: center;
    background-color: #FFFFFF;
    position: relative;
}
#point ol li::before {
    counter-increment: point 1;
    content: counter(point);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color01);
    position: absolute;
    top: -1%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    font: normal normal 900 3.6rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    color: #FFFFFF;
}
#point ol li dl {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#point ol li dl dt {
    width: 100%;
    font: normal normal 900 2.4rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    color: var(--color01);
}
#point ol li dl dd {
    font: normal normal 500 1.8rem/2 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
}
#point p {
    width: fit-content;
    font-size: 2.4rem;
    font-weight: 700;
}
#difference {
    margin: 0;
    padding: 32px 0 0 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#difference li {
    margin: 0;
    padding: 56px 24px 24px 24px;
    width: 584px;
    background: #FFFFFF;
    border: 1px solid var(--color01);
    position: relative;
    font: normal normal 500 1.8rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    text-align: center;
}
#difference li h3 {
    margin: 0;
    padding: 8px 32px;
    width: fit-content;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color01);
    font: normal normal 700 3.2rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
    color: #FFFFFF;
}
#difference__image-list {
    padding: 8px 0 24px 0;
    display: flex;
    justify-content: center;
}
#difference__image-list li {
    margin: 0;
    padding: 0;
    width: 140px;
    height: 140px;
    border-radius: 100%;
    overflow: hidden;
    background: #FFFFFF;
}
#difference__image-list li:nth-child(even) {
    transform: translateY(24px);
}
#difference__image-list li:nth-child(n+2) {
    margin-left: -24px;
}
@media screen and (max-width:767px) {
    ol#tooth-stracture {
        padding: 330px 0 366px 0;
        width: 100%;
        height: fit-content;
        background-size: contain;
        background-position: top;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 382px;
    }
    #tooth-stracture li {
        width: 100% !important;
        height: fit-content !important;
        padding: 16px 16px 16px 96px;
        position: relative !important;
        position: static;
        vertical-align: middle;
    }
    #tooth-stracture li:nth-child(1), #tooth-stracture li:nth-child(2), #tooth-stracture li:nth-child(3), #tooth-stracture li:nth-child(4) {
        transform: none;
        top: 0;
        left: auto;
    }
    #tooth-stracture li:nth-child(1)::after {
        content: '';
        width: 100%;
        height: 350px;
        top: calc(100% + 16px);
        left: 0;
        background-position: center;
    }
    #tooth-stracture li:nth-child(2)::after {
        content: '';
        width: 100%;
        height: 350px;
        top: calc(100% + 16px);
        left: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    #tooth-stracture li:nth-child(3)::after {
        content: '';
        width: 100%;
        height: 350px;
        top: calc(100% + 16px);
        left: 0;
        transform: none;
        background-image: url("/img/dentalcare/04_sp.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    #tooth-stracture li:nth-child(4)::after {
        content: '';
        width: 100%;
        height: 350px;
        top: calc(100% + 16px);
        left: 0;
        transform: none;
        background-image: url("/img/dentalcare/05_sp.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    #tooth-stracture li dl dd {
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    #tooth-stracture li dl dd span {
        line-height: 1;
        letter-spacing: 0;
    }
    #tooth-stracture li p span {
        line-height: 1;
        letter-spacing: 0;
    }
    #column {
        padding: 16px;
        gap: 16px;
    }
    #column h3 {
        padding: 8px 0;
        width: 100%;
        font: normal normal 900 2rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #column h3::before {
        content: '';
    }
    #column__content-area {
        flex-direction: column;
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        gap: 32px;
    }
    #column__text {
        width: 100%;
        text-align: left;
        background: transparent;
    }
    #column__img {
        width: 100%;
    }
    #column__table {
        font: normal normal 700 1.8rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        margin: 0;
        padding: 0;
        border: 1px solid #D7D7D7;
    }
    #column__table caption {
        text-align: center;
        vertical-align: middle;
    }
    #column__table thead tr th {
        background: var(--color02);
    }
    #column__table th, #column__table td {
        padding: 4px;
        border: 1px solid #D7D7D7;
        text-align: center;
        vertical-align: middle;
    }
    #point {
        margin: 0;
        padding: 200px 0 48px 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 48px;
        justify-content: center;
        align-items: center;
        align-content: center;
        background: linear-gradient(to bottom, #FFFFFF 10%, transparent 50%), url("/img/dentalcare/background__footstamp.png");
    }
    #point ol::before {
        content: '';
        width: 100%;
        height: 200px;
        background-position: bottom;
        background-size: cover;
        bottom: 90%;
        left: 0;
        /*transform: translateY(-40%);*/
    }
    #point ol {
        padding: 32px 0 0 0;
        width: 100%;
        justify-content: space-around;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 48px;
    }
    #point ol li {
        padding: 32px 16px;
        width: 100%;
        height: fit-content;
    }
    #point ol li::before {
        counter-increment: point 1;
        content: counter(point);
        width: 50px;
        height: 50px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color01);
        position: absolute;
        top: -1%;
        left: 50%;
        transform: translate(-50%, -50%);
        font: normal normal 900 3.6rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        color: #FFFFFF;
    }
    #point ol li dl {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    #point ol li dl dt {
        width: 100%;
        font: normal normal 900 1.8rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        color: var(--color01);
    }
    #point ol li dl dd {
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #point p {
        width: fit-content;
        font-size: 1.6rem;
        font-weight: 700;
    }
    #difference {
        width: 100%;
        gap: 48px;
    }
    #difference li {
        margin: 0;
        padding: 56px 24px 24px 24px;
        width: 100%;
        background: #FFFFFF;
        border: 1px solid var(--color01);
        position: relative;
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        text-align: center;
    }
    #difference li h3 {
        margin: 0;
        padding: 8px 24px;
        width: fit-content;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--color01);
        font: normal normal 900 1.8rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #difference__image-list {
        padding: 8px 0 24px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    #difference__image-list li {
        margin: 0;
        padding: 0;
        width: calc(100% / 2 - 8px);
        height: fit-content;
        min-height: 140px;
        border-radius: 25px;
    }
    #difference__image-list li:nth-child(even) {
        transform: none;
    }
    #difference__image-list li:nth-child(n+2) {
        margin-left: 0;
    }
}
/*---------------------
　contents02
---------------------*/
/*歯周病になるまでの流れを知ろう*/
#periodontal-disease-flow {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
/*おうちで歯周病チェック*/
#periodontal-checkpoint {
    margin: 0;
    padding: 24px;
    width: 100%;
    background: url("/img/dentalcare/background__footstamp.png");
}
#periodontal-checkpoint ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
#periodontal-checkpoint ul li {
    padding: 32px 24px 32px 96px;
    width: 835px;
    background: #FFFFFF;
    border: 2px solid;
    position: relative;
}
#periodontal-checkpoint ul li:nth-child(1) {
    border-color: var(--color04);
}
#periodontal-checkpoint ul li:nth-child(2) {
    border-color: var(--color03);
}
#periodontal-checkpoint ul li:nth-child(3) {
    border-color: var(--color05);
}
#periodontal-checkpoint ul li:nth-child(4) {
    border-color: var(--color01);
}
#periodontal-checkpoint ul li:nth-child(5) {
    border-color: var(--color02);
}
#periodontal-checkpoint ul li:nth-child(even) {
    margin-left: auto;
}
#periodontal-checkpoint ul li dl {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}
#periodontal-checkpoint ul li dl dt {
    padding: 24px 0;
    width: 75px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font: normal normal 900 3.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: -0.05em;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85px, 0 100%);
    color: #FFFFFF;
    position: relative;
    position: absolute;
    top: 0;
    left: 8px;
}
#periodontal-checkpoint ul li:nth-child(1) dl dt {
    background-color: var(--color04);
}
#periodontal-checkpoint ul li:nth-child(2) dl dt {
    background-color: var(--color03);
}
#periodontal-checkpoint ul li:nth-child(3) dl dt {
    background-color: var(--color05);
}
#periodontal-checkpoint ul li:nth-child(4) dl dt {
    background-color: var(--color01);
}
#periodontal-checkpoint ul li:nth-child(5) dl dt {
    background-color: var(--color02);
}
#periodontal-checkpoint ul li dl dt span {
    font: normal normal 900 1.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    text-transform: uppercase;
}
#periodontal-checkpoint ul li dl dd::first-child {
    max-width: 540px;
}
#periodontal-checkpoint ul li dl dd img {
    margin-left: auto;
    width: 150px;
    height: 150px;
}
#periodontal-checkpoint ul li:nth-child(1) dl dd span {
    color: var(--color04);
}
#periodontal-checkpoint ul li:nth-child(2) dl dd span {
    color: var(--color03);
}
#periodontal-checkpoint ul li:nth-child(3) dl dd span {
    color: var(--color05);
}
#periodontal-checkpoint ul li:nth-child(4) dl dd span {
    color: var(--color01);
}
#periodontal-checkpoint ul li:nth-child(5) dl dd span {
    color: var(--color02);
}
#dentalcare__check-list {
    margin: 0;
    padding: 48px 32px 56px 32px;
    width: 1200px;
    background: var(--color02);
    position: relative;
}
#dentalcare__check-list img {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
#dentalcare__check-inner {
    margin: 0 auto;
    padding: 48px 24px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
    align-items: center;
}
#dentalcare__check-inner h3 {
    width: 1000px;
}
#dentalcare__check-inner h3::before {
    content: url("/img/dentalcare/icon__check.svg");
}
/*#dentalcare__check-inner p {
    width: 100% !important;
}*/
#dentalcare__check-inner ul {
    margin: 0;
    padding: 0 128px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: url("/img/dentalcare/pencil.webp")no-repeat right bottom;
    background-size: 275px auto;
    font: normal normal 900 2.4rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
#dentalcare__check-inner ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}
#dentalcare__check-inner ul li::before {
    content: url("/img/dentalcare/square-check-regular.svg");
    width: 24px;
    height: 24px;
}
#dentalcare__check-inner p {
    margin: 0 auto;
    width: 1000px;
}
#dentalcare__check-inner p span {
    margin: 0 auto;
    text-align: center;
    font: normal normal 900 1.6rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
#dentalcare__check-inner .attention {
    text-align: center;
    font: normal normal 900 1.6rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 1.92px;
}
.digest {
    padding: 64px 0 0 0;
    width: 100%;
    display: flex;
    gap: 32px;
    flex-direction: column;
    text-align: center;
    letter-spacing: 0.12em;
    position: relative;
}
.digest::before {
    content: '';
    width: 32px;
    height: 32px;
    border-right: 10px solid #B64922;
    border-bottom: 10px solid #B64922;
    position: absolute;
    top: 0;
    left: 50%;
    transform:
        rotate(45deg) translate(-90%, 50%);
}
.digest p span {
    font: normal normal 900 2.8rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif !important;
    background: linear-gradient(transparent 75%, var(--color01) 60%);
}
#periodontal-checkpoint ul li dl {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    gap: 24px;
}
#periodontal-checkpoint ul li dl dt {
    padding: 24px 0;
    width: 75px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font: normal normal 900 3.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: -0.05em;
    color: #FFFFFF;
    background-color: #000000;
    position: absolute;
    top: 0;
    left: 8px;
}
#periodontal-checkpoint ul li dl dt span {
    font: normal normal 900 1.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
}
#periodontal-checkpoint ul li dl dd::first-child {
    width: 540px;
}
#periodontal-checkpoint ul li dl dd img {
    margin-left: auto;
    width: 150px;
    height: 150px;
}
#periodontal {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
}
#periodontal li {
    margin: 0;
    padding: 0;
    width: 384px;
    border: 1px solid #D7D7D7;
}
#periodontal li img {
    height: 382px;
}
#periodontal li p {
    padding: 16px;
}
/*歯周病にならないためにできること*/
#periodontal-prevention {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: space-between;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 45%, #FFF 50%), url("/img/dentalcare/background__footstamp.png") 50%/ cover no-repeat;
}
#periodontal-prevention .text-area {
    display: flex;
    flex-direction: column;
    gap: 24px;
    order: 1;
}
#periodontal-prevention img {
    margin: 0;
    padding: 0;
    width: 580px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    order: 2;
}
@media screen and (max-width:767px) {
    #periodontal li {
        width: 100%;
    }
    /*おうちで歯周病チェック*/
    #periodontal-checkpoint {
        padding: 8px;
        width: 100%;
    }
    #periodontal-checkpoint ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 48px;
    }
    #periodontal-checkpoint ul li {
        padding: 24px 16px 24px 96px;
        width: 100%;
    }
    #periodontal-checkpoint ul li dl {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    #periodontal-checkpoint ul li dl dt {
        padding: 24px 0;
        width: 75px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font: normal normal 900 3.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        letter-spacing: -0.05em;
        color: #FFFFFF;
        background-color: #000000;
        position: absolute;
        top: 0;
        left: 8px;
    }
    #periodontal-checkpoint ul li dl dt span {
        font: normal normal 900 1.2rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        text-transform: uppercase;
    }
    #periodontal-checkpoint ul li dl dd::first-child {
        width: 540px;
    }
    #periodontal-checkpoint ul li dl dd span {
        letter-spacing: 0;
    }
    #periodontal-checkpoint ul li dl dd img {
        margin: 0 auto;
        width: 100%;
        height: auto;
    }
    /*お家での歯周病チェック項目*/
    #dentalcare__check-list {
        padding: 32px 16px 24px 16px;
        width: 100%;
        position: relative;
    }
    #dentalcare__check-list img {
        width: 80%;
    }
    #dentalcare__check-inner {
        margin: 0 auto;
        padding: 48px 8px 24px 8px;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        gap: 32px;
        justify-content: center;
        align-items: center;
    }
    #dentalcare__check-inner p {
        margin: 0 auto;
        width: 100%;
    }
    #dentalcare__check-inner h3 {
        padding: 8px 0;
        width: 100%;
        font: normal normal 900 2rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    #dentalcare__check-inner h3::before {
        content: '';
    }
    #dentalcare__check-inner ul {
        padding: 0;
        width: 100%;
        gap: 16px;
        background-size: 100px auto;
    }
    #dentalcare__check-inner ul li {
        width: 100%;
        font: normal normal 900 1.6rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    #dentalcare__check-inner .attention {
        width: 100%;
        font: normal normal 900 1.4rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0.12em;
    }
    .digest {
        padding: 64px 0 0 0;
        width: 100%;
        display: flex;
        gap: 24px;
        flex-direction: column;
    }
    .digest p {
        width: 100% !important;
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif !important;
    }
    .digest p span {
        width: 100%;
        font: normal normal 900 1.8rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif !important;
        background: linear-gradient(transparent 75%, var(--color01) 60%);
    }
    .digest::before {
        transform:
            rotate(45deg) translate(-25%, 25%);
    }
    #periodontal-prevention {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        background: transparent;
    }
    #periodontal-prevention .text-area {
        display: flex;
        flex-direction: column;
        gap: 24px;
        order: 2;
    }
    #periodontal-prevention img {
        order: 1;
    }
}
/*---------------------
　content03
---------------------*/
#checklist {
    padding: 48px 0;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
    background: url(/img/dentalcare/background__footstamp.png);
}
#checklist li {
    margin: 0;
    padding: 0;
    width: 1000px;
    border: 2px solid;
}
#checklist li:nth-child(1) {
    border-color: var(--color04);
}
#checklist li:nth-child(1) dl dt {
    background: var(--color04);
}
#checklist li:nth-child(2) {
    border-color: var(--color03);
}
#checklist li:nth-child(2) dl dt {
    background: var(--color03);
}
#checklist li:nth-child(3) {
    border-color: var(--color05);
}
#checklist li:nth-child(3) dl dt {
    background: var(--color05);
}
#checklist li:nth-child(4) {
    border-color: var(--color01);
}
#checklist li:nth-child(4) dl dt {
    background: var(--color01);
}
#checklist li:nth-child(5) {
    border-color: var(--color02);
}
#checklist li:nth-child(5) dl dt {
    background: var(--color02);
}
#checklist li dl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}
#checklist li dl dt {
    display: flex;
    padding: 16px 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: #FFF;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #525252;
    font: normal normal 900 3.2rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
}
#checklist li dl dd {
    margin: 0;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    background: #FFFFFF;
}
#checklist li dl dd dl {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: stretch;
}
#checklist li dl dd dl dt {
    margin: 0;
    padding: 0;
    width: fit-content;
    font: normal normal 900 2.8rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.12em;
    -webkit-text-stroke-width: 0px;
    color: #000;
    background: transparent !important;
}
#checklist li dl dd dl dd {
    margin: 0;
    padding: 0;
    background: transparent;
    color: #000;
    text-align: left;
    font: normal normal 700 2rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.12em;
}
.habit {
    display: flex;
    align-items: center;
    gap: 40px;
    align-self: stretch;
    flex-wrap: wrap;
}
.habit .text-area {
    width: 666px;
}
.habit .text-area p span {
    line-height: 1.25;
}
.habit img {
    margin: 0;
    padding: 0;
    width: 494px;
    order: 1;
}
.habit:nth-child(3) .text-area {
    order: 2;
}
.habit:nth-child(3) img {
    height: 300px;
}
#about-mazzle-training {
    margin: 0;
    padding: 0 0 32px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
#about-mazzle-training h3 {
    width: fit-content;
    padding: 16px 24px;
    border-bottom: 2px solid #000000;
    text-align: center;
    font: normal normal 900 3.2rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
}
#about-mazzle-training p {
    text-align: center;
}
#muzzle-training {
    margin: 0;
    padding: 32px 32px 64px 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    background: url("/img/dentalcare/background__footstamp.png");
    border: 3px solid var(--color06);
    overflow: hidden;
}
#muzzle-training h3 {
    padding: 16px 0;
    width: 100%;
    border-bottom: 2px solid var(--color02);
    text-align: center;
    font: normal normal 900 3.2rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
    color: var(--color02);
}
#muzzle-training p {
    text-align: center;
}
#muzzle-training ul {
    margin: 0 0 0 -16px;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
#muzzle-training ul li {
    margin: 0;
    padding: 8px;
    width: 245px;
    background: #FFFFFF;
    border: 1px solid #D7D7D7;
    text-align: center;
    position: relative;
    box-shadow: 2px 2px 10px 0px rgba(34, 34, 34, 0.40);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#muzzle-training ul li::after {
    content: '';
    width: 16px;
    height: 24px;
    background-color: var(--color02);
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}
#muzzle-training ul li:last-child::after {
    content: '';
    background-color: transparent;
}
#muzzle-training ul li span {
    font-size: 2rem;
    line-height: 1;
    color: var(--color02);
}
/*ワンちゃんが歯みがきを嫌がる理由*/
#reason {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
#reason h3 {
    width: fit-content;
    padding: 16px 24px;
    border-bottom: 2px solid #000000;
    text-align: center;
    font: normal normal 900 3.2rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.12em;
}
.reason__list {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 848px;
    display: flex;
    align-items: flex-start;
    gap: 0px -32px;
    align-self: stretch;
    flex-wrap: wrap;
    counter-reset: reason-num 0;
}
.reason__item {
    margin: 0;
    padding: 24px 48px 24px 24px;
    width: calc(100% / 3);
    height: 790px;
    border: 1px solid #8E8E8E;
    border-radius: 25px 0 0 25px;
    background-color: #F5F5F5;
}
.reason__item:nth-child(n+2) {
    margin: 0 0 0 -32px;
}
.reason__item:nth-child(even) {
    background: #FFFFFF;
}
.reason__item:last-child {
    padding: 24px;
}
.reason__item dl {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.reason__item dl dt {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 135px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font: normal normal 900 2.8rem/1.25 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0;
}
.reason__item dl dt::before {
    counter-increment: reason-num 1;
    content: counter(reason-num);
    width: 62px;
    height: 58px;
    isolation: isolate;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal 900 3.6rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    color: #FFFFFF;
    text-shadow: 1px 1px 0 #8E8E8E, -1px 1px 0 #8E8E8E, -1px -1px 0 #8E8E8E, 1px -1px 0 #8E8E8E;
    background-image: url("/img/dentalcare/icon_footprints.png");
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: luminosity;
}
.reason__item dl dd {
    text-align: center;
}
.reason__item dl dd p {
    text-align: left;
    font: normal normal 500 1.8rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
}
.reason__item dl dd img {
    width: 326px;
    height: 326px;
    object-position: center;
    object-fit: fill;
}
@media screen and (max-width:767px) {
    /*ワンちゃんの歯の状態をチェックしてみよう*/
    #checklist {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 32px;
        align-self: stretch;
        flex-wrap: wrap;
    }
    #checklist li {
        margin: 0;
        padding: 0;
        width: 100%;
        border: 1px solid;
    }
    #checklist li dl {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }
    #checklist li dl dt {
        padding: 8px 16px;
        font: normal normal 900 1.8rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #checklist li dl dd {
        padding: 16px;
    }
    #checklist li dl dd dl dt {
        margin: 0;
        padding: 0;
        width: fit-content;
        font: normal normal 900 1.8rem/1 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    #checklist li dl dd dl dd {
        font: normal normal 700 1.4rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0.12em;
    }
    /*歯みがきはいつから始める？*/
    .habit {
        gap: 16px;
    }
    .habit .text-area {
        width: 100%;
        order: 2;
    }
    .habit:nth-child(3) img {
        object-fit: cover;
        height: auto;
    }
    /*まずは歯磨きにつながるマズルトレーニングにトライしてみよう!*/
    /*マズルトレーニングとは*/
    #about-mazzle-training h3 {
        width: 100%;
        padding: 8px 0;
        font: normal normal 900 2rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #about-mazzle-training p {
        text-align: left;
    }
    /*マズルトレーニングの流れ*/
    #muzzle-training {
        padding: 16px;
        width: 100%;
        gap: 24px;
    }
    #muzzle-training h3 {
        padding: 8px 0;
        font: normal normal 900 2rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #muzzle-training p {
        text-align: center;
    }
    #muzzle-training ul {
        margin: 0 0 -16px 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
    }
    #muzzle-training ul li {
        width: 100%;
        position: relative;
    }
    #muzzle-training ul li::after {
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%)rotate(90deg);
    }
    #muzzle-training ul li:last-child::after {
        content: '';
    }
    #muzzle-training ul li span {
        font-size: 2rem;
        line-height: 1;
        color: var(--color02);
    }
    /*ワンちゃんが歯みがきを嫌がる理由*/
    #reason {
        gap: 24px;
    }
    #reason h3 {
        width: 100%;
        padding: 8px 0;
        font: normal normal 900 2rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    .reason__list {
        margin: 0;
        padding: 0;
        height: fit-content;
    }
    .reason__item:first-child {
        margin-top: 0;
    }
    .reason__item, .reason__item:last-child {
        margin-top: -24px;
        padding: 24px 24px 48px 24px;
        width: 100%;
        height: fit-content;
        border-radius: 25px 25px 0 0;
    }
    .reason__item:nth-child(n+2) {
        margin: -32px 0 0 0;
    }
    .reason__item dl {
        gap: 8px;
    }
    .reason__item dl dt {
        height: fit-content;
        font: normal normal 900 2rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    .reason__item dl dt::before {
        counter-increment: reason-num 1;
        content: counter(reason-num);
        width: 62px;
        height: 58px;
        isolation: isolate;
        display: flex;
        justify-content: center;
        align-items: center;
        font: normal normal 900 3.6rem/1 "Poppins", "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        color: #FFFFFF;
        text-shadow: 1px 1px 0 #8E8E8E, -1px 1px 0 #8E8E8E, -1px -1px 0 #8E8E8E, 1px -1px 0 #8E8E8E;
        background-image: url("/img/dentalcare/icon_footprints.png");
        background-repeat: no-repeat;
        background-position: center;
        mix-blend-mode: luminosity;
    }
    .reason__item dl dd p {
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
}
/*---------------------
　content04
---------------------*/
/*歯みがきのやり方【準備編】*/
#preparation {
    width: 100%;
    display: flex;
    padding: 32px 48px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
    border: 3px solid #B64922;
    background: #FFF;
}
#preparation p {
    text-align: center;
}
#preparation ul {
    display: flex;
    padding: 32px 48px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    background: var(--color06);
    position: relative;
}
#preparation ul::before, #preparation ul::after {
    content: '';
    width: 64px;
    height: 64px;
    position: absolute;
    top: 0;
    right: -1px;
}
#preparation ul::before {
    background: var(--color02);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    box-shadow: 2px 2px 2px rgba(34, 34, 34, 0.60);
}
#preparation ul::after {
    background: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
#preparation ul li {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
#preparation ul li p {
    text-align: left;
    font: normal normal 900 2.4rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
}
#preparation ul li::before {
    content: '';
    background-image: url("/img/dentalcare/icon_footprints.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 30px;
    height: 30px;
}
#preparation dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#preparation dl dt {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--color01);
    font: normal normal 900 2.8rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
#preparation dl dt::before, #preparation dl dt::after {
    content: url("/img/dentalcare/lightbulb_bright.svg");
    width: 32px;
    height: 32px;
}
#preparation-checklist {
    display: flex;
    padding: 24px 48px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}
#preparation-checklist li {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
#preparation-checklist li::before {
    content: url("/img/dentalcare/hand-point-up-solid.svg");
    width: 20px;
    height: 26.667px;
}
#preparation-checklist li span {
    line-height: 1;
}
/*歯みがきのやり方【実践編】*/
#howto-brush {
    margin: 0;
    padding: 0;
    width: 100%;
}
#howto-brush ol {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    counter-reset: howto 0;
}
#howto-brush ol li {
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 0;
}
#howto-brush .title-area {
    display: flex;
    gap: 8px;
}
#howto-brush .title-area p {
    width: 96px;
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 48px;
    background-color: var(--color01);
    text-align: center;
    font: normal normal 900 4.8rem/1 "Poppins", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    color: #FFFFFF;
    letter-spacing: -0.05em;
}
#howto-brush .title-area p span {
    font: normal normal 900 1.6rem/1 "Poppins", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
}
#howto-brush ol li h3 {
    width: 100%;
    text-align: left;
    font: normal normal 900 3.2rem/1.25 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 16px;
}
#howto-brush .howto-brush__innner {
    margin-left: auto;
    padding: 32px 0px 32px 32px;
    width: 1152px;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px 24px;
    flex-wrap: wrap;
    border-left: 5px solid #B2B2B2;
    background: #FFF;
}
#howto-brush .howto-brush__innner p {
    width: 500px;
}
#howto-brush .howto-brush__innner img {
    margin: 0;
    padding: 0;
    width: 580px;
    height: 363px;
    object-fit: cover;
}
/*歯みがきのやり方【便利グッズ編】*/
#useful-items {
    padding: 48px 0;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
    background: url(/img/dentalcare/background__footstamp.png);
}
#useful-items li {
    width: 1000px;
    border: 3px solid;
}
#useful-items li dl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}
#useful-items li:first-child {
    border-color: var(--color04);
}
#useful-items li:first-child dl dt {
    background: var(--color04);
}
#useful-items li:nth-child(2) {
    border-color: var(--color03);
}
#useful-items li:nth-child(2) dl dt {
    background: var(--color03);
}
#useful-items li:nth-child(3) {
    border-color: var(--color05);
}
#useful-items li:nth-child(3) dl dt {
    background: var(--color05);
}
#useful-items li:last-child {
    border-color: var(--color01);
}
#useful-items li:last-child dl dt {
    background: var(--color01);
}
#useful-items li dl dt {
    display: flex;
    padding: 16px 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: #FFFFFF;
    font: normal normal 900 3.2rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    /* hartz__dental-care/sub-page__h3 */
    -webkit-text-stroke-width: 1;
    -webkit-text-stroke-color: #525252;
    text-shadow: 1px 1px 0 #525252, -1px 1px 0 #525252, -1px -1px 0 #525252, 1px -1px 0 #525252;
    font-family: "Zen Maru Gothic";
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: 125%; /* 40px */
    letter-spacing: 3.84px;
}
#useful-items li dl dd {
    display: flex;
    padding: 32px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    background: #FFFFFF;
}
@media screen and (max-width:767px) {
    /*歯みがきのやり方【準備編】*/
    #preparation {
        padding: 32px 16px;
    }
    #preparation ul {
        padding: 32px 16px;
    }
    #preparation ul::before, #preparation ul::after {
        width: 32px;
        height: 32px;
    }
    #preparation ul li {
        align-items: baseline;
        gap: 4px;
    }
    #preparation ul li::before {
        content: '';
        display: inline-block;
        background-image: url("/img/dentalcare/icon_footprints.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 18px;
        height: 18px;
    }
    #preparation ul li p {
        font: normal normal 900 1.8rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        letter-spacing: 0;
    }
    #preparation dl {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    #preparation dl dt {
        color: var(--color01);
        font: normal normal 900 2rem/1.25 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #preparation dl dd {
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        letter-spacing: 0;
    }
    #preparation-checklist {
        padding: 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }
    #preparation-checklist li {
        align-items: flex-start;
        gap: 8px;
    }
    #preparation-checklist li span {
        line-height: 1;
        letter-spacing: 0;
    }
    /*歯みがきのやり方【実践編】*/
    #howto-brush .title-area {
        display: flex;
        gap: 8px;
    }
    #howto-brush .title-area p {
        margin: 0;
        padding: 0;
        width: 80px;
        height: 80px;
        font: normal normal 900 4rem/1 "Poppins", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    #howto-brush .title-area p span {
        font: normal normal 500 1.6rem/1 "Poppins", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0;
        text-transform: uppercase;
    }
    #howto-brush ol li h3 {
        font: normal normal 900 1.8rem/1.25 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    }
    #howto-brush .howto-brush__innner {
        padding: 16px 0px 16px 16px;
        width: calc(100% - 37.5px);
    }
    #howto-brush .howto-brush__innner img {
        width: 100%;
        height: fit-content;
        object-fit: contain;
    }
    /*歯みがきのやり方【便利グッズ編】*/
    #useful-items {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 32px;
        align-self: stretch;
        flex-wrap: wrap;
    }
    #useful-items li {
        width: 100%;
        border: 3px solid;
    }
    #useful-items li dl {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }
    #useful-items li dl dt {
        padding: 8px 16px;
        font: normal normal 900 1.8rem/1 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0.05em;
    }
    #useful-items li dl dd {
        padding: 16px;
    }
}
/*--------------
 content05
--------------*/
#introduce.lead {
    padding: 32px 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
    text-align: center;
}
.product-introduction {
    font: normal normal 900 2.8rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    text-decoration: underline;
    color: var(--color01);
}
#dentaltoy, #chewdent {
    margin: 0;
    padding: 24px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border: 3px solid var(--color01);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%), url("/img/dentalcare/background__footstamp.png") 50% / cover no-repeat;
    font: normal normal 500 2rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
    position: relative;
}
#dentaltoy h3, #chewdent h3 {
    margin-right: auto;
    padding: 8px 48px 8px 24px;
    width: fit-content;
    display: flex;
    background-color: var(--color01);
    border-radius: 0px 25px 25px 0px;
    /*clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0 100%, 0 0);*/
    font: normal normal 900 3.2rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
    color: #FFFFFF;
}
#dentaltoy .inner, #chewdent .inner {
    padding: 0px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}
#dentaltoy .inner .text-area {
    width: 903px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    order: 2;
}
#dentaltoy .inner .image-area {
    width: 200px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: 1;
}
#dentaltoy .inner .image-area img, #chewdent .inner .image-area img {
    width: 200px;
    height: 150px;
    align-self: stretch;
    object-fit: fill;
}
#dentaltoy__size {
    display: flex;
    padding: 24px;
    align-items: center;
    align-content: center;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
    background-color: var(--color06);
    clip-path: polygon(839px 0, 100% 64px, 100% 100%, 0 100%, 0 0);
    position: relative;
}
#dentaltoy__size::after {
    content: '';
    width: 64px;
    height: 64px;
    background-color: var(--color02);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    position: absolute;
    top: 0;
    right: 0;
}
#dentaltoy__size p {
    font: normal normal 500 2rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
#dentaltoy__size dl {
    width: calc(100% / 2 - 32px);
    display: flex;
    font: normal normal 900 2.4rem/1.5 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    letter-spacing: 0;
}
#dentaltoy__size dl::before {
    content: '';
    padding: 0 8px 0 0;
    width: 30px;
    height: 30px;
    display: inline-block;
    background-image: url("/img/dentalcare/icon_footprints.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#dentaltoy__size dl dt {
    width: 90px;
    display: flex;
    justify-content: space-between;
}
#dentaltoy__size dl dt::after {
    content: '：';
}
#chewdent .inner .text-area {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#related-product {
    margin: 0 auto;
    padding: 0;
    width: 1200px;
}
#related-product dl dt {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 32px;
    align-self: stretch;
    background: var(--color01);
    color: #FFF;
    font: normal normal 700 3.2rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    letter-spacing: 0.12em;
}
#related-product dl dt::before {
    content: url("/img/cmn/icon_dog.png");
}
#related-product dl dd {
    margin: 0;
    padding: 32px;
    border-right: 1px solid #D7D7D7;
    border-bottom: 1px solid #D7D7D7;
    border-left: 1px solid #D7D7D7;
    background: #FFF;
}
#related-product dl dd ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
    align-self: stretch;
    gap: 32px;
}
#related-product dl dd ul li {
    margin: 0 auto;
    padding: 0;
    width: 500px;
}
@media screen and (max-width:767px) {
    #dentaltoy h3, #chewdent h3 {
        font: normal normal 900 1.8rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #dentaltoy .inner, #chewdent .inner {
        padding: 0px 16px;
        flex-direction: column;
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        letter-spacing: 0;
    }
    #dentaltoy .inner .text-area {
        width: 100%;
        order: 2;
    }
    #dentaltoy .inner .image-area {
        width: 100% !important;
        flex-direction: row;
        order: 1;
    }
    #dentaltoy .inner .image-area img {
        width: calc(100% / 3);
        height: auto;
        flex: 1 0 0;
    }
    #dentaltoy__size {
        padding: 16px;
        align-items: center;
        align-content: center;
        gap: 16px;
        align-self: stretch;
        flex-wrap: wrap;
        background-color: var(--color06);
        clip-path: polygon(calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%, 0 0);
        position: relative;
    }
    #dentaltoy__size::after {
        content: '';
        width: 32px;
        height: 32px;
        background-color: var(--color02);
        clip-path: polygon(0 0, 0% 100%, 100% 100%);
        position: absolute;
        top: 0;
        right: 0;
    }
    #dentaltoy__size p {
        font: normal normal 500 1.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #dentaltoy__size dl {
        width: 100%;
        font: normal normal 900 1.4rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #dentaltoy__size dl::before {
        content: '';
        padding: 0 8px 0 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        background-image: url("/img/dentalcare/icon_footprints.svg");
    }
    #dentaltoy__size dl dt {
        width: 50px;
        align-items: baseline;
    }
    #dentaltoy__size dl dt::after {
        content: '：';
    }
    #chewdent .inner .text-area {
        width: 100%;
        gap: 16px;
        order: 2;
    }
    #chewdent .inner .image-area {
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        order: 1;
    }
    #chewdent .inner .image-area img {
        width: calc(100% / 3);
        height: auto;
    }
    #introduce.lead {
        padding: 32px 24px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 48px;
        text-align: center;
    }
    .product-introduction {
        font: normal normal 900 1.8rem/1.5 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
    }
    #related-product {
        padding: 0 8px;
        width: 100%;
    }
    #related-product dl dt {
        display: flex;
        padding: 8px;
        align-items: center;
        gap: 32px;
        align-self: stretch;
        background: var(--color01);
        color: #FFF;
        font: normal normal 700 3.2rem/1 "Zen Maru Gothic", "Noto Sans JP", sans-serif;
        letter-spacing: 0.12em;
    }
    #related-product dl dt::before {
        content: url("/img/cmn/icon_dog.png");
    }
    #related-product dl dd {
        margin: 0;
        padding: 16px;
    }
    #related-product dl dd ul {
        width: 100%;
    }
    #related-product dl dd ul li {
        margin: 0 auto;
        padding: 0;
        width: 500px;
    }
    #related-product dl dt {
        display: flex;
        padding: 8px;
        align-items: center;
        gap: 32px;
        align-self: stretch;
        background: var(--color01);
        color: #FFF;
        font: normal normal 700 3.2rem/1 "Zen Maru Gothic", "Noto Serif JP", sans-serif;
        letter-spacing: 0.12em;
    }
    #related-product dl dt::before {
        content: url("/img/cmn/icon_dog.png");
    }
    #related-product dl dd {
        margin: 0;
        padding: 32px;
        border-right: 1px solid #D7D7D7;
        border-bottom: 1px solid #D7D7D7;
        border-left: 1px solid #D7D7D7;
        background: #FFF;
    }
    #related-product dl dd ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        align-content: space-between;
        align-self: stretch;
        gap: 32px;
    }
    #related-product dl dd ul li {
        margin: 0 auto;
        padding: 0;
        width: 500px;
    }
}