@charset "utf-8";

.localnav__item:nth-of-type(3):first-of-type {
	border: solid 1px #8c8573 !important;
}

.localnav__item:nth-of-type(3) .localnav__link {
	background: #8c8573;
	color: #fff;
}

/*----------------

    lower_ttl_block

----------------*/
.lower_ttl_block {
	width: 100%;
	height: 90vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}

.lower_ttl_block .h2_ttl {
	line-height: 0.6;
	font-size: 96px;
}

.lower_ttl_box {
	text-align: left;
	color: #fff;
}

.lower_ttl_box span {
	font-size: 36px;
	margin-left: 15px;
	font-family: 'A-OTF A1 Mincho Std Bold', serif;
}

.lower_ttl_block::after {
	content: "image";
	font-family: "Hiragino Kaku Gothic ProN", sans-serif;
	position: absolute;
	bottom: 30px;
	right: 75px;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	z-index: 1;
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	.lower_ttl_block {
		height: 367px;
	}

	.lower_ttl_box span {
		font-size: 28px;
		margin-left: 0px;
		margin-top: 30px;
	}

	.lower_ttl_box {
		text-align: center;
		/* 箱の中でh2を真ん中に */
	}

	.lower_ttl_box .h2_ttl {
		width: 100%;
		margin: 0 auto;
		max-width: 400px;
		line-height: 1.0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-top: 1px solid #231815;
		border-bottom: 1px solid #231815;
		height: 269px;
		box-sizing: border-box;
		font-size: 71px;
	}

	#holiday_block .lower_ttl_box .h2_ttl,
	#education_block .lower_ttl_box .h2_ttl,
	#car_block .lower_ttl_box .h2_ttl {
		border-top: 0.5px solid #fff;
		border-bottom: 0.5px solid #fff;
	}

	.lower_ttl_block::after {
		bottom: 10px;
		right: 25px;
		font-size: 11px;

	}
}


/*----------------

    distance

----------------*/
.distance {
	font-size: 14px;
}

.distance_tiny {
	font-size: 10px;
	margin-left: -7px;
}

@media screen and (max-width: 768px) {
	.distance {
		font-size: 12px;
	}

}

/*----------------

    img_txt

----------------*/

.img_txt {
	position: relative;
	line-height: 0;
	width: 100%;
	display: block;
}



.img_txt img {
	width: 100%;
	height: auto;
	display: block;
}

.img_txt::after {
	content: "image";
	font-family: "Hiragino Kaku Gothic ProN", sans-serif;
	position: absolute;
	bottom: 30px;
	right: 75px;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	z-index: 1;
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	.img_txt::after {
		bottom: 20px;
		right: 25px;
		font-size: 11px;
	}

}


/*----------------

    lower_txt

----------------*/

.lower_txt {
	width: 100%;
	text-align: left;
	margin-top: 35px;
}

.lower_txt .h5_style {
	font-size: 33px;
	/*font-weight: 600;*/
	font-weight: 500;
}

.lower_txt .intro_txt {
	font-size: 19px;
	font-family: "Hiragino Kaku Gothic ProN W3", sans-serif;
	margin-top: 15px;
	/*font-weight: 500;*/
}

@media screen and (max-width: 768px) {
	.lower_txt {
		margin-top: 30px;
	}

	.lower_txt .h5_style {
		font-size: 28px;
		line-height: 1.6;
	}

	.lower_txt .intro_txt {
		font-size: 15px;
		margin-top: 15px;
		text-align: justify;
	}
}

/*----------------

    mv_block

----------------*/

/* --- iPad / タブレット横（1024px） --- */
@media screen and (max-width: 1024px) {
}

/* --- iPad 縦 / タブレット（768px） --- */
@media screen and (max-width: 768px) {
	#mv_block .bg_movie video,
	#mv_block .bg_movie video-js{
		animation: moveRight 10s linear infinite;
		/*top: -20%;*/
		object-position: 35% bottom;
	}
}

/* --- スマホ（320px〜480px） --- */
@media screen and (max-width: 480px) {
}


