@charset "UTF-8";
#ecocute-page {
  font-size:1vw;
  color:#142b77;
  overflow-x:hidden;
  background-color:#ECF1FB
}

#ecocute-page .display_pc {
  display:block
}

#ecocute-page .display_sp {
  display:none
}

#ecocute-page *:not(.products-name), #ecocute-page ::before {
  box-sizing: border-box;
}

#ecocute-page body,#ecocute-page h1,#ecocute-page h2,#ecocute-page h3,#ecocute-page h4,#ecocute-page p,#ecocute-page figure,#ecocute-page blockquote,#ecocute-page dl,#ecocute-page dd {
  margin:0
}

#ecocute-page ul[role=list],#ecocute-page ol[role=list] {
  list-style:none
}

#ecocute-page html:focus-within {
  scroll-behavior:smooth
}

#ecocute-page body {
  min-height:100vh;
  text-rendering:optimizeSpeed;
  line-height:1.5
}

#ecocute-page a:not([class]) {
  -webkit-text-decoration-skip:ink;
  text-decoration-skip-ink:auto
}

#ecocute-page img,#ecocute-page picture {
  max-width:100%;
  display:block
}

#ecocute-page input,#ecocute-page button,#ecocute-page textarea,#ecocute-page select {
  font:inherit
}

@media (prefers-reduced-motion:reduce)  {

  #ecocute-page html:focus-within {
    scroll-behavior:auto
  }

  #ecocute-page *,#ecocute-page ::before,#ecocute-page ::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }

}

#ecocute-page .page-title-sp {
  height:35%
}

#ecocute-page .page-title-pc {
  height:30%
}

#ecocute-page .visual {
  position:relative
}

#ecocute-page .visual h1 {
  color:#142b77;
  position:absolute;
  transform:translate(-50%,-50%);
  left:50%;
  top:40%;
  font-size:2em;
  font-weight:700
}

#ecocute-page .page-title-sp .logos,#ecocute-page .page-title-pc .logos {
  position:absolute;
  bottom:0;
  left:0;
  width:20em
}

#ecocute-page .page-title-sp .logos img,#ecocute-page .page-title-pc .logos img {
  width:100%;
  height:auto
}

#ecocute-page #pan {
  display:block;
  width:100%;
  max-width:1200px;
  overflow:hidden;
  margin:0 auto;
  padding-left:1em;
  text-align:left;
  box-sizing:border-box;
  -webkit-box-sizing:border-box
}

#ecocute-page .sitewrap00 {
  width:100%;
  max-width:1200px;
  overflow:hidden;
  margin-left:1em;
  text-align:left;
  box-sizing:border-box;
  -webkit-box-sizing:border-box
}

@media all and (max-width:767px)  {

  #ecocute-page .top-banner {
    width:calc(100% - 2em);
    height:auto
  }

}

#ecocute-page display_sp {
  display:none
}

#ecocute-page .fadeUp.active {
  animation-name:fadeUpAnime;
  animation-duration:.5s;
  animation-fill-mode:forwards
}

#ecocute-page .fadeScale.active {
  animation-name:fadeScaleAnime;
  animation-duration:1s;
  animation-fill-mode:forwards
}

#ecocute-page .fadeSlide.active {
  animation-name:fadeslideAnime;
  animation-duration:1s;
  animation-fill-mode:forwards
}

@keyframes fadeUpAnime  {

  from {
    transform:translateY(100px) rotate(10deg)
  }

  to {
    opacity:1;
    transform:translateY(0) rotate(0deg)
  }

}

@keyframes fadeScaleAnime  {

  from {
    transform:translateY(-10em) scale(1.5);
    filter:blur(.2em)
  }

  to {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0)
  }

}

@keyframes fadeslideAnime  {

  from {
    transform:translateX(20em);
    filter:blur(.2em)
  }

  to {
    opacity:1;
    transform:translateX(0);
    filter:blur(0)
  }

}

#ecocute-page .delay-time01 {
  animation-delay:.1s
}

#ecocute-page .delay-time02 {
  animation-delay:.2s
}

#ecocute-page .delay-time03 {
  animation-delay:.3s
}

#ecocute-page .delay-time04 {
  animation-delay:.4s
}

#ecocute-page .delay-time05 {
  animation-delay:.5s
}

#ecocute-page .delay-time06 {
  animation-delay:.6s
}

#ecocute-page .delay-time07 {
  animation-delay:.7s
}

#ecocute-page .delay-time08 {
  animation-delay:.8s
}

#ecocute-page .delay-time09 {
  animation-delay:.9s
}

#ecocute-page .delay-time10 {
  animation-delay:1s
}

#ecocute-page html {
  scroll-behavior:smooth
}

#ecocute-page body {
  font-size:max(14px,1vw);
  overflow-x:hidden;
  background-color:#ECF1FB;
  color:#122B78;
  font-feature-settings:palt;
  animation:fadeIn 1.5s ease 0 1 normal;
  letter-spacing:.03em;
  width:100%
}

@keyframes fadeIn  {

  0% {
    opacity:0
  }

  100% {
    opacity:1
  }

}

#ecocute-page .br-pc {
  display:block
}

#ecocute-page .br-sp {
  display:none
}

#ecocute-page a {
  text-decoration:none
}

#ecocute-page h2 {
  font-weight:700;
  color:#122B78
}

#ecocute-page h2::after,#ecocute-page h2::before {
  display:none
}

#ecocute-page .fixed-hide {
  transform:translateX(-50%) translateY(-120%)
}

#ecocute-page #sp-contact {
  display:none
}

#ecocute-page #top {
  width:100%;
  height:35em;
  display:flex;
  justify-content:center;
  background:#55b9f0;
  background:radial-gradient(circle,#55b9f0 0%,#193a85 89%,#122b78 100%)
}

#ecocute-page #top .top-word {
  width:35%;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:1.5em;
  color:#fff
}

#ecocute-page #top .top-word .catch-copy {
  margin-top:3em;
  line-height:1.2
}

#ecocute-page #top .top-word .catch-copy span {
  font-size:2em
}

#ecocute-page #top .top-word .catch-copy h1 {
  font-size:4em;
  font-weight:700;
  background-image:url(../p_ecocute/common/img/underline-top.webp);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:bottom;
  padding-bottom:.2em;
  white-space:nowrap
}

#ecocute-page #top .top-word .sub-copy {
  position:relative;
  padding:1em 2em
}

#ecocute-page #top .top-word .sub-copy .four-corners .left-top,#ecocute-page #top .top-word .sub-copy .four-corners .right-top,#ecocute-page #top .top-word .sub-copy .four-corners .left-bottom,#ecocute-page #top .top-word .sub-copy .four-corners .right-bottom {
  position:absolute;
  height:3.5em;
  width:3.5em
}

#ecocute-page #top .top-word .sub-copy .four-corners .left-top,#ecocute-page #top .top-word .sub-copy .four-corners .right-top {
  border-top:.3em #fff solid;
  top:0
}

