@charset "utf-8";

/***********
common overwrite
************/

@media screen and (min-width:1921px) {

  .l-base {
    max-width: calc(1060px + 8vw);
  }
  .l-base-wide {
    max-width: calc(1260px + 8vw);
  }
  .l-base-xwide {
    max-width: calc(1460px + 8vw);
  }
  .l-base-xxwide {
    max-width: calc(1660px + 8vw);
  }
  .l-base-small {
    max-width: calc(824px + 8vw);
  }

}

/***********
mvContainer
************/

.mvContainer {
  font-size: clamp(15px, calc(10px + 0.5vw), 18px);
}

@media screen and (min-width:1921px) {
  .mvContainer {
    font-size: clamp(15px, calc(3.23px + 0.769vw), 22px);
  }
}
@media screen and (max-width:640px) {
  .mvContainer {
    font-size: clamp(14px, calc(10.5px + 1.2vw), 15px);
  }
}

/***********
cmMv
************/

.cmMv {
  background: url(../../img/carbonmonitor/mv_bg.jpg) no-repeat center center / cover ;
  padding: clamp(140px,25vw, 6em) 7vw min(15vw,3em) 10vw;
  font-size: clamp(18px,1.3vw, 30px);
  color: #333;
}
.cmMv-container {
  display: flex;
  align-items: center;
}

.cmMv-inner {
  flex: 1;
}

.cmMv-heading {
  white-space: nowrap;
}
.cmMv-heading-lead {
  display: inline-block;
  font-size: 150%;
  font-weight: 700;
  color: var(--color-brand01);
  background: url(../../img/carbonmonitor/mv_bar.png) no-repeat center bottom / 100% auto;
  padding-bottom: 1em;
}
.cmMv-heading-title {
  display: block;
  color: var(--color-brand02);
  font-weight: 900;
  font-size: 330%;
}
.cmMv-heading-title span {
  color: var(--color-brand01);
}

.cmMv-text {
  font-weight: 700;
  padding-top: 1em;
}
.cmMv-text strong {
  font-weight: 700;
  font-size: 130%;
}

.cmMv-text-marker {
  color: var(--color-brand01);
  background: linear-gradient(to right ,#fff, #fff) 0 100% / 0 40% no-repeat;
  transition: background-size 1s cubic-bezier(0.83, 0, 0.17, 1) 0.6s;
  text-decoration: none;
  padding-left: 0.2em;
  padding-right: 0.2em;
  padding-bottom: 0.1em;
}
.cmMv-text-marker.is-show {
  background-size: 100% 40%;
}


.cmMv-cv {
  padding-top: 1.5em;
  display: flex;
  gap: 0.5em 0.5em;
}
.cmMv-cv-item {
}
.cmMv-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 2px solid var(--color-brand01);
  border-radius: 3em;
  background-color: var(--color-base);
  font-weight: 600;
  font-size: max(80%,14px);
  min-width: 17em;
  min-height: 4.2em;
  text-decoration: none;
  position: relative;
}
.cmMv-btn i {
  vertical-align: middle;
  margin-right: 0.5em;
  margin-left: -0.8em;
  translate: 0 -10%;
}
.cmMv-btn::after {
  font-family: 'Font Awesome 6 Free';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-weight: 900; /* fas */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  content: "\f061";
  width: 2.6em;
  font-size: 70%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: var(--color-brand01);
  color: var(--color-base);
  border-radius: 50%;
  position: absolute;
  right: 1.5em;
  top: 50%;
  translate: 0 -50%;
  transition: 0.3s;
}
body.is-pc .cmMv-btn:hover {
  background-color: var(--color-brand01);
  color: var(--color-base);
}
body.is-pc .cmMv-btn:hover::after {
  background-color: var(--color-base);
  color: var(--color-brand01);
  scale: 1.1;
}

.cmMv-btn.-apply {
  background-color: var(--color-brand01);
  color: var(--color-base);
}
.cmMv-btn.-apply::after {
  background-color: var(--color-base);
  color: var(--color-brand01);
}
body.is-pc .cmMv-btn.-apply:hover {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-base);
}
body.is-pc .cmMv-btn.-apply:hover::after {
  background-color: var(--color-base);
  color: var(--color-main);
  scale: 1.1;
}


