@charset "utf-8";

/* トップスライダー（slider-pro）
------------------------------*/
.sp-image  {
  height: auto;
  width: 100%!important;
	margin-top: 0!important
}

.sp-slide {
    opacity: 0.2;
}

.sp-slide.sp-selected {
    opacity: 1;
}

.slider-pro img.sp-image, .slider-pro img.sp-thumbnail {
    cursor: auto;
}

#Topslider {
    margin-bottom: 80px;
}

#Topslider img {
    width: 100%;
}

/* ループスライダー（slick slider）
------------------------------*/
.loopslider01 div,.loopslider02 div {
}

.loopslider01 img,.loopslider02 img {
	width:100%;
	padding: 10px;
}


/* スペシャルコンテンツ（slick slider）
------------------------------*/
.specialSlider img,.loopslider02 img {
	width:100%;
	padding: 10px;
}

.specialSlider img {
	border-radius: 20px;
}

.specialBnr {
	width: 90%;
	max-width: 966px;
	text-align: center;
	margin: 100px auto ;
}

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


.mainTextArea h2,.mainTextArea h2 span {
	font-size: 50px;
	text-align: center;
	letter-spacing: 5px;
}

.mainTextArea h2 span.textBig {
	font-size: 48px;
}

.mainTextArea h2.borderBottom {
    border-bottom: 3px solid #93875b;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 20px;
	position: relative;
}

.mainTextArea h2.borderBottom span.textColor.textBig {
    padding-left: 3.6em;
}

.mainTextArea h2.borderBottom span.bgColor06.textBig {
    background: #93875b;
    padding: 2px 20px;
    color: #fff;
    font-size: 34px !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-57%);
	text-indent: 10px;
}

.mainTextArea h2.mb {
	margin-bottom: 80px;
}

.features {
	background: #3e3a39;
	margin-bottom: 100px;
	height: 162px;
}

.features ul {
	width: 90%;
	max-width:1160px;
	margin: 0 auto;
	justify-content: center;
}

.features ul li {
	background: #b3ab8c;
	height: 162px;
	width: 32%;
	margin: 0 0.6%;
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	position: relative;
}

.features ul li:before {
	content: "";
	border-left: 1px solid #fff;
	width: 1px;
	height: 20px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.features ul li .textSmall {
	font-size: 15px;
	color: #fff;
	margin-bottom: 10px;
}

.features ul li .text {
	font-size: 26px;
    color: #fff;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
}

.moreText {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 260px;
	width: 50%;
	margin: 0 0 80px auto;
	border-left: 1px solid #595757;
}

.moreText p {
	margin-left: 30px;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 3px;
}

main h3 {
	text-align: center;
	color: #3e3a39;
	position: relative;
	margin-bottom: 100px;
}

main h3:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background:#595757;
	top:50%;
	left: 0;
	transform: translateY(-50%);
	z-index: -1;
}

main h3 .bgWhite {
	display: inline-block;
	font-size:43px;
	background: #fff;
	letter-spacing: 8px;
	padding: 0 150px;
}

main h3 .bgWhite .textSmall {
	font-size: 16px;
	vertical-align: middle;
	position: relative;
	padding: 0 20px;
	margin-left: 15px;
}

main h3 .bgWhite .textSmall:before,main h3 .bgWhite .textSmall:after {
	content:"";
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width: 15px;
	height: 1px;
	background:#3e3a39;
}

main h3 .bgWhite .textSmall:before {
	left:0;
}

main h3 .bgWhite .textSmall:after {
	right:0;
}

.title .bgColor04{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 30px 15px 50px;
}

.title .bgColor04 .posi {
    position: relative;
	width: 40%;
}

.title .bgColor04 h4 {
    font-size: 75px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 3px;
    line-height: 1.1;
}

.title .bgColor04 .abso {
    position: absolute;
	font-size: 14px;
	color:#fff;
	letter-spacing: 3px;
}

