@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, minmax( 0, 1fr ) );
  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 {
    min-width: 0;
    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;
    }

    /* バリデーションエラー文言（品番フォーム / 車型式キーワードフォーム）は
       上の見出しルールの影響を受けてしまうため、明示的に上書きする。
       適合車種フォームの dl.flex dd > .font-caution と視覚を揃える。 */
    & > p.font-caution {
      margin: 4px 40px 0;
      padding: 0;
      background: transparent;
      border-radius: 0;
      font-size: 12px;
      font-weight: normal;
      line-height: 1.3;
      color: var( --accent_color );
    }
    
    &: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 {
    min-width: 4.25em;
    width: fit-content;
    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( > .flex-column ) {
    dl.flex {
      gap: 0 20px;
      align-items: stretch;
      padding-bottom: 18px;

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

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

      & > div {
        display: flex;
        flex-direction: column;
      }

      dd {
        margin-top: auto;
        padding-top: 8px;
        position: relative;

        & > .font-caution {
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          margin: 2px 0 0;
          font-size: 12px;
          line-height: 1.3;
        }
      }

      select {
        border: 1px solid #b2b2b2;
        border-radius: 8px;
        padding: 8px 12px 8px 16px;
        width: 100%;
        min-height: 41px;
        box-sizing: border-box;
        -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%;
        min-height: 41px;
        box-sizing: border-box;
      }
    }

    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;
        padding-bottom: 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 20px;
        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%;
                }
              }
            }
          }
        }
      }
    }

    & #search-result-car-type {
      & main {
        & > .grid {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto auto;
          grid-template-areas:
            "title"
            "link"
            "info_1"
            "info_2";
          align-items: start;

          & > a {
            width: 12em;
            margin: 0;
          }

          & > dl {
            width: 100%;
            margin: 0;
          }

          & > dl:first-of-type {
            margin: 0;
          }

          & > dl:last-of-type {
            margin: 0;
            align-self: auto;
          }
        }
      }
    }
  }
}



/**************************/
/* 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 {
          padding: 0 0 24px;

          & > dl {
            max-width: none;
          }
        }
      }
    }
  }
}




/***************/
/* 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 {
                  & >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 {
        & > h3 {
          & + dl {
            & + section {
              & > h4 {
                & + .flex {
                  & > dl {
                    gap: 5px 0;

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

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

                        &::after {
                          content: "：";
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  } */
#disc-assy,
  #disc-set,
  #disc-kit,
  #drvn-plate,
  #drvn-plate-set,
  #clutch-pressure-plate,
  #clutch-center,
  #center-assy,
  #starter-clutch-assy,
  #primary-pulley-assy,
  #primary-pulley-fixed,
  #face-comp,
  #weight-roller,
  #weight-roller-set,
  #cam,
  #slider,
  #slider-set,
  #collar,
  #shoe-weight,
  #shoe-weight-set,
  #damper,
  #spring-hook,
  #spring-set,
  #washer,
  #drive-plate-sub,
  #nut,
  #nut-set,
  #drive-plate-assy,
  #housing,
  #spring,
  #spring-seat,
  #pin,
  #secondary-pulley-sub-assy {
    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 );

        .flex:has(> 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;

                    & > div {
                      align-items: stretch;

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

                      & > dt {
                        display: grid;
                        place-content: center;
                        width: 240px;
                        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;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  
  #crutch-cover {
    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;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #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;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #twin-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;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #crutch-set {
    main {
      .grid {
        & > section + .flex:has(> h3) {
          margin-top: 2em;
        }

        & > .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;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #crutch-kit {
    main {
      .grid {
        & > section + .flex:has(> h3) {
          margin-top: 2em;
        }

        & > .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;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  [ id*="bearing" ] {
    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;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #release-bearing {
    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;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #pilot-bearing {
    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;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #flywheel {
    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;

                    & > 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;
                  }
                  
                }
              }
            }
          }
        }
      }
    }
  }
}


/* ================================================================
 * 製品詳細画面: レスポンシブ対応
 * スマホ表示時にスペックの2カラムレイアウトが枠からはみ出す問題を修正。
 * - .flex 内の dl (width:50%) を縦積みに変更
 * - dt の固定幅 (160px/240px) を解除し、幅に収まるようにする
 * ================================================================ */
