@charset "UTF-8";
:root {
/* Root設定 */
font-family: "Georama", sans-serif;
/* 1rem = 10px（@media: w360px）〜 16px（@media: w1000px） */
font-size: 100%;
font-size: clamp(62.5%, 62.5% + (1vw - 22.5%) * 0.9375, 100%);
/* 1rlh = 8px（@media: w360px）〜 16px（@media: w1000px） */
line-height: 1pc;
line-height: clamp(0.5pc, 0.5pc + (1vw - 0.225pc) * 1.25, 1pc);
/* 1rch = 5.3px */
font-stretch: 94.5%;
/* Fluid-fractional rem（可変rem）：例）calc(var(--⅓fem) * 3) */
--⅞fem: clamp(14px, calc(14px + ((1vw - 3.6px) * 0.3125)), 16px);
--⅘fem: clamp(12.8px, calc(12.8px + ((1vw - 3.6px) * 0.5)), 16px);
--¾fem: clamp(12px, calc(12px + ((1vw - 3.6px) * 0.625)), 16px);
--⅔fem: clamp(10.6px, calc(10.6px + ((1vw - 3.6px) * 0.8438)), 16px);
--⅝fem: clamp(10px, calc(10px + ((1vw - 3.6px) * 0.9375)), 16px);
--⅗fem: clamp(9.6px, calc(9.6px + ((1vw - 3.6px) * 1)), 16px);
--½fem: clamp(8px, calc(8px + ((1vw - 3.6px) * 1.25)), 16px);
--⅖fem: clamp(6.4px, calc(6.4px + ((1vw - 3.6px) * 1.5)), 16px);
--⅜fem: clamp(6px, calc(6px + ((1vw - 3.6px) * 1.5625)), 16px);
--⅓fem: clamp(5.3px, calc(5.3px + ((1vw - 3.6px) * 1.6719)), 16px);
--¼fem: clamp(4px, calc(4px + ((1vw - 3.6px) * 1.875)), 16px);
/* Fluid-Magnificational rem（スマホの方が大きい）：例）calc(var(x1\.33fem) * 1) */
--x1\.33fem: clamp(16px, calc(21.3px + ((1vw - 3.6px) * -0.8281)), 21.3px);
--x1\.5fem: clamp(16px, calc(24px + ((1vw - 3.6px) * -1.25)), 24px);
--x2fem: clamp(16px, calc(32px + ((1vw - 3.6px) * -2.5)), 32px);
--x3fem: clamp(16px, calc(48px + ((1vw - 3.6px) * -5)), 48px);
--x4fem: clamp(16px, calc(64px + ((1vw - 3.6px) * -7.5)), 64px);
/* Root font-size */
--fz-xxxs: clamp(10px, calc(10px + ((1vw - 3.6px) * 0.1563)), 11px);
--fz-xxs: clamp(11px, calc(11px + ((1vw - 3.6px) * 0.1563)), 12px);
--fz-xs: clamp(12px, calc(12px + ((1vw - 3.6px) * 0.1563)), 13px);
--fz-sm: clamp(13px, calc(13px + ((1vw - 3.6px) * 0.1563)), 14px);
--fz-ss: clamp(14px, calc(14px + ((1vw - 3.6px) * 0.1563)), 15px);
--fz-p: clamp(14px, calc(14px + ((1vw - 3.6px) * 0.1563)), 15px);
--fz-rg: clamp(15px, calc(15px + ((1vw - 3.6px) * 0.1563)), 16px);
--fz-md: clamp(15.3px, calc(15.3px + ((1vw - 3.6px) * 0.26563)), 17px);
--fz-em: clamp(15.6px, calc(15.6px + ((1vw - 3.6px) * 0.375)), 18px);
--fz-sl: clamp(16px, calc(16px + ((1vw - 3.6px) * 0.4688)), 19px);
--fz-lg: clamp(16.4px, calc(16.4px + ((1vw - 3.6px) * 0.7188)), 21px);
--fz-xl: clamp(16.8px, calc(16.8px + ((1vw - 3.6px) * 1.125)), 24px);
--fz-xxl: clamp(17.6px, calc(17.6px + ((1vw - 3.6px) * 1.4687)), 27px);
--fz-xxxl: clamp(18.2px, calc(18.2px + ((1vw - 3.6px) * 1.8438)), 30px);
--fz-sol: clamp(19.7px, calc(19.7px + ((1vw - 3.6px) * 2.0781)), 33px);
--fz-ol: clamp(21.2px, calc(21.2px + ((1vw - 3.6px) * 2.3125)), 36px);
--fz-xol: clamp(22.6px, calc(22.6px + ((1vw - 3.6px) * 2.5625)), 39px);
--fz-xxol: clamp(24px, calc(24px + ((1vw - 3.6px) * 2.8125)), 42px);
--fz-xxxol: clamp(25.4px, calc(25.4px + ((1vw - 3.6px) * 3.0625)), 45px);
--fz-skl: clamp(26.7px, calc(26.7px + ((1vw - 3.6px) * 3.3281)), 48px);
--fz-kl: clamp(27.9px, calc(27.9px + ((1vw - 3.6px) * 3.6094)), 51px);
--fz-xkl: clamp(29.2px, calc(29.2px + ((1vw - 3.6px) * 3.875)), 54px);
--fz-xxkl: clamp(30.4px, calc(30.4px + ((1vw - 3.6px) * 4.1563)), 57px);
--fz-xxxkl: clamp(31.6px, calc(31.6px + ((1vw - 3.6px) * 4.4375)), 60px);
--fz-sgl: clamp(32.7px, calc(32.7px + ((1vw - 3.6px) * 4.7344)), 63px);
--fz-gl: clamp(33.8px, calc(33.8px + ((1vw - 3.6px) * 5.0313)), 66px);
--fz-xgl: clamp(34.9px, calc(34.9px + ((1vw - 3.6px) * 5.3281)), 69px);
--fz-xxgl: clamp(36px, calc(36px + ((1vw - 3.6px) * 5.625)), 72px);
--fz-xxxgl: clamp(37px, calc(37px + ((1vw - 3.6px) * 5.9375)), 75px);
--fz-shl: clamp(38px, calc(38px + ((1vw - 3.6px) * 6.25)), 78px);
--fz-hl: clamp(39px, calc(39px + ((1vw - 3.6px) * 6.5625)), 81px);
--fz-xhl: clamp(40px, calc(40px + ((1vw - 3.6px) * 6.875)), 84px);
--fz-xxhl: clamp(40.9px, calc(40.9px + ((1vw - 3.6px) * 7.2031)), 87px);
--fz-xxxhl: clamp(41.9px, calc(41.9px + ((1vw - 3.6px) * 7.5156)), 90px);
--fz-sul: clamp(42.8px, calc(42.8px + ((1vw - 3.6px) * 7.8438)), 93px);
--fz-ul: clamp(43.6px, calc(43.6px + ((1vw - 3.6px) * 8.1875)), 96px);
--fz-xul: clamp(44.5px, calc(44.5px + ((1vw - 3.6px) * 8.5156)), 99px);
--fz-xxul: clamp(45.3px, calc(45.3px + ((1vw - 3.6px) * 8.8594)), 102px);
--fz-xxxul: clamp(46.2px, calc(46.2px + ((1vw - 3.6px) * 9.1875)), 105px);
--fz-smgl: clamp(47px, calc(47px + ((1vw - 3.6px) * 9.5313)), 108px);
--fz-mgl: clamp(47.7px, calc(47.7px + ((1vw - 3.6px) * 9.8906)), 111px);
--fz-xmgl: clamp(48.5px, calc(48.5px + ((1vw - 3.6px) * 10.2344)), 114px);
--fz-xxmgl: clamp(49.3px, calc(49.3px + ((1vw - 3.6px) * 10.5781)), 117px);
--fz-xxxmgl: clamp(50px, calc(50px + ((1vw - 3.6px) * 10.9375)), 120px);
}

