@charset "UTF-8";
/*
PCサイドバーにバナーがないため、パンクズの位置と、mainのgapの幅を調整してます。
PCサイドバーにバナーを置く場合は、
・4660・4661行目を削除し、4662行目のコメントアウトを外してください。
・6754行目のコメントアウトを外してください。
*/
/*----------------------------------------------------
　Base
----------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-font-feature-settings: "pkna" 1;
          font-feature-settings: "pkna" 1;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  text-align: left;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin: 0;
  padding: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin: 0;
  padding: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

li {
  list-style-type: none;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0;
}

blockquote {
  margin: 0;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin: 0;
  overflow: auto;
}

figure {
  margin: 0;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

button {
  outline: none;
}

button:focus {
  outline: none;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: reboot
base:
  - reboot
---

リセットCSSです。<br>
基本的には編集不可ですが、リセットCSSが邪魔してスタイルが崩れる時は適宜修正してください。
<br>
*/
/*----------------------------------------------------
### ブレークポイント
----------------------------------------------------*/
/*----------------------------------------------------
## 画面サイズ
----------------------------------------------------*/
/*----------------------------------------------------
### 色（QLife Colors）
ここの色は編集しないでください
----------------------------------------------------*/
/*----------------------------------------------------
### 色（QLife Colors）
この色は編集しないでください
----------------------------------------------------*/
/*----------------------------------------------------
### ブレークポイント
----------------------------------------------------*/
/*----------------------------------------------------
## 画面サイズ
----------------------------------------------------*/
/*----------------------------------------------------
### 色（QLife Colors）
ここの色は編集しないでください
----------------------------------------------------*/
/*----------------------------------------------------
### 色の割り当て
各色にはデフォルトでQLife Colorsが割り当てられています。
QLife Color以外の色を使う時は、各変数を直接編集してください。
----------------------------------------------------*/
/*----------------------------------------------------
### 文字サイズ ボタンとラベル以外はpcサイズあり
----------------------------------------------------*/
/*----------------------------------------------------
### 文字太さ
----------------------------------------------------*/
/*----------------------------------------------------
### 行間
----------------------------------------------------*/
/*----------------------------------------------------
### 書体セット
----------------------------------------------------*/
/*----------------------------------------------------
### マージン
----------------------------------------------------*/
/*----------------------------------------------------
### 角丸
----------------------------------------------------*/
/*----------------------------------------------------
　影幅
----------------------------------------------------*/
/*----------------------------------------------------
　ボタン縦幅
----------------------------------------------------*/
/*----------------------------------------------------
　z-index
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: グローバル変数
grobal:
  - グローバル変数
---

---
変数
---
色や書体、マージンや画面サイズ、効果など、<br>
アプリ内の統一性を保つため、これらは変数として宣言して使用します。<br>
グローバルは変数を宣言する場所です。<br>
<br>
<br>

---
ブレークポイント
---
接頭辞に'$breakpoint-'、接尾辞にデバイス（'sp''pc'など）を指定して宣言します。<br>
mediaQueryのmixinなどで使用します<br>

```scss
$breakpoint-spmin : '(max-width: 320px)';
$breakpoint-sp    : '(max-width: 768px)';
$breakpoint-pc    : '(min-width: 769px)';
$breakpoint-pcmax : '(min-width: 980px)';
```
<br>
<br>

---
画面サイズ
---
接頭辞に'$deviceWidth-'、接尾辞にデバイス（'sp''pc'など）を指定して宣言します。<br>
```scss
$deviceWidth-spmin : 320px;
$deviceWidth-spmax : 768px;
$deviceWidth-pcmin : 769px;
$deviceWidth-pcmax : 980px;
```
<br>
<br>

---
マージン
---
接頭辞に'$m-'、接尾辞にサイズ（'m''s'など）を指定して宣言します。

```scss
$m-x3s : 0.4rem;
$m-x2s  : 0.8rem;
$m-xs   : 1.2rem;
$m-s    : 1.6rem;
$m-m    : 2rem;
$m-l    : 2.8rem;
$m-xl    : 3.2rem;
$m-x2l   : 4rem;
$m-x3l   : 6rem;
```
<br>
<br>

---
文字サイズ
---
接頭辞に'$fs-'、接尾辞にサイズ（'m''s'など）を指定して宣言します。
```scss
$fs-display-lg: 3.2rem;
$fs-display-md: 2.6rem;
$fs-display-sm: 2.2rem;

$fs-headline-lg: 1.8rem;
$fs-headline-md: 1.6rem;
$fs-headline-sm: 1.4rem;

$fs-title-lg: 1.6rem;
$fs-title-md: 1.5rem;
$fs-title-sm: 1.3rem;

$fs-body-lg: 1.8rem;
$fs-body-md: 1.6rem;
$fs-body-sm: 1.3rem;

$fs-label-lg: 1.8rem;
$fs-label-md: 1.6rem;
$fs-label-sm: 1.3rem;

$fs-button-lg: 2rem;
$fs-button-md: 1.6rem;
$fs-button-sm: 1.3rem;
```
<br>
<br>

---
行間
---
接頭辞に'$lh-'、接尾辞に用途（5種類+α）を指定して宣言します。
```scss
$lh-display: 1.4;
$lh-headline: 1.6;
$lh-title: 1.3;
$lh-body: 1.6;
$lh-label: 1.2;
$lh-button: 1;
```
<br>
<br>

---
文字太さ
---
接頭辞に'$fw-'、接尾辞にサイズを指定して宣言します。
```scss
$fw-n  : 300;
$fw-sb  : normal;
$fw-b  : 600;
```
<br>
<br>

---
ボタン高さ
---
接頭辞に'$buttonHeight-'、接尾辞にサイズを指定して宣言します。<br>
```scss
$buttonHeight-lg : 6.2rem;
$buttonHeight-md : 4.6rem;
$buttonHeight-sm : 2.9rem;
```
<br>
<br>

---
角丸
---
接頭辞に'$round-'、接尾辞にサイズを指定して宣言します。<br>
```scss
$round-s  : 0.4rem;
$round-m  : 0.8rem;
$round-l  : 1.2rem;
$round-xl : 2rem;
$round-h  : 10rem; //丸くしたい時
$round-e  : 50%; //円にしたい時
```
<br>
<br>

---
シャドウのサイズ
---
接頭辞に'$shadow-'、接尾辞にサイズを指定して宣言します。<br>
```scss
$shadow-s  : 0 1px 0 rgba($color-Black, 0.15);
$shadow-m  : 0 1px 3px rgba($color-Black, 0.15);
$shadow-l  : 0 3px 2px rgba($color-Black, 0.15);
$shadow-xl : 0 5px 5px rgba($color-Black, 0.15);
$shadow-hover : 0 2px 5px rgba($color-Black, 0.15);
```
<br>
<br>
*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: カラー
grobal:
  - カラー
---

---
カラー
---
カラーは全て変数で宣言したものを使用します。<br>
テキストカラーや背景カラー、ボタンのテキスト、背景というように、予め使う場面に応じた変数が用意されています。<br>
<br>
予め用意されたmixinやモジュールは、全てこの変数を参照しています。<br>
<br>
また、各カラーの値はデフォルトでQLifeカラーが割り当てられていますが、案件や場合によって、カラー値は適宜編集して使用してください。
<br>
<br>


---
カラー変数
---
接頭辞に'$color-'、接尾辞に使用用途が分かるキーワードを指定して宣言します。<br>
<br>
例）
```scss
// 基本
$color-Text
$color-Surface
$color-Background
$color-Outline
$color-Black
$color-White

// ボックス
$color-BoxText
$color-BoxBackground

// ボタン
$color-ButtonText
$color-ButtonBackground
$color-ButtonOutlineText
$color-ButtonOutlineBackground

// 入力フォーム
$color-InputText
$color-InputBackground
$color-InputOutline
$color-InputText-Active
$color-InputBackground-Active
$color-InputText-Placeholder
$color-InputBackground-Focus

// スイッチ
$color-Switch
$color-Switch-Checked

// 非アクティブ
$color-DisabledText
$color-DisabledBackground

// エラー
$color-ErrorText
$color-ErrorBackground

// 注釈
$color-NoteText
$color-NoteBackground
```
<br>
<br>


---
QLifeカラー
---
QLifeのサービスで使用する色として予めカラーセットが用意されています。<br>
これはQLifeが提供するサービスで使用を推奨するカラーセットで、クライアント案件の場合ではこのカラーは使用しなくても構いません。<br>
<br>
QLifeカラーは'_qlifeColors.scss'で宣言されています。<br>
テキストカラーや背景カラー、ボタンのテキスト、背景というように、<br>
予め使う場面に応じた変数が用意されています。<br>
<br>
各mixinやモジュールは、この予め用意された変数を参照しています。<br>
```scss
// Pimary
$color-Primary: #71541C;
$color-OnPrimary: #FFFFFF;
$color-PrimaryContainer: #DDCAB1;
$color-OnPrimaryContainer: #442B00;
$color-PrimaryHover: #826837;
// Secondary
$color-Secondary: #FBC334;
$color-OnSecondary: #442B00;
$color-SecondaryContainer: #FFD176;
$color-OnSecondaryContainer: #442B00;
$color-SecondaryHover: #FFB830;
// Tertiary
$color-Tertiary: #015B80;
$color-OnTertiary: #FFFFFF;
$color-TertiaryContainer: #C6E7FF;
$color-OnTertiaryContainer: #001E2E;
// Error
$color-Error: #BA1A1A;
$color-OnError: #FFFFFF;
$color-ErrorContainer: #FFDAD6;
$color-OnErrorContainer: #410002;
// Background
$color-Background: #FAF6F2;
$color-OnBackground: #4F4539;
// Surface
$color-Surface: #FFFFFE;
$color-OnSurface: #3A3733;
$color-SurfaceVariant: #EFE0CF;
$color-OnSurfaceVariant: #4F4539;
$color-SurfaceVariantHover: #FFDDB1;
// Disabled
$color-Disabled: #E3E0DC;
$color-OnDisabled: #FFFFFF;
// Outline
$color-Outline: #D3C4B4;
// Black,White
$color-Black: #000000;
$color-White: #FFFFFF;
```
<br>
<br>
*/
/*----------------------------------------------------
 Mixin インポート用
----------------------------------------------------*/
/*----------------------------------------------------
 メディアクエリmixin
----------------------------------------------------*/
@media (max-width: 999px) {
  .sp-kill {
    display: none !important;
  }
}

