@charset "utf-8";
@font-face {
  font-family: '';
  src: url('/wp-content/themes//css/icons/.eot?aw9n05');
  src: url('/wp-content/themes//css/icons/.eot?aw9n05#iefix') format('embedded-opentype'), url('/wp-content/themes//css/icons/.ttf?aw9n05') format('truetype'), url('/wp-content/themes//css/icons/.woff?aw9n05') format('woff'), url('/wp-content/themes//css/icons/.svg?aw9n05#') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
/* CSS Custom Properties Around Colors */
:root {
  --white: #fff;
  --gray: #424242;
  --black: #1a1a1a;
  --rich-black: #000;
  --main-color: #005197;
  --marine: #005197;
  --marine-light: #0060a2;
  --marine-river: #0066a4;
  --river-deep: #0071a9;
  --river: #0080b1;
  --blue-gray: #ebf2f5;
  --advanced: var(--marine);
  --upper-intermediate: var(--marine-light);
  --intermediate: var(--marine-river);
  --lower-intermediate: var(--river-deep);
  --elementary: var(--river);
  --accent-color: #ff3e00;
  --accent-bright: #ff6a00;
  --alert-color: #ff3e00;
  --alert-bright: #ff6a00;
  --notion-color: #ffae68;
  --title: var(--black);
  --text: var(--black);
  --link: var(--black);
  --visited: var(--link);
  --hover: var(--main-color);
  --text-strong: var(--rich-black);
  --text-discreet: var(--gray);
  --text-border: var(--gray);
  --marker: var(--notion-color);
  --shadow: rgba(0, 0, 0, 0.05);
  --error: var(--alert-color);
  /* phone setting
	============================================== */
}
:root ::-moz-selection {
  color: var(--black);
  background-color: var(--notion-color);
}
:root ::selection {
  color: var(--black);
  background-color: var(--notion-color);
}
:root {
  font-size: 62.5%;
  /* CSS Custom Properties without Colors
	// --------------------------------------------*/
  --main-width: 1100px;
  --content-width: 900px;
  --base-fs: min(0.066vw, 0.1rem);
  --root-bg: transparent;
  --root-color: var(--text);
  --root-fs: calc(var(--base-fs) * 15);
  --root-fw: normal;
  --root-fst: normal;
  --root-lh: 1.75;
  --root-ls: 0;
  --root-align: left;
  --root-transition: 0.3s 0s ease;
  --g: min(10vw, 180px);
  --m: 15px;
  --mb: min(1.36vw, 15px);
  --mi: min(1.36vw, 15px);
  --header-height: 100px;
  --logo-width: min(23.33vw, 350px);
  --logo-aspect-ratio: 350 / 45;
  --billboard-height: 26.66vw;
}
body {
  --bg: var(--root-bg);
  --color: var(--root-color);
  --fs: var(--root-fs);
  --fw: var(--root-fw);
  --fst: var(--root-fst);
  --lh: var(--root-lh);
  --ls: var(--root-ls);
  --align: var(--root-align);
  --transition: var(--root-transition);
  font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */ 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */ 'Segoe UI', /* Windowsの欧文 */ YuGothicM, /* Windows8.1以上は游ゴシック */ YuGothic, /* Macの游ゴシック */ Meiryo, /* 游ゴシックが入っていないWindows */ sans-serif;
  /* Windows */
  font-size: var(--fs);
  font-weight: var(--fw);
  font-style: var(--fst);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  text-align: var(--align);
  color: var(--color);
  background-color: var(--bg);
  padding: 0;
  margin: 0;
  position: relative;
}
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local('YuGothic-Medium'), /* Windowsでは游ゴシックが細くかすれてしまうので、Mediumを明示的に指定 */ local('Yu Gothic Medium'), /* Chrome用 */ local('YuGothic-Regular');
  /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local('YoGothic-Bold'), /* Boldはそのまま */ local('Yu Gothic');
  /* Chrome用 */
}
br[sp] {
  display: none;
}
br[pc],
br[pc][sp] {
  display: inline;
}
a,
a:link {
  --color: var(--link);
  --bg: transparent;
  background-color: var(--bg);
  color: var(--color);
  text-decoration: none;
  transition: var(--transition);
}
a:visited {
  --color: var(--visited);
  --bg: transparent;
}
a:hover {
  --color: var(--hover);
  color: var(--color) !important;
  background-color: var(--hover-bg) !important;
}
*::before,
*::after {
  content: "";
  display: none;
}
img,
iframe {
  height: auto;
}
img {
  width: auto;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
iframe {
  width: 100%;
  aspect-ratio: 560 / 315;
}
h1,
h2,
h3,
h4,
h5,
p {
  /* normalize reset */
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  margin: 0;
}
p {
  margin-inline: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  /* custom */
}
p:not(:last-child) {
  margin-bottom: calc(var(--mb) * 1);
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p:not(:last-child),
ul:not(:last-child),
li:not(:last-child) {
  margin-bottom: calc(var(--mb) * 1);
}
li ul {
  margin-top: calc(var(--mb) * 1);
}
p:empty {
  display: none;
}
.wrap {
  --wrap-width: var(--main-width);
  width: auto;
  max-width: var(--wrap-width);
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}
.marker {
  background: linear-gradient(transparent 50%, var(--marker) 0%);
}
.note {
  text-indent: -1em;
  padding-left: 1em;
}
.small {
  font-size: 80%;
}
.red {
  color: var(--alert-color);
}
ol.abc {
  list-style: lower-alpha;
}
.comingsoon {
  color: var(--white);
  font-size: calc(var(--base-fs) * 12);
  letter-spacing: 0.1ex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: calc(var(--mb) * 0.25) calc(var(--mb) * 0.75);
  border-radius: 0.33vw;
  background-color: var(--accent-color);
}
main.content {
  margin-bottom: calc(var(--mb) * 4);
  position: relative;
}
main.content::before {
  display: block;
  width: 50vw;
  height: 33.33vw;
  max-height: 500px;
  background-color: var(--blue-gray);
  position: absolute;
  top: var(--billboard-height);
  right: 0;
  z-index: -1;
}
section.hero {
  --hero-margin-top: 6.66vw;
  height: var(--billboard-height);
  padding-top: var(--hero-margin-top);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}
section.hero .tagline {
  --color: var(--white);
  --fs: calc(var(--base-fs) * 39);
  --fw: bold;
  --ls: 0.1ex;
  font-size: var(--fs);
  font-weight: var(--fw);
  font-style: var(--fst);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  text-align: var(--align);
  color: var(--color);
  background-color: var(--bg);
  --wrap-width: var(--main-width);
  width: auto;
  max-width: var(--wrap-width);
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  width: var(--wrap-width);
  position: relative;
  z-index: 1;
}
section.hero .tagline span {
  color: var(--marine);
  padding: 0.25ex 0.5ch;
  margin: 0 0.25ch;
  background-color: var(--white);
}
section.hero .billboard {
  height: var(--billboard-height);
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  top: var(--hero-margin-top);
  left: 0;
  z-index: 0;
}
section.hero::before {
  display: block;
  width: 13.33vw;
  height: 20vw;
  background-color: var(--marine);
  position: absolute;
  top: 0;
  right: 0;
}
section.general {
  --bg: transparent;
  padding: calc(var(--mb) * 4) 0;
  background-color: var(--bg);
  position: relative;
}
section.general .wrap {
  --wrap-width: var(--content-width);
}
section.general .headline {
  --fs: calc(var(--base-fs) * 27);
  --color: var(--marine);
  font-size: var(--fs);
  color: var(--color);
  position: relative;
  margin-bottom: calc(var(--mb) * 2);
}
section.general .headline::before {
  display: block;
  width: calc((100vw - var(--wrap-width)) / 2);
  height: 2px;
  background-color: var(--color);
  position: absolute;
  top: calc(var(--fs) * var(--lh) / 2);
  right: calc(100% + var(--mb));
  transform: translate(0, -50%);
}
section.general .subline {
  display: block;
  font-size: calc(var(--base-fs) * 21);
  font-weight: bold;
  color: var(--marine);
  margin-bottom: 0;
}
/* ==================================================================
	Notion Block
================================================================== */
.notion-block {
  width: 80%;
  box-sizing: border-box;
  padding: calc(var(--mb) * 1.5) calc(var(--mb) * 3);
  background-color: var(--blue-gray);
  margin-top: calc(var(--mb) * 3);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: calc(var(--mb) * 3);
}
/* ==================================================================
	Form
================================================================== */
section.form {
  padding: calc(var(--mb) * 4) calc(var(--mb) * 4) calc(var(--mb) * 4) 0;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  --row-gap: var(--mb);
  --column-gap: var(--mb);
  gap: var(--row-gap) var(--column-gap);
}
section.form .group {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  align-items: flex-start;
  --column-gap: calc(var(--mb) * 1.5);
  gap: var(--row-gap) var(--column-gap);
}
section.form .group .container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--row-gap) var(--column-gap);
}
section.form .block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  --column-gap: calc(var(--mb) * 2);
  gap: var(--row-gap) var(--column-gap);
  position: relative;
}
section.form .block.message,
section.form .block.agreement {
  width: 100%;
}
section.form .block.agreement {
  flex-direction: row;
}
section.form .block.agreement .input {
  align-self: center;
}
section.form .block.agreement .mwform-checkbox-field-text {
  --font-size: calc(var(--base-fs) * 15);
}
.mw_wp_form_confirm section.form .block.agreement {
  flex-direction: column;
  align-self: center;
  gap: 0;
}
.mw_wp_form_confirm section.form .block.agreement .title::after {
  height: auto;
  align-self: stretch;
}
.mw_wp_form_confirm section.form .block.agreement .input {
  --font-size: calc(var(--base-fs) * 15);
  align-self: unset;
}
section.form .title {
  flex-shrink: 0;
  width: 25%;
  min-height: calc(18px * 1.15 + var(--mb) * 0.75 * 2 + 4px);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;
  font-size: calc(var(--base-fs) * 18);
  text-align: right;
}
section.form .group .block .title {
  width: 25%;
  box-sizing: border-box;
}
section.form .block.must .title {
  position: relative;
}
section.form .block.must .title::after {
  content: "＊";
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  padding: 0 calc(var(--mb) * 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--alert-color);
  font-size: calc(var(--base-fs) * 15);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}
