@charset "UTF-8";
#cmmpoint {
  font-family: "Noto Sans JP", 游ゴシック Medium, 游ゴシック体, Yu Gothic Medium, YuGothic, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
  color: #878787;
  background: #fffef4;
}
#cmmpoint .pc-only {
  display: block;
}
#cmmpoint .sp-only {
  display: none;
}
#cmmpoint img {
  vertical-align: bottom;
}
#cmmpoint .inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1080px;
}
/*
blue 00b6eb
aqua 82d0ef
water e9f7fc
orange ff9314
red eb1e1e
green 06c755

*/
/* ----------------------------------------------------------

 #sec01

---------------------------------------------------------- */
#cmmpoint #sec-01 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: url("/ep/support/kurashi-tepco/point/images/bg_mv.png") #ffffff no-repeat 50% 50%;
  background-size: cover;
}
#cmmpoint .sec-01 {
  padding: 100px 0 70px;
}
#cmmpoint p.lead {
  margin: 0 0 48px;
}
#cmmpoint p.lead img {
  width: 100%;
  height: auto;
}
#cmmpoint .sec-01 .hero-box {
  margin: 0 0 150px;
  display: flex;
}
#cmmpoint .sec-01 .hero-box::before {
  content: "";
  display: block;
  padding-top: 30%;
}
#cmmpoint .sec-01 .hero-box .left {
  width: 76.666%;
  position: relative;
}
#cmmpoint .sec-01 .hero-box .left h1 {
  position: absolute;
  left: -5px;
}
#cmmpoint .sec-01 .hero-box .left h1 img {
  width: 100%;
  height: auto;
}
#cmmpoint .sec-01 .hero-box .right {
  width: 23.334%;
  position: relative;
}
#cmmpoint .sec-01 .hero-box .right img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 85px;
  right: -29px;
}
#cmmpoint .box-row {
  margin: 0 0 1em;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#cmmpoint .box-row::after {
  content: '';
  display: flex;
  width: 58px;
  height: 58px;
  background-image: url(../images/img_plus_l.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#cmmpoint .box-blue {
  padding: 34px 34px 0;
  width: 45%;
  background: #00b6eb;
  border-radius: 12px;
  box-sizing: border-box;
  position: relative;
  white-space: nowrap;
}
#cmmpoint .box-blue h2 {
  margin: 0;
  min-height: 3em;
  border: solid 4px #82d0ef;
  background: #ffffff;
  text-align: center;
  color: #00b6eb;
  font-size: 29px;
  font-weight: 700;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cmmpoint .box-blue p {
  margin: 15px 0 0;
  text-align: center;
}
#cmmpoint span.f-1 {
  font-size: 34px;
  color: #ffffff;
  font-weight: 700;
  position: relative;
}
#cmmpoint span.f-2 {
  margin: 0.5em 0 -1.4em;
  display: block;
  font-size: 27px;
  color: #ffffff;
  font-weight: 700;
}
#cmmpoint span.f-3 {
  margin: 0;
  display: inline-block;
  font-size: 98px;
  color: #ffffff;
  font-weight: 900;
}
#cmmpoint span.f-4 {
  font-size: 41px;
  color: #ffffff;
  font-weight: 700;
  position: relative;
}
#cmmpoint span.f-5 {
  margin: -0.3em 0 0em;
  display: block;
  font-size: 52px;
  color: #ffffff;
  font-weight: 700;
}
#cmmpoint span.sup {
  font-size: 17px;
  color: #ffffff;
  font-weight: 400;
}
#cmmpoint span.vrl {
  font-size: 37px;
  color: #ffffff;
  font-weight: 400;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#cmmpoint span.sup-1 {
  position: absolute;
  top: -0.5em;
  right: -2.5em;
  color: #ffffff;
  font-size: 17px;
  font-weight: 400;
}
#cmmpoint span.sup-2 {
  position: absolute;
  top: -1.2em;
  right: 0em;
  color: #ffffff;
  font-size: 17px;
  font-weight: 400;
}
#cmmpoint .box-orange {
  padding: 34px 34px 20px;
  width: 45%;
  background: #ff9314;
  border-radius: 12px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  white-space: nowrap;
}
#cmmpoint .box-orange h2 {
  margin: 0 0 15px;
  padding: 0 0;
  min-height: 3em;
  border: solid 4px #f5c17e;
  background: #ffffff;
  text-align: center;
  color: #ff9314;
  font-size: 29px;
  font-weight: 700;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}
