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

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

#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;
  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 .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 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 {
    background-image: url("../img/content/vol_02/img_hero_01_sp.jpg");
  }

  #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) {
  #doc1 .doc,
  #doc2 .doc,
  #doc3 .doc {
    width: 100%;
  }

  #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;
  }
}