@charset "UTF-8";
.c-header-util {
  margin-top: var(--f-space);
}
@media (min-width: 768px) {
  .c-header-util {
    flex: 1 1 auto;
    margin-top: 0;
    margin-left: var(--f-space);
  }
}
.c-header-util:first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  .c-header-util:first-child {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .c-header-util.--submit {
    display: none;
  }
}
@media (min-width: 768px) {
  .c-header-util.--submit {
    flex: 1 0 auto;
  }
}
.c-header-util-list {
  padding: var(--f-space);
}
@media (min-width: 768px) {
  .c-header-util-list {
    max-width: var(--f-width-max);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
  }
}
.c-header-util-list-container {
  background-color: var(--f-color-bg);
}
@media (min-width: 768px) {
  .c-header-util-list-container {
    border-top: 0.1rem solid #dde6e6;
  }
}

.c-header-util-2 {
  margin-top: var(--f-space);
}
@media (min-width: 768px) {
  .c-header-util-2 {
    margin-top: 0;
    margin-left: var(--f-space);
  }
}
.c-header-util-2:first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  .c-header-util-2:first-child {
    margin-left: 0;
  }
}
.c-header-util-2.--rf {
  margin-top: var(--f-space-t2);
}
@media (min-width: 768px) {
  .c-header-util-2.--rf {
    margin-top: 0;
    display: none;
  }
}
.c-header-util-2.--tag {
  padding: 0 var(--f-space);
}
@media (min-width: 768px) {
  .c-header-util-2.--tag {
    width: 50%;
    overflow-x: scroll;
    padding: 0;
    flex: 0 0 auto;
  }
}
@media (max-width: 767px) {
  .c-header-util-2.--tag {
    display: none;
  }
}
@media (max-width: 767px) {
  .c-header-util-2.--tag-more {
    display: none;
  }
}
@media (min-width: 768px) {
  .c-header-util-2.--tag-more {
    flex: 0 1 auto;
    display: flex;
    justify-content: flex-end;
  }
}
@media (max-width: 767px) {
  .c-header-util-2.--rf-2 {
    display: none;
  }
}
@media (min-width: 768px) {
  .c-header-util-2.--rf-2 {
    flex: 2 0 auto;
    display: flex;
    justify-content: flex-end;
  }
}
.c-header-util-2-container {
  position: relative;
  z-index: 2;
  margin-top: var(--f-space);
}
@media (min-width: 768px) {
  .c-header-util-2-container {
    margin-top: 0;
    border-top: 0.1rem solid #dde6e6;
    border-bottom: 0.1rem solid #dde6e6;
  }
}
@media (min-width: 768px) {
  .c-header-util-2-list {
    max-width: var(--f-width-max);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding: 0 var(--f-space);
  }
}
.c-header-util-2-more {
  --btn-height: 4.5rem;
  display: flex;
  align-items: center;
}
.c-header-util-2-more-text {
  font-weight: var(--f-font-weight-medium);
  font-size: 1.4rem;
}
.c-header-util-2-more-btn {
  z-index: 1;
  position: relative;
  margin-left: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: var(--btn-height);
  background-color: var(--f-color-bg);
}
.c-header-util-2-more-btn > svg {
  width: 0.8em;
  height: 0.8em;
}
.c-header-util-2-more-btn > svg * {
  fill: var(--f-color-font);
}
.c-header-util-2-more-btn.--link > svg {
  transform: rotateZ(-90deg);
}
.c-header-util-2-more-popup {
  z-index: 2;
  position: absolute;
  width: 40rem;
  padding: var(--f-space-t2);
  transform-origin: right top;
  transition: 0.2s;
  right: 0;
  top: var(--btn-height);
  background-color: var(--f-color-bg);
}
.c-header-util-2-more-popup .c-recruit-feature {
  margin-top: var(--f-space);
}
.c-header-util-2-more-popup .c-recruit-feature:first-child {
  margin-top: 0;
}
.c-header-util-2-more-btn:hover .c-header-util-2-more-popup {
  transform: scale(1) !important;
}

.c-search-box {
  --btn-height: 4.6rem;
}
@media (max-width: 767px) {
  .c-search-box {
    filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
    padding: var(--f-space);
    border-top: 0.1rem solid rgba(0, 0, 0, 0.04);
    border-radius: 0.5rem;
    background-color: #fff;
    --btn-height: 3.5rem;
  }
}
@media (max-width: 767px) and (min-width: 768px) {
  .c-search-box {
    padding: var(--f-space-t1_5);
    border-radius: 0.8rem;
  }
}
.c-search-box-term {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .c-search-box-term {
    display: none;
  }
}
.c-search-box-term svg {
  width: 1.2em;
  height: 1.2em;
  fill: var(--f-color-green);
}
.c-search-box-term svg.--key {
  transform: rotateZ(45deg);
  width: 1.5em;
  height: 1.5em;
}
.c-search-box-term span {
  margin: 0 0 0 0.5em;
  font-weight: var(--f-font-weight-bold);
}
.c-search-box-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c-search-box-row a {
  color: var(--f-color-blue);
}
@media (min-width: 768px) {
  .c-search-box-row {
    display: none;
  }
}
.c-search-box-btn {
  margin: var(--f-space-d2) 0 0;
  position: relative;
  display: flex;
  align-items: center;
  height: var(--btn-height);
  border: 0.1rem solid var(--f-color-border);
  border-radius: 0.4rem;
  padding: 0 3em 0 0.75em;
  cursor: pointer;
  background-color: #fff;
}
.c-search-box-btn:first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  .c-search-box-btn:first-child {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .c-search-box-btn {
    margin-top: 0;
    margin-left: var(--f-space);
    flex: 1 1 auto;
    font-size: 1.1rem;
  }
}
@media (min-width: 768px) {
  .c-search-box-btn-list {
    display: flex;
  }
}
.c-search-box-btn svg {
  fill: #404040;
}
.c-search-box-btn svg.--before {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  fill: var(--f-color-green);
}
.c-search-box-btn svg.--after {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
}
.c-search-box-btn-name {
  margin: 0 0 0 0.25em;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}
