@charset "UTF-8";

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
pre,
form,
fieldset,
input,
textarea,
p,
br,
hr,
blockquote,
th,
td,
label {
  margin: 0;
  padding: 0;
}

fieldset,
img,
abbr,
acronym {
  border: 0;
}

img {
  vertical-align: bottom;
  width: 100%;
}

ul {
  list-style: none;
}

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

tr,
th,
td {
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}

caption {
  text-align: left;
}

a img,
:link img,
:visited img {
  border: none;
}

:link,
:visited {
  text-decoration: none;
}

a[href^="tel:"] {
  cursor: default;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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

address {
  font-style: normal;
}

input:focus {
  outline: none;
}

section {
  position: relative;
  width: 100%;
}

/*! kiso.css v1.1.5 | MIT License | https://github.com/tak-dcxi/kiso.css */

/* ======================================================
//  MARK: Universal
// ====================================================== */
*,
::before,
::after {
  /*
  * Includes `padding` and `border` in the element's specified dimensions.
  * It is highly recommended to set `box-sizing: border-box;` by default, as it makes styling much easier, especially when specifying `width: 100%;`.
  */
  box-sizing: border-box;
}

/* ======================================================
//  MARK: Document and Body Elements
// ====================================================== */
:where(:root) {
  /* In Safari, if `font-family` is not specified, a serif font is applied by default, so `sans-serif` is set as the default here. */
  font-family: sans-serif;

  /*
  * For accessibility, it is recommended to set the `line-height` to at least 1.5 times the text size within paragraphs.
  * @see https://waic.jp/translations/WCAG21/#visual-presentation
  */
  line-height: 1.5;

  /* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */
  text-spacing-trim: trim-start;

  /* Improves readability by inserting a small space between Japanese and alphanumeric characters. */
  text-autospace: normal;

  /* Prevents misreading by applying strict line-breaking rules. */
  line-break: strict;

  /* Wraps English words mid-word. Specifying `anywhere` also prevents content from overflowing in layouts like `flex` or `grid`. */
  overflow-wrap: anywhere;

  /*
  * Mobile browsers have an algorithm that automatically adjusts font sizes to prevent text from becoming too small.
  * This controls the auto-adjustment feature to prevent unwanted resizing.
  */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Prevents layout shift caused by the appearance or disappearance of the scrollbar. */
  scrollbar-gutter: stable;

  /* Suppresses the tap highlight on iOS. */
  -webkit-tap-highlight-color: transparent;
}

:where(body) {
  /*
  * When creating a sticky footer, a minimum height is often required.
  * Setting the `min-block-size` to the dynamic viewport height ensures enough space for the footer.
  */
  min-block-size: 100dvb;

  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
}

/* ======================================================
// MARK: Sections
// ------------------------------------------------------ */
:where(h1, h2, h3, h4, h5, h6) {
  /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
  text-wrap: pretty;
}

:where(h1) {
  /*
  * Adjusts user agent (UA) styles for `h1` elements within sectioning content.
  * This addresses DevTools warnings that appear when `h1` elements nested within sectioning content lack `font-size` and `margin` properties.
  * @see https://html.spec.whatwg.org/#sections-and-headings
  */
  margin-block: 0.67em;
  font-size: 2em;
}

:where(h2, h3, h4, h5, h6) {
  /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
}

:where(search) {
  /*
  * The `<search>` element is supported from Safari 17.
  * This prevents it from being displayed as an inline element in unsupported environments.
  */
  display: block flow;
}

/* ======================================================
//  MARK: Grouping content
// ====================================================== */
:where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
  /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
}

:where(blockquote, figure) {
  /* The `margin-inline` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-inline: unset;
}

:where(p:lang(en)) {
  /*
  * In English, a single word on the last line is called a "widow" or "orphan" and is considered something to avoid as it makes the text harder to read
  * Therefore, when lang="en", this prevents the last line from ending with a single word.
  */
  text-wrap: pretty;
}

:where(address:lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}

