@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Sawarabi+Mincho&display=swap');

* {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.05rem;
  font-family: YakuHanMP, 'Noto Serif JP',serif;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
  text-align: justify;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

html {font-size: 16px;}

body {color: #2b2f34;line-height: 1.5;}
a:link, a:visited, a:hover, a:active {color: #5893db;}
.layer{color: #000;}
.tate{writing-mode: vertical-rl;font-family: 'Noto Serif JP',serif;}
sup{vertical-align: baseline;}
.tx_center{text-align: center;}

img{animation-name: blur;}

.cap.b_r{text-align: right;margin-top: 0.5em;}
.cap.b_c{text-align: center;margin-top: 0.5em;}
.cap.b_r_w{text-align: right;margin-top: 0.5em;padding-right: 1em;}
.cap.b_pr0{position: absolute;right: 0;bottom: 0;}
.cap.wb{position: absolute;right: 0.7em;bottom: 0.7em;color: #fff;text-shadow: 0px 0px 2px rgba(0,0,0,0.7),0px 0px 3px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7);z-index: 1;}
.cap.wbl{position: absolute;left: 0.7em;bottom: 0.7em;color: #fff;text-shadow: 0px 0px 2px rgba(0,0,0,0.7),0px 0px 3px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7),0px 0px 2px rgba(0,0,0,0.7);z-index: 1;}
.cap.tw{position: absolute;right: 0.7em;bottom: 0.7em;color: #fff;font-weight: 700;z-index: 1;}
.cap.tb{position: absolute;right: 0.7em;bottom: 0.7em;color: #000;z-index: 1;}

@media screen and (max-width: 768px) {
.pc{display: none!important;}
.wrap1024{max-width: 100%;padding: 0 4vw;}
.contents_wrap{padding: 0 8vw;}
.note{font-size: 2.2vw;line-height: 1.7;}
.cap{font-size: 2.2vw!important;}
}

@media screen and (min-width: 769px) {
.sp{display: none!important;}
.contents_wrap{max-width: 1060px; padding: 0 30px;margin: 0 auto;}
.wrap{max-width: 1060px; padding: 0 30px;margin: 0 auto;}
.note{font-size: 13px;line-height: 1.5;}
.cap{font-size: 13px!important;}
.cap.b_r_w{padding-right: 0;}
}

/*||||||||||||||||| ヘッダー＆メニュー |||||||||||||||||*/
header{padding: 5vw 0 0 5.5vw;width: 100%;z-index: 1000000;position: fixed;left: 0;top: 0;transition: 0.5s all;}
header.active{background:rgba(0,0,0,0.4);box-shadow: 0 1vw 7vw 7vw rgba(0,0,0,0.4);}
header h1{z-index: 10;}
header h1 img{width: 72vw;}
header.active h1 img{filter: drop-shadow(0 0 0.05em rgba(0,0,0,0.4)) drop-shadow(0 0 0.05em rgba(0,0,0,0.4)) drop-shadow(0 0 0.05em rgba(0,0,0,0.4));}
.h_active h1{display: block!important;}

/*ハンバーガーメニュー*/
header .hb_menu{position: absolute;top: 2vw;width: 7vw;height: 5vw;right: 5vw;z-index: 990;left: auto;cursor: pointer;}
header .menu_bk{position: absolute;width: 150%;height: 180%;background: rgba(0,0,0,0.5);top: -40%;left: -25%;opacity: 0;visibility: hidden;}
header.menu_active .menu_bk{opacity: 1;visibility: visible;transition: all 2s;}
.h_active .menu_bk{background: none;}
header .hb_menu i{display: block;height: 2px!important;width: 100%!important;transition: all 0.3s;background: #fff;position: absolute!important;left: 0!important;}
header .hb_menu i.i1{top:0!important;}
header .hb_menu i.i2{top:calc(50% - 1px)!important;}
header .hb_menu i.i3{top:auto!important;bottom:0!important;}

.h_active .hb_menu i.i1{transform:rotate(-135deg);top:calc(50% - 1px)!important;}
.h_active .hb_menu i.i3{transform:rotate(135deg);top:calc(50% - 1px)!important;}
.h_active .hb_menu i.i2{display: none;}

header .menu{background: linear-gradient(140deg, #696a69 0%, #111211 100%);padding: 15vw 4vw;height: 100%;width: 100vw;position: fixed;top: 0;left: 0;opacity: 0;pointer-events: none;transform: translateY(-5%);transition: 0.3s all;}
.h_active header .menu{opacity: 1;pointer-events: painted;transform: translateY(0);}
header .menu_item{display: flex;justify-content: space-between;flex-wrap: wrap;}
header .menu_item > a{width: 47%;font-size: 3.8vw;padding: 4vw 3vw;background: rgba(255,255,255,0.07);margin-top: 5vw;border-bottom: 2px solid rgba(255,255,255,0.3);}
header .menu_item > a span{color: #fff;}
header .menu_item > a small{font-size: 0.7em;display: block;color: rgba(255,255,255,0.5)}

#top header .menu_item > a[href$="./"],
#position header .menu_item > a[href$="./position/"],
#location header .menu_item > a[href$="./location/"],
#garden header .menu_item > a[href$="./garden/"],
#design header .menu_item > a[href$="./design/"],
#zeh header .menu_item > a[href$="./zeh/"],
#plan header .menu_item > a[href$="./plan/"],
#access header .menu_item > a[href$="./access/"],
#map header .menu_item > a[href$="./map/"],
#outline header .menu_item > a[href$="./outline/"]
{background: rgba(255,255,255,0.2);pointer-events: none;}


@media screen and (min-width: 769px) {
header{padding: 30px 0 0 30px;}
header.active{box-shadow: 0 10px 30px 30px rgba(0,0,0,0.4);}
header h1{z-index: 10;}
header h1 img{width: 425px;}

/*ハンバーガーメニュー*/
header .hb_menu{position: absolute;top: 0;width: 30px;height: 23px;right: 40px;}
header .hb_menu i{height: 1px!important;}

header .menu{padding: 100px 30px;width: 100%;}
header .menu_item{max-width: 1000px;margin: 0 auto;justify-content: flex-start;}
header .menu_item > a{width: 30%;font-size: 16px;padding: 20px 10px 20px 20px;margin-top: 20px;margin-right: 3.5%;}
header .menu_item > a:nth-of-type(3n){margin-right: 0;}
header .menu .entry{margin-top: 60px;max-width: 500px;padding: 30px 20px;}
header .menu .entry p{font-size: 24px;}
header .menu .entry a{font-size: 20px;}
}


/*エントリーボタン*/
.entry{background: #939186;margin: 0 auto;width: 88vw;padding: 5vw 2vw;animation-name: fadeInUp;}
.entry p{color: #fff;text-align: center;font-size: 5.6vw;letter-spacing: 0.1em;padding-left: 0.1em;}
.entry p small{font-size: 0.8em;vertical-align: 0.01em;}
.entry::before{content: "";display: block; width: calc(100% - 3vw);height: calc(100% - 3vw);border: 1px solid #fff;position: absolute;top:0;bottom:0;left:0;right: 0;margin: auto;z-index: 1;pointer-events: none;}
.entry a{color: #fff;display: block;width: 84%;margin: 2.5vw auto 0;font-size: 3.9vw;text-align: center;background: #595757;padding: 3vw 0 3vw 0.1em;}
.entry a.reservation_btn{background: linear-gradient(to right,#4b060c,#70161a);}

@media screen and (min-width: 769px) {
.entry{width: auto;max-width: 800px;padding: 35px 20px;}
.entry p{font-size: 32px;}
.entry::before{width: calc(100% - 10px);height: calc(100% - 10px);}
.entry a{width: 300px;margin: 15px auto 0;font-size: 24px;padding: 12px 0 12px 0.1em;transition: 0.3s all;}
.entry a:hover{opacity: 0.6;}
}


/*フッター*/
.footer_link{display: flex;background: #000;padding: 3vw 0;}
.footer_link a{color: #fff;padding: 1.5vw 0;width: 50%;font-size: 3.5vw;line-height: 1;}
.footer_link a:nth-of-type(1){padding-left: 9vw;}
.footer_link a:nth-of-type(1)::before{content: "";width: 3vw;height: 1px;background: rgba(255,255,255,1);display: inline-block;vertical-align: 0.4em;margin-right: 0.7em;}
.footer_link a:nth-of-type(2){border-left: 1px solid rgba(255,255,255,0.7);text-align: right;padding-right: 9vw;}
.footer_link a:nth-of-type(2)::after{content: "";width: 3vw;height: 1px;background: rgba(255,255,255,1);display: inline-block;vertical-align: 0.4em;margin-left: 0.7em;}
footer{padding-bottom: 5vw;color: #000;}
address{background: #313232;padding: 10vw;color: #fff;font-size: 3.1vw;}
address a{color: #fff!important;display: block;}
address .tel{font-size: 1.8em;letter-spacing: 0.15em;margin: 0.7em 0;}
address .tel::before{content: "";width: 0.8em;height: 0.8em;background: url("../img/tel_i_w.svg") no-repeat center center/contain;display: inline-block;margin-right: 0.5em;}
address p{font-size: 0.9em;}
address .map_btn{margin-top: 2.5em;}
address .map_btn::before{content: "";width: 1.27em;height: 1.27em;background: url("../img/map_i.svg") no-repeat center center/contain;display: inline-block;margin-right: 0.7em;vertical-align: -0.2em;}
address .gaiyo_btn{margin-top: 1.5em;}
address .gaiyo_btn::before{content: "";width: 1.27em;height: 1.27em;background: url("../img/gaiyo_i.svg") no-repeat center center/contain;display: inline-block;margin-right: 0.7em;vertical-align: -0.2em;}
address .about_btn{margin-top: 1.5em;}
address + .contents_wrap{margin-top: 7vw;}

.river_logo{width: 51vw;margin: 7vw auto 0;}
.river_logo p{font-size: 2.1vw;}
.copyright{font-size: 2.3vw;text-align: center;letter-spacing: 0;border-top: 1px solid #888;width: 90vw;margin: 6vw auto 0;padding-top: 5vw;}


@media screen and (min-width: 769px) {
.footer_link{padding: 10px 0;justify-content: center;}
.footer_link a{padding: 7px 0;font-size: 16px;max-width: 500px;transition: 0.3s all;}
.footer_link a:nth-of-type(1){padding-left: 50px;}
.footer_link a:nth-of-type(1)::before{width: 30px;vertical-align: 0.4em;margin-right: 1em;}
.footer_link a:nth-of-type(2){text-align: right;padding-right: 50px;}
.footer_link a:nth-of-type(2)::after{width: 30px;vertical-align: 0.4em;margin-left: 1em;}
.footer_link a:hover{opacity: 0.6;}
footer{padding-bottom: 50px;}
.address_wrap{display: flex;flex-wrap: wrap;justify-content: space-between; max-width: 530px;margin: 0 auto;}
address{padding: 50px 30px;font-size: 15.5px;}
address .inquiry{width: 100%;}
address .tel{font-size: 1.9em;letter-spacing: 0.1em;margin: 5px 0 0 0;pointer-events: none;}
address .map_btn{margin: 1.5em 25px 0 auto;}
address .map_btn::before{content: "";width: 1.27em;height: 1.27em;background: url("../img/map_i.svg") no-repeat center center/contain;display: inline-block;margin-right: 0.7em;vertical-align: -0.2em;}
address .gaiyo_btn{margin: 1.5em auto 0 25px;}
address .gaiyo_btn::before{content: "";width: 1.27em;height: 1.27em;background: url("../img/gaiyo_i.svg") no-repeat center center/contain;display: inline-block;margin-right: 0.7em;vertical-align: -0.2em;}
address .about_btn{margin-top: 1.5em;}
address + .contents_wrap{margin-top: 50px;}
address .map_btn,
address .gaiyo_btn{transition: 0.3s all;}
address .map_btn:hover,
address .gaiyo_btn:hover{opacity: 0.6;}

.river_logo{width: 420px;margin: 50px auto 0;}
.river_logo p{font-size: 14px;margin-bottom: 10px;}
.river_logo a{transition: 0.3s all;}
.river_logo a:hover{opacity: 0.6;}
.copyright{font-size: 14px;width: 100%;margin: 45px auto 0;padding-top: 20px;}
}


/* フット固定メニュー */
footer .footfixmenu{display: flex; z-index: 10000000;position: fixed;bottom:0;width: 100%;border-top: 2px solid #bbb;pointer-events: none; transition: 0.5s all;transform: translateY(100%);}
footer .footfixmenu.active{pointer-events: painted;transform: translateY(0%);}
footer .footfixmenu > *{font-size:2.5vw;flex: 1;}
footer .footfixmenu > div{background-color: #fff;border-right: 2px solid #bbb;display: flex;align-items: center;justify-content: flex-end;flex-direction: column; text-align: center;padding-bottom: 1vw;order: 2;}
footer .footfixmenu a{display: flex;align-items: center;justify-content: flex-end;flex-direction: column; text-align: center;height: 15vw;padding-bottom: 1vw;}
footer .footfixmenu a img{width: 6.5vw;}
footer .footfixmenu a.ft_map{background-color: #fff;border-right: 2px solid #bbb;color: #000;}
footer .footfixmenu a.ft_tel{background-color: #fff;border-right: 2px solid #bbb;color: #000;}
footer .footfixmenu a.ft_request{background-color: #807d7a;color: #fff;order: 3;}
footer .footfixmenu a.ft_reservation{background: linear-gradient(to right,#4b060c,#70161a);color: #fff;order: 4;}
footer .footfixmenu a p{margin-top: 1vw;}

/*ハンバーガーメニュー*/
.hb_menu{position: absolute;top:3.5vw;width: 7vw;height: 7vw;right: 0;left: 0;margin: auto;z-index: 990;transition: all 0.3s;}
.hb_menu span{display: block;height: 3px;width: 7vw;position: absolute;top:10px;left: 0;}
.hb_menu span i{display: block;height: 3px;width: 7vw;transition: all 0.3s;background: #444;}
.hb_menu span::before,
.hb_menu span::after{content:"";position: absolute;left: 0; display: block;height: 3px;width: 7vw;background: #444;transition: all 0.3s;}
.hb_menu span::before{top:-2vw;}
.hb_menu span::after{bottom:-2vw;}

.h_active .hb_menu span::before{transform:rotate(-135deg);top:0;right:0;content:'';}
.h_active .hb_menu span::after{transform:rotate(135deg);bottom:0;right:0;content:'';}
.h_active .hb_menu span i{display: none;}

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


@keyframes dash{
  to{stroke-dashoffset: 0;}
}
@keyframes blur{
  from{filter: blur(5px);opacity: 0;}
  to{filter: blur(0);opacity: 1;}
}
@keyframes top_img{
  0%{filter: grayscale(100%);transform: scale(1.2);opacity: 0;}
  50%{filter: grayscale(100%);opacity: 1;}
  100%{filter: grayscale(0%);transform: scale(1);opacity: 1;}
}

@keyframes spCircRot {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}
@keyframes item_tit1{
  from{transform: scaleX(0);transform-origin: right;opacity: 0;}
  to{transform: scaleX(1);transform-origin: right;opacity: 1;}
}
@keyframes item_tit2{
  from{transform: scaleX(0);transform-origin: left;opacity: 0;}
  to{transform: scaleX(1);transform-origin: left;opacity: 1;}
}



.layer_main{overflow: hidden;width: 100%;height: 176vw;}
.layer_main::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(0,0,0,0.5);mix-blend-mode: multiply;z-index: 1;animation: 3s fadeIn 1.5s forwards;opacity: 0;}
.layer_main img{animation: 2s blur 0s forwards;width: 100%;}
.layer_main .main_copy{position: absolute;top: 12%;left: 0;width: 100%;text-align: center;z-index: 2;animation: 2s blur 1s forwards;opacity: 0;white-space: nowrap;}
.layer_main .main_copy h2{color: #fff;font-size: 3.5vw;text-align: center;letter-spacing: 0.1em;padding-left: 0.2em;}
.layer_main .main_copy h2 + p{color: #fff;font-size: 1.5em;text-align: center;margin: 3vw auto 0;}

.layer section{padding-top: 20vw;animation-name: fadeInUp;}
.contents_tit{font-size: 4.9vw;letter-spacing: 0.15em;text-align: center;padding-left: 0.15em;}
.contents_tit + *{margin-top: 6vw;}
.contents_tit + p{font-size: 3.3vw;line-height: 2;margin-top: 6vw;text-align: center;}
.contents_tit + p + *{margin-top: 12vw;}

.contents_tit_s{font-size: 4.3vw;}
.contents_tit_s + *{margin-top: 6vw;}
.contents_tit_s + p{font-size: 3.15vw;line-height: 1.8;margin-top: 5.5vw;text-align: justify;}
.contents_tit_s + p + *{margin-top: 6vw;}
.contents_tit_s:nth-of-type(n+2){margin-top: 12vw;}
.contents_tit_s .point{display: inline-block;font-size: 0.78em;background: #e1dcc3;border-radius: 1em;padding: 2px 1em;margin-right: 0.7em;}

.item_tit{font-size: 4.3vw;padding: 3vw 0;text-align: center;}
.item_tit i{position: absolute;width: 45%;height: 1px;background: #888;}
.item_tit i:nth-of-type(1){top: 0;right: 0;animation-name: item_tit1;}
.item_tit i:nth-of-type(2){bottom: 0;left: 0;animation-name: item_tit2;}
.item_tit + p{font-size: 3.28vw;line-height: 1.8;margin-top: 6vw;text-align: justify;}
.item_tit + p + *{margin-top: 10vw;}
.item_tit:nth-of-type(n+2){margin-top: 12vw;}

.d_tit{font-size: 5vw;letter-spacing: 0.2em;text-align: center;padding-left: 0.2em;}
.d_tit::after{content: "";height: 1px;width: 23vw;background: #888;margin: 2vw auto 0;display: block;}
.d_tit + *{margin-top: 6vw;}

.z_tit{font-size: 4.0vw;padding: 3px 0.5em;background: #e1dcc3;margin-top: 8vw;}
.z_tit + *{font-size: 3.28vw;line-height: 1.8;margin-top: 4vw;text-align: justify;}
.z_tit + p + *{margin-top: 5vw;}


.z_tit_s{font-size: 3.8vw;margin-top: 6vw;}
.z_tit_s + *{margin-top: 3vw;}

.gray_bk{background: #e8e7e6;padding: 15vw 0;margin-top: 15vw;animation-name: fadeInUp;}

.photo_wide{margin-left: -8vw;margin-right: -8vw;width: 100vw;}

.p_num{display: flex;justify-content: center;align-items: center;width: 6vw;height: 6vw;line-height: 1;font-size: 3vw;color: #fff;background: #000;position: absolute;right: 0;bottom: 0;}


@media screen and (min-width: 769px) {
.layer_main{height: calc(56.25vw - 15px);}
.layer_main .main_copy{top: 16%;}
.layer_main .main_copy h2{font-size: 1.5vw;}
.layer_main .main_copy h2 + p{margin: 1.5vw auto 0;font-size: 1.6em;}

.layer section{padding-top: 120px;}
.contents_tit{font-size: 30px;}
.contents_tit + *{margin-top: 60px;}
.contents_tit + p{font-size: 18px;margin-top: 60px;}
.contents_tit + p + *{margin-top: 80px;}

.contents_tit_s{font-size: 24px;}
.contents_tit_s + *{margin-top: 60px;}
.contents_tit_s + p{font-size: 16px;margin-top: 35px;}
.contents_tit_s + p + *{margin-top: 60px;}
.contents_tit_s:nth-of-type(n+2){margin-top: 120px;}
.contents_tit_s .point{display: inline-block;font-size: 0.78em;background: #e1dcc3;border-radius: 1em;padding: 2px 1em;margin-right: 0.7em;}

.item_tit{font-size: 24px;padding: 15px 0;}
.item_tit + p{font-size: 16px;margin-top: 40px;}
.item_tit + p + *{margin-top: 40px;}
.item_tit:nth-of-type(n+2){margin-top: 120px;}

.d_tit{font-size: 5vw;letter-spacing: 0.2em;text-align: center;padding-left: 0.2em;}
.d_tit::after{content: "";height: 1px;width: 23vw;background: #888;margin: 2vw auto 0;display: block;}
.d_tit + *{margin-top: 6vw;}

.z_tit{font-size: 21px;padding: 5px 0.5em;margin-top: 60px;}
.z_tit + *{font-size: 16px;line-height: 1.8;margin-top: 20px;}
.z_tit + p + *{margin-top: 30px;}


.z_tit_s{font-size: 20px;margin-top: 0;}
.z_tit_s + *{margin-top: 20px;}

.gray_bk{padding: 120px 0;margin-top: 120px;}

.photo_wide{margin-left: 0;margin-right: 0;width: auto;}

.p_num{width: 30px;height: 30px;font-size: 15px;}
}

@media screen and (min-width: 769px) and (max-width: 850px) {
.layer_main .main_copy h2 + p{font-size: 1.45em;}

}