/*common*/
body {
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
}

h2 {
  font-size:  1.4rem;
}

h2.heading {
  font-size: 1.4rem;
  border-bottom: 3px solid #6BCBDE;
  padding-bottom: 10px;
  display: inline;
  margin-bottom: 4rem;
  letter-spacing: .02rem;
}

p,a,span {
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.5;
  letter-spacing: .02rem;
}

input,textarea {
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
}

br.pc {
  display: block;
}

br.sp {
  display: none;
}

span.sp{
  display: inline;
}

/*header and nav*/
header {
  background: rgba(255,255,255,0);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 1100;
  transition: .5s;
}

header.bg_show {
  transition: .5s;
}


.top_logo_box {
  display: inline-block;
}

.top_logo_box img {
  height: 40px;
  margin: 1rem;
}

a.btn_top_wp {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 0;
  letter-spacing: .04rem;
  padding: .6rem 1rem;
  background: #6bcbdd;
  color: #fff;
  /*  margin: 10px 70px 0 0;*/
  margin: 10px 20px 0 0;
  transition: .2s;
  vertical-align: top;
  float: right;
}

a.btn_top_wp:hover {
 color: #333;
 background: #6acbdd;
 border: 2px solid #333;
}

a.btn_top_gb {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 0;
  letter-spacing: .04rem;
  padding: .6rem 1rem;
  margin: 10px 70px 0 0;
  transition: .2s;
  vertical-align: top;
  float: right;
  color: #fff;
  background: #333;
  border: 2px solid #333;
}

a.btn_top_gb:hover {
  background: #777;
}

.btn_show_sp {
  display: none;
}

.global-nav {
  position: fixed;
  right: -320px;
  top: 0;
  width: 300px;
  height: 100vh;
  padding-top: 40px;
  background-color: #fff;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto;
}

.hamburger {
  position: absolute;
  right: 0;
  top: 10px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 300;
}

.global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-nav__item {
  text-align: center;
  padding: 0 14px;
}

.global-nav__item.block_btn {
  border-bottom: 1px solid #eee;
}

.global-nav__item a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
}

.global-nav__item a:hover {
  background-color: #eee;
}

a.btn_nav_gb {
  color: #fff;
  background: #333;
  border: 2px solid #333;
  margin: 8px 0;
}

a.btn_nav_gb:hover {
  background: #777;
}

li.link_lang {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  font-weight: bold;
}

li.link_lang a {
  border: none;
}

.hamburger__line {
  position: absolute;
  left: 10px;
  width: 30px;
  height: 2px;
  background-color: #111;
  transition: all .6s;
}

.hamburger__line--1 {
  top: 14px;
}

.hamburger__line--2 {
  top: 22px;
}

.hamburger__line--3 {
  top: 30px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}

.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}

a.btn_nav_wp {
  color: #fff;
  background: #6acbdd;
  border: 2px solid transparent;
  margin: 8px 0;
}

a.btn_nav_wp:hover {
  color: #333;
  background: #6acbdd;
  border: 2px solid #333;
}

/*/header and nav*/

/*.nav>li>a {
  padding: 10px 8px;
}

.navbar-default .navbar-nav > li > a {
  color: #111111;
  transition: 0.2s;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
  height: auto;
}

.nav_top  {
  padding-bottom: 0;
}

.nav_lang {
  display: inline-block;
  border: 2px solid #333;
  margin-top: .6rem;
  margin-left: 1rem
}

.nav_lang li {
  padding-right: 8px;
  padding-left: 8px;
}

.nav_lang a {
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  color: #333;
  line-height: 1.4rem;
  display: block;
}

a.link_hostel {
  position: relative;
  }*/

/*
a.link_hostel:after {
  content: '';
  position: absolute;
  top: .4rem;
  right: 0;
  width: .8rem;
  height: .8rem;
  display: block;
  background: rgba(241, 0, 0, .8);
  border-radius: 50%;
  z-index: 100;
  -webkit-animation: badgeRed 12s ease 1;
  -moz-animation: badgeRed 12s ease 1;
  animation: badgeRed 12s ease 1;
  opacity: 0;
}
*/

@-webkit-keyframes badgeRed {
  0%{opacity: 1;}
  95%{opacity: 1;}
  100%{opacity: 0;}
}

@-moz-keyframes badgeRed {
  0%{opacity: 1;}
  95%{opacity: 1;}
  100%{opacity: 0;}
}

@keyframes badgeRed {
  0%{opacity: 1;}
  95%{opacity: 1;}
  100%{opacity: 0;}
}

button.navbar-toggle:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: .8rem;
  height: .8rem;
  display: block;
  background: rgba(241, 0, 0, .8);
  border-radius: 50%;
  z-index: 100;
  -webkit-animation: badgeRed_sp 12s ease 1;
  -moz-animation: badgeRed_sp 12s ease 1;
  animation: badgeRed_sp 12s ease 1;
  opacity: 0;
}

@-webkit-keyframes badgeRed_sp {
  0%{opacity: 1;}
  95%{opacity: 1;}
  100%{opacity: 0;}
}

@-moz-keyframes badgeRed_sp {
  0%{opacity: 1;}
  95%{opacity: 1;}
  100%{opacity: 0;}
}

@keyframes badgeRed_sp {
  0%{opacity: 1;}
  95%{opacity: 1;}
  100%{opacity: 0;}
}

span.label_sp {
  display: none;
}


a#link_gb {
  color: #fff;
  background: #6acbdd;
  border: 2px solid transparent;
  margin: 8px 0;
}

a#link_gb:hover {
  color: #333;
  background: #6acbdd;
  border: 2px solid #333;
}

#back-top {
  line-height: inherit;
}

#navbar_collapse_01 {
  margin-top: 0;
}

