@charset "UTF-8";

:root {
  --color-black: #000;
  --color-lightgray: #4c4c4c;
  --color-darkgray: #3e3a39;
  --color-skyblue: #00ccff;
  --color-yellow: #ffe200;
  --color-ocher: #b29700;
  --color-orange: #FFBD18;
  --color-white: #fff;
}

:root {
  --font-family-noto: "Noto Sans JP", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-extrabold: 800;
  --font-weight-heavy: 900;


  /*1rem==17pt*/
  --font-size-p-1: 2.40rem;
  --font-size-p-2: 2.70rem;
  --font-size-p-3: 1.90rem;
  --font-size-h1: 7.50rem;
  --font-size-h2-1: 6.00rem;
  --font-size-h2-2: 5.50rem;
  --font-size-gnav: 1.70rem;
}

:root {
  --width-inner-content: 80%;
}

html {
  font-size: calc((100vw - 320px)*0.56 / 140 + 9px);
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-noto);
  background-color: var(--color-skyblue);
  font-feature-settings: "palt";
  margin:0
}

body * {
  box-sizing: border-box;
}

img {
  max-width: fit-content;
  height: auto;
}

section {
  margin-left: 171px auto;
}
.wrap{
  overflow: hidden;
}


@media screen and (min-width:1024px) {
  .mediasmall {
    display: none;
  }
}

@media screen and (max-width:1023px) {
  .medialarge {
    display: none;
  }
}

/*---loader---*/
.loader {
  background-color: var(--color-skyblue);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 10;
  animation: fadeOut 1.5s 1.0s forwards;
}

.loader #loader-icon {
  width: 60%;
  position: sticky;
  top: 25%;
  left: 0%;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/*---head---*/

header {
  background-color: var(--color-skyblue);
  font-family: var(--font-family-noto);
  align-items: center;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100%;
  padding-top: 30px;
  z-index: 1;
}

@media (max-width: 1024px) {
  header {
    background-color: transparent;
    padding-top: 8px;
  }
}

header a {
  text-decoration: none;
  color: var(--color-white);
  font-weight: bolder;
}

img {
  max-width: 100%;
  height: auto;
}

.div2ver {
  width: 40%;
  height: auto;
}

/*---firstview---*/
#firstview {
  display: inline-block;
  width: 100%;
  font-family: var(--font-family-noto);
}

.firstview-upper {
  display: flex;
  flex-direction: row;
  max-width: 1360px;
  margin: 0 auto;
  position: relative;
}

.firstview-left {
  font-family: var(--font-family-noto);
  font-weight: bold;
  text-align: left;
  width: auto;
  height: auto;
  text-wrap: nowrap;
}

@media screen and (min-width:1024px) {
  #firstview {
    padding-top: 154px;
  }

  .firstview-left {
    padding-left: 170px;

    & h2 {
      font-size: 27px;
      position: relative;
    }

    & h1 {
      font-size: 60px;
      padding-top: 16px;
      line-height: 71px;
    }

    & p {
      font-size: 24px;
      line-height: 42px;
      padding-top: 80px;
      color: var(--color-white);
    }
  }

  #makotohikari {
    font-size: 70px;
    font-weight: 900;
  }

  .firstview-right-makoto {
    position: absolute;
    width: 316.7px;
    height: 391.2px;
    top: 0px;
    left: 809px;
    z-index: -2;
  }

  .firstview-right-catsle {
    position: absolute;
    top: 28px;
    left: 1013px;
    width: 259px;
    height: 271.6px;
    z-index: -3;
  }

  .firstview-right-cloud {
    position: absolute;
    top: 309px;
    left: 887px;
    width: 544px;
    height: auto;
    z-index: -1;
  }

  .firstview-lower {
    position: absolute;
    top: 446px;
    left: -20px;
    width: 1075px;
    height: 221px;
    z-index: 0;
  }

  .firstview-right-cloud2 {
    display: none;
  }
  .firstview-left h2::after {
    content: '';
    display: flex;
    position: absolute;
    top: -24px;
    left: 364px;
    background-image: url(../objects/firstview/star.svg);
    background-repeat: no-repeat;
    width: 84px;
    height: 84px;
  }
  #tonikakuyasui {
    color: var(--color-white);
    text-decoration: underline var(--color-white);
    text-underline-offset: 12px;
    text-decoration-thickness: 3px;
  }
  
}

