@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 
-------------------------------------------------------*/
.c-footer__shop-link img,
.c-footer__shop-link-span {
  transition: scale 0.3s ease-out;
}

.c-footer a {
  color: inherit;
}

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

.c-footer__shop-link:hover .c-footer__shop-link-span {
  letter-spacing: 0.05em;
}

.c-footer .c-footer__shopLink--text {
  display: grid;
  color: var(--color-primary);
  height: 100%;
  place-items: center;
  text-decoration: none;
}

.c-footer__shop-link-span {
  font-weight: bold;
  font-size: 120%;
}

.c-footer {
  position: relative;
  z-index: 2;
  font-size: clamp(14px, 1.82vw, 16px);
  color: var(--color-white);
  background-color: var(--color-primary);
}

@media (769px <= width) {
  .c-footer {
    padding-bottom: 80px;
  }
}
.c-footer *,
.c-footer ::after,
.c-footer ::before {
  box-sizing: border-box;
}

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

.c-footer__top {
  padding: 64px 16px 60px;
}

@media (769px <= width) {
  .c-footer__top {
    padding: min(8.56vw, 115px) 20px min(7.81vw, 105px);
  }
}
.c-footer__bottom {
  display: block;
  padding: 28px 16px 32px;
  border-top: 1px solid var(--color-white);
}

@media (769px <= width) {
  .c-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: min(2.68vw, 36px) 30px;
  }
}
.c-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

.c-footer__nav--main {
  row-gap: clamp(16px, 1.56vw, 30px);
  -moz-column-gap: 32px;
  column-gap: 32px;
  margin-bottom: 40px;
  font-weight: 500;
}

@media (769px <= width) {
  .c-footer__nav--main {
    margin-bottom: 16px;
  }
}
.c-footer__nav--sub {
  row-gap: clamp(16px, 1.56vw, 24px);
  -moz-column-gap: 32px;
  column-gap: 32px;
  margin-bottom: 72px;
}

@media (769px <= width) {
  .c-footer__nav--sub {
    margin-bottom: 48px;
  }
}
@media (width <= 768px) {
  .c-footer__nav-item {
    width: 100%;
  }
}
.c-footer__nav-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-size: 1.375rem;
}

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

.c-footer__nav-link--small {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-size: clamp(14px, 1.82vw, 16px);
  font-weight: 400;
}

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

.c-footer__other {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

@media (769px <= width) {
  .c-footer__other {
    gap: 80px;
    justify-content: center;
  }
}
.c-footer__other-title {
  margin-bottom: 24px;
  font-size: 1.375rem;
}

@media (769px <= width) {
  .c-footer__other-title {
    text-align: center;
  }
}
.c-footer__other-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-size: inherit;
}

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

.c-footer__sns-list {
  display: flex;
  gap: 24px;
  align-items: center;
}

@media (769px <= width) {
  .c-footer__sns-list {
    justify-content: center;
  }
}
.c-footer__shops {
  display: grid;
  flex-wrap: wrap;
  row-gap: 24px;
  -moz-column-gap: 32px;
  column-gap: 32px;
}

@media (769px <= width) {
  .c-footer__shops {
    grid-template-columns: 1fr 1fr;
  }
}
.c-footer__shop--comodogear,
.c-footer__shop--nocria {
  position: relative;
  width: 100%;
  max-width: 296px;
  height: 64px;
  aspect-ratio: 296/103;
  text-align: center;
  background-color: var(--color-white, white);
}

@media (769px <= width) {
  .c-footer__shop--comodogear,
  .c-footer__shop--nocria {
    height: 104px;
  }
}
.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--comodogear,
.c-footer__shop-img--nocria {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.c-footer__shop-img--nocria {
  width: 75%;
}

.c-footer__shop-img--comodogear {
  width: 82%;
}

.c-footer__bottom-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 0;
  justify-content: space-between;
  list-style-type: none;
}

@media (769px <= width) {
  .c-footer__bottom-nav {
    gap: 0 clamp(12px, 1.56vw, 30px);
    justify-content: center;
  }
}
.c-footer__bottom-nav-item {
  width: 50%;
}

@media (769px <= width) {
  .c-footer__bottom-nav-item {
    width: auto;
  }
}
.c-footer__bottom-nav-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-size: clamp(12px, 1.56vw, 14px);
}

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

@media print, screen and (min-width: 769px) {
  .c-footer__bottom-nav {
    order: 2;
  }
}
.c-footer__lang {
  display: flex;
  gap: 0 32px;
  align-items: center;
  justify-content: center;
  margin-top: 51px;
}

@media (769px <= width) {
  .c-footer__lang {
    margin-top: 51px;
  }
}
.c-footer__lang-currentContainer {
  position: relative;
  margin: 0;
}

@media (769px <= width) {
  .c-footer__lang-currentContainer::before {
    position: absolute;
    top: 0;
    left: -16px;
    width: 1px;
    height: 100%;
    content: "";
    background-color: var(--color-white);
  }
}
.c-footer__lang-select,
.c-footer__lang-current {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  position: relative;
  display: flex;
  align-items: center;
  padding: 1px 0 2px;
  font-size: clamp(12px, 1.56vw, 14px);
  color: var(--color-white);
}

.c-footer__lang-select:hover,
.c-footer__lang-current:hover {
  text-decoration: none;
}

.c-footer__lang-select {
  padding-left: 30px;
  font-weight: 400;
}

.c-footer__lang-current {
  padding-left: 40px;
}

.c-footer__lang-select::before,
.c-footer__lang-current::before {
  position: absolute;
  top: 50%;
  left: 0;
  height: 20px;
  content: "";
  image-rendering: pixelated;
  transform: translateY(-50%) translateZ(0);
}

.c-footer__lang-select::before {
  width: 20px;
  background: url(/jp/assets/images/common/icon-footer-worldwide.svg) no-repeat center/cover;
}

.c-footer__lang-current::before {
  width: 30px;
  background: url(/jp/assets/images/common/icon-footer-japan.webp) no-repeat center/cover;
}

.c-footer__lang-current--notJp {
  padding-inline-start: 0;
}

.c-footer__lang-current--notJp::before {
  display: none;
}

@media screen and (max-width: 768px) {
  .c-footer__lang {
    margin: 32px 0 0;
  }
  .c-footer__lang-select,
  .c-footer__lang-current {
    font-size: 12px;
  }
}
.c-footer__copy {
  color: var(--color-white);
}

@media print, screen and (min-width: 769px) {
  .c-footer__copy {
    order: 1;
  }
}
@media screen and (max-width: 768px) {
  .c-footer__copy {
    display: inline-block;
    margin-top: 27px;
    font-size: 12px;
  }
}
.c-footer__pagetop {
  position: fixed;
  right: 40px;
  bottom: 30px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.4s;
  visibility: hidden;
}

.c-footer__pagetop.is-show {
  opacity: 1;
  visibility: visible;
}

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

.c-footer__pagetop-btn {
  position: relative;
  display: block;
  width: 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;
}

.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%);
}

.sb-active .c-footer__pagetop {
  display: none;
}

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

@media screen and (max-width: 768px) {
  .c-footer__pagetop {
    right: 16px;
  }
  .c-footer__pagetop.is-absolute {
    bottom: 290px;
  }
  .c-footer__pagetop-btn {
    width: min(13.33vw, 60px);
  }
}