@charset "utf-8";

body {
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
}

/*Zen Maru Gothic 400*/
@font-face {
	font-family: "Zen Maru Gothic";
	src: url(/fonts/ZenMaruGothic-Regular.woff2);
	font-weight: 400;
	font-display: swap;
}
/*Zen Maru Gothic 500*/
@font-face {
	font-family: "Zen Maru Gothic";
	src: url(/fonts/ZenMaruGothic-Medium.woff2);
	font-weight: 500;
	font-display: swap;
}
/*Zen Maru Gothic 700*/
@font-face {
	font-family: "Zen Maru Gothic";
	src: url(/fonts/ZenMaruGothic-Bold.woff2);
	font-weight: 700;
	font-display: swap;
}

#content {
	width: 100%;
}

#contents{
	width: 100%;
	padding: 0;
	overflow: hidden;
}

.l-main {
	width: 100%;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
}

.l-main * {
	font-family: "Zen Maru Gothic", sans-serif;
	box-sizing: border-box;
}

/* テンプレフロート非表示 */
.reservation-side-link {
	display: none !important;
}

/* =========================================
   フロート
   Figma node: 15596:6952 / 100×235 / right:0 top:200
   ========================================= */
.reservation-side-link{
	display: none!important;
}

.float__box {
	position: relative;
	z-index: 10;
}

.float__btn {
	position: fixed;
	top: 200px;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100px;
}

.float__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100px;
	border-radius: 10px 0 0 10px;
	filter: drop-shadow(0 3px 2.5px rgba(0, 0, 0, 0.16));
	text-decoration: none;
	box-sizing: border-box;
}

.float__item svg {
	display: block;
	flex-shrink: 0;
	width: 37px;
	height: 37px;
}

.float__txt {
	font-size: 22px;
	font-weight: 500;
	color: #fff;
	text-align: center;
}

/* 来店予約: 100×125 / #e89e16 / py16 px25 / gap4 */
.float__item--reserve {
	gap: 4px;
	height: 125px;
	padding: 16px 25px;
	background-color: #e89e16;
}

.float__item--reserve .float__txt {
	line-height: 1.2;
}

/* LINE: 100×100 / #06c152 / py9 px25 */
.float__item--line {
	height: 100px;
	padding: 9px 25px;
	background-color: #06c152;
}

.float__item--line .float__txt {
	line-height: 1.8;
}

/* =========================================
   共通
   ========================================= */

[class*="section__wrapper--"]{
	position: relative;
	padding-block: 90px;
}

[class*="section__inner--"]{
	position: relative;
	width: 1140px;
	margin: 0 auto;
	z-index: 0;
}

[class*="ttl__box--"]{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 40px;
	text-align: center;
}

[class*="section__sub-ttl--"]{
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	color: #28bd93;
}

[class*="section__ttl--"]{
	margin: 0;
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	color: #333;
}

[class*="detail__txt--"]{
	margin: 0;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.8;
	color: #403f3f;
	text-align: center;
}

[class*="flex__list--"]{
	display: flex;
	flex-wrap: wrap;
}

/* =========================================
   メインビジュアル
   Figma node: 15607:7669 / 1920×604
   ========================================= */

.main__box {
	position: relative;
	width: 100%;
	height: 549px;
	background-color: #fff;
	padding-top: 55px;
}

.main__inner {
	position: relative;
	width: 1140px;
	margin: 0 auto;
}

/* catch: x390 y55 / gap44 / w459 */
.main__catch {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 44px;
	width: 459px;
	z-index: 1;
}

/* catch_list: gap15 */
.main__catch-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* catch: 424×143 */
.main__catch-ttl {
	position: relative;
	width: 424px;
	height: 143px;
	margin: 0;
	overflow: hidden;
	font-weight: 700;
	line-height: 1.5;
}

.main__catch-line {
	display: flex;
	align-items: flex-end;
}

.main__catch-line:first-child {
	position: absolute;
	top: -17px;
	left: -37px;
}

.main__catch-line:last-child {
	position: absolute;
	top: 63px;
	left: 0;
}

.main__catch-txt {
	font-size: 50px;
	font-weight: 700;
	line-height: 1.5;
	color: #333;
	white-space: nowrap;
}

.main__catch-txt--green {
	font-size: 60px;
	color: #28bd93;
	margin-right: -17px;
}

.main__catch-line:last-child .main__catch-txt:not(.main__catch-txt--orange) {
	margin-right: -17px;
}