#cmmpoint .box-orange .sub-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#cmmpoint .box-orange h2 .text-s {
  line-height: 1.3;
  font-size: 24px;
}
#cmmpoint .box-orange span.f-3 {
  margin: -0.1em 0 0;
  display: inline-block;
  font-size: 98px;
  color: #ffffff;
  font-weight: 900;
}
#cmmpoint .new {
  position: absolute;
  top: -3.5%;
  left: -8%;
  z-index: 1;
}
#cmmpoint .new p {
  padding: 0 0 0.2em;
  position: relative;
  color: #ffffff;
  font-size: 38px;
  font-weight: 700;
}
#cmmpoint .new::before {
  content: '';
  display: flex;
  width: 152px;
  height: 148px;
  background-image: url(../images/baloon.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ----------------------------------------------------------

 #sec02

---------------------------------------------------------- */
#sec-02 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: #e9f7fc;
}
#cmmpoint .sec-02 {
  padding: 80px 0;
}
#cmmpoint .inner {}
#cmmpoint .sec-02-container {
  margin: 0 0 50px;
  padding: 36px;
  border-radius: 24px;
  background: #00b6eb;
}
#cmmpoint .sec-02-body {
  padding: 50px 50px 40px;
  border: 10px solid #e8e8e8;
  background: #ffffff;
}
#cmmpoint .sec-02-body.bg {
  background: url("/ep/support/kurashi-tepco/point/images/bg_bluebox.png") no-repeat 100% 0% #ffffff;
  background-size: 50%;
}
#cmmpoint .sec-02-box-1 {
  margin: -10px 0 0;
  border-bottom: 6px solid #e8e8e8;
}
#cmmpoint .sec-02-box-1 h2 {
  width: 410px;
  height: 108px;
  padding: 0 15px 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border: 4px solid #00b6eb;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 700;
  color: #00b6eb;
  box-sizing: border-box;
  text-align: right;
  position: relative;
}
#cmmpoint .sec-02-box-1 h2 img {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: 90px;
  height: auto;
}
#cmmpoint .sec-02-box-1 .row {
  display: flex;
}
#cmmpoint .sec-02-box-1 .left {
  width: 50%;
  padding: 30px 0 20px;
  font-size: 23px;
  font-weight: 500;
  line-height: 38px;
}
#cmmpoint .sec-02-box-1 .left p {
  margin: 0 0 0.5em;
  padding: 0;
  font-weight: 500;
}
#cmmpoint .sec-02-box-1 .left span.blue {
  color: #00b6eb;
}
#cmmpoint .sec-02-box-1 .right {
  width: 50%;
  padding: 35px 0 0;
}
#cmmpoint .sec-02-box-1 .right img {
  width: 100%;
  height: auto;
}
#cmmpoint .sec-02-box-2 {
  margin: 40px 0 0;
  position: relative;
}
#cmmpoint .sec-02-box-2 h2 {
  width: 410px;
  height: 108px;
  padding: 0 30px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 4px solid #ff9314;
  border-radius: 14px;
  font-size: 32px;
  font-weight: 700;
  color: #ff9314;
  box-sizing: border-box;
  text-align: right;
  line-height: 1.3;
  position: relative;
}
#cmmpoint .sec-02-box-2 h2 img {
  position: absolute;
  top: 65%;
  left: -11%;
  transform: translateY(-65%);
  width: 138px;
  height: auto;
}
#cmmpoint .sec-02-box-2 h2 p {
  margin: 0;
  padding: 0;
  font-size: 32px;
  font-weight: 700;
}
#cmmpoint .sec-02-box-2 h2 span.text-s {
  margin: 0;
  padding: 0;
  font-size: 20px;
}
#cmmpoint .attention {
  font-size: 32px;
  font-weight: 700;
  color: #ff9314;
}
#cmmpoint .sec-02-box-2 p.lead {
  margin: 30px 0 41%;
  font-size: 23px;
  font-weight: 500;
  line-height: 38px;
  position: relative;
  z-index: 2;
}
#cmmpoint .orange {
  color: #ff9314;
}
#cmmpoint .step-box {
  position: absolute;
  left: -58px;
  top: 0;
}
#cmmpoint .step-box::before {
  content: "";
  padding: 18% 0 0;
  display: block
}
#cmmpoint .step-box::after {
  content: "";
  padding-bottom: 18%;
  display: block
}
#cmmpoint .step-box img {
  width: 102%;
  height: auto;
}
#cmmpoint p.note.annotation {
  font-size: 15px;
  line-height: 26px;
  text-indent: -1.2em;
  margin: 0 0 0 1.2em;
  padding: 0;
}
#cmmpoint h2.ribon {
  margin: 0;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00b6eb;
  color: #ffffff;
  text-align: center;
  font-size: 36px;
  line-height: 47px;
  font-weight: 700;
  border-radius: 16px;
  position: relative;
}
#cmmpoint h2.ribon + p {
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 34px;
  font-weight: 500;
}
#cmmpoint h2.ribon img {
  width: 107px;
  height: auto;
  position: absolute;
  top: -45px;
  left: calc(50% - 53px);
  transform: translateY(-50%);
}
#cmmpoint .sec-02 h3 {
  margin: 0 0 0 -0.5em;
  padding: 0;
  font-size: 15px;
  line-height: 26px;
}
#cmmpoint .sec-02-container + h3 {
  margin: -20px 0 0 -0.5em;
}
#cmmpoint .sec-02 ul.note {
  margin: 0;
  padding: 0;
}
#cmmpoint .sec-02 ul.note li {
  font-size: 15px;
  line-height: 26px;
  list-style: none;
  text-indent: -1.2em;
  margin: 0 0 0 1.2em;
}
/* ----------------------------------------------------------

 #sec03

---------------------------------------------------------- */
#sec-03 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 0;
  background: #ffffff;
}
.sec-03 {}
#cmmpoint h2.orange {
  margin: 0;
  padding: 20px 0;
  background: #ff9314;
  border-radius: 12px;
  font-size: 33px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#cmmpoint h2.orange img {
  width: 123px;
  height: auto;
  position: absolute;
  top: -38px;
  left: 32px;
}
#cmmpoint .sec-03 p.lead {
  margin: 20px 0 40px;
  text-align: center;
  font-size: 28px;
  color: #ff9314;
}
#cmmpoint .sec-03 p.lead .under-line {
  border-bottom: 2px solid #ff9314;
}
#cmmpoint .line-box-orange {
  margin: 60px 0 0;
  padding: 82px 62px 57px 60px;
  position: relative;
  border: 8px solid #ff9314;
  border-radius: 12px;
}
#cmmpoint .line-box-orange h3 {
  height: 64px;
  position: absolute;
  padding: 15px 70px;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  background: #ff9314;
  border-radius: 9999px;
  box-sizing: border-box;
}
#cmmpoint .line-box-orange img {
  width: 100%;
  height: auto;
}
#cmmpoint h2.green {
  margin: 65px 0 0;
  padding: 20px 0;
  background: #06c755;
  border-radius: 12px;
  font-size: 33px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cmmpoint .line-box-green {
  margin: 40px 0 0;
  padding: 30px 62px 40px 60px;
  position: relative;
  border: 8px solid #06c755;
  border-radius: 12px;
  text-align: center;
}
#cmmpoint .line-box-green .row {
  display: flex;
}
#cmmpoint .line-box-green .left {
  width: 70%;
}
#cmmpoint .line-box-green .right {
  width: 25%;
}
#cmmpoint .line-box-green .right img {
  margin: 0 0 0 40px;
  width: 100%;
  height: auto;
}
#cmmpoint .line-box-green p {
  font-size: 26px;
  line-height: 35px;
  font-weight: 700;
}
#cmmpoint .line-box-green .green {
  color: #06c755;
}
#cmmpoint .line-box-green .text-box {}
#cmmpoint p.text-large .under-line {
  margin: 0 0 0.2em;
  padding: 0 0 0.1em;
  display: inline-block;
  font-size: 36px;
  line-height: 47px;
  font-weight: 700;
  background: linear-gradient(transparent 94%, #06c755 10%);
}
#cmmpoint p.text-large .green {
  padding: 0 0 0.1em;
  display: inline-block;
  font-size: 36px;
  line-height: 47px;
  font-weight: 700;
  color: #06c755;
}
#cmmpoint .cta {
  margin: 20px 0 0;
}
#cmmpoint .cta a {
  padding: 10px 110px;
  background: #06c755;
  border-radius: 9999px;
  text-decoration: none;
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  box-shadow: 6px 6px 0 #99e1ae;
}
#cmmpoint .cta a::after {
  content: '';
  display: block;
  width: 16px;
  height: 19px;
  background-image: url(../images/arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
}
/* ----------------------------------------------------------

 #sec04

---------------------------------------------------------- */
#cmmpoint #sec-04 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: #e9f7fc;
}
#cmmpoint .sec-04 {
  padding: 80px 0;
}
#cmmpoint #sec-04 h2 {
  margin: 0 0 30px;
  padding: 20px 0;
  background: #00b6eb;
  border-radius: 12px;
  font-size: 33px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px 0 #ffffff;
  position: relative;
}
#cmmpoint #sec-04 h2 img {
  width: 106px;
  height: auto;
  position: absolute;
  top: -106px;
  left: 50%;
  transform: translateX(-50%);
}
#cmmpoint .faq {}
#cmmpoint .faq .inner {}
#cmmpoint .faq dl {
  margin: 0 0 6px;
  background: #ffffff;
  border-radius: 12px;
}
#cmmpoint .faq dt {
  padding: 22px 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}
