@charset "utf-8";

/* ==================================================================

    treatment-perio.css

=================================================================== */

/* --------------------------------
■共通
-------------------------------- */
#mainArea > section > p:last-child{
    margin-bottom: 0;
}

.contents .buttonStyle.plainArrow {
    margin-top: 8px;
}
.contents p.buttonStyle.plainArrow a {
    font-size: 1.5rem;
    letter-spacing: 0;
}
.contents p.buttonStyle.plainArrow a span {
    font-size: 1.5rem;
    text-decoration: underline;
    border-bottom: none;
}
    .contents p.buttonStyle.plainArrow a span::before {
        background: url(../../images/treatment/implant/btn.svg) no-repeat left center / contain;
    }
    .contents p.buttonStyle.plainArrow a[target="_blank"]::after {
        content: url(../../images/common/icon/icon_blank.svg);
    }

.contents .flex_box.ex_box {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    border-radius: 0 0 4px 4px;
    gap: 29px
}
.contents .flex_box.ex_box .explain {
    width: auto;
}
.contents .flex_box.ex_box .image {
    flex-shrink: 0;
    width: fit-content;
    margin-bottom: 0;
}

.contents .worries_box {
    border-radius: 8px;
}
.contents .worries_box.border {
    padding: 34px 40px;
    border: 2px solid #DFDFDF;
    margin-top: 42px;
}

/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {
    .contents .flex_box.ex_box {
        flex-wrap: wrap;
    }
    .contents .flex_box.ex_box .image img {
        width: 100%;
    }
}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    .contents .worries_box,
    .contents .worries_box.border {
        padding: 32px 4%;
    }
    .contents .flex_box.col2.sp_col1,
    .contents .flex_box.col3.sp_col1 {
        flex-direction: column;
        gap: 20px
    }
    .contents .flex_box.col2.sp_col1 > *,
    .contents .flex_box.col3.sp_col1 > * {
        width: 100%!important;
    }
    .contents section img {
        max-width: 100%;
        height: auto;
        width: 100%;
    }
}

/* --------------------------------
■cleaning
-------------------------------- */
/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #cleaning .itemList li{
        text-align: center;
    }
}

/* --------------------------------
■about
-------------------------------- */
#about .mv {
    margin-bottom: 40px;
}

/* --------------------------------
■analytics
-------------------------------- */
#analytics div figure.image img{
    width: 100%;
    height: auto;
}
#analytics div figure.image figcaption p{
    display: block;
    margin:20px 0 60px 0;
}
#analytics div figure.image figcaption p{
    display: block;
    margin:20px 0 60px 0;
}
#analytics div p.image {
    text-align: center;
    margin-bottom: 0;
}

/* --------------------------------
■cause
-------------------------------- */
#cause .text {
    margin-bottom: 24px;
}

/* --------------------------------
■reason
-------------------------------- */
#reason .cseList:not(:last-child) {
    margin-bottom: 40px;
}
#reason .cseList.flex_box {
    justify-content: space-between;
}
#reason .cseList.flex_box .detail {
    width: 480px;
}
#reason .cseList.flex_box .image {
    width: 374px;
}
/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #reason .cseList:not(:last-child) {
        margin-bottom: 50px;
    }
    #reason .cseList.flex_box {
        display: block;
    }
    #reason .cseList.flex_box .detail {
        width: auto;
        margin-bottom: 20px;
    }
    #reason .cseList.flex_box .image {
        width: auto;
    }
}

/* --------------------------------
■progress
-------------------------------- */
#progress .graphWrap {
    gap: 0;
    grid-template-columns: 120px calc(100% - 120px);
}
#progress .graphWrap .image {
    background: url(../../images/treatment/perio/progress_arrow_pc.svg) 0 100% no-repeat;
    background-size: 100%;
}
#progress .perioTRList li{
    position: relative;
}

#progress .perioTRList .perioTRItem_label{
    position: absolute;
    top:50%;
    left:-132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index:5;
}

