@d-zero/scaffold 5.0.0-alpha.8 → 5.0.0-beta.0

package/__assets/_libs/component/{_c-content-main.scss → c-content-main.css}

@@ -1,24 +1,22 @@
-@use '../style/theme' as *;
-
-/* stylelint-disable selector-class-pattern, selector-nested-pattern -- content-main特殊ルール */
-//
-// メインコンテンツ（content-mainコンポーネント）の内容はCMSなどで管理されるHTMLを含んだり、
-// ページ独自のスタイルを扱うことが多いので例外的に専用のルールを設ける。
-//
-// メインコンテンツのエレメントは基本的に自由である。
-// ただし、クラス名は`c-`で開始してはいけない。もちろん 【`c-` + `コンポーネント名` + `__` + `エレメント名`】 という規則でクラス名をつけない。
-// さらにそのルールに従って、メインコンテンツの中にコンポーネントを内包してはいけない。
+/* 🃏 このファイルのStylelintルールはoverridesによって特別に変更されています */
+
+/* メインコンテンツ（content-mainコンポーネント）の内容はCMSなどで管理されるHTMLを含んだり、
+ * ページ独自のスタイルを扱うことが多いので例外的に専用のルールを設ける。
+ *
+ * メインコンテンツのエレメントは基本的に自由である。
+ * ただし、クラス名は`c-`で開始してはいけない。もちろん 【`c-` + `コンポーネント名` + `__` + `エレメント名`】 という規則でクラス名をつけない。
+ * さらにそのルールに従って、メインコンテンツの中にコンポーネントを内包してはいけない。 */
 .c-content-main {
 	:where(*) {
 		text-underline-offset: 3px;
 	}
 
 	:where(h2, h3, h4, h5, h6, p) {
-		margin-block-end: max(0.75em, 1rem);
+		margin-block-end: max(0.75rem, 1rem);
 	}
 
 	:where(ul, ol, table, blockquote) {
-		margin-block-end: 2em;
+		margin-block-end: 2rem;
 	}
 
 	:where(h2) {
@@ -46,7 +44,7 @@
 	}
 
 	:where(blockquote) {
-		padding-inline: 1em;
+		padding-inline: 1rem;
 		border-inline-start: 3px solid var(--border-color);
 	}
 
@@ -56,12 +54,12 @@
 	}
 
 	:where(th, td) {
-		padding: 1em;
+		padding: 1rem;
 		border: 1px solid var(--border-color);
 	}
 
 	.cc-form-description {
-		//
+		font-size: calc(14 / 16 * 1rem);
 	}
 
 	.cc-form {
@@ -69,12 +67,13 @@
 	}
 
 	.cc-form-field-list {
-		//
+		display: flex;
+		flex-direction: column;
 	}
 
 	.cc-form-fieldset {
 		display: block;
-		padding: 1em 2em;
+		padding: 1rem 2rem;
 
 		fieldset {
 			padding: 0;
@@ -86,42 +85,42 @@
 			padding: 0;
 			margin: 0;
 		}
+	}
 
