@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap");
:root {
  --key-base: #ffb100;
  --key-sub: #666;
  --key-store: #7fc9ed;
  --c-white: #fff;
  --c-black: #2d2d2d;
  --c-gray: #707070;
  --c-red: #d00000;
  --c-green: #009955;
  --c-blue: #7fc9ed;
  --c-yellow: #ffcf00;
  --c-orange: #ff3b30;
  --c-purple: #7b5fc6;
  --c-link: #0088cc;
  --c-border: #ececec;
  --bg-base: #fff9ea;
  --bg-store: #d9f3ff;
  --bg-gray: #f7f7f7;
  --c-hachipo: #ffd000;
  --c-hachipo-blue: #29adc2;
  --bg-hachipo: #a9dee7;
  --bg-hachipo-shadow: #daedf2;
}

/* ---------------------------------------------------
   Reset
--------------------------------------------------- */
/***
    The new CSS reset - version 1.8.5 (last updated 14.6.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

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

a, button {
  cursor: revert;
}

ol, ul, menu {
  list-style: none;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

table {
  border-collapse: collapse;
}

input, textarea {
  -webkit-user-select: auto;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
       appearance: revert;
}

:where(pre) {
  all: revert;
}

::-moz-placeholder {
  color: unset;
}

::placeholder {
  color: unset;
}

::marker {
  content: initial;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
}

/* ---------------------------------------------------
   Base
--------------------------------------------------- */
html {
  position: relative;
  font-family: "BIZ UDPGothic", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", YuGothic, sans-serif;
  font-size: 62.5%;
  font-weight: 500;
  word-wrap: break-word;
  overflow-x: hidden;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  color: var(--c-black);
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  min-height: 100vh;
  overflow-x: hidden;
}

#master_header {
  position: relative;
  border-bottom: 1px solid var(--c-border);
}

#header-logo {
  width: 220px;
}
#header-nav {
  font-size: 1.8rem;
}
@media ( max-width: 1050px ) {
  #header-nav .navigation {
    position: absolute;
    right: -100%;
    background: var(--c-white);
    border-left: 1px solid #f0f0f0;
    transition: 0.3s;
    z-index: 100;
  }
  #header-nav .navigation li a {
    display: block;
    border-bottom: 1px solid var(--c-border);
    padding: 0.8em 2.5em;
  }
}
@media ( min-width: 1050px ) {
  #header-nav .navigation {
    display: flex;
    gap: 30px;
  }
  #header-nav .navigation li.active a {
    -webkit-text-decoration: underline 4px var(--key-store);
            text-decoration: underline 4px var(--key-store);
  }
}
@media ( max-width: 1050px ) {
  #header-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px calc(env(safe-area-inset-bottom) + 10px);
    z-index: 1000;
  }
  #header-button .btn-store {
    border: 3px solid currentColor;
    background: var(--c-white);
    border-radius: 1.6rem;
    color: var(--c-red);
    width: calc(100% - 50px);
  }
  #header-button .btn-top {
    width: 3.6rem;
    padding-top: 5px;
  }
}
@media ( min-width: 1050px ) {
  #header-button {
    position: static;
  }
}

#headerNavi-tgl:checked + .o-hamburger::before {
  width: 80%;
  transform: rotate(45deg);
}
#headerNavi-tgl:checked + .o-hamburger::after {
  width: 80%;
  transform: translateY(-10px) rotate(-45deg);
}
#headerNavi-tgl:checked ~ div > .navigation {
  right: 0;
}

h1 {
  font-size: clamp(3rem, 2rem + 2vw, 3.6rem);
}

h2 {
  font-size: clamp(2.2rem, 2rem + 1vw, 3.2rem);
}

select {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}

th, td {
  padding: 0.5em 1em;
}

img {
  vertical-align: bottom;
}

#breadcrumb {
  background: #f2f2f2;
  padding: 15px 20px;
}
#breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}
#breadcrumb ul li {
  position: relative;
  font-size: 1.8rem;
}
#breadcrumb ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1em;
  display: block;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  width: 0.8em;
  height: 0.8em;
  margin: auto;
  transform: rotate(45deg);
}

#master_main {
  flex: 1;
}

#master_footer {
  background: var(--c-white);
  color: var(--c-black);
  width: 100%;
  padding: 0;
  margin-top: auto;
}
#master_footer .l-container {
  max-width: 1080px;
}
#master_footer .footer-nav > div {
  width: 100%;
}
#master_footer .footer-nav dd a {
  color: var(--c-link);
  font-size: 1.8rem;
  text-decoration: underline;
}

@media (max-width: 1049px) {
  #master_footer .footer-nav dd {
    margin-left: 1em;
    margin-bottom: 20px;
  }
  #master_footer .footer-app {
    padding-bottom: 100px;
  }
}
@media (min-width: 1050px) {
  #master_footer .footer-nav > div {
    width: auto;
  }
  #master_footer .footer-nav .nav-user ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #master_footer .footer-nav .nav-user ul li:nth-of-type(-n+5) {
    grid-column: 1;
  }
  #master_footer .footer-nav .nav-user ul li:nth-of-type(n+6) {
    grid-column: 2;
  }
  #master_footer .footer-nav .nav-user ul li:nth-of-type(6) {
    grid-row: 1;
  }
  #master_footer .footer-nav .nav-user ul li:nth-of-type(7) {
    grid-row: 2;
  }
  #master_footer .footer-nav .nav-user ul li:nth-of-type(8) {
    grid-row: 3;
  }
}
/* ---------------------------------------------------
    Block Element
--------------------------------------------------- */
.o-box {
  display: block;
  background: var(--bg-gray);
  border-radius: 10px;
  padding: 20px;
  margin: 30px 0;
}

.o-list li,
.o-list-disc li {
  position: relative;
  padding-left: 1.35em;
}
.o-list li::before,
.o-list-disc li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  display: block;
  background: currentColor;
  border-radius: 100%;
  width: 5px;
  height: 5px;
}

.o-list-disc li::before {
  top: 0.25em;
  left: 0;
  background: var(--c-yellow);
  width: 1em;
  height: 1em;
}

.o-list-flow {
  --arrow-color: var(--key-base);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.o-list-flow li {
  position: relative;
  width: 100%;
}
.o-list-flow li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  background: var(--arrow-color);
  -webkit-clip-path: polygon(75% 30%, 50% 70%, 25% 30%);
          clip-path: polygon(75% 30%, 50% 70%, 25% 30%);
  width: 30px;
  height: 30px;
  margin: auto;
}