.c-search-box-btn-name span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-weight: var(--f-font-weight-bold);
}
.c-search-box-btn-selected {
  width: 100%;
  min-width: 0;
  flex-shrink: 2;
  margin: 0 0 0 0.5em;
}
.c-search-box-btn-selected p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  opacity: 0.8;
  font-size: 0.8em;
}
.c-search-box-result {
  display: flex;
  align-items: center;
}
.c-search-box-result-text {
  flex: 0 0 auto;
  text-align: center;
}
.c-search-box-result-text p {
  color: var(--f-color-pink);
}
.c-search-box-result-text p span {
  font-size: 1.2em;
}
.c-search-box-result-btn {
  flex: 1 1 auto;
  margin-left: var(--f-space);
}
.c-search-box-result-btn button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: 0 1em;
  background-color: var(--f-color-green);
  border-radius: 0.4rem;
  border: none;
  color: #fff;
}
.c-search-box-result-btn button svg {
  width: 1.2em;
  height: 1.2em;
}
.c-search-box-result-btn button svg * {
  fill: #fff;
}
.c-search-box-result-btn button span {
  margin-left: 0.5em;
}
.c-search-box-input {
  margin: var(--f-space) 0 0;
  display: flex;
  align-items: center;
  border: 0.1rem solid var(--f-color-border);
  border-radius: 0.4rem;
  background-color: var(--f-color-bg);
}
.c-search-box-input.--mt-0 {
  margin-top: 0;
}
@media (min-width: 768px) {
  .c-search-box-input {
    margin-top: 0;
    background-color: #fff;
  }
}
.c-search-box-input input {
  width: calc(100% - var(--btn-height));
  line-height: var(--btn-height);
  padding: 0 1em;
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}
.c-search-box-input button {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: var(--btn-height);
  height: var(--btn-height);
  border: none;
  background-color: transparent;
}
.c-search-box-input button svg {
  fill: var(--f-color-font);
  width: 1.2em;
  height: 1.2em;
}
.c-search-box-tag-list {
  margin: var(--f-space-d2) 0 0 calc(var(--f-space-d2) * -1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .c-search-box-tag-list.--only-sp {
    display: none;
  }
}
@media (min-width: 768px) {
  .c-search-box-tag-list {
    margin-top: 0;
    flex-wrap: nowrap;
    width: -moz-max-content;
    width: max-content;
  }
}
.c-search-box-tag-list li {
  margin: var(--f-space-d2) 0 0 var(--f-space-d2);
}
@media (min-width: 768px) {
  .c-search-box-tag-list li {
    margin-top: 0;
  }
}
.c-search-box-tag-list li a {
  display: flex;
  align-items: center;
  padding: 0.25em 1em;
  border-radius: 1.3rem;
  background-color: var(--f-color-bg);
  color: var(--f-color-green);
}
.c-search-box-link {
  margin-top: var(--f-space);
  text-align: right;
}
@media (min-width: 768px) {
  .c-search-box-link.--only-sp {
    display: none;
  }
}

.c-search-modal {
  --submit-height: 6rem;
  z-index: calc(var(--f-z-index-max) + 1);
  position: fixed;
  transition: right 0.2s;
  right: -100%;
  top: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .c-search-modal {
    --submit-height: 8rem;
  }
}
.c-search-modal.--open {
  right: 0;
}
.c-search-modal-bg {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.c-search-modal-main {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
@media (min-width: 768px) {
  .c-search-modal-main {
    max-width: var(--f-width-md);
    margin: auto;
  }
}
.c-search-modal-scroll {
  width: 100%;
  height: calc(100% - var(--submit-height));
  padding-bottom: var(--f-space);
  overflow-y: scroll;
}
.c-search-modal-head {
  z-index: 1;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--f-height-navbar);
  background: var(--f-color-bg);
  font-weight: var(--f-font-weight-bold);
}
.c-search-modal-head__back {
  display: flex;
  align-items: center;
  position: absolute;
  left: var(--f-space);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.c-search-modal-head__back svg {
  transform: rotateZ(180deg);
  fill: var(--f-color-green);
  width: 1.2em;
  height: 1.2em;
}
.c-search-modal-head__back span {
  flex-shrink: 0;
  margin: 0 0 0 0.25em;
  font-size: 1rem;
}
.c-search-modal-term {
  display: flex;
  align-items: center;
  padding: 0 var(--f-space);
  margin: var(--f-space-t3) 0 0;
  font-weight: var(--f-font-weight-bold);
}
.c-search-modal-term svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  fill: var(--f-color-green);
}
.c-search-modal-term span {
  margin-left: 0.5em;
  color: var(--f-color-font-light);
  font-size: 0.8em;
  font-weight: var(--f-font-weight);
}
.c-search-modal-check li {
  padding: 1em var(--f-space);
  border-bottom: 0.1rem solid var(--f-color-border);
}
.c-search-modal-check-2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 var(--f-space) 0 var(--f-space-d2);
}
.c-search-modal-check-2 li {
  display: flex;
  align-items: center;
  height: 3em;
  width: calc(50% - var(--f-space) / 2);
  margin: var(--f-space-d2) 0 0 var(--f-space-d2);
  padding: 0 0 0 var(--f-space-d2);
  border: 0.1rem solid var(--f-color-border);
  border-radius: 0.4rem;
}
.c-search-modal-check-2 li .f-form-check-2 {
  width: 100%;
  height: 100%;
}
.c-search-modal-tag {
  display: flex;
  flex-wrap: wrap;
  margin: var(--f-space-d2) 0 0 calc(var(--f-space-d2) * -1);
  padding: 0 var(--f-space);
}
.c-search-modal-tag li {
  margin: var(--f-space-d2) 0 0 var(--f-space-d2);
}
.c-search-modal-tag li a {
  display: flex;
  align-items: center;
  color: var(--f-color-green);
  border: 0.1rem solid var(--f-color-border);
  border-radius: 0.4rem;
  padding: 0.6em 0.5em;
  font-size: 1.2rem;
}
.c-search-modal-tag li a span {
  margin: 0 0 0 0.25em;
  padding: 0.25em 0.5em;
  border-radius: 0.15rem;
  background-color: var(--f-color-green);
  color: #fff;
  font-size: 1rem;
}
.c-search-modal-submit {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--submit-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--f-space);
  background-color: #808080;
}
.c-search-modal-submit__result {
  flex-shrink: 0;
  color: #fff;
}
.c-search-modal-submit__result p span {
  font-size: 1.5em;
}
.c-search-modal-submit button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(var(--submit-height) - var(--f-space) * 2);
  border: none;
  border-radius: 0.5rem;
  margin-left: 2em;
  background-color: var(--f-color-green);
  font-size: calc(var(--submit-height) / 4.6153);
  font-weight: var(--f-font-weight-bold);
  color: #fff;
}
@media (min-width: 768px) {
  .c-search-modal-submit button {
    max-width: 20em;
  }
}
.c-search-modal-submit button svg {
  fill: #fff;
  width: 1em;
  height: 1em;
}
.c-search-modal-submit button span {
  margin: 0 0 0 0.5em;
}
.c-search-modal-submit .f-btn-2 {
  margin-top: 0;
}