/* Root（PC） */
@media print, screen and (min-width: 744px) {
:root {
/* 1rch = 16px（@media: w1000px） */
font-stretch: 145.6%;
}
}
html {
height: 100%;
min-height: 0vw;
}

body.magique {
position: relative;
z-index: 0;
width: 100%;
height: 100%;
/* 基本設定 */
line-height: 1.88;
line-height: clamp(1.66em, 1.66em + (1vw - 0.225em) * 0.55, 1.88em);
letter-spacing: 0.03em;
letter-spacing: clamp(0.01em, 0.01em + (1vw - 0.225em) * 0.05, 0.03em);
font-size: 15px;
font-size: clamp(14px, 14px + (1vw - 3.6px) * 0.1563, 15px);
font-weight: 400;
background: var(--c-base);
color: var(--c-text);
/* スマホを横向きにしても文字が大きくならない */
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
/* IEで疑似要素を表示させる用 */
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
text-rendering: optimizeLegibility;
/* 役物の字詰めを綺麗にする */
font-feature-settings: "kern", "liga", "clig", "calt", "palt";
}

/* スマホではスクロールバー非表示 */
@media screen and (max-width: 743.9px) {
body {
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
}
/* タブレット */
body.tablet {
min-width: 1200px;
}

/* bodyがスクロールバーでズレないようにする（PC） */
@media print, screen and (min-width: 744px) {
body,
body:is(*, .magique).ov-hidden {
overflow-y: scroll;
}
}
/* .marble（総囲い）
-------------------------------------- */
.marble {
position: relative;
width: 100%;
height: auto;
min-height: 100vh;
overflow: hidden;
}

.marble::before,
.marble::after {
content: "";
display: block;
width: 100%;
height: 100vh;
background: #FFF;
pointer-events: none;
}

.marble::after {
position: fixed;
z-index: 20000;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: all 2s ease-out 0.3s;
}

.marble.is-loaded::before {
height: 0;
}

.marble.is-loaded::after {
opacity: 0;
}

/* .overload（ホワイトアウト用） */
.overload {
position: fixed;
z-index: 20000;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
width: 100%;
height: 100vh;
background: var(--c-assort-100);
pointer-events: none;
opacity: 0;
}

/* font-family
-------------------------------------- */
/* ベース・ゴシック体 */
body,
.ff-gothic {
font-family: "YakuHanJP", "Poppins", "Noto Sans", "Noto Sans JP", sans-serif;
}

.ff-Poppins {
font-family: "YakuHanJP", "Poppins", "Noto Sans", "Noto Sans JP", sans-serif;
}

.ff-Hanken {
font-family: "YakuHanJP", "Hanken Grotesk", "Noto Sans", "Noto Sans JP", sans-serif;
}

.ff-NotoSans {
font-family: "YakuHanJP", "Noto Sans", "Noto Sans JP", sans-serif;
}

.ff-BIZUDPGothic {
font-family: "YakuHanJP", "BIZ UDPGothic", sans-serif;
}

.ff-ZenKakuAntique {
font-family: "YakuHanJP", "Zen Kaku Gothic Antique", sans-serif;
}

.ff-MPLUS1 {
font-family: "YakuHanJP", "M PLUS 1", sans-serif;
}

/* 明朝体 */
.ff-mincho,
.ff-ShipporiMincho {
font-family: "YakuHanMP", "Shippori Mincho", serif;
font-weight: 600;
}

.ff-Lusitana {
font-family: "YakuHanMP", "Lusitana", "Shippori Mincho", serif;
font-weight: 600;
}

.ff-NotoSerif {
font-family: "YakuHanMP", "Noto Serif", "Noto Serif JP", serif;
font-weight: 600;
}

/* 丸文字 + ジャギ防止 */
.ff-rounded,
.ff-MPRounded {
font-family: "YakuHanRP", "M PLUS Rounded 1c", sans-serif;
transform: rotate(0.03deg);
}

.ff-ShinRetroMaru {
font-family: "YakuHanRP", "Shin Retro Maru Gothic", sans-serif;
}

.ff-LINESeed {
font-family: "YakuHanJP", "LINE Seed JP_OTF", sans-serif;
}

/* 数字用 */
.ff-Roboto {
font-family: "Roboto", sans-serif;
}

.ff-Oswald {
font-family: "Oswald", sans-serif;
}

.ff-DDin {
font-family: "D-DIN-PRO", sans-serif;
}

/* 英数字用 */
.ff-SourceSans {
font-family: "Source Sans Pro", sans-serif;
}

.ff-SourceSerif {
font-family: "Source Serif Pro", serif;
}

/* サンセリフ体 */
.ff-Montserrat {
font-family: "Montserrat", sans-serif;
}

.ff-RobotoFlex {
font-family: "Roboto Flex", sans-serif;
}

.ff-Jost {
font-family: "Jost", sans-serif;
}

/* Condensed */
.ff-RobotoCondensed {
font-family: "Roboto Condensed", sans-serif;
}

.ff-ArchivoExtraCondensed {
font-family: "Archivo ExtraCondensed", sans-serif;
}

.ff-BarlowCondensed {
font-family: "Barlow Condensed", sans-serif;
}

.ff-EncodeSansCondensed {
font-family: "Encode Sans Condensed", sans-serif;
}

/* セリフ体 */
.ff-LibreBaskerville {
font-family: "Libre Baskerville", serif;
}

.ff-Cinzel {
font-family: "Cinzel", serif;
}

.ff-Cormorant {
font-family: "Cormorant Infant", "Cormorant Garamond", serif;
}

.ff-PrataPlayfair {
font-family: "Prata", "Playfair Display", serif;
}

.ff-Cardo {
font-family: "Cardo", serif;
}

.ff-Marcellus {
font-family: "Marcellus", serif;
}

/* 筆記体 */
.ff-Dancing {
font-family: "Dancing Script", serif;
}

/* 記号用, Monospace */
.ff-NanumGothic {
font-family: "Nanum Gothic", sans-serif;
}

.ff-HackGen {
font-family: "HackGen", monospace;
}

.ff-NotoSansMono {
font-family: "Noto Sans Mono CJK JP", monospace;
}

/* Reset
-------------------------------------- */
/* border-box */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
padding-inline-start: 0;
}

