@import url('https://fonts.cdnfonts.com/css/akrobat');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');

@charset "utf-8";

/* header
---------------------------------------- */
body {
	margin:0;
	padding:0;
	font-family:"Noto Sans JP", Osaka, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ Ｐゴシック', 'MS PGothic';
	line-height:1.8;
	color:#646464;
	font-size: 16px;
	vertical-align:top;
	background-color:#ffffff;
	-webkit-text-size-adjust:100%;
	word-wrap:break-word;
}

@media screen and (max-width:720px){
	body {
		font-size:14px;
	}
}
a        {transition:all 0.3s linear;}
a:link   {color:#00326e;text-decoration:underline;}
a:visited{color:#00326e;text-decoration:underline;}
a:hover  {color:#ff6400;text-decoration:none;}
a:active {color:#00326e;text-decoration:underline;}


p:has(.btn),
div.btn{
	position:relative;
	clear:both;
	margin:15px auto;
	padding:15px;
	background-color:#f1f1f1;
	overflow:visible;
}
div#contents a.btn,
.form div#contents div.btn input[type="button"].btn,
.form div#contents div.btn button.btn{
	width:480px;
	max-width:100%;
	margin:0 auto;
	padding:15px 0;
	color:#fff;
	border:none;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	background-color:orange;
}
div#contents a.btn:hover,
.form div#contents div.btn input[type="button"].btn:hover,
.form div#contents div.btn button.btn:hover{
	background-color:#ff6400;
}
@media screen and (max-width:1144px){
	p:has(.btn),
	div.btn{
		width:calc(100% - 30px);
	}
}



/* structure
---------------------------------------- */
div#header,
div#footer{
	clear:both;
	width:90%;
	position:relative;
	margin:0 auto;
	padding:0;
	overflow:hidden;
	transition:all 0.3s linear;
}
div#header{
	padding:30px 5%;
	overflow:visible;
	background-color:#fff;
}
div#footer{
	width:100%;
}
div#container{
	width:auto;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}
div#contents{
	width:90%;
	clear:both;
	margin:0 auto 180px;
	padding:0 5%;
	transition:all 0.3s linear;
}


@media screen and (max-width: 1054px) {
	div#contentss {
		margin: 0 0 90px;
	}
}
@media screen and (max-width: 720px) {
	div#footer{
		clear:both;
		width:100%;
		position:relative;
		margin:0 auto;
		padding:30px 0 0;
		overflow:hidden;
	}
}
@media screen and (max-width: 540px) {
	div#header{
		padding-top:15px;
	}
}

/* header
---------------------------------------- */
div#header.open{
	height:60px;
}
a.logo{
	width:214px;
	height:58px;
	display:block;
	background:url(../img/logo.png) no-repeat center center / 100% auto;
	transition:all 0.1s linear;
}
a.logo:hover{
	background-size:90% auto;
}
div#header.open a.logo{
	position:fixed;
	top:10px;
	z-index:99999;
}
/* site_ttl */
h1#site_ttl{
	padding:3px 30px;
	color:#fff;
	font-size:14px;
	text-align:center;
	background-color:#ff7f17;
}
/* function */
div#header div.function{
	width:calc(12.6em + 142px);
	height:60px;
	position:absolute;
	top:35px;
	right:30px;
	vertical-align:center;
}
div#header.open div.function{
	height:auto;
	position:fixed;
	top:0;
	right:0;
	padding:15px 30px;
	z-index:9999;
	background-color:#fff;
}
div#header.transform div.function,
div#header.transform.open div.function{
	height:50px;
	position:fixed;
	top:0;
	right:0;
	padding:15px 30px;
	background-color:#fff;
	z-index:10;
}
div#header.transform.open div.function{
	z-index:11;
}
@media screen and (max-width:720px){
	div#header div.function{
		width:calc(14.4em + 140px);
	}
}
@media screen and (max-width:640px){
	div#header.open{
		height:60px;
	}
	div#header div.function{
		height:50px;
		position:static;
		margin:0 auto;
	}
	div#header.transform div.function{
		padding:15px calc(50% - 7.2em - 70px);
	}
}
@media screen and (max-width: 420px) {
	div#header.transform div.function {
		padding: 15px 5px;
		width: calc(100% - 10px);
	}
}

