.section { padding:100px 0; }
.navy { background:#0f1f3a; color:#fff; }
.container { width:90%; max-width:1200px; margin:auto; }
.center{text-align:center;} .white{color:#fff;}



#main-pic-box1 h1{
	font-family: "Helvetica Neue",
	    Arial,
	    "Hiragino Kaku Gothic ProN",
	    "Hiragino Sans",
	    Meiryo,
	    sans-serif;
	font-weight: 900;
	font-size: 80px;
	line-height: 100%;
	letter-spacing: 0em;
	color: #FFF;
	position: absolute;
	left: 0px;
	bottom: 0px;
	max-width: 100% ;
	margin: 0px auto ;
	text-align: center ;
}



#modelhouse-box01{
	width: 100% ;
	margin: 0px auto ;
	background: #FFF ;
	font-size: 100%;
	font-family:'Oswald',sans-serif;
}
#modelhouse-box01 .inner-box{
	max-width: 1080px ;
	margin: 0px auto ;
	padding: 100px 10px ;
}
#modelhouse-box01 h1 {
  font-size: 300%;
  font-weight: 700;
  text-align: center;
  margin: 0px auto;
}

#modelhouse-box01 h1 span {
  display: block;
  text-align: center;
  font-size: 60%;
  font-weight: 400;
  margin: 20px auto 50px auto;
}










