@charset "UTF-8";
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0; }

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/ }

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

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0; }

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0; }

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none; }

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit; }

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

address {
  font-style: inherit; }

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

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

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

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

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

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom; }

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit; }

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox; }

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none; }

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default; }

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

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none; }

/**
 * Remove padding
 */
option {
  padding: 0; }

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

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

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

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

/**
 * 1. Correct the outline style in Safari.
 */
[type="search"] {
  outline-offset: -2px;
  /* 1 */ }

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

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

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer; }

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

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

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none; }

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0; }

caption {
  text-align: left; }

td,
th {
  vertical-align: top;
  padding: 0; }

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

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

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

/*
  変数
*/
/*
  サイト全体のベーススタイル
*/
html {
  font-size: 62.5%;
  height: auto; }

body {
  background: linear-gradient(90deg, #ebedfa, #e9ebf8);
  color: #444;
  font-family: Noto Sans Japanese, sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  line-height: 1.8;
  font-size: 1.6em;
  height: auto; }

body * {
  box-sizing: border-box; }

img {
  max-width: 100%;
  vertical-align: top; }

/*
  ユーザー定義スタイル
*/
/*
  ボディーのレイアウトデザイン
*/
.l-body {
  min-height: 100vh;
  position: relative; }

/*
  ヘッダーのレイアウトデザイン
*/
.l-header {
  width: 100%;
  margin: auto;
  position: relative;
  margin-bottom: 30px; }
  @media screen and (min-width: 800px) {
    .l-header {
      margin-bottom: 60px; } }

/*
  ナビゲーションのレイアウトデザイン
*/
.l-nav {
  position: absolute;
  display: inline-flex;
  top: 5px;
  right: 10px; }
  @media screen and (min-width: 800px) {
    .l-nav {
      position: absolute;
      top: 18px; } }

.l-sideNav {
  display: none; }
  @media screen and (min-width: 800px) {
    .l-sideNav {
      display: block; } }

/*
  コンテナーのレイアウトデザイン
*/
.l-container {
  max-width: 1300px;
  width: 100%;
  margin: auto;
  position: relative;
  padding: 0 10px; }

/*
  メインのレイアウトデザイン
*/
.l-main {
  width: 100%;
  margin: auto;
  position: relative; }

/*
  フッターのレイアウトデザイン
*/
.l-footer {
  width: 100%;
  padding: 30px 10px;
  margin: auto;
  background: #676b84;
  text-align: center;
  position: absolute;
  bottom: 0;
  max-height: 220px;
  height: 100%; }

/*
  アニメーションの共通デザイン
*/
@keyframes animeComeOutConvex {
  0% {
    opacity: 0;
    box-shadow: none; }
  100% {
    box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
    opacity: 1; } }

@keyframes animeFadeInBottomToTop {
  0% {
    opacity: 0;
    transform: translateY(50px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes animeFadeInBottomToTopHidden {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 50px)); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%); } }