@media (min-width: 1000px) {
  .pc-kill {
    display: none !important;
  }
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: MediaQuery
mixin:
  - 03 MediaQuery
---

---
メディアクエリ mixin
---
```scss
@include mq("$breakpointsの値"){
  // PCのスタイルを記述
}
```

メディアクエリ用のスタイルを、どこでも記述できるようにするためのmixinです。<br>
引数の`$breakpointsの値`は[`_variable.scss`](../)で宣言されているものが渡せます。<br>
デフォルトでは`$breakpoint-pc`が設定されています。<br>
<br>
例）
```scss
.hoge {
  // SP用の幅
  width: 100%;

  @include mq {
    // PC用の幅
    width: 100rem;
  }
}
```
*/
/*----------------------------------------------------
　Margin
----------------------------------------------------*/
.mt-a {
  margin-top: auto !important;
}

.mb-a {
  margin-bottom: auto !important;
}

.ml-a {
  margin-left: auto !important;
}

.mr-a {
  margin-right: auto !important;
}

.m-all-a {
  margin: auto auto auto auto !important;
}

.m-h-a {
  margin-left: auto !important;
  margin-right: auto !important;
}

.m-v-a {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

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

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

.ml-0 {
  margin-left: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.m-all-0 {
  margin: 0 0 0 0 !important;
}

.m-h-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.m-v-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mt-x3s {
  margin-top: 0.4rem !important;
}

.mb-x3s {
  margin-bottom: 0.4rem !important;
}

.ml-x3s {
  margin-left: 0.4rem !important;
}

.mr-x3s {
  margin-right: 0.4rem !important;
}

.m-all-x3s {
  margin: 0.4rem 0.4rem 0.4rem 0.4rem !important;
}

.m-h-x3s {
  margin-left: 0.4rem !important;
  margin-right: 0.4rem !important;
}

.m-v-x3s {
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important;
}

.mt-x2s {
  margin-top: 0.8rem !important;
}

.mb-x2s {
  margin-bottom: 0.8rem !important;
}

.ml-x2s {
  margin-left: 0.8rem !important;
}

.mr-x2s {
  margin-right: 0.8rem !important;
}

.m-all-x2s {
  margin: 0.8rem 0.8rem 0.8rem 0.8rem !important;
}

.m-h-x2s {
  margin-left: 0.8rem !important;
  margin-right: 0.8rem !important;
}

.m-v-x2s {
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important;
}

.mt-xs {
  margin-top: 1.2rem !important;
}

.mb-xs {
  margin-bottom: 1.2rem !important;
}

.ml-xs {
  margin-left: 1.2rem !important;
}

.mr-xs {
  margin-right: 1.2rem !important;
}

.m-all-xs {
  margin: 1.2rem 1.2rem 1.2rem 1.2rem !important;
}

.m-h-xs {
  margin-left: 1.2rem !important;
  margin-right: 1.2rem !important;
}

.m-v-xs {
  margin-top: 1.2rem !important;
  margin-bottom: 1.2rem !important;
}

.mt-s {
  margin-top: 1.6rem !important;
}

.mb-s {
  margin-bottom: 1.6rem !important;
}

.ml-s {
  margin-left: 1.6rem !important;
}

.mr-s {
  margin-right: 1.6rem !important;
}

.m-all-s {
  margin: 1.6rem 1.6rem 1.6rem 1.6rem !important;
}

.m-h-s {
  margin-left: 1.6rem !important;
  margin-right: 1.6rem !important;
}

.m-v-s {
  margin-top: 1.6rem !important;
  margin-bottom: 1.6rem !important;
}

.mt-m {
  margin-top: 2rem !important;
}

.mb-m {
  margin-bottom: 2rem !important;
}

.ml-m {
  margin-left: 2rem !important;
}

.mr-m {
  margin-right: 2rem !important;
}

.m-all-m {
  margin: 2rem 2rem 2rem 2rem !important;
}

.m-h-m {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.m-v-m {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.mt-l {
  margin-top: 2.8rem !important;
}

.mb-l {
  margin-bottom: 2.8rem !important;
}

.ml-l {
  margin-left: 2.8rem !important;
}

.mr-l {
  margin-right: 2.8rem !important;
}

.m-all-l {
  margin: 2.8rem 2.8rem 2.8rem 2.8rem !important;
}

.m-h-l {
  margin-left: 2.8rem !important;
  margin-right: 2.8rem !important;
}

.m-v-l {
  margin-top: 2.8rem !important;
  margin-bottom: 2.8rem !important;
}

.mt-xl {
  margin-top: 3.2rem !important;
}

.mb-xl {
  margin-bottom: 3.2rem !important;
}

.ml-xl {
  margin-left: 3.2rem !important;
}

.mr-xl {
  margin-right: 3.2rem !important;
}

.m-all-xl {
  margin: 3.2rem 3.2rem 3.2rem 3.2rem !important;
}

.m-h-xl {
  margin-left: 3.2rem !important;
  margin-right: 3.2rem !important;
}

.m-v-xl {
  margin-top: 3.2rem !important;
  margin-bottom: 3.2rem !important;
}

.mt-x2l {
  margin-top: 4rem !important;
}

.mb-x2l {
  margin-bottom: 4rem !important;
}

.ml-x2l {
  margin-left: 4rem !important;
}

.mr-x2l {
  margin-right: 4rem !important;
}

.m-all-x2l {
  margin: 4rem 4rem 4rem 4rem !important;
}

.m-h-x2l {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}

.m-v-x2l {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.mt-x3l {
  margin-top: 6rem !important;
}

.mb-x3l {
  margin-bottom: 6rem !important;
}

.ml-x3l {
  margin-left: 6rem !important;
}

.mr-x3l {
  margin-right: 6rem !important;
}

.m-all-x3l {
  margin: 6rem 6rem 6rem 6rem !important;
}

.m-h-x3l {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}

.m-v-x3l {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

@media (min-width: 1000px) {
  .mt-a-pc {
    margin-top: auto !important;
  }
  .mb-a-pc {
    margin-bottom: auto !important;
  }
  .ml-a-pc {
    margin-left: auto !important;
  }
  .mr-a-pc {
    margin-right: auto !important;
  }
  .m-all-a-pc {
    margin: auto auto auto auto !important;
  }
  .m-h-a-pc {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-v-a-pc {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-0-pc {
    margin-top: 0 !important;
  }
  .mb-0-pc {
    margin-bottom: 0 !important;
  }
  .ml-0-pc {
    margin-left: 0 !important;
  }
  .mr-0-pc {
    margin-right: 0 !important;
  }
  .m-all-0-pc {
    margin: 0 0 0 0 !important;
  }
  .m-h-0-pc {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .m-v-0-pc {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mt-x3s-pc {
    margin-top: 0.4rem !important;
  }
  .mb-x3s-pc {
    margin-bottom: 0.4rem !important;
  }
  .ml-x3s-pc {
    margin-left: 0.4rem !important;
  }
  .mr-x3s-pc {
    margin-right: 0.4rem !important;
  }
  .m-all-x3s-pc {
    margin: 0.4rem 0.4rem 0.4rem 0.4rem !important;
  }
  .m-h-x3s-pc {
    margin-left: 0.4rem !important;
    margin-right: 0.4rem !important;
  }
  .m-v-x3s-pc {
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
  }
  .mt-x2s-pc {
    margin-top: 0.8rem !important;
  }
  .mb-x2s-pc {
    margin-bottom: 0.8rem !important;
  }
  .ml-x2s-pc {
    margin-left: 0.8rem !important;
  }
  .mr-x2s-pc {
    margin-right: 0.8rem !important;
  }
  .m-all-x2s-pc {
    margin: 0.8rem 0.8rem 0.8rem 0.8rem !important;
  }
  .m-h-x2s-pc {
    margin-left: 0.8rem !important;
    margin-right: 0.8rem !important;
  }
  .m-v-x2s-pc {
    margin-top: 0.8rem !important;
    margin-bottom: 0.8rem !important;
  }
  .mt-xs-pc {
    margin-top: 1.2rem !important;
  }
  .mb-xs-pc {
    margin-bottom: 1.2rem !important;
  }
  .ml-xs-pc {
    margin-left: 1.2rem !important;
  }
  .mr-xs-pc {
    margin-right: 1.2rem !important;
  }
  .m-all-xs-pc {
    margin: 1.2rem 1.2rem 1.2rem 1.2rem !important;
  }
  .m-h-xs-pc {
    margin-left: 1.2rem !important;
    margin-right: 1.2rem !important;
  }
  .m-v-xs-pc {
    margin-top: 1.2rem !important;
    margin-bottom: 1.2rem !important;
  }
  .mt-s-pc {
    margin-top: 1.6rem !important;
  }
  .mb-s-pc {
    margin-bottom: 1.6rem !important;
  }
  .ml-s-pc {
    margin-left: 1.6rem !important;
  }
  .mr-s-pc {
    margin-right: 1.6rem !important;
  }
  .m-all-s-pc {
    margin: 1.6rem 1.6rem 1.6rem 1.6rem !important;
  }
  .m-h-s-pc {
    margin-left: 1.6rem !important;
    margin-right: 1.6rem !important;
  }
  .m-v-s-pc {
    margin-top: 1.6rem !important;
    margin-bottom: 1.6rem !important;
  }
  .mt-m-pc {
    margin-top: 2rem !important;
  }
  .mb-m-pc {
    margin-bottom: 2rem !important;
  }
  .ml-m-pc {
    margin-left: 2rem !important;
  }
  .mr-m-pc {
    margin-right: 2rem !important;
  }
  .m-all-m-pc {
    margin: 2rem 2rem 2rem 2rem !important;
  }
  .m-h-m-pc {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }
  .m-v-m-pc {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  .mt-l-pc {
    margin-top: 2.8rem !important;
  }
  .mb-l-pc {
    margin-bottom: 2.8rem !important;
  }
  .ml-l-pc {
    margin-left: 2.8rem !important;
  }
  .mr-l-pc {
    margin-right: 2.8rem !important;
  }
  .m-all-l-pc {
    margin: 2.8rem 2.8rem 2.8rem 2.8rem !important;
  }
  .m-h-l-pc {
    margin-left: 2.8rem !important;
    margin-right: 2.8rem !important;
  }
  .m-v-l-pc {
    margin-top: 2.8rem !important;
    margin-bottom: 2.8rem !important;
  }
  .mt-xl-pc {
    margin-top: 3.2rem !important;
  }
  .mb-xl-pc {
    margin-bottom: 3.2rem !important;
  }
  .ml-xl-pc {
    margin-left: 3.2rem !important;
  }
  .mr-xl-pc {
    margin-right: 3.2rem !important;
  }
  .m-all-xl-pc {
    margin: 3.2rem 3.2rem 3.2rem 3.2rem !important;
  }
  .m-h-xl-pc {
    margin-left: 3.2rem !important;
    margin-right: 3.2rem !important;
  }
  .m-v-xl-pc {
    margin-top: 3.2rem !important;
    margin-bottom: 3.2rem !important;
  }
  .mt-x2l-pc {
    margin-top: 4rem !important;
  }
  .mb-x2l-pc {
    margin-bottom: 4rem !important;
  }
  .ml-x2l-pc {
    margin-left: 4rem !important;
  }
  .mr-x2l-pc {
    margin-right: 4rem !important;
  }
  .m-all-x2l-pc {
    margin: 4rem 4rem 4rem 4rem !important;
  }
  .m-h-x2l-pc {
    margin-left: 4rem !important;
    margin-right: 4rem !important;
  }
  .m-v-x2l-pc {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
  }
  .mt-x3l-pc {
    margin-top: 6rem !important;
  }
  .mb-x3l-pc {
    margin-bottom: 6rem !important;
  }
  .ml-x3l-pc {
    margin-left: 6rem !important;
  }
  .mr-x3l-pc {
    margin-right: 6rem !important;
  }
  .m-all-x3l-pc {
    margin: 6rem 6rem 6rem 6rem !important;
  }
  .m-h-x3l-pc {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
  }
  .m-v-x3l-pc {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
  }
}
.m-a {
  margin: auto !important;
}

/*----------------------------------------------------
　Padding
----------------------------------------------------*/
.pt-a {
  padding-top: auto !important;
}

.pb-a {
  padding-bottom: auto !important;
}

.pl-a {
  padding-left: auto !important;
}

.pr-a {
  padding-right: auto !important;
}

.p-all-a {
  padding: auto auto auto auto !important;
}

.p-h-a {
  padding-left: auto !important;
  padding-right: auto !important;
}

.p-v-a {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.p-all-0 {
  padding: 0 0 0 0 !important;
}

.p-h-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-v-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pt-x3s {
  padding-top: 0.4rem !important;
}

.pb-x3s {
  padding-bottom: 0.4rem !important;
}

.pl-x3s {
  padding-left: 0.4rem !important;
}

.pr-x3s {
  padding-right: 0.4rem !important;
}

.p-all-x3s {
  padding: 0.4rem 0.4rem 0.4rem 0.4rem !important;
}

.p-h-x3s {
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}

.p-v-x3s {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

.pt-x2s {
  padding-top: 0.8rem !important;
}

.pb-x2s {
  padding-bottom: 0.8rem !important;
}

.pl-x2s {
  padding-left: 0.8rem !important;
}

.pr-x2s {
  padding-right: 0.8rem !important;
}

.p-all-x2s {
  padding: 0.8rem 0.8rem 0.8rem 0.8rem !important;
}

.p-h-x2s {
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}

.p-v-x2s {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

.pt-xs {
  padding-top: 1.2rem !important;
}

.pb-xs {
  padding-bottom: 1.2rem !important;
}

.pl-xs {
  padding-left: 1.2rem !important;
}

.pr-xs {
  padding-right: 1.2rem !important;
}

.p-all-xs {
  padding: 1.2rem 1.2rem 1.2rem 1.2rem !important;
}

.p-h-xs {
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
}

.p-v-xs {
  padding-top: 1.2rem !important;
  padding-bottom: 1.2rem !important;
}

.pt-s {
  padding-top: 1.6rem !important;
}

.pb-s {
  padding-bottom: 1.6rem !important;
}

.pl-s {
  padding-left: 1.6rem !important;
}

.pr-s {
  padding-right: 1.6rem !important;
}

.p-all-s {
  padding: 1.6rem 1.6rem 1.6rem 1.6rem !important;
}

.p-h-s {
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important;
}

.p-v-s {
  padding-top: 1.6rem !important;
  padding-bottom: 1.6rem !important;
}

.pt-m {
  padding-top: 2rem !important;
}

.pb-m {
  padding-bottom: 2rem !important;
}

.pl-m {
  padding-left: 2rem !important;
}

.pr-m {
  padding-right: 2rem !important;
}

.p-all-m {
  padding: 2rem 2rem 2rem 2rem !important;
}

.p-h-m {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.p-v-m {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.pt-l {
  padding-top: 2.8rem !important;
}

.pb-l {
  padding-bottom: 2.8rem !important;
}

.pl-l {
  padding-left: 2.8rem !important;
}

.pr-l {
  padding-right: 2.8rem !important;
}

.p-all-l {
  padding: 2.8rem 2.8rem 2.8rem 2.8rem !important;
}

.p-h-l {
  padding-left: 2.8rem !important;
  padding-right: 2.8rem !important;
}

.p-v-l {
  padding-top: 2.8rem !important;
  padding-bottom: 2.8rem !important;
}

.pt-xl {
  padding-top: 3.2rem !important;
}

.pb-xl {
  padding-bottom: 3.2rem !important;
}

.pl-xl {
  padding-left: 3.2rem !important;
}

.pr-xl {
  padding-right: 3.2rem !important;
}

.p-all-xl {
  padding: 3.2rem 3.2rem 3.2rem 3.2rem !important;
}

.p-h-xl {
  padding-left: 3.2rem !important;
  padding-right: 3.2rem !important;
}

.p-v-xl {
  padding-top: 3.2rem !important;
  padding-bottom: 3.2rem !important;
}

.pt-x2l {
  padding-top: 4rem !important;
}

.pb-x2l {
  padding-bottom: 4rem !important;
}

.pl-x2l {
  padding-left: 4rem !important;
}

.pr-x2l {
  padding-right: 4rem !important;
}

.p-all-x2l {
  padding: 4rem 4rem 4rem 4rem !important;
}

.p-h-x2l {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.p-v-x2l {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.pt-x3l {
  padding-top: 6rem !important;
}

.pb-x3l {
  padding-bottom: 6rem !important;
}

.pl-x3l {
  padding-left: 6rem !important;
}

.pr-x3l {
  padding-right: 6rem !important;
}

.p-all-x3l {
  padding: 6rem 6rem 6rem 6rem !important;
}

.p-h-x3l {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}

.p-v-x3l {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

@media (min-width: 1000px) {
  .pt-a-pc {
    padding-top: auto !important;
  }
  .pb-a-pc {
    padding-bottom: auto !important;
  }
  .pl-a-pc {
    padding-left: auto !important;
  }
  .pr-a-pc {
    padding-right: auto !important;
  }
  .p-all-a-pc {
    padding: auto auto auto auto !important;
  }
  .p-h-a-pc {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .p-v-a-pc {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
  .pt-0-pc {
    padding-top: 0 !important;
  }
  .pb-0-pc {
    padding-bottom: 0 !important;
  }
  .pl-0-pc {
    padding-left: 0 !important;
  }
  .pr-0-pc {
    padding-right: 0 !important;
  }
  .p-all-0-pc {
    padding: 0 0 0 0 !important;
  }
  .p-h-0-pc {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .p-v-0-pc {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .pt-x3s-pc {
    padding-top: 0.4rem !important;
  }
  .pb-x3s-pc {
    padding-bottom: 0.4rem !important;
  }
  .pl-x3s-pc {
    padding-left: 0.4rem !important;
  }
  .pr-x3s-pc {
    padding-right: 0.4rem !important;
  }
  .p-all-x3s-pc {
    padding: 0.4rem 0.4rem 0.4rem 0.4rem !important;
  }
  .p-h-x3s-pc {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
  .p-v-x3s-pc {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }
  .pt-x2s-pc {
    padding-top: 0.8rem !important;
  }
  .pb-x2s-pc {
    padding-bottom: 0.8rem !important;
  }
  .pl-x2s-pc {
    padding-left: 0.8rem !important;
  }
  .pr-x2s-pc {
    padding-right: 0.8rem !important;
  }
  .p-all-x2s-pc {
    padding: 0.8rem 0.8rem 0.8rem 0.8rem !important;
  }
  .p-h-x2s-pc {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }
  .p-v-x2s-pc {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }
  .pt-xs-pc {
    padding-top: 1.2rem !important;
  }
  .pb-xs-pc {
    padding-bottom: 1.2rem !important;
  }
  .pl-xs-pc {
    padding-left: 1.2rem !important;
  }
  .pr-xs-pc {
    padding-right: 1.2rem !important;
  }
  .p-all-xs-pc {
    padding: 1.2rem 1.2rem 1.2rem 1.2rem !important;
  }
  .p-h-xs-pc {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
  .p-v-xs-pc {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
  .pt-s-pc {
    padding-top: 1.6rem !important;
  }
  .pb-s-pc {
    padding-bottom: 1.6rem !important;
  }
  .pl-s-pc {
    padding-left: 1.6rem !important;
  }
  .pr-s-pc {
    padding-right: 1.6rem !important;
  }
  .p-all-s-pc {
    padding: 1.6rem 1.6rem 1.6rem 1.6rem !important;
  }
  .p-h-s-pc {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }
  .p-v-s-pc {
    padding-top: 1.6rem !important;
    padding-bottom: 1.6rem !important;
  }
  .pt-m-pc {
    padding-top: 2rem !important;
  }
  .pb-m-pc {
    padding-bottom: 2rem !important;
  }
  .pl-m-pc {
    padding-left: 2rem !important;
  }
  .pr-m-pc {
    padding-right: 2rem !important;
  }
  .p-all-m-pc {
    padding: 2rem 2rem 2rem 2rem !important;
  }
  .p-h-m-pc {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .p-v-m-pc {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .pt-l-pc {
    padding-top: 2.8rem !important;
  }
  .pb-l-pc {
    padding-bottom: 2.8rem !important;
  }
  .pl-l-pc {
    padding-left: 2.8rem !important;
  }
  .pr-l-pc {
    padding-right: 2.8rem !important;
  }
  .p-all-l-pc {
    padding: 2.8rem 2.8rem 2.8rem 2.8rem !important;
  }
  .p-h-l-pc {
    padding-left: 2.8rem !important;
    padding-right: 2.8rem !important;
  }
  .p-v-l-pc {
    padding-top: 2.8rem !important;
    padding-bottom: 2.8rem !important;
  }
  .pt-xl-pc {
    padding-top: 3.2rem !important;
  }
  .pb-xl-pc {
    padding-bottom: 3.2rem !important;
  }
  .pl-xl-pc {
    padding-left: 3.2rem !important;
  }
  .pr-xl-pc {
    padding-right: 3.2rem !important;
  }
  .p-all-xl-pc {
    padding: 3.2rem 3.2rem 3.2rem 3.2rem !important;
  }
  .p-h-xl-pc {
    padding-left: 3.2rem !important;
    padding-right: 3.2rem !important;
  }
  .p-v-xl-pc {
    padding-top: 3.2rem !important;
    padding-bottom: 3.2rem !important;
  }
  .pt-x2l-pc {
    padding-top: 4rem !important;
  }
  .pb-x2l-pc {
    padding-bottom: 4rem !important;
  }
  .pl-x2l-pc {
    padding-left: 4rem !important;
  }
  .pr-x2l-pc {
    padding-right: 4rem !important;
  }
  .p-all-x2l-pc {
    padding: 4rem 4rem 4rem 4rem !important;
  }
  .p-h-x2l-pc {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  .p-v-x2l-pc {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .pt-x3l-pc {
    padding-top: 6rem !important;
  }
  .pb-x3l-pc {
    padding-bottom: 6rem !important;
  }
  .pl-x3l-pc {
    padding-left: 6rem !important;
  }
  .pr-x3l-pc {
    padding-right: 6rem !important;
  }
  .p-all-x3l-pc {
    padding: 6rem 6rem 6rem 6rem !important;
  }
  .p-h-x3l-pc {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .p-v-x3l-pc {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}
/*----------------------------------------------------
　要素幅にする
----------------------------------------------------*/
.adjust {
  width: auto !important;
}

@media (min-width: 1000px) {
  .adjust-pc {
    width: auto !important;
  }
}

/*----------------------------------------------------
　Flexbox
----------------------------------------------------*/
.justfy-start {
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
}

.justfy-center {
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}

.justfy-end {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

.justfy-between {
  -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}

.align-start {
  -webkit-box-align: start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}

.align-center {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

.align-end {
  -webkit-box-align: end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
}

.align-between {
  -webkit-box-align: space-between !important;
      -ms-flex-align: space-between !important;
          align-items: space-between !important;
}

.align-stretch {
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}

.align-baseline {
  -webkit-box-align: baseline !important;
      -ms-flex-align: baseline !important;
          align-items: baseline !important;
}

/*----------------------------------------------------
　文字、背景カラー
----------------------------------------------------*/
.color-Primary {
  color: #71541C !important;
}

.bg-Primary {
  background: #71541C !important;
}

.color-OnPrimary {
  color: #FFFFFF !important;
}

.bg-OnPrimary {
  background: #FFFFFF !important;
}

.color-PrimaryContainer {
  color: #DDCAB1 !important;
}

.bg-PrimaryContainer {
  background: #DDCAB1 !important;
}

.color-OnPrimaryContainer {
  color: #442B00 !important;
}

.bg-OnPrimaryContainer {
  background: #442B00 !important;
}

.color-PrimaryHover {
  color: #826837 !important;
}

.bg-PrimaryHover {
  background: #826837 !important;
}

.color-Secondary {
  color: #FBC334 !important;
}

.bg-Secondary {
  background: #FBC334 !important;
}

.color-OnSecondary {
  color: #442B00 !important;
}

.bg-OnSecondary {
  background: #442B00 !important;
}

.color-SecondaryContainer {
  color: #FFD176 !important;
}

.bg-SecondaryContainer {
  background: #FFD176 !important;
}

.color-OnSecondaryContainer {
  color: #442B00 !important;
}

.bg-OnSecondaryContainer {
  background: #442B00 !important;
}

.color-SecondaryHover {
  color: #FFB830 !important;
}

.bg-SecondaryHover {
  background: #FFB830 !important;
}

.color-Tertiary {
  color: #015B80 !important;
}

.bg-Tertiary {
  background: #015B80 !important;
}

.color-OnTertiary {
  color: #FFFFFF !important;
}

.bg-OnTertiary {
  background: #FFFFFF !important;
}

.color-TertiaryContainer {
  color: #C6E7FF !important;
}

.bg-TertiaryContainer {
  background: #C6E7FF !important;
}

.color-OnTertiaryContainer {
  color: #001E2E !important;
}

.bg-OnTertiaryContainer {
  background: #001E2E !important;
}

.color-Error {
  color: #BA1A1A !important;
}

.bg-Error {
  background: #BA1A1A !important;
}

.color-OnError {
  color: #FFFFFF !important;
}

.bg-OnError {
  background: #FFFFFF !important;
}

.color-ErrorContainer {
  color: #FFDAD6 !important;
}

.bg-ErrorContainer {
  background: #FFDAD6 !important;
}

.color-OnErrorContainer {
  color: #410002 !important;
}

.bg-OnErrorContainer {
  background: #410002 !important;
}

.color-Background {
  color: #FAF6F2 !important;
}

.bg-Background {
  background: #FAF6F2 !important;
}

.color-OnBackground {
  color: #4F4539 !important;
}

.bg-OnBackground {
  background: #4F4539 !important;
}

.color-Surface {
  color: #FFFFFE !important;
}

.bg-Surface {
  background: #FFFFFE !important;
}

.color-OnSurface {
  color: #3A3733 !important;
}

.bg-OnSurface {
  background: #3A3733 !important;
}

.color-SurfaceVariant {
  color: #EFE0CF !important;
}

.bg-SurfaceVariant {
  background: #EFE0CF !important;
}

.color-OnSurfaceVariant {
  color: #4F4539 !important;
}

.bg-OnSurfaceVariant {
  background: #4F4539 !important;
}

.color-SurfaceVariantHover {
  color: #FFDDB1 !important;
}

.bg-SurfaceVariantHover {
  background: #FFDDB1 !important;
}

.color-Disabled {
  color: #E3E0DC !important;
}

.bg-Disabled {
  background: #E3E0DC !important;
}

.color-OnDisabled {
  color: #FFFFFF !important;
}

.bg-OnDisabled {
  background: #FFFFFF !important;
}

.color-Outline {
  color: #D3C4B4 !important;
}

.bg-Outline {
  background: #D3C4B4 !important;
}

.color-text {
  color: #3A3733 !important;
}

.bg-text {
  background: #3A3733 !important;
}

/*----------------------------------------------------
name: 書体
----------------------------------------------------*/
.font-display-lg {
  font-size: 3.2rem !important;
}

.font-display-md {
  font-size: 2.6rem !important;
}

.font-display-sm {
  font-size: 2.2rem !important;
}

.font-display-lg-pc {
  font-size: 4rem !important;
}

.font-display-md-pc {
  font-size: 3.2rem !important;
}

.font-display-sm-pc {
  font-size: 2.8rem !important;
}

.font-headline-lg {
  font-size: 1.8rem !important;
}

.font-headline-md {
  font-size: 1.6rem !important;
}

.font-headline-sm {
  font-size: 1.4rem !important;
}

.font-headline-lg-pc {
  font-size: 2.6rem !important;
}

.font-headline-md-pc {
  font-size: 2.2rem !important;
}

.font-headline-sm-pc {
  font-size: 1.6rem !important;
}

.font-title-lg {
  font-size: 1.6rem !important;
}

.font-title-md {
  font-size: 1.5rem !important;
}

.font-title-sm {
  font-size: 1.3rem !important;
}

.font-title-lg-pc {
  font-size: 1.8rem !important;
}

.font-title-md-pc {
  font-size: 1.6rem !important;
}

.font-title-sm-pc {
  font-size: 1.5rem !important;
}

.font-body-lg {
  font-size: 1.8rem !important;
}

.font-body-md {
  font-size: 1.6rem !important;
}

.font-body-sm {
  font-size: 1.3rem !important;
}

.font-body-lg-pc {
  font-size: 2rem !important;
}

.font-body-md-pc {
  font-size: 1.8rem !important;
}

.font-body-sm-pc {
  font-size: 1.4rem !important;
}

.font-label-lg {
  font-size: 1.8rem !important;
}

.font-label-md {
  font-size: 1.6rem !important;
}

.font-label-sm {
  font-size: 1.3rem !important;
}

.font-button-lg {
  font-size: 2rem !important;
}

.font-button-md {
  font-size: 1.6rem !important;
}

.font-button-sm {
  font-size: 1.3rem !important;
}

.font-xs {
  font-size: 1.3rem !important;
}

.font-s {
  font-size: 1.6rem !important;
}

.font-m {
  font-size: 1.8rem !important;
}

.font-l {
  font-size: 2.1rem !important;
}

.font-xl {
  font-size: 3.4rem !important;
}

.font-n {
  font-weight: 300 !important;
}

.font-sb {
  font-weight: normal !important;
}

.font-b {
  font-weight: 600 !important;
}

/*----------------------------------------------------
name: 文字揃え
----------------------------------------------------*/
.text-l {
  text-align: left;
}

.text-c {
  text-align: center;
}

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

/*----------------------------------------------------
name: 行間
----------------------------------------------------*/
.lh-1 {
  line-height: 1 !important;
}

.lh-s {
  line-height: 1.2 !important;
}

.lh-m {
  line-height: 1.5 !important;
}

.lh-l {
  line-height: 1.8 !important;
}

.lh-xl {
  line-height: 2.1 !important;
}

/*----------------------------------------------------
　シャドウ
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Utility
mixin:
  - 01 Utility
---

---
ユーティリティ
---
ユーティリティが定義してあります。<br>
*/
/*----------------------------------------------------
 Typography
----------------------------------------------------*/
.fs-display-lg {
  font-size: 3.2rem;
  line-height: 1.4;
}
@media (min-width: 1000px) {
  .fs-display-lg {
    font-size: 4rem;
  }
}

.fs-display-md {
  font-size: 2.6rem;
  line-height: 1.4;
}
@media (min-width: 1000px) {
  .fs-display-md {
    font-size: 3.2rem;
  }
}

.fs-display-sm {
  font-size: 2.2rem;
  line-height: 1.4;
}
@media (min-width: 1000px) {
  .fs-display-sm {
    font-size: 2.8rem;
  }
}

.fs-headline-lg {
  font-size: 1.8rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .fs-headline-lg {
    font-size: 2.6rem;
  }
}

.fs-headline-md {
  font-size: 1.6rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .fs-headline-md {
    font-size: 2.2rem;
  }
}

.fs-headline-sm {
  font-size: 1.4rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .fs-headline-sm {
    font-size: 1.6rem;
  }
}

.fs-title-lg {
  font-size: 1.6rem;
  line-height: 1.3;
}
@media (min-width: 1000px) {
  .fs-title-lg {
    font-size: 1.8rem;
  }
}

.fs-title-md {
  font-size: 1.5rem;
  line-height: 1.3;
}
@media (min-width: 1000px) {
  .fs-title-md {
    font-size: 1.6rem;
  }
}

.fs-title-sm {
  font-size: 1.3rem;
  line-height: 1.3;
}
@media (min-width: 1000px) {
  .fs-title-sm {
    font-size: 1.5rem;
  }
}

.fs-body-lg {
  font-size: 1.8rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .fs-body-lg {
    font-size: 2rem;
  }
}

.fs-body-md {
  font-size: 1.6rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .fs-body-md {
    font-size: 1.8rem;
  }
}

.fs-body-sm {
  font-size: 1.3rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .fs-body-sm {
    font-size: 1.4rem;
  }
}

.fs-label-lg {
  font-size: 1.8rem;
  line-height: 1.2;
}

.fs-label-md {
  font-size: 1.6rem;
  line-height: 1.2;
}

.fs-label-sm {
  font-size: 1.3rem;
  line-height: 1.2;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Typography
mixin:
  - 02 Typography
---

---
タイポグラフィのスタイル
---
用途に応じた文字サイズと行間をセットで定義してあります。<br>
アプリ全体を通じて書体・サイズ・行間を統一するため、テキストに関するスタイルはこのmixinを使うようにしてください。<br>
<br>
テキストは5つのカテゴリと、それぞれ3つサイズのバリエーションがあり、<br>
`fs-カテゴリ-サイズ` で15種類のスタイルを定義しています。<br>
例）
```scss
.title {
  @include fs-title-md;
}
```
<br>
カテゴリ
- `Display`：装飾目的の文字や、極端に大きいサイズでの用途
- `Title`：タイトルなど、大きいサイズでの用途
- `Headline`：見出しなど、やや大きいサイズでの用途
- `Body`：本文など、普通〜小さいサイズでの用途
- `Label`：ボタンなど、行間をあまり空けたくない時の用途
<br>
<br>
サイズ
- `lg`：大サイズ
- `md`：中サイズ
- `sm`：小サイズ
<br>
<br>
```html
<h1 class="fs-display-lg">ディスプレイ大</h1>
<h1 class="fs-display-md">ディスプレイ中</h1>
<h1 class="fs-display-sm">ディスプレイ小</h1>

<h2 class="fs-headline-lg">見出し大</h2>
<h2 class="fs-headline-md">見出し中</h2>
<h2 class="fs-headline-sm">見出し小</h2>

<h3 class="fs-title-lg">タイトル大</h3>
<h3 class="fs-title-md">タイトル中</h3>
<h3 class="fs-title-sm">タイトル小</h3>

<p class="fs-body-lg">本文テキスト大</p>
<p class="fs-body-md">本文テキスト中</p>
<p class="fs-body-sm">本文テキスト小</p>

<span class="fs-label-lg">ラベル大</span>
<span class="fs-label-md">ラベル中</span>
<span class="fs-label-sm">ラベル小</span>
```
*/
/*----------------------------------------------------
 flex
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Flex
mixin:
  - 04 Flex
---

---
フレックス mixin
---
```css
@include flex( "justify-contentの値" , "align-itemsの値" );
```

よく使うFlexの記述3行を1行にまとめたい。<br>
それだけのためのmixinです。<br>
<br>
使用は任意なので、使用してなくても構いません。<br>
<br>
例）
```scss
.hoge {
  // この3行を、
  display: flex;
  justify-content: center;
  align-items: center;
}

.hoge {
  // 1行にする。
  @include flex;
}
```
*/
/*----------------------------------------------------
 hover
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Hover
mixin:
  - 05 Hover
---

---
ホバー mixin
---
```scss
@include hover {
  // ホバーのスタイル  
};
```
```scss
@include hover-pc {
  // pc用だけのホバーのスタイル  
};
```

ホバー（:activeと:hover共通）とpc用だけのホバー（:hover）のスタイルを記述するためのmixinです。<br>
<br>
例）
```scss
.hoge_text {
  @include hover {
    color: red;
  };
}
```
*/
/*----------------------------------------------------
 ボタンmixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Button
mixin:
  - 06 Button
---

---
ボタンの基本スタイル
---
```scss
@include Button( "文字色", "背景色", "ボタン高さ" );
```

ボタンのスタイルを定義してあります。<br>
同じようなスタイルを別の場所で定義したり、スタイルの揺れを防ぐために使用します。<br>
<br>
モジュールの`_button.scss`などで使われています。<br>
<br>
ボタンの基本的な形状はここで定義し、色やサイズのバリエーションはモジュールで定義してください。<br>
<br>
例）
```scss
.button {
  @include button;
}
```
```html
<a class="button">ボタン</a>
```
*/
/*----------------------------------------------------
 アウトラインボタンmixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: ButtonOutline
mixin:
  - 07 ButtonOutline
---

---
アウトラインボタンの基本スタイル
---
```scss
@include ButtonOutline( "文字色", "ボーダー色", "ボタン高さ" );
```

アウトラインボタンのスタイルを定義してあります。<br>
同じようなスタイルを別の場所で定義したり、スタイルの揺れを防ぐために使用します。<br>
<br>
モジュールの`_buttonOutline.scss`などで使われています。<br>
<br>
ボタンの基本的な形状はここで定義し、色やサイズのバリエーションはモジュールで定義してください。<br>
<br>
例）
```scss
.buttonOutline {
  @include buttonOutline;
}
```
```html
<a class="buttonOutline">アウトラインボタン</a>
```
*/
/*----------------------------------------------------
 icomoon
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Icomoon
mixin:
  - 08 Icomoon
---

---
icomoon mixin
---
```scss
@include icomoon( 記号 );
```

よく使うicomoonの記述を1行で短く書きたい。<br>
それだけのためのmixinです。<br>
<br>
例）
```scss
.icon {
  @include icomoon('\e919');
}
```
*/
/*----------------------------------------------------
 入力フォーム初期化mixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: inputAppearanceDelete
mixin:
  - 09 inputAppearanceDelete
---

---
フォームのリセット
---
```scss
@include inputAppearanceDelete;
```

ボタンや入力フォームなどのユーザーエージェントスタイルのリセットを定義してあります。<br>
モジュールの`_input.scss`などで使われています。<br>
<br>
ブラウザ固有のスタイルが邪魔な時に指定してみてください<br>
*/
/*----------------------------------------------------
 入力フォームmixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Input
mixin:
  - 10 Input
---

---
入力フォームの基本スタイル
---
```scss
@include inputStyle;
```

入力フォームのスタイルを定義してあります。<br>
<br>
モジュールの`_input.scss`などで使われています。<br>
<br>
同じようなスタイルを別の場所で定義したり、スタイルの揺れを防ぐために使用します。<br>
色やサイズのバリエーションはモジュールで定義してください。<br>
<br>
例）
```scss
input[type='text'] {
  @include inputStyle;
}
```
```html
<input type="text" placeholder="入力してください">
```
*/
/*----------------------------------------------------
 ラジオボタンmixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Radio
mixin:
  - 11 Radio
---

---
ラジオボタンの基本スタイル
---
```scss
@include radioStyle;
@include radioStyle-checked;
```

ラジオボタンのスタイルを定義してあります。<br>
<br>
モジュールの`_radio.scss`などで使われています。<br>
<br>
同じようなスタイルを別の場所で定義したり、スタイルの揺れを防ぐために使用します。<br>
色やサイズのバリエーションはモジュールで定義してください。<br>
<br>
例）
```scss
.radio {
  display: none;
}
.radio + label {
  @include radioStyle;
}
.radio:checked + label {
  @include radioStyle-checked;
}
```
```html
<input type="radio" class="radio" id="hoge">
<label for="hoge">ラジオボタン</label>
```
*/
/*----------------------------------------------------
 チェックボックスmixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Checkbox
mixin:
  - 12 Checkbox
---

---
チェックボックスの基本スタイル
---
```scss
@include checkboxStyle;
@include checkboxStyle-checked;
```

チェックボックスのスタイルを定義してあります。<br>
`radio Mixin`に依存しています<br>
同じようなスタイルを別の場所で定義したり、スタイルの揺れを防ぐために使用します。<br>
<br>
モジュールの`_checkbox.scss`などで使われています。<br>
<br>
色やサイズのバリエーションはモジュールで定義してください。<br>
<br>
例）
```scss
.checkbox {
  display: none;
}
.checkbox + label {
  @include checkboxStyle;
}
.checkbox:checked + label {
  @include checkboxStyle-checked;
}
```
```html
<input type="checkbox" class="checkbox" id="hoge">
<label for="hoge">チェックボックス</label>
```
*/
/*----------------------------------------------------
 プルダウンmixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Select
mixin:
  - 13 Select
---

---
プルダウンの基本スタイル
---
```scss
@include selectStyle;
```

プルダウンのスタイルを定義してあります。<br>
<br>
モジュールの`_select.scss`などで使われています。<br>
<br>
同じようなスタイルを別の場所で定義したり、スタイルの揺れを防ぐために使用します。<br>
色やサイズのバリエーションはモジュールで定義してください。<br>
<br>
例）
```scss
select {
  @include selectStyle;
}
```
```html
<select>
  <option>オプション1</option>
  <option>オプション2</option>
  <option>オプション3</option>
</select>
```
*/
/*----------------------------------------------------
 ボックススタイルmixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Box
mixin:
  - 14 Box
---

---
ボックスの基本スタイル
---
```scss
@include box;
```

マテリアルデザインで言うところの「Surface」にあたるスタイルを定義してあります。<br>
同じようなスタイルを別の場所で定義したり、スタイルの揺れを防ぐために使用します。<br>
<br>
モジュールの`_box.scss`などで使われています。<br>
<br>
例）
```scss
.box {
  @include box;
}
```
```html
<div class="box">
  hogehoge
</div>
```
*/
/*----------------------------------------------------
 アニメーションmixin
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Mixinについて
mixin:
  - 00 Mixinについて
---

Mixinは'mixin'ディレクトリに格納してあります。<br>
<br>
CSS全体を通じて、汎用的に使う記述やスタイルをmixinとして定義しています。<br>
<br>
例えば、メディアクエリの記述をどこでも描けるようにする[03 MediaQuery](../03-MediaQuery/index.html)や、<br>
ボタンの基本的なスタイルを定義してある[06 Button](../06-Button/index.html)などです。<br>
<br>
<br>
特に、<br>
- [02 Typography](../02-Typography/index.html)
- [03 MediaQuery](../03-MediaQuery/index.html)
- [05 Hover](../05-Hover/index.html)

は多用するので重要なmixinになってます。
*/
html {
  font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴシック", "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
  scroll-behavior: smooth;
}

body {
  color: #4F4539;
  background: #FAF6F2;
  font-size: 1.6rem;
  line-height: 1.6;
  word-break: break-all;
}
@media (min-width: 1000px) {
  body {
    font-size: 1.8rem;
  }
}

[v-cloak] {
  display: none;
}

a {
  color: #71541C;
  text-decoration: underline;
}

@media (min-width: 1000px) {
  a > img:hover {
    opacity: 0.7;
  }
}

/*----------------------------------------------------
　フォント
----------------------------------------------------*/
/* Google Fonts */
/*----------------------------------------------------
　フルードイメージ
----------------------------------------------------*/
img {
  max-width: 100%;
  height: auto;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Base
base:
  - Base
---

htmlとbodyのスタイルです。<br>
<br>
*/
/*----------------------------------------------------
　Module
----------------------------------------------------*/
/*----------------------------------------------------
 ボックス
----------------------------------------------------*/
.box {
  position: relative;
  color: #3A3733;
  background: #FFFFFE;
  font-size: 1.6rem;
  line-height: 1.6;
  border-radius: 0.4rem;
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
  /*----------------
  Contents
  ----------------*/
}
.box .box_contents {
  padding: 2rem;
}
.box .box_contents:only-child {
  padding: 2.8rem 2rem;
}
@media (min-width: 1000px) {
  .box .box_contents:only-child {
    padding: 2rem 3.2rem;
  }
}
.box + .box {
  margin-top: 0.8rem;
}
@media (min-width: 1000px) {
  .box + .box {
    margin-top: 1.2rem;
  }
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Box
module:
  - 01 Box
---

---
ボックス
---
マテリアルデザインで言うところの「Surface」です。<br>
<br>
例）
```html
<section class="box">
  <div class="box_contents">
    ボックスのコンテンツ
  </div>
</section>
```
*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: モジュールについて
module:
  - 00 モジュールについて
---

モジュールは、再利用できるスタイルのまとまり、汎用的な部品です。<br>
ボタンのようなパーツから、入力フォーム周りを整頓するためのスタイル群などがあります。<br>
<br>
似たようなスタイルや働きを持つモジュール同士は、同じmixinから派生している場合もあります。<br>
<br>
基本的に、画面の要素はモジュールの集まりで構成されていることが理想です。<br>
*/
/*----------------------------------------------------
 ボックスリスト
----------------------------------------------------*/
.boxList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 2rem;
  gap: 2rem;
}

/*----------------------------------------------------
 スタックボックス
----------------------------------------------------*/
.boxStack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /*----------------
  Stacking Variants
  ----------------*/
}
.boxStack > .box {
  border-radius: 0;
}
.boxStack > .box:first-of-type {
  border-radius: 0.4rem 0.4rem 0 0;
}
.boxStack > .box:last-of-type {
  border-radius: 0 0 0.4rem 0.4rem;
}
.boxStack > .box:only-of-type {
  border-radius: 0.4rem;
}

/*----------------------------------------------------
 検索フォーム　　※SPは縦並び　PC横並び
----------------------------------------------------*/
.searchForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
  /*----------------
  Contents
  ----------------*/
  /*----------------
  Variants
  ----------------*/
  /*----------------
  button
  ----------------*/
}
@media (min-width: 1000px) {
  .searchForm {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0.8rem 1.2rem;
  }
}
.searchForm input,
.searchForm textarea,
.searchForm label,
.searchForm select, .searchForm > p, .searchForm > div .searchForm > li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
}
.searchForm.searchForm-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0.8rem 1.2rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.searchForm.searchForm-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
}
.searchForm.searchForm-wrap input,
.searchForm.searchForm-wrap textarea,
.searchForm.searchForm-wrap label,
.searchForm.searchForm-wrap select, .searchForm.searchForm-wrap > p, .searchForm.searchForm-wrap > div .searchForm.searchForm-wrap > li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0;
          flex: 0 0;
}
@media (min-width: 1000px) {
  .searchForm .searchForm_button {
    width: auto;
    min-width: 10rem;
  }
}
@media (min-width: 1000px) {
  .searchForm .searchForm_button:hover {
    opacity: 0.7;
  }
}

/*----------------------------------------------------
 ボタン
----------------------------------------------------*/
.button {
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.8rem;
  width: 100%;
  min-height: 6.2rem;
  color: #442B00;
  font-weight: 600;
  background: #FBC334;
  border-radius: 0.8rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  gap: 0.4rem;
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
  font-size: 1.8rem;
  line-height: 1.2;
  min-height: 6.2rem;
  text-decoration: none;
  /*----------------
  Size
  ----------------*/
  /*----------------
  Disabled
  ----------------*/
  /*----------------
  Color
  ----------------*/
}
.button::-ms-expand {
  display: none;
}
.button:active {
  -webkit-transform: scale(0.96, 0.96);
          transform: scale(0.96, 0.96);
  opacity: 0.9;
}
@media (min-width: 1000px) {
  .button:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
.button.button-lg {
  font-size: 1.8rem;
  line-height: 1.2;
  min-height: 6.2rem;
}
.button.button-md {
  font-size: 1.6rem;
  line-height: 1.2;
  min-height: 4.6rem;
}
.button.button-sm {
  font-size: 1.3rem;
  line-height: 1.2;
  min-height: 2.9rem;
}
.button.disabled {
  pointer-events: none;
  color: #FFFFFF;
  background-color: #E3E0DC;
}
.button.button-Error {
  color: #BA1A1A;
  background: #FFDAD6;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Button
module:
  - 02 Button
---

---
ボタン
---
色・サイズのバリエーションは基本的にここに記述し、<br>
マルチクラスで指定します。<br>
<br>
例）
```html
<button class="button button-lg">大ボタン</button>
<br>
<button class="button button-md">中ボタン</button>
<br>
<button class="button button-sm">小ボタン</button>
```
*/
/*----------------------------------------------------
 アウトラインボタン
----------------------------------------------------*/
.buttonOutline {
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.8rem;
  width: 100%;
  min-height: 6.2rem;
  color: #71541C;
  border: solid 0.1rem #D3C4B4;
  border-radius: 0.8rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  gap: 0.4rem;
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
  font-size: 1.8rem;
  line-height: 1.2;
  min-height: 6.2rem;
  text-decoration: none;
  /*----------------
  Size
  ----------------*/
  /*----------------
  Disabled
  ----------------*/
  /*----------------
  Color
  ----------------*/
}
.buttonOutline::-ms-expand {
  display: none;
}
.buttonOutline:active {
  -webkit-transform: scale(0.96, 0.96);
          transform: scale(0.96, 0.96);
  opacity: 0.9;
}
@media (min-width: 1000px) {
  .buttonOutline:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
.buttonOutline.buttonOutline-lg {
  font-size: 1.8rem;
  line-height: 1.2;
  min-height: 6.2rem;
}
.buttonOutline.buttonOutline-md {
  font-size: 1.6rem;
  line-height: 1.2;
  min-height: 4.6rem;
}
.buttonOutline.buttonOutline-sm {
  font-size: 1.3rem;
  line-height: 1.2;
  min-height: 2.9rem;
}
.buttonOutline.disabled {
  pointer-events: none;
  color: #FFFFFF;
  background-color: #E3E0DC;
}
.buttonOutline.buttonOutline-Error {
  color: #BA1A1A;
  background: #FFDAD6;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: ButtonOutline
module:
  - 03 ButtonOutline
---

---
アウトラインボタン
---
色・サイズのバリエーションは基本的にここに記述し、<br>
マルチクラスで指定します。<br>
<br>
例）
```html
<button class="buttonOutline buttonOutline-lg">大ボタン</button>
<br>
<button class="buttonOutline buttonOutline-md">中ボタン</button>
<br>
<button class="buttonOutline buttonOutline-sm">小ボタン</button>
```
*/
/*----------------------------------------------------
 ラインカラーボタン 色指定のみ
----------------------------------------------------*/
.buttonLineApp {
  color: #FFFFFF;
  background-color: #06C755;
  text-decoration: none;
}

.buttonOutlineLineApp {
  color: #06C755;
  background-color: #FFFFFF;
  border: 0.1rem solid #06C755;
  text-decoration: none;
}

/*----------------------------------------------------
 入力
----------------------------------------------------*/
input[type=text],
input[type=textfield],
input[type=number],
input[type=date],
input[type=tel],
input[type=email],
input[type=url],
input[type=password],
.input {
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  display: block;
  padding: 1.2rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  width: 100%;
  min-height: 4.56rem;
  color: #3A3733;
  font-size: 1.6rem;
  line-height: 1.2;
  background: #FFFFFE;
  border: 0.1rem solid #D3C4B4;
  border-radius: 0.4rem;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
}
input[type=text]::-ms-expand,
input[type=textfield]::-ms-expand,
input[type=number]::-ms-expand,
input[type=date]::-ms-expand,
input[type=tel]::-ms-expand,
input[type=email]::-ms-expand,
input[type=url]::-ms-expand,
input[type=password]::-ms-expand,
.input::-ms-expand {
  display: none;
}
input[type=text]::-webkit-input-placeholder, input[type=textfield]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=date]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, .input::-webkit-input-placeholder {
  color: #D3C4B4;
}
input[type=text]::-moz-placeholder, input[type=textfield]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=date]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=password]::-moz-placeholder, .input::-moz-placeholder {
  color: #D3C4B4;
}
input[type=text]:-ms-input-placeholder, input[type=textfield]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=date]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, .input:-ms-input-placeholder {
  color: #D3C4B4;
}
input[type=text]::-ms-input-placeholder, input[type=textfield]::-ms-input-placeholder, input[type=number]::-ms-input-placeholder, input[type=date]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=url]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, .input::-ms-input-placeholder {
  color: #D3C4B4;
}
input[type=text]::placeholder,
input[type=textfield]::placeholder,
input[type=number]::placeholder,
input[type=date]::placeholder,
input[type=tel]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=password]::placeholder,
.input::placeholder {
  color: #D3C4B4;
}
input[type=text]:focus,
input[type=textfield]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
.input:focus {
  background-color: #FFDDB1;
}
input[type=text].input-adjust,
input[type=textfield].input-adjust,
input[type=number].input-adjust,
input[type=date].input-adjust,
input[type=tel].input-adjust,
input[type=email].input-adjust,
input[type=url].input-adjust,
input[type=password].input-adjust,
.input.input-adjust {
  width: auto;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Input
module:
  - 04 Input
---

---
入力フォーム
---
Inputタイプの入力フォーム。<br>
<br>
例）
```html
<input type="text" placeholder="テキスト入力" >
<br>
<input type="number" placeholder="数値入力" >
<br>
<input type="date" placeholder="日付入力" >
```


---
InputGroup、InputUnit
---
入力フォームを内包するためのモジュール。<br>
複数のフォームがある場合は横方向に並べます。<br>
<br>
InputUnitは、単位などフォームの付属要素を表示するためのクラスです。<br>
<br>
例）
```html
<div class="searchForm">
  <input type="text" placeholder="時" >
  <span class="inputUnit">時</span>
  <input type="text" placeholder="分" >
  <span class="inputUnit">分</span>
</div>
```


---
inputTitle
---
フォームの項目タイトル。<br>
<br>
例）
```html
<h4 class="inputTitle">受診日時</h4>
```

---
inputInvalid
---
フォームのエラー。<br>
<br>
例）
```html
<span class="inputInvalid">入力エラー</span>
```


*/
/*----------------------------------------------------
 入力グループ
----------------------------------------------------*/
.inputGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.8rem;
  /*----------------
  Contents
  ----------------*/
  /*----------------
  Variants
  ----------------*/
}
.inputGroup input,
.inputGroup textarea,
.inputGroup label,
.inputGroup select, .inputGroup > p, .inputGroup > div {
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
}
.inputGroup.inputGroup-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4rem;
}

/*----------------------------------------------------
 入力項目タイトル
----------------------------------------------------*/
.inputTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-bottom: 0.8rem;
  color: #3A3733;
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: 600;
  gap: 0.8rem;
  /*----------------
  Contents
  ----------------*/
  /*----------------
  Size
  ----------------*/
}
@media (min-width: 1000px) {
  .inputTitle {
    font-size: 1.8rem;
  }
}
.inputTitle > span:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.8rem;
}
.inputTitle.required > span:first-child::after {
  content: "必須";
  color: #BA1A1A;
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 300;
}
.inputTitle.optional > span:first-child::after {
  content: "任意";
  color: rgb(138.9633027523, 132.1376146789, 123.0366972477);
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 300;
}
.inputTitle > span:last-child:not(:only-child) {
  margin-left: auto;
  color: rgb(138.9633027523, 132.1376146789, 123.0366972477);
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 300;
}
.inputTitle.inputTitle-lg {
  font-size: 1.6rem;
  line-height: 1.3;
  min-height: 6.2rem;
}
@media (min-width: 1000px) {
  .inputTitle.inputTitle-lg {
    font-size: 1.8rem;
  }
}
.inputTitle.inputTitle-md {
  font-size: 1.5rem;
  line-height: 1.3;
  min-height: 4.6rem;
}
@media (min-width: 1000px) {
  .inputTitle.inputTitle-md {
    font-size: 1.6rem;
  }
}
.inputTitle.inputTitle-sm {
  font-size: 1.3rem;
  line-height: 1.3;
  min-height: 2.9rem;
}
@media (min-width: 1000px) {
  .inputTitle.inputTitle-sm {
    font-size: 1.5rem;
  }
}

/*----------------------------------------------------
 入力エラー
----------------------------------------------------*/
.inputInvalid {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-bottom: 0.8rem;
  color: #BA1A1A;
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 300;
  gap: 0.8rem;
}
.inputInvalid::before {
  content: "\e974";
  font-family: "icomoon";
}

/*----------------------------------------------------
 入力項目の単位、アイコン
----------------------------------------------------*/
.inputUnit {
  -webkit-box-flex: 0;
      -ms-flex: 0 1;
          flex: 0 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  color: #3A3733;
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 300;
  gap: 0.8rem;
  /*----------------
  Contents
  ----------------*/
  /*----------------
  Size
  ----------------*/
}
.inputUnit.inputUnit-lg {
  font-size: 1.8rem;
  line-height: 1.2;
}
.inputUnit.inputUnit-md {
  font-size: 1.6rem;
  line-height: 1.2;
}
.inputUnit.inputUnit-sm {
  font-size: 1.3rem;
  line-height: 1.2;
}

/*----------------------------------------------------
 テキストエリア
----------------------------------------------------*/
textarea,
.textarea {
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  display: block;
  padding: 1.2rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  width: 100%;
  min-height: 4.56rem;
  color: #3A3733;
  font-size: 1.6rem;
  line-height: 1.2;
  background: #FFFFFE;
  border: 0.1rem solid #D3C4B4;
  border-radius: 0.4rem;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}
textarea::-ms-expand,
.textarea::-ms-expand {
  display: none;
}
textarea::-webkit-input-placeholder, .textarea::-webkit-input-placeholder {
  color: #D3C4B4;
}
textarea::-moz-placeholder, .textarea::-moz-placeholder {
  color: #D3C4B4;
}
textarea:-ms-input-placeholder, .textarea:-ms-input-placeholder {
  color: #D3C4B4;
}
textarea::-ms-input-placeholder, .textarea::-ms-input-placeholder {
  color: #D3C4B4;
}
textarea::placeholder,
.textarea::placeholder {
  color: #D3C4B4;
}
textarea:focus,
.textarea:focus {
  background-color: #FFDDB1;
}

/*----------------------------------------------------
 ラジオボタン
----------------------------------------------------*/
input[type=radio],
.radio {
  display: none;
  /*----------------
  State
  ----------------*/
}
input[type=radio] + label,
.radio + label {
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  width: 100%;
  padding: 0.8rem 1.2rem;
  color: #3A3733;
  font-size: 1.8rem;
  line-height: 1.2;
  background: transparent;
  border-radius: 0.4rem;
  gap: 0.8rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
input[type=radio] + label::-ms-expand,
.radio + label::-ms-expand {
  display: none;
}
input[type=radio] + label::before,
.radio + label::before {
  content: "\e967";
  font-family: "icomoon";
}
input[type=radio]:checked + label,
.radio:checked + label {
  color: #442B00;
  background: #FFD176;
}
input[type=radio]:checked + label::before,
.radio:checked + label::before {
  content: "\e968";
  font-family: "icomoon";
  color: #442B00;
}
input[type=radio].radio-md + label,
.radio.radio-md + label {
  font-size: 1.6rem;
  line-height: 1.2;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Radio
module:
  - 05 Radio
---

---
ラジオボタン
---
単一選択のラジオボタン。<br>
<br>
例）
```html
<input type="radio" id="hoge1" name="hoge" >
<label for="hoge1">ラジオボタン1</label>

<input type="radio" id="hoge2" name="hoge" >
<label for="hoge2">ラジオボタン2</label>

<input type="radio" id="hoge3" name="hoge" >
<label for="hoge3">ラジオボタン3</label>
```
*/
/*----------------------------------------------------
 チェックボックス
----------------------------------------------------*/
input[type=checkbox],
.checkbox {
  display: none;
  /*----------------
  State
  ----------------*/
  /*----------------
  サイズ違い
  ----------------*/
}
input[type=checkbox] + label,
.checkbox + label {
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  width: 100%;
  padding: 0.8rem 1.2rem;
  color: #3A3733;
  font-size: 1.8rem;
  line-height: 1.2;
  background: transparent;
  border-radius: 0.4rem;
  gap: 0.8rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
input[type=checkbox] + label::-ms-expand,
.checkbox + label::-ms-expand {
  display: none;
}
input[type=checkbox] + label::before,
.checkbox + label::before {
  content: "\e967";
  font-family: "icomoon";
}
input[type=checkbox] + label::before,
.checkbox + label::before {
  content: "\e98a";
  font-family: "icomoon";
}
input[type=checkbox]:checked + label,
.checkbox:checked + label {
  color: #442B00;
  background: #FFD176;
}
input[type=checkbox]:checked + label::before,
.checkbox:checked + label::before {
  content: "\e968";
  font-family: "icomoon";
  color: #442B00;
}
input[type=checkbox]:checked + label::before,
.checkbox:checked + label::before {
  content: "\e98b";
  font-family: "icomoon";
}
input[type=checkbox].checkbox-nonbg + label,
.checkbox.checkbox-nonbg + label {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
}
input[type=checkbox].checkbox-nonbg:checked + label,
.checkbox.checkbox-nonbg:checked + label {
  background-color: transparent;
}
input[type=checkbox].checkbox-md + label,
.checkbox.checkbox-md + label {
  font-size: 1.6rem;
  line-height: 1.2;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Checkbox
module:
  - 06 Checkbox
---

---
チェックボックス
---
複数選択できるチェックボックス。<br>
<br>
例）
```html
<input type="checkbox" id="hoge1" name="hoge" >
<label for="hoge1">チェックボックス1</label>

<input type="checkbox" id="hoge2" name="hoge" >
<label for="hoge2">チェックボックス2</label>

<input type="checkbox" id="hoge3" name="hoge" >
<label for="hoge3">チェックボックス3</label>
```
*/
/*----------------------------------------------------
 プルダウン
----------------------------------------------------*/
select,
.select {
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  display: block;
  padding: 1.2rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  width: 100%;
  min-height: 4.56rem;
  color: #3A3733;
  font-size: 1.6rem;
  line-height: 1.2;
  background: #FFFFFE;
  border: 0.1rem solid #D3C4B4;
  border-radius: 0.4rem;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
  background: url("./fonts/pulldown_enabled.svg") no-repeat;
  background-position: right 1.2rem top 50%;
  background-size: 1.6rem;
  cursor: pointer;
}
select::-ms-expand,
.select::-ms-expand {
  display: none;
}
select::-webkit-input-placeholder, .select::-webkit-input-placeholder {
  color: #D3C4B4;
}
select::-moz-placeholder, .select::-moz-placeholder {
  color: #D3C4B4;
}
select:-ms-input-placeholder, .select:-ms-input-placeholder {
  color: #D3C4B4;
}
select::-ms-input-placeholder, .select::-ms-input-placeholder {
  color: #D3C4B4;
}
select::placeholder,
.select::placeholder {
  color: #D3C4B4;
}
select:focus,
.select:focus {
  background-color: #FFDDB1;
}

/*----------------------------------------------------
 チェックボタン
----------------------------------------------------*/
input[type=checkbox].checkButton,
input[type=radio].checkButton,
.checkButton {
  display: none;
  /*----------------
  Contents
  ----------------*/
  /*----------------
  State
  ----------------*/
}
input[type=checkbox].checkButton + label,
input[type=radio].checkButton + label,
.checkButton + label {
  display: block;
  padding: 1.2rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  width: 100%;
  min-height: 4.56rem;
  color: #3A3733;
  font-size: 1.6rem;
  line-height: 1.2;
  background: #FFFFFE;
  border: 0.1rem solid #D3C4B4;
  border-radius: 0.4rem;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex: 1 1;
      flex: 1 1;
  width: auto;
  gap: 0.8rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
input[type=checkbox].checkButton + label::-webkit-input-placeholder, input[type=radio].checkButton + label::-webkit-input-placeholder, .checkButton + label::-webkit-input-placeholder {
  color: #D3C4B4;
}
input[type=checkbox].checkButton + label::-moz-placeholder, input[type=radio].checkButton + label::-moz-placeholder, .checkButton + label::-moz-placeholder {
  color: #D3C4B4;
}
input[type=checkbox].checkButton + label:-ms-input-placeholder, input[type=radio].checkButton + label:-ms-input-placeholder, .checkButton + label:-ms-input-placeholder {
  color: #D3C4B4;
}
input[type=checkbox].checkButton + label::-ms-input-placeholder, input[type=radio].checkButton + label::-ms-input-placeholder, .checkButton + label::-ms-input-placeholder {
  color: #D3C4B4;
}
input[type=checkbox].checkButton + label::placeholder,
input[type=radio].checkButton + label::placeholder,
.checkButton + label::placeholder {
  color: #D3C4B4;
}
input[type=checkbox].checkButton + label:focus,
input[type=radio].checkButton + label:focus,
.checkButton + label:focus {
  background-color: #FFDDB1;
}
input[type=checkbox].checkButton:checked + label,
input[type=radio].checkButton:checked + label,
.checkButton:checked + label {
  color: #442B00;
  background: #FFD176;
}
input[type=checkbox].checkButton:checked + label::before,
input[type=radio].checkButton:checked + label::before,
.checkButton:checked + label::before {
  color: #442B00;
}
input[type=checkbox].checkButton + label,
input[type=radio].checkButton + label,
.checkButton + label {
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}
input[type=checkbox].checkButton + label:active,
input[type=radio].checkButton + label:active,
.checkButton + label:active {
  -webkit-transform: scale(0.96, 0.96);
          transform: scale(0.96, 0.96);
  opacity: 0.9;
}
@media (min-width: 1000px) {
  input[type=checkbox].checkButton + label:hover,
  input[type=radio].checkButton + label:hover,
  .checkButton + label:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}

input[type=radio].checkButton + label::before {
  content: "\e98a";
  font-family: "icomoon";
}
input[type=radio].checkButton:checked + label::before {
  content: "\e98b";
  font-family: "icomoon";
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: CheckButton
module:
  - 07 CheckButton
---

---
チェックボタン
---
トグルボタン形式のチェックボックス。<br>
<br>
例）
```html
<div class="searchForm">
  <input type="radio" class="checkButton" id="hoge1" name="hoge" >
  <label for="hoge1">チェックボタン1</label>

  <input type="radio" class="checkButton" id="hoge2" name="hoge" >
  <label for="hoge2">チェックボタン2</label>

  <input type="radio" class="checkButton" id="hoge3" name="hoge" >
  <label for="hoge3">チェックボタン3</label>
</div>
```
*/
/*----------------------------------------------------
 ヘッダー
----------------------------------------------------*/
@media (min-width: 1000px) {
  .header {
    margin-bottom: 2.8rem;
  }
}
.header .header_logo {
  width: 15rem;
  height: auto;
  display: block;
  margin: 0 auto 1.2rem auto;
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}
.header .header_logo:active {
  -webkit-transform: scale(0.96, 0.96);
          transform: scale(0.96, 0.96);
  opacity: 0.9;
}
@media (min-width: 1000px) {
  .header .header_logo:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
@media (min-width: 1000px) {
  .header .header_logo {
    width: 24rem;
    height: auto;
  }
}
.header h1 {
  text-align: center;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.6;
  padding: 0 2rem;
}
@media (min-width: 1000px) {
  .header h1 {
    font-size: 2.8rem;
    line-height: 1.4;
  }
}

/*----------------------------------------------------
 フッター
----------------------------------------------------*/
.footer {
  margin-top: 2rem;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #4F4539;
}
@media (min-width: 1000px) {
  .footer {
    font-size: 1.4rem;
  }
}
.footer .footer_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  text-align: center;
}
@media (min-width: 1000px) {
  .footer .footer_link {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 2rem;
  }
  .footer .footer_link > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.2rem;
  }
  .footer .footer_link > li::after {
    content: "\e91c";
    font-family: "icomoon";
    font-size: 1.28rem;
  }
}
.footer .footer_link a {
  text-decoration: none;
}
.footer .copyright {
  text-align: center;
}

/*----------------------------------------------------
 日付ヘッダー
----------------------------------------------------*/
.headerDate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.8rem;
  /*----------------
  Contents
  ----------------*/
}
.headerDate .headerDate_date {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.8rem;
  font-size: 1.8rem;
  line-height: 1.6;
  line-height: 1;
  font-weight: 600;
}
@media (min-width: 1000px) {
  .headerDate .headerDate_date {
    font-size: 2.6rem;
  }
}
.headerDate .headerDate_prev,
.headerDate .headerDate_next {
  -webkit-box-flex: 0;
      -ms-flex: 0 1;
          flex: 0 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.8rem;
  color: #4F4539;
  font-size: 1.6rem;
  background: transparent;
  border-radius: 50%;
  /*----------------
  State
  ----------------*/
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}
.headerDate .headerDate_prev > img,
.headerDate .headerDate_next > img {
  height: 1.6rem;
}
.headerDate .headerDate_prev.disabled,
.headerDate .headerDate_next.disabled {
  pointer-events: none;
  color: #E3E0DC;
}
.headerDate .headerDate_prev:active,
.headerDate .headerDate_next:active {
  background-color: #FFDDB1;
}
@media (min-width: 1000px) {
  .headerDate .headerDate_prev:hover,
  .headerDate .headerDate_next:hover {
    background-color: #FFDDB1;
  }
}

/*----------------------------------------------------
 パンクズリスト PCのみ
----------------------------------------------------*/
@media (min-width: 1000px) {
  .breadcrumbs {
    width: 710px; /*サイドバーありのレイアウトにした際は、この行を削除*/
    margin: 0 auto 1.2rem auto;/*サイドバーありのレイアウトにした際は、この行を削除*/
    /*margin: 0 auto 1.2rem 0; サイドバーありのレイアウトにした際は、この行のコメントアウトを外してください*/
  }
  .breadcrumbs.breadcrumbs-nonAside {
    width: 710px;
    margin: 0 auto 1.2rem auto;
  }
}
.breadcrumbs .breadcrumbs_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 1.6rem;
  font-size: 1.3rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .breadcrumbs .breadcrumbs_list {
    font-size: 1.4rem;
  }
}
.breadcrumbs .breadcrumbs_list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
}
.breadcrumbs .breadcrumbs_list > li::after {
  content: "\e91c";
  font-family: "icomoon";
  font-size: 1.28rem;
}
.breadcrumbs .breadcrumbs_list > li:last-child::after {
  display: none;
}

/*----------------------------------------------------
 見出し
----------------------------------------------------*/
.heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .heading {
    font-size: 2.6rem;
  }
}
.heading > i {
  color: #71541C;
  font-size: 2.2rem;
  line-height: 1.4;
}
@media (min-width: 1000px) {
  .heading > i {
    font-size: 2.8rem;
  }
}

.heading-lg {
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
@media (min-width: 1000px) {
  .heading-lg {
    font-size: 2.6rem;
  }
}

.heading-md {
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
@media (min-width: 1000px) {
  .heading-md {
    font-size: 2.2rem;
  }
}

.heading-sm {
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 0.8rem;
}
@media (min-width: 1000px) {
  .heading-sm {
    font-size: 1.8rem;
  }
}

/*----------------------------------------------------
 リスト
----------------------------------------------------*/
.list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
  /*----------------
  Contents
  ----------------*/
  /*----------------
  Variants
  ----------------*/
}
.list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  line-height: 1.2;
  word-break: break-all;
  gap: 0.4rem;
}
.list > li::before {
  content: "・";
  -webkit-box-flex: 0;
      -ms-flex: 0 0;
          flex: 0 0;
}
.list.list-number > li:nth-of-type(1)::before {
  content: "1)";
}
.list.list-number > li:nth-of-type(2)::before {
  content: "2)";
}
.list.list-number > li:nth-of-type(3)::before {
  content: "3)";
}
.list.list-number > li:nth-of-type(4)::before {
  content: "4)";
}
.list.list-number > li:nth-of-type(5)::before {
  content: "5)";
}
.list.list-number > li:nth-of-type(6)::before {
  content: "6)";
}
.list.list-number > li:nth-of-type(7)::before {
  content: "7)";
}
.list.list-number > li:nth-of-type(8)::before {
  content: "8)";
}
.list.list-number > li:nth-of-type(9)::before {
  content: "9)";
}
.list.list-number > li:nth-of-type(10)::before {
  content: "10)";
}
.list.list-number > li:nth-of-type(11)::before {
  content: "11)";
}
.list.list-number > li:nth-of-type(12)::before {
  content: "12)";
}
.list.list-number > li:nth-of-type(13)::before {
  content: "13)";
}
.list.list-number > li:nth-of-type(14)::before {
  content: "14)";
}
.list.list-number > li:nth-of-type(15)::before {
  content: "15)";
}
.list.list-number > li:nth-of-type(16)::before {
  content: "16)";
}
.list.list-number > li:nth-of-type(17)::before {
  content: "17)";
}
.list.list-number > li:nth-of-type(18)::before {
  content: "18)";
}
.list.list-number > li:nth-of-type(19)::before {
  content: "19)";
}
.list.list-number > li:nth-of-type(20)::before {
  content: "20)";
}
.list.list-decimal > li::before {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 1.74rem;
          flex: 0 0 1.74rem;
  width: 1.74rem;
  height: 1.74rem;
  font-size: 1.3rem;
  line-height: 1.2;
  border: solid 0.1rem #3A3733;
  border-radius: 50%;
}
.list.list-decimal > li:nth-of-type(1)::before {
  content: "1";
}
.list.list-decimal > li:nth-of-type(2)::before {
  content: "2";
}
.list.list-decimal > li:nth-of-type(3)::before {
  content: "3";
}
.list.list-decimal > li:nth-of-type(4)::before {
  content: "4";
}
.list.list-decimal > li:nth-of-type(5)::before {
  content: "5";
}
.list.list-decimal > li:nth-of-type(6)::before {
  content: "6";
}
.list.list-decimal > li:nth-of-type(7)::before {
  content: "7";
}
.list.list-decimal > li:nth-of-type(8)::before {
  content: "8";
}
.list.list-decimal > li:nth-of-type(9)::before {
  content: "9";
}
.list.list-decimal > li:nth-of-type(10)::before {
  content: "10";
}
.list.list-decimal > li:nth-of-type(11)::before {
  content: "11";
}
.list.list-decimal > li:nth-of-type(12)::before {
  content: "12";
}
.list.list-decimal > li:nth-of-type(13)::before {
  content: "13";
}
.list.list-decimal > li:nth-of-type(14)::before {
  content: "14";
}
.list.list-decimal > li:nth-of-type(15)::before {
  content: "15";
}
.list.list-decimal > li:nth-of-type(16)::before {
  content: "16";
}
.list.list-decimal > li:nth-of-type(17)::before {
  content: "17";
}
.list.list-decimal > li:nth-of-type(18)::before {
  content: "18";
}
.list.list-decimal > li:nth-of-type(19)::before {
  content: "19";
}
.list.list-decimal > li:nth-of-type(20)::before {
  content: "20";
}

/*----------------------------------------------------
 アイコン
----------------------------------------------------*/
.icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.4rem;
  color: #001E2E;
  background-color: #C6E7FF;
  border-radius: 0.4rem;
  font-size: 1.8rem;
  line-height: 1.2;
  white-space: nowrap;
}

/*----------------------------------------------------
 アイコンリスト
----------------------------------------------------*/
.iconList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.8rem;
}
@media (min-width: 1000px) {
  .iconList a:hover {
    opacity: 0.7;
  }
}

/*----------------------------------------------------
 アイコンの説明
----------------------------------------------------*/
.iconDescription {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem 2rem;
  font-size: 1.3rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .iconDescription {
    font-size: 1.4rem;
  }
}
@media (min-width: 1000px) {
  .iconDescription {
    grid-template-columns: auto 1fr;
  }
}
.iconDescription dt {
  font-weight: normal;
}
.iconDescription dd {
  grid-column: 1;
}
@media (min-width: 1000px) {
  .iconDescription dd {
    grid-column: 2;
    padding-top: 0.2rem;
  }
}
.iconDescription + p {
  margin-top: 1.6rem;
}

/*----------------------------------------------------
 ページャー
----------------------------------------------------*/
.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 2rem auto 2.8rem auto;
  gap: 1.2rem;
}
@media (min-width: 1000px) {
  .pager {
    margin: 3.2rem auto 4rem auto;
  }
}
.pager > li > a,
.pager .pagerItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.3rem;
  line-height: 1.2;
  gap: 0.4rem;
  border: 0.1rem solid #D3C4B4;
  background-color: rgba(255, 255, 255, 0.6);
  width: 3rem;
  height: 3rem;
  text-decoration: none;
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}
@media (min-width: 1000px) {
  .pager > li > a,
  .pager .pagerItem {
    font-size: 1.6rem;
    line-height: 1.2;
    gap: 0.8rem;
    width: 4rem;
    height: 4rem;
  }
}
.pager > li > a.current,
.pager .pagerItem.current {
  background-color: rgba(113, 84, 28, 0.3);
  pointer-events: none;
}
.pager > li > a.next, .pager > li > a.prev,
.pager .pagerItem.next,
.pager .pagerItem.prev {
  border: 0;
  background-color: transparent;
  width: auto;
}
.pager > li > a.next::after,
.pager .pagerItem.next::after {
  content: "\e91c";
  font-family: "icomoon";
}
.pager > li > a.prev::before,
.pager .pagerItem.prev::before {
  content: "\e910";
  font-family: "icomoon";
}
.pager > li > a:active,
.pager .pagerItem:active {
  -webkit-transform: scale(0.96, 0.96);
          transform: scale(0.96, 0.96);
  opacity: 0.9;
}
@media (min-width: 1000px) {
  .pager > li > a:hover,
  .pager .pagerItem:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
.pager .pagerItem-current {
  background-color: rgba(113, 84, 28, 0.3);
  pointer-events: none;
  font-style: normal;
}

/*----------------------------------------------------
 スクリム
----------------------------------------------------*/
.scrim {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.scrim::before {
  content: "";
  position: fixed;
  overflow: hidden;
  display: block;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  z-index: 1000;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  -webkit-animation: scrim-frames 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 alternate none running;
          animation: scrim-frames 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 alternate none running;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes scrim-frames {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scrim-frames {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Scrim
module:
  - 09 Scrim
---

---
スクリム
---
モーダルの表示時などに、画面を暗転させ、かつスクロールをロックするためのクラス。<br>
<body>に付与することを推奨。<br>
<br>
例）
```html
<body class="scrim">
```
*/
/*----------------------------------------------------
 モーダル
----------------------------------------------------*/
.modal {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  z-index: 1000;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  /*----------------
  Contents
  ----------------*/
}
.modal.modal-scroll {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 2rem 0 15vh;
}
.modal .modal_contents {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 2rem;
  width: calc(100% - 1.6rem);
  background: #FFFFFE;
  border-radius: 0.8rem;
  gap: 2rem;
}
.modal .modal_header .modal_headerClose {
  text-decoration: none;
}
.modal .modal_title {
  margin-bottom: 2rem;
  font-size: 1.6rem;
  line-height: 1.3;
  text-align: center;
}
@media (min-width: 1000px) {
  .modal .modal_title {
    font-size: 1.8rem;
  }
}
.modal .modal_desc {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
}
@media (min-width: 1000px) {
  .modal .modal_desc {
    font-size: 1.8rem;
  }
}
.modal .modal_action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 1.6rem;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Modal
module:
  - 08 Modal
---

---
モーダル
---
モーダル用のクラスモジュール。<br>
<br>
例）
```html
<div class="modal">
  <div class="modal_contents">
    <h4 class="modal_title">モーダルタイトル</h4>
    <p class="modal_desc">モーダル本文</p>
    <div class="modal_action">
      <button class="buttonOutline">キャンセル</button>
      <button class="button">OK</button>
    </div>  
  </div>
</div>
```
*/
/*----------------------------------------------------
　スタートガイド
----------------------------------------------------*/
.startguide {
  padding: 2.8rem 0;
  color: #3A3733;
}
.startguide p {
  font-size: 1.6rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .startguide p {
    font-size: 1.8rem;
  }
}
.startguide img {
  width: 100%;
  height: auto;
}
.startguide .startguide_box {
  padding: 2rem;
  border: 1px solid #D3C4B4;
  border-radius: 0.4rem;
}

/*----------------------------------------------------
 検索結果　検索件数・再検索ボタン
----------------------------------------------------*/
.searchResultHeader {
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 1.2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1.2rem;
}
@media (min-width: 1000px) {
  .searchResultHeader {
    font-size: 1.4rem;
  }
}
@media (min-width: 1000px) {
  .searchResultHeader {
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 2rem 0 1.2rem 0;
  }
}
@media (min-width: 1000px) and (min-width: 1000px) {
  .searchResultHeader {
    font-size: 1.8rem;
  }
}
.searchResultHeader .searchResultHeader_button {
  width: auto;
  min-width: 8rem;
}

/*----------------------------------------------------
 検索結果　一覧
----------------------------------------------------*/
.searchResultList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
}
@media (min-width: 1000px) {
  .searchResultList {
    gap: 1.2rem;
  }
}

/*----------------------------------------------------
 検索結果　単体
----------------------------------------------------*/
@media (max-width: 999px) {
  .searchResult {
    display: block;
    -webkit-transition: all 0.08s ease-out;
    transition: all 0.08s ease-out;
  }
  .searchResult:active {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
@media (max-width: 999px) and (min-width: 1000px) {
  .searchResult:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
.searchResult a {
  text-decoration: none;
}
.searchResult .searchResult_item {
  display: block;
  padding: 1.6rem 2.8rem 0.4rem 2rem;
  position: relative;
  color: #3A3733;
  background: #FFFFFE;
  font-size: 1.6rem;
  line-height: 1.6;
  border-radius: 0.4rem;
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
}
.searchResult .searchResult_item:first-of-type {
  border-radius: 0.4rem 0.4rem 0 0;
}
.searchResult .searchResult_item:nth-of-type(2) {
  border-radius: 0;
  padding-top: 0;
}
.searchResult .searchResult_item:last-of-type {
  border-radius: 0 0 0.4rem 0.4rem;
  padding-bottom: 1.6rem;
}
.searchResult .searchResult_item:only-of-type {
  border-radius: 0.4rem;
}
.searchResult .searchResult_item.searchResult_itemHospital {
  background-image: url(/default_v2/img/icon_arrow.svg);
  background-position: 98% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 1000px) {
  .searchResult .searchResult_item.searchResult_itemHospital:hover {
    cursor: pointer;
    background-color: rgba(221, 202, 177, 0.2);
  }
}
.searchResult .searchResult_item.searchResult_itemHospital a {
  display: block;
}
@media (min-width: 1000px) {
  .searchResult .searchResult_item.searchResult_itemHospital a:hover {
    text-decoration: none;
  }
}
@media (min-width: 1000px) {
  .searchResult .searchResult_item.searchResult_itemHospital.noHoverBg:hover {
    background-color: #FFFFFE;
  }
}
.searchResult .searchResult_item.searchResult_itemIconList {
  padding: 0.4rem 2rem 1.6rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.8rem;
}
@media (min-width: 1000px) {
  .searchResult .searchResult_item.searchResult_itemIconList {
    padding: 0.8rem 2rem 1.6rem 2rem;
  }
}
@media (min-width: 1000px) {
  .searchResult .searchResult_item a:hover {
    opacity: 0.7;
  }
}
.searchResult .searchResult_name {
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #3A3733;
}
@media (min-width: 1000px) {
  .searchResult .searchResult_name {
    font-size: 2.6rem;
  }
}
@media (min-width: 1000px) {
  .searchResult .searchResult_name {
    color: #71541C;
  }
}
.searchResult .searchResult_add,
.searchResult .searchResult_depart,
.searchResult .searchResult_time,
.searchResult .searchResult_web {
  font-size: 1.3rem;
  line-height: 1.4;
  color: #3A3733;
}
@media (min-width: 1000px) {
  .searchResult .searchResult_add,
  .searchResult .searchResult_depart,
  .searchResult .searchResult_time,
  .searchResult .searchResult_web {
    font-size: 1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    gap: 1.2rem;
  }
}
@media (min-width: 1000px) {
  .searchResult .searchResult_add::before,
  .searchResult .searchResult_depart::before,
  .searchResult .searchResult_time::before,
  .searchResult .searchResult_web::before {
    font-size: 1.6rem;
    line-height: 1.6;
    color: rgba(113, 84, 28, 0.8);
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
@media (min-width: 1000px) and (min-width: 1000px) {
  .searchResult .searchResult_add::before,
  .searchResult .searchResult_depart::before,
  .searchResult .searchResult_time::before,
  .searchResult .searchResult_web::before {
    font-size: 1.8rem;
  }
}
@media (min-width: 1000px) {
  .searchResult .searchResult_add::before {
    content: "\e94a";
    font-family: "icomoon";
  }
  .searchResult .searchResult_depart::before {
    content: "\e951";
    font-family: "icomoon";
  }
  .searchResult .searchResult_time::before {
    content: "\e942";
    font-family: "icomoon";
  }
  .searchResult .searchResult_web::before {
    content: "\e94c";
    font-family: "icomoon";
  }
}

/*----------------------------------------------------
 病院詳細　ヘッダー
----------------------------------------------------*/
.hospitalHeader {
  position: relative;
  color: #3A3733;
  background: #FFFFFE;
  font-size: 1.6rem;
  line-height: 1.6;
  border-radius: 0.4rem;
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
}
.hospitalHeader a {
  text-decoration: none;
}
.hospitalHeader .hospitalHeader_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0 2rem;
}
@media (min-width: 1000px) {
  .hospitalHeader .hospitalHeader_item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.hospitalHeader .hospitalHeader_item > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
}
@media (min-width: 1000px) {
  .hospitalHeader .hospitalHeader_item > li > a:hover {
    opacity: 0.7;
  }
}
@media (max-width: 999px) {
  .hospitalHeader .hospitalHeader_item > li > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0.8rem;
    width: 100%;
    min-height: 6.2rem;
    color: #71541C;
    border: solid 0.1rem #D3C4B4;
    border-radius: 0.8rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    gap: 0.4rem;
    -webkit-transition: all 0.08s ease-out;
    transition: all 0.08s ease-out;
    font-size: 1.6rem;
    line-height: 1.2;
    min-height: 4.6rem;
    margin-bottom: 0.8rem;
  }
  .hospitalHeader .hospitalHeader_item > li > a:active {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
@media (max-width: 999px) and (min-width: 1000px) {
  .hospitalHeader .hospitalHeader_item > li > a:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}

/*----------------------------------------------------
 病院詳細
----------------------------------------------------*/
.hospitalDetail {
  position: relative;
  color: #3A3733;
  background: #FFFFFE;
  font-size: 1.6rem;
  line-height: 1.6;
  border-radius: 0.4rem;
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin: 0.8rem 0;
}
@media (max-width: 999px) {
  .hospitalDetail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.8rem;
  }
}
@media (min-width: 1000px) {
  .hospitalDetail {
    margin: 1.2rem 0;
  }
}

/*----------------------------------------------------
 病院詳細　テーブル
----------------------------------------------------*/
.detailDefinition {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  font-size: 1.6rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .detailDefinition {
    font-size: 1.8rem;
  }
}
@media (min-width: 1000px) {
  .detailDefinition {
    grid-template-columns: auto 1fr;
  }
}
.detailDefinition dt {
  font-weight: 600;
}
@media (min-width: 1000px) {
  .detailDefinition dt {
    color: #71541C;
    background-color: #FAF6F2;
    padding: 1.6rem 2rem;
  }
}
.detailDefinition dt.detailDefinition_dtFeature {
  background-color: #826837;
  color: #FFFFFF;
}
@media (max-width: 999px) {
  .detailDefinition dt.detailDefinition_dtFeature {
    background-color: #826837;
    color: #FFFFFF;
    padding: 1.2rem 0.8rem;
    border-bottom: 1px solid #FFFFFF;
    border-radius: 0.4rem 0.4rem 0 0;
  }
}
.detailDefinition dd {
  grid-column: 1;
  margin-bottom: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .detailDefinition dd {
    font-size: 1.8rem;
  }
}
@media (min-width: 1000px) {
  .detailDefinition dd {
    padding: 1.6rem 0 1.2rem 1.6rem;
    grid-column: 2;
    margin-bottom: 0;
  }
}
.detailDefinition dd.detailDefinition_ddFeature {
  background-color: #DDCAB1;
  color: #4F4539;
}
@media (max-width: 999px) {
  .detailDefinition dd.detailDefinition_ddFeature {
    background-color: #EFE0CF;
    margin-bottom: 1.6rem;
    padding: 1.2rem 0.8rem;
    border-radius: 0 0 0.4rem 0.4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

/*----------------------------------------------------
 地図エリア
----------------------------------------------------*/
.mapCanvas {
  width: 100%;
  height: auto;
  margin-bottom: 0.8rem;
  aspect-ratio: 8/7;
}
@media (min-width: 1000px) {
  .mapCanvas {
    aspect-ratio: 16/10;
  }
}

/*----------------------------------------------------
 地図下リンクアイテム
----------------------------------------------------*/
.mapItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
}
@media (min-width: 1000px) {
  .mapItem {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0 1.6rem;
  }
}
.mapItem > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}
.mapItem > li > a::after {
  content: "\e91c";
  font-family: "icomoon";
  font-size: 1.28rem;
}
@media (max-width: 999px) {
  .mapItem > li > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0.8rem;
    width: 100%;
    min-height: 6.2rem;
    color: #71541C;
    border: solid 0.1rem #D3C4B4;
    border-radius: 0.8rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    gap: 0.4rem;
    -webkit-transition: all 0.08s ease-out;
    transition: all 0.08s ease-out;
    font-size: 1.6rem;
    line-height: 1.2;
    min-height: 4.6rem;
  }
  .mapItem > li > a:active {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
@media (max-width: 999px) and (min-width: 1000px) {
  .mapItem > li > a:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
@media (max-width: 999px) {
  .mapItem > li > a::after {
    display: none;
  }
}
.mapItem .mapItem_move {
  cursor: pointer;
}

/*----------------------------------------------------
 地図検索用まとめ css
 jsでclass名使ってるので、class名はそのまま
----------------------------------------------------*/
#qlifemap-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  top: 5px;
  left: 5%;
  right: 5%;
  z-index: 5;
  background-color: #FFFFFE;
  padding: 0.8rem;
  height: auto;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
  font-size: 1.3rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  #qlifemap-info {
    font-size: 1.4rem;
  }
}
@media (min-width: 1000px) {
  #qlifemap-info {
    padding: 1.2rem;
    gap: 0.4rem;
  }
}
#qlifemap-info .qlifemap-info-name > a {
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: bold;
  margin-right: 3.2rem;
}
@media (min-width: 1000px) {
  #qlifemap-info .qlifemap-info-name > a {
    font-size: 1.8rem;
  }
}
#qlifemap-info .qlifemap-info-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0;
}
@media (min-width: 1000px) {
  #qlifemap-info .qlifemap-info-icon {
    margin: 0;
  }
}
#qlifemap-info .qlifemap-info-addr span:not(:first-child) {
  margin-left: 0.8rem;
}
#qlifemap-info .qlifemap-info-detail {
  text-align: right;
}
#qlifemap-info .qlifemap-info-close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background-color: #71541C;
  color: #FFFFFF;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
}

/*----------------------------------------------------
 下部のフローティング
----------------------------------------------------*/
.floating {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0.8rem;
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom));
  padding-bottom: calc(0.8rem + constant(safe-area-inset-bottom));
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Floating
module:
  - 11 Floating
---

---
フローティング
---
このクラスの中の要素をページ下部に追従させる。<br>
iPhoneなどのsafe-areaに対応済み。<br>
<br>
例）
```html
<div class="floating">
  <button class="button">ボタン</button>
</div>
```
*/
/*----------------------------------------------------
 セパレータ
----------------------------------------------------*/
.separater {
  display: block;
  width: 100%;
  height: 0;
  border-bottom: 0.1rem solid #D3C4B4;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Separater
module:
  - 12 Separater
---

---
セパレータ
---
罫線です。<br>
<br>
例）
```html
<span class="separater"><span>
```
*/
/*----------------------------------------------------
 アコーディオン
----------------------------------------------------*/
.accordion {
  position: relative;
  color: #3A3733;
  background: #FFFFFE;
  font-size: 1.6rem;
  line-height: 1.6;
  border-radius: 0.4rem;
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
  padding: 0;
  color: #3A3733;
  background: #FFFFFE;
  /*----------------
  Contents
  ----------------*/
  /*----------------
  State
  ----------------*/
}
.accordion .accordion_summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding: 1.2rem 2rem;
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 600;
  border-radius: 0.4rem;
  list-style: none;
  outline: none;
  gap: 0.8rem;
}
@media (min-width: 1000px) {
  .accordion .accordion_summary {
    font-size: 2.2rem;
  }
}
.accordion .accordion_summary > span {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
}
.accordion .accordion_summary > span[class^=icon] {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 1.8rem;
          flex: 0 1 1.8rem;
  font-size: 1.8rem;
}
.accordion .accordion_summary::after {
  content: "\e904";
  font-family: "icomoon";
  font-size: 1.3rem;
}
.accordion .accordion_summary::-webkit-details-marker {
  display: none;
}
.accordion .accordion_contents {
  padding: 2rem;
}
.accordion[open] .accordion_summary {
  border-bottom: 0.1rem solid #D3C4B4;
  border-radius: 0.4rem 0.4rem 0 0;
}
.accordion[open] .accordion_summary::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: Accordion
module:
  - 13 Accordion
---

---
アコーディオン
---
トグル開閉するアコーディオンモジュール。<br>
<br>
<br>
例）
```html
<details class="accordion">
  <summary class="accordion_summary">タイトル</summary>
  <div class="accordion_contents">
    <p>本文</p>
  </div>
</details>
```
*/
/*----------------------------------------------------
 カード
----------------------------------------------------*/
.card {
  position: relative;
  color: #3A3733;
  background: #FFFFFE;
  font-size: 1.6rem;
  line-height: 1.6;
  border-radius: 0.4rem;
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
  padding: 0 0 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #3A3733;
  /*----------------
  Contents
  ----------------*/
  /*----------------
  Size
  ----------------*/
}
.card .card_thum {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  min-height: 12rem;
  background: #DDCAB1 no-repeat center center;
  background-size: cover;
  border-radius: 0.4rem 0.4rem 0 0;
}
.card .card_contents {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  padding: 2rem 2rem 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
}
.card .card_contents .card_title {
  font-size: 1.6rem;
  line-height: 1.3;
}
@media (min-width: 1000px) {
  .card .card_contents .card_title {
    font-size: 1.8rem;
  }
}
.card .card_contents .card_desc {
  font-size: 1.3rem;
  line-height: 1.6;
}
@media (min-width: 1000px) {
  .card .card_contents .card_desc {
    font-size: 1.4rem;
  }
}
.card .card_more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 2rem;
}
.card.card-md {
  padding: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0.8rem;
  /*----------------
  State
  ----------------*/
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}
.card.card-md .card_thum {
  margin: 0 1.2rem 0 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 10rem;
          flex: 0 1 10rem;
  height: auto;
  min-height: auto;
  border-radius: 0.4rem 0 0 0.4rem;
}
.card.card-md .card_contents {
  padding: 1.6rem 0;
}
.card.card-md .card_contents:first-child {
  padding-left: 2rem;
}
.card.card-md .card_contents:last-child {
  padding-right: 2rem;
}
.card.card-md .card_more {
  padding: 0 2rem 0 0;
}
.card.card-md .card_more button,
.card.card-md .card_more a {
  display: none;
}
.card.card-md .card_more::before {
  content: "\e919";
  font-family: "icomoon";
  color: #DDCAB1;
}
.card.card-md.disabled {
  color: #FFFFFF;
  background: #E3E0DC;
  -webkit-filter: none;
          filter: none;
  pointer-events: none;
}
.card.card-md.disabled .card_more {
  opacity: 0;
}
.card.card-md:active {
  -webkit-transform: scale(0.96, 0.96);
          transform: scale(0.96, 0.96);
  opacity: 0.9;
}
@media (min-width: 1000px) {
  .card.card-md:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}

/*----------------------------------------------------
 カレンダー
----------------------------------------------------*/
.calendar {
  position: relative;
  color: #3A3733;
  background: #FFFFFE;
  font-size: 1.6rem;
  line-height: 1.6;
  border-radius: 0.4rem;
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 1.6rem 0;
  gap: 0.8rem;
  /*----------------
  Contents
  ----------------*/
}
.calendar .calendar_week {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.8rem;
  z-index: 1;
}
.calendar .calendar_week > span {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 14.2857142857%;
          flex: 1 1 14.2857142857%;
  font-size: 1.17rem;
  text-align: center;
}
.calendar .calendar_week > span:last-child {
  color: #015B80;
}
.calendar .calendar_week > span:first-child {
  color: #BA1A1A;
}
.calendar .calendar_date {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  z-index: 2;
}
.calendar .calendar_date > a {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 14.2857142857%;
          flex: 1 0 14.2857142857%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.8rem 0.4rem;
  height: 6rem;
  color: #3A3733;
  border-bottom: solid 0.1rem rgb(229.8571428571, 221.2857142857, 212.1428571429);
  gap: 0.4rem;
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}
.calendar .calendar_date > a > time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 2.9rem;
  height: 2.9rem;
  font-size: 1.3rem;
  line-height: 1.2;
  line-height: 1;
  background: transparent;
}
.calendar .calendar_date > a:nth-child(7n) {
  color: #015B80;
}
.calendar .calendar_date > a:nth-child(7n+1) {
  color: #BA1A1A;
}
.calendar .calendar_date > a.today {
  color: #442B00;
  background: #FFD176;
}
.calendar .calendar_date > a:active {
  background: rgba(255, 184, 48, 0.2);
}
@media (min-width: 1000px) {
  .calendar .calendar_date > a:hover {
    background: rgba(255, 184, 48, 0.2);
  }
}
.calendar .calendar_date > a.disabled {
  pointer-events: none;
}
.calendar .calendar_date > a.disabled > time {
  color: #E3E0DC;
}
.calendar .calendar_date > a.disabled > .hospital {
  opacity: 0;
}
.calendar .calendar_date > a > .hospital::before {
  content: "受診";
  font-size: 1.3rem;
  line-height: 1.2;
  font-size: 1.17rem;
  opacity: 0;
}
.calendar .calendar_date > a > .hospital.scheduled::before {
  opacity: 1;
}
.calendar::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  margin-top: -0.1rem;
  border-top: solid 0.1rem #FFFFFF;
  z-index: 3;
}

/*----------------------------------------------------
 コロナ注意書き
----------------------------------------------------*/
.covidText {
  color: #BA1A1A;
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
@media (min-width: 1000px) {
  .covidText {
    font-size: 1.4rem;
  }
}

.covidTextBox {
  background-color: #FFDAD6;
  border-radius: 0.4rem;
  padding: 1.6rem;
}
@media (min-width: 1000px) {
  .covidTextBox {
    padding: 2rem;
  }
}
.covidTextBox .covidText {
  margin-bottom: 0;
}

/*----------------------------------------------------
 トップに戻るリンク
----------------------------------------------------*/
.backTopLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 2rem;
  gap: 1.2rem;
}
@media (min-width: 1000px) {
  .backTopLink {
    margin: 1.6rem 2rem;
    gap: 2rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.backTopLink > a {
  text-decoration: none;
}
@media (max-width: 999px) {
  .backTopLink > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0.8rem;
    width: 100%;
    min-height: 6.2rem;
    color: #71541C;
    border: solid 0.1rem #D3C4B4;
    border-radius: 0.8rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    gap: 0.4rem;
    -webkit-transition: all 0.08s ease-out;
    transition: all 0.08s ease-out;
    font-size: 1.6rem;
    line-height: 1.2;
    min-height: 4.6rem;
  }
  .backTopLink > a:active {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
@media (max-width: 999px) and (min-width: 1000px) {
  .backTopLink > a:hover {
    -webkit-transform: scale(0.96, 0.96);
            transform: scale(0.96, 0.96);
    opacity: 0.9;
  }
}
@media (min-width: 1000px) {
  .backTopLink > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.2rem;
  }
  .backTopLink > a::after {
    content: "\e91c";
    font-family: "icomoon";
    font-size: 1.28rem;
  }
}

/*----------------------------------------------------
 都道府県　地図つきリスト　PCの
----------------------------------------------------*/
@media (min-width: 1000px) {
  .prefecturesMap {
    position: relative;
    min-height: 36rem;
    background: #fff url(/default_v2/img/map_japan.png) 13rem 1rem no-repeat;
    background-size: 32rem;
  }
}
@media (min-width: 1000px) {
  .prefecturesMap .prefecturesMapArea {
    position: absolute;
    padding: 1.2rem;
    background: rgba(221, 202, 177, 0.2);
    border-radius: 0.4rem;
  }
  .prefecturesMap .prefecturesMapArea.hokkaido_tohoku {
    top: 0;
    right: 0;
    width: 19rem;
  }
  .prefecturesMap .prefecturesMapArea.koshinetsu_hokuriku {
    top: 135px;
    right: 0;
    width: 19rem;
  }
  .prefecturesMap .prefecturesMapArea.kanto {
    top: 26rem;
    right: 0;
    width: 19rem;
  }
  .prefecturesMap .prefecturesMapArea.tokai {
    top: 26rem;
    left: 30rem;
    width: 12rem;
  }
  .prefecturesMap .prefecturesMapArea.shikoku {
    top: 26rem;
    left: 16rem;
    width: 12rem;
  }
  .prefecturesMap .prefecturesMapArea.kinki {
    top: 0;
    left: 17rem;
    width: 16rem;
  }
  .prefecturesMap .prefecturesMapArea.chugoku {
    top: 0;
    left: 0;
    width: 15rem;
  }
  .prefecturesMap .prefecturesMapArea.kyushu_okinawa {
    top: 13rem;
    left: 0;
    width: 12rem;
  }
}
.prefecturesMap .prefecturesMapArea .prefecturesMapArea_title {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 0.8rem;
}
@media (min-width: 1000px) {
  .prefecturesMap .prefecturesMapArea .prefecturesMapArea_title {
    font-size: 1.6rem;
  }
}
.prefecturesMap .prefecturesMapArea .prefecturesList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 1.6rem;
  margin-bottom: 1.6rem;
}
@media (min-width: 1000px) {
  .prefecturesMap .prefecturesMapArea .prefecturesList {
    margin-bottom: 0;
    gap: 0.8rem 1.6rem;
  }
}
@media (min-width: 1000px) {
  .prefecturesMap .prefecturesMapArea .prefecturesList > li {
    font-size: 1.44rem;
    line-height: 1.2;
  }
}

/*----------------------------------------------------
 もっと読む
----------------------------------------------------*/
.readMore {
  position: relative;
}
.readMore .readMore-hide {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.readMore .readMoreButton {
  margin: 0 auto;
}

/*----------------------------------------------------
 問い合わせ　回答テキスト
----------------------------------------------------*/
.confirmText {
  background-color: #FAF6F2;
  padding: 1.6rem 1.2rem;
  margin-bottom: 2rem;
  min-height: 5.7rem;
  word-break: break-all;
}

/*----------------------------------------------------
　Layout
----------------------------------------------------*/
/*----------------------------------------------------
 レイアウト
----------------------------------------------------*/
.wrap {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  padding-top: 3.2rem;
}
@media (max-width: 999px) {
  .wrap {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    padding-bottom: calc(3.2rem + env(safe-area-inset-bottom));
    padding-bottom: calc(3.2rem + constant(safe-area-inset-bottom));
    min-width: 320px;
    max-width: 999px;
  }
}
@media (min-width: 1000px) {
  .wrap {
    margin: 0 auto;
    padding-bottom: 2.8rem;
    max-width: 1000px;
    gap: 0;
  }
}
.wrap .overview {
  margin: 0 2.8rem;
}
@media (min-width: 1000px) {
  .wrap .overview {
    margin: 0 0 4rem 0;
  }
}
.wrap .main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1000px) {
  .wrap .main {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    /*gap: 4rem;サイドバーにバナーを置く場合は、コメントアウトを外してください*/
  }
}
@media (min-width: 1000px) {
  .wrap .main .article {
    width: 71rem;
    margin: 0 auto;
  }
}
.wrap .main .article .article_footer {
  margin: 2rem 2.8rem;
}
@media (min-width: 1000px) {
  .wrap .main .article .article_footer {
    margin: 2.8rem 0;
  }
}
.wrap .main .aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6rem;
}
@media (min-width: 1000px) {
  .wrap .main .aside {
    max-width: 25rem;
  }
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: レイアウト
layout:
  - 01 レイアウト
---

---
Wrap
---
画面の一番外側を囲むクラスです。<br>
全ての要素は基本的に'.wrap'の中に配置してください。<br>
※モーダルなどは除いて<br>
<br>
```html
<div class="wrap">
  //　ページ内の要素
</div>
```
*/
/*----------------------------------------------------
 カラムレイアウト
----------------------------------------------------*/
/* ------------------------------------------------ */
.colbox-between, .colbox-start, .colbox-end, .colbox-center, .colbox {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  gap: 1.2rem;
}
.colbox-column.colbox-between, .colbox-column.colbox-start, .colbox-column.colbox-end, .colbox-column.colbox-center, .colbox-column.colbox {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.colbox {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.colbox-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.colbox-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.colbox-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.colbox-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* ------------------------------------------------ */
.col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1, .col {
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

.col-1 {
  -ms-flex-preferred-size: calc(8.3333333333% * 1);
      flex-basis: calc(8.3333333333% * 1);
}

.col-2 {
  -ms-flex-preferred-size: calc(8.3333333333% * 2);
      flex-basis: calc(8.3333333333% * 2);
}

.col-3 {
  -ms-flex-preferred-size: calc(8.3333333333% * 3);
      flex-basis: calc(8.3333333333% * 3);
}

.col-4 {
  -ms-flex-preferred-size: calc(8.3333333333% * 4);
      flex-basis: calc(8.3333333333% * 4);
}

.col-5 {
  -ms-flex-preferred-size: calc(8.3333333333% * 5);
      flex-basis: calc(8.3333333333% * 5);
}

.col-6 {
  -ms-flex-preferred-size: calc(8.3333333333% * 6);
      flex-basis: calc(8.3333333333% * 6);
}

.col-7 {
  -ms-flex-preferred-size: calc(8.3333333333% * 7);
      flex-basis: calc(8.3333333333% * 7);
}

.col-8 {
  -ms-flex-preferred-size: calc(8.3333333333% * 8);
      flex-basis: calc(8.3333333333% * 8);
}

.col-9 {
  -ms-flex-preferred-size: calc(8.3333333333% * 9);
      flex-basis: calc(8.3333333333% * 9);
}

.col-10 {
  -ms-flex-preferred-size: calc(8.3333333333% * 10);
      flex-basis: calc(8.3333333333% * 10);
}

.col-11 {
  -ms-flex-preferred-size: calc(8.3333333333% * 11);
      flex-basis: calc(8.3333333333% * 11);
}

.col-12 {
  -ms-flex-preferred-size: calc(8.3333333333% * 12);
      flex-basis: calc(8.3333333333% * 12);
}

.col-noMargin {
  margin-right: auto;
}

.col-noShrink {
  -webkit-box-flex: 0;
      -ms-flex: 0 0;
          flex: 0 0;
}

/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: カラムレイアウト
layout:
  - 02 カラムレイアウト
---

---
colbox
---
カラムレイアウトをするためのレイアウトクラスです。<br>
bootstrapのグリッドのように、横幅を12個に仮想分割してカラムレイアウトを表現するためのクラスです。<br>
```html
<div class="colbox">
  <div class="col-4">カラム</div>
  <div class="col-2">カラム</div>
  <div class="col-6">カラム</div>
</div>
```
```


*/
/*----------------------------------------------------
　Page
----------------------------------------------------*/
/*----------------------------------------------------
 Aigis
----------------------------------------------------*/
/*
---
name: はじめに
overview:
  - はじめに
---

---
Sassについて
---
<br>
Dart Sassを使用します<br>
※ @importで読み込まず、@useで読み込む<br>
<br>
<br>


---
Sassの構成について
---
<br>
.scssは、用途に応じて以下のディレクトリに分けて格納します<br>
<br>
```scss
└ base　　：リセットcssなどを格納する。
└ layout　 ：レイアウト用のスタイルを格納する。
└ mixin　　：mixinを格納する。
└ module　：部品、モジュール、パーツを格納する。主にここで作業する。
└ page　　：単体ページ用のスタイルを格納する。
```
<br>
基本的には、モジュールを組み合わせて画面を構成するようにコーディングしてください。<br>
<br>
例えば今日の記録画面だったら、<br>
`kyou_no_kiroku.scss`に日付、記録、ボタンのスタイル・・と詰め込むのではなく、<br>
`hiduke.scss`に日付のスタイル、`kiroku.scss`に記録のスタイル、`botan.scss`にボタンのスタイル・・というように、<br>
モジュールごとに定義して、それを組み合わせて画面を作る、という形です。<br>
<br>
ボタンや入力フォームなど、基本的なモジュールは予め用意してあるので、<br>
それをカスタマイズしてコーディングしてください。<br>
<br>
<br>

---
クラスの命名規則について
---
<br>
BEMですが、少し変則な形です。<br>
<br>
`blockBlock_elemntalElemental-modifyModify`<br>
<br>
単語は'blockBlock'のようにキャメルケースで表記します。<br>
要素間は'_'アンダースコア一つで区切ります。<br>
状態やバリエーションは'-'ハイフン一つで区切ります。<br>
<br>
例）
```scss
.hospitalSchedule_date {
}
.hospitalSchedule_title {
}
.hospitalSchedule_title-sm {
}
```

*/