@charset "UTF-8";


/* ==========================================================================
   Single
========================================================================== */
.single-header {
  position: relative;
}
.single-header .hero-image {
  padding-top: 290px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}


/* headline */
.single-header .ttlBox .headline {
  position: absolute;
  left: 6%;
  bottom: 6vw;
}
.single-header .ttlBox .badge {
  font-size: .769em;
  padding: .65em 1em;
}
.single-header .ttlBox .ttl span {
  display: inline-block;
  font-feature-settings: "palt";
  white-space: nowrap;
  margin-top: .25rem;
  padding: .1em .5em;
}
.single-header .ttlBox .ttl span:not(.bg-white) {
  color: #FFF;
}

@media only screen and (max-width: 991px) {
  .single-header .ttlBox h2.ttl {
    font-size: 1.3em;
  }
}

@media only screen and (min-width: 576px) {
  .single-header .hero-image {
    padding-top: 58vw;
  }
}
@media only screen and (min-width: 768px) {
  .single-header .ttlBox .badge {
    font-size: .923em;
  }
  .single-header .ttlBox h2.ttl {
    font-size: 1.692em;
  }
}
@media only screen and (min-width: 992px) {
  .single-header .ttlBox .badge {
    font-size: 1.063em;
  }
  .single-header .ttlBox h2.ttl {
    font-size: 2.376em;
  }
  .single-header .ttlBox .ttl span {
    margin-top: .5rem;
  }
}


/* ==========================================================================
   Overview
========================================================================== */
#overview {
  background: #F7F7F7;
  padding: 1em 0;
}
#overview .txtBox {
  font-size: .813rem;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#overview .txtBox p {
  font-size: .813rem;
}


/* ==========================================================================
   Member
========================================================================== */
#member-slider {
  max-width: 930px;
  margin-top: 2.5em;
  margin-right: -45px;
  margin-left: -45px;
}
#member-slider .panel {
  padding: 0 15px;
  margin-bottom: 20px;
}
#member-slider .panel a {
  display: block;
}
#member-slider .panel .imgBox {
  margin-bottom: 20px;
}
#member-slider .panel span {
  display: block;
}
#member-slider .panel .name {
  font-size: 1.231em;
  font-weight: 500;
  line-height: 1.4;
}
#member .buttons {
  margin-top: 2em;
  margin-bottom: 2.5em;
}

@media only screen and (min-width: 576px) {
  #member-slider {
    margin-top: 4vw;
    margin-right: -15px;
    margin-left: -15px;
  }
}
@media only screen and (min-width: 992px) {
  #member-slider .panel .name {
    font-size: 1.125em;
  }
}
@media only screen and (min-width: 1200px) {
  #member .container > .content {
    max-width: 930px;
    margin-right: auto;
    margin-left: auto;
  }
}


/* ==========================================================================
   Article
========================================================================== */
article p {
  font-size: .813rem;
  text-align: justify;
}
article .box3 .ttlBox {
  margin-top: -1.5em;
}
article .box3 .ttlBox .headline {
  transform: translateY(-100%);
}
article .box3 .ttlBox .badge {
   padding: 1em;
   color: #CCC;
}
article .box3 + .readBox {
  max-width: 47em;
  background: #FFF;
  margin-right: -25px;
  margin-left: -25px;
  padding: 25px 25px 5px;
  position: relative;
  z-index: 5;
}
article .box3 + .readBox p {
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
  article .box3.reverse + .readBox {
    margin-left: auto;
  }
}

@media only screen and (min-width: 992px) {
  article .box3 .ttlBox .headline {
    left: 0;
  }
  article .box3.reverse .ttlBox .headline {
    right: 0;
  }
  article .box3 + .readBox {
    max-width: 50em;
    margin-right: 0;
    margin-left: 0;
    padding: 30px 30px 5px;
  }
}


/* ==========================================================================
   Other Post
========================================================================== */
#other-post {
  font-size: .938em;
  position: relative;
}
#other-post .panel {
  padding: 0 15px 10px;
}
#other-post .panel > a {
  display: block;
  position: relative;
}
#other-post .panel .imgBox {
  width: 100%;
  
}
#other-post .panel .imgBox .cover-img {
  width: 100%;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
#other-post .panel .ttlBox {
  position: absolute;
  bottom: -10px;
  left: -10px;
}

#other-post .panel .ttlBox .badge {
  font-size: .615em;
  padding: .65em 1em;
}
#other-post .panel .ttlBox .ttl span {
  display: inline-block;
  font-feature-settings: "palt";
  white-space: nowrap;
  margin-top: .25rem;
  padding: .1em .5em;
}
#other-post .panel .ttlBox .ttl span:not(.bg-white) {
  color: #FFF;
}


@media only screen and (min-width: 768px) {
  #other-post .panel .imgBox .cover-img {
    padding-top: 63.4%;
  }
}
@media only screen and (min-width: 992px) {
  #other-post .panel .ttlBox .badge {
    font-size: .625em;
  }
  #other-post .panel .ttlBox .ttl span {
    margin-top: .5rem;
  }

  #other-post .panel {
    padding: 0 30px 20px;
  }
  #other-post .panel .ttlBox {
    bottom: -20px;
    left: -20px;
  }
}