/* 要素を不可視にする */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

/* タグリセット（IE対策） */
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
box-sizing: border-box;
display: block;
margin: 0;
padding: 0;
font-size: 100%;
}

/* ブロック系タグのリセット */
dt,
dd,
th,
td {
margin: 0;
padding: 0;
font-style: normal;
font-weight: unset;
text-decoration: none;
}

/* 画像系タグのリセット */
img,
iframe,
embed,
video,
svg,
img[src$=".svg"] {
display: inline-block;
width: auto;
height: auto;
max-width: 100%;
vertical-align: middle;
font-style: normal;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 0.75rem;
object-fit: cover;
}

picture {
display: inline-block;
width: 100%;
max-width: 100%;
vertical-align: middle;
overflow: hidden;
}

picture > img {
width: 100%;
}

/* svg：非表示（フィルター） */
.svg-filter {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}

/* inline-block */
i {
display: inline-block;
margin: 0;
padding: 0;
font-style: normal;
text-decoration: none;
}

/* 斜体 */
i.italic {
font-style: italic;
}

/* 記号（sign）, 図形（suit） */
s {
display: inline-block;
margin: 0;
padding: 0;
font-style: normal;
text-decoration: none;
vertical-align: middle;
}

/** .strike（取り消し線） */
s.strike {
position: relative;
text-decoration: line-through;
text-decoration-style: solid;
text-decoration-color: var(--danger);
text-decoration-thickness: 1px;
}

