@charset "UTF-8";
html {
  scroll-padding-top: 92px;
  /* スマホを横向きにしても文字が大きくならない */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

/* remベース：1rem = 10px（media: w360px）〜16px（media: w1000px） */
html {
  font-size: 100%;
  font-size: clamp(62.5%, 62.5% + (1vw - 22.5%) * 0.9375, 100%);
  min-height: 0vw;
}

:root {
  /* Root Base（基本設定） */
  line-height: 1;
  line-height: clamp(0.8494em, 0.8494em + (1vw - 0.225em) * 0.3765, 1em);
  --fw-base: 400;
  /* 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);
  --⅕fem: clamp(3.2px, calc(3.2px + ((1vw - 3.6px) * 2)), 16px);
  --⅙fem: clamp(2.6px, calc(2.6px + ((1vw - 3.6px) * 2.0938)), 16px);
  --⅛fem: clamp(2px, calc(2px + ((1vw - 3.6px) * 2.1875)), 16px);
  /* Fluid-Magnificational rem（スマホの方が大きい）：例）calc(var(x1\.33fem) * 1) */
  --x1\.33fem: clamp(21.33px, calc(1.333125rem + ((1vw - 3.6px) * -0.8328)), 21.33px);
  --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);
  /* Root font-size */
  --fz-10px: 10px;
  --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: ÷1.0666 */
  --fz-rg: clamp(15px, calc(15px + ((1vw - 3.6px) * 0.1563)), 16px);
  /* fz: ÷1.1069 */
  --fz-md: clamp(15.3px, calc(15.3px + ((1vw - 3.6px) * 0.26563)), 17px);
  /* fz: ÷1.1472 */
  --fz-em: clamp(15.6px, calc(15.6px + ((1vw - 3.6px) * 0.375)), 18px);
  /* fz: ÷1.1875 */
  --fz-sl: clamp(16px, calc(16px + ((1vw - 3.6px) * 0.4688)), 19px);
  /* fz: ÷1.28 */
  --fz-lg: clamp(16.4px, calc(16.4px + ((1vw - 3.6px) * 0.71875)), 21px);
  /* fz: ÷1.3725 */
  --fz-xl: clamp(17.4px, calc(17.4px + ((1vw - 3.6px) * 1.03125)), 24px);
  /* fz: ÷1.465 */
  --fz-xxl: clamp(18.4px, calc(18.4px + ((1vw - 3.6px) * 1.34375)), 27px);
  /* fz: ÷1.5575 */
  --fz-xxxl: clamp(19.2px, calc(19.2px + ((1vw - 3.6px) * 1.6875)), 30px);
  /* fz: ÷1.65(Over Lerge) */
  --fz-sol: clamp(20px, calc(20px + ((1vw - 3.6px) * 2.0313)), 33px);
  /* fz: ÷1.675 */
  --fz-ol: clamp(21.4px, calc(21.4px + ((1vw - 3.6px) * 2.28125)), 36px);
  /* fz: ÷1.7 */
  --fz-xol: clamp(22.9px, calc(22.9px + ((1vw - 3.6px) * 2.51563)), 39px);
  /* fz: ÷1.725 */
  --fz-xxol: clamp(24.3px, calc(24.3px + ((1vw - 3.6px) * 2.76563)), 42px);
  /* fz: ÷1.75 */
  --fz-xxxol: clamp(25.7px, calc(25.7px + ((1vw - 3.6px) * 3.01563)), 45px);
  /* fz: ÷1.775(King Lerge) */
  --fz-skl: clamp(27px, calc(27px + ((1vw - 3.6px) * 3.2813)), 48px);
  /* fz: ÷1.8 */
  --fz-kl: clamp(28.3px, calc(28.3px + ((1vw - 3.6px) * 3.54688)), 51px);
  /* fz: ÷1.825 */
  --fz-xkl: clamp(30px, calc(30px + ((1vw - 3.6px) * 3.75)), 54px);
  /* fz: ÷1.85 */
  --fz-xxkl: clamp(30.8px, calc(30.8px + ((1vw - 3.6px) * 4.09375)), 57px);
  /* fz: ÷1.875 */
  --fz-xxxkl: clamp(32px, calc(32px + ((1vw - 3.6px) * 4.375)), 60px);
  /* fz: ÷1.9 (Grand Lerge)  */
  --fz-sgl: clamp(33.1px, calc(33.1px + ((1vw - 3.6px) * 4.67188)), 63px);
  /* fz: ÷1.925 */
  --fz-gl: clamp(34.2px, calc(34.2px + ((1vw - 3.6px) * 4.96875)), 66px);
  /* fz: ÷1.95 */
  --fz-xgl: clamp(35.3px, calc(35.3px + ((1vw - 3.6px) * 5.26563)), 69px);
  /* fz: ÷1.975 */
  --fz-xxgl: clamp(36.4px, calc(36.4px + ((1vw - 3.6px) * 5.5625)), 72px);
  /* fz: ÷2.0 */
  --fz-xxxgl: clamp(37.5px, calc(37.5px + ((1vw - 3.6px) * 5.85938)), 75px);
  /* fz: ÷2.025 (Hyper Lerge) */
  --fz-shl: clamp(38.5px, calc(38.5px + ((1vw - 3.6px) * 6.17188)), 78px);
  /* fz: ÷2.05 */
  --fz-hl: clamp(39.5px, calc(39.5px + ((1vw - 3.6px) * 6.48438)), 81px);
  /* fz: ÷2.075 */
  --fz-xhl: clamp(40.4px, calc(40.4px + ((1vw - 3.6px) * 6.8125)), 84px);
  /* fz: ÷2.1 */
  --fz-xxhl: clamp(41.4px, calc(41.4px + ((1vw - 3.6px) * 7.125)), 87px);
  /* fz: ÷2.125 */
  --fz-xxxhl: clamp(42.3px, calc(42.3px + ((1vw - 3.6px) * 7.45313)), 90px);
  /* fz: ÷2.15(Ultra Lerge)  */
  --fz-sul: clamp(43.2px, calc(43.2px + ((1vw - 3.6px) * 7.78125)), 93px);
  /* fz: ÷2.175 */
  --fz-ul: clamp(44.1px, calc(44.1px + ((1vw - 3.6px) * 8.10938)), 96px);
  /* fz: ÷2.2 */
  --fz-xul: clamp(45px, calc(45px + ((1vw - 3.6px) * 8.4375)), 99px);
  /* fz: ÷2.225 */
  --fz-xxul: clamp(45.8px, calc(45.8px + ((1vw - 3.6px) * 8.78125)), 102px);
  /* fz: ÷2.25 */
  --fz-xxxul: clamp(46.6px, calc(46.6px + ((1vw - 3.6px) * 9.125)), 105px);
  /* fz: ÷2.275(Mega Lerge) */
  --fz-smgl: clamp(47.4px, calc(47.4px + ((1vw - 3.6px) * 9.46875)), 108px);
  /* fz: ÷2.3 */
  --fz-mgl: clamp(48.2px, calc(48.2px + ((1vw - 3.6px) * 9.8125)), 111px);
  /* fz: ÷2.325 */
  --fz-xmgl: clamp(49px, calc(49px + ((1vw - 3.6px) * 10.1563)), 114px);
  /* fz: ÷2.35 */
  --fz-xxmgl: clamp(49.7px, calc(49.7px + ((1vw - 3.6px) * 10.51563)), 117px);
  /* fz: ÷2.375 */
  --fz-xxxmgl: clamp(50.5px, calc(50.5px + ((1vw - 3.6px) * 10.85938)), 120px);
  /* Root heading-size（仮：見出し用サイズ） */
  /* fz: ÷1.117 */
  --hz-magique_sl: clamp(17px, calc(16px + ((1vw - 3.6px) * 0.4688)), 19px);
  /* fz: ÷1.166 */
  --hz-magique_lg: clamp(18px, calc(18px + ((1vw - 3.6px) * 0.4688)), 21px);
  /* fz: ÷1.2 */
  --hz-magique_xl: clamp(20px, calc(20px + ((1vw - 3.6px) * 0.625)), 24px);
  /* fz: ÷1.3 */
  --hz-magique_xxl: clamp(20.8px, calc(20.8px + ((1vw - 3.6px) * 0.9687)), 27px);
  /* fz: ÷1.5 */
  --hz-magique_sol: clamp(22px, calc(22px + ((1vw - 3.6px) * 1.7188)), 33px);
  /* fz: ÷1.333 */
  --hz-magique_ol: clamp(27px, calc(27px + ((1vw - 3.6px) * 2.0313)), 36px);
}

