@charset "UTF-8";

#box_area {
  /* width: 1015px; */
  width: 100%;
  height: 1480px;
  /*  background-image: url(../../assets/img/img_map.jpg);
  background-position: 0 0;
  background-repeat: no-repeat;*/
  position: relative;
}

#box_area div.box_ttl {
  color: #777777;
  /*position: absolute;*/
}

#box_area div.box_ttl p {
  font-family: 'roboto';
  font-weight: 300;
}

#box_area div.box_ttl h3 {}

/*  */

#box_brazil div.box_ttl.bra {
  text-align: right;
  position: absolute;
  right: 26px;
  top: 4px;
}

#box_brazil div.box_ttl h3 {
  font-size: 1.4rem;
  /* display: inline; */
}

#box_brazil div.box_ttl p {
  font-size: 3.2rem;
  line-height: 1;
}

/* Columbia */

#box_brazil div.box_ttl.col {
  position: absolute;
  top: 0;
  left: 0;
}

/*  */

#box_korea {
  background-image: url(../../assets/img/map_korea.jpg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 132px auto;
  width: 340px;
  height: 220px;
  position: absolute;
  left: 0;
  top: 400px;
}

#box_korea div.box_ttl {
  text-align: right;
  margin-right: 20px;
}

#box_korea div.box_ttl h3 {
  font-size: 1.4rem;
}

#box_korea div.box_ttl p {
  font-size: 1.3rem;
  line-height: 1;
}

#box_korea div.box_ttl p span {
  font-size: 2.2em;
}

#korea {
  margin-left: 134px;
  margin-top: 4px;
}

/*  */

#box_jp {
  width: 938px;
  height: 977px;
  background-image: url(../../assets/img/map_jp.avif);
  background-position: 60px 0;
  background-repeat: no-repeat;
  background-size: 100% auto;

  position: relative;
  top: 80px;
  left: 70px;
  z-index: 9;
}

#box_jp div.box_ttl {
  position: absolute;
  top: 308px;
  left: 780px;
  text-align: right;
}

#box_jp div.box_ttl h3 {
  font-size: 1.8rem;
}

#box_jp div.box_ttl p {
  font-size: 6rem;
  line-height: 1;
}

/*  */

#box_philipin div.box_ttl {
  position: absolute;
  top: 1387px;
  left: 450px;
}

#box_philipin div.box_ttl h3 {
  font-size: 1.8rem;
}

#box_philipin div.box_ttl p {
  font-size: 2rem;
}

/*  */

#box_nz div.box_ttl {
  position: absolute;
  top: 1387px;
  left: 520px;
}

#box_nz div.box_ttl h3 {
  font-size: 1.8rem;
}

#box_nz div.box_ttl p {
  font-size: 2rem;
}

/*  */

#box_okinawa {
  width: 296px;
  height: 235px;
  background-image: url(../../assets/img/map_okinawa.jpg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;

  position: absolute;
  left: 0;
  bottom: 0;
}

#box_okinawa div.box_ttl {
  position: absolute;
  top: 160px;
  left: 9em;
  /*  top: 60%;
  left: 50%;*/
  /*  top: 1387px;
  left: 150px;*/
}

#box_okinawa div.box_ttl h3 {
  font-size: 1.8rem;
}

#box_okinawa div.box_ttl p {
  font-size: 2rem;
}

#okinawa {
  margin-left: 80px;
  margin-top: 70px;
}

#box_okinawa #mem_20 {
  position: static;
}

/*  */

#box_area>section {
  overflow: visible;
}

#box_area li {
  height: 66px;
  text-align: left;
  clear: left;
  margin-bottom: 12px;
}

#box_area li a {
  display: block;
  position: relative;
}

#box_area li a::after {
  content: '';
  display: table;
  clear: both;
}

li p.img_mem {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-right: 9px;
}

li p.img_mem img {
  width: 125px;
  height: auto;
  background-color: #dcdcdc;
  margin-left: -4px;
}

li[id^='staff_'] p.img_mem img {
  width: 102px;
}

#box_area li h5 {
  font-size: 1.6rem;
  font-family: 'roboto';
  font-weight: 500;
  color: #444444;
  line-height: 1;
  padding-top: 15px;
  margin-bottom: 3px;
  display: inline-block;
}

#box_area li[id^='staff_'] h5 {
  font-size: 1.3rem;
  margin-bottom: 0.6em;
}

#box_area li h5 span {
  color: #23b7fe;
}

#box_area li[id^='staff_'] span {
  display: none;
}

#box_area li h4 {
  font-size: 1.4rem;
  color: #333333;
  line-height: 1;
  display: block;
}