@media screen and (max-width:1023px) {
  #firstview {
    padding-top: 32px;
  }

  .firstview-upper{
    margin: 0 auto;
    width:277px;
  }
  .firstview-left {

    & h2 {
      font-size: 15px;
      position: relative;
    }

    & h1 {
      font-size: 30.8px;
      padding-top: 16px;
      line-height: 37px;
    }

    & p {
      font-size: 14px;
      line-height: 24.5px;
      color: var(--color-white);
    }
  }

  #makotohikari {
    font-size: 36.5px;
    font-weight: 900;
  }

  .firstview-images{
    width:277px;
    height: 389px;
    margin: 0 auto;
    display: block;
    position: relative;
  }

  .firstview-right-makoto {
    margin: auto;
    position: absolute;
    width: 194.9px;
    height: 240.8px;
    top: 60px;
    left: 42px;
    z-index: -2;
  }

  .firstview-right-catsle {
    position: absolute;
    top: 86px;
    left: 196px;
    width: 130px;
    height: 271.6px;
    z-index: -3;
  }

  .firstview-right-cloud {
    position: absolute;
    top: 244px;
    left: 103px;
    width: 263px;
    height: auto;
    z-index: -1;
  }

  .firstview-lower {
    display: none;
  }

  .firstview-right-cloud2 {
    position: absolute;
    top: 263px;
    left: 5px;
    width: 189px;
    height: auto;
    z-index: 0;
    transform: translateY(20px);
  }
  .firstview-left h2::after {
    content: '';
    display: flex;
    position: absolute;
    top: -20px;
    left: 190px;
    background-image: url(../objects/firstview/star.svg);
    background-repeat: no-repeat;
    width: 46px;
    height: 46px;
  }
  #tonikakuyasui {
    color: var(--color-white);
    text-decoration: underline var(--color-white);
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
  }
  
}



/*---suggest---*/
#suggest {
  text-align: center;

  & h2 {
    font-size: 41.25pt;
    font-weight: bolder;
    color: #fff;
  }
}

@media screen and (min-width:1024px) {
  #suggest {
    margin-top: 270px;

    & h2 {
      font-size: 41.25pt;
    }
  }

  #icons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: -50px;

    &>div {
      width: calc(20% - 30px*2/5);
      min-width: 144px;
      margin: 60px -33px 0 -33px;
    }

    & img {
      margin: 0;
      width: 220px;
      height: auto;
      min-width: 144px;
    }

    & p {
      font-weight: 500;
      font-size: 20px;
      line-height: 33px;
      margin: 2px 0 0 0;
      color: #3e3a39;
    }
  }
}

@media screen and (max-width:1025px) {
  #suggest {
    margin: 70px auto;

    & h2 {
      font-size: 32px;
      line-height: 44px;
      width: 224px;
      margin: 40px auto;
    }
  }

  #icons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    margin: 0 auto;
    width: 372px;

    &>div {
      width: 186px;
      margin: 0px;
    }

    & img {
      margin: 0;
      width: 220px;
      height: auto;
      min-width: 144px;
    }

    & p {
      font-weight: 500;
      font-size: 20px;
      line-height: 33px;
      margin: 2px 0 0 0;
      color: #3e3a39;
    }
  }
}

/*--features--*/

#features {
  margin-top: 100px;
  padding-top: 100px;
}

.makimono {
  background-color: var(--color-yellow);
}

@media screen and (min-width:1024px) {
  .makimono {
    margin: 92px auto 0 auto;
    width: 1000px;
  }

  .makimono-shaft {
    width: 1000px;
    height: 130px;

    & p {
      font-size: 44px;
    }

    & p::before {
      content: '';
      display: flex;
      position: absolute;
      top: 45px;
      left: 200px;
      background-repeat: no-repeat;
      height: 44px;
      width: 80pt;
    }

    & p::after {
      content: '';
      display: flex;
      position: absolute;
      top: 45px;
      right: 160px;
      background-repeat: no-repeat;
      height: 44px;
      width: 80pt;
    }
  }

  .makimono-line {
    width: 30%;
    height: 74px;
  }

  .makimono-shaft::before {
    top: 28px;
    left: -61.5px;
    height: 93px;
    width: calc(100% + 123px);
  }
}

