﻿@charset "UTF-8";
/**
 * 口コミ閲覧説明ページLP改修　追加cssフォルダ
 * @since 2021-05-21
 */

/* 共通 */
/* 全体の余白 */
.trouble,.voice,.why {
	margin: 70px 0 0;
}
.solution {
	margin: 50px 0 0;
}
.evaluation,.end-txt {
	margin: 70px 0 ;
}
/* 色 */
.r_color {
	color: #F82058;
}
/*arrow-ttl-wrap*/
.arrow {
	margin: 50px 0px 0px;
}
.arrow-ttl-wrap {
	background: url(../images/arrow-bg01.png) center no-repeat;
	background-size: 200px 90px;
}
.arrow-ttl__inner-txt {
	text-align: center;
	font-size: 22px;
	line-height: 30px;
	letter-spacing: 1px;
	font-weight: bold;
	padding: 3% 3% 5% 3%;
}


/* mv */
.mv-img-item {
	height: auto;
	max-width:1110px
}

/* step */
.step {
	margin: 20px 0 60px;
}
.step-ttl {
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #33495F;
}
.step-txt {
	text-align: center;
}

.step-box {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	margin: 80px 0 0 0;
}
.step-box-inner {
	flex-basis: 30%;
}
.step-box-inner01,.step-box-inner02 {
	margin: 0 10px 0;
}
.step-box-inner03 {
	margin: 0 0px 0 10px;
}
.step-item01 {
	background-color: #f5f9fc;
	padding: 56px 10px 99px;
}
.step-item02 {
	background-color: #f5f9fc;
	padding: 56px 10px 80px;
}
.step-item03 {
	background-color: #f5f9fc;
	padding: 56px 10px 30px;
}
.step-img--primary,.step-img--secondary {
	text-align: center;
	padding: 20px 0 0 0;
}
.step-img--tertiary {
	text-align: center;
}
i.fas.fa-caret-right {
	margin: 160px 0 0 0;
	font-size: 40px;
	color: #334455;
}
.step-item__ttl {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 34px;
}
.step-item03__bottom-txt {
	font-size: 10px;
	line-height: 13px;
	margin: 15px 0 0 0;;
}
.step-item__num {
	position: absolute;
	margin: -45px 0 0 0;
	width: 84px;
	height: 84px;
}
.step-tem__note {
	font-size: 10px;
}

/* trouble */
.trouble-list {
	line-height: 34px;
	font-size: 15px;
	background: url(../images/trouble_bg-img.jpg) center top no-repeat;
	padding: 20px 0px 0px 55px;
	min-height: 322px;
}
.trouble-bottom {
	font-size: 14px;
	margin: 60px 0 0 0;
}
.trouble-bottom__txt {
	margin: 30px 0 0;
}

/* solution */
.solution-box {
	background-color: #f5f9fc;
}
.solution-box-wrap {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
}
.solution-item {
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%;
}
.solution-item-ttl {
	background: #334455;
	color: #fff;
	font-size: 18px;
	text-align: center;
	margin: 25px 0 0 25px;
	padding: 4px 0px;
}
.solution-item-ttl01 {
	width:36% ;
}
.solution-item-ttl02 {
	width: 50%;
}
.solution-item-ttl03 {
	width: 74%;
}
.solution-item-ttl04 {
	width: 54%;
}

.solution-item01 {
	height: 300px;
	background: url(../images/comment-bg01.png) center bottom no-repeat;
	position: relative;
	margin: 10px 0 20px;
}
.solution-item02 {
	height: 305px;
	background: url(../images/comment-bg02.png) center bottom no-repeat;
	position: relative;
	margin: 10px 0 20px;
}
.solution-item03 {
	height: 325px;
	background: url(../images/comment-bg03.png) center bottom no-repeat;
	position: relative;
	margin: 0 0 40px;
}
.solution-item04 {
	height: 324px;
	background: url(../images/comment-bg04.png) center bottom no-repeat;
	position: relative;
	margin: 0 0 40px;
}