section.form .input {
  width: calc(100% - var(--column-gap) - 25%);
  min-height: calc(calc(var(--base-fs) * 18) * 1.15);
  box-sizing: border-box;
}
section.form .notice {
  width: 100%;
  box-sizing: border-box;
  padding-left: calc(25% + var(--column-gap));
}
section.form a[href*="privacy"],
section.form a[href*="policy"] {
  display: inline-block;
  margin-left: calc(var(--mb) * 0.5);
}
section.form a[href*="privacy"]:link,
section.form a[href*="policy"]:link,
section.form a[href*="privacy"]:visited,
section.form a[href*="policy"]:visited {
  text-decoration: underline;
}
section.form a[href*="privacy"]:hover,
section.form a[href*="policy"]:hover {
  --hover: var(--notion-color);
}
.mw_wp_form_confirm section.form .input {
  --font-size: calc(var(--base-fs) * 18);
  min-height: calc(var(--font-size) * 1.15 + var(--mb) * 0.75 * 2);
  padding: calc(var(--mb) * 0.75) var(--mb);
  font-size: var(--font-size);
  line-height: 1.15;
  border: 1px solid var(--gray);
}
section.form .block.btns {
  margin-top: var(--mb);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
section.form .back {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
  transform: translate(-50%, -50%);
}
section.form .mwform-checkbox-field.horizontal-item + .horizontal-item {
  margin-left: calc(var(--mb) * 2);
}
section.form input[type="text"],
section.form input[type="email"],
section.form input[type="password"],
section.form select,
section.form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--mb) * 0.75) var(--mb);
  border-radius: 0 2px 2px 2px;
  border: 1px solid var(--gray);
}
section.form input[type="text"]:focus,
section.form input[type="email"]:focus,
section.form input[type="password"]:focus,
section.form select:focus,
section.form textarea:focus {
  outline: 2px solid var(--notion-color);
}
section.form input[type="text"],
section.form input[type="email"],
section.form input[type="password"],
section.form textarea,
section.form .mwform-checkbox-field-text {
  font-size: calc(var(--base-fs) * 18);
}
section.form textarea {
  resize: vertical;
}
section.form input[name="submitBack"],
section.form input[name="submitConfirm"],
section.form input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
  border: 0;
  cursor: pointer;
  --link: var(--white);
  --visited: var(--link);
  --bg: var(--river);
  --hover: var(--white);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
  color: var(--color);
  background-color: var(--bg);
  transition: var(--transition);
  --fs: calc(var(--base-fs) * 18);
}
section.form input[name="submitBack"]::after,
section.form input[name="submitConfirm"]::after,
section.form input[type="submit"]::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
section.form input[name="submitBack"]:hover,
section.form input[name="submitConfirm"]:hover,
section.form input[type="submit"]:hover {
  --bg: var(--accent-color);
  --color: var(--white);
}
section.form input[name="submitConfirm"] {
  --bg: var(--river);
  --color: var(--white);
}
section.form input[type="submit"] {
  --bg: var(--marine);
  --color: var(--white);
}
section.form input[name="submitBack"] {
  --bg: var(--gray);
  --color: var(--white);
}
section.form .error {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 3px calc(var(--mb) * 0.5);
  background-color: var(--alert-color);
  font-size: calc(var(--base-fs) * 15);
  color: var(--white);
  position: absolute;
  top: calc((var(--fs) + var(--mb) * 0.5) / 2);
  left: calc(100% + 9px);
}
section.form .error::before {
  display: block;
  width: 0;
  height: 0;
  border: 0.46vw solid transparent;
  border-right: 0.6vw solid var(--alert-color);
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  transform: translate(0, -50%);
}
.btn {
  --link: var(--white);
  --visited: var(--link);
  --bg: var(--river);
  --hover: var(--white);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
}
.btn::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
.pagination {
  --parent-bg: var(--main-color);
  --parent-color: var(--white);
  --bg: var(--parent-bg);
  --color: var(--parent-color);
  --gap: 24px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--gap);
  margin: 60px auto 0;
  background-color: var(--bg);
  position: relative;
  z-index: 11;
}
.pagination .page-num {
  --color: var(--parent-color);
  display: block;
  font-size: 1.2rem;
  color: var(--color);
  text-align: center;
}
.pagination .page-num::after {
  --bg: var(--parent-color);
  display: block;
  width: 45px;
  height: 2px;
  background-color: var(--bg);
  margin: var(--gap) auto;
}
.pagination .pagers {
  display: flex;
  justify-content: center;
  align-items: center;
  --column-gap: var(--gap);
}
.pagination a.pager {
  --link: var(--color);
  --visited: var(--color);
  --hover: var(--parent-color);
  --hover-bg: var(--parent-bg);
}
.pagination a.pager:hover {
  box-shadow: inset 0 0 0 1px var(--hover);
}
.pagination span.pager {
  color: var(--color);
}
.pagination .pager {
  --size: 36px;
  --bg: var(--parent-color);
  --color: var(--parent-bg);
  display: block;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  text-align: center;
  letter-spacing: 0;
}
.pagination .pager.current {
  --bg: transparent;
  --color: var(--parent-color);
  --hover: var(--parent-bg);
  --hover-bg: var(--parent-color);
  box-shadow: inset 0 0 0 1px var(--color);
}
.pagination .pager.prev,
.pagination .pager.next {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 12px;
  font-size: 1.35rem;
}
.header {
  height: var(--header-height);
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.header .logo {
  margin-left: var(--mb);
}
.header .logo a {
  display: block;
  width: var(--logo-width);
}
.header .logo img {
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: var(--logo-aspect-ratio);
}
.header .switch {
  display: none;
}
.header .header-nav {
  --bg: var(--white);
  --gap: calc(var(--mb) * 2);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap);
}
.header .header-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 1;
  white-space: nowrap;
}
.header .header-nav .group {
  height: 100%;
  padding: 0 var(--mb);
  background-color: var(--marine);
  margin-left: calc(-1 * var(--gap) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.header .header-nav .group a {
  --link: var(--white);
  --visited: var(--white);
  --hover: var(--black);
}
.header .header-nav .group a.nav-contact {
  --link: var(--white);
  --visited: var(--link);
  --bg: var(--river);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
  --fs: inherit;
  --arrow-size: 7px;
  --arrow-weight: 2px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: calc(var(--mb) * 0.25) var(--mb);
  border-radius: calc(var(--mb) * 3);
  border: 2px solid var(--color);
  justify-content: center;
  gap: calc(var(--mb) * 0.5);
  --hover: var(--white);
}
.header .header-nav .group a.nav-contact::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
.footer {
  background-color: var(--gray);
  position: relative;
}
.footer .nav-page-top {
  --bg: var(--black);
  --hover-bg: var(--marine);
  --size: 50px;
  width: var(--size);
  height: var(--size);
  background-color: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: max(calc((100vw - var(--main-width)) / 2 ), 0px);
  transform: translate(0, -50%);
}
.footer .nav-page-top::before {
  --size: 12px;
  --color: var(--white);
  display: block;
  width: var(--size);
  height: var(--size);
  border-top: 2px solid var(--color);
  border-right: 2px solid var(--color);
  transform: translate(0, 25%) rotate(-45deg);
}
.footer .container {
  --wrap-width: var(--main-width);
  width: auto;
  max-width: var(--wrap-width);
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding: calc(var(--mb) * 4) 0;
  display: flex;
  justify-content: space-between;
}
.footer .footer-heading .logo {
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  width: var(--logo-width);
  aspect-ratio: var(--logo-aspect-ratio);
}
.footer .footer-heading a.nav-contact {
  margin-top: calc(var(--mb) * 2);
  --link: var(--white);
  --visited: var(--link);
  --bg: var(--river);
  --hover: var(--white);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
  --fs: inherit;
  --arrow-size: 7px;
  --arrow-weight: 2px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: calc(var(--mb) * 0.25) var(--mb);
  border-radius: calc(var(--mb) * 3);
  border: 2px solid var(--color);
  justify-content: center;
  gap: calc(var(--mb) * 0.5);
}
.footer .footer-heading a.nav-contact::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
.footer .footer-nav {
  display: flex;
  gap: calc(var(--mb) * 4);
}
.footer .footer-nav .group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--mb);
}
.footer .footer-nav a {
  --link: var(--white);
  --visited: var(--white);
  --hover: var(--river);
  display: block;
}
.footer .copyright {
  --wrap-width: var(--main-width);
  width: auto;
  max-width: var(--wrap-width);
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding: calc(var(--mb) * 4) 0;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
#header .nav-certified,
#footer .nav-certified {
  display: none;
}
/* ==================================================================
	フロント
================================================================== */
#home {
  --billboard-height: 33.33vw;
}
#home-intro .container {
  display: flex;
  justify-content: space-between;
}
#home-intro .heading,
#home-intro .text {
  width: 45%;
}
#home-intro a.nav-about {
  margin-top: calc(var(--mb) * 3);
  --link: var(--white);
  --visited: var(--link);
  --bg: var(--river);
  --hover: var(--white);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
}
#home-intro a.nav-about::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
#home-recommended {
  --wrap-width: var(--main-width);
  width: auto;
  max-width: var(--wrap-width);
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  position: relative;
}
#home-recommended .container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 calc(var(--mb) * 4);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#home-recommended .headline {
  --color: var(--white);
}
#home-recommended .points {
  color: var(--white);
  font-size: calc(var(--base-fs) * 21);
}
#home-recommended .points li {
  padding-left: 2.8vw;
  background: url("../imgs/common/check.svg") no-repeat 0 0;
  background-size: 30px 25px;
  background-position: center left;
}
#home-recommended .image {
  display: block;
  position: relative;
  z-index: 0;
}
/* ==================================================================
	About
================================================================== */
#about main.content {
  margin-bottom: calc(var(--mb) * 10);
}
#about-intro {
  padding-bottom: calc(var(--mb) * 8);
}
#about-intro .image {
  display: block;
  margin: calc(var(--mb) * 6) auto;
}
#about-merits {
  --bg: var(--river);
  padding: calc(var(--mb) * 8) 0;
}
#about-merits .headline {
  --color: var(--white);
  margin-bottom: calc(var(--mb) * 4);
}
#about-merits .container {
  --column: 3;
  --row-gap: var(--mi);
  --column-gap: var(--mb);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--row-gap) var(--column-gap);
  --column-gap: 3vw;
  --row-gap: 2.4vw;
}
#about-merits .container > * {
  width: calc((100% - var(--column-gap) * (var(--column) - 1)) / var(--column));
}
#about-merits .block {
  box-sizing: border-box;
  padding: calc(var(--mb) * 1.5);
  background-color: var(--white);
  border-radius: 0.66vw;
  box-shadow: inset 0 0 0 2px var(--marine);
  font-size: calc(var(--base-fs) * 21);
  font-weight: bold;
  text-align: center;
  position: relative;
}
#about-merits .block .label {
  color: var(--white);
  letter-spacing: 0.2ex;
  text-align: center;
  padding: calc(var(--mb) * 0.25) var(--mb);
  background-color: var(--bg);
  margin-bottom: var(--mb);
}
#about-merits .block.elementary .label {
  --bg: var(--elementary);
}
#about-merits .block.intermediate .label {
  --bg: var(--intermediate);
}
#about-merits .block.advanced .label {
  --bg: var(--advanced);
}
#about-merits .block .goal {
  color: var(--marine);
}
#about-merits .block:not(:last-of-type)::before,
#about-merits .block:not(:last-of-type)::after {
  --bg: var(--marine);
  display: block;
}
#about-merits .block::before {
  width: 1.53vw;
  height: 1.4vw;
  background-color: var(--bg);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#about-merits .block::after {
  width: 0;
  height: 0;
  border: 1.86vw solid transparent;
  border-top: 1.73vw solid var(--bg);
  position: absolute;
  top: calc(100% + 1.4vw);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
