@charset "utf-8";

/*
	Theme Name: AC Life CSS 2026-
	Author: QU
	Copyright (c) 2026 QU
	License: MIT License
 */

@font-face {
	font-family   : 'Gabarito';
	src           : url("../../css/font/Gabarito.woff")  format('woff');
	unicode-range : U+0030-0039,U+0041-005A,U+0061-007A;/* 0-9,A-Z,a-z */font-display:swap;
}

/*
	目次
	
	1. 変数（カスタムプロパティ）
	2. ベースCSS
	3. レイアウト
	4. ヘッダー
	5. あいさつ
	6. 夢番地
	7. 振り返り
	8. フッター
*/

/* ------------------------------------
1. 変数（カスタムプロパティ）
------------------------------------ */
:root {
	--fs-2xl  : 2rem;
	--fs-xl   : 1.5rem;
	--fs-lg   : 1.25rem;
	--fs-base : 1rem;
	--fs-sm   : 0.875rem;
	--fs-xs   : 0.75rem;

	--fw-normal : 400;
	--fw-bold   : 700;

	--tc-main   : oklch(.26 0 0);
	--tc-strong : oklch(0 0 0);
	--tc-muted  : oklch(0.4 0.1 133);
	--tc-anchor : oklch(0.5 0.2 230);
	--tc-hover  : oklch(0.7 0.25 30);

	--bgc-body   : oklch(0.85 0.06 133);
	--bgc-wht    : oklch(0.98 0 0);
	--bgc-accent : oklch(0.8 0.18 133);

	--bdc : oklch(from var(--bgc-body) calc(l - 0.15) c h);
}

@media (prefers-color-scheme: dark) {
	:root {
		--tc-main    : oklch(0.83 0 0);
		--tc-muted   : oklch(0.5 0 0);
		--ftc-anchor : oklch(0.6 0.4 200);
		--tc-hover   : oklch(0.6 0.2 40);

		--bgc-body   : oklch(0.3 0 0);
		--bgc-wht    : oklch(0.4 0 0 / 0.8);
		--bgc-accent : oklch(0.5 0.18 133);

		--bd-color : oklch(0.24 0 0);
}

	img {
		filter : saturate(80%) brightness(80%);
	}
}


/* ------------------------------------
2. ベースCSS
------------------------------------ */
*,
*::before,
*::after {
	box-sizing : border-box;
	margin     : 0;
	padding    : 0;
}
html {
	hanging-punctuation : first allow-end;
	scroll-behavior     : smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior : auto;
	}
}
body {
	min-height             : 100vh;
	min-height             : 100svh;
	background-color       : var(--bgc-body);
	color                  : var(--tc-main);
	font-family            : "Gabarito", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size              : var(--fs-base);
	font-weight            : var(--fw-normal);
	line-height            : 1.7;
	-webkit-font-smoothing : antialiased;
	font-feature-settings  : "palt" 1;
	letter-spacing         : .03rem;
	text-autospace         : ideograph-alpha;
}
img {
	display        : block;
	height         : auto;
	max-width      : 100%;
}
p {
	overflow-wrap : break-word;
	text-align    : justify;
}
p + p {
	margin-block-start : 1rem;
}
ul, ol {
	list-style-position : outside;
}
table {
	border-collapse : collapse;
}
a {
	color                     : var(--tc-anchor);
	text-decoration           : underline dashed solid;
	text-decoration-thickness : 0.03em;
	text-underline-offset     : 0.25em;
	text-decoration-color     : oklch(from var(--tc-anchor) l c h/0.4);
}
a:hover {
	color                 : var(--tc-hover);
	text-decoration-color : oklch(from var(--tc-hover) l c h/0.4);
}
ruby {
	line-height : 1;
}
hr {
	height             : 0;
	margin-block       : 40px;
	border             : none;
	border-block-start : 2px dotted var(--bdc);
}
q {
	margin-inline : .4rem;
	color         : oklch(from var(--tc-main) l c h/0.7);
	font-style    : italic;
}

.align-right {
	margin     : 0;
	color      : oklch(from var(--tc-main) l c h/0.7);
	text-align : right;
}
.img-center {
	display       : block;
	margin-inline : auto;
}
.visually-hidden {
	position    : absolute;
	overflow    : hidden;
	height      : 1px;
	width       : 1px;
	margin      : -1px;
	padding     : 0;
	border      : 0;
	clip-path   : inset(50%);
	white-space : nowrap;
}
.dash {
	display       : inline-block;
	width         : 2.7em;
	margin-inline : .1rem;
	background    :
		linear-gradient(var(--tc-main), var(--tc-main))
		center / 88% 1px
		no-repeat;
	color         : transparent;
	white-space   : nowrap;
	overflow-wrap : normal;
}
.ellipses {
	margin-inline : 0.1rem;
}

