@charset "UTF-8";
body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.8; }

header {
  background: #fff; }

.theimg__01 {
  -webkit-filter: blur(0px);
  -webkit-animation: fadein ease-in-out 1.4s;
  filter: blur(0px);
  animation: fadein ease-in-out 1.4s; }

.theimg__02 {
  -webkit-filter: blur(0px);
  -webkit-animation: fadein ease-in-out 1.6s;
  filter: blur(0px);
  animation: fadein ease-in-out 1.6s; }

.theimg__03 {
  -webkit-filter: blur(0px);
  -webkit-animation: fadein ease-in-out 1.8s;
  filter: blur(0px);
  animation: fadein ease-in-out 1.8s; }

.theimg__04 {
  -webkit-filter: blur(0px);
  -webkit-animation: fadein ease-in-out 2.0s;
  filter: blur(0px);
  animation: fadein ease-in-out 2.0s; }

.theimg__05 {
  -webkit-filter: blur(0px);
  -webkit-animation: fadein ease-in-out 2.2s;
  filter: blur(0px);
  animation: fadein ease-in-out 2.2s; }

@-webkit-keyframes fadein {
  0% {
    -webkit-filter: blur(10px);
    transform: scale(1.4);
    opacity: 0; }
  28% {
    -webkit-filter: blur(10px); }
  100% {
    -webkit-filter: blur(0px);
    transform: scale(1);
    opacity: 1; } }
#header {
  margin-bottom: 50px;
  position: relative; }
  #header .slider {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%; }
    #header .slider img {
      width: 100%; }
  #header h2 {
    position: relative;
    top: 35%; }
    #header h2 img {
      position: absolute;
      width: 40%;
      left: 7%; }

#header {
  /*headerを全画面で見せる*/
  width: 100%;
  height: 100vh;
  position: relative; }

#header:before {
  /*header の疑似要素に背景画像を指定*/
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  /*背景画像設定*/
  background: url("../img/vol3/bg_header.jpg") no-repeat center top 30px;
  background-size: cover; }

#ttl {
  padding: 30% 5%;
  width: 90%;
  text-align: center;
  background: #fff;
  margin-bottom: 0; }
  #ttl .sub1 {
    width: 38%;
    margin: 0 auto 9% auto; }
  #ttl .sub2 {
    width: 100%;
    margin: 0 auto; }
  #ttl .sub3 {
    width: 78%;
    margin: 0 auto 4% auto; }
  #ttl .vol {
    text-align: right;
    padding-right: 5%;
    margin-bottom: 10%; }
    #ttl .vol img {
      width: 20%; }
  #ttl h3 {
    margin-bottom: 10px; }
    #ttl h3 img {
      width: 90%; }

.inner {
  margin: 0 8%;
  margin-bottom: 30px; }
  .inner h4 {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
    letter-spacing: 0px;
    text-align: left; }
  .inner p {
    text-align: justify;
    margin-bottom: 20px; }
    .inner p span {
      display: block; }
  .inner dl dt {
    font-weight: 700;
    font-size: 14px; }
  .inner dl dd {
    font-size: 12px; }
  .inner dl dd.btn {
    margin-bottom: 20px;
    padding: 10px 0; }
    .inner dl dd.btn a {
      display: block;
      background: #7e7f5f;
      color: #fff;
      padding: 10px 5%;
      text-align: center;
      text-decoration: none;
      width: 90%;
      font-size: 14px; }
      .inner dl dd.btn a i {
        float: right;
        padding-top: 5px; }

/*下の被さるエリアの指定*/
.warp {
  position: relative;
  z-index: 1;
  /*以下はレイアウトのための記述*/
  background: #fff;
  text-align: center; }

section {
  margin-bottom: 50px;
  overflow: hidden; }

.btnArea {
  background: #fff;
  padding: 30px 8% 30px 8%;
  margin: 0; }

.btm-btn a {
  display: block;
  background: #7e7f5f;
  color: #fff;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 14px;
  text-align: center; }
  .btm-btn a i {
    float: right;
    padding-top: 5px; }
.btm-btn .pc {
  display: none; }
.btm-btn .sp {
  display: block; }
.btm-btn a:active {
  color: #fff; }
.btm-btn li {
  margin-bottom: 10px; }
  .btm-btn li img {
    height: 20px;
    vertical-align: middle; }

#sec1 .main {
  margin-bottom: 30px; }
#sec1 .slider {
  width: 100%;
  margin-left: 0%;
  margin-bottom: 30px; }
#sec1 .sub {
  width: 70%;
  margin-left: 8%;
  margin-bottom: 30px; }

#sec2 .main {
  margin-bottom: 30px; }
#sec2 .slider {
  width: 100%;
  margin-left: 0%;
  margin-bottom: 30px; }
#sec2 .sub {
  width: 70%;
  margin-left: 22%;
  margin-bottom: 30px; }

#sec3 .main {
  margin-bottom: 30px; }
#sec3 .slider {
  width: 100%;
  margin-left: 0%;
  margin-bottom: 30px; }
#sec3 .sub {
  width: 70%;
  margin-left: 22%;
  margin-bottom: 30px; }

#sec4 .main {
  margin-bottom: 30px; }
#sec4 .slider {
  width: 100%;
  margin-left: 0%;
  margin-bottom: 30px; }
#sec4 .sub {
  width: 70%;
  margin-left: 8%;
  margin-bottom: 30px; }

#sec5 .main {
  margin-bottom: 30px; }
#sec5 .sub {
  width: 70%;
  margin-left: 8%;
  margin-bottom: 30px; }

#sec6 .main {
  margin-bottom: 30px; }
#sec6 .slider {
  width: 100%;
  margin-left: 0%;
  margin-bottom: 30px; }
#sec6 .sub {
  width: 70%;
  margin-left: 22%;
  margin-bottom: 30px; }

#sec7 {
  margin-bottom: 0px; }
  #sec7 .main {
    margin-bottom: 30px; }
  #sec7 .slider {
    width: 100%;
    margin-left: 0%;
    margin-bottom: 30px; }
  #sec7 .sub {
    width: 70%;
    margin-left: 22%;
    margin-bottom: 30px; }

#sec8 .main {
  margin-bottom: 30px; }
#sec8 .slider {
  width: 100%;
  margin-left: 0%;
  margin-bottom: 30px; }
#sec8 .sub {
  width: 70%;
  margin-left: 22%;
  margin-bottom: 30px; }

#sec9 {
  margin-bottom: 0px; }
  #sec9 h4 {
    text-align: center;
    margin-bottom: 3%; }
    #sec9 h4 img {
      width: 70%; }
  #sec9 .read {
    margin: 0 8% 5% 8%;
    text-align: center; }
  #sec9 .main {
    margin-bottom: 30px; }
  #sec9 .slider {
    width: 100%;
    margin-left: 0%;
    margin-bottom: 30px; }
  #sec9 .sub {
    width: 70%;
    margin-left: 8%;
    margin-bottom: 30px; }

/*全共通*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  /*伸びる背景色の設定*/ }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0; }

.slide-in {
  overflow: hidden;
  display: inline-block; }

.slide-in_inner {
  display: inline-block; }

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/ }

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }