@charset "UTF-8";
/*-------------------------------------------------------
  global
-------------------------------------------------------*/
/* ----------------------------------------------------------------------
  変数のセット
---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Typography
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Font Size
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Font Weight
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Font Styles
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Letter Spacing
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    line Height
------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Color
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Border Radius
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Icon Size
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Common Size
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Color（コンポーネント内で使用する場合は/mixins/colorの関数を使用すること）
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    mediaquery
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Font Color & Background Color
------------------------------------------------------------------- */
/* Font Color */
/* Background */
/* -------------------------------------------------------------------------------------------------
  Typography（コンポーネント内で使用する場合は/functions/typographyの関数を使用すること）
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------
  Font Size
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Font Weight
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Font Styles
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Letter Spacing
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Line Height
------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Border Radius（コンポーネント内で使用する場合は/mixins/roundedの関数を使用すること）
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Align（行揃え）
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
  Icon Size
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
  Spacing（主にユーティリティで使用。値は$sizeを参照）
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
  Container（コンポーネント内で使用する場合は/mixins/containerの関数を使用すること）
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
  Header Height（ページ内のヘッダーの高さを指定）
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
  Size（GapやSpacingで使用）
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
  garter（colgap）
------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
    関数（function/）← 個別でコンポーネントに適応したい場合
---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
    mixin（mixin/）← まとめてコンポーネントに適応したい場合
---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
  変数のセット
---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Container
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------
    Gap
------------------------------------------------------------------------------------------------- */
/* Y軸方向への間隔 */
/* X軸方向への間隔 */
/* l-section__headirのマージン */
/* 見出しそのもののマージン */
/* -------------------------------------------------------------------------------------------------
    paragraph
------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Text Overflow
------------------------------------------------------------------- */
/* -------------------------------------------------------------------
    Half Leading
------------------------------------------------------------------- */
/*-------------------------------------------------------
 汎用型のアイコン
-------------------------------------------------------*/
/* 矢印 */
/* 矢印（下向き） */
/* 矢印アイコン（円形） */
/* 矢印アイコン（円形）ホバー時 */
/* 外部リンク */
/* 一時停止ボタン */
/* 一時停止ボタンのホバー */
/* 再生ボタン */
/* 再生ボタンのホバー */
/* 「前の項目へ」と「次の項目へ」のアイコンの共通項目 */
/* 「前の項目へ」のアイコン */
/* 「前の項目へ」のアイコンのホバー */
/* 「次の項目へ」のアイコン */
/* 「次の項目へ」のアイコンのホバー */
/* 「プラス」のアイコン */
/* 「マイナス」のアイコン */
/* 虫眼鏡アイコン */
/* RSSアイコン */
/*-------------------------------------------------------
  CTAアイコン（今後増える）
-------------------------------------------------------*/
/* お問い合わせ */
/* お問い合わせ */
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------
  【メモ】
  ホバーアニメ一覧
  ・ライン伸縮アニメーション
  ・画像拡大アニメーション
  ・下線アニメーション
  ・背景色アニメーション

  上記をそれぞれモジュールとしてパーツに分離。
  該当のコンポーネントにmixinすることで拡張性・保守性を担保
  ※ アイコンのホバーについてはmaskを切り替えているためicon.scssに記載
---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------
  ライン伸縮アニメーション
-------------------------------------------------------*/
/* ホバー時 */
/*-------------------------------------------------------
  下線アニメーション
-------------------------------------------------------*/
/* ホバー時 */
/*-------------------------------------------------------
  画像拡大アニメーション
-------------------------------------------------------*/
/*-------------------------------------------------------
  文字色色アニメーション
-------------------------------------------------------*/
/*-------------------------------------------------------
  背景色アニメーション
-------------------------------------------------------*/
/*-------------------------------------------------------
  component
-------------------------------------------------------*/
footer {
  font-weight: var(--font-weight-medium);
}

.c-footer {
  position: relative;
  z-index: 2;
  font-size: 16px;
  padding: 0 0 40px 0;
  color: var(--color-white);
  background-color: var(--color-primary);
}

@media (min-width: 768px) {
  .c-footer {
    padding: 0 0 64px 0;
  }
}

.c-footer :where(a) {
  color: inherit;
}

.c-footer :where(img) {
  max-width: 100%;
  vertical-align: bottom;
  -o-object-fit: contain;
  object-fit: contain;
}

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

.c-footer__specialSite {
  padding: 40px 0px;
}

@media (min-width: 768px) {
  .c-footer__specialSite {
    padding: 32px 0px;
  }
}

