@charset "UTF-8";
/* CSS Document */

.top_title-jpn {
  font-weight: 400;
  font-size: min(4vw, 0.6875rem); /*11px*/
  font-size: min(4vw, 0.75rem); /*12px*/
  font-size: min(4vw, 0.875rem); /*14px*/
}
.top_title-eng {
  font-family: var(--font_eng);
  font-weight: 600;
  font-size: min(15vw, 5rem); /*80px*/
  line-height: 1;
  margin-bottom: min(7vw, 2.5rem); /*40px*/
  position: relative;
  z-index: 0;
  display: inline-block;
}
.top_title-eng.slash::before {
  content:'';
  width: min(7vw, 3rem);
  height: min(10vw, 4rem);
  position: absolute;
  left: max(-5vw, -2.3rem);
  top: .65rem;
  transform: skewX(30deg);
  background-color: var(--color_yellow);
  z-index: -1;
  line-height: 1;
}

.top_main {
  width: 100%;
  background-image: url("/wp-content/themes/diesel-meister/assets/images/top-main-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: lightgray;
  position: relative;
}
.top_main::before {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(29, 33, 40, 0.3), rgba(29, 33, 40, 0.3)),linear-gradient(180deg, rgba(5, 13, 26, 0.1) 0%, rgba(5, 13, 26, 0.5) 32.53%);
  z-index: 1;
}
.top_main .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  padding-top: calc(var(--header_height) * 1.5);
  padding-bottom: calc(var(--header_height) / 2);
}
.top_main .rotate {
  display: inline-block;
  transform: rotate(10.22deg);
}
.top_main-title {
  font-size: min(10vw, 68px);
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 20px #000000CC;
}
.top_main-title .font-eng {
  display: inline-block;
  font-size: min(12vw, 76px);
  transform: translateY(min(0.8vw, 6px));
  font-weight: 800;
}
.top_main-title span, 
.top_main-sub span {
  color: var(--color_yellow);
}
.top_main-title .top_main-title--wrap {
  display: inline-flex;
  margin: 0;
  width: auto;
  align-items: center;
}
.top_main-sub {
  display: inline-block;
  line-height: 1;
  border: 1px solid white;
  color: white;
  font-size: min(4vw, 30px);
  font-weight: bold !important;
  padding: min(3vw, 1rem) min(3vw, 1.5rem) !important;
  margin-top: 1.5rem !important;
}
.top_main-sub b {
  display: inline-block;
  position: relative;
}
.top_main-sub b::before {
  content:'';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1.5vw, 6px);
  height: min(1.5vw, 6px);
  background-color: white;
  border-radius: 12px;
}
.top_main-pc {
  max-width: 42.5rem;
}
.top_main-sp {
  width: 80%;
  margin-left: 20%;
}
.top_main-images {
  width: 100%;
  position: relative;
}
.top_main-img {
  position: absolute;
  left: -10%;
  top: 15%;
  z-index: -1;
  width: 55%;
}

.top_title {
  font-size: min(12vw, 3.125rem);
  font-weight: 900;
  color: var(--color_navy);
}

