@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 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 */
}
/**
 * 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: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  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: 1em; /* 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
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * 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"] {
  -webkit-appearance: button;
}
/**
 * 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;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 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 {
  box-sizing: border-box; /* 1 */
  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;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * 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 odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * 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 */
}
/* 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;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
@font-face {
  font-family: "bananaslip plus";
  src: url("/fonts/bananaslipplus.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Senobi Gothic";
  src: url("/fonts/Senobi-Gothic-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Twipri Font";
  src: url("/fonts/Twipri-Font.woff2") format("woff2");
  unicode-range: U+0030-0039, U+0041-007A, U+002F;
  font-display: swap;
}
:root {
  --color-brand: #363636;
  --color-brand-sub: #35a8f6;
  --color-brand-text: #1d9bf0;
  --color-text: #363636;
  --color-btn-bg: #f8f8f8;
  --color-accent: #ffec43;
  --color-toggle-on: #0297fb;
  --color-toggle-off: #78788026;
  --color-toggle-border: #c6c6c8;
  --color-footer-nav: #acacac;
  --color-form-bg: #f7f7f7;
  --color-form-border: #e5e5e5;
  --color-edit-border: #dcdcdc;
  --color-favorite-share: #9fbdd3;
  --color-on-favorite: #f91880;
  --color-reactions-text: #969696;
  --color-reactions-bg: #f9fafb;
  --color-select-stamp-bg: #ebf7fe;
  --color-select-stamp-border: #abd1e9;
  --color-warning-bg: #f8f8f8;
  --color-warning-text: #dae7ef;
  --color-limit-text: #81919c;
  --color-twipri-btn-shadow: #145a89;
  --color-lock: #adbeca;
  --color-lock-icon: #586b88;
  --color-pass-form-border: #91a5c4;
  --color-timeout-bg: #acacac;
  --color-error: #ff8982;
  --color-pc-bg: #f3f7fa;
  --color-hover: #e9eef1;
  --color-reaction-border: #e9e9e9;
  --color-delete-btn: #f54338;
  --neutral-gray-50: #f6f6f6;
  --neutral-gray-100: #e9e9e9;
  --neutral-gray-300: #c6c6c6;
  --neutral-gray-400: #acacac;
  --neutral-gray-600: #767676;
  --neutral-gray-800: #363636;
  --blue-re-blue-500: #0297fb;
  --neutral-gray-500: #969696;
  --red-red-700: #f54338;
  --color-main-bg: #fff;
}
html,
body {
  height: 100%;
  font: 13px/1.5 "Twipri Font", "Helvetica Neue", Hiragino Sans,
    Hiragino Kaku Gothic ProN, Meiryo, sans-serif !important;
  font-synthesis-weight: none;
  letter-spacing: normal;
}
body {
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-wrap: break-word;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  border: 0;
  padding: 0;
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
}
button,
input,
select,
textarea,
p,
a {
  letter-spacing: normal;
}
:disabled,
.disabled {
  cursor: default;
}
b,
body,
canvas,
caption,
dd,
div,
dl,
dt,
fieldset,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
label,
legend,
li,
menu,
nav,
object,
ol,
p,
section,
span,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
a {
  color: var(--color-text);
  text-decoration: none;
}
iframe {
  display: block;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
@font-face {
  font-family: "icomoon";
  src: url("/fonts/icomoon.eot?z66qro");
  src: url("/fonts/icomoon.eot?z66qro#iefix") format("embedded-opentype"),
    url("/fonts/icomoon.ttf?z66qro") format("truetype"),
    url("/fonts/icomoon.woff?z66qro") format("woff"),
    url("/fonts/icomoon.svg?z66qro#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "mdbn-iconfont";
  src: url("/fonts/n/icomoon.eot?zajbuw");
  src: url("/fonts/n/icomoon.eot?zajbuw#iefix") format("embedded-opentype"),
    url("/fonts/n/icomoon.ttf?zajbuw") format("truetype"),
    url("/fonts/n/icomoon.woff?zajbuw") format("woff"),
    url("/fonts/n/icomoon.svg?zajbuw#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*ヘッダー*/
