@charset "UTF-8";
/* brake point */
/* 1rem=16px の設定*/
html {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

body {
  font-family: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8rem;
  margin: 0;
  padding: 0;
}

/* =========================================================
  common
========================================================== */


img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
  /*height:auto;*/
}


/* SP PC */
.sp {
  display: block;
}
@media screen and (min-width: 767px) {
  .sp {
    display: none;
  }
}

.pc {
  display: none;
}
@media screen and (min-width: 767px) {
  .pc {
    display: block;
  }
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================================================
  mv
========================================================== */

.mv {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-image: url(../images/mv_bg_pc.jpg);
  background-repeat: no-repeat,no-repeat,no-repeat;
  background-position: center,center;
  background-size: cover;
  position: relative;
  z-index: 9990;
}

.mv .logo{
  width: 280px;
  position: absolute;
  top: 0;
  left: 0;
}

.mv .text{
  width: 90%;
  max-width: 870px;
  margin: 0 auto;
  padding: 5% 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



@media screen and (max-width: 767px) {
  .mv {
  background-image: url(../images/mv_bg_sp.jpg);
  height: 60vh;
  }

  .mv .logo{
  width: 140px;
  }
  .mv .text{
  padding: 30% 0;
  }

}

a:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}


/* =========================================================
  read
========================================================== */

.read{
  width: 100%;
  background-position: -40px 0;
  background-image: url(../images/bg_1.png);
  background-repeat: repeat;
  padding-bottom: 300px;
  position: relative;
  z-index: 9999;
}

.read .inner{
  width: 90%;
  max-width: 1220px;
  margin: 0 auto;
}

.read5000{
  width: 90%;
  max-width: 1000px;
  float: left;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.read .inner .readtext{
  margin: 0 auto;
  padding-top: 160px;
  width: 100%;
  max-width: 1202px;
  clear: both;
}

.read .inner .readtaisyo{
  margin: 20px auto 0;
  width: 100%;
  max-width: 840px;
}

.read .inner .readpoint{
  margin: 20px auto 0;
  width: 100%;
  max-width: 1220px;
}



@media screen and (max-width: 767px) {

  .read{
    padding-bottom: 100px;
  }

  .read .inner{
    width: 100%;
  }

  .read .inner .read5000{
    margin: 0 auto;
  }

  .read .inner .readtext{
    margin: 0 auto;
    padding-top: 120px;
  }

  .read .inner .readtaisyo{
    width: 90%;
  }


  .read .inner .readpoint{
    margin: 40px auto;
  }




}


/* =========================================================
  cont1
========================================================== */

.cont1{
  width: 100%;
  background-image: url(../images/bg_2.png);
  background-repeat: repeat;
  padding-bottom: 80px;
}

.cont1 .questant{
    width: 100%;
    max-width: 642px;
    background-image: url(../images/ema_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 553px;
    float: left;
    z-index: 9999;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: -300px;
}

.cont1 .timetable{
  clear: both;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 40px;
}

.cont1 .sub{
  width: 90%;
  max-width: 1200px;
  margin: 20px auto 0;
  font-size: 0.8em;
  line-height: 1.5;
  padding-bottom: 40px;
}

.cont1 .questant .btn_questant{
  position: absolute;
  top: 400px;
  left: 50%;
  width: 100%;
  max-width: 427px;
  transform: translate(-50%, 0);
}

@media screen and (max-width: 767px) {
  .cont1{
    padding-bottom: 0px;
  }


  .cont1 .questant{
    width: 100%;
    max-width: 350px;
    height: 310px;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: -140px;
  }

  .cont1 .questant .btn_questant{
    top: 215px;
    max-width: 260px;
  }
}


/* =========================================================
  cont2
========================================================== */

.cont2{
  width: 100%;
  background-image: url(../images/bg_1.png);
  background-repeat: repeat;
  padding-bottom: 80px;
}

.cont2 .cont2_kv{
  width: 100%;
}

.cont2 .taisyo{
  width: 90%;
  max-width: 1092px;
  margin: 40px auto 0;
}

.cont2 .hotel_taisyo{
  width: 80%;
  margin: 40px auto 0;
  max-width: 171px;
}


.cont2 .hotel{
  width: 100%;
  margin: 20px auto 0;
  background-color: #fff;
  background-position: 40px;
}

.cont2 .hotel .inner{
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.cont2 .hotel .inner .btn_textlink{
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #000;
  text-decoration: none;
  font-size: 0.8em;
}

.cont2 .hotel .inner .sp .btn_link{
  width: 90%;
  margin: 10px auto 0;
  display: block;
}

.cont2 .sub{
  font-size: 0.8em;
  line-height: 1.5;
  width: 90%;
  max-width: 1200px;
  margin: 40px auto 0;
}


.cont2 .hotel .inner .sp .sub{
  font-size: 0.6em;
  margin: 10px auto 20px;
}


@media screen and (max-width: 767px) {
  .cont2{
    padding-bottom: 40px;
  }

  .cont2 .hotel .inner{
    width: 100%;
  }

  .cont2 .hotel .inner .btn_textlink{
  bottom: 0px;
  right: 4px;
  font-size: 0.6em;
  }

}

/* =========================================================
  loop
========================================================== */

.slide {
    width: 100%;
    height: 400px; /* 画像の高さ */
    background-image: url(../images/hotel_image.jpg);
    background-repeat: repeat-x;
    background-size: auto 400px; /* 画像の高さ */
    animation: loop 40s linear infinite;
}
@keyframes loop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -2000px 0; /* 画像のマイナス幅 */
    }
}

@media screen and (max-width: 767px) {
  .slide {
    width: 100%;
    height: 200px; /* 画像の高さ */
    background-image: url(../images/hotel_image.jpg);
    background-repeat: repeat-x;
    background-size: auto 200px; /* 画像の高さ */
    animation: loop 40s linear infinite;
}
}

/* =========================================================
  cv
========================================================== */

.cv{
  width: 100%;
  padding: 65px 0;
  background-color: #a00c23;
  text-align: center;
  font-size: 1.0em;
  color: #fff;
}

.cv .title{
  width: 80%;
  max-width: 628px;
  margin: 0 auto;
}

.cv .btn_cv{
  width: 90%;
  max-width: 967px;
  margin: 25px auto 0;
  display: block;
}

.cv p{
  margin: 15px 0 0;
}

.cv a:link,a:visited,a:active{
  color: #fff;
}

@media screen and (max-width: 767px) {
  .cv{
  font-size: 0.8em;
  padding: 30px 0;
  }

.cv .btn_cv{
  margin: 15px auto 0;
  }

.cv p{
  margin: 10px 0 0;
  }


}


/* =========================================================
  bukken
========================================================== */

.bukken{
  width: 100%;
  padding-top: 80px;
}

.bukken .title{
  width: 80%;
  max-width: 262px;
  margin: 0 auto 50px;
}

.left {
  width: 100%;
  height: 500px;
  position: relative;
  clear: both;
}


.right {
  width: 100%;
  height: 500px;
  position: relative;
  clear: both;
}



.bukken_p{
  width: calc(100%/2);
  display: block;
  float: left;
  height: 500px;
  position: relative;
}

.higashi_p{
  background-image: url(../images/bukken_higashi.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.ibaraki_p{
  background-image: url(../images/bukken_ibaraki.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.minami_p{
  background-image: url(../images/bukken_minami.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.kitanagao_p{
  background-image: url(../images/bukken_kitanagao.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.ootori_p{
  background-image: url(../images/bukken_ootori.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.kourigaoka_p{
  background-image: url(../images/bukken_kourigaoka.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.shirasagi_p{
  background-image: url(../images/bukken_shirasagi.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.cap_taisyo{
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  max-width: 300px;
}

.cap_taisyo2{
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  max-width: 251px;
}

@media screen and (max-width: 767px) {
  .cap_taisyo{
  max-width: 200px;
  }

  .cap_taisyo2{
  max-width: 160px;
  }

}


.bukken_box{
  width: calc(100%/2);
  display: block;
  float: left;
  display: grid;
  place-items: center;
  height: 500px;
}

.inner{
  width: 80%;
  margin: 0 auto;
}

.inner .bukken_text h3{
  font-size: 1.4em;
  margin: 0;
}

 .inner .bukken_text p{
  margin: 20px 0 30px;
}

 .inner .bukken_btn .siryo{
  width: 48%;
  max-width: 252px;
  display: block;
  float: left;
  margin: 0 2% 0 0;
}

 .inner .bukken_btn .raijo{
  width: 48%;
  max-width: 252px;
  display: block;
  float: left;
  margin: 0;
}


 .inner .bukken_btn .bukkenlink{
  width: 98%;
  max-width: 514px;
  display: block;
  float: left;
  margin: 2% 0 0;
}


.bukken_photo_left{
  display: none;
}

.bukken_photo_right{
  display: block;
}



@media screen and (max-width: 767px) {

  .bukken{
  padding: 40px 0;
  }

  .b_contents:nth-child(n+2) {
  padding-top: 40px;
  }


  .bukken .title{
  max-width: 270px;
  margin: 0 auto;
  }

   .bukken_p{
  width: 100%;
  display: block;
  float: none;
  height: 250px;
  position: relative;
  }

 .bukken_box{
  width: 100%;
  display: block;
  float: none;
  }

   .inner{
  width: 90%;
  margin: 40px auto;
  }

   .inner .bukken_text h3{
  font-size: 1.2em;
  margin: 0;
  }

   .inner .bukken_btn .bukkenlink{
  margin: 4% 0 0;
  }

  .bukken_photo_left{
  display: block;
  }

.bukken_photo_right{
  display: none;
  }

  .pb-40{
    padding-bottom: 40px;
  }
}


.b_contents .cap{
  background:rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.7em;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0px 10px;
  margin: 0;
}



/* =========================================================
  contact
========================================================== */

.contact{
  width: 100%;
  background-color: #1c1c1c;
  text-align: center;
  padding: 40px 0;
  color: #fff;
}

.contact p{
  margin: 0;
}

.contact img{
  width: 90%;
  max-width: 666px;
  margin: 20px auto 0;
}




/* =====================================================
  pageTop
===================================================== */
#page_top {
  position: fixed;
  bottom: -5px;
  right: 0px;
  font-size: 77%;
}

#page_top a {
  background: #000;
  text-decoration: none;
  color: #fff;
  width: 130px;
  padding: 5px 0 8px;
  text-align: center;
  display: block;
  -webkit-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
}

#page_top a:hover {
  text-decoration: none;
  background: #666;
  -webkit-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
}

.sectionform {
  padding: 1em 0;
}
@media screen and (min-width: 767px) {
  .sectionform {
    padding: 3em 0;
  }
}

/* =========================================================
  cap
========================================================== */

.f_cap{
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
  font-size: 0.7em;
  line-height: 1.2;
}



/* =========================================================
  footer
========================================================== */



.footer {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
}

.footer .logo{
  margin-bottom: 35px;
}

.footer p{
  font-size: 0.7em;
  padding-left: 20px;
}

@media screen and (max-width: 767px) {

  .footer {
  margin: 10px auto;
}

  .footer .logo{
  margin-bottom: 25px;
  max-width: 200px;
  }

.footer p{
  font-size: 0.6em;
  padding-left: 20px;
}
}