#cmmpoint .faq dt span {
  position: absolute;
  margin: 0 0.5em 0 0;
  padding: 0 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  background: #00b6eb;
  border-radius: 100%;
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  box-sizing: border-box;
}
#cmmpoint .faq dt p {
  width: 90%;
  margin: 0;
  padding: 0 60px 0;
  font-size: 20px;
  line-height: 31px;
}
#cmmpoint .faq dt:hover {}
#cmmpoint .faq dt::after {
  content: '';
  position: absolute;
  right: 15px;
  width: 32px;
  height: 32px;
  background-image: url("/ep/support/kurashi-tepco/point/images/img_plus_s.png");
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease, content 0.3s ease;
}
#cmmpoint .faq dl.open dt::after {
  background-image: url("/ep/support/kurashi-tepco/point/images/img_minus.png");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease, content 0.3s ease;
}
#cmmpoint .faq dd {
  margin:  0;
  padding: 0 17px 22px;
  display: none; /* 初期状態では非表示 */
  position: relative;
}
#cmmpoint .faq dd span {
  position: absolute;
  margin: 0 0.5em 0 0;
  padding: 0 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  background: #ff9314;
  border-radius: 100%;
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  box-sizing: border-box;
}
#cmmpoint .faq dd p {
  margin: 0;
  padding: 0 0 0 60px;
  font-size: 18px;
  line-height: 29px;
}
#cmmpoint .faq dd a {
  text-decoration: underline;
  color: inherit;
}
@media screen and (max-width: 767px) {
  #cmmpoint {
    width: 100%;
    
  }
  #cmmpoint .pc-only {
    display: none;
  }
  #cmmpoint .sp-only {
    display: block;
  }
  #cmmpoint .inner {
    width: 100%;
    
  }
  /* ----------------------------------------------------------

 #sec01

---------------------------------------------------------- */
#cmmpoint #sec-01 {
  width: auto;
  max-width: none;
  margin: 0 auto;
  background: url("/ep/support/kurashi-tepco/point/images/bg_mv_sp.png") #ffffff no-repeat 50% 50%;
  background-size: cover;
}
#cmmpoint .sec-01 {
  padding: 8vw 5.333vw 5.333vw;
}
#cmmpoint p.lead {
  margin: 0 0 4.0vw;
}
#cmmpoint p.lead img {
  width: 100%;
  height: auto;
}
#cmmpoint .sec-01 .hero-box {
  margin: 0 0 10vw;
  display: flex;
  align-items: flex-start;
}
#cmmpoint .sec-01 .hero-box::before {
  content: "";
  display: block;
  padding-top: 30%;
}
#cmmpoint .sec-01 .hero-box .left {
  width: 76.666%;
  position: relative;
}
#cmmpoint .sec-01 .hero-box .left h1 {
  margin: 0;
  padding: 0;
  position: absolute;
  left: -5px;
}
#cmmpoint .sec-01 .hero-box .left h1 img {
  width: 100%;
  height: auto;
}
#cmmpoint .sec-01 .hero-box .right {
  width: 23.334%;
  position: relative;
}
#cmmpoint .sec-01 .hero-box .right img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 6vw;
  right: -2vw;
}
#cmmpoint .box-row {
  margin: 0 0 1em;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#cmmpoint .box-row::after {
  width:  4.8vw;
  height:  4.8vw;
}
#cmmpoint .box-blue {
  padding: 3.333vw 3.333vw 2.0vw; 
  width: 40.933vw;
  border-radius: 1.2vw;
}
#cmmpoint .box-blue h2 {
  margin: 0 0 2.933vw;
  min-height: 8.267vw;
  border: none;
  font-size: 2.667vw;
  line-height: 1.2;
  border-radius: 1.067vw;
}
#cmmpoint .box-blue p {
  margin: 0 0 0;
  text-align: center;
  line-height: 1.3;
}
#cmmpoint span.f-1 {
  font-size: 2.8vw;
}
#cmmpoint span.f-2 {
  margin: 0.5em 0 -1em;
  font-size: 2.4vw;
}
#cmmpoint span.f-3 {
  margin: -1.333vw 0 0;
  font-size: 8.8vw;
}
#cmmpoint span.f-4 {
  font-size: 3.733vw;
}
#cmmpoint span.f-5 {
  margin: 0;
  font-size: 4.533vw;
}
#cmmpoint span.vrl {
  font-size: 3.333vw;
}
#cmmpoint span.sup-1 {
  top: -1em;
  right: -2em;
  font-size: 2.133vw;
}
#cmmpoint span.sup-2 {
  top: -1.2em;
  right: 0em;
  font-size: 2.133vw;
}
#cmmpoint .box-orange {  
  padding: 3.333vw 3.333vw 2.0vw;
  width: 40.933vw;
  border-radius: 1.2vw;
}
#cmmpoint .box-orange h2 {
  border: none;
  color: #ff9314;
  margin: 0 0 2vw;
  min-height: 8.267vw;
  font-size: 2.667vw;
  border-radius: 1.067vw;
}
  #cmmpoint .box-orange p{
    line-height: 1.3;
  }
