@charset "UTF-8";
/* CSS Document */
/*---------------------------------------------
	日本電気硝子のグローバル展開  TOPcss
  ---------------------------------------------*/
.main_area {
  background: url("/assets/img/business/world/main_image.jpg") center no-repeat;
  background-size: cover;
  text-align: center;
  padding-top: 350px;
}
@media all and (max-width: 480px) {
  .main_area {
    padding-top: 100px;
  }
}
.main_area h2 {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  padding: 0 20px;
  opacity: 0;
  filter: blur(10px);
  clip-path: inset(0 100% 0 0);
  animation: h2Anim 0.8s 1s ease-in-out;
  animation-fill-mode: forwards;
}
@media all and (max-width: 480px) {
  .main_area h2 {
    padding: 0 10px;
  }
}

/*---------------------------------------------
コンテンツ
  ---------------------------------------------*/
.world_ratio {
  width: 1150px;
  margin: 0 auto;
  text-align: center;
}
@media all and (max-width: 480px) {
  .world_ratio {
    width: 100%;
  }
}
@media all and (max-width: 480px) {
  .world_ratio h3, .world_ratio p {
    width: 90%;
    margin: 0 auto;
  }
}
@media all and (max-width: 480px) {
  .world_ratio p {
    text-align: left;
  }
}
.world_ratio .glaf {
  width: 354px;
  height: 354px;
  background: url("/assets/img/business/world/glaf.png") no-repeat;
  background-size: contain;
  margin: 0 auto;
  padding-top: 80px;
  opacity: 0;
  clip-path: circle(0);
  transition: 1s;
}
@media all and (max-width: 480px) {
  .world_ratio .glaf {
    width: 70%;
    height: 70vw;
    padding-top: 60px;
    opacity: 1;
    clip-path: circle(100%);
  }
}
.world_ratio .glaf dd {
  color: #fff;
}
.world_ratio .glaf dd span {
  font-size: 140px;
}
@media all and (max-width: 480px) {
  .world_ratio .glaf dd span {
    font-size: 120px;
  }
}
.world_ratio .glaf.isAnimate {
  opacity: 1;
  clip-path: circle(100%);
}
.world_ratio .map_area {
  width: 100%;
  background: url("/assets/img/business/world/map_bg.png") top center no-repeat;
  background-size: contain;
  padding-top: 90px;
  overflow: hidden;
}
@media all and (max-width: 480px) {
  .world_ratio .map_area {
    padding-top: 8vw;
  }
}
.world_ratio .map_area .clip {
  width: 989px;
  margin-left: 65px;
  margin-bottom: -50px;
  transform: translateY(50px);
  opacity: 0;
  transition: 1s;
}
@media all and (max-width: 480px) {
  .world_ratio .map_area .clip {
    width: 85%;
    margin-left: 6vw;
    margin-bottom: 40px;
  }
}
.world_ratio .map_area .clip.isAnimate {
  opacity: 1;
  transform: translateY(0);
}
.world_ratio .map_area dl {
  float: right;
  margin: 0 230px 0 0;
}
@media all and (max-width: 480px) {
  .world_ratio .map_area dl {
    float: none;
    margin: 0 auto;
  }
}
.world_ratio .map_area dl span {
  font-size: 140px;
  margin-right: 10px;
}
@media all and (max-width: 480px) {
  .world_ratio .map_area dl span {
    font-size: 120px;
  }
}