.makimono-line {
  display: flex;
  margin: auto;
  border-right: 30px solid var(--color-orange);
  border-left: 30px solid var(--color-orange);
  width: 30%;
  height: 74px;
}

@media screen and (max-width:1025px) {
  .makimono {
    margin: 92px auto 0 auto;
    width: 98%;
  }

  .makimono-shaft {
    width: 100%;
    height: 49px;

    & p {
      font-size: 23px;
    }

    & p::before {
      top: 15px;
      left: 30px;
      height: 19.5px;
      width: 35pt;
    }

    & p::after {
      top: 15px;
      right: 30px;
      height: 19.5px;
      width: 35pt;
    }
  }

  .makimono-line {
    width: 30%;
    height: 74px;
  }

  .makimono-shaft::before {
    top: 10px;
    left: -6.5px;
    height: 36px;
    width: calc(100% + 13px);
  }
  .makimono-inner{
    margin-top: -38px;
  }
  .makimono-line{
  display: flex;
  margin: auto;
  border-right: 10px solid var(--color-orange);
  border-left: 10px solid var(--color-orange);
  width: 30%;
  height: 74px;
  }
}

.makimono-shaft {
  margin: 0 auto 0 auto;
  position: relative;
  display: flex;
  background-color: var(--color-ocher);
  justify-content: center;
  align-items: center;
  flex-direction: column;

  & p {
    text-align: center;
    font-weight: bold;
    color: #fff;
  }

  & p::before {
    content: '';
    display: flex;
    position: absolute;
    background-image: url(../objects/features/pine-1.svg);
    background-repeat: no-repeat;
  }

  & p::after {
    content: '';
    display: flex;
    position: absolute;
    background-image: url(../objects/features/pine-1.svg);
    background-repeat: no-repeat;
  }
}

.makimono-shaft::before {
  content: '';
  display: flex;
  position: absolute;
  background-color: var(--color-darkgray);
  z-index: -1;
}

.makimono-inner {
  background-color: #fff;
  width: 92%;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 30px;
}

.makimono-deco>img {
  position: absolute;
}


.features-contents {
  display: flex;
  flex-direction: column;
  position: relative;
}

.features-title {
  position: absolute;
  top: -50px;
  left: -4rem;
  background-image: url(../objects/features/title.png);
  background-repeat: no-repeat;
  width: 202px;
  height: 105px;
  line-height: 105px;
  font-size: 38px;
  color: #fff;
  font-family: var(--font-family-noto);
}

@media screen and (min-width:1024px) {
  .features-texts {
    & h3 {
      padding-top: 60px;
      font-size: 25px;
      line-height: 37px;
      padding-bottom: 16px;
    }

    & h2 {
      font-size: 38px;
      margin: 32px;
      font-weight: bold;
    }

    & p {
      display: flex;
      margin: 58px auto 0px auto;
      width: 460px;
      text-align: justify;
      font-size: 15.74px;
      line-height: 27.6px;
    }
  }

  #makoto2 {
    width: 470px;
    transform: rotate(-8deg);
    top: 22px;
    left: -250px;
    height: auto
  }

  #cloud2 {
    width: 320px;
    top: 165px;
    right: -205px;
    height: auto
  }

  .features-title {
    top: -50px;
    left: -4rem;
    width: 202px;
    height: 105px;
    line-height: 105px;
    font-size: 38px;
  }

  #point {
    margin: 20px auto 60px auto;
    width: 691.6px;
    height: 465.2px;
  }

  #point1 {
    display: none;
  }

  #point2 {
    display: none;
  }

  .features-first-contents {
    margin: 0px auto 0px auto;
    padding: 0px;
    width: 460px;
    font-size: 15.74px;
    line-height: 27.6px;
  }

  .features-first-contents-last {
    margin: 0px auto 0px auto;
    padding: 0px;
    width: 460px;
    text-align-last: left;
    font-size: 15.74px;
    line-height: 27.6px;
  }

  #monthly-fee {
    margin: 62px auto;
    line-height: 70px;
    width: 370px;
    height: 80px;
    font-weight: bolder;
    color: #000;
    border-top: 1px solid;
    border-bottom: 1px solid;
    &>h2{
      text-wrap: nowrap;
      margin:0;
    font-size: 17px;
    &>span {
      font-size: 61px;
    }
    }
  }

}

