@charset "UTF-8";
/*------------------------------------------------*/
/*------------------- fonts ----------------------*/
/*------------------------------------------------*/


/*----------------------
グローバルネットワーク 地図
------------------------*/
.osn-map {
  width: 1300px;
  height: 776px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.osn-map .osn-map_bg {
  width: 100%;
  height: 100%;
}
.osn-map .osn-map_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.osn-map .osn-map_txt ul li a p {
  display: inline-block;
  position: absolute;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1rem;
  color: #000;
  padding: 0 15px 3px 15px;
  margin-left: 25px;
  border-bottom: 1px solid #000;
  transition: all 0.3s ease;
}
.osn-map .osn-map_txt ul li a p::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: -10px;
  transform: translate(-50%, 0%);
  width: 25px;
  height: 25px;
  border-radius: 50px;
  transition: all 0.2s ease;
}
.osn-map .osn-map_txt ul li a p:hover::before {
  scale: 1.2;
}
.osn-map .osn-map_txt ul li a .map-pic,
.osn-map .osn-map_txt ul li a .map-img {
  opacity: 0;
  transition: all 0.5s ease;
  box-shadow: 10px 10px 20px black;
}
.osn-map .osn-map_txt ul li a .map-pic {
  width: 190px;
  position: absolute;
  bottom: 5%;
  left: 5%;
}
.osn-map .osn-map_txt ul li a .map-img {
  width: 300px;
  position: absolute;
  bottom: 18%;
  right: 5%;
}
.osn-map .osn-map_txt ul li.blue a p::before {
  background: #2e75b6;
}
.osn-map .osn-map_txt ul li.orange a p::before {
  background: #ffa500;
}
.osn-map .osn-map_txt ul .osn-map_txt-japan a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-japan a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-taiwan a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-taiwan a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-china a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-china a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-korea a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-korea a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-thailand a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-thailand a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-indonesia a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-indonesia a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-vietnam a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-vietnam a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-bangladesh a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-bangladesh a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-philippines a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-philippines a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-pakistan a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-pakistan a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-myanmar a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-myanmar a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-laos a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-laos a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-cambodia a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-cambodia a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-nepal a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-nepal a p:hover + .map-pic + .map-img,
.osn-map .osn-map_txt ul .osn-map_txt-srilanka a p:hover + .map-pic,
.osn-map .osn-map_txt ul .osn-map_txt-srilanka a p:hover + .map-pic + .map-img {
  opacity: 1;
}
.osn-map .osn-map_txt ul .osn-map_txt-japan a p {
  top: 210px;
  left: 980px;
}
.osn-map .osn-map_txt ul .osn-map_txt-taiwan a p {
  top: 310px;
  left: 860px;
}
.osn-map .osn-map_txt ul .osn-map_txt-china a p {
  top: 80px;
  left: 750px;
}
.osn-map .osn-map_txt ul .osn-map_txt-korea a p {
  top: 190px;
  left: 890px;
}
.osn-map .osn-map_txt ul .osn-map_txt-thailand a p {
  top: 380px;
  left: 665px;
}
.osn-map .osn-map_txt ul .osn-map_txt-indonesia a p {
  top: 580px;
  left: 740px;
}
.osn-map .osn-map_txt ul .osn-map_txt-vietnam a p {
  top: 440px;
  left: 730px;
}
.osn-map .osn-map_txt ul .osn-map_txt-bangladesh a p {
  top: 260px;
  left: 580px;
}
.osn-map .osn-map_txt ul .osn-map_txt-philippines a p {
  top: 420px;
  left: 835px;
}
.osn-map .osn-map_txt ul .osn-map_txt-pakistan a p {
  top: 240px;
  left: 370px;
}
.osn-map .osn-map_txt ul .osn-map_txt-myanmar a p {
  top: 300px;
  left: 650px;
}
.osn-map .osn-map_txt ul .osn-map_txt-laos a p {
  top: 330px;
  left: 710px;
}
.osn-map .osn-map_txt ul .osn-map_txt-cambodia a p {
  top: 405px;
  left: 685px;
}
.osn-map .osn-map_txt ul .osn-map_txt-nepal a p {
  top: 220px;
  left: 530px;
}
.osn-map .osn-map_txt ul .osn-map_txt-srilanka a p {
  top: 450px;
  left: 515px;
}
.osn-map .osn-map_category {
  position: absolute;
  bottom: 5%;
  right: 5%;
  background: #fff;
  padding: 10px 20px;
}
.osn-map .osn-map_category ul li {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
}
.osn-map .osn-map_category ul li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 25px;
  height: 25px;
  border-radius: 50px;
}
.osn-map .osn-map_category li.blue::before {
  background: #2e75b6;
}
.osn-map .osn-map_category li.orange::before {
  background: #ffa500;
}