.navbar-brand>img {
  transition: all .5s;
  width: 8rem;
}

.past-main .navbar-brand>img {
  display: block;
  width: 8rem;
  transition: all .5s;
}

.back-to-top {
  background: rgb(107, 203, 222);
}

.back-to-top:hover {
  background: rgb(91, 192, 222);
}

.animated {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.no_pd {
  padding-right: 0;
  padding-left: 0;
}

/*----------------------
#footer*/
footer {
  background: #333;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 4rem 2rem;
}

footer a, footer a:hover {
 transition: .2s;
}

.footer_content {
  margin: 0 auto;
}

footer a.link_company {
  color: #fff;
  flex: 1;
  transition: .2s;
}

footer a.link_company:hover {
  opacity: .5;
}

.box_sns {
  flex: 1;
  margin: 1.6rem auto 2.4rem;
}

.box_sns a {
 opacity: .5;
}

.box_sns a:hover {
 opacity: 1;
}

li.icon_ig {
  margin-right: 2rem;
}

.box_hostel_logo {
  margin: 0 auto 1.4rem;
  width: 240px;
}

.box_hostel_link a {
  color: #fff;
  display: inline-block;
  opacity: .5;
  margin: 1rem;
}

.box_hostel_link a:hover {
  opacity: 1;
}

/*/common*/


/*----------------------
#sec_top*/
#sec_top {
  position: relative;
  height: 96vh;
  overflow: hidden;
}

h1 {
  font-size: 1.6rem;
  text-align: center;
  margin-top: 1rem;
  letter-spacing: .1rem;
  color: #fff;
  line-height: 1.2;
}

.wrapper_video {
  height: 96vh;
}

.over_lay {
  width: 100%;
  height: 100%;
  background: linear-gradient(136deg, rgba(61, 167, 195, 0.5), rgba(255, 252, 142, 0.45));
  background-size: 400% 400%;
  -webkit-animation: topColor 10s ease infinite;
  -moz-animation: topColor 10s ease infinite;
  animation: topColor 10s ease infinite;
}

@-webkit-keyframes topColor {
  0%{background-position:0% 23%}
  50%{background-position:100% 78%}
  100%{background-position:0% 23%}
}

@-moz-keyframes topColor {
  0%{background-position:0% 23%}
  50%{background-position:100% 78%}
  100%{background-position:0% 23%}
}

@keyframes topColor {
  0%{background-position:0% 23%}
  50%{background-position:100% 78%}
  100%{background-position:0% 23%}
}

video {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -999;
}

.wrapper_logo {
  width: 40%;
  max-width: 500px;
  position: absolute;
  top: 26%;
  right: 0;
  left: 0;
  margin: 0 auto;
}

