@charset "UTF-8";
/* ========= エリアマップ・ピックアップエリア ========= */
.tool {
	background-color:#fff;
}

.tool a{
	color:#00102E;
}

.tool .areamap {
	position:relative;
	background-color:#fff;
		aspect-ratio: 796 / 500;
		background-image:url('../images-stay/top_areamap.jpg');
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		overflow;hidden;
	align-self: start;
}

.tool .areamap h2{
	display:inline-block;
	background-color:#5A4B3D;
	color:#fff;
	font-size:16px;
	padding:5px 10px;
	border-radius:5px;
	margin:10px;
}


.tool .area-btn {
	position:absolute;
 transform: translate(-50%, -50%);
	display:inline-block;
	background-color:#fff;
	border:2px solid #ccc;
	font-size:12px;
	border-radius:5px;
	text-align:center;
	min-width:90px;
}

	.tool .areamap .yasaka {
		left:22%;
		bottom:51%;
	}

	.tool .areamap .omiya {
		left:22%;
		bottom:39%;
	}

	.tool .areamap .yosano-iwataki {
		left:22%;
		bottom:26%;
	}
	.tool .areamap .monju {
		left:22%;
		bottom:14%;
	}

	.tool .areamap .miyazu {
		left:22%;
		bottom:-1%;
	}


	.tool .areamap .ine {
		right:-9%;
		bottom:68%;
	}

	.tool .areamap .hioki-seya {
		right:-9%;
		bottom:54%;
	}

	.tool .areamap .fuchu {
		right:-9%;
		bottom:40%;
	}

	.tool .areamap .kunda {
		right:-9%;
		bottom:20%;
	}

	.tool .areamap .yura {
		right:-9%;
		bottom:5%;
	}


.tool .type-list h2{
	display:inline-block;
	background-color:#5A4B3D;
	color:#fff;
	font-size:16px;
	padding:5px 10px;
	border-radius:5px;
	margin:10px;
}

.tool .type-list ul {
	margin:0 auto 20px;
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	font-size:14px;
}

.tool .pickup {
	border-top:2px dashed #ccc;
}

.tool .pickup h2{
	display:inline-block;
	background-color:#5A4B3D;
	color:#fff;
	font-size:16px;
	padding:5px 10px;
	border-radius:5px;
	margin:10px;
}

.tool .pickup h3{
	font-size:18px;
	margin:20px 10px 10px;
}

.tool .pickup h3::before {
	content:"pick up";
	display:inline-block;
	font-size:12px;
	background-color:#900;
	color:#fff;
	padding:2px 5px 4px 5px;
	vertical-align:bottom;
	border-radius:3px;
	margin-right:10px;
}

.tool .pickup-text {
	flex-grow:2;
	padding:10px;
}

.tool .pickup-text p{
	font-size:14px;
}

.tool .pickup-thumb{
	overflow:hidden;
	width:200px;
	flex-shrink:0;
	padding:10px;
}

.tool .pickup-thumb a{
	display:block;
	aspect-ratio:4 / 3;
}

.tool .pickup-thumb img{
	object-fit:cover;
	width:100%;
	height:100%;
}


.tool .pickup .btn-area {
	text-align:right;
}

.tool .pickup .btn-area a.btn {
    color: #000;
    font-family: sans-serif;
    font-size: 13px;
	border-bottom:1px solid #000;
}

/* ---------- 一覧ページ -------------- */
.posts-layout .row {
	display:flex;
	flex-wrap:wrap;
}


.home .content-inner .entry-post,
.blog .content-inner .entry-post,
.search .content-inner .entry-post {
    flex-grow: 0;
}

.home .content-inner .entry-header {
	flex-grow:0;
}

.home .content-inner .yado-info,
.archive .content-inner .yado-info  {
	flex-grow:1;
}

.home .content-inner .yado-info dl,
.blog .content-inner .yado-info dl,
.archive .content-inner .yado-info dl {
	display:grid;
	grid-template-columns:46px 1fr;
	gap:5px;
	font-size:0.85em;
	margin:10px 0;
}

.home .content-inner .yado-info dt,
.blog .content-inner .yado-info dt,
.archive .content-inner .yado-info dt {
	border:1px solid #233452;
	text-align:center;
	background-color:#233452;
	color:#fff;
}

.home .content-inner .yado-info dt::after,
.blog .content-inner .yado-info dt::after,
.archive .content-inner .yado-info dt::after {
	content:"";
}

.home .content-inner .yado-info dd,
.blog .content-inner .yado-info dd,
.archive .content-inner .yado-info dd {
	margin:0;
}

.home .content-inner .entry-footer,
.blog .content-inner .entry-footer,
.search .content-inner .entry-footer,
.archive .content-inner .entry-footer {
    justify-content:center;
}

