@charset "utf-8";
/* CSS Document */
/*--------------------------------------------------
 common 共通の設定
----------------------------------------------------*/
.pcOnly {
  display: block;
}
.spOnly {
  display: none;
}

article {
  font-family: 'Avenir','Helvetica,Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic, "Yu Gothic Medium", "Yu Gothic",'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #444;
  width: 100%;
  line-height: 1.8;
  text-align: justify;
  letter-spacing: 0.1rem;
  font-size: 1.6rem;
}
/*見出し*/
article h2 {
  font-size: 4.5rem;
  position: relative;
  padding-bottom: 10px;
  text-align: center;
}
article h2 span {
  font-size: 1.8rem;
  display: block;
}
article h2:before {
  content: '';
  position: absolute;
  bottom: 42%;
  left: 50%;
  transform: translateX(-54%);
  width: 150px;
  /*width: 100%;*/
  height: 5px;
  background-image: repeating-linear-gradient(45deg, #9eb283 0px, #9eb283 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
  background-size: 8px 8px;
}
/*テキスト*/
article .txt {
  max-width: 750px;
  margin: 50px auto;
}
/*明朝体フォント*/
.mincho{
	font-family: 'League Script', cursive;
	font-style: normal;
	font-weight: 300;
}

.mincho span{
		/*font-family: fot-tsukuaoldmin-pr6n, sans-serif;*/
	font-family: "BIZ UDMincho", serif;
}
/*マーカーアニメーション*/
.marker-animation.active {
    background-position: -100% .5em;
}
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 3s ease;
    font-weight: bold;
}
/*画像*/
/*article img {
	width: 100%;
	height: auto;
}*/
/*スマホ表示*/
@media screen and (max-width: 767px) {
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }
  article .txt {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/*--------------------------------------------------
 #top
----------------------------------------------------*/
/* ▼top cssここから▼ */
#top {
  width: 100%;
  height: 105vh;
  background-color: #464646;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/bg_top.jpg");/*背景画像のアドレスを入れる*/
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}
#top h1 {
font-family: "BIZ UDMincho", serif;
  position: absolute;
  height: 105vh;
  display: flex;
  margin: 0;
  justify-content: center;
  align-items: center;
  color: #fff;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 3rem;/*フォントサイズ自由に*/
  right: 50%;
  left: 50%;
  top: -5vw;
	letter-spacing: 0.2em;
	font-weight: 300;
  /*width: 130px;*/
}
#top h1 span{
	font-size:2.5rem;
}

#top h3.topIcon{
	font-size: 3rem;
    position: absolute;
    padding-bottom: 10px;
    text-align: center;
	z-index: 5;
	color: #fff;
	top: 50%;
    left: 50%;
    transform: translateY(30%) translateX(120%);
    -webkit- transform: translateY(30%) translateX(120%);
	width:260px;
/*	height: 300px;
	padding-top:100px;*/
}

#top h3.topIcon span{
	display: block;
	font-size: 1.6rem;
}

#top a.scroll {
  display: inline-block;
  padding: 10px 10px 140px;
  position: absolute;
  right: 49%;
  top: 83vh;
  z-index: 2;
  transform: translateX(50%);
  overflow: hidden;
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  writing-mode: vertical-lr;
}
#top a.scroll::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 1px;
  height: 220px;
  background: #fff;
}
#top a.scroll::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 1px;
  height: 220px;
  background: rgba(255, 255, 255, .4);
}
#top a.scroll::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
/*スマホ表示*/
@media screen and (max-width: 639px) {
  #top {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/bg_top.jpg");
    background-attachment: scroll;
  }
  #top h1 {
    font-size: 2.7rem;/*フォントサイズ自由に*/
    top: -15vw;
  }
	
	#top h3.topIcon{
		font-size: 2rem;
		width:180px;
		height: 180px;
		padding-top:50px;
	}
	
	#top h3.topIcon span{
		font-size: 1.4rem;
	}
  
  #top a.scroll::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    width: 1px;
    height: 220px;
    background: #fff;
  }
  #top a.scroll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    width: 1px;
    height: 220px;
    background: rgba(255, 255, 255, .4);
  }
}

