@charset "UTF-8";
/* ボックスモデルをリセットし、ボーダーを設定 */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box; /* パディングとボーダーを要素の合計幅と高さに含める */
  border-style: solid; /* ボーダーのスタイルを実線に設定 */
  border-width: 0; /* ボーダーの幅を0に設定 */
  min-width: 0; /* 最小幅を0に設定 */
}

/* ドキュメント */
/* ============================================ */
/**
 * 1. 全てのブラウザでline-heightを調整
 * 2. iOSでの方向変更後のフォントサイズ調整を抑制
 * 3. iOSでのリンクのグレーのハイライト表示を削除
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* 3 */
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
}

/* セクション */
/* ============================================ */
/**
 * 全てのブラウザでmarginを削除
 */
body {
  margin: 0;
}

/**
 * IEでのmain要素の表示を一貫させる
 */
main {
  display: block;
}

/* 垂直方向の余白 */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* 見出し */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit; /* フォントサイズを親から継承 */
  font-weight: inherit; /* フォントウェイトを親から継承 */
  margin: 0; /* マージンを削除 */
}

[tabindex="-1"]:focus-visible {
  outline: none !important; /* tabindex="-1"でフォーカス可能になった要素のアウトラインを削除 */
}

/* リスト（列挙） */
/* ============================================ */
ul,
ol {
  margin: 0; /* マージンを削除 */
  padding: 0; /* パディングを削除 */
  list-style: none; /* リストのスタイルを削除 */
}

/* リスト（定義） */
/* ============================================ */
dd {
  margin-left: 0; /* 左マージンを削除 */
}

/* グループ化されたコンテンツ */
/* ============================================ */
/**
 * 1. Firefoxで正しいボックスサイジングを追加
 * 2. EdgeとIEでoverflowを表示
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px; /* 上ボーダーの幅を設定 */
  margin: 0; /* マージンを削除 */
  clear: both; /* 両側のフロートをクリア */
  color: inherit; /* 色を親から継承 */
}

/**
 * 1. 全てのブラウザでフォントサイズの継承とスケーリングを調整
 * 2. 全てのブラウザで"em"フォントサイジングを調整
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit; /* フォントスタイルを親から継承 */
}

/* テキストレベルの意味付け要素 */
/* ============================================ */
/**
 * IE 10以上でアクティブなリンクのグレーの背景を削除
 */
a {
  background-color: transparent; /* 背景色を透明に設定 */
  text-decoration: none; /* テキスト装飾を削除 */
  color: inherit; /* 色を親から継承 */
}

/**
 * 1. Chrome 57-で下ボーダーを削除
 * 2. Chrome, Edge, IE, Opera, Safariで正しいテキスト装飾を追加
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2: 点線のアンダーラインを追加 */
}

/**
 * Chrome, Edge, Safariで正しいフォントウェイトを追加
 */
b,
strong {
  font-weight: 700; /* フォントウェイトを太字に設定 */
}

u {
  text-underline-offset: 0.2em;
}

em {
  font-style: italic;
}

/**
 * 1. 全てのブラウザでフォントサイズの継承とスケーリングを調整
 * 2. 全てのブラウザで"em"フォントサイジングを調整
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * "small"のフォントサイズを追加
 * 取り消し線のために"del"を追加
 */
small {
  font-size: inherit;
}

del {
  text-decoration: line-through;
}

/**
 * "sub"と"sup"を垂直方向に揃える
 */
sub {
  vertical-align: bottom;
  font-size: 72%;
}

sup {
  vertical-align: top;
  font-size: 72%;
}

/* 置換コンテンツ */
/* ============================================ */
/**
 * 垂直方向の配置問題を防止
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: middle; /* 垂直方向中央揃え */
}

/* フォーム */
/* ============================================ */
/**
 * フォームフィールドをスタイル可能にするためにリセット
 * 1. 特にiOSで、システム全体でフォーム要素をスタイル可能にする
 * 2. 親からtext-transformを継承する
 */
