@charset "UTF-8";
#top-page .sec-contents {
  margin-bottom: 5pc
}

#top-page .sec-ttl {
  position: relative;
  padding: 30px 0 0;
  margin-bottom: 50px;
  text-align: center
}

#top-page .sec-ttl .ttl-border:after, #top-page .sec-ttl .ttl-border:before {
  content: '';
  display: block;
  height: 30px;
  width: 1px;
  background: #000;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg)
}

#top-page .sec-ttl .ttl-border:before {
  top: 0;
  right: 50%;
  margin-right: -60px
}

#top-page .sec-ttl .ttl-border:after {
  bottom: 0;
  left: 50%;
  margin-left: -60px
}

#top-page .sec-ttl .txt-ttl {
  text-align: center;
  display: inline-block;
  font-size: 36px;
  letter-spacing: 1px;
  background: transparent;
  line-height: 1;
  padding: 10px 0 15px;
  position: relative
}

#top-page .sec-ttl .txt-ttl h1 {
  line-height: 44px
}

#top-page .sec-ttl .txt-ttl span {
  text-align: center;
  font-size: 1pc;
  font-weight: 400;
  display: block;
  margin-top: 10px
}

#top-page .bg-fixed-cmn {
  position: relative;
  margin: 0 0 12%;
  padding: 0;
  -webkit-transform: skewY(-7deg);
  transform: skewY(-7deg);
  height: 450px;
  width: 100%;
  overflow: hidden;
  -webkit-transform-origin: center right;
  transform-origin: center right
}

#top-page .bg-fixed-cmn-in {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 200%;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
  z-index: -1;
  -webkit-transform: skewY(7deg);
  transform: skewY(7deg);
  background-repeat: no-repeat;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}

#top-page #area-main {
/*  margin-bottom: 5pc; 20200402トップページ追加文言前の設定 */
  margin-bottom: 3.75pc;	
}

#top-page #main-slide {
  position: relative;
  margin: 0 auto 30px;
  max-width: 100vw;
  height: auto;
}

#top-page #main-slide .swiper-slide img {
  width: 100%
}

#top-page .swiper-container {
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  padding-bottom: 40px
}

#top-page .swiper-pagination-bullet {
  width: 9pt;
  height: 9pt
}

#top-page .swiper-pagination-bullet-active {
  background: #000
}

#top-page .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 8px
}

#top-page #area-concept.section {
  padding-bottom: 0
}

#top-page #area-concept .sec-contents {
  text-align: center
}

#top-page #area-concept .sec-contents h3 {
  font-size: 28px;
  margin-bottom: 20px
}

#top-page #area-project .sec-contents:after {
  content: "";
  display: block;
  clear: both
}

#top-page #area-project .box-project {
  display: table;
  width: 100%;
  min-height: 500px
}

#top-page #area-project .box-project>div {
  display: table-cell;
  width: 50%;
  vertical-align: middle
}

#top-page #area-project .box-project .box-img {
  background: no-repeat center center;
  background-size: cover
}

#top-page #area-project .box-project .box-text {
  padding: 20px 4%
}

#top-page #area-project .box-project .btn-cmn {
  margin: 5% 0 0
}

#top-page #area-project .box-project .box-text dt {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px
}

#top-page #area-project .box-project .box-text dd .label {
  font-size: 13px;
  color: #000;
  background: #eee;
  padding: 7px;
  min-width: 135px;
  text-align: center;
  line-height: 1;
  display: inline-block;
  margin-bottom: 15px
}

#top-page #area-project .box-project-01 .box-img {
  background-image: url(../images/service_01.jpg);
  height: 500px
}

#top-page #area-project .box-project-02 .box-img {
  background-image: url(../images/service_02.jpg);
  height: 500px
}

#top-page #area-map .sec-in {
  background: #f7f7f7;
  padding-bottom: 2em
}

#top-page #area-map .sec-contents iframe {
  width: 100%;
  height: 500px;
  max-width: 100%;
  margin-bottom: 2em;
  border: 0
}
/*20190916追加*/
#top-page #area-map .traffic{
  margin: 5% auto;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  box-sizing: border-box;
}
#top-page #area-map .traffic img{
  width: 100%;
}

#top-page #bnr.section {
  margin-bottom: 5pc
}

#top-page #bnr ul {
  display: flex
}

#top-page #bnr li {
  color: #fff;
  text-align: center;
  width: 33.33333%;
  padding: 0 10px
}

#top-page #bnr li img {
  width: 100%
}

#top-page #bnr li span {
  display: block;
  font-size: 14px;
  font-weight: 400
}

#top-page #bnr li a:hover {
  background: rgba(0, 0, 0, .2)
}

#top-page #bnr li.facebook a {
  background: 0
}

