@charset "UTF-8";
/* Scss Document */
/*Settings
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/***
    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons&display=swap");
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

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

/* Reapply the pointer cursor for anchor tags */
a,
button {
  cursor: pointer;
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
       appearance: revert;
}

/* reset default text opacity of input placeholder */
::-moz-placeholder {
  color: unset;
}
::placeholder {
  color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

/*変数・関数*/
/*SCSS変数
  -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*メディアクエリ
-=========-=========-=========-=========-=========*/
/* 追加 */
/*CSS変数
  -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
:root {
  /*カラー関連
  -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
  /*メインカラー
  -=========-=========-=========-=========-=========*/
  --mc-a: #3C85D2;
  --mc-al: #AACAEB;
  --mc-ad: #1450a0;
  --mc-b: #1eb9af;
  --mc-bl: #B8EDEB;
  --mc-bd: #177D79;
  /*アクセントカラー
  -=========-=========-=========-=========-=========*/
  --ac-a: #FFEA01;
  --ac-al: #FFF8AE;
  --ac-ad: #D4C303;
  --ac-b: #FF307F;
  --ac-bl: #f6b8ca;
  --ac-bd: #B12114;
  --ac-c: #00BC5B;
  --ac-cl: #69FFB1;
  --ac-cd: #048E47;
  /*背景色
  -=========-=========-=========-=========-=========*/
  --bgc-a: #F2F7F8;
  --bgc-b: #F8F6F2;
  --bgc-c: #F3F8F2;
  --bgc-d: #B8DCE3;
  /*グレートーン
  -=========-=========-=========-=========-=========*/
  --gc-w: #FFFFFF;
  --gc-l: #DFDFDF;
  --gc-ml: #BFBFBF;
  --gc-m: #808080;
  --gc-md: #404040;
  --gc-d: #202020;
  --gc-b: #000000;
  /*レイアウト関連
  -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
  /*メディアクエリ
  -=========-=========-=========-=========-=========*/
  --mq-md: 560px;
  --mq-lg: 960px;
  /* 追加 */
  --mq-md--hp1: 320px;
  --mq-md--hp2: 428px;
  --mq-md--hp3: 834px;
  --mq-lg--hp1: 880px;
  --mq-lg--hp2: 1240px;
  /*スペース・余白
  -=========-=========-=========-=========-=========*/
  --spacing-5: 4px;
  --spacing-10: 8px;
  --spacing-15: 12px;
  --spacing-20: 16px;
  --spacing-30: 24px;
  --spacing-40: 32px;
  --spacing-50: 40px;
  --spacing-60: 48px;
  --spacing-70: 56px;
  --spacing-80: 64px;
  --spacing-90: 72px;
  --spacing-100: 80px;
  --spacing-150: 120px;
  --spacing-200: 160px;
  /*スペース・余白（横幅：560px~960px間レスポンシブ用可変）
  -=========-=========-=========-=========-=========*/
  --spacing-xs: clamp(0.5rem, 0.15rem + 1vw, 0.75rem);
  --spacing-sm: clamp(0.75rem, 0.4rem + 1vw, 1rem);
  --spacing-base: clamp(1rem, 0.3rem + 2vw, 1.5rem);
  --spacing-md: clamp(1.5rem, 0.8rem + 2vw, 2rem);
  --spacing-lg: clamp(2rem, 1.3rem + 2vw, 2.5rem);
  --spacing-xl: clamp(2.5rem, -1rem + 10vw, 5rem);
  --spacing-2xl: clamp(5rem, 1.5rem + 10vw, 7.5rem);
  --spacing-3xl: clamp(7.5rem, 4rem + 10vw, 10rem);
  /* 差が大きいパージョン */
  --spacing-base-lg: clamp(1rem, -1.1rem + 6vw, 2.5rem);
  --spacing-jumbotronHeight: clamp(25rem, 7.57481296758105rem + 49.87531172069825vw, 37.5rem);
  /*角R
  -=========-=========-=========-=========-=========*/
  --br-xs: 2px;
  --br-sm: 4px;
  --br-base: 8px;
  --br-md: 12px;
  --br-lg: 16px;
  --br-xl: 20px;
  --br-2xl: 24px;
  --br-3xl: 32px;
  --br-4xl: 40px;
  --br-100: 100vh;
  /*フォント関連
  -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
  /*font-size
  -=========-=========-=========-=========-=========*/
  --fs-2xs: 0.625rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-xl175: 1.75rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3rem;
  --fs-5xl: 4rem;
  --fs-6xl: 5rem;
  /*font-size（横幅：560px~960px間レスポンシブ用可変）
  -=========-=========-=========-=========-=========*/
  --text-xs: clamp(0.625rem, 0.45rem + 0.5vw, 0.75rem);
  --text-sm: clamp(0.75rem, 0.575rem + 0.5vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.7rem + 0.5vw, 1rem);
  --text-md: clamp(1rem, 0.825rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 0.95rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 0.8rem + 2vw, 2rem);
  --text-3xl: clamp(2rem, 1.3rem + 2vw, 2.5rem);
  --text-4xl: clamp(2rem, 0.6rem + 4vw, 3rem);
  /*font-weight
  -=========-=========-=========-=========-=========*/
  --fw-t: 200;
  --fw-r: 400;
  --fw-b: 700;
  --fw-h: 900;
  /*line-height
  -=========-=========-=========-=========-=========*/
  --lh-100: 1;
  --lh-112: 1.125;
  --lh-125: 1.25;
  --lh-150: 1.5;
  --lh-175: 1.75;
  --lh-200: 2;
}

/*カラーバリエーション
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*メインカラー
-=========-=========-=========-=========-=========*/
.mc-a {
  color: var(--mc-a);
}

.mc-al {
  color: var(--mc-al);
}

.mc-ad {
  color: var(--mc-ad);
}

.mc-b {
  color: var(--mc-b);
}

.mc-bl {
  color: var(--mc-bl);
}

.mc-bd {
  color: var(--mc-bd);
}

/*アクセントカラー
-=========-=========-=========-=========-=========*/
.ac-a {
  color: var(--ac-a);
}

.ac-al {
  color: var(--ac-al);
}

.ac-ad {
  color: var(--ac-ad);
}

.ac-b {
  color: var(--ac-b);
}

