@charset "utf-8";
/* 戸建賃貸 iCCo */

main {position: relative;}

/* fadeIn設定 */

.js-fadeIn {
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	visibility: hidden;
}

.js-fadeIn.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

@media screen and (min-width: 481px){
.js-fadeIn {
	transform: translateY(50px);
}
}

/*-- メインビジュアル --*/

section#mv {
	height:calc((100vw / 375) * 430);
	/*height:430px;*/
	position: relative;
	margin-bottom:30px;
	/*background:#b4d9f3;*/
	width:100%;
}

/*
section#mv::after {
	position: absolute;
	content: '';
	bottom: -1px;
	display: block;
	width: 100%;
	height: 100px;
	/*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FFFFFF' points='100,50 0,50 0,0 50,50 100,0 '/%3E%3C/svg%3E") ;
	background-image:url("images/mv_bottom.svg") ;
	background-repeat: no-repeat;
	background-position:top center;
	background-size:cover;
	z-index: 100;
}*/

section#mv .grade {
	position: absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	background: linear-gradient(rgba(0,156,222, 1.0), rgba(0,106,173, 1.0));
	width:76.5%;
	height:100%;
	z-index: 10;
}

section#mv .clouds {
	position: absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	background:url("images/bg_mvbase.png") no-repeat top center / cover;
	width:100%;
	height:100%;
	z-index: 20;
}

section#mv .phcloud01 {
	position: absolute;
	top:35.5vw;
	left:0;
	z-index: 20;
	text-align: left;
	width:35%;
}
section#mv .phcloud02 {
	position: absolute;
	top:23.5vw;
	right:0;
	z-index: 20;
	text-align: right;
	width:35%;
}
section#mv .phcloud01 img,
section#mv .phcloud02 img {width:80%;}

section#mv .copy {
	position: absolute;
	top:20px;
	left:50%;
	transform:translateX(-50%);
	z-index: 30;
	width:65%;
}
section#mv .catch {
	width: 90%;
	position: absolute;
	bottom:15%;
	left:50%;
	transform:translateX(-50%); 
	z-index: 40;
}

@media screen and (min-width: 481px){
	section#mv { height:auto;}
section#mv .phcloud01 {
	top:45.5vw;
	left:11.7%;
	width:25%;
}
section#mv .phcloud02 {
	top:28.5vw;
	right:11.7%;
	width:25%;
}
section#mv .phcloud01 img,
section#mv .phcloud02 img {width:75%;}
}

@media screen and (min-width: 769px){
section#mv {
	/* height:calc(100vw * 1.0);*/
	margin-bottom: 80px;
} 
	
section#mv .catch {
	width: 38%;
	bottom:5%;
}

section#mv .phcloud01 {
	top:35.5vw;
	left:11.7%;
	width:25%;
}
section#mv .phcloud02 {
	top:18.5vw;
	right:11.7%;
	width:25%;
}
}

@media screen and (min-width: 861px){
/* section#mv {height:calc(100vw * 0.85);} */
}

@media screen and (min-width: 1000px){
/* section#mv {height:calc(100vw * 0.75);}
section#mv::after {height: 124px;} */
section#mv .phcloud01 {
	top:28.5vw;
	left:11.7%;
	width:25%;
}
section#mv .phcloud02 {
	top:15.5vw;
	right:11.7%;
	width:25%;
}	
}

@media screen and (min-width: 1200px){
/* section#mv {height:calc(100vw * 0.58);}
section#mv::after {
	height: 220px;
	bottom:-2px;
}*/
section#mv .grade {
	width:70%;
}

section#mv .phcloud01 {
	top:26.5vw;
	left:15%;
	width:20%;
}
section#mv .phcloud02 {
	top:13.5vw;
	right:15%;
	width:20%;
}	
}

/*-- こんなお悩みありませんか？ --*/

section#problem {
	padding:0 15px;
	margin-bottom: 50px;
}

section#problem h2 {
	font-size:160%;
	position: relative;
	margin-bottom: 35px;
	font-feature-settings: "palt";
}

section#problem h2:before {
content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
	transform:translateX(-50%); 
    bottom: -8px;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: #00559D;
}

section#problem .proimg {
	position: relative;
	margin-bottom: 50px;
}

section#problem .proimg img {
	width:90%;
}

section#problem .proimg .point {
	position: absolute;
	bottom:-30px;
    left: 50%;
	transform:translateX(-50%);
	width:80%;
}

.comm {
	font-size: 124%;
	font-weight: bold;
	letter-spacing: 0;
	font-feature-settings: "palt";
}

