@charset "UTF-8";


/* header
----------------------------------------*/
.header{
  padding: 40px 5%;
  background-color: #000;
}
.header-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}
.header-logo{
  width: 73%;
  order: 2;
}
.header-series{
  width: 25%;
}
.header-series span{
  display: inline-block;
  padding: 20px;
  background: linear-gradient(90deg,#63c4e4,#d467a1,#f1c155);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

@media screen and (max-width: 767px){
  .header{
    padding: 20px 5%;
  }
  .header-logo{
    width: 100%;
    order: 1;
  }
  .header-series{
    width: 100%;
    margin-top: 20px;
    order: 2;
  }
  .header-series span{
    display: block;
    padding: 8px 10px;
    font-size: 1.8rem;
  }
}


/* section
----------------------------------------*/
.section::before,
.section::after{
	content: "";
	display: block;
	clear: both;
}
.section{
  max-width: 800px;
  margin: 0 auto;
}
.section-inner{
  padding: 30px 7.5% 0;
}
.section-category{
  padding: 20px 10px;
  background-color: #d9d8e6;
  color: #332e99;
  font-size: 3.0rem;
  font-weight: 700;
  text-align: center;
}
.section-heading{
  margin-bottom: 30px;
  padding: 15px 0 15px 25px;
  border-left: solid 3px #332e99;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.4;
}
.section-text{
  padding-top: 20px;
  border-top: solid 1px #bfbecc;
}
.section-text-heading{
  margin: 10px 0 30px;
  color: #332e99;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
}
.section-text p + .section-text-heading{
  margin: 50px 0 30px;
}
.section-text p{
  margin-bottom: 1em;
  font-size: 1.6rem;
  line-height: 2;
}
.section-text p:last-of-type{
  margin-bottom: 0;
}
.section-person{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto 40px;
}
.section-person-image{
  width: 70.58823529411765%;
}
.section-person-caption{
  width: 47.05882352941176%;
  padding: 15px;
  background-color: rgba(255,255,255, 0.9);
  font-size: 1.5rem;
  line-height: 1.8;
  z-index: 10;
}
.section-person-caption span{
  font-size: 150%;
}
.section-person.right .section-person-image{
  order: 2;
}
.section-person.right .section-person-caption{
  margin-right: -17.64705882352941%;
}
.section-person.left .section-person-caption{
  margin-left: -17.64705882352941%;
}
.back{
  max-width: 230px;
  margin: 50px auto 0;
}
.back a{
  display: block;
  padding: 15px;
  background-color: #332e99;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: 0.8s;
}
.back a:hover{
  opacity: 0.7;
}

@media screen and (max-width: 767px){
  .section-inner{
    padding: 15px 0 0;
  }
  .section.pickup{
    padding: 0 10px 10px;
  }
  .section-category{
    font-size: 2.5rem;
  }
  .section-pickup-inner{
    padding: 15px;
  }
  .section-heading{
    margin-bottom: 20px;
    padding: 10px 0 10px 15px;
    font-size: 2.2rem;
  }
  .section-person{
    margin: 0 auto 20px;
  }
  .section-person-image{
    width: 100%;
  }
  .section-person-caption{
    width: 100%;
    margin: 0;
    padding: 15px 0 0 0;
    background-color: transparent;
    order: 2;
  }
  .section-person.right .section-person-image{
    order: 1;
  }
  .section-person.right .section-person-caption{
    margin-right: 0;
  }
  .section-person.left .section-person-caption{
    margin-left: 0;
  }
  .back{
    margin: 30px auto 0;
  }
}


/* figure
----------------------------------------*/
.figure-center{
  margin: 3.125em auto;
}
.figure-center-title{
  margin-bottom: 0.3em;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}
.figure-center-caption{
  margin-bottom: 0.5em;
  font-size: 1.5rem;
  line-height: 1.5;
}

@media screen and (max-width: 767px){
  .figure-center{
    margin: 2em auto;
  }
  .figure-center-title{
    font-size: 1.7rem;
  }
  .figure-center-caption{
    font-size: 1.4rem;
  }
}


/* logo
----------------------------------------*/
.section-logo{
  margin-top: 30px;
  padding-top: 50px;
  border-top: solid 1px #bfbecc;
}
.section-logo-image{
  margin: 0 auto;
  transition: 0.5s;
}
.section-logo-image.w300{
  max-width: 300px;
}
.section-logo-image:hover{
  opacity: 0.8;
}

@media screen and (max-width: 767px){
  .section-logo{
    margin-top: 20px;
    padding-top: 40px;
  }
  .section-logo-image.w300{
    width: 80%;
  } 
}