body {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* フォントベース */
  line-height: 1.88;
  letter-spacing: 0.03em;
  font-size: var(--fz-p);
  font-weight: var(--fw-base);
  color: var(--c-text);
  /* 役物の字詰めを綺麗にする */
  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
          font-feature-settings: "kern", "liga", "clig", "calt";
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  /* IEで疑似要素を表示させる用 */
  -webkit-font-kerning: normal;
          font-kerning: normal;
  -webkit-font-variant-ligatures: common-ligatures contextual;
          font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}

/* タブレット */
body.tablet {
  min-width: 1280px;
}

/* スマホではスクロールバー非表示 */
@media screen and (max-width: 767.9px) {
  body {
    scrollbar-width: none;
  }
  body::-webkit-scrollbar {
    display: none;
  }
}
/* font-family
-------------------------------------- */
/* ベース・ゴシック体 */
body,
.ff-gothic {
  font-family: "YakuHanJP", "Poppins", "Noto Sans JP", sans-serif;
}

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

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

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

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

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

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

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

/* 数字用 */
.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-NanumGothic {
  font-family: "Nanum Gothic", sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* .marble（総囲い）
-------------------------------------- */
.marble-magique {
  z-index: -100;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: hidden;
}

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

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

/* タグリセット（IE対策） */
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  -webkit-box-sizing: border-box;
          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,
math,
svg,
img[src$=".svg"] {
  display: inline-block;
  width: auto;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: middle;
}

picture {
  display: inline-block;
  width: auto;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: middle;
}

/* 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 {
  font-size: 0;
}

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

b.bold {
  font-weight: 600;
}

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

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

/* 水平線（block） */
u.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: -webkit-gradient(linear, left top, right top, from(hsla(60, 96%, 79%, 0.7)), to(hsla(60, 96%, 93%, 0.7)));
  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 {
  display: inline-block;
  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;
}

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

code {
  padding: 2px 4px;
  background: #f2f4f5;
  color: #222;
}

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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

a[href],
a[href]::before,
a[href]::after {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* :is(:hover, :focus) */
@media (any-hover: hover) {
  a[href]:is(:hover, :focus) {
    opacity: 0.7;
  }
  a[href]:is(:active) {
    opacity: 1;
  }
}
/* PCのときは電話リンク無効 */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    display: inline-block;
    pointer-events: none;
    cursor: none;
  }
}
/* cite>a（参照元） */
cite {
  margin: 0;
  padding: 0;
  font-style: normal;
}

