@charset "UTF-8";

#openhouse{

	/* 一覧ページ */

	/* タブ */
	& .basicSubNavi ul li{
		 flex-basis: calc((100% - 32px) / 3); margin-bottom: 0;

		& a{ box-sizing: border-box;}
		&.all .active{ border-color: #dcdcdc; background: #dcdcdc; color: #333;}
		&:nth-of-type(2) .active,
		&:nth-of-type(2) a:hover{ border-color: #B0C285; background: #B0C285; color: #fff;}
		&:nth-of-type(3) .active,
		&:nth-of-type(3) a:hover{ border-color: #7EA784; background: #7EA784; color: #fff;}
	}
	@media screen and (max-width: 767px) {
		& .basicSubNavi ul{
			margin-bottom: 40px;

			& li{
		 		flex-basis: calc((100% - 8px) / 3);

				& a{ padding: 1.5em 0;}
			}
		}
	}

	/* サムネ */
	& #openhouseList{
		& .salesBox{
			border: 1px solid #c3c3c3; letter-spacing: 0.08em;

			& .salesBox__link{ grid-template-rows: auto 1fr; height: auto;}
			& .sale__head .status{ justify-content: space-between; width: 100%;}
			& .sale__head .status li{ height: 30px;}
			& .term_status{ width: 44%;}
			& .term_category{ border-radius: 0 8px;}

			& .textBox{ 
				margin-top: 5px;

				& .estateTitle{ font-size: clamp( 11px, 2.2vw , 17px); line-height: 1.5;}

				& .specWrap{ 
					width: 100%; margin-top: 10px; padding: 0 20px 22px; box-sizing: border-box; display: block;
					& dl{ border-bottom: 1px dotted #5B7D61; padding-bottom: 0.5em; margin-bottom: 0.5em;}
					& dt ,
					& dd{ font-size: 15px; }
					& dt{ 
						flex-basis: 7em; color: #5B7D61;
						& i{
							vertical-align: baseline; display: inline-block; margin-right: 0.5em;
						}
					}
					& dd{ flex-basis: calc(100% - 7em);}

					& .btnList li{ 
						margin-top: 12px; flex-basis: calc((100% - 10px)/2); text-decoration: none; font-size: clamp( 12px , 2.3vw , 16px);
					
						& a{ position: relative; display: inline-block; width: 100% ; height: 45px; align-content: center; text-decoration: none; text-align: center;                          box-sizing: border-box; line-height: 1;}
						& a:hover{ opacity: 0.7;}
						& a::before{ position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: block; content: '';}
						& a::before { background: #333; clip-path: circle(8.5px at 50% 50%); width: 17px; height: 17px;}
						&.btn_detail a{ color: #333; border: 1px solid #333;}
						&.btn_detail a::before{ background: url(/assets/img/openhouse/circle_black.svg);}

						&.btn_reserve a{ color: #fff; background: #BB3614;}
						&.btn_reserve a::before{ background: url(/assets/img/openhouse/circle_white.svg);}
					}
				}
			}

			@media screen and (max-width: 767px) {
				& .sale__head .status li{ height: 20px;}
				& .textBox{ 
					margin-top: 10px;
						& .specWrap{ 
							padding: 0 11px 11px;

							& .dataBox{                   padding-top: 0.5em; border-top: 1px dotted #5B7D61;}
							& dt ,
							& dd{ flex-basis: 100%; font-size: 11px; }
							& .btnList li { flex-basis: 100%; margin-top: 10px;}
						}
					}
			}
		}
	}

	/* 詳細ページ */
	&.openhouse_detail{

		--openhouse-green: #5B7D61;
		--openhouse-red: #c73514;
		--openhouse-line: #4F7162;

		& #commonContent { font-size: 16px; line-height: 1.9; letter-spacing: 0.06em;}

		/* ステータス・所在地 */
		& .property_head { justify-content: flex-start; align-items: center; gap: 8px 14px; margin-bottom: 8px;
			& .status { display: flex; flex-wrap: wrap;  gap: 6px; margin: 0; padding: 0; list-style: none;
				& li { padding: 10px 14px; align-content: center;  font-size: clamp( 13px , 1.1vw ,14px); line-height: 1; }
			}
			& .property_location { margin: 0; font-size: clamp( 14px , 1.5vw ,15px); color: var(--openhouse-line); font-weight: bold;}
		}

		/* 物件名 */
		& .property_tit { margin: 0 0 24px; font-size: clamp(20px, 2.4vw , 29px); font-weight: bold; line-height: 1.6; }
		& .property_tit br{ display: none;}

		/* スライダー */
		& .slide_container { margin-bottom: 80px; position: relative;
			& .swiper-inner{ 
				position: relative;
			
				/* 矢印カスタマイズ */
				& .swiper-button-prev,
				& .swiper-button-next { width: 50px; height: 50px; margin-top: -25px; padding: 0; border: none; border-radius: 0; background: transparent; font-size: 0; }

				/* デフォルトのSVG矢印を非表示 */
				& .swiper-button-prev svg,
				& .swiper-button-next svg { display: none; }

				& .swiper-button-prev::after,
				& .swiper-button-next::after { content: "" !important; display: block; flex-shrink: 0; width: 54px; height: 54px; margin: auto; background: url("/assets/img/openhouse/circle_white02.svg") center / contain no-repeat; font-size: 0; }

				& .swiper-button-next::after { transform: rotate(180deg); }
				& .swiper-button-prev { left: 12px; }
				& .swiper-button-next { right: 12px; }
			}
			& .slideBox { position: relative; 
				& .swiper-wrapper { margin: 0; padding: 0; list-style: none; }
				& .swiper-slide { flex-shrink: 0; height: auto;
					& figure { aspect-ratio: 1199 / 719; overflow: hidden; }
					& img { display: block; width: 100%; height: 100%; object-fit: cover; }
				}
				& .swiper-slide img { height: auto; width: 100%; }

			}
			
			& .thumbBox { margin-top: 18px; overflow: hidden;
				& .swiper-wrapper { margin: 0; padding: 0; list-style: none; gap: 18px;}
				& .swiper-slide { flex-shrink: 0; flex-basis: calc((100% - 126px)/8); height: auto; cursor: pointer;
					& figure { aspect-ratio: 133 / 80; overflow: hidden; background: #f1f1f1; }
					& img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: opacity 0.25s; }
					&:hover img, &.swiper-slide-thumb-active img { opacity: 1; }
				}
			}
		}

		/* 共通見出し・本文 */
		& .openhouse_heading { margin: 0 0 25px; padding-bottom: 12px; border-bottom: 2px dashed var(--openhouse-green); font-size: 20px; font-weight: bold; line-height: 1.6; }
		& .openhouse_text { overflow-wrap: anywhere;
			& p { margin: 0 0 1em;
				&:last-child { margin-bottom: 0; }
			}
			& ul, & ol { padding-left: 1.5em; }
		}

		/* コンセプト */
		& .concept_container { margin-bottom: 32px; }

		/* 開催情報 */
		& .event_info { padding: 30px; background: #FFFBE3;
			& dl { margin: 0; }
			& .event_info_row { display: grid; grid-template-columns: minmax(70px, max-content) minmax(0, 1fr);gap: 14px; padding-block: 8px; border-bottom: 1px dotted var(--openhouse-line);
				&:first-child { border-top: 1px dotted var(--openhouse-line); }
			}
			& dt { color: #4F7162; font-weight: 400; font-size: 14px;}
			& dd { margin: 0; overflow-wrap: anywhere; font-size: 14px;}
			
			& dt::before{ display: inline-block; content: ""; width: 16px; height: 16px; margin-right: 0.2em; vertical-align: text-bottom;}
			& .date dt::before{ background: url(/assets/img/openhouse/calender.svg)no-repeat; background-size: contain;}
			& .time dt::before{ background: url(/assets/img/openhouse/alarm.svg)no-repeat; background-size: contain;}
			& .location dt::before{ background: url(/assets/img/openhouse/location_on.svg)no-repeat; background-size: contain;}
			& .addinfo dt::before{ background: url(/assets/img/openhouse/addinfo.svg)no-repeat; background-size: contain;}

		}

		/* 予約ボタン */
		& .cvBnr { margin: 48px auto 60px; text-align: center;
			& p { margin: 0; }
			& a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 18px; width: 235px; height: 62px; background: var(--openhouse-red); color: #fff; font-size: clamp(13px , 1.3vw , 16px); text-decoration: none; transition: opacity 0.25s;
				&::after { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); content: ""; display: inline-block; background: url(/assets/img/openhouse/circle_white.svg) no-repeat; width: 22px; height: 22px; background-size: cover;}
				&:hover { opacity: 0.75; }
			}
		}

		/* モデルハウスのポイント */
		& .point_container { margin-bottom: 70px; }

		/* ポイント・おすすめのチェックリスト */
		& .point_list, & .recommend_list { margin: 0; padding: 0; list-style: none;
			& > li { position: relative; padding-left: 2em;
				& + li { margin-top: 6px; }
				&::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; background: url(/assets/img/openhouse/check.svg) no-repeat; width: 19px; height: 19px; background-size: cover; vertical-align: text-bottom;}
				& p { margin: 0; }
			}
		}

		/* 間取り */
		& .map_container { margin-bottom: 60px;
			& .openhouse_text { margin-bottom: 24px; }
			& .map img { display: block; width: 100%; height: auto; }
			& .property_area { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 35px; font-size: clamp( 14px , 1.3vw , 16px); }
		}

		/* 内観：2列 */
		& .interior_container { margin-bottom: 56px; }
		& .interior_list { 
			display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 68px; margin: 0; padding: 0; list-style: none;

			& .interior_tit{ font-size: clamp( 16px , 2.3vw , 18px); margin-bottom: 0.8em; line-height: 1.5; font-weight: bold;}
			& .interior_tit span{ display: inline-block; border: 1px solid #333; padding: 0.3em 0.5em; margin-right: 0.8em;}
			& .interior_item { min-width: 0; }
			& figure { margin-bottom: 12px; aspect-ratio: 3 / 2; overflow: hidden;
				& img { display: block; width: 100%; height: 100%; object-fit: cover; }
			}
			& .openhouse_text { font-size: 14px; line-height: 1.7; }
		}

		/* ピックアップ内観 */
		& .interior_pickup { margin-bottom: 80px;
			& .openhouse_text { margin-bottom: 60px; }
			& .interior_pickup_image { width: 80%; margin-inline: auto;
				& img { display: block; width: 100%; height: auto; }
			}
		}

		/* おすすめ */
		& .recommend_container { 
			margin-bottom: 70px; 
			
			& .openhouse_text{ margin-top: 1em;}
		}

		/* よくあるご質問 */
		& .faq_container{ margin-top: 77px;}
		& .faq__item { background: #FFFBE3; margin-bottom: 20px;}
		& .faq__item summary::-webkit-details-marker { display: none;}
		& .faq__item summary { list-style: none;}
		& .faq__header { display: flex; justify-content: space-between; align-items: flex-start; padding: 2.5rem; cursor: pointer; outline: none; transition: background-color 0.2s ease;}
		& .faq__header-left { display: flex; align-items: flex-start; gap: 16px; align-items: center; flex: 1; padding-right: 20px;}
		& .faq__body { display: none; align-items: flex-start; gap: 16px; padding: 1.5rem 2.5rem 2.5rem 2.5rem;}
		& .faq__title { font-size: 16px; width: 76%; line-height: 1.5; letter-spacing: 0.1em; color: #4F7162;}
		& .faq__text { line-height: 1.5; margin: 0; padding-right: 50px; font-size: 16px; letter-spacing: 0.1em; line-height:1.6;}
		& .faq__badge { display: flex; justify-content: center; align-items: center; width: 39px; height: 39px; border-radius: 50%; color: #fff; font-size: 16px; font-weight: bold; flex-shrink: 0; }
		& .faq__badge--q { background-color: #507162;}
		& .faq__badge--a { background-color: #BB3614;}
		& .faq__toggle { position: relative; right: -10px; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: #333;}
		& .faq__toggle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 1.5px; background-color: #fff; }
		& .faq__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); width: 14px; height: 1.5px;background-color: #fff; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 1;}
		& .faq__item.is-active .faq__toggle::after { transform: translate(-50%, -50%) rotate(180deg); opacity: 0;}

		@media screen and (min-width: 768px) {
			& .faq__header:hover { background-color: #e5f1e9;}
		}

		@media screen and (max-width: 767px) {
			& #commonContent {  line-height: 1.8; }
			& .property_tit { margin-bottom: 18px; }
			& .property_tit br{ display: block;}
			& .slide_container { margin-bottom: 40px;
				& .swiper-inner {
					& .swiper-button-next, & .swiper-button-prev { width: 30px; height: 30px; margin-top: -16px;
					}
					& .swiper-button-prev { left: -15px; }
					& .swiper-button-next { right: -15px; }
					& .swiper-button-prev::after,
					& .swiper-button-next::after{ width: 30px; height: 30px;}
				}
				& .thumbBox { 
					margin-top: 10px; 
					& .swiper-wrapper {
						gap: 10px; flex-wrap: wrap;

						& .swiper-slide { flex-basis: calc((100% - 30px)/4); 
						}
					}
				}
				
			}
			& .concept_container { margin-bottom: 25px;}
			& .openhouse_heading { margin-bottom: 16px; padding-bottom: 10px; font-size: 18px; }
			& .event_info { padding: 20px;}
			& .cvBnr { margin: 28px 0 53px;
				& a { width: 190px; height: 50px; 

					&::after { width: 18px; height: 18px;}
				}
				
			}
			& .point_container, & .interior_pickup { margin-bottom: 44px; }
			& .point_list, & .recommend_list { 
				& > li { 
					position: relative; padding-left: 2em;
					
					& + li { margin-top: 6px; }
					&::before { top: 0.3em; transform: none;}
				}
			}
			& .interior_container { margin-bottom: 36px; }
			& .interior_list { grid-template-columns: 1fr; gap: 32px; }
			& .interior_tit span{ margin-bottom: 0.5em;}
			& .interior_pickup{
				& .openhouse_text { margin-bottom: 20px; }
				& .interior_pickup_image { width: 100%; }
			}
			& .map_container { 
				& .property_area { margin-top: 25px;}
			}
			& .map_container .property_area { flex-direction: column; gap: 0; font-size: 12px; }

			& .faq__header { padding: 1.5rem; }
			& .faq__body { padding: 1.5rem;}
			& .faq__header-left { align-items: flex-start; padding: 0;}
			& .faq__title { width: 100%;}
			& .faq__text{ padding-right: 10px; font-size: 14px;}
			& .faq__badge { margin-top: 0.1em; width: 26px; height: 26px; border-radius: 50%;  font-size: 1rem; }
			& .faq__toggle{ width: 25px; height: 25px;}
			& .faq__toggle::before , & .faq__toggle::after{ width: 12px;}
		}
	}

}