@charset "UTF-8";
/*! TAK's Custom Base.css v1.3.4 | MIT License | github.com/tak-dcxi/taks-custom-base-css */
/* ======================================================
//
// MARK: # TAK's Custom Base.css
// Made by TAK - https: //www.tak-dcxi.com/
// This CSS is built based on Normalize.css. (https: //necolas.github.io/normalize.css/)
// It aims to normalize styles for better cross-browser compatibility, remove default browser styling, and enhance usability and accessibility for all users."
//
// ====================================================== */
/* ======================================================
// MARK: ## Universal
// ------------------------------------------------------ */
*,
::before,
::after {
  /* Ensure padding and borders are included within the dimensions of the element. */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* Prevent inline elements from extending beyond their container's bounds. */
  min-inline-size: 0;
  /* Remove any default borders. */
  border-width: 0;
  /* Set a default border style of solid for easy border additions. */
  border-style: solid;
}

/* ======================================================
// MARK: ## Document and Body Elements
// ------------------------------------------------------ */
:where(:root, body) {
  /* Prevent scrolling along the inline axis (usually horizontal) for root and body. */
  overflow-inline: clip;
}
@supports not (overflow-inline: clip) {
  :where(:root, body) {
    /* Prevent horizontal scrolling for root and body in browsers that don't support `overflow-inline`. */
    overflow-x: clip;
  }
}

:where(:root) {
  /* Specify a safe font-family for the default Gothic typeface. */
  font-family: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", meiryo, sans-serif;
  /* Normalize font-style. */
  font-style: unset;
  /* Normalize font-style. */
  font-weight: 400;
  /* From an accessibility perspective, the line spacing within a paragraph should be at least 1.5 times the text size. (https://waic.jp/translations/WCAG21/#visual-presentation) */
  line-height: 1.5;
  /* Align text to the start of the element, accommodating left-to-right and right-to-left languages. */
  text-align: start;
  /* Remove leading white space for a cleaner text alignment. */
  text-spacing-trim: trim-start;
  /* Use the browser's default method to determine word breaking. */
  word-break: initial;
  /* Apply strict line breaking rules to enhance readability in languages that require it. */
  line-break: strict;
  /* Allow long words to be broken and wrapped at any point to prevent overflow. */
  overflow-wrap: anywhere;
  /* Automatically insert hyphens where appropriate for better text flow and alignment. */
  -ms-hyphens: auto;
      hyphens: auto;
  /* Prevent mobile browsers from scaling text sizes automatically. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  /* Preventing the layout shift caused by scrollbars. */
  scrollbar-gutter: stable;
  /* Allow animations and transitions of intrinsic sizing keywords. */
  interpolate-size: allow-keywords;
  /* Eliminate the tap highlight color on mobile devices for a cleaner interface. */
  -webkit-tap-highlight-color: transparent;
}
:where(:root):has(:where(:modal)) {
  /* Prevent scrolling of the document when a modal is open. */
  overflow: hidden;
}

:where(body) {
  /* Ensures the body element occupies at least 100% of the viewport's block size. */
  min-block-size: 100svb;
  /* Reset default margin. */
  margin: unset;
}

/* ======================================================
// MARK: ## Custom Properties
// ------------------------------------------------------ */
/* ------------------------------------------------------
// MARK: ### colors
*/
/*
  Define a custom property to use as a background color that remains visible in forced colors mode.
  This is useful when using `background-color: currentColor` as a foreground color,
  such as in pseudo-elements.

  Example usage:
  ```
  .button::after {
    content: '';
    justify-self: end;
    mask-image: url(...);
    inline-size: 1em;
    aspect-ratio: 1;
    background-color: var(--background-current);
    color: red;
  }
*/
@property --background-current {
  syntax: "currentColor | CanvasText";
  inherits: true;
  initial-value: currentColor;
}
@media (forced-colors: active) {
  :where(:root) {
    /* Set the default background color to the forced color mode background. */
    --background-current: CanvasText;
  }
}

