@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap');

*:focus { outline: none; }
dl:after, .clearfix:after { content: '';display: block;clear: both; }

.rela { position: relative; }
.abso { position: absolute; z-index: 1; }
.txl { text-align: left; }
.txr { text-align: right; }
.txc { text-align: center; }

.txj { text-align: justify; text-justify:inter-ideograph; }
.blk { color: #000!important }
.wht { color: #fff!important }


.syusuien-rakuten h1, 
.syusuien-rakuten h2, 
.syusuien-rakuten h3, 
.syusuien-rakuten h4, 
.syusuien-rakuten p, 
.syusuien-rakuten ul, 
.syusuien-rakuten dl, 
.syusuien-rakuten table, 
.syusuien-rakuten 
{ font-size: 62.5%; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important; letter-spacing: .05em; }

.syusuien-rakuten { -moz-font-feature-settings: 'palt' 1; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.syusuien-rakuten { background-color: hsla(0,0%,100%,1); color: hsla(0,0%,0%,1); text-align: center; }

.syusuien-rakuten a { color: hsla(0,0%,0%,1.00); text-decoration: none; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer; }
.syusuien-rakuten a { word-break: break-all; }
.syusuien-rakuten a {
-webkit-transition: all .5s ease 0s;
-moz-transition: all .5s ease 0s;
-o-transition: all .5s ease 0s;
-ms-transition: all .5s ease 0s;
transition: all .5s ease 0s;
}

.thumbs a, p.iro a { color: hsla(131,75%,31%,0.80); font-family: "Midashi Go MB31"!important; letter-spacing: .08em; }

.osw { font-family: 'Oswald', sans-serif; }


.syusuien-rakuten strong { font-family: "Midashi Go MB31"!important; letter-spacing: .08em; }
.syusuien-rakuten u { display: inline-block!important; text-decoration: none; margin-left: -.4em; margin-right: -.4em; }
.syusuien-rakuten a.iro { display: inline-block; border-bottom: 1px #777 dashed; line-height: 1.4em }

.thumbs a span.roomname { color: hsla(0,0%,0%,0.80); position: absolute; left: 0px; display: block; width: 100%; }

.thumbs a span.bar { background-color: hsla(0,0%,0%,0.0); position: absolute; display: block;  height: 1px; }

.headlogo { position: absolute; z-index: 1 }
.imagelogo { position: absolute; z-index: 1 }
.h1box { position: absolute; z-index: 1; color: #fff; }

.syusuien-rakuten h3 { margin-bottom: 1em; }

.syusuien-rakuten #h2wrap { overflow: hidden; letter-spacing: .2em }
.syusuien-rakuten #h2wrap h2 { overflow: hidden; letter-spacing: .12em }

.syusuien-rakuten section.zoom { overflow-y: hidden; margin: 0; background-color: #000 }
.syusuien-rakuten .video-box { background-color: #000 }
.syusuien-rakuten video { opacity: 1 }

.page section.zoom { background-image: url("../header/info.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center }

.syusuien-rakuten article.nallow2 { border: 1px solid #ccc; border-radius: 10px; }

h2.acc {  margin: 0px 0 50px ; }

h3.num { position: relative; padding: .6em 0 0 1.6em; }
h3.num span { font-size: 2em; position: absolute; left: 0; top: 0; font-family: 'Great Vibes', cursive; }
span.num { font-family: 'Great Vibes', cursive; font-size: 1.6em; vertical-align: -.05em }

h3.hist { position: relative; text-align: left; }
h3.hist span { position: absolute; left: 0; top: 0; font-family: 'Great Vibes', cursive; }

#sunasaraku h3 { font-size: 1.1em; line-height: 1.6em; }
#contactform h3 { font-size: 1.2em; line-height: 2.0em; }

#sarakuflow { border: 2px solid hsla(203,35%,64%,.5); border-radius: 20px; }
#sarakuflow h3 { margin-bottom: 0; padding-bottom: 0; color: hsla(203,45%,46%,1.00); }
#sarakuflow p { margin-top: 0; padding-top: 0 }

p.hist { position: relative; padding: .0em 0 0 6.0em; font-size: .8em }
p.hist::before {
  font-family: Arial, Helvetica, "sans-serif";
  position: absolute;
  font-size: 2em; 
  line-height: 1em;
  top: -.3em;
  left: 2.2em;
  font-weight: 900;
  content: '.';
  color: hsla(0,0%,0%,.7);
}
.history .rgt img { padding: 5px 0 }
.sml { font-size: .8em!important; line-height: 1.8em; letter-spacing: .08em }
#kannaizu { font-size: .9em; line-height: 1.8em; letter-spacing: .1em }
.pallet p { font-size: .8em; line-height: 1.8em; letter-spacing: .04em }
html[lang="ja"] .pallet p {  letter-spacing: .1em }

.bdt { border-top: 1px solid hsla(204,25%,34%,1); }

.syusuien-rakuten h4 { margin: .6em 0; }
.syusuien-rakuten h4 { font-size: 1.0em; }
.syusuien-rakuten h4 span { font-size: .8em; }

.syusuien-rakuten hr {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.2);
margin: 60px auto 60px!important;
}

article.fullBU { color: #fff; background-image: url("../bg/kiriko2.svg"); background-repeat: repeat; background-size: 61px; background-color: #405A6B }
article.full { color: #fff; background-image: url("../bg/gorin1.svg"); background-repeat: no-repeat; background-size: 1200px auto; background-position: center; }
article.full.gorin2 { background-image: url("../bg/gorin2.svg"); }
article.full.gorin3 { background-image: url("../bg/gorin3.svg"); }
article.full.gorin4 { background-image: url("../bg/gorin4.svg"); }

article#tokuten { color: hsla(204,25%,34%,1); border: 3px double hsla(204,25%,34%,1); border-radius: 20px; background-color: hsla(204,25%,34%,.05); }
article#tokuten p.tokuten { line-height: 1em }
article#tokuten p.txt { padding-bottom: 0; line-height: 1em }

.syusuien-rakuten article p { font-size: .9em; line-height: 2.0em; }

#bechu h2, #ippin h2 { font-size: 2em; line-height: 1.4em; letter-spacing: 0em }
#bechu h2 span, #ippin h2 span { font-size: .5em; line-height: 1.4em; display: block; }

.syusuien-rakuten dl, dt, dd { font-size: .9em; line-height: 1.8em; }
.syusuien-rakuten dl { border-top: 1px solid #ccc; padding: 10px 0 0; }
.syusuien-rakuten dl:last-child { border-bottom: 1px solid #ccc; padding: 10px 0 10px; }

.pallet ul.origin,
ul.madori { text-align: left; font-size: .8em; line-height: 1.8em; margin: 0; padding: 0 }
ul.madori li, ul.kondate li { list-style: none; }
ul.madori li span { display: inline-block; width: 130px }

table.madori { width: 100%; text-align: left; font-size: .8em; line-height: 1.8em; margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0; border-bottom: 1px solid #ccc; }
table.madori th { vertical-align: middle; font-weight: 100; padding: 10px 20px 10px 0; white-space: nowrap; border-top: 1px solid #ccc; line-height: 1.4em }
table.madori td { vertical-align: middle; padding: 10px 0 10px 0;  border-top: 1px solid #ccc; }

#rsv { text-align: left; }

a h3.roomname, 
.rsv_bt a { display: block; border: 1px solid #777; padding: 15px 25px 15px 0; background-color: hsla(0,0%,100%,1); background-image: url("../yajirushi.svg"); background-repeat: no-repeat; background-position: 97% center; background-size: 26% auto; margin-bottom: 40px }
.rsv_bt.this a { border-width: 2px; margin-bottom: 20px }
.rsv_bt a { line-height: 1em }


.rsv_bt a:hover { letter-spacing: .3em; background-position: 100%  center; }

a h3.roomname { font-size: 1.0em; padding: 5px 0; background-image: url("../yajirushi2.svg"); background-repeat: no-repeat; background-position: 95% center; background-size: 26% auto; margin-bottom: 20px; margin-top: 10px }
a:hover h3.roomname { letter-spacing: .3em; background-position: 100%  center;
-webkit-transition: all .5s ease 0s;
-moz-transition: all .5s ease 0s;
-o-transition: all .5s ease 0s;
-ms-transition: all .5s ease 0s;
transition: all .5s ease 0s;
}

.tategaki {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
padding: 0px;
line-height: 1.4;
text-align: left;
background-color: hsla(197,100%,50%,0.0); 
width: 950px;
}

.tategaki .abso{
top:50%;
left:50%;
transform:translate(-50%, -50%);
}

.tategaki p {
-webkit-text-orientation: mixed;
text-orientation: mixed;
text-align: left;
display: inline-block;

}
.tategaki span {
letter-spacing: -.05em; 
}

.palt { -moz-font-feature-settings: 'palt' 1; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1;  }
.pkna { -moz-font-feature-settings: 'pkna' 1; -webkit-font-feature-settings: 'pkna' 1; font-feature-settings: 'pkna' 1;  }
.halt { -moz-font-feature-settings: 'halt' 1; -webkit-font-feature-settings: 'halt' 1; font-feature-settings: 'halt' 1;  }
img { border: none; vertical-align: bottom }
.phj img { width: 100% ; padding: 0; height: auto }

.syusuien-rakuten section, .syusuien-rakuten article, .fulheight { position: relative; }
.syusuien-rakuten section { background-color: hsla(203,68%,57%,0.0) }

.nami { position: absolute; z-index: -1; width: 100%; }

.bg1 { background-color: #688090; }

.linebox { height: 1px; background-color: hsla(204,27%,57%,1.00); }
.linewrap { position: relative; width: 30%!important; margin: 0px 25% 0 45%; background-color: hsla(204,27%,57%,.1); }
.linewrap .linebox { position: absolute; z-index: 1; left: 2px; top: 18px; }


.bg4 article { padding: 150px 0 }

.address { padding: 0px 0 50px; }

.syusuien-rakuten footer { position: relative; font-size: .8em; line-height: 1.8em; padding: 30px 0; color: #000; text-align: left; background-image: url("../bg/kirikobg.svg"); background-repeat: repeat; background-size: 53px auto; }
.syusuien-rakuten footer h3 { font-size: 1.1em; padding: 10px 0 10px; line-height: 1.5em }


.syusuien-rakuten footer ul,
.syusuien-rakuten footer ul { text-align: left; font-size: 1em; line-height: 1.8em; margin: 0; padding: 0 }
.syusuien-rakuten footer ul li { list-style: none; }
nav#sitemap div.cpr { font-size: .7em; letter-spacing: 0em }
nav#sitemap div.cpr { float: none; clear: both; letter-spacing: 0em }

.syusuien-rakuten footer .prof p { font-size: .9em; line-height: 2.0em; }
.syusuien-rakuten footer .prof p.tel { font-size: 1.6em; line-height: 1.0em; margin: 0; padding: 0 0 0 26px; background-size: auto 16px; background-position: 2px 2px; }

.sns { font-size: 1.6em; line-height: 1em; margin: 20px 0 40px; padding: 0; }
.sns a { margin-left: .5em }

.headset.abso { z-index: 10000; left: 0px; top: 0px; text-align: left; }
.headset, .headset a { color: #fff; }

.price, .tel { font-family: 'Cinzel', serif; display: inline-block; }
.price { font-size: 1.4em }
.ftj { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;; font-weight: 700; letter-spacing: .08em;}
ul.ftj { text-align: left; font-size: .9em; line-height: 1.8em; padding: 0 }
ul.ftj li { margin-left: 25px; }

.headset .tel { background-image: url("../phonew.svg"); background-repeat: no-repeat; }
nav#org .tel, .prof .tel { background-image: url("../phone.svg"); background-repeat: no-repeat; }

.pallet img { padding-bottom: 10px }

#cuisine .pallet p, 
#sightseeing .pallet p { text-align: justify; font-size: .9em; line-height: 1.8em }
address { font-style: normal; font-size: .8em; letter-spacing: .05em; display: block; width: 100%; text-align: justify; }
address i { font-weight: 900; }
#sightseeing address { line-height: 1.8em; }
#sightseeing address a{ font-size: .9em; font-family: 'Oswald', sans-serif; font-weight: 300 }

table.sunamushidetail { background-color: hsla(204,27%,57%,.0); text-align: center; margin: 0px auto 50px; border-collapse: collapse ;}
table.sunamushidetail, table.sunamushidetail th, table.sunamushidetail td { border: 1px solid hsla(204,27%,57%,.5); }
table.sunamushidetail th, .sunamushidetail td { padding: 5px 10px }
table.sunamushidetail { border-width: 1px 0 0 1px }
table.sunamushidetail th, .sunamushidetail td { border-width: 0 1px 1px 0 }


.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all  0.7s ease;
}

.googlemaps iframe:hover,
.googlemaps object:hover,
.googlemaps embed:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}

.pt0 { padding-top: 0px!important }
.pt10 { padding-top: 10px!important }
.pt20 { padding-top: 20px!important }
.pt30 { padding-top: 30px!important }
.pt40 { padding-top: 40px!important }
.pt50 { padding-top: 50px!important }
.pt70 { padding-top: 70px!important }
.pt100 { padding-top: 100px!important }

.pb0 { padding-bottom: 0px!important }
.pb10 { padding-bottom: 10px!important }
.pb20 { padding-bottom: 20px!important }
.pb30 { padding-bottom: 30px!important }
.pb40 { padding-bottom: 40px!important }
.pb50 { padding-bottom: 50px!important }
.pb100 { padding-bottom: 100px!important }
.pb150 { padding-bottom: 150px!important }

.mt0 { margin-top: 0px!important }
.mt10 { margin-top: 10px!important }
.mt20 { margin-top: 20px!important }
.mt30 { margin-top: 30px!important }
.mt40 { margin-top: 40px!important }
.mt50 { margin-top: 50px!important }

.mb0 { margin-bottom: 0px!important }
.mb10 { margin-bottom: 10px!important }
.mb20 { margin-bottom: 20px!important }
.mb30 { margin-bottom: 30px!important }
.mb40 { margin-bottom: 40px!important }
.mb50 { margin-bottom: 50px!important }
.mb100 { margin-bottom: 100px!important }


/***********************************************************　modal　*************************************************************/

header#org-header nav p a,
a.infobt,
.syusuien-rakuten .reservset a { display: inline-block; border: 1px hsla(0,0%,100%,.4) solid; padding: 6px 12px; background-color: hsla(0,0%,0%,.1); margin: 0 6px; color: #fff!important; letter-spacing: .2em; }

.syusuien-rakuten article.anch { margin-top: -100px!important; padding-top: 100px!important; background: hsla(359,100%,50%,0.0);}

.syusuien-rakuten#rooms #sitemap a,
.syusuien-rakuten#rooms header#org-header nav p a,
.syusuien-rakuten#rooms a.infobt,
.syusuien-rakuten#rooms .reservset a { color: #fff!important; }

.syusuien-rakuten#rooms #sitemap a { color: #000!important; }
.syusuien-rakuten#rooms #sitemap a { color: #000!important; }
.syusuien-rakuten#rooms #sitemap .rsv a { color: #fff!important; }

/***********************************************************　modal　*************************************************************/

ul.origin { margin: 0 0 20px; padding: 0 0; font-size: .9em; line-height: 1.8em; }
ul.origin li { position: relative; padding: 0 0 0 1em; margin: 0; list-style: none; text-align: left; }
ul.origin li::before {
  font-family: Arial, Helvetica, "sans-serif";
  position: absolute;
  font-size: 1.4em; 
  line-height: 1em;
  top: -.2em;
  left: 0em;
  font-weight: 900;
  content: '.';
  color: hsla(0,0%,0%,.7);
}
.pallet ul.origin li::before { top: -.07em; }



/**  nami  **/

.nami1 { background-image: url("nami1.gif"); background-size: 100% auto; background-position: center 100px; background-repeat: no-repeat; }

.nami2 { background-image: url("nami2.gif"); background-size: 100% auto; background-position: center 100px; background-repeat: no-repeat; }

.nami3 { background-image: url("nami3.gif"); background-size: 100% auto; background-position: center 150px; background-repeat: no-repeat; }

.nami4 { background-image: url("nami4.gif"); background-size: 100% auto; background-position: center 150px; background-repeat: no-repeat; }



#spa .nami3 { ; }

/**  nami  **/