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

html{
    font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	font-size:62.5%;
	color: var(--color-gray);
	-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;
}
.embed{
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
}

.max_respon{max-width: 100%;}
.bg_white{
	background-color: #fff;
}
:root{
	--color-green: #7f9b87;
	--color-darkgreen: #4c6a54;
	--color-lightgray: #e0e4e2;
	--color-gray: #3a3a3a;
}
.bg01{
	background: var(--color-lightgray);
}
.bg02{
	background: var(--color-green);
}

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

p{ 
	line-height: 2; 
}

.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;
}
.inner_frame1220 {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
	padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
.point_ttl {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 390px;
}

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;
}
.f_right{
	float: right;
}
#container{ overflow: hidden; }
.ttl_300{
	max-width: 300px;
	width: 70%;
}
.ttl_400{
	max-width: 400px;
	width: 100%;
}
.ttl_500{
	max-width: 500px;
	width: 100%;
}
.nowrap{
	white-space: nowrap;
}
.ttl_center{
	margin-left: auto;
	margin-right: auto;
}
.z_0{
	z-index: 0;
}
.z_1{
	z-index: 1;
}
.block{
	display: block;
}
.flex{
	display: flex;
}
.flex > div{
	width: 50%;
}
.al_center{
	align-items: center;
}
.space_b{
	justify-content: space-between;
}
.grid3{
	display: grid;
	grid-template-columns: repeat(3,1fr);
}
.w40{
	width: 40%!important;
}
.w60{
	width: 60%!important;
}
.gap3{
	gap: 3%;
}
.gap4{
	gap: 4%;
}
.gap1{
	gap: 1%;
}
@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 ,.inner_frame1220{
		padding-right: 3%;
		padding-left: 3%;
	}
	.w40{
		width: 50%!important;
	}
	.w60{
		width: 50%!important;
	}
	.point_ttl{
		width: 70%;
	}
	#point02 .point_ttl{
		width: 65%;
	}

}/*END*/

@media screen and (max-width: 599px){
	.text_center{ text-align:left; }
	.sp_palt{font-feature-settings: "palt";}
	.inner_frame,.inner_frame1220{
		padding-right: 4.5%;
		padding-left: 4.5%;
	}
	.point_ttl{
		width: 60%;
	}
	.sp_left{
		text-align: left;
	}
	.pc_br{
		display: none;
	}
	.sp_none{
		display: none !important;
	}
	.flex{
		flex-direction: column;
	}
	.flex.reverse{
		flex-direction: column-reverse;
	}
	.flex > div,.w40,.w60{
		width: 100%!important;
	}
	.grid3{
		grid-template-columns: repeat(1,1fr);
	}
	.gap4{
		gap: 30px;
	}
	.gap4._sp{
		gap: 20px;
	}
	.gap3{
		gap: 20px;
	}
	.gap1{
		gap: 10px;
	}
	.sp_mt_none{
		margin-top: 0px!important;
	}
}/*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: 400px;
        width: 80%;
    }
}
/*----------------------------------------
	concept
----------------------------------------*/
.concept_deco{
    color: #9ca9a0;
    font-size: clamp(6rem, 9.25vw, 18.0rem);
    line-height: 0.8;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 26%;
    opacity: 0.1;
    width: 100%;
}
.concept_flex{
	display: flex;
	justify-content: end;
	gap: 3%;
}
.concept_flex div:nth-child(1) {
    width: 40%;
}
.concept_flex div:nth-child(2) {
    width: 45%;
}
@media screen and (max-width: 1000px){
	.concept_flex div:nth-child(1) {
		width: 50%;
	}
	.concept_flex div:nth-child(2) {
		width: 50%;
	}
}
@media screen and (max-width: 599px){
	.concept_flex{
		flex-direction: column-reverse;
		gap: 30px;
	}
	.concept_flex div:nth-child(1) {
		width: 100%;
	}
	.concept_flex div:nth-child(2) {
		width: 100%;
	}
}

/* point_nav */

.point_nav{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5%;
}
.point_nav li{
	background: var(--color-green);
}
.point_nav li a{
	display: block;
	position: relative;
	border-radius: 10%;
	overflow: hidden;
}
.point_nav li a::after{
	content: "";
	position: absolute;
	left: 50%;
	top: 72%;
	transform: translateX(-50%);
	width: 16px;
	height: 16px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateX(-50%) rotate(-45deg);
	transition: all 0.4s;
}