cite > a[href] {
  position: relative;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: hsla(233, 50%, 34%, 0.85);
  color: hsla(233, 50%, 34%, 0.85);
}

/* a:hover */
@media (any-hover: hover) {
  cite > a[href]:is(:hover, :focus) {
    color: hsla(233, 50%, 39%, 0.85);
    text-decoration-color: hsla(233, 50%, 39%, 0.85);
  }
  cite > a[href]:is(:active) {
    text-decoration-color: hsla(233, 50%, 34%, 0.85);
    color: hsla(233, 50%, 34%, 0.85);
  }
}
/* a:PDF */
cite > a[href$=".pdf"] {
  margin-right: 0.4em;
  margin-left: 0.2em;
  padding-right: 1.75em;
}

cite > a[href$=".pdf"]::after {
  position: absolute;
  right: 0%;
  bottom: 0em;
  margin: auto;
  width: 24px;
  height: 24px;
  font-size: 1.3em;
  text-decoration: none;
  content: url("https://icongr.am/material/file-pdf-box.svg?color=FF1414&size=24");
}

/* a:_blank */
cite > a[target=_blank] {
  margin-right: 0.4em;
  margin-left: 0.2em;
  padding-right: 1.75em;
}

cite > a[target=_blank]::after {
  position: absolute;
  right: 0%;
  bottom: 0em;
  margin: auto;
  width: 1em;
  height: 1em;
  text-decoration: none;
  line-height: 1;
  font-size: 1.75em;
  /* Material Symbols */
  font-family: "Material Symbols Sharp";
  font-variation-settings: "FILL" 0, "wght" 300;
  content: "\e89e";
}

/* フォーム：テキスト系タグのリセット
-------------------------------------- */
: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]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  width: 100%;
  min-width: auto;
  max-width: 100%;
  border: 1px solid hsl(233, 13%, 84%);
  border-radius: 2px;
  background: var(--c-base);
  -webkit-box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
          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;
  -webkit-transition: ease-out 0.12s;
  transition: ease-out 0.12s;
}

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

: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(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]):-moz-placeholder-shown {
  background: var(--c-secondy);
  color: hsla(0, 0%, 0%, 0.26);
}
: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]):-ms-input-placeholder {
  background: var(--c-secondy);
  color: hsla(0, 0%, 0%, 0.26);
}
: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-secondy);
  color: hsla(0, 0%, 0%, 0.26);
}

/* :focus */
: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 {
  color: transparent;
}

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

/* フォーム：ボタン系タグのリセット
-------------------------------------- */
button {
  display: inline-block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  padding: 0;
  color: inherit;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* .button */
.button,
input[type=button],
input[type=reset],
input[type=submit] {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  z-index: 10;
  width: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.5em 1em;
  overflow: hidden;
  border-radius: 3px;
  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;
  -webkit-transition: ease-out 0.12s;
  transition: ease-out 0.12s;
}

@media (any-hover: hover) {
  :is(.button,
  input[type=button],
  input[type=reset],
  input[type=submit]):hover {
    background: whitesmoke;
  }
}
.button.is-plain.is-outline {
  border: 1px solid #dbdbdb;
  background: #fafafa;
}

@media (any-hover: hover) {
  .button.is-plain.is-outline:hover,
  input[type=submit]:hover {
    background: whitesmoke;
  }
}
/* フォーム：チェック系タグのリセット
-------------------------------------- */