@charset "UTF-8";
/*------------------------------------------------------------------
********************************************************************
 * ▼構成
 * ・ベースとなるCSS
 * ・スマホのみ（@media screen and (max-width: 767px) {} ）
********************************************************************
--------------------------------------------------------------------*/

/*--------------------------------------------------
**************************************************
  PC用
**************************************************
--------------------------------------------------*/
@media screen and (min-width: 768px) {
	
	/* 一覧 */
	.article_archive_list {
		width:1080px;
		max-width:90%;
		margin:40px auto 0;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	#article_archive article {
		width:48%;
		margin-top:30px;
		padding:25px;
		border:1px solid #f0f0f0;
		border-top:3px solid #0c78a6;
		position:relative;
	}
	#article_archive article a {
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
	}
	#article_archive article a:hover {
		box-shadow:0 0 25px rgba(51,51,51,.1);
	}
	#article_archive article h2 {
		text-align:center;
		font-size:18px;
	}
	#article_archive article .article-thumbnail {
		margin:20px 0 0;
		height:240px;
	}
	#article_archive article .article-thumbnail img {
		width:auto;
		max-width:80%;
		height:auto;
		max-height:240px;
		display:block;
		margin:auto;
	}
	#article_archive article h3 {
		margin-top:10px;
		font-size:16px;
		font-weight:500;
	}
	#article_archive article h3 + p {
		margin-top:5px;
		font-size:14px;
	}
	
	
	/* 詳細ページ */
	/* スライダー本体 */
	.article-photo-slider-container {
		width:600px;
		margin:30px auto 0;
		padding-bottom:30px;
	}
	.photo-slider {
		display: flex;
		transition: transform 0.5s ease-in-out;
	}
	/* アニメーションを一時的に無効にするためのクラス */
	.photo-slider.no-transition {
		transition: none;
	}
	/* スライダーコンテナ */
	.article-photo-slider-container {
		position: relative;
		overflow: hidden;
	}
	/* スライド */
	.slide {
		flex: 0 0 100%;
		position: relative;
	}

	/* スライド内の画像 */
	.slide-image {
		display: block;
		width: auto;
		max-width:100%;
		height: auto;
		max-height:600px;
		margin:auto;
	}
	/* スライド内のキャプション */
	.slide-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 10px;
		text-align: center;
		font-size: 0.9em;
	}
	/* ドットナビゲーション */
	.slider-dots {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 8px;
		z-index: 10;
	}
	.slider-dots button {
		background-color: rgba(0, 0, 0, 0.3);
		border: none;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		cursor: pointer;
		outline: none;
		transition: background-color 0.3s ease;
	}
	.slider-dots button.active {
		background-color: rgba(0, 0, 0, 0.8);
	}
	.slider-dots button:hover {
		background-color: rgba(0, 0, 0, 0.6);
	}
	
	.top_thumb {
		width:600px;
		margin:0 auto -30px;
		text-align:center;
	}
	.top_thumb img {
		width:auto;
		max-width:100%;
		height: auto;
		max-height:600px;
		margin:auto;
	}
	
	.article_info {
		width:800px;
		max-width:90%;
		margin:30px auto 0;
		border-collapse:collapse;
	}
	.article_info th {
		width:10em;
		padding:10px;
		border:1px solid #d0d0d0;
		font-size:16px;
		background:#fafafa;
	}
	.article_info td {
		padding:10px;
		font-size:14px;
		border:1px solid #d0d0d0;
	}
	.article_info td a {
		color:#0f82af;
		text-decoration:underline;
	}
	
	.article_youtube {
		width:800px;
		max-width:90%;
		margin:20px auto;
	}
	.article_youtube .iframe {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}
	.article_youtube .iframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	.property-rooms {
		width:800px;
		max-width:90%;
		margin:30px auto 0;
	}
	.property-rooms h2 {
		text-align:center;
		font-size:24px;
		font-weight:700;
		padding-bottom:10px;
		position:relative;
	}
	.property-rooms h2::after {
		content:"";
		width:50px;
		height:2px;
		background:#0c78a6;
		position:absolute;
		bottom:0;
		left:calc(50% - 25px);
	}
	.property-rooms table {
		margin:20px 0 0;
		width:100%;
		border-collapse:collapse;
	}
	.property-rooms table th {
		width:10em;
		padding:15px;
		border:1px solid #d0d0d0;
		font-size:16px;
		background:#fafafa;
	}
	.property-rooms table td {
		padding:15px;
		font-size:14px;
		border:1px solid #d0d0d0;
	}
	.property-rooms table td img {
		max-width:100%;
	}
	.property-rooms .iframe {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
		margin-top:10px;
	}
	.property-rooms .iframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	.cta_box {
		width:800px;
		max-width:90%;
		margin:30px auto 0;
		padding:15px;
		border:1px solid #f0f0f0;
		font-size:16px;
		text-align:center;
	}
	.cta_box .cta_inner:first-child {
		padding-bottom:20px;
		margin-bottom:20px;
		border-bottom:1px solid #f0f0f0;
	}
	.cta_inner .inquiry_btn {
		width:50%;
		margin:10px auto;
		text-align:center;
	}
	.cta_inner .inquiry_btn a {
		font-size:18px;
		padding:10px 0;
		display:block;
		border:1px solid #c0c0c0;
		border-radius:10px;
		background:#0c78a6;
		color:#FFF;
	}
	.cta_inner .inquiry_btn a span {
		padding-left:10px;
		font-size:16px;
	}
	
	.back_archive_btn {
		width:400px;
		margin:30px auto 0;
		text-align:center;
	}
	.back_archive_btn a {
		font-size:18px;
		padding:10px 0;
		display:block;
		border:1px solid #c0c0c0;
		border-radius:10px;
	}
	.back_archive_btn a span {
		display:block;
		font-size:16px;
	}
	
	.no_rooms {
		text-align:center;
		margin-top:30px;
	}
	
	
}