/*----------------

   intro_block

----------------*/
#intro_block .ttl_box {
	width: 100%;
	background-image: url(../img/lifestyle/intro_bg_01.jpg);
	background-size: cover;
	background-position: center;
	aspect-ratio: 1420 / 1429;
	padding-top: 120px;
	text-align: center;
	position: relative;
}

#intro_block .ttl_box::after {
	content: "image";
	font-family: "Hiragino Kaku Gothic ProN", sans-serif;
	position: absolute;
	bottom: 30px;
	right: 75px;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	z-index: 1;
	pointer-events: none;
}

#intro_block .ttl_box h5 {
	font-size: 38px;
	/*font-weight: 600;*/
	font-weight: 400;
	line-height: 1.6;
}

#intro_block .ttl_box h2 {
	font-size: 110px;
	margin-top: 65px;
}

#intro_block .ttl_box .intro_txt {
	margin-top: 50px;
	/*font-weight: 500;*/
	font-family: "Hiragino Kaku Gothic ProN W3", sans-serif;
	font-size: 18px;
	font-weight: 400;
}

#intro_block .vertical_box {
	width: 100%;
	position: relative;
	aspect-ratio: 1420 / 960;
	display: flex;
	justify-content: center;
	align-items: center;
}

#intro_block .vertical_box p {
	position: relative;
	top: -80px;
	z-index: 1;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 35px;
	font-weight: 500;
	line-height: 2.5;
	letter-spacing: 0.3em;
	color: #fff;
	text-align: start;
	height: fit-content;
	margin: 0 auto;
}


#intro_block .vertical_box::before {
	content: "";
	position: absolute;
	background-image: url(../img/lifestyle/intro_bg_02.jpg);
	background-size: cover;
	background-position: center;
	width: 50%;
	height: 100%;
	left: 0;
}

#intro_block .vertical_box::after {
	content: "";
	position: absolute;
	background-image: url(../img/lifestyle/intro_bg_03.jpg);
	background-size: cover;
	background-position: center;
	width: 50%;
	height: 100%;
	right: 0;
}

#intro_block .image_labels {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* 画像より上にくるように */
	pointer-events: none;
}

/* 左側の画像の文字 (intro_bg_02用) */
#intro_block .image_labels::before {
	content: "image";
	font-family: "Hiragino Kaku Gothic ProN", sans-serif;
	position: absolute;
	bottom: 30px;
	left: calc(50% - 30px);
	transform: translateX(-100%);
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	z-index: 1;
	pointer-events: none;
}

/* 右側の画像の文字 (intro_bg_03用) */
#intro_block .image_labels::after {
	content: "image";
	font-family: "Hiragino Kaku Gothic ProN", sans-serif;
	position: absolute;
	bottom: 30px;
	right: 75px;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	z-index: 1;
	pointer-events: none;
}

@media screen and (max-width: 1024px) {
	#intro_block .vertical_box p {
		top: -30px;
	}
}

@media screen and (max-width: 768px) {
	#intro_block .ttl_box h2 {
		font-size: 60px;
		padding: 0 20px;
		line-height: 1;
	}

	#intro_block .ttl_box h5 {
		font-size: 28px;
		padding: 0 20px;
		writing-mode: vertical-rl;
		position: relative;
		top: 0px;
		z-index: 1;
		text-orientation: mixed;
		letter-spacing: 0.1em;
		text-align: start;
		height: fit-content;
		margin: 0 auto 40px;
	}

	#intro_block .vertical_box p {
		font-size: 28px;
		top: 0;
		margin: 0 auto;


	}

	#intro_block .ttl_box .intro_txt {
		width: 70%;
		max-width: 435px;
		margin: 15px auto 0;
		text-align: justify;
		font-size: 15px;
	}

	#intro_block .ttl_box {
		aspect-ratio: auto;
		padding: 60px 0 100px;
		/*background-position: right;*/
		background-image: url(../img/lifestyle/sp/intro_bg_01.jpg);
	}
	#intro_block .ttl_box::before{
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.4);
		
	}

	#intro_block .vertical_box {
		width: 100%;
		/* 幅は1421、高さは2枚分の3844 */
		aspect-ratio: 1421 / 3844;
	}


	#intro_block .vertical_box::before,
	#intro_block .vertical_box::after {
		width: 100%;
		height: 50%;
		/* 箱の半分の高さ（=画像1枚分の高さ） */
		background-size: cover;
		left: 0;
	}

	#intro_block .vertical_box::before {
		top: 0;
	}

	#intro_block .vertical_box::after {
		top: 50%;
	}

	#intro_block .ttl_box::after {
		bottom: 15px;
		left: 15px;
		right: auto;
		font-size: 11px;
	}

    #intro_block .image_labels::before {
        bottom: calc(50% + 15px); 
        left: 15px;               
        right: auto;
				font-size: 11px;              
        transform: none;          
    }

    /* 右（スマホでは下）の画像のラベル */
    #intro_block .image_labels::after {
        bottom: 15px; 
				font-size: 11px;            
        left: 15px;              
        right: auto;              
    }
}