#top-page #bnr li.facebook a:hover {
  background: hsla(0, 0%, 100%, .2)
}

#top-page #bnr dl {
  text-align: center;
  margin: 3em auto 1em;
  font-size: 18px;
  font-weight: 700;
  background-color: #ccc;
  display: table;
  padding: 1em
}

@media(max-width:640px) {
  #top-page #bnr ul {
    display: block;
    margin: 0 auto;
    text-align: center
  }
  #top-page #bnr li {
    width: 100%;
    padding: 10px;
    margin: auto;
    text-align: center
  }
}

/* --------------------------------- */

#top-page #bnr .colum2 li {
  color: #fff;
  text-align: center;
  width: 50%;
  padding: 0 10px
}

#top-page #bnr .colum2 li img {
  width: 100%
}

#top-page #bnr .colum2 li span {
  display: block;
  font-size: 14px;
  font-weight: 400
}

#top-page #bnr .colum2 li a:hover {
  background: rgba(0, 0, 0, .2)
}

#top-page #bnr .colum2 li .facebook a {
  background: 0
}

#top-page #bnr .colum2 li .facebook a:hover {
  background: hsla(0, 0%, 100%, .2)
}

/* --------------------------------- */

@media only screen and (max-width:1050px) {
  #top-page .container {
    padding: 0 2%
  }
  #top-page .bg-fixed-cmn {
    height: 300px
  }
  #top-page .bg-fixed-cmn-in {
    height: 420px;
    padding: 0;
    background-attachment: inherit
  }
  #top-page #area-concept .sec-contents {
    padding: 0 4%
  }
  #top-page #area-concept .sec-contents h3 {
    font-size: 24px;
    text-align: left
  }
  #top-page #area-concept .sec-contents p {
    text-align: left
  }
  @media only screen and (max-width:768px) {
    #top-page .container {
      padding: 0
    }
    .txt-cmn-lineheight2 {
      line-height: inherit
    }
    #top-page .bg-fixed-cmn {
      height: 200px;
      margin: 0 0 15%
    }
    #top-page .bg-fixed-cmn-in {
      height: 300px;
      padding: 0;
      background-attachment: inherit
    }
    #top-page #area-main {
      margin-bottom: 10%
    }
    #top-page #main-slide {
      height: 60vh;
    }
    #top-page #main-slide .swiper-slide img {
      width: 100%;
      /* min-height: 40vh; */
      height: auto;
    }
    #top-page #area-concept.section, #top-page #area-project {
      padding-bottom: 12%
    }
    #top-page #area-project .box-project .box-text dt {
      font-size: 17px
    }
    #top-page #area-project .box-project.box-project-02 {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap
    }
    #top-page #area-project .box-project.box-project-02 .box-img {
      -webkit-box-ordinal-group: 0;
      -ms-flex-order: 0;
      -webkit-order: 0;
      order: 0
    }
    #top-page #area-project .box-project.box-project-02 .box-text {
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
      order: 1
    }
    #top-page #area-project .box-project, #top-page #area-project .box-project>div {
      display: block;
      width: 100%
    }
    #top-page #area-project .box-project .box-img {
      min-height: 300px
    }
    #top-page #area-project .box-project .btn-cmn {
      margin: 7% auto
    }
    #top-page #area-project .fig-column figure {
      width: 100%;
      height: auto;
      float: none;
      padding: 0 4%
    }
    #top-page #area-project .fig-column figure .box-img {
      height: 200px
    }
    #top-page #area-project .fig-column figure dl {
      color: inherit;
      position: initial;
      background: 0;
      padding: 4% 4% 10%
    }
    #top-page #bnr.section .flex-cmn {
      display: block;
      overflow: hidden;
      padding: 0 1%
    }
    #top-page #bnr ul {
      display: block;
      margin: 0 auto;
      text-align: center
    }
    #top-page #bnr li {
      width: 100%;
      padding: 10px;
      margin: auto;
      text-align: center
    }
    #top-page #bnr ul.flex-cmn li {
      background-size: cover
    }
  }
}

#guestroom {
  margin-bottom: 60px;
  position: relative
}

#guestroom:after {
  content: "";
  display: table;
  clear: both
}

#guestroom ul {
  margin: 0;
  padding: 0;
  background-color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100%;
}

#guestroom ul li {
  box-sizing: border-box;
  width: 50%;
  list-style: none;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#guestroom ul li:nth-of-type(1) {
  background-image: url(../images/guest_st.png)
}
#guestroom ul li:nth-of-type(2) {
  background-image: url(../images/guest_dt.png)
}
#guestroom ul li:nth-of-type(1), #guestroom ul li:nth-of-type(2) {
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover
}
#guestroom ul li:hover:nth-of-type(1) {
  background-image: url(../images/guest_st_bg.png)
}
#guestroom ul li:hover:nth-of-type(2) {
  background-image: url(../images/guest_dt_bg.png)
}


