@charset "utf-8";

/**
 * @title Knowledge
 * @description Qoo10運用ナレッジ 一覧・記事詳細（カード本体は top.css の Knowledge Card）
 */

/* ========================================
Layout
======================================== */
.main.p-knowledge {
  background: var(--l-gray);
  background-image: url("../img/top/bg_feature.png");
  background-image: image-set(url("../img/top/bg_feature.webp") type("image/webp"),
      url("../img/top/bg_feature.png") type("image/png"));
  background-repeat: repeat;
  background-size: 140px 150px;
  padding-top: calc(80 * var(--u));
  padding-bottom: calc(80 * var(--u));
}

@media screen and (min-width: 48rem) {
  .main.p-knowledge {
    padding-top: calc(130 * var(--u));
    padding-bottom: calc(40 * var(--u));
  }
}

.p-knowledge__inner {
  max-width: calc(1130 * var(--u));
  padding: 0 calc(15 * var(--u));
  margin: 0 auto;
}

@media screen and (min-width: 48rem) {
  .p-knowledge__inner {
    padding: 0 calc(25 * var(--u));
  }
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 韓国語は単語（分かち書き）単位で改行する */
:lang(ko) .p-knowledge {
  word-break: keep-all;
  overflow-wrap: break-word;
  /* anywhere だと英字の透かし（.sec-ttl::after）まで折り返すため */
}

/* ========================================
Breadcrumb
======================================== */
.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 * var(--u)) 0;
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  letter-spacing: 0.06em;
}

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

.c-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin: 0 calc(10 * var(--u));
  color: var(--gray);
}

.c-breadcrumb li:last-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.c-breadcrumb a {
  color: var(--black);
  transition: color 0.3s ease;
}

@media screen and (min-width: 48rem) {
  .c-breadcrumb ol {
    font-size: max(calc(14 * var(--u)), 12px);
  }
}

@media (any-hover: hover) {
  .c-breadcrumb a:hover {
    color: var(--oragne);
  }
}

/* ========================================
Archive
======================================== */
.p-knowledge__ttl.sec-ttl {
  margin: calc(60 * var(--u)) auto calc(40 * var(--u));
}

.p-knowledge__ttl.sec-ttl::after {
  font-size: calc(75 * var(--u));
  opacity: 0.8;
}

@media screen and (min-width: 48rem) {
  .p-knowledge__ttl.sec-ttl {
    margin: calc(80 * var(--u)) 0 calc(60 * var(--u));
  }

  .p-knowledge__ttl.sec-ttl::after {
    font-size: calc(126 * var(--u));
  }
}

.p-knowledge__lead {
  font-size: calc(14 * var(--u));
  line-height: calc(24/14);
  letter-spacing: 0.08em;
}

@media screen and (min-width: 48rem) {
  .p-knowledge__lead {
    font-size: calc(16 * var(--u));
    line-height: calc(27/16);
  }
}

.p-knowledge__cats {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin-top: calc(24 * var(--u));
}

@media screen and (min-width: 48rem) {
  .p-knowledge__cats {
    gap: calc(10 * var(--u));
    margin-top: calc(30 * var(--u));
  }
}

.p-knowledge__cat {
  background-color: var(--white);
  color: var(--black);
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(8.5 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 50vh;
  transition: all 0.3s ease;
}

@media screen and (min-width: 48rem) {
  .p-knowledge__cat {
    padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));
    font-size: max(calc(14 * var(--u)), 12px);
  }
}

.p-knowledge__cat.is-current {
  background-color: var(--oragne);
  color: var(--white);
}

@media (any-hover: hover) {
  .p-knowledge__cat:hover {
    background-color: var(--oragne);
    color: var(--white);
  }
}

.p-knowledge .c-knowledge-list {
  margin-top: calc(24 * var(--u));
}

@media screen and (min-width: 48rem) {
  .p-knowledge .c-knowledge-list {
    margin-top: calc(40 * var(--u));
  }
}

.p-knowledge__empty {
  margin-top: calc(24 * var(--u));
  padding: calc(40 * var(--u)) calc(20 * var(--u));
  background: var(--white);
  border-radius: calc(20 * var(--u));
  text-align: center;
  font-size: calc(14 * var(--u));
  letter-spacing: 0.08em;
}

@media screen and (min-width: 48rem) {
  .p-knowledge__empty {
    margin-top: calc(40 * var(--u));
    font-size: calc(16 * var(--u));
  }
}

/* Pagination */
.c-knowledge-pagination {
  margin-top: calc(40 * var(--u));
}

@media screen and (min-width: 48rem) {
  .c-knowledge-pagination {
    margin-top: calc(60 * var(--u));
  }
}

.c-knowledge-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 * var(--u));
}

.c-knowledge-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: calc(14 * var(--u));
  line-height: 1;
  transition: all 0.3s ease;
}

.c-knowledge-pagination .page-numbers.current {
  background: var(--black);
  color: var(--white);
}

.c-knowledge-pagination .page-numbers.dots {
  background: transparent;
}

.c-knowledge-pagination .prev,
.c-knowledge-pagination .next {
  position: relative;
}