#about-merits .block.all {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0 var(--column-gap);
  position: relative;
  z-index: 0;
}
#about-merits .block.all .personality {
  text-align: left;
  position: relative;
}
#about-merits .block.all .title {
  color: var(--white);
  letter-spacing: 0.2ex;
  padding: calc(var(--mb) * 0.25) calc(var(--mb) * 0.5);
  background-color: var(--river);
  position: absolute;
  top: calc(var(--mb) * 2);
  left: 0;
}
#about-merits .block.all ul {
  list-style-type: disc;
  font-size: calc(var(--base-fs) * 18);
  font-weight: normal;
  padding-left: 1em;
}
#about-merits .block.all li {
  margin-bottom: 0;
}
#about-merits a.nav-contact {
  margin-top: calc(var(--mb) * 3);
  margin-right: auto;
  margin-left: auto;
  --link: var(--white);
  --visited: var(--link);
  --bg: var(--river);
  --hover: var(--white);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
  --link: var(--river);
  --bg: var(--white);
}
#about-merits a.nav-contact::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
/* ==================================================================
	Flow
================================================================== */
#flow-intro .ranks {
  margin-top: calc(var(--mb) * 3);
  box-sizing: border-box;
  padding: calc(var(--mb) * 1.5);
  background-color: var(--white);
  border-radius: 0.66vw;
  box-shadow: inset 0 0 0 2px var(--marine);
  padding: calc(var(--mb) * 2) calc(var(--mb) * 3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: flex-start;
  gap: calc(var(--mb) * 2);
}
#flow-intro .block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--mb) * 2);
  font-size: calc(var(--base-fs) * 21);
  font-weight: bold;
  position: relative;
}
#flow-intro .block .label {
  color: var(--white);
  letter-spacing: 0.2ex;
  text-align: center;
  padding: calc(var(--mb) * 0.25) var(--mb);
  background-color: var(--bg);
  width: 10.4vw;
  box-sizing: border-box;
}
#flow-intro .block.elementary .label {
  --bg: var(--elementary);
}
#flow-intro .block.lower-intermediate .label {
  --bg: var(--lower-intermediate);
}
#flow-intro .block.upper-intermediate .label {
  --bg: var(--upper-intermediate);
}
#flow-intro .block.advanced .label {
  --bg: var(--advanced);
}
#flow-intro .block p {
  margin-bottom: 0;
  letter-spacing: 0.1ex;
}
#flow-intro .block .comingsoon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
#flow-chart {
  --bg: var(--marine);
  padding: calc(var(--mb) * 8) 0;
}
#flow-chart .headline {
  --color: var(--white);
  margin-bottom: calc(var(--mb) * 4);
}
#flow-chart .image-container {
  margin-bottom: calc(var(--mb) * 4);
}
#flow-chart .image {
  display: block;
}
#flow-chart p.note {
  font-size: calc(var(--base-fs) * 21);
  color: var(--white);
  text-align: center;
}
#flow-overview {
  padding: calc(var(--mb) * 12) 0;
}
#flow-overview::before {
  display: block;
  width: 50vw;
  height: 85%;
  background-color: var(--blue-gray);
  position: absolute;
  top: calc(var(--mb) * 6);
  right: 0;
  z-index: -1;
}
#flow-overview table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--base-fs) * 16.5);
  width: 85%;
}
#flow-overview table tr {
  border-bottom: 1px solid var(--gray);
}
#flow-overview table th,
#flow-overview table td {
  padding: calc(var(--mb) * 1.5) 0;
}
#flow-overview table th {
  width: 13.33vw;
  vertical-align: top;
}
#flow-overview a.nav-contact {
  margin-top: calc(var(--mb) * 3);
  margin-right: auto;
  margin-left: auto;
  --visited: var(--link);
  --hover: var(--white);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
  --link: var(--white);
  --bg: var(--river);
}
#flow-overview a.nav-contact::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
/* ==================================================================
	Materials
================================================================== */
#materials a.nav-movie {
  margin-top: calc(var(--mb) * 3);
  --visited: var(--link);
  --hover: var(--white);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
  --link: var(--white);
  --bg: var(--river);
  margin-bottom: var(--mb);
}
#materials a.nav-movie::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
#material-intermediate a.nav-movie,
#material-advanced a.nav-movie {
  pointer-events: none;
  --bg: rgba(0, 128, 177, 0.3);
}
/* ==================================================================
	FAQ
================================================================== */
#faq main.content::before {
  height: 80%;
}
#faq .faq .block:not(:last-child) {
  margin-bottom: calc(var(--mb) * 2);
}
#faq .faq .title,
#faq .faq .answer {
  --gap: 3ch;
  padding-left: var(--gap);
  position: relative;
}
#faq .faq .title::before,
#faq .faq .answer::before {
  display: inline-block;
  width: var(--gap);
  position: absolute;
  top: 0;
  left: 0;
}
#faq .faq .title {
  color: var(--river);
  font-size: calc(var(--base-fs) * 21);
  margin-bottom: var(--mb);
}
#faq .faq .title::before {
  content: "Q :";
}
#faq .faq .answer::before {
  content: "A :";
}
#faq .faq:last-of-type {
  padding-bottom: calc(var(--mb) * 12);
}
/* ==================================================================
	Certified
================================================================== */
#certified-list .container {
  padding: calc(var(--mb) * 4) 0;
}
#certified-list .block {
  display: flex;
  gap: calc(var(--mb) * 2);
}
#certified-list .block:not(:last-child) {
  margin-bottom: calc(var(--mb) * 4);
}
#certified-list .block .image {
  flex-shrink: 0;
  width: 17.33vw;
  aspect-ratio: 260 / 300;
  background-color: var(--gray);
}
#certified-list .block .info {
  flex-grow: 1;
}
#certified-list .block .cell {
  display: flex;
  gap: 1ch;
}
#certified-list .block .cell:not(:last-child) {
  margin-bottom: var(--mb);
}
#certified-list .block .cell p {
  margin-bottom: 0;
}
#certified-list .block .title {
  flex-shrink: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#certified-list .block .title::after {
  display: inline;
  content: ": ";
}
/* ==================================================================
	Company
================================================================== */
#company-future {
  padding-bottom: calc(var(--mb) * 8);
}
#company-profile {
  padding: calc(var(--mb) * 8) 0 calc(var(--mb) * 21);
}
#company-profile::before {
  display: block;
  width: 50vw;
  height: 90%;
  background-color: var(--blue-gray);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#company-profile table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--base-fs) * 16.5);
  width: 85%;
}
#company-profile table tr {
  border-bottom: 1px solid var(--gray);
}
#company-profile table th,
#company-profile table td {
  padding: calc(var(--mb) * 1.5) 0;
}
#company-profile table th {
  width: 13.33vw;
  vertical-align: top;
}
#company-profile table strong {
  color: var(--accent-color);
}
#company-profile .image {
  width: 33.33vw;
  aspect-ratio: 50 / 33;
  position: absolute;
  top: calc(var(--mb) * 8);
  right: 0;
  z-index: 0;
}
#legal-notation h2 + h2,
#legal-notation h3 + h2,
#legal-notation h4 + h2,
#legal-notation h5 + h2,
#legal-notation h6 + h2,
#legal-notation h2 + h3,
#legal-notation h3 + h3,
#legal-notation h4 + h3,
#legal-notation h5 + h3,
#legal-notation h6 + h3,
#legal-notation h2 + h4,
#legal-notation h3 + h4,
#legal-notation h4 + h4,
#legal-notation h5 + h4,
#legal-notation h6 + h4,
#legal-notation h2 + h5,
#legal-notation h3 + h5,
#legal-notation h4 + h5,
#legal-notation h5 + h5,
#legal-notation h6 + h5,
#legal-notation h2 + h6,
#legal-notation h3 + h6,
#legal-notation h4 + h6,
#legal-notation h5 + h6,
#legal-notation h6 + h6 {
  margin-top: var(--mb);
}
#legal-notation img + h2,
#legal-notation a + h2,
#legal-notation p + h2,
#legal-notation ul + h2,
#legal-notation ol + h2,
#legal-notation div + h2,
#legal-notation img + h3,
#legal-notation a + h3,
#legal-notation p + h3,
#legal-notation ul + h3,
#legal-notation ol + h3,
#legal-notation div + h3,
#legal-notation img + h4,
#legal-notation a + h4,
#legal-notation p + h4,
#legal-notation ul + h4,
#legal-notation ol + h4,
#legal-notation div + h4,
#legal-notation img + h5,
#legal-notation a + h5,
#legal-notation p + h5,
#legal-notation ul + h5,
#legal-notation ol + h5,
#legal-notation div + h5,
#legal-notation img + h6,
#legal-notation a + h6,
#legal-notation p + h6,
#legal-notation ul + h6,
#legal-notation ol + h6,
#legal-notation div + h6 {
  margin-top: calc(var(--mb) * 3);
}
#legal-notation h2:not(.headline) {
  padding-bottom: calc(var(--mb) * 0.5);
  border-bottom: 1px solid var(--color);
  margin-bottom: calc(var(--mb) * 0.75);
}
#legal-notation h2 {
  font-size: calc(var(--base-fs) * 24);
}
#legal-notation h3 {
  font-size: calc(var(--base-fs) * 18);
}
#legal-notation h4,
#legal-notation h5,
#legal-notation h6 {
  font-size: calc(var(--base-fs) * 16.5);
}
#legal-notation ul {
  list-style-type: disc;
  -webkit-padding-start: 2em;
          padding-inline-start: 2em;
}
#legal-notation ul + p,
#legal-notation ul + ul {
  margin-top: calc(var(--mb) * 1.5);
}
#legal-notation p img {
  margin-top: var(--mb);
  margin-bottom: var(--mb);
}
#legal-notation p + img {
  margin-top: calc(var(--mb) * 3);
  margin-bottom: calc(var(--mb) * 3);
}
/* ==================================================================
	Contact
================================================================== */
#contact main.content::before {
  height: 80%;
}
#contact-intro .must {
  color: var(--alert-color);
}
#contact-form {
  padding-top: 0;
}
/* ==================================================================
	Page
================================================================== */
#page-articles h2 + h2,
#page-articles h3 + h2,
#page-articles h4 + h2,
#page-articles h5 + h2,
#page-articles h6 + h2,
#page-articles h2 + h3,
#page-articles h3 + h3,
#page-articles h4 + h3,
#page-articles h5 + h3,
#page-articles h6 + h3,
#page-articles h2 + h4,
#page-articles h3 + h4,
#page-articles h4 + h4,
#page-articles h5 + h4,
#page-articles h6 + h4,
#page-articles h2 + h5,
#page-articles h3 + h5,
#page-articles h4 + h5,
#page-articles h5 + h5,
#page-articles h6 + h5,
#page-articles h2 + h6,
#page-articles h3 + h6,
#page-articles h4 + h6,
#page-articles h5 + h6,
#page-articles h6 + h6 {
  margin-top: var(--mb);
}
#page-articles img + h2,
#page-articles a + h2,
#page-articles p + h2,
#page-articles ul + h2,
#page-articles ol + h2,
#page-articles div + h2,
#page-articles img + h3,
#page-articles a + h3,
#page-articles p + h3,
#page-articles ul + h3,
#page-articles ol + h3,
#page-articles div + h3,
#page-articles img + h4,
#page-articles a + h4,
#page-articles p + h4,
#page-articles ul + h4,
#page-articles ol + h4,
#page-articles div + h4,
#page-articles img + h5,
#page-articles a + h5,
#page-articles p + h5,
#page-articles ul + h5,
#page-articles ol + h5,
#page-articles div + h5,
#page-articles img + h6,
#page-articles a + h6,
#page-articles p + h6,
#page-articles ul + h6,
#page-articles ol + h6,
#page-articles div + h6 {
  margin-top: calc(var(--mb) * 3);
}
#page-articles h2:not(.headline) {
  padding-bottom: calc(var(--mb) * 0.5);
  border-bottom: 1px solid var(--color);
  margin-bottom: calc(var(--mb) * 0.75);
}
#page-articles h2 {
  font-size: calc(var(--base-fs) * 24);
}
#page-articles h3 {
  font-size: calc(var(--base-fs) * 18);
}
#page-articles h4,
#page-articles h5,
#page-articles h6 {
  font-size: calc(var(--base-fs) * 16.5);
}
#page-articles ul {
  list-style-type: disc;
  -webkit-padding-start: 2em;
          padding-inline-start: 2em;
}
#page-articles ul + p,
#page-articles ul + ul {
  margin-top: calc(var(--mb) * 1.5);
}
#page-articles p img {
  margin-top: var(--mb);
  margin-bottom: var(--mb);
}
#page-articles p + img {
  margin-top: calc(var(--mb) * 3);
  margin-bottom: calc(var(--mb) * 3);
}
/* ==================================================================
	Single
================================================================== */
#post form.post-password-form {
  margin-bottom: calc(var(--mb) * 8);
}
#post form.post-password-form input[type="text"],
#post form.post-password-form input[type="email"],
#post form.post-password-form input[type="password"],
#post form.post-password-form select,
#post form.post-password-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--mb) * 0.75) var(--mb);
  border-radius: 0 2px 2px 2px;
  border: 1px solid var(--gray);
}
#post form.post-password-form input[type="text"]:focus,
#post form.post-password-form input[type="email"]:focus,
#post form.post-password-form input[type="password"]:focus,
#post form.post-password-form select:focus,
#post form.post-password-form textarea:focus {
  outline: 2px solid var(--notion-color);
}
#post form.post-password-form input[type="text"],
#post form.post-password-form input[type="email"],
#post form.post-password-form input[type="password"],
#post form.post-password-form textarea,
#post form.post-password-form .mwform-checkbox-field-text {
  font-size: calc(var(--base-fs) * 18);
}
#post form.post-password-form textarea {
  resize: vertical;
}
#post form.post-password-form input[name="submitBack"],
#post form.post-password-form input[name="submitConfirm"],
#post form.post-password-form input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
  border: 0;
  cursor: pointer;
  --link: var(--white);
  --visited: var(--link);
  --bg: var(--river);
  --hover: var(--white);
  --hover-bg: var(--accent-color);
  --fs: calc(var(--base-fs) * 19.5);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 26.66vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--mb) * 1) calc(var(--mb) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--mb) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
  color: var(--color);
  background-color: var(--bg);
  transition: var(--transition);
  --fs: calc(var(--base-fs) * 18);
}
#post form.post-password-form input[name="submitBack"]::after,
#post form.post-password-form input[name="submitConfirm"]::after,
#post form.post-password-form input[type="submit"]::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
#post form.post-password-form input[name="submitBack"]:hover,
#post form.post-password-form input[name="submitConfirm"]:hover,
#post form.post-password-form input[type="submit"]:hover {
  --bg: var(--accent-color);
  --color: var(--white);
}
#post form.post-password-form input[name="submitConfirm"] {
  --bg: var(--river);
  --color: var(--white);
}
#post form.post-password-form input[type="submit"] {
  --bg: var(--marine);
  --color: var(--white);
}
#post form.post-password-form input[name="submitBack"] {
  --bg: var(--gray);
  --color: var(--white);
}
#post form.post-password-form p.input {
  margin-top: calc(var(--mb) * 3);
  display: flex;
  gap: var(--mb);
}
#post form.post-password-form input[type="password"] {
  font-family: Consolas,Monaco,monospace;
  font-size: calc(var(--base-fs) * 18);
  letter-spacing: 0.1ex;
  -webkit-text-security: circle;
  padding: var(--mb);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.5);
}
#post form.post-password-form input[type="submit"] {
  --bg: var(--river);
}
#material-article iframe {
  background-color: var(--gray);
}
#material-article .lead {
  margin-top: calc(var(--mb) * 3);
}
/* ==================================================================
	404ページ
================================================================== */
/* ==================================================================
	Archive
================================================================== */