@charset "utf-8";

/* =====================================================
--------------------------------------------------------
大学生協（新デザイン）
--------------------------------------------------------
===================================================== */

/* メインビジュアル */
.mainvisual {
	margin-top: 24px;
}
.mainvisual h1 {
	margin-bottom: 24px;
}

.mainvisual p {
	font-weight: bold;
	line-height: 1.5;
	font-size: 20px;
}

.mainvisual p span:not(:has(img)) {
	font-size: 30px;
}

.mainvisual p span:has(img) {
	display: inline-block;
	line-height: 2;
	vertical-align: 8px;
	width:120px;
}

@media screen and (min-width:1024px) {
	.mainvisual {
		margin-top: 64px;
	}

	.mainvisual p {
		text-align: center;
		font-size: 30px;
	}

	.mainvisual p span:not(:has(img)) {
		font-size: 60px;
	}

	.mainvisual p span:has(img) {
		width: 240px;
	}
}





/* お部屋探しの特徴 */
.feature .c--flex-1-3 {
	gap: 32px;
}

.feature h2 {
	position: relative;
	font-weight: bold;
	border-bottom: 3px solid var(--color-grey-pale);
	font-size: 20px;
	padding-bottom: 24px;
	margin-bottom: 32px;
}

.feature h2::before {
	content: '';
	position: absolute;
	background: var(--color-black);
	left: 0;
	bottom: -3px;
	width: 22%;
	height: 3px;
}

.feature li {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
}

.feature li > span {
	width: calc((100% - 8px) / 5 * 2);
}

.feature h3 {
	font-weight: bold;
	text-align: center;
	font-size: 16px;
	width: 100%;
}