button,
input,
optgroup,
select,
textarea {
  vertical-align: middle; /* 垂直方向中央揃え */
  color: inherit; /* 色を親から継承 */
  font: inherit; /* フォントを親から継承 */
  background: none; /* 背景を削除 */
  border: none; /* ボーダーを削除 */
  padding: 0; /* パディングを削除 */
  margin: 0; /* マージンを削除 */
  border-radius: 0; /* ボーダーの角丸を削除 */
  text-align: inherit; /* テキストの配置を親から継承 */
  text-transform: inherit; /* 2 */
  white-space: normal; /* ホワイトスペースを標準に設定 */
}

button {
  outline: none; /* アウトラインを削除 */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* ネイティブの外観を削除 */
}

/**
 * クリック可能な要素のカーソルを調整
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer; /* カーソルをポインターに設定 */
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default; /* 無効な要素のカーソルをデフォルトに設定 */
}

/**
 * Firefoxのアウトラインを改善し、入力要素やボタンのスタイルと統一
 */
:-moz-focusring {
  outline: auto; /* Firefoxのフォーカスリングを自動に設定 */
}

select:disabled {
  opacity: inherit; /* 無効なselect要素の透明度を継承 */
}

/**
 * パディングを削除
 */
option {
  padding: 0;
}

/**
 * fieldsetを非表示にリセット
 */
fieldset {
  margin: 0; /* マージンを削除 */
  padding: 0; /* パディングを削除 */
  min-width: 0; /* 最小幅を0に設定 */
}

legend {
  padding: 0; /* パディングを削除 */
}

/**
 * Chrome, Firefox, Operaで正しい垂直方向の配置を追加
 */
progress {
  vertical-align: baseline; /* 垂直方向をベースラインに設定 */
}

/**
 * IE 10以上でデフォルトの垂直スクロールバーを削除
 */
textarea {
  overflow: auto; /* テキストエリアのオーバーフローを自動に設定 */
}

/**
 * Chromeでインクリメント/デクリメントボタンのカーソルスタイルを調整
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto; /* 高さ自動 */
}

/**
 * Safariでアウトラインスタイルを調整
 */
[type=search] {
  outline-offset: -2px; /* 1: アウトラインオフセットを調整 */
}

/**
 * macOSのChromeとSafariで内部パディングを削除
 */
[type=submit] {
  -webkit-appearance: none; /* ネイティブの外観を削除 */
  border-radius: 0; /* ボーダーの角丸を削除 */
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; /* 検索フィールドの装飾を削除 */
}

/**
 * 1. iOSとSafariでクリック可能な型のスタイル設定不能を修正
 * 2. フォントの継承を修正
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Firefoxの外観を修正
 */
[type=number] {
  -moz-appearance: textfield; /* Firefoxでナンバー入力フィールドの外観をテキストフィールドに設定 */
}

/**
 * クリック可能なラベル
 */
label[for] {
  cursor: pointer; /* for属性を持つラベルのカーソルをポインターに設定 */
}

/* インタラクティブ要素 */
/* ============================================ */
/*
 * Edge, IE 10+, Firefoxで正しいdisplayを追加
 */
details {
  display: block; /* details要素をブロックレベル要素として表示 */
}

/*
 * 全てのブラウザで正しいdisplayを追加
 */
summary {
  display: list-item; /* summary要素をリストアイテムとして表示 */
}

/*
 * 編集可能なコンテンツのアウトラインを削除
 */
[contenteditable]:focus {
  outline: auto; /* contenteditable要素のフォーカス時にアウトラインを自動表示 */
}

/* テーブル */
/* ============================================ */
/**
 * 1. ChromeとSafariでテーブルのボーダー色の継承を修正
 */
table {
  width: 100%;
  border-color: inherit; /* 1 */
  border-collapse: collapse; /* ボーダーを結合 */
}

caption {
  text-align: left; /* キャプションを左揃え */
}

td,
th {
  vertical-align: top; /* 垂直方向を上揃え */
  padding: 0; /* パディングを削除 */
}

th {
  text-align: left; /* テキストを左揃え */
  font-weight: 700; /* フォントウェイトを太字に設定 */
}

/* Firefox: ネストされた順序付きリストが親から番号付けを続ける問題を解決 */
ol {
  counter-reset: revert; /* カウンターをリセットして、リストの番号付けをデフォルトの動作に戻す */
}

