@charset "UTF-8";
@import url("//use.fontawesome.com/releases/v5.7.2/css/all.css");
/* mixins
------------------------------------------------------- */
/* 色指定
------------------------------------------------------- */
#top .wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
#top .wrap .content section {
  position: relative;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#top .wrap .main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  text-align: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#top .wrap .main .main-box {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
#top .wrap .main .main-box .main-photo {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
#top .wrap .main .main-box .main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#top .wrap .content section#topLeadArea{
	width: 100%;
	background-color: #5a544b;
	padding: 10% 0 20%;
}
#top .wrap .content section#topLeadArea .topLead{
	width: 80%;
	margin: 0 auto 2rem;
	color: #fff;
	text-align: justify;
	font-size: 16px;
	font-size: 1rem;
	line-height: 2;
}
#top .wrap .content section#cityArea{
	width: 96%;
	display: flex;
	justify-content: space-between;
	margin: -14% auto 10% auto;
	padding: 0;
	z-index: 100;
}
#top .wrap .content section#cityArea .itemBox{
	width: 32%;
}
#top .wrap .content section#cityArea .itemBox:nth-child(2){
	margin-top: 6%;
}
#top .wrap .content section#cityArea .itemBox:last-child{
	margin-top: 12%;
}
#top .wrap .content section#cityArea .itemBox .imgBox{
	border: 8px solid #fff;
}

#top .wrap .content section#cityArea .itemBox .imgBox .imgText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-feature-settings: initial;
  text-orientation: mixed;
  color: #fff;
  text-shadow: 0px 0px 3px rgb(0, 0, 0),
               0px 0px 3px rgb(0, 0, 0),
               0px 0px 3px rgb(0, 0, 0);
  font-size: clamp(14px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-align: center;
  max-height: 90%;
}
#top .wrap .content section#bkListArea{
	width: 100%;
	margin: 0 auto;
}
#top .wrap .content section#bkListArea h3{
	width: 100%;
	margin: 0 0 0 10%;
	padding: 0;
	text-align: left;
	font-size: 36px;
	font-size: 2.25rem;
	position: relative;
	display: flex;
	align-items: center;
}
#top .wrap .content section#bkListArea h3::after{
  content: "";
  height: 1px;
  background: #5a544b;
  margin-left: 20px;
  flex: 1;
  display: block;
}
#top .wrap .content section#bkListArea h4{
	width: 84%;
	margin: 0 0 6% 10%;
	padding: 0;
	text-align: justify;
	font-size: 18px;
	font-size: 1.125rem;
}
#top .wrap .content section#bkListArea h5{
  width: 100%;
  margin: 0 0 6% 10%;
  padding: 0;
  text-align: left;
  font-size: 18px;
  font-size: 1.125rem;
  position: relative;
  display: inline-block;
}


#top .wrap .content section#bkListArea h5::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: #5a544b;
  right: calc(100% + 20px);
  width: 100vw;
}

#top .wrap .content section#bkListArea .bkList{
	width: 80%;
	margin: 0 auto 10%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#top .wrap .content section#bkListArea .bkList .bkBox{
	width: 100%;
}
#top .wrap .content section#bkListArea .bkList .bkBox dl{
	margin: 20px 0 60px;
	padding: 0;
}
#top .wrap .content section#bkListArea .bkList .bkBox dl dt{
	text-align: left;
	font-size: 18px;
	font-size: 1.125rem;
	margin-bottom: 10px;
}
#top .wrap .content section#bkListArea .bkList .bkBox dl dd{
	text-align: left;
	font-size: 14px;
	font-size: 0.93333rem;
	margin: 0;
	padding: 0;
}

#top .wrap .content .bnArea{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#top .wrap .content .bnArea li{
	width: 100%;
	margin-bottom: 6%;
}

.bkBtns{
  width: 80%;
  margin: 6% auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ボタン本体 */
.bkBtn{
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid #5a544b;
  color: #5a544b;
  text-decoration: none;
  overflow: hidden;
  padding: 22px 24px 18px;
}

/* ホバー背景（左→右） */
.bkBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #5a544b;
  transform: translateX(-100%);
  transition: transform 0.45s ease;
  z-index: 0;
}

/* 中身を前面へ */
.bkBtn > *{
  position: relative;
  z-index: 1;
}

/* 日本語：左寄せ */
.bkBtn__jp{
  display: block;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

/* 英語：右寄せ＋矢印 */
.bkBtn__en{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 10px;
  width: 100%;
  text-align: right;
  font-size: 16px;
  letter-spacing: 0.08em;

  /* ←縦線用に入れてた背景は消す */
  background: none;
}

/* 横棒（矢印の線） */
.bkBtn__en::after{
  content: "";
  display: inline-block;
  width: 96px;
  height: 1px;
  background: currentColor;
  position: relative; /* ← 先端を重ねる基準 */
}

/* 先端（横棒の右端にピッタリくっつける） */
.bkBtn__en::before{
  content: "";
  position: absolute;
  right: 0;

  /* ここを上に調整 */
  top: calc(50% - 3px);

  transform: translateY(-50%) rotate(35deg);
  width: 12px;
  height: 1px;
  border-top: 1px solid currentColor;
}

.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin:0 auto;
    padding: .9em 2em;
    background-color: #625b5b;
    color: #fff;
    font-size: 16px;
	font-size: 1rem;
}

.button-1::after {
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    margin-left: 20px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
}




@media only screen and (min-width: 961px) {
  #top .wrap .content section {
    position: relative;
  }
#top .wrap .content section#topLeadArea .topLead{
	line-height: 3;
}
#top .wrap .content section#cityArea{
	width: 90%;
}
#top .wrap .content section#cityArea .itemBox .imgBox{
	border: 20px solid #fff;
}
#top .wrap .content section#bkListArea h4{
	font-size: 22px;
	font-size: 1.375rem;
}
#top .wrap .content section#bkListArea h5{
	font-size: 20px;
	font-size: 1.25rem;
}
#top .wrap .content section#bkListArea .bkList{
	width: 72%;
}
#top .wrap .content section#bkListArea .bkList .bkBox{
	width: 30%;
	margin-right: 4.5%;
}
#top .wrap .content section#bkListArea .bkList .bkBox:nth-child(3n){
	margin-right: 0;
}
#top .wrap .content .bnArea{
	width: 72%;
}
#top .wrap .content .bnArea li{
	width: 30%;
	margin-bottom: 6%;
}
  .bkBtns{
    flex-direction: row;
    gap: 48px;
  }

  .bkBtn{
    flex: 1;
    /*min-height: 130px;*/
    padding: 28px 28px 22px;
  }

  .bkBtn:hover::before{
    transform: translateX(0);
  }

  .bkBtn:hover{
    color: #fff;
  }

}