@charset "utf-8";

/* A Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* *********************************************************************

    Googlefont

********************************************************************* */

.sawarabi-gothic-regular {
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* *********************************************************************

    タグ共通設定

********************************************************************* */
li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover, button:hover {
  opacity: 0.7;
}

img, iframe {
  vertical-align: middle;
}

img, video {
  max-width: 100%;
}

button, input, select, textarea {
  outline: none;
  font-family: inherit;
}

button:has(img) {
  background-color: transparent;
  border: none;
}

::placeholder {
  color: #BFBFBF;
}

input:focus::placeholder, textarea:focus::placeholder {
  color: transparent;
}

input[type=date]::-webkit-inner-spin-button, input[type=datetime]::-webkit-inner-spin-button, input[type=datetime-local]::-webkit-inner-spin-button, input[type=month]::-webkit-inner-spin-button, input[type=week]::-webkit-inner-spin-button {
  display: none;
}

li, p, dl {
  line-height: 1.5;
}

p + p {
  margin-top: 1em;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* *********************************************************************

    サイト全体設定

********************************************************************* */
html {
  font-size: 62.5%; /* base font-size:10px */
  font-family: -apple-system, BlinkMacSystemFont, "Sawarabi Gothic", "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  letter-spacing: 0.1pt;
  font-size: clamp(12px, 3.25vw, 20px);
  color: #333;
}

/* IE */
@media all and (-ms-high-contrast: none) {
  html {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  }
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* ヘッダー */
.hdr {
}
.hdr-inner{
	height: 65px;
	position: relative;
}
.hdr-inner .hdr-left{
	max-width: 16%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 1em;
	display: flex;
	align-items: center;
}
.hdr-inner .hdr-right{
	max-width: 26%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 1em;
	display: flex;
	align-items: center;
	background: url(/assets/img/bg_stripe.png) center center no-repeat;
	background-size: contain;
}

@media screen and (min-width: 768px) {
	.hdr-inner{
		height: 130px;
	}	
	.hdr-inner .hdr-left{
		left: 45%;
	}

}
@media screen and (max-width: 767px) {	
	.hdr-inner .hdr-left img{
		max-width: 66px;
	}
}

/* メイン画像 */
.main-image {
}
.main-image picture img {
	width: 100%;
}
.main-image h2 {
	padding: 1em;
	background: #333;
}
.main-image h2 img {
	width:70%;
	max-width: 624px;
	margin: 0 auto;
}


/* ゲストハウス概要 */
.intro {
	margin-top: 3em;
}
.intro .intro-inner {
	width: 95%;
	max-width: 1400px;
	margin: 0 auto;
}
.intro .intro-inner .intro-right {
	margin-bottom: 2em;
}
.intro .intro-inner .intro-right .intro-plate {
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: .8em 0;
	margin: 0 auto 2.5em;	
}
.intro .intro-inner .intro-right .intro-plate .intro-plate-inner {
	padding: 1.5em;
	background: #e6e6e6;
}
.intro .intro-inner .intro-right .intro-plate .intro-plate-inner .intro-name {
	width: 90%;
	margin: 0 auto 1em;
}
.intro .intro-inner .intro-right .intro-plate .intro-plate-inner table {
}
.intro .intro-inner .intro-right .intro-plate .intro-plate-inner table td {
	padding: .3em;
}
.intro .intro-inner .intro-right .intro-plate .intro-plate-inner table td img {
	margin-bottom: .5em;
}
.intro .intro-inner .intro-left {
}

@media screen and (min-width: 768px) {
	.intro .intro-inner {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		padding-right: 2em;
	}
	.intro .intro-inner .intro-right {
		width: 50%;
	margin-bottom: 0;
	}
	.intro .intro-inner .intro-right .intro-plate {
			width: 80%;			
	}
	.intro .intro-inner .intro-right .intro-plate .intro-plate-inner .intro-name {
		max-width: 387px;
	}
	.intro .intro-inner .intro-left {
		width: 40%;
	}
}
@media screen and (max-width: 767px) {
	.intro .intro-inner .intro-right .intro-plate .intro-plate-inner table .intro-icon-mail {
		width: 50%;
	}
}


/* アクセス */
.access {
	margin-top: 3em;
}
.access .access-inner {
	max-width: 1400px;
	margin: 0 auto;	
}
.access .access-inner .access-hdr {
	background: #565a57;
	padding: 2em;
	text-align: center;
	color: #fff;
	display: flex;
	align-items: center;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}
.access .access-inner .access-hdr h3 {
	width: 100%;
	border-top: 1px solid #ccc;
	padding-top: 1em;
	font-size: 1.8em;
}
.access .access-inner .access-hdr h5 {
	width: 100%;
	font-size: 1.2em;

}.access .access-inner .access-hdr h4 {
	width: 100%;
	font-size: 1.4em;
}.access .access-inner .access-hdr p {
	width: 100%;
	border-bottom: 1px solid #ccc;
	padding-bottom: 1em;
	font-size: 1.8em;
	font-weight: bold;
}
.access .access-inner iframe {
	width: 100%;
	border: none;
	min-height: 400px;
}

@media screen and (min-width: 768px) {
	.access .access-inner {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	.access .access-inner .access-hdr {
		width: 30%;
	}
	.access .access-inner .access-hdr h3 {
	font-size: 2.4rem;
}
.access .access-inner .access-hdr h5 {
	font-size: 1.4rem;

}.access .access-inner .access-hdr h4 {
	font-size:1.6rem;
}
.access .access-inner .access-hdr p {
	font-size:2.2rem;
}
	.access .access-inner iframe {
		width: 70%;
	}
}


/* 施設のご紹介 */
.facility {
	margin-top: 5em;
}
.facility h3 {
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(/assets/img/bg_title_facility.png) center center no-repeat;
	background-size: cover;
}
.facility h3 img {
	width: 60%;
	max-width:200px;
}
.facility .facility-features {
	padding :4em 0;
	background: #e6e6e6;
}
.facility .facility-features ul {
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	padding-inline-start: 0px;
}
.facility .facility-features ul li {
	width: 100%;
	margin-bottom: 3em;
}
.facility .facility-features ul li h4 {
	margin-top: .8em;
	width: 100%;
	padding: .8rem 1.2rem;
	line-height: 1.8em;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	font-size: 1.3em;
	font-weight: normal;
}
.facility .facility-exp {
	width: 90%;
	max-width: 1000px;
	margin: -3em auto 0;
	background: #fff;
	box-shadow: 5px 5px 5px 0 #ccc;
	padding: 2em 2.3em 1em;
	z-index: 9;
}
.facility .facility-exp .facility-exp-text {
	border-bottom: 1px solid #666;
	line-height: 1.8em;
	padding-bottom: 3em;
}
.facility .facility-exp .facility-exp-footer {
	margin: .5em 0;
	background: url(/assets/img/bg_stripe.png) right center no-repeat;
	background-size: contain;
}
.facility .facility-exp .facility-exp-footer img {
	margin: 0 auto;
}
.facility .facility-info {
	width: 93%;
	max-width: 1100px;
	margin: 3em auto 0;
	background: #fff;
	padding: 1em;
	border: 1px solid #666;
	text-align: center;
	position: relative;
}
.facility .facility-info-lefticon {
	position: absolute;
	top: -5px;
	left: -5px;
	width: 30px;
}
.facility .facility-info-righticon {
	position: absolute;
	bottom: -5px;
	right: -5px;
	width: 30px;
}
.facility .facility-info h4 {
	padding-bottom: 1em;
	border-bottom: 1px solid #666;
}
.facility .facility-info h4 img {
	max-width: 180px;
	margin: 0 auto;
}
.facility .facility-info ul {
	padding-inline-start: 0px;
	margin: 2em 0;
}
.facility .facility-info ul li {
}
.facility .facility-info ul li h5 {
	margin: 0;
	font-size: 1.2em;
}	
.facility .facility-info ul li p {
	margin-bottom: 1em;
	font-size: 1.1em;
}

@media screen and (min-width: 768px) {
	.facility h3 {
		height: 280px;
	}
	.facility h3 img {
		max-width:400px;
	}
	.facility .facility-features ul li {
	width: 45%;
	}
	.facility .facility-features ul li h4 {
		font-size: 1.1em;
	}
	.facility .facility-exp {
		padding: 3em 3.5em 1em;
	}	
	.facility .facility-info-lefticon {
		top: -10px;
		left: -10px;
		width: 60px;
	}
	.facility .facility-info-righticon {
		bottom: -10px;
		right: -10px;
		width: 60px;
	}
	.facility .facility-info h4 img {
		max-width: 360px;
	}
	.facility .facility-info ul li h5 {
		font-size: .9em;
	}	
	.facility .facility-info ul li p {
		font-size: .9em;
	}
}
@media screen and (max-width: 767px) {
	.facility .facility-exp .facility-exp-text {
		font-size: 1.2em;
	}
	.facility .facility-exp .facility-exp-footer img {
		max-width: 66px;
	}
}


/* 観光のご案内 */
.sightseeing {
	margin-top: 5em;
}
.sightseeing h3 {
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(/assets/img/bg_title_sightseeing.png) center center no-repeat;
	background-size: cover;
}
.sightseeing h3 img {
	width: 60%;
	max-width:200px;
}
.sightseeing .sightseeing-exp {
	width: 80%;
	max-width: 900px;
	margin: 3em auto 0;
}
.sightseeing .sightseeing-photo {
	width: 90%;
	max-width: 1100px;
	margin: 3em auto 0;
	padding: 2em 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-inline-start: 0px;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
}
.sightseeing .sightseeing-photo li {
	width:100%;
	text-align: center;
	margin-bottom: 2em;
}
.sightseeing .sightseeing-photo li img {
	width:100%;
	border: 10px solid #fff;
	box-shadow: 5px 5px 5px 0 #ccc;
}
.sightseeing .sightseeing-photo li p {
	margin-top: .7em;
	width:100%;
	font-weight: bold;
}
	
@media screen and (min-width: 768px) {
	.sightseeing h3 {
		height: 280px;
	}
	.sightseeing h3 img {
		max-width:400px;
	}
	.sightseeing .sightseeing-photo li {
		width:30%;	
		margin-bottom: 0;
	}
}
@media screen and (max-width: 767px) {
	.sightseeing .sightseeing-exp {
		font-size:1.2em;
	}
	.sightseeing .sightseeing-photo li p {
		font-size: 1.2em;
	}
}

/* ご案内ボード */
.infoboard {
	margin-top: 4em;
	padding: 2em;
	background: url(/assets/img/bg_footer.png) center center no-repeat;
	background-size: cover;
}
.infoboard .infoboard-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content:center;
	align-items: center;
}
.infoboard .infoboard-inner .board {
	width: 95%;
	max-width: 350px;
	padding: 1.5em 1em;
	background: #2a2a2a;
	background-clip: padding-box;
	border: .8em solid rgba(255, 255, 255, 0.8);
}
.infoboard .infoboard-inner .board h3 {
	max-width: 220px;
	margin:0 auto 1.5em;
	
}
.infoboard .infoboard-inner .board h4 {
	max-width: 175px;
	margin:0 auto .7em;
}
.infoboard .infoboard-inner .board h5 {
	max-width: 240px;
	margin:1.5em auto;
}
@media screen and (min-width: 768px) {
	.infoboard .infoboard-inner {
		justify-content:start;
	}
	.infoboard .infoboard-inner .board h3 {
		max-width: 369px;
		margin:0 auto 1.5em;
		
	}
	.infoboard .infoboard-inner .board h4 {
		width: 80%;
		max-width: 292px;
		margin:0 auto .5em;
	}
	.infoboard .infoboard-inner .board h5 {
		max-width: 376px;
		margin:1.5em auto;
	}
}

/* フッター */
.ftr {
}
.ftr .ftr-logo {
	padding: .7em;
}
.ftr .ftr-logo img {
	margin: 0 auto;
	max-width: 66px;
}
.ftr .copyright {
	padding: .7em;
	background: #2a2a2a;
	color: #fff;
	text-align: center;
}

@media screen and (min-width: 768px) {
	.ftr .ftr-logo img {
		max-width: 133px;
	}
}