@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?&family=Shippori+Mincho&display=swap');

header + .hb_menu{position: fixed;top: 7vw;width: 7vw;height: 5vw;right: 5vw;left: auto;cursor: pointer;z-index: 1000010;}
.menu_bk{position: absolute;width: 150%;height: 180%;background: rgba(0,0,0,0.5);top: -40%;left: -25%;opacity: 0;visibility: hidden;}
.menu_active + .hb_menu .menu_bk{opacity: 1;visibility: visible;transition: all 2s;}
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;}

.hb_menu + .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;z-index: 1000008;}
.hb_menu + .menu .r_logo{width: 72vw;position: absolute;left: 5.5vw;top: 5vw;}
.h_active .hb_menu + .menu{opacity: 1;pointer-events: painted;transform: translateY(0);}
.hb_menu + .menu .menu_item{display: flex;justify-content: space-between;flex-wrap: wrap;}
.hb_menu + .menu .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);}
.hb_menu + .menu .menu_item > a span{color: #fff;}
.hb_menu + .menu .menu_item > a small{font-size: 0.7em;display: block;color: rgba(255,255,255,0.5)}

#top .hb_menu + .menu .menu_item > a[href$="./"]{background: rgba(255,255,255,0.2);pointer-events: none;}


/* main{overflow: hidden;width: 100%;height: 177.8vw;z-index: 1000001;} */
.loading_wrap{background: #fff;position: absolute;left: 0;top: 0;width: 100%;height: 177.8vw;}
.loading {width: 32px;height: 32px;margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0; border: 4px rgba(0,0,0,0.25) solid;border-top: 4px rgba(0,0,0,1) solid;border-radius: 50%;animation: spCircRot .6s infinite linear;}

video{width: 100%;z-index: 1;}
section{overflow: hidden;padding: 15vw 0 5vw;}
.top_link:nth-of-type(odd){background: #e8e7e6;}

#koudou{padding: 0;margin-top: -2px;z-index: 2;}
.koudou_item{background: url("../img/paper2.jpg");}
.koudou_item::before{content: "";width: 100%;height: 100%;display: block;position: absolute;left: 0;top: 0;background: linear-gradient(to right,rgba(87,76,57,0.92) 0%,rgba(115,103,86,0.92) 33%,rgba(92,82,63,0.92) 100%);mix-blend-mode: multiply;}
.koudou_item ul{display: flex;flex-wrap: wrap; padding: 2vw 5vw;}
.koudou_item li{color: #fff;display: flex;align-items: center;justify-content: center;font-size: 5.2vw;width: 100%;border-right: none;padding: 5vw 0 4vw 6vw;}
/* .koudou_item li:first-of-type span{display: flex;align-items: center;}
.koudou_item li:first-of-type span small{margin-right: 1em;} */
.koudou_item li:nth-of-type(n+2){border-top: 1px solid #fff;}
.koudou_item li small{font-size: 0.58em;display: block;text-align: center;}
.koudou_item li i{font-size: 0.8em;letter-spacing: 0.22em;}
.koudou_item li big{font-size: 1.7em;vertical-align: -0.1em;line-height: 1;}
.koudou_item li span{letter-spacing: 0.22em;}
.koudou_item li:nth-of-type(even){border-right: none;}
.koudou_item li:nth-of-type(n+2){border-top: 1px solid #5e6151;}

.request_area{text-align: center;padding: 2.7em 0;background-color: #F5F5F4;animation-name: fadeIn;margin: 0 auto;font-size: 3.7vw;}
.request_area_info{font-family: 'Cinzel', serif;text-align: center;letter-spacing: 0.15em;font-weight: 500;}
.request_area_info::after{content: "";display: block;height: 1px;width: 2em;margin: 0.4em auto 0;background: #333;}
.request_area_tit{font-size: 1.75em;margin-top: 0.3em;text-align: center;line-height: 1.7;font-weight: 500;letter-spacing: 0.1em;}
.request_area_tit span{font-weight: 500;letter-spacing: 0;display: inline-block;}
.request_area_tit small{font-size:0.8em;font-weight: 500;letter-spacing: 0;display: inline-block;}
.request_area_tit strong{font-size: 1.2em;display: inline-block;margin: 0 0 0 0.3em;color: #9C1D2B;line-height: 1;font-weight: 500;font-family: "Shippori Mincho", serif;}
/* .request_area_tit small{font-size: 0.3em;display: block;text-align: right;font-weight: 500;margin: -0.3em 3em 0 0;} */
.request_bn{background: linear-gradient(to right,#786955,#9a886a);display: block;text-align: center;transition: 0.3s all;padding: 0.8em 0;width: 85vw;margin: 1em auto 0;}
.request_bn span{color: #fff;font-size: 1.1em;letter-spacing: 0.25em;display: inline-block;padding-left: 0.25em;}
.info_copy{padding: 6vw 10vw 3vw;}

.top_link{padding-bottom: 17vw;}
/* .top_link::after{content: "";width: 100%;height: 12vw;display: block; background: linear-gradient(to bottom,transparent ,rgba(0,0,0,0.1));position: absolute;left: 0;bottom: 0;pointer-events: none;} */
.top_tit{color: rgba(89,87,87,0.7);font-size: 4vw;animation-name: blur;font-family: 'EB Garamond', serif;}
.top_tit_lead{color: rgba(89,87,87,1);font-size: 5.6vw;animation-name: blur;}
.lead_btn{display: flex;justify-content: space-between;align-items: center;padding: 7vw 5vw 0;}
.top_lead{font-size: 4.4vw;animation-name: fadeInLeft_s;text-align: left;line-height: 1.4;}
.top_lead a{color: #595757;}
.more_btn{width: 14vw;height: 14vw;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.more_btn span{color: #595757!important;font-size: 2.6vw;animation-name: fadeIn;animation-delay: 0.5s;font-family: 'EB Garamond', serif;line-height: 1;}
.more_btn_circle{width: 14vw;height: 14vw; transform: rotate(-90deg);position: absolute;left: 0;top: 0;}
.circle-animation{stroke-dasharray: 700;stroke-dashoffset: 700;animation: dash 1s linear forwards;transform-origin: 50% 50%;}
.top_img{overflow: hidden;}
.top_img img{animation-name: top_img;animation-duration: 3s;}

#location .top_tit{writing-mode: vertical-rl;position: absolute;top: 0;left: 3vw;}
#location .top_tit_lead{writing-mode: vertical-rl;width: 100%;display: flex;align-items: center;}
#location .top_copy + figure{margin-top: 7vw;}

#design .top_copy{text-align: center;}
#design .top_tit{display: inline-block;text-align: right;}
#design .top_img{margin-top: 4vw;}
#design .garden_img01{width: 72vw;margin: 10vw auto 0;}

#zeh-m{padding-bottom: 0;}
#zeh-m .top_tit{margin-left: 3vw;}
#zeh-m .top_img{width: 84vw;margin-top: 2vw;}
#zeh-m .top_tit_lead{writing-mode: vertical-rl;position: absolute;top: 7vw;right: 3.5vw;}

#footer_top{padding-bottom: 0;background: none!important;}

.link_panel{margin-top: 15vw;}
.link_panel a{display: block;margin-top: 1px;}
.link_panel a img{width: 100%;}
.link_panel a > span{display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(94,72,50,0.8);mix-blend-mode: multiply;z-index: 1;animation-name: fadeIn;}
.link_panel a .copy{width: 86vw;position: absolute;left: 0;right: 0;margin: 0 auto;top: 50%;transform: translateY(-50%);font-size: 3vw;z-index: 2;color: #fff;animation-name: fadeIn;animation-delay: 0.3s;overflow: hidden;}
.link_panel a .copy big{font-size: 1.4em;display: inline-block;margin-right: 0.7em;}
.link_panel a .copy p{margin-top: 1.5vw;}
.link_panel a i{display: block;width: 100%;height: 1px;background: #fff;margin-top: 1.5vw;animation-name: fadeInLeft;animation-delay: 0.5s;}
.link_panel a i::after{content: "";width: 2vw;height: 1px;position: absolute;right: 0;bottom: 1vw;transform: rotate(45deg);background: #fff;}

.contents_wrap{margin-top: 7vw;}

@media screen and (min-width: 769px) {

header + .hb_menu{top: 30px;width: 30px;height: 23px;right: 40px;}
header + .hb_menu i{height: 1px!important;}

.hb_menu + .menu .r_logo{width: 425px;left: 30px;top: 30px;}
.hb_menu + .menu{padding: 100px 30px;width: 100%;}
.hb_menu + .menu .menu_item{max-width: 1000px;margin: 0 auto;justify-content: flex-start;}
.hb_menu + .menu .menu_item > a{width: 30%;font-size: 16px;padding: 20px 10px 20px 20px;margin-top: 20px;margin-right: 3.5%;}
.hb_menu + .menu .menu_item > a:nth-of-type(3n){margin-right: 0;}

.hb_menu + .menu .entry{margin-top: 60px;max-width: 500px;padding: 30px 20px;}
.hb_menu + .menu .entry p{font-size: 24px;}
.hb_menu + .menu .entry a{font-size: 20px;}

main{height: calc(56.25vw - 15px);}
.loading_wrap{height: calc(56.25vw -15px)}

section{padding: 150px 0 50px;}
section *{}

#koudou{}
.koudou_item ul{margin: 0 auto;max-width: 1024px;padding: 20px;}
.koudou_item li{justify-content: center;font-size: 30px; padding: 20px 0;}
.koudou_item li:nth-of-type(1){font-size: 32px;}
.request_bn:hover{opacity: 0.6;}

.request_area{padding: 60px 0;display: flex;justify-content: center;margin: 0 auto;font-size: 17px;}
.request_area_info{padding-right: 40px;}
.request_area_info::after{display: none;}
.request_area_wrap{padding-left: 40px;border-left: 1px solid #555;}
.request_area_tit{margin-top: 0;text-align: left;letter-spacing: 0.15em;}
.request_area_copy{text-align: left;font-size: 18px;margin-top: 20px;}
.request_bn{width: 320px;margin-left: 0;margin-right: 0;}
.info_copy{padding: 0;}

.top_link{padding-bottom: 0;}
.top_link::after{height: 150px;}
.top_tit{font-size: 20px;}
.top_tit_lead{font-size: 32px;}
.lead_btn{display: flex;justify-content: space-between;align-items: center;padding: 0;}
.top_lead{font-size: 24px;}
.more_btn{width: 90px;height: 90px;display: flex;justify-content: center;align-items: center;overflow: hidden;transition: 0.3s all;border-radius: 50%;}
.more_btn span{color: #595757!important;font-size: 18px;animation-name: fadeIn;animation-delay: 0.5s;font-family: 'EB Garamond', serif;line-height: 1;transition: 0.3s all;}
.more_btn_circle{width: 90px;height: 90px; transform: rotate(-90deg);position: absolute;left: 0;top: 0;}
.circle-animation{stroke-dasharray: 700;stroke-dashoffset: 700;animation: dash 1s linear forwards;transform-origin: 50% 50%;}
.top_img{overflow: hidden;}
.top_img img{width: 100%;}
.more_btn:hover{background: #595757;}
.more_btn:hover span{color: #fff!important;}

#location{display: flex;flex-wrap: wrap;}
#location .top_copy{width: 100%;display: flex;justify-content: center;margin-bottom: -10%;z-index: 1;padding-left: 30px;}
#location .top_tit{position: static;order: 2;}
#location .top_tit_lead{width: auto;display: block;order: 1;text-shadow: 0 0 0.15em #fff,0 0 0.15em #fff,0 0 0.15em #fff,0 0 0.15em #fff;}
#location .top_copy + figure{margin-top: 0;width: 50%;}
#location .top_copy + figure img{width: 100%;}
#location .lead_btn{max-width: 530px;padding: 0 20px 90px 50px;flex-wrap: wrap;align-content: flex-end;justify-content: flex-end;}
#location .top_lead{width: 100%;}
#location .more_btn{margin-top: 40px;}

#design{display: grid;grid-template-columns: 700px 40%;justify-content: end;grid-column-gap: 100px;grid-template-rows: 1fr max-content max-content;}
#design .top_copy{text-align: left;}
#design .top_tit{text-align: left;}
#design .top_img{margin-top: 0;}
#design .top_img:nth-of-type(1){grid-row: 1/4;grid-column: 2/3;}
#design .garden_img01{width: 100%;margin: 10vw auto 0;order: 3;margin-top: auto;}
#design .lead_btn{order: 4;margin: 50px 0;}

#zeh-m .top_copy{display: flex;}
#zeh-m .top_img{width: 62.5%;order: 1;margin-top: 100px;}
#zeh-m .top_tit{margin-left: 5px;;order: 3;writing-mode: vertical-rl;}
#zeh-m .top_tit_lead{position: static;width: 150px;order: 2;}
#zeh-m .lead_btn{max-width: 1000px;margin: 50px auto;justify-content: flex-end;}
#zeh-m .more_btn{margin-left: 50px;}

#footer_top{padding-bottom: 0;}

.link_panel{margin-top: 100px;display: flex;justify-content: space-between;}
.link_panel a{width: 25%;margin: 0 0 1px 0;overflow: hidden;}
.link_panel a img{transition: 0.7s all;}
.link_panel a:hover img{transform: scale(1.05);}
.link_panel a .copy{width: 86%;font-size: 0.75vw;}
.link_panel a .copy big{font-size: 1.4em;margin-right: 0.7em;}
.link_panel a .copy p{margin-top: 0.5vw;}
.link_panel a i{margin-top: 0.5vw;}
.link_panel a i::after{width: 0.8vw;bottom: 0.2vw;right: -0.15vw;}

.contents_wrap{margin-top: 50px;}

}

@media screen and (min-width: 769px) and (max-width: 1000px) {
#location .lead_btn{max-width: none;width: 50%;}
#design{grid-template-columns: 45% 53%;grid-column-gap: 2%;}
#design{padding-left: 20px;}
#design .top_lead{width: calc(100% - 100px);}
#common_space > *{margin-left: 20px;margin-right: 20px;}
#common_space .top_img{margin-left: 0;margin-right: 0;}
#zeh-m .top_img{width: 80%;order: 1;margin-top: 100px;}
#zeh-m .top_tit_lead{width: 10%;}
#zeh-m .more_btn{margin-right: 20px;}

}


/* 完売対応 */
main i{position: absolute;right: 16%;top: 40%;z-index: 10;font-size:1.4vw;line-height: 1.7;padding-left: 0.2em;display: block;}
main figure img{width:100%;}
.fin_btn{font-size: 1.2vw;background: #666;padding: 1.2em 0;display: block;margin-top: 1.8em;border: 1px solid #666;transition: 0.5s all;width: 20em;text-align: center;}
.fin_btn span{color: #fff;transition: 0.5s all;}
.fin_btn svg{width: 1em;fill: #fff;vertical-align: -0.1em;margin-right: 1em;transition: 0.5s all;}
.main_read{margin: 2em auto 0;text-align:center;font-size: 4vw;letter-spacing: 0.1em;line-height: 2.0;padding-left: 0.1em;}

.LinkBox{background:#F7F7F7;padding:60px 0;}
.LinkArea{width: 540px;margin:0 auto 40px;max-width:540px;}
.LinkArea a{font-size:16px;color:#333;}
.LinkArea a:hover{opacity:0.8;}
.LinkTitle{width:100%;text-align:center;margin:0 auto 20px;}
.LinkTitle h4{font-size: 21px;text-align: center;letter-spacing: 0.15em;line-height: 1.7;padding-left: 0.2em;margin:30px auto 20px;}
.LinkTitle h4 + p{font-size: 21px;text-align: center;letter-spacing: 0.15em;line-height: 1.7;padding-left: 0.2em;margin-bottom:20px;}
.LinkArea figure{position: relative;}
.LinkArea .Link_bk{font-size: 2vw;line-height: 1.2;color: #fff;background:#42403B;padding: 0 0 0.5em;width:100%;text-align: center;}
.LinkArea .Link_bk small{font-size: 1vw;}

@media screen and (min-width: 1920px) {
.LinkArea .Link_bk{font-size: 38px;}
.LinkArea .Link_bk small{font-size: 19px;}}

@media screen and (min-width: 769px) {
.Link_bk .tab{display: none !important;}
.fin_btn:hover{background: #fff;}
.fin_btn:hover span{color: #666;}
.fin_btn:hover svg{fill: #666;}
}

@media screen and (max-width: 768px) {
.Link_bk .tab{display: none !important;}
.fin_btn{font-size: 4vw;margin: 1.8em auto 3.5em;}
.LinkBox{margin:30px 0;padding:30px 0;}
.LinkArea{margin:0 auto 40px;width:90%}
.LinkArea figure i{font-size: 15px;bottom: -55px;}
.LinkArea .Link_bk{font-size: 6vw;}
.LinkArea .Link_bk small{font-size: 3vw;}
.LinkTitle h4{font-size: 4.5vw;text-align: center;letter-spacing: 0.15em;line-height: 1.7;padding-left: 0.2em;margin:30px auto 20px;}
.LinkTitle h4 + p{font-size: 4vw;text-align: center;letter-spacing: 0.15em;line-height: 1.7;padding-left: 0.2em;margin-bottom:20px;}


}