@charset "UTF-8";

/* TOP Image */
div:has( > .search ) {
  padding: 100px 0 0;
  background: url( ../img/top_bg_img.webp ) no-repeat center top / cover;
}



/* Search Container */
.search {
  width: 100%;
  max-width: var( --content_width );
  margin: 0 auto;
  padding: 30px 50px 48px;
  border-radius: 10px;
  border-top: 8px solid var( --main_color );
  background: #fff;
}

.search-container {
  grid-template-columns: repeat( 2, auto );
  grid-template-rows: repeat( 3, auto );
  grid-template-areas:
    "title title"
    "form-1 form-2"
    "form-3 form-3";
  gap: 30px 60px;
  
  & > div {
    grid-area: title;
    color: var( --main_color );
  }
  
  & > form {
    padding: 0 0 20px;
    border-radius: 10px;
    border: 1px solid var( --main_color );

    & > *:not( p ) {
      padding: 0 40px;
    }

    & > p {
      padding: 8px 20px 12px;
      margin: 0 0 20px;
      border-radius: 10px 10px 0 0;
      background: var( --main_color );
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    
    &:nth-of-type( 1 ) {
      grid-area: form-1;
    }
    
    &:nth-of-type( 2 ) {
      grid-area: form-2;
    }
    
    &:nth-of-type( 3 ) {
      grid-area: form-3;
    }
    
    dl {
      width: 100%;
    }
    
    & > .flex,
    & dd {
      margin: 15px 0 0;
      gap: 0 20px;
    }

    & input[ type="radio"] {
      margin: 0 12px 0 0;
    }

    & .absolute {
      top: .75em;
      right: 20px;
      color: #fff;
      padding: 0;
    }
  }

  input[ type="search" ] {
    width: 100%;
    padding: 8px 20px;
    border-radius: 15px;
    border: 1px solid #b2b2b2;
  }

  button {
    width: 4.25em;
    padding: 12px;
    border-radius: 8px;
    background: var( --main_color );
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background var( --transition-time ) var( --easing );
  
    &[ type="submit" ] {
      flex-shrink: 0;
    }
  
    &[ type="submit" ]:hover {
      background: var( --font_attention_color );
    }
  }
  
  form:has( .suggest-input + .suggestions ) {
    dl.flex {
      gap: 0 20px;

      div:nth-child( 1 ),
      div:nth-child( 2 ) {
        width: 30%;
      }

      div:nth-child( 3 ),
      div:nth-child( 4 ) {
        width: 20%;
      }

      dd {
        margin: 8px 0 0;
      }

      select {
        border: 1px solid #b2b2b2;
        border-radius: 8px;
        padding: 8px 12px 8px 16px;
        width: 100%;
        min-height: 41px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url( ../img/arrow_down.svg ) no-repeat calc( 100% - 12px ) calc( 50% + 2px ) / .75em;
      }

      input {
        border: 1px solid #b2b2b2;
        border-radius: 8px;
        padding: 8px 12px;
        width: 100%;
      }
    }

    button {
      align-self: flex-end;
    }
  }
}



/* Banner Carousel */
.banner {
  max-width: calc( var( --content_width ) + 200px );
  margin: 36px auto 0;
  padding: 25px 10vw;
  border-radius: 30px 30px 0 0;
  background: rgba( 44, 44, 44, .7 );

  #banner-carousel {
    max-width: var( --content_width );
    margin: 0 auto;

    .splide:not( :has( .splide__slide:nth-child( 4 ) ) ) {
        visibility: visible !important;
    }

    .splide__slide {
      text-align: center;
    }

    .splide__list {
      justify-content: space-around;
    }

    .splide__arrow,
    .splide__pagination__page,
    .splide__pagination__page.is-active {
        z-index: 0;
    }

    .splide__arrow {
      width: 1em;
      border-radius: none;
      background: transparent;
      outline: none;
      -webkit-user-select: none;
      user-select: none;
      cursor: pointer;

      &.splide__arrow--prev {
        left: -68px;
      }

      &.splide__arrow--next {
        right: -68px;
      }

      svg {
        fill: #fff;
        height: 1.5em;
        width: 1em;
      }
    }

    .splide__pagination {
      bottom: -1.5em;
      z-index: 0;
    }

    @media ( width <= 1200px ) {
      .splide__arrow {
        &.splide__arrow--prev {
          left: -2.5vw;
        }

        &.splide__arrow--next {
          right: -2.5vw;
        }
      }
    }
  }
}



