@charset "utf-8";

/* =====================================================
--------------------------------------------------------
トップ
--------------------------------------------------------
===================================================== */

/* メインビジュアル */
.mainvisual {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 16px auto 0;
	padding-bottom: 16px;
	width: 100%;
	max-width: 1440px;
	background: url('/img/owner/mainvisual-sp.png') no-repeat bottom center / contain;
}

.mainvisual::after {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	background: rgba(255, 255, 255, 0.7);
	content: '';
}

.mainvisual > .u--inner {
	z-index: 2;
}

.mainvisual hgroup {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: bold;
}

.mainvisual  h1 {
	font-size: 24px;
}

.mainvisual_lead {
	margin-bottom: 24px;
	font-size: 16px;
	font-weight: bold;
}

.mainvisual_text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 32px;
	width: 100%;
}

.mainvisual_text p {
	width: 100%;
}

@media screen and (min-width:425px) {
	.mainvisual {
		background-size: cover;
	}
	.mainvisual > .u--inner {
		padding-top: 16px;
		padding-bottom: 16px;
	}
}

@media screen and (min-width:1024px) {
	.mainvisual {
		margin: 64px auto 0;
		min-height: 536px;
		background-image: url('/img/owner/mainvisual-pc.png');
	}
	.mainvisual::after {
		display: none;
	}
	.mainvisual > .u--inner {
		padding: 0;
	}
	.mainvisual  h1 {
		font-size: 32px;
	}
	.mainvisual_text {
		gap: 1em;
		width: 504px;
	}
	/* 新規登録実装のタイミングで削除 */
	.mainvisual_text + .contact {
		width: 504px;
	}
}



/* 見出し */
.action .c--head02,
.strength .c--head02 {
	text-align: center;
}

@media screen and (min-width:1024px) {
	.action .c--head02,
	.strength .c--head02 {
		font-size: 28px;
	}
	.action .c--head02 {
		margin-bottom: 24px;
	}
	.strength .c--head02 {
		margin-bottom: 32px;
	}
}



/* 活動内容 */
.action {
	padding-top: 32px;
	padding-bottom: 32px;
}

.action ul {
	display: flex;
	flex-flow: row wrap;
	gap: 32px 16px;
	padding-top: 24px;
}

.action li {
	position: relative;
	margin-left: 16px;
	padding: 28px 24px 32px;
	width: 100%;
	border-radius: 16px;
	background: var(--color-housecom-blue-light);
}

.action li::before {
	position: absolute;
	top: -24px;
	left: -16px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 4px solid var(--color-housecom-blue-light);
	background: #fff;
	content: '';
}

.action .c--head03 {
	position: static;
	padding-bottom: 16px;
	text-align: center;
}

.u--icon-price {
	position: relative;
}

.u--icon-price:before {
	position: absolute;
	translate: 0 -50%;
	color: rgb(115, 188, 221);
	content: "\e96f";
}

.u--icon-price:after {
	position: absolute;
	translate: 0 -50%;
	color: rgb(34, 34, 34);
	content: "\e970";
}

.action .c--head03::before,
.action .c--head03::after {
	top: 4px;
	left: -4px;
	font-size: 32px;
}

.action li p {
	position: relative;
}

.action li p::after {
	position: absolute;
	top: -24px;
	left: 50%;
	translate: -50% 0;
	width: 160px;
	height: 4px;
	border-radius: 8px;
	background: var(--color-housecom-blue);
	content: '';
}

@media screen and (min-width:768px) {
	.action li {
		width: calc((100% - 16px - (16px * 2)) / 2);
	}
}

@media screen and (min-width:1024px) {
	.action {
		padding-top: 56px;
		padding-bottom: 48px;
	}
	.action ul {
		gap: 56px 16px;
		padding-top: 40px;
	}
	.action li::before {
		top: -40px;
		width: 80px;
		height: 80px;
	}
	.action .c--head03 {
		font-size: 24px;
	}
	.action .c--head03::before,
	.action .c--head03::after {
		top: 0;
		left: 0;
		font-size: 48px;
	}
}



/* 強み */
.strength {
	padding-top: 32px;
	padding-bottom: 32px;
	background: url('/img/owner/strength-bg.png') repeat;
}

.strength hgroup {
	margin-bottom: 24px;
}

.strength .c--head03::before {
	display: inline-block;
	margin: 0 8px -2px 0;
	width: 6px;
	height: 16px;
	border: 2px solid var(--color-housecom-blue);
	border-top: none;
	border-bottom: none;
	content: '';
}

