@charset "UTF-8";

/* =========================
   BREADCRUMB
========================= */
.breadcrumb{
	overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.breadcrumb-list{
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  min-width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding-bottom: 4px;
}

.breadcrumb-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:rgba(0,0,0,.54);
  font-size:13px;
  line-height:1.6;
	flex: 0 0 auto;
}

.breadcrumb-item:not(:last-child)::after{
  content:"";
  display:block;
  width:5px;
  height:5px;
  border-top:1.5px solid rgba(0,0,0,.28);
  border-right:1.5px solid rgba(0,0,0,.28);
  transform:rotate(45deg);
  margin-left:2px;
  flex-shrink:0;
}

.breadcrumb-item a{
  color:inherit;
  text-decoration:none;
  transition:
    color .25s ease,
    opacity .25s ease;
}

.breadcrumb-item a:hover{
  color:rgba(0,0,0,.82);
  opacity:1;
}

.breadcrumb-item[aria-current="page"]{
  color:rgba(0,0,0,.84);
  font-weight:600;
}

.breadcrumb-item[aria-current="page"]{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* glass系デザインに少し合わせたい場合 */
.breadcrumb{
  padding:10px 14px;
  background:rgba(255,255,255,.58);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
@media (max-width:767px){
	.breadcrumb{
	  padding:10px 0;
	}
}
.breadcrumb-list{
}

/* =========================
   MOBILE
========================= */
@media (max-width:767px){
  .breadcrumb{
    margin-bottom:18px;
  }

  .breadcrumb-list{
    gap:7px 8px;
    padding:8px 0;
  }

  .breadcrumb-item{
    font-size:12px;
    line-height:1.5;
  }

  .breadcrumb-item:not(:last-child)::after{
    width:4px;
    height:4px;
  }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width:480px){
  .breadcrumb-list{
    width:100%;
    border-radius:16px;
  }

  .breadcrumb-item{
    min-width:0;
  }

  .breadcrumb-item a,
  .breadcrumb-item[aria-current="page"]{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}