#pageFooterArea {
  background: url(../img/index_footer_bg.png) repeat-x;
  padding-top: 5px;
}

#cntHeaderArea {
  position: relative;
}

@keyframes cloudanim {
  0% {
    transform: translateX(-50px) scale(1.4);
  }
  100% {
    transform: translateX(50px) scale(1);
  }
}
@keyframes airplaneanim {
  0% {
    left: 110%;
  }
  100% {
    left: -10%;
  }
}
@keyframes tracanim {
  0% {
    transform: translateX(-120px) scaleX(1);
  }
  49% {
    transform: translateX(200px) scaleX(1);
  }
  50% {
    transform: translateX(200px) scaleX(-1);
  }
  99% {
    transform: translateX(-120px) scaleX(-1);
  }
  100% {
    transform: translateX(-120px) scaleX(1);
  }
}
@keyframes shipanim {
  0% {
    transform: translateX(-100px) scaleX(-1);
  }
  49% {
    transform: translateX(100px) scaleX(-1);
  }
  50% {
    transform: translateX(100px) scaleX(1);
  }
  99% {
    transform: translateX(-100px) scaleX(1);
  }
  100% {
    transform: translateX(-100px) scaleX(-1);
  }
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

@keyframes ld_text_anim {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ld_textbody_anim {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  30% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.loading {
  width: 100%;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -75px;
}
.loading__onigiri {
  position: absolute;
  width: 118px;
  height: 123px;
  left: 50%;
  top: 50%;
  margin-left: -59px;
  margin-top: -61px;
  -ms-transform-origin: 50% 102px;
      transform-origin: 50% 102px;
}
.loading__onigiri__body {
  position: absolute;
  left: 6px;
  bottom: 0;
}
.loading__onigiri__text {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 118px;
  height: 33px;
  left: 0;
  top: 0;
  text-align: center;
  background: url(../img/index_loading_fukidashi.png) no-repeat left bottom;
  visibility: hidden;
}
.loading__onigiri__text--on {
  visibility: visible;
  animation: ld_text_anim 1.2s infinite;
}
.loading__onigiri__text--on img {
  animation: ld_textbody_anim 1.2s ease-in infinite;
}

.pickup {
  position: relative;
  margin: 0 auto;
  max-width: 940px;
  top: 37px;
}
.pickup__title {
  display: block;
  text-indent: 100%;
  overflow: hidden;
  width: 123px;
  height: 42px;
  margin: 0 auto;
  white-space: nowrap;
  background: url(../img/index_pickup.png) no-repeat center top;
  position: relative;
  margin-bottom: 26px;
}
.pickup__title:after {
  position: absolute;
  display: block;
  content: " ";
  width: 123px;
  height: 11px;
  left: 0;
  bottom: 0;
  background: url(../img/index_pu_bg.png);
}

.pickup__list {
  position: relative;
  margin: 0;
  padding: 0;
}
.pickup__list__inner {
  text-align: center;
  float: left;
  margin-right: 25px;
  perspective: 1000px;
}
.pickup__list__inner:last-child {
  margin-right: 0;
}
.pickup__list__inner__link:hover .pickup__list__inner__image:after {
  opacity: .5;
  transform: rotateX(0deg) rotateY(0deg);
}
.pickup__list__inner__link:hover .pickup__list__inner__text {
  color: #ff9600;
}
.pickup__list__inner__image {
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.pickup__list__inner__image:after {
  -ms-transform-origin: 50% 0;
      transform-origin: 50% 0;
  transform: rotateX(90deg) rotateY(90deg);
  transition: all 0.5s cubic-bezier(0.075, 0.47, 0.435, 1);
  content: " ";
  width: 100%;
  height: 100%;
  background: #ff9600;
  border-radius: 6px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0;
}
.pickup__list__inner__text {
  margin: 0;
  padding: 0;
  display: inline-block;
  line-height: 17px;
  position: relative;
  color: #000;
  transition: color 0.5s cubic-bezier(0.075, 0.47, 0.435, 1);
}
.pickup__list__inner__text--new:after {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 17px;
  background: url(../img/index_pu_new.png) no-repeat left bottom;
  content: " ";
  margin-left: 5px;
  position: relative;
  top: 3px;
}
.pickup__list__inner__text--outer:after {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 14px;
  height: 14px;
  background: url(../img/index_outer.png) no-repeat left bottom;
  content: " ";
  margin-left: -14px;
  position: relative;
  left: 20px;
}

.whatsNew {
  position: relative;
  margin: 0 auto;
  width: 100%;
  margin-top: 106px;
  margin-bottom: 65px;
}
.whatsNew__line {
  width: 100%;
  height: 1px;
  border: none;
  background: url(../img/index_wn_dotline.png) repeat-x;
}

.whatsNew__list {
  line-height: 22px;
}
.whatsNew__list a:visited, .whatsNew__list a:link {
  color: #000;
}
.whatsNew__list a:hover {
  color: #279fd4;
}
.whatsNew__list a:hover .whatsNew__list__inner__date {
  color: #000;
}
.whatsNew__list a .whatsNew__list__inner__detail {
  text-decoration: underline;
}
.whatsNew__list__link {
  color: #000;
}
.whatsNew__list__inner {
  display: block;
  clear: both;
}
.whatsNew__list__inner:before {
  content: "";
  width: 100%;
  height: 1px;
  background: url(../img/index_wn_dotline.png) repeat-x;
  display: block;
}
.whatsNew__list__inner__date {
  width: 132px;
  float: left;
  text-indent: 14px;
}
.whatsNew__list__inner__category {
  float: left;
  margin-right: 18px;
  width: 81.2px;
  height: 22px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.whatsNew__list__inner__category--life {
  background: url(../img/news_ico1.png) no-repeat left center;
  background-size: contain;
}
.whatsNew__list__inner__category--subject {
  background: url(../img/news_ico2.png) no-repeat left center;
  background-size: contain;
}
.whatsNew__list__inner__category--future {
  background: url(../img/news_ico3.png) no-repeat left center;
  background-size: contain;
}
.whatsNew__list__inner__category--people {
  background: url(../img/news_ico4.png) no-repeat left center;
  background-size: contain;
}
.whatsNew__list__inner__category--other {
  background: url(../img/news_ico5.png) no-repeat left center;
  background-size: contain;
}
.whatsNew__list__inner__detail {
  float: left;
}

.whatsNew__title {
  display: block;
  text-indent: 100%;
  overflow: hidden;
  width: 200px;
  height: 44px;
  margin: 0 auto;
  white-space: nowrap;
  background: url(../img/index_whatsnew.png) no-repeat center top;
  position: relative;
  margin-bottom: 22px;
}
.whatsNew__title:after {
  position: absolute;
  display: block;
  content: " ";
  width: 200px;
  height: 11px;
  left: 0;
  bottom: 0;
  background: url(../img/index_wn_bg.png);
}

.whatsNew__index {
  position: relative;
  margin: 0 auto;
  margin-top: 22px;
  display: block;
  width: 216px;
  height: 43px;
  overflow: hidden;
}
.whatsNew__index img {
  margin-top: -1px;
}
.whatsNew__index__hover {
  position: absolute;
  width: 0;
  height: 44px;
  display: block;
  left: 0;
  top: 0;
  background: url(../img/index_wn_toidx.png) no-repeat 0 -44px;
  transition: all 0.3s cubic-bezier(0.075, 0.47, 0.435, 1);
  opacity: 0;
}
.whatsNew__index:hover .whatsNew__index__hover {
  width: 216px;
  opacity: 1;
}

.animBg {
  position: absolute;
  width: 100%;
  height: 160px;
  top: -93px;
  left: 0;
  overflow: hidden;
}
.animBg__body {
  position: relative;
  margin: 0 auto;
  width: 1172px;
  height: 160px;
  background: url(../img/index_animbg.png) no-repeat center bottom;
  -ms-transform-origin: 0 100%;
      transform-origin: 0 100%;
}
.animBg__body:before {
  content: " ";
  position: absolute;
  height: 160px;
  width: 100%;
  background: url(../img/index_repeat_bg.png) repeat-x left bottom;
  left: -100%;
}
.animBg__body:after {
  content: " ";
  position: absolute;
  height: 160px;
  width: 100%;
  background: url(../img/index_repeat_bg.png) repeat-x left bottom;
  left: 100%;
}
.animBg__body__objects {
  position: absolute;
  margin: 0;
  padding: 0;
  display: block;
}
.animBg__body__objects--airplane {
  left: 84px;
  top: 4px;
  animation: airplaneanim 20s linear infinite;
  overflow: hidden;
  width: 209px;
  height: 25px;
  display: block;
}
.animBg__body__objects--cow {
  left: 206px;
  top: 50px;
  overflow: hidden;
  width: 46px;
  height: 30px;
}
.animBg__body__objects--pig {
  left: 250px;
  top: 59px;
  overflow: hidden;
  width: 27px;
  height: 19px;
}
.animBg__body__objects--trac {
  left: 591px;
  top: 52px;
  animation: tracanim 18s ease-in-out infinite;
}
.animBg__body__objects--ship {
  left: 1008px;
  top: 44px;
  animation: shipanim 30s linear infinite;
}
.animBg__body__objects--cloud01 {
  left: 370px;
  top: 25px;
  animation: cloudanim 40s linear infinite alternate;
}
.animBg__body__objects--cloud02 {
  left: 436px;
  top: 8px;
  animation: cloudanim 50s linear infinite alternate 3s;
}
.animBg__body__objects--cloud03 {
  left: 723px;
  top: 21px;
  animation: cloudanim 35s linear infinite alternate 2s;
}
.animBg__body__objects--cloud04 {
  left: 881px;
  top: 21px;
  animation: cloudanim 60s linear infinite alternate 10s;
}
.animBg__body__objects--cloud05 {
  left: 981px;
  top: 0px;
  animation: cloudanim 40s linear infinite alternate;
}

.pageTop {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  display: block;
}
.pageTop__box {
  margin: 0;
  padding: 0;
  display: block;
  width: 108px;
  height: 118px;
  background: url(/~fbs/img/pt_sara.png) no-repeat left bottom;
  position: absolute;
  -ms-transform-origin: 50% 80%;
      transform-origin: 50% 80%;
  bottom: -30px;
  right: 117px;
}

.pageTop__btn {
  position: fixed;
  bottom: 365px;
  right: 145px;
  -ms-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
}
.pageTop__btn__fukidashi {
  position: absolute;
  left: 32px;
  top: -45px;
  display: block;
  -ms-transform-origin: 0 100%;
      transform-origin: 0 100%;
  overflow: hidden;
  text-indent: 44px;
  white-space: nowrap;
  width: 44px;
  height: 44px;
  background: url(/~fbs/img/pt_fukidasi.png) no-repeat;
}

.mainVisual {
  position: relative;
  width: 100%;
  height: 572px;
  overflow: hidden;
  background: url(../img/index_bg_contheader.png);
}
.mainVisual__slider {
  margin: 0;
  position: absolute;
  width: 640px;
  height: 400px;
  left: 50%;
  top: 34px;
  margin-left: -320px;
  perspective: 3000px;
}
.mainVisual__slider__image {
  position: absolute;
  width: 640px;
  height: 400px;
  z-index: 10;
  will-change: transform;
  pointer-events: none;
}
.mainVisual__slider__image.active {
  pointer-events: auto;
}
.mainVisual__slider__image a {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.mainVisual__slider__image img {
  position: absolute;
  left: 0;
  top: 0;
}
.mainVisual__slider__image__overCvsCon {
  position: absolute;
  width: 95%;
  height: 92%;
  left: 2.5%;
  top: 4%;
  overflow: hidden;
}
.mainVisual__slider__image__overCvsCon canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
}
.mainVisual__slider__image__overBlock {
  position: absolute;
  width: 95%;
  height: 92%;
  left: 2.5%;
  top: 4%;
  overflow: hidden;
  visibility: hidden;
  background: url(../img/index_image_overbg.png);
}
.mainVisual__slider__image__overBlock__clickCircle {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  width: 9.5%;
  height: 15%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
  z-index: 11;
}
.mainVisual__slider__image__overBlock__clickCircle span {
  position: absolute;
  background: url(../img/index_over_click.png) no-repeat center center;
  background-size: contain;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  width: 80%;
  height: 18%;
  display: block;
}
.mainVisual__slider__image:before {
  content: " ";
  background: url(../img/imgshadow.png) no-repeat center bottom;
  position: absolute;
  width: 98%;
  height: 100%;
  left: 50%;
  bottom: -6px;
  -ms-transform: translateX(-50%);
      transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1s linear;
}
.mainVisual__slider__image--new:after {
  content: " ";
  display: block;
  width: 15%;
  height: 10%;
  position: absolute;
  background: url(../img/index_new_icon.png) no-repeat;
  background-size: contain;
  left: -.3%;
  top: -2%;
  z-index: 13;
}
.mainVisual__slider__image--current:before {
  opacity: 1;
}

.mainVisual__pager {
  position: absolute;
  left: 50%;
  bottom: 110px;
  -ms-transform: translateX(-50%);
      transform: translateX(-50%);
  margin: 0;
  padding: 0;
}
.mainVisual__pager__list {
  float: left;
  width: 12px;
  height: 13px;
  margin-right: 16px;
  background: url(../img/pager_cir.png) no-repeat;
  cursor: pointer;
}
.mainVisual__pager__list--active {
  opacity: .5;
  pointer-events: none;
}
.mainVisual__pager__list:last-child {
  margin-right: 0;
}

.mainVisual__ui {
  position: absolute;
  left: 50%;
  bottom: 152px;
  width: 773px;
  height: 51px;
  margin-left: -386px;
}
.mainVisual__ui__button {
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 51px;
  height: 51px;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
}
.mainVisual__ui__button__hover {
  width: 51px;
  height: 51px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-position: 0 -51px;
  -ms-transform-origin: 50% 0;
      transform-origin: 50% 0;
  transition: transform 0.4s cubic-bezier(0.075, 0.47, 0.435, 1.495);
}
.mainVisual__ui__button:hover .mainVisual__ui__button__hover {
  -ms-transform: rotate(0deg);
      transform: rotate(0deg);
}
.mainVisual__ui__button--left {
  left: 0;
  background: url(../img/mv_ui_prev.png) no-repeat;
}
.mainVisual__ui__button--left .mainVisual__ui__button__hover {
  -ms-transform: rotate(-180deg);
      transform: rotate(-180deg);
  background-image: url(../img/mv_ui_prev.png);
}
.mainVisual__ui__button--right {
  right: 0;
  background: url(../img/mv_ui_next.png) no-repeat;
}
.mainVisual__ui__button--right .mainVisual__ui__button__hover {
  -ms-transform: rotate(180deg);
      transform: rotate(180deg);
  background-image: url(../img/mv_ui_next.png);
}

#headerUtility {
  z-index: 10;
}

@media screen and (min-width: 641px) {
  body {
    min-width: 960px;
  }

  #mainContentBlock {
    min-width: 940px;
  }
}
@media screen and (max-width: 640px) {
  .pageTop {
    display: none;
  }

  .pickup__list__inner {
    width: 47%;
    margin-right: 4%;
  }
  .pickup__list__inner:nth-child(even) {
    margin-right: 0;
  }
  .pickup__list__inner:nth-child(odd) {
    margin-left: 1%;
  }
  .pickup__list__inner__image {
    width: 100%;
    margin-bottom: 10px;
  }
  .pickup__list__inner__image img {
    width: 100%;
  }
  .pickup__list__inner__text {
    margin-bottom: 1.5em;
    letter-spacing: -0.1rem;
  }

  .whatsNew__list__inner__date {
    width: 112px;
  }
  .whatsNew__list__inner__category {
    float: none;
  }
  .whatsNew__list__inner__detail {
    padding-left: 14px;
  }

  .animBg {
    top: -10em;
    left: 0;
  }
  .animBg__body {
    position: absolute;
    left: 0;
  }
  .animBg__body:before {
    display: none;
  }
  .animBg__body:after {
    display: none;
  }

  #headerGlobalNavicon {
    z-index: 12;
  }

  .mainVisual__slider {
    position: relative;
    width: 94%;
    top: 34px;
    left: 0;
    margin: 0 auto;
  }
  .mainVisual__slider__image {
    width: 100%;
    height: 100%;
  }
  .mainVisual__slider__image:before {
    bottom: -12px;
  }

  .mainVisual__pager {
    bottom: 2.4rem;
    z-index: 1;
  }
  .mainVisual__pager__list {
    cursor: pointer;
    margin-right: 0.6rem;
    width: 23.1px;
    height: 23.8px;
    background: url(../img/pager_cir_sp.png) no-repeat;
    background-size: contain;
  }

  .mainVisual__ui {
    display: none;
  }
}
