@charset "UTF-8";
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
/**
 * Shopify 用
 */
/**
 * カラー
 */
/**
 * フォントカラー
 */
/**
 * breakpoints
 * @usepath /scss/foundation/_mixin.scss
 */
/**
 * utility value
 * @usepath /scss/foundation/_mixin.scss
 * margin や padding の utility で活用
 */
/**
 * mq()
 * ブレイクポイントを定義
 * https://zenn.dev/tak_dcxi
 */
/**
 * utility spaces auto create
 * utility で隙間を司る margin, padding の class を variable の utilityValue 分自動で生成
 */
/*!
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */
/* # =================================================================
   # Global selectors
   # ================================================================= */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

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

hr {
  overflow: visible; /* Show the overflow in Edge and IE */
}

/*
* Correct `block` display not defined for any HTML5 element in IE 8/9
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox
* Correct `block` display not defined for `main` in IE 11
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

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

small {
  font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden],
template {
  display: none; /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: 1px dotted; /* Add a bordered underline effect in all browsers */
  text-decoration: none; /* Remove text decoration in Firefox 40+ */
}

a {
  background-color: transparent; /* Remove the gray background on active links in IE 10 */
  -webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+ */
}

a:active,
a:hover {
  outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* Specify the font family of code elements */
}

b,
strong {
  font-weight: bolder; /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */
}

dfn {
  font-style: italic; /* Address styling not present in Safari and Chrome */
}

