@import url("../../css/cssreset.css");
@import url("../../css/base.css");
@import url("../../css/navigation.css");
@import url("../../css/contents.css");


/*--------------------------------------*/
/* story */
/*--------------------------------------*/
/* styles.css */
/*--------------------------------------*/

/* section title */
#section_title {
    background:url("../images/h1_tile_bg.png");
}
#section_title_inner {
    background:url("../images/h1_bg.jpg") no-repeat center top;
}

#story #section_title_inner .h1_bg {
    width:100%;
    background:rgba(0,0,0,0.5);
    margin:0 auto;
    padding:40px 0;
}
#story #section_title_inner h1 {
    background:url("../../images/common/title_lead_line.png") no-repeat center bottom;
    margin:0 auto;
    padding-top:0;
    padding-bottom:15px;
    text-align:center;
    line-height:1.0;
    font-size:1.8em;
    font-weight:bold;
}
#story #section_title_inner .lead {
    background:none;
    padding-top:50px;
}
#story #section_title_inner .lead p {
    width:100%;
    margin:0 auto;
    text-align:center;
    line-height:1.4;
    font-size:3.4em;
    font-weight:bold;
    color:#000000;
}

#story .section {
    margin:0 auto 2em;
}
#story .section.images {
    background:#f0f0f0;
    margin:0 auto 80px;
    padding:40px 0;
}
#story .section.future {
    margin:0 auto 80px;
}

#story .section h2 {
    position:relative;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    text-align:left;
}
#story .section h2 span {
}
#story .section h2:after {
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:4em;
    height:1px;
    background:#d0cdd5;
    margin-top:auto;
    margin-bottom:auto;
    margin-left:1.8em;
    content:"";
}
#story h3,
#story p {
    margin-left:3.5rem;
}
#story h4 {
    margin-bottom:3em;
    text-align:center;
    font-size:1.4em;
}
#story .section.future p {
    margin-left:0;
}

#story .section.images ul {
    width:84%;
    max-width:1000px;
    margin:0 auto;
    letter-spacing:-0.5em;
}
#story .section.images ul li {
    display:inline-block;
    width:47%;
    margin-right:6%;
    letter-spacing:normal;
}
#story .section.images ul li:nth-child(even) {
    margin-right:0;
}


/* link */
a.next {
    display:inline-block;
    background:#e94709 url("../../images/common/arrow.png") no-repeat right center;
    padding:0.5em 100px 0.5em 1em;
    font-family:'Barlow Condensed', sans-serif;
    font-size:1.3em;
    color:#ffffff;
}
a.next:hover {
    background-color:#f07e52;
    text-decoration:none;
}
a.back {
    display:inline-block;
    background:#e94709 url("../../images/common/arrow_back.png") no-repeat left center;
    padding:0.5em 2em 0.5em 100px;
    font-family:'Barlow Condensed', sans-serif;
    font-size:1.3em;
    color:#ffffff;
}
a.back:hover {
    background-color:#f07e52;
    text-decoration:none;
}



/* - 1100px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 1100px) {








}
/* - 1100px end */





/* - 768px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 768px) {


/* section title */
#section_title_inner {
    background:url("../images/h1_bg_sp.jpg") no-repeat center bottom;
    background-size:cover;
}
#story #section_title_inner .h1_bg {
    padding:4em 0;
}
#story #section_title_inner h1 {
}
#story #section_title_inner .lead {
    padding-top:7em;
}

#story h3,
#story p {
    margin-left:0;
}

#story .section.images {
    padding:8% 0;
}
#story .section.images ul li {
    width:48%;
    margin-right:4%;
}

}
/* - 768px end */





/* - 750px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 750px) {

/* section title */
#story #section_title_inner {
    padding-top:0;
}
#story #section_title_inner h1 {
    font-size:1.6em;
}
#story #section_title_inner .lead p {
    font-size:2.8em;
}




}
/* - 750px end */




/* - 640px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 640px) {



#story .section.images ul li {
    display:block;
    width:100%;
    margin-right:0;
    margin-bottom:4%;
}
#story .section.images ul li:last-child {
    margin-bottom:0;
}



}
/* - 640px end */




/* - 375px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 375px) {

/* section title */
#story #section_title_inner .lead {
    padding-top:5em;
}
#story #section_title_inner .lead p {
    font-size:2.0em;
}





}
/* - 375px end */




/* - 320px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 320px) {




a.back {
    padding:0.5em 1.5em 0.5em 100px;
    font-size:1.2em;
}

}
/* - 320px end */