@charset "utf-8";

/* =====================
common 
========================*/

html {
    font-size: 62.5%;
}

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


body {
    background: linear-gradient(90deg, #EDEFF5 0%, #FAEDFA 100%);
    font-style: normal;
    font-weight: 400;
}

.containerDetail {
    margin: 0 auto;
}

:root {
    --primary-white: #FFFBF8;
    --pale-blue: #6F84C3;
    --gray_beige: #F0EBEF;
    --navy: #2D3E74;
    --blue-gray: #6E7794;
    --lilac-pink: #EFE0EE;
    --pale-lightBlue: #758ED8;
    --btn-darkBlue:#909FCD;
}

h1 {
    color: var(--navy, #2D3E74);
    font-family: "Italiana", sans-serif;
    font-size: 11.3vw;
    line-height: 1;
}

h2 {
    color: var(--blue-gray);
    font-family: "Italiana", sans-serif;
    font-size: 4.2rem;
    line-height: 1;
}

h3 {
    font-size: 2.0rem;
    font-weight: 500;
}

h4 {
    font-family: "Quicksand", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
}

.bg2top, .bg3top, .bg4top {
    margin:180px auto 0;
}

.pc_scroll {
 display: none;
}


/* ======
Header
========= */

.header {
    text-align: end;
    padding: 35px;
}

/* nav初期表示 以下ハンバーガー後ほど*/
.nav {
    background: linear-gradient(90deg, #EDEFF5 0%, #FAEDFA 100%);
    /* 画面いっぱいに広がって欲しい指示 */
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    /* 一番手前に来て欲しい設定 */
    z-index: 10000;
    /* 普段はこの本体（100％）分左に隠れてて欲しい指示*/
    transform: translateX(-100%);
    /* 出てくる時にゆっくりして欲しい、ただしtransformにだけ効いてほしい */
    transition: transform 0.5s;
}

.nav__header {
    max-height: 60px;
    padding: 19px 8% 19px;
    display: flex;
    justify-content:end;
    align-items: center;
}


.bgnavtop,.bgnavbtm {
    opacity: 0.9;
}
.nav__topic {
    background-color: var(--primary-white);
    opacity: 0.9;

}

.nav__list {
    margin-top: -1px;
    padding: 0px 22.3vw 0px 16.6vw;
    text-align: left;
}

.nav__item,
.nav__subitem {
    color: #8090c0;
}


.nav__item {
    font-family: Cormorant, serif;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1; 
    margin-top: 25px;
    letter-spacing: 0.11em;
}

.nav__item:first-of-type{
    margin-top: 0;
}

.nav__item--parent {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.nav__subitem {
    margin: 16px 0px 0px 31px;
    font-size: 2.0rem;
    line-height: 1.625em;
}

.nav__item--parent :first-of-type{
    margin-top: 0px;
}

.reserveMark{
    position: relative;
}

.reserveMark::after {
    position: absolute;
    content: '';
    display: inline-block;
    width: min(2.6vw,10px);
    aspect-ratio: 1/1;
    top: 14px;
    right: -11px;
    background-image:url(../img/reserveBtn.png) ;
    background-size: contain;
    background-repeat: no-repeat;
}

/* カレント表示・追加部分 */
.nav__link.is-active {
    color: var(--navy);
    font-weight: bold; /* アクティブなリンクを太字に */
    position: relative; /* 擬似要素の位置を調整するために追加 */
}

.nav__link.is-active::before {
    content: '⚫︎'; /* 擬似要素の内容を●に設定 */
    color:  var(--navy); /* ●の色をリンクと同じ赤に設定 */
    position: absolute; /* ●をリンクの前に配置 */
    left: -25px;
    top: 50%;
    transform: translateY(-20%);
    font-size: 0.5em;
    line-height: 1;
}

/*=============================
ハンバーガーボタン　.btn-trigger
=============================*/
.btnShape {
    position: fixed;
    top: 2%;
    right: 3%;
    z-index: 10000;
    background-color: rgba(250, 237, 250, 0.8);
    opacity: 0.7;
    padding-top: min(4.5vw, 20px);
    padding-right: min(4.5vw, 19px);
    padding-bottom: min(4.5vw, 20px);
    padding-left: min(4.5vw, 19px);
    border-radius: 100%;
}

.btn-trigger {
    position: relative;
    width: min(5.8vw, 23px);
    height: 18px;
    cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--btn-darkBlue);
  border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0%;
}
.btn-trigger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%); /* 要素の高さの半分だけ上に移動させて中央揃え */

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


/*=============================
#btn01
=============================*/
#btn01.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
#btn01.active span:nth-of-type(2) {
  opacity: 0;
}
#btn01.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}


/* ハンバーガーここまで */

.nav.active{
    transform: translateX(0);
}

/* ===============
Main
================== */
.backGroudSecond {
    background-color: var(--gray_beige);
    padding-bottom: 33px;
}

.backGroudThird {
    background: var(--lilac-pink);
    padding-bottom: 33px;

}

.backGroudForth{
    background-color: var(--primary-white);
    padding:70px 0;
}

/* ===============
ボタン
================== */

.btntoMenu,
.btntoBlog,
.btntoReserve,
.btntoInfo {
    width: 76.2vw;
    max-width: 286px;
    height: auto;
    border-radius: 30px;

    /* btn NAVY shadow */
    box-shadow: 2px 4px 5px 0px rgba(110, 119, 148, 0.20);
    
    transition: all 0.3s ease; 
}

.btntoMenu{
    margin: 88px auto 0;
    background: #C4BFD9;
}

.btntoBlog {
    margin: 50px auto 0;
    background: #C4BFD9;

}


.btntoReserve,
.btntoInfo {
    margin: 0 auto;
    background: #FAC0C1;
}

.btntoInfo {
    margin: 70px auto 0;

}

.btntoMenu p,
.btntoBlog p,
.btntoReserve p,
.btntoInfo p {
    margin:0 auto;
    padding: 18px 0;
    text-align: center;
    color: var(--navy);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.04em;
    position: relative;
    width: fit-content;
}

.btntoReserve p,
.btntoInfo p{
    color: var(--primary-white);
}

.btntoMenu p::after,
.btntoBlog p::after,
.btntoReserve p::after,
.btntoInfo p::after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 6px;
    height: 10.8px;
    top: 24px;
    right: -21px;
    background: url(../img/btnPoint_dark.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.btntoReserve p::after,
.btntoInfo p::after  {
    background: url(../img/btnPoint_white.png);
    right: -69px;

}

.btntoBlog p::after {
    right: -60px;

}

.btntoBlog__announce,
.btntoReserve__announce,
.btntoInfo__announce {
    margin-top: 7px;
    font-family: "Quicksand", sans-serif;
    text-align: center;
    color: var(--navy);
    font-size: 1.2rem;
    line-height: 1.916;
    letter-spacing: 0.11em;
}

.btntoReserve__announce {
    margin-top: 5px;
}


/* ボタンの動き */

@media (hover: none) {
    .btntoMenu:active {
        background-color: rgba(255,251,248, 0.3);

    }

    .btntoBlog:active,
    .btntoInfo:active {
        background-color: rgba(255,251,248, 0.3);

    }

    .btntoReserve:active{
        background-color: rgba(239 , 224, 238);

    }
}



/* ===============
reservation BTN限定
================== */
.reservation-button {
  position: fixed;
  padding: 2vw 0;
  background-color:  rgba(255, 251, 248, 0.7);
  width: 100%;
  bottom: 0vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  text-align: center;
}



/* ===============
Footer
================== */
.footer {
    margin-top: 80px;
    padding: 60px min(4.26vw,16px) 0;
}

.footer__title {
    width: 200px;
    height: auto;
}

.footer__nav {
    margin: 50px 0 90px;
}

.footer__nav-list {
    color: var(--navy);
    font-family: Cormorant, serif;
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.11em;
    display: flex;
    flex-direction: column;
    gap: 3.0rem;
}



.footer__nav-link:hover {
    transition: color 0.3s ease;
    text-decoration:underline solid 1px;
    color: #4a6fb1;
}

.footer__copyright {
    color: var(--navy);
    font-family: "Shippori Mincho";
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;

    padding: 0 0 24px;

}

/* ==============＝＝＝＝＝＝=
スクロール・ページトップボタンの設定
============================= */
.sp_scroll {
    display: block;
}

.scroll-top {
  /*表示位置*/
  position: fixed;
  right: min(4.26vw,16px);
  /* right: 20px; */
  top: 66%; 
  transform: translateY(-50%); /* 要素の高さの半分だけ上に移動させて中央揃え */
  /* bottom: 10px; */
  z-index: 800;
  /*はじめは非表示*/
  opacity: 0;
  visibility: hidden; 
  transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
  /*縦書き*/
  -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  /*改行禁止*/
    white-space: nowrap;
  /*矢印の動き*/
  animation: arrowmove 1.5s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
}


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
  opacity: 1;
  visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
    text-decoration: none;
    color: var(--blue-gray);
    font-family: Cormorant, serif;
    /* text-transform: uppercase; */
    font-size:1.8rem;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll a::after,
.js-scrollPC a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:var(--blue-gray);
}

.js-scroll a::before,
.js-scrollPC a::before {
    content: "";
    position: absolute;
    top: 37px;
    right: -4px;
    width: 1px;
    height: 14px;
    background: var(--blue-gray);
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
  right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after,
.js-pagetopPC a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:var(--blue-gray);
}

.js-pagetop a::before,
.js-pagetopPC a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -4px;
    width: 1px;
    height: 14px;
    background: var(--blue-gray);
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
  right:0;
}


