.check_list-question,
.check_list-answer,
.check_list-result {
  display: none;
}

.js-sw-start {
  display: none;
}

.js-sw-checkList {
  display: block;
}

.l-spacer.-normal {
  padding: 2.5rem 0;
}
.l-spacer.-large {
  padding: 4rem 0;
}
@media screen and (min-width: 768px) {
  .l-spacer.-large {
    padding: 8rem 0;
  }
}
.l-spacer.-top {
  padding-bottom: 0;
}

.c-button {
  appearance: none;
  border: none;
  background-image: none;
  font-family: inherit;
  background-color: transparent;
  transition-property: background, color;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.c-button.-secondary {
  background-color: #f0fae4;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 1rem;
  max-width: 500px;
  /* max-width: 100%; */
  width: 100%;
  background-color: #f7f5f5;
}

@media screen and (min-width: 768px) {
  .c-button.-secondary {
    font-size: 1.5rem;
    padding: 1.5rem;
  }
}
.c-button.-secondary:hover {
  background-color: #ddd8d8;
}

.c-button.-start {
  background-color: #f0fae4;
}
.c-button.-start:hover {
  background-color: #ddeec9;
}
.c-button.-result {
  background-color: #f0fae4;
}
.c-button.-result:hover {
  background-color: #ddeec9;
}
.c-button.-yes,
.c-button.-no {
  position: relative;
}
.c-button.-yes {
  background-color: #d0f2ec;
}
.c-button.-yes::before,
.c-button.-no::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
  margin: auto;
  background-size: auto 100%;
  background-position: center 0;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  .c-button.-yes::before,
  .c-button.-no::before {
    top: -60px;
    height: 60px;
  }
}
.c-button.-yes:before {
  background-image: url(../images/bg-button-01@2x.png);
}
.c-button.-yes:hover {
  background-color: #b3dfd7;
}
.c-button.-no {
  background-color: #fdc8c8;
}
.c-button.-no:before {
  background-image: url(../images/bg-button-02@2x.png);
}
.c-button.-no:hover {
  background-color: #e4abab;
}
.c-button.-next {
  background-color: #f7f5f5;
}
.c-button.-next:hover {
  background-color: #ddd8d8;
}

.c-button.-twitter {
  background-color: #55acee;
  color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 4px rgba(6, 27, 43, 0.16);
}
.c-button.-twitter:hover {
  background-color: #3d8bc7;
}

.c-button.-facebook {
  position: relative;
  display: block;
  color: #3b4cad;
  border: 1px solid #3b4cad;
  padding: 1.25rem;
  font-weight: bold;
}

.c-button.-facebook svg {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: translateX(-2rem);
  vertical-align: bottom;
  fill: #3b4cad;
  transition: fill 0.3s ease-out;
}

.c-button.-facebook:hover {
  background-color: #3b4cad;
  color: #fff;
}
.c-button.-facebook:hover svg {
  fill: #fff;
}

