@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);
}
.yellow-line {
  background-image: linear-gradient(0deg, transparent 0.1em, #fffe99 0.1em, #fffe99 0.7em, transparent 0.7em);
}

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

/* chapterthree */

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

.durability {
  background-image: radial-gradient(#cbc8fe 2px, transparent 2px), radial-gradient(#cbc8fe 2px, transparent 2px);
  background-size: 16px 16px;
  background-position: 0 0, 7.5px 7.5px;
  background-color: #dcdafe;
  padding-top: clamp(1.325rem, 0.276rem + 5.24vw, 2.734rem);
  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/chapterthree/clock.png);
    background-size: cover;
    top: -4%;
    left: 5%;
    width: clamp(2.313rem, 0.033rem + 11.4vw, 5.375rem);
    height: clamp(2.875rem, 0.131rem + 13.72vw, 6.563rem);
  }
  h2::after {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/chapterthree/calendar.png);
    background-size: cover;
    top: 1%;
    right: 4%;
    width: clamp(2.625rem, -0.119rem + 13.72vw, 6.313rem);
    height: clamp(3.625rem, -0.142rem + 18.84vw, 8.688rem);
  }

  .easy {
    margin-top: clamp(1.75rem, -0.017rem + 8.84vw, 4.125rem);
    padding: clamp(1.603rem, -0.11rem + 8.56vw, 3.903rem) clamp(1.375rem, -0.067rem + 7.21vw, 3.313rem) clamp(1.82rem, 0.023rem + 8.98vw, 4.234rem);
    background-color: #fff;
    border-radius: clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) 0 0;

    h3{
      position: relative;
      margin-top: 0;
      line-height: 1.3;
      font-size: var(--font37);

      .red {
        font-size: var(--font48)
      }

      .indent-reduce {
        display: inline-block;
        text-indent: -15%;
      }

      .space-reduce-strong {
        letter-spacing: -65%;
      }
    }
    h3::before {
      position: absolute;
      content: "";
      display: block;
      border-left: clamp(0.125rem, 0.078rem + 0.23vw, 0.188rem) solid;
      top: 28%;
      left: 1%;
      transform: rotate(341deg);
      width: clamp(0.125rem, 0.078rem + 0.23vw, 0.188rem);
      height: clamp(2.125rem, -0.247rem + 11.86vw, 5.313rem);
    }
    h3::after {
      position: absolute;
      content: "";
      display: block;
      border-right: clamp(0.125rem, 0.078rem + 0.23vw, 0.188rem) solid;
      top: 28%;
      right: 1%;
      transform: rotate(201deg);
      width: clamp(0.125rem, 0.078rem + 0.23vw, 0.188rem);
      height: clamp(2.125rem, -0.247rem + 11.86vw, 5.313rem);
    }

    h4 {
      line-height: 1;
      font-size: var(--font35);
      padding-bottom: 0.5em;
      margin: clamp(1.875rem, 0.108rem + 8.84vw, 4.25rem) 0.5em 0;
      border-bottom: 3px dotted;
    }

    h4:first-of-type {
      margin-top: clamp(2.063rem, -0.124rem + 10.93vw, 5rem);
    }

    p {
      font-size: clamp(0.72rem, 3.6vw, 1.688rem);
      letter-spacing: -1px;
    }
    .font-left {
      padding: 0 1em;
      text-align: left;
    }
  }

  .easy::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/homesolar.png);
    background-size: cover;
    top: 12%;
    left: -2%;
    width: clamp(2.813rem, 0.022rem + 13.95vw, 6.563rem);
    height: clamp(1.875rem, 0.061rem + 9.07vw, 4.313rem);
  }
  .easy::after {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/chapterthree/screw_driver.png);
    background-size: cover;
    top: -2%;
    right: 3%;
    width: clamp(2.75rem, 0.052rem + 13.49vw, 6.375rem);
    height: clamp(2.75rem, -0.041rem + 13.95vw, 6.5rem);
  }

  .reason {
    padding: clamp(1.712rem, -0.048rem + 8.8vw, 4.078rem) clamp(1.563rem, -0.019rem + 7.91vw, 3.688rem) clamp(1.875rem, -0.078rem + 9.77vw, 4.5rem);
    background: repeating-linear-gradient(90deg, rgba(255, 210, 222, 1), rgba(255, 210, 222, 1) 2px, rgba(255, 225, 233, 1) 0, rgba(255, 225, 233, 1) 6px);

    h3 {
      position: relative;
      line-height: 1;
      margin: 0 auto;
      font-size: clamp(1.147rem, 5.73vw, 2.688rem);

      .reason_num {
        font-size: clamp(1.973rem, 9.87vw, 4.625rem);
      }
    }
    h3::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chaptertwo/reviews_human_l.png);
      background-size: cover;
      top: 4%;
      left: -9%;
      transform: scale(0.9);
      width: clamp(1.75rem, -0.343rem + 10.47vw, 4.563rem);
      height: clamp(3.563rem, -0.158rem + 18.6vw, 8.563rem);
    }
    h3::after {
        position: absolute;
        content: "";
        display: block;
        background-image: url(../img/chaptertwo/reviews_human_r.png);
        background-size: cover;
        top: -38%;
        right: -8%;
        transform: scale(0.9);
        width: clamp(1.688rem, -0.266rem + 9.77vw, 4.313rem);
        height: clamp(3.688rem, -0.266rem + 19.77vw, 9rem);
    }

    p {
      font-size: clamp(0.693rem, 3.47vw, 1.625rem);
      text-align: left;
    }

    .reason__paragraph {
      position: relative;
      margin: 0 auto;
      margin-top: clamp(2.375rem, 0.003rem + 11.86vw, 5.563rem);

    .paragraph {
      position: relative;
      background-color: #fff;
      padding: clamp(1.594rem, -0.127rem + 8.6vw, 3.906rem) clamp(1.063rem, -0.1rem + 5.81vw, 2.625rem) clamp(0.969rem, -0.148rem + 5.58vw, 2.469rem);
      border: clamp(0.125rem, -0.015rem + 0.7vw, 0.313rem) solid #ffcfdc;
      border-radius: clamp(0.8rem, 4vw, 1.875rem);
      z-index: 2;

      h4 {
        margin: 0 auto;
        font-size: var(--font35);
      }

      p {
        margin-bottom: 0;
      }
    }
    .paragraph::after {
      position: absolute;
      display: block;
      content: "";
      background-color: #fff;
      width: clamp(4.5rem, 0.035rem + 22.33vw, 10.5rem);
      height: calc(clamp(4.5rem, 0.035rem + 22.33vw, 10.5rem) / 2);
      border-radius: 50%/100% 100% 0 0;
      top: -28%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }

    .second-reason p{
      text-align: center;
    }
    .first-reason::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterthree/reliability_icon.png);
      background-size: cover;
      top: -11%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(1.375rem, 0.026rem + 6.74vw, 3.188rem);
      height: clamp(1.625rem, -0.003rem + 8.14vw, 3.813rem);
      z-index: 2;
    }
    .second-reason::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterthree/gear_icon.png);
      background-size: cover;
      top: -12%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(2rem, 0.047rem + 9.77vw, 4.625rem);
      height: clamp(1.438rem, -0.051rem + 7.44vw, 3.438rem);
      z-index: 2;
    }
    .third-reason::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterthree/brush_icon.png);
      background-size: cover;
      top: -6%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(1.625rem, -0.003rem + 8.14vw, 3.813rem);
      height: clamp(1.625rem, -0.003rem + 8.14vw, 3.813rem);
      z-index: 2;
    }
    .third-reason::after {
      top: -18%;
    }
  }

  .reason__paragraph:first-of-type {
    margin-top: clamp(3.125rem, 0.195rem + 14.65vw, 7.063rem);
  }

  .reason__paragraph::after {
    position: absolute;
    display: block;
    content: "";
    background-color: #ffcfdc;
    width: clamp(4.75rem, 0.006rem + 23.72vw, 11.125rem);
    height: calc(clamp(4.75rem, 0.006rem + 23.72vw, 11.125rem) / 2);
    border-radius: 50%/100% 100% 0 0;
    top: -27%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .third-reason__paragraph::after {
    top: -18%;
  }
}

  .maintenance-free {
    padding: clamp(2.063rem, -0.124rem + 10.93vw, 5rem) clamp(1.875rem, -0.125rem + 10vw, 4.563rem) clamp(1.188rem, -0.161rem + 6.74vw, 3rem);
    background-color: #fff;
    border-radius: 0 0 clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) clamp(0.5rem, -0.058rem + 2.79vw, 1.25rem) ;

    h3 {
      line-height: 1;
      margin: 0 auto;
      font-size: var(--font37);

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

    h4 {
      line-height: 1;
      margin: 0 auto;
      margin-top: clamp(1.25rem, -0.192rem + 7.21vw, 3.188rem);
      font-size: var(--font35);
      border-bottom: 2px dotted;
      padding-bottom: clamp(0.625rem, 0.113rem + 2.56vw, 1.313rem);
    }

    p {
      text-align: left;
    }
  }
}