.cmMv-visual {
  width: 54%;
}
.cmMv-block {
}
.cmMv-feature {
  display: flex;
  align-items: center;
  width: 30em;
  margin-bottom: -13%;
  translate: 23% 0 ;
  position: relative;
  z-index: 9;
}
.cmMv-img {
  position: relative;
}
.cmMv-img-pc {
  width: 82%;
}
.cmMv-img-character {
  position: absolute;
  right: 0;
  bottom: 10%;
  width: 25%;
}
body.is-loaded .cmMv-img-character {
  animation: anim-character-jump 1s alternate 1 1.5s;
}
@keyframes anim-character-jump {
  0% {transform: translateY(0px);}
  10% {transform: translateY(-5px);}
  20% {transform: translateY(0px);}
  30% {transform: translateY(-5px);}
  40% {transform: translateY(0px);}
}

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

  .cmMv {
    padding: clamp(140px,25vw, 6em) 3vw min(15vw,3em) 5vw;
    font-size: clamp(14px,1.4vw, 20px);
  }

}

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

  .cmMv {
    padding: clamp(80px,25vw, 6em) 3vw min(15vw,3em) 5vw;
    font-size: clamp(14px,1.8vw, 20px);
  }

  .cmMv-btn {
    min-width: 15em;
  }
  .cmMv-visual {
    width: 54%;
  }
  .cmMv-feature {
    width: 25em;
    margin-bottom: -13%;
    translate: 8% 0 ;
    z-index: 9;
  }
  .cmMv-img-pc {
    width: 100%;
    margin-left: -8%;
  }
  .cmMv-img-character {
    width: 30%;
  }

}


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

  .cmMv {
    font-size: clamp(14px,3.4vw, 18px);
  }
  .cmMv-container {
    display: block;
  }

  .cmMv-inner {
    flex: 1;
  }

  .cmMv-visual {
    width: 100%;
    max-width: 30em;
  }
  .cmMv-block {
  }
  .cmMv-feature {
    margin-bottom: -18%;
    translate: 23% 0 ;
    position: relative;
    z-index: 9;
  }
  .cmMv-img {
    position: relative;
  }
  .cmMv-img-pc {
  }
  .cmMv-img-character {
    position: absolute;
    right: 0;
    bottom: 10%;
    width: 25%;
  }

}


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

  .cmMv {
    padding: 100px 3vw 3em 3vw;
    font-size: clamp(11px,3.8vw, 18px);
    text-align: center;
  }
  .cmMv-container {
    display: block;
  }

  .cmMv-inner {
    flex: 1;
  }
  .cmMv-text {
    line-height: 1.8;
  }

  .cmMv-cv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8em 0.5em;
  }
  .cmMv-btn {
    min-width: 17em;
  }
  .cmMv-visual {
    width: 90%;
    margin: 0 auto;
    max-width: 30em;
  }
  .cmMv-feature {
    width: 110%;
    margin-bottom: -18%;
    translate: 0 0 ;
  }
  .cmMv-img-character {
    width: 33%;
  }

}


/***********
cmHeading
************/

.cmHeading {
  text-align: center;
  padding-bottom: 2.5em;
}
.cmHeading-title {
  font-size: clamp(1.3em,5.6vw, 2.4em);
  color: var(--color-brand02);
  line-height: 1.6;
}

.cmHeading.-white .cmHeading-title{
  color: var(--color-base);
}

.cmHeading.-line .cmHeading-title{
  display: inline-block;
  background: url(../../img/carbonmonitor/line01.png) repeat-x left bottom / min(1em,25px) auto;
  padding-bottom: 0.4em;
}

.cmHeading-dot {
  text-emphasis: filled dot;
  -webkit-text-emphasis: filled dot;
}

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

  .cmHeading {
    padding-bottom: 2em;
  }
  .cmHeading-title {
    line-height: 1.5;
  }
}

/***********
text
************/

.cmTextMain {
  line-height: 2;
}
.cmTextLead {
  line-height: 2;
  text-align: center;
}

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

  .cmTextMain {
    line-height: 1.7;
  }
  .cmTextLead {
    line-height: 1.7;
  }
}

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

  .cmTextMain {
  }
  .cmTextLead {
    text-align: left;
  }
}