/* tel */
span.tel {
	max-width:200px;
	float:left;
	display:block;
	margin-right:15px;
	padding-left:20px;
	font-size:12px;
	line-height:1;
	background:url(../img/icon_tel.png) no-repeat left top 5px;
}
span.tel a{
	display:block;
	margin-top:-0.1em;
	margin-bottom:5px;
	font-family: 'Akrobat Bold', sans-serif;
	font-size:40px;
	text-decoration:none;
	line-height:0.9;
}
@media screen and (max-width:540px){
	div#header div.function span.tel {
		margin-top:2px;
	}
}
@media screen and (max-width:420px){
	div#header div.function {
		 width:100%;
		 padding:15px 0;
	}
	div#header div.function #btn_menu{
		position:absolute;
		right:5px;
	}
	div#header div.function a.inquiry{
		position:absolute;
		right:50px;
	}
	div#header div.function span.tel {
		font-size: 3.5vw;
	}
	div#header div.function span.tel a {
		font-size: 9.8vw;
	}
}

/* inquiry */
div#header a.inquiry{
	width:50px;
	height:50px;
	position:relative;
	float:left;
	display:block;
	margin-right:10px;
	background-color:#ff7f17;
	transition:all 1s ease;
}
div#header a.inquiry:before{
	width:100%;
	content:"";
	position:relative;
	display:block;
	padding-top:100%;
	background:url(../img/icon_inquiry.svg) no-repeat center center;
	background-size:50% auto;
	transition:all 0.6s ease;
}
div#header a.inquiry:hover{
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	filter: drop-shadow(0 0 16px rgba(255,165,0,1));
}
div#header a.inquiry:hover:before{
	transform: rotateZ( 360deg ) ;
}
/* transform */
@media screen and (max-width:1054px){
	h1#site_ttl{
		padding:2px 30px 0;
		font-size:12px;
	}
}
@media screen and (max-width:640px){
	div#header {
		padding: 10px 5%;
	}
	h1#site_ttl{
		font-size:10px;
	}
	div#header a.logo {
		margin: 0 auto 10px;
	}
}


/* btn_menu
---------------------------------------- */
#btn_menu {
	width:50px;
	height:50px;
	position:relative;
	float:right;
	display:block;
	background-color:#ff7f17;
	transition:all 1s ease;
	cursor:pointer;
	z-index:99999;
}
#btn_menu:before,
#btn_menu:after{
	width:16px;
	content:"";
	position:absolute;
	display:block;
	transition:all 0.3s ease;
	transform: rotateZ( 0deg ) ;
}
#btn_menu:before{
	height:3px;
	top:25px;
	left:18px;
	border-radius:1.5px;
	-webkit-border-radius:1.5px;
	-moz-border-radius:1.5px;
	-ms-border-radius:1.5px;
	background-color:#ffffff;
}
#btn_menu:after{
	height:11px;
	top:18px;
	left:18px;
	border-top:3px #ffffff solid;
	border-bottom:3px #ffffff solid;
}
#btn_menu:hover{
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	filter: drop-shadow(0 0 16px rgba(255,165,0,1));
}
#btn_menu:hover:before,
#btn_menu:hover:after{
	transform: rotateZ( 180deg ) ;
}
div#header.open p#btn_menu{
	z-index:10;
}
div#header.open p#btn_menu:before{
	transform:rotate(45deg);
}
div#header.open p#btn_menu:after{
	height:3px;
	top:25px;
	border-top:none;
	border-bottom:none;
	background-color:#ffffff;
	transform:rotate(-45deg);
}
@media screen and (max-width: 990px) {
	#btn_menu {
		display:block;
	}
}
@media screen and (max-width: 510px) {
	div#header{
		padding:10px 5%;
		transition:all 0.3s linear
	}
	div#header.transform.hide{
		top:-120px;
		transition:all 0.3s linear
	}
	div#header.transform.hide h1#logo,
	div#header.transform.hide #subnavi{
		opacity:0;
	}
}
@media screen and (max-width: 420px) {
	div#header{
		width:calc(100% - 10px);
		padding:10px 5px;
	}
}


