@charset "UTF-8";

/* =========================================================
   FAYLIO MY ACCOUNT / MEMBER LOGIN
   UNIFIED PREMIUM DESIGN
========================================================= */

:root {
  --fy-black: #111111;
  --fy-dark: #2b2b2b;
  --fy-text: #3f3f3f;
  --fy-muted: #707070;

  --fy-white: #ffffff;
  --fy-page-bg: #FFFFFF;
  --fy-soft-bg: #fafaf8;

  --fy-line: #dededb;
  --fy-line-light: #ececea;
  --fy-line-dark: #aaa9a5;

  --fy-error: #8b3434;

  --fy-font-sans:
    Meiryo,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium",
    "Yu Gothic",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  --fy-font-serif:
    Georgia,
    "Times New Roman",
    serif;
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--fy-page-bg);
}

body.p-page__wrap {
  min-width: 320px;
  margin: 0;
  padding: 0;

  background: var(--fy-page-bg);
  color: var(--fy-black);

  font-family: var(--fy-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.012em;

  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

body.p-page__wrap a {
  color: inherit;
  text-decoration: none;
}

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

body.p-page__wrap button,
body.p-page__wrap input,
body.p-page__wrap textarea,
body.p-page__wrap select,
body.p-page__wrap option,
body.p-page__wrap label {
  font-family: var(--fy-font-sans);
}

/* =========================================================
   COLORME COLOR VARIABLES
========================================================= */

body.p-page__wrap .c-button {
  background: #F5F5F3;
}

body.p-page__wrap .c-button,
body.p-page__wrap .c-button:link,
body.p-page__wrap .c-button:hover,
body.p-page__wrap .c-button:active,
body.p-page__wrap .c-button:visited {
  color: #111111;
}

body.p-page__wrap .c-button--primary {
  background: #EEEEEC;
}

body.p-page__wrap .c-button--primary,
body.p-page__wrap .c-button--primary:link,
body.p-page__wrap .c-button--primary:hover,
body.p-page__wrap .c-button--primary:active,
body.p-page__wrap .c-button--primary:visited {
  color: #111111;
}

body.p-page__wrap .c-button--danger {
  background: <{$button3_bgcolor}>;
}

body.p-page__wrap .c-button--danger,
body.p-page__wrap .c-button--danger:link,
body.p-page__wrap .c-button--danger:hover,
body.p-page__wrap .c-button--danger:active,
body.p-page__wrap .c-button--danger:visited {
  color: <{$button3_font_color}>;
}

/* =========================================================
   PAGE CONTAINER
========================================================= */

body.p-page__wrap .p-page__container,
body.p-page__wrap .base01,
body.p-page__wrap .base02 {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.p-page__wrap .base01 {
  min-height: 100vh;
  background: var(--fy-page-bg);
}

body.p-page__wrap .base02 {
  background: var(--fy-page-bg);
}

/* =========================================================
   BRAND HEADER
========================================================= */

body.p-page__wrap .p-shop__header {
  display: flex;
  width: 100%;
  min-height: 96px;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 26px 24px;

  border-bottom: 1px solid var(--fy-line-light);
  background: var(--fy-white);
}

body.p-page__wrap .p-shop__header a {
  display: inline-block;
  color: var(--fy-black);
}

body.p-page__wrap .p-shop__title {
  display: block;

  color: var(--fy-black);
  font-family: var(--fy-font-serif);

  font-size: 23px;
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.43em;
  text-indent: 0.43em;
}

/* =========================================================
   MAIN AREA
========================================================= */

body.p-page__wrap .p-page__body {
  width: 100%;
  min-height: 68vh;

  margin: 0;
  padding: 74px 24px 124px;

  background: var(--fy-page-bg);
}

body.p-page__wrap .p-page__body-inner {
  width: min(100%, 720px);

  margin: 0 auto;
  padding: 52px 64px 68px;

  border: 1px solid #e5e5e2;
  background: var(--fy-white);
}

/* =========================================================
   BACK TO SHOP
========================================================= */

body.p-page__wrap .c-button__group--sub {
  display: flex;
  width: 100%;

  justify-content: flex-end;

  margin: 0 0 54px;
  padding: 0;
}

body.p-page__wrap .c-button__group--sub .c-button {
  position: relative;

  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: auto;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0 0 5px;

  border: 0;
  border-bottom: 1px solid var(--fy-black);
  border-radius: 0;

  background: transparent;
  color: var(--fy-black);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;

  box-shadow: none;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

/* CSSで左向き矢印を描画 */

body.p-page__wrap .c-button__group--sub .c-button::before {
  display: block;

  width: 7px;
  height: 7px;

  margin-right: 10px;

  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;

  content: "";
  transform: rotate(45deg);
}

body.p-page__wrap .c-button__group--sub .c-button:hover {
  border-color: var(--fy-muted);

  background: transparent;
  color: var(--fy-muted);
  opacity: 0.8;
}

/* =========================================================
   PAGE TITLE
========================================================= */

body.p-page__wrap .p-page__title {
  margin: 0 0 48px;
  padding: 0;

  color: var(--fy-black);
  font-family: var(--fy-font-sans);

  font-size: 27px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.055em;

  text-align: center;
}

body.p-page__wrap .p-page__title::before {
  display: block;

  margin: 0 0 12px;

  color: #5f5f5f;
  font-family: var(--fy-font-serif);

  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.24em;

  content: "MY ACCOUNT";
}

body.p-page__wrap .p-page__title::after {
  display: block;

  width: 30px;
  height: 1px;

  margin: 22px auto 0;

  background: var(--fy-black);

  content: "";
}

/* =========================================================
   INFORMATION / MESSAGE
========================================================= */

body.p-page__wrap .c-alert,
body.p-page__wrap .c-message,
body.p-page__wrap .p-login__description,
body.p-page__wrap .p-member__description,
body.p-page__wrap .p-myaccount__description,
body.p-page__wrap .p-account__description {
  width: 100%;

  margin: 0 0 48px;
  padding: 0 0 40px;

  border: 0;
  border-bottom: 1px solid var(--fy-line);
  border-radius: 0;

  background: transparent;
  color: var(--fy-text);

  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.012em;
}

body.p-page__wrap .c-alert p,
body.p-page__wrap .c-message p,
body.p-page__wrap .p-login__description p,
body.p-page__wrap .p-member__description p,
body.p-page__wrap .p-myaccount__description p {
  margin: 0;
  padding: 0;

  color: var(--fy-text);
}

body.p-page__wrap .c-alert p + p,
body.p-page__wrap .c-message p + p,
body.p-page__wrap .p-login__description p + p,
body.p-page__wrap .p-member__description p + p {
  margin-top: 16px;
}

body.p-page__wrap .c-alert a,
body.p-page__wrap .c-message a {
  padding-bottom: 2px;

  border-bottom: 1px solid var(--fy-black);
  color: var(--fy-black);
}

/* =========================================================
   LOGIN / ACCOUNT SECTIONS
========================================================= */

body.p-page__wrap .p-login,
body.p-page__wrap .p-member,
body.p-page__wrap .p-myaccount,
body.p-page__wrap .p-account,
body.p-page__wrap .p-customer {
  width: 100%;
  margin: 0;
  padding: 0;
}

body.p-page__wrap .c-box,
body.p-page__wrap .c-panel,
body.p-page__wrap .p-page__section,
body.p-page__wrap .p-login__box,
body.p-page__wrap .p-member__box,
body.p-page__wrap .p-myaccount__box,
body.p-page__wrap .p-account__box {
  width: 100%;

  margin: 0 0 54px;
  padding: 0 0 50px;

  border: 0;
  border-bottom: 1px solid var(--fy-line);
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

body.p-page__wrap .c-box:last-child,
body.p-page__wrap .c-panel:last-child,
body.p-page__wrap .p-page__section:last-child,
body.p-page__wrap .p-login__box:last-child,
body.p-page__wrap .p-member__box:last-child,
body.p-page__wrap .p-myaccount__box:last-child,
body.p-page__wrap .p-account__box:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* 複数フォームが続く場合 */

body.p-page__wrap form + form {
  margin-top: 56px;
  padding-top: 54px;

  border-top: 1px solid var(--fy-line);
}

/* =========================================================
   SECTION TITLE
========================================================= */

body.p-page__wrap .c-ttl-main,
body.p-page__wrap .c-ttl-second,
body.p-page__wrap .c-form__heading,
body.p-page__wrap .p-login__title,
body.p-page__wrap .p-member__title,
body.p-page__wrap .p-myaccount__title,
body.p-page__wrap .p-account__title,
body.p-page__wrap .p-customer__title {
  margin: 0 0 27px;
  padding: 0;

  color: var(--fy-black);
  font-family: var(--fy-font-sans);

  font-size: 18px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.015em;
}

/* =========================================================
   FORM
========================================================= */

body.p-page__wrap form {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

body.p-page__wrap .c-form__table {
  display: block;

  width: 100%;
  margin: 0;
  padding: 0;

  border: 0;
  border-collapse: collapse;
}

body.p-page__wrap .c-form__table tbody {
  display: block;
  width: 100%;
}

body.p-page__wrap .c-form__table tr {
  display: block;

  width: 100%;
  margin: 0 0 34px;
  padding: 0;

  border: 0;
  background: transparent;
}

body.p-page__wrap .c-form__table tr:last-child {
  margin-bottom: 0;
}

body.p-page__wrap .c-form__table th,
body.p-page__wrap .c-form__table td {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  text-align: left;
  vertical-align: top;
}

body.p-page__wrap .c-form__row,
body.p-page__wrap .c-form__item,
body.p-page__wrap .p-login__form-item,
body.p-page__wrap .p-member__form-item,
body.p-page__wrap .p-myaccount__form-item,
body.p-page__wrap .p-account__form-item {
  display: block;

  width: 100%;
  margin: 0 0 34px;
  padding: 0;
}

/* =========================================================
   LABEL
========================================================= */

body.p-page__wrap .c-form__title,
body.p-page__wrap .c-form__label,
body.p-page__wrap .c-form__row > label,
body.p-page__wrap .c-form__item > label,
body.p-page__wrap .p-login__form-item > label,
body.p-page__wrap .p-member__form-item > label,
body.p-page__wrap .p-myaccount__form-item > label,
body.p-page__wrap .p-account__form-item > label {
  display: block;

  margin: 0 0 11px;
  padding: 0;

  color: var(--fy-black);
  font-family: var(--fy-font-sans);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.012em;
}

body.p-page__wrap .c-form__title label {
  display: inline;

  margin: 0;
  padding: 0;

  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

body.p-page__wrap .c-form__title--must,
body.p-page__wrap .c-required,
body.p-page__wrap .required,
body.p-page__wrap .must {
  display: inline-block;

  margin-left: 8px;
  padding: 0;

  color: var(--fy-muted);

  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: nowrap;
}

/* =========================================================
   INPUTS
========================================================= */

body.p-page__wrap .c-input--text,
body.p-page__wrap input[type="text"],
body.p-page__wrap input[type="email"],
body.p-page__wrap input[type="password"],
body.p-page__wrap input[type="tel"],
body.p-page__wrap input[type="number"],
body.p-page__wrap input[type="search"],
body.p-page__wrap select,
body.p-page__wrap textarea {
  display: block;

  width: 100%;
  min-height: 57px;

  margin: 0;
  padding: 14px 16px;

  border: 1px solid #DEDEDB;
  border-radius: 0;
  outline: none;

  background: var(--fy-white);
  color: var(--fy-black);

  font-family: var(--fy-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;

  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

body.p-page__wrap .c-input--text:hover,
body.p-page__wrap input[type="text"]:hover,
body.p-page__wrap input[type="email"]:hover,
body.p-page__wrap input[type="password"]:hover,
body.p-page__wrap input[type="tel"]:hover,
body.p-page__wrap input[type="number"]:hover,
body.p-page__wrap input[type="search"]:hover,
body.p-page__wrap select:hover,
body.p-page__wrap textarea:hover {
  border-color: var(--fy-line-dark);
}

body.p-page__wrap .c-input--text:focus,
body.p-page__wrap input[type="text"]:focus,
body.p-page__wrap input[type="email"]:focus,
body.p-page__wrap input[type="password"]:focus,
body.p-page__wrap input[type="tel"]:focus,
body.p-page__wrap input[type="number"]:focus,
body.p-page__wrap input[type="search"]:focus,
body.p-page__wrap select:focus,
body.p-page__wrap textarea:focus {
  border-color: #111111;
  background: var(--fy-white);

  box-shadow:
    0 0 0 1px #111111;
}

body.p-page__wrap textarea {
  min-height: 190px;
  max-height: 420px;

  resize: vertical;
}

body.p-page__wrap input::placeholder,
body.p-page__wrap textarea::placeholder {
  color: #a4a4a0;
  opacity: 1;
}

/* =========================================================
   SELECT
========================================================= */

body.p-page__wrap select {
  padding-right: 44px;

  background-image:
    linear-gradient(45deg, transparent 50%, #707070 50%),
    linear-gradient(135deg, #707070 50%, transparent 50%);

  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;
}

/* =========================================================
   CHECKBOX / RADIO
========================================================= */

body.p-page__wrap input[type="checkbox"],
body.p-page__wrap input[type="radio"] {
  width: 16px;
  height: 16px;

  margin: 0 8px 0 0;

  vertical-align: -3px;
  accent-color: var(--fy-black);
}

body.p-page__wrap .c-checkbox,
body.p-page__wrap .c-radio,
body.p-page__wrap .c-form__check,
body.p-page__wrap .c-form__radio {
  color: var(--fy-text);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
}

body.p-page__wrap .c-checkbox label,
body.p-page__wrap .c-radio label,
body.p-page__wrap .c-form__check label,
body.p-page__wrap .c-form__radio label {
  display: inline-flex;

  align-items: center;

  margin: 0;
  padding: 0;

  color: var(--fy-text);
  font-size: 13px;
  font-weight: 400;
}

/* =========================================================
   HELP TEXT
========================================================= */

body.p-page__wrap .c-form__note,
body.p-page__wrap .c-form__help,
body.p-page__wrap .c-note,
body.p-page__wrap .p-login__note,
body.p-page__wrap .p-member__note {
  margin: 9px 0 0;

  color: var(--fy-muted);

  font-size: 11px;
  font-weight: 400;
  line-height: 1.8;
}

/* =========================================================
   BUTTON GROUP
========================================================= */

body.p-page__wrap .c-button__group:not(.c-button__group--sub),
body.p-page__wrap .c-buttons,
body.p-page__wrap .p-login__buttons,
body.p-page__wrap .p-member__buttons,
body.p-page__wrap .p-myaccount__buttons,
body.p-page__wrap .p-account__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;

  width: 100%;
  margin: 44px 0 0;
  padding: 0;
}

/* =========================================================
   BUTTON BASE
========================================================= */

body.p-page__wrap .c-button {
  display: inline-flex;

  width: auto;
  min-height: 58px;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 15px 30px;

  border: 1px solid var(--fy-line);
  border-radius: 0;

  font-family: var(--fy-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;

  text-align: center;
  cursor: pointer;

  box-shadow: none;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

body.p-page__wrap .c-button--primary {
  width: 100%;
  min-height: 62px;

  border-color: #EEEEEC;

  background: #EEEEEC;
  color: #111111;

  font-size: 12px;
  letter-spacing: 0.16em;
}

body.p-page__wrap .c-button--primary,
body.p-page__wrap .c-button--primary:link,
body.p-page__wrap .c-button--primary:visited {
  color: #111111;
}

body.p-page__wrap .c-button--primary:hover,
body.p-page__wrap .c-button--primary:active {
  border-color: var(--fy-black);

  background: var(--fy-white);
  color: var(--fy-black);
}

body.p-page__wrap .c-button--primary:active {
  transform: translateY(1px);
}

/* =========================================================
   REGISTER / SECONDARY BUTTON
========================================================= */

body.p-page__wrap .c-button--danger {
  width: 100%;
  min-height: 60px;

  border-color: <{$button3_bgcolor}>;

  background: <{$button3_bgcolor}>;
  color: <{$button3_font_color}>;
}

body.p-page__wrap .c-button--danger,
body.p-page__wrap .c-button--danger:link,
body.p-page__wrap .c-button--danger:visited {
  color: <{$button3_font_color}>;
}

body.p-page__wrap .c-button--danger:hover,
body.p-page__wrap .c-button--danger:active {
  border-color: var(--fy-black);

  background: var(--fy-white);
  color: var(--fy-black);
}

/* =========================================================
   NORMAL BUTTON
========================================================= */

body.p-page__wrap .c-button:not(.c-button--primary):not(.c-button--danger) {
  border-color: var(--fy-line);

  background: #F5F5F3;
  color: #111111;
}

body.p-page__wrap .c-button:not(.c-button--primary):not(.c-button--danger):hover {
  border-color: var(--fy-black);

  background: var(--fy-white);
  color: var(--fy-black);
}

/* =========================================================
   SUPPORT LINKS
========================================================= */

body.p-page__wrap .p-login__link,
body.p-page__wrap .p-member__link,
body.p-page__wrap .p-myaccount__link,
body.p-page__wrap .p-account__link,
body.p-page__wrap .c-form__link,
body.p-page__wrap .c-link-list,
body.p-page__wrap .c-text-link {
  margin: 22px 0 0;
  padding: 0;

  text-align: center;
}

body.p-page__wrap .p-login__link a,
body.p-page__wrap .p-member__link a,
body.p-page__wrap .p-myaccount__link a,
body.p-page__wrap .p-account__link a,
body.p-page__wrap .c-form__link a,
body.p-page__wrap .c-link-list a,
body.p-page__wrap a.c-text-link {
  display: inline-block;

  padding-bottom: 3px;

  border-bottom: 1px solid var(--fy-black);
  color: var(--fy-black);

  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.035em;

  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

body.p-page__wrap .p-login__link a:hover,
body.p-page__wrap .p-member__link a:hover,
body.p-page__wrap .p-myaccount__link a:hover,
body.p-page__wrap .p-account__link a:hover,
body.p-page__wrap .c-form__link a:hover,
body.p-page__wrap .c-link-list a:hover,
body.p-page__wrap a.c-text-link:hover {
  border-color: var(--fy-muted);

  color: var(--fy-muted);
  opacity: 0.8;
}

/* =========================================================
   ACCOUNT MENU
========================================================= */

body.p-page__wrap .p-myaccount__menu,
body.p-page__wrap .p-account__menu,
body.p-page__wrap .c-menu-list,
body.p-page__wrap .c-account-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;

  width: 100%;
  margin: 0;
  padding: 0;

  list-style: none;
}

body.p-page__wrap .p-myaccount__menu a,
body.p-page__wrap .p-account__menu a,
body.p-page__wrap .c-menu-list a,
body.p-page__wrap .c-account-menu a {
  display: flex;

  min-height: 58px;

  align-items: center;
  justify-content: space-between;

  padding: 15px 18px;

  border: 1px solid var(--fy-line);

  background: var(--fy-white);
  color: var(--fy-black);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

/* CSSで右向き矢印を描画 */

body.p-page__wrap .p-myaccount__menu a::after,
body.p-page__wrap .p-account__menu a::after,
body.p-page__wrap .c-menu-list a::after,
body.p-page__wrap .c-account-menu a::after {
  display: block;
  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  margin-left: 16px;

  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;

  content: "";
  transform: rotate(45deg);
}

body.p-page__wrap .p-myaccount__menu a:hover,
body.p-page__wrap .p-account__menu a:hover,
body.p-page__wrap .c-menu-list a:hover,
body.p-page__wrap .c-account-menu a:hover {
  border-color: var(--fy-black);

  background: var(--fy-soft-bg);
  color: var(--fy-black);
}

/* =========================================================
   ACCOUNT TABLE
========================================================= */

body.p-page__wrap .c-table,
body.p-page__wrap .p-myaccount__table,
body.p-page__wrap .p-account__table {
  width: 100%;

  margin: 0;
  padding: 0;

  border-collapse: collapse;
  border-top: 1px solid var(--fy-line);
}

body.p-page__wrap .c-table th,
body.p-page__wrap .c-table td,
body.p-page__wrap .p-myaccount__table th,
body.p-page__wrap .p-myaccount__table td,
body.p-page__wrap .p-account__table th,
body.p-page__wrap .p-account__table td {
  padding: 16px 17px;

  border-bottom: 1px solid var(--fy-line);

  color: var(--fy-text);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;

  text-align: left;
  vertical-align: top;
}

body.p-page__wrap .c-table th,
body.p-page__wrap .p-myaccount__table th,
body.p-page__wrap .p-account__table th {
  width: 30%;

  background: var(--fy-soft-bg);
  color: var(--fy-black);

  font-weight: 600;
}

/* =========================================================
   HORIZONTAL RULE
========================================================= */

body.p-page__wrap hr,
body.p-page__wrap .c-separator {
  width: 100%;
  height: 1px;

  margin: 54px 0;
  padding: 0;

  border: 0;
  background: var(--fy-line);
}

/* =========================================================
   ERROR / SUCCESS
========================================================= */

body.p-page__wrap .c-error,
body.p-page__wrap .error,
body.p-page__wrap .error_message,
body.p-page__wrap .error-message,
body.p-page__wrap .c-form__error {
  margin: 9px 0 0;
  padding: 0;

  color: var(--fy-error);

  font-size: 11px;
  font-weight: 400;
  line-height: 1.75;
}

body.p-page__wrap .c-success,
body.p-page__wrap .success,
body.p-page__wrap .success_message,
body.p-page__wrap .success-message {
  margin: 0 0 34px;
  padding: 19px 21px;

  border: 1px solid var(--fy-line);

  background: var(--fy-soft-bg);
  color: var(--fy-text);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
}

/* =========================================================
   DISABLED
========================================================= */

body.p-page__wrap .c-button:disabled,
body.p-page__wrap .c-button.is-disabled,
body.p-page__wrap button:disabled {
  border-color: var(--fy-line);

  background: #eeeeec;
  color: #999999;

  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

/* =========================================================
   FOOTER
========================================================= */

body.p-page__wrap .p-page__footer {
  width: 100%;

  margin: 0;
  padding: 60px 24px 42px;

  border: 0;

  background: var(--fy-black);
  color: var(--fy-white);
}

body.p-page__wrap .p-page__copyright {
  width: 100%;

  margin: 0 auto 35px;
  padding: 0;

  color: rgba(255, 255, 255, 0.5);

  font-family: var(--fy-font-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.015em;

  text-align: center;
}

body.p-page__wrap .p-page__footer > .p-page__container {
  width: min(100%, 680px);
  margin: 0 auto;
}

body.p-page__wrap .p-page__secure {
  display: flex;

  align-items: center;
  justify-content: center;
  gap: 27px;

  padding-top: 31px;

  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

body.p-page__wrap .p-secure__image {
  flex: 0 0 auto;
}

body.p-page__wrap .p-secure__msg {
  max-width: 470px;

  color: rgba(255, 255, 255, 0.56);

  font-family: var(--fy-font-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.012em;
}

/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  body.p-page__wrap .p-page__body {
    padding-right: 28px;
    padding-left: 28px;
  }

  body.p-page__wrap .p-page__body-inner {
    padding-right: 48px;
    padding-left: 48px;
  }

}

/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 767px) {

  html,
  body.p-page__wrap,
  body.p-page__wrap .base01,
  body.p-page__wrap .base02,
  body.p-page__wrap .p-page__body {
    background: var(--fy-white);
  }

  body.p-page__wrap .p-shop__header {
    min-height: 74px;
    padding: 19px 18px;
  }

  body.p-page__wrap .p-shop__title {
    font-size: 19px;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
  }

  body.p-page__wrap .p-page__body {
    padding: 34px 18px 80px;
  }

  body.p-page__wrap .p-page__body-inner {
    width: 100%;

    padding: 0;

    border: 0;
    background: var(--fy-white);
  }

  body.p-page__wrap .c-button__group--sub {
    justify-content: flex-start;

    margin-bottom: 54px;
  }

  body.p-page__wrap .p-page__title {
    margin-bottom: 38px;

    font-size: 24px;
    line-height: 1.55;

    text-align: left;
  }

  body.p-page__wrap .p-page__title::before {
    margin-bottom: 9px;
  }

  body.p-page__wrap .p-page__title::after {
    margin-right: 0;
    margin-left: 0;
  }

  body.p-page__wrap .c-alert,
  body.p-page__wrap .c-message,
  body.p-page__wrap .p-login__description,
  body.p-page__wrap .p-member__description,
  body.p-page__wrap .p-myaccount__description,
  body.p-page__wrap .p-account__description {
    margin-bottom: 42px;
    padding-bottom: 34px;

    font-size: 13px;
    line-height: 1.95;
  }

  body.p-page__wrap .c-ttl-main,
  body.p-page__wrap .c-ttl-second,
  body.p-page__wrap .c-form__heading,
  body.p-page__wrap .p-login__title,
  body.p-page__wrap .p-member__title,
  body.p-page__wrap .p-myaccount__title,
  body.p-page__wrap .p-account__title,
  body.p-page__wrap .p-customer__title {
    margin-bottom: 23px;

    font-size: 17px;
  }

  body.p-page__wrap .c-box,
  body.p-page__wrap .c-panel,
  body.p-page__wrap .p-page__section,
  body.p-page__wrap .p-login__box,
  body.p-page__wrap .p-member__box,
  body.p-page__wrap .p-myaccount__box,
  body.p-page__wrap .p-account__box {
    margin-bottom: 45px;
    padding-bottom: 41px;
  }

  body.p-page__wrap form + form {
    margin-top: 45px;
    padding-top: 42px;
  }

  body.p-page__wrap .c-form__table tr,
  body.p-page__wrap .c-form__row,
  body.p-page__wrap .c-form__item,
  body.p-page__wrap .p-login__form-item,
  body.p-page__wrap .p-member__form-item,
  body.p-page__wrap .p-myaccount__form-item,
  body.p-page__wrap .p-account__form-item {
    margin-bottom: 29px;
  }

  body.p-page__wrap .c-input--text,
  body.p-page__wrap input[type="text"],
  body.p-page__wrap input[type="email"],
  body.p-page__wrap input[type="password"],
  body.p-page__wrap input[type="tel"],
  body.p-page__wrap input[type="number"],
  body.p-page__wrap input[type="search"],
  body.p-page__wrap select,
  body.p-page__wrap textarea {
    min-height: 55px;

    font-size: 16px;
  }

  body.p-page__wrap textarea {
    min-height: 180px;
  }

  body.p-page__wrap .c-button__group:not(.c-button__group--sub),
  body.p-page__wrap .c-buttons,
  body.p-page__wrap .p-login__buttons,
  body.p-page__wrap .p-member__buttons,
  body.p-page__wrap .p-myaccount__buttons,
  body.p-page__wrap .p-account__buttons {
    margin-top: 38px;
  }

  body.p-page__wrap .c-button--primary,
  body.p-page__wrap .c-button--danger {
    min-height: 59px;
  }

  body.p-page__wrap .p-myaccount__menu a,
  body.p-page__wrap .p-account__menu a,
  body.p-page__wrap .c-menu-list a,
  body.p-page__wrap .c-account-menu a {
    min-height: 56px;

    padding: 14px 15px;

    font-size: 12px;
  }

  body.p-page__wrap .c-table,
  body.p-page__wrap .p-myaccount__table,
  body.p-page__wrap .p-account__table {
    display: block;

    overflow-x: auto;
    white-space: nowrap;

    -webkit-overflow-scrolling: touch;
  }

  body.p-page__wrap .c-table th,
  body.p-page__wrap .c-table td,
  body.p-page__wrap .p-myaccount__table th,
  body.p-page__wrap .p-myaccount__table td,
  body.p-page__wrap .p-account__table th,
  body.p-page__wrap .p-account__table td {
    padding: 14px;

    font-size: 12px;
  }

  body.p-page__wrap .p-page__footer {
    padding: 47px 18px 35px;
  }

  body.p-page__wrap .p-page__secure {
    display: block;

    padding-top: 27px;

    text-align: center;
  }

  body.p-page__wrap .p-secure__image {
    display: flex;
    justify-content: center;

    margin-bottom: 22px;
  }

  body.p-page__wrap .p-secure__msg {
    margin: 0 auto;

    text-align: left;
  }

}
/* =========================================================
   ショップへ戻る
   お問い合わせページと統一
========================================================= */

body.p-page__wrap .c-button__group--sub {
  display: flex;
  width: 100%;

  justify-content: flex-end;

  margin: 0 0 54px;
  padding: 0;
}

body.p-page__wrap .c-button__group--sub .c-button,
body.p-page__wrap .c-button__group--sub .c-button:link,
body.p-page__wrap .c-button__group--sub .c-button:visited,
body.p-page__wrap .c-button__group--sub .c-button:active,
body.p-page__wrap .c-button__group--sub .c-button:hover {
  position: relative;

  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 0;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0 0 5px;

  border: 0;
  border-bottom: 1px solid #111111;
  border-radius: 0;

  background: transparent !important;
  color: #111111 !important;

  font-family:
    Meiryo,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium",
    "Yu Gothic",
    sans-serif;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;

  box-shadow: none !important;
}

/* 左向き矢印をCSSで描画 */

body.p-page__wrap .c-button__group--sub .c-button::before {
  display: block;

  width: 7px;
  height: 7px;

  margin-right: 10px;

  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;

  content: "";
  transform: rotate(45deg);
}

body.p-page__wrap .c-button__group--sub .c-button:hover {
  border-bottom-color: #707070;

  background: transparent !important;
  color: #707070 !important;

  opacity: 0.8;
}

/* スマートフォン */

@media screen and (max-width: 767px) {

  body.p-page__wrap .c-button__group--sub {
    justify-content: flex-start;
    margin-bottom: 54px;
  }

}