@media screen and (min-width:1024px) {
	.strength {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.strength hgroup {
		margin-bottom: 32px;
	}
	.strength hgroup + div {
		min-height: 490px;
		background: url('/img/owner/strength-p.png') no-repeat top right;
	}
	.strength hgroup + div .c--head03,
	.strength hgroup + div p {
		width: 664px;
	}
}



/* お問い合わせ */
.contact {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 8px 40px;
}

.contact:has(p) {
	padding-top: 32px;
	padding-bottom: 32px;
}

.contact p {
	margin-bottom: 24px;
	width: 100%;
	text-align: center;
}

.contact .c--link-cv-primary,
.contact .c--link-cv {
	padding: 16px;
	font-size: 18px;
}

.contact .c--link-cv-primary {
	padding-left: 50px;
}

.contact .c--link-cv {
	padding-right:50px;
}

.contact .c--link-cv-primary::before,
.contact .c--link-cv::before {
	font-size: 24px;
}

.contact .c--link-cv-primary::before {
	left: 16px;
}

.contact .c--link-cv::before {
	right: 16px;
}

@media screen and (min-width:768px) {
	.contact:has(p) {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.contact .c--link-cv-primary,
	.contact .c--link-cv {
		padding: 16px 24px 16px 24px;
		width: fit-content;
		font-size: 24px;
	}
	.contact .c--link-cv-primary {
		padding-left: 64px;
	}
	.contact .c--link-cv {
		padding-right: 64px;
	}
	.contact .c--link-cv-primary::before,
	.contact .c--link-cv::before {
		font-size: 32px;
	}
	.contact .c--link-cv-primary::before {
		left: 24px;
	}
	.contact .c--link-cv::before {
		right: 24px;
	}
}



/* お役立ち情報ブログ */
.c--head02.u--icon-pencil {
	padding-left: 48px;
}

.c--head02.u--icon-pencil::before,
.c--head02.u--icon-pencil::after {
	font-size: 32px;
}

.post-list + .u--text-right {
	margin-top: 16px;
	
}










/* =====================================================
--------------------------------------------------------
記事一覧
--------------------------------------------------------
===================================================== */

.post-list {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 24px 16px;
	width: 100%;
}

.post-list > div {
	position: relative;
	width: 100%;
	max-width: 560px;
}

.post-list_thumbnail + div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0 8px;
	margin: 16px 0 4px;
}

.post-list_thumbnail + div div:has(.u--icon-hand-heart) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
}

.post-list .c--link-sub {
	z-index: 1;
}

.post-list_title {
	display: block;
	position: static !important;
	font-size: 18px;
	font-weight: bold;
}

.post-list_title::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	content: '';
}

@media (any-hover:hover) {
	.post-list > div {
		transition: opacity 0.5s;
	}
	.post-list > div:has(.post-list_title:hover) {
		opacity: 0.5;
	}
}

@media screen and (min-width:768px) {
	.post-list::after {
		display: block;
		width: calc((100% - 24px) / 2);
		content:"";
	}
	.post-list > div {
		width: calc((100% - 24px) / 2);
	}
}

@media screen and (min-width:1024px) {
	.post-list {
		gap: 32px 24px;
	}
	.post-list::after,
	.post-list > div {
		width: calc((100% - 24px * 2) / 3);
	}
	/* 記事が1件しかない場合 */
	.post-list:has(> div:first-child:last-child)::after {
		width: calc(((100% - 24px) / 3) * 2);
	}
	.post-list > div:last-child:not(:has(+div +div)) {
		margin-right: auto;
	}
}



/* サムネイル（トップと共通） */
.post-list_thumbnail {
	width: 100%;
	min-height: 0;
	aspect-ratio: 4 / 3;
}

.post-list_thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

main:has(.contents) .thumbnail {
	margin: 0 auto 8px;
	width: fit-content;
}



/* ページネーション */
.pagination {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin: 16px auto 0;
	width: 100%;
	max-width: 375px;
}

.pagination:not(:has(+ .campus)) > div{
	justify-content: center;
}

.pagination a {
	display: flex;
	justify-content: flex-start;
	align-items: end;
	position: relative;
	padding: 16px 8px;
	width: calc((100% - 12px * 3) / 4);
	font-size: 16px;
	line-height: 1;
}

.pagination a::before,
.pagination a::after {
	position: absolute;
	color: var(--color-black);
	font-family: 'icomoon';
	top: 16px;
	translate: 0;
	font-size: 12px;
}

.pagination a.disabled {
	filter: grayscale(100%) invert(10%);
	pointer-events: none;
}

.pagination a.to-first {
	justify-content: flex-end;
}

.pagination a.to-prev {
	justify-content: flex-end;
	padding: 16px 16px 16px 12px;
}

.pagination a.to-next {
	padding: 16px 12px 16px 16px;
}

.pagination a.to-first::before,
.pagination a.to-last::after {
	content: "\e90e";
}

.pagination a.to-prev::before,
.pagination a.to-next::after {
	content: "\e90d";
}

.pagination a.to-first::before,
.pagination a.to-prev::before {
	rotate: 180deg;
}