/***********
cmIntro
************/

.cmIntro {
}

.cmIntro-container {
  padding-top: 4em;
  display: flex;
  align-items: center;
  gap: 0 4%;
}
.cmIntro-img {
  width: 52%;
}
.cmIntro-inner {
  flex: 1;
}

.cmIntro-list {
  font-size: clamp(1.15em,4.2vw, 1.4em);
  font-weight: 600;
}
.cmIntro-list li {
  background: url(../../img/carbonmonitor/check_icon.png) no-repeat 1em 1.1em / 1em auto;
  background-color: var(--color-sub03);
  padding: 0.8em 1em 0.8em 2.5em;
}
.cmIntro-list li + li {
  margin-top: 0.3em;
}

.cmHeading-lead {
  padding-top: 3em;
  font-weight: 700;
  font-size: clamp(1.15em,4.2vw, 1.7em);
  text-align: center;
}

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

  .cmIntro-container {
    padding-top: 1em;
    display: block;
  }
  .cmIntro-img {
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
  }
  .cmIntro-inner {
    flex: 1;
    padding-top: 1.5em;
  }

  .cmHeading-lead {
    padding-top: 2em;
    line-height: 1.7;
  }

}

/***********
cmMarker
************/

.cmMarker {
  font-feature-settings: "palt";
  background: linear-gradient(to right ,#bfe4f9, #bfe4f9) 0 100% / 0 30% no-repeat;
  transition: background-size 1s cubic-bezier(0.83, 0, 0.17, 1) 0.5s , color 0.5s ease 0.5s;
  text-decoration: none;
  margin-inline: 0.2em;
  padding-inline: 0.2em;
  letter-spacing: 0.05em;
}
.cmMarker.is-show {
  color: var(--color-brand01);
  background-size: 100% 30%;
}

.cmMarker.-white {
  background: linear-gradient(to right ,#fff, #fff) 0 100% / 0 20% no-repeat;
}
.cmMarker.-white.is-show {
  color: inherit;
  background-size: 100% 20%;
}

/***********
cmIssue
************/

.cmIssue {
  --cmIssue-angle: 6em;
  background: url(../../img/carbonmonitor/bg01.jpg) no-repeat center center / cover;
  position: relative;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--cmIssue-angle)),85% calc(100% - var(--cmIssue-angle)),50% 100%,15% calc(100% - var(--cmIssue-angle)), 0 calc(100% - var(--cmIssue-angle)));
}
.cmIssue::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
}

.cmIssue-container {
  position: relative;
  z-index: 2;
}

.cmIssue-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  padding-top: 1em;
}
.cmIssue-card li {
  width: calc((100% - 2em) / 3);
  background-color: var(--color-base);
}
.cmIssue-card-container {
  display: flex;
  gap: 0 0.8em;
  align-items: center;
  padding: 1em 0 1em 1.5em;
}
.cmIssue-card-icon {
  width: 30%;
}
.cmIssue-card-inner {
}
.cmIssue-card-text {
  font-size: clamp(1em,3.6vw, 1.2em);
  font-weight: 600;
  line-height: 1.35;
}

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

  .cmIssue {
    --cmIssue-angle: 3em;
  }

  .cmIssue-card {
    gap: 0.5em;
  }
  .cmIssue-card li {
    width: calc((100% - 1em) / 3);
  }
  .cmIssue-card-container {
    display: flex;
    gap: 0 0.5em;
    align-items: center;
    padding: 1em 0 1em 0.8em;
  }
  .cmIssue-card-icon {
    width: 25%;
  }
  .cmIssue-card-text {
    font-size: clamp(0.8em,2vw, 1.2em);
  }

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

  .cmIssue {
    --cmIssue-angle: 3em;
  }

  .cmIssue-card {
    gap: 0.5em;
  }
  .cmIssue-card li {
    width: calc((100% - 0.5em) / 2);
  }
  .cmIssue-card li:first-child {
  }
  .cmIssue-card-container {
    display: block;
    gap: 0 0.4em;
    align-items: center;
    padding: 1.2em 0 1.5em 0em;
    text-align: center;
  }
  .cmIssue-card-icon {
    width: 33%;
    margin: 0 auto;
  }
  .cmIssue-card-text {
    font-size: clamp(0.8em,3.8vw, 1.2em);
    line-height: 1.5;
    padding-top: 0.2em;
  }

}

