/* ============================
//  reset.css 追記
// ============================ */
a {
	text-decoration: none;
}

img {
	max-width: 100%;
	vertical-align: top;
}

svg {
	width: 100%;
	height: 100%;
	vertical-align: top;

	&.svg-sprite {
		/* display: none; */
		position: absolute;
		z-index: -200;
		width: 0px;
		height: 0px;
		overflow: hidden;
	}
}


/* ============================
// CSS変数
// https://zenn.dev/catnose99/articles/ee6787afe2182c
// https://zenn.dev/wagashi_osushi/books/94efd21a66ccaa/viewer/394571
// ============================ */
:root {
	--screen-pc: 1280px;
	--screen-sp: 375px;

	--container-padding: 28px;

	/* ============================
	// functions.php on line 462
	// Noto Sans JP : 300..700
	// https://fonts.google.com/noto/specimen/Noto+Sans+JP
	// ============================ */
	--font-noto-sans-jp: "Noto Sans JP", sans-serif;
	--font-weight--Thin: 100;
	--font-weight--ExtraLight: 200;
	--font-weight--Light: 300;
	--font-weight--Regular: 400;
	--font-weight--Medium: 500;
	--font-weight--SemiBold: 600;
	--font-weight--Bold: 700;
	--font-weight--ExtraBold: 800;
	--font-weight--Black: 900;

	--color-background: #F5F5F5;
	--color-text: #101010;

	--color-about-main: #FE5454;
	--color-elderly-support-main: #F0693A;
	--color-child-support-main: #F4A016;
	--color-disability-support-main: #8CC220;
	--color-revenue-business-main: #17BBEF;
	--color-public-benefit-main: #5599FF;
	--color-news-main: #5465FF;
	--color-recruitment-main: #7754FF;
	--color-ict-dx-main: #FF54BA;

	--color-about-light: #FFCCCC;
	--color-elderly-support-light: #FBD2C4;
	--color-child-support-light: #FCE3B9;
	--color-disability-support-light: #DDEDBC;
	--color-revenue-business-light: #B9EBFA;
	--color-public-benefit-light: #CCE0FF;
	--color-news-light: #CCD1FF;
	--color-recruitment-light: #D6CCFF;
	--color-ict-dx-light: #FFCCEA;

	--color-white: #FFFFFF;
	--color-gray: #949090;

	/* Brand Color */
	--color-brand-facebook: #0866FF;
	--color-brand-x: #000000;
	--color-brand-youtube--red: #FF0000;
	--color-brand-youtube--white: #FFFFFF;
	--color-brand-youtube--gray: #282828;

	/* Easing Functions */
	--ease: cubic-bezier(.36, .33, 0, 1);
	--easeOut: cubic-bezier(.22, .61, .36, 1);


	/* WordPress 管理バー対策 */
	--global--admin-bar--height: 0px;

	/* scroll対策 */
	--header--height: 0px;
}


/* ============================
// scroll-padding
// 全体に対してheader分の余白確保
// ============================ */
html {
	height: auto;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header--height);

	&.has-scrollbar {
		scrollbar-gutter: stable;
	}

	.no-scroll {
		overflow: hidden;
	}
}

/* ============================
// scroll-margin
// 特定要素に対してheader分の余白確保
// ============================ */
:target {
	scroll-margin-top: var(--header--height);
}

body {
	/* 基本設定：font */
	font-family: var(--font-noto-sans-jp);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

	/* 基本設定：color */
	color: var(--color-text);
	background-color: var(--color-background);

	/* header, footerを常に画面上下端に配置 */
	position: relative;
	height: auto;
	min-height: calc(100dvh - var(--global--admin-bar--height));
	margin: 0;

	>header {
		position: sticky;
		top: var(--global--admin-bar--height);
		z-index: 20;

		ul {
			margin: 0;
			padding: 0;
		}
	}

	>footer {
		position: sticky;
		top: 100dvh;
		z-index: 16;

		ul {
			margin: 0;
			padding: 0;
		}
	}

	/* ============================
	// [word-break: auto-phrase;] 
	// CJKテキストを適切な位置で改行。意図しない改行の可能性有。<wbr>の使用を検討
	// [text-wrap: balance;] 文字数を揃えて改行
	// https://blanche-toile.com/web/css-text-wrap-balance
	//
	// 英字URLに対しては個別対応が必要
	// (table-layoutは癖があるため注意)
	// https://qiita.com/debiru/items/0a349bee3669b776d8e2
	// https://qiita.com/ist-a-k/items/2b1385574e1a1babdde1
	//
	// overflow-wrap: anywhere;
	// ============================ */
	/*
	h1, h2, h3, h4, h5, h6 {
		font-weight: 600;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	*/

	/* Theme Transition
	// ============================
	// transition: color .64s var(--ease),
	// background .64s var(--ease);
	// ============================ */
}


/* ============================
// WordPressでAdmin Barと固定したヘッダーを重ねない方法 – kwLog
// https://blog.makotokw.com/2021/02/21/wordpress-sticky-header-with-admin-bar/
// ============================ */
.admin-bar {
	--global--admin-bar--height: 32px;

	@media only screen and (max-width: 782px) {
		--global--admin-bar--height: 46px;
	}
}

#wpadminbar {
	position: fixed !important;
}








/* ============================
// 共通CSS
// ============================ */