.c-recruit-feature {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
  display: block;
  padding: var(--f-space) 0 var(--f-space) var(--f-space);
  background-color: #fff;
}
.c-recruit-feature .f-heading-3 {
  margin-top: 0;
}

.c-faq {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
  padding: var(--f-space);
  border-top: 0.1rem solid rgba(0, 0, 0, 0.04);
  border-radius: 0.5rem;
  background-color: #fff;
  margin: var(--f-space-t2) 0 0;
}
@media (min-width: 768px) {
  .c-faq {
    padding: var(--f-space-t1_5);
    border-radius: 0.8rem;
  }
}
@media (min-width: 768px) {
  .c-faq-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--f-space) * -1);
  }
}
@media (min-width: 768px) {
  .c-faq-list .c-faq {
    width: calc(50% - var(--f-space));
    margin: var(--f-space) 0 0 var(--f-space);
  }
}
.c-faq-head {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.c-faq .f-label-2 {
  margin-right: auto;
}
.c-faq-answerd {
  color: var(--f-color-font-light);
  font-size: 1rem;
}
.c-faq-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  --lh: 1.4em;
  margin: 1.2rem 0 0;
  min-height: calc(var(--lh) * 3);
  line-height: var(--lh);
  font-size: 1.1em;
}
.c-faq-more {
  text-align: right;
}
.c-faq-more a {
  display: inline-block;
  color: var(--f-color-blue);
}
.c-faq-more-2 {
  margin: 1.2rem 0 0;
}
.c-faq-more-2 .f-btn-2 {
  width: 100%;
}
.c-faq-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 1.2rem 0 0;
}
.c-faq-meta-user {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.c-faq-meta time {
  flex-shrink: 0;
  margin: 0 0 0 1em;
  color: var(--f-color-font-light);
}

.c-feature {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
  padding: var(--f-space);
  border-top: 0.1rem solid rgba(0, 0, 0, 0.04);
  border-radius: 0.5rem;
  background-color: #fff;
  margin-top: var(--f-space);
}
@media (min-width: 768px) {
  .c-feature {
    padding: var(--f-space-t1_5);
    border-radius: 0.8rem;
  }
}
.c-feature-list {
  margin-top: var(--f-space);
}
@media (min-width: 768px) {
  .c-feature-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--f-space) * -1);
  }
}
@media (min-width: 768px) {
  .c-feature-list .c-feature {
    width: calc(50% - var(--f-space));
    margin: var(--f-space) 0 0 var(--f-space);
  }
}
.c-feature-list .c-feature:first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  .c-feature-list .c-feature:first-child {
    margin: var(--f-space) 0 0 var(--f-space);
  }
}
.c-feature-row {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .c-feature-row {
    display: block;
  }
}
.c-feature-row__content {
  width: 100%;
}
.c-feature-thumb ~ .c-feature-row__content {
  margin: 0 0 0 1.2rem;
}
@media (min-width: 768px) {
  .c-feature-thumb ~ .c-feature-row__content {
    margin: 0.5em 0 0;
  }
}
.c-feature-thumb {
  flex-shrink: 0;
  width: 32%;
}
@media (min-width: 768px) {
  .c-feature-thumb {
    width: 100%;
  }
}
.c-feature-thumb__inner {
  position: relative;
  width: 100%;
  height: 4em;
}
@media (min-width: 768px) {
  .c-feature-thumb__inner {
    height: 18em;
  }
}
.c-feature-thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.c-feature-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  --lh: 1.4em;
  line-height: var(--lh);
  min-height: calc(var(--lh) * 2);
  color: var(--f-color-font-dark);
  font-size: 1.1em;
  font-weight: var(--f-font-weight-bold);
}
.c-feature-published {
  margin: 1.2rem 0 0;
  text-align: right;
  color: var(--f-color-font-light);
}
.c-feature-published time {
  margin: 0 0 0 0.5em;
}
.c-feature-lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  --lh: 1.4em;
  line-height: var(--lh);
  min-height: calc(var(--lh) * 3);
  margin: 1.2rem 0 0;
}
.c-feature-more {
  margin: 0.6rem 0 0;
  text-align: right;
}
.c-feature-more a {
  display: inline-block;
  color: var(--f-color-blue);
}

.c-interstitial-modal {
  margin: auto;
  max-width: 750px;
  position: relative;
}
.c-interstitial-modal__closer {
  --text-size: 6rem;
  position: absolute;
  right: 0;
  top: calc(var(--text-size) * -1);
  color: #fff;
  font-family: var(--f-font-family-m-plus-1p);
  font-weight: var(--f-font-weight-light);
  font-size: var(--text-size);
  text-align: right;
  line-height: 1;
}
@media (min-width: 768px) {
  .c-interstitial-modal__closer {
    --text-size: 10rem;
  }
}
.c-interstitial-modal__img-container img {
  width: 100%;
}