.title .bgColor04 p.yumin {
	font-size: 23px;
	color: #fff;
	letter-spacing: 5px;
	margin-bottom: 25px;
}

.title .bgColor04 p.moreLink a {
	width: 90px;
}

.conceptArea {
    border-top: 20px solid #2b3233;
}

.conceptArea .title {
	margin-bottom: 60px;
}

.conceptArea .title .bgColor04 .abso {
	bottom:34px;
	left:310px;
}

.conceptArea .mapimage {
	margin-bottom: 200px;
}

.landArea {
	position: relative;
	z-index: 2;
	margin-bottom: 100px;
}

.landArea:before {
    content: "";
    position: absolute;
    top: -250px;
    width: 80%;
    max-width: 1700px;
    height: 420px;
    background: url(../-image/top/concept_bg.svg) no-repeat 0 0;
    background-size: 100%;
    z-index: -1;
}

.landArea .landimage {
    position: absolute;
    right: 0;
    top: 0;
    width: 54%;
	text-align: right;
	height: 650px;
	background: url("../-image/top/landscape.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.landArea .textBox {
    width: 38%;
}

.landArea .title .bgColor04 .posi {
    width: 100%;
}

.landArea .title .bgColor04 .abso {
    bottom: 18%;
    left: 16rem;
}

.landArea .title .bgColor04 {
    padding: 30px 30px 170px 50px;
	padding: 30px 30px 109px 50px;
}

.landArea .title .bgColor04 h4 {
    margin-bottom: 80px;
}

.landArea .title .bgColor04 p.yumin {
    margin-bottom: 120px;
}

.kurumuArea {
    position: relative;
	margin-bottom: 100px;
	background: #dedcda;
}

.kurumuArea .title .bgColor04 {
	height: 650px;
}

.kurumuArea .title .bgColor04 .posi {
    margin: 0 0 0 auto;
	width: 100%;
}

.kurumuArea .title .bgColor04 .abso {
    bottom: 18%;
    right: 11rem;
}

.kurumuArea .textBox {
    width: 38%;
	margin: 0 0 0 auto;
}

.kurumuArea .kurumuimage {
    position: absolute;
    left: 0;
    top: 0;
    width: 54%;
	height: 650px;
	background: url("../-image/top/kurumu.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.kurumuArea .title .bgColor04 h4 {
    margin-bottom: 80px;
    margin-top: 60px;
}

.kurumuArea .title .bgColor04 p.yumin {
    margin-bottom: 120px;
}

.modelArea .title .bgColor04 .abso {
    bottom: 20%;
    right: 6rem;
}

.loopslider01 {
    padding: 45px 0 0 0;
}

.loopslider02 {
    padding: 0 0 45px 0;
	margin-bottom: 100px;
}

.locationArea {
	position: relative;
	z-index: 2;
	margin-bottom: 50px;
}

.locationArea .locationimage {
    position: absolute;
    right: 0;
    top: 0;
    width: 54%;
	text-align: right;
	height: 650px;
	background: url("../-image/top/location.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.locationArea .textBox {
    width: 38%;
}

.locationArea .title .bgColor04 .posi {
    width: 100%;
}

.locationArea .title .bgColor04 .abso {
    bottom: -20px;
    left: 0;
}

.locationArea .title .bgColor04 {
    padding: 30px 30px 170px 50px;
	height: 650px;
}

.locationArea .title .bgColor04 h4 {
	margin-top: 140px;
    margin-bottom: 80px;
}

.locationArea .title .bgColor04 p.yumin {
    margin-bottom: 120px;
}

.locationArea .title .bgColor04 p.yumin .textBig {
    font-size: 240%;
    vertical-align: middle;
    line-height: 1;
}

.modelPlan {
	margin-bottom: 60px;
}

.modelPlan .bgWhite {
	width: 94%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 50px 0;
}

.modelPlan .bgWhite h4 {
	margin:0 auto  25px;
	text-align: center;
	font-size: 75px;
	line-height: 1;
}

.modelPlan .bgWhite .yumin {
	text-align: center;
	font-size: 16px;
	margin-bottom: 50px;
	letter-spacing: 3px;
}

.modelPlan .bgWhite .border {
	border:1px solid #231815;
	padding: 10px;
	max-width: 770px;
	width: 92%;
	margin: 0 auto;
}

.modelPlan .bgWhite .modelhouseBnr {
	margin-bottom: 30px;
}

.modelPlan .bgWhite .otherBtn {
	margin: 0 auto 25px;
	max-width: 300px;
	border: 3px solid #231815;
	text-align: center;
}

.modelPlan .bgWhite .otherBtn a {
	display: block;
	padding: 10px 0;
	position: relative;
	text-align: center;
	font-weight: 600;
	font-size: 12px;
}

.modelPlan .bgWhite .otherBtn a:after {
	content:"";
	position: absolute;
	background: url("../-image/top/modelhouse_arrow.svg") no-repeat 50% 50%;
	width: 7px;
	height: 12px;
	background-size: 100%;
	top:50%;
	right: 12px;
	transform: translateY(-50%);
}


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

	

	.mainTextArea h2, .mainTextArea h2 span {
		font-size: 26px;
		letter-spacing: 2px;
		margin-bottom: 40px;
	}
	
	.mainTextArea h2 span.textBig {
		font-size: 6vw;
		letter-spacing: 1px;
	}

	.mainTextArea h2.borderBottom {
		border-bottom: 1px solid #93875b;
		padding-bottom: 8px;
		margin-bottom: 10px;
	}

    .mainTextArea h2.borderBottom span.textColor.textBig {
        padding-left: 3.6em;
        letter-spacing: 1px;
    }
	
	/*SP：2行用*/
    .mainTextArea h2.borderBottom.twoLines span.textColor.textBig {
        padding-left: 75px;
    }	
	
    .mainTextArea h2.borderBottom.twoLines span.bgColor06.textBig {
        top:26%;
		font-size: 7.2vw;
    }
	
	.mainTextArea h2.borderBottom.twoLines span.textBig{
        font-size: 7.2vw;
    }
	/*SP：2行用ここまで*/

    .mainTextArea h2.borderBottom span.bgColor06.textBig {
        padding: 1px 8px 0px;
        font-size: 16px !important;
        transform: translateY(-65%);
        text-indent: 4px;
    }

	.mainTextArea h2.mb {
		margin-bottom: 40px;
	}

	.features {
		margin-bottom: 40px;
		height: auto;
	}	

	.features ul li {
		height: auto;
		width: 100%;
		margin: 0 auto 15px;
		padding: 32px 0 10px;
	}	

	.features ul li:last-child {
		margin: 0 auto 0;
		padding: 32px 0 10px;
	}		

	.features ul li .textSmall {
		font-size: 14px;
		margin-bottom: 0px;
	}

	.features ul li .text {
		font-size: 20px;
		letter-spacing: 2px;
	}

	.moreText {
		height: 220px;
		width: 85%;
		margin: 0 0 40px auto;
	}	

	.moreText p {
		margin-left: 26px;
		font-size: 15px;
		letter-spacing: 2px;
	}	

	main h3 {
		margin-bottom: 40px;
	}	

	main h3 .bgWhite {
		font-size: 26px;
		padding: 0 20px;
		letter-spacing: 3px;
		text-align: center;
	}

	main h3:before {
		top: 38%;
	}	

	main h3 .bgWhite .textSmall {
		font-size: 12px;
		padding: 0;
		margin-left: 15px;
		display: block;
	}	

	.conceptArea {
		border-top: 15px solid #2b3233;
	}

	.title .bgColor04 {
		padding: 20px;
		margin-top: -1px;
	}	

	.title .bgColor04 h4 {
		font-size: 30px;
	}	

	.title .bgColor04 .posi {
		width: 100%;
		margin-bottom: 40px;
	}

	.title .bgColor04 .abso {
		font-size: 10px;
	}	

	.title .bgColor04 .right {
		text-align: left;
	}	

	.title .bgColor04 p.yumin {
		font-size: 16px;
		letter-spacing: 2px;
	}	

	.title .bgColor04 .moreLink {
		text-align: right;
	}

	.conceptArea .title .bgColor04 .abso {
		bottom: 6px;
		left: 11rem;
	}	

	.conceptArea .mapimage {
		margin-bottom: 100px;
	}	

	.landArea:before {
		top: -100px;
		width: 90%;
		height: 100px;
		background: url("../-image/top/concept_bg_sp.png") no-repeat 0 0;
		background-size: 100%;
	}	

	.landArea .title .bgColor04 {
		padding: 20px;
	}	

	.landArea .textBox {
		width: 100%;
	}

	.landArea .landimage {
		top: 100%;
		width: 80%;
		height: 190px;
	}	

	.landArea .title .bgColor04 h4 {
		margin-bottom: 0;
	}

	.landArea .title .bgColor04 .abso {
		bottom: 10px;
		left: 8rem;
	}	

	.landArea .title .bgColor04 p.yumin {
		margin-bottom: 25px;
	}	

	.kurumuArea {
		margin-bottom: 40px;
	}	

	.kurumuArea .textBox {
		width: 100%;
		margin: 240px 0 0 0;
		margin: 120px 0 0 0;
	}	

	.kurumuArea .title .bgColor04 .right {
		text-align: right;
	}	

	.kurumuArea .title .bgColor04 h4 {
		margin-bottom: 0;
		margin-top: 60px;
	}	

	.kurumuArea .title .bgColor04 .posi {
		margin: 0 0 40px;
	}

	.kurumuArea .title .bgColor04 .abso {
		text-align: right;
		bottom: 10%;
		right: 5.5rem;
	}	

	.kurumuArea .title .bgColor04 p.yumin {
		margin-bottom: 25px;
	}	

	.kurumuArea .title .bgColor04 {
		height: auto;
	}

	.kurumuArea .kurumuimage {
		top: auto;
		bottom: 0;
		width: 80%;
		height: 190px;
	}		

	.kurumuArea .title .bgColor04 .moreLink {
		padding-bottom: 210px;
	}	

	.modelArea .title .bgColor04 .abso {
		bottom: 12px;
		right: auto;
        left: 8.5rem;
	}	

	.modelArea .title .bgColor04 .right {
		width: 100%;
	}	

	.loopslider01 {
		padding: 15px 0 0 0;
		margin-top: -1px;
	}	

	.loopslider01 img, .loopslider02 img {
		padding: 5px;
	}	

	.loopslider02 {
		padding: 0 0 15px 0;
		margin-bottom: 40px;
	}	

	.locationArea .title .bgColor04 {
		padding: 20px 20px 210px;
		height: auto;
	}	

	.locationArea .textBox {
		width: 100%;
	}

	.locationArea .landimage {
		top: 100%;
		width: 80%;
		height: 190px;
	}	

	.locationArea .title .bgColor04 h4 {
		margin-bottom: 0;
		margin-top: 0;
		letter-spacing: 2px;
	}

	.locationArea .title .bgColor04 .abso {
		bottom: 10px;
		left: 11rem;
	}	

	.locationArea .title .bgColor04 p.yumin {
		margin-bottom: 25px;
	}	

	.locationArea .locationimage {
		top: auto;
		bottom: 0;
		width: 80%;
		height: 190px;
	}	

	.specialSlider {
		margin-bottom: 40px;
	}	
	
	.specialBnr {
		margin: 50px auto;
	}
		
	.modelPlan .bgWhite {
		width: 92%;
		padding: 25px 0;
	}

	.modelPlan .bgWhite h4 {
		text-align: center;
		font-size: 30px;
		margin: 0 auto 15px;
	}
	
	.modelPlan .bgWhite .yumin {
		font-size: 14px;
		margin-bottom: 30px;
	}
	
	.modelPlan .bgWhite .modelhouseBnr {
		margin-bottom: 15px;
	}
	
	.modelPlan .bgWhite .otherBtn {
		width: 80%;
	}
	
	
	
	
	
}


@media screen and (min-width: 768px) and (max-width:1024px) { 
		
	.mainTextArea h2, .mainTextArea h2 span {
		font-size: 38px;
		letter-spacing: 5px;
	}	
	
	.mainTextArea h2 span.textBig {
		font-size: 4.8vw;
		letter-spacing: 2px;
	}	
	
	
	
	
	
	.features {
		margin-bottom: 60px;
		height: 125px;
	}	
	
	.features ul {
		width: 96%;
	}
	
	.features ul li {
		height: 125px;
	}
	
	.features ul li .text {
		font-size: 18px;
		letter-spacing: 2px;
	}
	
	.features ul li .textSmall {
		font-size: 13px;
		margin-bottom: 0;
	}
	
	.moreText {
		height: 200px;
		margin: 0 0 60px auto;
	}
	
	main h3 {
		margin-bottom: 60px;
	}
	
	main h3 .bgWhite {
		font-size: 36px;
		letter-spacing: 2px;
		padding: 0 20px;
		width: 90%;
	}
	
	.title .bgColor04 h4 {
		font-size: 40px;
		margin-bottom: 30px;
	}
	
	.title .bgColor04 .posi {
		width: 100%;
	}
	
	.title .bgColor04 .abso {
		font-size: 12px;
	}

	.title .bgColor04 p.yumin {
		font-size: 16px;
		letter-spacing: 3px;
	}
	
	.title .bgColor04 .right {
		width: 100%;
	}
	
	.conceptArea .title .bgColor04 .abso {
		bottom: 43px;
		left: 13rem;
		font-size: 12px;
	}	
	
	.conceptArea .mapimage {
		width: 90%;
		margin: 0 auto 120px;
	}	
	
	.landArea:before {
		top: -110px;
		background: url("../-image/top/concept_bg_sp.png") no-repeat 0 0;
		background-size: 80%;
    	max-width: 900px;
	}
	
	.landArea .title .bgColor04 {
		padding: 25px 25px 100px 25px;
	}
	
	.landArea .title .bgColor04 h4 {
		margin-bottom: 40px;
	}	
	
	.landArea .textBox {
		width: 40%;
	}	
	
	.landArea .title .bgColor04 .abso {
		bottom: 17%;
		left: 10rem;
	}
	
	.landArea .title .bgColor04 p.yumin {
		margin-bottom: 50px;
	}	

	.landArea .landimage {
		height: 330px;
	}	

	.kurumuArea .kurumuimage {
		height: 330px;
	}	

	.kurumuArea .title .bgColor04 h4 {
		margin-bottom: 40px;
		margin-top: 0px;
	}
	
	.kurumuArea .textBox {
		width: 42%;
	}	
	
	.kurumuArea .title .bgColor04 .abso {
		bottom: 9%;
    	right: 6.5rem;
	}	
	
	.kurumuArea .title .bgColor04 p.yumin {
		margin-bottom: 50px;
	}

	.kurumuArea .title .bgColor04 {
		height: auto;
	}
	
	.kurumuArea .title .bgColor04 {
		height: 330px;
		padding: 25px 25px 25px;
	}

	.kurumuArea {
		margin-bottom: 60px;
	}	

	.modelArea .title .bgColor04 .posi {
		width: 60%;
	}	
	
	.modelArea .title .bgColor04 .right {
		width: 40%;
	}
	
	.modelArea .title .bgColor04 .abso {
		bottom: 38%;
		left: 10rem;
		right: auto;
	}

	.loopslider01 {
		padding: 25px 0 0 0;
	}	
	
	.loopslider02 {
		padding: 0 0 25px 0;
		margin-bottom: 60px;
	}	

	.locationArea .locationimage {
		height: 330px;
	}	

	.locationArea .title .bgColor04 {
		padding: 25px;
		height: 330px;
	}	
	
	.locationArea .title .bgColor04 h4 {
		margin-top: 20px;
		margin-bottom: 60px;
	}	
	
	.locationArea .title .bgColor04 p.yumin {
		margin-bottom: 35px;
	}	

	.specialSlider {
		margin-bottom: 0;
	}	


}
@media screen and (min-width:1025px)  { 	
	
	

}
@media screen and (min-width:1200px)  { 	
	
	.pc.pcTb {
		display: block;
	}
	
}



/*----------------------------------------
SNSボタン
----------------------------------------*/

.snsIcon {
    text-align: center;
	width: 94%;
    max-width: 1160px;
    margin: 0 auto 80px;
}

.snsIcon h3 {
    position: relative;
    display: inline-block;
    padding: 0 15px;
    margin-bottom: 36px;
    border: none;
    font-size: 40px;
    letter-spacing: 0;
    font-weight: 600;
	line-height: 1;
}
       
.snsIcon h3:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 3px;
    height: 100%;
    background: #000;
    border-radius: 3px;
    transform: rotate(-25deg);
}
       
.snsIcon h3:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #000;
    border-radius: 3px;
    transform: rotate(25deg);
}

