/*
Theme Name: Arkhe Child
Template: arkhe
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

:root {
  --green: #22b573;
  --blue: #0962b6;
  --beige: #f5f1dd;
  --orange: #f2994a;
  --green: #22b573;
  --yellow: #ffe77e;
  --yellow02: #fff8ba;
  --red: #f15757;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* ----------------------------------------
Layout
-----------------------------------------*/
/* .l-header {
  margin-top: 25px;
  display: flex;
  align-items: center;
}

.l-header__box01 {
  display: flex;
  align-items: center;
  gap: 4vw;
  background-color: #fff;
  padding: 20px 70px 20px 40px;
  border-radius: 0 5em 0 0;
  .c-headLogo__img {
    width: clamp(250px, 25vw, 360px);
    max-width: 360px;
  }
}
.l-header__box02 {
  display: flex;
  align-items: center;
}
.l-header__insta {
  background-color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 30px 30px;
  a {
    color: #fff;
    padding: 0.9em 1.5em;
  }
  svg {
    width: 30px;
    height: 30px;
  }
}
.l-header__mail {
  background-color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 80px 50px 50px 0;
  a {
    color: #fff;
    padding: 0.9em 2em;
    text-decoration: none;
  }
  svg {
    width: 20px;
    height: 16px;
  }
}
/* ----------------------------------------
Compornent
-----------------------------------------*/
.c-gnav {
  font-weight: 900;
  font-size: clamp(12px, 1vw, 16px);
  /* padding: 1em !important; */
}
/* ----------------------------------------
Utility
-----------------------------------------*/

/* ----------------------------------------
Header
-----------------------------------------*/
.l-header__body {
  @media screen and (max-width: 999px) {
    display: flex;
    flex-direction: row-reverse;
    padding-left: 0;
  }
}
.l-header__logo {
  display: inline-flex;
  font-size: clamp(12px, 1vw, 16px);
  height: 5.6em;
  padding-left: 2.6em;
  padding-right: 6em;
  background-color: #fff;
  border-radius: 0 5em 0 0;
  @media screen and (max-width: 999px) {
    /* display: flex;
    background: none;
    padding-left: 0;
    padding-right: 0; */
  }
}
.c-gnav {
  .menu-item-42 {
    height: 4em;
    transform: translateY(-0.5em);
    margin-left: clamp(20px, 2.7vw, 40px);
    span {
      display: none;
    }
    a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5.4em;
      height: 4em;
      background-color: var(--green);
      border-radius: 0 4em 4em 5em;
      padding: 0;

      &::before {
        content: "";
        background: url(images/icon-insta-white.png) no-repeat center / contain;
        display: block;
        width: 1.9em;
        height: 1.9em;
      }
    }
  }
  .menu-item-45 {
    height: 4em;
    margin-right: clamp(20px, 2.7vw, 40px);
    margin-left: -0.5em;
    transform: translateY(0.5em);
    a {
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      gap: 0.4em;
      border-radius: 5em 4em 4em 0;
      background-color: var(--blue);
      padding: 1em 2.2em;
      &::before {
        font-family: "Material Icons";
        content: "\e158";
        font-size: 1.4em;
      }
    }
  }
}
.p-drawer {
  background-color: #fff;
  color: var(--blue);
}
.c-iconBtn__icon svg:not([fill]) {
  fill: var(--blue);
}
/* ----------------------------------------
Common
-----------------------------------------*/
.l-wrapper {
  background: url(images/bg-img01.png) no-repeat right top / 34.7vw auto;
  .home & {
    background: none;
  }
}
.home .l-container {
  width: 83vw;
  width: 100%;
  max-width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  @media screen and (max-width: 768px) {
    width: 100%;
    /* width: 90vw; */
  }
}

