/*
Theme Name: hitotoki-child
Template: understrap
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;500;700&family=Noto+Sans+JP:wght@400;700&familyfamily=Nunito+Sans:wght@300;400&display=swap');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header,  menu, nav, section {display: block;}

* {
  box-sizing: border-box;
}

html{ font-size: 62.5% ; scroll-behavior: smooth;} /*初期値16pxの62.5%でルートが10px*/
body{
	line-height: 1.6;
	background:#fff;
	font-size:90%;
	font-family: 'Noto Sans JP', sans-serif;
	color:#000; -webkit-text-size-adjust: 100%;
    min-height: 100vh; 
	 font-weight: 400;
}


/*全てをクリア*/
.clear {clear: both;} 

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


/* リンク設定
------------------------------------------------------------*/
a,a:visited{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
 color:  #0367B6; transition: all 0.5s ease 0s;
  cursor: pointer;}

a:hover, a:active{transition: all 0.5s ease 0s;
outline: none;
color:#8BC53F; text-decoration: none;}

 a:hover img{opacity:.7; }

/**** Clearfix ****/

/* レイアウト
------------------------------------------------------------*/
.inner{margin:0 auto;max-width:1200px; width:90%; position: relative;}
.inner2{margin:0 auto;max-width:950px; width:90%;position: relative;}
.inner3{margin:0 auto;max-width:700px; width:85%;position: relative;}

#wrapper{margin:0 auto 0px; font-size: 16px;font-size: 1.6rem; 
padding:0 0 0px; overflow: hidden; 
	display: flex;
  flex-direction: column;
  min-height: 100vh; 

}
.googlefont{ font-family: 'Lato', sans-serif;
font-family: 'Nunito Sans', sans-serif; }

/* ヘッダー
----------------------------------*/
#glovalheader{display: block; 
  z-index: 90;
  cursor: pointer;
  pointer-events: auto; background: #fff;
 transition: all 0.5s ease 0s;  font-weight: 400;
 position: fixed; /*ポジションを固定する*/
  top: 0px;
 width:100%; text-align: center;
}


#menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  margin:  0px; 
}

#menu-btn {
  display: none;
}

#menu-content {
  margin:1em 0 0; 
  list-style-type: none; display: flex; width:100%; text-align:right;
}
#menu-content>li:last-of-type{
    margin-left: auto;
}
#menu-content > li {
  position: relative;
  float: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#menu-content > li > a {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  color: #000;
  text-decoration: none;
}

#menu-content > li > a > .blogicon-chevron-down {
  margin-right: 5px;
}

#menu-content > li > ul.second-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding-left: 0;
  list-style-type: none;
  -webkit-box-shadow: 1px 1px 7px #bbb;
          box-shadow: 1px 1px 7px #bbb;
}

#menu-content > li:hover > ul.second-content {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s; background: #fff;
}

#menu-content > li > ul.second-content > li {
  text-align: center; margin: 0; padding: 0;
  width: 110px; 
}

#menu-content > li > ul.second-content > li > a {
  display: block;
  line-height: 40px;
  color: #000;  width: 100%;
  text-decoration: none; border-bottom: 1px dotted  #8BC53F;
}

#menu-content > li > ul.second-content > li > a:hover {
  background:  #8BC53F;
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#menu-content > li > ul.second-content > li > a::before{display: none;
}
/*# sourceMappingURL=style.css.map */



@media only screen and (min-width: 1000px){
#glovalheader h1{  float: left;}
#glovalheader h1{ width:140px;  padding:0;transition: all 0.5s ease 0s; margin: 30px 0 0;}
#glovalheader h1 img{ width:100%;  height: auto;transition: all 0.5s ease 0s;}
.navi2 { float: right; text-align: right;   margin: 20px 0 0 0; }
.navi2  li{ display: inline-block; vertical-align: middle; margin:0 0 0 1em; font-size: 16px; font-size: 1.6rem; }
.navi2  li img{  width:25px ;height: auto; }
 #glovalheader li.contactbtn a::before,#glovalheader li.contactbtn a::after,#glovalheader li.instabtn a::before,#glovalheader li.instabtn a::after{ display: none;}
#glovalheader .navi2 li.contactbtn img{  width:28px ;height: auto; }
#glovalheader .navi2  li.instabtn img{  width:25px ;height: auto; }
.navi2 a.yoyakubtn{color: #fff !important; font-size: 19px;  font-size:1.9rem; background: #0367B6; border-radius: 30px; width:12em; text-align: center;transition: .3s;  display:  inline-block;}
    
.navi2  a.yoyakubtn:hover{color: #fff;  display: block; font-size: 19px;  font-size:1.9rem; background: #8BC53F; border-radius: 5px; transition: .3s;}
.navi2  a.onegai{ display:inline-block; margin: 0 2em 0 0; padding-left: 1.5em; transition: .3s; position: relative; }   
.navi2  a.onegai:before{
font-family: "Font Awesome 5 Free";
 font-weight: 900; 
  content: "\f1b0";  position: absolute;   top: 51%;
  left: 0;
  -webkit-transform: translateY(-51%);
  transform: translateY(-51%);

}
#glovalheader a.contactbtn,#glovalheader a.instabtn{ display: inline-block; border: none; width:auto; text-align: center; margin: 0 0 0 1em ; }
#glovalheader a.contactbtn img{  width:35px  ; height: auto;  }
#glovalheader a.instabtn img{  width:30px  ; height: auto ; }
    
.mainView{  margin: 125px 0 0 0;}   
.home .mainView{ margin: 125px 0 0 0;}   
  
#glovalheader a{ color: #000;
position: relative;
  display: inline-block;
  text-decoration: none;
} 
#glovalheader li a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #8CC63F;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
#glovalheader li a::before{
    content:url("/img/common/btn.png");
    position: absolute;
    top:-25px; left:calc( 50% - 20px);
    transform: scale(0.5); display: none;transition: .3s;
}
#glovalheader li a:hover::after{
  bottom: -2px; 
  opacity: 1;
  visibility: visible;
}
#glovalheader li a:hover{color: #8CC63F;}
#glovalheader li a:hover::before{ display: block;transition: .3s;}
.page-id-51 #glovalheader li.overviewbtn a::after{
  bottom: -2px; 
  opacity: 1;
  visibility: visible;
}
.page-id-51 #glovalheader li.overviewbtn a{color: #8CC63F;}
.page-id-51 #glovalheader li.overviewbtn a::before{ display: block;transition: .3s;}

}


@media only screen and (min-width: 1090px){
#glovalheader h1{ width: 150px;  padding:0;transition: all 0.5s ease 0s; margin: 30px 0 0;}
#glovalheader h1 img{ width:100%;  height: auto;transition: all 0.5s ease 0s;}

}



@media only screen and (max-width: 1000px){
.mainView{ margin: 58px 0 0 0;} 
#glovalheader h1{ width:130px; padding:0;transition: all 0.5s ease 0s; margin: 10px 10px;}
.navi2  img{display: block !important; margin: 40px auto 10px;width:200px; height: auto; }
#glovalheader li.contactbtn a::before,#glovalheader li.contactbtn a::after,#glovalheader li.instabtn a::before,#glovalheader li.instabtn a::after{ display: none;}

  nav {
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    width: 60%; min-width: 320px;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 3;
    opacity: 0;
  }
  .open nav {
    left: 0;
    opacity: 1;
  }
  nav.navi2 {
    padding: 5px;
  }
  nav.navi2 ul {
    list-style: none;
    margin: 0; display: block;
    padding: 0; 
  }
  nav.navi2 ul li {
    position: relative;
    margin: 0;  
  }
  nav.navi2 ul li a {
    display: block;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
  .toggle_btn {
    display: block;
    position: fixed;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    z-index: 3;
  }
  .toggle_btn span {
    position: absolute;
    left: 0;
    width: 50px;
    height:4px;
    background-color: #1692CE;
    border-radius: 5px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;  }
  .toggle_btn span:nth-child(1) {
    top: 4px;
  }
  .toggle_btn span:nth-child(2) {
    top: 16px;
  }
 
  .open .toggle_btn span {
    background-color: #fff;
  }
  .open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-45deg);
  }
  .open .toggle_btn span:nth-child(2) {
     -webkit-transform: translateY(-10px) rotate(315deg);
    transform: translateY(-10px) rotate(45deg); top:24px;
  }
  
  #mask {
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 2;
    cursor: pointer;
  }
 .navi2 img.lgo{ margin: 20px auto 1.5em;} 
.navi2  a.yoyakubtn:hover{color: #fff;  display: block; font-size: 19px;  font-size:1.9rem; background: #8BC53F; border-radius: 5px; transition: .3s;}
.navi2  a.onegai{ display:block; margin: 0.5em auto ; width:19em;  padding-left: 1.5em; transition: .3s; position: relative;  text-align: left;}   
.navi2  a.onegai:before{
font-family: "Font Awesome 5 Free";
 font-weight: 900; 
  content: "\f1b0";  position: absolute;   top: 51%;
  left: 0;
  -webkit-transform: translateY(-51%);
  transform: translateY(-51%);

}
#glovalheader a.contactbtn,#glovalheader a.instabtn{ display: inline-block !important; vertical-align: middle; border: none; width:auto; text-align: center; margin: 0 0 0 1em ; }
#glovalheader a.contactbtn img{  width:35px  ; height: auto;  }
#glovalheader a.instabtn img{  width:30px  ; height: auto ; }
  #glovalheader a.contactbtn.pc, #glovalheader a.instabtn.pc{ display:none !important;}  
#menu {
  display: block; 
}
#menu-content{ display: block;margin: 0 auto ;width: 90%; }
  #menu-content > li {
    text-align: left; display: block;
    margin: 0 auto 15px;width: 100%; 
  }
  #menu-content > li:hover {
    background:#8BC53F;
  }
  #menu-content > li > a {
    height: 100%;
    padding:0 1em;
    font-size: 100%; position: relative;
    border-bottom: 1px solid #8BC53F;
  }
  #menu-content > li > a:hover {
   color: #fff ;
  }
    
#menu-content > li > a:before {
font-family: "Font Awesome 5 Free"; position: absolute;
 font-weight: 900;  top:50%;  left: 3px; transform: translateY(-50%);
  content: "\f0da"; 
}
  #menu-content > li > ul.second-content {
    visibility: visible;
    opacity: 1;
    width: 100%;
    position: relative;
    -webkit-box-shadow: none;
            box-shadow: none; background: #fff;
  }
  #menu-content > li > ul.second-content > li {
    width: 32%;  display:inline-block;
    text-align-last: center; background: #fff;
  }
  #menu-content > li > ul.second-content > li > a {
  padding:0 1em;
  }
  #menu-content > li > ul.second-content > li > a:hover {
   background:#8BC53F;
  }

    #glovalheader li a span{ font-size: 14px;}
 }