@media (max-width: 768px) {
  /* 全製品詳細ページ共通: スペックセクションの2カラム→1カラム化 */
  [id*="crutch-"] main .grid > h3 + dl + section > h4 + .flex,
  [id*="bearing"] main .grid > h3 + dl + section > h4 + .flex,
  #flywheel main .grid > h3 + dl + section > h4 + .flex,
  #product-detail main .grid > h3 + dl + section > h4 + .flex,
  #disc-assy main .grid > h3 + dl + section > h4 + .flex,
  #disc-set main .grid > h3 + dl + section > h4 + .flex,
  #disc-kit main .grid > h3 + dl + section > h4 + .flex,
  #drvn-plate main .grid > h3 + dl + section > h4 + .flex,
  #drvn-plate-set main .grid > h3 + dl + section > h4 + .flex,
  #clutch-pressure-plate main .grid > h3 + dl + section > h4 + .flex,
  #clutch-center main .grid > h3 + dl + section > h4 + .flex,
  #center-assy main .grid > h3 + dl + section > h4 + .flex,
  #starter-clutch-assy main .grid > h3 + dl + section > h4 + .flex,
  #primary-pulley-assy main .grid > h3 + dl + section > h4 + .flex,
  #primary-pulley-fixed main .grid > h3 + dl + section > h4 + .flex,
  #face-comp main .grid > h3 + dl + section > h4 + .flex,
  #weight-roller main .grid > h3 + dl + section > h4 + .flex,
  #weight-roller-set main .grid > h3 + dl + section > h4 + .flex,
  #cam main .grid > h3 + dl + section > h4 + .flex,
  #slider main .grid > h3 + dl + section > h4 + .flex,
  #slider-set main .grid > h3 + dl + section > h4 + .flex,
  #collar main .grid > h3 + dl + section > h4 + .flex,
  #shoe-weight main .grid > h3 + dl + section > h4 + .flex,
  #shoe-weight-set main .grid > h3 + dl + section > h4 + .flex,
  #damper main .grid > h3 + dl + section > h4 + .flex,
  #spring-hook main .grid > h3 + dl + section > h4 + .flex,
  #spring-set main .grid > h3 + dl + section > h4 + .flex,
  #washer main .grid > h3 + dl + section > h4 + .flex,
  #drive-plate-sub main .grid > h3 + dl + section > h4 + .flex,
  #nut main .grid > h3 + dl + section > h4 + .flex,
  #nut-set main .grid > h3 + dl + section > h4 + .flex,
  #drive-plate-assy main .grid > h3 + dl + section > h4 + .flex,
  #housing main .grid > h3 + dl + section > h4 + .flex,
  #spring main .grid > h3 + dl + section > h4 + .flex,
  #spring-seat main .grid > h3 + dl + section > h4 + .flex,
  #pin main .grid > h3 + dl + section > h4 + .flex,
  #secondary-pulley-sub-assy main .grid > h3 + dl + section > h4 + .flex {
    flex-direction: column;
    gap: 5px 0;
  }

  /* dl を全幅に */
  [id*="crutch-"] main .grid > h3 + dl + section > h4 + .flex > dl,
  [id*="bearing"] main .grid > h3 + dl + section > h4 + .flex > dl,
  #flywheel main .grid > h3 + dl + section > h4 + .flex > dl,
  #product-detail main .grid > h3 + dl + section > h4 + .flex > dl,
  #disc-assy main .grid > h3 + dl + section > h4 + .flex > dl,
  #disc-set main .grid > h3 + dl + section > h4 + .flex > dl,
  #disc-kit main .grid > h3 + dl + section > h4 + .flex > dl,
  #drvn-plate main .grid > h3 + dl + section > h4 + .flex > dl,
  #drvn-plate-set main .grid > h3 + dl + section > h4 + .flex > dl,
  #clutch-pressure-plate main .grid > h3 + dl + section > h4 + .flex > dl,
  #clutch-center main .grid > h3 + dl + section > h4 + .flex > dl,
  #center-assy main .grid > h3 + dl + section > h4 + .flex > dl,
  #starter-clutch-assy main .grid > h3 + dl + section > h4 + .flex > dl,
  #primary-pulley-assy main .grid > h3 + dl + section > h4 + .flex > dl,
  #primary-pulley-fixed main .grid > h3 + dl + section > h4 + .flex > dl,
  #face-comp main .grid > h3 + dl + section > h4 + .flex > dl,
  #weight-roller main .grid > h3 + dl + section > h4 + .flex > dl,
  #weight-roller-set main .grid > h3 + dl + section > h4 + .flex > dl,
  #cam main .grid > h3 + dl + section > h4 + .flex > dl,
  #slider main .grid > h3 + dl + section > h4 + .flex > dl,
  #slider-set main .grid > h3 + dl + section > h4 + .flex > dl,
  #collar main .grid > h3 + dl + section > h4 + .flex > dl,
  #shoe-weight main .grid > h3 + dl + section > h4 + .flex > dl,
  #shoe-weight-set main .grid > h3 + dl + section > h4 + .flex > dl,
  #damper main .grid > h3 + dl + section > h4 + .flex > dl,
  #spring-hook main .grid > h3 + dl + section > h4 + .flex > dl,
  #spring-set main .grid > h3 + dl + section > h4 + .flex > dl,
  #washer main .grid > h3 + dl + section > h4 + .flex > dl,
  #drive-plate-sub main .grid > h3 + dl + section > h4 + .flex > dl,
  #nut main .grid > h3 + dl + section > h4 + .flex > dl,
  #nut-set main .grid > h3 + dl + section > h4 + .flex > dl,
  #drive-plate-assy main .grid > h3 + dl + section > h4 + .flex > dl,
  #housing main .grid > h3 + dl + section > h4 + .flex > dl,
  #spring main .grid > h3 + dl + section > h4 + .flex > dl,
  #spring-seat main .grid > h3 + dl + section > h4 + .flex > dl,
  #pin main .grid > h3 + dl + section > h4 + .flex > dl,
  #secondary-pulley-sub-assy main .grid > h3 + dl + section > h4 + .flex > dl {
    width: 100% !important;
  }

  /* dt の固定幅を解除し、モバイルに収まるようにする */
  [id*="crutch-"] main .grid > h3 + dl + section > h4 + .flex > dl > div > dt,
  [id*="bearing"] main .grid > h3 + dl + section > h4 + .flex > dl > div > dt,
  #flywheel main .grid > h3 + dl + section > h4 + .flex > dl > div > dt,
  #product-detail main .grid > h3 + dl + section > h4 + .flex > dl > div > dt {
    width: auto;
    min-width: 100px;
    max-width: 140px;
    flex-shrink: 0;
  }

  /* .grid コンテナ自体のオーバーフロー防止 */
  .single main .grid,
  [id*="crutch-"] main .grid,
  [id*="bearing"] main .grid,
  #flywheel main .grid,
  #product-detail main .grid {
    overflow-x: hidden;
    word-break: break-word;
  }

  /* ヘッダー dl（EXEDY No. / パーツNo. 等）も折り返し対応 */
  [id*="crutch-"] main .grid > h3 + dl > div,
  [id*="bearing"] main .grid > h3 + dl > div,
  #flywheel main .grid > h3 + dl > div,
  #product-detail main .grid > h3 + dl > div {
    flex-wrap: wrap;
  }

  /* --- .flex:has(> h3) ラッパー構造用（在庫確認リンク横並び対応後） --- */

  /* スペックセクションの2カラム→1カラム化
     （縦の隙間 row-gap はファイル後方のメディアクエリで後勝ち適用） */
  [id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
  [id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
  #flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
  #product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex {
    flex-direction: column;
    gap: 6px 0;
  }

  /* dl を全幅に */
  [id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
  [id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
  #flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
  #product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl {
    width: 100% !important;
  }

  /* dt の固定幅を解除し、モバイルに収まるようにする */
  [id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt,
  [id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt,
  #flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt,
  #product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt {
    width: auto;
    min-width: 100px;
    max-width: 140px;
    flex-shrink: 0;
  }

  /* dd の幅も自動に */
  [id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd,
  [id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd,
  #flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd,
  #product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  /* ヘッダー dl 折り返し対応 */
  [id*="crutch-"] main .grid > .flex:has(> h3) + dl > div,
  [id*="bearing"] main .grid > .flex:has(> h3) + dl > div,
  #flywheel main .grid > .flex:has(> h3) + dl > div,
  #product-detail main .grid > .flex:has(> h3) + dl > div {
    flex-wrap: wrap;
  }

  /* 品目名+在庫リンクのラッパーも折り返し対応 */
  [id*="crutch-"] main .grid > .flex:has(> h3),
  [id*="bearing"] main .grid > .flex:has(> h3),
  #flywheel main .grid > .flex:has(> h3),
  #product-detail main .grid > .flex:has(> h3) {
    flex-wrap: wrap;
    gap: 8px;
  }
}





/********/
/* 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 {

    .vehicle-type-tabs {
      margin: 30px auto 0;
      max-width: var(--content_width);
      gap: 0;
    }

    .vehicle-type-tabs .tab-item {
      width: 50%;
      padding: 15px 30px;
      border: 1px solid var( --border_color );
      cursor: pointer;
      border-bottom: none;
      border-radius: 10px 10px 0 0;
      background: #e0e0e0;
      color: #888;
      text-decoration: none;
      gap: 8px 10px;
      transition: background var( --transition-time ) var( --easing ),
                  color var( --transition-time ) var( --easing );
      display: flex;
      justify-content: center;
      align-items: end;
      flex-wrap: wrap;
    }

    .vehicle-type-tabs .tab-item:hover {
      background: #e8f0fe;
      color: #888;
    }

    .vehicle-type-tabs .tab-item.active {
      background: #fff;
      border-color: var( --main_color );
      border-bottom: 1px solid #fff;
      color: var( --main_color );
      font-weight: bold;
      position: relative;
      z-index: 1;
    }

    .vehicle-type-tabs .tab-item.active:hover {
      background: #fff;
    }

    .vehicle-type-tabs .tab-item img {
      width: 60px;
      height: auto;
      /* common.css の `img { max-width: fit-content }` を無効化し width 指定を効かせる */
      max-width: none;
      object-fit: contain;
    }

    .vehicle-type-tabs .tab-item span {
      font-size: 16px;
    }

    .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, minmax( 0, 1fr ) );
        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 {
          min-width: 0;

          dl {
            font-weight: bold;

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

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

            & > div > dl.flex {
              gap: 0 20px;

              & > div {
                min-width: 0;
                display: flex;
                flex-direction: column;
              }

              dd {
                min-width: 0;
                margin-top: auto;
                padding-top: 8px;
                position: relative;

                & > .font-caution {
                  position: absolute;
                  top: 100%;
                  left: 0;
                  width: 100%;
                  margin: 2px 0 0;
                  font-size: 12px;
                  line-height: 1.3;
                }
              }

              select,
              input {
                width: 100%;
                max-width: 100%;
                min-width: 0;
              }
            }

            & > div > dl.flex:first-of-type {
              & > div:nth-child( 1 ),
              & > div:nth-child( 2 ) {
                width: 30%;
              }

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

        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;
            padding-bottom: 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;
          }
        }

        .model-guide {
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          margin-top: 6px;
          padding: 6px 10px;
          font-size: 14px;
          font-weight: bold;
          color: var( --main_color );
          background: #e8f0fe;
          border: 1px solid var( --main_color );
          border-radius: 4px;
          animation: fadeInGuide 0.4s ease;
          z-index: 1;
        }

        @keyframes fadeInGuide {
          from { opacity: 0; transform: translateY(-4px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        & form:nth-of-type( 3 ) {
          scroll-margin-top: 90px;
        }

        .select-maker-list {
          min-width: 0;
          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: 80px;

              & > 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;
                      max-width: 100%;
                      padding: 10px 10px 10px 20px;
                      border: 1px solid var( --border_color );
                      font-weight: bold;
                      overflow-wrap: anywhere;
                      word-break: break-word;
                      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;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* =============================================
 * 戻るボタン
 * ============================================= */
.back-nav {
  margin: 30px 0 10px;

  button {
    font-size: 14px;
    cursor: pointer;
    color: var(--main_color);
  }
}

/* =============================================
 * アイテムなしラベル
 * ============================================= */
.card-container .card p.no-items-label {
  padding: 15px 25px;
  text-align: center;
  color: var( --font_sub_color, #999 );
  font-size: 16px;
  margin: 0 auto;
  border-radius: 10px;
}

/* =============================================
 * 識別情報リンク
 * ============================================= */
.reference-source-link {
  margin: 16px 0;

  a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var( --main_color );
    font-size: 14px;
    text-decoration: underline;

    .material-symbols-outlined {
      font-size: 16px;
    }
  }
}

.old-exedy-row {
  align-items: flex-start !important;
}
.old-exedy-row > dt {
  flex: 0 0 auto;
  white-space: nowrap;
}
.old-exedy-row > dd.old-exedy-list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 4px;
  column-gap: 2px;
}
.old-exedy-row > dd.old-exedy-list > .old-exedy-item {
  white-space: nowrap;
}
.old-exedy-row > dd.old-exedy-list > .old-exedy-sep {
  white-space: pre;
}
.old-exedy-row > dd.old-exedy-list > .old-exedy-item > .old-exedy-compat {
  margin: 0 0 0 4px;
  font-weight: normal;
  color: var( --font_attention_color );
}

/* 旧EXEDY No. 互換グループ表示（品番互換結果表示案） */
.old-exedy-compat-groups {
  display: block;
  width: 100%;
}
.old-exedy-compat-group {
  display: block;
  line-height: 1.5;
}
.old-exedy-compat-group + .old-exedy-compat-group {
  margin-top: 0.3em;
}
.old-exedy-compat-header {
  display: inline-block;
}
.old-exedy-compat-list {
  display: inline-block;
}
/* 要問合せグループ（複数候補 / 区分未確定） */
.old-exedy-compat-group--inquiry .old-exedy-compat-header {
  /* 既定色（黒）。font-caution は付与しない。tooltip でメッセージ補足 */
}
/* F-54: WEBクラッチ110番への誘導リンク（製品詳細の stock-link-floating と同等のスタイル） */
.old-exedy-compat-inquiry-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  white-space: nowrap;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--main_color);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2;
  text-decoration: underline;
  vertical-align: baseline;
}
.old-exedy-compat-inquiry-link:hover {
  text-decoration: none;
}
.old-exedy-compat-inquiry-link > .material-symbols-outlined {
  font-size: 16px;
}
@media (max-width: 768px) {
  .old-exedy-compat-inquiry-link {
    margin-left: 0;
    margin-top: 4px;
  }
}

.vehicle-icons {
  gap: 8px 16px;
}
/* common.css の `img { width: 100%; max-width: fit-content }` によって
  truck_icon_active.svg の本来サイズ (229x130) がそのまま適用されて大きく
  表示される不具合への対策。HTML の width/height 属性を尊重するよう上書きする。*/
.vehicle-icons img {
  width: 97px;
  height: auto;
  max-width: none;
  object-fit: contain;
}
.vehicle-icons img:nth-child(2) {
  width: 80px;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* ================================================================
 * 製品詳細画面: 在庫確認リンク
 * .grid 内の見出し行（div.flex.space-between.align-center）に
 * h3（品目見出し）と在庫確認リンクを横並びで配置。
 * NumberSearchClient のカードレイアウトと同一の HTML 構造・クラス名。
 * ================================================================ */
.grid > a.external-link {
  color: var(--font_link_color);
  font-size: 16px;
  font-weight: normal;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  gap: 4px;
  margin: 10px 0 0;
}
.grid > a.external-link:hover > span:not(.material-symbols-outlined) {
  text-decoration: underline;
}
.grid > a.external-link > .material-symbols-outlined {
  font-size: 16px;
}

/* ================================================================
 * 製品詳細画面: div.flex ラッパー対応
 * h3 と在庫確認リンクを div.flex.space-between.align-center でラップした構造に
 * 対応するため、.flex + dl にも h3 + dl と同じスタイルを適用する。
 * ================================================================ */
.single main .grid > .flex:has(> h3) + dl,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl,
[id*="bearing"] main .grid > .flex:has(> h3) + dl,
#flywheel main .grid > .flex:has(> h3) + dl,
#product-detail main .grid > .flex:has(> h3) + dl {
  margin: 35px 0 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--font_sub_color);
  font-weight: bold;
}
.single main .grid > .flex:has(> h3) + dl > div,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl > div,
[id*="bearing"] main .grid > .flex:has(> h3) + dl > div,
#flywheel main .grid > .flex:has(> h3) + dl > div,
#product-detail main .grid > .flex:has(> h3) + dl > div {
  gap: 5px 0;
}
.single main .grid > .flex:has(> h3) + dl > div > dt,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl > div > dt,
[id*="bearing"] main .grid > .flex:has(> h3) + dl > div > dt,
#flywheel main .grid > .flex:has(> h3) + dl > div > dt,
#product-detail main .grid > .flex:has(> h3) + dl > div > dt {
  color: var(--font_sub_color);
}
.single main .grid > .flex:has(> h3) + dl > div > dt::after,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl > div > dt::after,
[id*="bearing"] main .grid > .flex:has(> h3) + dl > div > dt::after,
#flywheel main .grid > .flex:has(> h3) + dl > div > dt::after,
#product-detail main .grid > .flex:has(> h3) + dl > div > dt::after {
  content: "：";
}
.single main .grid > .flex:has(> h3) + dl + section,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl + section,
[id*="bearing"] main .grid > .flex:has(> h3) + dl + section,
#flywheel main .grid > .flex:has(> h3) + dl + section,
#product-detail main .grid > .flex:has(> h3) + dl + section {
  margin: 15px 0 0;
}
.single main .grid > .flex:has(> h3) + dl + section > h4,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4,
[id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4,
#flywheel main .grid > .flex:has(> h3) + dl + section > h4,
#product-detail main .grid > .flex:has(> h3) + dl + section > h4 {
  font-size: 18px;
  font-weight: bold;
}
.single main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
[id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
#flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
#product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex {
  margin: 8px 0 0;
  gap: 0 20px;
}
.single main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
[id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
#flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
#product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl {
  gap: 5px 0;
  width: 50%;
  line-height: 1;
}
/* スペック表の dt/dd テーブルスタイル（.flex ラッパー経由） */
.single main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div,
[id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div,
#flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div,
#product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div {
  align-items: stretch;
}
.single main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > *,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > *,
[id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > *,
#flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > *,
#product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > * {
  padding: 8px 10px;
}
.single main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt,
[id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt,
#flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt,
#product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dt {
  display: grid;
  place-content: center;
  width: 160px;
  min-height: 35px;
  background: var(--main_color);
  color: #fff;
  font-weight: bold;
}
.single main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd,
[id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd,
[id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd,
#flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd,
#product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl > div > dd {
  border: 1px solid var(--main_color);
  width: calc(100% - 160px);
  min-height: 35px;
}

/* ================================================================
 * 製品詳細スペック: モバイル1カラム化と左右カラムの分離
 * 上のデスクトップ定義（メディアクエリ外）が後勝ちで効いてしまい、
 * `gap: 0 20px`（row-gap=0）のせいで1カラム化したとき左カラム末尾と
 * 右カラム先頭の罫線が連結して見える。デスクトップ定義より後ろに置いて
 * 確実に後勝ちさせ、縦並び時に左右 dl を全幅＆縦の隙間で分離する。
 * ================================================================ */
@media (max-width: 768px) {
  .single main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
  [id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
  [id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
  #flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex,
  #product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex {
    flex-direction: column;
    /* 横20px・縦0 → 縦16pxの隙間に変更し左右カラムを分離 */
    gap: 6px 0;
  }
  .single main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
  [id*="crutch-"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
  [id*="bearing"] main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
  #flywheel main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl,
  #product-detail main .grid > .flex:has(> h3) + dl + section > h4 + .flex > dl {
    width: 100%;
  }
}

/* 在庫確認リンク（.flex ラッパー内） */
.grid > .flex:has(> h3) > a.external-link {
  color: var(--main_color);
  font-size: 16px;
  font-weight: normal;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  gap: 4px;
}
.grid > .flex:has(> h3) > a.external-link:hover > span:not(.material-symbols-outlined) {
  text-decoration: underline;
}
.grid > .flex:has(> h3) > a.external-link > .material-symbols-outlined {
  font-size: 16px;
}



/* ============================================================
 * 海外 4 輪 / 海外 2 輪 / 国内 4 輪 品番検索 ローディングインジケータ
 *
 * spec: global-search-overload-ux
 * 対応要件: 5.1 / 5.3 / 5.7（動きのある CSS スピナー、レイアウトシフト最小化、
 *                            prefers-reduced-motion: reduce 対応）
 *
 * 実装メモ:
 * - 旧 spinner.module.css（CSS Modules）をグローバル CSS 化したもの。
 *   配信先を public/assets/css/ に統一する運用方針に合わせて移植。
 * - クラス名は `.search-spinner` プレフィクスでスコープ衝突を回避する。
 * - WordPress テーマ側でも同 style.css を共有しているため、
 *   将来的に同じスピナーを WordPress 側で再利用する場合も追加実装は不要。
 * ============================================================ */

/* ── ローディングインジケータのコンテナ ─────────────────────────── */
/*
 * アイコンとテキストを縦並びで中央揃え。
 * min-height は要件 5.3（レイアウトシフト最小化）のため、
 * 結果一覧と切替えたときに領域がジャンプしないよう 96px を確保する
 * （スピナー 32px + 余白 + 補助文言の有無で多少高さが変わるため、80〜120px の中央値）
 */
.search-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 96px;
  padding: 0.75rem 0;
  text-align: center;
}

/* ── スピナー本体 ─────────────────────────────────────────── */
/*
 * 32px の円形スピナー。border の上端のみ濃色にして回転させることで
 * 円弧が回るように見せる古典的な CSS スピナー。
 * - 最小辺 16px 以上（ここでは 32px を採用、要件 5.1）
 * - 1 周 0.5〜2 秒の範囲（ここでは 1s、要件 5.1）
 * - SearchSpinner.tsx 側で aria-hidden="true" を付与しスクリーンリーダーには読ませない
 */
.search-spinner__icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid #d1d5db;
  border-top-color: #4338ca;
  border-radius: 50%;
  animation: search-spinner-rotate 1s linear infinite;
}