.size-fluid-clamp {
	/* --screen-pc: 1280px; */
	/* --screen-sp: 375px; */
	--viewport-width-diff: calc(var(--screen-pc) - var(--screen-sp));

	--size-min: 12px;
	--size-max: 24px;
	--size-range: calc(var(--size-max) - var(--size-min));

	/* Firefox以外の設定 */
	@supports not (-moz-appearance: none) {
		--size-fluid-value: calc((100vw - var(--screen-sp)) * var(--size-range) / var(--viewport-width-diff) + var(--size-min));
		--size-fluid-clamp: clamp(var(--size-min), var(--size-fluid-value), var(--size-max));

		--size-inverse-fluid-value: calc(var(--size-max) - ((100vw - var(--screen-sp)) * var(--size-range) / var(--viewport-width-diff)));
		--size-inverse-fluid-clamp: clamp(var(--size-min), var(--size-inverse-fluid-value), var(--size-max));
	}
}

.hover-rotate-text {
	--padding-block: 0em;
	--rotate-gap: 1.5em;
	--rotate-text-color: currentColor;
	--rotate-text-shadow: currentColor;

	&:not(:has(.rotate-text-clipping)),
	.rotate-text-clipping {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		padding-block: var(--padding-block);
	}

	.rotate-text {
		/* --offset-y : js設定 */
		--rotate-range: calc(var(--offset-y, 1em) + var(--rotate-gap));
		display: inline-block;
		color: var(--rotate-text-color, currentColor);
		white-space: nowrap;
		text-shadow: 0px var(--rotate-range) var(--rotate-text-shadow, currentColor);
		transition: transform .42s var(--ease);
	}

	&:hover .rotate-text {
		transform: translateY(calc(var(--rotate-range) * -1));
	}
}

.icon-animated-arrow-outward {
	/* --circle-size: 15px, 25px; */
	--circle-size: 15px;
	--circle-color: var(--color-text);
	--arrow-size: calc(var(--circle-size) * 0.28);
	--arrow-color: var(--color-background);
	--arrow-position: calc(50% - var(--arrow-size) / 2);
	--transition-speed: 0.3s;
	--transition-easing: cubic-bezier(.4, 0, .2, 1);
	--slide-dist: calc(var(--circle-size) * 0.9);

	width: var(--circle-size);
	height: var(--circle-size);
	background-color: var(--circle-color);
	border-radius: 50%;
	position: relative;
	overflow: hidden;

	&::before,
	&::after {
		content: "";
		display: block;
		width: var(--arrow-size);
		height: var(--arrow-size);
		background-color: var(--arrow-color);
		clip-path: url(#clippath-arrow-outward);

		position: absolute;
		top: var(--arrow-position);
		left: var(--arrow-position);

		transition: transform var(--transition-speed) var(--transition-easing),
			opacity var(--transition-speed) var(--transition-easing);
	}

	&::before {
		transform: translate(0, 0);
		opacity: 1;
	}

	&::after {
		transform: translate(calc(-1 * var(--slide-dist)), var(--slide-dist));
		opacity: 0;
	}

	/* 親要素にhoverされた時の動作 */
	&:is(:hover > *)::before {
		/* 右上へ移動させて退場 */
		transform: translate(var(--slide-dist), calc(-1 * var(--slide-dist)));
		opacity: 0;
	}

	&:is(:hover > *)::after {
		/* 左下から中央へ移動 */
		transform: translate(0, 0);
		opacity: 1;
	}
}

.button-arrow-rotate {
	display: grid;
	place-content: center;
	position: relative;

	padding-block: 0.5em;
	padding-inline: 1em;
	border-radius: 0.7em;
	background-color: var(--color-background);
	color: var(--color-text);

	.icon-animated-arrow-outward {
		position: absolute;
		top: 0.6em;
		right: 0.6em;
	}

	.rotate-text-clipping {
		--rotate-gap: 2em;
		--padding-block: 0.5em;
	}
}

.youtube-player {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

:is(.single-line, .nowrap) {
	white-space: nowrap;
}


/* ============================
// sprite-smiling-park.svg
// ============================ */
.svg--smiling-park-logo {
	aspect-ratio: 640 / 150;
}

.svg--text-SMILING_PARK {
	aspect-ratio: 401.04 / 72.89;
}

.svg--text-Our_Business {
	aspect-ratio: 373.07 / 72.89;
}

.svg--text-Outline {
	aspect-ratio: 175.62 / 72.89;
}

.svg--text-Staff_Introduction {
	aspect-ratio: 410.15 / 72.89;
}

.svg--icon-arrow-outward {
	aspect-ratio: 7 / 7;
}

.svg--icon-phone {
	aspect-ratio: 27 / 23;
}


/* ============================
// sprite-smiling-park--location.svg
// ============================ */

.svg--background-featuredImage {
	aspect-ratio: 1920 / 1080;
}

.svg--background-circularText {
	aspect-ratio: 1096 / 1097;
}


/* ============================
// sprite-social.svg
// ============================ */
.svg--sns-facebook {
	aspect-ratio: 30 / 30;
}

.svg--sns-instagram {
	aspect-ratio: 30 / 30;
}

.svg--sns-x {
	aspect-ratio: 1200 / 1227;
}

.svg--sns-youtube {
	aspect-ratio: 30 / 30;
}