.solution-item-inner{
	font-size: 14px;
}
.solution-item-inner__age {
	font-weight: bold;
}
.solution-item-inner__txt01 {
	position: absolute;
	top: 124px;
	left: 150px;
	letter-spacing: -1px;
}
.solution-item-inner__age01 {
	position: absolute;
	top: 275px;
	left: 160px;
}
.solution-item-inner__txt02 {
	position: absolute;
	top: 118px;
	left: 82px;
	letter-spacing: -1px;
}
.solution-item-inner__age02 {
	position: absolute;
	top: 284px;
	left: 205px;
}
.solution-item-inner__txt03 {
	position: absolute;
	top: 152px;
	left: 159px;
	letter-spacing: -1px;
}
.solution-item-inner__age03 {
	position: absolute;
	top: 304px;
	left: 150px;
}
.solution-item-inner__txt04 {
	position: absolute;
	top: 129px;
	left: 89px;
	letter-spacing: -1px;
	line-height: 20px;
}
.solution-item-inner__age04 {
	position: absolute;
	top: 303px;
	left: 195px;
}

/* evaluation */
.evaluation-txt {
	font-size: 14px;
	margin: 0px 0 30px;
}
.evaluation-img {
	border: 1px solid #eee;
	padding: 20px;
	border-radius: 4px;
	background-color: #f3f3f3;
	width: 733px;
	margin: 0 auto;
}
.evaluation-txt:first-of-type {
	margin-top: 30px;
}
.arrow-evaluation {
	font-size: 32px;
	font-weight: bold;
	text-align: center;
}
.evaluation-top-wrap {
	position: relative;
}
.evaluation-top-wrap__txt {
	position: absolute;
	bottom: 37px;
	left: 460px;
	letter-spacing: -1px;
	line-height: 17px;
}

/* voice */
/*エリアの配置・背景の設定*/
.question{
	background-image: linear-gradient( -45deg, #fff 25%, #ebf6f4 25%, #ebf6f4 50%, #fff 50%, #fff 75%, #ebf6f4 75%, #ebf6f4 );
	background-size: 6px 6px;
	padding-bottom: 40px;
}
.question-wrap {
	position: relative;
	top: 20px;
	margin: 0 auto;
	background: #fff;
	width: 95%;
}
.question-inner {
	width: 95%;
	margin: 0 auto;
	padding: 40px 0 60px;
}
/*共通見出し：Question*/
.question-ribbon {
	font-weight: bold;
	display: inline-block;
	position: relative;
	padding: 2px 15px;
	font-size: 14px;
	color: #334455;
	background: #cde9e4;
	z-index: 10;
}
.question-ribbon:before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 10px transparent;
	border-right: solid 15px #c2dcd6;/*折り返し部分*/
}
.action-ttl,.most-reference-ttl,.relief-ttl,.useful-ttl {
	background-color: #fdfdf3;
	padding: 15px 0;
	text-align: center;
	font-size: 22px;
	position: relative;
	left: 14px;
	bottom: 12px;
	margin: 0 20px 0 0;
}
.reference-txt {
	font-size: 15px;
	text-align: center;
	padding: 25px 0 40px;
}
/* action */
.action-graph-img {
	margin: 30px auto 40px 20px;
}
.action-graph-img__item {
	width: 644px;
	height: 227px;
}
.action-bottom__txt {
	text-align: right;
	margin: 0 0 30px 0;
}
.action {
	margin: 0 0 60px 0;
}
/* most-reference */
.most-reference {
	margin: 0 0 60px;
}
.most-reference-box {
	border: 1px solid #f3f3f3;
	border-radius: 6px;
	margin: 35px 0px 30px;
}
.most-reference-box__item-ttl {
	color: #334455;
	background-color: #f3f3f3;
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0;
	text-align: center;
}
.most-reference-box__wrap {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	width: 80%;
	margin: 0 auto;
}
.most-reference-box__item-rank01{
	background: url(../images/reference-rank_01.png) 13% center no-repeat;
	margin: 0 auto;
	border-bottom: 1px dotted #334455;
	font-size: 30px;
	font-weight: bold;
	padding: 20px 0 12px 120px;
	max-width: 500px;
	width: 65%;
}
.most-reference-box__item-rank01--02 {
	background: url(../images/reference-rank_01.png) 14% center no-repeat;
	margin: 0 auto;
	border-bottom: 1px dotted #334455;
	font-size: 20px;
	font-weight: bold;
	padding: 20px 0 12px 120px;
	max-width: 500px;
	width: 65%;
}
.most-reference-box__item-rank02 {
	background: url(../images/reference-rank_02.png) 14% center no-repeat;
	border-bottom: 1px dotted #334455;
	font-size: 20px;
	padding: 20px 0 12px 122px;
	max-width: 500px;
	width: 65%;
}
.most-reference-box__item-rank03 {
	background: url(../images/reference-rank_03.png) 14% center no-repeat;
	border-bottom: 1px dotted #334455;
	font-size: 20px;
	padding: 20px 0 12px 122px;
	max-width: 500px;
	width: 65%;
}
.most-reference-box__item-rank--other {
	font-size: 14px;
	padding: 15px 0 0px 122px;
	max-width: 500px;
	width: 65%;
	margin: 0 auto;
}
.most-reference-box__item-rank--other02 {
	font-size: 14px;
	margin: 0 auto;
	max-width: 500px;
	width: 65%;
	padding: 5px 0 0px 122px;
}
.most-reference-box__item-num {
	width: 30%;
	padding: 20px 0 12px 0px;
	border-bottom: 1px dotted #334455;
}
.most-reference-box__item-num--01 {
	font-size: 30px;
	font-weight: bold;
}
.most-reference-box__item-num--01-02 {
	font-size: 20px;
	padding: 25px 0px 12px 40px;
	text-align: left;
	font-weight: bold;
}
.most-reference-box__item-num--02,.voice .reference-box__item-num-03 {
	width: 30%;
	font-size: 20px;
	padding: 25px 0px 12px 40px;
	border-bottom: 1px dotted #334455;
	text-align: left;
}
.most-reference-box__item-num--03 {
	width: 30%;
	font-size: 14px;
	padding: 15px 0px 12px 40px;
	text-align: left;
}
.most-reference-box__item-num--03-02 {
	width: 30%;
	font-size: 14px;
	padding: 5px 0px 0px 40px;
	text-align: left;
}
.most-reference-box__wrap-end {
	padding:0 0 13px 0;
}
.most-reference-txt {
	margin: 50px 0 0px;
	font-size: 14px;
}
.most-reference-txt__top {
	line-height: 26px;
	border: 2px solid #d0eae6;
	padding: 20px;
}
.most-reference__txt-bottom {
	letter-spacing: -1.5px;
	font-size: 14px;
	line-height: 26px;
}
/* relief */
.relief-head {
	font-size: 25px;
	letter-spacing: -1px;
	margin: 30px 0 40px;
	text-align: center;
}
.relief-graph-img {
	margin: 30px auto 40px 20px;
	text-align: center;
}
.relief-graph-img__item {
	width: 555px;
	height: 229px;
}
.relief-bottom {
	font-size: 14px;
	line-height: 26px;
	border: 2px solid #d0eae6;
	padding: 20px;
	margin: 0 0 60px 0;
}
.relief-bottom__txt-bottom {
	margin: 25px 0 0 0;
}
/* useful */
.useful-head {
	font-size: 26px;
	letter-spacing: -1px;
	margin: 30px 0 40px;
	text-align: center;
}
.useful-graph-img {
	margin: 30px auto 40px 20px;
	text-align: center;
}
.useful-graph-img__item {
	width: 524px;
	height: 515px;
}
.useful-txt {
	font-size: 14px;
	border: 2px solid #d0eae6;
	padding: 20px;
}
.useful-bottom__voice-link {
	margin: 0 auto;
	text-align: center;
	padding: 40px 0 0;
}
.useful-txt__item-middle {
	padding: 20px 0;
}


