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

/* PC
---------------------------------------------------------------------- */
@media (min-width: 1001px) {

    .pc_none {
        display: none;
    }


/* pageheader
---------------------------------------------------------------------- */
    #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;
    }


/* staffProf
---------------------------------------------------------------------- */
    #staffProf {
        background: #41527d;
        padding: 70px 0;
        color: #FFF;
    }
    #staffProf .staffName {
        text-align: center;
        margin-bottom: 45px;
        font-size: 36px;
        letter-spacing: 2px;
        line-height: 1;
    }
    #staffProf .staffName span {
        font-size: 21px;
        letter-spacing: 0.5px;
        font-family: "bahnschrift", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    #staffProf .workPosition {
        text-align: center;
        font-size: 27px;
    }



/* episode
---------------------------------------------------------------------- */
    #episode {
        padding: 150px 0 0;
    }
    #episode {
        padding: 150px 0 0;
    }
    .epBox {
        display: flex;
        justify-content: space-between;
        margin-bottom: 150px;
    }
    .epBox .txt {
        width: 36.364%;
    }
    .epBox .txt h4 {
        font-size: 21px;
        line-height: 1.5;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .epBox .txt p {
        font-size: 18px;
        line-height: 2;
    }
    .epBox .txt.half36 {
        width: 36.364%;
    }
    .epBox .txt.half64 {
        width: 64.546%;
    }
    .epBox .txt.half56 {
        width: 56.364%;
    }
    .epBox .img.half56 {
        width: 56.364%;
    }
    .epBox .img.half28 {
        width: 28.182%;
    }
    .epBox .img.half36 {
        width: 36.364%;
    }
    .ep1 {
        flex-direction: row-reverse;
    }
    .ep1 .txt {
        margin-right: 3.364%;
    }
    .ep2 {
        flex-direction: row;
    }
    .ep2 .txt {
        margin-left: 3.364%;
    }


/* message
---------------------------------------------------------------------- */
    #message {
        padding: 70px 0 0;
        margin-bottom: 200px;
    }
    #message .messageTtl {
        font-size: 21px;
        font-weight: bold;
        margin-bottom: 30px;
    }
    #message p {
        font-size: 18px;
        line-height: 1.8;
    }


/* private
---------------------------------------------------------------------- */
    #private {
        margin-bottom: 110px;
    }
    .privateBox {
        background: #8bb3d6;
        padding: 40px 40px 40px 20px;
        display: flex;
        justify-content: space-between;
        border-radius: 20px;
        width: 1050px;
        margin-left: auto;
        margin-right: auto;
    }
    .privateBox.privateBox1 {
        flex-direction: row-reverse;
        align-items: center;
    }
    .privateBox.privateBox2 {
        flex-direction: row;
        align-items: center;
    }
    .privateBox .txt {
        width: 68.687%;
    }
    .privateBox .txt h4 {
        font-size: 25px;
        padding-bottom: 5px;
        margin-bottom: 55px;
    }
    .privateBox .txt h4 span {
        border-bottom: 1px solid #231815;
        position: relative;
    }
    .privateBox .txt h4 span::after {
        content: "";
        display: inline-block;
        width: 12px;
        height: 20px;
        background: url("../images/bg_private01.svg") center no-repeat;
        background-size: contain;
        position: absolute;
        bottom: -20px;
        left: 60px;
    }
    .privateBox .txt p {
        font-size: 18px;
        line-height: 1.8;
    }
    .privateBox .img {
        width: 25.455%;
        overflow: hidden;
    }
    .privateBox .img img {
        border-radius: 50%;
    }


/* schedule
---------------------------------------------------------------------- */
    #schedule {
        padding: 90px 0;
        background-color: #dcdddd;
    }
    #schedule h3 {
        font-size: 25px;
        line-height: 2;
        margin-bottom: 30px;
        text-align: center;
    }
    #schedule h3 span {
        font-size: 33px;
        color: #4f68ac;
        font-family: "bahnschrift", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    #schedule .img {
        width: 795px;
        margin: auto;
        text-align: center;
    }
    #schedule .img .scheduleNote  {
        margin-top: 20px;
        text-align: right;
    }



    .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;
    }


} /* End PC */


/* ---------------------------------------------------------------------- */


/* SP
---------------------------------------------------------------------- */
@media (max-width: 1000px) {

    .sp_none {
        display: none;
    }
    .matters 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;
    }



/* staffProf
---------------------------------------------------------------------- */
    #staffProf {
        background: #41527d;
        padding: 16vw 0;
        color: #FFF;
    }
    #staffProf .staffName {
        text-align: center;
        margin-bottom: 8vw;
        font-size: 7vw;
        letter-spacing: 0.2vw;
        line-height: 1;
    }
    #staffProf .staffName span {
        font-size: 3.3vw;
        letter-spacing: 0.2vw;
        font-family: "bahnschrift", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    #staffProf .workPosition {
        text-align: center;
    }


/* episode
---------------------------------------------------------------------- */
    #episode {
        padding: 16vw 0 0;
    }
    .epBox {
/*        display: flex;
        justify-content: space-between;*/
        margin-bottom: 16vw;
    }
    .epBox .txt {
        margin-bottom: 8vw;
    }
    .epBox .txt h4 {
        font-size: 4.6vw;
        line-height: 1.5;
        font-weight: bold;
        margin-bottom: 6vw;
    }
    .epBox .txt p {
        line-height: 2;
    }