.top_reason {
  position: relative;
  overflow: hidden;
}
.top_reason::before {
  content:'REASON';
  position: absolute;
  top: 20vw;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-shadow: 1px 1px 0 #D2E4FF,-1px -1px 0 #D2E4FF,-1px 1px 0 #D2E4FF,1px -1px 0 #D2E4FF,1px 0 0 #D2E4FF,-1px 0 0 #D2E4FF,0 1px 0 #D2E4FF,0 -1px 0 #D2E4FF;
  font-family: var(--font_eng);
  font-size: min(25vw, 300px);
  font-weight: 800;
  line-height: 1;
  z-index: 0;
}
.top_reason .container {
  position: relative;
  z-index: 1;
  padding-top: min(15vw, 4rem);
  padding-bottom: min(15vw, 7.5rem);
}
.top_reason .icon-logo {
  width: 3.4375rem;
}
.top_reason-wrapper {
  display: grid;
  column-gap: 2rem;
  row-gap: 4rem;
  justify-content: center;
  margin-top: min(24vw, 7rem);
}
.top_reason-inner {
  position: relative;
  background: var(--color_sky);
  border: 8px solid var(--color_navy);
  padding: 1rem;
  text-align: left;
}
.top_reason-text {
  position: absolute;
  top: 0;
  left: 50%;
  max-height: min(20vw, 5rem);
  transform: translateX(-50%) translateY(-80%);
}
.top_reason-img {
  width: 95%;
  margin: 1rem 0;
}
.top_reason-inner--text {
  font-size: 1rem !important;
  font-weight: bold;
  padding-top: 0.9375rem !important;
  border-top: 1px solid var(--color_dark);
}
.top_reason-feature {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: min(18vw, 9rem);
}
.top_reason-wide {
  width: 100%;
  max-width: 50rem;
  position: relative;
  background: var(--color_sky);
  border: 8px solid var(--color_navy);
  padding: 1rem;
  padding-top: 2.5rem;
  text-align: left;
}
.top_reason-wide .top_reason-text {
  max-height: min(20vw, 10.625rem);
  transform: translateX(-50%) translateY(-70%);
}
.top_reason-lead {
  font-size: min(8vw, 2.8125rem);
}
.top_reason-wide p {
  font-size: 1rem;
  font-weight: bold;
  padding-top: 0.9375rem;
}
.top_reason-message {
  width: 100%;
  max-width: 62.5rem;
  border: 3px solid #F3F3F3;
}

.top_service {
  position: relative;
  overflow: hidden;
  background-color: var(--color_sky);
}
.top_service::before {
  content:'SERVICE';
  position: absolute;
  top: 10vw;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color_sky);
  text-shadow: 1px 1px 0 #FFF,-1px -1px 0 #FFF,-1px 1px 0 #FFF,1px -1px 0 #FFF,1px 0 0 #FFF,-1px 0 0 #FFF,0 1px 0 #FFF,0 -1px 0 #FFF;
  font-family: var(--font_eng);
  font-size: min(25vw, 300px);
  font-weight: 800;
  line-height: 1;
  z-index: 0;
}
.top_service .container {
  position: relative;
  z-index: 1;
  padding-top: min(15vw,7.5rem);
  padding-bottom: min(15vw,7.5rem);
}
.top_service-title {
  font-size: min(6vw, 2.5rem);
  font-weight: 700;
  color: var(--color_navy);
}
.top_service-title b {
  font-size: min(8vw, 3.125rem);
}
.top_service-head {
  position: relative;
  z-index: 2;
  margin-top: 3rem;
  transform: translateY(1rem);
}
.top_service-wrapper {
  position: relative;
  z-index: 1;
  background-color: white;
  padding-top: min(5vw, 100px);
  padding-bottom: min(5vw, 80px);
  border-left: min(.8vw, 8px) solid var(--color_navy);
  border-right: min(.8vw, 8px) solid var(--color_navy);
  border-bottom: min(.8vw, 8px) solid var(--color_navy);
}
.top_service-wrapper::before, 
.top_service-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: min(7vw, 5rem);
  background-color: var(--color_navy);
  height: min(.8vw, 8px);
}
.top_service-wrapper::before {
  left: 0;
}
.top_service-wrapper::after {
  right: 0;
}
.top_service-img01 {
  max-width: 40.625rem;
}
.top_service-text {
  font-size: min(5vw, 1.25rem);
}
.top_service-text span {
  display: inline-block;
  line-height: 1;
  padding: .25rem .5rem;
  margin: 0 .25rem;
}
.top_service-lead {
  max-width: 50rem;
}
.top_service-comment {
  max-width: 48.125rem;
  padding: 1rem;
  background-color: var(--color_navy);
  box-shadow: 0px 5px 20px 0px #0000004D;
  position: relative;
  margin: 0 auto;
  transform: translateY(10%);
  border-radius: 1rem;
}
.top_service-comment span {
  border: 1px solid var(--color_yellow);
  display: inline-block;
  padding: .5rem;
  line-height: 1;
}
.top_service-comment::after {
  content:'';
  position: absolute;
  z-index: 0;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 25px solid var(--color_navy);
  border-left: 2.5rem solid transparent;
  border-right: 2.5rem solid transparent;
}
.top_service-detail {
  max-width: 62.5rem;
  margin:0 auto;
  background-color: var(--color_sky);
}
.top_service-detail .dot-underline span {
  border-bottom: 8px dotted var(--color_navy);
  display: inline;
}
.top_service-reason--side {
  width: 15%;
  max-width: 70px;
}
.top_service-reason--side .rotate {
  transform: scale(-1, 1);
}
.top_service-hint {
  font-weight: bold;
  margin: min(5vw, 1.5rem) auto !important;
  display: inline-block;
}
.top_service-triangle {
  height: min(8vw, 40px);
  margin: 0 auto;
  aspect-ratio: 5;
  clip-path: polygon(50% 100%,100% 0,0 0);
  background: var(--color_navy);
}
.top_service-reason--text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -60%);
  max-height: 4.375rem;
}