#cmmpoint .box-orange .sub-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#cmmpoint .box-orange h2 .text-s {
  line-height: 1.3;
  font-size:  2.0vw;
}
#cmmpoint .box-orange p span.f-1 {
  line-height: 1;
}
#cmmpoint .box-orange span.f-3 {
  margin: -0.8vw 0 0;
  font-size: 8.8vw;
}

#cmmpoint .new {
  position: absolute;
  top: -3.5%;
  left: -8%;
  z-index: 1;
}
#cmmpoint .new p {
  padding: 0 0 0.2em;
  font-size: 3.2vw;
}
#cmmpoint .new::before {
  width: 12.533vw;
  height: 12.267vw;
}
/* ----------------------------------------------------------

 #sec02

---------------------------------------------------------- */
#sec-02 {
  width: 100%;
}
#cmmpoint .sec-02 {
  padding: 6.667vw 5.333vw;
  box-sizing: border-box;
}
#cmmpoint .inner {}
#cmmpoint .sec-02-container {
  margin: 0 0 5.867vw;
  padding: 2.667vw;
  border-radius: 3.733vw;
}
#cmmpoint .sec-02-body {
  padding: 4.0vw;
  border: 1.6vw solid #e8e8e8;
  background: #ffffff;
}
#cmmpoint .sec-02-body.bg {
  background: url("/ep/support/kurashi-tepco/point/images/bg_bluebox_sp.png") no-repeat 100% 0% #ffffff;
  background-size: 35%;
}
#cmmpoint .sec-02-box-1 {
  margin: -10px 0 0;
  border-bottom: 0.8vw solid #e8e8e8;
}
#cmmpoint .sec-02-box-1 h2 {
  width: 49.6vw;
  height: 12.267vw;
  margin:  3.333vw 0 0;
  padding: 0 1.333vw 0 0;
  border: 0.4vw solid #00b6eb;
  border-radius: 1.467vw;
  font-size:  2.667vw;
}
#cmmpoint .sec-02-box-1 h2 img {
  width: 10.267vw;
}
#cmmpoint .sec-02-box-1 .row {
  display: block;
}
#cmmpoint .sec-02-box-1 .left {
  width: 100%;
  padding:  4.0vw 0  2.667vw;
  font-size: 3.067vw;
  line-height: 4.8vw;
}
#cmmpoint .sec-02-box-1 .left p {
  margin: 0 0 0.5em;
  padding: 0;
}
#cmmpoint .sec-02-box-1 .left span.blue {}
#cmmpoint .sec-02-box-1 .right {
  width: 100%;
  padding: 0;
}
#cmmpoint .sec-02-box-1 .right img {
  width: 100%;
  height: auto;
}
#cmmpoint .sec-02-box-2 {
  margin: 5.333vw 0 0;
  position: relative;
}
#cmmpoint .sec-02-box-2 h2 {
  width: 49.066vw;
  height: 12.267vw;
  padding: 0 1.333vw 0 0;
  border: 0.4vw solid #ff9314;
  border-radius: 1.467vw;
  font-size:  2.667vw;
}
#cmmpoint .sec-02-box-2 h2 img {
  position: absolute;
  top: 65%;
  left: -5%;
  transform: translateY(-65%);
  width: 15.733vw;
  height: auto;
}
#cmmpoint .sec-02-box-2 h2 p {
  font-size: 3.733vw;
}
#cmmpoint .sec-02-box-2 h2 span.text-s {
  font-size: 2.533vw;
}
#cmmpoint .attention {
  font-size: 3.467vw;
}
#cmmpoint .sec-02-box-2 p.lead {
  margin: 2.667vw 0 55%;
  font-size: 3.067vw;
  line-height: 4.8vw;
}
#cmmpoint .orange {
  color: #ff9314;
}
#cmmpoint .step-box {
  position: absolute;
  left: -5vw;
  top: 0;
}
#cmmpoint .step-box::before {
  content: "";
  padding: 40% 0 0;
  display: block
}
#cmmpoint .step-box::after {
  content: "";
  padding-bottom: 45%;
  display: block
}
#cmmpoint .step-box img {
  width: 102%;
  height: auto;
}
#cmmpoint p.note.annotation {
  font-size: 2.4vw;
  line-height: 3.867vw;
}
#cmmpoint h2.ribon {
  margin: 0;
  padding: 2.0vw 0;
  font-size: 4.267vw;
  line-height: 5.6vw;
  border-radius: 1.067vw;
}
#cmmpoint h2.ribon + p {
  margin: 2.667vw 0 0;
  font-size: 2.667vw;
  line-height:  4.533vw;
}
#cmmpoint h2.ribon img {
  width: 10.667vw;
  height: auto;
  position: absolute;
  top: -4.5vw;
  left: calc(50% - 5.333vw);
  transform: translateY(-50%);
}
#cmmpoint .sec-02 h3 {
  margin: 0 0 0 -0.5em;
  padding: 0;
  font-size: 2.4vw;
  line-height: 3.867vw;
}
#cmmpoint .sec-02-container + h3 {
  margin: -2.667vw 0 0 -0.5em;
}
#cmmpoint .sec-02 ul.note {
  margin: 0;
  padding: 0;
}
#cmmpoint .sec-02 ul.note li {
  font-size: 2.4vw;
  line-height: 3.867vw;
}
/* ----------------------------------------------------------

 #sec03

---------------------------------------------------------- */
#sec-03 {
  width: 100%;
  padding: 6.667vw 5.333vw;
  box-sizing: border-box;
}
.sec-03 {}
#cmmpoint h2.orange {
  margin: 0;
  padding: 2.0vw 0;
  background: #ff9314;
  border-radius:  1.067vw;
  font-size: 4.267vw;
  line-height: 5.867vw;
  text-align: center;
}
#cmmpoint h2.orange img {
  width: 11.733vw;
  top: 4.267vw;
  left: 1.333vw;
}
#cmmpoint .sec-03 p.lead {
  margin: 2.667vw 0 5.333vw;
  font-size: 3.6vw;
  line-height:  5.6vw;
}
#cmmpoint .sec-03 p.lead .under-line {
  border-bottom: 2px solid #ff9314;
}
#cmmpoint .line-box-orange {
  margin: 5.333vw 0 0;
  padding: 8.0vw 4.667vw 4.667vw;
  border: 0.667vw solid #ff9314;
  border-radius: 1.067vw;
}
#cmmpoint .line-box-orange h3 {
  height: 6.933vw;
  position: absolute;
  padding: 0.667vw  5.333vw;
  top: -3.733vw;
  font-size:  3.467vw;
  font-weight: 700;
  white-space: nowrap;
}
#cmmpoint .line-box-orange img {
  width: 100%;
  height: auto;
}
#cmmpoint h2.green {
  margin: 6.667vw 0 0;
  padding: 2.0vw 0;
  background: #06c755;
  border-radius:  1.067vw;
  font-size: 4.267vw;
  line-height: 5.867vw;
  text-align: center;
}
#cmmpoint .line-box-green {
  margin: 3.067vw 0 0;
  padding: 3.333vw 2.0vw 3.333vw 3.333vw;
  position: relative;
  border: 0.667vw solid #06c755;
  border-radius: 1.067vw;
  text-align: center;
}
#cmmpoint .line-box-green .row {
  display: flex;
}
#cmmpoint .line-box-green .left {
  width: 76%;
  margin: 0 1.333vw 0 0;
}
#cmmpoint .line-box-green .right {
  width: 24%;
  display: flex;
  align-items: flex-end;
}
#cmmpoint .line-box-green .right img {
  margin: 0 0 2.933vw;
  width: 100%;
  height: auto;
}
#cmmpoint .line-box-green p {
  font-size: 2.8vw;
  line-height: 3.867vw;
}
#cmmpoint .line-box-green .green {
  color: #06c755;
}
#cmmpoint .line-box-green .text-box {}
#cmmpoint .line-box-green .text-box p{
  margin: 0 0 2.667vw;
  padding: 0;
  }