.snsIcon ul {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
}

.snsIcon ul li {
	width: 42%;
	height: 110px;
}

.snsIcon ul li a {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}


.snsIcon ul li.snsYoutube a {
	background: #EFE8E3;
}

.snsIcon ul li.snsYoutube img {
	max-width: 205px;
	max-height: 47px;
	width: 75%;
}

.snsIcon ul li.snsInsta a {
	background: url("../-image/common/sns_insta_bg.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.snsIcon ul li.snsInsta img{
	max-width: 70px;
	max-height: 70px;
	width: 25%;
}

.snsIcon ul li.snsTiktok a {
	background: #000;
}

.snsIcon ul li.snsTiktok img {
	max-width: 56px;
	max-height: 64px;
	width: 20%;
}

@media screen and (max-width: 767px) {
	
.snsIcon {
    margin: 0 auto 40px;
}
	
.snsIcon h3 {
    margin-bottom: 15px;
    font-size: 17px;
}	
	
.snsIcon ul li {
    height: 55px;
}	
	
.snsIcon h3:before,.snsIcon h3:after {
    width: 2px;
}
       
	
	
}


@media screen and (min-width: 768px) and (max-width: 1023px) {

	.snsIcon ul li {
		height: 70px;
	}	
	
	.snsIcon ul li.snsYoutube img {
		width: 65%;
	}

	.snsIcon ul li.snsInsta img{
		width: 19%;
	}

	.snsIcon ul li.snsTiktok img {
		width: 17%;
	}
	

}



/*----------------------------------------
ポップアップバナー
----------------------------------------*/

.popupBnr {
	display: none;
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 100;
	width: 420px;
    height: auto;
	cursor: pointer;
}

.popupBnr p.text {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
	width: 100%;
}

.closeBtn {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
    width: 30px;
}

.closeBtn p {
    line-height: 28px;
    font-size: 20px;
    color: #fff;
    background: #333;
    border-radius: 100px;
    border: 1px solid #fff;
    text-align: center;
	
}


@media screen and (min-width: 320px) and (max-width: 767px)  {
	
	.popupBnr {
		bottom: 60px;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
	}
	
	.popupBnr p.text {
		bottom:8px;
		font-size: 12px;
		line-height: 1.4;
	}
	
	
	
	
}



/*----------------------------------------
乾太くんバナー
----------------------------------------*/

.topBnr {
	text-align: center;
	margin: 0 auto 80px;
	width: 94%;
	max-width: 1160px;
}

@media screen and (min-width: 320px) and (max-width: 767px)  {
	.topBnr {
		margin: 0 auto 40px;
	}
	
}



/*----------------------------------------
 op
----------------------------------------*/

.MV{
width: 100%;
position: relative;
}

/*.MV:before {
    content: "";
    display: block;
    padding-top: 44.315%;
}*/

.op{
justify-content: flex-start;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
z-index: 21;
	background: #fff;
}

.op video {
    min-width: 100%;
    min-height: 100%;
width: 100%;
height: 100% !important;
vertical-align: top;
object-fit: cover;
	filter: drop-shadow(0px 0px rgba(0,0,0,0));
}

#skip{
width: 100px;
padding: 20px 10px;
font-weight: bold;
text-align: center;
background-color: #fff;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 21;
cursor: pointer;
}

