@charset "UTF-8";
/*------------------------
ページタイトル
------------------------*/
/*--------共通--------*/
.page-ttl-area .page-ttl p {
    font-weight: bold;
    color: var(--mybrown);
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	.page-ttl-area .page-ttl p {
		font-size: 4.2rem;
	}
}
/*--------sp--------*/
@media screen and (max-width:767px) {
	.page-ttl-area .page-ttl p {
		font-size: 5.6vw;
	}
}
/*------------------------
結果
------------------------*/
/*--------共通--------*/
.recommendation .inner .lead {
	display: block;
	font-weight: bold;
	text-align: center;
	line-height: 1;
}
.recommendation .inner .plam-name {
	text-align: center;
}
.recommendation .inner .plam-name .num {
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	background: var(--accentcolor);
	position: relative;
}
.recommendation .inner .plam-name .num::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent #fefff1 transparent;
}
.recommendation .inner .plam-name h1 {
	font-weight: bold;
	color: var(--mybrown);
	background: #fefff1;
	border: 3px solid #f1db63;
	box-shadow: 4px 4px 0 #f1db63;
}
.recommendation .inner .point {
	background: var(--bgcolor) url(/customhome/html/user_data/assets/img/rdb/common/bg_texture25.png);
	position: relative;
}
.recommendation .inner .point .head {
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	position: relative;
}
.recommendation .inner .point .head::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	background: url(/customhome/html/user_data/assets/img/rdb/recipe/ashi_megaphone.svg) no-repeat 100%/contain;
}
.recommendation .inner .point ul {
	list-style: decimal inside;
}
.recommendation .inner .point .img {
	position: absolute;
}
.recommendation .inner .view img {
	height: auto;
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	.recommendation {
		padding: 80px 0;
	}
	.recommendation .inner {
		width: 1000px;
		margin: auto;
	}
	.recommendation .inner .lead {
		font-size: 2.1rem;
		margin-bottom: 30px;
	}
	.recommendation .inner .plam-name {
		margin-bottom: 44px;
	}
	.recommendation .inner .plam-name .num {
		font-size: 1.8rem;
		padding: 10px 42px;
	}
	.recommendation .inner .plam-name .num::after {
		border-width: 0 0 7px 8px;
	}
	.recommendation .inner .plam-name h1 {
		font-size: 3.2rem;
		padding: 20px 12px 12px;
		margin-top: -19px;
	}
	.recommendation .inner .point {
		padding: 40px 40px 25px;
		margin-bottom: 60px;
	}
	.recommendation .inner .point .head {
		padding: 0 32px 4px 0;
		margin-bottom: 20px;
		font-size: 2.1rem;
	}
	.recommendation .inner .point .head::after {
		width: 38px;
		height: 41px;
	}
	.recommendation .inner .point ul {
		width: 84%;
	}
	.recommendation .inner .point ul li {
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.2;
		letter-spacing: .08em;
		margin-bottom: 15px;
	}
	.recommendation .inner .point .img {
		bottom: 0;
		right: 20px;
		width: 16%;
	}
	.recommendation .inner .view {
		flex-wrap: wrap;
		align-items: stretch;
		margin-bottom: 60px;
	}
	.btn a {
		background: #F44F1C url(/customhome/html/user_data/assets/img/rdb/common/icn_arrow_w.svg) no-repeat center right 15px;
		background-size: 25px;
		margin-bottom: 30px;
	}
	.btn a:hover {
		background: #D4380F url(/customhome/html/user_data/assets/img/rdb/common/icn_arrow_w.svg) no-repeat center right 12px;
		background-size: 25px;
	}
}
@media screen and (min-width:768px) and ( max-width:1040px) {
	.recommendation {
		padding: 80px 20px;
	}
	.recommendation .inner {
		width: 960px;
	}
	.recommendation .inner 
}
/*--------sp--------*/
@media screen and (max-width:767px) {
	.recommendation {
		padding: 8% 4.5%;
	}
	.recommendation .inner .lead {
		margin-bottom: 6%;
	}
	.recommendation .inner .plam-name {
		margin-bottom: 6%;
	}
	.recommendation .inner .plam-name .num {
		padding: 2% 5%;
	}
	.recommendation .inner .plam-name .num::after {
		border-width: 0 0 5px 6px;
	}
	.recommendation .inner .plam-name h1 {
		padding: 4% 3% 3%;
		margin-top: -3%;
		font-size: 5.07vw;
	}
	.recommendation .inner .point {
		padding:  6% 4.5% 4.5%;
		margin-bottom: 6%;
	}
	.recommendation .inner .point .head {
		padding: 0 10% 1% 0;
		margin-bottom: 4%;
		font-size: 5.07vw;
	}
	.recommendation .inner .point .head::after {
		width: 8vw;
		height: 9vw;
	}
	.recommendation .inner .point ul li {
		font-size: 4vw;
		text-align: justify;
		margin-bottom: 3%;
	}
	.recommendation .inner .point .img {
		right: 3%;
		top: -7.5%;
		width: 16%;
	}
	.recommendation .inner .view {
		margin-bottom: 6%;
	}
	.btn a {
		background: #F44F1C url(/customhome/html/user_data/assets/img/rdb/common/icn_arrow_w.svg) no-repeat  center right 3%;
		background-size: 5vw;
		margin-bottom: 3%;
	}
}
/*------------------------
その他
------------------------*/
/*--------共通--------*/
.others {
	background: url(/customhome/html/user_data/assets/img/rdb/common/bg_grain.jpg);
}
/*その他のおすすめ間取り*/
.others .others-plan  h3 {
	font-weight: bold;
	line-height: 1;
}
.others .others-plan ul li {
	position: relative;
}
.others .others-plan ul li .icn {
	background: #73b357;
	color: #fff;
	line-height: 1;
}
.others .others-plan ul li .img {
	position: relative;
}
.others .others-plan ul li .img::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-image: radial-gradient(ellipse , transparent 54%, #fff 68% );
	width: 100%;
	height: 100%;
}
.others .others-plan ul li .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.others .others-plan ul li .plam-name .num {
	display: inline-block;
	line-height: 1;
	text-align: center;
	background: var(--accentcolor);
	position: relative;
}
.others .others-plan ul li .plam-name .num::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent #fefff1 transparent;
}
.others .others-plan ul li .plam-name h4 {
	font-weight: bold;
}
/*modal*/
.js-modal {
	display: none;
	height: 100%;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}
