@charset "utf-8";

.wrap{margin:0 auto;}

mark{color:#6902b9;}

.rowfull{display:inline-block; width:100%; vertical-align:top;}
.inner{max-width:800px; margin:0 auto;}


img{display:inline-block; vertical-align:top;}

h2{max-width:1024px; margin:3rem auto; padding:0 7rem; font-size:3.3rem; font-weight:800; line-height:1.25; font-family: 'Domine', serif;}
h2 i{font-style: italic;}

.inner h2{padding:0;}

p{margin:2.5rem 0; font-size:1.4rem; line-height:1.6; font-weight:400;}



#area01{}
#area01 .el{position:relative; float:left; width:50%;}
#area01 .el span{position:absolute; right:0; bottom:0; padding:3rem; font-size:2rem; line-height:1.5; background:#f5fd01; color:#111;}


#area02{position:relative; font-size:0;}
#area02 img{float:left; width:50%;}
#area02 span{position:absolute; width:50%; min-height:calc(726px - 538px); right:0; bottom:0; padding:3rem; font-size:2rem; line-height:1.5; background:#f5fd01; color:#111;}




#area03{position:relative; max-width:1600px; margin:0 auto;}
#area03 img{float:left; width:50%;}
#area03 span{display:inline-block; width:100%; padding:2rem; font-size:2rem; text-align:right; line-height:1.5; background:#f5fd01; color:#111;}


#area04{position:relative;}
#area04 span{position:absolute; width:50%; height:100%; left:50%; top:0; padding:5rem 9rem; font-size:2.3vw; line-height:1.5; background:#f5fd01; color:#6902b9; font-family: 'Domine', serif;}



@media(max-width:1600px){
    #area04 span br{display:none; padding:3rem 7rem;}
}


@media(max-width:960px){
    br{display:none;}

    h2{padding:0 1rem;}

    .inner{margin:0 1rem; max-width:100%;}

    #area01 .el{width:100%;}
    #area01 .el span{position:relative; display:block;}

    #area02 img{float:none; width:100%;}
    #area02 span{position:relative; display:block; width:100%; min-height:0; height:auto;}

    #area03 img{float:none; width:100%;}
    #area03 span{text-align:left;}

    #area04 span{position:relative; display:block; width:100%; left:0; padding:3rem; font-size:2rem;}
}