/* wrapper
----------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  #wrapper {
    background-image: url(/shared/img/bg_header01@sp.jpg);
  }
}

/* main
----------------------------------------------------------------*/
#main {
  padding-bottom: 1750px;
}

@media screen and (max-width: 767px) {
  #main {
    padding-bottom: 230px;
  }
}

#main:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 655px;
  width: 57vw;
  height: 700px;
  background-color: #fff;
  background: -webkit-linear-gradient(top, #010516 0%, #fff 25%, #fff 25%, #fff 100%);
  background: linear-gradient(to bottom, #010516 0%, #fff 25%, #fff 25%, #fff 100%);
  opacity: .05;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  #main:after {
    display: none;
  }
}

/* hero
----------------------------------------------------------------*/
.hero {
  position: relative;
}

.hero .rights {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #ababab;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 1rem;
}

@media screen and (max-width: 767px) {
  .hero .rights {
    margin-right: calc(40/750*100vw);
  }
}

.hero__inner {
  position: relative;
  width: 1000px;
  /*height: 525px;*/
  height: 525px;
  margin: 0 auto;
  padding-top: 70px;
  color: #ddd;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .hero__inner {
    width: auto;
    height: auto;
    padding: 80px calc(40/750*100vw) 85px;
    font-size: 1.2rem;
  }
}

.hero__ttl {
  margin-bottom: .25em;
  line-height: 1.4;
  color: #eee;
  font-size: 4.4rem;
  letter-spacing: .08em;
}

@media screen and (max-width: 767px) {
  .hero__ttl {
    font-size: 3.3rem;
  }
}

.hero__ttl .em {
  color: #00a3d5;
}

.hero__ttl .thin {
  font-weight: 300;
}

.hero__subttl {
  color: #eee;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 300;
  letter-spacing: .06em;
}

.hero__subttl span {
  color: #00a3d5;
  font-weight: 500;
}

.hero__lead {
  line-height: 2.5;
  margin-top: 1.5em;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
}

/* alert
----------------------------------------------------------------*/
.alert {
  position: relative;
  /*left: 400px;*/
  left: calc(100vw/4.5);
  top: -128px;
}

@media screen and (max-width: 767px) {
  .alert {
    position: relative;
    left: auto;
    top: auto;
  }
}

.alert__inner {
  background: #FFF0F5 ;
  position: relative;
  /*width: 650px;*/
  width: calc(100vw/4);
  border: 5px double #b22222; 
/*  height:100��;*/ 
  padding-left:10px; 
  padding-right:10px; 
  padding-top:20px; 
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .alert__inner {
    width: auto;
    height: auto;
    padding: 80px calc(40/750*100vw) 85px;
    font-size: 1.2rem;
  }
}

.alert__lead {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  color: #b22222;
}

/* information
----------------------------------------------------------------*/
.information {
  margin: 0 -10px;
  background-color: rgba(0, 1, 7, 0.5);
}

@media screen and (max-width: 767px) {
  .information {
    margin: 0;
  }
}

.information__inner {
  position: relative;
  top: -60px;
  padding: 55px 0 260px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 767px) {
  .information__inner {
    top: 0;
    padding: 50px calc(40/750*100vw) 60px;
  }
}

.information__inner:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 57.1428vw;
  min-width: 710px;
  background-color: #133551;
}

@media screen and (max-width: 767px) {
  .information__inner:after {
    width: 100%;
    min-width: 0;
    background-color: rgba(19, 53, 81, 0.7);
  }
}

.information__cont {
  position: relative;
  z-index: 1;
  width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .information__cont {
    width: auto;
  }
}

.information__alert__inner {
  background: #FFF0F5 ;
  position: relative;
  /*width: 650px;*/
  width: calc(100vw/4);
  border: 5px double #b22222; 
/*  height:100��;*/ 
  padding-left:10px; 
  padding-right:10px; 
  padding-top:20px;
  top:-30px;
  bottom:10px;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .information__alert__inner {
    width: auto;
    height: auto;
    padding: 80px calc(40/750*100vw) 85px;
    font-size: 1.2rem;
  }
}

