@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* CSSカスタムプロパティ（サイト全体を一括管理する為の設定） */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
:root {
  --base-bg-color: #fff;
  /* 背景カラー */
  --base-font-color: #3C3C3C;
  /* フォントカラー */
  --base-font-size-pc: 18px;
  /* フォントサイズ（パソコン用） */
  --base-font-size-sp: 13px;
  /* フォントサイズ（スマホ用：768px未満） */

  --header-height: 100px;
  /* ヘッダーの高さ */
  --header-shrink-height: 70px;
  /* ヘッダーの高さ（縮小時） */
  --header-height-sp: 55px;
  /* ヘッダーの高さ */
  --header-bg: #fff;
  /* ヘッダーの背景カラー */
  --header-shadow: 0px 3px 30px rgba(89, 115, 126, 0.5);
  /* ヘッダーのシャドウ */
  --header-padding-left: 72px;
  /* ヘッダーの左余白 */
  --header-logo-height: 37px;
  /* ヘッダーのロゴの高さ */
  --header-inquiry-width: 250px;
  /* ヘッダーのお問い合わせボタンの幅 */

  --footer-bg: var(--bs-primary);
  /* フッターの背景カラー */
  --footer-color: #fff;
  /* フッターの文字カラー */
}

body {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  background: var(--base-bg-color);
  color: var(--base-font-color);
  font-size: var(--base-font-size-sp);
}