.o-table {
  --table-border: #d9d9d9;
}
.o-table th, .o-table td {
  border: solid var(--table-border);
  border-width: 0 0 1px 1px;
}
.o-table thead {
  --table-color: var(--key-base);
  background: var(--table-color);
  color: var(--c-white);
}
.o-table thead th {
  border: 1px solid var(--table-color);
}
.o-table thead th + th {
  border-left-color: var(--c-white);
}
.o-table tbody tr:first-child td {
  border-top: 0;
}
.o-table tbody td:last-child {
  border-right: 1px solid var(--table-border);
}
.o-table.rounded {
  border-collapse: separate;
}
.o-table.rounded thead tr:first-child th:first-child {
  border-radius: 1.5rem 0 0 0;
}
.o-table.rounded thead tr:first-child th:last-child {
  border-radius: 0 1.5rem 0 0;
}
.o-table.rounded tbody tr:last-child td:first-child {
  border-radius: 0 0 0 1.5rem;
}
.o-table.rounded tbody tr:last-child td:last-child {
  border-radius: 0 0 1.5rem 0;
}

.o-accordion summary {
  background: var(--key-base);
  border-bottom: 2px solid var(--c-white);
  list-style: none;
  font-weight: 600;
  padding: 10px 15px 10px 20px;
  cursor: pointer;
}
.o-accordion summary::-webkit-details-marker {
  display: none;
}
@media (min-width: 1050px) {
  .o-accordion .o-plus .open,
  .o-accordion .o-plus .close {
    margin-left: 10px;
  }
  .o-accordion .o-plus .close {
    display: none;
  }
  .o-accordion .o-plus details[open] .open {
    display: none;
  }
  .o-accordion .o-plus details[open] .close {
    display: block;
  }
}

.o-pagination {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.o-pagination .item {
  position: relative;
  display: block;
  border: 1px solid var(--key-store);
  color: var(--key-store);
  text-align: center;
  width: 100%;
  max-width: 300px;
  transition: 0.3s;
}
.o-pagination .item a {
  display: block;
  width: 100%;
  padding: 0.5rem 1.5rem;
}
.o-pagination .item a:hover {
  opacity: 1;
}
.o-pagination .item a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border: 3px solid transparent;
  width: 0.8em;
  height: 0.8em;
  margin: auto;
  transform: rotate(45deg);
  pointer-events: none;
}
.o-pagination .item.prev a::before {
  left: 20px;
  border-bottom-color: currentColor;
  border-left-color: currentColor;
}
.o-pagination .item.next a::before {
  right: 20px;
  border-top-color: currentColor;
  border-right-color: currentColor;
}
.o-pagination .item.current {
  pointer-events: none;
  cursor: default;
}
.o-pagination .item.current, .o-pagination .item:hover {
  background: var(--key-store);
  color: var(--c-white);
}

.o-campaign {
  background: var(--c-white);
  border: 6px solid var(--c-red);
  border-radius: 16px;
  line-height: 1.3;
}
.o-campaign h3 {
  background: var(--c-red);
  color: var(--c-white);
  font-size: 2.2rem;
  font-weight: 600;
  text-align: center;
  padding: 15px;
}
.o-campaign dt {
  font-size: 2rem;
  margin-bottom: 10px;
}
.o-campaign dd {
  font-size: 1.6rem;
}
.o-campaign dd:not(:last-child) {
  border-bottom: 1px solid var(--c-gray);
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.o-campaign dd ul.l-flex {
  gap: 5px 30px;
}
.o-campaign dd ul.l-flex li {
  width: 100%;
}
@media (min-width: 1050px) {
  .o-campaign h3 {
    font-size: 3rem;
    padding: 20px;
  }
  .o-campaign dt {
    font-size: 2.5rem;
  }
  .o-campaign dd {
    font-size: 2rem;
  }
  .o-campaign dd ul.l-flex li {
    width: auto;
  }
}

.o-modal .o-modal-container {
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}
.o-modal > input:checked + .o-modal-container {
  opacity: 1;
}
.o-modal > input:checked + .o-modal-container .o-modal-wrap > .inner,
.o-modal > input:checked + .o-modal-container .o-modal-bg {
  pointer-events: auto;
}
.o-modal-wrap, .o-modal-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.o-modal-wrap {
  z-index: 200;
}
.o-modal-bg {
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

/* ---------------------------------------------------
    Parts Element
--------------------------------------------------- */
.o-head-line {
  position: relative;
  text-align: center;
  padding-bottom: 15px;
  margin-bottom: 30px;
}
.o-head-line::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background: var(--c-blue);
  width: 40px;
  height: 6px;
  margin: auto;
}

.o-head-bothline {
  border-bottom: 2px solid var(--key-store);
  font-size: 2.8rem;
  font-weight: 600;
  padding: 0.2em 0;
  margin-bottom: 30px;
}

.o-btn,
.o-btn-sm,
.o-btn-box {
  position: relative;
  text-align: center;
  padding: 0.5em;
  transition: 0.3s;
  cursor: pointer;
}

.o-btn:hover,
.o-btn-sm:hover {
  opacity: 0.6;
}
.o-btn.red,
.o-btn-sm.red {
  background: var(--c-red);
  color: var(--c-white);
  font-weight: 600;
}
.o-btn.border,
.o-btn-sm.border {
  background: var(--c-white);
  border: 2px solid currentColor;
  font-weight: 600;
}
.o-btn.border.red,
.o-btn-sm.border.red {
  color: var(--c-red);
}
.o-btn.arrow,
.o-btn-sm.arrow {
  padding-right: 35px;
}
.o-btn.arrow::after,
.o-btn-sm.arrow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  display: block;
  border: 3px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  width: 0.8em;
  height: 0.8em;
  margin: auto;
  transform: rotate(45deg);
}

.o-btn-sm {
  display: inline-block;
  border-radius: 30px;
  font-size: 0.9em;
  padding: 10px 20px;
}

.o-btn-box {
  --btn-color: var(--key-base);
  display: inline-block;
  background: var(--c-white);
  border: 2px solid var(--btn-color);
  border-radius: 6px;
  box-shadow: 0 10px 0 var(--btn-color);
  font-size: 1.8rem;
  font-weight: 600;
  padding: 18px 30px 18px 60px;
  margin-bottom: 10px;
  min-width: 300px;
  max-width: 500px;
}
.o-btn-box::before, .o-btn-box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  display: block;
  margin: auto;
  transition: 0.3s;
}
.o-btn-box::before {
  left: 25px;
  border: 2px solid transparent;
  border-right-color: var(--btn-color);
  border-bottom-color: var(--btn-color);
  width: 15px;
  height: 15px;
  transform: rotate(315deg);
}
.o-btn-box::after {
  left: 20px;
  background: var(--btn-color);
  width: 12px;
  height: 2px;
}
.o-btn-box:hover {
  box-shadow: none !important;
  transform: translateY(10px);
}
.o-btn-box:hover::before {
  left: 30px;
}
.o-btn-box:hover::after {
  left: 25px;
}
.o-btn-box.red {
  --btn-color: #e60019;
}

