@charset "UTF-8";

   /* ------------------------main------------------------ */

#main #main_visual {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background:url("../images/main.jpg");
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position:relative;
}

   /* ------------------------detail_container------------------------ */

#detail_container {
    width:100%;
    margin:0 auto 100px auto;
}
#detail_container #name {
    margin:0 0 20px 0;
    text-align:center;
}
#detail_container #name h2 {
    font-size:1.8rem;
    line-height:140%;
    letter-spacing:2px;
}
#detail_container #name p {
    font-size:1.4rem;
    line-height:140%;
    letter-spacing:2px;
}
#detail_container>div {
    margin:0 auto 50px auto;
}
#detail_container>div figure {
    margin:0 auto 15px auto;
}
#detail_container>div p {
    margin:0 auto;
}
#detail_container>div p.credit {
    text-align:center;
}
#detail_container>div p.credit span {
    margin:0 0 0 10px;
    padding:3px 7px;
    background:#a9a9a9;
    display:inline-block;
    line-height:100%;
}
#detail_container>div h3 {
    margin:0 auto 5px auto;
    font-size:1.4rem;
    line-height:140%;
    letter-spacing:2px;
    text-align:center;
}
#detail_container #img01 {
    width:90%;
}
#detail_container #img02 p {
    width:90%;
}
#detail_container #img03 {
    width:90%;
}
#detail_container #img03 figure {
    width:80%;
}
#detail_container #img04 {
    width:90%;
}
#detail_container #img_box{
    width:100%;
}
#detail_container #img05 {
    width:90%;
    margin:0 auto 50px auto;
}
#detail_container #img05 figure {
    width:80%;
}
#detail_container #img06 {
    width:90%;
    margin:0 auto 50px auto;
}
#detail_container #img06 figure {
    width:80%;
}
#detail_container #img07 {
}

/*-----------------------------------------------------------------------------------

PC

-----------------------------------------------------------------------------------*/

@media screen and (min-width: 769px) {


   /* ------------------------main------------------------ */

#main #main_visual {
    width:980px;
    height:640px;
    min-height: auto;
    margin:0 auto;
    background:url("../images/main_pc.jpg");
   background-size: 100%;
}

   /* ------------------------detail_container------------------------ */

#detail_container {
    max-width:980px;
}
#detail_container>div>p {
    text-align:center;
}
#detail_container #img_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}
#detail_container #img05 {
    width:45%;
}
#detail_container #img05 figure {
    width:100%;
}
#detail_container #img06 {
    width:45%;
}
#detail_container #img06 figure {
    width:100%;
}
}