@charset "utf-8";

/* =====================================================
--------------------------------------------------------
入居応援サポート
--------------------------------------------------------
===================================================== */

hgroup {
	margin-bottom: 24px;
	width: 100%;
	background: url(/img/service/ouen/mainvisual_bg-sp.jpg) no-repeat top left / contain;

}

hgroup h1 {
	margin-bottom: 128px;
	padding-top: 8px;
	width: 214px;
}

hgroup p {
	padding: 0 16px;
	font-size: 14px;
}

hgroup p span {
	color: var(--color-link-cv);
	font-weight: bold;
}

hgroup p br {
	display: none;
}

@media screen and (min-width:768px) {
	hgroup {
		position: relative;
		margin: 64px auto 24px;
		padding: 19px 17px;
		width: 710px;
		height: 290px;
		background: url(/img/service/ouen/mainvisual_bg-pc.jpg) no-repeat top left;
	}
	hgroup h1 {
		margin-bottom: 8px;
		padding-top: 0;
		width: 396px;
	}
	hgroup p span {
		font-size: 20px;
	}
	hgroup p br {
		display: block;
	}
}



/* サポートと特典 */
.benefit > p {
	display: block;
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
}

.benefit > p span {
	display: block;
}

.benefit ul {
	justify-content: center;
	align-items: center;
	gap: 12px;
}

.benefit li {
	width: 100%;
	position: relative;
}

.benefit .support01 {
	border: 2px solid #02a6e3;
}

.benefit .support02 {
	border: 2px solid #f39a04;
}

.benefit .support03 {
	border: 2px solid #a64b99;
}

.benefit .support04 {
	background: #f0f6e3;
}

.benefit dt {
	display: flex;
	align-items: flex-end;
	padding: 8px 8px 0;
}

.benefit .support04 dt span {
	display: none;
}

.benefit dd {
	position: relative;
	padding: 8px;
	font-size: 14px;
}

.benefit dd::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: calc(100% - 20px);
	height: 2px;
	content: '';
}

.benefit .support01 dd::before {
	background: #02a6e3;
}

.benefit .support02 dd::before {
	background: #f39a04;
}

.benefit .support03 dd::before {
	background: #a64b99;
}

.benefit .support04 dd::before {
	background: #91c321;
}

@media screen and (min-width:768px) {
	.benefit > p {
		font-size: 32px;
	}
	.benefit > p span {
		display: inline;
	}
	.benefit li {
		width: 170px;
	}
	.benefit .support01,
	.benefit .support02,
	.benefit .support03,
	.benefit .support04 {
		border: none;
	}
	.benefit dt {
		display: block;
		position: relative;
		padding: 0;
		width: 100%;
	}
	.benefit .support04 dt span {
		display: flex;
	}
	.benefit dd {
		padding: 16px;
		height: 120px;
	}
	.benefit dd::before {
		width: calc(100% - 24px - 8px);
	}
	.benefit .support01 dd {
		background: url(/img/service/ouen/benefit01_bg.png) no-repeat bottom;
	}
	.benefit .support02 dd {
		background: url(/img/service/ouen/benefit02_bg.png) no-repeat bottom;
	}
	.benefit .support03 dd {
		background: url(/img/service/ouen/benefit03_bg.png) no-repeat bottom;
	}
	.benefit .support04 dd {
		background: url(/img/service/ouen/benefit04_bg.png) no-repeat bottom;
		border-radius: 0 0 8px 8px;
	}
}



/* h2（共通） */
h2 {
	position: relative;
	margin-bottom: 32px;
	border-bottom: 2px solid #1c94e3;
}

h2::after {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	height: 2px;
	background: #b9dff7;
	content: '';
}

.when h2 {
	margin-bottom: 64px;
}

.voice h2 {
	margin-bottom: 48px;
}

.guide h2 {
	margin-bottom: 4px;
	border: 0;
}

.guide h2::after {
	width: 0;
}