.information__banner {
  position: relative;
  width: calc(100vw/4);
  top:-10px;
  bottom:5px;
}

@media screen and (max-width: 767px) {
  .information__banner {
    width: auto;
    height: auto;
  }
}

.information__alert__lead {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  color: #b22222;
}

.information__ttl {
  margin-bottom: 1em;
}

.information__list ul {
  width: 500px;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .information__list ul {
    width: auto;
  }
}

.information__item a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.information__item a .date {
  display: block;
  margin-bottom: .25em;
  color: #ddd;
  font-family: "Roboto Condensed", sans-serif;
  letter-spacing: .1em;
}

.information__item a .text {
  font-size: 1.2rem;
}

.information__item a:hover {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
}

.information__item a:hover .date {
  color: #eaf20d;
}

.information__item a:hover .text {
  text-decoration: underline;
}

.information__item a[target="_blank"] .text:after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  margin-right: 3px;
  background-image: url(/shared/img/ico_blank01.svg);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 10px auto;
}

/* bgWrap
----------------------------------------------------------------*/
.bgWrap01 {
  margin: -60px -10px 0;
  padding: 294px 10px 680px;
  background-color: #010516;
  background-image: url(/shared/img/bg_pattern_dot01.png);
}

@media screen and (max-width: 767px) {
  .bgWrap01 {
    margin: 0;
    padding: 0;
  }
}

/* achievement
----------------------------------------------------------------*/
.achievement {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .achievement {
    width: auto;
  }
}