.comm span {
	display: inline-block;
	background:#00559D;
	color:#FFF;
	padding:0 5px;
	margin-bottom:5px;
}

@media screen and (min-width: 481px){
.comm {font-size: 180%;}
.marbott {margin-bottom:30px;}
}

@media screen and (min-width: 769px){
section#problem .proimg img {
	max-width: 750px;
}
section#problem .proimg .point {
	width:70%;
}
}

/*-- お問い合わせボタンエリア（共通） --*/

section.inqBox {
	background:#004786;
	padding:25px 5px 10px 5px;
}

section.inqBox .inqttl {
	position: relative;
	display: inline-block;
	padding: 0 25px;
	font-size: 120%;
	font-weight: bold;
	letter-spacing: 0em;
	font-feature-settings: "palt";
	color: #FFF;
}
section.inqBox .inqttl:before,
section.inqBox .inqttl:after {
 	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 25px;
	height: 2px;
	background-color: #FFF;
}
section.inqBox .inqttl:before {
	left:0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
section.inqBox .inqttl:after {
	right:0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

section.inqBox .inqBtn {
	display: flex;
	flex-direction: column;
	width:80%;
	margin: 5px auto 0 auto;
}

section.inqBox .inqBtn a {
	margin-bottom:15px;
}


@media screen and (min-width: 481px){
section.inqBox .inqBtn {
	flex-direction: row;
	gap:2%;
	max-width:800px;
}
	
}

/*-- 土地活用実例 --*/

section#showcase {
	background:#E9EEF1;
	padding:30px 20px 5px 20px;
}

section#showcase h2 {
	font-size:170%;
	position: relative;
	margin-bottom: 35px;
}

section#showcase h2:before {
content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
	transform:translateX(-50%); 
    bottom: -8px;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: #9FA0A0;
}

section#showcase h2 span {
	color:#00559D;
	font-size:50%;
	display: block;
}

section#showcase .case {
	background: #FFF;
	border-radius:10px;
	padding:20px 20px 20px 20px;
	position: relative;
	margin-bottom:30px;
}

section#showcase .case .caseNo {
	position: absolute;
	top:-10px;
	left:0;
	width:12.1%;
}

section#showcase .case h3 {
	font-size:125%;
	color:#1C65A2;
	line-height: 120%;
}

section#showcase .summary {
	display: flex;
	flex-direction: column;
}

section#showcase .summary .showma {
	margin-top:20px;
}

section#showcase .summary .showma dl {
	width:95%;
	margin:20px auto 10px auto;
	padding-left:1em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-size:90%;
	letter-spacing: 0em;
	font-feature-settings: "palt";
}

section#showcase .summary .showma dl dt {
	width:30%;
	text-align: left;
	position: relative;
}

section#showcase .summary .showma dl dt:before {
 	content: '●';
	position: absolute;
	top: 0;
	left:-1.2em;
	display: inline-block;
	width: 23px;
	height: 2px;
	color: #00559D;
}

section#showcase .summary .showma dl dd {
	width:70%;
	text-align: left;
}

section#showcase .summary .showprice {
	text-align: left;
}

section#showcase .summary .showprice .pricebox {
	background:#F2F2F3;
	padding:10px 15px 7px 15px;
	margin-bottom:10px;
}

section#showcase .summary .showprice .tab {
	background:#1c65a2;
	border-radius: 3px 3px 0 0;
	color:#FFF;
	padding:2px 5px 1px 5px;
	display: inline-block;
	text-align: left;
	font-weight:bold;
	font-size:85%;
}

section#showcase .showprice .pricebox dl.pricetable {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	font-size:80%;	
	font-weight:bold;
	border-bottom:#727171 1px dashed;
	margin-bottom:8px;
	letter-spacing: 0;
	font-feature-settings: "palt";
}

section#showcase .showprice .pricebox dl.pricetable dt {
	width:48%;
}

section#showcase .showprice .pricebox dl.pricetable dd {
	width:52%;
	text-align:right !important;
}

.price {
	font-size:185%;
	font-family: "acumin-variable",sans-serif;
	font-variation-settings: 'wght' 700, 'wdth' 100, 'slnt' -8;
	padding-right:2px;
}

section#showcase dl.yield {
	border:#1C65A2 3px solid;
	padding: 2px 5px 5px 15px;
	display: flex;
	flex-direction: row;
	align-items:center;
	font-weight: bold;
	color:#1C65A2;
}

section#showcase dl.yield dt {
	font-size:85%;
	width:30%;
}