.o-btn-oval {
  --btn-color: var(--c-hachipo-blue);
  display: block;
  border: 2px solid var(--btn-color);
  border-radius: 4rem;
  color: var(--btn-color);
  padding: 0.8em 1.5em;
  transition: 0.2s;
}
.o-btn-oval:hover {
  background: var(--btn-color);
  color: var(--c-white);
}

.o-plus {
  position: relative;
  pointer-events: none;
}
.o-plus::before, .o-plus::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.35em;
  display: block;
  background: var(--key-base);
  border-radius: 3px;
  width: 0.8em;
  height: 3px;
  margin: auto;
  z-index: 1;
}
.o-plus::after {
  transition: 0.3s;
  transform: rotate(90deg);
}
.o-plus .circle {
  display: block;
  width: 1.5em;
  height: 1.5em;
}

details[open] .o-plus::after {
  transform: rotate(0deg);
}

.o-hamburger {
  position: relative;
  display: block;
  width: 40px;
  height: 50px;
  cursor: pointer;
  z-index: 100;
}
.o-hamburger::before, .o-hamburger::after {
  content: "";
  position: absolute;
  display: block;
  background: var(--c-gray);
  height: 3px;
  width: 100%;
  transition: 0.3s;
}
.o-hamburger::before {
  top: 20px;
}
.o-hamburger::after {
  top: 30px;
}

.o-category {
  display: inline-block;
  background: var(--c-gray);
  color: var(--c-white);
  text-align: center;
  min-width: 160px;
  padding: 5px 10px;
}
.o-category.admin {
  background: var(--c-green);
}
.o-category.campaign {
  background: var(--c-orange);
}
.o-category.event {
  background: var(--c-blue);
}

.o-input-search {
  position: relative;
  display: block;
  border: 1px solid var(--c-gray);
}
.o-input-search::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.5em;
  display: block;
  background: url(../img/common/icon-search.svg);
  width: 1em;
  height: 1em;
  margin: auto;
  pointer-events: none;
}
.o-input-search input {
  width: 100%;
  padding: 5px 20px 5px 50px;
}
.o-input-search input::-moz-placeholder {
  color: var(--c-gray);
}
.o-input-search input::placeholder {
  color: var(--c-gray);
}

.o-horizontal {
  border-top: 1px solid var(--c-border);
}
.o-horizontal.__bold {
  border-top-width: 3px;
}

/* ---------------------------------------------------
    Pages
--------------------------------------------------- */
/*   CSS for News and FAQ pages   */
.p-detail-contents .contents-head .title {
  font-size: 3.2rem;
  text-align: left;
  padding: 0;
  margin: 10px 0;
}
.p-detail-contents .contents-head .title::before {
  content: none;
}
.p-detail-contents .contents-image img {
  max-width: 335px;
}
.p-detail-contents .contents-body h1::before {
  content: none;
}
.p-detail-contents .contents-body h2 {
  border-bottom: 2px solid var(--key-store);
  font-size: 2.8rem;
  font-weight: 600;
  padding: 0.2em 0;
  margin: 50px 0 30px;
}
.p-detail-contents .contents-body a:not(.o-btn-box) {
  color: var(--c-link);
  text-decoration: underline;
}
@media (min-width: 1050px) {
  .p-detail-contents .contents-image img {
    max-width: 1000px;
  }
}

.p-faq-list .list-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--c-gray);
  padding: 8px;
  transition: 0.3s;
}
.p-faq-list .list-item::before {
  content: "Q";
  color: var(--c-blue);
  font-size: 3.2rem;
}
.p-faq-list .list-item::after {
  content: "＞";
  color: var(--c-blue);
  font-weight: 600;
  margin-left: auto;
}
.p-faq-list .list-item:hover {
  opacity: 0.6;
}
.p-faq-category summary {
  position: relative;
  border-bottom: 1px solid var(--c-gray);
  padding: 10px 15px 10px 0;
  cursor: pointer;
}
.p-faq-category summary figure {
  display: block;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}
.p-faq-category summary .o-plus {
  width: 1em;
  margin-left: auto;
}
.p-faq-category summary .o-plus::before, .p-faq-category summary .o-plus::after {
  background: var(--c-gray);
}
@media (min-width: 1050px) {
  .p-faq-category summary figure {
    width: 56px;
    height: 56px;
  }
}

/*   CSS for user pages   */
body.user #master_header {
  padding: 10px 20px;
}
@media ( max-width: 1050px ) {
  body.user #master_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  body.user #header-nav .navigation {
    top: 89px;
  }
}

.p-user-index #mv {
  padding: 20px 20px 0;
}
.p-user-index #mv .mv-copy {
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4.8rem);
}
.p-user-index #news .news-list li {
  color: var(--key-sub);
  margin-bottom: 10px;
}
@media ( min-width: 1050px ) {
  .p-user-index #news .news-list li {
    display: grid;
    grid-template-columns: 8em 1fr;
    gap: 30px;
  }
  .p-user-index #news .news-list li a {
    -webkit-text-decoration: underline 1px currentColor;
            text-decoration: underline 1px currentColor;
  }
}
.p-user-index #about .about-movie {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 800px;
}
.p-user-index #about .about-feature {
  display: grid;
  gap: 20px;
  border-top: 1px solid var(--c-border);
  margin-top: 30px;
  padding-top: 30px;
}
.p-user-index #about .about-feature figure {
  max-width: 500px;
  margin: auto;
}
@media ( min-width: 750px ) {
  .p-user-index #about .about-feature {
    grid-template-columns: 1fr 320px;
    padding-top: 50px;
    margin-top: 50px;
  }
  .p-user-index #about .about-feature h3 {
    grid-column: 1;
    grid-row: 1;
  }
  .p-user-index #about .about-feature .inner {
    grid-column: 1;
    grid-row: 2;
  }
  .p-user-index #about .about-feature figure {
    grid-column: 2;
    grid-row: 1/3;
  }
}
.p-user-index #usage .usage-item {
  flex: 280px;
}
.p-user-index #usage .usage-item > figure {
  height: 110px;
  max-width: 150px;
}
.p-user-index #hachipo .hachipo-inner {
  display: grid;
  gap: 30px;
}
@media ( min-width: 750px ) {
  .p-user-index #hachipo .hachipo-inner {
    grid-template-columns: 1fr clamp(35%, 100px + 2vw, 350px);
  }
  .p-user-index #hachipo .hachipo-inner > ul {
    grid-column: 1;
    grid-row: 2;
  }
  .p-user-index #hachipo .hachipo-image {
    grid-column: 2;
    grid-row: 1/4;
    align-self: center;
  }
}

