@charset "UTF-8";
/* CSS Document */

/* Default style clear----------------------------------------------------------- */
@import "reset.css";
/* -----------------------------------------------------------Default style clear */

/* 文字、リンク色 --------------------------------------------------------------- */

a:link{text-decoration:none;color:#543428;}
a:visited{text-decoration:none;color:#543428;}
a:hover{text-decoration:underline;color:#543428;}
a:active{text-decoration:none;color:#543428;}

/* ----------------------------------------------------- 文字、リンク色 */


/* レイアウト ----------------------------------------------------------- */


body{
	margin:0;
	padding:0;
	font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	color:#231815;
	/*line-height: 1.8;*/
	background:#efebe0;
}

img{
	max-width:100%;
	height:auto;
}

*{
	box-sizing:border-box;
}

/*コンテンツ左右余白*/
@media(max-width:1279px) {
main,footer,.aboutus{
	padding:0 5px;
}
}

/*テキスト中央*/
.cent{
	text-align: center;
}


/*横並び*/
.col{
	display:flex;
	flex-wrap:wrap;
	align-items: flex-start;
	gap:30px;
}




/*変数定義*/
:root {
	--space＿large: 5rem;/*余白大*/
	--space＿medium: 2.5rem;/*余白中*/
	--space＿small: 1.25rem;/*余白小*/
	--space＿tiny: 0.8rem;/*余白、より小さい*/
	--font_exlarge:3rem;/*フォント特大*/
	--font_large:1.5rem;/*フォント大*/
	--font_sign:Yu Mincho,"メイリオ",meiryo,"游明朝",YuMincho,"游明朝体";
	 
}




/*コンテンツ中央*/
  /* 画面幅が1300px以上のときに適用 */
@media(min-width:1300px) {
.wrap{
	width:1280px;
	margin:auto;
}
	
/*お問い合わせフォームボタン*/
.to-contact a{
	display:block;
	 writing-mode: vertical-rl;
	position:fixed;
	top:30%;
	right:0;
	z-index: 1;
	padding:30px 15px;
	background:#ed7300;
	color:#fff;
	font-weight:bold;
	border-radius:10px 0 0 10px;
}	
	
}

/*コンテンツ間の余白*/
main > section,.top,.insta-wrapper,aside.sns{
	margin-bottom:var(--space＿large) !important;
}
	
/*見出し 共通*/
h2{
	font-size:clamp(1.5rem, 1.345rem + 0.66vw, 1.875rem);/*24px-30px*/
	margin-bottom:var(--space＿medium);
	text-align:center;
}


h2,h3,h4{
	font-weight:600;
	color:rgba(35,24,21,0.8);
	margin-bottom:var(--space＿small);

}

/*wbr用*/
.warranty h3,.reason h2{
	word-break: keep-all;
	overflow-wrap: break-word;

}
	


/*ボタンデザイン*/

.btn,.re-btn{
  display: flex;
	justify-content: center;
	flex-wrap:wrap;
	gap:10px;
	margin-top:var(--space＿medium);
	margin-bottom:var(--space＿medium);
	/*width: 100vw;親要素をはみ出して表示
	margin-left: calc(50% - 50vw);/*親要素をはみ出して表示*/
}

.btn a{
	width:250px;
}

.btn li a,.re-btn li a{
  position: relative;
  display: block;
	/*width:180px;	*/
  padding:var(--space＿tiny) 0;
  background-color: #fff;
  border: 1px solid rgba(35,24,21,1);
	border-radius:10px;	
  color: #f15a4a;
  text-align: center;
  overflow: hidden;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
	color:inherit;
	z-index: 1;
}


.btn span:after,.re-btn span:after{
	content: '';
    border: 0;
    border-top: solid 1px;
    border-right: solid 1px;
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(45deg);
	transition: all 0.2s;	
}

.btn li a::after,
.btn li a::before,
.re-btn li a::after,
.re-btn li a::before{
  position: absolute;
  display: block;
  content: "";
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.btn li a:hover::after,.re-btn li a:hover::after {
  top: 0;
  left: 0;
  background-color: rgba(35,24,21,0.15);
}

.btn li a::after,.re-btn li a::after {
  top: 0;
  left: -250px;
  width: 100%;
  height: 100%;
}



/*ナビゲーション*/
/* header */
#top-head {
	position: fixed;
    top:0;
	left:0;
    width: 100%;
    z-index: 999;
	display:flex;
	justify-content: space-between;
}


#global-nav  ul:not(.sub-nav) {
	display:flex;
	font-weight:900;
	align-items: center;
}

#global-nav > ul a{
	margin-left:20px;
	transition:linear 0.3s all;
}

#global-nav > ul a:hover{
	margin-left:20px;
	color:#ed7300;
}


/* (売地、売家サブメニュー) */

#global-nav > ul li ul {
	font-size:85%;
	font-weight:normal;
}

.sub-nav ul {
	display: none !important;       /* 標準では非表示 */
	position: absolute;  /* 絶対配置 */
}

.sub-nav:hover ul {
	display: block !important; /* マウスポインタが載っている項目の内部リストを表示 */
}


.sub-nav li {
	width: 170px;
	margin:5px 0;
}

