@charset "UTF-8";
/* ****************************************************************************************************

  # foundation
  - リセットcssやベース
  - 変数、mixinや関数はfoundation/tool/_global.cssで管理
  - 必要なscssファイルで@use "/hoge/_global";として読み込む

**************************************************************************************************** */
/* ## reset, base
---------------------------------------------------------------------- */
/* Document
 * ========================================================================== */
/**
 * Add border box sizing in all browsers (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */
html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 * 3. Show the overflow in Edge 18- and IE.
 */
hr {
  color: inherit; /* 1 */
  height: 0; /* 2 */
  overflow: visible; /* 3 */
}

/**
 * Add the correct display in IE.
 */
main {
  display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */
/* nav li::before {
  content: "\200B";
} */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
  -ms-overflow-style: scrollbar; /* 3 */
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */
iframe {
  border-style: none;
}

/**
 * Remove the border on images within links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */
/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
table {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */
button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */
fieldset {
  border: 1px solid #a0a0a0; /* 1 */
  padding: 0.35em 0.75em 0.625em; /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */
input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */
textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
  resize: block; /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  padding: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */
:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */
/*
 * Add the correct display in Edge 18- and IE.
 */
details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */
dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* User interaction
 * ========================================================================== */
/*
 * Remove the tapping delay in IE 10.
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
}

/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
[aria-busy=true] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
[aria-disabled=true],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
[aria-hidden=false][hidden] {
  display: initial;
}

[aria-hidden=false][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # global
  - foundation > tools
  - サイトの全体で使用するような汎用的なライブラリ(関数やMixins集)を
    「foundation/tool/_global.scss」の中で「@forward」を使用して設定する

**************************************************************************************************** */
/* ## function
---------------------------------------------------------------------- */
/* ****************************************************************************************************

  # get-vw
  - foundation > function
  - 第一引数で基準となる画面幅のフォントサイズ、第二引数で基準となる画面幅を入力

**************************************************************************************************** */
/* ****************************************************************************************************

  # aspect-ratio
  - foundation > function
  - padding-topで画像アスペクト比を維持

**************************************************************************************************** */
/* ## variable
---------------------------------------------------------------------- */
/* ****************************************************************************************************

  # breakpoint
  - foundation > variable > base

**************************************************************************************************** */
/**
 * 主なデバイスサイズ
 * iphone 5/se: 320px
 * galaxy s5: 360px
 * iphone 6/7/8/X: 375px
 * iphone 6/7/8 plus: 414px
 * iPad: 768px
 * iPad Pro: 1024px
 */
/* ****************************************************************************************************

  # color
  - foundation > variable > base

**************************************************************************************************** */
/* 赤
---------------------------------------------------------------------- */
/* ベージュ
---------------------------------------------------------------------- */
/* 青
---------------------------------------------------------------------- */
/* 緑
---------------------------------------------------------------------- */
/* txt
---------------------------------------------------------------------- */
/* border
---------------------------------------------------------------------- */
/* input系列
---------------------------------------------------------------------- */
/* プロジェクト固有
---------------------------------------------------------------------- */
/* ****************************************************************************************************

  # animation
  - foundation > variable > base

**************************************************************************************************** */
/* ****************************************************************************************************

  # easing
  - foundation > variable > base

**************************************************************************************************** */
/* ****************************************************************************************************

  # typography
  - foundation > variable > base

**************************************************************************************************** */
/* ======================================================================

  ## font-family

====================================================================== */
/* ======================================================================

  ## 行間

====================================================================== */
/* ======================================================================

  ## 太さ

====================================================================== */
/* ======================================================================

  ## 大きさ

====================================================================== */
/* ****************************************************************************************************

  # layout
  - foundation > variable > base

**************************************************************************************************** */
/* ======================================================================

  ## ヘッダーのheight

====================================================================== */
/* ======================================================================

  ## headerとか主な要素のz-index

====================================================================== */
/* ======================================================================

  ## コンテンツ幅

====================================================================== */
/* ### width
---------------------------------------------------------------------- */
/* ### side gutter
---------------------------------------------------------------------- */
/* ### max-width
---------------------------------------------------------------------- */
/* ======================================================================

  ## セクション間のマージン

====================================================================== */
/* ## mixin
---------------------------------------------------------------------- */
/* ****************************************************************************************************

  # appear-up
  - foundation > mixin

**************************************************************************************************** */
/* ****************************************************************************************************

  # auto-kerning
  - foundation > mixin
  - プロポーショナルメトリクスで自動カーニング（オープンタイプフォントのみ）

**************************************************************************************************** */
/* ****************************************************************************************************

  # background-img
  - foundation > mixin

**************************************************************************************************** */
/* ## variable
---------------------------------------------------------------------- */
/* ****************************************************************************************************

  # content-width-padding
  - foundation > mixin
  - コンテンツの横幅を設定(padding)

**************************************************************************************************** */
/* ## variable
---------------------------------------------------------------------- */
/* ****************************************************************************************************

  # content-width
  - foundation > mixin
  - コンテンツの横幅を設定

**************************************************************************************************** */
/* ****************************************************************************************************

  # fitted-image
  - foundation > mixin
  - padding-topでアスペクト比維持の画像

**************************************************************************************************** */
/* ****************************************************************************************************

  # font-family
  - foundation > mixin

**************************************************************************************************** */
/* ## variable
---------------------------------------------------------------------- */
/* ****************************************************************************************************

  # font-size
  - foundation > mixin
  - 主要なフォントサイズを管理

**************************************************************************************************** */
/* ======================================================================

  ## 通常

====================================================================== */
/* ======================================================================

  ## 小

====================================================================== */
/* ======================================================================

  ## 極小

====================================================================== */
/* ======================================================================

  ## 中

====================================================================== */
/* ======================================================================

  ## 大

====================================================================== */
/* ======================================================================

  ## 極大

====================================================================== */
/* ======================================================================

  ## heading

====================================================================== */
/* ======================================================================

  ## title

====================================================================== */
/* ****************************************************************************************************

  # liquid-image
  - foundation > mixin

**************************************************************************************************** */
/* ****************************************************************************************************

  # replace-txt
  - foundation > mixin

**************************************************************************************************** */
/* ****************************************************************************************************

  # z-index
  - foundation > mixin

**************************************************************************************************** */
* {
  outline: none;
}

html {
  font-size: 2.6666666667vw;
  line-height: 1.75;
  background-color: #fff;
}

@media print, screen and (min-width: 768px) {
  html {
    font-size: 54.5%;
  }
}
@media print, screen and (min-width: 1200px) {
  html {
    font-size: 62.5%;
  }
}
@media print, screen and (min-width: 1920px) {
  html {
    font-size: 0.5208333333vw;
  }
}
@media print, screen and (max-width: 767px) {
  html.is-locked,
  html.is-locked body {
    position: relative;
    overflow: hidden;
  }
}
body {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
  font-size: 1.4em;
  font-weight: 500;
  font-feature-settings: "palt";
  font-kerning: normal;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  line-break: strict;
}

@media print, screen and (min-width: 768px) {
  body {
    font-size: 1.6em;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: bold;
  line-height: 1.4;
  color: inherit;
}

ul,
ol {
  padding-left: 0;
  list-style-type: none;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}

table {
  width: 100%;
}

a {
  color: red;
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  opacity: 0.7;
}

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

[src$=".svg"],
[data$=".svg"] {
  width: 100%;
}

i,
cite,
em,
address,
dfn {
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
hr,
table,
fieldset,
figure,
pre {
  margin-top: 0;
  margin-bottom: 0;
}

/* ======================================================================

  フォーム

====================================================================== */
input,
button,
textarea,
select {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
  font-weight: 500;
}

textarea {
  font-size: 1.4rem;
  resize: none;
}

textarea::placeholder {
  color: gray;
}

textarea::-webkit-input-placeholder {
  padding-top: 0.2rem;
}

textarea::-ms-input-placeholder {
  color: gray;
}

textarea:-ms-input-placeholder {
  color: gray;
}

input {
  font-size: 1.4rem;
}

input::placeholder {
  color: gray;
}

input::-webkit-input-placeholder {
  padding-top: 0.2rem;
}

input::-ms-input-placeholder {
  color: gray;
}

input:-ms-input-placeholder {
  color: gray;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

select {
  font-size: 1.4rem;
  color: #333;
  text-indent: 0.01px;
  text-overflow: "";
  vertical-align: middle;
  cursor: pointer;
  background: none transparent;
  transition: 0.3s;
}
select:hover {
  opacity: 0.7;
}

select option {
  color: #333;
  background-color: #fff;
}

select::-ms-expand {
  display: none;
}

select:-moz-focusring {
  color: #333;
  text-shadow: none;
}

/* ****************************************************************************************************

  # layout
  - デザインの大枠（ワイヤーフレームで表現されるようなエリア）
  - 要素の具体的なスタイルはobject/project/で指定

**************************************************************************************************** */
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # body
  - layout

**************************************************************************************************** */
.l-body {
  position: relative;
  padding: 0;
  overflow: clip;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

@media print, screen and (min-width: 768px) {
  .l-body {
    min-width: 1024px;
  }
}
/* is-show
---------------------------------------------------------------------- */
html.is-loaded .l-body {
  visibility: visible;
  opacity: 1;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # container
  - layout
  - 横幅などの指定

**************************************************************************************************** */
.l-container {
  position: relative;
  width: 100%;
  padding: 0 4vw;
}
@media print, screen and (min-width: 768px) {
  .l-container {
    padding: 0 6vw;
  }
}
@media print, screen and (min-width: 1200px) {
  .l-container {
    padding: 0 8.958333335vw;
  }
}

/* full
---------------------------------------------------------------------- */
.l-container.l-container--full {
  padding-right: 0;
  padding-left: 0;
}

/* pcサイズからfull
---------------------------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .l-container.l-container--full_from-m {
    padding-right: 0;
    padding-left: 0;
  }
}
/*・左余白（右詰め）
---------------------------------------------------------------------- */
.l-container.l-container--left {
  width: 100%;
  padding: 0 0 0 4vw;
}
@media print, screen and (min-width: 768px) {
  .l-container.l-container--left {
    padding: 0 0 0 6vw;
  }
}
@media print, screen and (min-width: 1200px) {
  .l-container.l-container--left {
    padding: 0 0 0 8.958333335vw;
  }
}

/*・右余白(左詰め)
---------------------------------------------------------------------- */
.l-container.l-container--right {
  width: 100%;
  padding: 0 4vw 0 0;
}
@media print, screen and (min-width: 768px) {
  .l-container.l-container--right {
    padding: 0 6vw 0 0;
  }
}
@media print, screen and (min-width: 1200px) {
  .l-container.l-container--right {
    padding: 0 8.958333335vw 0 0;
  }
}

/*・余白大（コンテンツ幅狭）
---------------------------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .l-container.l-container--narrow {
    padding: 0 max(8.958333335vw, (100vw - 990px) / 2);
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # footer
  - layout

**************************************************************************************************** */
.l-footer {
  position: relative;
  padding: 5.8rem 5.5vw 2.4rem;
  background-color: #151515;
}

@media print, screen and (min-width: 768px) {
  .l-footer {
    padding: 7.8rem 5vw 5rem;
  }
}
.l-footer__container {
  display: flex;
  flex-direction: column;
  row-gap: 5.5rem;
  border-bottom: 2px solid white;
}

@media print, screen and (min-width: 768px) {
  .l-footer__container {
    flex-direction: row-reverse;
    justify-content: space-between;
    column-gap: 2rem;
  }
}
/* --------------------------------------------------------
  ロゴ、ボタン エリア
-------------------------------------------------------- */
.l-footer__container__right {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-footer__container__right {
    max-width: 320px;
  }
}
/* --------------------------------------------------------
  インフォメーションエリア
-------------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .l-footer__container__left {
    padding-right: 4%;
  }
}
/* --------------------------------------------------------
  コピーライト
-------------------------------------------------------- */
.l-footer__copy {
  text-align: center;
  color: white;
  font-size: 1.2rem;
  padding-top: 1.4rem;
}

@media print, screen and (min-width: 768px) {
  .l-footer__copy {
    padding-top: 2rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # header
  - layout

**************************************************************************************************** */
.l-header {
  z-index: 255;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.5rem;
  background-color: transparent;
}

.l-header.is-fixed {
  background-color: white;
}

@media print, screen and (min-width: 768px) {
  .l-header {
    height: 8rem;
  }
}
/* gnav展開時
---------------------------------------------------------------------- */
/* ======================================================================

  container

====================================================================== */
.l-header__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 0 0 0 4vw;
}

.l-header__sp-text {
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: bold;
  margin-left: 28%;
  margin-right: auto;
}

@media print, screen and (min-width: 768px) {
  .l-header__sp-text {
    display: none;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # kv
  - layout

**************************************************************************************************** */
.l-kv {
  position: relative;
  display: block;
  width: 100%;
  background-image: url("../images/parts/hero-frame.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top left;
  padding-top: 5.5rem;
}

@media print, screen and (min-width: 768px) {
  .l-kv {
    padding-top: 8rem;
  }
}
/* ======================================================================

  ## image

====================================================================== */
.l-kv__image {
  z-index: 0;
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
}
.l-kv__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media print, screen and (min-width: 768px) {
  .l-kv__image {
    width: 84%;
    aspect-ratio: 622/235;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
  }
}
/* ======================================================================

  ## Instagram (PCのみ)

====================================================================== */
.l-kv__instagram {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .l-kv__instagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 16rem;
    right: 2%;
    z-index: 4;
    cursor: pointer;
  }
}
.l-kv__instagram img {
  width: 3.5rem;
  display: block;
  margin-bottom: 1rem;
}

.l-kv__instagram span {
  writing-mode: vertical-lr;
  font-family: "Roboto", sans-serif;
  color: #333;
  font-weight: 500;
}

/* ======================================================================

  ## タイトル

====================================================================== */
.l-kv__title {
  width: 65%;
  max-width: 490px;
  padding-top: 1rem;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 8px 0 0;
}

/* ======================================================================

  ## 装飾

====================================================================== */
.l-kv__deco-wave {
  display: none;
  position: absolute;
}

@media print, screen and (min-width: 768px) {
  .l-kv__deco-wave {
    display: block;
    position: absolute;
    top: 24%;
    left: 78%;
    width: 13%;
  }
  .l-kv__deco-wave img {
    display: block;
  }
}
.l-kv__deco-earth {
  position: absolute;
  width: 26%;
  bottom: -18%;
  right: -5%;
}

@media print, screen and (min-width: 768px) {
  .l-kv__deco-earth {
    max-width: 20rem;
    bottom: -6%;
    right: 9%;
  }
}
.l-kv__deco-earth__inner {
  position: relative;
}

.l-kv__deco-earth__inner img.earth {
  width: 100%;
  display: block;
}

.l-kv__deco-earth__inner img.text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  animation: rotate 14s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # home-kv
  - layout

**************************************************************************************************** */
.l-home-kv {
  position: relative;
  display: block;
  width: 100%;
  height: 50rem;
  background-color: var(--primary-color);
  background-image: url("../images/parts/hero-frame.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top left;
  padding-top: 5.5rem;
}

@media print, screen and (min-width: 768px) {
  .l-home-kv {
    height: 80rem;
    padding-top: 8rem;
  }
}
/* ======================================================================

  ## container

====================================================================== */
.l-home-kv__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
}

@media print, screen and (min-width: 768px) {
  .l-home-kv__container {
    padding: 0;
  }
}
.l-home-kv__container__title {
  width: 75%;
  max-width: 500px;
  position: relative;
  opacity: 0;
  transition: all 0.7s 0.7s ease-in;
}
.l-home-kv__container__title img {
  display: block;
  width: 100%;
}

.is-loaded .l-home-kv__container__title {
  opacity: 1;
}

.l-home-kv__container__title-text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 33%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 2.4rem;
}

@media print, screen and (min-width: 768px) {
  .l-home-kv__container__title-text {
    font-size: 4rem;
  }
}
.l-home-kv__container__copy {
  font-family: "Delicious Handrawn", cursive;
  color: white;
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.3;
  font-weight: normal;
  opacity: 0;
  transition: all 0.7s 0.7s ease-in;
}

@media print, screen and (min-width: 768px) {
  .l-home-kv__container__copy {
    font-size: 4.6rem;
  }
}
.is-loaded .l-home-kv__container__copy {
  opacity: 1;
}

/* ======================================================================

  ## slider

====================================================================== */
.l-home-kv__slider {
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-home-kv__slider {
    width: calc(100% - 8rem);
    border-radius: 0 10px 10px 0;
    overflow: hidden;
  }
}
.l-home-kv__slider .swiper {
  height: 100%;
}

.l-home-kv__slider .swiper .swiper-wrapper {
  transition-timing-function: linear;
  height: 100%;
}

/* ### li img
---------------------------------------------------------------------- */
.l-home-kv__slider .swiper .swiper-wrapper .swiper-slide {
  height: 100%;
}
.l-home-kv__slider .swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ======================================================================

  ## Instagram (PCのみ)

====================================================================== */
.l-home-kv__instagram {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .l-home-kv__instagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 16rem;
    right: 2%;
    z-index: 4;
    cursor: pointer;
  }
}
.l-home-kv__instagram img {
  width: 3.5rem;
  display: block;
  margin-bottom: 1rem;
}

.l-home-kv__instagram span {
  writing-mode: vertical-lr;
  font-family: "Roboto", sans-serif;
  color: #333;
  font-weight: 500;
}

/* ======================================================================

  ## 看板

====================================================================== */
.l-home-kv__sign {
  position: absolute;
  width: 32%;
  bottom: -4.8rem;
  right: 2%;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.4s, top 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.5s;
}

@media print, screen and (min-width: 768px) {
  .l-home-kv__sign {
    max-width: 220px;
  }
}
.is-loaded .l-home-kv__sign {
  bottom: -2.8rem;
  opacity: 1;
}

.l-home-kv__sign-inner {
  position: relative;
}

.l-home-kv__sign-inner img {
  display: block;
  width: 100%;
}

.l-home-kv__sign-inner p {
  position: absolute;
  width: 100%;
  font-size: 0.9rem;
  font-weight: bold;
}
.l-home-kv__sign-inner p:nth-of-type(1) {
  top: 9%;
  left: 40%;
}
.l-home-kv__sign-inner p:nth-of-type(2) {
  top: 27%;
  left: 11%;
}
.l-home-kv__sign-inner p:nth-of-type(3) {
  top: 50%;
  left: 45%;
}

@media print, screen and (min-width: 768px) {
  .l-home-kv__sign-inner p {
    font-size: 1.6rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # main
  - layout

**************************************************************************************************** */
.l-main {
  position: relative;
  background-color: transparent;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # section
  - layout
  - 主にセクションの上下の余白を調整

**************************************************************************************************** */
.l-section {
  position: relative;
  padding: 3.6rem 0;
}

@media print, screen and (min-width: 768px) {
  .l-section {
    padding: 7.8rem 0;
  }
}
/* ======================================================================

  ## gap

====================================================================== */
/* 上下余白大
---------------------------------------------------------------------- */
.l-section.l-section--gap_lg {
  padding: 7.2rem 0;
}

@media print, screen and (min-width: 768px) {
  .l-section.l-section--gap_lg {
    padding: 15.6rem 0;
  }
}
/* 上下余白なし
---------------------------------------------------------------------- */
.l-section.l-section--gap_0 {
  padding: 0;
}

/* 上下余白中
---------------------------------------------------------------------- */
.l-section.l-section--gap_m {
  padding: 4.8rem 0;
}

@media print, screen and (min-width: 768px) {
  .l-section.l-section--gap_m {
    padding: 10.4rem 0;
  }
}
/* 上余白大
---------------------------------------------------------------------- */
.l-section.l-section--gap_top-l {
  padding-top: 7.2rem;
}

@media print, screen and (min-width: 768px) {
  .l-section.l-section--gap_top-l {
    padding-top: 15.6rem;
  }
}
/* 上余白小
---------------------------------------------------------------------- */
.l-section.l-section--gap_top-s {
  padding-top: 1.8rem;
}

@media print, screen and (min-width: 768px) {
  .l-section.l-section--gap_top-s {
    padding-top: 3.9rem;
  }
}
/* 上余白なし
---------------------------------------------------------------------- */
.l-section.l-section--gap_top-0 {
  padding-top: 0;
}

@media print, screen and (min-width: 768px) {
  .l-section.l-section--gap_top-0 {
    padding-top: 0;
  }
}
/* 下余白大
---------------------------------------------------------------------- */
.l-section.l-section--gap_bottom-lg {
  padding-bottom: 7.2rem;
}

@media print, screen and (min-width: 768px) {
  .l-section.l-section--gap_bottom-lg {
    padding-bottom: 15.6rem;
  }
}
/* 下余白小
---------------------------------------------------------------------- */
.l-section.l-section--gap_bottom-s {
  padding-bottom: 1.8rem;
}

@media print, screen and (min-width: 768px) {
  .l-section.l-section--gap_bottom-s {
    padding-bottom: 3.9rem;
  }
}
/* 下余白なし
---------------------------------------------------------------------- */
.l-section.l-section--gap_bottom-0 {
  padding-bottom: 0;
}

/* ****************************************************************************************************

  # object
  - component: プロジェクトを跨いで使用できるような汎用的なもの
  - project: プロジェクト固有のスタイルを指定（主にここを編集する）

**************************************************************************************************** */
/* ======================================================================

  ## component
  単一のブロック/機能で構成されるパーツ

====================================================================== */
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ======================================================================

  # accordion
  - component

====================================================================== */
/* ======================================================================

  ## 初期化　

====================================================================== */
details summary {
  cursor: pointer;
  list-style: none !important;
  position: relative;
}
details summary::-webkit-details-marker {
  display: none;
}

details[open] div {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # button
  - component

**************************************************************************************************** */
.c-button {
  background-color: #f1f3f6;
  display: block;
  width: 100%;
  padding: 1.4rem 1.8rem;
  border-radius: 10px;
  position: relative;
  text-align: left;
  cursor: pointer;
}

@media print, screen and (min-width: 768px) {
  .c-button {
    padding: 1.7rem 1.9rem;
    max-width: 480px;
  }
}
/* 赤色 */
.c-button.c-button--red {
  background-color: #e8323d;
}

/* 中央 */
.c-button--center {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* 中央 */
.c-button--half {
  width: 50%;
  max-width: 300px;
}

/* --------------------------------------------------------
  テキスト
-------------------------------------------------------- */
.c-button span {
  color: #333;
  font-size: 1.6rem;
}

.c-button.c-button--red span {
  color: white;
}

/* --------------------------------------------------------
  矢印
-------------------------------------------------------- */
.c-button::after {
  content: "";
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  background-color: white;
  border-radius: 50rem;
  background-image: url("../images/parts/arrow.svg");
  background-repeat: no-repeat;
  background-size: 60% auto;
  background-position: center center;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.c-button:hover::after {
  right: 3%;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # divider
  - component

**************************************************************************************************** */
.c-divider + .c-divider {
  margin-top: 3rem;
}

@media print, screen and (min-width: 768px) {
  .c-divider + .c-divider {
    margin-top: 9rem;
  }
}
.c-divider + .c-divider.c-divider--gap_sm {
  margin-top: 1.4rem;
}

@media print, screen and (min-width: 768px) {
  .c-divider + .c-divider.c-divider--gap_sm {
    margin-top: 2.8rem;
  }
}
.c-divider + .c-divider.c-divider--gap_lg {
  margin-top: 5rem;
}

@media print, screen and (min-width: 768px) {
  .c-divider + .c-divider.c-divider--gap_lg {
    margin-top: 8.6rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # c-divided-bar
  - component

**************************************************************************************************** */
.c-divided-bar {
  position: relative;
  width: 100%;
  border: 1px #e8323d solid;
  border-radius: 8px;
  display: flex;
}

.c-divided-bar div {
  width: 50%;
  color: #e8323d;
  text-align: center;
  font-size: 1.1rem;
  padding: 0.5rem 0.6rem;
}

@media print, screen and (min-width: 768px) {
  .c-divided-bar div {
    font-size: 1.5rem;
    padding: 0.8rem 0.6rem;
  }
}
.c-divided-bar div:nth-child(1) {
  border-right: 1px #e8323d solid;
}

.c-divided-bar::after {
  content: "or";
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: fit-content;
  padding: 0 0.4rem;
  aspect-ratio: 1/1;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e8323d;
  border-radius: 50px;
  border: 1px #e8323d solid;
  font-size: 1rem;
}

@media print, screen and (min-width: 768px) {
  .c-divided-bar::after {
    padding: 0 0.6rem 0.3rem;
    font-size: 1.6rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # heading
  - component

**************************************************************************************************** */
.c-heading {
  font-size: 1.8rem;
}
@media print, screen and (min-width: 768px) {
  .c-heading {
    font-size: 1.6rem;
  }
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # fade-in
  - component
  - 透明度の調整で浮かび上がる画像

**************************************************************************************************** */
.c-fade-in {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
}

.c-fade-in.in-view {
  opacity: 1;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # fade-up
  - component
  - js-inviewクラスと一緒に使う

**************************************************************************************************** */
.c-fade-up {
  position: relative;
  top: 2rem;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s, top 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.3s;
}

@media print, screen and (min-width: 768px) {
  .c-fade-up {
    transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s, top 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.3s;
  }
}
.c-fade-up.in-view {
  top: 0;
  opacity: 1;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # grid
  - component
  - tailwind参考

**************************************************************************************************** */
.c-grid {
  display: grid;
}

/* ### cols
---------------------------------------------------------------------- */
.c-grid.c-grid--cols_1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.c-grid.c-grid--cols_2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-grid.c-grid--cols_3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c-grid.c-grid--cols_4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.c-grid.c-grid--cols_5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.c-grid.c-grid--cols_6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.c-grid.c-grid--cols_7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.c-grid.c-grid--cols_8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.c-grid.c-grid--cols_9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.c-grid.c-grid--cols_10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.c-grid.c-grid--cols_11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.c-grid.c-grid--cols_12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* ### col-mq-min-md
---------------------------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--cols-mq-min-md_12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
/* ### gap
---------------------------------------------------------------------- */
.c-grid.c-grid--gap_1rem {
  row-gap: 1rem;
  column-gap: 1rem;
}

.c-grid.c-grid--gap_2rem {
  row-gap: 2rem;
  column-gap: 2rem;
}

.c-grid.c-grid--gap_3rem {
  row-gap: 3rem;
  column-gap: 3rem;
}

.c-grid.c-grid--gap_4rem {
  row-gap: 4rem;
  column-gap: 4rem;
}

.c-grid.c-grid--gap_5rem {
  row-gap: 5rem;
  column-gap: 5rem;
}

.c-grid.c-grid--gap_6rem {
  row-gap: 6rem;
  column-gap: 6rem;
}

.c-grid.c-grid--gap_7rem {
  row-gap: 7rem;
  column-gap: 7rem;
}

.c-grid.c-grid--gap_8rem {
  row-gap: 8rem;
  column-gap: 8rem;
}

.c-grid.c-grid--gap_9rem {
  row-gap: 9rem;
  column-gap: 9rem;
}

.c-grid.c-grid--gap_10rem {
  row-gap: 10rem;
  column-gap: 10rem;
}

.c-grid.c-grid--gap-x-1rem {
  column-gap: 1rem;
}

.c-grid.c-grid--gap-x-2rem {
  column-gap: 2rem;
}

.c-grid.c-grid--gap-x-3rem {
  column-gap: 3rem;
}

.c-grid.c-grid--gap-x-4rem {
  column-gap: 4rem;
}

.c-grid.c-grid--gap-x-5rem {
  column-gap: 5rem;
}

.c-grid.c-grid--gap-x-6rem {
  column-gap: 6rem;
}

.c-grid.c-grid--gap-x-7rem {
  column-gap: 7rem;
}

.c-grid.c-grid--gap-x-8rem {
  column-gap: 8rem;
}

.c-grid.c-grid--gap-x-9rem {
  column-gap: 9rem;
}

.c-grid.c-grid--gap-x-10rem {
  column-gap: 10rem;
}

.c-grid.c-grid--gap-y-1rem {
  row-gap: 1rem;
}

.c-grid.c-grid--gap-y-2rem {
  row-gap: 2rem;
}

.c-grid.c-grid--gap-y-3rem {
  row-gap: 3rem;
}

.c-grid.c-grid--gap-y-4rem {
  row-gap: 4rem;
}

.c-grid.c-grid--gap-y-5rem {
  row-gap: 5rem;
}

.c-grid.c-grid--gap-y-6rem {
  row-gap: 6rem;
}

.c-grid.c-grid--gap-y-7rem {
  row-gap: 7rem;
}

.c-grid.c-grid--gap-y-8rem {
  row-gap: 8rem;
}

.c-grid.c-grid--gap-y-9rem {
  row-gap: 9rem;
}

.c-grid.c-grid--gap-y-10rem {
  row-gap: 10rem;
}

/* ### gap-mq-min-md_6rem
---------------------------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_1rem {
    row-gap: 1rem;
    column-gap: 1rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_2rem {
    row-gap: 2rem;
    column-gap: 2rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_3rem {
    row-gap: 3rem;
    column-gap: 3rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_4rem {
    row-gap: 4rem;
    column-gap: 4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_5rem {
    row-gap: 5rem;
    column-gap: 5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_6rem {
    row-gap: 6rem;
    column-gap: 6rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_7rem {
    row-gap: 7rem;
    column-gap: 7rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_8rem {
    row-gap: 8rem;
    column-gap: 8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_9rem {
    row-gap: 9rem;
    column-gap: 9rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-mq-min-md_10rem {
    row-gap: 10rem;
    column-gap: 10rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_1rem {
    column-gap: 1rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_2rem {
    column-gap: 2rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_3rem {
    column-gap: 3rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_4rem {
    column-gap: 4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_5rem {
    column-gap: 5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_6rem {
    column-gap: 6rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_7rem {
    column-gap: 7rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_8rem {
    column-gap: 8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_9rem {
    column-gap: 9rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-x-mq-min-md_10rem {
    column-gap: 10rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_1rem {
    row-gap: 1rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_2rem {
    row-gap: 2rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_3rem {
    row-gap: 3rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_4rem {
    row-gap: 4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_5rem {
    row-gap: 5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_6rem {
    row-gap: 6rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_7rem {
    row-gap: 7rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_8rem {
    row-gap: 8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_9rem {
    row-gap: 9rem;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid.c-grid--gap-y-mq-min-md_10rem {
    row-gap: 10rem;
  }
}
/* ======================================================================

  item

====================================================================== */
/* ### col
---------------------------------------------------------------------- */
.c-grid__item.c-grid__item--col_auto {
  grid-column: auto;
}

.c-grid.c-grid--col_span-1 {
  grid-column: span 1/span 1;
}

.c-grid.c-grid--col_span-2 {
  grid-column: span 2/span 2;
}

.c-grid.c-grid--col_span-3 {
  grid-column: span 3/span 3;
}

.c-grid.c-grid--col_span-4 {
  grid-column: span 4/span 4;
}

.c-grid.c-grid--col_span-5 {
  grid-column: span 5/span 5;
}

.c-grid.c-grid--col_span-6 {
  grid-column: span 6/span 6;
}

.c-grid.c-grid--col_span-7 {
  grid-column: span 7/span 7;
}

.c-grid.c-grid--col_span-8 {
  grid-column: span 8/span 8;
}

.c-grid.c-grid--col_span-9 {
  grid-column: span 9/span 9;
}

.c-grid.c-grid--col_span-10 {
  grid-column: span 10/span 10;
}

.c-grid.c-grid--col_span-11 {
  grid-column: span 11/span 11;
}

.c-grid.c-grid--col_span-12 {
  grid-column: span 12/span 12;
}

/* ### col-mq-min-md
---------------------------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_auto {
    grid-column: auto;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-1 {
    grid-column: span 1/span 1;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-2 {
    grid-column: span 2/span 2;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-3 {
    grid-column: span 3/span 3;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-4 {
    grid-column: span 4/span 4;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-5 {
    grid-column: span 5/span 5;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-6 {
    grid-column: span 6/span 6;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-7 {
    grid-column: span 7/span 7;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-8 {
    grid-column: span 8/span 8;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-9 {
    grid-column: span 9/span 9;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-10 {
    grid-column: span 10/span 10;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-11 {
    grid-column: span 11/span 11;
  }
}
@media print, screen and (min-width: 768px) {
  .c-grid__item.c-grid__item--col-mq-min-md_span-12 {
    grid-column: span 12/span 12;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ======================================================================

  # js
  - components

====================================================================== */
.c-js-side-scroll {
  background-color: #1b1717;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-js-side-scroll-list-wrapper {
  position: relative;
  width: 100%;
  height: 700px;
}

.c-js-side-scroll-list {
  position: absolute;
  top: 60px;
  left: 0;
  display: flex;
  gap: 0 60px;
}

.c-js-side-scroll-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 420px;
  background-color: #eeebdd;
  color: #1b1717;
  font-size: 32px;
  font-weight: 700;
}

.c-js-side-scroll-item + .c-js-side-scroll-item {
  margin-left: 60px;
}

/* ****************************************************************************************************

  # layered-image
  - component
  スクロールして見えたらレイヤーが横にスッとずれる効果がある画像

**************************************************************************************************** */
.c-layered-image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.c-layered-image::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #fff;
  transition: transform 1s 0.2s cubic-bezier(0.48, 0.18, 0, 0.98);
}

.c-layered-image.is-inview::before {
  transform: translateX(100%);
}

/* ======================================================================

  ## item

====================================================================== */
.c-layered-image__item {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* ****************************************************************************************************

  # liquid-image
  - component

**************************************************************************************************** */
.c-liquid-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # list
  - component

**************************************************************************************************** */
.c-list {
  display: block;
  padding: 0 0 0 1.8rem;
  list-style-type: disc;
}

.c-list .c-list {
  list-style-type: circle;
}

.c-list .c-list .c-list {
  list-style-type: disc;
}

.c-list__item > .c-list {
  margin-top: 0.5rem;
}

.c-list.c-list--small {
  list-style-type: "・";
}

/* ======================================================================

  ## item

====================================================================== */
.c-list__item {
  position: relative;
  display: list-item;
  line-height: 1.5;
  list-style-type: inherit;
}

.c-list__item + .c-list__item {
  margin-top: 0.5rem;
}

.c-list.c-list--line-m .c-list__item + .c-list__item {
  margin-top: 0.8rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ======================================================================

  # notice-list
  - component

====================================================================== */
.c-notice-list {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  line-height: 1.4;
}

@media print, screen and (min-width: 768px) {
  .c-notice-list {
    margin-top: 1.4rem;
    font-size: 1.3rem;
  }
}
/* gap-top-s
---------------------------------------------------------------------- */
.c-notice-list.c-notice-list--gap_top-sm {
  margin-top: 1rem;
}

@media print, screen and (min-width: 768px) {
  .c-notice-list.c-notice-list--gap_top-sm {
    margin-top: 1rem;
  }
}
/* gap-top-l
---------------------------------------------------------------------- */
.c-notice-list.c-notice-list--gap_top-lg {
  margin-top: 2rem;
}

@media print, screen and (min-width: 768px) {
  .c-notice-list.c-notice-list--gap_top-lg {
    margin-top: 2rem;
  }
}
/* gap-top-0
---------------------------------------------------------------------- */
.c-notice-list.c-notice-list--gap_top-0 {
  margin-top: 0;
}

@media print, screen and (min-width: 768px) {
  .c-notice-list.c-notice-list--gap_top-0 {
    margin-top: 0;
  }
}
/* ======================================================================

  item

====================================================================== */
.c-notice-list__item {
  position: relative;
  padding-left: 1.2em;
  text-indent: -1.2em;
  list-style-type: none;
}
.c-notice-list__item::before {
  display: inline;
  margin-right: 0.2em;
  content: "※";
}

.c-notice-list__item + .c-notice-list__item {
  margin-top: 0.2em;
}

/* ****************************************************************************************************

  # ordered-list
  - component

**************************************************************************************************** */
.c-ordered-list {
  display: block;
  padding: 0 0 0 1.8rem;
  list-style-type: decimal;
}

.c-ordered-list__item > .c-ordered-list {
  margin-top: 0.5rem;
}

/* ======================================================================

  ## item

====================================================================== */
.c-ordered-list__item {
  position: relative;
  display: list-item;
  padding: 0 0 0 0.3rem;
  line-height: 1.5;
  list-style-type: inherit;
}

.c-ordered-list__item + .c-ordered-list__item {
  margin-top: 0.5rem;
}

/* ****************************************************************************************************

  # placeholder
  - component

**************************************************************************************************** */
.c-placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* ======================================================================

  spacer

====================================================================== */
.c-placeholder__spacer {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
}

/* ======================================================================

  画像

====================================================================== */
.c-placeholder__image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # row
  - component
  - bootstrap参考

**************************************************************************************************** */
.c-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

.c-row.c-row--type_indivisible {
  justify-content: space-between;
}

/* ======================================================================

  col

====================================================================== */
.c-row__col {
  width: 100%;
}

@media print, screen and (max-width: 767px) {
  .c-row__col + .c-row__col {
    margin-top: 1.5rem;
  }
}
/* タブレットからカラム化
---------------------------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .c-row__col.c-row__col--m_2 {
    width: 48.5%;
    margin-bottom: 3%;
    margin-left: 3%;
  }
  .c-row > .c-row__col.c-row__col--m_2:nth-child(2n+1) {
    margin-left: 0;
  }
  .c-row > .c-row__col.c-row__col--m_2:nth-child(2n+1):nth-last-child(-n+2),
  .c-row > .c-row__col.c-row__col--m_2:nth-child(2n+1):nth-last-child(-n+2) ~ .c-row__col.c-row__col--m_2 {
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 768px) {
  .c-row__col.c-row__col--m_3 {
    width: 31.333333%;
    margin-bottom: 3%;
    margin-left: 3%;
  }
  _:-ms-lang(x),
  .c-row__col.c-row__col--m_3 {
    width: calc(31.333333% - 0.01rem);
  }
  .c-row > .c-row__col.c-row__col--m_3:nth-child(3n+1) {
    margin-left: 0;
  }
  .c-row > .c-row__col.c-row__col--m_3:nth-child(3n+1):nth-last-child(-n+3),
  .c-row > .c-row__col.c-row__col--m_3:nth-child(3n+1):nth-last-child(-n+3) ~ .c-row__col.c-row__col--m_3 {
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 768px) {
  .c-row.c-row--type_indivisible .c-row__col {
    margin-left: 0 !important;
  }
}
@media print, screen and (min-width: 768px) {
  .c-row__col.c-row__col--m_4 {
    width: 22.7494373593%;
    margin-bottom: 3%;
    margin-left: 3%;
  }
  _:-ms-lang(x),
  .c-row__col.c-row__col--m_4 {
    width: calc(22.7494373593% - 0.01rem);
  }
  .c-row > .c-row__col.c-row__col--m_4:nth-child(4n+1) {
    margin-left: 0;
  }
  .c-row > .c-row__col.c-row__col--m_4:nth-child(4n+1):nth-last-child(-n+4),
  .c-row > .c-row__col.c-row__col--m_4:nth-child(4n+1):nth-last-child(-n+4) ~ .c-row__col.c-row__col--m_4 {
    margin-bottom: 0;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # sentnece
  - component

**************************************************************************************************** */
.c-sentence {
  position: relative;
}

/* ======================================================================

  ## item

====================================================================== */
.c-sentence__item + .c-sentence__item {
  margin-top: 1rem;
}

@media print, screen and (min-width: 768px) {
  .c-sentence__item + .c-sentence__item {
    margin-top: 1.4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # title
  - compnent

**************************************************************************************************** */
.c-title {
  width: fit-content;
  margin: 0 auto 2.6rem;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .c-title {
    margin: 0 auto 6.2rem;
  }
}
.c-title__img {
  height: 3.6rem;
  display: block;
  margin: 0 auto 0.3rem;
}

@media print, screen and (min-width: 768px) {
  .c-title__img {
    height: 5rem;
  }
}
.c-title__eng {
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 3.2rem;
  text-align: center;
  letter-spacing: 1px;
}

@media print, screen and (min-width: 768px) {
  .c-title__eng {
    font-size: 5rem;
  }
}
.c-title__jp {
  display: block;
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .c-title__jp {
    font-size: 2.2rem;
    letter-spacing: 2px;
  }
}
/* --------------------------------------------------
  派生
---------------------------------------------------- */
.c-title.c-title--white {
  color: #fff;
}

.c-title.c-title--page {
  margin-bottom: 0;
  z-index: 1;
}
.c-title.c-title--page::before {
  content: "";
  display: block;
  width: 12rem;
  height: 12rem;
  border-radius: 50rem;
  background-color: white;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -30%);
  z-index: -1;
}

@media print, screen and (min-width: 768px) {
  .c-title.c-title--page::before {
    width: 15rem;
    height: 15rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # title-wave
  - components

**************************************************************************************************** */
.c-title-wave {
  position: relative;
  background: url("../images/parts/deco_border-wave.svg") repeat-x left center/auto 40%;
  margin-bottom: 2.4rem;
}

@media print, screen and (min-width: 768px) {
  .c-title-wave {
    margin-bottom: 6.2rem;
  }
}
.c-title-wave span {
  font-size: 2.2rem;
  width: fit-content;
  background-color: white;
  padding-right: 1.6rem;
  padding-left: 6vw;
}

@media print, screen and (min-width: 768px) {
  .c-title-wave span {
    font-size: 3.6rem;
    padding-right: 2.2rem;
    padding-left: 8.958333335vw;
  }
}
.c-title-wave::before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 3.3333333333vw;
  background-color: var(--primary-color);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media print, screen and (min-width: 768px) {
  .c-title-wave::before {
    width: 4.4791666675vw;
    height: auto;
    aspect-ratio: 1/1;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # title-image 画像つきタイトル
  - component

**************************************************************************************************** */
.c-title-image {
  position: relative;
  width: 100%;
  margin-bottom: 6rem;
}

@media print, screen and (min-width: 768px) {
  .c-title-image {
    margin-bottom: 8.5rem;
  }
}
/* --------------------------------------------------------
  サムネイル画像
-------------------------------------------------------- */
.c-title-image__image-box {
  width: 100%;
  aspect-ratio: 6/5;
  overflow: hidden;
}
.c-title-image__image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media print, screen and (min-width: 768px) {
  .c-title-image__image-box {
    width: 85%;
    aspect-ratio: 622/235;
    margin-left: auto;
    border-radius: 10px 0 0 10px;
  }
}
/* --------------------------------------------------------
  タイトル
-------------------------------------------------------- */
.c-title-image__title {
  display: block;
  position: absolute;
  width: 60%;
  padding-top: 2.8rem;
  left: 0;
  bottom: -1px;
  background-color: white;
  border-radius: 0 10px 0 0;
  text-align: center;
  font-size: 2.8rem;
  letter-spacing: 2px;
}

@media print, screen and (min-width: 768px) {
  .c-title-image__title {
    width: 38%;
    padding-top: 5rem;
    font-size: 3.8rem;
  }
}
.c-title-image__title span {
  display: block;
  position: relative;
  padding: 0.4rem 0;
}
.c-title-image__title span::before {
  content: "";
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  background-color: var(--primary-color);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media print, screen and (min-width: 768px) {
  .c-title-image__title span {
    display: block;
    position: relative;
    padding: 0.8rem 0;
  }
}
/* --------------------------------------------------------
  装飾
-------------------------------------------------------- */
.c-title-image::before {
  content: "";
  position: absolute;
  display: block;
  width: 10%;
  aspect-ratio: 44/183;
  background: url("../images/parts/deco_dot-bar-v.svg") no-repeat center/contain;
  top: 0;
  right: 0;
  transform: translate(0, -25%);
}

@media print, screen and (min-width: 768px) {
  .c-title-image::before {
    max-width: 6.5rem;
  }
}
.c-title-image::after {
  content: "";
  position: absolute;
  display: block;
  width: 32%;
  aspect-ratio: 115/56;
  background: url("../images/parts/deco_giza-tri.svg") no-repeat center/contain;
  bottom: -5%;
  left: 44%;
  transform: translate(0, 0%);
}

@media print, screen and (min-width: 768px) {
  .c-title-image::after {
    width: 18%;
    max-width: 30rem;
    bottom: initial;
    top: 18%;
    left: 6%;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # title-lead
  - components

**************************************************************************************************** */
.c-title-lead {
  position: relative;
  z-index: 1;
}
.c-title-lead span {
  font-size: 1.9rem;
  font-weight: 600;
  padding-right: 1.6rem;
  width: fit-content;
  background-color: white;
}

@media print, screen and (min-width: 768px) {
  .c-title-lead span {
    font-size: 2.8rem;
    padding-right: 2rem;
  }
}
.c-title-lead.c-title-lead--eng span {
  font-family: "Delicious Handrawn", cursive;
  font-size: 2.8rem;
  line-height: 1.8;
}

@media print, screen and (min-width: 768px) {
  .c-title-lead.c-title-lead--eng span {
    font-size: 4rem;
    line-height: 1.8;
  }
}
.c-title-lead::before {
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 3px dotted #333;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  transform: translateY(-1px);
}

.c-title-lead::after {
  content: "";
  height: 1.8rem;
  width: auto;
  aspect-ratio: 17/11;
  background: #fff url("../images/parts/arrow-tri.svg") no-repeat center/contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # text-box
  - component

**************************************************************************************************** */
.c-text-box {
  display: block;
  padding: 1.3rem 4%;
  background-color: #f1f3f6;
}

/* ======================================================================

  ## project

====================================================================== */
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # article-list
  - project

**************************************************************************************************** */
.p-article-list {
  position: relative;
  display: block;
}

/* ======================================================================

  ## item

====================================================================== */
.p-article-list__item:nth-child(1) {
  border-top: 1px dashed gray;
}

.p-article-list__item {
  position: relative;
  display: block;
  padding: 1.4rem;
  border-bottom: 1px dashed gray;
}

@media print, screen and (min-width: 768px) {
  .p-article-list__item {
    padding: 2.4rem 2.6rem;
  }
}
/* ======================================================================

  ## inner

====================================================================== */
.p-article-list__inner {
  display: block;
}

/* ======================================================================

  ## head

====================================================================== */
.p-article-list__head {
  position: relative;
}

/* ======================================================================

  ## date

====================================================================== */
.p-article-list__date {
  position: relative;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #333;
}

@media print, screen and (min-width: 768px) {
  .p-article-list__date {
    font-size: 1.2rem;
  }
}
/* ======================================================================

  ## title

====================================================================== */
.p-article-list__title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
}

.p-article-list__date + .p-article-list__title {
  margin-top: 0.5rem;
}

@media print, screen and (min-width: 768px) {
  .p-article-list__title {
    font-size: 1.6rem;
  }
}
/* ======================================================================

  ## body

====================================================================== */
.p-article-list__head + .p-article-list__body {
  margin-top: 1.4rem;
}

/* ======================================================================

  txt

====================================================================== */
.p-article-list__txt {
  font-size: 1.4rem;
  color: #333;
}

@media print, screen and (min-width: 768px) {
  .p-article-list__txt {
    font-size: 1.4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # p-alternate-tile
  - project

**************************************************************************************************** */
.p-alternate-tile {
  display: flex;
  flex-direction: column;
  row-gap: 4.5rem;
}

@media print, screen and (min-width: 768px) {
  .p-alternate-tile {
    row-gap: 6rem;
  }
}
/* --------------------------------------------------------
  アイテム
-------------------------------------------------------- */
.p-alternate-tile__item {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .p-alternate-tile__item {
    flex-direction: row;
    align-items: center;
  }
  .p-alternate-tile__item:nth-child(2n) {
    flex-direction: row-reverse;
  }
}
/* --------------------------------------------------------
  画像
-------------------------------------------------------- */
.p-alternate-tile__item-image {
  width: 95%;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  aspect-ratio: 407/235;
}
.p-alternate-tile__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media print, screen and (min-width: 768px) {
  .p-alternate-tile__item-image {
    width: 56%;
  }
}
.p-alternate-tile__item:nth-child(2n) .p-alternate-tile__item-image {
  margin-left: auto;
  border-radius: 10px 0 0 10px;
}

@media print, screen and (min-width: 768px) {
  .p-alternate-tile__item:nth-child(2n) .p-alternate-tile__item-image {
    margin-left: initial;
  }
}
/* --------------------------------------------------------
  内容
-------------------------------------------------------- */
.p-alternate-tile__item-cont {
  padding: 0 5%;
}

@media print, screen and (min-width: 768px) {
  .p-alternate-tile__item-cont {
    width: 44%;
    padding: 0 5%;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # banner-list
  - project

**************************************************************************************************** */
.p-banner-list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
}

@media print, screen and (min-width: 768px) {
  .p-banner-list {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 6%;
  }
}
@media print, screen and (min-width: 768px) {
  .p-banner-list li:first-child {
    grid-column: 1/3;
    grid-row: 1/3;
  }
}
.p-banner-list li a {
  display: block;
}

.p-banner-list li a img {
  width: 100%;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # basic-info
  - project

**************************************************************************************************** */
.p-basic-info {
  display: flex;
  flex-direction: column;
  position: relative;
  row-gap: 3.2rem;
  margin-bottom: 3.5rem;
}

@media print, screen and (min-width: 768px) {
  .p-basic-info {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 1fr 1fr;
    column-gap: 8%;
    margin-bottom: 6.8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .p-basic-info::before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background-color: #bfc8d6;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-1px);
  }
}
/* ======================================================================
  ## list
====================================================================== */
.p-basic-info__list {
  display: flex;
  flex-direction: column;
  position: relative;
  row-gap: 3.2rem;
}

@media print, screen and (min-width: 768px) {
  .p-basic-info__list {
    row-gap: 3.2rem;
  }
}
/* ======================================================================
  ## item divider
====================================================================== */
.p-basic-info li {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .p-basic-info li {
    grid-column: 1/2;
  }
  .p-basic-info .pc-break-point ~ li {
    grid-column: 2/3;
  }
}
/* ======================================================================
  ## dl item
====================================================================== */
.p-basic-info__dl-item {
  position: relative;
}

.p-basic-info__dl-item dt {
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 0.8rem;
}
.p-basic-info__dl-item dt::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  background: url("../images/parts/check.svg") no-repeat center/contain;
}

@media print, screen and (min-width: 768px) {
  .p-basic-info__dl-item dt {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .p-basic-info__dl-item dt::before {
    width: 2.4rem;
    height: 2.4rem;
  }
}
.p-basic-info__dl-item dd {
  background-color: #f1f3f6;
  padding: 1.2rem 4%;
  font-size: 1.4rem;
  border-radius: 10px;
}

@media print, screen and (min-width: 768px) {
  .p-basic-info__dl-item dd {
    padding: 1.6rem 6%;
    font-size: 1.6rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # card
  - project

**************************************************************************************************** */
.p-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

/* ======================================================================

  ## divider

====================================================================== */
.p-card__divider {
  width: 100%;
}

@media print, screen and (max-width: 767px) {
  .p-card__divider + .p-card__divider {
    margin-top: 9%;
  }
}
@media print, screen and (min-width: 768px) {
  .p-card__divider {
    width: 31%;
    margin-bottom: 3.5%;
    margin-left: 3.5%;
  }
  .p-card > .p-card__divider:nth-child(3n+1) {
    margin-left: 0;
  }
  .p-card > .p-card__divider:nth-child(3n+1):nth-last-child(-n+3),
  .p-card > .p-card__divider:nth-child(3n+1):nth-last-child(-n+3) ~ .p-card__divider {
    margin-bottom: 0;
  }
}
/* ======================================================================

  ## item

====================================================================== */
.p-card__item {
  position: relative;
  display: block;
}

/* ======================================================================

  ## head

====================================================================== */
/* ======================================================================

  ## image

====================================================================== */
.p-card__image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.p-card__image::after {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 66.75%;
  content: "";
}
.p-card__image > img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 100%;
  transform: translate(-50%, -50%);
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;";
}

/* ### img
---------------------------------------------------------------------- */
/* ======================================================================

  ## body

====================================================================== */
.p-card__head + .p-card__body {
  padding-top: 1rem;
}

@media print, screen and (min-width: 768px) {
  .p-card__body {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }
  .p-card__head + .p-card__body {
    padding-top: 1.8rem;
  }
}
/* ======================================================================

  ## date

====================================================================== */
.p-card__date {
  position: relative;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #333;
}

@media print, screen and (min-width: 768px) {
  .p-card__date {
    font-size: 1.2rem;
  }
}
/* ======================================================================

  ## title

====================================================================== */
.p-card__title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
}

.p-card__date + .p-card__title {
  margin-top: 0.5rem;
}

@media print, screen and (min-width: 768px) {
  .p-card__title {
    font-size: 1.6rem;
  }
}
/* ======================================================================

  ## txt

====================================================================== */
.p-card__txt {
  font-size: 1.4rem;
  line-height: 1.5;
  color: #333;
}

.p-card__title + .p-card__txt {
  margin-top: 0.8rem;
}

@media print, screen and (min-width: 768px) {
  .p-card__txt {
    font-size: 1.4rem;
  }
  .p-card__title + .p-card__txt {
    margin-top: 0.9rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # copy
  - project

**************************************************************************************************** */
.p-copy {
  margin-top: 1rem;
  font-size: 1.2rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .p-copy {
    margin-top: 3rem;
    font-size: 1.4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # consept-item
  - project

**************************************************************************************************** */
/* --------------------------------------------------------
  アイテム
-------------------------------------------------------- */
.p-consept-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 1rem;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item {
    column-gap: 5%;
    flex-direction: row;
    justify-content: space-between;
  }
  .p-consept-item:nth-child(2n) {
    flex-direction: row-reverse;
  }
}
.p-consept-item + .p-consept-item {
  margin-top: 5.5rem;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item + .p-consept-item {
    margin-top: 11rem;
  }
}
/* --------------------------------------------------------
  スライダー
-------------------------------------------------------- */
.p-consept-item__slider {
  width: 100%;
  position: relative;
  order: 2;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__slider {
    width: 58%;
    order: initial;
  }
}
.p-consept-item__slider .swiper {
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 10px;
  padding: 1.5rem;
}

.p-consept-item__slider .swiper-slide {
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 135/92;
}
.p-consept-item__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-consept-item__slider__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__slider__pagination {
    padding-top: 1.4rem;
  }
}
.p-consept-item__slider__pagination.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url("../images/parts/bullet-star.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 14px;
  height: 14px;
}

.p-consept-item__slider__prev,
.p-consept-item__slider__next {
  position: absolute;
  top: 50%;
  width: 4rem;
  height: 4rem;
  z-index: 1;
  background-color: #fff;
  border-radius: 50rem;
  border: 2px solid #333;
  background-image: url("../images/parts/arrow.svg");
  background-size: 40% auto;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__slider__prev,
  .p-consept-item__slider__next {
    width: 6.5rem;
    height: 6.5rem;
  }
}
.p-consept-item__slider__prev {
  left: 0%;
  transform: translate(-30%, -70%) rotate(-180deg);
}

.p-consept-item__slider__next {
  right: 0%;
  transform: translate(30%, -70%);
}

/* --------------------------------------------------------
  PC 右辺ラッパー
-------------------------------------------------------- */
.p-consept-item__pc-right {
  width: 100%;
  display: contents;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__pc-right {
    width: 38%;
    display: block;
    order: initial;
  }
}
/* --------------------------------------------------------
  ヘッドテキスト
-------------------------------------------------------- */
.p-consept-item__head {
  width: 100%;
  aspect-ratio: 221/47;
  background-image: url("../images/parts/bg_fukidashi-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  order: 1;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__head {
    order: initial;
  }
}
@media print, screen and (min-width: 768px) {
  .p-consept-item:nth-child(2n) .p-consept-item__head {
    background-image: url("../images/parts/bg_fukidashi-left.svg");
  }
}
.p-consept-item__head p {
  transform: translateY(-15%);
  font-family: "Delicious Handrawn", cursive;
  font-size: 2.8rem;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__head p {
    font-size: 3.8rem;
  }
}
/* --------------------------------------------------------
  テキストブロック
-------------------------------------------------------- */
.p-consept-item__text-box {
  order: 3;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__text-box {
    order: initial;
  }
}
.p-consept-item__text-box h4 {
  font-size: 1.9rem;
  margin: 0.9rem 0 1.4rem;
  line-height: 1.6;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__text-box h4 {
    font-size: 2.4rem;
    margin: 1.8rem 0 2rem;
    text-align: left;
    line-height: 1.7;
  }
}
.p-consept-item__text-box div.c-sentence {
  margin-bottom: 2rem;
}

@media print, screen and (min-width: 768px) {
  .p-consept-item__text-box div.c-sentence {
    margin-bottom: 3rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # crumbs パンくずリスト
  - project

**************************************************************************************************** */
.p-crumbs {
  width: 100%;
  display: flex;
  border-bottom: 2px solid #bfc8d6;
  padding-bottom: 1rem;
  column-gap: 0.6rem;
}

.p-crumbs__item {
  display: block;
  position: relative;
  font-size: 1.2rem;
  color: #333;
  font-weight: bold;
}

@media print, screen and (min-width: 768px) {
  .p-crumbs__item {
    font-size: 1.5rem;
  }
}
/* -------------------------------------------------- 
  HOME
-------------------------------------------------- */
.p-crumbs__item:nth-child(1) {
  display: flex;
  align-items: center;
  column-gap: 0.4rem;
}
.p-crumbs__item:nth-child(1)::before {
  content: "";
  display: block;
  height: 1.4rem;
  aspect-ratio: 6/5;
  background: url("../images/parts/ico_home.svg") no-repeat center/contain;
}

@media print, screen and (min-width: 768px) {
  .p-crumbs__item:nth-child(1) {
    column-gap: 0.8rem;
  }
  .p-crumbs__item:nth-child(1)::before {
    height: 1.7rem;
  }
}
/* -------------------------------------------------- 
  HOME以下のアイテム
-------------------------------------------------- */
.p-crumbs__item + .p-crumbs__item {
  display: flex;
  align-items: center;
  column-gap: 0.4rem;
}
.p-crumbs__item + .p-crumbs__item::before {
  content: "▶︎";
  display: block;
  font-size: 0.9rem;
}

@media print, screen and (min-width: 768px) {
  .p-crumbs__item + .p-crumbs__item {
    column-gap: 0.8rem;
  }
  .p-crumbs__item + .p-crumbs__item::before {
    font-size: 1rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # p-common-cont
  - proect

**************************************************************************************************** */
.p-common-cont {
  position: relative;
  border: 20px solid transparent;
  border-image: url("../images/parts/deco_kakko.svg") 20;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.p-common-cont.p-common-cont--white {
  border-image: url("../images/parts/deco_kakko-white.svg") 20;
  color: white;
}

.p-common-cont__list {
  display: flex;
  flex-direction: column;
  row-gap: 0.2rem;
  align-items: center;
}

.p-common-cont__list li {
  display: flex;
  position: relative;
  align-items: baseline;
  column-gap: 0.4rem;
  vertical-align: middle;
  text-align: center;
}
.p-common-cont__list li::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/parts/check.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  flex-shrink: 0;
  transform: translateY(2px);
}

.p-common-cont.p-common-cont--white .p-common-cont__list li::before {
  background-image: url("../images/parts/check-white.svg");
}

.p-common-cont__note {
  text-align: center;
  margin-top: 2rem;
}

.p-common-cont__mark {
  display: block;
  width: 35%;
  position: absolute;
  top: -42px;
  right: -35px;
}

@media print, screen and (min-width: 768px) {
  .p-common-cont__mark {
    max-width: 160px;
    top: -5rem;
    right: -4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # dl-list
  - project

**************************************************************************************************** */
.p-dl-list {
  display: block;
  margin-bottom: 3.5rem;
}

/* --------------------------------------------------------
  dlアイテム
-------------------------------------------------------- */
.p-dl-list__dl {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .p-dl-list__dl {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
}
.p-dl-list__dl dt {
  border-top: 2px solid #333;
  padding: 1.2rem 0 0.8rem;
  font-size: 1.7rem;
}

@media print, screen and (min-width: 768px) {
  .p-dl-list__dl dt {
    border-top: 2px solid #333;
    padding: 2.1rem 2rem;
  }
}
.p-dl-list__dl dd {
  border-top: 1px solid var(--primary-color);
  padding: 1.2rem 0 1.4rem;
}

@media print, screen and (min-width: 768px) {
  .p-dl-list__dl dd {
    border-top: 2px solid var(--primary-color);
    padding: 2.1rem 2rem;
  }
}
.p-dl-list__dl:last-of-type dd {
  border-bottom: 2px solid #333;
}

@media print, screen and (min-width: 768px) {
  .p-dl-list__dl:last-of-type dt {
    border-bottom: 2px solid #333;
  }
  .p-dl-list__dl:last-of-type dd {
    border-bottom: 2px solid var(--primary-color);
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # facility-sign
  - project

**************************************************************************************************** */
.p-facility-sign {
  margin-top: 1.8rem;
}

@media print, screen and (min-width: 768px) {
  .p-facility-sign {
    margin-top: 7rem;
  }
}
/* --------------------------------------------------------
  Head
-------------------------------------------------------- */
.p-facility-sign__head {
  border-bottom: 2px solid #333;
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 2.8rem;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  letter-spacing: 1px;
}
.p-facility-sign__head span {
  flex-grow: 1;
}
.p-facility-sign__head img {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
}

@media print, screen and (min-width: 768px) {
  .p-facility-sign__head {
    font-size: 3.6rem;
    margin-bottom: 3.6rem;
  }
  .p-facility-sign__head img {
    width: 5.6rem;
    height: 5.6rem;
  }
}
/* --------------------------------------------------------
  List
-------------------------------------------------------- */
.p-facility-sign__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4%;
  row-gap: 3vw;
}

@media print, screen and (min-width: 768px) {
  .p-facility-sign__list {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # footer-info
  - project

**************************************************************************************************** */
.p-footer-info {
  position: relative;
  margin-bottom: 3rem;
}

@media print, screen and (min-width: 768px) {
  .p-footer-info {
    margin-bottom: 4rem;
  }
}
/* --------------------------------------------------------
  ヘッダータイトル
-------------------------------------------------------- */
.p-footer-info__head {
  display: block;
  margin-bottom: 2rem;
}

@media print, screen and (min-width: 768px) {
  .p-footer-info__head {
    display: flex;
    align-items: baseline;
    column-gap: 2rem;
    margin-bottom: 3.5rem;
  }
}
.p-footer-info__head img {
  display: block;
  height: 4rem;
  width: auto;
  margin-bottom: 0.8rem;
}

@media print, screen and (min-width: 768px) {
  .p-footer-info__head img {
    height: 3.6rem;
    margin-bottom: initial;
  }
}
.p-footer-info__head span {
  display: block;
  color: white;
  font-size: 1.6rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .p-footer-info__head span {
    font-size: 1.8rem;
  }
}
/* --------------------------------------------------------
  インフォメーションテーブル (dl)
-------------------------------------------------------- */
.p-footer-info__list {
  display: grid;
  align-items: baseline;
  column-gap: 4%;
  color: white;
  grid-template-columns: 6.2rem 1fr;
}

.p-footer-info__list dt {
  white-space: nowrap;
}

.p-footer-info__list dd {
  margin-bottom: 0.2rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # footer-nav
  - project

**************************************************************************************************** */
.p-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
  column-gap: 5%;
  row-gap: 0.2rem;
}

@media print, screen and (min-width: 768px) {
  .p-footer-nav {
    justify-content: space-between;
    margin-bottom: 3.5rem;
    column-gap: 4rem;
  }
}
.p-footer-nav__item {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .p-footer-nav__item + .p-footer-nav__item::after {
    content: "";
    width: 1px;
    height: 45%;
    position: absolute;
    top: 50%;
    left: -2rem;
    transform: translateY(-50%);
    background-color: white;
  }
}
.p-footer-nav__item a {
  color: white;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # footer-sns
  - project

**************************************************************************************************** */
.p-footer-sns {
  color: white;
  margin-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.6rem;
  column-gap: 1.6rem;
}

@media print, screen and (min-width: 768px) {
  .p-footer-sns {
    column-gap: 2.5rem;
  }
}
.p-footer-sns p {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .p-footer-sns p {
    width: fit-content;
  }
}
.p-footer-sns a {
  display: flex;
  width: fit-content;
  align-items: center;
  column-gap: 0.7rem;
  color: white;
}
.p-footer-sns a img {
  display: block;
  width: 2.8rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # fixed-nav
  - project

**************************************************************************************************** */
.p-fixed-nav {
  position: fixed;
  width: 100vw;
  bottom: 0;
  left: 0;
  background-color: white;
  border-top: 1px solid #b1b1b1;
  padding: 1rem 4vw 0.5rem;
  z-index: 5;
}

@media print, screen and (min-width: 768px) {
  .p-fixed-nav {
    display: none;
  }
}
.p-fixed-nav ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.p-fixed-nav ul li {
  text-align: center;
}

.p-fixed-nav ul li a {
  display: block;
  color: #484848;
  font-size: 1rem;
  letter-spacing: -1px;
}

.p-fixed-nav ul li a img {
  display: block;
  width: auto;
  height: 2.5rem;
  margin: 0 auto 0.3rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # menu-accordion
  - project

**************************************************************************************************** */
.p-features {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4.5rem;
  margin-bottom: 4rem;
}

@media print, screen and (min-width: 768px) {
  .p-features {
    grid-template-columns: 1fr 1fr;
    column-gap: 5%;
    row-gap: 7.5rem;
    margin-bottom: 6rem;
  }
}
/* ======================================================================
  ## アイテム
====================================================================== */
.p-features__item {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .p-features__item {
    display: flex;
    flex-direction: column;
  }
}
/* ======================================================================
  ## アイテム 上部
====================================================================== */
.p-features__item-head {
  display: flex;
  justify-content: space-between;
  column-gap: 4%;
  margin-bottom: 2rem;
}

@media print, screen and (min-width: 768px) {
  .p-features__item-head {
    column-gap: 4%;
    margin-bottom: 3rem;
  }
}
.p-features__item-head__thumb {
  width: 36%;
  background-color: var(--primary-color);
  border: 8px solid var(--primary-color);
  border-radius: 50rem;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.p-features__item-head__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media print, screen and (min-width: 768px) {
  .p-features__item-head__thumb {
    width: 42%;
    border: 10px solid var(--primary-color);
  }
}
.p-features__item-head__title {
  width: 60%;
}
.p-features__item-head__title p:first-child {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  line-height: 1.4;
  font-size: 1.7rem;
  padding: 0 12% 1rem 0;
  background-repeat: no-repeat;
  background-size: 12% auto;
  background-position: bottom 1.6rem right 1%;
}
.p-features__item-head__title p:first-child span {
  display: block;
}
.p-features__item-head__title p + P {
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: bold;
  padding-top: 1rem;
  border-top: 2px solid #333;
}

@media print, screen and (min-width: 768px) {
  .p-features__item-head__title {
    width: 57%;
  }
  .p-features__item-head__title p:first-child {
    font-size: 2.3rem;
    padding: 0 12% 1.2rem 0;
    background-position: bottom 1.6rem right 1%;
  }
  .p-features__item-head__title p + P {
    font-size: 2.8rem;
    padding-top: 1.2rem;
  }
}
.p-features__item:nth-child(1) .p-features__item-head__title p:first-child {
  background-image: url("../images/page/guidance/txt_num-1.svg");
}

.p-features__item:nth-child(2) .p-features__item-head__title p:first-child {
  background-image: url("../images/page/guidance/txt_num-2.svg");
}

.p-features__item:nth-child(3) .p-features__item-head__title p:first-child {
  background-image: url("../images/page/guidance/txt_num-3.svg");
}

.p-features__item:nth-child(4) .p-features__item-head__title p:first-child {
  background-image: url("../images/page/guidance/txt_num-4.svg");
}

.p-features__item:nth-child(5) .p-features__item-head__title p:first-child {
  background-image: url("../images/page/guidance/txt_num-5.svg");
}

.p-features__item:nth-child(6) .p-features__item-head__title p:first-child {
  background-image: url("../images/page/guidance/txt_num-6.svg");
}

.p-features__item:nth-child(7) .p-features__item-head__title p:first-child {
  background-image: url("../images/page/guidance/txt_num-7.svg");
}

.p-features__item:nth-child(8) .p-features__item-head__title p:first-child {
  background-image: url("../images/page/guidance/txt_num-8.svg");
}

/* ======================================================================
  ## アイテム テキスト
====================================================================== */
.p-features__item-text {
  background-color: #f1f3f6;
  padding: 1.8rem 4%;
}

@media print, screen and (min-width: 768px) {
  .p-features__item-text {
    padding: 2.2rem 5.5%;
    flex-grow: 1;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # gnav
  - project

**************************************************************************************************** */
.p-gnav {
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 8rem 0 0;
  overflow-y: auto;
  font-size: 1.4rem;
  background-color: var(--primary-color);
  transition: transform 0.1s;
  transform: translateX(100%);
  -webkit-overflow-scrolling: touch;
  z-index: 253;
}

.p-gnav.is-active {
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
  transform: translateX(0);
}

@media print, screen and (min-width: 768px) {
  .p-gnav {
    position: relative;
    width: auto;
    padding: 0;
    overflow: visible;
    background-color: transparent;
    transform: translateX(0);
    background-image: none;
  }
}
/* ======================================================================

  ## list

====================================================================== */
.p-gnav__list {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;
  padding: 8rem 4vw 0;
  background-image: url("../images/parts/deco_nav-top.svg"), linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgb(255, 255, 255) 25%, rgb(255, 255, 255) 100%);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top left;
  height: 100%;
}

@media print, screen and (min-width: 768px) {
  .p-gnav__list {
    background-image: none;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 1.6rem;
    height: 100%;
    background-color: initial;
    padding: 0 2rem 0 0;
  }
}
/* ======================================================================

  ## divider

====================================================================== */
.p-gnav__divider {
  position: relative;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .p-gnav__divider + .p-gnav__divider::before {
    content: "/";
    position: absolute;
    top: 50%;
    left: -0.9rem;
    transform: translateY(-50%);
    color: #333;
    font-size: 1.6rem;
    font-weight: 900;
  }
}
/* ======================================================================

  ## item

====================================================================== */
.p-gnav__item {
  position: relative;
  display: block;
  padding: 0.3rem 1rem 0.3rem 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .p-gnav__item {
    padding: 0.4rem 0.8rem;
    font-size: 1.6rem;
    color: #000;
    text-align: initial;
  }
}
.p-gnav__item__en {
  font-family: "Roboto", sans-serif;
  font-size: 2.4rem;
  line-height: 1.1;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .p-gnav__item__en {
    display: none;
  }
}
/* ======================================================================

  txt

====================================================================== */
.p-gnav__txt {
  line-height: 1.4;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # google-map
  - project

**************************************************************************************************** */
.p-google-map {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 100%;
}
.p-google-map iframe {
  width: 100%;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # hamburger
  - project

**************************************************************************************************** */
.p-hamburger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  height: calc(100% + 1.5rem);
  padding: 0;
  cursor: pointer;
  background-color: #333;
  z-index: 254;
}

@media print, screen and (min-width: 768px) {
  .p-hamburger {
    display: none;
  }
}
/* ======================================================================

  ## container

====================================================================== */
.p-hamburger__container {
  position: relative;
  display: block;
  width: 2.7rem;
  height: 2.3rem;
  margin: auto;
}

@media print, screen and (min-width: 768px) {
  .p-hamburger__container {
    width: 3rem;
    height: 2.5rem;
  }
}
/* ======================================================================

  ## item

====================================================================== */
.p-hamburger__item {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  margin: auto;
  background-color: white;
  transition: 0.3s ease;
}

.p-hamburger__container > :nth-child(1) {
  top: 0;
}

.p-hamburger__container > :nth-child(2) {
  top: 0;
  bottom: 0;
  width: 100%;
}

.p-hamburger__container > :nth-child(3) {
  bottom: 0;
}

.p-hamburger.is-active .p-hamburger__container > :nth-child(1) {
  top: 48%;
  transform: rotate(45deg);
}

.p-hamburger.is-active .p-hamburger__container > :nth-child(2) {
  opacity: 0;
}

.p-hamburger.is-active .p-hamburger__container > :nth-child(3) {
  bottom: 47%;
  transform: rotate(-45deg);
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # header-reserve
  - project

**************************************************************************************************** */
.p-header-reserve {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
  background-color: #e8323d;
  padding: 0 1rem 0 1.6rem;
  height: calc(100% + 1.5rem);
  border-radius: 0 0 0 10px;
}

@media print, screen and (min-width: 768px) {
  .p-header-reserve {
    padding: 0 2.6rem 0 3.2rem;
    height: calc(100% + 1.8rem);
  }
}
.p-header-reserve__text {
  color: white;
  line-height: 1.4;
  font-size: 1.2rem;
  font-weight: bold;
}

@media print, screen and (min-width: 768px) {
  .p-header-reserve__text {
    line-height: 1.6;
    font-size: 1.4rem;
  }
}
.p-header-reserve__text span {
  font-family: "Roboto", sans-serif;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .p-header-reserve__text span {
    font-size: 1.7rem;
    letter-spacing: 1px;
  }
}
.p-header-reserve__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  background-color: white;
  border-radius: 50rem;
}
.p-header-reserve__icon img {
  width: 70%;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .p-header-reserve__icon {
    width: 1.8rem;
    height: 1.8rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # headline-news
  - project

**************************************************************************************************** */
.p-headline-news {
  position: relative;
  width: 90%;
  max-width: 1000px;
  background-color: white;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  border-radius: 0 50rem 50rem 0;
  padding: 0.8rem 4vw;
  z-index: 5;
  margin-top: -1rem;
}

@media print, screen and (min-width: 768px) {
  .p-headline-news {
    padding: 2.3rem 2rem;
    margin-top: -2rem;
  }
}
/* ======================================================================
  ## リスト
====================================================================== */
.p-headline-news__list {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

/* ======================================================================
  ## アイテム
====================================================================== */
.p-headline-news__list li {
  position: relative;
}

.p-headline-news__list li a {
  display: flex;
  column-gap: 1rem;
  align-items: center;
}

@media print, screen and (min-width: 768px) {
  .p-headline-news__list li a {
    column-gap: 1.8rem;
  }
}
.p-headline-news__list__cate {
  width: fit-content;
  padding: 0.2rem 0.8rem;
  border-radius: 6px;
  background-color: #333;
  color: white;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

@media print, screen and (min-width: 768px) {
  .p-headline-news__list__cate {
    font-size: 1.6rem;
    padding: 0.2rem 1.8rem;
  }
}
.p-headline-news__list__title {
  flex-grow: 1;
  color: #333;
  line-height: 1.5;
  font-size: 1.2rem;
  font-weight: bold;
}

@media print, screen and (min-width: 768px) {
  .p-headline-news__list__title {
    font-size: 1.6rem;
  }
}
.p-headline-news__list__arrow {
  width: 2.4rem;
  height: 2.4rem;
  background-color: #f1f3f6;
  border-radius: 50px;
  background-image: url("../images/parts/arrow.svg");
  background-repeat: no-repeat;
  background-size: 60% auto;
  background-position: center;
  flex-shrink: 0;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # instagram
  - project

**************************************************************************************************** */
.p-instagram {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* --------------------------------------------------------
  Head
-------------------------------------------------------- */
.p-instagram__head {
  border-bottom: 2px solid #333;
  padding-bottom: 1rem;
}

@media print, screen and (min-width: 768px) {
  .p-instagram__head {
    display: flex;
    justify-content: space-between;
  }
}
.p-instagram__title {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 2.8rem;
  width: fit-content;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  letter-spacing: 1px;
}
.p-instagram__title img {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
}

@media print, screen and (min-width: 768px) {
  .p-instagram__title {
    font-size: 3.6rem;
  }
  .p-instagram__title img {
    width: 5.6rem;
    height: 5.6rem;
  }
}
.p-instagram__head .c-button {
  max-width: 300px;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # kv-title
  - project

**************************************************************************************************** */
.p-kv-title {
  text-align: center;
}

/* ======================================================================

  ## item

====================================================================== */
.p-kv-title__item {
  font-size: 3rem;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .p-kv-title__item {
    font-size: 4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # loading
  - project

**************************************************************************************************** */
.p-loading {
  z-index: 256;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
  text-align: center;
  visibility: visible;
  background-color: #fff;
  opacity: 1;
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
}

.p-loading.is-hidden {
  transform: scaleX(0);
  transform-origin: right;
}

/* ======================================================================

  ## logo

====================================================================== */
.p-loading__logo {
  z-index: 2;
  position: relative;
  display: block;
  width: 9.6rem;
  height: auto;
}
.p-loading__logo::after {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 22.9885057471%;
  content: "";
}
.p-loading__logo > img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 100%;
  transform: translate(-50%, -50%);
  height: auto;
}

@media print, screen and (min-width: 768px) {
  .p-loading__logo {
    width: 14rem;
  }
}
/* ======================================================================

  ## progress

====================================================================== */
.p-loading__progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--primary-color);
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # logo
  category: project

**************************************************************************************************** */
.p-logo {
  position: relative;
  display: block;
}

/* ## header
---------------------------------------------------------------------- */
.p-logo.p-logo--type_header {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 26%;
  max-width: 180px;
  border-radius: 0 0 10px 0;
  background-color: #333;
}

@media print, screen and (min-width: 768px) {
  .p-logo.p-logo--type_header {
    width: 18rem;
  }
}
.p-logo.p-logo--type_header a {
  display: block;
  width: 100%;
  padding: 1.5rem 1rem 1.2rem;
}
.p-logo.p-logo--type_header a img {
  display: block;
  width: 100%;
  height: auto;
}

@media print, screen and (min-width: 768px) {
  .p-logo.p-logo--type_header a {
    padding: 1.7rem 1.2rem 1.4rem;
  }
}
.p-logo.p-logo--type_header a span {
  text-align: center;
  color: white;
  letter-spacing: 1px;
  font-weight: bold;
  display: block;
  font-size: 1.2rem;
  margin-top: 0.6rem;
}

@media print, screen and (min-width: 768px) {
  .p-logo.p-logo--type_header a span {
    font-size: 1.6rem;
    letter-spacing: 2px;
  }
}
/* ## footer
---------------------------------------------------------------------- */
.p-logo.p-logo--type_footer {
  width: 18.8rem;
  margin: 0 auto 3.2rem;
}

@media print, screen and (min-width: 768px) {
  .p-logo.p-logo--type_footer {
    width: 78%;
    margin: 0 auto 4.2rem;
  }
}
/* ======================================================================

  ## c-logo__inner

====================================================================== */
.p-logo .c-logo__inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.p-logo .c-logo__inner::after {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 22.9885057471%;
  content: "";
}
.p-logo .c-logo__inner > img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 100%;
  transform: translate(-50%, -50%);
  height: auto;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # menu-card
  - project

**************************************************************************************************** */
.p-menu-card {
  position: relative;
  background-color: white;
  width: 100%;
  border-radius: 10px;
  filter: drop-shadow(1px 4px 15px rgba(18, 18, 18, 0.6));
  z-index: 1;
}

/* --------------------------------------------------------
  Head 画像
-------------------------------------------------------- */
.p-menu-card__head {
  display: block;
  width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  aspect-ratio: 200/131;
}
.p-menu-card__head img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------
  カテゴリリボン
-------------------------------------------------------- */
.p-menu-card__cate {
  width: fit-content;
  padding: 0 1.6rem;
  position: relative;
  color: white;
  transform: translate(-1.2rem, -50%);
}
.p-menu-card__cate::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 1.6rem;
  top: 100%;
  left: 0;
  transform: rotate(-45deg);
  transform-origin: top left;
  z-index: -1;
}
.p-menu-card__cate::after {
  content: "";
  display: block;
  width: 0.8rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 99%;
  clip-path: polygon(0 0, 100% 0, 2% 50%, 100% 100%, 0 100%);
}

.p-menu-card__cate.tebura {
  background-color: #e8323d;
}
.p-menu-card__cate.tebura::before {
  background-color: #e8323d;
}
.p-menu-card__cate.tebura::after {
  background-color: #e8323d;
}

.p-menu-card__cate.own {
  background-color: #417c52;
}
.p-menu-card__cate.own::before {
  background-color: #417c52;
}
.p-menu-card__cate.own::after {
  background-color: #417c52;
}

.p-menu-card__cate.kids {
  background-color: #f15a24;
}
.p-menu-card__cate.kids::before {
  background-color: #f15a24;
}
.p-menu-card__cate.kids::after {
  background-color: #f15a24;
}

.p-menu-card__cate.option {
  background-color: #64a9a9;
}
.p-menu-card__cate.option::before {
  background-color: #64a9a9;
}
.p-menu-card__cate.option::after {
  background-color: #64a9a9;
}

/* --------------------------------------------------------
  ボディ
-------------------------------------------------------- */
.p-menu-card__body {
  padding: 0.4rem 5% 1rem;
}

@media print, screen and (min-width: 768px) {
  .p-menu-card__body {
    padding: 1rem 6% 1.2rem;
  }
}
/* --------------------------------------------------------
  タイトル、価格
-------------------------------------------------------- */
.p-menu-card__title {
  font-size: 1.7rem;
  font-weight: bold;
}
.p-menu-card__title small {
  font-size: 1.3rem;
  padding-left: 0.4rem;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .p-menu-card__title {
    font-size: 2rem;
  }
  .p-menu-card__title small {
    font-size: 1.4rem;
    display: inline;
  }
}
.p-menu-card__price {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 2rem;
}
.p-menu-card__price span {
  font-size: 1.5rem;
}
.p-menu-card__price small {
  font-size: 1.3rem;
  font-weight: medium;
  padding-left: 0.4rem;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .p-menu-card__price {
    font-size: 2.8rem;
    line-height: 1.4;
    font-weight: 500;
  }
  .p-menu-card__price span {
    font-size: 1.8rem;
  }
  .p-menu-card__price small {
    font-size: 1.4rem;
    font-weight: medium;
    display: inline;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # menu-modal
  - project

**************************************************************************************************** */
.p-menu-modal {
  width: 100%;
  padding-bottom: 1.6rem;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .p-menu-modal {
    flex-direction: row;
  }
}
/* --------------------------------------------------------
  リード (PC左)
-------------------------------------------------------- */
.p-menu-modal__lead {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .p-menu-modal__lead {
    width: 60%;
    height: fit-content;
    position: sticky;
    top: 0;
  }
}
/* --------------------------------------------------------
  サムネイル
-------------------------------------------------------- */
.p-menu-modal__thumb {
  width: 100%;
  aspect-ratio: 200/131;
  overflow: hidden;
  position: relative;
}
.p-menu-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.p-menu-modal__thumb__deco {
  position: absolute;
  display: block;
  width: 30%;
  height: auto;
  bottom: 0;
  right: 0;
}

/* --------------------------------------------------------
  カテゴリ
-------------------------------------------------------- */
.p-menu-modal__cate {
  transform: translateY(-50%);
  width: fit-content;
  padding: 0.2rem 1.8rem;
  color: white;
  position: relative;
  z-index: 1;
}
.p-menu-modal__cate::after {
  content: "";
  display: block;
  width: 1rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  clip-path: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%);
}

.p-menu-modal__cate.tebura {
  background-color: #e8323d;
}
.p-menu-modal__cate.tebura::after {
  background-color: #e8323d;
}

.p-menu-modal__cate.own {
  background-color: #417c52;
}
.p-menu-modal__cate.own::after {
  background-color: #417c52;
}

.p-menu-modal__cate.kids {
  background-color: #f15a24;
}
.p-menu-modal__cate.kids::after {
  background-color: #f15a24;
}

.p-menu-modal__cate.option {
  background-color: #64a9a9;
}
.p-menu-modal__cate.option::after {
  background-color: #64a9a9;
}

/* --------------------------------------------------------
  リード下コンテンツ
-------------------------------------------------------- */
.p-menu-modal__lead-cont {
  padding: 1rem 4vw 0;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

@media print, screen and (min-width: 768px) {
  .p-menu-modal__lead-cont {
    padding: 1.2rem 0 0 4%;
    flex-direction: row;
    justify-content: space-between;
  }
}
/* タイトル
-------------------------------------------------------- */
.p-menu-modal__lead-cont__title {
  font-size: 2.2rem;
  font-weight: 600;
}
.p-menu-modal__lead-cont__title small {
  font-size: 1.2rem;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .p-menu-modal__lead-cont__title {
    width: fit-content;
    font-size: 2.8rem;
  }
  .p-menu-modal__lead-cont__title small {
    font-size: 1.4rem;
  }
}
/* 料金メニュー
-------------------------------------------------------- */
.p-menu-modal__lead-cont__menu {
  flex-direction: column;
  display: flex;
  row-gap: 0.8rem;
}

.p-menu-modal__lead-cont__menu dl {
  position: relative;
  display: flex;
  align-items: center;
}

@media print, screen and (min-width: 768px) {
  .p-menu-modal__lead-cont__menu dl {
    column-gap: 1.6rem;
  }
}
.p-menu-modal__lead-cont__menu dl dt {
  background-color: #f1f3f6;
  font-size: 1.2rem;
  padding: 0.6rem 0.2rem;
  text-align: center;
  width: 50%;
}

@media print, screen and (min-width: 768px) {
  .p-menu-modal__lead-cont__menu dl dt {
    width: 18rem;
  }
}
.p-menu-modal__lead-cont__menu dl dd {
  font-size: 2rem;
  text-align: right;
  width: 50%;
}
.p-menu-modal__lead-cont__menu dl dd span {
  font-size: 1.6rem;
}
.p-menu-modal__lead-cont__menu dl dd small {
  font-size: 1.2rem;
}

@media print, screen and (min-width: 768px) {
  .p-menu-modal__lead-cont__menu dl dd {
    width: fit-content;
    font-size: 2.8rem;
  }
  .p-menu-modal__lead-cont__menu dl dd span {
    font-size: 1.8rem;
  }
  .p-menu-modal__lead-cont__menu dl dd small {
    font-size: 1.4rem;
  }
}
/* --------------------------------------------------------
  コンテンツ (PC右)
-------------------------------------------------------- */
.p-menu-modal__cont {
  padding: 2rem 4vw 3rem;
}

@media print, screen and (min-width: 768px) {
  .p-menu-modal__cont {
    padding: 2rem 4% 3rem;
    width: 40%;
  }
}
.p-menu-modal__cont-icon {
  display: block;
  margin: 0 auto 2rem;
  width: 40%;
}

.p-menu-modal__cont-body {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}

.p-menu-modal__cont-body__item-notes {
  font-size: 1.3rem;
  border-top: double 5px #333;
  border-bottom: double 5px #333;
  padding: 1.7rem 0;
}
.p-menu-modal__cont-body__item-notes p {
  text-indent: -1.3rem;
  padding-left: 1.3rem;
}

.p-menu-modal__cont-body__item {
  position: relative;
}

.p-menu-modal__cont-body__item h6 {
  border-bottom: 1px solid #333;
  padding-bottom: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}
.p-menu-modal__cont-body__item h6 .en {
  font-family: "Delicious Handrawn", cursive;
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 1;
}
.p-menu-modal__cont-body__item h6 .jp {
  font-size: 1.5rem;
  line-height: 1;
}

.p-menu-modal__cont-body__item__note {
  background-color: #f1f3f6;
  padding: 1.6rem 4%;
  font-size: 1.2rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # menu-accordion
  - project

**************************************************************************************************** */
.p-menu-accordion {
  display: block;
  position: relative;
}

.p-menu-accordion__trg {
  position: relative;
  border: 1px solid #e8323d;
  color: #e8323d;
  padding: 1rem 4%;
  font-size: 1.3rem;
  letter-spacing: -1px;
}
.p-menu-accordion__trg::before {
  content: "▼";
  display: block;
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.p-menu-accordion__trg.is-open::before {
  transform: translateY(-50%) rotate(-180deg);
}

.p-menu-accordion__inner {
  transition: max-height 0.3s ease;
  max-height: 0;
  overflow: hidden;
}

.p-menu-accordion__inner.is-open {
  max-height: 2000px;
  padding-top: 1rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # news-card
  - project

**************************************************************************************************** */
.p-news-card {
  display: block;
  position: relative;
  background-color: white;
  color: #333;
  width: 100%;
  border-radius: 10px;
  filter: drop-shadow(1px 4px 15px rgba(160, 160, 160, 0.3));
  z-index: 1;
}

/* --------------------------------------------------------
  Head 画像
-------------------------------------------------------- */
.p-news-card__head {
  display: block;
  width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  aspect-ratio: 200/131;
}
.p-news-card__head img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------
  カテゴリリボン
-------------------------------------------------------- */
.p-news-card__cate {
  width: fit-content;
  padding: 0 1.6rem;
  position: relative;
  color: white;
  transform: translate(-1.2rem, -50%);
  background-color: #333;
}
.p-news-card__cate::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 1.6rem;
  top: 100%;
  left: 0;
  transform: rotate(-45deg);
  transform-origin: top left;
  z-index: -1;
  background-color: #333;
}
.p-news-card__cate::after {
  content: "";
  display: block;
  width: 0.8rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 99%;
  clip-path: polygon(0 0, 100% 0, 2% 50%, 100% 100%, 0 100%);
  background-color: #333;
}

.p-news-card__cate.red {
  background-color: #e8323d;
}
.p-news-card__cate.red::before {
  background-color: #e8323d;
}
.p-news-card__cate.red::after {
  background-color: #e8323d;
}

.p-news-card__cate.green {
  background-color: #417c52;
}
.p-news-card__cate.green::before {
  background-color: #417c52;
}
.p-news-card__cate.green::after {
  background-color: #417c52;
}

.p-news-card__cate.orange {
  background-color: #f15a24;
}
.p-news-card__cate.orange::before {
  background-color: #f15a24;
}
.p-news-card__cate.orange::after {
  background-color: #f15a24;
}

.p-news-card__cate.blue {
  background-color: #64a9a9;
}
.p-news-card__cate.blue::before {
  background-color: #64a9a9;
}
.p-news-card__cate.blue::after {
  background-color: #64a9a9;
}

/* --------------------------------------------------------
  ボディ
-------------------------------------------------------- */
.p-news-card__body {
  padding: 0 5% 1.8rem;
}

@media print, screen and (min-width: 768px) {
  .p-news-card__body {
    padding: 0 6% 2.2rem;
  }
}
/* --------------------------------------------------------
  内容
-------------------------------------------------------- */
.p-news-card__date {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}

@media print, screen and (min-width: 768px) {
  .p-news-card__date {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
  }
}
.p-news-card__title {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

@media print, screen and (min-width: 768px) {
  .p-news-card__title {
    font-size: 2rem;
  }
}
.p-news-card__text {
  font-size: 1.3rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # option-list
  - project

**************************************************************************************************** */
.p-option-list {
  display: flex;
  flex-direction: column;
  row-gap: 1.8rem;
}

/* --------------------------------------------------------
  アイテム
-------------------------------------------------------- */
.p-option-list li {
  position: relative;
}

/* --------------------------------------------------------
  画像
-------------------------------------------------------- */
.p-option-list__thumb {
  width: 100%;
  aspect-ratio: 90/59;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 0.8rem;
}
.p-option-list__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------
  内容
-------------------------------------------------------- */
.p-option-list__cont {
  position: relative;
}

.p-option-list__cont .name {
  font-size: 1.4rem;
  display: block;
}

.p-option-list__cont .price {
  font-size: 2.4rem;
}

.p-option-list__cont .yen {
  font-size: 2rem;
}

.p-option-list__cont small {
  font-size: 1.2rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # page-index
  - project

**************************************************************************************************** */
.p-page-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6%;
  row-gap: 1.4rem;
}

@media print, screen and (min-width: 768px) {
  .p-page-index {
    display: grid;
    column-gap: 4%;
    grid-template-columns: repeat(5, 1fr);
  }
}
/* -------------------------------------------------- 
  アイテム
-------------------------------------------------- */
.p-page-index li {
  border-bottom: dotted 3px #333;
}

.p-page-index li a {
  color: #333;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding-bottom: 0.4rem;
}
.p-page-index li a::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50px;
  flex-shrink: 0;
  background: #f1f3f6 url("../images/parts/arrow.svg") no-repeat center/50% auto;
  transform: rotate(90deg);
}

@media print, screen and (min-width: 768px) {
  .p-page-index li a {
    font-size: 1.8rem;
    padding-bottom: 0.6rem;
  }
  .p-page-index li a::after {
    width: 2.8rem;
    height: 2.8rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # p-photo-slider
  - project

**************************************************************************************************** */
.p-photo-slider {
  width: 100%;
  position: relative;
}

/* ======================================================================
  ## タイトル
====================================================================== */
.p-photo-slider__title {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  width: 35%;
  max-width: 280px;
  font-family: "Delicious Handrawn", cursive;
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
  padding: 0 0 1.2rem;
  border-radius: 0 0 10px 0;
}

@media print, screen and (min-width: 768px) {
  .p-photo-slider__title {
    font-size: 3.4rem;
    text-align: center;
    padding: 0.5rem 0 1.8rem;
  }
}
/* ======================================================================
  ## スライダー
====================================================================== */
.p-photo-slider .swiper-wrapper {
  transition-timing-function: linear;
}

.p-photo-slider .swiper-slide {
  width: 100%;
  aspect-ratio: 271/185;
  border-radius: 8px;
  overflow: hidden;
}
.p-photo-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # pagination
  - project

**************************************************************************************************** */
.p-pagination {
  border-top: 2px solid #bfc8d6;
  display: flex;
  justify-content: center;
  align-items: centers;
  padding-top: 2.4rem;
  margin-top: 3.4rem;
  column-gap: 0.4rem;
}

@media print, screen and (min-width: 768px) {
  .p-pagination {
    padding-top: 4rem;
    margin-top: 4.8rem;
  }
}
/* -------------------------------------------------- 
  Single ページ
  次 一覧 前
-------------------------------------------------- */
.p-pagination.p-pagination--single {
  justify-content: space-between;
  align-items: center;
}

/* -------------------------------------------------- 
  一覧 ページ
  wordpress組み込みのthe_posts_pagination()を使う
-------------------------------------------------- */
.p-pagination {
  font-size: 1.6rem;
}

.p-pagination .page-numbers {
  font-size: 1.8rem;
}

.p-pagination .page-numbers.current {
  border-bottom: 2px solid #bfc8d6;
}

.p-pagination .prev,
.p-pagination .next {
  width: 3rem;
  height: 3rem;
  border: 2px solid #333;
  border-radius: 50rem;
  background-image: url("../images/parts/arrow.svg");
  background-size: 50% auto;
  background-position: center;
  background-repeat: no-repeat;
}

.p-pagination .prev {
  margin-right: 0.8rem;
  transform: scale(-1);
}

.p-pagination .next {
  margin-left: 0.8rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # qanda よくある質問
  - project

**************************************************************************************************** */
.p-qanda {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

@media print, screen and (min-width: 768px) {
  .p-qanda {
    margin-top: 1.5rem;
  }
}
.p-qanda li {
  border-bottom: 2px solid var(--primary-color);
  padding: 1.2rem 0;
}

@media print, screen and (min-width: 768px) {
  .p-qanda li {
    padding: 2rem 0 1rem;
  }
}
/* ======================================================================
  ## Question (アコーディオン表題)
====================================================================== */
.p-qanda__question {
  padding: 0 2.5rem 0.5rem 3.4rem;
  background: url("../images/page/inquiry/txt_Q.svg") no-repeat left top 2px/2.8rem auto;
  cursor: pointer;
  position: relative;
}
.p-qanda__question::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 2.8rem;
  background: url("../images/parts/toggle-arrow.svg") no-repeat center 2px/contain;
  transition: all 0.3s ease;
}

.p-qanda__question.is-open::after {
  content: "";
  transform: rotate(90deg);
}

/* ======================================================================
  ## Anser (アコーディオンコンテンツ)
====================================================================== */
.p-qanda__answer {
  transition: max-height 0.3s ease;
  max-height: 0;
  overflow: hidden;
}

.p-qanda__answer.is-open {
  max-height: 2000px;
}

.p-qanda__answer-box {
  margin-top: 1rem;
  padding: 1.6rem 4% 1.6rem calc(4% + 3.5rem);
  border-radius: 8px;
  background: var(--primary-color) url("../images/page/inquiry/txt_A.svg") no-repeat left 4% top 1.8rem/2.8rem auto;
}

@media print, screen and (min-width: 768px) {
  .p-qanda__answer-box {
    margin-top: 1.6rem;
    padding: 1.8rem 3% 1.8rem calc(3% + 3.5rem);
    background: var(--primary-color) url("../images/page/inquiry/txt_A.svg") no-repeat left 3% top 1.8rem/2.8rem auto;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # sitemap
  - project

**************************************************************************************************** */
.p-sitemap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* ======================================================================

  ## list

====================================================================== */
.p-sitemap__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* ======================================================================

  ## divider

====================================================================== */
.p-sitemap__divider {
  display: block;
  width: 48%;
  margin: 0 0 4%;
}

.p-sitemap__list > .p-sitemap__divider:nth-child(2n+1):nth-last-child(-n+2),
.p-sitemap__list > .p-sitemap__divider:nth-child(2n+1):nth-last-child(-n+2) ~ .p-sitemap__divider {
  margin-bottom: 0;
}

/* ======================================================================

  ## item

====================================================================== */
.p-sitemap__item {
  display: inline-block;
  padding: 0.3rem 0;
  line-height: 1.4;
  color: #333;
}

/* ======================================================================

  ## txt

====================================================================== */
.p-sitemap__txt {
  font-size: 1.2rem;
}

@media print, screen and (min-width: 768px) {
  .p-sitemap__txt {
    font-size: 1.4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # sns
  - project

**************************************************************************************************** */
.p-sns {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* ======================================================================

  ## divider

====================================================================== */
.p-sns__divider {
  display: block;
}

.p-sns__divider + .p-sns__divider {
  margin-left: 2rem;
}

@media print, screen and (min-width: 768px) {
  .p-sns__divider + .p-sns__divider {
    margin-left: 4rem;
  }
}
/* ======================================================================

  ## item

====================================================================== */
.p-sns__item {
  display: block;
}

/* ======================================================================

  ## icon

====================================================================== */
.p-sns__icon {
  display: block;
  width: 2.6rem;
  height: auto;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # sidebar-item
  - project

**************************************************************************************************** */
.p-sidebar-item {
  position: relative;
}

/* ---------------------------------------------
  タイトル
--------------------------------------------- */
.p-sidebar-item__title {
  font-size: 2rem;
  font-weight: 500;
  border-bottom: 2px solid #bfc8d6;
  padding-bottom: 1rem;
}

@media print, screen and (min-width: 768px) {
  .p-sidebar-item__title {
    font-size: 2.2rem;
  }
}
/* ---------------------------------------------
  投稿リスト
--------------------------------------------- */
.p-sidebar-item__post-list {
  display: flex;
  flex-direction: column;
}

.p-sidebar-item__post-list li {
  border-bottom: 1px solid #bfc8d6;
}

.p-sidebar-item__post-list li.is-current {
  background-color: aliceblue;
}

.p-sidebar-item__post-list li a {
  display: block;
  padding: 0.8rem 0.4rem;
}

@media print, screen and (min-width: 768px) {
  .p-sidebar-item__post-list li a {
    display: block;
    padding: 1.2rem 0.4rem;
  }
}
/* ---------------------------------------------
  個別アイテム
--------------------------------------------- */
.p-sidebar-item__post-list li .post-date {
  display: block;
  font-size: 1.2rem;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # tab
  category: project

**************************************************************************************************** */
.p-tab {
  position: relative;
  display: block;
}

/* ======================================================================

  body

====================================================================== */
.p-tab__body {
  position: relative;
}

.p-tab__head + .p-tab__body {
  margin-top: 1.6rem;
}

@media print, screen and (min-width: 768px) {
  .p-tab__head + .p-tab__body {
    margin-top: 2.4rem;
  }
}
/* ======================================================================

  cont

====================================================================== */
.p-tab__cont {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: height 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s, margin 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s, padding 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s, opacity 0.15s ease, visibility 0.15s ease;
}

.p-tab__cont.is-current {
  position: relative;
  visibility: visible;
  opacity: 1;
  transition: height 0s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s ease 0.15s, visibility 0.2s ease 0.15s;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # wp-post 
  - project
	wordpressの記事を整形します

**************************************************************************************************** */
.p-wp-post {
  position: relative;
}

/* --------------------------------------------------------
  タイトル
-------------------------------------------------------- */
.p-wp-post__title {
  font-size: 2.6rem;
  font-weight: bold;
  padding-bottom: 1rem;
  margin-bottom: 0.6rem;
  border-bottom: solid 2px #bfc8d6;
}

@media print, screen and (min-width: 768px) {
  .p-wp-post__title {
    font-size: 3.2rem;
    padding-bottom: 1.2rem;
    margin-bottom: 0.8rem;
  }
}
/* --------------------------------------------------------
  日付
-------------------------------------------------------- */
.p-wp-post__date {
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}

/* --------------------------------------------------------
  アイキャッチ
-------------------------------------------------------- */
.p-wp-post__thumb {
  display: block;
  margin: 0 0 2rem;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  object-position: left top;
}

@media print, screen and (min-width: 768px) {
  .p-wp-post__thumb {
    margin: 0 0 3.2rem;
  }
}
/* --------------------------------------------------------
  本文
-------------------------------------------------------- */
.p-wp-post__content {
  position: relative;
}

.p-wp-post__content > * + * {
  margin-top: 1.6rem;
}

@media print, screen and (min-width: 768px) {
  .p-wp-post__content > * + * {
    margin-top: 1.8rem;
  }
}
.p-wp-post__content h1 {
  font-weight: bold;
  font-size: 2.8rem;
}

@media print, screen and (min-width: 768px) {
  .p-wp-post__content h1 {
    font-size: 3.2rem;
  }
}
.p-wp-post__content h2 {
  font-weight: bold;
  font-size: 2.2rem;
}

@media print, screen and (min-width: 768px) {
  .p-wp-post__content h2 {
    font-size: 2.8rem;
  }
}
.p-wp-post__content h3 {
  font-weight: 500;
  font-size: 2rem;
}

@media print, screen and (min-width: 768px) {
  .p-wp-post__content h3 {
    font-size: 2.4rem;
  }
}
.p-wp-post__content ul {
  list-style-type: disc;
  list-style-position: inside;
}

.p-wp-post__content ol {
  list-style-type: decimal;
  list-style-position: inside;
}

/* ======================================================================

  ## page
  - ページ固有の使いまわせそうにないもの
  - (影響範囲が分からなくなるため使いまわすのはNG)

====================================================================== */
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # access-info
  - page

**************************************************************************************************** */
.access-info {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .access-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
/* --------------------------------------------------------
  アイテム
-------------------------------------------------------- */
.access-info__divider {
  width: 100%;
}

.access-info__divider:first-child {
  padding: 0 0 2rem 0;
  border-bottom: 1px solid #bfc8d6;
}

@media print, screen and (min-width: 768px) {
  .access-info__divider:first-child {
    padding: 0 6% 0 0;
    border-bottom: none;
    border-right: 1px solid #bfc8d6;
  }
}
.access-info__divider:last-child {
  padding: 2rem 0 0 0;
}

@media print, screen and (min-width: 768px) {
  .access-info__divider:last-child {
    padding: 0 0 0 6%;
  }
}
/* --------------------------------------------------------
  タイトル
-------------------------------------------------------- */
.access-info__head {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.access-info__head img {
  display: block;
  width: 3rem;
  height: auto;
}

@media print, screen and (min-width: 768px) {
  .access-info__head {
    column-gap: 1rem;
    font-size: 2.2rem;
    margin-bottom: 1.6rem;
  }
  .access-info__head img {
    width: 4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # news-wrapper
  - page

**************************************************************************************************** */
.news-wrapper {
  display: block;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .news-wrapper {
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    column-gap: 5%;
    max-width: 1440px;
    margin: 0 auto;
  }
}
.news-wrapper__main {
  position: relative;
  margin-bottom: 4rem;
}

@media print, screen and (min-width: 768px) {
  .news-wrapper__main {
    margin-bottom: initial;
  }
}
.news-wrapper__side {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 2.6rem;
}

@media print, screen and (min-width: 768px) {
  .news-wrapper__side {
    row-gap: 3.6rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # fee-title-menu
  - project

**************************************************************************************************** */
.fee-title-menu {
  width: 100%;
  position: relative;
  border-top: 2px solid #333;
  margin-bottom: 4rem;
}

@media print, screen and (min-width: 768px) {
  .fee-title-menu {
    margin-bottom: 7rem;
  }
}
.fee-title-menu__hook {
  margin: 0 auto;
  width: 75%;
  max-width: 700px;
  display: flex;
  justify-content: space-between;
}
.fee-title-menu__hook span {
  display: block;
  position: relative;
  width: 2px;
  height: 4rem;
  background-color: #333;
}
.fee-title-menu__hook span::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
  transform: translate(-50%, -1px) rotate(45deg);
}

.fee-title-menu__board {
  margin: 0 auto;
  width: 80%;
  max-width: 900px;
  border: 2px solid #333;
  padding: 1rem 0;
  background: repeating-linear-gradient(135deg, var(--primary-color), var(--primary-color) 2px, #fff 2px, #fff 6px);
}
.fee-title-menu__board img {
  display: block;
  margin: 0 auto;
  height: 2.8rem;
  width: auto;
}

@media print, screen and (min-width: 768px) {
  .fee-title-menu__board {
    padding: 1rem 0;
  }
  .fee-title-menu__board img {
    height: 3.7rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # fee-common-bg
  - page

**************************************************************************************************** */
@media print, screen and (min-width: 768px) {
  .fee-menu-bg {
    position: relative;
  }
  .fee-menu-bg::before, .fee-menu-bg::after {
    content: "";
    display: block;
    position: absolute;
    width: 4.4791666675vw;
    height: 61%;
    top: 50%;
    transform: translate(0, -50%);
    background-color: #ffffff;
    background-image: radial-gradient(circle, #333333 3px, transparent 3px), radial-gradient(circle, #333333 3px, transparent 3px), radial-gradient(circle, #333333 3px, transparent 3px), radial-gradient(circle, #333333 3px, transparent 3px);
    background-position: 3px 6px, 17px 6px, 10px 20px, 24px 20px;
    background-size: 28px 28px;
  }
  .fee-menu-bg::before {
    left: 0%;
  }
  .fee-menu-bg::after {
    right: 0%;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # fee-comparison-chart
  - page

**************************************************************************************************** */
.fee-comparison-chart {
  width: 100%;
  height: fit-content;
  overflow-x: scroll;
  border: 1px solid #bfc8d6;
  border-radius: 8px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media print, screen and (min-width: 768px) {
  .fee-comparison-chart {
    margin-bottom: 4rem;
  }
}
/* --------------------------------------------------------
  テーブル
-------------------------------------------------------- */
.fee-comparison-chart table {
  border-collapse: collapse;
}

.fee-comparison-chart table th,
.fee-comparison-chart table td {
  padding: 1rem 1.2rem;
}

/* --------------------------------------------------------
  一番左のセル
-------------------------------------------------------- */
.fee-comparison-chart table tr > th:first-child {
  background-color: #f1f3f6;
  min-width: 10rem;
  width: 13%;
}

/* --------------------------------------------------------
  ボーダー
-------------------------------------------------------- */
.fee-comparison-chart table tr + tr {
  border-top: 1px solid #bfc8d6;
}

.fee-comparison-chart table tr > *:not(:last-child) {
  border-right: 1px solid #bfc8d6;
}

/* --------------------------------------------------------
  th
-------------------------------------------------------- */
.fee-comparison-chart table .korea-corse,
.fee-comparison-chart table .america-corse,
.fee-comparison-chart table .japan-corse {
  color: white;
  width: 29%;
  min-width: 20rem;
  padding: 1.4rem 1.2rem;
}
.fee-comparison-chart table .korea-corse {
  background-color: #f7b11e;
}
.fee-comparison-chart table .america-corse {
  background-color: #f75f59;
}
.fee-comparison-chart table .japan-corse {
  background-color: #64a9a9;
}

/* --------------------------------------------------------
  td
-------------------------------------------------------- */
.fee-comparison-chart table td {
  font-size: 1.2rem;
  vertical-align: baseline;
}

@media print, screen and (min-width: 768px) {
  .fee-comparison-chart table td {
    font-size: 1.4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # fee-drink-area
  - page

**************************************************************************************************** */
.fee-drink-area {
  display: flex;
  flex-direction: column;
  row-gap: 3.8rem;
  margin-bottom: 3rem;
}

@media print, screen and (min-width: 768px) {
  .fee-drink-area {
    flex-direction: row;
    column-gap: 8%;
    margin-bottom: 4.5rem;
  }
}
/* --------------------------------------------------------
	PC左
-------------------------------------------------------- */
.fee-drink-area__left {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .fee-drink-area__left {
    width: 52%;
  }
}
/* --------------------------------------------------------
	PC右
-------------------------------------------------------- */
.fee-drink-area__right {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .fee-drink-area__right {
    width: 50%;
  }
}
/* --------------------------------------------------------
	タイトル
-------------------------------------------------------- */
.fee-drink-area__head {
  width: 100%;
  aspect-ratio: 221/47;
  background-image: url("../images/parts/bg_fukidashi-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1.6rem;
}

@media print, screen and (min-width: 768px) {
  .fee-drink-area__head {
    max-width: 470px;
    margin: 0 auto 2.2rem;
  }
}
.fee-drink-area__head p {
  transform: translateY(-15%);
  font-family: "Delicious Handrawn", cursive;
  font-size: 2.8rem;
}

@media print, screen and (min-width: 768px) {
  .fee-drink-area__head p {
    font-size: 3.8rem;
  }
}
/* --------------------------------------------------------
  スライダー
-------------------------------------------------------- */
.fee-drink-area__slider {
  width: 100%;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .fee-drink-area__slider {
    width: 100%;
  }
}
.fee-drink-area__slider .swiper {
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.fee-drink-area__slider .swiper-slide {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 135/92;
}
.fee-drink-area__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fee-drink-area__slider__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
}

@media print, screen and (min-width: 768px) {
  .fee-drink-area__slider__pagination {
    padding-top: 1.4rem;
  }
}
.fee-drink-area__slider__pagination.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url("../images/parts/bullet-star.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 14px;
  height: 14px;
}

.fee-drink-area__slider__prev,
.fee-drink-area__slider__next {
  position: absolute;
  top: 50%;
  width: 4rem;
  height: 4rem;
  z-index: 1;
  background-color: #fff;
  border-radius: 50rem;
  border: 2px solid #333;
  background-image: url("../images/parts/arrow.svg");
  background-size: 50% auto;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

@media print, screen and (min-width: 768px) {
  .fee-drink-area__slider__prev,
  .fee-drink-area__slider__next {
    width: 5rem;
    height: 5rem;
  }
}
.fee-drink-area__slider__prev {
  left: 0%;
  transform: translate(-30%, -70%) rotate(-180deg);
}

.fee-drink-area__slider__next {
  right: 0%;
  transform: translate(30%, -70%);
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # home-kv-title
  - scope

**************************************************************************************************** */
.s-home-kv-title {
  text-align: center;
}

/* ======================================================================

  ## item

====================================================================== */
.s-home-kv-title__item {
  font-size: 3rem;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .s-home-kv-title__item {
    font-size: 4rem;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # home-info
  - page

**************************************************************************************************** */
.home-info-contents {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.6rem;
}

@media print, screen and (min-width: 768px) {
  .home-info-contents {
    grid-template-columns: 1fr 3fr;
  }
}
.home-info-contents__head {
  font-size: 1.8rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .home-info-contents__head {
    font-size: 2rem;
    text-align: left;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # home-fee-cont
  - page

**************************************************************************************************** */
.home-fee-cont {
  width: 100%;
  position: relative;
}

/* --------------------------------------------------------
  TOP 装飾
-------------------------------------------------------- */
.home-fee-cont__top {
  position: relative;
  width: 100%;
  height: 10px;
  border-top: 2px solid #333;
  border-bottom: 3px solid #333;
  margin-bottom: 1rem;
  z-index: 1;
}
.home-fee-cont__top::after {
  content: "";
  display: block;
  background-color: white;
  width: 15%;
  max-width: 85px;
  height: 15px;
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.home-fee-cont__top-label {
  display: block;
  position: absolute;
  width: 28%;
  max-width: 240px;
  top: 0;
  left: 4%;
  z-index: 2;
  transform: translateY(-30%);
}

@media print, screen and (min-width: 768px) {
  .home-fee-cont__top-label {
    left: 12%;
  }
}
.home-fee-cont__top-ribbon {
  display: block;
  position: absolute;
  width: 12%;
  max-width: 75px;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* --------------------------------------------------------
  メインエリア
-------------------------------------------------------- */
.home-fee-cont__main {
  position: relative;
  width: 100%;
}

.home-fee-cont__main-bg {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.home-fee-cont__main-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-fee-cont__main .l-section {
  z-index: 1;
}
.home-fee-cont__main .l-section::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.home-fee-cont__serif-img {
  position: absolute;
  width: 11.5rem;
  display: block;
  top: -12%;
  right: 1%;
}

@media print, screen and (min-width: 768px) {
  .home-fee-cont__serif-img {
    max-width: 22.5rem;
    width: 18%;
    display: block;
    top: -9%;
    right: 8%;
  }
}
/* --------------------------------------------------------
  コンテンツ p-common-cont へ切り分け
-------------------------------------------------------- */
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # home-fee-slider
  - page

**************************************************************************************************** */
.home-menu-slider {
  position: relative;
  width: 100vw;
  margin-top: -3.4rem;
}

@media print, screen and (min-width: 768px) {
  .home-menu-slider {
    margin-top: -7.4rem;
  }
}
.home-menu-slider .swiper {
  padding-left: 7vw;
  padding-right: 7vw;
}

.home-menu-slider .swiper .swiper-wrapper {
  padding: 0 0 4rem;
}

/* ======================================================================
  ページネーション 
====================================================================== */
.home-menu-slider__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
}

@media print, screen and (min-width: 768px) {
  .home-menu-slider__pagination {
    padding-top: 1.4rem;
  }
}
.home-menu-slider__pagination.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url("../images/parts/bullet-star.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 14px;
  height: 14px;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # home-other-menu メニューセクション下部、別カテメニューへの詳細
  - component

**************************************************************************************************** */
.home-other-menu {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}

@media print, screen and (min-width: 768px) {
  .home-other-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5%;
  }
}
/* --------------------------------------------------------
  アイテム
-------------------------------------------------------- */
.home-other-menu__item__head {
  width: 100%;
  border-bottom: 2px solid #333;
  padding-bottom: 0.8rem;
}
.home-other-menu__item__head img {
  display: block;
  width: 4rem;
  margin: 0 auto;
}

/* --------------------------------------------------------
  アイテムbody
-------------------------------------------------------- */
.home-other-menu__item__body {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;
  padding: 1.2rem 0 2rem;
}

@media print, screen and (min-width: 768px) {
  .home-other-menu__item__body {
    flex-direction: row;
    column-gap: 4%;
  }
}
.home-other-menu__item__body img {
  display: block;
  width: 65%;
  margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
  .home-other-menu__item__body img {
    width: 35%;
    max-width: 180px;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # home-about
  - page

**************************************************************************************************** */
.home-about {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
  padding: 3rem 0;
}

@media print, screen and (min-width: 768px) {
  .home-about {
    grid-template-columns: 1fr 1.8fr;
    column-gap: 4%;
    padding: 6rem 0;
  }
}
/* ======================================================================

  ## 画像

====================================================================== */
.home-about__thumb {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 1/1;
}
.home-about__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media print, screen and (min-width: 768px) {
  .home-about__thumb {
    width: 100%;
  }
}
/* ======================================================================

  ## 内容

====================================================================== */
.home-about__title {
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
  align-items: center;
  margin-bottom: 1.8rem;
}

@media print, screen and (min-width: 768px) {
  .home-about__title {
    flex-direction: row;
    align-items: center;
    column-gap: 4%;
    margin-bottom: 3rem;
  }
}
.home-about__title__svg {
  width: 80%;
  display: block;
}

@media print, screen and (min-width: 768px) {
  .home-about__title__svg {
    width: auto;
    flex: 1 2 auto;
  }
}
.home-about__title span {
  display: block;
  text-align: center;
  font-size: 1.9rem;
  line-height: 1.65;
}

@media print, screen and (min-width: 768px) {
  .home-about__title span {
    flex: 1 0 auto;
    width: fit-content;
    white-space: nowrap;
    text-align: left;
    font-size: 2.6rem;
    line-height: 1.65;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # inquiry-contact 
  - page

**************************************************************************************************** */
.p-inquiry-contact {
  border-top: 3px solid #333;
  padding-bottom: 6rem;
  position: relative;
  z-index: 1;
}

@media print, screen and (min-width: 768px) {
  .p-inquiry-contact {
    padding-bottom: 8rem;
  }
}
.p-inquiry-contact__hooks {
  width: 80%;
  max-width: 500px;
  padding: 0 4%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: -1rem;
}
.p-inquiry-contact__hooks img {
  display: block;
  width: 9%;
}

@media print, screen and (min-width: 768px) {
  .p-inquiry-contact__hooks {
    margin-top: -1.5rem;
  }
  .p-inquiry-contact__hooks img {
    width: 10%;
  }
}
/* ======================================================================
  ## ボード
====================================================================== */
.p-inquiry-contact__board {
  width: 80%;
  max-width: 500px;
  margin: -3rem auto;
  border: 3px solid #333;
  border-radius: 8px;
  padding: 3.3rem 4% 1.7rem;
  text-align: center;
  background-color: white;
}

@media print, screen and (min-width: 768px) {
  .p-inquiry-contact__board {
    margin: -5.2rem auto;
    padding: 5.6rem 4% 1.7rem;
  }
}
/* ======================================================================
  ## タイトル、テキスト
====================================================================== */
.p-inquiry-contact__board__title {
  font-size: 2rem;
  font-weight: bold;
  position: relative;
}
.p-inquiry-contact__board__title::after {
  content: "";
  display: block;
  width: 70%;
  height: 1px;
  border-top: 3px dashed #333;
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
}

@media print, screen and (min-width: 768px) {
  .p-inquiry-contact__board__title {
    font-size: 3.4rem;
  }
  .p-inquiry-contact__board__title::after {
    content: "";
    top: -2.8rem;
  }
}
.p-inquiry-contact__board__text {
  margin-top: 1rem;
}

.p-inquiry-contact__board__tel {
  color: #e8323d;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 2.3rem;
  margin-top: 0.5rem;
}
.p-inquiry-contact__board__tel a {
  color: #e8323d;
}

@media print, screen and (min-width: 768px) {
  .p-inquiry-contact__board__tel {
    font-size: 3.6rem;
  }
}
/* ======================================================================
  ## 背景装飾
====================================================================== */
.p-inquiry-contact__bg-left {
  display: block;
  z-index: -1;
  width: 45%;
  position: absolute;
  top: 45%;
  left: 0;
}

@media print, screen and (min-width: 768px) {
  .p-inquiry-contact__bg-left {
    width: 20%;
    max-width: 300px;
    top: 12%;
    left: 0;
  }
}
.p-inquiry-contact__bg-middle {
  display: block;
  z-index: -1;
  width: 50%;
  position: absolute;
  right: 5%;
  bottom: 12%;
}

@media print, screen and (min-width: 768px) {
  .p-inquiry-contact__bg-middle {
    width: 30%;
    max-width: 350px;
    right: 30%;
    bottom: 0%;
  }
}
.p-inquiry-contact__bg-right {
  display: block;
  z-index: -1;
  width: 25%;
  position: absolute;
  top: 10%;
  right: 0;
}

@media print, screen and (min-width: 768px) {
  .p-inquiry-contact__bg-right {
    width: 20%;
    max-width: 300px;
    top: 23%;
  }
}
/* ======================================================================

  ## theme
  - クラスを付与で文字色が変わったりする、色などに関するスタイル

====================================================================== */
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # bg
  - theme

**************************************************************************************************** */
.t-bg-skelton {
  background-color: transparent !important;
}

.t-bg-white {
  background-color: #fff;
}

.t-bg-gray {
  background-color: #f1f3f6;
}

.t-bg-banner-area {
  background-image: url("../images/banner/bg_banner-area.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom left;
}

.t-bg-cloud {
  background-image: url("../images/page/top/bg_cloud.svg");
  background-repeat: repeat-x;
  background-size: auto 75%;
  background-position: top 20% left 10%;
}

@media print, screen and (min-width: 768px) {
  .t-bg-cloud {
    background-size: auto 80%;
    background-position: top 20% center;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # border
  - theme

**************************************************************************************************** */
/* ======================================================================

  solid

====================================================================== */
.t-border {
  border: 1px solid gray;
}

/* ======================================================================

  dashed

====================================================================== */
.t-border-dashed {
  border: 1px dashed gray;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # color
  - theme

**************************************************************************************************** */
.t-color-white {
  color: #fff !important;
}

.t-color-black {
  color: #333 !important;
}

.t-color-red {
  color: #e8323d !important;
}

/* ****************************************************************************************************

  # highlight
  - theme

**************************************************************************************************** */
.t-highlight {
  display: inline;
  padding: 0 0.1rem;
  background-image: linear-gradient(180deg, transparent 0%, transparent 52%, #fcd0df 52%, #fcd0df 100%);
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # font
  - theme

**************************************************************************************************** */
.t-font-roboto {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

/* ======================================================================

  ## utility
  - pcのときは非表示、余白の設定などの汎用クラス

====================================================================== */
/* ****************************************************************************************************

  # align
  - utility

**************************************************************************************************** */
.u-align-left {
  display: block !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

.u-align-center {
  display: block !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.u-align-right {
  display: block !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # anchor-txt
  - utility

**************************************************************************************************** */
.u-anchor-txt {
  color: red;
  text-decoration: underline;
}
.u-anchor-txt:hover {
  text-decoration: none;
}

/* ****************************************************************************************************

  # clearfix
  - utility

**************************************************************************************************** */
.u-clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* ****************************************************************************************************

  # clip
  - utility

**************************************************************************************************** */
.u-clip {
  overflow: hidden !important;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # hide
  - utility

**************************************************************************************************** */
/* ======================================================================

  〜まで消す

====================================================================== */
@media print, screen and (max-width: 1023px) {
  .u-hide-mq-max-lg {
    display: none !important;
  }
}
@media print, screen and (max-width: 767px) {
  .u-hide-mq-max-md {
    display: none !important;
  }
}
/* ======================================================================

  〜から消す

====================================================================== */
@media print, screen and (min-width: 1024px) {
  .u-hide-mq-min-lg {
    display: none !important;
  }
}
@media print, screen and (min-width: 768px) {
  .u-hide-mq-min-md {
    display: none !important;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # margin
  - utility

**************************************************************************************************** */
/* ======================================================================

  上方向のマージン

====================================================================== */
.u-mt0 {
  margin-top: 0rem !important;
}

.u-mt1 {
  margin-top: 1rem !important;
}

.u-mt2 {
  margin-top: 2rem !important;
}

.u-mt3 {
  margin-top: 3rem !important;
}

.u-mt4 {
  margin-top: 4rem !important;
}

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

.u-mt6 {
  margin-top: 6rem !important;
}

.u-mt7 {
  margin-top: 7rem !important;
}

.u-mt8 {
  margin-top: 8rem !important;
}

.u-mt9 {
  margin-top: 9rem !important;
}

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

.u-mt11 {
  margin-top: 11rem !important;
}

.u-mt12 {
  margin-top: 12rem !important;
}

.u-mt13 {
  margin-top: 13rem !important;
}

.u-mt14 {
  margin-top: 14rem !important;
}

.u-mt15 {
  margin-top: 15rem !important;
}

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

.u-mt17 {
  margin-top: 17rem !important;
}

.u-mt18 {
  margin-top: 18rem !important;
}

.u-mt19 {
  margin-top: 19rem !important;
}

.u-mt20 {
  margin-top: 20rem !important;
}

@media print, screen and (max-width: 768px) {
  .u-sp-mt0 {
    margin-top: 0rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt1 {
    margin-top: 1rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt2 {
    margin-top: 2rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt3 {
    margin-top: 3rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt4 {
    margin-top: 4rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt5 {
    margin-top: 5rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt6 {
    margin-top: 6rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt7 {
    margin-top: 7rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt8 {
    margin-top: 8rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt9 {
    margin-top: 9rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt10 {
    margin-top: 10rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt11 {
    margin-top: 11rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt12 {
    margin-top: 12rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt13 {
    margin-top: 13rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt14 {
    margin-top: 14rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt15 {
    margin-top: 15rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt16 {
    margin-top: 16rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt17 {
    margin-top: 17rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt18 {
    margin-top: 18rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt19 {
    margin-top: 19rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt20 {
    margin-top: 20rem !important;
  }
}
/* ======================================================================

  上方向のネガティブマージン

====================================================================== */
.u-mt-0 {
  margin-top: 0rem !important;
}

.u-mt-1 {
  margin-top: -1rem !important;
}

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

.u-mt-3 {
  margin-top: -3rem !important;
}

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

.u-mt-5 {
  margin-top: -5rem !important;
}

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

.u-mt-7 {
  margin-top: -7rem !important;
}

.u-mt-8 {
  margin-top: -8rem !important;
}

.u-mt-9 {
  margin-top: -9rem !important;
}

.u-mt-10 {
  margin-top: -10rem !important;
}

.u-mt-11 {
  margin-top: -11rem !important;
}

.u-mt-12 {
  margin-top: -12rem !important;
}

.u-mt-13 {
  margin-top: -13rem !important;
}

.u-mt-14 {
  margin-top: -14rem !important;
}

.u-mt-15 {
  margin-top: -15rem !important;
}

.u-mt-16 {
  margin-top: -16rem !important;
}

.u-mt-17 {
  margin-top: -17rem !important;
}

.u-mt-18 {
  margin-top: -18rem !important;
}

.u-mt-19 {
  margin-top: -19rem !important;
}

.u-mt-20 {
  margin-top: -20rem !important;
}

@media print, screen and (max-width: 768px) {
  .u-sp-mt-0 {
    margin-top: 0rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-1 {
    margin-top: -1rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-2 {
    margin-top: -2rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-3 {
    margin-top: -3rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-4 {
    margin-top: -4rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-5 {
    margin-top: -5rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-6 {
    margin-top: -6rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-7 {
    margin-top: -7rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-8 {
    margin-top: -8rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-9 {
    margin-top: -9rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-10 {
    margin-top: -10rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-11 {
    margin-top: -11rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-12 {
    margin-top: -12rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-13 {
    margin-top: -13rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-14 {
    margin-top: -14rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-15 {
    margin-top: -15rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-16 {
    margin-top: -16rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-17 {
    margin-top: -17rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-18 {
    margin-top: -18rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-19 {
    margin-top: -19rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mt-20 {
    margin-top: -20rem !important;
  }
}
/* ======================================================================

  右方向のマージン

====================================================================== */
.u-mr0 {
  margin-right: 0rem !important;
}

.u-mr1 {
  margin-right: 1rem !important;
}

.u-mr2 {
  margin-right: 2rem !important;
}

.u-mr3 {
  margin-right: 3rem !important;
}

.u-mr4 {
  margin-right: 4rem !important;
}

.u-mr5 {
  margin-right: 5rem !important;
}

.u-mr6 {
  margin-right: 6rem !important;
}

.u-mr7 {
  margin-right: 7rem !important;
}

.u-mr8 {
  margin-right: 8rem !important;
}

.u-mr9 {
  margin-right: 9rem !important;
}

.u-mr10 {
  margin-right: 10rem !important;
}

.u-mr-auto {
  margin-right: auto;
}

/* ======================================================================

  下方向のマージン

====================================================================== */
.u-mb0 {
  margin-bottom: 0rem !important;
}

.u-mb1 {
  margin-bottom: 1rem !important;
}

.u-mb2 {
  margin-bottom: 2rem !important;
}

.u-mb3 {
  margin-bottom: 3rem !important;
}

.u-mb4 {
  margin-bottom: 4rem !important;
}

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

.u-mb6 {
  margin-bottom: 6rem !important;
}

.u-mb7 {
  margin-bottom: 7rem !important;
}

.u-mb8 {
  margin-bottom: 8rem !important;
}

.u-mb9 {
  margin-bottom: 9rem !important;
}

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

@media print, screen and (max-width: 768px) {
  .u-sp-mb0 {
    margin-bottom: 0rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb1 {
    margin-bottom: 1rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb2 {
    margin-bottom: 2rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb3 {
    margin-bottom: 3rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb4 {
    margin-bottom: 4rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb5 {
    margin-bottom: 5rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb6 {
    margin-bottom: 6rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb7 {
    margin-bottom: 7rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb8 {
    margin-bottom: 8rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb9 {
    margin-bottom: 9rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-mb10 {
    margin-bottom: 10rem !important;
  }
}
/* ======================================================================

  左方向のマージン

====================================================================== */
.u-ml0 {
  margin-left: 0rem !important;
}

.u-ml1 {
  margin-left: 1rem !important;
}

.u-ml2 {
  margin-left: 2rem !important;
}

.u-ml3 {
  margin-left: 3rem !important;
}

.u-ml4 {
  margin-left: 4rem !important;
}

.u-ml5 {
  margin-left: 5rem !important;
}

.u-ml6 {
  margin-left: 6rem !important;
}

.u-ml7 {
  margin-left: 7rem !important;
}

.u-ml8 {
  margin-left: 8rem !important;
}

.u-ml9 {
  margin-left: 9rem !important;
}

.u-ml10 {
  margin-left: 10rem !important;
}

@media print, screen and (max-width: 768px) {
  .u-sp-ml0 {
    margin-left: 0rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml1 {
    margin-left: 1rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml2 {
    margin-left: 2rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml3 {
    margin-left: 3rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml4 {
    margin-left: 4rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml5 {
    margin-left: 5rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml6 {
    margin-left: 6rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml7 {
    margin-left: 7rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml8 {
    margin-left: 8rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml9 {
    margin-left: 9rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-ml10 {
    margin-left: 10rem !important;
  }
}
.u-ml-auto {
  margin-left: auto;
}

/* ****************************************************************************************************

  # padding
  - utility

**************************************************************************************************** */
/* ======================================================================

  上方向のパディング

====================================================================== */
.u-pt0 {
  padding-top: 0rem !important;
}

.u-pt1 {
  padding-top: 1rem !important;
}

.u-pt2 {
  padding-top: 2rem !important;
}

.u-pt3 {
  padding-top: 3rem !important;
}

.u-pt4 {
  padding-top: 4rem !important;
}

.u-pt5 {
  padding-top: 5rem !important;
}

.u-pt6 {
  padding-top: 6rem !important;
}

.u-pt7 {
  padding-top: 7rem !important;
}

.u-pt8 {
  padding-top: 8rem !important;
}

.u-pt9 {
  padding-top: 9rem !important;
}

.u-pt10 {
  padding-top: 10rem !important;
}

/* ======================================================================

  右方向のパディング

====================================================================== */
.u-pr0 {
  padding-right: 0rem !important;
}

.u-pr1 {
  padding-right: 1rem !important;
}

.u-pr2 {
  padding-right: 2rem !important;
}

.u-pr3 {
  padding-right: 3rem !important;
}

.u-pr4 {
  padding-right: 4rem !important;
}

.u-pr5 {
  padding-right: 5rem !important;
}

.u-pr6 {
  padding-right: 6rem !important;
}

.u-pr7 {
  padding-right: 7rem !important;
}

.u-pr8 {
  padding-right: 8rem !important;
}

.u-pr9 {
  padding-right: 9rem !important;
}

.u-pr10 {
  padding-right: 10rem !important;
}

/* ======================================================================

  下方向のパディング

====================================================================== */
.u-pb0 {
  padding-bottom: 0rem !important;
}

.u-pb1 {
  padding-bottom: 1rem !important;
}

.u-pb2 {
  padding-bottom: 2rem !important;
}

.u-pb3 {
  padding-bottom: 3rem !important;
}

.u-pb4 {
  padding-bottom: 4rem !important;
}

.u-pb5 {
  padding-bottom: 5rem !important;
}

.u-pb6 {
  padding-bottom: 6rem !important;
}

.u-pb7 {
  padding-bottom: 7rem !important;
}

.u-pb8 {
  padding-bottom: 8rem !important;
}

.u-pb9 {
  padding-bottom: 9rem !important;
}

.u-pb10 {
  padding-bottom: 10rem !important;
}

/* ======================================================================

  左方向のパディング

====================================================================== */
.u-pl0 {
  padding-left: 0rem !important;
}

.u-pl1 {
  padding-left: 1rem !important;
}

.u-pl2 {
  padding-left: 2rem !important;
}

.u-pl3 {
  padding-left: 3rem !important;
}

.u-pl4 {
  padding-left: 4rem !important;
}

.u-pl5 {
  padding-left: 5rem !important;
}

.u-pl6 {
  padding-left: 6rem !important;
}

.u-pl7 {
  padding-left: 7rem !important;
}

.u-pl8 {
  padding-left: 8rem !important;
}

.u-pl9 {
  padding-left: 9rem !important;
}

.u-pl10 {
  padding-left: 10rem !important;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # txt-align
  - utility

**************************************************************************************************** */
.u-txt-align-right {
  text-align: right !important;
}

.u-txt-align-center {
  text-align: center !important;
}

.u-txt-align-left {
  text-align: left !important;
}

@media print, screen and (min-width: 1024px) {
  .u-txt-align-center-mq-min-lg {
    text-align: center !important;
  }
}
@media print, screen and (min-width: 768px) {
  .u-txt-align-center-mq-min-md {
    text-align: center !important;
  }
}
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # txt-bold
  - utility

**************************************************************************************************** */
.u-txt-bold {
  font-weight: bold !important;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # txt-size
  - utility

**************************************************************************************************** */
.u-txt-size-xs {
  font-size: 1rem;
}
@media print, screen and (min-width: 768px) {
  .u-txt-size-xs {
    font-size: 1rem;
  }
}

.u-txt-size-s {
  font-size: 1.2rem;
}
@media print, screen and (min-width: 768px) {
  .u-txt-size-s {
    font-size: 1.2rem;
  }
}

.u-txt-size {
  font-size: 1.4rem;
}

@media print, screen and (min-width: 768px) {
  .u-txt-size {
    font-size: 1.6rem;
  }
}
.u-txt-size-m {
  font-size: 1.5rem;
}

@media print, screen and (min-width: 768px) {
  .u-txt-size-m {
    font-size: 1.7rem;
  }
}
.u-txt-size-l {
  font-size: 1.6rem;
}

@media print, screen and (min-width: 768px) {
  .u-txt-size-l {
    font-size: 1.8rem;
  }
}
.u-txt-size-xl {
  font-size: 1.8rem;
}

@media print, screen and (min-width: 768px) {
  .u-txt-size-xl {
    font-size: 2rem;
  }
}
.u-txt-size-xxl {
  font-size: 2rem;
}

@media print, screen and (min-width: 768px) {
  .u-txt-size-xxl {
    font-size: 2.2rem;
  }
}
.u-txt-size-404 {
  font-size: 4rem;
}

@media print, screen and (min-width: 768px) {
  .u-txt-size-404 {
    font-size: 7rem;
  }
}
/* ****************************************************************************************************

  # z-index
  - utility

**************************************************************************************************** */
.u-z-index-0 {
  z-index: 0 !important;
}

.u-z-index-1 {
  z-index: 1 !important;
}

.u-z-index-2 {
  z-index: 2 !important;
}

.u-z-index-3 {
  z-index: 3 !important;
}

.u-z-index-4 {
  z-index: 4 !important;
}

.u-z-index-5 {
  z-index: 5 !important;
}

.u-z-index-6 {
  z-index: 6 !important;
}

.u-z-index-7 {
  z-index: 7 !important;
}

.u-z-index-8 {
  z-index: 8 !important;
}

.u-z-index-9 {
  z-index: 9 !important;
}

.u-z-index-10 {
  z-index: 10 !important;
}

/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/* ****************************************************************************************************

  # width
  - utility

**************************************************************************************************** */
.u-w0 {
  width: 0rem !important;
}

.u-w1 {
  width: 1rem !important;
}

.u-w2 {
  width: 2rem !important;
}

.u-w3 {
  width: 3rem !important;
}

.u-w4 {
  width: 4rem !important;
}

.u-w5 {
  width: 5rem !important;
}

.u-w6 {
  width: 6rem !important;
}

.u-w7 {
  width: 7rem !important;
}

.u-w8 {
  width: 8rem !important;
}

.u-w9 {
  width: 9rem !important;
}

.u-w10 {
  width: 10rem !important;
}

.u-w11 {
  width: 11rem !important;
}

.u-w12 {
  width: 12rem !important;
}

.u-w13 {
  width: 13rem !important;
}

.u-w14 {
  width: 14rem !important;
}

.u-w15 {
  width: 15rem !important;
}

.u-w16 {
  width: 16rem !important;
}

.u-w17 {
  width: 17rem !important;
}

.u-w18 {
  width: 18rem !important;
}

.u-w19 {
  width: 19rem !important;
}

.u-w20 {
  width: 20rem !important;
}

.u-w21 {
  width: 21rem !important;
}

.u-w22 {
  width: 22rem !important;
}

.u-w23 {
  width: 23rem !important;
}

.u-w24 {
  width: 24rem !important;
}

.u-w25 {
  width: 25rem !important;
}

.u-w26 {
  width: 26rem !important;
}

.u-w27 {
  width: 27rem !important;
}

.u-w28 {
  width: 28rem !important;
}

.u-w29 {
  width: 29rem !important;
}

.u-w30 {
  width: 30rem !important;
}

.u-w-half {
  width: 50% !important;
}

.u-w-one-third {
  width: 33.333% !important;
}

@media print, screen and (max-width: 768px) {
  .u-sp-w0 {
    width: 0rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w1 {
    width: 1rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w2 {
    width: 2rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w3 {
    width: 3rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w4 {
    width: 4rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w5 {
    width: 5rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w6 {
    width: 6rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w7 {
    width: 7rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w8 {
    width: 8rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w9 {
    width: 9rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w10 {
    width: 10rem !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
@media print, screen and (max-width: 768px) {
  .u-sp-w-full {
    width: 100% !important;
  }
}
.u-w-full {
  width: 100%;
}

/* ****************************************************************************************************

  ## plugin
  - プラグイン用のcss

**************************************************************************************************** */
/* ****************************************************************************************************

  # base
  - foundation

**************************************************************************************************** */
/**************************\
  Basic Modal Styles
\**************************/
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.9);
  display: flex;
  flex-direction: column;
  row-gap: 4%;
  justify-content: center;
  align-items: center;
  z-index: 400;
  background-image: url("../images/parts/deco_dot-bar-v.svg"), url("../images/parts/deco_dot-bar-v.svg");
  background-repeat: no-repeat;
  background-size: 4rem auto, 4rem auto;
  background-position: top 4% left 5%, bottom 4% right 4%;
}

@media print, screen and (min-width: 768px) {
  .modal__overlay {
    background-size: 6% auto, 6% auto;
    background-position: top 8% left 6%, bottom 8% right 6%;
  }
}
.modal__container {
  background-color: #fff;
  max-width: 1200px;
  width: 88%;
  max-height: 100vh;
  height: 68%;
  overflow: clip;
  border-radius: 4px;
  box-sizing: border-box;
}

@media print, screen and (min-width: 768px) {
  .modal__container {
    height: 70%;
  }
}
.modal__close-wrapper {
  position: absolute;
  top: 3%;
  right: 7%;
  width: 4rem;
  height: 4rem;
  border: 2px solid white;
  border-radius: 50px;
}

@media print, screen and (min-width: 768px) {
  .modal__close-wrapper {
    top: 4%;
  }
}
.modal__close {
  background: transparent;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.modal__close-wrapper .modal__close:before {
  content: "✕";
  font-size: 2rem;
  color: white;
}

@media print, screen and (min-width: 768px) {
  .modal__close-wrapper .modal__close:before {
    content: "✕";
    font-size: 1.8rem;
  }
}
.modal__content {
  line-height: 1.5;
  width: 100%;
  height: 100%;
  padding: 0;
  color: rgba(0, 0, 0, 0.8);
  overflow-y: scroll;
}

.modal__content {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.modal__content::-webkit-scrollbar {
  display: none; /* WebKit ブラウザ (Chrome, Safari) */
}

/**************************\
  予約ボタン
\**************************/
.modal__overlay .c-button {
  width: 80%;
}

/**************************\
  貸切モーダル
\**************************/
#modal-kashikiri-info .modal__overlay {
  background-image: none;
}

#modal-kashikiri-info .modal__container {
  background-color: transparent;
  max-width: 80%;
  width: fit-content;
  max-height: none;
  height: fit-content;
  border-radius: 0;
}

#modal-kashikiri-info .modal__container img {
  width: 80vw;
  object-fit: contain;
  max-height: 90vh;
}

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

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

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

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

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

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

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

/**
    * Reinstate scrolling for non-JS clients
*/
[data-simplebar] {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

[data-simplebar]::-webkit-scrollbar {
  display: none; /* WebKit ブラウザ (Chrome, Safari) */
}

.simplebar-content-wrapper {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  display: initial;
  width: initial;
  height: initial;
}