@media screen and (max-width:1023px) {
  .features-texts {
    & h3 {
      padding-top: 60px;
      font-size: 16px;
      line-height: 32px;
      padding-bottom: 16px;
    }

    & h2 {
      font-size: 32px;
      line-height: 44px;
      margin-bottom: 24px;
      font-weight: bold;
    }

    & p {
      display: flex;
      margin: 58px auto 0px auto;
      width: 460px;
      text-align: justify;
      font-size: 16px;
      line-height: 24px;
    }
  }
  
#features-first .makimono-deco {
  height: 305px;
  width: 338px;
  position: relative;
  margin: 0 auto;
}
  #makoto2 {
    width: 360px;
    max-width: 360px;
    top: 15px;
    left: -50px;
    height: auto;
    transform: scale(1.05, 1.05) rotate(-8deg);
  }

  #cloud2 {
    width: 190px;
    top: 190px;
    right: -55px;
    height: auto;
    transform: rotate(-2deg);
  }

  .features-title {
    top: -40px;
    left: -47px;
    width: 202px;
    height: 105px;
    transform: scale(0.61, 0.61);
    line-height: 27px;
    font-size: 22px;
    padding-top: 30px;
  }

  #point {
    display: none;
  }

  #point1 {
    margin: 60px auto 40px auto;
    width: 278px;
    height: auto;
    display: block;
  }

  #point2 {
    margin: 0px auto 60px auto;
    width: 320px;
    height: auto;
    display: block;
  }

  .features-first-contents {
    margin: 0px auto 0px auto;
    padding: 0px;
    display: inline;
    max-width: 282px;
    font-size: 16px;
    line-height: 28px;
  }

  .features-first-contents-last {
    margin: 0px auto 0px auto;
    padding: 0px;
    max-width: 282px;
    display: inline;
    text-align-last: left;
    font-size: 16px;
    line-height: 28px;
  }

  
  #monthly-fee {
    margin: 28px auto;
    line-height: 70px;
    width: 288px;
    height: 61px;
    font-weight: bolder;
    color: #000;
    border-top: 1px solid;
    border-bottom: 1px solid;
    &>h2{
      padding-top: 5px;
      text-wrap: nowrap;
      margin:0;
    font-size: 17px;
    &>span {
      font-size: 46px;
      padding: 0 5px;
    }
    }
  }
  }

.features-texts {
  color: #11658D;
  position: relative;
  font-weight: bold;

  & h2 {
    font-weight: bold;
  }

  & p {
    display: flex;
    text-align: justify;
  }
}

#features {
  margin-top: -80px;
}

.features-first-contents {
  text-align-last: justify;
}

@media screen and (min-width:1024px) {
  #features-second {
    padding-top: 100px;
    margin-top: -35px;
  }

  .border-circle-sky {
    margin: 78px auto 0 auto;
    border: 1px solid #00ccff;
    border-radius: 5px;
    width: 30rem;
    line-height: 3rem;
    font-size: 1.3rem;
  }

  #makoto4 {
    width: 470px;
    top: 76px;
    right: -225px;
    height: auto
  }
}

@media screen and (max-width:1023px) {
  #features-second {
    padding-top: 100px;
    margin-top: -35px;
  }

  .border-circle-sky {
    margin: -40px auto 0 auto;
    border: 1px solid #00ccff;
    border-radius: 20px;
    line-height: 26px;
    font-size: 22px;
    padding: 10px;
    width: 290px;
  }

  #makoto4 {
    position: static;
    width: 338px;
    height: auto;
    margin: 0 auto;
    transform: translateX(-20px) translateY(-20px);
  }
}

/*compare*/

#features-second-compare {
  margin: 0 auto;
  position: relative;
  display: inline-block;
  text-wrap: nowrap;
  margin-top: 25px;
  background-color: #fff;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
}

#features-second-compare-inner {
  display: grid;
  grid-template-columns: 126px 50px 126px 30px 126px 30px 126px;
  grid-template-rows: 50px 50px 10px 40px 40px;
  text-align: center;
  line-height: 50px;
  margin:0 auto;
}

.compare--small {
  grid-row: 1;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
}

.compare--us {
  grid-row: 2;
  height: 50px;
  width: 126px;
  font-size: 24px;
  background: var(--color-yellow);
  margin-bottom: 60px;
}

.compare--other {
  line-height: 38px;
  font-size: 22px;
}

.compare--black {
  font-size: 40px;
  color: var(--color-black);
  font-weight: lighter;
}

