@charset "UTF-8";
/* --------------------------------------------------------------------------------
   ブレークポイント
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   リセットCSS
   --------------------------------------------------------------------------------
     - マージン、パディング、ボーダーはすべて0
     - フォントサイズは 16px（1.4rem） に揃える
     - 見出し、em、strong、b、th は太字にする
     - テーブルはボーダーあり
     - など
   --------------------------------------------------------------------------------
   ＜補足＞
     - Meyresweb CSS Reset に一部 Normalize.css を足した感じ
     - Meyersweb CSS Reset : https://meyerweb.com/eric/tools/css/reset/
     - Normalize.css: https://necolas.github.io/normalize.css/
----------------------------------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  font-size: 62.5%;
  /* rootフォントサイズを10pxにする（16px * 62.55 = 10px） */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
::before,
::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, "Helvetica Neue", Verdana, sans-serif;
  font-size: 1.6em;
  /* 16px（body で rem ではなく em を使うのはChromeのバグ対策） */
  line-height: 2;
  -webkit-text-size-adjust: 100%;
  /* スマホを横向きにしたとき等に文字サイズを自動調整しない（CSSの指定どおり） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: top;
  -webkit-backface-visibility: hidden;
  /* Chromeで画像がぼやける現象を回避 */
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.4rem;
  font-weight: bold;
}

b,
em,
strong {
  font-style: normal;
  font-weight: bold;
}

small {
  font-size: 80%;
}

/* sub, sup が行間に影響を及ぼすのを防ぐ */
sub,
sup {
  position: relative;
  margin-left: 0.3em;
  margin-right: 0.3em;
  font-size: 77%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  border-top: 1px solid #ccc;
}

pre,
code,
kbd,
samp,
tt {
  font-family: monospace;
}

/* アンカー */
a {
  color: #03c;
  text-decoration: underline;
}

a:visited {
  color: #60a;
  text-decoration: underline;
}

a:hover {
  color: #f00;
  text-decoration: none;
}

a:focus {
  outline: none;
}

a:hover,
a:active {
  outline: none;
}

/* テーブル */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0.5em 0.8em;
  border: 1px solid #ddd;
}

th {
  font-weight: bold;
  text-align: left;
}

thead th {
  text-align: center;
  background-color: #DEE2E6;
}

tbody th {
  background-color: #f9f9f9;
}

/* フォーム */
[disabled] {
  cursor: default;
}

label {
  cursor: pointer;
}

button,
input,
select,
optgroup,
textarea {
  font-family: inherit;
  font-size: 100%;
}

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

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  /* Firefox で button 要素に CSS で消せない padding と border がつくのを消す (normalize.css) */
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  /* 上で消したボーダーを outline として表示 */
  outline: 1px dotted ButtonText;
}

input[type=text],
input[type=email],
textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  border-radius: 0.3rem;
  border: 1px solid #ddd;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  outline: #019CE1 auto 2px;
}

textarea {
  display: block;
  overflow: auto;
  vertical-align: top;
}

input:invalid,
textarea:invalid {
  background-color: #f0dddd;
}

select {
  /* Style select like a standard input */
  -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+ */
}

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

progress {
  /* Chrome, Firefox, Opera における調整 */
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  /* Correct the cursor style of increment and decrement buttons in Chrome */
  height: auto;
}

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

[type=search]::-webkit-search-decoration {
  /* Remove the inner padding in Chrome and Safari on macOS */
  -webkit-appearance: none;
}

/* 画像リンクのホバー効果 */
a:hover img {
  opacity: 0.9;
}

/* アクセシビリティ */
[aria-busy=true] {
  /* Specify the progress cursor of updating elements */
  cursor: progress;
}

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

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

/* 印刷用 */
@media print {
  thead {
    display: table-header-group;
  }

  tr,
img {
    page-break-inside: avoid;
  }

  h1,
h2,
h3 {
    page-break-after: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 1.2cm;
  }
}
/* --------------------------------------------------------------------------------
   フォント
   --------------------------------------------------------------------------------
    - -apple-system: Mac と iOS 用フォント SanFrancisco。ヒラギノに近いが欧文はヒラギノより良い
    - BlinkMacSystemFont: Chrome で SanFranciso を使いたいときの指定
----------------------------------------------------------------------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, Arial, sans-serif;
  font-size: 1.4em;
  /* 14px（body で rem ではなく em を使うのはChromeのバグ対策） */
  line-height: 2;
  color: #343A40;
}

@media print, screen and (max-width: 1280px) {
  html {
    /* Viewport: 1280px のときの 10px = 0.78vw（10/1280=0.0078=0.78vw） */
  }
}
@media print, screen and (max-width: 1024px) {
  html {
    /* Viewport: 1024px のときの 10px = 0.98vw（10/1024=0.0098=0.98vw） */
  }
}
@media print, screen and (max-width: 599px) {
  html {
    /* 2.5vw は Viewport: 400px のときの 10px = 2.5vw（10/400=0.025=2.5vw） */
  }
}

/* --------------------------------------------------------------------------------
   リンクスタイル
----------------------------------------------------------------------------------- */
a:link {
  color: #007EB8;
}

a:visited {
  color: #0A416A;
}

a:hover {
  text-decoration: none;
}

em {
  color: #000000;
}

strong {
  color: #C73D3D;
}

/* --------------------------------------------------------------------------------
   ベースのスタイル
   --------------------------------------------------------------------------------
    - 要素セレクタの初期値を定義
    - リセットCSSを上書きするイメージ
----------------------------------------------------------------------------------- */
/* コンテンツ量が少ないときも、フッタをウィンドウ下部に固定するための設定 */
html {
  height: 100%;
}
@media all and (-ms-high-contrast: none) {
  html {
    min-width: 1024px;
  }
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
body > * {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* 本文エリアにおけるいい感じのマージン設定 */
/*
  補足：
  以下のルールを適用したいのは .l-section 内のみだが .l-section を付加して定義すると
  上書きが無駄に大変になる（!important が必要になるなど）ので付加しない
*/
p,
ul,
ol,
dl {
  margin-top: 1em;
  margin-bottom: 1em;
}
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child {
  margin-top: 0;
}
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child {
  margin-bottom: 0;
}

h1 + p,
h1 + ul,
h1 + ol,
h1 + dl,
h1 + div,
h1 + table,
h2 + p,
h2 + ul,
h2 + ol,
h2 + dl,
h2 + div,
h2 + table,
h3 + p,
h3 + ul,
h3 + ol,
h3 + dl,
h3 + div,
h3 + table,
h4 + p,
h4 + ul,
h4 + ol,
h4 + dl,
h4 + div,
h4 + table,
h5 + p,
h5 + ul,
h5 + ol,
h5 + dl,
h5 + div,
h5 + table,
h6 + p,
h6 + ul,
h6 + ol,
h6 + dl,
h6 + div,
h6 + table {
  margin-top: 0;
}

/* --------------------------------------------------------------------------------
   .l-bread : パンくずリスト
----------------------------------------------------------------------------------- */
.l-bread {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 2.4rem;
  margin: 0;
  padding: 0 0.5em;
  font-size: 1.3rem;
  line-height: 1.3;
  overflow-x: auto;
  background-color: #E9ECEF;
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}
@media all and (-ms-high-contrast: none) {
  .l-bread {
    min-height: 0;
  }
}
.l-bread::-webkit-scrollbar {
  /* Chrome, Safari */
  display: none;
}
.l-bread li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-bread li:not(:last-child)::after {
  content: "\f054";
  margin: 0 0.5em;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  color: #AEB7BF;
}
.l-bread a {
  color: #7A838C;
  text-decoration: none;
  white-space: nowrap;
}
.l-bread a:hover {
  text-decoration: underline;
  color: #D8B844;
}
/* --------------------------------------------------------------------------------
   .l-page-ttl : ページタイトル
----------------------------------------------------------------------------------- */
.l-page-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 8rem;
  padding: 0 5vw;
  padding: 0 min(10rem, 5vw);
  color: #FFFFFF;
  background: url(/mbuffetDemo/jsp/BFuser/common/images/bg_page_title.jpg) no-repeat center top;
  background-size: cover;
}
.l-page-ttl h1 {
  padding-left: 5rem;
  font-size: 2.4rem;
  font-size: min(3.2rem, 2vw);
  font-weight: bold;
  line-height: 2.4rem;
  letter-spacing: 0.4em;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 2.4rem;
}
.l-page-ttl p {
  margin-left: 5vw;
  padding-left: 5vw;
  margin-left: min(10rem, 5vw);
  padding-left: min(10rem, 5vw);
  line-height: 1.5;
  border-left: 0.1rem solid rgba(255, 255, 255, .5);
}
.l-page-ttl.is-book h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_book_white.svg);
}
.l-page-ttl.is-enquete h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_enquete_white.svg);
}
.l-page-ttl.is-forum h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_title_forum.svg);
}
.l-page-ttl.is-question h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_question_white.svg);
}
.l-page-ttl.is-newspaper h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_newspaper_white.svg);
}
.l-page-ttl.is-step h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_step_white.svg);
}
.l-page-ttl.is-graph h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_graph_white.svg);
}
.l-page-ttl.is-review h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_review_white.svg);
}
.l-page-ttl.is-comment h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_comment_white.svg);
}
.l-page-ttl.is-forum h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_forum_white.svg);
}
.l-page-ttl.is-badge h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_badge_white.svg);
}
.l-page-ttl.is-edit h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_edit_note_white.svg);
}
.l-page-ttl.is-bonus h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_bonus_white.svg);
}
.l-page-ttl.is-qa-list h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_question_answer_white.svg);
}
.l-page-ttl.is-question h1 {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_question_white.svg);
}
@media print, screen and (max-width: 1024px) {
  .l-page-ttl {
    padding: 0 2rem;
  }
  .l-page-ttl h1 {
    padding-left: 4rem;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
  }
  .l-page-ttl p {
    margin-left: 2rem;
    padding-left: 2rem;
  }
}
@media print, screen and (max-width: 599px) {
  .l-page-ttl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    height: auto;
    padding: 2rem 2rem 1.5rem;
  }
  .l-page-ttl h1 {
    margin-bottom: 1rem;
    font-size: 2rem;
    line-height: 2.4rem;
    background-size: auto 2.4rem;
  }
  .l-page-ttl p {
    margin-left: 0;
    padding-left: 0;
    font-size: 1.2rem;
    border: 0;
  }
}

/* --------------------------------------------------------------------------------
   body および .l-container : コンテナ
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   .l-footer : フッタ
----------------------------------------------------------------------------------- */
.l-footer {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5rem;
  height: 10rem;
  margin-top: auto;
  padding: 0 5rem;
  font-size: 1.4rem;
  border-top: 0.1rem solid #DAE0E6;
  /* IE対応 */
}
.l-footer__left ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3em;
  margin: 0;
}
.l-footer__left a {
  text-decoration: none;
  color: #343A40;
}
.l-footer__left a:hover {
  text-decoration: underline;
}
.l-footer__left p {
  margin: 0;
}
.l-footer__jmam {
  margin-left: auto;
  padding: 10px 20px 0;
}
@media all and (-ms-high-contrast: none) {
  .l-footer > * {
    margin-right: 5rem;
  }
  .l-footer__left ul > * {
    margin-right: 3em;
  }
}
@media print, screen and (max-width: 768px) {
  .l-footer {
    position: relative;
    gap: 1rem;
    height: auto;
    padding: 2rem 1rem 5rem;
    font-size: 1rem;
  }
  .l-footer__ssl {
    width: 3rem;
  }
  .l-footer__left ul {
    gap: 1em;
  }
  .l-footer__jmam {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------------
   .l-gnav : グロナビ
----------------------------------------------------------------------------------- */
.l-gnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  border-right: 0.1rem solid #DAE0E6;
}
.l-gnav > li {
  width: 15rem;
  border-left: 0.1rem solid #DAE0E6;
}
.l-gnav__btn {
  position: relative;
  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: 100%;
  height: 5rem;
  padding-top: 0;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #000000;
  border: 0;
  outline: 0;
  background-color: transparent;
}
.l-gnav__btn > span:not(.c-icon-notice) {
  position: relative;
}
.l-gnav__btn > span:not(.c-icon-notice)::after {
  content: "\f0dd";
  position: absolute;
  left: calc(50% - 1.5rem);
  bottom: -1.5rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
  color: #007EB8;
}
.l-gnav__btn::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1.6rem;
}
.l-gnav__btn.is-item-1::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_book_black.svg);
}
.l-gnav__btn.is-item-2::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_graph_black.svg);
  background-size: 2rem;
}
.l-gnav__btn.is-item-3::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_user_black.svg);
}
.l-gnav__btn .c-icon-notice {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}
.l-gnav > li:hover {
  background-image: linear-gradient(75deg, #007EB8 0, #019CE1 100%);
  background-position: center;
  background-size: 128rem;
}
.l-gnav > li:hover .l-gnav__btn {
  color: #FFFFFF;
}
.l-gnav > li:hover .l-gnav__btn > span:not(.c-icon-notice) {
  position: relative;
}
.l-gnav > li:hover .l-gnav__btn > span:not(.c-icon-notice)::after {
  color: #FFFFFF;
}
.l-gnav > li:hover .l-gnav__btn.is-item-1::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_book_white.svg);
}
.l-gnav > li:hover .l-gnav__btn.is-item-2::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_graph_white.svg);
}
.l-gnav > li:hover .l-gnav__btn.is-item-3::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_user_white.svg);
}
@media print, screen and (max-width: 1024px) {
  .l-gnav > li {
    width: 12.5rem;
  }
}
@media print, screen and (max-width: 768px) {
  .l-gnav {
    display: none;
  }
}

@media print, screen and (max-width: 1024px) {
  .is-period .l-gnav > li {
    width: 11.2rem;
  }
}

/* --------------------------------------------------------------------------------
   .l-header : サイトヘッダ
----------------------------------------------------------------------------------- */
.l-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 5rem;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, .2);
          box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, .2);
}
.l-header h1 {
  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;
  min-width: 15rem;
  padding: 0 2rem;
}
.page-login .l-header h1 {
  padding: 0;
}
.page-login .l-header h1 > img {
  margin: 0 3.75rem;
}
.page-login .l-header h1 span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 17.4rem;
  padding-top: 0.4rem;
}
.l-header h1 em {
  display: inline-block;
  margin-left: 1em;
  padding: 0 1em;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 3rem;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  border-radius: 0.5rem;
  background-color: #7d4775;
}
.l-header__username {
  margin: 0;
  font-weight: bold;
}
.l-header__close {
  margin-left: auto;
  margin-right: 2rem;
  font-size: 1.4rem;
  text-decoration: none;
}
.l-header__sp-username {
  display: none;
}
.l-header__others {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  margin-left: auto;
  margin-right: 1em;
  font-size: 1.3rem;
}
.l-header__others > li {
  margin: 0 0.7em;
}
.l-header__others > li > a {
  text-decoration: none;
  color: #343A40;
}
.l-header__others > li > a:hover {
  text-decoration: underline;
}
.l-header__others__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
}
@media print, screen and (max-width: 768px) {
  .l-header {
    min-width: 0;
    height: 5rem;
  }
  .l-header h1 {
    padding: 0 1rem;
    min-width: 9.4rem;
  }
  .l-header h1 > img {
    width: 73.33 0.3rem;
    height: 4.4rem;
  }
  .l-header h1 span {
    display: none;
  }
  .page-login .l-header h1 > img {
    margin: 0 1rem;
  }
  .l-header__others {
    display: none;
  }
  .l-header__sp-username {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: auto;
    margin-right: 0.8rem;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.2;
  }
}

.is-period .l-header h1 {
  padding: 0 1rem;
}
@media print, screen and (max-width: 1024px) {
  .is-period .l-header__others > li {
    margin: 0 0.6em;
  }
}

/* --------------------------------------------------------------------------------
   .l-info-bar : 上部のアカウント名などを表示する青バー
----------------------------------------------------------------------------------- */
.l-info-bar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.4rem;
  padding: 0 1.5rem;
  color: #FFFFFF;
  background-color: #007EB8;
}
@media all and (-ms-high-contrast: none) {
  .l-info-bar {
    padding-right: 23rem;
  }
}
.l-info-bar a {
  color: #FFFFFF;
}
.l-info-bar__username {
  font-size: 1.3rem;
  font-weight: bold;
  white-space: nowrap;
}
.l-info-bar__datespan {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: auto;
  font-size: 1.3rem;
  white-space: nowrap;
}
@media all and (-ms-high-contrast: none) {
  .l-info-bar__datespan {
    position: absolute;
    right: 1.5rem;
    top: 0;
    bottom: 0;
    height: 2.6rem;
    margin: auto;
  }
}
body.page_first_login_form .l-info-bar__datespan, body.page_first_login_flow .l-info-bar__datespan {
  display: none;
}
@media print, screen and (max-width: 768px) {
  .l-info-bar {
    display: none;
  }
}

/* --------------------------------------------------------------------------------
   .l-info-bar : 上部のアカウント名などを表示する青バー
----------------------------------------------------------------------------------- */
.l-info-bar-err {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.4rem;
  padding: 0 1.5rem;
  font-size: 1.3rem;
  color: #D34C4C;
  border: 1px solid #D34C4C;
  background-color: #FAF2F2;
}
@media all and (-ms-high-contrast: none) {
  .l-info-bar-err {
    padding-right: 23rem;
  }
}
@media print, screen and (max-width: 768px) {
  .l-info-bar-err {
    display: none;
  }
}

/* --------------------------------------------------------------------------------
   .l-main : メイン
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   .l-mega-menu : メガメニュー
----------------------------------------------------------------------------------- */
.l-mega-menu {
  z-index: 50;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  left: 0;
  top: 5rem;
  width: 100%;
  min-width: 99rem;
  min-height: 33rem;
  padding: 5rem 2rem;
  color: #FFFFFF;
  background: linear-gradient(75deg, #007EB8 0, #019CE1 100%);
  -webkit-box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, .2);
          box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, .2);
  /* メインのリンク（アイコン付きのボックス） */
  /* メインのリンク（アイコン付きのボックス）のアイコン */
  /* メインのリンク（アイコン付きのボックス）のテキスト */
}
.is-period .l-mega-menu {
  min-height: auto;
}
.l-mega-menu:hover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.l-mega-menu a {
  text-decoration: none;
  color: #FFFFFF;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.l-mega-menu__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
.l-mega-menu__btns li {
  position: relative;
  width: 18rem;
  margin-right: 5rem;
}
.l-mega-menu__btns li:last-child {
  margin-right: 0;
}
.l-mega-menu__btns a {
  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;
  height: 12rem;
  text-decoration: none;
  color: #FFFFFF;
  border: 0.1rem solid rgba(255, 255, 255, .5);
  border-radius: 1rem;
}
.l-mega-menu__btns a .c-icon-notice {
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.l-mega-menu__btns a:hover img {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}
.l-mega-menu__btns p {
  margin-top: 1em;
  font-size: 1.3rem;
  text-align: justify;
  line-height: 2;
}
.l-mega-menu__icon {
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: 1rem;
}
.l-mega-menu__icon img {
  width: auto;
  height: 100%;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.l-mega-menu__text {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.3;
}
.l-mega-menu__links {
  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: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin: 0;
  margin-left: 8rem;
  padding-left: 8rem;
  font-size: 1.4rem;
  line-height: 3;
  border-left: 0.1rem solid rgba(255, 255, 255, .5);
}
.l-mega-menu__links dt {
  font-weight: bold;
  color: rgba(255, 255, 255, .7);
}
.l-mega-menu__links dd li::before {
  content: "──";
  margin-right: 0.5em;
}
.l-mega-menu__links dd a {
  text-decoration: none;
  color: #FFFFFF;
}
.l-mega-menu__links dd a:hover {
  text-decoration: underline;
}
@media print, screen and (max-width: 1024px) {
  .l-mega-menu {
    min-width: 0;
    padding: 5rem 2rem;
    /* メインのリンク（アイコン付きのボックス） */
    /* メインのリンク（アイコン付きのボックス）のテキスト */
  }
  .l-mega-menu__btns li {
    width: 15rem;
    margin-right: 2rem;
  }
  .l-mega-menu__btns p {
    font-size: 1.2rem;
  }
  .l-mega-menu__text {
    font-size: 1.3rem;
  }
  .l-mega-menu__links {
    margin-left: 2rem;
    padding-left: 2rem;
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .l-mega-menu__links dd {
    margin-top: 1em;
    padding-left: 1.5em;
  }
  .l-mega-menu__links dd li {
    list-style: disc;
    margin-bottom: 1em;
  }
  .l-mega-menu__links dd li::before {
    display: none;
  }
}
@media print, screen and (max-width: 768px) {
  .l-mega-menu {
    display: none !important;
  }
}

.l-gnav > li:hover .l-mega-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* --------------------------------------------------------------------------------
   .l-pagetop : ページトップ
----------------------------------------------------------------------------------- */
.l-pagetop {
  z-index: 30;
  position: fixed;
  right: 2rem;
  bottom: -8rem;
  width: 5rem;
  height: 5rem;
  padding: 0;
  opacity: 0.15;
  outline: 0;
  border: 0;
  background: none;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.l-pagetop::after {
  content: "\f0aa";
  font-family: "Font Awesome 5 Free";
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1;
}
.l-pagetop.is-active {
  bottom: 2rem;
}
.l-pagetop:hover {
  opacity: 0.3;
}
@media print, screen and (max-width: 599px) {
  .l-pagetop {
    right: 0.5rem;
  }
  .l-pagetop.is-active {
    bottom: 0.5rem;
  }
}

/* --------------------------------------------------------------------------------
   .l-sp-menu-btn : スマホメニューボタン
----------------------------------------------------------------------------------- */
.l-sp-menu-btn {
  display: none;
}
@media print, screen and (max-width: 768px) {
  .l-sp-menu-btn {
    display: block;
    position: relative;
    width: 6rem;
    height: 5rem;
    padding: 0;
    outline: 0;
    border: 0;
    border-radius: 0;
    background-color: #FFFFFF;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  .l-sp-menu-btn span:not(.c-icon-notice) {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 0.2rem;
    background-color: #343A40;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  .l-sp-menu-btn span:not(.c-icon-notice):nth-of-type(1) {
    top: 30%;
  }
  .l-sp-menu-btn span:not(.c-icon-notice):nth-of-type(2), .l-sp-menu-btn span:not(.c-icon-notice):nth-of-type(3) {
    top: 50%;
  }
  .l-sp-menu-btn span:not(.c-icon-notice):nth-of-type(4) {
    top: 70%;
  }
  .l-sp-menu-btn.is-active {
    height: 5rem;
    background-color: #019CE1;
  }
  .l-sp-menu-btn.is-active span:not(.c-icon-notice) {
    position: absolute;
    width: 50%;
    background-color: #FFFFFF;
  }
  .l-sp-menu-btn.is-active span:not(.c-icon-notice):nth-of-type(1), .l-sp-menu-btn.is-active span:not(.c-icon-notice):nth-of-type(4) {
    opacity: 0;
  }
  .l-sp-menu-btn.is-active span:not(.c-icon-notice):nth-of-type(2) {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .l-sp-menu-btn.is-active span:not(.c-icon-notice):nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .l-sp-menu-btn .c-icon-notice {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
  }
}

/* --------------------------------------------------------------------------------
   .l-sp-menu__main : SPメニューの中身（メインメニュー部分）
----------------------------------------------------------------------------------- */
@media print, screen and (max-width: 768px) {
  .l-sp-menu__main {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
  }
  .l-sp-menu__main .l-sp-menu__parent > button {
    width: 100%;
    height: 5rem;
    padding: 0 1.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: left;
    color: #000000;
    outline: 0;
    border: 0;
    border-top: 0.1rem solid #DAE0E6;
    background-color: transparent;
    background: url(/mbuffetDemo/jsp/BFuser/common/images/icon_sp_submenu_open.svg) no-repeat 96% center;
    background-size: 1.6rem;
  }
  .l-sp-menu__main .l-sp-menu__parent > button.is-active {
    background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_sp_submenu_close.svg);
  }
  .l-sp-menu__main .l-sp-menu__parent:first-child > button {
    border-top: 0;
  }
  .l-sp-menu__main .l-sp-menu__child {
    display: none;
    margin: 0;
    padding: 0 0 0 4rem;
    border-top: 0.1rem solid #DAE0E6;
  }
  .l-sp-menu__main .l-sp-menu__child a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 5rem;
    padding: 0 1.5rem 0 0;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    color: #000000;
    border-bottom: 0.1rem solid #DAE0E6;
  }
  .l-sp-menu__main .l-sp-menu__child a.l-sp-menu__sub {
    font-weight: normal;
    color: #343A40;
  }
  .l-sp-menu__main .l-sp-menu__child > li:last-child a {
    border-bottom: 0;
  }
  .l-sp-menu__main .c-icon-notice {
    margin-left: 0.5rem;
  }
  body.page_first_login_form .l-sp-menu__main, body.page_first_login_flow .l-sp-menu__main {
    display: none;
  }
}

/* --------------------------------------------------------------------------------
   .l-sp-menu__others : SPメニューの中身（その他メニュー部分）
----------------------------------------------------------------------------------- */
@media print, screen and (max-width: 768px) {
  .l-sp-menu__others {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
  }
  .l-sp-menu__others li {
    width: 33.333%;
    border-right: 0.1rem solid #DAE0E6;
    border-bottom: 0.1rem solid #DAE0E6;
  }
  .l-sp-menu__others li:nth-child(3), .l-sp-menu__others li:nth-child(6) {
    border-right: 0;
  }
  .l-sp-menu__others li:nth-child(4), .l-sp-menu__others li:nth-child(5), .l-sp-menu__others li:nth-child(6) {
    border-bottom: 0;
  }
  .l-sp-menu__others 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;
    height: 4rem;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    color: #007EB8;
  }
  body.page_first_login_form .l-sp-menu__others li {
    display: none;
  }
  body.page_first_login_form .l-sp-menu__others li:last-child {
    display: block;
    width: 100%;
  }
  body.page_first_login_flow .l-sp-menu__others li:nth-child(5) {
    display: none;
  }
  body.page_first_login_flow .l-sp-menu__others li:nth-child(4), body.page_first_login_flow .l-sp-menu__others li:nth-child(6) {
    width: 50%;
  }
}

/* --------------------------------------------------------------------------------
   .l-sp-menu : SPメニュー
----------------------------------------------------------------------------------- */
.l-sp-menu {
  display: none;
}
@media print, screen and (max-width: 768px) {
  .l-sp-menu {
    z-index: 50;
    display: none;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    padding: 20px 3vw;
    text-align: center;
    color: #FFFFFF;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #0179ae), to(#019ce1));
    background-image: linear-gradient(to right, #0179ae 0, #019ce1 100%);
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
            box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
  }
  .l-sp-menu ._datespan {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    font-size: 13px;
    margin-left: auto;
    white-space: nowrap;
  }
  .l-sp-menu .l-sp-menu__close {
    width: 240px;
    height: 40px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #019CE1;
    outline: 0;
    border: 0;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, .7);
  }
  body.page_first_login_form .l-sp-menu ._point, body.page_first_login_flow .l-sp-menu ._point {
    display: none;
  }
}

/* --------------------------------------------------------------------------------
   .l-section : 汎用のセクション
----------------------------------------------------------------------------------- */
.l-section {
  position: relative;
  padding: 3rem max(2rem, (100% - 1200px) / 2);
  padding: 3rem 2rem;
  border-top: 0.1rem solid #DAE0E6;
}
.l-section__inner {
  max-width: 120rem;
  margin: 0 auto;
}
.l-section__inner-full {
  width: 100%;
}
@media print, screen and (max-width: 1280px) {
  .l-section {
    padding: 3rem 1rem;
  }
  .l-section__inner {
    min-width: 99rem;
  }
}
@media print, screen and (max-width: 1024px) {
  .l-section__inner {
    min-width: 0;
  }
}
@media print, screen and (max-width: 599px) {
  .l-section {
    padding: 3rem 1rem;
  }
  .l-section__inner {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------------
   .l-modal : モーダル
----------------------------------------------------------------------------------- */
.l-modal {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 2rem 5rem;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, .5);
  /* 表示中 */
  /* モーダル本体のフレーム */
  /* ヘッダのボタン */
  /* ボディ */
}
.l-modal.is-visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.l-modal__container {
  position: relative;
  min-width: 64rem;
  max-width: 150rem;
  max-height: 100%;
  border-radius: 1rem;
  background-color: #FFFFFF;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* ヘッダ */
  /* フッタ */
}
.l-modal__container::-webkit-scrollbar {
  width: 0.8rem;
}
.l-modal__container::-webkit-scrollbar-track {
  border-radius: 0.8rem;
  background-color: rgba(255, 255, 255, .5);
}
.l-modal__container::-webkit-scrollbar-track:hover {
  background-color: rgba(255, 255, 255, .65);
}
.l-modal__container::-webkit-scrollbar-thumb {
  border-radius: 0.8rem;
  background-color: #007EB8;
}
.l-modal__container::-webkit-scrollbar-thumb:hover {
  background-color: #019CE1;
}
.l-modal__container > header {
  z-index: 100;
  position: sticky;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  height: 5rem;
  padding: 0 2rem;
  border-bottom: 0.1rem solid #DAE0E6;
  background-color: rgba(255, 255, 255, .95);
  -webkit-box-shadow: 0 0.1rem 0.1rem rgba(10, 65, 106, .15);
          box-shadow: 0 0.1rem 0.1rem rgba(10, 65, 106, .15);
}
.l-modal__container > header > h1 {
  padding: 0 7rem;
  font-size: 1.6rem;
  line-height: 1.3;
  text-align: center;
}
.l-modal__container > footer {
  position: sticky;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 7rem;
  background-color: rgba(242, 243, 244, .95);
  -webkit-box-shadow: 0 -0.1rem 0.1rem rgba(10, 65, 106, .15);
          box-shadow: 0 -0.1rem 0.1rem rgba(10, 65, 106, .15);
}
.l-modal__container > footer > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.l-modal__back, .l-modal__close {
  position: absolute;
  padding: 0;
  white-space: nowrap;
  outline: 0;
  border: 0;
  background: none;
}
.l-modal__back {
  left: 2rem;
  color: #007EB8;
}
.l-modal__back::before {
  content: "\f053";
  margin-right: 0.5em;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
.l-modal__close {
  right: 2rem;
  font-size: 2.8rem;
  color: #CAD1D9;
}
.l-modal__close:hover {
  color: #019CE1;
}
.l-modal__body {
  padding: 2rem;
}
@media print, screen and (max-width: 768px) {
  .l-modal__container {
    min-width: 56rem;
  }
}
@media print, screen and (max-width: 599px) {
  .l-modal {
    padding: 2rem 1rem;
    /* モーダル本体のフレーム */
    /* ヘッダのボタン */
    /* ボディ */
  }
  .l-modal__container {
    width: 100%;
    min-width: 0;
    max-width: none;
    /* ヘッダ */
    /* フッタ */
  }
  .l-modal__container > header {
    gap: 1rem;
    height: auto;
    min-height: 5rem;
    padding: 1rem 0;
  }
  .l-modal__container > header > h1 {
    padding: 0 5.5rem;
    font-size: 1.4rem;
  }
  .l-modal__container > footer {
    height: auto;
    padding: 1rem;
  }
  .l-modal__back {
    left: 1rem;
    font-size: 1.2rem;
  }
  .l-modal__back::before {
    margin-right: 0.5rem;
  }
  .l-modal__close {
    right: 1rem;
    font-size: 2rem;
  }
  .l-modal__body {
    padding: 1.5rem;
  }
}

/* --------------------------------------------------------------------------------
   .l-mini-msg : メイン
----------------------------------------------------------------------------------- */
.l-mini-msg {
  z-index: 200;
  position: fixed;
  left: 3rem;
  top: -15rem;
  min-width: 30rem;
  max-width: 90%;
  padding: 1rem 2rem;
  text-align: center;
  color: #165F27;
  border-radius: 0.5rem;
  border: 0.1rem solid #7AB170;
  background-color: #F4FCF2;
  -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, .2);
          box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, .2);
}
/* --------------------------------------------------------------------------------
   .l-baloon : 吹き出し通知
----------------------------------------------------------------------------------- */
.l-baloon {
  z-index: 40;
  position: fixed;
  left: 0;
  top: 9rem;
  display: none;
  max-width: 150rem;
  padding: 1rem 6.5rem 1rem 4rem;
  text-align: center;
  color: #714D09;
  border: 0.1rem solid #B1A167;
  border-radius: 1rem;
  background-color: #FFFAEA;
  -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, .2);
          box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, .2);
  /* 表示中 */
  /* 閉じるボタン */
  /* リンクもカーキ */
}
.l-baloon::before {
  content: "";
  position: absolute;
  left: calc(50% - 1.5rem);
  top: -1.1rem;
  width: 2rem;
  height: 2rem;
  border: 0.1rem solid #B1A167;
  border-width: 0.1rem 0.1rem 0 0;
  border-radius: 0.3rem;
  background-color: #FFFAEA;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.l-baloon.is-visible {
  display: block;
}
.l-baloon__close {
  position: absolute;
  right: 1rem;
  top: 1.4rem;
  padding: 0;
  font-size: 2rem;
  color: #B1A167;
  outline: 0;
  border: 0;
  background: none;
}
.l-baloon__close:hover {
  color: #D8B844;
}
.l-baloon a {
  font-weight: bold;
  color: #714D09;
}
@media print, screen and (max-width: 768px) {
  .l-baloon {
    max-width: 95%;
    padding: 1rem 4.5rem 1rem 2rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-btn-main : 学習ボタン各種
----------------------------------------------------------------------------------- */
.c-btn-main,
a.c-btn-main {
  position: relative;
  display: inline-block;
  min-width: 28rem;
  height: 5rem;
  padding: 0 2rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 5rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  outline: 0;
  border-radius: 0.7rem;
  border: 0;
  background-color: #019CE1;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 200% 100%;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  /* 教育担当者向け */
  /* アイコン */
  /* サイズ */
}
.c-btn-main:visited,
a.c-btn-main:visited {
  text-decoration: none;
  color: #FFFFFF;
}
.c-btn-main:hover,
a.c-btn-main:hover {
  opacity: 1;
  -webkit-box-shadow: 0 0.6rem 0.8rem rgba(0, 0, 0, .3);
          box-shadow: 0 0.6rem 0.8rem rgba(0, 0, 0, .3);
  background-position: 100% 0;
}
.c-btn-main:active,
a.c-btn-main:active {
  -webkit-box-shadow: 0 0 10rem rgba(0, 0, 0, .3) inset;
          box-shadow: 0 0 10rem rgba(0, 0, 0, .3) inset;
}
.c-btn-main.is-green,
a.c-btn-main.is-green {
  background-image: linear-gradient(135deg, #019CE1 25%, #80C35D 50%, #019CE1 100%);
}
.c-btn-main.is-gray,
a.c-btn-main.is-gray {
  background: #F2F3F4;
  border: 0.1rem solid #DAE0E6;
  color: #343A40;
  font-weight: normal;
}
.c-btn-main.is-gray:hover,
a.c-btn-main.is-gray:hover {
  -webkit-box-shadow: 0 0.6rem 0.8rem rgba(0, 0, 0, .1);
          box-shadow: 0 0.6rem 0.8rem rgba(0, 0, 0, .1);
}
.c-btn-main.is-purple,
a.c-btn-main.is-purple {
  background-image: linear-gradient(135deg, #019CE1 25%, #866EC8 50%, #019CE1 100%);
}
.c-btn-main.is-admin, .c-btn-main.is-admin,
a.c-btn-main.is-admin,
a.c-btn-main.is-admin {
  background-image: linear-gradient(135deg, #7d4775 25%, #A38030 50%, #7d4775 100%);
}
.c-btn-main.is-icon-book::before, .c-btn-main.is-icon-video::before, .c-btn-main.is-icon-study::before, .c-btn-main.is-icon-review::before, .c-btn-main.is-icon-repeat::before, .c-btn-main.is-icon-tree::before, .c-btn-main.is-icon-step::before,
a.c-btn-main.is-icon-book::before,
a.c-btn-main.is-icon-video::before,
a.c-btn-main.is-icon-study::before,
a.c-btn-main.is-icon-review::before,
a.c-btn-main.is-icon-repeat::before,
a.c-btn-main.is-icon-tree::before,
a.c-btn-main.is-icon-step::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 1rem;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.c-btn-main.is-icon-book::before,
a.c-btn-main.is-icon-book::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_btn_book.svg);
}
.c-btn-main.is-icon-video::before,
a.c-btn-main.is-icon-video::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_btn_video.svg);
}
.c-btn-main.is-icon-study::before,
a.c-btn-main.is-icon-study::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_btn_study.svg);
}
.c-btn-main.is-icon-review::before,
a.c-btn-main.is-icon-review::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_btn_review.svg);
}
.c-btn-main.is-icon-repeat::before,
a.c-btn-main.is-icon-repeat::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_btn_repeat.svg);
}
.c-btn-main.is-icon-tree::before,
a.c-btn-main.is-icon-tree::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_tree_white.svg);
}
.c-btn-main.is-icon-step::before,
a.c-btn-main.is-icon-step::before {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_step_white.svg);
}
.c-btn-main.is-sm,
a.c-btn-main.is-sm {
  height: 4rem;
  min-width: 20rem;
  padding: 0 2rem;
  font-size: 1.4rem;
  line-height: 4rem;
  border-radius: 0.5rem;
}
.c-btn-main.is-sm.is-icon-book, .c-btn-main.is-sm.is-icon-video, .c-btn-main.is-sm.is-icon-study, .c-btn-main.is-sm.is-icon-review, .c-btn-main.is-sm.is-icon-repeat, .c-btn-main.is-sm.is-icon-tree, .c-btn-main.is-sm.is-icon-step,
a.c-btn-main.is-sm.is-icon-book,
a.c-btn-main.is-sm.is-icon-video,
a.c-btn-main.is-sm.is-icon-study,
a.c-btn-main.is-sm.is-icon-review,
a.c-btn-main.is-sm.is-icon-repeat,
a.c-btn-main.is-sm.is-icon-tree,
a.c-btn-main.is-sm.is-icon-step {
  line-height: 4rem;
  padding-top: 0;
}
.c-btn-main.is-sm.is-icon-book::before, .c-btn-main.is-sm.is-icon-video::before, .c-btn-main.is-sm.is-icon-study::before, .c-btn-main.is-sm.is-icon-review::before, .c-btn-main.is-sm.is-icon-repeat::before, .c-btn-main.is-sm.is-icon-tree::before, .c-btn-main.is-sm.is-icon-step::before,
a.c-btn-main.is-sm.is-icon-book::before,
a.c-btn-main.is-sm.is-icon-video::before,
a.c-btn-main.is-sm.is-icon-study::before,
a.c-btn-main.is-sm.is-icon-review::before,
a.c-btn-main.is-sm.is-icon-repeat::before,
a.c-btn-main.is-sm.is-icon-tree::before,
a.c-btn-main.is-sm.is-icon-step::before {
  position: static;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  vertical-align: middle;
}
.c-btn-main.is-lg,
a.c-btn-main.is-lg {
  height: 6rem;
  padding: 0 2rem;
  font-size: 1.6rem;
  line-height: 6rem;
  /* アイコン */
}
.c-btn-main.is-lg.is-icon-book, .c-btn-main.is-lg.is-icon-video, .c-btn-main.is-lg.is-icon-study, .c-btn-main.is-lg.is-icon-review, .c-btn-main.is-lg.is-icon-repeat, .c-btn-main.is-lg.is-icon-tree, .c-btn-main.is-lg.is-icon-step,
a.c-btn-main.is-lg.is-icon-book,
a.c-btn-main.is-lg.is-icon-video,
a.c-btn-main.is-lg.is-icon-study,
a.c-btn-main.is-lg.is-icon-review,
a.c-btn-main.is-lg.is-icon-repeat,
a.c-btn-main.is-lg.is-icon-tree,
a.c-btn-main.is-lg.is-icon-step {
  padding-top: 2.7rem;
  font-size: 1.4rem;
  line-height: 3.5rem;
}
.c-btn-main.is-lg.is-icon-book::before, .c-btn-main.is-lg.is-icon-video::before, .c-btn-main.is-lg.is-icon-study::before, .c-btn-main.is-lg.is-icon-review::before, .c-btn-main.is-lg.is-icon-repeat::before, .c-btn-main.is-lg.is-icon-tree::before, .c-btn-main.is-lg.is-icon-step::before,
a.c-btn-main.is-lg.is-icon-book::before,
a.c-btn-main.is-lg.is-icon-video::before,
a.c-btn-main.is-lg.is-icon-study::before,
a.c-btn-main.is-lg.is-icon-review::before,
a.c-btn-main.is-lg.is-icon-repeat::before,
a.c-btn-main.is-lg.is-icon-tree::before,
a.c-btn-main.is-lg.is-icon-step::before {
  content: "";
  position: absolute;
  left: calc(50% - 1.2rem);
  top: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media print, screen and (max-width: 768px) {
  .c-btn-main,
a.c-btn-main {
    min-width: 24rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-btn : 汎用のボタン
   --------------------------------------------------------------------------------
    - ボタンは a か button 要素で利用可能です
    - 以下のバリエーションを用意しています
          1. デフォルト: a.c-btn または button.c-btn
          2. サイズ: is-xl, is-lg, （未指定）, is-sm, is-xs
          3. レベル: （未指定）, is-primary, is-primary-alt, .is-outline
          4. 状態: disabled 属性
          5. ローディング: .is-loading 付加でボタン文言をローディングアイコンに変更
             ※注： .is-loading の付加だけではボタンとしての機能は活きている状態なので
                    disalbed 属性も JavaScript 等で付加すること
----------------------------------------------------------------------------------- */
.c-btn,
a.c-btn {
  /* 基本スタイル */
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 18rem;
  height: 3.6rem;
  padding: 0 2rem;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #0A416A;
  outline: 0;
  border-radius: 0.5rem;
  border: 0.1rem solid #DAE0E6;
  background-color: #DAE0E6;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
  /* サイズ */
  /* レベル */
  /* 通常ボタンの線バージョン　※グレー背景の場所などで使用 */
  /* プライマリボタン */
  /* プライマリボタン（黄色バージョン）※青背景の場所などで使用 */
  /* disabled */
  /* ローディング */
  /* アイコン付きボタン - 共通スタイル */
  /* アイコン付きボタン - 左矢印 */
  /* アイコン付きボタン - 右矢印 */
  /* アイコン付きボタン - プラス */
  /* アイコン付きボタン - 提出、送る */
  /* アイコン付きボタン - ファイル */
  /* アイコンのみの場合はアイコン左右のマージンなし */
  /* アイコン付きボタン - 再生 */
}
.c-btn:visited,
a.c-btn:visited {
  text-decoration: none;
  color: #0A416A;
}
.c-btn:hover, .c-btn:active,
a.c-btn:hover,
a.c-btn:active {
  color: #007EB8;
  border-color: #019CE1;
  background-color: #F0F6FC;
}
.c-btn.is-xl,
a.c-btn.is-xl {
  min-width: 20rem;
  height: 6rem;
  padding: 0 3rem;
  font-size: 1.6rem;
}
.c-btn.is-lg,
a.c-btn.is-lg {
  min-width: 18rem;
  height: 4.8rem;
  padding: 0 3rem;
  font-size: 1.4rem;
}
.c-btn.is-sm,
a.c-btn.is-sm {
  min-width: 13rem;
  height: 2.4rem;
  padding: 0 2rem;
  font-size: 1.3rem;
}
.c-btn.is-xs,
a.c-btn.is-xs {
  min-width: 11rem;
  height: 2rem;
  padding: 0 1rem;
  font-size: 1.2rem;
}
.c-btn.is-outline,
a.c-btn.is-outline {
  background-color: #FFFFFF;
}
.c-btn.is-primary,
a.c-btn.is-primary {
  color: #FFFFFF;
  font-weight: bold;
  border: 0.1rem solid #007EB8;
  background-color: #007EB8;
}
.c-btn.is-primary:hover, .c-btn.is-primary:active,
a.c-btn.is-primary:hover,
a.c-btn.is-primary:active {
  color: #FFFFFF;
  border-color: #D8B844;
  background-color: #D8B844;
}
.c-btn.is-primary-alt,
a.c-btn.is-primary-alt {
  color: #000000;
  font-weight: bold;
  border: 0.1rem solid #D8B844;
  border-color: #FFFFFF;
  background-color: #D8B844;
}
.c-btn.is-primary-alt:hover, .c-btn.is-primary-alt:active,
a.c-btn.is-primary-alt:hover,
a.c-btn.is-primary-alt:active {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background-color: #019CE1;
}
.c-btn:disabled,
a.c-btn:disabled {
  font-weight: normal;
  color: #AEB7BF;
  cursor: default;
  border-color: #E9ECEF;
  background-color: #E9ECEF;
}
.c-btn:disabled i.fas,
a.c-btn:disabled i.fas {
  color: #AEB7BF;
}
.c-btn:disabled:hover, .c-btn:disabled:active,
a.c-btn:disabled:hover,
a.c-btn:disabled:active {
  -webkit-transform: none;
          transform: none;
}
.c-btn.is-loading,
a.c-btn.is-loading {
  font-weight: normal;
  color: #DAE0E6;
  cursor: default;
  border-color: #DAE0E6;
  background-color: #DAE0E6;
}
.c-btn.is-loading i.fas,
a.c-btn.is-loading i.fas {
  color: #DAE0E6;
}
.c-btn.is-loading::after,
a.c-btn.is-loading::after {
  content: "\f110";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  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;
  color: #D8B844;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  color: #AEB7BF;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.c-btn.is-loading:hover, .c-btn.is-loading:active,
a.c-btn.is-loading:hover,
a.c-btn.is-loading:active {
  -webkit-transform: none;
          transform: none;
}
.c-btn.is-left::before, .c-btn.is-left::after, .c-btn.is-right::before, .c-btn.is-right::after, .c-btn.is-plus::before, .c-btn.is-plus::after, .c-btn.is-send::before, .c-btn.is-send::after, .c-btn.is-file::before, .c-btn.is-file::after, .c-btn.is-play::before, .c-btn.is-play::after,
a.c-btn.is-left::before,
a.c-btn.is-left::after,
a.c-btn.is-right::before,
a.c-btn.is-right::after,
a.c-btn.is-plus::before,
a.c-btn.is-plus::after,
a.c-btn.is-send::before,
a.c-btn.is-send::after,
a.c-btn.is-file::before,
a.c-btn.is-file::after,
a.c-btn.is-play::before,
a.c-btn.is-play::after {
  margin-right: 1rem;
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: #0A416A;
}
.c-btn.is-left.is-primary::before, .c-btn.is-left.is-primary::after, .c-btn.is-right.is-primary::before, .c-btn.is-right.is-primary::after, .c-btn.is-plus.is-primary::before, .c-btn.is-plus.is-primary::after, .c-btn.is-send.is-primary::before, .c-btn.is-send.is-primary::after, .c-btn.is-file.is-primary::before, .c-btn.is-file.is-primary::after, .c-btn.is-play.is-primary::before, .c-btn.is-play.is-primary::after,
a.c-btn.is-left.is-primary::before,
a.c-btn.is-left.is-primary::after,
a.c-btn.is-right.is-primary::before,
a.c-btn.is-right.is-primary::after,
a.c-btn.is-plus.is-primary::before,
a.c-btn.is-plus.is-primary::after,
a.c-btn.is-send.is-primary::before,
a.c-btn.is-send.is-primary::after,
a.c-btn.is-file.is-primary::before,
a.c-btn.is-file.is-primary::after,
a.c-btn.is-play.is-primary::before,
a.c-btn.is-play.is-primary::after {
  color: #FFFFFF;
}
.c-btn.is-left.is-primary-alt::before, .c-btn.is-left.is-primary-alt::after, .c-btn.is-right.is-primary-alt::before, .c-btn.is-right.is-primary-alt::after, .c-btn.is-plus.is-primary-alt::before, .c-btn.is-plus.is-primary-alt::after, .c-btn.is-send.is-primary-alt::before, .c-btn.is-send.is-primary-alt::after, .c-btn.is-file.is-primary-alt::before, .c-btn.is-file.is-primary-alt::after, .c-btn.is-play.is-primary-alt::before, .c-btn.is-play.is-primary-alt::after,
a.c-btn.is-left.is-primary-alt::before,
a.c-btn.is-left.is-primary-alt::after,
a.c-btn.is-right.is-primary-alt::before,
a.c-btn.is-right.is-primary-alt::after,
a.c-btn.is-plus.is-primary-alt::before,
a.c-btn.is-plus.is-primary-alt::after,
a.c-btn.is-send.is-primary-alt::before,
a.c-btn.is-send.is-primary-alt::after,
a.c-btn.is-file.is-primary-alt::before,
a.c-btn.is-file.is-primary-alt::after,
a.c-btn.is-play.is-primary-alt::before,
a.c-btn.is-play.is-primary-alt::after {
  color: #000000;
}
.c-btn.is-left.is-sm::before, .c-btn.is-left.is-sm::after, .c-btn.is-right.is-sm::before, .c-btn.is-right.is-sm::after, .c-btn.is-plus.is-sm::before, .c-btn.is-plus.is-sm::after, .c-btn.is-send.is-sm::before, .c-btn.is-send.is-sm::after, .c-btn.is-file.is-sm::before, .c-btn.is-file.is-sm::after, .c-btn.is-play.is-sm::before, .c-btn.is-play.is-sm::after,
a.c-btn.is-left.is-sm::before,
a.c-btn.is-left.is-sm::after,
a.c-btn.is-right.is-sm::before,
a.c-btn.is-right.is-sm::after,
a.c-btn.is-plus.is-sm::before,
a.c-btn.is-plus.is-sm::after,
a.c-btn.is-send.is-sm::before,
a.c-btn.is-send.is-sm::after,
a.c-btn.is-file.is-sm::before,
a.c-btn.is-file.is-sm::after,
a.c-btn.is-play.is-sm::before,
a.c-btn.is-play.is-sm::after {
  font-size: 1.5rem;
}
.c-btn.is-left.is-xs::before, .c-btn.is-left.is-xs::after, .c-btn.is-right.is-xs::before, .c-btn.is-right.is-xs::after, .c-btn.is-plus.is-xs::before, .c-btn.is-plus.is-xs::after, .c-btn.is-send.is-xs::before, .c-btn.is-send.is-xs::after, .c-btn.is-file.is-xs::before, .c-btn.is-file.is-xs::after, .c-btn.is-play.is-xs::before, .c-btn.is-play.is-xs::after,
a.c-btn.is-left.is-xs::before,
a.c-btn.is-left.is-xs::after,
a.c-btn.is-right.is-xs::before,
a.c-btn.is-right.is-xs::after,
a.c-btn.is-plus.is-xs::before,
a.c-btn.is-plus.is-xs::after,
a.c-btn.is-send.is-xs::before,
a.c-btn.is-send.is-xs::after,
a.c-btn.is-file.is-xs::before,
a.c-btn.is-file.is-xs::after,
a.c-btn.is-play.is-xs::before,
a.c-btn.is-play.is-xs::after {
  font-size: 1.2rem;
}
.c-btn.is-left::before,
a.c-btn.is-left::before {
  content: "\f104";
}
.c-btn.is-right::after,
a.c-btn.is-right::after {
  content: "\f105";
  margin-left: 1rem;
  margin-right: 0;
}
.c-btn.is-plus::before,
a.c-btn.is-plus::before {
  content: "+";
  margin-bottom: 0.3rem;
}
.c-btn.is-send::before,
a.c-btn.is-send::before {
  content: "\f1d8";
}
.c-btn.is-file::before,
a.c-btn.is-file::before {
  content: "\f0c6";
  font-size: 1.6rem;
}
.c-btn:empty.is-left::before, .c-btn:empty.is-left::after, .c-btn:empty.is-right::before, .c-btn:empty.is-right::after, .c-btn:empty.is-plus::before, .c-btn:empty.is-plus::after, .c-btn:empty.is-send::before, .c-btn:empty.is-send::after, .c-btn:empty.is-file::before, .c-btn:empty.is-file::after,
a.c-btn:empty.is-left::before,
a.c-btn:empty.is-left::after,
a.c-btn:empty.is-right::before,
a.c-btn:empty.is-right::after,
a.c-btn:empty.is-plus::before,
a.c-btn:empty.is-plus::after,
a.c-btn:empty.is-send::before,
a.c-btn:empty.is-send::after,
a.c-btn:empty.is-file::before,
a.c-btn:empty.is-file::after {
  margin: 0;
}
.c-btn.is-play::before,
a.c-btn.is-play::before {
  content: "\f144";
}
@media print, screen and (max-width: 599px) {
  .c-btn,
a.c-btn {
    width: 100% !important;
    /* サイズ（スマホでは sm と xs でも通常サイズとする） */
  }
  .c-btn.is-sm, .c-btn.is-xs,
a.c-btn.is-sm,
a.c-btn.is-xs {
    height: 3.2rem;
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-btn-more : 汎用のボタン
   --------------------------------------------------------------------------------
    - ボタンは a か button 要素で利用可能です
----------------------------------------------------------------------------------- */
.c-btn-more,
a.c-btn-more {
  position: relative;
  display: inline-block;
  min-width: 30rem;
  padding: 0 3rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 6rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #565E66;
  outline: 0;
  border: 0;
  border-radius: 6rem;
  background-color: #E9ECEF;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.c-btn-more::after,
a.c-btn-more::after {
  content: "\f078";
  position: absolute;
  right: 3rem;
  top: 0;
  bottom: 0;
  height: 2rem;
  margin: auto;
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: #949DA6;
}
.c-btn-more:visited,
a.c-btn-more:visited {
  text-decoration: none;
  color: #565E66;
}
.c-btn-more:hover,
a.c-btn-more:hover {
  color: #007EB8;
  background-color: #F0F6FC;
}
.c-btn-more:hover::after,
a.c-btn-more:hover::after {
  color: #007EB8;
}
/* --------------------------------------------------------------------------------
   .c-form-text : テキストフィールド
   --------------------------------------------------------------------------------
    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に .is-error を付加）
        2. disabled 属性
----------------------------------------------------------------------------------- */
textarea.c-form-text:hover {
  outline: #CAD1D9 auto 0.1rem;
}
textarea.c-form-text:focus {
  outline: #019CE1 auto 2px;
}

input[type=text].c-form-text,
input[type=email].c-form-text,
input[type=password].c-form-text {
  max-width: 100%;
  height: 3.6rem;
  padding: 0 1rem;
  font-size: 1.4rem;
  line-height: 1;
  border: 1px solid #DAE0E6;
  border-radius: 0.5rem;
  /* エラー時のスタイル */
  /* disabled */
  /* サイズ */
}
input[type=text].c-form-text:hover,
input[type=email].c-form-text:hover,
input[type=password].c-form-text:hover {
  outline: #CAD1D9 auto 0.1rem;
}
input[type=text].c-form-text:focus,
input[type=email].c-form-text:focus,
input[type=password].c-form-text:focus {
  outline: #019CE1 auto 2px;
}
input[type=text].c-form-text.is-error, .is-error input[type=text].c-form-text,
input[type=email].c-form-text.is-error,
.is-error input[type=email].c-form-text,
input[type=password].c-form-text.is-error,
.is-error input[type=password].c-form-text {
  color: #C73D3D;
  outline: #D34C4C auto 2px;
}
input[type=text].c-form-text.is-error:disabled, .is-error input[type=text].c-form-text:disabled,
input[type=email].c-form-text.is-error:disabled,
.is-error input[type=email].c-form-text:disabled,
input[type=password].c-form-text.is-error:disabled,
.is-error input[type=password].c-form-text:disabled {
  color: #949DA6;
  outline: 0;
}
input[type=text].c-form-text:disabled,
input[type=email].c-form-text:disabled,
input[type=password].c-form-text:disabled {
  color: #949DA6;
  border-color: #DAE0E6;
  background-color: #E9ECEF;
}
input[type=text].c-form-text.is-lg,
input[type=email].c-form-text.is-lg,
input[type=password].c-form-text.is-lg {
  height: 4.8rem;
  font-size: 1.6rem;
}
input[type=text].c-form-text.is-sm,
input[type=email].c-form-text.is-sm,
input[type=password].c-form-text.is-sm {
  height: 2.4rem;
  padding: 0 0.4rem;
  font-size: 1.3rem;
  border-radius: 0.2rem;
}
@media print, screen and (max-width: 599px) {
  input[type=text].c-form-text,
input[type=email].c-form-text,
input[type=password].c-form-text {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------------
   .c-form-textarea : textarea 要素
   --------------------------------------------------------------------------------
    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に .is-error を付加）
        2. disabled 属性
----------------------------------------------------------------------------------- */
.c-form-textarea {
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1.4rem;
  border: 1px solid #DAE0E6;
  border-radius: 0.5rem;
  /* disabled */
  /* サイズ */
}
.c-form-textarea:hover {
  outline: #CAD1D9 auto 0.1rem;
}
.c-form-textarea:focus {
  outline: #019CE1 auto 2px;
}
.c-form-textarea.is-error, .is-error .c-form-textarea {
  color: #C73D3D;
  outline: #D34C4C auto 2px;
}
.c-form-textarea.is-error:disabled, .is-error .c-form-textarea:disabled {
  color: #949DA6;
  outline: 0;
}
.c-form-textarea:disabled {
  color: #949DA6;
  outline: none;
  border-color: #DAE0E6;
  background-color: #E9ECEF;
}
.c-form-textarea.is-lg {
  font-size: 1.6rem;
}
.c-form-textarea.is-sm {
  padding: 0 0.5rem;
  font-size: 1.3rem;
  border-radius: 0.2rem;
}
/* --------------------------------------------------------------------------------
   .c-form-select : select要素
   --------------------------------------------------------------------------------
    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に .is-error を付加）
        2. disabled 属性
----------------------------------------------------------------------------------- */
.c-form-select {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 100%;
  height: 3.6rem;
  padding: 0 3rem 0 1.5rem;
  font-size: 1.4rem;
  color: #0A416A;
  border: 0.1rem solid #DAE0E6;
  border-radius: 0.5rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 背景グラデ＆三角の下矢印 */
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiCgkgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA2ODAgMjIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2ODAgMjIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yMTEuMyw0NmgyNTcuM2MxNy44LDAsMjYuNywyMS41LDE0LjEsMzQuMUwzNTQuMSwyMDguOGMtNy44LDcuOC0yMC41LDcuOC0yOC4zLDBMMTk3LjIsODAuMUMxODQuNiw2Ny41LDE5My41LDQ2LDIxMS4zLDQ2Cgl6Ii8+Cjwvc3ZnPgo=") no-repeat center right, -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F2F3F4)) repeat-x center;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiCgkgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA2ODAgMjIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2ODAgMjIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yMTEuMyw0NmgyNTcuM2MxNy44LDAsMjYuNywyMS41LDE0LjEsMzQuMUwzNTQuMSwyMDguOGMtNy44LDcuOC0yMC41LDcuOC0yOC4zLDBMMTk3LjIsODAuMUMxODQuNiw2Ny41LDE5My41LDQ2LDIxMS4zLDQ2Cgl6Ii8+Cjwvc3ZnPgo=") no-repeat center right, linear-gradient(to bottom, #FFFFFF, #F2F3F4) repeat-x center;
  background-size: 2.4rem, 100%;
  /* エラー時のスタイル */
  /* disabled */
  /* サイズ */
}
.c-form-select:hover {
  outline: #CAD1D9 auto 0.1rem;
}
.c-form-select:focus {
  outline: #019CE1 auto 0.2rem;
}
@media all and (-ms-high-contrast: none) {
  .c-form-select {
    /* IEのみ独自スタイル */
  }
  .c-form-select::-ms-expand {
    display: none;
  }
}
.c-form-select.is-error, .is-error .c-form-select {
  color: #C73D3D;
  outline: #D34C4C auto 0.2rem;
}
.c-form-select.is-error:disabled, .is-error .c-form-select:disabled {
  color: #949DA6;
  outline: 0;
}
.c-form-select:disabled {
  color: #949DA6;
  cursor: default;
  outline: 0;
  border-color: #DAE0E6;
  /* 少し薄い三角 */
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjgwIDIyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjgwIDIyMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtvcGFjaXR5OjAuMzt9Cjwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTIxMS4zLDQ2aDI1Ny4zYzE3LjgsMCwyNi43LDIxLjUsMTQuMSwzNC4xTDM1NC4xLDIwOC44Yy03LjgsNy44LTIwLjUsNy44LTI4LjMsMEwxOTcuMiw4MC4xQzE4NC42LDY3LjUsMTkzLjUsNDYsMjExLjMsNDZ6Ii8+PC9zdmc+"), -webkit-gradient(linear, left top, left bottom, from(#E9ECEF), to(#E9ECEF));
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjgwIDIyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjgwIDIyMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtvcGFjaXR5OjAuMzt9Cjwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTIxMS4zLDQ2aDI1Ny4zYzE3LjgsMCwyNi43LDIxLjUsMTQuMSwzNC4xTDM1NC4xLDIwOC44Yy03LjgsNy44LTIwLjUsNy44LTI4LjMsMEwxOTcuMiw4MC4xQzE4NC42LDY3LjUsMTkzLjUsNDYsMjExLjMsNDZ6Ii8+PC9zdmc+"), linear-gradient(to bottom, #E9ECEF, #E9ECEF);
}
.c-form-select.is-lg {
  height: 4.8rem;
  background-size: 2.8rem, 100%;
}
.c-form-select.is-sm {
  height: 2.4rem;
  padding: 0 2rem 0 1rem;
  font-size: 1.3rem;
  border-radius: 0.3rem;
  background-size: 2rem, 100%;
}
@media print, screen and (max-width: 599px) {
  .c-form-select {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------------
   .c-form-radio : ラジオボタン
   --------------------------------------------------------------------------------
    - 次のように記述することを想定（span 必須。ラベルテキストがない場合は空の span）
        <label class="c-form-radio">
          <input type="radio">
          <span>ラベル</span>
        </label>

    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に .is-error を付加）
        2. disabled 属性
----------------------------------------------------------------------------------- */
.c-form-radio {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.6rem 0;
  /* エラー時のスタイル */
  /* サイズ */
  /* ラベルテキストがないとき */
}
.c-form-radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.c-form-radio input[type=radio] + span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 1em;
  padding-right: 0.1rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #0A416A;
}
.c-form-radio input[type=radio] + span::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.6rem;
  line-height: 0;
  border: 0.1rem solid #AEB7BF;
  border-radius: 100%;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0.3rem rgba(1, 156, 225, .25) inset;
          box-shadow: 0 0 0.3rem rgba(1, 156, 225, .25) inset;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.c-form-radio input[type=radio] + span:hover::before {
  border: 0.1rem solid #019CE1;
  background-color: rgba(1, 156, 225, .05);
}
.c-form-radio input[type=radio]:checked + span::before {
  background-color: #019CE1;
  -webkit-box-shadow: inset 0 0 0 0.4rem #FFFFFF;
          box-shadow: inset 0 0 0 0.4rem #FFFFFF;
}
.c-form-radio input[type=radio]:disabled + span {
  cursor: default;
  color: #949DA6;
}
.c-form-radio input[type=radio]:disabled + span::before {
  border-color: #DAE0E6;
  background: #E9ECEF;
}
.c-form-radio.is-error input[type=radio] + span, .is-error .c-form-radio input[type=radio] + span {
  color: #C73D3D;
}
.c-form-radio.is-error input[type=radio] + span::before, .is-error .c-form-radio input[type=radio] + span::before {
  border-color: #D34C4C;
  background-color: #FAF2F2;
}
.c-form-radio.is-error input[type=radio]:checked + span::before, .is-error .c-form-radio input[type=radio]:checked + span::before {
  border-color: #AEB7BF;
  background-color: #019CE1;
}
.c-form-radio.is-error input[type=radio]:disabled + span, .is-error .c-form-radio input[type=radio]:disabled + span {
  cursor: default;
  color: #949DA6;
}
.c-form-radio.is-error input[type=radio]:disabled + span::before, .is-error .c-form-radio input[type=radio]:disabled + span::before {
  border-color: #DAE0E6;
  background: #E9ECEF;
}
.c-form-radio.is-error input[type=radio] + span:empty, .is-error .c-form-radio input[type=radio] + span:empty {
  padding-right: 0;
}
.c-form-radio.is-error input[type=radio] + span:empty::before, .is-error .c-form-radio input[type=radio] + span:empty::before {
  margin-right: 0;
}
.c-form-radio.is-lg {
  padding: 0.8rem 0;
}
.c-form-radio.is-lg input[type=radio] + span {
  margin-right: 1em;
}
.c-form-radio.is-lg input[type=radio] + span::before {
  width: 3.2rem;
  height: 3.2rem;
  margin-right: 0.7rem;
}
.c-form-radio.is-sm {
  padding: 0.2rem 0;
}
.c-form-radio.is-sm input[type=radio] + span {
  margin-right: 0;
  font-size: 1.3rem;
}
.c-form-radio.is-sm input[type=radio] + span::before {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.4rem;
}
.c-form-radio.is-sm input[type=radio]:checked + span::before {
  -webkit-box-shadow: inset 0 0 0 0.2rem #FFFFFF;
          box-shadow: inset 0 0 0 0.2rem #FFFFFF;
}
.c-form-radio input[type=radio] + span:empty {
  margin-right: 0;
  padding-right: 0;
}
.c-form-radio input[type=radio] + span:empty::before {
  margin-right: 0;
}
@media print, screen and (max-width: 599px) {
  .c-form-radio {
    /* スマホで hover 状態が残っても大丈夫なようにする */
  }
  .c-form-radio input[type=checkbox] + span:hover::before {
    border-color: #AEB7BF;
    background-color: #FFFFFF;
  }
}

/* --------------------------------------------------------------------------------
   .c-form-checkbox : チェックボックス
   --------------------------------------------------------------------------------
    - 次のように記述することを想定（span 必須。ラベルテキストがない場合は空の span）
        <label class="c-form-checkbox">
          <input type="checkbox">
          <span>ラベル</span>
        </label>

    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に .is-error を付加）
        2. disabled 属性
----------------------------------------------------------------------------------- */
.c-form-checkbox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.6rem 0;
  /* エラー時のスタイル */
  /* サイズ */
  /* ラベルテキストがないとき */
}
.c-form-checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.c-form-checkbox input[type=checkbox] + span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 1em;
  padding-right: 1rem;
  font-size: 1.4rem;
  line-height: 1.5;
}
.c-form-checkbox input[type=checkbox] + span::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.6rem;
  line-height: 0;
  border: 0.1rem solid #AEB7BF;
  border-radius: 0.4rem;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0.3rem rgba(1, 156, 225, .25) inset;
          box-shadow: 0 0 0.3rem rgba(1, 156, 225, .25) inset;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
@media all and (-ms-high-contrast: none) {
  .c-form-checkbox input[type=checkbox] + span::before {
    border-radius: 0;
  }
}
.c-form-checkbox input[type=checkbox] + span:hover::before {
  border: 0.1rem solid #019CE1;
  background-color: #e2f6ff;
}
.c-form-checkbox input[type=checkbox]:checked + span::before {
  background-color: #019CE1;
  -webkit-box-shadow: inset 0 0 0 0.4rem #FFFFFF;
          box-shadow: inset 0 0 0 0.4rem #FFFFFF;
}
.c-form-checkbox input[type=checkbox]:disabled + span {
  cursor: default;
  color: #949DA6;
}
.c-form-checkbox input[type=checkbox]:disabled + span::before {
  border-color: #DAE0E6;
  background: #E9ECEF;
}
.c-form-checkbox input[type=checkbox] + span:empty {
  padding-right: 0;
}
.c-form-checkbox input[type=checkbox] + span:empty::before {
  margin-right: 0;
}
.c-form-checkbox.is-error input[type=checkbox] + span, .is-error .c-form-checkbox input[type=checkbox] + span {
  color: #C73D3D;
}
.c-form-checkbox.is-error input[type=checkbox] + span::before, .is-error .c-form-checkbox input[type=checkbox] + span::before {
  border-color: #D34C4C;
  background-color: #FAF2F2;
}
.c-form-checkbox.is-error input[type=checkbox]:checked + span::before, .is-error .c-form-checkbox input[type=checkbox]:checked + span::before {
  border-color: #AEB7BF;
  background-color: #019CE1;
}
.c-form-checkbox.is-error input[type=checkbox]:disabled + span, .is-error .c-form-checkbox input[type=checkbox]:disabled + span {
  cursor: default;
  color: #949DA6;
}
.c-form-checkbox.is-error input[type=checkbox]:disabled + span::before, .is-error .c-form-checkbox input[type=checkbox]:disabled + span::before {
  border-color: #DAE0E6;
  background: #E9ECEF;
}
.c-form-checkbox.is-lg {
  padding: 0.8rem 0;
}
.c-form-checkbox.is-lg input[type=checkbox] + span {
  margin-right: 1em;
}
.c-form-checkbox.is-lg input[type=checkbox] + span::before {
  width: 3.2rem;
  height: 3.2rem;
  margin-right: 0.8rem;
  border-radius: 0.6rem;
}
.c-form-checkbox.is-sm {
  padding: 0.2rem 0;
}
.c-form-checkbox.is-sm input[type=checkbox] + span {
  margin-right: 0;
  font-size: 1.3rem;
}
.c-form-checkbox.is-sm input[type=checkbox] + span::before {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.4rem;
  border-radius: 0.2rem;
}
.c-form-checkbox.is-sm input[type=checkbox]:checked + span::before {
  -webkit-box-shadow: inset 0 0 0 0.2rem #FFFFFF;
          box-shadow: inset 0 0 0 0.2rem #FFFFFF;
}
.c-form-checkbox input[type=checkbox] + span:empty {
  margin-right: 0;
  padding-right: 0;
}
.c-form-checkbox input[type=checkbox] + span:empty::before {
  margin-right: 0;
}
@media print, screen and (max-width: 599px) {
  .c-form-checkbox {
    /* スマホで hover 状態が残っても大丈夫なように hover に通常スタイルを当てる */
  }
  .c-form-checkbox input[type=checkbox] {
    /* :checked のときはちゃんとチェックがつくようにする */
    /* :disabled のときはちゃんと disabled のままになるようにする */
  }
  .c-form-checkbox input[type=checkbox] + span:hover::before {
    border-color: #AEB7BF;
    background-color: #FFFFFF;
  }
  .c-form-checkbox input[type=checkbox]:checked + span::before, .c-form-checkbox input[type=checkbox]:checked + span:hover::before {
    background-color: #019CE1;
    -webkit-box-shadow: inset 0 0 0 0.4rem #FFFFFF;
            box-shadow: inset 0 0 0 0.4rem #FFFFFF;
  }
  .c-form-checkbox input[type=checkbox]:disabled + span::before, .c-form-checkbox input[type=checkbox]:disabled + span:hover::before {
    border-color: #DAE0E6;
    background: #E9ECEF;
  }
}

/* --------------------------------------------------------------------------------
   .c-form-file : フォーム - ファイル選択
   --------------------------------------------------------------------------------
    - 次のように記述することを想定
        <label class="c-form-file">
          <input type="file" name="" id="">
          <span class="c-form-file__btn">ファイルを選択</span>
        </label>

    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に .is-error を付加）
        2. サイズ → .is-lg, .is-sm
----------------------------------------------------------------------------------- */
.c-form-file {
  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: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* ファイル選択の次にある容量制限のテキスト */
  /* NOTE: .c-form-file の次に必ず容量制限があるとは限らないので注意が必要 */
}
.c-form-file input[type=file] {
  display: none;
}
.c-form-file__value {
  display: inline-block;
  max-width: 100%;
  margin: 1rem 0 0;
  font-size: 1.3rem;
  color: #0A416A;
}
.c-form-file + span {
  display: block;
}
/* --------------------------------------------------------------------------------
   .c-form-file-drop : フォーム - ファイルドロップエリア
----------------------------------------------------------------------------------- */
.c-form-file-drop {
  padding: 3rem;
  line-height: 2.5;
  text-align: center;
  color: #0A416A;
  border: 0.2em dashed #DAE0E6;
  border-radius: 1rem;
  background-color: #F2F3F4;
  /* ドラッグオーバー時 */
}
.c-form-file-drop span {
  font-weight: bold;
  line-height: 1.5;
}
.c-form-file-drop small {
  display: block;
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.5;
}
.c-form-file-drop.is-white {
  background-color: #FFFFFF;
}
.c-form-file-drop .c-form-file {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c-form-file-drop .c-form-file__value {
  font-weight: normal;
}
.c-form-file-drop.is-over {
  border-color: #019CE1;
  background-color: #F0F6FC;
}
@media print, screen and (max-width: 599px) {
  .c-form-file-drop span:first-child {
    display: none;
  }
}

/* --------------------------------------------------------------------------------
   .c-tag : タグ
   --------------------------------------------------------------------------------
    - 次のように記述することを想定（span 必須）
        <label class="c-tag">
          <input type="checkbox">
          <span>ラベル</span>
        </label>

    - 表示のみのときは is-readonly 付与（テーマ詳細画面など）

    （補足）
    HTMLのチェックボックスは readonly 属性がないので上記対応とする
----------------------------------------------------------------------------------- */
.c-tag {
  /* 表示のみのタグ */
  /* サイズ */
}
.c-tag input[type=checkbox],
.c-tag input[type=radio] {
  position: absolute;
  opacity: 0;
}
.c-tag input[type=checkbox] + span,
.c-tag input[type=radio] + span {
  display: inline-block;
  margin: 0.3em 0;
  padding: 0 1.2em;
  font-size: 1.4rem;
  line-height: 3rem;
  color: #0A416A;
  border-radius: 3rem;
  background-color: #E9ECEF;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.c-tag input[type=checkbox] + span:hover,
.c-tag input[type=radio] + span:hover {
  color: #007EB8;
  background-color: #F0F6FC;
}
.c-tag input[type=checkbox]:checked + span,
.c-tag input[type=radio]:checked + span {
  color: #FFFFFF;
  background-color: #019CE1;
}
.c-tag.is-readonly input[type=checkbox] + span {
  cursor: default;
}
.c-tag.is-readonly input[type=checkbox] + span:hover {
  color: #0A416A;
  background-color: #E9ECEF;
}
.c-tag.is-readonly input[type=checkbox]:checked + span {
  color: #0A416A;
  background-color: #E9ECEF;
}
.c-tag.is-sm input[type=checkbox] + span {
  margin: 0;
  padding: 0 1em;
  font-size: 1.2rem;
  line-height: 2.4rem;
}
/* --------------------------------------------------------------------------------
   .c-attachment : 添付ファイル
----------------------------------------------------------------------------------- */
.c-attachment {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 14rem;
  height: 100%;
  min-height: 14rem;
  text-decoration: none;
  color: #343A40;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.c-attachment:hover {
  -webkit-box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, .15);
          box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, .15);
}
.c-attachment p {
  margin: 0;
}
.c-attachment__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;
  height: 6rem;
  font-size: 3.2rem;
  color: #949DA6;
  border: 0.1rem solid #DAE0E6;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: #FFFFFF;
}
.c-attachment__text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #343A40;
  border: 0.1rem solid #DAE0E6;
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: #F2F3F4;
}
.c-attachment__filename {
  margin: 0;
  width: 100%;
}
.c-attachment__filesize {
  margin: 0;
  margin-top: auto !important;
  padding-top: 1rem;
  color: #7A838C;
}
.c-attachment__delete {
  position: absolute;
  right: -0.8rem;
  top: -0.8rem;
  padding: 0;
  font-size: 2.4rem;
  line-height: 0;
  color: #D34C4C;
  outline: 0;
  border: 0.3rem solid #FFFFFF;
  border-radius: 100%;
}
.c-attachment__delete:hover {
  color: #C73D3D;
}
@media print, screen and (max-width: 599px) {
  .c-attachment {
    width: 12rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-ttl-1 : 見出し（レベル1）
----------------------------------------------------------------------------------- */
.c-ttl-1 {
  margin-top: 5rem;
  margin-bottom: 2rem;
  padding-left: 4rem;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.15em;
  color: #019CE1;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 2.8rem;
}
.c-ttl-1:first-child {
  margin-top: 0;
}
.c-ttl-1:last-child {
  margin-bottom: 0;
}
.c-ttl-1 small {
  font-weight: normal;
}
.c-ttl-1.is-step {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_title_step.svg);
}
.c-ttl-1.is-theme {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_title_theme.svg);
}
.c-ttl-1.is-info {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_title_info.svg);
}
.c-ttl-1.is-forum {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_title_forum.svg);
}
.c-ttl-1.is-flow {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_study_blue.svg);
}
.c-ttl-1.is-rocket {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_rocket_blue.svg);
}
.c-ttl-1.is-mail {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_mail_blue.svg);
}
.c-ttl-1.is-enquete {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_enquete_blue.svg);
}
.c-ttl-1.is-book {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_book_blue.svg);
}
.c-ttl-1.is-paragraph {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_stairs_blue.svg);
}
.c-ttl-1.is-bar_chart {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_bar_chart_blue.svg);
}
.c-ttl-1.is-question {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_question_blue.svg);
}
.c-ttl-1.is-newspaper {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_newspaper_blue.svg);
}
.c-ttl-1.is-calendar {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_calendar_blue.svg);
}
.c-ttl-1.is-step {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_step_blue.svg);
}
.c-ttl-1.is-comment {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_comment_blue.svg);
}
.c-ttl-1.is-forum {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_forum_blue.svg);
}
.c-ttl-1.is-badge {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_badge_blue.svg);
}
.c-ttl-1.is-question {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_question_blue.svg);
}
.c-ttl-1.is-edit {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_edit_note_blue_.svg);
}
.c-ttl-1.is-review {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_review_blue.svg);
}
.c-ttl-1.is-info_book {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_info_book_blue.svg);
}
.c-ttl-1.is-faq {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_faq_blue.svg);
}
.c-ttl-1.is-wifi {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_wifi_blue.svg);
}
.c-ttl-1.is-bonus {
  background-image: url(/mbuffetDemo/jsp/BFuser/common/images/icon_bonus_blue.svg);
}
@media print, screen and (max-width: 1280px) {
  .c-ttl-1 {
    font-size: 2.4rem;
    letter-spacing: 0;
  }
}

/* --------------------------------------------------------------------------------
   .c-ttl-2 : 見出し（レベル2）
----------------------------------------------------------------------------------- */
.c-ttl-2 {
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding-left: 1.5rem;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
  color: #019CE1;
  border-left: 0.3rem solid #019CE1;
}
.c-ttl-2:first-child {
  margin-top: 0;
}
.c-ttl-2:last-child {
  margin-bottom: 0;
}
.c-ttl-2 small {
  font-weight: normal;
}
/* --------------------------------------------------------------------------------
   .c-ttl-3 : 見出し（レベル3）
----------------------------------------------------------------------------------- */
.c-ttl-3 {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  padding: 0.2rem 1rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  color: #FFFFFF;
  border-radius: 0.3rem;
  background-color: #007EB8;
}
.c-ttl-3:first-child {
  margin-top: 0;
}
.c-ttl-3:last-child {
  margin-bottom: 0;
}
@media print, screen and (max-width: 1280px) {
  .c-ttl-3 {
    padding: 0.6rem 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-ttl-4 : 見出し（レベル4）
----------------------------------------------------------------------------------- */
.c-ttl-4 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  color: #343A40;
}
.c-ttl-4:first-child {
  margin-top: 0;
}
.c-ttl-4:last-child {
  margin-bottom: 0;
}
/* --------------------------------------------------------------------------------
   .c-note : 備考・補足テキスト
----------------------------------------------------------------------------------- */
.c-note {
  font-size: 1.4rem;
}
.c-note:first-child {
  margin-top: 0;
}
.c-note:last-child {
  margin-bottom: 0;
}
.c-note.is-gray {
  color: #7A838C;
}
/* --------------------------------------------------------------------------------
   .c-link : テキストリンク
   --------------------------------------------------------------------------------
    .c-link.is-arrow:   （前）矢印付きリンク
    .c-link.is-close:   （前）閉じるアイコン付きリンク
    .c-link.is-external:（後）外部サイトリンク
    .c-link.is-excel:   （後）アイコン付きリンク（Excel）
    .c-link.is-pdf:     （後）アイコン付きリンク（pdf）
----------------------------------------------------------------------------------- */
.c-link,
a.c-link {
  /* ボタン要素を使用した場合のスタイルリセット */
  padding: 0;
  outline: 0;
  border: 0;
  background-color: transparent;
  /* 基本スタイル */
  /* （前）矢印付きリンク */
  /* （前）閉じる */
  /* （後）外部リンク */
  /* （後）PDF */
  /* （後）エクセル */
}
.c-link::before, .c-link::after,
a.c-link::before,
a.c-link::after {
  display: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  color: #007EB8;
}
.c-link::before,
a.c-link::before {
  margin-right: 0.3em;
  text-decoration: none;
}
.c-link::after,
a.c-link::after {
  margin-left: 0.3em;
  text-decoration: none;
}
.c-link.is-arrow::before,
a.c-link.is-arrow::before {
  content: "\f0da";
  display: inline-block;
  text-decoration: none;
}
.c-link.is-close::before,
a.c-link.is-close::before {
  content: "\f057";
  display: inline-block;
}
.c-link.is-external::after,
a.c-link.is-external::after {
  content: "\f35d";
  display: inline-block;
}
.c-link.is-pdf::after,
a.c-link.is-pdf::after {
  content: "\f1c1";
  display: inline-block;
  color: #D34C4C;
}
.c-link.is-excel::after,
a.c-link.is-excel::after {
  content: "\f1c3";
  display: inline-block;
  color: #165F27;
}

/* --------------------------------------------------------------------------------
   .c-box : ボックス
   --------------------------------------------------------------------------------
    - 背景白、罫線グレーのボックス
    - パディングはデフォルトで 2rem
    - is-pad-0, is-pad-10, ... の形式で 1rem 刻みで最大 5rem まで設定可能
    - .is-gray 付与で薄いグレーのボックス
    - 最初の要素に .c-box__title を付与するとタイトルバーになる
    - フッタにボタンを並べるには .c-box__btns 要素を最後に配置する
    - スマホではパディングの値は最大1.5rem
----------------------------------------------------------------------------------- */
.c-box {
  margin: 2rem 0;
  padding: 2rem;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  background-color: #FFFFFF;
  /* タイトルバー */
  /* フッタボタン */
}
.c-box.is-gray {
  background-color: #F2F3F4;
}
.c-box.is-pad-0 {
  margin: 1rem 0;
  padding: 0;
}
.c-box.is-pad-10 {
  margin: 1rem 0;
  padding: 1rem;
}
.c-box.is-pad-20 {
  margin: 2rem 0;
  padding: 2rem;
}
.c-box.is-pad-30 {
  margin: 2rem 0;
  padding: 3rem;
}
.c-box.is-pad-40 {
  margin: 2rem 0;
  padding: 4rem;
}
.c-box.is-pad-50 {
  margin: 2rem 0;
  padding: 5rem;
}
.c-box:first-child {
  margin-top: 0;
}
.c-box:last-child {
  margin-bottom: 0;
}
.c-box__title {
  margin: -2.1rem -2.1rem 2rem;
  /* .1rem はボーダーも隠すため */
  padding: 1rem 1.5rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #FFFFFF;
  background-color: #007EB8;
  border-radius: 0.5rem 0.5rem 0 0;
}
.c-box.is-pad-0 .c-box__title {
  margin: -0.1rem -0.1rem 0;
}
.c-box.is-pad-10 .c-box__title {
  margin: -1.1rem -1.1rem 1rem;
}
.c-box.is-pad-20 .c-box__title {
  margin: -2.1rem -2.1rem 2rem;
}
.c-box.is-pad-30 .c-box__title {
  margin: -3.1rem -3.1rem 3rem;
}
.c-box.is-pad-40 .c-box__title {
  margin: -4.1rem -4.1rem 4rem;
}
.c-box.is-pad-50 .c-box__title {
  margin: -5.1rem -5.1rem 5rem;
}
.c-box__footer {
  margin: 2rem -2rem -2rem !important;
  padding: 2rem;
  background-color: #F2F3F4;
  border-radius: 0 0 0.5rem 0.5rem;
}
.c-box.is-pad-0 .c-box__footer {
  margin: 0 !important;
}
.c-box.is-pad-10 .c-box__footer {
  margin: 1rem -1rem -1rem !important;
}
.c-box.is-pad-20 .c-box__footer {
  margin: 2rem -2rem -2rem !important;
}
.c-box.is-pad-30 .c-box__footer {
  margin: 3rem -3rem -3rem !important;
}
.c-box.is-pad-40 .c-box__footer {
  margin: 4rem -4rem -4rem !important;
}
.c-box.is-pad-50 .c-box__footer {
  margin: 5rem -5rem -5rem !important;
}
@media print, screen and (max-width: 599px) {
  .c-box {
    padding: 1.5rem;
    /* タイトルバー */
    /* フッタボタン */
  }
  .c-box.is-pad-20, .c-box.is-pad-30, .c-box.is-pad-40, .c-box.is-pad-50 {
    padding: 1.5rem;
  }
  .c-box__title {
    margin: -1.6rem -1.6rem 1.5rem;
    /* .1rem はボーダーも隠すため */
  }
  .c-box.is-pad-0 .c-box__title {
    margin: -0.1rem -0.1rem 0;
  }
  .c-box.is-pad-20 .c-box__title, .c-box.is-pad-30 .c-box__title, .c-box.is-pad-40 .c-box__title, .c-box.is-pad-50 .c-box__title {
    margin: -1.6rem -1.6rem 1.5rem;
  }
  .c-box__footer {
    margin: 1.5rem -1.5rem -1.5rem !important;
    padding: 1rem;
  }
  .c-box.is-pad-20 .c-box__footer, .c-box.is-pad-30 .c-box__footer, .c-box.is-pad-40 .c-box__footer, .c-box.is-pad-50 .c-box__footer {
    margin: 1.5rem -1.5rem -1.5rem !important;
  }
}

/* --------------------------------------------------------------------------------
   .c-chart : チャート（画像）
----------------------------------------------------------------------------------- */
.c-chart {
  margin: 5rem 0;
  text-align: center;
}
.c-chart:first-child {
  margin-top: 0;
}
.c-chart:last-child {
  margin-bottom: 0;
}
.c-chart figcaption {
  margin: 0.5em 0;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
}
/* --------------------------------------------------------------------------------
   .c-tbl : テーブル
----------------------------------------------------------------------------------- */
.c-tbl {
  margin: 2rem 0;
  /* 1行おきに色をつける */
  /* 1行おきに色をつけたくない場合 */
  /* ヘッダなしで左に項目ラベル（th）があるタイプのテーブル */
}
.c-tbl:first-child {
  margin-top: 0;
}
.c-tbl:last-child {
  margin-bottom: 0;
}
.c-tbl th,
.c-tbl td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.5;
  border-left: 0;
  border-right: 0;
  background-color: #FFFFFF;
}
.c-tbl thead th {
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  color: #565E66;
  background-color: #DAE0E6;
  border-right: 0.1rem solid #FFFFFF;
}
.c-tbl tbody tr:nth-child(2n) th,
.c-tbl tbody tr:nth-child(2n) td {
  background-color: #F2F3F4;
}
.c-tbl.is-flat tbody tr:nth-child(2n) th,
.c-tbl.is-flat tbody tr:nth-child(2n) td {
  background-color: #FFFFFF;
}
.c-tbl.is-no-head tbody th {
  background-color: #F2F3F4;
}
.c-tbl.is-no-head tbody tr:nth-child(2n) td {
  background-color: #FFFFFF;
}
/* datatablesのソートボタンのカスタマイズ */
table.dataTable thead .sorting {
  padding-right: 2.5rem;
  background-image: url("/mbuffetDemo/jsp/BFuser/common/images/datatables-sort-both.svg");
  background-size: 1.8rem;
}

table.dataTable thead .sorting_asc {
  padding-right: 2.5rem;
  background-image: url("/mbuffetDemo/jsp/BFuser/common/images/datatables-sort-asc.svg") !important;
  background-size: 1.8rem;
}

table.dataTable thead .sorting_desc {
  padding-right: 2.5rem;
  background-image: url("/mbuffetDemo/jsp/BFuser/common/images/datatables-sort-desc.svg") !important;
  background-size: 1.8rem;
}

table.dataTable thead .sorting_asc_disabled {
  padding-right: 2.5rem;
  background-image: url("/mbuffetDemo/jsp/BFuser/common/images/datatables-sort-asc-disabled.svg");
  background-size: 1.8rem;
}

table.dataTable thead .sorting_desc_disabled {
  padding-right: 2.5rem;
  background-image: url("/mbuffetDemo/jsp/BFuser/common/images/datatables-sort-desc-disabled.svg");
  background-size: 1.8rem;
}

/* --------------------------------------------------------------------------------
   .c-pager : ページャー
----------------------------------------------------------------------------------- */
.c-pager {
  margin: 2rem 0;
  /* 基本のボタンスタイル */
  /* 前後ボタン */
  /* カレントボタン */
  /* 非活性ボタン */
  /* 下のページ番号 */
}
.c-pager:first-child {
  margin-top: 0;
}
.c-pager:last-child {
  margin-bottom: 0;
}
.c-pager ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}
.c-pager ul li:not(:last-child) {
  margin-right: 1rem;
}
.c-pager a,
.c-pager span {
  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: 4.8rem;
  height: 4.8rem;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  color: #0A416A;
  border: 0.1rem solid #DAE0E6;
  border-radius: 0.5rem;
  background-color: #FFFFFF;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.c-pager a:visited {
  text-decoration: none;
  color: #0A416A;
}
.c-pager a:hover {
  color: #007EB8;
  text-decoration: none;
  border-color: #019CE1;
  background-color: #F0F6FC;
}
.c-pager__top a, .c-pager__end a, .c-pager__prev a, .c-pager__next a {
  background-color: #E9ECEF;
}
.c-pager__page.is-current a {
  color: #FFFFFF;
  border-color: #019CE1;
  background-color: #019CE1;
}
.c-pager .is-disabled a[disabled] {
  color: #AEB7BF;
  border-color: #DAE0E6;
  background-color: #DAE0E6;
}
.c-pager__counter {
  text-align: center;
  color: #7A838C;
}
@media print, screen and (max-width: 599px) {
  .c-pager {
    /* 基本のボタンスタイル */
    /* 前後ボタン */
  }
  .c-pager ul li {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: -0.1rem;
  }
  .c-pager ul li:not(:last-child) {
    margin-right: 0;
  }
  .c-pager a,
.c-pager span {
    width: 100%;
    height: 3.2rem;
    font-size: 1.2rem;
    border-radius: 0;
  }
  .c-pager a:hover,
.c-pager span:hover {
    border-color: #DAE0E6;
  }
  .c-pager__top a {
    border-radius: 0.5rem 0 0 0.5rem;
  }
  .c-pager__end a {
    border-radius: 0 0.5rem 0.5rem 0;
  }
}

/* --------------------------------------------------------------------------------
   .c-msgbox : メッセージボックス
   --------------------------------------------------------------------------------
    - 以下のバリエーションを用意しています
        0. プレーン      : モディファイアなし
        1. 通常メッセージ: .is-info
        2. 成功メッセージ: .is-success
        3. 注意メッセージ: .is-warning
        4. 警告メッセージ: .is-danger
        5. 備考メッセージ: .is-note (通常メッセージより弱い、補足的情報)

    - モディファイア .is-pad-10 でパディングを 1rem に、.is-pad-20 でパディングを 2rem に調整できます（デフォルトは 30）。
----------------------------------------------------------------------------------- */
.c-msgbox {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border: 1px solid #DAE0E6;
  border-radius: 1rem;
  background-color: #FFFFFF;
}
.c-msgbox a {
  font-weight: bold;
}
.c-msgbox.is-pad-10 {
  margin: 1rem 0;
  padding: 1rem;
}
.c-msgbox.is-pad-20 {
  margin: 2rem 0;
  padding: 2rem;
}
.c-msgbox.is-info {
  color: #007EB8;
  border-color: #79A2C9;
  background-color: #F0F6FC;
}
.c-msgbox.is-info a {
  color: #007EB8;
}
.c-msgbox.is-success {
  color: #165F27;
  border-color: #7AB170;
  background-color: #F4FCF2;
}
.c-msgbox.is-success a {
  color: #165F27;
}
.c-msgbox.is-warning {
  color: #714D09;
  border-color: #B1A167;
  background-color: #FFFAEA;
}
.c-msgbox.is-warning a {
  color: #714D09;
}
.c-msgbox.is-danger {
  color: #C73D3D;
  border-color: #C96161;
  background-color: #FAF2F2;
}
.c-msgbox.is-danger a {
  color: #C73D3D;
}
.c-msgbox.is-note {
  color: #343A40;
  border-color: #DAE0E6;
  background-color: #F2F3F4;
}
.c-msgbox.is-note a {
  color: #343A40;
}
.c-msgbox:first-child {
  margin-top: 0;
}
.c-msgbox:last-child {
  margin-bottom: 0;
}
/* --------------------------------------------------------------------------------
   .c-theme-label : 学習テーマラベル
----------------------------------------------------------------------------------- */
.c-theme-label {
  display: inline-block;
  min-width: 5rem;
  padding: 0 0.4rem;
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: center;
  color: #FFFFFF;
  white-space: nowrap;
  border-radius: 0.3rem;
  background-color: #949DA6;
}
.c-theme-label.is-hissu {
  background-color: #C96161;
}
.c-theme-label.is-suishou {
  background-color: #79A2C9;
}
.c-theme-label.is-shindan {
  background-color: #B1A167;
}
/* --------------------------------------------------------------------------------
   .c-status-label : ステータスラベル
----------------------------------------------------------------------------------- */
.c-status-label {
  display: inline-block;
  min-width: 5rem;
  padding: 0 0.4rem;
  font-size: 1.3rem;
  line-height: 2rem;
  text-align: center;
  color: #FFFFFF;
  border-radius: 0.3rem;
  background-color: #949DA6;
}
.c-status-label.is-submitted {
  background-color: #79A2C9;
}
.c-status-label.is-not-submitted {
  background-color: #C96161;
}
.c-status-label.is-confirmed {
  background-color: #79A2C9;
}
.c-status-label.is-not-confirmed {
  background-color: #C96161;
}
/* --------------------------------------------------------------------------------
   .c-qa-label : QAラベル
----------------------------------------------------------------------------------- */
.c-qa-label {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  font-style: italic;
  line-height: 3rem;
  text-align: center;
  text-indent: -0.5rem;
  color: #FFFFFF;
  border-radius: 100%;
  background-color: #949DA6;
}
.c-qa-label.is-q {
  background-color: #019CE1;
}
.c-qa-label.is-a {
  background-color: #D8B844;
}
/* --------------------------------------------------------------------------------
   .c-info-tip : インフォチップ
----------------------------------------------------------------------------------- */
.c-info-tip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  padding: 0 0.5em;
  font-size: 1.2rem;
  border: 0.1rem solid #DAE0E6;
}
.c-info-tip dt {
  color: #007EB8;
  white-space: nowrap;
}
.c-info-tip dt::after {
  content: ":";
  margin: 0 0.3em;
}
.c-info-tip.is-alert dd {
  font-weight: bold;
  color: #C73D3D;
  white-space: nowrap;
}
@media print, screen and (max-width: 350px) {
  .c-info-tip {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-chat-header : ビュッフェチャットのヘッダ情報
----------------------------------------------------------------------------------- */
.c-chat-header {
  /* IE対応 */
}
.c-chat-header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-bottom: 0;
}
.c-chat-header__user {
  font-weight: bold;
}
.c-chat-header__user::before {
  content: "\f007";
  margin-right: 0.5em;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
.c-chat-header__date {
  margin-right: auto;
  color: #7A838C;
}
.c-chat-header__reply {
  color: #7A838C;
}
.c-chat-header h3 {
  margin: 0.5em 0;
  font-size: 1.8rem;
}
@media all and (-ms-high-contrast: none) {
  .c-chat-header ul > * {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
}
@media print, screen and (max-width: 768px) {
  .c-chat-header__user {
    width: 100%;
  }
}
@media print, screen and (max-width: 599px) {
  .c-chat-header ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.5rem;
    line-height: 1.5;
  }
  .c-chat-header__user, .c-chat-header__date {
    width: 100%;
  }
  .c-chat-header__reply, .c-chat-header__delete, .c-chat-header__edit {
    margin-right: 1rem;
  }
  .c-chat-header h3 {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

/* --------------------------------------------------------------------------------
   .c-news-list : ニュースリスト
----------------------------------------------------------------------------------- */
.c-news-list {
  position: relative;
  margin: 0 0 2rem;
  background-color: #FFFFFF;
  overflow: hidden;
  /* トップページ用のコンパクトな一覧 */
}
.c-news-list:first-child {
  margin-top: 0;
}
.c-news-list:last-child {
  margin-bottom: 0;
}
.c-news-list > li:nth-child(2n) {
  background-color: #F2F3F4;
}
.c-news-list > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2.4rem;
  line-height: 1.5;
  text-decoration: none;
  color: #343A40;
  border: 0.1rem solid #DAE0E6;
  border-width: 0.1rem 0;
}
.c-news-list > li > a:hover {
  color: #007EB8;
  border-color: rgba(1, 156, 225, .5);
}
.c-news-list__date {
  width: 15rem;
}
.c-news-list__text {
  width: calc(100% - 15rem);
}
.c-news-list.is-compact {
  margin: 0;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
}
.c-news-list.is-compact > li > a {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem 2rem;
  border-width: 0 0 0.1rem;
}
.c-news-list.is-compact > li > a:hover {
  color: #007EB8;
  border-color: #DAE0E6;
}
.c-news-list.is-compact > li:last-child a {
  border: 0;
}
.c-news-list.is-compact .c-news-list__date {
  width: auto;
  font-weight: bold;
  line-height: 2.1rem;
  /* 連絡BOXの日付（ラベル付きで少し行間が高い）と合わせる */
}
.c-news-list.is-compact .c-news-list__text {
  width: auto;
  font-size: 1.4rem;
}
@media print, screen and (max-width: 768px) {
  .c-news-list {
    /* トップページ用のコンパクトな一覧 */
  }
  .c-news-list > li > a {
    display: block;
    padding: 1rem;
  }
  .c-news-list__date {
    display: block;
    width: auto;
    font-size: 1.2rem;
  }
  .c-news-list__text {
    display: block;
    width: auto;
  }
  .c-news-list.is-compact > li > a {
    padding: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-accordion : アコーディオン
   --------------------------------------------------------------------------------
    - is-miniで一回り小さなアコーディオンになる
----------------------------------------------------------------------------------- */
.c-accordion {
  margin: 2rem 0;
  /* 開いている状態（表示非表示はjsで制御する） */
  /* 小さいサイズ */
}
.c-accordion:first-child {
  margin-top: 0;
}
.c-accordion:last-child {
  margin-bottom: 0;
}
.c-accordion__label {
  position: relative;
  display: block;
  width: 100%;
  padding: 2rem 8rem 2rem 2rem;
  text-align: left;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  background-color: #F2F3F4;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.c-accordion__label::after {
  content: "\f078";
  position: absolute;
  right: 3rem;
  top: 0;
  bottom: 0;
  height: 2rem;
  margin: auto;
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: #949DA6;
}
.c-accordion__label:hover {
  border-color: #019CE1;
  background-color: #F0F6FC;
}
.c-accordion__label:hover::after {
  color: #019CE1;
}
.c-accordion__body {
  display: none;
  padding: 2rem;
  border: 0.1rem solid #DAE0E6;
  border-top: 0;
  border-radius: 0 0 1rem 1rem;
  background-color: #FFFFFF;
}
.c-accordion.is-open .c-accordion__label {
  border-radius: 1rem 1rem 0 0;
}
.c-accordion.is-open .c-accordion__label::after {
  content: "\f077";
}
.c-accordion.is-mini {
  margin: 1rem 0;
}
.c-accordion.is-mini:first-child {
  margin-top: 0;
}
.c-accordion.is-mini:last-child {
  margin-bottom: 0;
}
.c-accordion.is-mini .c-accordion__label {
  padding: 1rem 8rem 1rem 1rem;
}
.c-accordion.is-mini .c-accordion__body {
  padding: 1rem;
}
@media print, screen and (max-width: 599px) {
  .c-accordion {
    /* 小さいサイズ */
  }
  .c-accordion__label {
    padding: 1rem 4rem 1rem 1rem;
  }
  .c-accordion__label::after {
    right: 1.3rem;
    height: 1.6rem;
    font-size: 1.6rem;
  }
  .c-accordion__body {
    padding: 1rem;
  }
  .c-accordion.is-mini .c-accordion__label {
    padding: 1rem 4rem 1rem 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-column : カラム
   --------------------------------------------------------------------------------
     - 横並びにしたい要素のラッパー要素にクラス名 .c-column を付与
     - 子要素の幅はユーティリティクラスで指定　※未指定の場合成り行き
     - カラム間の余白（gap）はクラス名 .is-gap-0, .is-gap-10, ... の形式で 1rem 刻みで最大 10rem まで指定可能（デフォルトは 5rem）
     - 縦方向はデフォルトで上端揃え、.is-center で中央揃え .is-bottom で下端揃え
     - スマホでは縦並びになり、gap の最大値は 3rem
----------------------------------------------------------------------------------- */
.c-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5rem;
  margin: 2rem 0;
  /* p 要素など要素自体に上下マージンが設定されている場合は邪魔なのでキャンセルする（余白は gap でとる） */
  /* 中央揃え */
  /* 下端揃え */
  /* IE対応 */
}
.c-column:first-child {
  margin-top: 0;
}
.c-column:last-child {
  margin-bottom: 0;
}
.c-column > :first-child {
  margin-top: 0;
  margin-bottom: 0;
}
.c-column > :last-child {
  margin-top: 0;
  margin-bottom: 0;
}
.c-column.is-gap-0 {
  gap: 0;
}
.c-column.is-gap-10 {
  gap: 1rem;
}
.c-column.is-gap-20 {
  gap: 2rem;
}
.c-column.is-gap-30 {
  gap: 3rem;
}
.c-column.is-gap-40 {
  gap: 4rem;
}
.c-column.is-gap-50 {
  gap: 5rem;
}
.c-column.is-gap-60 {
  gap: 6rem;
}
.c-column.is-gap-70 {
  gap: 7rem;
}
.c-column.is-gap-80 {
  gap: 8rem;
}
.c-column.is-gap-90 {
  gap: 9rem;
}
.c-column.is-gap-100 {
  gap: 10rem;
}
.c-column.is-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c-column.is-bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media all and (-ms-high-contrast: none) {
  .c-column > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .c-column.is-gap-0 > * {
    margin-left: 0;
    margin-right: 0;
  }
  .c-column.is-gap-10 > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .c-column.is-gap-20 > * {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .c-column.is-gap-30 > * {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .c-column.is-gap-40 > * {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .c-column.is-gap-50 > * {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .c-column.is-gap-60 > * {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .c-column.is-gap-70 > * {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .c-column.is-gap-80 > * {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .c-column.is-gap-90 > * {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .c-column.is-gap-100 > * {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .c-column > :first-child {
    margin-left: 0;
  }
  .c-column > :last-child {
    margin-right: 0;
  }
}
@media print, screen and (max-width: 599px) {
  .c-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
    /* スマホでは is-center/bottom ともに左揃え */
  }
  .c-column.is-gap-30, .c-column.is-gap-40, .c-column.is-gap-50, .c-column.is-gap-60, .c-column.is-gap-70, .c-column.is-gap-80, .c-column.is-gap-90, .c-column.is-gap-100 {
    gap: 3rem;
  }
  .c-column.is-center, .c-column.is-bottom {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------------
   .c-report-q : レポートの問
----------------------------------------------------------------------------------- */
.c-report-q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1em;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  color: #343A40;
  /* IE対応 */
}
.c-report-q:first-child {
  margin-top: 0;
}
.c-report-q:last-child {
  margin-bottom: 0;
}
@media all and (-ms-high-contrast: none) {
  .c-report-q em {
    margin-right: 1em;
  }
}
/* --------------------------------------------------------------------------------
   .c-report-nav : レポートの問ナビ
----------------------------------------------------------------------------------- */
.c-report-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  /* IE対応 */
}
.c-report-nav a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 7rem;
  height: 5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  color: #0A416A;
  border: 0.1rem solid #DAE0E6;
  border-radius: 0.5rem;
  background-color: #FFFFFF;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.c-report-nav a:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.c-report-nav a.is-selected {
  color: #FFFFFF;
  border: 0;
  background-color: #019CE1;
}
.c-report-nav a.is-selected::after {
  content: "";
  position: absolute;
  left: calc(50% - 1rem);
  top: 100%;
  width: 2rem;
  height: 1rem;
  border: 1rem solid transparent;
  border-top-color: #019CE1;
}
@media all and (-ms-high-contrast: none) {
  .c-report-nav > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
@media print, screen and (max-width: 599px) {
  .c-report-nav {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.5rem;
  }
  .c-report-nav a {
    width: 5rem;
    height: 4rem;
    font-size: 1.4rem;
  }
  .c-report-nav a.is-selected::after {
    left: calc(50% - 0.5rem);
    width: 1rem;
    height: 0.5rem;
    border-width: 0.5rem;
  }
}

/* --------------------------------------------------------------------------------
   .c-report-score : レポートの評点
----------------------------------------------------------------------------------- */
.c-report-score {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 4rem;
  height: 4rem;
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: #AEB7BF;
  border-radius: 100%;
  background-color: #E9ECEF;
  /* 小さなサイズ */
}
.c-report-score.is-a, .c-report-score.is-b, .c-report-score.is-c, .c-report-score.is-d {
  color: #FFFFFF;
}
.c-report-score.is-s.is-selected {
  color: #000000;
  background-color: #D8B844;
}
.c-report-score.is-a.is-selected {
  background-color: #80C35D;
}
.c-report-score.is-b.is-selected {
  background-color: #019CE1;
}
.c-report-score.is-c.is-selected {
  background-color: #866EC8;
}
.c-report-score.is-d.is-selected {
  background-color: #D34C4C;
}
.c-report-score.is-sm {
  width: 3rem;
  height: 3rem;
  font-size: 1.8rem;
}
/* --------------------------------------------------------------------------------
   .c-dropdown-menu : ドロップダウンメニュー（ヘルプなどで使用）
----------------------------------------------------------------------------------- */
.c-dropdown-menu {
  z-index: 50;
  display: none;
  margin: 0;
  min-width: 200px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .15);
          box-shadow: 0 5px 5px rgba(0, 0, 0, .15);
}
.c-dropdown-menu:hover {
  display: block;
}
.c-dropdown-menu li {
  border-bottom: 1px solid #ddd;
}
.c-dropdown-menu li:last-child {
  border: 0;
}
.c-dropdown-menu a {
  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;
  padding: 10px 15px;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  color: #343A40;
}
.c-dropdown-menu a:hover {
  color: #007EB8;
  background-color: #f2f2f2;
}
.c-dropdown-menu .icon-notice {
  margin-left: 20px;
}
@media print, screen and (max-width: 599px) {
  .c-dropdown-menu {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------------
   .c-icon-notice : お知らせアイコン
----------------------------------------------------------------------------------- */
.c-icon-notice {
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  color: #FFFFFF;
  border: 0;
  border-radius: 100%;
  background: #f00;
}
.c-archive01 {
  margin: 2rem auto;
}
.c-archive01__ttl-main {
  color: #007EB8;
  font-size: 2rem;
}
.c-archive01__item {
  margin-bottom: 1rem;
}
.c-archive01__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1em;
  text-decoration: none;
  color: #343A40 !important;
  border: 0.1rem solid #DAE0E6;
  border-radius: 0.5rem;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  cursor: pointer;
}
.c-archive01__link:hover {
  opacity: 1;
  color: #007EB8 !important;
  border-color: rgba(0, 156, 225, .5) !important;
}
.c-archive01__date {
  width: 15rem;
}
.c-archive01__ttl {
  width: calc(100% - 15rem);
}
@media print, screen and (max-width: 599px) {
  .c-archive01__item {
    margin: 0 auto;
  }
  .c-archive01__item + .c-archive01__item {
    margin-top: 1rem;
  }
  .c-archive01__link {
    display: block;
  }
  .c-archive01__date {
    width: auto;
    display: block;
  }
  .c-archive01__ttl {
    width: auto;
  }
}

.c-rule01 {
  height: 400px;
  margin: 30px 0;
  padding: 20px;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  line-height: 2;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.c-rule01::-webkit-scrollbar {
  width: 0.8rem;
}
.c-rule01::-webkit-scrollbar-track {
  border-radius: 0.8rem;
  background-color: rgba(255, 255, 255, .5);
}
.c-rule01::-webkit-scrollbar-track:hover {
  background-color: rgba(255, 255, 255, .65);
}
.c-rule01::-webkit-scrollbar-thumb {
  border-radius: 0.8rem;
  background-color: #007EB8;
}
.c-rule01::-webkit-scrollbar-thumb:hover {
  background-color: #019CE1;
}
.c-rule01::-webkit-scrollbar-thumb {
  background-color: #CAD1D9;
}
.c-rule01::-webkit-scrollbar-thumb:hover {
  background-color: #DAE0E6;
}

/* --------------------------------------------------------------------------------
   .c-chapter-list : チャプターごとの動画リンク
----------------------------------------------------------------------------------- */
.c-chapter-list {
  position: relative;
  margin: 0 0 7rem;
  background-color: #FFFFFF;
}
.c-chapter-list .c-link.is-play::before {
  content: "\f144";
  display: inline-block;
}
.c-chapter-list:first-child {
  margin-top: 0;
}
.c-chapter-list:last-child {
  margin-bottom: 0;
}
.c-chapter-list > li:nth-child(2n) {
  background-color: #F2F3F4;
}
.c-chapter-list > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2.4rem;
  line-height: 1.5;
  text-decoration: none;
  color: #343A40;
  border: 0.1rem solid #DAE0E6;
  border-width: 0.1rem 0;
}
.c-chapter-list > li > a:hover {
  color: #007EB8;
  border-color: rgba(1, 156, 225, .5);
}
.c-chapter-list__date {
  width: 100%;
}
.c-chapter-list__text {
  width: calc(100% - 15rem);
  text-align: right;
}
@media print, screen and (max-width: 599px) {
  .c-chapter-list > li > a {
    display: block;
  }
  .c-chapter-list > li > a ._date {
    width: auto;
  }
  .c-chapter-list > li > a ._title {
    width: auto;
  }
}

/* --------------------------------------------------------------------------------
.p-form : フォーム（ラベル左）
   --------------------------------------------------------------------------------
    - ラベルの幅（全体幅に対する％）を .is-label-10, is-label-20, ... で50%まで指定可能
      （デフォルトは30、またスマホでは常に100%）
----------------------------------------------------------------------------------- */
.p-form {
  margin: 2rem 0;
  /* 項目ラベルの幅調整 */
  /* 縦型のフォーム */
}
.p-form:first-child {
  margin-top: 0;
}
.p-form:last-child {
  margin-bottom: 0;
}
.p-form__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  background-color: #F2F3F4;
}
.p-form__item:last-child {
  margin-bottom: 0;
}
.p-form__item.is-error {
  background-color: rgba(199, 61, 61, .1);
}
.p-form__item.is-error > label {
  color: #C73D3D;
}
.p-form__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 30%;
  padding: 0.2rem 0 0.2rem 1rem;
}
.p-form__label__required {
  display: inline-block;
  width: 4rem;
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: center;
  color: #FFFFFF;
  border-radius: 0.3rem;
  background-color: #C96161;
}
.p-form__input {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  padding: 0 0 0 1rem;
}
.p-form__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-form__group-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.p-form__note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 0.5rem;
  font-size: 1.3rem;
  color: #7A838C;
}
.p-form__error {
  color: #C73D3D;
}
.p-form__error::before {
  content: "\f071";
  margin-right: 0.3rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
.p-form.is-label-10 .p-form__label {
  width: 10%;
}
.p-form.is-label-20 .p-form__label {
  width: 20%;
}
.p-form.is-label-30 .p-form__label {
  width: 30%;
}
.p-form.is-label-40 .p-form__label {
  width: 40%;
}
.p-form.is-label-50 .p-form__label {
  width: 50%;
}
.p-form.is-vertical {
  /* 縦型は項目ラベルは幅100% */
}
.p-form.is-vertical .p-form__item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 2rem;
  background-color: transparent;
}
.p-form.is-vertical .p-form__item:last-child {
  margin-bottom: 0;
}
.p-form.is-vertical .p-form__item.is-error {
  background-color: transparent;
}
.p-form.is-vertical .p-form__label {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: 100%;
  font-weight: bold;
  padding: 0;
}
.p-form.is-vertical .p-form__input {
  width: 100%;
  padding: 0;
}
.p-form.is-vertical.is-label-10 .p-form__label, .p-form.is-vertical.is-label-20 .p-form__label, .p-form.is-vertical.is-label-30 .p-form__label, .p-form.is-vertical.is-label-40 .p-form__label, .p-form.is-vertical.is-label-50 .p-form__label {
  width: 100%;
}
@media print, screen and (max-width: 599px) {
  .p-form {
    /* スマホでは .is-vertical の有無に関わらず縦型フォームとする */
    /* 縦型は項目ラベルは幅100% */
  }
  .p-form .p-form__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 1rem;
    background-color: transparent;
  }
  .p-form .p-form__item:last-child {
    margin-bottom: 0;
  }
  .p-form .p-form__item.is-error {
    background-color: transparent;
  }
  .p-form .p-form__label {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: 100%;
    font-weight: bold;
    padding: 0;
  }
  .p-form .p-form__input {
    width: 100%;
    padding: 0;
  }
  .p-form .p-form__group {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 0.5rem;
  }
  .p-form .p-form__group > * {
    width: auto !important;
  }
  .p-form.is-label-10 .p-form__label, .p-form.is-label-20 .p-form__label, .p-form.is-label-30 .p-form__label, .p-form.is-label-40 .p-form__label, .p-form.is-label-50 .p-form__label {
    width: 100%;
  }
  .p-form.is-vertical .p-form__item {
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-form-vertical : フォーム（ラベル上）
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   .p-btns : 横並びのボタンエリア
----------------------------------------------------------------------------------- */
.p-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  /* IE対応 */
}
.p-btns.is-mini {
  gap: 1rem;
}
.p-btns.is-left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.p-btns:first-child {
  margin-top: 0;
}
.p-btns:last-child {
  margin-bottom: 0;
}
@media all and (-ms-high-contrast: none) {
  .p-btns > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .p-btns.is-mini > * {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .p-btns > .u-mr-auto,
.p-btns > .u-ml-auto {
    width: 100%;
  }
}
@media print, screen and (max-width: 599px) {
  .p-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
  .p-btns > * {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------------
   .p-info-tip-list : インフォチップリスト
----------------------------------------------------------------------------------- */
.p-info-tip-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  /* IE対応 */
}
.p-info-tip-list:first-child {
  margin-top: 0;
}
.p-info-tip-list:last-child {
  margin-bottom: 0;
}
@media all and (-ms-high-contrast: none) {
  .p-info-tip-list > * {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-info-tip-list {
    gap: 0.5rem;
  }
  .p-info-tip-list > * {
    width: 49%;
  }
}

/* --------------------------------------------------------------------------------
   テーマ詳細 : 元の（2021年6月改修前の）style.css
----------------------------------------------------------------------------------- */
.p-theme-detail {
  /* タイトル */
  /* タグ */
  /* カリキュラム詳細 */
}
.p-theme-detail__title {
  margin-bottom: 2rem;
  padding: 0 0 0 2rem;
  border-left: 0.5rem solid #019CE1;
}
.p-theme-detail__title span {
  display: block;
  margin-bottom: 0.3em;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.5;
  color: #019CE1;
}
.p-theme-detail__title em {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #019CE1;
}
.p-theme-detail__img {
  width: 40%;
  text-align: right;
}
.p-theme-detail__img img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.p-theme-detail__tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 2rem;
}
.p-theme-detail__tag-list > li {
  margin-right: 1rem;
}
.p-theme-detail__curriculum li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 0.1rem solid #ccc;
}
.p-theme-detail__curriculum li:first-child {
  border-top: 0.1rem solid #ccc;
}
.p-theme-detail__curriculum li em {
  display: block;
  padding: 0.5rem 2rem;
  line-height: 1.6;
  white-space: nowrap;
}
.p-theme-detail__curriculum li span {
  display: block;
  padding: 0.5rem 0;
  line-height: 1.6;
}
@media print, screen and (max-width: 599px) {
  .p-theme-detail {
    /* タグ */
  }
  .p-theme-detail__img {
    width: 100%;
    height: 20rem;
  }
  .p-theme-detail__img img {
    width: 100%;
  }
  .p-theme-detail__tag-list {
    margin-top: 0.5rem;
  }
  .p-theme-detail__tag-list > li {
    margin-right: 0.5rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-theme-card : テーマカード
   --------------------------------------------------------------------------------
   - パターン一覧
     - サムネイルのオーバレイ：なし, 完了, 添削中, 再レポート, 計画遅れ, 追加済み
     - チェックボックス：あり, なし
     - 削除ボタン：あり, なし
     - ラベル：なし, 必須, 推奨, 診断, 必須＋診断, 推奨＋診断
     - 学習期限：なし, あり
     - 学習開始予定月：なし, あり
     - 学習開始予定月の選択：なし, あり
----------------------------------------------------------------------------------- */
.p-theme-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #343A40;
  border: 0.1rem solid #DAE0E6;
  border-radius: 0.5rem;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 0.3rem 0 rgba(0, 0, 0, .1);
          box-shadow: 0 0.3rem 0 rgba(0, 0, 0, .1);
  /* サムネイル */
  /* テーマタイトル */
  /* テーマラベル、所要時間 */
  /* 期限、学習予定月 */
  /* 学習月選択 */
  /* 削除ボタン */
  /* チェックボックス */
  /* ドラッグハンドル */
  /* ホバーデバイスのみにホバースタイルを適用 */
  /* タッチデバイスでタップ時に focus 効果が消えるのでその対処 */
}
.p-theme-card__img {
  position: relative;
  height: 10rem;
  overflow: hidden;
  border-bottom: 0.1rem solid #DAE0E6;
  border-radius: 0.5rem 0.5rem 0 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #DAE0E6;
  /* サムネイルのオーバレイ */
}
.p-theme-card__img__overlay {
  position: absolute;
  left: 0;
  top: 0;
  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: 100%;
  height: 100%;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  /* 完了 */
  /* 添削中 */
  /* 再レポート */
  /* 計画遅れ、期限超過 */
  /* 期限超過 */
  /* 追加済み */
}
.p-theme-card__img__overlay::before {
  margin-bottom: 1rem;
  font-family: "Font Awesome 6 Free";
  font-size: 3.2rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}
.p-theme-card__img__overlay.is-completed {
  font-family: "Roboto", sans-serif;
  font-style: italic;
  letter-spacing: 0.1em;
  color: #80C35D;
  background-color: rgba(0, 0, 0, .65);
}
.p-theme-card__img__overlay.is-completed::before {
  content: "\f058";
}
.p-theme-card__img__overlay.is-on-review {
  color: #007EB8;
  background-color: rgba(240, 246, 252, .8);
}
.p-theme-card__img__overlay.is-on-review::before {
  content: "\f044";
}
.p-theme-card__img__overlay.is-re-report {
  color: #D34C4C;
  background-color: rgba(240, 246, 252, .8);
}
.p-theme-card__img__overlay.is-re-report::before {
  content: "\f363";
}
.p-theme-card__img__overlay.is-behind, .p-theme-card__img__overlay.is-behind-of-deadline {
  left: calc(50% - 6rem);
  top: calc(50% - 4.5rem);
  width: 12rem;
  height: 9rem;
  color: #714D09;
  border-radius: 1rem;
  background-color: rgba(240, 246, 252, .9);
}
.p-theme-card__img__overlay.is-behind::before, .p-theme-card__img__overlay.is-behind-of-deadline::before {
  content: "\f071";
  color: #D8B844;
}
.p-theme-card__img__overlay.is-behind-of-deadline {
  color: #D34C4C;
}
.p-theme-card__img__overlay.is-behind-of-deadline::before {
  color: #D34C4C;
}
.p-theme-card__img__overlay.is-added {
  font-size: 2rem;
  color: #FFFFFF;
  background-color: rgba(148, 157, 166, .95);
}
.p-theme-card__text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0.7rem;
}
.p-theme-card__text h3 span {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.2;
  color: #343A40;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.p-theme-card__text h3 em {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #000000;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.p-theme-card__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 1rem 1rem;
}
.p-theme-card__info > * {
  margin-right: 0.5rem;
}
.p-theme-card__info .p-theme-card__time {
  margin-left: auto;
  margin-right: 0;
  padding-left: 1.8rem;
  font-size: 1.2rem;
  line-height: 2rem;
  color: #343A40;
  background: url(/mbuffetDemo/jsp/BFuser/common/images/icon_info_time.svg) no-repeat left center;
  background-size: 1.4rem;
}
.p-theme-card__date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.p-theme-card__deadline, .p-theme-card__plan {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.4rem;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.5;
}
.p-theme-card__deadline dt, .p-theme-card__plan dt {
  margin-right: 0.3rem;
}
.p-theme-card__deadline {
  color: #C73D3D;
  background-color: #FAF2F2;
}
.p-theme-card__plan {
  color: #714D09;
  background-color: #FFFAEA;
}
.p-theme-card__plan.is-not-scheduled::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
  color: #D8B844;
}
.p-theme-card__deadline.is-behind, .p-theme-card__plan.is-behind {
  font-weight: bold;
  color: #C73D3D !important;
  background-color: #FAF2F2 !important;
}
.p-theme-card__deadline.is-behind::before, .p-theme-card__plan.is-behind::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
  color: #D34C4C;
}
.p-theme-card__select-month {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 3.2rem;
  margin: 0 -0.1rem;
  padding: 0 0.5rem;
  font-size: 1.3rem;
  color: #FFFFFF;
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: #79A2C9;
}
.p-theme-card__select-month dt {
  margin-right: 1em;
}
.p-theme-card__select-month select {
  width: 12rem;
}
.p-theme-card__delete {
  position: absolute;
  right: -1rem;
  top: -1rem;
  padding: 0;
  font-size: 3.2rem;
  line-height: 0;
  color: #D34C4C;
  outline: 0;
  border: 0.3rem solid #FFFFFF;
  border-radius: 100%;
}
.p-theme-card__delete:hover {
  color: #C73D3D;
}
.p-theme-card__check {
  position: absolute;
  left: -0.1rem;
  top: -0.1rem;
}
.p-theme-card__check input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.p-theme-card__check input[type=checkbox] + span {
  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: 3.2rem;
  height: 3.2rem;
  font-size: 2.4rem;
  line-height: 0;
  color: #DAE0E6;
  border: 0.1rem solid #AEB7BF;
  border-radius: 0.5rem 0 0.5rem 0;
  background-color: #FFFFFF;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .p-theme-card__check input[type=checkbox] + span:hover {
    color: #019CE1;
    border: 0.1rem solid #019CE1;
    background-color: #e2f6ff;
  }
}
.p-theme-card__check input[type=checkbox]:checked + span {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background-color: #019CE1;
}
.p-theme-card__handle {
  display: none;
}
body.is-enable-theme-drag-handle .p-theme-card.is-handle {
  padding-top: 3rem;
}
body.is-enable-theme-drag-handle .p-theme-card.is-handle .p-theme-card__img {
  border-radius: 0;
}
body.is-enable-theme-drag-handle .p-theme-card.is-handle .p-theme-card__handle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #AEB7BF;
  cursor: -webkit-grab;
  cursor: grab;
}
@media (hover: hover) and (pointer: fine) {
  .p-theme-card:hover {
    opacity: 1;
    -webkit-box-shadow: 0 0.6rem 0.8rem rgba(0, 0, 0, .1);
            box-shadow: 0 0.6rem 0.8rem rgba(0, 0, 0, .1);
  }
  .p-theme-card:hover .p-theme-card__text h3 span {
    color: #019CE1;
  }
  .p-theme-card:hover .p-theme-card__text h3 em {
    color: #019CE1;
  }
}
.p-theme-card:active {
  opacity: 0.8;
}
@media print, screen and (max-width: 599px) {
  .p-theme-card {
    padding-left: 30%;
    /* サムネイル */
    /* 期限、学習予定月 */
    /* 学習月選択 */
    /* ドラッグハンドル */
    /* スマホで hover 状態が残っても大丈夫なように hover に通常スタイルを当てる */
  }
  .p-theme-card__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    border-right: 0.1rem solid #DAE0E6;
    border-bottom: 0;
    border-radius: 0.5rem 0 0 0.5rem;
    /* サムネイルのオーバレイ */
  }
  .p-theme-card__img__overlay {
    font-size: 1.1rem;
    /* 計画遅れ、期限超過 */
  }
  .p-theme-card__img__overlay.is-behind, .p-theme-card__img__overlay.is-behind-of-deadline {
    left: 5%;
    width: 90%;
  }
  .p-theme-card__img__overlay.is-added {
    font-size: 1.4rem;
  }
  .p-theme-card__deadline, .p-theme-card__plan {
    font-size: 1.1rem;
  }
  .p-theme-card__select-month select {
    width: 8rem;
  }
  body.is-enable-theme-drag-handle .p-theme-card.is-handle {
    padding-top: 0;
    padding-left: 35%;
  }
  body.is-enable-theme-drag-handle .p-theme-card.is-handle .p-theme-card__img {
    left: 10%;
    width: 25%;
  }
  body.is-enable-theme-drag-handle .p-theme-card.is-handle .p-theme-card__handle {
    width: 10%;
    height: 100%;
  }
  .p-theme-card__check input[type=checkbox] {
    /* :checked のときはちゃんとチェックがつくようにする */
  }
  .p-theme-card__check input[type=checkbox] + span:hover {
    color: #DAE0E6;
    border-color: #AEB7BF;
    background-color: #FFFFFF;
  }
  .p-theme-card__check input[type=checkbox]:checked + span, .p-theme-card__check input[type=checkbox]:checked + span:hover {
    color: #FFFFFF;
    border-color: #FFFFFF;
    background-color: #019CE1;
  }
}

/* 横タイプ */
.p-theme-card.is-horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  min-height: 6rem;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.p-theme-card.is-horizontal .p-theme-card__handle {
  display: none;
}
.p-theme-card.is-horizontal .p-theme-card__date,
.p-theme-card.is-horizontal .p-theme-card__select-month {
  display: none;
}
.p-theme-card.is-horizontal .p-theme-card__img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 15.6rem;
  height: auto;
  min-height: 6rem;
  border-radius: 0.5rem 0 0 0.5rem;
  border-right: 0.1rem solid #DAE0E6;
}
.p-theme-card.is-horizontal .p-theme-card__img__overlay {
  font-size: 1.2rem;
  /* 計画遅れだけ少しスタイル調整 */
}
.p-theme-card.is-horizontal .p-theme-card__img__overlay::before {
  font-size: 2rem;
  margin-bottom: 0.3rem;
}
.p-theme-card.is-horizontal .p-theme-card__img__overlay.is-behind, .p-theme-card.is-horizontal .p-theme-card__img__overlay.is-behind-of-deadline {
  top: 0;
  bottom: 0;
  margin: auto;
  height: 5.6rem;
  font-size: 1.1rem;
}
.p-theme-card.is-horizontal .p-theme-card__img__overlay.is-behind::before, .p-theme-card.is-horizontal .p-theme-card__img__overlay.is-behind-of-deadline::before {
  margin-bottom: 0.3rem;
}
.p-theme-card.is-horizontal .p-theme-card__text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 1rem 1rem 2rem;
}
.p-theme-card.is-horizontal .p-theme-card__info {
  margin-right: auto;
  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: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.5rem;
  padding: 1rem;
}
.p-theme-card.is-horizontal .p-theme-card__info > * {
  margin-right: 0;
}
@media print, screen and (max-width: 599px) {
  .p-theme-card.is-horizontal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 30%;
  }
  .p-theme-card.is-horizontal .p-theme-card__img {
    position: absolute;
    width: 30%;
    height: 100%;
  }
  .p-theme-card.is-horizontal .p-theme-card__text {
    padding: 1rem;
  }
  .p-theme-card.is-horizontal .p-theme-card__info {
    margin-top: auto;
    margin-right: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-right: 0.5rem;
  }
  .p-theme-card.is-horizontal .p-theme-card__time {
    margin-left: auto;
    padding-left: 1.4rem;
    font-size: 1.1rem;
    background-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-theme-card-list : テーマカードリスト
----------------------------------------------------------------------------------- */
.p-theme-card-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 1rem;
  margin: 0;
  margin-bottom: -2rem !important;
  /* コンポーネントページにおける説明用 */
  /* IE対応 */
}
.p-theme-card-list > li {
  width: 21rem;
  margin-bottom: 2rem;
}
.p-theme-card-list > li.is-filler {
  margin-bottom: 0;
}
.p-theme-card-list.is-for-test {
  gap: 5rem 2rem;
}
.p-theme-card-list.is-for-test .c-note {
  position: absolute;
  top: -2.5rem;
}
@media all and (-ms-high-contrast: none) {
  .p-theme-card-list > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-theme-card-list {
    display: block;
    margin-bottom: -1rem !important;
  }
  .p-theme-card-list > li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-theme-card-horizontal : 学習テーマカード（横）
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   .p-osusume-list : おすすめの学習ステップリスト
----------------------------------------------------------------------------------- */
.p-osusume-list > li:not(:last-child) {
  position: relative;
  margin-bottom: 2rem;
}
.p-osusume-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% - 1.5rem);
  top: calc(100% + 0.5rem);
  width: 2rem;
  height: 2rem;
  border: 1rem solid transparent;
  border-top: 1rem solid #DAE0E6;
}
/* --------------------------------------------------------------------------------
   .p-osusume-summary : おすすめの学習ステップリスト上部エリア
----------------------------------------------------------------------------------- */
.p-osusume-summary {
  margin-bottom: 2rem;
  padding: 0.5rem;
  text-align: center;
  border-radius: 0.5rem;
  background-color: #F2F3F4;
}
.p-osusume-summary__theme, .p-osusume-summary__time {
  margin: 0 1rem;
  padding-left: 2rem;
  font-size: 1.4rem;
  background: url(/mbuffetDemo/jsp/BFuser/common/images/icon_info_pen.svg) no-repeat left center;
  background-size: 1.6rem;
}
.p-osusume-summary__theme em, .p-osusume-summary__time em {
  margin: 0 0.5rem;
  font-size: 2rem;
  color: #000000;
}
.p-osusume-summary__time {
  background: url(/mbuffetDemo/jsp/BFuser/common/images/icon_info_time.svg) no-repeat left center;
  background-size: 1.6rem;
}
@media print, screen and (max-width: 599px) {
  .p-osusume-summary > span {
    display: block;
    text-align: left;
  }
  .p-osusume-summary__theme, .p-osusume-summary__time {
    font-size: 1.2rem;
  }
  .p-osusume-summary__theme em, .p-osusume-summary__time em {
    font-size: 1.8rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-attachment-list : 添付ファイル一覧
----------------------------------------------------------------------------------- */
.p-attachment-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
  /* IE対応 */
}
@media all and (-ms-high-contrast: none) {
  .p-attachment-list > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-attachment-list {
    gap: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

/* --------------------------------------------------------------------------------
   .p-report-score-wrapper : レポートの評点のラッパー
----------------------------------------------------------------------------------- */
.p-report-score-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  margin-top: 5rem;
  margin-bottom: 5rem;
  /* IE対応 */
}
.p-report-score-wrapper:first-child {
  margin-top: 0;
}
.p-report-score-wrapper:last-child {
  margin-bottom: 0;
}
@media all and (-ms-high-contrast: none) {
  .p-report-score-wrapper > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
/* --------------------------------------------------------------------------------
   .p-report-header : レポートヘッダ
----------------------------------------------------------------------------------- */
.p-report-header {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.p-report-header:first-child {
  margin-top: 0;
}
.p-report-header:last-child {
  margin-bottom: 0;
}
.p-report-header table {
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  border-collapse: separate;
  /* 角丸にするので */
  overflow: hidden;
}
.p-report-header table th,
.p-report-header table td {
  padding: 0.5rem 2rem;
  background-color: #FFFFFF;
  border: 0;
  border-bottom: 0.1rem solid #DAE0E6;
}
.p-report-header table tr:last-child th,
.p-report-header table tr:last-child td {
  border-bottom: 0;
}
.p-report-header small {
  margin-right: 1em;
  font-size: 1.4rem;
  font-weight: normal;
}
.p-report-header em {
  font-size: 2rem;
}
@media print, screen and (max-width: 599px) {
  .p-report-header table {
    display: block;
  }
  .p-report-header table tbody {
    display: block;
  }
  .p-report-header table tr {
    display: block;
    padding: 1rem;
    border-bottom: 0.1rem solid #DAE0E6;
  }
  .p-report-header table tr:last-child {
    border-bottom: 0;
  }
  .p-report-header table th,
.p-report-header table td {
    display: block;
    padding: 0;
    border: 0;
    line-height: 1.5;
  }
  .p-report-header table th {
    margin-bottom: 0.5rem;
  }
  .p-report-header small {
    display: block;
    margin-right: 0;
    font-size: 1.2rem;
  }
  .p-report-header em {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-report-footer : レポート下部固定ボタン
----------------------------------------------------------------------------------- */
.p-report-footer {
  z-index: 29;
  position: fixed;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  width: 100%;
  height: 8rem;
  padding: 0 2rem;
  background-color: #007EB8;
  /* IE対応 */
}
.p-report-footer__save {
  position: absolute;
  left: 2rem;
  top: 2.2rem;
  margin-right: auto;
}
@media all and (-ms-high-contrast: none) {
  .p-report-footer > * {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
@media print, screen and (max-width: 1024px) {
  .p-report-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    height: auto;
    padding: 1rem;
  }
  .p-report-footer__prev, .p-report-footer__next, .p-report-footer__save {
    width: 10rem !important;
    min-width: 0 !important;
    height: 4rem !important;
    font-size: 1.2rem !important;
  }
  .p-report-footer__prev::before, .p-report-footer__prev::after, .p-report-footer__next::before, .p-report-footer__next::after, .p-report-footer__save::before, .p-report-footer__save::after {
    margin: 0 0.5rem !important;
    font-size: 1.4rem !important;
  }
  .p-report-footer__prev.is-send, .p-report-footer__next.is-send, .p-report-footer__save.is-send {
    width: 14rem !important;
  }
  .p-report-footer__save {
    top: 1rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-report-footer__save {
    left: calc(50% - 6rem);
    top: auto;
    height: 3rem !important;
    bottom: calc(100% + 1rem);
    border-radius: 3rem;
    border-color: rgba(121, 162, 201, .5) !important;
    background-color: rgba(240, 246, 252, .9) !important;
    -webkit-box-shadow: 0 0.3rem 0.3rem rgba(0, 126, 184, .15);
            box-shadow: 0 0.3rem 0.3rem rgba(0, 126, 184, .15);
  }
}

/* --------------------------------------------------------------------------------
   .p-renraku-list : 連絡BOX一覧
----------------------------------------------------------------------------------- */
.p-renraku-list thead th {
  white-space: nowrap;
}
.p-renraku-list tr > :nth-child(1),
.p-renraku-list tr > :nth-child(2) {
  width: 13rem;
  text-align: center;
}
.p-renraku-list tr > :nth-child(3) {
  width: 10rem;
  text-align: center;
}
.p-renraku-list tbody tr {
  cursor: pointer;
}
.p-renraku-list tbody tr a {
  text-decoration: none;
  color: #343A40;
}
.p-renraku-list tbody tr:hover th,
.p-renraku-list tbody tr:hover td {
  background-color: #F0F6FC;
}
.p-renraku-list tbody th {
  font-weight: normal;
}
.p-renraku-list__alert {
  font-weight: bold;
  color: #C73D3D;
}
.p-renraku-list__over {
  font-weight: bold;
  color: #007EB8;
}
@media print, screen and (max-width: 599px) {
  .p-renraku-list table,
.p-renraku-list thead,
.p-renraku-list tbody,
.p-renraku-list tr,
.p-renraku-list th,
.p-renraku-list td {
    display: block;
  }
  .p-renraku-list thead {
    display: none;
  }
  .p-renraku-list tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-top: -0.1rem;
    border: 0.1rem solid #DAE0E6;
  }
  .p-renraku-list th,
.p-renraku-list td {
    border: 0;
    background-color: #FFFFFF !important;
  }
  .p-renraku-list tr > :nth-child(1),
.p-renraku-list tr > :nth-child(2),
.p-renraku-list tr > :nth-child(3) {
    padding: 1rem 1rem 0;
  }
  .p-renraku-list tr > :nth-child(1) {
    width: 30%;
    font-weight: bold;
    text-align: left;
  }
  .p-renraku-list tr > :nth-child(2) {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: auto;
    text-align: right;
  }
  .p-renraku-list tr > :nth-child(2)::before {
    content: "期限 ";
  }
  .p-renraku-list tr > :nth-child(3) {
    width: 6rem;
    padding-left: 0;
  }
  .p-renraku-list tbody tr {
    cursor: pointer;
  }
  .p-renraku-list tbody tr a {
    text-decoration: none;
    color: #343A40;
  }
  .p-renraku-list tbody tr:hover th,
.p-renraku-list tbody tr:hover td {
    background-color: #F0F6FC;
  }
  .p-renraku-list tbody th {
    font-weight: normal;
  }
}
@media print, screen and (max-width: 350px) {
  .p-renraku-list tr > * {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-qa-list : 質問リスト
----------------------------------------------------------------------------------- */
.p-qa-list {
  margin: 2rem 0;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  /* 空の場合 */
  /* IE対応 */
}
.p-qa-list:first-child {
  margin-top: 0;
}
.p-qa-list:last-child {
  margin-bottom: 0;
}
.p-qa-list a {
  text-decoration: none;
  color: #343A40;
}
.p-qa-list__item {
  display: block;
  padding: 2rem;
  border-bottom: 0.1rem solid #DAE0E6;
}
.p-qa-list__item:hover {
  background-color: #F0F6FC;
}
li:nth-child(2n) .p-qa-list__item {
  background-color: #F2F3F4;
}
li:nth-child(2n) .p-qa-list__item:hover {
  background-color: #F0F6FC;
}
.p-qa-list__q, .p-qa-list__a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3rem;
}
.p-qa-list .c-qa-label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}
.p-qa-list__date {
  white-space: nowrap;
}
.p-qa-list__more {
  color: #007EB8;
  text-decoration: underline;
}
.p-qa-list.is-empty li {
  padding: 5rem;
  text-align: center;
}
@media all and (-ms-high-contrast: none) {
  .p-qa-list__q > *:not(:last-child), .p-qa-list__a > *:not(:last-child) {
    margin-right: 3rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-qa-list__item {
    padding: 1.5rem;
  }
  .p-qa-list__q, .p-qa-list__a {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0 1rem;
  }
  .p-qa-list__a {
    margin-top: 1.5rem;
  }
  .p-qa-list .c-qa-label {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
  }
  .p-qa-list__date {
    width: 80%;
    font-weight: bold;
  }
}

/* --------------------------------------------------------------------------------
   .p-qa-detail : 質問と回答
----------------------------------------------------------------------------------- */
.p-qa-detail {
  /* IE対応 */
}
.p-qa-detail__q, .p-qa-detail__a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  padding: 2rem;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  background-color: #F2F3F4;
}
.p-qa-detail__a {
  margin-top: 2rem;
  background-color: #FFFFFF;
}
.p-qa-detail .c-qa-label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-qa-detail dl,
.p-qa-detail p {
  margin: 0;
}
.p-qa-detail__text {
  font-weight: bold;
}
.p-qa-detail__body {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 0.1rem solid #DAE0E6;
}
@media all and (-ms-high-contrast: none) {
  .p-qa-detail__q > :first-child, .p-qa-detail__a > :first-child {
    margin-right: 2rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-qa-detail__q, .p-qa-detail__a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-qa-detail dl {
    margin-top: -5rem;
  }
  .p-qa-detail__date {
    display: block;
    margin-left: 4rem;
    margin-bottom: 2rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-management-qa-item : マネジメントQ&Aアイテム
----------------------------------------------------------------------------------- */
.p-management-qa-item {
  margin-bottom: 5rem;
}
.p-management-qa-item .c-column {
  margin-bottom: 3rem;
}
.p-management-qa-item:last-child {
  margin-bottom: 0;
}
@media print, screen and (max-width: 599px) {
  .p-management-qa-item {
    margin-bottom: 3rem;
  }
  .p-management-qa-item .c-column {
    margin-bottom: 1rem !important;
  }
}

/* --------------------------------------------------------------------------------
   .p-news-detail : ニュース詳細
----------------------------------------------------------------------------------- */
.p-news-detail header {
  margin-bottom: 2rem;
}
.p-news-detail header h3 {
  margin-top: 0;
}
/* --------------------------------------------------------------------------------
   .p-renraku-detail : 連絡BOX詳細
----------------------------------------------------------------------------------- */
.p-renraku-detail {
  /* 提出欄 */
  /* 提出済み表示 */
}
.p-renraku-detail header {
  margin-bottom: 2rem;
}
.p-renraku-detail header h3 {
  margin-top: 0;
}
.p-renraku-detail__submit {
  margin: 2rem -2rem -2rem;
  padding: 2rem;
  border-radius: 0 0 1rem 1rem;
  background-color: #F2F3F4;
}
.p-renraku-detail__submitted {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  color: #019CE1;
}
.p-renraku-detail__submitted::before {
  content: "\f058";
  margin-right: 0.5em;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
@media print, screen and (max-width: 599px) {
  .p-renraku-detail__submit {
    margin: 2rem -1.5rem -1.5rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-renraku-list-compact : 学習トップ・連絡BOX
----------------------------------------------------------------------------------- */
.p-renraku-list-compact {
  position: relative;
  margin: 0;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  background-color: #FFFFFF;
  overflow: hidden;
}
.p-renraku-list-compact > li:nth-child(2n) {
  background-color: #F2F3F4;
}
.p-renraku-list-compact > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem 2rem;
  line-height: 1.5;
  text-decoration: none;
  color: #343A40;
  border: 0.1rem solid #DAE0E6;
  border-width: 0 0 0.1rem;
}
.p-renraku-list-compact > li > a:hover {
  color: #007EB8;
}
.p-renraku-list-compact > li:last-child a {
  border: 0;
}
.p-renraku-list-compact__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-renraku-list-compact__date {
  font-weight: bold;
}
.p-renraku-list-compact__deadline {
  margin-left: auto;
  margin-right: 1rem;
}
.p-renraku-list-compact__deadline.is-warning {
  color: #714D09;
}
.p-renraku-list-compact__deadline.is-danger {
  color: #C73D3D;
}
.p-renraku-list-compact__text {
  font-size: 1.4rem;
}
@media print, screen and (max-width: 768px) {
  .p-renraku-list-compact > li > a {
    padding: 1rem;
  }
  .p-renraku-list-compact__info {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
  }
}
@media print, screen and (max-width: 350px) {
  .p-renraku-list-compact__info {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-chat-list-header : ビュッフェチャット一覧ヘッダ
----------------------------------------------------------------------------------- */
.p-chat-list-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 5rem;
}
.p-chat-list-header__cat {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  margin: 0;
  margin-right: auto;
}
.p-chat-list-header__cat dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}
.p-chat-list-header__cat dt {
  margin: 0 1em 0 0.5em;
  font-weight: bold;
  white-space: nowrap;
}
.p-chat-list-header__cat dd {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
.p-chat-list-header__cat dd select {
  max-width: 34rem;
}
.p-chat-list-header__cat p {
  margin: 0.5em 1em 0 0.5em;
}
.p-chat-list-header .c-btn.is-lg {
  min-width: 12rem;
}
@media print, screen and (max-width: 599px) {
  .p-chat-list-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-chat-list-header__cat {
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-chat-list : ビュッフェチャット一覧
----------------------------------------------------------------------------------- */
.p-chat-list > li:not(:last-child) {
  margin-bottom: 2rem;
}
.p-chat-list a {
  color: #343A40;
}
.p-chat-list__item {
  display: block;
  padding: 2rem;
  text-decoration: none;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.p-chat-list__item:hover {
  background-color: #F0F6FC;
}
.p-chat-list h3 {
  color: #019CE1;
}
.p-chat-list p {
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* --------------------------------------------------------------------------------
   .p-chat-detail : ビュッフェチャット詳細
----------------------------------------------------------------------------------- */
.p-chat-detail {
  /* 返信 */
  /* 返信フォーム */
  /* ボタン */
}
.p-chat-detail header {
  margin-bottom: 2rem;
}
.p-chat-detail header h3 {
  margin-top: 2rem;
}
.p-chat-detail__children {
  margin-top: 2rem;
  padding-left: 5rem;
  border-top: 0.1rem solid #DAE0E6;
}
.p-chat-detail__children__item {
  padding: 2rem 0;
  border-bottom: 0.1rem solid #DAE0E6;
}
.p-chat-detail__children__item header {
  margin-bottom: 1rem;
}
.p-chat-detail__children__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.p-chat-detail__submit {
  margin: 2rem -2rem -2rem;
  padding: 2rem;
  background-color: #F2F3F4;
}
.p-chat-detail__submit.is-toukou {
  margin: -2rem -2rem 0;
  border-radius: 1rem 1rem 0 0;
}
.p-chat-detail__submit.is-reply {
  margin: 0;
  border-radius: 1rem;
}
.p-chat-detail .p-btns {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.p-chat-detail .c-form-file + span {
  display: block;
}
@media print, screen and (max-width: 768px) {
  .p-chat-detail .p-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-chat-detail .p-btns > * {
    width: 100%;
  }
  .p-chat-detail .c-form-file .c-btn {
    width: 100%;
  }
}
@media print, screen and (max-width: 599px) {
  .p-chat-detail {
    /* 返信 */
    /* 返信フォーム */
  }
  .p-chat-detail header {
    margin-bottom: 1rem;
  }
  .p-chat-detail header h3 {
    margin-top: 1rem;
  }
  .p-chat-detail__children {
    padding-left: 3rem;
  }
  .p-chat-detail__submit {
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 2rem;
    background-color: #F2F3F4;
  }
  .p-chat-detail__submit.is-toukou {
    margin: -1.5rem -1.5rem 0;
    border-radius: 1rem 1rem 0 0;
  }
  .p-chat-detail__submit.is-reply {
    margin: 0;
    border-radius: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-guide-nav : ご利用ガイドナビ
----------------------------------------------------------------------------------- */
.p-guide-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5em 2em;
  padding: 2rem;
  border-radius: 1rem;
  background-color: #F0F6FC;
}
.p-guide-nav__selected {
  font-weight: bold;
  text-decoration: none;
}
@media print, screen and (max-width: 768px) {
  .p-guide-nav {
    gap: 0 1.5em;
  }
}

/* --------------------------------------------------------------------------------
   .p-faq-nav : FAQナビ
----------------------------------------------------------------------------------- */
.p-faq-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5em 2em;
  padding: 2rem;
  border-radius: 1rem;
  background-color: #F0F6FC;
}
.p-faq-nav__selected {
  font-weight: bold;
  text-decoration: none;
}
@media print, screen and (max-width: 768px) {
  .p-faq-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-faq-nav .c-link {
    display: inline-block;
    margin-left: 1em;
    line-height: 1.5;
    text-indent: -0.6em;
  }
  .p-faq-nav .c-link::before {
    display: inline-block;
    width: 0.3em;
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------------
   .p-faq-list : FAQリスト
----------------------------------------------------------------------------------- */
.p-faq-list {
  /* IE対応 */
}
.p-faq-list__q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  font-weight: bold;
}
.p-faq-list__a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}
.p-faq-list__mark {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-faq-list__text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media all and (-ms-high-contrast: none) {
  .p-faq-list__q > *, .p-faq-list__a > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
/* --------------------------------------------------------------------------------
   .p-progress-step : プログレスステップ
----------------------------------------------------------------------------------- */
.p-progress-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 4rem;
}
.p-progress-step li {
  position: relative;
  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: 20%;
  height: 8rem;
  line-height: 1.5;
  text-align: center;
  border-radius: 1rem;
  background-color: #F2F3F4;
  /* カレントステップ */
}
.p-progress-step li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 113.5%;
  width: 1.4rem;
  height: 1.8rem;
  border: 1px solid transparent;
  border-width: 0.9rem 0 0.8rem 1.4rem;
  border-left-color: #000000;
}
.p-progress-step li em {
  display: block;
  font-size: 1.6rem;
  color: #007EB8;
}
.p-progress-step li span {
  display: block;
  font-size: 1.3rem;
  color: #007EB8;
}
.p-progress-step li.p-progress-step__current {
  background-color: #019CE1;
}
.p-progress-step li.p-progress-step__current em,
.p-progress-step li.p-progress-step__current span {
  color: #FFFFFF;
}
@media print, screen and (max-width: 599px) {
  .p-progress-step {
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .p-progress-step li {
    width: 25%;
    height: 11rem;
    padding: 1rem 0.5rem;
    border-radius: 0;
  }
  .p-progress-step li:not(:last-child) {
    border-right: 0.1rem solid #FFFFFF;
  }
  .p-progress-step li:not(:last-child)::after {
    display: none;
  }
  .p-progress-step li span {
    font-size: 1.1rem;
  }
  .p-progress-step li span br {
    display: none;
  }
}

/* --------------------------------------------------------------------------------
   .p-enq-header
----------------------------------------------------------------------------------- */
.p-enq-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: bold;
  font-size: 1.6rem;
}
.p-enq-header dt {
  margin-right: 2.4rem;
}
/* --------------------------------------------------------------------------------
   .p-enq-point-scale : アンケート（4-5件法）
----------------------------------------------------------------------------------- */
.p-enq-point-scale {
  position: relative;
  /* 設問 */
  /* ラジオボタンのセル */
  /* 確認画面のチェックマーク */
}
.p-enq-point-scale th,
.p-enq-point-scale td {
  text-align: center;
  vertical-align: middle;
}
.p-enq-point-scale thead {
  z-index: 1;
  position: sticky;
  top: -0.1rem;
  /* 上になぜか 1px の隙間があく対処 */
}
.p-enq-point-scale thead th {
  text-align: center;
  color: #0A416A;
  white-space: nowrap;
}
.p-enq-point-scale thead th:first-child {
  text-align: left;
}
.p-enq-point-scale thead th.p-enq-point-scale__your-answer {
  color: #FFFFFF;
  background-color: #007EB8;
}
.p-enq-point-scale tbody th {
  text-align: left;
}
.p-enq-point-scale tbody tr:nth-child(2n) th,
.p-enq-point-scale tbody tr:nth-child(2n) td {
  background-color: #FFFFFF;
}
.p-enq-point-scale tbody tr > :nth-child(2),
.p-enq-point-scale tbody tr > :nth-child(4),
.p-enq-point-scale tbody tr:nth-child(2n) > :nth-child(2),
.p-enq-point-scale tbody tr:nth-child(2n) > :nth-child(4) {
  background-color: #F2F3F4;
}
.p-enq-point-scale tbody tr td.p-enq-point-scale__your-answer,
.p-enq-point-scale tbody tr:nth-child(2n) td.p-enq-point-scale__your-answer {
  color: #007EB8;
  background-color: #F0F6FC;
}
.p-enq-point-scale__q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-enq-point-scale__q__num {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  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: 3.6rem;
  height: 3.6rem;
  margin-right: 1em;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 100%;
  background-color: #019CE1;
}
.p-enq-point-scale__q__text {
  font-weight: normal;
}
.p-enq-point-scale__clickable {
  cursor: pointer;
  /* PCではラベル文言非表示なのでマージンもゼロに */
}
.p-enq-point-scale__clickable:hover {
  background-color: #FFFAEA !important;
}
.p-enq-point-scale__clickable .c-form-radio.is-lg input[type=radio] + span,
.p-enq-point-scale__clickable .c-form-radio.is-lg input[type=radio] + span::before {
  margin-right: 0;
}
.p-enq-point-scale i.fa-check-circle {
  font-size: 3.2rem;
  color: #D8B844;
}
@media print, screen and (max-width: 768px) {
  .p-enq-point-scale {
    /* 設問 */
  }
  .p-enq-point-scale thead th,
.p-enq-point-scale tbody th {
    font-size: 1.2rem;
  }
  .p-enq-point-scale__q__num {
    width: 2rem;
    height: 2rem;
  }
  .p-enq-point-scale__q__text {
    font-weight: normal;
  }
}
@media print, screen and (max-width: 599px) {
  .p-enq-point-scale {
    display: block;
    /* SPではラベル文言表示するのでマージン設定 */
  }
  .p-enq-point-scale thead {
    display: none;
  }
  .p-enq-point-scale tbody {
    display: block;
  }
  .p-enq-point-scale tbody tr {
    display: block;
    margin-bottom: 2rem;
    border-radius: 1rem;
    border: 0.1rem solid #DAE0E6;
  }
  .p-enq-point-scale tbody td,
.p-enq-point-scale tbody th {
    display: block;
    text-align: left;
    border: 0;
    background-color: transparent !important;
  }
  .p-enq-point-scale tbody th {
    border-bottom: 0.1rem solid #DAE0E6;
    background-color: #F2F3F4 !important;
  }
  .p-enq-point-scale tbody td {
    padding: 0 2rem;
  }
  .p-enq-point-scale tbody td.p-enq-point-scale__your-answer {
    padding: 2rem;
    vertical-align: middle;
    line-height: 1;
    background-color: #F0F6FC !important;
  }
  .p-enq-point-scale tbody td .fas.fa-check-circle {
    display: inline-block;
    margin: 1rem;
  }
  .p-enq-point-scale .c-form-radio.is-lg input[type=radio] + span::before {
    margin-right: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-enq-choose-one : アンケート（択一式）
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   .p-chart-leader : 診断結果（リーダー像）
----------------------------------------------------------------------------------- */
.p-chart-leader {
  width: 100%;
  max-width: 75rem;
  height: 25rem;
  margin: 0 auto;
}
/* --------------------------------------------------------------------------------
   .p-chart-jissen : 診断結果（実践度）＆アンケート結果
----------------------------------------------------------------------------------- */
.p-chart-jissen {
  position: relative;
  width: 100%;
  max-width: 55rem;
  height: 35rem;
  margin: 0 auto;
  padding: 3rem;
  /* アンケート結果の凡例 */
}
.p-chart-jissen.is-enq-1, .p-chart-jissen.is-enq-2 {
  margin-top: 3rem;
}
.p-chart-jissen__label {
  position: absolute;
  font-size: 1.3rem;
  line-height: 1.3;
  white-space: nowrap;
}
.p-chart-jissen.is-enq-1 .p-chart-jissen__label.is-1, .p-chart-jissen.is-enq-2 .p-chart-jissen__label.is-1 {
  white-space: normal;
  text-align: right;
}
.p-chart-jissen__legend {
  position: absolute;
  left: 0;
  top: -4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  width: 100%;
  font-size: 1.3rem;
  line-height: 1.3;
}
.p-chart-jissen__legend li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.p-chart-jissen__legend li::before {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 80%;
  border: 0.2rem solid #D34C4C;
  background-color: rgba(211, 76, 76, .2);
}
.p-chart-jissen__legend li.is-1::before {
  border-color: #019CE1;
  background-color: rgba(1, 156, 225, .2);
}
@media print, screen and (max-width: 599px) {
  .p-chart-jissen {
    height: calc(100vw - 10rem);
  }
}
@media print, screen and (max-width: 350px) {
  .p-chart-jissen {
    /* アンケート結果の凡例 */
  }
  .p-chart-jissen__label {
    position: absolute;
    font-size: 1.1rem;
    line-height: 1.3;
  }
  .p-chart-jissen__legend {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-badge-list : バッジ一覧
----------------------------------------------------------------------------------- */
.p-badge-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.p-badge-list > li {
  width: 50%;
  padding: 1rem;
}
.p-badge-list a {
  color: #343A40;
}
.p-badge-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  padding: 1.5rem 1.5rem 1.5rem 0;
  text-decoration: none;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.p-badge-list__item:hover {
  border-color: #019CE1;
}
.p-badge-list__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 12rem;
  text-align: center;
}
.p-badge-list__icon img {
  width: 6rem;
}
.p-badge-list__text {
  line-height: 1.5;
}
.p-badge-list__text h3 {
  font-size: 1.6rem;
}
@media print, screen and (max-width: 599px) {
  .p-badge-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-badge-list > li {
    width: 100%;
    padding: 0.5rem 0;
  }
  .p-badge-list__item {
    padding: 1rem 1rem 1rem 0;
  }
  .p-badge-list__icon {
    width: 8rem;
  }
  .p-badge-list__icon img {
    width: 5rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-badge-detail : バッジ詳細
----------------------------------------------------------------------------------- */
.p-badge-detail {
  /* 回数系のバッジの回数リスト */
}
.p-badge-detail .l-modal__container {
  width: 64rem;
}
.p-badge-detail__badge {
  position: relative;
  text-align: center;
}
.p-badge-detail__badge img {
  width: 12rem;
}
.p-badge-detail__badge__num {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 4.8rem;
  font-weight: bold;
  line-height: 1;
  color: #D8B844;
}
.p-badge-detail p {
  text-align: center;
}
.p-badge-detail__counter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40rem;
  margin: auto;
}
.p-badge-detail__counter > li {
  position: relative;
  padding: 1rem;
  text-align: center;
}
.p-badge-detail__counter img {
  width: 7rem;
}
.p-badge-detail__counter__num {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1;
  color: #FFFFFF;
}
@media print, screen and (max-width: 599px) {
  .p-badge-detail {
    /* 回数系のバッジの回数リスト */
  }
  .p-badge-detail .l-modal__container {
    width: 100%;
  }
  .p-badge-detail__counter {
    width: 100%;
  }
  .p-badge-detail__counter img {
    width: 5rem;
  }
  .p-badge-detail__counter__num {
    font-size: 2.4rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-your-stage : バッジ獲得数とステージ
----------------------------------------------------------------------------------- */
.p-your-stage {
  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;
  padding: 2rem;
  text-align: center;
  border-radius: 1rem;
  background-color: #F0F6FC;
}
.p-your-stage h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  color: #007EB8;
}
.p-your-stage__stage {
  margin: 1rem 0;
  font-size: 1.6rem;
  font-weight: bold;
}
.p-your-stage__stage > * {
  vertical-align: middle;
}
.p-your-stage p {
  margin: 0;
}
@media print, screen and (max-width: 1024px) {
  .page-bonus .p-your-stage {
    margin-left: -3rem;
  }
}
@media print, screen and (max-width: 599px) {
  .page-bonus .p-your-stage {
    margin-left: 0;
  }
  .p-your-stage h3 {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-stage-tbl : ステージ説明
----------------------------------------------------------------------------------- */
.p-stage-tbl thead th {
  padding: 0.5rem 2.5rem;
  text-align: left;
  white-space: nowrap;
  color: #7A838C;
  border: 0;
  border-bottom: 0.1rem solid #DAE0E6;
  background-color: transparent;
}
.p-stage-tbl tbody th,
.p-stage-tbl tbody td {
  padding: 0.5rem 2.5rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  vertical-align: middle;
  border: 0;
  border-bottom: 0.1rem solid #DAE0E6;
}
.p-stage-tbl tbody th {
  background-color: #F0F6FC;
}
.p-stage-tbl tbody th img {
  margin: 0 2rem;
  vertical-align: middle;
}
.p-stage-tbl tbody td {
  color: #007EB8;
}
@media print, screen and (max-width: 1024px) {
  .p-stage-tbl tbody th,
.p-stage-tbl tbody td {
    padding: 0.5rem 1rem;
  }
  .p-stage-tbl tbody th {
    text-align: center;
  }
  .p-stage-tbl tbody th img {
    display: block;
    width: 5rem;
    margin: 0 auto;
  }
  .p-stage-tbl tbody th span {
    display: block;
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-bonus-list : ボーナスコンテンツ一覧
----------------------------------------------------------------------------------- */
.p-bonus-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  margin: 0 auto;
}
.p-bonus-list > li {
  width: 33.333%;
  padding: 0.5rem;
}
.p-bonus-list__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
}
.p-bonus-list__item > img {
  width: 100%;
}
.p-bonus-list__item.is-locked {
  pointer-events: none;
}
.p-bonus-list__locked {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  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;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  background-color: rgba(121, 162, 201, .8);
  text-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .25);
}
.p-bonus-list__locked img {
  position: absolute;
  left: 1rem;
  top: 1rem;
}
.p-bonus-list__locked i {
  margin-bottom: 1rem;
  font-size: 2.4rem;
}
@media print, screen and (max-width: 599px) {
  .p-bonus-list > li {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------------
   .p-tantou-msg : 担当者からのメッセージ
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   .p-osusume-box : おすすめボックス
----------------------------------------------------------------------------------- */
.p-osusume-box {
  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;
  padding: 2rem;
  text-decoration: none;
  border: 0.1rem solid #DAE0E6;
  border-radius: 1rem;
  background-color: #FFFFFF;
  /* 学習テーマの場合 */
}
.p-osusume-box:hover {
  -webkit-box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, .1);
          box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, .1);
}
.p-osusume-box h3 {
  font-size: 1.4rem;
}
.p-osusume-box p {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #343A40;
}
.p-osusume-box__more {
  margin-left: 0.5em;
  text-decoration: underline;
  color: #007EB8;
}
.p-osusume-box__img img {
  height: 2.8rem;
}
.p-osusume-box .c-btn {
  min-width: 0;
  padding: 0.7rem;
}
.p-osusume-box.is-theme .p-osusume-box__img img {
  height: 6rem;
  border-radius: 0.5rem;
}
.p-osusume-box.is-theme h3 {
  width: 100%;
  line-height: 1.5;
  text-align: center;
}
.p-osusume-box.is-theme h3 small {
  display: block;
  font-weight: normal;
}
.p-osusume-box.is-theme h3 span {
  display: block;
}
@media print, screen and (max-width: 768px) {
  .p-osusume-box {
    padding: 1rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-osusume-box {
    padding: 2rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-osusume-theme : おすすめテーマ
----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   .p-plan-usage : 学習計画の使い方
----------------------------------------------------------------------------------- */
.p-plan-usage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: #F2F3F4;
}
.p-plan-usage h4 {
  padding-right: 3rem;
  font-size: 1.6rem;
  white-space: nowrap;
  color: #0A416A;
}
.p-plan-usage ol {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
@media print, screen and (max-width: 599px) {
  .p-plan-usage {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 1rem;
  }
  .p-plan-usage h4 {
    margin-right: 0;
    font-size: 2rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-plan-list : 学習計画リスト
----------------------------------------------------------------------------------- */
.p-plan-list {
  position: relative;
  margin: 2rem 0;
  border: 1px solid #DAE0E6;
  border-radius: 1rem;
  background-color: #FFFFFF;
  /* 学習月未設定のテーマがある場合 */
  /* 計画より遅れているテーマがある場合 */
  /* 過去月を表示 */
  /* 月セクション */
  /* ドラッグ中のアイテム */
  /* 追加ボタン */
  /* スマホ用のフローティングボタン */
  /* ドラッグ中のプレースホルダ */
}
.p-plan-list.is-to-be-scheduled > h3 {
  background-color: #D8B844;
}
.p-plan-list.is-behind > h3 {
  background-color: #D34C4C;
}
.p-plan-list__show-past-months {
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0.3rem;
}
.p-plan-list__show-past-months span {
  color: #FFFFFF;
}
.p-plan-list__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
  padding: 1rem;
  /* ドラッグオーバー中のスタイル */
  /* 年月 */
  /* 過去月 */
}
.p-plan-list__section.is-hide {
  display: none;
}
.p-plan-list__section.is-dragover:not(.is-behind) {
  outline: 0.3rem dashed #DAE0E6;
  border-radius: 1rem;
  background-color: #F0F6FC;
}
.p-plan-list__section > h4 {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 2rem;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  /* ライン */
}
.p-plan-list__section > h4 span {
  display: block;
  font-size: 2rem;
  font-weight: normal;
  color: #0A416A;
}
.p-plan-list__section > h4 em {
  display: block;
  font-size: 2.4rem;
  color: #0A416A;
}
.p-plan-list__section > h4::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 7rem;
  width: 0.5rem;
  height: 300rem;
  background-color: #DAE0E6;
}
.p-plan-list__section.is-past {
  display: none;
  margin: -1rem -1rem 0;
  padding: 2rem;
  background-color: #E9ECEF;
}
.p-plan-list__section.is-past > h4 span,
.p-plan-list__section.is-past > h4 em {
  color: #7A838C;
}
.p-plan-list .ui-draggable-dragging {
  z-index: 2;
}
.p-plan-list__add {
  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: 21rem;
  height: 100%;
  min-height: 24rem;
  text-align: center;
  outline: 0;
  border: 0;
  border-radius: 0.5rem;
  background-color: #F2F3F4;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.p-plan-list__add::before {
  content: "\f055";
  margin-bottom: 1rem;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 5rem;
  line-height: 1;
  color: #019CE1;
}
.p-plan-list__add:hover {
  background-color: #E9ECEF;
}
.p-plan-list__sp-add-btn, .p-plan-list__sp-toggle-btn {
  display: none;
}
.p-plan-list .ui-state-highlight {
  border: 0.3rem dashed #DAE0E6;
  border-radius: 1rem;
  background-color: #F0F6FC;
}
@media print, screen and (max-width: 1280px) {
  .p-plan-list {
    /* 月セクション */
    /* 使い方 */
  }
  .p-plan-list__section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* 年月 */
  }
  .p-plan-list__section > h4 {
    margin-bottom: 1rem;
    text-align: left;
  }
  .p-plan-list__section > h4 span,
.p-plan-list__section > h4 em {
    display: inline-block;
    margin-right: 1rem;
  }
  .p-plan-list__how-to-use {
    max-width: none;
    margin-right: 0;
    margin-bottom: 2rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-plan-list {
    margin: 2rem -1rem !important;
    border: 0;
    border-radius: 0 !important;
    /* ボックスタイトル */
    /* 学習月未設定のテーマがある場合 */
    /* 計画より遅れているテーマがある場合 */
    /* 月セクション */
    /* 年月別リストの開閉（表示制御自体は js で行う） */
    /* ドラッグ中のアイテム */
    /* 追加ボタン */
    /* スマホ用のフローティングボタン */
  }
  .p-plan-list .c-box__title {
    z-index: 1;
    position: sticky;
    top: 0;
    border-radius: 0;
  }
  .p-plan-list.is-monthly .c-box__title {
    position: static;
    /* 「あなたの学習計画」タイトルは過去月を表示CBとのズレ解消のため sticky 解除（結局年月タイトルで隠れるので sticky である必要なし） */
    border-radius: 0;
  }
  .p-plan-list.is-to-be-scheduled {
    margin-bottom: 0 !important;
    background-color: #FFFAEA;
  }
  .p-plan-list.is-behind {
    margin-bottom: 0 !important;
    background-color: #FAF2F2;
  }
  .p-plan-list.is-monthly {
    margin-top: 0 !important;
    background-color: #F0F6FC;
  }
  .p-plan-list__section {
    position: relative;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0 1rem;
    /* 年月 */
    /* ドラッグオーバー中のスタイル */
    /* 過去月 */
  }
  .p-plan-list__section > h4 {
    z-index: 1;
    position: sticky;
    top: 0;
    margin: -1rem -1rem 0;
    padding: 1rem;
    cursor: pointer;
    border-bottom: 0.1rem solid #F0F6FC;
    background-color: #79A2C9;
  }
  .p-plan-list__section > h4 span {
    color: #FFFFFF;
  }
  .p-plan-list__section > h4 em {
    color: #FFFFFF;
  }
  .p-plan-list__section > h4::before {
    content: "\f107";
    position: absolute;
    right: 1.5rem;
    top: 0;
    bottom: 0;
    height: 2.4rem;
    margin: auto;
    font-family: "Font Awesome 5 Free";
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF;
  }
  .p-plan-list__section > h4.is-open::before {
    content: "\f106";
    color: #D8B844;
  }
  .p-plan-list__section.is-dragover:not(.is-behind) {
    border-radius: 0;
    background-color: #FFFAEA;
  }
  .p-plan-list__section.is-dragover:not(.is-behind) > h4 {
    background-color: #D8B844;
  }
  .p-plan-list__section.is-past {
    margin: 0 -1rem 1rem;
    padding: 0 1rem;
  }
  .p-plan-list__section.is-past > h4 {
    background-color: #949DA6;
  }
  .p-plan-list__section.is-past > h4 span,
.p-plan-list__section.is-past > h4 em {
    color: #FFFFFF;
  }
  .p-plan-list.is-monthly .p-theme-card-list {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
  .p-plan-list.is-monthly .p-plan-list__section.is-open .p-theme-card-list {
    display: block;
  }
  .p-plan-list .ui-draggable-dragging {
    opacity: 0.3;
  }
  .p-plan-list__add {
    width: 100%;
    height: 8rem;
    min-height: 0;
    padding-top: 0.5rem;
    font-weight: bold;
    color: #79A2C9;
    border: 0.2rem dashed #79A2C9;
    background-color: #FFFFFF;
  }
  .p-plan-list__add::before {
    margin-bottom: 0.5rem;
    font-size: 3rem;
  }
  .p-plan-list__sp-add-btn {
    z-index: 1;
    position: fixed;
    left: calc(50% - 12rem);
    bottom: -10rem;
    display: block;
    width: 24rem;
    height: 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: #FFFFFF;
    outline: 0;
    border: 0.2rem solid #FFFFFF;
    border-radius: 5rem;
    background-color: #007EB8;
    -webkit-box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, .15);
            box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, .15);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .p-plan-list__sp-add-btn::before {
    content: "+";
    margin-right: 0.7rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    line-height: 1;
    color: #FFFFFF;
  }
  .p-plan-list__sp-add-btn.is-active {
    bottom: 2rem;
  }
  .p-plan-list__sp-toggle-btn {
    z-index: 1;
    position: fixed;
    left: calc(50% - 8.5rem);
    bottom: -10rem;
    display: block;
    width: 17rem;
    height: 3.2rem;
    font-size: 1.2rem;
    color: #007EB8;
    outline: 0;
    border: 0;
    border-radius: 3.2rem;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, .15);
            box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, .15);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .p-plan-list__sp-toggle-btn.is-active {
    bottom: 8rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-plan-alert : 学習計画遅れ＆計画未設定のメッセージ
----------------------------------------------------------------------------------- */
.p-plan-alert {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 2rem 0;
}
.p-plan-alert > * {
  margin: 0;
  margin-right: 1rem;
}
.p-plan-alert > *:last-child {
  margin: 0;
}
.p-plan-alert:first-child {
  margin-top: 0;
}
.p-plan-alert:last-child {
  margin-bottom: 0;
}
@media print, screen and (max-width: 599px) {
  .p-plan-alert {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-plan-alert > * {
    margin: 0 0 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-theme-filter : テーマフィルタ
----------------------------------------------------------------------------------- */
.p-theme-filter {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1.5rem 3rem;
  background-color: #F2F3F4;
}
.p-theme-filter > h2 {
  margin-right: 5rem;
  font-size: 1.8rem;
  color: #007EB8;
  white-space: nowrap;
}
.p-theme-filter__clear {
  position: absolute;
  left: 3rem;
  top: 6.5rem;
  padding: 0;
  outline: 0;
  border: 0;
  font-size: 1.4rem;
  text-decoration: underline;
  color: #007EB8;
  background-color: transparent;
}
.p-theme-filter__clear:hover {
  text-decoration: none;
}
.p-theme-filter__conditions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
}
.p-theme-filter__conditions dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.2rem 3rem 0.2rem 0;
}
.p-theme-filter__conditions dl dt {
  margin-right: 1em;
  font-weight: bold;
  white-space: nowrap;
}
.p-theme-filter__conditions a {
  text-decoration: none;
}
.p-theme-filter__conditions a:hover {
  color: #D8B844;
}
.p-theme-filter__checkbox input[type=checkbox] + span {
  background-color: #FFFFFF;
}
@media print, screen and (max-width: 1024px) {
  .p-theme-filter {
    position: relative;
    display: block;
    width: 100%;
    height: 4rem;
    overflow: hidden;
    padding: 0;
    background-color: #007EB8;
    /* h2をボタンとして使う */
    /* クリアボタン */
    /* 絞り込み条件 */
    /* 表示中 */
  }
  .p-theme-filter > h2 {
    position: relative;
    width: 100%;
    font-size: 1.4rem;
    line-height: 4rem;
    text-align: center;
    color: #FFFAEA;
    cursor: pointer;
  }
  .p-theme-filter > h2::after {
    content: " \f107";
    margin-left: 0.5rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    line-height: 1;
  }
  .p-theme-filter > h2 .u-sp-hide {
    display: none !important;
  }
  .p-theme-filter > h2 .u-pc-hide {
    display: block !important;
  }
  .p-theme-filter__clear {
    display: none;
    left: auto;
    right: 1rem;
    top: 1rem;
    font-size: 1.2rem;
    color: #FFFFFF;
  }
  .p-theme-filter__conditions {
    padding: 0 2rem 2rem;
  }
  .p-theme-filter__conditions dl dt {
    color: #FFFFFF;
  }
  .p-theme-filter__conditions dl dt i.fas {
    color: #FFFFFF;
  }
  .p-list-add.is-open-filter .p-theme-filter > h2::after {
    content: " \f106";
  }
  .p-list-add.is-open-filter .p-theme-filter__clear {
    display: block;
  }
}
@media print, screen and (max-width: 599px) {
  .p-theme-filter__conditions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 2rem 2rem;
  }
  .p-theme-filter__conditions dl dt {
    margin: 0;
    min-width: 7rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-selected-theme : テーマフィルタ
----------------------------------------------------------------------------------- */
.p-selected-theme {
  position: sticky;
  bottom: 7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1.5rem 3rem;
  line-height: 2;
  background-color: #0A416A;
  /* テーマリスト */
  /* 削除ボタン */
}
.p-selected-theme > h2 {
  margin-right: 3rem;
  font-size: 1.4rem;
  color: #D8B844;
  white-space: nowrap;
}
.p-selected-theme__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
}
.p-selected-theme__list li {
  margin-right: 1em;
}
.p-selected-theme__list a {
  font-size: 1.4rem;
  color: #FFFFFF;
}
.p-selected-theme__delete {
  padding: 0;
  outline: 0;
  border: 0;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, .7);
  background-color: transparent;
}
.p-selected-theme__delete:hover {
  color: #D8B844;
}
@media print, screen and (max-width: 1024px) {
  .p-selected-theme {
    z-index: 101;
    position: fixed;
    left: 10rem;
    bottom: 7.5rem;
    width: calc(100% - 20rem);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 0;
    padding: 0;
    background-color: transparent;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /* h2をボタンとして使う */
    /* 表示中 */
  }
  .p-selected-theme h2 {
    position: absolute;
    left: calc(50% - 7rem);
    top: -5rem;
    width: 14rem !important;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 3rem;
    text-align: center;
    cursor: pointer;
    border-radius: 3rem;
    background-color: #0A416A;
    -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, .2);
            box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, .2);
  }
  .p-selected-theme h2::after {
    content: "のテーマ \f106";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    line-height: 1;
  }
  .p-selected-theme__list {
    display: none;
  }
  .p-list-add.is-open-selected .p-selected-theme {
    bottom: 7rem;
    height: calc(100% - 14rem);
    padding: 0 0 0;
    border-radius: 1rem;
    background-color: #0A416A;
    -webkit-box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2);
            box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2);
  }
  .p-list-add.is-open-selected .p-selected-theme h2 {
    position: static;
    width: 100% !important;
    font-size: 1.4rem;
    line-height: 4rem;
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: transparent;
  }
  .p-list-add.is-open-selected .p-selected-theme h2::after {
    content: "のテーマ \f107";
  }
  .p-list-add.is-open-selected .p-selected-theme__list {
    position: relative;
    display: block;
    overflow-y: auto;
    height: calc(100% - 4rem);
    padding: 0 2rem 2rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-selected-theme {
    left: 1rem;
    width: calc(100% - 2rem);
    /* 表示中 */
  }
  .p-list-add.is-open-selected .p-selected-theme {
    bottom: 2rem;
    height: calc(100% - 4rem);
  }
}

/* --------------------------------------------------------------------------------
   .p-chart-progress : 学習実績グラフ
----------------------------------------------------------------------------------- */
.p-chart-progress {
  position: relative;
  width: 100%;
  height: 40rem;
  padding: 0 2rem;
  overflow-x: auto;
  /* 凡例 */
  /* ツールチップ */
}
.p-chart-progress__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.p-chart-progress__legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  font-size: 1.3rem;
  line-height: 1.3;
}
.p-chart-progress__legend li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.p-chart-progress__legend li.is-0::before {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 0.3rem;
  background-color: #80C35D;
}
.p-chart-progress__legend li.is-0::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: calc(50% - 0.7rem);
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border: 0.2rem solid #80C35D;
  border-radius: 100%;
  background-color: #FFFFFF;
}
.p-chart-progress__legend li.is-1::before {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 80%;
  background-color: #019CE1;
}
.p-chart-progress__theme-tip {
  position: absolute;
  width: 30rem;
  padding: 2rem 1rem 2rem 2rem;
  line-height: 1.5;
  color: #FFFFFF;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, .9);
  -webkit-box-shadow: 0 1rem 1rem rgba(0, 0, 0, .15);
          box-shadow: 0 1rem 1rem rgba(0, 0, 0, .15);
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
.p-chart-progress__theme-tip__arrow {
  position: absolute;
  left: -2rem;
  top: 0;
  width: 4rem;
  height: 4rem;
  border: 2rem solid transparent;
  border-top-color: rgba(0, 0, 0, .9);
}
.p-chart-progress__theme-tip.is-left .p-chart-progress__theme-tip__arrow {
  left: calc(100% - 2rem);
}
.p-chart-progress__theme-tip__inner {
  position: relative;
  height: 100%;
  max-height: 40rem;
  padding-right: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.p-chart-progress__theme-tip__inner::-webkit-scrollbar {
  width: 0.6rem;
}
.p-chart-progress__theme-tip__inner::-webkit-scrollbar-track {
  border-radius: 0.6rem;
  background-color: rgba(255, 255, 255, .5);
}
.p-chart-progress__theme-tip__inner::-webkit-scrollbar-track:hover {
  background-color: rgba(255, 255, 255, .65);
}
.p-chart-progress__theme-tip__inner::-webkit-scrollbar-thumb {
  border-radius: 0.6rem;
  background-color: #007EB8;
}
.p-chart-progress__theme-tip__inner::-webkit-scrollbar-thumb:hover {
  background-color: #019CE1;
}
.p-chart-progress__theme-tip header {
  margin-bottom: -3rem;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: right;
}
.p-chart-progress__theme-tip a {
  color: #FFFFFF;
}
.p-chart-progress__theme-tip dl {
  margin: 2rem 0 0;
}
.p-chart-progress__theme-tip dl.is-plan dt {
  color: #80C35D;
}
.p-chart-progress__theme-tip dl.is-completed dt {
  color: #019CE1;
}
.p-chart-progress__theme-tip dl.is-studying dt {
  color: #D8B844;
}
.p-chart-progress__theme-tip dt {
  font-weight: bold;
}
.p-chart-progress__theme-tip dd {
  font-size: 1.4rem;
}
.p-chart-progress__theme-tip dd li {
  margin: 0.5em 0;
}
@media print, screen and (max-width: 768px) {
  .p-chart-progress {
    padding: 0;
    /* ツールチップ */
  }
  .p-chart-progress__theme-tip {
    position: fixed;
    left: 5%;
    top: 2rem;
    width: 90%;
    padding: 2rem 1rem 2rem 2rem;
    line-height: 1.5;
    color: #FFFFFF;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 1rem 1rem rgba(0, 0, 0, .15);
            box-shadow: 0 1rem 1rem rgba(0, 0, 0, .15);
    -webkit-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
  }
  .p-chart-progress__theme-tip__arrow {
    display: none;
  }
  .p-chart-progress__theme-tip__inner {
    max-height: 30rem;
  }
}
/* --------------------------------------------------------------------------------
   .p-calendar : カレンダー
----------------------------------------------------------------------------------- */
.p-calendar {
  /* ヘッダ */
  /* 凡例 */
  /* アイコンリスト */
  /* アイコン */
  /* カレンダーセル */
  /* フッタ */
  /* ツールチップ */
  /* 土日はツールチップを逆に出す */
}
.p-calendar header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem;
  border: 0.1rem solid #DAE0E6;
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
}
.p-calendar__month {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-calendar__month h3 {
  margin-right: 2rem;
  font-size: 2rem;
  line-height: 1.5;
}
.p-calendar__month__prev, .p-calendar__month__next {
  padding: 0;
  min-width: 5rem;
  margin-left: 0.5rem;
}
.p-calendar__month__prev::after, .p-calendar__month__prev::before, .p-calendar__month__next::after, .p-calendar__month__next::before {
  margin: 0;
  padding: 0;
}
.p-calendar__month__current {
  min-width: 7rem;
  margin-left: 1rem;
}
.p-calendar__legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  margin-left: auto;
  font-size: 1.2rem;
  line-height: 1.5;
}
.p-calendar__legend > li {
  margin-left: 1.5rem;
}
.p-calendar__legend ul {
  margin: 0;
}
.p-calendar__icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  min-height: 4rem;
  margin: 0;
  line-height: 1;
}
.p-calendar__icon {
  width: 2rem;
  padding: 0;
  text-align: center;
  outline: 0;
  line-height: 2rem;
  border: 0;
  background-color: transparent;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.p-calendar__icon.is-login, .p-calendar__icon.is-study {
  color: #565E66;
}
.p-calendar__icon.is-deadline-theme {
  color: #D34C4C;
}
.p-calendar__icon.is-deadline-other {
  color: #866EC8;
}
.p-calendar__icon.is-send-theme {
  color: #019CE1;
}
.p-calendar__icon.is-send-other {
  color: #80C35D;
}
.p-calendar__icon.is-passed {
  color: #D8B844;
}
.p-calendar button.p-calendar__icon:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.p-calendar table thead th {
  width: 14.29%;
  padding: 0.2rem 1rem;
  font-size: 1.3rem;
  text-align: right;
  color: #7A838C;
  background-color: #FFFFFF;
}
.p-calendar table thead th.p-calendar__sat {
  color: #007EB8;
  background-color: #F0F6FC;
}
.p-calendar table thead th.p-calendar__sun {
  color: #C73D3D;
  background-color: #FAF2F2;
}
.p-calendar table tbody td {
  position: relative;
  padding: 2.5rem 0.5rem 0.7rem;
  vertical-align: bottom;
  color: #7A838C;
  background-color: #F2F3F4;
}
.p-calendar__date {
  position: absolute;
  right: 0.8rem;
  top: 0;
}
.p-calendar footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2rem;
  line-height: 1.8;
  color: #FFFFFF;
  border-radius: 0 0 1rem 1rem;
  background-color: #0A416A;
}
.p-calendar footer > dl {
  width: 50%;
  margin: 0;
}
.p-calendar footer a {
  color: #FFFFFF;
}
.p-calendar__this-month dt {
  font-weight: bold;
  color: #80C35D;
}
.p-calendar__expire dt {
  font-weight: bold;
  color: #D8B844;
}
.p-calendar__tip-wrapper {
  position: relative;
}
.p-calendar__tip {
  z-index: 35;
  display: none;
  position: absolute;
  left: calc(100% + 1rem);
  top: -1rem;
  width: 25rem;
  padding: 1rem 1.5rem;
  text-align: left;
  color: #FFFFFF;
  border-radius: 1rem;
  background: #000000;
  -webkit-box-shadow: 0 1rem 1rem rgba(0, 0, 0, .1);
          box-shadow: 0 1rem 1rem rgba(0, 0, 0, .1);
}
.p-calendar__tip a {
  color: #FFFFFF;
}
.p-calendar__tip::after {
  content: "";
  position: absolute;
  left: -2rem;
  top: 1.6rem;
  width: 2rem;
  height: 2rem;
  border: 1rem solid transparent;
  border-right: 1rem solid #000000;
}
.p-calendar tr td:nth-child(6) .p-calendar__tip,
.p-calendar tr td:nth-child(7) .p-calendar__tip {
  left: auto;
  right: calc(100% + 1rem);
}
.p-calendar tr td:nth-child(6) .p-calendar__tip::after,
.p-calendar tr td:nth-child(7) .p-calendar__tip::after {
  left: auto;
  right: -2rem;
  border-color: transparent;
  border-left-color: #000000;
}
.p-calendar__tip-wrapper:hover .p-calendar__tip {
  display: block;
}
@media print, screen and (max-width: 1024px) {
  .p-calendar {
    margin: 0 -1rem -3rem;
    /* ヘッダ */
    /* 凡例 */
    /* フッタ */
  }
  .p-calendar header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding: 0 1rem;
    border: 0;
  }
  .p-calendar__month {
    margin-top: 1rem;
    padding: 1rem 0 1.5rem;
  }
  .p-calendar__month h3 {
    margin-right: 1rem;
    white-space: nowrap;
  }
  .p-calendar__month__prev, .p-calendar__month__next, .p-calendar__month__current {
    width: 4rem !important;
    min-width: 0;
    margin-left: 0.5rem;
  }
  .p-calendar__legend {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.3rem 1rem;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border: 0.1rem solid #DAE0E6;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
  }
  .p-calendar__legend > li {
    margin-left: 0;
  }
  .p-calendar__legend ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    gap: 0.3rem 1rem;
  }
  .p-calendar__legend .p-calendar__icon {
    width: 1.2rem;
    margin-right: 0.5rem;
  }
  .p-calendar footer {
    border-radius: 0;
  }
}
@media print, screen and (max-width: 768px) {
  .p-calendar {
    /* アイコン */
    /* カレンダーセル */
    /* ツールチップ */
    /* PCの土日設定を上書き */
  }
  .p-calendar button.p-calendar__icon:hover {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  .p-calendar table thead th {
    padding: 0.5rem;
  }
  .p-calendar table tr > :first-child {
    border-left: 0;
  }
  .p-calendar table tr > :last-child {
    border-right: 0;
  }
  .p-calendar__tip {
    position: fixed;
    left: 5%;
    top: 2rem;
    width: 90%;
    padding: 2rem;
    line-height: 2;
  }
  .p-calendar__tip::after {
    display: none;
    left: calc(50% - 1rem);
    top: 100%;
    border-color: transparent;
    border-top-color: #000000;
  }
  .p-calendar tr td:nth-child(6) .p-calendar__tip,
.p-calendar tr td:nth-child(7) .p-calendar__tip {
    left: 5%;
    right: auto;
  }
}
@media print, screen and (max-width: 599px) {
  .p-calendar {
    /* 凡例 */
    /* カレンダーセル */
    /* フッタ */
  }
  .p-calendar__legend {
    letter-spacing: -0.05em;
  }
  .p-calendar__legend ul {
    gap: 0.3rem 0.5rem;
  }
  .p-calendar__legend .p-calendar__icon {
    margin-right: 0;
  }
  .p-calendar table tbody td {
    padding: 2.2rem 0 0.7rem;
  }
  .p-calendar footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-calendar footer > dl {
    width: 100%;
  }
  .p-calendar footer > dl:not(:last-child) {
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-legend : 凡例リスト
----------------------------------------------------------------------------------- */
.p-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 3rem 0;
  margin-left: auto;
  font-size: 1.4rem;
  line-height: 1.5;
}
.p-legend:first-child {
  margin-top: 0;
}
.p-legend:last-child {
  margin-bottom: 0;
}
.p-legend > li {
  margin-right: 1.5rem;
}
@media print, screen and (max-width: 768px) {
  .p-legend {
    font-size: 1.2rem;
  }
}
@media print, screen and (max-width: 599px) {
  .p-legend {
    display: block;
  }
  .p-legend li:not(:last-child) {
    margin-bottom: 0.5rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-progress-table : 学習実績一覧
----------------------------------------------------------------------------------- */
table.p-progress-table {
  position: relative;
  margin-top: 1rem;
  border-bottom: 0 !important;
  /* datatables のスタイルの上書き */
}
table.p-progress-table thead {
  position: sticky;
  top: 0;
}
table.p-progress-table thead th {
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: normal !important;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
table.p-progress-table thead th:nth-child(2) {
  text-align: left;
}
table.p-progress-table tbody {
  /* テーマ名 */
  /* その他 */
  /* 予定月未設定の行 */
  /* 期限遅れの行 */
  /* NOTE: 期限遅れの行のスタイル定義は、必ず予定月未設定の行のそれより後ろにすること。is-behind と is-not-scheduled 両方が設定されている場合 is-behind のスタイルを優先するため */
}
table.p-progress-table tbody th {
  padding: 1rem;
}
table.p-progress-table tbody th a {
  display: block;
  color: #343A40;
  text-decoration: none;
}
table.p-progress-table tbody th a:hover {
  color: #007EB8;
}
table.p-progress-table tbody th small {
  display: block;
  font-weight: normal;
}
table.p-progress-table tbody th span {
  display: block;
}
table.p-progress-table tbody td {
  padding: 1rem;
  text-align: right;
  vertical-align: middle;
  font-size: 1.2rem;
  text-align: center;
  color: #7A838C;
  background-color: #FFFFFF;
  /* サムネール */
  /* ステータス */
  /* レポート、合格証 */
  /* 学習予定月 */
}
table.p-progress-table tbody td.p-progress-table__thumb {
  width: 12rem;
  background-size: cover;
}
table.p-progress-table tbody td.p-progress-table__thumb > div {
  border: 1px solid red;
  height: 100%;
}
table.p-progress-table tbody td.p-progress-table__thumb img {
  width: 12.8rem;
}
table.p-progress-table tbody td.p-progress-table__status {
  font-size: 1.2rem;
}
table.p-progress-table tbody td.p-progress-table__status em {
  display: block;
  white-space: nowrap;
}
table.p-progress-table tbody td.p-progress-table__report a, table.p-progress-table tbody td.p-progress-table__passed a {
  display: block;
  font-size: 2.4rem;
  text-decoration: none;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
table.p-progress-table tbody td.p-progress-table__report a:hover, table.p-progress-table tbody td.p-progress-table__passed a:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
table.p-progress-table tbody td.p-progress-table__passed a {
  color: #D8B844;
}
table.p-progress-table tbody td.p-progress-table__date-plan {
  white-space: nowrap;
}
table.p-progress-table tbody tr.is-not-scheduled td,
table.p-progress-table tbody tr.is-not-scheduled th {
  background-color: #FFFAEA;
}
table.p-progress-table tbody tr.is-not-scheduled .p-progress-table__date-plan a {
  font-weight: bold;
  color: #714D09;
}
table.p-progress-table tbody tr.is-behind td,
table.p-progress-table tbody tr.is-behind th {
  background-color: #FAF2F2;
}
table.p-progress-table tbody tr.is-behind .p-progress-table__status,
table.p-progress-table tbody tr.is-behind .p-progress-table__status em {
  color: #C73D3D;
}
@media print, screen and (max-width: 1280px) {
  table.p-progress-table tbody td.p-progress-table__thumb {
    width: 5rem;
  }
}
@media print, screen and (max-width: 1024px) {
  table.p-progress-table {
    display: block;
  }
  table.p-progress-table table,
table.p-progress-table tbody,
table.p-progress-table tr {
    display: block;
    width: 100%;
  }
  table.p-progress-table thead {
    display: none;
  }
  table.p-progress-table tr {
    display: grid;
    grid-template-columns: repeat(22, 1fr);
    margin: 1rem 0;
    overflow: hidden;
    border: 0.1rem solid #DAE0E6;
    border-radius: 0.5rem;
  }
  table.p-progress-table tr:nth-child(2n) th,
table.p-progress-table tr:nth-child(2n) td {
    background-color: #FFFFFF;
  }
  table.p-progress-table tbody {
    /* 期間学習は学習予定なし */
  }
  table.p-progress-table tbody td.p-progress-table__thumb {
    grid-column: 1/5;
    width: auto;
  }
  table.p-progress-table tbody th.p-progress-table__name {
    grid-column: 5/23;
  }
  table.p-progress-table tbody td.p-progress-table__status {
    grid-column: 1/5;
  }
  table.p-progress-table tbody td.p-progress-table__score {
    grid-column: 5/7;
  }
  table.p-progress-table tbody td.p-progress-table__report {
    grid-column: 7/9;
  }
  table.p-progress-table tbody td.p-progress-table__passed {
    grid-column: 9/11;
  }
  table.p-progress-table tbody td.p-progress-table__date-plan {
    grid-column: 11/14;
  }
  table.p-progress-table tbody td.p-progress-table__date-start {
    grid-column: 14/17;
  }
  table.p-progress-table tbody td.p-progress-table__date-report {
    grid-column: 17/20;
  }
  table.p-progress-table tbody td.p-progress-table__date-passed {
    grid-column: 20/23;
  }
  .page-study-achive.is-period table.p-progress-table tbody td.p-progress-table__date-start {
    grid-column: 11/15;
  }
  .page-study-achive.is-period table.p-progress-table tbody td.p-progress-table__date-report {
    grid-column: 15/19;
  }
  .page-study-achive.is-period table.p-progress-table tbody td.p-progress-table__date-passed {
    grid-column: 19/23;
  }
  table.p-progress-table tbody th,
table.p-progress-table tbody td {
    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;
    margin: -0.1rem;
    font-size: 1.4rem;
    text-align: center;
    border: 0.1rem solid #DAE0E6;
  }
  table.p-progress-table tbody th.p-progress-table__name {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    text-align: left;
  }
  table.p-progress-table tbody th.p-progress-table__name small {
    font-size: 1.3rem;
  }
  table.p-progress-table tbody th.p-progress-table__name span {
    font-size: 1.6rem;
  }
  table.p-progress-table tbody td.p-progress-table__date-plan, table.p-progress-table tbody td.p-progress-table__date-start, table.p-progress-table tbody td.p-progress-table__date-report, table.p-progress-table tbody td.p-progress-table__date-passed {
    font-size: 1.2rem;
    white-space: normal;
  }
  table.p-progress-table tbody td.p-progress-table__date-plan::before, table.p-progress-table tbody td.p-progress-table__date-start::before, table.p-progress-table tbody td.p-progress-table__date-report::before, table.p-progress-table tbody td.p-progress-table__date-passed::before {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    white-space: nowrap;
  }
  table.p-progress-table tbody td.p-progress-table__date-plan::before {
    content: "学習予定月";
  }
  table.p-progress-table tbody td.p-progress-table__date-start::before {
    content: "学習開始";
  }
  table.p-progress-table tbody td.p-progress-table__date-report::before {
    content: "レポート提出";
  }
  table.p-progress-table tbody td.p-progress-table__date-passed::before {
    content: "合格";
  }
}
@media print, screen and (max-width: 599px) {
  table.p-progress-table tr {
    grid-template-columns: repeat(20, 1fr);
  }
  table.p-progress-table tbody {
    /* 期間学習は学習予定なし */
  }
  table.p-progress-table tbody td.p-progress-table__thumb {
    grid-column: 1/5;
  }
  table.p-progress-table tbody th.p-progress-table__name {
    grid-column: 5/21;
  }
  table.p-progress-table tbody td.p-progress-table__status {
    grid-column: 1/9;
  }
  table.p-progress-table tbody td.p-progress-table__score {
    grid-column: 9/13;
  }
  table.p-progress-table tbody td.p-progress-table__report {
    grid-column: 13/17;
  }
  table.p-progress-table tbody td.p-progress-table__passed {
    grid-column: 17/21;
  }
  table.p-progress-table tbody td.p-progress-table__date-plan {
    grid-column: 1/6;
  }
  table.p-progress-table tbody td.p-progress-table__date-start {
    grid-column: 6/11;
  }
  table.p-progress-table tbody td.p-progress-table__date-report {
    grid-column: 11/16;
  }
  table.p-progress-table tbody td.p-progress-table__date-passed {
    grid-column: 16/21;
  }
  table.p-progress-table tbody td.p-progress-table__date-plan,
table.p-progress-table tbody td.p-progress-table__date-start,
table.p-progress-table tbody td.p-progress-table__date-report,
table.p-progress-table tbody td.p-progress-table__date-passed {
    border: 0;
    border-top: 0.1rem solid #DAE0E6;
    background-color: #F2F3F4;
  }
  .page-study-achive.is-period table.p-progress-table tbody td.p-progress-table__date-start {
    grid-column: 1/8;
  }
  .page-study-achive.is-period table.p-progress-table tbody td.p-progress-table__date-report {
    grid-column: 8/15;
  }
  .page-study-achive.is-period table.p-progress-table tbody td.p-progress-table__date-passed {
    grid-column: 15/21;
  }
}
@media print, screen and (max-width: 350px) {
  table.p-progress-table tbody td.p-progress-table__date-plan, table.p-progress-table tbody td.p-progress-table__date-start, table.p-progress-table tbody td.p-progress-table__date-report, table.p-progress-table tbody td.p-progress-table__date-passed {
    font-size: 1.1rem;
  }
  table.p-progress-table tbody td.p-progress-table__date-plan::before, table.p-progress-table tbody td.p-progress-table__date-start::before, table.p-progress-table tbody td.p-progress-table__date-report::before, table.p-progress-table tbody td.p-progress-table__date-passed::before {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-datatables-filter : 学習実績一覧のフィルタエリア
----------------------------------------------------------------------------------- */
.p-datatables-filter {
  margin-bottom: 0;
}
.p-datatables-filter__sort, .p-datatables-filter__toggle {
  display: none;
}
.p-datatables-filter .p-form__item {
  background-color: transparent;
}
.p-datatables-filter .p-form__label {
  display: none;
}
@media print, screen and (max-width: 1024px) {
  .p-datatables-filter {
    z-index: 1;
    position: sticky;
    top: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    margin: auto;
    padding: 1rem 0;
    border: 0.1rem solid #DAE0E6;
    border-radius: 1rem;
    background-color: #FFFFFF;
  }
  .p-datatables-filter > * {
    margin-bottom: 0;
    margin-right: 1rem;
  }
  .p-datatables-filter__sort {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .p-datatables-filter .p-form__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .p-datatables-filter .p-form__label {
    display: block;
    width: auto;
    padding-right: 0.7rem;
    font-weight: bold;
  }
  .p-datatables-filter__filter .p-form__group > * {
    margin-right: -1.5rem;
  }
  .p-datatables-filter__toggle {
    display: none;
  }
}
@media print, screen and (max-width: 599px) {
  .p-datatables-filter {
    position: static;
    display: block;
    padding: 0;
    border: 0;
  }
  .p-datatables-filter > * {
    margin-right: 0;
  }
  .p-datatables-filter__sort, .p-datatables-filter__toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .p-datatables-filter .p-form__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .p-datatables-filter .p-form__label {
    display: block;
    width: 7rem;
  }
  .p-datatables-filter__filter .p-form__group > * {
    margin-right: -1.5rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-login : ログインフォーム
----------------------------------------------------------------------------------- */
.p-login {
  height: 28rem;
  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: url("/mbuffetDemo/jsp/BFuser/common/images/bg_page_title.jpg") no-repeat center;
  background-size: cover;
}
.p-login__inner {
  width: 40rem;
}
.p-login__row {
  margin: 0 0 0.8rem;
}
.p-login__reminder {
  margin: 0;
}
.p-login__reminder span,
.p-login__reminder a {
  color: #FFFFFF;
}
@media all and (-ms-high-contrast: none) {
  .p-login .checkbox input[type=checkbox] + span::before {
    border-radius: 0;
  }
}
@media print, screen and (max-width: 599px) {
  .p-login {
    padding: 3rem;
  }
  .p-login__inner {
    width: 100%;
  }
}

.p-top-list01 {
  padding: 2rem 0 1.5rem;
  background-color: rgba(0, 156, 225, .05);
}
.p-top-list01__list {
  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;
}
.p-top-list01__item {
  width: 15rem;
}
.p-top-list01__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.4rem;
  text-decoration: none;
  color: #007EB8;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.p-top-list01__link:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  opacity: 1;
}
.p-top-list01__ico {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 4rem;
}
.p-top-list01__ico img {
  height: 100%;
}
.p-top-list01__txt {
  margin-top: 1rem;
  font-weight: bold;
  line-height: 1.3;
  white-space: nowrap;
  color: #007EB8 !important;
}
@media print, screen and (max-width: 599px) {
  .p-top-list01__item {
    width: 30%;
    padding: 0 1rem;
  }
  .p-top-list01__link {
    font-size: 1.2rem;
  }
  .p-top-list01__ico {
    height: 3.2rem;
  }
}

/* --------------------------------------------------------------------------------
   .p-flow : 学習の流れ・フローチャート
----------------------------------------------------------------------------------- */
.p-flow {
  position: relative;
  width: 90rem;
  margin: 3rem auto 0;
  padding: 0 0 2rem 8rem;
  background: #FFFFFF url(/mbuffetDemo/jsp/BFuser/common/images/page_flow/flow_arrow_up.svg) no-repeat 0 25rem;
  background-size: 8rem auto;
  /* 左の見出し */
  /* 右の詳細 */
}
.p-flow__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3rem;
  padding: 1rem 1rem 1rem 0;
  border: 0.1rem solid #019CE1;
  border-radius: 0.5rem;
  background-color: #F0F6FC;
  /* 矢印 */
}
.p-flow__item:last-child {
  margin-bottom: 0;
}
.p-flow__item::after {
  content: "";
  position: absolute;
  left: calc(50% - 1rem);
  top: 100%;
  width: 2rem;
  height: 3rem;
  background: url(/mbuffetDemo/jsp/BFuser/common/images/page_flow/flow_arrow_down.svg) no-repeat center bottom;
  background-size: auto 5rem;
}
.p-flow__item:last-child::after {
  display: none;
}
.p-flow__heading {
  width: 30%;
  text-align: center;
}
.p-flow__heading h3 em {
  position: absolute;
  left: -1rem;
  top: -1rem;
  width: 4rem;
  height: 4rem;
  font-family: "Roboto Condensed";
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 4rem;
  color: #FFFFFF;
  border-radius: 100%;
  background-color: #019CE1;
}
.p-flow__heading h3 span {
  display: block;
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #019CE1;
}
.p-flow__heading p {
  font-weight: bold;
  line-height: 1.5;
}
.p-flow__detail {
  width: 70%;
  margin: 0;
}
.p-flow__detail li:not(:last-child) {
  margin-bottom: 0.5rem;
}
.p-flow__detail dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 6.5rem;
  padding: 1rem;
  line-height: 1.5;
  background-color: #FFFFFF;
}
.p-flow__detail dl dt {
  width: 20%;
  padding-right: 1rem;
  font-weight: bold;
  color: #019CE1;
}
.p-flow__detail dl dd {
  width: 80%;
}
.p-flow.is-stydy-flow-period {
  background: none;
  padding: 0;
}
.p-flow.is-stydy-flow-period .p-flow__item {
  margin-bottom: 2rem;
}
.p-flow.is-stydy-flow-period .p-flow__item::after {
  content: none;
}
.p-flow.is-stydy-flow-period .p-flow__heading {
  margin-bottom: 0;
}
.p-flow.is-stydy-flow-period .p-flow__detail {
  background-color: #FFFFFF;
  padding: 1.3em;
  line-height: 1.5;
}
.p-flow.is-stydy-flow-period .p-flow__detail span {
  font-weight: bold;
}
@media print, screen and (max-width: 1024px) {
  .p-flow {
    width: 100%;
    padding: 0 1rem;
    background: none;
    /* 左の見出し */
    /* 右の詳細 */
  }
  .p-flow::after {
    content: "①へ戻って繰り返し";
    display: block;
    font-size: 1.6rem;
    line-height: 5rem;
    text-align: center;
    color: #FFFFFF;
    border-radius: 0.5rem;
    background-color: #019CE1;
  }
  .page-first-login.is-study-flow-term .p-flow::after {
    display: none;
  }
  .p-flow__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2rem 1rem;
  }
  .p-flow__item:last-child {
    margin-bottom: 3rem;
  }
  .p-flow__item:last-child::after {
    display: block;
  }
  .p-flow__heading {
    width: 100%;
    margin-bottom: 2rem;
  }
  .p-flow__heading h3 span {
    font-size: 2rem;
  }
  .p-flow__heading p br {
    display: none;
  }
  .p-flow__detail {
    width: 100%;
  }
  .p-flow__detail dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .p-flow__detail dl dt,
.p-flow__detail dl dd {
    width: 100%;
  }
  .p-flow.is-stydy-flow-period {
    background-size: 4rem auto;
    background-position: left 2rem top 5rem;
  }
  .p-flow.is-stydy-flow-period .p-flow__item::after {
    content: none;
  }
  .p-flow.is-stydy-flow-period .p-flow__heading {
    margin-bottom: 0;
  }
  .p-flow.is-stydy-flow-period .p-flow__detail {
    background-color: #FFFFFF;
    padding: 1.3em;
    line-height: 1.5;
  }
  .p-flow.is-stydy-flow-period .p-flow__detail span {
    font-weight: bold;
  }
}

/* --------------------------------------------------------------------------------
   .p-start : 学習の流れ・始めよう
----------------------------------------------------------------------------------- */
.p-start {
  position: relative;
  padding: 6rem 0 5rem;
  text-align: center;
  border-top: 0.1rem solid #019CE1;
  background-color: rgba(1, 156, 225, .05);
  /* 上の三角矢印 */
  /* 見出し */
}
.p-start::before {
  content: "";
  position: absolute;
  left: calc(50% - 2rem);
  top: -2rem;
  width: 4rem;
  height: 4rem;
  border: 0.1rem solid #009CE1;
  border-left: 0;
  border-top: 0;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, .05);
          box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, .05);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.p-start h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3rem;
  padding: 0;
  font-size: 2.4rem;
  text-align: left;
  color: #019CE1;
}
.p-start h2::before {
  content: "";
  width: 4.8rem;
  height: 4.8rem;
  margin-right: 1.5rem;
  background: url(/mbuffetDemo/jsp/BFuser/common/images/icon_rocket_blue.svg) no-repeat center;
  background-size: contain;
}
.p-start h3 {
  margin-bottom: 2.5rem;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-align: center;
  color: #019CE1;
}
@media print, screen and (max-width: 599px) {
  .p-start {
    padding: 5rem 1rem;
  }
  .p-start h2 {
    font-size: 2rem;
  }
  .p-start h2::before {
    width: 3.2rem;
    height: 3.2rem;
  }
  .p-start h3 {
    font-size: 1.6rem;
  }
  .p-start p br {
    display: none;
  }
}

/* --------------------------------------------------------------------------------
   .p-theme-add : テーマ追加モーダル
----------------------------------------------------------------------------------- */
@media print, screen and (max-width: 599px) {
  .p-theme-add .l-modal__container > footer > .p-btns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .p-theme-add .l-modal__container > footer > .p-btns > p {
    width: 35%;
    text-align: right;
  }
  .p-theme-add .l-modal__container > footer > .p-btns > select {
    width: 60%;
  }
}

.u-cl-main {
  color: #019CE1 !important;
}

.u-cl-main-text {
  color: #007EB8 !important;
}

.u-cl-main-text-dark {
  color: #0A416A !important;
}

.u-cl-main-bg {
  color: #F0F6FC !important;
}

.u-cl-main-light {
  color: #79A2C9 !important;
}

.u-cl-accent {
  color: #D8B844 !important;
}

.u-cl-accent-text {
  color: #714D09 !important;
}

.u-cl-accent-bg {
  color: #FFFAEA !important;
}

.u-cl-accent-light {
  color: #B1A167 !important;
}

.u-cl-red {
  color: #D34C4C !important;
}

.u-cl-red-text {
  color: #C73D3D !important;
}

.u-cl-red-bg {
  color: #FAF2F2 !important;
}

.u-cl-red-light {
  color: #C96161 !important;
}

.u-cl-green {
  color: #80C35D !important;
}

.u-cl-green-text {
  color: #165F27 !important;
}

.u-cl-green-bg {
  color: #F4FCF2 !important;
}

.u-cl-green-light {
  color: #7AB170 !important;
}

.u-cl-purple {
  color: #866EC8 !important;
}

.u-cl-white {
  color: #FFFFFF !important;
}

.u-cl-gray-1 {
  color: #F2F3F4 !important;
}

.u-cl-gray-2 {
  color: #E9ECEF !important;
}

.u-cl-gray-3 {
  color: #DAE0E6 !important;
}

.u-cl-gray-4 {
  color: #CAD1D9 !important;
}

.u-cl-gray-5 {
  color: #AEB7BF !important;
}

.u-cl-gray-6 {
  color: #949DA6 !important;
}

.u-cl-gray-7 {
  color: #7A838C !important;
}

.u-cl-gray-8 {
  color: #565E66 !important;
}

.u-cl-gray-9 {
  color: #343A40 !important;
}

.u-cl-black {
  color: #000000 !important;
}

/* --------------------------------------------------------------------------------
   ユーティリティクラス - 幅
   --------------------------------------------------------------------------------
     - 単位 px → u-w-5,   u-w-10  ... u-w-100, u-w-110, u-w-120, ..., u-w-1000
     - 100pxまでは5px刻み、以降は10px刻み
       ※実際の指定では px ではなく rem が使われている（10px = 1rem）
     - 単位 em → u-w-1em, u-w-2em ... u-w-10em
     - 単位 %  → u-w-1p,  u-w-2p  ... u-w-100p
     - 単位 vw → u-w-5v,  u-w-10v ... u-w-100v
     - u- の後ろに sp- を付加するとスマホ用のクラスになる
----------------------------------------------------------------------------------- */
/* 単位：em */
.u-w-1em {
  width: 1em !important;
}

.u-w-2em {
  width: 2em !important;
}

.u-w-3em {
  width: 3em !important;
}

.u-w-4em {
  width: 4em !important;
}

.u-w-5em {
  width: 5em !important;
}

.u-w-6em {
  width: 6em !important;
}

.u-w-7em {
  width: 7em !important;
}

.u-w-8em {
  width: 8em !important;
}

.u-w-9em {
  width: 9em !important;
}

.u-w-10em {
  width: 10em !important;
}

/* 単位：px（rem） */
.u-w-5 {
  width: 0.5rem !important;
}

.u-w-10 {
  width: 1rem !important;
}

.u-w-15 {
  width: 1.5rem !important;
}

.u-w-20 {
  width: 2rem !important;
}

.u-w-25 {
  width: 2.5rem !important;
}

.u-w-30 {
  width: 3rem !important;
}

.u-w-35 {
  width: 3.5rem !important;
}

.u-w-40 {
  width: 4rem !important;
}

.u-w-45 {
  width: 4.5rem !important;
}

.u-w-50 {
  width: 5rem !important;
}

.u-w-55 {
  width: 5.5rem !important;
}

.u-w-60 {
  width: 6rem !important;
}

.u-w-65 {
  width: 6.5rem !important;
}

.u-w-70 {
  width: 7rem !important;
}

.u-w-75 {
  width: 7.5rem !important;
}

.u-w-80 {
  width: 8rem !important;
}

.u-w-85 {
  width: 8.5rem !important;
}

.u-w-90 {
  width: 9rem !important;
}

.u-w-95 {
  width: 9.5rem !important;
}

/* 単位：100px以上は10px刻み */
.u-w-100 {
  width: 10rem !important;
}

.u-w-110 {
  width: 11rem !important;
}

.u-w-120 {
  width: 12rem !important;
}

.u-w-130 {
  width: 13rem !important;
}

.u-w-140 {
  width: 14rem !important;
}

.u-w-150 {
  width: 15rem !important;
}

.u-w-160 {
  width: 16rem !important;
}

.u-w-170 {
  width: 17rem !important;
}

.u-w-180 {
  width: 18rem !important;
}

.u-w-190 {
  width: 19rem !important;
}

.u-w-200 {
  width: 20rem !important;
}

.u-w-210 {
  width: 21rem !important;
}

.u-w-220 {
  width: 22rem !important;
}

.u-w-230 {
  width: 23rem !important;
}

.u-w-240 {
  width: 24rem !important;
}

.u-w-250 {
  width: 25rem !important;
}

.u-w-260 {
  width: 26rem !important;
}

.u-w-270 {
  width: 27rem !important;
}

.u-w-280 {
  width: 28rem !important;
}

.u-w-290 {
  width: 29rem !important;
}

.u-w-300 {
  width: 30rem !important;
}

.u-w-310 {
  width: 31rem !important;
}

.u-w-320 {
  width: 32rem !important;
}

.u-w-330 {
  width: 33rem !important;
}

.u-w-340 {
  width: 34rem !important;
}

.u-w-350 {
  width: 35rem !important;
}

.u-w-360 {
  width: 36rem !important;
}

.u-w-370 {
  width: 37rem !important;
}

.u-w-380 {
  width: 38rem !important;
}

.u-w-390 {
  width: 39rem !important;
}

.u-w-400 {
  width: 40rem !important;
}

.u-w-410 {
  width: 41rem !important;
}

.u-w-420 {
  width: 42rem !important;
}

.u-w-430 {
  width: 43rem !important;
}

.u-w-440 {
  width: 44rem !important;
}

.u-w-450 {
  width: 45rem !important;
}

.u-w-460 {
  width: 46rem !important;
}

.u-w-470 {
  width: 47rem !important;
}

.u-w-480 {
  width: 48rem !important;
}

.u-w-490 {
  width: 49rem !important;
}

.u-w-500 {
  width: 50rem !important;
}

.u-w-510 {
  width: 51rem !important;
}

.u-w-520 {
  width: 52rem !important;
}

.u-w-530 {
  width: 53rem !important;
}

.u-w-540 {
  width: 54rem !important;
}

.u-w-550 {
  width: 55rem !important;
}

.u-w-560 {
  width: 56rem !important;
}

.u-w-570 {
  width: 57rem !important;
}

.u-w-580 {
  width: 58rem !important;
}

.u-w-590 {
  width: 59rem !important;
}

.u-w-600 {
  width: 60rem !important;
}

.u-w-610 {
  width: 61rem !important;
}

.u-w-620 {
  width: 62rem !important;
}

.u-w-630 {
  width: 63rem !important;
}

.u-w-640 {
  width: 64rem !important;
}

.u-w-650 {
  width: 65rem !important;
}

.u-w-660 {
  width: 66rem !important;
}

.u-w-670 {
  width: 67rem !important;
}

.u-w-680 {
  width: 68rem !important;
}

.u-w-690 {
  width: 69rem !important;
}

.u-w-700 {
  width: 70rem !important;
}

.u-w-710 {
  width: 71rem !important;
}

.u-w-720 {
  width: 72rem !important;
}

.u-w-730 {
  width: 73rem !important;
}

.u-w-740 {
  width: 74rem !important;
}

.u-w-750 {
  width: 75rem !important;
}

.u-w-760 {
  width: 76rem !important;
}

.u-w-770 {
  width: 77rem !important;
}

.u-w-780 {
  width: 78rem !important;
}

.u-w-790 {
  width: 79rem !important;
}

.u-w-800 {
  width: 80rem !important;
}

.u-w-810 {
  width: 81rem !important;
}

.u-w-820 {
  width: 82rem !important;
}

.u-w-830 {
  width: 83rem !important;
}

.u-w-840 {
  width: 84rem !important;
}

.u-w-850 {
  width: 85rem !important;
}

.u-w-860 {
  width: 86rem !important;
}

.u-w-870 {
  width: 87rem !important;
}

.u-w-880 {
  width: 88rem !important;
}

.u-w-890 {
  width: 89rem !important;
}

.u-w-900 {
  width: 90rem !important;
}

.u-w-910 {
  width: 91rem !important;
}

.u-w-920 {
  width: 92rem !important;
}

.u-w-930 {
  width: 93rem !important;
}

.u-w-940 {
  width: 94rem !important;
}

.u-w-950 {
  width: 95rem !important;
}

.u-w-960 {
  width: 96rem !important;
}

.u-w-970 {
  width: 97rem !important;
}

.u-w-980 {
  width: 98rem !important;
}

.u-w-990 {
  width: 99rem !important;
}

.u-w-1000 {
  width: 100rem !important;
}

/* 単位：パーセント、vw */
.u-w-1p {
  width: 1% !important;
}

.u-w-1v {
  width: 1vw !important;
}

.u-w-2p {
  width: 2% !important;
}

.u-w-2v {
  width: 2vw !important;
}

.u-w-3p {
  width: 3% !important;
}

.u-w-3v {
  width: 3vw !important;
}

.u-w-4p {
  width: 4% !important;
}

.u-w-4v {
  width: 4vw !important;
}

.u-w-5p {
  width: 5% !important;
}

.u-w-5v {
  width: 5vw !important;
}

.u-w-6p {
  width: 6% !important;
}

.u-w-6v {
  width: 6vw !important;
}

.u-w-7p {
  width: 7% !important;
}

.u-w-7v {
  width: 7vw !important;
}

.u-w-8p {
  width: 8% !important;
}

.u-w-8v {
  width: 8vw !important;
}

.u-w-9p {
  width: 9% !important;
}

.u-w-9v {
  width: 9vw !important;
}

.u-w-10p {
  width: 10% !important;
}

.u-w-10v {
  width: 10vw !important;
}

.u-w-11p {
  width: 11% !important;
}

.u-w-11v {
  width: 11vw !important;
}

.u-w-12p {
  width: 12% !important;
}

.u-w-12v {
  width: 12vw !important;
}

.u-w-13p {
  width: 13% !important;
}

.u-w-13v {
  width: 13vw !important;
}

.u-w-14p {
  width: 14% !important;
}

.u-w-14v {
  width: 14vw !important;
}

.u-w-15p {
  width: 15% !important;
}

.u-w-15v {
  width: 15vw !important;
}

.u-w-16p {
  width: 16% !important;
}

.u-w-16v {
  width: 16vw !important;
}

.u-w-17p {
  width: 17% !important;
}

.u-w-17v {
  width: 17vw !important;
}

.u-w-18p {
  width: 18% !important;
}

.u-w-18v {
  width: 18vw !important;
}

.u-w-19p {
  width: 19% !important;
}

.u-w-19v {
  width: 19vw !important;
}

.u-w-20p {
  width: 20% !important;
}

.u-w-20v {
  width: 20vw !important;
}

.u-w-21p {
  width: 21% !important;
}

.u-w-21v {
  width: 21vw !important;
}

.u-w-22p {
  width: 22% !important;
}

.u-w-22v {
  width: 22vw !important;
}

.u-w-23p {
  width: 23% !important;
}

.u-w-23v {
  width: 23vw !important;
}

.u-w-24p {
  width: 24% !important;
}

.u-w-24v {
  width: 24vw !important;
}

.u-w-25p {
  width: 25% !important;
}

.u-w-25v {
  width: 25vw !important;
}

.u-w-26p {
  width: 26% !important;
}

.u-w-26v {
  width: 26vw !important;
}

.u-w-27p {
  width: 27% !important;
}

.u-w-27v {
  width: 27vw !important;
}

.u-w-28p {
  width: 28% !important;
}

.u-w-28v {
  width: 28vw !important;
}

.u-w-29p {
  width: 29% !important;
}

.u-w-29v {
  width: 29vw !important;
}

.u-w-30p {
  width: 30% !important;
}

.u-w-30v {
  width: 30vw !important;
}

.u-w-31p {
  width: 31% !important;
}

.u-w-31v {
  width: 31vw !important;
}

.u-w-32p {
  width: 32% !important;
}

.u-w-32v {
  width: 32vw !important;
}

.u-w-33p {
  width: 33% !important;
}

.u-w-33v {
  width: 33vw !important;
}

.u-w-34p {
  width: 34% !important;
}

.u-w-34v {
  width: 34vw !important;
}

.u-w-35p {
  width: 35% !important;
}

.u-w-35v {
  width: 35vw !important;
}

.u-w-36p {
  width: 36% !important;
}

.u-w-36v {
  width: 36vw !important;
}

.u-w-37p {
  width: 37% !important;
}

.u-w-37v {
  width: 37vw !important;
}

.u-w-38p {
  width: 38% !important;
}

.u-w-38v {
  width: 38vw !important;
}

.u-w-39p {
  width: 39% !important;
}

.u-w-39v {
  width: 39vw !important;
}

.u-w-40p {
  width: 40% !important;
}

.u-w-40v {
  width: 40vw !important;
}

.u-w-41p {
  width: 41% !important;
}

.u-w-41v {
  width: 41vw !important;
}

.u-w-42p {
  width: 42% !important;
}

.u-w-42v {
  width: 42vw !important;
}

.u-w-43p {
  width: 43% !important;
}

.u-w-43v {
  width: 43vw !important;
}

.u-w-44p {
  width: 44% !important;
}

.u-w-44v {
  width: 44vw !important;
}

.u-w-45p {
  width: 45% !important;
}

.u-w-45v {
  width: 45vw !important;
}

.u-w-46p {
  width: 46% !important;
}

.u-w-46v {
  width: 46vw !important;
}

.u-w-47p {
  width: 47% !important;
}

.u-w-47v {
  width: 47vw !important;
}

.u-w-48p {
  width: 48% !important;
}

.u-w-48v {
  width: 48vw !important;
}

.u-w-49p {
  width: 49% !important;
}

.u-w-49v {
  width: 49vw !important;
}

.u-w-50p {
  width: 50% !important;
}

.u-w-50v {
  width: 50vw !important;
}

.u-w-51p {
  width: 51% !important;
}

.u-w-51v {
  width: 51vw !important;
}

.u-w-52p {
  width: 52% !important;
}

.u-w-52v {
  width: 52vw !important;
}

.u-w-53p {
  width: 53% !important;
}

.u-w-53v {
  width: 53vw !important;
}

.u-w-54p {
  width: 54% !important;
}

.u-w-54v {
  width: 54vw !important;
}

.u-w-55p {
  width: 55% !important;
}

.u-w-55v {
  width: 55vw !important;
}

.u-w-56p {
  width: 56% !important;
}

.u-w-56v {
  width: 56vw !important;
}

.u-w-57p {
  width: 57% !important;
}

.u-w-57v {
  width: 57vw !important;
}

.u-w-58p {
  width: 58% !important;
}

.u-w-58v {
  width: 58vw !important;
}

.u-w-59p {
  width: 59% !important;
}

.u-w-59v {
  width: 59vw !important;
}

.u-w-60p {
  width: 60% !important;
}

.u-w-60v {
  width: 60vw !important;
}

.u-w-61p {
  width: 61% !important;
}

.u-w-61v {
  width: 61vw !important;
}

.u-w-62p {
  width: 62% !important;
}

.u-w-62v {
  width: 62vw !important;
}

.u-w-63p {
  width: 63% !important;
}

.u-w-63v {
  width: 63vw !important;
}

.u-w-64p {
  width: 64% !important;
}

.u-w-64v {
  width: 64vw !important;
}

.u-w-65p {
  width: 65% !important;
}

.u-w-65v {
  width: 65vw !important;
}

.u-w-66p {
  width: 66% !important;
}

.u-w-66v {
  width: 66vw !important;
}

.u-w-67p {
  width: 67% !important;
}

.u-w-67v {
  width: 67vw !important;
}

.u-w-68p {
  width: 68% !important;
}

.u-w-68v {
  width: 68vw !important;
}

.u-w-69p {
  width: 69% !important;
}

.u-w-69v {
  width: 69vw !important;
}

.u-w-70p {
  width: 70% !important;
}

.u-w-70v {
  width: 70vw !important;
}

.u-w-71p {
  width: 71% !important;
}

.u-w-71v {
  width: 71vw !important;
}

.u-w-72p {
  width: 72% !important;
}

.u-w-72v {
  width: 72vw !important;
}

.u-w-73p {
  width: 73% !important;
}

.u-w-73v {
  width: 73vw !important;
}

.u-w-74p {
  width: 74% !important;
}

.u-w-74v {
  width: 74vw !important;
}

.u-w-75p {
  width: 75% !important;
}

.u-w-75v {
  width: 75vw !important;
}

.u-w-76p {
  width: 76% !important;
}

.u-w-76v {
  width: 76vw !important;
}

.u-w-77p {
  width: 77% !important;
}

.u-w-77v {
  width: 77vw !important;
}

.u-w-78p {
  width: 78% !important;
}

.u-w-78v {
  width: 78vw !important;
}

.u-w-79p {
  width: 79% !important;
}

.u-w-79v {
  width: 79vw !important;
}

.u-w-80p {
  width: 80% !important;
}

.u-w-80v {
  width: 80vw !important;
}

.u-w-81p {
  width: 81% !important;
}

.u-w-81v {
  width: 81vw !important;
}

.u-w-82p {
  width: 82% !important;
}

.u-w-82v {
  width: 82vw !important;
}

.u-w-83p {
  width: 83% !important;
}

.u-w-83v {
  width: 83vw !important;
}

.u-w-84p {
  width: 84% !important;
}

.u-w-84v {
  width: 84vw !important;
}

.u-w-85p {
  width: 85% !important;
}

.u-w-85v {
  width: 85vw !important;
}

.u-w-86p {
  width: 86% !important;
}

.u-w-86v {
  width: 86vw !important;
}

.u-w-87p {
  width: 87% !important;
}

.u-w-87v {
  width: 87vw !important;
}

.u-w-88p {
  width: 88% !important;
}

.u-w-88v {
  width: 88vw !important;
}

.u-w-89p {
  width: 89% !important;
}

.u-w-89v {
  width: 89vw !important;
}

.u-w-90p {
  width: 90% !important;
}

.u-w-90v {
  width: 90vw !important;
}

.u-w-91p {
  width: 91% !important;
}

.u-w-91v {
  width: 91vw !important;
}

.u-w-92p {
  width: 92% !important;
}

.u-w-92v {
  width: 92vw !important;
}

.u-w-93p {
  width: 93% !important;
}

.u-w-93v {
  width: 93vw !important;
}

.u-w-94p {
  width: 94% !important;
}

.u-w-94v {
  width: 94vw !important;
}

.u-w-95p {
  width: 95% !important;
}

.u-w-95v {
  width: 95vw !important;
}

.u-w-96p {
  width: 96% !important;
}

.u-w-96v {
  width: 96vw !important;
}

.u-w-97p {
  width: 97% !important;
}

.u-w-97v {
  width: 97vw !important;
}

.u-w-98p {
  width: 98% !important;
}

.u-w-98v {
  width: 98vw !important;
}

.u-w-99p {
  width: 99% !important;
}

.u-w-99v {
  width: 99vw !important;
}

.u-w-100p {
  width: 100% !important;
}

.u-w-100v {
  width: 100vw !important;
}

/* SP版：プリフィクス sp- を付加 */
@media print, screen and (max-width: 599px) {
  /* 単位：em */
  .u-sp-w-1em {
    width: 1em !important;
  }

  .u-sp-w-2em {
    width: 2em !important;
  }

  .u-sp-w-3em {
    width: 3em !important;
  }

  .u-sp-w-4em {
    width: 4em !important;
  }

  .u-sp-w-5em {
    width: 5em !important;
  }

  .u-sp-w-6em {
    width: 6em !important;
  }

  .u-sp-w-7em {
    width: 7em !important;
  }

  .u-sp-w-8em {
    width: 8em !important;
  }

  .u-sp-w-9em {
    width: 9em !important;
  }

  .u-sp-w-10em {
    width: 10em !important;
  }

  /* 単位：px（rem） */
  .u-sp-w-5 {
    width: 0.5rem !important;
  }

  .u-sp-w-10 {
    width: 1rem !important;
  }

  .u-sp-w-15 {
    width: 1.5rem !important;
  }

  .u-sp-w-20 {
    width: 2rem !important;
  }

  .u-sp-w-25 {
    width: 2.5rem !important;
  }

  .u-sp-w-30 {
    width: 3rem !important;
  }

  .u-sp-w-35 {
    width: 3.5rem !important;
  }

  .u-sp-w-40 {
    width: 4rem !important;
  }

  .u-sp-w-45 {
    width: 4.5rem !important;
  }

  .u-sp-w-50 {
    width: 5rem !important;
  }

  .u-sp-w-55 {
    width: 5.5rem !important;
  }

  .u-sp-w-60 {
    width: 6rem !important;
  }

  .u-sp-w-65 {
    width: 6.5rem !important;
  }

  .u-sp-w-70 {
    width: 7rem !important;
  }

  .u-sp-w-75 {
    width: 7.5rem !important;
  }

  .u-sp-w-80 {
    width: 8rem !important;
  }

  .u-sp-w-85 {
    width: 8.5rem !important;
  }

  .u-sp-w-90 {
    width: 9rem !important;
  }

  .u-sp-w-95 {
    width: 9.5rem !important;
  }

  /* 単位：100px以上は10px刻み */
  .u-sp-w-100 {
    width: 10rem !important;
  }

  .u-sp-w-110 {
    width: 11rem !important;
  }

  .u-sp-w-120 {
    width: 12rem !important;
  }

  .u-sp-w-130 {
    width: 13rem !important;
  }

  .u-sp-w-140 {
    width: 14rem !important;
  }

  .u-sp-w-150 {
    width: 15rem !important;
  }

  .u-sp-w-160 {
    width: 16rem !important;
  }

  .u-sp-w-170 {
    width: 17rem !important;
  }

  .u-sp-w-180 {
    width: 18rem !important;
  }

  .u-sp-w-190 {
    width: 19rem !important;
  }

  .u-sp-w-200 {
    width: 20rem !important;
  }

  .u-sp-w-210 {
    width: 21rem !important;
  }

  .u-sp-w-220 {
    width: 22rem !important;
  }

  .u-sp-w-230 {
    width: 23rem !important;
  }

  .u-sp-w-240 {
    width: 24rem !important;
  }

  .u-sp-w-250 {
    width: 25rem !important;
  }

  .u-sp-w-260 {
    width: 26rem !important;
  }

  .u-sp-w-270 {
    width: 27rem !important;
  }

  .u-sp-w-280 {
    width: 28rem !important;
  }

  .u-sp-w-290 {
    width: 29rem !important;
  }

  .u-sp-w-300 {
    width: 30rem !important;
  }

  .u-sp-w-310 {
    width: 31rem !important;
  }

  .u-sp-w-320 {
    width: 32rem !important;
  }

  .u-sp-w-330 {
    width: 33rem !important;
  }

  .u-sp-w-340 {
    width: 34rem !important;
  }

  .u-sp-w-350 {
    width: 35rem !important;
  }

  .u-sp-w-360 {
    width: 36rem !important;
  }

  .u-sp-w-370 {
    width: 37rem !important;
  }

  .u-sp-w-380 {
    width: 38rem !important;
  }

  .u-sp-w-390 {
    width: 39rem !important;
  }

  .u-sp-w-400 {
    width: 40rem !important;
  }

  .u-sp-w-410 {
    width: 41rem !important;
  }

  .u-sp-w-420 {
    width: 42rem !important;
  }

  .u-sp-w-430 {
    width: 43rem !important;
  }

  .u-sp-w-440 {
    width: 44rem !important;
  }

  .u-sp-w-450 {
    width: 45rem !important;
  }

  .u-sp-w-460 {
    width: 46rem !important;
  }

  .u-sp-w-470 {
    width: 47rem !important;
  }

  .u-sp-w-480 {
    width: 48rem !important;
  }

  .u-sp-w-490 {
    width: 49rem !important;
  }

  .u-sp-w-500 {
    width: 50rem !important;
  }

  .u-sp-w-510 {
    width: 51rem !important;
  }

  .u-sp-w-520 {
    width: 52rem !important;
  }

  .u-sp-w-530 {
    width: 53rem !important;
  }

  .u-sp-w-540 {
    width: 54rem !important;
  }

  .u-sp-w-550 {
    width: 55rem !important;
  }

  .u-sp-w-560 {
    width: 56rem !important;
  }

  .u-sp-w-570 {
    width: 57rem !important;
  }

  .u-sp-w-580 {
    width: 58rem !important;
  }

  .u-sp-w-590 {
    width: 59rem !important;
  }

  .u-sp-w-600 {
    width: 60rem !important;
  }

  .u-sp-w-610 {
    width: 61rem !important;
  }

  .u-sp-w-620 {
    width: 62rem !important;
  }

  .u-sp-w-630 {
    width: 63rem !important;
  }

  .u-sp-w-640 {
    width: 64rem !important;
  }

  .u-sp-w-650 {
    width: 65rem !important;
  }

  .u-sp-w-660 {
    width: 66rem !important;
  }

  .u-sp-w-670 {
    width: 67rem !important;
  }

  .u-sp-w-680 {
    width: 68rem !important;
  }

  .u-sp-w-690 {
    width: 69rem !important;
  }

  .u-sp-w-700 {
    width: 70rem !important;
  }

  .u-sp-w-710 {
    width: 71rem !important;
  }

  .u-sp-w-720 {
    width: 72rem !important;
  }

  .u-sp-w-730 {
    width: 73rem !important;
  }

  .u-sp-w-740 {
    width: 74rem !important;
  }

  .u-sp-w-750 {
    width: 75rem !important;
  }

  .u-sp-w-760 {
    width: 76rem !important;
  }

  .u-sp-w-770 {
    width: 77rem !important;
  }

  .u-sp-w-780 {
    width: 78rem !important;
  }

  .u-sp-w-790 {
    width: 79rem !important;
  }

  .u-sp-w-800 {
    width: 80rem !important;
  }

  .u-sp-w-810 {
    width: 81rem !important;
  }

  .u-sp-w-820 {
    width: 82rem !important;
  }

  .u-sp-w-830 {
    width: 83rem !important;
  }

  .u-sp-w-840 {
    width: 84rem !important;
  }

  .u-sp-w-850 {
    width: 85rem !important;
  }

  .u-sp-w-860 {
    width: 86rem !important;
  }

  .u-sp-w-870 {
    width: 87rem !important;
  }

  .u-sp-w-880 {
    width: 88rem !important;
  }

  .u-sp-w-890 {
    width: 89rem !important;
  }

  .u-sp-w-900 {
    width: 90rem !important;
  }

  .u-sp-w-910 {
    width: 91rem !important;
  }

  .u-sp-w-920 {
    width: 92rem !important;
  }

  .u-sp-w-930 {
    width: 93rem !important;
  }

  .u-sp-w-940 {
    width: 94rem !important;
  }

  .u-sp-w-950 {
    width: 95rem !important;
  }

  .u-sp-w-960 {
    width: 96rem !important;
  }

  .u-sp-w-970 {
    width: 97rem !important;
  }

  .u-sp-w-980 {
    width: 98rem !important;
  }

  .u-sp-w-990 {
    width: 99rem !important;
  }

  .u-sp-w-1000 {
    width: 100rem !important;
  }

  /* 単位：パーセント、vw */
  .u-sp-w-1p {
    width: 1% !important;
  }

  .u-sp-w-1v {
    width: 1vw !important;
  }

  .u-sp-w-2p {
    width: 2% !important;
  }

  .u-sp-w-2v {
    width: 2vw !important;
  }

  .u-sp-w-3p {
    width: 3% !important;
  }

  .u-sp-w-3v {
    width: 3vw !important;
  }

  .u-sp-w-4p {
    width: 4% !important;
  }

  .u-sp-w-4v {
    width: 4vw !important;
  }

  .u-sp-w-5p {
    width: 5% !important;
  }

  .u-sp-w-5v {
    width: 5vw !important;
  }

  .u-sp-w-6p {
    width: 6% !important;
  }

  .u-sp-w-6v {
    width: 6vw !important;
  }

  .u-sp-w-7p {
    width: 7% !important;
  }

  .u-sp-w-7v {
    width: 7vw !important;
  }

  .u-sp-w-8p {
    width: 8% !important;
  }

  .u-sp-w-8v {
    width: 8vw !important;
  }

  .u-sp-w-9p {
    width: 9% !important;
  }

  .u-sp-w-9v {
    width: 9vw !important;
  }

  .u-sp-w-10p {
    width: 10% !important;
  }

  .u-sp-w-10v {
    width: 10vw !important;
  }

  .u-sp-w-11p {
    width: 11% !important;
  }

  .u-sp-w-11v {
    width: 11vw !important;
  }

  .u-sp-w-12p {
    width: 12% !important;
  }

  .u-sp-w-12v {
    width: 12vw !important;
  }

  .u-sp-w-13p {
    width: 13% !important;
  }

  .u-sp-w-13v {
    width: 13vw !important;
  }

  .u-sp-w-14p {
    width: 14% !important;
  }

  .u-sp-w-14v {
    width: 14vw !important;
  }

  .u-sp-w-15p {
    width: 15% !important;
  }

  .u-sp-w-15v {
    width: 15vw !important;
  }

  .u-sp-w-16p {
    width: 16% !important;
  }

  .u-sp-w-16v {
    width: 16vw !important;
  }

  .u-sp-w-17p {
    width: 17% !important;
  }

  .u-sp-w-17v {
    width: 17vw !important;
  }

  .u-sp-w-18p {
    width: 18% !important;
  }

  .u-sp-w-18v {
    width: 18vw !important;
  }

  .u-sp-w-19p {
    width: 19% !important;
  }

  .u-sp-w-19v {
    width: 19vw !important;
  }

  .u-sp-w-20p {
    width: 20% !important;
  }

  .u-sp-w-20v {
    width: 20vw !important;
  }

  .u-sp-w-21p {
    width: 21% !important;
  }

  .u-sp-w-21v {
    width: 21vw !important;
  }

  .u-sp-w-22p {
    width: 22% !important;
  }

  .u-sp-w-22v {
    width: 22vw !important;
  }

  .u-sp-w-23p {
    width: 23% !important;
  }

  .u-sp-w-23v {
    width: 23vw !important;
  }

  .u-sp-w-24p {
    width: 24% !important;
  }

  .u-sp-w-24v {
    width: 24vw !important;
  }

  .u-sp-w-25p {
    width: 25% !important;
  }

  .u-sp-w-25v {
    width: 25vw !important;
  }

  .u-sp-w-26p {
    width: 26% !important;
  }

  .u-sp-w-26v {
    width: 26vw !important;
  }

  .u-sp-w-27p {
    width: 27% !important;
  }

  .u-sp-w-27v {
    width: 27vw !important;
  }

  .u-sp-w-28p {
    width: 28% !important;
  }

  .u-sp-w-28v {
    width: 28vw !important;
  }

  .u-sp-w-29p {
    width: 29% !important;
  }

  .u-sp-w-29v {
    width: 29vw !important;
  }

  .u-sp-w-30p {
    width: 30% !important;
  }

  .u-sp-w-30v {
    width: 30vw !important;
  }

  .u-sp-w-31p {
    width: 31% !important;
  }

  .u-sp-w-31v {
    width: 31vw !important;
  }

  .u-sp-w-32p {
    width: 32% !important;
  }

  .u-sp-w-32v {
    width: 32vw !important;
  }

  .u-sp-w-33p {
    width: 33% !important;
  }

  .u-sp-w-33v {
    width: 33vw !important;
  }

  .u-sp-w-34p {
    width: 34% !important;
  }

  .u-sp-w-34v {
    width: 34vw !important;
  }

  .u-sp-w-35p {
    width: 35% !important;
  }

  .u-sp-w-35v {
    width: 35vw !important;
  }

  .u-sp-w-36p {
    width: 36% !important;
  }

  .u-sp-w-36v {
    width: 36vw !important;
  }

  .u-sp-w-37p {
    width: 37% !important;
  }

  .u-sp-w-37v {
    width: 37vw !important;
  }

  .u-sp-w-38p {
    width: 38% !important;
  }

  .u-sp-w-38v {
    width: 38vw !important;
  }

  .u-sp-w-39p {
    width: 39% !important;
  }

  .u-sp-w-39v {
    width: 39vw !important;
  }

  .u-sp-w-40p {
    width: 40% !important;
  }

  .u-sp-w-40v {
    width: 40vw !important;
  }

  .u-sp-w-41p {
    width: 41% !important;
  }

  .u-sp-w-41v {
    width: 41vw !important;
  }

  .u-sp-w-42p {
    width: 42% !important;
  }

  .u-sp-w-42v {
    width: 42vw !important;
  }

  .u-sp-w-43p {
    width: 43% !important;
  }

  .u-sp-w-43v {
    width: 43vw !important;
  }

  .u-sp-w-44p {
    width: 44% !important;
  }

  .u-sp-w-44v {
    width: 44vw !important;
  }

  .u-sp-w-45p {
    width: 45% !important;
  }

  .u-sp-w-45v {
    width: 45vw !important;
  }

  .u-sp-w-46p {
    width: 46% !important;
  }

  .u-sp-w-46v {
    width: 46vw !important;
  }

  .u-sp-w-47p {
    width: 47% !important;
  }

  .u-sp-w-47v {
    width: 47vw !important;
  }

  .u-sp-w-48p {
    width: 48% !important;
  }

  .u-sp-w-48v {
    width: 48vw !important;
  }

  .u-sp-w-49p {
    width: 49% !important;
  }

  .u-sp-w-49v {
    width: 49vw !important;
  }

  .u-sp-w-50p {
    width: 50% !important;
  }

  .u-sp-w-50v {
    width: 50vw !important;
  }

  .u-sp-w-51p {
    width: 51% !important;
  }

  .u-sp-w-51v {
    width: 51vw !important;
  }

  .u-sp-w-52p {
    width: 52% !important;
  }

  .u-sp-w-52v {
    width: 52vw !important;
  }

  .u-sp-w-53p {
    width: 53% !important;
  }

  .u-sp-w-53v {
    width: 53vw !important;
  }

  .u-sp-w-54p {
    width: 54% !important;
  }

  .u-sp-w-54v {
    width: 54vw !important;
  }

  .u-sp-w-55p {
    width: 55% !important;
  }

  .u-sp-w-55v {
    width: 55vw !important;
  }

  .u-sp-w-56p {
    width: 56% !important;
  }

  .u-sp-w-56v {
    width: 56vw !important;
  }

  .u-sp-w-57p {
    width: 57% !important;
  }

  .u-sp-w-57v {
    width: 57vw !important;
  }

  .u-sp-w-58p {
    width: 58% !important;
  }

  .u-sp-w-58v {
    width: 58vw !important;
  }

  .u-sp-w-59p {
    width: 59% !important;
  }

  .u-sp-w-59v {
    width: 59vw !important;
  }

  .u-sp-w-60p {
    width: 60% !important;
  }

  .u-sp-w-60v {
    width: 60vw !important;
  }

  .u-sp-w-61p {
    width: 61% !important;
  }

  .u-sp-w-61v {
    width: 61vw !important;
  }

  .u-sp-w-62p {
    width: 62% !important;
  }

  .u-sp-w-62v {
    width: 62vw !important;
  }

  .u-sp-w-63p {
    width: 63% !important;
  }

  .u-sp-w-63v {
    width: 63vw !important;
  }

  .u-sp-w-64p {
    width: 64% !important;
  }

  .u-sp-w-64v {
    width: 64vw !important;
  }

  .u-sp-w-65p {
    width: 65% !important;
  }

  .u-sp-w-65v {
    width: 65vw !important;
  }

  .u-sp-w-66p {
    width: 66% !important;
  }

  .u-sp-w-66v {
    width: 66vw !important;
  }

  .u-sp-w-67p {
    width: 67% !important;
  }

  .u-sp-w-67v {
    width: 67vw !important;
  }

  .u-sp-w-68p {
    width: 68% !important;
  }

  .u-sp-w-68v {
    width: 68vw !important;
  }

  .u-sp-w-69p {
    width: 69% !important;
  }

  .u-sp-w-69v {
    width: 69vw !important;
  }

  .u-sp-w-70p {
    width: 70% !important;
  }

  .u-sp-w-70v {
    width: 70vw !important;
  }

  .u-sp-w-71p {
    width: 71% !important;
  }

  .u-sp-w-71v {
    width: 71vw !important;
  }

  .u-sp-w-72p {
    width: 72% !important;
  }

  .u-sp-w-72v {
    width: 72vw !important;
  }

  .u-sp-w-73p {
    width: 73% !important;
  }

  .u-sp-w-73v {
    width: 73vw !important;
  }

  .u-sp-w-74p {
    width: 74% !important;
  }

  .u-sp-w-74v {
    width: 74vw !important;
  }

  .u-sp-w-75p {
    width: 75% !important;
  }

  .u-sp-w-75v {
    width: 75vw !important;
  }

  .u-sp-w-76p {
    width: 76% !important;
  }

  .u-sp-w-76v {
    width: 76vw !important;
  }

  .u-sp-w-77p {
    width: 77% !important;
  }

  .u-sp-w-77v {
    width: 77vw !important;
  }

  .u-sp-w-78p {
    width: 78% !important;
  }

  .u-sp-w-78v {
    width: 78vw !important;
  }

  .u-sp-w-79p {
    width: 79% !important;
  }

  .u-sp-w-79v {
    width: 79vw !important;
  }

  .u-sp-w-80p {
    width: 80% !important;
  }

  .u-sp-w-80v {
    width: 80vw !important;
  }

  .u-sp-w-81p {
    width: 81% !important;
  }

  .u-sp-w-81v {
    width: 81vw !important;
  }

  .u-sp-w-82p {
    width: 82% !important;
  }

  .u-sp-w-82v {
    width: 82vw !important;
  }

  .u-sp-w-83p {
    width: 83% !important;
  }

  .u-sp-w-83v {
    width: 83vw !important;
  }

  .u-sp-w-84p {
    width: 84% !important;
  }

  .u-sp-w-84v {
    width: 84vw !important;
  }

  .u-sp-w-85p {
    width: 85% !important;
  }

  .u-sp-w-85v {
    width: 85vw !important;
  }

  .u-sp-w-86p {
    width: 86% !important;
  }

  .u-sp-w-86v {
    width: 86vw !important;
  }

  .u-sp-w-87p {
    width: 87% !important;
  }

  .u-sp-w-87v {
    width: 87vw !important;
  }

  .u-sp-w-88p {
    width: 88% !important;
  }

  .u-sp-w-88v {
    width: 88vw !important;
  }

  .u-sp-w-89p {
    width: 89% !important;
  }

  .u-sp-w-89v {
    width: 89vw !important;
  }

  .u-sp-w-90p {
    width: 90% !important;
  }

  .u-sp-w-90v {
    width: 90vw !important;
  }

  .u-sp-w-91p {
    width: 91% !important;
  }

  .u-sp-w-91v {
    width: 91vw !important;
  }

  .u-sp-w-92p {
    width: 92% !important;
  }

  .u-sp-w-92v {
    width: 92vw !important;
  }

  .u-sp-w-93p {
    width: 93% !important;
  }

  .u-sp-w-93v {
    width: 93vw !important;
  }

  .u-sp-w-94p {
    width: 94% !important;
  }

  .u-sp-w-94v {
    width: 94vw !important;
  }

  .u-sp-w-95p {
    width: 95% !important;
  }

  .u-sp-w-95v {
    width: 95vw !important;
  }

  .u-sp-w-96p {
    width: 96% !important;
  }

  .u-sp-w-96v {
    width: 96vw !important;
  }

  .u-sp-w-97p {
    width: 97% !important;
  }

  .u-sp-w-97v {
    width: 97vw !important;
  }

  .u-sp-w-98p {
    width: 98% !important;
  }

  .u-sp-w-98v {
    width: 98vw !important;
  }

  .u-sp-w-99p {
    width: 99% !important;
  }

  .u-sp-w-99v {
    width: 99vw !important;
  }

  .u-sp-w-100p {
    width: 100% !important;
  }

  .u-sp-w-100v {
    width: 100vw !important;
  }
}
/* --------------------------------------------------------------------------------
   ユーティリティクラス - 高さ
   --------------------------------------------------------------------------------
     - 単位 px → u-h-5,   u-h-10  ... u-h-100, u-h-110, u-h-120, ..., u-h-1000
     - 100pxまでは5px刻み、以降は10px刻み
       ※実際の指定では px ではなく rem が使われている（10px = 1rem）
     - 単位 em → u-h-1em, u-h-2em ... u-h-10em
     - 単位 %  → u-h-1p,  u-h-2p  ... u-h-100p
     - 単位 vw → u-h-5v,  u-h-10v ... u-h-100v
     - u- の後ろに sp- を付加するとスマホ用のクラスになる
----------------------------------------------------------------------------------- */
/* 単位：em */
.u-h-1em {
  height: 1em !important;
}

.u-h-2em {
  height: 2em !important;
}

.u-h-3em {
  height: 3em !important;
}

.u-h-4em {
  height: 4em !important;
}

.u-h-5em {
  height: 5em !important;
}

.u-h-6em {
  height: 6em !important;
}

.u-h-7em {
  height: 7em !important;
}

.u-h-8em {
  height: 8em !important;
}

.u-h-9em {
  height: 9em !important;
}

.u-h-10em {
  height: 10em !important;
}

/* 単位：px（rem） */
.u-h-5 {
  height: 0.5rem !important;
}

.u-h-10 {
  height: 1rem !important;
}

.u-h-15 {
  height: 1.5rem !important;
}

.u-h-20 {
  height: 2rem !important;
}

.u-h-25 {
  height: 2.5rem !important;
}

.u-h-30 {
  height: 3rem !important;
}

.u-h-35 {
  height: 3.5rem !important;
}

.u-h-40 {
  height: 4rem !important;
}

.u-h-45 {
  height: 4.5rem !important;
}

.u-h-50 {
  height: 5rem !important;
}

.u-h-55 {
  height: 5.5rem !important;
}

.u-h-60 {
  height: 6rem !important;
}

.u-h-65 {
  height: 6.5rem !important;
}

.u-h-70 {
  height: 7rem !important;
}

.u-h-75 {
  height: 7.5rem !important;
}

.u-h-80 {
  height: 8rem !important;
}

.u-h-85 {
  height: 8.5rem !important;
}

.u-h-90 {
  height: 9rem !important;
}

.u-h-95 {
  height: 9.5rem !important;
}

/* 単位：100px以上は10px刻み */
.u-h-100 {
  height: 10rem !important;
}

.u-h-110 {
  height: 11rem !important;
}

.u-h-120 {
  height: 12rem !important;
}

.u-h-130 {
  height: 13rem !important;
}

.u-h-140 {
  height: 14rem !important;
}

.u-h-150 {
  height: 15rem !important;
}

.u-h-160 {
  height: 16rem !important;
}

.u-h-170 {
  height: 17rem !important;
}

.u-h-180 {
  height: 18rem !important;
}

.u-h-190 {
  height: 19rem !important;
}

.u-h-200 {
  height: 20rem !important;
}

.u-h-210 {
  height: 21rem !important;
}

.u-h-220 {
  height: 22rem !important;
}

.u-h-230 {
  height: 23rem !important;
}

.u-h-240 {
  height: 24rem !important;
}

.u-h-250 {
  height: 25rem !important;
}

.u-h-260 {
  height: 26rem !important;
}

.u-h-270 {
  height: 27rem !important;
}

.u-h-280 {
  height: 28rem !important;
}

.u-h-290 {
  height: 29rem !important;
}

.u-h-300 {
  height: 30rem !important;
}

.u-h-310 {
  height: 31rem !important;
}

.u-h-320 {
  height: 32rem !important;
}

.u-h-330 {
  height: 33rem !important;
}

.u-h-340 {
  height: 34rem !important;
}

.u-h-350 {
  height: 35rem !important;
}

.u-h-360 {
  height: 36rem !important;
}

.u-h-370 {
  height: 37rem !important;
}

.u-h-380 {
  height: 38rem !important;
}

.u-h-390 {
  height: 39rem !important;
}

.u-h-400 {
  height: 40rem !important;
}

.u-h-410 {
  height: 41rem !important;
}

.u-h-420 {
  height: 42rem !important;
}

.u-h-430 {
  height: 43rem !important;
}

.u-h-440 {
  height: 44rem !important;
}

.u-h-450 {
  height: 45rem !important;
}

.u-h-460 {
  height: 46rem !important;
}

.u-h-470 {
  height: 47rem !important;
}

.u-h-480 {
  height: 48rem !important;
}

.u-h-490 {
  height: 49rem !important;
}

.u-h-500 {
  height: 50rem !important;
}

.u-h-510 {
  height: 51rem !important;
}

.u-h-520 {
  height: 52rem !important;
}

.u-h-530 {
  height: 53rem !important;
}

.u-h-540 {
  height: 54rem !important;
}

.u-h-550 {
  height: 55rem !important;
}

.u-h-560 {
  height: 56rem !important;
}

.u-h-570 {
  height: 57rem !important;
}

.u-h-580 {
  height: 58rem !important;
}

.u-h-590 {
  height: 59rem !important;
}

.u-h-600 {
  height: 60rem !important;
}

.u-h-610 {
  height: 61rem !important;
}

.u-h-620 {
  height: 62rem !important;
}

.u-h-630 {
  height: 63rem !important;
}

.u-h-640 {
  height: 64rem !important;
}

.u-h-650 {
  height: 65rem !important;
}

.u-h-660 {
  height: 66rem !important;
}

.u-h-670 {
  height: 67rem !important;
}

.u-h-680 {
  height: 68rem !important;
}

.u-h-690 {
  height: 69rem !important;
}

.u-h-700 {
  height: 70rem !important;
}

.u-h-710 {
  height: 71rem !important;
}

.u-h-720 {
  height: 72rem !important;
}

.u-h-730 {
  height: 73rem !important;
}

.u-h-740 {
  height: 74rem !important;
}

.u-h-750 {
  height: 75rem !important;
}

.u-h-760 {
  height: 76rem !important;
}

.u-h-770 {
  height: 77rem !important;
}

.u-h-780 {
  height: 78rem !important;
}

.u-h-790 {
  height: 79rem !important;
}

.u-h-800 {
  height: 80rem !important;
}

.u-h-810 {
  height: 81rem !important;
}

.u-h-820 {
  height: 82rem !important;
}

.u-h-830 {
  height: 83rem !important;
}

.u-h-840 {
  height: 84rem !important;
}

.u-h-850 {
  height: 85rem !important;
}

.u-h-860 {
  height: 86rem !important;
}

.u-h-870 {
  height: 87rem !important;
}

.u-h-880 {
  height: 88rem !important;
}

.u-h-890 {
  height: 89rem !important;
}

.u-h-900 {
  height: 90rem !important;
}

.u-h-910 {
  height: 91rem !important;
}

.u-h-920 {
  height: 92rem !important;
}

.u-h-930 {
  height: 93rem !important;
}

.u-h-940 {
  height: 94rem !important;
}

.u-h-950 {
  height: 95rem !important;
}

.u-h-960 {
  height: 96rem !important;
}

.u-h-970 {
  height: 97rem !important;
}

.u-h-980 {
  height: 98rem !important;
}

.u-h-990 {
  height: 99rem !important;
}

.u-h-1000 {
  height: 100rem !important;
}

/* 単位：パーセント、vw */
.u-h-1p {
  height: 1% !important;
}

.u-h-1v {
  height: 1vw !important;
}

.u-h-2p {
  height: 2% !important;
}

.u-h-2v {
  height: 2vw !important;
}

.u-h-3p {
  height: 3% !important;
}

.u-h-3v {
  height: 3vw !important;
}

.u-h-4p {
  height: 4% !important;
}

.u-h-4v {
  height: 4vw !important;
}

.u-h-5p {
  height: 5% !important;
}

.u-h-5v {
  height: 5vw !important;
}

.u-h-6p {
  height: 6% !important;
}

.u-h-6v {
  height: 6vw !important;
}

.u-h-7p {
  height: 7% !important;
}

.u-h-7v {
  height: 7vw !important;
}

.u-h-8p {
  height: 8% !important;
}

.u-h-8v {
  height: 8vw !important;
}

.u-h-9p {
  height: 9% !important;
}

.u-h-9v {
  height: 9vw !important;
}

.u-h-10p {
  height: 10% !important;
}

.u-h-10v {
  height: 10vw !important;
}

.u-h-11p {
  height: 11% !important;
}

.u-h-11v {
  height: 11vw !important;
}

.u-h-12p {
  height: 12% !important;
}

.u-h-12v {
  height: 12vw !important;
}

.u-h-13p {
  height: 13% !important;
}

.u-h-13v {
  height: 13vw !important;
}

.u-h-14p {
  height: 14% !important;
}

.u-h-14v {
  height: 14vw !important;
}

.u-h-15p {
  height: 15% !important;
}

.u-h-15v {
  height: 15vw !important;
}

.u-h-16p {
  height: 16% !important;
}

.u-h-16v {
  height: 16vw !important;
}

.u-h-17p {
  height: 17% !important;
}

.u-h-17v {
  height: 17vw !important;
}

.u-h-18p {
  height: 18% !important;
}

.u-h-18v {
  height: 18vw !important;
}

.u-h-19p {
  height: 19% !important;
}

.u-h-19v {
  height: 19vw !important;
}

.u-h-20p {
  height: 20% !important;
}

.u-h-20v {
  height: 20vw !important;
}

.u-h-21p {
  height: 21% !important;
}

.u-h-21v {
  height: 21vw !important;
}

.u-h-22p {
  height: 22% !important;
}

.u-h-22v {
  height: 22vw !important;
}

.u-h-23p {
  height: 23% !important;
}

.u-h-23v {
  height: 23vw !important;
}

.u-h-24p {
  height: 24% !important;
}

.u-h-24v {
  height: 24vw !important;
}

.u-h-25p {
  height: 25% !important;
}

.u-h-25v {
  height: 25vw !important;
}

.u-h-26p {
  height: 26% !important;
}

.u-h-26v {
  height: 26vw !important;
}

.u-h-27p {
  height: 27% !important;
}

.u-h-27v {
  height: 27vw !important;
}

.u-h-28p {
  height: 28% !important;
}

.u-h-28v {
  height: 28vw !important;
}

.u-h-29p {
  height: 29% !important;
}

.u-h-29v {
  height: 29vw !important;
}

.u-h-30p {
  height: 30% !important;
}

.u-h-30v {
  height: 30vw !important;
}

.u-h-31p {
  height: 31% !important;
}

.u-h-31v {
  height: 31vw !important;
}

.u-h-32p {
  height: 32% !important;
}

.u-h-32v {
  height: 32vw !important;
}

.u-h-33p {
  height: 33% !important;
}

.u-h-33v {
  height: 33vw !important;
}

.u-h-34p {
  height: 34% !important;
}

.u-h-34v {
  height: 34vw !important;
}

.u-h-35p {
  height: 35% !important;
}

.u-h-35v {
  height: 35vw !important;
}

.u-h-36p {
  height: 36% !important;
}

.u-h-36v {
  height: 36vw !important;
}

.u-h-37p {
  height: 37% !important;
}

.u-h-37v {
  height: 37vw !important;
}

.u-h-38p {
  height: 38% !important;
}

.u-h-38v {
  height: 38vw !important;
}

.u-h-39p {
  height: 39% !important;
}

.u-h-39v {
  height: 39vw !important;
}

.u-h-40p {
  height: 40% !important;
}

.u-h-40v {
  height: 40vw !important;
}

.u-h-41p {
  height: 41% !important;
}

.u-h-41v {
  height: 41vw !important;
}

.u-h-42p {
  height: 42% !important;
}

.u-h-42v {
  height: 42vw !important;
}

.u-h-43p {
  height: 43% !important;
}

.u-h-43v {
  height: 43vw !important;
}

.u-h-44p {
  height: 44% !important;
}

.u-h-44v {
  height: 44vw !important;
}

.u-h-45p {
  height: 45% !important;
}

.u-h-45v {
  height: 45vw !important;
}

.u-h-46p {
  height: 46% !important;
}

.u-h-46v {
  height: 46vw !important;
}

.u-h-47p {
  height: 47% !important;
}

.u-h-47v {
  height: 47vw !important;
}

.u-h-48p {
  height: 48% !important;
}

.u-h-48v {
  height: 48vw !important;
}

.u-h-49p {
  height: 49% !important;
}

.u-h-49v {
  height: 49vw !important;
}

.u-h-50p {
  height: 50% !important;
}

.u-h-50v {
  height: 50vw !important;
}

.u-h-51p {
  height: 51% !important;
}

.u-h-51v {
  height: 51vw !important;
}

.u-h-52p {
  height: 52% !important;
}

.u-h-52v {
  height: 52vw !important;
}

.u-h-53p {
  height: 53% !important;
}

.u-h-53v {
  height: 53vw !important;
}

.u-h-54p {
  height: 54% !important;
}

.u-h-54v {
  height: 54vw !important;
}

.u-h-55p {
  height: 55% !important;
}

.u-h-55v {
  height: 55vw !important;
}

.u-h-56p {
  height: 56% !important;
}

.u-h-56v {
  height: 56vw !important;
}

.u-h-57p {
  height: 57% !important;
}

.u-h-57v {
  height: 57vw !important;
}

.u-h-58p {
  height: 58% !important;
}

.u-h-58v {
  height: 58vw !important;
}

.u-h-59p {
  height: 59% !important;
}

.u-h-59v {
  height: 59vw !important;
}

.u-h-60p {
  height: 60% !important;
}

.u-h-60v {
  height: 60vw !important;
}

.u-h-61p {
  height: 61% !important;
}

.u-h-61v {
  height: 61vw !important;
}

.u-h-62p {
  height: 62% !important;
}

.u-h-62v {
  height: 62vw !important;
}

.u-h-63p {
  height: 63% !important;
}

.u-h-63v {
  height: 63vw !important;
}

.u-h-64p {
  height: 64% !important;
}

.u-h-64v {
  height: 64vw !important;
}

.u-h-65p {
  height: 65% !important;
}

.u-h-65v {
  height: 65vw !important;
}

.u-h-66p {
  height: 66% !important;
}

.u-h-66v {
  height: 66vw !important;
}

.u-h-67p {
  height: 67% !important;
}

.u-h-67v {
  height: 67vw !important;
}

.u-h-68p {
  height: 68% !important;
}

.u-h-68v {
  height: 68vw !important;
}

.u-h-69p {
  height: 69% !important;
}

.u-h-69v {
  height: 69vw !important;
}

.u-h-70p {
  height: 70% !important;
}

.u-h-70v {
  height: 70vw !important;
}

.u-h-71p {
  height: 71% !important;
}

.u-h-71v {
  height: 71vw !important;
}

.u-h-72p {
  height: 72% !important;
}

.u-h-72v {
  height: 72vw !important;
}

.u-h-73p {
  height: 73% !important;
}

.u-h-73v {
  height: 73vw !important;
}

.u-h-74p {
  height: 74% !important;
}

.u-h-74v {
  height: 74vw !important;
}

.u-h-75p {
  height: 75% !important;
}

.u-h-75v {
  height: 75vw !important;
}

.u-h-76p {
  height: 76% !important;
}

.u-h-76v {
  height: 76vw !important;
}

.u-h-77p {
  height: 77% !important;
}

.u-h-77v {
  height: 77vw !important;
}

.u-h-78p {
  height: 78% !important;
}

.u-h-78v {
  height: 78vw !important;
}

.u-h-79p {
  height: 79% !important;
}

.u-h-79v {
  height: 79vw !important;
}

.u-h-80p {
  height: 80% !important;
}

.u-h-80v {
  height: 80vw !important;
}

.u-h-81p {
  height: 81% !important;
}

.u-h-81v {
  height: 81vw !important;
}

.u-h-82p {
  height: 82% !important;
}

.u-h-82v {
  height: 82vw !important;
}

.u-h-83p {
  height: 83% !important;
}

.u-h-83v {
  height: 83vw !important;
}

.u-h-84p {
  height: 84% !important;
}

.u-h-84v {
  height: 84vw !important;
}

.u-h-85p {
  height: 85% !important;
}

.u-h-85v {
  height: 85vw !important;
}

.u-h-86p {
  height: 86% !important;
}

.u-h-86v {
  height: 86vw !important;
}

.u-h-87p {
  height: 87% !important;
}

.u-h-87v {
  height: 87vw !important;
}

.u-h-88p {
  height: 88% !important;
}

.u-h-88v {
  height: 88vw !important;
}

.u-h-89p {
  height: 89% !important;
}

.u-h-89v {
  height: 89vw !important;
}

.u-h-90p {
  height: 90% !important;
}

.u-h-90v {
  height: 90vw !important;
}

.u-h-91p {
  height: 91% !important;
}

.u-h-91v {
  height: 91vw !important;
}

.u-h-92p {
  height: 92% !important;
}

.u-h-92v {
  height: 92vw !important;
}

.u-h-93p {
  height: 93% !important;
}

.u-h-93v {
  height: 93vw !important;
}

.u-h-94p {
  height: 94% !important;
}

.u-h-94v {
  height: 94vw !important;
}

.u-h-95p {
  height: 95% !important;
}

.u-h-95v {
  height: 95vw !important;
}

.u-h-96p {
  height: 96% !important;
}

.u-h-96v {
  height: 96vw !important;
}

.u-h-97p {
  height: 97% !important;
}

.u-h-97v {
  height: 97vw !important;
}

.u-h-98p {
  height: 98% !important;
}

.u-h-98v {
  height: 98vw !important;
}

.u-h-99p {
  height: 99% !important;
}

.u-h-99v {
  height: 99vw !important;
}

.u-h-100p {
  height: 100% !important;
}

.u-h-100v {
  height: 100vw !important;
}

/* SP版：プリフィクス sp- を付加 */
@media print, screen and (max-width: 599px) {
  /* 単位：em */
  .u-sp-h-1em {
    height: 1em !important;
  }

  .u-sp-h-2em {
    height: 2em !important;
  }

  .u-sp-h-3em {
    height: 3em !important;
  }

  .u-sp-h-4em {
    height: 4em !important;
  }

  .u-sp-h-5em {
    height: 5em !important;
  }

  .u-sp-h-6em {
    height: 6em !important;
  }

  .u-sp-h-7em {
    height: 7em !important;
  }

  .u-sp-h-8em {
    height: 8em !important;
  }

  .u-sp-h-9em {
    height: 9em !important;
  }

  .u-sp-h-10em {
    height: 10em !important;
  }

  /* 単位：px（rem） */
  .u-sp-h-5 {
    height: 0.5rem !important;
  }

  .u-sp-h-10 {
    height: 1rem !important;
  }

  .u-sp-h-15 {
    height: 1.5rem !important;
  }

  .u-sp-h-20 {
    height: 2rem !important;
  }

  .u-sp-h-25 {
    height: 2.5rem !important;
  }

  .u-sp-h-30 {
    height: 3rem !important;
  }

  .u-sp-h-35 {
    height: 3.5rem !important;
  }

  .u-sp-h-40 {
    height: 4rem !important;
  }

  .u-sp-h-45 {
    height: 4.5rem !important;
  }

  .u-sp-h-50 {
    height: 5rem !important;
  }

  .u-sp-h-55 {
    height: 5.5rem !important;
  }

  .u-sp-h-60 {
    height: 6rem !important;
  }

  .u-sp-h-65 {
    height: 6.5rem !important;
  }

  .u-sp-h-70 {
    height: 7rem !important;
  }

  .u-sp-h-75 {
    height: 7.5rem !important;
  }

  .u-sp-h-80 {
    height: 8rem !important;
  }

  .u-sp-h-85 {
    height: 8.5rem !important;
  }

  .u-sp-h-90 {
    height: 9rem !important;
  }

  .u-sp-h-95 {
    height: 9.5rem !important;
  }

  /* 単位：100px以上は10px刻み */
  .u-sp-h-100 {
    height: 10rem !important;
  }

  .u-sp-h-110 {
    height: 11rem !important;
  }

  .u-sp-h-120 {
    height: 12rem !important;
  }

  .u-sp-h-130 {
    height: 13rem !important;
  }

  .u-sp-h-140 {
    height: 14rem !important;
  }

  .u-sp-h-150 {
    height: 15rem !important;
  }

  .u-sp-h-160 {
    height: 16rem !important;
  }

  .u-sp-h-170 {
    height: 17rem !important;
  }

  .u-sp-h-180 {
    height: 18rem !important;
  }

  .u-sp-h-190 {
    height: 19rem !important;
  }

  .u-sp-h-200 {
    height: 20rem !important;
  }

  .u-sp-h-210 {
    height: 21rem !important;
  }

  .u-sp-h-220 {
    height: 22rem !important;
  }

  .u-sp-h-230 {
    height: 23rem !important;
  }

  .u-sp-h-240 {
    height: 24rem !important;
  }

  .u-sp-h-250 {
    height: 25rem !important;
  }

  .u-sp-h-260 {
    height: 26rem !important;
  }

  .u-sp-h-270 {
    height: 27rem !important;
  }

  .u-sp-h-280 {
    height: 28rem !important;
  }

  .u-sp-h-290 {
    height: 29rem !important;
  }

  .u-sp-h-300 {
    height: 30rem !important;
  }

  .u-sp-h-310 {
    height: 31rem !important;
  }

  .u-sp-h-320 {
    height: 32rem !important;
  }

  .u-sp-h-330 {
    height: 33rem !important;
  }

  .u-sp-h-340 {
    height: 34rem !important;
  }

  .u-sp-h-350 {
    height: 35rem !important;
  }

  .u-sp-h-360 {
    height: 36rem !important;
  }

  .u-sp-h-370 {
    height: 37rem !important;
  }

  .u-sp-h-380 {
    height: 38rem !important;
  }

  .u-sp-h-390 {
    height: 39rem !important;
  }

  .u-sp-h-400 {
    height: 40rem !important;
  }

  .u-sp-h-410 {
    height: 41rem !important;
  }

  .u-sp-h-420 {
    height: 42rem !important;
  }

  .u-sp-h-430 {
    height: 43rem !important;
  }

  .u-sp-h-440 {
    height: 44rem !important;
  }

  .u-sp-h-450 {
    height: 45rem !important;
  }

  .u-sp-h-460 {
    height: 46rem !important;
  }

  .u-sp-h-470 {
    height: 47rem !important;
  }

  .u-sp-h-480 {
    height: 48rem !important;
  }

  .u-sp-h-490 {
    height: 49rem !important;
  }

  .u-sp-h-500 {
    height: 50rem !important;
  }

  .u-sp-h-510 {
    height: 51rem !important;
  }

  .u-sp-h-520 {
    height: 52rem !important;
  }

  .u-sp-h-530 {
    height: 53rem !important;
  }

  .u-sp-h-540 {
    height: 54rem !important;
  }

  .u-sp-h-550 {
    height: 55rem !important;
  }

  .u-sp-h-560 {
    height: 56rem !important;
  }

  .u-sp-h-570 {
    height: 57rem !important;
  }

  .u-sp-h-580 {
    height: 58rem !important;
  }

  .u-sp-h-590 {
    height: 59rem !important;
  }

  .u-sp-h-600 {
    height: 60rem !important;
  }

  .u-sp-h-610 {
    height: 61rem !important;
  }

  .u-sp-h-620 {
    height: 62rem !important;
  }

  .u-sp-h-630 {
    height: 63rem !important;
  }

  .u-sp-h-640 {
    height: 64rem !important;
  }

  .u-sp-h-650 {
    height: 65rem !important;
  }

  .u-sp-h-660 {
    height: 66rem !important;
  }

  .u-sp-h-670 {
    height: 67rem !important;
  }

  .u-sp-h-680 {
    height: 68rem !important;
  }

  .u-sp-h-690 {
    height: 69rem !important;
  }

  .u-sp-h-700 {
    height: 70rem !important;
  }

  .u-sp-h-710 {
    height: 71rem !important;
  }

  .u-sp-h-720 {
    height: 72rem !important;
  }

  .u-sp-h-730 {
    height: 73rem !important;
  }

  .u-sp-h-740 {
    height: 74rem !important;
  }

  .u-sp-h-750 {
    height: 75rem !important;
  }

  .u-sp-h-760 {
    height: 76rem !important;
  }

  .u-sp-h-770 {
    height: 77rem !important;
  }

  .u-sp-h-780 {
    height: 78rem !important;
  }

  .u-sp-h-790 {
    height: 79rem !important;
  }

  .u-sp-h-800 {
    height: 80rem !important;
  }

  .u-sp-h-810 {
    height: 81rem !important;
  }

  .u-sp-h-820 {
    height: 82rem !important;
  }

  .u-sp-h-830 {
    height: 83rem !important;
  }

  .u-sp-h-840 {
    height: 84rem !important;
  }

  .u-sp-h-850 {
    height: 85rem !important;
  }

  .u-sp-h-860 {
    height: 86rem !important;
  }

  .u-sp-h-870 {
    height: 87rem !important;
  }

  .u-sp-h-880 {
    height: 88rem !important;
  }

  .u-sp-h-890 {
    height: 89rem !important;
  }

  .u-sp-h-900 {
    height: 90rem !important;
  }

  .u-sp-h-910 {
    height: 91rem !important;
  }

  .u-sp-h-920 {
    height: 92rem !important;
  }

  .u-sp-h-930 {
    height: 93rem !important;
  }

  .u-sp-h-940 {
    height: 94rem !important;
  }

  .u-sp-h-950 {
    height: 95rem !important;
  }

  .u-sp-h-960 {
    height: 96rem !important;
  }

  .u-sp-h-970 {
    height: 97rem !important;
  }

  .u-sp-h-980 {
    height: 98rem !important;
  }

  .u-sp-h-990 {
    height: 99rem !important;
  }

  .u-sp-h-1000 {
    height: 100rem !important;
  }

  /* 単位：パーセント、vw */
  .u-sp-h-5p {
    height: 5% !important;
  }

  .u-sp-h-5v {
    height: 5vw !important;
  }

  .u-sp-h-10p {
    height: 10% !important;
  }

  .u-sp-h-10v {
    height: 10vw !important;
  }

  .u-sp-h-15p {
    height: 15% !important;
  }

  .u-sp-h-15v {
    height: 15vw !important;
  }

  .u-sp-h-20p {
    height: 20% !important;
  }

  .u-sp-h-20v {
    height: 20vw !important;
  }

  .u-sp-h-25p {
    height: 25% !important;
  }

  .u-sp-h-25v {
    height: 25vw !important;
  }

  .u-sp-h-30p {
    height: 30% !important;
  }

  .u-sp-h-30v {
    height: 30vw !important;
  }

  .u-sp-h-35p {
    height: 35% !important;
  }

  .u-sp-h-35v {
    height: 35vw !important;
  }

  .u-sp-h-40p {
    height: 40% !important;
  }

  .u-sp-h-40v {
    height: 40vw !important;
  }

  .u-sp-h-45p {
    height: 45% !important;
  }

  .u-sp-h-45v {
    height: 45vw !important;
  }

  .u-sp-h-50p {
    height: 50% !important;
  }

  .u-sp-h-50v {
    height: 50vw !important;
  }

  .u-sp-h-55p {
    height: 55% !important;
  }

  .u-sp-h-55v {
    height: 55vw !important;
  }

  .u-sp-h-60p {
    height: 60% !important;
  }

  .u-sp-h-60v {
    height: 60vw !important;
  }

  .u-sp-h-65p {
    height: 65% !important;
  }

  .u-sp-h-65v {
    height: 65vw !important;
  }

  .u-sp-h-70p {
    height: 70% !important;
  }

  .u-sp-h-70v {
    height: 70vw !important;
  }

  .u-sp-h-75p {
    height: 75% !important;
  }

  .u-sp-h-75v {
    height: 75vw !important;
  }

  .u-sp-h-80p {
    height: 80% !important;
  }

  .u-sp-h-80v {
    height: 80vw !important;
  }

  .u-sp-h-85p {
    height: 85% !important;
  }

  .u-sp-h-85v {
    height: 85vw !important;
  }

  .u-sp-h-90p {
    height: 90% !important;
  }

  .u-sp-h-90v {
    height: 90vw !important;
  }

  .u-sp-h-95p {
    height: 95% !important;
  }

  .u-sp-h-95v {
    height: 95vw !important;
  }

  .u-sp-h-100p {
    height: 100% !important;
  }

  .u-sp-h-100v {
    height: 100vw !important;
  }
}
/* --------------------------------------------------------------------------------
   ユーティリティクラス - マージン
   --------------------------------------------------------------------------------
     - 単位 px ※実際の指定では px ではなく rem が使われている（10px = 1rem）
         マージン　: u-m-0,  u-m-5  ... u-m-150,  u-m-auto
         上マージン: u-mt-0, u-mt-5 ... u-mt-150, u-mt-auto
         下マージン: u-mb-0, u-mb-5 ... u-mb-150, u-mb-auto
         左マージン: u-ml-0, u-ml-5 ... u-ml-150, u-ml-auto
         右マージン: u-mr-0, u-mr-5 ... u-mr-150, u-mr-auto
         縦マージン: u-my-0, u-my-5 ... u-my-150, u-my-auto
         横マージン: u-mx-0, u-mx-5 ... u-mx-150, u-mx-auto

     - 単位 em（0.5em から 0.5em 刻みで 10em まで）
         マージン　: u-m-0em,  u-m-05em,  u-m-1em,  u-m-15em,  u-m-2em  ... u-m-10em
         上マージン: u-mt-0em, u-mt-05em, u-mt-1em, u-mt-15em, u-mt-2em ... u-mt-10em
         下マージン: u-mb-0em, u-mb-05em, u-mb-1em, u-mb-15em, u-mb-2em ... u-mb-10em
         左マージン: u-ml-0em, u-ml-05em, u-ml-1em, u-ml-15em, u-ml-2em ... u-ml-10em
         右マージン: u-mr-0em, u-mr-05em, u-mr-1em, u-mr-15em, u-mr-2em ... u-mr-10em
         縦マージン: u-my-0em, u-my-05em, u-my-1em, u-my-15em, u-my-2em ... u-my-10em
         横マージン: u-mx-0em, u-mx-05em, u-mx-1em, u-mx-15em, u-mx-2em ... u-mx-10em

     - u- の後ろに sp- を付加するとスマホ用のクラスになる
----------------------------------------------------------------------------------- */
/* 単位: px */
.u-m-0 {
  margin: 0rem !important;
}

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

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

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

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

.u-my-0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.u-mx-0 {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}

.u-m-5 {
  margin: 0.5rem !important;
}

.u-mt-5 {
  margin-top: 0.5rem !important;
}

.u-mb-5 {
  margin-bottom: 0.5rem !important;
}

.u-ml-5 {
  margin-left: 0.5rem !important;
}

.u-mr-5 {
  margin-right: 0.5rem !important;
}

.u-my-5 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.u-mx-5 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.u-m-10 {
  margin: 1rem !important;
}

.u-mt-10 {
  margin-top: 1rem !important;
}

.u-mb-10 {
  margin-bottom: 1rem !important;
}

.u-ml-10 {
  margin-left: 1rem !important;
}

.u-mr-10 {
  margin-right: 1rem !important;
}

.u-my-10 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.u-mx-10 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.u-m-15 {
  margin: 1.5rem !important;
}

.u-mt-15 {
  margin-top: 1.5rem !important;
}

.u-mb-15 {
  margin-bottom: 1.5rem !important;
}

.u-ml-15 {
  margin-left: 1.5rem !important;
}

.u-mr-15 {
  margin-right: 1.5rem !important;
}

.u-my-15 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.u-mx-15 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

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

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

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

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

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

.u-my-20 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.u-mx-20 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.u-m-25 {
  margin: 2.5rem !important;
}

.u-mt-25 {
  margin-top: 2.5rem !important;
}

.u-mb-25 {
  margin-bottom: 2.5rem !important;
}

.u-ml-25 {
  margin-left: 2.5rem !important;
}

.u-mr-25 {
  margin-right: 2.5rem !important;
}

.u-my-25 {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

.u-mx-25 {
  margin-left: 2.5rem !important;
  margin-right: 2.5rem !important;
}

.u-m-30 {
  margin: 3rem !important;
}

.u-mt-30 {
  margin-top: 3rem !important;
}

.u-mb-30 {
  margin-bottom: 3rem !important;
}

.u-ml-30 {
  margin-left: 3rem !important;
}

.u-mr-30 {
  margin-right: 3rem !important;
}

.u-my-30 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.u-mx-30 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.u-m-35 {
  margin: 3.5rem !important;
}

.u-mt-35 {
  margin-top: 3.5rem !important;
}

.u-mb-35 {
  margin-bottom: 3.5rem !important;
}

.u-ml-35 {
  margin-left: 3.5rem !important;
}

.u-mr-35 {
  margin-right: 3.5rem !important;
}

.u-my-35 {
  margin-top: 3.5rem !important;
  margin-bottom: 3.5rem !important;
}

.u-mx-35 {
  margin-left: 3.5rem !important;
  margin-right: 3.5rem !important;
}

.u-m-40 {
  margin: 4rem !important;
}

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

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

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

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

.u-my-40 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.u-mx-40 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}

.u-m-45 {
  margin: 4.5rem !important;
}

.u-mt-45 {
  margin-top: 4.5rem !important;
}

.u-mb-45 {
  margin-bottom: 4.5rem !important;
}

.u-ml-45 {
  margin-left: 4.5rem !important;
}

.u-mr-45 {
  margin-right: 4.5rem !important;
}

.u-my-45 {
  margin-top: 4.5rem !important;
  margin-bottom: 4.5rem !important;
}

.u-mx-45 {
  margin-left: 4.5rem !important;
  margin-right: 4.5rem !important;
}

.u-m-50 {
  margin: 5rem !important;
}

.u-mt-50 {
  margin-top: 5rem !important;
}

.u-mb-50 {
  margin-bottom: 5rem !important;
}

.u-ml-50 {
  margin-left: 5rem !important;
}

.u-mr-50 {
  margin-right: 5rem !important;
}

.u-my-50 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.u-mx-50 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}

.u-m-55 {
  margin: 5.5rem !important;
}

.u-mt-55 {
  margin-top: 5.5rem !important;
}

.u-mb-55 {
  margin-bottom: 5.5rem !important;
}

.u-ml-55 {
  margin-left: 5.5rem !important;
}

.u-mr-55 {
  margin-right: 5.5rem !important;
}

.u-my-55 {
  margin-top: 5.5rem !important;
  margin-bottom: 5.5rem !important;
}

.u-mx-55 {
  margin-left: 5.5rem !important;
  margin-right: 5.5rem !important;
}

.u-m-60 {
  margin: 6rem !important;
}

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

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

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

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

.u-my-60 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.u-mx-60 {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}

.u-m-65 {
  margin: 6.5rem !important;
}

.u-mt-65 {
  margin-top: 6.5rem !important;
}

.u-mb-65 {
  margin-bottom: 6.5rem !important;
}

.u-ml-65 {
  margin-left: 6.5rem !important;
}

.u-mr-65 {
  margin-right: 6.5rem !important;
}

.u-my-65 {
  margin-top: 6.5rem !important;
  margin-bottom: 6.5rem !important;
}

.u-mx-65 {
  margin-left: 6.5rem !important;
  margin-right: 6.5rem !important;
}

.u-m-70 {
  margin: 7rem !important;
}

.u-mt-70 {
  margin-top: 7rem !important;
}

.u-mb-70 {
  margin-bottom: 7rem !important;
}

.u-ml-70 {
  margin-left: 7rem !important;
}

.u-mr-70 {
  margin-right: 7rem !important;
}

.u-my-70 {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}

.u-mx-70 {
  margin-left: 7rem !important;
  margin-right: 7rem !important;
}

.u-m-75 {
  margin: 7.5rem !important;
}

.u-mt-75 {
  margin-top: 7.5rem !important;
}

.u-mb-75 {
  margin-bottom: 7.5rem !important;
}

.u-ml-75 {
  margin-left: 7.5rem !important;
}

.u-mr-75 {
  margin-right: 7.5rem !important;
}

.u-my-75 {
  margin-top: 7.5rem !important;
  margin-bottom: 7.5rem !important;
}

.u-mx-75 {
  margin-left: 7.5rem !important;
  margin-right: 7.5rem !important;
}

.u-m-80 {
  margin: 8rem !important;
}

.u-mt-80 {
  margin-top: 8rem !important;
}

.u-mb-80 {
  margin-bottom: 8rem !important;
}

.u-ml-80 {
  margin-left: 8rem !important;
}

.u-mr-80 {
  margin-right: 8rem !important;
}

.u-my-80 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}

.u-mx-80 {
  margin-left: 8rem !important;
  margin-right: 8rem !important;
}

.u-m-85 {
  margin: 8.5rem !important;
}

.u-mt-85 {
  margin-top: 8.5rem !important;
}

.u-mb-85 {
  margin-bottom: 8.5rem !important;
}

.u-ml-85 {
  margin-left: 8.5rem !important;
}

.u-mr-85 {
  margin-right: 8.5rem !important;
}

.u-my-85 {
  margin-top: 8.5rem !important;
  margin-bottom: 8.5rem !important;
}

.u-mx-85 {
  margin-left: 8.5rem !important;
  margin-right: 8.5rem !important;
}

.u-m-90 {
  margin: 9rem !important;
}

.u-mt-90 {
  margin-top: 9rem !important;
}

.u-mb-90 {
  margin-bottom: 9rem !important;
}

.u-ml-90 {
  margin-left: 9rem !important;
}

.u-mr-90 {
  margin-right: 9rem !important;
}

.u-my-90 {
  margin-top: 9rem !important;
  margin-bottom: 9rem !important;
}

.u-mx-90 {
  margin-left: 9rem !important;
  margin-right: 9rem !important;
}

.u-m-95 {
  margin: 9.5rem !important;
}

.u-mt-95 {
  margin-top: 9.5rem !important;
}

.u-mb-95 {
  margin-bottom: 9.5rem !important;
}

.u-ml-95 {
  margin-left: 9.5rem !important;
}

.u-mr-95 {
  margin-right: 9.5rem !important;
}

.u-my-95 {
  margin-top: 9.5rem !important;
  margin-bottom: 9.5rem !important;
}

.u-mx-95 {
  margin-left: 9.5rem !important;
  margin-right: 9.5rem !important;
}

.u-m-100 {
  margin: 10rem !important;
}

.u-mt-100 {
  margin-top: 10rem !important;
}

.u-mb-100 {
  margin-bottom: 10rem !important;
}

.u-ml-100 {
  margin-left: 10rem !important;
}

.u-mr-100 {
  margin-right: 10rem !important;
}

.u-my-100 {
  margin-top: 10rem !important;
  margin-bottom: 10rem !important;
}

.u-mx-100 {
  margin-left: 10rem !important;
  margin-right: 10rem !important;
}

.u-m-105 {
  margin: 10.5rem !important;
}

.u-mt-105 {
  margin-top: 10.5rem !important;
}

.u-mb-105 {
  margin-bottom: 10.5rem !important;
}

.u-ml-105 {
  margin-left: 10.5rem !important;
}

.u-mr-105 {
  margin-right: 10.5rem !important;
}

.u-my-105 {
  margin-top: 10.5rem !important;
  margin-bottom: 10.5rem !important;
}

.u-mx-105 {
  margin-left: 10.5rem !important;
  margin-right: 10.5rem !important;
}

.u-m-110 {
  margin: 11rem !important;
}

.u-mt-110 {
  margin-top: 11rem !important;
}

.u-mb-110 {
  margin-bottom: 11rem !important;
}

.u-ml-110 {
  margin-left: 11rem !important;
}

.u-mr-110 {
  margin-right: 11rem !important;
}

.u-my-110 {
  margin-top: 11rem !important;
  margin-bottom: 11rem !important;
}

.u-mx-110 {
  margin-left: 11rem !important;
  margin-right: 11rem !important;
}

.u-m-115 {
  margin: 11.5rem !important;
}

.u-mt-115 {
  margin-top: 11.5rem !important;
}

.u-mb-115 {
  margin-bottom: 11.5rem !important;
}

.u-ml-115 {
  margin-left: 11.5rem !important;
}

.u-mr-115 {
  margin-right: 11.5rem !important;
}

.u-my-115 {
  margin-top: 11.5rem !important;
  margin-bottom: 11.5rem !important;
}

.u-mx-115 {
  margin-left: 11.5rem !important;
  margin-right: 11.5rem !important;
}

.u-m-120 {
  margin: 12rem !important;
}

.u-mt-120 {
  margin-top: 12rem !important;
}

.u-mb-120 {
  margin-bottom: 12rem !important;
}

.u-ml-120 {
  margin-left: 12rem !important;
}

.u-mr-120 {
  margin-right: 12rem !important;
}

.u-my-120 {
  margin-top: 12rem !important;
  margin-bottom: 12rem !important;
}

.u-mx-120 {
  margin-left: 12rem !important;
  margin-right: 12rem !important;
}

.u-m-125 {
  margin: 12.5rem !important;
}

.u-mt-125 {
  margin-top: 12.5rem !important;
}

.u-mb-125 {
  margin-bottom: 12.5rem !important;
}

.u-ml-125 {
  margin-left: 12.5rem !important;
}

.u-mr-125 {
  margin-right: 12.5rem !important;
}

.u-my-125 {
  margin-top: 12.5rem !important;
  margin-bottom: 12.5rem !important;
}

.u-mx-125 {
  margin-left: 12.5rem !important;
  margin-right: 12.5rem !important;
}

.u-m-130 {
  margin: 13rem !important;
}

.u-mt-130 {
  margin-top: 13rem !important;
}

.u-mb-130 {
  margin-bottom: 13rem !important;
}

.u-ml-130 {
  margin-left: 13rem !important;
}

.u-mr-130 {
  margin-right: 13rem !important;
}

.u-my-130 {
  margin-top: 13rem !important;
  margin-bottom: 13rem !important;
}

.u-mx-130 {
  margin-left: 13rem !important;
  margin-right: 13rem !important;
}

.u-m-135 {
  margin: 13.5rem !important;
}

.u-mt-135 {
  margin-top: 13.5rem !important;
}

.u-mb-135 {
  margin-bottom: 13.5rem !important;
}

.u-ml-135 {
  margin-left: 13.5rem !important;
}

.u-mr-135 {
  margin-right: 13.5rem !important;
}

.u-my-135 {
  margin-top: 13.5rem !important;
  margin-bottom: 13.5rem !important;
}

.u-mx-135 {
  margin-left: 13.5rem !important;
  margin-right: 13.5rem !important;
}

.u-m-140 {
  margin: 14rem !important;
}

.u-mt-140 {
  margin-top: 14rem !important;
}

.u-mb-140 {
  margin-bottom: 14rem !important;
}

.u-ml-140 {
  margin-left: 14rem !important;
}

.u-mr-140 {
  margin-right: 14rem !important;
}

.u-my-140 {
  margin-top: 14rem !important;
  margin-bottom: 14rem !important;
}

.u-mx-140 {
  margin-left: 14rem !important;
  margin-right: 14rem !important;
}

.u-m-145 {
  margin: 14.5rem !important;
}

.u-mt-145 {
  margin-top: 14.5rem !important;
}

.u-mb-145 {
  margin-bottom: 14.5rem !important;
}

.u-ml-145 {
  margin-left: 14.5rem !important;
}

.u-mr-145 {
  margin-right: 14.5rem !important;
}

.u-my-145 {
  margin-top: 14.5rem !important;
  margin-bottom: 14.5rem !important;
}

.u-mx-145 {
  margin-left: 14.5rem !important;
  margin-right: 14.5rem !important;
}

.u-m-150 {
  margin: 15rem !important;
}

.u-mt-150 {
  margin-top: 15rem !important;
}

.u-mb-150 {
  margin-bottom: 15rem !important;
}

.u-ml-150 {
  margin-left: 15rem !important;
}

.u-mr-150 {
  margin-right: 15rem !important;
}

.u-my-150 {
  margin-top: 15rem !important;
  margin-bottom: 15rem !important;
}

.u-mx-150 {
  margin-left: 15rem !important;
  margin-right: 15rem !important;
}

/* 単位: em */
.u-m-05em {
  margin: 0.5em !important;
}

.u-mt-05em {
  margin-top: 0.5em !important;
}

.u-mb-05em {
  margin-bottom: 0.5em !important;
}

.u-ml-05em {
  margin-left: 0.5em !important;
}

.u-mr-05em {
  margin-right: 0.5em !important;
}

.u-my-05em {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

.u-mx-05em {
  margin-left: 0.5em !important;
  margin-right: 0.5em !important;
}

.u-m-1em {
  margin: 1em !important;
}

.u-mt-1em {
  margin-top: 1em !important;
}

.u-mb-1em {
  margin-bottom: 1em !important;
}

.u-ml-1em {
  margin-left: 1em !important;
}

.u-mr-1em {
  margin-right: 1em !important;
}

.u-my-1em {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}

.u-mx-1em {
  margin-left: 1em !important;
  margin-right: 1em !important;
}

.u-m-15em {
  margin: 1.5em !important;
}

.u-mt-15em {
  margin-top: 1.5em !important;
}

.u-mb-15em {
  margin-bottom: 1.5em !important;
}

.u-ml-15em {
  margin-left: 1.5em !important;
}

.u-mr-15em {
  margin-right: 1.5em !important;
}

.u-my-15em {
  margin-top: 1.5em !important;
  margin-bottom: 1.5em !important;
}

.u-mx-15em {
  margin-left: 1.5em !important;
  margin-right: 1.5em !important;
}

.u-m-2em {
  margin: 2em !important;
}

.u-mt-2em {
  margin-top: 2em !important;
}

.u-mb-2em {
  margin-bottom: 2em !important;
}

.u-ml-2em {
  margin-left: 2em !important;
}

.u-mr-2em {
  margin-right: 2em !important;
}

.u-my-2em {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}

.u-mx-2em {
  margin-left: 2em !important;
  margin-right: 2em !important;
}

.u-m-25em {
  margin: 2.5em !important;
}

.u-mt-25em {
  margin-top: 2.5em !important;
}

.u-mb-25em {
  margin-bottom: 2.5em !important;
}

.u-ml-25em {
  margin-left: 2.5em !important;
}

.u-mr-25em {
  margin-right: 2.5em !important;
}

.u-my-25em {
  margin-top: 2.5em !important;
  margin-bottom: 2.5em !important;
}

.u-mx-25em {
  margin-left: 2.5em !important;
  margin-right: 2.5em !important;
}

.u-m-3em {
  margin: 3em !important;
}

.u-mt-3em {
  margin-top: 3em !important;
}

.u-mb-3em {
  margin-bottom: 3em !important;
}

.u-ml-3em {
  margin-left: 3em !important;
}

.u-mr-3em {
  margin-right: 3em !important;
}

.u-my-3em {
  margin-top: 3em !important;
  margin-bottom: 3em !important;
}

.u-mx-3em {
  margin-left: 3em !important;
  margin-right: 3em !important;
}

.u-m-35em {
  margin: 3.5em !important;
}

.u-mt-35em {
  margin-top: 3.5em !important;
}

.u-mb-35em {
  margin-bottom: 3.5em !important;
}

.u-ml-35em {
  margin-left: 3.5em !important;
}

.u-mr-35em {
  margin-right: 3.5em !important;
}

.u-my-35em {
  margin-top: 3.5em !important;
  margin-bottom: 3.5em !important;
}

.u-mx-35em {
  margin-left: 3.5em !important;
  margin-right: 3.5em !important;
}

.u-m-4em {
  margin: 4em !important;
}

.u-mt-4em {
  margin-top: 4em !important;
}

.u-mb-4em {
  margin-bottom: 4em !important;
}

.u-ml-4em {
  margin-left: 4em !important;
}

.u-mr-4em {
  margin-right: 4em !important;
}

.u-my-4em {
  margin-top: 4em !important;
  margin-bottom: 4em !important;
}

.u-mx-4em {
  margin-left: 4em !important;
  margin-right: 4em !important;
}

.u-m-45em {
  margin: 4.5em !important;
}

.u-mt-45em {
  margin-top: 4.5em !important;
}

.u-mb-45em {
  margin-bottom: 4.5em !important;
}

.u-ml-45em {
  margin-left: 4.5em !important;
}

.u-mr-45em {
  margin-right: 4.5em !important;
}

.u-my-45em {
  margin-top: 4.5em !important;
  margin-bottom: 4.5em !important;
}

.u-mx-45em {
  margin-left: 4.5em !important;
  margin-right: 4.5em !important;
}

.u-m-5em {
  margin: 5em !important;
}

.u-mt-5em {
  margin-top: 5em !important;
}

.u-mb-5em {
  margin-bottom: 5em !important;
}

.u-ml-5em {
  margin-left: 5em !important;
}

.u-mr-5em {
  margin-right: 5em !important;
}

.u-my-5em {
  margin-top: 5em !important;
  margin-bottom: 5em !important;
}

.u-mx-5em {
  margin-left: 5em !important;
  margin-right: 5em !important;
}

.u-m-55em {
  margin: 5.5em !important;
}

.u-mt-55em {
  margin-top: 5.5em !important;
}

.u-mb-55em {
  margin-bottom: 5.5em !important;
}

.u-ml-55em {
  margin-left: 5.5em !important;
}

.u-mr-55em {
  margin-right: 5.5em !important;
}

.u-my-55em {
  margin-top: 5.5em !important;
  margin-bottom: 5.5em !important;
}

.u-mx-55em {
  margin-left: 5.5em !important;
  margin-right: 5.5em !important;
}

.u-m-6em {
  margin: 6em !important;
}

.u-mt-6em {
  margin-top: 6em !important;
}

.u-mb-6em {
  margin-bottom: 6em !important;
}

.u-ml-6em {
  margin-left: 6em !important;
}

.u-mr-6em {
  margin-right: 6em !important;
}

.u-my-6em {
  margin-top: 6em !important;
  margin-bottom: 6em !important;
}

.u-mx-6em {
  margin-left: 6em !important;
  margin-right: 6em !important;
}

.u-m-65em {
  margin: 6.5em !important;
}

.u-mt-65em {
  margin-top: 6.5em !important;
}

.u-mb-65em {
  margin-bottom: 6.5em !important;
}

.u-ml-65em {
  margin-left: 6.5em !important;
}

.u-mr-65em {
  margin-right: 6.5em !important;
}

.u-my-65em {
  margin-top: 6.5em !important;
  margin-bottom: 6.5em !important;
}

.u-mx-65em {
  margin-left: 6.5em !important;
  margin-right: 6.5em !important;
}

.u-m-7em {
  margin: 7em !important;
}

.u-mt-7em {
  margin-top: 7em !important;
}

.u-mb-7em {
  margin-bottom: 7em !important;
}

.u-ml-7em {
  margin-left: 7em !important;
}

.u-mr-7em {
  margin-right: 7em !important;
}

.u-my-7em {
  margin-top: 7em !important;
  margin-bottom: 7em !important;
}

.u-mx-7em {
  margin-left: 7em !important;
  margin-right: 7em !important;
}

.u-m-75em {
  margin: 7.5em !important;
}

.u-mt-75em {
  margin-top: 7.5em !important;
}

.u-mb-75em {
  margin-bottom: 7.5em !important;
}

.u-ml-75em {
  margin-left: 7.5em !important;
}

.u-mr-75em {
  margin-right: 7.5em !important;
}

.u-my-75em {
  margin-top: 7.5em !important;
  margin-bottom: 7.5em !important;
}

.u-mx-75em {
  margin-left: 7.5em !important;
  margin-right: 7.5em !important;
}

.u-m-8em {
  margin: 8em !important;
}

.u-mt-8em {
  margin-top: 8em !important;
}

.u-mb-8em {
  margin-bottom: 8em !important;
}

.u-ml-8em {
  margin-left: 8em !important;
}

.u-mr-8em {
  margin-right: 8em !important;
}

.u-my-8em {
  margin-top: 8em !important;
  margin-bottom: 8em !important;
}

.u-mx-8em {
  margin-left: 8em !important;
  margin-right: 8em !important;
}

.u-m-85em {
  margin: 8.5em !important;
}

.u-mt-85em {
  margin-top: 8.5em !important;
}

.u-mb-85em {
  margin-bottom: 8.5em !important;
}

.u-ml-85em {
  margin-left: 8.5em !important;
}

.u-mr-85em {
  margin-right: 8.5em !important;
}

.u-my-85em {
  margin-top: 8.5em !important;
  margin-bottom: 8.5em !important;
}

.u-mx-85em {
  margin-left: 8.5em !important;
  margin-right: 8.5em !important;
}

.u-m-9em {
  margin: 9em !important;
}

.u-mt-9em {
  margin-top: 9em !important;
}

.u-mb-9em {
  margin-bottom: 9em !important;
}

.u-ml-9em {
  margin-left: 9em !important;
}

.u-mr-9em {
  margin-right: 9em !important;
}

.u-my-9em {
  margin-top: 9em !important;
  margin-bottom: 9em !important;
}

.u-mx-9em {
  margin-left: 9em !important;
  margin-right: 9em !important;
}

.u-m-95em {
  margin: 9.5em !important;
}

.u-mt-95em {
  margin-top: 9.5em !important;
}

.u-mb-95em {
  margin-bottom: 9.5em !important;
}

.u-ml-95em {
  margin-left: 9.5em !important;
}

.u-mr-95em {
  margin-right: 9.5em !important;
}

.u-my-95em {
  margin-top: 9.5em !important;
  margin-bottom: 9.5em !important;
}

.u-mx-95em {
  margin-left: 9.5em !important;
  margin-right: 9.5em !important;
}

.u-m-10em {
  margin: 10em !important;
}

.u-mt-10em {
  margin-top: 10em !important;
}

.u-mb-10em {
  margin-bottom: 10em !important;
}

.u-ml-10em {
  margin-left: 10em !important;
}

.u-mr-10em {
  margin-right: 10em !important;
}

.u-my-10em {
  margin-top: 10em !important;
  margin-bottom: 10em !important;
}

.u-mx-10em {
  margin-left: 10em !important;
  margin-right: 10em !important;
}

.u-m-auto {
  margin: auto !important;
}

.u-mt-auto {
  margin-top: auto !important;
}

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

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

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

.u-my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.u-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* SP版：プリフィクス sp- を付加 */
@media print, screen and (max-width: 599px) {
  /* 単位: px */
  .u-sp-m-0 {
    margin: 0px !important;
  }

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

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

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

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

  .u-sp-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .u-sp-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .u-sp-m-5 {
    margin: 5px !important;
  }

  .u-sp-mt-5 {
    margin-top: 5px !important;
  }

  .u-sp-mb-5 {
    margin-bottom: 5px !important;
  }

  .u-sp-ml-5 {
    margin-left: 5px !important;
  }

  .u-sp-mr-5 {
    margin-right: 5px !important;
  }

  .u-sp-my-5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  .u-sp-mx-5 {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }

  .u-sp-m-10 {
    margin: 10px !important;
  }

  .u-sp-mt-10 {
    margin-top: 10px !important;
  }

  .u-sp-mb-10 {
    margin-bottom: 10px !important;
  }

  .u-sp-ml-10 {
    margin-left: 10px !important;
  }

  .u-sp-mr-10 {
    margin-right: 10px !important;
  }

  .u-sp-my-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .u-sp-mx-10 {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .u-sp-m-15 {
    margin: 15px !important;
  }

  .u-sp-mt-15 {
    margin-top: 15px !important;
  }

  .u-sp-mb-15 {
    margin-bottom: 15px !important;
  }

  .u-sp-ml-15 {
    margin-left: 15px !important;
  }

  .u-sp-mr-15 {
    margin-right: 15px !important;
  }

  .u-sp-my-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  .u-sp-mx-15 {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  .u-sp-m-20 {
    margin: 20px !important;
  }

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

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

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

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

  .u-sp-my-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  .u-sp-mx-20 {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .u-sp-m-25 {
    margin: 25px !important;
  }

  .u-sp-mt-25 {
    margin-top: 25px !important;
  }

  .u-sp-mb-25 {
    margin-bottom: 25px !important;
  }

  .u-sp-ml-25 {
    margin-left: 25px !important;
  }

  .u-sp-mr-25 {
    margin-right: 25px !important;
  }

  .u-sp-my-25 {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }

  .u-sp-mx-25 {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }

  .u-sp-m-30 {
    margin: 30px !important;
  }

  .u-sp-mt-30 {
    margin-top: 30px !important;
  }

  .u-sp-mb-30 {
    margin-bottom: 30px !important;
  }

  .u-sp-ml-30 {
    margin-left: 30px !important;
  }

  .u-sp-mr-30 {
    margin-right: 30px !important;
  }

  .u-sp-my-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  .u-sp-mx-30 {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }

  .u-sp-m-35 {
    margin: 35px !important;
  }

  .u-sp-mt-35 {
    margin-top: 35px !important;
  }

  .u-sp-mb-35 {
    margin-bottom: 35px !important;
  }

  .u-sp-ml-35 {
    margin-left: 35px !important;
  }

  .u-sp-mr-35 {
    margin-right: 35px !important;
  }

  .u-sp-my-35 {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }

  .u-sp-mx-35 {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }

  .u-sp-m-40 {
    margin: 40px !important;
  }

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

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

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

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

  .u-sp-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }

  .u-sp-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }

  .u-sp-m-45 {
    margin: 45px !important;
  }

  .u-sp-mt-45 {
    margin-top: 45px !important;
  }

  .u-sp-mb-45 {
    margin-bottom: 45px !important;
  }

  .u-sp-ml-45 {
    margin-left: 45px !important;
  }

  .u-sp-mr-45 {
    margin-right: 45px !important;
  }

  .u-sp-my-45 {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }

  .u-sp-mx-45 {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }

  .u-sp-m-50 {
    margin: 50px !important;
  }

  .u-sp-mt-50 {
    margin-top: 50px !important;
  }

  .u-sp-mb-50 {
    margin-bottom: 50px !important;
  }

  .u-sp-ml-50 {
    margin-left: 50px !important;
  }

  .u-sp-mr-50 {
    margin-right: 50px !important;
  }

  .u-sp-my-50 {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }

  .u-sp-mx-50 {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }

  .u-sp-m-55 {
    margin: 55px !important;
  }

  .u-sp-mt-55 {
    margin-top: 55px !important;
  }

  .u-sp-mb-55 {
    margin-bottom: 55px !important;
  }

  .u-sp-ml-55 {
    margin-left: 55px !important;
  }

  .u-sp-mr-55 {
    margin-right: 55px !important;
  }

  .u-sp-my-55 {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }

  .u-sp-mx-55 {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }

  .u-sp-m-60 {
    margin: 60px !important;
  }

  .u-sp-mt-60 {
    margin-top: 60px !important;
  }

  .u-sp-mb-60 {
    margin-bottom: 60px !important;
  }

  .u-sp-ml-60 {
    margin-left: 60px !important;
  }

  .u-sp-mr-60 {
    margin-right: 60px !important;
  }

  .u-sp-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }

  .u-sp-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }

  .u-sp-m-65 {
    margin: 65px !important;
  }

  .u-sp-mt-65 {
    margin-top: 65px !important;
  }

  .u-sp-mb-65 {
    margin-bottom: 65px !important;
  }

  .u-sp-ml-65 {
    margin-left: 65px !important;
  }

  .u-sp-mr-65 {
    margin-right: 65px !important;
  }

  .u-sp-my-65 {
    margin-top: 65px !important;
    margin-bottom: 65px !important;
  }

  .u-sp-mx-65 {
    margin-left: 65px !important;
    margin-right: 65px !important;
  }

  .u-sp-m-70 {
    margin: 70px !important;
  }

  .u-sp-mt-70 {
    margin-top: 70px !important;
  }

  .u-sp-mb-70 {
    margin-bottom: 70px !important;
  }

  .u-sp-ml-70 {
    margin-left: 70px !important;
  }

  .u-sp-mr-70 {
    margin-right: 70px !important;
  }

  .u-sp-my-70 {
    margin-top: 70px !important;
    margin-bottom: 70px !important;
  }

  .u-sp-mx-70 {
    margin-left: 70px !important;
    margin-right: 70px !important;
  }

  .u-sp-m-75 {
    margin: 75px !important;
  }

  .u-sp-mt-75 {
    margin-top: 75px !important;
  }

  .u-sp-mb-75 {
    margin-bottom: 75px !important;
  }

  .u-sp-ml-75 {
    margin-left: 75px !important;
  }

  .u-sp-mr-75 {
    margin-right: 75px !important;
  }

  .u-sp-my-75 {
    margin-top: 75px !important;
    margin-bottom: 75px !important;
  }

  .u-sp-mx-75 {
    margin-left: 75px !important;
    margin-right: 75px !important;
  }

  .u-sp-m-80 {
    margin: 80px !important;
  }

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

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

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

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

  .u-sp-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }

  .u-sp-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }

  .u-sp-m-85 {
    margin: 85px !important;
  }

  .u-sp-mt-85 {
    margin-top: 85px !important;
  }

  .u-sp-mb-85 {
    margin-bottom: 85px !important;
  }

  .u-sp-ml-85 {
    margin-left: 85px !important;
  }

  .u-sp-mr-85 {
    margin-right: 85px !important;
  }

  .u-sp-my-85 {
    margin-top: 85px !important;
    margin-bottom: 85px !important;
  }

  .u-sp-mx-85 {
    margin-left: 85px !important;
    margin-right: 85px !important;
  }

  .u-sp-m-90 {
    margin: 90px !important;
  }

  .u-sp-mt-90 {
    margin-top: 90px !important;
  }

  .u-sp-mb-90 {
    margin-bottom: 90px !important;
  }

  .u-sp-ml-90 {
    margin-left: 90px !important;
  }

  .u-sp-mr-90 {
    margin-right: 90px !important;
  }

  .u-sp-my-90 {
    margin-top: 90px !important;
    margin-bottom: 90px !important;
  }

  .u-sp-mx-90 {
    margin-left: 90px !important;
    margin-right: 90px !important;
  }

  .u-sp-m-95 {
    margin: 95px !important;
  }

  .u-sp-mt-95 {
    margin-top: 95px !important;
  }

  .u-sp-mb-95 {
    margin-bottom: 95px !important;
  }

  .u-sp-ml-95 {
    margin-left: 95px !important;
  }

  .u-sp-mr-95 {
    margin-right: 95px !important;
  }

  .u-sp-my-95 {
    margin-top: 95px !important;
    margin-bottom: 95px !important;
  }

  .u-sp-mx-95 {
    margin-left: 95px !important;
    margin-right: 95px !important;
  }

  .u-sp-m-100 {
    margin: 100px !important;
  }

  .u-sp-mt-100 {
    margin-top: 100px !important;
  }

  .u-sp-mb-100 {
    margin-bottom: 100px !important;
  }

  .u-sp-ml-100 {
    margin-left: 100px !important;
  }

  .u-sp-mr-100 {
    margin-right: 100px !important;
  }

  .u-sp-my-100 {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
  }

  .u-sp-mx-100 {
    margin-left: 100px !important;
    margin-right: 100px !important;
  }

  .u-sp-m-105 {
    margin: 105px !important;
  }

  .u-sp-mt-105 {
    margin-top: 105px !important;
  }

  .u-sp-mb-105 {
    margin-bottom: 105px !important;
  }

  .u-sp-ml-105 {
    margin-left: 105px !important;
  }

  .u-sp-mr-105 {
    margin-right: 105px !important;
  }

  .u-sp-my-105 {
    margin-top: 105px !important;
    margin-bottom: 105px !important;
  }

  .u-sp-mx-105 {
    margin-left: 105px !important;
    margin-right: 105px !important;
  }

  .u-sp-m-110 {
    margin: 110px !important;
  }

  .u-sp-mt-110 {
    margin-top: 110px !important;
  }

  .u-sp-mb-110 {
    margin-bottom: 110px !important;
  }

  .u-sp-ml-110 {
    margin-left: 110px !important;
  }

  .u-sp-mr-110 {
    margin-right: 110px !important;
  }

  .u-sp-my-110 {
    margin-top: 110px !important;
    margin-bottom: 110px !important;
  }

  .u-sp-mx-110 {
    margin-left: 110px !important;
    margin-right: 110px !important;
  }

  .u-sp-m-115 {
    margin: 115px !important;
  }

  .u-sp-mt-115 {
    margin-top: 115px !important;
  }

  .u-sp-mb-115 {
    margin-bottom: 115px !important;
  }

  .u-sp-ml-115 {
    margin-left: 115px !important;
  }

  .u-sp-mr-115 {
    margin-right: 115px !important;
  }

  .u-sp-my-115 {
    margin-top: 115px !important;
    margin-bottom: 115px !important;
  }

  .u-sp-mx-115 {
    margin-left: 115px !important;
    margin-right: 115px !important;
  }

  .u-sp-m-120 {
    margin: 120px !important;
  }

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

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

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

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

  .u-sp-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }

  .u-sp-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }

  .u-sp-m-125 {
    margin: 125px !important;
  }

  .u-sp-mt-125 {
    margin-top: 125px !important;
  }

  .u-sp-mb-125 {
    margin-bottom: 125px !important;
  }

  .u-sp-ml-125 {
    margin-left: 125px !important;
  }

  .u-sp-mr-125 {
    margin-right: 125px !important;
  }

  .u-sp-my-125 {
    margin-top: 125px !important;
    margin-bottom: 125px !important;
  }

  .u-sp-mx-125 {
    margin-left: 125px !important;
    margin-right: 125px !important;
  }

  .u-sp-m-130 {
    margin: 130px !important;
  }

  .u-sp-mt-130 {
    margin-top: 130px !important;
  }

  .u-sp-mb-130 {
    margin-bottom: 130px !important;
  }

  .u-sp-ml-130 {
    margin-left: 130px !important;
  }

  .u-sp-mr-130 {
    margin-right: 130px !important;
  }

  .u-sp-my-130 {
    margin-top: 130px !important;
    margin-bottom: 130px !important;
  }

  .u-sp-mx-130 {
    margin-left: 130px !important;
    margin-right: 130px !important;
  }

  .u-sp-m-135 {
    margin: 135px !important;
  }

  .u-sp-mt-135 {
    margin-top: 135px !important;
  }

  .u-sp-mb-135 {
    margin-bottom: 135px !important;
  }

  .u-sp-ml-135 {
    margin-left: 135px !important;
  }

  .u-sp-mr-135 {
    margin-right: 135px !important;
  }

  .u-sp-my-135 {
    margin-top: 135px !important;
    margin-bottom: 135px !important;
  }

  .u-sp-mx-135 {
    margin-left: 135px !important;
    margin-right: 135px !important;
  }

  .u-sp-m-140 {
    margin: 140px !important;
  }

  .u-sp-mt-140 {
    margin-top: 140px !important;
  }

  .u-sp-mb-140 {
    margin-bottom: 140px !important;
  }

  .u-sp-ml-140 {
    margin-left: 140px !important;
  }

  .u-sp-mr-140 {
    margin-right: 140px !important;
  }

  .u-sp-my-140 {
    margin-top: 140px !important;
    margin-bottom: 140px !important;
  }

  .u-sp-mx-140 {
    margin-left: 140px !important;
    margin-right: 140px !important;
  }

  .u-sp-m-145 {
    margin: 145px !important;
  }

  .u-sp-mt-145 {
    margin-top: 145px !important;
  }

  .u-sp-mb-145 {
    margin-bottom: 145px !important;
  }

  .u-sp-ml-145 {
    margin-left: 145px !important;
  }

  .u-sp-mr-145 {
    margin-right: 145px !important;
  }

  .u-sp-my-145 {
    margin-top: 145px !important;
    margin-bottom: 145px !important;
  }

  .u-sp-mx-145 {
    margin-left: 145px !important;
    margin-right: 145px !important;
  }

  .u-sp-m-150 {
    margin: 150px !important;
  }

  .u-sp-mt-150 {
    margin-top: 150px !important;
  }

  .u-sp-mb-150 {
    margin-bottom: 150px !important;
  }

  .u-sp-ml-150 {
    margin-left: 150px !important;
  }

  .u-sp-mr-150 {
    margin-right: 150px !important;
  }

  .u-sp-my-150 {
    margin-top: 150px !important;
    margin-bottom: 150px !important;
  }

  .u-sp-mx-150 {
    margin-left: 150px !important;
    margin-right: 150px !important;
  }

  /* 単位: em */
  .u-sp-m-05em {
    margin: 0.5em !important;
  }

  .u-sp-mt-05em {
    margin-top: 0.5em !important;
  }

  .u-sp-mb-05em {
    margin-bottom: 0.5em !important;
  }

  .u-sp-ml-05em {
    margin-left: 0.5em !important;
  }

  .u-sp-mr-05em {
    margin-right: 0.5em !important;
  }

  .u-sp-my-05em {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
  }

  .u-sp-mx-05em {
    margin-left: 0.5em !important;
    margin-right: 0.5em !important;
  }

  .u-sp-m-1em {
    margin: 1em !important;
  }

  .u-sp-mt-1em {
    margin-top: 1em !important;
  }

  .u-sp-mb-1em {
    margin-bottom: 1em !important;
  }

  .u-sp-ml-1em {
    margin-left: 1em !important;
  }

  .u-sp-mr-1em {
    margin-right: 1em !important;
  }

  .u-sp-my-1em {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }

  .u-sp-mx-1em {
    margin-left: 1em !important;
    margin-right: 1em !important;
  }

  .u-sp-m-15em {
    margin: 1.5em !important;
  }

  .u-sp-mt-15em {
    margin-top: 1.5em !important;
  }

  .u-sp-mb-15em {
    margin-bottom: 1.5em !important;
  }

  .u-sp-ml-15em {
    margin-left: 1.5em !important;
  }

  .u-sp-mr-15em {
    margin-right: 1.5em !important;
  }

  .u-sp-my-15em {
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
  }

  .u-sp-mx-15em {
    margin-left: 1.5em !important;
    margin-right: 1.5em !important;
  }

  .u-sp-m-2em {
    margin: 2em !important;
  }

  .u-sp-mt-2em {
    margin-top: 2em !important;
  }

  .u-sp-mb-2em {
    margin-bottom: 2em !important;
  }

  .u-sp-ml-2em {
    margin-left: 2em !important;
  }

  .u-sp-mr-2em {
    margin-right: 2em !important;
  }

  .u-sp-my-2em {
    margin-top: 2em !important;
    margin-bottom: 2em !important;
  }

  .u-sp-mx-2em {
    margin-left: 2em !important;
    margin-right: 2em !important;
  }

  .u-sp-m-25em {
    margin: 2.5em !important;
  }

  .u-sp-mt-25em {
    margin-top: 2.5em !important;
  }

  .u-sp-mb-25em {
    margin-bottom: 2.5em !important;
  }

  .u-sp-ml-25em {
    margin-left: 2.5em !important;
  }

  .u-sp-mr-25em {
    margin-right: 2.5em !important;
  }

  .u-sp-my-25em {
    margin-top: 2.5em !important;
    margin-bottom: 2.5em !important;
  }

  .u-sp-mx-25em {
    margin-left: 2.5em !important;
    margin-right: 2.5em !important;
  }

  .u-sp-m-3em {
    margin: 3em !important;
  }

  .u-sp-mt-3em {
    margin-top: 3em !important;
  }

  .u-sp-mb-3em {
    margin-bottom: 3em !important;
  }

  .u-sp-ml-3em {
    margin-left: 3em !important;
  }

  .u-sp-mr-3em {
    margin-right: 3em !important;
  }

  .u-sp-my-3em {
    margin-top: 3em !important;
    margin-bottom: 3em !important;
  }

  .u-sp-mx-3em {
    margin-left: 3em !important;
    margin-right: 3em !important;
  }

  .u-sp-m-35em {
    margin: 3.5em !important;
  }

  .u-sp-mt-35em {
    margin-top: 3.5em !important;
  }

  .u-sp-mb-35em {
    margin-bottom: 3.5em !important;
  }

  .u-sp-ml-35em {
    margin-left: 3.5em !important;
  }

  .u-sp-mr-35em {
    margin-right: 3.5em !important;
  }

  .u-sp-my-35em {
    margin-top: 3.5em !important;
    margin-bottom: 3.5em !important;
  }

  .u-sp-mx-35em {
    margin-left: 3.5em !important;
    margin-right: 3.5em !important;
  }

  .u-sp-m-4em {
    margin: 4em !important;
  }

  .u-sp-mt-4em {
    margin-top: 4em !important;
  }

  .u-sp-mb-4em {
    margin-bottom: 4em !important;
  }

  .u-sp-ml-4em {
    margin-left: 4em !important;
  }

  .u-sp-mr-4em {
    margin-right: 4em !important;
  }

  .u-sp-my-4em {
    margin-top: 4em !important;
    margin-bottom: 4em !important;
  }

  .u-sp-mx-4em {
    margin-left: 4em !important;
    margin-right: 4em !important;
  }

  .u-sp-m-45em {
    margin: 4.5em !important;
  }

  .u-sp-mt-45em {
    margin-top: 4.5em !important;
  }

  .u-sp-mb-45em {
    margin-bottom: 4.5em !important;
  }

  .u-sp-ml-45em {
    margin-left: 4.5em !important;
  }

  .u-sp-mr-45em {
    margin-right: 4.5em !important;
  }

  .u-sp-my-45em {
    margin-top: 4.5em !important;
    margin-bottom: 4.5em !important;
  }

  .u-sp-mx-45em {
    margin-left: 4.5em !important;
    margin-right: 4.5em !important;
  }

  .u-sp-m-5em {
    margin: 5em !important;
  }

  .u-sp-mt-5em {
    margin-top: 5em !important;
  }

  .u-sp-mb-5em {
    margin-bottom: 5em !important;
  }

  .u-sp-ml-5em {
    margin-left: 5em !important;
  }

  .u-sp-mr-5em {
    margin-right: 5em !important;
  }

  .u-sp-my-5em {
    margin-top: 5em !important;
    margin-bottom: 5em !important;
  }

  .u-sp-mx-5em {
    margin-left: 5em !important;
    margin-right: 5em !important;
  }

  .u-sp-m-55em {
    margin: 5.5em !important;
  }

  .u-sp-mt-55em {
    margin-top: 5.5em !important;
  }

  .u-sp-mb-55em {
    margin-bottom: 5.5em !important;
  }

  .u-sp-ml-55em {
    margin-left: 5.5em !important;
  }

  .u-sp-mr-55em {
    margin-right: 5.5em !important;
  }

  .u-sp-my-55em {
    margin-top: 5.5em !important;
    margin-bottom: 5.5em !important;
  }

  .u-sp-mx-55em {
    margin-left: 5.5em !important;
    margin-right: 5.5em !important;
  }

  .u-sp-m-6em {
    margin: 6em !important;
  }

  .u-sp-mt-6em {
    margin-top: 6em !important;
  }

  .u-sp-mb-6em {
    margin-bottom: 6em !important;
  }

  .u-sp-ml-6em {
    margin-left: 6em !important;
  }

  .u-sp-mr-6em {
    margin-right: 6em !important;
  }

  .u-sp-my-6em {
    margin-top: 6em !important;
    margin-bottom: 6em !important;
  }

  .u-sp-mx-6em {
    margin-left: 6em !important;
    margin-right: 6em !important;
  }

  .u-sp-m-65em {
    margin: 6.5em !important;
  }

  .u-sp-mt-65em {
    margin-top: 6.5em !important;
  }

  .u-sp-mb-65em {
    margin-bottom: 6.5em !important;
  }

  .u-sp-ml-65em {
    margin-left: 6.5em !important;
  }

  .u-sp-mr-65em {
    margin-right: 6.5em !important;
  }

  .u-sp-my-65em {
    margin-top: 6.5em !important;
    margin-bottom: 6.5em !important;
  }

  .u-sp-mx-65em {
    margin-left: 6.5em !important;
    margin-right: 6.5em !important;
  }

  .u-sp-m-7em {
    margin: 7em !important;
  }

  .u-sp-mt-7em {
    margin-top: 7em !important;
  }

  .u-sp-mb-7em {
    margin-bottom: 7em !important;
  }

  .u-sp-ml-7em {
    margin-left: 7em !important;
  }

  .u-sp-mr-7em {
    margin-right: 7em !important;
  }

  .u-sp-my-7em {
    margin-top: 7em !important;
    margin-bottom: 7em !important;
  }

  .u-sp-mx-7em {
    margin-left: 7em !important;
    margin-right: 7em !important;
  }

  .u-sp-m-75em {
    margin: 7.5em !important;
  }

  .u-sp-mt-75em {
    margin-top: 7.5em !important;
  }

  .u-sp-mb-75em {
    margin-bottom: 7.5em !important;
  }

  .u-sp-ml-75em {
    margin-left: 7.5em !important;
  }

  .u-sp-mr-75em {
    margin-right: 7.5em !important;
  }

  .u-sp-my-75em {
    margin-top: 7.5em !important;
    margin-bottom: 7.5em !important;
  }

  .u-sp-mx-75em {
    margin-left: 7.5em !important;
    margin-right: 7.5em !important;
  }

  .u-sp-m-8em {
    margin: 8em !important;
  }

  .u-sp-mt-8em {
    margin-top: 8em !important;
  }

  .u-sp-mb-8em {
    margin-bottom: 8em !important;
  }

  .u-sp-ml-8em {
    margin-left: 8em !important;
  }

  .u-sp-mr-8em {
    margin-right: 8em !important;
  }

  .u-sp-my-8em {
    margin-top: 8em !important;
    margin-bottom: 8em !important;
  }

  .u-sp-mx-8em {
    margin-left: 8em !important;
    margin-right: 8em !important;
  }

  .u-sp-m-85em {
    margin: 8.5em !important;
  }

  .u-sp-mt-85em {
    margin-top: 8.5em !important;
  }

  .u-sp-mb-85em {
    margin-bottom: 8.5em !important;
  }

  .u-sp-ml-85em {
    margin-left: 8.5em !important;
  }

  .u-sp-mr-85em {
    margin-right: 8.5em !important;
  }

  .u-sp-my-85em {
    margin-top: 8.5em !important;
    margin-bottom: 8.5em !important;
  }

  .u-sp-mx-85em {
    margin-left: 8.5em !important;
    margin-right: 8.5em !important;
  }

  .u-sp-m-9em {
    margin: 9em !important;
  }

  .u-sp-mt-9em {
    margin-top: 9em !important;
  }

  .u-sp-mb-9em {
    margin-bottom: 9em !important;
  }

  .u-sp-ml-9em {
    margin-left: 9em !important;
  }

  .u-sp-mr-9em {
    margin-right: 9em !important;
  }

  .u-sp-my-9em {
    margin-top: 9em !important;
    margin-bottom: 9em !important;
  }

  .u-sp-mx-9em {
    margin-left: 9em !important;
    margin-right: 9em !important;
  }

  .u-sp-m-95em {
    margin: 9.5em !important;
  }

  .u-sp-mt-95em {
    margin-top: 9.5em !important;
  }

  .u-sp-mb-95em {
    margin-bottom: 9.5em !important;
  }

  .u-sp-ml-95em {
    margin-left: 9.5em !important;
  }

  .u-sp-mr-95em {
    margin-right: 9.5em !important;
  }

  .u-sp-my-95em {
    margin-top: 9.5em !important;
    margin-bottom: 9.5em !important;
  }

  .u-sp-mx-95em {
    margin-left: 9.5em !important;
    margin-right: 9.5em !important;
  }

  .u-sp-m-10em {
    margin: 10em !important;
  }

  .u-sp-mt-10em {
    margin-top: 10em !important;
  }

  .u-sp-mb-10em {
    margin-bottom: 10em !important;
  }

  .u-sp-ml-10em {
    margin-left: 10em !important;
  }

  .u-sp-mr-10em {
    margin-right: 10em !important;
  }

  .u-sp-my-10em {
    margin-top: 10em !important;
    margin-bottom: 10em !important;
  }

  .u-sp-mx-10em {
    margin-left: 10em !important;
    margin-right: 10em !important;
  }

  .u-sp-m-auto {
    margin: auto !important;
  }

  .u-sp-mt-auto {
    margin-top: auto !important;
  }

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

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

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

  .u-sp-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .u-sp-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* --------------------------------------------------------------------------------
   ユーティリティクラス - パディング
   --------------------------------------------------------------------------------
     - 単位 px ※実際の指定では px ではなく rem が使われている（10px = 1rem）
         パディング　: u-p-0,  u-p-5  ... u-p-150,  u-p-auto
         上パディング: u-pt-0, u-pt-5 ... u-pt-150, u-pt-auto
         下パディング: u-pb-0, u-pb-5 ... u-pb-150, u-pb-auto
         左パディング: u-pl-0, u-pl-5 ... u-pl-150, u-pl-auto
         右パディング: u-pr-0, u-pr-5 ... u-pr-150, u-pr-auto
         横パディング: u-py-0, u-py-5 ... u-py-150, u-py-auto
         縦パディング: u-px-0, u-px-5 ... u-px-150, u-px-auto

     - 単位 em（0.5em から 0.5em 刻みで 10em まで）
         パディング　: u-p-0em,  u-p-05em,  u-p-1em,  u-p-15em,  u-p-2em  ... u-p-10em
         上パディング: u-pt-0em, u-pt-05em, u-pt-1em, u-pt-15em, u-pt-2em ... u-pt-10em
         下パディング: u-pb-0em, u-pb-05em, u-pb-1em, u-pb-15em, u-pb-2em ... u-pb-10em
         左パディング: u-pl-0em, u-pl-05em, u-pl-1em, u-pl-15em, u-pl-2em ... u-pl-10em
         右パディング: u-pr-0em, u-pr-05em, u-pr-1em, u-pr-15em, u-pr-2em ... u-pr-10em
         横パディング: u-py-0em, u-py-05em, u-py-1em, u-py-15em, u-py-2em ... u-py-10em
         縦パディング: u-px-0em, u-px-05em, u-px-1em, u-px-15em, u-px-2em ... u-px-10em

     - u- の後ろに sp- を付加するとスマホ用のクラスになる
----------------------------------------------------------------------------------- */
/* 単位: px */
.u-p-0 {
  padding: 0rem !important;
}

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

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

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

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

.u-py-0 {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.u-px-0 {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}

.u-p-5 {
  padding: 0.5rem !important;
}

.u-pt-5 {
  padding-top: 0.5rem !important;
}

.u-pb-5 {
  padding-bottom: 0.5rem !important;
}

.u-pl-5 {
  padding-left: 0.5rem !important;
}

.u-pr-5 {
  padding-right: 0.5rem !important;
}

.u-py-5 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.u-px-5 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.u-p-10 {
  padding: 1rem !important;
}

.u-pt-10 {
  padding-top: 1rem !important;
}

.u-pb-10 {
  padding-bottom: 1rem !important;
}

.u-pl-10 {
  padding-left: 1rem !important;
}

.u-pr-10 {
  padding-right: 1rem !important;
}

.u-py-10 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.u-px-10 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.u-p-15 {
  padding: 1.5rem !important;
}

.u-pt-15 {
  padding-top: 1.5rem !important;
}

.u-pb-15 {
  padding-bottom: 1.5rem !important;
}

.u-pl-15 {
  padding-left: 1.5rem !important;
}

.u-pr-15 {
  padding-right: 1.5rem !important;
}

.u-py-15 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.u-px-15 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.u-p-20 {
  padding: 2rem !important;
}

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

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

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

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

.u-py-20 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.u-px-20 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.u-p-25 {
  padding: 2.5rem !important;
}

.u-pt-25 {
  padding-top: 2.5rem !important;
}

.u-pb-25 {
  padding-bottom: 2.5rem !important;
}

.u-pl-25 {
  padding-left: 2.5rem !important;
}

.u-pr-25 {
  padding-right: 2.5rem !important;
}

.u-py-25 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.u-px-25 {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.u-p-30 {
  padding: 3rem !important;
}

.u-pt-30 {
  padding-top: 3rem !important;
}

.u-pb-30 {
  padding-bottom: 3rem !important;
}

.u-pl-30 {
  padding-left: 3rem !important;
}

.u-pr-30 {
  padding-right: 3rem !important;
}

.u-py-30 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.u-px-30 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.u-p-35 {
  padding: 3.5rem !important;
}

.u-pt-35 {
  padding-top: 3.5rem !important;
}

.u-pb-35 {
  padding-bottom: 3.5rem !important;
}

.u-pl-35 {
  padding-left: 3.5rem !important;
}

.u-pr-35 {
  padding-right: 3.5rem !important;
}

.u-py-35 {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

.u-px-35 {
  padding-left: 3.5rem !important;
  padding-right: 3.5rem !important;
}

.u-p-40 {
  padding: 4rem !important;
}

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

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

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

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

.u-py-40 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.u-px-40 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.u-p-45 {
  padding: 4.5rem !important;
}

.u-pt-45 {
  padding-top: 4.5rem !important;
}

.u-pb-45 {
  padding-bottom: 4.5rem !important;
}

.u-pl-45 {
  padding-left: 4.5rem !important;
}

.u-pr-45 {
  padding-right: 4.5rem !important;
}

.u-py-45 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.u-px-45 {
  padding-left: 4.5rem !important;
  padding-right: 4.5rem !important;
}

.u-p-50 {
  padding: 5rem !important;
}

.u-pt-50 {
  padding-top: 5rem !important;
}

.u-pb-50 {
  padding-bottom: 5rem !important;
}

.u-pl-50 {
  padding-left: 5rem !important;
}

.u-pr-50 {
  padding-right: 5rem !important;
}

.u-py-50 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.u-px-50 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.u-p-55 {
  padding: 5.5rem !important;
}

.u-pt-55 {
  padding-top: 5.5rem !important;
}

.u-pb-55 {
  padding-bottom: 5.5rem !important;
}

.u-pl-55 {
  padding-left: 5.5rem !important;
}

.u-pr-55 {
  padding-right: 5.5rem !important;
}

.u-py-55 {
  padding-top: 5.5rem !important;
  padding-bottom: 5.5rem !important;
}

.u-px-55 {
  padding-left: 5.5rem !important;
  padding-right: 5.5rem !important;
}

.u-p-60 {
  padding: 6rem !important;
}

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

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

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

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

.u-py-60 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.u-px-60 {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}

.u-p-65 {
  padding: 6.5rem !important;
}

.u-pt-65 {
  padding-top: 6.5rem !important;
}

.u-pb-65 {
  padding-bottom: 6.5rem !important;
}

.u-pl-65 {
  padding-left: 6.5rem !important;
}

.u-pr-65 {
  padding-right: 6.5rem !important;
}

.u-py-65 {
  padding-top: 6.5rem !important;
  padding-bottom: 6.5rem !important;
}

.u-px-65 {
  padding-left: 6.5rem !important;
  padding-right: 6.5rem !important;
}

.u-p-70 {
  padding: 7rem !important;
}

.u-pt-70 {
  padding-top: 7rem !important;
}

.u-pb-70 {
  padding-bottom: 7rem !important;
}

.u-pl-70 {
  padding-left: 7rem !important;
}

.u-pr-70 {
  padding-right: 7rem !important;
}

.u-py-70 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.u-px-70 {
  padding-left: 7rem !important;
  padding-right: 7rem !important;
}

.u-p-75 {
  padding: 7.5rem !important;
}

.u-pt-75 {
  padding-top: 7.5rem !important;
}

.u-pb-75 {
  padding-bottom: 7.5rem !important;
}

.u-pl-75 {
  padding-left: 7.5rem !important;
}

.u-pr-75 {
  padding-right: 7.5rem !important;
}

.u-py-75 {
  padding-top: 7.5rem !important;
  padding-bottom: 7.5rem !important;
}

.u-px-75 {
  padding-left: 7.5rem !important;
  padding-right: 7.5rem !important;
}

.u-p-80 {
  padding: 8rem !important;
}

.u-pt-80 {
  padding-top: 8rem !important;
}

.u-pb-80 {
  padding-bottom: 8rem !important;
}

.u-pl-80 {
  padding-left: 8rem !important;
}

.u-pr-80 {
  padding-right: 8rem !important;
}

.u-py-80 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.u-px-80 {
  padding-left: 8rem !important;
  padding-right: 8rem !important;
}

.u-p-85 {
  padding: 8.5rem !important;
}

.u-pt-85 {
  padding-top: 8.5rem !important;
}

.u-pb-85 {
  padding-bottom: 8.5rem !important;
}

.u-pl-85 {
  padding-left: 8.5rem !important;
}

.u-pr-85 {
  padding-right: 8.5rem !important;
}

.u-py-85 {
  padding-top: 8.5rem !important;
  padding-bottom: 8.5rem !important;
}

.u-px-85 {
  padding-left: 8.5rem !important;
  padding-right: 8.5rem !important;
}

.u-p-90 {
  padding: 9rem !important;
}

.u-pt-90 {
  padding-top: 9rem !important;
}

.u-pb-90 {
  padding-bottom: 9rem !important;
}

.u-pl-90 {
  padding-left: 9rem !important;
}

.u-pr-90 {
  padding-right: 9rem !important;
}

.u-py-90 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}

.u-px-90 {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}

.u-p-95 {
  padding: 9.5rem !important;
}

.u-pt-95 {
  padding-top: 9.5rem !important;
}

.u-pb-95 {
  padding-bottom: 9.5rem !important;
}

.u-pl-95 {
  padding-left: 9.5rem !important;
}

.u-pr-95 {
  padding-right: 9.5rem !important;
}

.u-py-95 {
  padding-top: 9.5rem !important;
  padding-bottom: 9.5rem !important;
}

.u-px-95 {
  padding-left: 9.5rem !important;
  padding-right: 9.5rem !important;
}

.u-p-100 {
  padding: 10rem !important;
}

.u-pt-100 {
  padding-top: 10rem !important;
}

.u-pb-100 {
  padding-bottom: 10rem !important;
}

.u-pl-100 {
  padding-left: 10rem !important;
}

.u-pr-100 {
  padding-right: 10rem !important;
}

.u-py-100 {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important;
}

.u-px-100 {
  padding-left: 10rem !important;
  padding-right: 10rem !important;
}

.u-p-105 {
  padding: 10.5rem !important;
}

.u-pt-105 {
  padding-top: 10.5rem !important;
}

.u-pb-105 {
  padding-bottom: 10.5rem !important;
}

.u-pl-105 {
  padding-left: 10.5rem !important;
}

.u-pr-105 {
  padding-right: 10.5rem !important;
}

.u-py-105 {
  padding-top: 10.5rem !important;
  padding-bottom: 10.5rem !important;
}

.u-px-105 {
  padding-left: 10.5rem !important;
  padding-right: 10.5rem !important;
}

.u-p-110 {
  padding: 11rem !important;
}

.u-pt-110 {
  padding-top: 11rem !important;
}

.u-pb-110 {
  padding-bottom: 11rem !important;
}

.u-pl-110 {
  padding-left: 11rem !important;
}

.u-pr-110 {
  padding-right: 11rem !important;
}

.u-py-110 {
  padding-top: 11rem !important;
  padding-bottom: 11rem !important;
}

.u-px-110 {
  padding-left: 11rem !important;
  padding-right: 11rem !important;
}

.u-p-115 {
  padding: 11.5rem !important;
}

.u-pt-115 {
  padding-top: 11.5rem !important;
}

.u-pb-115 {
  padding-bottom: 11.5rem !important;
}

.u-pl-115 {
  padding-left: 11.5rem !important;
}

.u-pr-115 {
  padding-right: 11.5rem !important;
}

.u-py-115 {
  padding-top: 11.5rem !important;
  padding-bottom: 11.5rem !important;
}

.u-px-115 {
  padding-left: 11.5rem !important;
  padding-right: 11.5rem !important;
}

.u-p-120 {
  padding: 12rem !important;
}

.u-pt-120 {
  padding-top: 12rem !important;
}

.u-pb-120 {
  padding-bottom: 12rem !important;
}

.u-pl-120 {
  padding-left: 12rem !important;
}

.u-pr-120 {
  padding-right: 12rem !important;
}

.u-py-120 {
  padding-top: 12rem !important;
  padding-bottom: 12rem !important;
}

.u-px-120 {
  padding-left: 12rem !important;
  padding-right: 12rem !important;
}

.u-p-125 {
  padding: 12.5rem !important;
}

.u-pt-125 {
  padding-top: 12.5rem !important;
}

.u-pb-125 {
  padding-bottom: 12.5rem !important;
}

.u-pl-125 {
  padding-left: 12.5rem !important;
}

.u-pr-125 {
  padding-right: 12.5rem !important;
}

.u-py-125 {
  padding-top: 12.5rem !important;
  padding-bottom: 12.5rem !important;
}

.u-px-125 {
  padding-left: 12.5rem !important;
  padding-right: 12.5rem !important;
}

.u-p-130 {
  padding: 13rem !important;
}

.u-pt-130 {
  padding-top: 13rem !important;
}

.u-pb-130 {
  padding-bottom: 13rem !important;
}

.u-pl-130 {
  padding-left: 13rem !important;
}

.u-pr-130 {
  padding-right: 13rem !important;
}

.u-py-130 {
  padding-top: 13rem !important;
  padding-bottom: 13rem !important;
}

.u-px-130 {
  padding-left: 13rem !important;
  padding-right: 13rem !important;
}

.u-p-135 {
  padding: 13.5rem !important;
}

.u-pt-135 {
  padding-top: 13.5rem !important;
}

.u-pb-135 {
  padding-bottom: 13.5rem !important;
}

.u-pl-135 {
  padding-left: 13.5rem !important;
}

.u-pr-135 {
  padding-right: 13.5rem !important;
}

.u-py-135 {
  padding-top: 13.5rem !important;
  padding-bottom: 13.5rem !important;
}

.u-px-135 {
  padding-left: 13.5rem !important;
  padding-right: 13.5rem !important;
}

.u-p-140 {
  padding: 14rem !important;
}

.u-pt-140 {
  padding-top: 14rem !important;
}

.u-pb-140 {
  padding-bottom: 14rem !important;
}

.u-pl-140 {
  padding-left: 14rem !important;
}

.u-pr-140 {
  padding-right: 14rem !important;
}

.u-py-140 {
  padding-top: 14rem !important;
  padding-bottom: 14rem !important;
}

.u-px-140 {
  padding-left: 14rem !important;
  padding-right: 14rem !important;
}

.u-p-145 {
  padding: 14.5rem !important;
}

.u-pt-145 {
  padding-top: 14.5rem !important;
}

.u-pb-145 {
  padding-bottom: 14.5rem !important;
}

.u-pl-145 {
  padding-left: 14.5rem !important;
}

.u-pr-145 {
  padding-right: 14.5rem !important;
}

.u-py-145 {
  padding-top: 14.5rem !important;
  padding-bottom: 14.5rem !important;
}

.u-px-145 {
  padding-left: 14.5rem !important;
  padding-right: 14.5rem !important;
}

.u-p-150 {
  padding: 15rem !important;
}

.u-pt-150 {
  padding-top: 15rem !important;
}

.u-pb-150 {
  padding-bottom: 15rem !important;
}

.u-pl-150 {
  padding-left: 15rem !important;
}

.u-pr-150 {
  padding-right: 15rem !important;
}

.u-py-150 {
  padding-top: 15rem !important;
  padding-bottom: 15rem !important;
}

.u-px-150 {
  padding-left: 15rem !important;
  padding-right: 15rem !important;
}

/* 単位: em */
.u-p-05em {
  padding: 0.5em !important;
}

.u-pt-05em {
  padding-top: 0.5em !important;
}

.u-pb-05em {
  padding-bottom: 0.5em !important;
}

.u-pl-05em {
  padding-left: 0.5em !important;
}

.u-pr-05em {
  padding-right: 0.5em !important;
}

.u-py-05em {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

.u-px-05em {
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
}

.u-p-1em {
  padding: 1em !important;
}

.u-pt-1em {
  padding-top: 1em !important;
}

.u-pb-1em {
  padding-bottom: 1em !important;
}

.u-pl-1em {
  padding-left: 1em !important;
}

.u-pr-1em {
  padding-right: 1em !important;
}

.u-py-1em {
  padding-top: 1em !important;
  padding-bottom: 1em !important;
}

.u-px-1em {
  padding-left: 1em !important;
  padding-right: 1em !important;
}

.u-p-15em {
  padding: 1.5em !important;
}

.u-pt-15em {
  padding-top: 1.5em !important;
}

.u-pb-15em {
  padding-bottom: 1.5em !important;
}

.u-pl-15em {
  padding-left: 1.5em !important;
}

.u-pr-15em {
  padding-right: 1.5em !important;
}

.u-py-15em {
  padding-top: 1.5em !important;
  padding-bottom: 1.5em !important;
}

.u-px-15em {
  padding-left: 1.5em !important;
  padding-right: 1.5em !important;
}

.u-p-2em {
  padding: 2em !important;
}

.u-pt-2em {
  padding-top: 2em !important;
}

.u-pb-2em {
  padding-bottom: 2em !important;
}

.u-pl-2em {
  padding-left: 2em !important;
}

.u-pr-2em {
  padding-right: 2em !important;
}

.u-py-2em {
  padding-top: 2em !important;
  padding-bottom: 2em !important;
}

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

.u-p-25em {
  padding: 2.5em !important;
}

.u-pt-25em {
  padding-top: 2.5em !important;
}

.u-pb-25em {
  padding-bottom: 2.5em !important;
}

.u-pl-25em {
  padding-left: 2.5em !important;
}

.u-pr-25em {
  padding-right: 2.5em !important;
}

.u-py-25em {
  padding-top: 2.5em !important;
  padding-bottom: 2.5em !important;
}

.u-px-25em {
  padding-left: 2.5em !important;
  padding-right: 2.5em !important;
}

.u-p-3em {
  padding: 3em !important;
}

.u-pt-3em {
  padding-top: 3em !important;
}

.u-pb-3em {
  padding-bottom: 3em !important;
}

.u-pl-3em {
  padding-left: 3em !important;
}

.u-pr-3em {
  padding-right: 3em !important;
}

.u-py-3em {
  padding-top: 3em !important;
  padding-bottom: 3em !important;
}

.u-px-3em {
  padding-left: 3em !important;
  padding-right: 3em !important;
}

.u-p-35em {
  padding: 3.5em !important;
}

.u-pt-35em {
  padding-top: 3.5em !important;
}

.u-pb-35em {
  padding-bottom: 3.5em !important;
}

.u-pl-35em {
  padding-left: 3.5em !important;
}

.u-pr-35em {
  padding-right: 3.5em !important;
}

.u-py-35em {
  padding-top: 3.5em !important;
  padding-bottom: 3.5em !important;
}

.u-px-35em {
  padding-left: 3.5em !important;
  padding-right: 3.5em !important;
}

.u-p-4em {
  padding: 4em !important;
}

.u-pt-4em {
  padding-top: 4em !important;
}

.u-pb-4em {
  padding-bottom: 4em !important;
}

.u-pl-4em {
  padding-left: 4em !important;
}

.u-pr-4em {
  padding-right: 4em !important;
}

.u-py-4em {
  padding-top: 4em !important;
  padding-bottom: 4em !important;
}

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

.u-p-45em {
  padding: 4.5em !important;
}

.u-pt-45em {
  padding-top: 4.5em !important;
}

.u-pb-45em {
  padding-bottom: 4.5em !important;
}

.u-pl-45em {
  padding-left: 4.5em !important;
}

.u-pr-45em {
  padding-right: 4.5em !important;
}

.u-py-45em {
  padding-top: 4.5em !important;
  padding-bottom: 4.5em !important;
}

.u-px-45em {
  padding-left: 4.5em !important;
  padding-right: 4.5em !important;
}

.u-p-5em {
  padding: 5em !important;
}

.u-pt-5em {
  padding-top: 5em !important;
}

.u-pb-5em {
  padding-bottom: 5em !important;
}

.u-pl-5em {
  padding-left: 5em !important;
}

.u-pr-5em {
  padding-right: 5em !important;
}

.u-py-5em {
  padding-top: 5em !important;
  padding-bottom: 5em !important;
}

.u-px-5em {
  padding-left: 5em !important;
  padding-right: 5em !important;
}

.u-p-55em {
  padding: 5.5em !important;
}

.u-pt-55em {
  padding-top: 5.5em !important;
}

.u-pb-55em {
  padding-bottom: 5.5em !important;
}

.u-pl-55em {
  padding-left: 5.5em !important;
}

.u-pr-55em {
  padding-right: 5.5em !important;
}

.u-py-55em {
  padding-top: 5.5em !important;
  padding-bottom: 5.5em !important;
}

.u-px-55em {
  padding-left: 5.5em !important;
  padding-right: 5.5em !important;
}

.u-p-6em {
  padding: 6em !important;
}

.u-pt-6em {
  padding-top: 6em !important;
}

.u-pb-6em {
  padding-bottom: 6em !important;
}

.u-pl-6em {
  padding-left: 6em !important;
}

.u-pr-6em {
  padding-right: 6em !important;
}

.u-py-6em {
  padding-top: 6em !important;
  padding-bottom: 6em !important;
}

.u-px-6em {
  padding-left: 6em !important;
  padding-right: 6em !important;
}

.u-p-65em {
  padding: 6.5em !important;
}

.u-pt-65em {
  padding-top: 6.5em !important;
}

.u-pb-65em {
  padding-bottom: 6.5em !important;
}

.u-pl-65em {
  padding-left: 6.5em !important;
}

.u-pr-65em {
  padding-right: 6.5em !important;
}

.u-py-65em {
  padding-top: 6.5em !important;
  padding-bottom: 6.5em !important;
}

.u-px-65em {
  padding-left: 6.5em !important;
  padding-right: 6.5em !important;
}

.u-p-7em {
  padding: 7em !important;
}

.u-pt-7em {
  padding-top: 7em !important;
}

.u-pb-7em {
  padding-bottom: 7em !important;
}

.u-pl-7em {
  padding-left: 7em !important;
}

.u-pr-7em {
  padding-right: 7em !important;
}

.u-py-7em {
  padding-top: 7em !important;
  padding-bottom: 7em !important;
}

.u-px-7em {
  padding-left: 7em !important;
  padding-right: 7em !important;
}

.u-p-75em {
  padding: 7.5em !important;
}

.u-pt-75em {
  padding-top: 7.5em !important;
}

.u-pb-75em {
  padding-bottom: 7.5em !important;
}

.u-pl-75em {
  padding-left: 7.5em !important;
}

.u-pr-75em {
  padding-right: 7.5em !important;
}

.u-py-75em {
  padding-top: 7.5em !important;
  padding-bottom: 7.5em !important;
}

.u-px-75em {
  padding-left: 7.5em !important;
  padding-right: 7.5em !important;
}

.u-p-8em {
  padding: 8em !important;
}

.u-pt-8em {
  padding-top: 8em !important;
}

.u-pb-8em {
  padding-bottom: 8em !important;
}

.u-pl-8em {
  padding-left: 8em !important;
}

.u-pr-8em {
  padding-right: 8em !important;
}

.u-py-8em {
  padding-top: 8em !important;
  padding-bottom: 8em !important;
}

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

.u-p-85em {
  padding: 8.5em !important;
}

.u-pt-85em {
  padding-top: 8.5em !important;
}

.u-pb-85em {
  padding-bottom: 8.5em !important;
}

.u-pl-85em {
  padding-left: 8.5em !important;
}

.u-pr-85em {
  padding-right: 8.5em !important;
}

.u-py-85em {
  padding-top: 8.5em !important;
  padding-bottom: 8.5em !important;
}

.u-px-85em {
  padding-left: 8.5em !important;
  padding-right: 8.5em !important;
}

.u-p-9em {
  padding: 9em !important;
}

.u-pt-9em {
  padding-top: 9em !important;
}

.u-pb-9em {
  padding-bottom: 9em !important;
}

.u-pl-9em {
  padding-left: 9em !important;
}

.u-pr-9em {
  padding-right: 9em !important;
}

.u-py-9em {
  padding-top: 9em !important;
  padding-bottom: 9em !important;
}

.u-px-9em {
  padding-left: 9em !important;
  padding-right: 9em !important;
}

.u-p-95em {
  padding: 9.5em !important;
}

.u-pt-95em {
  padding-top: 9.5em !important;
}

.u-pb-95em {
  padding-bottom: 9.5em !important;
}

.u-pl-95em {
  padding-left: 9.5em !important;
}

.u-pr-95em {
  padding-right: 9.5em !important;
}

.u-py-95em {
  padding-top: 9.5em !important;
  padding-bottom: 9.5em !important;
}

.u-px-95em {
  padding-left: 9.5em !important;
  padding-right: 9.5em !important;
}

.u-p-10em {
  padding: 10em !important;
}

.u-pt-10em {
  padding-top: 10em !important;
}

.u-pb-10em {
  padding-bottom: 10em !important;
}

.u-pl-10em {
  padding-left: 10em !important;
}

.u-pr-10em {
  padding-right: 10em !important;
}

.u-py-10em {
  padding-top: 10em !important;
  padding-bottom: 10em !important;
}

.u-px-10em {
  padding-left: 10em !important;
  padding-right: 10em !important;
}

/* SP版：プリフィクス sp- を付加 */
@media print, screen and (max-width: 599px) {
  /* 単位: px */
  .u-sp-p-0 {
    padding: 0rem !important;
  }

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

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

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

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

  .u-sp-py-0 {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .u-sp-px-0 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }

  .u-sp-p-5 {
    padding: 0.5rem !important;
  }

  .u-sp-pt-5 {
    padding-top: 0.5rem !important;
  }

  .u-sp-pb-5 {
    padding-bottom: 0.5rem !important;
  }

  .u-sp-pl-5 {
    padding-left: 0.5rem !important;
  }

  .u-sp-pr-5 {
    padding-right: 0.5rem !important;
  }

  .u-sp-py-5 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .u-sp-px-5 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .u-sp-p-10 {
    padding: 1rem !important;
  }

  .u-sp-pt-10 {
    padding-top: 1rem !important;
  }

  .u-sp-pb-10 {
    padding-bottom: 1rem !important;
  }

  .u-sp-pl-10 {
    padding-left: 1rem !important;
  }

  .u-sp-pr-10 {
    padding-right: 1rem !important;
  }

  .u-sp-py-10 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .u-sp-px-10 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .u-sp-p-15 {
    padding: 1.5rem !important;
  }

  .u-sp-pt-15 {
    padding-top: 1.5rem !important;
  }

  .u-sp-pb-15 {
    padding-bottom: 1.5rem !important;
  }

  .u-sp-pl-15 {
    padding-left: 1.5rem !important;
  }

  .u-sp-pr-15 {
    padding-right: 1.5rem !important;
  }

  .u-sp-py-15 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .u-sp-px-15 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .u-sp-p-20 {
    padding: 2rem !important;
  }

  .u-sp-pt-20 {
    padding-top: 2rem !important;
  }

  .u-sp-pb-20 {
    padding-bottom: 2rem !important;
  }

  .u-sp-pl-20 {
    padding-left: 2rem !important;
  }

  .u-sp-pr-20 {
    padding-right: 2rem !important;
  }

  .u-sp-py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .u-sp-px-20 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .u-sp-p-25 {
    padding: 2.5rem !important;
  }

  .u-sp-pt-25 {
    padding-top: 2.5rem !important;
  }

  .u-sp-pb-25 {
    padding-bottom: 2.5rem !important;
  }

  .u-sp-pl-25 {
    padding-left: 2.5rem !important;
  }

  .u-sp-pr-25 {
    padding-right: 2.5rem !important;
  }

  .u-sp-py-25 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .u-sp-px-25 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  .u-sp-p-30 {
    padding: 3rem !important;
  }

  .u-sp-pt-30 {
    padding-top: 3rem !important;
  }

  .u-sp-pb-30 {
    padding-bottom: 3rem !important;
  }

  .u-sp-pl-30 {
    padding-left: 3rem !important;
  }

  .u-sp-pr-30 {
    padding-right: 3rem !important;
  }

  .u-sp-py-30 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .u-sp-px-30 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .u-sp-p-35 {
    padding: 3.5rem !important;
  }

  .u-sp-pt-35 {
    padding-top: 3.5rem !important;
  }

  .u-sp-pb-35 {
    padding-bottom: 3.5rem !important;
  }

  .u-sp-pl-35 {
    padding-left: 3.5rem !important;
  }

  .u-sp-pr-35 {
    padding-right: 3.5rem !important;
  }

  .u-sp-py-35 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .u-sp-px-35 {
    padding-left: 3.5rem !important;
    padding-right: 3.5rem !important;
  }

  .u-sp-p-40 {
    padding: 4rem !important;
  }

  .u-sp-pt-40 {
    padding-top: 4rem !important;
  }

  .u-sp-pb-40 {
    padding-bottom: 4rem !important;
  }

  .u-sp-pl-40 {
    padding-left: 4rem !important;
  }

  .u-sp-pr-40 {
    padding-right: 4rem !important;
  }

  .u-sp-py-40 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .u-sp-px-40 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }

  .u-sp-p-45 {
    padding: 4.5rem !important;
  }

  .u-sp-pt-45 {
    padding-top: 4.5rem !important;
  }

  .u-sp-pb-45 {
    padding-bottom: 4.5rem !important;
  }

  .u-sp-pl-45 {
    padding-left: 4.5rem !important;
  }

  .u-sp-pr-45 {
    padding-right: 4.5rem !important;
  }

  .u-sp-py-45 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  .u-sp-px-45 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }

  .u-sp-p-50 {
    padding: 5rem !important;
  }

  .u-sp-pt-50 {
    padding-top: 5rem !important;
  }

  .u-sp-pb-50 {
    padding-bottom: 5rem !important;
  }

  .u-sp-pl-50 {
    padding-left: 5rem !important;
  }

  .u-sp-pr-50 {
    padding-right: 5rem !important;
  }

  .u-sp-py-50 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .u-sp-px-50 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }

  .u-sp-p-55 {
    padding: 5.5rem !important;
  }

  .u-sp-pt-55 {
    padding-top: 5.5rem !important;
  }

  .u-sp-pb-55 {
    padding-bottom: 5.5rem !important;
  }

  .u-sp-pl-55 {
    padding-left: 5.5rem !important;
  }

  .u-sp-pr-55 {
    padding-right: 5.5rem !important;
  }

  .u-sp-py-55 {
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
  }

  .u-sp-px-55 {
    padding-left: 5.5rem !important;
    padding-right: 5.5rem !important;
  }

  .u-sp-p-60 {
    padding: 6rem !important;
  }

  .u-sp-pt-60 {
    padding-top: 6rem !important;
  }

  .u-sp-pb-60 {
    padding-bottom: 6rem !important;
  }

  .u-sp-pl-60 {
    padding-left: 6rem !important;
  }

  .u-sp-pr-60 {
    padding-right: 6rem !important;
  }

  .u-sp-py-60 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }

  .u-sp-px-60 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }

  .u-sp-p-65 {
    padding: 6.5rem !important;
  }

  .u-sp-pt-65 {
    padding-top: 6.5rem !important;
  }

  .u-sp-pb-65 {
    padding-bottom: 6.5rem !important;
  }

  .u-sp-pl-65 {
    padding-left: 6.5rem !important;
  }

  .u-sp-pr-65 {
    padding-right: 6.5rem !important;
  }

  .u-sp-py-65 {
    padding-top: 6.5rem !important;
    padding-bottom: 6.5rem !important;
  }

  .u-sp-px-65 {
    padding-left: 6.5rem !important;
    padding-right: 6.5rem !important;
  }

  .u-sp-p-70 {
    padding: 7rem !important;
  }

  .u-sp-pt-70 {
    padding-top: 7rem !important;
  }

  .u-sp-pb-70 {
    padding-bottom: 7rem !important;
  }

  .u-sp-pl-70 {
    padding-left: 7rem !important;
  }

  .u-sp-pr-70 {
    padding-right: 7rem !important;
  }

  .u-sp-py-70 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }

  .u-sp-px-70 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }

  .u-sp-p-75 {
    padding: 7.5rem !important;
  }

  .u-sp-pt-75 {
    padding-top: 7.5rem !important;
  }

  .u-sp-pb-75 {
    padding-bottom: 7.5rem !important;
  }

  .u-sp-pl-75 {
    padding-left: 7.5rem !important;
  }

  .u-sp-pr-75 {
    padding-right: 7.5rem !important;
  }

  .u-sp-py-75 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }

  .u-sp-px-75 {
    padding-left: 7.5rem !important;
    padding-right: 7.5rem !important;
  }

  .u-sp-p-80 {
    padding: 8rem !important;
  }

  .u-sp-pt-80 {
    padding-top: 8rem !important;
  }

  .u-sp-pb-80 {
    padding-bottom: 8rem !important;
  }

  .u-sp-pl-80 {
    padding-left: 8rem !important;
  }

  .u-sp-pr-80 {
    padding-right: 8rem !important;
  }

  .u-sp-py-80 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }

  .u-sp-px-80 {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }

  .u-sp-p-85 {
    padding: 8.5rem !important;
  }

  .u-sp-pt-85 {
    padding-top: 8.5rem !important;
  }

  .u-sp-pb-85 {
    padding-bottom: 8.5rem !important;
  }

  .u-sp-pl-85 {
    padding-left: 8.5rem !important;
  }

  .u-sp-pr-85 {
    padding-right: 8.5rem !important;
  }

  .u-sp-py-85 {
    padding-top: 8.5rem !important;
    padding-bottom: 8.5rem !important;
  }

  .u-sp-px-85 {
    padding-left: 8.5rem !important;
    padding-right: 8.5rem !important;
  }

  .u-sp-p-90 {
    padding: 9rem !important;
  }

  .u-sp-pt-90 {
    padding-top: 9rem !important;
  }

  .u-sp-pb-90 {
    padding-bottom: 9rem !important;
  }

  .u-sp-pl-90 {
    padding-left: 9rem !important;
  }

  .u-sp-pr-90 {
    padding-right: 9rem !important;
  }

  .u-sp-py-90 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }

  .u-sp-px-90 {
    padding-left: 9rem !important;
    padding-right: 9rem !important;
  }

  .u-sp-p-95 {
    padding: 9.5rem !important;
  }

  .u-sp-pt-95 {
    padding-top: 9.5rem !important;
  }

  .u-sp-pb-95 {
    padding-bottom: 9.5rem !important;
  }

  .u-sp-pl-95 {
    padding-left: 9.5rem !important;
  }

  .u-sp-pr-95 {
    padding-right: 9.5rem !important;
  }

  .u-sp-py-95 {
    padding-top: 9.5rem !important;
    padding-bottom: 9.5rem !important;
  }

  .u-sp-px-95 {
    padding-left: 9.5rem !important;
    padding-right: 9.5rem !important;
  }

  .u-sp-p-100 {
    padding: 10rem !important;
  }

  .u-sp-pt-100 {
    padding-top: 10rem !important;
  }

  .u-sp-pb-100 {
    padding-bottom: 10rem !important;
  }

  .u-sp-pl-100 {
    padding-left: 10rem !important;
  }

  .u-sp-pr-100 {
    padding-right: 10rem !important;
  }

  .u-sp-py-100 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }

  .u-sp-px-100 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .u-sp-p-105 {
    padding: 10.5rem !important;
  }

  .u-sp-pt-105 {
    padding-top: 10.5rem !important;
  }

  .u-sp-pb-105 {
    padding-bottom: 10.5rem !important;
  }

  .u-sp-pl-105 {
    padding-left: 10.5rem !important;
  }

  .u-sp-pr-105 {
    padding-right: 10.5rem !important;
  }

  .u-sp-py-105 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }

  .u-sp-px-105 {
    padding-left: 10.5rem !important;
    padding-right: 10.5rem !important;
  }

  .u-sp-p-110 {
    padding: 11rem !important;
  }

  .u-sp-pt-110 {
    padding-top: 11rem !important;
  }

  .u-sp-pb-110 {
    padding-bottom: 11rem !important;
  }

  .u-sp-pl-110 {
    padding-left: 11rem !important;
  }

  .u-sp-pr-110 {
    padding-right: 11rem !important;
  }

  .u-sp-py-110 {
    padding-top: 11rem !important;
    padding-bottom: 11rem !important;
  }

  .u-sp-px-110 {
    padding-left: 11rem !important;
    padding-right: 11rem !important;
  }

  .u-sp-p-115 {
    padding: 11.5rem !important;
  }

  .u-sp-pt-115 {
    padding-top: 11.5rem !important;
  }

  .u-sp-pb-115 {
    padding-bottom: 11.5rem !important;
  }

  .u-sp-pl-115 {
    padding-left: 11.5rem !important;
  }

  .u-sp-pr-115 {
    padding-right: 11.5rem !important;
  }

  .u-sp-py-115 {
    padding-top: 11.5rem !important;
    padding-bottom: 11.5rem !important;
  }

  .u-sp-px-115 {
    padding-left: 11.5rem !important;
    padding-right: 11.5rem !important;
  }

  .u-sp-p-120 {
    padding: 12rem !important;
  }

  .u-sp-pt-120 {
    padding-top: 12rem !important;
  }

  .u-sp-pb-120 {
    padding-bottom: 12rem !important;
  }

  .u-sp-pl-120 {
    padding-left: 12rem !important;
  }

  .u-sp-pr-120 {
    padding-right: 12rem !important;
  }

  .u-sp-py-120 {
    padding-top: 12rem !important;
    padding-bottom: 12rem !important;
  }

  .u-sp-px-120 {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
  }

  .u-sp-p-125 {
    padding: 12.5rem !important;
  }

  .u-sp-pt-125 {
    padding-top: 12.5rem !important;
  }

  .u-sp-pb-125 {
    padding-bottom: 12.5rem !important;
  }

  .u-sp-pl-125 {
    padding-left: 12.5rem !important;
  }

  .u-sp-pr-125 {
    padding-right: 12.5rem !important;
  }

  .u-sp-py-125 {
    padding-top: 12.5rem !important;
    padding-bottom: 12.5rem !important;
  }

  .u-sp-px-125 {
    padding-left: 12.5rem !important;
    padding-right: 12.5rem !important;
  }

  .u-sp-p-130 {
    padding: 13rem !important;
  }

  .u-sp-pt-130 {
    padding-top: 13rem !important;
  }

  .u-sp-pb-130 {
    padding-bottom: 13rem !important;
  }

  .u-sp-pl-130 {
    padding-left: 13rem !important;
  }

  .u-sp-pr-130 {
    padding-right: 13rem !important;
  }

  .u-sp-py-130 {
    padding-top: 13rem !important;
    padding-bottom: 13rem !important;
  }

  .u-sp-px-130 {
    padding-left: 13rem !important;
    padding-right: 13rem !important;
  }

  .u-sp-p-135 {
    padding: 13.5rem !important;
  }

  .u-sp-pt-135 {
    padding-top: 13.5rem !important;
  }

  .u-sp-pb-135 {
    padding-bottom: 13.5rem !important;
  }

  .u-sp-pl-135 {
    padding-left: 13.5rem !important;
  }

  .u-sp-pr-135 {
    padding-right: 13.5rem !important;
  }

  .u-sp-py-135 {
    padding-top: 13.5rem !important;
    padding-bottom: 13.5rem !important;
  }

  .u-sp-px-135 {
    padding-left: 13.5rem !important;
    padding-right: 13.5rem !important;
  }

  .u-sp-p-140 {
    padding: 14rem !important;
  }

  .u-sp-pt-140 {
    padding-top: 14rem !important;
  }

  .u-sp-pb-140 {
    padding-bottom: 14rem !important;
  }

  .u-sp-pl-140 {
    padding-left: 14rem !important;
  }

  .u-sp-pr-140 {
    padding-right: 14rem !important;
  }

  .u-sp-py-140 {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important;
  }

  .u-sp-px-140 {
    padding-left: 14rem !important;
    padding-right: 14rem !important;
  }

  .u-sp-p-145 {
    padding: 14.5rem !important;
  }

  .u-sp-pt-145 {
    padding-top: 14.5rem !important;
  }

  .u-sp-pb-145 {
    padding-bottom: 14.5rem !important;
  }

  .u-sp-pl-145 {
    padding-left: 14.5rem !important;
  }

  .u-sp-pr-145 {
    padding-right: 14.5rem !important;
  }

  .u-sp-py-145 {
    padding-top: 14.5rem !important;
    padding-bottom: 14.5rem !important;
  }

  .u-sp-px-145 {
    padding-left: 14.5rem !important;
    padding-right: 14.5rem !important;
  }

  .u-sp-p-150 {
    padding: 15rem !important;
  }

  .u-sp-pt-150 {
    padding-top: 15rem !important;
  }

  .u-sp-pb-150 {
    padding-bottom: 15rem !important;
  }

  .u-sp-pl-150 {
    padding-left: 15rem !important;
  }

  .u-sp-pr-150 {
    padding-right: 15rem !important;
  }

  .u-sp-py-150 {
    padding-top: 15rem !important;
    padding-bottom: 15rem !important;
  }

  .u-sp-px-150 {
    padding-left: 15rem !important;
    padding-right: 15rem !important;
  }

  /* 単位: em */
  .u-sp-p-05em {
    padding: 0.5em !important;
  }

  .u-sp-pt-05em {
    padding-top: 0.5em !important;
  }

  .u-sp-pb-05em {
    padding-bottom: 0.5em !important;
  }

  .u-sp-pl-05em {
    padding-left: 0.5em !important;
  }

  .u-sp-pr-05em {
    padding-right: 0.5em !important;
  }

  .u-sp-py-05em {
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
  }

  .u-sp-px-05em {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
  }

  .u-sp-p-1em {
    padding: 1em !important;
  }

  .u-sp-pt-1em {
    padding-top: 1em !important;
  }

  .u-sp-pb-1em {
    padding-bottom: 1em !important;
  }

  .u-sp-pl-1em {
    padding-left: 1em !important;
  }

  .u-sp-pr-1em {
    padding-right: 1em !important;
  }

  .u-sp-py-1em {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
  }

  .u-sp-px-1em {
    padding-left: 1em !important;
    padding-right: 1em !important;
  }

  .u-sp-p-15em {
    padding: 1.5em !important;
  }

  .u-sp-pt-15em {
    padding-top: 1.5em !important;
  }

  .u-sp-pb-15em {
    padding-bottom: 1.5em !important;
  }

  .u-sp-pl-15em {
    padding-left: 1.5em !important;
  }

  .u-sp-pr-15em {
    padding-right: 1.5em !important;
  }

  .u-sp-py-15em {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
  }

  .u-sp-px-15em {
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
  }

  .u-sp-p-2em {
    padding: 2em !important;
  }

  .u-sp-pt-2em {
    padding-top: 2em !important;
  }

  .u-sp-pb-2em {
    padding-bottom: 2em !important;
  }

  .u-sp-pl-2em {
    padding-left: 2em !important;
  }

  .u-sp-pr-2em {
    padding-right: 2em !important;
  }

  .u-sp-py-2em {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
  }

  .u-sp-px-2em {
    padding-left: 2em !important;
    padding-right: 2em !important;
  }

  .u-sp-p-25em {
    padding: 2.5em !important;
  }

  .u-sp-pt-25em {
    padding-top: 2.5em !important;
  }

  .u-sp-pb-25em {
    padding-bottom: 2.5em !important;
  }

  .u-sp-pl-25em {
    padding-left: 2.5em !important;
  }

  .u-sp-pr-25em {
    padding-right: 2.5em !important;
  }

  .u-sp-py-25em {
    padding-top: 2.5em !important;
    padding-bottom: 2.5em !important;
  }

  .u-sp-px-25em {
    padding-left: 2.5em !important;
    padding-right: 2.5em !important;
  }

  .u-sp-p-3em {
    padding: 3em !important;
  }

  .u-sp-pt-3em {
    padding-top: 3em !important;
  }

  .u-sp-pb-3em {
    padding-bottom: 3em !important;
  }

  .u-sp-pl-3em {
    padding-left: 3em !important;
  }

  .u-sp-pr-3em {
    padding-right: 3em !important;
  }

  .u-sp-py-3em {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
  }

  .u-sp-px-3em {
    padding-left: 3em !important;
    padding-right: 3em !important;
  }

  .u-sp-p-35em {
    padding: 3.5em !important;
  }

  .u-sp-pt-35em {
    padding-top: 3.5em !important;
  }

  .u-sp-pb-35em {
    padding-bottom: 3.5em !important;
  }

  .u-sp-pl-35em {
    padding-left: 3.5em !important;
  }

  .u-sp-pr-35em {
    padding-right: 3.5em !important;
  }

  .u-sp-py-35em {
    padding-top: 3.5em !important;
    padding-bottom: 3.5em !important;
  }

  .u-sp-px-35em {
    padding-left: 3.5em !important;
    padding-right: 3.5em !important;
  }

  .u-sp-p-4em {
    padding: 4em !important;
  }

  .u-sp-pt-4em {
    padding-top: 4em !important;
  }

  .u-sp-pb-4em {
    padding-bottom: 4em !important;
  }

  .u-sp-pl-4em {
    padding-left: 4em !important;
  }

  .u-sp-pr-4em {
    padding-right: 4em !important;
  }

  .u-sp-py-4em {
    padding-top: 4em !important;
    padding-bottom: 4em !important;
  }

  .u-sp-px-4em {
    padding-left: 4em !important;
    padding-right: 4em !important;
  }

  .u-sp-p-45em {
    padding: 4.5em !important;
  }

  .u-sp-pt-45em {
    padding-top: 4.5em !important;
  }

  .u-sp-pb-45em {
    padding-bottom: 4.5em !important;
  }

  .u-sp-pl-45em {
    padding-left: 4.5em !important;
  }

  .u-sp-pr-45em {
    padding-right: 4.5em !important;
  }

  .u-sp-py-45em {
    padding-top: 4.5em !important;
    padding-bottom: 4.5em !important;
  }

  .u-sp-px-45em {
    padding-left: 4.5em !important;
    padding-right: 4.5em !important;
  }

  .u-sp-p-5em {
    padding: 5em !important;
  }

  .u-sp-pt-5em {
    padding-top: 5em !important;
  }

  .u-sp-pb-5em {
    padding-bottom: 5em !important;
  }

  .u-sp-pl-5em {
    padding-left: 5em !important;
  }

  .u-sp-pr-5em {
    padding-right: 5em !important;
  }

  .u-sp-py-5em {
    padding-top: 5em !important;
    padding-bottom: 5em !important;
  }

  .u-sp-px-5em {
    padding-left: 5em !important;
    padding-right: 5em !important;
  }

  .u-sp-p-55em {
    padding: 5.5em !important;
  }

  .u-sp-pt-55em {
    padding-top: 5.5em !important;
  }

  .u-sp-pb-55em {
    padding-bottom: 5.5em !important;
  }

  .u-sp-pl-55em {
    padding-left: 5.5em !important;
  }

  .u-sp-pr-55em {
    padding-right: 5.5em !important;
  }

  .u-sp-py-55em {
    padding-top: 5.5em !important;
    padding-bottom: 5.5em !important;
  }

  .u-sp-px-55em {
    padding-left: 5.5em !important;
    padding-right: 5.5em !important;
  }

  .u-sp-p-6em {
    padding: 6em !important;
  }

  .u-sp-pt-6em {
    padding-top: 6em !important;
  }

  .u-sp-pb-6em {
    padding-bottom: 6em !important;
  }

  .u-sp-pl-6em {
    padding-left: 6em !important;
  }

  .u-sp-pr-6em {
    padding-right: 6em !important;
  }

  .u-sp-py-6em {
    padding-top: 6em !important;
    padding-bottom: 6em !important;
  }

  .u-sp-px-6em {
    padding-left: 6em !important;
    padding-right: 6em !important;
  }

  .u-sp-p-65em {
    padding: 6.5em !important;
  }

  .u-sp-pt-65em {
    padding-top: 6.5em !important;
  }

  .u-sp-pb-65em {
    padding-bottom: 6.5em !important;
  }

  .u-sp-pl-65em {
    padding-left: 6.5em !important;
  }

  .u-sp-pr-65em {
    padding-right: 6.5em !important;
  }

  .u-sp-py-65em {
    padding-top: 6.5em !important;
    padding-bottom: 6.5em !important;
  }

  .u-sp-px-65em {
    padding-left: 6.5em !important;
    padding-right: 6.5em !important;
  }

  .u-sp-p-7em {
    padding: 7em !important;
  }

  .u-sp-pt-7em {
    padding-top: 7em !important;
  }

  .u-sp-pb-7em {
    padding-bottom: 7em !important;
  }

  .u-sp-pl-7em {
    padding-left: 7em !important;
  }

  .u-sp-pr-7em {
    padding-right: 7em !important;
  }

  .u-sp-py-7em {
    padding-top: 7em !important;
    padding-bottom: 7em !important;
  }

  .u-sp-px-7em {
    padding-left: 7em !important;
    padding-right: 7em !important;
  }

  .u-sp-p-75em {
    padding: 7.5em !important;
  }

  .u-sp-pt-75em {
    padding-top: 7.5em !important;
  }

  .u-sp-pb-75em {
    padding-bottom: 7.5em !important;
  }

  .u-sp-pl-75em {
    padding-left: 7.5em !important;
  }

  .u-sp-pr-75em {
    padding-right: 7.5em !important;
  }

  .u-sp-py-75em {
    padding-top: 7.5em !important;
    padding-bottom: 7.5em !important;
  }

  .u-sp-px-75em {
    padding-left: 7.5em !important;
    padding-right: 7.5em !important;
  }

  .u-sp-p-8em {
    padding: 8em !important;
  }

  .u-sp-pt-8em {
    padding-top: 8em !important;
  }

  .u-sp-pb-8em {
    padding-bottom: 8em !important;
  }

  .u-sp-pl-8em {
    padding-left: 8em !important;
  }

  .u-sp-pr-8em {
    padding-right: 8em !important;
  }

  .u-sp-py-8em {
    padding-top: 8em !important;
    padding-bottom: 8em !important;
  }

  .u-sp-px-8em {
    padding-left: 8em !important;
    padding-right: 8em !important;
  }

  .u-sp-p-85em {
    padding: 8.5em !important;
  }

  .u-sp-pt-85em {
    padding-top: 8.5em !important;
  }

  .u-sp-pb-85em {
    padding-bottom: 8.5em !important;
  }

  .u-sp-pl-85em {
    padding-left: 8.5em !important;
  }

  .u-sp-pr-85em {
    padding-right: 8.5em !important;
  }

  .u-sp-py-85em {
    padding-top: 8.5em !important;
    padding-bottom: 8.5em !important;
  }

  .u-sp-px-85em {
    padding-left: 8.5em !important;
    padding-right: 8.5em !important;
  }

  .u-sp-p-9em {
    padding: 9em !important;
  }

  .u-sp-pt-9em {
    padding-top: 9em !important;
  }

  .u-sp-pb-9em {
    padding-bottom: 9em !important;
  }

  .u-sp-pl-9em {
    padding-left: 9em !important;
  }

  .u-sp-pr-9em {
    padding-right: 9em !important;
  }

  .u-sp-py-9em {
    padding-top: 9em !important;
    padding-bottom: 9em !important;
  }

  .u-sp-px-9em {
    padding-left: 9em !important;
    padding-right: 9em !important;
  }

  .u-sp-p-95em {
    padding: 9.5em !important;
  }

  .u-sp-pt-95em {
    padding-top: 9.5em !important;
  }

  .u-sp-pb-95em {
    padding-bottom: 9.5em !important;
  }

  .u-sp-pl-95em {
    padding-left: 9.5em !important;
  }

  .u-sp-pr-95em {
    padding-right: 9.5em !important;
  }

  .u-sp-py-95em {
    padding-top: 9.5em !important;
    padding-bottom: 9.5em !important;
  }

  .u-sp-px-95em {
    padding-left: 9.5em !important;
    padding-right: 9.5em !important;
  }

  .u-sp-p-10em {
    padding: 10em !important;
  }

  .u-sp-pt-10em {
    padding-top: 10em !important;
  }

  .u-sp-pb-10em {
    padding-bottom: 10em !important;
  }

  .u-sp-pl-10em {
    padding-left: 10em !important;
  }

  .u-sp-pr-10em {
    padding-right: 10em !important;
  }

  .u-sp-py-10em {
    padding-top: 10em !important;
    padding-bottom: 10em !important;
  }

  .u-sp-px-10em {
    padding-left: 10em !important;
    padding-right: 10em !important;
  }
}
/* --------------------------------------------------------------------------------
   ユーティリティクラス - 汎用リスト
----------------------------------------------------------------------------------- */
ul.u-ls-normal {
  list-style-type: disc;
  padding-left: 1.3em;
}

ol.u-ls-normal {
  list-style-type: decimal;
  padding-left: 1.3em;
}

dl.u-ls-normal > dt {
  font-weight: bold;
}

dl.u-ls-inline > dt {
  display: inline;
  margin-right: 0.5em;
  font-weight: bold;
}
dl.u-ls-inline > dd {
  display: inline;
}

/* 米印（※）リスト */
ul.u-ls-kome {
  margin-left: 1.2em;
}
ul.u-ls-kome > li {
  text-indent: -1.2em;
}
ul.u-ls-kome > li::before {
  content: "※";
  margin-right: 0.2em;
  /* San Francisco や Segoe はリストマークがいまいちなのでヒラギノとメイリオを使用 */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, monospace;
}

/* 大きな黒丸（●）リスト */
ul.u-ls-large-disc {
  margin-left: 1.2em;
}
ul.u-ls-large-disc > li {
  text-indent: -1.2em;
}
ul.u-ls-large-disc > li::before {
  content: "●";
  margin-right: 0.2em;
  /* San Francisco や Segoe はリストマークがいまいちなのでヒラギノとメイリオを使用 */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, monospace;
  color: #D8B844;
}

/* 大きな白丸（○）リスト */
ul.u-ls-large-circle {
  margin-left: 1.2em;
}
ul.u-ls-large-circle > li {
  text-indent: -1.2em;
}
ul.u-ls-large-circle > li::before {
  content: "○";
  margin-right: 0.2em;
  /* San Francisco や Segoe はリストマークがいまいちなのでヒラギノとメイリオを使用 */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, monospace;
  color: #D8B844;
}

/* 連番付き※印のリスト（※1, ※2, ...） */
/* 連番は2桁まで。3桁以上はリスト本文テキストと重なるので適宜調整のこと */
ol.u-ls-kome {
  margin-left: 2.7em;
  list-style: none;
  counter-reset: number;
}
ol.u-ls-kome > li {
  text-indent: -2.7em;
}
ol.u-ls-kome > li::before {
  content: "※" counter(number);
  counter-increment: number;
  display: inline-block;
  width: 2.2em;
  margin-right: 0.5em;
  /* San Francisco や Segoe はリストマークがいまいちなので游ゴシック、ヒラギノ、メイリオを使用 */
  font-family: MyYuGothicM, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, monospace;
  line-height: 0;
  text-indent: 0;
  white-space: nowrap;
}

/* かっこ付き数字リスト */
ol.u-ls-bracket {
  margin-left: 2em;
  list-style: none;
  counter-reset: number;
}
ol.u-ls-bracket > li {
  text-indent: -2em;
}
ol.u-ls-bracket > li::before {
  content: "(" counter(number) ") ";
  counter-increment: number;
  display: marker;
  width: 1.5em;
  margin-right: 0.5em;
  text-indent: 0;
  white-space: nowrap;
}

/* 丸数字リスト（最大20） */
ol.u-ls-circle {
  margin-left: 1.2em;
}
ol.u-ls-circle > li {
  text-indent: -1.2em;
}
ol.u-ls-circle > li::before {
  margin-right: 0.2em;
  /* San Francisco や Segoe はリストマークがいまいちなのでヒラギノとメイリオを使用 */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, monospace;
}
ol.u-ls-circle > li:nth-of-type(1)::before {
  content: "①";
}
ol.u-ls-circle > li:nth-of-type(2)::before {
  content: "②";
}
ol.u-ls-circle > li:nth-of-type(3)::before {
  content: "③";
}
ol.u-ls-circle > li:nth-of-type(4)::before {
  content: "④";
}
ol.u-ls-circle > li:nth-of-type(5)::before {
  content: "⑤";
}
ol.u-ls-circle > li:nth-of-type(6)::before {
  content: "⑥";
}
ol.u-ls-circle > li:nth-of-type(7)::before {
  content: "⑦";
}
ol.u-ls-circle > li:nth-of-type(8)::before {
  content: "⑧";
}
ol.u-ls-circle > li:nth-of-type(9)::before {
  content: "⑨";
}
ol.u-ls-circle > li:nth-of-type(10)::before {
  content: "⑩";
}
ol.u-ls-circle > li:nth-of-type(11)::before {
  content: "⑪";
}
ol.u-ls-circle > li:nth-of-type(12)::before {
  content: "⑫";
}
ol.u-ls-circle > li:nth-of-type(13)::before {
  content: "⑬";
}
ol.u-ls-circle > li:nth-of-type(14)::before {
  content: "⑭";
}
ol.u-ls-circle > li:nth-of-type(15)::before {
  content: "⑮";
}
ol.u-ls-circle > li:nth-of-type(16)::before {
  content: "⑯";
}
ol.u-ls-circle > li:nth-of-type(17)::before {
  content: "⑰";
}
ol.u-ls-circle > li:nth-of-type(18)::before {
  content: "⑱";
}
ol.u-ls-circle > li:nth-of-type(19)::before {
  content: "⑲";
}
ol.u-ls-circle > li:nth-of-type(20)::before {
  content: "⑳";
}

/* --------------------------------------------------------------------------------
   ユーティリティクラス - フォントサイズ / .u-fs-*, .u-sp-fs-*
   --------------------------------------------------------------------------------
     - 単位 px → u-fs-5, u-fs-6  ... u-fs-64
       ※実際の指定では px ではなく rem が使われている（10px = 1rem）
     - 単位 vw → u-fs-1v,  u-fs-2v ... u-fs-100v
     - u- の後ろに sp- を付加するとスマホ用のクラスになる
----------------------------------------------------------------------------------- */
.u-fs-5 {
  font-size: 0.5rem !important;
}

.u-fs-6 {
  font-size: 0.6rem !important;
}

.u-fs-7 {
  font-size: 0.7rem !important;
}

.u-fs-8 {
  font-size: 0.8rem !important;
}

.u-fs-9 {
  font-size: 0.9rem !important;
}

.u-fs-10 {
  font-size: 1rem !important;
}

.u-fs-11 {
  font-size: 1.1rem !important;
}

.u-fs-12 {
  font-size: 1.2rem !important;
}

.u-fs-13 {
  font-size: 1.3rem !important;
}

.u-fs-14 {
  font-size: 1.4rem !important;
}

.u-fs-15 {
  font-size: 1.5rem !important;
}

.u-fs-16 {
  font-size: 1.6rem !important;
}

.u-fs-17 {
  font-size: 1.7rem !important;
}

.u-fs-18 {
  font-size: 1.8rem !important;
}

.u-fs-19 {
  font-size: 1.9rem !important;
}

.u-fs-20 {
  font-size: 2rem !important;
}

.u-fs-21 {
  font-size: 2.1rem !important;
}

.u-fs-22 {
  font-size: 2.2rem !important;
}

.u-fs-23 {
  font-size: 2.3rem !important;
}

.u-fs-24 {
  font-size: 2.4rem !important;
}

.u-fs-25 {
  font-size: 2.5rem !important;
}

.u-fs-26 {
  font-size: 2.6rem !important;
}

.u-fs-27 {
  font-size: 2.7rem !important;
}

.u-fs-28 {
  font-size: 2.8rem !important;
}

.u-fs-29 {
  font-size: 2.9rem !important;
}

.u-fs-30 {
  font-size: 3rem !important;
}

.u-fs-31 {
  font-size: 3.1rem !important;
}

.u-fs-32 {
  font-size: 3.2rem !important;
}

.u-fs-33 {
  font-size: 3.3rem !important;
}

.u-fs-34 {
  font-size: 3.4rem !important;
}

.u-fs-35 {
  font-size: 3.5rem !important;
}

.u-fs-36 {
  font-size: 3.6rem !important;
}

.u-fs-37 {
  font-size: 3.7rem !important;
}

.u-fs-38 {
  font-size: 3.8rem !important;
}

.u-fs-39 {
  font-size: 3.9rem !important;
}

.u-fs-40 {
  font-size: 4rem !important;
}

.u-fs-41 {
  font-size: 4.1rem !important;
}

.u-fs-42 {
  font-size: 4.2rem !important;
}

.u-fs-43 {
  font-size: 4.3rem !important;
}

.u-fs-44 {
  font-size: 4.4rem !important;
}

.u-fs-45 {
  font-size: 4.5rem !important;
}

.u-fs-46 {
  font-size: 4.6rem !important;
}

.u-fs-47 {
  font-size: 4.7rem !important;
}

.u-fs-48 {
  font-size: 4.8rem !important;
}

.u-fs-49 {
  font-size: 4.9rem !important;
}

.u-fs-50 {
  font-size: 5rem !important;
}

.u-fs-51 {
  font-size: 5.1rem !important;
}

.u-fs-52 {
  font-size: 5.2rem !important;
}

.u-fs-53 {
  font-size: 5.3rem !important;
}

.u-fs-54 {
  font-size: 5.4rem !important;
}

.u-fs-55 {
  font-size: 5.5rem !important;
}

.u-fs-56 {
  font-size: 5.6rem !important;
}

.u-fs-57 {
  font-size: 5.7rem !important;
}

.u-fs-58 {
  font-size: 5.8rem !important;
}

.u-fs-59 {
  font-size: 5.9rem !important;
}

.u-fs-60 {
  font-size: 6rem !important;
}

.u-fs-61 {
  font-size: 6.1rem !important;
}

.u-fs-62 {
  font-size: 6.2rem !important;
}

.u-fs-63 {
  font-size: 6.3rem !important;
}

.u-fs-64 {
  font-size: 6.4rem !important;
}

.u-fs-1v {
  font-size: 1vw !important;
}

.u-fs-2v {
  font-size: 2vw !important;
}

.u-fs-3v {
  font-size: 3vw !important;
}

.u-fs-4v {
  font-size: 4vw !important;
}

.u-fs-5v {
  font-size: 5vw !important;
}

.u-fs-6v {
  font-size: 6vw !important;
}

.u-fs-7v {
  font-size: 7vw !important;
}

.u-fs-8v {
  font-size: 8vw !important;
}

.u-fs-9v {
  font-size: 9vw !important;
}

.u-fs-10v {
  font-size: 10vw !important;
}

.u-fs-11v {
  font-size: 11vw !important;
}

.u-fs-12v {
  font-size: 12vw !important;
}

.u-fs-13v {
  font-size: 13vw !important;
}

.u-fs-14v {
  font-size: 14vw !important;
}

.u-fs-15v {
  font-size: 15vw !important;
}

.u-fs-16v {
  font-size: 16vw !important;
}

.u-fs-17v {
  font-size: 17vw !important;
}

.u-fs-18v {
  font-size: 18vw !important;
}

.u-fs-19v {
  font-size: 19vw !important;
}

.u-fs-20v {
  font-size: 20vw !important;
}

.u-fs-21v {
  font-size: 21vw !important;
}

.u-fs-22v {
  font-size: 22vw !important;
}

.u-fs-23v {
  font-size: 23vw !important;
}

.u-fs-24v {
  font-size: 24vw !important;
}

.u-fs-25v {
  font-size: 25vw !important;
}

.u-fs-26v {
  font-size: 26vw !important;
}

.u-fs-27v {
  font-size: 27vw !important;
}

.u-fs-28v {
  font-size: 28vw !important;
}

.u-fs-29v {
  font-size: 29vw !important;
}

.u-fs-30v {
  font-size: 30vw !important;
}

.u-fs-31v {
  font-size: 31vw !important;
}

.u-fs-32v {
  font-size: 32vw !important;
}

.u-fs-33v {
  font-size: 33vw !important;
}

.u-fs-34v {
  font-size: 34vw !important;
}

.u-fs-35v {
  font-size: 35vw !important;
}

.u-fs-36v {
  font-size: 36vw !important;
}

.u-fs-37v {
  font-size: 37vw !important;
}

.u-fs-38v {
  font-size: 38vw !important;
}

.u-fs-39v {
  font-size: 39vw !important;
}

.u-fs-40v {
  font-size: 40vw !important;
}

.u-fs-41v {
  font-size: 41vw !important;
}

.u-fs-42v {
  font-size: 42vw !important;
}

.u-fs-43v {
  font-size: 43vw !important;
}

.u-fs-44v {
  font-size: 44vw !important;
}

.u-fs-45v {
  font-size: 45vw !important;
}

.u-fs-46v {
  font-size: 46vw !important;
}

.u-fs-47v {
  font-size: 47vw !important;
}

.u-fs-48v {
  font-size: 48vw !important;
}

.u-fs-49v {
  font-size: 49vw !important;
}

.u-fs-50v {
  font-size: 50vw !important;
}

.u-fs-51v {
  font-size: 51vw !important;
}

.u-fs-52v {
  font-size: 52vw !important;
}

.u-fs-53v {
  font-size: 53vw !important;
}

.u-fs-54v {
  font-size: 54vw !important;
}

.u-fs-55v {
  font-size: 55vw !important;
}

.u-fs-56v {
  font-size: 56vw !important;
}

.u-fs-57v {
  font-size: 57vw !important;
}

.u-fs-58v {
  font-size: 58vw !important;
}

.u-fs-59v {
  font-size: 59vw !important;
}

.u-fs-60v {
  font-size: 60vw !important;
}

.u-fs-61v {
  font-size: 61vw !important;
}

.u-fs-62v {
  font-size: 62vw !important;
}

.u-fs-63v {
  font-size: 63vw !important;
}

.u-fs-64v {
  font-size: 64vw !important;
}

.u-fs-65v {
  font-size: 65vw !important;
}

.u-fs-66v {
  font-size: 66vw !important;
}

.u-fs-67v {
  font-size: 67vw !important;
}

.u-fs-68v {
  font-size: 68vw !important;
}

.u-fs-69v {
  font-size: 69vw !important;
}

.u-fs-70v {
  font-size: 70vw !important;
}

.u-fs-71v {
  font-size: 71vw !important;
}

.u-fs-72v {
  font-size: 72vw !important;
}

.u-fs-73v {
  font-size: 73vw !important;
}

.u-fs-74v {
  font-size: 74vw !important;
}

.u-fs-75v {
  font-size: 75vw !important;
}

.u-fs-76v {
  font-size: 76vw !important;
}

.u-fs-77v {
  font-size: 77vw !important;
}

.u-fs-78v {
  font-size: 78vw !important;
}

.u-fs-79v {
  font-size: 79vw !important;
}

.u-fs-80v {
  font-size: 80vw !important;
}

.u-fs-81v {
  font-size: 81vw !important;
}

.u-fs-82v {
  font-size: 82vw !important;
}

.u-fs-83v {
  font-size: 83vw !important;
}

.u-fs-84v {
  font-size: 84vw !important;
}

.u-fs-85v {
  font-size: 85vw !important;
}

.u-fs-86v {
  font-size: 86vw !important;
}

.u-fs-87v {
  font-size: 87vw !important;
}

.u-fs-88v {
  font-size: 88vw !important;
}

.u-fs-89v {
  font-size: 89vw !important;
}

.u-fs-90v {
  font-size: 90vw !important;
}

.u-fs-91v {
  font-size: 91vw !important;
}

.u-fs-92v {
  font-size: 92vw !important;
}

.u-fs-93v {
  font-size: 93vw !important;
}

.u-fs-94v {
  font-size: 94vw !important;
}

.u-fs-95v {
  font-size: 95vw !important;
}

.u-fs-96v {
  font-size: 96vw !important;
}

.u-fs-97v {
  font-size: 97vw !important;
}

.u-fs-98v {
  font-size: 98vw !important;
}

.u-fs-99v {
  font-size: 99vw !important;
}

.u-fs-100v {
  font-size: 100vw !important;
}

/* SP版：プリフィクス sp- を付加 */
@media print, screen and (max-width: 599px) {
  .u-sp-fs-5 {
    font-size: 0.5rem !important;
  }

  .u-sp-fs-6 {
    font-size: 0.6rem !important;
  }

  .u-sp-fs-7 {
    font-size: 0.7rem !important;
  }

  .u-sp-fs-8 {
    font-size: 0.8rem !important;
  }

  .u-sp-fs-9 {
    font-size: 0.9rem !important;
  }

  .u-sp-fs-10 {
    font-size: 1rem !important;
  }

  .u-sp-fs-11 {
    font-size: 1.1rem !important;
  }

  .u-sp-fs-12 {
    font-size: 1.2rem !important;
  }

  .u-sp-fs-13 {
    font-size: 1.3rem !important;
  }

  .u-sp-fs-14 {
    font-size: 1.4rem !important;
  }

  .u-sp-fs-15 {
    font-size: 1.5rem !important;
  }

  .u-sp-fs-16 {
    font-size: 1.6rem !important;
  }

  .u-sp-fs-17 {
    font-size: 1.7rem !important;
  }

  .u-sp-fs-18 {
    font-size: 1.8rem !important;
  }

  .u-sp-fs-19 {
    font-size: 1.9rem !important;
  }

  .u-sp-fs-20 {
    font-size: 2rem !important;
  }

  .u-sp-fs-21 {
    font-size: 2.1rem !important;
  }

  .u-sp-fs-22 {
    font-size: 2.2rem !important;
  }

  .u-sp-fs-23 {
    font-size: 2.3rem !important;
  }

  .u-sp-fs-24 {
    font-size: 2.4rem !important;
  }

  .u-sp-fs-25 {
    font-size: 2.5rem !important;
  }

  .u-sp-fs-26 {
    font-size: 2.6rem !important;
  }

  .u-sp-fs-27 {
    font-size: 2.7rem !important;
  }

  .u-sp-fs-28 {
    font-size: 2.8rem !important;
  }

  .u-sp-fs-29 {
    font-size: 2.9rem !important;
  }

  .u-sp-fs-30 {
    font-size: 3rem !important;
  }

  .u-sp-fs-31 {
    font-size: 3.1rem !important;
  }

  .u-sp-fs-32 {
    font-size: 3.2rem !important;
  }

  .u-sp-fs-33 {
    font-size: 3.3rem !important;
  }

  .u-sp-fs-34 {
    font-size: 3.4rem !important;
  }

  .u-sp-fs-35 {
    font-size: 3.5rem !important;
  }

  .u-sp-fs-36 {
    font-size: 3.6rem !important;
  }

  .u-sp-fs-37 {
    font-size: 3.7rem !important;
  }

  .u-sp-fs-38 {
    font-size: 3.8rem !important;
  }

  .u-sp-fs-39 {
    font-size: 3.9rem !important;
  }

  .u-sp-fs-40 {
    font-size: 4rem !important;
  }

  .u-sp-fs-41 {
    font-size: 4.1rem !important;
  }

  .u-sp-fs-42 {
    font-size: 4.2rem !important;
  }

  .u-sp-fs-43 {
    font-size: 4.3rem !important;
  }

  .u-sp-fs-44 {
    font-size: 4.4rem !important;
  }

  .u-sp-fs-45 {
    font-size: 4.5rem !important;
  }

  .u-sp-fs-46 {
    font-size: 4.6rem !important;
  }

  .u-sp-fs-47 {
    font-size: 4.7rem !important;
  }

  .u-sp-fs-48 {
    font-size: 4.8rem !important;
  }

  .u-sp-fs-49 {
    font-size: 4.9rem !important;
  }

  .u-sp-fs-50 {
    font-size: 5rem !important;
  }

  .u-sp-fs-51 {
    font-size: 5.1rem !important;
  }

  .u-sp-fs-52 {
    font-size: 5.2rem !important;
  }

  .u-sp-fs-53 {
    font-size: 5.3rem !important;
  }

  .u-sp-fs-54 {
    font-size: 5.4rem !important;
  }

  .u-sp-fs-55 {
    font-size: 5.5rem !important;
  }

  .u-sp-fs-56 {
    font-size: 5.6rem !important;
  }

  .u-sp-fs-57 {
    font-size: 5.7rem !important;
  }

  .u-sp-fs-58 {
    font-size: 5.8rem !important;
  }

  .u-sp-fs-59 {
    font-size: 5.9rem !important;
  }

  .u-sp-fs-60 {
    font-size: 6rem !important;
  }

  .u-sp-fs-61 {
    font-size: 6.1rem !important;
  }

  .u-sp-fs-62 {
    font-size: 6.2rem !important;
  }

  .u-sp-fs-63 {
    font-size: 6.3rem !important;
  }

  .u-sp-fs-64 {
    font-size: 6.4rem !important;
  }

  .u-sp-fs-1v {
    font-size: 1vw !important;
  }

  .u-sp-fs-2v {
    font-size: 2vw !important;
  }

  .u-sp-fs-3v {
    font-size: 3vw !important;
  }

  .u-sp-fs-4v {
    font-size: 4vw !important;
  }

  .u-sp-fs-5v {
    font-size: 5vw !important;
  }

  .u-sp-fs-6v {
    font-size: 6vw !important;
  }

  .u-sp-fs-7v {
    font-size: 7vw !important;
  }

  .u-sp-fs-8v {
    font-size: 8vw !important;
  }

  .u-sp-fs-9v {
    font-size: 9vw !important;
  }

  .u-sp-fs-10v {
    font-size: 10vw !important;
  }

  .u-sp-fs-11v {
    font-size: 11vw !important;
  }

  .u-sp-fs-12v {
    font-size: 12vw !important;
  }

  .u-sp-fs-13v {
    font-size: 13vw !important;
  }

  .u-sp-fs-14v {
    font-size: 14vw !important;
  }

  .u-sp-fs-15v {
    font-size: 15vw !important;
  }

  .u-sp-fs-16v {
    font-size: 16vw !important;
  }

  .u-sp-fs-17v {
    font-size: 17vw !important;
  }

  .u-sp-fs-18v {
    font-size: 18vw !important;
  }

  .u-sp-fs-19v {
    font-size: 19vw !important;
  }

  .u-sp-fs-20v {
    font-size: 20vw !important;
  }

  .u-sp-fs-21v {
    font-size: 21vw !important;
  }

  .u-sp-fs-22v {
    font-size: 22vw !important;
  }

  .u-sp-fs-23v {
    font-size: 23vw !important;
  }

  .u-sp-fs-24v {
    font-size: 24vw !important;
  }

  .u-sp-fs-25v {
    font-size: 25vw !important;
  }

  .u-sp-fs-26v {
    font-size: 26vw !important;
  }

  .u-sp-fs-27v {
    font-size: 27vw !important;
  }

  .u-sp-fs-28v {
    font-size: 28vw !important;
  }

  .u-sp-fs-29v {
    font-size: 29vw !important;
  }

  .u-sp-fs-30v {
    font-size: 30vw !important;
  }

  .u-sp-fs-31v {
    font-size: 31vw !important;
  }

  .u-sp-fs-32v {
    font-size: 32vw !important;
  }

  .u-sp-fs-33v {
    font-size: 33vw !important;
  }

  .u-sp-fs-34v {
    font-size: 34vw !important;
  }

  .u-sp-fs-35v {
    font-size: 35vw !important;
  }

  .u-sp-fs-36v {
    font-size: 36vw !important;
  }

  .u-sp-fs-37v {
    font-size: 37vw !important;
  }

  .u-sp-fs-38v {
    font-size: 38vw !important;
  }

  .u-sp-fs-39v {
    font-size: 39vw !important;
  }

  .u-sp-fs-40v {
    font-size: 40vw !important;
  }

  .u-sp-fs-41v {
    font-size: 41vw !important;
  }

  .u-sp-fs-42v {
    font-size: 42vw !important;
  }

  .u-sp-fs-43v {
    font-size: 43vw !important;
  }

  .u-sp-fs-44v {
    font-size: 44vw !important;
  }

  .u-sp-fs-45v {
    font-size: 45vw !important;
  }

  .u-sp-fs-46v {
    font-size: 46vw !important;
  }

  .u-sp-fs-47v {
    font-size: 47vw !important;
  }

  .u-sp-fs-48v {
    font-size: 48vw !important;
  }

  .u-sp-fs-49v {
    font-size: 49vw !important;
  }

  .u-sp-fs-50v {
    font-size: 50vw !important;
  }

  .u-sp-fs-51v {
    font-size: 51vw !important;
  }

  .u-sp-fs-52v {
    font-size: 52vw !important;
  }

  .u-sp-fs-53v {
    font-size: 53vw !important;
  }

  .u-sp-fs-54v {
    font-size: 54vw !important;
  }

  .u-sp-fs-55v {
    font-size: 55vw !important;
  }

  .u-sp-fs-56v {
    font-size: 56vw !important;
  }

  .u-sp-fs-57v {
    font-size: 57vw !important;
  }

  .u-sp-fs-58v {
    font-size: 58vw !important;
  }

  .u-sp-fs-59v {
    font-size: 59vw !important;
  }

  .u-sp-fs-60v {
    font-size: 60vw !important;
  }

  .u-sp-fs-61v {
    font-size: 61vw !important;
  }

  .u-sp-fs-62v {
    font-size: 62vw !important;
  }

  .u-sp-fs-63v {
    font-size: 63vw !important;
  }

  .u-sp-fs-64v {
    font-size: 64vw !important;
  }

  .u-sp-fs-65v {
    font-size: 65vw !important;
  }

  .u-sp-fs-66v {
    font-size: 66vw !important;
  }

  .u-sp-fs-67v {
    font-size: 67vw !important;
  }

  .u-sp-fs-68v {
    font-size: 68vw !important;
  }

  .u-sp-fs-69v {
    font-size: 69vw !important;
  }

  .u-sp-fs-70v {
    font-size: 70vw !important;
  }

  .u-sp-fs-71v {
    font-size: 71vw !important;
  }

  .u-sp-fs-72v {
    font-size: 72vw !important;
  }

  .u-sp-fs-73v {
    font-size: 73vw !important;
  }

  .u-sp-fs-74v {
    font-size: 74vw !important;
  }

  .u-sp-fs-75v {
    font-size: 75vw !important;
  }

  .u-sp-fs-76v {
    font-size: 76vw !important;
  }

  .u-sp-fs-77v {
    font-size: 77vw !important;
  }

  .u-sp-fs-78v {
    font-size: 78vw !important;
  }

  .u-sp-fs-79v {
    font-size: 79vw !important;
  }

  .u-sp-fs-80v {
    font-size: 80vw !important;
  }

  .u-sp-fs-81v {
    font-size: 81vw !important;
  }

  .u-sp-fs-82v {
    font-size: 82vw !important;
  }

  .u-sp-fs-83v {
    font-size: 83vw !important;
  }

  .u-sp-fs-84v {
    font-size: 84vw !important;
  }

  .u-sp-fs-85v {
    font-size: 85vw !important;
  }

  .u-sp-fs-86v {
    font-size: 86vw !important;
  }

  .u-sp-fs-87v {
    font-size: 87vw !important;
  }

  .u-sp-fs-88v {
    font-size: 88vw !important;
  }

  .u-sp-fs-89v {
    font-size: 89vw !important;
  }

  .u-sp-fs-90v {
    font-size: 90vw !important;
  }

  .u-sp-fs-91v {
    font-size: 91vw !important;
  }

  .u-sp-fs-92v {
    font-size: 92vw !important;
  }

  .u-sp-fs-93v {
    font-size: 93vw !important;
  }

  .u-sp-fs-94v {
    font-size: 94vw !important;
  }

  .u-sp-fs-95v {
    font-size: 95vw !important;
  }

  .u-sp-fs-96v {
    font-size: 96vw !important;
  }

  .u-sp-fs-97v {
    font-size: 97vw !important;
  }

  .u-sp-fs-98v {
    font-size: 98vw !important;
  }

  .u-sp-fs-99v {
    font-size: 99vw !important;
  }

  .u-sp-fs-100v {
    font-size: 100vw !important;
  }
}
/* --------------------------------------------------------------------------------
   ユーティリティクラス - line-height
   --------------------------------------------------------------------------------
     - u-lh-1, u-lh-11, u-lh-12, ... , u-lh-99, u-lh-10
     - sp-lh-1, sp-lh-11, sp-lh-12, ... , sp-lh-99, sp-lh-10
     - それぞれ line-height: 1, 1.1, 1.2, ... , 9.9, 10
----------------------------------------------------------------------------------- */
.u-lh-1 {
  line-height: 1 !important;
}

.u-lh-11 {
  line-height: 1.1 !important;
}

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

.u-lh-13 {
  line-height: 1.3 !important;
}

.u-lh-14 {
  line-height: 1.4 !important;
}

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

.u-lh-16 {
  line-height: 1.6 !important;
}

.u-lh-17 {
  line-height: 1.7 !important;
}

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

.u-lh-19 {
  line-height: 1.9 !important;
}

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

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

.u-lh-22 {
  line-height: 2.2 !important;
}

.u-lh-23 {
  line-height: 2.3 !important;
}

.u-lh-24 {
  line-height: 2.4 !important;
}

.u-lh-25 {
  line-height: 2.5 !important;
}

.u-lh-26 {
  line-height: 2.6 !important;
}

.u-lh-27 {
  line-height: 2.7 !important;
}

.u-lh-28 {
  line-height: 2.8 !important;
}

.u-lh-29 {
  line-height: 2.9 !important;
}

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

.u-lh-31 {
  line-height: 3.1 !important;
}

.u-lh-32 {
  line-height: 3.2 !important;
}

.u-lh-33 {
  line-height: 3.3 !important;
}

.u-lh-34 {
  line-height: 3.4 !important;
}

.u-lh-35 {
  line-height: 3.5 !important;
}

.u-lh-36 {
  line-height: 3.6 !important;
}

.u-lh-37 {
  line-height: 3.7 !important;
}

.u-lh-38 {
  line-height: 3.8 !important;
}

.u-lh-39 {
  line-height: 3.9 !important;
}

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

.u-lh-41 {
  line-height: 4.1 !important;
}

.u-lh-42 {
  line-height: 4.2 !important;
}

.u-lh-43 {
  line-height: 4.3 !important;
}

.u-lh-44 {
  line-height: 4.4 !important;
}

.u-lh-45 {
  line-height: 4.5 !important;
}

.u-lh-46 {
  line-height: 4.6 !important;
}

.u-lh-47 {
  line-height: 4.7 !important;
}

.u-lh-48 {
  line-height: 4.8 !important;
}

.u-lh-49 {
  line-height: 4.9 !important;
}

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

.u-lh-51 {
  line-height: 5.1 !important;
}

.u-lh-52 {
  line-height: 5.2 !important;
}

.u-lh-53 {
  line-height: 5.3 !important;
}

.u-lh-54 {
  line-height: 5.4 !important;
}

.u-lh-55 {
  line-height: 5.5 !important;
}

.u-lh-56 {
  line-height: 5.6 !important;
}

.u-lh-57 {
  line-height: 5.7 !important;
}

.u-lh-58 {
  line-height: 5.8 !important;
}

.u-lh-59 {
  line-height: 5.9 !important;
}

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

.u-lh-61 {
  line-height: 6.1 !important;
}

.u-lh-62 {
  line-height: 6.2 !important;
}

.u-lh-63 {
  line-height: 6.3 !important;
}

.u-lh-64 {
  line-height: 6.4 !important;
}

.u-lh-65 {
  line-height: 6.5 !important;
}

.u-lh-66 {
  line-height: 6.6 !important;
}

.u-lh-67 {
  line-height: 6.7 !important;
}

.u-lh-68 {
  line-height: 6.8 !important;
}

.u-lh-69 {
  line-height: 6.9 !important;
}

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

.u-lh-71 {
  line-height: 7.1 !important;
}

.u-lh-72 {
  line-height: 7.2 !important;
}

.u-lh-73 {
  line-height: 7.3 !important;
}

.u-lh-74 {
  line-height: 7.4 !important;
}

.u-lh-75 {
  line-height: 7.5 !important;
}

.u-lh-76 {
  line-height: 7.6 !important;
}

.u-lh-77 {
  line-height: 7.7 !important;
}

.u-lh-78 {
  line-height: 7.8 !important;
}

.u-lh-79 {
  line-height: 7.9 !important;
}

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

.u-lh-81 {
  line-height: 8.1 !important;
}

.u-lh-82 {
  line-height: 8.2 !important;
}

.u-lh-83 {
  line-height: 8.3 !important;
}

.u-lh-84 {
  line-height: 8.4 !important;
}

.u-lh-85 {
  line-height: 8.5 !important;
}

.u-lh-86 {
  line-height: 8.6 !important;
}

.u-lh-87 {
  line-height: 8.7 !important;
}

.u-lh-88 {
  line-height: 8.8 !important;
}

.u-lh-89 {
  line-height: 8.9 !important;
}

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

.u-lh-91 {
  line-height: 9.1 !important;
}

.u-lh-92 {
  line-height: 9.2 !important;
}

.u-lh-93 {
  line-height: 9.3 !important;
}

.u-lh-94 {
  line-height: 9.4 !important;
}

.u-lh-95 {
  line-height: 9.5 !important;
}

.u-lh-96 {
  line-height: 9.6 !important;
}

.u-lh-97 {
  line-height: 9.7 !important;
}

.u-lh-98 {
  line-height: 9.8 !important;
}

.u-lh-99 {
  line-height: 9.9 !important;
}

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

/* SP版：プリフィクス sp- を付加 */
@media print, screen and (max-width: 599px) {
  .u-sp-lh-1 {
    line-height: 1 !important;
  }

  .u-sp-lh-11 {
    line-height: 1.1 !important;
  }

  .u-sp-lh-12 {
    line-height: 1.2 !important;
  }

  .u-sp-lh-13 {
    line-height: 1.3 !important;
  }

  .u-sp-lh-14 {
    line-height: 1.4 !important;
  }

  .u-sp-lh-15 {
    line-height: 1.5 !important;
  }

  .u-sp-lh-16 {
    line-height: 1.6 !important;
  }

  .u-sp-lh-17 {
    line-height: 1.7 !important;
  }

  .u-sp-lh-18 {
    line-height: 1.8 !important;
  }

  .u-sp-lh-19 {
    line-height: 1.9 !important;
  }

  .u-sp-lh-2 {
    line-height: 2 !important;
  }

  .u-sp-lh-21 {
    line-height: 2.1 !important;
  }

  .u-sp-lh-22 {
    line-height: 2.2 !important;
  }

  .u-sp-lh-23 {
    line-height: 2.3 !important;
  }

  .u-sp-lh-24 {
    line-height: 2.4 !important;
  }

  .u-sp-lh-25 {
    line-height: 2.5 !important;
  }

  .u-sp-lh-26 {
    line-height: 2.6 !important;
  }

  .u-sp-lh-27 {
    line-height: 2.7 !important;
  }

  .u-sp-lh-28 {
    line-height: 2.8 !important;
  }

  .u-sp-lh-29 {
    line-height: 2.9 !important;
  }

  .u-sp-lh-3 {
    line-height: 3 !important;
  }

  .u-sp-lh-31 {
    line-height: 3.1 !important;
  }

  .u-sp-lh-32 {
    line-height: 3.2 !important;
  }

  .u-sp-lh-33 {
    line-height: 3.3 !important;
  }

  .u-sp-lh-34 {
    line-height: 3.4 !important;
  }

  .u-sp-lh-35 {
    line-height: 3.5 !important;
  }

  .u-sp-lh-36 {
    line-height: 3.6 !important;
  }

  .u-sp-lh-37 {
    line-height: 3.7 !important;
  }

  .u-sp-lh-38 {
    line-height: 3.8 !important;
  }

  .u-sp-lh-39 {
    line-height: 3.9 !important;
  }

  .u-sp-lh-4 {
    line-height: 4 !important;
  }

  .u-sp-lh-41 {
    line-height: 4.1 !important;
  }

  .u-sp-lh-42 {
    line-height: 4.2 !important;
  }

  .u-sp-lh-43 {
    line-height: 4.3 !important;
  }

  .u-sp-lh-44 {
    line-height: 4.4 !important;
  }

  .u-sp-lh-45 {
    line-height: 4.5 !important;
  }

  .u-sp-lh-46 {
    line-height: 4.6 !important;
  }

  .u-sp-lh-47 {
    line-height: 4.7 !important;
  }

  .u-sp-lh-48 {
    line-height: 4.8 !important;
  }

  .u-sp-lh-49 {
    line-height: 4.9 !important;
  }

  .u-sp-lh-5 {
    line-height: 5 !important;
  }

  .u-sp-lh-51 {
    line-height: 5.1 !important;
  }

  .u-sp-lh-52 {
    line-height: 5.2 !important;
  }

  .u-sp-lh-53 {
    line-height: 5.3 !important;
  }

  .u-sp-lh-54 {
    line-height: 5.4 !important;
  }

  .u-sp-lh-55 {
    line-height: 5.5 !important;
  }

  .u-sp-lh-56 {
    line-height: 5.6 !important;
  }

  .u-sp-lh-57 {
    line-height: 5.7 !important;
  }

  .u-sp-lh-58 {
    line-height: 5.8 !important;
  }

  .u-sp-lh-59 {
    line-height: 5.9 !important;
  }

  .u-sp-lh-6 {
    line-height: 6 !important;
  }

  .u-sp-lh-61 {
    line-height: 6.1 !important;
  }

  .u-sp-lh-62 {
    line-height: 6.2 !important;
  }

  .u-sp-lh-63 {
    line-height: 6.3 !important;
  }

  .u-sp-lh-64 {
    line-height: 6.4 !important;
  }

  .u-sp-lh-65 {
    line-height: 6.5 !important;
  }

  .u-sp-lh-66 {
    line-height: 6.6 !important;
  }

  .u-sp-lh-67 {
    line-height: 6.7 !important;
  }

  .u-sp-lh-68 {
    line-height: 6.8 !important;
  }

  .u-sp-lh-69 {
    line-height: 6.9 !important;
  }

  .u-sp-lh-7 {
    line-height: 7 !important;
  }

  .u-sp-lh-71 {
    line-height: 7.1 !important;
  }

  .u-sp-lh-72 {
    line-height: 7.2 !important;
  }

  .u-sp-lh-73 {
    line-height: 7.3 !important;
  }

  .u-sp-lh-74 {
    line-height: 7.4 !important;
  }

  .u-sp-lh-75 {
    line-height: 7.5 !important;
  }

  .u-sp-lh-76 {
    line-height: 7.6 !important;
  }

  .u-sp-lh-77 {
    line-height: 7.7 !important;
  }

  .u-sp-lh-78 {
    line-height: 7.8 !important;
  }

  .u-sp-lh-79 {
    line-height: 7.9 !important;
  }

  .u-sp-lh-8 {
    line-height: 8 !important;
  }

  .u-sp-lh-81 {
    line-height: 8.1 !important;
  }

  .u-sp-lh-82 {
    line-height: 8.2 !important;
  }

  .u-sp-lh-83 {
    line-height: 8.3 !important;
  }

  .u-sp-lh-84 {
    line-height: 8.4 !important;
  }

  .u-sp-lh-85 {
    line-height: 8.5 !important;
  }

  .u-sp-lh-86 {
    line-height: 8.6 !important;
  }

  .u-sp-lh-87 {
    line-height: 8.7 !important;
  }

  .u-sp-lh-88 {
    line-height: 8.8 !important;
  }

  .u-sp-lh-89 {
    line-height: 8.9 !important;
  }

  .u-sp-lh-9 {
    line-height: 9 !important;
  }

  .u-sp-lh-91 {
    line-height: 9.1 !important;
  }

  .u-sp-lh-92 {
    line-height: 9.2 !important;
  }

  .u-sp-lh-93 {
    line-height: 9.3 !important;
  }

  .u-sp-lh-94 {
    line-height: 9.4 !important;
  }

  .u-sp-lh-95 {
    line-height: 9.5 !important;
  }

  .u-sp-lh-96 {
    line-height: 9.6 !important;
  }

  .u-sp-lh-97 {
    line-height: 9.7 !important;
  }

  .u-sp-lh-98 {
    line-height: 9.8 !important;
  }

  .u-sp-lh-99 {
    line-height: 9.9 !important;
  }

  .u-sp-lh-10 {
    line-height: 10 !important;
  }
}
/* --------------------------------------------------------------------------------
   ユーティリティクラス - 文字関連
----------------------------------------------------------------------------------- */
/* 行揃え */
.u-txt-left {
  text-align: left !important;
}

.u-txt-right {
  text-align: right !important;
}

.u-txt-center {
  text-align: center !important;
}

.u-txt-justify {
  text-align: justify !important;
}

/* スタイル */
.u-txt-bold {
  font-weight: bold;
}

.u-txt-no-bold {
  font-weight: normal;
}

.u-txt-sans-serif {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, "Helvetica Neue", Verdana, sans-serif;
}

.u-txt-serif {
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.u-txt-mono {
  font-family: monospace;
}

.u-txt-break-all {
  word-break: break-all;
}

.u-txt-nowrap {
  white-space: nowrap;
}

.u-txt-palt {
  /* 文字を詰める */
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

.u-txt-no-palt {
  /* 文字を詰めない */
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
}

/* --------------------------------------------------------------------------------
   ユーティリティクラス - その他
     - クリアフィクス（そろそろ使用非推奨）
     - display 制御
     - フロート
----------------------------------------------------------------------------------- */
/* クリアフィクス（そろそろ使用非推奨） */
.u-clearfix {
  *zoom: 1;
}

.u-clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* display制御 */
.u-hide {
  display: none;
}

.u-inline {
  display: inline;
}

.u-block {
  display: block;
}

.u-inline-block {
  display: inline-block;
}

.u-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

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

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

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

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

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

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

@media print, screen and (max-width: 599px) {
  .u-sp-hide {
    display: none !important;
  }

  .u-sp-inline {
    display: inline !important;
  }

  .u-sp-block {
    display: block !important;
  }

  .u-sp-inline-block {
    display: inline-block !important;
  }
}
@media print, screen and (min-width: 600px) {
  .u-pc-hide {
    display: none !important;
  }

  .u-pc-inline {
    display: inline !important;
  }

  .u-pc-block {
    display: block !important;
  }

  .u-pc-inline-block {
    display: inline-block !important;
  }
}
/* フロート */
.u-float-l {
  float: left;
}

.u-float-r {
  float: right;
}

/* --------------------------------------------------------------------------------
   .login_form : ログインフォーム
----------------------------------------------------------------------------------- */
body.page_login .login_form {
  height: 400px;
  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: url("/mbuffetDemo/jsp/BFuser/common/images/page_login/login_bg.jpg") no-repeat center;
  background-size: cover;
}
body.page_login .login_form ._inner {
  width: 400px;
}
body.page_login .login_form ._inner h2 {
  font-size: 28px;
  letter-spacing: 0.1em;
  text-align: center;
  color: #FFFFFF;
}
body.page_login .login_form ._inner ._row {
  margin: 10px 0;
}
body.page_login .login_form ._inner .btn_main {
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
}
body.page_login .login_form ._inner ._reminder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
body.page_login .login_form ._inner ._reminder .checkbox span {
  font-size: 14px;
  color: #FFFFFF;
}
body.page_login .login_form ._inner ._reminder a {
  margin-left: auto;
  font-size: 14px;
  color: #FFFFFF;
}
@media print, screen and (max-width: 599px) {
  body.page_login .login_form ._inner {
    width: 300px;
  }
  body.page_login .login_form ._inner ._reminder {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-top: 20px;
  }
  body.page_login .login_form ._inner ._reminder a {
    margin: 10px 0 0;
  }
}

/* --------------------------------------------------------------------------------
   .login_guide_links : ログインフォーム下のガイド欄
----------------------------------------------------------------------------------- */
body.page_login .login_guide_links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 25px 0;
  background-color: rgba(1, 156, 225, .05);
}
body.page_login .login_guide_links ul {
  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;
}
body.page_login .login_guide_links ul li {
  padding: 0 80px;
}
body.page_login .login_guide_links ul a {
  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;
  font-size: 16px;
  text-decoration: none;
  color: #019CE1;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
body.page_login .login_guide_links ul a:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  opacity: 1;
}
body.page_login .login_guide_links ul a ._icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
}
body.page_login .login_guide_links ul a span {
  margin-top: 10px;
  font-weight: bold;
}
@media print, screen and (max-width: 599px) {
  body.page_login .login_guide_links {
    min-height: 100px;
  }
  body.page_login .login_guide_links ul {
    width: 100%;
  }
  body.page_login .login_guide_links ul li {
    width: 33.333%;
    padding: 0;
  }
  body.page_login .login_guide_links ul a {
    font-size: 14px;
  }
  body.page_login .login_guide_links ul a ._icon {
    height: 32px;
  }
  body.page_login .login_guide_links ul a ._icon img {
    width: 32px;
  }
}
body.page_login._kyoiku .login_guide_links {
  background-color: rgba(125, 71, 117, .05);
}
body.page_login._kyoiku .login_guide_links ul a {
  color: #7d4775;
}

/* --------------------------------------------------------------------------------
   .login_news : ログインページのニュース
----------------------------------------------------------------------------------- */
body.page_login .login_news {
  margin: 50px 0;
}
body.page_login .login_news h2 {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #019CE1;
}
body.page_login._kyoiku .login_news h2 {
  color: #7d4775;
}

/* --------------------------------------------------------------------------------
   .login_service : ログインページのサービスリスト
----------------------------------------------------------------------------------- */
body.page_login .login_service {
  margin: 50px 0 100px;
}
body.page_login .login_service h2 {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #019CE1;
}
body.page_login .login_service ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
body.page_login .login_service ul a {
  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: 250px;
  height: 100px;
  padding: 15px 0 10px;
  text-decoration: none;
  border: 1px solid #eee;
  border-radius: 5px;
}
body.page_login .login_service ul a ._img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
}
body.page_login .login_service ul a ._title {
  margin-top: auto;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: #343A40;
}
@media print, screen and (max-width: 599px) {
  body.page_login .login_service ul {
    display: block;
  }
  body.page_login .login_service ul a {
    width: 100%;
    margin: 10px 0;
  }
}
body.page_login._kyoiku .login_service h2 {
  color: #7d4775;
}

/* --------------------------------------------------------------------------------
   .first_login_form_wrapper : 初回ログインページのフォームのラッパー
----------------------------------------------------------------------------------- */
body.page_first_login_form .first_login_form_wrapper {
  width: 800px;
  margin: 30px auto 100px;
}
@media print, screen and (max-width: 1024px) {
  body.page_first_login_form .first_login_form_wrapper {
    width: 100%;
  }
}
@media print, screen and (max-width: 599px) {
  body.page_first_login_form .first_login_form_wrapper {
    margin: 30px auto 50px;
  }
}

/* --------------------------------------------------------------------------------
   .first_login_form_kiyaku : 初回ログインページの規約
----------------------------------------------------------------------------------- */
body.page_first_login_form .first_login_form_kiyaku {
  height: 400px;
  margin: 30px 0;
  padding: 20px;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.page-study {
  /* 上部のお知らせ欄 */
  /* おすすめの学習ステップについて */
  /* テーマリストヘッダ */
  /* 期間学習 */
}
.page-study__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2rem;
  background-color: #F0F6FC;
  /* タイトル */
}
.page-study__top__renraku-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 37%;
  margin-right: 2rem;
}
.page-study__top__renraku-list .p-renraku-list-compact {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.page-study__top__news-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 37%;
  margin-right: 2rem;
}
.page-study__top__news-list .c-news-list {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.page-study__top__osusume-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 25%;
}
.page-study__top__osusume-box h2 {
  letter-spacing: -0.05em;
}
.page-study__top__osusume-box .p-osusume-box {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.page-study__top header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 0.5rem;
}
.page-study__top header h2 {
  margin-left: 0.5rem;
  font-weight: bold;
}
.page-study__about-osusume-step {
  padding: 0.5rem;
  line-height: 1.5;
  text-align: center;
  color: #714D09;
  background-color: #FFFAEA;
}
.page-study__theme-list-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2rem;
}
.page-study__theme-list-header .p-legend {
  margin: 0;
}
.page-study__theme-list-header__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 0 auto;
}
.page-study__theme-list-header__links > li {
  margin-left: 2em;
}
.page-study.is-period .page-study__top__renraku-list,
.page-study.is-period .page-study__top__news-list {
  width: 50%;
}
@media print, screen and (max-width: 1024px) {
  .page-study {
    /* テーマリストヘッダ */
  }
  .page-study__top__renraku-list, .page-study__top__news-list {
    margin-right: 1rem;
  }
  .page-study__top header, .page-study__top__osusume-box h2 {
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .page-study__theme-list-header {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media print, screen and (max-width: 768px) {
  .page-study__top {
    padding: 1rem;
  }
}
@media print, screen and (max-width: 599px) {
  .page-study {
    /* 上部のお知らせ欄 */
    /* おすすめの学習ステップについて */
    /* テーマリストヘッダ */
    /* 期間学習 */
  }
  .page-study__top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    /* タイトル */
  }
  .page-study__top__renraku-list, .page-study__top__news-list, .page-study__top__osusume-box {
    width: 100%;
    margin: 0;
  }
  .page-study__top h2 {
    margin-left: 0.5rem;
    letter-spacing: 0;
  }
  .page-study__about-osusume-step {
    padding: 1rem;
    text-align: left;
  }
  .page-study__about-osusume-step span {
    display: block;
  }
  .page-study__theme-list-header {
    display: block;
  }
  .page-study__theme-list-header__links > li {
    margin: 1rem;
    margin-left: 0;
  }
  .page-study.is-period .page-study__top__renraku-list,
.page-study.is-period .page-study__top__news-list {
    width: 100%;
  }
}

.page-report-comp footer.p-report-footer {
  display: -webkit-box;
}

.page-study.is-report .p-form__group input[type=text],
.page-study.is-report-save .p-form__group input[type=text],
.page-study.is-report-all .p-form__group input[type=text] {
  max-width: 12rem !important;
}

.page-a04-qa-submit .p-attachment-list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.page-a04-qa-err .p-attachment-list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.page-a04-qa-a-submit .p-attachment-list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.page-a04-qa-a-err .p-attachment-list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.page-mov .c-link.is-play::before {
  content: "\f144";
  display: inline-block;
}

.page-study-plan {
  /* おすすめの学習ステップ・隠すボタン */
  /* おすすめの学習ステップ・表示ボタン */
  /* おすすめの学習ステップ */
  /* 学習計画から開くモーダルのis-fillerを非表示 */
}
.page-study-plan__osusume {
  position: relative;
}
.page-study-plan__hide, .page-study-plan__show {
  position: absolute;
  right: 2rem;
  top: 2rem;
  color: #7A838C;
}
.page-study-plan__hide::before, .page-study-plan__show::before {
  color: #79A2C9;
}
.page-study-plan__show {
  display: none;
}
.page-study-plan__osusume {
  min-height: 6rem;
}
.page-study-plan__osusume.is-hide .page-study-plan__hide,
.page-study-plan__osusume.is-hide .p-osusume-list {
  display: none;
}
.page-study-plan__osusume.is-hide .page-study-plan__show {
  display: block;
}
.page-study-plan.is-diagnose-comp-add .l-modal .p-theme-card-list .is-filler, .page-study-plan.is-style-add-result .l-modal .p-theme-card-list .is-filler {
  display: none;
}
@media print, screen and (max-width: 1024px) {
  .page-study-plan {
    /* モーダル：学習テーマ一覧から追加 */
  }
  .page-study-plan.is-list-add .page-list-add__body {
    padding-bottom: 6rem;
  }
  .page-study-plan.is-list-add .page-list-add__body > p.u-txt-center br {
    display: none;
  }
}
@media print, screen and (max-width: 768px) {
  .page-study-plan {
    /* モーダル：学習スタイルから追加：結果 */
    /* モーダル：診断結果からのおすすめ */
  }
  .page-study-plan.is-style-add-result .l-modal__body > p.u-txt-center br {
    display: none;
  }
  .page-study-plan.is-diagnose-comp-add .l-modal__body > p.u-txt-center br {
    display: none;
  }
  .page-study-plan.is-diagnose-comp-add footer .c-column {
    gap: 1rem;
  }
  .page-study-plan.is-diagnose-comp-add footer .c-column > button {
    width: auto !important;
    padding: 0 1rem;
    min-width: 0;
  }
  .page-study-plan.is-diagnose-comp-add footer .c-column .p-btns {
    gap: 1rem;
  }
}
@media print, screen and (max-width: 599px) {
  .page-study-plan {
    /* モーダル：学習スタイルから追加：結果 */
    /* モーダル：学習テーマ一覧から追加 */
    /* モーダル：診断結果からのおすすめ */
  }
  .page-study-plan.is-style-add-result footer .p-btns, .page-study-plan.is-list-add footer .p-btns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .page-study-plan.is-style-add-result footer .p-btns button, .page-study-plan.is-list-add footer .p-btns button {
    width: auto;
    min-width: 0;
    padding: 0 1rem;
  }
  .page-study-plan.is-diagnose-comp-add footer .c-column {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .page-study-plan.is-diagnose-comp-add footer .c-column .p-btns button {
    min-width: 0;
    padding: 0 1.5rem;
  }
  .page-study-plan.is-diagnose-comp-add footer .c-column .p-btns button.l-modal__close-btn {
    display: none;
  }
}

@media print, screen and (max-width: 599px) {
  .page-news .l-section__inner > .c-column {
    gap: 0.5rem;
    margin-bottom: 0;
  }
}

@media print, screen and (max-width: 599px) {
  .page-chat.is-post .p-btns > * {
    width: 100%;
  }
}

.page-guide .u-ls-login li {
  display: list-item;
}
.page-guide .u-ls-login li span:nth-child(1) {
  display: block;
  font-weight: bold;
}
.page-guide .u-ls-login li span:nth-child(2) {
  display: none;
}
.page-guide .u-ls-login.is-mark li::before {
  display: none;
}
.page-guide .l-section img {
  width: 100%;
  max-width: 800px;
}

/* ================================================================================
  TODO: 以下は古いSCSS。整理が必要。
  ================================================================================ */
/*# sourceMappingURL=maps/style.css.map */