@charset "UTF-8";

:root {
  --prod-color-gray: #6f6f6f;
  --prod-color-grey: #9e9e9e;
  --prod-color-brown: #8f6446;
  --prod-color-copper: #a57d65;
  --prod-color-aqua: #a8caf4;
  --prod-color-pink: #f4a8a8;
  --prod-color-ashgold: #DAD1CE;
  --prod-color-silver: #b4b4b4;
  --prod-color-beige: #c4b8a9;
  --prod-color-grain-gray: #949798;;
  --margin-xlarge: 8rem;
  --margin-large: 6rem;
  --margin-medium: 4rem;
  --margin-small: 2rem;
  --margin-xsmall: 1rem;
}

/* MP4動画 */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

/* Youtube 動画 */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ====================================
	製品共通：カラー設定
 ==================================== */
/* 製品カラーアイコン */
.icon-color {
  display: inline-block;
  inline-size: .8em;
  block-size: .8em;
  border: 1px solid #000;
  border-radius: 50%;
}

.icon-color.black {
  background-color: #000;
}

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

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

.icon-color.red {
  background-color: var(--sharp-red);
}

.icon-color.brown {
  background-color: var(--prod-color-brown);
}

.icon-color.copper {
  background-color: var(--prod-color-copper);
}

.icon-color.aqua {
  background-color: var(--prod-color-aqua);
}

.icon-color.pink {
  background-color: var(--prod-color-pink);
}

.icon-color.white {
  background-color: #fff;
}

.icon-color.ashgold {
  background-color: var(--prod-color-ashgold);
}

.icon-color.silver {
  background-color: var(--prod-color-silver);
}

.icon-color.grey {
  background-color: var(--prod-color-grey);
}

.icon-color.beige {
  background-color: var(--prod-color-beige);
}

.icon-color.grain-gray {
  background-color: var(--prod-color-grain-gray);
}

/* 注釈 */
sup {
  color: var(--cyan);
}

/* ====================================
	共通スタイル
===================================== */
.mts {
  margin-top: var(--margin-small);
}

.mtm {
  margin-top: var(--margin-medium)
}

.mtl {
  margin-top: var(--margin-large);
}

.mt1em {
  margin-top: 1em;
}

main[data-footer-type] {
  padding-bottom: 8rem;
}

/* テキスト・アローつき */
.has-arrow-left {
  inline-size: fit-content;
  font-weight: 400;
  padding-left: 1em;
  background: url('/assets/common/images/chevron-right-solid.svg') no-repeat left 0 top .4em/auto .8em;
}

a.has-arrow-left {
  display: inline-block;
}

/* ボタン・アローつき */
.btn-has-arrow-left {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-column-gap: .8em;
  inline-size: fit-content;
  block-size: fit-content;
  align-items: center;
  font-weight: 400;
  border: 1px solid #000;
  border-radius: 5px;
  padding: .5em 1em;
}

.btn-has-arrow-left::after {
  content: '';
}

.btn-has-arrow-left svg {
  inline-size: 0.6em;
  block-size: 1em;
}

/* フレックスコンテナ */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  inline-size: 100%;
}

/* サポート */
#globalSupportFooter {
  padding-block: 4rem;
  background-color: var(--white-gray);
}

.global-support-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.2em;
  text-align: center;
}

.list-global-support > li:not(:first-child) {
  margin-top: 1.4rem;
}

.list-global-support > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .8em;
  inline-size: 100%;
  block-size: 100%;
  font-size: 2rem;
  padding: .6em 1em;
  background-color: #fff;
  border: 1px solid #959595;
}

.list-global-support > li > a img {
  inline-size: 35px;
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {
  a.hover-parent.hovering .btn-has-arrow-left.hover-trigger {
    text-decoration: none;
  }

  a.has-arrow-left:hover {
    text-underline-offset: 3px;
  }

  /* グローバルサポート */
  .list-global-support a:hover {
    text-decoration: none;
  }
}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

  /* フッターラインアップ */
  #footLineup {
    margin-top: 4rem;
  }

  .foot-lineup-title-container {
    display: flex;
    align-items: baseline;
    margin-bottom: 2rem;
    padding-bottom: .5em;
  }

  .foot-lineup-title-container .foot-lineup-title {
    padding-bottom: .2em;
    font-size: 1.8rem;
    font-weight: 300;
  }

  .foot-lineup-title-container .btn-lineup {
    margin-left: 1.5em;
    font-size: 1.4rem;
  }

  .footer-lineup-container .swiper-slide {
    padding: 0 2%;
  }

  .footer-lineup-container .img {
    padding: 0 10%;
  }

  .footer-lineup-container .prod-name {
    font-size: 1.4rem;
  }

  .footer-lineup-container .icon-new {
    margin-left: .4em;
    font-size: 1.2rem;
  }

  .footer-lineup-container .text {
    margin-top: .5em;
    font-size: 1.2rem;
  }
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print, screen and (width >=768px) {
  :root {
    --margin-xlarge: 10rem;
    --margin-large: 8rem;
    --margin-medium: 6rem;
    --margin-small: 4rem;
    --margin-xsmall: 2rem;
  }

  main[data-footer-type] {
    padding-bottom: 15rem;
  }

  /* サポート */
  #globalSupportFooter {
    padding-block: 6rem;
  }

  .global-support-title {
    font-size: 3.2rem;
  }

  .list-global-support {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 2%;
  }

  .list-global-support > li:not(:first-child) {
    margin-top: 0;
  }
}

/* ====================================
	タブレット専用スタイル（768px～1024px）
===================================== */
@media screen and (768px <=width < 1024px) {

  /* サポート */
  .list-global-support > li > a {
    font-size: 1.6rem;
  }
}

/* ====================================
	PC専用スタイル（1024px～）
===================================== */
@media print, screen and (1024px <=width) {}