.feature h3 > span {
	background: linear-gradient(transparent 60%, #dedf9d 40%);
}

.feature p {
	width: calc((100% - 8px) / 5 * 3);
}

@media screen and (min-width:1024px) {
	.feature .c--flex-1-3 {
		gap: 16px;
	}
	.feature h2 {
		font-size: 24px;
		margin-bottom: 64px;
	}

	.feature h2::before {
		width: 10%;
	}

	.feature li {
		flex-direction: column;
		gap: 24px;
		margin-bottom: 0;
	}

	.feature li > span {
		width: 165px;
	}

	.feature h3 {
		font-size: 18px;
	}

	.feature p {
		text-align: center;
		width: 100%;
	}
}

/* キャンパス別物件検索 */
.search h2 {
	font-weight: bold;
	position: relative;
	font-size: 20px;
	padding-left: 16px;
	margin-bottom: 24px;
}

.search h2::before {
	content: '';
	position: absolute;
	border-radius: 2px;
	background: var(--color-black);
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
}

.search a {
	flex-direction: column;
	min-height: 80px;
	padding-left: 72px;
}

.search a span {
	font-weight: bold;
	font-size: 20px;
}

.search a::before {
	content: "\e91a";
	left: 36px;
	font-size: 50px;
}

@media (any-hover:hover) {
	.search .c--link-sub:hover {
		border-color: var(--color-link-text);
		background: var(--color-link-text);
		color: #fff;
		opacity: 1;
	}
}

@media screen and (min-width:1024px) {
	.search h2 {
		font-size: 24px;
	}
}











/* =====================================================
--------------------------------------------------------
大学生協（旧デザイン）
--------------------------------------------------------
===================================================== */

/* メインビジュアル */
h1 picture {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

h1 > span {
	display: block;
	font-weight: bold;
	font-size: 20px;
	max-width: 750px;
	width: 100%;
	margin: 8px auto 16px;
	padding: 0 16px;
}

h1 > picture + span {
	text-align: center;
	font-size: 16px;
	margin: 0 auto 16px;
}

h1 > picture + span span {
	display: block;
}

/* 店舗一覧 */
.shoplist h2 {
	font-weight: bold;
	margin-bottom: 16px;
}

.shoplist li {
	display: grid;
	grid-template-rows: max-content max-content max-content;
	border: 2px solid var(--color-housecom-blue);
	padding: 16px;
}

.shoplist li > * {
	width: 100%;
}

@media screen and (min-width:1024px) {
	h1 picture {
		margin-top: 64px;
		margin-bottom: 48px;
	}
	h1 span {
		display: none;
	}

	.shoplist h2 {
		margin-bottom: 24px;
	}

	.shoplist h2:has(span) {
		text-align: center;
	}

	.shoplist h2 span {
		display: inline-block;
	}

	.shoplist li {
		padding: 24px;
	}
}

/* 店舗概要 */
.shoplist_detail {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
}

.shoplist_detail > a {
	width: 72px;
	height: 54px;
}

.shoplist_detail > a img {
	object-fit: cover;
	width: 100%;
}

.shoplist_detail > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: calc(100% - 8px - 72px);
}

.shoplist_detail > div p img {
	display: inline-flex;
	margin-right: 4px;
	width: 100px;
}

.shoplist_detail > div p:has(a) {
	font-weight: bold;
}

.shoplist_detail > div p:not(:has(a)) {
	font-size: 14px;
}

.shoplist_detail .c--link-text-internal {
	font-weight: bold;
}

.shoplist_detail .c--link-cv-primary {
	display: none;
}

@media screen and (min-width:1024px) {
	.shoplist_detail {
		gap: 16px;
		margin-bottom: 24px;
	}

	.shoplist_detail > a {
		width: 160px;
		height: 120px;
	}

	.shoplist_detail > div {
		width: calc(100% - 16px - 160px);
	}

	.shoplist_detail .c--link-cv-primary {
		display: inline-flex;
	}

	.c--flex-1-1 > li {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	.c--flex-1-1 .shoplist_detail {
		width: 448px;
	}

	.c--flex-1-1 .shoplist_detail > div,
	.c--flex-1-1 .shoplist_link {
		width: 272px;
	}

	.c--flex-1-3 .shoplist_detail {
		justify-content: center;
	}

	.c--flex-1-3 .shoplist_detail > div {
		width: 100%;
	}
}

/* 店舗リンク */
.shoplist_link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 16px;
}

.shoplist_link a {
	line-height: 1;
	width: 100%;
	padding: 10px 0;
}

.shoplist_link .c--link-cv-primary {
	display: inline-flex;
}

.shoplist a:has(.u--icon-mail) > span {
	margin-right: 8px;
}

.shoplist a:has(.u--icon-shop) > span,
.shoplist a:has(.u--icon-search) > span {
	padding-left: 32px;
}

.shoplist a > span:not(.notes)::before,
.shoplist a > span:not(.notes)::after {
	font-size: 24px;
}

.shoplist a > span.notes span {
	font-weight: normal;
}

.c--link-cv-primary span::before {
	color: #fff;
}

.c--link-cv span::before {
	color: var(--color-link-cv);
}

@media (any-hover:hover) {
	.c--link-cv-primary:hover,
	.c--link-cv-primary:hover span::before {
		color: var(--color-link-cv);
	}

	.c--link-cv:hover {
		background: var(--color-link-cv);
		color: #fff;
	}

	.c--link-cv:hover span::before {
		color: #fff;
	}
}

@media screen and (min-width:1024px) {
	.shoplist_link {
		margin-bottom: 24px;
	}

	.shoplist_link > a {
		width: calc((100% / 3) * 2);
	}

	.shoplist_link a.c--link-cv-primary {
		display: none;
	}

	.c--flex-1-1 .shoplist_link > a,
	.c--flex-1-3 .shoplist_link > a {
		width: 100%;
	}

	.c--link-cv {
		background: var(--color-link-cv);
		color: #fff;
	}

	.c--link-cv-primary {
		background: #fff;
		color: var(--color-link-cv);
	}

	.c--link-cv-primary span::before {
		color: var(--color-link-cv);
	}

	.c--link-cv span::before {
		color: #fff;
	}

	@media (any-hover:hover) {
		.c--link-cv-primary:hover span::before {
			color: #fff;
		}

		.c--link-cv:hover {
			background: #fff;
			color: var(--color-link-cv);
		}

		.c--link-cv:hover span::before {
			color: var(--color-link-cv);
		}
	}
}

/* 店舗コメント */
.shoplist_voice {
	background: var(--color-grey-light);
	padding: 16px;
}