:where(ul, ol, menu) {
  /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  padding-inline-start: unset;

  /*
  * In Safari, using `list-style: none` prevents screen readers from announcing lists.
  * `list-style-type: ""` is used to hide markers without affecting accessibility.
  */
  list-style-type: "";
}

:where(dt) {
  /* It is common to display `<dt>` elements in bold, so `font-weight: bolder;` is set by default. */
  font-weight: bolder;
}

:where(dd) {
  /* The `margin-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-inline-start: unset;
}

:where(pre) {
  /*
  * Since `text-spacing-trim` can affect spacing in `<pre>` elements even with its initial value, the final rendering may depend on the user's font settings.
  * To ensure consistent alignment, `space-all` is explicitly specified and inheritance is prevented.
  */
  text-spacing-trim: space-all;

  /* Set to `no-autospace` as it can cause misalignment with monospaced fonts. */
  text-autospace: no-autospace;
}

@media print {
  :where(pre) {
    /* Wraps text when printing. */
    white-space: pre-wrap;
  }
}

/* ======================================================
//  MARK: Text-level semantics
// ====================================================== */
:where(em:lang(ja)) {
  /* In Japanese, emphasis is commonly represented by bold text, so `font-weight: bolder;` is set by default. */
  font-weight: bolder;
}

:where(:is(i, cite, em, dfn, var):lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}

:where(code, kbd, samp) {
  /*
  * Set a monospace font family referencing Tailwind.
  * @see https://tailwindcss.com/docs/font-family
  */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Font feature settings can have adverse effects on monospaced fonts, so their values are explicitly set to `initial` to prevent inheritance. */
  font-feature-settings: initial;
  font-variation-settings: initial;

  /* Resets the `font-size` specified in the UA stylesheet to allow inheritance. */
  font-size: unset;
}

:where(abbr[title]) {
  /* Display an underline. */
  text-decoration-line: underline;

  /* Set the underline style to dotted. */
  text-decoration-style: dotted;

  /* Display a tooltip on mouse hover. */
  cursor: help;
}

:where(time) {
  /* Set to `no-autospace` because date notations in typography do not include spaces. */
  text-autospace: no-autospace;
}

@media (forced-colors: active) {
  :where(mark) {
    /* In forced-colors mode, the color of the mark element may not change, which can be problematic. Use system colors in forced-colors mode. */
    background-color: Highlight;
    color: HighlightText;
  }
}

/* ======================================================
//  MARK: Links
// ====================================================== */
:where(a:any-link) {
  /* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
  color: unset;

  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `revert`.
  */
  text-decoration-line: unset;

  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;
}

/* ======================================================
//  MARK: Embedded content
// ====================================================== */
:where(img, svg, picture, video, canvas, model, audio, iframe, embed, object) {
  /* Automatically adjust block size based on content. */
  block-size: auto;

  /* Prevents overflow by setting the maximum width to `100%`. */
  max-inline-size: 100%;

  /* Prevents extra space from appearing at the bottom of the element. */
  vertical-align: bottom;
}

:where(iframe) {
  /* The `border` specified in the UA stylesheet is often unnecessary, so it is reset. */
  border: unset;
}

/* ======================================================
//  MARK: Tabular data
// ====================================================== */
:where(table) {
  /* Collapse borders for a more refined table design. */
  border-collapse: collapse;
}

:where(th) {
  /* Resetting the `text-align` from the UA stylesheet provides more styling flexibility. */
  text-align: unset;
}

/* ======================================================
//  MARK: Forms
// ====================================================== */
:where(button, input, select, textarea),
::file-selector-button {
  /*
  * These elements are often styled with a border, so a `1px` border is applied by default for consistency.
  * This ensures readability even for unstyled elements.
  * When resetting, it's recommended to use `border-color: transparent` instead of `border: none` to account for forced color modes.
  */
  border-width: 1px;
  border-style: solid;

  /* These styles specified in the UA stylesheet are often unnecessary, so they are reset to allow for inheritance. */
  border-color: unset;
  border-radius: unset;
  color: unset;
  font: unset;
  letter-spacing: unset;
  text-align: unset;
}

