/* Scss Document */

$color:#a08f1a; //サイトで良く使う色
$text:#000; //基本的なテキストの色

//hoverアニメーションを使いたい場合に使用
//呼び出し方法(cssに指定)　→　@include ani;
@mixin ani {
	transition: 0.3s ease-in-out;
}

//display:flex;を使用した場合等に使用（widthが30%から70%まで）画面幅が740pxで100%に変わる
//呼び出し方法(htmlに指定)　→　.flex_30　～　.flex_70
@for $i from 30 through 70 {
  .flex_#{$i} { width: 1% * $i; }
}

//padding-topとpadding-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.padding100　～　.padding300
$p: 100;
@while $p < 310{
    .padding#{$p}{
        padding-top: $p + px;
        padding-bottom: $p + px;
    }
    $p: $p + 10;
}

//margin-topとmargin-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.margin100　～　.margin300
$m: 100;
@while $m < 310{
    .margin#{$m}{
        margin-top: $m + px;
        margin-bottom: $m + px;
    }
    $m: $m + 10;
}

//padding-top（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.pt-120　～　.pt-300
$pt: 110;
@while $pt < 310{
    .pt-#{$pt}{
        padding-top: $pt + px;
    }
    $pt: $pt + 10;
}

//padding-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.pb-120　～　.pb-300
$pb: 110;
@while $pb < 310{
    .pb-#{$pb}{
        padding-bottom: $pb + px;
    }
    $pb: $pb + 10;
}

//margin-top（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.mt-120　～　.mt-300
$mt: 110;
@while $mt < 310{
    .mt-#{$mt}{
        margin-top: $mt + px;
    }
    $mt: $mt + 10;
}

//margin-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.mb-120　～　.mb-300
$mb: 110;
@while $mb < 310{
    .mb-#{$mb}{
        margin-bottom: $mb + px;
    }
    $mb: $mb + 10;
}

* {
    text-decoration: none !important;
}

body {
    min-width: 1200px;
    font-family: 游ゴシック !important;
}

h3 {
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 0.15em;
}
.center {
    text-align: center;
}
.c-8bc85a {
    color: #8bc85a;
}
.c-f18b23 {
    color: #f18b23;
}
.flex_25 {
    width: 25%; 
}
.flex_29 {
    width: 29.5% !important; 
}
.flex_75 {
    width: 75%; 
}
.bg_fdf5e2 {
    background: #fdf5e2;
}
.copy {
    font-size: 13px !important;
}
.sp_btn {
    display: none !important;
}
.sp-f_tel {
    display: none;
}
 
.wid100 {
    width: 100%;
    height: auto;
  }