.pagination a.to-first::before {
	left: 8px;
}

.pagination a.to-prev::before {
	left: 8px;
}

.pagination a.to-next::after {
	right: 8px;
}

.pagination a.to-last::after {
	right: 8px;
}

@media screen and (min-width:375px) {
	.pagination {
		margin: 32px auto 0;
	}
	.pagination a {
		padding: 16px 12px;
	}
	.pagination a::before,
	.pagination a::after {
		font-size: 16px;
	}
	.pagination a.to-first::before {
		left: 10px;
	}
	.pagination a.to-prev::before {
		left: 12px;
	}
	.pagination a.to-next::after {
		right: 12px;
	}
	.pagination a.to-last::after {
		right: 10px;
	}
}










/* =====================================================
--------------------------------------------------------
記事詳細
--------------------------------------------------------
===================================================== */

/* タイトル */
.contents-title {
	margin-bottom: 32px;
	font-size: 24px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.contents-title {
		margin-bottom: 48px;
	}
}



/* カテゴリー・日付・会員限定 */
div:has(> .u--icon-calendar) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 16px 0;
	line-height: 1;
}

.u--icon-calendar {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
}

.u--icon-calendar::before,
.u--icon-hand-heart::before,
.u--icon-hand-heart::after {
	font-size: 24px;
}

.u--icon-hand-heart {
	padding-left: 28px;
}

@media screen and (min-width:1024px) {
	div:has(> .u--icon-calendar) {
		margin-top: 64px;
	}
}



/* SNSシェア・通常リンク */
.sns-share,
.sns-link {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.sns-share:not(:has(+ .toc)) {
	margin-bottom: 24px;
}

.sns-share a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
}

.sns-link a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 50%;
	aspect-ratio: 1;
	color: #fff;
	line-height: 1;
}

.sns-link a:has(.u--icon-youtube-w) {
	border-radius: 4px;
	aspect-ratio: unset;
}

.sns-share a:has(.u--icon-line),
.sns-link a:has(.u--icon-line-w) {
	background: #4CC764;
}

.sns-share a:has(.u--icon-x),
.sns-link a:has(.u--icon-x-w) {
	background: var(--color-black);
}

.sns-share a:has(.u--icon-facebook),
.sns-link a:has(.u--icon-facebook-w) {
	background: #0866FF;
}

.sns-link a:has(.u--icon-facebook-w) {
	padding: 4px;
}

.sns-link .u--icon-facebook-w::before {
	font-size: 32px;
	content: "\e910" !important;
}

.sns-link a:has(.u--icon-instagram-w) {
	background: #E1306C;
}

.sns-link a:has(.u--icon-youtube-w) {
	background: #FF0000;
}

.sns-link a:has(.u--icon-tiktok-w) {
	background: #FE2C55;
}

.sns-share a span,
.sns-link a {
	font-size: 24px;
}

@media screen and (min-width:1024px) {
	.sns-share:not(:has(+ .toc)) {
		margin-bottom: 32px;
	}
}



/* 目次 */
.toc {
	margin: 24px 0;
	padding: 24px;
	border-radius: 4px;
	background: var(--color-grey-light);
}

.toc .u--icon-pencil {
	margin-bottom: 16px;
	padding-left: 32px;
	font-weight: bold;
	line-height: 1;
}

.toc .u--icon-pencil::before,
.toc .u--icon-pencil::after {
	font-size: 24px;
}

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

.toc_h2 {
}

.toc_h3 {
	padding-left: 1em;
}

@media screen and (min-width:1024px) {
	.toc {
		margin: 32px 0;
	}
}



/* 余白 */
.contents > *:not(h2, h3) {
	margin: 1em 0;
}



/* リンク */
.contents a:not(:has(.c--link-sub, .c--link-main, .c--link-cv-primary)) {
	display: unset;
}
.toc a,
.contents *:not(.sns-link) a:not(:has(.c--link-sub, .c--link-main, .c--link-cv-primary)) {
	color: var(--color-link-text);
	text-decoration: underline;
}

.contents *:not(.sns-link) a:not(:has(.c--link-sub, .c--link-main, .c--link-cv-primary, img))[target="_blank"]::after {
	font-family: 'icomoon';
	content: '\e952';
}

.contents a:has(> figure) {
	display: block !important;
	width: fit-content;
}

.contents a:has(> figure[style*="center"]) {
	margin-left: auto;
	margin-right: auto;
}

@media (any-hover:hover) {
	.toc a:hover,
	.contents *:not(.sns-link) a:not(:has(.c--link-sub, .c--link-main, .c--link-cv-primary)):hover {
		text-decoration: none;
	}
}



/* 文字装飾 */
.contents strong {
	font-weight: bold;
}

.contents u {
	text-decoration: underline;
}

