/*
Title: スマeタウン　HAKUNOSHIMA　HILLS
Last Updated: 2026-04-09
Author: kayama
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
/*----------------------------------------
	全体
----------------------------------------*/

html{
    font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	font-size:62.5%;
	color: #000;
	-webkit-text-size-adjust:100%;
	line-height:1.5;
	font-weight: normal;
}
html {
    scroll-padding-top: var(--header-height);
}
body{ font-size:1.4rem; font-size: 1.4em; }
img{ vertical-align: bottom; }
a {
    transition: all 0.4s;
    text-decoration: none;
	color: #000;
}
a:hover{
	color:#ff9d62;
	transition: all 0.4s;
}
.yumin{
    font-family:'游明朝体','Yu Mincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro','ＭＳ Ｐ明朝','ＭＳ 明朝','Sawarabi Mincho',serif;
	font-weight: 500;
}
.zen{
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.golden{
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

.max_respon{max-width: 100%;}
.bg_white{
	background-color: #fff;
}
:root{
	--color-lightgray: #dcdcdc;
	--color-gray: #d2d2d2;
}
.bg01{
	background: var(--color-gray);
}
.bg02{
	background: var(--color-lightgray);
}

/*----------------------------------------
	text
----------------------------------------*/

p{ 
	line-height: 2; 
	font-feature-settings: "palt"; /* 追加　*/
}

.text_300{ font-weight: 300; }
.text_400{ font-weight: 400; }
.text_500{ font-weight: 500; }
.text_600{ font-weight: 600; }
.text_700{ font-weight: 700; }
.text_800{ font-weight: 800; }
.text_bold{ font-weight: bold!important; }
.text_normal{ font-weight: normal; }

.ls_-1{ letter-spacing: -1px; }
.ls_05{ letter-spacing: 0.5px; }  /* 追加　*/
.ls_06{ letter-spacing: 0.6px; }  /* 追加　*/
.ls_09{ letter-spacing: 0.9px; }  /* 追加　*/
.ls_1{ letter-spacing: 1px; }
.ls_12{ letter-spacing: 1.2px; }  /* 追加　*/
.ls_2{ letter-spacing: 2px; }


.text_8{ font-size:0.8rem !important; }
.text_9{ font-size:0.9rem !important; }
.text_10{ font-size:1.0rem !important; }
.text_11{ font-size:1.1rem !important; }
.text_12{ font-size:clamp(1.2rem, 1.1vw, 1.2rem); }
.text_13{ font-size:clamp(1.3rem, 1.25vw, 1.3rem); }
.text_14{ font-size:clamp(1.4rem, 1.34vw, 1.4rem); }
.text_15{ font-size:clamp(1.4rem, 1.4vw, 1.5rem); }
.text_16{ font-size:clamp(1.4rem, 1.5vw, 1.6rem); }
.text_18{ font-size:clamp(1.5rem, 1.7vw, 1.8rem); }
.text_20{ font-size:clamp(1.6rem, 1.9vw, 2rem); }
.text_21{ font-size:clamp(1.7rem, 2vw, 2.1rem); }
.text_22{ font-size:clamp(1.7rem, 2.1vw, 2.2rem); }
.text_24{ font-size:clamp(1.8rem,2.3vw, 2.4rem); }
.text_26{ font-size:clamp(1.8rem, 2.5vw, 2.6rem); }
.text_28{ font-size:clamp(1.9rem, 2.6vw, 2.8rem); }
.text_30{ font-size:clamp(2rem, 2.8vw, 3rem); }
.text_32{ font-size:clamp(2.1rem, 3vw, 3.2rem); }
.text_34{ font-size:clamp(2.2rem, 3.2vw, 3.4rem); }
.text_36{ font-size: clamp(2.3rem, 3.3vw, 3.6rem); }
.text_38{ font-size: clamp(2.4rem, 3.4vw, 3.8rem); }
.text_40{ font-size: clamp(2.5rem, 3.8vw, 4rem); }
.text_41{ font-size: clamp(2.6rem, 3.9vw, 4.1rem); }
.text_48{ font-size: clamp(3.3rem, 4.2vw, 4.8rem); } 
.text_60 {
    font-size: clamp(32px, 4.5vw, 60px);
    line-height: 1;
}

.lh_11{ line-height: 1.1; }/* 追加　*/
.lh_12{ line-height: 1.2; }
.lh_13{ line-height: 1.3; }
.lh_14{ line-height: 1.4; }
.lh_15{ line-height: 1.5; }
.lh_16{ line-height: 1.6; }
.lh_17{ line-height: 1.7; }
.lh_18{ line-height: 1.8; }
.lh_19{ line-height: 1.9; } /* 追加　*/
.lh_20{ line-height: 2.0; } /* 追加　*/
.lh_21{ line-height: 2.1; } /* 追加　*/
.lh_22{ line-height: 2.2; }
.lh_23{ line-height: 2.3; }
.lh_24{ line-height: 2.4; }
.lh_25{ line-height: 2.5; }
.lh_31{ line-height: 3.1; } /* 追加　*/
.lh_33{ line-height: 3.1; } /* 追加　*/
@media screen and (max-width: 768px){

	/*line-height*/
	.lh_19,
	.lh_20,
	.lh_21,
	.lh_22,
	.lh_23,
	.lh_24,
	.lh_25{
		line-height: 1.8 !important;
	}
	.lh_31,.h_33{ 
		line-height: 2.2 !important; /* 追加　*/
	} 

}/*END*/
@media screen and (max-width: 599px){
	p{ line-height: 1.8; }
	.sp_center{text-align: center;}
}/*END*/

.text_green{
	color: #084733;
}
.text_grey{
	color: #7d7d7d;
}
.text_black{color: #000;}
.text_white{color: #fff;}
/*----------------------------------------
	共通
----------------------------------------*/

.inner_frame {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    box-sizing: border-box;
}

.form_frame {
    max-width: 840px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    background: #eeeeee;
}

li{ list-style:none; }
.center{ text-align:center; }
.text_center{ text-align:center; }
.text_left{text-align: left;}
.palt{font-feature-settings: "palt";}
.column{
	display: flex;
    flex-direction: column;
    align-items: center;
}
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; }
.op:hover img{
	filter: alpha(opacity=60);
	-moz-opacity:060;
	opacity:0.60;
}
.op05{
	opacity: 0.5;
}
.f_right{
	float: right;
}
#container{ overflow: hidden; }

.nowrap{
	white-space: nowrap;
}
.m_a{
	margin-inline: auto;
}
.z_0{
	z-index: 0;
}
.z_1{
	z-index: 1;
}
.block{
	display: block;
}
.flex{
	display: flex;
}
.flex_column{
	display: flex;
	flex-direction: column;
}
.flex > div{
	width: 50%;
}
.al_center{
	align-items: center;
}
.space_b{
	justify-content: space-between;
}
.grid3{
	display: grid;
	grid-template-columns: repeat(3,1fr);
}
.grid3.gap3{
	gap: 30px!important;
}
.grid4{
	display: grid;
	grid-template-columns: repeat(4,1fr);
}
.grid4.gap3{
	gap: 30px!important;
}
.w40{
	width: 40%!important;
}
.w60{
	width: 60%!important;
}
.gap3{
	gap: 3%;
}
.gap4{
	gap: 4%;
}
.gap1{
	gap: 1%;
}

/* タイトル */
.big_ttl img {
    max-width: 500px;
    width: 60%;
}
.middle_ttl img {
    max-width: 550px;
    width: 60%;
}

.small_ttl img {
    max-width: 300px;
    width: 35%;
}
.copy_ttl img{
	max-width: 500px;
	width: 100%;
}
.copy_ttl.center img{
	width: 48%;
}

.copy_sub_ttl img{
	max-width: 320px;
	width: 100%;
}

/* ボタン */
.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 280px;
    width: 100%;
    height: 60px;
    padding: 0 13px;
    background: transparent;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
    position: relative;
    box-sizing: border-box;
    transition: all 0.3s;
    cursor: pointer;
}
.btn:hover{
	background: #000;
	color: #fff;
}
.btn::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(135deg);
}
.btn:hover::after {
	transition: all 0.3s;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

/* テーブル */
table{
	border-top: 1px solid #fff;
	font-size: 1.4rem;
	line-height: 1.4;
	width: 100%;
}
table tr{
	border-bottom: 1px solid #fff;
}
table th{
	text-align: left;
	padding: 3% 2%;
	font-weight: 500;
}
table td{
	text-align: right;
	padding: 3% 2%;
	font-weight: 500;

}
@media print, screen and (min-width: 600px){

	.sp_br{
		display: none;
	}
	.pc_none{
		display: none !important;
	}

}/*END*/

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

	.inner_frame{
		padding-right: 3%;
		padding-left: 3%;
	}
	.w40{
		width: 50%!important;
	}
	.w60{
		width: 50%!important;
	}
	.grid3.gap3 {
		gap: 15px !important;
	}
	.grid4{
		grid-template-columns: repeat(2,1fr);
	}

}/*END*/

@media screen and (max-width: 599px){
	.text_center{ text-align:left; }
	.sp_palt{font-feature-settings: "palt";}
	.inner_frame{
		padding-right: 4.5%;
		padding-left: 4.5%;
	}
	.sp_left{
		text-align: left;
	}
	.pc_br{
		display: none;
	}
	.sp_none{
		display: none !important;
	}
	.flex{
		flex-direction: column;
	}
	.grid3 .flex_column {
        flex-direction: column-reverse;
        gap: 20px;
    }
	.flex.reverse{
		flex-direction: column-reverse;
	}
	.flex > div,.w40,.w60{
		width: 100%!important;
	}
	.grid3{
		grid-template-columns: repeat(1,1fr);
	}
	.grid3.gap3{
		gap: 20px!important;
	}
	.grid4.gap3 {
		column-gap: 15px !important;
		row-gap: 20px !important;
	}
	.gap4{
		gap: 30px;
	}
	.gap4._sp{
		gap: 20px;
	}
	.gap3{
		gap: 20px;
	}
	.gap1{
		gap: 10px;
	}
	.sp_mt_none{
		margin-top: 0px!important;
	}
	/* タイトル */
	.big_ttl img {
		width: 100%;
	}
	.middle_ttl img {
		width: 85%;
	}
	.small_ttl img {
		width: 60%;
	}
	.copy_ttl img{
		width: 95%;
	}
	.copy_ttl.center img {
		width: 90%;
	}
	.copy_sub_ttl img {
		width: 70%;
	}
	/* テーブル */
	table{
		font-size: 1.2rem;
	}
}/*END*/


/*----------------------------------------
	header
----------------------------------------*/
.rela{
	position: relative;
}
header {
    position: fixed;
    width: 100%;
	z-index: 20;
}
.header_nav{
    position: relative;
    display: flex;
    justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
    top: 0;
    width: 100%;
	z-index: 30;
	background: #fff;
}

.header_logo img {
    width: 100%;
    max-width: 249px;
	height: 100%;
    aspect-ratio: 249 / 76;
}
.header_logo,.nav_r{width: 20%;}
.nav_r{
	display: flex;
    justify-content: flex-end;
}

.drawer{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    color: #fff;
    display: flex;
    justify-content: center;
    visibility: hidden;
    transform: translateY(-100%);
    transition: 0.5s ease-in-out;
	z-index: 10;
    background: rgba(0, 0, 0, 0.7);
}
.drawer nav{
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.d_point{
	font-size: 2.5rem;
}
.drawer nav li{
	margin: auto;
}
.open .drawer{
	visibility: visible;
	transform: translateX(0);
}
.open .drawer ul li {
    transform: translateX(0);
}
.drawer a{
	display: block;
}
.drawer_logo{
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	margin-bottom: 80px;
}
.drawer ul{
	width: 100%;
	text-align: center;
	line-height: 2.5;
    font-size: 2rem;
}
.drawer ul li a{
	color: #fff;
}
.btn_menu_box{
	aspect-ratio: 1 / 1;
    width: 100px;
	cursor: pointer;
}
.btn_menu {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 20px;
	background-color: transparent;
}

.btn_menu span {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 2px;
	width: 30px;
	background: #000;
	transition: all 0.4s;
}

.btn_menu span:nth-of-type(1) { top: 5%; }
.btn_menu span:nth-of-type(2) { top: 50%; }
.btn_menu span:nth-of-type(3) { top: 100%; }


.open .btn_menu span:nth-of-type(1) {
	transform: translate(-50%, -50%) rotate(45deg);
	top: 50%;
}
.open .btn_menu span:nth-of-type(2) {
	opacity: 0;
}
.open .btn_menu span:nth-of-type(3) {
	transform: translate(-50%, -50%) rotate(-45deg);
	top: 50%;
}
@media screen and (max-width: 768px){
	.header_logo,.nav_r{
		width: 25%;
	}
}/*END*/
@media screen and (max-width: 599px){
	.header_logo,.nav_r{
		width: 45%;
	}
	.header_nav{
		gap: 4%;
	}
	.btn_menu span{
		height: 1px;
	}
	.btn_menu span:nth-of-type(1) {
		top: 10%;
	}
	.btn_menu span:nth-of-type(3) {
		top: 90%;
	}
	.d_point {
		font-size: 1.7rem;
	}
	.drawer ul {
		font-size: 1.8rem;
	}
}/*END*/
@media screen and (max-width: 400px){
	.btn_menu span {
		left: 45%;
		width: 70%;
	}
}


/*----------------------------------------
	帯
----------------------------------------*/
.obi{
	display: flex;
}
/* .obi li:nth-child(2){
	border-left: 1px solid #000;
	border-right: 1px solid #000;
} */
.obi li{
	width: calc(100%/3);
}
@media screen and (max-width: 599px){
	.obi{
		flex-direction: column;
	}
	/* .obi li:nth-child(2){
		border-left: unset;
		border-right: unset;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
	} */
    .obi li {
        width: 100%;
        text-align: center;
    }
    .obi li img {
        max-width: 350px;
        width: 80%;
    }
}
/*----------------------------------------
	concept
----------------------------------------*/
.concept_flex{
	display: flex;
	gap: 6%;
	align-items: center;
}
.concept_flex > div:nth-child(1){
	width: 55%;
}
.concept_flex > div:nth-child(2){
	width: 45%;
}
.concept_ttl img {
    max-width: 394px;
    width: 85%;
}
.concept_deco {
    position: absolute;
    right: -10%;
    bottom: -17%;
    width: 67.7%;
}
@media screen and (max-width: 1250px){
	.concept_deco {
		right: 0%;
	}
}
@media screen and (max-width: 768px){
	.concept_flex{
		gap: 3%;
	}
	.concept_flex > div:nth-child(1),.concept_flex > div:nth-child(2){
		width: 50%;
	}

}
@media screen and (max-width: 599px){
	.concept_flex{
		flex-direction: column;
		gap: 50px;
	}
	.concept_flex > div:nth-child(1),.concept_flex > div:nth-child(2){
		width: 100%;
	}
	.concept_deco {
        bottom: unset;
        top: -3%;
    }
	.concept_ttl img {
		width: 70%;
	}
}
/* point_nav */
.point_nav{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5%;
    margin: auto;
}
.point_nav li{
	border: 1px solid #000;
}
.point_nav li a{
	display: block;
	position: relative;
	overflow: hidden;
}
.point_nav li a:after{
	content: "▼";
	position: absolute;
	color: #fff;
	left: 50%;
	top: 72%;
	transform: translateX(-50%) scaleY(0.7);
	font-size: 1.8rem;
	transition: all 0.4s;
}
.point_nav li a:hover:after{
	top: 75%;
}
.point_nav li a:hover{
	background: rgba(255,255,255,0.7);
}

@media screen and (max-width: 768px){
	.point_nav{
		width: 90%;
	}

}/*END*/
@media screen and (max-width: 599px){
	.point_nav{
		width: 100%;
		gap: 1%;
	}
	.point_nav li a:after{
		font-size: 1rem;
	}
}


/* スライダー */
.slider01 .slick-slide,
.slider02 .slick-slide {
	width: auto; /* ★重要 */
	box-sizing: border-box;
}
@media screen and (max-width: 599px){
	.slick-slide img {
		width: 100%;
		height: 180px;
		object-fit: cover;
	}
}


/*----------------------------------------
	point
----------------------------------------*/

/*----------------------------------------
	landplan
----------------------------------------*/

/*----------------------------------------
	location
----------------------------------------*/
.location_list{
	display: none;
}
.btn.open::after {
    transform: rotate(-45deg);
}
#location_table p img {
    max-width: 250px;
    width: 65%;
}
@media screen and (max-width: 599px){
	#location_table p img {
		width: 55%;
	}
}