.header {
    position: relative;
    
    nav {
        padding-right: 35px;
        ul {
            display: flex;
            justify-content: space-between;
            padding-bottom: 13px;
            li {
                font-size: 0.8vw;
                padding: 0 22px;
                position: relative;
                letter-spacing: 0.08em;
            }
            li::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                background: url(../images/nav_border.png);
                width: 3px;
                height: 13px;
            }
            li:nth-child(9):after {
                content: "";
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                background: url(../images/nav_border.png);
                width: 3px;
                height: 13px;
            }
        }
    }
    .logo {
        flex: 1.6;
        padding-right: 30px;
        img {
            width: 100%;
            height: auto;
            max-width: 240px;
        }
    }
    .header_topBox {
        width: 96%;
        max-width: 1815px;
        margin-left: auto;
        padding: 30px 0 0;
        
    }
    .container1760 {
        display: flex;
        justify-content: space-between;
        align-items: end;
        width:97%;
	    margin:unset;
    }
    .telBox {
        flex: 0.95;
        text-align: center;
        padding-bottom: 16px;
        img {
            max-width: 250px;
        }
        p {
            font-size: 14px;
            padding: 0 0 3px 15px;
        }
    }
    .flexslider {
        margin-top: 20px;
        .slides {
            position: relative;
            li {
                img {
                    width: 100%;
                    height: auto;
                }
            }
            .fastview_text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 52.98vw;
                height: auto;
            }
        }
    }
}
.title_eng {
    font-family: Century Gothic;
    color: #8bc85a;
    letter-spacing: 0.12em;
}
.sec01 {
    .flex_67 {
        ul {
            li {
                line-height: 5.5em;
                position: relative;
                padding-left: 8px;
                overflow: hidden;
            }
            li::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                background: url(../images/border.png);
                width: 824px;
                height: 1px;
            }
        }
    }
    .bird {
        position: absolute;
        top: 80px;
        right: 8vw;
        width: 100%;
        max-width: 78px;
    }
}
.sec02 {
    .container1760 {
        padding: 120px 240px 160px;
    }
    .flex_box {
        .flex_29 {
            position: relative;
            img {
                width: 100%;
                height: auto;
            }
            .text-top {
                background: #f16b0e;
                color: #fff;
                position: absolute;
                bottom: -1.05vw;
                left: 0;
                font-size: 1.17vw;
                padding: 5px 15px;
                border-radius: 1px;
            }
            .text-bottom {
                background: #f16b0e;
                color: #fff;
                position: absolute;
                bottom: -3.2vw;
                left: 0;
                font-size: 1.17vw;
                padding: 5px 15px;
                border-radius: 1px;
            }
            .number1 {
                position: absolute;
                left: -40px;
                top: -33px;
                font-size: 1.7vw;
                color: #f16b0e;
                background: #fdf5e2;
                border-radius: 50%;
                width: 5.2vw;
                height: 5.2vw;
            }
            .number1::after {
                content: "01";
                position: absolute;
                left: 45%;
                top: 32%;
                font-size: 1.7vw;
                color: #f16b0e;
                text-align: center;
                font-family: Century Gothic;
            }
            .number2 {
                position: absolute;
                left: -40px;
                top: -33px;
                font-size: 1.7vw;
                color: #f16b0e;
                background: #fdf5e2;
                border-radius: 50%;
                width: 5.2vw;
                height: 5.2vw;
            }
            .number2::after {
                content: "02";
                position: absolute;
                left: 45%;
                top: 32%;
                font-size: 1.7vw;
                color: #f16b0e;
                text-align: center;
                font-family: Century Gothic;
            }
            .number3 {
                position: absolute;
                left: -40px;
                top: -33px;
                font-size: 1.7vw;
                color: #f16b0e;
                background: #fdf5e2;
                border-radius: 50%;
                width: 5.2vw;
                height: 5.2vw;
            }
            .number3::after {
                content: "03";
                position: absolute;
                left: 45%;
                top: 32%;
                font-size: 1.7vw;
                color: #f16b0e;
                text-align: center;
                font-family: Century Gothic;
            }
            .number4 {
                position: absolute;
                left: -40px;
                top: -33px;
                font-size: 1.7vw;
                color: #f16b0e;
                background: #fdf5e2;
                border-radius: 50%;
                width: 5.2vw;
                height: 5.2vw;
            }
            .number4::after {
                content: "04";
                position: absolute;
                left: 45%;
                top: 32%;
                font-size: 1.7vw;
                color: #f16b0e;
                text-align: center;
                font-family: Century Gothic;
            }
            .number5 {
                position: absolute;
                left: -40px;
                top: -33px;
                font-size: 1.7vw;
                color: #f16b0e;
                background: #fdf5e2;
                border-radius: 50%;
                width: 5.2vw;
                height: 5.2vw;
            }
            .number5::after {
                content: "05";
                position: absolute;
                left: 45%;
                top: 32%;
                font-size: 1.7vw;
                color: #f16b0e;
                text-align: center;
                font-family: Century Gothic;
            }
        }
        .numberBox04 {
            display: none;
        }
        .numberBox05 {
            display: none;
        }
        .flex_49 {
            position: relative;
            img {
                width: 19vw;
                height: auto;
            }
            .text-top {
                background: #f16b0e;
                color: #fff;
                position: absolute;
                bottom: -1.05vw;
                left: 0;
                font-size: 1.17vw;
                padding: 5px 15px;
                border-radius: 1px;
            }
            .text-bottom {
                background: #f16b0e;
                color: #fff;
                position: absolute;
                bottom: -3.2vw;
                left: 0;
                font-size: 1.17vw;
                padding: 5px 15px;
                border-radius: 1px;
            }
            .number4 {
                position: absolute;
                top: -33px;
                left: -2vw;
                font-size: 1.7vw;
                color: #f16b0e;
                background: #fdf5e2;
                border-radius: 50%;
                width: 5.2vw;
                height: 5.2vw;
            }
            .number4::after {
                content: "04";
                position: absolute;
                left: 45%;
                top: 32%;
                font-size: 1.7vw;
                color: #f16b0e;
                text-align: center;
                font-family: Century Gothic;
            }
            .number5 {
                position: absolute;
                left: -40px;
                top: -33px;
                font-size: 1.7vw;
                color: #f16b0e;
                background: #fdf5e2;
                border-radius: 50%;
                width: 5.2vw;
                height: 5.2vw;
            }
            .number5::after {
                content: "05";
                position: absolute;
                left: 45%;
                top: 32%;
                font-size: 1.7vw;
                color: #f16b0e;
                text-align: center;
                font-family: Century Gothic;
            }
        }
        .number4_box {
            .text-top {
                left: 0;
            }
            .text-bottom {
                left: 0;
            }
        }
    }
    .imgBox_bottom {
        width: 44.5vw;
        margin: 150px auto 0;
    }
    .cat01 {
        position: absolute;
        bottom: -17px;
        right: 240px;
    }
}
.sec03 {
    .flex_start {
        .flex_50 {
            margin-top: 5vw;
            margin-left: 7.45vw;
            img {
                max-width: 526px;
            }
            h3 {
                position: relative;
                left: -7px;
            }
        }
    }
    .flex_end {
        .title {
            margin-top: 5vw;
            margin-right: 7.45vw;
            img {
                max-width: 307px;
            }
        }
    }
}