.main__catch-txt--orange {
	font-size: 60px;
	color: #e89e16;
	margin-right: -17px;
}

/* caption: gap15 */
.main__caption {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.main__caption-txt {
	margin: 0;
	font-size: 27px;
	font-weight: 500;
	line-height: 1;
	color: #333;
}

.main__caption-num {
	font-size: 37px;
}

.main__caption-unit {
	font-size: 24px;
}

/* contact: 459 / padding 50×30 / #fff4d2 / radius10 / gap19 */
.main__contact {
	display: flex;
	flex-direction: column;
	gap: 19px;
	width: 459px;
	padding: 30px 50px;
	border-radius: 10px;
	background-color: #fff4d2;
}

/* phone: gap10 */
.main__phone {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* tel: icon34 gap8 / 44px */
.main__tel {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	margin: 0;
}

.main__tel svg {
	display: block;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
}

.main__tel span {
	font-size: 44px;
	font-weight: 500;
	line-height: 1;
	color: #333;
	white-space: nowrap;
}

/* address: 16px #7c7c7c */
.main__address {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: #7c7c7c;
	white-space: nowrap;
}

/* LINE btn: 356×70 / #06c152 / radius99999 / 22px */
.main__line-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 356px;
	height: 70px;
	border-radius: 99999px;
	background-color: #06c152;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	text-decoration: none;
}

.main__line-btn svg {
	display: block;
	flex-shrink: 0;
	width: 37px;
	height: 37px;
}

/* img: x920 y0 w1000 h598
   mv.webp(1094×622) は写真＋吹き出し＋マスコット＋バッジの書き出し */
.main__img {
	position: absolute;
	top: -55px;
	right: -390px;
	z-index: 1;
}

.main__img::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1094px;
	height: 622px;
	background: url(../images/mv.webp) no-repeat center / cover;
}

/* =========================================
   東小金井エリアのお部屋探し
   Figma node: 15599:15884
   ========================================= */

.section__wrapper--higashikoganei {
	padding-block: 146px 100px;
}

/* caption underline: #ffefd2 */
.detail__txt--higashikoganei {
	margin-bottom: 20px;
}

.detail__txt--higashikoganei span {
	position: relative;
	z-index: 0;
	color: #e89e16;
}

.detail__txt--higashikoganei span::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 1px;
	z-index: -1;
	width: 100%;
	height: 10px;
	background-color: #ffefd2;
}

/* illustration + txt: gap30 */
.detail__flex--higashikoganei {
	display: flex;
	align-items: center;
	gap: 30px;
	width: 1140px;
	margin-bottom: 39px;
}

/* illustration: 250×250 / #e3fff7 */
.detail__img--higashikoganei {
	flex-shrink: 0;
	width: 250px;
	height: 250px;
	margin: 0;
	border-radius: 50%;
	background-color: #e3fff7;
	overflow: hidden;
}

.detail__img--higashikoganei img {
	width: 250px;
	height: 250px;
	object-fit: cover;
}

/* txt_list: gap11 / 16px / lh1.8 */
.detail__txt-box--higashikoganei {
	display: flex;
	flex-direction: column;
	gap: 11px;
	flex: 1;
	min-width: 0;
}

.detail__txt-box--higashikoganei p {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	color: #333;
}

/* strong_list: 2col / gap30 / counter */
.flex__list--higashikoganei {
	gap: 30px;
	width: 1142px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: point;
}

/* strong_item: 556 */
.higashikoganei__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 556px;
	padding: 0 0 30px;
	border: 1px solid #28bd93;
	border-radius: 10px;
	background-color: #fff;
	counter-increment: point;
}

/* POINT tag: counter */
.higashikoganei__point {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0;
	border-radius: 10px 0 10px 0;
	background-color: #28bd93;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	text-align: center;
	height: 46px;
	justify-content: center;
	padding: 0 11px 0 16px;
}

.higashikoganei__point::after {
	content: counter(point, decimal-leading-zero);
	font-size: 35px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 2.1px;
}

/* bg image: 554×200 */
.higashikoganei__img {
	width: 554px;
	height: 200px;
	margin: 0;
	border-radius: 9px 9px 0 0;
	overflow: hidden;
}

.higashikoganei__img img {
	width: 554px;
	height: 200px;
	object-fit: cover;
	object-position: center bottom;
}

/* txt_list: 476 / gap6 */
.higashikoganei__txt-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 476px;
}

.higashikoganei__ttl {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.8;
	color: #333;
	text-align: center;
}