/* gnavi
---------------------------------------- */
div#gnavi{
	height:0;
	position:fixed;
	transition:all 0.3s linear;
	z-index:10;
	opacity:0;
	overflow:hidden;
}
div#header.open div#gnavi{
	width:90vw;
	height:calc(100vh - 10vw);
	top:0;
	left:0;
	padding:90px 5vw 5vw;
	opacity:1;
	background:rgba(0,0,0,0.75);
	overflow:auto;
}
div#header.open div#gnavi ul.property_list{
	margin-bottom:0;
}
div#header.open div#gnavi ul.property_list li{
	width:200px;
	margin:0 5px 30px;
}


/* ttl
---------------------------------------- */
div#contents h1.ttl{
	width:calc(100vw - 60px);
	position:relative;
	margin:0 0 2px calc(-50vw + 50%);
	padding:30px;
	color:#fff;
	font-size:32px;
	text-align:center;
	background:rgba(0,0,0,0.5);
	overflow:hidden;
}
div#contents h1.ttl:before{
	width:100%;
	height:120px;
	content:"";
	position:absolute;
	top:0;
	display:block;
	background:url(../img/top/header_second.webp) no-repeat left center / cover;
	z-index:-1;
}
@media screen and (max-width:540px){
	div#contents h1.ttl {
		font-size: 24px;
	}
}


/* property_list
---------------------------------------- */
ul.property_list{
	display:flex;
	flex-wrap:wrap;
	margin-bottom:60px;
}
ul.property_list li{
	width:calc(25% - 22.5px - 30px);
	position:relative;
	max-width:400px;
	margin:0 30px 30px 0;
	padding:15px 15px calc(1.4em + 20px + 30px);
	background-color:#fff;
}
ul.property_list li:nth-child(4n){
	margin-right:0;
}
ul.property_list li:before{
	width:calc(100% + 30px);
	content:"";
	display:block;
	margin:-15px 0 0 -15px;
	padding-top:calc(65.83% + 30px * 0.6583 + 15px);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:100% auto;
}
div#gnavi ul.property_list li:nth-child(1):before,
div#contents ul.property_list li.no1:before{background-image:url(../../property/img/01/1.webp);}
div#gnavi ul.property_list li:nth-child(2):before,
div#contents ul.property_list li.no2:before{background-image:url(../../property/img/02/1.webp);}
div#gnavi ul.property_list li:nth-child(3):before,
div#contents ul.property_list li.no3:before{background-image:url(../../property/img/03/1.webp);}
div#gnavi ul.property_list li:nth-child(4):before,
div#contents ul.property_list li.no4:before{background-image:url(../../property/img/04/1.webp);}
div#gnavi ul.property_list li:nth-child(5):before,
div#contents ul.property_list li.no5:before{background-image:url(../../property/img/05/1.webp);}
div#gnavi ul.property_list li:nth-child(6):before,
div#contents ul.property_list li.no6:before{background-image:url(../../property/img/06/1.webp);}
div#gnavi ul.property_list li:nth-child(7):before,
div#contents ul.property_list li.no7:before{background-image:url(../../property/img/07/1.webp);}
div#gnavi ul.property_list li:nth-child(8):before,
div#contents ul.property_list li.no8:before{background-image:url(../../property/img/08/1.webp);}
div#gnavi ul.property_list li:nth-child(9):before,
div#contents ul.property_list li.no9:before{background-image:url(../../property/img/09/1.webp);}
div#gnavi ul.property_list li:nth-child(10):before,
div#contents ul.property_list li.no10:before{background-image:url(../../property/img/10/1.webp);}
div#contents ul.property_list li:nth-child(11):before,
div#contents ul.property_list li:nth-child(12):before{background-image:url(../img/noimg.png);}


