@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- 共通部分
- mv
- history_sec
- 追従　年表・コメントを見てくれると嬉しいな
- 追従　年表・コメントを見てくれると嬉しいな(sp)
- モーダル
-------------------------*/
/*=======================================
　共通部分
=======================================*/

body {
  margin: 0;
  background-color: #ffffff;
}

.semisolid-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 50px;
  text-align: center;
  box-sizing: border-box;
  overflow-x: hidden;
}

.semisolid-container img,
.semisolid-container video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 半固体系モバイルバッテリー商品リンク */

.semisolid-model-wrap {
  position: relative;
  width: 100%;
}

.semisolid-model-picture,
.semisolid-model-picture img {
  display: block;
  width: 100%;
  height: auto;
}

.semisolid-link {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  z-index: 2;
}

/* PC：横3分割 */

.semisolid-link-01 {
  left: 0;
  width: 33.333%;
}

.semisolid-link-02 {
  left: 33.333%;
  width: 33.333%;
}

.semisolid-link-03 {
  left: 66.666%;
  width: 33.334%;
}

.video-frame {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 16 / 5;
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none;
}

/* SP */

@media screen and (max-width: 768px) {

  .semisolid-container {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    padding-top: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .semisolid-container picture,
  .semisolid-container img,
  .semisolid-container video {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .semisolid-link {
    left: 0;
    width: 100%;
    height: 33.333%;
  }

  .semisolid-link-01 {
    top: 0;
  }

  .semisolid-link-02 {
    top: 33.333%;
  }

  .semisolid-link-03 {
    top: 66.666%;
    height: 33.334%;
  }

  .video-frame {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    aspect-ratio: 16 / 5;
  }

  .video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 53%;
    transform: none;
  }

}