#box_area li.rental h4 {
  position: relative;
  top: 0.9em;
}

#box_area #staff_01 h4 {
  font-size: 1.8rem;
}

/*  */

#brazil {
  margin-top: 68px;
  margin-left: 140px;
}

#box_brazil {
  width: 340px;
  height: 346px;
  position: absolute;
  left: 0;
  top: 10px;
  background-image: url(../../assets/img/map_brazil.avif);
  background-position: 30px 0;
  background-repeat: no-repeat;
  background-size: 200px auto;
}

#box_brazil #brazil ul {
  margin-top: 10px;
  width: 180px;
  margin-left: 0;
}

#box_brazil ul:after {
  content: '.';
  visibility: hidden;
  height: 0;
  clear: both;
  display: block;
}

#box_brazil #brazil ul li {
  width: auto;
  /* min-width: 160px; */
  clear: none;
  margin-bottom: 20px;
}

/*  */

#columbia {
  position: absolute;
  top: 0px;
  right: 36px;
  width: 180px;
}

/*  */

#box_europe {
  width: 246px;
  height: 346px;
  position: absolute;
  /*left: 180px;*/
  left: 362px;
  top: 10px;
  background-image: url(../../assets/img/map_europe.avif);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#box_europe div.box_ttl {
  /* text-align: right; */
  position: absolute;
}

#box_europe div.box_ttl p {
  font-size: 3.2rem;
  line-height: 1;
}

#box_europe div.box_ttl h3 {
  font-size: 1.4rem;
}

div.box_ttl.france {
  left: 8px;
  top: 142px;
}

#box_europe div.box_ttl.nederland {
  left: 84px;
  top: 55px;
  text-align: left;

  & p {
    font-size: 2.0rem;
    line-height: 1;
  }
}

#box_europe div.box_ttl.germany {
  left: 130px;
  top: 46px;
  text-align: left;

  & p {
    font-size: 2.0rem;
    line-height: 1;
  }
}

#box_europe div.box_ttl.croatia {
  right: 4px;
  top: 121px;
  text-align: left;

  & p {
    font-size: 2.0rem;
    line-height: 1;
  }
}

#box_europe div.box_ttl.serbia {
  right: 5px;
  top: 230px;
  text-align: left;

  & p {
    font-size: 2.0rem;
    line-height: 1;
  }
}

#box_europe div.box_ttl.germany:before,
#box_europe div.box_ttl.croatia:before,
#box_europe div.box_ttl.serbia:before {
  content: '';
  width: 3px;
  height: 3px;
  background-color: #777777;
  border-radius: 50%;
  display: block;
  position: absolute;
}

#box_europe div.box_ttl.croatia:before {
  bottom: -29px;
  right: 40px;
}

#box_europe div.box_ttl.serbia:before {
  top: -24px;
  right: 18px;
}

#box_europe div.box_ttl.germany:before {
  left: 18px;
  bottom: -28px;
}

#box_europe div.box_ttl.germany:after,
#box_europe div.box_ttl.croatia:after,
#box_europe div.box_ttl.serbia:after {
  content: '';
  display: block;
  width: 1px;
  height: 28px;
  background-color: #777;
  position: absolute;
}

#box_europe div.box_ttl.croatia:after {
  bottom: -29px;
  right: 41px;
}

#box_europe div.box_ttl.serbia:after {
  top: -24px;
  right: 19px;
  height: 26px;
}

#box_europe div.box_ttl.germany:after {
  left: 19px;
  bottom: -28px;
}

/*  */

#france {}

/*  */

#box_area #germany {
  position: absolute;
  top: 22px;
  left: -6px;
  width: 110px;

  & li {
    text-align: right;
  }

  & p.img_mem {
    float: none;
    margin-right: 0;
    margin-left: auto;
  }

  & h5 {
    padding-top: 2px;
  }
}

/*  */
#box_europe,
#box_korea,
#box_brazil {
  border-right: solid #ddd 1px;
  border-bottom: solid #ddd 1px;
  overflow: hidden;
  z-index: 99;
}

#box_europe::after,
#box_korea::after,
#box_brazil::after {
  content: '';
  display: block;
  border-top: 25px solid transparent;
  border-right: 25px solid #fff;
  position: absolute;
  right: -1px;
  bottom: -1px;
}

#box_europe::before,
#box_korea::before,
#box_brazil::before {
  content: '';
  display: block;
  border-top: 25px solid transparent;
  border-right: 25px solid #ddd;
  position: absolute;
  right: 0;
  bottom: 0;
}

/*  */

