@charset "utf-8";

/* ==================================================
  共通
================================================== */
:root{
  --bk: #1a1a1a;
  --yellow: #ffcc00;
  --orange: #ff9900;
  --blue: #006cd0;
  --dark-blue: #004aaa;
  --red: #c71010;
  --gray: #9d9d9d;
  --gray2: #808080;
  --bg-color: #f6f6f6;
  --bd-color: #d3d3d3;

  --size-16: clamp(15px, calc(16 / var(--vw-1120) * 100vw), 16px);
  --size-24: clamp(20px, calc(24 / var(--vw-1120) * 100vw), 24px);
  --size-32: clamp(24px, calc(32 / var(--vw-1600) * 100vw), 32px);
  --size-40: clamp(28px, calc(40 / var(--vw-1600) * 100vw), 40px);
  --size-56: clamp(34px, calc(56 / var(--vw-1600) * 100vw), 56px);
  --size-64: clamp(40px, calc(64 / var(--vw-1600) * 100vw), 64px);

  --font-family-jp: "Inter", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, verdana, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  --font-family-en: "Roboto", sans-serif;

  --vw-375: 375;
  --vw-820: 820;
  --vw-1120: 1120;
  --vw-1600: 1600;
  --vw-1920: 1920;

  --bd-radius: 3px;
  --op70: .7;
}

html{
  font-size: var(--size-16);
}

body{
  font-size: var(--size-16);
  font-family: var(--font-family-jp);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-size-adjust: none;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--bk);
}

/* ============================================================
  ブレークポイント
  .show-pc     : 821px以上で表示（PCのみ表示）
  .show-tab    : 551px以上820以下で表示（タブレットのみ表示）
  .show-sp     : 550px以下で表示（スマホのみ表示）
  .show-pc-tab : 551px以上で表示（スマホ非表示）
  .show-tab-sp : 820px以下で表示（PC非表示）
============================================================ */

@media screen and (max-width: 550px){
  .show-pc,
  .show-tab,
  .show-pc-tab{
    display: none;
  }
}

@media screen and (max-width: 374px){
  .container,
  .l-container{
    padding: 0 10px;
  }
}

@media screen and (min-width: 551px) and (max-width: 820px){
  .show-pc,
  .show-sp,
  .show-pc-sp{
    display: none;
  }
}