.achievement__inner {
  position: absolute;
  top: -499px;
  left: 0;
  width: 100vw;
  height: 564px;
  background: -webkit-linear-gradient(top, #f7f7f7 0%, #f7f7f7 500px, transparent 500px, transparent 100%);
  background: linear-gradient(to bottom, #f7f7f7 0%, #f7f7f7 500px, transparent 500px, transparent 100%);
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .achievement__inner {
    position: static;
    top: 0;
    height: auto;
    overflow: auto;
  }
}

.achievement__ttl {
  display: inline-block;
  background-color: #0a2337;
  min-width: 300px;
  height: 140px;
  padding: 40px;
}

@media screen and (max-width: 767px) {
  .achievement__ttl {
    min-width: 0;
    width: 250px;
    height: 135px;
    padding: 35px calc(40/750*100vw);
  }
}

/* slide
----------------------------------------------------------------*/
.slide {
  margin-top: -50px;
  margin-left: 190px;
}

@media screen and (max-width: 767px) {
  .slide {
    margin-left: 10px;
  }
}

@media screen and (max-width: 767px) {
  .slide__inner {
    overflow: hidden;
  }
}

.slide__list {
  width: 1200px;
}

@media screen and (max-width: 767px) {
  .slide__list {
    width: 900px;
  }
}

.slide__item {
  padding-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .slide__item {
    width: auto;
  }
}

.slide__item a {
  display: block;
  width: 380px;
  margin: 0 auto;
  text-decoration: none;
  outline: none;
}

@media screen and (max-width: 767px) {
  .slide__item a {
    width: 280px;
  }
}

.slide__item a .slide__pic img {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.56, 0.99);
}

.slide__item a:hover .slide__pic img {
  transform: scale(1.1);
}

.slide__item a:hover .slide__txt .text {
  text-decoration: underline;
}

.slide__pic {
  display: block;
  min-height: 300px;
  margin-bottom: 10px;
  background-image: url(/shared/top/img/achievement/no_image01.png);
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .slide__pic {
    min-height: 221px;
  }
}

.slide__pic img {
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.slide__txt .date {
  display: block;
  margin-bottom: .25em;
  color: #0a2337;
  font-family: "Roboto Condensed", sans-serif;
  letter-spacing: .1em;
}

.slide__txt .text {
  display: block;
}

/* slick
----------------------------------------------------------------*/
.slick-arrow {
  position: absolute;
  z-index: 1;
  width: 64px;
  height: 64px;
  font-size: 0;
  bottom: 0;
  border: none;
  outline: none;
}

@media screen and (max-width: 767px) {
  .slick-arrow {
    bottom: -50px;
    width: 50px;
    height: 50px;
  }
}

.slick-arrow:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  border-top: 1px solid;
  border-right: 1px solid;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.slick-arrow:hover {
  cursor: pointer;
}

.slick-prev {
  left: 972px;
  background-color: #eeeff2;
}

@media screen and (max-width: 767px) {
  .slick-prev {
    left: auto;
    right: 70px;
  }
}

.slick-prev:after {
  left: 5px;
  border-color: #153957;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.slick-next {
  left: 1036px;
  background-color: #153957;
}

@media screen and (max-width: 767px) {
  .slick-next {
    left: auto;
    right: 20px;
  }
}

.slick-next:after {
  right: 5px;
  border-color: #eeeff2;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.slick-arrow:hover:after {
  bottom: 5px;
}

/* relayArea
----------------------------------------------------------------*/
.relayArea {
  margin: 0 -10px;
  background-color: #010516;
  background-image: url(/shared/img/bg_pattern_dot01.png), url(../img/bg_bgWrap01.jpg);
  background-repeat: repeat,
 no-repeat;
  background-position: left top,
 center 40%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .relayArea {
    margin: 0;
    background-position: left top,
 center 20%;
    background-size: 3px auto,
 700px auto;
  }
}

.relayArea__inner {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  padding: 150px 10px 130px;
}

@media screen and (max-width: 767px) {
  .relayArea__inner {
    width: auto;
    padding: 120px 10px 85px;
  }
}

.relayArea__inner .rights {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 10px;
  color: #ababab;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 1rem;
}

@media screen and (max-width: 767px) {
  .relayArea__inner .rights {
    margin-right: calc(40/750*100vw);
  }
}

.relayArea__subttl {
  margin-bottom: .5em;
  color: #eee;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: .08em;
}

@media screen and (max-width: 767px) {
  .relayArea__subttl {
    font-size: 1.7rem;
  }
}

.relayArea__subttl span {
  color: #00a3d5;
  font-weight: 500;
}

.relayArea__ttl {
  color: #eee;
  font-family: "Yu Mincho", "YuMincho", serif;
  line-height: 1.8;
  font-size: 3.6rem;
  letter-spacing: .08em;
}

@media screen and (max-width: 767px) {
  .relayArea__ttl {
    font-size: 2.6rem;
  }
}

.relayArea__ttl span {
  color: #00a3d5;
  font-weight: 500;
}

@media all and (-ms-high-contrast: none) {
  html[lang="ja"] .relayArea__ttl {
    font-weight: 900\0;
  }
}

/* telescope
----------------------------------------------------------------*/
.telescope {
  position: relative;
}

.telescope__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1200px;
  margin: auto;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .telescope__inner {
    width: auto;
    position: static;
  }
}

.telescope__row a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .telescope__row a {
    display: block;
  }
}

.telescope__row a .telescope__pic img {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.56, 0.99);
}

.telescope__row a:hover .telescope__pic img {
  transform: scale(1.1);
}

.telescope__row a:hover .linkList span {
  color: #4385cf;
  text-decoration: underline;
}

.telescope__row a:hover .linkList span:after {
  border-left-color: #4385cf;
}

.telescope__row:nth-of-type(even) a {
  flex-direction: row-reverse;
}

.telescope__cell {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .telescope__cell {
    width: auto;
  }
}

.telescope__cell p {
  color: #ddd;
}

.telescope__cell :last-child {
  margin-bottom: 0;
}

.telescope__txt {
  padding: 0 100px;
}

@media screen and (max-width: 767px) {
  .telescope__txt {
    padding: 40px calc(40/750*100vw);
  }
}

.telescope__pic {
  position: relative;
  overflow: hidden;
}