@keyframes animeEditPassword {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes animeAddEmail {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes rotation180 {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(180deg); } }

/*
  任意アイコンの共通デザイン
*/
.c-arbitrary::after {
  content: "任意";
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  color: #444;
  background: #ebedfa;
  border: 1px solid #444;
  padding: .8em .3em .8em;
  line-height: 0;
  display: inline-block;
  border-radius: 3px; }

/*
  ボタンの共通デザイン一覧
*/
.c-button, .c-button_square {
  display: inline-block;
  box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
  transition: 0.3s;
  text-align: center;
  cursor: pointer;
  letter-spacing: .1em;
  color: #444;
  background: linear-gradient(90deg, #ebedfa, #e9ebf8);
  font-size: 2rem;
  font-weight: 900; }
  .c-button:hover, .c-button_square:hover {
    box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
  .c-button:active, .c-button_square:active {
    box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 1px 1px 2px #b0b2c1, inset -1px -1px 2px #fffff3; }
  .c-button:disabled, .c-button_square:disabled {
    opacity: .4; }

.c-button {
  padding: .6em 1.5em;
  border-radius: 30px; }

.c-button_square {
  padding: .6em 1.5em;
  border-radius: 7px; }

/*
  チェックボックスの共通デザイン
*/
.c-checkbox {
  display: inline-block; }
  .c-checkbox__checkbox {
    display: none; }
    .c-checkbox__checkbox:checked + label::after {
      opacity: 1;
      transform: rotate(45deg) scale3d(1, 1, 1); }
    .c-checkbox__checkbox:disabled + label:hover,
    .c-checkbox__checkbox:disabled + label:active {
      box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
  .c-checkbox__label {
    color: #444;
    background: linear-gradient(90deg, #ebedfa, #e9ebf8);
    box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
    cursor: pointer;
    display: inline-block;
    padding: .45em 1em .45em 2.5em;
    position: relative;
    border-radius: 20px;
    box-sizing: border-box;
    cursor: pointer;
    width: auto;
    transition: .3s;
    opacity: 1; }
    .c-checkbox__label:hover, .c-checkbox__label:active {
      box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
    .c-checkbox__label::before {
      background: linear-gradient(90deg, #ebedfa, #e9ebf8);
      border: 1px solid #a0a0a0;
      content: '';
      display: block;
      height: 16px;
      left: 15px;
      margin-top: -8px;
      position: absolute;
      top: 50%;
      width: 16px; }
    .c-checkbox__label::after {
      border-right: 3px solid #606060;
      border-bottom: 3px solid #606060;
      content: '';
      display: block;
      height: 11px;
      left: 20px;
      margin-top: -7px;
      opacity: 0;
      position: absolute;
      top: 50%;
      transform: rotate(45deg) translate3d(0, 2px, 0) scale3d(0.7, 0.7, 1);
      transition: transform .1s ease-in-out, opacity .1s ease-in-out;
      width: 6px; }

/*
  入力例の共通デザイン
*/
.c-example {
  font-size: 1.2rem;
  color: #888;
  text-indent: -1.7em;
  margin-left: 1.7em;
  line-height: 1.4em; }
  .c-example::before {
    content: "例) "; }
  @media screen and (min-width: 800px) {
    .c-example {
      font-size: 1.4rem; } }

/*
  見出しの共通デザイン一覧
*/
.c-heading1 {
  display: inline-block;
  color: #444;
  padding-bottom: .2em;
  position: relative;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.5em; }
  .c-heading1::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    display: inline-block;
    width: 4em;
    height: 5px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #2d32e6, #4696fa);
    border-radius: 3px; }
  @media screen and (min-width: 800px) {
    .c-heading1 {
      font-size: 2.8rem; } }

.c-heading2 {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .08em; }

/*
  ハイパーリンクの共通デザイン
*/
.c-hyperlink {
  transition: 0.3s;
  padding-bottom: .2em;
  text-decoration: none;
  color: #2430a0;
  font-weight: 700;
  border-bottom: 2px solid #2430a0; }
  .c-hyperlink:hover, .c-hyperlink:active {
    opacity: .6; }

.c-hyperlinkDefault {
  text-decoration: underline; }

/*
  入力項目エラーの共通デザイン
*/
.c-inputItemsErrorMessage {
  display: inline-block;
  font-size: 1.5rem;
  color: #c93141; }
  .c-inputItemsErrorMessage:empty {
    display: none; }
  .c-inputItemsErrorMessage::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f071';
    font-size: 1.22em;
    margin-right: .25em; }

/*
  エラーの共通デザイン
*/
.c-pageErrorMessage {
  font-weight: 900;
  font-size: 1.6rem;
  padding: 1.5em;
  background: #f5dadd;
  color: #c93141;
  border-radius: 7px;
  position: relative;
  letter-spacing: .05em;
  overflow-wrap: break-word; }
  .c-pageErrorMessage:empty {
    display: none; }
  .c-pageErrorMessage > ul > li {
    text-indent: -2em;
    margin-left: 2em; }
    .c-pageErrorMessage > ul > li::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: '\f071';
      font-size: 1.2em;
      margin-right: .1em; }

/*
  受付する会社ロゴの共通デザイン
*/
.c-receptionCorpLogo, .c-receptionCorpLogo--convex {
  display: inline-block;
  box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3;
  border-radius: 50%;
  position: relative;
  transition: 0.3s;
  height: 150px;
  width: 150px; }
  .c-receptionCorpLogo__logoImage {
    display: inline-block;
    position: absolute;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; }
  .c-receptionCorpLogo__text {
    display: inline-block;
    position: absolute;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: .1em; }
  .c-receptionCorpLogo--convex {
    box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }

/*
  受付方法の共通デザイン
*/
.c-receptionMethod {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  /*background: $gradationColor-base;
  box-shadow: $shadow-dent;
  text-align: center;*/
  color: #4696fa;
  border: 1px solid #4696fa;
  text-align: center; }
  .c-receptionMethod__icon {
    font-size: 2.5rem;
    margin-top: 12px; }
  .c-receptionMethod__text {
    display: inline-block;
    font-size: 1rem;
    line-height: 1em;
    margin-top: 15px; }

/*
  必須アイコンの共通デザイン
*/
.c-require::after {
  content: "必須";
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  color: #fff;
  background: #c93141;
  border: 1px solid #c93141;
  padding: .8em .3em .8em;
  line-height: 0;
  display: inline-block;
  border-radius: 3px; }

/*
  セレクトボックスの共通デザイン
*/
.c-selectbox {
  display: inline-block;
  position: relative; }
  .c-selectbox__select {
    display: inline-block;
    box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
    transition: 0.3s;
    cursor: pointer;
    padding: .45em 2.5em .45em 1em;
    border-radius: 30px;
    position: relative;
    opacity: 1;
    color: #444;
    background: linear-gradient(90deg, #ebedfa, #e9ebf8); }
    .c-selectbox__select:hover {
      box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
    .c-selectbox__select:disabled:hover {
      box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
  .c-selectbox::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0d7";
    position: absolute;
    top: .45em;
    right: 1em;
    pointer-events: none;
    color: #444; }

/*
  テキストボックスの共通デザイン
*/
.c-textbox {
  box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3;
  transition: 0.3s;
  padding: .45em 1em;
  border-radius: 30px;
  opacity: 1;
  color: #444;
  background: linear-gradient(90deg, #ebedfa, #e9ebf8); }
  .c-textbox:focus {
    box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 1px 1px 2px #b0b2c1, inset -1px -1px 2px #fffff3; }
  .c-textbox:read-only {
    box-shadow: none;
    padding: .45em 0; }

/*
  パスワード目ボタンの共通デザイン
*/
.c-textboxPasswordWrapper {
  display: inline-block;
  position: relative; }
  .c-textboxPasswordWrapper__passwordEye {
    position: absolute;
    top: .45em;
    right: 1em; }
    .c-textboxPasswordWrapper__passwordEye::after {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-style: normal;
      content: "\f06e";
      color: #444;
      cursor: pointer; }
  .c-textboxPasswordWrapper__passwordEyeSlash {
    position: absolute;
    top: .45em;
    right: 1em; }
    .c-textboxPasswordWrapper__passwordEyeSlash::after {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-style: normal;
      content: "\f070";
      color: #444;
      cursor: pointer; }

/*
  トグルボタンの共通デザイン
*/
.c-toggleButton {
  display: inline-flex; }
  .c-toggleButton__checkbox {
    display: none; }
    .c-toggleButton__checkbox:checked + .c-toggleButton__circle {
      box-shadow: none;
      background: #4bcc3c; }
      .c-toggleButton__checkbox:checked + .c-toggleButton__circle::after {
        left: 20px; }
  .c-toggleButton__circle {
    display: block;
    width: 50px;
    height: 24px;
    border-radius: 20px;
    position: relative;
    margin-right: .85em;
    box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3;
    background: linear-gradient(90deg, #ebedfa, #e9ebf8); }
    .c-toggleButton__circle::after {
      position: absolute;
      top: -6px;
      left: -10px;
      display: block;
      content: "";
      width: 35px;
      height: 35px;
      box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
      background: linear-gradient(90deg, #ebedfa, #e9ebf8);
      border-radius: 50%;
      transition: .1s; }
  .c-toggleButton__label {
    margin-top: -2px; }

/*
  アクティベート画面のデザイン
*/
.p-activate__actionButtons {
  width: 100%;
  display: flex;
  flex-flow: column-reverse;
  justify-content: center;
  margin: auto; }
  @media screen and (min-width: 800px) {
    .p-activate__actionButtons {
      flex-flow: row; } }

.p-activate__actionButton {
  margin: 0 auto 15px;
  width: 90%; }
  @media screen and (min-width: 800px) {
    .p-activate__actionButton {
      margin: 0 30px 0 0;
      max-width: 250px; }
      .p-activate__actionButton:last-child {
        margin-right: 0; } }

/*
  著作権のデザイン
*/
.p-allRightsReserved {
  color: #fff;
  text-align: center;
  font-size: 1rem; }
  @media screen and (min-width: 800px) {
    .p-allRightsReserved {
      font-size: 1.3rem; } }

/*
  条項のデザイン。
*/
.p-articleList {
  font-size: 1.4rem;
  overflow-wrap: break-word;
  counter-reset: titleNumber 0; }
  .p-articleList__lead {
    text-align: left;
    margin-bottom: 20px; }
  .p-articleList__item {
    margin-bottom: 20px; }
  .p-articleList__title {
    font-weight: 600; }
    .p-articleList__title::before {
      counter-increment: titleNumber 1;
      content: "第" counter(titleNumber) "条 ("; }
    .p-articleList__title::after {
      content: ")"; }
  .p-articleList__numberList {
    counter-reset: numberListNumber 0; }
  .p-articleList__numberListItem {
    text-indent: -1.2em;
    padding-left: 1.2em; }
    .p-articleList__numberListItem::before {
      counter-increment: numberListNumber 1;
      content: counter(numberListNumber) ". "; }
  .p-articleList__bracketsList {
    counter-reset: bracketsListNumber 0; }
  .p-articleList__bracketsListItem {
    text-indent: -1.7em;
    padding-left: 1.7em; }
    .p-articleList__bracketsListItem::before {
      counter-increment: bracketsListNumber 1;
      content: "(" counter(bracketsListNumber) ") "; }
  .p-articleList__inquiry {
    text-align: left;
    margin-bottom: 20px; }
  .p-articleList__end {
    text-align: right; }
  .p-articleList__dateOfEnactment {
    text-align: left; }

/*
  ボディーのデザイン
*/
.p-body {
  padding-bottom: 220px; }

/*
  ボタンのデザイン一覧
*/
.p-buttons--mainColor {
  color: #fff;
  background: linear-gradient(90deg, #2d32e6, #4696fa); }

.p-buttons--accentColor4 {
  color: #fff;
  background: #4696fa; }

.p-buttons--accentColorText3 {
  color: #2d32e6; }

.p-buttons--accentColorText4 {
  color: #4696fa; }

.p-buttons--accentColorText7 {
  color: #c93141; }

.p-buttons--small {
  font-size: 1.2rem;
  font-weight: 900; }

.p-buttons--medium {
  font-size: 1.6rem;
  font-weight: 900; }

.p-button_withIcon__icon {
  font-size: 1.22em;
  margin-right: .2em;
  width: 1.25em; }

.p-button_footerMenu {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 10px 2px;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  background: initial; }
  .p-button_footerMenu__icon {
    font-size: 1em;
    width: 1em;
    margin-bottom: 5px; }
  .p-button_footerMenu__text {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5em; }

/*
  顔写真アップロードフォームのデザイン
*/
.p-facePhotoUploadForm__title {
  margin-bottom: 30px; }

.p-facePhotoUploadForm__description {
  margin-bottom: 15px; }

.p-facePhotoUploadForm__pageErrorMessage {
  margin-bottom: 30px; }

.p-facePhotoUploadForm__inner {
  margin-bottom: 50px; }

.p-facePhotoUploadForm__uploadFile {
  display: none; }

.p-facePhotoUploadForm__uploadArea, .p-facePhotoUploadForm__uploadArea--disable {
  display: block;
  border: 2px dashed #4696fa;
  border-radius: 4px;
  padding: 45px 15px 20px;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
  cursor: pointer; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__uploadArea, .p-facePhotoUploadForm__uploadArea--disable {
      padding: 45px 20px 25px; } }
  .p-facePhotoUploadForm__uploadArea--disable {
    cursor: auto !important; }
  .p-facePhotoUploadForm__uploadArea .c-inputItemsErrorMessage, .p-facePhotoUploadForm__uploadArea--disable .c-inputItemsErrorMessage {
    display: block; }
  .p-facePhotoUploadForm__uploadArea .c-inputItemsErrorMessage:empty, .p-facePhotoUploadForm__uploadArea--disable .c-inputItemsErrorMessage:empty {
    display: none; }

.p-facePhotoUploadForm__uploadAreaTitle {
  font-size: 1.4rem;
  background: #4696fa;
  border-radius: 4px 0 3px 0;
  color: #fff;
  display: inline-block;
  padding: .25em 1em;
  width: 150px;
  position: absolute;
  top: -2px;
  left: -2px; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__uploadAreaTitle {
      font-size: 1.6rem;
      width: 180px; } }

.p-facePhotoUploadForm__uploadAreaIcon {
  font-size: 10rem;
  color: #4696fa;
  margin-bottom: 15px; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__uploadAreaIcon {
      font-size: 12rem; } }
  .p-facePhotoUploadForm__uploadAreaIcon.is-DisplayPreview {
    display: none; }

.p-facePhotoUploadForm__previewImage > img {
  display: none; }

.p-facePhotoUploadForm__previewImage.is-Display > img {
  display: block;
  height: 400px;
  width: auto;
  margin: 0 auto 15px; }

.p-facePhotoUploadForm__previewText {
  font-size: 1.4rem;
  color: #888; }

.p-facePhotoUploadForm__imageRegistered {
  font-size: 1.4rem;
  font-weight: 900;
  border-radius: 7px;
  display: block;
  padding: .15em .5em .1em;
  margin: auto;
  width: 5em;
  color: #267c19;
  background: #bfedb8; }

.p-facePhotoUploadForm__imageUnregistered {
  font-size: 1.4rem;
  font-weight: 900;
  border-radius: 7px;
  display: block;
  padding: .15em .5em .1em;
  margin: auto;
  width: 5em;
  color: #c93141;
  background: #f5dadd; }

.p-facePhotoUploadForm__imageDeleteButton {
  margin-top: 10px;
  width: 7em; }

.p-facePhotoUploadForm__selectCorpText {
  font-weight: 900;
  font-size: 2rem;
  margin-bottom: 10px; }

.p-facePhotoUploadForm__selectCorpDescription {
  margin-bottom: 20px; }

.p-facePhotoUploadForm__corpListWrapper {
  margin: 0 -20px -30px 0; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__corpListWrapper {
      margin: 0; } }

.p-facePhotoUploadForm__corpList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-bottom: 50px; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__corpList {
      justify-content: left; } }

.p-facePhotoUploadForm__corpListItem {
  margin: 0 20px 30px 0; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__corpListItem {
      margin: 0 30px 0 0; } }

.p-facePhotoUploadForm__corpCheckBox {
  display: none; }

.p-facePhotoUploadForm__corpCheckBox:checked + .p-facePhotoUploadForm__receptionCorpLogoWrapper > .p-facePhotoUploadForm__receptionCorpLogo {
  box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3 !important; }

.p-facePhotoUploadForm__corpNameWrapper {
  margin: 10px auto 0;
  text-align: center;
  width: 140px;
  line-height: 1.25em; }

.p-facePhotoUploadForm__corpName {
  font-size: 1.4rem;
  background: #e1e1e1;
  padding: .35em .5em;
  border-radius: 3px; }

.p-facePhotoUploadForm__inputItems {
  display: flex;
  flex-wrap: wrap; }

.p-facePhotoUploadForm__termsTitle {
  width: 100%;
  text-align: center;
  margin-bottom: 10px; }

.p-facePhotoUploadForm__termsDetail {
  width: 100%;
  text-align: center;
  margin-bottom: 50px; }

.p-facePhotoUploadForm__termsAgree {
  display: flex;
  flex-flow: column;
  margin-bottom: 30px; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__termsAgree {
      flex-flow: row;
      justify-content: center; } }

.p-facePhotoUploadForm__termsAgreeQuestion {
  margin-bottom: 1em; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__termsAgreeQuestion {
      margin: 0 1em 0 0; } }

@media screen and (min-width: 800px) {
  .p-facePhotoUploadForm__termsAgreeAnswer {
    margin-top: -.5em; } }

.p-facePhotoUploadForm__actionButtons, .p-facePhotoUploadForm__actionButtons--notReverse {
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-flow: column-reverse;
  justify-content: center;
  margin: auto; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__actionButtons, .p-facePhotoUploadForm__actionButtons--notReverse {
      flex-flow: row; } }
  .p-facePhotoUploadForm__actionButtons--notReverse {
    flex-flow: column; }
    @media screen and (min-width: 800px) {
      .p-facePhotoUploadForm__actionButtons--notReverse {
        flex-flow: row; } }

.p-facePhotoUploadForm__actionButton {
  margin: 0 auto 15px;
  width: 90%; }
  @media screen and (min-width: 800px) {
    .p-facePhotoUploadForm__actionButton {
      margin: 0 30px 0 0;
      max-width: 250px; }
      .p-facePhotoUploadForm__actionButton:last-child {
        margin-right: 0; } }

/*
  faqのデザイン
*/
.p-faq {
  width: 100%;
  padding: 20px 50px 20px 20px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 30px;
  cursor: pointer;
  transition: 0.3s; }
  .p-faq__title {
    text-align: left;
    position: relative; }
  .p-faq__detail {
    display: none;
    text-align: left;
    margin-top: 15px; }
  .p-faq__crossButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: -10px; }
    .p-faq__crossButton::before, .p-faq__crossButton::after {
      content: '';
      display: block;
      width: 15px;
      height: 3px;
      border-radius: 5px;
      background: #4696fa;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
    .p-faq__crossButton::after {
      background: #4696fa;
      transform: translateY(-50%) rotate(90deg);
      transition: 0.5s; }
  .p-faq.is-open .p-faq__crossButton::after {
    transform: rotate(0);
    transition: 0.5s; }

/*
  フッターの会社ロゴのデザイン
*/
.p-footerCorpLogo {
  text-align: center;
  margin: 10px 0; }
  .p-footerCorpLogo__image {
    max-width: 100px;
    width: 100%; }
    @media screen and (min-width: 800px) {
      .p-footerCorpLogo__image {
        max-width: 150px; } }

/*
  フッターのリンクリストのデザイン
*/
.p-footerLinkList {
  display: flex;
  flex-flow: column;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff; }
  @media screen and (min-width: 800px) {
    .p-footerLinkList {
      flex-flow: row;
      margin-left: 50px;
      font-size: 1.6rem; } }
  .p-footerLinkList__item {
    margin-bottom: .5em; }
    @media screen and (min-width: 800px) {
      .p-footerLinkList__item {
        margin-right: 1em; }
        .p-footerLinkList__item::after {
          margin-left: 1em;
          content: "|";
          color: #fff; }
        .p-footerLinkList__item:last-child {
          margin-right: 0; }
          .p-footerLinkList__item:last-child::after {
            content: ""; } }

/*
  フッターナビゲーション(マイページ)のデザイン
*/
.p-footerNavList {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  padding: 0 10px;
  border-radius: 30px;
  display: flex;
  flex-flow: row;
  color: #fff;
  background: linear-gradient(90deg, #2d32e6, #4696fa);
  width: 95%;
  box-shadow: 6px 0 10px #b0b2c1;
  z-index: 100;
  opacity: .95; }
  @media screen and (min-width: 800px) {
    .p-footerNavList {
      display: none; } }
  .p-footerNavList__item {
    width: 25%; }
    .p-footerNavList__item:last-child {
      border-right: none; }

/*
  フォームのデザイン
*/
.p-form {
  width: 100%;
  margin: 0 auto 50px; }
  @media screen and (min-width: 800px) {
    .p-form {
      max-width: 900px;
      margin: 0 auto 100px; } }
  .p-form__heading {
    text-align: center;
    margin-bottom: 50px; }
    @media screen and (min-width: 800px) {
      .p-form__heading {
        margin-bottom: 80px; } }
  .p-form__actionMessage {
    text-align: center;
    margin-bottom: 30px; }
    @media screen and (min-width: 800px) {
      .p-form__actionMessage {
        margin-bottom: 50px; } }
  .p-form__description {
    text-align: center;
    margin: auto;
    width: 90%;
    margin-top: -10px;
    margin-bottom: 10px; }
    @media screen and (min-width: 800px) {
      .p-form__description {
        margin-top: -30px;
        margin-bottom: 30px;
        width: 80%; } }
  .p-form__pageErrorMessage {
    margin-bottom: 30px; }
  .p-form__note {
    font-size: 1.4rem;
    margin-bottom: 10px; }
    .p-form__note::before {
      content: "※ "; }
  .p-form__box {
    width: 100%;
    margin: 0 auto 50px;
    box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
    border-radius: 7px; }
  .p-form__inner {
    width: 100%;
    margin: auto;
    padding: 40px 30px 50px; }
    @media screen and (min-width: 800px) {
      .p-form__inner {
        max-width: 750px;
        padding: 50px 30px; } }
  .p-form__inputItems {
    display: flex;
    flex-wrap: wrap; }
  .p-form__inputItemTitle, .p-form__inputItemTitle--editPassword {
    font-size: 1.4rem;
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
    position: relative; }
    @media screen and (min-width: 800px) {
      .p-form__inputItemTitle, .p-form__inputItemTitle--editPassword {
        font-size: 1.6rem;
        width: 35%;
        padding: .3em 1.5em 0 0; }
        .p-form__inputItemTitle:last-of-type, .p-form__inputItemTitle--editPassword:last-of-type {
          margin-bottom: 0; } }
    .p-form__inputItemTitle--editPassword {
      display: none;
      opacity: 0; }
      .p-form__inputItemTitle--editPassword.is-open {
        display: block;
        animation: animeEditPassword .5s ease 0s 1 normal;
        animation-delay: .4s;
        animation-fill-mode: forwards; }
  .p-form__inputItemDetail, .p-form__inputItemDetail--editPassword {
    width: 100%;
    margin-bottom: 40px; }
    .p-form__inputItemDetail:last-of-type, .p-form__inputItemDetail--editPassword:last-of-type {
      margin-bottom: 0; }
    @media screen and (min-width: 800px) {
      .p-form__inputItemDetail, .p-form__inputItemDetail--editPassword {
        width: 65%; } }
    .p-form__inputItemDetail--editPassword {
      display: none;
      opacity: 0; }
      .p-form__inputItemDetail--editPassword.is-open {
        display: block;
        animation: animeEditPassword .5s ease 0s 1 normal;
        animation-delay: .4s;
        animation-fill-mode: forwards; }
  .p-form__editButtonWrapper {
    margin-top: 10px; }
  .p-form__pendingButtonWrapper {
    margin-top: 15px; }
  .p-form__pendingButton {
    margin-right: 5px; }
    .p-form__pendingButton:last-child {
      margin-right: 0; }
  .p-form__confirmItem, .p-form__confirmItem--editPassword {
    display: block;
    min-height: 1.8em; }
    @media screen and (min-width: 800px) {
      .p-form__confirmItem, .p-form__confirmItem--editPassword {
        margin-top: .25em; } }
    .p-form__confirmItem--editPassword {
      display: none; }
      .p-form__confirmItem--editPassword.is-open {
        display: block; }
  .p-form__textboxPasswordWrapper {
    width: 100%; }
    @media screen and (min-width: 800px) {
      .p-form__textboxPasswordWrapper {
        max-width: 200px; } }
    .p-form__textboxPasswordWrapper--editPassword {
      display: none;
      opacity: 0; }
      .p-form__textboxPasswordWrapper--editPassword.is-open {
        display: inline-block;
        animation: animeEditPassword .5s ease 0s 1 normal;
        animation-delay: .4s;
        animation-fill-mode: forwards; }
  .p-form__passwordEditToggleButton, .p-form__passwordEditToggleButton--editPassword {
    margin-top: 5px; }
    .p-form__passwordEditToggleButton--editPassword {
      display: none; }
      .p-form__passwordEditToggleButton--editPassword.is-open {
        display: block; }
  .p-form__registeredEMailList {
    margin-bottom: 15px; }
    @media screen and (min-width: 800px) {
      .p-form__registeredEMailList {
        margin-top: .25em; } }
  .p-form__registeredEMailListItem {
    margin-bottom: 15px; }
    .p-form__registeredEMailListItem:last-child {
      margin-bottom: 0; }
  .p-form__addEmailAddressInputFieldButton--addEmailAddressInputField {
    display: none; }
    .p-form__addEmailAddressInputFieldButton--addEmailAddressInputField.is-open {
      display: inline; }
  .p-form__subInputItems, .p-form__subInputItems--addEmailAddressInputField {
    margin-bottom: 15px; }
    .p-form__subInputItems--addEmailAddressInputField {
      display: none;
      opacity: 0; }
      .p-form__subInputItems--addEmailAddressInputField.is-open {
        display: block;
        animation: animeAddEmail .5s ease 0s 1 normal;
        animation-delay: .4s;
        animation-fill-mode: forwards; }
  .p-form__subInputItemTitle {
    font-size: 1.4rem;
    margin-bottom: 10px; }
  .p-form__subInputItemDetail {
    margin-bottom: 15px; }
    .p-form__subInputItemDetail:last-child {
      margin-bottom: 0; }
  .p-form__subRequire {
    position: relative;
    right: 0; }
  .p-form__addEmailAddressButtonWrapper--addEmailAddressInputField {
    display: none;
    opacity: 0; }
    .p-form__addEmailAddressButtonWrapper--addEmailAddressInputField.is-open {
      display: inline;
      animation: animeAddEmail .5s ease 0s 1 normal;
      animation-delay: .4s;
      animation-fill-mode: forwards; }
  @media screen and (min-width: 800px) {
    .p-form__temporaryRegistrationEmailList {
      margin-top: .25em; } }
  .p-form__temporaryRegistrationEmailListItem {
    margin-bottom: 15px; }
    .p-form__temporaryRegistrationEmailListItem:last-child {
      margin-bottom: 0; }
  .p-form__temporaryRegistrationEmailNote {
    font-size: 1.2rem;
    color: #888;
    text-indent: -1.4em;
    margin-top: 15px;
    padding-left: 1.4em;
    line-height: 1.4em; }
    .p-form__temporaryRegistrationEmailNote::before {
      content: "※ "; }
    @media screen and (min-width: 800px) {
      .p-form__temporaryRegistrationEmailNote {
        font-size: 1.4rem; } }
  @media screen and (min-width: 800px) {
    .p-form__loginEMailEditSeleteList {
      margin-top: .25em; } }
  .p-form__loginEMailEditSeleteListItem {
    margin-bottom: 15px; }
    .p-form__loginEMailEditSeleteListItem:last-child {
      margin-bottom: 0; }
  .p-form__termsTitle {
    width: 100%;
    text-align: center;
    margin-bottom: 10px; }
  .p-form__termsDetail {
    width: 100%;
    text-align: center;
    margin-bottom: 50px; }
  .p-form__termsAgree {
    display: flex;
    flex-flow: column; }
    @media screen and (min-width: 800px) {
      .p-form__termsAgree {
        flex-flow: row;
        justify-content: center; } }
  .p-form__termsAgreeQuestion {
    margin-bottom: 1em; }
    @media screen and (min-width: 800px) {
      .p-form__termsAgreeQuestion {
        margin: 0 1em 0 0; } }
  @media screen and (min-width: 800px) {
    .p-form__termsAgreeAnswer {
      margin-top: -.5em; } }
  .p-form__require, .p-form__require--editPassword {
    position: relative;
    right: 0; }
    @media screen and (min-width: 800px) {
      .p-form__require, .p-form__require--editPassword {
        position: absolute;
        right: 30px; } }
    .p-form__require--editPassword {
      display: none;
      opacity: 0; }
      .p-form__require--editPassword.is-open {
        display: inline;
        animation: animeEditPassword .5s ease 0s 1 normal;
        animation-delay: .4s;
        animation-fill-mode: forwards; }
  .p-form__arbitrary {
    position: relative;
    right: 0; }
    @media screen and (min-width: 800px) {
      .p-form__arbitrary {
        position: absolute;
        right: 30px; } }
  .p-form__example, .p-form__example--editPassword {
    margin: 10px 0 0 0.5em; }
    .p-form__example--editPassword {
      display: none;
      opacity: 0; }
      .p-form__example--editPassword.is-open {
        display: block;
        animation: animeEditPassword .5s ease 0s 1 normal;
        animation-delay: .4s;
        animation-fill-mode: forwards; }
  .p-form__inputItemsErrorMessage {
    margin-left: .5em; }
    .p-form__inputItemsErrorMessage:empty {
      display: none; }
  .p-form__text {
    margin: 0 auto 50px; }
  .p-form__actionButtons, .p-form__actionButtons--notReverse {
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    margin: auto; }
    @media screen and (min-width: 800px) {
      .p-form__actionButtons, .p-form__actionButtons--notReverse {
        flex-flow: row; } }
    .p-form__actionButtons--notReverse {
      flex-flow: column; }
      @media screen and (min-width: 800px) {
        .p-form__actionButtons--notReverse {
          flex-flow: row; } }
  .p-form__actionButton {
    margin: 0 auto 15px;
    width: 90%; }
    @media screen and (min-width: 800px) {
      .p-form__actionButton {
        margin: 0 30px 0 0;
        max-width: 250px; }
        .p-form__actionButton:last-child {
          margin-right: 0; } }

/*
  ハンバーガーボタンのデザイン
*/
.p-hamburgerMenuButton {
  position: relative;
  top: -5px;
  right: 0;
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  z-index: 50;
  cursor: pointer; }
  @media screen and (min-width: 800px) {
    .p-hamburgerMenuButton {
      display: none; } }
  .p-hamburgerMenuButton__bar, .p-hamburgerMenuButton__bar::before, .p-hamburgerMenuButton__bar::after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2d32e6, #4696fa);
    position: absolute;
    transition: all .3s; }
  .p-hamburgerMenuButton__bar:before {
    bottom: 8px; }
  .p-hamburgerMenuButton__bar:after {
    top: 8px; }
  .p-hamburgerMenuButton.is-open .p-hamburgerMenuButton__bar {
    background: rgba(255, 255, 255, 0); }
  .p-hamburgerMenuButton.is-open .p-hamburgerMenuButton__bar::before {
    bottom: 0;
    transform: rotate(45deg);
    background: #fff; }
  .p-hamburgerMenuButton.is-open .p-hamburgerMenuButton__bar::after {
    top: 0;
    transform: rotate(-45deg);
    background: #fff; }

/*
  ヘッダーのデザイン
*/
.p-header {
  height: 64px; }
  .p-header__siteLogo {
    margin-top: 14px; }
  @media screen and (min-width: 800px) {
    .p-header__siteLogo {
      margin-top: 12px; } }

/*
  訪問履歴の検索条件デザイン
*/
.p-historySearch {
  display: flex;
  flex-flow: column;
  justify-content: left;
  margin-bottom: 30px; }
  .p-historySearch ::placeholder {
    color: #a6a6a6; }
  @media screen and (min-width: 1100px) {
    .p-historySearch {
      flex-flow: row;
      align-items: center; } }
  .p-historySearch__yearMonth {
    display: flex;
    margin-bottom: 15px; }
    @media screen and (min-width: 1100px) {
      .p-historySearch__yearMonth {
        margin-bottom: 0; } }
  .p-historySearch__selectbox {
    margin-right: 10px; }
  .p-historySearch__textbox {
    max-width: 100%;
    width: 100%;
    margin-bottom: 10px; }
    @media screen and (min-width: 1100px) {
      .p-historySearch__textbox {
        max-width: 300px;
        min-width: 300px;
        margin: 0 15px 0 0; } }
  .p-historySearch__actionButtons {
    display: flex;
    flex-flow: row; }
  .p-historySearch__searchButton {
    margin-right: 10px;
    width: 100%;
    max-width: 100px; }
  .p-historySearch__csvOutputButton {
    width: 45%; }
    @media screen and (min-width: 1100px) {
      .p-historySearch__csvOutputButton {
        width: auto; } }

/*
  ホームページのデザイン
*/
.p-homepage {
  position: relative; }
  .p-homepage__container {
    width: 100%;
    padding: 30px 0 150px;
    text-align: center; }
    @media screen and (min-width: 800px) {
      .p-homepage__container {
        max-width: 900px;
        margin: auto;
        padding: 100px 0 250px; } }
  .p-homepage__heading {
    text-align: center;
    margin-bottom: 50px; }
    @media screen and (min-width: 800px) {
      .p-homepage__heading {
        margin-bottom: 80px; } }
  .p-homepage__contents {
    padding: 0 30px; }
  .p-homepage__about {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center; }
    @media screen and (min-width: 800px) {
      .p-homepage__about {
        flex-flow: row; } }
  .p-homepage__aboutImg {
    width: 100%;
    margin-bottom: 30px;
    opacity: 0; }
    .p-homepage__aboutImg.is-animation {
      animation: animeFadeInBottomToTop .8s ease .3s 1 normal;
      animation-fill-mode: forwards; }
    @media screen and (min-width: 800px) {
      .p-homepage__aboutImg {
        margin-right: 70px;
        margin-bottom: 0;
        width: 55%; } }
  .p-homepage__aboutText {
    font-size: 2rem;
    width: 100%;
    color: #ebedfa;
    text-align: left; }
    @media screen and (min-width: 800px) {
      .p-homepage__aboutText {
        width: 35%; } }
  .p-homepage__useList {
    display: flex;
    flex-flow: column;
    justify-content: center; }
    @media screen and (min-width: 800px) {
      .p-homepage__useList {
        flex-flow: row; } }
  .p-homepage__useListItem {
    width: 100%;
    margin-bottom: 30px; }
    .p-homepage__useListItem:last-child {
      margin-right: 0; }
    @media screen and (min-width: 800px) {
      .p-homepage__useListItem {
        width: 30%;
        margin-right: 50px;
        margin-bottom: 0; } }
  .p-homepage__useModalWrapper {
    max-width: 1200px;
    width: 100%;
    position: fixed;
    display: none;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px; }
    @media screen and (min-width: 800px) {
      .p-homepage__useModalWrapper {
        padding: 0; } }
    .p-homepage__useModalWrapper.is-open {
      display: block;
      z-index: 1000;
      animation: animeFadeInBottomToTopHidden .6s ease 0s 1 normal;
      animation-fill-mode: forwards; }
    .p-homepage__useModalWrapper::after {
      content: '\f00d';
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      text-align: center;
      vertical-align: middle;
      position: absolute;
      top: -10px;
      left: 10px;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      background: #fff;
      color: #000;
      cursor: pointer;
      z-index: 450; }
      @media screen and (min-width: 800px) {
        .p-homepage__useModalWrapper::after {
          left: -10px; } }
  .p-homepage__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; }
  .p-homepage:nth-child(even) {
    background: linear-gradient(90deg, #2d32e6, #4696fa); }
    .p-homepage:nth-child(even) .p-homepage__heading {
      color: #fff; }
      .p-homepage:nth-child(even) .p-homepage__heading::before {
        background: #fff; }
  .p-homepage:last-child .p-homepage__container {
    padding-bottom: 80px; }

/*
  グレイアウトのデザイン
*/
.is-grayOut, .is-grayOut--use, .is-grayOut--receptionDetail, .is-grayOut--qrcode {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #676a85;
  opacity: .7;
  cursor: pointer;
  top: 0;
  left: 0; }
  .is-grayOut--use {
    z-index: 150; }
  .is-grayOut--receptionDetail {
    z-index: 150; }
  .is-grayOut--qrcode {
    z-index: 300; }

/*
  ログインのデザイン
*/
.p-login {
  max-width: 500px;
  width: 100%;
  margin: auto; }

/*
  ログインメールアドレスのデザイン
*/
.p-loginEMail {
  display: inline-block;
  width: 100%; }
  .p-loginEMail__radio {
    display: none; }
    .p-loginEMail__radio:checked + label {
      box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 1px 1px 2px #b0b2c1, inset -1px -1px 2px #fffff3; }
      .p-loginEMail__radio:checked + label::after {
        opacity: 1;
        transform: scale3d(1, 1, 1); }
  .p-loginEMail__label {
    width: 100%;
    cursor: pointer;
    display: inline-block;
    padding: .45em 0 .45em 3.75em;
    position: relative;
    box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
    border-radius: 30px;
    transition: .1s;
    color: #444;
    background: #ebedfa; }
    .p-loginEMail__label--currentlySelected {
      width: 100%;
      display: inline-block;
      padding: .45em 0 .45em 3.75em;
      position: relative;
      box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
      border-radius: 30px;
      transition: .1s;
      color: #444;
      background: #ebedfa; }
      .p-loginEMail__label--currentlySelected::before {
        content: '現在';
        position: absolute;
        left: 20px;
        font-size: 1.2rem;
        top: .9em; }
    .p-loginEMail__label:hover {
      box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
    .p-loginEMail__label:active {
      box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 1px 1px 2px #b0b2c1, inset -1px -1px 2px #fffff3; }
    .p-loginEMail__label::before {
      border-radius: 50%;
      content: '';
      display: block;
      height: 16px;
      width: 16px;
      position: absolute;
      top: 50%;
      left: 25px;
      margin-top: -8px;
      background: #ebedfa;
      border: 1px solid #444; }
    .p-loginEMail__label::after {
      content: '';
      border-radius: 50%;
      display: block;
      height: 10px;
      width: 10px;
      position: absolute;
      top: 50%;
      left: 28px;
      margin-top: -5px;
      opacity: 0;
      transform: scale3d(0.3, 0.3, 1);
      transition: transform .1s ease-in-out, opacity .1s ease-in-out;
      background: #444; }
  .p-loginEMail__emailAddress {
    display: inline-block;
    line-height: 1em;
    border-left: 1px solid #ccc;
    padding-left: 1em;
    font-size: 1.4rem;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

/*
  ログインフォームのデザイン
*/
.p-loginForm {
  position: inherit;
  padding: 40px 30px 50px;
  min-width: 350px;
  width: 100%;
  margin: auto;
  border-radius: 7px;
  box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
  @media screen and (min-width: 800px) {
    .p-loginForm {
      padding: 50px; } }
  .p-loginForm__input {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px; }
  .p-loginForm__inputTitle {
    width: 100%;
    font-weight: normal;
    margin-bottom: 5px; }
  .p-loginForm__inputDetail {
    width: 100%;
    margin-bottom: 15px; }
    .p-loginForm__inputDetail:last-child {
      margin-bottom: 0; }
  .p-loginForm__textbox {
    width: 100%; }
  .p-loginForm__textboxPasswordWrapper {
    width: 100%; }
  .p-loginForm__keepLoggedIn {
    margin-bottom: 20px;
    text-align: center; }
  .p-loginForm__loginButton {
    width: 100%;
    margin-bottom: 15px; }
  .p-loginForm__notLogin {
    text-align: center;
    margin-bottom: 40px; }
  .p-loginForm__hr {
    border-top: 1px solid #a0a0a0;
    box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3;
    text-align: center;
    margin-bottom: 40px; }
    .p-loginForm__hr:after {
      content: 'アカウントをお持ちでない方';
      display: inline-block;
      position: relative;
      top: -14px;
      padding: 0 10px;
      background: linear-gradient(90deg, #ebedfa, #e9ebf8);
      color: #444;
      font-size: 1.6rem; }
  .p-loginForm__registrationButton {
    width: 100%; }

/*
  メッセージのデザイン
*/
.p-completionMessage {
  font-weight: 900;
  font-size: 1.6rem;
  padding: 1.5em;
  color: #267c19;
  background: #bfedb8;
  border-radius: 7px;
  position: relative;
  letter-spacing: .05em;
  overflow-wrap: break-word; }
  .p-completionMessage:empty {
    display: none; }
  .p-completionMessage:not(:empty)::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f058";
    font-size: 1.4em;
    margin-right: .1em;
    position: relative;
    top: 1px; }

.p-activateMessage {
  font-weight: 900;
  font-size: 1.6rem;
  padding: 1.5em;
  color: #283cc8;
  background: #dce0f6;
  border-radius: 7px;
  position: relative;
  letter-spacing: .05em;
  overflow-wrap: break-word; }
  .p-activateMessage::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f05a";
    font-size: 2.1rem;
    position: relative;
    top: 2px; }
    @media screen and (min-width: 800px) {
      .p-activateMessage::before {
        font-size: 2.4rem;
        top: 1px; } }

/*
  メインビジュアルのデザイン
*/
.p-mv {
  padding: 0 50px 0 25px;
  margin-bottom: 80px;
  display: flex;
  align-items: center;
  justify-items: center; }
  @media screen and (min-width: 800px) {
    .p-mv {
      padding: 0 50px;
      margin-bottom: 150px; } }
  .p-mv__mvImage {
    width: 100%; }
    @media screen and (min-width: 800px) {
      .p-mv__mvImage {
        width: 65%; } }
  .p-mv__loginForm {
    display: none; }
    @media screen and (min-width: 800px) {
      .p-mv__loginForm {
        display: block;
        width: 35%; } }

/*
  メインビジュアル画像のデザイン
*/
.p-mvImage {
  width: 80vw;
  height: 80vw;
  position: relative;
  margin: auto; }
  @media screen and (min-width: 800px) {
    .p-mvImage {
      max-width: 400px;
      max-height: 400px;
      width: 50vw;
      height: 50vw;
      margin: 0; } }
  @media screen and (min-width: 1025px) {
    .p-mvImage {
      max-width: 600px;
      max-height: 600px;
      width: 50vw;
      height: 50vw;
      margin: 0; } }
  .p-mvImage__container {
    width: 100%;
    height: 100%;
    -webkit-animation: spin 12s linear infinite;
    animation: spin 12s linear infinite;
    position: relative; }
  .p-mvImage__shape {
    width: 100%;
    height: 100%;
    transition: border-radius 1s ease-out;
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    -webkit-animation: morph 8s ease-in-out infinite both alternate;
    animation: morph 8s ease-in-out infinite both alternate;
    position: absolute;
    overflow: hidden;
    z-index: 20;
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3), 3px 3px 5px white; }
  .p-mvImage__imageMujin {
    width: 142%;
    height: 142%;
    position: absolute;
    left: -21%;
    top: -21%;
    background: url(../img/mujin.png);
    background-size: 100%;
    background-position: center center;
    display: flex;
    color: #003;
    font-size: 5vw;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    animation: spin 12s linear infinite reverse;
    opacity: 1;
    z-index: 10; }
  .p-mvImage__catchCopyPosition {
    position: absolute;
    bottom: 50px;
    z-index: 30; }
  .p-mvImage__catchCopy {
    font-size: 1.5rem;
    font-weight: bold;
    /*background: linear-gradient(135deg, rgba(70,79,105,0.8), rgba(70,79,105,0.9));*/
    background: linear-gradient(90deg, rgba(133, 136, 159, 0.8), rgba(103, 106, 133, 0.8));
    color: #fff;
    padding: 10px 20px;
    letter-spacing: 0.3em;
    display: inline-block;
    animation-name: slide-in;
    animation-duration: 2s; }
    @media screen and (min-width: 800px) {
      .p-mvImage__catchCopy {
        font-size: 3.2rem; } }

@keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
  100% {
    border-radius: 40% 60%; } }

@keyframes spin {
  to {
    transform: rotate(1turn); } }

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

/*
  マイページのデザイン
*/
.p-myPage {
  display: flex; }
  @media screen and (min-width: 800px) {
    .p-myPage__sideNav {
      display: block;
      position: relative;
      min-width: 280px;
      width: 22%;
      margin-right: 30px; } }
  .p-myPage__mainSection {
    width: 100%; }
    @media screen and (min-width: 800px) {
      .p-myPage__mainSection {
        width: 78%; } }

/*
  マイページのボディーデザイン
*/
.p-myPageBody {
  padding-bottom: 100px; }

/*
  マイページのフッターデザイン
*/
.p-myPageFooter {
  display: none; }
  @media screen and (min-width: 800px) {
    .p-myPageFooter {
      display: block; } }

/*
  ナビゲーションのデザイン
*/
.p-nav__loginButton {
  max-width: 90px;
  width: 100%;
  height: 36px;
  margin-top: 2px;
  margin-right: 5px; }
  @media screen and (min-width: 800px) {
    .p-nav__loginButton {
      display: none; } }

/*
  ナビゲーションリストのデザイン
*/
.p-navList {
  display: flex;
  flex-flow: column;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: -120%;
  color: #fff;
  background: linear-gradient(90deg, #2d32e6, #4696fa);
  opacity: .8;
  padding: 80px 30px;
  transition: all .3s;
  z-index: 40; }
  @media screen and (min-width: 800px) {
    .p-navList {
      flex-flow: row;
      position: relative;
      height: auto;
      width: auto;
      right: 0;
      color: #444;
      background: none;
      padding: 0; } }
  .p-navList__item {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 50px; }
    @media screen and (min-width: 800px) {
      .p-navList__item {
        font-size: 1.2rem;
        margin-right: 30px; }
        .p-navList__item:last-child {
          margin-right: 0; } }
    @media screen and (min-width: 1025px) {
      .p-navList__item {
        font-size: 1.8rem;
        margin-right: 60px; }
        .p-navList__item:last-child {
          margin-right: 0; } }
  .p-navList.is-open {
    right: 0; }

/*
  受付内容のデザイン
*/
.p-reception {
  display: flex;
  position: relative;
  background: linear-gradient(90deg, #ebedfa, #e9ebf8);
  border-radius: 7px;
  padding: 15px;
  transition: 0.3s;
  width: 100%;
  align-items: center;
  opacity: 0;
  box-shadow: none; }
  .p-reception.animation {
    animation: animeComeOutConvex .3s ease 0s 1 normal;
    animation-fill-mode: forwards; }
  @media screen and (min-width: 800px) {
    .p-reception {
      padding: 30px; } }
  .p-reception:hover {
    box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent !important;
    cursor: pointer; }
  .p-reception:active {
    box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3 !important; }
  .p-reception__receptionCorpLogoWrapper {
    margin-right: 15px; }
    @media screen and (min-width: 800px) {
      .p-reception__receptionCorpLogoWrapper {
        margin-right: 30px; } }
  .p-reception__receptionCorpLogo {
    width: 80px;
    height: 80px; }
    @media screen and (min-width: 800px) {
      .p-reception__receptionCorpLogo {
        height: 150px;
        width: 150px; } }
  .p-reception__items {
    display: flex;
    flex-direction: row;
    width: 100%; }
  .p-reception__itemsRow1st {
    text-align: left;
    max-width: 280px;
    width: 100%; }
  .p-reception__itemsRow2nd {
    text-align: left;
    width: 100%; }
  .p-reception__item {
    display: flex;
    flex-flow: column; }
  .p-reception__itemTitle {
    font-size: 1rem; }
    @media screen and (min-width: 800px) {
      .p-reception__itemTitle {
        font-size: 1.2rem; } }
  .p-reception__itemDetail {
    font-size: 1.2rem;
    line-height: 1.45em;
    margin-bottom: 10px; }
    @media screen and (min-width: 800px) {
      .p-reception__itemDetail {
        font-size: 1.6rem;
        margin-bottom: 15px; } }
    .p-reception__itemDetail:last-child {
      margin-bottom: 0; }
  .p-reception__receptionMethodList {
    position: absolute;
    right: 20px;
    bottom: 30px;
    display: flex;
    flex-flow: row; }
  .p-reception__receptionMethodListItem {
    margin-right: 10px; }
    .p-reception__receptionMethodListItem:last-child {
      margin-right: 0; }
  .p-reception__receptionMethod {
    height: 35px;
    width: 35px; }
    @media screen and (min-width: 800px) {
      .p-reception__receptionMethod {
        height: 50px;
        width: 50px; } }
  .p-reception__receptionMethodIcon {
    display: block;
    font-size: 1.8rem;
    margin-top: 9px; }
    @media screen and (min-width: 800px) {
      .p-reception__receptionMethodIcon {
        font-size: 2.5rem;
        margin-top: 14px; } }
  .p-reception__receptionMethodText {
    display: block;
    font-size: .9rem;
    margin-top: 10px; }
    @media screen and (min-width: 800px) {
      .p-reception__receptionMethodText {
        font-size: 1rem;
        margin-top: 15px; } }

/*
  受付内容詳細のデザイン
*/
.p-receptionDetail {
  position: fixed;
  display: block;
  background: linear-gradient(90deg, #ebedfa, #e9ebf8);
  padding: 20px;
  z-index: 200;
  top: 0;
  right: -120%;
  width: 90%;
  height: 100%;
  transition: all .2s;
  overflow-y: scroll;
  /*&__receptionMethodList {
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-bottom: $interval-40;
  }*/ }
  .p-receptionDetail::-webkit-scrollbar {
    width: 8px;
    height: 8px; }
  .p-receptionDetail::-webkit-scrollbar-track {
    background: transparent; }
  .p-receptionDetail::-webkit-scrollbar-thumb {
    background: rgba(105, 105, 105, 0.9);
    border-radius: 5px; }
  @media screen and (min-width: 800px) {
    .p-receptionDetail {
      width: 450px; } }
  .p-receptionDetail.is-open {
    right: 0; }
  .p-receptionDetail__inner {
    position: relative; }
  .p-receptionDetail__closeButton {
    font-size: 2.6rem;
    line-height: 1em;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 210; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__closeButton {
        font-size: 3.5rem; } }
  .p-receptionDetail__receptionCorpLogoWrapper {
    position: relative;
    text-align: center;
    margin-bottom: 5px; }
  .p-receptionDetail__receptionCorpLogo {
    height: 80px;
    width: 80px; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__receptionCorpLogo {
        height: 130px;
        width: 130px; } }
  .p-receptionDetail__receptionMethodDescription {
    position: relative;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 5px; }
  .p-receptionDetail__receptionMethodList {
    display: flex;
    flex-flow: row; }
  .p-receptionDetail__receptionMethodListItem {
    margin-right: 10px; }
    .p-receptionDetail__receptionMethodListItem:last-child {
      margin-right: 0; }
  .p-receptionDetail__receptionMethod {
    height: 40px;
    width: 40px;
    margin-top: 5px;
    cursor: pointer; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__receptionMethod {
        height: 50px;
        width: 50px; } }
  .p-receptionDetail__receptionMethodIcon {
    display: block !important;
    font-size: 1.8rem;
    margin: 10px auto 0;
    height: 25px;
    width: 25px; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__receptionMethodIcon {
        font-size: 2.5rem;
        margin-top: 12px auto 0; } }
  .p-receptionDetail__receptionMethodText {
    display: block;
    font-size: .9rem;
    margin-top: 10px; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__receptionMethodText {
        font-size: 1rem;
        margin-top: 20px; } }
  .p-receptionDetail__actionButtons {
    display: flex;
    justify-content: center;
    margin-bottom: 30px; }
  .p-receptionDetail__actionButton {
    font-size: 1.3rem;
    padding: .6em;
    width: 50%;
    margin-right: 10px; }
    .p-receptionDetail__actionButton:last-child {
      margin-right: 0; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__actionButton {
        font-size: 1.8rem; } }
  .p-receptionDetail__qrcodeWrapper {
    display: none; }
    .p-receptionDetail__qrcodeWrapper.is-open {
      display: block;
      width: 300px;
      height: 300px;
      position: fixed;
      inset: 0;
      z-index: 400;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .p-receptionDetail__qrcodeWrapper::after {
      content: '\f00d';
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      text-align: center;
      vertical-align: middle;
      position: absolute;
      top: -10px;
      left: -10px;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      background: #fff;
      color: #000;
      cursor: pointer;
      z-index: 450; }
  .p-receptionDetail__qrcode {
    width: 100%;
    height: auto; }
  .p-receptionDetail__item {
    display: flex;
    flex-flow: column;
    margin: 0 15px 30px; }
  .p-receptionDetail__itemTitle {
    font-size: 1rem; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__itemTitle {
        font-size: 1.2rem; } }
  .p-receptionDetail__itemDetail {
    font-size: 1.2rem;
    line-height: 1.45em;
    margin-bottom: 10px; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__itemDetail {
        font-size: 1.6rem;
        margin-bottom: 15px; } }
    .p-receptionDetail__itemDetail:last-child {
      margin-bottom: 0; }
  .p-receptionDetail__cancelButtonWrapper {
    width: 100%;
    text-align: center; }
  .p-receptionDetail__cancelButton {
    font-size: 1.6rem;
    max-width: 250px;
    width: 100%; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__cancelButton {
        font-size: 2rem;
        max-width: 280px; } }
  .p-receptionDetail__useModalWrapper {
    max-width: 1200px;
    width: 100%;
    position: fixed;
    display: none;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px; }
    @media screen and (min-width: 800px) {
      .p-receptionDetail__useModalWrapper {
        padding: 0; } }
    .p-receptionDetail__useModalWrapper.is-open {
      display: block;
      z-index: 1000;
      animation: animeFadeInBottomToTopHidden .6s ease 0s 1 normal;
      animation-fill-mode: forwards; }
    .p-receptionDetail__useModalWrapper::after {
      content: '\f00d';
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      text-align: center;
      vertical-align: middle;
      position: absolute;
      top: -10px;
      left: 10px;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      background: #fff;
      color: #000;
      cursor: pointer;
      z-index: 450; }
      @media screen and (min-width: 800px) {
        .p-receptionDetail__useModalWrapper::after {
          left: -10px; } }

/*
  登録済メールアドレスのデザイン
*/
.p-registeredEMail {
  width: 100%;
  padding: .45em 0 .45em 1em;
  display: flex;
  box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
  border-radius: 7px; }
  .p-registeredEMail__email {
    position: relative;
    font-size: 1.4rem;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .p-registeredEMail__actionButton {
    margin-left: auto;
    font-size: 1.2rem;
    color: #c93141;
    border-left: 1px solid #ccc;
    text-align: center;
    max-width: 4.5em;
    width: 100%; }

/*
  訪問予定・履歴のデザイン
*/
.p-schedule {
  margin-bottom: 50px; }
  .p-schedule:last-child {
    margin-bottom: 0; }
  .p-schedule__title {
    margin-bottom: 10px; }
  .p-schedule__receptionList {
    display: flex;
    flex-flow: column;
    margin-bottom: 50px; }
    .p-schedule__receptionList:last-of-type {
      margin-bottom: 0; }
  .p-schedule__receptionListItem {
    margin-bottom: 30px; }
    .p-schedule__receptionListItem:last-child {
      margin-bottom: 0; }

/*
  セレクトボックスのデザイン
*/
.p-selectbox {
  display: inline-block;
  position: relative; }
  .p-selectbox__icon {
    position: relative;
    right: -.2em;
    color: #444; }

/*
  セレクトボックスメニューのデザイン
*/
.p-selectboxMenu {
  position: relative;
  color: #444;
  background: linear-gradient(90deg, #ebedfa, #e9ebf8);
  border-radius: 7px;
  box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
  font-size: 1.6rem;
  text-align: center;
  transition: 0.3s;
  text-shadow: 1px 1px 0 #fffff3;
  cursor: pointer; 
  z-index:1;
}
  .p-selectboxMenu::after {
    font-family: "Font Awesome 5 Free";
    color: #444;
    content: "\f0d7";
    font-weight: 900;
    position: absolute;
    text-shadow: 1px 1px 0 #fffff3;
    top: .4em;
    right: 1em; }
  .p-selectboxMenu:hover, .p-selectboxMenu:active {
    box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
  .p-selectboxMenu__item {
    display: none;
    padding: .45em 2.5em .45em 2.75em;
    text-align: left;
    position: relative;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
    @media screen and (min-width: 800px) {
      .p-selectboxMenu__item {
        max-width: 300px;
        min-width: 170px; } }
    .p-selectboxMenu__item:first-child {
      display: block; }
    .p-selectboxMenu__item:nth-child(1)::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: '\f007';
      font-size: 1.22em;
      position: absolute;
      top: .2em;
      left: .8em; }
    .p-selectboxMenu__item:nth-child(2)::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: '\f2f5';
      font-size: 1.22em;
      position: absolute;
      top: .2em;
      left: .8em; }
  .p-selectboxMenu.is-open {
    box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
    .p-selectboxMenu.is-open::after {
      top: 11px;
      content: "\f0de";
      animation-iteration-count: 1; }
  .p-selectboxMenu.is-open .p-selectboxMenu__item {
    display: block;
    padding: .45em 2.5em .45em 2.75em;
    text-align: left;
    border-bottom: 1px solid #ccc;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
    @media screen and (min-width: 800px) {
      .p-selectboxMenu.is-open .p-selectboxMenu__item {
        max-width: 300px;
        min-width: 170px; } }
    .p-selectboxMenu.is-open .p-selectboxMenu__item:last-child {
      border-bottom: none; }
  .p-selectboxMenu__link {
    display: block;
    padding-bottom: 0;
    border-bottom: none; }

/*
  ナビゲーション(マイページ)のデザイン
*/
.p-sideNav {
  display: none; }
  @media screen and (min-width: 800px) {
    .p-sideNav {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      background: linear-gradient(90deg, #2d32e6, #4696fa);
      max-width: 300px;
      width: 100%;
      height: 100%;
      padding: 10px 0 10px 20px; }
      .p-sideNav__siteLogo {
        margin: 10px auto 40px; } }

/*
  ナビゲーションリスト(マイページ)のデザイン
*/
.p-sideNavList {
  display: none; }
  @media screen and (min-width: 800px) {
    .p-sideNavList {
      display: flex;
      flex-flow: row;
      flex-flow: column; } }
  .p-sideNavList__item {
    margin: 0 0 15px 15px; }
  .p-sideNavList__button, .p-sideNavList__button--active {
    color: #ebedfa;
    width: 100%;
    text-align: left;
    font-size: 1.8rem;
    letter-spacing: .1em;
    display: block;
    padding: .75em 0 .75em 1.5em; }
    .p-sideNavList__button--active {
      color: #283cc8;
      background: linear-gradient(90deg, #ebedfa, #e9ebf8);
      border-radius: 30px 0 0 30px;
      position: relative; }
      .p-sideNavList__button--active::before {
        position: absolute;
        content: '';
        top: -20px;
        right: 0;
        width: 20px;
        height: 20px;
        background: url(../img/bg_nav_arc_t.svg) no-repeat 0 0;
        background-size: 100% auto; }
      .p-sideNavList__button--active::after {
        position: absolute;
        content: '';
        bottom: -20px;
        right: 0;
        width: 20px;
        height: 20px;
        transform: rotateX(180deg);
        background: url(../img/bg_nav_arc_t.svg) no-repeat 0 0;
        background-size: 100% auto; }
  .p-sideNavList__buttonIcon {
    position: relative;
    font-size: 1.4em;
    width: 1.25em;
    margin-right: .2em;
    top: 2px;
    text-align: center; }

/*
  サイトロゴのデザイン
*/
.p-siteLogo1 {
  display: block;
  max-width: 140px;
  width: 100%;
  /*
  display: inline-block;
  position: relative;
  font-family: nobel, sans-serif;
  font-style: italic;
  font-size: 2.8rem;
  font-weight: 800;
  color: $color-main;
  transition: .3s;
  &:hover, &:active {
    opacity: .6;
  }
  @include mediaquery(tab) {
    font-size: 2.4rem;
  }
  @include mediaquery(pc) {
    font-size: 3.6rem;
  }
  &--inversion {
    @extend .p-siteLogo;
    color: $color-base;
  }
  */ }
  @media screen and (min-width: 800px) {
    .p-siteLogo1 {
      max-width: 120px; } }

.p-siteLogo2 {
  display: inline-block;
  max-width: 130px;
  width: 100%; }
  @media screen and (min-width: 370px) {
    .p-siteLogo2 {
      max-width: 200px; } }
  @media screen and (min-width: 800px) {
    .p-siteLogo2 {
      max-width: 200px; } }
  @media screen and (min-width: 1025px) {
    .p-siteLogo2 {
      max-width: 330px; } }

/*
  ステップのデザイン
*/
.p-step, .p-step--active {
  width: 90%;
  border-radius: 7px;
  background: linear-gradient(90deg, #ebedfa, #e9ebf8);
  box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
  display: block; }
  @media screen and (min-width: 800px) {
    .p-step, .p-step--active {
      height: 130px;
      width: 130px;
      border-radius: 50%; } }
  .p-step__num, .p-step__num--active {
    margin-top: 7px;
    text-align: center;
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
    color: #4696fa; }
    @media screen and (min-width: 800px) {
      .p-step__num, .p-step__num--active {
        margin-top: 20px; } }
    .p-step__num--active {
      color: #2d32e6; }
  .p-step__description {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 7px;
    padding: 0 1em;
    line-height: 1.5em; }
    @media screen and (min-width: 800px) {
      .p-step__description {
        margin: 6px 0 0 0; } }
  .p-step--active {
    box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3; }

/*
  ステップリストのデザイン
*/
.p-stepList {
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-bottom: 50px; }
  @media screen and (min-width: 800px) {
    .p-stepList {
      flex-flow: row; } }
  .p-stepList__item {
    display: flex;
    flex-flow: column;
    margin-bottom: 20px;
    position: relative;
    align-items: center; }
    @media screen and (min-width: 800px) {
      .p-stepList__item {
        flex-flow: row;
        margin: 0 70px 0 0;
        align-items: normal; } }
    .p-stepList__item:last-child {
      margin-bottom: 0; }
      @media screen and (min-width: 800px) {
        .p-stepList__item:last-child {
          margin-right: 0; } }
      .p-stepList__item:last-child::after {
        display: none !important; }
    .p-stepList__item::after {
      display: inline-block;
      content: "";
      width: 0;
      height: 0;
      position: relative;
      border-top: 8px solid #b0b2c1;
      border-right: 13px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 13px solid transparent;
      top: 13px; }
      @media screen and (min-width: 800px) {
        .p-stepList__item::after {
          border-top: 18px solid transparent;
          border-right: 18px solid transparent;
          border-bottom: 18px solid transparent;
          border-left: 18px solid #b0b2c1;
          top: 46px;
          left: 45px; } }

/*
  スタイルガイドのデザイン
*/
.p-styleGuide__title {
  background: #666;
  color: #fff;
  font-size: 4.6rem;
  font-weight: 900;
  letter-spacing: .15em;
  padding: .75em .5em;
  margin-bottom: 50px; }

.p-styleGuide__contents {
  margin: 0 20px 50px; }

.p-styleGuide__contentTitle {
  border-bottom: 2px solid #aaa;
  padding-bottom: .5em;
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: .075em;
  margin-bottom: 40px; }

.p-styleGuide__contentRule {
  margin-bottom: 30px; }

.p-styleGuide__contentRuleNewLine {
  margin-bottom: 15px; }

.p-styleGuide__contentBlockquote {
  display: inline-block;
  padding: 1em;
  background: #d9d9d9;
  margin-bottom: 15px; }

.p-styleGuide__contentBlockquoteTitle {
  font-weight: 900;
  font-size: 1.2em;
  margin-bottom: 10px; }

.p-styleGuide__contentBlockquoteLink {
  color: #039;
  text-decoration: underline; }

.p-styleGuide__contentDisplay {
  margin-bottom: 30px; }

.p-styleGuide__contentSource {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 10px 25px;
  margin-bottom: 60px; }

.p-styleGuide__contentButton {
  max-width: 250px;
  width: 100%;
  margin-right: 20px; }
  .p-styleGuide__contentButton:last-child {
    margin-right: 0; }

.p-styleGuide__contentMediumButton {
  max-width: 140px;
  width: 100%;
  margin-right: 20px; }
  .p-styleGuide__contentMediumButton:last-child {
    margin-right: 0; }

.p-styleGuide__contentSmallButton {
  max-width: 100px;
  width: 100%;
  margin-right: 20px; }
  .p-styleGuide__contentSmallButton:last-child {
    margin-right: 0; }

.p-styleGuide__contentInputBox {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  width: 100%;
  position: relative; }

.p-styleGuide__contentInputBoxTitle {
  width: 20%;
  text-align: right;
  position: relative;
  top: 6px;
  right: 20px; }

.p-styleGuide__contentInputBoxDetail {
  width: 80%;
  margin-bottom: 20px; }

.p-styleGuide__contentTextboxName {
  max-width: 200px;
  width: 100%; }

.p-styleGuide__contentTextboxEmail {
  max-width: 500px;
  width: 100%; }

.p-styleGuide__contentTextboxPassword {
  max-width: 300px;
  width: 100%; }

.p-styleGuide__contentSearchBox {
  display: flex; }

.p-styleGuide__contentSelectbox {
  margin-right: 20px; }
  .p-styleGuide__contentSelectbox:last-child {
    margin-right: 0; }

.p-styleGuide__contentTermAndPrivacyPolicy {
  margin-right: .5em; }

.p-styleGuide__contentReceptionCorpLogoBox {
  display: flex; }

.p-styleGuide__contentReceptionCorpLogoCheckbox {
  display: none; }

.p-styleGuide__contentReceptionCorpLogoCheckbox:checked + .p-styleGuide__contentReceptionCorpLogoLabel .c-receptionCorpLogo--convex {
  box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3; }

.p-styleGuide__contentReceptionCorpLogoLabel {
  margin-right: 30px; }

/*
  仮登録メールアドレスのデザイン
*/
.p-temporaryRegistrationEmail {
  width: 100%;
  height: 4em;
  padding: .45em 0 .45em 1em;
  display: flex;
  box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
  border-radius: 7px;
  position: relative; }
  .p-temporaryRegistrationEmail__email {
    position: relative;
    font-size: 1.4rem;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .p-temporaryRegistrationEmail__dateOfExpiry {
    position: absolute;
    font-size: 1.2rem;
    color: #888;
    bottom: 8px; }
  .p-temporaryRegistrationEmail__actionButton {
    position: relative;
    margin-left: auto;
    font-size: 1.2rem;
    color: #2d32e6;
    border-left: 1px solid #ccc;
    text-align: center;
    max-width: 4.5em;
    width: 100%; }

/*
  規約のデザイン。
*/
.p-terms {
  width: 100%; }
  @media screen and (min-width: 800px) {
    .p-terms {
      max-width: 900px;
      margin: auto; } }
  .p-terms__heading {
    text-align: center;
    margin-bottom: 10px; }
    @media screen and (min-width: 800px) {
      .p-terms__heading {
        margin-bottom: 30px; } }

/*
  規約のボックス型デザイン。
*/
.p-termsBox {
  height: 200px;
  overflow-y: scroll;
  border-radius: 10px;
  box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 2px 2px 5px #b0b2c1, inset -5px -5px 10px #fffff3;
  padding: .75em 1.5em;
  text-align: left; }
  .p-termsBox::-webkit-scrollbar {
    width: 8px;
    height: 8px; }
  .p-termsBox::-webkit-scrollbar-track {
    background: transparent; }
  .p-termsBox::-webkit-scrollbar-thumb {
    background: rgba(105, 105, 105, 0.9);
    border-radius: 5px; }

/*
  テキストボックスのデザイン一覧
*/
.p-textboxs--email {
  width: 100%; }
  @media screen and (min-width: 800px) {
    .p-textboxs--email {
      max-width: 400px; } }

.p-textboxs--password {
  width: 100%; }
  @media screen and (min-width: 800px) {
    .p-textboxs--password {
      max-width: 200px; } }

.p-textboxs--name {
  width: 100%; }
  @media screen and (min-width: 800px) {
    .p-textboxs--name {
      max-width: 250px; } }

/*
  使い方のデザイン
*/
.p-use {
  position: relative;
  width: 100%;
  padding: 25px;
  box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s; }
  .p-use:hover {
    box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
    .p-use:hover .p-use__seeHowToUse::before {
      opacity: 0; }
  .p-use:active {
    box-shadow: -5px -5px 20px transparent, 5px 5px 20px transparent, inset 1px 1px 2px #b0b2c1, inset -1px -1px 2px #fffff3; }
    .p-use:active .p-use__seeHowToUse::before {
      opacity: 0; }
  .p-use__name {
    font-size: 1.8rem;
    margin-bottom: 10px; }
  .p-use__imgWrapper {
    max-width: 160px;
    width: 100%;
    height: 140px;
    margin: 0 auto 30px; }
  .p-use__seeHowToUse {
    position: relative;
    z-index: 10;
    overflow: hidden;
    transition: 0.3s;
    background: transparent;
    color: #fff;
    padding: 5px;
    border-radius: 30px;
    font-size: 1.5rem; }
    .p-use__seeHowToUse::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
      background: #676b84;
      transition: 0.3s; }
    .p-use__seeHowToUse::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -2;
      background: linear-gradient(90deg, #2d32e6, #4696fa); }

/*
  使い方モーダルのデザイン
*/
.p-useModal {
  max-width: 1200px;
  width: 100%;
  padding: 20px 25px;
  height: 75vh;
  background: #fff;
  border-radius: 4px;
  overflow-y: scroll; }
  .p-useModal::-webkit-scrollbar {
    width: 8px;
    height: 8px; }
  .p-useModal::-webkit-scrollbar-track {
    background: transparent; }
  .p-useModal::-webkit-scrollbar-thumb {
    background: rgba(105, 105, 105, 0.9);
    border-radius: 5px; }
  @media screen and (min-width: 800px) {
    .p-useModal {
      padding: 50px 75px;
      height: initial; } }
  .p-useModal__list {
    display: flex;
    flex-flow: column;
    justify-content: center; }
    @media screen and (min-width: 800px) {
      .p-useModal__list {
        flex-flow: row; } }
  .p-useModal__listItem {
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1.5px solid #0066ff; }
    .p-useModal__listItem:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0; }
    @media screen and (min-width: 800px) {
      .p-useModal__listItem {
        max-width: 33%;
        margin-right: 50px;
        margin-bottom: 0;
        padding-right: 50px;
        border-right: 1.5px solid #0066ff;
        border-bottom: none; }
        .p-useModal__listItem:last-child {
          border-right: none;
          margin-right: 0;
          padding-right: 0; } }
  .p-useModal.is-open .p-useModal__step, .p-useModal.is-open .p-useModal__step--1, .p-useModal.is-open .p-useModal__step--2, .p-useModal.is-open .p-useModal__step--3, .p-useModal.is-open .p-useModal__step--4 {
    opacity: 0; }
    .p-useModal.is-open .p-useModal__step--1 {
      animation: animeFadeInBottomToTop .8s ease .3s 1 normal;
      animation-fill-mode: forwards; }
    .p-useModal.is-open .p-useModal__step--2 {
      animation: animeFadeInBottomToTop .8s ease .6s 1 normal;
      animation-fill-mode: forwards; }
    .p-useModal.is-open .p-useModal__step--3 {
      animation: animeFadeInBottomToTop .8s ease .9s 1 normal;
      animation-fill-mode: forwards; }
    .p-useModal.is-open .p-useModal__step--4 {
      animation: animeFadeInBottomToTop .8s ease 1.2s 1 normal;
      animation-fill-mode: forwards; }
  .p-useModal__stepNum {
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: 900;
    color: #0066ff;
    text-align: center; }
  .p-useModal__stepImgWrapper {
    max-width: 60px;
    width: 100%;
    max-height: 100px;
    height: 100%;
    margin: 0 auto 20px; }
    @media screen and (min-width: 800px) {
      .p-useModal__stepImgWrapper {
        max-width: 200px;
        max-height: 200px; } }
  .p-useModal__stepText {
    font-size: 1.4rem; }
    @media screen and (min-width: 800px) {
      .p-useModal__stepText {
        font-size: 1.6rem; } }

/*
  セレクトボックスメニューのデザイン
*/
.p-userMenu {
  position: relative;
  color: #444;
  background: linear-gradient(90deg, #ebedfa, #e9ebf8);
  border-radius: 7px;
  box-shadow: -5px -5px 20px #fffff3, 5px 5px 20px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent;
  font-size: 1.6rem;
  text-align: center;
  transition: 0.3s;
  text-shadow: 1px 1px 0 #fffff3;
  padding: .45em 1em .45em 2.75em;
  cursor: pointer; }
  .p-userMenu:hover, .p-userMenu:active {
    box-shadow: -2px -2px 5px #fffff3, 2px 2px 5px #b0b2c1, inset 2px 2px 5px transparent, inset -5px -5px 10px transparent; }
  .p-userMenu::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f007';
    font-size: 1.22em;
    position: absolute;
    top: .2em;
    left: .8em; }

/*
  デバイス別の表示・非表示
*/
@media screen and (min-width: 800px) {
  .u-device--sp {
    display: none; } }

.u-device--pc {
  display: none; }
  @media screen and (min-width: 800px) {
    .u-device--pc {
      display: initial; } }

.u-marginTop50 {
  margin-top: 50px; }

.u-marginBottom30 {
  margin-bottom: 30px; }

.u-marginBottom50 {
  margin-bottom: 50px; }

.u-marginBottom80 {
  margin-bottom: 80px; }

.u-marginBottom100 {
  margin-bottom: 100px; }

.u-paddingBottom80 {
  padding-bottom: 80px; }