/* HERO SLIDER */
.hero{position:relative;height:90vh; overflow:hidden;}
.slider{width:100%; height:100%; position:relative;}
.slide{
  position:absolute; width:100%; height:100%;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.05);
  transition:opacity 1.5s ease, transform 1.5s ease;
}
.slide.active{opacity:1; transform:scale(1);}
.slide-text{
  position:absolute; bottom:20%; left:50%;
  transform:translateX(-50%) translateY(50px);
  color:#fff; text-align:center;
  opacity:0; transition:opacity 1s ease, transform 1s ease;
  padding: 5px 20px ;
  /* うっすら白背景 */  background: rgba(255, 255, 255, 0.1);
  /* ぼかし効果（対応ブラウザ） */  backdrop-filter: blur(6px);  border-radius: 4px;
  /* 文字をはっきりさせる影 */  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  /* ボックスにも影 */  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.slide.active .slide-text{opacity:1; transform:translateX(-50%) translateY(0);}




/* FEATURE */
.space{
	padding: 100px 0px 20px 0px ;
}
.feature{display:flex; gap:20px; align-items:center; margin-bottom:100px;color: #FFF ;}
.feature h3{
	font-weight: 700 ;font-size: 160% ;
}
.feature.reverse{flex-direction:row-reverse;}
.feature .img-box{width:60vw; height:auto;}
.feature .img-box{
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}
.feature .img-box img{
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}
.feature .text{width:40vw;}
@media(max-width:768px){ .feature{flex-direction:column!important;} 
.img-box,.feature .text{width:100%;}
.feature .img-box {width: 100%;}
}

@media(min-width:1024px){
	.feature .text p{
	padding-top: 30px ;
    font-size: 115%;   /* お好みで調整 */
    line-height: 2.5;  /* 読みやすく */
  }
}

 
 
/* SCROLL HORIZONTAL */
.container-function{width:100%; margin: 0px auto}
.container-function h2{margin: 0px 0px 0px 5vw ;}
.scroll-wrapper{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-container{display:flex; gap:20px;}
.card{flex:0 0 450px; display:flex; background:#fff; border-radius:8px; cursor:pointer;}
.card:hover{background:#FFFFF7;}
.card-text{padding:20px; flex:1; position:relative; display:flex; flex-direction:column; justify-content:space-evenly;; color:#999;}
.card-text:hover{color:#003366;}
.card-text:visited{color:#003366;}
.card-text p{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;}
.card-title{font-weight:600; margin-bottom:5px;}
.click-label{position:absolute; bottom:10px; right:10px; font-size:13px; color:#6699CC;}
.click-label:hover{ color:#CCCCCC;}
.scroll-hint{
	text-align: center ;
}
/* スマホ時カード幅80% */
@media(max-width:768px){
  .card{flex-direction:column; flex:0 0 80%;}
}
/* スクロールバー常に表示 (Webkit対応) */
.scroll-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(150,150,150,1) transparent;
}
.scroll-wrapper::-webkit-scrollbar {
  height:8px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
  background: rgba(50,50,50,50.1);
  border-radius:5px;
}
.scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.container-function .img-box{width:50%; height:auto;}
.container-function .img-box img{width:100%;}





/* GALLERY CSS column-count */
.gallery01{
	padding: 120px 0px 100px 0px ;
}
.gallery01 h2{
	font-size: 200% ;
	color: #FFF ;
	margin: 0px auto 30px auto ;
	max-width: 1065px ;
  font-family: 'Noto Sans JP', 'Helvetica Neue', sans-serif;
  font-size: 1.4rem;
  font-weight: 200; /* 細く */
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #FFF;
  padding: 15px 30px;
  background: linear-gradient(135deg, #0b1c2d 0%, #132f4c 100%);
  position: relative;
  display: inline-block;
  border-radius: 10px ;
}
.gallery01 h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 2px;
  background: #1f4068;
}
.gallery01 h2::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 100%;
  height: 100%;
  border: 1px solid #1f4068; /* 線を細く */
  z-index: -1;
}

.gallery{
  column-count:4;
  column-gap:20px;
}
.gallery-item{
  display:inline-block;
  width:100%;
  margin-bottom:20px;
  cursor:pointer;
    transition: 0.3s ease;
}
.gallery-item img{width: 100% ;vertical-align: bottom;}
.gallery-item:hover{box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);filter: brightness(1.2);}
@media(max-width:1024px){ .gallery{column-count:4;} }
@media(max-width:768px){ .gallery{column-count:4;} }
@media(max-width:480px){ .gallery{column-count:3;} }




/* DESIGNER */
#designer{
  background: linear-gradient(180deg, #0b1c2d 0%, #081421 100%);
  padding: 140px 20px;
}
#designer .designer-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  color: #FFF;
}
#designer .designer-inner p{
  font-size: 120% ;
  line-height: 230% ;
}
#designer h2{
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 200;
  letter-spacing: 0.35em;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
}
#designer h2::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #1f4068;
}
.designer-section{position:relative;}
.designer-text{
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 1), 2px 3px 3px rgba(0, 0, 0, 1), 1px 0px 3px rgba(0, 0, 0, 1);
	position: relative ;
  z-index: 2 ;
}
.designer-photo{
  width: 230px;
  height: 150px;
  position: absolute;
  right: -20px;
  bottom: -80px;
  z-index: 1 ;
}
.designer-photo img{width:100%;}




.seinou {
  background-color: #FFF;
  padding: 80px 40px;
  color: #111;
}
.seinou-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.seinou h1{
	margin: 0px auto 60px auto ;
	text-align: center ;
	font-weight: 700 ;
	font-size: 20px ;
}

.seinou-heading {
	margin: 0px 0px 10px 0px ;
	padding: 0px 0px 0px 5px ;
	border-bottom: 3px solid #999 ;
  display: flex;
  align-items: center;      /* 縦中央揃え（任意） */
  height: 100% ;
}
.seinou-heading h2{
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.25em;
	color: #111; /
	margin:0;
}
.seinou-item .seinou-heading img{width: 20% ;margin-left: 20px;        /* 画像同士の間隔 */}
#seinou-heading-grid2 img{width: 40% ;margin-left: 20px;        /* 画像同士の間隔 */}
#seinou-heading-grid3 img{width: 15% ;margin-left: 20px;        /* 画像同士の間隔 */}
@media (max-width: 768px) {
	.seinou-item .seinou-heading img{width: 40% ;margin-left: 20px;        /* 画像同士の間隔 */}
	#seinou-heading-grid2 img{width: 40% ;margin-left: 20px;        /* 画像同士の間隔 */}
	#seinou-heading-grid3 img{width: 60% ;margin-left: 20px;        /* 画像同士の間隔 */}
}

/* ===== グリッド ===== */
.seinou-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PC：2列 */
  gap: 40px;
  margin-bottom: 40px;
}
.seinou-grid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC：3列 */
  gap: 40px;
  margin-bottom: 40px;
}
.seinou-grid3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* PC：1列 */
  gap: 40px;
  margin-bottom: 40px;
}

/* ===== 各アイテム ===== */
.seinou-item {
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
}
.seinou-item2{
	max-width: 700px ;
	margin: 75px auto 0px auto ;
}
.seinou-item img,
.seinou-item2 img{
	width: 100% ;
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
  .seinou-grid ,
  .seinou-grid2 {
    grid-template-columns: 1fr; /* 1列に */
    gap: 20px;
    margin-bottom: 30px;
  }
}




/* ACCESS */
#modelhouse-access{
	background-color: #1b3f69 ;
	color: #FFF ;
}
#modelhouse-access .section{
	margin: 0px auto ;
}
#modelhouse-access h3{
	font-size: 150% ;
	margin-bottom: 10px ;
}

.map iframe{border-radius: 10px ;margin: 30px auto 0px auto ;border:2px solid #ff1493;}




/* LIGHTBOX */
.lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85);
  justify-content:center; align-items:center; z-index:9999; flex-direction:column;}
