@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400,700&display=swap");
@font-face {
  font-family: 'Akkurat';
  src: url("../fonts/Akkurat-Regular.eot");
  src: url("../fonts/Akkurat-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Akkurat-Regular.woff") format("woff"), url("../fonts/Akkurat-Regular.ttf") format("truetype"), url("../fonts/Akkurat-Regular.svg#AkkuratNormal") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*------------------------------------*\
    $BASE
\*------------------------------------*/
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 0 none;
  list-style: none outside none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  font-family: "Akkurat", sans-serif;
  background-color: white;
  color: black;
}
body.showMenu {
  overflow-y: hidden;
}

.container-fluid {
  max-width: 1200px;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

.bn {
  text-align: center;
}
.bn.s1 {
  background-color: #f8f8f8;
  padding-top: 15px;
  padding-bottom: 15px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif;
  color: black;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: #00479a;
}

h1 {
  font-size: 34px;
  line-height: 34px;
}

h2 {
  font-size: 30px;
  line-height: 32px;
}

h3 {
  font-size: 20px;
  line-height: 24px;
}

h4 {
  font-size: 17px;
  line-height: 21px;
}

h5 {
  font-size: 15px;
  line-height: 18px;
}

h6 {
  font-size: 14px;
  line-height: 18px;
}

summary {
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
summary a:hover {
  color: #00479a;
}

time {
  color: #9e9e9e;
  font-size: 13px;
  line-height: 13px;
}
time::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(../images/clock.svg) center/contain no-repeat;
  margin-right: 5px;
}

figure {
  position: relative;
}
figure > a {
  display: block;
  position: relative;
}
figure > a .icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
figure img {
  width: 100%;
}
figure figcaption a {
  text-decoration: underline;
}
figure figcaption a:hover {
  text-decoration: none;
}

.block-title {
  font: bold 18px/18px "Akkurat", sans-serif;
  color: #959595;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

.b {
  color: #00479a;
}

.list li {
  border-top: 1px solid #e4e4e4;
  padding-top: 15px;
  padding-bottom: 15px;
}
.list figure.float-left,
.list figure.float-right {
  width: 120px;
}

ol {
  counter-reset: step-count;
}
ol li {
  counter-increment: step-count;
}
ol.list li figure a::before {
  content: counter(step-count);
  font: 900 33px/26px "Roboto", sans-serif;
  color: white;
  position: absolute;
  bottom: 0;
  left: 5px;
}

.featured {
  background-color: #f1faff;
}
.featured .block-title {
  color: #7997ce;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 20px;
}

/* breaker_box */
.breaker_box {
  border: 1px solid #ccc;
}

.breaker_box .txt {
  color: #fff;
  font-size: 15px;
  padding: 15px;
  background-color: #19437a;
}

.breaker_box span {
  color: #14b2a9;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.breaker_box .tit01 {
  color: #333;
  vertical-align: middle;
  padding-top: 7px;
  display: inline-block;
  font-size: 12px;
}

.breaker_box a {
  color: #666;
}

.story {
  padding: 10px;
}

.story_btn {
  background-color: #545454;
  height: 27px;
  color: #fff;
  padding: 0 10px;
  border: none;
  cursor: pointer;
  float: right;
}

.section-header {
  border-bottom: 3px solid #e0e0e0;
  padding-bottom: 12px;
}
.section-header h1 {
  color: #2676d4;
}
.section-header ul {
  font: bold 20px/24px "Roboto", sans-serif;
}
.section-header ul li::before {
  content: "|";
  color: #bebebe;
  margin-left: 12px;
  margin-right: 11px;
}
.section-header ul li:first-child::before {
  content: "";
}
.section-header ul a:hover {
  color: #00479a;
}

.section-list li {
  border-bottom: 1px solid #f1f1f1;
  padding-top: 20px;
  padding-bottom: 20px;
}
.section-list figure {
  margin-bottom: 10px;
}
@media (min-width: 576px) {
  .section-list li:nth-child(n+2) figure {
    float: left;
    margin-right: 20px;
    width: 33.333333%;
    max-width: 276px;
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .section-list li:first-child figure {
    float: left;
    margin-right: 20px;
    width: 50%;
    max-width: inherit;
    margin-bottom: 0;
  }
}

.pager {
  font: bold 16px/16px "Roboto", sans-serif;
  padding-top: 15px;
  padding-bottom: 30px;
}
.pager a {
  color: #333;
}
.pager span {
  color: #2676d4;
}
.pager li {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pager li::before {
  content: "|";
  color: #bebebe;
  margin-left: 12px;
  margin-right: 11px;
}
.pager .pager-prev {
  padding-right: 40px;
}
.pager .pager-next {
  padding-left: 40px;
}
.pager .pager-first::before,
.pager .pager-prev::before,
.pager .pager-next::before {
  content: none;
}

.bt-0 {
  border-top: 0 !important;
}

.bl-1 {
  border-left: 1px solid #e0e0e0;
}

@media (min-width: 576px) {
  .bt-sm-0 {
    border-top: 0 !important;
  }

  .bl-sm-1 {
    border-left: 1px solid #e0e0e0;
  }

  .col-sm-r {
    border-left: 1px solid #dfdfdf;
  }
}
@media (min-width: 768px) {
  .bt-md-0 {
    border-top: 0 !important;
  }

  .bl-md-1 {
    border-left: 1px solid #e0e0e0;
  }

  .bl-md {
    position: relative;
  }
  .bl-md::before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #dfdfdf;
    position: absolute;
    top: 0;
    left: -15px;
  }
}
@media (min-width: 992px) {
  .bt-lg-0 {
    border-top: 0 !important;
  }

  .bl-lg-1 {
    border-left: 1px solid #e0e0e0;
  }
}
/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.icon {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 43px;
  height: 43px;
  background-position: center;
  background-size: 18px;
  background-repeat: no-repeat;
}
.icon-facebook {
  background-image: url(../images/social_facebook2.svg);
}
.icon-twitter {
  background-image: url(../images/social_twitter2.svg);
}
.icon-feed {
  background-image: url(../images/social_feed2.svg);
}
.icon-mail {
  background-image: url(../images/mail.svg);
  background-size: 22px;
}
.icon-play {
  background-image: url(../images/play.svg);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid white;
  background-size: 58px;
  background-position: 3px center;
}
.icon-menu {
  background-image: url(../images/menu2.svg);
  background-color: transparent;
}
@media (min-width: 768px) {
  .icon-menu {
    background-image: url(../images/menu.svg);
  }
}
.icon-search {
  background-image: url(../images/search2.svg);
  background-color: transparent;
}
.icon-search.active {
  background-image: url(../images/x2.svg);
}
@media (min-width: 768px) {
  .icon-search {
    background-image: url(../images/search.svg);
  }
  .icon-search.active {
    background-image: url(../images/x.svg);
  }
}
.icon-close {
  background-image: url(../images/x.svg);
}

.logo a {
  display: inline-block;
  width: 131px;
  height: 33px;
  background: url(../images/logo.png) center/contain no-repeat;
}

.ph {
  position: relative;
  z-index: 100;
  background-color: #00479a;
  text-transform: uppercase;
}
.ph .logo {
  padding-top: 9px;
}
.ph .meta {
  display: none;
}

.pn {
  background-color: white;
  text-transform: uppercase;
}
.pn .icon {
  position: absolute;
  top: 0;
}
.pn .icon-menu {
  left: 0;
}
.pn .icon-search {
  right: 0;
}
.pn .icon-close {
  right: 0;
}
.show-menu .pn .icon-close {
  display: block;
}
.pn nav {
  font-weight: bold;
  font-size: 23px;
  line-height: 43px;
  font-family: "Helvetica",Arial,sans-serif;
}
.pn nav a {
  display: block;
}
.pn .menu {
  font-size: 17px;
}
.pn .menu .current {
  color: #0063d6;
}
.pn .trending {
  font-size: 14px;
  color: #8f8f8f;
}
.pn .trending::before {
  content: "Trending";
  font-size: 12px;
  color: #b8b8b8;
}
.pn .trending li {
  padding-left: 30px;
}
.pn .trending li:first-child {
  padding-left: 20px;
}

#searchform {
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 43px;
  background-color: white;
}
#searchform input {
  font-size: 14px;
  height: 43px;
}
#searchform .form-text {
  width: 100%;
  text-indent: 15px;
}
#searchform .form-submit {
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
  background-color: #619de2;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}