.compare--line {
  border-bottom: #000 solid 1px;
  height: 43px;
  margin-left: 45px;
}

div.cautions {
  margin: 26px auto 10px auto;
  width: 460px;
  height: 175px;
}

div.cautions-content {
  font-family: var(--font-family-noto);
  width: 460px;
  height: 21px;
  line-height: 22.75px;
  font-size: 13px;
  font-weight: 500;
  color: #11658D;
  text-align: justify;
  text-align-last: justify;
}

@media screen and (max-width:1025px) {
  div.cautions {
    width: 310px;
    height: 293px;
    text-align: left;
  }

  div.cautions-content {
    display: inline;
  }

  div.cautions-content-last {
    display: inline;
  }
}

div.cautions-content-last {
  font-family: var(--font-family-noto);
  width: 461px;
  line-height: 22.75px;
  font-size: 13px;
  font-weight: 500;
  color: #11658D;
  text-align: justify;
  text-align-last: left;
}

#features-third {
  padding-top: 100px;
}

@media screen and (min-width:1024px) {
  h2.features-third-contents {
    line-height: 60px;
    margin-top: 10px;
  }

  div.features-third-contents {
    width: 460px;
    font-size: 16px;
    line-height: 25px;
    font-weight: bold;
    margin: 0 auto;
    text-align-last: justify;

  }
  span.features-third-contents {
    margin: 0 auto;

  }

  #makoto5 {
    width: 470px;
    top: 110px;
    left: -230px;
    height: auto;
  }

  #icon5 {
    width: 220px;
    top: 205px;
    right: -40px;
    height: auto
  }
}

@media screen and (max-width:1023px) {
  #features-third{
    margin: 0 auto;
  }
  h3.features-third-contents {
    padding-top: 60px;
    font-size: 32px;
    line-height: 44px;
    width: 100%;
  }

  h2.features-third-contents {
    padding-top: 16px;
    font-size: 16px;
    line-height: 25px;
  }

  div.features-third-contents-last {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 0px 0px;
    display: inline;
    line-height: 28px;
  }

  div.features-third-contents {
    text-align: left;
    width: 288px;
    font-size: 16px;
    font-weight: bold;
    margin: 0px 0px;
    display: inline;
    line-height: 28px;
  }
  span.features-third-contents{
    display: block;
    text-align: left;
    max-width: 445px;
    margin: 0 auto;
  }
  #features-third .makimono-deco {
    height: 355px;
    width: 338px;
    position: relative;
    margin: 0 auto;
  }
  #makoto5 {
    width: 310px;
    top: 30px;
    left: -20px;
    height: auto;
    transform: scale(1.3, 1.3);
    z-index: 1;
  }

  #icon5 {
    width: 210px;
    top: 0px;
    right: -20px;
    height: auto;
    transform: scale(0.8, 0.8);
  }
}

@media screen and (min-width:1024px) {
  .inquiry {
    margin-top: 125px;
    padding-bottom: 60px;
    color: #11658D;
    font-size: 23px;
    font-weight: bold;
    line-height: 38px;
    position: relative;
  }

  .inquiry-button {
    margin: 0 auto;
    margin-top: 1rem;
    display: flex;
    background-image: url(../objects/inquiry.svg);
    background-repeat: no-repeat;
    width: 405px;
    height: 110px;
    align-items: center;
    justify-content: center;

    & a,
    a:link,
    a:visited,
    a:hover,
    a:active {
      font-size: 24px;
      text-decoration: none;
      color: #fff;
    }
  }

  #cloud1 {
    width: 470px;
    top: 60px;
    left: -340px;
    height: auto;
    transform: scale(-1, 1);
  }

  #cloud4 {
    width: 330px;
    top: 30px;
    right: -140px;
    height: auto;
  }
}

@media screen and (max-width:1023px) {
  .inquiry {
    width: 333px;
    margin: 75px auto 0 auto;
    padding-bottom: 60px;
    color: #11658D;
    font-size: 15px;
    font-weight: bold;
    line-height: 26.3px;
    position: relative;
  }

  .inquiry-button {
    margin: 1rem auto 60px auto;
    display: flex;
    background-image: url(../objects/inquiry.svg);
    background-repeat: no-repeat;
    width: 291.5px;
    height: 79px;
    align-items: center;
    justify-content: center;

    & a,
    a:link,
    a:visited,
    a:hover,
    a:active {
      font-size: 17px;
      text-decoration: none;
      color: #fff;
    }
  }

  #cloud1 {
    width: 353px;
    top: 130px;
    left: -210px;
    height: auto;
    transform: scale(-0.99, 0.99) rotate(10deg);
    z-index: 1;
  }

  #cloud4 {
    width: 330px;
    top: -115px;
    right: -180px;
    height: auto;
    transform: scale(0.6, 0.6);
    z-index: 1;
  }
}