#skip:hover{
background-color: #eee;
}

.main_text{
position: absolute;
top: 20%;
left: 50%;
width: 50%;
transform: translate(-50%, -20%);
}

.main_logo{
position: absolute;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
width: 7%;
}

.op.sc_top{
animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
height: 100vh;
  }
  100% {
    opacity: 0;
height: 0;
  }
}


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

/*----------------------------------------
 op
----------------------------------------*/
.MV{
height: 100%;
position: relative;
}

/*.MV:before {
    content: "";
    display: block;
    padding-top: 100%; 
}*/

.main_v {
height: 100%;
}

#skip{
width: 70px;
padding: 12px 5px;
font-weight: bold;
text-align: center;
background-color: #fff;
position: absolute;
z-index: 22;
cursor: pointer;
}


.op{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
}


.op video {
    position: static;
    top: 0;
    left: 0;
    transform: none;
    min-width: 100%;
    min-height: auto;
	width: 100%;
	height: 100% !important;
	vertical-align: top;
}

	#Topslider {
    overflow: hidden;
    margin-bottom: 0;
}
	
	#op {
        width: 100%!important;
		height: 100%;
        aspect-ratio: 1 / 1; /* 縦横比を1:1に固定 */
		overflow: hidden;
    }
	
	#op video {
        width: 100%!important;
		height: 100%;
        aspect-ratio: 1 / 1; /* 縦横比を1:1に固定 */
		object-fit: cover;
		overflow: hidden;
    }
	
	.MV { /* #Topsliderの親要素 */
		overflow: hidden;
		margin-bottom: 40px;
	}	
	
	
	

}