@media screen and (max-width:768px) {
	.contents span[style*="font-size"][style*="75%"] {
		font-size: 100% !important;
	}
}

.contents hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--color-grey-pale);
}

@media screen and (min-width:1024px) {
	.contents hr {
		margin: 48px 0;
	}
}



/* 引用 */
.contents blockquote {
	position: relative;
	padding: 24px 24px 24px 40px;
	background: var(--color-grey-light);
}

.contents blockquote::before {
	position: absolute;
	top: -4px;
	left: 4px;
	color: var(--color-housecom-blue);
	font-size: 64px;
	content: "“";
}

.contents blockquote p:has(+ p) {
	margin-bottom: 1em;
}



/* テーブル */
.contents .table-scroll {
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.contents .table-scroll table {
	min-width: 100%;
}

.contents th,
.contents td {
	padding: 16px;
	border: 1px solid var(--color-grey-origin);
}

.contents th {
	background: var(--color-grey-light);
}

@media screen and (min-width:1024px) {
	.contents .table-scroll {
		white-space: normal;
	}
}



/* リスト */
.contents ul,
.contents ol {
	display: flex;
	flex-direction: column;
	list-style-position: outside;
	padding-left: 1em;
}

.contents ul {
	list-style: disc;
}

.contents ol {
	list-style: decimal;
}

.contents ul li:not(:last-of-type),
.contents ol li:not(:last-of-type) {
	margin-bottom: 0.5em;
}



/* 画像 */
.contents figure {
	width: fit-content;
}

.contents figure[style*="text-align"][style*="center"] {
	margin-left: auto;
	margin-right: auto;
}

.contents figcaption {
	width: fit-content;
	margin: 8px auto 0;
	color: var(--color-grey-dark);
	font-size: 14px;
}



/* Instagram埋め込みの修正 */
.contents iframe.instagram-media {
	height: revert-layer;
}









/* =====================================================
--------------------------------------------------------
カスタムCSS
--------------------------------------------------------
===================================================== */

/* ボタン型リンク */
.contents p:has(a > .u--icon-arrow),
.contents p:has(a > .u--icon-mail),
.contents p:has(a > .u--icon-shop) {
	text-align: center;
}

.contents .c--link-sub,
.contents .c--link-main,
.contents .c--link-cv-primary {
	padding: 16px;
	min-height: 44px;
	font-weight: bold;
	line-height: 1;
}

.contents .c--link-sub::before,
.contents .c--link-main::before,
.contents .c--link-cv-primary::before {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	font-weight: normal;
}

@media screen and (min-width:1024px) {
	.contents .c--link-sub,
	.contents .c--link-main,
	.contents .c--link-cv-primary {
		font-size: 18px;
	}
}

.contents a:has(> .u--icon-download01) {
	margin-left: 16px;
}

.contents .u--icon-arrow,
.contents .u--icon-download01 {
	padding-right: 40px;
}

.contents .u--icon-arrow::before,
.contents .u--icon-download01::before {
	right: 12px;
	font-size: 20px;
}

.contents .u--icon-mail,
.contents .u--icon-shop {
	padding-left: 44px;
}

.contents .u--icon-mail::before,
.contents .u--icon-shop::before,
.contents .u--icon-shop::after {
	left: 12px;
	font-size: 24px;
}



/* 画像と文字の横並び */
.figure-stack {
	display: flex;
	flex-direction: column;
	gap: 8px 16px;
	align-items: flex-start;
}

.figure-stack_wrap {
	flex: 1; /* 残りの幅をすべて使う */
	display: flex;
	flex-direction: column;
	gap: 1em;
}

@media screen and (min-width:768px) {
	.figure-stack {
		flex-direction: row;
	}
	.figure-stack figure {
		max-width: calc(100% / 3);
		/* max-width: calc((100% - 16px) / 2); */
	}
}



/* 画像ポップアップ */
.contents .gallery {
	display: flex;
	flex-flow: row wrap;
	gap: 8px;
}

.contents .gallery figure {
	width: calc((100% - 8px) / 2);
	aspect-ratio: 4 / 3;
	text-align: center;
}

.contents .gallery figure:nth-last-child(n+3),
.contents .gallery figure:nth-last-child(n+3) ~ figure {
	width: calc((100% - 8px * 2) / 3);
}

.contents .gallery figure img {
	height: 100%;
	object-fit: cover;
}




/* マーカー */
.contents .marker {
	background:linear-gradient(transparent 40%, rgba(210, 214, 41, 0.2) 40%);
}

@media (any-hover:hover) {
}

@media screen and (min-width:768px) {
}

@media screen and (min-width:1024px) {
}










/* =====================================================
--------------------------------------------------------
パンくず
--------------------------------------------------------
===================================================== */

.breadcrumb {
	margin-top: 48px;
}

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