/*----------------

    map_block

----------------*/
#map_block {
	padding: 100px 0 20px;
}

#map_block img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	#map_block {
		padding: 50px 0 20px;
	}

	#map_block img {
		width: 100%;
		/* 画面幅に合わせる */
		/*height: 400px;*/
		/* ★高さを固定する（好きな数値でOK） */

		/* 画像を変形させずに、指定した枠の真ん中を表示する */
		object-fit: cover;
		object-position: center;
	}
}



/*----------------

    pantry_block

----------------*/
#pantry_block {
	padding: 15px 0 90px;
	width: 90%;
	max-width: 1138px;
	margin: 0 auto;
}

#pantry_block .pantry_wrap {
	width: 100%;
	margin: 35px auto 0;
}

#pantry_block .lower_ttl_box {
	color: #231815;
}



#pantry_block .top_wrap {
	display: flex;
	gap: 36px;
	align-items: flex-start;
	/* 上揃えに */
}

#pantry_block .main_item {
	width: 67%;
	max-width: 748px;
	flex-shrink: 0;
	/* 幅を 60% で固定させる */
}

#pantry_block .main_item img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}


#pantry_block .sub_wrap {
	width: calc(35% - 36px);
	display: flex;
	gap: 23px;
	flex-direction: column;
	justify-content: flex-start;
}


#pantry_block .bottom_wrap {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 25px;

}


#pantry_block .bottom-item {
	width: calc((100% - 40px) / 3);
}


#pantry_block .item img {
	width: 100%;
	height: auto;
	display: block;
	/* 画像下の余白消し */
}


#pantry_block .sub-item img {
	width: 100%;
	max-width: 343px;
}

#pantry_block .txt {
	display: flex;
	align-items: flex-start;
	padding: 10px 0;
	text-align: left;

}

#pantry_block .txt p {
	font-size: 18px;
	font-family: "Hiragino Kaku Gothic ProN W3", sans-serif;
	line-height: 1.2;
	/*font-weight: 500;*/
}



#pantry_block .num img {
	width: 27px;
	height: 27px;
	object-fit: cover;
	/* 必要であれば。SVGなら無くても綺麗に出ることが多いです */
	vertical-align: bottom;
	margin-right: 15px;
	flex-shrink: 0;
}

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

	#pantry_block .top_wrap {
		flex-direction: column;
		gap: 30px;
	}

	#pantry_block .main_item {
		width: 100%;
		max-width: 100%;
	}

	#pantry_block .sub_wrap {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 20px;
	}


	#pantry_block .sub_wrap>div,
	#pantry_block .sub_wrap .sub-item {
		width: calc((100% - 40px) / 3);
	}

	#pantry_block .sub_wrap img {
		width: 100%;
		height: auto;
	}

	#pantry_block .num img {
		width: 27px;
		height: 27px;
	}
}