#guestroom ul li img {
  opacity: 1;
  width: 100vw;
  height: auto
}

#guestroom ul li:hover>img {
  opacity: 0;
  -webkit-transition: all .1s ease;
  transition: all .1s ease
}

#guestroom ul li a {
  text-decoration: none!important;
  color: #444
}

#guestroom ul li a{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
/*
#guestroom ul li a, #guestroom ul li a p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  font-weight: 700
}

#guestroom ul li a p.txthv_off {
  opacity: 1;
}

#guestroom ul li:hover a p.txthv_off {
  opacity: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease
}
*/

#guestroom ul li p{
  box-sizing: border-box;
  display: inline-block;
  background-color: hsla(0, 0%, 100%, .7);
  padding: 1em;
  font-size: 1.4rem;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  font-style: normal;
}
#guestroom ul li:hover p{
  background-color: hsla(0, 0%, 100%, .3);
}
/*
#guestroom ul li a p.txthv_off span em {
  font-style: normal;
  font-size: 1rem
}

#guestroom ul li a p.txthv_on {
  opacity: 0
}

#guestroom ul li a p.txthv_on, #guestroom ul li:hover a p.txthv_on {
  -webkit-transition: all .5s ease;
  -webkit-transition: all 1s ease;
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease
}

#guestroom ul li:hover a p.txthv_on {
  opacity: 1
}

#guestroom ul li a p.txthv_on span {
  box-sizing: border-box;
  display: inline-block;
  background-color: hsla(0, 0%, 100%, .7);
  padding: 1em;
  width: 60%;
  font-size: 1.4rem
}

#guestroom ul li a p.txthv_on span em {
  font-style: normal;
  font-size: 1rem
}
*/

.room {
  display: flex
}

.room_left {
  width: 56%;
  overflow: hidden
}

.room_left ul li {
  display: flex;
}

.room_left ul li img {
  max-width: 100vw;
  height: auto;
  width: 100vw
}

.room_right {
  width: 44%;
  text-align: center;
  background-color: #26282d;
  padding: 30px 0;
}

.room_right .bg {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 100%
}

.room_right .bg .center {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 5rem
}

.room_right .bg .center dl, .room_right .bg .center h3, .room_right .bg .center span {
  color: #fff
}

.room_right .bg .center dl {
  text-align: left
}

.room_right .bg .center dl dt {
  font-size: 1.5em;
  padding-bottom: 10px
}

#top-page .room_right .bg .center .btn-cmn {
  margin: 5% auto 0
}

@media(max-width:1200px) {
  .room {
    display: block
  }
  .room_left{
    height: 358px;
  }
  .room_left, .room_right {
    float: none;
    max-width: 100%;
    width: 100%
  }
  .room_right .bg .center {
    position: relative;
    top: 0;
    bottom: 100%;
    left: 50%;
    padding-top: 2em;
    padding-bottom: 1em;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
  }
}

@media(max-width:640px) {
  .room_right .bg .center {
    padding-right: 3%;
    padding-left: 3%
  }
  .room_left{
    height: 688px;
  }
  .room_left ul li {
    float: left;
    max-width: 100%;
    width: 100%;
    height: auto
  }
  #guestroom ul li {
    box-sizing: border-box;
    width: 100%;
    list-style: none;
    position: relative;
    text-align: center
  }
}
/*20190916追加*/
@media screen and (max-width: 789px){
  #top-page #area-map .traffic.sp-none{
    width: 90%;
    margin-right: 0;
    margin:5% auto;
  }
  #top-page #area-map .traffic img{
  width: 100%;
}
}

/* 20200402 トップページに追加文言 */

.top-text20200402 {
    font-family: utsukushiregular, ヒラギノ明朝 Pro W3, Hiragino mincho Pro, HiraMinProN-W3, 游明朝, Yu mincho, 游明朝体, YuMincho, HGS明朝E, HG明朝E, ＭＳ Ｐ明朝, MS PMincho, serif;
	text-align: center;
	margin: 0px auto 20px;
	background-color: #c00;
	color: #fff;
	line-height: 1.5em;
	padding: 10px 30px;
	border-radius: 20px;
	width: 650px;
}

.top-text20200402-s {
	line-height: 2em;
	margin: 0px auto 20px;
	text-align: center;
}

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

.top-text20200402 {
	width: 90%;
}

.top-text20200402-s {
	width: 90%;
	text-align: left;
}
	
}

.yanbaruT {
	margin: 0px auto 30px;
	max-width: 600px;
}

