@charset "UTF-8";

:root {
  --red: #be113c;
  --green: #0a6a60;
  --cream: #ffe6c2;
  --perpul: #3a359f;
  --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(--perpul);
}

.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;
      }
    }
  }
}

/* prologue */

.link-contents{
  background-image: linear-gradient(#e6f2f1 1px, transparent 1px), linear-gradient(90deg, #e6f2f1 1px, transparent 1px);
  background-size: 0.79em 0.79em;
  background-color: #f0fcfb;
  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;
    }
  }
}

.misunderstanding {
  background-image: radial-gradient(#b3f1ec 2px, transparent 2px), radial-gradient(#b3f1ec 2px, transparent 2px);
  background-size: 16px 16px;
  background-position: 0 0, 7.5px 7.5px;
  background-color: #ccf6f2;
  padding-top: 2.76em;
  padding-bottom: clamp(3rem, -0.349rem + 16.74vw, 7.5rem);

  h2 {
    margin: 0;
  }
  h2::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/homesolar.png);
    background-size: cover;
    top: -15%;
    left: 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/megasolar.png);
    background-size: cover;
    top: 62%;
    right: 1%;
    width: clamp(3rem, 0.163rem + 14.19vw, 6.813rem);
    height: clamp(2.625rem, 0.067rem + 12.79vw, 6.063rem);
  }

  .impression {
    position: relative;
    background-color: #42968e;
    border-radius: clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) ;
    color: #fff;
    padding: 2.06em 1.24em 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/prologue/broken_tree.png);
      background-size: cover;
      top: 3%;
      left: -1.9%;
      width: clamp(2.438rem, 0.019rem + 12.09vw, 5.688rem);
      height: clamp(2.625rem, 0.02rem + 13.02vw, 6.125rem);
    }
    h3::after{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/prologue/broken_tree.png);
      background-size: cover;
      transform: scale(-1, 1);
      top: 3%;
      right: -1.9%;
      width: clamp(2.438rem, 0.019rem + 12.09vw, 5.688rem);
      height: clamp(2.625rem, 0.02rem + 13.02vw, 6.125rem);
    }

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

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

    figure::before{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/prologue/felling.png);
      background-size: cover;
      bottom: -17%;
      left: -6.5%;
      width: clamp(4.063rem, 0.016rem + 20.23vw, 9.5rem);
      height: clamp(4.625rem, 0.02rem + 23.02vw, 10.813rem);
    }

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

    .concern {
      margin: 0.5em auto 0;
      letter-spacing: -0.5px;
    }
    .concern::after {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/prologue/chainsaw.png);
      background-size: cover;
      bottom: -58%;
      left: 90.8%;
      width: clamp(3rem, 0.07rem + 14.65vw, 6.938rem);
      height: clamp(4rem, 0.186rem + 19.07vw, 9.125rem);
    }
  }

  .impression::after {
    position: absolute;
    content: "";
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background-color: #42968e;
    bottom: -3%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(2.438rem, -0.028rem + 12.33vw, 5.75rem);
    height: clamp(1.125rem, 0.009rem + 5.58vw, 2.625rem);
    z-index: 1;
  }

  .another {
    margin: 0 auto;
    padding-top: calc(1.18em + 20px);
    font-size: var(--font37);
    letter-spacing: -0.5px;

    .purple,
    .green {
      font-size: var(--font45);
    }

    .red {
      font-size: var(--font55);
    }

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


    .megasolar {
      background-image: url(../img/prologue/purple_background.png);
      background-size: cover;
      aspect-ratio: 628 / 353;
      margin-top: 1.79em;
      margin-right: clamp(0.813rem, 0.022rem + 3.95vw, 1.875rem);
      margin-left: clamp(0.938rem, 0.1rem + 4.19vw, 2.063rem);
      padding: 0.8em 0 1.4em;

    h4 {
      margin: 0 auto 0.51em;

      .purple{
        font-size: var(--font37);
      }
    }
    h4::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/prologue/hukidashi_trouble.png);
      background-size: cover;
      top: -47%;
      left: 10.8%;
      width: clamp(1.938rem, 0.124rem + 9.07vw, 4.375rem);
      height: clamp(1.938rem, 0.124rem + 9.07vw, 4.375rem);
    }
  }
  .megasolar::before{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/megasolar.png);
      background-size: cover;
      top: -2%;
      right: 0.8%;
      width: clamp(3rem, 0.163rem + 14.19vw, 6.813rem);
      height: clamp(2.625rem, 0.067rem + 12.79vw, 6.063rem);
  }
  .megasolar::after{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/prologue/icon_chain.png);
      background-size: cover;
      top: 61%;
      left: -3.2%;
      width: clamp(2.125rem, 0.125rem + 10vw, 4.813rem);
      height: clamp(3.125rem, 0.055rem + 15.35vw, 7.25rem);
  }
  dl {
    display: flex;
    justify-content: center;
    margin: 0.17em auto 0.32em;
    margin-right: clamp(1.188rem, -0.301rem + 7.44vw, 3.188rem);
    margin-left: clamp(1.438rem, 0.042rem + 6.98vw, 3.313rem);

    dt {
      width: 20%;
      background-color: var(--perpul);
      color: #fff;
      margin-bottom: 0.34rem;
      border-radius: clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) ;
    }
    dd{
      width: 80%;
      margin: 0;
      text-align: left;
      border-bottom: 2px dotted;
      padding-left: 0.5em;
      padding-bottom: 0.34rem;
    }
  }
  dl:last-child {
    margin-bottom: 0;
    dt {
      margin-bottom: 0;
    }
    dd {
      border-bottom: none;
      padding-bottom: 0;
    }
  }
  .homesolar {
    background-color: #fffddc;
    border-radius: clamp(1.067rem, 5.33vw, 2.5rem);
    margin-top: 1.79em;
    margin-right: clamp(1.063rem, 0.179rem + 4.42vw, 2.25rem);
    margin-left: clamp(0.938rem, 0.1rem + 4.19vw, 2.063rem);
    padding: 0.94em 0 1.4em;
    box-shadow: clamp(0.188rem, 0.048rem + 0.7vw, 0.375rem) clamp(0.188rem, 0.048rem + 0.7vw, 0.375rem) 0px 0px rgba(167,216,212,1.00);

    h4 {
      margin: 0 auto 0.51em;

      .green{
        font-size: var(--font37);
      }
    }
  }
  .homesolar::before{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/homesolar.png);
      background-size: cover;
      top: 9%;
      left: -2.2%;
      width: clamp(2.813rem, 0.022rem + 13.95vw, 6.563rem);
      height: clamp(1.875rem, 0.061rem + 9.07vw, 4.313rem);
  }
  .homesolar::after{
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/prologue/tree_light.png);
      background-size: cover;
      top: 77%;
      right: -6%;
      width: clamp(2.875rem, 0.131rem + 13.72vw, 6.563rem);
      height: clamp(2.563rem, 0.051rem + 12.56vw, 5.938rem);
  }
}

