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


/********** home **********/

main.home {
  .p-catch {
    position: relative;
    padding: 9rem 0 0;
    background: var(--yellow);
    z-index: 0;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      background-image: url(/wp-content/themes/keyakikoumuten/assets/img/home/bg-img.png);
      background-size: auto 10%;
      opacity: .15;
      z-index: -1;
      animation: bgLoop 200s linear infinite;
    }
    .p-catch__inner {
      position: relative;
      margin: 0 auto;
      padding: 18rem 2rem;
      width: 100%;
      max-width: 800px;
      text-align: center;
      h2 {
        margin: 0 0 4rem;
        font-size: 3.6rem;
        line-height: 1.6;
      }
      p {
        font-size: 2rem;
        font-weight: 700;
        line-height: 2;
      }
      img {
        position: absolute;
      }
      .icon01 {
        aspect-ratio: 132/227;
      }
      .icon02 {
        aspect-ratio: 147/203;
      }
      .icon03 {
        aspect-ratio: 174/193;
      }
      .icon04 {
        aspect-ratio: 199/196;
      }
      .icon05 {
        aspect-ratio: 146/239;
      }
      .icon06 {
        aspect-ratio: 146/199;
      }
      .icon01,
      .icon02 {
        top: 6rem;
        width: 9%;
      }
      .icon03,
      .icon04 {
        top: 50%;
        transform: translate(0,-50%);
        width: 12%;
      }
      .icon05,
      .icon06 {
        bottom: 6rem;
        width: 9%;
      }
      .icon01,
      .icon05 {
        left: 15%;
      }
      .icon03 {
        left: 40px;
      }
      .icon04 {
        right: 40px;
      }
      .icon02,
      .icon06 {
        right: 15%;
      }
    }
  }

  .p-body{
    padding: 0;
    
    .p-chapter {
      padding: 16rem 0;
      .p-chapter__inner {
        margin: 0 auto;
        padding: 0 4rem;
        width: 100%;
        max-width: 1200px;
        hgroup {
          margin: 0 0 8rem;
          text-align: center;
          span {
            display: block;
            margin: 0 0 2rem;
            font-size: 8rem;
            font-weight: 700;
            color: var(--yellow);
            letter-spacing: .1em;
            -webkit-text-stroke: 4px black;
            text-stroke: 4px black;
            paint-order: stroke;
            /* text-shadow:
              2px 2px 0 var(--text),
              -2px 2px 0 var(--text),
              -2px -2px 0 var(--text),
              2px -2px 0 var(--text); */
            line-height: 1;
          }
          h2 {
            font-size: 2.4rem;
            letter-spacing: .05em;
          }
        }
      }
    }

    #about{
      .p-chapter__inner {
        display: flex;
        gap: 12rem;
        .imgArea {
          width: calc(50% - 12rem);
        }
        .textArea {
          width: 50%;
          h2 {
            font-size: 3.6rem;
            margin: 0 0 4rem;
          }
          p + p {
            margin: .5em 0 0;
          }
          .btnLink {
            margin-left: auto;
            margin-right: 0;
          }
        }
      }
    }

    #point{
      background: rgb(250, 200, 0, .1);
      .p-chapter__inner {
        max-width: 1400px;
        ul {
          display: flex;
          gap: 2rem;
          padding: 3.5rem 0 0;
          li {
            position: relative;
            padding: 5rem 3rem 3rem;
            width: calc(100%/3 - 2rem*2/3);
            background: #fff;
            border: 2px solid var(--text);
            border-radius: 40px;
            &:nth-child(2) {
              .imgArea {
                img {
                  padding: 0 20%;
                }
              }
            }
            .num {
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50%, -50%);
              display: grid;
              place-content: center;
              text-align: center;
              margin: 0 auto 2rem;
              font-size: 3.2rem;
              font-weight: 700;
              color: var(--text);
              background: var(--yellow);
              letter-spacing: .05em;
              width: 70px;
              height: 70px;
              border-radius: 50%;
              border: 2px solid var(--text);
            }
            .imgArea {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0 auto 1rem;
              max-width: 240px;
              img {
                display: block;
                aspect-ratio: 1;
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
            .textArea {
              h3 {
                font-size: 2.7rem;
                text-align: center;
                margin: 0 0 2rem;
              }
            }
          }
        }
        .borderArea {
          display: flex;
          gap: 8rem;
          margin: 10rem auto 0;
          padding: 6rem;
          border: 2px solid var(--text);
          border-radius: 40px;
          background: #fff;
          max-width: 1200px;
          .imgArea {
            width: 180px;
          }
          .textArea {
            width: calc(100% - 180px - 8rem);
            h4 {
              margin: 0 0 3rem;
              font-size: 3.2rem;
              border-bottom: 4px solid var(--yellow);
              .material-symbols-outlined {
                font-size: 1.4em;
                color: var(--yellow);
                vertical-align: text-bottom;
              }
            }
          }
        }
      }
    }

    #worries{
      padding-top: 0;
      .p-chapter__inner {
        max-width: 100%;
        padding: 0;
        .worriesList {
          padding: 16rem 4rem;
          background: #f4f4f4;
          hgroup {
            margin: 0 0 6rem;
            h2 {
              position: relative;
              font-size: 3.6rem;
              padding: 0 0 .1em;
              &::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 0%);
                width: 40px;
                height: 4px;
                background: var(--yellow);
              }
            }
          }
          .worriesImg {
            position: relative;
            margin: 0 auto 10rem;
            width: calc(100% - 4rem);
            max-width: 660px;
            .icon01,
            .icon02,
            .icon03,
            .icon04 {
              position: absolute;
            }
            .icon01 {
              top: 0;
              left: 5%;
              width: 22%;
            }
            .icon02 {
              top: 3%;
              right: 5%;
              width: 22%;
            }
            .icon03 {
              left: 0;
              bottom: 30%;
              width: 18%;
            }
            .icon04 {
              bottom: 30%;
              right: 0;
              width: 18%;
            }
            .main {
              display: block;
              width: 55%;
              padding: 10% 0 0;
              margin: 0 auto;
              /* max-width: 360px; */
            }
          }
          ul {
            display: flex;
            flex-wrap: wrap;
            gap: 6rem;
            margin: 0 auto;
            max-width: 1200px;
            li {
              width: calc(50% - 3rem);
              border: 2px solid var(--text);
              border-radius: 40px;
              background: #fff;
              overflow: hidden;
              h3 {
                padding: 2rem 0;
                font-size: 2.4rem;
                text-align: center;
                background: var(--yellow);
              }
              p {
                padding: 4rem;
                font-size: 1.6rem;
              }
            }
          }
        }
        .borderArea {
          margin: 12rem auto 0;
          padding: 6rem;
          border: 2px solid var(--text);
          border-radius: 40px;
          background: #fff;
          width: calc(100% - 8rem);
          max-width: 1200px;
          background: rgb(250, 200, 0, .05);
          h4 {
            display: block;
            margin: 0 auto 4rem;
            width: fit-content;
            font-size: 3.2rem;
            color: var(--yellow);
            line-height: 1.4;
            word-break: keep-all;
          }
          >ul {
            >li + li {
              margin: 2.5rem 0 0;
            }
            >li {
              display: flex;
              gap: 2rem 4rem;
              &:nth-child(2) {
                .imgArea {
                  padding: 2.5rem 1.5rem;
                }
              }
              &:nth-child(6) {
                .imgArea {
                  padding-top: 1rem;
                }
              }
              .imgArea {
                display: flex;
                align-items: center;
                padding: 2.5rem 2rem;
                width: 100px;
                height: 100px;
                background: #fff;
                border: 2px solid var(--yellow);
                border-radius: 50%;
                img {
                  display: block;
                }
              }
              .textArea {
                width: calc(100% - 100px - 4rem);
                >h5 {
                  margin: 0 0 .5rem;
                  font-size: 2.4rem;
                }
                >ul {
                  display: flex;
                  flex-wrap: wrap;
                  >li {
                    display: inline-block;
                    &:not(:last-child) {
                      &::after {
                        content: "、";
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    #work{
      border-top: 2px solid var(--yellow);
      border-bottom: 2px solid var(--yellow);
      background-color: rgb(250, 200, 0, .1);
      background-image: linear-gradient(rgb(250, 200, 0, .5) 1px, transparent 0),
                    linear-gradient(90deg, rgb(250, 200, 0, .5) 1px, transparent 0);
      background-size: 20px 20px;
      .p-chapter__inner {
        max-width: 1600px;
        ul {
          display: flex;
          gap: 4rem;
          li {
            width: calc(100%/3 - 4rem*2/3);
            border: 2px solid var(--text);
            border-radius: 40px;
            overflow: hidden;
            &.none {
              border: none;
              width: 100%;
              text-align: center;
              font-size: 1.2em;
            }
            a {
              display: block;
              height: 100%;
              &:hover {
                .thumb {
                  img {
                    transform: scale(1.1);
                  }
                }
              }
              .thumb {
                width: 100%;
                aspect-ratio: 3/2;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  transition: .3s;
                }
              }
              p {
                padding: 2rem;
                height: 100%;
                font-weight: 700;
                background: var(--yellow);
              }
            }
          }
        }
      }
    }

    #flow{
      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4rem;
        margin: 0 auto;
        padding: 0;
        max-width: 1200px;
        li {
          position: relative;
          padding: 4rem 2rem;
          width: calc(100%/3 - 4rem*2/3);
          text-align: center;
          background: rgb(250, 200, 0, .1);
          /* border: 2px solid var(--text); */
          border-radius: 40px;
          &:not(:last-child) {
            &::after {
              content: "";
              position: absolute;
              top: 50%;
              right: -20px;
              transform: translate(50%, -50%);
              display: inline-block;
              width: calc(2rem*.7);
              height: 2rem;
              clip-path: polygon(0 0, 100% 50%, 0% 100%);
              background: var(--yellow);
            }
          }
          &:nth-child(1),
          &:nth-child(3),
          &:nth-child(5) {
            .imgArea {
              img {
                padding: 2.5rem;
              }
            }
          }
          &:nth-child(6) {
            .imgArea {
              img {
                padding: 2rem 2rem 3rem;
              }
            }
          }
          .step {
            display: inline-block;
            padding: .2em .8em;
            font-weight: 700;
            letter-spacing: .05em;
            background: var(--yellow);
            border-radius: 10px;
            color: #fff;
          }
          .imgArea {
            margin: 2rem auto;
            width: 120px;
            height: 120px;
            border: 2px solid var(--text);
            border-radius: 50%;
            background: #fff;
            img {
              width: 100%;
              height: 100%;
              padding: 2rem;
              object-fit: contain;
            }
          }
          h3 {
            margin: 2rem 0;
            font-size: 2.2rem;
            line-height: 1.4;
            word-break: keep-all;
          }
          p {
            text-align: left;
            font-size: 1.6rem;
          }
        }
      }
    }

    #faq{
      .p-chapter__inner {
        .faqList {
          dl {
            margin: 0 auto;
            padding: 4rem 0;
            max-width: 1000px;
            border-bottom: 2px solid var(--yellow);
            &:first-child {
              border-top: 2px solid var(--yellow);
            }
            dt, dd {
              display: flex;
              gap: 0 2rem;
              .en {
                display: grid;
                place-content: center;
                font-size: 2.5rem;
                font-weight: 700;
                width: 5rem;
                min-width: 5rem;
                height: 5rem;
                border-radius: 50%;
                border: 2px solid var(--text);
                background: var(--yellow);
              }
              p {
                margin: .45em 0 0;
              }
            }
            dd {
              margin: 2rem 0 0;
            }
          }
        }
      }
    }
    
    #contact{
      background-color: rgb(250, 200, 0, .1);
      .p-chapter__inner {
        text-align: center;
        >p {
          word-break: keep-all;
        }
        .lead {
          position: relative;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin: 6rem auto 0;
          padding: 0 .6em;
          width: fit-content;
          font-size: 2.2rem;
          font-weight: 700;
          &::before,
          &::after {
            content: "";
            position: absolute;
            top: 0;
            width: 3px;
            height: 100%;
            background: var(--text);
          }
          &::before {
            left: 0;
            transform: rotate(-20deg);
          }
          &::after {
            right: 0;
            transform: rotate(20deg);
          }
          a {
            display: flex;
            align-items: center;
            gap: .2em;
            padding: 0 .2em;
            font-weight: 700;
          }
          .line {
            color: rgb(6, 199, 85);
            border-color: rgb(6, 199, 85);
            img {
              width: 1.6em;
            }
          }
          .tel {
            color: var(--yellow);
            .call {
              font-size: 1.6em;
            }
          }
        }
        .btnLink {
          margin: 2rem auto 0;
        }
      }
    }

  }
}