/* ------------------------------------------------------
// MARK: ### easing function
*/
@property --ease-in-sine {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.47, 0, 0.745, 0.715);
}
@property --ease-out-sine {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.39, 0.575, 0.565, 1);
}
@property --ease-in-out-sine {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@property --ease-in-quad {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
@property --ease-out-quad {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@property --ease-in-out-quad {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@property --ease-in-cubic {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
@property --ease-out-cubic {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.215, 0.61, 0.355, 1);
}
@property --ease-in-out-cubic {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@property --ease-in-quart {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
@property --ease-out-quart {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.165, 0.84, 0.44, 1);
}
@property --ease-in-out-quart {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.77, 0, 0.175, 1);
}
@property --ease-in-quint {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@property --ease-out-quint {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.23, 1, 0.32, 1);
}
@property --ease-in-out-quint {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.86, 0, 0.07, 1);
}
@property --ease-in-expo {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
@property --ease-out-expo {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.19, 1, 0.22, 1);
}
@property --ease-in-out-expo {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(1, 0, 0, 1);
}
@property --ease-in-circ {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
@property --ease-out-circ {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.075, 0.82, 0.165, 1);
}
@property --ease-in-out-circ {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@property --ease-in-back {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
@property --ease-out-back {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@property --ease-in-out-back {
  syntax: "*";
  inherits: false;
  initial-value: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* ------------------------------------------------------
// MARK: ### triangle shapes
*/
/*
Example usage:
```
.tooltip::after {
  --_size: 16px;

  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  clip-path: var(--shape-triangle-bottom);
  inline-size: var(--_size);
  block-size: calc(var(--_size) / 2 * tan(60deg));
  margin-inline: auto;
  background-color: inherit;
}
```
*/
@property --shape-triangle-top {
  syntax: "*";
  inherits: false;
  initial-value: polygon(50% 0, 100% 100%, 0 100%);
}
@property --shape-triangle-bottom {
  syntax: "*";
  inherits: false;
  initial-value: polygon(0 0, 100% 0, 50% 100%);
}
@property --shape-triangle-right {
  syntax: "*";
  inherits: false;
  initial-value: polygon(0 0, 100% 50%, 0 100%);
}
@property --shape-triangle-left {
  syntax: "*";
  inherits: false;
  initial-value: polygon(0 50%, 100% 0, 100% 100%);
}
@property --shape-triangle-lower-left {
  syntax: "*";
  inherits: false;
  initial-value: polygon(0 0, 100% 100%, 0 100%);
}
@property --shape-triangle-upper-left {
  syntax: "*";
  inherits: false;
  initial-value: polygon(0 0, 100% 0, 0 100%);
}
@property --shape-triangle-lower-right {
  syntax: "*";
  inherits: false;
  initial-value: polygon(100% 0, 100% 100%, 0 100%);
}
@property --shape-triangle-upper-right {
  syntax: "*";
  inherits: false;
  initial-value: polygon(0 0, 100% 0, 100% 100%);
}
/* ------------------------------------------------------
// MARK: ### chevron icons
*/
/*
The chevron icon is borrowed from Basicons (https://basicons.xyz/).

Example usage:
```
.button::after {
  content: '';
  justify-self: end;
  mask-image: var(--icon-chevron-right);
  inline-size: 1em;
  aspect-ratio: 1;
  background-color: var(--background-current);
}
```
*/
/* single chevron icons */
@property --icon-chevron-up {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 16 8-8 8 8" /></svg>');
}
@property --icon-chevron-right {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4L16 12L8 20" /></svg>');
}
@property --icon-chevron-down {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8L12 16L20 8" /></svg>');
}
@property --icon-chevron-left {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4L8 12L16 20" /></svg>');
}
/* double chevron icons */
@property --icon-chevrons-up {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18L12 13L7 18M17 11L12 6L7 11" /></svg>');
}
@property --icon-chevrons-right {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 7L11 12L6 17M13 7L18 12L13 17" /></svg>');
}
@property --icon-chevrons-down {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6L12 11L7 6M17 13L12 18L7 13" /></svg>');
}
@property --icon-chevrons-left {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7L13 12L18 17M11 7L6 12L11 17" /></svg>');
}
/* ------------------------------------------------------
// MARK: ### launch link icon
*/
/*
The chevron icon is borrowed from Basicons (https://basicons.xyz/).

Example usage:
```
.button[target="_blank"]::after {
  content: '' / '別ウインドウで開きます';
  justify-self: end;
  mask-image: var(--icon-launch-link);
  inline-size: 1em;
  aspect-ratio: 1;
  background-color: var(--background-current);
}
```
*/
@property --icon-launch-link {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 2H22V7" /><path d="M21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H11" /><path d="M13 11L21.5 2.5" /></svg>');
}
/* ------------------------------------------------------
// MARK: ### leading trim
*/
/*
You can use the `--leading-trim` custom property to adjust the vertical spacing of text elements.
This helps in achieving more consistent and visually pleasing typography across different languages and font styles.

@see https://www.tak-dcxi.com/article/use-line-height-trim-as-css-variable

Example usage:
```
p {
  margin-block: var(--leading-trim);
}

.button {
  padding-block: calc(1.5em + var(--leading-trim));
}
```
*/
@property --leading-trim {
  syntax: "*";
  inherits: false;
  initial-value: calc((1em - 1lh) / 2);
}
:where(:lang(en)) {
  /* This ensures that the vertical space is evenly distributed, improving the visual balance of text. */
  --leading-trim: calc((1cap - 1lh) / 2);
}

/* ------------------------------------------------------
// MARK: ### hover state
*/
/*
You can use these custom properties to easily switch between hover and non-hover styles.
The var() function will use the first non-empty value, allowing you to define both states in one line.

Example usage:
```
.button {
  --_background-lighten: var(--is-hover-false, 0%) var(--is-hover-true, 20%);

  background-color: color-mix(in sRGB, var(--background-button), #fff var(--_background-lighten));
}
```
*/
:where(:-moz-any-link, :enabled, summary) {
  /* Define custom properties for hover state on interactive elements. Default state: `--is-hover-true` is empty, `--is-hover-false` has a value. */
  --is-hover-true: ;
  --is-hover-false: initial;
}
:where(:any-link, :enabled, summary) {
  /* Define custom properties for hover state on interactive elements. Default state: `--is-hover-true` is empty, `--is-hover-false` has a value. */
  --is-hover-true: ;
  --is-hover-false: initial;
}
@media (any-hover: hover) {
  :where(:-moz-any-link, :enabled, summary):where(:hover) {
    /* Set hover state for actual hover, but only on devices that support hover. Hover state: `--is-hover-true` has a value, `--is-hover-false` is empty. */
    --is-hover-true: initial;
    --is-hover-false: ;
  }
  :where(:any-link, :enabled, summary):where(:hover) {
    /* Set hover state for actual hover, but only on devices that support hover. Hover state: `--is-hover-true` has a value, `--is-hover-false` is empty. */
    --is-hover-true: initial;
    --is-hover-false: ;
  }
}
:where(:-moz-any-link, :enabled, summary):where(:focus-visible) {
  /* Set hover state for focus-visible state. Focus-visible state: `--is-hover-true` has a value, `--is-hover-false` is empty. */
  --is-hover-true: initial;
  --is-hover-false: ;
}
:where(:any-link, :enabled, summary):where(:focus-visible) {
  /* Set hover state for focus-visible state. Focus-visible state: `--is-hover-true` has a value, `--is-hover-false` is empty. */
  --is-hover-true: initial;
  --is-hover-false: ;
}

/* ======================================================
// MARK: ## Sections
// ------------------------------------------------------ */
:where(h1, h2, h3, h4, h5, h6) {
  /* Reset default margin. */
  margin-block: unset;
  /* Reset default font-size. */
  font-size: unset;
}

:where(search) {
  /* Render the `search` element consistently. */
  display: block flow;
}

/* ======================================================
// MARK: ## Grouping content
// ------------------------------------------------------ */
:where(p, blockquote, figure, pre, address, ul, ol, dl) {
  /* Reset default margin-block. */
  margin-block: unset;
}

:where(blockquote, figure) {
  /* Reset default margin-inline. */
  margin-inline: unset;
}

:where(address):where(:lang(ja)) {
  /* Reset font style for specific Japanese language elements. */
  font-style: unset;
}

:where(ul, ol) {
  /* Remove default padding-inline-start. */
  -webkit-padding-start: unset;
          padding-inline-start: unset;
  /* In Safari, using 'list-style: none' causes the list not to be announced by screen readers, so use 'list-style-type: ""' to hide markers without affecting accessibility. */
  list-style-type: "";
}

:where(dt) {
  /* Make definition terms bolder. */
  font-weight: 700;
}

:where(dd) {
  /* Remove default indentation. */
  -webkit-margin-start: unset;
          margin-inline-start: unset;
}

:where(hr) {
  /* Sets the thickness of the top border of the <hr> element to 1px. */
  border-block-start-width: 1px;
}

:where(pre) {
  /* Sets the tab character width to 2 spaces for better readability in preformatted text. */
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
}
@media print {
  :where(pre) {
    /* Allow text within <pre> elements to wrap when printing. */
    white-space: pre-wrap;
  }
}

/* ======================================================
// MARK: ## Text-level semantics
// ------------------------------------------------------ */
:where(b, strong) {
  /* Enhance the weight of bold elements for emphasis. */
  font-weight: 700;
}

:where(em):where(:lang(ja)) {
  /* Enhance the weight of bold elements for emphasis. */
  font-weight: 700;
}

:where(i, cite, em, dfn, var):where(:lang(ja)) {
  /* Reset font style for specific Japanese language elements. */
  font-style: unset;
}

:where(small) {
  /* Set the font size to 1em (same as the parent element). */
  font-size: 1em;
  /* Set the font weight to 400. */
  font-weight: 400;
}

:where(code, kbd, samp) {
  /* Set the monospace font using Tailwind as a reference(@see https://tailwindcss.com/docs/font-family). Specifying 'serif' is a countermeasure for Chrome's 13px issue. */
  font-family: ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", serif;
  /* Reset font size to ensure consistent appearance across different devices. */
  font-size: unset;
}

:where(cite, dfn) {
  --_quotation-start: '“';
  --_quotation-end: '”';
}
:where(cite, dfn)::before {
  /* Inserts an opening quotation mark before the content of <cite> and <dfn> elements, defaulting to a double quote unless overridden. */
  content: var(--_quotation-start);
}
:where(cite, dfn)::after {
  /* Inserts a closing quotation mark after the content of <cite> and <dfn> elements, defaulting to a double quote unless overridden. */
  content: var(--_quotation-end);
}
:where(cite, dfn):where(:lang(ja)) {
  /* Overrides the default opening quotation mark with the Japanese opening quote for <cite> and <dfn> elements in Japanese. */
  --_quotation-start: '「';
  --_quotation-end: '」';
}

:where(var) {
  /* Sets the font family to serif for <var> elements, enhancing the typographic distinction of variable names in technical content. */
  font-family: serif;
}
:where(var):where(:lang(ja)) {
  /* Resets the font family for <var> elements in Japanese content. */
  font-family: unset;
}

@media (forced-colors: none) {
  :where(mark) {
    /* Remove any default background colors. */
    background-color: unset;
    /* Reset text color to default or inherited value. */
    color: unset;
    /* Applies an underline to the text to highlight it. */
    text-decoration-line: underline;
    /* Sets the color of the underline using a mix of the 'Mark' color and transparency. */
    text-decoration-color: oklch(from #ff0 l c h/50%);
    /* Specifies the thickness of the underline. */
    text-decoration-thickness: 0.4em;
    /* Adjusts the position of the underline closer to the text. */
    text-underline-offset: -0.2em;
    /* Ensures the underline is not broken by descenders in characters like g, j, p, q, and y. */
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
}

/* ======================================================
// MARK: ## Links
// ------------------------------------------------------ */
:where(:-moz-any-link) {
  /* Remove any default background colors. */
  background-color: unset;
  /* Reset text color to default or inherited value. */
  color: unset;
  /* Remove underline from links. */
  text-decoration-line: none;
  /* Set the thickness of the text decoration based on the font metrics. */
  text-decoration-thickness: from-font;
  /* Position the underline slightly away from the text for enhanced legibility. */
  text-underline-offset: 0.25em;
  /* Adjust underline to skip over descenders for better readability. */
  text-decoration-skip-ink: auto;
}
:where(:any-link) {
  /* Remove any default background colors. */
  background-color: unset;
  /* Reset text color to default or inherited value. */
  color: unset;
  /* Remove underline from links. */
  text-decoration-line: none;
  /* Set the thickness of the text decoration based on the font metrics. */
  text-decoration-thickness: from-font;
  /* Position the underline slightly away from the text for enhanced legibility. */
  text-underline-offset: 0.25em;
  /* Adjust underline to skip over descenders for better readability. */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* ======================================================
// MARK: ## Edits
// ------------------------------------------------------ */
:where(ins):not(:where(.adsbygoogle)) {
  /* Use a dashed line for underlining inserted content, making it distinctly visible. */
  text-decoration-style: dashed;
  /* Position the underline slightly away from the text for enhanced legibility. */
  text-underline-offset: 0.4em;
  /* Adjust underline to skip over descenders for better readability. */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

:where(del) {
  /* Apply a double line through the text for deleted content, enhancing visibility. */
  text-decoration-style: double;
}

/* ======================================================
// MARK: ## Embedded content
// ------------------------------------------------------ */
:where(img, picture, svg, video, canvas, audio, iframe, embed, object) {
  /* Set elements to display as block-level flow containers, suitable for complex layouts. */
  display: inline-block;
  /* Limits the maximum size inline to prevent overflow. */
  max-inline-size: 100%;
  /* Automatically adjusts the block size based on content. */
  block-size: auto;
}

/* ======================================================
// MARK: ## Tabular data
// ------------------------------------------------------ */
:where(table) {
  /* Collapses border for a more compact table design. */
  border-collapse: collapse;
}

:where(caption) {
  /* Aligns the caption text to the start of the element. */
  text-align: start;
}

:where(td, th) {
  /* Removes default padding from table cells and headers. */
  padding: unset;
  /* Aligns content of table cells to the top. */
  vertical-align: top;
}

:where(th) {
  /* Makes table header text bold. */
  font-weight: 700;
  /* Aligns header text to the start of the cell. */
  text-align: start;
}

/* ======================================================
// MARK: ## Forms
// ------------------------------------------------------ */
::-webkit-file-upload-button {
  /* Remove default padding. */
  padding: unset;
  /* Apply a transparent border for forced colors mode. */
  border: 1px solid transparent;
  /* Resets border-radius to default. */
  border-radius: unset;
  /* Removes default background color. */
  background-color: unset;
  /* Removes default text color. */
  color: unset;
  /* Resets font settings to inherit from parent. */
  font: unset;
  /* Centers the element vertically within its line box. */
  vertical-align: middle;
  /* Resets letter-spacing to default. */
  letter-spacing: unset;
  /* Resets text alignment to default. */
  text-align: unset;
  /* Resets text transformation to default. */
  text-transform: unset;
}
:where(button, input, select, textarea),
::file-selector-button {
  /* Remove default padding. */
  padding: unset;
  /* Apply a transparent border for forced colors mode. */
  border: 1px solid transparent;
  /* Resets border-radius to default. */
  border-radius: unset;
  /* Removes default background color. */
  background-color: unset;
  /* Removes default text color. */
  color: unset;
  /* Resets font settings to inherit from parent. */
  font: unset;
  /* Centers the element vertically within its line box. */
  vertical-align: middle;
  /* Resets letter-spacing to default. */
  letter-spacing: unset;
  /* Resets text alignment to default. */
  text-align: unset;
  /* Resets text transformation to default. */
  text-transform: unset;
}

:where([type=radio i], [type=checkbox i]) {
  /* Remove default margin. */
  margin: unset;
}

:where([type=file i]) {
  /* Default cursor for file input fields. */
  cursor: unset;
}

:where(textarea) {
  /* Remove default margin in Firefox. */
  margin-block: unset;
  /* Allows resizing of textarea vertically only. */
  resize: block;
}

::-webkit-file-upload-button {
  /* Set the inline-size of the button to match the content's inline-size exactly. */
  inline-size: -webkit-fit-content;
  inline-size: fit-content;
  /* Optimizes touch interaction for buttons. */
  touch-action: manipulation;
}

:where(button),
::file-selector-button {
  /* Set the inline-size of the button to match the content's inline-size exactly. */
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  /* Optimizes touch interaction for buttons. */
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

:where(button)::-moz-focus-inner {
  /* Remove the inner padding in Firefox. */
  padding: unset;
}

::-webkit-file-upload-button {
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

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

:where(select):where(:disabled) {
  /* Keep the opacity of disabled selects consistent with other disabled elements. */
  opacity: inherit;
}

:where(fieldset) {
  /* Remove default margin-inline. */
  margin-inline: unset;
  /* Remove default padding. */
  padding: unset;
}

:where(legend) {
  /* Remove default padding-inline. */
  padding-inline: unset;
}

:where(optgroup) {
  /* Resets font settings to inherit from parent. */
  font: unset;
}

::-webkit-input-placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

::-moz-placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

:-ms-input-placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

::-ms-input-placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

::placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

::picker(select) {
  /* Render the `: :picker(select)` pseudo element consistently. */
  display: block flow;
  /* Remove default padding. */
  padding: unset;
}

/* ======================================================
// MARK: ## Interactive elements
// ------------------------------------------------------ */
:where(summary) {
  /* Eliminate the default marker from details summary for a cleaner disclosure widget. */
  display: block flow;
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

::-webkit-details-marker {
  /* Hide the default disclosure marker to allow for custom styling. */
  display: none;
}

:where(dialog, [popover]) {
  /* Resets overflow property. */
  overflow: unset;
  /* Resets the inline size property. */
  inline-size: unset;
  /* Resets the block size property. */
  block-size: unset;
  /* Resets the max inline size limit. */
  max-inline-size: unset;
  /* Resets the max block size limit. */
  max-block-size: unset;
  /* Removes default padding. */
  padding: unset;
  /* Removes default background color. */
  background-color: unset;
  /* Resets color to default. */
  color: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  /* Hide the dialog element and popover element when it is not open. */
  display: none !important;
}

::-ms-backdrop {
  /* Remove default backdrop color for a clearer view of the underlying content. */
  background-color: unset;
}

::backdrop {
  /* Remove default backdrop color for a clearer view of the underlying content. */
  background-color: unset;
}

/* ======================================================
// MARK: ## Focus styles
// ------------------------------------------------------ */
:where(:-moz-focusring) {
  /* Improve outlines for Firefox and unify style with input elements and buttons. */
  outline: auto;
}

:where(:focus-visible) {
  /* Slightly offset focus outline for better visibility without overlapping text. */
  outline-offset: 2px;
}

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

[tabindex="-1"]:focus-visible {
  /* Ensure that programmatically focused elements do not show an outline unless they are naturally focusable. */
  outline: none !important;
}

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

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

/* ======================================================
// MARK: ## Reduced Motion
// ------------------------------------------------------ */
/* Target all elements that don't have the 'data-safe-animation' attribute. */
@media (prefers-reduced-motion: reduce) {
  :not([data-safe-animation])::-ms-backdrop {
    /* Disable animations and transitions for users who prefer reduced motion. */
    background-attachment: unset !important;
    scroll-behavior: unset !important;
    transition-delay: unset !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: unset !important;
    animation-iteration-count: unset !important;
    view-transition-name: none !important;
  }
  :not([data-safe-animation]), :not([data-safe-animation])::before, :not([data-safe-animation])::after, :not([data-safe-animation])::backdrop {
    /* Disable animations and transitions for users who prefer reduced motion. */
    background-attachment: unset !important;
    scroll-behavior: unset !important;
    -webkit-transition-delay: unset !important;
            transition-delay: unset !important;
    -webkit-transition-duration: 1ms !important;
            transition-duration: 1ms !important;
    -webkit-animation-duration: 1ms !important;
            animation-duration: 1ms !important;
    -webkit-animation-delay: unset !important;
            animation-delay: unset !important;
    -webkit-animation-iteration-count: unset !important;
            animation-iteration-count: unset !important;
    view-transition-name: none !important;
  }
}

/* ======================================================
// MARK: ## Utility Classes
// ------------------------------------------------------ */
/* Create a pseudo-element to adjust the vertical space above and below an element. */
.leading-trim::before, .leading-trim::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.leading-trim::before {
  -webkit-margin-after: var(--leading-trim);
          margin-block-end: var(--leading-trim);
}
.leading-trim::after {
  -webkit-margin-before: var(--leading-trim);
          margin-block-start: var(--leading-trim);
}

/* Hide content visually but keep it accessible to screen readers. */
.visually-hidden {
  position: fixed !important;
  inset: 0 !important;
  contain: strict !important;
  visibility: initial !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  margin: unset !important;
  padding: unset !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html {
  font-size: 0.7320644217vw;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scroll-padding-top: var(--hdr_height);
}
html.is-loaded {
  scroll-behavior: smooth;
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.5641025641vw;
  }
}
html.is-gnavopen, html.is-locked {
  overflow: hidden;
}

body {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--c_ink);
}
*,
*::before,
*::after {
  letter-spacing: 0.05em;
}

a,
button {
  text-decoration: none;
  outline: none;
  color: #000;
}
@media (any-hover: hover) {
  a,
  button {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }
  a:hover,
  button:hover {
    opacity: 0.5;
  }
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;
}

table {
  border-collapse: collapse;
  max-width: 100%;
  width: 100%;
}
table th,
table td {
  vertical-align: top;
}

ul,
ol {
  list-style-position: inside;
  list-style: none;
}

/* ============================================================
  l_header — ヘッダー / グローバルナビ / ハンバーガー / SP ドロワー
  ------------------------------------------------------------
  見た目は案件ごとにここへ書く。
  ・SP ドロワーは backdrop-filter の containing block 問題を避けるため
    body 直下（ヘッダー外）に置く想定。
  ・メニュー展開中のスクロール抑止（html.is-gnavopen）は _l_base.scss 側。
============================================================ */
@media screen and (min-width: 769px) {
  body:has(#top) .l_header {
    position: fixed;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
    transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transition: transform 0.4s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;
  }
  body:has(#top) .l_header.is-shown {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body:has(#top) .l_header._top {
    position: absolute;
    top: 4.3rem;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: none;
    transition: none;
    background: transparent;
  }
  body:has(#top) .l_header._top .l_header__logo {
    position: absolute;
    top: 1.6rem;
  }
  body:has(#top) .l_header._top .l_header__logo img {
    width: 17.8rem;
  }
}

.l_head {
  padding: 1rem 1.4rem;
  background: #2468b7;
  text-align: right;
  position: relative;
  z-index: 2;
}
.l_head img {
  width: 11.2rem;
}

.l_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.2rem 1.8rem;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
}
.l_header__logo img {
  width: 8.4rem;
}
@media screen and (max-width: 768px) {
  .l_header__logo img {
    width: 9.5rem;
  }
}
.l_header__nav {
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3.2rem;
}
.l_header__nav a {
  font-size: 1.5rem;
  font-weight: bold;
  color: #154a6f;
}
.l_header__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 2.2rem;
  font-size: 1.5rem;
  font-weight: bold;
  background: #154a6f;
  gap: 1rem;
  padding: 1.5rem 2.2rem;
  border-radius: 100vh;
  color: white;
}
@media screen and (max-width: 768px) {
  .l_header__cta {
    margin-left: auto;
    font-size: 1.3rem;
    padding: 1rem 2rem;
  }
}
.l_header__cta img {
  width: 2rem;
}
.l_header__hmb {
  width: 4.9rem;
  height: 2.6rem;
  position: relative;
  margin-left: 2rem;
}
.l_header__hmb span {
  position: absolute;
  inset: 0;
  height: 0.3rem;
  margin: auto;
  background: #154a6f;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.l_header__hmb span:nth-child(1) {
  -webkit-transform: translateY(-1.3rem);
          transform: translateY(-1.3rem);
}
.l_header__hmb span:nth-child(3) {
  -webkit-transform: translateY(1.3rem);
          transform: translateY(1.3rem);
}
.l_header__hmb.is_open span:nth-child(1) {
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
}
.l_header__hmb.is_open span:nth-child(2) {
  opacity: 0;
}
.l_header__hmb.is_open span:nth-child(3) {
  -webkit-transform: rotate(-28deg);
          transform: rotate(-28deg);
}
.l_header__spnav {
  position: fixed;
  top: var(--spnav_top, var(--hdr_height));
  left: 0;
  width: 100%;
  height: calc(100vh - var(--spnav_top, var(--hdr_height)));
  height: calc(100dvh - var(--spnav_top, var(--hdr_height)));
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  background-color: #fff;
  padding: 0rem 3.6rem 6rem;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.l_header__spnav.is_open {
  opacity: 1;
  visibility: visible;
}
.l_header__spnav dl {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #154a6f;
}
.l_header__spnav dl dt a {
  color: #154a6f;
  font-size: 1.5rem;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.l_header__spnav dl dt a:after {
  content: "";
  background: url(../../images/icon_arrow.svg) center no-repeat;
  background-size: contain;
  width: 1.8rem;
  height: 1.8rem;
  -webkit-transform: translateY(0.1rem);
          transform: translateY(0.1rem);
}
.l_header__spnav dl dd {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
}
.l_header__spnav dl dd._grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
}
.l_header__spnav dl dd._col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6rem;
}
.l_header__spnav dl dd a {
  color: #7e7e7e;
  font-size: 1.4rem;
  font-weight: bold;
}

/* ============================================================
  l_footer — フッター
  ------------------------------------------------------------
  見た目は案件ごとにここへ書く。
============================================================ */
.l_fixbnr {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99;
}
@media screen and (max-width: 768px) {
  .l_fixbnr {
    width: 100%;
    padding: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .l_fixbnr._btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .l_fixbnr._btns a {
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  }
}
.l_fixbnr .btn {
  width: 16.5rem;
  height: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  background: #154a6f;
  border: 1px solid white;
  border-radius: 3rem 0 0 3rem;
  color: white;
  font-weight: bold;
  -webkit-transform: translateX(0.7rem);
          transform: translateX(0.7rem);
  margin-bottom: 2rem;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .l_fixbnr .btn {
    border-radius: 0.5rem;
    -webkit-transform: none;
            transform: none;
    margin-bottom: 0;
    font-size: 1.5rem;
    border-width: 0;
    height: 100%;
    width: 100%;
  }
}
.l_fixbnr .btn img {
  width: 1.7rem;
}
@media screen and (max-width: 768px) {
  .l_fixbnr .btn img {
    width: 1.1rem;
  }
}
.l_fixbnr .bnr {
  display: block;
  position: relative;
  -webkit-transform: translate(0.7rem, 0.7rem);
          transform: translate(0.7rem, 0.7rem);
}
@media screen and (max-width: 768px) {
  .l_fixbnr .bnr {
    -webkit-transform: none;
            transform: none;
  }
}
.l_fixbnr .bnr img {
  width: 16.6rem;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
@media screen and (max-width: 768px) {
  .l_fixbnr .bnr img {
    width: 100%;
  }
}
.l_fixbnr .bnr .ov {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.l_fixbnr .bnr:hover {
  opacity: 1;
}
.l_fixbnr .bnr:hover .df {
  opacity: 0;
}
.l_fixbnr .bnr:hover .ov {
  opacity: 1;
}
.l_fixbnr .request {
  display: block;
  width: 15.9rem;
  border-radius: 3rem 0 0 0;
  background: #154a6f;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  position: relative;
  padding: 2.5rem 0 2rem 0.5rem;
}
@media screen and (max-width: 768px) {
  .l_fixbnr .request {
    width: 100%;
    border-radius: 3rem;
    padding: 2rem;
  }
}
.l_fixbnr .request:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2.5rem 0 0 0;
  border: 2px dashed white;
  -webkit-transform: translate(0.5rem, 0.5rem);
          transform: translate(0.5rem, 0.5rem);
}
@media screen and (max-width: 768px) {
  .l_fixbnr .request:before {
    -webkit-transform: none;
            transform: none;
    inset: 0.5rem;
    border-radius: 2.5rem;
  }
}
.l_fixbnr .request img {
  width: 1.6rem;
  -webkit-transform: translateY(-0.2rem);
          transform: translateY(-0.2rem);
}

@media screen and (max-width: 768px) {
  body:has(.l_fixbnr) .l_footer {
    padding-bottom: 12rem;
  }
}

@media screen and (max-width: 768px) {
  body:has(.l_fixbnr._btns) .l_footer,
  body:has(.l_fixbnr .request) .l_footer {
    padding-bottom: 8.2rem;
  }
}

body:has(#contact) .l_footer_cta,
body:has(#thanks) .l_footer_cta,
body:has(#requirements) .l_footer_cta,
body:has(#entry) .l_footer_cta {
  display: none;
}
.l_footer_cta {
  padding: 12rem 0 7rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .l_footer_cta {
    padding: 6rem 0 6rem;
  }
}
.l_footer_cta:before {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  top: -27rem;
  background: url(../../images/ftr_bg@2x.png) top center no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(46rem, rgba(21, 73, 111, 0)), color-stop(46rem, #154a6f));
  background: url(../../images/ftr_bg@2x.png) top center no-repeat, linear-gradient(to bottom, rgba(21, 73, 111, 0) 46rem, #154a6f 46rem);
  background-size: 100%;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .l_footer_cta:before {
    top: -8.5rem;
    background: url(../../images/ftr_bg_sp@2x.png) top center no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(13rem, rgba(21, 73, 111, 0)), color-stop(13rem, #154a6f));
    background: url(../../images/ftr_bg_sp@2x.png) top center no-repeat, linear-gradient(to bottom, rgba(21, 73, 111, 0) 13rem, #154a6f 13rem);
    background-size: 100%;
  }
}
.l_footer_cta .c_inner {
  position: relative;
  z-index: 11;
}
.l_footer_cta__title {
  font-size: 10rem;
  font-weight: 600;
  color: white;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__title {
    font-size: 5rem;
    text-align: center;
  }
}
.l_footer_cta__text {
  font-size: 4rem;
  color: white;
  font-weight: bold;
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__text {
    font-size: 2.5rem;
    text-align: center;
    line-height: 1.3846153846;
    margin-top: 1rem;
  }
}
.l_footer_cta__text2 {
  font-size: 2.5rem;
  color: white;
  font-weight: bold;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__text2 {
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.4444444444;
    margin-top: 1rem;
  }
}
.l_footer_cta__btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.4rem;
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__btns {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 3rem;
  }
}
.l_footer_cta__btns .btn a {
  border-radius: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 11.2rem;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__btns .btn a {
    height: 6.5rem;
  }
}
.l_footer_cta__btns .btn .tel {
  font-size: 6rem;
  font-weight: 600;
  border: 1px solid white;
  color: white;
  gap: 1.2rem;
  font-family: "Oswald", sans-serif;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__btns .btn .tel {
    font-size: 3rem;
  }
}
.l_footer_cta__btns .btn .tel img {
  width: 4.4rem;
  -webkit-transform: translateY(0.2rem);
          transform: translateY(0.2rem);
}
@media screen and (max-width: 768px) {
  .l_footer_cta__btns .btn .tel img {
    width: 2.4rem;
    -webkit-transform: translateY(0.1rem);
            transform: translateY(0.1rem);
  }
}
.l_footer_cta__btns .btn p {
  text-align: center;
  color: white;
  font-size: 1.5rem;
  margin-top: 1rem;
}
.l_footer_cta__btns .btn .mail {
  font-size: 2.5rem;
  font-weight: bold;
  color: #104a6f;
  gap: 1.8rem;
  position: relative;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__btns .btn .mail {
    font-size: 1.8rem;
    gap: 1rem;
  }
}
.l_footer_cta__btns .btn .mail svg {
  width: 6.3rem;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__btns .btn .mail svg {
    width: 3.5rem;
    -webkit-transform: translateY(0.1rem);
            transform: translateY(0.1rem);
  }
}
.l_footer_cta__btns .btn .mail svg path {
  fill: #104a6f;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.l_footer_cta__btns .btn .mail:after {
  content: "";
  background: #104a6f;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 3rem;
  bottom: 0;
  margin: auto 0;
  width: 1.7rem;
  aspect-ratio: 1/1;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
@media screen and (max-width: 768px) {
  .l_footer_cta__btns .btn .mail:after {
    width: 1rem;
    right: 1.5rem;
  }
}
.l_footer_cta__btns .btn .mail:hover {
  opacity: 1;
  background: #59afeb;
  color: white;
}
.l_footer_cta__btns .btn .mail:hover svg path {
  fill: white;
}
.l_footer_cta__btns .btn .mail:hover:after {
  background-color: #fff;
}
.l_footer_bottom {
  padding: 6rem 0 7rem;
}
@media screen and (max-width: 768px) {
  .l_footer_bottom {
    padding: 3rem 0 4rem;
  }
}
.l_footer_bottom__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .l_footer_bottom__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
}
.l_footer_bottom__flex .information .logo img {
  width: 24.2rem;
}
@media screen and (max-width: 768px) {
  .l_footer_bottom__flex .information .logo img {
    width: 19rem;
  }
}
.l_footer_bottom__flex .information .addr {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-top: 1rem;
}
.l_footer_bottom__flex .sitemap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 1.5rem;
  font-weight: bold;
  gap: 4rem;
}
.l_footer_bottom__flex .sitemap dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
}
.l_footer_bottom__flex .sitemap dl dt a {
  color: #154a6f;
}
.l_footer_bottom__flex .sitemap dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
}
.l_footer_bottom__flex .sitemap dl dd a {
  color: #7e7e7e;
  line-height: 1.2;
}
.l_footer__copy {
  background: #154a6f;
  color: white;
  font-size: 1.2rem;
  text-align: center;
  padding: 0.8rem 0;
}

/* ---- Cookie 同意バナー（プラグイン Cookie Notice・仕様書 2026-09-14）----
  文言・リンク先・色はプラグインの設定が正本（帯 #2568B7 ／ ボタン #59AFEA は
  設定の「色」から style 属性で入る）。ここはレイアウトと書体だけを XD に合わせる。
  プラグインの front.css（#cookie-notice .cn-button:not(.cn-button-custom) 等）に
  負けないよう body から書く。
------------------------------------------------------------------------ */
body #cookie-notice {
  font-family: inherit;
  letter-spacing: inherit;
}
body #cookie-notice .cookie-notice-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 3rem;
  padding: 1.8rem 9.2rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  body #cookie-notice .cookie-notice-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 1.2rem;
    padding: 1.5rem 1.5rem 1.8rem;
  }
}
body #cookie-notice.cookie-notice-hidden .cookie-notice-container {
  display: none;
}
body #cookie-notice .cn-text-container {
  display: block;
  margin: 0;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  body #cookie-notice .cn-text-container {
    font-size: 1.2rem;
  }
}
body #cookie-notice .cn-buttons-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 1.8rem;
}
@media screen and (max-width: 768px) {
  body #cookie-notice .cn-buttons-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}
body #cookie-notice .cn-buttons-container .cn-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 7.3rem;
  height: 4.3rem;
  margin: 0;
  padding: 0 2.4rem;
  border: none;
  border-radius: 0.4rem;
  color: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 768px) {
  body #cookie-notice .cn-buttons-container .cn-button {
    width: 100%;
  }
}
body #cookie-notice .cn-buttons-container .cn-button:hover {
  opacity: 0.8;
}
body #cookie-notice .cn-close-icon {
  display: none;
}

/* ============================================================
  l_main — main 全体のレイアウト
============================================================ */
.l_main._gray {
  background: #f0f3f5;
}
.l_main._bg {
  background: url(../../images/page_headbg.svg) top 16.6rem right -15.2rem no-repeat;
  background-size: 197.6rem;
}
@media screen and (max-width: 768px) {
  .l_main._bg {
    background: none;
  }
}

.c_inner {
  max-width: 108.8rem;
  width: calc(100% - 7.2rem);
  margin-left: auto;
  margin-right: auto;
}
.c_inner._1000 {
  max-width: 1000px;
}
.c_inner._full {
  max-width: 100%;
}

@media screen and (min-width: 1025px) {
  .c_tab {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .c_tab_none {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  .c_sp {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .c_pc {
    display: none !important;
  }
}
.c_en {
  font-family: "Outfit", sans-serif;
}

/* 「トキメク」系のコピーだけに使う極太丸ゴシック（XD 指定は Dela Gothic One）。
   ウェイトは Regular の1種類しかないので font-weight は指定しない。 */
.c_dela {
  font-family: "Dela Gothic One", "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
}

/* 見出しの英字のうち、コンデンス体で組む箇所（XD 指定は Oswald SemiBold）。
   TOP の「BUILD YOUR NEXT.」・採用の「Keep growing」「recruit」・電話番号。
   .c_en（Outfit）とは別物なので取り違えないこと。 */
.c_osw {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}

/* 「伝統」だけに使う明朝（XD 指定は Zen Old Mincho Black）。 */
.c_mincho {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
}

/* ---- イニシャルの中点 --------------------------------------
  氏名（K.K など）の真ん中の「.」だけ色が違う（カンプ実測 #358398）。
  HTML 側は K<i>.</i>K と書く。出る場所は
    ・インタビューFVの氏名
    ・プロフィールカードの氏名
    ・斜めスライダー（c_ivslider）のカードの氏名
  <i> は数字の単位（%・歳・年）でも使っているので、
  ここは氏名の要素だけに限定して当てる。
------------------------------------------------------------ */
.p_iv_fv__name i,
.p_iv_profile__card .name i,
.c_ivslider .name i {
  font-style: normal;
  color: #358398;
}

/* ============================================================
  c_btn / c_btnB / c_btnC — ボタン
  ------------------------------------------------------------
  種類ごとに別クラスで独立させている（サイズ違いをモディファイヤで
  重ねない）。使い分けは下記。

    c_btn   … 汎用（38.5×6rem）。ページ内の「◯◯を見る」など
              ._light だけ色違いとして持つ（紺背景の上に置く白ボタン）
    c_btnB  … フォームの送信ボタン（49.7×7.7rem）。太字で大きい
    c_btnC  … 円の中などに置く小さいピル（12.8×2.5rem）。矢印アイコン付き
    c_btnJob… 採用CTA（マイナビバナーの隣）専用のワンオフ。バナーと同寸

  右端の丸は c_btn / c_btnB の ::after。c_btnC / c_btnJob は代わりに SVG を入れる。
============================================================ */
/* ---- c_btn：汎用 ----------------------------------------- */
.c_btn {
  background: #154a6f;
  color: white;
  font-size: 1.8rem;
  font-weight: bold;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 38.5rem;
  max-width: 100%;
  height: 6rem;
  border-radius: 100vh;
}
@media screen and (max-width: 768px) {
  .c_btn {
    height: 5rem;
    width: 25.8rem;
    font-size: 1.4rem;
  }
}
.c_btn:after {
  content: "";
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 1.7rem;
  bottom: 0;
  margin: auto;
  width: 1.1rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .c_btn:after {
    width: 0.9rem;
  }
}
.c_btn:hover {
  background: #59afeb;
  opacity: 1;
}
.c_btn {
  /* --- _light：紺背景の上に置く白ボタン（サンクスページ等）--- */
}
.c_btn._light {
  background: #fff;
  color: #154a6f;
}
.c_btn._light:after {
  background-color: #154a6f;
}
.c_btn._light:hover {
  background: #d5eaff;
}

/* ---- c_btnB：フォームの送信ボタン ------------------------ */
.c_btnB {
  background: #154a6f;
  color: white;
  font-size: 2rem;
  font-weight: 900;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 49.7rem;
  max-width: 100%;
  height: 7.7rem;
  border-radius: 100vh;
}
@media screen and (max-width: 768px) {
  .c_btnB {
    width: 100%;
    height: 6rem;
    font-size: 1.8rem;
  }
}
.c_btnB:after {
  content: "";
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 3.4rem;
  bottom: 0;
  margin: auto;
  width: 1.4rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .c_btnB:after {
    right: 2.4rem;
    width: 1.1rem;
  }
}
.c_btnB:hover {
  background: #59afeb;
  opacity: 1;
}

/* ---- c_btnC：円の中などに置く小さいピル ------------------ */
.c_btnC {
  background: #154a6f;
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  width: 12.8rem;
  max-width: 100%;
  height: 2.5rem;
  border-radius: 100vh;
  padding-bottom: 0.1rem;
}
.c_btnC svg {
  width: 1.4rem;
  height: 1.4rem;
  -webkit-transform: rotate(-90deg) translateX(-0.1rem);
          transform: rotate(-90deg) translateX(-0.1rem);
}
.c_btnC:hover {
  background: #59afeb;
  opacity: 1;
}

/* ---- c_btnJob：マイナビバナーの隣に置く「募集要項を見る」 ----
  採用CTA（c_ctajob の __btns ／ p_rec_info__cta）だけで使うワンオフ。
  汎用の c_btn 系はどれもバナーより小さくて並ばないので独立させた。
  ★ 要件は「マイナビバナーと同じ大きさ」。バナーは 525×103 の画像を
    width 52.5rem / max-width 100% で置いているので、こちらも同じ幅指定に
    し、高さは aspect-ratio でバナーの比率に追従させる（SP でバナーが
    縮んでも常に同じ箱になる）。height は指定しないこと。
  末尾の矢印は文字の「↓」ではなく SVG。c_btnC 等で使っている丸囲み矢印
  から**丸を外した矢印だけ**（viewBox 15.26×14）を倒して下向きにする。
------------------------------------------------------------ */
.c_btnJob {
  background: #154a6f;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.4rem;
  width: 52.5rem;
  max-width: 100%;
  aspect-ratio: 525/103;
  border-radius: 100vh;
}
@media screen and (max-width: 768px) {
  .c_btnJob {
    width: 100%;
    font-size: 1.8rem;
    gap: 1rem;
  }
}
.c_btnJob svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.8rem;
  height: 2.57rem;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
@media screen and (max-width: 768px) {
  .c_btnJob svg {
    width: 2.2rem;
    height: 2.02rem;
  }
}
.c_btnJob:hover {
  background: #59afeb;
  opacity: 1;
}

/* ============================================================
  c_title — 見出し系コンポーネント
============================================================ */
.c_titA {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 2rem;
}
.c_titA .en {
  color: #154a6f;
  font-size: 2.5rem;
  font-weight: 600;
}
.c_titA .ja {
  font-size: 3rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .c_titA .ja {
    font-size: 2rem;
  }
}

.c_titB {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 5rem;
}
@media screen and (max-width: 768px) {
  .c_titB {
    margin-bottom: 2rem;
  }
}
.c_titB .en {
  font-size: 4.6rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .c_titB .en {
    font-size: 4rem;
  }
}
.c_titB .ja {
  font-size: 2rem;
  font-weight: bold;
}

/* ============================================================
  c_text — テキスト系コンポーネント（リンク・本文など）
============================================================ */
/* ============================================================
  c_pankuzu — パンくずリスト
============================================================ */
.c_pankuzu {
  position: relative;
  z-index: 1;
  padding: 1rem 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: auto;
  font-size: 1.2rem;
  font-weight: bold;
}
.c_pankuzu > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-weight: bold;
}
.c_pankuzu > span + span:before {
  margin: 0 0.5em;
  content: "/";
}
/* ============================================================
  c_wysywig — 投稿本文（WordPress エディタが吐く HTML）
  ------------------------------------------------------------
  編集者がタグを選ぶだけで体裁が整うように、要素セレクタで当てる。
  クラス名は当てにできないので & > 直下ではなく子孫で指定する。
  寸法は XD「お知らせ_詳細」実測（本文幅 682 / h2 は紺帯 62 高さ）。
============================================================ */
.c_wysywig {
  font-size: 1.5rem;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .c_wysywig {
    font-size: 1.4rem;
  }
}
.c_wysywig > * + * {
  margin-top: 2rem;
}
.c_wysywig p {
  line-height: 2;
}
.c_wysywig h2 {
  background: #154a6f;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.1em;
  padding: 1.1rem 1.2rem;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  .c_wysywig h2 {
    font-size: 1.7rem;
    padding: 1rem;
  }
}
.c_wysywig h3 {
  position: relative;
  padding-left: 2.8rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.7777777778;
  letter-spacing: 0.1em;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  .c_wysywig h3 {
    font-size: 1.6rem;
    padding-left: 2.2rem;
  }
}
.c_wysywig h3:before {
  content: "";
  position: absolute;
  left: 0rem;
  top: 0.6em;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #154a6f;
}
.c_wysywig h4 {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #154a6f;
}
.c_wysywig h4:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.3rem;
  background: #154a6f;
  -webkit-transform: translateY(0.1rem);
          transform: translateY(0.1rem);
}
.c_wysywig ul,
.c_wysywig ol {
  padding-left: 2.8rem;
}
.c_wysywig ul li,
.c_wysywig ol li {
  position: relative;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.7777777778;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .c_wysywig ul li,
  .c_wysywig ol li {
    font-size: 1.6rem;
  }
}
.c_wysywig ul li + li,
.c_wysywig ol li + li {
  margin-top: 0.8rem;
}
.c_wysywig ul li {
  color: #154a6f;
}
.c_wysywig ul li:before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 0.6em;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #154a6f;
}
.c_wysywig ol {
  list-style: decimal;
  list-style-position: outside;
}
.c_wysywig a {
  color: #154a6f;
  text-decoration: underline;
  word-break: break-all;
  letter-spacing: inherit;
}
@media (any-hover: hover) {
  .c_wysywig a:hover {
    color: #59afeb;
    opacity: 1;
  }
}
.c_wysywig strong {
  font-weight: bold;
}
.c_wysywig img {
  display: block;
}
.c_wysywig blockquote {
  border-left: 4px solid #e5e5e5;
  padding-left: 2rem;
  color: var(--c_muted);
}
.c_wysywig table {
  font-size: 1.4rem;
}
.c_wysywig table th,
.c_wysywig table td {
  border: 1px solid #e5e5e5;
  padding: 1.2rem;
}
.c_wysywig table th {
  background: #f0f3f5;
  font-weight: bold;
  text-align: left;
}
.c_wysywig .toc,
.c_wysywig #toc_container {
  border: 1px solid #154a6f;
  border-radius: 1rem;
  padding: 3rem 3.5rem;
}
@media screen and (max-width: 768px) {
  .c_wysywig .toc,
  .c_wysywig #toc_container {
    padding: 2rem;
  }
}
.c_wysywig .toc .toc__title,
.c_wysywig .toc .toc_title,
.c_wysywig #toc_container .toc__title,
.c_wysywig #toc_container .toc_title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2.1333333333;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.c_wysywig .toc ol,
.c_wysywig .toc ul,
.c_wysywig #toc_container ol,
.c_wysywig #toc_container ul {
  padding-left: 0;
  list-style: none;
  counter-reset: toc;
}
.c_wysywig .toc ol li,
.c_wysywig .toc ul li,
.c_wysywig #toc_container ol li,
.c_wysywig #toc_container ul li {
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #154a6f;
}
.c_wysywig .toc ol li:before,
.c_wysywig .toc ul li:before,
.c_wysywig #toc_container ol li:before,
.c_wysywig #toc_container ul li:before {
  content: counter(toc);
  counter-increment: toc;
  position: static;
  display: inline-block;
  width: 2.2rem;
  background: none;
  border-radius: 0;
  color: var(--c_ink);
}
.c_wysywig .toc a,
.c_wysywig #toc_container a {
  color: #154a6f;
  text-decoration: none;
  letter-spacing: inherit;
}

/* ============================================================
  c_card — 記事カード（お知らせ一覧・詳細のサイドバー 共通）
  ------------------------------------------------------------
  一覧もサイドバーも幅 344 で同じ作り。並べ方だけ置き場側で決める。
============================================================ */
.c_card {
  display: block;
}
.c_card__img, .c_card__title, .c_card__date {
  display: block;
}
.c_card__img {
  overflow: hidden;
  border-radius: 0.5rem;
  position: relative;
}
.c_card__img:before {
  border-radius: 0.5rem;
  content: "";
  position: absolute;
  inset: 0;
  border: 0px solid #154A6F;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.c_card__img {
  /* アイキャッチが無い投稿は .c_noimage（グレーの面）が入る。
     箱が潰れてグリッドに穴が空かないよう、img と**同じ寸法指定を共有**する。
     出しているのは functions.php の intelgrow_thumb()。 */
}
.c_card__img img,
.c_card__img .c_noimage {
  width: 100%;
  aspect-ratio: 344/229;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (any-hover: hover) {
  .c_card__img img,
  .c_card__img .c_noimage {
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
  }
}
.c_card__img .c_noimage {
  background: #dfe8ee;
  display: grid;
  place-items: center;
}
.c_card__img .c_noimage img {
  width: 38%;
  height: auto;
  aspect-ratio: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.c_card__cat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  .c_card__cat {
    margin-top: 1rem;
  }
}
.c_card__title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.7333333333;
  margin-top: 0.4rem;
}
@media (any-hover: hover) {
  .c_card__title {
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
  }
}
.c_card__date {
  font-size: 1.5rem;
  font-weight: bold;
  color: #c7c7c7;
  margin-top: 0.6rem;
}
.c_card {
  /* 写真を出さない版（TOP のお知らせ・2026-09-18 指示）。
     写真の箱が無いぶん間が抜けるので、上罫線で区切って一覧らしく見せる。 */
}
.c_card._noimg {
  border-top: 1px solid #dfe8ee;
  padding-top: 2rem;
}
.c_card._noimg .c_card__cat {
  margin-top: 0;
}
@media (any-hover: hover) {
  .c_card:hover {
    opacity: 1;
  }
  .c_card:hover .c_card__img:before {
    border-width: 5px;
  }
}

