@charset "UTF-8";
/**
 * uaplus.css version 0.2.0
 */
/**
 * Different box model
 *
 * We use the traditional box model, where the padding and border
 * of the element is drawn inside and not outside the specified
 * width and height. That makes combining relative and absolute
 * units in properties like <code>inline-size</code> and
 * <code>block-size</code> easier.
 *
 * See https://en.wikipedia.org/wiki/CSS_box_model
 */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/**
 * Improve focus styles
 *
 * Add spacing between content and its focus outline.
 */
:where(:focus-visible) {
  outline-offset: 3px;
}

/**
 * Disable text size adjustment
 *
 * To improve readability on non-mobile optimized websites, browsers
 * like mobile Safari increase the default font size when you switch
 * a website from portrait to landscape. We don't want that for our
 * optimized sites.
 *
 * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
 */
:where(html) {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/**
 * Increase line height
 *
 * Long paragraphs are easier to read if the line height is higher.
 */
:where(html) {
  line-height: 1.5;
}

/**
 * Add scrollbar gutter
 *
 * Prevent the page from “jumping” when switching from a long to a short page.
 *
 */
:where(html) {
  scrollbar-gutter: stable;
}

/**
 * Remove UA styles for h1s nested in sectioning content
 *
 * Nesting h1s in section, articles, etc., shouldn't influence the
 * styling of the heading since nesting doesn't influence
 * semantics either.
 *
 * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
 * See https://github.com/whatwg/html/pull/11102
 * See https://html.spec.whatwg.org/#sections-and-headings
 */
:where(h1) {
  font-size: 2em;
  margin-block: 0.67em;
}

/**
 * Improve abbreviations with titles
 *
 * The abbr element with the title isn't helpful regarding
 * accessibility because support is inconsistent, and it's only
 * accessible to some users. Still, it's commonly used.
 * This rule shows a dotted underline on abbreviations in all
 * browsers (there's a bug in Safari) and changes the cursor.
 *
 * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
 */
:where(abbr[title]) {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

/**
 * Optimize mark element in Forced Colors Mode
 *
 * The colors of the mark element don't change in Forced Colors Mode,
 * which can be problematic. Use system colors instead.
 *
 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
 */
@media (forced-colors: active) {
  :where(mark) {
    color: HighlightText;
    background-color: Highlight;
  }
}
/**
 * Avoid overflow caused by embedded content
 *
 * Ensure that embedded content (audio, video, images, etc.)
 * doesn't overflow its container.
 */
:where(audio, iframe, img, svg, video) {
  max-block-size: 100%;
  max-inline-size: 100%;
}

/**
 * Prevent fieldsets from causing overflow
 *
 * Reset the default `min-inline-size: min-content` to prevent
 * children from stretching fieldsets
 *
 * See https://github.com/twbs/bootstrap/issues/12359
 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
 */
:where(fieldset) {
  min-inline-size: 0;
}

/**
 * Turn labels into block elements
 *
 * Labels for inputs, selects, and textarea should be block
 * elements.
 */
:where(label):has(+ :where(input:not([type=radio], [type=checkbox]), select, textarea)) {
  display: block;
}

/**
 * Increase the block-size of textareas
 *
 * The default height of textareas is small. We increase it a bit.
 */
:where(textarea:not([rows])) {
  min-block-size: 6em;
}

/**
 * Inherit font styling in form elements
 *
 * buttons, inputs, selects, and textarea should have the same font
 * family and size as the rest of the page.
 */
:where(button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
}

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

/* iOS only */
@supports (-webkit-touch-callout: none) {
  :where([type=search]) {
    border: 1px solid -apple-system-secondary-label;
    background-color: canvas;
  }
}
/**
 * Maintain direction in some input types
 *
 * Some input types should remain left-aligned in right-to-left
 * languages,but only if the value isn't empty because the
 * placeholder should be right-aligned.
 *
 * See https://rtlstyling.com/posts/rtl-styling#form-inputs
 */
:where(input):where([type=tel], [type=url], [type=email], [type=number]):not(:placeholder-shown) {
  direction: ltr;
}

/**
 * Improve table styling
 *
 * With the default styling, tables are hard to scan. These rules
 * add padding and collapsed borders.
 */
:where(table) {
  border-collapse: collapse;
  border: 1px solid;
}

:where(th, td) {
  border: 1px solid;
  padding: 0.25em 0.5em;
  vertical-align: top;
}

/**
 * Fading dialogs
 *
 * Add fade in and fade out transitions for the dialog element
 * and backdrops
 */
:where(dialog)::backdrop {
  background: oklch(0% 0 0deg / 0.3);
}

:where(dialog, [popover]),
:where(dialog)::backdrop {
  opacity: 0;
  transition: opacity 150ms ease-out, display 150ms allow-discrete, overlay 150ms allow-discrete;
}

:where(dialog[open], :popover-open),
:where(dialog[open])::backdrop {
  opacity: 1;
}

@starting-style {
  :where(dialog[open], :popover-open),
  :where(dialog[open])::backdrop {
    opacity: 0;
  }
}
/**
 * Increase specificity of [hidden]
 *
 * Make it harder to accidentally unhide elements with the
 * [hidden] attribute while still maintaining the until-found
 * functionality.
 */
[hidden]:not([hidden=until-found]) {
  display: none !important;
}

/**
 * Turn images into block elements
 */
:where(img) {
  display: block;
}

/**
 * Change cursor of <summary>
 *
 * By default, only the ::marker inside the summary uses the
 * default cursor.
 */
:where(summary) {
  cursor: default;
}

/**
 * Remove the default border from iframes
 */
:where(iframe) {
  border: none;
}

:root {
  /* 3つのセクション幅（最大幅） */
  --max-1: 1600px;
  --max-2: 1200px;
  --max-3: 1100px;
  --outer: 50px; /* コンテナ内側の左右ガイド */
  --center-offset: 20px; /* 中央±20px（固定で残す） */
}

.guidelines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.guidelines .guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  /* デフォルト */
  background: var(--line-color, #00e8e8);
  opacity: var(--line-opacity, 0.9);
}

/* ===== 3セット共通の計算ロジック =====
   各要素に --w を与える（例: --w: var(--max-1)）
   画面幅より大きいときは 100vw に丸めて画面外に飛ばないようにする
*/
.guidelines .guide[data-set] {
  --cw: min(var(--w), 100vw);
}

/* コンテナ左右端 */
.guidelines .container-start {
  left: calc(50% - var(--cw) / 2);
}

.guidelines .container-end {
  left: calc(50% + var(--cw) / 2);
}

/* ===== 中央（常に表示） ===== */
.guidelines .center {
  left: 50%;
  background: #00ff00;
  opacity: 0.95;
}

.guidelines .center-left {
  left: calc(50% - var(--center-offset));
}

.guidelines .center-right {
  left: calc(50% + var(--center-offset));
}

/* ===== セット別の見分け（任意：色/透明度） ===== */
.guidelines [data-set="1"] {
  --w: var(--max-1);
  --line-color: #00ff00;
  --line-opacity: 0.85;
}

.guidelines [data-set="2"] {
  --w: var(--max-2);
  --line-opacity: 0.95;
}

.guidelines [data-set="3"] {
  --w: var(--max-3);
  --line-opacity: 0.7;
}

/* ====================================
_base.scss
==================================== */
:root {
  /* Colors */
  --cl-white: #ffffff;
  --cl-color01: #022958;
  --cl-color02: #035da2;
  --cl-color03: #004e89;
  --cl-line: #d0d0d0;
  --cl-bg01: #f8f8f8;
  --cl-bg02: #dbebff;
  --cl-font: #333333;
}

:root {
  --fs-115: clamp(2.75rem, 1.64rem + 5.55vw, 7.1875rem);
  --fs-94: clamp(2.375rem, 1.5rem + 4.38vw, 5.875rem);
  --fs-70: clamp(2rem, 1.41rem + 2.97vw, 4.375rem);
  --fs-57: clamp(1.6875rem, 1.22rem + 2.34vw, 3.5625rem);
  --fs-52: clamp(1.6875rem, 1.3rem + 1.95vw, 3.25rem);
  --fs-54: clamp(1.6875rem, 1.3rem + 1.95vw, 3.25rem);
  --fs-43: clamp(1.5rem, 1.2rem + 1.48vw, 2.6875rem);
  --fs-36: clamp(1.0625rem, 0.77rem + 1.48vw, 2.25rem);
  --fs-32: clamp(1.25rem, 1.06rem + 0.94vw, 2rem);
  --fs-28: clamp(1.125rem, 0.97rem + 0.78vw, 1.75rem);
  --fs-27: clamp(1.125rem, 0.98rem + 0.7vw, 1.6875rem);
  --fs-26: clamp(1.0625rem, 0.92rem + 0.7vw, 1.625rem);
  --fs-25: clamp(1.0625rem, 0.94rem + 0.63vw, 1.5625rem);
  --fs-24: clamp(1rem, 0.88rem + 0.63vw, 1.5rem);
  --fs-23: clamp(1rem, 0.89rem + 0.55vw, 1.4375rem);
  --fs-22: clamp(1rem, 0.91rem + 0.47vw, 1.375rem);
  --fs-20: clamp(0.9375rem, 0.86rem + 0.39vw, 1.25rem);
  --fs-19: clamp(0.875rem, 0.8rem + 0.39vw, 1.1875rem);
  --fs-18: clamp(0.875rem, 0.81rem + 0.31vw, 1.125rem);
  --fs-17: clamp(0.8125rem, 0.75rem + 0.31vw, 1.0625rem);
  --fs-16: clamp(0.8125rem, 0.77rem + 0.23vw, 1rem);
  --fs-15: 0.75rem;
  --fs-14: 0.75rem;
  --fs-13: 0.6875rem;
  --fs-12: 0.6875rem;
}

@media screen and (min-width: 769px) {
  :root {
    --fs-15: 0.9375rem;
    --fs-14: 0.875rem;
    --fs-13: 0.8125rem;
    --fs-12: 0.75rem;
  }
}
@media screen and (min-width: 1601px) {
  html {
    font-size: 1vw;
  }
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  position: relative;
  font-size: var(--fs-16);
  color: var(--cl-font);
  background: var(--cl-bg01);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: 0.5s ease;
  overflow-y: visible;
  overflow-anchor: none;
}

.b-visuallyHidden {
  position: fixed !important;
  top: 0px !important;
  left: 0px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
}

.b-inner {
  width: min(68.75rem, 94%);
  margin-inline: auto;
}
.b-inner__sm {
  width: min(68.75rem, 94%);
  margin-inline: auto;
}
.b-inner__md {
  width: min(75rem, 94%);
  margin-inline: auto;
}
.b-inner__lg {
  width: min(100rem, 96%);
  margin-inline: auto;
}

@supports (text-box-trim: trim-both) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    text-box-trim: trim-both;
    text-box-edge: text;
  }
}