@media screen and (min-width:768px) {
	.guide h2 {
		margin-bottom: 12px;
	}
}



/* c--link（共通） */
.c--section:not(.guide) .c--link-sub {
	min-height: 48px;
	color: var(--color-black);
	font-weight: bold;
}

.who > div .c--link-sub {
	padding-left: 24px;
	width: 100%;
	max-width: 320px;
}

.who > div .c--link-sub::before {
	left: 8px;
	font-family: 'icomoon';
	content: "\e90d";
}

.when  > div .c--link-sub {
	padding-left: 16px;
	width: 100%;
	max-width: 360px;
	letter-spacing: -0.05em;
}

.when > div .c--link-sub::before {
	left: 8px;
	font-family: 'icomoon';
	content: "\e90d";
}

.guide .c--link-sub {
	padding: 8px 16px;
}

@media screen and (min-width:768px) {
	.when > div .c--link-sub {
		letter-spacing: 0;
	}
}



/* 入居応援サポートって？（what） */
.what > p {
	font-weight: bold;
}

.what > div {
	display: flex;
	flex-flow: column;
	gap: 8px;
	margin: 8px 0 16px;
}

.what > div > span {
	font-size: 14px;
}

.what ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.what li {
	display: flex;
	flex-flow: row wrap;
	gap: 16px;
	position: relative;
	padding: 12px 16px;
	background: #e0edf9;
}

.what .example03 {
	background: #fff3f3;
}

.what li span.example_head {
	width: 48px;
	color: #004993;
	font-weight: bold;
}

.what li span:not(.example_head) {
	width: calc(100% - 16px - 48px);
}

.what .example03 span.example_head {
	color: #ff3e3e;
}

@media screen and (min-width:1024px) {
	.what > div {
		margin: 16px 0 24px;
	}
	.what li {
		position: relative;
		gap: 32px;
		padding: 4px 16px 4px 48px;
		height: 32px;
		background: linear-gradient(to right,#e0edf9,rgba(0,0,0,0));
	}
	.what .example03 {
		background: linear-gradient(to right,#fff3f3,rgba(0,0,0,0));
	}
	.what li::before {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 38px;
		height: 32px;
		content: '';
	}
	.what .example01::before {
		background: url(/img/service/ouen/what01.png) no-repeat left;
	}
	.what .example02::before {
		background: url(/img/service/ouen/what02.png) no-repeat left;
	}
	.what .example03::before {
		background: url(/img/service/ouen/what03.png) no-repeat left;
	}
	.what li span:not(.example_head) {
		width: auto;
	}
}



/* どんな人たちがサポートしてくれるの？(who) */
.who > p {
	margin-bottom: 16px;
	font-weight: bold;
}

.who > div {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 14px;
}

.who > div p {
	margin-top: 0;
}

.who > div img {
	display: block;
}


@media screen and (min-width:1024px) {
	.who > div {
		height: 257px;
		background: url(/img/service/ouen/who-pc.jpg) no-repeat right bottom / 295px 257px;
	}
	.who > div img {
		display: none;
	}
}



/* 入居応援サポートってどんな時に役立つの？(when) */
.when .c--flex-1-2 {
	justify-content: center;
	gap: 24px;
}

.when .c--flex-1-2 > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 48px;
	width: calc(100% - 20px);
}

.when dl {
	position: relative;
	padding: 16px;
	width: 100%;
}

.when .case01 dl {
	border: 5px solid #02a6e3;
}

.when .case02 dl {
	border: 5px solid #f39a04;
}

.when .case03 dl {
	border: 5px solid #a64b99;
}

.when .case04 dl {
	border: 5px solid #91c321;
}

.when dt {
	position: absolute;
	top: -37px;
	left: -26px;
}

.when dd {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.when dd ul {
	padding-left: 16px;
}

@media screen and (min-width:768px) {
	.when .c--flex-1-2 {
		justify-content: space-between;
	}
	.when .c--flex-1-2 > li {
		margin-left: 21px;
		width: calc((100% - 24px - 42px) / 2);
	}
	.when dl {
		padding: 20px;
		min-height: 180px;
	}
}

@media screen and (min-width:1024px) {
	.when .case01 dd {
		background: url(/img/service/ouen/when01_bg.jpg) no-repeat top right;
	}
	.when .case02 dd {
		background: url(/img/service/ouen/when02_bg.jpg) no-repeat top right;
	}
	.when .case03 dd {
		background: url(/img/service/ouen/when03_bg.jpg) no-repeat top right;
	}
	.when .case04 dd {
		background: url(/img/service/ouen/when04_bg.jpg) no-repeat top right;
	}
}

.when > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border: 4px solid var(--color-link-text);
}

.when > div p {
	color: var(--color-link-text);
	font-size: 16px;
	font-weight: bold;
}

@media screen and (min-width:768px) {
	.when > div {
		justify-content: center;
		padding: 24px 20px;
		border-width: 8px;
	}
	.when > div p {
		font-size: 24px;
	}
}



/* お客様の声(voice) */
.voice dl > div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	margin: 0 0 12px 12px;
	padding: 40px 24px 4px 8px;
	height: 192px;
	border: 1px solid var(--color-grey-origin);
}