.ac-bl {
  color: var(--ac-bl);
}

.ac-bd {
  color: var(--ac-bd);
}

.ac-c {
  color: var(--ac-c);
}

.ac-cl {
  color: var(--ac-cl);
}

.ac-cd {
  color: var(--ac-cd);
}

/*グレートーンカラー
-=========-=========-=========-=========-=========*/
.gc-w {
  color: var(--gc-w);
}

.gc-l {
  color: var(--gc-l);
}

.gc-ml {
  color: var(--gc-ml);
}

.gc-md {
  color: var(--gc-md);
}

.gc-d {
  color: var(--gc-d);
}

.gc-b {
  color: var(--gc-b);
}

/*背景カラー
-=========-=========-=========-=========-=========*/
.bgc-a {
  background-color: var(--bgc-a);
}

.bgc-b {
  background-color: var(--bgc-b);
}

.bgc-c {
  background-color: var(--bgc-c);
}

.bgc-d {
  background-color: var(--bgc-d);
}

.bgc-gc-w {
  background-color: var(--gc-w);
}

.bgc-mc-a {
  background-color: var(--mc-a);
}

.bgc-mc-ad {
  background-color: var(--mc-ad);
}

.bgc-mc-b {
  background-color: var(--mc-b);
}

.bgc-mc-bd {
  background-color: var(--mc-bd);
}