/* Address styling not present in IE 8/9 */
mark {
  background-color: #ff0;
  color: #000;
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* # =================================================================
   # Forms
   # ================================================================= */
input {
  border-radius: 0;
}

/* Apply cursor pointer to button elements */
button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
  cursor: pointer;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

[type=number] {
  width: auto; /* Firefox 36+ */
}

[type=search] {
  -webkit-appearance: textfield; /* Safari 8+ */
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; /* Safari 8 */
}

textarea {
  overflow: auto; /* Internet Explorer 11+ */
  resize: vertical; /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold; /* Restore the font weight unset by the previous rule. */
}

button {
  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

button,
select {
  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

/* Style select like a standard input */
select {
  -moz-appearance: none; /* Firefox 36+ */
  -webkit-appearance: none; /* Chrome 41+ */
}

select::-ms-expand {
  display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor; /* Internet Explorer 11+ */
}

legend {
  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge and IE */
  white-space: normal; /* Correct the text wrapping in Edge and IE */
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

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

/* # =================================================================
   # Specify media element style
   # ================================================================= */
img {
  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden; /* Internet Explorer 11- */
}

audio,
canvas,
progress,
video {
  display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */
}

/* # =================================================================
   # Accessibility
   # ================================================================= */
/* Hide content from screens but not screenreaders */
@media screen {
  [hidden~=screen] {
    display: inherit;
  }
  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}

/* # =================================================================
   # Selection
   # ================================================================= */
/* Specify text selection background color and omit drop shadow */
::-moz-selection {
  background-color: #b3d4fc; /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc; /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
/*
---
name: foundation/_f-base.scss
category: body
---

/**
 * オリジナルリセット設定
 * 2019/02/28
 */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: inherit;
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #222;
  overflow-y: visible;
}

html,
body {
  width: 100%;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
ol,
dl,
dt,
dd,
figure {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}

p {
  line-height: 1.8;
}

a {
  font-weight: 400;
  cursor: pointer;
  color: #0f1350;
  text-decoration: none;
}

a:hover {
  color: #0f1350;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  line-height: 1;
}

ul,
li {
  list-style: none;
}

small {
  font-size: inherit;
}

textarea {
  resize: vertical;
  vertical-align: bottom;
}

/**
 * Layout
 */
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 0;
  -webkit-box-shadow: 0px 1px 0px rgba(15, 19, 80, 0.1);
  box-shadow: 0px 1px 0px rgba(15, 19, 80, 0.1);
  border-bottom: none;
}

.l-header__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 64px;
  padding: 0 12px 0 16px;
  background-color: #fff;
}

.l-header__menu {
  display: none;
}

@media (min-width: 1340px) {
  .l-header__menu__list--category {
    display: block;
  }
}
.l-header__menu__list a,
.l-header__menu__list__popover {
  line-height: 1.2;
}

.l-header__cta {
  display: none;
}

@media screen and (min-width: 768px) {
  .l-header__container {
    padding: 0 24px;
  }
  .l-header__menu__lists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    gap: 0px 12px;
  }
  .l-header__menu__list a,
  .l-header__menu__list__popover {
    display: block;
    padding: 4px 4px;
    font-size: 1.4rem;
    color: #0f1350;
  }
  .l-header__menu__list__popover:hover {
    color: #222;
    text-decoration: underline;
  }
  .l-header__menu__list__popover__menu {
    margin-top: 8px;
    padding: 8px;
    background-color: #fff;
    border: 1px solid rgba(15, 19, 80, 0.1);
    border-radius: 8px;
    -webkit-box-shadow: 0px 1px 0px rgba(15, 19, 80, 0.1);
    box-shadow: 0px 1px 0px rgba(15, 19, 80, 0.1);
    position-area: bottom span-right;
  }
  .l-header__menu__list__popover__menu__lists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
  }
}
@media screen and (min-width: 992px) {
  .l-header__container {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
    height: 96px;
    padding: 0 48px;
  }
  .l-header__menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .l-header__menu__lists {
    gap: 0px 8px;
  }
  .l-header__menu__list a:hover {
    color: #222;
  }
  .l-header__cta {
    display: block;
  }
}
@media screen and (min-width: 1200px) {
  .l-header__menu__lists {
    gap: 0px 12px;
  }
  .l-header__menu__list a,
  .l-header__menu__list__popover {
    font-size: 1.6rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.l-sidebar {
  display: grid;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 24px;
}

@media screen and (min-width: 992px) {
  .l-sidebar {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
.l-sidebar__aside {
  display: grid;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px;
}

.l-sidebar__aside__heading {
  font-size: 2.1rem;
  font-weight: 500;
}

.l-sidebar__aside__lists {
  display: grid;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.l-sidebar__aside__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.l-sidebar__aside__list a {
  display: block;
  padding: 6px 8px;
  font-size: 1.2rem;
  line-height: 1;
  color: #0f1350;
  background-color: #fff;
  border: 1px solid #0f1350;
  border-radius: 4px;
}

.l-sidebar__aside__shop__list a {
  color: #fff;
  background-color: #0f1350;
}

.l-sidebar__aside__tag__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.l-sidebar__aside__tag__list a {
  padding: 6px 12px;
  border-radius: 32px;
}

@media screen and (min-width: 768px) {
  .l-sidebar__aside__list a {
    font-size: 1.4rem;
  }
  .l-sidebar__aside__list a:hover {
    color: #0f1350;
    background-color: rgb(220.0526315789, 221.8, 248.4473684211);
    text-decoration: none;
  }
  .l-sidebar__aside__shop__list a:hover {
    color: #fff;
    background-color: rgb(28.1052631579, 35.6, 149.8947368421);
  }
}
.l-sidebar__aside__ranking__lists {
  counter-reset: listnum;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px 8px;
}

.l-sidebar__aside__ranking__list {
  position: relative;
  display: grid;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 8px;
}

.l-sidebar__aside__ranking__list::before {
  counter-increment: listnum;
  content: counter(listnum);
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: rgb(234.6, 234.6, 234.6);
  text-align: center;
  border-radius: 0px 4px 0px 4px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
}

.l-sidebar__aside__ranking__list:nth-child(1)::before {
  color: #111;
  background-color: #e2c21b;
}

.l-sidebar__aside__ranking__list:nth-child(2)::before {
  color: #333;
  background-color: #d0d0ce;
}

.l-sidebar__aside__ranking__list:nth-child(3)::before {
  color: #fff;
  background-color: #bb804f;
}

.l-sidebar__aside__ranking__list__thumbnail {
  position: relative;
  border: 1px solid rgb(234.6, 234.6, 234.6);
  overflow: hidden;
  border-radius: 6px;
}

.l-sidebar__aside__ranking__list__meta {
  position: absolute;
  z-index: 2;
}

.l-sidebar__aside__ranking__list__meta a,
.l-sidebar__aside__ranking__list__meta__list a {
  display: block;
  padding: 2px 4px;
  font-size: 1rem;
}

.l-sidebar__aside__ranking__list__category {
  top: 4px;
  left: 4px;
}

.l-sidebar__aside__ranking__list__category__list a {
  border: 1px solid #0f1350;
  border-radius: 2px;
  background-color: #fff;
  color: #0f1350;
}

.l-sidebar__aside__ranking__list__shop {
  right: 4px;
  bottom: 4px;
}

.l-sidebar__aside__ranking__list__shop a {
  color: #fff;
  background-color: #0f1350;
  border: 1px solid #0f1350;
  border-radius: 2px;
}

.l-sidebar__aside__ranking__list__title {
  font-size: 1.2rem;
  line-height: 1.4;
}

.l-sidebar__aside__ranking__list__title a {
  font-weight: 500;
}

.l-sidebar__aside__ranking__list__date {
  display: grid;
  grid-template-columns: repeat(2, auto);
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .l-sidebar__aside__ranking__lists {
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
  }
  .l-sidebar__aside__ranking__list::before {
    border-radius: 0px 8px 0px 8px;
  }
  .l-sidebar__aside__ranking__list__thumbnail a img {
    -webkit-transition: 0.18s ease-in-out;
    transition: 0.18s ease-in-out;
  }
  .l-sidebar__aside__ranking__list__thumbnail a:hover img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  .l-sidebar__aside__ranking__list__meta a,
  .l-sidebar__aside__ranking__list__meta__list a {
    font-size: 1.2rem;
  }
  .l-sidebar__aside__ranking__list__category {
    top: 8px;
    left: 8px;
  }
  .l-sidebar__aside__ranking__list__category__list a:hover {
    color: #0f1350;
    background-color: rgb(220.0526315789, 221.8, 248.4473684211);
  }
  .l-sidebar__aside__ranking__list__shop {
    right: 8px;
    bottom: 8px;
  }
  .l-sidebar__aside__ranking__list__shop a:hover {
    color: #fff;
    background-color: rgb(28.1052631579, 35.6, 149.8947368421);
  }
  .l-sidebar__aside__ranking__list__title {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .l-sidebar__aside__ranking__list__date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
  }
  .l-sidebar__aside__ranking__list__date:not(:has(li:only-child)) {
    gap: 1em;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.l-wrapper {
  position: relative;
}

.l-container {
  width: 100%;
  margin-inline: auto;
  padding: 24px 16px;
}

.l-container--no-padding {
  width: 100%;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .l-container {
    padding: 24px 32px;
  }
  .l-container__md {
    max-width: 640px;
  }
}
@media screen and (min-width: 992px) {
  .l-container {
    padding: 32px 48px;
  }
  .l-container__lg {
    max-width: 960px;
  }
  .l-container__xl {
    max-width: 1296px;
  }
}
.l-container__body {
  padding: 24px 0 48px;
}

@media screen and (min-width: 768px) {
  .l-container__body {
    padding: 48px 0;
  }
}
.l-section__heading {
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
  color: #0f1350;
}

@media screen and (min-width: 768px) {
  .l-section__heading {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 992px) {
  .l-section__heading {
    font-size: 2.8rem;
  }
}
.l-section__body {
  width: 100%;
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .l-section__body {
    margin-top: 32px;
  }
}
@media screen and (min-width: 992px) {
  .l-section__body {
    margin-top: 40px;
  }
}
.l-cards {
  display: grid;
}

.l-card {
  width: 100%;
}

.l-card img {
  width: 100%;
}

.l-cards__gap-8 {
  gap: 8px;
}

.l-cards__gap-12 {
  gap: 12px;
}

.l-cards__gap-16 {
  gap: 16px;
}

.l-cards__2col {
  grid-template-columns: repeat(2, 1fr);
}

.l-cards__3col {
  grid-template-columns: repeat(3, 1fr);
}

.l-cards__4col {
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (min-width: 768px) {
  .l-cards__gap-8--md {
    gap: 8px;
  }
  .l-cards__gap-16--md {
    gap: 16px;
  }
  .l-cards__gap-24--md {
    gap: 24px;
  }
  .l-cards__gap-32--md {
    gap: 32px;
  }
  .l-cards__2col--md {
    grid-template-columns: repeat(2, 1fr);
  }
  .l-cards__3col--md {
    grid-template-columns: repeat(3, 1fr);
  }
  .l-cards__4col--md {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 992px) {
  .l-cards__gap-8--lg {
    gap: 8px;
  }
  .l-cards__gap-16--lg {
    gap: 16px;
  }
  .l-cards__gap-24--lg {
    gap: 24px;
  }
  .l-cards__gap-32--lg {
    gap: 32px;
  }
  .l-cards__gap-40--lg {
    gap: 40px;
  }
  .l-cards__2col--lg {
    grid-template-columns: repeat(2, 1fr);
  }
  .l-cards__3col--lg {
    grid-template-columns: repeat(3, 1fr);
  }
  .l-cards__4col--lg {
    grid-template-columns: repeat(4, 1fr);
  }
}
.l-related__card__inner {
  display: block;
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.l-footer {
  padding: 0;
  background-color: inherit;
}

.l-footer__container {
  max-width: 1296px;
  margin-inline: auto;
  padding: 40px 16px 32px 16px;
}

.l-footer__logo__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.l-footer__logo a {
  justify-items: center;
}

.l-footer__menus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.l-footer__menus a {
  display: block;
  padding: 4px;
  line-height: 1;
  color: #222;
}

@media screen and (min-width: 768px) {
  .l-footer__menus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 24px;
  }
}
.l-footer__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.l-footer__recaptcha {
  font-size: 1.2rem;
  color: #0f1350;
  text-align: center;
}

.l-footer__recaptcha a {
  color: #0f1350;
  text-decoration: underline;
}

.l-footer__recaptcha a:hover {
  color: rgb(28.1052631579, 35.6, 149.8947368421);
  text-decoration: underline;
}

.l-footer__copyright {
  text-align: center;
  color: #0f1350;
  font-size: 1.4rem;
}

.grecaptcha-badge {
  visibility: hidden;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.l-burger-button {
  position: sticky;
  top: 12px;
  right: 12px;
  z-index: 1000000;
}

@media screen and (min-width: 768px) {
  .l-burger-button {
    top: 14px;
  }
}
@media screen and (min-width: 992px) {
  .l-burger-button {
    display: none;
  }
}
.l-mobile-menu {
  position: fixed;
  z-index: 100000;
  top: 0px;
  right: -100%;
  width: 100%;
  height: calc(100lvh - 0px);
  background-color: #fff;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

@media screen and (min-width: 768px) {
  .l-mobile-menu {
    top: 90px;
  }
}
.is-active.l-mobile-menu {
  right: 0%;
}

.l-mobile-menu__container {
  padding: 64px 0 0 0;
}

.l-mobile-menu__series {
  padding: 16px 16px 0 16px;
}

.l-mobile-menu__series__heading {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: #0f1350;
}

.l-mobile-menu__series__body {
  margin-top: 16px;
}

.l-mobile-menu__search {
  padding: 24px 16px 0 16px;
}

.l-mobile-menu__search__heading {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: #0f1350;
}

.l-mobile-menu__search__body {
  margin-top: 16px;
}

.l-mobile-menu__navigation {
  padding: 24px 16px 0 16px;
}

.l-mobile-menu__navigation__lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.l-mobile-menu__navigation__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.l-mobile-menu__navigation__list a {
  display: block;
  padding: 16px 8px;
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: underline;
}

.l-mobile-menu__contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 32px;
}

.l-mobile-menu__phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 32px;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
/**
 * memo: _burger-button-2line との違いはspanが存在しているかだけです。
 * _burger-button-2line にはspanがありません。
 */
.l-burger-button {
  width: 40px;
  height: 40px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.l-burger-button:focus {
  outline: none;
}
.l-burger-button span, .l-burger-button::before, .l-burger-button::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: #0f1350;
  position: absolute;
  top: 20px;
  left: 6px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
.l-burger-button::before {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}
.l-burger-button::after {
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
}
.l-burger-button.is-active {
  background-color: #fff;
}
.l-burger-button.is-active span {
  opacity: 0;
}
.l-burger-button.is-active::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.l-burger-button.is-active::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.l-2b-cta__bg {
  padding: 72px 0 72px 0;
  background-image: url(//prodig-rental.com/cdn/shop/t/11/assets/2b-common-cta-bg-mobile.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

@media screen and (min-width: 768px) {
  .l-2b-cta__bg {
    background-color: rgba(0, 0, 0, 0.05);
    background-image: url(//prodig-rental.com/cdn/shop/t/11/assets/2b-common-cta-bg-desktop.png);
    background-size: contain;
  }
}
.l-2b-cta__container {
  position: relative;
  width: calc(100% - 28px);
  margin: 0 auto;
  padding: 0 0 40px 0;
  background-color: #fff;
  border-radius: 24px;
}

.l-2b-cta__heading {
  position: relative;
  top: -30px;
  color: #0f1350;
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
}

.l-2b-cta__sub-heading {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.l-2b-cta__grid {
  margin-top: 32px;
}

.l-2b-cta__ornament {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.l-2b-cta__phone__number {
  margin-top: 32px;
  text-align: center;
}

.l-2b-cta__phone__number a {
  font-size: 3.6rem;
  font-weight: 900;
  color: #c79f6c;
  line-height: 1;
}

.l-2b-cta__phone__text {
  margin-top: 32px;
  text-align: center;
}

.l-2b-cta__others {
  margin-top: 32px;
}

.l-2b-cta__others__text {
  margin-top: 32px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.l-2b-cta__button__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 24px;
}

.l-2b-cta__button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 240px;
  padding: 24px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  color: #fff;
  background-color: #c79f6c;
  border-radius: 48px;
}

.l-2b-cta__button__line {
  margin-top: 16px;
}

.l-2b-cta__button__line__icon {
  margin-right: 8px;
}

.l-2b-cta__button__contact__icon__arrow {
  margin-left: 8px;
}

.l-2b-cta__button__line__icon__arrow {
  margin-left: 8px;
}

.l-2b-cta__text {
  margin-top: 40px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #0f1350;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .l-2b-cta__container {
    max-width: 960px;
    padding: 0 40px 40px 40px;
  }
  .l-2b-cta__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .l-2b-cta__others {
    margin-top: 0px;
  }
  .l-2b-cta__button__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .l-2b-cta__button__line {
    margin-top: 0px;
    margin-left: 16px;
  }
  .l-2b-cta__button__icon__arrow {
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
  }
  .l-2b-cta__button a:hover .l-2b-cta__button__icon__arrow {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
}
/**
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 */
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-logo a {
  display: grid;
  gap: 4px;
  color: #0f1350;
}

.c-logo__image {
  display: block;
  width: 140px;
}

.c-logo__desc {
  display: block;
  font-size: 1rem;
}

@media screen and (min-width: 992px) {
  .c-logo {
    width: 200px;
  }
  .c-logo a:hover {
    color: #0f1350;
    text-decoration: none;
  }
  .c-logo__image {
    width: 200px;
  }
  .c-logo__desc {
    text-align: center;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-breadcrumbs__block {
  margin-top: 24px;
  font-size: 1.4rem;
}

@media screen and (min-width: 768px) {
  .c-breadcrumbs__block {
    font-size: 1.6rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-series__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.c-series__card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #0f1350;
  border-radius: 8px;
}

.c-series__card:hover .c-series__card__thumbnail img {
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}

.c-series__card__thumbnail {
  width: 100%;
  max-width: 80px;
  margin-inline: auto;
  overflow: hidden;
}

.c-series__card__heading {
  font-size: 1.4rem;
  text-align: center;
}

.c-series__card__heading a:hover {
  color: #222;
  text-decoration: none;
}

.c-series__card__heading a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .c-series__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .c-series__card {
    grid-template-columns: 0.8fr 1.2fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .c-series__card:hover .c-series__card__thumbnail img {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }
  .c-series__card__heading {
    margin-top: 0;
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 992px) {
  .c-series__cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .c-series__card__heading {
    font-size: 2.1rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-button__primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c-button__primary a {
  display: block;
  width: 100%;
  max-width: 240px;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  padding: 16px 0;
  line-height: 1;
  color: #0f1350;
  text-align: center;
  background-color: rgba(15, 19, 80, 0.1);
}

@media screen and (min-width: 768px) {
  .c-button__primary a:hover {
    color: #fff;
    background-color: #0f1350;
    text-decoration: none;
  }
}
.c-button__secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c-button__secondary a {
  display: block;
  width: 100%;
  max-width: 240px;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  padding: 16px 0;
  line-height: 1;
  color: #fff;
  text-align: center;
  background-color: #0f1350;
}

@media screen and (min-width: 768px) {
  .c-button__secondary a:hover {
    color: #fff;
    background-color: rgba(15, 19, 80, 0.7);
    text-decoration: none;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-form__label:nth-child(n+2) {
  margin-top: 16px;
}

.c-form__label__name .is-required::after {
  content: "※";
  font-size: 1rem;
  color: #e91e63;
  vertical-align: top;
}

.c-form__label__input {
  margin-top: 4px;
}

.c-form__label__input__inner--scheduled {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
}

.c-form__label__notice {
  margin-top: 8px;
  font-size: 1.4rem;
}

.c-form__label__input__type--input[type=text] {
  height: auto;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  width: 100%;
}

.c-form__label__input__type--email[type=email] {
  height: auto;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  width: 100%;
}

.c-form__label__input__type--tel[type=tel] {
  height: auto;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  width: 100%;
}

.c-form__label__input__type--textarea {
  height: auto;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  width: 100%;
  min-height: 128px;
}

@media screen and (min-width: 768px) {
  .c-form__label__input__type--textarea {
    min-height: 120px;
  }
}
.c-form__label__input__type--select {
  height: auto;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  width: 100%;
}

.c-form__label__input__type--select-time {
  height: auto;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  width: 80px;
}

.c-form__label__input__type--date[type=date] {
  height: auto;
  padding: 7px 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  width: 100%;
}

.c-form__label__submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.c-form__label__submit input[type=submit] {
  height: auto;
  padding: 8px;
  font-size: 1.6rem;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  width: calc(50% - 8px);
  padding: 16px 0;
  line-height: 1;
  color: #0f1350;
  background-color: rgba(15, 19, 80, 0.1);
  -webkit-transition: none;
  transition: none;
}

.c-form__label__submit input[type=submit]:hover {
  color: #fff;
  background-color: #0f1350;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-cta--phone {
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c-cta--phone__block a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #0f1350;
}

.c-cta--phone__block a:hover {
  color: #222;
  text-decoration: none;
}

.c-cta--phone__block__icon {
  display: block;
  width: 32px;
  height: 32px;
}

.c-cta--phone__block__icon svg {
  display: block;
}

.c-cta--phone__block__number {
  display: block;
  padding-bottom: 3px;
  font-size: 2.4rem;
  line-height: 1;
}

.c-cta--phone__hours {
  font-size: 1.4rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .c-cta--phone__block__number {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 992px) {
  .c-cta--phone__block__number {
    font-size: 2.8rem;
  }
}
@media screen and (min-width: 1200px) {
  .c-cta--phone__block__number {
    font-size: 3.2rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-cta__panel {
  padding: 24px 16px;
  background-color: rgba(15, 19, 80, 0.1);
  border: 1px solid #0f1350;
  border-radius: 16px;
}

.c-cta__heading {
  font-size: 2.1rem;
  font-weight: 700;
  color: #0f1350;
  text-align: center;
}

.c-cta__panel__body {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.c-cta__panel__tel__label {
  margin-top: 16px;
  border-radius: 8px;
  text-align: center;
}

.c-cta__panel__tel__label__business {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.5em;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.c-cta__panel__tel__label__notice {
  margin-top: 8px;
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .c-cta__container {
    max-width: 840px;
    margin-inline: auto;
  }
  .c-cta__panel__body {
    grid-template-columns: repeat(2, 1fr);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 24px;
  }
  .c-cta__panel__tel__label__notice {
    font-size: 1.4rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-hone__store__info__thumbnail img {
  width: 100%;
  height: auto;
}

.c-shop__info__table {
  margin-top: 16px;
}

.c-shop__info__table th,
.c-shop__info__table td {
  padding: 8px 0;
}

.c-shop__info__table td {
  padding-left: 16px;
}

.c-shop__map {
  width: 100%;
  margin-top: 16px;
  aspect-ratio: 16/9;
}

.c-shop__map iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .c-shop__body {
    display: grid;
    grid-template-columns: calc(50% - 16px) calc(50% - 16px);
    gap: 24px;
  }
  .c-shop__info {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .c-shop__info__table {
    margin-top: 24px;
  }
  .c-shop__info__table th {
    width: 120px;
  }
  .c-shop__map {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin-top: 0;
    aspect-ratio: 8/7;
  }
}
@media screen and (min-width: 992px) {
  .c-shop__body {
    grid-template-columns: calc(50% - 16px) calc(50% - 16px);
    gap: 32px;
  }
  .c-shop__map {
    aspect-ratio: 8/6;
  }
}
@media screen and (min-width: 1200px) {
  .c-shop__body {
    grid-template-columns: calc(55% - 16px) calc(45% - 16px);
  }
  .c-shop__map {
    aspect-ratio: 5/3;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-product-list__cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
}

.c-product-list__cards:nth-child(n+2) {
  margin-top: 24px;
}

.c-product-list__card {
  position: relative;
  padding: 6px 6px 8px 12px;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
}

.c-product-list__card:hover {
  border: 1px solid #0f1350;
  background-color: rgba(15, 19, 80, 0.04);
}

.c-product-list__card__heading {
  display: grid;
  grid-template-columns: 1fr auto;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #0f1350;
  font-size: 1.2rem;
  line-height: 1.2;
}

.c-product-list__card__button a {
  display: block;
  padding: 6px 8px;
  font-size: 1rem;
  line-height: 1;
  color: #0f1350;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
}

.c-product-list__card__button a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.c-product-list__card__button a:hover {
  text-decoration: none;
  color: #fff;
  border: 1px solid #0f1350;
  background-color: #0f1350;
}

@media screen and (min-width: 768px) {
  .c-product-list__card__button a {
    padding: 8px 8px;
    font-size: 1.2rem;
  }
}
.c-product-list__card__products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 4px;
}

.c-product-list__card__product {
  display: grid;
  gap: 8px;
}

.c-product-list__card__product__heading {
  font-size: 1rem;
  font-weight: 700;
}

.c-product-list__card__product__body {
  display: grid;
  gap: 12px;
}

.c-product-list__card__product__amount {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 1rem;
}

.c-product-list__card__product__amount__value {
  display: block;
  color: #e91e63;
  font-weight: 700;
}

.c-product-list__card__product__button a {
  display: block;
  padding: 8px 12px;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
  color: #0f1350;
  border: 1px solid #0f1350;
  border-radius: 4px;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .c-product-list__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .c-product-list__cards:nth-child(n+2) {
    margin-top: 40px;
  }
  .c-product-list__card {
    padding: 6px 6px 8px 12px;
  }
  .c-product-list__card__heading {
    font-size: 1.4rem;
  }
  .c-product-list__card__products {
    grid-template-columns: repeat(4, 1fr);
  }
  .c-product-list__card__product__heading {
    font-size: 1.2rem;
  }
  .c-product-list__card__product__body {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .c-product-list__card__product__amount {
    font-size: 1.2rem;
  }
  .c-product-list__card__product__button a {
    padding: 12px 0;
    font-size: 1.4rem;
  }
  .c-product-list__card__product__button a:hover {
    text-decoration: none;
    color: #fff;
    border: 1px solid #0f1350;
    background-color: #0f1350;
  }
}
@media screen and (min-width: 992px) {
  .c-product-list__card__product__amount__value {
    display: block;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-categories {
  padding: 24px 0 16px;
}

@media screen and (min-width: 768px) {
  .c-categories {
    padding: 24px 0 0px;
  }
}
.c-categories__heading {
  font-size: 1.6rem;
  font-weight: 500;
}

.c-categories__lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 16px;
}
@media screen and (min-width: 992px) {
  .c-categories__lists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
  }
}

.c-categories__list {
  position: relative;
}

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

.c-categories__list__thumbnail--no-image {
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

.c-categories__list__name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.2;
}

.c-categories__list__name a {
  display: block;
  width: 100%;
  padding: 12px 12px;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  line-height: 1;
  font-size: 1.2rem;
  color: #222;
}

.c-categories__list__name a:hover {
  color: #fff;
  background-color: #0f1350;
  text-decoration: none;
}

.c-categories__list__name a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .c-categories__list__name a {
    font-size: 1.4rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-categories-thumbnail {
  padding: 24px 0 16px;
}

@media screen and (min-width: 768px) {
  .c-categories-thumbnail {
    padding: 24px 0 0px;
  }
}
.c-categories-thumbnail__heading {
  font-size: 1.6rem;
  font-weight: 500;
}

.c-categories-thumbnail__lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 16px;
}
@media screen and (min-width: 992px) {
  .c-categories-thumbnail__lists {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 16px;
  }
}

.c-categories-thumbnail__list {
  position: relative;
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 12px;
}

.c-categories-thumbnail__list__thumbnail img {
  max-width: 100%;
  height: auto;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

.c-categories-thumbnail__list__thumbnail--no-image {
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

.c-categories-thumbnail__list__name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.2;
}

.c-categories-thumbnail__list__name a {
  display: block;
  width: 100%;
  border-radius: 4px;
  line-height: 1;
  font-size: 1.2rem;
}

.c-categories-thumbnail__list__name a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.c-categories-thumbnail__list:hover img {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

@media screen and (min-width: 768px) {
  .c-categories-thumbnail__list__name a {
    font-size: 1.4rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-grade__card {
  display: grid;
  gap: 24px;
  padding: 12px;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 8px;
}

.c-grade__card--no-grid {
  display: block;
}

.c-grade__card:nth-child(n+2) {
  margin-top: 24px;
}

.c-grade__card__body__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c-grade__card__body__heading {
  font-size: 1.8rem;
  font-weight: 500;
}

.c-grade__card__body__label {
  display: inline-block;
  padding: 8px 16px;
  font-size: 1.4rem;
  color: #0f1350;
  line-height: 1;
  border-radius: 4px;
  background-color: rgba(15, 19, 80, 0.1);
}

.c-grade__card__lists {
  margin-top: 16px;
  margin-left: 1.5em;
  font-size: 1.4rem;
}

.c-grade__card__lists li {
  list-style: disc;
}

.c-grade__card__lists li:nth-child(n+2) {
  margin-top: 4px;
}

@media screen and (min-width: 768px) {
  .c-grade__card {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    padding: 16px;
  }
  .c-grade__card__body__header {
    display: block;
  }
  .c-grade__card__body__heading {
    font-size: 2.4rem;
  }
  .c-grade__card__body__label {
    margin-top: 16px;
  }
}
@media screen and (min-width: 992px) {
  .c-grade__card__body__heading {
    font-size: 2.8rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-patination__wrapper {
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-bottom: 32px;
}

.c-patination__wrapper > .page-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}

.c-patination__wrapper > .page-numbers .current,
.c-patination__wrapper > .page-numbers a {
  display: block;
  padding: 12px 12px;
  min-width: 40px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  background-color: rgba(15, 19, 80, 0.1);
}

.c-patination__wrapper > .page-numbers .current {
  border: 1px solid rgba(15, 19, 80, 0.7);
  background-color: rgba(15, 19, 80, 0.4);
}

.c-patination__wrapper > .page-numbers .dots {
  display: block;
  padding: 12px 12px;
  min-width: 40px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
}

.c-patination__wrapper > .page-numbers a:hover {
  color: #fff;
  text-decoration: none;
  border: 1px solid #0f1350;
  background-color: #0f1350;
}

@media screen and (min-width: 768px) {
  .c-patination__wrapper {
    margin-top: 56px;
    padding-bottom: 16px;
  }
}
.c-pagination__archive {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
  grid-column: 1/3;
}

.c-pagination__archive__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.c-pagination__archive__lists .current,
.c-pagination__archive__lists a {
  display: block;
  padding: 12px 12px;
  min-width: 40px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
}

.c-pagination__archive__lists .current {
  color: #fff;
  border: 1px solid #0f1350;
  background-color: #0f1350;
}

.c-pagination__archive__lists .dots {
  display: block;
  padding: 12px 12px;
  min-width: 40px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
}

.c-pagination__archive__lists a:hover {
  color: #fff;
  text-decoration: none;
  border: 1px solid #0f1350;
  background-color: #0f1350;
}

.c-pagination__single {
  margin-top: 40px;
}

.c-pagination__single__label {
  color: #0f1350;
  font-weight: 500;
}

.c-pagination__single__label--prev {
  text-align: left;
}

.c-pagination__single__next {
  display: grid;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 8px;
}

.c-pagination__single__label--next {
  text-align: right;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-page-top {
  position: fixed;
  right: 8px;
  bottom: 16px;
  z-index: 10;
  width: 56px;
  height: 56px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #0f1350;
  color: #fff;
  border-radius: 64px;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 2px rgb(255, 255, 255);
  box-shadow: 0px 0px 2px rgb(255, 255, 255);
}

@media screen and (min-width: 768px) {
  .c-page-top {
    right: 24px;
    bottom: 64px;
  }
}
.c-page-top__inner {
  margin-top: -8px;
  line-height: 1;
}

.c-page-top__inner svg {
  display: block;
  width: 32px;
  height: 32px;
}

.c-page-top__icon {
  line-height: 1;
}

.c-page-top__text {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-wp-post-contents {
  font-size: 1.4rem;
}
.c-wp-post-contents h2,
.c-wp-post-contents h3,
.c-wp-post-contents h4,
.c-wp-post-contents h5,
.c-wp-post-contents h6,
.c-wp-post-contents p {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.c-wp-post-contents h2 {
  margin-top: 32px;
  font-weight: 500;
  font-size: 1.8rem;
  padding: 12px 12px;
  color: #fff;
  background-color: #0f1350;
}
.c-wp-post-contents h3,
.c-wp-post-contents h4,
.c-wp-post-contents h5,
.c-wp-post-contents h6 {
  margin-top: 24px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
}
.c-wp-post-contents h3 {
  padding: 8px 8px 8px 12px;
  border-left: 4px solid #0f1350;
  background-color: rgb(241.0210526316, 241.72, 252.3789473684);
  line-height: 1.4;
}
.c-wp-post-contents p {
  margin-top: 24px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.c-wp-post-contents p:first-child {
  margin-top: 0;
}
.c-wp-post-contents .wp-block-table {
  overflow-x: scroll;
  margin-top: 24px;
}
.c-wp-post-contents table.has-fixed-layout {
  min-width: 540px;
}
.c-wp-post-contents table.has-fixed-layout th,
.c-wp-post-contents table.has-fixed-layout td {
  font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
  .c-wp-post-contents table.has-fixed-layout th,
  .c-wp-post-contents table.has-fixed-layout td {
    font-size: 1.4rem;
  }
}
.c-wp-post-contents .wp-block-cover,
.c-wp-post-contents .wp-block-columns {
  width: 100%;
  margin-top: 24px;
  padding: 0 24px;
}
.c-wp-post-contents .wp-block-cover img {
  width: 100%;
  height: auto;
}
.c-wp-post-contents .wp-block-columns p {
  padding: 0;
}
.c-wp-post-contents .wp-block-columns .wp-block-columns {
  padding: 0;
  margin: 0;
}
.c-wp-post-contents .wp-block-columns .wp-block-column {
  margin: 0;
}
.c-wp-post-contents .wp-block-columns .wp-block-column:nth-child(n+2) {
  margin-top: 24px;
}
.c-wp-post-contents .wp-block-column {
  margin-top: 24px;
}
.c-wp-post-contents .is-vertically-aligned-center,
.c-wp-post-contents .is-vertically-aligned-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.c-wp-post-contents .is-vertically-aligned-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.c-wp-post-contents .is-vertically-aligned-bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.c-wp-post-contents .wp-block-image {
  width: 100%;
  margin-top: 16px;
}
.c-wp-post-contents .wp-block-image img {
  width: 100%;
  height: auto;
}
.c-wp-post-contents .has-text-align-center {
  text-align: center;
}
.c-wp-post-contents .has-text-align-right {
  text-align: right;
}
.c-wp-post-contents em {
  font-style: italic;
}
.c-wp-post-contents a {
  color: #000;
}
.c-wp-post-contents ul.wp-block-list,
.c-wp-post-contents ol.wp-block-list {
  margin: 8px;
  padding-inline: 1.6em;
}
.c-wp-post-contents ul.wp-block-list li:nth-child(n+2),
.c-wp-post-contents ol.wp-block-list li:nth-child(n+2) {
  margin-top: 4px;
}
.c-wp-post-contents ul.wp-block-list li {
  list-style: disc;
}
.c-wp-post-contents ol.wp-block-list li {
  list-style: decimal;
}

@media screen and (min-width: 768px) {
  .c-wp-post-contents {
    font-size: 1.6rem;
  }
  .c-wp-post-contents a {
    text-decoration: underline;
  }
  .c-wp-post-contents h2 {
    margin-top: 32px;
    font-size: 2.6rem;
  }
  .c-wp-post-contents h2::after {
    margin-top: 32px;
  }
  .c-wp-post-contents h3 {
    margin-top: 32px;
    font-size: 2.1rem;
  }
  .c-wp-post-contents h4 {
    margin-top: 32px;
    font-size: 1.8rem;
  }
  .c-wp-post-contents h5,
  .c-wp-post-contents h6 {
    margin-top: 32px;
    font-size: 1.6rem;
  }
  .c-wp-post-contents .wp-block-cover {
    max-width: 920px;
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 64px;
  }
  .c-wp-post-contents .wp-block-columns {
    max-width: 920px;
    margin: 64px auto 0;
    padding: 0 64px;
  }
  .c-wp-post-contents .wp-block-columns .wp-block-column:nth-child(n+2) {
    margin-top: 0;
  }
  .c-wp-post-contents .wp-block-column {
    width: 100%;
  }
  .c-wp-post-contents .is-layout-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }
  .wp-block-file__button {
    padding: 4px 8px;
  }
  .wp-block-file__button:hover {
    color: #fff;
  }
}
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child {
  margin-top: 0;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.c-search__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  width: 100%;
}

.c-search__form__input[type=text] {
  border-radius: 4px;
}

.c-search__form__button {
  display: grid;
  grid-template-columns: auto auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 4px 16px 4px 12px;
  font-size: 1.6rem;
  color: #0f1350;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  background-color: rgba(15, 19, 80, 0.1);
}

.c-search__form__button:hover {
  color: #fff;
  border: 1px solid #0f1350;
  background-color: #0f1350;
}

.c-search__form__button__text {
  margin-left: 4px;
  padding-bottom: 1px;
  font-size: 1.4rem;
}

.c-search__form__button__icon {
  width: 18px;
  height: 18px;
}

@media screen and (min-width: 768px) {
  .c-search__form__button__text {
    padding-bottom: 2px;
    font-size: 1.6rem;
  }
  .c-search__form__button__icon {
    width: 24px;
    height: 24px;
  }
}
.c-search__popular-words {
  margin-top: 16px;
}

.c-search__popular-words__heading {
  font-size: 1.6rem;
}

.c-search__popular-words__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  gap: 8px;
  margin-top: 8px;
}

.c-search__popular-words__list a {
  display: block;
  padding: 4px 8px;
  font-size: 1.2rem;
  color: #0f1350;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  background-color: rgba(15, 19, 80, 0.1);
}

@media screen and (min-width: 768px) {
  .c-search__popular-words__heading {
    font-size: 1.8rem;
  }
  .c-search__popular-words__lists {
    gap: 16px;
  }
  .c-search__popular-words__list a:hover {
    color: #fff;
    text-decoration: none;
    border: 1px solid #0f1350;
    background-color: #0f1350;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.splide__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  cursor: pointer;
}

.splide__arrow svg {
  stroke: currentColor;
  stroke-linecap: square;
  height: 2.2rem;
  vertical-align: middle;
  width: 2.2rem;
}

.splide__arrow--prev {
  left: 0;
  -webkit-transform: scaleX(-1) translateY(-50%);
  transform: scaleX(-1) translateY(-50%);
}

.splide__arrow--next {
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.splide__pagination li {
  display: inline-block;
  margin: 0;
  line-height: 1;
  list-style-type: none;
  pointer-events: auto;
}

.splide__pagination__page {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 0.1rem;
  padding: 0;
  background: #95a5a6;
  border: 0;
  border-radius: 50%;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.splide__pagination__page.is-active {
  background-color: #b4e900;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
@media (min-width: 783px) {
  .admin-bar .l-header {
    top: 32px;
  }
}
.wpcf7-spinner {
  display: none !important;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-home__mainvisual__container {
  padding: 16px 16px 16px;
}

.p-home__mainvisual__carousel img {
  width: 100%;
}

.p-home__mainvisual__carousel__arrow svg {
  stroke: #0f1350;
  width: 1.8rem;
  height: 1.8rem;
}

.p-home__mainvisual__carousel__arrow.splide__arrow--prev {
  left: -12px;
}

.p-home__mainvisual__carousel__arrow.splide__arrow--next {
  right: -12px;
}

.p-home__mainvisual__carousel__page {
  background-color: #ddd;
}

.is-active.p-home__mainvisual__carousel__page {
  background-color: #0f1350;
}

.p-home__mainvisual__carousel__pagination {
  position: absolute;
  width: 100%;
  bottom: -16px;
  gap: 4px;
}

@media screen and (min-width: 768px) {
  .p-home__mainvisual__container {
    padding: 24px 48px 24px;
  }
  .p-home__mainvisual__carousel__arrow svg {
    width: 2.4rem;
    height: 2.4rem;
  }
  .p-home__mainvisual__carousel__arrow.splide__arrow--prev {
    left: -24px;
  }
  .p-home__mainvisual__carousel__arrow.splide__arrow--next {
    right: -24px;
  }
  .p-home__mainvisual__carousel__pagination {
    bottom: -24px;
  }
}
.p-home__series__container {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media screen and (min-width: 768px) {
  .p-home__series__container {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
.p-home__search__body {
  max-widtH: 640px;
  margin-inline: auto;
}

.p-home__price__category-heading {
  font-size: 1.8rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-home__price__category-heading {
    font-size: 2.4rem;
  }
}
.p-home-categories__heading {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-home-categories__heading {
    font-size: 1.8rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-category__careers {
  margin-top: 16px;
}

.p-category__careers__heading {
  font-size: 1.6rem;
  font-weight: 500;
}

.p-category__careers__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.p-category__careers__list a {
  display: block;
  padding: 12px 12px;
  font-size: 1.4rem;
  line-height: 1;
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
}

.p-category__careers__list a:hover {
  text-decoration: none;
  color: #fff;
  background-color: #0f1350;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-products__container {
  max-width: 960px;
  padding: 16px 16px 0;
}

.p-products__breadcrumbs__container {
  width: 100%;
  margin-inline: auto;
  padding: 16px 16px 0;
}

@media screen and (min-width: 768px) {
  .p-products__breadcrumbs__container {
    padding: 24px 48px 0;
  }
}
@media screen and (min-width: 992px) {
  .p-products__breadcrumbs__container {
    max-width: 1296px;
  }
}
.p-products__overview {
  display: grid;
  max-width: 960px;
  padding: 16px 16px 16px;
}

.p-products__carousel__sticky {
  display: none;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .p-products__overview {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    padding: 24px 48px 24px;
  }
  .p-products__container {
    padding: 24px 48px 24px;
  }
  .p-products__carousel__sticky {
    position: sticky;
    top: 152px;
    display: block;
  }
}
.p-products__carousel__thumbnail {
  width: 100%;
  border: 1px solid rgba(15, 19, 80, 0.4);
}

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

@media screen and (min-width: 768px) {
  .p-products__content {
    display: grid;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    grid-template-columns: 360px 1fr;
    gap: 24px;
  }
}
@media screen and (min-width: 992px) {
  .p-products__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
}
.p-products__name {
  font-size: 2.1rem;
}

.p-products__code {
  margin-top: 8px;
  font-size: 1.4rem;
  color: #666;
}

.p-products__price-lists {
  margin-top: 16px;
}

@media screen and (min-width: 768px) {
  .p-products__price-lists {
    max-width: 360px;
  }
}
.p-products__price-list:nth-child(n+2) {
  margin-top: 8px;
}

.p-products__price-list__table {
  font-size: 1.4rem;
}

@media screen and (min-width: 992px) {
  .p-products__price-list__table {
    font-size: 1.4rem;
  }
}
.p-products__price-list__table__line {
  display: grid;
  grid-template-columns: 230px 1fr;
}

.p-products__price-list__table__amount {
  color: #e91e63;
  text-align: right;
}

.p-products__notice {
  max-width: auto;
  margin-top: 16px;
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .p-products__notice {
    max-width: 360px;
  }
}
.p-products__sku-select {
  margin-top: 24px;
}
.p-products__sku-select .item-sku {
  display: block;
  padding: 0;
  border: none;
}
.p-products__sku-select .item-sku dt {
  display: block;
  padding: 0;
  background-color: initial;
  border: none;
}
.p-products__sku-select .item-sku dt:nth-child(n+2) {
  margin-top: 24px;
}
.p-products__sku-select .item-sku dd {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: none;
}
.p-products__sku-select .item-sku select {
  width: 100%;
  border: 1px solid #0f1350;
  border-radius: 4px;
}

@media screen and (min-width: 768px) {
  .p-products__sku-select .item-sku select {
    max-width: 320px;
  }
}
.p-products__status {
  margin-top: 24px;
}

.p-products__status__stock {
  display: none;
}

.p-products__price {
  margin-top: 16px;
  font-size: 2.1rem;
}

.products__cart__block {
  margin-top: 16px;
}

.p-products__quantity {
  display: grid;
  grid-template-columns: 3em auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .p-products__quantity {
    max-width: 320px;
  }
}
.p-products__quantity input {
  border: 1px solid #0f1350;
  border-radius: 4px;
}

.p-products__cart__button {
  margin-top: 24px;
}

.p-products__cart__button input[type=submit] {
  display: block;
  width: 100%;
  padding: 16px;
  color: #fff;
  background-color: #0f1350;
  border: 1px solid #0f1350;
  border-radius: 0px;
  -webkit-transition: none;
  transition: none;
}

@media screen and (min-width: 768px) {
  .p-products__cart__button input[type=submit] {
    width: 320px;
    color: #0f1350;
    background-color: #fff;
    border: 1px solid #0f1350;
  }
  .p-products__cart__button input[type=submit]:hover {
    color: #fff;
    background-color: #0f1350;
    border: 1px solid #0f1350;
  }
}
@media screen and (min-width: 768px) {
  .p-products__name {
    font-size: 2.4rem;
  }
}
.p-products__error {
  margin-bottom: 0;
}

.p-products__grade__heading {
  font-size: 1.8rem;
  font-weight: 500;
}

.p-products__grade__note {
  margin-top: 24px;
  font-size: 1.4rem;
}

@media screen and (min-width: 768px) {
  .p-products__grade__heading {
    font-size: 2.1rem;
  }
  .p-products__grade__note {
    font-size: 1.6rem;
  }
}
.p-products__cart__button--contact,
.p-products__cart__button--apply {
  margin-top: 24px;
}

.p-products__cart__button--contact a,
.p-products__cart__button--apply a {
  display: block;
  width: 100%;
  padding: 16px;
  color: #0f1350;
  text-align: center;
  background-color: rgba(15, 19, 80, 0.1);
  border: 1px solid rgba(15, 19, 80, 0.4);
  border-radius: 4px;
  -webkit-transition: none;
  transition: none;
}

@media screen and (min-width: 768px) {
  .p-products__cart__button--contact a,
  .p-products__cart__button--apply a {
    width: 320px;
  }
  .p-products__cart__button--contact a:hover,
  .p-products__cart__button--apply a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #0f1350;
    border: 1px solid #0f1350;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-grade__container {
  padding: 0;
}

@media screen and (min-width: 768px) {
  .p-grade__container {
    padding: 0px 48px 24px;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-flow__sub-heading {
  margin-top: 24px;
  font-weight: 500;
  font-size: 2.1rem;
}

@media screen and (min-width: 768px) {
  .p-flow__sub-heading {
    margin-top: 40px;
    font-size: 2.8rem;
    text-align: center;
  }
}
.p-flow__step:nth-child(n+2) {
  margin-top: 32px;
}

.p-flow__step___heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  font-size: 1.8rem;
  font-weight: 500;
}

.p-flow__step__heading__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  border-radius: 40px;
  background-color: #0f1350;
}

.p-flow__step__heading__icon::before {
  content: "step";
  display: block;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  .p-flow__step___heading {
    font-size: 2.1rem;
  }
}
.p-flow__step__body {
  margin-top: 24px;
}

.p-flow__step__label {
  display: inline-block;
  padding: 8px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background-color: #0f1350;
  border-radius: 4px;
}

.p-flow__step__lists {
  margin-left: 1.5em;
}

.p-flow__step__lists li {
  list-style: disc;
}

.p-flow__step__lists li:nth-child(n+2) {
  margin-top: 8px;
}

.p-flow__callout {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #e91e63;
  border-radius: 8px;
}

.p-flow__callout__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #e91e63;
}

.p-flow__callout__heading__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  border: 1px solid #e91e63;
  border-radius: 40px;
  background-color: #e91e63;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-privacy__heading--lv2 {
  margin-top: 24px;
  font-weight: 500;
}

.p-privacy__block {
  font-size: 1.4rem;
  margin-top: 16px;
}

.p-privacy__lists {
  margin-top: 16px;
  margin-left: 1.5em;
}

.p-privacy__lists li {
  list-style: disc;
}

.p-privacy__lists li:nth-child(n+2) {
  margin-top: 8px;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-contact__columns {
  display: grid;
  row-gap: 32px;
  padding-bottom: 16px;
}

@media screen and (min-width: 768px) {
  .p-contact__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    grid-auto-flow: column;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    padding-bottom: 0;
  }
}
.p-contact__tel {
  font-size: 1.4rem;
}

.p-contact__notice {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
  font-size: 1.4rem;
}

.p-contact__label {
  margin-top: 24px;
  padding: 16px 12px;
  background-color: rgba(15, 19, 80, 0.1);
  border-radius: 8px;
  text-align: center;
}

.p-contact__label__business {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.5em;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .p-contact__tel {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    grid-column: 1/2;
  }
  .p-contact__notice {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    grid-column: 1/2;
  }
  .p-contact__label {
    padding: 24px 16px;
  }
  .p-contact__label__business {
    font-size: 1.8rem;
  }
}
.p-contact__label__notice {
  margin-top: 8px;
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .p-contact__label__notice {
    font-size: 1.4rem;
  }
}
.p-contact__form__heading {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}

.p-contact__form__body {
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .p-contact__form {
    grid-row: 1/3;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin-top: 0;
  }
  .p-contact__form__heading {
    font-size: 2.1rem;
  }
}
@media screen and (min-width: 768px) {
  .p-contact__thanks__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .p-contact__thanks__button a {
    width: 100%;
    max-width: 240px;
    text-align: center;
  }
}
.p-contact__tel__number {
  margin-top: 24px;
}

/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-apply__columns {
  display: grid;
  row-gap: 32px;
}

.p-apply__heading {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.p-apply__tel {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
  font-size: 1.4rem;
}

.p-apply__notice {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
  font-size: 1.4rem;
}

.p-apply__form {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

@media screen and (min-width: 768px) {
  .p-apply__columns {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto 1fr;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    row-gap: 40px;
    padding-bottom: 0;
  }
  .p-apply__heading {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    grid-column: 1/3;
  }
  .p-apply__tel {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    grid-column: 1/2;
  }
  .p-apply__notice {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    grid-column: 1/2;
  }
  .p-apply__form {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    grid-row: 2/4;
    grid-column: 2/2;
  }
}
.p-apply__tel__number {
  margin-top: 24px;
}

.p-apply__label {
  margin-top: 24px;
  padding: 16px 12px;
  background-color: rgba(15, 19, 80, 0.1);
  border-radius: 8px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-apply__label {
    padding: 24px 16px;
  }
}
.p-apply__form__heading {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}

.p-apply__form__body {
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .p-apply__form__heading {
    font-size: 2.1rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
.p-post__body {
  display: grid;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 56px;
}

@media screen and (min-width: 992px) {
  .p-post__body {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px 48px;
    padding-top: 32px;
  }
}
.p-post__main {
  display: grid;
  row-gap: 48px;
  padding-bottom: 24px;
}

@media screen and (min-width: 992px) {
  .p-post__main {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    padding-bottom: 0px;
  }
}
.p-post__archive {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px 8px;
}

.p-post__archive {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px 8px;
}

.p-post__archive__post {
  display: grid;
  gap: 8px;
}

.p-post__archive__post__thumbnail {
  position: relative;
  -webkit-box-shadow: 0px 0px 1px rgb(127.5, 127.5, 127.5);
  box-shadow: 0px 0px 1px rgb(127.5, 127.5, 127.5);
  overflow: hidden;
  border-radius: 6px;
}

.p-post__archive__post__thumbnail a {
  position: relative;
  z-index: 1;
  display: block;
}

.p-post__archive__post__title {
  font-size: 1.2rem;
  line-height: 1.4;
}

.p-post__archive__post__title a {
  font-weight: 500;
}

.p-post__archive__post__date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 100%;
  font-size: 1rem;
  line-height: 1;
}

.p-post__archive__post__date:not(:has(li:only-child)) {
  gap: 1em;
}

.p-post__archive__post__meta {
  font-size: 1.4rem;
  line-height: 1;
}

.p-post__archive__post__meta__heading {
  font-weight: 500;
  padding: 3px 0;
}

.p-post__archive__post__meta__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 4px;
}

.p-post__archive__post__meta__list a {
  display: block;
  padding: 2px 4px;
  font-size: 1rem;
  border: 1px solid #0f1350;
  border-radius: 2px;
  background-color: #fff;
  color: #0f1350;
}

.p-post__archive__post__category {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
}

.p-post__archive__post__tag__list a {
  border-radius: 16px;
}

.p-post__archive__post__shop {
  position: absolute;
  bottom: 4px;
  right: 4px;
  z-index: 2;
}

.p-post__archive__post__shop a {
  display: block;
  padding: 4px 4px;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background-color: #0f1350;
  border: 1px solid #0f1350;
  border-radius: 2px;
}

@media screen and (min-width: 768px) {
  .p-post__archive {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .p-post__archive__post {
    gap: 8px;
  }
  .p-post__archive__post__thumbnail {
    border-radius: 8px;
  }
  .p-post__archive__post__thumbnail a img {
    -webkit-transition: 0.18s ease-in-out;
    transition: 0.18s ease-in-out;
  }
  .p-post__archive__post__thumbnail a:hover img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  .p-post__archive__post__title {
    font-size: 1.6rem;
  }
  .p-post__archive__post__date {
    font-size: 1.4rem;
  }
  .p-post__archive__post__meta__list a {
    padding: 4px 8px;
    font-size: 1.2rem;
    border-radius: 4px;
  }
  .p-post__archive__post__meta__list a:hover {
    color: #0f1350;
    background-color: rgb(220.0526315789, 221.8, 248.4473684211);
    text-decoration: none;
  }
  .p-post__archive__post__category {
    top: 8px;
    left: 8px;
  }
  .p-post__archive__post__shop {
    bottom: 6px;
    right: 6px;
  }
  .p-post__archive__post__shop a {
    padding: 6px 8px;
    font-size: 1.2rem;
  }
  .p-post__archive__post__shop a:hover {
    background-color: rgb(28.1052631579, 35.6, 149.8947368421);
  }
}
.p-post__single {
  overflow: hidden;
}

.p-post__single__thumbnail {
  position: relative;
  border: 1px solid rgb(234.6, 234.6, 234.6);
  overflow: hidden;
  border-radius: 6px;
}

.p-post__single__thumbnail img {
  width: 100%;
}

.p-post__single__shop {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
}

.p-post__single__shop a {
  display: block;
  padding: 6px 8px;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
  background-color: #0f1350;
  border: 1px solid #0f1350;
  border-radius: 4px;
}

.p-post__single__heading {
  margin-top: 16px;
  font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
  .p-post__single__shop a {
    font-size: 1.4rem;
  }
  .p-post__single__shop a:hover {
    color: #fff;
    background-color: rgb(28.1052631579, 35.6, 149.8947368421);
  }
  .p-post__single__heading {
    font-size: 2.4rem;
  }
}
.p-post__single__meta {
  margin-top: 16px;
}

.p-post__single__meta__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.p-post__single__meta__heading {
  font-size: 1.2rem;
  padding: 3px 0;
  font-weight: 500;
}

.p-post__single__meta__list a {
  display: block;
  padding: 4px 8px;
  font-size: 1.2rem;
  line-height: 1;
  color: #0f1350;
  border: 1px solid #0f1350;
  border-radius: 4px;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .p-post__single__meta__list a {
    -webkit-transition: 0.18s ease-in-out;
    transition: 0.18s ease-in-out;
  }
  .p-post__single__meta__list a:hover {
    color: #fff;
    background-color: #0f1350;
  }
}
.p-post__single__date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 100%;
  margin-top: 16px;
  font-size: 1.4rem;
  line-height: 1;
}

.p-post__single__date:not(:has(li:only-child)) {
  gap: 1em;
}

.p-post__single__contents {
  margin-top: 24px;
}

.p-post-section__container {
  width: 100%;
}

.p-post-section__lists {
  display: grid;
  margin-top: 24px;
}

.p-post-section__list {
  display: grid;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.p-post-section__list:nth-child(n+2) {
  border-top: 1px solid rgba(15, 19, 80, 0.1);
}

.p-post-section__date {
  font-size: 1.2rem;
}

.p-post-section__type a {
  display: block;
  padding: 4px 4px;
  font-size: 1.2rem;
  line-height: 1;
  border: 1px solid rgba(15, 19, 80, 0.1);
  border-radius: 4px;
}

.p-post-section__title {
  grid-column: 1/4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .p-post-section__container {
    max-width: 840px;
  }
  .p-post-section__lists {
    margin-top: 40px;
  }
  .p-post-section__list {
    grid-template-columns: auto auto auto;
    gap: 16px;
  }
  .p-post-section__type a:hover {
    background-color: rgba(15, 19, 80, 0.1);
    text-decoration: none;
  }
  .p-post-section__title {
    grid-column: 3/4;
    font-size: 1.4rem;
  }
}
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
/**
 * スタイルの順序はFLOCSSに準拠
 * ※小規模だと無駄なスタイルが出やすいため、
 * いくつかルールを破っています。
 *
 * Foundation
 * └ vendor
 * Layout
 * Object
 * ├ Component
 * ├ Project
 * └ Utility
 *
 */
/**
 * Foundation
 * @desc 基本的に全て必須
 */
/*! Emma.css 0.7.0 | emmet-like utility classes | MIT License | git.io/emma */
/**
 * Emma.css 0.7.0 を元に削減&追加
 * 2017/02/23 flex回りのプロパティ追加
 */
.u-pe-n {
  pointer-events: none !important;
}

.u-fl-n, .float-none {
  float: none !important;
}

.u-fl-l, .float-left {
  float: left !important;
}

.u-fl-r, .float-right {
  float: right !important;
}

.u-d-n {
  display: none !important;
}

.u-d-b {
  display: block !important;
}

.u-d-f {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.u-d-g {
  display: grid !important;
}

.u-d-i {
  display: inline !important;
}

.u-d-ib {
  display: inline-block !important;
}

.u-d-li {
  display: list-item !important;
}

.u-l-0 {
  left: 0 !important;
}

.u-l-a {
  left: auto !important;
}

.u-r-0 {
  right: 0 !important;
}

.u-r-a {
  right: auto !important;
}

.u-ofy-a {
  overflow-y: auto !important;
}

.u-ofy-h {
  overflow-y: hidden !important;
}

.u-tt-n {
  text-transform: none !important;
}

.u-tt-c {
  text-transform: capitalize !important;
}

.u-tt-uc {
  text-transform: uppercase !important;
}

.u-tt-lc {
  text-transform: lowercase !important;
}

@media screen and (min-width: 576px) {
  .u-fl-n-sm, .float-none-sm {
    float: none !important;
  }
  .u-fl-l-sm, .float-left-sm {
    float: left !important;
  }
  .u-fl-r-sm, .float-right-sm {
    float: right !important;
  }
}
@media screen and (min-width: 768px) {
  .u-d-f-md {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-l-0-md {
    left: 0 !important;
  }
  .u-l-a-md {
    left: auto !important;
  }
  .u-r-0-md {
    right: 0 !important;
  }
  .u-r-a-md {
    right: auto !important;
  }
}
@media screen and (min-width: 992px) {
  .u-d-f-lg {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-l-0-lg {
    left: 0 !important;
  }
  .u-l-a-lg {
    left: auto !important;
  }
  .u-r-0-lg {
    right: 0 !important;
  }
  .u-r-a-lg {
    right: auto !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-d-f-xl {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-l-0-xl {
    left: 0 !important;
  }
  .u-l-a-xl {
    left: auto !important;
  }
  .u-r-0-xl {
    right: 0 !important;
  }
  .u-r-a-xl {
    right: auto !important;
  }
}
.u-fd-r {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.u-fd-rr {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.u-fd-c {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.ufd-cr {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

@media screen and (min-width: 576px) {
  .u-fd-rr-sm {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
}
@media screen and (min-width: 768px) {
  .u-fd-r-md {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .u-fd-rr-md {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
}
@media screen and (min-width: 992px) {
  .u-fd-rr-lg {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}
.u-fw-w {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.u-fw-nw {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.u-fw-r {
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.u-jc-fs {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

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

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

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

.u-jc-sa {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.u-ai-fs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.u-ai-fe {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.u-ai-c {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.u-ai-s {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.u-ai-fs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.u-w-a {
  width: auto !important;
}

.u-mw100 {
  max-width: 100% !important;
}

.u-bd-n {
  border: none !important;
}

.u-bg-n {
  background: none !important;
}

.u-c-i {
  color: inherit !important;
}

.u-ta-l, .t-left, .tleft {
  text-align: left !important;
}

.u-ta-c, .t-center, .tcenter {
  text-align: center !important;
}

.u-ta-r, .t-right, .tright {
  text-align: right !important;
}

.u-ws-pre, .ws-pre {
  white-space: pre !important;
}

.u-ws-nw, .ws-nw {
  white-space: nowrap;
}

.u-w-a {
  width: auto !important;
}

.u-va-super {
  vertical-align: super !important;
}

.u-va-sup {
  vertical-align: sup !important;
}

@media screen and (min-width: 768px) {
  .u-jc-fs-md {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .u-jc-fe-md {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .u-jc-c-md {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .u-jc-sb-md {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .u-jc-sa-md {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .u-ai-c-md {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .u-ta-l-md, .t-left-md, .tleft-md {
    text-align: left !important;
  }
  .u-ta-c-md, .t-center-md, .tcenter-md {
    text-align: center !important;
  }
  .u-ta-r-md, .t-right-md, .tright-md {
    text-align: right !important;
  }
  .u-ta-l-md, .t-left-md, .tleft-md {
    text-align: left !important;
  }
  .u-ta-c-md, .t-center-md, .tcenter-md {
    text-align: center !important;
  }
  .u-ta-r-md, .t-right-md, .tright-md {
    text-align: right !important;
  }
  .u-w-a-md {
    width: auto !important;
  }
}
@media screen and (min-width: 992px) {
  .u-jc-fs-lg {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .u-jc-fe-lg {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .u-jc-c-lg {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .u-jc-sb-lg {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .u-jc-sa-lg {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .u-ta-l-lg, .t-left-lg, .tleft-lg {
    text-align: left !important;
  }
  .u-ta-c-lg, .t-center-lg, .tcenter-lg {
    text-align: center !important;
  }
  .u-ta-r-lg, .t-right-lg, .tright-lg {
    text-align: right !important;
  }
}
.u-ta-j {
  text-align: justify !important;
}

.u-td-n {
  text-decoration: none !important;
}

.u-td-u, .underline, .under {
  text-decoration: underline !important;
}

.u-tsh-n {
  text-shadow: none !important;
}

.u-lh-nm {
  line-height: normal !important;
}

.u-lh-i {
  line-height: inherit !important;
}

.u-fw-n {
  font-weight: 500 !important;
}

.u-fw-b, .bold, .b {
  font-weight: 700 !important;
}

/**
 * カラー定義 (ひとまずホワイトのみ)
 */
.u-c-white {
  color: #fff !important;
}

.u-bg-white {
  background: #fff !important;
}

.color-red,
.u-c-red {
  color: #e91e63 !important;
}

.u-c-red:hover {
  color: #e91e63 !important;
}

/**
 * フォントサイズ
 */
.u-fs10 {
  font-size: 10px !important;
}

.u-fs12 {
  font-size: 12px !important;
}

.u-fs14 {
  font-size: 14px !important;
}

.u-fs16 {
  font-size: 16px !important;
}

.u-fs10 {
  font-size: 10% !important;
}

.u-fs20 {
  font-size: 20% !important;
}

.u-fs30 {
  font-size: 30% !important;
}

.u-fs40 {
  font-size: 40% !important;
}

.u-fs50 {
  font-size: 50% !important;
}

.u-fs60 {
  font-size: 60% !important;
}

.u-fs70 {
  font-size: 70% !important;
}

.u-fs80 {
  font-size: 80% !important;
}

.u-fs90 {
  font-size: 90% !important;
}

.u-fs100 {
  font-size: 100% !important;
}

.u-fs120 {
  font-size: 120% !important;
}

.u-fs130 {
  font-size: 130% !important;
}

.u-fs140 {
  font-size: 140% !important;
}

.u-fs150 {
  font-size: 150% !important;
}

@media screen and (min-width: 768px) {
  .u-fs10-md {
    font-size: 10px !important;
  }
  .u-fs12-md {
    font-size: 12px !important;
  }
  .u-fs14-md {
    font-size: 14px !important;
  }
  .u-fs16-md {
    font-size: 16px !important;
  }
}
/**
 * テキスト装飾
 */
.underline {
  text-decoration: underline;
}

/**
 * 改行・表示設定
 */
@media screen and (min-width: 576px) {
  .u-d-n-sm {
    display: none !important;
  }
  .u-d-i-sm {
    display: inline !important;
  }
  .u-d-b-sm {
    display: block !important;
  }
  .u-d-f-sm {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-d-g-sm {
    display: grid !important;
  }
}
@media screen and (min-width: 768px) {
  .u-fs120-md {
    font-size: 120% !important;
  }
  .u-fs140-md {
    font-size: 140% !important;
  }
  .u-d-n-md {
    display: none !important;
  }
  .u-d-i-md {
    display: inline !important;
  }
  .u-d-ib-md {
    display: inline-block !important;
  }
  .u-d-b-md {
    display: block !important;
  }
  .u-d-f-md {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-d-g-md {
    display: grid !important;
  }
  .u-d-li-md {
    display: list-item !important;
  }
}
@media screen and (min-width: 992px) {
  .u-d-n-lg {
    display: none !important;
  }
  .u-d-i-lg {
    display: inline !important;
  }
  .u-d-ib-lg {
    display: inline-block !important;
  }
  .u-d-b-lg {
    display: block !important;
  }
  .u-d-f-lg {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-d-g-lg {
    display: grid !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-d-n-xl {
    display: none !important;
  }
  .u-d-i-xl {
    display: inline !important;
  }
  .u-d-ib-xl {
    display: inline-block !important;
  }
  .u-d-b-xl {
    display: block !important;
  }
  .u-d-f-xl {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-d-g-xl {
    display: grid !important;
  }
}
@media screen and (min-width: 1400px) {
  .u-d-n-xxl {
    display: none !important;
  }
  .u-d-i-xxl {
    display: inline !important;
  }
  .u-d-ib-xxl {
    display: inline-block !important;
  }
  .u-d-b-xxl {
    display: block !important;
  }
  .u-d-f-xxl {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-d-g-xxl {
    display: grid !important;
  }
}
/**
 * 明朝のスタイル
 */
.mincho,
.mincho a {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.ie11 .mincho,
.ie11 .mincho a {
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.serif {
  font-family: "Noto Serif", "Cormorant Infant", "Times New Roman", "游明朝", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.ie11 .serif {
  font-family: "Times New Roman", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.sans-serif,
.sans-serif a {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}

.grotesk,
.grotesk a {
  font-family: "Futura", "futura-pt", "Century Gothic", Sans-Serif;
}

/**
 * margin utility
 * @desc: margin の utility を /foundation/_variable.scss の $utilityValue の配列数分自動出力
 */
.u-mt0 {
  margin-top: 0px !important;
}

.u-mt2 {
  margin-top: 2px !important;
}

.u-mt4 {
  margin-top: 4px !important;
}

.u-mt8 {
  margin-top: 8px !important;
}

.u-mt12 {
  margin-top: 12px !important;
}

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

.u-mt20 {
  margin-top: 20px !important;
}

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

.u-mt28 {
  margin-top: 28px !important;
}

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

.u-mt36 {
  margin-top: 36px !important;
}

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

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

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

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

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

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

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

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

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

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

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

.u-mt128 {
  margin-top: 128px !important;
}

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

.u-mt136 {
  margin-top: 136px !important;
}

.u-mt144 {
  margin-top: 144px !important;
}

@media screen and (min-width: 768px) {
  .u-mt0-md {
    margin-top: 0px !important;
  }
  .u-mt2-md {
    margin-top: 2px !important;
  }
  .u-mt4-md {
    margin-top: 4px !important;
  }
  .u-mt8-md {
    margin-top: 8px !important;
  }
  .u-mt12-md {
    margin-top: 12px !important;
  }
  .u-mt16-md {
    margin-top: 16px !important;
  }
  .u-mt20-md {
    margin-top: 20px !important;
  }
  .u-mt24-md {
    margin-top: 24px !important;
  }
  .u-mt28-md {
    margin-top: 28px !important;
  }
  .u-mt32-md {
    margin-top: 32px !important;
  }
  .u-mt36-md {
    margin-top: 36px !important;
  }
  .u-mt40-md {
    margin-top: 40px !important;
  }
  .u-mt48-md {
    margin-top: 48px !important;
  }
  .u-mt56-md {
    margin-top: 56px !important;
  }
  .u-mt64-md {
    margin-top: 64px !important;
  }
  .u-mt72-md {
    margin-top: 72px !important;
  }
  .u-mt80-md {
    margin-top: 80px !important;
  }
  .u-mt88-md {
    margin-top: 88px !important;
  }
  .u-mt96-md {
    margin-top: 96px !important;
  }
  .u-mt104-md {
    margin-top: 104px !important;
  }
  .u-mt112-md {
    margin-top: 112px !important;
  }
  .u-mt120-md {
    margin-top: 120px !important;
  }
  .u-mt128-md {
    margin-top: 128px !important;
  }
  .u-mt120-md {
    margin-top: 120px !important;
  }
  .u-mt136-md {
    margin-top: 136px !important;
  }
  .u-mt144-md {
    margin-top: 144px !important;
  }
}
@media screen and (min-width: 992px) {
  .u-mt0-lg {
    margin-top: 0px !important;
  }
  .u-mt2-lg {
    margin-top: 2px !important;
  }
  .u-mt4-lg {
    margin-top: 4px !important;
  }
  .u-mt8-lg {
    margin-top: 8px !important;
  }
  .u-mt12-lg {
    margin-top: 12px !important;
  }
  .u-mt16-lg {
    margin-top: 16px !important;
  }
  .u-mt20-lg {
    margin-top: 20px !important;
  }
  .u-mt24-lg {
    margin-top: 24px !important;
  }
  .u-mt28-lg {
    margin-top: 28px !important;
  }
  .u-mt32-lg {
    margin-top: 32px !important;
  }
  .u-mt36-lg {
    margin-top: 36px !important;
  }
  .u-mt40-lg {
    margin-top: 40px !important;
  }
  .u-mt48-lg {
    margin-top: 48px !important;
  }
  .u-mt56-lg {
    margin-top: 56px !important;
  }
  .u-mt64-lg {
    margin-top: 64px !important;
  }
  .u-mt72-lg {
    margin-top: 72px !important;
  }
  .u-mt80-lg {
    margin-top: 80px !important;
  }
  .u-mt88-lg {
    margin-top: 88px !important;
  }
  .u-mt96-lg {
    margin-top: 96px !important;
  }
  .u-mt104-lg {
    margin-top: 104px !important;
  }
  .u-mt112-lg {
    margin-top: 112px !important;
  }
  .u-mt120-lg {
    margin-top: 120px !important;
  }
  .u-mt128-lg {
    margin-top: 128px !important;
  }
  .u-mt120-lg {
    margin-top: 120px !important;
  }
  .u-mt136-lg {
    margin-top: 136px !important;
  }
  .u-mt144-lg {
    margin-top: 144px !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-mt0-xl {
    margin-top: 0px !important;
  }
  .u-mt2-xl {
    margin-top: 2px !important;
  }
  .u-mt4-xl {
    margin-top: 4px !important;
  }
  .u-mt8-xl {
    margin-top: 8px !important;
  }
  .u-mt12-xl {
    margin-top: 12px !important;
  }
  .u-mt16-xl {
    margin-top: 16px !important;
  }
  .u-mt20-xl {
    margin-top: 20px !important;
  }
  .u-mt24-xl {
    margin-top: 24px !important;
  }
  .u-mt28-xl {
    margin-top: 28px !important;
  }
  .u-mt32-xl {
    margin-top: 32px !important;
  }
  .u-mt36-xl {
    margin-top: 36px !important;
  }
  .u-mt40-xl {
    margin-top: 40px !important;
  }
  .u-mt48-xl {
    margin-top: 48px !important;
  }
  .u-mt56-xl {
    margin-top: 56px !important;
  }
  .u-mt64-xl {
    margin-top: 64px !important;
  }
  .u-mt72-xl {
    margin-top: 72px !important;
  }
  .u-mt80-xl {
    margin-top: 80px !important;
  }
  .u-mt88-xl {
    margin-top: 88px !important;
  }
  .u-mt96-xl {
    margin-top: 96px !important;
  }
  .u-mt104-xl {
    margin-top: 104px !important;
  }
  .u-mt112-xl {
    margin-top: 112px !important;
  }
  .u-mt120-xl {
    margin-top: 120px !important;
  }
  .u-mt128-xl {
    margin-top: 128px !important;
  }
  .u-mt120-xl {
    margin-top: 120px !important;
  }
  .u-mt136-xl {
    margin-top: 136px !important;
  }
  .u-mt144-xl {
    margin-top: 144px !important;
  }
}
.u-mb0 {
  margin-bottom: 0px !important;
}

.u-mb2 {
  margin-bottom: 2px !important;
}

.u-mb4 {
  margin-bottom: 4px !important;
}

.u-mb8 {
  margin-bottom: 8px !important;
}

.u-mb12 {
  margin-bottom: 12px !important;
}

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

.u-mb20 {
  margin-bottom: 20px !important;
}

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

.u-mb28 {
  margin-bottom: 28px !important;
}

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

.u-mb36 {
  margin-bottom: 36px !important;
}

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

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

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

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

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

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

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

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

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

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

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

.u-mb128 {
  margin-bottom: 128px !important;
}

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

.u-mb136 {
  margin-bottom: 136px !important;
}

.u-mb144 {
  margin-bottom: 144px !important;
}

@media screen and (min-width: 768px) {
  .u-mb0-md {
    margin-bottom: 0px !important;
  }
  .u-mb2-md {
    margin-bottom: 2px !important;
  }
  .u-mb4-md {
    margin-bottom: 4px !important;
  }
  .u-mb8-md {
    margin-bottom: 8px !important;
  }
  .u-mb12-md {
    margin-bottom: 12px !important;
  }
  .u-mb16-md {
    margin-bottom: 16px !important;
  }
  .u-mb20-md {
    margin-bottom: 20px !important;
  }
  .u-mb24-md {
    margin-bottom: 24px !important;
  }
  .u-mb28-md {
    margin-bottom: 28px !important;
  }
  .u-mb32-md {
    margin-bottom: 32px !important;
  }
  .u-mb36-md {
    margin-bottom: 36px !important;
  }
  .u-mb40-md {
    margin-bottom: 40px !important;
  }
  .u-mb48-md {
    margin-bottom: 48px !important;
  }
  .u-mb56-md {
    margin-bottom: 56px !important;
  }
  .u-mb64-md {
    margin-bottom: 64px !important;
  }
  .u-mb72-md {
    margin-bottom: 72px !important;
  }
  .u-mb80-md {
    margin-bottom: 80px !important;
  }
  .u-mb88-md {
    margin-bottom: 88px !important;
  }
  .u-mb96-md {
    margin-bottom: 96px !important;
  }
  .u-mb104-md {
    margin-bottom: 104px !important;
  }
  .u-mb112-md {
    margin-bottom: 112px !important;
  }
  .u-mb120-md {
    margin-bottom: 120px !important;
  }
  .u-mb128-md {
    margin-bottom: 128px !important;
  }
  .u-mb120-md {
    margin-bottom: 120px !important;
  }
  .u-mb136-md {
    margin-bottom: 136px !important;
  }
  .u-mb144-md {
    margin-bottom: 144px !important;
  }
}
@media screen and (min-width: 992px) {
  .u-mb0-lg {
    margin-bottom: 0px !important;
  }
  .u-mb2-lg {
    margin-bottom: 2px !important;
  }
  .u-mb4-lg {
    margin-bottom: 4px !important;
  }
  .u-mb8-lg {
    margin-bottom: 8px !important;
  }
  .u-mb12-lg {
    margin-bottom: 12px !important;
  }
  .u-mb16-lg {
    margin-bottom: 16px !important;
  }
  .u-mb20-lg {
    margin-bottom: 20px !important;
  }
  .u-mb24-lg {
    margin-bottom: 24px !important;
  }
  .u-mb28-lg {
    margin-bottom: 28px !important;
  }
  .u-mb32-lg {
    margin-bottom: 32px !important;
  }
  .u-mb36-lg {
    margin-bottom: 36px !important;
  }
  .u-mb40-lg {
    margin-bottom: 40px !important;
  }
  .u-mb48-lg {
    margin-bottom: 48px !important;
  }
  .u-mb56-lg {
    margin-bottom: 56px !important;
  }
  .u-mb64-lg {
    margin-bottom: 64px !important;
  }
  .u-mb72-lg {
    margin-bottom: 72px !important;
  }
  .u-mb80-lg {
    margin-bottom: 80px !important;
  }
  .u-mb88-lg {
    margin-bottom: 88px !important;
  }
  .u-mb96-lg {
    margin-bottom: 96px !important;
  }
  .u-mb104-lg {
    margin-bottom: 104px !important;
  }
  .u-mb112-lg {
    margin-bottom: 112px !important;
  }
  .u-mb120-lg {
    margin-bottom: 120px !important;
  }
  .u-mb128-lg {
    margin-bottom: 128px !important;
  }
  .u-mb120-lg {
    margin-bottom: 120px !important;
  }
  .u-mb136-lg {
    margin-bottom: 136px !important;
  }
  .u-mb144-lg {
    margin-bottom: 144px !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-mb0-xl {
    margin-bottom: 0px !important;
  }
  .u-mb2-xl {
    margin-bottom: 2px !important;
  }
  .u-mb4-xl {
    margin-bottom: 4px !important;
  }
  .u-mb8-xl {
    margin-bottom: 8px !important;
  }
  .u-mb12-xl {
    margin-bottom: 12px !important;
  }
  .u-mb16-xl {
    margin-bottom: 16px !important;
  }
  .u-mb20-xl {
    margin-bottom: 20px !important;
  }
  .u-mb24-xl {
    margin-bottom: 24px !important;
  }
  .u-mb28-xl {
    margin-bottom: 28px !important;
  }
  .u-mb32-xl {
    margin-bottom: 32px !important;
  }
  .u-mb36-xl {
    margin-bottom: 36px !important;
  }
  .u-mb40-xl {
    margin-bottom: 40px !important;
  }
  .u-mb48-xl {
    margin-bottom: 48px !important;
  }
  .u-mb56-xl {
    margin-bottom: 56px !important;
  }
  .u-mb64-xl {
    margin-bottom: 64px !important;
  }
  .u-mb72-xl {
    margin-bottom: 72px !important;
  }
  .u-mb80-xl {
    margin-bottom: 80px !important;
  }
  .u-mb88-xl {
    margin-bottom: 88px !important;
  }
  .u-mb96-xl {
    margin-bottom: 96px !important;
  }
  .u-mb104-xl {
    margin-bottom: 104px !important;
  }
  .u-mb112-xl {
    margin-bottom: 112px !important;
  }
  .u-mb120-xl {
    margin-bottom: 120px !important;
  }
  .u-mb128-xl {
    margin-bottom: 128px !important;
  }
  .u-mb120-xl {
    margin-bottom: 120px !important;
  }
  .u-mb136-xl {
    margin-bottom: 136px !important;
  }
  .u-mb144-xl {
    margin-bottom: 144px !important;
  }
}
.u-mr0 {
  margin-right: 0px !important;
}

.u-mr2 {
  margin-right: 2px !important;
}

.u-mr4 {
  margin-right: 4px !important;
}

.u-mr8 {
  margin-right: 8px !important;
}

.u-mr12 {
  margin-right: 12px !important;
}

.u-mr16 {
  margin-right: 16px !important;
}

.u-mr20 {
  margin-right: 20px !important;
}

.u-mr24 {
  margin-right: 24px !important;
}

.u-mr28 {
  margin-right: 28px !important;
}

.u-mr32 {
  margin-right: 32px !important;
}

.u-mr36 {
  margin-right: 36px !important;
}

.u-mr40 {
  margin-right: 40px !important;
}

.u-mr48 {
  margin-right: 48px !important;
}

.u-mr56 {
  margin-right: 56px !important;
}

.u-mr64 {
  margin-right: 64px !important;
}

.u-mr72 {
  margin-right: 72px !important;
}

.u-mr80 {
  margin-right: 80px !important;
}

.u-mr88 {
  margin-right: 88px !important;
}

.u-mr96 {
  margin-right: 96px !important;
}

.u-mr104 {
  margin-right: 104px !important;
}

.u-mr112 {
  margin-right: 112px !important;
}

.u-mr120 {
  margin-right: 120px !important;
}

.u-mr128 {
  margin-right: 128px !important;
}

.u-mr120 {
  margin-right: 120px !important;
}

.u-mr136 {
  margin-right: 136px !important;
}

.u-mr144 {
  margin-right: 144px !important;
}

@media screen and (min-width: 768px) {
  .u-mr0-md {
    margin-right: 0px !important;
  }
  .u-mr2-md {
    margin-right: 2px !important;
  }
  .u-mr4-md {
    margin-right: 4px !important;
  }
  .u-mr8-md {
    margin-right: 8px !important;
  }
  .u-mr12-md {
    margin-right: 12px !important;
  }
  .u-mr16-md {
    margin-right: 16px !important;
  }
  .u-mr20-md {
    margin-right: 20px !important;
  }
  .u-mr24-md {
    margin-right: 24px !important;
  }
  .u-mr28-md {
    margin-right: 28px !important;
  }
  .u-mr32-md {
    margin-right: 32px !important;
  }
  .u-mr36-md {
    margin-right: 36px !important;
  }
  .u-mr40-md {
    margin-right: 40px !important;
  }
  .u-mr48-md {
    margin-right: 48px !important;
  }
  .u-mr56-md {
    margin-right: 56px !important;
  }
  .u-mr64-md {
    margin-right: 64px !important;
  }
  .u-mr72-md {
    margin-right: 72px !important;
  }
  .u-mr80-md {
    margin-right: 80px !important;
  }
  .u-mr88-md {
    margin-right: 88px !important;
  }
  .u-mr96-md {
    margin-right: 96px !important;
  }
  .u-mr104-md {
    margin-right: 104px !important;
  }
  .u-mr112-md {
    margin-right: 112px !important;
  }
  .u-mr120-md {
    margin-right: 120px !important;
  }
  .u-mr128-md {
    margin-right: 128px !important;
  }
  .u-mr120-md {
    margin-right: 120px !important;
  }
  .u-mr136-md {
    margin-right: 136px !important;
  }
  .u-mr144-md {
    margin-right: 144px !important;
  }
}
@media screen and (min-width: 992px) {
  .u-mr0-lg {
    margin-right: 0px !important;
  }
  .u-mr2-lg {
    margin-right: 2px !important;
  }
  .u-mr4-lg {
    margin-right: 4px !important;
  }
  .u-mr8-lg {
    margin-right: 8px !important;
  }
  .u-mr12-lg {
    margin-right: 12px !important;
  }
  .u-mr16-lg {
    margin-right: 16px !important;
  }
  .u-mr20-lg {
    margin-right: 20px !important;
  }
  .u-mr24-lg {
    margin-right: 24px !important;
  }
  .u-mr28-lg {
    margin-right: 28px !important;
  }
  .u-mr32-lg {
    margin-right: 32px !important;
  }
  .u-mr36-lg {
    margin-right: 36px !important;
  }
  .u-mr40-lg {
    margin-right: 40px !important;
  }
  .u-mr48-lg {
    margin-right: 48px !important;
  }
  .u-mr56-lg {
    margin-right: 56px !important;
  }
  .u-mr64-lg {
    margin-right: 64px !important;
  }
  .u-mr72-lg {
    margin-right: 72px !important;
  }
  .u-mr80-lg {
    margin-right: 80px !important;
  }
  .u-mr88-lg {
    margin-right: 88px !important;
  }
  .u-mr96-lg {
    margin-right: 96px !important;
  }
  .u-mr104-lg {
    margin-right: 104px !important;
  }
  .u-mr112-lg {
    margin-right: 112px !important;
  }
  .u-mr120-lg {
    margin-right: 120px !important;
  }
  .u-mr128-lg {
    margin-right: 128px !important;
  }
  .u-mr120-lg {
    margin-right: 120px !important;
  }
  .u-mr136-lg {
    margin-right: 136px !important;
  }
  .u-mr144-lg {
    margin-right: 144px !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-mr0-xl {
    margin-right: 0px !important;
  }
  .u-mr2-xl {
    margin-right: 2px !important;
  }
  .u-mr4-xl {
    margin-right: 4px !important;
  }
  .u-mr8-xl {
    margin-right: 8px !important;
  }
  .u-mr12-xl {
    margin-right: 12px !important;
  }
  .u-mr16-xl {
    margin-right: 16px !important;
  }
  .u-mr20-xl {
    margin-right: 20px !important;
  }
  .u-mr24-xl {
    margin-right: 24px !important;
  }
  .u-mr28-xl {
    margin-right: 28px !important;
  }
  .u-mr32-xl {
    margin-right: 32px !important;
  }
  .u-mr36-xl {
    margin-right: 36px !important;
  }
  .u-mr40-xl {
    margin-right: 40px !important;
  }
  .u-mr48-xl {
    margin-right: 48px !important;
  }
  .u-mr56-xl {
    margin-right: 56px !important;
  }
  .u-mr64-xl {
    margin-right: 64px !important;
  }
  .u-mr72-xl {
    margin-right: 72px !important;
  }
  .u-mr80-xl {
    margin-right: 80px !important;
  }
  .u-mr88-xl {
    margin-right: 88px !important;
  }
  .u-mr96-xl {
    margin-right: 96px !important;
  }
  .u-mr104-xl {
    margin-right: 104px !important;
  }
  .u-mr112-xl {
    margin-right: 112px !important;
  }
  .u-mr120-xl {
    margin-right: 120px !important;
  }
  .u-mr128-xl {
    margin-right: 128px !important;
  }
  .u-mr120-xl {
    margin-right: 120px !important;
  }
  .u-mr136-xl {
    margin-right: 136px !important;
  }
  .u-mr144-xl {
    margin-right: 144px !important;
  }
}
.u-ml0 {
  margin-left: 0px !important;
}

.u-ml2 {
  margin-left: 2px !important;
}

.u-ml4 {
  margin-left: 4px !important;
}

.u-ml8 {
  margin-left: 8px !important;
}

.u-ml12 {
  margin-left: 12px !important;
}

.u-ml16 {
  margin-left: 16px !important;
}

.u-ml20 {
  margin-left: 20px !important;
}

.u-ml24 {
  margin-left: 24px !important;
}

.u-ml28 {
  margin-left: 28px !important;
}

.u-ml32 {
  margin-left: 32px !important;
}

.u-ml36 {
  margin-left: 36px !important;
}

.u-ml40 {
  margin-left: 40px !important;
}

.u-ml48 {
  margin-left: 48px !important;
}

.u-ml56 {
  margin-left: 56px !important;
}

.u-ml64 {
  margin-left: 64px !important;
}

.u-ml72 {
  margin-left: 72px !important;
}

.u-ml80 {
  margin-left: 80px !important;
}

.u-ml88 {
  margin-left: 88px !important;
}

.u-ml96 {
  margin-left: 96px !important;
}

.u-ml104 {
  margin-left: 104px !important;
}

.u-ml112 {
  margin-left: 112px !important;
}

.u-ml120 {
  margin-left: 120px !important;
}

.u-ml128 {
  margin-left: 128px !important;
}

.u-ml120 {
  margin-left: 120px !important;
}

.u-ml136 {
  margin-left: 136px !important;
}

.u-ml144 {
  margin-left: 144px !important;
}

@media screen and (min-width: 768px) {
  .u-ml0-md {
    margin-left: 0px !important;
  }
  .u-ml2-md {
    margin-left: 2px !important;
  }
  .u-ml4-md {
    margin-left: 4px !important;
  }
  .u-ml8-md {
    margin-left: 8px !important;
  }
  .u-ml12-md {
    margin-left: 12px !important;
  }
  .u-ml16-md {
    margin-left: 16px !important;
  }
  .u-ml20-md {
    margin-left: 20px !important;
  }
  .u-ml24-md {
    margin-left: 24px !important;
  }
  .u-ml28-md {
    margin-left: 28px !important;
  }
  .u-ml32-md {
    margin-left: 32px !important;
  }
  .u-ml36-md {
    margin-left: 36px !important;
  }
  .u-ml40-md {
    margin-left: 40px !important;
  }
  .u-ml48-md {
    margin-left: 48px !important;
  }
  .u-ml56-md {
    margin-left: 56px !important;
  }
  .u-ml64-md {
    margin-left: 64px !important;
  }
  .u-ml72-md {
    margin-left: 72px !important;
  }
  .u-ml80-md {
    margin-left: 80px !important;
  }
  .u-ml88-md {
    margin-left: 88px !important;
  }
  .u-ml96-md {
    margin-left: 96px !important;
  }
  .u-ml104-md {
    margin-left: 104px !important;
  }
  .u-ml112-md {
    margin-left: 112px !important;
  }
  .u-ml120-md {
    margin-left: 120px !important;
  }
  .u-ml128-md {
    margin-left: 128px !important;
  }
  .u-ml120-md {
    margin-left: 120px !important;
  }
  .u-ml136-md {
    margin-left: 136px !important;
  }
  .u-ml144-md {
    margin-left: 144px !important;
  }
}
@media screen and (min-width: 992px) {
  .u-ml0-lg {
    margin-left: 0px !important;
  }
  .u-ml2-lg {
    margin-left: 2px !important;
  }
  .u-ml4-lg {
    margin-left: 4px !important;
  }
  .u-ml8-lg {
    margin-left: 8px !important;
  }
  .u-ml12-lg {
    margin-left: 12px !important;
  }
  .u-ml16-lg {
    margin-left: 16px !important;
  }
  .u-ml20-lg {
    margin-left: 20px !important;
  }
  .u-ml24-lg {
    margin-left: 24px !important;
  }
  .u-ml28-lg {
    margin-left: 28px !important;
  }
  .u-ml32-lg {
    margin-left: 32px !important;
  }
  .u-ml36-lg {
    margin-left: 36px !important;
  }
  .u-ml40-lg {
    margin-left: 40px !important;
  }
  .u-ml48-lg {
    margin-left: 48px !important;
  }
  .u-ml56-lg {
    margin-left: 56px !important;
  }
  .u-ml64-lg {
    margin-left: 64px !important;
  }
  .u-ml72-lg {
    margin-left: 72px !important;
  }
  .u-ml80-lg {
    margin-left: 80px !important;
  }
  .u-ml88-lg {
    margin-left: 88px !important;
  }
  .u-ml96-lg {
    margin-left: 96px !important;
  }
  .u-ml104-lg {
    margin-left: 104px !important;
  }
  .u-ml112-lg {
    margin-left: 112px !important;
  }
  .u-ml120-lg {
    margin-left: 120px !important;
  }
  .u-ml128-lg {
    margin-left: 128px !important;
  }
  .u-ml120-lg {
    margin-left: 120px !important;
  }
  .u-ml136-lg {
    margin-left: 136px !important;
  }
  .u-ml144-lg {
    margin-left: 144px !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-ml0-xl {
    margin-left: 0px !important;
  }
  .u-ml2-xl {
    margin-left: 2px !important;
  }
  .u-ml4-xl {
    margin-left: 4px !important;
  }
  .u-ml8-xl {
    margin-left: 8px !important;
  }
  .u-ml12-xl {
    margin-left: 12px !important;
  }
  .u-ml16-xl {
    margin-left: 16px !important;
  }
  .u-ml20-xl {
    margin-left: 20px !important;
  }
  .u-ml24-xl {
    margin-left: 24px !important;
  }
  .u-ml28-xl {
    margin-left: 28px !important;
  }
  .u-ml32-xl {
    margin-left: 32px !important;
  }
  .u-ml36-xl {
    margin-left: 36px !important;
  }
  .u-ml40-xl {
    margin-left: 40px !important;
  }
  .u-ml48-xl {
    margin-left: 48px !important;
  }
  .u-ml56-xl {
    margin-left: 56px !important;
  }
  .u-ml64-xl {
    margin-left: 64px !important;
  }
  .u-ml72-xl {
    margin-left: 72px !important;
  }
  .u-ml80-xl {
    margin-left: 80px !important;
  }
  .u-ml88-xl {
    margin-left: 88px !important;
  }
  .u-ml96-xl {
    margin-left: 96px !important;
  }
  .u-ml104-xl {
    margin-left: 104px !important;
  }
  .u-ml112-xl {
    margin-left: 112px !important;
  }
  .u-ml120-xl {
    margin-left: 120px !important;
  }
  .u-ml128-xl {
    margin-left: 128px !important;
  }
  .u-ml120-xl {
    margin-left: 120px !important;
  }
  .u-ml136-xl {
    margin-left: 136px !important;
  }
  .u-ml144-xl {
    margin-left: 144px !important;
  }
}
/**
 * padding utility
 * @desc: padding の utility を /foundation/_variable.scss の $utilityValue の配列数分自動出力
 */
.u-pt0 {
  padding-top: 0px !important;
}

.u-pt2 {
  padding-top: 2px !important;
}

.u-pt4 {
  padding-top: 4px !important;
}

.u-pt8 {
  padding-top: 8px !important;
}

.u-pt12 {
  padding-top: 12px !important;
}

.u-pt16 {
  padding-top: 16px !important;
}

.u-pt20 {
  padding-top: 20px !important;
}

.u-pt24 {
  padding-top: 24px !important;
}

.u-pt28 {
  padding-top: 28px !important;
}

.u-pt32 {
  padding-top: 32px !important;
}

.u-pt36 {
  padding-top: 36px !important;
}

.u-pt40 {
  padding-top: 40px !important;
}

.u-pt48 {
  padding-top: 48px !important;
}

.u-pt56 {
  padding-top: 56px !important;
}

.u-pt64 {
  padding-top: 64px !important;
}

.u-pt72 {
  padding-top: 72px !important;
}

.u-pt80 {
  padding-top: 80px !important;
}

.u-pt88 {
  padding-top: 88px !important;
}

.u-pt96 {
  padding-top: 96px !important;
}

.u-pt104 {
  padding-top: 104px !important;
}

.u-pt112 {
  padding-top: 112px !important;
}

.u-pt120 {
  padding-top: 120px !important;
}

.u-pt128 {
  padding-top: 128px !important;
}

.u-pt120 {
  padding-top: 120px !important;
}

.u-pt136 {
  padding-top: 136px !important;
}

.u-pt144 {
  padding-top: 144px !important;
}

@media screen and (min-width: 768px) {
  .u-pt0-md {
    padding-top: 0px !important;
  }
  .u-pt2-md {
    padding-top: 2px !important;
  }
  .u-pt4-md {
    padding-top: 4px !important;
  }
  .u-pt8-md {
    padding-top: 8px !important;
  }
  .u-pt12-md {
    padding-top: 12px !important;
  }
  .u-pt16-md {
    padding-top: 16px !important;
  }
  .u-pt20-md {
    padding-top: 20px !important;
  }
  .u-pt24-md {
    padding-top: 24px !important;
  }
  .u-pt28-md {
    padding-top: 28px !important;
  }
  .u-pt32-md {
    padding-top: 32px !important;
  }
  .u-pt36-md {
    padding-top: 36px !important;
  }
  .u-pt40-md {
    padding-top: 40px !important;
  }
  .u-pt48-md {
    padding-top: 48px !important;
  }
  .u-pt56-md {
    padding-top: 56px !important;
  }
  .u-pt64-md {
    padding-top: 64px !important;
  }
  .u-pt72-md {
    padding-top: 72px !important;
  }
  .u-pt80-md {
    padding-top: 80px !important;
  }
  .u-pt88-md {
    padding-top: 88px !important;
  }
  .u-pt96-md {
    padding-top: 96px !important;
  }
  .u-pt104-md {
    padding-top: 104px !important;
  }
  .u-pt112-md {
    padding-top: 112px !important;
  }
  .u-pt120-md {
    padding-top: 120px !important;
  }
  .u-pt128-md {
    padding-top: 128px !important;
  }
  .u-pt120-md {
    padding-top: 120px !important;
  }
  .u-pt136-md {
    padding-top: 136px !important;
  }
  .u-pt144-md {
    padding-top: 144px !important;
  }
}
@media screen and (min-width: 992px) {
  .u-pt0-lg {
    padding-top: 0px !important;
  }
  .u-pt2-lg {
    padding-top: 2px !important;
  }
  .u-pt4-lg {
    padding-top: 4px !important;
  }
  .u-pt8-lg {
    padding-top: 8px !important;
  }
  .u-pt12-lg {
    padding-top: 12px !important;
  }
  .u-pt16-lg {
    padding-top: 16px !important;
  }
  .u-pt20-lg {
    padding-top: 20px !important;
  }
  .u-pt24-lg {
    padding-top: 24px !important;
  }
  .u-pt28-lg {
    padding-top: 28px !important;
  }
  .u-pt32-lg {
    padding-top: 32px !important;
  }
  .u-pt36-lg {
    padding-top: 36px !important;
  }
  .u-pt40-lg {
    padding-top: 40px !important;
  }
  .u-pt48-lg {
    padding-top: 48px !important;
  }
  .u-pt56-lg {
    padding-top: 56px !important;
  }
  .u-pt64-lg {
    padding-top: 64px !important;
  }
  .u-pt72-lg {
    padding-top: 72px !important;
  }
  .u-pt80-lg {
    padding-top: 80px !important;
  }
  .u-pt88-lg {
    padding-top: 88px !important;
  }
  .u-pt96-lg {
    padding-top: 96px !important;
  }
  .u-pt104-lg {
    padding-top: 104px !important;
  }
  .u-pt112-lg {
    padding-top: 112px !important;
  }
  .u-pt120-lg {
    padding-top: 120px !important;
  }
  .u-pt128-lg {
    padding-top: 128px !important;
  }
  .u-pt120-lg {
    padding-top: 120px !important;
  }
  .u-pt136-lg {
    padding-top: 136px !important;
  }
  .u-pt144-lg {
    padding-top: 144px !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-pt0-xl {
    padding-top: 0px !important;
  }
  .u-pt2-xl {
    padding-top: 2px !important;
  }
  .u-pt4-xl {
    padding-top: 4px !important;
  }
  .u-pt8-xl {
    padding-top: 8px !important;
  }
  .u-pt12-xl {
    padding-top: 12px !important;
  }
  .u-pt16-xl {
    padding-top: 16px !important;
  }
  .u-pt20-xl {
    padding-top: 20px !important;
  }
  .u-pt24-xl {
    padding-top: 24px !important;
  }
  .u-pt28-xl {
    padding-top: 28px !important;
  }
  .u-pt32-xl {
    padding-top: 32px !important;
  }
  .u-pt36-xl {
    padding-top: 36px !important;
  }
  .u-pt40-xl {
    padding-top: 40px !important;
  }
  .u-pt48-xl {
    padding-top: 48px !important;
  }
  .u-pt56-xl {
    padding-top: 56px !important;
  }
  .u-pt64-xl {
    padding-top: 64px !important;
  }
  .u-pt72-xl {
    padding-top: 72px !important;
  }
  .u-pt80-xl {
    padding-top: 80px !important;
  }
  .u-pt88-xl {
    padding-top: 88px !important;
  }
  .u-pt96-xl {
    padding-top: 96px !important;
  }
  .u-pt104-xl {
    padding-top: 104px !important;
  }
  .u-pt112-xl {
    padding-top: 112px !important;
  }
  .u-pt120-xl {
    padding-top: 120px !important;
  }
  .u-pt128-xl {
    padding-top: 128px !important;
  }
  .u-pt120-xl {
    padding-top: 120px !important;
  }
  .u-pt136-xl {
    padding-top: 136px !important;
  }
  .u-pt144-xl {
    padding-top: 144px !important;
  }
}
.u-pb0 {
  padding-bottom: 0px !important;
}

.u-pb2 {
  padding-bottom: 2px !important;
}

.u-pb4 {
  padding-bottom: 4px !important;
}

.u-pb8 {
  padding-bottom: 8px !important;
}

.u-pb12 {
  padding-bottom: 12px !important;
}

.u-pb16 {
  padding-bottom: 16px !important;
}

.u-pb20 {
  padding-bottom: 20px !important;
}

.u-pb24 {
  padding-bottom: 24px !important;
}

.u-pb28 {
  padding-bottom: 28px !important;
}

.u-pb32 {
  padding-bottom: 32px !important;
}

.u-pb36 {
  padding-bottom: 36px !important;
}

.u-pb40 {
  padding-bottom: 40px !important;
}

.u-pb48 {
  padding-bottom: 48px !important;
}

.u-pb56 {
  padding-bottom: 56px !important;
}

.u-pb64 {
  padding-bottom: 64px !important;
}

.u-pb72 {
  padding-bottom: 72px !important;
}

.u-pb80 {
  padding-bottom: 80px !important;
}

.u-pb88 {
  padding-bottom: 88px !important;
}

.u-pb96 {
  padding-bottom: 96px !important;
}

.u-pb104 {
  padding-bottom: 104px !important;
}

.u-pb112 {
  padding-bottom: 112px !important;
}

.u-pb120 {
  padding-bottom: 120px !important;
}

.u-pb128 {
  padding-bottom: 128px !important;
}

.u-pb120 {
  padding-bottom: 120px !important;
}

.u-pb136 {
  padding-bottom: 136px !important;
}

.u-pb144 {
  padding-bottom: 144px !important;
}

@media screen and (min-width: 768px) {
  .u-pb0-md {
    padding-bottom: 0px !important;
  }
  .u-pb2-md {
    padding-bottom: 2px !important;
  }
  .u-pb4-md {
    padding-bottom: 4px !important;
  }
  .u-pb8-md {
    padding-bottom: 8px !important;
  }
  .u-pb12-md {
    padding-bottom: 12px !important;
  }
  .u-pb16-md {
    padding-bottom: 16px !important;
  }
  .u-pb20-md {
    padding-bottom: 20px !important;
  }
  .u-pb24-md {
    padding-bottom: 24px !important;
  }
  .u-pb28-md {
    padding-bottom: 28px !important;
  }
  .u-pb32-md {
    padding-bottom: 32px !important;
  }
  .u-pb36-md {
    padding-bottom: 36px !important;
  }
  .u-pb40-md {
    padding-bottom: 40px !important;
  }
  .u-pb48-md {
    padding-bottom: 48px !important;
  }
  .u-pb56-md {
    padding-bottom: 56px !important;
  }
  .u-pb64-md {
    padding-bottom: 64px !important;
  }
  .u-pb72-md {
    padding-bottom: 72px !important;
  }
  .u-pb80-md {
    padding-bottom: 80px !important;
  }
  .u-pb88-md {
    padding-bottom: 88px !important;
  }
  .u-pb96-md {
    padding-bottom: 96px !important;
  }
  .u-pb104-md {
    padding-bottom: 104px !important;
  }
  .u-pb112-md {
    padding-bottom: 112px !important;
  }
  .u-pb120-md {
    padding-bottom: 120px !important;
  }
  .u-pb128-md {
    padding-bottom: 128px !important;
  }
  .u-pb120-md {
    padding-bottom: 120px !important;
  }
  .u-pb136-md {
    padding-bottom: 136px !important;
  }
  .u-pb144-md {
    padding-bottom: 144px !important;
  }
}
@media screen and (min-width: 992px) {
  .u-pb0-lg {
    padding-bottom: 0px !important;
  }
  .u-pb2-lg {
    padding-bottom: 2px !important;
  }
  .u-pb4-lg {
    padding-bottom: 4px !important;
  }
  .u-pb8-lg {
    padding-bottom: 8px !important;
  }
  .u-pb12-lg {
    padding-bottom: 12px !important;
  }
  .u-pb16-lg {
    padding-bottom: 16px !important;
  }
  .u-pb20-lg {
    padding-bottom: 20px !important;
  }
  .u-pb24-lg {
    padding-bottom: 24px !important;
  }
  .u-pb28-lg {
    padding-bottom: 28px !important;
  }
  .u-pb32-lg {
    padding-bottom: 32px !important;
  }
  .u-pb36-lg {
    padding-bottom: 36px !important;
  }
  .u-pb40-lg {
    padding-bottom: 40px !important;
  }
  .u-pb48-lg {
    padding-bottom: 48px !important;
  }
  .u-pb56-lg {
    padding-bottom: 56px !important;
  }
  .u-pb64-lg {
    padding-bottom: 64px !important;
  }
  .u-pb72-lg {
    padding-bottom: 72px !important;
  }
  .u-pb80-lg {
    padding-bottom: 80px !important;
  }
  .u-pb88-lg {
    padding-bottom: 88px !important;
  }
  .u-pb96-lg {
    padding-bottom: 96px !important;
  }
  .u-pb104-lg {
    padding-bottom: 104px !important;
  }
  .u-pb112-lg {
    padding-bottom: 112px !important;
  }
  .u-pb120-lg {
    padding-bottom: 120px !important;
  }
  .u-pb128-lg {
    padding-bottom: 128px !important;
  }
  .u-pb120-lg {
    padding-bottom: 120px !important;
  }
  .u-pb136-lg {
    padding-bottom: 136px !important;
  }
  .u-pb144-lg {
    padding-bottom: 144px !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-pb0-xl {
    padding-bottom: 0px !important;
  }
  .u-pb2-xl {
    padding-bottom: 2px !important;
  }
  .u-pb4-xl {
    padding-bottom: 4px !important;
  }
  .u-pb8-xl {
    padding-bottom: 8px !important;
  }
  .u-pb12-xl {
    padding-bottom: 12px !important;
  }
  .u-pb16-xl {
    padding-bottom: 16px !important;
  }
  .u-pb20-xl {
    padding-bottom: 20px !important;
  }
  .u-pb24-xl {
    padding-bottom: 24px !important;
  }
  .u-pb28-xl {
    padding-bottom: 28px !important;
  }
  .u-pb32-xl {
    padding-bottom: 32px !important;
  }
  .u-pb36-xl {
    padding-bottom: 36px !important;
  }
  .u-pb40-xl {
    padding-bottom: 40px !important;
  }
  .u-pb48-xl {
    padding-bottom: 48px !important;
  }
  .u-pb56-xl {
    padding-bottom: 56px !important;
  }
  .u-pb64-xl {
    padding-bottom: 64px !important;
  }
  .u-pb72-xl {
    padding-bottom: 72px !important;
  }
  .u-pb80-xl {
    padding-bottom: 80px !important;
  }
  .u-pb88-xl {
    padding-bottom: 88px !important;
  }
  .u-pb96-xl {
    padding-bottom: 96px !important;
  }
  .u-pb104-xl {
    padding-bottom: 104px !important;
  }
  .u-pb112-xl {
    padding-bottom: 112px !important;
  }
  .u-pb120-xl {
    padding-bottom: 120px !important;
  }
  .u-pb128-xl {
    padding-bottom: 128px !important;
  }
  .u-pb120-xl {
    padding-bottom: 120px !important;
  }
  .u-pb136-xl {
    padding-bottom: 136px !important;
  }
  .u-pb144-xl {
    padding-bottom: 144px !important;
  }
}
.u-pr0 {
  padding-right: 0px !important;
}

.u-pr2 {
  padding-right: 2px !important;
}

.u-pr4 {
  padding-right: 4px !important;
}

.u-pr8 {
  padding-right: 8px !important;
}

.u-pr12 {
  padding-right: 12px !important;
}

.u-pr16 {
  padding-right: 16px !important;
}

.u-pr20 {
  padding-right: 20px !important;
}

.u-pr24 {
  padding-right: 24px !important;
}

.u-pr28 {
  padding-right: 28px !important;
}

.u-pr32 {
  padding-right: 32px !important;
}

.u-pr36 {
  padding-right: 36px !important;
}

.u-pr40 {
  padding-right: 40px !important;
}

.u-pr48 {
  padding-right: 48px !important;
}

.u-pr56 {
  padding-right: 56px !important;
}

.u-pr64 {
  padding-right: 64px !important;
}

.u-pr72 {
  padding-right: 72px !important;
}

.u-pr80 {
  padding-right: 80px !important;
}

.u-pr88 {
  padding-right: 88px !important;
}

.u-pr96 {
  padding-right: 96px !important;
}

.u-pr104 {
  padding-right: 104px !important;
}

.u-pr112 {
  padding-right: 112px !important;
}

.u-pr120 {
  padding-right: 120px !important;
}

.u-pr128 {
  padding-right: 128px !important;
}

.u-pr120 {
  padding-right: 120px !important;
}

.u-pr136 {
  padding-right: 136px !important;
}

.u-pr144 {
  padding-right: 144px !important;
}

@media screen and (min-width: 768px) {
  .u-pr0-md {
    padding-right: 0px !important;
  }
  .u-pr2-md {
    padding-right: 2px !important;
  }
  .u-pr4-md {
    padding-right: 4px !important;
  }
  .u-pr8-md {
    padding-right: 8px !important;
  }
  .u-pr12-md {
    padding-right: 12px !important;
  }
  .u-pr16-md {
    padding-right: 16px !important;
  }
  .u-pr20-md {
    padding-right: 20px !important;
  }
  .u-pr24-md {
    padding-right: 24px !important;
  }
  .u-pr28-md {
    padding-right: 28px !important;
  }
  .u-pr32-md {
    padding-right: 32px !important;
  }
  .u-pr36-md {
    padding-right: 36px !important;
  }
  .u-pr40-md {
    padding-right: 40px !important;
  }
  .u-pr48-md {
    padding-right: 48px !important;
  }
  .u-pr56-md {
    padding-right: 56px !important;
  }
  .u-pr64-md {
    padding-right: 64px !important;
  }
  .u-pr72-md {
    padding-right: 72px !important;
  }
  .u-pr80-md {
    padding-right: 80px !important;
  }
  .u-pr88-md {
    padding-right: 88px !important;
  }
  .u-pr96-md {
    padding-right: 96px !important;
  }
  .u-pr104-md {
    padding-right: 104px !important;
  }
  .u-pr112-md {
    padding-right: 112px !important;
  }
  .u-pr120-md {
    padding-right: 120px !important;
  }
  .u-pr128-md {
    padding-right: 128px !important;
  }
  .u-pr120-md {
    padding-right: 120px !important;
  }
  .u-pr136-md {
    padding-right: 136px !important;
  }
  .u-pr144-md {
    padding-right: 144px !important;
  }
}
@media screen and (min-width: 992px) {
  .u-pr0-lg {
    padding-right: 0px !important;
  }
  .u-pr2-lg {
    padding-right: 2px !important;
  }
  .u-pr4-lg {
    padding-right: 4px !important;
  }
  .u-pr8-lg {
    padding-right: 8px !important;
  }
  .u-pr12-lg {
    padding-right: 12px !important;
  }
  .u-pr16-lg {
    padding-right: 16px !important;
  }
  .u-pr20-lg {
    padding-right: 20px !important;
  }
  .u-pr24-lg {
    padding-right: 24px !important;
  }
  .u-pr28-lg {
    padding-right: 28px !important;
  }
  .u-pr32-lg {
    padding-right: 32px !important;
  }
  .u-pr36-lg {
    padding-right: 36px !important;
  }
  .u-pr40-lg {
    padding-right: 40px !important;
  }
  .u-pr48-lg {
    padding-right: 48px !important;
  }
  .u-pr56-lg {
    padding-right: 56px !important;
  }
  .u-pr64-lg {
    padding-right: 64px !important;
  }
  .u-pr72-lg {
    padding-right: 72px !important;
  }
  .u-pr80-lg {
    padding-right: 80px !important;
  }
  .u-pr88-lg {
    padding-right: 88px !important;
  }
  .u-pr96-lg {
    padding-right: 96px !important;
  }
  .u-pr104-lg {
    padding-right: 104px !important;
  }
  .u-pr112-lg {
    padding-right: 112px !important;
  }
  .u-pr120-lg {
    padding-right: 120px !important;
  }
  .u-pr128-lg {
    padding-right: 128px !important;
  }
  .u-pr120-lg {
    padding-right: 120px !important;
  }
  .u-pr136-lg {
    padding-right: 136px !important;
  }
  .u-pr144-lg {
    padding-right: 144px !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-pr0-xl {
    padding-right: 0px !important;
  }
  .u-pr2-xl {
    padding-right: 2px !important;
  }
  .u-pr4-xl {
    padding-right: 4px !important;
  }
  .u-pr8-xl {
    padding-right: 8px !important;
  }
  .u-pr12-xl {
    padding-right: 12px !important;
  }
  .u-pr16-xl {
    padding-right: 16px !important;
  }
  .u-pr20-xl {
    padding-right: 20px !important;
  }
  .u-pr24-xl {
    padding-right: 24px !important;
  }
  .u-pr28-xl {
    padding-right: 28px !important;
  }
  .u-pr32-xl {
    padding-right: 32px !important;
  }
  .u-pr36-xl {
    padding-right: 36px !important;
  }
  .u-pr40-xl {
    padding-right: 40px !important;
  }
  .u-pr48-xl {
    padding-right: 48px !important;
  }
  .u-pr56-xl {
    padding-right: 56px !important;
  }
  .u-pr64-xl {
    padding-right: 64px !important;
  }
  .u-pr72-xl {
    padding-right: 72px !important;
  }
  .u-pr80-xl {
    padding-right: 80px !important;
  }
  .u-pr88-xl {
    padding-right: 88px !important;
  }
  .u-pr96-xl {
    padding-right: 96px !important;
  }
  .u-pr104-xl {
    padding-right: 104px !important;
  }
  .u-pr112-xl {
    padding-right: 112px !important;
  }
  .u-pr120-xl {
    padding-right: 120px !important;
  }
  .u-pr128-xl {
    padding-right: 128px !important;
  }
  .u-pr120-xl {
    padding-right: 120px !important;
  }
  .u-pr136-xl {
    padding-right: 136px !important;
  }
  .u-pr144-xl {
    padding-right: 144px !important;
  }
}
.u-pl0 {
  padding-left: 0px !important;
}

.u-pl2 {
  padding-left: 2px !important;
}

.u-pl4 {
  padding-left: 4px !important;
}

.u-pl8 {
  padding-left: 8px !important;
}

.u-pl12 {
  padding-left: 12px !important;
}

.u-pl16 {
  padding-left: 16px !important;
}

.u-pl20 {
  padding-left: 20px !important;
}

.u-pl24 {
  padding-left: 24px !important;
}

.u-pl28 {
  padding-left: 28px !important;
}

.u-pl32 {
  padding-left: 32px !important;
}

.u-pl36 {
  padding-left: 36px !important;
}

.u-pl40 {
  padding-left: 40px !important;
}

.u-pl48 {
  padding-left: 48px !important;
}

.u-pl56 {
  padding-left: 56px !important;
}

.u-pl64 {
  padding-left: 64px !important;
}

.u-pl72 {
  padding-left: 72px !important;
}

.u-pl80 {
  padding-left: 80px !important;
}

.u-pl88 {
  padding-left: 88px !important;
}

.u-pl96 {
  padding-left: 96px !important;
}

.u-pl104 {
  padding-left: 104px !important;
}

.u-pl112 {
  padding-left: 112px !important;
}

.u-pl120 {
  padding-left: 120px !important;
}

.u-pl128 {
  padding-left: 128px !important;
}

.u-pl120 {
  padding-left: 120px !important;
}

.u-pl136 {
  padding-left: 136px !important;
}

.u-pl144 {
  padding-left: 144px !important;
}

@media screen and (min-width: 768px) {
  .u-pl0-md {
    padding-left: 0px !important;
  }
  .u-pl2-md {
    padding-left: 2px !important;
  }
  .u-pl4-md {
    padding-left: 4px !important;
  }
  .u-pl8-md {
    padding-left: 8px !important;
  }
  .u-pl12-md {
    padding-left: 12px !important;
  }
  .u-pl16-md {
    padding-left: 16px !important;
  }
  .u-pl20-md {
    padding-left: 20px !important;
  }
  .u-pl24-md {
    padding-left: 24px !important;
  }
  .u-pl28-md {
    padding-left: 28px !important;
  }
  .u-pl32-md {
    padding-left: 32px !important;
  }
  .u-pl36-md {
    padding-left: 36px !important;
  }
  .u-pl40-md {
    padding-left: 40px !important;
  }
  .u-pl48-md {
    padding-left: 48px !important;
  }
  .u-pl56-md {
    padding-left: 56px !important;
  }
  .u-pl64-md {
    padding-left: 64px !important;
  }
  .u-pl72-md {
    padding-left: 72px !important;
  }
  .u-pl80-md {
    padding-left: 80px !important;
  }
  .u-pl88-md {
    padding-left: 88px !important;
  }
  .u-pl96-md {
    padding-left: 96px !important;
  }
  .u-pl104-md {
    padding-left: 104px !important;
  }
  .u-pl112-md {
    padding-left: 112px !important;
  }
  .u-pl120-md {
    padding-left: 120px !important;
  }
  .u-pl128-md {
    padding-left: 128px !important;
  }
  .u-pl120-md {
    padding-left: 120px !important;
  }
  .u-pl136-md {
    padding-left: 136px !important;
  }
  .u-pl144-md {
    padding-left: 144px !important;
  }
}
@media screen and (min-width: 992px) {
  .u-pl0-lg {
    padding-left: 0px !important;
  }
  .u-pl2-lg {
    padding-left: 2px !important;
  }
  .u-pl4-lg {
    padding-left: 4px !important;
  }
  .u-pl8-lg {
    padding-left: 8px !important;
  }
  .u-pl12-lg {
    padding-left: 12px !important;
  }
  .u-pl16-lg {
    padding-left: 16px !important;
  }
  .u-pl20-lg {
    padding-left: 20px !important;
  }
  .u-pl24-lg {
    padding-left: 24px !important;
  }
  .u-pl28-lg {
    padding-left: 28px !important;
  }
  .u-pl32-lg {
    padding-left: 32px !important;
  }
  .u-pl36-lg {
    padding-left: 36px !important;
  }
  .u-pl40-lg {
    padding-left: 40px !important;
  }
  .u-pl48-lg {
    padding-left: 48px !important;
  }
  .u-pl56-lg {
    padding-left: 56px !important;
  }
  .u-pl64-lg {
    padding-left: 64px !important;
  }
  .u-pl72-lg {
    padding-left: 72px !important;
  }
  .u-pl80-lg {
    padding-left: 80px !important;
  }
  .u-pl88-lg {
    padding-left: 88px !important;
  }
  .u-pl96-lg {
    padding-left: 96px !important;
  }
  .u-pl104-lg {
    padding-left: 104px !important;
  }
  .u-pl112-lg {
    padding-left: 112px !important;
  }
  .u-pl120-lg {
    padding-left: 120px !important;
  }
  .u-pl128-lg {
    padding-left: 128px !important;
  }
  .u-pl120-lg {
    padding-left: 120px !important;
  }
  .u-pl136-lg {
    padding-left: 136px !important;
  }
  .u-pl144-lg {
    padding-left: 144px !important;
  }
}
@media screen and (min-width: 1200px) {
  .u-pl0-xl {
    padding-left: 0px !important;
  }
  .u-pl2-xl {
    padding-left: 2px !important;
  }
  .u-pl4-xl {
    padding-left: 4px !important;
  }
  .u-pl8-xl {
    padding-left: 8px !important;
  }
  .u-pl12-xl {
    padding-left: 12px !important;
  }
  .u-pl16-xl {
    padding-left: 16px !important;
  }
  .u-pl20-xl {
    padding-left: 20px !important;
  }
  .u-pl24-xl {
    padding-left: 24px !important;
  }
  .u-pl28-xl {
    padding-left: 28px !important;
  }
  .u-pl32-xl {
    padding-left: 32px !important;
  }
  .u-pl36-xl {
    padding-left: 36px !important;
  }
  .u-pl40-xl {
    padding-left: 40px !important;
  }
  .u-pl48-xl {
    padding-left: 48px !important;
  }
  .u-pl56-xl {
    padding-left: 56px !important;
  }
  .u-pl64-xl {
    padding-left: 64px !important;
  }
  .u-pl72-xl {
    padding-left: 72px !important;
  }
  .u-pl80-xl {
    padding-left: 80px !important;
  }
  .u-pl88-xl {
    padding-left: 88px !important;
  }
  .u-pl96-xl {
    padding-left: 96px !important;
  }
  .u-pl104-xl {
    padding-left: 104px !important;
  }
  .u-pl112-xl {
    padding-left: 112px !important;
  }
  .u-pl120-xl {
    padding-left: 120px !important;
  }
  .u-pl128-xl {
    padding-left: 128px !important;
  }
  .u-pl120-xl {
    padding-left: 120px !important;
  }
  .u-pl136-xl {
    padding-left: 136px !important;
  }
  .u-pl144-xl {
    padding-left: 144px !important;
  }
}