
/*---- Global top ------------*/
#area_jetro_support_toppage>[class^=elem_]:not([class*="__"]):first-child {
  margin-top: 0
}

#area_jetro_support_toppage>[class^=elem_]:not([class*="__"]):last-child {
  margin-bottom: 0
}
#area_news_toppage>[class^=elem_]:not([class*="__"]):first-child {
  margin-top: 0
}
#area_news_toppage>[class^=elem_]:not([class*="__"]):last-child {
  margin-bottom: 0
}
#area_inquiry_toppage>[class^=elem_]:not([class*="__"]):first-child {
  margin-top: 0
}

#area_inquiry_toppage>[class^=elem_]:not([class*="__"]):last-child {
  margin-bottom: 0
}

@media print, screen and (min-width:641px) {
  #area_news_toppage {
    margin-top: 45px;
    margin-bottom: 45px
  }
  .elem_section_block {
    margin-bottom: 0
  }
  .comp_hero .swiper-hero-button-prev {
    left: 45px;
    width: 60px;
    height: 60px
  }
}


/*
-------------------------------
-- .comp_hero for global top
-------------------------------
*/

.comp_hero {
  position: relative;
  z-index: 1;
  border-bottom: 10px solid #b00031
}

@media only screen and (max-width:640px) {
  #area0 {
    padding-right: 0;
    padding-left: 0;
  }
  .comp_hero {
    margin-right: -3.75%;
    margin-left: -3.75%
  }
}

.comp_hero>div {
  overflow: hidden
}

@media print {
  .comp_hero {
    width: 1040px!important
  }
  .comp_hero .swiper-wrapper {
    transform: translate3d(0, 0, 0)!important
  }
  .comp_hero .swiper-wrapper .swiper-slide:not(.swiper-slide-active) {
    display: none!important
  }
}

.comp_hero .swiper-container {
  overflow: visible;
  margin: 0 auto
}

.comp_hero .swiper-container .swiper-slide {
  width: 100%!important
}

.comp_hero .swiper-hero-button-prev {
  position: absolute;
  z-index: 3;
  top: 50%;
  cursor: pointer;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PGNpcmNsZSBmaWxsPSIjZmZmIiBjeD0iMzAiIGN5PSIzMCIgcj0iMjkiLz48cGF0aCBmaWxsPSIjMTkyRjYwIiBkPSJNMzAgMmMxNS40MzkgMCAyOCAxMi41NjEgMjggMjhTNDUuNDM5IDU4IDMwIDU4IDIgNDUuNDM5IDIgMzAgMTQuNTYxIDIgMzAgMm0wLTJDMTMuNDMxIDAgMCAxMy40MzEgMCAzMHMxMy40MzEgMzAgMzAgMzAgMzAtMTMuNDMxIDMwLTMwUzQ2LjU2OSAwIDMwIDB6Ii8+PHBhdGggZmlsbD0iIzE5MmY2MCIgZD0iTTIyLjg1NCAzMGw5Ljk1NCA5Ljk1NCAyLjMzOS0yLjMzOUwyNy41NDggMzBsNy41OTgtNy42MTUtMi4zMzktMi4zMzlMMjIuODU0IDMweiIvPjwvc3ZnPg==) 50% 50%/cover no-repeat;
  touch-action: manipulation
}

@media only screen and (max-width:640px) {
  .comp_hero .swiper-hero-button-prev {
    left: 3.75%;
    width: 15vw;
    height: 15vw
  }
}
@media print, screen and (min-width:641px) {
  .comp_hero .swiper-hero-button-prev {
    left: 45px;
    width: 60px;
    height: 60px
  }
}
.comp_hero .swiper-hero-button-next {
  position: absolute;
  z-index: 3;
  top: 50%;
  cursor: pointer;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PGNpcmNsZSBmaWxsPSIjZmZmIiBjeD0iMzAiIGN5PSIzMCIgcj0iMjkiLz48cGF0aCBmaWxsPSIjMTkyZjYwIiBkPSJNMzAgMmMxNS40MzkgMCAyOCAxMi41NjEgMjggMjhTNDUuNDM5IDU4IDMwIDU4IDIgNDUuNDM5IDIgMzAgMTQuNTYxIDIgMzAgMm0wLTJDMTMuNDMxIDAgMCAxMy40MzEgMCAzMHMxMy40MzEgMzAgMzAgMzAgMzAtMTMuNDMxIDMwLTMwUzQ2LjU2OSAwIDMwIDB6Ii8+PHBhdGggZmlsbD0iIzE5MkY2MCIgZD0iTTI3LjE5MyAyMC4wNDZsLTIuMzM5IDIuMzM5TDMyLjQ1MiAzMGwtNy41OTggNy42MTUgMi4zMzkgMi4zMzlMMzcuMTQ2IDMwbC05Ljk1My05Ljk1NHoiLz48L3N2Zz4=) 50% 50%/cover no-repeat;
  touch-action: manipulation
}

.comp_hero .swiper-slide [role=img] {
  background: 50% 50%/cover no-repeat
}

.comp_hero .comp_hero_control_btns {
  position: absolute;
  z-index: 3;
  display: flex
}

@media print, screen and (min-width:641px) {
  .comp_hero .swiper-hero-button-next {
    right: 45px;
    width: 60px;
    height: 60px
  }
  .comp_hero .swiper-slide [role=img] {
    height: 538px
  }
  .comp_hero .comp_hero_control_btns {
    bottom: 30px;
    left: 45px
  }
}

