@charset "UTF-8";html{margin: auto;background: #fff;font-size: 13px;}
@media (min-width: 769px){ html{font-size: 17px;}}
body, input, textarea, select, button{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga", "kern"; }
body {margin: 0;color:#3E3A39;font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;width: 100vw;overflow-x: hidden;}
*{margin:0;padding:0;border:none;font-size: 1em;letter-spacing: normal;}
a{color: #cf1126;text-decoration: underline;cursor:pointer;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;}
a:link{text-decoration: underline;}
a:hover,a:active{text-decoration:none;}
a:hover{text-decoration:none;}
a:visited{text-decoration:none;color: #cf1126;}
hr {clear: both;border: none;border-bottom: 1px solid #fff;margin: 16px 45%;padding: 0;height: 40%;display: block;}
h1 {line-height: 1.6rem;font-size: 1.6rem;margin: .4rem 0 .8rem;}
h2 {line-height: 1.6rem;font-size: 1.1rem;margin: .4rem 0;}
h3 {line-height: 1.2rem;font-size: .9rem;margin: .8em 0;}
p {line-height: 1.6rem;font-size: .8rem;margin: .4em 0;}

small {
font-size: .9rem;
}
.none{display:none;}
.font1,.link{font-family: 'Roboto', sans-serif;font-weight: 700;}
.font2{font-family: 'Roboto Slab', serif;letter-spacing: .05rem;}
.yokohaba {margin-left: auto;margin-right: auto;display: block;width:100%;padding: 0 16px;box-sizing:border-box;}
@media (min-width: 769px){
br{display: block !important;}
.yokohaba{width: 84vw;}
}

/*============================
#header
============================*/
#header {height: 0px;position: absolute;width: 100%;z-index: 99;}
#header>h1 {max-width: 120px;width: 24vw;padding: 8px 0 8px 14px;float: left;/* margin: 0; */}
#header>h1>svg {height: auto;width: 100%;fill: #fff;}
#header>h1>svg *{}
#header>nav {float: right;}
#header>nav>ul {padding: 16px 14px 16px 0;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-end;-ms-flex-pack: end;justify-content: flex-end;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
#header>nav>ul>li {float: left;display: block;margin: 0 0 0 4px;}
#header>nav>ul>li>a {width: 24px;height: 24px;display: block;background: #fff;border-radius: 15px;line-height: 24px;color: #3E3A39;}
#header>nav>ul>li.shop>a {width: 100px;padding: 0 10px;text-decoration: none;font-size: .6rem;text-align: center;}
#header>nav>ul>li.shop>a img {margin: 10px 0 0 0;}
#header>nav>ul>li>a svg {width: 50%;margin: 25%;fill: #3E3A39;}
#header>nav>ul>li>a svg *{}


/*============================
#topmain
============================*/
#topmain{}
#topmain>header{position: relative;max-height: 100vh;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;

}

#topmain>header>.bxslider1{}
#topmain>header>.bxslider1>li{}
#topmain>header>.bxslider1>li>img{}
#topmain>header .bxslider div{background: rgba(255, 255, 255, 0.88);position: absolute;z-index: 99999999;width: 52vw;height: 52vw;top: 26vw;left: 26vw;max-height: 540px;max-width: 540px;box-sizing: border-box;padding: 21px;border-radius: 50%;margin: auto;}
#topmain>header .bxslider div svg{width: 100%;height: auto;margin: 12% 0 0 0;}
#topmain>footer{background: #FE94AF;text-align: center;padding: 24px;margin: 0;color: #fff;}

#topmain>footer>p {
font-size: 1.2rem;
line-height: 2rem;
}

#topmain>footer>p br {
	display: none;
}
#topmain>footer>h1{}
#topmain>footer>h2{font-size: 2rem;line-height: 2rem;}
#topmain>footer>hr{}
#topmain>footer>h3{font-size: 1.3rem;}
@media (min-width: 769px){
	#topmain>header .bxslider div{padding: 52px;top: 19vh;left: 50%;margin-left: -270px;}
	#topmain>footer>p br {
	display: block;
	}

}
/*============================
#order1
============================*/
#order1{}
#order1>header{text-align: center;padding: 24px 0;}
#order1>header>h1{font-size: 1.1rem;}
#order1>header>h2{
font-size: 2.4rem;
line-height: 2.4rem;
}
#order1>header>h3{
font-size: 1.6rem;
margin-bottom: 40px;
}
#order1>header>hr{
border-color: #3E3A39;
}
#order1>header>h4{
font-size: 1.6rem;
}