.c-knowledge-pagination .prev::before,
.c-knowledge-pagination .next::before {
  content: '';
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.c-knowledge-pagination .prev::before {
  transform: translateX(2px) rotate(-135deg);
}

.c-knowledge-pagination .next::before {
  transform: translateX(-2px) rotate(45deg);
}

@media screen and (min-width: 48rem) {
  .c-knowledge-pagination .page-numbers {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    font-size: calc(16 * var(--u));
  }
}

@media (any-hover: hover) {
  .c-knowledge-pagination a.page-numbers:hover {
    background: var(--oragne);
    color: var(--white);
  }
}

/* ========================================
Article
======================================== */
.p-knowledge-article {
  margin-top: calc(20 * var(--u));
  background: var(--white);
  border-radius: calc(20 * var(--u));
  padding: calc(30 * var(--u)) calc(15 * var(--u)) calc(40 * var(--u));
}

@media screen and (min-width: 48rem) {
  .p-knowledge-article {
    margin-top: calc(30 * var(--u));
    padding: calc(70 * var(--u)) calc(20 * var(--u)) calc(80 * var(--u));
  }
}

.p-knowledge-article__head,
.p-knowledge-article__img,
.p-knowledge-article__content {
  max-width: calc(820 * var(--u));
  margin-inline: auto;
}

.p-knowledge-article__head .c-knowledge-card__meta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u)) calc(16 * var(--u));
}

.p-knowledge-article__head .c-knowledge-card__cat {
  transition: color 0.3s ease;
}

@media (any-hover: hover) {
  .p-knowledge-article__head a.c-knowledge-card__cat:hover {
    color: var(--oragne);
  }
}