@media screen and (min-width: 769px) {
  .--sp {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .--pc {
    display: none !important;
  }
}

/* src/_common/scss/_base/_lenis.scss */
/* --------------------------------------------------
   Lenis 推奨の基本スタイル
   -------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

/* --------------------------------------------------
   stop() 中は背景スクロールを止める
   モーダル連携で効く
   -------------------------------------------------- */
.lenis.lenis-stopped {
  overflow: clip;
}

/* --------------------------------------------------
   Lenis が制御している中で、特定領域だけ通常スクロールにしたい場合の保険
   モーダル内部スクロールなどで使える
   -------------------------------------------------- */
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

/* --------------------------------------------------
   慣性スクロール中の iframe 誤操作対策
   必要ない案件なら削ってもOK
   -------------------------------------------------- */
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

*[class*=b-sans-] {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

*[class*=b-en-] {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.b-en-100 {
  font-weight: 100;
}

.b-sans-100 {
  font-weight: 100;
}

.b-en-200 {
  font-weight: 200;
}

.b-sans-200 {
  font-weight: 200;
}

.b-en-300 {
  font-weight: 300;
}

.b-sans-300 {
  font-weight: 300;
}

.b-en-400 {
  font-weight: 400;
}

.b-sans-400 {
  font-weight: 400;
}

.b-en-500 {
  font-weight: 500;
}

.b-sans-500 {
  font-weight: 500;
}

.b-en-600 {
  font-weight: 600;
}

.b-sans-600 {
  font-weight: 600;
}

.b-en-700 {
  font-weight: 700;
}

.b-sans-700 {
  font-weight: 700;
}

.b-en-800 {
  font-weight: 800;
}

.b-sans-800 {
  font-weight: 800;
}

.b-en-900 {
  font-weight: 900;
}

.b-sans-900 {
  font-weight: 900;
}

.c-pic {
  display: block;
}
.c-pic img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.c-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: min(17.8125rem, calc(180 / 375 * 100vw));
  background: var(--cl-white);
  font-size: var(--fs-15);
  letter-spacing: 0.1em;
  color: var(--cl-color01);
  text-decoration: none;
  font-weight: 700;
  padding-inline: 1.4666666667em 1.2em;
  padding-block: 1.25em;
}
.c-btn img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(21%) saturate(7280%) hue-rotate(200deg) brightness(94%) contrast(99%);
}

.c-ttl {
  margin-block: 0;
}
.c-ttl__en {
  display: block;
  font-size: var(--fs-94);
  letter-spacing: 0;
  line-height: 1;
}
.c-ttl__en::first-letter {
  color: var(--cl-color02);
}
.c-ttl__ja {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  font-size: var(--fs-14);
  gap: 1em;
  font-weight: 700;
  margin-block-start: 0.7857142857em;
}
.c-ttl__ja::before {
  content: "";
  display: block;
  width: clamp(2.625rem, 1.97rem + 3.28vw, 5.25rem);
  height: 1px;
  background: var(--cl-font);
}

.c-secTtl {
  margin-block: 0;
}
.c-secTtl__en {
  display: block;
  font-size: var(--fs-57);
  letter-spacing: 0;
  line-height: 1;
}
.c-secTtl__ja {
  font-size: var(--fs-19);
  display: block;
  margin-block-start: 1em;
  font-weight: 700;
}

.p-subMv {
  padding-block-start: var(--header-h);
  padding-block-end: clamp(2.5rem, 2.19rem + 1.56vw, 3.75rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.p-subMv::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(25.81625rem, 25.82vw);
  height: 100%;
  clip-path: polygon(0 0, 67.27% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--cl-color01) 0%, var(--cl-color02) 100%);
  z-index: 0;
}
.p-subMv__inner {
  position: relative;
}
.p-subMv__fig {
  margin-inline-end: calc(50% - 50vw);
}
.p-subMv__fig img {
  height: min(23.125rem, calc(250 / 375 * 100vw));
}
.p-subMv__body {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: clamp(3.625rem, 2.5rem + 5.63vw, 8.125rem);
  transform: translateY(-50%);
}
.p-subMv .c-ttl {
  color: var(--cl-white);
}
.p-subMv .c-ttl .c-ttl__en {
  font-size: var(--fs-70);
}
.p-subMv .c-ttl .c-ttl__en::first-letter {
  color: var(--cl-white);
}
.p-subMv .c-ttl .c-ttl__ja::before {
  background: var(--cl-white);
}

.p-breadcrumb__list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  list-style: none;
  margin-block: 1.3125rem 0;
  padding-inline-start: 0;
  display: flex;
  align-items: baseline;
}
.p-breadcrumb__list > li {
  font-size: var(--fs-12);
  color: var(--cl-font);
}
.p-breadcrumb__list > li a {
  font-family: Helvetica, Arial, sans-serif;
  color: var(--cl-font);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}