/* ============================================================
  c_pager — ページネーション（WP-PageNavi 想定）
============================================================ */
.c_pager {
  margin-top: 5rem;
}
@media screen and (max-width: 768px) {
  .c_pager {
    margin-top: 3rem;
  }
}
.c_pager .wp-pagenavi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  gap: 0.5rem;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .c_pager .wp-pagenavi {
    font-size: 2rem;
  }
}
.c_pager .wp-pagenavi a,
.c_pager .wp-pagenavi span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #154a6f;
  text-align: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
}
@media (any-hover: hover) {
  .c_pager .wp-pagenavi a:hover {
    opacity: 0.5;
    color: #154a6f;
  }
}
.c_pager .wp-pagenavi .current {
  background: #154a6f;
  color: white;
}
.c_pager .wp-pagenavi .previouspostslink,
.c_pager .wp-pagenavi .nextpostslink {
  background: url(../../images/icon_prev.svg) center no-repeat;
  background-size: contain;
  width: 2.1rem;
  height: 2.6rem;
}
.c_pager .wp-pagenavi .nextpostslink {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
/* ============================================================
  c_mv — メインビジュアル
============================================================ */
.c_mv {
  position: relative;
  overflow: hidden;
}
.c_mv .title .en {
  text-transform: none;
}
@media screen and (min-width: 769px) {
  .c_mv .title .en {
    white-space: nowrap;
  }
}
.c_mv._onbg .title .en {
  text-transform: uppercase;
}
.c_mv .c_pankuzu {
  position: absolute;
  top: 0;
  left: 0;
}
.c_mv {
  /* --- _plain：写真の無いページ見出し（フォーム・お知らせ・規約 等）---
     中身は c_inner（1088幅）に載せる。和文は about/取扱工事 と違って紺。 */
}
.c_mv._plain {
  padding: 7.6rem 0 5.2rem;
}
@media screen and (max-width: 768px) {
  .c_mv._plain {
    padding: 6rem 0 3rem;
  }
}
.c_mv._plain .c_mv__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 4rem;
}
@media screen and (max-width: 768px) {
  .c_mv._plain .c_mv__head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.c_mv._plain .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.c_mv._plain .title .en {
  font-size: 10rem;
  line-height: 1;
  color: #154a6f;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .c_mv._plain .title .en {
    font-size: 5rem;
  }
}
.c_mv._plain .title .ja {
  font-size: 4rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .c_mv._plain .title .ja {
    font-size: 2rem;
  }
}
.c_mv__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 0 10rem 8rem;
}
@media screen and (max-width: 768px) {
  .c_mv__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding: 0 0 4rem;
    gap: 2rem;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
@media screen and (max-width: 768px) {
  .c_mv__flex .textarea {
    padding: 0 3.6rem;
  }
}
.c_mv__flex .textarea .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.c_mv__flex .textarea .title .en {
  font-size: 9rem;
  color: #154a6f;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .c_mv__flex .textarea .title .en {
    font-size: 5rem;
  }
}
.c_mv__flex .textarea .title .ja {
  font-size: 4rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .c_mv__flex .textarea .title .ja {
    font-size: 2rem;
  }
}
.c_mv__flex .textarea .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 3.5rem;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  .c_mv__flex .textarea .list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
  }
}
.c_mv__flex .textarea .list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  white-space: nowrap;
  font-size: 1.8rem;
  font-weight: bold;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0.5rem;
}
.c_mv__flex .textarea .list li a:after {
  content: "";
  background: url(../../images/icon_arrow_bottom.svg) center no-repeat;
  background-size: contain;
  width: 1.9rem;
  height: 1.9rem;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
}
.c_mv__flex .image {
  margin-top: -12rem;
  margin-right: -23rem;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .c_mv__flex .image {
    margin-top: -1rem;
    margin-right: -7rem;
  }
}
.c_mv__flex .image img {
  width: 98.7rem;
}
@media screen and (max-width: 768px) {
  .c_mv__flex .image img {
    width: 42.8rem;
  }
}

/* ============================================================
  c_slider — 写真スライダー（Swiper）＋ 前後ボタンとドット
  ------------------------------------------------------------
  ドットは Swiper の pagination（bullets）を .dots に描かせる。
  枚数が1枚のときは JS 側で .c_slider__nav を隠すので、
  ここでは常に出ている前提で組んでよい。
============================================================ */
.c_slider__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 1.2rem;
  margin-top: 1.3rem;
}
.c_slider__nav .prev,
.c_slider__nav .next {
  color: #154a6f;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
}
.c_slider__nav .prev svg,
.c_slider__nav .next svg {
  width: 3rem;
  height: 3rem;
  display: block;
}
.c_slider__nav .next svg {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.c_slider__nav .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.c_slider__nav .dots {
  position: static;
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
}
.c_slider__nav .dots .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #c7c7c7;
  opacity: 1;
  margin: 0;
  cursor: pointer;
}
.c_slider__nav .dots .swiper-pagination-bullet-active {
  background: #154a6f;
}
.c_slider__nav._rec {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-right: 12rem;
  position: relative;
  z-index: 3;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  .c_slider__nav._rec {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-right: 0;
  }
}
.c_slider__nav._rec .prev,
.c_slider__nav._rec .next {
  color: #fff;
}
.c_slider__nav._rec .prev svg,
.c_slider__nav._rec .next svg {
  width: 5.7rem;
  height: 5.7rem;
}
.c_slider__nav._rec .dots {
  gap: 1.5rem;
}
.c_slider__nav._rec .dots .swiper-pagination-bullet {
  width: 1.1rem;
  height: 1.1rem;
  background: #fff;
  position: relative;
}
.c_slider__nav._rec .dots .swiper-pagination-bullet:after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid white;
  border-radius: 50%;
  opacity: 0;
}
.c_slider__nav._rec .dots .swiper-pagination-bullet-active:after {
  opacity: 1;
}

/* ============================================================
  c_ivslider — 先輩社員インタビューの斜めスライダー
  ------------------------------------------------------------
  採用情報（INTERVIEW）とインタビュー詳細（OTHERS）で
  同じものを使う。座標は XD（1366幅）実測。

  カードは右へ1枚進むごとに斜めに上がっていく並び。1枚ずつ座標を
  持たせると Swiper の loop 複製に対応できないので、スライダーごと
  -12.84deg 傾け、カード側で +12.84deg 戻している。
  傾ける／戻すの transform-origin はどちらも 0 0（＝カード左上）。

  ★ 2026-09-03 カードの中身だけ作り直し
    2026-09-01 に「ブロブも役職もコピーも1枚の画像に焼き込む」方式へ
    変えたが、支給しなおされた素材（rec_person1〜4）は**人物の切り抜き
    だけ**（背後の水色の影は焼き込み済み・ブロブと文字は無し）になった。
    そのため 08-30 時点の「CSS で組む」方式に戻し、コピーだけ支給の
    SVG（rec_interview_text1/2.svg）を載せる形にしている。
    ★ 手を入れたのは **.card の中だけ**。スライダー自体の寸法・位置と
      Swiper の設定（.c_ivslider / .swiper-slide / .card 自体）は
      09-01 時点のまま。

  カードの基準（0,0）は XD の人物写真枠 281×399 の左上。
  そこからの相対位置は XD 実測:
      氏名 Y.A            +212, +121（ベースライン）
      役職                +212, +148
      コピー1行目の箱      +156, +194  251×62
      コピー2行目の箱      +206, +268  251×62

  置き場所（margin / left / top）はページ側で指定する。
============================================================ */
.c_ivslider {
  -webkit-transform: rotate(-12.84deg);
          transform: rotate(-12.84deg);
  margin-top: -17rem;
}
@media screen and (max-width: 768px) {
  .c_ivslider {
    -webkit-transform: none;
            transform: none;
    margin-top: 1rem;
  }
}
.c_ivslider .swiper {
  overflow: visible;
}
.c_ivslider .card {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotate(12.84deg);
          transform: rotate(12.84deg);
  opacity: 1;
  isolation: isolate;
}
@media screen and (max-width: 768px) {
  .c_ivslider .card {
    -webkit-transform: none;
            transform: none;
  }
}
.c_ivslider {
  /* ---- ブロブ（背景を明るく抜いた楕円）------------------------
     XD では「背景ぼかし＋明度上げ」。CSS も backdrop-filter で同じ
     ことをする。非対応ブラウザ用に薄い background も重ねてある。
     少し右下にずらした白い輪郭（._line）を重ねて二重線に見せる。 */
}
.c_ivslider .blob {
  position: absolute;
  z-index: 0;
  left: 7rem;
  bottom: 0rem;
  width: 54.5rem;
  height: 32.9rem;
  border-radius: 50%;
  -webkit-transform: rotate(-24deg);
          transform: rotate(-24deg);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px) brightness(1.24);
  -webkit-backdrop-filter: blur(5px) brightness(1.24);
}
@media screen and (max-width: 768px) {
  .c_ivslider .blob {
    left: -2rem;
    bottom: 1rem;
    width: 42.1rem;
    height: 25.4rem;
  }
}
.c_ivslider .blob._line {
  left: 8rem;
  bottom: -1rem;
  border: 1px solid #fff;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media screen and (max-width: 768px) {
  .c_ivslider .blob._line {
    left: -1rem;
    bottom: 0rem;
  }
}
.c_ivslider {
  /* ---- 人物 ---------------------------------------------------
     支給素材は 522×415 の共通キャンバス（人物＋水色の影）。
     4人とも同じキャンバスに載っているので、位置合わせは
     カードごとではなく**この1か所**で行う。
     人物の背丈（約381px）が XD の写真枠の高さ 399px になるよう
     54.7rem まで拡大し、人物の左上が枠の 0,0 に来るようずらす。 */
}
.c_ivslider .photo {
  width: 100%;
  position: relative;
  z-index: 1;
  /* 人物の下側を .blob と同じ楕円で切る（2026-09-15 指示「足元を楕円の下端に揃える」）。
     SVG の中身: 楕円（.blob と同寸・-24deg）＋ 楕円の長軸より上を全部見せる矩形。
     ＝長軸より上はそのまま、下は楕円の内側だけが残る。
     SVG は 1単位 = 0.1rem（viewBox 6000 = mask-size 600rem）で、中心（0,0）を
     .blob の中心に置く。.photo と .card は同じ大きさ（写真だけが流れに乗る）なので
     .blob と同じ left / bottom の基準がそのまま使える。
       PC: 中心 x = 7rem + 54.5rem/2 = 34.25rem → left  34.25 - 300 = -265.75rem
           中心 y = 下から 0 + 32.9rem/2 = 16.45rem → bottom 16.45 - 300 = -283.55rem
       SP: .blob は 42.1×25.4rem（PC の 0.7725 倍）→ mask-size 463.5rem
           中心 x = -2rem + 21.05rem = 19.05rem → left  19.05 - 231.75 = -212.7rem
           中心 y = 下から 1rem + 12.7rem = 13.7rem → bottom 13.7 - 231.75 = -218.05rem
     .blob の寸法・位置を変えたらここも合わせること。

     ★ マスクだけでは足りない：足元（写真の下端に接している列）の真下では、
       楕円の下端が写真の下端より下にある（傾いた楕円の一番低い所がちょうど足元）。
       実測（採用情報 INTERVIEW・OTHERS とも同寸）: PC 2.23rem ／ SP 0.72rem 下。
       そのぶん写真を top で下げ、写真の下端を楕円の一番低い所に合わせてから
       マスクで楕円に沿って切る。px の丸めと人物の輪郭のアンチエイリアスで
       2px ほど足りなかったので少し多めに下げる（PC 2.45rem ／ SP 0.85rem。
       はみ出た分はマスクが切るので見た目は変わらない）。
       マスクは .photo と一緒に動くので、bottom の値は下げた分だけ中心を上に戻す
       （16.45 + 2.45 / 13.7 + 0.85）。 */
  top: 2.45rem;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3000 -3000 6000 6000'%3E%3Cg transform='rotate(-24)'%3E%3Cellipse rx='272.5' ry='164.5'/%3E%3Crect x='-3000' y='-3000' width='6000' height='3000'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3000 -3000 6000 6000'%3E%3Cg transform='rotate(-24)'%3E%3Cellipse rx='272.5' ry='164.5'/%3E%3Crect x='-3000' y='-3000' width='6000' height='3000'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 600rem 600rem;
          mask-size: 600rem 600rem;
  -webkit-mask-position: left -265.75rem bottom -281.1rem;
          mask-position: left -265.75rem bottom -281.1rem;
}
@media screen and (max-width: 768px) {
  .c_ivslider .photo {
    top: 0.85rem;
    -webkit-mask-size: 463.5rem 463.5rem;
            mask-size: 463.5rem 463.5rem;
    -webkit-mask-position: left -212.7rem bottom -217.2rem;
            mask-position: left -212.7rem bottom -217.2rem;
  }
}
.c_ivslider .photo img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
.c_ivslider .photo ._ov {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.c_ivslider .meta {
  position: absolute;
  left: 41.2rem;
  top: 22rem;
  display: block;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .c_ivslider .meta {
    left: 23rem;
    top: 8rem;
  }
}
.c_ivslider .name {
  display: block;
  font-size: 5.1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (max-width: 768px) {
  .c_ivslider .name {
    font-size: 4rem;
  }
}
.c_ivslider .role {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.3;
  white-space: nowrap;
  margin-top: 0.3rem;
  color: #484848;
}
@media screen and (max-width: 768px) {
  .c_ivslider .role {
    font-size: 1.2rem;
  }
}
.c_ivslider {
  /* ---- コピー -------------------------------------------------
     文字は支給の SVG（アウトライン済み）をそのまま載せる。
     箱は XD 実測 251×62。塗りは左が濃く右へ抜けるグラデーション、
     枠は 1px の白。背後は少しぼかして落とす。 */
}
.c_ivslider .copy {
  position: absolute;
  right: 0;
  top: 33rem;
  gap: 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .c_ivslider .copy {
    right: 2rem;
    top: 18rem;
  }
}
.c_ivslider .copy em {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #fff;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.42)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 1.6rem 1.2rem;
}
@media screen and (max-width: 768px) {
  .c_ivslider .copy em {
    padding: 1.2rem 0.8rem;
  }
}
.c_ivslider .copy em img {
  display: block;
  width: auto;
  max-width: none;
  height: 3rem;
}
@media screen and (max-width: 768px) {
  .c_ivslider .copy em img {
    height: 2.2rem;
  }
}
.c_ivslider .copy em:nth-child(1) {
  margin-right: 5rem;
}
@media (any-hover: hover) {
  .c_ivslider .card:hover .photo img {
    opacity: 0;
  }
  .c_ivslider .card:hover .photo ._ov {
    opacity: 1;
  }
}

/* ============================================================
  c_ctajob — 採用系の締めCTA（トキメク未来へ、ここから。）
  ------------------------------------------------------------
  採用情報とインタビュー詳細の末尾に同じものが入る。
  背景のグラデは XD 実測（#104A6F → #59BABF 42.86% → #F5FFD3）。
============================================================ */
.c_ctajob {
  background: -webkit-gradient(linear, left top, left bottom, from(#104a6f), color-stop(42.86%, #59babf), to(#f5ffd3));
  background: linear-gradient(to bottom, #104a6f 0%, #59babf 42.86%, #f5ffd3 100%);
  padding: 8rem 0 0;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c_ctajob {
    background: -webkit-gradient(linear, left top, left bottom, from(#104a6f), color-stop(42rem, #59babf), to(#f5ffd3));
    background: linear-gradient(to bottom, #104a6f 0%, #59babf 42rem, #f5ffd3 100%);
    padding: 4rem 0 0;
  }
}
.c_ctajob__title {
  font-family: "Dela Gothic One", "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: 6.5rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .c_ctajob__title {
    font-size: 4rem;
    line-height: 1.25;
    letter-spacing: 0;
  }
}
.c_ctajob__text {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.8;
  margin-top: 1.2rem;
}
@media screen and (max-width: 768px) {
  .c_ctajob__text {
    font-size: 1.5rem;
    line-height: 1.6666666667;
  }
}
.c_ctajob__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3.8rem;
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.6);
}
@media screen and (max-width: 768px) {
  .c_ctajob__btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.5rem;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }
}
.c_ctajob__btns .col {
  width: 52.5rem;
  max-width: 100%;
}
.c_ctajob__btns .cap {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.4rem;
}
@media screen and (max-width: 768px) {
  .c_ctajob__btns .cap {
    font-size: 2rem;
  }
}
.c_ctajob__btns .mynavis {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.5rem;
}
.c_ctajob__btns .mynavi img {
  width: 195px;
  height: 60px;
  max-width: 100%;
}

/* ============================================================
  c_form — 入力フォーム（お問い合わせ / 採用エントリー 共通）
  ------------------------------------------------------------
  ・入力・内容確認・完了の3画面で使い回す。
  ・c_step は入力〜完了の進捗表示。フォームとセットでしか出ないので
    このファイルに同居させている。
  ・寸法は XD 実測（カード 1088 / 入力欄 904×55 / 左右パディング 92）。

  ★★ MW WP Form は入力画面と確認画面で**同じ HTML** を吐く ★★
     確認画面用に別のマークアップは持てない。入力欄が「値＋hidden」に
     化けるだけで、行の構造も並びもそのまま。したがって
     「画面ごとに違うもの」は両方 HTML に出しておき、囲みの div の
     クラスで CSS から出し分ける。

       .mw_wp_form_input     入力画面
       .mw_wp_form_confirm   確認画面（.mw_wp_form_preview も付く）
       .mw_wp_form_complete  完了画面

     ここで出し分けているもの:
       ・リード文（._input / ._confirm）
       ・送信ボタン（._next 入力 / ._send 確認 / .c_form__back 修正）
       ・確認画面には出さない行（.c_form__row._inputonly ＝確認用メール）
       ・同意チェック・文字数カウンタ・必須バッジ（確認画面では消す）
     入力欄は必ず <div class="field"> で包むこと。確認画面で
     「項目名｜値」の横並びにするために使う。
============================================================ */
/* ---- 進捗（1 入力 → 2 内容確認 → 3 完了）------------------ */
.c_step {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 18.9rem;
}
@media screen and (max-width: 768px) {
  .c_step {
    width: 100%;
    margin-top: 2rem;
    gap: 0;
    margin-bottom: 3rem;
  }
}
.c_step li {
  position: relative;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}
.c_step li + li:before {
  content: "";
  position: absolute;
  height: 1px;
  background: #fff;
  width: 18.9rem;
  left: -18.9rem;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .c_step li + li:before {
    width: 9rem;
    left: -9rem;
  }
}
.c_step li .num {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 2rem;
  letter-spacing: 0.02em;
}
.c_step li .text {
  position: absolute;
  top: 120%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}
.c_step li.is_current .num, .c_step li.is_done .num {
  background: #fff;
  color: #154a6f;
}

/* 内容確認画面では2つ目まで塗る。
   MW WP Form は入力も確認も**同じURL・同じテンプレート**なので、
   HTML は入力時のまま（1つ目だけ .is_current）。画面の切り替わりは
   フォームの囲みのクラス（.mw_wp_form_confirm）を :has で拾って出す。
   ※ .c_step はフォームより**上**にあるので、CSS でしか辿れない。 */
body:has(.mw_wp_form_confirm) .c_step li:nth-child(2) .num {
  background: #fff;
  color: #154a6f;
}

body:has(.mw_wp_form_confirm) #contact .c_step li:nth-child(2) .num {
  background: #154a6f;
  color: #fff;
}

/* ---- フォーム本体 ---------------------------------------- */
.c_form {
  background: #fff;
  border-radius: 3rem;
  padding: 9rem 9.2rem 8rem;
}
@media screen and (max-width: 768px) {
  .c_form {
    border-radius: 2rem;
    padding: 3rem 2rem 4rem;
  }
}
.c_form__lead {
  font-size: 1.5rem;
  line-height: 1.6666666667;
  margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
  .c_form__lead {
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }
}
.c_form {
  /* ---- フォームの切り替えタブ --------------------------------
     「一般的なお問い合わせ」と「協力業者の応募」は設問がまったく違うので、
     1つのフォームで出し分けず**別ページ**にして、ここで行き来させる。 */
}
.c_form__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.6rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 768px) {
  .c_form__tab {
    gap: 0.8rem;
    margin-bottom: 2.4rem;
  }
}
.c_form__tab a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 5.5rem;
  border: 1px solid #154a6f;
  background: #fff;
  color: #154a6f;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .c_form__tab a {
    height: 5rem;
    font-size: 1.3rem;
  }
}
.c_form__tab a.is_current {
  background: #154a6f;
  color: #fff;
  pointer-events: none;
}
.c_form__unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.2rem;
}
.c_form__unit i {
  font-style: normal;
  font-size: 1.5rem;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.c_form__unit .error {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.c_form__row + .c_form__row {
  margin-top: 3.2rem;
}
@media screen and (max-width: 768px) {
  .c_form__row + .c_form__row {
    margin-top: 2.4rem;
  }
}
.c_form__row > .label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}
@media screen and (max-width: 768px) {
  .c_form__row > .label {
    font-size: 1.4rem;
    gap: 0.8rem;
  }
}
.c_form__row .note {
  font-size: 1.5rem;
  margin-top: 0.8rem;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .c_form__row .note {
    font-size: 1.2rem;
  }
}
.c_form__badge {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 4.7rem;
  height: 2.4rem;
  border-radius: 100vh;
  background: #919191;
  color: #fff;
  font-size: 1.3rem;
}
.c_form__badge._req {
  background: #db0000;
}
.c_form input[type=text],
.c_form input[type=email],
.c_form input[type=tel],
.c_form input[type=date],
.c_form input[type=file],
.c_form select,
.c_form textarea {
  width: 100%;
  height: 5.5rem;
  padding: 0 1.9rem;
  border: 1px solid #c7c7c7;
  background: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  color: var(--c_ink);
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.c_form input[type=text]::-webkit-input-placeholder, .c_form input[type=email]::-webkit-input-placeholder, .c_form input[type=tel]::-webkit-input-placeholder, .c_form input[type=date]::-webkit-input-placeholder, .c_form input[type=file]::-webkit-input-placeholder, .c_form select::-webkit-input-placeholder, .c_form textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
.c_form input[type=text]::-moz-placeholder, .c_form input[type=email]::-moz-placeholder, .c_form input[type=tel]::-moz-placeholder, .c_form input[type=date]::-moz-placeholder, .c_form input[type=file]::-moz-placeholder, .c_form select::-moz-placeholder, .c_form textarea::-moz-placeholder {
  color: #c7c7c7;
}
.c_form input[type=text]:-ms-input-placeholder, .c_form input[type=email]:-ms-input-placeholder, .c_form input[type=tel]:-ms-input-placeholder, .c_form input[type=date]:-ms-input-placeholder, .c_form input[type=file]:-ms-input-placeholder, .c_form select:-ms-input-placeholder, .c_form textarea:-ms-input-placeholder {
  color: #c7c7c7;
}
.c_form input[type=text]::-ms-input-placeholder, .c_form input[type=email]::-ms-input-placeholder, .c_form input[type=tel]::-ms-input-placeholder, .c_form input[type=date]::-ms-input-placeholder, .c_form input[type=file]::-ms-input-placeholder, .c_form select::-ms-input-placeholder, .c_form textarea::-ms-input-placeholder {
  color: #c7c7c7;
}
.c_form input[type=text]::placeholder,
.c_form input[type=email]::placeholder,
.c_form input[type=tel]::placeholder,
.c_form input[type=date]::placeholder,
.c_form input[type=file]::placeholder,
.c_form select::placeholder,
.c_form textarea::placeholder {
  color: #c7c7c7;
}
.c_form input[type=text]:focus,
.c_form input[type=email]:focus,
.c_form input[type=tel]:focus,
.c_form input[type=date]:focus,
.c_form input[type=file]:focus,
.c_form select:focus,
.c_form textarea:focus {
  outline: 2px solid #59afeb;
  outline-offset: -1px;
}
.c_form textarea {
  height: 16.1rem;
  padding: 1.6rem 1.9rem;
  line-height: 1.6666666667;
  resize: vertical;
}
.c_form select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23484848'/%3E%3C/svg%3E") right 1.9rem center no-repeat #fff;
  background-size: 1rem 0.6rem;
  color: #c7c7c7;
}
.c_form select.is_filled {
  color: var(--c_ink);
}
.c_form select option {
  color: var(--c_ink);
}
.c_form input[type=date] {
  width: 29.7rem;
  max-width: 100%;
}
.c_form {
  /* 生年月日は type="date" だとブラウザごとに見た目が変わるので
     テキスト入力にして、右端にカレンダーのアイコンを置く。
     XD 実測: 枠 297x55 ／ アイコン 13.3x15.2 を右から16px・上下中央。 */
  /* MW WP Form のショートコードには class を足せないので、
     囲みの `.field._date` からも当たるようにしてある。 */
}
.c_form input[type=text]._date,
.c_form ._date > input[type=text] {
  width: 29.7rem;
  max-width: 100%;
  padding-right: 4rem;
  background: #fff url(../../images/icon_carendar.svg) no-repeat right 1.6rem center;
  background-size: 1.33rem 1.52rem;
}
.c_form input[type=file] {
  padding: 1.1rem;
  line-height: 3.1rem;
}
.c_form input[type=file]::-webkit-file-upload-button {
  margin-right: 1.6rem;
  padding: 0 1.2rem;
  height: 3.1rem;
  border: none;
  border-radius: 0.4rem;
  background: #a8a8a8;
  color: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}
.c_form input[type=file]::file-selector-button {
  margin-right: 1.6rem;
  padding: 0 1.2rem;
  height: 3.1rem;
  border: none;
  border-radius: 0.4rem;
  background: #a8a8a8;
  color: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}
.c_form__choices {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
}
@media screen and (max-width: 768px) {
  .c_form__choices {
    gap: 1rem;
  }
}
.c_form__choices label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 7rem;
  height: 5.5rem;
  padding: 0 1.6rem;
  background: #f2f2f2;
  font-size: 1.5rem;
  cursor: pointer;
}
.c_form__choices label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.c_form__choices label:has(input:checked) {
  background: #154a6f;
  color: #fff;
}
.c_form__count {
  margin-top: 0.8rem;
  text-align: right;
  font-size: 1.5rem;
}
.c_form__agree {
  margin-top: 8rem;
  text-align: center;
  font-size: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .c_form__agree {
    margin-top: 4rem;
  }
}
.c_form__agree label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  cursor: pointer;
}
.c_form__agree input {
  width: 2rem;
  height: 2rem;
  accent-color: #154a6f;
}
.c_form__agree a {
  color: #479bd6;
  text-decoration: underline;
}
.c_form__agree {
  /* MW WP Form のチェックボックスは
       <span class="mwform-checkbox-field"><label><input><span class="…-text">文言</span></label></span>
     という形で出る。children にはリンクを入れられないので、
     **プラグイン側の文言は隠して**、直後に置いた <span>（リンク入り）を見せる。 */
}
.c_form__agree .mwform-checkbox-field {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c_form__agree .mwform-checkbox-field-text {
  display: none;
}
.c_form__agree .mwform-checkbox-field + span {
  margin-left: 1.2rem;
}
.c_form {
  /* ---- バリデーションのエラー ------------------------------
     MW WP Form は入力欄の**直後**に <span class="error"> を出す。
     入る場所は3通り: `.field`（通常）／`.c_form__unit`（年齢・経験年数）／
     `.c_form__agree`（同意チェック）。後ろ2つは flex なので、
     `width: 100%` と親の `flex-wrap: wrap` で1行を占めさせる。

     プラグイン既定（`.mw_wp_form .error { font-size:93%; color:#b70000 }`）は
     ここで上書きする。赤は必須バッジと同じ #db0000。 */
}
.c_form .error {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.7142857143;
  letter-spacing: 0.05em;
  color: #db0000;
}
@media screen and (max-width: 768px) {
  .c_form .error {
    font-size: 1.2rem;
  }
}
.c_form__submit {
  margin-top: 2.7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
}
@media screen and (max-width: 768px) {
  .c_form__submit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 2rem;
  }
}
.c_form__list dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  .c_form__list dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 0;
  }
}
.c_form__list dl:first-child {
  border-top: 1px solid #e5e5e5;
}
.c_form__list dl dt {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20.5rem;
  font-weight: bold;
  line-height: 2.0666666667;
}
@media screen and (max-width: 768px) {
  .c_form__list dl dt {
    width: auto;
  }
}
.c_form__list dl dd {
  line-height: 2;
  white-space: pre-line;
}
.c_form .c_form__unit input[type=text],
.c_form .c_form__unit input[type=tel] {
  width: 12rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .c_form .c_form__unit input[type=text],
  .c_form .c_form__unit input[type=tel] {
    width: 10rem;
  }
}
.c_form__back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  color: #154a6f;
  font-weight: bold;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ---- 画面ごとの出し分け ------------------------------------
   MW WP Form が囲みの div に付けるクラスで切り替える。 */
