/*base     ======================================
フォントや文字色、ベースカラーなど
=================================================*/

body {
  background: #d2efff;
}

.main {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: auto;
  max-width: 1000px;
}

.bg--main{
  background-color: #FFF;
background-image: url(../images/0_bg.webp);
background-position: center top;
background-size: 148%;

}
@media screen and (min-width: 769px) {
.bg--main{
  background-color: #FFF;
background-image: url(../images/0_bg_pc.webp);
background-position: center top;
background-size: 100%;

}}


/*layout   ======================================
header、footer、hamburger なども
=================================================*/


.columns {
  display: flex;
  flex-wrap:wrap;
  margin: auto;
  width: 100%;
  justify-content: center;
}

.column2 {
  margin-right: 0% !important;
  width: calc(50%) !important;
}

.column2:nth-child(even) {
  margin-right: 0% !important;
}

.column3 {
  margin-right: 2% !important;
  width: calc(94% / 3) !important;
}

.column3:nth-child(3) {
  margin-right: 0% !important;
}

.footer__fix__top{
  background-color: #3e549f;
}

/*component =====================================
サイト内で何度も使いまわしたいもの(btnや各ブロックのタイトルなど)
=================================================*/
.btn--img:hover,
a.btn--img:hover{
  opacity: 0.6;
  transition: 0.3s;
}

/*SPサイズのときのみ左右をトリミング*/
@media screen and (max-width: 768px) {
.trimm{
  width: 120%;
  left: -10%;
  position: relative;
}
}
/*contents  ======================================
各コンテンツごとの設定
=================================================*/
.mainvisual_title {
  width: 82%;
  top: 3.7%;
  left: 10.8%;
}

.bgColor--cp{
  background-color: #EAE6E0;
}

.cp1_sensing {
  width: 11.5%;
    top: 10.5%;
    left: 55.5%;
}

.cp2_sensing {
  width: 9.1%;
    top: 11.5%;
    left: 54.2%;
}

.cp3_sensing {
  width: 9.1%;
  top: 10.4%;
  left: 71.8%;
}

.cp4_sensing {
  width: 9.1%;
  top: 10.2%;
  left: 51.3%;
}

.bgColor--info{
  background-color: #59A1D5;
}

@media screen and (min-width: 769px) {
  .mainvisual_title {
    width: 64%;
    top: 3.8%;
    left: 18.9%;
  }
    
  .cp1_sensing {
    width: 9.5%;
    top: 10.5%;
    left: 54.1%;
  }
  
  .cp2_sensing {
    width: 9.5%;
    top: 11.5%;
    left: 54.2%;
  }
  
  .cp3_sensing {
    width: 9.5%;
    top: 10.4%;
    left: 71.8%;
  }
  
  .cp4_sensing {
    width: 9.5%;
    top: 10.2%;
    left: 51.3%;
  }
   
  }