@media screen and (min-width: 821px){
  .show-tab,
  .show-sp,
  .show-tab-sp{
    display: none;
  }

  a[href*="tel:"]{
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

h1,h2,h3,h4,h5,h6{
  font-weight: 700;
}

#main{
  margin-top: clamp(50px, calc(64 / var(--vw-820) * 100vw), 64px);
}

a{
  display: block;
  color: var(--bk);
  transition: all .1s ease-in-out;
}

ol,ul,li{
  list-style: none;
}

img{
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.video{
  border-radius: var(--bd-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

video{
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  vertical-align: bottom;
  /* iPhone safariの枠線を消す */
  filter: drop-shadow(0px 0px rgba(0,0,0,0));
  /* PCのChromeの枠線を消す */
  outline: none;
  border: none;
}

.youtube{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bd-radius);
}

.youtube iframe{
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: 16 / 9;
}

.js-video{
  position: relative;
}

.js-video::before,
.js-video::after{
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: all .25s ease-in-out .05s;
}

.js-video::before{
  z-index: 2;
  width: 70px;
  height: 70px;
  border-radius: 100vmax;
  background: rgb(0 0 0 / .6);
}

.js-video::after{
  z-index: 3;
  translate: calc(-50% + 2px) -50%;
  width: 30px;
  height: 27px;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyNyAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjUgMTMuMjYxNEMyNi44MzMzIDE0LjAzMTIgMjYuODMzMyAxNS45NTU3IDI1LjUgMTYuNzI1NUwzIDI5LjcxNThDMS42NjY2NyAzMC40ODU2IDAgMjkuNTIzNCAwIDI3Ljk4MzhWMi4wMDMwM0MwIDAuNDYzNDI5IDEuNjY2NjcgLTAuNDk4ODI0IDMgMC4yNzA5NzZMMjUuNSAxMy4yNjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==') center center / contain no-repeat;
}

table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.container{
  max-width: 1120px;
  width: 95%;
  margin-inline: auto;
}

.section{
  position: relative;
  padding: var(--size-64) 0;
}

.en{
  font-family: var(--font-family-en);
}

.--text-right{
  text-align: right;
}

.--text-small{
  font-size: 0.9em;
}

.fn--upper{
  text-transform: uppercase;
}

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

.marker{
  position: relative;
}

.marker::after{
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0;
  width: 100%;
  height: clamp(4px, calc(6 / var(--vw-1600) * 100vw), 6px);
  background: var(--yellow);
  scale: 0 1;
  transform-origin: left center;
  transition: scale .6s cubic-bezier(.36,.03,.97,.11) .3s;
}

.marker.js-anime.active::after{
  scale: 1;
}

.section__title{
  font-size: clamp(24px, calc(38 / var(--vw-1600) * 100vw), 38px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  margin-bottom: clamp(20px, calc(44 / var(--vw-1600) * 100vw), 44px);
}

.section__sub-title{
  font-size: clamp(20px, calc(30 / var(--vw-1600) * 100vw), 30px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: clamp(10px, calc(32 / var(--vw-1600) * 100vw), 32px);
}

.link-btn__wrapper{
  max-width: 740px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, calc(20 / var(--vw-1600) * 100vw), 20px);
}

.link-btn.shop{
  margin-inline: auto;
}

.link-btn.page-top{
  max-width: 170px;
}

.link-btn a{
  font-weight: 700;
  text-align: center;
  padding: clamp(12px, calc(18 / var(--vw-1600) * 100vw), 18px) clamp(8px, calc(16 / var(--vw-1600) * 100vw), 16px);
  border-radius: var(--bd-radius);
}

.link-btn.cart a,
.link-btn.shop a,
.link-btn.page-top a{
  color: var(--bk);
  background: var(--yellow);
}

.link-btn.cart a{
  box-shadow: 0 clamp(6px, calc(8 / var(--vw-1120) * 100vw), 8px) 0 var(--orange);
}

.link-btn.contact a,
.link-btn.download a{
  color: #fff;
  background: var(--blue);
  box-shadow: 0 clamp(6px, calc(8 / var(--vw-1120) * 100vw), 8px) 0 var(--dark-blue);
}

.link-btn.shop a{
  padding: 10px 20px;
  box-shadow: 0 6px 0 var(--orange);
}

.link-btn.page-top a{
  padding: 10px 20px;
  box-shadow: 0 6px 0 var(--orange);
}

.link-btn.back a{
  color: #fff;
  background: #555;
  box-shadow: 0 clamp(4px, calc(6 / var(--vw-1120) * 100vw), 6px) 0 #a2a2a2;
}

.link-btn a span{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: clamp(5px, calc(8 / var(--vw-1600) * 100vw), 8px);
}

.link-btn a span::before{
  display: block;
  content: '';
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.link-btn.cart a span::before{
  width: clamp(21px, calc(23 / var(--vw-1120) * 100vw), 23px);
  height: clamp(19px, calc(21 / var(--vw-1120) * 100vw), 21px);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMyAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMUg0LjVMNi41IDE4SDE5LjUiIHN0cm9rZT0iIzFBMUExQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxjaXJjbGUgY3g9IjUuNSIgY3k9IjIwIiByPSIyIiBmaWxsPSIjMUExQTFBIi8+CjxjaXJjbGUgY3g9IjE5LjUiIGN5PSIyMCIgcj0iMiIgZmlsbD0iIzFBMUExQSIvPgo8cGF0aCBkPSJNMTkuNSAxMy41TDYgMTVMNS41IDVIMjIuNUwxOS41IDEzLjVaIiBmaWxsPSIjMUExQTFBIi8+Cjwvc3ZnPgo=');
}

.link-btn.contact a span::before{
  width: clamp(18px, calc(20 / var(--vw-1120) * 100vw), 20px);
  height: clamp(12px, calc(14 / var(--vw-1120) * 100vw), 14px);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzk5XzExNyIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjE1Ij4KPHBhdGggZD0iTTIxLjYzMjggMTMuNzc0NEMyMS42MzI4IDE0LjMyNjcgMjEuMTg1MSAxNC43NzQ0IDIwLjYzMjggMTQuNzc0NEgyLjYzMjgxQzIuMDgwNTMgMTQuNzc0NCAxLjYzMjgxIDE0LjMyNjcgMS42MzI4MSAxMy43NzQ0VjIuODg0NzdMMTAuMzY2MiAxMC4wMzAzQzExLjEwMjkgMTAuNjMzMSAxMi4xNjI3IDEwLjYzMzEgMTIuODk5NCAxMC4wMzAzTDIxLjYzMjggMi44ODQ3N1YxMy43NzQ0Wk0yMC42MzI4IDAuNzc0NDE0QzIwLjc1NCAwLjc3NDQxNCAyMC44NyAwLjc5NjQzNCAyMC45Nzc1IDAuODM1OTM4TDExLjYzMjggOC40ODI0MkwyLjI4NzExIDAuODM1OTM4QzIuMzk0ODYgMC43OTYyMzMgMi41MTEyOCAwLjc3NDQxNCAyLjYzMjgxIDAuNzc0NDE0SDIwLjYzMjhaTTIuMjg3MTEgMC44MzU5MzhDMS45MDUyMSAwLjk3NjY2MiAxLjYzMjgxIDEuMzQzNjYgMS42MzI4MSAxLjc3NDQxVjIuODg0NzdMMCAxLjU0ODgzTDEuMjY1NjIgMEwyLjI4NzExIDAuODM1OTM4Wk0yMy4yNjU2IDEuNTQ4ODNMMjEuNjMyOCAyLjg4NDc3VjEuNzc0NDFDMjEuNjMyOCAxLjM0MzM0IDIxLjM1OTkgMC45NzY0MjcgMjAuOTc3NSAwLjgzNTkzOEwyMiAwTDIzLjI2NTYgMS41NDg4M1oiIGZpbGw9IndoaXRlIi8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF85OV8xMTcpIj4KPHJlY3QgeD0iMS42MzI4MSIgeT0iMC43NzQ0MTQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIgcng9IjEiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==');
}

.link-btn.download a span::before{
  width: clamp(17px, calc(20 / var(--vw-1120) * 100vw), 20px);
  height: clamp(18px, calc(21 / var(--vw-1120) * 100vw), 21px);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2IDEwTDEwIDE2TDQgMTBIMTZaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xIDE2VjIwSDE5VjE2IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8bWFzayBpZD0icGF0aC0zLWluc2lkZS0xXzE1M182NSIgZmlsbD0id2hpdGUiPgo8cmVjdCB4PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSIxMiIgcng9IjAuNSIvPgo8L21hc2s+CjxyZWN0IHg9IjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjEyIiByeD0iMC41IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBtYXNrPSJ1cmwoI3BhdGgtMy1pbnNpZGUtMV8xNTNfNjUpIi8+Cjwvc3ZnPgo=');
}

.link-btn.shop a span::before{
  content: unset;
}

.link-btn.shop a span::after{
  content: '▶';
}

.link-btn.page-top a span::before{
  content: '▲';
}

#overlay{
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.75);
  opacity: 0;
  visibility: hidden;
  transition: all .15s ease-in-out;
}

#overlay.active{
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 820px){
  .container{
    width: 100%;
    padding: 0 clamp(15px, calc(24 / var(--vw-820) * 100vw), 24px);
  }

  .link-btn__wrapper{
    width: clamp(250px, calc(350 / var(--vw-820) * 100vw), 350px);
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

@media (hover: hover){
  .link-btn a:hover{
    box-shadow: unset;
    transform: translateY(clamp(6px, calc(8 / var(--vw-1120) * 100vw), 8px));
  }

  .link-btn.shop a:hover,
  .link-btn.page-top a:hover{
    transform: translateY(6px);
  }
}

@media (hover: none){
  .link-btn a:active{
    box-shadow: unset;
    transform: translateY(clamp(6px, calc(8 / var(--vw-1120) * 100vw), 8px));
  }

  .link-btn.shop a:active,
  .link-btn.page-top a:active{
    transform: translateY(6px);
  }
}


/* ==================================================
  アニメーション
================================================== */
.js-fadein{
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .75s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.js-fadein--02{
  transition: opacity .75s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) .15s;
}

.js-fadein--03{
  transition: opacity .75s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) .3s;
}

.js-fadein.active{
  opacity: 1;
  transform: translateY(0);
}

.js-show{
  opacity: 0;
  transition: opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.js-show--02{
  transition: opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1) .15s;
}

.js-show--03{
  transition: opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1) .6s;
}

.js-show.active{
  opacity: 1;
}

a .img--anime{
  overflow: hidden;
}

a .img--anime img{
  transition: scale .3s ease-in-out;
}

@media screen and (max-width: 820px){
  .js-show{
    opacity: 1;
    transition: unset;
  }

  .js-show--02,
  .js-show--03{
    transition: unset;
  }

  .js-fadein--02,
  .js-fadein--03{
    transition: opacity .75s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}

@media (hover: hover){
  a:hover .img--anime img{
    scale: 1.07;
  }

  a.js-video:hover::before{
    scale: 1.15;
    background: rgb(0 0 0 / .8);
  }
}

@media (hover: none){
  a:active .img--anime img{
    scale: 1.07;
  }

  a.js-video:active::before{
    scale: 1.15;
    background: rgb(0 0 0 / .8);
  }
}

/* ==================================================
  モーダル
================================================== */
.modaal-video-wrap.modaal-focus{
  max-width: 1300px;
  margin-inline: auto;
}


/* ==================================================
  ヘッダー
================================================== */
.header{
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 3px 5px rgb(0 0 0 / .1);
}

.header__wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, calc(14 / var(--vw-1600) * 100vw), 14px) 0;
  column-gap: 16px;
  background: #fff;
  max-width: 1120px;
  width: 95%;
  margin-inline: auto;
}

.header__logo{
  /* width: clamp(275px, calc(482 / var(--vw-1920) * 100vw), 482px); */
  width: clamp(246px, calc(380 / var(--vw-1920) * 100vw), 380px);
}

.header__nav-list{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: clamp(12px, calc(18 / var(--vw-1920) * 100vw), 18px);
}

.header__nav-item a{
  position: relative;
  font-weight: 700;
  text-align: center;
  padding: clamp(6px, calc(8 / var(--vw-1600) * 100vw), 8px) clamp(8px, calc(14 / var(--vw-1920) * 100vw), 14px);
}

.header__nav-item a::before{
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  scale: 0 .5;
  background: var(--yellow);
  border-radius: var(--bd-radius);
  transition: scale .15s ease-in-out;
}

.header__nav-item a span{
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 821px){
  .header__hamburger{
    display: none;
  }
}

@media screen and (max-width: 820px){
  .header{
    box-shadow: unset;
  }

  .header__wrapper{
    width: 100%;
    height: clamp(50px, calc(64 / var(--vw-820) * 100vw), 64px);
    padding: 8px clamp(15px, calc(30 / var(--vw-820) * 100vw), 30px);
    box-shadow: 0 3px 5px rgb(0 0 0 / .1);
  }

  .header__logo{
    width: clamp(240px, calc(275 / var(--vw-375) * 100vw), 275px);
  }

  .header__nav{
    position: fixed;
    z-index: -2;
    top: clamp(50px, calc(64 / var(--vw-820) * 100vw), 64px);
    right: 0;
    width: 100%;
    height: auto;
    background: #fff;
    padding: clamp(26px, calc(36 / var(--vw-820) * 100vw), 36px) clamp(15px, calc(30 / var(--vw-820) * 100vw), 30px) clamp(32px, calc(40 / var(--vw-820) * 100vw), 40px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all .15s ease-in-out .15s;
  }

  .header__nav.active{
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .header__nav-list{
    flex-direction: column;
  }

  .header__nav-item + .header__nav-item{
    margin-top: 12px;
  }

  .header__nav-item{
    max-width: 300px;
    width: 100%;
  }

  .header__nav-item a{
    display: block;
    font-size: 16px;
    letter-spacing: 0.025em;
  }

  .header__hamburger{
    display: block;
    width: clamp(24px, calc(30 / 768 * 100vw), 30px);
    height: clamp(18px, calc(24 / 768 * 100vw), 24px);
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 101;
  }

  .header__hamburger span{
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--bk);
    border-radius: 2px;
    transition: all .15s ease-in-out;
  }

  .header__hamburger span:nth-child(1){
    top: 0;
  }

  .header__hamburger span:nth-child(2){
    top: 50%;
    transform: translateY(-50%);
  }

  .header__hamburger span:nth-child(3){
    bottom: 0;
  }

  .header__hamburger.active span:nth-child(1){
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .header__hamburger.active span:nth-child(2){
    opacity: 0;
  }

  .header__hamburger.active span:nth-child(3){
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}

@media (hover: hover){
  .header__nav-item a:hover::before{
    scale: 1;
  }
}

@media (hover: none){
  .header__nav-item a:active::before{
    scale: 1;
  }
}


/* ==================================================
  フッター
================================================== */
.footer{
  margin-top: 6px;
  padding: clamp(38px, calc(48 / var(--vw-1600) * 100vw), 48px) 0 clamp(32px, calc(48 / var(--vw-1600) * 100vw), 48px);
  color: #fff;
  background: var(--bk);
}

.footer__wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
}

.footer__logo{
  width: clamp(275px, calc(482 / var(--vw-1600) * 100vw), 482px);
}

.footer__megasoft-logo{
  width: 167px;
  margin-left: auto;
}

.footer .copyright{
  font-size: 13px;
  margin-top: 13px;
}


@media screen and (max-width: 820px){
  .footer__wrapper{
    flex-direction: column;
  }

  .footer__megasoft-logo{
    margin-inline: auto;
  }

  .footer__logo{
    max-width: 334px;
    width: 100%;
  }
}


/* ==================================================
  パンくずリスト
================================================== */
.breadcrumb{
  padding-top: 12px;
}

.breadcrumb ol{
  display: flex;
  flex-wrap: wrap;
  gap: .25em .5em;
}

.breadcrumb li{
  display: flex;
  align-items: center;
  font-size: clamp(12px, calc(14 / var(--vw-1120) * 100vw), 14px);
}

.breadcrumb li:not(:last-child)::after{
  content: "/";
  margin-left: .5em;
  color: var(--gray);
}

.breadcrumb li a{
  color: var(--gray);
  transition: opacity .15s ease-in-out;
}

@media (hover: hover){
  .breadcrumb li a:hover{
    opacity: .7;
  }
}