@charset "UTF-8";
/* ----------------------------------------
   ■ vol_03.css
---------------------------------------- */
#hero {
  background-image: url("../img/content/vol_05/img_hero_01.jpg");
  background-position: center top;
}

#hero .mainTitle > div .block2 h1 span:first-child {
  font-size: 1.8rem;
}

#hero .mainTitle > div .block2 h1 span:last-child {
  font-size: 3.2rem;
}

#doc1 {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
#doc1 .doc {
  width: 72.72727%;
}

#img0 {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin-top: -30px;
}
#img0 .ph {
  width: 50%;
}
#img0 .cap {
  width: calc(50% - 1em);
  padding-left: 1em;
}

#imgSet1 {
  position: relative;
  height: 450px;
}

#img1 {
  position: absolute;
  left: 0;
  top: -30px;
  width: 50.26738%;
}

#img2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40.64171%;
}

#doc2 {
  margin-top: 45px;
}
#doc2 .doc {
  width: 78.07487%;
  margin-left: 6.41711%;
}

#img3 {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin-top: -30px;
  width: 100%;
}
#img3 .img {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
#img3 .img + .img {
  margin-top: 30px;
}
#img3 .img:nth-child(even) .ph {
  order: 1;
}
#img3 .img:nth-child(even) .cap {
  order: 2;
  padding-right: 0;
  padding-left: 1em;
}
#img3 .img .ph {
  order: 2;
  width: 50%;
}
#img3 .img .cap {
  order: 1;
  padding-right: 1em;
}

#doc3 {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 50px;
}
#doc3 .doc {
  width: 72.19251%;
  margin-right: 3.74332%;
}

#img4 {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-top: -30px;
}
#img4 .img {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  width: 100%;
}
#img4 .img .ph {
  order: 1;
  width: 40%;
  margin-left: 4.06417%;
}
#img4 .img .cap {
  order: 2;
  padding-left: 1em;
}

#recommend .open dt {
  margin-top: 0.25em;
}
#recommend .open dd {
  font-feature-settings: "palt";
}

/* @media : PC
---------------------------------------- */
@media screen and (max-width: 975px) {
  #imgSet1 {
    height: 46vw;
  }
}
/* @media : SP
---------------------------------------- */
@media screen and (max-width: 768px) {
  #hero .mainTitle > div .block2 h1 span:first-child {
    font-size: 2.34375vw;
  }

  #hero .mainTitle > div .block2 h1 span:last-child {
    font-size: 4.5572916667vw;
  }

  #doc1 .doc,
  #doc2 .doc,
  #doc3 .doc {
    width: 95%;
    margin-right: 0;
    margin-left: 0;
  }

  #doc2,
  #doc3 {
    margin-top: 20px;
  }
}
@media screen and (max-width: 480px) {
  #hero .mainTitle > div .block1 p:first-child {
    font-size: 3.5416666667vw;
  }

  #hero .mainTitle > div .block1 p:last-child {
    font-size: 3.125vw;
  }

  #doc1 .doc,
  #doc2 .doc,
  #doc3 .doc {
    width: 100%;
  }

  #img0 {
    display: block !important;
    margin-top: 20px;
  }
  #img0 .ph {
    width: 100%;
  }
  #img0 .cap {
    width: 100%;
    margin-top: 10px;
    padding-left: 0;
  }

  #imgSet1 {
    display: block;
    height: auto;
  }

  #img1 {
    position: relative;
    top: auto;
    width: 100%;
    margin-top: 20px;
  }

  #img2 {
    position: relative;
    bottom: auto;
    width: 100%;
    margin-top: 20px;
  }

  #img3 {
    margin-top: 20px;
  }
  #img3 .img {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }
  #img3 .img .ph {
    order: 1;
    width: 100%;
  }
  #img3 .img .cap {
    order: 2;
    width: 100%;
    padding-right: 0;
  }
  #img3 .img .cap br {
    display: none;
  }

  #img4 {
    margin-top: 20px;
  }
  #img4 .img {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }
  #img4 .img .ph {
    width: 100%;
    margin-left: 0;
  }
  #img4 .img .cap {
    width: 100%;
    padding-left: 0;
  }
  #img4 .img .cap br {
    display: none;
  }
}