@charset "utf-8";


@media screen and (min-width:1159px) {
    .display-1159 {
        display: none;
    }

    .nav_responsive {
        display: none;
    }
}

/* タブレット以上 */
@media screen and (min-width:850px) {

    /* 850以下で改行 */
    .br-850 {
        display: none;
    }

    .display-850 {
        display: none;
    }
}

/* スマホ以上 */
@media screen and (min-width:450px) {

    /* 450以下で改行 */
    .br-450 {
        display: none;
    }
}

@media screen and (max-width:850px) {

    .br-pc {
        display: none;
    }

    .display-pc {
        display: none;
    }
}

/* 1159px以下 */

@media screen and (max-width:1159px) {

    .fixed-btn-container {
        display: none;
    }

    .display-1159 {
        display: block;
    }

    .none-1159 {
        display: none;
    }
}

/* タブレット以下 */

@media screen and (max-width:850px) {
    .none-850 {
        display: none;
    }

    .display-850 {
        display: block;
    }
}

/*------------- 共通 --------------*/

/* コンテンツ幅 */
@media screen and (min-width:850px) and (max-width:1159px) {

    article {
        width: 94%;
        min-width: 789px;
    }
}

@media screen and (max-width:850px) {

    article {
        width: 80%;
        max-width: 680px;
        min-width: 360px;
    }
}


@media screen and (max-width:680px) {

    .h2-subtext {
        font-size: 14px;
    }

    .ja-title {
        font-size: 22px;

        line-height: 32px;
    }
}


@media screen and (max-width:450px) {

    article {
        max-width: 362px;
        width: 80%;
    }

    h2.en-title {
        font-size: 22px;
    }

    .h2-subtext {
        font-size: 14px;
    }

    .ja-title {
        line-height: 32px;
    }
}



@media screen and (max-width:1400px) {


    /* 固定リンクボタン */
    .fixed-btn-container {
        bottom: 20px;
    }

    .fixed-btn {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }

    .fixed-btn p {
        font-size: 18px;
        color: #fff;
        margin-top: 5px;
    }

    .fixed-btn img {
        width: 50%;
        height: auto;
    }
}

/* 固定リンクボタン レスポンシブ */

