@charset "utf-8";

/* =========================================================
   HOTEL PAGE
   PCは既存common.cssを使用
   ========================================================= */

.hotel-page #undercommon section {
	overflow: visible;
}

.hotel-page #undercommon section article .left {
  float: left;
  margin: 0 0 0 0;
}

/* =========================================================
   TABLET / SMARTPHONE
   ========================================================= */

@media screen and (min-width: 1021px) {
	.sp{
		display: none!important;
	}
}

@media screen and (max-width: 1021px) {

	.hotel-page #undercommon {
		width: auto;
		margin-right: 15px;
		margin-left: 15px;
	}
	
.hotel-page .second table {
	margin: 0px 0px 20px 0px;
}
.cul li {
	background: url(../img/bar.jpg) no-repeat 0 10px;
}
.hotel-page #hotel .first .right h5 {
	margin: 10px 0 0 0;
	padding: 0 0 10px 0px;
	border-bottom: dotted 1px #999;
}
.hotel-page #hotel .first .right p {
	margin: 15px 0 0 0px;
}
.pc{
    display: none!important;
}


	/* =========================================
	   メイン画像
	   ========================================= */

	.hotel-page #undercommon h2.mainimg {
		margin-bottom: 35px;
	}

	.hotel-page #undercommon h2.mainimg img {
		display: block;
		width: 100%;
		height: auto;
		min-height: 88px;
		object-fit: cover;
	}


	/* =========================================
	   共通見出し
	   ========================================= */

	.hotel-page #undercommon section h3 {
		font-size: 22px;
		line-height: 1.45;
		letter-spacing: .04em;
	}

	.hotel-page #undercommon section h4 {
		margin-bottom: 35px;
	}


	/* =====================================================
	   PET HOTEL / PAPPY 共通
	   ===================================================== */

	.hotel-page #hotel article,
	.hotel-page #pappy article {
		overflow: visible;
	}

	.hotel-page #hotel .first,
	.hotel-page #hotel .second,
	.hotel-page #pappy .first {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
		align-items: start;
	}


	/* float解除 */

	.hotel-page #hotel .left,
	.hotel-page #hotel .right,
	.hotel-page #pappy .left,
	.hotel-page #pappy .right {
		float: none;
		width: 100%;
		margin: 0;
	}


	/* 画像 */

	.hotel-page #hotel .left img,
	.hotel-page #hotel .right img,
	.hotel-page #pappy .left img,
	.hotel-page #pappy .right img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0px auto;
	}


	/* テキスト */

	.hotel-page #hotel h5,
	.hotel-page #pappy h5 {
		margin: 0 0 15px;
		font-size: 18px;
		line-height: 1.6;
		font-weight: normal;
	}

	.hotel-page #hotel p,
	.hotel-page #pappy p {
		font-size: 14px;
		line-height: 1.9;
	}

	.hotel-page #hotel p br,
	.hotel-page #pappy p br {
		display: none;
	}


	/* =====================================================
	   電話番号
	   ===================================================== */

	.hotel-page .telephon {
		position: relative;
		margin-top: 25px !important;
		padding-top: 15px;
		border-top: 1px dotted #999;
		font-family: Quicksand, sans-serif;
		font-size: 20px !important;
		line-height: 1.4 !important;
	}

	.hotel-page .telephon span {
		font-size: 13px;
	}

	.hotel-page .telephon img {
		width: auto !important;
		max-height: 55px;
		margin-left: 10px;
		vertical-align: middle;
	}


	/* =====================================================
	   料金表
	   ===================================================== */

	.hotel-page #hotel .second {
		margin-top: 45px;
	}

	.hotel-page #hotel .second .left {
		min-width: 0;
	}

	.hotel-page .tabl {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
	}

	.hotel-page .tabl th,
	.hotel-page .tabl td {
		padding: 10px 8px;
		font-size: 13px;
		line-height: 1.5;
		box-sizing: border-box;
	}

	.hotel-page .tabl thead th {
		text-align: center;
	}

	.hotel-page .tabl td:first-child {
		text-align: left;
	}


	/* =====================================================
	   注意事項
	   ===================================================== */

	.hotel-page .cul {
		margin: 25px 0 0;
		padding: 0;
		list-style: none;
	}

	.hotel-page .cul li {
		position: relative;
		margin-bottom: 8px;
		padding-left: 15px;
		font-size: 13px;
		line-height: 1.75;
	}


	/* =====================================================
	   PAPPY CLASS
	   ===================================================== */

	.hotel-page #pappy {
		clear: both;
	}

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media screen and (max-width: 767px) {

	.hotel-page #undercommon section {
		margin-bottom: 70px;
	}


	/* =============================================
	   PET HOTEL
	   ============================================= */

	.hotel-page #hotel .first,
	.hotel-page #hotel .second,
	.hotel-page #pappy .first {
		display: flex;
		flex-direction: column;
		gap: 0;
	}


	/* 画像を先に */

	.hotel-page #hotel .first .left,
	.hotel-page #pappy .first .left {
		order: 1;
		margin-bottom: 25px;
	}

	.hotel-page #hotel .first .right,
	.hotel-page #pappy .first .right {
		order: 2;
	}


	/* =============================================
	   料金
	   HTML上は
	   左：料金表
	   右：画像
	   なのでスマホは画像を先に
	   ============================================= */

	.hotel-page #hotel .second .right {
		order: 1;
		margin-bottom: 25px;
	}

	.hotel-page #hotel .second .left {
		order: 2;
	}


	/* =============================================
	   画像
	   ============================================= */

	.hotel-page #hotel .left img,
	.hotel-page #hotel .right img,
	.hotel-page #pappy .left img,
	.hotel-page #pappy .right img {
		/*width: 100%;*/
	}


	/* =============================================
	   見出し・本文
	   ============================================= */

	.hotel-page #hotel h5,
	.hotel-page #pappy h5 {
		font-size: 17px;
	}

	.hotel-page #hotel p,
	.hotel-page #pappy p {
		font-size: 13px;
		line-height: 1.9;
	}


	/* =============================================
	   料金表
	   ============================================= */

	.hotel-page .tabl th,
	.hotel-page .tabl td {
		padding: 10px 5px;
		font-size: 12px;
	}

	.hotel-page .tabl th:first-child,
	.hotel-page .tabl td:first-child {
		width: 42%;
	}

	.hotel-page .tabl th:nth-child(2),
	.hotel-page .tabl th:nth-child(3),
	.hotel-page .tabl td:nth-child(2),
	.hotel-page .tabl td:nth-child(3) {
		width: 29%;
	}


	/* =============================================
	   注意事項
	   ============================================= */

	.hotel-page .cul li {
		font-size: 12px;
		line-height: 1.8;
	}


	/* =============================================
	   電話
	   ============================================= */

	.hotel-page .telephon {
		font-size: 19px !important;
	}

	.hotel-page .telephon img {
		max-height: 48px;
	}


	/* =============================================
	   PAPPY
	   ============================================= */

	.hotel-page #pappy {
		margin-top: 20px;
	}

}


/* =========================================================
   SMALL SMARTPHONE
   ========================================================= */

@media screen and (max-width: 480px) {

	.hotel-page #undercommon {
		margin-right: 12px;
		margin-left: 12px;
	}

	.hotel-page .tabl th,
	.hotel-page .tabl td {
		padding: 9px 4px;
		font-size: 11px;
	}

	.hotel-page .telephon {
		font-size: 18px !important;
	}

}