#cmmpoint p.text-large .under-line {
  margin: 0 0 0.2em;
  padding: 0 0 0.1em;
  font-size: 3.733vw;
  line-height: 5.2vw;
  background: linear-gradient(transparent 92%, #06c755 10%);
}
#cmmpoint p.text-large .green {
  padding: 0 0 0.1em;
  font-size: 4.0vw;
  line-height: 5.2vw;
}
#cmmpoint .cta {
  margin: 0 0 0;
}
#cmmpoint .cta a {
  padding: 0.667vw 8.0vw;
  font-size: 2.667vw;
  box-shadow: 0.667vw 0.667vw 0 #99e1ae;
}
#cmmpoint .cta a::after {
  width: 1.733vw;
  height: 2.133vw;
  right: 5.333vw;
}
/* ----------------------------------------------------------

 #sec04

---------------------------------------------------------- */
#cmmpoint #sec-04 {
  width: 100%;
  
}
#cmmpoint .sec-04 {
  padding: 6.667vw 5.333vw;
  box-sizing: border-box;
}
#cmmpoint #sec-04 h2 {
  margin: 0 0  4.0vw;
  padding: 2.0vw 0;
  border-radius: 1.067vw;
  font-size: 4.267vw;
  box-shadow:  0.8vw  0.8vw 0 #ffffff;
}
#cmmpoint #sec-04 h2 img {
  width: 10.667vw;
  height: auto;
  position: absolute;
  top: -10.0vw;
  left: 50%;
  transform: translateX(-50%);
}
#cmmpoint .faq {}
#cmmpoint .faq .inner {}
#cmmpoint .faq dl {
  margin: 0 0 0.667vw;
  border-radius: 1.067vw;
}
#cmmpoint .faq dt {
  padding: 2.667vw;
}
#cmmpoint .faq dt span {
  margin: 0 0.5em 0 0;
  padding: 0 0 0;
  font-size: 2.667vw;
  line-height: 1;
  width: 4.533vw;
  min-width: 4.533vw;
  height: 4.533vw;
  min-height: 4.533vw;
}
#cmmpoint .faq dt p {
  width: 90%;
  margin: 0;
  padding: 0 8.0vw 0;
  font-size: 2.667vw;
  line-height: 4.0vw;
}
#cmmpoint .faq dt:hover {}
#cmmpoint .faq dt::after {
  content: '';
  position: absolute;
  right: 2.667vw;
  width: 4.0vw;
  height: 4.0vw;
  background-image: url("/ep/support/kurashi-tepco/point/images/img_plus_s.png");
}
#cmmpoint .faq dl.open dt::after {
  background-image: url("/ep/support/kurashi-tepco/point/images/img_minus.png");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease, content 0.3s ease;
}
#cmmpoint .faq dd {
  padding: 0 2.667vw 2.667vw;
  display: none; /* 初期状態では非表示 */
}
#cmmpoint .faq dd span {
  margin: 0 0.5em 0 0;
  padding: 0 0 0;
  font-size: 2.667vw;
  line-height: 1;
  width: 4.533vw;
  min-width: 4.533vw;
  height: 4.533vw;
  min-height: 4.533vw;
}
#cmmpoint .faq dd p {
  margin: 0;
  padding: 0 0 0 8.0vw;
  font-size: 2.667vw;
  line-height: 4.0vw;
}
#cmmpoint .faq dd a {
  text-decoration: underline;
  color: inherit;
}
}

