@charset "utf-8";

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

ul.slickSlider li figure > img {
    height: auto;
    max-height: 378px;
    object-fit: cover;
}

#index p.caption{
    text-align:center;
}

#index .line{
    margin: 20px 0;
    font-size: 0;
    line-height: inherit;
    text-align: center;
}

#event {
    padding: 0 0 60px;
}

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

	h2.title .en-eg {
		font-size: 3.6rem;
	}
		
}

/* =================================
   ■ メインビジュアル
================================== */

#index #mainvisual{
    position: relative;
}
#index #mainvisual div .mv__inner{
    position: relative;
}
#index #mainvisual div .mv{
    width: 100%;
    height: 100vh;
    position: relative;
}

    #index #mainvisual div .mv > video.visual{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* iOS Safari のネイティブ▶オーバーレイを非表示（自動再生失敗時の見た目対策） */
    #index #mainvisual div .mv > video.visual::-webkit-media-controls-start-playback-button {
        display: none !important;
        -webkit-appearance: none;
    }
    #index #mainvisual div .mv > video.visual::-webkit-media-controls {
        display: none !important;
    }
    #index #mainvisual div .mv:after{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.1);
        content: "";
    }

#index #mainvisual div .mv__text{
    position: absolute;
    bottom: 100px;
    left: 4.35103244838%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    #index #mainvisual div .mv__text .en{
        display: block;
        width: 516px;
    }

    #index #mainvisual div .mv__text .jp{
        font-size: 3.2rem;
        color: #fff;
        letter-spacing: 1.0rem;
        margin-top: 20px;
    }

/* 追従CVボタン（PC：最初から表示） */
#index #mainvisual div .mv__cv{
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 75;
}

    #index #mainvisual div .mv__cv ul{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        background-color: #A38D75;
        gap: 0;
    }

    #index #mainvisual div .mv__cv ul li{
        position: relative;
        width: 172.5px;
        height: auto;
    }

    #index #mainvisual div .mv__cv ul li:nth-child(n+2):before{
        position: absolute;
        content: "";
        background: url("../../images/common/icon/cvLine.svg");
        width: 1px;
        height: 33px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    #index #mainvisual div .mv__cv ul li > a{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: auto;
        padding: 20px 0 14px;
        box-sizing: border-box;
        color: #fff;
        line-height: 1.2;
    }

    #index #mainvisual div .mv__cv ul li > a:hover{
        opacity: 0.75;
        transition: 0.3s;
    }

/* FVのCVボタンを最初から表示するため、スクロールで出てくるフッターの追従CVボタンはPCでは非表示（SPは表示のまま）
   ※ jQueryのfadeIn()がインラインstyleでdisplayを上書きしてくるため、!importantで打ち消す */
@media only screen and
    (min-width: 768px) {
    #index footer ul.btnCV{
        display: none !important;
    }
}

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


    #index #mainvisual div .mv{
        width: 100%;
        height: 50vh;
        min-height: 400px;
        position: relative;
    }
        
    #index #mainvisual div .mv__text{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;


        position: absolute;
        top: 50%;
        bottom: inherit;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);

        width: 90%;
    }

    #index #mainvisual div .mv__text .en {
        max-width: 100%;
    }
    #index #mainvisual div .mv__text .jp{
		font-size:2.2rem;
		letter-spacing: 0.65rem;
        text-align: center;
    }

    /* FVのCVボタン（SP：連結バーではなく独立した2つのボタンにする） */
    #index #mainvisual div .mv__cv{
        position: static;
        right: auto;
        bottom: auto;
        padding: 4px 4% 0;
        box-sizing: border-box;
    }

    #index #mainvisual div .mv__cv ul{
        justify-content: space-between;
        gap: 10px;
        background-color: transparent;
    }

    #index #mainvisual div .mv__cv ul li{
        width: calc(50% - 5px);
        background-color: #A38D75;
        border-radius: 4px;
        overflow: hidden;
    }

    #index #mainvisual div .mv__cv ul li:nth-child(n+2):before{
        content: none;
    }

    #index #mainvisual div .mv__cv ul li > a{
        width: 100%;
        height: auto;
        padding: 18px 0;
        font-size: 1.4rem;
        gap: 8px;
    }
}