/***********
cmAbout
************/

.cmAbout {
}

.cmAbout-container {
  display: flex;
  align-items: center;
  gap: 0 7%;
}
.cmAbout-img {
  width: 58%;
}
.cmAbout-inner {
  flex: 1;
}

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

  .cmAbout {
  }

  .cmAbout-container {
    display: block;
  }
  .cmAbout-img {
    width: 80%;
    max-width: 520px;
    margin: 0 auto;
  }
  .cmAbout-inner {
    flex: 1;
    padding-top: 1.5em;
    text-align: center;
  }

}

/***********
cmSpec
************/

.cmSpec {
  background-color: var(--color-brand01);
  position: relative;
}
.cmSpec::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff1;
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

.cmSpec-character {
  width: clamp(6em,20vw, 11em);
  position: absolute;
  right: -10%;
  top: 0;
  translate: 0 -90%;
}
.cmSpec-character.is-show img {
  animation: anim-character-jump 1s alternate 1 1.5s;
}

.cmSpec-container {
  position: relative;
  z-index: 2;
}

.cmSpec-list {
}
.cmSpec-list li {
  background-color: var(--color-base);
  padding: min(7vw,1.5em) min(5vw,3em);
  border-left: 0.6em solid #CCE9FA;
}
.cmSpec-list li + li {
  margin-top: 0.8em;
}
.cmSpec-list-title {
  font-size: clamp(1.2em,4vw, 1.6em);
  color: var(--color-brand01);
  padding-bottom: 0.2em;
  line-height: 1.4;
}
.cmSpec-list-text {
  line-height: 1.7;
  padding-bottom: 0.5em;
}


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

  .cmSpec-character {
    width: clamp(6em,20vw, 11em);
    position: absolute;
    right: -2%;
    top: 0;
    translate: 0 -70%;
  }
  .cmSpec-list li + li {
    margin-top: 0.5em;
  }

}

/***********
cmPrice
************/

.cmPrice {
}
.cmPrice-container {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: center;
  font-size: clamp(1.4em,5vw, 2em);
  gap: 0.2em 2em;
  padding-right: 1em;
}
.cmPrice-title {
  font-weight: 600;
}
.cmPrice-inner {
}
.cmPrice-data {
  white-space: nowrap;
  font-size: 150%;
  font-weight: 600;
  line-height: 1.2;
}
.cmPrice-data-unit {
  font-size: 70%;
  padding-right: 0.2em;
}
.cmPrice-data-num {
  font-weight: 600;
}
.cmPrice-data-tax {
  font-size: 50%;
}

.cmPrice-data-marker {
  display: inline-block;
  background: linear-gradient(to right ,#bfe4f9, #bfe4f9) 0 100% / 100% 20% no-repeat;
  text-decoration: none;
}

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

  .cmPrice-container {
    margin-right: -1em;
  }
  .cmPrice-data {
    padding-left: 1em;
  }
}



/***********
cmReason
************/

.cmReason {
  position: relative;
  padding-top: 1em;
  padding-bottom: 2em;
}
.cmReason::before,
.cmReason::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - 40em);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.cmReason::before {
  background-color: #0093E766;
}
.cmReason::after {
  z-index: 3;
  opacity: 0.2;
  background: url(../../img/carbonmonitor/bg03.jpg) no-repeat center center / cover ;
}

.cmReason-container {
  position: relative;
  z-index: 9;
}


