@charset "utf-8";
/* CSS Document */
body {
  font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
}
img{
  max-width: 100%;
}
.tss_comprehensiveHead{
  z-index: 100;
  position: relative;
}
.tss_footer{
  position: relative;
  z-index: 1;
  background-color: #FF8500;
}


.tss_wrap{
  position: relative;
  background-color: #FEF7DE;
}
.tss_wrap::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(../img/bg@2x.webp);
  background-repeat: repeat-y;
  background-size: contain;
  width: 250px;
  height: 100%;
  z-index: 0;
}
.tss_wrap::after{
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  background-image: url(../img/bg@2x.webp);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: right;
  width: 250px;
  height: 100%;
  z-index: 0;
}
.tss_body{
  position: relative;
  z-index: 10;
  margin-inline: auto;
}

.cpn_font12{
  font-size: 0.75rem;
}
.cpn_font14{
  font-size: 0.875rem;
}
.cpn_font14-20{
  font-size: clamp(0.875rem, 0.6897rem + 0.6897vw, 1.25rem);/* 14-20 430-1300 */
} 
.cpn_font24-40{
  font-size: clamp(1.5rem, 0.3974rem + 4.1026vw, 2.5rem);/* 24-40 430-820 */
}
.cpn_font-bold{
  font-weight: 700;
}
.cpn_pcbr{
  display: block;
}
.cpn_spbr{
  display: inline-block;
}


.cpn_mvwrap{
  max-width: 1200px;
  margin-inline: auto;
}
.cpn_mv_img{
  position: relative;
}
.cpn_mv_ph img{
  aspect-ratio: 1200/664;
}
.cpn_mv_logo{
  max-width: clamp(24rem, -0.25rem + 48.5vw, 36.125rem);/* 384-578 800-1200 */
  position: absolute;
  left: 0;
  bottom: -86px;
}
.cpn_mv_logo img{
  aspect-ratio: 578/488;
}
.cpn_mv_txt {
  display: flex;
  justify-content: right;
  margin-inline-end: 80px;
  line-height: 1.5;
}


.cpn_overview {
  max-width: 1304px;
  margin-inline: auto;
  margin-top: clamp(1.125rem, 0.689rem + 1.62vw, 1.5rem);/* 18-24 430-800 */
  background-image: url(../img/il_cloud-overview@2x.webp);
  background-size: 1304px;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0px);
  background-position-y: calc(100% - 0px);
  padding-bottom: 72px;
}
.cpn_overview_flx {
  display: flex;
  align-items: center;
  justify-content: end;
}
.cpn_overview_ttl {
  max-width: 254px;
  width: 48%;
  margin-inline: auto;
}
.cpn_overview_txt {
  flex: 0 0 auto;
}
.cpn_overview_txt p{
  line-height: 1.75;
  font-weight: 700;
}
.cpn_green {
  color: #72A532;
}
.cpn_orange{
  color: #FF8500;
}
.cpn_overview_ttl img{
  aspect-ratio: 254/80;
}
.cpn_overview_img{
  flex: 1 1 auto;
  max-width: 580px;
  margin-top: -60px;
  margin-left: -12px;
}
.cpn_overview_img img{
  aspect-ratio: 582 / 450;;
}


.cpn_photoblock01{
  max-width: 1580px;
  margin-inline: auto;
  margin-top: clamp(0.375rem, -1.486rem + 6.92vw, 1.5rem);/* 6-24 430-690 */
}
.cpn_photoblock01 img{
  aspect-ratio: 1580/458;
}


