@charset "UTF-8";

:root {
  --red: #be113c;
  --green: #0a6a60;
  --cream: #ffe6c2;
  --purple: #3a359f;
  --orange: #ed6d20;
  --brown: #5c4321;
  --commonFont: #1c1c1c;
  --font30: clamp(0.8rem, 4vw, 1.875rem);
  --font33: clamp(0.88rem, 4.4vw, 2.063rem);
  --font35: clamp(0.933rem, 4.67vw, 2.188rem);
  --font37: clamp(0.987rem, 4.93vw, 2.313rem);
  --font39: clamp(1.04rem, 5.2vw, 2.438rem);
  --font45: clamp(1.2rem, 6vw, 2.813rem);
  --font48: clamp(1.28rem, 6.4vw, 3rem);
  --font50: clamp(1.334rem, 0.001rem + 6.67vw, 3.125rem);
  --font55: clamp(1.467rem, 7.33vw, 3.438rem);
}

/* 共通 */

html {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5{
  font-weight: 500;
}

body {
  overflow-x: hidden;
  margin: 0 auto;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

aside {
  display: none;

  a {
    display: none;
  }
}

main{
  width: 100%;
}

header {
  display: none;
}

section,
.relative {
  position: relative;
}

section {
  text-align: center;
}

.contents {
  color: var(--commonFont);
  font-size: clamp(0.772rem, -0.001rem + 3.87vw, 1.813rem);
}

.pc_wrapper {
  overflow-x: hidden;
}

.wrapper {
  padding: 0 clamp(0.625rem, 0.16rem + 2.33vw, 1.25rem);
}

.red {
  color: var(--red);
}
.cream {
  color: var(--cream);
}
.green {
  color: var(--green);
}
.purple {
  color: var(--purple);
}
.orange {
  color: var(--orange)
}

.white-line {
  background-image: linear-gradient(0deg, transparent 0.1em, #ffffff 0.1em, #ffffff 0.5em, transparent 0.5em);
}

.space-reduce {
  letter-spacing: -40%;
}

.mv {
  line-height: 0;
  .note {
    position: absolute;
    top: 35.3%;
    left: 2.5%;
    width: clamp(3.813rem, -0.001rem + 19.07vw, 8.938rem);
    height: clamp(3.375rem, 0.073rem + 16.51vw, 7.813rem);
  }
  .pen {
    position: absolute;
    top: 53.5%;
    right: 5.5%;
    width: clamp(2.75rem, 0.006rem + 13.72vw, 6.438rem);
    height: clamp(4.313rem, 0.126rem + 20.93vw, 9.938rem);
  }
  .webcatalog {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(11.063rem, 0.086rem + 54.88vw, 25.813rem);
    height: clamp(2.938rem, 0.054rem + 14.42vw, 6.813rem);
  }
  .kiso {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(12.875rem, 0.038rem + 64.19vw, 30.125rem);
    height: clamp(3.125rem, 0.009rem + 15.58vw, 7.313rem);
  }
  .mv_num {
    position: absolute;
    top: 14%;
    right: 3%;
    width: clamp(12.5rem, 0.081rem + 62.09vw, 29.188rem);
    height: clamp(4.313rem, 0.033rem + 21.4vw, 10.063rem);
  }
  .logo{
    position: absolute;
    width: 40%;
    height: 12%;
    background-color: #fff;
    border-radius: 0 0 30px 0;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;

    a{
      display: inline-block;
      width: 81.3%;
      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }
}

/* .slide-bottom,
.slide-left,
.slide-right,
.note,
.pen,
.webcatalog,
.kiso{
  visibility: hidden;
} */

/* chapterone */

.link-contents{
  background-image: linear-gradient(#fff8b5 1px, transparent 1px), linear-gradient(90deg, #fff8b5 1px, transparent 1px);
  background-size: 0.79em 0.79em;
  background-color: #fffcdd;
  padding: 2.6em 0 3.1em;

  h2 {
    line-height: 1.5;
    font-size: var(--font39);
    margin: 0 auto;
    padding-bottom: 1.8em;
  }

  ul {
    li {
      margin-bottom: 7px;
    }
  }
}

.future {
  background-image: radial-gradient(#ffe38d 2px, transparent 2px), radial-gradient(#ffe38d 2px, transparent 2px);
  background-size: 16px 16px;
  background-position: 0 0, 7.5px 7.5px;
  background-color: #ffecb3;
  padding-top: 2.76em;
  padding-bottom: clamp(2.813rem, 0.115rem + 13.49vw, 6.438rem);

  h2 {
    margin: 0;
    font-size: var(--font45);
  }
  h2::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/homesolar.png);
    background-size: cover;
    top: 73%;
    left: 4%;
    transform: rotate(346deg) scale(1.1);
    width: clamp(2.813rem, 0.022rem + 13.95vw, 6.563rem);
    height: clamp(1.875rem, 0.061rem + 9.07vw, 4.313rem);
  }

  h2::after {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/chapterone/piggy_bank.png);
    background-size: cover;
    top: 18%;
    right: 1%;
    width: clamp(3.25rem, 0.087rem + 15.81vw, 7.5rem);
    height: clamp(4.313rem, 0.08rem + 21.16vw, 10rem);
  }


  .prediction {
    background-color: #a58152;
    border-radius: clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) 0 0;
    color: #fff;
    padding: 1.47em clamp(1.25rem, 0.087rem + 5.81vw, 2.813rem) 2.41em;

    h3 {
      margin: 0 auto;
      font-size: var(--font37);
      border-bottom: 2px dotted;
      padding-top: 0;
      padding-bottom: 0.5em;
      line-height: 1.2;

      .cream {
        font-size: var(--font50);
      }
    }
    h3::before{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/coin.png);
      background-size: cover;
      top: -14%;
      left: -7.9%;
      width: clamp(2.5rem, 0.035rem + 12.33vw, 5.813rem);
      height: clamp(3.063rem, 0.132rem + 14.65vw, 7rem);
    }
    h3::after{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/pouch.png);
      background-size: cover;
      top: -45%;
      right: -3.9%;
      width: clamp(2.875rem, 0.038rem + 14.19vw, 6.688rem);
      height: clamp(2.875rem, -0.009rem + 14.42vw, 6.75rem);
    }

    p {
      text-align: left;
    }

    figure {
      margin: 0 auto;
      line-height: 1;

      figcaption {
        padding-top: 1em;
        line-height: 1;
        font-size: clamp(0.667rem, 3.33vw, 1.563rem);

        .source {
          display: inline-block;
          margin-top: 0.66em;
          font-size: clamp(0.48rem, 2.4vw, 1.125rem);
        }
      }
    }

    ul {
      text-align: left;
      margin: 0.5em auto 1em;

      li {
        display: flex;
        align-items: center;
        position: relative;
        font-size: clamp(0.719rem, -0.049rem + 3.84vw, 1.75rem);
        padding-left: 0.7em;
        .space-reduce {
          letter-spacing: -20%;
        }
      }
      li::before {
        display: inline-block;
        content: "●";
        color: var(--cream);
        font-size: 0.6em;
        line-height: 1.5;
        padding-right: 0.4em;
      }
    }

    h4 {
      margin: 0 0.788em;
      padding: 1.31em 0 0.46em;
      border-bottom: 2px dotted #fff;
      font-size: var(--font33);
      letter-spacing: -0.5px;
      z-index: 2;
    }

    .concern {
      margin: 0.5em auto;
      letter-spacing: -1px;
    }

  }
  .minus {
    background-color: #886a42;
    border-radius: 0 0 clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) ;
    color: #fff;
    padding: 0.8em clamp(1.25rem, 0.087rem + 5.81vw, 2.813rem) 2.41em;

    h4 {
      margin: 0 0.788em;
      padding: 0 0 0.46em;
      border-bottom: 2px dotted #fff;
      font-size: clamp(0.813rem, -0.025rem + 4.19vw, 1.938rem);
      letter-spacing: -0.5px;
      z-index: 2;
    }

    p {
      font-size: clamp(0.688rem, -0.01rem + 3.49vw, 1.625rem);
    }

    .paragraph {
      position: relative;
      background-color: #fff5d7;
      border-radius: clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) ;
      color: var(--commonFont);
      margin: clamp(2.063rem, -0.124rem + 10.93vw, 5rem) clamp(0.188rem, -0.092rem + 1.4vw, 0.563rem) 0;
      padding: clamp(1.5rem, -0.035rem + 7.67vw, 3.563rem) clamp(1.313rem, -0.129rem + 7.21vw, 3.25rem) clamp(1.188rem, -0.068rem + 6.28vw, 2.875rem);

      h5 {
        line-height: 1;
        margin: 0 auto;
        font-size: var(--font35);
        color: var(--brown);
      }

      p {
        display: inline-block;
        text-align: left;
        margin: 0.75em auto 0;
      }
    }

    .paragraph::before {
      position: absolute;
      content: "";
      display: block;
      background-color: #fff5d7;
      border-radius: 50% / 100% 100% 0 0;
      top: -16.5%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(3.733rem, 18.67vw, 8.75rem);
      height: calc(clamp(3.733rem, 18.67vw, 8.75rem) / 2);
    }

    .fitst-paragraph::after {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/minus_graph.png);
      background-size: cover;
      top: -6%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(1.625rem, 0.044rem + 7.91vw, 3.75rem);
      height: clamp(1.313rem, -0.036rem + 6.74vw, 3.125rem);
    }
    .second-paragraph::after {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/minus_saving.png);
      background-size: cover;
      top: -7%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(1.625rem, -0.003rem + 8.14vw, 3.813rem);
      height: clamp(1.438rem, -0.097rem + 7.67vw, 3.5rem);
    }
    .third-paragraph::after {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/minus_home.png);
      background-size: cover;
      top: -7.5%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(1.688rem, 0.013rem + 8.37vw, 3.938rem);
      height: clamp(1.438rem, -0.004rem + 7.21vw, 3.375rem);
    }
  }

  .minus::after {
    position: absolute;
    content: "";
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background-color: #886a42;
    bottom: -2.5%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(2.459rem, 0.001rem + 12.29vw, 5.762rem);
    height: clamp(1.146rem, 0.001rem + 5.73vw, 2.686rem);
    z-index: 1;
  }

  .merit {
    margin: 0 auto;
    margin-top: 3.18em;
    font-size: var(--font37);
    letter-spacing: -0.5px;

    .red {
      display: inline-block;
      font-size: var(--font48);
      text-indent: -0.5em;
    }

  }
  .merit::before{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/prologue/human_r.png);
      background-size: cover;
      top: -17%;
      right: 3.1%;
      transform: scale(0.9);
      width: clamp(0.938rem, 0.054rem + 4.42vw, 2.125rem);
      height: clamp(3.625rem, -0.003rem + 18.14vw, 8.5rem);
  }
  .merit::after{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/prologue/human_l.png);
      background-size: cover;
      top: -13%;
      left: 1.8%;
      transform: scale(0.9);
      width: clamp(1.125rem, -0.038rem + 5.81vw, 2.688rem);
      height: clamp(3.5rem, 0.012rem + 17.44vw, 8.188rem);
  }

  .merit__h4 {
    display: inline-block;
    font-size: var(--font33);
    line-height: 1;
    padding-bottom: 0.6em;
    border-bottom: 2px dotted var(--orange);
    margin-bottom: 0;
  }
  .merit__dig {
    margin-bottom: 0;
  }
}