/* --------------------------------
■scroll
-------------------------------- */ 

.lp-scroll{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: .01s;
}

    .lp-scroll > p{
        display: flex;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0.1em;
		color: #fff;
    }

    .lp-scroll > span{
        position: relative;
        display: flex;
        width: 10px;
        height: 50px;
        overflow: hidden;
    }
    .lp-scroll > span:before{
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: 50px;
        background-color: #fff;
        content: "";
        animation: pathmove 1.4s ease-in-out infinite;
    }

    @keyframes pathmove{
        0%{
            height:0;
            top:0;
            opacity: 0;
        }
        30%{
            height:50px;
            opacity: 1;
        }
        100%{
            height:0;
            top:100px;
            opacity: 0;
        }
    }


@media only screen and
    (max-width : 767px) {
        
    .lp-scroll > p{
        font-size: 1.3rem;
    }
}


/* =================================
■ concept
================================== */

#index #concept.wide{
	position: relative;
}

#index #concept.wide div.container{
	width: 100%;
	height: auto;
	padding: 166px 20px 96px;
	/*background: url("../../images/index/kuriya04.png") center center;
	background-size: cover;*/
	position: relative;
	z-index: 20;
}

#index #concept .container h2 {
	text-align: center;
}

#index #concept .container h2 .concept{
	display: block;
	width: 53.6784660767%;
	min-width: 300px;
	height: auto;
	margin: 0 auto 30px;
}

	#index #concept .container h2 .jp{
		font-size: 40px;
		line-height: 1.8;
		font-weight: 400;
		letter-spacing: 0.1em;
	}

#index #concept p.caption{
	font-size: 18px;
	line-height: 2.8;
}

#index #concept .concept_bgwrapper{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
	#index #concept .concept_bgwrapper img {
		display: block;
		position: absolute;
		/*opacity: 0;
		transform: rotateY(90deg);*/
	}

	#index #concept .concept_bgwrapper .mes_pic1 {
	top: 58px;
	left: calc(56 / 1356 * 100%);
	width: calc(207 / 1356 * 100%);
	}

	#index #concept .concept_bgwrapper .mes_pic2 {
	top: 469px;
	left: calc(247 / 1356 * 100%);
	width: calc(117 / 1356 * 100%);
	}

	#index #concept .concept_bgwrapper .mes_pic4 {
	top: 170px;
	right: calc(-58 / 1356 * 100%);
	width: calc(188 / 1356 * 100%);
	}

	#index #concept .concept_bgwrapper .mes_pic3 {
	top: 330px;
	right: calc(213 / 1356 * 100%);
	width: calc(146 / 1356 * 100%);
	}

	#index #concept .concept_bgwrapper .mes_fig1 {
	top: 316px;
	left: calc(-22 / 1356 * 100%);
	width: calc(138 / 1356 * 100%);
	}

	#index #concept .concept_bgwrapper .mes_fig3 {
	top: 70px;
	right: calc(223 / 1356 * 100%);
	width: calc(74 / 1356 * 100%);
	}

	#index #concept .concept_bgwrapper .mes_fig2 {
	top: 500px;
	right: calc(120 / 1356 * 100%);
	width: calc(90 / 1356 * 100%);
	}


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

    #index #concept.wide div.container{
		background: url("../../images/index/kuriya04-sp.png") bottom center no-repeat;
		background-size: contain;
        padding: 54px 0 440px;
		width:auto;
    }
		
	#index #concept p.caption{
		font-size: 18px;
		line-height: 2.4;
	}

	#index #concept .concept_bgwrapper{
		display: none;
	}
}

/* =================================
   ■ gallery
================================== */

#gallery{
	background:#F2F2E7;
	margin: 20px 0;
	padding: 153px 0;
	position: relative;
	z-index: 0;
}
	#gallery:before{
		position: absolute;
		content: "";
		width: 100%;
		height: 150px;
		background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
		top: 0;
		left: 0;
		z-index: 5;
	}
	#gallery:after{
		position: absolute;
		content: "";
		width: 100%;
		height: 150px;
		background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
		bottom: 0;
		left: 0;
		z-index: 5;
		visibility: visible;
	}

#gallery .gallery__title{
	font-size: 24px;
	text-align: center;
	margin: 41px 0 26px;
}