/* 文章系タグのリセット */
br,
wbr {
font-size: 0;
}

nobr,
.nobr {
white-space: nowrap;
}

p,
small,
em,
strong,
b,
mn,
mi,
dfn,
address {
margin: 0;
padding: 0;
font-weight: unset;
font-style: normal;
text-decoration: none;
}

/* u（上下前後、例外、下線他） */
u {
margin: 0;
padding: 0;
font-style: normal;
text-decoration: none;
}

/* 下線（inline） */
u.underline,
b.underline {
display: inline;
text-decoration: underline solid #a3a3a3;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}

/* 水平線（block） */
u.underbar,
b.underbar {
display: block;
position: relative;
width: 6em;
max-width: 90vw;
height: 6px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
background: var(--c-accent);
}

/* マーカー（inline） */
mark {
background-image: linear-gradient(90deg, hsla(60, 96%, 79%, 0.7), hsla(60, 96%, 93%, 0.7));
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 100%;
}

/* ルビ */
ruby,
rb,
rt,
rp {
margin: 0;
padding: 0;
font-style: normal;
text-decoration: none;
}

/* 句読点 */
ins,
del {
margin: 0;
padding: 0;
font-style: normal;
text-decoration: none;
}

/* 引用（BOX） */
blockquote {
margin: 0;
padding: 0;
background: #ebebeb;
}

/* 引用,疑似要素 */
q {
display: inline-block;
margin: 0;
padding: 0;
font-style: normal;
text-decoration: none;
}

q::before,
q::after {
content: "";
}

/* 引用 */
q.quote {
background: #ebebeb;
}

/* 数式系タグのリセット */
math,
mtext,
mn,
mi,
mo,
mspace,
msup,
msub,
msubsup,
mover,
munder {
margin: 0;
padding: 0;
font-style: normal;
font-weight: unset;
text-decoration: none;
white-space: nowrap;
}

math {
/* Flex */
display: inline-flex;
justify-content: center;
align-items: center;
}

/* コード系タグのリセット */
code,
kbd,
pre,
samp {
font-family: "HackGen", "PlemolJP", monospace;
}

code {
padding: 2px 4px;
background: #f2f4f5;
color: var(--c-text);
}

pre > code {
display: inline-block;
}

/* 水平線 */
hr {
height: 0;
margin: 0;
padding: 0;
overflow: visible;
border: 0;
}

/* summaryの三角消去 */
details,
summary {
margin: 0;
padding: 0;
list-style: none;
}

details summary::marker,
summary::-webkit-details-marker {
display: none;
}

:is(*, .magique) .ie summary::before {
content: "" !important;
}

details summary:focus {
outline: none;
}

details summary:focus {
outline: none;
}

/* contenteditableのアウトライン消去 */
[contenteditable]:focus {
outline: none;
}

/* a（link）
-------------------------------------- */
a {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
text-decoration: none;
color: inherit;
transition: all 0.3s ease-in;
}

:is([href], [onclick]),
:is([href], [onclick])::before,
:is([href], [onclick])::after {
transition: all 0.3s ease-in;
}

/* :is(:hover, :focus) */
@media (any-hover: hover) {
:is([href], [onclick]):is(:hover, :focus) {
opacity: 0.7;
}
:is([href], [onclick]):is(:active) {
opacity: 1;
}
}
/* PCのときは電話リンク無効 */
@media screen and (min-width: 744px) {
a[href^="tel:"] {
display: inline-block;
pointer-events: none;
cursor: none;
}
}


/* cite>a（参照元） */
cite {
	margin: 0;
	padding: 0;
	font-style: normal;
}

cite>:is([href], [onclick]) {
	position: relative;
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-color: var(--c-cassis);
	color: var(--c-cassis);
}

/* :hover */
@media (any-hover: hover) {
	cite>:is([href], [onclick]):is(:hover, :focus) {
		color: var(--c-cassis-l1);
		text-decoration-color: var(--c-cassis-l1);
	}

	cite>:is([href], [onclick]):is(:active) {
		text-decoration-color: var(--c-cassis);
		color: var(--c-cassis);
	}
}

cite>:is([href], [onclick]) {
	position: relative;
}

cite>:is([href], [onclick])[target="_blank"],
cite>:is([href], [onclick])[href*=".pdf"] {
	margin-right: 1.5em;
}

cite>:is([href], [onclick])[target="_blank"]::after,
cite>:is([href], [onclick])[href*=".pdf"]::after {
	content: "";
	position: absolute;
	margin: auto;
	/* Grid */
	display: inline-grid;
	place-content: center;
	place-items: center;
  width: 1.25em;
  height: 1.25em;
	font-size: 133.3%;
	font-family: 'Material Symbols Sharp';
	font-variation-settings: 'FILL' 0,
		'wght' 300;
	text-decoration: none;
}

/* a:_blank */
cite>:is([href], [onclick])[target="_blank"]:not([href*=".pdf"])::after {
  top: 0.1px;
  right: -1.4em;
	content: "\e89e";
	color: var(--c-text-500, hsl(223, 6%, 53%));
	-webkit-text-fill-color: var(--c-text-500, hsl(223, 6%, 53%));
}

/* a:PDF */
cite>:is([href], [onclick])[href*=".pdf"]::after {
  right: -1.4em;
	bottom: 0.1px;
	width: 24px;
	height: 24px;
	background-image: url('https://code-plus.jp/cdn/commons/img/icon/icn-PDF_32.svg');
	background-size: contain;
}

/* フォーム：テキスト系タグのリセット
-------------------------------------- */
:is(*, .magique) :is(textarea.textarea,
input[type=text],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week]) {
appearance: none;
width: 100%;
max-width: 100%;
border: 1px solid hsl(233, 13%, 84%);
border-radius: 2px;
background: var(--c-base);
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
color: hsla(0, 0%, 0%, 0.7);
font-size: var(--fz-p);
line-height: 1.5;
transition: ease-out 0.12s;
}