.sec04 {
    .flower {
        position: absolute;
        left: 85px;
        top: -82px;
    }
}
.calendar {
    border-bottom: #e5e5e5 solid 1px;
    padding: 15px 30px 15px;
    li {
        color: #8bc85a;
    }
    li:nth-child(1) {
        flex: 0.3;
        color: #4b2d1f
    }
}
.sec05 {
    .top {
        li {
            color: #4b2d1f;
        }
    }
}
.footer {
    p {
        font-size: 15px;
    }
    .f_round {
        position: absolute;
        top: 31px;
        right: 5vw;
    }
    .f_nav {
        li {
            width: 50%;
        }
        .c-f18b23 {
            font-size: 9px;
        }
    }
    border-bottom: #f18b23 solid 10px;
}


/************************/

/* ごあいさつ
------------------------------------------------------------*/
.greeting_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 251px;
    height: auto;
}
.greeting_bird {
    position: absolute;
    left: -75px;
    top: 100px;
}
.greeting_flower {
    position: absolute;
    right: 40px;
    bottom: 0;
}
.greeting {
    .sec01 {
        .font20 {
            font-size: 20px !important;
        }
        .font30 {
            font-size: 30px;
        }
        .left {
            margin-top: 3.75vw;
            p {
                line-height: 2em;
                font-size: 0.84vw;
            }
        }
    }
    .sec02 {
       
        .flex_box {
            overflow: hidden;
            img {
                padding-right: 12px;
                position: relative;
                bottom: 2px;
            }
            li {
                padding: 50px 0 0;
                position: relative;
                font-size: 20px;
                flex: 1;
            }
            li:nth-child(2) {
                font-size: 17px;
                flex: 2.7;
            }
            li:nth-child(1)::before {
                content: url(../images/greeting-border.png);
                width: 1262px;
                height: auto;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .last {
            li {
                padding-bottom: 35px;
            }
            li:nth-child(1)::before {
                content: url(../images/greeting-border.png);
                width: 1262px;
                height: auto;
                position: absolute;
                bottom: 0 !important;
                top: unset !important;
                left: 0;
            }
            li:nth-child(1)::after {
                content: url(../images/greeting-border.png);
                width: 1262px;
                height: auto;
                position: absolute;
                top: 0 !important;
                left: 0;
            }
        }
    }
}


/* 診療案内
------------------------------------------------------------*/

.border-green {
    border: #8bc85a solid 8px;
    border-radius: 20px;
    padding: 80px 250px;
}
.medical_cat {
    position: absolute;
    left: 25px;
    top: -93px;
}
.medical {
    .sec01 {
        .btn {
            margin: 0 auto;
        }
        p {
            font-size: 27px;
            font-weight: bold;
            color: #f16b0e;
            padding: 15px 0 10px;
        }
    }
    .calendar {
        li {
            font-size: 20px;
        }
      }
    .calendar:nth-child(1) li {
        color: #4b2d1f;
    } 
}

/* 医院案内
------------------------------------------------------------*/
.guide_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 200px;
    height: auto;
}
.guide_bird {
    position: absolute;
    right: 8vw;
    top: 9vw;
}
.guide_mountain {
    position: absolute;
    top: -3vw;
    right: 8vw;
}
.guide_mountain2 {
    position: absolute;
    bottom: -2vw;
    left: 12vw;
}
.guide {
    .sec01 {
        p {
            font-size: 24px;
            font-weight: bold;
            color: #f16b0e;
            padding-top: 20px;
        }
        .flex_box {
            .flex_29:nth-child(4) {
                display: none;
            }
            .flex_29:nth-child(5) {
                display: none;
            }
        }
    }
    .sec02 {
        .top {
            li {
                color: #4b2d1f;
            }
        } 
    }
    .map {
        iframe {
            width: 100%;
            max-width: 1280px;
        }
    }
}
.dentistry_bird {
    position: absolute;
    right: -2vw;
    bottom: 12vw;
}
.waku_orange {
    background: url(../images/dentistry_waku01.png);
    background-size: cover;
    background-repeat: round;
    padding: 65px 150px 50px;

    li {
        font-size: 20px;
        padding: 20px 0;
        overflow: hidden;
       
    }
    li::after {
        content: "";
        width: 470px;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: url(../images/dentistry_border.png);
    }
    li:nth-child(4):after {
        content: "";
        width: 470px;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: unset;
    }
}
.bg_f8f1e3 {
    background: #f8f1e3;
    padding: 80px 160px;
    border-radius: 2px;
}
.bg_f1f9dd {
    background: #f1f9dd;
    padding: 80px 160px;
    border-radius: 2px;
}
.bg_fff {
    background: #fff;
    border-radius: 20px;
}
.c-f16b0e {
    color: #f16b0e;
}
.c-8bc85a {
    color: #8bc85a;
}
.dentistry_flower {
    position: absolute;
    top: -82px;
    left: 5px;
}
.dentistry_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 640px;
    height: auto;
}
.dentistry {
    .sec01 {
        .iconBox {
            img {
                width: 100%;
                max-width: 74px;
                margin-right: 30px;
            }
            h3 {
                line-height: 0.8em; 
            }
            .title_eng {
                font-size: 15px;
            }
        }
    }
    .sec02 {
        .flex_box .flex_49 img {
            width: 100%;
            height: auto;
        }
        .bg_fff {
            padding: 80px 6.8vw 50px;
        }
        .bg_f8f1e3 {
            li {
                font-size: 1.06vw;
                display: flex;
                align-items: center;
                letter-spacing: 0.04em;
                padding-bottom: 30px;
            }
            .c-f16b0e {
                font-size: 1.87vw;
            }
            .round {
                position: relative;
                border: #f16b0e 1px solid;
                border-radius: 50%;
                width: 2.23vw;
                height: 2.23vw;
                display: inline-block;
            }
            .number1::after {
                content: "01";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-40%,-50%);
                font-size: 0.85vw;
                color: #f16b0e;
                font-family: Century Gothic;
            }
            .number2::after {
                content: "02";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #f16b0e;
                font-family: Century Gothic;
            }
            .number3::after {
                content: "03";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #f16b0e;
                font-family: Century Gothic;
            }
            .number4::after {
                content: "04";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #f16b0e;
                font-family: Century Gothic;
            }
            .number5::after {
                content: "05";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #f16b0e;
                font-family: Century Gothic;
            }
            .number6::after {
                content: "06";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #f16b0e;
                font-family: Century Gothic;
            }
        }

        .bg_f1f9dd {
            li {
                font-size: 1.08vw;
                display: flex;
                align-items: center;
                letter-spacing: 0.04em;
                padding-bottom: 30px;
            }
            .c-8bc85a {
                font-size: 1.87vw;
            }
            .round {
                position: relative;
                border: #8bc85a 1px solid;
                border-radius: 50%;
                width: 2.23vw;
                height: 2.23vw;
                display: inline-block;
            }
            .number1::after {
                content: "01";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-40%,-50%);
                font-size: 0.85vw;
                color: #8bc85a;
                font-family: Century Gothic;
            }
            .number2::after {
                content: "02";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #8bc85a;
                font-family: Century Gothic;
            }
            .number3::after {
                content: "03";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #8bc85a;
                font-family: Century Gothic;
            }
            .number4::after {
                content: "04";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #8bc85a;
                font-family: Century Gothic;
            }
            .number5::after {
                content: "05";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #8bc85a;
                font-family: Century Gothic;
            }
            .number6::after {
                content: "06";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-45%,-50%);
                font-size: 0.85vw;
                color: #8bc85a;
                font-family: Century Gothic;
            }
        }
    }
}