/*--------------------------------------------------
**************************************************
  SP用
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	
	/* 一覧 */
	#article_archive article {
		width:90%;
		margin:20px auto 0;
		padding:20px 4vw;
		border:1px solid #f0f0f0;
		border-top:3px solid #0c78a6;
		position:relative;
	}
	#article_archive article a {
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
	}
	#article_archive article h2 {
		text-align:center;
		font-size:4.5vw;
	}
	#article_archive article .article-thumbnail {
		margin:20px 0 0;
	}
	#article_archive article .article-thumbnail img {
		width:auto;
		max-width:80%;
		height:auto;
		max-height:45vw;
		display:block;
		margin:auto;
	}
	#article_archive article h3 {
		margin-top:10px;
		font-size:4vw;
		font-weight:500;
	}
	#article_archive article h3 + p {
		margin-top:5px;
		font-size:3.6vw;
	}
	
	
	/* スライダー本体 */
	.article-photo-slider-container {
		width:90%;
		margin:30px auto 0;
		padding-bottom:30px;
	}
	.photo-slider {
		display: flex;
		transition: transform 0.5s ease-in-out;
	}
	/* アニメーションを一時的に無効にするためのクラス */
	.photo-slider.no-transition {
		transition: none;
	}
	/* スライダーコンテナ */
	.article-photo-slider-container {
		position: relative;
		overflow: hidden;
	}
	/* スライド */
	.slide {
		flex: 0 0 100%;
		position: relative;
	}

	/* スライド内の画像 */
	.slide-image {
		display: block;
		width: auto;
		max-width:100%;
		height: auto;
		max-height:60vw;
		margin:auto;
	}
	/* スライド内のキャプション */
	.slide-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 10px;
		text-align: center;
		font-size: 0.9em;
	}
	/* ドットナビゲーション */
	.slider-dots {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 8px;
		z-index: 10;
	}
	.slider-dots button {
		background-color: rgba(0, 0, 0, 0.3);
		border: none;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		cursor: pointer;
		outline: none;
		transition: background-color 0.3s ease;
	}
	.slider-dots button.active {
		background-color: rgba(0, 0, 0, 0.8);
	}
	.slider-dots button:hover {
		background-color: rgba(0, 0, 0, 0.6);
	}
	
	.top_thumb {
		width:80%;
		margin:0 auto -30px;
		text-align:center;
	}
	.top_thumb img {
		width:auto;
		max-width:100%;
		height: auto;
		max-height:60vw;
		margin:auto;
	}
	
	.article_info {
		width:90%;
		margin:30px auto 0;
		border-collapse:collapse;
	}
	.article_info th {
		width:6em;
		padding:8px;
		border:1px solid #d0d0d0;
		font-size:3.4vw;
		background:#fafafa;
	}
	.article_info td {
		padding:8px;
		font-size:3.4vw;
		border:1px solid #d0d0d0;
	}
	.article_info td a {
		color:#0f82af;
		text-decoration:underline;
	}
	
	.article_youtube {
		width:90%;
		margin:20px auto;
	}
	.article_youtube .iframe {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}
	.article_youtube .iframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	.property-rooms {
		width:90%;
		margin:30px auto 0;
	}
	.property-rooms h2 {
		text-align:center;
		font-size:5vw;
		font-weight:700;
		padding-bottom:10px;
		position:relative;
	}
	.property-rooms h2::after {
		content:"";
		width:50px;
		height:2px;
		background:#333;
		position:absolute;
		bottom:0;
		left:calc(50% - 25px);
	}
	.property-rooms table {
		margin:20px 0 0;
		width:100%;
		border-collapse:collapse;
	}
	.property-rooms table th {
		width:6em;
		padding:8px;
		border:1px solid #d0d0d0;
		font-size:3.4vw;
		background:#fafafa;
	}
	.property-rooms table td {
		padding:10px;
		font-size:3.4vw;
		border:1px solid #d0d0d0;
	}
	.property-rooms table td img {
		max-width:100%;
	}
	.property-rooms .iframe {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
		margin-top:10px;
	}
	.property-rooms .iframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	.cta_box {
		width:90%;
		margin:30px auto 0;
		padding:15px;
		border:1px solid #f0f0f0;
		font-size:3.6vw;
	}
	.cta_box .cta_inner:first-child {
		padding-bottom:20px;
		margin-bottom:20px;
		border-bottom:1px solid #f0f0f0;
	}
	.cta_inner .inquiry_btn {
		margin-top:10px;
		text-align:center;
	}
	.cta_inner .inquiry_btn a {
		font-size:5vw;
		padding:10px 0;
		display:block;
		border:1px solid #c0c0c0;
		border-radius:10px;
		background:#0c78a6;
		color:#FFF;
	}
	.cta_inner .inquiry_btn a span {
		padding-left:10px;
		font-size:4vw;
	}
	
	.back_archive_btn {
		width:90%;
		margin:30px auto 0;
		text-align:center;
	}
	.back_archive_btn a {
		font-size:4.5vw;
		padding:10px 0;
		display:block;
		border:1px solid #c0c0c0;
		border-radius:10px;
	}
	.back_archive_btn a span {
		display:block;
		font-size:3.5vw;
	}
	
	.no_rooms {
		text-align:center;
		margin-top:30px;
	}
	
	

}/* End SP */