@charset 'UTF-8';
/*
* top.css
*
*/
/* --------------------------------
   コンポーネント
-------------------------------- */
/** h2タイトル **/
.c-sectionTitleWrap
{
    display: flex;

    align-items: center;
    justify-content: center;
}

.c-sectionTitle
{
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1.3;

    position: relative;

    display: inline-block;

    margin: 0 15px 15px; 

    text-align: center;

    color: #585eb8;
}
@media (min-width: 1024px)
{
    .c-sectionTitle
    {
        font-size: 4.0rem;

        margin: 0 30px 30px;
    }
}
.c-sectionTitle::before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50px;

    display: block;
    display: inline-block;

    width: 30px;
    height: 16px;
    margin: auto;
    margin: auto auto auto 0; 

    content: '';

    background: url(/assets/img/icon_logo.png) no-repeat;
    background-size: 30px 16px;
}
@media (min-width: 1024px)
{
    .c-sectionTitle::before
    {
        left: -50px; 

        width: 34px;
        height: 20px;

        background-size: 34px 20px;
    }
}
.c-sectionTitle::after
{
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;

    display: block;
    display: inline-block;

    width: 30px;
    height: 16px;
    margin: auto;
    margin: auto 0 auto auto; 

    content: '';

    background: url(/assets/img/icon_logo.png) no-repeat;
    background-size: 30px 16px;
}
@media (min-width: 1024px)
{
    .c-sectionTitle::after
    {
        right: -50px; 

        width: 34px;
        height: 20px;

        background-size: 34px 20px;
    }
}
.c-sectionTitle .-sub
{
    font-size: 1.6rem;
    line-height: 1; 

    display: block;
}
@media (min-width: 1024px)
{
    .c-sectionTitle .-sub
    {
        font-size: 2.5rem;
    }
}

/** h3タイトル **/
.c-thirdTitle
{
    font-size: 2.2rem;
    font-weight: bold;

    margin-bottom: 15px; 

    text-align: center;

    color: #58b872;
}
@media (min-width: 1024px)
{
    .c-thirdTitle
    {
        font-size: 3.0rem;

        margin-bottom: 15px;
    }
}
.c-thirdTitle span
{
    font-size: 1.8rem;

    display: inline-block;

    margin-left: 10px;
}
@media (min-width: 1024px)
{
    .c-thirdTitle span
    {
        font-size: 2.0rem;

        margin-left: 10px;
    }
}

/** 共通テキスト **/
.c-text,
.c-besideBoxInner .c-text,
.c-floatWrap .c-text,
.c-skillTitle,
.c-questionTitle
{
    font-size: 1.6rem;
    line-height: 2; 

    color: #505050;
}
@media (min-width: 1024px)
{
    .c-text,
    .c-besideBoxInner .c-text,
    .c-floatWrap .c-text,
    .c-skillTitle,
    .c-questionTitle
    {
        font-size: 2.0rem;
    }
}

.-center
{
    text-align: center;
}

.-right
{
    text-align: right;
}

.-bold
{
    font-weight: bold;
}

.-red
{
    color: #f25555;
}

/** 共通テキスト **/
.c-lead,
.c-skillTitle span,
.c-questionTitle span
{
    font-size: 2.1rem;
    font-weight: bold;
    line-height: 1.3; 

    color: #f25555;
}
@media (min-width: 1024px)
{
    .c-lead,
    .c-skillTitle span,
    .c-questionTitle span
    {
        font-size: 2.7rem;
    }
}
.c-lead + .c-text,
.c-skillTitle span + .c-text,
.c-questionTitle span + .c-text,
.c-besideBoxInner .c-lead + .c-text,
.c-skillTitle .c-besideBoxInner span + .c-text,
.c-questionTitle .c-besideBoxInner span + .c-text,
.c-floatWrap .c-lead + .c-text,
.c-skillTitle .c-floatWrap span + .c-text,
.c-questionTitle .c-floatWrap span + .c-text,
.c-lead + .c-skillTitle,
.c-skillTitle span + .c-skillTitle,
.c-questionTitle span + .c-skillTitle,
.c-lead + .c-questionTitle,
.c-skillTitle span + .c-questionTitle,
.c-questionTitle span + .c-questionTitle
{
    margin-top: 10px;
}

/** 注釈テキスト **/
.c-note
{
    font-size: 1.2rem;

    color: #505050;
}
@media (min-width: 1024px)
{
    .c-note
    {
        font-size: 1.4rem;
    }
}