.l-container__1200 {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.l-container__1000 {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.l-container__800 {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.l-container__full {
  width: 100vw;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}
.home .l-header {
  position: fixed !important;
}
.l-header__center {
  padding-top: 20px;
}
.l-content {
  padding-bottom: 100px;
}
.p-topArea {
  min-height: 25vh;
}
h3.wp-block-heading {
  display: flex;
  align-items: center;
  color: var(--blue);
  font-weight: 800;
  &::before {
    display: block;
    content: "";
    width: 1.4em;
    height: 0.2em;
    background-color: var(--orange);
    transform: rotate(-45deg);
    margin-right: 0.2em;
  }
}
h4.wp-block-heading {
  display: flex;
  align-items: center;
  gap: 0.5em;
  &::before {
    display: block;
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 50px;
    background-color: var(--green);
  }
}
/* ----------------------------------------
TOPページ
-----------------------------------------*/
.home {
  h2 {
    font-size: clamp(30px, 2.8vw, 40px);
    margin-bottom: 1em;
  }
  .l-article {
    max-width: 100% !important;
  }
}
.top-kv {
  position: relative;
  /* margin-left: calc(-50vw + 600px);
  margin-right: calc(-50vw + 600px); */
  padding: 0;
  @media screen and (max-width: 1200px) {
    /* margin-left: -9vw;
    margin-right: -9vw; */
  }
  @media screen and (max-width: 560px) {
    margin-left: -5vw;
    margin-right: -5vw;
  }
}
.top-news,
.top-about,
.top-insta {
  position: relative;
  margin-top: 10vw;
  /* margin-left: -9vw;
  margin-right: -9vw;
  padding-left: 9vw;
  padding-right: 9vw; */
  @media screen and (max-width: 560px) {
    /* margin-left: -5vw;
    margin-right: -5vw;
    padding-left: 5vw;
    padding-right: 5vw; */
  }
}
.top-kv {
  .top-slider {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 22vw;
    z-index: -1;
    @media screen and (max-width: 560px) {
      padding-top: 53vw;
    }

    .slick-slider {
      padding: 0 !important;
    }
  }
  .top-kv-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* .dot01,
    .dot02,
    .dot03,
    .dot04,
    .dot05,
    .dot06,
    .dot07,
    .dot08,
    .dot09 {
    } */
    .dot01 {
      position: absolute;
      width: 8.9vw;
      top: min(176px, 12vw);
      left: 3.3%;
      @media screen and (max-width: 560px) {
        width: 22vw;
        top: min(161px, 41.2vw);
        left: -2.5%;
      }
    }
    .dot02 {
      position: absolute;
      width: 9.4vw;
      top: min(84px, 5.8vw);
      left: 24.8%;
      @media screen and (max-width: 560px) {
        width: 26.9vw;
        top: min(54px, 13.8vw);
        left: 34.3%;
      }
    }
    .dot03 {
      position: absolute;
      width: 3.8vw;
      top: min(186px, 12.9vw);
      left: 48%;
      @media screen and (max-width: 560px) {
        width: 9.4vw;
        top: min(155px, 39.7vw);
        left: 82.5%;
      }
    }
    .dot04 {
      position: absolute;
      width: 2.1vw;
      top: min(135px, 9.4vw);
      left: 57.1%;
      @media screen and (max-width: 560px) {
        width: 5.3vw;
        top: min(123px, 31.5vw);
        left: 91%;
      }
    }
    .dot05 {
      position: absolute;
      width: 3.4vw;
      top: min(381px, 26.4vw);
      left: 67.3%;
      @media screen and (max-width: 560px) {
        width: 8.4vw;
        top: min(388px, 99.4vw);
        left: 82.8%;
      }
    }
    .dot06 {
      position: absolute;
      width: 3.4vw;
      top: min(741px, 51.5vw);
      left: 3.9%;
      @media screen and (max-width: 560px) {
        width: 8.4vw;
        top: min(474px, 121.5vw);
        left: 7.6%;
      }
    }
    .dot07 {
      position: absolute;
      width: 2.9vw;
      top: min(736px, 51.1vw);
      left: 18.4%;
      @media screen and (max-width: 560px) {
        width: 8.7vw;
        top: min(450px, 115.3vw);
        left: 16.1%;
      }
    }
    .dot08 {
      position: absolute;
      width: 7.3vw;
      top: min(734px, 51vw);
      left: 40%;
      @media screen and (max-width: 560px) {
        width: 17.9vw;
        top: min(543px, 139.2vw);
        left: 26.1%;
      }
    }
    .dot09 {
      position: absolute;
      width: 9.3vw;
      top: min(724px, 50.3vw);
      top: 50.3vw;
      left: 60.4%;
      @media screen and (max-width: 560px) {
        width: 23vw;
        top: min(473px, 121.2vw);
        left: 71.5%;
      }
    }
  }
  .top-kv-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    .text01 {
      width: min(397px, 27.5vw);
      position: absolute;
      top: min(189px, 13.1vw);
      left: 14.3%;
      @media screen and (max-width: 560px) {
        width: 55.6vw;
        top: min(112px, 28.7vw);
        left: 9%;
      }
    }
    .text02 {
      width: min(436px, 30.2vw);
      position: absolute;
      top: min(139px, 9.6vw);
      left: 57.3%;
      @media screen and (max-width: 560px) {
        width: min(240px, 61.5vw);
        top: min(480px, 117vw);
        left: 31.5%;
      }
    }
  }
}
.top-news {
  margin-top: 0;
  background: url(images/top-news-bg01.png) no-repeat top 18px right 2vw /
    clamp(95px, 10vw, 120px) auto;
  @media screen and (max-width: 560px) {
    margin-top: -5vw !important;
  }
  &::before {
    position: absolute;
    top: -8vw;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 8.5vw;
    background: url(images/bg-blue01.png) no-repeat center bottom -1px/ 100%
      auto;
  }
  &::after {
    position: absolute;
    bottom: -89px;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 90px;
    background: url(images/bg-blue02.png) no-repeat center top -1px/ 100% 100%;
  }
  .p-postList__item {
    border: none;
  }
}
.top-about {
  padding-bottom: 10vw !important;
  @media screen and (max-width: 560px) {
    padding-bottom: 60px !important;
  }
  &::before {
    position: absolute;
    left: 5vw;
    top: -13vw;
    display: block;
    content: "";
    width: clamp(177px, 24vw, 338px);
    height: clamp(110px, 15vw, 215px);
    background: url(images/top-news-bg02.png) no-repeat center / contain;
    @media screen and (max-width: 560px) {
      left: 20px;
      top: -40px;
    }
  }
}
.top-insta {
  padding-bottom: 10vw !important;
  @media screen and (max-width: 560px) {
    padding-bottom: 100px !important;
  }
  &::before {
    position: absolute;
    top: -6.5vw;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 6.5vw;
    background: url(images/bg-yellow01.png) no-repeat center bottom -1px/ 100%
      auto;
  }
  &::after {
    position: absolute;
    left: 5vw;
    top: -13vw;
    display: block;
    content: "";
    width: clamp(100px, 14vw, 200px);
    height: clamp(116px, 16.3vw, 236px);
    background: url(images/top-insta-bg01.png) no-repeat center / contain;
    @media screen and (max-width: 560px) {
      left: 5px;
      top: -80px;
    }
  }
  /* &::after {
    position: absolute;
    bottom: -6.5vw;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 6.5vw;
    background: url(images/bg-yellow02.png) no-repeat center top -1px/ 100% auto;
  } */
}
.top-access {
  position: relative;
  margin-top: 0;
  &::before {
    position: absolute;
    top: -6.1vw;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 6.5vw;
    background: url(images/bg-blue03.png) no-repeat center top / 100% auto;
  }
  &::after {
    position: absolute;
    right: 4vw;
    top: -13vw;
    display: block;
    content: "";
    width: clamp(100px, 15.7vw, 226px);
    height: clamp(130px, 20vw, 289px);
    background: url(images/top-access-bg01.png) no-repeat center / contain;
    @media screen and (max-width: 560px) {
      right: 10px;
      top: -80px;
    }
  }
}
.top-contact {
  position: relative;
  margin-top: 0;
  padding-top: 10vw !important;
  @media screen and (max-width: 560px) {
    padding-top: 100px !important;
  }
  .contact_full {
    width: 100%;
  }
  &::after {
    position: absolute;
    top: -1px;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 6.5vw;
    background: url(images/bg-blue02.png) no-repeat center top -1px/ 100% auto;
  }
}
/* ----------------------------------------
下層ページ
-----------------------------------------*/
.p-topArea {
  text-align: left;
}
.p-topArea.-noimg {
  background: none;
}
.c-pageTitle__main {
  text-shadow: none;
  color: #22b573;
  font-size: 2.5rem !important;
  @media screen and (max-width: 560px) {
    font-size: 2rem;
  }
  &::first-letter {
    color: var(--blue);
  }
}
.blog {
  .c-pageTitle__main {
    &::first-letter {
      color: var(--orange);
    }
  }
}
.single-post {
  .c-pageTitle__main {
    font-size: 2rem !important;
    @media screen and (max-width: 560px) {
      font-size: 1.8rem;
    }
    &::first-letter {
      color: var(--blue);
    }
  }
}
.p-postList.-type-card {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0;
  gap: clamp(20px, 2.8vw, 40px);
}
.p-postList.-type-card .p-postList__item {
  background-color: #fff;
  padding: 1.5em;
  border: 5px solid #22b573;
  flex-basis: calc(33.3% - 2em) !important;
  border-radius: 2em;
  margin-bottom: 0;
  .home & {
    border: none;
  }

  @media screen and (max-width: 768px) {
    flex-basis: 100% !important;
    margin-bottom: 0;
  }
}
.p-postList__meta {
  color: #22b573;
  font-weight: 600;
}