.p-knowledge-article__ttl {
  margin-top: calc(14 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(34/22);
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media screen and (min-width: 48rem) {
  .p-knowledge-article__ttl {
    margin-top: calc(18 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: calc(48/32);
  }
}

.p-knowledge-article__img {
  margin-top: calc(24 * var(--u));
  aspect-ratio: 16 / 9;
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  background: var(--l-gray);
}

@media screen and (min-width: 48rem) {
  .p-knowledge-article__img {
    margin-top: calc(40 * var(--u));
  }
}

.p-knowledge-article__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文の装飾は knowledge-content.css（ブロックエディタと共用） */
.p-knowledge-article__content {
  margin-top: calc(30 * var(--u));
}

@media screen and (min-width: 48rem) {
  .p-knowledge-article__content {
    margin-top: calc(50 * var(--u));
  }
}

/* ========================================
CTA（記事末尾・一覧末尾）
======================================== */
.c-knowledge-cta {
  position: relative;
  margin-top: calc(40 * var(--u));
  padding: calc(40 * var(--u)) calc(20 * var(--u));
  /* 下に行くほど白を半透明にして背景のグレーを透かし、白いボタンとのコントラストを上げる */
  background: linear-gradient(to bottom, var(--white) 35%, rgba(255, 255, 255, 0.5));
  border: 1px dashed var(--black);
  border-radius: calc(20 * var(--u));
  border-radius: calc(50 * var(--u));
  text-align: center;
}

@media screen and (min-width: 48rem) {
  .c-knowledge-cta {
    margin-top: calc(180 * var(--u));
    padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(60 * var(--u));
    border-radius: calc(2000 * var(--u));
  }
}

.c-knowledge-cta__copy {
  font-size: calc(12 * var(--u));
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media screen and (min-width: 48rem) {
  .c-knowledge-cta__copy {
    font-size: max(calc(14 * var(--u)), 12px);
  }
}

.c-knowledge-cta__logo {
  width: calc(140 * var(--u));
  margin: calc(10 * var(--u)) auto 0;
  line-height: 0;
}

@media screen and (min-width: 48rem) {
  .c-knowledge-cta__logo {
    width: calc(220 * var(--u));
  }
}

.c-knowledge-cta__ttl {
  margin-top: calc(24 * var(--u));
  /* color: var(--oragne); */
  font-size: calc(19 * var(--u));
  line-height: calc(34/18);
  font-weight: 800;
  letter-spacing: 0.02em;
}

@media screen and (min-width: 48rem) {
  .c-knowledge-cta__ttl {
    letter-spacing: 0.06em;
    margin-top: calc(20 * var(--u));
    font-size: calc(34 * var(--u));
    line-height: calc(62 / 43);
    font-weight: 900;
    color: #333;
  }
}

.c-knowledge-cta__ttl span {
  color: var(--oragne);
}

.c-knowledge-cta__txt {
  margin-top: calc(12 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(24/14);
  letter-spacing: 0.08em;
  text-align: left;
}

@media screen and (min-width: 48rem) {
  .c-knowledge-cta__txt {
    margin-top: calc(18 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(27/16);
    text-align: center;
  }
}

.c-knowledge-cta__btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(12 * var(--u));
  margin-top: calc(108 * var(--u));
  /* SP：ボタンにつかまるイラスト分 */
}

/* SPはCTA内側の幅いっぱいに広げ、タップしやすい高さにする */
.c-knowledge-cta__btns .c-contact-btn {
  z-index: 1;
  width: 100%;
  padding: calc(17 * var(--u)) calc(5 * var(--u));
  font-size: calc(14 * var(--u));
}

.c-knowledge-cta__btns .c-contact-btn::after {
  left: calc(20 * var(--u));
}

@media screen and (min-width: 48rem) {
  .c-knowledge-cta__btns {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(20 * var(--u));
    margin-top: calc(22 * var(--u));
  }

  .c-knowledge-cta__btns .c-contact-btn {
    width: 250px;
    padding: 17.5px 8px;
    font-size: 18px;
  }

  .c-knowledge-cta__btns .c-contact-btn::after {
    left: 19px;
  }
}

/* ----------------------------------------
イラスト PC：CTA枠の上辺から顔を出して手をかける（SPでは非表示）
体は枠の上辺で切り取り（overflow: hidden）、手だけを枠線の上に重ねる
---------------------------------------- */
.c-knowledge-cta__peek {
  display: none;
  position: absolute;
  top: calc(-92 * var(--u));
  left: 0;
  right: 0;
  width: calc(160 * var(--u));
  height: calc(92 * var(--u));
  margin-inline: auto;
  pointer-events: none;
}

.c-knowledge-cta__peek-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 1px);
  overflow: hidden;
}

.c-knowledge-cta__peek-body img {
  display: block;
  width: 100%;
}

.c-knowledge-cta__peek-hand {
  position: absolute;
  top: calc(78 * var(--u));
  left: 0;
  right: 0;
  width: 100%;
  margin-inline: auto;
  animation: knowledgeHandTug 4s ease-in-out infinite;
}

@media screen and (min-width: 48rem) {
  .c-knowledge-cta__peek {
    display: block;
    top: calc(-125 * var(--u));
    width: calc(220 * var(--u));
    height: calc(125 * var(--u));
  }

  .c-knowledge-cta__peek-hand {
    top: calc(105 * var(--u));
  }
}

/* ----------------------------------------
イラスト SP：ボタンの縁に手をかける（PCでは非表示）
体：ボタンの背面（z-index: 0）／ボタン：z-index: 1／手：前面（z-index: 2）
ラッパーに transform・z-index を付けると重なり順が崩れるので付けない
---------------------------------------- */
.c-knowledge-cta__chara {
  position: absolute;
  top: calc(-105 * var(--u));
  left: 0;
  right: 0;
  width: calc(160 * var(--u));
  height: calc(117 * var(--u));
  margin-inline: auto;
  pointer-events: none;
}

.c-knowledge-cta__chara img {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
}

.c-knowledge-cta__chara-body {
  top: 0;
  z-index: 0;
  width: calc(160 * var(--u));
}

.c-knowledge-cta__chara-hand {
  top: calc(90 * var(--u));
  z-index: 2;
  width: 100%;
  animation: knowledgeHandTug 4s ease-in-out infinite;
}

@media screen and (min-width: 48rem) {
  .c-knowledge-cta__chara {
    display: none;
  }
}

/* 枠の縁を「クイクイッ」と2回引っぱる → しばらく休む（約4秒周期） */
@keyframes knowledgeHandTug {

  0%,
  70%,
  100% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(calc(4 * var(--u)));
  }

  80% {
    transform: translateY(0);
  }

  85% {
    transform: translateY(calc(4 * var(--u)));
  }

  90% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .c-knowledge-cta__peek-hand,
  .c-knowledge-cta__chara-hand {
    animation: none;
  }
}

/* c-contact-btn の線バリエーション（TOPの Contact ボタンと同じ形） */
.c-contact-btn.c-contact-btn--line {
  background: var(--white);
  color: var(--black);
  box-shadow: inset 0 0 0 1px var(--black);
  font-family: var(--font-main);
  letter-spacing: 0.06em;
}

@media (any-hover: hover) {
  .c-contact-btn.c-contact-btn--line:hover {
    background: var(--oragne);
    color: var(--white);
    box-shadow: inset 0 0 0 1px var(--oragne);
  }
}

/* ========================================
Related
======================================== */
.p-knowledge-related {
  margin-top: calc(60 * var(--u));
}

@media screen and (min-width: 48rem) {
  .p-knowledge-related {
    margin-top: calc(100 * var(--u));
  }
}

.p-knowledge-related__ttl {
  font-size: calc(20 * var(--u));
  line-height: calc(30/20);
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media screen and (min-width: 48rem) {
  .p-knowledge-related__ttl {
    font-size: calc(28 * var(--u));
    line-height: calc(40/28);
  }
}

.p-knowledge-related .c-knowledge-list {
  margin-top: calc(20 * var(--u));
}

@media screen and (min-width: 48rem) {
  .p-knowledge-related .c-knowledge-list {
    margin-top: calc(30 * var(--u));
  }
}

.p-knowledge-related__btn {
  margin-top: calc(30 * var(--u));
  text-align: center;
}

@media screen and (min-width: 48rem) {
  .p-knowledge-related__btn {
    margin-top: calc(40 * var(--u));
    text-align: right;
  }
}