.modal_bg {
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.js-modal .modal-inner {
	overflow-y: scroll;
	height: 100%;
}
.modal_content {
	position: relative;
	background: #fff;
	margin: auto;
	z-index: 999;
}
.js-modal-close.close-btn {
	position: absolute;
}
.js-modal-close.close-btn::before ,
.js-modal-close.close-btn::after {
	content: '';
	position: absolute;
	background: #fff;
}
.js-modal-close.close-btn::before {
	transform: rotate(45deg);
	left: 0;
}
.js-modal-close.close-btn::after {
	transform: rotate(-45deg);
	right: 0;
}
.js-modal .plam-name {
	text-align: center;
}
.js-modal .plam-name .num {
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	background: var(--accentcolor);
	position: relative;
}
.js-modal .plam-name .num::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent #fefff1 transparent;
}
.js-modal .plam-name h1 {
	font-weight: bold;
	color: var(--mybrown);
	background: #fefff1;
	border: 3px solid #f1db63;
	box-shadow: 4px 4px 0 #f1db63;
}
.js-modal .point {
	background: var(--bgcolor) url(/customhome/html/user_data/assets/img/rdb/common/bg_texture25.png);
	position: relative;
}
.js-modal .point .head {
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	position: relative;
}
.js-modal .point .head::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	background: url(/customhome/html/user_data/assets/img/rdb/recipe/ashi_megaphone.svg) no-repeat 100%/contain;
}
.js-modal .point ul {
	list-style: decimal inside;
}
.js-modal .point .img {
	position: absolute;
}
/*バナー*/
.others .bnr-area h3 {
	font-weight: bold;
	position: relative;
}
.others .bnr-area h3::after {
	content: '';
	position: absolute;
	background: url(/customhome/html/user_data/assets/img/rdb/common/ashi_Inspiration.png) no-repeat 100%/contain;
	transform: scale(-1, 1);
}
.others .bnr-area h3::before {
	content: '';
	position: absolute;
	background: url(/customhome/html/user_data/assets/img/rdb/common/img_mai.png) no-repeat 100%/contain;
	transform: rotate(-5deg);
}
.others .bnr-area ul li a {
	display: block;
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	.others {
		padding: 80px 0;
		margin-bottom: 100px;
	}
	.others .inner {
		width: 1000px;
		margin: auto;
	}
	.others .block:not(:last-of-type) {
		margin-bottom: 80px;
	}
	.others .block ul {
		flex-wrap: wrap;
	}
	/*その他のおすすめ間取り*/
	.others-plan h3 {
		font-size: 2.6rem;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30px;
	}
	.others-plan ul {
		justify-content: center;
	}
	.others .others-plan ul li {
		width: 400px;
	}
	.others .others-plan ul li:not(:nth-of-type(3n)) {
		margin-right: 50px;
	}
	.others .block ul li .icn {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 1.3rem;
		padding: 6px 8px;
	}
	.others .others-plan ul li .img {
		height: 340px;
		margin-bottom: 10px;
	}
	.others .others-plan ul li .plam-name .num {
		font-size: 1.4rem;
		padding: 6px 22px;
		margin-bottom: 6px;
	}
	.others .others-plan ul li .plam-name .num::after {
		border-width: 0 0 7px 8px;
	}
	.others .others-plan ul li .plam-name h4 {
		font-size: 1.8rem;
		transition: all .3s ease 0s;
	}
	.others .others-plan ul li a:hover .plam-name h4 {
		color: #4d888e;
	}
	/*modal*/
	.js-modal .modal-inner {
		padding: 100px 0;
	}
	.modal_content {
		padding: 40px;
		width: 70%;
		max-width: 1000px;
	}
	.js-modal-close.close-btn {
		right: 20px;
		top: 20px;
		width: 40px;
		height: 40px;
		cursor: pointer;
	}
	.js-modal-close.close-btn::before ,
	.js-modal-close.close-btn::after {
		top: 20px;
		width: 40px;
		height: 2px;
	}
	.js-modal .plam-name {
		margin-bottom: 44px;
	}
	.js-modal .plam-name .num {
		font-size: 1.8rem;
		padding: 10px 42px;
	}
	.js-modal .plam-name .num::after {
		border-width: 0 0 7px 8px;
	}
	.js-modal .plam-name h1 {
		font-size: 3.2rem;
		padding: 20px 12px 12px;
		margin-top: -19px;
	}
	.js-modal .point {
		padding: 40px 40px 25px;
		margin-bottom: 60px;
	}
	.js-modal .point .head {
		padding: 0 32px 4px 0;
		margin-bottom: 20px;
		font-size: 2.1rem;
	}
	.js-modal .point .head::after {
		width: 38px;
		height: 41px;
	}
	.js-modal .point ul {
		width: 84%;
	}
	.js-modal .point ul li {
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.2;
		letter-spacing: .08em;
		margin-bottom: 15px;
	}
	.js-modal .point .img {
		bottom: 0;
		right: 20px;
		width: 16%;
	}
	/*バナー*/
	.others .bnr-area h3 {
		font-size: 2.1rem;
		line-height: 1;
		padding: 0 0 20px 50px;
	}
	.others .bnr-area h3::before {
		bottom: 10px;
		left: 0;
		width: 34px;
		height: 42px;
	}
	.others .bnr-area h3::after {
		top: -20px;
		left: 30px;
		width: 12px;
		height: 14px;
	}
	.others .bnr-area ul li {
		width: 184px;
	}
	.others .bnr-area ul li:not(:last-of-type) {
		margin-right: 20px;
	}
}
/*--------sp--------*/
@media screen and (max-width:767px) {
	.others {
		padding: 8% 4.5% 3%;
		margin-bottom: 12%;
	}
	.others .block {
		margin-bottom: 6%;
	}
	.others .block ul {
		flex-direction: column;
	}
	.others .block ul li {
		width: 100%;
		margin-bottom: 3%;
	}
	/*その他のおすすめ間取り*/
	.others-plan h3 {
		font-size: 5.04vw;
		text-align: center;
		margin-bottom: 6%;
	}
	.others .others-plan ul li a {
		display: flex;
	}
	.others .others-plan ul li .img {
		width: 30%;
		height: 24vw;
		margin-right: 3%;
	}
	.others .others-plan ul li .plam-name {
		flex: 1;
	}
	.others .block ul li .plam-name .icn {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 2.94vw;
		padding: 1.5% 3%;
	}
	.others .others-plan ul li .plam-name .num {
		font-size: 2.67vw;
		padding: 2% 4%;
		margin-bottom: 1%;
	}
	.others .others-plan ul li .plam-name h4 {
		font-size: 3.74vw;
	}
	.others .others-plan ul li .plam-name .num::after {
		border-width: 0 0 7px 6px;
	}
	/*modal*/
	.js-modal .modal-inner {
		padding: 10vw 0;
	}
	.modal_content {
		padding: 6%;
		width: 91%;
	}
	.js-modal-close.close-btn {
		right: 4vw;
		top: 4vw;
		width: 4vw;
		height: 4vw;
		cursor: pointer;
	}
	.js-modal-close.close-btn::before ,
	.js-modal-close.close-btn::after {
		top: 1vw;
		width: 4vw;
		height: 2px;
	}
	.js-modal .plam-name {
		margin-bottom: 6%;
	}
	.js-modal .plam-name .num {
		padding: 2% 5%;
	}
	.js-modal .plam-name .num::after {
		border-width: 0 0 5px 6px;
	}
	.js-modal .plam-name h1 {
		padding: 4% 3% 3%;
		margin-top: -3%;
		font-size: 5.07vw;
	}
	.js-modal .point {
		padding:  6% 4.5% 4.5%;
		margin-bottom: 6%;
	}
	.js-modal .point .head {
		padding: 0 10% 1% 0;
		margin-bottom: 4%;
		font-size: 5.07vw;
	}
	.js-modal .point .head::after {
		width: 8vw;
		height: 9vw;
	}
	.js-modal .point ul li {
		font-size: 4vw;
		text-align: justify;
		margin-bottom: 3%;
	}
	.js-modal .point .img {
		right: 3%;
		top: -7.5%;
		width: 16%;
	}
	/*バナー*/
	.others .bnr-area ul li {
		margin-bottom: 3%;
	}
	.others .bnr-area h3 {
		font-size: 4.8vw;
		line-height: 1.3;
		padding: 0 0 6% 9%;
	}
	.others .bnr-area h3::before {
		bottom: 33%;
		left: -3%;
		width: 8vw;
		height: 9vw;
	}
	.others .bnr-area h3::after {
		top: 2%;
		left: 4vw;
		width: 2vw;
		height: 2vw;
	}
}
/*------------------------
ヒストリーバック
------------------------*/
/*--------共通--------*/
.h-back {
	text-align: center;
}