.top_exam {
  position: relative;
  padding: 50px 0;
}
.top_exam::before {
  content:'';
  width: 40vw;
  position: absolute;
  top: -1px;
  left: 0;
  border-top: 10vw solid var(--color_sky);
  border-right: 10vw solid transparent;
  z-index: 0;
}
.top_exam .container {
  position: relative;
  z-index: 1;
}
.top_exam .centerline {
  display: flex;
  align-items: center;
}
.top_exam .centerline::after {
  content:'';
  flex-grow: 1;
  height: 1px;
  display: flex;
  margin-left: .5rem;
  background-color: var(--color_ai);
}

.top_works {
  position: relative;
  overflow: hidden;
}
.top_works::before {
  content:'WORKS';
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-shadow: 1px 1px 0 #D2E4FF,-1px -1px 0 #D2E4FF,-1px 1px 0 #D2E4FF,1px -1px 0 #D2E4FF,1px 0 0 #D2E4FF,-1px 0 0 #D2E4FF,0 1px 0 #D2E4FF,0 -1px 0 #D2E4FF;
  font-family: var(--font_eng);
  font-size: min(25vw, 300px);
  font-weight: 800;
  line-height: 1;
  z-index: 0;
}
.top_works .container {
  position: relative;
  z-index: 1;
  padding-top: min(15vw, 4rem);
  padding-bottom: min(15vw, 4rem);
}
.top_works-title {
  width: 100%;
  max-width: 33.75rem;
}
.top_works-lists {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.top_works-lists .inner {
  background-color: var(--color_yellow);
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 5px;
}
.top_works-lists .inner span {
  display: block;
  padding: 1rem;
  background-color: var(--color_navy);
}

.top_worries {
  position: relative;
  z-index: 1;
}
.top_worries .container {
  border: min(.8vw, 8px) solid var(--color_navy);
  position: relative;
  transform: translateY(-2%);
  background-color: white;
}
.top_worries .container::before, 
.top_worries .container::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 50%;
}
.top_worries .container::before {
  border-top: 3.3rem solid var(--color_navy);
  border-left: 9.5vw solid transparent;
  border-right: 9.5vw solid transparent;
  transform: translate(-50%, 3.3rem);
  z-index: 1;
}
.top_worries .container::after {
  border-top: 2.6rem solid white;
  border-left: 8vw solid transparent;
  border-right: 8vw solid transparent;
  transform: translate(-50%, 2.5rem);
  z-index: 2;
}
.top_worries-lists {
  gap: 1rem;
  
}
.top_worries .inner {
  background-color: var(--color_sky);
  padding: 1rem;
  text-align: center;
  color: var(--color_navy);
}