/** ボタン **/
.c-btn
{
    font-size: 1.6rem;

    display: inline-block;

    width: 100%; 
    padding: 10px 0;

    cursor: pointer;
    text-align: center;
    text-decoration: none;

    color: #505050;
    border-radius: 50px;
    background-color: #fff;
}
@media (min-width: 1024px)
{
    .c-btn
    {
        font-size: 2.0rem;

        width: 290px; 
        padding: 16px 0;
    }
}
.c-btn.-line
{
    color: #fff;
    background-color: #07b53b;
}
.c-btn.-tel
{
    position: relative;

    padding-left: 30px;

    border: 1px solid #505050;
}
@media (min-width: 1024px)
{
    .c-btn.-tel
    {
        padding-left: 30px;
    }
}
.c-btn.-tel::before
{
    position: absolute;
    top: 0;
    right: 132px;
    bottom: 0;
    left: 0;

    display: block;
    display: inline-block;

    width: 22px;
    height: 22px;
    margin: auto;

    content: '';

    background: url(/assets/img/icon_tel.svg) no-repeat;
}
@media (min-width: 1024px)
{
    .c-btn.-tel::before
    {
        right: 170px; 

        width: 27px;
        height: 27px;
    }
}

/** ボタン（横並び） **/
.c-contactList
{
    display: flex;

    justify-content: center;
    align-items: center;
}

.c-contactListLink
{
    width: 50%;
}
.c-contactListLink + .c-contactListLink
{
    margin-left: 10px;
}
@media (min-width: 1024px)
{
    .c-contactListLink + .c-contactListLink
    {
        margin-left: 30px;
    }
}

/** 画像とテキストの横並び **/
.c-besideBox
{
    display: flex;

    justify-content: space-between;
    align-items: center;
}
.c-besideBox + .c-besideBox
{
    margin-top: 30px;
}

.c-besideBoxInner
{
    width: calc(100% - 30% - 20px);
}
@media (min-width: 768px)
{
    .c-besideBoxInner
    {
        width: calc(100% - 20% - 30px);
    }
}
@media (min-width: 1024px)
{
    .c-besideBoxInner
    {
        width: calc(100% - 160px - 30px);
    }
}
.c-besideBoxInner.-img
{
    width: 30%; 

    flex-shrink: 0;
}
@media (min-width: 768px)
{
    .c-besideBoxInner.-img
    {
        width: 20%;
    }
}
@media (min-width: 1024px)
{
    .c-besideBoxInner.-img
    {
        width: 160px;
    }
}
.c-besideBoxInner.-img span
{
    font-size: 1.0rem;

    display: block; 

    text-align: center;
}
@media (min-width: 1024px)
{
    .c-besideBoxInner.-img span
    {
        font-size: 1.4rem;
    }
}
.c-besideBoxInner .c-text,
.c-besideBoxInner .c-skillTitle,
.c-besideBoxInner .c-questionTitle
{
    font-size: 1.5rem;
    line-height: 1.5;
}
@media (min-width: 1024px)
{
    .c-besideBoxInner .c-text,
    .c-besideBoxInner .c-skillTitle,
    .c-besideBoxInner .c-questionTitle
    {
        font-size: 1.8rem;
        line-height: 2;
    }
}

/** 営業時間 **/
.p-businessHoursWrap
{
    overflow-x: scroll;
}
.p-businessHoursWrap > .p-businessHours
{
    width: 100%;

    border-collapse: collapse;

    white-space: nowrap;
}
.p-businessHoursWrap + .c-text,
.c-besideBoxInner .p-businessHoursWrap + .c-text,
.c-floatWrap .p-businessHoursWrap + .c-text,
.p-businessHoursWrap + .c-skillTitle,
.p-businessHoursWrap + .c-questionTitle
{
    margin-top: 30px;
    margin-bottom: 10px;
}

.p-businessHours
{
    background-color: #fff;
}
.p-businessHours td
{
    font-size: 1.2rem;

    padding: 5px 2px;

    text-align: center; 

    border-top: 1px solid #5cb46d;
    border-right: 1px solid #5cb46d;
}
@media (min-width: 1024px)
{
    .p-businessHours td
    {
        font-size: 1.4rem;

        padding: 5px 10px;
    }
}
.p-businessHours td.-none
{
    border-top: none;
}
.p-businessHours td:last-of-type
{
    border-right: none;
}