@media (min-width: 768px) {
  .c-footer__specialSite-link {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    text-decoration: none;
    flex-direction: row;
  }
}

/* ホバー時の制御 */
@media (any-hover: hover) {
  .c-footer__specialSite-link:hover .c-footer__specialSite-imageBox-img {
    scale: 1.1;
  }

  .c-footer__specialSite-link:hover .c-footer__specialSite-title {
    color: var(--color-primary);
    text-decoration: none;
  }

  .c-footer__specialSite-link:hover .c-footer__specialSite-more {
    color: var(--color-primary);
  }

  .c-footer__specialSite-link:hover .c-footer__specialSite-more::after {
    block-size: var(--base-icon-size);
    aspect-ratio: 1;
    -webkit-mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 30' viewBox='0 0 30 30'%3E%3Cpath d='M15 0C6.7 0 0 6.7 0 15s6.7 15 15 15 15-6.7 15-15S23.3 0 15 0zm3.5 15.7-4 4c-.2.2-.5.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l3.3-3.3-3.3-3.3c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l4 4c.4.4.4 1 0 1.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 30' viewBox='0 0 30 30'%3E%3Cpath d='M15 0C6.7 0 0 6.7 0 15s6.7 15 15 15 15-6.7 15-15S23.3 0 15 0zm3.5 15.7-4 4c-.2.2-.5.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l3.3-3.3-3.3-3.3c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l4 4c.4.4.4 1 0 1.4z'/%3E%3C/svg%3E");
  }

  .c-footer__social-img {
    transition: scale 0.25s cubic-bezier(0.37, 0, 0.63, 1);
  }

  .c-footer__social-link:hover .c-footer__social-img {
    scale: 1.1;
  }
}

.c-footer__specialSite-imageBox {
  position: relative;
  overflow: hidden;
  aspect-ratio: 252/171;
  border-radius: var(--rounded-sm);
  border: 0.125rem solid var(--color-lightGray);
}

@media (min-width: 768px) {
  .c-footer__specialSite-imageBox {
    margin-bottom: 0px;
    flex-shrink: 0;
    border-radius: var(--rounded-md);
    inline-size: 15.875rem;
  }
}

.c-footer__specialSite-imageBox img {
  inline-size: 100%;
  block-size: 100%;
  object-position: center;
  object-fit: cover;
  transition: scale 0.25s cubic-bezier(0.37, 0, 0.63, 1);
}

.c-footer__social-icon {
  position: relative;
  overflow: hidden;
  aspect-ratio: 60/60;
  border-radius: 50%;
  border: 0.125rem solid var(--color-primary);
}

.c-footer__social-img img {
  inline-size: 100%;
  block-size: 100%;
  object-position: center;
  object-fit: cover;
  transition:
    color cubic-bezier(0.37, 0, 0.63, 1),
    0.25s;
}

.c-footer__specialSite-contents {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .c-footer__specialSite-contents {
    padding-inline: 0rem;
  }
}

.c-footer__specialSite-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  line-height: var(--line-height-textContent);
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
  margin: 0 0 16px 0;
}

@media (min-width: 768px) {
  .c-footer__specialSite-title {
    margin: 0 0 8px 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
  }
}

.c-footer__specialSite-more {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--color-darkGray);
  font-weight: var(--font-weight-bold);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.c-footer__specialSite-more::after {
  content: "";
  --base-icon-size: 1.875rem;
  color: var(--color-primary);
  block-size: var(--base-icon-size);
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 30' viewBox='0 0 30 30'%3E%3Cstyle%3E.st1%7Bfill:none;stroke:%23000;stroke-width:2;stroke-linecap:round%7D%3C/style%3E%3Ccircle cx='15' cy='15' r='14.5' style='fill:none;stroke:%23000'/%3E%3Cpath d='m13.8 11 4 4M13.8 19l4-4' class='st1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 30' viewBox='0 0 30 30'%3E%3Cstyle%3E.st1%7Bfill:none;stroke:%23000;stroke-width:2;stroke-linecap:round%7D%3C/style%3E%3Ccircle cx='15' cy='15' r='14.5' style='fill:none;stroke:%23000'/%3E%3Cpath d='m13.8 11 4 4M13.8 19l4-4' class='st1'/%3E%3C/svg%3E");
}

.c-footer__top {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 0 0 0;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
}

@media (min-width: 768px) {
  .c-footer__top {
    padding: 64px 0;
  }
}

.c-footer__guide,
.c-footer__info {
  display: flex;
  max-width: 256px;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  margin: 0 0 32px 0;
}

@media (min-width: 768px) {
  .c-footer__guide,
  .c-footer__info {
    gap: 32px;
  }
}