:where([type="radio"], [type="checkbox"]) {
  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
}

:where([type="search"]) {
  /* Remove the rounded corners of search inputs on macOS and normalize the background color. */
  -webkit-appearance: textfield;
}

@supports (-webkit-touch-callout: none) {
  :where([type="search"]) {
    /* Remove the rounded corners of search inputs on iOS and normalize the background color. */
    border: 1px solid -apple-system-secondary-label;
    background-color: Canvas;
  }
}

:where(
    :is([type="tel"], [type="url"], [type="email"], [type="number"]):not(
        :placeholder-shown
      )
  ) {
  /*
  * Certain input types need to maintain left alignment even in right-to-left (RTL) languages.
  * However, this only applies when the value is not empty, as the placeholder should be right-aligned.
  * @see https://rtlstyling.com/posts/rtl-styling#form-inputs
  */
  direction: ltr;
}

:where(textarea) {
  /* The `margin-block` specified in Firefox's UA stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;

  /* Allows vertical resizing for `<textarea>` elements. */
  resize: block;
}

:where(
    input:not([type="button"], [type="submit"], [type="reset"]),
    textarea,
    [contenteditable]
  ) {
  /* Set to `no-autospace` because `text-autospace` can insert spaces during input, potentially causing erratic behavior. */
  text-autospace: no-autospace;
}

:where(select) {
  /* The `background-color` specified in iOS Safari's User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  background-color: unset;
}

:where(button, [type="button"], [type="submit"], [type="reset"]),
::file-selector-button {
  /* The `background-color` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  background-color: unset;

  /*
  * On iOS, double-tapping a button can cause zooming, which harms usability.
  * `touch-action: manipulation` is specified to disable zooming on double-tap.
  */
  touch-action: manipulation;
}

:where(
    button,
    label[for],
    select,
    [type="button"],
    [type="submit"],
    [type="reset"],
    [role="tab"],
    [role="button"],
    [role="option"]
  ),