@media only screen and (max-width:640px) {
  .comp_hero .swiper-hero-button-next {
    right: 3.75%;
    width: 15vw;
    height: 15vw
  }
  .comp_hero .swiper-slide [role=img] {
    height: 131.25vw
  }
  .comp_hero .comp_hero_control_btns {
    bottom: 5.625vw;
    left: 3.75%
  }
  .comp_hero_overlay {
    display: none
  }
}

.comp_hero .comp_hero_control_btn {
  width: 36px;
  height: 36px
}

.comp_hero .comp_hero_control_btn img[aria-hidden=true] {
  display: none;
  speak: none
}

.comp_hero .comp_hero_control_btn+.comp_hero_control_btn {
  margin-left: 10px
}

.comp_hero_overlay {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  height: 100%;
  transform: translate(0, -50%)
}

.comp_hero_overlay img {
  height: 100%
}

.comp_hero_link {
  display: block;
  transition: opacity .20s;
  opacity: 1
}

.comp_hero_link:hover img {
  opacity: 1
}

.comp_hero_link[data-active=true] .swiper-container {
  cursor: pointer!important
}

.comp_hero_link[data-active=true]:hover {
  transition: opacity .20s;
  opacity: .9
}

.comp_hero_heading {
  position: absolute;
  z-index: 4;
  width: 100%;
  pointer-events: none
}

.comp_hero_heading[data-active=true] {
  transition: opacity .20s;
  opacity: 1
}
.comp_hero_heading[data-active=false] {
  transition: opacity .20s;
  opacity: 0
}

.comp_hero_heading>div {
  height: inherit;
  margin: 0 auto
}

.comp_hero_heading h1 {
  font-weight: 700;
  color: #fff
}
.comp_hero_heading h1.var_letter_spacing {
  letter-spacing: -5px
}
.comp_hero_heading h1.var_weight_900 {
  font-weight: 900
}
.comp_hero_heading h1.var_letter_spacing.var_weight_900 {
  letter-spacing: -4px
}

.comp_hero_heading h1.var_camel.var_letter_spacing, .comp_hero_heading h1.var_camel.var_letter_spacing.var_weight_900 {
  letter-spacing: -3px
}

.comp_hero_heading h1.var_shadow {
  text-shadow: 1px 1px 5px rgba(36, 40, 42, .7)
}

.comp_hero_heading h1.var_weight_800 {
  font-weight: 800
}
.comp_hero_heading h1.var_weight_700 {
  font-weight: 700
}
.comp_hero_heading h1.var_weight_600 {
  font-weight: 600
}
.comp_hero_heading h1.var_weight_500 {
  font-weight: 500
}
.comp_hero_heading h1.var_weight_400 {
  font-weight: 400
}
.comp_hero_heading h1.var_weight_300 {
  font-weight: 300
}

.comp_hero_heading h1::after {
  display: block;
  margin-top: 20px;
  content: "";
  background-color: #fff
}

@media print, screen and (min-width:641px) {
  .comp_hero_heading {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%)
  }
  .comp_hero_heading>div {
    max-width: 1000px;
    padding: 0 120px
  }
  .comp_hero_heading h1 {
    font-size: 68px;
    line-height: 1.2;
    text-shadow: 0 1.5px 1.5px #192f60, 0 0 1.5px #192f60, 1.5px 0 1.5px #192f60, 0 -1.5px 1.5px #192f60, -1.5px -1.5px 1.5px #192f60, -1.5px 0 1.5px #192f60;
    filter: dropshadow(color=#192f60, offx=0, offy=1.5, positive=1.5), dropshadow(color=#192f60, offx=0, offy=0, positive=1.5), dropshadow(color=#192f60, offx=0, offy=-1.5, positive=1.5), dropshadow(color=#192f60, offx=-1.5, offy=-1.5, positive=1.5), dropshadow(color=#192f60, offx=-1.5, offy=0, positive=1.5)
  }
  .comp_hero_heading h1::after {
    width: 129px;
    height: 4px
  }
  .comp_hero_heading h1 span {
    font-size: 46px;
    line-height: 1.0;
    display: inline-block;
  }
}

@media only screen and (max-width:640px) {
  .comp_hero_heading {
    top: 5%;
    left: 0
  }
  .comp_hero_heading>div {
    padding: 0 3.75%
  }
  .comp_hero_heading h1 {
    font-size: 10vw;
    line-height: 1.5;
    text-shadow: 0 1px 1px #192f60, 0 0 1px #192f60, 1px 0 1px #192f60, 0 -1px 1px #192f60, -1px -1px 1px #192f60, -1px 0 1px #192f60;
    filter: dropshadow(color=#192f60, offx=0, offy=1, positive=1), dropshadow(color=#192f60, offx=0, offy=0, positive=1), dropshadow(color=#192f60, offx=0, offy=-1, positive=1), dropshadow(color=#192f60, offx=-1, offy=-1, positive=1), dropshadow(color=#192f60, offx=-1, offy=0, positive=1)
  }
  .comp_hero_heading h1 span {
    font-size: 7.2vw;
    line-height: 1.0;
    display: inline-block;
    padding-top: 10px
  }
  .comp_hero_heading h1::after {
    width: 60px;
    height: 4px
  }
}