.c-footer__guide {
  gap: 24px;
}

.c-footer__info {
  gap: 16px;
}

.c-footer__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .c-footer__link {
    font-size: 1.125rem;
  }
}

.c-footer__link:hover {
  text-decoration: none;
}

.c-footer__link--small {
  font-size: 0.875rem;
}

.c-footer__link--lang {
  position: relative;
  display: flex;
  padding: 1px 0 2px 30px;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .c-footer__link--small,
  .c-footer__link--lang {
    font-size: 1rem;
  }
}

.c-footer__link--lang::before {
  position: absolute;
  top: 50%;
  left: 0;
  height: 20px;
  content: "";
  image-rendering: pixelated;
  transform: translateY(-50%) translateZ(0);
  width: 20px;
  background: url(/jp/assets/images/common/icon-footer-worldwide.svg) no-repeat center/cover;
}

.c-footer__external {
  padding: 0 0 32px 0;
}

.c-footer__socialMedia {
  margin-bottom: 10px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .c-footer__socialMedia {
    font-size: 1.125rem;
  }
}

.c-footer__socialMedia:hover {
  text-decoration: none;
}

.c-footer__social {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
}

.c-footer__social-item {
  display: grid;
  place-items: center;
}

.c-footer__social-link {
  display: grid;
  place-items: center;
}

.c-footer__shop-label {
  font-size: 1rem;
  margin: 0 0 10px 0;
}

@media (min-width: 768px) {
  .c-footer__shop-label {
    font-size: 1.125rem;
  }
}

.c-footer__shop-nocria {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 296/103;
  text-align: center;
  background-color: var(--color-white, white);
}

.c-footer__shop-link {
  display: block;
  width: 100%;
  height: 100%;
}

.c-footer__shop-link::after {
  position: absolute;
  right: 4%;
  bottom: 8%;
  display: block;
  height: 16%;
  aspect-ratio: 1/1;
  content: ""/"新しいタブで開く";
  background-image: url(/assets/images/common/icon-external.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.c-footer__shop-img {
  height: 100%;
  width: 75%;
  object-fit: contain;
  transition: scale 0.25s cubic-bezier(0.37, 0, 0.63, 1);
}

.c-footer__shop-link:hover .c-footer__shop-img {
  scale: 1.1;
}

.c-footer__pagetop {
  position: fixed;
  right: 16px;
  bottom: 30px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.4s;
  visibility: hidden;
}

@media screen and (min-width: 768px) {
  .c-footer__pagetop {
    right: 40px;
  }
}

.c-footer__pagetop.is-show {
  opacity: 1;
  visibility: visible;
}
@media screen and (min-width: 768px) {
  .c-footer__pagetop.is-absolute {
    bottom: 110px;
  }
}

.c-footer__pagetop.is-absolute {
  position: absolute;
  bottom: 290px;
}

.c-footer__pagetop-btn {
  position: relative;
  display: block;
  width: min(13.33vw, 60px);
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  color: var(--color-white);
  text-indent: 100%;
  white-space: nowrap;
  background-color: var(--color-primary);
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background 0.3s;
}

@media (min-width: 768px) {
  .c-footer__pagetop-btn {
    width: 60px;
  }
}

.c-footer__pagetop-btn:hover {
  background-color: var(--color-primary-hover);
}

.c-footer__pagetop-btn::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: auto;
  aspect-ratio: 1;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: url(/assets/images/common/icon-arrow-white.svg);
  mask-image: url(/assets/images/common/icon-arrow-white.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: translate(-50%, -50%);
}

.c-footer__bottom {
  margin: 40px 0 0 0;
}

@media (min-width: 768px) {
  .c-footer__bottom {
    margin: 0;
  }
}

.c-footer__bottom-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (min-width: 768px) {
  .c-footer__bottom-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    list-style-type: none;
  }
}

@media (min-width: 1024px) {
  .c-footer__bottom-contents {
    gap: 24px;
  }
}

.c-footer__bottom-item {
  width: calc((100% - 16px) / 2);
}

@media (min-width: 768px) {
  .c-footer__bottom-item {
    width: auto;
  }
}

.c-footer__bottom-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .c-footer__bottom-link {
    font-size: 0.875rem;
  }
}

.c-footer__bottom-link:hover {
  text-decoration: none;
}

.c-footer__copy {
  color: var(--color-white);
  display: inline-block;
  margin-top: 27px;
  font-size: 0.75rem;
  margin: 32px 0 0 0;
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .c-footer__copy {
    display: inline-block;
    margin-top: 0px;
    font-size: 0.875rem;
  }
}