@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_inquiry {
    img {
      width                   : 1.3em;
      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               : 0.65em;
      letter-spacing          : 0.2em;
      margin-left             : 0.5em;
    }
  }
}
@media (min-width: 769px) {
  header {
    height                    : var(--header-height);
    transition                : height 0.3s;
    .outer_brand {
      img {
        height                : var(--header-logo-height);
      }
    }
    .outer_inquiry {
      width                   : var(--header-inquiry-width);
      .btn_inquiry {
        display               : flex;
        align-items           : center;
        justify-content       : center;
        span {
          font-size           : 1.0em;
          letter-spacing      : 0.2em;
          margin-left         : 1.0em;
        }
      }
    }
    &.shrink {
      height                  : var(--header-shrink-height);
    }
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 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;
  margin-top                  : 6.0em;
  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;
  img {
    width                     : 12.0em;
  }
  .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;
  }
}