#progress .perioTRList .perioTRItem_label span.progress01,
#progress .perioTRList .perioTRItem_label span.progress02,
#progress .perioTRList .perioTRItem_label span.progress03,
#progress .perioTRList .perioTRItem_label span.progress04{
    display: block;
    background-color: #FF94AE;
    color: #ffffff;
    width:140px;
    padding: 8px 0;
    letter-spacing: 0.1rem;;
    border-radius: 50px;
}
#progress .perioTRList .perioTRItem_label span.progress02{
    background-color: #ED5875;
}
#progress .perioTRList .perioTRItem_label span.progress03{
    background-color: #CE244C;
}
#progress .perioTRList .perioTRItem_label span.progress04{
    background-color: #AA002D;
}

#progress .perioTRList .cseList{
    grid-template-columns: 68% 26%;
    background-color: #EAEAEA;
    padding: 40px;
}

#progress .perioTRList .cseList .perioTRItem_txt{
    align-content: center;
}

#progress .perioTRList .cseList .perioTRItem_img img:not(:first-child){
    margin-top: 20px;
}

#progress .cseList:not(:last-child){
    margin-bottom: 20px;
}
#progress .cseList h4{
    font-size: 1.9rem;
    margin-bottom: 12px;
    line-height: 1.7;
}

#progress .cseList h5{
    font-size: 1.6rem;
    margin-bottom: 12px;
    line-height: 1.7;
}

#progress .cseList .example{
    padding: 16px;
}
#progress .cseList .example li{
    list-style: disc;
    margin-left: 1.8em;
}
#progress .cseList .example li:not(:last-child){
    margin-bottom: 8px;
}

#progress .cseList .example .image{
    text-align: center;
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {

}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {


    #progress .graphWrap {
        gap: 0;
        grid-template-columns: 1fr;
    }
    #progress .graphWrap .image {
        display: none;
    }
    #progress .perioTRList li{
    }
    
    #progress .perioTRList .cseList{
        grid-template-columns: 1fr;
        background-color: #EAEAEA;
        padding: 24px;
    }
    
    #progress .perioTRList .perioTRItem_label{
        position: static;
        top:0;
        left:0;
        display: block;
        text-align: center;
        z-index:5;
        transform: translateY(0);
        font-weight: 700;
    }
    
    #progress .perioTRList .perioTRItem_label > span + span{
        margin-top: 8px;
    }
    
    #progress .perioTRList .perioTRItem_label span.progress01,
    #progress .perioTRList .perioTRItem_label span.progress02,
    #progress .perioTRList .perioTRItem_label span.progress03,
    #progress .perioTRList .perioTRItem_label span.progress04{
        display: block;
        background-color: #FF94AE;
        color: #ffffff;
        width:140px;
        padding: 8px 0;
        letter-spacing: 0.1rem;;
        border-radius: 50px;
        margin-inline:auto;
        margin-bottom: 15px;
    }
    
    #progress .perioTRList .cseList .perioTRItem_txt{
        align-content: center;
    }
    
    #progress .perioTRList .cseList .perioTRItem_img img:not(:first-child){
        margin-top: 20px;
    }
    
    #progress .cseList:not(:last-child){
        margin-bottom: 20px;
    }
    #progress .cseList h4{
        font-size: 1.9rem;
        margin-bottom: 12px;
        line-height: 1.7;
    }
    
    #progress .cseList h5{
        font-size: 1.6rem;
        margin-bottom: 12px;
        line-height: 1.7;
    }
    
    #progress .cseList .example{
        padding: 16px;
    }
    #progress .cseList .example li{
        list-style: disc;
        margin-left: 1.8em;
    }
    #progress .cseList .example li:not(:last-child){
        margin-bottom: 8px;
    }
    
    #progress .cseList .example .image{
        text-align: center;
    }
}

/* --------------------------------
■cvArea
-------------------------------- */
#mainArea .cvArea .buttonStyle {
    max-width: 440px;
    margin: 60px auto 0;
}


/* --------------------------------
■success
-------------------------------- */
#success .wrap{
    grid-template-columns: 1.2fr 0.8fr;
}

