@charset "UTF-8";

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


/* Search Container */
.search {
  width: 100%;
  max-width: var( --content_width );
  margin: 0 auto;
  padding: 10px 50px 20px;
  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: 20px 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;
    }

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

    /* 品番フォームのエラーメッセージ表示 (#keyword-error / #keyword-error-2w)
       適合車種フォーム (#compatible-form) の dl.flex dd > .font-caution と
       見た目を揃える: 赤字・12px・フォーム下に小さく表示。
       直上に .search-container > form > p の見出しスタイル（青背景・白文字）が
       かかってしまうため、ここで明示的に上書きする。 */
    & > p#keyword-error,
    & > p#keyword-error-2w {
      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 );
    }
  }

  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 ) {

    & > .flex-column {
      gap: 0 20px;
      font-weight: bold;

      dt {
        color: var( --main_color );
      }

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

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

    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 );

      }

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

      & ~ button {
        align-self: center;

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

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



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

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

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

    .splide__slide {
      text-align: center;
    }

    .splide__slide img {
      width: 100%;
      height: auto;
    }
/*
    .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.1em;
      z-index: 0;
    }

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

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

/* block editor */
.main-txt {
  p {
	line-height: 1.8;
	margin: 0 0 0.7em;
  }

  ol {
    margin: 0 0 1.5em 1.5em;
    padding: 0;
    list-style: decimal;
  }
  ol li {
    margin-bottom: 0.5em;
  }
  ul {
    margin: 0 0 0.7em 1.5em;
    padding: 0;
    list-style: disc;
  }
  ul li {
    margin-bottom: 0.5em;
  }
  ul ul {
    list-style: none;
  }

  h3 {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    gap: 0 .25em;
    padding-top: 0.5em;
    margin-bottom: 1em;

    &::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 1.5em;
      background: var( --main_color );
    }
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 2em;
    font-size: 0.95em;
  }

  th,
  td {
    /* border: 1px solid #ddd; */
    padding: 0.5em 1em;
    text-align: left;
  }

  th {
    background: #f7f7f7;
    font-weight: 600;
  }
/*
  tr:nth-child(even) {
    background: #fafafa;
  }
*/
}

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

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

    & > section {
      padding: 32px 0;

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

      ol {
        margin: 24px 0;

        li {
          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 {
            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: 24px auto;

          & a > span {
            display: grid;
            place-content: center;
            min-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 {
        width: 100%;
        /* border-right: 1px solid #fff; */
      }

      & img {
        width: 100%;
        min-height: 120px;
        max-width: 100%;
      }

      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: 10px 5vw 20px;

      .search-container {
        gap: 20px 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;
          }

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

            select {
              font-size: 16px !important;
              padding: 8px;
            }
          }

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

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

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

          &:has( > .flex-column ) {
            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"
                "icon title";
                gap: 15px 20px;
                width: 100%;

                & > time {
                  grid-area: date;
                }

                & > span {
                  grid-area: tag;
                  font-size: 12px;
                }

                & > p {
                  grid-area: title;
                }
              }
            }
          }
        }
      }
    }

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