section#showcase dl.yield dd {
	width:65%;
	text-align: right;
}
/*section#showcase .summary .showprice img {
	display: block;
	margin-bottom: 10px;
}*/
.tx-m {font-size:125% !important;}
.tx-ml {font-size:200% !important;}
sup {font-size:50%;}

@media screen and (min-width: 641px){
section#showcase .case {
max-width: 1200px;
margin-left:auto;
margin-right:auto;
}

section#showcase .case h3 {
font-size:180%;
line-height: 120%;
margin-top:30px;	
}

section#showcase .summary {
flex-direction: row;
width:100%;
margin-top:30px;
}
section#showcase .summary .showma {width: 50%;}
section#showcase .summary .showprice {width: 45%; margin-left:5%;}
section#showcase .summary .showprice img {width: 80%; margin-bottom: 10px;}

}

/*-- 参考プラン --*/

section#plan {
	background:#B2C5DB;
	padding:0 0 20px 0;
}

section#plan .ttlarea {
	background:#004786;
	padding:20px 15px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

section#plan .ttlarea {
  height: 240px;
  background-color: #004786;
  position: relative;
  overflow-x: hidden;
}
section#plan .ttlarea::before,
section#plan .ttlarea::after {
  content: "";
  display: block;
  width: 50vw;
  height: 100%;
  position: absolute;
  bottom: 0;
  background-color: #B2C5DB;
}
section#plan .ttlarea::before {
  left: 0;
  transform: skew(80deg);
  transform-origin: bottom center;
}
section#plan .ttlarea::after {
  right: 0;
  transform: skew(-80deg);
  transform-origin: bottom center;
}

section#plan .ttlarea h2 {
	font-size:170%;
	position: relative;
	margin-bottom: 35px;
	color:#FFF;
}

section#plan .ttlarea h2:before {
content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
	transform:translateX(-50%); 
    bottom: -8px;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: #FFF;
}

section#plan .ttlarea h2 span {
	color:#FFF;
	font-size:50%;
	display: block;
}

section#plan .ttlarea p {
	color:#FFF;
	line-height: 140%;
}

section#plan .planitem {
	margin:10px 20px;
}

section#plan .planitem h3 {
	text-align: left;
	font-size:124%;
	margin-bottom: 3px;
}

section#plan .planitem h3 span {
	background:#004786;
	color:#FFF;
	display: inline-block;
	padding:5px 8px 4px 8px;
}

section#plan .planitem .plansumm {
	display:flex;
	flex-direction: column;
	margin-bottom:20px;
}

section#plan .planitem .plansumm .itemph {
	margin-bottom:15px;
}

section#plan .planitem .plansumm .planma {
	box-shadow: 1px 1px 3px rgba(124, 123, 124, 0.75);
	background: #FFFFFF;
	line-height: 1;
}

section#plan .planitem .plansumm .planma img {
	aspect-ratio: 600 / 392;
	object-fit: contain;
}

.slick-prev::before, .slick-next::before {color:#000 !important;}
.slick-prev {left:10px !important; z-index: 10;}
.slick-next {right:10px !important;}
.slick-list {height: 100% !important;}

@media screen and (min-width: 481px){
section#plan .planitem {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
/*section#plan .planitem .plansumm {flex-direction: row;}	
section#plan .planitem .plansumm .itemph {margin-bottom:0;}	*/
.sp {display: none;}
}

/*-- 選ばれる3つの理由 --*/

section#reasons {
	padding:30px 20px 5px 20px;
    background: linear-gradient(rgba(72,116,173, 0.8), rgba(72,116,173, 0.8)), url(images/bg_reasons.jpg) no-repeat;
	background-size:100%;
	margin-bottom: 40px;
}

section#reasons h2 {
	font-size:170%;
	position: relative;
	margin-bottom: 35px;
	color:#FFF;
	line-height:140%;
}

section#reasons h2:before {
content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
	transform:translateX(-50%); 
    bottom: -8px;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: #9FA0A0;
}

section#reasons h2 span {
	color:#BDC6E0;
	font-size:50%;
	font-weight:bold;
	display: block;
}

section#reasons h2 b {
	font-size:130%;
}

section#reasons .reasonbox {
	background: #FFF;
	border-radius:10px;
	padding:50px 25px 15px 25px;
	position: relative;
	margin-bottom:30px;
	box-shadow: 2px 2px 2px rgba(76, 76, 76, 0.8);
}

section#reasons .reasonbox .reasonNo {
	position: absolute;
	top:0;
	left:25px;
	background:#004786;
	color:#FFF;
	display: inline-block;
	padding:0 15px 2px 15px;
	font-size:110%;
	font-weight:bold;
}

