@charset "UTF-8";
@-webkit-keyframes ourstories-article-tile-caption-slidein {
  0% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes ourstories-article-tile-caption-slidein {
  0% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@-webkit-keyframes ourstories-summary-tile-bg-zoom {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
  to {
    -webkit-transform: scale(1.4);
    transform: scale(1.4)
  }
}

@keyframes ourstories-summary-tile-bg-zoom {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
  to {
    -webkit-transform: scale(1.4);
    transform: scale(1.4)
  }
}

@-webkit-keyframes ourstories-summary-tile-bg-hover-zoom {
  0% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4)
  }
  to {
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
  }
}

@keyframes ourstories-summary-tile-bg-hover-zoom {
  0% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4)
  }
  to {
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
  }
}

.ourstories-container {
  font-size: 50px;
  line-height: 0;
  margin: 0;
  padding: 0
}

.ourstories-container * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0;
  padding: 0
}

.ourstories-container a {
  color: inherit;
  text-decoration: none
}

.ourstories-container img, .ourstories-container svg {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  width: 100%
}

.ourstories-container video {
  height: auto;
  width: 100%
}

.ourstories-container ol, .ourstories-container ul {
  list-style: none
}

.ourstories-container select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.ourstories-container select::-ms-expand {
  display: none
}

.ourstories-container .ourstories-inner {
  margin: 0 auto;
  position: relative;
  width: 1280px
}

.ourstories-container .zero-area-container {
  height: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 0
}

.ourstories-container .btn-article-tag {
  text-align: center
}

.ourstories-container .btn-article-tag .box {
  border-collapse: collapse;
  border-spacing: 0;
  cursor: pointer;
  display: table;
  height: .7em
}

.ourstories-container .btn-article-tag .box:after, .ourstories-container .btn-article-tag .box:before {
  content: "";
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  width: .2em
}

.ourstories-container .btn-article-tag .box:before {
  background: url(../images/common/common_tag_left.png) no-repeat left center;
  background-size: auto 100%
}

.ourstories-container .btn-article-tag .box:after {
  background: url(../images/common/common_tag_right.png) no-repeat right center;
  background-size: auto 100%
}

.ourstories-container .btn-article-tag .box .txt {
  background: url(../images/common/common_tag_center.png) repeat-x center;
  background-size: auto 100%;
  display: table-cell;
  font-size: .26em;
  height: 100%;
  line-height: 1;
  padding: 0 .53846em;
  vertical-align: middle;
  white-space: nowrap
}

.ourstories-container .btn-article-tag.is-select .box:before {
  background-image: url(../images/common/common_tag_active_left.png)
}

.ourstories-container .btn-article-tag.is-select .box:after {
  background-image: url(../images/common/common_tag_active_right.png)
}

.ourstories-container .btn-article-tag.is-select .box .txt {
  background-image: url(../images/common/common_tag_active_center.png);
  color: #e00f0f
}

.ourstories-container .breadcrumb-list {
  letter-spacing: -.4em;
  padding: 20px 0%;
  width: 97%;
  margin: 0 auto;
  max-width: 1350px;
}

.ourstories-container .breadcrumb-list .breadcrumb-item {
  display: inline;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px
}

.ourstories-container .breadcrumb-list .breadcrumb-item:not(:last-of-type):after {
  content: "/";
  margin: 0 .66667em
}

.ourstories-container .breadcrumb-list .breadcrumb-item a:hover {
  text-decoration: underline
}

.ourstories-container .tile-list {
  align-items: flex-start;
  -webkit-box-align: start;
  -webkit-box-pack: start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  -ms-flex-pack: start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-start
}

.ourstories-container .tile-list .tile {
  margin: 1.5625% 0 0 1.5625%;
  width: 31.25%
}
@supports (-ms-ime-align: auto) {
  /* Edge */
  .ourstories-container .tile-list .tile {
    margin-top: 20px;
  }
}

.ourstories-container .tile-list .tile .inner {
  display: block;
  overflow: hidden;
  padding: 100% 0 0;
  position: relative;
  z-index: 1
}
.article-copy{
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  line-height: 1;
  z-index: 2;
  font-size: 14px;
}
.ourstories-container .tile-list .tile.summary .article-copy{
  display: none;
}
.ourstories-container .tile-list .tile .inner:after, .ourstories-container .tile-list .tile .inner:before {
  content: "";
  display: block;
  height: 1.12em;
  position: absolute;
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  width: 1.12em;
  z-index: 20
}