#order1>header>p {
font-size: 1.1rem;
}
.off{display: block;background: #fe94af;height: 60vw;width: 60vw;margin: 0 auto 24px;padding: 9%;box-sizing: border-box;border-radius: 50%;max-width: 330px;max-height: 330px;}
.off>svg{fill: #fff;}

@media (min-width: 769px){
.off{padding: 0;}
.off>svg {
margin: 0 auto;
padding: 42px 0 0 4%;
display: block;
max-width: 250px;
max-height: 250px;
}
}
#order1>footer{text-align: center;}
#order1>footer>h1{/* font-size: 2rem; */
}
#order1>footer>h2{}

#order1>footer>h2 input {display: inline;width: 21%;font-size: 1.2rem;text-align: left;margin: 0 0 14px;max-width: 100px;color: #3E3A39;}
#order1>footer>p{padding: 0 0 24px;}

/*============================
.box
============================*/
.bxslider>li {height: 100vw !important;overflow: hidden;}
.bxslider>li>img {width: 140vw;height: 140vw;object-fit: cover;object-position: 50% 100%;margin: -40vw 0 0 -18vw;vertical-align: top;}
.bxslider2 li{height: 64vw !important;}
.bxslider2 li>img{height: 74vw;width: 100vw;margin: -7vw 0 0 0;}


.bxslider>li:nth-child(n + 5)>img
{-moz-transform: scale(1.25);-webkit-transform: scale(1.25);-o-transform: scale(1.25);-ms-transform: scale(1.25);transform: scale(1.25);margin: -19vw 0 0 0;}
.bxslider1>li:nth-child(n + 5)>img
{-moz-transform: scale(1.15);-webkit-transform: scale(1.15);-o-transform: scale(1.15);-ms-transform: scale(1.15);transform: scale(1.15);margin: -48vw 0 0 -15vw;}
@media (min-width: 769px){
.bxslider>li:nth-child(n + 5)>img
{margin: -6.5vw 0 0 0;}
.bxslider1>li:nth-child(n + 5)>img
{margin: -6.5vw 0 0 0;}
}


.bx-pager {display: -ms-flexbox;display: -webkit-flex;display: none;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: space-around;-ms-flex-line-pack: distribute;align-content: space-around;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
.bx-pager-item {margin: 8px 2px 0;}
.bx-pager-link {display: block;background: #ccc;width: 8px;height: 8px;text-indent: -99999px;border-radius: 50%;}
.bx-pager-link.active {background: #777;}
.bx-wrapper .bx-controls-direction a {position: absolute;top: -50vw;left: 16px;z-index: 1;margin-top: -24px;outline: 0;width: 48px;height: 48px;font-size: 0px;text-indent: -999999px;text-align: left;background: transparent;border: 1px solid #fff;border-radius: 50%;-moz-transform: scale(.7);-webkit-transform: scale(.7);-o-transform: scale(.7);-ms-transform: scale(.7);transform: scale(.7);}

.box .bx-wrapper .bx-controls-direction a {top: -34vw;}
.bx-wrapper .bx-controls-direction a:before{width: 16px;height: 16px;margin: 16px 11px 0;font-size: 39px;color: #fff;border-top: 1px solid;border-right: 1px solid;-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);content: '';display: block;}
.bx-wrapper .bx-controls-direction a.bx-prev:before{/* left: 30px; */-moz-transform: rotate(-135deg);-webkit-transform: rotate(-135deg);-o-transform: rotate(-135deg);-ms-transform: rotate(-135deg);transform: rotate(-135deg);margin: 16px 21px 0;}

.bx-controls-direction {width: 100%;position: relative;}
.bx-next{right: 16px;left: auto !important;}

#bxslider>li {width: 80vw !important;padding: 0 .5vw;}
#bxslider>li .tobig {-moz-transform: translateX(10vw);-webkit-transform: translateX(10vw);-o-transform: translateX(10vw);-ms-transform: translateX(10vw);transform: translateX(10vw);}

@media (min-width: 769px){
.bxslider>li {height: 100vh !important;text-align: center;}

.bxslider2>li {
height: 64vw !important;
}
.bxslider>li>img {width: 150vw;height: 100vh;margin: 0 0 0 -25vw;object-position: 50% 80%;}
.bxslider2>li>img {width: 100vw;height: 64vw;margin: 0 0 0 0vw;object-position: 50% 100%;}
.bx-wrapper .bx-controls-direction a {-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);top: -50vh;}
}



.box header{background: #eee;color: #fff;text-align: center;}
.box header>.bxslider{}
.box header>.bxslider>li{}
.box header>.bxslider>li>img{}
.box header h1{font-size: 2rem;margin: 32px 0 16px;}
.box header h2{font-size: .9rem;padding: 0 0 24px 0;font-weight: bold;margin: 0;}
.box header p{font-size: .9rem;padding: 0 0 32px 0;font-weight: bold;margin: 0 auto;text-align: justify;max-width: 800px;}

.box header p br {
display: none;
}
.box .itembox{}
.box .itembox>li{}
.box .itembox>li>a{}
.box .itembox>li>a>h1{margin-bottom: 10px;text-overflow: ellipsis;overflow: hidden;padding: 2px 0 4px 0;}
.box .itembox>li>a>h3{}
.box .itembox>li>a>hr{border-bottom-color: #3E3A39;}
.box .itembox>li>a>.link{background: #ccc;color: #fff;text-decoration: none;padding: 12px 32px;font-size: .8rem;display: inline-block;margin: 8px auto;text-align: center;border-radius: 45px;}


.box .itembox {overflow: hidden;display: block;/* margin-bottom: 40px; */min-height: 400px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
align-content: flex-start;
}

.box .itembox>li {flex: 2 0 auto;width: 50%;text-align: center;display: block;box-sizing: border-box;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}

.box .itembox>li a {color: #3E3A39;text-decoration: none;display: block;padding: 6% 8px;margin: auto;width: 100%;box-sizing: border-box;}

.box .itembox>li a:hover .link {opacity: .4;}
.box .itembox>li img {width: 36vw;margin: -2vw 0;}

#ristorante.box .itembox>li:nth-child(3) img {width: 34vw;}
#ristorante.box .itembox>li:nth-child(4) img {width: 31vw;margin:-1vw 0 0 0;}
#garden.box .itembox>li:nth-child(1) img {width: 46vw;margin:-6vw 0;}


.box .itembox>li h2 {font-size: 1rem;font-weight: 300;line-height: 1.2em;text-overflow: ellipsis;overflow: hidden;}
.box .itembox>li h3 {font-size: 1.3rem;font-weight: 300;}
.box .itembox>li h4 {font-size: 1rem;margin: 8px;}
.box .itembox>li p {text-align: left;padding: 0 24px;}
.box .itembox>li:nth-of-type(2),
.box .itembox>li:nth-of-type(3),
.box .itembox>li:nth-of-type(6),
.box .itembox>li:nth-of-type(7),
.box .itembox>li:nth-of-type(10),
.box .itembox>li:nth-of-type(12) {background: #eee !important;}

.box .itembox>li h2 {margin-bottom: 24px;}

/*============================
#seaside
============================*/
#seaside>header,
#seaside>.itembox>li>a>.link{background: #5AA0D6;}
#garden>header,
#garden>.itembox>li>a>.link{background: #42C09F;}
#terrace>header,
#terrace>.itembox>li>a>.link{background: #C7C3FF;}
#ristorante>header,
#ristorante>.itembox>li>a>.link{background: #D8AD83;}
#harbor>header,
#harbor>.itembox>li>a>.link{background: #FFE400;}
#botanical>header,
#botanical>.itembox>li>a>.link{background: #379683;}


/*============================
#gallery
============================*/
#gallery{margin: 24px 0 0 0;}
#gallery>h1{background: #eee;display: block;text-align: center;padding: 8%;margin: 0;}
#gallery>ul{display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}
#gallery>ul>li{width: 33.333%;float: left;display: block;cursor: pointer;overflow: hidden;}

#gallery>ul>li:hover>img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
opacity: .8;
}
#gallery>ul>li>img{width: 100%;height: 33.3333vw;object-fit: cover;vertical-align: top;object-position: 0% 20%;-webkit-transition: all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;}

#gallery>ul>li:nth-child(4)>img,
#gallery>ul>li:nth-child(6)>img,
#gallery>ul>li:nth-child(7)>img,
#gallery>ul>li:nth-child(8)>img,
#gallery>ul>li:nth-child(9)>img,
#gallery>ul>li:nth-child(10)>img,
#gallery>ul>li:nth-child(12)>img,
#gallery>ul>li:nth-child(14)>img,
#gallery>ul>li:nth-child(15)>img,
#gallery>ul>li:nth-child(16)>img,
#gallery>ul>li:nth-child(28)>img,
#gallery>ul>li:nth-child(29)>img,
#gallery>ul>li:nth-child(30)>img,
#gallery>ul>li:nth-child(27)>img,
#gallery>ul>li:nth-child(26)>img,
#gallery>ul>li:nth-child(25)>img
{object-position: 0% 80%;}


/*============================
#g1
============================*/
.modal{display: none;}
.modal:target {}
.modal>div{position: relative;width: 100vw;height: 100vh;}
.modal>div>img{}

.modal {display: flex;position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;justify-content: center;align-items: center;background-color: rgba(0,0,0,.7);opacity: 0;transition: .3s opacity ease;z-index: -1;pointer-events: all;/* background-attachment: fixed; */background-size: contain;background-position: center;background-repeat: no-repeat;display: none;}
.modal:hover {opacity: 0;}

.modal img {display: none;width: 100%;height: 100%;/* transform: scale(.7); */transition: .4s transform ease;/* pointer-events: none; */object-fit: contain;}

.on .modal {display: flex !important;pointer-events: auto;opacity: 1;z-index: 9999999;}

.modal img {display: block;/* transform: scale(1); */}

.modal::before,.modal::after {display: block;position: fixed;content: "";width: 24px;height:3px;top: 24px;right: 12px;background: #fff;border-radius: 4px;z-index: 9999999;}
.modal::before {transform: rotate(-315deg);}
.modal::after {transform: rotate(315deg);}



/*============================
#order
============================*/
#order{}
#order>header{background: #FE94AF;color: #fff;padding-top: 16px;padding-bottom: 16px;text-align: center;}
#order>header h1{/* font-weight: normal; */font-size: 1.2rem;}
#order>header p{}
#order>.kaijou{/* padding: 16px 0; */overflow: hidden;display: block;/* margin-bottom: 40px; */display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}
#order>.kaijou>li{margin: 32px auto;/* float: left; */
display: block;padding: 0;text-align: center;box-sizing: border-box;}
#order>.kaijou>li>h2{font-size: 2rem;margin-bottom: 16px;}
#order>.kaijou>li>h3{font-size: 1.4rem;}

#order>.kaijou>li>hr {border-bottom: 1px solid #3E3A39;}
#order>.kaijou>li>h4{}
#order>.kaijou>li>p{padding: 16px 8px;}
#order>.kaijou>li>.link{}
#order>.kaijou>li>.link>a{background: #fe94af;color: #fff;text-decoration: none;padding: 12px 32px;font-size: .8rem;display: inline-block;margin: 8px auto;text-align: center;border-radius: 45px;}
#order>.kaijou>.tokyo{border-top: 1px solid #777;margin-top: 8px;padding-top: 32px;}
#order>.kaijou>.osaka>.font2{}
#order>.kaijou>.osaka>.font{}
#order>.kaijou>.osaka>h4{}
#order>.kaijou>.osaka>p{}
#order>.kaijou>.osaka>.link1{}
#order>.kaijou>.osaka>.link1>.gomap.font2{}
#order>footer{text-align: center;padding: 8px 0 24px 0;}
#order>footer>.off{}
#order>footer>.off>svg{margin: -4% 2% 0 8%;/* padding: 30px 0 0 0; */display: block;/* max-width: 270px; *//* max-height: 270px; */}
@media (min-width: 769px){
#order>footer>.off>svg {padding: 40px 0 0 6%;}
}
#order>footer h1{}
#order>footer h2 br{display: none;}
#order>footer p{}
#order>footer p>small{}

@media (min-width: 769px){
#order>.kaijou>.tokyo{border-left: 1px solid #777;border-top: 0;margin-top: 32px;padding-top: 0;}
#order>.kaijou>li {width:50%;}
}

/*============================
#footer
============================*/
#footer{}
#footer>img{width: 100%;/* height: 100vw; */vertical-align: top;object-fit: cover;}
#footer>div>svg{fill: #5AA0D6;display: block;margin: 32px auto 24px;max-width: 640px;}
#footer nav{padding: 0 0 16px 0;}
#footer nav>ul{}
#footer nav>ul>.sns{}
#footer nav>ul>.sns>a{background: #59a0d6;display: block;border-radius: 50%;height: 100%;width: 100%;/* box-sizing: border-box; */}
#footer nav>ul>.sns>a>svg{padding: 24%;width: 100%;fill: #fff;display: block;box-sizing: border-box;}
#footer nav>ul>.shop{display: block;height: 32px;line-height: 32px;margin: 4px 8px;}
#footer nav>ul>.shop>a{background: #59a0d6;color: #fff;height: 100%;display: block;padding: 0 16px;border-radius: 20px;text-decoration: none;}
#footer nav>ul {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
#footer nav>ul>.sns {display: inline-block;width: 32px;height: 32px;margin: 4px 8px;}
#footer p {text-align: center;font-size: 0.9rem;padding: 0 8px 32px;color: #59a0d6;font-weight: 300;}
#footer p>small {display: block;font-size: 10px;}
.arrow-up.icon {color: #fff;border: 1px solid #fff;width: 32px;height: 32px;position: fixed;bottom: 16px;right: 16px;background-color: rgba(0, 0, 0, 0.14901960784313725);text-decoration: none;}
.arrow-up.icon:before {content: '';position: absolute;left: 50%;top: 50%;margin: -3px 0 0 -6px;width: 12px;height: 12px;border: none;border-top: solid 1px currentColor;border-right: solid 1px currentColor;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