section#reasons .reasonbox .reasonNo b {
	font-size:145%;
	font-family: "acumin-variable",sans-serif;
	font-variation-settings: 'wght' 600, 'wdth' 100, 'slnt' -8;
	/* font-variation-settings: "slnt" 0, "wdth" 100, "wght" 194.2857; default*/
	padding-left:3px;
}

section#reasons .reasonbox h3 {
	font-size:125%;
	color:#1C65A2;
	line-height: 130%;
	letter-spacing: 0;
	font-feature-settings: "palt";
	margin-bottom: 15px;
}

section#reasons .reasonbox h3 span {
	background:#d5e0ee;
	padding-right:5px;
	margin-left:4px;
}

section#reasons .reasonitem {
	display: flex;
	flex-direction: column;
}

section#reasons .reasonitem .reasonimg {
	margin-bottom: 15px;
}

section#reasons .reasonitem .reasonimg .wdph {
	width:70%;
}

section#reasons .reasonitem p {
	text-align:left;
	letter-spacing: ;
	font-feature-settings: "palt";
	line-height: 145%;
}

@media screen and (min-width: 481px){
section#reasons .reasonbox {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
section#reasons .reasonbox h3 {font-size:180%;}
section#reasons .reasonitem {flex-direction: row; margin-top:30px;}
section#reasons .reasonitem .reasonimg {width: 45%;}
section#reasons .reasonitem p {width: 55%; padding-left:1.5em;}
}

@media screen and (min-width: 769px){
section#reasons .reasonbox {
padding:50px 50px 15px 50px;
}
section#reasons .reasonbox .reasonNo {
left:50px;
}
section#reasons .reasonitem .reasonimg .wdph {
	width:85%;
}
}

@media screen and (min-width: 969px){
section#reasons .reasonbox {
padding:50px 100px 15px 100px;
}
section#reasons .reasonbox .reasonNo {
left:100px;
}
	
section#reasons .reasonitem {align-items: center;}
section#reasons .reasonitem p {width: 55%; padding-left:4em; line-height:180%;}

}

/* 「iCCo-イッコ-」の強み */

section#keystrengths {
	background:#F1F5F7;
	padding:30px 20px 20px 20px;
}

section#keystrengths h2 {
	font-size:170%;
	position: relative;
	margin-bottom:20px;
}

section#keystrengths h2:before {
content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
	transform:translateX(-50%); 
    bottom: -8px;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: #9FA0A0;
}

section#keystrengths h2 span {
	color:#00559D;
	font-size:50%;
	display: block;
}

section#keystrengths .strengthbox {
	background: #D8E4EE;
	border-radius:10px;
	padding:65px 20px 20px 20px;
	position: relative;
	margin-top:80px;
}

section#keystrengths .strengthbox .strengthNo {
	position: absolute;
	top:-25px;
	left:20px;
	font-size:250%;
	font-weight: bold;
	color:#446FA9;
	border-bottom:1px #446FA9 solid;
	font-family: "acumin-variable",sans-serif;
	font-variation-settings: 'wght' 600, 'wdth' 100, 'slnt' 0;
}

section#keystrengths .strengthbox h3 {
	font-size:135%;
	color:#1C65A2;
	line-height: 155%;
	text-align: left;
	margin-bottom:15px;
	letter-spacing: 0;
	font-feature-settings: "palt";
}

section#keystrengths .strengthbox p {
	text-align:left;
	letter-spacing: 0;
	font-feature-settings: "palt";
	line-height: 145%;
}

section#keystrengths .strengthbox .keyimg {
	position: absolute;
	top:-50px;
	right:30px;
	width:50%;
	max-width:170px;
}

@media screen and (min-width: 481px){
section#keystrengths .strengthbox {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
section#keystrengths .strengthbox h3 {font-size:180%;}
section#keystrengths .strengthbox .keyimg {
	max-width:170px;
}
}

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

section#keystrengths .strengthbox .keyimg {
	max-width:200px;
}
}

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

.pc769 {display:none;}

}

@media screen and (min-width: 769px){
.sp768 {display:none;}
section#keystrengths .strengthbox {
padding:80px 80px 25px 80px;
}
section#keystrengths .strengthbox .strengthNo {
	top:10px;
	left:80px;
}
section#keystrengths .strengthbox .strengthNo span {
	font-size:75%;
}
	
section#keystrengths .strengthbox .pcinner {
display: flex;
justify-content: space-between;
gap:2%;
align-items: flex-end;
}
section#keystrengths .strengthbox .pcinner .pclead {width:60%;}
section#keystrengths .strengthbox .pcinner .pcimg {width:38%; max-width:300px;}
}