.future::after {
  position: absolute;
  content: "";
  display: block;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: #bd3758;
  bottom: -0.5%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(1.76rem, 8.8vw, 4.125rem);
  height: clamp(0.961rem, 0.002rem + 4.8vw, 2.25rem);
  z-index: 1;
}

.payment {
  background-color: #fdd1dc;
  padding-bottom: clamp(2.75rem, 0.099rem + 13.26vw, 6.313rem);

  h2 {
    margin-top: 0;
    padding-top: clamp(2.188rem, -0.045rem + 11.16vw, 5.188rem);
    line-height: 1;
    font-size: var(--font50);
    background-image: linear-gradient(0deg, #ffffff 0.5em, transparent 0.5em);
  }

  .circle {
    width: clamp(16.655rem, 83.27vw, 39.035rem);
    height: clamp(16.655rem, 83.27vw, 39.035rem);
    margin: 0 auto;
    background-image: linear-gradient(#ffffff, #ffffff 70%, #fffdc8 70%, #fffdc8);
    border-radius: 50%;
    margin-top: clamp(2.438rem, -0.074rem + 12.56vw, 5.813rem);
    box-shadow: min(1vw, 6px) min(1vw, 6px) 0px 0px rgba(252,174,193,1.00),
            max(-1vw, -6px) max(-1vw, -6px) 0px 0px rgba(252,174,193,1.00);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .balloon {
      position: absolute;
      background-size: cover;

      &.old {
        top: -3%;
        right: -5.5%;
        background-image: url(../img/chapterone/old_balloon.png);
        color:#fff;
        p {
          padding: 1.21em 1.05em 1.37em 1.19em;
        }
      }
      &.new {
        top: -7.5%;
        right: -7.5%;
        background-image: url(../img/chapterone/new_balloon.png);
        color: #ffe761;
        p {
          padding: 1.46em 0.78em 1.58em 0.9em;
        }
      }
      p {
        font-size: clamp(1.093rem, 5.47vw, 2.563rem);
        margin: 0 auto;
        line-height: 1.2;
      }
    }

    h3 {
      font-size: var(--font45);
      margin: clamp(0.625rem, -0.166rem + 3.95vw, 1.688rem) auto 0;
      line-height: 1;

      .circle-small {
        font-size: var(--font35);
      }
      .red {
        font-size: clamp(1.147rem, -0.046rem + 5.97vw, 2.75rem);
        margin: clamp(0.813rem, -0.164rem + 4.88vw, 2.125rem) auto 0;
      }
    }

    .illust {
      width: clamp(6.375rem, -0.044rem + 32.09vw, 15rem);
      line-height: 1;
      margin: 0 auto;
    }

    .illust.saving{
      width: clamp(7.438rem, 0.042rem + 36.98vw, 17.375rem);
    }

    .circle__paragraph {
      font-size: clamp(0.72rem, 3.6vw, 1.688rem);
      letter-spacing: -1px;
      margin-bottom: 0;
      margin-top: 0.73em;
    }

    .result {
      line-height: 1;
      p {
        font-size: clamp(0.72rem, 3.6vw, 1.688rem);
        margin: clamp(1.625rem, -0.142rem + 8.84vw, 4rem) auto clamp(0.375rem, -0.09rem + 2.33vw, 1rem);
      }
      .reslut__show {
        margin: 0 auto!important;
        font-size: clamp(1.413rem, 7.07vw, 3.313rem);
        .result__big {
          font-size: clamp(2.053rem, 10.27vw, 4.813rem);
        }
      }
    }

    .result::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/kirakira_l.png);
      background-size: cover;
      top: 55%;
      left: -35%;
      width: clamp(1.625rem, 0.09rem + 7.67vw, 3.688rem);
      height: clamp(1.563rem, 0.028rem + 7.67vw, 3.625rem);
    }
    .result::after {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/kirakira_r.png);
      background-size: cover;
      top: 56%;
      right: -38%;
      width: clamp(1.625rem, 0.183rem + 7.21vw, 3.563rem);
      height: clamp(1.656rem, 0.052rem + 8.02vw, 3.813rem);
    }
  }
  .circle.first {
    margin-top: clamp(1.375rem, -0.16rem + 7.67vw, 3.438rem);
    background-image: linear-gradient(#ffffff, #ffffff 70%, #e8e8f7 70%, #e8e8f7);
    box-shadow: min(1vw, 6px) min(1vw, 6px) 0px 0px rgba(173,194,248,1.00),
        max(-1vw, -6px) max(-1vw, -6px) 0px 0px rgba(173,194,248,1.00);

    .result {
      p {
        margin: clamp(1.188rem, -0.254rem + 7.21vw, 3.125rem) auto clamp(0.313rem, -0.106rem + 2.09vw, 0.875rem);
      }
    }
    .result::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/ga-n_l.png);
      background-size: cover;
      top: 9.5%;
      left: -83%;
      width: clamp(3.375rem, 0.073rem + 16.51vw, 7.813rem);
      height: clamp(2rem, 0.093rem + 9.53vw, 4.563rem);
    }
    .result::after {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterone/ga-n_r.png);
      background-size: cover;
      top: 9.5%;
      right: -77%;
      width: clamp(3.375rem, 0.119rem + 16.28vw, 7.75rem);
      height: clamp(2.063rem, 0.109rem + 9.77vw, 4.688rem);
    }
  }
  .circle.first::after{
    position: absolute;
    content: "";
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background-color: #bd3758;
    bottom: -9.5%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(1.438rem, 7.19vw, 3.369rem);
    height: clamp(0.734rem, -0.001rem + 3.68vw, 1.722rem);
    z-index: 1;
  }
}