/*----------------------
グローバルネットワーク タイトル
------------------------*/
.osn-top {
  margin-bottom: 80px;
}
.osn-top .osn-title {
  margin-top: 40px;
  margin-bottom: 30px;
}
.osn-top .osn-title h3,
.osn-top .osn-title p {
  display: inline-block;
}
.osn-top .osn-title h3 {
  margin-right: 30px;
}
.osn-top .osn-title p {
  font-size: 1.125rem;
  font-weight: 700;
}
.osn-top .osn-icon-list {
  margin-bottom: 30px;
}
.osn-top .osn-icon-list ul li {
  width: 20%;
}

.osn-icon-list ul {
  width: 100%;
  justify-content: flex-start;
}
.osn-icon-list ul li {
  text-align: center;
}
.osn-icon-list ul li .osn-icon {
  width: 50px;
  margin: 0 auto;
  padding: 5px 0;
  display: block;
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.osn-icon-list ul li .osn-icon_01 {
  background: #00a0e9;
}
.osn-icon-list ul li .osn-icon_02 {
  background: #fabe00;
}
.osn-icon-list ul li .osn-icon_03 {
  background: #39b54a;
}
.osn-icon-list ul li .osn-icon_04 {
  background: #754c24;
}
.osn-icon-list ul li .osn-icon_txt {
  font-size: 0.75rem;
}

.osn-content .osn-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.osn-content .osn-accordion .osn-accordion_item {
  margin-bottom: 35px;
}
.osn-content .osn-accordion .osn-accordion_btn {
  position: relative;
  appearance: none;
  text-align: left;
  width: 100%;
  display: flex;
  border-bottom: 6px solid #1d2088;
  padding-bottom: 5px;
}
.osn-content .osn-accordion .osn-accordion_btn .jp,
.osn-content .osn-accordion .osn-accordion_btn .en,
.osn-content .osn-accordion .osn-accordion_btn .code {
  font-size: 1.75rem;
  line-height: 1.75rem;
  font-weight: 700;
}
.osn-content .osn-accordion .osn-accordion_btn .jp {
  margin-right: 50px;
}
.osn-content .osn-accordion .osn-accordion_btn .code {
  margin-left: auto;
  margin-right: 50px;
  font-size: 1.375rem;
  line-height: 1.375rem;
  font-weight: 400;
}
.osn-content .osn-accordion .osn-accordion_btn .change_icon {
  width: 14px;
  height: 14px;
}
.osn-content .osn-accordion .osn-accordion_btn .change_icon::before, .osn-content .osn-accordion .osn-accordion_btn .change_icon::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18%;
  right: 5px;
  width: 20px;
  height: 5px;
  background: #e60012;
  transition: transform 0.1s;
  will-change: transform;
}
.osn-content .osn-accordion .osn-accordion_btn .change_icon::before {
  transform: rotate(90deg);
}
.osn-content .osn-accordion .osn-accordion_btn.open .change_icon::before {
  transform: rotate(180deg);
  animation: close 0.3s ease;
  /*safariのみアニメーション対策*/
}
@keyframes close {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.osn-content .osn-accordion .osn-accordion_content {
  height: 0;
  opacity: 0;
  visibility: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}
.osn-content .osn-accordion .osn-accordion_content.open,
.osn-content .osn-accordion .osn-accordion_view-all.open-all {
  height: auto;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}
.osn-content .osn-accordion .osn-accordion_wrap {
  overflow: hidden;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner {
  padding: 20px 0 60px 0;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail {
  width: 100%;
  margin-bottom: 10px;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_detail_company {
  width: 180px;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_detail_company h4 {
  text-align: center;
  display: block;
  padding: 5px 0;
  font-size: 1rem;
  line-height: 1rem;
  color: #fff;
  background: #0068b7;
  margin-right: 30px;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map {
  width: 40%;
  margin-left: auto;
  align-items: flex-start;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map .img {
  width: 48%;
  max-width: 200px;
  margin-right: 3%;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map .img img {
/*width: 100%; */
  height: 169px;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map .map {
  width: 48%;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map .map iframe {
  width: 100%;
  max-height: 100%;
  position: relative;
  border: 1px solid #000 !important;
}
.osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail-02 {
  margin-top: 50px;
}

/*各ページレイアウト*/

@media screen and (max-width: 768px) {
  .osn-map {
    width: 100%;
    height: 100%;
  }
  .osn-map .osn-map_txt ul li a p {
    font-size: max(1px, 1.8vw);
    line-height: 1.8vw;
    padding: 0 0 1px 0;
    margin-left: 0;
  }
  .osn-map .osn-map_txt ul li a p::before {
    width: 10px;
    height: 10px;
    left: -5px;
  }
  .osn-map .osn-map_txt ul li a .map-pic,
  .osn-map .osn-map_txt ul li a .map-img {
    display: none;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-japan a p {
    top: 18%;
    left: 74%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-taiwan a p {
    top: 32%;
    left: 66%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-china a p {
    top: 6%;
    left: 60%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-korea a p {
    top: 20%;
    left: 68%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-thailand a p {
    top: 37%;
    left: 54%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-indonesia a p {
    top: 55%;
    left: 58%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-vietnam a p {
    top: 45%;
    left: 57%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-bangladesh a p {
    top: 24%;
    left: 47%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-philippines a p {
    top: 40%;
    left: 66%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-pakistan a p {
    top: 23%;
    left: 34%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-myanmar a p {
    top: 28%;
    left: 51%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-laos a p {
    top: 32%;
    left: 55%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-cambodia a p {
    top: 41%;
    left: 55%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-nepal a p {
    top: 18%;
    left: 45%;
  }
  .osn-map .osn-map_txt ul .osn-map_txt-srilanka a p {
    top: 43%;
    left: 43%;
  }
  .osn-map .osn-map_category {
    position: inherit;
    bottom: 0;
    right: 0;
  }
  .osn-map .osn-map_category ul li {
    font-size: 0.75rem;
    display: inline-block;
    margin-right: 10px;
  }
  .osn-map .osn-map_category ul li::before {
    width: 15px;
    height: 15px;
  }
  .osn-top {
    margin-bottom: 30px;
  }
  .osn-top .osn-icon-list {
    margin-bottom: 10px;
  }
  .osn-top .osn-icon-list ul li {
    width: 50%;
    margin-bottom: 30px;
  }
  .osn-content .osn-accordion .osn-accordion_btn {
    display: block;
  }
  .osn-content .osn-accordion .osn-accordion_btn .jp,
  .osn-content .osn-accordion .osn-accordion_btn .en,
  .osn-content .osn-accordion .osn-accordion_btn .code {
    font-size: 1.125rem;
    line-height: 1.125rem;
  }
  .osn-content .osn-accordion .osn-accordion_btn .jp {
    margin-right: 10px;
  }
  .osn-content .osn-accordion .osn-accordion_btn .code {
    display: block;
    margin: 5px 0 5px 0;
  }
  .osn-content .osn-accordion .osn-accordion_btn .change_icon::before, .osn-content .osn-accordion .osn-accordion_btn .change_icon::after {
    top: 30%;
  }
/*  .osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail {
    justify-content: center;
  }
*/
  .osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_detail_company h4 {
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 10px;
  }
  .osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map .img {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
  }
  .osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map .map {
    width: 100%;
  }
  .osn-content .osn-accordion .osn-accordion_wrap .osn-accordion_inner .osn-accordion_detail .osn-accordion_map .map iframe {
    height: 300px;
  }
}

/*----------------------
グローバルネットワーク ボタン設置
------------------------*/
.osn-btn .btn {
  margin-top: 5px;
  text-align:right;
}
.osn-btn .btn a:hover {
  background-color: #e5edf6;
  transition: all 0.4s;
}
.osn-btn .btn a:hover img{
	opacity: 0.7;
}

/*# sourceMappingURL=cssmap/osn.css.map */