@charset "utf-8";
/* CSS Document */

.service_1{
  color:#aaa;
  font-size:35px;
  text-transform: uppercase; /* 強制的にすべて大文字にして表示する */
  letter-spacing:0.2em;
}


.service_2{
  width:100%;
  margin:0 auto;
  margin-bottom:30px;
  padding-top:1px;
  font-size:25px;

}

.service_3{
  width:90%;
  margin:0 auto;
  max-width:1280px;
  padding-top:100px;
}

.service_4{
  display: flex;
  flex-direction: column; /* 縦方向（上から下）に並べる */
  width: 100%;             /* 必要に応じて幅を指定 */
  gap:100px;  
}

.service_5{
  width:100%;
  display: flex;
  flex-direction:column;
  justify-content: center; /* 横軸で中央寄せ */
  align-items: center;     /* 縦方向の中央寄せ（必要に応じて） */
}

.service_6{
  width:90%;
  height:250px;

}

.service_6 img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を維持したままdiv全体を埋める（はみ出た部分は切り落とされる） */
}

.service_7{
  width:90%;
  height:auto;
  background-color: rgba(255, 255, 255, 0.5);
}

.service_8{
  width:90%;
  height:auto;
  background-color: rgba(255, 255, 255, 0.5);

}

.service_9{
  width:90%;
  height:250px;
}

.service_9 img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を維持したままdiv全体を埋める（はみ出た部分は切り落とされる） */
  
}

.service_10{
  margin-bottom:30px;
  padding:3%;
}

.service_11{
  padding:3%;

}

.service_12{
  width:100%;
  display: flex;
  flex-direction:column-reverse;
  justify-content: center; /* 横軸で中央寄せ */
  align-items: center;     /* 縦方向の中央寄せ（必要に応じて） */

}


/* デスクトップ用スタイル（1024px以上） */
@media only screen and (min-width: 1024px) {

.service_1{
  font-size:55px;
  letter-spacing:0.1em;
}

.service_3{
  width:100%;
}

.service_5{
  align-self: flex-start;  /* 左寄せ（省略してもデフォルトで左寄せになります） */
  width:90%;
  flex-direction:row;
}

.service_6{
  width:60%;
  height:330px;

}

.service_7{
  width:40%;
  height:auto;
  transform: translateX(-10%); /* 自要素の幅の10%分、左側に重ねる */
  padding:2%;
  z-index: 1;                  /* 重なり順の調整（必要に応じてdiv8を手前にする場合はz-indexを変更） */
}

/* クラスを組み合わせて詳細度を上げ、template.cssの定義を上書きする */
.service_7.scroll-animate.is-animated {
  transform: translateX(-10%);
}

.service_8{
  width:40%;
  height:auto;
  z-index: 1;                  /* 重なり順の調整（必要に応じてdiv8を手前にする場合はz-indexを変更） */
  padding:2%;

}

.service_9{
  width:60%;
  height:330px;

}

/* クラスを組み合わせて詳細度を上げ、template.cssの定義を上書きする */
.service_9.scroll-animate.is-animated {
  transform: translateX(-10%);
}

.service_10{
  padding:0;
}

.service_11{
  padding:0;
}

.service_12{
  align-self: flex-end;    /* 右寄せにする */
  width:90%;
  flex-direction:row;

}

}