#ecocute-page #top .top-word .sub-copy .four-corners .left-top {
  border-left:.3em #fff solid;
  left:0
}

#ecocute-page #top .top-word .sub-copy .four-corners .right-top {
  border-right:.3em #fff solid;
  right:0
}

#ecocute-page #top .top-word .sub-copy .four-corners .left-bottom,#ecocute-page #top .top-word .sub-copy .four-corners .right-bottom {
  border-bottom:.3em #fff solid;
  bottom:0
}

#ecocute-page #top .top-word .sub-copy .four-corners .left-bottom {
  border-left:.3em #fff solid;
  left:0
}

#ecocute-page #top .top-word .sub-copy .four-corners .right-bottom {
  border-right:.3em #fff solid;
  right:0
}

#ecocute-page #top .top-word .sub-copy .sub-copy-1 {
  font-size:1.7em;
  display:block;
  text-align:center
}

#ecocute-page #top .top-word .sub-copy .sub-copy-1 span {
  font-weight:700;
  font-size:1.15em
}

#ecocute-page #top .top-word .sub-copy .sub-copy-2 {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:.2em
}

#ecocute-page #top .top-word .sub-copy .sub-copy-2 .top-price {
  font-size:5.5em;
  line-height:1
}

#ecocute-page #top .top-word .sub-copy .sub-copy-2 .top-tax-yen {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:center
}

#ecocute-page #top .top-word .sub-copy .sub-copy-2 .top-tax-yen .top-tax {
  font-size:1.2em;
  white-space:nowrap
}

#ecocute-page #top .top-word .sub-copy .sub-copy-2 .top-tax-yen .top-yen {
  font-size:2.5em;
  font-weight:700;
  line-height:.8;
  margin-bottom:.2em
}

#ecocute-page #top .top-word .sub-copy .sub-copy-2 .top-kara {
  font-size:4em
}

#ecocute-page #top .top-word .sub-copy .sub-copy-3 {
  margin-top:.5em;
  border:.15em solid #fff;
  border-radius:100vw;
  padding:0 .5em .1em;
  width:100%;
  display:block;
  text-align:center;
  font-size:1.2em
}

#ecocute-page #top .top-img {
  width:auto;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end
}

#ecocute-page #top .top-img img {
  height:100%;
  max-width:none
}

#ecocute-page .banner {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:1em;
  background:#ffb85b;
  background:radial-gradient(#ffb85b 0%,#fb8638 100%);
  color:#fff;
  font-weight:700;
  line-height:1.1;
  width:50em;
  margin:0 auto;
  border-radius:1em;
  white-space:nowrap;
  font-size:max(10px,1.1vw)
}

#ecocute-page .banner .left {
  display:flex;
  flex-direction:column
}

#ecocute-page .banner .left span {
  font-size:3em
}

#ecocute-page .banner .left div {
  display:flex;
  flex-wrap:nowrap;
  gap:1em
}

#ecocute-page .banner .left div span {
  font-size:2.2em
}

#ecocute-page .banner .left div span span {
  font-size:1.4em
}

#ecocute-page .banner .right {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:1em
}

#ecocute-page .banner .right .rigth-left {
  font-size:4em;
  position:relative;
  text-shadow:0 0 .5vw rgba(255,255,104,.6117647059)
}

#ecocute-page .banner .right .rigth-left .num {
  font-size:2.3em
}

#ecocute-page .banner .right .rigth-left .subsidy {
  position:absolute;
  right:0;
  top:.5em;
  font-size:.65em
}

#ecocute-page .banner .right .right-right {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

#ecocute-page .banner .right .right-right img {
  width:13.5em
}

#ecocute-page .banner .right .right-right span {
  font-size:4.5em
}

#ecocute-page .top-banner {
  width:30%;
  margin:0 auto
}

#ecocute-page #merchandise h2 {
  text-align:center;
  font-size:3em;
  margin:0 auto
}

#ecocute-page #merchandise h2 span {
  font-size:1.5em;
  background-image:url(../p_ecocute/common/img/underline.svg);
  background-repeat:no-repeat;
  background-position:left 50% bottom 0;
  background-size:100%;
  padding:0 .1em
}

#ecocute-page #side-note {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1em
}

#ecocute-page #side-note p {
  background-color:#fff;
  margin:0 auto;
  font-weight:700;
  font-size:1em;
  padding:1em;
  border-radius:.3em;
  text-align:left
}

#ecocute-page .add-costs {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-bottom:3em
}

#ecocute-page #add-cost {
  width:40em;
  margin:1.5em auto;
  background-color:#fff;
  overflow:hidden;
  border-radius:.5em;
  border:.2em solid #122B78
}

#ecocute-page #add-cost .top {
  color:#fff;
  background-color:#122B78;
  text-align:center;
  padding-bottom:.1em;
  font-size:1.3em;
  font-weight:700
}

#ecocute-page #add-cost .bottom {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:left
}

#ecocute-page #add-cost .bottom p {
  padding:.5em 1em;
  font-size:1em
}

#ecocute-page #add-cost .bottom p span {
  color:#C21F1F;
  font-weight:700;
  font-size:1.2em
}

#ecocute-page #simulation {
  width:100%;
  background-color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:3em 0
}

#ecocute-page .titles {
  margin-bottom:3em
}

#ecocute-page .titles h2 {
  font-size:4em;
  text-align:center;
  margin-bottom:.5em;
  background-image:url(../p_ecocute/common/img/underline.svg);
  background-repeat:no-repeat;
  background-position:left 50% bottom 0;
  background-size:60%
}

#ecocute-page .titles p {
  background-color:#ECF1FB;
  padding:.5em 1em;
  border-radius:.5em
}

#ecocute-page .search-wrapper {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:3em
}

#ecocute-page #result {
  width:25em;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  background-color:#ECF1FB;
  border-radius:.5em;
  overflow:hidden
}

#ecocute-page #result .result-title {
  background-color:#122B78;
  color:#fff;
  width:100%;
  text-align:center;
  padding:.5em;
  font-size:1.5em;
  font-weight:700
}

#ecocute-page #result #result-wrapper {
  padding:1em 2em 2em
}

#ecocute-page #result #result-wrapper .result-sub-title {
  display:block;
  margin:1em auto .5em;
  width:100%;
  text-align:center;
  font-size:1.3em;
  font-weight:700
}

#ecocute-page #result #result-wrapper .result-sub-title:first-child {
  margin:0 auto .5em
}

#ecocute-page #result .region,#ecocute-page #result .stock,#ecocute-page #result .exchange {
  background-color:#fff;
  padding:1em 2em;
  border-radius:.5em;
  font-size:.8em
}

#ecocute-page #result .main-result {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:.5em;
  margin-bottom:.5em
}

#ecocute-page #result .exchange .main-result {
  align-items:flex-end
}

#ecocute-page #result .exchange .main-result-bold {
  line-height:1.5
}

#ecocute-page #result .exchange .sub-result-bold {
  line-height:2;
  font-size:1.3em
}