.point_nav li a:hover::after{
	top: 75%;
}
@media screen and (max-width: 1000px){
	.point_nav li a::after {
		top: 65%;
		width: 10px;
		height: 10px;
	}
}
@media screen and (max-width: 599px){
	.point_nav {
		gap: 2%;
	}
	.point_nav li a::after{
        width: 5px;
        height: 5px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
	}
}
/*----------------------------------------
	point
----------------------------------------*/
.point_frame img {
    max-width: 200px;
    width: 20%;
}
.point_frame{
	text-align: center;
}
#point01 .point_frame{
	background: url(../images/point01_bg.jpg);
	background-size: cover;

}
#point02 .point_frame{
	background: url(../images/point02_bg.jpg);
	background-size: cover;

}
#point03 .point_frame{
	background: url(../images/point03_bg.jpg);
	background-size: cover;
}
@media screen and (max-width: 599px){
	.point_frame img {
		width: 35%;
	}
}
/*----------------------------------------
	landplan
----------------------------------------*/
#landplan .c_width {
    width: 74%;
	font-feature-settings: "palt";
}
@media screen and (max-width: 1000px) {
	#landplan .c_width {
		width: 100%;
	}
}/*END*/
/*----------------------------------------
	location
----------------------------------------*/
#location h4 {
    font-family: "EB Garamond", serif;
    font-style: italic;
    font-size: clamp(2rem, 2.8vw, 3rem);
    color: #fff;
    font-weight: normal;
}
#location .bg01 h4 {
    background: var(--color-green);
    padding: 10px 20px;
    max-width: 290px;
    width: 80%;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    box-sizing: border-box;
}
.location_list{
	width: 80%;
	box-sizing: border-box;
}
.location_list li{
	border-bottom: 1px solid #b2b2b2;
	padding: 1.3em 0;
}
.location_point_box{
    background-color: var(--color-lightgray);
    color: var(--color-gray);
    padding: 2em 10px;
    text-align: center;
}
.emphasis {
    position: relative;
    display: inline-flex;
    align-items: end;
    gap: 12px;
}
.emphasis::before, .emphasis::after {
    content: "";
    width: 35px;
    height: 1px;
    background: #fff;
    display: inline-block;
    margin-bottom: 4%;
}

.emphasis::before {
	transform: rotate(45deg);
}

.emphasis::after {
	transform: rotate(-45deg);
}
@media screen and (max-width: 1000px){
	#location .grid3.gap4{
		gap: 2%;
	}
} 
@media screen and (max-width: 768px){
	#location .grid3.gap4{
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}
}
@media screen and (max-width: 599px){
	.location_list {
		width: 100%;
	}
	#location .grid3.gap4{
		grid-template-columns: repeat(1, 1fr);
		gap: 25px;
	}
	#location .bg01 h4 {
		padding: 7px 15px;
	}
} 
/*----------------------------------------
	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;
    background-size: 100%;
    background: var(--color-green);
    color: #fff;
    padding: 1em 3em;
}
.plan_tab li.active{
	background: var(--color-darkgreen);
}
.plan_contents {
    background: #e0e4e3;
    box-sizing: border-box;
    padding: 6%;
    display: none;
}
.plan_contents.active{
	display: block;
}
.plan_contents h4 img{
	max-width: 400px;
	width: 100%;
}
.plan_list li{
	padding: 2em 0;
	border-bottom: 1px solid #b2b2b2;
}
.plan_list h5{
	color: var(--color-darkgreen);
}
@media screen and (max-width: 768px){
	.plan_contents {
		padding-left: 4%;
		padding-right: 4%;
	}

}/*END*/
@media screen and (max-width: 599px){
	.plan_tab li {
		padding: 3% 8%;
	}

}/*END*/

/*----------------------------------------
	performance
----------------------------------------*/
.spec_point{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
}
/*----------------------------------------
	support
----------------------------------------*/
@media screen and (max-width: 599px) {
	#support .flex h4 {
        text-align: center;
    }
    #support .gap4 {
        gap: 16px!important;
    }
	#support .gap3{
		gap: 35px!important;
	}
}

/*----------------------------------------
	outline
----------------------------------------*/
.outline_ttl {
    background: #fff;
    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: 25%;
}
.outline_table._03 th {
    width: 35%;
}
.outline_table td {
	padding: 2% 2%;
	text-align: left;
	vertical-align: top;
	font-weight: 500;
}
@media screen and (max-width: 768px){
	.outline_table._01 th,.outline_table._02 th,.outline_table._03 th {
		width: 40%;
	}
}
@media screen and (max-width: 599px){
	.outline_contents .gap3{
		gap: 0!important;
	}
	.outline_contents2 .gap3{
		gap: 0!important;
	}
	.outline_contents .flex > div:nth-child(2) .outline_table{
		border-top: unset;
	}
	.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;
    gap: 1.5%;
    justify-content: center;
}

.footer_nav li {
	position: relative;
	padding: 0 10px;
	line-height: 2;
	font-size: 16px;
}

.footer_nav li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -7.5%;
    transform: translateY(-50%);
    height: 1em;
    border-right: 1px solid #000;
}

.f_logo {
    width: 70%;
    max-width: 235px;
}
small{
	display: block;
	text-align: center;
	font-family: 'Noto Sans JP', 'Helvetica Neue', 'Segoe UI', sans-serif;
	background: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
}
@media screen and (max-width: 768px){
	.footer_nav {
		gap: 1%;
	}
	.footer_nav li:not(:last-child)::after {
		right: -3%;
	}
}
@media screen and (max-width: 599px){

	small{
		font-size: 1.2rem;
	}

}/*END*/