/*リストに「▶︎」を付ける*/
.sub-nav > a::after{/*子階層*/
    border: 5px solid transparent;
    border-top: 5px solid;
    content: "";
    position: relative;
    top: 1rem;
    transform: translateY(-40%);
	margin-left:10px;
}

.sub-nav ul{
	background:rgba(255,255,255,1);
}

.sub-nav ul a{
	display:block;
}

/*SNSアイコン*/
#global-nav ul.icon li a{
	margin-left:5px !important;
}

#global-nav ul.icon li img{
	border-radius:10px;
}


#global-nav ul.icon{
	margin:10px 0 0 20px;
}





/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    /*cursor: pointer;*/
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

@media screen and (max-width: 1279px) {
   #top-head {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }

    #mobile-head {
        background: #fff;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }

    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -1800px;
        background: #333;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
		height:100dvh;
		overflow:auto;
    }
    #global-nav ul {
        flex-direction:column;
        position: static;
    }
	
	
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        display: block;
        color: #fff;
        padding: 15px 0;
		margin:0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(1856px);
        -webkit-transform: translateY(1856px);
        transform: translateY(1856px);
    }
	
	/*サブナビ背景*/
	.sub-nav ul{
	background-color: inherit;
}
	
	
		/*SNSアイコン*/
#global-nav ul.icon{
	margin:0 !important;
	flex-direction: row;
	gap:10px;
}
	
/*お問い合わせフォームボタン*/
.to-contact a{
	display:none;
	z-index:999999;
}	
}


header{
	background:rgba(255,255,255,.8);
	position: relative;
	z-index:99;
	/*padding:5px;*/
}

.logo{
	width:clamp(11.25rem, 8.919rem + 9.94vw, 16.875rem);
	margin:5px 0;
}


/*index.html------------------------------------------------------*/


body.home{
	display:flex;/*order用*/
	flex-flow: column;	/*order用*/
}



.top{
	height:100vh;
	order:-1;
	position: relative;
	overflow: hidden;
}

/*下層ページ*/
.topbar{
	height:clamp(7.5rem, 5.946rem + 6.63vw, 11.25rem);/*180px-120px*/
	background-blend-mode:lighten;
	background-image:url("../images/topbar.webp");
	background-color:rgba(255,255,255,0.6);
	background-position: bottom;
	background-size: cover;
	display: grid;
	place-content: center;
	margin-bottom:var(--space＿medium);
}



.topbar h1{
	font-size:clamp(2rem, 1.793rem + 0.88vw, 2.5rem);/*40px-32px*/
	text-shadow:3px 3px 5px #fff,
    -3px 3px 5px #fff,
    -3px -3px 5px #fff,
    3px -3px 5px #fff;
	font-weight:500;
}




/*キャッチフレーズ*/
.top strong{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -25%);
	z-index:9;
	clip-path: inset(0 100% 0 0);
    display: inline-block;
    animation: textanimation 3s 1s forwards;
	/*color:#000;*/
	text-shadow:3px 3px 5px #fff,
    -3px 3px 5px #fff,
    -3px -3px 5px #fff,
    3px -3px 5px #fff;
	font-size:clamp(1.25rem, 0.732rem + 2.21vw, 2.5rem);/*20px-40px*/
	font-weight:600;
	white-space: nowrap;
	text-align: center;
	letter-spacing:5px;
}



@keyframes textanimation {
    0% {
        clip-path: inset(0 0 100% 0);
    }

	100% {
		clip-path: inset(0) ;
    }
}