#gallery .gallery__title span{
	position: relative;
}

	#gallery .gallery__title span:before{
		position: absolute;
		content: "";
		width: 53px;
		height: 1px;
		border-bottom: 1px solid #574D43;
		top: calc(50% - 2px);
		left: -75px;
	}

	#gallery .gallery__title span:after{
		position: absolute;
		content: "";
		width: 53px;
		height: 1px;
		border-bottom: 1px solid #574D43;
		top: calc(50% - 2px);
		right: -75px;
	}

	#gallery .gallery__list figure{
		margin: 0;
		padding: 0;
	}
	#gallery .gallery__list figure figcaption{
		padding-top: 16px;
	}
	#gallery .gallery__list figure figcaption .tagStyle{
		background-color: #fff;
	}
	#gallery #reform{
		margin-top: 60px;
	}

#gallery #newconstruction ul.slickSlider li.gallery__items figure.items--content{
	position: relative;
	margin: 0;
}

#gallery #newconstruction ul.slickSlider li.gallery__items figure.items--content::before{
	content: "";
	display: block;
	padding-top: 100%;
}

#gallery #newconstruction ul.slickSlider li.gallery__items a{
	display: block;
	color: inherit;
	text-decoration: none;
}

#gallery #newconstruction ul.slickSlider li.gallery__items figure.items--content img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

#gallery #newconstruction ul.slickSlider li.gallery__items figure.items--content figcaption{
	position: relative;
	padding-top: 16px;
}

#gallery #newconstruction ul.slickSlider li.gallery__items figure.items--content figcaption .title{
	margin: 0;
	text-align: left;
}

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

		#gallery{
			margin: 0;
			padding: 110px 0;
		}
			#gallery:before{
				height: 110px;
			}
			#gallery:after{
				height: 110px;
			}
		
		#gallery .gallery__title{
			font-size: 2rem;
			line-height: 1.5;
		}
		
			#gallery .gallery__list figure figcaption .title{
				font-size: 1.5rem;
			}
	}


/* =================================
   ■ event
================================== */

#event {

	position: relative;
	z-index: 10;
}
#event .container{
	display: flex;
}
#event .container .caption{
	width: 283px;
	margin-right: 32px;
}
#event .container .txt{
	text-align: center;
}
#event .container .eventslider{
	width: calc(100% - 315px);
}
#event .container .eventslider ul{
	display: flex;
	justify-content: space-between;
}
#event .container .eventslider ul li{
	width: 283px;
}
#event .container .eventslider ul li figure{
	margin: 0;
	padding: 0;
}
#event .container .eventslider ul li figure > img{
    width: 100%;
    height: auto;
}
#event .container .eventslider ul li figure figcaption{
	margin-top: 18px;
}
#event .container .eventslider ul li figure .schedule{
	font-size: 1.3rem;
	padding-left: 28px;
	background: url(../../images/index/icon_clock.svg) 0 2px no-repeat;

}

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

		#event{
			margin-bottom: 80px;
    		padding-bottom: 30px;
		}
		#event .container .txt{
			margin-bottom: 28px;
		}
		#event .container .eventslider ul li figure{
			display: block;
			margin: 0 auto;
			max-width: 283px;
		}
		#event .container .eventslider ul li figure figcaption .title{
			font-size: 1.5rem;
			margin-bottom: 8px;
		}
	
}

/* eventlist
--------------------------------*/
#index section#event .eventlist{
	width:1000px;
	margin:45px auto 0;
	position: relative;
	overflow: hidden;
}

	
#index section#event ul.event_list li{
	width:235px;
	float:left;
	margin-right:20px;
}

#index section#event ul.event_list li dl dt{
	margin-bottom:10px;
}

#index section#event ul.event_list li dl dt img{
	width: 100%;
}