.summary {
  background-image: linear-gradient(#eaeaea 1px, transparent 1px), linear-gradient(90deg, #eaeaea 1px, transparent 1px);
  background-size: 0.79em 0.79em;
  background-color: rgb(243, 243, 243, 0.9);
  padding-top: clamp(2.188rem, 0.094rem + 10.47vw, 5rem);

  h2 {
    font-size: var(--font50);
    line-height: 1;
    margin: 0 auto;
  }

  h3 {
    width: 78%;
    margin: 1em auto 0.8em;
    border-bottom: 2px dotted #909090;
    padding-bottom: 0.2em;
  }

  p {
    font-size: clamp(0.719rem, -0.049rem + 3.84vw, 1.75rem);
    text-align: left;
  }

  .summary__item {
    display: flex;
    justify-content: space-evenly;
    align-items: end;
    line-height: 1;
    padding-bottom: clamp(1.375rem, -0.02rem + 6.98vw, 3.25rem);
    border-bottom: double;
  }

  .pagination{
    display: flex;
    justify-content: space-between;
    line-height: 1;
    padding-top: clamp(0.938rem, -0.086rem + 5.12vw, 2.313rem);
    padding-bottom: clamp(1.125rem, -0.038rem + 5.81vw, 2.688rem);

    >div {
      width: 48%;

      a {
        position: relative;
        display: block;
        text-decoration: none;
        color: inherit;
        border: 1px solid;
        padding: 0.5em 0;
        border-radius: 38px;
        transition: 0.3s;
      }
      a:hover {
        box-shadow: 0 0;
        transform: translateY(3px);
      }
    }

    .back a {
      background-color: #c3ece9;
      box-shadow: 5px 5px 0px 0px rgba(94, 131, 128, 1);
    }

    .back a::after {
      position: absolute;
      content: "";
      display: block;
      clip-path: polygon(100% 100%, 0% 50%, 100% 0%);;
      background-color: var(--commonFont);
      top: 50%;
      left: 8%;
      transform: translateY(-50%);
      width: clamp(0.625rem, 0.16rem + 2.33vw, 1.25rem);
      height: clamp(0.625rem, 0.16rem + 2.33vw, 1.25rem);
    }
    .next a{
      background-color: #ffc9d7;
      box-shadow: 5px 5px 0px 0px rgba(159, 128, 136, 1);
    }
    .next a::after {
      position: absolute;
      content: "";
      display: block;
      clip-path: polygon(100% 50%, 0% 100%, 0% 0%);
      background-color: var(--commonFont);
      top: 50%;
      right: 8%;
      transform: translateY(-50%);
      width: clamp(0.625rem, 0.16rem + 2.33vw, 1.25rem);
      height: clamp(0.625rem, 0.16rem + 2.33vw, 1.25rem);
    }
  }
}

.summary::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../img/note.png);
  background-size: cover;
  top: 8.4%;
  left: 1.6%;
  width: clamp(3.813rem, -0.001rem + 19.07vw, 8.938rem);
  height: clamp(3.375rem, 0.073rem + 16.51vw, 7.813rem);
  transform: scale(0.85) rotate(6.5deg);
}

.summary::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../img/pen.png);
  background-size: cover;
  top: 7.9%;
  right: 4.1%;
  width: clamp(2.75rem, 0.006rem + 13.72vw, 6.438rem);
  height: clamp(4.313rem, 0.126rem + 20.93vw, 9.938rem);
  transform: scale(0.8) rotate(347deg);
}

footer {
  background-color: #d8d8d8;
  text-align: center;
  padding-top: clamp(0.688rem, 0.036rem + 3.26vw, 1.563rem);
  padding-bottom: clamp(0.5rem, -0.105rem + 3.02vw, 1.313rem);

  p {
      font-size: clamp(0.533rem, 2.67vw, 1.25rem);
      line-height: 1;
      margin: 0 auto;
  }
}


/*  波区切り　*/
.wave-dot {
  position: absolute;
  top: -1%;
  left: 0;
  width: 100%;
}

.wave-pink {
  position: absolute;
  top: -2%;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.wave-brown {
  position: absolute;
  top: -3%;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.lattice-path {
  background-image: linear-gradient(#e6f2f1 1px, transparent 1px), linear-gradient(90deg, #e6f2f1 1px, transparent 1px);
  background-size: 0.79em 0.79em;
  background-color: #f0fcfb;
}