.ourstories-container .tile-list .tile .inner:before {
  background: linear-gradient(135deg, #f3f3f3 50%, transparent 50%);
  left: -1px;
  top: -1px;
  -webkit-transform-origin: left top;
  transform-origin: left top
}

.ourstories-container .tile-list .tile .inner:after {
  background: linear-gradient(-45deg, #f3f3f3 50%, transparent 50%);
  bottom: -1px;
  right: -1px;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom
}

.ourstories-container .tile-list .tile .inner .bg {
  background: no-repeat center;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.ourstories-container .tile-list .tile.article, .ourstories-container .tile-list .tile.summary {
  color: #fff
}

.ourstories-container .tile-list .tile.article .inner .bg {
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s
}

.ourstories-container .tile-list .tile.article .inner .caption {
  align-items: flex-start;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .9)));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .9));
  bottom: 0;
  -webkit-box-align: start;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-pack: end;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-end;
  left: 0;
  padding: .3em;
  position: absolute;
  width: 100%;
  z-index: 10
}

.ourstories-container .btn-loadmore, .ourstories-container .tile-list .tile.article .inner .caption>* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%
}

.ourstories-container .tile-list .tile.article .inner .caption .category {
  display: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
  padding: 0 0 0 35px;
  position: relative
}

.ourstories-container .tile-list .tile.article .inner .caption .title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.16667
}

.ourstories-container .tile-list .tile.article .inner .caption .date {
  font-size: 14px;
  line-height: 1.4;
  margin: 10px 0 15px
}

.ourstories-container .tile-list .tile.article .inner .caption .first-txt {
  display: none;
  font-size: 18px;
  line-height: 1.4;
  margin: 3px 0;
  padding: 0 35px 0 0;
  position: relative
}

.ourstories-container .tile-list .tile.article .inner .caption .first-txt:before {
  background: url(../images/common/common_tile_arrow_active.png) no-repeat right center;
  background-size: 30px;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 35px
}

.ourstories-container .tile-list .tile.article .inner .caption .first-txt .more, .ourstories-container .tile-list .tile.heading, .ourstories-container .tile-list .tile.tag-heading {
  display: none
}

.ourstories-container .tile-list .tile.article .inner .corner-icon {
  background: no-repeat center;
  background-size: contain;
  height: .56em;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  width: .56em;
  z-index: 30
}

.ourstories-container .tile-list .tile.article .inner .caption .category .category-icon {
  background: no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  height: 30px;
  left: 0;
  position: absolute;
  top: -6px;
  width: 30px;
}

.ourstories-container .tile-list .tile.summary .inner .bg {
  -webkit-animation: ourstories-summary-tile-bg-zoom 11s linear forwards;
  animation: ourstories-summary-tile-bg-zoom 11s linear forwards
}

.ourstories-container .tile-list .tile.summary .inner .caption {
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .9)));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .9));
  bottom: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  padding: .3em;
  position: absolute;
  width: 100%;
  z-index: 10
}

.ourstories-container .tile-list .tile.summary .inner .caption .sub-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1
}

.ourstories-container .tile-list .tile.summary .inner .caption .title {
  font-size: 50px;
  font-weight: 500;
  line-height: 1.1;
  margin: 4px 0 8px
}

.ourstories-container .tile-list .tile.summary .inner .caption .title:after {
  background: url(../images/common/common_tile_arrow_white.png) no-repeat center;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 18px;
  margin: 0 0 0 18px;
  width: 33px
}

.ourstories-container .tile-list .tile.heading .inner .bg {
  background: #fff
}

.ourstories-container .tile-list .tile.heading .inner .caption {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  padding: 1em;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10
}

.ourstories-container .tile-list .tile.heading .inner .caption .title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1
}

.ourstories-container .tile-list .tile.heading .inner .caption .title .category {
  color: #e00f0f;
  display: inline-block;
  padding: 0 0 0 55px;
  position: relative
}

/*
.ourstories-container .tile-list .tile.heading .inner .caption .title .category:before {
  background: no-repeat center;
  background-size: contain;
  content: "";
  display: none;
  height: 54px;
  left: -2px;
  position: absolute;
  top: 2px;
  width: 54px
}*/
.ourstories-container .tile-list .tile.heading .inner .caption .title .category>img {
  display: block;
  height: 54px;
  left: -2px;
  position: absolute;
  top: 2px;
  width: 54px
}

.ourstories-container .tile-list .tile.tag-heading .inner .bg {
  background: #fff
}

.ourstories-container .tile-list .tile.tag-heading .inner .caption {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  padding: .84em 1em;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10
}

.ourstories-container .tile-list .tile.tag-heading .inner .caption:before {
  background: url(../images/common/top_tag_heading.png) no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  height: 39px;
  width: 52px
}

.ourstories-container .tile-list .tile.tag-heading .inner .caption .title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.13043;
  margin: 4px 0 0
}

.ourstories-container .tile-list .tile.no-result .inner .bg {
  background: #fff
}