.c-manga {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
  padding: var(--f-space);
  border-top: 0.1rem solid rgba(0, 0, 0, 0.04);
  border-radius: 0.5rem;
  background-color: #fff;
  padding: var(--f-space-t2) var(--f-space);
}
@media (min-width: 768px) {
  .c-manga {
    padding: var(--f-space-t1_5);
    border-radius: 0.8rem;
  }
}
.c-manga-container {
  margin-top: var(--f-space-t2);
}
@media (min-width: 768px) {
  .c-manga-container {
    display: flex;
    align-items: stretch;
  }
}
.c-manga-container .c-manga {
  margin-top: 0;
}
@media (min-width: 768px) {
  .c-manga-container .c-manga {
    flex: 0 1 auto;
  }
}
@media (min-width: 768px) {
  .c-manga-aside {
    margin-left: var(--f-space-t2);
    flex: 1 0 auto;
    width: 38%;
  }
}
@media (min-width: 768px) {
  .c-manga-aside-inner {
    --top: calc(var(--f-height-navbar) + var(--f-space));
    --height-heading: 10%;
    --height-list: 75%;
    --height-btn: 15%;
    position: sticky;
    top: var(--top);
    height: calc(100vh - var(--top));
  }
}
.c-manga-aside-heading {
  margin-top: var(--f-space-t2);
}
@media (min-width: 768px) {
  .c-manga-aside-heading {
    height: var(--height-heading);
    margin-top: 0;
    padding-top: var(--f-space);
  }
}
.c-manga-aside-heading .f-heading-4 {
  margin-top: 0;
}
.c-manga-aside-btn {
  margin-top: var(--f-space-t2);
}
@media (min-width: 768px) {
  .c-manga-aside-btn {
    height: var(--height-btn);
    margin-top: 0;
    padding-top: var(--f-space-t2);
  }
}
.c-manga-aside-btn .f-btn {
  margin-top: 0;
}
.c-manga-img {
  margin: var(--f-space) 0 0;
}
.c-manga-img img {
  width: 100%;
}
.c-manga-body {
  margin: var(--f-space) 0 0;
  line-height: 1.4em;
}
.c-manga-list {
  margin: var(--f-space) 0 0;
}
@media (min-width: 768px) {
  .c-manga-list {
    margin-top: 0;
    height: var(--height-list);
    overflow-y: scroll;
  }
}
.c-manga-list li a {
  position: relative;
  display: block;
  border-top: 0.1rem solid var(--f-color-border);
  padding: var(--f-space) var(--f-space) var(--f-space) 0;
  color: var(--f-color-blue);
}
.c-manga-list li a .c-manga-list-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.c-manga-list li a svg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.8em;
  height: 0.8em;
}
.c-manga-list li:first-child a {
  border-top: none;
}
.c-manga .f-heading-6 {
  margin-top: 0;
}

.f-content-center > .f-heading-4:first-child {
  margin-top: var(--f-space-t2);
}

.bkmark .info {
  margin: var(--f-space-t2) 0 0;
  font-size: 1.2rem;
  text-align: center;
}
.bkmark .btn {
  margin: var(--f-space-t2) var(--f-space) 0;
}
.bkmark .stack {
  display: grid;
  gap: var(--f-space);
}

.brand_movie .form {
  margin: var(--f-space) 0 0;
}
.brand_movie .form-row {
  display: flex;
  align-items: center;
  height: 3.5em;
  margin: var(--f-space-d2) 0 0;
}
.brand_movie .form-row-item {
  border: 0.1rem solid var(--f-color-border);
  background-color: #fff;
  border-radius: 0.4rem;
  width: 76%;
  height: 100%;
  position: relative;
}
.brand_movie .form-row-item svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.brand_movie .form-row-item svg * {
  fill: var(--f-color-font) !important;
}
.brand_movie .form-row-item svg.--left {
  width: 1.2em;
  height: 1.2em;
  left: 0.5em;
}
.brand_movie .form-row-item svg.--right {
  width: 0.8em;
  height: 0.8em;
  right: 1em;
  transform: translateY(-50%) rotate(90deg);
}
.brand_movie .form-row-item svg.--key {
  transform: translateY(-50%) rotate(45deg);
}
.brand_movie .form-row-item svg.--key path {
  opacity: 0.6;
}
.brand_movie .form-row-item select,
.brand_movie .form-row-item input {
  position: absolute;
  padding: 0 2em;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-color: transparent;
  font-weight: var(--f-font-weight-bold);
}
.brand_movie .form-row button {
  border: 0.1rem solid var(--f-color-border);
  background-color: #fff;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 var(--f-space-d2);
  width: 24%;
  height: 100%;
  font-weight: var(--f-font-weight-bold);
}
.brand_movie .form-row button svg {
  width: 1.2em;
  height: 1.2em;
}
.brand_movie .form-row button span {
  flex-shrink: 0;
  margin: 0 0 0 0.25em;
}
.brand_movie .form-submit .f-btn {
  margin-top: var(--f-space);
}
.brand_movie .list {
  display: grid;
  gap: var(--f-space);
}
@media (min-width: 768px) {
  .brand_movie .list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.diagnosis .signup-cv {
  display: grid;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
  border-radius: 1rem;
  background-color: var(--f-color-bg);
}
.diagnosis .signup-cv__text {
  display: grid;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.1rem;
}
.diagnosis .signup-cv__text b {
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
}
.diagnosis .signup-cv__buttons {
  display: grid;
  gap: 1rem;
  grid-template-columns: 26rem;
  justify-content: center;
}
.diagnosis .signup-cv__button {
  margin: 0;
  width: 100%;
}
.diagnosis .sections {
  display: grid;
  gap: 3rem;
}
.diagnosis .sections__item {
  width: 100%;
  margin-top: 0;
}
.diagnosis .sections__item--max-width-md {
  max-width: var(--f-width-md);
  margin-left: auto;
  margin-right: auto;
}
.diagnosis .desc {
  display: grid;
  gap: 1.5rem;
}
.diagnosis .desc__row {
  display: grid;
  grid-template-columns: 1fr 8.5rem;
}
.diagnosis .desc__col--body {
  display: grid;
  align-content: start;
  gap: 1rem;
}
.diagnosis .desc__col--image {
  transform: translateY(-3rem);
}
.diagnosis .desc__text {
  display: grid;
  gap: 0.25rem;
  font-size: 1.2rem;
}
.diagnosis .desc__text--box {
  line-height: 1.5;
  border-radius: 1rem;
  background-color: var(--f-color-green);
  padding: 2rem 1rem;
  display: grid;
  text-align: center;
  color: #fff;
}
.diagnosis .desc__buttons {
  margin-top: 0.5rem;
}
.diagnosis .desc__button {
  margin: 0;
}
.diagnosis .desc__image img {
  width: 100%;
}
.diagnosis .form {
  display: grid;
  gap: 3rem;
  border-radius: 1rem;
  padding: 2rem 1rem;
  background-color: var(--f-color-bg);
}
.diagnosis .form__row {
  display: grid;
  gap: 2rem;
  padding: 3rem 0 0;
  border-top: 1px solid #e2e1da;
  border-radius: 0;
}
.diagnosis .form__row:first-child {
  border-top: none;
  padding: 0;
}
.diagnosis .form__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.diagnosis .form__text b {
  color: var(--f-color-green);
}
.diagnosis .form__text span {
  opacity: 0.5;
}
.diagnosis .result-info {
  display: grid;
  gap: 0.5rem;
  justify-content: center;
  text-align: center;
}
.diagnosis .result-info b {
  font-size: 1.4rem;
}
.diagnosis .filter {
  display: grid;
  gap: 1rem;
  background-color: var(--f-color-bg);
  padding: 2rem;
  border-radius: 1rem;
  justify-content: center;
}
.diagnosis .filter__title {
  text-align: center;
}
.diagnosis .filter__selects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  gap: 0.5rem;
}
.diagnosis .filter__selects-item {
  margin: 0;
  background-color: #fff;
}

