@charset "UTF-8";
.content--white,
.content--black{
  margin: 15em auto;
  text-align: center;
  width: 1040px;
  border: 1px solid;
  padding: 5em 0 0 0;
  position: relative;
}
.content--white::before{
  content: "WHITE";
  position: absolute;
  top: -30px;
  left: 30px;
  /* transform: translate(-50%, -50%); */
  /* -webkit-transform: translate(-50%, -50%); */
  -ms-transform: translate(-50%, -50%);
  width: 100px;
  height: 30px;
  background: #ffffff;
  border: 1px solid;
  font-family: futura-pt, sans-serif;
  font-size: 1.5rem;
}
.content--black::before{
  content: "BLACK";
  position: absolute;
  top: -30px;
  right: 30px;
  /* transform: translate(-50%, -50%); */
  /* -webkit-transform: translate(-50%, -50%); */
  -ms-transform: translate(-50%, -50%);
  width: 100px;
  height: 30px;
  background: #000000;
  /* border: 1px solid; */
  font-family: futura-pt, sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
}
#mainArea{
  letter-spacing: 0;
  line-height: 2;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
}
.bold{
  font-weight: 700 !important;
}
.blc{
  display: block;
}
.in-blc{
  display: inline-block;
}
.right{
  text-align: right;
}
.left{
  text-align: left;
}
.center{
  text-align: center;
}
.border{
  border-bottom: 1px solid #dddddd;
}
.v-m{
  vertical-align: middle;
}
.v-t{
  vertical-align: top;
}
.normal{
  font-style: normal;
}
.h_bar{
  display: none;
}
.f-13{
  font-size: 1.3rem;
}
.f-15{
  font-size: 1.5rem;
}
.f-18{
  font-size: 1.8rem;
}
.f-24{
  font-size: 2.4rem;
}
.f-en{
  font-family: futura-pt, sans-serif;
      font-weight: 500;
      font-style: normal;
      letter-spacing: 1px;
}
.f-ja {
  font-family: "Harmonia Sans W01", 'Josefin Sans', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
}
/* original */
.main--title{
  font-size: 6.0rem;
  line-height: 1.2;
  padding: 5% 0 0 0;
  color: white;
  text-shadow: 1px 1px #000, -1px 1px #000, -1px -1px #000, 1px -1px #000, 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;
  letter-spacing: 5px;
}
.content--title{
  -webkit-text-orientation: sideways;
  text-orientation: sideways;
  writing-mode: vertical-rl;
  text-align: left;
}
.lead--text{
  font-size: 1.5rem;
  margin: 5em auto 2em;
  position: relative;
}
.lead--text:after{
  content: "";
      position: absolute;
      top: 150%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      width: 50px;
      height: 1px;
      background: #000000;
}
.staff--name--flex{
  display: flex;
  -webkit-justify-content: end;
  justify-content: end;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 0 1em;
}
.staff--name{
  line-height: 1.5;
}
.staff--number{
  font-size: 55px;
  text-align: left;
  margin: 0 .5em 0 0;
  line-height: 1.5;
}
.staff--name{
  line-height: 1.5;
}
.number_ {
  position: relative;
  padding: 0;
  color: #0a223c;
  font-size: 15px;
  vertical-align: top;
}
.number_::after {
  top: 7px;
  left: 35px;
  position: absolute;
  width: 0;
  height: 25px;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #0a223c;
  font-size: 24px;
}
.point--text{
  -webkit-text-orientation: sideways;
  text-orientation: sideways;
  writing-mode: vertical-rl;
  text-align: left;
  margin: 6.3em 1em 0 .2em;
}
.point--text--2{
  -webkit-text-orientation: sideways;
  text-orientation: sideways;
  writing-mode: vertical-rl;
  text-align: left;
  margin: 0 1em 0 .2em;
}
.flex {
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.slide--area p{
  display: inline-block;
  color: #ffffff;
  padding: 0 .5em;
}
.sub--image{
  margin: -50px -90px 30px 0;
text-align: right;
}
.sub--image--2{
      margin: 3em 0 3em -5em;
}
.caption + .sub--image{
  margin: 0 -80px 30px 0;
text-align: right;
}
.content--area{
  margin: 0 0 8em 0;
}
.caption{
  text-align: left;
  margin: 5.6em 50px 0 -80px;
}
.flex + p{
  border-top: 1px solid;
  padding: 2em 0 0;
}
h4{
  text-align: left;

}
h4 + p{
  margin: 1.8em 0 0 0;
      border-top: 1px solid;
      padding: 2em 0 0 0;
      width: 88%;
}
.white{
  border: 1px solid #cccccc;
  width: 17px;
  height: 17px;
  display: inline-block;
  margin: 10px -5px 0 0;
  vertical-align: middle;
}
.black{
  width: 17px;
  height: 17px;
  display: inline-block;
  margin: 10px -5px 0 0;
  vertical-align: middle;
  background: #000000;
}
.item--right{
  position: relative;
      width: 38%;
      margin: 0;
}
.item--left{
  position: relative;
      width: 40%;
      margin: 0 2em;
      text-align: left;
}
.item--area{
  margin: 3em 0;
}
.item--text{
  text-align: left;
  margin: 0;
}
.link--area{
  margin: 2em 0 0;
  padding: 0;
  width: 88%;
}
.item--link{
  margin: 0 0 1em 0;
}
.item--link:last-child{
  margin: 0;
}
.item--name{
  width: 22em;
  display: inline-block;
  line-height: 1.5;
  vertical-align: middle;
}
.item--button {
  width: 58px;
  display: inline-block;
  float: right;
}
.item--button a{
  color: #ffffff;
  text-align: center;
  margin: 0;
  transition: all .3s;
  display: inline-block;
  text-decoration: none;
  font-size: 1.3rem;
  width: 100%;
  background: #000000;
}
.button--white,
.button--black{
  position: absolute;
  left: calc(50% - 350px);
  bottom: -40px;
}
.button--white a {
  color: #000000;
      text-align: center;
      padding: 3%;
      margin: 0;
      transition: all .3s;
      display: inline-block;
      text-decoration: none;
      font-size: 1.8rem;
      width: 700px;
      background: #ffffff;
      border: 1px solid;
}
.button--black a {
  color: #ffffff;
      text-align: center;
      padding: 3%;
      margin: 0;
      transition: all .3s;
      display: inline-block;
      text-decoration: none;
      font-size: 1.8rem;
      width: 700px;
      background: #000000;
      border: 1px solid;
}
.item--button a:hover,
.button--black a:hover{
  color: #000000;
  background-color: #ffffff;
  border: 1px solid;
}
.button--white a:hover{
  color: #ffffff;
  background-color: #000000;
}