/*レイアウト関連の基本設定：スペーシング*/
/*Breakpoints（メディアクエリ定義）
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*Inner(最大横幅)
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*最大横幅：基本
-=========-=========-=========-=========-=========*/
.ly-inner {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

/*最大横幅：狭め（テキストメインのページなど）
-=========-=========-=========-=========-=========*/
.ly-innerSm {
  max-width: 1032px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

/*最大横幅：狭め（記事ページなど）
-=========-=========-=========-=========-=========*/
.ly-innerXs {
  max-width: 824px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

/*最大横幅：広い
-=========-=========-=========-=========-=========*/
.ly-innerWide {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

/*最大横幅：広い
-=========-=========-=========-=========-=========*/
.ly-innerMid {
  max-width: 1708px;
  width: 100%;
  margin: 0 auto;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .ly-innerMid {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}

/*Flexレイアウト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*縦並び
-=========-=========-=========-=========-=========*/
.ly-column {
  display: flex;
  flex-direction: column;
}

/*横並び：左揃え（基本形）
-=========-=========-=========-=========-=========*/
.ly-rowStart {
  display: flex;
  flex-direction: column;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .ly-rowStart {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/*横並び：両端揃え
-=========-=========-=========-=========-=========*/
.ly-rowBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*横並び：中央揃え
-=========-=========-=========-=========-=========*/
.ly-rowCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .ly-rowCenter {
    flex-direction: row;
    justify-content: center;
    text-align: flex-start;
  }
}

/*gapレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-gap-xs {
  gap: var(--spacing-xs);
}

.ly-gap-sm {
  gap: var(--spacing-sm);
}

.ly-gap-base {
  gap: var(--spacing-base);
}

.ly-gap-md {
  gap: var(--spacing-md);
}

.ly-gap-lg {
  gap: var(--spacing-lg);
}

.ly-gap-xl {
  gap: var(--spacing-xl);
}

.ly-gap-2xl {
  gap: var(--spacing-2xl);
}

.ly-gap-3xl {
  gap: var(--spacing-3xl);
}

/*その他
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*margin 左右センター揃え
-=========-=========-=========-=========-=========*/
.ly-mCenter {
  margin-left: auto;
  margin-right: auto;
}

/*padding、margin：天地の余白
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*padding-topレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-pt-xs {
  padding-top: var(--spacing-xs);
}

.ly-pt-sm {
  padding-top: var(--spacing-sm);
}

.ly-pt-base {
  padding-top: var(--spacing-base);
}

.ly-pt-md {
  padding-top: var(--spacing-md);
}

.ly-pt-lg {
  padding-top: var(--spacing-lg);
}

.ly-pt-xl {
  padding-top: var(--spacing-xl);
}

.ly-pt-2xl {
  padding-top: var(--spacing-2xl);
}

.ly-pt-3xl {
  padding-top: var(--spacing-3xl);
}

/*padding-bottomレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-pb-xs {
  padding-bottom: var(--spacing-xs);
}

.ly-pb-sm {
  padding-bottom: var(--spacing-sm);
}

.ly-pb-base {
  padding-bottom: var(--spacing-base);
}

.ly-pb-md {
  padding-bottom: var(--spacing-md);
}

.ly-pb-lg {
  padding-bottom: var(--spacing-lg);
}

.ly-pb-xl {
  padding-bottom: var(--spacing-xl);
}

.ly-pb-2xl {
  padding-bottom: var(--spacing-2xl);
}

.ly-pb-3xl {
  padding-bottom: var(--spacing-3xl);
}

/*padding-leftレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-pl-xs {
  padding-left: var(--spacing-xs);
}

.ly-pl-sm {
  padding-left: var(--spacing-sm);
}

.ly-pl-base {
  padding-left: var(--spacing-base);
}

.ly-pl-md {
  padding-left: var(--spacing-md);
}

.ly-pl-lg {
  padding-left: var(--spacing-lg);
}

.ly-pl-xl {
  padding-left: var(--spacing-xl);
}

.ly-pl-2xl {
  padding-left: var(--spacing-2xl);
}

.ly-pl-3xl {
  padding-left: var(--spacing-3xl);
}

/*padding-rightレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-pr-xs {
  padding-right: var(--spacing-xs);
}

.ly-pr-sm {
  padding-right: var(--spacing-sm);
}

.ly-pr-base {
  padding-right: var(--spacing-base);
}

.ly-pr-md {
  padding-right: var(--spacing-md);
}

.ly-pr-lg {
  padding-right: var(--spacing-lg);
}

.ly-pr-xl {
  padding-right: var(--spacing-xl);
}

.ly-pr-2xl {
  padding-right: var(--spacing-2xl);
}

.ly-pr-3xl {
  padding-right: var(--spacing-3xl);
}

/*margin-topレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-mt-xs {
  margin-top: var(--spacing-xs);
}

.ly-mt-sm {
  margin-top: var(--spacing-sm);
}

.ly-mt-base {
  margin-top: var(--spacing-base);
}

.ly-mt-md {
  margin-top: var(--spacing-md);
}

.ly-mt-lg {
  margin-top: var(--spacing-lg);
}

.ly-mt-xl {
  margin-top: var(--spacing-xl);
}

.ly-mt-2xl {
  margin-top: var(--spacing-2xl);
}

.ly-mt-3xl {
  margin-top: var(--spacing-3xl);
}

/*margin-bottomレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-mb-xs {
  margin-bottom: var(--spacing-xs);
}

.ly-mb-sm {
  margin-bottom: var(--spacing-sm);
}

.ly-mb-base {
  margin-bottom: var(--spacing-base);
}

.ly-mb-md {
  margin-bottom: var(--spacing-md);
}

.ly-mb-lg {
  margin-bottom: var(--spacing-lg);
}

.ly-mb-xl {
  margin-bottom: var(--spacing-xl);
}

.ly-mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.ly-mb-3xl {
  margin-bottom: var(--spacing-3xl);
}

/*margin-leftレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-ml-xs {
  margin-left: var(--spacing-xs);
}

.ly-ml-sm {
  margin-left: var(--spacing-sm);
}

.ly-ml-base {
  margin-left: var(--spacing-base);
}

.ly-ml-md {
  margin-left: var(--spacing-md);
}

.ly-ml-lg {
  margin-left: var(--spacing-lg);
}

.ly-ml-xl {
  margin-left: var(--spacing-xl);
}

.ly-ml-2xl {
  margin-left: var(--spacing-2xl);
}

.ly-ml-3xl {
  margin-left: var(--spacing-3xl);
}

/*margin-rightレスポンシブ対応
-=========-=========-=========-=========-=========*/
.ly-mr-xs {
  margin-right: var(--spacing-xs);
}

.ly-mr-sm {
  margin-right: var(--spacing-sm);
}

.ly-mr-base {
  margin-right: var(--spacing-base);
}

.ly-mr-md {
  margin-right: var(--spacing-md);
}

.ly-mr-lg {
  margin-right: var(--spacing-lg);
}

.ly-mr-xl {
  margin-right: var(--spacing-xl);
}

.ly-mr-2xl {
  margin-right: var(--spacing-2xl);
}

.ly-mr-3xl {
  margin-right: var(--spacing-3xl);
}

/*レイアウト関連の基本設定：グリッドレイアウト、共通の表示や動きなど*/
/*グリッドレイアウト：基本設定
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*グリッドレイアウト：1カラム
-=========-=========-=========-=========-=========*/
body.singleColumn {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: 100%;
  min-height: 100vh;
  grid-template-areas: "header" "contents" "cta" "footer";
}

/*各グリッドの設定
-=========-=========-=========-=========-=========*/
header {
  grid-area: header;
}

main {
  grid-area: contents;
  overflow-y: visible;
  overflow-x: hidden;
}

#cta {
  grid-area: cta;
}

footer {
  grid-area: footer;
}

/*共通の表示や動きなど
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*スムーススクロール
-=========-=========-=========-=========-=========*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 56px;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  html {
    scroll-padding-top: 80px;
  }
}

/*デバイスによって出し分け
-=========-=========-=========-=========-=========*/
/*spだけ表示
-=========-=========-====*/
.show-smOnly {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .show-smOnly {
    display: none !important;
  }
}

/*pcだけ表示
-=========-=========-====*/
.show-lgOnly {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (max-width: 959px) {
  .show-lgOnly {
    display: none !important;
  }
}

/*spだけ非表示
-=========-=========-====*/
.none-smOnly {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (max-width: 559px) {
  .none-smOnly {
    display: none !important;
  }
}

/*pcだけ非表示
  -=========-=========-====*/
.none-lgOnly {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .none-lgOnly {
    display: none !important;
  }
}

/*状態によって出し分け
-=========-=========-=========-=========-=========*/
.hide {
  display: none;
}

nobr {
  white-space: nowrap;
}

/*ボーダー、角丸
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*角丸
-=========-=========-=========-=========-=========*/
.br-xs {
  border-radius: var(--br-xs);
}

.br-sm {
  border-radius: var(--br-sm);
}

.br-base {
  border-radius: var(--br-base);
}

.br-md {
  border-radius: var(--br-md);
}

.br-lg {
  border-radius: var(--br-lg);
}

.br-xl {
  border-radius: var(--br-xl);
}

.br-2xl {
  border-radius: var(--br-2xl);
}

.br-3xl {
  border-radius: var(--br-3xl);
}

.br-4xl {
  border-radius: var(--br-4xl);
}

.br-100 {
  border-radius: var(--br-100);
}

/*補助
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*フロート
-=========-=========-=========-=========-=========*/
/* float解除 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/*基本設定：タイポグラフィ
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*サイズ
-=========-=========-=========-=========-=========*/
/*classで設定
=========-=========-=========*/
.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-md {
  font-size: var(--text-md);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.text-4xl {
  font-size: var(--text-4xl);
}

/*行間
-=========-=========-=========-=========-=========*/
/*classで設定
=========-=========-=========*/
.lh-100 {
  line-height: var(--lh-100);
}

.lh-112 {
  line-height: var(--lh-112);
}

.lh-125 {
  line-height: var(--lh-125);
}

.lh-150 {
  line-height: var(--lh-150);
}

.lh-175 {
  line-height: var(--lh-175);
}

.lh-200 {
  line-height: var(--lh-200);
}

/*太さ
-=========-=========-=========-=========-=========*/
/*classで設定
=========-=========-=========*/
.fw-t {
  font-weight: var(--fw-t);
}

.fw-r {
  font-weight: var(--fw-r);
}

.fw-b {
  font-weight: var(--fw-b);
}

.fw-h {
  font-weight: var(--fw-h);
}

/*文字揃え
-=========-=========-=========-=========-=========*/
/*classで設定
=========-=========-=========*/
.ta-center {
  text-align: center;
}

.ta-right {
  text-align: right;
}

.ta-left {
  text-align: left;
}

/*基本設定：フォント
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
html {
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  color: #333;
}
html p {
  font-size: var(--text-base);
  line-height: var(--lh-175);
}
html h1,
html h2,
html h3 {
  line-height: var(--lh-125);
}

/*マテリアルアイコン
-=========-=========-=========-=========-=========*/
/*フォントファミリー基本設定
-=========-=========-=========-=========-=========*/
/*和文：游ゴシック　欧文：Roboto
-=========-=========-====*/
html {
  font-family: "Roboto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;
}

/*和文：Noto Sans　欧文：Noto Sans
-=========-=========-====*/
@font-face {
  font-family: "Noto_Sans_JP";
  font-weight: 700;
  src: url("/assets/fonts/NotoSansJP.woff") format("woff"), url("./assets/fonts/NotoSansJP.eot") format("eot");
  font-display: swap;
}
h1,
h2,
h3 {
  font-family: "Noto_Sans_JP";
}

/*ボールド
-=========-=========-=========-=========-=========*/
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
  font-weight: 600;
}

/*リンク基本設定
-=========-=========-=========-=========-=========*/
a {
  text-decoration: none;
}

/*基本設定：アクセシビリティ
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*モーダルオープン時のスクロールロック
-=========-=========-=========-=========-=========*/
html.is-scrollLock,
body.is-scrollLock {
  overflow: hidden;
}

/*フォーカス対応
-=========-=========-=========-=========-=========*/
a:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible {
  outline: 4px solid rgba(0, 125, 199, 0.8);
  outline-offset: 1px;
}

button:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible {
  outline: 4px solid rgba(0, 125, 199, 0.8);
  outline-offset: 1px;
}

.accessibility-newTab {
  display: inline-block;
  width: 0;
  height: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

/*atoms
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*基本の本文
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*テキストアイコン
-=========-=========-=========-=========-=========*/
.textsIcon {
  display: flex;
  justify-content: left;
  gap: 0.3em;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
}
.textsIcon.before {
  flex-direction: row;
}
.textsIcon.after {
  flex-direction: row-reverse;
}
.textsIcon .material-icons {
  font-size: 1.2em;
}

/*テキストリンク
-=========-=========-=========-=========-=========*/
.textsLink {
  width: -moz-fit-content;
  width: fit-content;
  color: var(--mc-a);
  transition: color 0.3s;
}
@media (hover: hover) {
  .textsLink:hover {
    color: var(--mc-ad);
    text-decoration: underline;
  }
}

/*テキストリンク:アイコン付き
-=========-=========-=========-=========-=========*/
/*フレックス
-=========-=========-=====*/
.textsIconLink {
  display: inline-flex;
  gap: 0.3em;
  align-items: center;
  transition: color 0.3s;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--mc-a);
  flex-direction: row;
}
.textsIconLink.before {
  flex-direction: row-reverse;
}
.textsIconLink .material-icons {
  font-size: 1.2em;
}
@media (hover: hover) {
  .textsIconLink:hover {
    color: var(--mc-ad);
  }
  .textsIconLink:hover a {
    text-decoration: underline;
  }
}

/*備考
-=========-=========-=========-=========-=========*/
.notes-mark {
  font-size: 10px;
  line-height: var(--lh-100);
  vertical-align: text-top;
}

.notes {
  font-size: var(--text-sm);
}

/*ハイライト
-=========-=========-=========-=========-=========*/
strong.line-base {
  display: inline;
  padding: 0 4px;
  background: linear-gradient(transparent 70%, #f6ef24 70%);
}

em.line-base {
  display: inline;
  padding: 0 4px;
  font-weight: var(--fw-b);
  background: linear-gradient(transparent 70%, #f6ef24 70%);
}

/*見出しの実装
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*Topページ：H2
-=========-=========-=========-=========-=========*/
.headingEn-top-h2 {
  font-size: var(--text-3xl);
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-base);
}
.headingEn-top-h2 .ttlSub {
  font-size: clamp(1rem, 0.825rem + 0.5vw, 1.125rem);
  line-height: 2.5em;
}
.headingEn-top-h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 120px;
  height: 6px;
  background: linear-gradient(135deg, #FFEA01 8%, #f9f29d 100%);
  transform: translateX(-50%);
}
.headingEn-top-h2.mc-a {
  color: var(--mc-ad);
}
.headingEn-top-h2.mc-b {
  color: var(--mc-bd);
}

/*ボタンコンポーネント*/
/*ホバー時アクションボタン
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*ホバー時塗りつぶしボーダーボタン
-=========-=========-=========-=========-=========*/
.buttonHoverFill {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  line-height: var(--lh-125);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  /* -========= カラー調整 -========= */
  color: var(--mc-a);
  border: 2px solid var(--mc-a);
  background-color: var(--gc-w);
  /* -========= サイズ調整 -========= */
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--text-base);
  font-weight: var(--fw-b);
  width: min(320px, 100%);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
  /* -========= ホバー時 -========= */
}
@media print, screen and (min-width: 560px) {
  .buttonHoverFill {
    width: -moz-fit-content;
    width: fit-content;
  }
  .buttonHoverFill.terms {
    width: 300px;
  }
}
@media (hover: hover) {
  .buttonHoverFill:hover {
    background-color: var(--mc-a);
    color: var(--gc-w);
  }
}

/*アイコン付 var(--{position}
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* Flex
-=========-=========-=========-=========-=========*/
.iconFlex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-5);
}
.iconFlex.before {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-5);
}

/* Flex（後）アイコンアニメーションボタン
-=========-=========-=========-=========-=========*/
.iconFlex-animation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--spacing-5);
}
.iconFlex-animation .material-icons {
  font-size: var(--text-md);
  position: relative;
  right: 0px;
  transition: right 0.3s;
}
@media (hover: hover) {
  .iconFlex-animation:hover .material-icons {
    right: -4px;
  }
}

/* 疑似要素（前）
-=========-=========-=========-=========-=========*/
.icon-before {
  position: relative;
  padding-right: 2em;
  padding-left: 1em;
}
.icon-before::before {
  font-family: Material Icons;
  position: absolute;
  top: 50%;
  left: 0.5em;
  font-weight: var(--fw-b);
  transform: translateY(-50%);
}
.icon-before.icon-pdf::before {
  content: "\e415";
  font-weight: var(--fw-b);
}

/* 疑似要素（後ろ）
-=========-=========-=========-=========-=========*/
.icon-after {
  position: relative;
  padding-right: 2em;
  padding-left: 1em;
}
.icon-after::after {
  font-family: Material Icons;
  position: absolute;
  top: 50%;
  right: 0.5em;
  font-weight: var(--fw-b);
  transform: translateY(-50%);
}
.icon-after.icon-next::after {
  content: "\e5cc";
}

/*ボタンのレイアウト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.ly-buttonUnit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: var(--spacing-sm);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .ly-buttonUnit {
    flex-direction: row;
  }
}

/*画像のコンポーネント*/
/*基本の設定
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
img[width] {
  height: auto;
  vertical-align: bottom;
}

.aspectRatio-gold {
  aspect-ratio: 1.618/1;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.aspectRatio-silver {
  aspect-ratio: 1.414/1;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.aspectRatio-square {
  aspect-ratio: 1/1;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.aspectRatio-wide {
  aspect-ratio: 16/9;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.aspectRatio-portrait {
  aspect-ratio: 1/1.414;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.aspectRatio-background {
  aspect-ratio: 944/583.44;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*レイアウトの設定
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.ly-imagesRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.ly-imagesRow.col6 {
  gap: var(--spacing-base 1.9867549%);
  justify-content: center;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
.ly-imagesRow.col6 .ly-cardItem {
  width: 49.0066225%;
}
@media print, screen and (min-width: 560px) {
  .ly-imagesRow.col6 .ly-cardItem {
    width: 32.00883%;
  }
}
@media print, screen and (min-width: 960px) {
  .ly-imagesRow.col6 .ly-cardItem {
    width: 15.0110375%;
  }
}

/*リストコンポーネント*/
/*基本のリスト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.ulBasic {
  font-size: var(--text-base);
  list-style-type: disc;
  margin-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.olBasic {
  font-size: var(--text-base);
  list-style-type: decimal;
  margin-left: 1.8em;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.dlBasic {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: var(--spacing-10);
  padding: var(--spacing-sm);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .dlBasic {
    flex-direction: row;
    justify-content: flex-start;
  }
}
.dlBasic dt {
  font-size: var(--text-base);
  vertical-align: middle;
  width: 100%;
  color: var(--mc-a);
  font-weight: var(--fw-b);
  padding-bottom: var(--spacing-10);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .dlBasic dt {
    padding-bottom: 0;
    flex: 0 0 27.2%;
  }
}
.dlBasic dd {
  font-size: var(--text-base);
}

/*順序なしリスト（スタイルをカスタマイズ）
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.listBullet {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  list-style-type: none;
}
.listBullet > li {
  font-size: var(--text-base);
  position: relative;
  padding-left: 0.7em;
  line-height: var(--lh-175);
}
.listBullet > li::before {
  content: "";
  position: absolute;
  top: 0.625em;
  left: 0;
  display: block;
  width: 0.375em;
  height: 0.375em;
  background-color: var(--mc-b);
  border-radius: 100vh;
}
.listBullet ul {
  display: flex;
  flex-direction: column;
  padding-left: 1.5em;
  list-style: circle;
}
.listBullet.horiz {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/*順序なしリスト：横並び
-=========-=========-=========-=========-=========*/
/* .ly-listHoriz {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-15) 2%;

  li {
    width: 49%;
  }
} */
.ly-listHorizCompanyNumber {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-base);
  background-color: var(--bgc-a);
  padding: var(--spacing-base);
  border-radius: var(--br-lg);
  width: 100%;
}
.ly-listHorizCompanyNumber dl {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-base);
  padding: var(--spacing-sm);
  background-color: var(--gc-w);
  padding: var(--spacing-base);
  border-radius: var(--br-md);
  width: 100%;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .ly-listHorizCompanyNumber dl {
    width: 48%;
  }
}
.ly-listHorizCompanyNumber dl dt {
  font-size: var(--text-base);
  font-weight: var(--fw-b);
  color: var(--gc-w);
  padding: var(--spacing-sm);
  border-radius: var(--br-sm);
}
.ly-listHorizCompanyNumber dl dd {
  width: clamp(8.75rem, 5.25rem + 10vw, 11.25rem);
  font-size: var(--text-lg);
  font-weight: var(--fw-b);
}