/* 画像がコンテナを超えないように */
img {
  max-inline-size: 100%; /* インライン方向（幅）の最大サイズを100%に設定 */
  max-block-size: 100%; /* ブロック方向（高さ）の最大サイズを100%に設定 */
}

/* Safari: <body>に`user-select:none`が設定されている場合にテキスト入力が機能しない問題を解決 */
input, textarea {
  -webkit-user-select: auto; /* Safariでユーザー選択を自動に設定 */
}

/* Safariのtextarea要素の'white-space'プロパティを元に戻す */
textarea {
  white-space: revert; /* white-spaceプロパティをデフォルトの動作に戻す */
}

/* meter要素をスタイル可能にするための最小限のスタイル */
meter {
  -webkit-appearance: revert; /* Webkitブラウザでのネイティブの外観を元に戻す */
  -moz-appearance: revert;
       appearance: revert; /* ネイティブの外観を元に戻す */
}

/* inputplaceholderのデフォルトのテキスト不透明度をリセット */
::-moz-placeholder {
  color: unset; /* 色を未設定状態（継承またはデフォルト）にする */
}
::placeholder {
  color: unset; /* 色を未設定状態（継承またはデフォルト）にする */
}

/* 'hidden'属性の機能を修正。
  display:revert; は属性値ではなく要素のデフォルト表示に戻します。
  :where()は特異度を下げるためにここで使用されていますが、[hidden]のデフォルトはdisplay: none;です。 */
:where([hidden]) {
  display: none; /* hidden属性を持つ要素を非表示にする */
}

/* Chromiumブラウザのバグに対するリセット
  - contenteditable属性が正しく機能するように修正。
  - webkit-user-select: auto; は、ラッパー要素でuser-select:noneを使用している場合にSafari用に追加 */
:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write; /* Firefoxでコンテンツ編集を許可 */
  -webkit-user-modify: read-write; /* Webkitブラウザでコンテンツ編集を許可 */
  overflow-wrap: break-word; /* 長い単語を任意の場所で折り返す */
  -webkit-line-break: after-white-space; /* Safariでホワイトスペース後の改行を許可 */
  -webkit-user-select: auto; /* Webkitブラウザでユーザー選択を自動に設定 */
}

/* ドラッグ機能を再度適用 - ChromiumとSafariにのみ存在する */
:where([draggable=true]) {
  -webkit-user-drag: element; /* Webkitブラウザで要素のドラッグを許可 */
}

/* Modalのネイティブな挙動をリセット */
:where(dialog:modal) {
  all: revert; /* 全てのプロパティを元に戻す */
  box-sizing: border-box; /* ボックスサイジングをボーダーボックスに設定 */
}

/* Safariのdetails summaryの三角形アイコンを削除 */
::-webkit-details-marker {
  display: none;
}

/* color */
/* ============================================ */
/* font */
/* ============================================ */
/* font-size */
/* ============================================ */
/* 共通部分 */
/* ============================================ */
html {
  scroll-behavior: smooth;
}
html {
	font-size: 10px; /* ※サイトごとに変更 */
	transition: .2s;
}


body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: "palt";
  color: #000;
  min-height: 100vh;
}
body.--fixed {
  height: 100%;
  overflow: hidden;
}