#ecocute-page #result .stock .stock-symbol {
  width:3em
}

#ecocute-page #result .main-result-bold {
  font-size:2.3em;
  font-weight:700
}

#ecocute-page #result .sub-result {
  width:100%;
  display:block;
  text-align:center
}

#ecocute-page #result .sub-result p {
  text-align:left
}

#ecocute-page #maps {
  position:relative
}

#ecocute-page #maps .map {
  width:30em
}

#ecocute-page .regions {
  width:100%;
  height:100%;
  text-align:left
}

#ecocute-page .regions .region-button {
  cursor:pointer;
  position:absolute;
  border-radius:100vw;
  padding:.25em .3em .1em;
  border:#122B78 solid .15em;
  background-color:#fff;
  color:#122B78;
  font-size:1.2em;
  font-weight:700;
  box-shadow:.1em .1em .3em rgba(0,0,0,.2);
  transition:.1s
}

#ecocute-page .regions .region-button::after {
  content:"";
  background-image:url(../p_ecocute/common/img/magnifying_glass.webp);
  height:2em;
  width:2em;
  padding-right:1.5em;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center
}

#ecocute-page .regions .region-button:hover {
  background-color:#FEEB30;
  transform:scale(1.05)
}

#ecocute-page .hokkaido {
  right:2.3%;
  top:5%
}

#ecocute-page .tohoku {
  top:35%;
  right:11.5%
}

#ecocute-page .shinetsu-hokuriku {
  top:50%;
  right:30%
}

#ecocute-page .kanto {
  top:65%;
  right:15.5%
}

#ecocute-page .tokai {
  bottom:4%;
  right:36%
}

#ecocute-page .kansai {
  bottom:14%;
  left:34%
}

#ecocute-page .chugoku {
  bottom:23%;
  left:19%
}

#ecocute-page .shikoku {
  bottom:2%;
  left:17.5%
}

#ecocute-page .kyushu {
  bottom:13%;
  left:0
}

#ecocute-page #contact {
  background:#3473b5;
  background:radial-gradient(circle,#3473b5 0%,#122b78 100%);
  color:#fff;
  padding:3em;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  width:100%;
  gap:1.5em
}

#ecocute-page #contact .contact-title {
  font-size:2.3em;
  text-align:center;
  font-weight:700
}

#ecocute-page #contact .contact-tags {
  display:flex;
  justify-content:center;
  gap:2em
}

#ecocute-page #contact .contact-tags .contact-tag {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:1em;
  border:.15em solid #fff;
  padding:.4em 1em;
  border-radius:.5em;
  font-weight:700
}

#ecocute-page #contact .contact-tags .contact-tag img {
  height:2em
}

#ecocute-page #contact .contact-tags .contact-tag span {
  font-size:1.2em;
  padding-bottom:.1em;
  white-space:nowrap;
  font-weight:700
}

#ecocute-page #contact .contact-btn {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:2em
}

#ecocute-page #contact .contact-btn .mail,#ecocute-page #contact .contact-btn .line,#ecocute-page #contact .contact-btn .tel {
  border-radius:100vw;
  color:#fff;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:.5em;
  padding:.3em 2em;
  width:22em;
  height:4em;
  position:relative;
  transition:.2s;
  font-size:1.2em
}

#ecocute-page #contact .contact-btn .mail img,#ecocute-page #contact .contact-btn .line img,#ecocute-page #contact .contact-btn .tel img {
  height:2.5em;
  width:2.5em;
  object-fit:contain
}

#ecocute-page #contact .contact-btn .mail span,#ecocute-page #contact .contact-btn .line span,#ecocute-page #contact .contact-btn .tel span {
  white-space:nowrap;
  font-weight:700
}

#ecocute-page #contact .contact-btn .mail::after,#ecocute-page #contact .contact-btn .line::after,#ecocute-page #contact .contact-btn .tel::after {
  content:"";
  height:.75em;
  width:.75em;
  border-top:.3em solid #fff;
  border-right:.3em solid #fff;
  position:absolute;
  right:5%;
  transform:rotate(45deg)
}

#ecocute-page #contact .contact-btn .mail:hover,#ecocute-page #contact .contact-btn .line:hover,#ecocute-page #contact .contact-btn .tel:hover {
  transform:translateY(.4em);
  opacity:1
}

#ecocute-page #contact .contact-btn .mail {
  background-color:#00D2A0;
  box-shadow:0 .4em 0 #009F79
}

#ecocute-page #contact .contact-btn .mail span,#ecocute-page #contact .contact-btn .line span {
  font-size:1.3em;
  padding-bottom:.1em
}

#ecocute-page #contact .contact-btn .mail:hover {
  box-shadow:0 0 0 #009F79
}

#ecocute-page #contact .contact-btn .tel {
  background-color:#FF6E37;
  box-shadow:0 .4em 0 #E33F00
}

#ecocute-page #contact .contact-btn .tel span {
  font-size:1.7em;
  margin-right:.5em
}

#ecocute-page #contact .contact-btn .tel:hover {
  box-shadow:0 0 0 #E33F00
}

#ecocute-page #contact .contact-btn .line {
  background-color:#00b900;
  box-shadow:0 .4em 0 #008b00
}

#ecocute-page #contact .contact-btn .line:hover {
  box-shadow:0 0 0 #008b00
}

#ecocute-page #contact .contact-btn span {
  margin-bottom:-.2em
}

#ecocute-page #point {
  padding-top:7em;
  width:100%
}

#ecocute-page #point .point-title {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center
}

#ecocute-page #point .point-title .point-sub-title {
  font-size:2em;
  font-weight:700;
  margin-bottom:.5em
}

#ecocute-page #point .point-title h2 {
  margin-top:-.7em;
  font-size:5em;
  position:relative;
  background-image:url(../p_ecocute/common/img/underline-point.svg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:100% 100%;
  letter-spacing:-.1em
}

#ecocute-page #point .point-title h2 .four {
  font-size:1.5em
}

#ecocute-page #point .point-title h2 .joshi {
  font-size:.8em
}

#ecocute-page #point .point-title h2 .halo {
  position:absolute;
  top:-.6em;
  left:-1.3em;
  width:1.5em
}

#ecocute-page #point .point-section {
  width:100%;
  position:relative;
  background-color:#fff;
  padding:5em 1em;
  margin:7em auto
}

#ecocute-page #point .point-section .point-num {
  font-weight:700;
  font-size:8em;
  line-height:1;
  position:absolute;
  top:-1.2em;
  color:#C8D5FF
}

#ecocute-page #point .point-section:nth-child(odd) .point-num {
  left:0
}

#ecocute-page #point .point-section:nth-child(even) .point-num {
  right:0
}

#ecocute-page #point .point-section .point-wrapper {
  display:flex;
  justify-content:center;
  align-items:center
}

#ecocute-page #point .point-section .point-wrapper div {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:2em;
  position:relative
}

#ecocute-page #point .point-section .point-wrapper div.point03 {
  align-items:flex-end
}

