@charset "utf-8";
/* ==========================================================================
   Reset
========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
header, hgroup, footer, section, article,
details, menu, nav, aside, figure, figcaption {
	display: block;
}
a, a:focus {
	outline: none;
}
img, hr {
	border: none;
}
ol, ul {
	list-style-type: "";
}
table {
	border-collapse: collapse;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
}
strong {
	font-weight: bold;
}
svg {
	fill: currentColor;
	vertical-align: bottom;
}


/* ==========================================================================
   CSS Variables
========================================================================== */
:root {
	/* Font */
	--font-ja: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	--font-en: "EB Garamond", serif;
	--base-font-size: 14px;
	/* --base-font-size: clamp(14px, 1.2vw + 0.5rem, 18px); 画面幅に応じて文字サイズが変わる場合。min14px max18px */
	--leading-trim: calc((1em - 1lh) / 2);

	/* Colors */
	--bg-color: #fff;
	--main-color: #71b0d1;
	--accent-color: #fff;
	--cv-color: #f03331;
	--text-color: #222;
	--link-color: #4394e0;
	--hover-color: #006;

	/* Layout */
	--header-height: 100px;
	--container-width: 100%;
	--container-side-space: 20px;

	/* Animation */
	--transition-duration: 0.3s;
}
/* leading-trim - 1lhがサポートされていない旧環境用 */
@supports not (top: 1lh) {
	:root {
		--leading-trim: 0px;
	}
}
/* leading-trim - 英表示時のハーフ・レディング設定 (1emだと余白が残るため、1capを採用) */
:lang(en) {
  --leading-trim: calc((1cap - 1lh) / 2);
}

/* PC時の基本サイズ */
@media screen and (min-width: 769px) {
	:root {
		--base-font-size: 16px;
		--header-height: 87px;
		--container-width: 1020px;
	}
}