/* ==============＝＝＝＝＝＝=
Responsive styles
============================= */

@media screen and (max-width: 350px) {
    .btntoMenu p,
    .btntoBlog p,
    .btntoReserve p,
    .btntoInfo p {
        margin:0 auto;
        padding: 18px 0;
        font-size: 1.5rem;
    }

}




@media screen and (min-width: 520px) {
    body {
        background: linear-gradient(135deg, #faedfa 0%, #f0d6f0 30%, #dadfea 55%, #faedfa 100%);
        animation: gradationAnim 20s ease-in-out infinite;
        background-size: 400% 400%;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
        padding: 0;
    }
        @keyframes gradationAnim {
            0% { background-position: 0% 50% }
            50% { background-position: 100% 50% }
            100% { background-position: 0% 50% }
        }

    
    .page {
        background: linear-gradient(90deg, #EDEFF5 0%, #FAEDFA 100%);
        width: 375px;
        /* height: 100vh; */
        height: auto;
        overflow-y: auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .scroll-top {
        right: min(6.26vw,40px);
        top: 66%; 
    }

    /*リンク全体の aタグの形状*/
    .scroll-top a {
        font-size: clamp(2.4rem, 1.19vw + 1.468rem, 3.2rem);
    }

}


@media screen and (min-width: 620px) {
    .btnShape {
        right: min(6vw, 60px);
    }

    .scroll-top {
        right: min(8vw,60px);
    }

}


@media screen and (min-width: 768px) {
    body {
        justify-content: end;
        align-items: flex-start;
        min-height: 100vh;
        padding: 0;
    }

    .page {
        /* margin-right: 15vw; */
        margin-right:-20vw;
    }

    .header {
        padding: 35px;
    }

    .nav {
        background: unset;
        width: min(23vw,270px);
        height: 100vh;
        position: fixed;
        top: 0;
        left: -4vw;
        transform: translateX(50%); /* 要素の半分だけ右に移動 */
        z-index: 1000;
        transition: transform 0.5s;
    }


    .nav__header {
        max-height: 60px;
        padding: 8vw 0 0;
        display: flex;
        justify-content:end;
        align-items: center;
    }


    .bgnavtop,.bgnavbtm {
        display: none;
    }


    .nav__topic {
        background-color: unset;
    }

    .nav__list {
        margin-top: 0;
        padding: 0;
        text-align: left;
    }


    .nav__item {
        margin-top: 2.7vw;
        font-size: clamp(2.4rem, 1.19vw + 1.468rem, 3.2rem);
        transition: all 2s ease-in-out;
    }

    .nav__item:first-of-type{
        margin-top: 0;
    }

    .nav__item--parent {
        display: flex;
        /* display:block */
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .nav__subitem {
        margin: 1.5vw 0px 0px 0px;
        font-size:clamp(1.8rem, 0.893vw + 1.114rem, 2.4rem);
    
    }

    .nav__item--parent :first-of-type{
        margin-top: 0;
    }

    .btnShape {
        display: none;
    }

    .reserveMark::after {
        top: 13px;
        right: -12px;
    }

    .btn-trigger {
        display: none;

    }
    
    .reservation-button {
        display: none;

    }

    .nav__link.is-active::before {
        left: -15px;
    }


    .scroll-top {
        top:86%;
        right: max(calc(42vw - 375px), 64px);
    }

}

@media screen and (min-width: 1001px) {
    .nav {
        left: 0vw;
    }

    .nav__link.is-active::before {
        left: -25px;
    }

}



@media screen and (min-width: 1440px) {
    .nav {
        left: 10vw;
    }

}



@media screen and (min-width: 1800px) {
    .nav {
        left: 18vw;
    }

}

@media screen and (min-width: 2000px) {
    .nav {
        left: 20vw;
    }
}

@media screen and (min-width: 2400px) {
    .nav {
        left: 25vw;
    }
}