.ourstories-container .tile-list .tile.no-result .inner .caption {
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10
}

.ourstories-container .tile-list .tile.no-result .inner .caption .title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center
}

.ourstories-container .btn-loadmore {
  background: #fff;
  -webkit-box-shadow: 0 2px 6px 0 transparent;
  box-shadow: 0 2px 6px 0 transparent;
  cursor: pointer;
  display: none;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  margin: 6.25% auto 0;
  padding: 16px 20px;
  position: relative;
  -webkit-transition: color .3s, -webkit-box-shadow .3s;
  transition: color .3s, box-shadow .3s;
  transition: color .3s, box-shadow .3s, -webkit-box-shadow .3s;
  width: 192px
}

.ourstories-container .btn-loadmore:after, .ourstories-container .btn-loadmore:before {
  background: no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  right: 13px;
  top: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  width: 20px
}

.ourstories-container .btn-loadmore:before {
  background-image: url(../images/common/common_loadmore_arrow.png)
}

.ourstories-container .btn-loadmore:after {
  background-image: url(../images/common/common_loadmore_arrow_active.png);
  opacity: 0
}

.ourstories-container .tile-list .tile .bg{display: block;}
@media (min-width:769px) {
  .sp-view{display: none !important;}
  .ourstories-container .onlySp {
    display: none!important
  }
  .ourstories-container .btn-article-tag .box:hover:before {
    background-image: url(../images/common/common_tag_active_left.png)
  }
  .ourstories-container .btn-article-tag .box:hover:after {
    background-image: url(../images/common/common_tag_active_right.png)
  }
  .ourstories-container .btn-article-tag .box:hover .txt {
    background-image: url(../images/common/common_tag_active_center.png);
    color: #e00f0f
  }
  .ourstories-container .tile-list .tile.article .inner:hover:after, .ourstories-container .tile-list .tile.article .inner:hover:before, .ourstories-container .tile-list .tile.summary .inner:hover:after, .ourstories-container .tile-list .tile.summary .inner:hover:before {
    -webkit-transform: scale(0);
    transform: scale(0)
  }
  .ourstories-container .tile-list .tile.article .inner:hover .bg {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }
  .ourstories-container .tile-list .tile.article .inner:hover .caption {
    background: rgba(0, 0, 0, .5);
    min-height: 100%
  }
  .ourstories-container .tile-list .tile.article .inner:hover .caption>* {
    -webkit-animation: ourstories-article-tile-caption-slidein .1s;
    animation: ourstories-article-tile-caption-slidein .1s
  }
  .ourstories-container .tile-list .tile.article .inner:hover .caption .category, .ourstories-container .tile-list .tile.article .inner:hover .caption .first-txt {
    display: block
  }
  .ourstories-container .btn-loadmore:hover:before, .ourstories-container .tile-list .tile.article .inner:hover .corner-icon {
    opacity: 0
  }
  .ourstories-container .tile-list .tile.summary .inner:hover .bg {
    -webkit-animation: ourstories-summary-tile-bg-hover-zoom .3s linear forwards;
    animation: ourstories-summary-tile-bg-hover-zoom .3s linear forwards
  }
  .ourstories-container .tile-list .tile.summary .inner:hover .caption .title:after {
    background-image: url(../images/common/common_tile_arrow_active.png)
  }
  .ourstories-container .btn-loadmore:hover {
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .15);
    color: #e00f0f
  }
  .ourstories-container .btn-loadmore:hover:after {
    opacity: 1
  }
}

@media (min-width:981px) {
  .ourstories-container .tile-list .tile.heading,
  .ourstories-container .tile-list .tile.summary.is-large,
  .ourstories-container .tile-list.is-all .tile.article.is-large {
    width: 64.0625%
  }
  .ourstories-container .tile-list .tile.heading .inner,
  .ourstories-container .tile-list .tile.summary.is-large .inner,
  .ourstories-container .tile-list.is-all .tile.article.is-large .inner {
    padding: 48.78049% 0 0
  }


  .ourstories-container .tile-list .tile.no-result {
    width: 96.875%
  }
  .ourstories-container .tile-list .tile.no-result .inner {
    padding: 32.25806% 0 0
  }
  .ourstories-container .tile-list.is-all .tile.article.is-large .inner .first-txt .more {
    display: inline
  }
}

@media (max-width:980px) and (min-width:769px) {
  .ourstories-container .tile-list .tile {
    width: 47.65625%
  }
  .ourstories-container .tile-list .tile.heading, .ourstories-container .tile-list .tile.no-result {
    width: 96.875%
  }
  .ourstories-container .tile-list .tile.heading .inner, .ourstories-container .tile-list .tile.no-result .inner {
    padding: 49.19355% 0 0
  }
}