.inplant-font20 {
    font-size: 20px;
    font-weight: bold;
    color: #f16b0e;
    .kome {
        position: relative;
        right: 0;
        top: -10px;
        font-size: 14px;
        color: #000;
    }
}
/*.inplant-font20::after {
    content: "※";
    position: absolute;
    right: -15px;
    top: -9px;
    font-size: 14px;
    color: #000;
}*/
.implant_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 811px;
    height: auto;
}
.news_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 202px;
    height: auto;
}
.news {
    .sec01 {
        .newsBox {
            overflow: hidden;
            ul {
                li {
                    position: relative;
                    text-decoration: none;
                    padding: 22px 10px 40px;
                }
                li::after {
                    content: url(../images/news_border.png);
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 1129px;
                    height: 1px;
                    display: inline-table;
                }
                a {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                p {
                    flex: 0.97;
                }
            }
        }
    }
}
/************************/

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

}
@media only screen and (max-width: 1600px) {
    .header nav {
        display: none;
    }
    .dentistry .sec02 .bg_f1f9dd {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 1520px) {
    .sec02 {
        .container1760 {
            padding: 120px 240px;
        }
        .flex_box {
            .flex_29 {
                width: 46% !important;
                margin-bottom: 115px;
                img {
                    width: 100%;
                    height: auto;
                }
                .text-top {
                    background: #f16b0e;
                    color: #fff;
                    position: absolute;
                    bottom: -1.05vw;
                    left: 0;
                    font-size: 1.5vw;
                    padding: 5px 15px;
                    border-radius: 1px;
                }
                .text-bottom {
                    background: #f16b0e;
                    color: #fff;
                    position: absolute;
                    bottom: -3.89vw;
                    left: 0;
                    font-size: 1.5vw;
                    padding: 5px 15px;
                    border-radius: 1px;
                }
                .number1 {
                    position: absolute;
                    left: -40px;
                    top: -33px;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    background: #fdf5e2;
                    border-radius: 50%;
                    width: 5.2vw;
                    height: 5.2vw;
                }
                .number1::after {
                    content: "01";
                    position: absolute;
                    left: 45%;
                    top: 32%;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    text-align: center;
                    font-family: Century Gothic;
                }
                .number2 {
                    position: absolute;
                    left: -40px;
                    top: -33px;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    background: #fdf5e2;
                    border-radius: 50%;
                    width: 5.2vw;
                    height: 5.2vw;
                }
                .number2::after {
                    content: "02";
                    position: absolute;
                    left: 45%;
                    top: 32%;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    text-align: center;
                    font-family: Century Gothic;
                }
                .number3 {
                    position: absolute;
                    left: -40px;
                    top: -33px;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    background: #fdf5e2;
                    border-radius: 50%;
                    width: 5.2vw;
                    height: 5.2vw;
                }
                .number3::after {
                    content: "03";
                    position: absolute;
                    left: 45%;
                    top: 32%;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    text-align: center;
                    font-family: Century Gothic;
                }
                .number4 {
                    position: absolute;
                    left: -40px;
                    top: -33px;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    background: #fdf5e2;
                    border-radius: 50%;
                    width: 5.2vw;
                    height: 5.2vw;
                }
                .number4::after {
                    content: "04";
                    position: absolute;
                    left: 45%;
                    top: 32%;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    text-align: center;
                    font-family: Century Gothic;
                }
                .number5 {
                    position: absolute;
                    left: -40px;
                    top: -33px;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    background: #fdf5e2;
                    border-radius: 50%;
                    width: 5.2vw;
                    height: 5.2vw;
                }
                .number5::after {
                    content: "05";
                    position: absolute;
                    left: 45%;
                    top: 32%;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    text-align: center;
                    font-family: Century Gothic;
                }
            }
            .numberBox04 {
                display: block;
                margin-top: 0;
            }
            .numberBox05 {
                display: block;
                margin-top: 0;
            }
            .flex_49 {
                width: 50%;
                img {
                    width: 17vw;
                    height: auto;
                }
                .text-top {
                    background: #f16b0e;
                    color: #fff;
                    position: absolute;
                    bottom: -1.05vw;
                    left: 0;
                    font-size: 1vw;
                    padding: 5px 15px;
                    border-radius: 1px;
                }
                .text-bottom {
                    background: #f16b0e;
                    color: #fff;
                    position: absolute;
                    bottom: -3.13vw;
                    left: 0;
                    font-size: 1vw;
                    padding: 5px 15px;
                    border-radius: 1px;
                }
                .number4 {
                    position: absolute;
                    top: -33px;
                    left: -2vw;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    background: #fdf5e2;
                    border-radius: 50%;
                    width: 5.2vw;
                    height: 5.2vw;
                }
                .number4::after {
                    content: "04";
                    position: absolute;
                    left: 45%;
                    top: 32%;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    text-align: center;
                    font-family: Century Gothic;
                }
                .number5 {
                    position: absolute;
                    left: -40px;
                    top: -33px;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    background: #fdf5e2;
                    border-radius: 50%;
                    width: 5.2vw;
                    height: 5.2vw;
                }
                .number5::after {
                    content: "05";
                    position: absolute;
                    left: 45%;
                    top: 32%;
                    font-size: 1.7vw;
                    color: #f16b0e;
                    text-align: center;
                    font-family: Century Gothic;
                }
            }
            .number4_box {
                .text-top {
                    left: 0;
                }
                .text-bottom {
                    left: 0;
                }
            }
        }
        .imgBox_bottom {
            display: none;
        }
    }
    .greeting_bird {
        position: absolute;
        left: 55px;
        top: 71px;
    }

    .dentistry {
        .sec02 {
            .flex_box .flex_49 {
                width: 49%;
            }
        }
    }
    
}


@media only screen and (max-width: 1400px) {
    .greeting .sec01 .left p {
        font-size: 1.13vw;
    }
    .greeting .sec01 .font30 {
        font-size: 24px;
    }
    .greeting .sec01 .font20 {
        font-size: 16px !important;
    }
    .guide {
        .sec01 {
            p {
                font-size: 24px;
                font-weight: bold;
                color: #f16b0e;
                padding-top: 20px;
            }
            .flex_box {
                .flex_29 {
                    img {
                        width: 100%;
                        height: auto;
                    }
                    width: 48% !important;
                }
                .flex_29:nth-child(3) {
                   margin-top: 70px;
                }
                .flex_29:nth-child(4) {
                    display: block;
                    margin-top: 70px;
                }
                .flex_29:nth-child(5) {
                    display: block;
                    margin-top: 70px;
                }
            }
            .flex_start {
                display: none;
            }
        }
    }
}

@media only screen and (max-width: 1300px) {
    h3 {
        font-size: 33px;
    }
    .footer {
        .f_round {
            position: absolute;
            top: 31px;
            right: 2vw;
        }
        .flex_33 {
            width: 46%;
        }
    }
    .bg_f8f1e3 {
        padding: 40px 80px;
    }
    .dentistry .sec02 .bg_fff {
        padding: 60px 4vw 50px;
    }
    .dentistry .sec02 .bg_f8f1e3 .c-f16b0e {
        font-size: 33px;
    }
    .dentistry .sec02 .bg_f8f1e3 li {
        font-size: 16px;
    }
    .bg_f1f9dd {
        padding: 40px 80px;
    }
    .dentistry .sec02 .bg_fff {
        padding: 60px 4vw 50px;
    }
    .dentistry .sec02 .bg_f1f9dd .c-8bc85a {
        font-size: 33px;
    }
    .dentistry .sec02 .bg_f1f9dd li {
        font-size: 16px;
    }
    .dentistry .sec02 .bg_f8f1e3 {
        .round {
            width: 3.23vw;
            height: 3.23vw;
        }
        .number1::after {
            font-size: 1.2vw;
        }
        .number2::after {
            font-size: 1.2vw;
        }
        .number3::after {
            font-size: 1.2vw;
        }
        .number4::after {
            font-size: 1.2vw;
        }
        .number5::after {
            font-size: 1.2vw;
        }
    }
    .dentistry .sec02 .bg_f1f9dd {
        .round {
            width: 3.23vw;
            height: 3.23vw;
        }
        .number1::after {
            font-size: 1.2vw;
        }
        .number2::after {
            font-size: 1.2vw;
        }
        .number3::after {
            font-size: 1.2vw;
        }
        .number4::after {
            font-size: 1.2vw;
        }
        .number5::after {
            font-size: 1.2vw;
        }
    }
}
@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 1024px) {
$p: 100;
@while $p < 310{
    .padding#{$p}{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    $p: $p + 10;
}
$m: 100;
@while $m < 310{
    .margin#{$m}{
        margin-top: 80px;
        margin-bottom: 80px;
    }
    $m: $m + 10;
}
$pt: 120;
@while $pt < 310{
    .pt-#{$pt}{
        padding-top: 80px;
    }
    $pt: $pt + 10;
}
$pb: 120;
@while $pb < 310{
    .pb-#{$pb}{
        padding-bottom: 80px;
    }
    $pb: $pb + 10;
}
$mt: 120;
@while $mt < 310{
    .mt-#{$mt}{
        margin-top: 80px;
    }
    $mt: $mt + 10;
}
$mb: 120;
@while $mb < 310{
    .mb-#{$mb}{
        margin-bottom: 80px;
    }
    $mb: $mb + 10;
}