a {
  color: currentColor;
  transition: all 0.3s ease-out;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

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

.reading {
  display: block;
  overflow: hidden;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

.sponly {
  display: none;
}

.portraitonly {
  display: none;
}

.tabonly {
  display: none;
}

.span_br {
  display: inline-block;
}

.pswp__img {
  max-inline-size: none !important;
  max-block-size: none !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mt16 {
  margin-top: 16px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.mt24 {
  margin-top: 24px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

.mt32 {
  margin-top: 32px !important;
}

.mb32 {
  margin-bottom: 32px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mt48 {
  margin-top: 48px !important;
}

.mb48 {
  margin-bottom: 48px !important;
}

.mt56 {
  margin-top: 56px !important;
}

.mb56 {
  margin-bottom: 56px !important;
}

.mt64 {
  margin-top: 64px !important;
}

.mb64 {
  margin-bottom: 64px !important;
}

.mt72 {
  margin-top: 72px !important;
}

.mb72 {
  margin-bottom: 72px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mt88 {
  margin-top: 88px !important;
}

.mb88 {
  margin-bottom: 88px !important;
}

.mt96 {
  margin-top: 96px !important;
}

.mb96 {
  margin-bottom: 96px !important;
}

.mt104 {
  margin-top: 104px !important;
}

.mb104 {
  margin-bottom: 104px !important;
}

.mt112 {
  margin-top: 112px !important;
}

.mb112 {
  margin-bottom: 112px !important;
}

.mt120 {
  margin-top: 120px !important;
}

.mb120 {
  margin-bottom: 120px !important;
}

.width {
  width: calc(100% - 280px);
  max-width: 710px;
  margin-inline: auto;
  position: relative;
  z-index: 50;
}

.inner {
  container-type: inline-size;
  width: calc(100% - 100px);
  margin-inline: auto;
}

.i-wide {
  container-type: inline-size;
  width: calc(100% - 70px);
  margin-inline: auto;
}

.outer {
  overflow: clip;
}

.txt_center {
  word-break: keep-all;
  text-align: center;
}

.txt_center_l {
  word-break: keep-all;
  text-align: center;
}

.txt_right {
  text-align: right;
}
@media all and (max-width: 1367px) {
  .inner {
    width: calc(100% - 50px);
  }
  .i-wide {
    width: calc(100% - 40px);
  }
}
@media all and (max-width: 1025px) {
  .tabonly {
    display: block;
  }
  .tabnone {
    display: none;
  }
}
@media all and (max-width: 896px) {
  body {
    font-size: 1.6rem;
  }
  .pconly {
    display: none;
  }
  .sponly {
    display: block;
  }
  .mt0-s {
    margin-top: 0 !important;
  }
  .mt5-s {
    margin-top: 5px !important;
  }
  .mt10-s {
    margin-top: 10px !important;
  }
  .mb0-s {
    margin-bottom: 0 !important;
  }
  .mb5-s {
    margin-bottom: 5px !important;
  }
  .mb10-s {
    margin-bottom: 10px !important;
  }
  .mt16-s {
    margin-top: 16px !important;
  }
  .mb16-s {
    margin-bottom: 16px !important;
  }
  .mt24-s {
    margin-top: 24px !important;
  }
  .mb24-s {
    margin-bottom: 24px !important;
  }
  .mt32-s {
    margin-top: 32px !important;
  }
  .mb32-s {
    margin-bottom: 32px !important;
  }
  .mt40-s {
    margin-top: 40px !important;
  }
  .mb40-s {
    margin-bottom: 40px !important;
  }
  .mt48-s {
    margin-top: 48px !important;
  }
  .mb48-s {
    margin-bottom: 48px !important;
  }
  .mt56-s {
    margin-top: 56px !important;
  }
  .mb56-s {
    margin-bottom: 56px !important;
  }
  .mt64-s {
    margin-top: 64px !important;
  }
  .mb64-s {
    margin-bottom: 64px !important;
  }
  .mt72-s {
    margin-top: 72px !important;
  }
  .mb72-s {
    margin-bottom: 72px !important;
  }
  .mt80-s {
    margin-top: 80px !important;
  }
  .mb80-s {
    margin-bottom: 80px !important;
  }
  .mt88-s {
    margin-top: 88px !important;
  }
  .mb88-s {
    margin-bottom: 88px !important;
  }
  .mt96-s {
    margin-top: 96px !important;
  }
  .mb96-s {
    margin-bottom: 96px !important;
  }
  .mt104-s {
    margin-top: 104px !important;
  }
  .mb104-s {
    margin-bottom: 104px !important;
  }
  .mt112-s {
    margin-top: 112px !important;
  }
  .mb112-s {
    margin-bottom: 112px !important;
  }
  .mt120-s {
    margin-top: 120px !important;
  }
  .mb120-s {
    margin-bottom: 120px !important;
  }
  .width {
    width: calc(100% - 120px);
    max-width: inherit;
  }
  .txt_center_l {
    word-break: normal;
    text-align: left;
  }
}
@media all and (max-width: 480px) {
  .portraitonly {
    display: block;
  }
  .portraitnone {
    display: none;
  }
  .width {
    width: calc(100% - 56px);
  }
  .inner {
    width: calc(100% - 32px);
  }
  .i-wide {
    width: calc(100% - 24px);
  }
}

/* 共通パーツ */
/* ============================================ */
.common-ttl {
  text-align: center;
}
.common-ttl__en {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 900;
  font-size: 8.6rem;
  line-height: 1.1;
  position: relative;
  z-index: 5;
}
.common-ttl__en__shadow {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
  color: #FFFF00;
  text-shadow: -1px -1px 0 #000, -1px 0 0 #000, -1px 1px 0 #000, 0 -1px 0 #000, 0 0 0 #000, 0 1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000;
  translate: 6px 6px;
}
.common-ttl__jp {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5rem;
  line-height: 1.4;
  margin-top: 8px;
}
.common-ttl__jp.--white {
  color: #EAEAEA;
}
.common-ttl__jp.--space {
  letter-spacing: 0.08em;
}
@media all and (max-width: 896px) {
  .common-ttl__en {
    font-size: 4.2rem;
  }
  .common-ttl__en__shadow {
    translate: 3px 3px;
  }
  .common-ttl__jp {
    font-size: 2.8rem;
  }
}

/* blockskip */
/* ============================================ */
#blockskip {
  overflow: hidden;
  height: 0;
  background: #ddd;
  text-align: center;
}

/* header */
/* ============================================ */
.header {
  position: absolute;
  top: 4.69vw;
  left: 8.23vw;
  z-index: 400;
}
.header-hamburger {
  display: none;
}
.header-hamburger.--active .header-hamburger__line:nth-of-type(1) {
  translate: 0 0;
  rotate: -45deg;
}
.header-hamburger.--active .header-hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.header-hamburger.--active .header-hamburger__line:nth-of-type(3) {
  translate: 0 0;
  rotate: 45deg;
}
.header-hamburger__line {
  display: block;
  width: 24px;
  height: 3px;
  background: #fff;
  transition: rotate 0.3s ease-out, opacity 0.1s ease-out;
  position: absolute;
  inset: 0;
  margin: auto;
}
.header-hamburger__line:nth-of-type(1) {
  translate: 0 -8px;
}
.header-hamburger__line:nth-of-type(3) {
  translate: 0 8px;
}
.header-nav.--open {
  translate: 0 0;
}
.header-btn__link {
  display: inline-block;
  text-align: center;
  background: #FF1E64;
  color: #fff;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 1.3rem + 0.7813vw, 2.4rem);
  border: 1px solid #000;
  border-radius: 9999px;
  box-shadow: 0.18em 0.18em 0 #000;
  padding: 0.43em 0.71em;
}
.header-anchor {
  margin-top: 24px;
  padding-left: 16px;
}
.header-anchor__list {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: clamp(1.8rem, 1.1rem + 0.7813vw, 2.6rem);
  letter-spacing: 0.05em;
  color: #fff;
}
.header-anchor__list__link {
  display: block;
  padding-block: 5px;
}

.headnaviimg{
    display: none;
    padding-top: 3rem;
}





/* スクロールして header が画面外に出たら、PC/タブレット幅でも
   スマホと同じ右上固定ハンバーガー+ドロワーに切り替える */
.header.--scrolled .header-hamburger {
  cursor: pointer;
  display: block;
  width: 56px;
  height: 56px;
  background: #FF1720;
  border: 2px solid #fff;
  border-radius: 50%;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 400;
}
.header.--scrolled .header-nav {
  width: 100%;
  max-width: 320px;
  height: 100dvh;
  padding: 80px 32px 48px;
  background: #0085FF url(../images/bg_side.png) no-repeat center center;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  translate: 100% 0;
  /*transition: all 0.3s linear;*/
  overflow: auto;
}
.header.--scrolled .header-nav.--open {
  translate: 0 0;
}
.header.--scrolled .overlay {
  display: block;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease-out;
    backdrop-filter: blur(10px);
}
.header.--scrolled .overlay.--open {
  width: 100%;
  height: 100dvh;
  opacity: 1;
}


 .header.--scrolled .headnaviimg{
    display: block;
}



@media all and (max-width: 1025px) {
  .header {
    position: relative;
    top: auto;
    left: auto;
  }
  .header-hamburger {
    cursor: pointer;
    display: block;
    width: 56px;
    height: 56px;
    background: #FF1720;
    border: 2px solid #fff;
    border-radius: 50%;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 400;
  }
  .header-nav {
    width: 100%;
    max-width: 300px;
    height: 100dvh;
    padding: 80px 32px 48px;
  background: #0085FF url(../images/bg_side.png) no-repeat center center;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    translate: 100% 0;
    /*transition: all 0.3s linear;*/
    overflow: auto;
  }
  .header .overlay {
    display: block;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease-out;
  
  }
  .header .overlay.--open {
    width: 100%;
    height: 100dvh;
    opacity: 1;
  }

 .headnaviimg{
    display: block;
}
}

/* footer */
/* ============================================ */
.footer {
  padding: 64px 0 112px;
  background: #003968;
  color: #fff;
  position: relative;
  z-index: 200;
}
.footer-wrap {
  width: calc(100% - 6.25vw);
  margin-inline: auto;
}
.footer-inner {
  max-width: 1380px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px 32px;
}
.footer-list {
  flex-grow: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 32px;
}
.footer-list__en {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 5.8rem;
  font-weight: 900;
  line-height: 1.1;
}
.footer-list__name {
  font-size: 2.2rem;
  margin-top: 24px;
}
.footer-list__link {
  font-size: 2.8rem;
  font-weight: 600;
  margin-top: 20px;
}
.footer-list__link a {
  color: #00B1FF;
}
.footer-list__link a::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("../images/icon_blank.svg") center center/contain no-repeat;
  margin-left: 0.4em;
  vertical-align: -0.1em;
}
.footer-banner {
  flex-shrink: 0;
  width: 58.84%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px min(3.33vw, 64px);
}
.footer-bottom {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin-top: 48px;
}
.footer-copyright {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.6rem;
}
.footer-logo {
  text-align: center;
}
.footer-link {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 2rem;
}
.footer-link__item {
  padding-left: 32px;
  border-left: 1px solid #fff;
}
.footer-link__item:first-of-type {
  padding-left: 0;
  border-left: none;
}

.pagetop {
  cursor: pointer;
  text-align: center;
  position: fixed;
  bottom: min(1.67vw, 32px);
  right: 1.67vw;
  z-index: 100;
}
.pagetop-arrow {
  width: 48px;
}
.pagetop-txt {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.1;
  margin-top: 6px;
  color: #fff;
}
@media all and (max-width: 1367px) {
  .footer-list {
    gap: 24px;
  }
  .pagetop {
    right: 24px;
  }
}
@media all and (max-width: 1025px) {
  .footer-inner {
    flex-direction: column;
  }
  .footer-banner {
    width: 100%;
    max-width: 600px;
    gap: 24px;
  }
}
@media all and (max-width: 896px) {
  .footer {
    padding: 40px 0 64px;
  }
  .footer-wrap {
    width: calc(100% - 64px);
  }
  .footer-list {
    width: 100%;
    gap: 16px;
  }
  .footer-list__en {
    font-size: 2.6rem;
  }
  .footer-list__name {
    font-size: 1.5rem;
    margin-top: 16px;
  }
  .footer-list__link {
    font-size: 1.8rem;
    margin-top: 14px;
  }
  .footer-list__mark {
    width: 18px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 32px;
    margin-top: 40px;
  }
  .footer-copyright {
    text-align: center;
    font-size: 1rem;
    order: 2;
  }
  .footer-logo img {
    width: 160px;
  }
  .footer-link {
    justify-content: center;
    font-size: 1.2rem;
    gap: 10px 20px;
    order: 1;
  }
  .footer-link__item {
    padding-left: 20px;
  }
  .pagetop {
    bottom: 12px;
    right: 12px;
  }
  .pagetop-arrow {
    width: 32px;
  }
  .pagetop-txt {
    font-size: 1.2rem;
    margin-top: 4px;
  }
}
@media all and (max-width: 480px) {
  .footer-wrap {
    width: calc(100% - 32px);
  }
  .footer-banner {
    gap: 16px;
  }
}

[data-micromodal-trigger] {
  cursor: pointer;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal__container {
  width: 100%;
  max-width: 640px;
  max-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__content {
  margin: 20px 16px;
}

.modal-movie__container {
  max-width: 1000px;
}
.modal-movie__contents {
  padding: 42px 0;
}
@media all and (max-width: 896px) {
  .modal__container {
    max-width: 500px;
  }
  .modal-movie__contents {
    padding: 32px 0;
  }
}
.modal-movie__main {
  position: relative;
}
.modal-movie__close {
  width: 42px;
  height: 42px;
  border: none;
  position: absolute;
  top: -42px;
  right: 0;
}
.modal-movie__close > span {
  display: block;
  width: 20px;
  height: 3px;
  background: #fff;
  position: absolute;
  inset: 0;
  margin: auto;
}
.modal-movie__close > span:nth-of-type(1) {
  translate: 0 0;
  rotate: 45deg;
}
.modal-movie__close > span:nth-of-type(2) {
  translate: 0 0;
  rotate: -45deg;
}
.modal-movie__block iframe {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/9;
}

/**************************\
  Demo Animation Style
\**************************/
@-webkit-keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
  -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}



















/* font-size
-------------------------------------*/
.txtxxsmall { font-size: xx-small}
.txtxsmall { font-size: x-small}
.txtsmall { font-size: small}
.txtsmaller { font-size: smaller}
.txtxxlarge { font-size: xx-large}
.txtxlarge { font-size: x-large}
.txtlarge { font-size: large}
.txtlarger { font-size: larger}
.txtmed { font-size: medium}
.txt09 { font-size: 9px;}
.txt10 { font-size: 10px;}
.txt11 { font-size: 11px;}
.txt12 { font-size: 12px;}
.txt13 { font-size: 13px;}
.txt14 { font-size: 14px;}
.txt15 { font-size: 15px;}
.txt16 { font-size: 16px;}
.txt17 { font-size: 17px;}
.txt18 { font-size: 18px;}
.txt19 { font-size: 19px;}
.txt20 { font-size: 20px;}
.txt21 { font-size: 21px;}
.txt22 { font-size: 22px;}
.txt23 { font-size: 23px;}
.txt24 { font-size: 24px;}
.txt25 { font-size: 25px;}
.txt26 { font-size: 26px;}
.txt70{font-size:70%;}
.txt80{font-size:80%;}
.txt90{font-size:90%;}
.txt110{font-size:110%;}
.txt120{font-size:120%;}
.txt130{font-size:130%;}
.txt140{font-size:140%;}
.txt150{font-size:150%;}
.txt200{font-size:200%;}




/*margin
------------------------------------*/
.ma20 { margin: 20px;}
.ma10 { margin: 10px;}
.ma05 { margin: 5px;}
.mt20 {	margin: 20px 0px 0px 0px;}
.mt10 { margin: 10px 0px 0px 0px;}
.mt05 { margin: 5px 0px 0px 0px;}
.mb20 { margin: 0px 0px 20px 0px;}
.mb10 { margin: 0px 0px 10px 0px;}
.mb05 { margin: 0px 0px 5px 0px;}
.mr20 { margin: 0px 20px 0px 0px;}
.mr10 { margin: 0px 10px 0px 0px;}
.mr05 { margin: 0px 5px 0px 0px;}
.ml20 { margin: 0px 0px 0px 20px;}
.ml15 { margin: 0px 0px 0px 15px;}
.ml10 { margin: 0px 0px 0px 10px;}
.ml05 { margin: 0px 0px 0px 5px;}
.mtb20 { margin: 20px 0;}
.mtb10 { margin: 10px 0;}
.mtb05 { margin: 5px 0;}

/*padding
------------------------------------*/
.pa20 { padding: 20px;}
.pa10 { padding: 10px;}
.pa05 { padding: 5px;}
.pt20 { padding-top: 20px;}
.pt10 { padding-top: 10px;}
.pt05 { padding-top: 5px;}
.pb20 { padding-bottom:20px;}
.pb10 { padding-bottom:10px;}
.pb05 { padding-bottom: 5px;}
.pr20 { padding-right: 20px;}
.pr10 { padding-right: 10px;}
.pr05 { padding-right: 5px;}
.pl20 { padding-left:20px;}
.pl10 { padding-left: 10px;}
.pl05 { padding-left:5px;}

/*--------------------------------------------------------------------------
*/
/* floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここから） */
.clearbox,
.clearfix{
min-height:1px;/* IE 7対策 */
}
.clearbox:after,
.clearfix:after {
 content:".";
 display:block;
 height:0px;
 clear:both;
 visibility:hidden;
 font-size: 0.1em;
 line-height: 0; 

}
.clearbox,
.clearfix { display:inline-table; }
/* Mac IE には適用させない \*/
* html .clearbox,
* html .clearfix { height:1px; }
.clearbox,
.clearfix { display:block; }
/* */
/* floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここまで） */
/*--------------------------------------------------------------------------
*/
/*----上へ戻る----*/
/*.gotop{
	padding:10px 0 20px 0;

}
.contents .gotop p{
	clear:both;
	text-align:right;
	background:url(../img/bg_gotop.gif) no-repeat right 5px;
	padding:0 15px 0 0px;
}
.gotop p a:hover{

}*/
/*----位置の指定----*/
.alncenter{
	text-align:center;
}
.alnleft{
	text-align:left;
}
.alnright{
	text-align:right;
}
.fltleft{
	float:left;
}
.fltright{
	float:right;
}
.marginauto{
	margin-left:auto;
	margin-right:auto;
}
.clear{
	clear:both;
}
.valntop{
	vertical-align:top;
}
.valnmiddle{
	vertical-align:middle;
}
.valnbottom{
	vertical-align:bottom;
}
.indent{
	text-indent:-10000px;
}
/*.justify{
	text-align:justify;
	text-justify: distribute-all-lines;
}
*/
.fontmincho{
	font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
}
/*----ディスプレイ----*/
.none{
	display:none;
}
.block{
	display:block;
}
.inline{
	display:inline;
}
.inlineblock{
	display:inline-block;
}


.cap,
p .cap{
	padding-left:1em;
	text-indent:-1em;

}
.cap15,
p .cap15{
	padding-left:1.5em;
	text-indent:-1.5em;
   
}
.cap2,
p .cap2{
	padding-left:2em;
	text-indent:-2em;
    
}
 p .cap,
 p .cap15,
 p .cap2{
display: inline-block;
}


a:hover img{
	opacity:0.8;
	filter: alpha(opacity=80);
}

.weight400{
	font-weight:400;
}
.weight800{
	font-weight:800;
}




.d-flex {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
.f-wrap {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.f-nowrap {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.jc-start {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}
.jc-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
.jc-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.jc-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.jc-around{
	justify-content: space-around;
}
.ai-start {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
.ai-end {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}
.ai-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.ac-center {
	-ms-flex-line-pack: center;
	align-content: center;
}
.order-1 {
	-webkit-box-ordinal-group:2;
	-ms-flex-order:1;
	order:1;
}
.order-0 {
	-webkit-box-ordinal-group:1;
	-ms-flex-order:0;
	order:0;
}
.box-borderbox {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.flex-center {
	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;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
}
.flex-center > * {
	width: 100%;
}

.row-r{
    flex-direction: row-reverse;
}
.relative{
    position: relative;
}

.findanscase{
    background: #fff;
    padding: 7rem 5rem;
    margin-top: -2rem;
}






/*======================================
  レイアウト
  ※ max-width・padding はサイトごとに変更
======================================*/
.wrap {
	overflow-x: hidden;
}

/* ※サイトごとに変更 */
.mainbody {
	max-width: 100rem;
	margin: 0 auto;
}

.mainbody2 {
	max-width: 90rem;
	margin: 0 auto;
}

.mainbody3 {
	max-width: 100rem;
	margin: 0 auto;
}

/* ※サイトごとに変更
   実際のコンテンツラッパー(#contents.contents)と名前が重複するため
   テンプレート専用に .tpl-contents としています */
.contents {
	padding: 8rem 0;
}

.width100 { width: 100%; }
.onlysp   { display: none; }
.none     { display: none; }
.block    { display: block; }
.uline    { text-decoration: underline; }