.telescope__pic img {
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.telescope__pic .rights {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 10px 5px 0;
  color: #ababab;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 1rem;
}

@media screen and (max-width: 767px) {
  .telescope__pic .rights {
    margin-right: calc(40/750*100vw);
  }
}

.telescope__ttl {
  margin-bottom: .5em;
  color: #eee;
  font-family: "Yu Mincho", "YuMincho", serif;
  letter-spacing: .06em;
}

@media all and (-ms-high-contrast: none) {
  html[lang="ja"] .telescope__ttl {
    font-weight: 900\0;
  }
}

.telescope__row:nth-of-type(n) {
  background-color: #212028;
}

.telescope__row:nth-of-type(n) .telescope__ttl {
  font-size: 2.8rem;
}

@media screen and (max-width: 767px) {
  .telescope__row:nth-of-type(n) .telescope__ttl {
    font-size: 2rem;
  }
}

.telescope__row:nth-of-type(2n) {
  background-color: #1b343c;
}

.telescope__row:nth-of-type(2n) .telescope__ttl {
  font-size: 2.8rem;
}

@media screen and (max-width: 767px) {
  .telescope__row:nth-of-type(2n) .telescope__ttl {
    font-size: 2rem;
  }
}

.telescope__row:nth-of-type(3n) {
  background-color: #211b19;
}

.telescope__row:nth-of-type(3n) .telescope__ttl {
  font-size: 2.4rem;
}

@media screen and (max-width: 767px) {
  .telescope__row:nth-of-type(3n) .telescope__ttl {
    font-size: 1.8rem;
  }
}

.telescope__row:nth-of-type(4n) {
  background-color: #292638;
}

.telescope__row:nth-of-type(4n) .telescope__ttl {
  font-size: 2.4rem;
}

@media screen and (max-width: 767px) {
  .telescope__row:nth-of-type(4n) .telescope__ttl {
    font-size: 1.8rem;
  }
}

.telescope__row:nth-of-type(4n) .telescope__ttl span {
  font-size: 2rem;
}

@media screen and (max-width: 767px) {
  .telescope__row:nth-of-type(4n) .telescope__ttl span {
    font-size: 1.4rem;
  }
}

/* scopeLink
----------------------------------------------------------------*/
.scopeLink {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 335px;
  width: 100%;
  margin: 0 -10px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .scopeLink {
    display: block;
    position: static;
    margin: 0;
  }
}

.scopeLink__inner {
  width: 57vw;
  min-width: 800px;
  padding: 250px 0px 84px 300px;
  background-color: rgba(21, 57, 87, 0.6);
  background-image: url(../img/bg_shape_antenna01.png);
  background-repeat: no-repeat;
  background-position: 504px bottom;
  background-size: 402px auto;
}

@media screen and (max-width: 767px) {
  .scopeLink__inner {
    width: auto;
    min-width: 0;
    padding: 56px calc(40/750*100vw);
    background-position: right -81px bottom;
    background-size: 252px auto;
  }
}

.scopeLink__cont {
  width: 300px;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .scopeLink__cont {
    width: auto;
    text-align: left;
  }
}

.scopeLink__ttl {
  color: #eee;
  font-size: 3.6rem;
  font-weight: 300;
  letter-spacing: .08em;
}

@media screen and (max-width: 767px) {
  .scopeLink__ttl {
    font-size: 2.6rem;
  }
}

.scopeLink__ttl span {
  color: #00a3d5;
  font-weight: 500;
}

.scopeLink__subttl {
  color: #ddd;
  letter-spacing: .06em;
}

@media screen and (max-width: 767px) {
  .scopeLink__subttl {
    font-size: 1rem;
  }
}

.scopeLink__list {
  margin: 40px 0 0;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .scopeLink__list {
    padding: 0 0 0 20px;
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.4rem;
  }
}

.scopeLink__item {
  margin-top: 1.125em;
}

.scopeLink__item a {
  display: inline-block;
}

/*
----------------------------------------------------------------*/