.lightbox-content{ width:70%; max-width:900px; text-align:center; color:#fff; }
.lightbox-img{ width:100%; height:auto; background:rgba(255,255,255,1); margin-bottom:20px; }
.lightbox-title{ font-size:24px; margin-bottom:10px; }
.lightbox-desc{ font-size:16px; }
.close{ position:absolute; top:20px; right:40px; font-size:40px; color:#fff; cursor:pointer; }












#main-box03 #form-box {
  width: auto;
 }
/* FORM内容部分ここから */
div#mf_wrapper {
	width: 800px;
	margin:0px auto;
	font-family: sans-serif;
}
form#mailform {
	padding: 5px;
}
table.mailform {
	width: 800px;
	border-top: 1px dotted #999999 ;
	
}
table.mailform tr th,
table.mailform tr td {
	text-align: left;
	font-weight: normal;
	font-size: 12px;
	border-bottom: 1px dotted  #999999;
	padding: 7px 5px 7px 5px;
}
table.mailform tr th {
	white-space:nowrap;
}
table.mailform tr th span {
	padding: 0px 0px 0px 3px ;
	font-size: 12px;
	font-weight: bold ;
	color: #CC0000;
}
table.mailform tr th p {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	color: #999999;
}
table.mailform tr td textarea {
	height: 120px;
}
.input-float01 div{
	white-space:nowrap;
	float: left ;
}
.w-10 textarea{width: 10% ;}
.w-20 textarea{width: 20% ;}
.w-30 textarea{width: 30% ;}
.w-40 textarea{width: 40% ;}
.w-50 textarea{width: 50% ;}
.w-60 textarea{width: 60% ;}
.w-70 textarea{width: 70% ;}
.w-80 textarea{width: 80% ;}
.w-90 textarea{width: 90% ;}
.w-100 textarea{width: 100% ;}
.w-10 input{width: 10% ;}
.w-20 input{width: 20% ;}
.w-30 input{width: 30% ;}
.w-40 input{width: 40% ;}
.w-50 input{width: 50% ;}
.w-60 input{width: 60% ;}
.w-70 input{width: 70% ;}
.w-80 input{width: 80% ;}
.w-90 input{width: 90% ;}
.w-100 input{width: 100% ;}




/*
	参考　
	レスポンシブ：タブレット縦/スマホ横/スマホ縦
	@media screen and (max-width: 1024px) { }
	@media screen and (max-width: 896px) { }
	@media screen and (max-width: 480px) { }
*/



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

	/* FORM内容部分ここから */
	#main-box03 #form-box {
	  width: 95%;
	  margin: 0px auto;
	  padding: 60px 10px 60px 10px ;
	  text-align: center;
	  background: #5a7087;
	  color: #FFF;
	}

	div#mf_wrapper {
		width: 100% ;
	}

	table.mailform {
		width: 100% ;
		
	}
	table.mailform tr th,
	table.mailform tr td {
		font-size: 1.5vw;
	}

	table.mailform tr th span {
		font-size: 1.5vw;
	}
	table.mailform tr th p {
		font-size: 1.5vw;
	}
}

@media screen and (max-width: 480px) { 
	.text-price{display: none ;}
	.text-price-sp{display: block ;}
	#main-box02 .livestown-box02 h3 { font-size: 5vw;}
	.livestown-date{display: none ;}
	.livestown-date-sp{display: block ;}

	.livestown-date-sp{
		color: #FFF ;
		padding: 0px ;
		margin: 20px auto 0px auto ;
		font-size: 100% ;
		line-height: 150% ;
	}
	.livestown-date-sp td{
		padding: 20px ;
		vertical-align: middle ;
	}
	.livestown-date-sp span.date{
		display: block ;
		margin: 0px 0px 10px 0px ;
		padding: 0px 0px 5px 0px ;
		border-bottom: 1px solid #FFF ;
		line-height: 120% ;
		font-weight: 900 ;
		font-size: 240% ;
	}
	.livestown-date-sp span.week{
		font-weight: 900 ;
		font-size: 1.5vw ;
	}
	.livestown-date-sp img{
		width: 100% ;
		max-width: 400px ;
	}




	#main-box02 .main-box02-inner{
		padding: 60px 10px 60px 10px ;
	}
	/* FORM内容部分ここから */
	div#mf_wrapper {
		width: 100% ;
	}

	table.mailform {
		width: 100% ;
		
	}
	table.mailform tr th{
		font-size: 2vw;
	}
	table.mailform tr td {
		font-size: 2.5vw;
	}

	table.mailform tr th span {
		font-size: 2vw;
	}
	table.mailform tr th p {
		display: none ;
	}


	#main-box06{
		margin: 0px auto ;
		padding: 60px 10px  ;
	}

	#main-box06 h1{
		font-size: 6vw ;
	}
	#main-box06 span{
	padding: 0px ;
		font-size: 3.5vw ;
	}
}