/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {

}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #success .wrap{
        grid-template-columns: 1fr;
        gap: 20px;
    }

   #success .imgArea img{
        width: 100%;
    }
    
}


/* --------------------------------
■flow
-------------------------------- */
#flow .premium{
    display: inline-block;
    color: #fff;
    padding: 4px 16px;
    background-color: #815482;
    font-size: 1.3rem;
    border-radius: 20px;
    margin-bottom: 8px;
}

#flow dl.flowList dt{
    font-size: 1.8rem;
    margin:10px 0 20px 0;
}

#flow .itemList .flowItemList h4{
    font-size: 2.2rem;
    margin-bottom: 15px;
}

#flow .flow_no{
    display: inline-block;
    width: 42px;
    height: 42px;
    background-color: #444444;
    color: #fff;
    font-size: 1.8rem;
    align-content: center;
    text-align: center;
    margin-right: 10px;
}

#flow .flowItemBox{
    display: block;
    padding: 40px;
    background-color: #f4f4f4;

}

#flow .flowItemBox > p:last-child{
    margin-bottom: 0;
}

#flow .flowItemBox dt{
    font-size: 2.0rem;
    padding-left: 1em;
    position: relative;
}

#flow .flowItemBox dt::after{
    content:'';
    position: absolute;
    top: 0.4em;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #36353D;
}

#flow .flowItemBox dd:not(:last-child){
    margin-bottom: 30px;
}

#flow .flowsubList{
    display: inline-block;
    background-color: #8C8C8C;
    padding: 10px 20px;
    color: #ffffff;
    margin-top:10px;
}



/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {

}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #flow .image{
        width: 100%;
    }
    
    #flow .flowItemBox{
        padding: 20px;
    }
    

    #flow .flowItemBox dt{
        font-size: 1.7rem;
        position: relative;
        margin-bottom: 6px;
    }
}

/* --------------------------------
■blue-radical
-------------------------------- */
#blue-radical .wrap{
    border-radius: 4px;
    border: 4px solid #F8F8F8;
}


#blue-radical .title.lv6 {
    color: #fff;
    background: #293B80;
    border-radius: 4px 4px 0 0;
    padding: 21px;
    margin-bottom: 0;
}

#blue-radical dl.list {
    font-weight: 500;
    text-align: left;
}
#blue-radical dl.list dt {
    font-size: 1.8rem;
    position: relative;
    padding-left: 15px;
}
    #blue-radical dl.list dt::before {
        content: "";
        position: absolute;
        top: .6em;
        left: 0;
        width: 6px;
        height: 6px;
        display: inline-block;
        background: #D2D2D2;
        border-radius: 50%;
    }
#blue-radical dl.list dd {
    font-size: 1.4rem;
    padding-left: 15px;
    margin-top: 8px;
    margin-bottom: 19px;
}
    #blue-radical dl.list dd:last-of-type {
        margin-bottom: 0;
    }

#blue-radical .flex_box.ex_box .explain {
    width: auto;
    flex-flow: 1;
}
/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {

}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

}

/* --------------------------------
■relation
-------------------------------- */
#relation .relaBox{
    display: block;
    width: 100%;
    height: auto;
    margin: 20px 0;
    padding: 30px;
    background-color: #f4f4f4;
}

#relation .relaBox .relaBoxTitle{
    text-align: center;
}

#relation .relaBox .relaBoxTitle span{
    display: inline-block;
    width: 300px;
    height: auto;
    margin: 8px auto;
    padding: 4px;
    color: #ffffff;
    padding: 10px 0;
    background-color: #EF5B6E;
    border-radius: 50px;
    text-align: center;
}

#relation .grid_box.col3 {
    grid-template-columns: 1.0fr 0.8fr 1.2fr;
    gap: 10px;
}

#relation .grid_box.col3 > li{
    position: relative;
    text-indent: 1.8rem;
}

#relation .grid_box.col3 > li::before{
    position: absolute;
    content:'';
    top:50%;
    left: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #36353D;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #relation .grid_box.sp_col1 {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------
■protection
-------------------------------- */
#protection .mv{
    margin-bottom: 40px;
}