@charset "UTF-8";
/* CSS Document */

/* PC
---------------------------------------------------------------------- */
@media (min-width: 1001px) {
    
    .pc_none {
        display: none;
    }
    
    #pageheader {
        width: 100%;
        height: 550px;
    display: flex;
        align-items: center;
        position: relative;
        z-index: 0;
        /*margin-top: 133px;*/
    }
    #pageheader h1 {
        color: #fff;
        font-size: calc(42em / 16);
        letter-spacing: 0.25em;
        padding-left: 200px;
    }
    #pageheader h1 span {
        display: block;
        font-size: calc(16em / 42);
        letter-spacing: 0.23em; 
        margin-top: 20px;
    }
    #pageheader img {
        width: 100%;
        height: 550px;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .facilities .lead {
        font-size: calc(25em / 16);
        letter-spacing: 0.25em;
        padding: 40px 0 90px 0;
        line-height: 2.2;
        text-align: center;
    }
    .facilities .nav_facilities {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 90px;
    }
    .facilities .nav_facilities li {
        width: calc(180 / 1180 * 100%);
        text-align: center;
    }
    .facilities .nav_facilities li a {
        display: block;
        overflow: hidden;
        /*margin-bottom: 10px;*/
    }
    .facilities .nav_facilities li a img {
        transition:1s all;
        margin-bottom: 10px;
    }
    .facilities .nav_facilities li a:hover img {
        transform:scale(1.1,1.1);
        transition:1s all;
    }
    .facilities .cont1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        z-index: 0;
        margin-bottom: 135px;
    }
    .facilities #hiroba.cont1 {
        flex-direction: row-reverse;
    }
    .facilities .cont1 .title {
        width: 500px;
        padding-top: 40px;
    }
    .facilities #lounge.cont1 .title h2 img {
        width: 331px;
    }   
    .facilities #hiroba.cont1 .title h2 {
        width: 380px;
        margin: auto;
    }
    .facilities #hiroba.cont1 .title h2 img:nth-of-type(1) {
        width: 221px;
    }       
    .facilities #hiroba.cont1 .title h2 img:nth-of-type(2) {
        display: block;
        width: 272px;
        margin-left: auto;
        margin-top: 10px;
    }    
    .facilities .cont1 .title dl {
        margin-top: 40px;
    }
    .facilities .cont1 .title dl dt {
        font-size: calc(18em / 16);
        letter-spacing: 0.25em;
        line-height: 2.2;
    }
    .facilities #lounge.cont1 .title dl dt {
        padding: 0 100px;
    }
    .facilities #hiroba.cont1 .title dl dt {
        padding: 0 120px;
    }
    .facilities .cont1 .title dl dd {
        width: 50px;
        margin: 40px auto 0;
    }
    .arrowlink {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .arrowlink .hover {
        display: none;
    }
    .arrowlink:hover {
        background-color: #3b4b72 ;
        border: 1px solid #3b4b72;
        opacity: 1;
    }
    .arrowlink:hover .default {
        display: none;
    }
    .arrowlink:hover .hover {
        display: block;
    }
    .arrowlink img {
        width: 22px;
    }
    .cont3 .arrowlink1 {
        margin-top: -6px;
    }
    .facilities .cont1 .image {
        width: calc(100% - 500px);
        position: relative;
        z-index: 0;
    }
    .facilities .cont1 .image::before {
        content:  '';
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: -40px;
        z-index: -1;
    }
    .facilities #lounge.cont1 .image::before {
        background-color: #eaecf2;
        right: -40px;
    }
    .facilities #hiroba.cont1 .image::before {
        background-color: #f1e5dd;
        left: -40px;
    }
    .facilities .cont2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px solid #000;
        margin-bottom: 100px;
    }
    .facilities .cont2 li {
        width: calc(calc(100% / 2) - 10px);
        margin-bottom: 85px;
    }
    .facilities .cont2 li .image {
        overflow: hidden;
        margin-bottom: 20px;
    }
    .facilities .cont2 li .image img {
        transition:1s all;
    }
    .facilities .cont2 li:hover .image img {
        transform:scale(1.1,1.1);
        transition:1s all;
    }
    .facilities .cont2 li h2 {
        font-size: calc(28em / 16);
        font-weight: 700;
        letter-spacing: 0.1em;
        margin-bottom: 20px;
    }
    .facilities .cont2 li#gachamon h2 {
      margin-top: -10px;
        margin-bottom: 5px;
    }
    .facilities .cont2 li .text {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .facilities .cont2 li .text p {
        width: 380px;
        font-weight: 700;
        line-height: 1.8;
        letter-spacing: 0.13em;
    }
    .facilities .cont2 li .text span {
        margin-right: 50px;
    }
    .facilities .cont3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 90px;
    }
    .facilities .cont3 li {
        width: calc(calc(100% / 2) - 10px);
      margin-bottom: 50px;
    }
    .facilities .cont3 li h3 {
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .facilities .cont3 li h3 strong {
        font-size: calc(22em / 16);
        margin-left: 5px;
    }
    .facilities .cont3 li p {
        letter-spacing: 0.05em;
    }
    .facilities .cont3 li strong {
        font-weight: 700;
    }
    .facilities .cont3 li p + p {
        margin-top: 15px;
    }
    .facilities .yukata {
        background-color: #f5f5f5;
        padding: 60px 80px 70px 100px;
        margin-bottom: 150px;
    }
    .facilities .yukata h3 { 
        width: 580px;
        margin: 0 auto 50px;
        font-size: calc(20em / 16);
        letter-spacing: 0.2em;
        font-weight: 700;
        text-align: center;
        padding-bottom: 25px;
        border-bottom: 1px solid #666;
    }
    .facilities .yukata .inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .facilities .yukata .inner .image {
        width: 380px;
    }
    .facilities .yukata .inner .text {
        width: 370px;
    }
    .facilities .yukata .inner .text p {
        line-height: 1.8;
        letter-spacing: 0.05em;
    }
    .facilities .yukata .inner .text .price {
        font-size: calc(18em / 16);
        font-weight: 700;
        margin-top: 20px;
    }
    .arrowlink1 {
        font-weight: 700;
        display: flex;
    flex-wrap: wrap;
        align-items: center;
        margin-top: 25px;
    }
    .arrowlink1:hover {
        opacity: 1;
    }
    .arrowlink1 span {
        display: block;
        width: 40px;
        height: 40px;
        margin-left: 15px;
        border-radius: 50%;
        background-color: transparent;
        border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .arrowlink1 span img {
        width: 22px;
    }    
    .arrowlink1 span .hover {
        display: none;
    }
    .arrowlink1:hover span {
        background-color: #3b4b72 ;
        border: 1px solid #3b4b72;

    }
    .arrowlink1:hover span img {
        width: 20px;
    }
    .arrowlink1:hover span .default {
        display: none;
    } 
    .arrowlink1:hover span .hover {
        display: block;
    }
    
} 

/* SP
---------------------------------------------------------------------- */
@media (max-width: 1000px) {
    
    .sp_none {
        display: none;
    }
    .facilities img {
        width: 100%;
        height: auto;
    }
    
    #pageheader {
        width: 100%;
        height: calc(300 / 375 * 100vw);
    display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 0;
        /*margin-top: calc(50 / 375 * 100vw);*/
    }
    #pageheader h1 {
        color: #fff;
        font-size: calc(32em / 16);
        letter-spacing: 0.25em;
    }
    #pageheader h1 span {
        display: block;
        font-size: calc(15em / 32);
        letter-spacing: 0.23em;
        margin-top: calc(20 / 375 * 100vw);
    }
    #pageheader img {
        width: 100%;
        height: calc(300 / 375 * 100vw);
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .facilities .lead {
        font-size: calc(18em / 16);
        letter-spacing: 0.15em;
        padding: calc(35 / 375 * 100vw) 0 calc(40 / 375 * 100vw) 0;
        line-height: 2.2;
        text-align: center;
    }
    .facilities .cont1 {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: calc(35 / 375 * 100vw);
    }
    .facilities .cont1 .image {
        position: relative;
        z-index: 0;
        margin-bottom: calc(30 / 375 * 100vw);
    }
    .facilities .cont1 .image::before {
        content:  '';
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: calc(-15 / 375 * 100vw);
        z-index: -1;
    }
    .facilities #lounge.cont1 .image::before {
        background-color: #eaecf2;
        right: calc(-15 / 375 * 100vw);
    }
    .facilities #hiroba.cont1 .image::before {
        background-color: #f1e5dd;
        left: calc(-15 / 375 * 100vw);
    }
    .facilities #lounge.cont1 .title h2 {
        width: calc(231 / 375 * 100vw);
        margin: auto;
    }   
    .facilities #hiroba.cont1 .title h2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .facilities #hiroba.cont1 .title h2 img:nth-of-type(1) {
        width: calc(150 / 375 * 100vw);
    }       
    .facilities #hiroba.cont1 .title h2 img:nth-of-type(2) {
        width: calc(185 / 375 * 100vw);
    }    
    .facilities .cont1 .title dl {
        margin-top: calc(20 / 375 * 100vw);
    }
    .facilities .cont1 .title dl dt {
        font-size: calc(18em / 16);
        letter-spacing: 0.25em;
        line-height: 2.2;
    }
    .facilities .cont1 .title dl dt {
        text-align: center;
    }
    .facilities .cont1 .title dl dd {
        width: calc(50 / 375 * 100vw);
        margin: calc(20 / 375 * 100vw) auto 0;
    }
     .arrowlink {
        width: calc(50 / 375 * 100vw);
        height: calc(50 / 375 * 100vw);
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .arrowlink .hover {
        display: none;
    }
    .arrowlink:hover {
        background-color: #3b4b72 ;
        border: 2px solid #3b4b72;
        opacity: 1;
    }
    .arrowlink:hover .default {
        display: none;
    }
    .arrowlink:hover .hover {
        display: block;
    }
    .arrowlink img {
        width: calc(22 / 375 * 100vw);
    }
    .facilities .cont2 {
        border-bottom: 1px solid #000;
        padding-bottom: calc(20 / 375 * 100vw);
        margin-bottom: calc(60 / 375 * 100vw);
    }
    .facilities .cont2 li {
        margin-bottom: calc(30 / 375 * 100vw);
    }
    .facilities .cont2 li .image {
        overflow: hidden;
        margin-bottom: calc(15 / 375 * 100vw);
    }
    .facilities .cont2 li .image img {
        transition:1s all;
    }
    .facilities .cont2 li:hover .image img {
        transform:scale(1.1,1.1);
        transition:1s all;
    }
    .facilities .cont2 li h2 {
        font-size: calc(24em / 16);
        font-weight: 700;
        letter-spacing: 0.1em;
        margin-bottom: calc(10 / 375 * 100vw);
        text-align: center;
    }
    .facilities .cont2 li#gachamon h2 {
        width: calc(231 / 375 * 100vw);
        margin: auto;
    }   
    .facilities .cont2 li .text p {
        font-weight: 700;
        line-height: 1.8;
        letter-spacing: 0.13em;
    }
    .facilities .cont2 li .text span {
        margin: calc(20 / 375 * 100vw) auto 0;
    }
    .facilities .cont3 li {
        margin-bottom: calc(40 / 375 * 100vw);
    }
    .facilities .cont3 li h3 {
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-top: calc(15 / 375 * 100vw);
        margin-bottom: calc(5 / 375 * 100vw);
    }
    .facilities .cont3 li h3 strong {
        font-size: calc(22em / 16);
        margin-left: calc(5 / 375 * 100vw);
    }
    .facilities .cont3 li p {
        letter-spacing: 0.05em;
    }
    .facilities .cont3 li strong {
        font-weight: 700;
    }
    .facilities .cont3 li p + p {
        margin-top: calc(15 / 375 * 100vw);
    }
    .facilities .yukata {
        background-color: #f5f5f5;
        padding: calc(20 / 375 * 100vw) calc(35 / 375 * 100vw);
        margin-bottom: calc(50 / 375 * 100vw);
    }
    .facilities .yukata h3 { 
        font-size: calc(18em / 16);
        letter-spacing: 0.2em;
        font-weight: 700;
        text-align: center;
        padding-bottom: calc(20 / 375 * 100vw);
        border-bottom: 1px solid #666;
        margin-bottom: calc(20 / 375 * 100vw);
    }
    .facilities .yukata .inner .image {
        margin-bottom: calc(15 / 375 * 100vw);
    }
    .facilities .yukata .inner .text p {
        line-height: 1.8;
        letter-spacing: 0.05em;
    }
    .facilities .yukata .inner .text .price {
        font-size: calc(18em / 16);
        font-weight: 700;
        text-align: center;
        margin-top: calc(20 / 375 * 100vw);
    }
    .facilities .yukata .inner .text .arrowlink1 {
        margin-top: calc(25 / 375 * 100vw);
    }
    .arrowlink1 {
        font-weight: 700;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .arrowlink1:hover {
        opacity: 1;
    }
    .arrowlink1 span {
        display: block;
        width: calc(40 / 375 * 100vw);
        height: calc(40 / 375 * 100vw);
        margin-left: calc(15 / 375 * 100vw);
        border-radius: 50%;
        background-color: transparent;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .arrowlink1 span .hover {
        display: none;
    }
    .arrowlink1:hover span {
        background-color: #3b4b72 ;
        border: 1px solid #3b4b72;
    }
    .arrowlink1 span img {
        width: calc(20 / 375 * 100vw);
    }
    .arrowlink1:hover span .default {
        display: none;
    } 
    .arrowlink1:hover span .hover {
        display: block;
    }
}