#index section#event ul.event_list li dl dd{
	padding:0 2px;
	text-align:left;

}

	#index section#event ul.event_list li dl dd p{
		text-align:left;
		line-height:1.3;
		margin:0;
		font-size:92%;
	}

	#index section#event ul.event_list li dl dd p.category{
		display:inline-block;
		color:#fff;
		min-width:70px;
		text-align:center;
		margin-bottom:8px;
		padding:3px 5px;
		line-height:1.2;
		font-size:84%;
	}

	#index section#event ul.event_list li dl dd p.observation{
		background:#659acf;
	}
	
	#index section#event ul.event_list li dl dd p.culture{
		background:#9ccf65;
	}

	#index section#event ul.event_list li dl dd p.event{
		background:#cfb065;
	}

	#index section#event ul.event_list li dl dd p.news{
		background:#979797;
	}
	
	#index section#event ul.event_list li dl dd p.name{
		font-weight:700;
		font-size:110%;
		margin-bottom:10px;
	}
	
	#index section#event ul.event_list li dl dd p.day{
		margin-bottom:10px;
	}

	#index section#event ul.event_list li dl dd p.legend{
		line-height: 1.5;
		letter-spacing: 1px;
	}




#index section#event ul.event_list li:last-child{
	margin-right:0;
}

#index section#event ul.event_list li dl a{
	color:#333;
}

#index section#event p.eventBtn {
	text-align: center;
	margin-top: 35px;
}


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

    #index section#event .container{
        margin: 70px auto 30px;
    }

    #index section#event .container .caption{
        width: 100%;
        margin: 0 auto;
    }

    #index section#event .container .caption p.buttonStyle{
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
    }
		
	#event .container {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
		
	#event .container .eventslider{
		width: 100%;
	}
		
	#event .container .eventslider ul {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding: 0 2%;
	}
		
		#event .container .eventslider ul li {
			width: 100%;
			margin-bottom: 28px;
		}
}


/* =================================
   ■ box--ab
================================== */

#index section#customhouse,
#index section#renovation{
	padding-right: calc((100% - 1226px) / 2);
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	position: relative;
	margin-bottom: 60px;
}

#index section#renovation{
	padding-right: 0;
	padding-left: calc((100% - 1226px) / 2);
	flex-direction: row;
}
#index section#customhouse .box--ab,
#index section#renovation .box--ab{
	width: 490px;
	z-index: 25;
	margin-left: -73px;
	display: flex;
	align-items: center;
}
#index section#renovation .box--ab{
	margin-left: 0;
	margin-right: -73px;
}
#index section#customhouse .box--ab .wrap,
#index section#renovation .box--ab .wrap{
	background: #F6EAD6;
	width: 100%;
	padding: 100px 0;
}
#index section#renovation .box--ab .wrap{
	background: #EAE8DD;
}

#index section#customhouse .image__box,
	#index section#renovation .image__box{
	width: calc(100% - 420px);
	z-index: 0;
}
#index section#customhouse .image__box p,
	#index section#renovation .image__box p{
	margin: 0;
}
#index section#customhouse .image__box img,
	#index section#renovation .image__box img{
	width: 100%;
}

/*
#index section#customhouse .container,
#index section#renovation .container{
	position: relative;
	margin: 40px auto; 
}

#index section .container .box--ab{
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 490px;
	height: 490px;
	box-sizing: border-box;
	z-index: 2;
	top: 60px;
}

#index section#customhouse .container .box--ab{
	right: 0px;
	background: #F6EAD6;
	background-size: cover;
}

#index section#renovation .container .box--ab{
	left: 0px;
	background: #EAE8DD;
	background-size: cover;
}


#index section#renovation .reverse.container .image__box > p{
	text-align: right;
}
*/


/* =================================
   ■ link
================================== */

#link .container{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	column-gap: 32px;
	border-top: 1px solid #E1E1E1;
	padding: 80px 0;
}

	#link .container li{
		width: 100%;
	}

	#link .container li figure{
		margin: 0;
		padding: 0;
	}

	#link .container li img{
		width: 100%;
		object-fit: cover;
	}

	#link figcaption{
		font-size: 1.6rem;
		margin-top: 8px;
		line-height: 1.5;
	}
	#link figcaption span{
		font-size: 2.8rem;
		display: block;
		letter-spacing: 0.05em;
		font-weight: 400;
	}


/* =================================
   ■ box
================================== */

#index section#modelhouse .container,
#index section#realestate .container{
	max-width: 1228px; 
	position: relative;
	margin: 20px auto;
	box-sizing: border-box;
}

#index section .container .box{
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 493px;
	height: 493px;
	box-sizing: border-box;
	z-index: 2;
	top: 0px;
}