.mw_wp_form_input .c_form__lead._confirm,
.mw_wp_form_input .c_form__submit ._send,
.mw_wp_form_input .c_form__submit .c_form__back {
  display: none;
}

.mw_wp_form_confirm .c_form__lead._input,
.mw_wp_form_confirm .c_form__submit ._next,
.mw_wp_form_confirm .c_form__row._inputonly,
.mw_wp_form_confirm .c_form__agree,
.mw_wp_form_confirm .c_form__count,
.mw_wp_form_confirm .c_form__sub,
.mw_wp_form_confirm .c_form__badge,
.mw_wp_form_confirm .error,
.mw_wp_form_confirm .c_form__tab,
.mw_wp_form_complete .c_form__lead._input,
.mw_wp_form_complete .c_form__submit ._next,
.mw_wp_form_complete .c_form__row._inputonly,
.mw_wp_form_complete .c_form__agree,
.mw_wp_form_complete .c_form__count,
.mw_wp_form_complete .c_form__sub,
.mw_wp_form_complete .c_form__badge,
.mw_wp_form_complete .error,
.mw_wp_form_complete .c_form__tab {
  display: none;
}

/* ---- 確認画面の見た目 --------------------------------------
   カンプ「お問い合わせ_内容確認」実測:
     ・行の**上**に罫線。左 129px が紺 4px、その先は #DFDFDF の 1px
     ・罫線は本文幅いっぱい（x=231..1135）
     ・項目名 x=231 ／ 値 x=436 → 項目名の列は 205px
     ・行ピッチ 71px（罫線 → 文字上端 32 ／ 行送り 25 ／ 下 14）
     ・送信ボタン 497×77 の下に「＜内容を修正する」 */
.mw_wp_form_confirm .c_form__row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 2.5rem 0;
  font-size: 1.5rem;
  line-height: 1.6666666667;
}
@media screen and (max-width: 768px) {
  .mw_wp_form_confirm .c_form__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 1.5rem 0;
    font-size: 1.4rem;
  }
}
.mw_wp_form_confirm .c_form__row + .c_form__row {
  margin-top: 0;
}
.mw_wp_form_confirm .c_form__row {
  border-bottom: 1px solid #e5e5e5;
}
.mw_wp_form_confirm .c_form__row:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 12.7rem;
  height: 3px;
  background: #154a6f;
  border-radius: 100vh;
}
.mw_wp_form_confirm .c_form__row:first-of-type {
  border-top: 1px solid #e5e5e5;
}
.mw_wp_form_confirm .c_form__row:first-of-type:before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 12.7rem;
  height: 3px;
  background: #154a6f;
  border-radius: 100vh;
}
.mw_wp_form_confirm .c_form__row > .label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20.5rem;
  margin-bottom: 0;
  font-weight: bold;
  line-height: inherit;
}
@media screen and (max-width: 768px) {
  .mw_wp_form_confirm .c_form__row > .label {
    width: auto;
    margin-bottom: 0.4rem;
  }
}
.mw_wp_form_confirm .c_form__row > .field {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  word-break: break-all;
  /* ★ white-space は **normal**。`pre-line` にしてはいけない。
     MW WP Form は確認画面で
       ・textarea の改行を **<br> に変換して**出す
       ・値と hidden の間、要素の前後に**構造上の改行**を入れる
     ため、`pre-line` にすると <br> と生の改行が二重に効いて
     1行の項目が 76 → 101px、ラジオは 201px まで膨らむ。 */
  white-space: normal;
}
.mw_wp_form_confirm .c_form__row > .field .c_form__choices {
  display: block;
  gap: 0;
}
.mw_wp_form_confirm .c_form__row .note {
  display: none;
}
.mw_wp_form_confirm .c_form__submit {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3.5rem;
  margin-top: 7.7rem;
}
@media screen and (max-width: 768px) {
  .mw_wp_form_confirm .c_form__submit {
    gap: 2.4rem;
    margin-top: 4rem;
  }
}

/* ============================================================
   生年月日のデートピッカー（jQuery UI / MW WP Form）
   ------------------------------------------------------------
   ★ jQuery UI のテーマCSSは**読んでいない**。
     MW WP Form は Google CDN から
       //ajax.googleapis.com/ajax/libs/jqueryui/<WP同梱のバージョン>/themes/smoothness/…
     を読もうとするが、WordPress 同梱の 1.14.2 は Google が配っておらず **404**。
     素の状態だと表がただの文字の羅列になるので、見た目はここで作る
     （`functions.php` で `jquery.ui` を空登録して読ませないようにしてある）。

   ★ `#ui-datepicker-div` は `<body>` 直下に1つだけ作られる。
     `.c_form` の中には無いので、ここはネストせず素の指定にする。

   選べる範囲（16歳以上〜90歳まで）はショートコードの `js` 属性側。
============================================================ */
#ui-datepicker-div {
  display: none;
  width: 30rem;
  padding: 1.2rem;
  border: 1px solid #c7c7c7;
  border-radius: 0.4rem;
  background: #fff;
  -webkit-box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.14);
          box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.14);
  font-family: inherit;
  font-size: 1.4rem;
  color: var(--c_ink);
  z-index: 100;
}
#ui-datepicker-div .ui-datepicker-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  padding: 0 3rem;
  min-height: 3.2rem;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  position: absolute;
  top: 50%;
  width: 2.8rem;
  height: 2.8rem;
  margin-top: -1.4rem;
  border-radius: 0.4rem;
  cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
  display: block;
  overflow: hidden;
  text-indent: -999rem;
}
#ui-datepicker-div .ui-datepicker-prev:before,
#ui-datepicker-div .ui-datepicker-next:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin: -0.4rem 0 0 -0.4rem;
  border-top: 2px solid #154a6f;
  border-right: 2px solid #154a6f;
}
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
  background: #f1f5f8;
}
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled {
  cursor: default;
  opacity: 0.25;
}
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled:hover,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled:hover {
  background: none;
}
#ui-datepicker-div .ui-datepicker-prev {
  left: 0;
}
#ui-datepicker-div .ui-datepicker-prev:before {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  margin-left: -0.2rem;
}
#ui-datepicker-div .ui-datepicker-next {
  right: 0;
}
#ui-datepicker-div .ui-datepicker-next:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-left: -0.6rem;
}
#ui-datepicker-div .ui-datepicker-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
}
#ui-datepicker-div select {
  width: auto;
  height: 3.2rem;
  padding: 0 2.2rem 0 0.8rem;
  border: 1px solid #c7c7c7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23484848'/%3E%3C/svg%3E") right 0.8rem center no-repeat #fff;
  background-size: 0.9rem 0.54rem;
  font-family: inherit;
  font-size: 1.4rem;
  color: var(--c_ink);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
#ui-datepicker-div table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#ui-datepicker-div th {
  padding: 0.4rem 0;
  font-weight: 400;
  font-size: 1.3rem;
  color: #6b6b6b;
}
#ui-datepicker-div td {
  padding: 0.1rem;
  text-align: center;
}
#ui-datepicker-div td a,
#ui-datepicker-div td span {
  display: block;
  padding: 0.6rem 0;
  border-radius: 0.4rem;
  text-decoration: none;
  color: var(--c_ink);
}
#ui-datepicker-div td a:hover {
  background: #f1f5f8;
}
#ui-datepicker-div td a.ui-state-active {
  background: #154a6f;
  color: #fff;
}
#ui-datepicker-div td.ui-datepicker-unselectable span {
  color: #c7c7c7;
}

/* ============================================================
  c_anime — テキストアニメーション
  ------------------------------------------------------------
  発火は AOS に任せる。HTML 側は data-aos="letters" を付けるだけで、
  main.js が中のテキストを 1 文字ずつ .c_anime__char に包み、
  --char-index（0,1,2…）を振る。画面に入ると AOS が .aos-animate を
  付けるので、そこを起点に 1 文字ずつフェードで表示される。

  速さは要素側の style / SCSS で上書きできる（CSS変数）。
    --char-step  … 1 文字ごとの間隔（既定 0.06s）
    --char-start … 全体の開始ディレイ（既定 0s）
    --char-time  … 1 文字のフェード時間（既定 0.8s）
  例: <p data-aos="letters" style="--char-step:.1s"> … </p>
============================================================ */
[data-aos=letters] {
  --char-step: 0.06s;
  --char-start: 0s;
  --char-time: 0.8s;
}
[data-aos=letters].aos-animate {
  --char-opacity: 1;
}

.c_anime__char {
  opacity: var(--char-opacity, 0);
  -webkit-transition: opacity var(--char-time, 0.8s) ease-in-out;
  transition: opacity var(--char-time, 0.8s) ease-in-out;
  -webkit-transition-delay: calc(var(--char-start, 0s) + var(--char-step, 0.06s) * var(--char-index, 0));
          transition-delay: calc(var(--char-start, 0s) + var(--char-step, 0.06s) * var(--char-index, 0));
}

@media (prefers-reduced-motion: reduce) {
  .c_anime__char {
    opacity: 1;
    -webkit-transition: none;
    transition: none;
  }
}
/* ------------------------------------------------------------
  c_wipe — 「紺のベタが左から引いて、抜けたあとに写真が出る」ワイプ

  インタビュー詳細の指示書にある写真の出方。発火は AOS に任せるので
  HTML 側は class="c_wipe" data-aos="wipe" を付けるだけ
  （"wipe" は AOS の既定アニメに無い値なので、AOS は .aos-animate を
   付けるだけで見た目には触らない。data-aos="letters" と同じ使い方）。

  帯の往復と写真の表示を1本の keyframes にまとめてある。
  transition を2本に分けると往路と復路で transform-origin を
  切り替えられないため。
------------------------------------------------------------ */
.c_wipe {
  position: relative;
  overflow: hidden;
}
.c_wipe:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #104a6f;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.c_wipe img {
  opacity: 0;
}
.c_wipe.aos-animate:after {
  -webkit-animation: c_wipeBar 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
          animation: c_wipeBar 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.c_wipe.aos-animate img {
  -webkit-animation: c_wipeShow 1.1s steps(1, end) forwards;
          animation: c_wipeShow 1.1s steps(1, end) forwards;
}

@-webkit-keyframes c_wipeBar {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  49.9% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@keyframes c_wipeBar {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  49.9% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}
@-webkit-keyframes c_wipeShow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes c_wipeShow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c_wipe:after {
    display: none;
  }
  .c_wipe img {
    opacity: 1;
    -webkit-animation: none;
            animation: none;
  }
}
.c_bigbg {
  position: sticky;
  top: 100%;
  width: 100%;
  height: 0;
  z-index: 0;
}
.c_bigbg:before {
  content: "";
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5ffd3), color-stop(57.14%, #59babf), to(#91b8d1));
  background-image: linear-gradient(to bottom, #f5ffd3 0%, #59babf 57.14%, #91b8d1 100%);
  position: absolute;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 100vh;
}
.c_bigbg__inner {
  position: relative;
  z-index: 2;
}

/* ============================================================
  top — トップページ専用スタイル
  ------------------------------------------------------------
  project/ は「セクションごと」ではなく「ページごと」に 1 ファイル。
  トップページのスタイルはすべて、_index.html の <main id="top"> の
  id（#top）でカプセル化してこの中に追記していく。

  別ページを作る場合は <main id="about"> + project/_about.scss を作り、
  #about { ... } で同様に囲う（style.scss に @use "project/about"; を追記）。

  ※ 全ページ共通の見た目は component(c_*) / layout(l_*) 側に置く。
============================================================ */
#top .p_mv {
  position: relative;
  overflow: hidden;
}
#top .p_mv__swiper .swiper-slide img {
  display: block;
  width: 100%;
  -webkit-transform: scale(1.12);
          transform: scale(1.12);
  will-change: transform;
}
#top .p_mv__swiper .swiper-slide-active img {
  -webkit-animation: p_mvZoom 7s linear both;
          animation: p_mvZoom 7s linear both;
}
@media (prefers-reduced-motion: reduce) {
  #top .p_mv__swiper .swiper-slide img,
  #top .p_mv__swiper .swiper-slide-active img {
    -webkit-animation: none;
            animation: none;
    -webkit-transform: none;
            transform: none;
  }
}
#top .p_mv__textarea {
  position: absolute;
  inset: 0;
  z-index: 5;
  bottom: 0;
  padding: 0 2rem;
  color: white;
  margin-bottom: -1rem;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 74, 111, 0)), to(#082538)) bottom center no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), to(rgba(255, 255, 255, 0))) top center no-repeat;
  background: linear-gradient(to bottom, rgba(16, 74, 111, 0) 0%, #082538 100%) bottom center no-repeat, linear-gradient(rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%) top center no-repeat;
  background-size: 100% 27.3rem, 100% 10.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  #top .p_mv__textarea {
    position: relative;
    inset: unset;
    background: none;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(17rem, #fff));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 17rem);
    margin-top: -17rem;
    margin-bottom: 0;
    padding-top: 14rem;
    padding-bottom: 13rem;
  }
}
#top .p_mv__textarea .sub {
  font-size: 2.7rem;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  #top .p_mv__textarea .sub {
    font-size: 2.4rem;
    color: #154a6f;
    margin-bottom: 1rem;
  }
}
#top .p_mv__textarea .title {
  font-size: 12.4rem;
  font-weight: bold;
  line-height: 0.7983870968;
}
@media screen and (max-width: 768px) {
  #top .p_mv__textarea .title {
    color: #154a6f;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    letter-spacing: 0.05em;
  }
  #top .p_mv__textarea .title .l1 {
    font-size: 6rem;
    line-height: 0.8666666667;
  }
  #top .p_mv__textarea .title .l2 {
    font-size: 7.7rem;
    line-height: 0.8441558442;
  }
  #top .p_mv__textarea .title .l3 {
    font-size: 8rem;
    line-height: 0.8375;
  }
}
#top .p_about {
  position: relative;
  padding: 6.5rem 0 16rem;
  background: url(../../images/top_about_bg@2x.jpg) top center no-repeat #104a6f;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  #top .p_about {
    background: url(../../images/top_about_bg_sp@2x.png) top 19rem center no-repeat #104a6f;
    background-size: 62.2rem;
    padding: 1px 0 7rem;
  }
}
#top .p_about .c_inner {
  max-width: 101.7rem;
  position: relative;
  z-index: 5;
}
#top .p_about__flowtext {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 16rem;
}
@media screen and (max-width: 768px) {
  #top .p_about__flowtext {
    position: static;
    margin-top: 1rem;
  }
}
#top .p_about__flowtext .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
#top .p_about__flowtext .swiper-slide {
  opacity: 0.1;
  color: #154a6f;
  font-size: 12.6rem;
  white-space: nowrap;
  letter-spacing: 0.05em;
  font-weight: 600;
  width: auto;
  padding-right: 6rem;
}
@media screen and (max-width: 768px) {
  #top .p_about__flowtext .swiper-slide {
    font-size: 4rem;
  }
}
#top .p_about__bg {
  position: absolute;
  inset: 0;
}
#top .p_about__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 7rem;
}
@media screen and (max-width: 768px) {
  #top .p_about__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 0;
    margin-top: -2rem;
  }
}
#top .p_about__flex .textarea {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#top .p_about__flex .textarea .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
  #top .p_about__flex .textarea .title {
    margin-bottom: 1rem;
  }
}
#top .p_about__flex .textarea .title .en {
  font-size: 2.5rem;
  font-weight: 600;
  color: #154a6f;
  margin-bottom: 0.4rem;
}
#top .p_about__flex .textarea .title .ja {
  font-size: 4rem;
  line-height: 1.4;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #top .p_about__flex .textarea .title .ja {
    font-size: 2.5rem;
    line-height: 1.28;
  }
}
#top .p_about__flex .textarea .text {
  font-size: 1.8rem;
  line-height: 1.9444444444;
}
@media screen and (max-width: 768px) {
  #top .p_about__flex .textarea .text {
    font-size: 1.5rem;
    line-height: 1.6666666667;
  }
}
#top .p_about__flex .textarea .btn {
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  #top .p_about__flex .textarea .btn {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 768px) {
  #top .p_about__flex .image {
    margin-top: -7rem;
    text-align: center;
  }
}
#top .p_about__flex .image img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #top .p_about__flex .image img {
    width: 31.8rem;
  }
}
#top {
  /* ---- SERVICE（事業紹介）-------------------------------- */
}
#top .p_service {
  position: relative;
  background: url(../../images/top_service_bg@2x.png) center no-repeat #fff;
  background-size: cover;
  padding-bottom: 13.7rem;
}
@media screen and (max-width: 768px) {
  #top .p_service {
    padding-bottom: 5rem;
    background: url(../../images/top_service_bg_sp@2x.png) top center no-repeat #fff;
    background-size: 100%;
  }
}
#top .p_service:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14.5rem;
  background: #104a6f;
}
@media screen and (max-width: 768px) {
  #top .p_service:before {
    height: 9rem;
  }
}
#top .p_service__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 71.3rem;
}
@media screen and (max-width: 768px) {
  #top .p_service__photo {
    position: relative;
    width: auto;
  }
}
#top .p_service__photo img {
  width: 100%;
  aspect-ratio: 713/730;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 0 1rem 1rem 0;
}
@media screen and (max-width: 768px) {
  #top .p_service__photo img {
    width: 35.4rem;
    aspect-ratio: 350/186;
    border-radius: 0 1rem 1rem 0;
  }
}
#top .p_service__body {
  position: relative;
  z-index: 1;
  padding-left: 75.7rem;
  padding-top: 6rem;
}
@media screen and (max-width: 768px) {
  #top .p_service__body {
    padding: 3rem 3.6rem 0;
  }
}
#top .p_service__body .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #top .p_service__body .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0.5rem;
    color: #154a6f;
  }
}
#top .p_service__body .title .en {
  font-size: 10rem;
  font-weight: 600;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  #top .p_service__body .title .en {
    font-size: 4.5rem;
  }
}
#top .p_service__body .title .ja {
  font-size: 1.8rem;
  font-weight: bold;
  padding-top: 3rem;
}
@media screen and (max-width: 768px) {
  #top .p_service__body .title .ja {
    line-height: 1.6666666667;
    padding-top: 0;
  }
}
#top .p_service__body .lead {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.4;
  margin-top: 1.5rem;
}
@media screen and (max-width: 768px) {
  #top .p_service__body .lead {
    font-size: 2.5rem;
    line-height: 1.28;
    margin-top: 1rem;
  }
}
#top .p_service__body .text {
  font-size: 1.8rem;
  line-height: 1.7777777778;
  margin-top: 1.5rem;
}
@media screen and (max-width: 768px) {
  #top .p_service__body .text {
    font-size: 1.5rem;
    line-height: 2;
    margin-top: 0.5rem;
  }
  #top .p_service__body .text br {
    display: none;
  }
}
#top .p_service__body .tags {
  display: grid;
  grid-template-columns: repeat(2, 22.8rem);
  gap: 0.8rem 1.4rem;
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  #top .p_service__body .tags {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1rem;
    margin-top: 1rem;
  }
}
#top .p_service__body .tags li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 3.6rem;
  background: #eaf6ff;
  color: #154a6f;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 0.5rem;
}
@media screen and (max-width: 768px) {
  #top .p_service__body .tags li {
    height: 3.6rem;
    font-size: 1.3rem;
  }
}
#top .p_service__more {
  display: grid;
  grid-template-columns: 1fr auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 47.1rem;
  max-width: 100%;
  margin-top: 2rem;
  padding: 2rem 0;
  border-top: 2px solid #154a6f;
  border-bottom: 2px solid #154a6f;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #top .p_service__more {
    width: auto;
    margin-top: 2.5rem;
    padding: 1.5rem 0;
  }
}
#top .p_service__more:hover {
  color: #59afeb;
  opacity: 1;
}
#top .p_service__more:hover svg {
  color: #59afeb;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
#top .p_service__more .cap {
  grid-column: 1;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  #top .p_service__more .cap {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
}
#top .p_service__more .label {
  grid-column: 1;
  font-size: 2.4rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #top .p_service__more .label {
    font-size: 1.8rem;
  }
}
#top .p_service__more svg {
  grid-column: 2;
  grid-row: 1/3;
  width: 3rem;
  height: 3rem;
  color: #154a6f;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
@media screen and (max-width: 768px) {
  #top .p_service__more svg {
    width: 2.5rem;
  }
}
#top {
  /* ---- 写真の背景固定（パララックス）---------------------
    指示書の「写真背景固定表示」。background-attachment: fixed は
    iOS Safari で効かない（拡大表示になるだけ）／祖先に transform や
    filter があると壊れる／スクロールのたびに再ペイントが走る、と難があるので
    使わず、内側の __img を GSAP + ScrollTrigger で上下に動かして再現する。
    これなら SP でも同じ見え方になる（fixed のときは SP だけ演出を諦めていた）。
  --------------------------------------------------------- */
}
#top .p_parallax {
  height: 60.8rem;
  position: relative;
  overflow: hidden;
  margin-bottom: -5rem;
}
@media screen and (max-width: 768px) {
  #top .p_parallax {
    height: 30rem;
    margin-bottom: -3rem;
  }
}
#top .p_parallax__img {
  position: absolute;
  inset: -22vh 0;
  background: url(../../images/top_parallax@2x.jpg) center/cover no-repeat;
  will-change: transform;
}
@media screen and (max-width: 768px) {
  #top .p_parallax__img {
    inset: -17vh 0;
  }
}
#top {
  /* ---- RECRUIT（採用情報）-------------------------------- */
}
#top .p_recruit {
  position: relative;
  border-radius: 5rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#104a6f), color-stop(43%, #59babf), to(#f5ffd3));
  background: linear-gradient(to bottom, #104a6f 0%, #59babf 43%, #f5ffd3 100%);
  padding: 7.7rem 0 49.5rem;
  color: #fff;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #top .p_recruit {
    border-radius: 3rem;
    padding: 4rem 0 10rem;
    background: -webkit-gradient(linear, left top, left bottom, from(#104a6f), color-stop(70%, #59babf), to(#f5ffd3));
    background: linear-gradient(to bottom, #104a6f 0%, #59babf 70%, #f5ffd3 100%);
  }
}
#top .p_recruit__photos {
  position: absolute;
  top: 7.7rem;
  right: 0;
  z-index: 0;
  width: 97.4rem;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__photos {
    top: 4rem;
    width: 25.8rem;
  }
}
#top .p_recruit__photos .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
#top .p_recruit__photos img {
  width: 100%;
  border-radius: 1rem;
}
#top .p_recruit__head {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#top .p_recruit__head .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__head .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0.3rem;
  }
}
#top .p_recruit__head .title .en {
  font-size: 2.5rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__head .title .en {
    font-size: 2rem;
  }
}
#top .p_recruit__head .title .ja {
  font-size: 1.8rem;
  font-weight: bold;
}
#top .p_recruit__head .catch {
  position: relative;
  z-index: 1;
  font-size: 14.4rem;
  font-weight: 600;
  line-height: 0.95;
  margin-top: 1rem;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__head .catch {
    font-size: 6rem;
    line-height: 1;
    margin-top: 0.5rem;
  }
}
#top .p_recruit {
  /* ---- 背景の輪っか（一筆書きアニメーション）------------------
     元は top_recruit_bg.png（手描き風の二重楕円）。PNG では線を
     描き込むアニメーションが掛けられないので、アルファに楕円を
     最小二乗フィットしてベクターに起こした（残差 平均0.5px）。
       内側 rx=589.1 ry=349.7 rot=-22.28deg
       外側 rx=621.2 ry=380.2 rot=-25.81deg （中心 711.35,601.70 / @2x）
     パスはどちらも長軸の左端から時計回り。内側・外側を同時に引く。

     箱の寸法は PNG 時代と同じ。SVG の既定 preserveAspectRatio は
     xMidYMid meet ＝ background-size: contain と同じ収まり方なので、
     SP の 30x30 でも見た目は変わらない。 */
}
#top .p_recruit__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 71.2rem;
  height: 60.2rem;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__ring {
    width: 30rem;
    height: 30rem;
  }
}
#top .p_recruit__ring path {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
#top .p_recruit__ring.is_drawn path {
  -webkit-animation: p_recruitRing 1.4s cubic-bezier(0.33, 0, 0.2, 1) forwards;
          animation: p_recruitRing 1.4s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  #top .p_recruit__ring path {
    stroke-dashoffset: 0;
    -webkit-animation: none;
            animation: none;
  }
}
#top .p_recruit__text {
  position: relative;
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2;
  margin-top: 6rem;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__text {
    font-size: 1.8rem;
    line-height: 1.9444444444;
    margin-top: 1.5rem;
  }
}
#top .p_recruit__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem 3.2rem;
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__links {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 2rem;
    margin-top: 2rem;
  }
}
#top .p_recruit__links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__links a {
    font-size: 1.4rem;
    line-height: 1.2;
    height: 100%;
  }
}
#top .p_recruit__links a:after {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3Cpath d='M8 12h8m-3.5-3.5L16 12l-3.5 3.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__links a:after {
    width: 1.8rem;
    height: 1.8rem;
  }
}
#top .p_recruit__btn {
  margin-top: 5rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #top .p_recruit__btn {
    margin-top: 3rem;
  }
  #top .p_recruit__btn .c_btn {
    width: 31.8rem;
    font-size: 1.8rem;
  }
}
#top {
  /* ---- NEWS（お知らせ）----------------------------------- */
}
#top .p_news {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 5rem 5rem 0 0;
  margin-top: -39.1rem;
  padding: 8.5rem 0 15rem;
}
@media screen and (max-width: 768px) {
  #top .p_news {
    border-radius: 3rem 3rem 0 0;
    margin-top: -6rem;
    padding: 4rem 0 9rem;
  }
}
#top .p_news__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6rem;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #top .p_news__title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0.2rem;
  }
}
#top .p_news__title .en {
  font-size: 5rem;
  font-weight: 600;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  #top .p_news__title .en {
    font-size: 4.5rem;
  }
}
#top .p_news__title .ja {
  font-size: 1.8rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #top .p_news__title .ja {
    line-height: 1.6666666667;
  }
}
#top .p_news__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.7rem;
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  #top .p_news__list {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 1rem;
  }
}
#top .p_news__btn {
  margin-top: 5.5rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #top .p_news__btn {
    margin-top: 3rem;
  }
  #top .p_news__btn .c_btn {
    width: 31.8rem;
    font-size: 1.8rem;
  }
}