/** 回り込み **/
.c-floatWrap .c-text,
.c-floatWrap .c-skillTitle,
.c-floatWrap .c-questionTitle
{
    font-size: 1.6rem;
    line-height: 1.5;
}
@media (min-width: 1024px)
{
    .c-floatWrap .c-text,
    .c-floatWrap .c-skillTitle,
    .c-floatWrap .c-questionTitle
    {
        font-size: 1.6rem;
        line-height: 2;
    }
}

.c-floatBox
{
    width: 30%; 
    padding: 0 0;
}
@media (min-width: 768px)
{
    .c-floatBox
    {
        width: 20%;
    }
}
@media (min-width: 1024px)
{
    .c-floatBox
    {
        width: 160px;
    }
}
.c-floatBox.-left
{
    float: left; 

    margin: 0 20px 20px 0;
}
@media (min-width: 1024px)
{
    .c-floatBox.-left
    {
        margin-right: 20px;
        margin-bottom: 20px;
    }
}
.c-floatBox.-right
{
    float: right; 

    margin: 0 0 20px 20px;
}
@media (min-width: 1024px)
{
    .c-floatBox.-right
    {
        margin-bottom: 20px; 
        margin-left: 20px;
    }
}
.c-floatBox span
{
    font-size: 1.2rem;

    display: block;

    text-align: center;
}
@media (min-width: 1024px)
{
    .c-floatBox span
    {
        font-size: 1.3rem;
    }
}

/* --------------------------------
MV
-------------------------------- */
.p-mv
{
    background: url(/assets/img/mv.jpg) no-repeat;
    background-size: 100% auto;
}
.p-mv .c-contactList
{
    padding: 20px 15px;
}
@media (min-width: 1024px)
{
    .p-mv .c-contactList
    {
        padding: 100px 15px 50px;
    }
}

.c-mv
{
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 1.25;

    padding-top: 40px;

    text-align: center;

    color: #fff;
    text-shadow: 2px 3px 3px rgba(255, 0, 0, .4);
}
@media (min-width: 1024px)
{
    .c-mv
    {
        font-size: 7.5rem;
    }
}

.c-mvSub
{
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.25;

    padding-top: 30px; 

    text-align: center;

    color: #fff;
    text-shadow: 2px 3px 3px rgba(255, 0, 0, .4);
}
@media (min-width: 1024px)
{
    .c-mvSub
    {
        font-size: 3.0rem;

        padding-top: 60px;
    }
}
.c-mvSub span
{
    font-size: 5.2rem;

    color: #f25555;
    text-shadow: 2px 3px 3px rgba(255, 255, 255, .4);
}
@media (min-width: 1024px)
{
    .c-mvSub span
    {
        font-size: 7.2rem;
    }
}

/* --------------------------------
    繰り返しバナーエリア
-------------------------------- */
.c-adWrap
{
    padding: 30px 10px 0;
}
@media (min-width: 1024px)
{
    .c-adWrap
    {
        padding: 30px 30px 0;
    }
}

.c-ad a
{
    display: block;

    width: 100%;
}

.c-ad img
{
    width: 100%;
}

.c-ad + .c-ad
{
    margin-top: 15px;
}

.c-ad .c-btn
{
    font-size: 2.0rem;
    font-weight: bold;
}
@media (min-width: 1024px)
{
    .c-ad .c-btn
    {
        font-size: 3.4rem;
    }
}

/* --------------------------------
    チェックリスト
-------------------------------- */
@media (min-width: 768px)
{
    .p-checkList
    {
        padding-right: 40px; 
        padding-left: 40px;
    }
}

@media (min-width: 1024px)
{
    .p-checkList
    {
        padding-right: 10px; 
        padding-left: 10px;
    }
}

.c-checkList
{
    font-size: 1.7rem;
    line-height: 1.2;

    position: relative;

    padding-left: 35px; 

    color: #505050;
}
@media (min-width: 1024px)
{
    .c-checkList
    {
        font-size: 2.0rem;

        padding-left: 45px;
    }
}
.c-checkList::before
{
    position: absolute;
    top: 3px;
    bottom: 0;
    left: 8px;

    display: block;
    display: inline-block;

    width: 20px;
    height: 19px;
    margin: auto;

    content: '';

    background: url(/assets/img/icon_checkbox.png) no-repeat;
    background-size: 20px 19px;
}
@media (min-width: 1024px)
{
    .c-checkList::before
    {
        top: 3px;
        left: 8px; 

        width: 26px;
        height: 25px;

        background-size: 26px 25px;
    }
}
.c-checkList span
{
    font-size: 2.4rem; 
    font-weight: bold;

    color: #f25555;
}
@media (min-width: 1024px)
{
    .c-checkList span
    {
        font-size: 3.0rem;
    }
}
.c-checkList + .c-checkList
{
    margin-top: 20px;
}