/************/
/* TOP page */
/************/
.home {

  main {
    max-width: none;
    margin: 0 auto;

    & > section {
      padding: 80px 0;

      h2 {
        text-align: center;
        font-size: 24px;
      }

      ol {
        margin: 60px 0;

        li {
          border-top: 1px solid var( --border_color );
          border-bottom: 1px solid var( --border_color );

          a {
            gap: 0 20px;
            width: fit-content;
            padding: 20px 0;
            color: var( --font_color );

            p {
              transition: color var( --transition-time ) var( --easing );
            }

            &:hover p {
              color: var( --font_link_color );
              text-decoration: underline;
            }
          }

          &:first-child {
            border: none;

            a {
              padding: 0 0 20px;
            }
          }
            
          &:last-child {
            border: none;
            
            a {
              padding: 20px 0 0;
            }
          }
        }
      }

      &:first-child {
        background: var( --bg_sub_color );

        & > *:not( .button-link-radius ) {
          width: var( --content_width );
        }

        & > h2 {
          margin: 0 auto;
        }

        ol {
          margin: 60px auto;

          span {
            display: grid;
            place-content: center;
            width: 150px;
            height: 29px;
            border-radius: 20px;
            background: var( --main_color );
            color: #fff;
          }
        }
        p {
          margin: 24px auto;
        }
      }

      &:nth-child( 2 ) {
        max-width: var( --content_width );
        margin: 0 auto;
      }
    }
  }

  .link-container {
    background: var( --bg_color );

    .relative {

      &:first-child {
        /* border-right: 1px solid #fff; */
      }

      a > .absolute {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        & > div {
          transition: .5s opacity;
        }

        & > div:first-child {

          p.absolute {
            color: #fff;
            font-size: 32px;
            font-weight: bold;
            right: 52.5%;
            bottom: 53px;

            span {
              display: block;
              font-size: 20px;
            }
          }
        }

        & > div:last-child {
          opacity: 0;
          height: 100%;
          background: #0007;
          grid-template-columns: repeat( 2, auto );
          grid-template-rows: auto;
          grid-template-areas:
            "title button"
            "paragraph button";
          place-content: center;
          gap: 2em clamp( 2em, 15vh, 7em );

          p:nth-child( 1 ) {
            grid-area: title;
            color: #fff;
            font-size: 32px;
            font-weight: bold;

            span {
              display: block;
              font-size: 20px;
            }
          }

          p:nth-child( 2 ) {
            grid-area: paragraph;
            width: 20vw;
            color: #fff;
            font-size: 12px;
          }

          p:nth-child( 3 ) {
            grid-area: button;
            align-self: self-end;
            display: grid;
            place-content: center;
            width: clamp( 80px, 20vw, 250px );
            height: 58px;
            background: #e4e16d;
            color: var( --font_color );
            font-size: 20px;
            font-weight: bold;
          }
        }
      }

      &:hover .absolute {

        & > div:first-child {
          opacity: 0;
        }

        & > div:last-child {
          opacity: 1;
        }
      }
    }
  }
}