/*----------------------------------------
	access
----------------------------------------*/

/* map */
.map{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 45% 0 0;
	text-align: center;
}
.map iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}
.map iframe:not(:target){
	left: 0\9;
	top: 0\9;
}
.map iframe{
	left: 0\9;
	top: 0\9;
}
@media all and (-ms-high-contrast: none) {
.map iframe{
		left: 50%\9 !important;
		top: 50%\9 !important;
	}
}
.map{ z-index: 2; }/*chrome対策*/

@media screen and (max-width: 599px) {
	.map{ padding: 60% 0 0; }
}/*END*/

/*----------------------------------------
	plan
----------------------------------------*/
.plan_tab{
	display: flex;
	align-items: end;
}
.plan_tab li {
    margin-right: 1%;
    cursor: pointer;
    max-width: 220px;
    width: 25%;
}
.plan_contents {
    background: #eeeeee;
    box-sizing: border-box;
    padding: 3%;
    display: none;
}
.plan_contents.active{
	display: block;
}
.plan_contents > .flex > div:nth-child(1){
	width: 40%;
}
.plan_contents > .flex > div:nth-child(2){
	width: 60%;
}
.plan_contents h4 img {
    max-width: 378px;
    width: 100%;
}
.plan_contents h5 img {
    max-width: 250px;
    width: 66%;
}