/*----------------------------------------
GW、お盆の休暇
----------------------------------------*/
.holiday {
	margin: 60px auto 80px;
	text-align: center;
}

.holiday .border {
	display: inline-block;
	padding: 20px 50px;
	border: 2px solid #3e3a39;
}

.holiday .title {
	font-size: 18px;
	margin-bottom: 10px;
}

.holiday p {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 5px;
	margin-left: 5px;
}

.holiday .textSmall {
	font-size: 14px;
}



@media screen and (min-width: 320px) and (max-width: 767px)  {
	.holiday {
		margin: 50px auto;
		width: 90%;
	}

	.holiday .border {
		padding: 20px 15px;
	}
	
	.holiday .title {
		font-size: 16px;
	}

	.holiday p {
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 1px;
		margin-left: 3px;
	}

	.holiday .textSmall {
		font-size: 12px;
	}
	

}


/*----------------------------------------
TVCM
----------------------------------------*/

.tvcm {
    margin: 0 auto 80px;
    text-align: center;
	font-weight: 600;
}

.tvcm .cm_img {
	width: 90%;
	max-width: 500px;
	margin: 40px auto 0;
	cursor: pointer;
}

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

	.tvcm {
		margin: 40px auto ;
	}
	
}

/*----------------------------------------
.bnrHouseDesign
----------------------------------------*/

.bnrHouseDesign {
	width: 90%;
    max-width: 800px;
    margin: 0 auto 50px;
   
}

.bnrHouseDesign img {
	border-radius: 30px;
}

@media screen and (min-width: 320px) and (max-width: 767px)  {
	
	.bnrHouseDesign img {
		border-radius: 20px;
	}	

}