@media only screen and (max-width: 450px){
.navi2  li img{top:0.5em; left:0em;transform: translateX(0%); }
.navi2 li{ display: block;  margin:0  auto ; width:90%;   text-align:left;  }
	
}
/* アクセス
----------------------------------*/
.access{ background: #FFFCF2;  border-bottom:1px solid #0367b6;border-top:1px solid #0367b6;}
.home .access{ background: #fff;}
.access div.accessout,.access iframe{ display:  inline-block; vertical-align: top; height: 257px;}
.access div.accessout{  width:35%;}
.access iframe{  width:65%;}
.access div.accessin{ width:100%; max-width: 400px; margin:45px 0 0 auto;}
.access div.accessin img.accesslogo{ width:120px; height: auto; float: left; margin:10px 15px 0 0; }
.access div.accessin h3 img{  width:120px; height: auto; display: inline-block; vertical-align:middle; margin: 0 20px 0 0; padding-bottom: 5px; float: none;}
.access div.accessin h4{   margin: 10px 0 0 ;font-size: 20px;}
.access div.accessin h4 b,.access div.accessin h4 span{ display:  inline-block; vertical-align: middle; margin-right: 0.5em}
.access div.accessin h4 b{ font-family: 'Lato', sans-serif; font-size: 30px;}
.access div.accessin span{  display: block;  font-family: 'Lato', sans-serif; font-size: 18px;}
.access div.accessin span b{  font-size: 26px; margin-left: 0.5em;}
.access div.accessin p{  margin: 0;}



/* フッター
----------------------------------*/
footer.global {  background: url("/img/common/footer.jpg") 50% 0% no-repeat; background-size: cover;}
.yoyaku {padding: 30px 0; text-align: center; background: #0367B7; }
.yoyaku a {  color: #fff; }
.yoyaku a.yoyakubtn {  border: 1px solid #fff;   font-size:24px; font-weight: 600;  width:350px;  border-radius: 40px; padding: 5px 30px 5px 0px; position: relative;transition: all 0.5s ease 0s;}
a.yoyakubtn, .yoyaku .pricebtn, a.dog { display: inline-block; margin: 0 5px;}
.yoyaku a.yoyakubtn img { position:absolute; right:20px;  width:58px;  top:52%; transform: translateY(-50%);   }
.yoyaku a.dog { position: relative; }
.yoyaku img.sub{ display:inline-block; width:16px; margin-left: 0.5em;  }
img.home{ display:none; }
.yoyaku a.yoyakubtn,.yoyaku .pricebtn,a.dog  { display:  inline-block; vertical-align: middle;}
.yoyaku .pricebtn{ margin: 0 2.5em;}
.yoyaku .pricebtn img,.yoyaku .pricebtn span{display:inline-block; vertical-align: middle}
.yoyaku .pricebtn img{width:16px; height: auto; margin-right: 0.5em; }


footer.global nav { margin: 230px auto 0; width: 100%;  background: #fff; padding: 10px 0;}
footer.global nav a {  color: #000;}
footer.global nav .navi{  text-align: left; float: left; }
footer.global nav li { font-size: 14px; display:  inline-block;}
footer.global nav li a {display: block; border-right: 1px solid #000; line-height: 1; padding: 0 1em;transition: all 0.5s ease 0s;}
footer.global nav li.inu  {font-size: 12px; }
footer.global nav li:last-child a { border: none;}
footer.global nav li a:hover, footer.global nav li a:active{transition: all 0.5s ease 0s;
outline: none;
color:#8BC53F; text-decoration: none;}

footer.global nav a.privacy{ float: right; display: block;font-size: 12px;}

p.address{ background: #0367B6; color: #fff;   text-align: center; font-size: 10px; font-size:1.0rem; padding:1em 0; }


#page-top1{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  right: 40px;
  width: 40px;
  height:40px;
  text-align: center;
  text-decoration: none; 
  transition: .5s; font-size: 14px; font-size: 1.4rem; 
	vertical-align:middle;background: #330000;  border-radius:50%;  }
a#page-top1 {  color: #fff !important;}
#page-top1 span {display: block; margin:0 auto 0;  font-size: 20px; font-size: 2.0rem; }

.alignleft{ float:left;}
.alignright{ float:right;}
.center{ text-align:center;}


 /* 共通
----------------------------------*/
.mob{ display:none!important;}

@media only screen and (max-width:999px){
.pc{ display:none !important;} 
.mob{ display:block!important;}}

.bage{ background: #FFFCF2;}


/* ホーム
----------------------------------*/
.homeheader { position: relative;}
.slider{width: 100%;  margin: 0 auto;  text-align: center; max-height: 700px; overflow: hidden; }
.slider li img{width: 100%; height: auto;  }
.homeheader hgroup { position:absolute; width:95%;  max-width:1200px; text-align: center; top:50%; left:50%;transform: translate(-50%,-50%); }
.homeheader hgroup h1 {  color: #fff;text-shadow: 1px 1px 2px #000; font: 42px 'Lato', sans-serif; text-align: center;line-height: 1.1;}
.homeheader hgroup h1 span{ display: block; font-size: 20px;}
.content{padding:0px 0; position: relative;}
.homeheader hgroup h2 {  color: #fff;font-size:20px; text-align: center; background: rgba(0,0,0,0.2); padding: 0.5em;  margin:0.5em auto 0;  width:95%; max-width: 30em;}
.content{padding:0px 0; position: relative;}
.home .content article,.home article.spot { padding:55px 0; }

.newstop{ position: relative;}
.newstop h2 {display: block; margin:0;  font-size: 30px; font-size: 3.0rem; font-weight: 500;  }
.newstop ul{ margin:0px auto 0 ; width: 100%; max-width: 800px;}
.newstop li { border-bottom:1px dotted #000; padding: 0.5em;}
.newstop li a {  color: #000;}
.newstop li a:hover {  color: #0367B6;}
.newstop li span,.newstop li h3 { display: inline-block; vertical-align: middle;}
.newstop li span{font: 14px/1.8 'Lato', sans-serif; width:80px}
.newstop li h3 { width: calc( 100% - 110px);   position: relative;  padding-left: 40px;}
.newstop li h3::after {
  position: absolute;
  top:10px;
  left: 0;
  content: '';
  width: 26px;
  height: 1px;
  background: #000;
  opacity: 1;
  transition: .3s;
}

a.more {  color: #000;  font: 18px/1.8 'Lato', sans-serif; display: block;  position: relative;  width:100px; }
a.more img { display: block;  position:absolute; right:0;  width:50px;  top:52%; transform: translateY(-50%);  float: none;  }
a.more:hover {  color: #8BC53F; }

.newstop  a.more{  font-size: 14px; display: block; margin: 1em  0  1em auto; width:150px; position: relative;}


.insta h2{ text-align: center; position: relative; padding-left:40px; width:200px; 
    height: auto; margin: 0 auto 10px; padding: 0;font: 28px/1.8 'Lato', sans-serif; }
.insta h2 img{  width:30px; height: auto; position: absolute;  left:0; top:50%; transform: translateY(-50%);}


.info h2 {width:90%; max-width:380px; height: auto; margin: 0 0 30px; padding: 0;}
.info  ul  {  margin:30px 0 0; text-align: center; display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
.info li { width: calc( 50% - 4em); margin: 1em; text-align: left;}
.info li img{ width:100%; height: auto;  border-radius:10px; 
    box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.7);
}
.info li h3{  margin: 1em auto; font-size: 20px; }
.info li span { display: inline-block;position: relative;  border-bottom: 1px solid #8BC53F; padding: 5px 0 5px 1em ;  text-align: left; width:45%;}

.info li span:before {position:absolute;
font-family: "Font Awesome 5 Free";
 top:3px; left: 0px; position: absolute;
 font-weight: 900;  color: #8BC53F; top:50%;  left: 0; transform: translateY(-50%);
  content: "\f111";  font-size: 10px;
}
.info li a:hover{color:#8BC53F; }


.spot li{ display: inline-block; vertical-align: top; width: calc( 100% / 3 - 40px ); position:relative; overflow: hidden; margin: 0 40px 0 0;}
.spot li:last-child{ margin: 0 ;}
.spot li img{ width:100%; height: auto; border: 1px solid #0367B6;  display: block; margin: 0 auto;}
.spot li span{ display:block;  background: url("/img/index/maru.png") -65px -65px no-repeat;  background-size: 100%;  width:175px; height: 175px; position: absolute; top:1px; left:1px; padding: 20px 0 0 10px; overflow: hidden; color: #0367B6;  font-size: 28px; font-size: 2.8rem; font-weight: 500;  transition: all 0.5s ease 0s; line-height: 1.2; }
.spot li a:hover span{ background: url("/img/index/maru.png") -70px -75px no-repeat;  background-size: 100%;  width:200px; height: 200px; position: absolute; top:1px; left:1px; padding: 25px 0 0 30px;transition: all 0.5s ease 0s; }
.spot li:hover{ background: #E8E5D9;transition: all 0.5s ease 0s; }
.spot li p {  margin: 1em 0em 0.5em; position: relative;}
.spot li p img{ width:50px; height: auto; border: none; position: absolute; right:0; bottom: 5px;}
.spot li:hover p { margin: 1em 0.2em 0.5em;}
.spot a.spot{ display: block;border: 1px solid #0367B6;  width:220px;  border-radius: 20px; padding: 8px 0 5px 18px; position: relative; margin: 40px auto 0; transition: all 0.5s ease 0s;}
.spot a.spot img { display: block;  position:absolute; right:12px;  width:50px;  top:52%; transform: translateY(-50%);   }
.spot a.spot:hover{  background:#0367B6; color: #fff; transition: all 0.5s ease 0s;}



/*サブページ*/
header.subheader{ background:url("/img/room/title.jpg") 100% 50% no-repeat; background-size: auto 100%;  }
.page-id-14  header.subheader{ background:url("/img/common/umi.jpg") 100% 50% no-repeat; background-size: auto 100%;  }
.page-id-54 header.subheader{ background:url("/img/common/house.jpg") 100% 50% no-repeat; background-size: auto 100%;  }
.page-id-12 header.subheader{ background:url("/img/common/access.jpg") 100% 50% no-repeat; background-size: auto 100%;  }
.page-id-22 header.subheader{ background:url("/img/common/onegai.jpg") 100% 50% no-repeat; background-size: auto 100%;  }
.page-id-10 header.subheader{ background:url("/img/rooma/title.jpg") 100% 50% no-repeat; background-size: auto 100%;  }
.page-id-43 header.subheader{ background:url("/img/roomb/title2.jpg") 100% 50% no-repeat; background-size: auto 100%;  }



header.subheader .inner{ height: 287px;  }
header.subheader h1{ text-align: left; font-size:46px; font-size: 4.6rem; padding: 120px 10px 0px; background: #fff;  display: inline-block;margin: 0;  height: 100%; }
header.subheader h1 span{display: block; }
header.subheader h1 span.onegai{ margin-left: 1em; }
header.subheader h1 span.subtitle{font-size:26px; font-size: 2.6rem; }
header.subheader h1 img{display: block; height: auto; margin-bottom: 1em;width:400px; }
header.subheader h1 u{display:inline-block; text-decoration: none;  font-size:26px; font-size: 2.6rem; }
.page-id-22 header.subheader h1 br{ display: none; }

.sub article{ padding: 80px 0;}
.sub article h2{ text-align: center; font-size:30px;  }

/* ol デザイン */
.sub article.no04 ol {
  counter-reset: li;
}
.sub article.no04 ol > li:before {
  position: absolute;
  font-weight: bold;
  counter-increment: li;
  content: counter(li) "";
  left: -34px;
  top: -1px;
  color: #fff;
  width: 24px;
  height: 24px;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  font-weight: bold;
  line-height: 1;
  background: #1692ce;
  padding: 6px 0;
}


img.du{ margin: 30px auto; display: block; width:100%; height: auto;}

/*お部屋*/
.faci ul  {  margin: 50px auto 0; text-align: center; }
.faci li { display:inline-block; margin: 5px; width:calc(100% / 3 - 20px ); text-align: center; vertical-align: top;}
.faci  li img { width:100%; height: auto;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;  border-radius: 5px;  margin: 5px 0; }
.faci h2 {width:90%; }
.faci h2 span { font-size: 80%;  }

.room dl{ margin: 30px auto 0; border-bottom:2px solid #ddd; }
.room dl dt,.room dl dd{ display:  inline-block; vertical-align: top; padding: 1.5em ;  border-top:2px solid #ddd;  margin: 0.5em 0 0 ;}
.room dl dt{ width:12em; }
.room dl dd{ width: calc( 100% - 12.5em); }

.room dl dl{  padding: 0; margin: 0; border: none; }
.room dl dl dt{ border: none; width:8em;margin:0; padding:0 .5em; }
.room dl dl dd.size{width:6em; margin: 0; padding:0 .5em;}
.room dl dl dd{border: none; width: calc( 100% - 18em) ; margin: 0; padding:0 .5em;}
.room p.chui{ margin: 1em 0 0 ; padding-left: 1em; position: relative;}
.room p.chui:before{ content:"※";  position: absolute; left:0; }


.amenity ul{margin: 30px auto 60px; width:95%; max-width: 800px;}
.amenity ul li {position: relative; padding-left:16px; border: none;  display: inline-block; vertical-align: middle; margin: 0.5em 1em;  }
.amenity ul li:before {position:absolute;
font-family: "Font Awesome 5 Free";
 top:3px; left: 0px;
 font-weight: 900;  color: #8BC53F;
  content: "\f111";  font-size: 10px;
}
.yoyoaku_btn {margin: 0px auto 80px; text-align: center; width:400px; }
.yoyoaku_btn a {display: block; vertical-align: middle;  background: #0367B7; color: #fff; padding:0.5em 40px; position: relative; border-radius: 20px; margin: 5px auto 1em;transition: all 0.5s ease 0s; }
.yoyoaku_btn a:hover { background:#8BC53F; transition: all 0.5s ease 0s; }
.yoyoaku_btn img {  width:25px; height: auto; position: absolute; right:10px; top:50%; transform:translateY(-50%);}
.yoyoaku_btn a.onegaibtn {background:#8BC53F; color: #fff;  }
.yoyoaku_btn a.onegaibtn:hover { background:#F97F02 }


div.calendar{ display: block; color: #fff;  background:#0367B6;  margin: 150px auto 0;transition: all 0.5s ease 0s; border: 1px solid #0367B6;  font-size:24px; font-weight: 600; border-radius: 40px;  text-align: center;}

.reserve {  text-align: center; }
.reserve a{  display: inline-block; vertical-align:middle; width:calc( 50% - 4em); max-width: 300px; background: #f0f0f0; text-align: center; padding: 1em 0; font-size:24px; margin: 1em; }


/*ワンちゃん*/
.page-id-22 .sub ul  {margin: 60px auto 0; width:100%; max-width: 800px;}
.page-id-22 .sub ul li {position: relative; padding-left:16px; border: none;  vertical-align: middle; margin: 0.8em 1em;  }
.page-id-22 .sub ul li:before {position:absolute;
font-family: "Font Awesome 5 Free";
 top:3px; left: 0px;
 font-weight: 900;  color: #8BC53F;
  content: "\f111";  font-size: 10px;
}
.page-id-22 .sub ul li p.chui{ margin: 1em 0 0 1.5em;}
.page-id-22 .sub ul li p.chui:before{  content:"※"; margin-left: -1em;}



/*spot*/
.page-id-14 .sub li{ margin: 0px auto 0; border-bottom:1px solid #ddd; padding: 50px 0 ; }

.page-id-14 .sub h3,.page-id-14 .sub img,.page-id-14 .sub div{ display:  inline-block; vertical-align: top;   margin: 80px 0 0 0; padding: -80px 0 0 0;  }
.page-id-14 .sub h3  { font-size: 30px; font-size: 3.0rem; font-weight: 500; width:180px;}
.page-id-14 .sub h4 { color:  #0367B6;  font-size: 20px; font-size: 2.0rem; font-weight: 500; margin-bottom: 0.5em ;border: 1px solid #0367B6;   border-radius: 5px;padding: 8px 15px;}
.page-id-14 .sub img{  width:30%; height: auto; }
.page-id-14 .sub div {  width:calc(70% - 210px ); margin: 80px 0 0 20px; padding: -80px 0 0 0; }
.page-id-14 .sub div a{ display: block; padding: 8px 0 5px 18px; position: relative; margin: 10px  0 0 auto; transition: all 0.5s ease 0s;width:300px; }
.page-id-14 .sub div a img { display: block;  position:absolute; right:12px;  width:50px;  top:52%; transform: translateY(-50%);  margin: 0; padding: 0;  }
.page-id-14 .sub div a:hover{  background:#0367B6; color: #fff; transition: all 0.5s ease 0s;}
.page-id-14 .sub div  p{  margin: 10px 0 0 15px; }
.page-id-14 .sub div .far,.page-id-14 .sub div .fas{display:  inline-block; margin: 0 0.5em 0 ;  }

.page-id-14 .sub div a.linkshop{ display: inline-block; width: auto; margin: 0; padding: 0;  text-decoration: underline;}

.page-id-14 .sub div span{ display: block; margin: 0 0 0 2em; padding-left: 1em; position: relative;font-size:14px;}
.page-id-14 .sub div span:before{ content:"※";  position: absolute; left:0; }


/*アクセス*/
hr {
  height: 1px;
  background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent));
  background-image: linear-gradient(to right, transparent, #ccc, transparent); margin: 30px 0 0;
}
.page-id-12 .sub h3{ font-weight: 500; width:300px;  }
.page-id-12 .sub h3 ,.page-id-12 .sub p{ display:  inline-block; vertical-align: middle; margin-right: 0.5em}
.page-id-12 .sub h3 b,.page-id-12 sub h3 span{ display:  inline-block; vertical-align: middle; margin-right: 0.5em}
.page-id-12 .sub h3 b{ font-family: 'Lato', sans-serif; font-size: 30px; font-size: 3.0rem; }
.page-id-12 .sub p{width:calc(100% - 350px ); line-height: 1.2;font-size: 18px; font-size: 1.8rem; }
.page-id-12 .sub p span{ font-family: 'Lato', sans-serif;  display: block; }
.page-id-12 .sub p span b{ font-size: 22px; font-size: 2.2rem; }
.page-id-12 .sub iframe{ display: block; margin: 50px auto;   width:100%; height: 400px;}
.page-id-12 .sub .box{ display: inline-block; vertical-align: top; width:48%;  }
.page-id-12 .sub h4{ font-weight: 500; margin: 40px 0 10px;font-size: 20px; font-size: 2.0rem;  position: relative; padding-left: 18px; }
.page-id-12 .sub h4:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:3px; left: 0px; color:#5c9ee7; font-size: 14px;
 font-weight: 900; 
  content: "\f111";  
}
.page-id-12 .sub ul { margin-left: 16px;
}
.page-id-12 .sub ul li {
  line-height: 1.5em; position: relative; padding-left: 18px; }
.page-id-12 .sub ul li .fas { display:inline-block; margin: 0 1em;}
.page-id-12 .sub ul li:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:0; left: 0px; font-size: 12px;
 font-weight: 900; 
  content: "\f5de";  
}
/*お願い*/
.page-id-22 .sub h3 {font-size: 24px; font-size: 2.4rem;
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
 margin: 2em auto 0;
}
.page-id-22 .sub h3.space {
 margin:5em auto 0;
}
.page-id-22 .sub h3::before,
.page-id-22 .sub h3::after {
  background-color: #5c9ee7; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
.page-id-22 .sub h3::before {
  margin-right: 1em; /* 文字との余白 */
}
.page-id-22 .sub h3::after {
  margin-left: 1em; /* 文字との余白 */
}
.page-id-22 .sub ul.first {  font-size: 18px; border:1px solid #5c9ee7; padding:1em; margin: 2em auto 0;}
.page-id-22 .sub ul.first li {
  line-height: 1.5em; position: relative; padding-left: 18px; }
.page-id-22 .sub ul.first li:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:0; left: 0px; color:#5c9ee7; font-size: 14px;
 font-weight: 900; 

}



/*個人情報保護方針*/
.page-id-3 .sub ul{ margin: 1em 0 }
.page-id-3 .sub ul li:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:1px; left: 0px;  font-size: 8px;
    font-weight: 900;   content: "\f111"; }
.page-id-3 .sub ul li {
  line-height: 1.5em; position: relative; padding-left: 18px; }
.page-id-3 .sub p {text-align: left;
 margin:2em 0;}
.page-id-3 .sub  dt{ font-size:18px; margin: 1em 0 ;position: relative; padding-left: 18px; }
.page-id-3 .sub  dt:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:5px; left: 0px; color:#5c9ee7; font-size: 14px;
 font-weight: 900;   content: "\f111";  

}
.page-id-3 .sub  dd{  margin: 0 0 3em 1em;}
.page-id-3 .sub .shomei{ border-left:2px solid #000; padding-left: 1em; margin: 1em 0 0 auto; width:18em;}


/* ニュース
------------------------------------------------------------*/
.page-template-page-topics .sub ul li h2 {
  border-bottom: solid 3px #666; text-align: left;
  position: relative;
 padding-bottom: 5px;
 margin-bottom: 0;}

.page-template-page-topics .sub  ul li h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ddd;
  bottom: -3px;
  width: 20%;
}
.page-template-page-topics .sub  ul li{ margin: 0 0 80px; padding-bottom: 30px;}
.page-template-page-topics .sub span.days{ display: block; text-align: right;  font: 14px/1.8 'Lato', sans-serif;    }
.page-template-page-topics .sub .honbun{  margin: 20px auto; width:95%; max-width: 920px;
	text-align: left;}
.page-template-page-topics .sub .honbun a{ display: block; color:#003399; width:auto; 
  position: relative; margin: 0.5em 0 0.5em 2em; padding: 3px 0 0 30px;}
.page-template-page-topics .sub .honbun a:hover{width:auto;  color:#FF7B4D; }

.page-template-page-topics .sub .honbun a.link:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:0; left: 0px;
 font-weight: 900; 
  content: "\f360";  font-size: 20px;
}

.page-template-page-topics .sub .honbun a.file:before{
font-family: "Font Awesome 5 Free"; 
position: absolute; top:0; left: 0px;
 font-weight: 900; 
  content: "\f381";  font-size: 20px;
}
.page-template-page-topics .sub .photo{  margin: 40px auto; width:auto; max-width: 90%;  text-align: center; }
.page-template-page-topics .sub .photo img{ width:auto;  max-width: calc(75% - 16px); height: auto; margin: 8px;  display:  inline-block; vertical-align: top; }

.tablenav {
color: #666;
background:white;
margin: 1em auto;
line-height:2em;
text-align:center;
}

a.page-numbers, .tablenav .current {
color: #666;
padding: 2px .5em;
border:solid 1px #666;
text-decoration:none;
font-size:smaller;
}

a.page-numbers:hover {
color:white;
background: #FF7B4D;
}

.tablenav .current {
color: white;
background: #666;
border-color: #666;
}

.tablenav .next, .tablenav .prev {
border:0 none;
background:transparent;
text-decoration:underline;
font-size:smaller;
}





/* お問合せ関連
------------------------------------------------------------*/
article.contact h2{ text-align:center; }


article.contact p{margin:30px auto; max-width: 800px; width:95%;}
article.contact  dl{margin:60px auto; max-width: 800px; width:100%;}
article.contact dt,article.contact dd{  display:inline-block;  vertical-align: top; border-bottom: 1px  dotted #999;}
article.contact dt{width: calc(35% - 50px);  padding: 10px 0px 10px 2.8em;   }
article.contact dd{ width: calc(65% - 25px); padding: 10px 10px;  }
article.contact dt.jyuyo {
	color:#AA0C0C; 
}
article.contact dt.hissu:before {
	content: '必須'/* 他の文字列を入れたりlist-style-typeの設定をしたり */;
	display: inline-block; margin-right: 0.2em;
	font-size: 12px; background:#AA0C0C; color: #fff; padding:0 0.3em; border-radius: 3px; margin-left: -2.8em;
	/* その他任意のデザイン指定 */
}
article.contact  input[type="text"],
article.contact textarea {
    padding: 0.8em;
    outline: none; display: block;
    border: 1px solid #DDD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; margin: 0 0 0.5em;
    font-size: 16px; max-width: 500px; width:90%;
}
article.contact input[type="text"].tel{ width:10em;}
article.contact span.p-country-name{  display: block; position: absolute; left:0; top:0; height: 0; color: #fff; }

article.contact input[type="text"]:focus,
article.contact texture:focus {
    box-shadow: 0 0 7px #AA0C0C;
    border: 1px solid #AA0C0C;
}
article.contact  input.p-postal-code[type="text"]{max-width: 10em;}

article.contact .cp_sl0 select {
	padding: 0.8em;
    outline: none;
    border: 1px solid #DDD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 16px; max-width: 500px; width:90%;
}
div.chuijiko{margin:30px auto; max-width: 800px; width:95%;}
div.chuijiko b{ display: block; margin:0 0 0 1.2em; padding: 0; font-weight: 300;}
div.chuijiko b:before{ content:"※"; margin:0 0.2em 0 -1em}

div.h-adr{ margin: -1.5em 0 0 0; padding: 0; }
.form-lower{ margin: 0; padding: 0;  }
article.contact dd ul li{ margin: 0 0 5px}
article.contact .c-send{font-size: 18px; font-size: 1.8rem;
  margin:30px auto 25px;display: inline-block; vertical-align: middle;
  background-color:#000;
  padding: 12px 45px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000;
  -webkit-transition: .5s;
  transition: .5s;
  display:block;
  cursor: pointer;
width:80%; max-width: 250px;
  color:#fff; text-align: center;
  color:#fff;
}
article.contact .c-send:hover, .button:hover {
  background:#AA0C0C;border: 1px solid  #AA0C0C;
}
article.contact .c-send2{ont-size: 16px; font-size: 1.6rem;
  margin:30px auto 25px; display: inline-block; vertical-align: middle;
  background-color:#fff;
  padding: 8px 10px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000;
  -webkit-transition: .5s;
  transition: .5s;
  display:block;
  cursor: pointer;
width:80%; max-width: 250px;
  color:#000;
}
article.contact .c-send2:hover {
  background:#AA0C0C;  border: 1px solid #AA0C0C;color:#fff;
}
span.error {
    font-size:14px;margin:0.5em 0 0; 
    color: #AA0C0C; position: relative; padding-left: 15px;
}
span.error:before{
font-family: "Font Awesome 5 Free"; color:#AA0C0C;
position: absolute; top:2px; left: 0px;
 font-weight: 900; 
  content: "\f071";  font-size: 12px;
}
label.error {
    font-family:'Source Sans Pro',arial,sans-serif;
    font-size:1em;
    display:block;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#d89c9c;
    width: 80%;
    margin:auto;
    color: #FAFAFA;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}

p.privacy{ text-align: center;}
.privacy h2{ text-align: center;   }
.privacy h3{ margin: 1em!important;}
.privacy h4{  font-size: 18px}

.privacy ol {
  counter-reset:num;
  list-style-type: none!important;
  padding:0;
  margin:1em;
}
.privacy ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.8em 30px;
}
.privacy ol li:before {
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display:inline-block;
  background: #555;
  color: #FFF;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  border-radius: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  top: 8px;
}
.privacy ol li p{ margin: 0.5em 0 0 1em}
.privacy ol li p.ten{ margin: 0em 0 0 2em}
.privacy ol li p.ten:before{content:"・"; margin: 0 0 0 -1em;}
.privacy ol li p.shomei{ margin: 0.5em 0 0 2em}


details { margin: 2em auto; width:90%;}
details .honbun {
  margin-left: 0;
  padding:1em 0 0.5em 1.5em;
}


details summary {position: relative; padding: 0.5em 1.8em;  display: block; list-style: none; border-bottom: 1px dotted;}

/* 一部ブラウザで消えなかった場合は以下も追記 */
summary::-webkit-details-marker {
  display:none;
}
details summary::before { position: absolute;  top:7px; left:0;
  font-family: "Font Awesome 5 Free";
 font-size: 18px; 
 font-weight: 900; 
  color:crimson; transition: all 0.1s ease-out;content: "\f067";  
}
/**
 * アコーディオンがオープン時はマイナスアイコンに変更
**/
details[open] summary::before {
  color:dodgerblue;
    position: absolute;  top:7px; left:5px;font-size: 18px; 
  font-size:1.2em; margin: 0;
  font-family: "Font Awesome 5 Free";
 font-weight: 900; 
transform:rotate(45deg);transition: all 0.2s ease-out;}


/*ここからモバイル*/

@media only screen and (min-width: 1500px){
.access div.accessout{  width:40%;}
.access iframe{  width:60%;}
}


@media only screen and (max-width: 1275x){
.slider{ background: red}
.slider li{overflow: hidden; background: red}
.slider li img{width:auto; height:100%;  }

}

@media only screen and (max-width: 1180px){
.home .slide p{  font-size:18px;font-size:1.8rem; }
.access div.accessin{  width:90%;  max-width:300px;margin: 30px auto 0;}
.info li span { display: block;width:90%; margin: 0.5em auto 0;}
.info li { width: calc( 50% - 0.5em ); margin: 1em 0; text-align: left;}
}

@media only screen and (max-width: 1000px){
    .access div.accessout{  width:45%;}
    .access iframe{  width:55%;}
    .info .photo{ text-align: center; clear: both; }
    .info .photo .box { text-align: left;  margin: 10px 5px 10px; width:30%;  }
    .info .photo .box:nth-child(2) {  width:62% ; margin: 10px 5px 10px;  }
}


@media only screen and (max-width: 900px){#wrapper{ font-size: 14px;font-size: 1.4rem;}
.page-id-22 .sub ul.first {  font-size: 16px; border:1px solid #5c9ee7; padding:0.5em;}
.page-id-22 .sub ul.first li { padding-left: 14px; }
.page-id-22 .sub ul.first li:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:0; left: 0px; color:#5c9ee7; font-size: 12px;
 font-weight: 900; 
}
    
    

/*サブページ*/
header.subheader .inner{ height: 200px;  }
header.subheader h1{font-size:36px; font-size: 3.6rem; padding: 100px 10px 0px; width:300px }
header.subheader h1 span.subtitle,header.subheader h1 u{font-size:20px; font-size: 2.0rem; }

}
@media only screen and (max-width: 800px){
.spot li{ display:  inline-block; vertical-align: top; width: calc( 100% / 2 - 14px); position:relative; overflow: hidden; margin: 0 10px 0 0;}
.spot li:last-child{ margin: 0 ;}
.page-id-14 .sub li{ padding: 0px 0 50px ; }
.page-id-14 .sub h3  {display: block;}
.page-id-14 .sub img,.page-id-14 .sub div{ margin: 20px 0 0 0; padding: 0px 0 0 0;  }
.page-id-14 .sub div {  width:calc(60% - 30px ); margin: 20px 0 0 20px;}
.page-id-14 .sub img{  width:40%; height: auto; }
}

@media only screen and (max-width: 750px){	
.newstop h2 { font-size: 24px; font-size: 2.4rem; font-weight: 500;  }
.newstop li span,.newstop li h3 { display:block; }
.newstop li h3 { width: 100% ;   }
.newstop  a.more{   margin: 1em auto;  border: 1px solid #000; padding: 0.5em 0em 0.5em 1em; width:160px;}
.newstop  a.more img {right:0.5em; }
    
img.dog { position: absolute; bottom:-75px; right:-0px; width:150px; height: auto;}

.info .infomaingazo { float: none; width:95%; height: auto; display: block;margin: 20px auto;}
     
.access div.accessout,.access iframe{ display: block; vertical-align: top; }
.access div.accessout{  width:95%; height: auto;}
.access div.accessin{  width:90%;  max-width:400px;margin: 30px auto 20px;}
.access iframe{  width:100%;height: 257px;}
.access div.accessin h4 br{ display: none;}
footer.global nav .navi,footer.global nav li{ display: none !important; background: #f0f0f0;}   
.room dl dt.item,.room dl dd.item{ width:100%; display:block;padding:0.5em 1em ; border: none; }
    .room dl dt.item{ background: #f0f0f0;}
    .yoyaku a.yoyakubtn {  display: block; margin: 10px auto;  }

div.calendar{ font-size:20px; font-weight: 500; padding: 0.2em 1em;}
}


@media only screen and (max-width: 650px){
.info .photo .box,.info .photo .box:nth-child(2) { display: block;  margin: 10px auto 30px; width:80%; max-width: 400px;  }
.info .photo .box img,.info .photo .box:nth-child(2) img { display: block;  margin: 10px auto 5px; width:100%; height: auto; }
.info .photo .box:last-child  { width:100%; }
.info .photo .box:last-child  img { width:70%; height: auto; }
 article.contact  dl{margin:60px auto; max-width: 800px; width:100%;}
article.contact dt,article.contact dd{  display:block;  width: calc( 100% - 0px ); border: none}
article.contact dt { background: #f0f0f0; }

hr { margin: 30px 0 ;
}
.page-id-12 .sub h3 ,.page-id-12 .sub p{ display:block; }
.page-id-12 .sub h3 b{ ffont-size: 28px; font-size: 2.8rem; }
.page-id-12 .sub p{width:100% ;font-size: 16px; font-size: 1.6rem; margin: 1em 0 0 }
.page-id-12 .sub p span b{ font-size: 20px; font-size: 2.0rem; }
.page-id-12 .sub .box{ display: block; width:100%;  }
.page-id-12 .sub h4{ margin: 0px 0 10px;font-size: 18px; font-size: 1.8rem;  padding-left: 16px; }
.page-id-12 .sub h4:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:3px; left: 0px; color:#5c9ee7; font-size: 12px;
 font-weight: 900; 
  content: "\f111";  
}
.page-id-12 .sub ul { margin-left: 16px;}
.page-id-12 .sub ul li {
  line-height: 1.5em; position: relative; padding-left: 16px; }
.page-id-12 .sub ul li .fas { display:inline-block; margin: 0 1em;}
.page-id-12 .sub ul li:before{
font-family: "Font Awesome 5 Free";
position: absolute; top:0; left: 0px; font-size: 12px;
 font-weight: 900; 
  content: "\f5de";  
}
.faci li { display:inline-block; margin: 5px; width:calc(50% - 20px ); text-align: center;}
.faci h2 { text-align: left !important; width:100%;  }
.faci ul  {  margin: 20px 0 0; }
}

@media only screen and (max-width: 600px){
#page-top1{
  bottom:5px;
  right: 5px; }
	

/*サブページ*/
    
header.subheader .inner{ height: 200px;position: relative; padding: 0px;  width: 100% !important; max-width: 100% !important;  }
header.subheader h1{font-size:24px; font-size: 2.4rem; margin: 0; padding: 10px 0 10px 20px; width:100% !important;  height: auto; position:absolute;left: 0px; bottom: 0; background: rgba( 255,255,255,0.9);  text-align: left;}
 header.subheader h1 span.subtitle,header.subheader h1 u{font-size:16px; font-size: 1.6rem; display:  inline-block; vertical-align: middle; margin-left: 0.2em; }
.page-id-22 header.subheader h1 br{ display:block; }
header.subheader h1 span.onegai{ margin-left: 0em; display:  inline-block;  }
.sub article{ padding: 50px 0;}
.sub article h2{ text-align: center; font-size:26px;  }

div.calendar{ font-size:18px;}
.reserve a{ width:calc( 50% - 2em); padding: 1em 0; font-size:18px; margin: 1em 0.5em; }
}
	
@media only screen and (max-width: 500px){
.page-id-14 .sub img,.page-id-14 .sub div{ display: block;  margin: 20px auto 0; width:100%; max-width: 350px;  }
.page-id-14 .sub h3  { font-size: 20px; font-size: 2.0rem; }
.page-id-22 .sub article h2{  font-size: 20px; font-size: 2.0rem; }
.page-id-22 .sub article h2 span{ display: block; }
.page-id-22 .sub ul  {margin: 30px auto 0;}
.page-id-14 .sub div .far,.page-id-14 .sub div .fas{display:  inline-block; margin: 0 0.2em;  }
.faci h2 span { display: block; margin: 0.3em 0 0;font-size: 70%;}
.yoyoaku_btn {margin: 0px auto 80px; text-align: center; width:90%; }
}

@media only screen and (max-width: 450px){
.info li { width: 90%; margin: 1em auto; text-align: left;}
    
    .access div.accessin h4{ font-size: 14px;}
.access div.accessin h4 b{  font-size: 20px;}
.access div.accessin span{  font-size: 14px;}
.access div.accessin img.accesslogo{ width:180px; height: auto; display: block; float: none; margin:15px auto; }
    .yoyaku a.yoyakubtn { width:300px; }
.faci .photo .box:nth-child(2) img {  width:100%; height: auto;  display: block; margin: 10px auto; max-width: 300px;  }
.room dl dl dt{  display: block;  width:auto; }
.room dl dl dt:before{ content:"・";}
.room dl dl dd.size{width:4em; margin: 0 0 1em 1em;}
.room dl dl dd{border: none; width: calc( 100% - 6em) ; margin: 0 0 1em;  }
}
@media only screen and (max-width:380px){
}