/*.box_btn_movie {
  display: block;
  width: 6rem;
  color: #333;
  transition: .5s;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.btn_movie img {
  display: table;
  margin: 2rem auto;
  width: 6rem;
  transition: .3s;
}

.btn_movie img:hover {
  opacity: .5;
  transition: .3s;
}

.box_gmark {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: #fff;
  width: 260px;
  padding: .2rem .4rem;
  }*/

  /*video*/
  .box_btn_movie {
    display: block;
    border: 2px solid transparent;
    width: 14rem;
    color: #333;
    background: #fff;
    margin: 2rem auto;
    font-family: open-sans;
    border-radius: 10rem;
    letter-spacing: .04rem;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
    transition: .2s;
  }

  .box_btn_movie:hover,
  .box_btn_movie:active,
  .box_btn_movie:focus {
    border: 2px solid #f0b475;
    transition: .2s;
  }

  a.btn_movie {
    background: transparent;
    border: 2px solid #333;
    border-radius: 10rem;
    color: #333;
    font-size: 1rem;
    font-weight: bold;
    text-transform: inherit;
    letter-spacing: .06rem;
    padding: .6rem 3rem;
    margin-top: 1rem;
    transition: .1s;
  }

  a.btn_movie:hover,a.btn_movie:focus,a.btn_movie:active {
    background: #333;
    color: #fff;
    transition: .3s;
  }


  a.mouse {
    display: none;
    padding-top: 60px;
  }

  a.mouse span {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 30px;
    height: 46px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
  }

  a.mouse span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: scroll 2s infinite;
    animation: scroll 2s infinite;
    box-sizing: border-box;
  }

  @-webkit-keyframes scroll {
    0% {
      -webkit-transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      -webkit-transform: translate(0, 20px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes scroll {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      transform: translate(0, 20px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes horizontal {
    0% { transform:translateY( -30px); }
    100% { transform:translateY(  0px); }
  }
  @-webkit-keyframes horizontal {
    0% { transform:translateY( -30px); }
    100% { transform:translateY(  0px); }
  }

/*----------------------
sec_01*/
#sec_01 {
  height: 90vh;
  z-index: 10;
  background: #fff;
  position: relative;
}

#sec_01 h2 {
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: .6rem;
}

.title_box {
  text-align: center;
  margin: 6rem auto -6rem;
}

/*.title_box::before {
  content: "";
  display: block;
  max-width: 30rem;
  height: .2rem;
  margin: auto;
  background: linear-gradient(90deg, #aff3fd, #fff1b980, #aff3fd);
  background-size: 200% 200%;
  -webkit-animation: LineTop 3s linear infinite;
  -moz-animation: LineTop 3s linear infinite;
  animation: LineTop 3s linear infinite;
  }*/

  .title_box::after {
    content: "";
    display: block;
    max-width: 26rem;
    height: .2rem;
    margin: auto;
    background: linear-gradient(90deg, #aff3fd, #fff1b980, #aff3fd);
    background-size: 200% 200%;
    -webkit-animation: LineBottom 3s linear infinite;
    -moz-animation: LineBottom 3s linear infinite;
    animation: LineBottom 3s linear infinite;
  }

  @-webkit-keyframes LineTop {
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
  }
  @-moz-keyframes LineTop {
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
  }
  @keyframes LineTop {
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
  }

  @-webkit-keyframes LineBottom {
    0%{background-position:0% 50%}
    100%{background-position:-200% 50%}
  }
  @-moz-keyframes LineBottom {
    0%{background-position:0% 50%}
    100%{background-position:-200% 50%}
  }
  @keyframes LineBottom {
    0%{background-position:0% 50%}
    100%{background-position:-200% 50%}
  }

  a.btn_about {
    border: 2px solid transparent;
    border-radius: 0;
    padding: .6rem 1rem;
    background: #6bcbdd;
    color: #fff;
    display: table;
    margin: -4rem auto 0;
    transition: .2s;
  }

  a.btn_about:hover {
    border: 2px solid #333;
    color: #333;
    transition: .2s;
  }

/*----------------------
sec_statement*/
#sec_statement {
  border-top: 1px solid #fff;
  position: relative;
  background: url(../images/bg_statement.jpg) center no-repeat;
  background-size: cover;
  padding: 5rem 0;
  z-index: 0;
  overflow: hidden;
}

#sec_statement h2 {
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300;
}

.txt_statement {
  text-align: center;
  padding: 2.8rem 3.2rem;
  text-align: center;
  background: url(../images/bg_paper.png) no-repeat top left;
  display: table;
  background-size: cover;
  margin: 10% auto;
  position: relative;
  z-index: 10;
}

.txt_statement::before {
  content: '';
  display: block;
  background: rgba(0,0,0,.1);
  position: absolute;
  left: 0;
  bottom: -.2rem;
  width: 100%;
  height: .3rem;
  filter: blur(2px);
}

.txt_statement .txt_ahf {
  height: 1.8rem;
  margin-bottom: 1rem;
}

.txt_statement p {
  font-feature-settings: "palt";
  font-size: 1.3rem;
  line-height: 1.7;
  margin-bottom: .4rem;
  letter-spacing: .05rem;
}

.txt_statement p strong {
  border-bottom: 1px solid #bdacaa;
  padding-bottom: .2rem;
}

.txt_statement.txt_en p {
  font-size: .9rem;
}

img.logo_wide {
  width: 10rem;
  margin-top: .4rem;
}

/*about*/
.about_wrapper {
  padding: 4rem 0 0;

}

.about_wrapper p {
  font-size: 1rem;
  margin-top: 2rem;
  line-height: 1.8;
  text-align: left;
}

a.btn_link {
  border-radius: 0;
  font-size: 1.2rem;
  padding-right: 1.4rem;
  padding-left: 1.4rem;
}

.about_wrapper a.btn_link {
  border-radius: 0;
  font-size: 1.2rem;
  padding-right: 1.7rem;
  padding-left: 1.4rem;

}


.about_wrapper a.btn_link {
  margin-top: 0;
  position: relative;
}

.about_wrapper a.btn_link .ion-ios-arrow-right {
  position: absolute;
  -webkit-animation: scrollRight 1.4s ease-out infinite;
  animation:  scrollRight 1.4s ease-out infinite;
}

@-webkit-keyframes scrollRight {
  0% {
    right: 0.8rem;
  }
  50% {
    right: 0.4rem;
  }
  100% {
    right: 0.8rem;
  }
}
@keyframes scrollRight {
  0% {
    right: 0.8rem;
  }
  50% {
    right: 0.4rem;
  }
  100% {
    right: 0.8rem;
  }
}

.about_wrapper .wide_img {
  margin-top: 3rem;
}

/*/about*/

/*area*/
.area_wrapper {
  padding: 4rem 0 2rem;
  background: #eff7f9;
  position: relative;
}

.map_box {
  margin-top: 4rem;
  margin-bottom: 2rem;
  height: auto;
}

.map_box img {
  width: 100%;
  max-width: 800px;
}

/*/area*/

/*hostel*/
.hostel_wrapper {
  height: auto;
  padding: 4rem 0;
  background: #fff;
}

.hostel_info_box {
  display: block;
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding: 2rem 1rem 1.2rem;
  text-align:  left;
  border: 2px solid #6BCBDE;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  transition: .3s;
  max-width: 1000px;
}

.hostel_info_box:hover {
  border: 2px solid #00d5ff;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: .3s;
}

div.hostel_info_box:hover {
  border: 2px solid #00d5ff;
  border: 2px solid #6BCBDE;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.hostel_info_box p {
  color: #333;
}

.btn_link {
  font-size: 1rem;
  background: #333;
  border-radius: 0;
  color: #fff;
  padding: .4rem 1rem;
  margin-top: 1rem;
  transition: .3s;
}

a.hostel_info_box:hover .btn_link {
  background: #6BCBDE;
  color: #fff;
  transition: .3s;
}

a.hostel_info_box p.txt_anounce {
  display: inline-block;
  background: #989898;
  border-radius: 0;
  color: #fff;
  padding: .4rem 1rem;
  float: right;
}

p.cmg_box {
  background: #a7a7a7;
  border: 1px solid #675a05;
  font-size: 1rem;
  background: #333;
  border-radius: 0;
  color: #fff;
  padding: .4rem 1rem;
  margin-top: 1rem;
  display: inline-block;
  float: right;
}

p.label_r {
  position: absolute;
  color: #fff;
  top: -2.4rem;
  right: -1.3rem;
  background: #f10000;
  z-index: 10;
  padding: .4rem 3rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 11% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 11% 100%);
  transition: .2s;
}

a.hostel_info_box:hover .label_r {
  padding: .4rem 3.6rem .4rem 3rem;
  transition: .2s;
}

a.hostel_info_box .triangle {
  position: absolute;
  top: 7.28rem;
  right: -1.3rem;
  border: none;
  border-bottom: solid 15px transparent;
  border-left: solid 15px #7d6e00;
}

.hostel_wrapper .logo_box img {
  width: 50%;
}

.hostel_info_box .txt_box {
  padding: 1rem;
}

.hostel_info_box p {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6rem;
}

img.hostel_img {
  border: 2px solid #E4E4E4;
  margin-top: 2%;
  margin-bottom: 2%;
}

.hostel_info_box a.btn_link {
  margin-top: 1rem;
}

p.txt_cmg {
  color: #555;
  background: #ccc;
  padding: .4rem 1rem;
}
/*/hostele*/

/*groupe*/
#sec_group {
  height: auto;
  padding: 4rem 0;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}

