@charset "UTF-8";
/*==========================================
変数 inc.scss
===========================================*/
@font-face {
  font-family: 'Roboto';
  src: url(../fonts/RobotoCondensed-Regular.ttf); }
.Roboto {
  font-family: "Roboto", serif; }

/*Sofia Sans Extra Condensed*/
@font-face {
  font-family: 'SofiaSansExtraCondensed';
  src: url(../fonts/SofiaSansExtraCondensed-Regular.ttf); }
.SofiaSansExtraCondensed-Regular {
  font-family: "SofiaSansExtraCondensed-Regular", serif; }

main {
  padding-top: 90px;
  padding-bottom: clamp(100px, 20vw, 200px) !important; }
  @media screen and (max-width: 767px) {
    main {
      padding-top: 60px; } }

.secMT_mid {
  margin-top: clamp(40px, 8vw, 80px); }

.ctsWrap {
  max-width: 1680px;
  width: 92%;
  margin: 0 auto; }

.bgGray {
  background: #ededed;
  padding: clamp(80px, 15vw, 150px) 0; }

.lineYlw {
  background: linear-gradient(transparent 60%, #f6fa77 60%); }

.wbr-txt {
  word-break: keep-all;
  overflow-wrap: anywhere; }

.marginLrg {
  margin: clamp(100px, 18vw, 180px) auto; }

.sec-ttlR {
  text-align: center;
  font-size: clamp(1.4rem, 2vw, 2rem);
  position: relative;
  margin-bottom: clamp(40px, 9vw, 90px); }
  .sec-ttlR::before {
    content: "";
    display: block;
    position: absolute;
    width: clamp(100px, 14vw, 170px);
    aspect-ratio: 1/1;
    top: calc(50% - clamp(50px,7vw,85px));
    left: calc(50% - clamp(50px,7vw,85px));
    background: #f6fa77;
    border-radius: 100vmax;
    z-index: -1; }
  .sec-ttlR .ttl-ja {
    font-size: clamp(2.6rem, 3vw, 4rem);
    font-weight: bold;
    letter-spacing: 0.1em; }
  .sec-ttlR .ttl-en {
    font-family: "Roboto", serif;
    letter-spacing: 0.05em;
    line-height: 1; }
    .sec-ttlR .ttl-en::before {
      content: "";
      max-width: 244px;
      width: 50%;
      height: 1px;
      margin: 1em auto;
      display: block;
      background: #000; }

.basic-txt {
  letter-spacing: 0.1em;
  line-height: 1.8; }
  @media screen and (max-width: 767px) {
    .basic-txt {
      letter-spacing: 0.05em;
      line-height: 1.5; } }
  .basic-txt.fs18 {
    font-size: clamp(1.6rem, 1.8vw, 1.8rem); }
  .basic-txt .lrg {
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    letter-spacing: normal;
    font-weight: 500; }
  .basic-txt p:not(:last-child) {
    margin-bottom: 1.5em; }

.imgB-center {
  text-align: center; }

.arrowB-right {
  transition: .3s all;
  position: relative;
  display: inline-block;
  width: 4rem;
  height: 4rem;
  z-index: 1;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #000;
  background: #fff; }
  .arrowB-right::before, .arrowB-right::after {
    transition: .3s all;
    content: "";
    position: absolute;
    top: 50%;
    z-index: 2; }
  .arrowB-right::before {
    width: .8rem;
    height: .8rem;
    border: 2px solid #000;
    border-left: 0 !important;
    border-bottom: 0 !important;
    transform: rotate(45deg);
    transform-origin: top right;
    right: .5rem;
    box-sizing: border-box; }
  .arrowB-right::after {
    vertical-align: middle;
    line-height: 1;
    width: 2rem;
    height: .2rem;
    margin-right: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000; }

.btn-ylw a {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 575px;
  width: 90%;
  background: #f6fa77;
  text-align: center;
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  font-weight: bold;
  letter-spacing: 0.15em;
  padding: 1.5em 0;
  border-radius: 100vmax; }
  @media (hover: hover) {
    .btn-ylw a:hover {
      background: #0041a0;
      color: #fff; } }
.btn-ylw .arrowB-right {
  margin-right: 1em; }
.btn-ylw.center a {
  margin: 0 auto; }

.fv-block .fv-img {
  display: flex;
  justify-content: space-between; }
  .fv-block .fv-img li {
    display: block; }
    .fv-block .fv-img li:nth-of-type(1) {
      width: 25%; }
    .fv-block .fv-img li:nth-of-type(2) {
      width: 35%;
      transition-delay: 0.2s; }
    .fv-block .fv-img li:nth-of-type(3) {
      width: 40%;
      transition-delay: 0.4s; }
    .fv-block .fv-img li img {
      width: 100%;
      height: min(70vw, 730px);
      object-fit: cover; }
      @media screen and (max-width: 767px) {
        .fv-block .fv-img li img {
          height: min(50vw, 730px); } }
.fv-block .fv-body {
  display: flex;
  justify-content: space-between;
  font-size: clamp(3rem, 6vw, 10rem);
  margin-top: -0.6em; }
  @media screen and (max-width: 767px) {
    .fv-block .fv-body {
      flex-direction: column; } }
.fv-block .kawasaki-ttl {
  width: 50%; }
  @media screen and (max-width: 767px) {
    .fv-block .kawasaki-ttl {
      width: 100%; } }
  .fv-block .kawasaki-ttl::after {
    content: "";
    display: block;
    max-width: 190px;
    width: 40%;
    height: 1px;
    background: #000; }
  .fv-block .kawasaki-ttl .ttl-en {
    font-family: "Roboto", serif;
    letter-spacing: 0.05em;
    line-height: 1;
    color: #0041a0; }
  .fv-block .kawasaki-ttl .ttl-ja {
    font-size: clamp(1.6rem, 2vw, 2rem);
    letter-spacing: 0.1em;
    margin: 1em 0 1.5em; }
.fv-block .fv-bnr {
  font-size: 0;
  width: 50%;
  max-width: 617px; }
  .fv-block .fv-bnr a {
    display: block; }
    @media (hover: hover) {
      .fv-block .fv-bnr a:hover {
        opacity: 0.5; } }
  @media screen and (max-width: 767px) {
    .fv-block .fv-bnr {
      width: 100%; } }

.sec-lead {
  margin: clamp(40px, 9vw, 90px) auto clamp(60px, 10vw, 100px); }
  .sec-lead .lead-rowBlock {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    .sec-lead .lead-rowBlock .block-head {
      width: 33%; }
      @media screen and (max-width: 1200px) {
        .sec-lead .lead-rowBlock .block-head {
          width: 50%; } }
      @media screen and (max-width: 767px) {
        .sec-lead .lead-rowBlock .block-head {
          width: 100%; } }
    .sec-lead .lead-rowBlock .block-body {
      width: 60%; }
      @media screen and (max-width: 1200px) {
        .sec-lead .lead-rowBlock .block-body {
          width: 45%; } }
      @media screen and (max-width: 767px) {
        .sec-lead .lead-rowBlock .block-body {
          margin-top: clamp(40px, 6vw, 60px);
          width: 100%; } }
  .sec-lead .lead-ttl {
    font-size: clamp(2.6rem, 4vw, 5rem);
    font-weight: bold;
    letter-spacing: 0.2em;
    margin-bottom: 1em; }
    @media screen and (min-width: 1201px) {
      .sec-lead .lead-ttl {
        font-size: clamp(2.2rem, 2.6vw, 5rem); } }
  .sec-lead .lead-mainimg {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    margin-bottom: 25px; }
    .sec-lead .lead-mainimg li {
      width: calc(100% * 1/3); }
  .sec-lead .point-list {
    margin-top: clamp(80px, 15vw, 150px);
    display: flex;
    justify-content: space-between;
    border-left: 1px solid #000;
    border-right: 1px solid #000; }
    @media screen and (max-width: 767px) {
      .sec-lead .point-list {
        flex-direction: column;
        border: none;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000; } }
    .sec-lead .point-list .point-item {
      width: calc(100% * 1/3);
      padding: 0 clamp(20px, 4vw, 100px) clamp(20px, 4vw, 60px);
      text-align: center; }
      .sec-lead .point-list .point-item:not(:last-child) {
        border-right: 1px solid #000; }
      @media screen and (max-width: 767px) {
        .sec-lead .point-list .point-item {
          width: 100%;
          padding: clamp(30px, 4vw, 60px) clamp(20px, 4vw, 100px); }
          .sec-lead .point-list .point-item:not(:last-child) {
            border-right: 0;
            border-bottom: 1px solid #000; } }
      .sec-lead .point-list .point-item .item-num {
        font-size: clamp(3rem, 8vw, 10rem);
        letter-spacing: 0.05em;
        font-family: "Roboto", serif;
        line-height: 1; }
        .sec-lead .point-list .point-item .item-num .num {
          position: relative; }
          .sec-lead .point-list .point-item .item-num .num::before {
            content: "";
            display: block;
            position: absolute;
            width: clamp(60px, 8vw, 120px);
            aspect-ratio: 120/81;
            background: url("../img/kawasaki/img-point.png") no-repeat center/contain;
            left: calc(0px - clamp(80px,10vw,140px));
            bottom: 7%; }
            @media screen and (max-width: 767px) {
              .sec-lead .point-list .point-item .item-num .num::before {
                width: clamp(80px, 12vw, 120px);
                left: calc(0px - clamp(90px,13vw,130px));
                bottom: 0%; } }
      .sec-lead .point-list .point-item .item-lead {
        font-size: clamp(2rem, 2.6vw, 3rem);
        font-weight: bold;
        font-feature-settings: “palt”;
        margin: 1em 0; }
        @media screen and (min-width: 768px) {
          .sec-lead .point-list .point-item .item-lead {
            font-size: clamp(1.2rem, 1.6vw, 3rem); } }
        .sec-lead .point-list .point-item .item-lead.lsS {
          letter-spacing: -0.05em; }
      .sec-lead .point-list .point-item .item-ttl {
        font-size: clamp(2rem, 2.6vw, 3rem);
        letter-spacing: 0.1em;
        font-weight: bold;
        background: linear-gradient(transparent 60%, #f6fa77 60%);
        margin-bottom: 1em; }
        @media screen and (min-width: 768px) {
          .sec-lead .point-list .point-item .item-ttl {
            font-size: clamp(1.5rem, 2vw, 3rem); } }
      .sec-lead .point-list .point-item .basic-txt {
        text-align: left; }

.products-block .products-secBox:not(:last-child) {
  margin-bottom: clamp(80px, 15vw, 150px); }

.products-secBox .secBox-row {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .products-secBox .secBox-row {
      flex-direction: column; } }
  .products-secBox .secBox-row .sBox-head {
    width: 35%; }
    @media screen and (max-width: 1200px) {
      .products-secBox .secBox-row .sBox-head {
        width: 50%; } }
    @media screen and (max-width: 767px) {
      .products-secBox .secBox-row .sBox-head {
        width: 100%; } }
    .products-secBox .secBox-row .sBox-head .baasic-txt {
      max-width: 493px; }
  .products-secBox .secBox-row .sBox-body {
    width: 63%; }
    @media screen and (max-width: 1200px) {
      .products-secBox .secBox-row .sBox-body {
        width: 48%; } }
    @media screen and (max-width: 767px) {
      .products-secBox .secBox-row .sBox-body {
        margin-top: clamp(40px, 6vw, 60px);
        width: 100%; } }
.products-secBox .secBox-ttl {
  margin-bottom: clamp(25px, 4vw, 40px); }
  .products-secBox .secBox-ttl::after {
    content: "";
    width: clamp(70px, 14vw, 140px);
    height: 1px;
    background: #000;
    display: block;
    margin: 1em 0 0; }
  .products-secBox .secBox-ttl .ttl-en {
    font-family: "Roboto", serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1;
    font-weight: normal;
    letter-spacing: 0.05em;
    width: 60%;
    max-width: 306px;
    background-color: #f6fa77;
    padding: 5px 0px 5px 0.5em;
    margin-bottom: 1em; }
  .products-secBox .secBox-ttl .ttl-ja {
    font-size: clamp(2rem, 3vw, 4rem);
    letter-spacing: 0.1em;
    font-weight: bold;
    line-height: 1; }
    @media screen and (max-width: 767px) {
      .products-secBox .secBox-ttl .ttl-ja {
        line-height: 1.4; } }
    .products-secBox .secBox-ttl .ttl-ja .sml {
      font-size: clamp(1.6rem, 2vw, 2rem); }
.products-secBox .secBox-step {
  margin-top: clamp(40px, 10vw, 100px);
  display: flex;
  justify-content: space-between; }
  @media screen and (max-width: 767px) {
    .products-secBox .secBox-step {
      flex-wrap: wrap; } }
  .products-secBox .secBox-step .step-item {
    width: calc(99% * 1/4); }
    .products-secBox .secBox-step .step-item:not(:last-child) .item-ttl::after {
      content: "";
      width: 10px;
      height: 2px;
      background: #0041a0;
      display: block;
      position: absolute;
      transform: rotate(15deg);
      right: 0;
      bottom: 0; }
    @media screen and (max-width: 767px) {
      .products-secBox .secBox-step .step-item {
        width: 95%;
        margin-left: auto;
        position: relative; }
        .products-secBox .secBox-step .step-item::before {
          content: "";
          width: 2px;
          height: 100%;
          background: #0041a0;
          position: absolute;
          top: 0;
          left: -5%; }
        .products-secBox .secBox-step .step-item:not(:last-child) {
          padding: 0 0 40px; }
          .products-secBox .secBox-step .step-item:not(:last-child)::after {
            content: "";
            width: 2px;
            height: 10px;
            display: block;
            position: absolute;
            transform: rotate(45deg);
            background: #0041a0;
            left: -4%;
            bottom: 10px; }
          .products-secBox .secBox-step .step-item:not(:last-child) .item-ttl::after {
            display: none; } }
    .products-secBox .secBox-step .step-item .item-ttl {
      border-bottom: 2px solid #0041a0;
      font-family: "Roboto", serif;
      font-size: clamp(1.6rem, 2vw, 3rem);
      letter-spacing: 0.05em;
      color: #0041a0;
      position: relative;
      margin-bottom: 1em; }
      @media screen and (max-width: 767px) {
        .products-secBox .secBox-step .step-item .item-ttl {
          border-bottom: none; } }
      .products-secBox .secBox-step .step-item .item-ttl .numTxt {
        position: relative;
        z-index: 1; }
      .products-secBox .secBox-step .step-item .item-ttl .num {
        margin-left: 0.1em;
        font-size: clamp(2.6rem, 4vw, 5rem);
        position: relative; }
        .products-secBox .secBox-step .step-item .item-ttl .num::before {
          content: "";
          display: block;
          width: 0.8em;
          aspect-ratio: 1/1;
          background: #f6fa77;
          border-radius: 100vmax;
          position: absolute;
          bottom: 0;
          left: calc(50% - 0.4em); }

.sec-conveni .conveni-list {
  margin-top: clamp(25px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .sec-conveni .conveni-list li {
    width: calc(85% * 1/6); }
.sec-conveni .sBox-mainimg {
  display: flex;
  justify-content: space-between; }
  .sec-conveni .sBox-mainimg li {
    width: 48%;
    text-align: center; }
    .sec-conveni .sBox-mainimg li:nth-of-type(2) {
      margin-top: min(8vw, 150px); }

.sec-thickness .thickness-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  text-align: center;
  max-width: 1425px;
  margin-left: auto;
  margin-right: auto; }
  .sec-thickness .thickness-list li {
    width: 24%;
    font-size: clamp(1.2rem, 1.4vw, 1.8rem); }
    .sec-thickness .thickness-list li:nth-of-type(1) {
      max-width: 143px;
      width: 11.9%; }
    .sec-thickness .thickness-list li:nth-of-type(2) {
      max-width: 177px;
      width: 14.5%; }
    .sec-thickness .thickness-list li:nth-of-type(3) {
      max-width: 247px;
      width: 20.2%; }
    .sec-thickness .thickness-list li:nth-of-type(4) {
      max-width: 352px;
      width: 28.6%; }

.sec-design .design-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  text-align: center; }
  .sec-design .design-list li {
    width: 24%;
    padding: 0 2%;
    font-size: clamp(1.2rem, 1.4vw, 1.8rem); }
    .sec-design .design-list li:not(:nth-of-type(4n)) {
      margin-right: 1%; }
    .sec-design .design-list li:nth-of-type(n+5) {
      margin-top: clamp(40px, 8vw, 80px); }
    @media screen and (min-width: 1201px) {
      .sec-design .design-list li {
        letter-spacing: 0.1em; } }

/*# sourceMappingURL=kawasaki.css.map */