.support {
  background-color: #fffeda;
  padding-top: clamp(2.375rem, -0.044rem + 12.09vw, 5.625rem);
  padding-bottom: clamp(2.5rem, 0.035rem + 12.33vw, 5.813rem);

  h2 {
    margin-top: 0;
    margin-bottom: clamp(1.25rem, -0.052rem + 6.51vw, 3rem);
    line-height: 1;
    font-size: var(--font37);

     .green{
      font-size: var(--font48);
     }
  }

  .assets {
    position: relative;
  }

  .assets::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/chapterthree/driver.png);
    background-size: cover;
    top: 35%;
    left: 1%;
    width: clamp(1.438rem, 0.135rem + 6.51vw, 3.188rem);
    height: clamp(3.375rem, 0.026rem + 16.74vw, 7.875rem);
  }
  .assets::after {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/chapterthree/spanner.png);
    background-size: cover;
    top: 51%;
    right: 0%;
    width: clamp(1.875rem, 0.015rem + 9.3vw, 4.375rem);
    height: clamp(2.75rem, 0.006rem + 13.72vw, 6.438rem);
  }

  .support__balloon {
    position: relative;
    width: 80%;
    margin: 0 auto;
    margin-top: clamp(2.375rem, 0.003rem + 11.86vw, 5.563rem);

    .balloon {
      position: relative;
      background-color: #fff;
      padding-top: clamp(1.594rem, -0.127rem + 8.6vw, 3.906rem);
      padding-bottom: clamp(0.969rem, -0.148rem + 5.58vw, 2.469rem);
      border: clamp(0.125rem, -0.015rem + 0.7vw, 0.313rem) solid #c0ead3;
      border-radius: clamp(0.8rem, 4vw, 1.875rem);
      z-index: 2;

        p {
          margin: 0 auto;
          font-size: clamp(1.126rem, 5.63vw, 2.64rem);
        }
    }
    .balloon::after {
      position: absolute;
      display: block;
      content: "";
      background-color: #fff;
      width: clamp(4.5rem, 0.035rem + 22.33vw, 10.5rem);
      height: calc(clamp(4.5rem, 0.035rem + 22.33vw, 10.5rem) / 2);
      border-radius: 50%/100% 100% 0 0;
      top: -28%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }

    .first-balloon::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterthree/tool_icon.png);
      background-size: cover;
      top: -11%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(1.125rem, -0.038rem + 5.81vw, 2.688rem);
      height: clamp(1.875rem, 0.015rem + 9.3vw, 4.375rem);
      z-index: 2;
    }
    .second-balloon::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterthree/tablet_icon.png);
      background-size: cover;
      top: -12%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(1.563rem, -0.019rem + 7.91vw, 3.688rem);
      height: clamp(2.063rem, -0.031rem + 10.47vw, 4.875rem);
      z-index: 2;
    }
    .third-balloon::before {
      position: absolute;
      content: "";
      display: block;
      background-image: url(../img/chapterthree/headset_icon.png);
      background-size: cover;
      top: -12%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(2.188rem, 0.048rem + 10.7vw, 5.063rem);
      height: clamp(1.875rem, -0.032rem + 9.53vw, 4.438rem);
      z-index: 2;
    }
  }

  .support__balloon:first-of-type {
    margin-top: clamp(3.125rem, 0.195rem + 14.65vw, 7.063rem);
  }

  .support__balloon::after {
    position: absolute;
    display: block;
    content: "";
    background-color: #c0ead3;
    width: clamp(4.75rem, 0.006rem + 23.72vw, 11.125rem);
    height: calc(clamp(4.75rem, 0.006rem + 23.72vw, 11.125rem) / 2);
    border-radius: 50%/100% 100% 0 0;
    top: -27%;
    left: 50%;
    transform: translateX(-50%);
    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: 65%;
    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: left;
    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: #ffc9d7;
      box-shadow: 5px 5px 0px 0px rgba(159, 128, 136, 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);
    }
  }
}

.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.1%;
  left: 0;
  width: 100%;
}

.wave-yellow {
  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;
}