.p-user-news .news-list .item {
  display: block;
  border-bottom: 1px solid var(--c-border);
  padding: 20px 10px;
}
.p-user-news .news-list .item-date {
  font-size: 0.9em;
  padding: 5px 0;
}
.p-user-news .news-list .item-title {
  grid-column: 1/3;
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.6rem);
}
.p-user-news .furusato-receive {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.p-user-news .furusato-receive figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
}
@media ( min-width: 750px ) {
  .p-user-news .news-list .item {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 10px 20px;
  }
}

.p-user-charge .charge-machine-01 dd {
  grid-template-columns: 250px 1fr;
}
.p-user-charge .charge-machine-02 {
  justify-content: center;
  align-items: center;
  max-width: 750px;
}
@media ( min-width: 750px ) {
  .p-user-charge .charge-machine-02 {
    grid-template-columns: 1fr 1fr;
  }
  .p-user-charge .charge-machine-02 img:first-child {
    grid-column: 1/3;
  }
}

.p-user-shop .shop-category select,
.p-user-shop .shop-category button {
  border: 1px solid var(--c-gray);
  border-radius: 5px;
  padding: 8px 15px;
  cursor: pointer;
}
.p-user-shop .shop-category select {
  display: flex;
  align-items: center;
  width: 80%;
}
.p-user-shop .shop-category button {
  background: var(--c-gray);
  color: var(--c-white);
  text-align: center;
  width: 50%;
}
@media ( min-width: 1050px ) {
  .p-user-shop .shop-category select {
    width: 30%;
  }
  .p-user-shop .shop-category button {
    width: auto;
  }
}
.p-user-shop .shop-list .item {
  border-bottom: 2px solid var(--c-gray);
  padding: 12px 0;
}
.p-user-shop .shop-list .category {
  display: flex;
  gap: 0 1.5em;
  color: var(--key-sub);
  font-size: 1.2rem;
}
.p-user-shop .shop-list .category li {
  position: relative;
}
.p-user-shop .shop-list .category li:not(:first-child)::after {
  content: ">";
  position: absolute;
  left: -1em;
}
.p-user-shop .shop-list .name {
  font-size: 1.8rem;
}