.home .content-inner .entry-footer a.btn-plan,
.blog .content-inner .entry-footer a.btn-plan,
.search .content-inner .entry-footer a.btn-plan,
.archive .content-inner .entry-footer a.btn-plan{
	display:inline-block;
	border:1px solid #000;
background: #f2f2f2;
background: linear-gradient(0deg,rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 3px;
}

.home .content-inner .entry-footer a.btn-plan:hover,
.blog .content-inner .entry-footer a.btn-plan:hover,
.search .content-inner .entry-footer a.btn-plan:hover{
	opacity:0.5;
}

/* ========= シングルページ ========= */
.subsite-meta {
 font-size:14px;
	margin-top:20px;
	line-height:1.4;
	text-align:center;
}

.subsite-meta > div {
	display:inline;
	margin:0 5px;
}

.subsite-meta .meta-category{
	display:inline;
}

.subsite-meta .meta-category a {
	display:inline-block;
	background-color:#000;
	color:#fff;
	padding:0 10px;
}

.subsite-meta .meta-taxonomy {
	display:inline;
}

.subsite-meta .meta-category h3 {
	font-size:14px;
	margin:0;
}

.subsite-meta > div.print-link {
	display:none;
}

/*
.subsite-meta .print-link a::before {
	font-family: "Font Awesome 6 Free";
	font-weight:bold;
	content: "\f02f";
	color:#16627E;
	margin-right:5px;
}
*/

.upd-date {
	display:inline;
	font-size:14px;
}

.inner-content-wrapper {
	display:flex;
	flex-direction:column;
}

.single .entry-content .d-flex,
.print .entry-content .d-flex   {
	flex-direction:column;
	gap:20px;
}

.single .entry-content .overview,
.print .entry-content .overview {
	align-items:flex-start;
}

.single .post-thumb ,
.print .post-thumb {
	width:100%;
}

.single .post-thumb a,
.print .post-thumb a{
	display:block;

}

.single .post-thumb a img,
.print .post-thumb a img{
	width:100%;
}

.single .sub-imgs,
.print .sub-imgs{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:16px;
}

.single .sub-imgs .description,
.print .sub-imgs .description {
	  grid-column: 1 / -1; /* 1列目から最終列までを指定 */
}


.single .sub-img,
.print .sub-img {
	aspect-ratio:1 / 1;
flex: 0 1 calc((100% - 32px) / 3);}

.single .sub-img img,
.print .sub-img img  {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.sub-img {
  overflow: hidden;
	  aspect-ratio: 1 / 1;
}

.sub-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.details {
	margin:50px auto;
}

.details h2 {
	text-align:center;
}

.details h2::before,
.details h2::after {
	content:"";
	display:inline-block;
	width:30px;
	border-bottom:1px solid #ccc;
	margin:10px;
}

.details-wrapper {
	display:flex;
	flex-direction:column;
	gap:30px;
	margin-bottom:30px;
}

.details-wrapper h3:not(.name) {
	font-size:16px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    background-color: #f4eee2;
    color: #452717;
	margin-bottom:10px;
}

.detail h3.name {
	margin:0 !important;
	text-align:center;
	font-size:24px;
}

.booking-link {
	text-align:center;
	margin-bottom:30px;
}

.booking-link a.btn {
	font-weight:bold;
	display:block;
	min-width:300px;
	max-width:500px;
	text-align:center;
    padding: 10px;
    margin: 0 auto;
    border: 1px solid #ccc;
	border-radius:3px;
	background: linear-gradient(to bottom, #ffffff, #eeeeee);
}

.detail.d-flex{
	flex-wrap:wrap;
}

.detail.d-flex h3{
	flex-basis:100%;
}

.detail dl {
display:grid;
grid-template-columns: 70px 1fr;
font-size:14px;
  row-gap: 0.5em;
line-height:1.4;
}

.detail dt {
	position:relative;
	padding-right:5px;
	padding-bottom:5px;
	border-bottom:1px dashed #ccc;
}

.detail dt:before {
	content:"：";
	position:absolute;
	right:0;
	
}

.detail dd {
  margin: 0;
	padding-bottom:5px;
  word-break: break-all;
  overflow-wrap: anywhere;
	border-bottom:1px dashed #ccc;
}

.detail .map-link {
	text-align:center;
}

.detail .map-link a{
	display:inline-block;
	background-color:#000;
	color:#fff;
	border-radius:20px;
	padding:5px 20px;
	margin-bottom:20px;
}

.detail.overview p {
	line-height:1.2;
/*	text-align:center; */
}

p.kana {
	text-align:center;
}

.nearby-spot h1{
	display:none;
}

.nearby-spot h3 {
	font-size: 16px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    background-color: #f4eee2;
    color: #452717;
    margin-bottom: 10px;
}

/* ================================
ブレイクポイント
================================== */
@media (min-width: 480px) {
	.tool {
		display:grid;
	  grid-template-columns: repeat(2, 1fr);
	  grid-template-rows: 120px, 1fr;
	}

	.tool .areamap {
	  grid-row: span 2;  /* 上下2行にまたがる */
	}
}

@media (min-width: 768px) {
	.tool .areamap {
	}

	.tool .type-list ul {
		font-size:16px;
	}

	.tool .pickup {
		grid-column:2 span;
	}

	/* シングルページ */

	.single .entry-content .d-flex,
	.print .entry-content .d-flex {
		flex-direction:row;
	}

	.single .post-thumb,
	.print .post-thumb{
		flex-basis:50%;
		flex-shrink:0;
	}

	.details-wrapper {
		flex-direction:row;
		gap:30px;
		flex-wrap:wrap;
	}

	.details-wrapper .detail {
		flex:1;
		flex-basis:calc(50% - 20px);

	}


	.detail.map {
		flex-basis:calc(50% - 20px);
	}

	.detail.overview {
		flex-basis:calc(50% - 20px);
	}

}

@media (min-width: 1024px) {
	/* ---- エリアマップ・ピックアップ -- */


	.tool .areamap {
	  grid-row: span 2;  /* 上下2行にまたがる */
		aspect-ratio: 796 / 500;
		background-image:url('../images-stay/top_areamap.jpg');
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		overflow:hidden;
	}

	.tool .areamap .area-btn {
		min-width:130px;
		font-size:14px;
	}

	.tool .areamap .yasaka {
		left:27%;
		bottom:54%;
	}

	.tool .areamap .omiya {
		left:27%;
		bottom:40%;
	}

	.tool .areamap .yosano-iwataki {
		left:27%;
		bottom:28%;
	}
	.tool .areamap .monju {
		left:27%;
		bottom:16%;
	}

	.tool .areamap .miyazu {
		left:27%;
		bottom:3%;
	}

	.tool .areamap .ine {
		right:-3%;
		bottom:72%;
	}

	.tool .areamap .hioki-seya {
		right:-3%;
		bottom:58%;
	}

	.tool .areamap .fuchu {
		right:-3%;
		bottom:44%;
	}

	.tool .areamap .kunda {
		right:-3%;
		bottom:24%;
	}

	.tool .areamap .yura {
		right:-3%;
		bottom:9%;
	}



	.tool .type-list {
	  background-color: #fff;
	}

	.tool .pickup {
	  background-color: #fff;
		grid-column:1 span;
	}

	.tool .pickup-thumb {
		width:150px;
	}

	/* シングルページ */

	.details-wrapper {
		flex-direction:row;
		gap:30px;
	}

	.detail {
		flex:1;
	}


	.post-thumb {
		grid-row: span 2;
		grid-column: span 2;
	}



	.about-facility1 .details-wrapper {
		flex-wrap:wrap;
	}

	.about-facility1 .details-wrapper .detail {
		flex-basis:calc(50% - 30px);
	}

	.subsite-meta > div.print-link {
		display:inline;
	}


}

@media (min-width: 1320px) {

	.tool .areamap .yasaka {
		left:25%;
		bottom:54%;
	}

	.tool .areamap .omiya {
		left:25%;
		bottom:40%;
	}

	.tool .areamap .yosano-iwataki {
		left:25%;
		bottom:28%;
	}
	.tool .areamap .monju {
		left:25%;
		bottom:16%;
	}

	.tool .areamap .miyazu {
		left:25%;
		bottom:3%;
	}

	.tool .areamap .ine {
		right:-8%;
		bottom:72%;
	}

	.tool .areamap .hioki-seya {
		right:-8%;
		bottom:58%;
	}

	.tool .areamap .fuchu {
		right:-8%;
		bottom:44%;
	}

	.tool .areamap .kunda {
		right:-8%;
		bottom:24%;
	}

	.tool .areamap .yura {
		right:-8%;
		bottom:9%;
	}

	.tool .pickup-thumb {
		width:200px;
	}

  .post-thumb {
	grid-row: span 3;
    grid-column: span 3;
  }

}

@media (min-width: 1920px) {

}


@media print {
	.print .entry-content .d-flex {
		flex-direction:row;
	}

	.print .post-thumb{
		flex-basis:50%;
		flex-shrink:0;
	}

	.details-wrapper {
		display:grid;
		gap: 30px;
		grid-template-columns: 1fr 1fr;
	}

	.detail.other {
		grid-column: 1 / -1; /* 1列目から最終列までを指定 */
	}


    .details.access {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

	.details.access h2 {
		width:100%;
	}
	.detail {
		flex:1;
	}
}