/* Scss Document */
:root {
  --fontSize_n:1rem;
  --fontSize_h0:calc( var(--fontSize_n) * 2.5 );
  --fontSize_h1:calc( var(--fontSize_n) * 2.25 );
  --fontSize_h2:calc( var(--fontSize_n) * 1.7 );
  --fontSize_h3:calc( var(--fontSize_n) * 1.5 );
  --fontSize_h4:calc( var(--fontSize_n) * 1.25 );
  --fontSize_h5:calc( var(--fontSize_n) * 1 );
  --fontSize_s:calc( var(--fontSize_n) * 0.9 );
  --fontSize_ss:calc( var(--fontSize_n) * 0.8 );
  --colorBlack:#000;
  --colorGray:#CFD2DE;
  --colorLightGray:#F9F9F9;
  --colorLightBlue:#DFEFFF;
  --primaryColor:#002581;
  --secondaryColor:#19D116;
  --space:10px;
  --space1:calc( var(--space) * 1 );
  --space2:calc( var(--space) * 2 );
  --space3:calc( var(--space) * 3 );
  --space4:calc( var(--space) * 4 );
  --space5:calc( var(--space) * 8 );
  --radius:8px; }

@media (min-width: 768px) {
  :root {
    --fontSize_h0:calc( var(--fontSize_n) * 3.375 );
    --fontSize_h1:calc( var(--fontSize_n) * 3.375 );
    --fontSize_h2:calc( var(--fontSize_n) * 2.625 );
    --fontSize_h3:calc( var(--fontSize_n) * 1.5 );
    --fontSize_h4:calc( var(--fontSize_n) * 1.25 );
    --fontSize_h5:calc( var(--fontSize_n) * 1 );
    --headheight:88px; } }
span {
  display: inline-block; }

.h0,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 800;
  letter-spacing: normal; }

.h0 {
  font-size: var(--fontSize_h0); }

h1,
.h1 {
  font-size: var(--fontSize_h1); }

h2,
.h2 {
  font-size: var(--fontSize_h2); }

h3,
.h3 {
  font-size: var(--fontSize_h3); }

h4,
.h4 {
  font-size: var(--fontSize_h4); }

h5,
.h5 {
  font-size: var(--fontSize_h5); }

.fs_s {
  font-size: var(--fontSize_s); }

.fs_ss {
  font-size: var(--fontSize_ss); }

.text {
  line-height: 1.75; }

.box_wrap {
  max-width: 1200px; }

.box_wrap_slendar {
  max-width: 1132px; }

.box_wrap_minimum {
  max-width: 905px; }

.logo_wrap .logo {
  width: 210px !important;
  aspect-ratio: 7/1; }
  .logo_wrap .logo .a .icon {
    background-image: url("../images/lp_cloud/logo.png") !important; }

.section.section_bg_img {
  background: url("../images/lp_cloud/bg_why.jpg") no-repeat center center;
  background-size: cover; }
.section.section_bg_blue {
  background: var(--primaryColor);
  color: #FFF; }
.section.section_cont .section_title_wrap {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space2);
  margin-bottom: var(--space3); }
  .section.section_cont .section_title_wrap .title {
    text-align: center; }

.to_link {
  margin: 0;
  --toLinkColor:#FFF;
  --toLinkBackground:var(--primaryColor);
  --toLinkBorderColor:var(--primaryColor);
  --toLinkHeight:48px;
  --toLinkHoverBackground:#FFF;
  --toLinkHoverColor:var(--primaryColor);
  --toLinkTextSize:var(--fontSize_n); }
  .to_link.to_link_gigant {
    --toLinkHeight:72px;
    --toLinkTextSize:var(--fontSize_h4); }
  .to_link .a {
    height: var(--toLinkHeight);
    padding: 0 var(--space4);
    background: var(--toLinkBackground);
    color: var(--toLinkColor);
    border: 1px solid var(--toLinkBorderColor);
    border-radius: 999px;
    font-size: var(--toLinkTextSize);
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 800; }
    .to_link .a.secondary {
      --toLinkBackground:var(--secondaryColor);
      --toLinkBorderColor:var(--secondaryColor);
      --toLinkHoverColor:var(--secondaryColor); }
    .to_link .a.corner {
      border-radius: var(--radius); }
    @media (hover: hover) {
      .to_link .a:hover {
        background: var(--toLinkHoverBackground) !important;
        color: var(--toLinkHoverColor) !important; } }