@-webkit-keyframes p_mvZoom {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
  }
}

@keyframes p_mvZoom {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
  }
}
/* RECRUIT の輪っかを一筆書きで描く（pathLength="1" 前提）*/
@-webkit-keyframes p_recruitRing {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes p_recruitRing {
  to {
    stroke-dashoffset: 0;
  }
}
#about .p_philosophy {
  background: #154a6f;
  padding: 9rem 0;
}
@media screen and (max-width: 768px) {
  #about .p_philosophy {
    padding: 4rem 0;
  }
}
#about .p_philosophy__text1 {
  text-align: center;
  color: white;
  font-size: 3rem;
  line-height: 1.9;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #about .p_philosophy__text1 {
    font-size: 2rem;
  }
}
#about .p_philosophy__text1 > span {
  display: inline-block;
  padding: 1rem 2rem;
  border: 1px solid white;
  margin: 0 1rem;
}
@media screen and (max-width: 768px) {
  #about .p_philosophy__text1 > span {
    margin: 0.5rem 1rem 0.5rem 0;
    padding: 0.5rem;
  }
}
#about .p_philosophy__text2 {
  text-align: center;
  color: white;
  font-size: 1.5rem;
  line-height: 2;
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  #about .p_philosophy__text2 {
    margin-top: 1.5rem;
  }
}
#about .p_greet {
  padding: 8rem 0 7rem;
}
@media screen and (max-width: 768px) {
  #about .p_greet {
    padding: 3rem 0 6rem;
  }
}
#about .p_greet__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 3.5rem;
}
#about .p_greet__flex .image {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #about .p_greet__flex .image {
    margin-bottom: 3rem;
  }
}
#about .p_greet__flex .image img {
  border-radius: 3rem;
  width: 41.6rem;
}
#about .p_greet__flex .textarea .title {
  font-size: 4rem;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
  #about .p_greet__flex .textarea .title {
    font-size: 2rem;
  }
}
#about .p_greet__flex .textarea .text {
  font-size: 1.5rem;
  line-height: 2;
}
#about .p_greet__flex .textarea .name {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: right;
  margin-top: 1rem;
}
#about {
  /* ---- 会社沿革 ------------------------------------------- */
}
#about .p_history {
  padding-bottom: 12rem;
}
@media screen and (max-width: 768px) {
  #about .p_history {
    padding-bottom: 8rem;
  }
}
#about .p_history__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5.1rem;
}
@media screen and (max-width: 768px) {
  #about .p_history__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
}
#about .p_history__flex .image {
  width: 56.2rem;
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
  position: sticky;
  top: calc(var(--hdr_height) + 4rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 9rem;
  border: 1px solid #154a6f;
  border-radius: 0 3rem 3rem 0;
}
#about .p_history__flex .image img {
  width: 33rem;
}
#about .p_history__flex .body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  #about .p_history__flex .body {
    padding: 0 3.6rem;
  }
}
#about .p_history .era {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.1rem;
}
@media screen and (max-width: 768px) {
  #about .p_history .era {
    gap: 1.2rem;
  }
}
#about .p_history .era + .era {
  margin-top: 2.9rem;
}
@media screen and (max-width: 768px) {
  #about .p_history .era + .era {
    margin-top: 2rem;
  }
}
#about .p_history .era + .era .items:before {
  top: -3rem;
}
#about .p_history .era .name {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 5.5rem;
  min-height: 12.4rem;
  border-radius: 100vh;
  background: #154a6f;
  color: #fff;
  font-size: 3rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #about .p_history .era .name {
    width: 3.3rem;
    font-size: 2rem;
    min-height: auto;
  }
}
#about .p_history .era .items {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3.5rem;
}
@media screen and (max-width: 768px) {
  #about .p_history .era .items {
    gap: 1.5rem;
  }
}
#about .p_history .era .items:before {
  content: "";
  position: absolute;
  left: 5.3rem;
  top: 0rem;
  bottom: 0;
  width: 2px;
  background: #154a6f;
}
@media screen and (max-width: 768px) {
  #about .p_history .era .items:before {
    display: none;
  }
}
#about .p_history .era .items li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem 2.3rem;
}
@media screen and (max-width: 768px) {
  #about .p_history .era .items li {
    gap: 1rem;
    min-height: 0;
    grid-template-columns: 1fr;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0.5rem;
  }
  #about .p_history .era .items li + li {
    margin-top: 1.6rem;
  }
}
#about .p_history .era .items .year {
  position: relative;
  z-index: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 10.6rem;
  height: 2.6rem;
  border: 1px solid #154a6f;
  border-radius: 100vh;
  background: #fff;
  color: #154a6f;
  font-size: 2rem;
  font-weight: 600;
}
#about .p_history .era .items .text {
  font-size: 1.5rem;
  line-height: 1.6666666667;
  padding-top: 0.1rem;
}
#about .p_history .era .items li._em .text {
  font-weight: bold;
}
#about .p_history .era .items li._plan .year {
  color: #9fb3c2;
  border-color: #9fb3c2;
}
#about .p_history .era .items li._plan .text {
  color: #a5a5a5;
}
#about .p_history .era .items .photo {
  grid-column: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media screen and (max-width: 768px) {
  #about .p_history .era .items .photo {
    grid-column: 1;
  }
}
#about .p_history .era .items .photo img {
  border-radius: 3rem;
  width: 33rem;
}
#about {
  /* ---- 会社概要 ------------------------------------------- */
}
#about .p_company {
  padding-bottom: 12rem;
}
@media screen and (max-width: 768px) {
  #about .p_company {
    padding-bottom: 5rem;
  }
}
#about .p_company .c_inner {
  max-width: 90.4rem;
}
#about .p_company__table dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  padding: 2.4rem 0;
  font-size: 1.5rem;
  line-height: 1.6666666667;
  border-top: 1px solid #e5e5e5;
  position: relative;
}
#about .p_company__table dl:last-child {
  border-bottom: 1px solid #e5e5e5;
}
#about .p_company__table dl:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 11.2rem;
  height: 3px;
  background: #154a6f;
  border-radius: 100vh;
}
@media screen and (max-width: 768px) {
  #about .p_company__table dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.2rem;
    padding: 1.6rem 0;
    font-size: 1.5rem;
    line-height: 2.0666666667;
  }
}
#about .p_company__table dl dt {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20.5rem;
  font-weight: bold;
  position: relative;
}
@media screen and (max-width: 768px) {
  #about .p_company__table dl dt {
    width: auto;
  }
}
#about {
  /* ---- 事業所所在地 --------------------------------------- */
}
#about .p_access {
  background: #f0f3f5;
  padding: 8rem 0 12rem;
}
@media screen and (max-width: 768px) {
  #about .p_access {
    padding: 6rem 0 10rem;
  }
}
#about .p_access__head {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  padding: 5rem 3.4rem 3.4rem;
  border: 1px solid #154a6f;
}
@media screen and (max-width: 768px) {
  #about .p_access__head {
    padding: 5.5rem 1.5rem 1.5rem;
  }
}
#about .p_access__head .label {
  position: absolute;
  left: -1px;
  top: -1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 8.9rem;
  height: 3.9rem;
  border-radius: 1rem 0;
  background: #154a6f;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #about .p_access__head .label {
    width: calc(100% + 2px);
    border-radius: 1rem 1rem 0 0;
  }
}
#about .p_access__head .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3.2rem;
}
@media screen and (max-width: 768px) {
  #about .p_access__head .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.5rem;
  }
}
#about .p_access__head .textarea {
  width: 44.4rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #about .p_access__head .textarea {
    width: auto;
  }
}
#about .p_access__head .addr {
  font-size: 1.5rem;
  line-height: 1.6666666667;
}
@media screen and (max-width: 768px) {
  #about .p_access__head .addr {
    font-size: 1.5rem;
  }
}
#about .p_access__head .photo {
  margin-top: 1.8rem;
}
@media screen and (max-width: 768px) {
  #about .p_access__head .photo {
    margin-top: 1rem;
  }
}
#about .p_access__head .photo img {
  width: 100%;
  aspect-ratio: 444/264;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#about .p_access__head .map {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
#about .p_access__head .map iframe {
  width: 100%;
  height: 100%;
  min-height: 30rem;
  display: block;
  border: 0;
}
@media screen and (max-width: 768px) {
  #about .p_access__head .map iframe {
    min-height: 22rem;
  }
}
#about .p_access__list {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media screen and (max-width: 768px) {
  #about .p_access__list {
    margin-top: 2.5rem;
  }
}
#about .p_access__list .group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #about .p_access__list .group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#about .p_access__list .branch {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 16.2rem;
  background: #154a6f;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #about .p_access__list .branch {
    width: auto;
    padding: 1rem;
    font-size: 1.8rem;
  }
}
#about .p_access__list .rows {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
#about .p_access__list .row {
  display: grid;
  grid-template-columns: 21rem 1fr 15rem 18rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  padding: 1.2rem 0 1.2rem 2rem;
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  #about .p_access__list .row {
    padding: 1rem 1.4rem;
    grid-template-columns: 1fr;
    gap: 0.2rem 1rem;
    font-size: 1.5rem;
  }
}
#about .p_access__list .row {
  /* 列の区切り線。
     XD ではセルが1枚ずつ #154a6f の枠を持つ矩形で組まれているので、
     色は薄いグレーではなく**紺**。線はセルの上下いっぱいまで伸びる。
     そのため行の上下パディングは各セルへ移し、セルを行の高さまで
     伸ばす（align-items: stretch）。
     ★ 住所と GoogleMAP の間には線が無い（XD では1つのセルの中）。 */
}
@media screen and (min-width: 769px) {
  #about .p_access__list .row {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
  }
  #about .p_access__list .row > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  #about .p_access__list .row > * + * {
    border-left: 1px solid #154a6f;
    padding-left: 2rem;
    margin-left: -1rem;
  }
  #about .p_access__list .row .map {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
}
#about .p_access__list .row + .row {
  border-top: 1px solid #154a6f;
}
#about .p_access__list .row .name {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  #about .p_access__list .row .name {
    font-size: 1.8rem;
    line-height: 1.7222222222;
  }
}
#about .p_access__list .row .addr {
  line-height: 1.6666666667;
}
@media screen and (max-width: 768px) {
  #about .p_access__list .row .map {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin-top: 1rem;
  }
}
#about .p_access__list .row .map a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 3.2rem;
  border-radius: 100vh;
  background: #89b3d0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #about .p_access__list .row .map a {
    font-size: 1.5rem;
    padding: 0 1.2rem;
    width: 12.4rem;
  }
}
#about .p_access__list .row .tel {
  line-height: 1.6666666667;
  padding-right: 2rem;
}
@media screen and (max-width: 768px) {
  #about .p_access__list .row .tel {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 769px) {
  #about .p_access__list .row:not(:has(.name)) .addr {
    grid-column: 1/3;
  }
}
#about {
  /* ---- 取引先一覧 ----------------------------------------- */
}
#about .p_partner {
  background: #f0f3f5;
  padding-bottom: 12rem;
}
@media screen and (max-width: 768px) {
  #about .p_partner {
    padding-bottom: 5rem;
  }
}
#about .p_partner__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem 4.8rem;
  background: #fff;
  border-radius: 1rem;
  padding: 4rem 3.6rem;
}
@media screen and (max-width: 768px) {
  #about .p_partner__list {
    grid-template-columns: 1fr;
    gap: 1rem 2rem;
    padding: 2rem 1.5rem;
  }
}
#about .p_partner__list li {
  padding-bottom: 1rem;
  border-bottom: 1px solid #154a6f;
  font-size: 1.5rem;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  #about .p_partner__list li {
    font-size: 1.2rem;
  }
}
#about {
  /* ---- 関連会社 ------------------------------------------- */
}
#about .p_group {
  background: #f0f3f5;
  padding-bottom: 25rem;
}
@media screen and (max-width: 768px) {
  #about .p_group {
    padding-bottom: 9rem;
  }
}
#about .p_group__box {
  background: #fff;
  border-radius: 1rem;
  padding: 3.5rem 3.9rem 6rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #about .p_group__box {
    padding: 2.5rem 1.5rem 3rem;
  }
}
#about .p_group__box .logo img {
  width: 39rem;
  padding: 3rem 0;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
@media screen and (max-width: 768px) {
  #about .p_group__box .logo img {
    width: 23.1rem;
    padding: 1.8rem 0;
  }
}
#about .p_group__box .text {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2;
  margin-top: 0rem;
}
@media screen and (max-width: 768px) {
  #about .p_group__box .text {
    font-size: 1.5rem;
    line-height: 2;
  }
}
#about .p_group__box .devider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  margin-top: 4rem;
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #about .p_group__box .devider {
    font-size: 2rem;
    gap: 1rem;
    margin-top: 3rem;
  }
}
#about .p_group__box .devider:before, #about .p_group__box .devider:after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 1px;
  background: #154a6f;
}
#about .p_group__box .hdlogo {
  margin-top: 1.5rem;
}
#about .p_group__box .hdlogo img {
  width: 43.9rem;
}
@media screen and (max-width: 768px) {
  #about .p_group__box .hdlogo img {
    width: 30rem;
  }
}
#about .p_group__box .hdname {
  font-size: 2.4rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #about .p_group__box .hdname {
    font-size: 1.8rem;
  }
}
#about .p_group__box .companies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1.7rem;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  #about .p_group__box .companies {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
  }
}
#about .p_group__box .companies li img {
  width: 100%;
}

/* ============================================================
  service — 取扱工事ページ専用スタイル
  ------------------------------------------------------------
  ・MV は c_mv を流用し、about との差分（リード文・写真の出方）だけここで上書き。
  ・p_svcmap は PC のみ絶対配置。座標は XD（1366幅）の実測値をそのまま
    rem にしている（html の font-size が 100vw/1366×10 なので 1px = .1rem）。
  ・SP は輪っかを消して縦1列。円と円のつなぎは擬似要素の SVG。
============================================================ */
#service {
  position: relative;
  z-index: 11;
}
#service .c_mv .lead {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.8;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  #service .c_mv .lead {
    font-size: 1.8rem;
    line-height: 1.6666666667;
    margin-top: 2rem;
  }
}
#service .c_mv .lead + .lead {
  margin-top: 1.8rem;
}
#service .p_bigbg {
  background: url(../../images/service_bg@2x.png) top 16.6rem center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f3f5));
  background: url(../../images/service_bg@2x.png) top 16.6rem center no-repeat, linear-gradient(#fff 0%, #f0f3f5 100%);
  background-size: 100%, 100%;
}
#service {
  /* ---- 5工事の相関図 ------------------------------------- */
}
#service .p_svcmap {
  position: relative;
  height: 91rem;
}
@media screen and (max-width: 768px) {
  #service .p_svcmap {
    height: auto;
  }
}
#service .p_svcmap__ring, #service .p_svcmap__dots {
  position: absolute;
  left: 22.3rem;
  top: 9.6rem;
  width: 92.4rem;
  height: 63.9rem;
  pointer-events: none;
}
#service .p_svcmap__dots {
  z-index: 10;
}
#service .p_svcmap__title {
  position: absolute;
  left: 69.7rem;
  top: 33.6rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  #service .p_svcmap__title {
    position: static;
    -webkit-transform: none;
            transform: none;
    font-size: 2.5rem;
    line-height: 1.28;
    margin-top: 3rem;
  }
}
#service .p_svcmap__city {
  position: absolute;
  left: 30.5rem;
  top: 46.6rem;
  width: 76.3rem;
}
@media screen and (max-width: 768px) {
  #service .p_svcmap__city {
    position: static;
    width: 100%;
    margin-top: 1rem;
    overflow: hidden;
    text-align: center;
  }
}
#service .p_svcmap__city img {
  width: 100%;
}
#service .p_svcmap__list {
  position: relative;
  z-index: 9;
}
@media screen and (max-width: 768px) {
  #service .p_svcmap__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 3.5rem;
  }
}
#service .p_svcmap__list .item {
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: #fdfdfd;
  -webkit-box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
          box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding-top: 2.2rem;
}
@media screen and (max-width: 768px) {
  #service .p_svcmap__list .item {
    position: relative;
    left: auto !important;
    top: auto !important;
  }
}
#service .p_svcmap__list .item + .item:before {
  content: "";
  display: none;
  position: absolute;
  left: 50%;
  top: -4.4rem;
  margin-left: -0.75rem;
  width: 1.5rem;
  height: 5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 50'%3E%3Cpath d='M7.5 5v40' stroke='%237ACACA' stroke-width='5'/%3E%3Ccircle cx='7.5' cy='7.5' r='6' fill='%23fff' stroke='%237ACACA' stroke-width='3'/%3E%3Ccircle cx='7.5' cy='42.5' r='6' fill='%23fff' stroke='%237ACACA' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  #service .p_svcmap__list .item + .item:before {
    display: block;
  }
}
#service .p_svcmap__list .item._equipment {
  left: 54.3rem;
  top: 0;
}
#service .p_svcmap__list .item._sash {
  left: 94.7rem;
  top: 18.6rem;
}
#service .p_svcmap__list .item._wall {
  left: 76.3rem;
  top: 54.1rem;
}
#service .p_svcmap__list .item._exterior {
  left: 32.3rem;
  top: 54.1rem;
}
#service .p_svcmap__list .item._solar {
  left: 13.9rem;
  top: 18.6rem;
}
#service .p_svcmap__list .item .ico {
  height: 9.7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#service .p_svcmap__list .item .ico img {
  max-height: 100%;
  width: auto;
}
#service .p_svcmap__list .item .name {
  font-size: 2.2rem;
  font-weight: bold;
  color: #154a6f;
  line-height: 1.4;
  margin-top: 0.8rem;
}
#service .p_svcmap__list .item .desc {
  font-size: 1.5rem;
  line-height: 1.6666666667;
  margin-top: 0.4rem;
}
#service .p_svcmap__list .item .c_btnC {
  margin-top: 1.3rem;
}
#service {
  /* ---- 工事ごとの詳細 ------------------------------------- */
}
#service .p_svcdetail {
  position: relative;
  padding-bottom: 5.5rem;
}
#service .p_svcdetail__band {
  height: 45.4rem;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #service .p_svcdetail__band {
    height: 16.5rem;
  }
}
#service .p_svcdetail__band img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#service .p_svcdetail__band._split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#service .p_svcdetail__band._split img {
  width: 33.334%;
}
#service .p_svcdetail__inner {
  position: relative;
  width: 123.8rem;
  max-width: calc(100% - 12.8rem);
  margin: -13.9rem auto 0;
}
@media screen and (max-width: 768px) {
  #service .p_svcdetail__inner {
    width: 36.5rem;
    max-width: calc(100% - 2.5rem);
    margin-top: -4rem;
  }
}
#service .p_svcdetail__inner .en {
  position: absolute;
  left: 0.5rem;
  top: -8rem;
  font-size: 10rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  #service .p_svcdetail__inner .en {
    left: 0.2rem;
    top: -2.5rem;
    font-size: 3rem;
  }
}
#service .p_svcdetail__inner .card {
  position: relative;
  background: #fff;
  border-radius: 3rem;
  padding: 4rem 7.5rem 4.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 5.4rem;
}
@media screen and (max-width: 768px) {
  #service .p_svcdetail__inner .card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 2rem 0;
    border-radius: 2rem;
  }
}
#service .p_svcdetail__inner .card .textarea {
  width: 53.6rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #service .p_svcdetail__inner .card .textarea {
    width: auto;
  }
}
#service .p_svcdetail__inner .card .textarea .title {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.2666666667;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid #154a6f;
}
@media screen and (max-width: 768px) {
  #service .p_svcdetail__inner .card .textarea .title {
    font-size: 2.5rem;
    line-height: 1.28;
    padding-bottom: 1rem;
  }
}
#service .p_svcdetail__inner .card .textarea .text {
  font-size: 1.8rem;
  line-height: 1.6666666667;
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  #service .p_svcdetail__inner .card .textarea .text {
    font-size: 1.5rem;
    line-height: 2;
    margin-top: 1.5rem;
  }
}
#service .p_svcdetail__inner .card .c_slider {
  width: 49.8rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #service .p_svcdetail__inner .card .c_slider {
    width: auto;
  }
}
#service .p_svcdetail__inner .card .c_slider .swiper {
  border-radius: 1.5rem;
}
#service .p_svcdetail__inner .card .c_slider img {
  width: 100%;
  aspect-ratio: 498/327;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ============================================================
  contact — お問い合わせ（入力／内容確認）
  ------------------------------------------------------------
  フォームの見た目は component/c_form が持つ。ここは
  「電話・FAXの案内ブロック」などページ固有のものだけ。
  エントリーフォーム（#entry）でも同じ構造を使う。
============================================================ */
#contact .c_mv._plain .title .en,
#contact .c_mv._plain .title .ja,
#entry .c_mv._plain .title .en,
#entry .c_mv._plain .title .ja {
  color: #fff;
}
#contact,
#entry {
  /* ---- お問い合わせ（一般・協力業者）はグレー地 ------------------
    XD「お問い合わせ」実測 #F0F3F5。見出し・ステップは紺（2026-09-14 指示
    「背景の色が違う（内容確認とサンクスも同様）」。サンクスは _thanks.scss）。
    エントリーは採用系なのでグラデーションのまま。 */
}
#contact .p_contact,
#contact .p_entry,
#entry .p_contact,
#entry .p_entry {
  padding-bottom: 8rem;
}
@media screen and (max-width: 768px) {
  #contact .p_contact,
  #contact .p_entry,
  #entry .p_contact,
  #entry .p_entry {
    padding-bottom: 4rem;
  }
}
#contact .p_contact .c_inner,
#contact .p_entry .c_inner,
#entry .p_contact .c_inner,
#entry .p_entry .c_inner {
  width: calc(100% - 4rem);
}
#contact,
#entry {
  /* ---- 電話・FAX の案内 ---------------------------------- */
}
#contact .p_contact__tel,
#entry .p_contact__tel {
  text-align: center;
  margin-bottom: 4.4rem;
}
@media screen and (max-width: 768px) {
  #contact .p_contact__tel,
  #entry .p_contact__tel {
    margin-bottom: 3rem;
  }
}
#contact .p_contact__tel .title,
#entry .p_contact__tel .title {
  font-size: 2rem;
  font-weight: bold;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #contact .p_contact__tel .title,
  #entry .p_contact__tel .title {
    font-size: 1.7rem;
    line-height: 1.5;
  }
}
#contact .p_contact__tel .time,
#entry .p_contact__tel .time {
  font-size: 1.5rem;
  color: #154a6f;
  margin-top: 0.8rem;
}
@media screen and (max-width: 768px) {
  #contact .p_contact__tel .time,
  #entry .p_contact__tel .time {
    font-size: 1.3rem;
  }
}
#contact .p_contact__tel .box,
#entry .p_contact__tel .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 2.2rem;
  padding: 2.2rem 0 2.8rem;
  background: #154a6f;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  #contact .p_contact__tel .box,
  #entry .p_contact__tel .box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
    padding: 2rem 1.5rem;
  }
}
#contact .p_contact__tel .box .col,
#entry .p_contact__tel .box .col {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#contact .p_contact__tel .box .cap,
#entry .p_contact__tel .box .cap {
  color: #fff;
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  #contact .p_contact__tel .box .cap,
  #entry .p_contact__tel .box .cap {
    font-size: 1.3rem;
  }
}
#contact .p_contact__tel .box .num,
#entry .p_contact__tel .box .num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.2rem;
  width: 31.7rem;
  max-width: 100%;
  height: 6.7rem;
  margin: 1.4rem auto 0;
  border-radius: 100vh;
  background: #fff;
  color: #154a6f;
  font-family: "Oswald", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  #contact .p_contact__tel .box .num,
  #entry .p_contact__tel .box .num {
    height: 5.4rem;
    font-size: 2.8rem;
  }
}
#contact .p_contact__tel .box .num img,
#entry .p_contact__tel .box .num img {
  width: 2.6rem;
}

#contact {
  background: #f0f3f5;
}
#contact .c_mv._plain .title .en,
#contact .c_mv._plain .title .ja {
  color: #154a6f;
}
#contact .c_step li {
  color: #154a6f;
}
#contact .c_step li + li:before {
  background: #154a6f;
}
#contact .c_step li .num {
  border-color: #154a6f;
}
#contact .c_step li.is_current .num, #contact .c_step li.is_done .num {
  background: #154a6f;
  color: #fff;
}