/*トップスライダー*/
.TOPslider{
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

@media screen and (max-width:428px) {
	.top,.TOPslider{
		height: 50vh;
	}
}



/* スライダー画像 */
.TOPslider .image{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ①スライド画像
  表示する画像を定義*/
.TOPslider .image:nth-of-type(1){
  background-image: url("../images/topimg01.webp");
	animation-delay: 0;
}
.TOPslider .image:nth-of-type(2){
  animation-delay: 5s;
  background-image: url("../images/topimg02.webp");
}
.TOPslider .image:nth-of-type(3){
  animation-delay: 10s;
  background-image: url("../images/topimg03.webp");
}




/*  ②アニメーション設定
  animation-durationのみ変更*/
.TOPslider .image{
  animation-name: anime;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-duration:15s; /*①で設定したanimation-delayを合計を挿入 */
}

/* アニメーション定義 */
@keyframes anime {
0%, 60%, 100% { opacity: 0; } /* 非表示のタイミングを設定 */
	10%, 30% { opacity: 1; } /* 表示されるタイミングを設定 */
}


/*スクロールダウン*/

.scroll_down{
  position:absolute;
  bottom: 0px;
  left: 50%;
}

.scroll_down a{
  position: absolute;
  left: 10px;
  bottom: 57px;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:#fff;
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove{
  0%{bottom:130px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:2px;
  height: 130px;
  background:#fff;
}


/*pick up*/

.pickup{
	max-width:1030px;
	margin:auto;
}

.pickup ul:not(.btn){
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(175px,1fr));
	justify-content: center;
	gap: 10px;
}


.pickup ul:not(.btn) li{
	position:relative;
	font-size:0.8rem;
	/*background:#cecece;*/
}

.pickup ul:not(.btn) li img {
  max-width: 100%;
  object-fit: cover;
  display: block;
  width: 100%;
  height: auto;
aspect-ratio: 250 / 313;
}








#slide01 li{
	margin:0 5px;
	font-size:0.8rem;
}


/*News*/
.news ul{
	height:200px;
	overflow: auto;
	width:100%;
	border: 3px solid #d1d1d1;
	padding:10px;
	background:#fff;
}

.news li:not(:first-child){
	border-top:#cecece 1px dashed;
}

.news li{
	padding:10px;
	position: relative;
}

/*マーク*/

.news li time::after{
	content:"";
	display:inline-block;
	padding:0 5px;
	font-weight:700;
	color:#fff;
	font-size:75%;
	margin:0 10px;
	position: relative;
	top: -5px;
}

.news li.m-event time::after{
	content:"イベント";
	background:#ff9c00;
}
.news li.m-update time::after{
	content:"更新情報";
	background:#527c00;
}
.news li.m-info time::after{
	content:"お知らせ";
	background:#ff4ad7;
}



/*concept*/

.concept > p{
	font-size:clamp(1.125rem, 1.073rem + 0.22vw, 1.25rem);/*18px-20px*/
	word-break: keep-all;
	overflow-wrap: break-word;
}


.concept ul{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	justify-content: center;
	gap: 10px;
	margin:var(--space＿small) auto;
	color:#fff;
	text-shadow:3px 3px 5px #393939,
    -3px 3px 5px #393939,
    -3px -3px 5px #393939,
    3px -3px 5px #393939;
	font-weight:500;
	gap:10px;
}


@media screen and (max-width:767px) {
	.concept ul{
	grid-template-columns:1fr;
	}
}

.concept h3{
	margin-bottom:10px;
	font-size:var(--font_large);
	color:#fff;
	line-height: 1.4;
}


.concept ul li:nth-child(1){
		background:url("../images/concept01.webp") center;
		
}

.concept ul li:nth-child(2){
		background:url("../images/concept02.webp") center;
}

.concept ul li:nth-child(3){
		background:url("../images/concept03.webp") center;
}

.concept ul li:nth-child(4){
		background:url("../images/concept04.webp") center;
}

.concept ul li:nth-child(1),.concept ul li:nth-child(2),.concept ul li:nth-child(3),.concept ul li:nth-child(4){
	background-color:rgba(57,57,57,0.5);
	background-blend-mode: soft-light;
}


.concept ul li{
	padding:clamp(2.5rem, 2.371rem + 0.55vw, 2.813rem) clamp(1.625rem, 1.521rem + 0.44vw, 1.875rem);/*45px 30px / 40px 26px*/
	line-height:1.8;
}






/*(家づくりの流れ)*/

.flow{
	margin-bottom:-1.5rem !important;/*余白調整*/
}


:root {
  --flowchart-border: 4px;/* 縦線太さ 変更可 */
  --flowchart-dot-size: 14px;/* ドット大きさ 変更可 */
  --flowchart-dot-color: rgb(238,116,0);/* ドットの色 変更可 */
}

.flow ol {
  list-style: none !important;
  counter-reset: flownum;/* リストアイテムの名称(任意) */
  /*margin: 1em 0;/* フローチャートと前後要素との距離(任意) */
  /*padding: 0 !important;*/
}
.flow ol li {
  position: relative;
  padding: 0 0 0 calc(var(--flowchart-dot-size) + 20px);
}
.flow-content {
  position: relative;
  padding: 0 0 2em;
}

/* 縦線デザイン */
.flow-content::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(calc(calc(var(--flowchart-dot-size) / 2) + calc(var(--flowchart-border) / 2) + 20px) * -1);
  width: 4px;
  height: 100%;
  background: rgba(200,200,200);
}



/* 番号部位デザイン */
.flow ol li::before {
 	content: "STEP " counter(flownum);
 	counter-increment: flownum;
 	color: white;/* 番号文字色 */
 	color: rgb(150,150,150);/* STEP文字色 */
 	font-weight: 700;
 	font-size: 13px;/* STEPフォントサイズ */
}

/* ドットデザイン */
.flow ol li::after {
	content: "";
	display: block;
	position: absolute;
	top: 8px;/* 通常は 0, STEPの文字とのバランスを見て調整 */
	left: 0;
	width: var(--flowchart-dot-size);
	height: var(--flowchart-dot-size);
	border-radius: 50%;
	border: 2px solid var(--flowchart-dot-color);/* 円の色 */
	background: var(--flowchart-dot-color);
}


/* 工程タイトル */
.flow-ttl {
	margin: 0 0 .6em;
	font-weight: bold;
 	font-size: 1.04em;
}



/*施工例（HOME）*/

.top-work{
	max-width:1030px;
	margin:auto;
}

.top-work ul:not(.btn) {
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  grid-auto-rows: minmax(132px, auto);
  gap: 10px;
	justify-content: center;
}

.top-work ul:not(.btn) li {
	position:relative;
}


.top-work ul:not(.btn) li img {
  max-width: 100%;
  object-fit: cover;
  display: block;
  width: 100%;
  height: auto;
aspect-ratio: 125 / 94;
}



.top-work ul:not(.btn) li span {
	font-size:130%;
	font-weight:900;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.top-work ul:not(.btn) li .mask {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(255,255,255,0.5);
	color:#231815;
	text-shadow:3px 3px 5px #fff,
    -3px 3px 5px #fff,
    -3px -3px 5px #fff,
    3px -3px 5px #fff;
	-webkit-transition:	all 0.4s ease;
}
.top-work ul:not(.btn) li:hover .mask {
	background-color:rgba(255,255,255,0);
	color:#fff;
	text-shadow:3px 3px 5px #393939,
    -3px 3px 5px #393939,
    -3px -3px 5px #393939,
    3px -3px 5px #393939;
}






/*不動産情報（HOME）*/

.top-realestate{
	max-width:1030px;
	margin:auto;
}

.top-realestate ul:not(.btn){
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(175px,1fr));
	justify-content: center;
	gap: 10px;
}


.top-realestate ul:not(.btn) li{
	position:relative;
	font-size:0.8rem;
	/*background:#cecece;*/
}

.top-realestate ul:not(.btn) li img {
  max-width: 100%;
  object-fit: cover;
  display: block;
  width: 100%;
  height: auto;
aspect-ratio: 125 / 94;
}

.top-realestate ul:not(.btn) a::before{
	position:absolute;
	top:0;
	left:0;
	display: inline-block;
	width:90px;
	color:#fff;
	text-align: center;
	font-size:13px;
}

/*不動産マーク（土地/中古住宅/リフォーム済住宅）*/
.top-realestate ul:not(.btn) a.land::before{
		content: "土地";
		background:#01577d;
}
.top-realestate ul:not(.btn) a.house::before{
		content: "中古戸建";
		background:#bc1d22;
}
.top-realestate ul:not(.btn) a.renova::before{
		content: "リフォーム済";
		background:#bc1d22;
}
.top-realestate ul:not(.btn) a.apartment::before{
		content: "中古アパート";
		background:#bc1d22;
}


/*effort*/
.effort{
	padding:var(--space＿large) 0;
	justify-content: center;
	gap:20px;
}




/*SNS*/
.sns ul{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:20px;
}

.sns ul li a {
	display: flex;
	align-items: center;
	justify-content:center;
	gap: 8px;
	border:2px solid #B8B8B8;
	border-radius:20px;
	padding:15px 20px;
	width:15rem;
	font-weight: 900;
	height:100%;
	background:#fff;
}



/*about us*/
.aboutus{
	padding-top:var(--space＿medium);
	order:2;
}

.aboutus h1{
	margin-bottom:10px;
} 

.aboutus,footer{
	background:#231815;
}

/*フッター*/

footer{
	padding:var(--space＿small) ;
	order:3;
}

footer,footer a,.aboutus{
	color:#fff !important;
}


footer .col{
	justify-content: space-between;
	flex-wrap:wrap;
}

.link{
	display:flex;
	column-gap:20px;
	flex-wrap:wrap;
}

.counter,footer p:last-child{
	font-size:80%;
	margin-top:10px;
}




/*不動産情報------------------------------------------------------------------*/

.re-btn{
	gap:10px;
	margin-bottom:var(--space＿medium);
}

.re-btn li a{
	width:160px !important;
	font-size: var(--space＿tiny);
}

/*不動産一覧*/

.re-list{
	text-align:left;
	display:grid;
	grid-template-columns: repeat(2, minmax(375px , 1fr));
	gap:20px;
	align-items: start;
}


@media screen and (max-width:767px) {
	.re-list{
	grid-template-columns: 1fr;
}
}


.re-list h2{
	text-align:left;
}

.re-box{
	border:4px solid rgba(35,24,21,0.2);
	display:grid;
	grid-template-columns:30% auto;
	align-items: start;
	gap:10px;
	padding:10px;
	background:#fff;
}

.re-box h3{
	grid-column: 1 / 3;
	font-size:18px;
	padding:5px 0;
	margin-bottom:0;
	background:#01577d;
	position: relative;
}

.re-box h3 a{
	display:block;
	color:#fff;
	position:relative;
}
.re-box h3 a::after{
    content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(45deg);
	transition: all 0.2s;
}

.re-box h3 a:hover::after{
	right:5px;
}

.re-box table{
	font-size:clamp(0.875rem, 0.823rem + 0.22vw, 1rem);/*14px-16px*/
}

/*価格　フォント*/
.re-box table tr:first-child td,.price{
	font-size:clamp(1.188rem, 0.903rem + 1.22vw, 1.875rem);/*19px-30px*/
	font-weight:900;
	color:#01577d;
}

.re-box h3 a.m-land{
	padding-left:65px;
} 

.re-box h3 a.m-renova{
	padding-left:140px;
} 


.re-box h3 a.m-usedhouse{
		padding-left:85px;
}

.re-box h3 a.m-usedapartment{
	padding-left:110px;
}


.re-mark::before{
	display: inline-block;
	/*margin-right:0.5rem;*/
	font-size:12px;
	padding:0 0.5rem;
	line-height:1.8;
	background:#fff;
	color:#01577d;
	border:1px solid #01577d;
	font-weight:normal;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}


.m-land::before{
	content:"土地";
}

.m-usedhouse::before{
	content:"中古戸建";
}

.m-renova::before{
	content:"リフォーム済戸建";
}

.m-usedapartment::before{
	content:"中古アパート";
}

.m-renova{
		position:relative;
}

/*値下げマーク*/

.pricedown{
	position:relative;
}

.pricedown::after{
	content:"↓ 値下げ";
	display: inline-block;
	/*margin-right:0.5rem;*/
	font-size:12px;
	padding:0 0.5rem;
	line-height:1.8;
	background:#fff;
	color:firebrick;
	border:1px solid firebrick;
	font-weight:normal;
	position:absolute;
	top:50%;
	margin-left:5px;
	transform:translateY(-50%);
	font-weight:600;
}


/*商談中マーク
20250715　新井が勝手に追加しました
*/

.negotiation{
	position:relative;
}

.negotiation::after{
	content:"商談中";
	display: inline-block;
	/*margin-right:0.5rem;*/
	font-size:12px;
	padding:0 0.5rem;
	line-height:1.8;
	background:#fff;
	color:coral;
	border:1px solid coral;
	font-weight:normal;
	position:absolute;
	top:50%;
	margin-left:5px;
	transform:translateY(-50%);
	font-weight:600;
}


/*成約済マーク
20250724　新井が勝手に追加しました
*/

.contracted{
	position:relative;
}

.contracted::after{
	content:"ご成約";
	display: inline-block;
	/* font-size:12px; */
	padding:0 0.5rem;
	line-height:1.8;
	background:#fff;
	color:crimson;
	border:2px solid crimson;
	border-radius:10px;
	position:absolute;
	top:50%;
	margin-left:5px;
	transform:translateY(-50%);
	font-weight:600;
	white-space: nowrap;
}


/*不動産詳細----------------------------------------------------------*/

.est-ol,.est_r-ol-top{
	display:grid;
	grid-template-columns:350px 1fr;
	/*grid-template-rows:1fr 1fr;*/
	align-content: start;
	gap:0 50px;
	grid-template-areas:
    "grid1 grid1"
    "grid2 grid3"
	"grid4 grid4"
	"grid5 grid5"
	"grid6 grid6";
}


.est-ol h2,.est_r-ol-top h2{
	grid-area: grid1;
	text-align:left;
	color:#fff;
	background:#01577d;
	padding:5px;
	position:relative;
	padding-left:15px;
}

.est-ol h2.m-land{
	padding-left:65px;
}

.est-ol h2.m-usedhouse{
	padding-left:85px;
}

.est-ol h2.m-usedapartment{
	padding-left:110px;
}

.est_r-ol-top h2.m-renova{
	padding-left:140px;
}

.re-mark::before{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:10px;
}




.est-ol-pic{
	grid-area: grid2;
	min-width:350px;
	/*max-width: 100vw;*/
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:10px;
	align-content: start;
}

.est-ol-pic-s{
	display: grid;
	grid-template-columns: repeat(auto-fit, calc(100% / 3 - 3px));
	gap:3px;
}

.re_r-ol-pic-s{
	display: grid;
	grid-area: grid4;
	grid-template-columns: repeat(auto-fit, calc(100% / 5 - 20px));
	gap:20px;
	font-size:0.95rem;
	margin-bottom:var(--space＿medium);
}

.re_r-ol-pic-s img{
	margin-bottom:10px;
}

.re_r-ol-pic-s a{
	display:inline-block;
}

.est-ol{
	grid-area: grid3;
	margin-bottom:var(--space＿medium);
}

.est-ol table,.est_r-ol-top table,.est_r-ol{
	margin-bottom:var(--space＿medium);
	width:100%;
}

.est-ol table,.est_r-ol{
	background:#fff;
}


.est-ol th,.est-ol td,.est_r-ol th,.est_r-ol td{
	padding:10px;
	border:1px solid #a1a1a1;
}

.est-ol th,.est_r-ol th{
	white-space: nowrap;
	background-color: rgba(35,24,21,0.05);
}


.est_r-ol-top th,.est_r-ol-top td {
  border-bottom: 2px solid #c1c7c6;
  padding: 1em !important;
}
.est_r-ol-top th {
  border-bottom: 2px solid #f07700;
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
}

table caption{font-size:var(--font_large);}

.est_r-ol{
		grid-area: grid5;
}



.re-map{
	grid-area: grid6;
	max-width:1280px;
}

.re-map iframe{
	aspect-ratio:16/9;
	border:none;
	width:100%;
	margin-bottom:10px;
}

@media screen and (max-width:767px) {
	
	.est_r-ol-top .est-ol-pic{
		position:relative;
	}
	
	.est_r-ol-top .est-ol-pic ::after{
	content: '';
    border: 0;
    border-top: solid 7px;
    border-right: solid 7px;
	color:#ed7300;
    display: inline-block;
    width: 20px;
    height: 20px;
	position:absolute;
	top: 50%;
    right:5vw;
    transform: translateY(-50%) rotate(45deg);
	}
	
	
	.est-ol,.est_r-ol-top{
	grid-template-columns:1fr;
	align-items: start;
	gap:30px;
	grid-template-areas:
    "grid1"
    "grid2"
	"grid3"
	"grid4"
	"grid5"
	"grid6";
}
	
	.est_r-ol-top table{
		margin-bottom:-50px;
	}
	
.est-ol th,.est-ol td,
.est_r-ol-top th,.est_r-ol-top td,
.est_r-ol th,.est_r-ol td{
        display: block;
        width: 100%;
		margin:0 !important;
        }
	
	.est-ol th,.est_r-ol th{
		border-bottom:0;
	}
	
	.est_r-ol-top th{
		text-align:left;
	}
	
	.re_r-ol-pic-s{
		display:none;
		margin-bottom:0;
	}	

.re-map iframe{
	aspect-ratio:4/3;
}
}


/*物件詳細を見るボタン*/


.est-ol-btn a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 260px !important;
    padding: 10px 0px 10px 25px;
    font-family: "Noto Sans Japanese";
    line-height: 1.8;
    /*text-decoration: none;*/
    color: #333;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.est-ol-btn a:before, .est-ol-btn a:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}
.est-ol-btn a:before {
  width: 0.5rem;
  height: 0.5rem;
  left: -1.1rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}
.est-ol-btn a:after {
  left: -2.3rem;
  background: #ed7300;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 4rem;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.est-ol-btn a span {
  position: relative;
  transition: all 0.3s;
  z-index: 3;
}

.est-ol-btn a:hover span {
  color: #fff;
}
.est-ol-btn a:hover:before {
  left: 0.1rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}
.est-ol-btn a:hover:after {
  right: 0;
  width: 140%;
  background: #ed7300;
}


/*印刷ボタン*/

.print-btn{
	text-align:right;
	margin-bottom:10px;
	position:relative;
}

.print-btn a{
	display: inline-block;
	border:1px solid #B7B4B4;
	padding:10px 30px 10px 62px;
	background:url("../images/PDF_32.png") no-repeat,#fff;
	background-position:20px;
	border: 2px solid #B7B4B4;
  box-shadow: 0 3px 0 #B7B4B4;
  border-radius: 5px;
  display: inline-block;
  transition: .3s;
	color:#666;
}

.print-btn a:hover{
transform: translateY(3px);
  box-shadow: 0 0 0 #B7B4B4;
}

/*-施工例一覧----------------------------------------------------------------*/

.work-list{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 	/*grid-auto-rows: minmax(100px, auto);*/
 	gap: 20px;
	font-size:0.8rem;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.work-list > div a{
	background:rgba(35,24,21,.08);
	text-align: center;
	padding:20px 10px;
	transition: .3s;
	border:1px solid rgba(35,24,21,.08);

}

.work-list > div a{
	display:block;
	height:100%;
	transition:0.3s;
}

.work-list > div a:hover{
	border:1px solid rgba(35,24,21,0.5);
}

.work-list > div img{
	margin-bottom:10px;
}



/*施工例（詳細）----------------------------------------------------------*/

.work-box{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap:20px;
	max-width:720px;
	margin:auto;
}

.work-txt{
	margin:var(--space＿medium) auto;
	line-height:2;
	max-width:1140px;
	width:100%;
	border-top:4px solid rgba(35,24,21,0.2);
	border-bottom:4px solid rgba(35,24,21,0.2);
	padding:var(--space＿small);
}

.rig{
	text-align: right
}

.work-txt strong{
	word-break: keep-all;/*wbr用*/
	overflow-wrap: break-word;/*wbr用*/
}



/*会社案内-------------------------------------------------------------------*/

/*ご挨拶*/

.message{
	display:flex;
	gap:20px;
	align-items: flex-start;
}

@media screen and (max-width:767px) {
	.message{
	flex-wrap:wrap;
	justify-content:center;
	}
		
	.overview table th,.overview table td{
			display: block;
		}		
	}
		

.message p {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 98.5%, #000 100%);
  background-repeat: repeat-y;
  background-size: 100% 2.4em;
  line-height: 2.4;
}


.reason li{
	margin-bottom:30px;
}

.reason li p{
	margin-left:30px;
}

.reason {
    counter-reset: h3;
	margin-top:50px;
}


.reason h2 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
    }
    .reason h2::before {
      content: "";
      width: 60px;
      height: 4px;
      transform: rotate(60deg);
      box-sizing: border-box;
      background-color: rgba(240,119,0,1);
    }
    .reason h2::after {
      content: "";
      width: 60px;
      height: 4px;
      transform: rotate(-60deg);
      box-sizing: border-box;
      background-color: rgba(240,119,0,1);
    }

.reason h3{
    font-size: 1.5rem;
	margin-bottom:10px;
	display: inline-block;
  /*background:linear-gradient(transparent 60%,#f07700 60%);*/
	color:rgba(240,119,0,1);
}

.reason h3:before {
    counter-increment: h3;
    content: counter(h3);
    /*border:3px double rgba(240,119,0,1);*/
    color:rgba(240,119,0,0.2);
    text-align: center;
    font-size: 3rem;
    margin-right: 1.2rem;
    border-radius: 50%;
    flex-shrink: 0;
	font-style:oblique;
	font-weight: 700;
	/*background:rgba(240,119,0,0.05);*/
}

/*お客様の声　吹き出し*/

.cv{
	/*max-width:1000px;*/
	margin:30px;
}

.cv li {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.cv li img {
    width: 20%;
	max-width:100px;
}

.cv li p {
    position: relative;
    width: 80%;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color:rgba(237,115,0,0.15);
    color: #333333;
}

.cv li:nth-child(odd) p::before {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color:rgba(237,115,0,0.15);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}


.cv li:nth-child(even) p::before {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    background-color: rgba(237,115,0,0.15);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

/*会社概要*/

.overview table {
  border-collapse: collapse;
  width: 100%;
}
.overview table th, .overview table td {
  border-bottom: 2px solid #c1c7c6;
  padding: 1em;
}
.overview table th {
  border-bottom: 2px solid #f07700;
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
}

/*スタッフ紹介*/
.staff ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(375px , 1fr));
  gap: 20px;
}


.staff li{
	background:#fff;
	display:flex;
	align-items: center;
	padding:10px;
	box-shadow: 5px 5px #cecece;
	
}

.staff li > div{
	padding:10px;
	font-size:clamp(0.875rem, 0.823rem + 0.22vw, 1rem);/*15px-16px*/
}

.signature{
	text-align:right;
	margin-top:20px;
	font-weight:400;
	font-family:var(--font_sign);
	font-size:125%;
	color:#333;
}

.signature i{
	display:inline-block;
	margin-left:10px;
	font-size:90%;
}


@media screen and (max-width:767px) {
	
	.overview table th{
		width:100%;
		display:block;
		text-align:left;
	}
	.staff ul{
	grid-template-columns:1fr;
}
}



/*ZEHへの取り組み---------------------------------------------*/

.whats-zeh{
	display:flex;
	justify-content: center;
	gap:20px;
	flex-wrap:wrap;
	align-items: flex-start;
}


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

.whats-zeh{
	 flex-wrap:nowrap;
}
}