::file-selector-button {
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

:where(fieldset) {
  /*
  * Prevent fieldset from causing overflow.
  * Reset the default `min-inline-size: min-content` to prevent children from stretching fieldset.
  */
  min-inline-size: 0;

  /* The following default styles are often unnecessary, so they are reset. */
  margin-inline: unset;
  padding: unset;
  border: unset;
}

:where(legend) {
  /* The default `padding-inline` is often unnecessary, so it is reset. */
  padding-inline: unset;
}

:where(progress) {
  /* Resets the vertical alignment of the `<progress>` element to its initial value. */
  vertical-align: unset;
}

::placeholder {
  /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
  opacity: unset;
}

/* ======================================================
//  MARK: Interactive elements
// ====================================================== */
:where(summary) {
  /* The default triangle marker is often unnecessary, so it is disabled. */
  list-style-type: "";

  /* Changing the cursor to a pointer clarifies the clickability of the element. */
  cursor: pointer;
}

:where(summary)::-webkit-details-marker {
  /* In Safari versions earlier than 18.4 (released in April 2025), a triangle icon is displayed using the -webkit-details-marker CSS pseudo-element, so it should be removed. */
  display: none;
}

:where(dialog, [popover]) {
  /*
  * When these fixed-position elements are scrolled, preventing scroll chaining on the underlying page and bounce effects on mobile improves usability.
  * Disabling block-direction scroll chaining is recommended.
  */
  overscroll-behavior-block: contain;

  /* The following default styles are often unnecessary, so they are reset. */
  padding: unset;
  border: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  /*
  * These elements can be easily displayed by explicitly setting their `display` property.
  * To prevent them from appearing when not in an open state, they are forcibly hidden.
  */
  display: none !important;
}

:where(dialog) {
  /*
  * The max width and height of a `<dialog>` element are typically determined by the design.
  * These UA stylesheet properties are reset as they can be obstructive, especially when trying to make the dialog full-screen.
  */
  max-inline-size: unset;
  max-block-size: unset;
}

:where(dialog)::backdrop {
  /* Normalize the background color of the `::backdrop` element. */
  background-color: oklch(0% 0 0deg / 30%);
}

:where([popover]) {
  /*
  * While the UA stylesheet's `margin` for `<dialog>` elements is useful for centering with `inset: 0`,
  * But `margin` for `popover` elements is often obstructive as they frequently use Anchor Positioning.
  */
  margin: unset;
}

/* ======================================================
//  MARK: Focus Styles
// ====================================================== */
:where(:focus:not(:focus-visible)) {
  /* Hide the focus outline to reduce visual clutter unless the element is explicitly `:focus-visible`. */
  outline: none;
}

:where(:focus-visible) {
  /* Add space between the content and the focus outline. */
  outline-offset: 3px;
}

[tabindex="-1"]:focus-visible {
  /* Prevent programmatically focused elements from displaying an outline unless they are naturally focusable. */
  outline: none !important;
}

/* ======================================================
//  MARK: Misc
// ====================================================== */
:where(:disabled, [aria-disabled="true"]) {
  /* Display the default cursor on disabled elements to reflect their non-interactive state. */
  cursor: default;
}

[hidden]:not([hidden="until-found"]) {
  /* Ensure that elements intended to be hidden are not displayed, improving clarity and layout control. */
  display: none !important;
}

body {
  color: #212121;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 100%;
  line-height: 2.0;
  background: #fff;
  scroll-behavior: smooth;
  text-align: justify;
  line-break: strict;
}

@media screen and (max-width:690px) {
  body {
    font-size: 86%;
    line-height: 1.8;
    margin: 0;
  }
}

.mincho {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'ヒラギノ明朝 ProN W6', 'HiraMinProN-W6', '游明朝 Medium', 'YuMincho Medium', '游明朝', 'YuMincho', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif;
}

.gothic {
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

.clear:after {
  content: "";
  display: block;
  clear: both;
}

.inner {
  width: 96%;
  max-width: 2000px;
  margin: 0 auto;
}

@media only screen and (max-width: 1024px) {
  .inner {
    width: 96%;
  }
}

.pc_display,
.pc_display.tab_display,
.pc_display.sp_display {
  display: block;
}

.tab_display,
.sp_display,
.tab_display.sp_display {
  display: none;
}

@media only screen and (max-width: 1024px) {

  .pc_display,
  .sp_display,
  .pc_display.sp_display {
    display: none;
  }

  .tab_display,
  .tab_display.pc_display,
  .tab_display.sp_display {
    display: block;
  }
}

@media only screen and (max-width: 690px) {

  .pc_display,
  .tab_display,
  .pc_display.tab_display {
    display: none;
  }

  .sp_display,
  .sp_display.pc_display,
  .sp_display.tab_display {
    display: block;
  }
}

/*  Reset_set Made by Elly Loel - https://ellyloel.com/*/
* {
  margin: 0;
  padding: 0;
  line-height: calc(0.25rem + 1em + 0.25rem);
}

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

*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}

html {
  block-size: 100%;
  -webkit-text-size-adjust: none;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  min-block-size: 100%;
}

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

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

:where(svg) {
  stroke: none;
  fill: currentColor;
}

:where(svg):where(:not([fill])) {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(svg):where(:not([width])) {
  inline-size: 5rem;
}

:where(input, button, textarea, select),
:where(input[type='file'])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

:where(textarea) {
  resize: vertical;
}

@supports (resize: block) {
  :where(textarea) {
    resize: block;
  }
}

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

:where(ul, ol)[role='list'] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*='-'])) {
  cursor: pointer;
  touch-action: manipulation;
}

:where(input[type='file']) {
  cursor: auto;
}

:where(input[type='file'])::-webkit-file-upload-button,
:where(input[type='file'])::file-selector-button {
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
  }

  :where(:not(:active)):focus-visible {
    transition-duration: 0.25s;
  }
}

