@charset "UTF-8";
/* ######################################################################################

　マンションギャラリーでできること

###################################################################################### */
/* ====================================================
  共通
==================================================== */
.pageNagare .wallBelt.topZero{
    padding-top: 0;
}

.pageNagare .nagare .copy {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.pageNagare .nagare .copy .text,
.pageNagare .nagare .copy .photo {
	width: 48%;
}
.pageNagare .nagare .copy .text { text-align: left;}
.pageNagare .nagare .copy .text h2 {
	font-size: 280%;
	font-weight: normal;
	margin-bottom: 20px;
}
.pageNagare .nagare .copy .text p { font-size: 130%;}

.pageNagare .wrapBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.pageNagare .wrapBox .leftBox {
	order: 1;
	width: 18%;
	font-size: 130%;
	border-top: solid 1px #ccc;
	text-align: left;
}
.pageNagare .wrapBox .leftBox li {
	border-bottom: solid 1px #ccc;
}
.pageNagare .wrapBox .leftBox li a {
	padding: 15px 10px;
	display: block;
	color: #222;
}

.pageNagare .wrapBox .rightBox {
	order: 2;
	width: 78%;
	text-align: left;
}
.pageNagare .wrapBox .rightBox .inner { margin-bottom: 120px;}

.pageNagare .wrapBox .rightBox h3 {
	background: #222;
	color: #fff;
	font-weight: normal;
	margin-bottom: 20px;
	padding: 20px;
	font-size: 200%;
}
.pageNagare .wrapBox .rightBox .flowlist dl {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
.pageNagare .wrapBox .rightBox .flowlist dl dt { width: 55%; order: 2;}
.pageNagare .wrapBox .rightBox .flowlist dl dd { width: 40%;}

.pageNagare .wrapBox .rightBox .flowlist dl dt h4 {
	font-weight: normal;
	font-size: 200%;
	margin-bottom: 15px;
}
.pageNagare .wrapBox .rightBox .flowlist dl dt p { font-size: 130%;}
.pageNagare .wrapBox .rightBox .flowlist dl dt p.step {
	font-size: 160%;
	border-bottom: dotted 2px #ccc;
	margin-bottom: 15px;
}

.pageNagare .wrapBox .rightBox .flow2 p { font-size: 130%;}
.pageNagare .wrapBox .rightBox .flow2 p img { margin-top: 60px; margin-bottom: 40px;}

.pageNagare .wrapBox .rightBox .flow3 .call {
	border: solid 1px #222;
	padding: 10px;
	text-align: center;
	margin-bottom: 30px;
	font-size: 160%;
    letter-spacing: 0.15em;
}
.pageNagare .wrapBox .rightBox .flow3 .call span { font-size: 200%; font-weight: bold;}
.pageNagare .wrapBox .rightBox .flow3 .callcenter {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-bottom: dotted 1px #ccc;
	padding-bottom: 40px;
	margin-bottom: 60px;
}
.pageNagare .wrapBox .rightBox .flow3 .callcenter.second { border-bottom: none;}
.pageNagare .wrapBox .rightBox .flow3 .callcenter dt { width: 55%;}
.pageNagare .wrapBox .rightBox .flow3 .callcenter dt p {font-size: 140%;}
.pageNagare .wrapBox .rightBox .flow3 .callcenter dd { width: 40%;}
.pageNagare .wrapBox .rightBox .flow3 .callcenter.second dt { order: 2;}

.pageNagare .wrapBox .rightBox .flow3 .callcenter p.owner { font-weight: bold; text-align: center;}
.pageNagare .wrapBox .rightBox .flow3 .callcenter p.owner span { font-size: 80%;}
.pageNagare .wrapBox .rightBox .flow3 .callcenter h4 { font-size: 250%; letter-spacing: 0.15em; margin: 20px 0; text-align: center; line-height: 1;}

.pageNagare .wrapBox .rightBox .services_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2.5vw 0;
}

.pageNagare .wrapBox .rightBox .services_box .service_category.pink {width: 100%;}
.pageNagare .wrapBox .rightBox .services_box .service_category.orange { width: 19.6%;}
.pageNagare .wrapBox .rightBox .services_box .service_category.blue { width: 19.1%;}
.pageNagare .wrapBox .rightBox .services_box .service_category.green { width: 20.3%;}
.pageNagare .wrapBox .rightBox .services_box .service_category.purple { width: 33.9%; }

.pageNagare .wrapBox .rightBox .services_box .service_category .category_ttl {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 0.5vw 0 0.5vw 1vw;
    font-size: clamp(10px, 1.866666662vw, 14px);
    font-weight: bold;
    margin-bottom: 1.5vw;
    position: relative;
}
.pageNagare .wrapBox .rightBox .services_box .service_category .category_ttl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0.4vw;
    height: 100%;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.pink .category_ttl {
    color: #af4552;
    border-top: 1px solid #af4552;
    border-right: 1px solid #af4552;
    border-bottom: 1px solid #af4552;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.pink .category_ttl::before {
    background: #af4552;
}

.pageNagare .wrapBox .rightBox .services_box .service_category.orange .category_ttl {
    color: #d56100;
    border-top: 1px solid #d56100;
    border-right: 1px solid #d56100;
    border-bottom: 1px solid #d56100;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.orange .category_ttl::before {
    background: #d56100;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.blue .category_ttl {
    color: #005292;
    border-top: 1px solid #005292;
    border-right: 1px solid #005292;
    border-bottom: 1px solid #005292;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.blue .category_ttl::before {
    background: #005292;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.green .category_ttl {
    color: #328c28;
    border-top: 1px solid #328c28;
    border-right: 1px solid #328c28;
    border-bottom: 1px solid #328c28;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.green .category_ttl::before {
    background: #328c28;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.purple .category_ttl {
    color: #734681;
    border-top: 1px solid #734681;
    border-right: 1px solid #734681;
    border-bottom: 1px solid #734681;
}
.pageNagare .wrapBox .rightBox .services_box .service_category.purple .category_ttl::before {
    background: #734681;
}
.pageNagare .wrapBox .rightBox .flow4.inner { margin-bottom: 0;}
.pageNagare .wrapBox .rightBox .flow4 .map img { margin-bottom: 15px;}
.pageNagare .wrapBox .rightBox .carnavi {
	background: #221919;
	color: #fff;
	padding: 20px;
	margin-top: 30px;
}
.pageNagare .wrapBox .rightBox .carnavi h3 { font-size: 170%; margin-bottom: 15px; font-weight: normal; text-align: center; background: none; padding: 0;}
.pageNagare .wrapBox .rightBox .carnavi .add {
	background: #fff;
	line-height: 1;
	font-size: 160%;
	padding: 15px;
	color: #222;
	margin-bottom: 15px;
	text-align: center;
}
.pageNagare .wrapBox .rightBox .carnavi p { text-align: center; font-size: 140%;}

@media screen and (max-width: 767px) {
	.pageNagare .nagare .copy .text,
	.pageNagare .nagare .copy .photo { width: 100%;}
	.pageNagare .nagare .copy .text { order: 2; margin-top: 20px;}
	.pageNagare .nagare .copy .photo { order: 1;}
	.pageNagare .nagare .copy .text h2 { line-height: 1.2;}
	
	.pageNagare .wrapBox .leftBox,
	.pageNagare .wrapBox .rightBox { width: 100%;}
	.pageNagare .wrapBox .leftBox { margin-bottom: 50px;}
	.pageNagare .contents.wrapBox { margin-top: 0; padding-top: 0;}
	.pageNagare .wrapBox .rightBox .flowlist dl dt,
	.pageNagare .wrapBox .rightBox .flowlist dl dd { width: 100%;}
	.pageNagare .wrapBox .rightBox .flowlist dl dd { margin-bottom: 15px;}
	.pageNagare .wrapBox .rightBox .flow3 .callcenter dt,
	.pageNagare .wrapBox .rightBox .flow3 .callcenter dd { width: 100%; margin-bottom: 20px;}
	.pageNagare .wrapBox .rightBox .flow3 .callcenter h4 { font-size: 230%; letter-spacing:inherit;}
	
	.pageNagare .wrapBox .rightBox .flow3 .callcenter.second { margin-bottom: 0;}
	.pageNagare .wrapBox .rightBox .services_box { width: 90%; margin: auto;}
	.pageNagare .wrapBox .rightBox .services_box .service_list { margin-bottom: 60px;}
	.pageNagare .wrapBox .rightBox .services_box .service_list:last-child { margin-bottom: 20px;}
    .pageNagare .wrapBox .rightBox .services_box .service_category .category_ttl {
        padding: 1.5vw 0 1.5vw 5vw;
        font-size: clamp(10px, 4.533333322vw, 34px);
        margin: 0 auto 5vw;
    }	
	.pageNagare .wrapBox .rightBox .services_box .service_category.pink {width: 100%;}
	.pageNagare .wrapBox .rightBox .services_box .service_category.orange { width: 100%;}
	.pageNagare .wrapBox .rightBox .services_box .service_category.blue { width: 100%;}
	.pageNagare .wrapBox .rightBox .services_box .service_category.green { width: 100%;}
	.pageNagare .wrapBox .rightBox .services_box .service_category.purple { width: 100%; }	
	
	.pageNagare .wrapBox .rightBox .services_box .service_category .category_ttl::before { width: 1.25vw;}

}



/* ====================================================
  attention
==================================================== */
.pageNagare .attentionList li{font-size: 80%; line-height: 1.7;}

@media print, screen and (min-width: 768px) {
	.pageNagare .attentionList{text-align: left;}
}
@media screen and (max-width: 767px) {
	.pageNagare .attentionList{text-align: left;}
}

/* end */