@charset "UTF-8";

/* ==========================================================
   7BEE FOUNDATION CSS v1.0
   reset + default + base typography
   ========================================================== */

:root {
	--font-sans:
		"Noto Sans JP",
		"Hiragino Kaku Gothic ProN",
		"Yu Gothic",
		Meiryo,
		sans-serif;

	--foundation-text: #222;
	--foundation-muted: #666;
	--foundation-line: #ddd;
	--foundation-bg: #fff;

	--font-base: 1rem;       /* 16px */
	--font-small: .875rem;   /* 14px */
	--font-note: .8125rem;   /* 13px */

	--line-base: 1.8;
	--line-text: 1.9;
}


/* ==========================================================
   BOX MODEL
   ========================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}


/* ==========================================================
   DOCUMENT
   ========================================================== */

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	margin: 0;
	background: var(--foundation-bg);
	color: var(--foundation-text);
	font-family: var(--font-sans);
	font-size: var(--font-base);
	font-weight: 400;
	line-height: var(--line-base);
	text-align: left;
	line-break: strict;
	overflow-wrap: break-word;
}


/* ==========================================================
   RESET
   見た目を作るためではなくブラウザ差をなくす
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
figure,
figcaption,
blockquote {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

address,
cite {
	font-style: normal;
}

strong,
b {
	font-weight: 700;
}


/* ==========================================================
   LIST
   通常のリスト機能は残す
   class付きリストのみUI用途として初期化
   ========================================================== */

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ==========================================================
   MEDIA
   ========================================================== */

img,
picture,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
	border: 0;
}

iframe {
	max-width: 100%;
	border: 0;
}


/* ==========================================================
   TABLE
   ========================================================== */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	font-weight: 700;
	text-align: left;
}

th,
td {
	vertical-align: top;
}


/* ==========================================================
   LINK
   ========================================================== */

a {
	color: inherit;
	text-decoration-thickness: .08em;
	text-underline-offset: .18em;
}

a[class] {
	text-decoration: none;
}


/* ==========================================================
   FORM
   ========================================================== */

button,
input,
textarea,
select {
	margin: 0;
	font: inherit;
	color: inherit;
}

button {
	border: 0;
	background: none;
	cursor: pointer;
}

input,
textarea,
select {
	font-size: 1rem;
	line-height: 1.5;
}

textarea {
	resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
}


/* ==========================================================
   BASIC TYPOGRAPHY
   ========================================================== */

/*
   7BEE typography standard

   本文        16px / 400
   補足        14px
   最小文字    原則13pxまで
   強調        700
   見出し      原則700
   強い見出し  800
   900         HERO・装飾など限定用途

   h1-h6のサイズはfoundationでは定義しない。
   ページ・コンポーネント・WP記事側で役割に応じて指定する。

   SPでも本文16pxを基本とする。
*/

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--font-small);
	line-height: 1.6;
}

em {
	font-style: italic;
}


/* ==========================================================
   OPTIONAL TYPOGRAPHY
   ========================================================== */

.text-small {
	font-size: var(--font-small);
	line-height: 1.7;
}

.text-note {
	font-size: var(--font-note);
	line-height: 1.7;
	color: var(--foundation-muted);
}

.text-medium {
	font-weight: 500;
}

.text-bold {
	font-weight: 700;
}

.text-heavy {
	font-weight: 800;
}


/* ==========================================================
   OTHER HTML ELEMENTS
   ========================================================== */

hr {
	height: 0;
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--foundation-line);
}

sub,
sup {
	position: relative;
	font-size: .75em;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -.5em;
}

sub {
	bottom: -.25em;
}

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		"Liberation Mono",
		monospace;
}

pre {
	overflow-x: auto;
	white-space: pre;
}

summary {
	cursor: pointer;
}

[hidden] {
	display: none !important;
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/*---------------------------------------------
	clearfix
---------------------------------------------*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}