#ecocute-page #point .point-section .point-wrapper div .point-section-img {
  width:25em
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-start;
  width:25em;
  gap:1em
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h4 {
  font-size:2.5em;
  background-image:url(../p_ecocute/common/img/underline-point-section.svg);
  background-position:50% bottom;
  background-size:contain;
  padding-bottom:.2em;
  background-repeat:no-repeat;
  font-weight:700
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h4 span {
  font-size:.9em
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h5 {
  font-size:1.8em;
  margin:0;
  font-weight:700
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text p {
  letter-spacing:.03em;
  line-height:1.75em;
  font-size:.9em;
  text-align:left
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text .support-tel {
  display:flex;
  gap:.5em;
  flex-wrap:nowrap;
  flex-direction:row
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text .support-tel span {
  background-color:#122B78;
  border-radius:.5em;
  padding:.05em .3em .15em;
  color:#fff;
  font-weight:700
}

#ecocute-page #point .point-section .point-wrapper div .point-section-text .support-tel a {
  color:#122B78
}

#ecocute-page #point .point-section .guarantee {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:2em;
  margin-top:2em
}

#ecocute-page #point .point-section .guarantee img {
  width:25em
}

#ecocute-page #flow {
  font-size:.9em
}

#ecocute-page #flow .flow-wrapper h2 {
  text-align:center;
  font-size:3.3em;
  background-image:url(../p_ecocute/common/img/underline.svg);
  background-repeat:no-repeat;
  background-position:center 100%;
  background-size:contain;
  padding:0 .3em
}

#ecocute-page #mail-form {
  width:100%
}

#ecocute-page #mail-form .mail-form-wrapper {
  margin:3em auto;
  background-color:#fff;
  border-radius:1em;
  width:30em;
  min-width:550px;
  padding:2em 3em 5em
}

#ecocute-page #mail-form .mail-form-wrapper h2 {
  text-align:center;
  font-size:3em;
  white-space:nowrap;
  background-image:url(../p_ecocute/common/img/underline.svg);
  background-repeat:no-repeat;
  background-position:center bottom 0;
  background-size:8em
}

#ecocute-page #mail-form form {
  width:100%
}

#ecocute-page #mail-form form fieldset {
  border:none;
  padding:0;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  gap:.5em
}

#ecocute-page #mail-form form fieldset label {
  font-size:1.1em;
  font-weight:700;
  margin-top:1.5em;
  text-align:left
}

#ecocute-page #mail-form form fieldset .supplement {
  font-size:.9em;
  text-align:left
}

#ecocute-page #mail-form form fieldset .name-wrapper {
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:.5em
}

#ecocute-page #mail-form form fieldset .name-wrapper input {
  width:50%,
}

#ecocute-page #mail-form form fieldset textarea {
  resize:none;
  resize:vertical;
  min-height:5em
}

#ecocute-page #mail-form form fieldset input,#ecocute-page #mail-form form fieldset textarea {
  border-radius:.3em;
  border:none;
  background-color:#e4e4e4;
  padding:.3em .5em;
  width:100%;
  font-size:1em
}

#ecocute-page #mail-form form fieldset input[type=text]:focus,#ecocute-page #mail-form form fieldset textarea:focus,#ecocute-page #mail-form form fieldset #touroku_mail:focus,#ecocute-page #mail-form form fieldset #touroku_tel:focus {
  outline:none;
  background-color:#fff;
  box-shadow:inset 0 0 0 .1em #122B78
}

#ecocute-page #mail-form .post-code {
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:center;
  gap:.3em
}

input[type="radio"] {
  background-color:#fff
}

#ecocute-page #mail-form input[type="radio"]+label {
  margin:0;
  margin-top:.5em;
  background-color:#f1f1f1;
  padding:.3em .5em;
  border-radius:.3em;
  width:100%;
  padding-left:2em;
  font-size:1em
}

#ecocute-page #mail-form input[type="radio"] {
  display: block;
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none
}

#ecocute-page #mail-form input[type="radio"]:first-child+label {
  margin-top:0
}

form input[type="radio"]~label::before,form input[type="radio"]~label::after {
  top:50%;
  transform:translate(-50%,-50%);
  left:1em
}

form input[type="radio"]~label::before {
  background-color:#fff
}

#ecocute-page #mail-form .radio-button-wrapper {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  gap:1em
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button {
  margin-top:.3em
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button label::before {
  display:none
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button label::after {
  display:none
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button input {
  width:auto;
  display:none
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button input[type=radio]:checked+label {
  background-color:#ff0;
  font-weight:700
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button input[type=radio]:checked+label img {
  width:1em;
  margin-right:.3em
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button label {
  font-size:1em;
  font-weight:400;
  margin:0;
  padding:.2em .7em .3em;
  border-radius:.5em;
  background-color:#ecf1fb;
  color:#122B78;
  border:.15em solid #122B78;
  cursor:pointer;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  transition:.1s
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button label:hover {
  transition:.1s;
  box-shadow:0 0 .2em #122B78
}

#ecocute-page #mail-form .radio-button-wrapper .radio-button label img {
  width:0;
  transition:.1s
}

#ecocute-page #mail-form .formBtn-wrapper {
  margin-top:2em;
  position:relative;
  box-shadow:0 .3em 0 #009F79;
  transition:.2s;
  border-radius:100vw
}

#ecocute-page #mail-form .formBtn-wrapper::after {
  content:"";
  display:block;
  height:.75em;
  width:.75em;
  border-top:.3em solid #fff;
  border-right:.3em solid #fff;
  position:absolute;
  right:1.5em;
  top:50%;
  transform:rotate(45deg) translateY(-50%)
}

#ecocute-page #mail-form .formBtn-wrapper .formBtn {
  font-size:1.5em;
  font-weight:700;
  background-color:#00D2A0;
  border-radius:100vw;
  cursor:pointer;
  position:relative;
  color:#fff;
  padding:.5em .5em .2em
}

#ecocute-page #mail-form .formBtn-wrapper:hover {
  transform:translateY(.3em);
  box-shadow:0 0 0 #009F79
}

#ecocute-page #mail-form .require::before {
  content:"必須";
  font-size:.8em;
  font-weight:400;
  color:#fff;
  background-color:#122B78;
  padding:0 .3em .1em;
  border-radius:.2em;
  display:inline
}

#ecocute-page #mail-form .iframe-container {
  border-radius:.5em;
  border:.15em solid #122B78;
  width:100%;
  min-height:15em;
  overflow:hidden;
  resize:vertical
}

#ecocute-page #mail-form .privacypolicy {
  width:100%;
  height:100%;
  min-height:15em
}

#ecocute-page footer {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:2em;
  background-color:#fff;
  padding:3em 1em 1em
}

#ecocute-page footer img {
  margin:0 auto;
  width:15em
}

#ecocute-page footer .regions {
  max-width:44em;
  font-size:.8em;
  border-bottom:.1em solid #122B78;
  padding-bottom:1em
}

#ecocute-page footer .addres {
  font-size:.8em
}