@media (max-width: 1024px) {
  main.home {
    .p-body{
    
      #about{
        .p-chapter__inner {
          gap: 6rem;
          .imgArea {
            width: calc(50% - 6rem);
          }
          .textArea {
            h2 {
              font-size: 3.2rem;
            }
          }
        }
      }

      #point{
        .p-chapter__inner {
          ul {
            li {
              .textArea {
                h3 {
                  font-size: 2.4rem;
                }
              }
            }
          }
        }
      }

      #worries{
        .p-chapter__inner {
          .worriesList {
            padding: 12rem 4rem;
            hgroup {
              margin: 0 0 6rem;
              h2 {
                font-size: 3.6rem;
              }
            }
            ul {
              gap: 4rem;
              margin: 0 auto;
              max-width: 1200px;
              li {
                width: calc(50% - 2rem);
                border: 2px solid var(--text);
                border-radius: 40px;
                background: #fff;
                overflow: hidden;
                h3 {
                  font-size: 2.1rem;
                }
              }
            }
          }
          .borderArea {
            margin: 12rem auto 0;
            padding: 4rem;
            h4 {
              display: block;
              margin: 0 auto 3rem;
              width: fit-content;
              font-size: 2.7rem;
              color: var(--yellow);
            }
            >ul {
              >li + li {
                margin: 2.5rem 0 0;
              }
              >li {
                display: flex;
                gap: 0 4rem;
                &:nth-child(2) {
                  .imgArea {
                    padding: 2.5rem 1.5rem;
                  }
                }
                &:nth-child(6) {
                  .imgArea {
                    padding-top: 1rem;
                  }
                }
                .textArea {
                  >h5 {
                    font-size: 2rem;
                  }
                }
              }
            }
          }
        }
      }

      #work{
        .p-chapter__inner {
          ul {
            display: flex;
            gap: 2rem;
            li {
              width: calc(100%/3 - 2rem*2/3);
            }
          }
        }
      }

    }
  }
}