.yanbaruT img {
	margin: 0px;
	width: 100%;
	height: auto;
}

@media (max-width: 780px) {
	
.yanbaruT {padding: 0 3%;}
	
}

@media (max-width: 480px) {
  .yanbaruT {
    padding: 0 5%;
  }
  #top-page #main-slide .swiper-slide img {
    width: auto;
    height: 60vh;
  }
}

/* -----------------------------------
2024.08.15 - main slide背景に変更
-----------------------------------*/
#top-page #main-slide{
  height: 70vh;
}

#top-page .swiper-container .slide-01{
  background: url(../images/main_slide_01_s.jpg) center bottom / cover no-repeat;
}

#top-page .swiper-container .slide-02{
  background: url(../images/main_slide_02_s.jpg) center / cover no-repeat;
}

#top-page .swiper-container .slide-03{
  background: url(../images/main_slide_03_s.jpg) center / cover no-repeat;
}

#top-page .swiper-container .slide-04{
  background: url(../images/main_slide_04_s.jpg) center / cover no-repeat;
}

#top-page .swiper-container .slide-05{
  background: url(../images/main_slide_05_s.jpg) center / cover no-repeat;
}

#top-page .swiper-container .slide-06{
  background: url(../images/main_slide_06_s.jpg) center / cover no-repeat;
}

#top-page .swiper-container .slide-07{
  background: url(../images/main_slide_07_s.jpg) center / cover no-repeat;
}

@media screen and (max-width:680px){
  #top-page #main-slide{
    height: 50vh;
  }
  #top-page .swiper-container .slide-01{
    background:url(../images/main_slide_01_s.jpg) 65% bottom / cover no-repeat;
  }
}

/* -----------------------------------
2024.09.04 - トップページ
「ストーリー」と「動植物」追加
-----------------------------------*/
@media screen and (max-width: 965px) {
  #area-concept.section.story {
      padding: 0 2%;
  }
}

.sec-phot {
  max-width: 1770px;
  margin: 0 auto;
  padding: 10px;
}

.sec-phot img {
  width: 100%;
}

#top-page .creature {
  background-color: #f1f1f1;
  margin: 100px 0;
  padding: 100px 10px;
  width: 100%;
}

#top-page .creature .sec-in {
  max-width: 1271px;
  margin: 0 auto;
  width: 100%;
}

#top-page .creature .sec-ttl {
  margin-bottom: 30px;
}

#top-page .creature .sec-ttl .txt-ttl {
  text-align: left;
  display: inline-block;
  font-size: 24px;
  letter-spacing: 1px;
  background: transparent;
  line-height: 1.5;
  padding: 0 0 15px;
  position: relative;
}

#top-page .creature .sec-ttl p {
  text-align: left;
  line-height: 2;
}

#top-page .creature_box.first {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

#top-page .creature .creature_box.first .sec-ttl {
  width: 40%;
  padding-top: 0;
  padding-right: 20px;
}

#top-page .creature_box.first .creature-phot {
  max-width: 750px;
}

#top-page .creature_box.first .creature-phot img {
  width: 100%;
}

#top-page .creature_box.second .creature-phot {
  max-width: 480px;
}

#top-page .creature_box.second .creature-phot img {
  width: 100%;
}

#top-page .creature .creature_box.second .sec-ttl {
  width: 60%;
  padding: 2%;
}

#top-page .creature_box.second {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 20px;
  flex-direction: row-reverse;
}

#top-page .creature_box.p-list .creature-phot {
  max-width: 1271px;
  margin: 0 auto;
}

#top-page .creature_box.p-list .creature-phot img {
  width: 100%;
}

@media screen and (max-width: 1080px) {
  #top-page .creature .creature_box.first .sec-ttl {
    width: 50%;
  }
  #top-page .creature_box.first .creature-phot {
    max-width: 60%;
  }
  #top-page .creature .creature_box.second .sec-ttl {
    width: 60%;
    padding: 0 20px;
  }
}

@media screen and (max-width: 965px) {
  #top-page .creature_box.first {
    display: block;
    margin: 0 auto 20px;
  }
  #top-page .creature .creature_box.first .sec-ttl {
    width: 100%;
    padding-right: 0px;
  }
  #top-page .creature_box.first .creature-phot {
    max-width: 100%;
  }
  #top-page .creature_box.second {
    display: block;
    margin: 0 auto;
  }
  #top-page .creature .creature_box.second .sec-ttl {
    width: 100%;
    padding: 20px 0;
  }
  #top-page .creature_box.p-list .creature-phot {
    margin: 20px auto;
  }
  #top-page .creature_box.second .creature-phot {
    max-width: 100%;
  }
  #top-page .creature {
    padding: 60px 20px;
  }
}