/* ============================================================
  thanks — 送信完了（お問い合わせ／エントリー 共通）
  ------------------------------------------------------------
  紺一色の帯に、白い1px罫線の枠を1つ入れるだけ。画像は使わない。
============================================================ */
#thanks._navy .c_bigbg {
  display: none;
}
#thanks._navy .p_thanks {
  background: #154a6f;
}
#thanks .p_thanks {
  padding: 2.5rem;
}
@media screen and (max-width: 768px) {
  #thanks .p_thanks {
    padding: 1.5rem;
  }
}
#thanks .p_thanks__box {
  border: 1px solid #fff;
  padding: 20.3rem 2rem;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #thanks .p_thanks__box {
    padding: 6rem 2rem;
  }
}
#thanks .p_thanks__box .en {
  font-size: 10rem;
  font-weight: 600;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  #thanks .p_thanks__box .en {
    font-size: 4.4rem;
  }
}
#thanks .p_thanks__box .title {
  font-size: 4rem;
  font-weight: bold;
  margin-top: 1.4rem;
}
@media screen and (max-width: 768px) {
  #thanks .p_thanks__box .title {
    font-size: 2rem;
    line-height: 1.5;
  }
}
#thanks .p_thanks__box .text {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.75;
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  #thanks .p_thanks__box .text {
    font-size: 1.4rem;
    line-height: 1.8;
  }
}
#thanks .p_thanks__box .btn {
  margin-top: 3.5rem;
}
@media screen and (max-width: 768px) {
  #thanks .p_thanks__box .btn {
    margin-top: 2.5rem;
  }
}

/* ============================================================
  privacy — 個人情報保護方針
  ------------------------------------------------------------
  背景は白。条文は1条＝1 .item で、上に細い区切り線を引く。
============================================================ */
#privacy .p_privacy {
  padding-bottom: 26rem;
}
@media screen and (max-width: 768px) {
  #privacy .p_privacy {
    padding-bottom: 10rem;
  }
}
#privacy .p_privacy__lead {
  font-size: 1.5rem;
  line-height: 1.6666666667;
}
@media screen and (max-width: 768px) {
  #privacy .p_privacy__lead {
    font-size: 1.4rem;
  }
}
#privacy .p_privacy .item {
  margin-top: 4.9rem;
  padding-top: 4.9rem;
  border-top: 1px solid #e5e5e5;
}
@media screen and (max-width: 768px) {
  #privacy .p_privacy .item {
    margin-top: 3rem;
    padding-top: 3rem;
  }
}
#privacy .p_privacy .item .title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.25;
}
@media screen and (max-width: 768px) {
  #privacy .p_privacy .item .title {
    font-size: 1.7rem;
  }
}
#privacy .p_privacy .item .text {
  font-size: 1.5rem;
  line-height: 1.6666666667;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  #privacy .p_privacy .item .text {
    font-size: 1.4rem;
  }
}
#privacy .p_privacy .item .text a {
  color: #154a6f;
  text-decoration: underline;
  word-break: break-all;
}

/* ============================================================
  sitemap — サイトマップ
  ------------------------------------------------------------
  白いカードの中に、カテゴリごとの列を横並び。SP は2列に落とす。
============================================================ */
#sitemap .p_sitemap {
  position: relative;
  z-index: 5;
  padding-bottom: 12rem;
}
@media screen and (max-width: 768px) {
  #sitemap .p_sitemap {
    padding-bottom: 6rem;
  }
}
#sitemap .p_sitemap__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 4rem 5.4rem;
  background: #fff;
  border-radius: 3rem;
  padding: 6.3rem 6.3rem 7rem;
}
@media screen and (max-width: 768px) {
  #sitemap .p_sitemap__box {
    gap: 2.5rem 3rem;
    padding: 3rem 2rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (min-width: 769px) {
  #sitemap .p_sitemap__box dl {
    white-space: nowrap;
  }
}
#sitemap .p_sitemap__box dl dt {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  #sitemap .p_sitemap__box dl dt {
    font-size: 1.6rem;
  }
}
#sitemap .p_sitemap__box dl dt + dt {
  margin-top: 1.5rem;
}
#sitemap .p_sitemap__box dl dt a {
  color: #154a6f;
}
#sitemap .p_sitemap__box dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  #sitemap .p_sitemap__box dl dd {
    font-size: 1.3rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
#sitemap .p_sitemap__box dl dd a {
  color: #7e7e7e;
  line-height: 1.2;
}
@media (any-hover: hover) {
  #sitemap .p_sitemap__box a:hover {
    color: #59afeb;
    opacity: 1;
  }
}

/* ============================================================
  news — お知らせ（一覧／詳細）
  ------------------------------------------------------------
  カード自体は component/c_card。ここは並べ方と、絞り込み・
  詳細の2カラムだけ。
============================================================ */
#news {
  background: url(../../images/news_bg@2x.png) top center no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  #news {
    background-size: 200%;
  }
}
#news {
  /* ---- 一覧 ------------------------------------------------ */
}
#news .p_news {
  padding-bottom: 16rem;
}
@media screen and (max-width: 768px) {
  #news .p_news {
    padding-bottom: 10rem;
  }
}
#news .p_news__filter .title {
  font-size: 2rem;
  font-weight: bold;
  color: #154a6f;
  padding-bottom: 1rem;
  border-bottom: 1px solid #154a6f;
}
@media screen and (max-width: 768px) {
  #news .p_news__filter .title {
    font-size: 1.7rem;
  }
}
#news .p_news__filter .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.7rem;
}
@media screen and (max-width: 768px) {
  #news .p_news__filter .list {
    gap: 1rem;
  }
}
#news .p_news__filter .list a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.8rem;
  padding: 0 1.5rem;
  border: 1px solid #154a6f;
  border-radius: 100vh;
  font-size: 1.2rem;
  font-weight: bold;
  color: #154a6f;
}
#news .p_news__filter .list a.is_current {
  background: #154a6f;
  color: #fff;
}
@media (any-hover: hover) {
  #news .p_news__filter .list a:hover {
    background: #154a6f;
    color: #fff;
    opacity: 1;
  }
}
#news .p_news__count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2rem;
  margin-top: 6.5rem;
  font-size: 2rem;
  font-weight: bold;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #news .p_news__count {
    margin-top: 3rem;
    font-size: 1.7rem;
  }
}
#news .p_news__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6.4rem 2.7rem;
  margin-top: 1.8rem;
}
@media screen and (max-width: 768px) {
  #news .p_news__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
  }
}
#news {
  /* ---- 詳細 ------------------------------------------------ */
}
#news .p_newsdetail {
  padding-bottom: 16rem;
}
@media screen and (max-width: 768px) {
  #news .p_newsdetail {
    padding-bottom: 10rem;
  }
}
#news .p_newsdetail__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 6rem;
}
@media screen and (max-width: 768px) {
  #news .p_newsdetail__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 5rem;
  }
}
#news .p_newsdetail .main {
  width: 68.2rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #news .p_newsdetail .main {
    width: auto;
  }
}
#news .p_newsdetail .main .cat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #154a6f;
}
#news .p_newsdetail .main .title {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin-top: 0.6rem;
}
@media screen and (max-width: 768px) {
  #news .p_newsdetail .main .title {
    font-size: 2rem;
  }
}
#news .p_newsdetail .main .date {
  font-size: 1.5rem;
  font-weight: bold;
  color: #c7c7c7;
  margin-top: 0.6rem;
}
#news .p_newsdetail .main .eyecatch {
  margin-top: 2rem;
}
#news .p_newsdetail .main .eyecatch img {
  width: 100%;
  aspect-ratio: 682/401;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#news .p_newsdetail .main .c_wysywig {
  margin-top: 2.7rem;
}
#news .p_newsdetail .main .back {
  margin-top: 8rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #news .p_newsdetail .main .back {
    margin-top: 4rem;
  }
}
#news .p_newsdetail .side {
  width: 34.4rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #news .p_newsdetail .side {
    width: auto;
  }
}
#news .p_newsdetail .side .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 4.1rem;
  padding: 0 1.2rem;
  background: #154a6f;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 0.5rem;
}
#news .p_newsdetail .side .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3.6rem;
  margin-top: 2.1rem;
}
@media screen and (max-width: 768px) {
  #news .p_newsdetail .side .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
  }
}

/* ============================================================
  recruit — 採用情報ページ専用スタイル
  ------------------------------------------------------------
  ・配色はコーポレートの紺ではなく、採用系のグラデ
    （#104A6F → #59BABF 43% → #F5FFD3）が基調。
  ・アニメーションは「止まっても読める」ことを優先。
    keyframes は prefers-reduced-motion で全部止める（末尾）。
  ・座標は XD（1366幅）実測。1px = .1rem。
============================================================ */
#recruit {
  background: #fff;
  overflow-x: clip;
  /* ---- FV --------------------------------------------------- */
}
#recruit .p_rec_fv {
  position: sticky;
  top: calc(var(--hdr_height));
  overflow: hidden;
  color: #fff;
}
#recruit .p_rec_fv .c_pankuzu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  color: #fff;
}
#recruit .p_rec_fv .c_pankuzu a {
  color: #fff;
}
#recruit .p_rec_fv__bg img {
  width: 100%;
}
#recruit .p_rec_fv__veil {
  display: none;
}
@media screen and (min-width: 769px) {
  #recruit .p_rec_fv__veil {
    display: block;
    position: absolute;
    left: 44.8rem;
    top: 34.9rem;
    width: 95rem;
    height: 57.3rem;
    border-radius: 50%;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(-24deg);
            transform: rotate(-24deg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    pointer-events: none;
  }
}
#recruit .p_rec_fv__person {
  position: absolute;
  left: 18rem;
  bottom: 0rem;
  width: 162rem;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__person {
    right: auto;
    left: 0;
    bottom: 7rem;
    width: 100%;
    text-align: right;
    padding-bottom: 1rem;
  }
}
#recruit .p_rec_fv__person img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__person img {
    width: 27rem;
  }
}
#recruit .p_rec_fv__person .swiper-wrapper {
  -webkit-transition-timing-function: cubic-bezier(0.18, 0.93, 0.91, 1);
          transition-timing-function: cubic-bezier(0.18, 0.93, 0.91, 1);
}
#recruit .p_rec_fv__person .swiper-slide img {
  opacity: 0;
  -webkit-transition: opacity 3s cubic-bezier(0.18, 0.93, 0.91, 1), -webkit-transform 3s cubic-bezier(0.18, 0.93, 0.91, 1);
  transition: opacity 3s cubic-bezier(0.18, 0.93, 0.91, 1), -webkit-transform 3s cubic-bezier(0.18, 0.93, 0.91, 1);
  transition: opacity 3s cubic-bezier(0.18, 0.93, 0.91, 1), transform 3s cubic-bezier(0.18, 0.93, 0.91, 1);
  transition: opacity 3s cubic-bezier(0.18, 0.93, 0.91, 1), transform 3s cubic-bezier(0.18, 0.93, 0.91, 1), -webkit-transform 3s cubic-bezier(0.18, 0.93, 0.91, 1);
}
#recruit .p_rec_fv__person .swiper-slide-prev img {
  -webkit-transition: opacity 0.6s cubic-bezier(0.18, 0.93, 0.91, 1), -webkit-transform 3s cubic-bezier(0.18, 0.93, 0.91, 1);
  transition: opacity 0.6s cubic-bezier(0.18, 0.93, 0.91, 1), -webkit-transform 3s cubic-bezier(0.18, 0.93, 0.91, 1);
  transition: opacity 0.6s cubic-bezier(0.18, 0.93, 0.91, 1), transform 3s cubic-bezier(0.18, 0.93, 0.91, 1);
  transition: opacity 0.6s cubic-bezier(0.18, 0.93, 0.91, 1), transform 3s cubic-bezier(0.18, 0.93, 0.91, 1), -webkit-transform 3s cubic-bezier(0.18, 0.93, 0.91, 1);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#recruit .p_rec_fv__person .swiper-slide-active img {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  opacity: 1;
}
#recruit .p_rec_fv__person .swiper-slide-next img {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#recruit .p_rec_fv__side {
  position: absolute;
  left: 8.2rem;
  top: 3.9rem;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__side {
    z-index: 3;
  }
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__side {
    top: 5rem;
    left: 2rem;
  }
}
#recruit .p_rec_fv__side img {
  width: 70.9rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__side img {
    width: 32.8rem;
  }
}
#recruit .p_rec_fv__catch {
  position: absolute;
  left: 8.2rem;
  top: 30.6rem;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__catch {
    left: 1.5rem;
    top: 11rem;
  }
}
#recruit .p_rec_fv__catch .ja {
  display: block;
  margin-top: 2rem;
  font-size: 7.6rem;
  line-height: 1.05;
  text-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__catch .ja {
    font-size: 4.2rem;
    line-height: 1.1;
    margin-top: 0;
  }
}
#recruit .p_rec_fv__catch .ja .line {
  display: block;
  -webkit-animation: rec_slideIn 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
          animation: rec_slideIn 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