#box_jp h6 {
  color: #777777;
  font-weight: normal;
  font-style: normal;
  font-size: 1.6rem;
  position: absolute;
}

/*  */

#osaka {
  position: absolute;
  top: 800px;
  left: 290px;
  width: 160px;
}

#osaka h6 {
  top: -128px;
  left: 84px;
}

#osaka:before {
  top: -110px;
  left: 120px;
}

#osaka ul:before {
  height: 50px;
  top: -66px;
  left: 29px;
}

#osaka ul:after {
  height: 103px;
  top: -139px;
  left: 76px;
  transform: rotate(65deg);
}

/* #osaka ul:before {
  height: 100px;
  top: -110px;
  left: 31px;
} */

/* wakayama */

#wakayama {
  position: absolute;
  top: 880px;
  left: 380px;
  width: 160px;
}

#wakayama:before {
  top: -130px;
  left: 30px;
}

#wakayama h6 {
  top: -110px;
  left: 40px;
}

#wakayama ul:before {
  height: 120px;
  top: -130px;
  left: 31px;
}


/* tokushima */

#tokushima {
  position: absolute;
  top: 760px;
  left: 280px;
  width: 160px;
}

#tokushima h6 {
  top: -40px;
  left: -4px;
}

#box_jp #tokushima:before {
  display: none;
}

/* #tokushima:before {
  top: -110px;
  left: 30px;
}

#tokushima ul:before {
  height: 100px;
  top: -110px;
  left: 31px;
} */

/*  */

#hokkaido {
  width: 160px;
  position: absolute;
  left: 780px;
  top: 190px;

  display: none;
}

/*  */

#chiba {
  width: 150px;
  position: absolute;
  left: 620px;
  top: 560px;
}

#chiba h6 {
  bottom: -40px;
  left: 20px;
}

#chiba:before {
  bottom: -10px;
  left: 20px;
}

/*  */

#fukushima {
  width: 150px;
  position: absolute;
  left: 700px;
  top: 480px;
}

#fukushima h6 {
  left: -35px;
  bottom: 16px;
}

#box_jp #fukushima:before {
  display: none;
}

/*  */

#siga {
  width: 150px;
  position: absolute;
  left: 400px;
  top: 500px;
}

#siga h6 {
  left: 18px;
  bottom: -14px;
}

#box_jp #siga:before {
  display: none;
}

#siga li {
  width: 90px;
}

/*  */

#gifu {
  width: 150px;
  position: absolute;
  left: 480px;
  top: 440px;
}

#gifu h6 {
  left: 18px;
  bottom: -14px;
}

#box_jp #gifu:before {
  display: none;
}

#gifu li {
  width: 90px;
}

/*  */

#hiroshima {
  width: 160px;
  position: absolute;
  left: 180px;
  top: 670px;
}

#hiroshima h6 {
  left: 70px;
  bottom: 60px;
}

#hiroshima li {
  width: 80px;
  height: 120px;
  margin: 0;
}

#box_jp #hiroshima:before {
  display: none;
}

/* hyogo */

#hyogo {
  width: 120px;
  position: absolute;
  left: 270px;
  top: 600px;

  display: none;
}

#hyogo h6 {
  left: 70px;
  bottom: 20px;
}

#hyogo li {
  width: 80px;
  /*height: 120px;*/
  height: auto;
  margin: 0;
}

#hyogo li a {
  box-sizing: content-box;
  padding-bottom: 70px;
}

#box_jp #hyogo:before {
  display: none;
}

#hyogo li a p.img_mem {
  position: absolute;
  bottom: 0;
}

/*  */

#nara {
  position: absolute;
  top: 810px;
  left: 320px;
  width: 150px;
  display: none;
}

#box_jp #nara:before {
  display: none;
}

/*  */

#kanagawa {
  position: absolute;
  top: 750px;
  left: 650px;
  width: 160px;
}

#kanagawa:before {
  top: -106px;
  left: -46px;
}

#kanagawa h6 {
  top: -24px;
  left: 10px;
}

/*22-08-05 sawada*/
/* #kanagawa li#mem_32,
#kanagawa li#mem_33,
#kanagawa li#mem_34 {
  width: 180px;
  position: relative;
  margin-left: 170px;
}

#kanagawa li#mem_32 {
  margin-top: -200px;
} */

#kanagawa2 {
  position: absolute;
  top: 1061px;
  left: 490px;
  width: 320px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#box_area #kanagawa2 li {
  width: 50%;
}

#mascot {
  position: absolute;
  top: 985px;
  left: 820px;
  width: 160px;
}

/*  */

#shizuoka {
  position: absolute;
  top: 810px;
  left: 500px;
  width: 160px;
}