@media (max-width: 768px) {
  main.home {
    .p-catch {
      padding: 8rem 0 0;
      &::before {
        background-size: auto 10%;
      }
      .p-catch__inner {
        padding: 16rem 2rem;
        h2 {
          margin: 0 0 4rem;
          font-size: 2.7rem;
        }
        p {
          font-size: 1.6rem;
        }
        .icon03 {
          left: 20px;
        }
        .icon04 {
          right: 20px;
        }
      }
    }

    .p-body{
    
      .p-chapter {
        padding: 12rem 0;
        .p-chapter__inner {
          hgroup {
            margin: 0 0 8rem;
            span {
              margin: 0 0 2rem;
              font-size: 7.2rem;
            }
            h2 {
              font-size: 2.1rem;
            }
          }
        }
      }

      #about{
        .p-chapter__inner {
          gap: 6rem;
          flex-wrap: wrap;
          .imgArea {
            width: calc(100% - 4rem);
            max-width: 360px;
            margin: 0 auto;
          }
          .textArea {
            width: 100%;
            h2 {
              text-align: center;
            }
            .btnLink {
              margin-left: auto;
              margin-right: auto;
            }
          }
        }
      }

      #point{
        .p-chapter__inner {
          ul {
            flex-wrap: wrap;
            gap: 5rem;
            li {
              width: 100%;
              margin: 0 auto;
              max-width: 480px;
              .imgArea {
                margin: 0 auto;
                width: calc(100% - 8rem);
                max-width: 320px;
              }
              .textArea {
                h3 {
                  font-size: 2.4rem;
                }
              }
            }
          }
          .borderArea {
            gap: 4rem;
            flex-direction: column-reverse;
            .textArea {
              width: 100%;
            }
            .imgArea {
              margin: 0 auto;
            }
          }
        }
      }

      #worries{
        .p-chapter__inner {
          .worriesList {
            hgroup {
              h2 {
                font-size: 3.2rem;
              }
            }
            ul {
              li {
                width: 100%;
              }
            }
          }
          .borderArea {
            margin: 12rem auto 0;
            padding: 4rem;
            h4 {
              font-size: 2.7rem;
            }
          }
        }
      }

      #work{
        .p-chapter__inner {
          ul {
            flex-wrap: wrap;
            li {
              margin: 0 auto;
              width: 100%;
              max-width: 480px;
            }
          }
        }
      }

      #flow{
        ul {
          li {
            width: calc(100%/2 - 4rem/2);
          }
        }
      }

    }
  }
}