.c-worriesImg
{
    width: 70%; 
    margin: 20px auto 50px;
}

/* --------------------------------
    患者さまのお喜びの声
-------------------------------- */
.c-customersVoice + .c-customersVoice
{
    margin-top: 30px;
}

.c-customersTitle
{
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.3;

    margin-bottom: 10px; 

    color: #f25555;
}
@media (min-width: 1024px)
{
    .c-customersTitle
    {
        font-size: 2.6rem;
    }
}

/* --------------------------------
    5つのスキル
-------------------------------- */
.c-skillListWrap
{
    position: relative;

    padding-bottom: 70px;
}
@media (min-width: 1024px)
{
    .c-skillListWrap
    {
        padding-bottom: 130px;
    }
}
.c-skillListWrap::after
{
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;

    width: 200px;
    height: 60px;
    margin: auto;
    margin: 0 auto auto; 

    content: '';

    background: url(/assets/img/icon_btmArr.png) no-repeat;
    background-size: 200px 60px;
}
@media (min-width: 1024px)
{
    .c-skillListWrap::after
    {
        width: 270px;
        height: 90px;

        background-size: 270px 90px;
    }
}

.c-skillList + .c-skillList
{
    margin-top: 30px;
}
@media (min-width: 1024px)
{
    .c-skillList + .c-skillList
    {
        margin-top: 40px;
    }
}

.c-skillTitleWrap
{
    display: flex;

    margin-bottom: 5px; 

    justify-content: flex-start;
    align-items: center;
}
@media (min-width: 1024px)
{
    .c-skillTitleWrap
    {
        margin-bottom: 5px;
    }
}

.c-skillSubTitle
{
    position: relative;

    width: 60px; 
    margin-right: 15px;

    border-radius: 50%;
    background-color: #7fbc7a;

    flex-shrink: 0;
}
@media (min-width: 1024px)
{
    .c-skillSubTitle
    {
        font-size: 1.8rem;

        width: 100px; 
        margin-right: 30px;
    }
}
.c-skillSubTitle span
{
    font-weight: bold;

    display: block;

    text-align: center; 

    color: #fff;
}
.c-skillSubTitle .-text
{
    font-size: 1.2rem;

    position: relative;
    top: 3px;
}
@media (min-width: 1024px)
{
    .c-skillSubTitle .-text
    {
        font-size: 1.8rem;

        top: 6px;
    }
}
.c-skillSubTitle .-num
{
    font-size: 3.0rem;
    line-height: 1.3;
}
@media (min-width: 1024px)
{
    .c-skillSubTitle .-num
    {
        font-size: 5.0rem;
        line-height: 1.4;
    }
}

.c-skillTitle
{
    font-size: 1.6rem;
}
@media (min-width: 1024px)
{
    .c-skillTitle
    {
        font-size: 2.0rem;
    }
}

/* --------------------------------
スキル_テーブル
-------------------------------- */
.c-slillTableWrap
{
    overflow-x: scroll;

    margin-top: 20px;
    margin-bottom: 5px;
    padding-bottom: 10px;
}
@media (min-width: 1024px)
{
    .c-slillTableWrap
    {
        margin-top: 30px;
        margin-bottom: 5px;
        padding-bottom: 10px;
    }
}