.cmReason-card {
  display: flex;
  gap: 1em 2.5%;
  padding-top: 1em;
  counter-reset : cmReason_num;
}
.cmReason-card li {
  flex: 1;
  border: 0.3em solid var(--color-brand01);
  background-color: var(--color-base);
  text-align: center;
  padding: min(7vw,3em) min(5vw,1em) min(7vw,3em);
  position: relative;
}
.cmReason-card > li::before{
  display: inline-block;
  counter-increment:cmReason_num;
  content: counter(cmReason_num, decimal-leading-zero) ;
  font-size: clamp(3em,10vw, 6.5em);
  font-family: var(--font-family-gothic-en);
  color: var(--color-brand01);
  opacity: 0.1;
  position: absolute;
  left: 0.1em;
  top: 0;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.cmReason-card-container {
}
.cmReason-card-icon {
  width: 45%;
  min-width: 6em;
  margin: 0 auto;
}

.cmReason-card-inner {
  padding-top: 1.5em;
}
.cmReason-card-title {
  font-size: clamp(1.2em,3vw, 1.6em);
  font-weight: 700;
  color: var(--color-brand01);
  padding-bottom: 0.4em;
}
.cmReason-card-text {
  font-size: clamp(0.8em,2.2vw, 1.15em);
  line-height: 1.7;
}

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

  .cmReason {
    padding-top: 0;
    padding-bottom: 2em;
  }
  .cmReason::before,
  .cmReason::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 20em);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }

  .cmReason-card {
    display: block;
    padding-top: 0;
    width: 90%;
    max-width: 320px;
    margin: 0 auto;
  }
  .cmReason-card li {
    flex: 1;
    border: 0.3em solid var(--color-brand01);
    background-color: var(--color-base);
    text-align: center;
    padding: min(7vw,3em) min(5vw,1em) min(7vw,3em);
    position: relative;
  }
  .cmReason-card li+ li {
    margin-top: 1em;
  }
  .cmReason-card > li::before{
    font-size: clamp(3em,20vw, 6.5em);
  }

  .cmReason-card-icon {
    width: 40%;
    min-width: 3em;
  }
  .cmReason-card-inner {
    padding-top: 0.5em;
  }
  .cmReason-card-title {
    font-size: clamp(1.2em,5.2vw, 1.6em);
  }
  .cmReason-card-text {
    font-size: clamp(1em,3.6vw, 1.15em);
  }

}

/***********
cmSample
************/

.cmSample {
  padding: min(15vw,4em) min(5vw,90px) min(15vw,6em);
  background-color: #EBF6FD;
}

.cmSample-link {
  text-align: center;
  padding-top: 4em;
}
.cmBtn.cmSample-btn {
  width: 100%;
  max-width: 22em;
}

.cmSample-container {
  position: relative;
}

.cmSample-slider {
  padding-bottom: 3em;
}
.cmSample-slider-img {
}


.cmSample-character {
  width: clamp(3em,22vw, 10em);
  position: absolute;
  right: -7%;
  bottom: -2em;
  z-index: 9;
  pointer-events: none;
}
.cmSample-character.is-show img {
  animation: anim-character-jump 1s alternate 1 1.5s;
}

/*
slick
*/

/* ロード後に処理 */
.cmSample-slider{
  opacity: 0;
  transition: 0.1s;
}
.cmSample-slider.slick-initialized{
  opacity: 1;
}

.cmSample-slider .slick-slide li {
  vertical-align: bottom;
}
.cmSample-slider .slick-active{
  opacity: 1;
}

.cmSample-slider .slick-dots{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  padding-left: 00px;
}
.cmSample-slider .slick-dots button{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: #0d307055;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  text-indent: -99999px;
  overflow: hidden;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.cmSample-slider .slick-dots .slick-active button{
  background-color: var(--color-brand02);
}



.cmSample-slider .slick-next,
.cmSample-slider .slick-prev{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 46px;
  height: 46px;
  translate: 0 -50%;
  font-size: 13px;
  background-color: var(--color-brand02);
  color: var(--color-base);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  z-index: 99;
  cursor: pointer;
  transition: 0.3s;
}
.cmSample-slider .slick-next{
  right: -60px;
}
.cmSample-slider .slick-prev{
  left: -60px;
}
body.is-pc .cmSample-slider .slick-arrow:not(.slick-disabled):hover{
  background-color: var(--color-brand01);
}

.slick-arrow.slick-disabled {
  filter: grayscale(100%);
  background-color: #ccc;
  cursor:no-drop;
}

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


  .cmSample {
    padding: min(15vw,3em) min(5vw,90px) min(15vw,5em);
    margin-left: -3vw;
    margin-right: -3vw;
  }

  .cmSample-link {
    text-align: center;
    padding-top: 2em;
  }
  .cmBtn.cmSample-btn {
    max-width: 20em;
  }


  .cmSample-slider {
    padding-bottom: 3em;
  }

  .cmSample-character {
    bottom: 0;
  }

  /*
  slick
  */

  .cmSample-slider .slick-dots{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    padding-left: 00px;
  }
  .cmSample-slider .slick-dots button{
    width: 6px;
    height: 6px;
    margin: 0 3px;
  }


  .cmSample-slider .slick-next,
  .cmSample-slider .slick-prev{
    width: 36px;
    height: 36px;
    translate: 0 -100%;
    font-size: 13px;
  }
  .cmSample-slider .slick-next{
    right: -22px;
  }
  .cmSample-slider .slick-prev{
    left: -22px;
  }

}