#recruit .p_rec_fv__catch .ja .line:nth-child(2) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
#recruit .p_rec_fv__catch .ja b {
  font-size: 14rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__catch .ja b {
    font-size: 7.8rem;
  }
}
#recruit .p_rec_fv__catch .ja b.shadow {
  position: relative;
  color: #154a6f;
  margin-left: 0.5rem;
  display: inline-block;
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__catch .ja b.shadow {
    -webkit-transform: translateY(0.5rem);
            transform: translateY(0.5rem);
  }
}
#recruit .p_rec_fv__catch .ja b.shadow:before {
  content: "トキメク";
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-1rem, -1rem);
          transform: translate(-1rem, -1rem);
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__catch .ja .line:nth-child(2) b {
    display: block;
  }
}
#recruit .p_rec_fv__scroll {
  position: absolute;
  left: 3.9rem;
  bottom: 17.5rem;
  z-index: 3;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_fv__scroll {
    left: 2.2rem;
    bottom: auto;
    top: 36rem;
  }
}
#recruit .p_rec_fv__scroll:before, #recruit .p_rec_fv__scroll:after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 1.2rem);
}
#recruit .p_rec_fv__scroll:after {
  width: 1px;
  height: 8rem;
  margin-left: -0.05rem;
  background: #fff;
}
#recruit .p_rec_fv__scroll:before {
  width: 0.7rem;
  height: 0.7rem;
  margin-left: -0.35rem;
  border-radius: 50%;
  background: #fff;
  -webkit-animation: rec_scrollDot 1.6s ease-in-out infinite, rec_scrollDotFade 1.6s ease-out infinite;
          animation: rec_scrollDot 1.6s ease-in-out infinite, rec_scrollDotFade 1.6s ease-out infinite;
}
#recruit .p_bigbg {
  position: relative;
  overflow: hidden;
  margin-top: -3rem;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, white));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, white 50%);
}
@media screen and (max-width: 768px) {
  #recruit .p_bigbg {
    margin-top: 0;
    margin-bottom: -0.1rem;
  }
}
#recruit .p_bigbg:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 340rem;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0px -5px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0px -5px 6px rgba(0, 0, 0, 0.1);
  aspect-ratio: 1/1;
}
@media screen and (max-width: 768px) {
  #recruit .p_bigbg:before {
    width: 70.6rem;
  }
}
#recruit {
  /* ---- MESSAGE ---------------------------------------------- */
}
#recruit .p_rec_msg {
  position: relative;
  padding: 12rem 2rem 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_msg {
    padding: 6rem 2rem 0;
  }
}
#recruit .p_rec_msg__catch {
  position: relative;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_msg__catch {
    font-size: 2.2rem;
    line-height: 1.4545454545;
  }
}
#recruit .p_rec_msg__catch .mark {
  display: inline-block;
  padding: 2.5rem 3rem;
  border: 1px solid #b7d98a;
  margin-right: 2rem;
  line-height: 1;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_msg__catch .mark {
    padding: 1.4rem 2rem;
    margin: 2rem 0 1rem;
  }
}
#recruit .p_rec_msg__catch .mark img {
  width: 44.2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_msg__catch .mark img {
    width: 27.7rem;
  }
}
#recruit .p_rec_msg__catch .js-shake {
  -webkit-animation: rec_shake 2.6s ease-in-out 1.4s infinite;
          animation: rec_shake 2.6s ease-in-out 1.4s infinite;
}
#recruit {
  /* ---- 傾いた写真コラージュ ---------------------------------- */
}
#recruit .p_rec_slide {
  padding: 9rem 0 14rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-transform: rotate(-9deg);
          transform: rotate(-9deg);
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_slide {
    padding: 3rem 0 8rem;
  }
}
#recruit .p_rec_slide .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
#recruit .p_rec_slide .row + .row {
  margin-top: 1rem;
}
#recruit .p_rec_slide .row img {
  width: 34rem;
  height: 21rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
          box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_slide .row img {
    width: 20rem;
    height: 13rem;
  }
}
#recruit .p_rec_slide .js-recRowR {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
#recruit {
  /* ---- スクロールで濃くなるテキスト --------------------------- */
}
#recruit .p_rec_ink {
  padding: 0 2rem 0;
  text-align: center;
}
#recruit .p_rec_ink p {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 2;
  color: color-mix(in srgb, #484848 calc(var(--ink, 1) * 100%), #bcbcbc);
}
#recruit .p_rec_ink p + p {
  margin-top: 3.2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_ink p {
    font-size: 1.5rem;
    line-height: 1.6666666667;
  }
  #recruit .p_rec_ink p + p {
    margin-top: 2rem;
  }
}
#recruit {
  /* ---- 円形写真 → 拡大 --------------------------------------- */
}
#recruit .p_rec_zoom__wrap {
  height: 240rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_zoom__wrap {
    height: 110rem;
  }
}
#recruit .p_rec_zoom {
  position: sticky;
  top: 0;
  height: 100lvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  border-radius: 50% 50% 0 0/46rem 46rem 0 0;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_zoom {
    border-radius: 50% 50% 0 0/6rem 6rem 0 0;
  }
}
#recruit .p_rec_zoom__inner {
  position: relative;
  width: 52rem;
  height: 52rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_zoom__inner {
    width: 32rem;
    height: 32rem;
  }
}
#recruit .p_rec_zoom .ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: rec_spin 40s linear infinite;
          animation: rec_spin 40s linear infinite;
}
#recruit .p_rec_zoom .ring text {
  font-size: 22px;
  font-weight: 600;
  fill: #154a6f;
}
#recruit .p_rec_zoom .photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 33.3rem;
  height: 33.3rem;
  margin: -16.65rem 0 0 -16.65rem;
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_zoom .photo {
    width: 25rem;
    height: 25rem;
    margin: -12.5rem 0 0 -12.5rem;
  }
}
#recruit .p_rec_zoom .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#recruit {
  /* ---- INFO GRAPHIC ------------------------------------------ */
}
#recruit .p_rec_info {
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 75, 111, 0)), color-stop(45.3rem, #104a6f), color-stop(62%, #59babf), to(#f5ffd3));
  background: linear-gradient(to bottom, rgba(16, 75, 111, 0) 0%, #104a6f 45.3rem, #59babf 62%, #f5ffd3 100%);
  margin-top: -45.3rem;
  padding-bottom: 30rem;
  margin-bottom: -20rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info {
    padding-bottom: 5rem;
    margin-top: -20rem;
    margin-bottom: -8rem;
    padding-bottom: 15rem;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 75, 111, 0)), color-stop(20rem, #104a6f), color-stop(62%, #59babf), to(#f5ffd3));
    background: linear-gradient(to bottom, rgba(16, 75, 111, 0) 0%, #104a6f 20rem, #59babf 62%, #f5ffd3 100%);
  }
}
#recruit .p_rec_info__panel {
  position: relative;
  width: 121.6rem;
  max-width: calc(100% - 3rem);
  margin: -12rem auto 0;
  background: #fff;
  border-radius: 3rem;
  padding: 3.1rem 6.4rem 6.4rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__panel {
    margin-top: -6rem;
    border-radius: 2rem;
    padding: 3rem 1.5rem 3rem;
  }
}
#recruit .p_rec_info__title {
  text-align: center;
}
#recruit .p_rec_info__title .en {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -10rem;
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__title .en {
    font-size: 4rem;
    top: -6rem;
  }
}
#recruit .p_rec_info__title .ja {
  display: block;
  font-size: 3rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__title .ja {
    font-size: 2rem;
  }
}
#recruit .p_rec_info__grid {
  width: 108.9rem;
  margin: 1.9rem auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.7rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid {
    width: 31.8rem;
    gap: 1.7rem;
  }
}
#recruit .p_rec_info__grid .grow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.8rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .grow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.7rem;
  }
}
#recruit .p_rec_info__grid ._r1 .cell {
  width: 25.2rem;
  min-height: 33rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r1 .cell {
    width: auto;
    min-height: 19.8rem;
  }
}
#recruit .p_rec_info__grid ._r2 .col {
  width: 46.9rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.7rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r2 .col {
    width: auto;
    display: contents;
  }
}
#recruit .p_rec_info__grid ._r2 .pair {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.7rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r2 .pair {
    display: contents;
  }
}
#recruit .p_rec_info__grid ._r2 ._years {
  min-height: 26.6rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r2 ._years {
    min-height: 16.7rem;
  }
}
#recruit .p_rec_info__grid ._r2 ._s2 {
  width: 22.1rem;
  min-height: 26.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 4.2rem 1.5rem 6.7rem;
}
#recruit .p_rec_info__grid ._r2 ._s2 .num {
  margin-top: auto;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r2 ._s2 {
    width: auto;
    min-height: 12.1rem;
    padding: 1.4rem 0.8rem 2rem;
  }
  #recruit .p_rec_info__grid ._r2 ._s2 .note {
    font-size: 0.9rem;
    line-height: 1.35;
  }
}
#recruit .p_rec_info__grid ._r2 ._ratio {
  width: 59.2rem;
  min-height: 55.8rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r2 ._ratio {
    width: auto;
    min-height: 30rem;
    padding: 1rem 1.2rem;
  }
  #recruit .p_rec_info__grid ._r2 ._ratio .chart {
    margin: 0.6rem 0 0;
  }
}
#recruit .p_rec_info__grid ._r3 {
  gap: 2.7rem;
}
#recruit .p_rec_info__grid ._r3 .cell {
  min-height: 33rem;
}
#recruit .p_rec_info__grid ._r3 ._jobs {
  width: 65.7rem;
}
#recruit .p_rec_info__grid ._r3 ._jobs .chart img {
  width: 26.8rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r3 ._jobs {
    width: auto;
    min-height: 54.1rem;
  }
}
#recruit .p_rec_info__grid ._r3 ._holiday {
  width: 40.6rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r3 ._holiday {
    width: auto;
    min-height: 24rem;
  }
  #recruit .p_rec_info__grid ._r3 ._holiday .ico img {
    max-height: 5.4rem;
  }
}
#recruit .p_rec_info__grid ._r4 .cell {
  min-height: 25.7rem;
}
#recruit .p_rec_info__grid ._r4 ._commute {
  width: 65.7rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r4 ._commute {
    width: auto;
    min-height: 26.4rem;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
#recruit .p_rec_info__grid ._r4 ._s2 {
  width: 18.9rem;
  padding: 4.7rem 0.8rem 2.4rem;
}
#recruit .p_rec_info__grid ._r4 ._s2 .num {
  margin-top: 1.2rem;
}
#recruit .p_rec_info__grid ._r4 ._s2 .note {
  margin-top: 1.2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r4 ._s2 {
    width: auto;
    min-height: 12.1rem;
    padding: 1rem 0.8rem;
  }
  #recruit .p_rec_info__grid ._r4 ._s2 .num,
  #recruit .p_rec_info__grid ._r4 ._s2 .note {
    margin-top: 0.4rem;
  }
  #recruit .p_rec_info__grid ._r4 ._s2 .note {
    font-size: 0.9rem;
    line-height: 1.35;
  }
}
#recruit .p_rec_info__grid ._r5 .cell {
  width: 100%;
  min-height: 38.4rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r5 .cell {
    min-height: 61.6rem;
  }
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid ._r2 ._years,
  #recruit .p_rec_info__grid ._r2 ._ratio,
  #recruit .p_rec_info__grid ._r3 .cell,
  #recruit .p_rec_info__grid ._r4 ._commute,
  #recruit .p_rec_info__grid ._r5 .cell {
    grid-column: span 2;
  }
}
#recruit .p_rec_info__grid .chart {
  margin-top: 1.5rem;
}
#recruit .p_rec_info__grid .chart img {
  width: 100%;
  height: auto;
  display: block;
}
#recruit .p_rec_info__grid .cell {
  background: #e8f6f2;
  border-radius: 1rem;
  padding: 2.5rem 1.5rem 1.9rem;
  text-align: center;
}
#recruit .p_rec_info__grid .cell .head {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell .head {
    font-size: 1.5rem;
  }
}
#recruit .p_rec_info__grid .cell .ico {
  margin: 3.9rem 0 2rem;
}
#recruit .p_rec_info__grid .cell .ico img {
  width: auto;
  max-height: 9.9rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell .ico {
    margin: 1.2rem 0 0.8rem;
  }
  #recruit .p_rec_info__grid .cell .ico img {
    max-height: 6rem;
  }
}
#recruit .p_rec_info__grid .cell .num {
  font-size: 3rem;
  font-weight: bold;
  color: #256fa3;
  line-height: 1;
}
#recruit .p_rec_info__grid .cell .num b {
  font-size: 6.5rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell .num b {
    font-size: 4rem;
  }
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell .num {
    font-size: 1.8rem;
  }
}
#recruit .p_rec_info__grid .cell .note {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  margin-top: 0.4rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell .note {
    font-size: 1.2rem;
    margin-top: 0.2rem;
  }
}
#recruit .p_rec_info__grid .cell._years {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4.9rem;
  text-align: left;
  padding: 0 1.5rem 0 4.9rem;
}
#recruit .p_rec_info__grid .cell._years .ico {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0;
}
#recruit .p_rec_info__grid .cell._years .ico img {
  max-height: 11.6rem;
}
#recruit .p_rec_info__grid .cell._years .body {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 5.1rem;
}
#recruit .p_rec_info__grid .cell._years .note {
  margin-top: 1.2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._years {
    gap: 3.1rem;
    padding: 0 1.5rem 0 2.9rem;
  }
  #recruit .p_rec_info__grid .cell._years .ico img {
    max-height: 6.8rem;
  }
  #recruit .p_rec_info__grid .cell._years .body {
    -ms-flex-item-align: center;
        align-self: center;
    margin-top: 0;
  }
  #recruit .p_rec_info__grid .cell._years .body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  #recruit .p_rec_info__grid .cell._years .note {
    margin-top: 1.2rem;
    font-size: 1.5rem;
  }
  #recruit .p_rec_info__grid .cell._years .note br {
    display: none;
  }
}
#recruit .p_rec_info__grid .cell._ratio {
  padding: 3.8rem 4rem 3.2rem;
}
#recruit .p_rec_info__grid .cell._ratio .head {
  line-height: 1;
}
#recruit .p_rec_info__grid .cell._ratio .chart {
  margin-top: 0;
}
#recruit .p_rec_info__grid .cell._ratio .chart img {
  width: 51.2rem;
  margin: 0 auto;
}
#recruit .p_rec_info__grid .cell._ratio hr {
  border: none;
  border-top: 1px dashed #9dc9c2;
  margin: 2.8rem 0 0;
}
#recruit .p_rec_info__grid .cell._ratio hr + .head {
  margin-top: 3.3rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._ratio {
    padding: 1rem 1.2rem;
  }
  #recruit .p_rec_info__grid .cell._ratio .head {
    line-height: 1.4;
  }
  #recruit .p_rec_info__grid .cell._ratio hr {
    margin: 0.8rem 0 0;
  }
  #recruit .p_rec_info__grid .cell._ratio hr + .head {
    margin-top: 0.6rem;
  }
  #recruit .p_rec_info__grid .cell._ratio .chart {
    margin-top: 0;
  }
  #recruit .p_rec_info__grid .cell._ratio .chart img {
    width: 100%;
  }
}
#recruit .p_rec_info__grid .cell._jobs {
  padding-top: 3.2rem;
  padding-bottom: 3rem;
}
#recruit .p_rec_info__grid .cell._jobs .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5.1rem;
  margin-top: 0;
}
#recruit .p_rec_info__grid .cell._jobs .body {
  width: 25.4rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#recruit .p_rec_info__grid .cell._jobs .head {
  line-height: 1;
}
#recruit .p_rec_info__grid .cell._jobs .chart {
  margin-top: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#recruit .p_rec_info__grid .cell._jobs .body .head {
  margin-bottom: 3.5rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._jobs {
    padding-top: 1.5rem;
  }
  #recruit .p_rec_info__grid .cell._jobs .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.5rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #recruit .p_rec_info__grid .cell._jobs .body {
    display: contents;
  }
  #recruit .p_rec_info__grid .cell._jobs .body .head {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    margin-bottom: 0;
  }
}
#recruit .p_rec_info__grid .cell._holiday .ico {
  margin: 2.6rem 0 2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._holiday .ico {
    margin: 1rem 0 0.6rem;
  }
}
#recruit .p_rec_info__grid .cell._holiday .ico img {
  max-height: 9.1rem;
}
#recruit .p_rec_info__grid .cell._holiday .note {
  line-height: 1.4;
}
#recruit .p_rec_info__grid .cell._commute {
  padding: 1.1rem 0 2.1rem;
}
#recruit .p_rec_info__grid .cell._commute .ico {
  margin: 1rem 0 0.9rem;
}
#recruit .p_rec_info__grid .cell._commute .ico img {
  max-height: none;
}
#recruit .p_rec_info__grid .cell._commute ul li:nth-child(1) .ico img {
  height: 5.7rem;
}
#recruit .p_rec_info__grid .cell._commute ul li:nth-child(2) .ico img {
  height: 7.5rem;
}
#recruit .p_rec_info__grid .cell._commute ul li:nth-child(3) .ico img {
  height: 4.9rem;
}
#recruit .p_rec_info__grid .cell._commute .num {
  font-size: 2.2rem;
}
#recruit .p_rec_info__grid .cell._commute .num b {
  font-size: 4.4rem;
}
#recruit .p_rec_info__grid .cell._commute ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 2rem;
}
#recruit .p_rec_info__grid .cell._commute ul li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 18.4rem;
          flex: 0 0 18.4rem;
}
#recruit .p_rec_info__grid .cell._commute ul li:nth-child(2) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 18.8rem;
          flex: 0 0 18.8rem;
}
#recruit .p_rec_info__grid .cell._commute ul li:nth-child(3) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._commute ul li {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 !important;
            flex: 1 !important;
  }
}
#recruit .p_rec_info__grid .cell._commute ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#recruit .p_rec_info__grid .cell._commute ul li .cap {
  margin-bottom: auto;
}
#recruit .p_rec_info__grid .cell._commute ul li + li {
  border-left: 1px dashed #9dc9c2;
}
#recruit .p_rec_info__grid .cell._commute ul .cap {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
}
#recruit .p_rec_info__grid .cell._commute ul .cap small {
  display: block;
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._commute ul .cap {
    font-size: 1.3rem;
  }
  #recruit .p_rec_info__grid .cell._commute ul .cap small {
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._commute {
    padding: 2.4rem 1.5rem 1.5rem;
  }
  #recruit .p_rec_info__grid .cell._commute ul {
    display: block;
    margin-top: 1.4rem;
  }
  #recruit .p_rec_info__grid .cell._commute ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.4rem;
    text-align: left;
    padding: 0.9rem 0;
    border-left: none !important;
  }
  #recruit .p_rec_info__grid .cell._commute ul li + li {
    border-top: 1px dashed #9dc9c2;
  }
  #recruit .p_rec_info__grid .cell._commute ul li .cap {
    margin-bottom: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font-size: 1.5rem;
  }
  #recruit .p_rec_info__grid .cell._commute ul li .cap small {
    font-size: 1.2rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  #recruit .p_rec_info__grid .cell._commute ul li .ico {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 4.6rem;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #recruit .p_rec_info__grid .cell._commute ul li .num {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-top: 0;
  }
  #recruit .p_rec_info__grid .cell._commute ul li:nth-child(1) .ico img {
    height: 3.4rem;
  }
  #recruit .p_rec_info__grid .cell._commute ul li:nth-child(2) .ico img {
    height: 4.5rem;
  }
  #recruit .p_rec_info__grid .cell._commute ul li:nth-child(3) .ico img {
    height: 3rem;
  }
}
#recruit .p_rec_info__grid .cell._childcare {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._childcare {
    grid-column: span 2;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    padding: 1.9rem 1.5rem 2rem;
  }
}
#recruit .p_rec_info__grid .cell._childcare .lead {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 25.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#recruit .p_rec_info__grid .cell._childcare .lead .head {
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._childcare .lead .head {
    font-size: 1.5rem;
    line-height: 1.5;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._childcare .lead .ico {
    margin: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  #recruit .p_rec_info__grid .cell._childcare .lead .ico img {
    max-height: 6.7rem;
  }
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._childcare .lead {
    width: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1.4rem;
    text-align: left;
    padding-bottom: 1.9rem;
  }
}
#recruit .p_rec_info__grid .cell._childcare .donuts {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._childcare .donuts {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.5rem;
  }
}
#recruit .p_rec_info__grid .cell._childcare .donuts .group {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding-top: 4rem;
  border-left: 1px dashed #9dc9c2;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._childcare .donuts .group {
    border-left: none;
    border-top: 1px dashed #9dc9c2;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    width: auto !important;
    border-left: none;
  }
  #recruit .p_rec_info__grid .cell._childcare .donuts .group + .group {
    border-top: 1px dashed #9dc9c2;
    padding-top: 1.5rem;
  }
  #recruit .p_rec_info__grid .cell._childcare .donuts .group:nth-child(1) .c_donut {
    width: 13rem;
    height: 13rem;
  }
  #recruit .p_rec_info__grid .cell._childcare .donuts .group:nth-child(1) .c_donut:before {
    inset: 1.25rem;
  }
  #recruit .p_rec_info__grid .cell._childcare .donuts .group:nth-child(1) .c_donut .val {
    font-size: 3.3rem;
  }
  #recruit .p_rec_info__grid .cell._childcare .donuts .group:nth-child(1) .c_donut .cap {
    font-size: 1.4rem;
  }
}
#recruit .p_rec_info__grid .cell._childcare .donuts .group:nth-child(1) {
  width: 52.6rem;
}
#recruit .p_rec_info__grid .cell._childcare .donuts .group:nth-child(2) {
  width: 30.7rem;
}
#recruit .p_rec_info__grid .cell._childcare .donuts .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  margin-top: 3.4rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell._childcare .donuts .row {
    gap: 1.1rem;
    margin-top: 1.4rem;
  }
}
#recruit .p_rec_info__grid .cell._childcare .donuts .row .c_donut {
  width: 22.3rem;
  height: 22.3rem;
}
#recruit .p_rec_info__grid .cell .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  margin-top: 1.5rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#recruit .p_rec_info__grid .cell .legend {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 0;
  font-size: 1.5rem;
  font-weight: bold;
}
#recruit .p_rec_info__grid .cell .legend li {
  text-align: center;
  padding: 1.2rem 0.4rem 1.6rem;
  border-left: 1px dashed #9dc9c2;
}
#recruit .p_rec_info__grid .cell .legend li:nth-child(3n) {
  border-right: 1px dashed #9dc9c2;
}
#recruit .p_rec_info__grid .cell .legend li:nth-child(n+4) {
  border-top: 1px dashed #9dc9c2;
}
#recruit .p_rec_info__grid .cell .legend .dot {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  margin: 0 auto 0.6rem;
}
#recruit .p_rec_info__grid .cell .legend .dot._a {
  background: #154a6f;
}
#recruit .p_rec_info__grid .cell .legend .dot._b {
  background: #256fa3;
}
#recruit .p_rec_info__grid .cell .legend .dot._c {
  background: #4b94c4;
}
#recruit .p_rec_info__grid .cell .legend .dot._d {
  background: #6fb3c9;
}
#recruit .p_rec_info__grid .cell .legend .dot._e {
  background: #92cfc7;
}
#recruit .p_rec_info__grid .cell .legend .dot._f {
  background: #b6e0d6;
}
#recruit .p_rec_info__grid .cell .legend b {
  display: block;
  font-size: 3rem;
  line-height: 1.1;
  color: #256fa3;
}
#recruit .p_rec_info__grid .cell .legend b i {
  font-size: 0.7em;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__grid .cell .legend {
    width: 100%;
    font-size: 1.5rem;
  }
  #recruit .p_rec_info__grid .cell .legend li {
    padding: 1.7rem 0.2rem 2rem;
  }
  #recruit .p_rec_info__grid .cell .legend b {
    font-size: 3rem;
  }
}
#recruit .p_rec_info__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3.8rem;
  margin-top: 6rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__cta {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.5rem;
    margin-top: 3rem;
    padding: 0 1.5rem;
  }
}
#recruit .p_rec_info__cta .col {
  width: 52.5rem;
  max-width: 100%;
}
#recruit .p_rec_info__cta .cap {
  font-size: 2.5rem;
  font-weight: bold;
  color: #154a6f;
  text-align: center;
  margin-bottom: 1.4rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_info__cta .cap {
    font-size: 1.7rem;
  }
}
#recruit .p_rec_info__cta .mynavis {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.5rem;
}
#recruit .p_rec_info__cta .mynavi {
  display: block;
}
#recruit .p_rec_info__cta .mynavi img {
  width: 195px;
  height: 60px;
  max-width: 100%;
}
#recruit {
  /* ---- 棒グラフ・人型・円グラフ・ドーナツ --------------------- */
}
#recruit .c_ratiobar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
#recruit .c_ratiobar span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.3rem;
  width: var(--w);
  height: 3.2rem;
  border-radius: 100vh;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
}
#recruit .c_ratiobar span b {
  font-size: 0.8em;
}
#recruit .c_ratiobar span i {
  font-size: 0.7em;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #recruit .c_ratiobar span {
    font-size: 1.3rem;
    height: 2.6rem;
  }
}
#recruit .c_ratiobar .male {
  background: #154a6f;
}
#recruit .c_ratiobar .female {
  background: #75c9c2;
}
#recruit .people {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
#recruit .people span {
  width: 4.6rem;
  height: 11.2rem;
  background: center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  #recruit .people span {
    width: 2.4rem;
    height: 5.8rem;
  }
}
#recruit .people span.m {
  background-image: url(../../images/rec_ico_person_m.png);
}
#recruit .people span.f {
  background-image: url(../../images/rec_ico_person_f.png);
}
#recruit .c_pie {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: conic-gradient(#154a6f 0 calc(var(--a) * 1%), #256fa3 0 calc((var(--a) + var(--b)) * 1%), #4b94c4 0 calc((var(--a) + var(--b) + var(--c)) * 1%), #6fb3c9 0 calc((var(--a) + var(--b) + var(--c) + var(--d)) * 1%), #92cfc7 0 calc((var(--a) + var(--b) + var(--c) + var(--d) + var(--e)) * 1%), #b6e0d6 0 100%);
}
@media screen and (max-width: 768px) {
  #recruit .c_pie {
    width: 15rem;
    height: 15rem;
  }
}
#recruit .c_pie span {
  position: absolute;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  #recruit .c_pie span {
    font-size: 1.1rem;
  }
}
#recruit .c_pie .l1 {
  right: 2.2rem;
  top: 5.6rem;
}
#recruit .c_pie .l2 {
  right: 3rem;
  bottom: 4.6rem;
}
#recruit .c_pie .l3 {
  left: 1.4rem;
  bottom: 5.6rem;
}
#recruit .c_pie .l4 {
  left: 1rem;
  top: 8.4rem;
}
#recruit .c_pie .l5 {
  left: 2.4rem;
  top: 4.4rem;
}
#recruit .c_pie .l6 {
  left: 6.6rem;
  top: 2.2rem;
}
#recruit .c_donut {
  position: relative;
  width: 22.3rem;
  height: 22.3rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: conic-gradient(#75c9c2 0 calc(var(--v) * 1%), #ffffff 0 100%);
}
@media screen and (max-width: 768px) {
  #recruit .c_donut {
    width: 10rem;
    height: 10rem;
  }
}
#recruit .c_donut:before {
  content: "";
  position: absolute;
  inset: 2.3rem;
  border-radius: 50%;
  background: #e8f6f2;
}
@media screen and (max-width: 768px) {
  #recruit .c_donut:before {
    inset: 1.4rem;
  }
}
#recruit .c_donut._navy {
  background: conic-gradient(#154a6f 0 calc(var(--v) * 1%), #ffffff 0 100%);
}
#recruit .c_donut._navy .val {
  color: #154a6f;
}
#recruit .c_donut .cap,
#recruit .c_donut .val {
  position: relative;
  z-index: 1;
}
#recruit .c_donut .cap {
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #recruit .c_donut .cap {
    font-size: 1.5rem;
  }
}
#recruit .c_donut .val {
  font-size: 6.5rem;
  line-height: 1;
  font-weight: bold;
  color: #75c9c2;
}
#recruit .c_donut .val i {
  font-size: 0.46em;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #recruit .c_donut .val {
    font-size: 6.5rem;
  }
}
#recruit {
  /* ---- VISION ------------------------------------------------ */
}
#recruit .p_rec_vision {
  padding: 10rem 0 30rem;
  border-radius: 20rem 0 0 0;
  margin-bottom: -20rem;
  position: relative;
  z-index: 1;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_vision {
    padding: 8rem 0 13rem;
    border-radius: 8rem 0 0 0;
    margin-bottom: -8rem;
  }
}
#recruit .p_rec_vision .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_vision .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4rem;
  }
}
#recruit .p_rec_vision .textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#recruit .p_rec_vision .textarea .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#recruit .p_rec_vision .textarea .title .en {
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_vision .textarea .title .en {
    font-size: 4.4rem;
  }
}
#recruit .p_rec_vision .textarea .title .ja {
  font-size: 2rem;
  font-weight: bold;
  color: #154a6f;
  margin-top: 0.6rem;
}
#recruit .p_rec_vision .textarea .lead {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.5;
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_vision .textarea .lead {
    font-size: 2.2rem;
    margin-top: 1.5rem;
  }
}
#recruit .p_rec_vision .textarea .text {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.9;
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_vision .textarea .text {
    font-size: 1.4rem;
  }
  #recruit .p_rec_vision .textarea .text br {
    display: none;
  }
}
#recruit .p_rec_vision .image {
  width: 71.9rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: calc(50% - 50vw);
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_vision .image {
    width: auto;
  }
}
#recruit .p_rec_vision .image img {
  width: 100%;
  border-radius: 30rem 0 0 30rem;
}
#recruit {
  /* ---- PERSONA ----------------------------------------------- */
}
#recruit .p_rec_persona {
  position: relative;
  z-index: 1;
  background: #154a6f;
  border-radius: 0 20rem 0 0;
  padding: 7rem 0 19rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona {
    border-radius: 0 8rem 0 0;
    padding: 4rem 0 24rem;
  }
}
#recruit .p_rec_persona__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
#recruit .p_rec_persona__title img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 142rem;
  max-width: none;
  height: auto;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona__title img {
    width: 70rem;
  }
}
#recruit .p_rec_persona__sub {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2.2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona__sub {
    margin-top: 1.6rem;
  }
}
#recruit .p_rec_persona__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona__list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    margin-top: 2.5rem;
    width: 31.8rem;
    margin-left: auto;
    margin-right: auto;
  }
}
#recruit .p_rec_persona__list li {
  background: #fff;
  color: var(--c_ink);
  padding: 2.3rem 1.6rem 2.6rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona__list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: left;
    padding: 1.2rem 1.8rem 1.4rem;
  }
  #recruit .p_rec_persona__list li .ico {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  #recruit .p_rec_persona__list li .name {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin-left: 1.4rem;
    white-space: nowrap;
    text-align: center;
  }
  #recruit .p_rec_persona__list li .text {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    width: 100%;
  }
}
#recruit .p_rec_persona__list li .name {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona__list li .name {
    font-size: 2rem;
  }
}
#recruit .p_rec_persona__list li .ico {
  margin: 0.8rem 0 1.4rem;
}
#recruit .p_rec_persona__list li .ico img {
  width: auto;
  max-height: 9.8rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona__list li .ico img {
    max-height: 6rem;
  }
}
#recruit .p_rec_persona__list li .text {
  font-size: 1.5rem;
  line-height: 1.6666666667;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona__list li .text {
    font-size: 1.5rem;
    line-height: 1.6666666667;
  }
  #recruit .p_rec_persona__list li .text br {
    display: none;
  }
}
#recruit .p_rec_persona__penguin {
  position: absolute;
  left: 0;
  bottom: -14.4rem;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_persona__penguin {
    bottom: -6.8rem;
  }
}
#recruit .p_rec_persona__penguin img {
  width: 100%;
}
#recruit {
  /* ---- 丸い写真の帯 ------------------------------------------ */
}
#recruit .p_rec_round {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #154a6f), color-stop(50%, #fff));
  background: linear-gradient(to bottom, #154a6f 0 50%, #fff 50% 100%);
  overflow: hidden;
  padding-bottom: 0;
}
#recruit .p_rec_round .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#recruit .p_rec_round .swiper-slide {
  width: auto;
  padding: 0 2.25rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_round .swiper-slide {
    padding: 0 1.05rem;
  }
}
#recruit .p_rec_round .swiper-slide {
  height: auto;
}
#recruit .p_rec_round .swiper-slide img {
  display: block;
  width: 44rem;
  height: 28.8rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100vh;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_round .swiper-slide img {
    width: 20.7rem;
    height: 13.6rem;
  }
}
#recruit .p_rec_round .swiper-slide._sm img {
  width: 29.8rem;
  height: 19.5rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_round .swiper-slide._sm img {
    width: 14rem;
    height: 9.2rem;
  }
}
#recruit {
  /* ---- WHY US ------------------------------------------------ */
}
#recruit .p_rec_why {
  background: #fff;
  padding: 10rem 0;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why {
    padding: 5rem 0;
  }
}
#recruit .p_rec_why__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 3rem;
  }
}
#recruit .p_rec_why .photos {
  width: 51.4rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 100%;
  border-radius: 0 1rem 1rem 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .photos {
    margin-right: 2.8rem;
    width: auto;
  }
}
#recruit .p_rec_why .photos img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#recruit .p_rec_why .photos .big {
  grid-column: span 2;
}
#recruit .p_rec_why .photos .big img {
  aspect-ratio: 514/425;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .photos .big img {
    aspect-ratio: 362/167;
    -o-object-position: top center;
       object-position: top center;
  }
}
#recruit .p_rec_why .photos :not(.big) img {
  aspect-ratio: 257/320;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .photos :not(.big) img {
    aspect-ratio: 181/126;
  }
}
#recruit .p_rec_why .body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-right: 6.4rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .body {
    padding: 0 3.6rem;
  }
}
#recruit .p_rec_why .body .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#recruit .p_rec_why .body .title .en {
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .body .title .en {
    font-size: 4.4rem;
  }
}
#recruit .p_rec_why .body .title .ja {
  font-size: 2rem;
  font-weight: bold;
  color: #154a6f;
  margin-top: 0.6rem;
}
#recruit .p_rec_why .body .lead {
  font-size: 4rem;
  font-weight: 900;
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .body .lead {
    font-size: 2.5rem;
    line-height: 1.28;
    margin-top: 1.5rem;
  }
}
#recruit .p_rec_why .body .list {
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .body .list {
    margin-top: 1.5rem;
  }
}
#recruit .p_rec_why .body .list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  padding: 2.2rem 0;
  border-top: 1px solid #154a6f;
}
#recruit .p_rec_why .body .list li:last-child {
  border-bottom: 1px solid #154a6f;
}
#recruit .p_rec_why .body .list li .no {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 5.9rem;
  font-weight: 900;
  line-height: 1;
  color: #e1e7eb;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .body .list li .txt {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
#recruit .p_rec_why .body .list li h3 {
  font-size: 2.5rem;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .body .list li h3 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
#recruit .p_rec_why .body .list li h3 .tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1rem;
  padding: 0.2rem 1.1rem 0.3rem;
  border-radius: 10rem;
  background: #154a6f;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.5;
  -webkit-transform: translateY(-0.2rem);
          transform: translateY(-0.2rem);
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .body .list li h3 .tag {
    margin-left: 0.6rem;
    font-size: 1.1rem;
    line-height: 1.5;
  }
}
#recruit .p_rec_why .body .list li p {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-top: 1.5rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_why .body .list li p {
    font-size: 1.3rem;
    grid-column: auto/span 2;
    margin-top: 0.5rem;
  }
}
#recruit {
  /* ---- INTERVIEW ---------------------------------------------
      帯・カード・コピー枠の座標は XD（採用情報_修正+）の実測値。
      ・帯は上下が斜めに切れた平行四辺形（右上がり110px）
      ・カードは右へ1枚進むごとに 136px ずつ**上がる**斜めの並び。
        1枚ずつ座標を持たせると Swiper の loop 複製に対応できないので、
        スライダーごと -12.84deg 傾け、カード側で +12.84deg 戻している。
        傾ける／戻すの transform-origin はどちらも 0 0（カード左上＝写真左上）。
      ・青い楕円とコピー枠は XD では「背景ぼかし＋明度調整」。
        CSS では backdrop-filter で同じことをする（非対応ブラウザ用に
        薄い background も重ねてある）。
  ------------------------------------------------------------- */
}
#recruit .p_rec_interview {
  position: relative;
  color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#104a6f), color-stop(42.86%, #59babf), to(#f5ffd3));
  background: linear-gradient(180deg, #104a6f 0%, #59babf 42.86%, #f5ffd3 100%);
  clip-path: polygon(0 11rem, 100% 0, 100% calc(100% - 11rem), 0 100%);
  padding: 20rem 0;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_interview {
    clip-path: polygon(0 3.5rem, 100% 0, 100% calc(100% - 3.5rem), 0 100%);
    padding: 7rem 0;
  }
}
#recruit .p_rec_interview__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#recruit .p_rec_interview__title .en {
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_interview__title .en {
    font-size: 4rem;
  }
}
#recruit .p_rec_interview__title .ja {
  font-size: 3rem;
  font-weight: bold;
  margin-top: 0.3rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_interview__title .ja {
    font-size: 2rem;
  }
}
#recruit {
  /* ---- BENEFIT ----------------------------------------------- */
}
#recruit .p_rec_benefit {
  padding: 9rem 0 8rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_benefit {
    padding: 4rem 0;
  }
}
#recruit .p_rec_benefit__title {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
#recruit .p_rec_benefit__title .en {
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  color: #154a6f;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_benefit__title .en {
    font-size: 4.4rem;
  }
}
#recruit .p_rec_benefit__title .ja {
  font-size: 2rem;
  font-weight: bold;
  color: #154a6f;
}
#recruit .p_rec_benefit__main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_benefit__main {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
#recruit .p_rec_benefit__main li {
  border: 1px solid #154a6f;
  padding: 2.4rem 1.6rem;
  text-align: center;
}
#recruit .p_rec_benefit__main li h3 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #154a6f;
}
#recruit .p_rec_benefit__main li .ico {
  margin: 2rem 0;
}
#recruit .p_rec_benefit__main li .ico img {
  width: auto;
  max-height: 7rem;
}
#recruit .p_rec_benefit__main li .text {
  font-size: 1.5rem;
  line-height: 1.7;
}
#recruit .p_rec_benefit__sub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin-top: 1.6rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_benefit__sub {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
#recruit .p_rec_benefit__sub li {
  border: 1px solid #154a6f;
  padding: 1.6rem 1rem;
  text-align: center;
}
#recruit .p_rec_benefit__sub li h3 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #154a6f;
}
#recruit .p_rec_benefit__sub li .text {
  font-size: 1.4rem;
  line-height: 1.6;
  margin-top: 0.6rem;
  letter-spacing: 0;
}
#recruit .p_rec_benefit__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin-top: 1.6rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_benefit__list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
#recruit .p_rec_benefit__list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 6rem;
  border: 1px solid #154a6f;
  color: #154a6f;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  padding: 0.8rem;
}
#recruit {
  /* ---- FAQ --------------------------------------------------- */
}
#recruit .p_rec_faq__box {
  background: #154a6f;
  border-radius: 3rem;
  padding: 5rem 8.8rem 6rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_faq__box {
    border-radius: 2rem;
    padding: 3rem 2rem;
  }
}
#recruit .p_rec_faq__title {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
#recruit .p_rec_faq__title .en {
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_faq__title .en {
    font-size: 4rem;
  }
}
#recruit .p_rec_faq__title .ja {
  font-size: 2rem;
  font-weight: bold;
}
#recruit .p_rec_faq__list {
  margin-top: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.4rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_faq__list {
    margin-top: 1.5rem;
  }
}
#recruit .p_rec_faq__list details {
  background: #fff;
  border-radius: 0.5rem;
  color: var(--c_ink);
}
#recruit .p_rec_faq__list details summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 2rem 6rem 2rem 3rem;
  font-size: 2rem;
  line-height: 1.5;
  font-weight: bold;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_faq__list details summary {
    font-size: 1.5rem;
    padding: 1.4rem 4rem 1.4rem 1.6rem;
  }
}
#recruit .p_rec_faq__list details summary::-webkit-details-marker {
  display: none;
}
#recruit .p_rec_faq__list details summary:before, #recruit .p_rec_faq__list details summary:after {
  content: "";
  position: absolute;
  right: 3rem;
  top: 50%;
  width: 2.2rem;
  height: 2px;
  background: #154a6f;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_faq__list details summary:before, #recruit .p_rec_faq__list details summary:after {
    right: 1.6rem;
    width: 1.6rem;
  }
}
#recruit .p_rec_faq__list details summary:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
#recruit .p_rec_faq__list details[open] summary:after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#recruit .p_rec_faq__list details p {
  padding: 0 3rem 2rem;
  font-size: 1.5rem;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_faq__list details p {
    padding: 0 1.6rem 1.4rem;
    font-size: 1.3rem;
  }
}
#recruit {
  /* ---- FOR PARENTS ------------------------------------------- */
}
#recruit .p_rec_parents {
  padding: 10rem 0;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_parents {
    padding: 5rem 0;
  }
}
#recruit .p_rec_parents__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3rem;
  border: 1px solid #154a6f;
  border-radius: 1rem;
  padding: 2.5rem 3rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_parents__box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2.5rem;
  }
}
#recruit .p_rec_parents__box .textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#recruit .p_rec_parents__box .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
#recruit .p_rec_parents__box .title .en {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_parents__box .title .en {
    font-size: 4rem;
  }
}
#recruit .p_rec_parents__box .title .ja {
  font-size: 2rem;
  font-weight: bold;
  color: #154a6f;
}
#recruit .p_rec_parents__box .text {
  font-size: 1.5rem;
  line-height: 2;
  margin-top: 1.2rem;
}
#recruit .p_rec_parents__box .name {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: right;
  margin-top: 1.5rem;
}
#recruit .p_rec_parents__box .image {
  width: 22.9rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_parents__box .image {
    width: auto;
    -ms-flex-item-align: center;
        align-self: center;
    margin-top: 2rem;
  }
}
#recruit .p_rec_parents__box .image img {
  width: 100%;
}
#recruit {
  /* ---- 募集要項一覧 ------------------------------------------ */
}
#recruit .p_rec_jobs {
  background: #f5ffd3;
  padding: 8rem 0 28rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_jobs {
    padding: 6rem 0 10rem;
  }
}
#recruit .p_rec_jobs__title {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
#recruit .p_rec_jobs__title .en {
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  color: #154a6f;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_jobs__title .en {
    font-size: 4.4rem;
  }
}
#recruit .p_rec_jobs__title .ja {
  font-size: 2rem;
  font-weight: bold;
  color: #154a6f;
}
#recruit .p_rec_jobs__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.4rem 2.6rem;
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  #recruit .p_rec_jobs__list {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
#recruit .p_rec_jobs__list li {
  background: #fff;
  padding: 1.4rem 1.4rem 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#recruit .p_rec_jobs__list li .photo img {
  width: 100%;
  aspect-ratio: 308/193;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#recruit .p_rec_jobs__list li .name {
  font-size: 2.2rem;
  line-height: 1.4;
  font-weight: bold;
  margin-top: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e5e5;
}
#recruit .p_rec_jobs__list li dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.4rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 1.8rem;
}
#recruit .p_rec_jobs__list li dl dt {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 5rem;
  font-weight: bold;
}
#recruit .p_rec_jobs__list li .c_btn {
  width: 100%;
  font-size: 1.5rem;
  height: 4.6rem;
  margin-top: auto;
}