@media screen and (max-width: 1000px){
    .plan_contents_right .flex {
        flex-direction: column !important;
        gap: 0;
    }
	.plan_contents_right .flex > div{
		width: 100%!important;
	}
	.plan_contents_right .flex > div:nth-child(2) table{
		border-top: unset;
	}
}/*END*/
@media screen and (max-width: 768px){
	.plan_contents > .flex > div:nth-child(1),.plan_contents > .flex > div:nth-child(2){
		width: 50%;
	}
}/*END*/
@media screen and (max-width: 599px){
	.plan_tab li {
		width: 35%;
	}
	.plan_contents {
		padding: 10px;
	}
	.plan_contents > .flex > div:nth-child(1),.plan_contents > .flex > div:nth-child(2){
		width: 100%;
	}	
	.plan_contents h4 img {
		width: 80%;
	}
}/*END*/

/*----------------------------------------
	spec
----------------------------------------*/
.spec_point{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
}
@media screen and (max-width: 599px){
	.spec_point{
		gap: 10px;
	}
	#spec .copy_ttl.m_b10{
		margin-bottom: 0px!important;
	}
}/*END*/
/*----------------------------------------
	support
----------------------------------------*/

/*----------------------------------------
	outline
----------------------------------------*/
.outline_ttl {
    background: #eeeeee;
    width: 100%;
    box-sizing: border-box;
    padding: 1em 4em 1em 1em;
	position: relative;
    cursor: pointer;
}
/* 黒丸 */
.outline_ttl::before {
    content: "";
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
}
/* ＋の横棒 */
.outline_ttl::after {
    content: "";
    position: absolute;
    right: calc(1em + 5px);
    top: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
}
/* ＋の縦棒 */
.outline_ttl span.plus {
    position: absolute;
    right: calc(1em + 9px);
    top: 50%;
    width: 2px;
    height: 10px;
    background: #fff;
    transform: translateY(-50%);
}
/* 開いた時 → 縦棒を消す（＝マイナス） */
.outline_ttl.active span.plus {
    display: none;
}
.outline_contents{
	display: none;
}