.p-hero.-ecoCheck {
  padding: 8rem 0;
  background-color: #f0fae4;
  background-image: url(../images/bg-echocheck_sp@2x.png);
  background-size: auto 75%;
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (min-width: 768px) {
  .p-hero.-ecoCheck {
    padding: 10rem 0;
    background-image: url(../images/bg-echocheck_pc@2x.png);
  }
}
.p-hero.-ecoCheck .p-hero__title {
  position: static;
  display: block;
  text-align: center;
  background-color: #fcb8b8;
  font-size: 1.5rem;
  padding: 0.75rem;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
@media screen and (min-width: 768px) {
  .p-hero.-ecoCheck .p-hero__title {
    font-size: 3rem;
    padding: 1.5rem;
  }
}

.p-hero__wbr {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-hero__wbr {
    display: inline;
  }
}
.p-question {
  position: relative;
  border: 13px solid #e6e6e6;
  padding: 7rem 2rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-question {
    padding: 7rem 5rem;
  }
}
.p-question:before {
  content: "";
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  width: 300px;
  height: 72px;
  border: 13px solid #e6e6e6;
  margin: 0 auto;
}
.p-question__intro {
  padding: 1.5rem 0;
}

@media screen and (min-width: 768px) {
  .p-question__intro {
    padding: 3rem 0;
  }
}
.p-question__text {
  font-size: 0.75rem;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .p-question__text {
    font-size: 1rem;
  }
}
.p-question__text.-bold {
  font-weight: bold;
}
.p-question__text.-large {
  font-size: 1.125rem;
}
.p-question__text.-xlarge {
  font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-question__text.-xlarge {
    font-size: 1.75rem;
  }
}
.p-question__title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2;
}

@media screen and (min-width: 768px) {
  .p-question__title {
    font-size: 3rem;
  }
}
.p-question__title.-label {
  background-color: #fce38a;
  display: inline-block;
  margin-bottom: 2.5rem;
  line-height: 1.2;
  padding: 1.5rem 4rem;
}

@media screen and (min-width: 768px) {
  .p-question__title.-label {
    margin-bottom: 2.5rem;
    padding: 0.5rem 4rem;
  }
}
.p-question__answer {
  margin: 3rem 0 6rem;
  background-size: 160px auto;
  background-repeat: no-repeat;
  padding: 0 0 10rem;
  background-position: 50% bottom;
  text-align: center;
}

.p-question__answer.-max {
  background-image: url(../images/check-list/img-machikane-max@2x.png);
}
.p-question__answer.-heigh {
  background-image: url(../images/check-list/img-machikane-height@2x.png);
}
.p-question__answer.-middle {
  background-image: url(../images/check-list/img-machikane-middle@2x.png);
}
.p-question__answer.-low {
  background-image: url(../images/check-list/img-machikane-low@2x.png);
}

@media screen and (min-width: 768px) {
  .p-question__answer {
    margin: 6rem 0;
    background-size: 184px 140px;
    padding: 3rem 0 1.5rem;
  }

  .p-question__answer.-max,
  .p-question__answer.-middle {
    text-align: right;
    background-position: 0 bottom;
  }
  .p-question__answer.-low,
  .p-question__answer.-heigh {
    text-align: left;
    background-position: 100% bottom;
  }
}

.p-question__result {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 2rem 1rem;

  border-radius: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .p-question__result {
    font-size: 1.75rem;
    width: 75%;
  }
}
.p-question__result:before {
  content: "";
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
@media screen and (min-width: 768px) {
  .p-question__result:before {
    top: 0;
    bottom: 0;
    left: auto;
    right: auto;
  }
}
.p-question__result:before {
  bottom: 0;
  transform: translateY(100%);
  border-width: 27px 27px 0 27px;
}

@media screen and (min-width: 768px) {
  .p-question__answer.-max .p-question__result:before,
  .p-question__answer.-middle .p-question__result:before {
    left: 0;
    transform: translateX(-100%);
    border-width: 17px 27px 17px 0;
  }
}

@media screen and (min-width: 768px) {
  .p-question__answer.-heigh .p-question__result:before,
  .p-question__answer.-low .p-question__result:before {
    right: 0;
    transform: translateX(100%);
    border-width: 17px 0 17px 27px;
  }
}

.p-question__answer.-max .p-question__result {
  background-color: #fcb8b8;
}

.p-question__answer.-max .p-question__result:before {
  border-top-color: #fcb8b8;
}
@media screen and (min-width: 768px) {
  .p-question__answer.-max .p-question__result:before {
    border-top-color: transparent;
    border-right-color: #fcb8b8;
  }
}

.p-question__answer.-heigh .p-question__result {
  background-color: #ffe8e8;
}

.p-question__answer.-heigh .p-question__result:before {
  border-top-color: #ffe8e8;
}
@media screen and (min-width: 768px) {
  .p-question__answer.-heigh .p-question__result:before {
    border-left-color: #ffe8e8;
    border-top-color: transparent;
  }
}

.p-question__answer.-middle .p-question__result {
  background-color: #d4e9f4;
}

.p-question__answer.-middle .p-question__result:before {
  border-top-color: #d4e9f4;
}
@media screen and (min-width: 768px) {
  .p-question__answer.-middle .p-question__result:before {
    border-right-color: #d4e9f4;
    border-top-color: transparent;
  }
}

.p-question__answer.-low .p-question__result {
  background-color: #d4d9f4;
}

.p-question__answer.-low .p-question__result:before {
  border-top-color: #d4d9f4;
}
@media screen and (min-width: 768px) {
  .p-question__answer.-low .p-question__result:before {
    border-left-color: #d4d9f4;
    border-top-color: transparent;
  }
}