#shizuoka:before {
  top: -130px;
  left: 30px;
}

#shizuoka h6 {
  top: -110px;
  left: 40px;
}

/*  */

#tokyo {
  width: 250px;
  position: absolute;
  left: 808px;
  top: 555px;
}

#tokyo:before {
  top: 73px;
  left: -190px;
}

#tokyo h6 {
  left: -48px;
  top: 106px;
}

/*  */

#kyoto {
  position: absolute;
  top: 450px;
  left: 300px;
  width: 100px;
}

#box_jp #kyoto:before {
  /* right: -20px;
  top: 90px; */
  display: none;
}

#kyoto h6 {
  width: 2em;
  bottom: 30px;
  left: 70px;
}

#kyoto ul {
  top: 10px;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
}

#kyoto li {
  width: 90px;
  /* height: 110px; */
}

#box_jp #kyoto ul:before {
  height: 26px;
  bottom: 52px;
  right: -8px;
  left: auto;
  transform: rotate(118deg);
  display: none;
}

#kyoto p.img_mem {
  float: none;
  margin-top: 5px;
}

/*  */

#mie {
  position: absolute;
  top: 400px;
  left: 426px;
  width: 100px;
  display: none;
}

#mie:before {
  display: none;
}

#mie li {
  height: 110px;
}

#mie p.img_mem {
  float: none;
  margin-top: 5px;
}

/*  */

#saitama {
  width: 160px;
  position: absolute;
  left: 560px;
  top: 370px;
}

#box_jp #saitama:before {
  display: none;
}

#saitama h6 {
  right: 68px;
  top: auto;
  bottom: -8px;
}

#saitama li p.img_mem {
  /* float: right;
  margin-right: 0; */
}

/*  */

#aichi {
  position: absolute;
  top: 780px;
  left: 400px;
  width: 160px;
}

#box_jp #aichi:before {
  left: 82px;
  top: -91px;
}

#aichi h6 {
  top: -120px;
  left: 60px;
}

#aichi ul:before {
  height: 50px;
  top: -52px;
  left: 29px;
}

#aichi ul:after {
  height: 64px;
  top: -102px;
  left: 55px;
  transform: rotate(55deg);
}

/*  */

#miyagi {
  position: absolute;
  top: 320px;
  left: 562px;
  width: 160px;
}

#miyagi:before {
  left: 120px;
  bottom: -70px;
}

#miyagi h6 {
  bottom: -80px;
  left: 70px;
}

/*  */

#niigata {
  position: absolute;
  top: 430px;
  left: 520px;
  width: 100px;

  /*display: none;*/
}

#box_jp #niigata:before {
  display: none;
}

#niigata h6 {
  bottom: -20px;
}

/*  */

#kumamoto {
  position: absolute;
  top: 845px;
  left: 20px;
  width: 160px;
}

#kumamoto:before {
  left: 110px;
  top: -30px;
}

#kumamoto h6 {
  top: -40px;
  left: 120px;
}

/*#kumamoto li::after {
  content: "";
  display: table;
  clear: both;
}

#kumamoto li:first-child {
  margin-bottom: 12px;
  width: 70px;
  /*height: 110px;*!/
}*/

/*  */

#nagasaki {
  position: absolute;
  top: 665px;
  left: 0px;
  width: 160px;
}

#nagasaki:before {
  left: 110px;
  bottom: -40px;
}

#nagasaki h6 {
  left: 50px;
  bottom: -30px;
}

#nagasaki li {
  width: 80px;
}

/*  */

#kagoshima {
  width: 130px;
  position: absolute;
  top: 930px;
  left: 160px;
}

#kagoshima:before {
  left: -20px;
  top: -46px;
}

#kagoshima h6 {
  top: -70px;
  left: -40px;
}

/*  */

#fukuoka {
  position: absolute;
  top: 644px;
  left: 108px;
  width: 160px;

  display: none;
}

#fukuoka:before {
  display: none;
}

/*  */
#wakayama li,
#gifu li,
#siga li,
#kagoshima li,
#osaka li,
#tokushima li,
#kumamoto li,
#nagasaki li,
#kyoto li,
#mie li,
#aichi li,
#niigata li {
  height: auto;
}

#wakayama li a,
#gifu li a,
#siga li a,
#kagoshima li a,
#osaka li a,
#tokushima li a,
#kumamoto li a,
#nagasaki li a,
#kyoto li a,
#mie li a,
#aichi li a,
#niigata li a {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding-bottom: 70px;
}