.tw-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #dcdcdc;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
}
.tw-header .header-logo {
  width: 94px;
  height: -moz-fit-content;
  height: fit-content;
}
.tw-header .header-logo > a {
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.tw-header .header-logo > a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(/images/shared/logo-neppri-b-2.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
}
.tw-header .header-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.tw-header .header-about {
  display: block;
  width: 30px;
  height: 30px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.tw-header .header-about::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--color-footer-nav);
  -webkit-mask-image: url(/images/shared/icon-question2.svg);
  mask-image: url(/images/shared/icon-question2.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tw-header .start-btn {
  display: block;
}
.tw-header .start-btn a {
  display: block;
  padding: 9px 16px;
  background-image: linear-gradient(135deg, #ff8d4e 0%, #ea2ce2 100%);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.tw-header .start-btn a::before {
  content: "";
  background-image: linear-gradient(135deg, #ff8d4e 0%, #ea2ce2 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}
.tw-header .start-btn a::after {
  content: "";
  background-image: linear-gradient(135deg, #ea2ce2 0%, #ff8d4e 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: opacity 0.2s ease;
  opacity: 0;
}
@media (hover: none) {
  .tw-header .start-btn a {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .tw-header .start-btn a:active::after {
    opacity: 1;
  }
}
@media (hover: hover) {
  .tw-header .start-btn a {
    backface-visibility: hidden;
  }
  .tw-header .start-btn a:hover::after {
    opacity: 1;
  }
  .tw-header .start-btn a:active::after {
    opacity: 1;
  }
}
.pc-container {
  display: block;
}
.header-pc {
  display: none;
}
.sidebar-top-btn {
  display: none;
}
@media screen and (min-width: 600px) {
  .tw-header {
    display: none;
  }
  .pc-container {
    display: grid;
    grid-template-columns: 76px 1fr;
    justify-content: flex-start;
  }
  .header-pc {
    display: block;
    background-color: #fff;
    border-right: 1px solid #dcdcdc;
  }
  .header-pc-inner {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .header-pc-nav {
    position: sticky;
    top: 0;
    left: 0;
    padding-top: 24px;
    padding-bottom: 48px;
  }
  .header-logo-box {
    margin: 0 auto 16px;
  }
  .header-logo-box .header-logo {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
  }
  .header-logo-box .header-logo a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
  }
  .header-logo-box .header-logo a::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/images/shared/logo-neppri-tb-2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
  }
  .link-text {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 16px;
  }
  .link-text a {
    display: block;
  }
  .link-text [class^="link-icon"] {
    font-size: 0;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    transition: background-color 0.2s ease;
  }
  .link-text [class^="link-icon"]::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--color-footer-nav);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin: 0 auto;
  }
  .link-text [class^="link-icon"].active {
    color: var(--color-brand);
    background-image: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentcolor;
  }
  .link-text [class^="link-icon"].active::before {
    background-image: none;
    background-color: var(--color-brand);
  }
  .link-text .link-icon-use::before {
    -webkit-mask-image: url(/images/shared/icon-beginner-v2.svg);
    mask-image: url(/images/shared/icon-beginner-v2.svg);
  }
  .link-text .link-icon-use.active::before {
    -webkit-mask-image: url(/images/shared/icon-beginner-on.svg);
    mask-image: url(/images/shared/icon-beginner-on.svg);
  }
  .link-text .link-icon-x::before {
    -webkit-mask-image: url(/images/shared/icon-x.svg);
    mask-image: url(/images/shared/icon-x.svg);
  }
  .link-text .link-icon-x.active::before {
    -webkit-mask-image: url(/images/shared/icon-x.svg);
    mask-image: url(/images/shared/icon-x.svg);
    background-color: var(--color-brand);
  }
  .link-text .link-icon-recommended {
    background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .link-text .link-icon-recommended::before {
    background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
    -webkit-mask-image: url(/images/shared/icon-recommended.svg);
    mask-image: url(/images/shared/icon-recommended.svg);
  }
  .link-text .link-icon-recommended.active::before {
    -webkit-mask-image: url(/images/shared/icon-recommended.svg);
    mask-image: url(/images/shared/icon-recommended.svg);
  }
  .link-text .link-icon-quick-upload {
    background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .link-text .link-icon-quick-upload::before {
    background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
    -webkit-mask-image: url(/images/shared/icon-quick-v2.svg);
    mask-image: url(/images/shared/icon-quick-v2.svg);
  }
  .link-text .link-icon-quick-upload.active::before {
    -webkit-mask-image: url(/images/shared/icon-quick-v2.svg);
    mask-image: url(/images/shared/icon-quick-v2.svg);
  }
  .link-text .link-icon-upload {
    background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .link-text .link-icon-upload::before {
    background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
    -webkit-mask-image: url(/images/shared/icon-upload.svg);
    mask-image: url(/images/shared/icon-upload.svg);
  }
  .link-text .link-icon-upload.active::before {
    -webkit-mask-image: url(/images/shared/icon-upload-on.svg);
    mask-image: url(/images/shared/icon-upload-on.svg);
  }
  .link-text .link-icon-mypage::before {
    -webkit-mask-image: url(/images/shared/icon-author.svg);
    mask-image: url(/images/shared/icon-author.svg);
  }
  .link-text .link-icon-mypage.active::before {
    -webkit-mask-image: url(/images/shared/icon-author-on.svg);
    mask-image: url(/images/shared/icon-author-on.svg);
  }
  .link-text .link-icon-about::before {
    -webkit-mask-image: url(/images/shared/icon-question2.svg);
    mask-image: url(/images/shared/icon-question2.svg);
  }
  .login-box {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .pc-container {
    background-color: var(--color-main-bg);
    grid-template-columns: minmax(274px, 400px) minmax(580px, 720px) minmax(
        156px,
        320px
      );
    justify-content: center;
  }
  .header-pc {
    display: block;
    background-color: transparent;
    border-right: none;
    position: relative;
  }
  .header-pc-nav {
    max-width: 224px;
    margin-left: calc((100% - 224px) * 8 / 11);
    margin-right: calc((100% - 224px) * 3 / 11);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .header-pc-nav ul {
    width: 100%;
  }
  .header-logo-box {
    margin: 0 auto 48px;
  }
  .header-logo-box .header-logo {
    width: 141px;
    height: 40px;
    margin: 0;
  }
  .header-logo-box .header-logo > a::before {
    background-image: url(/images/shared/logo-neppri-b-2.svg);
  }
  .link-text {
    border-radius: 10px;
    width: auto;
    margin: auto auto 16px;
  }
  .link-text [class^="link-icon"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: initial;
    width: auto;
    height: auto;
    border-radius: 10px;
    font-family: "Hiragino Sans";
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-footer-nav);
    padding: 8px;
  }
  .link-text [class^="link-icon"]::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--color-footer-nav);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin: 0 16px 0 0;
  }
  .link-text [class^="link-icon"]::after {
    content: "";
    display: block;
    border-radius: 10px;
    background-color: var(--color-hover);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
}
@media screen and (min-width: 1025px) and (hover: none) {
  .link-text [class^="link-icon"] {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .link-text [class^="link-icon"]:active::after {
    opacity: 1;
  }
}
@media screen and (min-width: 1025px) and (hover: hover) {
  .link-text [class^="link-icon"] {
    backface-visibility: hidden;
  }
  .link-text [class^="link-icon"]:hover::after {
    opacity: 1;
  }
  .link-text [class^="link-icon"]:active::after {
    opacity: 1;
  }
}
@media screen and (min-width: 1025px) {
  .login-box {
    display: block;
    margin-top: 24px;
  }
  .login-box .start-btn a {
    display: block;
    width: 100%;
    padding: 9px 16px;
    background-image: linear-gradient(135deg, #ff8d4e 0%, #ea2ce2 100%);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }
  .login-box .start-btn a::before {
    content: "";
    background-image: linear-gradient(135deg, #ff8d4e 0%, #ea2ce2 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  .login-box .start-btn a::after {
    content: "";
    background-image: linear-gradient(135deg, #ea2ce2 0%, #ff8d4e 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.2s ease;
    opacity: 0;
  }
}
@media screen and (min-width: 1025px) and (hover: none) {
  .login-box .start-btn a {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .login-box .start-btn a:active::after {
    opacity: 1;
  }
}
@media screen and (min-width: 1025px) and (hover: hover) {
  .login-box .start-btn a {
    backface-visibility: hidden;
  }
  .login-box .start-btn a:hover::after {
    opacity: 1;
  }
  .login-box .start-btn a:active::after {
    opacity: 1;
  }
}
@media screen and (min-width: 1025px) {
  .sidebar-text {
    writing-mode: vertical-rl;
  }
  .sidebar-text p {
    text-orientation: mixed;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    line-height: 14px;
  }
  .sidebar-text .official-link {
    position: relative;
  }
  .sidebar-text .official-link::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-color: #fff;
    -webkit-mask-image: url(/images/twitter-blue.svg);
    mask-image: url(/images/twitter-blue.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    bottom: -56px;
    left: 50%;
    transform: translateX(-50%);
  }
  .sidebar-top-btn {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.15);
    position: fixed;
    right: 32px;
    bottom: 40px;
    z-index: 10;
  }
  .sidebar-top-btn .page-top {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--neutral-gray-50, #f6f6f6);
    border-radius: 999px;
    margin: 0 auto;
    position: relative;
  }
  .sidebar-top-btn .page-top::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--neutral-gray-800, #363636);
    -webkit-mask-image: url(/images/arrow-icon.svg);
    mask-image: url(/images/arrow-icon.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .tw-btm-nav {
    display: none;
  }
}
.wrapper_contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: 0;
  position: relative;
}
.contents {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
}
#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: initial;
  padding: 0;
  overflow: visible;
}
.mod-main {
  flex: 1;
  width: 100%;
  position: relative;
}
.main-contents {
  max-width: 640px;
  margin: 0 auto;
  background-color: #fff;
}
@media screen and (min-width: 600px) {
  .main-contents {
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (min-width: 1025px) {
  .main-contents {
    max-width: 720px;
    min-width: 720px;
    background-color: var(--color-main-bg);
  }
}
.tw-btm-nav {
  display: block;
  width: 100%;
  height: 54px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
}
.tw-btm-nav .btm-nav-box {
  display: grid;
  place-content: stretch center;
  grid-auto-flow: column;
  gap: 10px;
  height: 54px;
}
.tw-btm-nav [class^="btn"] {
  display: grid;
  place-items: center;
  gap: 4px;
  height: 100%;
  padding: 8px 0;
  font-size: 8.5px;
  line-height: 1;
  color: var(--color-footer-nav);
  position: relative;
  min-width: 50px;
}
.tw-btm-nav [class^="btn"]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--color-footer-nav);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.tw-btm-nav [class^="btn"].on {
  color: var(--color-brand);
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentcolor;
}
.tw-btm-nav [class^="btn"].on::before {
  background-image: none;
  background-color: var(--color-brand);
}
.tw-btm-nav .btn-use::before {
  -webkit-mask-image: url(/images/shared/icon-beginner-v2.svg);
  mask-image: url(/images/shared/icon-beginner-v2.svg);
}
.tw-btm-nav .btn-use.on::before {
  -webkit-mask-image: url(/images/shared/icon-beginner-on.svg);
  mask-image: url(/images/shared/icon-beginner-on.svg);
}
.tw-btm-nav .btn-recommended {
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tw-btm-nav .btn-recommended::before {
  background-color: transparent;
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  -webkit-mask-image: url(/images/shared/icon-recommended.svg);
  mask-image: url(/images/shared/icon-recommended.svg);
}
.tw-btm-nav .btn-recommended.on::before {
  -webkit-mask-image: url(/images/shared/icon-recommended.svg);
  mask-image: url(/images/shared/icon-recommended.svg);
}
.tw-btm-nav .btn-x::before {
  -webkit-mask-image: url(/images/shared/icon-x.svg);
  mask-image: url(/images/shared/icon-x.svg);
}
.tw-btm-nav .btn-x.on::before {
  -webkit-mask-image: url(/images/shared/icon-x.svg);
  mask-image: url(/images/shared/icon-x.svg);
}
.tw-btm-nav .btn-quick-upload {
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tw-btm-nav .btn-quick-upload::before {
  background-color: transparent;
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  -webkit-mask-image: url(/images/shared/icon-quick-v2.svg);
  mask-image: url(/images/shared/icon-quick-v2.svg);
}
.tw-btm-nav .btn-quick-upload.on::before {
  -webkit-mask-image: url(/images/shared/icon-quick-v2.svg);
  mask-image: url(/images/shared/icon-quick-v2.svg);
}
.tw-btm-nav .btn-upload {
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tw-btm-nav .btn-upload::before {
  background-color: transparent;
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  -webkit-mask-image: url(/images/shared/icon-upload.svg);
  mask-image: url(/images/shared/icon-upload.svg);
}
.tw-btm-nav .btn-upload.on::before {
  -webkit-mask-image: url(/images/shared/icon-upload-on.svg);
  mask-image: url(/images/shared/icon-upload-on.svg);
}
.tw-btm-nav .btn-author::before {
  -webkit-mask-image: url(/images/shared/icon-author.svg);
  mask-image: url(/images/shared/icon-author.svg);
}
.tw-btm-nav .btn-author.on::before {
  -webkit-mask-image: url(/images/shared/icon-author-on.svg);
  mask-image: url(/images/shared/icon-author-on.svg);
}
@media screen and (max-width: 340px) {
  .tw-btm-nav [class^="btn"] {
    width: auto;
    min-width: 35px;
  }
}
.footer-container {
  background-color: #fff;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--neutral-gray-100, #e9e9e9);
}
.footer-container::before {
  content: "";
  width: 100%;
  height: 16px;
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  position: absolute;
  left: 0;
}
.footer-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px;
}
.footer-box {
  margin-bottom: 56px;
}
.footer-logo-link {
  display: inline-block;
  margin-bottom: 32px;
}
.footer-logo-link img {
  display: block;
  height: auto;
}
.footer-nav-news {
  margin: 40px 0 0;
}
.footer-nav-title {
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--neutral-gray-800);
  margin-bottom: 20px;
}
.footer-nav ul li:nth-child(even) {
  margin: 12px 0;
}
.footer-nav ul li a {
  font-family: "Hiragino Sans";
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: var(--neutral-gray-400);
}
.footer-nav ul .twitter-link a {
  display: flex;
  align-items: center;
  position: relative;
}
.footer-nav ul .twitter-link a::before {
  content: "";
  display: block;
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  background-color: var(--neutral-gray-400);
  -webkit-mask-image: url(img/icon-x.svg);
  mask-image: url(img/icon-x.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-right: 8px;
}
.footer-info ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.footer-info ul li a {
  font-family: "Hiragino Sans";
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
  color: var(--neutral-gray-400);
}
.footer-info-sp {
  line-height: 34px;
}
@media screen and (min-width: 600px) {
  .footer-container::before {
    bottom: 0;
  }
  .footer-inner {
    max-width: initial;
    margin: 0;
    padding: 40px 24px 32px 40px;
  }
  .footer-nav-wrap {
    display: flex;
    align-items: flex-start;
  }
  .footer-nav-news {
    margin: 0 0 0 40px;
  }
  .footer-nav ul li:nth-child(even) {
    margin: 16px 0;
  }
  .footer-nav ul li a {
    font-size: 14px;
    line-height: 22px;
  }
  .footer-nav ul .twitter-link a::before {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
  }
  .tw-btm-nav {
    display: none;
  }
  .footer-info ul li a {
    font-size: 12px;
  }
}
@media screen and (min-width: 1025px) {
  .footer-container {
    padding-bottom: 0;
  }
  .footer-container .footer-inner {
    max-width: 1274px;
    padding: 53px 112px 56px 40px;
    margin: 0 auto;
  }
  .footer-container .footer-logo-link {
    margin: 0;
  }
  .footer-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 144px;
  }
  .footer-nav-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-logo-link {
    margin: 0 2% 0 0;
  }
  .footer-logo-link img {
    margin-top: -10px;
  }
  .footer-nav-news {
    margin: 0;
  }
  .footer-nav-title {
    line-height: 24px;
  }
  .footer-nav ul li:nth-child(even) {
    margin: 16px 0;
  }
  .footer-nav ul li a {
    font-size: 14px;
    line-height: 22px;
  }
  .footer-nav ul .twitter-link a::before {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
  }
  .footer-info ul {
    gap: 24px;
  }
}
.start-area {
  display: none;
  width: 100%;
  height: 66px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 101;
}
.start-area .start-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.start-area .start-btn a {
  display: block;
  min-width: 224px;
  padding: 9px 16px;
  background: linear-gradient(135deg, #ff8d4e 0%, #ea2ce2 100%);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .start-area {
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  .start-area {
    display: none;
  }
}
/*===============================
  アップロード作品
================================*/
.c-upload-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  grid-gap: 16px;
  margin: 0 0 16px;
}
.c-upload-item {
  position: relative;
  border-radius: 8px;
  width: 100%;
  min-width: 112px;
  height: 100%;
  min-height: 112px;
  aspect-ratio: 1/1;
  cursor: grab;
}
.c-upload-item:active {
  cursor: grabbing;
}
.c-upload-item::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.c-upload-item .image-box {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.c-upload-item .images-item {
  display: block;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 0;
  object-position: 50% 0;
}
.c-upload-item .btn-sort {
  width: 32px;
  height: 32px;
  background: #fff;
  border: none;
  border-radius: 8px 0px;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: -1px;
  left: -1px;
}
.c-upload-item .btn-delete {
  background: transparent;
  border: none;
  padding: 0;
  position: absolute;
  top: 4px;
  right: 4px;
}
.edit-item-img {
  cursor: default;
}
.edit-item-img .images-item {
  cursor: default;
}
.upload-images {
  width: 100%;
  min-width: 112px;
  height: 100%;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 16px;
  border: none;
  padding: 0;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-gray-400);
  position: relative;
  outline: none;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23ACACAC' stroke-width='4' stroke-dasharray='7' stroke-dashoffset='25' stroke-linecap='butt'/%3e%3c/svg%3e");
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 1/1;
}
.upload-images img {
  margin-bottom: 6px;
}
.upload-description {
  color: var(--neutral-gray-400, #acacac);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 12px;
  margin-bottom: 8px;
  display: flex;
  -moz-column-gap: 16px;
  column-gap: 16px;
}
.file-info-tooltip-area {
  position: relative;
}
.file-info-tooltip {
  position: absolute;
  background-color: var(--neutral-gray-800);
  border-radius: 3px;
  padding: 4px 8px;
  bottom: 20px;
  left: 0;
  display: none;
  z-index: -1;
}
.file-info-tooltip.open {
  display: block;
  z-index: 1;
}
.file-info-tooltip:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--neutral-gray-800);
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
}
.file-info-tooltip-list {
  display: flex;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.file-info-tooltip-list span {
  display: block;
}
.file-info-tooltip-trigger {
  color: var(--neutral-gray-800, #363636);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  -moz-column-gap: 4px;
  column-gap: 4px;
}
.file-info-tooltip-trigger::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--neutral-gray-800, #363636);
  -webkit-mask-image: url(/images/shared/icon-question3.svg);
  mask-image: url(/images/shared/icon-question3.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media screen and (min-width: 1025px) {
  .file-info-tooltip-trigger {
    margin-bottom: 20px;
  }
}
.upload-file-type {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.upload-file-type span {
  display: inline-block;
  color: var(--neutral-gray-800, #363636);
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 4px;
}
@media screen and (min-width: 600px) {
  .upload-description {
    font-size: 12px;
    line-height: 16px;
  }
}
/*===============================
  プリント作品一覧
================================*/
.c-print-item {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-columns: auto;
  grid-template-rows: auto;
  background-color: #fff;
  position: relative;
}
.c-print-item::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--neutral-gray-100);
  position: absolute;
  bottom: -1px;
  left: 0;
}
.c-print-item + .c-print-item {
  margin-top: 1px;
}
.c-print-item .link-item {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  padding: 16px;
}
.c-print-item .print-image {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 12px 0 0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.c-print-item .print-image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 0;
  object-position: 50% 0;
  border-radius: 5px;
  background-color: #f8f8f8;
}
.c-print-item .print-multiple {
  padding: 0 6px 0 18px;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  transform: scale(0.8);
  transform-origin: right top;
  position: absolute;
  top: 2px;
  right: 2px;
}
.c-print-item .icon-multiple {
  display: block;
  width: 10px;
  height: 10px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
}
.c-print-item .icon-multiple::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #fff;
  -webkit-mask-image: url(../images/shared/icon-multiple.svg);
  mask-image: url(../images/shared/icon-multiple.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  text-indent: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-print-item .print-column {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column dense;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto auto;
}
.c-print-item .print-title {
  grid-column: 1 / span 2;
  grid-row: 1;
  height: 1.5em;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.c-print-item .print-stock {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #f54338;
}
.c-print-item .print-stock.sold-out {
  color: var(--neutral-gray-500);
}
.c-print-item .print-state {
  grid-column: 3;
  grid-row: 1;
  place-self: center;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 8px;
  border: 1px solid #fe7878;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  color: #fe7878;
  position: relative;
}
.c-print-item .print-quantity {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  margin: auto 0 18px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
}
.c-print-item .print-date {
  grid-column: 2 / span 2;
  grid-row: 2;
  width: 100%;
  margin: 4px 0 18px;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  line-height: 1;
  color: var(--neutral-gray-500);
}
.c-print-item .print-price {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--neutral-gray-800);
}
.c-print-item .print-author {
  grid-column: 2 / span 2;
  grid-row: 3;
  margin-top: auto;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  place-content: center end;
}
.c-print-item .icon-author {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.c-print-item .icon-author > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 0;
  object-position: 50% 0;
}
.c-print-item .author-name {
  width: 100%;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.c-print-item .print-purchased {
  grid-column: 2 / span 2;
  grid-row: 3;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--neutral-gray-800);
  text-align: right;
}
.c-print-item .print-sales {
  grid-column: 2 / span 2;
  grid-row: 3;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--neutral-gray-500);
  text-align: right;
}
.c-print-item .sales-total {
  font-size: 10px;
}
.c-print-item .expired-item {
  grid-column: 1;
  grid-row: 1;
  background-color: rgba(0, 0, 0, 0.5);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  position: relative;
}
@media screen and (min-width: 600px) {
  .c-print-item::after {
    width: calc(100% - 48px);
    left: 24px;
  }
  .c-print-item:last-of-type::after {
    content: none;
  }
  .c-print-item:last-of-type .link-item {
    padding: 16px 24px 24px;
  }
  .c-print-item .link-item {
    padding: 16px 24px;
  }
  .c-print-item .print-image {
    width: 80px;
    height: 80px;
    margin: 0 16px 0 0;
  }
  .c-print-item .print-multiple {
    transform: scale(1);
    top: 4px;
    right: 4px;
  }
  .c-print-item .print-title {
    font-size: 16px;
  }
  .c-print-item .print-stock {
    font-size: 14px;
  }
  .c-print-item .print-state {
    border-radius: 17px;
    font-size: 12px;
    line-height: 1.5;
  }
  .c-print-item .print-date {
    font-size: 14px;
  }
  .c-print-item .print-price {
    font-size: 14px;
  }
  .c-print-item .icon-author {
    width: 20px;
    height: 20px;
  }
  .c-print-item .author-name {
    font-size: 12px;
  }
  .c-print-item .print-purchased {
    font-size: 14px;
  }
  .c-print-item .print-sales {
    font-size: 14px;
  }
  .c-print-item .sales-total {
    font-size: 12px;
  }
}
/*===============================
  フォーム
================================*/
.c-form {
  display: block;
  width: 100%;
  margin: 0 0 24px;
}
.c-form-item {
  /*for meter track*/
  /*for meter bar*/
}
.c-form-item:not(:last-of-type) {
  margin: 0 0 40px;
}
.c-form-item.upload-form-item {
  margin-bottom: 14px;
}
.c-form-item .label-box {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.c-form-item .detail-form-label-box {
  display: flex;
  -moz-column-gap: 12px;
  column-gap: 12px;
  align-items: flex-start;
}
.c-form-item .form-label {
  margin: 0 0 6px;
  font-size: 14px;
  font-family: Hiragino Sans;
  font-weight: 600;
  color: var(--color-text);
  display: block;
}
.c-form-item .max-length-text {
  color: var(--neutral-gray-400, #acacac);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
}
.c-form-item .sales-info-link {
  color: var(--neutral-gray-500, #969696);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  border-radius: 60px;
  border: 1px solid var(--neutral-gray-300, #c6c6c6);
  padding: 1px 8px;
  margin-top: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-form-item .form-input-wrap {
  position: relative;
}
.c-form-item .form-input-box {
  display: block;
  width: 133.3333333333%;
  transform: scale(0.75);
  transform-origin: 0 0;
  position: relative;
}
.c-form-item .form-input-instagram {
  display: flex;
  align-items: center;
}
.c-form-item .form-input-instagram-text {
  padding-left: 16px;
  margin-right: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}
.c-form-item .form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 1;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 58.6666666667px;
  padding: 16px;
  border: 0;
  box-shadow: inset 0 0 0 1.3333333333px var(--neutral-gray-100);
  border-radius: 6.6666666667px;
  background-color: #fff;
  font-size: 16px;
  font-family: Hiragino Sans;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
}
.c-form-item .form-input::-moz-placeholder {
  font-size: 16px;
  color: var(--neutral-gray-600);
}
.c-form-item .form-input::placeholder {
  font-size: 16px;
  color: var(--neutral-gray-600);
}
.c-form-item .form-password {
  width: 100%;
  height: 58.6666666667px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}
.c-form-item .flatpickr-input {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
}
.c-form-item input[type="time"]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  opacity: 0;
  position: relative;
  z-index: 6;
}
.c-form-item input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  opacity: 0;
  position: relative;
  z-index: 6;
}
.c-form-item input::-webkit-date-and-time-value {
  text-align: left;
}
.c-form-item .icon-calender {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%) scale(1);
  transform-origin: right center;
  cursor: pointer;
}
.c-form-item .form-textarea-wrap {
  position: relative;
}
.c-form-item .form-textarea-box {
  display: block;
  width: 133.3333333333%;
  min-height: 90.6666666667px;
  transform: scale(0.75);
  transform-origin: 0 0;
}
.c-form-item .form-text {
  color: #979797;
  font-size: 12px;
}
.c-form-item .form-textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 90.6666666667px;
  padding: 16px;
  border: 0;
  box-shadow: inset 0 0 0 1.3333333333px var(--neutral-gray-100);
  border-radius: 6.6666666667px;
  background-color: #fff;
  font-size: 16px;
  font-family: Hiragino Sans;
  font-weight: 400;
  line-height: 1.83333;
  color: var(--color-text);
  overflow-x: hidden;
  overflow-y: auto;
  cursor: pointer;
  resize: vertical;
}
.c-form-item .form-textarea::-webkit-scrollbar {
  width: 8px;
}
.c-form-item .form-textarea::-webkit-scrollbar-track {
  margin-top: 5px;
  border-radius: 5px;
  background-color: #969696;
}
.c-form-item .form-textarea::-webkit-scrollbar-thumb {
  background-color: #969696;
  border-radius: 8px;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  background-clip: padding-box;
}
.c-form-item .form-textarea::-webkit-scrollbar-corner {
  background-color: transparent;
}
.c-form-item .form-textarea::-moz-placeholder {
  font-size: 16px;
  color: var(--neutral-gray-600);
}
.c-form-item .form-textarea::placeholder {
  font-size: 16px;
  color: var(--neutral-gray-600);
}
.c-form-item .form-textarea::-webkit-input-placeholder {
  position: relative;
  top: -1px;
}
.c-form-item .form-textarea::-webkit-resizer {
  display: none;
}
.c-form-item .form-textarea-count {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 2;
  color: #acacac;
  text-align: right;
}
.c-form-item .form-toggle {
  position: relative;
  display: grid;
  grid-auto-flow: column dense;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 0 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--neutral-gray-100);
  border-bottom: 1px solid var(--neutral-gray-100);
}
.c-form-item .form-toggle + .form-toggle {
  border-top: 0;
}
.c-form-item .form-toggle.disable-btn .toggle-name {
  opacity: 0.2;
}
.c-form-item .form-toggle.disable-btn .toggle-label::after {
  opacity: 0.5;
}
.c-form-item .blur-controls-area {
  display: grid;
  grid-template-columns: auto 1fr auto;
  -moz-column-gap: 16px;
  column-gap: 16px;
  align-items: center;
  margin: 12px auto 0;
}
.c-form-item .blur-controls-btn {
  width: 32px;
  height: 32px;
  position: relative;
  border-radius: 99px;
  touch-action: manipulation;
}
.c-form-item .blur-controls-btn::before {
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-form-item .blur-minus-btn::before {
  background-image: url(../images/shared/icon-minus-btn.svg);
}
.c-form-item .blur-plus-btn::before {
  background-image: url(../images/shared/icon-plus-btn.svg);
}
.c-form-item .blur-strength {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 12px;
  background: var(--neutral-gray-100, #e9e9e9);
  height: 6px;
  width: 100%;
}
.c-form-item .blur-strength::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 0px;
  width: 20px;
  height: 20px;
  background-color: var(--blue-re-blue-500);
  border-radius: 99px;
  cursor: grab;
}
.c-form-item .form-toggle-secret {
  border-bottom: 0px;
}
.c-form-item .form-toggle-secret .toggle-check-text {
  line-height: 12px;
  padding-top: 6px;
}
.c-form-item .blur-setting-area {
  display: none;
  padding: 12px;
}
.c-form-item .blur-setting-area.is-open {
  display: block;
}
.c-form-item .secret-blur-content-box {
  width: -moz-fit-content;
  width: fit-content;
  margin: 12px auto;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.c-form-item .secret-blur-content-box.img-hide {
  background-color: var(--color-lock-icon);
  width: 100%;
  max-width: 300px;
  min-height: 300px;
}
.c-form-item .secret-blur-content-box::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-lock-icon);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.c-form-item .secret-blur-content-box.is-blur::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.3;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.c-form-item .sercret-icon-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.c-form-item .sercret-text {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
  margin: 24px auto 12px;
}
.c-form-item .sercret-sub-text {
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.c-form-item .uploaded-first-img {
  border-radius: 5px;
  width: 100%;
  max-width: 328px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.c-form-item .toggle-name {
  grid-column: 1;
  grid-row: 1;
  place-self: center start;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text);
}
.c-form-item .toggle-label {
  grid-column: 2;
  grid-row: 1;
  width: 40px;
  height: 24px;
  background-color: var(--color-toggle-off);
  position: relative;
  display: inline-block;
  border-radius: 100px;
  transition: 0.4s;
  box-sizing: border-box;
}
.c-form-item .toggle-label::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: #fff;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
  transition: 0.4s;
}
.c-form-item .toggle-input {
  grid-column: 2;
  grid-row: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 24px;
  border-radius: 100px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.c-form-item .toggle-input:checked + .toggle-label::after {
  left: 18px;
}
.c-form-item .toggle-input:checked + .toggle-label {
  background: var(--color-toggle-on);
}
.c-form-item .toggle-area {
  grid-column: 1 / span 2;
  grid-row: -1;
  margin: 12px 0 0;
}
.c-form-item .toggle-check-text {
  margin: 0 0 16px;
  font-family: "Hiragino Sans";
  font-weight: 500;
  font-size: 10px;
  line-height: 2;
  color: var(--neutral-gray-600);
}
.c-form-item.form-meter-item {
  margin-bottom: 8px;
}
.c-form-item .form-meter {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  gap: 4px;
}
.c-form-item .form-meter-box .meter-count {
  color: var(--neutral-gray-400);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.c-form-item .meter-count-text {
  padding-right: 6px;
}
.c-form-item .meter-title {
  grid-column: 1;
  grid-row: 1;
  font-size: 12px;
  font-family: Hiragino Sans;
  font-weight: 600;
  line-height: 1.6666666667;
  color: var(--color-text);
}
.c-form-item .meter-count {
  grid-column: 1 / span 2;
  grid-row: 3;
  font-size: 10px;
  font-weight: 500;
  line-height: 2;
  color: #acacac;
}
.c-form-item .meter-bar {
  grid-column: 1 / span 2;
  grid-row: 2;
}
.c-form-item meter,
.c-form-item meter::-webkit-meter-bar {
  background: none;
  width: 100%;
  height: 8px;
  border-radius: 16px;
  overflow: hidden;
  border: 0;
  background-color: #e9e9e9;
}
.c-form-item meter::-webkit-meter-optimum-value {
  background: none;
  background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100.68%);
  border-radius: 16px;
}
.c-form-item :-moz-meter-optimum::-moz-meter-bar {
  background: none;
  background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100.68%);
  border-radius: 16px;
}
.c-form-item meter::-webkit-meter-suboptimum-value {
  background: none;
  background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100.68%);
  border-radius: 16px;
}
.c-form-item :-moz-meter-sub-optimum::-moz-meter-bar {
  background: none;
  background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100.68%);
  border-radius: 16px;
}
.c-form-item meter::-webkit-meter-even-less-good-value {
  background: none;
  background-color: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100.68%);
  border-radius: 16px;
}
.c-form-item :-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: none;
  background-color: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100.68%);
  border-radius: 16px;
}
.c-form-item .form-settlement {
  display: block;
  width: 100%;
  padding: 12px 12px 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid var(--neutral-gray-100);
  background: #fff;
  position: relative;
}
.c-form-item .settlement-title {
  margin: 0 0 8px;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: var(--color-text);
}
.c-form-item .settlement-amount {
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--neutral-gray-400);
}
.c-form-item .settlement-toggle-label {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 40px;
  height: 24px;
  background-color: var(--color-toggle-off);
  border-radius: 100px;
  transition: 0.4s;
  box-sizing: border-box;
}
.c-form-item .settlement-toggle-label::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: #fff;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
  transition: 0.4s;
}
.c-form-item .settlement-toggle-input {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 40px;
  height: 24px;
  border-radius: 100px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.c-form-item
  .settlement-toggle-input:checked
  + .settlement-toggle-label::after {
  left: 18px;
}
.c-form-item .settlement-toggle-input:checked + .settlement-toggle-label {
  background: var(--color-toggle-on);
}
.c-form-item .settlement-text {
  padding: 9px 0;
  font-family: "Hiragino Sans";
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text);
  text-align: right;
}
.c-form-item .form-notice-list {
  font-family: "Hiragino Sans";
  font-weight: 500;
  font-size: 10px;
  line-height: 2;
  color: var(--neutral-gray-600);
  text-indent: -1em;
  padding-left: 1em;
}
.c-form-item .settlement-input-wrap {
  position: relative;
}
.c-form-item .settlement-input-box {
  display: flex;
  align-items: center;
  width: 114.2857142857%;
  transform: scale(0.875);
  transform-origin: 0 0;
  position: relative;
}
.c-form-item .settlement-input {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  font-family: "Hiragino Sans";
  display: flex;
  width: 100%;
  height: 36.5714285714px;
  padding: 9px 0;
  border: 0;
  background-color: transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  text-align: right;
  cursor: pointer;
}
.c-form-item .settlement-input::-webkit-inner-spin-button,
.c-form-item .settlement-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  margin: 0;
}
.c-form-item .settlement-input::-moz-placeholder {
  font-size: 16px;
  color: #c6c6c8;
}
.c-form-item .settlement-input::placeholder {
  font-size: 16px;
  color: #c6c6c8;
}
.c-form-item .settlement-input:focus {
  outline: 0;
}
.c-form-item .settlement-input:focus::-moz-placeholder {
  font-size: 0;
}
.c-form-item .settlement-input:focus::placeholder {
  font-size: 0;
}
.c-form-item .settlement-yen {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}
.open-detail-setting {
  display: flex;
  align-items: center;
  -moz-column-gap: 12px;
  column-gap: 12px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  color: var(--neutral-gray-800, #363636);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 12px;
  position: relative;
}
.open-detail-setting::after {
  content: "";
  width: 12px;
  height: 12px;
  display: block;
  background-color: var(--neutral-gray-800, #363636);
  -webkit-mask-image: url(/images/shared/icon-arrow.svg);
  mask-image: url(/images/shared/icon-arrow.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(90deg);
}
.open-detail-setting.open {
  margin-bottom: 32px;
}
.open-detail-setting.open::after {
  transform: rotate(-90deg);
}
@media screen and (min-width: 600px) {
  .c-form-item .form-label {
    font-size: 16px;
    line-height: 24px;
  }
  .c-form-item.upload-form-item {
    margin-bottom: 20px;
  }
  .c-form-item .form-input-box {
    width: 114.2857142857%;
    transform: scale(0.875);
  }
  .c-form-item .form-input {
    height: 52.5714285714px;
    padding: 13.7142857143px;
    box-shadow: inset 0 0 0 1.1428571429px var(--neutral-gray-100);
    border-radius: 5.7142857143px;
  }
  .c-form-item .form-password {
    height: 52.5714285714px;
  }
  .c-form-item .form-textarea-box {
    width: 114.2857142857%;
    min-height: 102.8571428571px;
    transform: scale(0.875);
  }
  .c-form-item .form-textarea {
    min-height: 102.8571428571px;
    padding: 13.7142857143px;
    box-shadow: inset 0 0 0 1.1428571429px var(--neutral-gray-100);
    border-radius: 5.7142857143px;
  }
  .c-form-item .meter-title {
    font-size: 14px;
    line-height: 22px;
  }
  .c-form-item .meter-count {
    font-size: 12px;
    line-height: 20px;
  }
  .c-form-item .form-textarea-count {
    font-size: 12px;
  }
  .c-form-item .toggle-name {
    font-size: 14px;
    line-height: 22px;
  }
  .c-form-item .toggle-check-text {
    font-size: 12px;
  }
  .c-form-item .form-settlement {
    padding: 16px 12px 8px;
    margin-bottom: 16px;
  }
  .c-form-item .settlement-title {
    font-size: 14px;
  }
  .c-form-item .settlement-amount {
    font-size: 14px;
  }
  .c-form-item .form-notice-list {
    font-size: 12px;
    line-height: 1.66667;
  }
  .c-form-item .blur-radio-item label {
    font-size: 14px;
  }
  .open-detail-setting {
    font-size: 14px;
    line-height: 14px;
  }
  .open-detail-setting::after {
    width: 14px;
    height: 14px;
  }
}
.c-btn-submit {
  display: block;
  width: 100%;
  max-width: 328px;
  padding: 15px 36px;
  margin: 0 auto;
  border-radius: 8px;
  background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
  font-size: 14px;
  font-family: Hiragino Sans;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.c-btn-submit:disabled {
  opacity: 0.5;
}
.c-btn-submit:not(:disabled)::before {
  content: "";
  background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}
.c-btn-submit:not(:disabled)::after {
  content: "";
  background-image: linear-gradient(95deg, #ea2ce2 0%, #ff8d4e 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: opacity 0.2s ease;
  opacity: 0;
}
@media (hover: none) {
  .c-btn-submit:not(:disabled) {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-btn-submit:not(:disabled):active::after {
    opacity: 1;
  }
}
@media (hover: hover) {
  .c-btn-submit:not(:disabled) {
    backface-visibility: hidden;
  }
  .c-btn-submit:not(:disabled):hover::after {
    opacity: 1;
  }
  .c-btn-submit:not(:disabled):active::after {
    opacity: 1;
  }
}
.not-edit {
  opacity: 0.5;
  pointer-events: none;
}
.withdraw-btn {
  display: block;
  color: var(--red-red-700, #f54338);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  padding: 9px 32px;
  width: 100%;
  max-width: 328px;
  margin: 40px auto 0;
  border-radius: 10px;
  border: 1px solid var(--red-red-700, #f54338);
  text-align: center;
  cursor: pointer;
}
@media screen and (min-width: 1025px) {
  .c-form-item.upload-form-item {
    margin-bottom: 20px;
  }
  .open-detail-setting {
    margin-top: 36px;
  }
}
/*===============================
  ボタン - hover,active,disabled
================================*/
.c-twbtn-white {
  transition: opacity 0.2s ease;
}
@media (hover: none) {
  .c-twbtn-white {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-twbtn-white:active {
    position: relative;
    top: 4px;
    opacity: 0.8;
    box-shadow: none;
  }
}
@media (hover: hover) {
  .c-twbtn-white {
    backface-visibility: hidden;
  }
  .c-twbtn-white:hover {
    opacity: 0.8;
  }
  .c-twbtn-white:active {
    position: relative;
    top: 4px;
    opacity: 0.8;
    box-shadow: none;
  }
}
.c-twbtn-request {
  cursor: pointer;
}
@media (hover: none) {
  .c-twbtn-request {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-twbtn-request:active {
    position: relative;
    top: 4px;
    box-shadow: none;
    background-image: linear-gradient(90deg, #ffbab0 0%, #f8a6ff 100%);
  }
}
@media (hover: hover) {
  .c-twbtn-request {
    backface-visibility: hidden;
  }
  .c-twbtn-request:hover {
    background-image: linear-gradient(90deg, #ffbab0 0%, #f8a6ff 100%);
    box-shadow: 0px 4px 0px #951461;
  }
  .c-twbtn-request:active {
    position: relative;
    top: 4px;
    box-shadow: none;
    background-image: linear-gradient(90deg, #ffbab0 0%, #f8a6ff 100%);
  }
}
.watch-btn {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background-color: var(--color-text);
  padding: 6px 16px;
  border-radius: 10px;
  position: relative;
}
.watch-btn::before {
  content: "+";
  display: inline-block;
  margin-right: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  position: relative;
  bottom: 1px;
}
@media screen and (min-width: 600px) {
  .watch-btn {
    font-size: 14px;
    line-height: 22px;
    padding: 6px 16.3px;
  }
}
.watch-btn.on-follow {
  border: 1px solid #dcdcdc;
  background-color: #fff;
  box-shadow: 0 2px 0 #dcdcdc;
  color: #333;
  padding: 5px 15px;
}
.watch-btn.on-follow::before {
  content: none;
}
.watch-btn.on-follow .release-watch {
  display: none;
}
@media (hover: none) {
  .watch-btn.on-follow {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .watch-btn.on-follow:active {
    top: 4px;
    box-shadow: none;
  }
}
@media (hover: hover) {
  .watch-btn.on-follow {
    backface-visibility: hidden;
  }
  .watch-btn.on-follow:hover {
    border: 1px solid #f1c0c0;
    background-color: #ffe1df;
    box-shadow: 0px 2px 0px 0px #f1c0c0;
  }
  .watch-btn.on-follow:hover .being-watched {
    display: none;
  }
  .watch-btn.on-follow:hover .release-watch {
    display: block;
    color: var(--color-delete-btn);
  }
  .watch-btn.on-follow:active {
    top: 4px;
    box-shadow: none;
  }
}
.c-detail-item .watch-btn.on-follow,
.following-contents .watch-btn.on-follow {
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-radius: 10px;
  box-shadow: none;
  border: none;
  padding: 6px 15px;
}
.c-detail-item .watch-btn.on-follow::before,
.following-contents .watch-btn.on-follow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid transparent;
  background-image: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  background-origin: border-box;
  background-clip: border-box;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@media (hover: none) {
  .c-detail-item .watch-btn.on-follow,
  .following-contents .watch-btn.on-follow {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-detail-item .watch-btn.on-follow:active,
  .following-contents .watch-btn.on-follow:active {
    top: 0;
    box-shadow: none;
  }
}
@media (hover: hover) {
  .c-detail-item .watch-btn.on-follow,
  .following-contents .watch-btn.on-follow {
    backface-visibility: hidden;
  }
  .c-detail-item .watch-btn.on-follow:hover,
  .following-contents .watch-btn.on-follow:hover {
    border: none;
    background-color: #fff;
    box-shadow: none;
  }
  .c-detail-item .watch-btn.on-follow:hover .being-watched,
  .following-contents .watch-btn.on-follow:hover .being-watched {
    display: none;
  }
  .c-detail-item .watch-btn.on-follow:hover .release-watch,
  .following-contents .watch-btn.on-follow:hover .release-watch {
    display: block;
    color: var(--color-delete-btn);
  }
  .c-detail-item .watch-btn.on-follow:active,
  .following-contents .watch-btn.on-follow:active {
    top: 0;
    box-shadow: none;
  }
}
/*===============================
  ローディング
================================*/
.c-loading .background {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.7;
  left: 0;
  top: 0;
}
.c-loading .loader {
  width: 150px;
  height: 100px;
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.c-loading #loadingCirclesA {
  position: relative;
  width: 90px;
  height: 90px;
  margin: auto;
}
.c-loading .loading_circleA {
  position: absolute;
  background-color: #dbeafa;
  height: 14px;
  width: 14px;
  border-radius: 7px;
  animation-name: l_circleA;
  animation-duration: 0.825s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
.c-loading #loading_circleA_01 {
  left: 0;
  top: 38px;
  animation-delay: 0.1375s;
}
.c-loading #loading_circleA_02 {
  left: 12px;
  top: 12px;
  animation-delay: 0.275s;
}
.c-loading #loading_circleA_03 {
  left: 38px;
  top: 0;
  animation-delay: 0.4125s;
}
.c-loading #loading_circleA_04 {
  right: 12px;
  top: 12px;
  animation-delay: 0.55s;
}
.c-loading #loading_circleA_05 {
  right: 0;
  top: 38px;
  animation-delay: 0.6875s;
}
.c-loading #loading_circleA_06 {
  right: 12px;
  bottom: 12px;
  animation-delay: 0.825s;
}
.c-loading #loading_circleA_07 {
  left: 38px;
  bottom: 0;
  animation-delay: 0.9625s;
}
.c-loading #loading_circleA_08 {
  left: 12px;
  bottom: 12px;
  animation-delay: 1.1s;
}
@keyframes l_circleA {
  0% {
    background-color: #599ce7;
  }
  100% {
    background-color: #dbeafa;
  }
}
/*===============================
  トースト
================================*/
.tw-toast-area {
  position: fixed;
  top: 64px;
  right: 0;
  z-index: 10000;
}
@media screen and (min-width: 1025px) {
  .tw-toast-area {
    top: 32px;
  }
}
[class^="c-toast"] {
  width: 91.4666666667vw;
  max-width: 343px;
  padding: 16px 44px 16px 12px;
  margin-right: 4.2666666667vw;
  transform: translateX(calc(100% + 4.2666666667vw));
  background-color: #d4f3de;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
}
[class^="c-toast"].show {
  transform: translateX(0);
}
[class^="c-toast"] + [class^="c-toast"] {
  margin-top: 16px;
}
[class^="c-toast"] .btn-close {
  display: block;
  width: 30px;
  height: 30px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
[class^="c-toast"] .btn-close::before {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #2fa555;
  -webkit-mask-image: url(../images/shared/icon-close.svg);
  mask-image: url(../images/shared/icon-close.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  text-indent: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 1025px) {
  [class^="c-toast"] {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 246px;
    max-width: 532px;
    margin-right: 32px;
    margin-left: auto;
    transform: translateX(calc(100% + 32px));
  }
}
.c-toast-success {
  background-color: #d4f3de;
}
.c-toast-success .success-text {
  padding-left: 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5714285714;
  color: #2fa555;
  position: relative;
}
.c-toast-success .success-text::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #2fa555;
  -webkit-mask-image: url(../images/shared/icon-success.svg);
  mask-image: url(../images/shared/icon-success.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
.c-toast-success .btn-close::before {
  background-color: #2fa555;
}
.c-toast-error {
  background-color: #ffcbc8;
}
.c-toast-error .error-text {
  padding-left: 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5714285714;
  color: #f54338;
  position: relative;
}
.c-toast-error .error-text::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #f54338;
  -webkit-mask-image: url(../images/shared/icon-error.svg);
  mask-image: url(../images/shared/icon-error.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.c-toast-error .btn-close::before {
  background-color: #f54338;
}
/*===============================
  新着一覧タブ
================================*/
.new-arrival-tab {
  width: 100%;
  max-width: 610px;
  margin: 0 auto;
  position: sticky;
  top: 48px;
  left: 0;
  z-index: 99;
  border-bottom: 1px solid var(--color-reaction-border);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
}
.new-arrival-tab-inner ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
}
.new-arrival-tab-menu {
  text-align: center;
}
.new-arrival-tab-link {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #acacac;
  display: inline-block;
  padding: 14px 0 12px;
  position: relative;
}
.new-arrival-tab-link.on {
  color: var(--color-text);
}
.new-arrival-tab-link.on::before {
  content: "";
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--neutral-gray-800, #363636);
  position: absolute;
  bottom: -1px;
  left: 0px;
}
.new-arrival-tab-link .new-arrival-follow {
  padding-left: 8px;
}
@media screen and (min-width: 600px) {
  .new-arrival-tab {
    top: 0;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    margin-top: 12px;
    max-width: 100%;
  }
  .new-arrival-tab-link {
    font-size: 16px;
    line-height: 24px;
    padding: 16px 0 14px;
  }
}
@media screen and (min-width: 1025px) {
  .new-arrival-tab {
    margin-top: 24px;
    background: rgba(243, 247, 250, 0.85);
    border: none;
  }
}
/*===============================
  印刷詳細
================================*/
::-webkit-full-page-media,
:future,
:root .c-detail-item .print-state {
  padding: 0 8px 0 24px;
  line-height: 1.6;
  height: 1.6em;
}
@media screen and (min-width: 1025px) {
  ::-webkit-full-page-media,
  :future,
  :root .c-detail-item .print-state {
    line-height: 1.5;
    height: 1.5em;
  }
}
.c-detail-item .detail-wrap {
  width: 92%;
  margin: 0 auto;
}
.c-detail-item .detail-profile {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  position: relative;
  align-items: center;
  margin-bottom: 24px;
}
.c-detail-item .detail-profile .btn-item {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  place-content: center start;
  place-items: center;
  margin-left: 12px;
  text-align: right;
  position: relative;
}
.c-detail-item .detail-profile .user-menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  border-radius: 999px;
  transition: background-color 0.1s ease;
}
@media (hover: none) {
  .c-detail-item .detail-profile .user-menu-btn {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-detail-item .detail-profile .user-menu-btn:active {
    background-color: #f6f6f6;
  }
}
@media (hover: hover) {
  .c-detail-item .detail-profile .user-menu-btn {
    backface-visibility: hidden;
  }
  .c-detail-item .detail-profile .user-menu-btn:hover {
    background-color: #f6f6f6;
  }
  .c-detail-item .detail-profile .user-menu-btn:active {
    background-color: #f6f6f6;
  }
}
.c-detail-item .detail-profile .user-menu-btn::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--neutral-gray-400);
  -webkit-mask-image: url(/images/ellipsis-icon.svg);
  mask-image: url(/images/ellipsis-icon.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 1025px) {
  .c-detail-item .detail-profile .user-menu-btn {
    margin-left: 12px;
  }
}
.c-detail-item .detail-profile .user-menu {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15);
  text-align: left;
  overflow: hidden;
}
@media screen and (min-width: 600px) {
  .c-detail-item .detail-profile .user-menu {
    top: 1px;
  }
}
.c-detail-item .detail-profile .private-user-menu {
  display: flex;
  align-items: center;
  -moz-column-gap: 16px;
  column-gap: 16px;
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 10;
}
.c-detail-item .detail-profile .private-user-menu .user-menu-list {
  width: 20px;
  height: 20px;
  transition: opacity 0.2s ease, background-color 0.1s ease;
}
@media (hover: none) {
  .c-detail-item .detail-profile .private-user-menu .user-menu-list {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-detail-item .detail-profile .private-user-menu .user-menu-list:active {
    background-color: #fff;
    opacity: 0.7;
  }
}
@media (hover: hover) {
  .c-detail-item .detail-profile .private-user-menu .user-menu-list {
    backface-visibility: hidden;
  }
  .c-detail-item .detail-profile .private-user-menu .user-menu-list:hover {
    background-color: #fff;
    opacity: 0.7;
  }
  .c-detail-item .detail-profile .private-user-menu .user-menu-list:active {
    background-color: #fff;
    opacity: 0.7;
  }
}
.c-detail-item .detail-profile .private-user-menu .user-menu-list a,
.c-detail-item .detail-profile .private-user-menu .user-menu-list button {
  padding: 0;
  height: 100%;
}
.c-detail-item .detail-profile .private-user-menu .user-menu-list a::before,
.c-detail-item
  .detail-profile
  .private-user-menu
  .user-menu-list
  button::before {
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-detail-item .detail-profile .user-menu-list {
  width: 100%;
  transition: background-color 0.1s ease;
}
@media (hover: none) {
  .c-detail-item .detail-profile .user-menu-list {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-detail-item .detail-profile .user-menu-list:active {
    background-color: var(--neutral-gray-50);
  }
}
@media (hover: hover) {
  .c-detail-item .detail-profile .user-menu-list {
    backface-visibility: hidden;
  }
  .c-detail-item .detail-profile .user-menu-list:hover {
    background-color: var(--neutral-gray-50);
  }
  .c-detail-item .detail-profile .user-menu-list:active {
    background-color: var(--neutral-gray-50);
  }
}
.c-detail-item .detail-profile .user-menu-list button,
.c-detail-item .detail-profile .user-menu-list a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #767676;
  white-space: nowrap;
  line-height: 22px;
  position: relative;
  padding-left: 32px;
  padding: 12px 16px 12px 48px;
  width: 100%;
  text-align: left;
}
.c-detail-item .detail-profile .user-menu-list button::before,
.c-detail-item .detail-profile .user-menu-list a::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #767676;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}
.c-detail-item .detail-profile .user-menu-block button::before,
.c-detail-item .detail-profile .user-menu-block a::before {
  -webkit-mask-image: url(/images/shared/icon-block.svg);
  mask-image: url(/images/shared/icon-block.svg);
}
.c-detail-item .detail-profile .user-menu-block button.on-block::before,
.c-detail-item .detail-profile .user-menu-block a.on-block::before {
  -webkit-mask-image: url(/images/shared/icon-unblock.svg);
  mask-image: url(/images/shared/icon-unblock.svg);
}
.c-detail-item .detail-profile .user-menu-report button::before,
.c-detail-item .detail-profile .user-menu-report a::before {
  -webkit-mask-image: url(/images/shared/icon-report.svg);
  mask-image: url(/images/shared/icon-report.svg);
}
.c-detail-item .detail-profile .user-menu-edit button::before,
.c-detail-item .detail-profile .user-menu-edit a::before {
  -webkit-mask-image: url(/images/shared/icon-edit.svg);
  mask-image: url(/images/shared/icon-edit.svg);
}
.c-detail-item .detail-profile .user-menu-delete button,
.c-detail-item .detail-profile .user-menu-delete a {
  color: #f54338;
}
.c-detail-item .detail-profile .user-menu-delete button::before,
.c-detail-item .detail-profile .user-menu-delete a::before {
  background-color: #f54338;
  -webkit-mask-image: url(/images/shared/icon-delete-v2.svg);
  mask-image: url(/images/shared/icon-delete-v2.svg);
}
.c-detail-item .detail-profile .user-menu-stop button {
  color: #f54338;
}
.c-detail-item .detail-profile .user-menu-stop button::before {
  background-color: #f54338;
  -webkit-mask-image: url(/images/shared/icon-stop.svg);
  mask-image: url(/images/shared/icon-stop.svg);
}
.c-detail-item .detail-profile-private-content .author-name {
  margin: 0 58px 0 8px;
}
.c-detail-item .private-content-message {
  width: 100%;
  border: 1px solid #ff8d4e;
  background: linear-gradient(91deg, #fe971f 0.47%, #ff6464 99.44%);
  padding: 7px 8px;
  margin: -12px auto 12px;
}
.c-detail-item .private-content-text {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}
.c-detail-item .detail-author-info {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  place-content: center start;
  align-items: center;
}
.c-detail-item .detail-image {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
.c-detail-item .detail-image img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 0;
  object-position: 50% 0;
}
.c-detail-item .author-name {
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  margin: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.c-detail-item .detail-info {
  margin: 0 0 16px;
}
.c-detail-item .detail-title {
  margin: 0 auto 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--neutral-gray-800);
}
.c-detail-item .author-text-box {
  max-height: 61px;
  overflow: hidden;
}
.c-detail-item .author-text-box.is-open {
  max-height: 100% !important;
}
.c-detail-item .author-text {
  font-family: "Hiragino Sans";
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text);
}
.c-detail-item .author-text > a {
  text-decoration: underline;
}
.c-detail-item .more-btn-wrap {
  text-align: right;
  margin-top: -21px;
}
.c-detail-item .more-btn-wrap.is-open {
  margin-top: 0;
}
.c-detail-item .btn-more {
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-brand-sub);
  background-color: #fff;
  box-shadow: -26px 0px 12px 0px #fff;
}
.c-detail-item .print-tag-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.c-detail-item .user-action-box {
  display: flex;
  align-items: baseline;
  margin-left: auto;
}
.c-detail-item .btn-favorite {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 10px;
  color: var(--neutral-gray-400);
}
.c-detail-item .btn-favorite::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  background-color: var(--neutral-gray-400);
  -webkit-mask-image: url(/images/shared/icon-favorites.svg);
  mask-image: url(/images/shared/icon-favorites.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  margin: 0 auto;
}
.c-detail-item .btn-favorite.on-favorite {
  color: var(--color-on-favorite);
}
.c-detail-item .btn-favorite.on-favorite::before {
  background-color: var(--color-on-favorite);
  -webkit-mask-image: url(/images/on-favorite.svg);
  mask-image: url(/images/on-favorite.svg);
}
.c-detail-item .btn-x-share {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 10px;
  color: var(--neutral-gray-400);
  margin-left: 16px;
  cursor: pointer;
}
.c-detail-item .btn-x-share::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  background-color: var(--neutral-gray-400);
  -webkit-mask-image: url(/images/shared/icon-x.svg);
  mask-image: url(/images/shared/icon-x.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  margin: 0 auto;
}
.c-detail-item .btn-share {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 10px;
  color: var(--neutral-gray-400);
  margin-left: 16px;
}
.c-detail-item .btn-share::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  background-color: var(--neutral-gray-400);
  -webkit-mask-image: url(/images/shared/icon-print.svg);
  mask-image: url(/images/shared/icon-print.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  margin: 0 auto;
}
.c-detail-item .print-total-wrap {
  margin-left: 16px;
}
.c-detail-item .print-total-count {
  font-weight: 500;
  font-size: 13px;
  color: var(--neutral-gray-400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.c-detail-item .print-total-count::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--neutral-gray-400);
  -webkit-mask-image: url(/images/icon-total-printout.svg);
  mask-image: url(/images/icon-total-printout.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  margin-right: 6px;
}
.c-detail-item .print-state {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 8px 2px 24px;
  border: 1px solid #fe7878;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: #fe7878;
  position: relative;
  text-align: center;
  line-height: 14px;
}
.c-detail-item .print-state::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: #fe7878;
  -webkit-mask-image: url(/images/shared/icon-public.svg);
  mask-image: url(/images/shared/icon-public.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.c-detail-item .print-state.locked::after {
  -webkit-mask-image: url(/images/shared/icon-lock.svg);
  mask-image: url(/images/shared/icon-lock.svg);
}
.c-detail-item .print-state.one-cushion::after {
  -webkit-mask-image: url(/images/shared/icon-one-cushion.svg);
  mask-image: url(/images/shared/icon-one-cushion.svg);
}
.c-detail-item .print-state.password::after {
  -webkit-mask-image: url(/images/shared/icon-lock.svg);
  mask-image: url(/images/shared/icon-lock.svg);
}
.c-detail-item .print-state.secret::after {
  -webkit-mask-image: url(/images/shared/icon-secret.svg);
  mask-image: url(/images/shared/icon-secret.svg);
}
.c-detail-item .print-state.regular-sale {
  border: 1px solid transparent;
  background: linear-gradient(95deg, #59c0fb 30%, #4666d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-detail-item .print-state.regular-sale::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(95deg, #59c0fb 0%, #59c0fb 50%, #4666d9 100%)
    border-box border-box;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.c-detail-item .print-state.regular-sale::after {
  background-color: transparent;
  background: linear-gradient(100deg, #59c0fb 0%, #4666d9 100%);
  -webkit-mask-image: url(/images/shared/icon-cart.svg);
  mask-image: url(/images/shared/icon-cart.svg);
}
.c-detail-item .print-state.limited-sale {
  border: 1px solid transparent;
  background: linear-gradient(95deg, #ff8d4e 30%, #ea2ce2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-detail-item .print-state.limited-sale::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(95deg, #ff8d4e 0%, #ff8d4e 50%, #ea2ce2 100%)
    border-box border-box;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.c-detail-item .print-state.limited-sale::after {
  background-color: transparent;
  background: linear-gradient(100deg, #ff8d4e 0%, #ea2ce2 100%);
  -webkit-mask-image: url(/images/shared/icon-cart.svg);
  mask-image: url(/images/shared/icon-cart.svg);
}
.c-detail-item .detail-area-others,
.c-detail-item .detail-area-cushion,
.c-detail-item .detail-area-follower {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.c-detail-item .detail-area-item,
.c-detail-item .detail-area-others-item,
.c-detail-item .detail-area-cushion-item,
.c-detail-item .detail-area-follower-item {
  position: relative;
  border-radius: 8px;
}
.c-detail-item .detail-area-item:first-child::before,
.c-detail-item .detail-area-others-item:first-child::before,
.c-detail-item .detail-area-cushion-item:first-child::before,
.c-detail-item .detail-area-follower-item:first-child::before {
  content: "";
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  border-radius: 10px;
  position: absolute;
  bottom: -1px;
  left: 0px;
  z-index: 1;
}
.c-detail-item .detail-area-item img,
.c-detail-item .detail-area-others-item img,
.c-detail-item .detail-area-cushion-item img,
.c-detail-item .detail-area-follower-item img {
  width: 100%;
  border-radius: 10px;
}
.c-detail-item .detail-area-cushion-item:first-child::before {
  display: none;
}
.c-detail-item .detail-area-follower-item {
  overflow: hidden;
  border-radius: 10px;
}
.c-detail-item .detail-area-follower-item.hide-filter img {
  filter: none;
}
.c-detail-item .detail-area-follower-item img {
  filter: blur(15px);
}
.c-detail-item .detail-blur-area .detail-area-others-item,
.c-detail-item .detail-blur-area .detail-blur-item {
  position: relative;
  overflow: hidden;
}
.c-detail-item .detail-blur-area .detail-area-others-item::after,
.c-detail-item .detail-blur-area .detail-blur-item::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.3;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
}
.c-detail-item .show-btn-others,
.c-detail-item .show-btn-cushion,
.c-detail-item .btn-show-others,
.c-detail-item .show-btn-follower {
  display: block;
  margin: -18px auto 0px;
  padding: 8px 16px;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--neutral-gray-800);
  border-radius: 5px;
  border: 1px solid var(--neutral-gray-800);
  position: relative;
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (hover: none) {
  .c-detail-item .show-btn-others,
  .c-detail-item .show-btn-cushion,
  .c-detail-item .btn-show-others,
  .c-detail-item .show-btn-follower {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-detail-item .show-btn-others:active,
  .c-detail-item .show-btn-cushion:active,
  .c-detail-item .btn-show-others:active,
  .c-detail-item .show-btn-follower:active {
    background-color: var(--neutral-gray-800);
    color: #fff;
  }
}
@media (hover: hover) {
  .c-detail-item .show-btn-others,
  .c-detail-item .show-btn-cushion,
  .c-detail-item .btn-show-others,
  .c-detail-item .show-btn-follower {
    backface-visibility: hidden;
  }
  .c-detail-item .show-btn-others:hover,
  .c-detail-item .show-btn-cushion:hover,
  .c-detail-item .btn-show-others:hover,
  .c-detail-item .show-btn-follower:hover {
    background-color: var(--neutral-gray-800);
    color: #fff;
  }
  .c-detail-item .show-btn-others:active,
  .c-detail-item .show-btn-cushion:active,
  .c-detail-item .btn-show-others:active,
  .c-detail-item .show-btn-follower:active {
    background-color: var(--neutral-gray-800);
    color: #fff;
  }
}
.c-detail-item .cushion-container,
.c-detail-item .pass-container,
.c-detail-item .secret-container {
  position: relative;
}
.c-detail-item .secret-container {
  margin-bottom: 22px;
}
.c-detail-item .warning-box {
  width: 100%;
  height: 100%;
  background-color: var(--color-warning-bg);
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.c-detail-item .warning-box .show-btn-cushion {
  margin-top: 20px;
}
.c-detail-item .warning-img {
  display: block;
}
.c-detail-item .warning-text {
  display: block;
  margin-top: 8px;
}
.c-detail-item .follower-btn-box {
  width: 100%;
  padding: 12px 16px;
  margin: 16px auto;
  background-color: var(--color-warning-bg);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.c-detail-item .follower-btn-box .show-btn-follower {
  margin-top: 12px;
}
.c-detail-item .unfollower-btn-box {
  padding-bottom: 16px;
}
.c-detail-item .follower-btn-text {
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-limit-text);
  display: flex;
  align-items: center;
  position: relative;
}
.c-detail-item .follower-btn-text::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--color-lock);
  -webkit-mask-image: url(/images/shared/icon-lock.svg);
  mask-image: url(/images/shared/icon-lock.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-right: 8px;
}
.c-detail-item .twipri-btn {
  width: 94%;
  max-width: 296px;
  margin: 0 auto;
  text-align: center;
}
.c-detail-item .twipri-btn a {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  font-family: "Hiragino Sans";
  font-weight: 600;
  line-height: 20px;
  border-radius: 10px;
  background-color: var(--color-brand-sub);
  box-shadow: 0px 4px 0px var(--color-twipri-btn-shadow);
}
.c-detail-item .twipri-btn a::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #fff;
  -webkit-mask-image: url(/images/twitter-blue.svg);
  mask-image: url(/images/twitter-blue.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-right: 8px;
}
.c-detail-item .follower-text {
  font-family: "Hiragino Sans";
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-limit-text);
  margin: 8px auto 16px;
}
.c-detail-item .pass-box {
  width: 100%;
  margin: 12px auto;
}
.c-detail-item .pass-box .pass-form {
  width: 100%;
  font-family: "Hiragino Sans";
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid var(--color-pass-form-border);
}
.c-detail-item .pass-box .pass-form:focus,
.c-detail-item .pass-box .pass-form:focus-visible {
  outline: 0px;
  border: 1px solid var(--color-brand);
}
.c-detail-item .pass-box .error-text {
  font-family: "Hiragino Sans";
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-error);
  text-align: center;
  margin-top: 8px;
}
.c-detail-item .pass-submit[type="submit"] {
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  background-color: var(--color-brand-sub);
  border-radius: 5px;
  padding: 8px 16px;
  transition: background-color 0.2s ease;
}
@media (hover: none) {
  .c-detail-item .pass-submit[type="submit"] {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-detail-item .pass-submit[type="submit"]:active {
    position: relative;
    background-color: #41bbff;
  }
}
@media (hover: hover) {
  .c-detail-item .pass-submit[type="submit"] {
    backface-visibility: hidden;
  }
  .c-detail-item .pass-submit[type="submit"]:hover {
    background-color: #41bbff;
  }
  .c-detail-item .pass-submit[type="submit"]:active {
    position: relative;
    background-color: #41bbff;
  }
}
.c-detail-item .pass-submit[type="submit"]:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.c-detail-item .pass-lock-box {
  width: 100%;
  height: 100%;
  background-color: var(--color-lock-icon);
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding-top: 18%;
}
.c-detail-item .pass-lock-box .lock-icon {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
}
.c-detail-item .pass-lock-box .lock-icon::before {
  content: "";
  display: block;
  width: 39px;
  height: 39px;
  background-color: var(--color-lock-icon);
  -webkit-mask-image: url(/images/shared/icon-lock.svg);
  mask-image: url(/images/shared/icon-lock.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: relative;
  z-index: 2;
}
.c-detail-item .pass-lock-text {
  font-family: "Hiragino Sans";
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  margin-top: 31px;
  text-align: center;
}
.c-detail-item .pass-form-box {
  width: 92%;
  margin: 0 auto;
}
.c-detail-item .pass-form-box .pass-box {
  margin: 16px auto;
}
.c-detail-item .pass-form-box .pass-submit {
  display: block;
  margin: 0 auto;
}
.c-detail-item .secret-lock-box {
  width: 100%;
  height: 100%;
  background-color: var(--color-lock-icon);
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.c-detail-item .secret-lock-box::after {
  content: "";
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  position: absolute;
  border-radius: 5px;
  background-color: var(--color-lock-icon);
  z-index: 2;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
}
.c-detail-item .secret-blur-box {
  background-color: transparent;
}
.c-detail-item .secret-blur-box::after {
  display: none;
}
.c-detail-item .secret-wrap {
  text-align: center;
  position: relative;
  z-index: 3;
  padding-top: 20px;
}
.c-detail-item .secret-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  position: relative;
  margin: 0 auto;
}
.c-detail-item .secret-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90.98deg,
    #8bffc7 0.5%,
    #47f4ff 36.17%,
    #8ba5ff 71.93%,
    #ed82ff 100%
  );
  z-index: 1;
  position: absolute;
}
.c-detail-item .secret-icon::after {
  content: "";
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  position: absolute;
  border-radius: inherit;
  background-color: #fff;
  z-index: 2;
}
.c-detail-item .secret-icon .secret-img {
  display: block;
  width: 31px;
  height: 54px;
  background-color: var(--color-lock-icon);
  -webkit-mask-image: url(/images/q-secret-icon.svg);
  mask-image: url(/images/q-secret-icon.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: relative;
  z-index: 3;
}
.c-detail-item .secret-lock-text {
  font-family: "Hiragino Sans";
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  margin: 24px auto 0px;
}
.c-detail-item .secret-sub-text {
  font-family: "Hiragino Sans";
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  margin: 12px auto 0;
}
.c-detail-item .request-box {
  margin-top: 32px;
}
.c-detail-item .request-text {
  font-family: "Hiragino Sans";
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-reactions-text);
  text-align: center;
  margin-bottom: 19px;
}
.c-detail-item .send-request {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  padding: 4px;
  border-radius: 8px;
  background-image: linear-gradient(90deg, #ff9587 0%, #f587ff 100%);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}
.c-detail-item .send-request::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(/images/shared/icon-request.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: transparent;
  margin-right: 8px;
}
.c-detail-item .hidden {
  display: none;
}
.c-detail-item .hide-before {
  max-width: 100% !important;
}
.c-detail-item .hide-before::before {
  display: none;
}
.c-detail-item .mainte-text {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--color-lock-icon);
  margin-top: 24px;
}
.c-detail-item .detail-settlement-area {
  width: 100%;
}
.c-detail-item .detail-price {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  width: -moz-fit-content;
  width: fit-content;
  margin: 18px auto 16px 0;
}
.c-detail-item .print-deadline {
  grid-column: 1 / span 2;
  grid-row: 1;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--neutral-gray-800);
}
.c-detail-item .print-price {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: var(--neutral-gray-800);
}
.c-detail-item .print-yen {
  margin-left: 1px;
  font-size: 14px;
}
.c-detail-item .print-inventory {
  grid-column: 2;
  grid-row: 2;
  place-self: center start;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #f54338;
}
.c-detail-item .purchase-price {
  margin: 0 0 0 12px;
  font-size: 12px;
}
.c-detail-item .purchase-yen {
  margin-left: 1px;
  font-size: 10px;
}
.c-detail-item .detail-purchase {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 60px;
  z-index: 10;
}
.c-detail-item .btn-purchase {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 345px;
  padding: 16px 36px;
  margin: 0 auto;
  border-radius: 8px;
  background: linear-gradient(95deg, #ff8d4e 0%, #ea2ce2 100%);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.c-detail-item .btn-purchase:disabled {
  background: var(--neutral-gray-500);
  box-shadow: none;
}
.c-detail-item .detail-request-area {
  margin: 24px 0 0;
}
.c-detail-item .btn-request {
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  place-items: center;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 195px;
  padding: 4px 16px 4px 16px;
  margin: 0 auto;
  border-radius: 8px;
  background-image: linear-gradient(90deg, #ff9587 0%, #f587ff 100%);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6666666667;
  color: #fff;
  pointer-events: auto;
  position: relative;
  transition: top 0.2s ease;
}
.c-detail-item .btn-request::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url(../images/shared/icon-request.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.c-detail-item .btn-request.already-request {
  background-image: none;
  background-color: #969696;
  box-shadow: none;
}
.c-detail-item .btn-request.already-request::before {
  content: "";
  width: 14px;
  height: 14px;
  background-image: none;
  background-color: #fff;
  -webkit-mask-image: url(../images/shared/icon-check.svg);
  mask-image: url(../images/shared/icon-check.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (hover: none) {
  .c-detail-item .btn-request:not(.already-request) {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-detail-item .btn-request:not(.already-request):active {
    background-image: linear-gradient(90deg, #ffbab0 0%, #f8a6ff 100%);
    box-shadow: none;
    top: 4px;
  }
}
@media (hover: hover) {
  .c-detail-item .btn-request:not(.already-request) {
    backface-visibility: hidden;
  }
  .c-detail-item .btn-request:not(.already-request):hover {
    background-image: linear-gradient(90deg, #ffbab0 0%, #f8a6ff 100%);
  }
  .c-detail-item .btn-request:not(.already-request):active {
    background-image: linear-gradient(90deg, #ffbab0 0%, #f8a6ff 100%);
    box-shadow: none;
    top: 4px;
  }
}
.c-detail-item .print-number-qr-area {
  width: 268px;
  margin: 0 auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14));
}
.c-detail-item .print-number-qr {
  padding: 16px 16px 12px;
  border-radius: 10px 10px 0 0;
  background: #fff;
}
.c-detail-item .print-size-label {
  color: var(--neutral-gray-800, #363636);
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 10px;
  border-radius: 4px;
  background: #f0f0f0;
  padding: 4px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 4px auto 0;
}
.c-detail-item .print-number-title {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--neutral-gray-800);
  text-align: center;
}
.c-detail-item .print-number-preparing {
  margin: 26px 0 12px;
  color: var(--neutral-gray-500);
  text-align: center;
  font-family: Hiragino Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.66667;
}
.c-detail-item .print-number-image {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.c-detail-item .print-number-code {
  margin: 0 auto;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--neutral-gray-800);
  text-align: center;
}
.c-detail-item .print-number-quantity {
  margin: 2px auto 0;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}
.c-detail-item .print-number-lock {
  margin: 16px 0 8px;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 16px;
  color: var(--neutral-gray-500);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-detail-item .print-number-lock::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: var(--neutral-gray-500);
  -webkit-mask-image: url(/images/shared/icon-lock.svg);
  mask-image: url(/images/shared/icon-lock.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-right: 9px;
}
.c-detail-item .print-number-help {
  font-size: 13px;
  font-family: Hiragino Sans;
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-gray-400);
  text-align: center;
  margin-top: 22px;
}
.c-detail-item .print-number-help > a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: var(--neutral-gray-600, #767676);
  text-decoration-line: underline;
  text-decoration-thickness: 0.5px;
}
.c-detail-item .print-number-help > a::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: var(--neutral-gray-500);
  -webkit-mask-image: url(/images/question-icon.svg);
  mask-image: url(/images/question-icon.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.c-detail-item .print-number-download {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  font-size: 10px;
  font-family: Hiragino Sans;
  font-weight: 600;
  line-height: 1;
  color: var(--neutral-gray-600);
  text-align: center;
  position: relative;
}
.c-detail-item .print-number-download::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 8px;
  background-color: var(--neutral-gray-600);
  -webkit-mask-image: url(/images/shared/icon-download.svg);
  mask-image: url(/images/shared/icon-download.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
}
.c-detail-item .btn-show-reservation-number {
  color: var(--neutral-gray-600, #767676);
  font-size: 10px;
  font-weight: 600;
  line-height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 8px;
  column-gap: 8px;
  margin: 16px auto;
}
.c-detail-item .btn-show-reservation-number::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(/images/shared/icon-text-copy.svg);
  background-size: cover;
}
.c-detail-item .print-number-mail {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  font-size: 10px;
  font-family: Hiragino Sans;
  font-weight: 600;
  line-height: 1;
  color: var(--neutral-gray-600);
  text-align: center;
  position: relative;
}
.c-detail-item .print-number-mail::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 8px;
  background-color: var(--neutral-gray-600);
  -webkit-mask-image: url(/images/shared/icon-mail.svg);
  mask-image: url(/images/shared/icon-mail.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
}
.c-detail-item .print-number-end {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 24px 16px 8px;
  position: relative;
  z-index: 0;
}
.c-detail-item .print-number-end::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(/images/bg-qr-sp.svg);
  background-size: 268px 64px;
  background-repeat: no-repeat;
  border-radius: 0 0 10px 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.c-detail-item .print-number-period {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
  column-gap: 8px;
}
.c-detail-item .print-number-period::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-color: #fff;
  -webkit-mask-image: url(/images/icon-total-printout.svg);
  mask-image: url(/images/icon-total-printout.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
}
.c-detail-item .print-number-time {
  opacity: 0.7;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.c-detail-item .print-guide-area {
  max-width: 328px;
  margin: 0 auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14));
}
.c-detail-item .print-guide-purchase {
  width: -moz-fit-content;
  width: fit-content;
  padding: 9px 12px;
  margin: 0 auto 16px;
  border-radius: 29px;
  background: var(--neutral-gray-800);
  color: #fff;
  font-family: Hiragino Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.c-detail-item .print-guide {
  padding: 16px 18px 12px;
  border-radius: 10px 10px 0 0;
  background: #fff;
  text-align: center;
}
.c-detail-item .print-guide-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0 0 16px;
}
.c-detail-item .print-guide-image {
  width: 112px;
  height: 80px;
  margin: 0 0 8px;
}
.c-detail-item .print-guide-text {
  color: var(--neutral-gray-600);
  text-align: center;
  font-size: 12px;
  font-family: Hiragino Sans;
  font-weight: 500;
  line-height: 1.66667;
}
.c-detail-item .print-guide-help {
  font-size: 10px;
  font-family: Hiragino Sans;
  font-weight: 600;
  line-height: 2;
  color: var(--neutral-gray-500);
}
.c-detail-item .print-guide-help > a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: var(--neutral-gray-500);
  text-decoration-line: underline;
  text-decoration-thickness: 0.5px;
}
.c-detail-item .print-guide-help > a::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: var(--neutral-gray-500);
  -webkit-mask-image: url(/images/question-icon.svg);
  mask-image: url(/images/question-icon.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.c-detail-item .print-guide-end {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 24px 16px 12px;
  position: relative;
  z-index: 0;
}
.c-detail-item .print-guide-end::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(/images/bg-guide-sp.svg);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0 0 10px 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.c-detail-item .print-guide-period {
  color: var(--neutral-gray-800);
  font-size: 12px;
  font-family: Hiragino Sans;
  font-weight: 600;
  line-height: 1;
}
.c-detail-item .print-guide-time {
  color: var(--neutral-gray-600);
  font-size: 12px;
  font-family: Hiragino Sans;
  font-weight: 500;
  line-height: 1;
}
.c-detail-item .print-expired-area {
  max-width: 268px;
  margin: 0 auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14));
}
.c-detail-item .print-expired {
  padding: 24px 16px 16px;
  border-radius: 10px 10px 0 0;
  background: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.c-detail-item .print-expired::before {
  content: "";
  width: 52px;
  height: 55px;
  background-image: url(/images/img-expired.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-13.322deg);
  position: absolute;
  top: 2px;
  right: -4px;
  z-index: -1;
}
.c-detail-item .print-expired-text {
  margin: 0 0 16px;
  color: var(--neutral-gray-500);
  text-align: center;
  font-family: Hiragino Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.66667;
}
.c-detail-item .print-expired-receive-box {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.c-detail-item .print-expired-receive-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  border: 1px solid transparent;
  background: linear-gradient(90deg, #ff9587 0%, #f587ff 100%) border-box
    border-box;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.c-detail-item .print-expired-receive-box svg {
  position: absolute;
  width: calc(100% + 1px);
  top: 0;
  left: -1px;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.c-detail-item .print-expired-receive-box svg rect {
  stroke-dasharray: 4;
  stroke-dashoffset: 5;
}
.c-detail-item .print-expired-receive {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-family: Hiragino Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  background: linear-gradient(90deg, #ff9587 0%, #f587ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 4px 16px;
  border-radius: 5px;
  position: relative;
  white-space: nowrap;
}
.c-detail-item .print-expired-receive::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(/images/shared/icon-present.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: transparent;
  margin-right: 8px;
}
.c-detail-item .print-expired-received {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-family: Hiragino Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
  padding: 4px 24px;
  border-radius: 8px;
  background-image: linear-gradient(90deg, #ff9587 0%, #f587ff 100%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.c-detail-item .print-expired-received::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(/images/shared/icon-present.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: transparent;
  margin-right: 8px;
}
.c-detail-item .print-expired-request {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-family: Hiragino Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
  padding: 4px 28px;
  border-radius: 8px;
  background-image: linear-gradient(90deg, #ff9587 0%, #f587ff 100%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.c-detail-item .print-expired-request::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(/images/shared/icon-request.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: transparent;
  margin-right: 8px;
}
.c-detail-item .print-expired-request.disabled,
.c-detail-item .print-expired-request:disabled {
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}
.c-detail-item .print-expired-end {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 24px 16px 12px;
  position: relative;
  z-index: 0;
}
.c-detail-item .print-expired-end::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(/images/bg-expired-sp.svg);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0 0 10px 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.c-detail-item .print-expired-period {
  color: #fff;
  font-size: 12px;
  font-family: Hiragino Sans;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
  column-gap: 8px;
}
.c-detail-item .print-expired-period::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-color: #fff;
  -webkit-mask-image: url(/images/icon-total-printout.svg);
  mask-image: url(/images/icon-total-printout.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
}
.c-detail-item .print-expired-time {
  opacity: 0.7;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.c-detail-item .request-send {
  pointer-events: none;
  box-shadow: none;
}
.c-detail-item .qr-btn {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dcdcdc;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  margin: -20px 0 0 auto;
  cursor: pointer;
}
.c-detail-item .qr-btn img {
  display: block;
  width: 16px;
  height: 16px;
}
.c-detail-item .qr-btn .qr-btn-text {
  color: #858585;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.c-detail-item .print-number {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
  margin: 0 auto;
}
.c-detail-item .reactions-wrap {
  margin-top: 16px;
}
.c-detail-item .reactions-counts {
  margin: 0 auto 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.c-detail-item .reactions-counts-btn {
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--color-reactions-text);
  background-color: var(--color-reactions-bg);
  border-radius: 5px;
  padding: 5px 7.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-reactions-bg);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.c-detail-item .reactions-counts-btn.select-stamp {
  background-color: var(--color-select-stamp-bg);
  border-color: var(--color-select-stamp-border);
}
.c-detail-item .reactions-counts-btn img {
  display: block;
  margin-right: 4px;
}
.c-detail-item .stamp-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  grid-gap: 16px;
  align-items: center;
  margin: 0 auto;
  padding: 16px 12px;
  background: #ffffff;
  border: 1px solid var(--neutral-gray-100);
  border-radius: 5px;
  position: relative;
}
.c-detail-item .reactions-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  position: relative;
}
.c-detail-item .reactions-btn::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background-color: var(--color-reaction-border);
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
@media (hover: none) {
  .c-detail-item .reactions-btn {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-detail-item .reactions-btn:active::before {
    opacity: 1;
    visibility: visible;
  }
}
@media (hover: hover) {
  .c-detail-item .reactions-btn {
    backface-visibility: hidden;
  }
  .c-detail-item .reactions-btn:hover::before {
    opacity: 1;
    visibility: visible;
  }
  .c-detail-item .reactions-btn:active::before {
    opacity: 1;
    visibility: visible;
  }
}
.c-detail-item .reactions-btn img {
  width: 100%;
  height: 100%;
  position: relative;
}
.c-detail-item .print-number-store {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 8px;
  column-gap: 8px;
  margin-top: 16px;
}
.c-detail-item .print-info-area {
  margin-top: 16px;
}
.c-detail-item .print-info-area .print-number-download {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 8px;
  column-gap: 8px;
}
.c-detail-item .print-info-area .print-number-download::before {
  margin: 0;
}
.c-detail-item .print-info-tab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 8px;
  column-gap: 8px;
  padding: 8px 10px 0;
  position: relative;
  overflow: hidden;
}
.c-detail-item .print-info-tab::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - 16px);
  background-color: var(--neutral-gray-100);
  position: absolute;
  left: 0;
  bottom: 0;
}
.c-detail-item .print-info-tab-btn {
  display: flex;
  row-gap: 8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px;
  position: relative;
  transform: translateY(6px);
  z-index: 1;
}
.c-detail-item .print-info-tab-btn.active {
  background-color: #fff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  mix-blend-mode: initial;
}
.c-detail-item .other-seven-btn {
  mix-blend-mode: multiply;
}
.c-detail-item .print-info-tab-area {
  display: none;
}
.c-detail-item .print-info-tab-area.open {
  display: block;
}
.c-detail-item .print-info-text {
  color: var(--neutral-gray-800, #363636);
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  margin: 16px auto;
}
.c-detail-item .print-select-size-text {
  color: var(--neutral-gray-400, #acacac);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 10px;
  margin: 16px auto;
}
.c-detail-item .print-seven-btn-box {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.c-detail-item .print-size-select-btn {
  display: block;
  color: var(--neutral-gray-800, #363636);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  border-radius: 8px;
  border: 1px solid var(--neutral-gray-300, #c6c6c6);
  background: #fff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  width: -moz-fit-content;
  width: fit-content;
  min-width: 200px;
  padding: 14px;
  margin: 0 auto;
}
.c-detail-item .print-number-note {
  color: var(--neutral-gray-600, #767676);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}
.c-detail-item .seven-maintenance-text {
  color: var(--neutral-gray-800, #363636);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  padding: 16px;
  border-radius: 8px;
  background: var(--neutral-gray-100, #e9e9e9);
}
.c-detail-item .uploaded-print-info-area .print-number-download-area {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
}
.c-detail-item .uploaded-print-info-area .print-number-download {
  display: block;
}
.c-detail-item .uploaded-print-info-area .print-number-download::before {
  margin: 0 auto 8px;
}
@media screen and (max-width: 340px) {
  .c-detail-item .pass-lock-box {
    padding-top: 9%;
  }
}
@media screen and (min-width: 600px) {
  .c-detail-item .pass-lock-box {
    padding-top: 30%;
  }
}
@media screen and (min-width: 600px) {
  .c-detail-item .detail-wrap {
    width: 100%;
  }
  .c-detail-item .detail-image {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }
  .c-detail-item .detail-profile {
    margin-bottom: 32px;
  }
  .c-detail-item .detail-profile .private-user-menu {
    top: 15px;
  }
  .c-detail-item .detail-profile-private-content .author-name {
    margin-right: 62px;
  }
  .c-detail-item .private-content-message {
    margin-top: -8px;
    margin-bottom: 24px;
  }
  .c-detail-item .detail-info {
    margin: 0 0 24px;
  }
  .c-detail-item .detail-title {
    font-size: 16px;
  }
  .c-detail-item .author-text {
    font-size: 14px;
  }
  .c-detail-item .btn-favorite {
    font-size: 12px;
  }
  .c-detail-item .btn-x-share {
    font-size: 12px;
  }
  .c-detail-item .btn-share {
    font-size: 12px;
  }
  .c-detail-item .detail-area-others.grid,
  .c-detail-item .detail-area-cushion.grid,
  .c-detail-item .detail-area-follower.grid {
    grid-template-columns: 1fr 1fr;
  }
  .c-detail-item .detail-area-item img,
  .c-detail-item .detail-area-others-item img,
  .c-detail-item .detail-area-cushion-item img,
  .c-detail-item .detail-area-follower-item img {
    border-radius: 8px;
  }
  .c-detail-item .btn-more {
    font-size: 14px;
    line-height: 22px;
  }
  .c-detail-item .print-info-text {
    margin: 24px 0;
  }
  .c-detail-item .print-number-qr-area {
    width: 386px;
  }
  .c-detail-item .print-number-qr {
    padding: 14px 14px 12px;
  }
  .c-detail-item .print-number-title {
    margin: 4px 16px 0;
  }
  .c-detail-item .print-number-preparing {
    margin: 18px 0 12px;
    font-size: 14px;
  }
  .c-detail-item .print-number-column {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 8px;
    margin: 0;
  }
  .c-detail-item .print-number-image {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .c-detail-item .print-number-code {
    grid-column: 2;
    grid-row: 1;
    place-self: end stretch;
    width: 100%;
    margin: 0 0 8px;
    font-size: 24px;
  }
  .c-detail-item .print-number-lock {
    grid-column: 2;
    grid-row: 1;
    place-self: end stretch;
    width: 100%;
    margin: 18px 0 0;
  }
  .c-detail-item .print-number-store img {
    width: auto;
    height: 14px;
  }
  .c-detail-item .print-number-download {
    margin: 0;
    font-size: 12px;
    height: -moz-fit-content;
    height: fit-content;
  }
  .c-detail-item .print-number-mail {
    margin: 0;
    font-size: 12px;
  }
  .c-detail-item .print-number-end::before {
    background-image: url(/images/bg-qr-pc.svg);
    background-size: 386px 64px;
  }
  .c-detail-item .print-number-period {
    font-size: 14px;
  }
  .c-detail-item .print-number-time {
    font-size: 14px;
  }
  .c-detail-item .print-guide-area {
    width: 384px;
    max-width: initial;
  }
  .c-detail-item .print-guide-purchase {
    padding: 8px 16px;
    font-size: 14px;
  }
  .c-detail-item .print-guide {
    padding: 20px 32px 12px;
  }
  .c-detail-item .print-guide-text {
    font-size: 14px;
  }
  .c-detail-item .print-guide-help {
    font-size: 12px;
  }
  .c-detail-item .print-guide-help > a::before {
    width: 14px;
    height: 14px;
  }
  .c-detail-item .print-guide-end::before {
    background-image: url(/images/bg-guide-pc.svg);
  }
  .c-detail-item .print-guide-period {
    font-size: 14px;
  }
  .c-detail-item .print-guide-time {
    font-size: 14px;
  }
  .c-detail-item .print-expired-area {
    width: 384px;
    max-width: initial;
  }
  .c-detail-item .print-expired {
    padding: 24px 32px 16px;
  }
  .c-detail-item .print-expired::before {
    width: 73px;
    height: 78px;
  }
  .c-detail-item .print-expired-text {
    font-size: 14px;
    line-height: 1.42857;
  }
  .c-detail-item .print-expired-receive {
    font-size: 14px;
    line-height: 1.42857;
  }
  .c-detail-item .print-expired-received {
    font-size: 14px;
    line-height: 1.42857;
  }
  .c-detail-item .print-expired-request {
    padding: 4px 16px;
    font-size: 14px;
  }
  .c-detail-item .print-expired-end::before {
    background-image: url(/images/bg-expired-pc.svg);
  }
  .c-detail-item .print-expired-period {
    font-size: 14px;
  }
  .c-detail-item .print-expired-time {
    font-size: 14px;
  }
  .c-detail-item .qr-btn {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 12px 0 0 16px;
    flex-direction: column;
    gap: 12px;
    padding: 16px 8px;
    border: 0;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1);
  }
  .c-detail-item .qr-btn img {
    margin: 0 auto;
    width: 24px;
    height: 24px;
  }
  .c-detail-item .qr-btn .qr-btn-text {
    font-size: 14px;
    font-weight: 600;
  }
  .c-detail-item .print-state {
    border-radius: 10px;
    font-size: 12px;
    line-height: 16px;
  }
  .c-detail-item .print-state.regular-sale::before,
  .c-detail-item .print-state.limited-sale::before {
    border-radius: 10px;
  }
  .c-detail-item .btn-x-share {
    margin-left: 24px;
  }
  .c-detail-item .btn-share {
    margin-left: 24px;
  }
  .c-detail-item .print-total-wrap {
    margin-left: 24px;
  }
  .c-detail-item .print-total-count {
    font-weight: 600;
    font-size: 14px;
  }
  .c-detail-item .detail-area-item,
  .c-detail-item .detail-area-others-item,
  .c-detail-item .detail-area-cushion-item,
  .c-detail-item .detail-area-follower-item {
    max-width: 296px;
    margin: 0 auto;
    height: -moz-fit-content;
    height: fit-content;
  }
  .c-detail-item .detail-area-item,
  .c-detail-item .detail-area-others-item,
  .c-detail-item .detail-area-cushion-item,
  .c-detail-item .detail-area-follower-item {
    border-radius: 8px;
  }
  .c-detail-item .show-btn,
  .c-detail-item .show-btn-others,
  .c-detail-item .show-btn-cushion,
  .c-detail-item .show-btn-follower {
    font-size: 14px;
  }
  .c-detail-item .btn-show-others {
    font-size: 14px;
  }
  .c-detail-item .warning-box {
    border-radius: 8px;
  }
  .c-detail-item .warning-box .show-btn-cushion {
    margin-top: 14px;
  }
  .c-detail-item .pass-lock-box {
    border-radius: 8px;
    padding-top: 43px;
  }
  .c-detail-item .pass-lock-box .lock-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
  }
  .c-detail-item .pass-lock-box .lock-icon::before {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }
  .c-detail-item .secret-lock-box {
    border-radius: 8px;
  }
  .c-detail-item .secret-lock-box::after {
    border-radius: 14px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }
  .c-detail-item .pass-lock-box,
  .c-detail-item .secret-lock-box,
  .c-detail-item .warning-box {
    max-width: 296px;
    left: 50%;
    transform: translateX(-50%);
  }
  .c-detail-item .secret-wrap {
    padding-top: 6px;
  }
  .c-detail-item .secret-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
  }
  .c-detail-item .secret-icon::after {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
  }
  .c-detail-item .secret-icon .secret-img {
    width: 27.14px;
    height: 48.15px;
  }
  .c-detail-item .secret-lock-text {
    line-height: 24px;
    margin-top: 24px;
  }
  .c-detail-item .secret-sub-text {
    font-size: 14px;
    line-height: 22px;
    margin-top: 8px;
  }
  .c-detail-item .warning-img {
    width: 112px;
    height: auto;
  }
  .c-detail-item .warning-text {
    width: 180px;
  }
  .c-detail-item .follower-btn-box {
    padding: 16px;
  }
  .c-detail-item .follower-btn-box .twipri-btn a {
    height: 38px;
    font-size: 14px;
    line-height: 22px;
  }
  .c-detail-item .follower-btn-box .twipri-btn a::before {
    width: 16px;
    height: 16px;
  }
  .c-detail-item .follower-btn-text {
    font-size: 14px;
    line-height: 22px;
  }
  .c-detail-item .follower-btn-text::before {
    width: 16px;
    height: 16px;
  }
  .c-detail-item .follower-text {
    font-size: 14px;
    line-height: 22px;
  }
  .c-detail-item .pass-lock-text {
    line-height: 24px;
    margin-top: 16px;
  }
  .c-detail-item .pass-form-box .pass-box {
    margin: 18px auto 12px;
  }
  .c-detail-item .pass-form-box .pass-box .pass-form {
    font-size: 14px;
    padding: 7px 12px;
    max-width: 272px;
  }
  .c-detail-item .pass-form-box .pass-submit[type="submit"] {
    font-size: 14px;
    line-height: 22px;
  }
  .c-detail-item .mainte-text {
    font-size: 18px;
    line-height: 28px;
    margin-top: 32px;
  }
  .c-detail-item .detail-settlement-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    margin: 16px 0;
  }
  .c-detail-item .detail-price {
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto 0 0;
  }
  .c-detail-item .print-deadline {
    font-size: 14px;
  }
  .c-detail-item .print-price {
    font-size: 28px;
  }
  .c-detail-item .print-yen {
    font-size: 16px;
  }
  .c-detail-item .print-inventory {
    font-size: 14px;
  }
  .c-detail-item .purchase-price {
    display: none;
  }
  .c-detail-item .detail-purchase {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    position: relative;
    left: auto;
    bottom: auto;
    z-index: auto;
  }
  .c-detail-item .btn-purchase {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 136px;
    max-width: initial;
    padding: 15px 24px;
  }
  .c-detail-item .btn-request {
    padding: 14px 24px;
    font-size: 14px;
    line-height: 1;
  }
  .c-detail-item .print-number {
    font-size: 26px;
    line-height: 30px;
  }
  .c-detail-item .send-request {
    font-size: 14px;
    padding: 6px;
  }
  .c-detail-item .reactions-wrap {
    margin-top: 24px;
  }
  .c-detail-item .reactions-counts-btn img {
    width: 16px;
    height: 16px;
  }
  .c-detail-item .stamp-box {
    grid-gap: 20px;
    padding: 24px;
  }
  .c-detail-item .print-info-area .print-number-download {
    grid-column: 2;
    grid-row: 2;
  }
  .c-detail-item .btn-show-reservation-number {
    grid-column: 2;
    grid-row: 2;
    margin: 32px auto 0;
    height: 16px;
  }
  .c-detail-item .print-seven-btn-box .print-number-store img {
    width: 40px;
    height: 40px;
  }
  .c-detail-item .uploaded-print-info-area .print-number-download-area {
    grid-template-columns: 1fr;
    margin-top: 8px;
  }
  .c-detail-item .uploaded-print-info-area .print-number-column {
    grid-template-rows: auto;
    align-items: center;
  }
  .c-detail-item .uploaded-print-info-area .print-number-image {
    grid-row: 1;
  }
  .c-detail-item .uploaded-print-info-area .print-number-download {
    grid-column: 1;
    display: flex;
  }
  .c-detail-item .uploaded-print-info-area .print-number-download::before {
    margin: 0;
  }
  .c-detail-item .uploaded-print-info-area .print-number-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 8px;
    column-gap: 8px;
  }
  .c-detail-item .uploaded-print-info-area .print-number-mail::before {
    margin: 0;
  }
  .c-detail-item .uploaded-print-info-area .print-number-store {
    margin-top: 12px;
  }
}
@media screen and (min-width: 1025px) {
  .c-detail-item .detail-wrap {
    padding: 24px 24px 40px;
    background: #fff;
    border-right: 1px solid var(--neutral-gray-100);
    border-bottom: 1px solid var(--neutral-gray-100);
    border-left: 1px solid var(--neutral-gray-100);
  }
  .c-detail-item .print-info-tab {
    padding: 8px 32px 0;
  }
  .c-detail-item .print-info-tab-btn {
    flex-direction: row;
    -moz-column-gap: 12px;
    column-gap: 12px;
  }
  .c-detail-item .print-seven-btn-box {
    flex-direction: row;
    justify-content: center;
  }
  .c-detail-item .print-seven-btn-box.open {
    flex-direction: column;
  }
  .c-detail-item .print-size-select-btn {
    margin: 0;
  }
  .c-detail-item .reactions-btn {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
  }
}
@media screen and (min-width: 1025px) {
  .detail-container {
    min-width: 640px;
    margin-bottom: 0px;
    padding-top: 0;
    background-color: var(--color-pc-bg);
  }
  .print-seven-btn-box {
    justify-content: center;
    align-items: center;
    flex-direction: unset;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }
  .print-size-select-btn {
    margin: 0;
  }
}
.watch-btn-sp {
  display: block;
  width: 30px;
  height: 30px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.watch-btn-sp::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../images/shared/icon-watch.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.watch-btn-sp.on-follow::before {
  background-image: url(../images/shared/icon-watching.svg);
}
@media screen and (min-width: 1025px) {
  .watch-btn-sp {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .watch-btn {
    display: block;
  }
}
/*===============================
  見出し
================================*/
.c-nav-hdg {
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  padding: 0 16px 0 0;
  position: sticky;
  top: 48px;
  left: 0;
  z-index: 100;
}
.c-nav-hdg.nav-hdg-app {
  top: 0;
}
.c-nav-hdg::after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (min-width: 600px) {
  .c-nav-hdg {
    padding: 0 24px 0 0;
    top: 0;
  }
}
@media screen and (min-width: 1025px) {
  .c-nav-hdg {
    height: 88px;
  }
}
.c-nav-hdg .nav-back {
  display: block;
  width: 40px;
  height: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.c-nav-hdg .nav-back::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--color-text);
  -webkit-mask-image: url(/images/shared/icon-back.svg);
  mask-image: url(/images/shared/icon-back.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  text-indent: 0;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translate(0, -50%);
}
@media screen and (min-width: 1025px) {
  .c-nav-hdg .nav-back::before {
    width: 18px;
    height: 18px;
    left: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .c-nav-hdg .nav-back {
    width: 54px;
  }
}
.c-nav-hdg .nav-back + .nav-hdg1 {
  padding-left: 0;
}
.c-nav-hdg .transactions-nav-back {
  display: block;
  width: 40px;
  height: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.c-nav-hdg .transactions-nav-back::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--color-text);
  -webkit-mask-image: url(/images/shared/icon-close.svg);
  mask-image: url(/images/shared/icon-close.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  text-indent: 0;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translate(0, -50%);
}
@media screen and (min-width: 1025px) {
  .c-nav-hdg .transactions-nav-back::before {
    width: 18px;
    height: 18px;
    left: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .c-nav-hdg .transactions-nav-back {
    width: 54px;
  }
}
.c-nav-hdg .transactions-nav-back + .nav-hdg1 {
  padding-left: 0;
}
.c-nav-hdg .nav-hdg1 {
  padding-left: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}
@media screen and (min-width: 1025px) {
  .c-nav-hdg .nav-hdg1 {
    padding-left: 24px;
  }
}
/*===============================
  notfound
================================*/
.c-notfound-area {
  padding: 80px 16px;
  margin: 0 0;
  background-color: #fff;
  text-align: center;
}
.c-notfound-area .notfound-message {
  font-size: 14px;
  font-weight: 600;
  color: #bfbaba;
}
/*===============================
	調整クラス
================================*/
.c-visible-sp {
  display: inherit;
}
.c-visible-pc {
  display: none;
}
@media screen and (min-width: 1025px) {
  .c-visible-sp {
    display: none;
  }
  .c-visible-pc {
    display: inherit;
  }
}
.u-mt-0 {
  margin-top: 0px !important;
}
.u-mt-4 {
  margin-top: 4px !important;
}
.u-mt-8 {
  margin-top: 8px !important;
}
.u-mt-12 {
  margin-top: 12px !important;
}
.u-mt-16 {
  margin-top: 16px !important;
}
.u-mt-20 {
  margin-top: 20px !important;
}
.u-mt-24 {
  margin-top: 24px !important;
}
.u-mt-28 {
  margin-top: 28px !important;
}
.u-mt-32 {
  margin-top: 32px !important;
}
.u-mt-36 {
  margin-top: 36px !important;
}
.u-mt-40 {
  margin-top: 40px !important;
}
.u-mt-44 {
  margin-top: 44px !important;
}
.u-mt-48 {
  margin-top: 48px !important;
}
.u-mt-52 {
  margin-top: 52px !important;
}
.u-mt-56 {
  margin-top: 56px !important;
}
.u-mt-60 {
  margin-top: 60px !important;
}
.u-mt-64 {
  margin-top: 64px !important;
}
.u-mt-68 {
  margin-top: 68px !important;
}
.u-mt-72 {
  margin-top: 72px !important;
}
.u-mt-76 {
  margin-top: 76px !important;
}
.u-mt-80 {
  margin-top: 80px !important;
}
.u-mt-84 {
  margin-top: 84px !important;
}
.u-mt-88 {
  margin-top: 88px !important;
}
.u-mt-92 {
  margin-top: 92px !important;
}
.u-mt-96 {
  margin-top: 96px !important;
}
.u-mt-100 {
  margin-top: 100px !important;
}
.u-mb-0 {
  margin-bottom: 0px !important;
}
.u-mb-4 {
  margin-bottom: 4px !important;
}
.u-mb-8 {
  margin-bottom: 8px !important;
}
.u-mb-12 {
  margin-bottom: 12px !important;
}
.u-mb-16 {
  margin-bottom: 16px !important;
}
.u-mb-20 {
  margin-bottom: 20px !important;
}
.u-mb-24 {
  margin-bottom: 24px !important;
}
.u-mb-28 {
  margin-bottom: 28px !important;
}
.u-mb-32 {
  margin-bottom: 32px !important;
}
.u-mb-36 {
  margin-bottom: 36px !important;
}
.u-mb-40 {
  margin-bottom: 40px !important;
}
.u-mb-44 {
  margin-bottom: 44px !important;
}
.u-mb-48 {
  margin-bottom: 48px !important;
}
.u-mb-52 {
  margin-bottom: 52px !important;
}
.u-mb-56 {
  margin-bottom: 56px !important;
}
.u-mb-60 {
  margin-bottom: 60px !important;
}
.u-mb-64 {
  margin-bottom: 64px !important;
}
.u-mb-68 {
  margin-bottom: 68px !important;
}
.u-mb-72 {
  margin-bottom: 72px !important;
}
.u-mb-76 {
  margin-bottom: 76px !important;
}
.u-mb-80 {
  margin-bottom: 80px !important;
}
.u-mb-84 {
  margin-bottom: 84px !important;
}
.u-mb-88 {
  margin-bottom: 88px !important;
}
.u-mb-92 {
  margin-bottom: 92px !important;
}
.u-mb-96 {
  margin-bottom: 96px !important;
}
.u-mb-100 {
  margin-bottom: 100px !important;
}
/*===============================
	広告
================================*/
.ad-area {
  margin: 32px 0;
}
@media screen and (min-width: 1025px) {
  .ad-area {
    margin: 40px 0;
  }
}
.ad-728x90 {
  width: 728px;
  height: 90px;
  margin: 0 auto;
  display: block;
}
.ad-320x50 {
  width: 320px;
  height: 50px;
  margin: 0 auto;
  display: block;
}
.ad-300x250 {
  width: 300px;
  height: 250px;
  margin: 0 auto;
  display: block;
}
:root {
  --color-form-bg: #f7f7f7;
  --color-form-border: #e5e5e5;
  --color-toggle-on: #0297fb;
  --color-toggle-off: #78788026;
  --color-toggle-border: #c6c6c8;
  --color-count: #acacac;
  --color-capacity-title: #363636;
  --color-meter-bg: #e0e0e0;
}
#wrap {
  padding-top: 0;
}
.edit-bg-cover {
  display: none;
}
.edit-header {
  position: sticky;
  width: 100%;
  height: 48px;
  top: 0;
  left: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #dcdcdc;
}
.header-inner {
  width: 92%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 8px 0;
}
.back-btn {
  background-color: #fff;
  border: none;
  padding: 4px 4px 4px 0px;
}
.edit-header-title {
  font-family: "Hiragino Sans";
  font-weight: 600;
  color: var(--color-text);
  line-height: 20px;
  text-align: center;
  padding-left: 38px;
  font-size: 14px;
}
.save-btn {
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text);
  line-height: 18px;
  padding: 5px 15px;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
}
.upload-form {
  max-width: 640px;
  padding: 16px;
  margin: 0 auto;
  padding-bottom: 40px;
  background-color: #fff;
}
.edit-container-pc {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
  background-color: var(--color-main-bg);
}
.edit-container-pc .mod-main {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background-color: #fff;
}
@media screen and (min-width: 1025px) {
  .edit-header {
    height: 56px;
  }
  .back-btn img {
    width: 18px;
    height: 18px;
  }
  .edit-header-title {
    line-height: 24px;
    font-size: 16px;
  }
  .save-btn {
    font-size: 14px;
    line-height: 22px;
  }
  .edit-container-pc {
    width: 640px;
    max-width: 640px;
    height: 90%;
    min-height: auto;
    max-height: 680px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 3;
    border-radius: 20px;
  }
  .edit-container-pc .mod-main {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .edit-bg-cover {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .header-inner {
    width: 96%;
  }
  .upload-form {
    padding: 32px 24px;
    margin-bottom: 0;
  }
}
.edit-contents-header {
  position: sticky;
  width: 100%;
  height: 48px;
  top: 0;
  left: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #dcdcdc;
}
.edit-contents-header-inner {
  width: 100%;
  max-width: 640px;
  height: 100%;
  padding: 8px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin: 0 auto;
}
.edit-contents-back-btn {
  background-color: #fff;
  border: none;
  padding: 4px 4px 4px 0px;
  margin-right: 8px;
}
.edit-contents-header-title {
  font-family: "Hiragino Sans";
  font-weight: 600;
  color: var(--color-text);
  line-height: 20px;
  font-size: 14px;
}
.edit-contents-save-btn {
  grid-column: 4;
  grid-row: 1;
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text);
  line-height: 18px;
  padding: 5px 15px;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
}
.edit-contents-stop-btn {
  font-family: "Hiragino Sans";
  font-weight: 600;
  font-size: 12px;
  color: #f54338;
  line-height: 18px;
  padding: 5px 15px;
  background-color: #fff;
  border: 1px solid #f54338;
  border-radius: 10px;
}
@media screen and (min-width: 1025px) {
  .edit-contents-header {
    height: 56px;
  }
  .edit-contents-back-btn img {
    width: 18px;
    height: 18px;
  }
  .edit-contents-header-title {
    line-height: 24px;
    font-size: 16px;
  }
  .edit-contents-save-btn {
    font-size: 14px;
    line-height: 22px;
  }
  .edit-contents-stop-btn {
    font-size: 14px;
    line-height: 22px;
  }
}
/*===============================
  モーダル
================================*/
.c-tw-modal {
  display: block;
}
.c-tw-modal .modal-body {
  position: fixed;
  z-index: 10000;
  width: calc(100% - 32px);
  max-width: 640px;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  margin-left: auto !important;
  margin-top: auto !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-tw-modal .modal-title-area {
  display: grid;
  grid-auto-flow: column;
  place-content: center space-between;
  place-items: center;
  gap: 24px;
  padding: 16px;
  border-bottom: 1px solid #dcdcdc;
}
.c-tw-modal .modal-title {
  display: grid;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}
.c-tw-modal .modal-main-title {
  height: 1.5em;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.c-tw-modal .modal-sub-title {
  height: 1.6em;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: #acacac;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.c-tw-modal .modal-close {
  display: block;
  width: 32px;
  height: 32px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.c-tw-modal .modal-close::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-image: url(../images/shared/img-close.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: transparent;
  text-indent: 0;
}
.c-tw-modal .modal-inner-area {
  padding: 32px 24px;
}
.c-tw-modal .modal-title-area + .modal-inner-area {
  padding-top: 20px;
}
.c-tw-modal .modal-text {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
}
.c-tw-modal .modal-text.a-left {
  text-align: left;
}
.c-tw-modal .modal-text strong {
  font-weight: 600;
  color: #f54338;
}
.c-tw-modal .modal-text.type2 {
  font-weight: 500;
  line-height: 1.5714285714;
}
.c-tw-modal .print-qr-code {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.c-tw-modal .modal-list-bullet {
  list-style: none;
  margin: 24px 0;
  font-size: 14px;
}
.c-tw-modal .modal-list-bullet > li {
  padding-left: 1em;
  font-weight: 600;
  line-height: 1.5714285714;
  color: var(--color-text);
  position: relative;
}
.c-tw-modal .modal-list-bullet > li::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: var(--color-text);
  position: absolute;
  top: 0.6785714286em;
  left: 0.4em;
}
.c-tw-modal .modal-list-bullet > li:not(:last-child) {
  margin-bottom: 8px;
}
.c-tw-modal .modal-product-image {
  margin: 0 0 24px;
}
.c-tw-modal .modal-product-image .product-image {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.c-tw-modal .modal-product-image .product-image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 0;
  object-position: 50% 0;
  border-radius: 8px;
  background-color: #f8f8f8;
}
.c-tw-modal .modal-product-image .product-caption {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5714285714;
  color: var(--color-text);
  text-align: center;
}
.c-tw-modal .modal-bg {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
}
.c-tw-modal .print-reservation-text {
  color: var(--neutral-gray-800, #363636);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 16px;
}
.c-tw-modal .print-reservation-number-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  row-gap: 16px;
}
.c-tw-modal .print-reservation-number {
  color: var(--neutral-gray-800, #363636);
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  display: flex;
  align-items: center;
  -moz-column-gap: 12px;
  column-gap: 12px;
}
.c-tw-modal .print-number-copy-btn::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--neutral-gray-800, #363636);
  -webkit-mask-image: url(/images/shared/icon-number-copy.svg);
  mask-image: url(/images/shared/icon-number-copy.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  cursor: pointer;
}
.c-tw-modal .seven-number-modal-body {
  max-width: 327px;
}
@media screen and (min-width: 600px) {
  .c-tw-modal .modal-text {
    margin: 0 0 32px;
    font-size: 16px;
  }
  .c-tw-modal .modal-list-bullet {
    margin: 32px 0;
    font-size: 16px;
  }
}
.c-tw-modal-qr .modal-text {
  margin: 0;
}
/*===============================
  ボタン
================================*/
.c-tw-modal {
  /* 通常
  ---------------------- */
  /* OK・キャンセル
  ---------------------- */
  /* SNSシェア
  ---------------------- */
}
.c-tw-modal .modal-btn-yes {
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  place-items: center;
}
.c-tw-modal .modal-btn-yes [class^="btn"] {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5714285714;
  color: #fff;
  position: relative;
}
.c-tw-modal .modal-btn-yes .btn-yes {
  min-width: 92px;
  max-width: 280px;
  padding: 9px 24px;
  border-radius: 8px;
  background-color: var(--color-brand-sub);
  position: relative;
  transition: background-color 0.2s ease;
}
@media (hover: none) {
  .c-tw-modal .modal-btn-yes .btn-yes {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-tw-modal .modal-btn-yes .btn-yes:active {
    background-color: #41bbff;
  }
}
@media (hover: hover) {
  .c-tw-modal .modal-btn-yes .btn-yes {
    backface-visibility: hidden;
  }
  .c-tw-modal .modal-btn-yes .btn-yes:hover {
    background-color: #41bbff;
  }
  .c-tw-modal .modal-btn-yes .btn-yes:active {
    background-color: #41bbff;
  }
}
@media screen and (min-width: 600px) {
  .c-tw-modal .modal-btn-yes [class^="btn"] {
    font-size: 16px;
  }
  .c-tw-modal .modal-btn-yes .btn-yes {
    padding: 8px 32px;
  }
}
.c-tw-modal .modal-btn-box {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-columns: auto auto;
  grid-template-areas: "a b";
  place-content: center;
  grid-gap: 16px 24px;
}
.c-tw-modal .modal-btn-box [class^="btn"] {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5714285714;
  color: #fff;
  position: relative;
}
.c-tw-modal .modal-btn-box .btn-ok {
  grid-area: a;
  width: 100%;
  min-width: 92px;
  max-width: 280px;
  padding: 8px 24px;
  border: 1px solid var(--blue-re-blue-500);
  border-radius: 10px;
  background-color: var(--blue-re-blue-500);
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
@media (hover: none) {
  .c-tw-modal .modal-btn-box .btn-ok {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-tw-modal .modal-btn-box .btn-ok:active {
    background-color: #41bbff;
    border-color: #41bbff;
  }
}
@media (hover: hover) {
  .c-tw-modal .modal-btn-box .btn-ok {
    backface-visibility: hidden;
  }
  .c-tw-modal .modal-btn-box .btn-ok:hover {
    background-color: #41bbff;
    border-color: #41bbff;
  }
  .c-tw-modal .modal-btn-box .btn-ok:active {
    background-color: #41bbff;
    border-color: #41bbff;
  }
}
.c-tw-modal .modal-btn-box .btn-delete {
  grid-area: a;
  width: 100%;
  min-width: 92px;
  max-width: 280px;
  padding: 8px 24px;
  border: 1px solid var(--color-delete-btn);
  border-radius: 10px;
  background-color: var(--color-delete-btn);
  position: relative;
  transition: background-color 0.2s ease, top 0.2s ease;
}
@media (hover: none) {
  .c-tw-modal .modal-btn-box .btn-delete {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-tw-modal .modal-btn-box .btn-delete:active {
    background-color: #ff4338;
  }
}
@media (hover: hover) {
  .c-tw-modal .modal-btn-box .btn-delete {
    backface-visibility: hidden;
  }
  .c-tw-modal .modal-btn-box .btn-delete:hover {
    background-color: #ff4338;
  }
  .c-tw-modal .modal-btn-box .btn-delete:active {
    background-color: #ff4338;
  }
}
.c-tw-modal .modal-btn-box .btn-request {
  grid-area: a;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  place-items: center;
  gap: 8px;
  width: 100%;
  min-width: 92px;
  max-width: 280px;
  padding: 8px 24px;
  border-radius: 10px;
  background-image: linear-gradient(90deg, #ff9587 0%, #f587ff 100%);
  box-shadow: 0 4px 0 #951461;
  position: relative;
  transition: background-image 0.2s ease, top 0.2s ease;
}
.c-tw-modal .modal-btn-box .btn-request::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-image: url(../images/shared/icon-request.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: transparent;
}
@media (hover: none) {
  .c-tw-modal .modal-btn-box .btn-request {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-tw-modal .modal-btn-box .btn-request:active {
    background-image: linear-gradient(
      90deg,
      rgba(255, 149, 135, 0.95) 0%,
      rgba(245, 135, 255, 0.95) 100%
    );
    box-shadow: none;
    top: 4px;
  }
}
@media (hover: hover) {
  .c-tw-modal .modal-btn-box .btn-request {
    backface-visibility: hidden;
  }
  .c-tw-modal .modal-btn-box .btn-request:hover {
    background-image: linear-gradient(
      90deg,
      rgba(255, 149, 135, 0.95) 0%,
      rgba(245, 135, 255, 0.95) 100%
    );
  }
  .c-tw-modal .modal-btn-box .btn-request:active {
    background-image: linear-gradient(
      90deg,
      rgba(255, 149, 135, 0.95) 0%,
      rgba(245, 135, 255, 0.95) 100%
    );
    box-shadow: none;
    top: 4px;
  }
}
.c-tw-modal .modal-btn-box .btn-cancel {
  grid-area: b;
  width: 100%;
  min-width: 92px;
  max-width: 280px;
  padding: 8px 24px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background-color: #fff;
  color: var(--color-text);
  position: relative;
  transition: opacity 0.2s ease;
}
@media (hover: none) {
  .c-tw-modal .modal-btn-box .btn-cancel {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
}
@media (hover: hover) {
  .c-tw-modal .modal-btn-box .btn-cancel {
    backface-visibility: hidden;
  }
  .c-tw-modal .modal-btn-box .btn-cancel:hover {
    opacity: 0.7;
  }
}
.c-tw-modal .modal-btn-box.full-width-sp {
  grid-auto-flow: row dense;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-template-areas: "a" "b";
  place-content: normal;
  place-items: center;
}
@media screen and (min-width: 600px) {
  .c-tw-modal .modal-btn-box.full-width-sp {
    grid-auto-flow: column dense;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-template-areas: "a b";
    place-content: center;
    place-items: normal;
  }
}
@media screen and (min-width: 600px) {
  .c-tw-modal .modal-btn-box [class^="btn"] {
    font-size: 16px;
  }
  .c-tw-modal .modal-btn-box .btn-delete {
    padding: 8px 32px;
  }
}
.c-tw-modal .modal-share {
  display: grid;
  grid-auto-flow: column;
  place-content: center center;
  place-items: center;
  grid-gap: 0 40px;
  max-width: 312px;
  margin: 0 auto 16px;
}
.c-tw-modal .modal-share [class^="btn"] {
  display: grid;
  grid-gap: 4px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.066px;
  color: var(--color-text);
  text-align: center;
  transition: opacity 0.2s ease;
}
@media (hover: none) {
  .c-tw-modal .modal-share [class^="btn"] {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-tw-modal .modal-share [class^="btn"]:active {
    opacity: 0.5;
  }
}
@media (hover: hover) {
  .c-tw-modal .modal-share [class^="btn"] {
    backface-visibility: hidden;
  }
  .c-tw-modal .modal-share [class^="btn"]:hover {
    opacity: 0.5;
  }
  .c-tw-modal .modal-share [class^="btn"]:active {
    opacity: 0.5;
  }
}
.c-tw-modal .modal-share [class^="icon"] {
  display: block;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 16px;
  background-color: #1d9bf0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.c-tw-modal .modal-share [class^="icon"]::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-mask-image: url(../images/shared/icon-twitter.svg);
  mask-image: url(../images/shared/icon-twitter.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  text-indent: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-tw-modal .modal-share .icon-twitter {
  background-color: #fff;
  border: 1px solid var(--neutral-gray-100, #e9e9e9);
}
.c-tw-modal .modal-share .icon-twitter::before {
  width: 32px;
  height: 32px;
  background-color: #000;
  -webkit-mask-image: url(../images/shared/icon-x.svg);
  mask-image: url(../images/shared/icon-x.svg);
}
.c-tw-modal .modal-share .icon-line {
  background-color: #06c755;
}
.c-tw-modal .modal-share .icon-line::before {
  width: 40px;
  height: 40px;
  -webkit-mask-image: url(../images/shared/icon-line.svg);
  mask-image: url(../images/shared/icon-line.svg);
}
.c-tw-modal .modal-share .icon-facebook {
  background-color: #fff;
}
.c-tw-modal .modal-share .icon-facebook::before {
  background-color: #0866ff;
  width: 60px;
  height: 60px;
  -webkit-mask-image: url(../images/shared/icon-facebook.svg);
  mask-image: url(../images/shared/icon-facebook.svg);
}
.c-tw-modal .modal-share .icon-instagram {
  background: linear-gradient(
    187.13deg,
    #4f4cf0 5.56%,
    #d132eb 28.46%,
    #ff165c 49.62%,
    #ffdd87 74.27%
  );
}
.c-tw-modal .modal-share .icon-instagram::before {
  width: 43px;
  height: 43px;
  -webkit-mask-image: url(../images/shared/icon-instagram.svg);
  mask-image: url(../images/shared/icon-instagram.svg);
}
.c-tw-modal .modal-share .icon-copy {
  background-color: #e9e9e9;
}
.c-tw-modal .modal-share .icon-copy::before {
  width: 32px;
  height: 32px;
  background-color: #767676;
  -webkit-mask-image: url(../images/shared/icon-copy.svg);
  mask-image: url(../images/shared/icon-copy.svg);
}
/*===============================
  シェアモーダル
================================*/
.c-tw-modal.share .modal-body {
  width: 100%;
  border-radius: 15px 15px 0 0;
  top: auto;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
}
.c-tw-modal.share .modal-inner-area {
  padding-bottom: 16px;
}
.c-tw-modal.share .modal-share-url {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 8px;
}
.c-tw-modal.share .modal-share-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
  height: 44px;
  padding: 0 8px;
  border-radius: 8px;
  background-color: #e9e9e9;
  font-size: 14px;
  font-family: Hiragino Sans;
  font-weight: 600;
  color: var(--neutral-gray-400);
  position: relative;
  transition: opacity 0.2s ease;
}
.c-tw-modal.share .modal-share-copy::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--neutral-gray-400);
  -webkit-mask-image: url(/images/shared/icon-copy.svg);
  mask-image: url(/images/shared/icon-copy.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (hover: none) {
  .c-tw-modal.share .modal-share-copy {
    -webkit-tap-highlight-color: transparent;
    transition: none;
  }
  .c-tw-modal.share .modal-share-copy:active {
    opacity: 0.5;
  }
}
@media (hover: hover) {
  .c-tw-modal.share .modal-share-copy {
    backface-visibility: hidden;
  }
  .c-tw-modal.share .modal-share-copy:hover {
    opacity: 0.5;
  }
  .c-tw-modal.share .modal-share-copy:active {
    opacity: 0.5;
  }
}
@media screen and (min-width: 1025px) {
  .c-tw-modal.share .modal-body {
    border-radius: 15px;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
  .c-tw-modal.share .modal-inner-area {
    padding-bottom: 32px;
  }
  .c-tw-modal.share .modal-share-copy {
    height: 46px;
  }
}
/*===============================
  購入処理中モーダル
================================*/
.c-tw-modal.purchase-processing .purchase-image {
  margin: 0 0 24px;
  text-align: center;
}
.c-tw-modal.purchase-processing .purchase-hdg {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  text-align: center;
}
.c-tw-modal.purchase-processing .purchase-text {
  max-width: 480px;
  margin: 0 auto 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  line-height: 1.6666666667;
  color: var(--color-text);
}
.c-tw-modal.purchase-processing .btn-purchase {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 345px;
  padding: 12px 24px;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--blue-re-blue-500);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}
@media screen and (min-width: 1025px) {
  .c-tw-modal.purchase-processing .purchase-hdg {
    font-size: 20px;
  }
  .c-tw-modal.purchase-processing .purchase-text {
    font-size: 14px;
  }
  .c-tw-modal.purchase-processing .btn-purchase {
    max-width: 280px;
  }
}
/*===============================
  振込エラーモーダル
================================*/
.c-tw-modal.withdrawal-error .withdrawal-hdg {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  text-align: center;
}
.c-tw-modal.withdrawal-error .withdrawal-text {
  max-width: 480px;
  margin: 0 auto 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  line-height: 1.6666666667;
  color: var(--color-text);
}
.c-tw-modal.withdrawal-error .btn-ok {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 345px;
  padding: 12px 24px;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--blue-re-blue-500);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}
@media screen and (min-width: 1025px) {
  .c-tw-modal.withdrawal-error .withdrawal-hdg {
    font-size: 20px;
  }
  .c-tw-modal.withdrawal-error .withdrawal-text {
    font-size: 14px;
  }
  .c-tw-modal.withdrawal-error .btn-ok {
    max-width: 280px;
  }
}