.faq_form .description {
  font-size: 1.2rem;
}
.faq_form .description a {
  color: var(--f-color-blue);
  font-weight: var(--f-font-weight-bold);
}

.faq_form_end .status {
  text-align: center;
}
.faq_form_end .status strong {
  display: block;
  color: var(--f-color-pink);
  font-size: 1.2em;
}
.faq_form_end .status span {
  display: block;
  margin: var(--f-space-d2) 0 0;
  font-size: 1.1rem;
}
.faq_form_end .lets-signup {
  margin: var(--f-space-t2) 0 0;
  padding: var(--f-space-t2) var(--f-space);
  background-color: #eeeeee;
}
.faq_form_end .lets-signup-heading {
  font-size: 1.6rem;
  text-align: center;
  color: var(--f-color-green);
}
.faq_form_end .lets-signup-body {
  margin: var(--f-space) 0 0;
  line-height: 1.4em;
}
.faq_form_end .lets-signup .f-btn-2 {
  margin: var(--f-space) 0 0;
}
.faq_form_end .back {
  margin: var(--f-space-t2) 0 0;
}

.faq .form {
  margin: var(--f-space) 0 0;
}
.faq .form-row {
  display: flex;
  align-items: center;
  height: 3.5em;
  margin: var(--f-space-d2) 0 0;
}
.faq .form-row-item {
  border: 0.1rem solid var(--f-color-border);
  background-color: #fff;
  border-radius: 0.4rem;
  width: 76%;
  height: 100%;
  position: relative;
}
.faq .form-row-item svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.faq .form-row-item svg * {
  fill: var(--f-color-font) !important;
}
.faq .form-row-item svg.--left {
  width: 1.2em;
  height: 1.2em;
  left: 0.5em;
}
.faq .form-row-item svg.--right {
  width: 0.8em;
  height: 0.8em;
  right: 1em;
  transform: translateY(-50%) rotate(90deg);
}
.faq .form-row-item svg.--key {
  transform: translateY(-50%) rotate(45deg);
}
.faq .form-row-item svg.--key path {
  opacity: 0.6;
}
.faq .form-row-item select,
.faq .form-row-item input {
  position: absolute;
  padding: 0 2em;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-color: transparent;
  font-weight: var(--f-font-weight-bold);
}
.faq .form-row button {
  border: 0.1rem solid var(--f-color-border);
  background-color: #fff;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 var(--f-space-d2);
  width: 24%;
  height: 100%;
  font-weight: var(--f-font-weight-bold);
}
.faq .form-row button svg {
  width: 1.2em;
  height: 1.2em;
}
.faq .form-row button span {
  flex-shrink: 0;
  margin: 0 0 0 0.25em;
}
.faq .form-submit .f-btn {
  margin-top: var(--f-space);
}