/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 1024px ) {
  .home {
    .search {
      padding: 30px 5vw 48px;
      
      .search-container {
        gap: 30px 2.5vw;

        & > form {

          & > *:not( p, button ) {
            padding: 0 2.5vw;
            gap: 0 1.25vw;
            
            input,
            select {
              font-size: 16px !important;
              padding: 8px;
            }
            
            & > dl dd {
              gap: 0 1.25vw;
            }
          }

          &:has( > .space-between ) dl.flex {
            gap: 0 1.25vw;
          }

          .absolute {
            top: 1.125em;
          }
        }
      } 
    }

    .link-container {
      .relative {
        a > .absolute {
          & > div:first-child {
            p.absolute {
              color: #fff;
              font-size: 32px;
              font-weight: bold;
              left: 2.5vw;
              bottom: 50%;
              translate: 0 50%;
            }
          }

          & > div.grid {
            gap: .5em 2.5vw;
            grid-template-columns: 1fr auto;
            grid-template-areas:
              "title title"
              "paragraph button";
            padding: 1em 2.5vw;

            p:nth-child( 2 ) {
              width: 100%;
            }

            p:nth-child( 3 ) {
              width: 10vw;
              height: 40px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}


/**************************/
/* Media Query for Mobile */
/**************************/
@media ( width < 768px ) {
  
  .home {
    .search {
      .search-container {
        grid-template-columns: auto;
        grid-template-rows: repeat( 4, auto );
        grid-template-areas:
          "title"
          "form-1"
          "form-2"
          "form-3";
        gap: 30px 0;

        
        & > form {

          &:has( > .space-between ) {
            dl.flex {
              display: grid;
              grid-template-columns: repeat( 2, 1fr );
              grid-template-rows: repeat( 2, auto );
              gap: 1em;
              
              div:nth-child( n ) {
                width: 100%;
              }
            }
          }

          &:last-of-type {
            & > *:not( p, button ) {
              flex-direction: column;
              gap: 20px 0;

              input {
                padding: 6px 8px;
              }
            }
          }
        }
      }
    }

    main {
      & > section {
        &:first-child {
          & > *:not( .button-link-radius ) {
            li {
              a {
                display: grid;
                grid-template-columns: auto 1fr;
                grid-template-rows: repeat( 2, auto );
                grid-template-areas:
                "date tag"
                "title title";
                gap: 20px;
                width: 100%;
                
                & > time {
                  grid-area: date;
                }
                
                & > span {
                  grid-area: tag;
                  font-size: 12px;
                }
                
                & > p {
                  grid-area: title;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }

    .link-container {
      flex-direction: column;

      & .relative {
        &:first-child {
          border-right: none;
          border-bottom: 1px solid #fff;
        }

        & a > .absolute {
          & > div.grid {
            p:nth-child( 3 ) {
              width: 15vw;
            }
          }
        }
      }
    }
  }
}





/***********/
/* archive */
/***********/
.archive {

  #wrapper > [ id ] {
    width: var( --content_width );
    margin: 35px auto 0;

    h2 {
      padding: 0 0 50px;
      border-bottom: 1px solid var( --font_color );
      text-align: center;
      font-size: 24px;
    }
  }


  /* news */
  #news {
    main {
      a {
        color: var( --font_color );
      }

      h2 {
        padding: 0 0 50px;
        border-bottom: 1px solid var( --font_color );
        text-align: center;
        font-size: 24px;
      }

      h2 + p {
        padding: 75px 0 40px;
        font-size: 20px;
        font-weight: bold;
      }

      & > div {
        gap: 0 50px;

        & > div:has( ol ) {
          width: 750px;

          li {
            border-top: 1px solid var( --border_color );

            &:last-child {
              border-bottom: 1px solid var( --border_color );
            }

            a {
              gap: 10px 0;
              width: fit-content;
              padding: 30px 0 25px;

              div {
                gap: 0 20px;
                font-size: 14px;
              }

              p {
                color: var( --font_color );
                text-decoration: none;
                  transition:
                  text-decoration var( --transition-time ) var( --easing ),
                  color var( --transition-time ) var( --easing );
              }

              &:hover {
                p {
                  text-decoration: underline var( --font_link_color );
                  color: var( --font_link_color );
                }
              }
            }
          }
        }

        & > div:not( :has( ol ) ) {
          width: 200px;

          p {
            padding: 10px;
            border-top: 1px solid var( --font_color );
            background: var( --bg_sub_color );
          }

          ul {
            margin: 25px 0 0;
            gap: 15px 0;

            li {
              cursor: pointer;
              color: var( --font_sub_color );
              transition: color var( --transition-time ) var( --easing );

              &.active {
                cursor: default;
                color: var(--font_color);
                font-weight: bold;
              }

              &:hover {
                color: var( --main_color );
              }
            }
          }
        }
      }
    }
  }


  /* product */
  #product {

    main {
      div:not( .pager ) > ol {
        margin: 70px 0 60px;

        li {
          border-top: 1px solid var( --border_color );

          &:last-child {
            border-bottom: 1px solid var( --border_color );
          }

          a {
            color: var( --font_color );
            width: fit-content;
            padding: 20px 0;

            & > div {
              gap: 0 20px;

              img {
                visibility: hidden;

                &.active {
                  visibility: visible;
                }
              }

              p {
                gap: 0 50px;

                time {
                  font-size: 14px;
                }

                span {
                  transition:
                    text-decoration var( --transition-time ) var( --easing ),
                    color var( --transition-time ) var( --easing );
                }
              }
            }

            &:hover {
              p {
                span {
                  text-decoration: underline;
                  color: var( --font_link_color );
                }
              }
            }
          }
        }
      }
    }
  }

  /* trouble-shooting */
  #trouble-shooting {
    main {
      gap: 0 50px;

      &>p {
        margin: 70px 0 40px;
        font-size: 20px;
        font-weight: bold;
      }

      & > div {
        gap: 0 50px;

        & > div {
          &:first-of-type {
            width: 100%;
            max-width: 750px;

            ul {
              gap: 10px;

              li {
                width: calc( ( 100% - 10px ) / 2 );
                max-width: 370px;
              }
              
              a {
                width: 100%;
                height: 100%;
                padding: 15px;
                border-radius: 10px;
                border: 1px solid var(--border_color);
                color: var(--font_color);
                gap: 20px 0;
                transition:
                box-shadow var( --transition-time ) var( --easing );

                &:hover {
                  box-shadow: 0 4px 10px rgba( 0, 0, 0, .25 );
                }

                p {
                  font-weight: bold;
                }

                img {
                  rotate: 180deg;
                  margin: auto 0 0 auto;
                  max-width: 20px;
                }
              }
            }

            section {
              gap: 10px 0;
              margin: 100px 0 0;
              padding: 35px;
              background: var( --bg_sub_color );

              h3 {
                font-size: 20px;
              }

              .button-link-radius {
                width: 268px;
                margin: 20px auto 0;
              }
            }
          }

          &:last-of-type {
            width: 200px;

            p {
              padding: 10px;
              border-top: 1px solid var( --font_color );
              background: var( --bg_sub_color );
            }

            & > ul {
              margin: 10px 0 0;

              & > li {
                cursor: pointer;
                border-top: 1px solid var( --border_color );

                &:first-child {
                  border: none;
                }

                &.active,
                &.active .active a {
                  cursor: default;
                  color: var( --font_color );
                  font-weight: bold;
                }

                details {

                  summary {
                    cursor: pointer;
                    padding: 1em .125em 1em .5em;

                    span:first-child {
                      display: inline-block;
                    }

                    span:last-child {
                      display: none;
                    }
                  }

                  &[ open ] {
                    summary {
                      span:first-child {
                        display: none;
                      }

                      span:last-child {
                        display: inline-block;
                      }
                    }
                  }
                }

                ul {
                  list-style: disc inside;
                  margin: -.5em 0 0 1em;
                  padding: 0 0 .5em;

                  a {
                    display: inline-block;
                    padding: .5em 0;
                    color: var( --font_sub_color );
                    font-weight: normal;

                    &:hover {
                      text-decoration: underline;
                      color: var( --font_color );
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  [ id*="search-" ] {
    .search-container {
      margin: 70px auto 0;
      
      form {
        & > div {
          gap: 0 20px;
          font-weight: bold;
          
          dt {
            color: var( --main_color );
          }
  
          input,
          select,
          ul {
            font-weight: normal;
          }
        }
          
        & > label {
          gap: 0 12px;
        }
      }
    }
    

    p:has( #add-condition ) {
      margin: 18px 0 0;
      border-top: 1px solid var( --border_color );
      border-bottom: 1px solid var( --border_color );
      line-height: 1;
      font-size: 18px;
      font-weight: bold;
      
      label {
        gap: 0 10px;
        padding: 10px 0;
        cursor: pointer;
        transition: color var( --transition-time ) var( --easing );

        span {
          translate: 0 2px;
          color: var( --main_color );
          transition: rotate var( --transition-time ) var( --easing );
        }

        &:hover {
          color: var( --main_color );
        }
      }

      input[ type="checkbox" ] {
        display: none;
      }

      &:has( :checked ) {
        label {
          span {
            rotate: 180deg;
          }
        }
      }

      & + dl {
        height: 0;
        overflow: hidden;
        margin: 18px 0 0;
        font-weight: bold;
        transition:
          height var( --transition-time ) var( --easing ),
          margin var( --transition-time ) var( --easing );

        div {
          width: calc( ( 100% - 20px * 3 ) * .3 );
        }
      }

      &:has( :checked ) {
        & + dl {
          height: auto;
          margin: 18px 0;
        }
      }

      & ~ button {
        align-self: center;

        &:hover {
          background: #000;
        }
      }
    }

    .result {
      & > dl {
        margin: 40px auto;
        font-size: 20px;

        & > dt::after {
          content: "：";
          display: inline-block;
        }
      }

      .card-container {
        margin: 0 auto;

        & .card {
          &:hover {
            translate: 0
          }
        }
      }
    }
  }

  #search-car-model {
    form {
      & > div {
        gap: 0 15px;
      }

      label.flex {
        gap: 0 30px;

        & > span {
          display: inline-block;
          width: 3em;
          white-space: nowrap;

          & + input {
            margin: 0;
          }
        }
      }
    }
  }

  #search-result-car-type {
    main {
      & > .grid {
        grid-template-columns: repeat( 2, auto );
        grid-template-rows: auto 1fr;
        grid-template-areas:
          "title link"
          "info_1 info_2";
        gap: 10px 0;
        align-items: center;
        margin: 70px auto 65px;
        padding: 0 0 30px;
        border-bottom: 1px solid var( --font_sub_color );
        font-weight: bold;

        & > h3 {
          grid-area: title;
          width: fit-content;
          padding: 10px;
          border: 1px solid var( --main_color );
          font-size: 20px;
          font-weight: bold;
          color: var( --main_color );
        }

        & > a {
          grid-area: link;
          width: fit-content;
          margin: 0 0 0 auto;
          padding: 12px;
          border-radius: 8px;
          background: var( --main_color);
          color: #fff;
          cursor: pointer;
          line-height: 1;
          transition: background var( --transition-time ) var( --easing );

          &:hover {
            background: #000;
          }
        }

        & > dl {
          color: var( --main_color );
          gap: 5px 0;
          width: calc( 100% - 20px );
          max-width: 480px;

          & > div {
            dt::after {
              content: "：";
              display: inline-block;
            }
          }
          
          &:first-of-type {
            grid-area: info_1;
            margin: 0 0 0 20px;
          }
          
          &:last-of-type {
            grid-area: info_2;
            margin: 0 20px 0 0;
            align-self: flex-start;
          }
        }
      }
    }
  }
}


/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 1024px ) {
  .archive {
    #news {
      main {
        & > div {
          flex-direction: column;
          gap: 60px 0;
          align-items: center;
  
          & > div:has( ol ) {
            width: 100%;
          }
        }
      }
    }


    #trouble-shooting {
      main {
        & > div {
          gap: 0 5vw;

          & > div {
            &:first-of-type {
              ul {
                justify-content: center;

                li {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}



/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 768px ) {
  .archive {
    #trouble-shooting {
      main {
        & > div {
          flex-direction: column;
          gap: 60px 0;
          align-items: center;
  
          & > div:not( .side-menu ) {
            width: 100%;
          }
        }
      }
    }

    #search-number {
      .search-parts {
        & > form {
          & > p {
            & + .flex {
              display: grid;
              grid-template-columns: repeat( 2, 1fr ) auto;
              grid-template-rows: repeat( 2, auto );
              grid-template-areas:
                "label_1 label_2 ..."
                "input input button";
              gap: 1.5em 1em;
              padding: 0 5vw 20px;
              
              & > label {
                &:first-of-type {
                  grid-area: label_1;
                }

                &:last-of-type {
                  grid-area: label_2;
                }
              }

              & > input {
                grid-area: input;
                margin: 0;
                max-width: none;
              }

              & > button {
                grid-area: button;
              }
            }
          }
        }
      }
    }

    #search-car-type {
      .search-container {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat( 4, auto );
        grid-template-areas:
          "title"
          "form-1"
          "form-2"
          "form-3";
        gap: 30px 0;

        & form {
          & > *:not( p, button ) {
            padding: 0 2.5vw;
            gap: 0 1.25vw;
          }

          dl.flex {
            display: grid;
            grid-template-columns: repeat( 2, 1fr );
            grid-template-rows: repeat( 2, auto );
            gap: 1em;

            div:nth-child( n ) {
              width: 100% !important;
            }
          }
        }
      }
    }

    #search-car-model {
      & form {
        & div {
          padding: 0 2.5vw;
        }

        label.flex {
          gap: 0 2.5vw;
        }
      }
    }

    & #search-result-car-type {
      & main {
        & > .grid {
          & > a {
            width: 12em;
          }
        }

        & > .grid {
          & > dl {
            margin: 0 0 0 auto;
          }
        }
      }
    }
  }
}




/***************/
/* single page */
/***************/
.single {
  #wrapper {
    & > [ id ] {
      width: var( --content_width );
      margin: 35px auto 0;
    }

    /* news */
    #news {
      & > ul {
        font-size: 14px;
        gap: 0 5px;

        li:not( :last-child )::after {
          display: inline;
          content: "＞";
          margin: 0 0 0 5px;
          font-size: 10px;
        }
      }

      main > div > div {
        width: 750px;

        h2 {
          text-align: left;
          border: none;
          padding: 0 0 30px;

          & + p {
            gap: 0 20px;
            padding: 0 0 50px;
            border: none;
            background: none;
            font-size: 14px;
            font-weight: normal;
          }

          & ~ dl {
            gap: 48px 0;

            & > div {
              gap: 20px 0;
            }

            dt {
              padding: 0 0 0 5px;
              border-left: 10px solid var( --main_color );
              font-size: 18px;
              font-weight: bold;
            }

            dd {
              gap: 10px 0;

              p {
                border: none;
                background: none;
                font-weight: normal;

                &:has( > time ) {
                  font-weight: bold;
                }
              }

              ul li {
                color: var( --font_color );
              }

              p,
              ul {
                padding: 0;
                margin: 0;
              }

              .attention {
                font-size: 14px;
              }
            }
          }
        }
      }

      main > div > div:not( :has( h2 ) ) {
        width: 200px;

        p {
          padding: 10px;
          border-top: 1px solid var( --font_color );
          background: var( --bg_sub_color );
        }

        ul {
          margin: 25px 0 0;
          gap: 15px 0;

          li {
            cursor: pointer;
            color: var( --font_sub_color );
            transition: color var( --transition-time ) var( --easing );

            &.active {
              cursor: default;
              color: var( --font_color );
              font-weight: bold;
            }

            &:hover {
              color: var( --main_color );
            }
          }
        }
      }
    }
  }

  /* knowledge */
  #knowledge {

    main {
      gap: 0 50px;

      section {
        width: 100%;
        max-width: 750px;

        h2 {
          margin: 0 0 50px;

          & + div {
            gap: 40px 0;

            dl {
              gap: 12px 0;

              div {
                gap: 8px 0;

                dd {
                  margin: 0 0 0 2em;
                }
              }
            }

            ul {
              gap: 40px 0;

              li {
                gap: 20px 0;

                div {
                  margin: 0 0 0 20px;

                  p {
                    margin: 10px 0 0;
                  }
                }
              }

              & + .prev-button {
                margin: 20px auto 0;
              }
            }
          }
        }


        & + div {
          width: 200px;

          p {
            padding: 10px;
            border-top: 1px solid var( --font_color );
            background: var( --bg_sub_color );
          }

          ul {
            margin: 25px 0 0 10px;
            gap: 15px 0;

            li {
              font-weight: bold;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  /* knowledge table */
  #knowledge-table {
    main {
      h2 {
        padding: 0 0 50px;
        border-bottom: 1px solid var( --font_color );

        & + div:has( > table ) {
          margin: 50px 0 0;

          & > table {
            border-collapse: collapse;
            caption-side: bottom;

            & > caption {
              text-align: left;
              font-size: 14px;
              margin: 10px 0 0;
            }

            & tr > * {
              padding: .5em 1em;
              border-left: 1px solid var( --border_color );
              border-top: 1px solid var( --border_color );

              &:last-child {
                border-right: 1px solid var( --border_color );
              }
            }

            & > thead {
              th {
                background: var( --bg_sub_color );
              }
            }

            & > tbody {

              & > tr {
                &:last-child {
                  border-bottom: 1px solid var( --border_color );
                }
              }
            }
          }
        }
      }
    }
  }

  #trouble-shooting {
    main {
      gap: 0 50px;

      h2 {
        font-size: 24px;
        margin: 0 0 35px;

        & + ul {
          font-size: 14px;
          gap: 5px 0;
          margin: 0 0 80px;

          li {

            a {
              display: block;
              padding: 5px 10px;
              border-left: 1px solid var( --border_color );
            }

            &.active {
              font-weight: bold;

              a {
                cursor: default;
              }
            }
          }
        }

        & ~ section {
          margin: 40px 0 0;

          .heading-style {
            margin: 0 0 20px;
          }

          & > ol {
            gap: 30px 0;
            list-style: decimal inside;
            font-weight: bold;
            
            & > li {
              & > span {
                display: inline-block;
                font-weight: normal;
                margin: 5px 0 0;
              }

              & > ol {
                gap: 10px 0;
                margin: 10px 0 10px 2.5em;
                font-weight: normal;

                & > li {
                  counter-increment: list-num;

                  &::before {
                    content: "（" counter( list-num ) "）";
                    display: inline-block;
                    margin: 0 0 0 -2.5em;
                  }
                }
              }
            }
            
            & ~ div {
              font-size: 14px;
              
              ol {
                gap: 10px 0;
                margin: 10px 0 0 3em;
                
                & > li {
                  counter-increment: list-num;
                  
                  &::before {
                    content: "※注" counter( list-num );
                    display: inline-block;
                    margin: 0 .5em 0 -3em;
                  }
                }
              }
            }
          }

          &:last-of-type {
            & > ol {
              gap: 10px 0;
              margin: 0 0 20px;
            }

            & > div {
              gap: 30px 0;
            }
          }
        }
      }
    }
  }

  [ id*="crutch-" ] {
    main {
      h2 {
        padding: 0 0 50px;
        border-bottom: 1px solid var(--font_color);
        text-align: center;
        font-size: 24px;
      }

      .grid {
        margin: 70px auto 0;
        padding: 20px 20px 30px;  
        border-radius: 10px;
        box-shadow: 0 0 10px rgba( 0, 51, 204, .25 );
        transition: translate var( --transition-time ) var( --easing );

        h3 {
          width: fit-content;
          padding: 10px;
          background: var( --bg_sub_color );
          border: 1px solid var( --border_color );
          line-height: 1;
          color: var( --main_color );
          font-size: 20px;
          font-weight: bold;

          & + dl {
            margin: 35px 0 0;
            padding: 0 0 10px;
            border-bottom: 1px solid var( --font_sub_color );
            font-weight: bold;

            & > div {
              gap: 5px 0;

              & > dt {
                color: var( --font_sub_color ); 
                
                &::after {
                  content: "：";
                }
              }

              & > dd {
                & > span {
                  margin: 0 0 0 10px;
                  font-weight: normal;
                  color: var( --font_attention_color );
                }
              }
            }

            & + section {
              margin: 15px 0 0;

              & > h4 {
                font-size: 18px;
                font-weight: bold;

                & + .flex {
                  margin: 8px 0 0;
                  gap: 0 20px;

                  & > dl {
                    gap: 5px 0;
                    width: 50%;
                    line-height: 1;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #crutch-cover {
    main {
      .grid {
        & > .flex:has(> h3) {
          & + dl {
            & + section {
              & > h4 {
                & + .flex {
                  & > dl {
                    gap: 5px 0;

                    & > div {
                      & > * {
                        font-weight: bold;
                        line-height: normal;
                      }

                      & > dt {
                        color: var( --font_sub_color );

                        &::after {
                          content: "：";
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #crutch-disc {
    main {
      .grid {
        & > .flex:has(> h3) {
          & + dl {
            & + section {
              & > h4 {
                & + .flex {
                  & > dl {
                    & > div {
                      align-items: stretch;

                      & > * {
                        padding: 8px 10px;
                      }

                      & > dt {
                        display: grid;
                        place-content: center;
                        width: 160px;
                        min-height: 35px;
                        background: var( --main_color );
                        color: #fff;
                        font-weight: bold;
                      }

                      & > dd {
                        border: 1px solid var( --main_color );
                        width: calc( 100% - 160px );
                        min-height: 35px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #car-type {
    main {
      h2 {
        padding: 0 0 50px;
        border-bottom: 1px solid var(--font_color);
        text-align: center;
        font-size: 24px;
      }

      .grid {
        margin: 70px auto 0;
        padding: 20px 20px 30px;  
        border-radius: 10px;
        box-shadow: 0 0 10px rgba( 0, 51, 204, .25 );
        transition: translate var( --transition-time ) var( --easing );

        h3 {
          width: fit-content;
          padding: 10px;
          border: 1px solid var( --main_color );
          font-size: 20px;
          font-weight: bold;
          color: var( --main_color );

          & + dl {
            gap: 5px 0;
            margin: 35px 0 0;

            & > div {
              & > * {
                font-weight: bold;
                line-height: normal;
              }

              & > dt {
                color: var( --font_sub_color );

                &::after {
                  content: "：";
                }
              }
            }
          }
        }
      }
    }
  }
}


/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 768px ) {
  .single {
    #wrapper {
      #news {
        main {
          & > div {
            flex-direction: column;
            align-items: center;
            gap: 60px 0;
            
            & > div:first-child {
              width: 100%;
            }
          }
        }
      }
    }

    & #crutch-disc {
      & main {
        & .grid {
          & > .flex:has(> h3) {
            & + dl {
              & + section {
                & > h4 {
                  & + .flex {
                    & > dl {
                        width: 100%;
                      }
                  }

                  & + .flex {
                    flex-direction: column;
                    gap: 5px 0;
                  }
                  
                }
              }
            }
          }
        }
      }
    }
  }
}





/********/
/* page */
/********/
.page {
  /* common */
  #wrapper {
    & > [ id ] {
      width: var( --content_width );
      margin: 35px auto 0;
    }

    h2 {
      padding: 0 0 50px;
      border-bottom: 1px solid var( --font_color );
      text-align: center;
    }
  }

  /* faq */
  #faq {

    h2 {
      padding: 0 0 50px;
      border-bottom: 1px solid var( --font_color );
    }

    main {
      & > section {
        &:not( :last-of-type ) {
          margin: 0 0 50px;
        }

        h3 {
          position: relative;
          padding: 20px 0 0;
          font-size: 20px;

          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 65px;
            height: 8px;
            background: var( --sub_color );
          }

          & + div {
            margin: 30px 0 0;
            gap: 20px 0;

            details {
              padding: 5px 0 0;
              border: 1px solid var( --main_color );
              border-bottom: none;
              color: var( --main_color );
              marker: none;

              summary {
                font-weight: bold;
                padding: 0 25px 5px;
                border-bottom: 1px solid var( --main_color );
                outline: none;
                cursor: pointer;

                &::before {
                  content: "Q.";
                  display: inline-block;
                  margin: 0 5px 0 0;
                }

                span {
                  margin: 0 0 0 auto;

                  &:first-of-type {
                    display: inline-block;
                  }

                  &:last-of-type {
                    display: none;
                  }
                }
              }

              &[ open ] {
                summary {
                  span {
                    &:first-of-type {
                      display: none;
                    }

                    &:last-of-type {
                      display: inline-block;
                    }
                  }
                }
              }

              p {
                position: relative;
                padding: 10px 20px 10px 55px;
                  color: var( --font_color );
                font-weight: normal;

                &::before {
                  content: "A.";
                  display: inline-block;
                  margin: 0 5px 0 1em;
                  position: absolute;
                  top: .65em;
                  left: calc( 40px - 1.125em );
                }

                span {
                  display: block;
                  margin: 1em 0 0;
                }

                a {
                  color: var( --font_color );
                  text-decoration: underline;
                }
              }

              &[ open ] p {
                border-bottom: 1px solid var( --main_color );
              }

              &::details-content {
                @media ( prefers-reduced-motion: no-preference ) {
                  overflow: clip;
                  transition-duration: var( --transition-time );
                  transition-property: content-visibility, opacity, block-size;
                  transition-behavior: allow-discrete;
                }
              }

              &:not( :open )::details-content {
                content-visibility: hidden;
                opacity: 0;
                block-size: 0;
              }
            }
          }
        }
      }
    }
  }

  /* knowledge */
  #knowledge {
    main {
      h2 {
        padding: 0 0 50px;
        border-bottom: 1px solid var( --font_color );
      }

      section {
        &:not( :last-of-type ) {
          margin: 0 0 50px;
        }

        h3 {
          position: relative;
          padding: 20px 0 0;
          font-size: 20px;

          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 65px;
            height: 8px;
            background: var( --sub_color );
          }
        }

        ul {
          margin: 30px 0 0;
          gap: 40px;

          li {
            width: calc( (100% - 40px) / 2 );
            max-width: 480px;
          }
          
          a {
            width: 100%;
            height: 100%;
            padding: 24px 16px 24px 32px;
            border-radius: 10px;
            border: 1px solid var( --border_color );
            color: var( --font_color );
            gap: 0 16px;
            transition: box-shadow var( --transition-time ) var( --easing );

            img {
              width: 72px;
            }

            dl {
              width: calc( 100% - 1em );
              gap: 10px 0;

              dt {
                font-size: 18px;
                font-weight: bold;
              }

              dd {
                font-size: 14px;
                color: var( --font_sub_color );
              }
            }

            img.absolute {
              right: 16px;
              bottom: 16px;
            }

            &:hover {
              box-shadow: 0 4px 10px rgba( 0, 0, 0, .25 );
            }
          }
        }
      }
    }
  }

  /* web-crutch-110 */
  #web-crutch-110 {
    h2 {
      padding: 0 0 50px;
      border-bottom: 1px solid var( --font_color );
      text-align: center;
      
      & + p {
        margin: 70px 0 20px;
      }
  
      & + p + ul {
        gap: 10px 0;
        margin: 0 0 50px 10px;

        .list-style {
          display: block;
          padding: 0 0 0 1em;
          line-height: 1.5;
          font-weight: normal;

          &::before {
            margin: 0 5px 0 -1.25em;
            translate: 0 .125em;
          }

          a {
            text-decoration: underline;
            color: var( --font_link_color );
          }
        }
      }

      & + p + ul + ul {
        gap: 30px 50px;
        margin: 0 0 50px;

        li {
          width: calc( ( 100% - 100px ) / 3 );
          max-width: 300px;

          a {
            display: grid;
            place-content: center;
            height: 100px;
            border-radius: 10px;
            border: 1px solid var( --border_color );
            color: var( --font_link_color );
            transition:
            box-shadow var( --transition-time ) var( --easing ),
            text-decoration var( --transition-time ) var( --easing );

            &:hover {
              box-shadow: 0 4px 10px rgba( 0, 0, 0, .25 );
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  /* inquiry */
  #inquiry {
    h2 {
      & + p {
        margin: 70px 0 50px;

        & + form {
          dl {
            dt {
              gap: 0 10px;
            }

            dd {
              width: 75%;
            }

            & > div:last-child {
              align-items: flex-start;
            }
          }

          & > p {
            margin: 30px 0 50px;

            a {
              text-decoration: underline;
              color: var( --font_link_color );
            }

            & + button {
              & > span {
                gap: 0 10px;
              }
            }
          }
        }
      }
    }
  }

  /* thanks */
  #thanks {
    h2 {
      & + p {
        margin: 70px 0 50px;
        font-size: 20px;

        & + ul {
          gap: 10px 0;

          .list-style {
            font-weight: normal;

            a {
              text-decoration: underline;
              color: var( --font_link_color );
            }
          }
        }
      }
    }
  }

  /* privacy-policy | about-use */
  #privacy-policy,
  #about-use {
    h2 {
      & + section {
        margin: 70px 0 0;

        h3 {
          font-size: 24px;
          margin: 0 0 24px;
        }

        span {
          display: inline-block;
        }

        a {
          text-decoration: underline;
          color: var( --font_link_color );
        }

        & > p {
          margin: 20px 0 50px;

          & + dl {
            gap: 50px 0;

            & > div {
              gap: 8px 0;

              & > dd {
                margin: 0 0 0 20px;

                ol {
                  gap: 10px 0;
                  margin: 20px 0 0 20px;
                  list-style: decimal;
                }
              }
            }
          }
        }
      } 
    }
  }

  /* privacy-policy */
  #privacy-policy {
    h2 {
      & + section {
        & > p {
          & + dl {
            & > div {
              & dl dt {
                margin: 20px 0 10px;
                font-weight: bold;
              }

              &:nth-child( 6 ) {
                a {
                  display: block;
                  word-break: break-all;
                }
              }
            }

            & + p {
              margin: 50px 0 0;
              text-align: right;

              time {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  /* about-use */
  #about-use {
    h2 {
      & + section {
        & > dl {
          dd {
            ul {
              gap: 10px 0;
              margin: 8px 0 0 20px;
              list-style: disc;
            }

            & > dl {
              ul {
                margin: 8px 0 20px 20px;
              }
            }
          }
        }
      }
    }
  }

  /* login */
  #login {
    main {
      & >h2 {
        & + p {
          margin: 70px 0 50px;
        }
      }
      
      & > form {
        width: 80%;
        max-width: 800px;
        margin: 0 auto;

        & > dl {
          gap: 32px 0;

          & > div {
            gap: 12px 0;
          }
        }

        & > button {
          margin: 0 auto;
        }
      }

      & > div {
        & > p {
          margin: 50px 0 30px;
        }

        & > a {
          gap: 10px 0;
          width: fit-content;
          margin: 0 auto;
          color: var( --main_color );
          font-weight: bold;
          font-size: 20px;

          & > span {
            gap: 0 10px;
            font-size: 32px;
            line-height: 1;
          }
        }
      }
    }
  }

  /* seach */
  #search {

    .search {
      margin: 70px auto 0;
      padding: 30px 50px 40px;
      box-shadow: 0 0 10px 0 rgb( 0, 51, 204, .25 );

      .search-container {
        grid-template-columns: repeat( 2, auto );
        grid-template-rows: repeat( 4, auto );
        grid-template-areas:
            "title title"
            "form-1 form-2"
            "form-3 form-3"
            "maker-list maker-list";
        gap: 30px 60px;

        & form {
          dl {
            font-weight: bold;

            input,
            select,
            ul {
              font-weight: normal;
            }
          }

          &:nth-of-type( 3 ) {
            dt {
              color: var( --main_color );
            }
          }
        }

        p:has( #add-condition ) {
          margin: 18px 0 0;
          border-top: 1px solid var( --border_color );
          border-bottom: 1px solid var( --border_color );
          line-height: 1;
          font-size: 18px;
          font-weight: bold;

          label {
            gap: 0 10px;
            padding: 10px 0;
            cursor: pointer;
            transition: color var( --transition-time ) var( --easing );
            
            span {
              color: var( --main_color );
              translate: 0 2px;
              transition: rotate var( --transition-time ) var( --easing );
            }

            &:hover {
              color: var( --main_color );
            }
          }

          input[ type="checkbox" ] {
            display: none;
          }

          &:has( :checked ) {
            label {
              span {
                rotate: 180deg;
              }
            }
          }

          & + dl {
            height: 0;
            overflow: hidden;
            margin: 18px 0 0;
            transition:
              height var( --transition-time ) var( --easing ),
              margin var( --transition-time ) var( --easing );

            div {
              width: calc( ( 100% - 20px * 3 ) * .3 );
            }
          }

          &:has( :checked ) {
            & + dl {
              height: auto;
              margin: 18px 0;
            }
          }

          & ~ button {
            align-self: center;
          }
        }

        .select-maker-list {
          grid-area: maker-list;
          padding: 0 0 20px;
          border-radius: 10px;
          border: 1px solid var( --main_color );

          & > p {
            padding: 8px 20px 12px;
            margin: 0 0 20px;
            border-radius: 10px 10px 0 0;
            background: var( --main_color );
            font-size: 18px;
            font-weight: bold;
            color: #fff;

            & ~ div {
              ol {
                gap: 10px 0;
                padding: 0 1em;

                & > li {
                  
                  
                  a {
                    border-left: 1px solid var( --border_color );
                    padding: 0 8px;
                    font-weight: bold;
                    color: var( --font_color );
                    
                    &:hover {
                      background: var( --border_color );
                    }
                  }

                  &:last-child a {
                    border-right: 1px solid var( --border_color );
                  }
                }
              }
            }
          }

          dl {
            margin: 30px 45px;
            height: 45vh;
            max-height: 550px;
            overflow-y: auto;

            & > div[ id*="start-with-" ] {
              scroll-margin-top: 50px;

              & > dt {
                padding: 10px 0;
                border-bottom: 1px solid var( --font_color );
                font-size: 20px;
                font-weight: bold;
                color: var( --font_color );
              }

              & > dd {
                margin: 30px 0;

                & > ul {
                  gap: 10px 30px;

                  & > li {                
                    a {
                      display: flex;
                      align-items: center;
                      gap: 0 10px;
                      padding: 10px 10px 10px 20px;
                      border: 1px solid var( --border_color );
                      font-weight: bold;
                      color: var( --font_color );
                      transition:
                        border-color var( --transition-time ) var( --easing ),
                        background var( --transition-time ) var( --easing ),
                        color var( --transition-time ) var( --easing );

                      &:hover {
                        border-color: var( --main_color );
                        background: var( --bg_sub_color );
                        color: var( --main_color );
                      }
                    }
                  }
                }
              }
            }
          }
        }

        button[ type="submit" ]:hover {
          background: #000;
        }
      }
    }
  }
}


/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 1024px ) {
  .page {
    /* faq */
    #faq {
      main {
        & > section {
          h3 {
            & + div {
              details {
                summary {
                  padding: 0 1.5vw 5px;
                  gap: 0 1.5vw;

                  &::before {
                    margin: 0 calc( -1.5vw + 5px ) 0 0;
                  }
                }
              }
            }
          }
        }
      }
    }

    /* inquiry */
    #inquiry {
      h2 {
        & + p {
          & + form {
            dl {
              padding: 50px 5vw;
              
              dt {
                width: 12em;
              }
            }
          }
        }
      }
    }

    /* seach */
    #search {
      .search {
        padding: 30px 5vw 40px;

        .search-container {
          gap: 30px 2.5vw;

          & > form {
            & > *:not( p, button ) {
              padding: 0 2.5vw;
              gap: 0 1.25vw;
            }
          }
        }
      }
    }
  }
}


/**************************/
/* Media Query for Mobile */
/**************************/
@media ( width < 768px ) {
  .page {

    /* knowledge  */
    #knowledge {
      main {
        section {
          ul {
            justify-content: center;

            li {
              width: 100%;
            }
          }
        }
      }
    }

    /* web-crutch-110 */
    #web-crutch-110 {
      h2 {
        & + p + ul + ul {
          justify-content: center;

          li {
            width: 100%;
          }
        }
      }
    }

    /* inquiry */
    #inquiry {
      h2 {
        & + p {
          & + form {
            & > dl {
              & > div {
                flex-direction: column;
                gap: 1em;
                
                dt {
                  width: 12em;
                }

                dd {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }

    /* login */
    #login {
      main {
        & > form {
          width: 90%;
        }
      }
    }

    /* seach */
    #search {
      .search {
        .search-container {
          grid-template-columns: auto;
          grid-template-rows: repeat( 5, auto );
          grid-template-areas:
            "title"
            "form-1"
            "form-2"
            "form-3"
            "maker-list";
          gap: 30px 0;

          & form {
            dl.flex {
              display: grid;
              grid-template-columns: repeat( 2, 1fr );
              grid-template-rows: repeat( 2, auto );
              gap: 1em;

              div:nth-child( n ) {
                width: 100% !important;
              }
            }
          }

          & .select-maker-list {
            dl {
              margin: 30px 2.5vw;

              & > div[ id*="start-with-" ] {
                & > dd {
                  & > ul {
                    gap: 10px 2.5vw;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}



/****************************/
/* Claim Login Page Styles  */
/****************************/
.form-style {
	display: flex;
	flex-direction: column;
	gap: 32px 0;
	padding: 50px 10%;
	margin: 50px auto 30px;
	background: var( --bg_sub_color );
	border-radius: 10px;

	dt {
		font-weight: bold;
	}

	dd {
		input,
		textarea {
			width: 100%;
			border: 1px solid var( --border_color );
			border-radius: 5px;
			background: #fff;
			padding: 8px 10px;
		}

		textarea {
			height: 130px;
		}
	}
}

.submit-button {
	display: grid;
	place-content: center;
	gap: 0 10px;
	width: 200px;
	height: 60px;
	margin: 0 auto 50px;
	border-radius: 10px;
	background: var( --bg_color );
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	transition: background var( --transition-time ) var( --easing );

	&:hover {
		background: var( --font_attention_color );
	}
}


/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 1024px ) {
	.form-style {
		padding: 50px 5vw;
	}
}


/**************************/
/* Media Query for Mobile */
/**************************/
@media ( width < 768px ) {
	.form-style {
		div:has( dt ) {
			flex-direction: column;
			gap: 1em;
		}
	}
}