#box_area #wakayama h5,
#box_area #tokushima h5,
#box_area #osaka h5,
#kumamoto li h5,
#box_area #nagasaki h5,
#box_area #kyoto h5,
#box_area #mie h5,
#box_area #aichi h5,
#box_area #niigata h5,
#box_area #hiroshima h5 {
  padding-top: 0;
}

#wakayama li a p.img_mem,
#gifu li a p.img_mem,
#siga li a p.img_mem,
#kagoshima li a p.img_mem,
#tokushima li a p.img_mem,
#osaka li a p.img_mem,
#kumamoto li a p.img_mem,
#nagasaki li a p.img_mem,
#kyoto li a p.img_mem,
#mie li a p.img_mem,
#aichi li a p.img_mem,
#niigata li a p.img_mem {
  position: absolute;
  bottom: 0;
}

/*  */

#box_thailand {
  width: 378px;
  height: 233px;
  background-image: url(../../assets/img/map_thai.jpg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  bottom: 0;
  left: 380px;
}

#box_thailand div.box_ttl {
  position: absolute;
  left: 200px;
  top: 70px;
}

#box_thailand div.box_ttl h3 {
  font-size: 1.8rem;
}

#thailand {
  margin-left: 100px;
  margin-top: 120px;
}

/*  */

#box_jp>div:before {
  content: '';
  width: 3px;
  height: 3px;
  background-color: #777777;
  border-radius: 50%;
  display: block;
  position: absolute;
}

#box_jp div.ttl_jp:before {
  display: none;
}

/* line */

#box_jp>div>ul {
  position: relative;
}

#box_jp>div>ul:before,
#box_jp>div>ul:after {
  content: '';
  display: block;
  width: 1px;
  background-color: #777;
  position: absolute;
}

#miyagi ul:before {
  height: 90px;
  bottom: -80px;
  right: 38px;
}

#chiba ul:before {
  height: 20px;
  bottom: -20px;
  left: 21px;
}

#kyoto ul:before {
  height: 46px;
  bottom: -50px;
  left: 41px;
}

#shizuoka ul:before {
  height: 120px;
  top: -130px;
  left: 31px;
}

#kanagawa ul:before {
  height: 100px;
  top: -116px;
  left: -12px;
  transform: rotate(-40deg);
}

#kagoshima ul:before {
  height: 64px;
  top: -52px;
  left: 0px;
  transform: rotate(-38deg);
}

#kumamoto ul:before {
  height: 64px;
  top: -40px;
  right: 70px;
  transform: rotate(48deg);
}

#nagasaki ul:before {
  height: 76px;
  bottom: -60px;
  right: 73px;
  transform: rotate(138deg);
}

#tokyo ul:before {
  height: 110px;
  top: 79px;
  left: -68px;
  transform: rotate(90deg);
}

#tokyo ul:after {
  height: 90px;
  top: 59px;
  left: -157px;
  transform: rotate(-48deg);
}

/*  */

/* セルビア */
#box_area #serbia {
  position: absolute;
  top: 270px;
  right: 12px;
  width: 200px;

  & li {
    text-align: right;
  }

  & li p.img_mem {
    float: none;
    margin-right: 0;
    margin-left: auto;
  }

  & li p.img_mem {
    float: right;
    margin-right: 0;
    margin-left: 7px;
  }

}

#box_area #croatia li {
  text-align: right;
}

#box_area #mem_22 h4 {
  font-feature-settings: "palt" 1;
  line-height: 1.2;
}

/* クロアチア */
#croatia {
  position: absolute;
  top: 190px;
  right: 80px;
  width: 200px;

  & li p.img_mem {
    float: right;
    margin-right: 0;
    margin-left: 9px;
  }
}

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

  body.list_area #contents {
    height: 70vh;
    min-height: initial;
    overflow: auto;
    cursor: grab;
    -webkit-overflow-scrolling: touch;

    & #box_area {
      width: 100%;
      height: 1380px;
      opacity: 0;
      transition: opacity 0.2s ease-in;
    }

    & #loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      /* 背景色 */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }

    & .loader {
      width: 8vw;
      height: 8vw;
      border: 4px solid #f3f3f3;
      /* 全体の枠線（薄いグレー） */
      border-top: 4px solid #1fa0de;
      /* 回転する部分の色（水色） */
      border-radius: 50%;
      /* 正円にする */
      animation: spin 1s linear infinite;
      /* 1秒で1回転を無限に繰り返す */
      margin-top: -20vh;
    }

  }

  body.list_area #contents.is-visible {

    & #box_area {
      opacity: 1;
    }

    #loading-overlay {
      display: none;
    }

  }

  /* 回転のアニメーション定義 */
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }



}