.top_cta {
  background-image: url("/wp-content/themes/diesel-meister/assets/images/top_ask-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: min(10vw, 10rem);
  padding-bottom: min(4vw, 4rem);
  z-index: 0;
}
.top_cta::before {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: var(--color_navy);
  opacity: 0.8;
}
.top_cta .container {
  position: relative;
  z-index: 1;
}
.top_cta-txt {
  text-decoration-thickness: 6px;
  text-underline-offset: 0;
}
.top_cta-btn {
  margin: 1rem auto;
}
.top_cta-btn img {
  max-width: 740px;
}
.top_cta-tel a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  line-height: 1;
}
.top_cta-tel span {
  font-size: min(9vw, 1.8rem);
  color: white;
  font-weight: bold;
}
.top_cta-tel small {
  color: white;
  font-weight: bold;
}
.top_cta-tel .icon-tel {
  width: min();
}

.top_voice-swiper {
  position: relative;
}
.top_voice-swiper .swiper-wrapper {
    height: auto;
    padding-bottom: 2rem;
  position:relative;
  }
.top_voice-swiper .swiper-slide {
  max-width: 480px;
  height: auto;
  border: 5px solid var(--color_dark);
  padding: 1rem;
  padding-top: 2.5rem;
  position: relative;
}
.top_voice-swiper .swiper-slide span {
  position: absolute;
  top: -5px;
  left: -5px;
  background-color: var(--color_navy);
  color: white;
  line-height: 1;
  display: inline-block;
  padding: .5rem;
}
.top_voice-swiper .swiper-slide p {
    margin-bottom: 0;
  }

.top_agency {
  position: relative;
  overflow: hidden;
}
.top_agency::before {
  content:'AGENCY LIST';
  position: absolute;
  top: 7rem;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  text-shadow: 1px 1px 0 #D2E4FF,-1px -1px 0 #D2E4FF,-1px 1px 0 #D2E4FF,1px -1px 0 #D2E4FF,1px 0 0 #D2E4FF,-1px 0 0 #D2E4FF,0 1px 0 #D2E4FF,0 -1px 0 #D2E4FF;
  font-family: var(--font_eng);
  font-size: min(15vw, 100px);
  font-weight: 800;
  line-height: 1;
  z-index: 0;
}
.top_agency .container {
  position: relative;
  z-index: 1;
  border: 8px solid var(--color_sky);
  padding: 3.75rem 0;
  max-width: 1000px;
}
.top_agency .icon-agency {
  width: 4.5rem;
}
.top_agency .btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 15.3638rem;
}
.top_agency .btn span, 
.top_agency .btn .icon-ar {
  margin-left: auto;
}


.top_news-lists li {
  display: flex;
  flex-wrap: wrap;
}
.top_news-lists li a {
  width: 100%;
}
.top_news-lists li b {
  width: 100%;
  max-width: 100px;
}
.top_news .btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 12.5rem;
}
.top_news .btn span, .top_news .btn .icon-ar {
  margin-left: auto;
}

@media screen and (min-width:481px) and (max-width: 767px) {
  .container, .container-sm {
    max-width: 640px;
  }
  .top_reason-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .top_reason-inner {
    width: calc(50% - 1rem);
  }
}

@media screen and (min-width: 768px) {
  .top_main .container {
    align-items: center;
  }
  .top_main-title {
    text-align: center;
  }
  .top_main-img {
    position: absolute;
    left: 0;
    top: 10%;
    width: min(30vw, 400px);
  }
  
  .top_reason-wrapper {
    grid-template-columns: repeat(3, fit-content(340px));
  }
  .top_reason::before, 
  .top_service::before {
    top: 1rem;
  }
  .top_service-comment {
    transform: translateY(30%);
    border-radius: var(--bs-border-radius-pill)!important;
  }
  
  .top_works-lists {
    grid-template-columns: repeat(4, 1fr);
  }
  .top_worries-lists {
    grid-template-columns: repeat(2, 1fr);
  }
  .top_worries .container {
    transform: translateY(10%);
  }
  
  .top_news-lists li b {
    width: 20%;
    margin-right: 1rem;
  }
}

@media (min-width: 1400px) {

}