@charset "UTF-8";
/*========================================================
                        Camera
=========================================================*/
.camera_container {
  position: relative;
  padding-bottom: 24.87805%;
}
.camera_container .aininsho img {
  position: absolute;
  right: 19.5vw;
  top: 105px;
  height: 300px;
  z-index: 100;
}
.camera_container .maru_orange img {
  position: absolute;
  right: 6.5vw;
  top: 240px;
  height: 150px;
  z-index: 110;
}
.camera_container .maru_pink img {
  position: absolute;
  right: -0.2vw;
  top: 156px;
  height: 130px;
  z-index: 110;
}
.camera_container .maru_yellow img {
  position: absolute;
  left: 1%;
  top: 300px;
  height: 100px;
  z-index: 110;
}
@media (min-width: 980px) and (max-width: 1199px) {
  .camera_container .aininsho img {
    position: absolute;
    right: 17vw;
    top: 75px;
    height: calc(210/750 * 100vw);
    z-index: 100;
  }
  .camera_container .maru_orange img {
    position: absolute;
    right: 6.7vw;
    top: 260px;
    height: calc(220/1600 * 100vw);
    z-index: 110;
  }
  .camera_container .maru_pink img {
    position: absolute;
    right: -0.2vw;
    top: 200px;
    height: calc(170/1600 * 100vw);
    z-index: 110;
  }
  .camera_container .maru_yellow img {
    position: absolute;
    left: 2vw;
    top: 270px;
    height: calc(170/1600 * 100vw);
    z-index: 110;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .camera_container .aininsho img {
    position: absolute;
    right: 17vw;
    top: 130px;
    height: calc(240/750 * 100vw);
    z-index: 100;
  }
  .camera_container .maru_orange img {
    position: absolute;
    right: 5.4vw;
    top: 250px;
    height: calc(240/1600 * 100vw);
    z-index: 110;
  }
  .camera_container .maru_pink img {
    position: absolute;
    right: -1vw;
    top: 215px;
    height: calc(190/1600 * 100vw);
    z-index: 110;
  }
  .camera_container .maru_yellow img {
    position: absolute;
    left: 4vw;
    top: 270px;
    height: calc(200/1600 * 100vw);
    z-index: 110;
  }
}
@media (max-width: 767px) {
  .camera_container .aininsho img {
    position: absolute;
    right: -6vw;
    top: 185px;
    height: calc(340/750 * 100vw);
    z-index: 100;
  }
  .camera_container .maru_orange img {
    position: absolute;
    left: 2vw;
    top: 260px;
    height: calc(130/750 * 100vw);
    z-index: 110;
  }
  .camera_container .maru_pink img {
    position: absolute;
    right: 17vw;
    top: 320px;
    height: calc(110/750 * 100vw);
    z-index: 110;
  }
  .camera_container .maru_yellow img {
    position: absolute;
    left: 77vw;
    top: -15px;
    height: calc(110/750 * 100vw);
    z-index: 110;
  }
  .container .row .intro {
    witdh: calc(300/750 * 100vw);
    margin-left: 0;
  }
}
@media (max-width: 479px) {
  .camera_container .aininsho img {
    position: absolute;
    right: -6vw;
    top: 185px;
    height: calc(440/750 * 100vw);
    z-index: 100;
  }
  .camera_container .maru_orange img {
    position: absolute;
    right: 46vw;
    top: 260px;
    height: calc(230/750 * 100vw);
    z-index: 110;
  }
  .camera_container .maru_pink img {
    position: absolute;
    right: 27vw;
    top: 310px;
    height: calc(170/750 * 100vw);
    z-index: 110;
  }
  .camera_container .maru_yellow img {
    position: absolute;
    left: 73vw;
    top: -15px;
    height: calc(180/750 * 100vw);
    z-index: 110;
  }
  .container .row .intro {
    witdh: calc(300/750 * 100vw);
    margin-left: 0;
  }
}
@media (max-width: 1406.86275px) {
  .camera_container {
    padding-bottom: 350px;
  }
}
@media (min-width: 479px) and (max-width: 767px) {
  .camera_container {
    padding-bottom: 350px;
  }
}
.camera_wrap {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin-bottom: 0 !important;
  height: 100%;
  background: #fff;
  z-index: 0;
}
.camera_bus1 {
  position: relative;
  margin: 0 auto 0 0;
  width: 100%;
  border-radius: 15px;
  background: none;
  opacity: 1;
  z-index: 9;
}
.camera_bus1 img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(5%, -26%);
  max-width: none;
  width: auto;
  height: 156px;
}
.camera_bus1 .bus_anime_top {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(15%, -15%);
  max-width: none;
  width: auto;
  height: 156px;
}
.camera_bus1 .ai-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-69%, -18%);
  max-width: none;
  width: auto;
  height: 120px;
}
.camera_bus1 .ai-lady {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translate(10%, 1%);
  max-width: none;
  width: auto;
  height: 150px;
}
.camera_bus1 h4 {
  /*  position: absolute;
  top: 1px;
  left: 1px;
  transform: translate(0, -1%);
  max-width: none;*/
  text-align: left;
  z-index: 10;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.camera_bus1 p {
  /*  position: absolute;
  top: 1px;
  left: 1px;
  transform: translate(0, 100%);
  max-width: none;*/
  text-align: left;
  z-index: 10;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
}
.ai-plate .camera_bus1 h4 {
  position: absolute;
  top: 50%;
  left: 1%;
  transform: translate(1%, 190%);
  max-width: none;
  text-align: left;
  z-index: 10;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.ai-plate .camera_bus1 p {
  position: absolute;
  top: 50%;
  left: 1%;
  transform: translate(1%, 180%);
  max-width: none;
  text-align: left;
  z-index: 10;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
}
@media (min-width: 980px) and (max-width: 1199px) {
  .camera_bus1 .bus_anime_top {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(8%, -22%);
    max-width: none;
    width: auto;
    height: 140px;
  }
  .camera_bus1 .ai-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -15%);
    max-width: none;
    width: auto;
    height: 110px;
  }
  .camera_bus1 .ai-lady {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(10%, 30%);
    max-width: none;
    width: auto;
    height: 120px;
  }
}
@media (max-width: 1199px) {
  .ai-plate .camera_bus1 h4 {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-5%, 190%);
    max-width: none;
    text-align: left;
    z-index: 10;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
  }
  .ai-plate .camera_bus1 p {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-5%, 170%);
    max-width: none;
    text-align: left;
    z-index: 10;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
  }
}
@media (max-width: 979px) {
  .camera_bus1 .bus_anime_top {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-5%, -52%);
    max-width: none;
    width: auto;
    height: 200px;
  }
  .camera_bus1 .ai-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-115%, 5%);
    max-width: none;
    width: auto;
    height: 120px;
  }
  .camera_bus1 .ai-lady {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(10%, -30%);
    max-width: none;
    width: auto;
    height: 150px;
  }
  .ai-plate .camera_bus1 h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-8%, 50%);
    max-width: none;
    text-align: left;
    z-index: 10;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
  }
  .ai-plate .camera_bus1 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-11%, 50%);
    max-width: none;
    text-align: left;
    z-index: 10;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
  }
}
@media (max-width: 767px) {
  .camera_container .camera_wrap div.data-src {
    width: 50%;
  }
  /* 既存の width:100vw / height:50% / max-width:none を打ち消す */
  .camera_wrap img {
    width: auto;
    height: auto;
    max-width: 100% !important;
  }
  /* ステージ高に合わせて等比で“収める” */
  #camera .cameraSlide img, #camera .camera_target img {
    width: 100% !important;
    height: 100% !important; /* ←object-fit を効かせるために指定 */
    object-fit: contain; /* ←左右切れ防止のキモ */
    object-position: center;
  }
  .camera_bus1 {
    position: relative;
    margin: 0 auto 0 5px;
    height: auto;
  }
  .camera_bus1 img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(15%, -28%);
    max-width: none;
    width: auto;
    height: 130px;
  }
  .camera_bus1 .bus_anime_top {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(15%, -28%);
    max-width: none;
    width: auto;
    height: 130px;
  }
  .camera_bus1 h4 {
    text-align: left;
    z-index: 10;
    font-size: calc(36/750 * 100vw);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
  }
  .camera_bus1 p {
    text-align: left;
    z-index: 10;
    font-size: calc(28/750 * 100vw);
    font-weight: 700;
    color: #000;
    line-height: 1.3;
  }
  .camera_bus1 .ai-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-65%, -15%);
    max-width: none;
    width: auto;
    height: 100px;
  }
  .camera_bus1 .ai-lady {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(2%, 55%);
    max-width: none;
    width: auto;
    height: 90px;
  }
  .ai-plate .camera_bus1 h4 {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-1%, 190%);
    max-width: none;
    text-align: left;
    z-index: 10;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
  }
  .ai-plate .camera_bus1 p {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-1%, 210%);
    max-width: none;
    text-align: left;
    z-index: 10;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
  }
}
@media (max-width: 479px) {
  .camera_container .camera_wrap div.data-src {
    width: 50%;
  }
  .camera_bus1 img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(14%, -32%);
    max-width: none;
    width: auto;
    height: 130px;
  }
}
/*.camera_wrap img {
  max-width: none !important;
  border: none;
}*/
.camera_fakehover {
  height: 100%;
  min-height: 60px;
  position: relative;
  width: 100%;
}
.camera_src {
  display: none;
}
.cameraCont, .cameraContents {
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
.cameraSlide {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.cameraContent {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
}
.camera_target {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  text-align: left;
  z-index: 0;
}
.camera_overlayer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}
.camera_target_content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 2;
}
.camera_loader {
  border: 1px solid #ffffff;
  border-radius: 18px;
  height: 36px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  margin: -18px 0 0 -18px;
  top: 50%;
  width: 36px;
  z-index: 3;
}
.camera_nav_cont {
  height: 65px;
  overflow: hidden;
  position: absolute;
  right: 9px;
  top: 15px;
  width: 120px;
  z-index: 4;
}
.camerarelative {
  overflow: hidden;
  position: relative;
}
.imgFake {
  cursor: pointer;
}
.camera_command_wrap .hideNav {
  display: none;
}
.camera_command_wrap {
  left: 0;
  position: relative;
  right: 0;
  z-index: 4;
}
.showIt {
  display: none;
}
.camera_clear {
  clear: both;
  display: block;
  height: 1px;
  margin: -1px 0 25px;
  position: relative;
}
.camera_caption {
  display: none;
}
.cameraContent .camera_caption {
  display: block;
}
/*================   Custom Layout&Styles   =====================*/
.camera_caption {
  position: absolute;
  width: 100%;
  top: 49%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #fff;
}
.camera_caption h1, .camera_caption h2, .camera_caption h3, .camera_caption h4, .camera_caption h5, .camera_caption h6 {
  color: #333;
}
.camera_caption h2 .yelight {
  color: #FFB2E6;
}
.camera_caption h2 .grnlight {
  color: #83D799;
}
.camera_caption h2 .yelight {
  color: #FFFCB2;
}
.camera_caption h2 .grnlight {
  color: #83D799;
}
.camera_caption .container h2.normal {
  max-width: 600px;
  line-height: 1.5;
  padding: 5px;
  vertical-align: middle;
}
.camera_caption .container h2.tsume {
  max-width: 777px;
  line-height: 1.7;
  font-size: 2.5rem;
  padding: 10px auto 0 auto;
}
.camera_caption .container h2 {
  font-feature-settings: "palt";
  letter-spacing: -0.03em;
}
/*FADE IN*/
.camera_caption h2 {
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
/*FADE IN END*/
@media (min-width: 768px) {
  .camera_caption h2 {
    max-width: 650px;
    font-size: 30px;
    left: 50%;
    text-align: center;
    position: relative;
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -moz-background-color: hsla(0, 0%, 100%, 0.70);
    -ms-background-color: hsla(0, 0%, 100%, 0.70);
    -o-background-color: hsla(0, 0%, 100%, 0.70);
    -webkit-background-color: hsla(0, 0%, 100%, 0.70);
    background-color: hsla(0, 0%, 100%, 0.70);
  }
  .camera_caption h2.gif-anime img {
    position: absolute;
    max-width: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
  }
}
@media (max-width: 767px) {
  .camera_caption h2 {
    width: calc(600/750 * 100vw);
    font-size: calc(32/750 * 100vw);
    left: 50%;
    text-align: center;
    position: relative;
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -moz-background-color: hsla(0, 0%, 100%, 0.70);
    -ms-background-color: hsla(0, 0%, 100%, 0.70);
    -o-background-color: hsla(0, 0%, 100%, 0.70);
    -webkit-background-color: hsla(0, 0%, 100%, 0.70);
    background-color: hsla(0, 0%, 100%, 0.70);
  }
  .camera_caption h2.gif-anime img {
    width: calc(880/750 * 100vw);
    left: 50%;
    text-align: center;
    position: relative;
    transform: translate(-50%, 15%);
  }
}
.camera_caption > div {
  height: 100%;
}
/* スライド背景を常に中央寄せ＆横幅いっぱいに（必要なら上下トリミング） */
#camera .cameraSlide {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important; /* ←横幅にフィットさせるなら cover */
}
/* もし “絶対に切らせたくない” なら、スマホだけ contain に切替 */
@media (max-width: 767px) {
  #camera .cameraSlide {
    background-size: contain !important;
  }
}
/* ===== Camera 強制リセット＆中央フィット ===== */
/* まず Camera が入れる max-width:none を打ち消す */
#camera .cameraSlide img, #camera .camera_target img, .camera_wrap img {
  max-width: 100% !important;
}
/* 画像をステージ中央に固定し、デバイス幅いっぱいにフィット */
#camera .cameraSlide img, #camera .camera_target img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important; /* 右寄せを無効化 */
  transform: translate(-50%, -50%) !important;
  width: 100% !important; /* ステージ幅に合わせる */
  height: 100% !important; /* ステージ高に合わせる */
  object-fit: cover !important; /* はみ出しOKで全面に表示（上下が少し切れることあり） */
  object-position: center center !important;
  margin: 0 !important;
  /* Camera が付ける margin-left の負値でのセンタリングも無効化 */
  margin-left: 0 !important;
}
/* どうしても切らせたくないならスマホだけ contain に切替 */
@media (max-width: 767px) {
  #camera .cameraSlide img, #camera .camera_target img {
    object-fit: contain !important; /* 全体表示（両サイドに余白が出る） */
  }
}
/* picture をスライドの全面に敷く */
#camera .slide .hero-media, #camera .slide .hero-media picture, #camera .slide .hero-media img {
  position: absolute;
  inset: 0; /* top/right/bottom/left:0 */
  width: 100%;
  height: 100%;
  display: block;
}
/* 基本は cover：余白なしで気持ちよく見せる */
#camera .slide .hero-media img {
  object-fit: cover;
  object-position: center;
}
/* もしスマホで“切らさず全体表示”にしたいなら contain に */
@media (max-width: 767px) {
  /* 片方だけ contain にしたい場合は .slide に個別クラスを付けて指定も可 */
  /* 例: #camera .slide.is-contain .hero-media img { object-fit: contain; } */
}
/* 常に中央＆全面表示 */
#camera .cameraSlide {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
/* モバイルだけ画像を差し替え（スライドごとに指定） */
@media (max-width: 767px) {
  #camera .cameraSlide.slide--logoset {
    background-image: url("/images/sp_ictlab-logoset.png") !important;
  }
  #camera .cameraSlide.slide--kengakukai {
    background-image: url("/images/sp_kengakukai_vol1.png") !important;
  }
}
/* もし .cameraSlide にクラスが移らない場合の保険（nth-child） */
@media (max-width: 767px) {
  #camera .cameraSlide:nth-of-type(1) {
    background-image: url("/images/sp_ictlab-logoset.png") !important;
  }
  #camera .cameraSlide:nth-of-type(2) {
    background-image: url("/images/sp_kengakukai_vol1.png") !important;
  }
}
/* ==== モバイルは背景方式に統一：<img>は非表示 ==== */
@media (max-width: 767px) {
  /* Camera が生成するスライド内の <img> を隠す（PC画像の重なりを防止） */
  #camera .cameraSlide img, #camera .camera_target img {
    display: none !important;
  }
  /* 背景の描画を明示（中央・全面） */
  #camera .cameraSlide {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important; /* 余白なし。全体表示なら contain に */
  }
}
/* スマホ：スライド順に正しく差し替え（①見学会 → ②ロゴ） */
@media (max-width: 767px) {
  /* ① 1枚目：見学会 */
  #camera .cameraSlide:nth-of-type(1) {
    background-image: url("/images/sp_kengakukai_vol1.png") !important;
  }
  /* ② 2枚目：ロゴ＋ピンク帯 */
  #camera .cameraSlide:nth-of-type(2) {
    background-image: url("/images/sp_ictlab-logoset.png") !important;
  }
  /* PC用 <img> は非表示（重なり防止） */
  #camera .cameraSlide img, #camera .camera_target img {
    display: none !important;
  }
  .camera_caption .container h2.tsume {
    max-width: calkc(680/750 * 100vw);
    line-height: 1.7;
    font-size: 1.5rem;
    padding: 10px auto 0 auto;
  }
}