@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/ 

/*top-image*/
div.TOP_AREA.DirectoryTop{ background-image:url(https://img.wills.co.jp/img/static/office/top_900.jpg);overflow: hidden;}
div.TOP_AREA.DirectoryTop.nagoya_top{ background-image:url(https://img.wills.co.jp/img/static/office/top_nagoya_900.jpg);}
div.TOP_AREA.DirectoryTop.tokyo_top{background-image:url(https://img.wills.co.jp/img/static/office/top_tokyo_900.jpg)}
div.TOP_AREA.guidanceItami{background-image:url(https://img.wills.co.jp/img/static/900/guidanceTop_900.jpg);}
div.TOP_AREA.guidanceTakatsuki{background-image:url(https://img.wills.co.jp/img/static/900/guidanceTakatsukiTop_900.jpg);}

div.Feature{margin: 0px 2.5%;}
div.Feature div.Feature_Box{display: -webkit-box; display: -moz-box; overflow-x: auto;margin-left: -10px;}
div.Feature div.point{padding: 15px; box-sizing: border-box; width:95vw;}
div.Feature div.point span.LTexts {display: block; margin-top: 0; height:1.5em;}
div.Feature div.point i{display: block; margin: 0 0 15px 0; font-size: 65px; color:var(--color-gray_bg);}

.Feature button.previous{left:0; top:35%; opacity:0;}
.Feature button.next {right:0; top:35%; opacity:0.8;}

div._TC{padding-bottom:1px;}

.office-branches{margin:0 10px;}
.office-branches img{width:100%;}
h3.prefecture{text-align: left; margin-left:0px; margin-bottom:0;}
div.branch{margin:30px auto 0; padding:0;}
div.branch h3{margin:0 0 10px; text-align:left;}
.branch .LTexts{clear:both;}
div.branches div.branch p.office-area{color:#b5b5b6}
.branch dd,.about dd{padding:0; width:calc(100% - 16vw - 10px);}
.branch dt,.about dt{width:16vw; margin-right:10px;}

div.willgroup div.branch{width:calc(100% - 40px); border:var(--color-gray_border_set); padding:20px;}
div.willgroup div.branch h3{height:3em; margin:0 0 20px;}
.branch dd.line2{line-height: 1.4em; padding-top: 0.2em;}


div.container.side0.daiko{background: url(https://img.wills.co.jp/img/static/office/center_900.jpg);height: 600px;margin-top: 120px; background-size: cover;background-position: center center;}
.daiko .daiko_p {text-align: left; position: absolute; bottom: 150px; color: #FFFFFF; }
.daiko .daiko_t{color: #ffffff; text-align: center;}
.button-story.Basis {text-align: center;color: #fff;border: 1px solid #fff;border-radius: 10px;width: 20em;padding-right: 10px;box-sizing: border-box;position: absolute;bottom:50px;left:50%;transform:translate(-50%,0);}

/*お店でできること*/
.service-option-img {
	height: 100%;
}

/*---詳細ページ*/
.P-3C-543 .last{
    margin-top: 40px;
}
.temporary-closed{
    border: var(--color-pink_border_set);
    color: var(--color-pict_pink);
    padding: 10px 20px 15px;
}
div.about-office p.LTexts{margin-top:40px; margin-bottom:15px;}
.office-name span{margin-top:15px;}
.inquire {border-radius: 21px; color: var(--color-white); background-color: var(--color-buttom_red); border-color: var(--color-buttom_red);}
.inquire:hover{background-color: var(--color-buttom_red);}

.fit68{min-height:90px; margin-bottom:30px;}
.fit68 p.Bold{margin-left:30px;}
.fit68 img {width: 68px;}
.salesPerson {transform:translateY(10px) translateX(30px);}
.speaker {padding:10px 0 0 120px;}

div.main-area{margin:0 2.5%;}
div.area{display: -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-moz-box-pack:start;-webkit-flex-pack:start;-moz-flex-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;justify-content:flex-start;margin: 0 auto;width: 100%;}
div.area div.city{width:32%; margin-right:2%;}
div.area div.city img{height: auto; width: 100%;}
div.area div.city p{width:100%; color:#FFFFFF; position:absolute; bottom:10px; text-align:center;}
.area-name{position: absolute; top: 0; height: 98%; color: var(--color-white); background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%) repeat scroll 0 0;; width: 100%; box-sizing: border-box;}

div.parking-map p.icon-address-o:before{margin-right:10px; }
.MAP_WRAPPER{width:100%; max-height:350px;}
.OfficeMap{width:100%;}
.parking {overflow: visible;}
.parking p{
    padding-left: 2rem;
}
.parking i:before {
    position: absolute;
    font-size: 36px;
}
.parking [class*="icon-P"]:not([class*="will"]) {
    color: var(--color-pict_pink);
}

.button-more.longer{width:94vw;}

.city-b{border:var(--color-gray_border_set); padding-top:30px; margin-bottom:20px;}
.city-b i{font-size:80px;}
.city-b p{position:relative;}
.city-b p a:after{position:static;}

@media screen and (max-width: 767px){
	.sp_m_b_30{margin-bottom:30px;}
	/*---詳細ページ*/
	div.about-office .LTexts span {width:100%; display:block;}
	div.area div.city:nth-child(3n){margin-right:0;}
	h2.map-title{margin-bottom:50px;}
	div.Inquiry div.contact-date button:nth-child(1){display:none;}
	div.Inquiry div.contact-date button:nth-child(2){display:none;}
	div.Inquiry div.contact-date button:nth-child(6){display:none;}
	div.Inquiry div.contact-date button:nth-child(7){display:none;}
	div.Inquiry div.contact-date button:nth-child(8){display:none;}
}

/*検索結果*/
div.boxset.Office-Card{row-gap: 25px; grid-row-gap: 25px;}
.Office-Card .card_L3 a{border:var(--color-gray_border_set); }
.Office-Card dt{width: 20%;margin-bottom:10px; }
.Office-Card dd{width: 80%;padding: 0;margin-bottom:10px; }
.Office-Card .TEL span:first-child{padding-right:10px; }
.Office-Card .TEL span:last-child{padding-left:10px; }

/*伊丹営業所提携駐車場ページのGooglemap*/
.icon-CarSpace.guide {
	vertical-align: middle;
	padding-right: 10px;
}
#map div {
	overflow: visible;
}
.guidance .button-more {
	margin-top: 35px;
}

/*おすすめ物件*/
.height-auto {
	height: auto;
}

.reco-reason-popup {
	background-color: var(--color-white);
	bottom: 0;
	box-shadow: 0 0 6px rgb(0, 0, 0, .15);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	right: 0;
	padding: 35px 20px 20px;
	position: fixed;
	width: 100%;
	z-index: 102;
}

.reco-reason-popup {
	bottom: 5px;
	position: absolute;
}

[class$="popup"] .icon-close:after {
	cursor: pointer;
	width: 25px;
	height: 25px;
	font-size: 25px;
	font-weight: bold;
	position: absolute;
	top: 10px;
	right: 20px;
}

[class$="popup"] .staff-comment img {
	float: left;
	border-radius: 50%;
	width: 56px;
	margin-right: 10px;
	margin-top: 5px;
}

[class$="popup"] .chat {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 13em;
	text-align: right;
}

[class$="popup"] [class*="button-"] {
	width: 40vw;
}

[class$="popup"] .button-more {
	height: 42px
}

[class$="popup"] .button-more.icon-down-arrow-af::after {
	margin-left: 10px;
}
.staff-comment {
	position: relative;
}

.reco-reason,.recoReason,.ajaxRecoReason {
	position: absolute;
	line-height: 50px;
	right: 10px;
	bottom: -15px;
	z-index: 2;
}

.reco-reason:hover,.recoReason:hover,.ajaxRecoReason:hover {
	text-decoration: underline;
}

.ServiceIndex {
	gap: 15px 25px;
}

.BoxLink {
	height: 70px;
	border: 1px solid transparent;
	text-align: center;
	display: grid;
	grid-template-columns: 70px 1fr;
}
.BoxLink:hover {
	opacity: .8;
}
.BoxLink a::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
	border: 2px solid var(--color-gray_border);
}

.BoxLink a:hover::before {
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-width: 3px;
}
.BoxLink a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
	z-index: 1;
}
.BoxLink div {
	padding: 15px 0;
}
.BoxLink .icon-down-arrow:after {
	font-size: 1em;
    position: relative;
    display: block;
    top: unset;
    transform: translateY(0);
    right: 0;
}
div.container .CatchIcon img {
	position: absolute;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}
.CatchIcon i {
	color: var(--color-pict_pink);
	font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.CatchIcon i.icon-save-o {
	font-size: 35px;
}
.OfficeService .ServiceCopy {
	margin: 15px 0 50px;
}
.OfficeService .ServiceBox {
	margin: 0;
}
.OfficeService .ServiceBox.OrderTwo {
	margin: 0 0 75px;
}
.LBorder {
	border-left: 4px solid var(--color-pict_pink);
	padding-left: 5px;
}
.BknLink {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 5px;
	padding: 10px;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}
.BknLink:nth-child(3n) {
	margin-bottom: 25px;
}
.BknLink:last-child {
	margin-bottom: 0;
}
.BknLink i {
	margin-left: auto;
}
.BknLink a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.BknLink:hover {
	opacity: .8;
}
.BknLink a::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
	border: 2px solid var(--color-pict_pink);
	border-radius: 5px;
}

.BknLink a:hover::before {
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-width: 3px;
}
/*おすすめ物件*/
.Toprcm {
	margin-right: 10px;
    margin-left: 20px;
}
.Toprcm h3 {
	margin: 20px 0;
}
.BSpace {
	padding-bottom: 50px;
}
.BSpace h2 {
	margin: 60px 0 30px 0;
}
.card_m_type_title {
    width: 100%;
    overflow: visible;
}
.card_m_type_title span {
position: absolute;
bottom: -30px;
right: 10px;
}

.BSpace > .container,.BSpace > .container > .boxset {
	position: static;
}
.item.card_bkn a {
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
}
/*おすすめエリア*/
div.container > div.boxset.RecomendArea {
	display: flex;
	column-gap: 0;
	border-radius: 10px;
	background-color: #F6F6F6;
	box-sizing: border-box;
	box-shadow: 2px 2px 4px rgb(0, 0, 0, .2);
	height: 220px;
	margin-bottom: 40px;
}
.RecomendArea a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
.photo-item {
	width: 50%;
}
.photo-item {
	border-radius: 10px 0 0 10px;
}
.RecomendArea .photo {
	padding: 10px 15px;
	color:#FFFFFF;
}
.photo-item:before {
    content: "";
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 40%);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.photo .LTexts_nm {
	font-size: 16px;
	line-height: 1.4;
}

.photo .catchcopy-text {
	font-size: 10px;
	line-height: 1.4;
}

.area-chart {
	width: 100%;
	height: calc(100% - 50px);
}
.__BOX_GALLERY {
	height: auto;
	float: none;
	width: 50%;
	order: 2;
}
.__BOX_GALLERY canvas {
	padding: 10px;
    box-sizing: border-box;
}
.__BOX_GALLERY .area-detail-head {
	padding: 15px 0 0 15px;
}
.RecomendAreaMap {
	padding: 0;
	display: flex;
	pointer-events: none;
	width: 50%;
	order: 1;
	border-radius: 0 0 0 10px;
}
.RecomendAreaMap::before {
	content: "";
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 45%) repeat scroll 0 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.AreaName {
	background-color: #B5B5B6;
	padding: 10px 15px;
	color:#FFFFFF;
	top: 0;
	left: 0;
}
.RecomendAreaMap .area-detail-head {
	padding-right: 10px;
}
.RecomendArea .property-item-number {
    position: absolute;
    left: 15px;
    bottom: -15px;
    box-sizing: border-box;
    width: 30px;
    height: 40px;
    padding: 4px 4px 6px;
    background: url(../../img/ai_recommend/index/property-item-number_base.svg) no-repeat center center;
    background-size: 30px 40px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
	color: #FFF;
	z-index: 1;
}
.container .RecomendArea:nth-of-type(2) .property-item-number {
    background: url(../../img/ai_recommend/index/property-item-number_02.svg) no-repeat center center;
    background-size: 30px 40px;
}
.container .RecomendArea:nth-of-type(1) .property-item-number {
    background: url(../../img/ai_recommend/index/property-item-number_01.svg) no-repeat center center;
	background-size: 30px 40px;
}
.container .RecomendArea:nth-of-type(3) .property-item-number {
    background: url(../../img/ai_recommend/index/property-item-number_03.svg) no-repeat center center;
	background-size: 30px 40px;
}
.RecomendArea .PictGroupe {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	bottom: 10px;
	left: 15px;
	color: #ffffff;
}
.RecomendArea .PictGroupe em {
	border: 1px solid #ffffff;
	padding: 0px 5px;
    margin: 7px 7px 0 0;
}
.RecomendArea .RecomendAreaMap .PictGroupe {
	top: 10px;
	left: 15px;
	bottom: auto;
}
.RecomendArea .RecomendAreaMap .PictGroupe em {
	margin: 0 7px 7px 0;
}

/*店舗アンケートトップページ*/
.icon-checklist {
	font-size: 65px;
	padding: 30px 50px 55px 0;
}

@media screen and (max-width: 768px) {
	.survey-top .excuse {
	  letter-spacing: -0.01em; /* 字間を縮める */
	}
  }

.survey-top .tablayout {
    display: flex;
    justify-content: center; /* 中央揃え */
    padding: 0 25px; /* デフォルトのマージン・パディングを解除 */
    list-style: none; /* リストのドットを消す */
}

.survey-top .tablayout li {
    width: 100%;
}

.survey-top .tablayout h2 {
    margin: 0; /* h2タグのデフォルトマージンを解除 */
	margin-bottom: 0;
	position: relative;
	width: 100%;
	height: 50px;
}

.survey-top .tablayout a {
    text-decoration: none; /* リンクの下線を消す */
    color: inherit; /* 親要素から色を継承 */
	z-index: 5;
}

.survey-top .office-buttons h2 {
	margin-bottom: 15px;
}

.survey-top .survey-arrow {
	position: absolute;
	display: inline-block;
	width: 100%;
	left: 0;
	top: 0;
	height:180%;
}

@media screen and (max-width: 768px) {
	.survey-top .survey-arrow {
		height: 150%;
	}	
}

.survey-top .icon-down-arrow:after{
	color: #B5B5B6;
	content: "\e900";
    font-size: 15px;
    position: absolute;
	bottom: 0;
	left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* 営業所ボタン */
.survey-top .office-buttons .area-subheading {
	padding-top: 15px;
}

.survey-top .office-buttons {
    width: 100%; 
    box-sizing: border-box; 
}

.survey-top .office-buttons .button-more {
    display: block; /* ボタンをブロック要素にして幅100%を適用 */
    text-decoration: none; /* リンクの下線を消す */
    padding: 10px 20px; /* ボタンのパディング */
    border-radius: 5px; /* 角丸 */
    text-align: center; /* テキストを中央揃え */
    border: 1px solid #E68C92; /* 枠線色 */
    opacity: 0.85; /* 透明度 */
    margin-bottom: 5px; /* ボタン間の余白 */
    width: 100%; /* 親要素の幅を占める */
    box-sizing: border-box; /* パディングを含めた幅計算 */
	margin-top: 13px;
}

/* .survey-top .button-more の子要素（pタグ）のスタイル */
.survey-top .office-buttons .button-more p {
    margin: 0; /* マージンのリセット */
    padding: 0; /* パディングのリセット */
    display: inline-block; /* インラインブロックで横並びに */
    vertical-align: middle; /* 中央揃え */
}

.survey-top .office-buttons .button-more .office-name {
	color: #333333;
	font-size: 14px;
	height: 100%;
	width: 110px;
	display: flex;
    align-items: center;
	margin-right: 20px;
}

.survey-top .office-buttons .button-more .office-address {
	font-size: 11px;
    height: 100%; /* 高さを100%にして親要素内で中央揃え */
    display: flex;
    align-items: center; /* フレックスボックスで中央揃え */
    text-align: left;
	line-height: 1;
	margin-right: 10px;
}

.survey-top .icon-angle-right {
	color: #B5B5B6;
}

@media screen and (max-width: 768px) {
	div.boxset.RecomendArea {
		display: flex;
		flex-direction: row; 
		flex-wrap: wrap;
		height: auto !important;
	}

	.AreaName {
		order: 1;
		border-radius: 10px 10px 0 0;
		line-height: 1.4;
		padding-bottom: 10px;
		width: 100%;
	}
	.AreaName p:first-child {
		padding-bottom: 10px;
	}

	.AreaName .LTexts_nm {
		font-size: 18px;
	}

	.AreaName .catchcopy-text {
		font-size: 12px;
	}

	.RecomendAreaMap {
        height: 220px;
    }

    /* 右側の__BOX_GALLERYエリア */
    .__BOX_GALLERY {
        height: 220px;
    }

}