/*   CSS for store pages   */
body.store #header-top .o-btn-sm {
  font-size: 1.6rem;
  line-height: 1.1;
  padding-top: 4px;
  padding-bottom: 4px;
}
@media ( max-width: 1050px ) {
  body.store #header-nav .navigation {
    top: 190px;
  }
}
body.store .o-accordion summary,
body.store .o-plus::before,
body.store .o-plus::after {
  background: var(--key-store);
}
body.store .p-mypage-link {
  width: 100%;
  padding: 10px;
}
body.store .p-mypage-link dt {
  color: var(--c-white);
  text-align: center;
  padding: 2px;
}
body.store .p-mypage-link.member dt {
  background: var(--c-link);
}
body.store .p-mypage-link.member .o-btn-box {
  --btn-color: var(--c-link);
}
body.store .p-mypage-link.shop dt {
  background: #4abfbf;
}
body.store .p-mypage-link.shop .o-btn-box {
  --btn-color: #4abfbf;
}
body.store .p-store-float {
  position: fixed;
  bottom: 5%;
  right: 2%;
  transition: 0.3s;
  z-index: 1000;
}
body.store .p-store-float:hover {
  bottom: 4%;
}
body.store .p-store-contacts .companies {
  border-top: 1px solid var(--c-white);
}
@media (max-width: 1049px) {
  body.store #master_header #header-top-btn {
    border-top: none;
    font-size: 1.6rem;
    line-height: 1.1;
    width: auto;
    margin-left: auto;
  }
  body.store #master_header #header-top-btn .o-btn-sm.arrow {
    padding: 8px 30px 8px 15px;
  }
  body.store #master_header #header-top-btn .o-btn-sm.arrow::after {
    right: 15px;
  }
  body.store #master_header #header-nav {
    order: 3;
  }
  body.store #master_header #header-nav .nav-menu {
    top: 106px;
  }
  body.store #master_footer .footer-logo {
    padding-bottom: calc(env(safe-area-inset-bottom) + 80px);
  }
}
body.store.index .p-index-mv {
  background: url(../img/store/index/mv.png);
  background-size: cover;
  background-position: left;
  padding: 0;
}
body.store.index .p-index-mv .inner {
  background: rgba(255, 255, 255, 0.7);
  width: 100%;
  max-width: initial;
  height: 100%;
  padding: 20px 10px;
}
body.store.index .p-index-mv .title {
  font-size: 2.8rem;
}
body.store.index .p-index-mv .wanted {
  color: var(--c-link);
  font-size: 5.4rem;
  line-height: 1.2;
}
body.store.index .p-index-mv .point li {
  width: 120px;
  margin: 10px 0;
}
@media (min-width: 1050px) {
  body.store.index .p-index-mv {
    background-position: center;
    min-height: 540px;
    padding: 60px 50px 80px;
  }
  body.store.index .p-index-mv .inner {
    max-width: 800px;
    height: auto;
    padding: 30px 30px 30px 200px;
    margin-left: -200px;
  }
  body.store.index .p-index-mv .title {
    font-size: 4rem;
  }
  body.store.index .p-index-mv .wanted {
    font-size: 8rem;
  }
  body.store.index .p-index-mv .point {
    position: absolute;
    top: 90%;
  }
  body.store.index .p-index-mv .point li {
    width: 180px;
  }
}
body.store.index .p-index-merit {
  display: grid;
  gap: 10px 30px;
  text-align: center;
}
body.store.index .p-index-merit header {
  text-align: center;
}
body.store.index .p-index-merit h3 {
  font-size: 3.2rem;
}
body.store.index .p-index-merit .sub {
  background: var(--c-link);
  border-radius: 3em;
  color: var(--c-white);
  padding: 5px 20px;
}
body.store.index .p-index-merit .inner {
  order: 2;
}
@media (min-width: 1050px) {
  body.store.index .p-index-merit {
    grid-template-columns: 1fr 200px;
    text-align: left;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  body.store.index .p-index-merit header {
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 1;
    grid-row: 1;
    text-align: left;
  }
  body.store.index .p-index-merit figure {
    grid-column: 2;
    grid-row: 1/3;
  }
  body.store.index .p-index-merit .inner {
    grid-column: 1;
    grid-row: 2;
    order: 0;
  }
}
body.store.index .p-index-flow {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 5px 20px;
  margin-bottom: 30px;
}
body.store.index .p-index-flow h3 {
  color: var(--c-link);
  font-size: 2.8rem;
  line-height: 1.2;
}
body.store.index .p-index-flow .inner {
  grid-column: 1/3;
}
@media (min-width: 1050px) {
  body.store.index .p-index-flow {
    grid-template-columns: 70px 1fr;
    grid-template-columns: 70px 1fr;
    align-items: flex-start;
    max-width: 800px;
    margin: 30px auto;
  }
  body.store.index .p-index-flow h3 {
    padding-top: 20px;
  }
  body.store.index .p-index-flow figure {
    grid-row: 1/3;
  }
  body.store.index .p-index-flow .inner {
    grid-column: 2;
  }
}

.p-intvw .__underline {
  --lineColor: var(--key-store);
  border-bottom: 2px solid var(--lineColor);
  padding-bottom: 2px;
}
.p-intvw-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
}
.p-intvw-nav li {
  width: 100%;
}
.p-intvw-nav .o-btn-oval {
  font-size: 1.8rem;
  padding: 0.7em 1.3em;
}
@media ( min-width: 750px ) {
  .p-intvw-nav li {
    max-width: 200px;
  }
}
.p-intvw-enquete {
  background: var(--c-hachipo);
}
.p-intvw-enquete .__head {
  position: relative;
  border-radius: 0 0 5rem 5rem;
  padding: 50px 5rem 10px;
}
.p-intvw-enquete .__head::before, .p-intvw-enquete .__head::after {
  position: absolute;
  background: url(../img/store/interview/icon-paw.svg) no-repeat;
  display: block;
  margin: auto;
}
.p-intvw-enquete .__head::before {
  content: "";
  top: 10px;
  left: 0;
  right: 0;
  width: 30px;
  height: 30px;
}
@media ( min-width: 1050px ) {
  .p-intvw-enquete .__head {
    padding-top: 10px;
  }
  .p-intvw-enquete .__head::before, .p-intvw-enquete .__head::after {
    top: 0;
    bottom: 0;
    width: 53px;
    height: 60px;
  }
  .p-intvw-enquete .__head::before {
    left: 5rem;
    right: auto;
  }
  .p-intvw-enquete .__head::after {
    content: "";
    right: 5rem;
  }
}
.p-intvw-enquete .__contents {
  position: relative;
  filter: drop-shadow(8px 8px 0 rgb(255, 177, 0));
}
.p-intvw-enquete .__contents::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background: #d9d9d9;
  -webkit-clip-path: polygon(0 100%, 100% 0, 0 0);
          clip-path: polygon(0 100%, 100% 0, 0 0);
  width: 42px;
  height: 40px;
}
.p-intvw-enquete .__contents .inner {
  border-radius: 10px 10px 0 10px;
  -webkit-clip-path: polygon(0 -1%, 100% 0, 100% calc(100% - 40px), calc(100% - 42px) 100%, 0 100%);
          clip-path: polygon(0 -1%, 100% 0, 100% calc(100% - 40px), calc(100% - 42px) 100%, 0 100%);
  padding: 30px 30px 50px;
}
.p-intvw-enquete .__contents h3 > div.__underline {
  font-size: 2.4rem;
}
@media ( min-width: 1050px ) {
  .p-intvw-enquete .__contents h3 > div.__underline {
    font-size: 3rem;
  }
}
.p-intvw-enquete .__OtherContents h3 {
  border-radius: 10px 10px 0 0;
  padding-top: 10px;
}
.p-intvw-enquete .__OtherContents .inner {
  border-radius: 0 10px 0 10px;
}
.p-intvw-enquete .__OtherContents .inner dt {
  position: relative;
  padding-top: 55px;
}
.p-intvw-enquete .__OtherContents .inner dt::before {
  content: url(../img/store/interview/icon-paw.svg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 40px;
  height: 45px;
  margin: auto;
}
@media ( min-width: 750px ) {
  .p-intvw-enquete .__OtherContents .inner dt {
    padding-top: 0;
    padding-left: 55px;
  }
  .p-intvw-enquete .__OtherContents .inner dt::before {
    bottom: 0;
    right: auto;
  }
}
.p-intvw-enquete .__arrow {
  position: relative;
}
.p-intvw-enquete .__arrow::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  display: block;
  background: var(--bg-base);
  -webkit-clip-path: polygon(0 40%, 100% 40%, 50% 100%);
          clip-path: polygon(0 40%, 100% 40%, 50% 100%);
  width: 40px;
  height: 40px;
  margin: auto;
}
@media ( min-width: 750px ) {
  .p-intvw-enquete .__arrow::before {
    top: 0;
    bottom: 0;
    left: -15px;
    right: auto;
    -webkit-clip-path: polygon(0 50%, 50% 20%, 50% 80%);
            clip-path: polygon(0 50%, 50% 20%, 50% 80%);
  }
}
.p-intvw-enquete .__underline {
  --lineColor: var(--key-base);
  border-bottom-width: 4px;
}
.p-intvw-enquete .__questionCircle {
  display: grid;
  place-items: center;
  background: var(--key-base);
  border-radius: 100%;
  color: var(--c-white);
  letter-spacing: 0;
  width: 3em;
  height: 3em;
  padding: 0.5em;
}
.p-intvw-enquete .__graphDetail {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
}
.p-intvw-enquete .__graphDetail svg {
  vertical-align: bottom;
  width: 40px;
  height: 40px;
}
.p-intvw-enquete .__graphDetail svg.circle01 {
  fill: #e94161;
}
.p-intvw-enquete .__graphDetail svg.circle02 {
  fill: #43c8b3;
}
.p-intvw-enquete .__graphDetail svg.circle03 {
  fill: #3592ba;
}
.p-intvw-enquete .__graphDetail svg.circle04 {
  fill: #f6ba04;
}
.p-intvw-enquete .__graphDetail svg.circle05 {
  fill: #fbef56;
}
.p-intvw-interview .__contents .__underline {
  --lineColor: var(--key-base);
  padding-bottom: 0.2em;
  margin-bottom: 0.3em;
}
.p-intvw-interview .__horizontal {
  border: 1px solid var(--c-border);
  margin: 30px 0;
}