#ecocute-page footer .division {
  display:flex;
  flex-wrap:nowrap
}

#ecocute-page footer .info {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:1em
}

#ecocute-page footer .info a {
  font-size:.8em;
  color:#122B78;
  text-align:center;
  position:relative
}

#ecocute-page footer .info a::after {
  position:absolute;
  content:"";
  height:.1em;
  width:0;
  background-color:#122B78;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  transition:.2s all
}

#ecocute-page footer .info a:hover::after {
  width:100%
}

#ecocute-page .fadeUp.active {
  animation-name:fadeUpAnime;
  animation-duration:.5s;
  animation-fill-mode:forwards
}

#ecocute-page .fadeScale.active {
  animation-name:fadeScaleAnime;
  animation-duration:1s;
  animation-fill-mode:forwards
}

#ecocute-page .fadeSlide.active {
  animation-name:fadeslideAnime;
  animation-duration:1s;
  animation-fill-mode:forwards
}

@keyframes fadeUpAnime  {

  from {
    transform:translateY(100px) rotate(10deg)
  }

  to {
    opacity:1;
    transform:translateY(0) rotate(0deg)
  }

}

@keyframes fadeScaleAnime  {

  from {
    transform:translateY(-10em) scale(1.5);
    filter:blur(.2em)
  }

  to {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0)
  }

}

@keyframes fadeslideAnime  {

  from {
    transform:translateX(20em);
    filter:blur(.2em)
  }

  to {
    opacity:1;
    transform:translateX(0);
    filter:blur(0)
  }

}

#ecocute-page .delay-time01 {
  animation-delay:.1s
}

#ecocute-page .delay-time02 {
  animation-delay:.2s
}

#ecocute-page .delay-time03 {
  animation-delay:.3s
}

#ecocute-page .delay-time04 {
  animation-delay:.4s
}

#ecocute-page .delay-time05 {
  animation-delay:.5s
}

#ecocute-page .delay-time06 {
  animation-delay:.6s
}

#ecocute-page .delay-time07 {
  animation-delay:.7s
}

#ecocute-page .delay-time08 {
  animation-delay:.8s
}

#ecocute-page .delay-time09 {
  animation-delay:.9s
}

#ecocute-page .delay-time10 {
  animation-delay:1s
}

@media screen and (max-width:1200px)  {

  #ecocute-page {
    font-size:2vw
  }

  #ecocute-page h2 {
    background-position:left 50% bottom 45%
  }

  #ecocute-page #top {
    font-size:max(10px,1vw);
    height:37em
  }

  #ecocute-page #top .top-word .catch-copy span {
    font-size:2em
  }

  #ecocute-page #top .top-word .catch-copy h1 {
    font-size:3.5em
  }

  #ecocute-page .top-banner {
    width:90%;
    margin:2em auto
  }

  #ecocute-page .titles {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
  }

  #ecocute-page .titles p {
    font-size:1.2em
  }

  #ecocute-page .titles,#ecocute-page .search-wrapper {
    width:85%
  }

  #ecocute-page .search-wrapper {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:4em;
    font-size:1.3em
  }

  #ecocute-page #result {
    order:2
  }

  #ecocute-page #maps {
    order:1
  }

  #ecocute-page .regions {
    width:100%;
    height:100%
  }

  #ecocute-page .regions .region-button {
    cursor:pointer;
    position:absolute;
    border-radius:100vw;
    border:#122B78 solid .15em;
    background-color:#fff;
    color:#122B78;
    font-size:1em
  }

  #ecocute-page .hokkaido {
    right:5%;
    top:5%
  }

  #ecocute-page .tohoku {
    top:35%;
    right:13.5%
  }

  #ecocute-page .shinetsu-hokuriku {
    top:50%;
    right:30%
  }

  #ecocute-page .kanto {
    top:65%;
    right:18%
  }

  #ecocute-page .tokai {
    bottom:4%;
    right:38.5%
  }

  #ecocute-page .kansai {
    bottom:17%;
    left:35%
  }

  #ecocute-page .chugoku {
    bottom:25%;
    left:21%
  }

  #ecocute-page .shikoku {
    bottom:3%;
    left:19.7%
  }

  #ecocute-page .kyushu {
    bottom:13%
  }

  #ecocute-page #flow {
    padding:2em;
    font-size:2.3vw
  }

  #ecocute-page #flow .flow-wrapper h2 {
    text-align:center;
    font-size:4em;
    background-image:url(../p_ecocute/common/img/underline.svg);
    background-repeat:no-repeat;
    background-position:center 65%;
    background-size:6em
  }

}