@media screen and (max-width:1159px) {

    .fixed-btn-container-responsive {
        display: flex;
        width: 100vw;
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .fixed-btn-container-responsive a {
        font-size: 22px;
        line-height: 24px;
        background-color: #4EB4B8;
        width: calc(100% / 3);
        height: 60px;
        color: #fff;
        text-align: center;
        border-right: 1px solid #fff;
        position: relative;
    }

    .fixed-btn-responsive {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

    }

    .fixed-btn-responsive img {
        padding-right: 10px;
    }

    .footer-small {
        padding: 100px 0;
    }
}

@media screen and (max-width:450px) {
    .fixed-btn-container-responsive a {
        line-height: 22px;
    }
}


/*------------- 下層ページ共通 --------------*/

/* 下層ヘッダー */

@media screen and (max-width:1159px) {

    .subpage-header-mv-container {
        padding-top: 0;
    }

    .subpage-title {
        margin-top: 0;
    }

    .subpage-header-mv {
        width: 97vw;
    }

    .subpage-header-mv-container {
        position: relative;
    }

    .responsive-header {
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
    }

    .header-title-sub {
        padding-top: 0;
    }

    .subpage-header-title {
        width: 92vw;
        margin: 0px auto 0px auto;
        padding-left: 0px;
    }

    .subpage-header-title img {
        padding-top: 10px;
    }

    .header-title-sub {
        font-weight: 300;
        padding-left: 65px;
    }

    .responsive-header .nav_hamburger span {
        top: 51%;
        left: 100%;
    }

    /* クリックで表示されるページ */
    .nav_responsive-title {
        margin-top: 10px;
    }


    .hamburger-header-title img {
        width: 152px;
        height: 29px;
    }

    .hamburger-header-title-sub {
        font-size: 8px;
        font-weight: 300;
        color: #412C19;
        padding-left: 30px;
    }


}

@media screen and (max-width:850px) {
    .subpage-header-mv {
        height: 230px;
    }

    .subpage-header-title img {
        width: 152px;
        height: 29px;
        padding-top: 10px;
        padding-left: 10px;
    }

    .header-title-sub {
        font-size: 8px;
        padding-left: 42px;
    }

    .responsive-header .nav_hamburger span {
        top: 0;
    }

    .responsive-header .nav_hamburger {
        margin-top: 35px;
    }
}


@media screen and (min-width:850px) and (max-width:1159px) {

    .subpage-title {
        font-size: 35px;
    }

}

@media screen and (max-width:850px) {
    .subpage-header-mv {
        height: 230px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .subpage-title {
        width: 100%;
        font-size: 25px;
        line-height: 44px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}


@media screen and (max-width:550px) {

    /* パンくず */
    .breadcrumbs {
        font-size: 12px;
    }
}


/*------------- ヘッダー --------------*/

@media screen and (min-width:1159px) {
    .drawer {
        display: none;
    }
}

@media screen and (max-width:1159px) {

    .header-mv h1 {
        padding-top: 10px;
    }

    .nav-global {
        display: none;
    }

    /* ハンバーガーメニュー */
    .header-flex {
        display: flex;
        justify-content: space-between;
    }

    .header-flex-sub {
        display: flex;
        justify-content: space-between;
    }

    /* ハンバーガーのマーク */
    .nav_hamburger {
        display: block;
        position: relative;
        width: 32px;
        height: 24px;
        margin-right: 15px;
        margin-top: 40px;
        z-index: 2;
        transition: 0.3s;
    }

    .nav_hamburger span {
        display: block;
        width: 32px;
        height: 4px;
        background-color: #412C19;
        transition: 0.3s;
        position: absolute;
        top: 51%;
        left: 120%;
    }

    .nav_hamburger span:nth-of-type(1) {
        /* transform: translate(-120%, -10px); */
        transform: translate(-120%, -20px);
    }

    .nav_hamburger span:nth-of-type(2) {
        /* transform: translate(-120%, -50%); */
        transform: translate(-120%, -160%);
    }

    .nav_hamburger span:nth-of-type(3) {
        transform: translate(-120%, 6px);
    }

    /* 閉じる× */
    .nav_hamburger.show span:nth-of-type(1) {
        /* transform: translate(-120%, -50%) rotate(45deg); */
        transform: translate(-130%, -50%) rotate(45deg);
    }

    .nav_hamburger.show span:nth-of-type(2) {
        transform: translate(100%, -50%);
        opacity: 0;
    }

    .nav_hamburger.show span:nth-of-type(3) {
        /* transform: translate(-120%, -50%) rotate(-45deg); */
        transform: translate(-130%, -50%) rotate(-45deg);
    }

    /* クリックで表示されるメニュー：クリックされる前 */
    .nav_responsive {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s, visibility 0.5s;
        background-color: #E0E0E0;
        z-index: 1;
    }

    .nav_responsive {
        padding-left: 30px;
        padding-left: 30px;
    }

    .nav-responsive__lists {
        margin-top: 40px;
    }

    .nav-responsive__list {
        font-size: 16px;
        font-weight: 500;
        color: #412C19;
        margin-bottom: 22px;
    }

    .responsive-sas__list,
    .responsive-symptoms__list {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 22px;
    }

    .nav-responsive__list a {
        color: #412C19;
    }


    /* クリックで表示されるメニュー：クリックされた後 */
    .nav_responsive.show {
        opacity: 1;
        visibility: visible;
        position: fixed;
    }

    .nav_responsive .top-header-title-sub {
        color: #412C19;
        font-weight: 300;
    }


    /* ドロップダウン */
    .responsive-sas-dropdown__lists li a,
    .responsive-symptoms-dropdown__lists li a {
        font-size: 16px;
        font-weight: 500;
        color: #412C19;
    }

    /* クリックでドロップダウン表示 */
    .responsive-sas-dropdown__lists,
    .responsive-symptoms-dropdown__lists {
        display: none;
        margin-top: 14px;
    }

    .responsive-sas__list,
    .responsive-symptoms__list {
        cursor: pointer;
    }

    .dropdown {
        display: block;
    }

    .responsive-dropdown__list {
        font-size: 16px;
        font-family: "Kiwi Maru", serif;
        font-weight: 500;
        margin-bottom: 16px;
    }

    .responsive-dropdown__list::before {
        content: "●";
        font-size: 8px;
        color: #4EB4B8;
        padding-right: 5px;
        vertical-align: middle;
    }
}


/*------------- フッター --------------*/

@media screen and (min-width:850px) and (max-width:1159px) {
    .footer-contents {
        max-width: 790px;
    }
}


@media screen and (max-width:850px) {

    .footer-contents {
        display: block;
    }

    /*---- 診療時間 ----*/

    .footer-consultation-hours {
        max-width: 680px;
        width: 80%;
        border-right: none;
        margin: 0 auto;
    }

    /* 表 */
    table.time-table {
        max-width: 680px;
        width: 100%;
    }

    /*---- アクセス ----*/
    .footer-access {
        max-width: 680px;
        width: 80%;
        margin: 0 auto;
    }

    footer iframe {
        max-width: 680px;
        width: 100%;
    }

    /* コピーライト */
    .footer-small {
        /* padding: 30px 0; */
        padding: 100px 0;
    }

    .footer-small small {
        font-size: 12px;
        line-height: 10px;
    }

    .footer-small-850 {
        display: inline-block;
        margin-bottom: 20px;
    }
}

@media screen and (max-width:450px) {

    .footer-title img {
        width: 262px;
    }

    .footer-title-sub {
        font-size: 14px;
    }

    .footer-address address {
        text-align: left;
        width: 203px;
        margin: 0 auto 10px auto;
    }

    footer h2 {
        font-size: 16px;
        margin-bottom: 7px;
    }

    footer h3 {
        font-size: 16px;
        margin-bottom: 3px;
    }

    /*---- 診療時間 ----*/

    .footer-consultation-hours {
        max-width: 362px;
        width: 80%;
    }

    /* 表 */
    table.time-table {
        font-size: 10px;
        max-width: 362px;
        width: 100%;
        /* margin-bottom: 30px; */
    }

    .time-table tr {
        height: 23px;
        line-height: 23px;
    }

    .footer-consultation-hours p {
        font-size: 14px;
        margin-bottom: 8px;
        line-height: 24px;
    }

    /*---- アクセス ----*/
    .footer-access {
        max-width: 362px;
        width: 80%;
    }

    footer iframe {
        max-width: 362px;
        height: 164px;
        width: 100%;
    }

    .footer-access p {
        font-size: 14px;
        margin-bottom: 8px;
        line-height: 24px;
    }
}

/*------------- トップ --------------*/

@media screen and (max-width:1159px) {
    .top-header-title-sub {
        /* font-size: 18px; */
        font-weight: 300;
        color: #412C19;

    }
}

@media screen and (max-width:850px) {

    .header-title img {
        /* width: 159px; */
        width: 152px;
        height: 29px;
        padding-top: 10px;
        padding-left: 10px;
    }

    .top-header-title-sub {
        font-size: 8px;
        padding-left: 42px;
    }

    .top-header-title-sub {
        width: 115px;
        text-align: end;
    }
}

/*---- メインビジュアル ----*/

@media screen and (min-width:850px) and (max-width:1159px) {

    .header-mv {
        width: 95vw;
        height: 95vh;
    }

    .header-ul {
        font-size: 20px;
        bottom: 225px;
        left: 50px;
    }

    .header-li__1 {
        width: 180px;
        height: 50px;
        line-height: 50px;
        margin-right: 15px;
    }

    .header-li__2 {
        width: 207px;
        height: 50px;
        line-height: 50px;
        margin-right: 15px;
    }

    .header-li__3 {
        width: 226px;
        height: 50px;
        line-height: 50px;
        margin-right: 15px;
    }

    .header-catch {
        font-size: 45px;
    }
}

@media screen and (max-width:850px) {

    .header-mv {
        background-image: url(../img/header-mv__sp.jpg);
        height: 95vh;
    }

    .header-ul li {
        width: 100%;
        height: 90px;
        line-height: 30px;
        border-radius: 25px;
        margin-right: 15px;

        position: relative;
    }

    .header-li__1 p {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .header-li__2 p {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .header-li__3 p {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .header-ul {
        width: 95%;
        font-size: 22px;
        position: absolute;
        top: 150px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-catch {
        font-size: 45px;
        top: 245px;
        left: 3%;
    }
}

@media screen and (max-width:450px) {

    .header-mv {
        height: 90vh;
    }

    .header-ul {
        top: 125px;
        width: 85%;
    }

    .header-ul li {
        height: 48px;
        line-height: 16px;
        border-radius: 10px;
        margin-right: 10px;
    }

    .header-ul li p {
        font-size: 12px;
    }

    .header-catch {
        font-size: 24px;
        top: 180px;
        left: 8%;
    }
}



/*---- INFORMATION ----*/

@media screen and (min-width:850px) and (max-width:1159px) {

    dl.dl-info {
        width: 68%;
        /* max-width: 500px; */
    }
}

@media screen and (max-width:850px) {
    .information {
        /* margin: 100px 0; */
        display: block;
        /* justify-content: space-between; */
    }

    .information .en-title {
        margin-bottom: 30px;
    }

    .information p.btn-view {
        width: 230px;
        margin: 40px auto 0 auto;
    }
}

@media screen and (max-width:450px) {

    .information .en-title {
        margin-bottom: 16px;
    }

    .info-section dt {
        margin-bottom: 5px;
    }

    .info-section {
        display: block;
        padding-bottom: 16px;
        margin-bottom: 16px;
        /* border-bottom: 2px dashed #4E62B8; */
        /* position: relative; */
    }

    dl.dl-info {
        font-weight: 600;
        /* flex-wrap: wrap;
        max-width: 740px;
        width: 100%; */
    }

}



/*---- いびき・熟睡ができずにお悩みの方へ ----*/

@media screen and (min-width:950px) and (max-width:1159px) {

    .worries-container {
        width: 94%;
        min-width: 680px;
    }

    .worries img {
        width: 38vw;
        top: 35%;
        left: 58%;
    }
}

@media screen and (min-width:850px) and (max-width:950px) {

    .worries-container {
        width: 94%;
        min-width: 789px;
    }

    .worries img {
        width: 35vw;
        top: 55%;
        left: 60%;
    }
}

@media screen and (max-width:850px) {

    .worries-container {
        width: 80%;
        max-width: 680px;
        min-width: 360px;
        padding: 50px 0 200px 0;
    }


    p.worries-contents {
        width: 100%;
        max-width: 680px;
        min-width: 360px;
        line-height: 28px;
    }

    .worries .btn-view {
        width: 230px;
        margin: 68px auto 0 auto;
    }

    .worries img {
        width: 100%;
        max-width: 680px;
        min-width: 360px;
        position: absolute;
        top: 400px;
        left: 50%;
        transform: translateX(-50%);
    }
}


@media screen and (max-width:450px) {

    .worries-container {
        width: 80%;
        max-width: 362px;
        min-width: none;
    }

    .worries h2 {
        margin-bottom: 16px;
    }

    .worries img {
        width: 100%;
        max-width: 362px;
        top: 400px;
        left: 50%;
        transform: translateX(-50%);
    }
}


/*---- もし以下のような症状があれば、 ----*/

@media screen and (max-width:850px) {
    .condition {
        margin: 47vw 0 125px 0;
    }

    .condition-container {
        display: block;
    }

    .condition h2 {
        text-align: left;
        margin-bottom: 20px;
    }

    .ja-title-size {
        font-size: 20px;
    }


    .dl-condition {
        width: 100%;
    }

    .dl-condition__1 {
        border-right: none;
        padding-right: 0;
    }

    .dl-condition__2 {
        padding-top: 30px;
    }

    .dl-condition dt {
        font-size: 20px;
    }

    .dl-condition dd {
        font-size: 16px;
        line-height: 24px;
        text-indent: -25px;
        padding-left: 25px;
    }
}


@media screen and (max-width:600px) {

    .condition {
        margin: 40vw 0 125px 0;/
    }
}

@media screen and (max-width:450px) {
    .condition {
        margin: 40vw 0 80px 0;
    }

    .ja-title-size {
        font-size: 16px;
    }
}


/*---- ABOUT SAS ----*/

@media screen and (max-width:450px) {

    .about-sas h2 {
        margin-bottom: 20px;
    }


    .about-sas-container {
        row-gap: 20px;
    }


    .link-aboutsas {
        width: 302px;
        height: 180px;
    }

    .link-aboutsas p {
        font-size: 16px;
        top: 117px;
    }

    .link-aboutsas__1 img {
        width: 114px;
        padding-top: 39px;
    }

    .link-aboutsas__2 img {
        width: 54px;
        padding-top: 26px;
    }

    .link-aboutsas__3 img {
        width: 62px;
        padding-top: 26px;
    }

    .link-aboutsas__4 img {
        width: 113px;
        padding-top: 39px;
    }

    .link-aboutsas__5 img {
        width: 87px;
        padding-top: 26px;
    }
}


/*---- FLOW ----*/


@media screen and (min-width:850px) and (max-width:1159px) {
    .flow-container {
        max-width: 1100px;
        /* margin: 0 auto; */
        width: 94%;
        min-width: 789px;
    }

    .flow-contents-box-1159 img {
        width: 100%;
        min-width: 789px;
    }

    /* ボタン */
    .flow .btn-view {
        margin-top: 65px;
        text-align: center;
    }
}

@media screen and (max-width:850px) {

    .flow .display-1159 {
        display: none;
    }

    .flow {
        background-image: url(../img/flow-back__tb.jpg);
        height: 150vw;
        /* margin: 100px 0 110px 0; */
    }

    .flow-container {
        width: 80%;
        max-width: 680px;
        min-width: 360px;
    }

    .flow-contents-box-tb img {
        width: 50vw;
        margin-left: 10%;
    }

    /* ボタン */
    .flow .btn-view {
        margin-top: 40px;
    }

}

@media screen and (max-width:650px) {

    .flow {
        height: 170vw;
        /* margin: 100px 0 110px 0; */
    }
}

@media screen and (max-width:450px) {

    .flow {
        /* background-image: url(../img/flow-back.jpg); */
        height: 230vw;
        /* margin: 100px 0 110px 0; */
    }

    .flow-contents-box-tb img {
        width: 70vw;
    }
}

@media screen and (max-width:370px) {

    .flow {
        height: 240vw;
    }
}

/*--- 睡眠時無呼吸症候群（SAS）の危険性がある症状 ---*/


@media screen and (min-width:850px) and (max-width:1159px) {

    .ul-symptoms-link a {
        width: 40vw;
    }
}

@media screen and (max-width:850px) {
    .symptoms-link h2 {
        text-align: left;
    }

    .ul-symptoms-link {
        display: block;
        width: 100%;
        max-width: 680px;
        min-width: 362px;
    }

    .ul-symptoms-link a {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* 効いてない */
@media screen and (max-width:450px) {
    .ul-symptoms-link {
        width: 100%;
        max-width: 362px;
        min-width: auto;
    }
}


/*---- FEATURES ----*/

@media screen and (min-width:850px) and (max-width:1159px) {


    .features-container {
        width: 94%;
        min-width: 789px;
    }

    .features-contents-2 p {
        width: 45%;
    }

    .features-contents-2 {
        display: flex;
    }

    .features-contents-2 img {
        width: 50%;
    }
}

@media screen and (max-width:850px) {

    .features {
        padding: 30px 0 50px 0;
    }

    .features-container {
        width: 80%;
        max-width: 680px;
        min-width: 360px;
    }

    .features-contents-number {
        font-size: 40px;
    }

    .features-contents-title {
        font-size: 20px;
    }

    .features-contents-2 img {
        width: 100%;
        margin: 0 auto;
    }

    .features-contents-2 p {
        width: 100%;
        margin: 20px auto 0 auto;
        line-height: 33px;
    }

    .features-contents-2 {
        display: block;
    }


    .features-contents-1-tb {
        display: flex;
        width: 100%;
        align-items: top;
        padding-top: 22px;
        margin-bottom: 25px;
    }


    .features-contents-number-tb {
        font-size: 40px;
        margin-right: 10px;
        vertical-align: middle;
        font-family: "Kiwi Maru", serif;
        font-weight: 500;
        color: #4EB4B8;
    }


    .features-contents-title-tb {
        font-size: 20px;
        vertical-align: middle;
        font-family: "Kiwi Maru", serif;
        font-weight: 500;
        color: #6A5446;
        margin-top: 10px;
    }
}


@media screen and (max-width:450px) {

    .features-container {
        width: 80%;
        max-width: 362px;
        min-width: auto;
    }
}


/*---- GREETINGS ----*/

@media screen and (min-width:850px) and (max-width:1159px) {

    .greetings p {
        max-width: 90%;
        line-height: 33px;
    }
}

@media screen and (max-width:850px) {


    .greetings {
        margin: 60px 0 120px 0;
    }

    .greetings-container {
        display: block;
        justify-content: space-between;
    }


    .greetings-container-1 img {
        width: 60%;
        height: auto;
        margin: 0 auto 20px auto;
    }
}


@media screen and (max-width:450px) {

    .greetings-container-1 img {
        width: 85%;
        height: auto;
        margin: 0 auto 20px auto;
    }
}