.columns {
  --columnColumnGap:var(--gap);
  --columnRowGap:var(--gap);
  grid-gap: var(--columnRowGap) var(--columnColumnGap);
  --columnWidth:100%; }
  .columns .column {
    width: var(--columnWidth);
    max-width: 100%; }
    .columns .column.w2 {
      width: calc( var(--columnWidth) * 2 + var(--columnGap) ); }
    .columns .column.w3 {
      width: calc( var(--columnWidth) * 3 + var(--columnGap) * 2 ); }
    .columns .column.w4 {
      width: calc( var(--columnWidth) * 4 + var(--columnGap) * 3 ); }
    .columns .column.w5 {
      width: calc( var(--columnWidth) * 5 + var(--columnGap) * 4 ); }
    .columns .column.w6 {
      width: calc( var(--columnWidth) * 6 + var(--columnGap) * 5 ); }
  @media (min-width: 768px) {
    .columns.column2 {
      --columnWidth:calc( ( 100% - var(--columnGap) ) / 2 ); } }
  @media (min-width: 521px) {
    .columns.column3 {
      --columnWidth:calc( ( 100% - var(--columnGap) ) / 2 ); } }
  @media (min-width: 768px) {
    .columns.column3 {
      --columnWidth:calc( ( 100% - var(--columnGap) * 2 ) / 3 ); } }
  .columns.column4 {
    --columnWidth:calc( ( 100% - var(--columnGap) ) / 2 ); }
    @media (min-width: 768px) {
      .columns.column4 {
        --columnWidth:calc( ( 100% - var(--columnGap) * 3 ) / 4 ); } }
  .columns.column5 {
    --columnWidth:calc( ( 100% - var(--columnGap) ) / 2 ); }
    @media (min-width: 521px) {
      .columns.column5 {
        --columnWidth:calc( ( 100% - var(--columnGap) * 2 ) / 3 ); } }
    @media (min-width: 768px) {
      .columns.column5 {
        --columnWidth:calc( ( 100% - var(--columnGap) * 4 ) / 5 ); } }
  .columns.column6 {
    --columnWidth:calc( ( 100% - var(--columnGap) ) / 2 ); }
    @media (min-width: 521px) {
      .columns.column6 {
        --columnWidth:calc( ( 100% - var(--columnGap) * 2 ) / 3 ); } }
    @media (min-width: 768px) {
      .columns.column6 {
        --columnWidth:calc( ( 100% - var(--columnGap) * 5 ) / 6 ); } }

.checkmark {
  --circleSize:15px;
  --markSize:12px;
  --backgroundColor:#DFEFFF;
  --markImage:url(../images/lp_cloud/icon_checkmark_primary.png);
  width: var(--circleSize);
  height: var(--circleSize);
  background: var(--backgroundColor);
  border-radius: 50%;
  position: relative; }
  .checkmark::before {
    aspect-ratio: 23/26;
    content: "";
    position: absolute;
    width: var(--markSize);
    display: block;
    background: var(--markImage) no-repeat center center;
    background-size: contain;
    left: calc( var(--circleSize) / 5 );
    bottom: calc( var(--circleSize) / 4 ); }
  .checkmark.secondary {
    --backgroundColor:#CDFFC6;
    --markImage:url(../images/lp_cloud/icon_checkmark_secondary.png); }

.block_lp_wrap {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space2);
  margin-bottom: var(--space5); }
  .block_lp_wrap > .inner_wrap {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space2); }
    .block_lp_wrap > .inner_wrap .photo_wrap .photo {
      overflow: hidden;
      line-height: 0;
      border-radius: var(--radius);
      display: block; }
    .block_lp_wrap > .inner_wrap .block .head {
      margin-bottom: var(--space2); }
  @media (min-width: 768px) {
    .block_lp_wrap > .inner_wrap {
      flex-direction: row-reverse; } }

#head {
  background: #FFF !important; }
  #head nav .to_link .a {
    padding: 0 var(--space2);
    max-width: none;
    letter-spacing: normal; }

#contents {
  padding: 0 !important; }

#foot {
  background: var(--colorBlack);
  color: #FFF;
  padding: var(--space4) 0 var(--space2) 0; }
  #foot a {
    color: #FFF; }
  #foot .box_wrap {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space4); }
  #foot .foot_upper {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space4); }
  #foot .foot_bottom {
    display: flex;
    justify-content: center; }
  #foot .logo_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: var(--space2); }
    #foot .logo_wrap .logo .a .icon {
      background-image: url("../images/lp_cloud/logo_w.png") !important; }
  #foot .sitemaps {
    display: flex;
    --columnWidth:fit-content;
    justify-content: center; }
    #foot .sitemaps .sitemap .title {
      font-family: "yu-gothic-pr6n", sans-serif;
      font-weight: 800;
      margin-bottom: var(--space1); }
    #foot .sitemaps .navi {
      flex-direction: column;
      align-items: flex-start;
      grid-gap: var(--space2); }
      #foot .sitemaps .navi .a.disabled {
        opacity: 0.5;
        filter: Alpha(opacity=50); }
  @media (min-width: 521px) {
    #foot .sitemaps .sitemap .title {
      margin-bottom: var(--space2); }
    #foot .sitemaps .navi .btn .a {
      font-size: var(--fontSize_s); } }
  @media (min-width: 768px) {
    #foot {
      padding-top: var(--space5); } }
  @media (min-width: 960px) {
    #foot .foot_upper {
      flex-direction: row;
      align-items: center;
      justify-content: space-between; }
    #foot .logo_wrap {
      align-items: flex-start; }
    #foot .sitemaps .navi .btn .a {
      font-size: var(--fontSize_ss); } }

#mv {
  height: 100svh;
  padding: 0 !important; }
  #mv > .inner {
    height: 100%;
    box-sizing: border-box;
    padding-top: calc( var(--headheight) + var(--space3) );
    padding-bottom: var(--space3);
    display: flex;
    flex-direction: column;
    grid-gap: var(--space3); }