@media screen and (max-width:850px)  {

  #ecocute-page #top .top-word {
    margin-left:5em
  }

  #ecocute-page #top .top-img {
    width:50%;
    height:auto;
    position:relative
  }

  #ecocute-page #top .top-img img {
    width:90%;
    height:auto;
    margin-right:-5em
  }

  #ecocute-page #sp-contact {
    z-index:99999999999;
    display:flex;
    position:fixed;
    bottom:0;
    width:100%
  }

  #ecocute-page #sp-contact .header-mail,#ecocute-page #sp-contact .header-tel {
    width:50%;
    padding:.1em;
    position:relative
  }

  #ecocute-page #sp-contact .header-mail::before,#ecocute-page #sp-contact .header-tel::before {
    content:"";
    position:absolute;
    top:50%;
    right:1em;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-style:solid;
    border-top:.5em solid transparent;
    border-bottom:.5em solid transparent;
    border-left:.8em solid #fff;
    border-right:0
  }

  #ecocute-page #sp-contact .header-mail::after,#ecocute-page #sp-contact .header-tel::after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background-color:#fff;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    transition:.1s
  }

  #ecocute-page #sp-contact .header-mail:hover::after,#ecocute-page #sp-contact .header-tel:hover::after {
    opacity:.3
  }

  #ecocute-page #sp-contact .header-mail,#ecocute-page #sp-contact .header-tel div {
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    gap:.5em;
    color:#fff
  }

  #ecocute-page #sp-contact .header-mail img,#ecocute-page #sp-contact .header-tel div img {
    width:2em
  }

  #ecocute-page #sp-contact .header-mail {
    background-color:#00D2A0
  }

  #ecocute-page #sp-contact .header-mail .mail-contact-title {
    font-size:2em;
    padding-bottom:.1em
  }

  #ecocute-page #sp-contact .header-tel {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background-color:#FF6E37
  }

  #ecocute-page #sp-contact .header-tel .tel-contact-title {
    display:none
  }

  #ecocute-page #sp-contact .header-tel div .tel-num {
    font-size:2.5em
  }

  #ecocute-page #contact {
    width:100%
  }

  #ecocute-page #contact .contact-tags {
    flex-wrap:wrap;
    gap:1.5em;
    width:100%
  }

  #ecocute-page #contact .contact-tags .contact-tag {
    width:47%
  }

  #ecocute-page #contact .contact-tags .contact-tag span {
    font-size:1.5em
  }

  #ecocute-page #contact .contact-tags .contact-tag img {
    height:2.2em
  }

  #ecocute-page #contact .contact-btn {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:2em
  }

  #ecocute-page #contact .contact-btn .mail,#ecocute-page #contact .contact-btn .line,#ecocute-page #contact .contact-btn .tel {
    width:100%;
    height:4em;
    font-size:1.4em
  }

  #ecocute-page #contact .contact-btn .mail img,#ecocute-page #contact .contact-btn .line img,#ecocute-page #contact .contact-btn .tel img {
    height:3em;
    width:3em
  }

  #ecocute-page #contact .contact-btn .mail::after,#ecocute-page #contact .contact-btn .line::after,#ecocute-page #contact .contact-btn .tel::after {
    content:"";
    height:.9em;
    width:.9em;
    border-top:.35em solid #fff;
    border-right:.35em solid #fff
  }

  #ecocute-page #contact .contact-btn .mail span,#ecocute-page #contact .contact-btn .line span {
    font-size:1.5em
  }

  #ecocute-page #contact .contact-btn .tel span {
    font-size:2em
  }

  #ecocute-page #merchandise h2 {
    font-size:4.5vw;
    background-size:30%;
    background-position:left 50% bottom 42%
  }

  #ecocute-page #merchandise h2 span {
    font-size:6vw
  }

  #ecocute-page #contact .contact-btn a span {
    margin-bottom:-.3em
  }

  #ecocute-page #point {
    padding-top:7em
  }

  #ecocute-page #point .point-title .point-sub-title {
    font-size:2em
  }

  #ecocute-page #point .point-title h2 {
    font-size:4em
  }

  #ecocute-page #point .point-title h2 .four {
    font-size:1.5em
  }

  #ecocute-page #point .point-title h2 .joshi {
    font-size:.8em
  }

  #ecocute-page #point .point-title h2 .halo {
    position:absolute;
    top:-.4em;
    left:-1.3em;
    width:1.5em
  }

  #ecocute-page #point .point-section {
    padding:5em 2em
  }

  #ecocute-page #point .point-section .point-num {
    font-size:8em;
    line-height:1;
    position:absolute;
    top:-1.2em;
    color:#C8D5FF
  }

  #ecocute-page #point .point-section:nth-child(odd) .point-num {
    left:0
  }

  #ecocute-page #point .point-section:nth-child(even) .point-num {
    right:0
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-img {
    width:40vw
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text {
    width:60vw
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title {
    line-height:1.5;
    margin-bottom:.5em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h4 {
    font-size:2em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h4 span {
    font-size:1em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h5 {
    font-size:1.5em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text p {
    font-size:1em
  }

  #ecocute-page #point .point-section .guarantee img {
    width:45%
  }

  #ecocute-page footer {
    padding:3em 1em 5em
  }

}

#ecocute-page .fadeUp.active {
  animation-name:fadeUpAnime;
  animation-duration:.5s;
  animation-fill-mode:forwards
}

#ecocute-page .fadeScale.active {
  animation-name:fadeScaleAnime;
  animation-duration:1s;
  animation-fill-mode:forwards
}

#ecocute-page .fadeSlide.active {
  animation-name:fadeslideAnime;
  animation-duration:1s;
  animation-fill-mode:forwards
}

@keyframes fadeUpAnime  {

  from {
    transform:translateY(100px) rotate(10deg)
  }

  to {
    opacity:1;
    transform:translateY(0) rotate(0deg)
  }

}

@keyframes fadeScaleAnime  {

  from {
    transform:translateY(-10em) scale(1.5);
    filter:blur(.2em)
  }

  to {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0)
  }

}

@keyframes fadeslideAnime  {

  from {
    transform:translateX(20em);
    filter:blur(.2em)
  }

  to {
    opacity:1;
    transform:translateX(0);
    filter:blur(0)
  }

}

#ecocute-page .delay-time01 {
  animation-delay:.1s
}

#ecocute-page .delay-time02 {
  animation-delay:.2s
}

#ecocute-page .delay-time03 {
  animation-delay:.3s
}

#ecocute-page .delay-time04 {
  animation-delay:.4s
}

#ecocute-page .delay-time05 {
  animation-delay:.5s
}

#ecocute-page .delay-time06 {
  animation-delay:.6s
}

#ecocute-page .delay-time07 {
  animation-delay:.7s
}

#ecocute-page .delay-time08 {
  animation-delay:.8s
}

#ecocute-page .delay-time09 {
  animation-delay:.9s
}

#ecocute-page .delay-time10 {
  animation-delay:1s
}