/* ── ラベル文言（"Searching..." / "検索中..."） ──────────────── */
/*
 * 視覚に依存しないテキストとしてスピナーの直下に配置する。
 * 親要素 .search-spinner に role="status" / aria-live="polite" を付与することで
 * スクリーンリーダーが状態をアナウンスする（要件 5.6）。
 */
.search-spinner__label {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.4;
}

/* ── 補助文言（searchInProgressLong, 3 秒経過時に表示） ─────── */
/*
 * 通常ラベルより少し小さめのフォントと薄めの色で副次情報として配置する。
 * 上余白を取り、ラベル本文との視覚的な階層を出す（要件 4.4 / 7.3）。
 */
.search-spinner__long-hint {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}

/* ── キーフレーム ───────────────────────────────────────── */
/*
 * 0deg → 360deg を 1 周として無限回転する。
 * クラス名衝突を避けるためプレフィクス付きで `search-spinner-rotate` とする。
 */
@keyframes search-spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ── 動きを抑えたいユーザー向けの代替表示（要件 5.7） ────────── */
/*
 * prefers-reduced-motion: reduce のときは回転アニメーションを停止し、
 * 静止した円弧のみを描画する。テキストラベル "Searching..." / 「検索中...」
 * は通常通り表示されるため、状態の伝達は維持される。
 */