/* 20241210 注釈文文言追加コード修正 */

.note-annotation {
  display: block;
  margin-top: -20px;
  line-height: 26px;
}

.note-annotation__item {
  display: block;
}

.note-annotation__item__title {
  font-size: 15px;
  font-weight: bold;
}

.note-annotation__content,
.note-annotation__list--item {
  display: flex;
  font-size: 15px;
  gap: 0.5em;
}

.note-annotation__text {
  font-size: 15px;
}

.note-annotation__content::before {
  content: "※";
  display: block;
}

.note-annotation__list--item::before {
  content: "・";
  display: block;
}

.note-annotation__list {
  display: block;
}

@media screen and (max-width: 767px) {
  .note-annotation {
    margin-top: -10px;
    line-height: 1.55;
  }

  .note-annotation__item__title,
  .note-annotation__content,
  .note-annotation__list--item,
  .note-annotation__text {
    font-size: 9px;
  }
}

/* 20250318コミュニケーションポイントに関する注記追加 */

.note-number__container {
  margin: 0;
  padding: 0;
  line-height: 2;
  font-size: 15px;
}

.note-number {
  display: flex;
  gap: 0.5em;
}

.note-number__text--link,
.note-number__text--link:visited,
.note-number__text--link:link {
  color: #3D90CC;
  text-decoration: underline;
}

.note-number__text--link:hover {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .note-number__container {
    font-size: 2.4vw;
    line-height: 3.867vw;
  }
}