#index section#modelhouse .container .box{
	left: 0;
	background: url("../../images/index/kuriya18.png") no-repeat;
	background-size: 100% 100%;
}

#index section#realestate .container .box{
	right: 0;
	background: url("../../images/index/kuriya19.png") no-repeat;
	background-size: 100% 100%;
}

#index section#modelhouse .container .image__box > p,
#index section#realestate .container .image__box > p{
	width: 100%;
	margin: 0;
}

#index section#modelhouse .reverse.container .image__box > p{
	text-align: right;
}

#index section#modelhouse .container .image__box video{
	max-width: 100%;
	height: auto;
	aspect-ratio: 735 / 493;
	object-fit: cover;
	vertical-align: top;
}

/* =================================
   ■ staffblog
================================== */

#staffblog{
	padding: 80px 0;
}
#staffblog .container{
	position: relative;
}
#staffblog h2.title {
	text-align: left;
}
#staffblog .blogList figure{
	margin: 0;
	padding: 0;
}

#staffblog .blogList figcaption {
	padding: 20px 0 0;
}

#staffblog .blogList .title{
	font-size: 1.6rem;
}
#staffblog .blogList .staff{
	font-size: 1.3rem;
	display: flex;
	align-items: center;
}
#staffblog .blogList .staff img{
	display: block;
	margin-right: 8px;
    max-width: 32px;
    height: auto;
    border-radius: 100%;
}
#staffblog .blogList .staff .name:after{
	content: "|";
	padding: 0 10px;
	color: #D5D2D0;
}
#staffblog p.buttonStyle{
	position: absolute;
	top: 0;
	right: 0;
}


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


		
	/* =================================
	   ■ box--ab
	================================== */
		
	#index section#customhouse, 
	#index section#renovation {
		padding-right: 0;
		display: flex;
		justify-content: flex-start;
		flex-direction: column-reverse;
		align-items: center;
		position: relative;
		margin-bottom: 0;
	}
		#index section#renovation{
			margin-bottom: 60px;
			margin-top: 60px;
		}

	#index section#customhouse .container,
	#index section#renovation .container{
		position: relative;
		margin: 40px auto; 
	}

	#index section .container .box--ab{
		display: block;
		width: 100%;
		height: auto;
		padding: 40px 0;
	}
		
	#index section#renovation .box--ab {
		margin-left: 0;
		margin-right: 0;
	}

	#index section#customhouse .box--ab, 
	#index section#renovation .box--ab {
		width: 90%;
		z-index: 5;
		margin-left: 0;
		margin-top: -28px;
	}
		
	#index section#customhouse .image__box, 
	#index section#renovation .image__box{
		display: block;
		width: 100%;
		z-index: 0;
	}
		
	#index section#customhouse .box--ab .wrap, 
	#index section#renovation .box--ab .wrap {
		padding: 50px 0;
	}

	#index section#customhouse .box--ab .wrap h2.title .en-eg, 
	#index section#renovation .box--ab .wrap h2.title .en-eg {
		font-size: 2.8rem;
	}
		
	/* =================================
	   ■ link
	================================== */

	#index section#link .container{
		row-gap: 32px;
		column-gap: 0;
		padding: 60px 0;
		flex-wrap: wrap;
	}

		#index section#link .container li{
			width: 46%;
			height: auto;
			text-align: center;
		}

		#link figcaption {
			font-size: 1.4rem;
			margin-top: 8px;
			text-align: left;
		}

	/* =================================
	   ■ box
	================================== */

	#index section.sideImageBox + section.sideImageBox{
		margin-top: 24px;
	}		
		
	#index section#modelhouse .container,
	#index section#realestate .container{
		max-width: inherit;
		margin: 0 auto;
		display: flex;
		flex-direction: column-reverse;
	}
		


	#index section .container .box{
		position: static;
		width: 100%;
		height: auto;
		padding: 40px 0;
	}
		
	p.buttonStyle a {
		display: inline-block;
		padding: 18px 60px 15px;
		box-sizing: border-box;
	}
		
	#staffblog .container{
		padding-bottom: 68px;
	}
	
	#staffblog p.buttonStyle {
		width: 242px;
		top: inherit;
		right: inherit;
		bottom: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}



	
}