-		&-heading {
-			display: flex;
-			align-items: center;
-			font-size: calc(18 / 16 * 1em);
-			font-weight: bold;
-
-			label {
-				display: block;
-				cursor: pointer;
-			}
+	.cc-form-fieldset-heading {
+		display: flex;
+		align-items: center;
+		font-size: calc(18 / 16 * 1rem);
+		font-weight: bold;
 
-			.required,
-			.optional {
-				display: block;
-				margin: 0 0 0 0.5em;
-				font-size: calc(12 / 18 * 1em);
-				line-height: 1;
-				border-radius: 0.2em;
-			}
+		label {
+			display: block;
+			cursor: pointer;
 		}
 
-		&-attention {
-			margin: 0.5em 0;
-			font-size: calc(12 / 18 * 1em);
-			font-weight: normal;
+		.required,
+		.optional {
+			display: block;
+			margin: 0 0 0 0.5rem;
+			font-size: calc(12 / 18 * 1rem);
+			line-height: 1;
+			border-radius: 0.2rem;
 		}
+	}
 
-		&-body {
-			//
-		}
+	.cc-form-fieldset-attention {
+		margin: 0.5rem 0;
+		font-size: calc(12 / 18 * 1rem);
+		font-weight: normal;
+	}
+
+	.cc-form-fieldset-body {
+		margin-block-start: 1rem;
 	}
 
 	.mail-field {
-		padding: 0 0 1em;
-		margin: 0 0 0 1em;
+		padding: 0 0 1rem;
+		margin: 0 0 0 1rem;
 
 		&:last-child {
 			border-block-end: 1px solid var(--border-color);
@@ -143,7 +142,7 @@
 
 			.mail-before-attachment {
 				grid-area: before-attachment;
-				margin: 0 1em 0 0;
+				margin: 0 1rem 0 0;
 
 				&:empty {
 					margin: 0;
@@ -156,7 +155,7 @@
 
 			.mail-after-attachment {
 				grid-area: after-attachment;
-				margin: 0 0 0 1em;
+				margin: 0 0 0 1rem;
 
 				&:empty {
 					margin: 0;
@@ -165,12 +164,12 @@
 
 			.mail-description {
 				grid-area: description;
-				font-size: calc(12 / 16 * 1em);
+				font-size: calc(12 / 16 * 1rem);
 			}
 
 			.error-message {
 				grid-area: error-message;
-				font-size: calc(12 / 16 * 1em);
+				font-size: calc(12 / 16 * 1rem);
 			}
 		}
 
@@ -186,11 +185,11 @@
 			input:not([type='radio'], [type='checkbox']),
 			textarea {
 				inline-size: 100%;
-				padding-inline: 0.5em;
+				padding-inline: 0.5rem;
 				font-family: inherit;
 				font-size: inherit;
 				border: 1px solid var(--border-color);
-				border-radius: 0.2em;
+				border-radius: 0.2rem;
 
 				&[size] {
 					inline-size: auto;
@@ -198,7 +197,7 @@
 
 				&[type='file'] {
 					padding-block: 0;
-					padding-inline: 0 1em;
+					padding-inline: 0 1rem;
 
 					&::-webkit-file-upload-button {
 						appearance: none;
@@ -220,13 +219,13 @@
 			}
 
 			select {
-				padding: 0.5em calc(0.5em + 24px + 2px) 0.5em 0.5em;
+				padding: 0.5rem calc(0.5rem + 24px + 2px) 0.5rem 0.5rem;
 				appearance: none;
-				background-image: url('@/img/bg-arrow.svg');
+				background-image: url('/img/bg-arrow.svg');
 				background-repeat: no-repeat;
-				background-position: right calc(0.2em + 2px) top calc(100% / 2 + 2px);
+				background-position: right calc(0.2rem + 2px) top calc(100% / 2 + 2px);
 				border: 1px solid var(--border-color);
-				border-radius: 0.2em;
+				border-radius: 0.2rem;
 			}
 		}
 
@@ -256,7 +255,7 @@
 				input {
 					display: block;
 					padding: 0;
-					margin: 0 0.5em 0 0;
+					margin: 0 0.5rem 0 0;
 					line-height: 1;
 				}
 
@@ -267,4 +266,3 @@
 		}
 	}
 }
-/* stylelint-enable selector-class-pattern, selector-nested-pattern */

package/__assets/_libs/component/c-footer.css

@@ -0,0 +1,41 @@
+.c-footer {
+	padding-block-end: 2rem;
+}
+
+.c-footer__body {
+	margin-block: 0;
+	margin-inline: auto;
+}
+
+.c-footer__links {
+	ul {
+		display: flex;
+		justify-content: center;
+		padding: 0;
+		margin-block: 0 1rem;
+		margin-inline: 0;
+
+		@media (--sm-lte) {
+			display: block;
+		}
+	}
+
+	li {
+		display: block;
+		padding: 0;
+		margin-block: 0;
+		margin-inline: 1rem;
+	}
+
+	a {
+		display: block;
+		padding: 1rem;
+		color: inherit;
+		text-decoration: none;
+	}
+}
+
+.c-footer__copyright {
+	display: block;
+	text-align: center;
+}

package/__assets/_libs/component/c-header.css

@@ -0,0 +1,94 @@
+.c-header {
+	padding-block: 1.5rem 1.7rem;
+	padding-inline: 2rem;
+	border-block-end: 1px solid var(--border-color);
+}
+
+.c-header__body {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-block: 0;
+	margin-inline: auto;
+
+	@media (--md-lte) {
+		display: block;
+	}
+}
+
+.c-header__title {
+	flex: 0 1 auto;
+
+	@media (--md-lte) {
+		margin-block-end: 2rem;
+		text-align: center;
+	}
+}
+
+.c-header__site-name {
+	margin: 0;
+
+	> a {
+		display: block;
+		color: inherit;
+		text-decoration: none;
+	}
+}
+
+.c-header__description {
+	margin: 0;
+}
+
+.c-header__info {
+	display: flex;
+	flex: 0 1 auto;
+	flex-direction: column;
+}
+
+.c-header__links {
+	display: flex;
+	flex: 0 1 auto;
+	padding: 0;
+	margin: 0;
+
+	@media (--md-lte) {
+		margin-block: 0 1rem;
+		margin-inline: auto;
+	}
+
+	> li {
+		display: block;
+		flex: 0 1 auto;
+
+		> a {
+			display: block;
+			padding-block: 0.5rem;
+			padding-inline: 1rem;
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+}
+
+.c-header__tel {
+	flex: 0 1 auto;
+	text-align: end;
+
+	> a {
+		inline-size: 100%;
+		padding-block: 0.5rem;
+		padding-inline: 1rem;
+		color: inherit;
+		text-align: center;
+		text-decoration: none;
+		border-radius: 5px;
+
+		@media (--md-lte) {
+			display: block;
+			inline-size: calc(80 / 100 * 100%);
+			margin-block: 0;
+			margin-inline: auto;
+			text-align: center;
+		}
+	}
+}

package/__assets/_libs/component/{_c-media-list.scss → c-media-list.css}

@@ -1,7 +1,5 @@
-@use '../style/theme' as *;
-
 .c-media-list {
 	display: grid;
 	grid-template-columns: 1fr;
-	gap: 0.5em;
+	gap: 0.5rem;
 }

package/__assets/_libs/component/c-media.css

@@ -0,0 +1,113 @@
+.c-media {
+	position: relative;
+	block-size: 100%;
+	overflow: hidden;
+	outline: 2px solid transparent;
+	border: 1px solid var(--border-color);
+	transition: outline 300ms;
+
+	&:has(a:hover) {
+		outline: 2px solid var(--border-color);
+		border: 1px solid var(--border-color);
+	}
+
+	> a {
+		display: grid;
+		grid-template:
+			'img header' auto
+			'img body' auto
+			/ calc(1 / 3 * 100%) calc(2 / 3 * 100%);
+		block-size: 100%;
+		color: currentcolor;
+		text-decoration: none;
+	}
+}
+
+.c-media__img {
+	grid-area: img;
+
+	img {
+		inset-block-start: 0;
+		inset-inline-start: 0;
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+		aspect-ratio: 4 / 3;
+		object-fit: cover;
+		object-position: center top;
+	}
+}
+
+.c-media__header {
+	flex: 0 1 auto;
+	grid-area: header;
+	padding-block: 0;
+	padding-inline: 1.5em;
+}
+
+.c-media__body {
+	flex: 0 1 100%;
+	grid-area: body;
+	padding-block: 0.5em 2em;
+	padding-inline: 1.5em;
+}
+
+.c-media__title {
+	padding: 0;
+	margin-block: 0;
+	margin-inline: auto;
+}
+
+/* ブログのみ */
+.c-media__meta {
+	display: none;
+}
+
+/* ブログのみ */
+.c-media__time {
+	display: none;
+}
+
+/* ブログのみ */
+.c-media__category {
+	display: none;
+}
+
+/* ブログのみ */
+.c-media__tags {
+	ul {
+		padding: 0;
+		margin-block: 0;
+		margin-inline: auto;
+		list-style: none;
+	}
+}
+
+/* ブログのみ */
+.c-media__tag-item {
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+
+	span {
+		display: block;
+		padding-block: 0.2em;
+		padding-inline: 1em;
+	}
+}
+
+/* ブログのみ */
+.c-media__author {
+	display: none;
+}
+
+.c-media__description {
+	padding: 0;
+	margin: 0;
+
+	p {
+		padding: 0;
+		margin: 0;
+	}
+}

package/__assets/_libs/component/{_c-nav-breadcrumb.scss → c-nav-breadcrumb.css}

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-nav-breadcrumb {
 	@media (--md-lte) {
 		display: none;
@@ -32,16 +30,16 @@
 			content: ' > ';
 		}
 	}
+}
 
-	&__item {
-		display: inline-block;
-		padding: 0;
-		margin: 0;
-	}
+.c-nav-breadcrumb__item {
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+}
 
-	&__item[data-breadcrumb='current'] {
-		a {
-			text-decoration: none;
-		}
+.c-nav-breadcrumb__item[data-breadcrumb='current'] {
+	a {
+		text-decoration: none;
 	}
 }

package/__assets/_libs/component/c-nav-global.css

@@ -0,0 +1,115 @@
+.c-nav-global {
+	position: relative;
+	margin-block-end: 1em;
+	border-block-end: 1px solid var(--border-color);
+}
+
+.c-nav-global__body {
+	margin-block: 0;
+	margin-inline: auto;
+}
+
+.c-nav-global__list {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: stretch;
+	justify-content: space-between;
+	padding: 0;
+	margin: 0;
+
+	@media (--md-lte) {
+		flex-wrap: wrap;
+	}
+
+	@media (--md-lte) {
+		display: block;
+	}
+}
+
+.c-nav-global__item {
+	display: block;
+	flex: 1 1 auto;
+
+	> a {
+		display: block;
+		color: inherit;
+		text-align: center;
+		text-decoration: none;
+
+		@media (--md-lte) {
+			border-block-end: 1px solid var(--border-color);
+		}
+
+		> span {
+			display: block;
+			padding-block: 1em;
+			padding-inline: 2em;
+			border-inline-start: 1px solid var(--border-color);
+
+			@media (--md-lte) {
+				border-inline-start: none;
+			}
+		}
+	}
+
+	&:first-child {
+		> a {
+			> span {
+				border: none;
+			}
+		}
+	}
+
+	&:last-child {
+		> a {
+			@media (--md-lte) {
+				border: none;
+			}
+		}
+	}
+}
+
+.c-nav-global__sub-nav {
+	position: absolute;
+	inset-inline-start: 0;
+	inline-size: 100%;
+
+	@media (--md-lte) {
+		position: static;
+	}
+
+	> ul {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-around;
+
+		@media (--md-lte) {
+			display: block;
+			padding: 0;
+		}
+
+		> li {
+			list-style: none;
+
+			@media (--md-lte) {
+				border-block-end: 1px solid var(--border-color);
+			}
+
+			> a {
+				display: block;
+				inline-size: 100%;
+				padding: 1em;
+				color: inherit;
+				text-decoration: none;
+
+				@media (--md-lte) {
+					text-align: center;
+				}
+
+				&:hover {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+}