#sec_group  h2.heading {
  display: table;
  line-height: inherit;
  margin: 0 auto 2rem;
}

.slick_arrow_back {
  position: absolute;
  top: calc(50% - 2rem);
  left: 1rem;
  z-index: 100;
  cursor: pointer;
  color: rgba(255,255,255,.8);
  font-size: 3rem;
  line-height: 3rem;
}

.slick_arrow_forward {
  position: absolute;
  top: calc(50% - 2rem);
  right: 1rem;
  z-index: 100;
  cursor: pointer;
  color: rgba(255,255,255,.8);
  font-size: 3rem;
  line-height: 3rem;
}

.slick-prev,.slick-next {
  width: 30px;
  height: 30px;
}

.slick-prev:before,.slick-next:before {
  font-size: 30px;
}

.slick-slide {
  height: inherit;
  min-height: 1px;
}

.box_slider {
  flex: 1;
  width: 100%;
  flex-basis: auto;
}

.slider {
  opacity: 0;
  background: transparent;
  transition: opacity .3s linear;
}

.slick-slide {
  outline: none;
}

.slider.slick-initialized {
  opacity: 1;
}

.slick-slide img {
  width: 100%;
}

.slick-prev {
  left: .2rem;
  z-index: 10;
}

.slick-next {
  right: .2rem;
}

.slider.center .slick-slide {
  transition: .3s ease;
  transform: scale(.85);
}

.slider.center .slick-current {
  transform: scale(1);
}

.box_txt {
  width: 800px;
  margin: 3rem auto 2rem;
  position: relative;
  padding: 0 2rem;
}

.box_txt p {
  line-height: 1.8;
  font-size: 1.2rem;
}

.btn_group_rsv {
  border: 2px solid transparent;
  border-radius: 0;
  letter-spacing:.04rem;
  padding: .6rem 1rem;
  background: #6bcbdd;
  color: #fff;
  display: table;
  margin: 2rem auto;
  transition: .2s;
}

.btn_group_rsv:hover,.btn_group_rsv:focus,.btn_group_rsv:active {
  border: 2px solid #333;
  color: #333;
  transition: .2s;
}

.ic_airplane {
  width: 3rem;
  position: absolute;
  left: -2rem;
  top: -1rem;
}

.ic_mail {
  width: 3rem;
  position: absolute;
  right: -1rem;
  bottom: -1rem;
}
/*/groupe*/

/*workspace*/
#sec_workspace {
  height: auto;
  padding: 4rem 0;
  background: #F7F7F7;
}

#sec_workspace  h2.heading {
  display: table;
  line-height: inherit;
  margin: 0 auto 2rem;
}

.container_ws {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  padding: 0 3rem;
  max-width: 1200px;
}

.block_img {
  flex: 1;
  width: 50%;
  overflow: hidden;
}

.block_txt {
  flex: 1;
  background: #fff;
  margin: 0 0 0 1rem;
  padding: 1rem 1.2rem;
}

.box_info_ws table {
  border-collapse: separate;
}

.box_info_ws table td {
  border-bottom: .4rem solid transparent;
}

td.td_cate {
  word-break: keep-all;
}

td.td_cate p {
  background: #f7f7f7;
  color: #333;
  padding: .2rem .6rem;
  text-align: center;
}

td.td_info {
  padding: 0 1rem;
}

td.td_info p {
  padding-bottom: .4rem;
  line-height: 1.5;
}

td.td_info p a {
  color: inherit;
  line-height: 1.5;
  transition: .1s;
}

td.td_info p a:hover {
  opacity: .5;
  transition: .1s;
}

span.txt_gray {
  color: #999;
}

#sec_workspace .slider-for .slick-slide img {
  max-width:100%;
  max-height:100%;
}

#sec_workspace .slider-nav .slick-slide {
  transition: .3s ease;
  transform: scale(.85);
}

.btn_workspace_rsv {
  border: 2px solid transparent;
  border-radius: 0;
  letter-spacing:.04rem;
  padding: .6rem 1rem;
  background: #6bcbdd;
  color: #fff;
  display: table;
  margin: .4rem auto 1rem;
  transition: .2s;
}

.btn_workspace_rsv:hover,.btn_workspace_rsv:focus,.btn_workspace_rsv:active {
  border: 2px solid #333;
  color: #333;
  transition: .2s;
}
/*/workspacee*/

/*news*/
.news_wrapper {
  background: url(../images/news_bg.jpg) center no-repeat;
  height: auto;
  padding: 2rem;
  background-size: cover;
}

.news_wrapper h2.heading {
  display: inline-block;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  line-height: inherit;
}

.block_news {
  display: table;
  border-collapse: separate;
  border-spacing: 1rem .6rem;
  margin: 0 auto;
  max-width: 1040px;
}

a.news_box {
  margin-top: 0;
  margin-bottom: 0;
  padding: 1rem;
  text-align:  left;
  border: 2px solid #d2d2d2;
  background: rgba(255,255,255,.9);
  display: table-cell;
  vertical-align: middle;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  transition: .3s;
}