@media screen and (max-width:768px)  {

  #ecocute-page {
    font-size:2.3vw
  }

  #ecocute-page .display_pc {
    display:none
  }

  #ecocute-page .display_sp {
    display:block
  }

  #ecocute-page body {
    font-size:2.5vw
  }

  #ecocute-page .br-pc {
    display:none
  }

  #ecocute-page .br-sp {
    display:block
  }

  #ecocute-page .sp-none {
    display:none
  }

  #ecocute-page .visual h1 {
    top:50%;
    font-size:4em;
    width:calc(100% - 2em)
  }

  #ecocute-page h2::after {
    margin:max(2rem,2vw) auto
  }

  #ecocute-page .search-wrapper {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:4em
  }

  #ecocute-page #sp-contact {
    min-height:5em
  }

  #ecocute-page #sp-contact .header-mail,#ecocute-page #sp-contact .header-tel {
    padding:.5em
  }

  #ecocute-page #sp-contact .header-mail::before,#ecocute-page #sp-contact .header-tel::before {
    right:.5em
  }

  #ecocute-page #sp-contact .header-mail .mail-contact-title {
    font-size:1.8em;
    padding-bottom:.1em
  }

  #ecocute-page #sp-contact .header-tel .tel-contact-title {
    display:none
  }

  #ecocute-page #sp-contact .header-tel div .tel-num {
    font-size:2.2em
  }

  #ecocute-page #top {
    flex-direction:column;
    justify-content:space-between;
    height:40em;
    min-height:50em;
    max-height:80vh;
    position:relative;
    font-size:2.7vw;
    overflow:hidden
  }

  #ecocute-page #top .top-word {
    width:100%;
    margin-top:2.5em;
    margin-left:0
  }

  #ecocute-page #top .top-word .catch-copy h1 {
    font-size:3em
  }

  #ecocute-page #top .top-img {
    width:100%;
    height:100vh;
    position:relative
  }

  #ecocute-page #top .top-img img {
    width:100%;
    height:auto;
    margin-right:0
  }

  #ecocute-page .top-banner img {
    width:90%;
    margin:0 auto
  }

  #ecocute-page .banner {
    flex-direction:column;
    gap:0;
    background:#ffb85b;
    background:radial-gradient(#ffb85b 0%,#fb8638 100%);
    color:#fff;
    font-weight:700;
    line-height:1.1;
    width:100%;
    margin:0 auto;
    border-radius:1em;
    white-space:nowrap;
    font-size:4vw;
    padding:1em
  }

  #ecocute-page .banner .left {
    display:flex;
    flex-direction:column
  }

  #ecocute-page .banner .left span {
    font-size:3em
  }

  #ecocute-page .banner .left div {
    display:flex;
    flex-wrap:nowrap;
    gap:1em
  }

  #ecocute-page .banner .left div span {
    font-size:2.2em
  }

  #ecocute-page .banner .left div span span {
    font-size:1.4em
  }

  #ecocute-page .banner .right {
    flex-wrap:wrap;
    margin-top:-.8em;
    gap:0
  }

  #ecocute-page .banner .right .rigth-left {
    font-size:2.5em;
    position:relative;
    text-shadow:0 0 .5vw rgba(255,255,104,.6117647059)
  }

  #ecocute-page .banner .right .rigth-left .num {
    font-size:2.3em
  }

  #ecocute-page .banner .right .rigth-left .subsidy {
    position:absolute;
    right:0;
    top:.5em;
    font-size:.65em
  }

  #ecocute-page .banner .right .right-right {
    display:contents
  }

  #ecocute-page .banner .right .right-right img {
    order:2;
    width:100%
  }

  #ecocute-page .banner .right .right-right span {
    order:1;
    font-size:3.7em;
    margin-left:.1em
  }

  #ecocute-page .titles {
    margin-bottom:3em
  }

  #ecocute-page .titles h2 {
    background-position:left 50% bottom 0;
    margin-bottom:.5em;
    background-size:7em
  }

  #ecocute-page .titles p {
    font-size:max(14px,1em)
  }

  #ecocute-page #merchandise h2 {
    font-size:2em
  }

  #ecocute-page #merchandise h2 span {
    font-size:1.5em
  }

  #ecocute-page #side-note {
    width:80%;
    margin:3em auto 2em
  }

  #ecocute-page #side-note p {
    font-size:16px
  }

  #ecocute-page #add-cost {
    width:85%;
    margin:2em auto;
    background-color:#fff;
    overflow:hidden;
    border-radius:.5em;
    border:.2em solid #122B78
  }

  #ecocute-page #add-cost .top {
    color:#fff;
    background-color:#122B78;
    text-align:center;
    padding-bottom:.1em;
    font-size:1.7em;
    font-weight:700
  }

  #ecocute-page #add-cost .bottom p {
    padding:.5em 1em;
    font-size:max(14px,1.1em)
  }

  #ecocute-page #add-cost .bottom p span {
    color:#C21F1F;
    font-weight:700
  }

  #ecocute-page #result {
    order:2;
    width:100%
  }

  #ecocute-page #result .sub-result {
    font-size:max(13px,1.2em)
  }

  #ecocute-page #maps {
    order:1
  }

  #ecocute-page .regions .region-button {
    font-size:max(12px,1.1em)
  }

  #ecocute-page .hokkaido {
    right:2.2%;
    top:5%
  }

  #ecocute-page .tohoku {
    top:35%;
    right:12%
  }

  #ecocute-page .shinetsu-hokuriku {
    top:50%;
    right:30%
  }

  #ecocute-page .kanto {
    top:65%;
    right:16%
  }

  #ecocute-page .tokai {
    bottom:4%;
    right:35%
  }

  #ecocute-page .kansai {
    bottom:14%;
    left:35%
  }

  #ecocute-page .chugoku {
    bottom:23%;
    left:19%
  }

  #ecocute-page .shikoku {
    bottom:2%;
    left:18%
  }

  #ecocute-page .kyushu {
    bottom:13%;
    left:0
  }

  #ecocute-page #merchandise h2 {
    font-size:7vw;
    background-size:30%;
    background-position:left 50% bottom 42%
  }

  #ecocute-page #merchandise h2 span {
    font-size:9vw
  }

  #ecocute-page #point {
    padding-top:7em;
    width:100%
  }

  #ecocute-page #point .point-title {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    margin-bottom:14em;
    font-size:1.1em
  }

  #ecocute-page #point .point-title .point-sub-title {
    font-size:2em
  }

  #ecocute-page #point .point-title h2 {
    margin-top:-.7em;
    font-size:4.5em;
    position:relative;
    background-image:url(../p_ecocute/common/img/underline-point.svg);
    background-size:100%;
    background-repeat:no-repeat;
    background-position:100% 100%;
    letter-spacing:-.1em;
    margin-bottom:-.7em
  }

  #ecocute-page #point .point-title h2 .four {
    font-size:1.5em
  }

  #ecocute-page #point .point-title h2 .joshi {
    font-size:.8em
  }

  #ecocute-page #point .point-title h2 .halo {
    position:absolute;
    top:-.15em;
    left:-.8em;
    width:1em
  }

  #ecocute-page #point:first-child {
    margin:0 auto 100em
  }

  #ecocute-page #point .point-section {
    width:100%;
    position:relative;
    background-color:#fff;
    padding:7em 1em;
    margin:10em auto
  }

  #ecocute-page #point .point-section .point-num {
    font-size:11em;
    line-height:1;
    position:absolute;
    top:-1.2em;
    color:#C8D5FF
  }

  #ecocute-page #point .point-section:nth-child(odd) .point-num {
    left:50%;
    transform:translateX(-50%)
  }

  #ecocute-page #point .point-section:nth-child(even) .point-num {
    right:auto;
    left:50%;
    transform:translateX(-50%)
  }

  #ecocute-page #point .point-section .point-wrapper div {
    flex-direction:column;
    gap:3em
  }

  #ecocute-page #point .point-section .point-wrapper div.point03 {
    align-items:center
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-img {
    width:85%;
    order:1
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text {
    order:2;
    width:85%;
    gap:1em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title {
    line-height:1.5;
    margin-bottom:.5em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h4 {
    font-size:4em;
    background-position:50% bottom;
    background-size:contain;
    padding-bottom:.2em;
    background-repeat:no-repeat
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h4 span {
    font-size:.9em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .point-section-title h5 {
    font-size:2.5em;
    margin:0
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .p-s-tit2 h4 {
    font-size:4.7em;
    line-height:1.1;
    margin:.1em 0;
    padding-right:2em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .p-s-tit2 h5 {
    font-size:3.2em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .p-s-tit3 h4 {
    font-size:3.5em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .p-s-tit3 h5 {
    font-size:2.5em
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text p {
    letter-spacing:.03em;
    line-height:1.75em;
    font-size:max(14px,1.5em)
  }

  #ecocute-page #point .point-section .point-wrapper div .point-section-text .support-tel {
    font-size:max(14px,1.5em)
  }

  #ecocute-page #point .point-section .guarantee {
    flex-direction:column;
    gap:2em;
    margin:3em auto 0;
    width:80%
  }

  #ecocute-page #point .point-section .guarantee img {
    width:100%
  }

  #ecocute-page #mail-form {
    font-size:max(16px,1vw);
    width:100%
  }

  #ecocute-page #mail-form .mail-form-wrapper {
    width:calc(100% - 2em);
    min-width:0;
    max-width:450px;
    padding:1em 1.5em 3em
  }

  #ecocute-page #mail-form .mail-form-wrapper h2 {
    font-size:6vw;
    background-size:70%
  }

  #ecocute-page footer img {
    margin:0 auto;
    width:15em
  }

  #ecocute-page footer .regions {
    max-width:90%;
    font-size:1em;
    border-bottom:.1em solid #122B78;
    padding-bottom:1em
  }

  #ecocute-page footer .addres {
    font-size:1em
  }

  #ecocute-page footer .info {
    flex-direction:column
  }

  #ecocute-page footer .info a {
    font-size:1em
  }

  #ecocute-page footer .info a:hover::after {
    width:100%
  }

}