@media screen and (max-width:1280px) {
  .ourstories-container {
    font-size: 3.90625vw
  }
  .article-select-serch{
    width: 97% !important;
  }
  .ourstories-container .ourstories-inner {
    width: 100%;
  }
}

@media screen and (max-width:768px) {
  .pc-view{display: none !important;}
  .ourstories-container {
    font-size: 7.8125vw
  }
  .ourstories-container .onlyPc {
    display: none!important
  }
  .ourstories-container .btn-article-tag .box {
    height: .7em
  }
  .ourstories-container .btn-article-tag .box:after, .ourstories-container .btn-article-tag .box:before {
    width: .2em
  }
  .ourstories-container .btn-article-tag .box .txt {
    font-size: .26em;
    padding: 0 .53846em
  }
  .ourstories-container .breadcrumb-list {
    padding: .36em .6em
  }
  .ourstories-container .breadcrumb-list .breadcrumb-item {
    font-size: .36em;
    line-height: 1.33333
  }
  .ourstories-container .tile-list .tile {
    margin: 3.125% 0 0 3.125%;
    width: 93.75%
  }
  .ourstories-container .tile-list .tile .inner {
    padding: 52.5% 0 0
  }
  .ourstories-container .tile-list .tile .inner:after, .ourstories-container .tile-list .tile .inner:before {
    height: 1.12em;
    width: 1.12em
  }
  .ourstories-container .tile-list .tile.article .inner .caption {
    padding: .3em
  }
  .ourstories-container .tile-list .tile.article .inner .caption .title {
    font-size: .76em;
    line-height: 1.05263
  }
  .ourstories-container .tile-list .tile.article .inner .caption .date {
    font-size: .28em;
    margin: 1.42857em 0 0
  }
  .ourstories-container .tile-list .tile.article .inner .corner-icon {
    height: .56em;
    width: .56em
  }
  .ourstories-container .tile-list .tile.summary .inner {
    padding: 79% 0 0
  }
  .ourstories-container .tile-list .tile.summary .inner .caption {
    padding: .3em
  }
  .ourstories-container .tile-list .tile.summary .inner .caption .sub-title {
    font-size: .5em;
    line-height: 1.1
  }
  .ourstories-container .tile-list .tile.summary .inner .caption .title {
    font-size: .92em;
    line-height: 1.1;
    margin: .36957em 0 .17391em
  }
  .ourstories-container .tile-list .tile.summary .inner .caption .title:after {
    height: .3913em;
    margin: 0 0 0 .3913em;
    width: .71739em
  }
  .ourstories-container .tile-list .tile.heading .inner .caption {
    padding: .88em
  }
  .ourstories-container .tile-list .tile.heading .inner .caption .title {
    font-size: 1em;
    line-height: 1.1
  }
  .ourstories-container .tile-list .tile.heading .inner .caption .title .category {
    padding: 0 0 0 1em
  }
  .ourstories-container .tile-list .tile.heading .inner .caption .title .category:before {
    height: .92em;
    left: -.04em;
    top: .04em;
    width: .92em
  }
  .ourstories-container .tile-list .tile.heading .inner .caption .title .category>img {
    height: .92em;
    left: -.04em;
    top: .04em;
    width: .92em
  }
  .ourstories-container .tile-list .tile.tag-heading .inner .caption {
    padding: .8em .88em
  }
  .ourstories-container .tile-list .tile.tag-heading .inner .caption:before {
    height: .78em;
    width: 1.04em
  }
  .ourstories-container .tile-list .tile.tag-heading .inner .caption .title {
    font-size: .92em;
    margin: .08696em 0 0
  }
  .ourstories-container .tile-list .tile.no-result .inner .caption .title {
    font-size: .48em
  }
  .ourstories-container .btn-loadmore {
    font-size: .64em;
    margin: 10% auto 0;
    padding: .84375em 1em;
    width: 41.25%
  }
  .ourstories-container .btn-loadmore:before {
    right: .6875em;
    width: .75em
  }
  .ourstories-container .btn-loadmore:after {
    display: none
  }
  @-webkit-keyframes ourstories-summary-tile-bg-zoom {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1)
    }
    to {
      -webkit-transform: scale(1.4);
      transform: scale(1.4)
    }
  }
  @keyframes ourstories-summary-tile-bg-zoom {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1)
    }
    to {
      -webkit-transform: scale(1.4);
      transform: scale(1.4)
    }
  }
}

.ourstories-container .hero-area .btn .inner{
  -webkit-transition: color .3s, background .3s;
  transition: color .3s, background .3s;
}
.ourstories-container .hero-area:hover .btn .inner{
  background: #fff;
}