.ly-listHorizCompany {
  max-width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg) 5%;
}
.ly-listHorizCompany li {
  width: -moz-fit-content;
  width: fit-content;
}

/*リンク
-=========-=========-=========-=========-=========*/
.listLink {
  text-decoration: underline;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .listLink:hover {
    opacity: 0.5;
  }
}

/*順序ありリスト（スタイルをカスタマイズ）
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.listOrder {
  font-size: var(--text-base);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  counter-reset: listOrder;
}
.listOrder > li {
  position: relative;
  padding-left: 1em;
}
.listOrder > li::before {
  content: counter(listOrder) ". ";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--gc-m);
  counter-increment: listOrder;
}
.listOrder ol {
  display: flex;
  flex-direction: column;
  counter-reset: listOrder;
}
.listOrder ol > li {
  position: relative;
  padding-left: 1em;
}
.listOrder ol > li::before {
  content: counter(listOrder) ". ";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--gc-md);
  counter-increment: listOrder;
}

/*定義リスト（スタイルをカスタマイズ）
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.ly-listFaq {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.listFaq {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  background-color: var(--gc-w);
  padding: var(--spacing-base);
  border-radius: var(--br-lg);
}
.listFaq .faqIcon {
  flex: 0 0 auto;
  border-radius: var(--br-100);
  width: clamp(4rem, 2.6rem + 4vw, 5rem);
  height: clamp(4rem, 2.6rem + 4vw, 5rem);
  font-size: var(--text-2xl);
  text-align: center;
  color: var(--gc-w);
}
.listFaq .faqIcon.question {
  background-color: var(--mc-a);
  line-height: clamp(4rem, 2.6rem + 4vw, 5rem);
}
.listFaq .faqIcon.answer {
  color: var(--mc-b);
  border: 4px solid var(--mc-b);
  font-weight: var(--fw-b);
  line-height: clamp(3.5rem, 2.1rem + 4vw, 4.5rem);
}
.listFaq dt, .listFaq dd {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-base);
  align-items: flex-start;
  padding: var(--spacing-base);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .listFaq dt, .listFaq dd {
    align-items: center;
  }
}
.listFaq dt {
  font-size: var(--text-xl);
  font-weight: var(--fw-b);
  border-bottom: 1px dashed var(--gc-l);
}

.listDl-item {
  width: 100%;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  padding: var(--spacing-sm);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
  /* -========= カラー調整 -========= */
  /* -========= dt、dd調整 -========= */
}
@media print, screen and (min-width: 560px) {
  .listDl-item {
    flex-direction: row;
    justify-content: flex-start;
  }
}
.listDl-item.bgc-w {
  background-color: var(--gc-w);
}
.listDl-item.bgc-w dt {
  border-bottom: 1px solid var(--bgc-a);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .listDl-item.bgc-w dt {
    border-bottom: none;
  }
}
.listDl-item.bgc-a {
  background-color: var(--bgc-a);
}
.listDl-item.bgc-a dt {
  border-bottom: 1px solid var(--gc-w);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .listDl-item.bgc-a dt {
    border-bottom: none;
  }
}
.listDl-item dt {
  font-size: var(--text-base);
  vertical-align: middle;
  width: 100%;
  color: var(--mc-a);
  font-weight: var(--fw-b);
  padding-bottom: var(--spacing-10);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .listDl-item dt {
    padding-bottom: 0;
    flex: 0 0 14%;
  }
}
.listDl-item dd {
  font-size: var(--text-base);
}
.listDl-item dd .ly-logoAdd {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
}
.listDl-item dd dt {
  color: var(--gc-d);
}