/* ---- keyframes ---------------------------------------------- */
@-webkit-keyframes rec_slideIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(6rem);
            transform: translateX(6rem);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes rec_slideIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(6rem);
            transform: translateX(6rem);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes rec_shake {
  0%, 86%, 100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
  88% {
    -webkit-transform: translate(-0.2rem, 0.1rem) rotate(-0.6deg);
            transform: translate(-0.2rem, 0.1rem) rotate(-0.6deg);
  }
  90% {
    -webkit-transform: translate(0.2rem, -0.1rem) rotate(0.6deg);
            transform: translate(0.2rem, -0.1rem) rotate(0.6deg);
  }
  92% {
    -webkit-transform: translate(-0.2rem, -0.1rem) rotate(-0.4deg);
            transform: translate(-0.2rem, -0.1rem) rotate(-0.4deg);
  }
  94% {
    -webkit-transform: translate(0.2rem, 0.1rem) rotate(0.4deg);
            transform: translate(0.2rem, 0.1rem) rotate(0.4deg);
  }
}
@keyframes rec_shake {
  0%, 86%, 100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
  88% {
    -webkit-transform: translate(-0.2rem, 0.1rem) rotate(-0.6deg);
            transform: translate(-0.2rem, 0.1rem) rotate(-0.6deg);
  }
  90% {
    -webkit-transform: translate(0.2rem, -0.1rem) rotate(0.6deg);
            transform: translate(0.2rem, -0.1rem) rotate(0.6deg);
  }
  92% {
    -webkit-transform: translate(-0.2rem, -0.1rem) rotate(-0.4deg);
            transform: translate(-0.2rem, -0.1rem) rotate(-0.4deg);
  }
  94% {
    -webkit-transform: translate(0.2rem, 0.1rem) rotate(0.4deg);
            transform: translate(0.2rem, 0.1rem) rotate(0.4deg);
  }
}
@-webkit-keyframes rec_scrollDot {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(8rem);
            transform: translateY(8rem);
  }
}
@keyframes rec_scrollDot {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(8rem);
            transform: translateY(8rem);
  }
}
@-webkit-keyframes rec_scrollDotFade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rec_scrollDotFade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes rec_spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rec_spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #recruit .p_rec_fv__catch .ja .line,
  #recruit .p_rec_fv__catch .ja .js-shake,
  #recruit .p_rec_zoom .ring {
    -webkit-animation: none;
            animation: none;
  }
  #recruit .p_rec_fv__scroll:before {
    -webkit-animation: none;
            animation: none;
    display: none;
  }
}
/* ============================================================
  interview — 先輩社員インタビュー詳細ページ専用スタイル
  ------------------------------------------------------------
  ・座標は XD（PC 1366 / SP 390）実測。1px = .1rem。
  ・ページ背景は 763px 周期の縦グラデを繰り返したもの。
    タイル境目で色が跳ぶ（緑 → 青）のは XD どおりの意図した見え方。
  ・OTHERS のスライダーと末尾 CTA は採用情報ページと共通部品
    （component/_c_ivslider.scss / _c_ctajob.scss）。ここでは置き場所だけ。
============================================================ */
#interview {
  color: #fff;
  overflow-x: clip;
  /* ---- FV ---------------------------------------------------- */
}
#interview .p_iv_fv {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_fv {
    padding-top: 6rem;
  }
}
#interview .p_iv_fv .c_pankuzu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  color: #154a6f;
}
#interview .p_iv_fv .c_pankuzu a {
  color: #154a6f;
}
#interview .p_iv_fv__photo {
  width: 108.3rem;
  height: 58.5rem;
  border-radius: 100vh 0 0 100vh;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_fv__photo {
    width: 35.4rem;
    height: 28.1rem;
  }
}
#interview .p_iv_fv__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#interview .p_iv_fv__textarea {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 8.8rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_fv__textarea {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: none;
            transform: none;
    padding: 0 3.6rem;
    margin-top: -10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#interview .p_iv_fv__no {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_fv__no {
    font-size: 3rem;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
#interview .p_iv_fv__catch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 2rem;
}
#interview .p_iv_fv__catch em {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #fff;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.42)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 2.2rem 1.3rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_fv__catch em {
    padding: 1.2rem 0.8rem;
  }
}
#interview .p_iv_fv__catch em img {
  display: block;
  width: auto;
  max-width: none;
  height: 4.2rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_fv__catch em img {
    height: auto;
    max-height: 2.4rem;
    max-width: 30rem;
  }
}
#interview .p_iv_fv__name {
  font-size: 5.1rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_fv__name {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
#interview .p_iv_fv__role {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_fv__role {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
#interview {
  /* ---- PROFILE ----------------------------------------------- */
}
#interview .p_iv_profile {
  padding-top: 11.3rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_profile {
    padding-top: 4rem;
  }
}
#interview .p_iv_profile__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-column-gap: 1.8rem;
     -moz-column-gap: 1.8rem;
          column-gap: 1.8rem;
  -ms-flex-line-pack: start;
      align-content: start;
  min-height: 18.5rem;
  padding: 2.8rem 4rem 2.6rem 4.7rem;
  border: 1px solid #fff;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_profile__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 3.4rem 2.2rem 2.4rem;
  }
}
#interview .p_iv_profile__card .tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 9rem;
  height: 2.7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 1.2rem;
  border-radius: 1rem 0 1rem 0;
  background: #fff;
  color: #154a6f;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}
#interview .p_iv_profile__card .photo {
  grid-column: 1;
  grid-row: 1/3;
  width: 13.7rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_profile__card .photo {
    grid-row: 1;
    width: 11.2rem;
  }
}
#interview .p_iv_profile__card .photo img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  display: block;
}
#interview .p_iv_profile__card .head {
  grid-column: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 1.4rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_profile__card .head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0.4rem;
    -ms-flex-item-align: center;
        align-self: center;
  }
}
#interview .p_iv_profile__card .head .name {
  font-size: 5.1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}
#interview .p_iv_profile__card .head .role {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_profile__card .head .role {
    display: none;
  }
}
#interview .p_iv_profile__card .text {
  grid-column: 2;
  margin-top: 1.4rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.667;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_profile__card .text {
    grid-column: 1/3;
    margin-top: 2rem;
  }
}
#interview {
  /* ---- Q&A ---------------------------------------------------
      写真の位置がセクションごとに 左 / 右（画面端まで）/ 下（全幅）と変わる。
  ------------------------------------------------------------- */
}
#interview .p_iv_qa {
  padding-top: 11rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa {
    padding-top: 4.4rem;
  }
}
#interview .p_iv_qa__item + .p_iv_qa__item {
  margin-top: 14.6rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item + .p_iv_qa__item {
    margin-top: 5rem;
  }
}
#interview .p_iv_qa__item .photo {
  border-radius: 3rem;
}
#interview .p_iv_qa__item .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#interview .p_iv_qa__item .q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.9rem;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.25;
}
#interview .p_iv_qa__item .q .mark {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
#interview .p_iv_qa__item .a {
  margin-top: 2rem;
}
#interview .p_iv_qa__item .a em {
  display: table;
  height: 4.4rem;
  padding: 0 0.8rem;
  background: #fff;
  color: #154a6f;
  font-style: normal;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 4.4rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item .a em {
    height: auto;
    padding: 0.5rem 0.8rem;
    font-size: 2rem;
    line-height: 2;
    white-space: normal;
  }
}
#interview .p_iv_qa__item .a em + em {
  margin-top: -0.1rem;
}
#interview .p_iv_qa__item .body {
  margin-top: 2.2rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.667;
  letter-spacing: 0.05em;
}
#interview .p_iv_qa__item .body + .body {
  margin-top: 2.5rem;
}
#interview .p_iv_qa__item._left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 4.8rem;
  width: min(108.8rem, 100% - 7.2rem);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item._left {
    display: block;
    width: calc(100% - 7.2rem);
  }
}
#interview .p_iv_qa__item._left .photo {
  width: 58rem;
  height: 54.9rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item._left .photo {
    width: 100%;
    height: 30.1rem;
  }
}
#interview .p_iv_qa__item._left .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-top: 14.6rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item._left .text {
    padding-top: 3.4rem;
  }
}
#interview .p_iv_qa__item._right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-left: 13.9rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item._right {
    display: block;
    padding-left: 0;
  }
}
#interview .p_iv_qa__item._right .text {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  width: 41.6rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item._right .text {
    width: auto;
    padding: 0 3.6rem;
  }
}
#interview .p_iv_qa__item._right .photo {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  width: 78.3rem;
  height: 49.1rem;
  margin-left: auto;
  border-radius: 3rem 0 0 3rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item._right .photo {
    width: calc(100% - 3.6rem);
    height: 22.3rem;
    margin: 0 0 3.4rem 3.6rem;
  }
}
#interview .p_iv_qa__item._wide {
  width: min(108.8rem, 100% - 7.2rem);
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item._wide {
    width: calc(100% - 7.2rem);
  }
}
#interview .p_iv_qa__item._wide .photo {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  width: 100%;
  height: 37.6rem;
  margin-top: 2.4rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_qa__item._wide .photo {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    height: 17.8rem;
    margin: 0 0 3.4rem;
  }
}
#interview .p_iv_qa__item._wide .text {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
#interview {
  /* ---- SCHEDULE SAMPLE --------------------------------------- */
}
#interview .p_iv_sch {
  padding-top: 6.4rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch {
    padding-top: 4rem;
  }
}
#interview .p_iv_sch .c_inner {
  width: calc(100% - 2.8rem);
}
#interview .p_iv_sch__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.8rem;
  margin-bottom: -0.8rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__title {
    position: relative;
    z-index: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0;
    margin-bottom: -3.8rem;
  }
}
#interview .p_iv_sch__title .en {
  font-size: 5.7rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__title .en {
    font-size: 3.3rem;
    white-space: nowrap;
  }
}
#interview .p_iv_sch__title .ja {
  font-size: 2.5rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__title .ja {
    top: 0;
    font-size: 2rem;
    color: #154a6f;
    text-align: center;
    margin-top: 1.2rem;
  }
}
#interview .p_iv_sch__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5.3rem;
  padding: 5.5rem 6.7rem 5.5rem 7.6rem;
  background: #fff;
  border-radius: 3rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    padding: 7rem 2.4rem 3.4rem 2.4rem;
  }
}
#interview .p_iv_sch__card .photo {
  width: 31.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
  position: sticky;
  top: calc(var(--hdr_height) + 4rem);
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__card .photo {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 100%;
    height: 18.4rem;
    margin-top: 2.4rem;
  }
}
#interview .p_iv_sch__card .photo img {
  width: 100%;
  height: 100%;
  border-radius: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
}
#interview .p_iv_sch__list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
#interview .p_iv_sch__list li {
  position: relative;
  padding-left: 9.2rem;
  padding-bottom: 2.2rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__list li {
    padding-left: 2.4rem;
    padding-bottom: 3rem;
  }
}
#interview .p_iv_sch__list li:last-child {
  padding-bottom: 0;
}
#interview .p_iv_sch__list li:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 6.7rem;
  top: 0.7rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #154a6f;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__list li:before {
    left: 0rem;
    width: 1.4rem;
    height: 1.4rem;
  }
}
#interview .p_iv_sch__list li:after {
  content: "";
  position: absolute;
  left: 7.25rem;
  top: 0.7rem;
  height: 100%;
  width: 2px;
  background: #154a6f;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__list li:after {
    left: 0.6rem;
  }
}
#interview .p_iv_sch__list li:last-child:after {
  display: none;
}
#interview .p_iv_sch__list .time {
  position: absolute;
  left: 0;
  top: -0.1rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__list .time {
    position: static;
    display: block;
  }
}
#interview .p_iv_sch__list .time._s {
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: 0;
  top: 0.1rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_sch__list .time._s {
    font-size: 2rem;
    line-height: 1.4;
  }
}
#interview .p_iv_sch__list h3 {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  color: var(--c_ink);
}
#interview .p_iv_sch__list p {
  margin-top: 0.2rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.667;
  letter-spacing: 0.05em;
  color: var(--c_ink);
}
#interview {
  /* ---- OTHERS ------------------------------------------------
      中身は component/_c_ivslider.scss。ここでは帯の中の位置だけ。
  ------------------------------------------------------------- */
}
#interview .p_iv_others {
  padding: 20rem 0;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_others {
    padding: 7rem 0;
  }
}
#interview .p_iv_others__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#interview .p_iv_others__title .en {
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_others__title .en {
    font-size: 4rem;
  }
}
#interview .p_iv_others__title .ja {
  font-size: 3rem;
  font-weight: bold;
  margin-top: 0.3rem;
}
@media screen and (max-width: 768px) {
  #interview .p_iv_others__title .ja {
    font-size: 2rem;
  }
}
#interview .c_ctajob {
  padding-bottom: 32rem;
}
@media screen and (max-width: 768px) {
  #interview .c_ctajob {
    padding-bottom: 19rem;
  }
}

/* ============================================================
  requirements — 募集要項（1職種＝1ページ・CMS）
  ------------------------------------------------------------
  背景は採用ページ系のグラデーション。XD は 769px の帯を縦に繰り返して
  いる（上=淡い黄緑 → 中=ターコイズ → 下=青灰）ので、同じ周期で繰り返す。
  1枚に伸ばすとページ丈で色の出方が変わり、見出しの白抜きが読めなくなる。
============================================================ */
@media screen and (max-width: 768px) {
  #requirements .c_mv._plain._onbg .title .en {
    font-size: 4rem;
  }
}
#requirements .c_mv._plain._onbg .title .en,
#requirements .c_mv._plain._onbg .title .ja {
  color: #fff;
}
#requirements .c_mv._plain._onbg .c_pankuzu {
  color: #fff;
}
#requirements .c_mv._plain._onbg .c_pankuzu a {
  color: #fff;
}
#requirements .p_req {
  padding-bottom: 12rem;
}
@media screen and (max-width: 768px) {
  #requirements .p_req {
    padding-bottom: 6rem;
  }
}
@media screen and (max-width: 768px) {
  #requirements .p_req .c_inner {
    width: 100%;
  }
}
#requirements .p_req__card {
  background: #fff;
  border-radius: 3rem;
  padding: 5.7rem 7.6rem 7.5rem;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__card {
    border-radius: 0;
    padding: 3rem 3.6rem 4rem;
  }
}
#requirements .p_req {
  /* ---- 職種の見出し（タグ・タイトル・説明・写真）-------- */
}
#requirements .p_req__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 6rem;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
}
#requirements .p_req__head .textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#requirements .p_req__head .tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 9.8rem;
  height: 3.4rem;
  padding: 0 1.4rem;
  border-radius: 100vh;
  background: #154a6f;
  color: #fff;
  font-size: 1.2rem;
}
#requirements .p_req__head .title {
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  margin-top: 1.6rem;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__head .title {
    font-size: 2rem;
  }
}
#requirements .p_req__head .text {
  font-size: 1.5rem;
  line-height: 1.6666666667;
  margin-top: 1.4rem;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__head .text {
    font-size: 1.4rem;
  }
}
#requirements .p_req__head .image {
  width: 44rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__head .image {
    width: auto;
  }
}
#requirements .p_req__head .image img {
  width: 100%;
  aspect-ratio: 440/277;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#requirements .p_req__subtitle {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  margin-top: 8.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e5e5;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__subtitle {
    font-size: 1.7rem;
    margin-top: 4rem;
  }
}
#requirements .p_req {
  /* ---- 募集要項の表 ------------------------------------- */
}
#requirements .p_req__table dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  padding: 2.6rem 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__table dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.6rem;
    padding: 1.8rem 0;
    font-size: 1.4rem;
  }
}
#requirements .p_req__table dl dt {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 22.3rem;
  font-weight: bold;
  line-height: 1.8666666667;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__table dl dt {
    width: auto;
  }
}
#requirements .p_req__table dl dd {
  line-height: 1.6666666667;
}
#requirements .p_req__btn {
  margin-top: 6rem;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3rem;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__btn {
    margin-top: 4rem;
  }
}
#requirements .p_req__back {
  display: inline-block;
  color: #154a6f;
  font-size: 1.5rem;
  font-weight: bold;
}
#requirements .p_req {
  /* ---- 画面右に追従する応募ボタン ----------------------- */
}
#requirements .p_req__fix {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 20;
}
@media screen and (max-width: 768px) {
  #requirements .p_req__fix {
    padding: 1rem;
    width: 100%;
  }
}

/* ============================================================
  error — 404
============================================================ */
#error .p_error {
  text-align: center;
  padding: 14rem 2rem 20rem;
}
@media screen and (max-width: 768px) {
  #error .p_error {
    padding: 8rem 2rem 8rem;
  }
}
#error .p_error__num {
  font-size: 10rem;
  font-weight: 600;
  line-height: 1;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #error .p_error__num {
    font-size: 6rem;
  }
}
#error .p_error__title {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 1.8rem;
}
@media screen and (max-width: 768px) {
  #error .p_error__title {
    font-size: 2.2rem;
  }
}
#error .p_error__text {
  font-size: 1.8rem;
  line-height: 1.6666666667;
  margin-top: 1.6rem;
}
@media screen and (max-width: 768px) {
  #error .p_error__text {
    font-size: 1.4rem;
  }
}
#error .p_error__btn {
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
  #error .p_error__btn {
    margin-top: 3rem;
  }
}

/* ============================================================
  styleguide — 共通パーツ一覧（制作用ページ）
  ------------------------------------------------------------
  ここは「パーツを並べる台」のスタイルだけ。パーツ自体の見た目は
  component/ 側が持つ。**このファイルは公開サイトの見た目に影響しない**
  （#styleguide 配下だけに閉じている）。
  styleguide.html を消すときは style.scss の @use ごと外す。
============================================================ */
#styleguide .p_sg {
  padding-bottom: 12rem;
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg {
    padding-bottom: 6rem;
  }
}
#styleguide .p_sg__lead {
  font-size: 1.5rem;
  line-height: 2;
}
#styleguide .p_sg__lead code {
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 0.1em 0.4em;
  border-radius: 0.3rem;
}
#styleguide .p_sg {
  /* ---- 目次 -------------------------------------------- */
}
#styleguide .p_sg__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
#styleguide .p_sg__nav a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 3.2rem;
  padding: 0 1.6rem;
  border: 1px solid #154a6f;
  border-radius: 100vh;
  background: #fff;
  color: #154a6f;
  font-size: 1.3rem;
  font-weight: bold;
}
@media (any-hover: hover) {
  #styleguide .p_sg__nav a:hover {
    background: #154a6f;
    color: #fff;
    opacity: 1;
  }
}
#styleguide .p_sg {
  /* ---- 1パーツぶんのブロック --------------------------- */
}
#styleguide .p_sg__block {
  margin-top: 8rem;
  scroll-margin-top: calc(var(--hdr_height) + 2rem);
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__block {
    margin-top: 5rem;
  }
}
#styleguide .p_sg__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #154a6f;
  font-size: 2.4rem;
  font-weight: bold;
  color: #154a6f;
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__title {
    font-size: 1.8rem;
  }
}
#styleguide .p_sg__title span {
  font-size: 1.4rem;
  font-weight: normal;
  color: var(--c_ink);
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__title span {
    font-size: 1.2rem;
  }
}
#styleguide .p_sg__note {
  font-size: 1.5rem;
  line-height: 1.9;
  margin-top: 1.6rem;
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__note {
    font-size: 1.3rem;
  }
}
#styleguide .p_sg__note code {
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 0.1em 0.4em;
  border-radius: 0.3rem;
  font-size: 0.92em;
}
#styleguide .p_sg__note strong {
  font-weight: bold;
}
#styleguide .p_sg__demo {
  background: #fff;
  border-radius: 1rem;
  padding: 4rem;
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__demo {
    padding: 2rem 1.5rem;
  }
}
#styleguide .p_sg__demo._dark {
  background: #154a6f;
}
#styleguide .p_sg__sub {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 4rem 0 1.5rem;
}
#styleguide .p_sg {
  /* ---- 配色見本 ---------------------------------------- */
}
#styleguide .p_sg__colors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 3rem;
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__colors {
    grid-template-columns: 1fr;
  }
}
#styleguide .p_sg__colors li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__colors li {
    font-size: 1.2rem;
  }
}
#styleguide .p_sg__colors li span {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 5.6rem;
  height: 3.6rem;
  border-radius: 0.4rem;
  border: 1px solid #e5e5e5;
}
#styleguide .p_sg__colors li b {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 11rem;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}
#styleguide .p_sg {
  /* ---- 書体見本 ---------------------------------------- */
}
#styleguide .p_sg__fonts dt {
  font-size: 1.6rem;
  font-weight: bold;
  color: #154a6f;
}
#styleguide .p_sg__fonts dt + dd {
  margin-top: 0.6rem;
}
#styleguide .p_sg__fonts dd {
  font-size: 1.4rem;
  line-height: 1.8;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #e5e5e5;
}
#styleguide .p_sg__fonts dd:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#styleguide .p_sg__fonts dd span {
  display: block;
  margin-top: 0.6rem;
}
#styleguide .p_sg {
  /* ---- 説明用の小物 ------------------------------------ */
}
#styleguide .p_sg__list {
  font-size: 1.5rem;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__list {
    font-size: 1.3rem;
  }
}
#styleguide .p_sg__list li + li {
  margin-top: 0.6rem;
}
#styleguide .p_sg__list code {
  background: #f0f3f5;
  padding: 0.1em 0.4em;
  border-radius: 0.3rem;
}
#styleguide .p_sg__flag {
  display: inline-block;
  background: #eaf6ff;
  color: #154a6f;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.2em 0.8em;
  border-radius: 0.3rem;
}
#styleguide .p_sg__ruler {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 4rem;
  background: #eaf6ff;
  border: 1px dashed #154a6f;
  color: #154a6f;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 2rem;
}
#styleguide .p_sg__tag {
  font-size: 1.3rem;
  color: var(--c_muted);
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__tag {
    font-size: 1.2rem;
  }
}
#styleguide .p_sg__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid #e5e5e5;
}
#styleguide .p_sg__row:last-child {
  border-bottom: none;
}
#styleguide .p_sg__row._dark {
  background: #154a6f;
  border-radius: 0.6rem;
  padding: 2rem;
  margin: 2rem 0;
  border-bottom: none;
}
#styleguide .p_sg__row._dark .p_sg__tag {
  color: #fff;
}
#styleguide .p_sg {
  /* ---- パーツごとの置き場 ------------------------------ */
}
#styleguide .p_sg__ondark {
  background: #154a6f;
  border-radius: 0.6rem;
  padding: 3rem 2rem 1rem;
  margin-top: 3rem;
}
#styleguide .p_sg__mvdemo {
  margin-top: 3rem;
  border: 1px dashed #c7c7c7;
}
#styleguide .p_sg__mvdemo .c_mv._plain {
  padding: 3rem 0;
}
#styleguide .p_sg__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.7rem;
}
@media screen and (max-width: 768px) {
  #styleguide .p_sg__cards {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
#styleguide .p_sg__slider {
  width: 49.8rem;
  max-width: 100%;
}
#styleguide .p_sg__slider img {
  width: 100%;
  aspect-ratio: 498/327;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#styleguide .p_sg__slider .swiper {
  border-radius: 1.5rem;
}
#styleguide .p_sg__narrow {
  width: 68.2rem;
  max-width: 100%;
}
#styleguide .p_sg__pankuzu {
  background: #fff;
  border: 1px dashed #c7c7c7;
}
#styleguide .p_sg__anime {
  font-size: 1.8rem;
  font-weight: bold;
}
#styleguide .p_sg__anime + .p_sg__anime {
  margin-top: 1.5rem;
}
#styleguide .p_sg .c_form {
  border: 1px solid #e5e5e5;
}

:root {
  --hdr_height: 7.35rem;
}
@media screen and (max-width: 768px) {
  :root {
    --hdr_height: 8rem;
  }
}
:root {
  --inner_max: 1280px;
  --c_ink: #484848;
  --c_paper: #ffffff;
  --c_subtle: #f7f6f2;
  --c_line: #e6e3dc;
  --c_muted: #6b6b6b;
  --c_accent: #111111;
  --c_accent_light: #3a3a3a;
  --c_sand: #f0ebe1;
  --c_sand_line: #e6e0d4;
  --c_ink_dark: #050505;
}/*# sourceMappingURL=style.css.map */