/*なぜマンションレビューに会員登録するの？*/
.waku {
	border: 2px solid #cde9e4;
}
.why{
	background: url(../images/bg_why.jpg) no-repeat left bottom;
	margin-top: 60px;
	background-size: 327px;
}
.why-ttl {
	padding-top: 40px;
}
.why-heading {
	font-weight: bold;
	text-align: center;
	font-size: 20px;
}
.why-heading--red {
	color: #f82058;
	font-weight: bold;
}
.why-desc {
	padding: 0 0 160px 150px;
}
.why-desc__item {
	padding: 4px 0 30px 60px;
	margin-bottom:4px;
}
.why-desc__item--01 {
	background: url(../images/no1.png) no-repeat left top;
	background-size: 50px 50px;
}
.why-desc__item--02 {
	background:url(../images/no2.png) no-repeat left top;
	background-size: 50px 50px;
}
.why-desc__item--03 {
	background:url(../images/no3.png) no-repeat left top;
	background-size: 50px 50px;
}
.why-desc__item--04 {
	background:url(../images/no4.png) no-repeat left top;
	background-size: 50px 50px;
}

/*マンションレビューを見ればマンション購入で失敗しないんです！！*/
.end-heading {
	text-align: center;
	font-size:32px;
	font-weight: bold;
	color:#f82058;
	margin: 30px;
}

.category_title .description-form-ttl {
	margin: 0 0 0 25px;
}
.category_title .category_title__yet-ttl {
	margin: 0 0 0 25px;
}