.table-scroll{
	overflow-x: scroll;
}

.zeh-goal{
	width:100%;
	border:solid 1px #cecece;
}

.zeh-goal th{
	white-space: nowrap;
	font-size:clamp(0.938rem, 0.912rem + 0.11vw, 1rem);/*15-16px*/
}

.zeh-goal th,.zeh-goal td{
	border:solid 1px #cecece;
	padding:8px 20px;
	text-align: center;
	background:#fff;
}

.zeh-goal th{
	background:rgba(224,224,224,1.00);
}

/*見出し固定*/
.cap-fixd{
	position: sticky;
	top: 0;
	left: 0;
}

.cap-fixd:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
  }

.cap-fixd{
  z-index: 1;
}

/*不動産を売却したい方----------------------------------------------------------*/

.re-s h2 strong{
	color:#1caa34;
}


.re-s :not(h2) strong {
    background: linear-gradient(transparent 50%, #a2e8ae 50%);
}

.first{
	line-height:2;
}


/*擬似要素削除*/
.re-s h2::before,.re-s h2::after{
	content:none;
}


.flow02 > ul {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}


.flow02 > ul > li {
  list-style-type: none;
  width: 100%;
  max-width: 350px;
  display: flex;
background:#fff;
}


.flow02 > ul > li span {
  line-height: 2;
  width: 2em;
  height: 2em;
  text-align: center;
  color: #fff;
  background: #ed7300;
  margin: 0 auto 10px;
  display: block;
  border-radius: 100vh;
  position: relative;
}


.flow02 > ul > li span::before {
content: "";
  border: solid transparent;
  border-width: 7px;
  border-top-color: #ed7300;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.flow02 > ul > li dl {
  padding: 30px 20px;
  margin: 0;
  border: 3px solid rgba(200,200,200);
  position: relative;
}

.flow02 > ul > li:not(:first-child) dl::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 10px;
  display: inline-block;
  border-top: 4px solid rgba(200,200,200);
  border-right: 4px solid rgba(200,200,200);
  position: absolute;
  top: calc(50% - 14px);
  left: -45px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.flow02 > ul > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #ed7300;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-bottom: 10px;
  text-align: center;
}