.higashikoganei__ttl span {
	color: #28bd93;
}

.higashikoganei__txt {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.61;
	color: #333;
}

/* =========================================
   マップ
   ========================================= */

.section__wrapper--map {
	padding-block: 90px 99px;
	background-color: #E3FFF7;
}

.map__img {
	position: relative;
	width: 1140px;
	z-index: 0;
}

.map__img::before {
	position: absolute;
	content: "";
	background: url(../images/map_before.webp) no-repeat center / cover;
	width: 468px;
	height: 348px;
	bottom: -96px;
    left: 53px;
	z-index: 1;
}

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

/* =========================================
   お問い合わせ
   Figma node: 15627:7115 / 1920×566
   ========================================= */

.section__wrapper--contact {
	padding-block: 100px;
	background: url(../images/contact_bg.webp) no-repeat center / cover;
}

.ttl__box--contact {
	margin-bottom: 0;
}

/* outer frame: 1140 / border white / padding10 / radius10 */
.contact__box {
	width: 1140px;
	padding: 10px 10px 9px;
	border: 1px solid #fff;
	border-radius: 10px;
	box-sizing: border-box;
}

/* contents: 1120 / rgba(255,255,255,0.9) / py60 px88 / gap40 */
.contact__contents {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	width: 1120px;
	padding: 60px 75px 60px 75px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.9);
	box-sizing: border-box;
}

.contact__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* phone + btns: gap28 */
.contact__flex {
	display: flex;
	align-items: center;
	gap: 28px;
}

/* phone: icon34 gap8 / 44px */
.contact__item--tel {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
}

.contact__item--tel svg {
	display: block;
	flex-shrink: 0;
	width: 37px;
	height: 37px;
}

.contact__item--tel span {
	font-size: 44px;
	font-weight: 500;
	line-height: 1;
	color: #333;
	white-space: nowrap;
}