/***********
cmBtn
************/

.cmBtn {
  min-width: 18em;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 4.2em;
  padding: 0.5em 3.5em;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  color: var(--color-brand02);
  border: 2px solid var(--color-brand02);
  background-color: var(--color-base);
  border-radius: 3em;
  position: relative;
  transition: 0.5s;
  cursor: pointer;
}
.cmBtn::after {
  font-family: 'Font Awesome 6 Free';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-weight: 900; /* fas */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  content: "\f061";
  width: 2.4em;
  height: 2.4em;
  font-size: 70%;
  background-color: var(--color-brand02);
  color: var(--color-base);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
}
body.is-pc .cmBtn:hover {
  background-color: var(--color-brand02);
  color: var(--color-base);
}
body.is-pc .cmBtn:hover::after {
  color: var(--color-brand02);
  background-color: var(--color-base);
}

/***********
cmLogin
************/

.cmLogin {
  background-color: #0093E7;
  color: var(--color-base);
  position: relative;
  text-align: center;
}
.cmLogin::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../img/carbonmonitor/mv_bg.jpg) no-repeat center center / cover ;
  opacity: 0.3;
}
.cmLogin-container {
  position: relative;
  z-index: 9;
  padding: min(15vw,6em) 0;
}

.cmLogin-lead {
  font-size: clamp(1.1em,3.6vw, 1.5em);
  font-weight: 600;
  line-height: 1.6;
}
.cmLogin-link {
  padding-top: 2em;
}

.cmBtn.cmLogin-btn {
  width: 100%;
  max-width: 22em;
  color: var(--color-brand01);
  border-color: var(--color-brand01);
}
.cmBtn.cmLogin-btn i {
  margin-right: 0.6em;
  margin-left: -0.4em;
  scale: 1.1;
  translate: 0 -10%;
}
.cmBtn.cmLogin-btn::after {
  background-color: var(--color-brand01);
}
body.is-pc .cmBtn.cmLogin-btn:hover {
  background-color: var(--color-brand01);
}
body.is-pc .cmBtn.cmLogin-btn:hover::after {
  color: var(--color-brand01);
}


/***********
cmHeadline
************/

.cmHeadline {
  padding-bottom: 3em;
  text-align: center;
}
.cmHeadline-subTitle {
  font-size: clamp(40px,10vw, 120px);
  font-weight: 600;
  font-family: var(--font-family-gothic-en);
  color: var(--color-brand01);
  letter-spacing: 0.08em;
  line-height: 1;
}
.cmHeadline-title {
  font-size: clamp(18px,1.35vw,30px);
  font-weight: 700;
  color: var(--color-brand01);
  padding-top: 0.5em;
}

.cmHeadline-lead {
  font-size: clamp(20px,1.5vw,34px);
  font-weight: 600;
  color: var(--color-brand02);
  padding-top: 1.5em;
}

.cmHeadline.-center {
  text-align: center;
}

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

  .cmHeadline {
    padding-bottom: 2em;
  }
  .cmHeadline-subTitle {
    font-size: clamp(270%,10vw, 400%);
    letter-spacing: 0.05em;
  }
  .cmHeadline-title {
    font-size: clamp(108%,4vw, 139%);
    padding-top: 0.5em;
  }

  .cmHeadline-lead {
    font-size: 116%;
  }

}


/***********
cmContact
************/

.cmContact {
  background: linear-gradient(to bottom, transparent 0%, #EBF6FD 100%);
}

/***********
xxx
************/

/***********
xxx
************/

/***********
xxx
************/

/***********
xxx
************/

/***********
xxx
************/

/***********
xxx
************/