.flow02 > ul > li dl dd {
  margin-left: 0;
}

@media(max-width: 767px){
  .flow02 > ul {
    gap: 20px;
  }
  .flow02 > ul > li {
    max-width: unset;
    display: block;
  }
  .flow02 > ul > li:not(:first-child) dl::before {
    display: none;
  }
}


/*よくあるご相談*/

.qa details {
    /*max-width: 500px;*/
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
}

.qa details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 10px 10px 15px 35px;
	margin-right:35px;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa details summary::before,
.qa details p::before {
    position: absolute;
    left:10px;
    font-weight: 600;
    font-size: 1.3em;
}

.qa details summary::before {
    color: #75bbff;
    content: "Q";
}

.qa details summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    /*margin-left: 10px;*/
	position:absolute;
	right:-25px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa details[open] summary::after {
    transform: rotate(225deg);
}

.qa details p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa details[open] p {
    transform: none;
    opacity: 1;
}

.qa details p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

/* iOSでのデフォルトアイコンを非表示にする */
details summary {
  list-style: none; /* リストスタイルの削除 */
}

/* Safari特有のデフォルトマーカーを非表示にする */
summary::-webkit-details-marker {
  display: none;
}





/*不動産の売却に関するお問い合わせ*/
.bnr_contact{
	display: grid;
	grid-column-gap: 0;
	grid-row-gap: 0;
	justify-items: center;
	align-items: center;
	background:url("../images/contact-bk.webp") no-repeat center;
	background-blend-mode:lighten;
	background-color:rgba(255,255,255,0.6);
	padding:10px;
	max-width:100%;
}