/*    .epBox .img {
        width: 56.364%;
    }
    .epBox .img.half {
        width: 28.182%;
    }
    .epBox .img.half2 {
        width: 31.819%;
    }
    .ep1 {
        flex-direction: row-reverse;
    }
    .ep1 .txt {
        margin-right: 3.364%;
    }
    .ep2 {
        flex-direction: row;
    }
    .ep2 .txt {
        margin-left: 3.364%;
    }
*/


/* message
---------------------------------------------------------------------- */
    #message {
        padding: 16vw 0 0;
        margin-bottom: 16vw;
    }
    #message .messageTtl {
        font-size: 5vw;
        font-weight: bold;
        margin-bottom: 6vw;
    }
    #message p {
/*        font-size: 18px;*/
        line-height: 1.8;
    }


/* private
---------------------------------------------------------------------- */
    #private {
        margin-bottom: 16vw;
    }
    .privateBox {
        width: 82vw;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        background: #8bb3d6;
        padding: 4vw;
/*        display: flex;
        justify-content: space-between;*/
        border-radius: 6vw;
/*        width: 1050px;
        margin-left: auto;
        margin-right: auto;*/
    }
/*    .privateBox.privateBox1 {
        flex-direction: row-reverse;
        align-items: center;
    }*/
/*    .privateBox.privateBox2 {
        flex-direction: row;
        align-items: center;
    }*/
/*    .privateBox .txt {
        width: 68.687%;
    }*/
    .privateBox .txt h4 {
        font-size: 5vw;
        padding-bottom: 2vw;
        margin-bottom: 6vw;
    }
    .privateBox .txt h4 span {
        border-bottom: 1px solid #231815;
        position: relative;
    }
    .privateBox .txt h4 span::after {
        content: "";
        display: inline-block;
        width: 1.2vw;
        height: 0.2vw;
        background: url("../images/bg_private01.svg") center no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 0;
        left: 3em;
    }
    .privateBox .txt p {
/*        font-size: 18px;*/
        line-height: 1.8;
    }
    .privateBox .img {
        width: 50%;
        margin: auto;
        overflow: hidden;
    }
    .privateBox .img img {
        border-radius: 50%;
    }


/* schedule
---------------------------------------------------------------------- */
    #schedule {
        padding: 8vw 0;
        background-color: #dcdddd;
    }
    #schedule h3 {
        font-size: 4vw;
        line-height: 2;
        margin-bottom: 6vw;
        text-align: center;
    }
    #schedule h3 span {
        font-size: 5vw;
        color: #4f68ac;
        font-family: "bahnschrift", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    #schedule .img {
        text-align: center;
    }

























/* mission
---------------------------------------------------------------------- */
    #mission {
        padding: 16vw 0;
    }
    #mission .ch3_5 {
        text-align: center;
    }
    #mission .ch3_5 + p {
        text-align: center;
        font-weight: bold;
        margin-bottom: 10vw;
    }
    #mission .img {
        text-align: center;
    }
    #mission .img img {
    }



/* philosophy
---------------------------------------------------------------------- */
    #philosophy {
        padding: 16vw 0;
    }
    #philosophy .ch3_6{
        text-align: center;
        margin-bottom: 8vw;
    }
    #philosophy .subch {
        transform: rotate(-30deg);
        position: absolute;
        right: -3vw;
        bottom: 0;
        z-index: 10;
    }
    #philosophy p {
/*        font-size: 33px;*/
        line-height: 2;
        letter-spacing: 0.2vw;
        text-align: center;
        margin-bottom: 8vw;
    }


/* vision
---------------------------------------------------------------------- */
    #vision {
        padding: 16vw 0;
    }
    #vision .ch3_6{
        text-align: center;
        margin-bottom: 8vw;
    }
    #vision .subch {
        transform: rotate(-30deg);
        position: absolute;
        right: -3vw;
        bottom: 0;
        z-index: 10;
    }
    #vision p {
/*        font-size: 33px;*/
        line-height: 2;
        letter-spacing: 2.48px;
        text-align: center;
        margin-bottom: 8vw;
    }


/* guidelines
---------------------------------------------------------------------- */
    #guidelines {
        padding: 16vw 0;
        background: url("../images/bg_mission.jpg") center no-repeat;
        background-size: cover;
    }
    #guidelines .midashiWrap {
        margin-bottom: 10vw;
    }
    #guidelines .ch3_6{
        text-align: center;
        margin-bottom: 12vw;
    }
    #guidelines .subch {
        transform: rotate(-30deg);
        position: absolute;
        right: -3vw;
        bottom: 0;
        z-index: 10;
    }
    #guidelines .iconList {
/*        padding: 0 2%;*/
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 2%;
    }
    #guidelines .iconList li {
        background: #FFF;
        display: flex;
        flex-direction: column;
        width: 49%;
/*        min-height: 380px;*/
        padding: 2em 0.5em;
        margin-bottom: 2vw;
    }
    #guidelines .iconList li .img {
        width: 70%;
        height: 35vw;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 4vw;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #guidelines .iconList li .img img {
        object-fit: contain;
    }
    #guidelines .iconList li .txt {
        text-align: center;
        color: #231815;
    }
    #guidelines .iconList li .txt h4 {
        font-size: 4.5vw;
        text-align: left;
        margin-bottom: 2vw;
    }
    #guidelines .iconList li .txt p {
        font-size: 3.6vw;
        text-align: left;
    }















































    .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 .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;
    }
}