.contents_inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media all and (max-width: 480px) {
  .contents_inner {
    display: block;
    text-align: center;
  }
}
.contents_inner .number_box ul {
  display: flex;
  text-align: center;
}
@media all and (max-width: 480px) {
  .contents_inner .number_box ul {
    width: 280px;
    margin: 0 auto;
  }
}
.contents_inner .number_box ul li {
  width: 120px;
}
@media all and (max-width: 480px) {
  .contents_inner .number_box ul li {
    width: 93px;
  }
}
.contents_inner .number_box p + p {
  text-align: right;
}
@media all and (max-width: 480px) {
  .contents_inner .number_box p + p {
    text-align: center;
  }
}
.contents_inner .voice_link_area {
  width: 100%;
  position: relative;
}
.contents_inner .voice_link_area .inner {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.5);
  padding: 100px 50px 80px;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media all and (max-width: 480px) {
  .contents_inner .voice_link_area .inner {
    padding: 30px;
  }
}
.contents_inner .voice_link_area .inner h3, .contents_inner .voice_link_area .inner p {
  text-align: center;
  width: 100%;
}
@media all and (max-width: 480px) {
  .contents_inner .voice_link_area .inner p {
    text-align: left;
  }
}
.contents_inner .voice_link_area .inner .voice_btn a {
  display: block;
  width: 280px;
  position: relative;
  text-align: left;
}
@media all and (max-width: 480px) {
  .contents_inner .voice_link_area .inner .voice_btn a {
    width: 100%;
  }
}
.contents_inner .voice_link_area .inner .voice_btn a:after {
  content: "";
  width: 70px;
  height: 70px;
  position: absolute;
  right: 0;
  left: 0;
  top: -30px;
  margin: 0 auto;
}
.contents_inner .voice_link_area .inner .voice_btn a figure {
  position: relative;
  width: 100%;
  height: 100%;
}
.contents_inner .voice_link_area .inner .voice_btn a figure img {
  transition: 0.3s;
}
.contents_inner .voice_link_area .inner .voice_btn a figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  border-radius: 0 10px 0 0;
  padding: 3px 10px 0 10px;
  transition: 0.3s;
}
.contents_inner .voice_link_area .inner .voice_btn a p {
  width: 100%;
  text-align: left;
  position: relative;
}
.contents_inner .voice_link_area .inner .voice_btn a p:after {
  content: "";
  width: 86px;
  height: 86px;
  position: absolute;
  right: 5px;
  top: -40px;
}
.contents_inner .voice_link_area .inner .voice_btn a:hover:after {
  animation: hoverAnim 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
.contents_inner .voice_link_area .inner .voice_btn a:hover figure img {
  opacity: 0.8;
}
.contents_inner .voice_link_area .inner .voice_btn a:hover figcaption {
  background-color: #0075C2;
  color: #fff;
}
.contents_inner .voice_link_area .inner .voice_btn:nth-of-type(1) a:after {
  background: url("/assets/img/business/world/germany_element.png") no-repeat center;
  background-size: 80%;
}
.contents_inner .voice_link_area .inner .voice_btn:nth-of-type(1) a p:after {
  background: url("/assets/img/business/world/germany_staff.png") no-repeat;
  background-size: contain;
}
.contents_inner .voice_link_area .inner .voice_btn:nth-of-type(2) a:after {
  background: url("/assets/img/business/world/taiwan_element.png") no-repeat;
  background-size: 100%;
}
.contents_inner .voice_link_area .inner .voice_btn:nth-of-type(2) a p:after {
  background: url("/assets/img/business/world/taiwan_staff.png") no-repeat;
  background-size: contain;
}
.contents_inner .voice_link_area .inner .voice_btn:nth-of-type(3) a:after {
  background: url("/assets/img/business/world/malaysia_element.png") no-repeat;
  background-size: 100%;
}
.contents_inner .voice_link_area .inner .voice_btn:nth-of-type(3) a p:after {
  background: url("/assets/img/business/world/malaysia_staff.png") no-repeat;
  background-size: contain;
}
.contents_inner .blue_shadow {
  content: "";
  width: 100%;
  height: 100%;
  background: rgb(5, 23, 138);
  background: linear-gradient(45deg, rgb(5, 23, 138) 0%, rgb(86, 87, 252) 26%, rgb(5, 58, 124) 44%, rgb(59, 212, 242) 100%);
  position: absolute;
  backdrop-filter: blur(10px);
  opacity: 0.2;
  top: 20px;
  left: 20px;
  z-index: -1;
}
@media all and (max-width: 480px) {
  .contents_inner .blue_shadow {
    top: 10px;
    left: 10px;
  }
}

dl.elem {
  opacity: 0;
  filter: blur(10px);
  transition: 1s;
}

dl.isAnimate {
  opacity: 1;
  filter: blur(0);
}

.contents_inner dl:nth-of-type(1).elem {
  transition-delay: 0s;
}

.contents_inner dl:nth-of-type(2).elem {
  transition-delay: 0.5s;
}

.contents_inner dl:nth-of-type(3).elem {
  transition-delay: 1s;
}

@keyframes hoverAnim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.under_link_area a {
  background: url("/assets/img/business/world/under_link.jpg") center no-repeat;
  background-size: cover;
}
.under_link_area a p span {
  display: inline-block;
  background-color: #fff;
  line-height: 1em;
  padding: 5px 10px 1px;
}/*# sourceMappingURL=world.css.map */