/*サイトマップリスト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.listSitemap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}
.listSitemap li {
  padding-bottom: var(--spacing-base);
  border-bottom: 1px solid var(--gc-l);
}
.listSitemap dl {
  display: flex;
  flex-direction: column;
  gap: var(var(--spacing-sm) var(--spacing-10));
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .listSitemap dl {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.listSitemap dt {
  width: 100%;
  font-size: var(--text-md);
  font-weight: var(--fw-b);
  text-align: flex-start;
}
.listSitemap dd {
  width: -moz-fit-content;
  width: fit-content;
  text-align: flex-start;
}
.listSitemap dd .sitemapLink {
  font-size: var(--text-base);
  display: inline-block;
  /* -========= ホバー時 -========= */
}
@media (hover: hover) {
  .listSitemap dd .sitemapLink:hover {
    color: var(--mc-a);
    text-decoration: underline;
  }
}
.listSitemap dd .sitemapLink.iconArrow {
  position: relative;
  padding-right: 1.75em;
  padding-left: 1em;
}
.listSitemap dd .sitemapLink.iconArrow::after {
  font-family: Material Icons;
  position: absolute;
  top: 50%;
  right: 0.5em;
  font-weight: var(--fw-b);
  transform: translateY(-50%);
  content: "\e5cc";
}

