/* Scss Document */
body {
  background: #FFF; }

#mv {
  background: url("../images/lp_cloud/bg_mv.jpg") no-repeat center center;
  background-size: cover;
  color: #FFF;
  --wappenSize:80px; }
  #mv .copy_wrap {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space3); }
  #mv .illust_wrap {
    position: relative; }
    #mv .illust_wrap::after {
      width: var(--wappenSize);
      height: var(--wappenSize);
      position: absolute;
      top: calc( -1 * ( var(--wappenSize) / 2 ) );
      right: var(--space1);
      content: "";
      background: url("../images/lp_cloud/wappen_renewal.png") no-repeat center center;
      background-size: contain; }
  #mv > .inner {
    align-items: center;
    justify-content: center;
    max-width: 1280px; }
  @media (max-width: 767px) {
    #mv {
      min-height: 100svh;
      height: auto; }
      #mv .to_link_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center; } }
  @media (min-width: 768px) {
    #mv {
      --wappenSize:144px; }
      #mv > .inner {
        flex-direction: row;
        justify-content: space-between; }
      #mv .copy_wrap .copy {
        width: 120%; }
      #mv .illust_wrap {
        min-width: 60%; } }

#why .columns {
  --columnColumnGap:var(--space4);
  --columnRowGap:var(--space4); }
  #why .columns .column {
    background: #FFF;
    border-radius: var(--radius);
    box-sizing: border-box;
    padding: var(--space4) var(--space3) var(--space3) var(--space3);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.05); }
    #why .columns .column .block .head {
      margin-bottom: var(--space1);
      display: flex;
      flex-direction: column;
      grid-gap: var(--space3);
      align-items: center; }
    #why .columns .column:nth-child(1) .icon {
      width: 76px; }
    #why .columns .column:nth-child(2) .icon {
      width: 86px; }
    #why .columns .column:nth-child(3) .icon {
      width: 73px; }

#feature .block .head p {
  color: var(--colorGray);
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 800;
  margin-bottom: var(--space1); }
#feature .features {
  border-radius: var(--radius);
  border: 1px solid var(--colorGray);
  background: var(--colorLightGray);
  box-sizing: border-box;
  padding: var(--space1) var(--space3);
  color: var(--primaryColor);
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 800; }
  #feature .features .feature {
    box-sizing: border-box;
    position: relative;
    vertical-align: middle; }
    #feature .features .feature:not(:last-child) {
      margin-bottom: var(--space1); }
    #feature .features .feature .checkmark {
      top: 3px;
      margin-right: var(--space1); }
@media (min-width: 768px) {
  #feature .features {
    border-radius: 999px; } }

#compare .compare {
  border-collapse: inherit;
  border-spacing: 0px;
  padding: 0;
  border: 0px;
  --radius:16px;
  --logoWidth:120px; }
  #compare .compare .logo {
    width: var(--logoWidth);
    margin-left: auto;
    margin-right: auto; }
  #compare .compare tr th, #compare .compare tr td {
    border-top: 1px solid var(--colorGray);
    text-align: center; }
    #compare .compare tr th:first-child, #compare .compare tr td:first-child {
      border-left: 1px solid var(--colorGray); }
    #compare .compare tr th:last-child, #compare .compare tr td:last-child {
      border-right: 1px solid var(--colorGray); }
  #compare .compare tr:last-child th, #compare .compare tr:last-child td {
    border-bottom: 1px solid var(--colorGray); }
  #compare .compare thead tr {
    background: var(--colorGray); }
    #compare .compare thead tr:first-child {
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
      overflow: hidden; }
      #compare .compare thead tr:first-child > *:first-child {
        border-top-left-radius: var(--radius); }
      #compare .compare thead tr:first-child > *:last-child {
        border-top-right-radius: var(--radius); }
  #compare .compare tbody tr {
    background: #FFF;
    border: 0; }
    #compare .compare tbody tr:last-child > *:first-child {
      border-bottom-left-radius: var(--radius); }
    #compare .compare tbody tr:last-child > *:last-child {
      border-bottom-right-radius: var(--radius); }
  #compare .compare tbody td {
    height: 50px; }
    #compare .compare tbody td:nth-child(even) {
      background: var(--colorLightGray); }
    #compare .compare tbody td.bizcre {
      background: var(--colorLightBlue);
      color: var(--primaryColor);
      font-family: "yu-gothic-pr6n", sans-serif;
      font-weight: 800; }
  @media (max-width: 520px) {
    #compare .compare {
      --logoWidth:80px; }
      #compare .compare tr th, #compare .compare tr td {
        padding: var(--space1); }
      #compare .compare thead tr > *:first-child,
      #compare .compare tbody tr > *:first-child {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl; }
        #compare .compare thead tr > *:first-child .combine,
        #compare .compare tbody tr > *:first-child .combine {
          -webkit-text-combine: horizontal;
          -ms-text-combine-horizontal: all;
          text-combine-upright: all; }
      #compare .compare tbody tr > * {
        height: 80px;
        font-size: var(--fontSize_ss); } }
  @media (min-width: 521px) {
    #compare .compare thead tr > * {
      height: 40px; } }
  @media (min-width: 768px) {
    #compare .compare {
      --logoWidth:160px; } }

#framework .block > .head {
  margin-bottom: var(--space2); }
#framework .sub_block:not(:last-child) {
  margin-bottom: var(--space3); }
#framework .sub_block > .head {
  margin-bottom: var(--space1); }
  #framework .sub_block > .head .checkmark {
    top: 2px;
    margin-right: var(--space1); }
#framework .sub_block > .body .text {
  line-height: 1.5;
  letter-spacing: normal; }
#framework .block_lp_wrap:not(:last-child) {
  position: relative; }
  #framework .block_lp_wrap:not(:last-child)::after {
    position: absolute;
    top: calc( 100% + var(--space5) / 2 );
    left: 0;
    background: var(--colorGray);
    content: "";
    width: 100%;
    height: 1px; }
#framework .photo_wrap .caption {
  margin-top: var(--space1);
  text-align: center;
  font-size: var(--fontSize_ss); }

#price .columns {
  margin-bottom: var(--space4); }
  #price .columns .column {
    background: #FFF;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    padding: var(--space3);
    border-radius: var(--radius);
    position: relative; }
    #price .columns .column > .inner {
      height: 100%;
      display: flex;
      flex-direction: column;
      grid-gap: var(--space2);
      align-items: center; }
    #price .columns .column .price_wrap {
      font-family: "yu-gothic-pr6n", sans-serif;
      font-weight: 800;
      line-height: 1; }
      #price .columns .column .price_wrap .price {
        font-size: var(--fontSize_h1); }
      #price .columns .column .price_wrap .unit {
        font-size: var(--fontSize_h4);
        color: var(--colorGray); }
    #price .columns .column .ex > li {
      list-style: disc; }
    #price .columns .column.recommend::before {
      width: 100%;
      height: 100%;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border: 4px solid var(--primaryColor);
      box-sizing: border-box;
      border-radius: var(--radius); }
    #price .columns .column.recommend::after {
      width: 160px;
      height: 24px;
      top: -12px;
      left: 0;
      right: 0;
      margin: auto;
      content: "RECOMMEND";
      font-family: "yu-gothic-pr6n", sans-serif;
      font-weight: 800;
      background: var(--primaryColor);
      color: #FFF;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--radius); }
#price .caption_wrap {
  text-align: center; }

#summary {
  padding-bottom: var(--space5) !important; }