@media (max-width: 600px) {
  main.home {

    .p-body{

      #flow{
        ul {
          li {
            margin: 0 auto;
            width: 100%;
            max-width: 400px;
            &:not(:last-child) {
              &::after {
                content: "";
                top: auto;
                bottom: -20px;
                right: 50%;
                transform: translate(50%, 50%);
                width: 2rem;
                height: calc(2rem*.7);
                clip-path: polygon(0 0, 100% 0%, 50% 100%);
              }
            }
          }
        }
      }

    }
  }
}

@media (max-width: 480px) {
  main.home {

    .p-catch {
      &::before {
        animation: bgLoop 50s linear infinite;
      }
      .p-catch__inner {
        padding: 13rem 2rem;
        h2 {
          margin: 0 0 3rem;
          font-size: 2.1rem;
        }
        p {
          font-size: 1.3rem;
        }
        .icon01,
        .icon02 {
          top: 4rem;
          width: 10%;
        }
        .icon03,
        .icon04 {
          width: 14%;
        }
        .icon05,
        .icon06 {
          bottom: 4rem;
          width: 10%;
        }
        .icon03 {
          left: 10px;
        }
        .icon04 {
          right: 10px;
        }
      }
    }

    .p-body{
    
      .p-chapter {
        padding: 8rem 0;
        .p-chapter__inner {
          padding: 0 2rem;
          hgroup {
            margin: 0 0 4rem;
            span {
              margin: 0 0 1rem;
              font-size: 5.4rem;
            }
            h2 {
              font-size: 1.8rem;
            }
          }
        }
      }

      #about{
        .p-chapter__inner {
          gap: 4rem;
          .textArea {
            h2 {
              font-size: 2.4rem;
            }
          }
        }
      }

      #point{
        .p-chapter__inner {
          ul {
            li {
              .num {
                width: 54px;
                height: 54px;
                font-size: 2.4rem;
              }
              .imgArea {
                padding: 0;
              }
              .textArea {
                h3 {
                  font-size: 2.4rem;
                }
              }
            }
          }
          .borderArea {
            gap: 3rem;
            margin: 6rem 0 0;
            padding: 3rem;
            .textArea {
              h4 {
                margin: 0 0 2rem;
                font-size: 2.4rem;
              }
            }
            .imgArea {
              margin: 0 auto;
              width: 140px;
            }
          }
        }
      }

      #worries{
        .p-chapter__inner {
          .worriesList {
            padding: 8rem 2rem;
            hgroup {
              margin: 0 0 4rem;
              h2 {
                font-size: 2.7rem;
              }
            }
            .worriesImg {
              margin: 0 auto 6rem;
            }
            ul {
              li {
                border-radius: 20px;
                h3 {
                  padding: 1.5rem 0;
                  font-size: 2rem;
                }
                p {
                  padding: 2rem;
                  font-size: 1.5rem;
                }
              }
            }
          }
          .borderArea {
            margin: 8rem auto 0;
            padding: 3rem;
            width: calc(100% - 4rem);
            h4 {
              font-size: 2.4rem;
              text-align: center;
            }
            >ul {
              >li {
                gap: 1rem;
                flex-direction: column;
                .imgArea {
                  margin: 0 auto;
                }
                .textArea {
                  width: 100%;
                  h5 {
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }

      #flow{
        .p-chapter__inner {
          ul {
            li {
              h3 {
                font-size: 2rem;
              }
            }
          }
        }
      }

      #faq{
        .p-chapter__inner {
          .faqList {
            dl {
              padding: 3em 0;
              max-width: 1000px;
              dt, dd {
                gap: 0 1rem;
                .en {
                  font-size: 2rem;
                  width: 4rem;
                  min-width: 4rem;
                  height: 4rem;
                }
              }
              dd {
                margin: 1.5rem 0 0;
              }
            }
          }
        }
      }

      #contact {
        .p-chapter__inner {
          .lead {
            margin: 4rem auto 0;
            font-size: 1.8rem;
            &::before,
            &::after {
              width: 2px;
            }
          }
        }
      }

    }

  }
}

@keyframes bgLoop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0%;
  }
}