:is(*, .magique) textarea.textarea {
height: auto;
padding: calc(0.45em - 1.5px) 0.5em;
}

:is(*, .magique) :is(input[type=text],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week]) {
height: calc(2.5em + 2px);
padding: 0.45em 0.75em;
}

/* :placeholder-shown */
:is(*, .magique) .select > select.placeholder-shown,
:is(*, .magique) :is(textarea.textarea,
input[type=text],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week]):placeholder-shown {
background: var(--c-secondary);
color: hsla(0, 0%, 0%, 0.26);
}

/* [readonly] */
:is(*, .magique) .select > select[readonly],
:is(*, .magique) :is(textarea.textarea,
input[type=text],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week])[readonly] {
background: var(--c-secondary-100);
border: 1px solid hsl(233, 13%, 84%);
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
color: rgba(0, 0, 0, 0.7);
}

/* [readonly]:placeholder-shown */
:is(*, .magique) .select > select[readonly].placeholder-shown,
:is(*, .magique) :is(textarea.textarea,
input[type=text],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week])[readonly]:placeholder-shown {
background: var(--c-secondary-150);
color: hsla(0, 0%, 0%, 0.26);
}

/* :focus */
:is(*, .magique) .select > select:focus,
:is(*, .magique) :is(textarea.textarea,
input[type=text],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week]):focus {
background: var(--c-base);
}

:is(textarea, input):focus::-webkit-input-placeholder,
:is(textarea, input):focus::-moz-placeholde,
:is(textarea, input):focus::placeholder {
color: transparent;
}

/* フォーム：チェック・ボタン系タグのリセット
-------------------------------------- */
/* Safariでのズレ防止 */
:is(*, .magique) label {
display: inline-flex;
align-items: center;
}

/* button, .button */
:is(*, .magique) button {
appearance: none;
margin: 0;
padding: 0;
color: inherit;
border: none;
outline: none;
background: none;
cursor: pointer;
transition: all 0.3s ease;
}

:is(*, .magique) :is(.button,
input[type=button],
input[type=reset],
input[type=submit]) {
display: inline-flex;
position: relative;
z-index: 10;
width: auto;
align-items: center;
justify-content: center;
padding: 0.5em 1em;
overflow: hidden;
font-weight: 500;
font-size: 18px;
font-size: clamp(17px, 17px + (1vw - 3.6px) * 0.1563, 18px);
line-height: 1.5;
text-align: center;
vertical-align: unset;
white-space: nowrap;
transition: ease-out 0.12s;
}

:is(*, .magique) .button.is-plain.is-outline {
border: 1px solid #dbdbdb;
background: #fafafa;
}