@charset "utf-8";

* {
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;

}

body {
    font-family:"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
    color:#000000;
    background:url(../img/base.jpg);
    background-size:contain;
    -webkit-text-size-adjust: 100%;
    line-height:2em;
    letter-spacing: 1px;
}

img {
    vertical-align: middle;
    font-size:0;
    line-height: 0;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a{
text-decoration:none;
color:#3E3A39;
}

a:hover{
filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}


li {
    list-style-type: none;
}

.clearfix:after{
    content:".";
    display: block;
    height:0px;
    clear:both;
    line-height:0;
    visibility:hidden;
}

.wrapper{
    width:960px;
    margin:0px auto;
    background:url(../img/contents_base.jpg);
    background-size:contain;
}


header{
    background:url(../img/main_title.png) no-repeat top 30px center;
    background-size:contain;
    padding:30px 50px;
}

.header_area{
    overflow:hidden;
}

.header_area .credit{
    float:left;
    width:40%;
    color:#231815;
    margin-top:500px;
    padding-left:30px;
}

.illust_credit{
    margin-top:30px;
}

.credit h2{
    font-weight: bold;
    font-size:26px;
}

.credit p{
    font-weight: normal;
    font-size:18px;
}

.credit p span{
    color:#9c0000
}

.header_area .yodogawa{
    float:right;
    width:60%;
    font-size:20px;
    font-weight: bold;
    line-height: 2em;
    margin-top:500px;
    color:#3e3a39;
}

h2.title{
    margin:60px 0px 40px;
}
.index_area{
    text-align: center;
    margin-top:50px;
}

.index_area h3{
    padding:15px;
}
.index_area ul{
    
  background:url(../img/line.png) no-repeat bottom center;
  background-size:804px 10px;
    padding-bottom:10px;
}

.index_area ul li{
    background:url(../img/line.png) no-repeat top center;
    background-size:804px 10px;
    padding:40px 0px 20px;
}
.left{
    float:left;
}

.right{
    float:right;
}



.pc_only{
    display:inline-block;;
}

.sp_only{
    display:none;
}




.copyright{
    text-align: center;
    padding-bottom:100px;
}

.txt_c{
    text-align: center;
}
.honbun{
    display:inline-block;
    text-align:left;
    margin:0px auto;
    font-size:20px;
    font-weight: bold;
    line-height:1.8em;
    letter-spacing: 2px;
}

.txt_area p{
    font-size:16px;
    line-height: 2em;
    letter-spacing: 2px;
    margin-bottom:2em;
    padding-left:110px;
}

.last{
    text-align:center;
    font-size:20px;
}

.last span{
    font-size:13px;
}
.sns_area{
    padding:30px 80px 40px;
    text-align: center;
}

.sns_area ul{
    overflow:hidden;
    margin:0px auto;
    display: inline-block;
}

.sns_area ul li{
    float:left;
    margin:0px 25px;
    text-align:center;
}

.img_area{
    padding-left:110px;
    margin-bottom:20px;
}
.img_area_c{
    text-align: center;
    margin-bottom:30px;
}

.photo {
	width: 600px;
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding-bottom: 30px;
	}

.img_r{
    float:right;
    margin-top:150px;
    margin-right:50px;
}
.pagenation{
    text-align:center;
    margin:70px 0px;
}
.pagenation ul{
    overflow:hidden;
    display: inline-block;
}

.pagenation ul li{
    float:left;
    margin:0px 40px;
    text-align:center;
}

.op50{
    opacity:0.5;
}

/* ------------------リンク色変更------------------ */
A:link {
	color: #34A7BC;
	text-decoration: none     /* 下線を消す */
}   /* リンク */

A:visited {                 /* 既に見たリンク */
	color: #34A7BC;
}

A:active {
	color: #34A7BC;
} /* クリック時のリンク */

A:hover {                   /* カーソルが上にある時のリンク */
	color: #34A7BC;
	text-decoration: none     /* 下線を消す */;
	float: none;
}

.hoverOp:hover {
	filter: alpha(opacity=40);
	opacity: 0.4;
}



@media screen and (max-width:768px){
  
.pc_only{
    display:none;
}

.sp_only{
    display:block;
}  

    img{
        max-width:100%;
    }

*{
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	letter-spacing:0em!important;
}
    .index_area{
        margin-top:30px;
    }
    
    h2.title{
        margin-bottom:20px;
    }
    .wrapper{
        width:100%;
        padding:0px 0px;
        margin:0px auto;
    }

 .pagenation ul{
    overflow:hidden;
    display: block;
}

.pagenation ul li{
    float:left;
    width:33%;
    text-align:center;
    margin:0px;
    padding:10px;
}
    
.sns_area ul{
    overflow:hidden;
    display: block;
}
.sns_area ul li {
    float: left;
    width: 25%;
    text-align: center;
    padding-bottom: 20px;
    margin: 0px 0px;
    padding:10px;
}
    
    .sns_area {
    padding: 0px 20px 40px;
}
    
    header{
    background:url(../img/main_title.png) no-repeat top 30px center;
    background-size:contain;
    padding:20px 0px;
}
    header{
        background:none;        
    }

    .header_area{
        padding:0px 0px;
    }
.header_area .credit{

    float:left;
    width:100%;
    color:#231815;
    margin-top:0px;
    padding-left:0px;
}
    
    .logo{
        width:30%;
        margin-left:15px;
    }
    .illust_credit{
        margin-top:0px;
    }
.illust_credit p{
    margin-top:-5px;
    font-size:14px!important;
}

    .credit_sp{
        width:55%;
        margin-top:0px;
        float:right;
        z-index:5;
        position:absolute;
        right:0px;
    }
    .credit{
        text-align: left;
        float:right;
    }
.credit h2{
    font-weight: bold;
    font-size:20px;
}

.credit p{
    font-weight: normal;
    font-size:16px;
}

.credit p span{
    color:#9c0000
}
.last{
    text-align:center;
    font-size:16px;
}
.header_area .yodogawa{
    float:right;
    width:100%;
    font-size:16px;
    font-weight: bold;
    line-height: 2em;
    margin-top:120px;
    padding:0px 15px;
    color:#3e3a39;
}    
.txt_area p{
    font-size:16px;
    line-height: 2em;
    letter-spacing: 2px;
    margin-bottom:2em;
    padding-left:0px;
    padding:0px 15px;
}
    
    .img_area{
    padding-left:0px;
    margin-bottom:20px;
}
    
    .w50p{
        max-width:50%;
    }
    
    .w80p{
        max-width: 80%;
        padding-left:15px;
    }
    
.index_area ul{
    
  background:url(../img/line_sp.png) no-repeat bottom center;
  background-size:contain;
    padding-bottom:10px;
}

.index_area ul li{
    background:url(../img/line_sp.png) no-repeat top center;
    background-size:contain;
    padding:40px 30px 20px;
}    
}

@media (max-width: 500px){
    
  .photo {
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding-bottom: 30px;
	}  
.photo img {
	width: 100%;
	height: auto;
	}


}