@media screen and (max-width: 768px) {
	#pantry_block {
		padding: 15px 0 60px;
	}

	#pantry_block .lower_ttl_box .h2_ttl {
		text-align: center;
	}

	#pantry_block .top_wrap {
		flex-direction: column;
		gap: 40px;
	}

	#pantry_block .main_item {
		max-width: none;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	#pantry_block .sub_wrap {
		flex-direction: column;
		gap: 10px;
	}

	#pantry_block .sub_wrap>div,
	#pantry_block .sub_wrap .sub-item {
		width: 100%;
	}

	#pantry_block .sub-item img {
		max-width: 100%;
	}

	#pantry_block .bottom_wrap {
		flex-wrap: wrap;
		margin-top: 10px;
		gap: 10px;
	}

	#pantry_block .bottom-item {
		width: 100%;
	}

}

/*----------------

    holiday_block

----------------*/
#holiday_block .lower_ttl_block {
	background-image: url(../img/lifestyle/holiday_mv.jpg);
}

/* 親要素：ここを基準にテキストを配置する */
#holiday_block .holiday_box {
	position: relative;
	width: 100%;
	margin-top: 45px;
}


#holiday_block .holiday_box .img_box {
	display: flex;
	gap: 2.6px;
	width: 100%;
}

#holiday_block .holiday_box .img_box img {
	width: calc(50% - 1.3px);
	height: auto;
	display: block;
	object-fit: cover;
}


#holiday_block .holiday_box .txt_box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.5);
	background: #fff;
	padding: 25px 0px 20px;
	border-radius: 15px;
	z-index: 2;
	width: 371px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#holiday_block .holiday_box .txt_box p {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 500;
	text-align: center;
}


.bottom_line_wrap {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	margin-top: 5px;
}

#holiday_block .holiday_box .txt_box .time {
	font-size: 74px;
	line-height: 1;
	margin: 0 4px;
	position: relative;
	display: inline-block;
}

#holiday_block .holiday_box .txt_box p .wide-spacing {
	font-size: 30px;
	letter-spacing: 0.2em;
}

#holiday_block .holiday_box .txt_box p .tiny {
	font-size: 24px;

}

@media screen and (max-width: 768px) {
	#holiday_block .lower_ttl_block {
		background-position: right -50px center;
	}

	#holiday_block .holiday_box {
		margin-top: 0px;
	}

	#holiday_block .holiday_wrap {
		margin-top: 35px;
	}

	#holiday_block .holiday_box .img_box {
		display: flex;
		flex-direction: column;
		gap: 0;
	}


	#holiday_block .holiday_box .img_box img {
		width: 100%;
		height: 330px;
		object-position: center;
	}

	#holiday_block .holiday_box .txt_box p {
		font-size: 26px;
	}

	#holiday_block .holiday_box .txt_box .time {
		font-size: 65px;
	}

	#holiday_block .holiday_box .txt_box p .wide-spacing {
		font-size: 26px;
	}

	#holiday_block .holiday_box .txt_box .distance {
		font-size: 11px;
	}

	#holiday_block .holiday_box .txt_box {
		width: 90%;
		max-width: 330px;
	}

	#holiday_block .holiday_box:nth-of-type(1) .txt_box {
		top: 45%;
	}

	#holiday_block .holiday_box:nth-of-type(2) .txt_box {
		top: 55%;
	}
}

/*----------------

    education_block

----------------*/
#education_block {
	margin-top: 100px;
}

#education_block .lower_ttl_block {
	background-image: url(../img/lifestyle/education_mv.jpg);
	background-position: right;
}

#education_block .education_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 40px 15px;
	margin-top: 50px;
}

#education_block .education_wrap li {
	width: calc((100% - 15px * 2) / 3);
	list-style: none;
	box-sizing: border-box;
}

#education_block .education_wrap li img {
	width: 100%;
	height: auto;
}

#education_block .education_wrap li p {
	text-align: left;
	margin-top: 10px;
	font-size: 18px;
	line-height: 1.2;
	/*font-weight: 500;*/
	font-family: "Hiragino Kaku Gothic ProN W3", sans-serif;
}

#education_block .education_wrap li p .tiny {
	font-size: 14px;
}