/*molecules
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*カードコンポーネント*/
/*カードの種類
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*基本のカード
-=========-=========-=========-=========-=========*/
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-base);
  padding: var(--spacing-md) var(--spacing-base);
  border-radius: var(--br-lg);
  box-shadow: 0 3px 6px rgba(var(--gc-d), 0.16);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
.card figure {
  width: clamp(15rem, 9.75rem + 15vw, 18.75rem);
}
@media print, screen and (min-width: 960px) {
  .card figure {
    width: 100%;
  }
}

/*横並びカード
-=========-=========-=========-=========-=========*/
.cardHorizBasic {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--spacing-md);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .cardHorizBasic {
    flex-direction: row;
  }
}
.cardHorizBasic .imgWrapper {
  flex: 0 1 32%;
  margin-bottom: 0;
}
.cardHorizBasic .card-body {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}
.cardHorizBasic .textsIconLink .text-base {
  text-decoration: underline;
}
.cardHorizBasic.ly-bgc {
  background-color: var(--bgc-a);
  padding: var(--spacing-base) var(--spacing-lg);
  border-radius: var(--br-lg);
}

/*横並びカード_ご要望
-=========-=========-=========-=========-=========*/
.AfterSales {
  padding-bottom: var(--spacing-xl);
  border-bottom: 4px dotted var(--gc-l);
}

.cardHorizAfterSales {
  display: flex;
  gap: var(--spacing-md);
  flex-direction: column;
}
.cardHorizAfterSales .card-body {
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  border-radius: var(--br-lg);
  position: relative;
  max-width: 800px;
  box-shadow: 4px 4px 8px #ccc;
}
.cardHorizAfterSales .ly-imageArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-5);
  min-width: 242px;
  flex: 0 1 20.033113%;
}
.cardHorizAfterSales .ly-imageArea .imageAreaLabel {
  width: 100%;
  font-size: var(--text-md);
  font-weight: var(--fw-b);
  text-align: center;
  color: var(--gc-w);
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--br-100);
}
.cardHorizAfterSales .ly-imageArea .imgWrapper {
  max-width: 140px;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .cardHorizAfterSales .ly-imageArea .imgWrapper {
    max-width: 80%;
  }
}
.cardHorizAfterSales:has(.ly-left) {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
.cardHorizAfterSales:has(.ly-left) .card-body {
  background-color: var(--bgc-c);
}
.cardHorizAfterSales:has(.ly-left) .card-body::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 45%;
  rotate: 90deg;
  border: 16px solid transparent;
  border-right: 32px solid var(--bgc-c);
  z-index: 0;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .cardHorizAfterSales:has(.ly-left) .card-body::before {
    top: 50%;
    left: -48px;
    rotate: 0deg;
  }
}
@media print, screen and (min-width: 560px) {
  .cardHorizAfterSales:has(.ly-left) {
    align-items: center;
    flex-direction: row;
  }
}
.cardHorizAfterSales:has(.ly-left) .imageAreaLabel {
  background-color: var(--mc-b);
}
.cardHorizAfterSales:has(.ly-right) {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
.cardHorizAfterSales:has(.ly-right) .card-body {
  background-color: var(--bgc-a);
}
.cardHorizAfterSales:has(.ly-right) .card-body::before {
  content: "";
  position: absolute;
  top: -32px;
  right: 45%;
  rotate: -90deg;
  border: 16px solid transparent;
  border-left: 32px solid var(--bgc-a);
  z-index: 0;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .cardHorizAfterSales:has(.ly-right) .card-body::before {
    top: 45%;
    right: -48px;
    rotate: 0deg;
  }
}
@media print, screen and (min-width: 560px) {
  .cardHorizAfterSales:has(.ly-right) {
    align-items: center;
    flex-direction: row-reverse;
  }
}
.cardHorizAfterSales:has(.ly-right) .imageAreaLabel {
  background-color: var(--mc-a);
}
.cardHorizAfterSales .textsIconLink .text-base {
  text-decoration: underline;
}

.afterSalesResult {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--bgc-b);
  border-radius: var(--br-lg);
  margin: 0 auto;
  box-shadow: 4px 4px 8px #ccc;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
.afterSalesResult * {
  font-size: var(--text-lg);
  font-weight: var(--fw-b);
}
.afterSalesResult h3 {
  max-width: -moz-fit-content;
  max-width: fit-content;
  background-color: var(--ac-b);
  color: var(--gc-w);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--br-100);
}
.afterSalesResult P, .afterSalesResult li {
  color: var(--ac-b);
}
@media print, screen and (min-width: 560px) {
  .afterSalesResult {
    max-width: 90%;
  }
}

