@charset 'utf-8';
/* CSS Document */

/* 979px以下用（タブレット用）の記述 */

@media screen and (max-width: 1025px) {
    body {
        width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }




    /* slide
=========================================================*/
    .slide {
        width: auto;
    }

    .slider figure {
        width: 234px;
    }

    .slide__thumb {
        width: 700px;
    }

    .slide__thumb .slider figcaption {
        font-size: 1.4rem;
        line-height: 1.4;

        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 10px;

        text-align: left;
    }

    .slider li {
        margin-left: 0;
    }



    /* main
=========================================================*/
    .content {
        width: 96%;
        margin-right: auto;
        margin-bottom: 50px;
        margin-left: auto;
    }


    #top main {
        width: 66%;
    }

    main {
        width: 62%;
    }

    /* side
=========================================================*/
    #top aside {
        width: 30%;
    }

    aside {
        width: 35%;
    }

    .aside__nav ul li a {
        padding: 20px 0 18px 10px;
    }

    .aside__nav ul li ul li {
        width: auto;
    }
    #top .square_btn,
    #top .square_btn2 {
        width: auto;
    }


    /* business
=========================================================*/
    .business {
        border-top: 1px solid #e0e0e0;
        background-color: #f1f1f1;
    }

    .business .business__inner {
        width: 90%;

        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* address
=========================================================*/
    .address__inner {
        display: block;

        width: 80%;
    }
    .address__inner-nav {
        margin-top: 30px;
    }
}


@media screen and (min-width:641px) and ( max-width:1024px) {
    .news{
        justify-content: space-around;
        
    }
    
    .slide__thumb .slider figcaption{
        font-size: 1.2rem;
    }
}
@media screen and (min-width:641px) and ( max-width:740px) {
    .news dl{
        width: 100%;
    }
    
}
/* 767px以下用（タブレット／スマートフォン用）の記述 */

@media screen and (max-width: 767px) {
    /* slide
=========================================================*/
    .slider figure {
        width: 190px;
    }

    .slide__thumb {
        width: 560px;
    }


    /* main
=========================================================*/
    .Float-right {
        margin-bottom: 20px;
        margin-left: 20px;
    }

    .Float-left {
        margin-right: 20px;
        margin-bottom: 20px;
    }
    h1 {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
    }
}


/* 640px以下用（スマートフォン用）の記述 */