/*impressions*/
@media screen and (min-width:1024px) {
  #impressions {
    margin: 50px auto 0 auto;
    padding-top: 120px;
    color: #fff;

    &>h2 {
      font-size: 60px;
      font-weight: bold;
    }

    &>p {
      font-size: 20px;
      line-height: 30px;
      margin: 60px auto;
    }
  }

  .user-impression {
    display: flex;
    margin: 0 30px;
    flex-direction: column;
    width: 286px;
    height: 404px;
    background-color: #b29700;

    &>img {
      width: 100%;
      height: auto;
    }

    &>h3 {
      font-size: 27px;
      line-height: 75px;
    }

    &>div.impressions-content {
      width: 248.6px;
      margin: 0 auto;
      font-size: 14px;
      line-height: 20px;
      text-align-last: justify;
      white-space: nowrap;
    }

    &>div.impressions-content-last {
      width: 248.6px;
      margin: 0 auto;
      font-size: 14px;
      line-height: 20px;
      text-align-last: left;
      white-space: nowrap;
    }
  }

  .user-impressions {
    margin: 80px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}

@media screen and (max-width:1023px) {
  #impressions {
    margin: 0 auto 0 auto;
    padding-top: 98px;
    color: #fff;

    &>img {
      width: 100%;
      height: auto;
    }

    &>h2 {
      font-size: 32px;
      font-weight: bold;
      line-height: 44px;
    }

    &>p {
      font-size: 16px;
      line-height: 24.5px;
      margin: 60px auto;
    }
  }

  .user-impression {
    display: flex;
    margin: 22px auto;
    flex-direction: column;
    width: 287px;
    height: 404px;
    background-color: #b29700;

    &>h3 {
      font-size: 24px;
      line-height: 75px;
    }

    &>div.impressions-content {
      width: 248.6px;
      margin: 0 auto;
      font-size: 14px;
      line-height: 20px;
      text-align-last: justify;
      white-space: nowrap;
    }

    &>div.impressions-content-last {
      width: 248.6px;
      margin: 0 auto;
      font-size: 14px;
      line-height: 20px;
      text-align-last: left;
      white-space: nowrap;
    }
  }

  .user-impressions {
    margin: 60px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


.user-impression>h3::before {
  display: inline-block;
  width: 2rem;
  content: url(../objects/features/pine-2.svg);
  padding-right: 2rem;
}

.user-impression>h3::after {
  display: inline-block;
  width: 2rem;
  content: url(../objects/features/pine-2.svg);
  padding-left: 2rem;
}

/* FAQ */

@media screen and (min-width:1024px) {
  #FAQ {
    margin-top: 185px;
    color: #11658D;

    &>h2 {
      font-size: 56px;
      color: #fff;
      padding-bottom: 75px;
    }
  }

  .accordion-container {
    width: 886px;
    max-height: 240px;
    margin: 0px auto 30px auto;
    font-size: 19px;
    line-height: 33.25px;
    border-radius: 4px;
    background-color: #fff;
  }

  .accordion-container summary {
    padding: 10px 15px 10px 72px;
    width: 886px;
    height: 80px;
  }

  .accordion-container summary::before {
    content: 'Q.';
    font-size: 21px;
    position: absolute;
    left: 20px;
  }

  .accordion-container p {
    margin: 0px;
    width: 886px;
    max-height: 160px;
    padding: 10px 72px;
    opacity: 0;
    z-index: 100;
    margin: 0;
  }

  .accordion-container summary::after {
    content: '+';
    font-size: 30px;
    color: #11658D;
    position: absolute;
    right: 2rem;
  }

  details[open] summary::after {
    content: '-';
  }

  .accordion-container p::before {
    content: 'A.';
    display: inline-block;
    position: absolute;
    left: 20px;
  }
}

