@charset "utf-8";

/* パンくずリスト ----------------- */
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 14px;
  margin-top: 1%;
}

.breadcrumb li {
  white-space: nowrap;
}

.breadcrumb li::after {
  content: "＞";
  margin-left: 8px;
}

.breadcrumb li:last-child::after {
  content: "";
}
/* ------------------------------ */

#update {
  text-align: right;
}

/* 目次 -------------------------- */
#index {
  background-color: rgb(228, 228, 228);
  padding: 3%;
  margin: 3%;
  border: 2px solid black;
}

#index h3 {
  background-color: darkgray;
  width: fit-content;
  padding: 1%;
  border-radius: 15%;
}

li {
  list-style-type: none;
  list-style-position: inside;
}

ol.first-layer {
  counter-reset: num_f;
}

.first-layer li {
  counter-increment: num_f;
}

.first-layer li:before {
  display: marker;
  content: counter(num_f) ". ";
}

ol.second-layer {
  counter-reset: num_s;
}

.second-layer li {
  counter-increment: num_s;
  padding-left: 2rem;
}

.second-layer li:before {
  display: marker;
  content: counter(num_f) "." counter(num_s) ". ";
}
/* ------------------------------ */

/* 概要 ------------------------------------------- */
.highmetalIcon {
  width: 10rem;
  height: 10rem;
  font-size: 12px;
  border: 1.5px solid #000000;
}

.highmetalLogo {
  width: 2rem;
}

/* 見出し　----------------------- */
section {
  background-color: rgb(229, 255, 238);
  border-radius: 10px;
  padding: 2%;
  margin: 3%;
  border: 1.5px solid black;
}

.caption1,
.caption2 {
  border-bottom: 1.5px solid #ff0066;
  color: #ff0066;
}

.caption1::before {
  content: "★";
}

.caption2 {
  border-bottom-width: 1px;
}
.caption2::before {
  content: "●";
}
/* ------------------------------ */

.overView-object {
  display: flex;
}

.overViews {
  width: 40%;
}

.overView-image {
  margin-left: 10%;
  margin-top: 15px;
}
/* ------------------------------------------------ */

#youtube {
  width: 100%;
  border: 1px solid #000000;
}