.voice .voice01 {
	background: url(/img/service/ouen/voice01_bottom.png) no-repeat bottom right;
}

.voice .voice02 {
	background: url(/img/service/ouen/voice02_bottom.png) no-repeat bottom right;
}

.voice .voice03 {
	background: url(/img/service/ouen/voice03_bottom.png) no-repeat bottom right;
}

.voice .voice04 {
	background: url(/img/service/ouen/voice04_bottom.png) no-repeat bottom right;
}

.voice .voice05 {
	background: url(/img/service/ouen/voice05_bottom.png) no-repeat bottom right;
}

.voice .voice06 {
	background: url(/img/service/ouen/voice06_bottom.png) no-repeat bottom right;
}

.voice dt {
	position: absolute;
	top: -20px;
	left: -12px;
}

.voice dd:not(.bottom) {
	margin-left: 12px;
}

.voice .bottom {
	font-size: 14px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.voice dl > div {
		width: calc((100% - 48px) / 2);
	}
}



/* ページ下部の情報 */
.info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	border: 4px solid #dce4f4;
}

.info > p:not(.caution) {
	font-size: 16px;
	font-weight: bold;
}

.info .caution span {
	display: inline;
}

.info div {
	text-align: center;
}

.info div p {
	margin-bottom: 12px;
	color: #1a92e3;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
}

.info div img {
	width: 80%;
	max-width: max-content;
}

.info dl {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 8px;
	width: 100%;
	background: var(--color-grey-light);
}

.info dt {
	padding: 8px;
	color: #fff;
	background: var(--color-grey-origin);
	font-weight: bold;
}

.info dd > span {
	font-weight: bold;
}

.info dd > p {
	padding-left: 1em;
}

@media screen and (min-width:1024px) {
	.info {
		padding: 24px;
		border-width: 12px;
	}
	.info > p:not(.caution) {
		font-size: 18px;
		text-align: center;
	}
	.info .caution {
		text-align: center;
	}
	.info .caution span {
		display: block;
	}
	.info div p {
		text-align: center;
	}
}



/* 会員様へのご案内 */
.guide p {
	margin-bottom: 16px;
	padding-left: 16px;
}

.guide dl div {
	border: 1px solid var(--color-grey-origin);
}

.guide dt {
	position: relative;
	padding: 8px 8px 8px 24px;
	background: #227fc4;
	color: #fff;
	font-weight: bold;
}

.guide dt::before {
	position: absolute;
	left: 6px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 6px;
	height: 64%;
	background: #fff;
	content: '';
}

.guide dd {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px;
}

.guide dd img {
	max-height: 62px;
}

@media screen and (min-width:1024px) {
	.guide p {
		padding-left: 24px;
	}
}