.p-breadcrumb__list > li a::after {
  content: "";
  background: url(/_common/img/cmn/ico-arrow02.svg) no-repeat center;
  display: inline-block;
  inline-size: 4px;
  block-size: 8px;
  margin-inline-start: 0.625rem;
}
.p-breadcrumb__list > li span {
  color: var(--cl-color01);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* ====================================
ヘッダー
==================================== */
.l-hd {
  position: absolute;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding-block-start: clamp(1.5rem, 1.42rem + 0.39vw, 1.8125rem);
  padding-block-end: 1.5rem;
  background-color: transparent;
  transition: background-color 0.3s ease, padding-block 0.3s ease;
}
.l-hd.active {
  background: var(--cl-white);
}
.l-hd__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding-inline-end: 3%;
}
.l-hd__logo {
  display: block;
  margin-block: 0;
  margin-inline-start: clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
  flex-shrink: 0;
  width: min(11.375rem, calc(100 / 375 * 100vw));
  position: relative;
  z-index: 9999;
}
.l-hd__navWrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1.375rem, 1.09rem + 1.41vw, 2.5rem);
  min-width: 0;
}
@media screen and (max-width: 1100px) {
  .l-hd__nav {
    display: none;
  }
}
.l-hd__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1.125rem, 1.45vw, 1.875rem);
  font-size: var(--fs-15);
  letter-spacing: 0.05em;
  font-weight: 700;
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
  white-space: nowrap;
}
.l-hd__item > a {
  color: var(--cl-font);
  text-decoration: none;
}
.l-hd__cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  background: var(--cl-white);
  padding: 0;
  margin: 0;
  filter: drop-shadow(0px -6px 16px rgba(0, 0, 0, 0.12));
}
@media screen and (min-width: 1101px) {
  .l-hd__cta {
    inset: auto 0 0 auto;
    display: block;
    width: max-content;
    padding-inline: 1.5em;
    padding-block: 1.75em 1.5em;
    border-radius: 0 0 0 0.625rem;
    filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.06));
  }
}
@media screen and (min-width: 1470px) {
  .l-hd__cta {
    position: absolute;
    inset: 0 0 auto auto;
  }
}
.l-hd__panel .l-hd__cta {
  position: static;
  width: 100%;
  margin-block-start: clamp(1.5rem, 1.38rem + 0.63vw, 2rem);
}
.l-hd__ctaLead {
  font-size: var(--fs-18);
  letter-spacing: 0.05em;
  color: var(--cl-color01);
  background: var(--cl-bg02);
  font-weight: 700;
  margin-block: 0 0.375rem;
  text-align: center;
  padding-block: 0.25em;
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaLead {
  display: none;
}
@media screen and (min-width: 1101px) {
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaLead {
    display: block;
  }
}

.l-hd__ctaText {
  font-size: var(--fs-28);
  letter-spacing: 0.05em;
  color: var(--cl-color02);
  font-weight: 900;
  text-align: center;
  margin-block: 0 0.375rem;
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaText {
  display: none;
}
@media screen and (min-width: 1101px) {
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaText {
    display: block;
  }
}

.l-hd__ctaTel {
  font-size: var(--fs-54);
  letter-spacing: 0.05em;
  color: var(--cl-color02);
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.1851851852em;
  font-family: Helvetica, Arial, sans-serif;
}
.l-hd__ctaTel img {
  width: min(2.9375rem, calc(32 / 375 * 100vw));
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaTel {
  font-size: 0;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--cl-white);
  background: var(--cl-color02);
  padding-block: 0.625rem;
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaTel img {
  width: 1.5rem;
  filter: brightness(0) invert(1);
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaTel::after {
  content: "電話";
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1101px) {
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaTel {
    font-size: var(--fs-54);
    flex-direction: row;
    gap: 0.1851851852em;
    color: var(--cl-color02);
    background: transparent;
    padding-block: 0;
  }
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaTel img {
    width: min(2.9375rem, calc(32 / 375 * 100vw));
    filter: none;
  }
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaTel::after {
    content: none;
  }
}

.l-hd__ctaBtns {
  display: grid;
  gap: 0.625rem;
  margin-block-start: 0.75em;
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtns {
  display: contents;
  margin-block-start: 0;
}

@media screen and (min-width: 1101px) {
  .l-hd__ctaBtns {
    grid-template-columns: repeat(2, 1fr);
  }
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtns {
    display: grid;
    grid-template-columns: 1fr;
    margin-block-start: 0.75em;
  }
}
.l-hd__ctaBtn {
  font-size: var(--fs-16);
  letter-spacing: 0.05em;
  color: var(--cl-white);
  font-weight: 700;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  padding-inline: 1em;
  padding-block: 0.8125em;
}
.l-hd__ctaBtn.--mail {
  background: var(--cl-color01);
}
.l-hd__ctaBtn.--line {
  background: #03c755;
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn {
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0;
  padding-block: 0.625rem;
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn img {
  width: 1.5rem;
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn::after {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn.--mail::after {
  content: "Webフォーム";
}
@media screen and (min-width: 1101px) {
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn.--mail::after {
    display: none;
  }
}
.l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn.--line::after {
  content: "LINE";
}
@media screen and (min-width: 1101px) {
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn.--line::after {
    display: none;
  }
}
@media screen and (min-width: 1101px) {
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn {
    flex-direction: row;
    gap: 2px;
    font-size: var(--fs-16);
    padding-inline: 1em;
    padding-block: 0.8125em;
  }
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn img {
    width: auto;
  }
  .l-hd__ctaWrap > .l-hd__cta .l-hd__ctaBtn::after {
    content: none;
  }
}

.l-hd {
  /* ------------------------------
  SP用トグルボタン
  ------------------------------ */
}
.l-hd__toggle {
  position: relative;
  inset: 1.25rem 1.25rem auto auto;
  inset: 0 0 auto auto;
  z-index: 1002;
  width: min(3.1875rem, calc(48 / 375 * 100vw));
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--cl-color01);
  justify-self: end;
  z-index: 2222;
}
@media screen and (min-width: 1101px) {
  .l-hd__toggle {
    display: none;
  }
}
.l-hd__toggle span {
  position: absolute;
  inset-inline-start: 50%;
  width: min(1.5rem, calc(18 / 375 * 100vw));
  height: 1px;
  background: white;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease, inset 0.3s ease;
}
.l-hd__toggle span:nth-child(1) {
  inset-block-start: calc(50% - 0.375rem);
}
.l-hd__toggle span:nth-child(2) {
  inset-block-start: 50%;
}
.l-hd__toggle span:nth-child(3) {
  inset-block-start: calc(50% + 0.375rem);
}
.l-hd.is-menu-open .l-hd__toggle span:nth-child(1) {
  inset-block-start: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.l-hd.is-menu-open .l-hd__toggle span:nth-child(2) {
  opacity: 0;
}
.l-hd.is-menu-open .l-hd__toggle span:nth-child(3) {
  inset-block-start: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

.l-hd {
  /* ------------------------------
  SP用ドロワー
  ------------------------------ */
}
.l-hd__panel {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--cl-bg02);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
@media screen and (min-width: 1101px) {
  .l-hd__panel {
    display: none;
  }
}
.l-hd.is-menu-open .l-hd__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.l-hd__panelInner {
  padding-block-start: var(--header-h);
  padding-inline: 3%;
  min-height: 100dvh;
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.l-hd.is-menu-open .l-hd__panelInner {
  opacity: 1;
  transform: translateX(0);
}

.l-hd__navSpList {
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}
.l-hd__navSpItem {
  font-size: var(--fs-20);
  padding-block: 1em;
  border-block-end: 1px solid var(--cl-line);
  padding-inline: 0.5em;
}
.l-hd__navSpItem a {
  text-decoration: none;
  color: var(--cl-font);
}
.l-hd__navSpCta {
  margin-block-start: 2rem;
  padding-inline: 0.5rem;
}
.l-hd__navSpLead {
  font-size: var(--fs-14);
  line-height: 1.4285714286;
  margin-block: 0;
  color: var(--cl-font);
}
.l-hd__navSpTel {
  margin-block: 0.75rem 0;
}
.l-hd__navSpTel a {
  text-decoration: none;
  color: var(--cl-color01);
  font-size: var(--fs-36);
  line-height: 1;
  font-weight: 700;
}
.l-hd__navSpHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.l-hd__navSpToggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: none;
  background: none;
  margin: -0.75rem;
  padding: 0.75rem;
  transform: rotate(90deg);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.l-hd__navSpToggle img {
  display: block;
  pointer-events: none;
}
.l-hd__navSpSubList {
  list-style: none;
  margin-block: 1em 0;
  padding-inline-start: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: grid;
  gap: 0.5em;
  font-size: var(--fs-18);
  transform: translateY(-0.5rem);
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: max-height, opacity, transform;
}
.l-hd__navSpItem.is-open .l-hd__navSpSubList {
  max-height: var(--drawer-sub-height, 0px);
  opacity: 1;
  transform: translateY(0);
}

.l-hd__navSpSubList a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5em;
  margin-inline-start: 1em;
}
.l-hd__navSpSubList a::before {
  content: "";
  display: block;
  width: 0.5em;
  height: 2px;
  background: var(--cl-font);
  border-radius: 50%;
}

.is-menu-open .l-hd__logo > a {
  color: var(--cl-font);
}

/* ====================================
	フッター
==================================== */
.l-ft {
  border-block-start: 1px solid var(--cl-line);
  background: var(--cl-white);
  padding-block-start: clamp(1.5rem, 1.33rem + 0.86vw, 2.1875rem);
}
.l-ft__inner {
  border-block-end: 1px solid var(--cl-line);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  column-gap: clamp(3.25rem, 2.44rem + 4.06vw, 6.5rem);
  row-gap: clamp(1.625rem, 1.41rem + 1.09vw, 2.5rem);
  padding-block-end: clamp(1.625rem, 1.41rem + 1.09vw, 2.5rem);
  padding-inline: 2%;
}
@media screen and (min-width: 769px) {
  .l-ft__inner {
    flex-direction: row;
    padding-inline: 0;
    align-items: flex-start;
  }
}
.l-ft__info {
  margin-block: 0;
  font-size: var(--fs-12);
  letter-spacing: 0;
  line-height: 1.8333333333;
}
.l-ft__copy {
  display: block;
  width: 100%;
  font-size: 0.625rem;
  margin-block: 0;
  font-weight: 400;
  text-align: center;
  padding-block: 2em;
}