.faq_detail .heading__main {
  display: inline-block;
  font-size: 1.1em;
  font-weight: var(--f-font-weight-medium);
  color: var(--f-color-font-dark);
}
.faq_detail .heading__main.--link {
  color: var(--f-color-blue);
}
.faq_detail .open-date {
  display: block;
  margin-top: var(--f-space);
  font-size: 1rem;
  text-align: right;
}
.faq_detail .question .heading {
  margin-top: 0.5em;
}
.faq_detail .question-body {
  margin-top: var(--f-space);
}
.faq_detail .answer {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
  padding: var(--f-space);
  border-top: 0.1rem solid rgba(0, 0, 0, 0.04);
  border-radius: 0.5rem;
  background-color: #fff;
}
@media (min-width: 768px) {
  .faq_detail .answer {
    padding: var(--f-space-t1_5);
    border-radius: 0.8rem;
  }
}
.faq_detail .answer-list {
  margin-top: var(--f-space);
}
.faq_detail .answer-row {
  margin-top: var(--f-space);
}
@media (min-width: 768px) {
  .faq_detail .answer-row {
    display: flex;
  }
}
.faq_detail .answer-row-right {
  margin-top: 0.5em;
  width: 100%;
}
@media (min-width: 768px) {
  .faq_detail .answer-row-right {
    margin-top: 0;
    margin-left: var(--f-space);
  }
}
.faq_detail .answer-row-right .f-btn-2 {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
@media (min-width: 768px) {
  .faq_detail .answer-img {
    width: 40%;
    flex-shrink: 0;
    position: static;
  }
}
@media (min-width: 768px) {
  .faq_detail .answer-img img {
    position: sticky;
    top: calc(var(--f-height-navbar) + var(--f-space));
  }
}
@media (min-width: 768px) {
  .faq_detail .answer-btn.--only-sm {
    display: none;
  }
}
.faq_detail .answer-btn.--only-md {
  display: none;
}
@media (min-width: 768px) {
  .faq_detail .answer-btn.--only-md {
    display: block;
  }
}

.feature_detail .f-heading-4 {
  margin-top: 0 !important;
}
.feature_detail .open-date {
  display: block;
  margin-top: var(--f-space);
  text-align: right;
  font-size: 1rem;
}
.feature_detail .detail_text h3 {
  margin: var(--f-space) 0 var(--f-space) 0;
  border-left: 0.6rem solid var(--f-color-green);
  padding: 0.25em 0 0.25em 0.8em;
  font-size: 1.2em;
  font-weight: bold;
}
.feature_detail .detail_text h4 {
  border-bottom: 0.3rem dotted #999;
  font-size: 113%;
  padding: 0 0 0.5rem 0;
  margin: 0 0 1rem 0;
  font-weight: bold;
}
.feature_detail .detail_text p {
  margin: 0 0 1.2em 0;
}
.feature_detail .detail_text .imgone {
  text-align: center;
  margin: 0 0 1.5rem 0;
}
.feature_detail .detail_text .imgone img {
  max-width: 100%;
  margin: auto;
}
.feature_detail .detail_text .imgtwo {
  text-align: center;
  margin: 0 0 1.5rem 0;
}
.feature_detail .detail_text figure {
  text-align: center;
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
}
.feature_detail .detail_text figcaption {
  font-size: 1.2rem;
}
.feature_detail .detail_text figure img {
  max-width: 100%;
}
.feature_detail .detail_text .dk_comment {
  color: #6d5140;
  background: #f3f3f3;
  padding: 0.8rem;
  border-radius: 0.5rem;
  margin: 0 0 1em 0;
}
.feature_detail .detail_text .answer {
  background: #fcf0f2;
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 0 0 1em 0;
}
.feature_detail .detail_text .mar2em {
  margin: 0 0 2em 0;
}
.feature_detail .detail_text .shop_info {
  background: var(--f-color-green);
  font-weight: bold;
  padding: 0.6rem 0.3rem;
  margin: 0 0 1rem 0;
  color: #fff;
}
.feature_detail .detail_text em {
  font-weight: bold;
  color: #6d5140;
}
.feature_detail .flex {
  display: table;
  margin: auto;
  text-align: center;
  margin: 0 0 2rem 0;
}
.feature_detail .flex li {
  display: table-cell;
}
.feature_detail .flex img {
  max-width: 90%;
}
.feature_detail .box_wrap {
  width: 95%;
  margin: 0 auto;
}
.feature_detail #method {
  background: #fff;
  padding-bottom: 2rem;
}
.feature_detail #method .inform {
  background: #ff9bb3;
  border-radius: 0.3rem;
  margin: 1rem 0;
  padding: 1rem;
  color: #fff;
  font-size: 5vw;
}
.feature_detail #method h3 {
  padding: 2% 5%;
  background: url("//img.undernavi.work/portal/sp/shop_dir/bg_subtitle.png") no-repeat center center/contain;
  font-size: 3.2vw;
  color: #fff;
}
.feature_detail #method h3 span {
  color: #fff000;
}
.feature_detail #method ul {
  font-size: 0;
}
.feature_detail #method ul li {
  display: inline-block;
  width: 46%;
  margin: 1rem 2%;
  font-size: 4vw;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.feature_detail #method ul li .tel.full {
  width: 96%;
}
.feature_detail #method ul li .tel.full img {
  width: 8%;
}
.feature_detail #method ul li a {
  display: block;
  height: 4.5rem;
  line-height: 4.5rem;
  border-bottom: 0.5rem solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: #fff;
  text-align: center;
  font-size: 4vw;
  letter-spacing: -0.2rem;
}
.feature_detail #method ul li a img {
  width: 16%;
  vertical-align: middle;
  padding-right: 0.3rem;
}
.feature_detail #method ul li .form a {
  background: #ffa94d;
  border-color: #da852b;
  letter-spacing: -0.4rem;
}
.feature_detail #method ul li .key a {
  background: #f45567;
  border-color: #ab504f;
}
.feature_detail #method ul li .photo a {
  background: #e54293;
  border-color: #b83e77;
}
.feature_detail #method ul li .tel a {
  background: #4ae646;
  border-color: #45b242;
}
.feature_detail #method ul li .line a {
  background: #00b900;
  border-color: #369131;
}
.feature_detail #method ul li .mail {
  width: 96%;
}
.feature_detail #method ul li .mail a {
  background: #ffa94d;
  border-color: #da852b;
  letter-spacing: 0;
}
.feature_detail #method ul li .mail a img {
  width: 8%;
}
.feature_detail .attention {
  margin-bottom: 2rem;
}
.feature_detail .attention:before {
  content: "※";
}
.feature_detail .attention2 {
  margin-top: 2rem;
  color: #f00;
  font-size: 3vw;
}