.showSearch #searchform {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .ph .logo {
    padding-top: 20px;
  }
  .ph .logo a {
    width: 235px;
    height: 58px;
  }
  .ph .meta {
    display: block;
    padding-top: 5px;
    padding-left: 25px;
  }
  .ph .date {
    font: 11px/20px "Helvetica",Arial,sans-serif;
    color: #619de2;
  }
  .ph .tagline {
    font: 13px/20px "Helvetica",Arial,sans-serif;
    color: #a9a9a9;
  }

  .pn {
    border-bottom: 1px solid #d3d3d3;
  }
  .pn > div {
    position: relative;
    padding-right: 58px;
  }
  .pn > div .icon-close,
  .pn > div .icon-menu {
    display: none;
  }
  .pn .menu li {
    flex-grow: 1;

  }
  .pn a:hover {
    color: #619de2;
  }
}
@media (max-width: 767px) {
  .ph {
    border-bottom: 1px solid #d3d3d3;
    padding-left: 43px;
    padding-right: 43px;
  }
  .ph .icon-menu {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
  }
  .ph .icon-search {
    border-left: 1px solid rgba(255, 255, 255, 0.5);
  }

  .pn nav {
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 290px;
    height: 100vh;
    overflow-y: scroll;
    background-color: #f2f2f2;
    padding-top: 43px;
  }
  .pn nav a {
    padding-left: 15px;
    padding-right: 15px;
  }
  .pn nav a:hover {
    background-color: #00479a;
    color: white;
  }
  .showMenu .pn nav {
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@media (max-width: 575px) {
  .ph .sns {
    display: none;
  }
}
.scrollHeader .ph {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
}
.scrollHeader .pn {
  background-color: transparent;
}
.scrollHeader .pn > div {
  padding-left: 156px;
}
@media (min-width: 768px) {
  .scrollHeader .ph .sns,
  .scrollHeader .ph .meta,
  .scrollHeader .ph .trending {
    display: none !important;
  }
  .scrollHeader .ph .logo {
    position: absolute;
    top: 10px;
    left: 15px;
    padding-top: 0;
  }
  .scrollHeader .ph .logo a {
    width: 131px;
    height: 33px;
  }
  .scrollHeader .ph > div.container-fluid {
    position: relative;
    z-index: 1;
  }
  .scrollHeader .ph .icon-search {
    background-image: url(../images/search2.svg);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    right: 15px;
  }
  .scrollHeader .ph .icon-search.active {
    background-image: url(../images/x2.svg);
  }
  .scrollHeader #searchform {
    left: 15px;
    right: 15px;
    right: 58px;
  }
  .scrollHeader .pn {
    color: white;
  }
  .scrollHeader .pn > div {
    padding-right: 58px;
  }
  .scrollHeader .pn a:hover {
    background-color: #0063d6;
    color: white;
  }
  .scrollHeader .pn .menu .current a {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
  }
}

/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.pf {
  background-color: #313131;
  font-size: 12px;
  line-height: 24px;
  font-family: "Helvetica",Arial,sans-serif;
  color: #a8a8a8;
  padding-top: 25px;
  padding-bottom: 25px;
}
.pf .icon,
.pf .logo a {
  opacity: .5;
}
.pf .menu {
  font-size: 14px;
  text-transform: uppercase;
  color: white;
}
.pf ul {
  font-weight: bold;
}
@media (min-width: 768px) {
  .pf .copyright,
  .pf li {
    padding-left: 20px;
  }
}