/*--------------------------------------------------
 #lead
----------------------------------------------------*/

#lead{
	padding-top:100px;
}
#lead .txt{
	max-width: 800px;
}
/*#lead h3{
	font-size: 2.8rem;
	text-align: center;
}

#lead figure {
  max-width: 950px;
  margin: 50px auto;
}*/

/*スマホ表示*/
/*@media screen and (max-width: 767px) {
	#lead h3{
	text-align: left;
  }
	#lead figure {
    padding-left: 10px;
    padding-right: 10px;
  }
}*/

/*--------------------------------------------------
	#point
----------------------------------------------------*/
#point {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 960px;
    margin: 150px auto 180px;
		align-items: flex-end;
	gap:2em;
}
#point h3{
	font-family: "BIZ UDMincho", serif;
	margin-right: 30px;
	margin-left: 0;
	position: relative;
	font-size: 2.5rem;
	writing-mode: vertical-rl;
	line-height: 1.3;
	letter-spacing: 10px;
}
#point h3::before{
	content: '';
	width: 1px;
	height: 100%;
	position: absolute;
	background-color: #63B0A2;
	top: 0;
	right: -12px;
}
#point .txtBox{
	flex-basis: 65%;
	margin: 0 auto;
}
#point .txtBox .txt{
	display: flex;
	margin-bottom: 20px;
}
#point .txtBox .txt p{
	line-height: 2;
	margin-bottom: 1.5rem;
}

#point img{
	object-fit: contain;
max-width: 500px;
height:auto;
vertical-align: bottom;
}

@media screen and (max-width: 768px) {	
	#point {
		flex-wrap: wrap;
	}
	#point .txtBox{
		flex-basis: 100%;
		margin-bottom: 10px;
	}
	#point img{
		width: 100%;
		max-width: 768px;
		/*margin: 0 2%;*/
	}
}

/*--------------------------------------------------
 #plan
----------------------------------------------------*/
#plan{
	margin-bottom: 150px;
}
#plan figure {
  max-width: 950px;
  margin: 50px auto;
}
#plan figure img{
	width: 100%;
}
/*スマホ表示*/
@media screen and (max-width: 767px) {
  #plan figure {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*--------------------------------------------------
 #photos
----------------------------------------------------*/
#photos {
  width: 100%;
}
#photos .photo_wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 100px auto;
}
#photos .photo_wrap .wrap1,
#photos .photo_wrap .wrap2{
	margin: auto;
}
.photo_one {
  max-width: 800px;
  margin: 0 auto;
  padding: 2%;
}
.photo_one img {
  max-width: 100%;
}
.photo_three {
  max-width: 650px;
  padding: 2%;
  margin: 0 auto;
}
.photo_three img {
  max-width: 100%;
}
.photo_two {
  max-width: 800px;
  margin: auto;
}
.photo_two img {
  max-width: 100%;
}
.flexbox {
  display: flex;
}
.box1 {
  width: 50%;
  padding: 2%;
}
.box2 {
  width: 50%;
  padding: 2%;
}

.box {
  display: none;
  margin-top: 50px;
}
/*もっと見るボタン*/
.photo_btn {
  position: relative;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2;
  padding: 2rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
  color: #277a6b;
	margin: 50px auto 70px;
}
.btn-border-shadow {
  padding: calc(1.8rem - 12px) 5rem 1.8rem;
  background: #fff;
}
.btn-border-shadow:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 2px solid #277a6b;
  border-radius: 0.5rem;
}
.btn-border-shadow:hover {
  padding: calc(1.8rem - 6px) 5rem;
}
.btn-border-shadow:hover:before {
  top: -2px;
  left: -2px;
}
.btn-border-shadow--color {
  border-radius: 0;
  background: #d3e8e4;
}
.btn-border-shadow--color:before {
  border-radius: 0;
}
@media screen and (max-width:767px) {
  .flexbox {
    display: block;
  }
  .flexbox .box1 {
    width: 100%;
    margin: 0 auto;
  }
  .flexbox .box2 {
    width: 100%;
    margin: 0 auto;
  }
}
.animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/*--------------------------------------------------
 #area
----------------------------------------------------*/
#area figure {
  max-width: 960px;
  margin: 50px auto;
}