/* btns: gap15 */
.contact__btns {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* reserve: 320×70 / #e89e16 / 22px */
.contact__item--reserve,
.contact__item--line {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 320px;
	height: 70px;
	border-radius: 99999px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.contact__item--reserve {
	background-color: #e89e16;
}

/* LINE: 320×70 / #06c152 */
.contact__item--line {
	background-color: #06c152;
}

.contact__item--reserve svg,
.contact__item--line svg {
	display: block;
	flex-shrink: 0;
	width: 37px;
	height: 37px;
}

/* address: 16px #7c7c7c */
.contact__detail {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: #7c7c7c;
	white-space: nowrap;
}

/* =========================================
   東小金井エリアに住むメリット
   Figma node: 15599:15934 / 1920×1489
   ========================================= */

.section__wrapper--merit {
	padding-bottom: 100px;
	overflow: visible;
}

/* decoration: merit_before.webp / x1285 y16 / 186×190 */
.section__wrapper--merit::before {
	content: "";
	position: absolute;
	top: 16px;
	left: calc(50% + 318px);
	z-index: 1;
	width: 193px;
	height: 190px;
	background: url(../images/merit_before.webp) no-repeat center / contain;
	pointer-events: none;
}

.merit__list {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: merit;
}

.merit__item {
	position: relative;
	width: 100%;
	height: 375px;
	counter-increment: merit;
}

/* contents: 620 / #fff4d2 / padding40 / gap15 / radius10 */
.merit__contents {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 15px;
	width: 620px;
	height: 315px;
	padding: 40px;
	border-radius: 10px;
	background-color: #fff4d2;
	box-sizing: border-box;
	transform: translateY(-50%);
}

/* img: 622×375 / radius10 / background */
.merit__img {
	position: absolute;
	top: 0;
	z-index: 1;
	width: 622px;
	height: 375px;
	border-radius: 10px;
}

.merit__item--campus .merit__img {
	background: url(../images/merit01.webp) no-repeat center bottom / cover;
}

.merit__item--station .merit__img {
	background: url(../images/merit02.webp) no-repeat center / cover;
}

.merit__item--town .merit__img {
	background: url(../images/merit03.webp) no-repeat center / cover;
}

/* 01・03: テキスト左 / 画像右（重なり102px） */
.merit__item--campus .merit__contents,
.merit__item--town .merit__contents {
	left: 0;
}

.merit__item--campus .merit__img,
.merit__item--town .merit__img {
	right: 0;
}

/* 02: 画像左 / テキスト右（重なり102px） */
.merit__item--station .merit__img {
	left: 0;
}

.merit__item--station .merit__contents {
	right: 0;
}

/* ttl: gap14 / num + title */
.merit__ttl-box {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.merit__ttl-box::before {
	content: counter(merit, decimal-leading-zero);
	display: block;
	flex-shrink: 0;
	font-size: 63px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 3.15px;
	color: #e89e16;
	text-box: trim-both cap alphabetic;
}

.merit__ttl {
	width: 430px;
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	color: #333;
}

.merit__txt {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.62;
	color: #333;
}

/* =========================================
   暮らしのコラム
   Figma node: 15599:15939 / 1920×760
   ========================================= */

.section__wrapper--column {
	padding-bottom: 100px;
	background-color: #e3fff7;
	overflow: hidden;
}

.ttl__box--column {
    margin-bottom: 33px;
}

/* decoration: column_before.webp / x1225 y25 / 182×180 */
.section__wrapper--column::before {
	content: "";
	position: absolute;
	top: 25px;
	left: calc(50% + 265px);
	z-index: 1;
	width: 182px;
	height: 180px;
	background: url(../images/column_before.webp) no-repeat center / contain;
	pointer-events: none;
}

.section__wrapper--column .section__inner--column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* slider */
.column__slider {
	width: 100%;
	margin-bottom: 17px;
	padding: 6px 0 8px;
	overflow: hidden;
}

.flex__list--column.swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

/* card: drop-shadow 0 2 6 / rgba(0,0,0,0.14) / radius10 / gap13 / pb25 */
.column__item.swiper-slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 319px;
	height: auto;
	padding-bottom: 25px;
	border-radius: 10px;
	background-color: #fff;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.14));
	box-sizing: border-box;
}

.column__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

/* img: 319×213 / background */
.column__img-box{
	position: relative;
}

.column__img {
	position: relative;
	width: 319px;
	height: 213px;
	margin: 0;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

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

/* date tag: #74bfaa / radius8 */
.column__date {
	position: absolute;
	top: 7px;
	left: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 10px 10px;
	border-radius: 8px;
	background-color: #74bfaa;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

/* txt: 270 / gap5 */
.column__txt-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 271px;
}

.column__ttl {
	width: 100%;
	margin: 0;
	overflow: hidden;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	color: #333;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.column__txt {
	display: -webkit-box;
	width: 100%;
	margin: 0;
	overflow: hidden;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #7c7c7c;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* pagination */
.swiper-option-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 190px;
	height: 10px;
	margin-bottom: 25px;
}

.section__wrapper--column .swiper-pagination {
	position: static;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: auto;
}

.section__wrapper--column .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0!important;
	background-color: #c5c5c5;
	opacity: 1;
}

.section__wrapper--column .swiper-pagination-bullet-active {
	background-color: #28bd93;
}

/* more btn: 320×60 / #333 / 20px */
.more__btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 320px;
	height: 60px;
	border-radius: 99999px;
	background-color: #333;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.column__slider.no-slide .swiper-wrapper {
	justify-content: center;
	gap: 30px;
	transform: none !important;
}

.column__slider.no-slide .column__item.swiper-slide {
	margin: 0;
}

.section__wrapper--column.is-few .swiper-option-wrap {
	display: none;
}

/* =========================================
   よくある質問
   Figma node: 15599:15945
   ========================================= */

.section__wrapper--faq {
	padding-bottom: 100px;
	background-color: #fff;
}

/* decoration: faq_before.webp / x634 y39 / 139×204 */
.section__inner--faq::before {
	content: "";
	position: absolute;
	top: -51px;
	left: calc(50% - 326px);
	z-index: -1;
	width: 139px;
	height: 204px;
	background: url(../images/faq_before.webp) no-repeat center / contain;
	pointer-events: none;
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* faq_item: border #c5c5c5 / radius10 / pt30 pb35 px40 / gap12 */
.faq__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding: 30px 40px 34px;
	border: 1px solid #c5c5c5;
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
}

.faq__q,
.faq__a {
	display: flex;
	gap: 12px;
}

.faq__q {
	align-items: center;
}

.faq__a {
	align-items: flex-start;
}

/* Q/A label: 38×38 / radius27 / 24px */
.faq__label {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	text-box: trim-both cap alphabetic;
}

.faq__label--q {
	background-color: #28bd93;
}

.faq__label--a {
	background-color: #e89e16;
}

.faq__q-txt {
	width: 480px;
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	color: #333;
}

.faq__a-txt {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
}