@media (prefers-reduced-motion: reduce) {
  .search-spinner__icon {
    animation: none;
  }
}

/* ================================================================
 * 製品検索TOP 4輪/2輪タブのスマホ表示調整
 * スマホ幅でタブ内のアイコン（4輪=車+トラック、2輪=バイク）が
 * flex-wrap により縦並びになり、また align-items: end で 2輪アイコンが
 * 上下中央に来ず見づらい問題を解消する。
 * ・横幅に応じてアイコンを縮小（viewport 連動）
 * ・折り返しを禁止して横一列を維持
 * ・上下中央に揃える
 * ================================================================ */
@media (width < 768px) {
  .page #search .vehicle-type-tabs .tab-item {
    /* アイコンが折り返して縦積みになるのを防ぐ。4輪タブは下寄せを維持 */
    flex-wrap: nowrap;
    align-items: end;
    /* 横幅が狭いぶん左右パディングを圧縮してアイコンの表示領域を確保 */
    padding: 12px 8px;
    gap: 0 6px;
  }

  /* 2輪タブ（最後のタブ）はアイコン1枚のため上下中央に揃える */
  .page #search .vehicle-type-tabs .tab-item:last-child {
    align-items: center;
  }

  /* 4輪タブの車・トラックアイコンは横幅に応じて縮小（最大 60px）。
    デスクトップ定義 `.page #search .vehicle-type-tabs .tab-item img`（width:60px）と
    詳細度を揃えるため `.page` を前置し、メディアクエリのソース順で後勝ちさせる。 */
  .page #search .vehicle-type-tabs .tab-item img {
    width: clamp(40px, 14vw, 60px);
    height: auto;
    /* common.css の `img { max-width: fit-content }` を無効化し width 指定を効かせる */
    max-width: none;
    object-fit: contain;
  }

  /* 2輪タブのバイクアイコンも同様に縮小しつつ中央寄せ（:last-child の align-items: center で対応済み） */
  .page #search .vehicle-type-tabs .tab-item span {
    font-size: 14px;
  }
}