:root{
  --header_height:3rem;
  --base-h: 240;
  --base-s: 100%;
  --base_color        : hsl(var(--base-h) var(--base-s) 57%);
  --base_color_hover  : hsl(var(--base-h) var(--base-s) 45%);
  --base_color_active : hsl(var(--base-h) var(--base-s) 30%);
  --base_color_off_canvas : hsl(var(--base-h) var(--base-s) 90%);
  --base_color_aside  : hsl(var(--base-h) var(--base-s) 95%);
  --base_color_main: hsl(var(--base-h) var(--base-s) 100%);
  --base_color_footer : hsl(var(--base-h) var(--base-s) 90%);
  --base_color_font: #fff;
  --base_color_button: hsl(var(--base-h) var(--base-s) 70%);
  --base_color_decoration:hsl(var(--base-h) var(--base-s) 90%);
  --base_color_30: hsl(var(--base-h) var(--base-s) 30%);
  --base_color_50: hsl(var(--base-h) var(--base-s) 50%);
  --base_color_70: hsl(var(--base-h) var(--base-s) 70%);
  --base_color_80: hsl(var(--base-h) var(--base-s) 80%);
  --base_color_90: hsl(var(--base-h) var(--base-s) 90%);
  --base_color_95: hsl(var(--base-h) var(--base-s) 95%);
  --base_color_96: hsl(var(--base-h) var(--base-s) 96%);
  --base_color_97: hsl(var(--base-h) var(--base-s) 97%);
  --base_color_98: hsl(var(--base-h) var(--base-s) 98%);
  --base_color_99: hsl(var(--base-h) var(--base-s) 99%);
}
/* Font */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;600&display=swap');
*{
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.header_grid{
  background-color: var(--base_color);
  .pc_menu {
    .top{
      font-size: 1.1rem;
    }
    & ul{
      margin: 0;
      padding: 0;
      display: flex;
      & li{
        list-style: none;
        height: var(--header_height);
        display: grid;
        place-items: center;
        padding-left: 1rem;
        padding-right: 1rem;
        &:hover{
          background-color: var(--base_color_hover);
        }
        & a{
          text-decoration: none;
          color: var(--base_color_font);
        }
      }
      & li.nav_active{
        background-color: var(--base_color_active);
      }
    }
    @media(width < 600px) {
      & li:not(.top,.nav_active){
        display: none;
      }
      & li.nav_active {
        position: relative;
        margin-left: 2rem;
        &::before{
          position: absolute;
          margin-left: -10rem;
          content: "/";
          color: #fff;
        }
      }
    }
  }
  .sp_menu{
    .hamburger_icon {
      position: fixed;
      cursor: pointer;
      top: 1rem;
      right: 1rem;
      width: 1.5rem;
      height: 1rem;
      z-index: 4000;
      & span {
        position: absolute;
        width: 100%;
        height: 0.15rem;
        border-radius: 0.1rem;
        background-color: #fff;
        transition: all 0.3s;
        &:nth-of-type(1) {
          top: 0;
        }
        &:nth-of-type(2) {
          top: 50%;
        }
        &:nth-of-type(3) {
          top: 100%;
        }
      }
    }
    .hamburger_icon.hamburger_active span {
      &:nth-of-type(1) {
        top: 50%;
        transform: rotate(45deg);
      }
      &:nth-of-type(2) {
        opacity: 0; /* 透明にする */
      }
      &:nth-of-type(3) {
        top: 50%;
        transform: rotate(-45deg);
      }
    }
    .off_canvas{
      display: none;
      position: fixed;
      top: var(--header_height);
      right: 0;
      margin: 0;
      width: 10rem;
      padding: 0;
      background: var(--base_color_off_canvas);
      z-index: 100;
      & li {
        list-style: none;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 0.5rem;
      }
      & li:not(:first-child) {
        border-top: 1px solid var(--base_color);
      }
      & a {
        color: var(--base_color);
        text-decoration: none;
        padding-left: 0.5rem;
        display: block;
      }
    }
    .off_canvas.hamburger_active {
      display: block;
    }
  }
}
.footer_grid{
  background-color: var(--base_color_footer);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
}
.main_grid{
  background-color: var(--base_color_main);
}
.page_nav_grid {
  background-color: var(--base_color_aside);
  padding: 0.25rem;
  z-index: 0;
  & li>a {
    color: var(--base_color);
    text-decoration-line: none;
    font-size: 0.85rem;
  }
  & li.is_active>a {
    color: var(--base_color_active);
    text-decoration-line: underline;
  }
  @media(width < 600px) {
    & ul li ul{
      display: flex;
      flex-wrap: wrap;
      & li{padding-right: 1rem;
      }
    }
  }
}
/* -------------------- */
/* トップへ戻るボタン */
/* -------------------- */
.scroll_btn {
  position: fixed;
  bottom: 2rem;
  right: 1rem;
}
.scroll_btn a {
  display: block;
  height: 3rem;
  width: 3rem;
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  text-align: center;
  padding-top: 0.5rem;
  background-color: var(--base_color_button);
  border: none;
  border-radius: 50%;
  outline: none;
}
/* -------------------- */
/* 装飾用 （reset.cssの上書きも含む）*/
/* -------------------- */
.line_marker {
  background: linear-gradient(transparent 60%, var(--base_color_decoration) 10%);
  // display: inline;
}
.underline {
  background: linear-gradient(transparent 85%, var(--base_color_decoration) 10%);
}
.small_size{
  font-size: 60%;
}
h2 {
  font-size: 1.5rem;
  font-weight: 800;
}
h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 0.5rem;
}
ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li>ul {
  padding-left: 1rem;
}
.main_grid {
  padding: 0.5rem;
  padding-top: 0;
}
p {
  margin-bottom: 0;
}
.pl_1 {
  padding-left: 1rem;
}
.ml_h {
  margin-left: 0.5rem;
}
.ml_1 {
  margin-left: 1rem;
}
.pt_0 {
  padding-top: 0rem;
}
.pt_1{
  padding-top: 1rem;
}
.img_rayout {
  display: flex;
}
.parts_box{
  margin-left: 0.5rem;
  & p{
    padding-top: 0.5rem;
  }
}
.float_left_2 {
  display: flow-root;
  & div {
    width: 49%;
    float: left;
  }
}
.float_left_3 {
  display: flow-root;
  & div {
    width: 33%;
    float: left;
  }
}
/* -------------------- */
/* Mintの設定 */
/* -------------------- */
h1.title_main {
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 0.5rem;
  padding: 0.25rem;
  padding-left: 1rem;
  color: var(--base_color_30);
  background: repeating-linear-gradient(-45deg, var(--base_color_95), var(--base_color_90) 3px, var(--base_color_90) 3px, var(--base_color_95) 7px);
  border-radius: 0.5rem;
}

h2.title_sub {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--base_color_30);
  padding: 0.125em;
  padding-left: 0.5rem;
  background: var(--base_color_96);
  border-bottom: solid 3px var(--base_color);
  padding-top: 1rem;
  position: relative;
  &::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 0.5rem;
    width: 100%;
    background-color: var(--base_color_main);
  }
}
.title_sub_child {
  font-size: 1rem;
  font-weight: 500;
  padding: 0.25em;
  padding-left: 1rem;
  color: var(--base_color_30);
  background: var(--base_color_97);
  padding-top: 1rem;
  height: 2.5rem;
  position: relative;
  &::before{
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background-color: var(--base_color);
    width: 5px;
    height: 2.5rem;
  }
  &::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 0.5rem;
    width: 100%;
    background-color: var(--base_color_main);
  }
}
.title_variation_1 {
  position: relative;
  margin-left: 2rem;
  padding: 0 0 0 0;
  font-size: 1rem;
  font-weight: 500;
  z-index: 0;
  border-bottom: solid 0.2rem var(--base_color_70);
  &::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    content: "";
    width: 1.1em;
    height: 1.1em;
    line-height: 1.1rem;
    background-color: var(--base_color_70);
    border-radius: 100%;
    z-index: -1;
  }
}