@charset "utf-8";

/* ==================================================

	index

================================================== */

/* メイン画像
-------------------------------------------------- */
.index-top-bg {
 height: 550px;
}
.index-top-bg-img {
/*  background-image: url('../img/topimg/top_1.jpg');*/
  position: absolute;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  width: 100%;
  height: 550px;
}
.index-top-bg {
  position: relative;
}
.index-top-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* メッセージ
-------------------------------------------------- */
.index-message-box {
  padding: 100px 0;
  text-align: center;
}
.index-message {
  text-align: left;
  display: inline-block;
  height: 360px; /* 縦書き用に高さを指定 */
  -webkit-writing-mode: vertical-rl; /* 縦書き */
  -ms-writing-mode: tb-rl; /* 縦書き */
  writing-mode: vertical-rl; /* 縦書き */
}
.index-message-ttl {
  padding: 0 0 0 30px;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.15em;
}
.index-message p {
  line-height: 2.5;
  letter-spacing: 0.1em;
}

/* index内コンテンツ共通
-------------------------------------------------- */
.index-ttl {
  padding: 100px 0 25px 0;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
.index-ttl-line {
  width: 70px;
  height: 4px;
  margin: 0 auto;
  background: #fff;
}
.index-content {
  text-align: center;
}
.index-content-img {
  height: 250px;
  background-size: 100% auto;
}
.index-about .index-content-img {background-image: url("../img/topimg/top_about.jpg");}

.index-content-txt {
  padding: 30px 0 80px;
}
.index-content-txt p {
  padding: 0 0 15px;
}

/* 宿について
-------------------------------------------------- */
@media (max-width: 767px) {
  .index-about .btn-link {
    width: 60%;
  }
}

/* 撮影利用、よくある質問用の大きいバナー
-------------------------------------------------- */
.index-content-banner-item {
  padding-bottom: 30px;
}
.index-content-banner-item .btn-link {
  padding: 3rem 0;
  width: 600px;
}
@media (max-width: 767px) {
  .index-content-banner-item .btn-link {
    width: 100%;
    padding: 2rem 0;
  }
}

/* アクセス
-------------------------------------------------- */
.index-access {
  padding: 100px 0;
  background: #f1f1f1;
}
.index-access-box {
  width: 1000px;
  margin: 0 auto;
}
.index-access-box-txt .index-ttl {
  padding: 0 0 20px;
  color: #000;
}
.index-access-box-txt p {
  padding: 0 0 15px;
}

/* instagram
-------------------------------------------------- */
.index-instagram {
  padding: 100px 20px 0;
  text-align: center;
}
.index-instagram .index-ttl {
  padding: 0 0 20px;
  color: #000;
}
.index-instagram .index-ttl-line {
  background: #000;
}
.index-instagram-box {
  padding: 60px 0 25px;
}


/* ==================================================

	page（下層ページ共通）

================================================== */

/* 下層ページヘッダー
-------------------------------------------------- */
.header-top-bg {
  position: relative;
  height: 280px;
}
/* スマホで背景固定するために擬似要素を作ってpositionで固定 */
.header-top-bg::before {
  background-position: center center;
  background-size: 100% auto;
  display: block;
  position: fixed;
  width: 100%;
  height: 280px;
  content: "";
  z-index: -1;
}
.header-top-bg-about::before { background-image: url("../img/topimg/top_about.jpg"); }
.header-top-bg-hinemosu::before { background-image: url("../img/topimg/top_hinemosu.jpg"); }
.header-top-bg-guide::before { background-image: url("../img/topimg/top_guide.jpg"); }
.header-top-bg-studio::before { background-image: url("../img/topimg/top_studio.jpg"); }
.header-top-bg-faq::before { background-image: url("../img/topimg/top_faq.jpg"); }
.header-top-bg-access::before { background-image: url("../img/topimg/top_access.jpg"); }
.header-top-bg-reserve::before { background-image: url("../img/topimg/top_reserve.jpg"); }

.header-top-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header-top-logo img {
  height: 150px;
}

/* 下層ページ共通：コンテンツ
-------------------------------------------------- */
/* コンテンツ部分全体を覆う */
.page-content-wrap {
  width: 100%;
  padding: 30px 0 1px 0;/* p要素のmargin-bottomに対応するため、1pxを追加 */
  background: #fff;
}
/* コンテンツ幅が1000px */
.page-content-big {
  width: 1000px;
  margin: 0 auto;
}
/* コンテンツ幅が700px */
.page-content-normal {
  width: 700px;
  margin: 0 auto;
}

/* 最上部メインタイトル */
.page-ttl {
  padding: 65px 0 40px 0;
  color: #000;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}
.page-ttl-line {
  width: 100px;
  height: 4px;
  margin: 0 auto;
  background: #000;
}
/* 最上部の説明文 */
.page-top-txt {
  padding: 50px 0 80px;
  text-align: center;;
}

/* 下層ページ共通：タイトル
-------------------------------------------------- */
/* タイトル：sub */
.page-ttl-sub-first,
.page-ttl-sub {
  margin: 50px 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid #000;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 600;
}
.page-ttl-sub-first { margin-top: 0; }

/* タイトル：center */
.page-ttl-center-first,
.page-ttl-center {
  margin: 100px 0 30px;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.75rem;
  text-align: center;
}
.page-ttl-center-first { margin-top: 0; }

/* 下層ページ共通：要素
-------------------------------------------------- */
/* 写真下のキャプション */
.page-photo-txt {
  margin: 0.5rem 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ==================================================

	access

================================================== */

.page-access-map {
  width: 700px;
  margin: 0 auto 50px;
}
.page-access-map img { width: 100%; }