@charset "utf-8";

.font-acumin {
  font-family: acumin-pro-condensed, sans-serif;
  font-weight: 700;
}
.font-kozuka {
  font-family: kozuka-gothic-pr6n, sans-serif;
  font-weight: 700;
}

#header {
  background-color: #FFF;
}

/* header */
#header_area {
  background-image: url(../img/bg.png);
  margin: 0;
}
#header_area .inner {
  display: flex;
  justify-content: space-around;
}
#header_area h1 img {
  width: 480px;
}
#header_area .summary {
  width: 450px;
}
#header_area .summary .lead {
  background-color: #0071BC;
  color: #FFFFFF;
  padding: 8px 16px;
}
#header_area .summary .lead h2 {
  color: #FFF700;
  font-size: 2.8rem;
  line-height: 1.3em;
  margin: 0 0 8px;
}
#header_area .summary .lead p {
  font-size: 1.6rem;
  line-height: 1.5em;
}
#header_area .summary .exp {
  margin: 0;
}
#header_area .summary .exp img {
  width: 100%;
}
#header_area .summary .credit {
  font-size: 1.1rem;
  line-height: 1em;
  text-align: center;
  background-color: rgba(255,255,255,0.70);
}

#category_area,
#history_area,
#history_area2 {
  background-color: rgba(228,228,228,0.20);
}

/* category_area */
#category_area {
  margin: 0;
  padding: 48px 0;
}
#category_area .inner {
  display: flex;
  justify-content: space-between;
}
#category_area .menu {
  flex-basis: 50%;
}
#category_area .menu a {
  display: block;
  text-align: center;
  position: relative;
}
#category_area .menu a img {
  width: 380px;
}
#category_area .menu_tyj a {
  background-color: #0071BC;
}
#category_area .menu_tyj a.active:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #0071BC;
}
#category_area .menu_opm a {
  background-color: #F0611A;
}
#category_area .menu_opm a.active:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #F0611A;
}

/* history_area */
#history_area,
#history_area2 {
  padding: 32px 0;
}
#history_area .category,
#history_area2 .category {
  height: 76px;
  margin: 0 0 50px;
  text-align: center;
}
#history_area .et-slide,
#history_area2 .et-slide {
  background-color: #FFFFFF;
}
#history_area2 .et-slide:last-of-type {
  min-height: 100vh;
}
#history_area .et-slide h1,
#history_area2 .et-slide h1 {
  background-color: #000000;
  color: #FFFFFF;
  font: 700 3rem/1em acumin-pro-condensed, sans-serif;
  padding: 8px 0 16px;
  text-align: center;
}
#history_area .et-slide dl,
#history_area2 .et-slide dl {
  display: flex;
}
#history_area .et-slide dl dt,
#history_area2 .et-slide dl dt {
  font: 700 2.5rem/0.6em acumin-pro-condensed, sans-serif;
  padding: 16px 16px 16px 8px;
  text-align: right;
  width: 2em;
}
#history_area .et-slide dl dt.month_large,
#history_area2 .et-slide dl dt.month_large {
  line-height: 1em;
}
#history_area .et-slide dl .topics,
#history_area2 .et-slide dl .topics {
  border-left: 2px solid #000000;
  font: 700 1.6rem/1.3em kozuka-gothic-pr6n, sans-serif;
  padding: 16px 8px 16px 16px;
  position: relative;
}
#history_area .et-slide dl .topics_large,
#history_area2 .et-slide dl .topics_large {
  font-size: 2.6rem;
}
#history_area .et-slide dl .topics:before,
#history_area2 .et-slide dl .topics:before {
  position: absolute;
  content: "●";
  font-size: 12px;
  left: -7px;
}
#history_area .et-slide dl .topics .icon,
#history_area2 .et-slide dl .topics .icon {
  display: inline-block;
  margin-right: 4px;
  vertical-align: text-bottom;
  width: 1.6rem;
}
#history_area .et-slide dl .topics .note,
#history_area2 .et-slide dl .topics .note {
  display: block;
  font: normal 1.3rem/1.6em YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  padding: 8px 0 0;
  width: 820px;
}
#history_area .et-slide dl .topics .note:after,
#history_area2 .et-slide dl .topics .note:after {
   content:".";
   display:block;
   font-size:0;
   height:0;
   clear:both;
   visibility:hidden;
}
#history_area .et-slide dl dt,
#history_area .et-slide dl .topics:before {
  color: #0071BC;
}
#history_area2 .et-slide dl dt,
#history_area2 .et-slide dl .topics:before {
  color: #F0611A;
}
.img90 {
  display: block;
  margin: 0 8px 0 0;
  width: 90px;
}
.img120 {
  display: block;
  margin: 8px 0 0;
  width: 120px;
}
.img180 {
  display: block;
  margin: 8px 0 0;
  width: 180px;
}
.img340 {
  display: block;
  margin: 8px 0 0;
  width: 340px;
}
.img_border {
  border: 1px solid #030303;
}
.marker1 {
  background: linear-gradient(transparent 55%, rgba(240,97,26,0.60) 55%);
}
.marker2 {
  background: linear-gradient(transparent 55%, rgba(0,113,188,0.30) 55%);
}

/* inview */
.upfadein1 {
  opacity: 0;
  transform: translate(0,60px); 
  -webkit-transform: translate(0,60px);
  transition: .5s;
}
.upfadein1_tg {
  opacity: 1.0;
  transform: translate(0,0); 
  -webkit-transform: translate(0,0);
  transition: .5s;
}
.upfadein2 {
  opacity: 0;
  transform: translate(0,60px); 
  -webkit-transform: translate(0,60px);
  transition: .8s;
}
.upfadein2_tg {
  opacity: 1.0;
  transform: translate(0,0); 
  -webkit-transform: translate(0,0);
  transition: .8s;
}
.upfadein3 {
  opacity: 0;
  transform: translate(0,60px); 
  -webkit-transform: translate(0,60px);
  transition: 1.6s;
}
.upfadein3_tg {
  opacity: 1.0;
  transform: translate(0,0); 
  -webkit-transform: translate(0,0);
  transition: 1.6s;
}