body {
    min-width: 1024px;
}
.header .telBox {
    flex: 1.4;
}
h3 {
    font-size: 29px;
}
.sec01 .bird {
    top: 13px;
    right: 5vw;
}
.sec02 .container1760 {
    padding: 100px 140px;
}
.sec03 .flex_start .flex_50 {
    padding-right: 50px;
}
.sec03 .flex_end .title {
    margin-top: 5vw;
    margin-right: 7.45vw;
    padding-left: 50px;
}
.footer {
    .f_round {
        top: 20px;
        right: 3vw;
    }
    .flex_38 {
        width: 45%;
    }
}
.greeting .sec01 .left p {
    font-size: 1.23vw;
}

.medical .sec01 p {
    font-size: 24px;
}

.waku_orange {
    padding: 85px 80px;
}
.dentistry_title {
    max-width: 460px;
}
/******************/


}

@media only screen and (max-width: 740px) {
@for $i from 30 through 70 {
  .flex_#{$i} { width: 100%; }
}

$p: 100;
@while $p < 310{
    .padding#{$p}{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    $p: $p + 10;
}
$m: 100;
@while $m < 310{
    .margin#{$m}{
        margin-top: 60px;
        margin-bottom: 60px;
    }
    $m: $m + 10;
}
$pt: 110;
@while $pt < 310{
    .pt-#{$pt}{
        padding-top: 60px;
    }
    $pt: $pt + 10;
}
$pb: 110;
@while $pb < 300{
    .pb-#{$pb}{
        padding-bottom: 60px;
    }
    $pb: $pb + 10;
}
$mt: 110;
@while $mt < 310{
    .mt-#{$mt}{
        margin-top: 60px;
    }
    $mt: $mt + 10;
}
$mb: 110;
@while $mb < 310{
    .mb-#{$mb}{
        margin-bottom: 60px;
    }
    $mb: $mb + 10;
}