/* ------------------------------------
3. レイアウト
------------------------------------ */
html {
	height : 100%;
}
body {
	display        : grid;
	gap            : 30px;
	max-width      : 700px;
	height         : 100%;
	margin-inline  : auto;
	padding-inline : 15px;
}
section {
	padding-inline : 15px;
}


/* ------------------------------------
4. ヘッダー
------------------------------------ */
#breadcrumb {
	text-align : right;
	a {
		padding-block   : .5rem;
		color           : oklch(from var(--tc-main) l c h/0.5);
		font-size       : var(--fs-sm);
		text-decoration : none;
		letter-spacing  : .07rem;
		&:hover {
			color : var(--tc-hover);
		}
	}
}

header {
	padding         : 0 0 370px 10px;
	background      : url(../images/index-bg.webp) no-repeat center bottom;
	background-size : 350px;
	line-height     : 1.5;

	h1 {
		font-size      : var(--fs-2xl);
		font-weight    : lighter;
		letter-spacing : .2rem;
	}
	p {
		letter-spacing : .07rem;

		span {
			position      : relative;
			display       : inline-block;
			margin-inline : -.5rem .5rem;
			padding       : 0 .3rem .1rem .3rem;
			border-radius : 50%;
			background    : var(--bgc-accent);
			font-family   : "Gabarito";
			font-size     : larger;
			font-weight   : 700;
			transform     : rotate(352deg);

			&::before {
				content             : "";
				position            : absolute;
				top                 : 55%;
				left                : 95%;
				margin-block-start  : -.4rem;
				border              : .4rem solid transparent;
				border-inline-start : .6rem solid var(--bgc-accent);
			}
		}
	}
}


/* ------------------------------------
5. あいさつ
------------------------------------ */
.greet {
	padding       : 140px 40px 30px 40px;
	border-radius : 8px;
	background    : var(--bgc-wht) url(../images/greet.webp) no-repeat center top;
}
@media screen and (min-width : 600px) {
	.greet {
		padding       : 30px 40px 30px 150px;
		border-radius : 8px;
		background    : var(--bgc-wht) url(../images/greet.webp) no-repeat left center;
	}
}


/* ------------------------------------
6. 夢番地
------------------------------------ */
.dream-address {
	margin-block  : 30px;
	padding       : 30px;
	border-radius : 8px;
	background    : var(--bgc-wht);

	dl {
		width          : fit-content;
		margin         : 20px auto 0 auto;
		border         : 5px solid var(--bgc-body);
		border-radius  : 12px;
		background     : var(--bgc-body);
		dt {
			padding    : 10px 15px;
			background : var(--bgc-body);
			font-size  : var(--fs-base);
			text-align : center;
		}
		dd {
			margin         : 3px;
			padding        : 10px 20px;
			border-radius  : 0 0 10px 10px ;
			background     : var(--bgc-wht);
			font-size      : var(--fs-lg);
			font-weight    : bold;
			text-align     : center;
			letter-spacing : 0.16rem;
		}
	}
	ul {
		list-style            : none;
		display               : grid;
		grid-template-columns : repeat(auto-fit, minmax(60px, 1fr));
		gap                   : 0 10px;
		margin                : 10px;
		padding               : 0;

		li {
			margin  : 0;
			padding : 0;

			img {
				height : 60px;
				width  : 60px;
			}
		}
	}
}


/* ------------------------------------
7. 振り返り
------------------------------------ */
.history {
	padding       : 30px;
	border-radius : 8px;
	background    : var(--bgc-wht);

	p {
		margin : 20px 0;
	}
}
.grid-dl {
	display               : grid;
	grid-template-columns : auto 1fr;
	gap                   : 20px 0;
	align-items           : center;
	width                 : fit-content;
	margin                : 2rem auto;

	dt,dd {
		margin  : 0;
		padding : 0;
	}
	dd {
		color     : oklch(from var(--tc-main) l c h/0.7);
		font-size : var(--fs-sm);
	}
	.dd-wrapper {
		display     : grid;
		align-items : start;
		width       : fit-content;
	}
}
@media screen and (min-width : 700px) {
	.glid-dl-group {
		display         : flex;
		justify-content : center;
		gap             : 1rem;

		dl {
			margin-inline : 0;
		}
	}
}
.note {
	padding-inline-start : 2rem;
	color                : oklch(from var(--tc-main) l c h/0.7);
	font-size            : var(--fs-sm);

	&::before {
		content     : "※";
		display     : block;
		float       : left;
		margin-left : -1rem;
		color       : oklch(from var(--tc-main) l c h/0.7);
		font-size   : var(--fs-sm);
	}
}


/* ------------------------------------
8. フッター
------------------------------------ */
footer {
	padding        : 10px 0;
	text-align     : right;
	letter-spacing : .06rem;

	small {
		font-size  : var(--fs-base);
		font-style : normal
	}
	a {
		color           : var(--tc-main);
		text-decoration : none;
	}
}