/*カードのレイアウト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*基本のカード
-=========-=========-=========-=========-=========*/
.ly-cardUnit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base-lg);
}
.ly-cardUnit.col2 {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .ly-cardUnit.col2 {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ly-cardUnit.col2 .ly-cardItem {
    width: calc(50% - var(--spacing-base-lg) * 0.5);
  }
}
.ly-cardUnit.col3 {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .ly-cardUnit.col3 {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ly-cardUnit.col3 .ly-cardItem {
    width: calc(50% - var(--spacing-base-lg) * 0.5);
  }
}
@media print, screen and (min-width: 960px) {
  .ly-cardUnit.col3 .ly-cardItem {
    width: calc(33.3333% - var(--spacing-base-lg) * 0.6666);
  }
}

/* organisms
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*ヘッダー
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.bl-header {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 20;
}
.bl-header::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  left: 0;
  top: 0;
  z-index: -1;
}
.bl-header .ly-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bl-header .bl-header-logoWrapper {
  flex: 1 0 auto;
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}
.bl-header .bl-header-logoWrapper img {
  width: 175px;
  height: 23px;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .bl-header .bl-header-logoWrapper img {
    width: 350px;
    height: 46px;
  }
}
.bl-header .bl-header-navWrapper {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--spacing-40);
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  padding-top: var(--spacing-50);
  padding-bottom: var(--spacing-150);
  padding-right: var(--spacing-20);
  padding-left: var(--spacing-10);
  background-color: var(--gc-w);
  transition: right 0.6s;
  z-index: 2;
  overflow-y: auto;
  font-weight: var(--fw-b);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
.bl-header .bl-header-navWrapper .bl-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  visibility: hidden;
  opacity: 0;
}
.bl-header .bl-header-navWrapper .bl-nav li {
  margin-top: var(--spacing-10);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .bl-header .bl-header-navWrapper .bl-nav li {
    margin-top: 0;
    padding-top: var(--spacing-base);
    padding-bottom: var(--spacing-base);
  }
}
.bl-header .bl-header-navWrapper .bl-nav li a[aria-current=page],
.bl-header .bl-header-navWrapper .bl-nav li button[aria-current=page] {
  cursor: default;
}
@media (hover: hover) {
  .bl-header .bl-header-navWrapper .bl-nav li a:hover,
  .bl-header .bl-header-navWrapper .bl-nav li button:hover {
    text-decoration: underline;
  }
  .bl-header .bl-header-navWrapper .bl-nav li a:hover[aria-current=page],
  .bl-header .bl-header-navWrapper .bl-nav li button:hover[aria-current=page] {
    text-decoration: none;
  }
}
.bl-header .bl-header-navWrapper .bl-contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .bl-header .bl-header-navWrapper .bl-contact {
    flex-direction: row;
    align-items: center;
  }
}
.bl-header .bl-header-navWrapper .contactButton {
  visibility: hidden;
  opacity: 0;
}
.bl-header .bl-header-navWrapper .contactButton a {
  color: var(--mc-ad);
  background-color: var(--gc-w);
  padding: 8px 24px;
  border: 1px solid var(--mc-ad);
  border-radius: 100vh;
  display: block;
  width: auto;
  transition: background-color 0.3s;
}
@media (hover: hover) {
  .bl-header .bl-header-navWrapper .contactButton a:hover {
    color: var(--gc-w);
    background-color: var(--mc-ad);
  }
}
@media print, screen and (min-width: 960px) {
  .bl-header .bl-header-navWrapper {
    flex-direction: row;
    align-items: center;
    position: inherit;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    width: initial;
    height: initial;
    overflow-y: initial;
    background-color: initial;
  }
  .bl-header .bl-header-navWrapper .bl-nav {
    flex-direction: row;
    visibility: visible;
    opacity: 1;
  }
  .bl-header .bl-header-navWrapper .contactButton {
    visibility: visible;
    opacity: 1;
  }
}

/*ハンバーガーメニュー
-=========-=========-=========-=========-=========*/
.bl-hamburger {
  position: relative;
  width: var(--spacing-40);
  height: var(--spacing-40);
  border-radius: 4px;
  cursor: pointer;
  z-index: 3;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .bl-hamburger {
    display: none;
  }
}

.hamburgerLine {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 24px;
  height: 2px;
  background-color: var(--mc-ad);
  transition: all 0.3s;
}

.hamburgerLine-top {
  top: 8px;
}

.hamburgerLine-mid {
  top: 14px;
}

.hamburgerLine-btm {
  top: 20px;
}

.hamburger-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background-color: var(--gc-b);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s;
  cursor: pointer;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .hamburger-bg {
    display: none;
  }
}

.bl-header.nav-open .bl-nav {
  visibility: visible;
  opacity: 1;
}
.bl-header.nav-open .contactButton {
  visibility: visible;
  opacity: 1;
}
.bl-header.nav-open .bl-header-navWrapper {
  right: 0;
}
.bl-header.nav-open .hamburger-bg {
  opacity: 0.8;
  visibility: visible;
}
.bl-header.nav-open .hamburgerLine-top {
  transform: rotate(45deg);
  top: 16px;
}
.bl-header.nav-open .hamburgerLine-mid {
  width: 0;
  left: 50%;
}
.bl-header.nav-open .hamburgerLine-btm {
  transform: rotate(-45deg);
  top: 16px;
}

/*フッター
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*ベースレイアウト
-=========-=========-=========-=========-=========*/
.bl-footer {
  background-color: var(--bgc-a);
}
.bl-footer .footerNav {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .bl-footer .footerNav {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}
.bl-footer .footerNav .footerNav-item:last-child .footerNav-link {
  border-bottom: 1px solid rgba(var(--gc-d), 0.2);
  padding-bottom: var(--spacing-20);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .bl-footer .footerNav .footerNav-item:last-child .footerNav-link {
    border-bottom: none;
    padding-bottom: 0;
  }
}
.bl-footer .footerNav .footerNav-item .footerNav-link {
  font-size: var(--text-base);
  border-top: 1px solid rgba(var(--gc-d), 0.2);
  position: relative;
  display: block;
  color: var(--mc-ad);
  padding-top: var(--spacing-20);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .bl-footer .footerNav .footerNav-item .footerNav-link {
    border-top: none;
    padding-top: 0;
    padding-right: var(--spacing-20);
  }
  .bl-footer .footerNav .footerNav-item .footerNav-link:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 18px;
    background-color: rgba(var(--gc-d), 0.3);
    transform: translateY(-50%);
  }
}
@media print and (hover: hover), screen and (min-width: 560px) and (hover: hover) {
  .bl-footer .footerNav .footerNav-item .footerNav-link:hover {
    text-decoration: underline;
  }
}
.bl-footer .footerNav .footerNav-item:last-child .footerNav-link:after {
  content: none;
}

/*コピーライト
-=========-=========-=========-=========-=========*/
.bl-footerCopyright {
  background-color: var(--bgc-a);
  padding: var(--spacing-20);
}
.bl-footerCopyright .footerCopyright {
  display: block;
  color: rgba(var(--gc-d), 0.8);
  font-size: var(--fs-xs);
  text-align: center;
}

/*ジャンボトロン*/
/*キャッチコピー+イメージ画像
-=========-=========-=========-=========-=========*/
.jumbotronHoriz {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
  gap: var(--spacing-md) 0;
}
@media print, screen and (min-width: 560px) {
  .jumbotronHoriz {
    flex-direction: row;
    justify-content: center;
    text-align: flex-start;
  }
}
.jumbotronHoriz.col2 {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .jumbotronHoriz.col2 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 6.6225165%;
  }
  .jumbotronHoriz.col2 .jumbotronImgWrapper {
    flex: 0 1 46.6887417%;
    text-align: center;
  }
}
.jumbotronHoriz .jumbotron-body {
  flex: 1;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
.jumbotronHoriz .jumbotron-body .jumbotron-title {
  margin-bottom: var(--spacing-base);
}
@media print, screen and (min-width: 560px) {
  .jumbotronHoriz .jumbotron-body {
    padding-left: 6.6225165%;
  }
}

/*背景画像
-=========-=========-====*/
.jumbotronBg-image {
  background-image: url("../images/jumbotronBottom.svg"), url("../images/jumbotronBg@2x.webp");
  background-position: center bottom, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, cover;
  height: -moz-fit-content;
  height: fit-content;
}
.jumbotronBg-image .jumbotron-inner {
  max-width: 1240px;
  padding-right: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
  height: -moz-fit-content;
  height: fit-content;
}
.jumbotronBg-image .jumbotron-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  color: --gc-w;
  padding: --spacing-base;
  background-color: rgba(var(--gc-b), 0.5);
  text-align: center;
  /* top: 75%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%); */
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
.jumbotronBg-image .jumbotron-body .jumbotron-titleArea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-10);
}
.jumbotronBg-image .jumbotron-body .jumbotron-titleArea .titleCopy {
  font-size: clamp(1rem, 0.3rem + 2vw, 1.5rem);
  font-weight: var(fw-b);
}
.jumbotronBg-image .jumbotron-body .jumbotron-titleArea .cameraImage {
  width: clamp(5rem, -7.075rem + 34.5vw, 13.625rem);
}
.jumbotronBg-image .jumbotron-body .jumbotron-title {
  margin-bottom: var(--spacing-base);
}