body {
    min-width: auto;
}
.header {
    .header_topBox {
        width: 100%;
    }
    .logo img {
        max-width: 170px;
    }
    .telBox {
        display: none;
    }
    .flexslider{
        overflow: hidden;
        .slides {
            li img {
                position: relative;
                left: -52%;
                width: 270%;
                height: auto;
            }
            .fastview_text {
                width: 94.98vw;
            }
        }
        
    }
}
.pc_btn {
    display: none !important;
}
.sp_btn {
    display: block !important;
}
.btn {
    max-width: 200px;
    padding: 10px 0;
    margin: 40px auto 0;
}
.flex_25 {
    width: 100%;
}
h3 {
    font-size: 22px;
}
.flex_29 {
    width: 100% !important;
}
.sec01 {
    .bird {
        top: 25px;
        right: 7vw;
        max-width: 55px;
    }
}
.sec02 {
    .container1760 {
        padding: 60px 30px;
    }
    .flex_box .flex_29 {
        width: 100% !important;
        margin-bottom: 115px;
        .text-top {
            bottom: -4.05vw;
            left: 0;
            font-size: 4.5vw;
        }
        .text-bottom {
            bottom: -11.1vw;
            left: 0;
            font-size: 4.5vw;
        }
        .number1 {
            left: -18px;
            top: -14px;
            font-size: 1.7vw;
            width: 18.2vw;
            height: 18.2vw;
        }
        .number2 {
            left: -18px;
            top: -14px;
            font-size: 1.7vw;
            width: 18.2vw;
            height: 18.2vw;
        }
        .number3 {
            left: -18px;
            top: -14px;
            font-size: 1.7vw;
            width: 18.2vw;
            height: 18.2vw;
        }
        .number4 {
            left: -18px;
            top: -14px;
            font-size: 1.7vw;
            width: 18.2vw;
            height: 18.2vw;
        }
        .number5 {
            left: -18px;
            top: -14px;
            font-size: 1.7vw;
            width: 18.2vw;
            height: 18.2vw;
        }
        .number1::after {
            left: 37%;
            top: 25%;
            font-size: 6.7vw;
        }
        .number2::after {
            left: 37%;
            top: 25%;
            font-size: 6.7vw;
        }
        .number3::after {
            left: 37%;
            top: 25%;
            font-size: 6.7vw;
        }
        .number4::after {
            left: 37%;
            top: 25%;
            font-size: 6.7vw;
        }
        .number5::after {
            left: 37%;
            top: 25%;
            font-size: 6.7vw;
        }
    }
    .cat01 {
        bottom: -17px;
        right: 24px;
        max-width: 128px;
        width: 100%;
    }

}
.sec03 {
    .flex_45 {
        width: 92%;
    }
    .flex_start {
        flex-wrap: wrap;
        .flex_50 {
            padding-right: 20px;
            margin-left: 4.45vw;
            img {
                max-width: 320px;
            }
        }
    }
    .flex_end {
        flex-flow: wrap-reverse !important;
        .title {
            margin-top: 5vw;
            margin-right: 5.45vw;
            padding-left: 35px;
            img {
                max-width: 185px;
            }
    
        }
    }
}
.map {
    iframe {
        height: 350px;
    }
}
.sec04 .flower {
    position: absolute;
    left: 85px;
    top: -74px;
    width: 100%;
    max-width: 80px;
}
.calendar {
    display: flex !important;
    padding: 15px 10px 15px;
}
.calendar li:nth-child(1) {
    flex: 0.45;
}
.sec05 {
    .flex_50 {
        img {
            width: 100%;
            max-width: 180px;
        }
    }
}