/*****************/
/* blog, archive */
/*****************/
.blog, .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: 10px 0 0px;
        font-size: 16px;
        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 a {
              cursor: pointer;
              color: var( --font_sub_color );
              transition: color var( --transition-time ) var( --easing );

              &.active {
                cursor: default;
                color: var(--font_color) !important;
                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.cate_title {
        margin: 0 0 40px;
        font-size: 20px;
        font-weight: bold;
      }

      & > div {
        gap: 0 50px;
        margin-top: 70px;
        scroll-margin-top: var( --header_height );

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

            ul {
              gap: 10px;

              li {
                width: calc( ( 100% - 40px ) / 4 );
                max-width: 260px;
              }
              li.t_title {
                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;
                }
              }
            }

          }

        }
      }

      section.info-110 {
        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;
        }
      }
    }
  }

  /* faq */
  #faq {

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

    main {
      & > section {
        scroll-margin-top: var( --header_height );

        &: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-bottom: none;
              color: var( --main_color );
              marker: none;

              summary {
                font-weight: bold;
                padding: 5px 25px 5px;
                border: 1px solid var( --main_color );
                outline: none;
                cursor: pointer;
                align-items: flex-start;

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

              div.faq-a {
                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 );
                  line-height: 1.8;
                }

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

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

              &[ open ] div.faq-a {
                border-left: 1px solid var(--main_color);
                border-right: 1px solid var(--main_color);
                border-bottom: 1px solid var(--main_color);
                margin-top: 5px;
              }

              &::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 {
        scroll-margin-top: var( --header_height );

        &: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 {
              gap: 10px 0;
              padding-right: 1.2em;

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

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

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

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

}


/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 1024px ) {
  .blog, .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%;
                }
              }
            }
          }
        }
      }
    }

    /* faq */
    #faq {
      main {
        & > section {
          scroll-margin-top: var( --header_height );

          h3 {
            & + div {
              details {
                summary {
                  padding: 0 1.5vw 5px;
                  gap: 0 1.5vw;

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

  }
}


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

          & > div:not( .side-menu ) {
            width: 100%;
          }
        }
      }
    }

    /* knowledge */
    #knowledge {
      main {
        section {
          scroll-margin-top: var( --header_height );
        }
      }
    }
 }
}

/**************************/
/* Media Query for Mobile */
/**************************/
@media ( width < 768px ) {
    /* knowledge */
    #knowledge {
      main {
        #about-clutch, #movie, #material {
          & > ul.flex {
            display: block;

            & > li{
              width:100%;
              max-width: none;
              margin-bottom: 15px;
            }
          }
        }
      }
    }
}


/***************/
/* 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 a {
            cursor: pointer;
            color: var( --font_sub_color );
            transition: color var( --transition-time ) var( --easing );

            &.active {
              cursor: default;
              color: var( --font_color ) !important;
              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;

              a {
                color: var( --font_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;
            }
          }
        }
      }
    }
  }
}

/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 1024px ) {
  .single {
    #trouble-shooting {
      main {
        & > div {
            flex-direction: column;
            gap: 60px 0;
            align-items: center;
        }
      }
    }

    #knowledge {
      main {
        flex-direction: column;
        gap: 60px 0;
        align-items: center;
      }
    }
    #wrapper {
      #news {
        main {
          & > div {
            flex-direction: column;
            align-items: center;
            gap: 60px 0;

            & > div:first-child {
              width: 100%;
            }
          }
        }
      }
    }

  }
}


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

  }
}



/********/
/* 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;
    }
  }

  /* 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 );

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

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

        & + form {

          dl {
            gap: 32px 0;
            padding: 50px 10%;
            background: var( --bg_sub_color );

            dt {
              gap: 0 10px;
              font-weight: bold;

              &::after {
                content: "必須";
                display: grid;
                place-content: center;
                width: 34px;
                height: 22px;
                line-height: 1;
                border-radius: 5px;
                background: var( --required_color );
                color: #fff;
                font-size: 10px;
              }
            }

            dd {
              width: 75%;

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

              textarea {
                height: 130px;
              }
            }

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

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

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

            & + button {
              gap: 0 10px;
              width: 200px;
              height: 60px;
              margin: 0 auto 50px;
              border-radius: 10px;
              background: var( --bg_color );
              color: #fff;
              font-size: 20px;
              font-weight: bold;
              transition: background var( --transition-time ) var( --easing );

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

  /* 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 );
            }
          }
        }
      }
    }
  }

  /* フォーム全体のスタイル */
  .wpcf7 {
    background-color: var( --bg_sub_color );
    padding: 50px;
    margin: auto;

    & .wpcf7-form .required {
      color: var( --required_color );
      margin-left: 5px;
    }
    /* インプットフィールドのスタイル */
    & .wpcf7-form input, .wpcf7-form textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid var( --border_color );
      border-radius: 5px;
      margin-bottom: 10px;
      font-size: 16px;
      background-color: #ffffff;
    }
    /* テキストエリアのスタイル */
    & .wpcf7-form textarea {
      height: 150px;
      resize: vertical;
    }
    /* 送信ボタンのスタイル */
    & .wpcf7-form input[type="submit"] {
      background-color: var( --bg_color );
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease;
      border: none;
    }
    & .wpcf7-form input[type="submit"]:hover {
      background-color: var( --font_attention_color );
    }
    & .form-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
    }
    & .form-label {
      width: 150px;
      font-weight: 600;
    }
    & .form-input {
      flex: 1;
    }
    & .form-input input,
    .form-input textarea {
      width: 100%;
    }
    & .wpcf7-acceptance .wpcf7-list-item label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
    }
    & .wpcf7-acceptance input[type="checkbox"] {
      flex: 0 0 auto;
      margin-top: 6px;
      width: 10px;
      transform: scale(1.6);
    }
    & .wpcf7-acceptance .wpcf7-list-item-label {
      flex: 1;
    }
  }


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

        & h3.no-deco {
          font-size: 24px;
          margin: 0 0 24px;
          &::before {
          display: none;
          }
        }

        & > p {
          margin-left: 20px;
        }

        & > ol {
          margin: 0 0 1.5em 2.5em;
        }

        & > ul {
          margin: 0 0 1.5em 2.5em;
        }
  /*
        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;
              }
            }
          }
        }
      }
    }
  }
    */
}