/* ==========================================================================
   Base Styles
========================================================================== */
html {
	scroll-behavior: smooth;
}
:target {
	scroll-margin-top: var(--header-height);
}
body {
	position: relative;
	overflow-x: clip; /* 横スクロールバー防止 */
	color: var(--text-color);
	font: 400 var(--base-font-size)/1.7 var(--font-ja);
	background-color: var(--bg-color);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
a {
	color: var(--link-color);
	text-decoration: none;
	transition: color var(--transition-duration), background-color var(--transition-duration);
}
a:hover {
	color: var(--hover-color);
}
img {
	vertical-align: middle;
}
*,
*::before,
*::after {
	box-sizing: border-box;
	min-inline-size: 0; /* Flexboxのオーバーフローバグ用 */
}


/* ==========================================================================
   Global adjustments
========================================================================== */
:where(:root) {
	text-spacing-trim: trim-start;  /* 日本語の行頭空白トリミング */
	text-autospace: normal;         /* 自動空白調整を無効（句読点など） */
	line-break: strict;             /* 日本語の禁則処理強化 */
	overflow-wrap: anywhere;        /* 長い英単語などで強制改行許可 */
	-webkit-text-size-adjust: 100%; /* iOSなどのフォント自動調整防止 */
	text-size-adjust: 100%;
	line-break: strict;             /* 行頭の句読点や記号の禁止 */
	overflow-wrap: anywhere;        /* 英単語やURLなど区切りがないテキストの強制改行 */
	scrollbar-gutter: stable;       /* スクロールバーによるレイアウトズレ防止 */
	-webkit-tap-highlight-color: transparent; /* モバイルのタップ時の青背景を無効化 */
}

:where(body) {
	block-size: 100%; /* サファリ以外のブラウザのフォールバック */
	block-size: 100dvb;
}
:where(img, picture, svg) {
	max-inline-size: 100%;
	block-size: auto; /* アスペクト比を保持 */
}
:where(textarea) {
	resize: vertical; /* テキストエリアの水平リサイズ無効 */
	resize: block;
}
:where(button, label, select, summary, [role='button'], [role='option']) {
	cursor: pointer; /* インタラクティブな要素にポインター表示 */
}
:where(:disabled) {
	cursor: not-allowed; /* フォームコントロール無効時のカーソル禁止 */
}


/* ==========================================================================
   Utility Classes
========================================================================== */
.u-font-en01 {
	font-family: var(--font-en);
}
.u-align-center {
	text-align: center;
}
.u-align-left {
	text-align: left;
}
.u-align-right {
	text-align: right;
}
.u-text-link {
	text-underline-offset: 0.2ex; /* 文字と下線に余白追加 */
}
.u-leading-trim {
	&::before,
	&::after {
		content: '';
		display: block flow;
		inline-size: 0;
		block-size: 1px;
	}
	&::before {
		margin-block-end: var(--leading-trim);
	}
	&::after {
		margin-block-start: var(--leading-trim);
	}
}


/* ==========================================================================
   Utility Classes
========================================================================== */
@font-face {
	font-family: 'fonticon';
	src: url('/wp-content/themes/refoma/assets/font/fonticon.eot');
	src: url('/wp-content/themes/refoma/assets/font/fonticon.eot#iefix') format('embedded-opentype'),
	   url('/wp-content/themes/refoma/assets/font/fonticon.woff2') format('woff2'),
	   url('/wp-content/themes/refoma/assets/font/fonticon.woff') format('woff'),
	   url('/wp-content/themes/refoma/assets/font/fonticon.ttf') format('truetype'),
	   url('/wp-content/themes/refoma/assets/font/fonticon.svg#fonticon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.u-icon {
	font-family: "fonticon";
	font-style: normal;
	font-weight: normal;
	speak: never;

	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;

	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;

	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;

	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-angle-left:before { content: '\f104'; }
.icon-angle-right:before { content: '\f105'; }
.icon-angle-up:before { content: '\f106'; }
.icon-angle-down:before { content: '\f107'; }
.icon-left-dir:before { content: '\f108'; }
.icon-right-dir:before { content: '\f109'; }
.icon-up-dir:before { content: '\f110'; }
.icon-down-dir:before { content: '\f111'; }
.icon-angle-double-left:before { content: '\f112'; }
.icon-angle-double-right:before { content: '\f113'; }
.icon-angle-double-up:before { content: '\f114'; }
.icon-angle-double-down:before { content: '\f115'; }
.icon-left-small:before { content: '\f116'; }
.icon-right-small:before { content: '\f117'; }
.icon-up-small:before { content: '\f118'; }
.icon-down-small:before { content: '\f119'; }
.icon-facebook:before { content: '\f120'; }
.icon-facebook-sq:before { content: '\f121'; }
.icon-facebook-sq-r:before { content: '\f122'; }
.icon-instagram:before { content: '\f123'; }
.icon-google:before { content: '\f124'; }
.icon-twitterb:before { content: '\f125'; }
.icon-twitterx:before { content: '\f126'; }
.icon-youtube:before { content: '\f127'; }
.icon-line:before { content: '\f128'; }
.icon-vimeo:before { content: '\f129'; }
.icon-tiktok:before { content: '\f130'; }
.icon-pinterest:before { content: '\f131'; }
.icon-pinterest-sq:before { content: '\f132'; }
.icon-search:before { content: '\f133'; }
.icon-mail:before { content: '\f134'; }
.icon-mail2:before { content: '\f135'; }
.icon-mail3:before { content: '\f136'; }
.icon-mail4:before { content: '\f137'; }
.icon-mail-large:before { content: '\f138'; }
.icon-phone:before { content: '\f139'; }
.icon-popup:before { content: '\f140'; }
.icon-chat:before { content: '\f141'; }
.icon-comment-alt:before { content: '\f142'; }
.icon-heart:before { content: '\f143'; }
.icon-heart-empty:before { content: '\f144'; }
.icon-star:before { content: '\f145'; }
.icon-resize:before { content: '\f146'; }
.icon-home:before { content: '\f147'; }
.icon-twitterx-sq-r:before { content: '\f148'; }