/* 会社概要,店舗情報 */

section#corporate {
	padding:30px 20px 20px 20px;
}

section#corporate h2,
section#shopinfo h2 {
	font-size:170%;
	position: relative;
	margin-bottom:25px;
}

section#corporate h2:before,
section#shopinfo h2:before {
content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
	transform:translateX(-50%); 
    bottom: -8px;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: #9FA0A0;
}

section#corporate h2 span,
section#shopinfo h2 span {
	color:#00559D;
	font-size:50%;
	display: block;
}

section#corporate dl.corposumm {
	border-bottom:#000 0.5px solid;
	display: flex;
}

section#corporate dl.corposumm dt {
	background:#F6F6F6;
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	font-size:85%;
	width:25%;
}

section#corporate dl.corposumm dd {
	padding:5px 0 5px 10px;
	font-size:85%;
	text-align:left;
	width:75%;
}

.bortop {border-top:#000 0.5px solid;}

@media screen and (min-width: 481px){
section#corporate dl.corposumm {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}

/* 店舗情報 */

section#shopinfo {
	padding:30px 20px 30px 20px;
	margin-bottom:70px;
}
section#shopinfo .infobox {
	display: flex;
	flex-direction: column;
}

section#shopinfo .infobox .infomap {
	margin-bottom: 25px;
}

section#shopinfo .infobox .shopsumm {
	text-align: left;
	line-height: 125%;
}

section#shopinfo .infobox .shopsumm b {
	display: block;
	margin-bottom: 0.5em;
}

section#shopinfo .infobox .shopsumm p {
	margin-bottom: 0.5em;
}

.teltel {font-weight:bold;}
.tx-s {font-size:75%;}
a[href*="tel:"] {
	font-size:180%;
	font-family: "acumin-variable",sans-serif;
	font-variation-settings: 'wght' 600, 'wdth' 100, 'slnt' 0;
	text-decoration: none;
}

@media screen and (min-width: 768px){
a[href*="tel:"] {
    pointer-events: none;
	cursor: default;
    text-decoration: none;
}
}

@media screen and (min-width: 481px){
section#shopinfo {
text-align: center;
margin-bottom:180px;
}

section#shopinfo .infobox {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

section#shopinfo .infobox .infomap {
width: 100%;
max-width: 800px;
}
section#shopinfo .infobox .shopsumm {
padding-left: 1em;
}	
	
}


/*-- お問い合わせボタンエリア（最下部*初版*） --*/

section.inqBox02 {
	width:100%;
	display: flex;
	flex-direction:row;
	position: fixed;
	bottom:-1px;
	line-height: 1;
}

section.inqBox02 a {
	display:block;
	width:50%;
}

section.inqBox02 a.consul {
	background: #f18d00;
}

section.inqBox02 a.question {
	background: #00a65a;
}

section.inqBox02 a:hover {
	opacity: 0.7;
}

@media screen and (min-width: 481px){
section.inqBox02 { display: none;}
/*
section.inqBox02 {
gap:2%;
max-width:800px;
}*/	
}

/*-- お問い合わせボタンエリア（最下部修正版） --*/

section.inqBox03 {
	display: none;
	background:#004786;
	padding:15px 5px 15px 5px;
	position: fixed;
	bottom:0;
	z-index: 50;
}

section.inqBox03 .inqBtn {
	display: flex;
	flex-direction: column;
	width:80%;
	margin: 5px auto 0 auto;
}

section.inqBox03.inqBtn a {
	margin-bottom:15px;
}

@media screen and (max-width: 480px){
.marbott {margin-bottom: 40px;}
}


@media screen and (min-width: 481px){
section.inqBox03 {display:block;}

section.inqBox03 .inqBtn {
flex-direction: row;
gap:2%;
max-width:800px;
}
}


section#mv .main-img img {aspect-ratio: 1920 / 905;}
section#mv .catch img {aspect-ratio: 1471 / 481;}
section#problem .proimg img {aspect-ratio: 1082 / 1306;}
section#problem .proimg .point img {aspect-ratio: 924 / 131;}

@media (max-width: 768px){
section#mv .main-img img {aspect-ratio: 750 / 857;}
section#problem .proimg img {aspect-ratio: 600 / 714;}
section#problem .proimg .point img { width: 100%;}

}

@media (min-width: 769px){
/*#plan img {pointer-events: none;}*/
#plan img {cursor: pointer;}
#plan img.notap {pointer-events: none;}
}

@media (max-width: 768px){
#plan img.notap {pointer-events: none;}
}