.misunderstanding::after {
  position: absolute;
  content: "";
  display: block;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: #bd3758;
  bottom: -0.3%;
  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;
}

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

  h2 {
    margin-top: 0;
    padding-top: 2.07em;
    font-size: var(--font37);

    .red{
      font-size: var(--font50);
    }
  }
  .circle {
    width: clamp(16.655rem, 83.27vw, 39.035rem);
    height: clamp(16.655rem, 83.27vw, 39.035rem);
    margin: 0 auto;
    background-color: #fff;
    border-radius: 50%;
    margin-top: 35px;
    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;

    h3 {
      font-size: var(--font45);
      margin: 0 auto;
      margin-bottom: 0.44em;
      line-height: 1.35;

      .circle-small {
        font-size: clamp(0.934rem, 0.001rem + 4.67vw, 2.188rem);
      }
      .circle-middle {
        font-size: var(--font37);
      }
      .circle-large {
        font-size: clamp(1.12rem, 5.6vw, 2.625rem);
      }
    }

    .illust {
      width: clamp(6.875rem, 0.038rem + 34.19vw, 16.063rem);
      line-height: 1;
      margin: 0 auto;
    }

    .illust.throw{
      width: clamp(5.75rem, 0.029rem + 28.6vw, 13.438rem);
    }

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

  p:last-child {
    margin: 0 auto;
    margin-top: 1.46em;
  }
}

.effective::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../img/prologue/trashcan.png);
  background-size: cover;
  top: 17%;
  left: 4.8%;
  width: clamp(3.125rem, 0.102rem + 15.12vw, 7.188rem);
  height: clamp(3.125rem, 0.055rem + 15.35vw, 7.25rem);
}

.effective::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../img/prologue/tree_normal.png);
  background-size: cover;
  top: 15.5%;
  right: 5.5%;
  width: clamp(3.313rem, 0.01rem + 16.51vw, 7.75rem);
  height: clamp(3.938rem, 0.031rem + 19.53vw, 9.188rem);
}

.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;
  }

  .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: right;
    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);
      }
    }

    .next a{
      background-color: #fff5a0;
      box-shadow: 5px 5px 0px 0px rgba(149, 143, 93, 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.4%;
  left: 0;
  width: 100%;
}

.wave-pink {
  position: absolute;
  top: -2%;
  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;
}