@media (min-width: 769px) {
  body {
    font-size: var(--base-font-size-pc);
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* header */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
header {
  height: var(--header-height-sp);
  background: var(--header-bg);
  box-shadow: var(--header-shadow);

  .outer_brand {
    img {
      height: 25px;
      width: auto;
    }

    .logo_divider {
      font-size: 1.2rem;
      color: #3C3C3C;
      margin: 0 0.5rem;
    }
  }

  .outer_header_buttons {

    .btn_download,
    .btn_inquiry {
      background-color: #2B4495;
      border: none;
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 5px;
      flex: 1;
    }

    .btn_download:hover,
    .btn_download:active,
    .btn_download:focus {
      background-color: #2B4495 !important;
      opacity: 0.8;
    }

    .btn_inquiry {
      background-color: #001D6E;
    }

    .btn_inquiry:hover,
    .btn_inquiry:active,
    .btn_inquiry:focus {
      background-color: #001D6E !important;
      opacity: 0.8;
    }

    img {
      width: 1.4rem;
      margin-bottom: 2px;
      filter: brightness(0) invert(1);
    }

    span {
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 200;
      font-style: normal;
      font-size: 10px;
      letter-spacing: 0em;
      margin-left: 0;
      white-space: nowrap;
      color: #fff;
      line-height: 1.2;
    }
  }
}

@media (min-width: 769px) {
  header {
    height: var(--header-height);
    transition: height 0.3s;

    .outer_brand {
      img {
        height: var(--header-logo-height);
      }
    }

    .outer_header_buttons {
      width: 100%;
      max-width: 520px;

      .btn_download,
      .btn_inquiry {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 0 0.5rem;

        span {
          font-size: 1.0em;
          letter-spacing: 0.2em;
          margin-left: 1.0em;
          transition: font-size 0.3s;
        }
      }
    }

    &.shrink {
      height: var(--header-shrink-height);
    }
  }

  header.row {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (min-width: 1200px) {
  /* ロゴの表示切り替えなどはHTML側のクラス(d-xl-inlineなど)で制御 */
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* main_image */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#main_image {
  width: 100%;
  aspect-ratio: 670 / 1247;
  background-image: url('../img/hero_image_sp.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: background-size 4s ease, opacity 3s ease;
  position: relative;

  &.loaded {
    background-size: 110%;
    opacity: 1;
  }

  .main_title {
    position: absolute;
    top: var(--header-shrink-height);
    left: 0;
    width: 100%;
    padding: 1.5em;

    .outer_title_main {
      font-size: 10.5vw;
      color: #fff;
    }

    .outer_title_image_1 {
      width: 60%;
      margin-top: 1.2em;
    }

    .outer_title_image_2 {
      width: 55%;
      margin-top: 1em;
    }

    .outer_title_sub {
      font-size: 3.4vw;
      margin-top: 1.8em;
      color: #fff;
      line-height: 1.8em;
      letter-spacing: 0.1em;
    }
  }

  .outer_arrow {
    position: absolute;
    bottom: 0;
    left: 50%;

    img {
      width: 1.8em;
      filter: invert(47%) sepia(78%) saturate(484%) hue-rotate(151deg) brightness(99%) contrast(82%);
      margin-bottom: 1.0em;
    }
  }

  .wrapper_campaign {
    width: 55%;
    margin-top: 2.0em;
    aspect-ratio: 1;

    .outer_campaign {
      background: #ED848C;
      width: 100%;
      height: 100%;
      padding: 10px;
      border-radius: 999px;

      .inner_campaign {
        width: 100%;
        height: 100%;
        border-radius: 999px;
        border: solid 1px #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        p {
          color: #fff;
        }

        .upper {
          font-size: 6vw;
          line-height: 1.0em;
          letter-spacing: 0.2em;
        }

        .middle {
          font-size: 9.2vw;
          line-height: 0.6em;
          letter-spacing: 0.1em;
        }

        .lower {
          font-size: 0.7em;
          line-height: 1.0em;
          letter-spacing: 0.1em;
          margin-top: 0.4em;
        }
      }
    }
  }
}

@media (min-width: 769px) {
  #main_image {
    aspect-ratio: 1994 / 1122;
    background-image: url('../img/hero_image_pc.png');

    .main_title {
      top: var(--header-height);
      left: 0;
      padding-top: 6.0vw;
      padding-left: 6.5em;

      .outer_title_main {
        font-size: 5.8vw;
      }

      .outer_title_image_1 {
        width: 25vw;
        margin-top: 1.8em;
      }

      .outer_title_image_2 {
        width: 20vw;
        margin-top: 1.8em;
      }

      .outer_title_sub {
        font-size: 1.6vw;
        margin-top: 1.5em;
      }
    }
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* メインコンテンツ */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* main */
main {
  p {
    font-size: 3.5vw;
    line-height: 1.9em;
  }
}

@media (min-width: 769px) {
  main {
    p {
      font-size: inherit;
      line-height: 2.0em;
    }
  }
}

/* content_01 */
.content_01 {
  margin-bottom: 2.5em;

  .content_block {
    .thumbnail {
      width: 100%;
      height: 185px;
      object-fit: cover;
    }

    .caption {
      p {
        line-height: 2.0em;
      }
    }
  }
}

@media (min-width: 769px) {
  .content_01 {
    .content_block {
      .thumbnail {
        width: 474px;
        height: 544px;
        object-fit: cover;
      }
    }
  }
}

/* content_02 */
.content_02 {
  background: #DCE3DC;

  .caption {
    line-height: 2.2em;
  }

  .bullet_points {
    display: flex;
    flex-wrap: wrap;
    gap: 1.0em;

    li {
      font-size: 1.1em;
      text-align: left;
      padding: 0.35em 0 0.35em 2.0em;
      width: 100%;
      letter-spacing: -0.1em;
      white-space: nowrap;
      position: relative;
    }

    li:not(.concept) {
      background: #fff;

      span {
        display: inline-block;
        transform: scale(0.7, 1);
        font-size: 0.8em;
        margin: -1.3em;
      }

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 65%;
        aspect-ratio: 1;
        clip-path: polygon(0 0, 100% 0, 0 100%);
      }
    }

    &.left li {
      &:nth-child(1):before {
        background: #fccf00;
      }

      &:nth-child(2):before {
        background: #ed8599;
      }

      &:nth-child(3):before {
        background: #5dc1cf;
      }

      &:nth-child(4):before {
        background: #69bc82;
      }
    }

    &.right li {
      &:nth-child(1):before {
        background: #f4a000;
      }

      &:nth-child(2):before {
        background: #a499c9;
      }

      &:nth-child(3):before {
        background: #65a9dc;
      }
    }

    li.concept {
      color: #fff;
      font-family: "Roboto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 300;
      font-style: normal;
      letter-spacing: 0;
      border: solid 1px #fff;
      text-align: center;
      margin-top: 0.8em;
    }
  }
}

@media (min-width: 769px) {
  .content_02 {
    .bullet_points {
      li:not(.concept) {
        letter-spacing: 0.1em;

        span {
          transform: scale(1, 1) !important;
          font-size: 1.0em !important;
          margin: 0 !important;
        }
      }

      li.concept {
        letter-spacing: 0.1em;
        border: none;
        text-align: center;
        margin-top: 0.8em;

        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          height: 65%;
          aspect-ratio: 1;
          background: #fff;
          --b: 1px;
          clip-path: polygon(0 0, 100% 0, 0 100%, 0 0, var(--b) var(--b), var(--b) calc(100% - var(--b)/tan(22.5deg)), calc(100% - var(--b)/tan(22.5deg)) var(--b), var(--b) var(--b));
        }

        &:after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          height: 65%;
          aspect-ratio: 1;
          background: #fff;
          --b: 1px;
          clip-path: polygon(100% 100%, 100% 0, 0 100%, 100% 100%, calc(100% - var(--b)) calc(100% - var(--b)), calc(var(--b)/tan(22.5deg)) calc(100% - var(--b)), calc(100% - var(--b)) calc(var(--b)/tan(22.5deg)), calc(100% - var(--b)) calc(100% - var(--b)));
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .content_02 {
    .bullet_points {
      li {
        font-size: calc(8px + 0.5vw);
      }

      li.concept {
        margin-top: 0;
      }
    }
  }
}

/* content_03 */
.content_03 {
  .outer_catchphrase {
    position: relative;

    .catchphrase {
      position: absolute;
      top: 2.0em;
      right: 2.0em;
      width: 45%;
    }

    .btn_inquiry {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 40px;
      }

      span {
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 0.8em;
        margin-top: 0.5em;
      }
    }
  }

  .caption_additional {
    font-size: 0.75em;
  }
}

@media (min-width: 769px) {
  .content_03 {
    .outer_catchphrase {
      .btn_inquiry {
        img {
          width: 60px;
        }

        span {
          font-size: 1.2em;
        }
      }
    }

    .caption_additional {
      font-size: calc(5px + 1.2vw);
      margin: 1.8em 0;
    }
  }
}

/* PLANNING ITEM */
.planning_item {
  .title {
    width: 55%;
  }

  .tools {
    li {
      .outer_icon {
        width: 50%;
        aspect-ratio: 1;
        border-radius: 50%;
        position: relative;

        .inner_icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -60%);
          width: 70%;
          height: 55%;
          display: flex;
          align-items: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .title {
          position: absolute;
          left: 0;
          bottom: 6%;
          width: 100%;
          background: var(--bs-secondary);
          padding: 3% 0 2% 0;
          font-size: 1.0em;
          font-weight: 500;
        }
      }

      p {
        font-size: 0.8em;
        margin-top: 7%;
        margin-bottom: 20%;
        line-height: 2.2em;
      }
    }
  }
}

@media (min-width: 769px) {
  .planning_item {
    .title {
      width: 30%;
    }
  }

  .tools {
    li {
      .outer_icon {
        .title {
          font-size: calc(10px + 0.5vw);
        }
      }

      p {
        height: 100px;
        margin-bottom: 0;
      }
    }
  }
}

/* caption */
.outer_caption {
  .inner_caption {
    padding: 1.8em 0;
    line-height: 1.8em;
    font-size: 1.1em;
  }
}

@media (min-width: 769px) {
  .outer_caption {
    .inner_caption {
      padding: 1.8em 0;
      line-height: 1.8em;
      font-size: 1.3em;
      font-weight: 500;
    }
  }
}

/* flow_chart */
.flow_chart_caption {
  background: #FFF;
  padding: 10% 0;

  .title {
    width: 45%;
  }
}

.flow_chart {
  padding: 3.5em 0;
  background: #DDE2DD;

  .list_flow {
    li+li {
      margin-top: 2.0em;
    }
  }

  .content {
    background: #FFF;
    padding: 1.0em;

    .head {
      border-bottom: dashed 1px #999;

      .number {
        font-family: "Oswald", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        color: var(--bs-secondary);
        font-size: 3.0em;
        line-height: 0.75em;
      }

      .title {
        padding-top: 0;
        margin-left: 1.0em;
        line-height: 0.8em;
        font-size: 1.4em;
        font-weight: 500;

        p {
          font-family: "Noto Sans JP", sans-serif;
          font-optical-sizing: auto;
          font-weight: 300;
          font-style: normal;
          font-size: 0.6em;
          text-align: left;
          margin-top: 0.2em;
        }
      }
    }

    .caption {
      text-align: left;
      font-size: 0.7em;
      padding: 0.7em 0;
      line-height: 1.8em;
    }
  }
}

@media (min-width: 769px) {
  .flow_chart_caption {
    background: #DDE2DD;
    padding: 5%;

    .title {
      width: 30%;
    }
  }

  .flow_chart {
    .content {
      .caption {
        font-size: 0.7em;
        line-height: 2.0em;
      }
    }
  }
}

/* sample_design */
.sample_design {
  padding: 2em 0;
  background: #D4D3CA;

  .title_image_1 {
    width: 50%;
    margin: 1.5em 0;
  }

  .title_image_2 {
    width: 75%;
    margin-bottom: 1.5em;
  }

  .sample_image {
    background: #FFF;

    img {
      width: 100%;
    }
  }
}

@media (min-width: 769px) {
  .sample_design {
    h1 {
      margin-top: 1.6em;
      font-size: 2.8em;
    }

    .title_image_1 {
      width: 40%;
      margin: 2.4em 0;
    }

    .title_image_2 {
      width: 50%;
      margin-bottom: 2.0em;
    }
  }
}

/* inquiry_tel */
.wrapper_tel {
  margin-bottom: 3.0em;

  .outer_tel {
    .outer_number {
      img {
        width: 1.6em;
      }

      .number {
        color: var(--bs-primary);
        font-family: "Roboto", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        font-size: 1.6em;
        margin-left: 0.6em;
        letter-spacing: 0.1em;
      }
    }

    p {
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-size: 0.8em;
      margin-bottom: 0;
    }
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* footer */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
footer {
  padding: 2.0em 0;
  background: var(--footer-bg);
  color: var(--footer-color);
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  .footer_logos {
    padding: 0 20px;

    .logo_tep,
    .logo_cyber {
      height: 18px;
      width: auto;
    }

    @media (min-width: 769px) {

      .logo_tep,
      .logo_cyber {
        height: 35px;
      }
    }

    .logo_divider {
      color: #fff;
      font-size: 1.2em;
    }
  }

  .wrapper_link {
    width: 100%;
    margin: 2.0em 0;

    .outer_link {
      width: 50%;
      font-size: 0.9em;

      img {
        width: 3.0em;
      }
    }
  }

  .copyright {
    font-size: 0.7em;
  }
}