a.news_box:hover {
  border: 2px solid #6bcbde;
  background: rgba(255,255,255,1);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: .3s;
}

a.news_box p {
  color: #333;
}

.news_box img {
  border: 2px solid #E4E4E4;
  width: 100%;
}

a.news_box p.date {
  font-size: 1rem;
  color: #6BCBDE;
  margin-top: 0;
}

.news_box p {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.6;
}

.news_box a.btn_link {
  margin-top: 1rem;
  font-size: 1rem;
  padding-right: 1.2rem;
  padding-left: 1.2rem;
}

.news_box a.btn_link span {
  font-size: 1rem;
}

/*/news*/

/*sec_contact*/
#sec_contact {
  background: #e1e1e1;
  padding: 3rem 8rem;
  min-height: 24rem;
}

#sec_contact h2 {
  margin: 0 auto;
  display: table;
}

select.form-control {
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1rem;
  border: none;
  width: 100%;
  margin: 2rem auto 1.2rem;
  display: block;
  max-width: 600px;
  font-weight: 300;
  height: 3rem;
}

form {
  max-width: 600px;
  margin: 1rem auto;
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

.box_form input.form-control,
.box_form textarea.form-control {
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  border: none;
  font-weight: 300;
  border-radius: 4px;
}

input[type="text"], textarea, textarea.form-control {
  background: #fff;
  padding: 0 10px;
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

.box_form .panel-heading_01,
.box_form .panel-heading_02 {
  padding: .6rem;
  background: #fff;
  border-radius: 4px;
  .transition: .3s;
}

.box_form .panel-heading_01.panel_open,
.box_form .panel-heading_02.panel_open {
  border-radius: 4px 4px 0 0;
  .transition: .3s;
}

.box_form .panel-title_01,
.box_form .panel-title_02 {
  margin-bottom: 0;
  display: block;
  font-size: 1rem;
  font-weight: 300;
  color: #555;
}

.icon_arrow {
  transform: rotate(90deg);
  transition: .3s;
}

.panel-heading_01.panel_open .icon_arrow,
.panel-heading_02.panel_open .icon_arrow {
  transform: rotate(-90deg);
  transition: .3s;
}

textarea, textarea.form-control {
  height: 300px;
}

.panel-body {
  background: rgb(255, 255, 255);
  flex: 1 1 auto;
  padding: 1.25rem;
}

.collapse_01.panel-body {
  padding-left: 2rem;
}

.panel-body p {
  font-size: 0.9375rem;
  margin-top: .2rem;
  margin-bottom: .6rem;
  line-height: 1.5;
}

.panel-body p.txt_top {
  margin-left: -1rem;
}

.panel-body li {
  color: #333;
  padding-bottom: .2rem;
  padding-top: .4rem;
  margin-left: -1rem;
}

p.txt_check {
  width: 90%;
  line-height: 1.6;
}

.btn_submit {
  border: 2px solid transparent;
  border-radius: 0;
  padding: .6rem 2rem;
  background: #fff;
  margin-top: 1rem;
  transition: .2s;
}

.btn_submit:hover,
.btn_submit:focus {
  border: 2px solid #333;
  transition: .2s;
}

.btn_submit:hover:active {
  background: #333;
  color: #fff;
  transition: .2s;
}

/*about.html*/
/*about_top*/
.about_top_wrapper {
  background: #fff;
  height: auto;
}

.about_top_01 {
  padding: 33vh 1rem 0;
}

.about_top_01 p {
  font-size: 1.2rem;
  margin-top: 2rem;
  line-height: 1.8;
}

.about_top_02 {
  background:  url(../images/about_top.jpg) center no-repeat;
  background-size: cover;
  height: 100vh;
}

.user_maker_wrapper p,
.message_box  p,
.future_wrapper p,
.AND_You_wrapper p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/*&IoT*/
.AND_IoT_wrapper {
  background: #fff;
  height: auto;
}

.AND_IoT_01 {
  background:  url(../images/apps_image.jpg) center no-repeat;
  background-size: cover;
  height: 100vh;
}

.AND_IoT_02 {
  padding: 33vh 0 0;
}

.AND_IoT_02 p {
  font-size: 1.2rem;
  margin-top: 2rem;
  line-height: 1.8;
}

/*/&IoT*/

/*user_maker*/
.user_maker_wrapper {
 height: auto;
 border-bottom: 1px solid #E4E4E4;
 position: relative;
}

.user_maker_wrapper h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

h2.txt_blue {
  color: #6bcbde;
  font-weight: 400;
}

.user_maker_01 {
  padding: 2rem 0;
}

.user_maker_01 h2 {
  margin-top: 4rem;
}

img.circle_img {
  border: 6px solid #6BCBDE;
  border-radius:  50%;
  width: 300px;
  margin: 3rem auto 2.4rem;
}

.user_maker_02 {
  padding: 2rem 0 3rem;
  background: #f2f4f5;
}

img.circle_img_02 {
  border: 6px solid #6BCBDE;
  border-radius:  50%;
  width: 300px;
  margin: 3rem auto 0;
}

.user_maker_wrapper .heading img {
  max-width: 34rem;
}

.logo_arrow_box {
  position: absolute;
  top: 15rem;
  left: 0px;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 300px;
}

.logo_and {
  position: absolute;
  top: 1rem;
  left: 0px;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100px;
  z-index: 90;
}

.arrow_blue {
  position: absolute;
  top: 1rem;
  left: 0px;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 220px;
  z-index: 50;
}

.arrow_red {
  position: absolute;
  top: 5rem;
  left: 0px;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 220px;
  z-index: 50;
}

/*/user_maker*/

/*future*/
.future_wrapper {
 background: url(../images/map_world.svg) center no-repeat;
 background-size: 100%;
 padding: 4rem 0;
 border-bottom: 1px solid #E4E4E4;
 position: relative;
 height: auto;
}

.future_wrapper p {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.future_wrapper img {
  font-size: 1.2rem;
  margin-top: 2rem;
  line-height: 1.8;
  text-align: left;
}

.message_box p {
  font-size: 1.2rem;
  margin-top: 1.4rem;
  line-height: 1.6;
  padding: 1rem 1.6rem;
}

.message_box p.m_01 {
  background: rgba(107,203,222,.35);
}

.message_box p.m_02 {
  background: rgba(217, 191, 252, 0.44);
}

.message_box p.m_03 {
  background: rgba(252, 186, 185, 0.36);
}

.message_box p.m_04 {
  background: rgba(251, 218, 151, 0.41);
}

.message_box p.m_05 {
  background: rgba(203, 251, 159, 0.41);
}


.message_box p b {
  font-weight: bold;
}

img.circle {
  display: block;
  margin: 2rem auto 0.4rem;
}

/*/future*/

/*AND_You*/

.AND_You_wrapper {
 background: url(../images/hostel_image.jpg) center no-repeat;
 background-size: 100%;
 border-bottom: 1px solid #E4E4E4;
 position: relative;
 padding: 14rem 0;
 height: auto;
}

.AND_You_wrapper p {
  font-size: 1.2rem;
  margin-top: 2rem;
  line-height: 1.8;
}

a.icon_arrow {
  font-size: 2rem;
  color: #333;
}

/*/AND_You*/

/*thanks*/

.thanks_box,
.input_confirm_box  {
  padding: 8rem;
  font-size: 1rem;
}

.input_confirm_box input {
  font-size: 1rem;
  margin: 2rem;
}

.input_confirm_box h3 {
  line-height: 1.6;
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.input_confirm_box .btn {
  padding-right: 1.2rem;
  padding-left:  1.2rem;
  border-radius: 0;
}

input.btn_send,
a.btn_to_top {
  border: 2px solid transparent;
  border-radius: 0;
  padding: .6rem 1rem;
  background: #6bcbdd;
  margin-top: 1rem;
  color: #fff;
  display: inline-block;
  margin: 2rem;
  transition: .2s;
}

input.btn_send:hover,
a.btn_to_top:hover {
  border: 2px solid #333;
  color: #333;
  transition: .2s;
}

input.btn_cancel {
  border: 2px solid transparent;
  border-radius: 0;
  padding: .6rem 1rem;
  background: #ccc;
  margin-top: 1rem;
  color: #666;
  display: inline-block;
  margin: 2rem;
  transition: .2s;
}

input.btn_cancel:hover {
  border: 2px solid #333;
  color: #333;
  transition: .2s;
}

.input_confirm_box tr {
  line-height: 2;
}

.input_confirm_box th {
  font-weight: bold;
}

.input_confirm_box td {
  text-align: left;
  padding-left: 2rem;
}

.thanks_box p {
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
}

.thanks_box a {
  margin-top: 1rem;
}
/*/thanks*/

/*confirm*/
.formTable.mt_1 {
  margin-top: 1rem;
}

p.error_messe {
  color: #f10000;
}

/*/confirm*/

@media(max-width: 1200px) {
  .about_top_01 p {
    font-size: 1.2rem;
  }

  img.circle {
    margin: 1rem auto 0.4rem;
  }

}

@media(max-width: 992px) {
  h1 {
    font-size: 1.1rem;
  }

  span.sp{
    display: none;
  }

  .wrapper_logo {
    width: 50%;
    top: 22%;
  }

  .btn_movie img {
    width: 5rem;
  }

  .box_btn_movie {
    width: 5rem;
  }

  #sec_01 {
    height: 60vh;
  }

  .area_wrapper {
    height: 560px;
  }
  .map_box img {
    max-width: 600px;
  }

  .hostel_info_box p {
    margin-top: 1rem;
    font-size: 1rem;
  }

  a.btn_link {
    font-size: 1rem;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  .btn_submit {
    font-size: 1em;
  }

  .box_hostel_link img.logo_AH {
    margin: 0 auto;
  }

  .nav_top  {
    padding-bottom: 1rem;
  }

  span {
    font-size: 1rem;
  }

  /*workspace*/
  #sec_workspace {
    padding: 2rem 0;
  }

  #sec_workspace  h2.heading {
    display: table;
    line-height: inherit;
    margin: 0 auto 2rem;
  }

  .container_ws {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 100%;
  }

  .block_img {
    flex: 1;
    width: 100%;
  }

  .block_txt {
    flex: 1;
    background: #fff;
    margin: 0 0 1rem 0;
    padding: 1rem 1.2rem;
  }

  .box_info_ws table {
    border-collapse: separate;
    width: 100%;
  }

  .box_info_ws table td {
    border-bottom: .4rem solid transparent;
    display: block;
  }

  td.td_cate {
    word-break: keep-all;
  }

  td.td_cate p {
    background: #f7f7f7;
    color: #333;
    padding: .2rem .6rem;
    text-align: center;
  }

  td.td_info {
    padding: 0 1rem;
  }

  td.td_info p {
    padding-bottom: .4rem;
    line-height: 1.5;
  }

  td.td_info p a {
    color: inherit;
    line-height: 1.5;
    transition: .1s;
  }

  td.td_info p a:hover {
    opacity: .5;
    transition: .1s;
  }

  span.txt_gray {
    color: #999;
  }

  #sec_workspace .slider-for .slick-slide img {
    max-width:100%;
    max-height:100%;
  }

  #sec_workspace .slider-nav .slick-slide {
    transition: .3s ease;
    transform: scale(.85);
  }

  .btn_workspace_rsv {
    border: 2px solid transparent;
    border-radius: 0;
    letter-spacing:.04rem;
    padding: .6rem 1rem;
    background: #6bcbdd;
    color: #fff;
    display: table;
    margin: .4rem auto 1rem;
    transition: .2s;
  }

  .btn_workspace_rsv:hover,.btn_workspace_rsv:focus,.btn_workspace_rsv:active {
    border: 2px solid #333;
    color: #333;
    transition: .2s;
  }

  .slick_arrow_back {
    position: absolute;
    left: .6rem;
    font-size: 2rem;
    line-height: 4rem;
  }

  .slick_arrow_forward {
    position: absolute;
    right: .6rem;
    font-size: 2rem;
    line-height: 4rem;
  }
  /*/workspace*/

  /*#sec_group*/
  .box_txt {
    width: 100%;
    margin: 1rem auto;
    padding: 0 1rem;
    position: relative;
  }

  .box_txt p {
    line-height: 1.7;
    font-size: 1rem;
  }

  .btn_group_rsv {
    margin: 1rem auto;
  }

  .about_top_01 {
    padding: 7rem 1rem 1rem;
  }

  .about_top_02 {
    background:  url(../images/about_top_mobile.jpg) center no-repeat;
    background-size: 100%;
    height: 240px;
    margin-top: 2rem;
  }

  .ic_airplane {
    display: none;
  }

  .ic_mail {
    display: none;
  }
  /*/#sec_group*/

  /*footer*/

  /*IoT*/
  .AND_IoT_01 {
    display: none;
  }

  .AND_IoT_01_mobile {
    display: block;
    background:  url(../images/apps_image_mobile.jpg) center no-repeat;
    background-size: 100%;
    height: 240px;
    margin-top: 2rem;
  }

  .AND_IoT_02 {
    padding: 2rem 0 0;
  }
  /*/IoT*/

  /*user_maker*/
  .user_maker_01 h2 {
    margin-top: 2rem;
  }

  .logo_arrow_box {
    display: none;
    top: 40rem;
  }

  .logo_and {
    width: 60px;
    top: 20px;
  }

  .arrow_blue {
    top: 3rem;
    right: -100px;
    width: 100px;
    transform: rotate(90deg);
  }

  .arrow_red {
    top: 3rem;
    left: -100px;
    width: 100px;
    transform: rotate(90deg);
  }

  .user_maker_wrapper p,
  .message_box  p,
  .future_wrapper p,
  .AND_You_wrapper p {
    font-size: 1rem;
  }

  /*/user_maker*/

  /*AND_You*/
  .AND_You_wrapper {
    padding: 10rem 0;
  }
  /*AND_You*/

}
@media(max-width: 767px) {
  /*common*/
  h2 {
    font-size:  1.2rem;
    line-height: 1.4;
  }

  h2.heading {
    font-size:  1rem;
    line-height: 1.4;
    border-bottom: 2px solid #6BCBDE;
    padding-bottom: 8px;;
  }

  p,a,span {
    line-height: 1.4;
    font-size: 1rem;
  }

  a.btn_link {
    font-size: 1rem;
  }

  br.pc {
    display: none;
  }

  br.sp {
    display: block;
  }

  header {
    height: 50px;
  }

  .btn_show_sp {
    display: block;
  }

  a.btn_show_pc {
    display: none;
  }

  .navbar-brand>img,
  .past-main .navbar-brand>img {
    width: 5rem;
  }

  a.link_hostel:after {
    display: none;
  }

  .top_logo_box img {
    height: 20px;
  }

  .hamburger {
    right: 0;
    width: 50px;
    height: 30px;
  }

  .hamburger__line {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 1px;
  }

  .hamburger__line--1 {
    top: 6px;
  }

  .hamburger__line--2 {
    top: 12px;
  }

  .hamburger__line--3 {
    top: 18px;
  }

  .nav-open .hamburger__line--1 {
    transform: rotate(45deg);
    top: 14px;
  }

  .nav-open .hamburger__line--3 {
    transform: rotate(-45deg);
    top: 14px;
  }

  p.label_r {
    position: inherit;
    display: inline-block;
    -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    transition: .2s;
    top: inherit;
    right: inherit;
    padding: .4rem 1rem;
  }

  a.hostel_info_box:hover p.label_r {
    padding: .4rem 2rem;
  }

  span.label_sp {
    color: #fff;
    display: inline;
    padding: .2rem .8rem;
    background: #f10000;
    border-radius: 2rem;
    z-index: 100;
    animation: inherit;
    margin-left: 1rem;
  }

  .navbar-default {
    background-color: #fff;
  }

  .nav_lang {
    margin-top: 1rem;
    margin-left: .4rem;
  }

  li.link_ja,
  li.link_en {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .nav_lang a {
    line-height: 1.1rem;
  }

  /*/common*/

  footer {
    padding: 3rem 0 10rem;
  }

  .box_share {
    margin-bottom: 1.8rem;
  }

  .box_hostel_link a {
    display: block;
    margin: 1.4rem 1rem;
  }

  .box_sns {
    margin: 0 auto 2rem;
  }

  .box_hostel_logo {
    margin: .4 auto 1.4rem;
    width: 200px;
  }

  .box_hostel_link a {
    display: block;
    margin: 1rem;
  }
  /*footer*/

  /*#sec_top*/
  #sec_top {
    height: 80vh;
  }

  a.btn_about {
    margin: -2rem auto 0;
  }

  .box_gmark {
    width: 120px;
    top: 4.8rem;
    bottom: inherit;
  }
  /*#sec_01*/

  #sec_01 {
    height: 60vh;
  }

  #sec_01 h2 {
    font-size: 1rem;
  }

  .title_box {
    margin-top: 2rem;
    margin-bottom: -2rem;
  }

  .title_box::after {
    max-width: 14rem;
  }

  #sec_statement {
    padding: 2rem 0;
  }

  .txt_statement {
    margin-top: 0;
    padding: 2rem;
  }

  .contact_wrapper .contact_txt {
    font-size: 1rem;
    margin-top: 1rem;
  }

  input[type=checkbox], input[type=radio] {
    margin: 4px 10px 0 0;
  }

  /*about*/

  .txt_statement .txt_ahf {
    height: 1rem;
    margin: 0rem auto .6rem;
  }

  .txt_statement {
    font-size: .9rem;
    line-height: 1.4;
    padding: 1.2rem;
    margin: 0;
  }
  /*statement*/

  .txt_statement p {
    font-size: .9rem;
    line-height: 1.8;
  }

  /*area*/
  .area_wrapper {
    padding: 1.2rem 0 0;
    height: auto;
  }

  .map_box {
    margin-top: 3rem;
    margin-bottom: 1rem;
  }

  .map_box img {
    max-width: 300px;
  }
  /*/area*/

  #sec_statement h2 {
    font-size: 1.4rem;
  }

  .txt_statement p {
    font-size: 1rem;
  }

  /*hostel*/

  .hostel_wrapper {
    padding: 1.4rem 1rem 0;
  }

  .hostel_info_box {
    border: 4px solid #6BCBDE;
    padding: 1rem 0.4rem .2rem;
    margin-bottom: 1rem;
  }

  .cmg_box {
    border: 4px solid #d9d3b4;
  }

  .hostel_wrapper .logo_box {
    margin-top: 0;
  }

  .cmg_box .label_r {
    position: absolute;
    top: 0.48rem;
    right: -.88rem;
    background: #f9db00;
    z-index: 10;
    padding: .4rem 1.4rem .4rem 2rem;
  }

  .cmg_box:hover .label_r {
    padding: .4rem 2rem .4rem 2rem;
  }

  .cmg_box .label_r p {
    line-height: 1.5;
  }

  .cmg_box .triangle {
    position: absolute;
    top: 3.6rem;
    right: -.9rem;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 10px #7d6e00;
  }

  /*/hostel*/

  /*news*/
  a.news_box {
    display: block;
    margin-bottom: 1rem;
  }

  .news_wrapper {
    padding: 0 0 2rem;
  }

  .block_news {
    margin: 0 auto -1.2rem;
  }
  .news_box {
    border: 4px solid #E4E4E4;
    padding: 1rem 0;
    margin-bottom: 1rem;
  }

  .news_box .date {
    font-size: 1rem;
    margin-top: 0.8rem;
  }

  .news_box p {
    line-height: 1.6;
    font-size: 1rem;
  }

  /*/news*/

  #sec_contact {
    padding: 2rem;
  }

  .thanks_box p {
    font-size: 1rem;
    line-height: 1.8;
    text-align: center;
  }

  .thanks_box a {
    margin-top: .8rem;
  }
  /*/contact*/

  /*about.html*/
  /*top*/
  .about_wrapper {
    padding: 2rem 0 0;
  }

  .about_top_01 {
    padding: 5rem 1rem 0;
  }

  .about_top_01 p {
    font-size: 1rem;
    margin-top: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.3rem;
  }

  .about_top_02 {
    height: 100px;
    padding: 14% 0;
    margin-top: 0;
  }


  /*/top*/

  /*IoT*/
  .AND_IoT_02 {
    padding: 2rem 0 0;
  }

  .AND_IoT_02 p {
    font-size: 1rem;
    margin-top: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.3rem;
  }

  .AND_IoT_01_mobile {
    height: 100px;
    margin-top: 0;
    padding: 14% 0;
  }

  /*/IoT*/

  /*user_maker*/
  img.circle_img {
    border: 4px solid #6BCBDE;
    width: 200px;
    margin: 2rem auto 1rem;
  }

  .user_maker_02 {
    padding: 2rem 0;
  }

  .user_maker_wrapper h2 {
    font-size: 1rem;
  }

  .user_maker_wrapper p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .logo_arrow_box {
    display: none;
    top: 43%;
  }

  /*/user_maker*/

  /*future*/
  .future_wrapper p {
    font-size: 1rem;
  }

  .future_wrapper {
    padding: 2rem 0;
  }

  /*/future*/

  /*AND_You*/
  .AND_You_wrapper {
   background: url(../images/hostel_image_mobile.jpg) center no-repeat;
   background-size: 100%;
   position: relative;
   padding: 8rem 0;
   height: auto;
 }

 .AND_You_wrapper p {
  font-size: 1rem;
}
/*/AND_You*/

/*thanks, comfirm*/
.input_confirm_box {
  padding: 2rem;
  font-size: 1rem;
}

.thanks_box {
  padding: 2rem;
  font-size: 1rem;
}

.input_confirm_box p,
.thanks_box p {
  text-align: left;
}

.input_confirm_box input {
  font-size: 1rem;
  margin: 1rem;
}

.input_confirm_box h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/*thanks, comfirm*/

}

@media screen and (max-width: 500px) {
  #sec_01 {
    height: 40vh;
  }

  .wrapper_logo {
    width: 60%;
    top: 30%;
  }

}

@media screen and (max-width: 399px) {
  p,a,span {
    font-size: 1rem;
  }

  .txt_statement {
    padding: 2rem;
  }

  h2.heading {
    font-size: 1.2rem;
  }

  .hostel_info_box p,
  .news_box p,
  a.btn_link,
  .news_box a.btn_link {
    font-size: 1rem;
  }

  .contact-form {
    text-align: center;
  }

  .form .sub-form .contact-form {
    text-align: left;
  }

  .back-to-top {
    right: 10px;
  }
}

@media only screen and (min-width: 240px) {
  .navbar.past-main {
    height: inherit;
  }
}

/*media query