.bnr_contact ul{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	column-gap:40px;
	row-gap:10px;
	text-align:center;
	margin-top:var(--space＿small);
}

.bnr_contact ul li{
	font-size:var(--font_large);
	font-weight:600;
	border-radius:25%;
}
	
.bnr_contact ul li i{
	font-size:70%;	
}

.bnr_contact ul li:first-child a {
	position: relative;
	margin-left:40px;
}

/* 電話マーク　擬似要素 */
.bnr_contact ul li:first-child a::before {
  content:url("../images/tel.svg");
  position: absolute;
  display: block;
  height:30px;
  width: 30px;
  top: 0;
  left: -40px;
}

/**お問い合わせフォームへ*/
.bnr_contact ul li:last-child a{
  position: relative;
  display: block;
	width:350px;	
  padding:var(--space＿tiny) 0;
  background-color: #fff;
  border: 3px solid #ed7300;
	border-radius:10px;	
  color: #ed7300;
  text-align: center;
  overflow: hidden;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
	color:#ed7300;
	z-index: 1;
}


.bnr_contact ul li:last-child span:after{
	content: '';
    border: 0;
    border-top: solid 3px #ed7300;
    border-right: solid 3px #ed7300;
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(45deg);
	transition: all 0.2s;	
}

.bnr_contact ul li:last-child a::after{
  position: absolute;
  display: block;
  content: "";
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.bnr_contact ul li:last-child a:hover::after {
  top: 0;
  left: 0;
  background-color: rgba(237,115,0,0.15);
}

.bnr_contact ul li:last-child a::after {
  top: 0;
  left: -350px;
  width: 100%;
  height: 100%;
}


/*保証・アフターフォロー-----------------------------------------------*/


.warranty h3{
	margin-top:var(--space＿medium);
	font-size:120%;
	position: relative;
	padding-left:60px;
}

.warranty h3::before{
	content: url("../images/icon_anshin.jpg");
	position:absolute;
	top:50%;
	left:0;
	transform: translateY(-50%);
}

.mamoris{
	justify-content:center;
	gap:30px;
	align-items: center;
	margin:var(--space＿medium) auto;
}

.mamoris dt{
	background:rgba(239,134,148,.3);
	display:inline-block;
	border-radius:5px;
}

.mamoris dt:nth-child(n+3){
	margin-top:10px;
}

.mamoris *{
	padding:0 10px;
}



.anshin{
	display: grid;
	grid-template:
		 'point1 point1 point1' auto
    	'point2 point3 point4' auto /
    1fr 1fr 1fr;
  gap: 40px;
	counter-reset: number 0;
}
	

.anshin > div{
	border:3px solid #ef8694;
	border-radius:9px;
	padding:var(--space＿small);
	background:#fff;
}


.anshin h4{
    font-size:clamp(1.25rem, 1.146rem + 0.44vw, 1.5rem);
	margin-bottom:10px;
	display: inline-block;
	/*color:rgba(240,119,0,1);*/
}

.anshin h4:before {
	counter-increment: number 1; /* counter-resetの名前を指定、+1づつ増やす。*/
 content: counter(number); /* 番号の後に、ドットを付ける場合 後ろに"."。*/
 padding-right: 5px; /* ドットと文字に、間隔を空ける場合に指定する。*/
    color:rgba(239,134,148,0.5);
    text-align: center;
    font-size: 3rem;
    margin-right: 1.2rem;
    border-radius: 50%;
    flex-shrink: 0;
	font-style:oblique;
	font-weight: 700;
}



.point1{
	grid-area: point1;
}

.point2{
	grid-area: point2;
}

.point3{
	grid-area: point3;
}

.point4{
	grid-area: point4;
}

@media(max-width: 767px){
	.anshin{
	display: grid;
	grid-template:
		'point1 point1 point1' auto
    	'point2 point2 point2' auto
		'point3 point3 point3' auto
    	'point4 point4 point4' auto
		/
    1fr 1fr 1fr;
  gap: 20px;
		
}
	
}

blockquote{
	text-align:right;
	margin:20px auto;
}


/*イベント情報-----------------------------------------------------------*/

.event-list h2{
	text-align: left !important;
	border-bottom: solid 3px #c1c7c6;
	position: relative;
}

/*開催終了マーク*/
.m-end::before{
	content:"開催終了";
	display: inline-block;
	margin:0.5rem;
	font-size:0.8rem;
	padding:0 0.5rem;
	line-height:1.8;
	background:#a1a1a1;
	color:white;
	font-weight:normal;
}



.event-list h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #f07700;
 /* bottom: -5px;*/
  width: 10%;
}

.eve-outline p:nth-child(n+2){
	margin-top:10px;
}
	

.event-list iframe{
	border:none;
	width:100%;
	aspect-ratio: 16 / 9;
	margin-top:var(--space＿medium);
}

@media(max-width: 1279px){
.event-list .col{
	justify-content: center;
}
}




/* realestate-seil,htmlの売却実績マップ */

#embed_map {
   height: 1200px;
    max-width: 1200px;
    width: 100%;
    display: block;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
   #embed_map {
        height: 1200px;
    }
}