ul.property_list li a{
	display:block;
	margin-bottom:15px;
}
ul.property_list li p{
	font-size:14px;
}
div#contents ul.property_list li a.btn,
div#gnavi ul.property_list li a.btn{
	width:100%;
	position:absolute;
	bottom:0;
	display:block;
	margin-left:-15px;
	margin-bottom:0;
	color:#fff;
	text-align:center;
	border:none;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	background-color:#ff7f17;
}
div#gnavi ul.property_list li a.btn{
	width:calc(100% - 30px);
}
ul.property_list li a.btn:hover{
	background-color:orange!important;
}
@media screen and (max-width:1280px){
	ul.property_list li{
		width:calc(33.33% - 20px - 30px);
	}
	ul.property_list li:nth-child(4n){margin-right:30px;}
	ul.property_list li:nth-child(3n){margin-right:0;}
}
@media screen and (max-width:820px){
	ul.property_list li{
		width:calc(50% - 7.5px - 30px);
		margin-right:15px;
	}
	ul.property_list li:nth-child(4n){margin-right:15px;}
	ul.property_list li:nth-child(3n){margin-right:15px;}
	ul.property_list li:nth-child(2n){margin-right:0;}
}
@media screen and (max-width:540px){
	ul.property_list li p{
		font-size:12px;
	}
}
@media screen and (max-width:420px){
	ul.property_list li{
		width:calc(100% - 30px);
		margin-right:0!important;
	}
}


/* pagenavi
---------------------------------------- */
ul#pagenavi{
	max-width:1024px;
	margin:0 auto 60px;
}
ul#pagenavi li{
	margin-right:10px;
	padding-left:10px;
	background:url(../img/arr2.png) no-repeat left center;
}
ul#pagenavi li:first-child{
	padding-left:20px;
	background:url(../img/icon_home.png) no-repeat left center;
}



/* footer
---------------------------------------- */
div#footer h1.ttl{
	padding:5px 15px 3px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	background-color:#3c3c3c;
}
div#footer div.inner{
	width:calc(214px + 15px + 12.6em + 20px);
	margin:0 auto;
	padding:15px calc(50% - 107px - 7.5px - 6.3em + 10px);
	overflow:hidden;
	background-color:#fff;
}
div#footer div.inner a.logo{
	float:left;
}
div#footer div.inner span.tel{
	float:right;
	margin:9px 0 0;
}
div#footer ul{
	max-width:1024px;
	margin:0 auto;
	padding: 30px calc(50% - 512px);
	background-color:#3c3c3c;
}
div#footer ul li{
	margin:15px auto;
	padding-left:15px;
	background:url(../img/arr.png) no-repeat left center;
}
div#footer ul li a{
	color:#fff;
}
div#footer ul li a:hover{
	color:orange;
}

div#footer small{
	display:block;
	padding:15px;
	color:#fff;
	text-align:center;
	background-color:#000;
}
@media screen and (max-width:1084px){
div#footer ul{
		padding: 30px 60px;
	}
}
@media screen and (max-width:1054px){
	div#footer ul li{
		margin-top:10px;
		margin-bottom:10px;
	}
	div#footer ul li a{
		font-size:14px;
	}
}
@media screen and (max-width:760px){
	div#footer h1.ttl{
		font-size:18px;
	}
	div#footer div.inner {
		width: 100%;
		padding: 15px 0;
	}
	div#footer div.inner a.logo,
	div#footer div.inner span.tel {
		display:block;
		float: none;
		margin:0 auto;
	}
	div#footer div.inner a.logo{
		margin-bottom:15px;
	}
	div#footer ul {
    	padding: 30px;
	}
	div#footer ul li {
		margin-top: 15px;
		margin-bottom: 15px;
	}
}
@media screen and (max-width:540px){
	div#footer h1.ttl{
		font-size:16px;
	}
	div#footer ul {
    	padding: 15px;
	}
}