.outline_table {
	border-top: 1px solid #eee;
	font-size: 1.4rem;
	line-height: 1.4;
	width: 100%;
}
.outline_table tr {
	border-bottom: 1px solid #eee;
}
.outline_table th {
    padding: 2% 2%;
    vertical-align: top;
    font-weight: 500;
    text-align: left;
}
.outline_table._01 th {
    width: 50%;
}

.outline_table._02 th {
    width: 35%;
}
.outline_table td {
	padding: 2% 2%;
	text-align: left;
	vertical-align: top;
	font-weight: 500;
}
.outline_box {
    padding: 3%;
    border: 1px solid #000;
}
@media screen and (max-width: 768px){
	.outline_table._01 th,.outline_table._02 th {
		width: 38%;
	}
}
@media screen and (max-width: 599px){
	.outline_table {
		font-size: 1.2rem;
	}
	.outline_contents .gap3,
	.outline_contents2 .gap3{
		gap: 0!important;
	}

	.outline_contents .flex > div:nth-child(2) .outline_table,
	.outline_contents2 .flex > div:nth-child(2) .outline_table{
		border-top: unset;
	}
}/*END*/
/*----------------------------------------
	contact
----------------------------------------*/
.contact_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
    gap: 6%;
    width: 80%;
    margin-inline: auto;
}
.contact_p img {
    max-width: 346px;
    width: 70%;
}
@media screen and (max-width: 599px){
	.contact_grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
		width: 75%;
	}
}
/*----------------------------------------
	footer
----------------------------------------*/
footer nav {
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
}

footer nav li {
    position: relative;
    padding: 0 15px;
    line-height: 2;
    font-size: 16px;
}
footer nav li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    height: 1em;
    border-right: 1px solid #000;
}
.footer_logo img{
    max-width: 249px;
	aspect-ratio: 249/76;
	width: 100%;
}
small{
	display: block;
	text-align: center;
	font-size: 1.2rem;
	padding-top: 20px;
	padding-bottom: 20px;
}