/********/
/* error404 */
/********/
.error404 {
  /* 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;
    }
  }
}

/**************************/
/* Media Query for Tablet */
/**************************/
@media ( width < 1024px ) {
  .page {

    /* inquiry */
    #inquiry {
      h2 {
        & + p {
          & + form {
            dl {
              padding: 50px 5vw;

              dt {
                width: 12em;
              }
            }
          }
        }
      }
    }
  }
}


/**************************/
/* 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%;
                }
              }
            }
          }
        }
      }
    }
    */
    .wpcf7 {
      padding: 20px;
      & .form-row {
        display: block;
      }
      & .form-label {
        margin-bottom: 10px;
      }
    }
  }
}

.vehicle-icons {
  gap: 8px 16px;
}
.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;
}

/* 4輪 / 2輪 切替タブ（英語TOPのみ表示） */
.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 #ccc;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: #e0e0e0;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  gap: 8px 10px;
  transition: background 0.2s ease, color 0.2s ease;
  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: #0033cc;
  border-bottom: 1px solid #fff;
  color: #0033cc;
  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;
}
.vehicle-type-tabs .tab-item span {
  font-size: 16px;
}

/* ================================================================
 * 4輪/2輪タブのスマホ表示調整
 * スマホ幅でタブ内のアイコン（4輪=車+トラック、2輪=バイク）が
 * flex-wrap により縦並びになり、また align-items: end で 2輪アイコンが
 * 上下中央に来ず見づらい問題を解消する（Next.js 側 style.css と同期）。
 * ================================================================ */
@media (width < 768px) {
  .vehicle-type-tabs .tab-item {
    flex-wrap: nowrap;
    align-items: end;
    padding: 12px 8px;
    gap: 0 6px;
  }
  /* 2輪タブ（バイクアイコン1枚）は上下中央に揃える。4輪タブは下寄せ維持 */
  .vehicle-type-tabs .tab-item[data-tab="two-wheels-search"] {
    align-items: center;
  }
  .vehicle-type-tabs .tab-item img {
    width: clamp(40px, 14vw, 60px);
    height: auto;
    object-fit: contain;
  }
  .vehicle-type-tabs .tab-item span {
    font-size: 14px;
  }
}