@media screen and (max-width: 640px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }


    /* module
=========================================================*/
    h1 {
        font-size: 2.5rem;

        padding-left: 0;
    }

    h2 {
        font-size: 1.4em;
    }

    h3 {
        font-size: 1.3em;
    }



    /* table
=========================================================*/
    table thead th,
    table tbody th,
    table tbody td {
        display: block;

        width: auto;
    }

    .table-scroll {
        overflow-x: auto;
        overflow-y: hidden;

        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch;
    }

    .table-scroll table {
        width: 500px;
    }

    .table-scroll table thead th,
    .table-scroll table tbody th,
    .table-scroll table tbody td {
        display: table-cell;
    }

    .table-01 {
        border-bottom: 3px solid #e2e2e2;
    }

    .table-01 tr {
        border-top: 1px solid #e2e2e2;
        border-bottom: none;
    }


    /* header
=========================================================*/
    header {
        border-bottom: 1px solid #e95098;
    }

    .header__inner {
        width: 94%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 16px;
    }

    header .logo {
        width: 60%;
        height: auto;
        margin-top: 0;
    }

    /*  slide
=========================================================*/
    .slide {
        margin-top: 20px;
    }

    .slide__thumb {
        width: 300px;
        margin: 20px auto 30px;
    }
    .slick-slide {
        display: block;
        float: none;
    }

    .slider figure {
        width: 100%;
    }

    .slider img {
        width: 100%;
        height: auto;

        border-radius: 4px;
    }


    .slider li {
        display: block;

        width: 90%;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
    }

    .slide__thumb .slider figcaption {
        font-size: 1.4rem;
        line-height: 1.4;

        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 10px;

        text-align: left;
    }

    /* main
=========================================================*/
    .content {
        width: 100%;
        margin-bottom: 30px;
    }
    .Flbox {
        display: block;

        margin-top: 15px;
    }

    .Flbox__wrap {
        display: block;
    }

    #top main {
        width: auto;
    }


    main {
        width: 94%;
        margin-right: auto;
        margin-left: auto;
    }

    dl {
        width: 90%;
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
        padding-bottom: 20px;
    }

    .Float-right {
        display: block;
        float: none;

        margin-top: 25px;
        margin-right: auto;
        margin-bottom: 25px;
        margin-left: auto;
    }

    .Float-left {
        display: block;
        float: none;

        margin-top: 25px;
        margin-right: auto;
        margin-bottom: 25px;
        margin-left: auto;
    }

    .box {
        box-sizing: content-box;
        margin-top: 20px;
        margin-bottom: 1.6em;
        padding: 15px 20px;
    }

    .box-bg03 {
        padding: 15px 20px;
    }


    .horizontal,
    .horizontal_three {
        display: block;
    }

    .horizontal .button_icon,
    .horizontal_three .button_icon {
        width: 100%;
    }

    .horizontal .button_icon:not(:nth-of-type(1)),
    .horizontal_three .button_icon:not(:nth-of-type(1)) {
        margin-top: 20px;
    }

    #subNav ul {
        display: block;
    }

    dl.defQa {
        width: 100%;
    }

    dl.defQa dt::before {
        font-size: 2rem;
    }

    dl.defQa dt {
        padding-left: 2em;
    }

    dl.defQa dd::before {
        font-size: 2rem;
    }

    dl.defQa dd {
        padding-left: 2em;
    }


    .BlkPageTop__link {
        width: 50px;
        height: 50px;
    }
    /* side
=========================================================*/
    aside {
        width: auto;
        margin-right: auto;
        margin-left: auto;
    }

    .aside__inner {
        margin-top: 40px;
    }

    aside .aside__nav ul {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .aside__nav ul li a {
        margin-right: auto;
        margin-left: auto;
        padding: 20px 40px 18px 20px;
    }

    .aside__nav-title {
        margin-top: 40px;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
    }

    .aside__nav ul li ul {
        width: 100%;
    }

    .aside__nav ul li ul li {
        width: auto;
    }
    .aside__nav ul li ul li a {
        padding-left: 50px;
    }

    #top aside {
        width: 288px;
        margin-right: auto;
        margin-left: auto;
    }

    #top .square_btn,
    #top .square_btn2 {
        width: 248px;
    }

    .square_btn2 {
        font-size: 1.3rem;
    }

    /* address
=========================================================*/
    .address {
        border-top: 1px solid #e95098;
    }

    .address__inner {
        display: flex;
        flex-direction: column-reverse;

        width: auto;
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        padding: 25px 0 30px;

        align-items: flex-start;
    }

    .address__inner p {
        margin-top: 30px;
    }


    .address__inner-nav {
        margin-top: 0;
        padding-left: 20px;
    }

    .address__inner-nav ul {
        flex-direction: column;

        margin-top: 0;
    }

    .address__inner-nav ul li {
        position: relative;

        margin-top: 5px;
    }

    .address__inner-nav ul li::before {
        position: absolute;
        top: 40%;
        left: -20px;

        width: 9px;
        height: 13px;
        margin-top: -5px;

        content: '';

        background: url('../images/arrow_icon.png') top left no-repeat;
        background-size: 9px 13px;
    }

    .address__inner-nav li::after {
        padding: 0 0;

        content: '';
    }

    /* footer
=========================================================*/
    footer {
        font-size: 1.1rem;

        padding: 25px 0;
    }

    footer p {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }


    /* sidr
=========================================================*/
    .menu-trigger,
    .menu-trigger span {
        display: inline-block;

        box-sizing: border-box;

        transition: all .4s;
    }

    .menu-trigger {
        position: relative;

        width: 33px;
        height: 30px;
        margin-right: 5px;
    }

    .menu-trigger span {
        position: absolute;
        left: 0;

        width: 100%;
        height: 1px;

        background-color: #e95098;
    }

    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 15px;
    }

    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }


    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(15px) rotate(-45deg);
        transform: translateY(15px) rotate(-45deg);
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-15px) rotate(45deg);
        transform: translateY(-15px) rotate(45deg);
    }



    /* aroma
=========================================================*/
    body#pageTop .wrapper {
        width: 96%;
        margin-right: auto;
        margin-bottom: 30px;
        margin-left: auto;
    }

    body#pageTop .aromaBlockMain {
        float: none;

        margin: 0 auto;
    }

    body#pageTop .contentsLeft {
        width: 100%;
    }

    body#pageTop .contentsRight {
        width: 100%;
    }
    body#pageTop .contentsRight h2 {
        margin-top: 30px;
    }

    body#pageTop .contentsLeft table {
        margin-bottom: 20px;
    }

    body#pageTop .contentsLeft img,
    body#pageTop .contentsRight img {
        display: block;

        margin: 0 auto;
    }

    body#pageTop #contentsFooter {
        width: 100%;
    }

    body#pageTop #contentsFooterQa {
        float: none;

        width: 217px;
        margin: 0 auto;
    }
    body#pageTop #contentsFooterBasic {
        float: none;

        width: 100%;
    }

    body#pageTop #contentsFooterBasic h2 {
        margin-top: 30px;

        text-align: center;
    }

    body#pageTop #contentsFooterBasic1,
    body#pageTop #contentsFooterBasic2,
    body#pageTop #contentsFooterBasic3 {
        float: none;

        margin: 20px auto 0;
    }

    body#aroma .wrap {
        width: 96%;
        margin-right: auto;
        margin-bottom: 30px;
        margin-left: auto;
    }

    body#aroma .content {
        width: 96%;
        margin-right: auto;
        margin-bottom: 30px;
        margin-left: auto;
    }

    body#aroma h1 {
        margin-top: 15px;
    }
    body#pageTop #naviAroma,
    body#aroma #naviAroma {
        text-align: center;
    }

    body#pageTop #naviAroma ul,
    body#aroma #naviAroma ul {
        padding: 0 0 20px 0;
    }

    body#pageTop #naviAroma li,
    body#aroma #naviAroma li {
        float: none;
    }

    body#aroma h2 {
        margin-top: 0;
    }

    body#pageTop #naviAroma ul {
        padding: 0;
    }

    /* sleep
=========================================================*/
    body#sleep .wrap {
        width: 96%;
        margin-right: auto;
        margin-bottom: 30px;
        margin-left: auto;
    }


    body#sleep h1 {
        margin-top: 15px;
    }
    body#sleep #titleLead h2 {
        line-height: 1;

        margin-top: 0;
        margin-bottom: 15px;
        padding-top: 15px;
        padding-left: 10px;

        color: #11b1ff;
        border-left: none;
        background-color: #e0f5ff;
    }
    body#sleep #titleLead h2 span {
        font-size: 70%;
    }

    body#sleep h3 a {
        padding-right: 0;
    }
    body#sleep #naviAroma img {
        text-align: center;
    }
    body#sleep #naviAroma {
        text-align: center;
    }

    body#sleep #naviAroma ul {
        padding: 0 0 20px 0;
    }
    body#sleep #naviAroma li {
        float: none;
    }
}