@media screen and (max-width:1023px) {
  #FAQ {
    margin-top: 70px;
    color: #11658D;

    &>h2 {
      font-size: 32px;
      color: #fff;
      padding-bottom: 40px;
    }
  }

  .accordion-container {
    width: 343px;
    max-height: 240px;
    margin: 0px auto 30px auto;
    font-size: 15px;
    line-height: 21px;
    border-radius: 4px;
    background-color: #fff;
  }

  .accordion-container summary {
    padding: 10px 15px 10px 44px;
    width: 344px;
    height: 59px;
    text-wrap: nowrap;
  }

  .accordion-container summary::before {
    content: 'Q.';
    font-size: 15px;
    position: absolute;
    left: 12px;
  }

  .accordion-container p {
    position: relative;
    font-weight: bold;
    text-align: left;
    transform: translateY(-10px);
    margin: 0px;
    width: 886px;
    max-height: 160px;
    padding: 10px 44px;
    opacity: 0;
    z-index: 100;
    margin: 0;
  }

  .accordion-container p::before {
    content: 'A.';
    display: inline-block;
    position: absolute;
    left: 12px;
    top: calc(50% - 7.5px);
    font-size: 15px;
  }

}


.accordion-container summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  text-align: left;
  font-weight: bold;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

.accordion-container p {
  position: relative;
  font-weight: bold;
  text-align: left;
  transform: translateY(-10px);
}

.accordion-container[open] p {
  transform: none;
  opacity: 1;
}

/*cautions*/

@media screen and (min-width:1024px) {
  #cautions {
    margin: 165px auto 70px auto;
    width: 672px;
    color: #fff;

    &>h2 {
      font-size: 40px;
      margin: 30px auto;
    }

    &>div {
      border: solid 1px #fff;
      padding: 20px 0;
      margin: 50px auto;
    }

    & p {
      position: relative;
      font-size: 12px;
      margin: 0 0 0 30px;
      text-align: left;
      line-height: 22px;
    }
  }

  #cautions p::before {
    content: '●';
    position: absolute;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    left: -1rem;
  }
}

@media screen and (max-width:1023px) {
  #cautions {
    margin: 100px auto 45px auto;
    width: 320px;
    color: #fff;

    &>div {
      text-align: left;
    }

    &>h2 {
      font-size: 32px;
      margin: 30px auto;
      font-weight: bolder;
    }

    & p {
      font-size: 12px;
      margin: 0;
      line-height: 21px;
      display: inline;
    }
  }

  #cautions p::before {
    content: '●';
    display: inline-block;
    margin: 0;
  }
}

/*footer*/

footer {
  display: block;
  width: 100%;
  background-color: #fff;
  margin: 0;
  padding: 0;

  & .information {
    display: inline-block;
    margin-left: auto;
    text-align: left;
    color: #000;

    & p {
      font-weight: bolder;
    }
  }

  & .copywriter {
    display: block;
    background-color: #00ccff;


    & p {
      color: #fff;
    }
  }
}

@media screen and (min-width:1201px) {
  footer {
    padding-top: 60px;

    & .inquiry {
      margin: 60px auto 0 auto;
      padding-bottom: 0;
    }

    & .information {
      font-size: 14px;
      padding-bottom: 40px;
    }

    & p {
      line-height: 24px;
      margin: 24px auto;
    }

    & .copywriter {
      height: 95px;

      & p {
        padding-top: 30px;
        line-height: 26.3px;
        font-size: 15px;
      }
    }
  }

  #makoto-footer {
    position: absolute;
    width: 470px;
    top: -60px;
    left: -60px;
    height: auto
  }
}

@media screen and (max-width:1200px) {
  footer {
    padding-top: 46px;

    & .inquiry {
      margin: 0 auto;
      padding: 0;
    }

    & .information {
      font-size: 14px;
      padding-bottom: 20px;
    }

    & p {
      line-height: 24px;
      margin: 12px 0 12px 0px;
      transform: translateX(-15px);
    }

    & .copywriter {
      text-align: center;
        display: flex;
        height: 69px;
        justify-content: center;
        width: 100vw;

      &>p {
        font-size: 15px;
        padding:0;
        display: block ;
        height: 15px;
        transform: translateY(50%);
      }
    }
  }
  #makoto-footer {
    width: 250px;
    height: auto;
    margin: 0 auto;
    transform: scale(1.1,1.1) translate(0px,0px);
  }
}