.cpn_name{
  max-width: 1300px;
  margin-inline: auto;
  margin-top: 48px;
  display: flex;
  gap: 0 8px;
  padding: 0 8px;
}
.cpn_name_bg{
  flex: 1 1 50%;
  background-image: url(../img/il_cloud-name@2x.webp);
  background-size: min(550px, 100%) auto;
  background-position: right bottom;
  background-repeat: no-repeat;
  padding-bottom: clamp(1.375rem, -2.507rem + 6.47vw, 2.75rem);/* 22-44 960-1300 */
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
}
.cpn_name_flx{
  display: contents;
}
.cpn_name_face{
  grid-row: 1 / -1;
  grid-column: 1 / 2;
  max-width: clamp(8.875rem, -10.184rem + 31.76vw, 15.625rem);/* 142-250 960-1300 */
}
.cpn_name_face img{
  aspect-ratio: 270/280;
}
.cpn_name_name{
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
.cpn_name_matsuo .cpn_name_name{
  position: relative;
  max-width: clamp(11rem, 4.294rem + 11.18vw, 13.375rem);/* 176-214 960-1300 */
}
.cpn_name_matsuo .cpn_name_name img{
  aspect-ratio: 214/108;
}
.cpn_name_osada .cpn_name_name{
  position: relative;
  max-width: clamp(14.25rem, 7.191rem + 11.76vw, 16.75rem);/* 228-268 960-1300 */
}
.cpn_name_osada .cpn_name_name img{
  aspect-ratio: 268/102;
}
.cpn_name_txt {
  max-width: 340px;
  grid-row: 2 / -1;
  grid-column: 2 / 3;
}
.cpn_name_txt p{
  font-size: 0.875rem;
  line-height: 1.82;
}


.cpn_time{
  margin-top: clamp(0.375rem, -2.676rem + 11.35vw, 3rem);/* 6-48 430-800 */
}
.cpn_time_ttl{
  max-width: 486px;
  width: 91%;
  margin-inline: auto;
}
.cpn_time_ttl img{
  aspect-ratio: 486/80;
}
.cpn_time_bg{
  max-width: 1200px;
  margin-inline: auto;
  margin-top: -40px;
  background-color: #FFFFFF;
  border-radius: 32px;
  padding: 48px clamp(1.5rem, 0.673rem + 3.08vw, 2rem) 16px;/* 24-32 430-690 */
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
.cpn_time_list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  justify-content: space-between;
  gap: 24px 0px;
}
.cpn_time_list li{
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #583A1B;
}
.cpn_time_list li span{
  font-size: clamp(0.875rem, 0.7372rem + 0.5128vw, 1rem);/* 14-16 430-820 */
}
.cpn_time_bg >p{
  color: #583A1B;
  text-align: right;
  line-height: 1.5;
  margin-top: 18px;
}

.cpn_photoblock02 {
  max-width: 1920px;
  margin-inline: auto;
  margin-top: 64px;
}
.cpn_photoblock02 img{
  aspect-ratio: 1920/600;
}


.cpn_photoblock03{
  max-width: 926px;
  margin-inline: auto;
  margin-top: 40px;
}
.cpn_photoblock03 img{
  aspect-ratio: 926/540;
}


/* keyframes */
.cpn_mv_logo {
  transform: translateY(4vw);
  animation: logo_shake 0.3s 1s linear both;
}
@keyframes logo_shake{
  0%   { transform:translate(0,0); }
  25%  { transform:translate(-1vw, 0) rotate(1deg); }
  50%  { transform:translate(0, 0); }
  75%  { transform:translate(-1vw, 0) rotate(-1deg); }
  100% { transform:translate(0, 0); }
}


.cpn_overview_ttl,
.cpn_time_ttl{
  animation: ttl_move 5s linear infinite;
}
@keyframes ttl_move{
  0%   { transform:translate(0,0); }
  25%  { transform:translate(-1vw, 0) rotate(1deg); }
  50%  { transform:translate(0, 0); }
  75%  { transform:translate(-1vw, 0) rotate(-1deg); }
  100% { transform:translate(0, 0); }
}


.cpn_fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.cpn_fade-in.show {
  opacity: 1;
  transform: translateY(0);
}




@media screen and (max-width: 1300px){
  .cpn_mv_txt{
    margin-inline-end: 4px;
  }


  .cpn_overview{
    background-size: cover;
    background-position-x: center;
  }
  .cpn_overview_flx{
    justify-content: center;
    padding: 0 24px;
  }
}




@media screen and (max-width: 960px){
  .cpn_overview{
    background-image: url(../img/il_cloud-overview_sp@2x.webp);
    background-size: cover;
    background-position: center top;
    padding-bottom: 28px;
  }
  .cpn_overview_flx{
    flex-wrap: wrap;
  }
  .cpn_overview_img {
    flex: 1 1 auto;
    max-width: 580px;
    margin-top: 0;
    margin-left: 0;
  }

  .cpn_name{
    padding: 0;
  }
  .cpn_name_bg{
    background-image: url(../img/il_cloud-name_sp@2x.webp);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .cpn_name_flx{
    display: flex;
    align-items: center;
  }
}




@media screen and (max-width: 800px){
  .tss_body{
    margin-bottom: clamp(4.5rem, 1.743rem + 11.76vw, 7.625rem);/* フッターの高さ分 72-122 375-800 */
  }
  .cpn_pcbr{
    display: inline;
  }


  .cpn_mv_ph img{
    aspect-ratio: 1640/2394;
  }
  .cpn_mv_logo{
    display: none;
  }
  .cpn_mv_txt{
    justify-content: center;
    text-align: center;
    margin-top: 8px;
    margin-inline-end: 0;
  }


  .cpn_overview{
    background-size: cover;
  }
  .cpn_overview_txt{
    flex: 0 1 auto;
  }
  .cpn_overview_txt p{
    line-height: 1.5;
    font-weight: 400;
  }
  .cpn_green,
  .cpn_orange{
    padding: 8px 0;
    display: inline-block;
  }

  .cpn_name{
    flex-wrap: wrap;
    margin-top: 56px;
  }
  .cpn_name_bg{
    background-size: contain;
    background-position: center bottom;
    padding-bottom: 40px;
    gap: 8px 0;
  }
  .cpn_name_flx{
    margin-top: -56px;
  }
  .cpn_name_matsuo .cpn_name_name{
    margin-left: -16px;
  }
  .cpn_name_osada {
    margin-top: 64px;
  }
  .cpn_name_osada .cpn_name_flx{
    flex-direction: row-reverse;
    align-items: flex-end;
  }
  .cpn_name_osada .cpn_name_name{
    margin-right: -24px;
  }


  .cpn_photoblock02 img{
    aspect-ratio: 1122/632;
  }
}




@media screen and (max-width: 690px){
  .tss_wrap::before{
    content: none;
  }
  .tss_wrap::after{
    content: none;

  }


  .cpn_photoblock01 img{
    aspect-ratio: 820/882;
  }


  .cpn_name_bg{
    background-size: contain;
  }


  .cpn_time_bg{
    border-radius: 0;
  }
  .cpn_time_list{
    grid-template-columns: repeat(2, auto);
  }


  .cpn_photoblock02{
    margin-top: 0;
  }
}




@media screen and (max-width: 430px){
  .cpn_spbr {
      display: block;
  }
}