.footer {
    a {
        display: block;
        font-size: 13px;
    }
    .flex_38 {
        width: 100%;
    }
    .flex_33 {
        width: 100%;
    }
    .f_nav {
        display: flex;
    }
    .f_round {
        display: none !important;
    }
    .tel {
        display: none;
    }
    .sp-f_tel {
        display: block;
        position: relative;
        bottom: 45px;
        width: 100%;
        max-width: 360px;
    }
}
.greeting_bird {
    position: absolute;
    left: 3vw;
    top: 0vw;
    width: 10vw;
}
.greeting_flower {
    right: 16px;
    width: 100%;
    max-width: 80px;
}
.greeting_title {
    max-width: 150px;
}
.greeting {
    .sec01 {
        .flex_45 {
            width: 92%;
            margin-left: auto;
        }
        .left p {
           font-size: 15px;
       }
    }
    .sec02 .flex_box li {
        font-size: 18px;
        padding: 40px 0 0;
    }
    .sec02 .flex_box li:nth-child(2) {
        font-size: 15px;
    }
    .sec02 .last li:nth-child(1)::before {
        content: url(../images/greeting-border.png);
        width: 1262px;
        height: auto;
        position: absolute;
        bottom: 0 !important;
        top: unset !important;
        left: 0;
        display: none !important;
    }
    .sec02 .last li:nth-child(2)::before {
        content: url(../images/greeting-border.png);
        width: 1262px;
        height: auto;
        position: absolute;
        bottom: 0 !important;
        left: 0;
    }
    
}
.border-green {
    border: #8bc85a solid 6px;
    padding: 70px 20px;
}
.medical .calendar li {
    font-size: 14px;
}
.medical_cat {
    left: 25px;
    top: -75px;
    width: 100%;
    max-width: 120px;
}
.medical .sec01 p {
    font-size: 20px;
}