/*CTAの基本設定
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.bl-cta {
  background: linear-gradient(#80D2E9 10%, #99E8EC 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  padding-left: var(--spacing-base);
  padding-right: var(--spacing-base);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/*CTAのボタン
-=========-=========-=========-=========-=========*/
.buttonCta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-5);
  max-width: 100%;
  text-align: center;
  line-height: var(--lh-125);
  transition: background-position 0.3s, color 0.3s;
  /* -========= サイズ調整 -========= */
  padding: var(--spacing-sm) var(--spacing-base);
  font-size: clamp(1rem, 0.3rem + 2vw, 1.5rem);
  font-weight: var(--fw-b);
  width: max(100%, 400px);
  /* -========= カラー調整 -========= */
  /* -========= ホバー時 -========= */
}
.buttonCta.color-download {
  background: linear-gradient(120deg, var(--mc-ad) 10%, #0D75EA 60%, #66ACFB 100%);
  background-position: 1% 50%;
  background-size: 200% auto;
  color: var(--gc-w);
  border: 4px solid var(--gc-w);
}
.buttonCta.color-inquiry {
  background: linear-gradient(120deg, var(--mc-bd) 10%, #03A49D 60%, #31CAC4 100%);
  background-position: 1% 50%;
  background-size: 200% auto;
  color: var(--gc-w);
  border: 4px solid var(--gc-w);
}
@media (hover: hover) {
  .buttonCta:hover {
    background-position: 99% 50%;
  }
}
.buttonCta .material-icons {
  font-size: 1.25em;
}

/*CTAのレイアウト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.ctaUnit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base) var(--spacing-lg);
}
.ctaUnit .ctaItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 960px) {
  .ctaUnit .ctaItem {
    width: max(40%, 400px);
  }
}
.ctaUnit.col2 {
  /*最小幅（モバイルファースト）
  -=========-=========-=========-=========-=========*/
}
@media print, screen and (min-width: 560px) {
  .ctaUnit.col2 {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* templates
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* Library, plugin
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*//*# sourceMappingURL=style.css.map */