.spotlist{
	list-style-type: square;
	display:flex;
	flex-wrap:wrap;
	max-width: 600px;
    margin: 0px auto;
	color:hsla(105,24%,25%,1.00);
	font-size: 1.3rem;
}

.spotlist li{
	margin-left:20px;
	line-height: 1.8em;
}
	
	

/*スマホ表示*/
@media screen and (max-width: 767px) {
  #area figure {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*--------------------------------------------------
 #virtualtour
----------------------------------------------------*/
#virtualtour {
  max-width: 960px;
  margin: 50px auto;
}
.vrbox {
  width: 100%;
}
.vrbox iframe {
  height: 600px;
}
#virtualtour .vrbox {
  width: 100%;
}
/*スマホ表示*/
@media screen and (max-width: 767px) {
  .vrbox iframe {
    padding-left: 10px;
    padding-right: 10px;
    height: 400px;
  }
}
/*--------------------------------------------------
 #details
----------------------------------------------------*/
#details div {
  max-width: 960px;
  margin: 50px auto 0;
}
#details table {
  box-sizing: border-box;
  border-collapse: collapse;
  width: 100%;
}
#details table th, #details table td {
  border-block-end: 1px solid #DDDAD1;
  padding-inline-start: 8px;
  vertical-align: middle;
  font-style: normal;
  height: 2.8em;
  text-align: justify;
}
#details table th {
  width: 25%;
  font-weight: normal;
}
/*スマホ表示*/
@media (max-width: 767px) {
  #details div {
    padding-left: 10px;
    padding-right: 10px;
  }
  #details table {
    width: 100%;
  }
  #details table th, #details table td {
    display: block;
    width: 100%;
    height: auto;
    border-block-end: 0px;
    padding: 3px 10px;
  }
  #details table th {
    background-color: #d3d8ca;
  }
	
	#form{
		margin: 50px auto 100px!important;
	}
}
/*--------------------------------------------------
 #gmap
----------------------------------------------------*/
#gmap {
  text-align: center;
  margin: 5vw auto;
}
#gmap iframe {
  max-width: 960px;
}
/*スマホ表示*/
@media (max-width: 639px) {
  #gmap iframe {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*--------------------------------------------------
 #form
----------------------------------------------------*/
#form {
  text-align: center;
  margin: 5vw auto;
  max-width: 300px;
}
/* ---------------------------
.toform
------------------------------ */
#toform {
  height: 90px;
  width: 90px;
  position: fixed;
  bottom: 3%;
  right: 1.5%;
  z-index: 11;
  line-height: 90px;
  /*background: #00334E;*/
	background: #63B0A2;
  border-radius: 50%;
  transition: all 0.3s;
  opacity: 0;
}
#toform:hover {
  transform: scale(1.2);
 /* background: #24ac6f;*/
	background: #BB9B89;
}
#toform a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: absolute;
  top: 22%;
  left: 22%;
}
#toform span {
  align-self: center;
  color: #FFFFFF;
  font-size: 50px;
}
.bl_backToTop {
  z-index: 98;
}
#toform.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#toform.DownMove {
  animation: DownAnime 1s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(200px);
  }
}
/*スマホ表示*/
@media screen and (max-width:639px) {
  #toform {
    height: 70px;
    width: 70px;
  }
  #toform span {
    font-size: 40px;
  }
}