.guide_tel {
    max-width: 200px;
}
.guide_bird {
    width: 100%;
    max-width: 51px;
}
.guide_mountain {
    width: 100%;
    max-width: 121px;
    top: -18vw;
    right: 8vw;
}
.guide_mountain2 {
    bottom: -2vw;
    left: 3vw;
    width: 100%;
    max-width: 110px;
}
.guide_title {
    max-width: 140px;
}
.guide {
    .sec01 {
        p {
            font-size: 18px;
            font-weight: bold;
            color: #f16b0e;
            padding-top: 20px;
        }
        .flex_box {
            display: flex !important;
            .flex_29 {
                img {
                    width: 100%;
                    height: auto;
                }
            }
            .flex_29:nth-child(3) {
               margin-top: 50px;
            }
            .flex_29:nth-child(4) {
                display: block;
                margin-top: 50px;
            }
            .flex_29:nth-child(5) {
                display: block;
                margin-top: 50px;
            }
        }
    }
    
}
.flex_49 {
    width: 100% !important;
}
.dentistry_bird {
    right: 5vw;
    bottom: 134vw;
    width: 100%;
    max-width: 40px;
}
.waku_orange {
    background: unset;
    padding: 30px;
    border: #f18b23 3px solid;
    border-radius: 10px;
    li {
        font-size: 16px;
    }
}
.dentistry_title {
    max-width: 310px;
}
.dentistry {
    .sec01 {
        .flex_47 {
            img {
                max-width: 500px;
            }
        }
        .iconBox {
            img {
                max-width: 55px;
                margin-right: 15px;
            }
        }
    }
    .sec02 {
        .bg_f8f1e3 {
            padding: 15px 10px;
            li {
                display: block;
                text-align: center;
            }
            .round {
                width: 40px;
                height: 40px;
                display: block;
                margin: 0 auto 20px;
            }
            .number1::after {
                font-size: 13px;
            }
            .number2::after {
                font-size: 13px;
            }
            .number3::after {
                font-size: 13px;
            }
            .number4::after {
                font-size: 13px;
            }
            .number5::after {
                font-size: 13px;
            }
            .c-f16b0e {
                font-size: 21px;
            }
        }
        .bg_f1f9dd {
            padding: 15px 10px;
            li {
                display: block;
                text-align: center;
            }
            .round {
                width: 40px;
                height: 40px;
                display: block;
                margin: 0 auto 20px;
            }
            .number1::after {
                font-size: 13px;
            }
            .number2::after {
                font-size: 13px;
            }
            .number3::after {
                font-size: 13px;
            }
            .number4::after {
                font-size: 13px;
            }
            .number5::after {
                font-size: 13px;
            }
            .number6::after {
                font-size: 13px;
            }
            .c-8bc85a {
                font-size: 21px;
            }
        }
        .bg_f1f9dd {
            margin-top: 120px;
        }
        .bg_fff {
            padding: 60px 4vw 50px;
        }
        .title {
            .border1 {
                max-width: 173px;
            }
            .border2 {
                max-width: 145px;
            }
        }
    }

}
.waku_orange .left li:nth-child(4):after {
    content: "";
    width: 470px;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../images/dentistry_border.png);
}
.implant_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 354px;
    height: auto;
}
.implant-font20 {
    font-size: 15px;
    font-weight: bold;
    color: #f16b0e;
}
.news_title {
    max-width: 130px;
}
.news .sec01 .newsBox ul li {
    padding: 12px 10px 30px;
}
.news .sec01 .newsBox ul a {
    display: block;
}
/*****************/
    
    
}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width: 480px) {

}