@charset "UTF-8";
/* 
------------------------------------------------------------
>>> CONTENTS:
------------------------------------------------------------

# Foundation
# Layouts
# Object
# - Components
# - Project
# - Utilities

*/
/*
============================================================
# Foundation
============================================================
*/
/* Reset (acab-reset)
--------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:where([hidden]:not([hidden=until-found])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
}

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}
:where(body) {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  block-size: 100%;
  block-size: 100dvb;
  -webkit-font-smoothing: antialiased;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role=button], [role=option]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(button) {
  border-style: solid;
}

:where(a) {
  text-underline-offset: 0.2ex;
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
}

:where(hr) {
  overflow: visible;
  color: inherit;
  border: none;
  border-block-start: 1px solid;
  block-size: 0;
}

:where(:focus-visible) {
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px;
}

:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Css-Variable
--------------------------------------------- */
/* Typography
--------------------------------------------- */
html {
  color-scheme: light;
}

body,
optgroup {
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "oxygen-sans", ubuntu, cantarell, "Helvetica Neue", sans-serif;
  font-size: clamp(0.875rem, 0.828125rem + 0.1875vw, 1.0625rem);
  font-weight: 400;
  font-feature-settings: "palt" 1;
  line-height: 1.8;
  color: #002944;
  letter-spacing: 0.07em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

h1 {
  font-size: clamp(1.5rem, 1.375rem + 0.5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}

h2 {
  font-size: clamp(1.125rem, 1.03125rem + 0.375vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}

h3 {
  font-size: clamp(0.9375rem, 0.890625rem + 0.1875vw, 1.125rem);
  font-weight: 700;
}

h4 {
  font-size: clamp(0.875rem, 0.828125rem + 0.1875vw, 1.0625rem);
  font-weight: 700;
}

h5 {
  font-size: 1em;
  font-weight: 700;
}

h6 {
  font-size: 1em;
  font-weight: 700;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

pre {
  max-width: 100%;
  padding: 1.6em;
  margin-bottom: 1.6em;
  overflow: auto;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  background: #eee;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  cursor: help;
  border-bottom: 1px dotted #666;
}

mark,
ins {
  text-decoration: none;
  background: #99d6ff;
}

big {
  font-size: 120%;
}

::-moz-selection {
  color: rgba(0, 0, 0, 0.8);
  background-color: #99d6ff;
}

::selection {
  color: rgba(0, 0, 0, 0.8);
  background-color: #99d6ff;
}

/* Elements
--------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

hr {
  height: 1px;
  margin-bottom: 1.5em;
  background-color: #ccc;
  border: 0;
}

ul,
ol {
  /* margin: 0 0 1.5em 3em; */
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  list-style-position: inside;
  list-style-type: none;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

figure {
  margin: 0;
}

table {
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

a:active {
  color: inherit;
  outline: 0;
}

a:hover {
  outline: 0;
  opacity: 0.7;
}

a:focus {
  outline-width: 0.25rem;
  outline-style: solid;
  outline-color: currentcolor;
  outline-offset: 0;
}

/* Forms
--------------------------------------------- */
button {
  font-family: inherit;
}

button:hover {
  cursor: pointer;
}

button:active, button:focus {
  outline-width: 0.25rem;
  outline-style: solid;
  outline-color: currentcolor;
  outline-offset: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea {
  width: 100%;
  padding: 0.4em 0.8em;
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  letter-spacing: 0.05em;
  background-color: rgb(255, 255, 255);
  border: 1px solid currentcolor;
  border-radius: 0;
}

input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=range]:-ms-input-placeholder, input[type=date]:-ms-input-placeholder, input[type=month]:-ms-input-placeholder, input[type=week]:-ms-input-placeholder, input[type=time]:-ms-input-placeholder, input[type=datetime]:-ms-input-placeholder, input[type=datetime-local]:-ms-input-placeholder, input[type=color]:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: currentcolor;
  opacity: 0.4;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=range]::placeholder,
input[type=date]::placeholder,
input[type=month]::placeholder,
input[type=week]::placeholder,
input[type=time]::placeholder,
input[type=datetime]::placeholder,
input[type=datetime-local]::placeholder,
input[type=color]::placeholder,
textarea::placeholder {
  color: currentcolor;
  opacity: 0.4;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus {
  outline-width: 0.25rem;
  outline-style: solid;
  outline-color: rgba(0, 21, 255, 0.5);
  outline-offset: 0;
}

select {
  width: 50%;
  min-width: 12em;
  padding: 0.4em 0.8em;
  font-weight: 700;
  color: inherit;
  letter-spacing: 0.05em;
  background-color: rgb(255, 255, 255);
  border: 1px solid currentcolor;
  border-radius: 0;
}

select:focus {
  outline-width: 0.25rem;
  outline-style: solid;
  outline-color: rgba(0, 21, 255, 0.5);
  outline-offset: 0;
}

/* 基本のcheckboxとradioボタン（疑似要素） */
input[type=checkbox],
input[type=radio] {
  position: relative;
  z-index: 0;
  display: block;
  width: 2em;
  max-width: 2em;
  height: 2em;
  aspect-ratio: 1/1;
  pointer-events: none;
  opacity: 0;
}

label:has(input[type=checkbox]),
label:has(input[type=radio]) {
  position: relative;
  display: flex;
  flex-flow: nowrap row;
  gap: 0.6em;
  align-items: center;
  justify-content: flex-start;
  font-size: 1em;
  color: currentcolor;
}

label:has(input[type=checkbox])::before,
label:has(input[type=radio])::before {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: block;
  width: 2em;
  height: 2em;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: 0.1875rem solid currentColor;
  border-radius: 0rem;
  opacity: 1;
  transform: translateY(-50%);
}

label:has(input[type=checkbox])::after,
label:has(input[type=radio])::after {
  position: absolute;
  top: 50%;
  left: 0.75em;
  z-index: 2;
  display: block;
  width: 0.4em;
  height: 1em;
  margin-top: -0.6em;
  content: "";
  border-right: 0.1875rem solid #fff;
  border-bottom: 0.1875rem solid #fff;
  opacity: 0;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-duration: 150ms;
  transition-property: transform;
  transform: rotate(45deg) scale(0);
}

label:has(input[type=checkbox]:checked)::before,
label:has(input[type=radio]:checked)::before {
  background-color: currentcolor;
}

label:has(input[type=checkbox]:checked)::after,
label:has(input[type=radio]:checked)::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

label:has(input[type=checkbox]:focus)::before,
label:has(input[type=radio]:focus)::before {
  outline-width: 0.25rem;
  outline-style: solid;
  outline-color: rgba(0, 21, 255, 0.5);
  outline-offset: 0;
}

/* ボタン系input （主にフォームの送信ボタン） */
*:has(> input[type=button]),
*:has(> input[type=reset]),
*:has(> input[type=submit]) {
  position: relative;
  border-radius: 4em;
}

*:has(> input[type=button])::before,
*:has(> input[type=reset])::before,
*:has(> input[type=submit])::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: currentcolor;
  border-radius: 4em;
  opacity: 0.3;
}

*:has(> input[type=button]) input[type=button],
*:has(> input[type=button]) input[type=reset],
*:has(> input[type=button]) input[type=submit],
*:has(> input[type=reset]) input[type=button],
*:has(> input[type=reset]) input[type=reset],
*:has(> input[type=reset]) input[type=submit],
*:has(> input[type=submit]) input[type=button],
*:has(> input[type=submit]) input[type=reset],
*:has(> input[type=submit]) input[type=submit] {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 1em 1.5em;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-indent: 0.25em;
  letter-spacing: 0.25em;
  pointer-events: all;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  border: 0;
}

*:has(> input[type=button]) input[type=button]:active, *:has(> input[type=button]) input[type=button]:focus,
*:has(> input[type=button]) input[type=reset]:active,
*:has(> input[type=button]) input[type=reset]:focus,
*:has(> input[type=button]) input[type=submit]:active,
*:has(> input[type=button]) input[type=submit]:focus,
*:has(> input[type=reset]) input[type=button]:active,
*:has(> input[type=reset]) input[type=button]:focus,
*:has(> input[type=reset]) input[type=reset]:active,
*:has(> input[type=reset]) input[type=reset]:focus,
*:has(> input[type=reset]) input[type=submit]:active,
*:has(> input[type=reset]) input[type=submit]:focus,
*:has(> input[type=submit]) input[type=button]:active,
*:has(> input[type=submit]) input[type=button]:focus,
*:has(> input[type=submit]) input[type=reset]:active,
*:has(> input[type=submit]) input[type=reset]:focus,
*:has(> input[type=submit]) input[type=submit]:active,
*:has(> input[type=submit]) input[type=submit]:focus {
  opacity: 0.7;
}

*:has(> input[type=submit])::before {
  background-color: currentcolor;
  opacity: 1;
}

.color *:has(> input[type=submit])::before {
  background-color: #fe5500;
}

/* label */
form label:has(input, select, textarea, button) {
  display: flex;
  flex-flow: nowrap column;
  gap: 0.8em;
  align-items: flex-start;
  justify-content: center;
  font-weight: 700;
  color: currentcolor;
  letter-spacing: 0.1em;
}

form label:has(input, select, textarea, button) > span {
  width: 100%;
}

form .title,
form label:not(:has(input, select, textarea, button)) {
  display: flex;
  flex-flow: wrap column;
  align-items: flex-start;
  justify-content: center;
  font-weight: 700;
  color: currentcolor;
  letter-spacing: 0.07em;
}

/* 任意・必須ラベル */
form .box:has(input[aria-required=true]) .title,
form .box:not(:has(input[aria-required=true])) .title {
  position: relative;
  display: inline-block;
  padding-left: 3em;
  font-size: 1em;
}

form .box:has(input[aria-required=true]) .title::before,
form .box:not(:has(input[aria-required=true])) .title::before {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: block;
  width: 2.4em;
  height: 1.5em;
  margin: auto;
  content: "";
  transform: translateY(-50%);
}

form .box:has(input[aria-required=true]) .title::after,
form .box:not(:has(input[aria-required=true])) .title::after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: flex;
  flex-flow: nowrap row;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 1.5em;
  font-weight: 800;
  color: #fff;
  text-indent: 0;
  letter-spacing: 0.1em;
  transform: translateY(-50%) scale(0.7);
}

form .box .title::before {
  background-color: #858585;
}

form .box .title::after {
  content: "任意";
}

form .box:has([aria-required=true]) .title::before,
form .box:has(.required) .title::before {
  background-color: #EF751E;
}

form .box:has([aria-required=true]) .title::after,
form .box:has(.required) .title::after {
  content: "必須";
}

/* お問い合わせフォームのレイアウト */
form[method=post] > * + * {
  margin-top: 3em;
}

form[method=post] .box {
  display: flex;
  flex-flow: wrap row;
  gap: 0.8em 2em;
  align-items: flex-start;
  justify-content: center;
}

form[method=post] .box > *:first-child {
  flex: 1 1 14em;
}

form[method=post] .box > *:not(:first-child) {
  flex: 1 1 65%;
}

form[method=post] .btnContainer {
  display: flex;
  flex-flow: column nowrap;
  gap: 2em;
  margin-top: 5em;
}

/* WP ブロック 基本スタイル
--------------------------------------------- */
.wp-block-button__link {
  font-weight: 700;
  letter-spacing: 0.25em;
}

.wp-block-embed.is-type-video iframe {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 964/542;
}

/* ファイル */
.wp-block-file:not(.wp-element-button) {
  display: flex;
  flex-flow: wrap row;
  gap: 0.5em 1em;
  align-items: center;
  justify-content: flex-start;
  font-size: 1em;
  font-weight: 700;
}

.wp-block-file:not(.wp-element-button) + .wp-block-file:not(.wp-element-button) {
  margin-top: 1em;
}

.wp-block-file:not(.wp-element-button) a {
  text-decoration: underline;
}

.wp-block-file:not(.wp-element-button) .wp-block-file__button {
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: flex-start;
  padding: 0.4em 1em;
  margin-left: 0;
  background-color: #002944;
  border-radius: 0.5em;
}

.wp-block-file:not(.wp-element-button) .wp-block-file__button::before {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.2em;
  height: 1.2em;
  content: "";
  background-image: url("../img/icon-download.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

hr.wp-block-separator {
  margin: 2em 0;
}

hr.wp-block-separator.small {
  margin: 1em 0;
}

/* WPブロック 余白調整 特定範囲
--------------------------------------------- */
/* 記事ページ */
.single h2.wp-block-heading {
  padding: 0.5em 1em;
  color: #fff;
  background-color: #347798;
}

.single * > * + h2.wp-block-heading {
  margin-top: 3em;
}

.single .u-contents > *:nth-child(2) {
  margin-top: 2em;
}

/* WP 自動挿入パーツのクラス
--------------------------------------------- */
/* ナビゲーション 次へ前へ */
.post-navigation .nav-links,
.posts-navigation .nav-links {
  display: flex;
  flex-flow: nowrap row-reverse;
  align-items: center;
  justify-content: space-between;
}

.post-navigation .nav-links .nav-previous,
.posts-navigation .nav-links .nav-previous {
  flex: 0 1 auto;
  margin-left: auto;
  font-weight: 700;
}

.post-navigation .nav-links .nav-previous a,
.posts-navigation .nav-links .nav-previous a {
  display: block;
  padding: 1em 0.5em;
}

.post-navigation .nav-links .nav-next,
.posts-navigation .nav-links .nav-next {
  flex: 0 1 auto;
  margin-right: auto;
  font-weight: 700;
}

.post-navigation .nav-links .nav-next a,
.posts-navigation .nav-links .nav-next a {
  display: block;
  padding: 1em 0.5em;
}

/* ページネーション */
.pagination .nav-links {
  display: flex;
  flex-flow: nowrap row;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
}

.pagination .page-numbers {
  padding: 0.5em 1em;
  font-weight: 700;
  text-align: center;
  background-color: #e7e7e7;
}

.pagination .page-numbers.current {
  color: #fff;
  background-color: #002944;
}