:where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

:where(button, button[type], input[type='button'], input[type='submit'], input[type='reset']),
:where(input[type='file'])::-webkit-file-upload-button,
:where(input[type='file'])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-align: center;
}

:where(button, button[type], input[type='button'], input[type='submit'], input[type='reset'])[disabled] {
  cursor: not-allowed;
}

/* 固有設定追加 */
/*body {
  background: url(../img/background01.jpg) top center / cover no-repeat;
  background-attachment: fixed;
  line-height: calc(0.35rem + 1em + 0.35rem);
}*/

.inner {
  margin: 0 auto;
  /*max-width: 1440px;*/
}

header .header_navi {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 10px auto 0 auto;
  width: 96%;
  /*max-width: 1440px;*/
  z-index: +1;
}

header .header_logo {
  display: block;
  width: 300px;
  opacity: 0.75;
}

header .right_navi {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: stretch;
  width: calc(100% - 320px);
}

header .header_bttn {
  display: block;
  margin: 0 0 0 0.5em;
  padding: 0.25em 2.0em;
  border: 1px solid #212121;
  border-radius: 36px;
  color: unset;
}

@media only screen and (max-width: 960px) {
  header .header_logo {
    width: 200px;
    opacity: 0.75;
  }

  header .right_navi {
    display: none;
  }
}

.setumei_caption {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  opacity: 0.75;
}

.relative_position {
  position: relative;
}

.grid-paper {
  background-color: white;
  background-image: 
    /* 交点の丸印（2rem間隔=ひとつおき） */
    radial-gradient(circle, #ccc 2px, transparent 2px), 
    /* 横線（1rem間隔） */
    linear-gradient(to right, #cbe9fd 1px, transparent 1px),
    /* 縦線（1rem間隔） */
    linear-gradient(to bottom, #cbe9fd 1px, transparent 1px);
  /* 背景サイズの設定（丸印は2rem間隔、線は1rem間隔） */
  background-size: 2rem 2rem, 1rem 1rem, 1rem 1rem;
  /* 背景の位置調整 */
  background-position: 0 0, 0 0, 0 0;
  /*padding: 1rem;*/
}

footer {
  /*margin: 100px 0 0 0;*/
  padding: 2em 0;
}

/* モーダルキャンバス設定 */
.js_modalWrap {
  display: none;
  z-index: +1;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overscroll-behavior: contain;
}

.js_modalOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
}

.js_modalContInner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /*background: #fff;*/
  height: 100vh;
  padding: 0;
  overflow: hidden;
  animation: zoomIn 3.0s ease-in-out 0s 1 normal forwards;
}

@keyframes zoomIn {
  0% {
    opacity: 1;
    transform: scale(0.6), translate(-50%, -50%);
  }

  100% {
    opacity: 1;
    transform: scale(1), translate(-50%, 0);
  }
}

.js_modalCont {
  overflow: hidden;
  height: 100vh;
  max-height: 100vh;
}

.js_modalCont>*+* {
  margin-top: 10px;
}

/* モーダルキャンバス内[閉じる]ボタン設定 */
.js_modalContInner>.js_modalClose+* {
  margin-top: 0;
}

.js_modalClose {
  display: block;
  position: absolute;
  top: 7px;
  right: 10.5px;
  width: 40px;
  height: 40px;
  background: #999;
  overflow: hidden;
  cursor: pointer;
  z-index: +2;
}

.js_modalClose::before,
.js_modalClose::after {
  content: "";
  background-color: #fff;
  position: absolute;
  top: -1px;
  right: 19px;
  width: 1px;
  height: 40px;
}

.js_modalClose::before {
  transform: rotate(45deg);
}

.js_modalClose::after {
  transform: rotate(-45deg);
}

.js_fadeUp {
  animation-name: fadeUpAnimetion;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnimetion {
  from {
    opacity: 0;
    transform: translateY(200px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.js_fadeUpTrigger {
  opacity: 0;
}