.p-icon-clip {
  position: relative;
}
.p-icon-clip::before {
  content: "";
  position: absolute;
  top: -31px;
  left: 24px;
  display: block;
  background: url(../img/store/interview/icon-clip.svg) no-repeat;
  width: 51px;
  height: 94px;
  z-index: 1;
}
@media ( max-width: 750px ) {
  .p-icon-clip::before {
    top: -23px;
    left: 15px;
    width: 38px;
  }
}

/* ---------- Store ---------- */
#master_main.hachipo {
  --c-hachipo: #ffd000;
  --c-hachipo-blue: #29adc2;
  --bg-hachipo: #a9dee7;
  --bg-hachipo-shadow: #daedf2;
  --bg-stripe: repeating-linear-gradient(225deg, var(--bg-hachipo), var(--bg-hachipo) 5px, var(--c-white) 5px, var(--c-white) 13px);
  background: var(--bg-stripe);
}
#master_main.hachipo .o-head-line {
  font-size: clamp(2rem, 1.8rem + 2vw, 3.6rem);
}
#master_main.hachipo h3.o-head-line {
  font-size: clamp(2rem, 1rem + 2.5vw, 3rem);
}
#master_main.hachipo .o-head-line::before,
#master_main.hachipo .o-head-bothline::before {
  background: var(--c-hachipo);
}
@media ( min-width: 750px ) {
  #master_main.hachipo .tb\:font-2rem {
    font-size: 2rem;
  }
}

.p-hachipo-logo {
  font-size: clamp(2rem, 1.8rem + 1vw, 2.8rem);
  width: 100%;
  max-width: 550px;
}
.p-hachipo-nav {
  color: var(--c-hachipo-blue);
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
}
.p-hachipo-nav li {
  width: 100%;
}
.p-hachipo-nav .label {
  display: block;
  border: 2px solid currentColor;
  border-radius: 40px;
  padding: 12px 10px;
  transition: 0.2s;
}
.p-hachipo-nav .label:hover {
  background: var(--c-hachipo-blue);
  color: var(--c-white);
}
.p-hachipo-about {
  position: relative;
  border: 5px solid var(--c-hachipo-blue);
  box-shadow: 10px 10px 0px 0px var(--bg-hachipo-shadow);
  text-align: center;
}
.p-hachipo-about .about-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20193.3%20193.5%22%3E%3Cpath%20d%3D%22m193.2%20158.7-6.9-25.7c4.6-11.5%207-23.7%207-36.2%200-12.8-2.5-25.2-7.4-37.1C181%2048%20174%2037.4%20165%2028.4c-9-9-19.6-16.1-31.3-21-10-4.2-20.5-6.6-31.3-7.2V0h-5.7C84%200%2071.5%202.5%2059.7%207.4s-22.3%2012-31.3%2021S12.3%2048%207.5%2059.8%200%2084%200%2096.8c0%2025.9%2010%2050.2%2028.3%2068.5%2018.3%2018.3%2042.5%2028.4%2068.3%2028.4h.1c21.6%200%2042.6-7.3%2059.5-20.7l17.8%204.8c1.3.4%202.7.5%204.1.5%202.4%200%204.7-.6%206.8-1.6%202.1-1.1%204-2.6%205.4-4.5%201.4-1.9%202.4-4.1%202.9-6.4.6-2.3.6-4.7%200-7.1z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3Cpath%20d%3D%22M96.6%2012.8c22.2%200%2043.5%208.9%2059.3%2024.6%2015.7%2015.8%2024.6%2037.1%2024.6%2059.4%200%2011.4-2.3%2022.6-6.7%2033l-1%202.3.6%202.4%207.4%2027.6c.1.4.1.8.1%201.3-.1.4-.3.8-.5%201.1-.3.3-.6.6-1%20.8-.4.2-.8.3-1.2.3-.3%200-.5%200-.8-.1l-20.6-5.5-3.5-1-2.8%202.4C135.4%20174%20116.4%20181%2096.7%20181c-22.2%200-43.6-8.9-59.3-24.7s-24.6-37.1-24.6-59.4c0-22.3%208.9-43.7%2024.6-59.4%2015.7-15.8%2037-24.7%2059.2-24.7zm0-7.1c-11.9%200-23.8%202.4-34.8%206.9-11%204.6-21.1%2011.3-29.5%2019.8-8.4%208.5-15.1%2018.5-19.7%2029.6C8%2073%205.7%2084.9%205.7%2096.8c0%2024.2%209.6%2047.4%2026.6%2064.5C49.4%20178.4%2072.5%20188%2096.6%20188c21.3%200%2042-7.5%2058.4-21.2l20.6%205.5c.8.2%201.7.3%202.6.3%201.5%200%203-.4%204.3-1%201.4-.7%202.5-1.6%203.4-2.8.9-1.2%201.5-2.6%201.8-4.1.3-1.5.3-3-.1-4.5l-7.4-27.6c4.8-11.3%207.3-23.5%207.3-35.8%200-12-2.4-23.8-6.9-34.9-4.6-11.1-11.3-21.1-19.7-29.6-8.4-8.5-18.5-15.2-29.5-19.8-11-4.5-22.8-6.8-34.8-6.8z%22%20style%3D%22fill%3A%23fed400%22%2F%3E%3C%2Fsvg%3E") no-repeat;
  background-position: center;
  background-size: 100%;
  font-weight: 700;
  line-height: 1.3;
  width: clamp(220px, 200px + 3vw, 300px);
  height: clamp(220px, 200px + 3vw, 300px);
  padding: 20px;
  margin: auto;
}
@media ( max-width: 1050px ) {
  .p-hachipo-about .about-logo {
    margin-top: 20px;
  }
  .p-hachipo-about .about-inner {
    padding: 20px 30px 30px;
  }
}
@media ( min-width: 1050px ) {
  .p-hachipo-about {
    padding-left: 110px;
    margin: 50px 30px 50px 140px;
  }
  .p-hachipo-about .about-logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -130px;
    font-size: 3rem;
    line-height: 1.2;
  }
  .p-hachipo-about .about-inner {
    padding: 30px;
  }
}
.p-hachipo-accordion summary {
  position: relative;
  background-color: var(--c-hachipo);
  border-bottom-width: 5px;
  padding: 20px 20px 15px;
}
.p-hachipo-accordion summary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  display: block;
  border: solid var(--c-white);
  border-width: 3px 3px 0 0;
  border-left: 0;
  border-bottom: 0;
  width: 0.6em;
  height: 0.6em;
  margin: auto;
  transform: translateY(-10%) rotate(135deg);
  transition: 0.3s;
}
.p-hachipo-accordion li:last-child summary {
  border-width: 0;
}
.p-hachipo-accordion details[open] summary {
  border-bottom: 0;
}
.p-hachipo-accordion details[open] summary::after {
  transform: translateY(25%) rotate(-45deg);
}
.p-hachipo-accordion .inner {
  border: 5px solid var(--c-hachipo);
  padding: 40px 20px;
}
@media ( min-width: 1050px ) {
  .p-hachipo-accordion .inner {
    padding: 60px;
  }
}
.p-hachipo-fun {
  position: relative;
  border: 5px solid var(--fun-color);
  border-radius: 26px;
}
.p-hachipo-fun.__pink {
  --fun-color: #fc7d8c;
  --fun-image: url(../img/user/hachipo/fun01.png);
}
.p-hachipo-fun.__pink::before {
  width: 70px;
}
.p-hachipo-fun.__green {
  --fun-color: #3dd094;
  --fun-image: url(../img/user/hachipo/fun02.png);
}
.p-hachipo-fun.__green::before {
  width: 120px;
}
.p-hachipo-fun.__blue {
  --fun-color: var(--c-hachipo-blue);
  --fun-image: url(../img/user/hachipo/fun03.png);
}
.p-hachipo-fun.__blue::before {
  width: 110px;
}
@media ( max-width: 1050px ) {
  .p-hachipo-fun {
    margin-top: 120px;
  }
}
.p-hachipo-fun::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  right: 0;
  left: 0;
  display: block;
  background: var(--fun-image) no-repeat;
  background-position: center bottom;
  background-size: 100%;
  height: 120px;
  margin: auto;
}
@media ( min-width: 1050px ) {
  .p-hachipo-fun::before {
    left: auto;
    right: 50px;
  }
}
.p-hachipo-fun h4 {
  font-size: 2.5rem;
  color: var(--fun-color);
}
.p-hachipo-kuji h4 {
  position: relative;
}
.p-hachipo-kuji h4::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  background: var(--c-hachipo);
  width: 100%;
  height: 3px;
  margin: auto;
}
.p-hachipo-box {
  --box-color: var(--c-hachipo-blue);
  border: 5px solid var(--box-color);
  border-radius: 1.2em;
  padding: 30px;
}
.p-hachipo-box h4 {
  color: var(--box-color);
}
.p-hachipo-box > section + section::before {
  position: relative;
  content: "";
  display: block;
  background: var(--box-color);
  width: 100%;
  height: 3px;
  opacity: 0.2;
  margin-top: 30px;
}
.p-hachipo-box.pink {
  --box-color: #FC7D8C;
}
.p-hachipo-box.green {
  --box-color: #3dd094;
}
.p-hachipo-flow .step {
  display: block;
  border: 5px solid var(--c-hachipo);
  border-radius: 3em;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 15px;
  margin: auto;
}
.p-hachipo-image {
  overflow-x: auto;
}
.p-hachipo-image > img {
  min-width: 1000px;
}
.p-hachipo-kuji dt {
  background: var(--c-hachipo-blue);
  border-radius: 3rem;
  color: var(--c-white);
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
}
.p-hachipo-app {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px 30px;
  background: var(--c-hachipo);
}
.p-hachipo-accept {
  border: 5px solid var(--c-hachipo-blue);
  border-radius: 26px;
  padding: 30px;
}
.p-hachipo-accept.__spot {
  padding: 0 30px 30px 0;
}
.p-hachipo-accept.__spot h4 {
  position: relative;
  top: calc(-1em - 5px);
  left: -5px;
  display: inline-block;
  background: var(--c-hachipo-blue);
  border-radius: 50px 64px 64px 0;
  color: var(--c-white);
  padding: 10px 20px;
}
.p-hachipo-accept h4 {
  color: var(--c-hachipo-blue);
}
.p-hachipo-accept h4.l-relative {
  padding-left: calc(30px + 0.3em);
}
.p-hachipo-accept .accept-count {
  position: absolute;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--c-hachipo-blue);
  color: var(--c-white);
  font-size: 1.4rem;
  letter-spacing: 0;
  border-radius: 100%;
  width: 30px;
  height: 30px;
}
.p-hachipo-accept .o-btn-box {
  font-size: 1.6rem;
  min-width: 150px;
  padding-right: 20px;
}