@media screen and (max-width: 768px) {
	#education_block {
		margin-top: 0px;
	}

	#education_block .education_wrap li {
		width: calc((100% - 15px * 1) / 1);
	}

	#education_block .education_wrap {
		gap: 20px;
		margin-top: 30px;
	}
}

/*----------------

    car_block

----------------*/
#car_block {
	margin-top: 100px;
}
#car_block .lower_ttl_block::after {
	content: "外観完成予想CG";
}
#car_block .lower_ttl_block {
	background-image: url(../img/lifestyle/car_mv.jpg);

}

#car_block .car_img_01 {
	width: 100%;
	max-width: 890px;
	margin: 100px auto;
}

#car_block .car_img_02 {
	width: 100%;
	max-width: 1232px;
	margin: 60px auto 0;
}

#car_block .topics_box {
	width: 100%;
	padding: 50px 0 50px;
	background-color: #ffffff;
}

#car_block .topics_wrap {
	width: 90%;
	max-width: 740px;
	margin: 0 auto;
}

#car_block .topics_wrap {
	justify-content: center;
	align-items: center;
	gap: 35px;
}

#car_block .topics_wrap .img_box {
	width: 20%;
	max-width: 121px;
}

#car_block .topics_wrap .img_box img {
	width: 100%;
}

#car_block .topics_wrap .txt_box {
	width: 80%;
	max-width: 582px;

}

#car_block .topics_wrap .h5_style {
	font-size: 31px;
	font-family: 'A-OTF A1 Mincho Std Bold', serif;
}
#car_block .topics_wrap .h5_style .distance_tiny{
	margin-left: 0;
}

#car_block .topics_wrap .intro_txt {
	font-size: 16px;
	margin-top: 0;
}
#car_block .topics_wrap .lower_txt .distance{
	font-family: "Noto Sans JP", sans-serif;
	margin: 15px auto 0;
}

@media screen and (max-width: 768px) {
	#car_block {
		margin-top: 60px;
	}

	#car_block .lower_ttl_block {
		background-position: right -70px center;
	}

	#car_block .car_img_01 {
		margin: 50px auto;
	}

	#car_block .topics_box {
		width: 100%;
		padding: 50px 0 50px;
		background-color: #ffffff;
	}

	#car_block .topics_wrap {
		gap: 0;
	}

	#car_block .topics_box {
		padding: 30px 0 40px;
	}

	#car_block .topics_wrap .img_box {
		width: 100%;
		max-width: none;
		justify-content: space-between;
	}

	#car_block .topics_wrap .img_box img {
		width: 25%;
		min-width: 103px;

	}

	#car_block .topics_wrap .h5_style {
		font-size: 27px;
		width: 60%;
		font-weight: 500;
		line-height: 1.6;
	}

	#car_block .topics_wrap .txt_box {
		width: 100%;
	}

	#car_block .car_img_02 p {
		text-align: right;
		margin: 5px 10px auto 0;
		font-family: "Hiragino Kaku Gothic ProN W3", sans-serif;

	}
}

/*----------------

    plan_block

----------------*/
#plan_block {
	padding: 18px 0 0;
}

#plan_block .h2_ttl {
	margin: 0 auto 69px;
}

#plan_block .plan_wrap .plan_box:nth-child(2) .txt_box .list {
	gap: 7px 22px;
}

#plan_block .plan_wrap .plan_box:nth-child(2) .txt_box .list li {
	width: calc((100% - 22px) / 2);
}

@media screen and (max-width: 768px) {
	#plan_block {
		padding: 68px 0 0;
	}

	#plan_block .h2_ttl {
		margin: 0 auto 35px;
	}
}

/*----------------

  content_block

----------------*/
#content_block {
	padding: 66px 0;
}

#content_block .h2_ttl {
	margin: 0 auto 85px;
}
#content_block .content_list{
	margin: 35px 0 0;
}

@media screen and (max-width: 768px) {
	#content_block {
		padding: 67px 0;
	}

	#content_block .h2_ttl {
		margin: 0 auto 30px;
	}
}