.c-slillTable
{
    overflow-x: scroll; 

    width: 100%;

    border-collapse: collapse;

    white-space: nowrap;

    background-color: #fff;
}
.c-slillTable th,
.c-slillTable td
{
    font-size: 1.0rem;

    padding: 8px 10px;

    border-top: 1px solid #5cb46d;
    border-right: 1px solid #5cb46d;
    background-clip: padding-box;
}
@media (min-width: 1024px)
{
    .c-slillTable th,
    .c-slillTable td
    {
        font-size: 1.6rem;

        padding: 10px 20px;
    }
}
.c-slillTable th
{
    font-weight: normal; 

    background-color: #fff;
}
.c-slillTable th:before
{
    position: absolute;
    top: 0;
    left: 1px;

    width: 100%;
    height: 100%;

    content: '';

    border-right: 1px solid #5cb46d;
}
.c-slillTable th.-fixed
{
    position: sticky;
    left: 0;
}
.c-slillTable td
{
    text-align: center;
}
.c-slillTable td:last-of-type
{
    border-right: none;
}
.c-slillTable .-none
{
    border-top: none;
}
.c-slillTable .-shion
{
    font-size: 1.6rem; 
    font-weight: bold;

    color: #f25555;
}
@media (min-width: 1024px)
{
    .c-slillTable .-shion
    {
        font-size: 2.6rem;
    }
}

/* --------------------------------
    料金
-------------------------------- */
.c-priceWrap
{
    margin-top: 22px;
}
@media (min-width: 1024px)
{
    .c-priceWrap
    {
        margin-top: 44px;
    }
}
.c-priceWrap .-big
{
    font-size: 1.9rem;
    font-weight: bold;
}
@media (min-width: 1024px)
{
    .c-priceWrap .-big
    {
        font-size: 3.0rem;
    }
}

.c-priceBox + .c-priceBox
{
    margin-top: 50px;
    padding-top: 50px; 

    border-top: 1px solid #707070;
}

.c-price
{
    font-size: 8.4rem;
    font-weight: bold;
    line-height: 1; 

    position: relative;

    margin-bottom: 30px;

    text-align: center;

    color: #f25555;
}
@media (min-width: 1024px)
{
    .c-price
    {
        font-size: 12rem;

        margin-bottom: 30px;
    }
}
.c-price .-unit
{
    font-size: 3.0rem;
}
@media (min-width: 1024px)
{
    .c-price .-unit
    {
        font-size: 5.0rem;
    }
}

.c-marker
{
    padding: 0 20px; 

    transition: .2s;
    transition-delay: .8s;

    background: linear-gradient(to left, transparent 50%, #ebb16d 50%);
    background-repeat: no-repeat;
    background-position: 100% 1.1em;
    background-size: 200% .8em;
}
@media (min-width: 1024px)
{
    .c-marker
    {
        padding: 0 40px;
    }
}
.c-marker.-active
{
    background-position: 0 1.1em;
}

/* --------------------------------
    よくあるご質問
-------------------------------- */
.c-questionList + .c-questionList
{
    margin-top: 20px;
}
@media (min-width: 1024px)
{
    .c-questionList + .c-questionList
    {
        margin-top: 30px;
    }
}

.c-questionTitleWrap
{
    display: flex;

    margin-bottom: 10px; 

    justify-content: flex-start;
    align-items: center;
}
@media (min-width: 1024px)
{
    .c-questionTitleWrap
    {
        margin-bottom: 10px;
    }
}

.c-questionSubTitle
{
    position: relative;

    width: 40px; 
    margin-right: 10px;

    border-radius: 50%;
    background-color: #7fbc7a;

    flex-shrink: 0;
}
@media (min-width: 1024px)
{
    .c-questionSubTitle
    {
        font-size: 1.8rem;

        width: 45px; 
        margin-right: 20px;
    }
}
.c-questionSubTitle span
{
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 1.4;

    position: relative;
    top: -4px; 

    display: block;

    text-align: center;

    color: #fff;
}
@media (min-width: 1024px)
{
    .c-questionSubTitle span
    {
        font-size: 3.2rem;

        top: -5px;
    }
}

.c-questionTitle
{
    font-size: 1.7rem;
    line-height: 1.5;
}
@media (min-width: 1024px)
{
    .c-questionTitle
    {
        font-size: 2.0rem;
    }
}

/* --------------------------------
    所在地
-------------------------------- */
iframe
{
    width: 100%;

    aspect-ratio: 16/9;
}

/* --------------------------------
    実績
-------------------------------- */
.c-achieveWrap .c-thirdTitle
{
    text-align: left;
}

.c-achieveWrap .-date
{
    font-size: 1.0rem;

    display: block;
}
@media (min-width: 1024px)
{
    .c-achieveWrap .-date
    {
        font-size: 2.0rem;
    }
}

.c-achieveWrap .c-video
{
    width: 100%;
}

.c-achieveWrap + .c-achieveWrap
{
    margin-top: 40px;
}