.review .review-list {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .review .review-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sampleparts .info {
  margin: var(--f-space) 0 0;
  line-height: 1.4em;
}
.sampleparts pre {
  margin: var(--f-space) 0 0;
  background-color: #eee;
}
.sampleparts pre code {
  display: block;
  padding: 0 0.5em;
  white-space: pre-wrap;
}
.sampleparts .svg-list {
  margin: var(--f-space-t2) 0 0 calc(var(--f-space-t2) * -1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.sampleparts .svg-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(33.3333% - var(--f-space-t2));
  margin: var(--f-space-t2) 0 0 var(--f-space-t2);
}
.sampleparts .svg-list-item-name {
  font-size: 1rem;
}
.sampleparts .svg-list-item svg {
  margin: 0.5em 0 0;
  width: 4em;
  height: 4em;
  -o-object-fit: contain;
     object-fit: contain;
  fill: #000;
  stroke: #000;
}

.shop .section-brandmovie {
  padding: var(--f-space) 0;
}
.shop .section-brandmovie .f-heading-4 {
  margin-top: 0;
}
.shop .shop-list {
  margin-top: var(--f-space-t2);
  padding: var(--f-space-t2) 0;
  background-color: var(--f-color-bg);
}
.shop .shop-list__container {
  margin-top: 0;
}
.shop .bottom-banner {
  z-index: calc(var(--f-z-index-max) - 5);
  position: fixed;
  bottom: var(--f-space);
  left: var(--f-space);
}
.shop .bottom-banner a {
  display: none;
}
.shop .bottom-banner img {
  width: 11rem;
  aspect-ratio: 1;
}
@media (min-width: 768px) {
  .shop .bottom-banner img {
    width: 22rem;
  }
}
.shop .article-set__articles {
  display: flex;
  flex-direction: column;
  gap: var(--f-space);
  background-color: var(--f-color-bg);
  padding: var(--f-space);
}
.shop .article-sets {
  display: flex;
  flex-direction: column;
  gap: var(--f-space);
}
.shop .qas {
  display: flex;
  flex-direction: column;
  gap: var(--f-space);
}
.shop .pref-content {
  margin-top: var(--f-space-t4);
  display: flex;
  flex-direction: column;
  gap: var(--f-space-t2);
}
.shop .pref-content__header {
  display: flex;
  flex-direction: column;
  gap: var(--f-space);
}
.shop .pref-content__heading {
  margin: 0;
}
.shop .pref-content__map {
  text-align: center;
}
.shop .pref-content__map iframe {
  max-width: 100%;
}
.shop .pref-content__body {
  display: flex;
  flex-direction: column;
  gap: var(--f-space);
}
.shop .pref-content-2 {
  display: flex;
  flex-direction: column;
  gap: var(--f-space-t2);
}
.shop .pref-content-2__header {
  display: flex;
  flex-direction: column;
  gap: var(--f-space);
}
.shop .pref-content-2__kv img {
  margin: auto;
}
.shop .pref-content-2__heading {
  margin: 0;
}
.shop .pref-content-2__body {
  display: flex;
  flex-direction: column;
  gap: var(--f-space);
}

.top .header {
  z-index: 1;
  position: relative;
  padding: var(--f-space);
  overflow: hidden;
}
@media (min-width: 768px) {
  .top .header {
    max-width: var(--f-width-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--f-space-t2) 0;
  }
}
.top .header-text {
  text-align: center;
  font-weight: var(--f-font-weight-bold);
}
@media (min-width: 768px) {
  .top .header-text {
    font-size: 2rem;
  }
}
.top .header-logo {
  display: inline-block;
  width: 12rem;
}
@media (min-width: 768px) {
  .top .header-logo {
    width: 18rem;
  }
}
.top .header-logo-container {
  padding: 4rem 0 2rem;
  text-align: center;
}
.top .header-logo__inner {
  position: relative;
  width: 100%;
  padding-top: 40%;
  height: 0;
}
.top .header-logo__inner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.top .header-character {
  z-index: -1;
  position: absolute;
  width: 13.7rem;
  left: -2.2rem;
  bottom: 5rem;
}
@media (min-width: 768px) {
  .top .header-character {
    width: 39rem;
    left: -5rem;
    bottom: -6rem;
  }
}
.top .header-goto {
  margin-top: var(--f-space);
}
.top .header-info {
  padding-top: var(--f-space);
  background-color: var(--f-color-bg);
  text-align: center;
}
@media (min-width: 768px) {
  .top .header-info {
    max-width: 60rem;
    margin: auto;
    background-color: transparent;
    text-align: right;
  }
}
.top .header-info span {
  color: var(--f-color-pink);
}
.top .section-brandmovie {
  padding: var(--f-space-t2) 0;
}
.top .section-brandmovie .f-heading-4 {
  margin-top: 0;
}
.top .select-pref {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
  width: 100%;
}
@media (min-width: 768px) {
  .top .select-pref {
    max-width: var(--f-width-md);
    margin-left: auto;
    margin-right: auto;
  }
}
.top .select-pref__gender-tabs {
  display: grid;
}
.top .select-pref__gender-tabs[data-select-pref-gender-tabs=for-womans] {
  grid-template-columns: 1fr auto;
}
.top .select-pref__gender-tabs[data-select-pref-gender-tabs=for-mans] {
  grid-template-columns: auto 1fr;
}
.top .select-pref__gender-tabs:not([data-is-active]) {
  display: none;
}
.top .select-pref__gender-tabs-item {
  --padding: 0.5rem;
  --rounded-bg-size: 1rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0 var(--padding) var(--padding);
  border-radius: 0.5rem 0.5rem 0 0;
  position: relative;
}
.top .select-pref__gender-tabs-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  width: var(--rounded-bg-size);
  height: var(--rounded-bg-size);
  background-color: #fff;
  content: "";
  clip-path: url(#select-pref-gender-tabs-item-rounded-bg);
}
.top .select-pref__gender-tabs-item:first-child {
  padding-left: 0;
}
.top .select-pref__gender-tabs-item:first-child::before {
  right: calc(var(--rounded-bg-size) * -1);
}
.top .select-pref__gender-tabs-item:last-child {
  padding-right: 0;
}
.top .select-pref__gender-tabs-item:last-child::before {
  left: calc(var(--rounded-bg-size) * -1);
  transform: scaleX(-1);
}
.top .select-pref__gender-tabs-item--bg {
  padding-top: var(--padding);
  background-color: #fff;
}
.top .select-pref__gender-tabs-item-main {
  --padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color);
  cursor: pointer;
}
.top .select-pref__gender-tabs-item-main[data-select-pref-gender-tab=for-womans] {
  --color: var(--f-color-pink);
}
.top .select-pref__gender-tabs-item-main[data-select-pref-gender-tab=for-mans] {
  --color: var(--f-color-blue);
}
.top .select-pref__gender-tabs-item-main--button {
  padding: var(--padding);
  border-radius: 0.5rem;
  color: #fff;
  background-color: var(--color);
}
.top .select-pref__gender-tabs-item-main svg {
  width: 1em;
  height: 1em;
  fill: var(--color);
}
.top .select-pref__tiku-buttons {
  padding: var(--f-space);
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 0.5rem;
  gap: 0.5rem;
}
.top .select-pref__tiku-buttons[data-select-pref-tiku-buttons=for-womans] {
  border-top-left-radius: 0;
}
.top .select-pref__tiku-buttons[data-select-pref-tiku-buttons=for-mans] {
  border-top-right-radius: 0;
}
.top .select-pref__tiku-buttons:not([data-is-active]) {
  display: none;
}
.top .select-pref__tiku-buttons-item {
  display: grid;
  align-content: center;
  justify-items: center;
  border-radius: 0.5rem;
  height: 5rem;
  cursor: pointer;
  background-color: var(--back-color);
  color: inherit;
  font-size: 1rem;
}
.top .select-pref__tiku-buttons-item--pink {
  --front-color: var(--f-color-pink);
  --back-color: var(--f-color-pink-light);
}
.top .select-pref__tiku-buttons-item--blue {
  --front-color: var(--f-color-blue);
  --back-color: var(--f-color-blue-light);
}
.top .select-pref__tiku-buttons-item--exit {
  --back-color: transparent;
  border: 1px solid var(--front-color);
}
.top .select-pref__tiku-buttons-item strong {
  font-size: 1.5rem;
  color: var(--front-color);
  font-weight: var(--f-font-weight-medium);
}
.top .select-pref__tiku-buttons-item--exit strong {
  font-size: 1.3rem;
}
.top .select-pref-modal-stock {
  display: none;
}
.top .select-pref-pref-btn-list {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.15));
  padding: var(--f-space);
  border-top: 0.1rem solid rgba(0, 0, 0, 0.04);
  border-radius: 0.5rem;
  background-color: #fff;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