.graphs {
  background-color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:5em 3em;
  gap:5em
}

.graph-wrap {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:3em;
  position:relative
}

.graph {
  background-color:#ecf1fb;
  max-width:30em;
  width:100%;
  text-align:left;
  border-radius:1em;
  overflow:hidden;
  border:.2em solid #192e77
}

.graph h3 {
  font-size:1.5em;
  font-weight:700;
  width:100%;
  background-color:#192e77;
  color:#fff;
  padding:.75em 1.5em;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap
}

.graph p {
  font-size:18px
}

.graph a {
  border:.2em solid #192e77;
  background-color:#fff;
  padding:.7em 1em;
  border-radius:10em;
  box-shadow:0 .3em 0 #192e77;
  transition:.15s all;
  position:relative
}

.graph a::after {
  content:"";
  height:.75em;
  width:.75em;
  border-top:.25em solid #192e77;
  border-right:.25em solid #192e77;
  position:absolute;
  right:1.5em;
  top:50%;
  transform:translateY(-50%) rotate(45deg)
}

.graph a:hover {
  box-shadow:0 0 0 #192e77;
  transform:translateY(.3em)
}

.graph a img {
  width:75%;
  margin:0 auto
}

.graph-img {
  width:100%
}

.graph-img img {
  width:100%;
  margin:0 auto
}

.graph-padding {
  padding:2em;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5em
}

.graph-illust {
  height:17em;
  width:auto
}

.comparison {
  background-color:#ecf1fb;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:5em 2em 0;
  gap:5em
}

.comparison h2 {
  font-size:4em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.3em;
  background-color:#192e77;
  color:#fff;
  padding:.1em .3em
}

.comparison h2 span {
  color:#fff;
  margin-bottom:-.2em
}

.comparison h2 img {
  height:1em;
  width:auto
}

.comparison-items {
  display:flex;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  gap:5vw
}

.comparison-item {
  background-color:#fff;
  box-shadow:.3em .3em 0 #192e77;
  border:.25em solid #192e77;
  border-radius:15em 15em 1.5em 1.5em;
  width:20em;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex-direction:column;
  gap:2em;
  padding:1em;
  position:relative
}

.comparison-item .item-name {
  background-image:url(../img/electric-waterheater/name-plate.svg);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  color:#fff;
  font-weight:700;
  font-size:2.2em;
  line-height:1;
  padding:.3em 1.5em .2em;
  margin-top:.5em;
  white-space:nowrap;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:18em;
  height:1.7em;
  display:flex;
  align-items:center;
  justify-content:center
}

.comparison-item img {
  height:13em;
  width:auto;
  object-fit:contain;
  margin-top:-1.5em
}

.comparison-item::before {
  content:"";
  height:4em;
  width:100%
}

.merit-wrap,.demerit-wrap {
  width:100%;
  border-radius:.5em;
  position:relative;
  padding:1.5em 1em 1em
}

.merit-wrap {
  border:.25em solid #FF961D;
  color:#ff5100;
  box-shadow:.3em .3em 0 #FF961D
}

.demerit-wrap {
  border:.25em solid #192e77;
  box-shadow:.3em .3em 0 #192e77
}

.merit-wrap>span,.demerit-wrap>span {
  position:absolute;
  left:50%;
  top:-1.1em;
  transform:translateX(-50%);
  background-color:#fff;
  padding:.4em 1em .2em;
  border-radius:10em;
  font-weight:700;
  font-size:1.3em;
  white-space:nowrap;
  color:#fff;
  line-height:1
}

.merit-wrap>span {
  background-color:#FF961D
}

.demerit-wrap>span {
  background-color:#192e77
}

.merit-wrap>ul li,.demerit-wrap>ul li {
  text-align:left;
  font-weight:700;
  list-style-type:disc;
  margin-left:1em
}

.demerit-wrap>ul li span {
  color:#ff5100
}

.comment {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center
}

.hukidasi {
  width:35em;
  height:13em;
  background-image:url(../img/electric-waterheater/speech-bubble.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  position:relative
}

.hukidasi p {
  position:absolute;
  top:50%;
  left:calc(50% - 0.5em);
  transform:translate(-50%,-50%);
  font-weight:700;
  font-size:1.25em;
  white-space:nowrap;
  text-align:left;
  line-height:1.5
}

.hukidasi span {
  background:linear-gradient(transparent 50%,#fdeb3f 50%)
}

.commentator {
  width:15em;
  height:auto
}

.commentator img {
  margin:0 auto
}

.ecocute-btn-area {
  width:100%;
  background-color:#fff;
  padding:2em
}

.ecocute-btn {
  margin:0 auto;
  display:block;
  width:35em;
  transition:.15s all
}

.ecocute-btn:hover {
  opacity:.8
}

@media screen and (max-width:768px)  {

  .graphs {
    gap:15em;
    padding:5em 3em 15em
  }

  .graph {
    max-width:none
  }

  .graph h3 {
    font-size:2.1em
  }

  .graph a:hover {
    box-shadow:0 .3em 0 #192e77;
    transform:translateY(0em)
  }

  .graph-illust {
    position:absolute;
    height:15em;
    width:auto;
    bottom:-11em
  }

  .graph-padding {
    padding:3em 3em 5em;
    gap:2em
  }

  .comparison {
    font-size:1.8em;
    padding:3em 2em 0;
    gap:3em
  }

  .comment {
    flex-wrap:wrap
  }

  .hukidasi {
    width:125vw;
    height:20em;
    background-image:url(../img/electric-waterheater/speech-bubble_sp.svg);
    background-position:center;
    background-repeat:no-repeat;
    margin-left:1em
  }

  .hukidasi p {
    top:43%;
    left:calc(50% - 0.5em);
    font-size:1.35em;
    white-space:wrap;
    width:calc(100% - 7em)
  }

  .hukidasi br {
    display:none
  }

  .commentator {
    width:100%
  }

  .commentator img {
    width:50%;
    margin:0 auto
  }

  .ecocute-btn-area {
    padding:3em 2em
  }

  .ecocute-btn {
    width:100%;
    height:auto;
    filter:drop-shadow(.3em .3em .5em #192d7780)
  }

  .ecocute-btn:hover {
    opacity:1
  }

  .comparison-items {
    gap:5em
  }

}