.l-container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.l-inner {
  padding: 30px 20px;
}

.l-relative {
  position: relative;
}

.index-1 {
  z-index: 1;
}

.l-none {
  display: none;
}

.l-block {
  display: block;
}

.l-grid {
  display: grid;
}

.l-flex {
  display: flex;
}

.l-inline-block {
  display: inline-block;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

.justify-right {
  justify-content: right;
}

.justify-center {
  justify-content: center;
}

.justify-around {
  justify-content: space-around;
}

.justify-between {
  justify-content: space-between;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-end {
  justify-self: flex-end;
}

.place-center {
  place-content: center;
}

.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-shrink {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-grow-1 {
  flex-grow: 1;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.gap5 {
  gap: 5px;
}

.gap10 {
  gap: 10px;
}

.gap20 {
  gap: 20px;
}

.gap30 {
  gap: 30px;
}

.gap50 {
  gap: 50px;
}

.row-gap10 {
  row-gap: 10px;
}

.row-gap20 {
  row-gap: 20px;
}

.row-gap30 {
  row-gap: 30px;
}

.row-gap50 {
  row-gap: 50px;
}

.column-gap10 {
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.column-gap20 {
  -moz-column-gap: 20px;
       column-gap: 20px;
}

.column-gap30 {
  -moz-column-gap: 30px;
       column-gap: 30px;
}

.w-0 {
  width: 0;
}

.w-full {
  width: 100%;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-min {
  width: -moz-min-content;
  width: min-content;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

@media (max-width: 749px) {
  .sp\:justify-center {
    justify-content: center;
  }
  .sp\:justify-between {
    justify-content: space-between;
  }
  .sp\:w-full {
    width: 100%;
  }
}
@media ( max-width: 750px ) {
  .sp\:block {
    display: block;
  }
  .sp\:flex-wrap {
    flex-wrap: wrap;
  }
}
@media ( max-width: 1050px ) {
  .tb-less\:justify-center {
    justify-content: center;
  }
  .tb-less\:align-center {
    align-items: center;
  }
  .tb-less\:flex-wrap {
    flex-wrap: wrap;
  }
}
@media ( min-width: 750px ) {
  .tb\:l-flex {
    display: flex;
  }
  .tb\:l-grid {
    display: grid;
  }
  .tb\:flex-wrap {
    flex-wrap: wrap;
  }
  .tb\:flex-nowrap {
    flex-wrap: nowrap;
  }
  .tb\:flex-1 {
    flex: 1;
  }
  .tb\:order-1 {
    order: 1;
  }
}
@media ( min-width: 1050px ) {
  .pc\:l-block {
    display: block;
  }
  .pc\:flex {
    display: flex;
  }
  .pc\:flex-wrap {
    flex-wrap: wrap;
  }
  .pc\:flex-nowrap {
    flex-wrap: nowrap;
  }
  .pc\:justify-between {
    justify-content: space-between;
  }
  .pc\:flex-shrink {
    flex-shrink: 0;
  }
  .pc\:order-1 {
    order: 1;
  }
  .pc\:w-1\/3 {
    width: 30%;
  }
}
/* ---------- Utility ---------- */
.hidden {
  display: none;
}

.overflow-hidden {
  overflow: hidden;
}

@media (max-width: 1049px) {
  .sp\:hidden {
    display: none;
  }
}
@media (min-width: 1050px) {
  .pc\:hidden {
    display: none;
  }
}
.c-sub {
  color: var(--key-sub);
}

.c-store {
  color: var(--key-store);
}

.c-link {
  color: var(--c-link);
}

.c-red {
  color: var(--c-red);
}

.c-blue {
  color: var(--c-blue);
}

.c-gray {
  color: var(--c-gray);
}

.c-black {
  color: var(--c-black);
}

.c-white {
  color: var(--c-white);
}

.font-rounded {
  font-family: "M PLUS Rounded 1c";
  font-weight: 600;
}

.font-xs {
  font-size: 0.6em;
}

.font-sm {
  font-size: 0.8em;
}

.font-lg {
  font-size: 1.2em;
}

.font-xl {
  font-size: clamp(1.3em, 1rem + 2vw, 1.8em);
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.tracking-none {
  letter-spacing: 0;
}

.break-all {
  word-break: break-all;
}

.whitespace-nowrap {
  white-space: nowrap;
}

@media (max-width: 1049px) {
  .sp\:text-center {
    text-align: center;
  }
}
@media ( max-width: 750px ) {
  .sp\:font-sm {
    font-size: 0.8em;
  }
  .sp\:font-bold {
    font-weight: 700;
  }
}
@media ( min-width: 750px ) {
  .tb\:font-medium {
    font-weight: 500;
  }
  .tb\:text-center {
    text-align: center;
  }
  .tb\:text-left {
    text-align: left;
  }
}
@media ( min-width: 1050px ) {
  .pc\:font-xl {
    font-size: 1.4em;
  }
  .pc\:text-left {
    text-align: left;
  }
}
.bg-base {
  background-color: var(--bg-base);
}

.bg-key {
  background-color: var(--key-base);
}

.bg-store {
  background-color: var(--key-store);
}

.bg-gray {
  background-color: var(--bg-gray);
}

.bg-white {
  background-color: var(--c-white);
}

.bg-blue {
  background-color: var(--c-link);
}

.bg-hachipo {
  background-color: var(--c-hachipo);
}

.object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-none {
  -o-object-fit: none;
     object-fit: none;
}

.rounded {
  border-radius: 1.5rem;
}

.oval {
  border-radius: 3rem;
}

.circle {
  border-radius: 100%;
}

@media (min-width: 1050px) {
  .pc\:oval {
    border-radius: 3rem;
  }
}
.p0 {
  padding: 0;
}

.p5 {
  padding: 5px;
}

.p10 {
  padding: 10px;
}

.p20 {
  padding: 20px;
}

.p30 {
  padding: 30px;
}

.pt30 {
  padding-top: 30px;
}

.pb30 {
  padding-bottom: 30px;
}

.px10 {
  padding-left: 10px;
  padding-right: 10px;
}

.px20 {
  padding-left: 20px;
  padding-right: 20px;
}

.px30 {
  padding-left: 30px;
  padding-right: 30px;
}

.py10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.m0 {
  margin: 0;
}

.mt0 {
  margin-top: 0;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.mt80 {
  margin-top: 80px;
}

.mb0 {
  margin-bottom: 0;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb50 {
  margin-bottom: 50px;
}

.ml5 {
  margin-left: 5px;
}

.ml30 {
  margin-left: 30px;
}

.mr10 {
  margin-right: 10px;
}

.mr20 {
  margin-right: 20px;
}

.mr30 {
  margin-right: 30px;
}

.mr40 {
  margin-right: 40px;
}

.mr50 {
  margin-right: 50px;
}

.my10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.my50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.mx20 {
  margin-left: 20px;
  margin-right: 20px;
}

.mx30 {
  margin-left: 30px;
  margin-right: 30px;
}

.ml-auto {
  margin-left: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.\!mt0 {
  margin-top: 0 !important;
}

@media (max-width: 1049px) {
  .sp\:pb50 {
    padding-bottom: 50px;
  }
  .sp\:px20 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .responsive-banner {
    width: 960px;
    height: 261px;
  }
}
@media (min-width: 1050px) {
  .pc\:px30 {
    padding-left: 30px;
    padding-right: 30px;
  }
  .pc\:mb30 {
    margin-bottom: 30px;
  }
  .pc\:mr0 {
    margin-right: 0;
  }
  .responsive-banner {
    width: 960px;
    height: 261px;
  }
}
@media ( max-width: 750px ) {
  .sp\:mb5 {
    margin-bottom: 5px;
  }
  .responsive-banner {
    width: 282px;
    height: 469px;
  }
}
@media ( min-width: 1050px ) {
  .pc\:p30 {
    padding: 30px;
  }
  .pc\:p50 {
    padding: 50px;
  }
  .pc\:mt0 {
    margin-top: 0;
  }
  .pc\:mt10 {
    margin-top: 10px;
  }
  .pc\:mt20 {
    margin-top: 20px;
  }
  .pc\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .responsive-banner {
    width: 960px;
    height: 261px;
  }
}/*# sourceMappingURL=style.css.map */
.support_detail {
  text-decoration: underline !important;
  color: blue !important;
  cursor: pointer !important;
}
.charge-links {
  padding: 10px; 
  border: 2px solid;
  border-radius: 25px;
  font-size: 1.8rem;
  border-color: #0088cc;
}