@media (min-width: 768px) {
  .top .select-pref-pref-btn-list {
    padding: var(--f-space-t1_5);
    border-radius: 0.8rem;
  }
}
@media (min-width: 768px) {
  .top .select-pref-pref-btn-list {
    max-width: var(--f-width-md);
    margin-left: auto;
    margin-right: auto;
    padding: var(--f-space) var(--f-space-t2) var(--f-space-t2) var(--f-space);
  }
}
.top .select-pref-pref-btn-list li {
  width: calc(50% - var(--f-space-d2));
  margin: var(--f-space-d2) 0 0 var(--f-space-d2);
}
@media (min-width: 768px) {
  .top .select-pref-pref-btn-list li {
    width: calc(50% - var(--f-space));
    margin: var(--f-space) 0 0 var(--f-space);
  }
}
.top .select-pref-pref-btn-list li.--all {
  width: 100%;
}
.top .select-pref-pref-btn-list li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2em;
  height: 3.5em;
  border: 0.1rem solid var(--f-color-border);
  border-radius: 0.5rem;
  color: inherit;
}
.top .select-pref-pref-btn-list li a svg {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
  height: 1.2em;
}
.top .select-pref-pref-btn-list li a svg * {
  fill: var(--f-color-green);
}
.top .box {
  z-index: 1;
  position: relative;
  width: 100%;
  background-color: #eeeee6;
  padding: var(--f-space-t3) var(--f-space);
  display: flex;
  flex-direction: column;
  gap: var(--f-space-t3);
}
.top .box__item {
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--f-space-t2);
}
.top .box__item-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}
@media (min-width: 768px) {
  .top .box__item-title {
    font-size: 1.7em;
  }
}
.top .box__item-title svg {
  width: 1.5em;
  height: 1.5em;
}
.top .box__item-title svg,
.top .box__item-title svg * {
  fill: rgba(194, 183, 165, 0.3490196078);
  stroke: rgba(194, 183, 165, 0.3490196078);
}
.top .box__item-title span {
  margin: 0 0 0 0.25em;
  color: #59493f;
  font-weight: var(--f-font-weight-bold);
}
.top .box__item-title--black span {
  color: #333333;
}
.top .box__bg {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
}
.top .box__bg-main {
  --item-width: 75rem;
  --item-height: 8.1rem;
}
@media (min-width: 768px) {
  .top .box__bg-main {
    --item-width: 96rem;
    --item-height: 10.5rem;
  }
}
.top .link-buttons {
  max-width: var(--f-width-max);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--f-space);
}
@media (min-width: 768px) {
  .top .link-buttons {
    grid-template-columns: repeat(5, 1fr);
  }
}
.top .link-buttons__item {
  width: 100%;
  margin: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 1.2rem;
}
@media (min-width: 768px) {
  .top .link-buttons__item {
    font-size: 1.6rem;
  }
}
.top .banner {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  margin-top: var(--f-space);
  width: 100%;
}
@media (min-width: 768px) {
  .top .banner {
    max-width: 728px;
  }
}
.top .banner:first-child {
  margin-top: 0;
}
.top .banner-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  margin-top: var(--f-space);
}
.top .banner-img {
  position: relative;
  width: 100%;
  height: 0;
}
.top .banner-img img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.top .banner-text {
  margin-top: var(--f-space-d2);
}
.top .recommended-req-info-list-slider__slide {
  padding: 0.2rem;
}
.top .section-link {
  padding: var(--f-space-t4) var(--f-space);
  background-color: var(--f-color-bg);
}
@media (min-width: 768px) {
  .top .section-link-inner {
    max-width: var(--f-width-max);
    margin-left: auto;
    margin-right: auto;
  }
}
.top .section-link .link {
  margin: var(--f-space) 0 0;
  display: flex;
  justify-content: center;
  padding: var(--f-space-t1_5) 0 var(--f-space-t1_5) var(--f-space-t3);
  background-color: #fff;
  color: inherit;
}
@media (min-width: 768px) {
  .top .section-link .link-list {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-left: calc(var(--f-space) * -1);
  }
  .top .section-link .link-list .link,
  .top .section-link .link-list .link:first-child {
    width: calc(33.3333% - var(--f-space));
    margin: var(--f-space) 0 0 var(--f-space);
    padding-left: 2em;
  }
}
.top .section-link .link:first-child {
  margin: 0;
}
.top .section-link .link--ad {
  padding: var(--f-space-t1_5);
}
.top .section-link .link img {
  width: 100%;
}
.top .section-link .link .f-heading-3 {
  margin: 0;
}
.top .section-info {
  padding: var(--f-space-t4) 0;
}
.top .section-info .f-heading-4 {
  margin-top: 0;
}
@media (max-width: 767px) {
  .top .section-info .f-heading-4 {
    font-size: 1.4rem;
  }
}
.top .section-info .info {
  margin-top: var(--f-space-t2);
  padding: 0 var(--f-space);
}
@media (min-width: 768px) {
  .top .section-info .info {
    max-width: var(--f-width-max);
    margin-left: auto;
    margin-right: auto;
  }
}
.top .section-info .info-text {
  line-height: 1.4em;
}
.top .section-info .info-heading {
  line-height: 1.4em;
  margin: 1em 0 0;
  color: #ec6d82;
  font-weight: var(--f-font-weight-bold);
}
.top .section-set {
  display: flex;
  flex-direction: column;
  gap: var(--f-space-t3);
}
.top .section-set__button-container {
  display: flex;
  justify-content: center;
}
.top .section-set__button {
  margin: 0;
  max-width: 374px;
}
.top .section-sets {
  display: flex;
  flex-direction: column;
  gap: var(--f-space-t4);
}

.f-footer-link-text {
  text-align: center;
  margin: 20px;
  font-size: 1rem;
}
.f-footer-link-text span {
  display: block;
  margin-bottom: 5px;
}

.yougo .index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--f-space) 0 0 calc(var(--f-space-d2) * -1);
  padding: 0 var(--f-space);
}
.yougo .index-container {
  max-width: var(--f-width-max);
  margin-left: auto;
  margin-right: auto;
  position: sticky;
  top: var(--f-height-navbar);
}
.yougo .index li {
  width: calc(20% - var(--f-space) / 2);
  margin: var(--f-space-d2) 0 0 var(--f-space-d2);
}
.yougo .index li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4em;
  border: 0.1rem solid var(--f-color-border);
  border-radius: 0.3rem;
  background-color: #fff;
  color: var(--f-color-green);
  font-weight: var(--f-font-weight-bold);
}
.yougo dl {
  margin: var(--f-space-t2) 0 0;
  padding: var(--f-space-t2) 0 0;
  border-top: 0.1rem solid #e2e1da;
}
.yougo dl dt {
  font-size: 1.1em;
  font-weight: var(--f-font-weight-bold);
}
.yougo dl dd {
  margin: var(--f-space-d2) 0 0;
}