@charset "utf-8";




/* ==========================================================================
	main
========================================================================== */
#main{
	width:1100px;
	margin:0 auto;
	padding:0px 0 130px;
	position:relative;
	}
#main_illust{
	display:none;
	width:136px;
	position:absolute;
	bottom:115px;
	left:110px;
	z-index:9997;
	-webkit-animation-name:lr; 
	-webkit-animation-duration:1.5s;
	-webkit-animation-timing-function:ease-in-out;
	-moz-animation-name:lr;
	-moz-animation-duration:1.5s;
	-moz-animation-timing-function:ease-in-out;
	}

@keyframes lr{
  0% { left: 50px; }
  100% { left:110px;}
}

@-webkit-keyframes lr {
  0% { left: 50px; }
  100% { left:110px;}
}


@-moz-keyframes lr{
  0% { left: 50px; }
  100% { left:110px;}
}


#main .bxslider{
	width:1100px !important;
	margin:0 auto;
	position:relative;
	
	}
#main .bxslider:before{
	content:"";
	display:block;
	padding-top:45%;
	}
.mtbg{
	display:block;
	position:absolute;
	top:0;
		padding:0 !important;
	z-index:9996 !important;
	width:100% !important;
	/*
	height:720px!important;
	
	background:url(../image/main1.jpg) top center no-repeat;
	*/
	background-size:cover !important;
	background-position:center center !important;
	background-size:100% !important\9;
	-moz-border-radius: 100px;/*角丸指定*/
	-webkit-border-radius: 100px;/*角丸指定*/
	border-radius: 100px;/*角丸指定*/
}

.bx-wrapper {
    position: relative;
	margin:0 auto;
	width:1100px;
}
.bx-viewport {
	margin:0 auto;
	width:1100px;
}

.bx-wrapper img {
    width:100%;
}
.bx-pager a {
	background: #fff;
	text-indent: -9999px;/*数字表示をブラウザ外に押しやる*/
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 10px;
	-moz-border-radius: 5px;/*角丸指定 四隅を丸くすることで10pxの●に*/
	-webkit-border-radius: 5px;/*角丸指定*/
	border-radius: 5px;/*角丸指定*/
}
.bx-pager a:hover,
.bx-pager a.active {
	background: #000;
}
@media screen and ( max-width: 1130px ) {
#main{
	width:calc(100% - 30px) !important;
	
	}

#main .bxslider{
	width:100% !important;
	margin:0 auto;
	position:relative;
	}
.bx-viewport {
	margin:0 auto;
	width:100%;
}

	
	}
@media screen and ( max-width: 780px ) {
	
	
#main{
	width:100% !important;
	padding:0px 0 60px;
	}
#main_illust{
	display:none;
	width:100px;
	position:absolute;
	bottom:50px;
	left:30px;
	z-index:9997;
	-webkit-animation-name:lr; 
	-webkit-animation-duration:1.5s;
	-webkit-animation-timing-function:ease-out;
	
	-moz-animation-name:lr;
	-moz-animation-duration:1.5s;
	-moz-animation-timing-function:ease-out;
	}

@keyframes lr{
  0% { left: -50px; }
  100% { left:30px;}
}

@-webkit-keyframes lr {
  0% { left: -50px; }
  100% { left:30px;}
}


@-moz-keyfra{
  0% { left: 50px; }
  100% { left:110px;}
}


#main .bxslider{
	width:100% !important;
	margin:0 auto;
	position:relative;
	}

.bx-wrapper .bx-pager {
		bottom:25px;

}
.mtbg{
	background-size:cover !important;
	-moz-border-radius: 0px;/*角丸指定 四隅を丸くすることで10pxの●に*/
	-webkit-border-radius: 0px;/*角丸指定*/
	border-radius: 0px;/*角丸指定*/
	
	}
#main .bxslider:before{
	padding-top:66%;
	}

}


/* ==========================================================================
	works
========================================================================== */
#works{
	width:100%;
	position:relative;
	box-sizing:border-box;
	background:url(../image/works_bg.jpg) left top;
	padding:85px 0 0;
	box-sizing:border-box;
	
}		
#works h1{
	width:400px;
	position:absolute;
	left:0;
	right:0;
	top:-30px;
	margin:auto;
}

#works p{
	font-size:14px;
	line-height:32px;
	text-align:center;
	margin-bottom:65px;
	}


#works .works_item_area{
	width:100%;
	position:relative;
	padding:70px 0 80px;
	background:#f6f6f6;
	}
#works .works_list{
	width:calc(100% - 30px);
	max-width:880px;
	position:absolute;
	left:0;
	right:0;
	top:-20px;
	margin:auto;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
	}

#works .works_list li{
	width:18%;
	padding:10px 0;
	background:#fff;
	color:#dd4d3a;
	text-align:center;
	box-sizing:border-box;
	
	border-radius: 40px;        /* CSS3草案 */  
	-webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 40px;   /* Firefox用 */
	border:2px solid #dd4d3a;
	}
#works .works-item{
	margin:0 auto 40px;
	width:100%;
	position:relative;
	}
	
	/*
#works .works-item:before{
	content:"";
	display:block;
	position:absolute;
	right:0;
	top:0;
	width:14%;
	z-index:10;
	height:100%;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(247,244,230,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(247,244,230,1) 100%); 
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(247,244,230,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f7f4e6',GradientType=1 );
	}
#works .works-item:after{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:14%;
	z-index:10;
	height:100%;
background: -moz-linear-gradient(left, rgba(247,244,230,1) 0%, rgba(255,255,255,0) 100%); 
background: -webkit-linear-gradient(left, rgba(247,244,230,1) 0%,rgba(255,255,255,0) 100%); 
background: linear-gradient(to right, rgba(247,244,230,1) 0%,rgba(255,255,255,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f4e6', endColorstr='#00ffffff',GradientType=1 ); 
}
	*/
#works .list{
	display:block;
	margin:0 10px;
	padding:9px 0 10px;
	box-sizing:border-box;
	}

#works .list:before{
	content:"";
	display:block;
	position:absolute;
	width:14px;
	height:36px;
	top:0px;
	left:20px;
	z-index:100;
	background:url(../image/clip.png) center center no-repeat;
	background-size:cover;
	}

#works .list_inr{
	padding:20px 10px 40px 20px;
	background:#fff;
	width:100%;
	box-sizing:border-box;
	background:#fff;
	position:relative;
	min-height:310px;
	-webkit-box-shadow: 0px 2px 1px 1px rgba(212,212,212,0.6);
-moz-box-shadow: 0px 2px 1px 1px rgba(212,212,212,0.6);
box-shadow: 0px 2px 1px 1px rgba(212,212,212,0.6);
	}
#works .list .works{
	width:100%;
	position:relative;
	background-size:cover;
	
	}

#works .list .works_img{
	background-size:cover;
	background-position:center center;
	
	}
#works .list .works_img:before{
	content:"";
	display:block;
	padding-top:60%;
	}
	
#works .list h2{
	text-align:center;
	font-size:16px;
	margin:20px 0 22px;
	color:#2b2b2b
	}
	

#works .list .tag{
	padding:8px 10px;
	text-align:center;
	display:inline-block;
	margin-bottom:4px;
	border:1px solid #505050;
	font-size:10px;
	color:#505050;
	text-align:center;
	margin-right:2px;
	border-radius:25px;
	}
@media all and (-ms-high-contrast: none){
 #top_news .list h2:not(:target) {
	padding-top:8px;
  }
}
	
	
@media screen and ( max-width: 780px ) {	
#works{
	width:100%;
	position:relative;
	box-sizing:border-box;
	background:url(../image/works_bg.jpg) left top;
	padding:65px 0 0;
	box-sizing:border-box;
	
}		
#works h1{
	width:90%;
	max-width:360px;
	position:absolute;
	left:0;
	right:0;
	top:-25px;
	margin:auto;
}

#works p{
	font-size:13px;
	line-height:2.25em;
	width:calc(100% - 30px);
	margin:0 auto 50px;
	}


#works .works_item_area{
	width:100%;
	position:relative;
	padding:70px 0 80px;
	background:#f6f6f6;
	}
#works .works_list{
	width:calc(100% - 20px);
	max-width:880px;
	position:absolute;
	left:0;
	right:0;
	top:-20px;
	margin:auto;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
	}

#works .works_list li{
	width:31%;
	font-size:12px;
	padding:8px 0;	
	border-radius: 34px;        /* CSS3草案 */  
	-webkit-border-radius: 34px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 34px;   /* Firefox用 */
	border:2px solid #dd4d3a;
	}

#works .works_list li:first-child{
	margin-left:17%;
	margin-bottom:3.5%;
	}
#works .works_list li:nth-child(2){
	margin-right:17%;
	margin-bottom:3.5%;
	}


#works .works-item{
	margin:0 auto 70px;
	width:100%;
	position:relative;
	}

#works .works_item_area{
	padding:100px 0 45px;
	}
	
#works .list_inr{
	min-height:380px;
	}
	
#works .list .works_img:before{
	content:"";
	display:block;
	padding-top:57%;
	}
	
#works .list h2{
	text-align:center;
	font-size:16px;
	margin:20px 0 22px;
	color:#2b2b2b
	}
	

#works .link_btn{
	width:calc(100% - 30px);
	}
/*
#top_nsfb #top_fb {
	width:100%;
	float:none;
	margin-top:30px;
	}
*/
	}
	
	

/* ==========================================================================
	if
========================================================================== */
#if{
	width:100%;
	padding:80px 0 0;
	}

#if h1{
	width:488px;
	margin:0 auto;
	}
#if h1:after{
	content:"IF THE WRITER SERIES";
	margin-bottom:20px;
	}

#if p{
	font-size:14px;
	line-height:32px;
	text-align:center;
	}

#if .if_wrap{
	width:100%;
	margin:45px auto 0;
	background:url(../image/works_bg.jpg) left top;
	padding:68px 0 128px;
	}
	
#if .if_con{
	display:block;
	margin:0 auto;
	width:calc(100% - 30px);
	max-width:1000px;
	padding-left:20px;
	box-sizing:border-box;
	position:relative;
	}

#if .if_con:hover{

filter: alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
#if .if_con .moshimo{
	display:block;
	color:#2eb7cb;
	font-size:16px;
	font-style:italic;
	padding-left:38px;
	position:relative;
	}

#if .if_con .moshimo:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
	width:23px;
	height:18px;
	background:url(../image/moshimo_icon.png);
	background-size:cover;
	}
#if .if_con h2{
	width:260px;
	margin:50px 0 8px;
	}
#if .if_con h3{
	width:380px;
	margin:0 0 58px;
	}
#if .if_con .link_btn{
	margin:0;
	
	}
	
.if_con:hover .link_btn{
	color:#dd4d3a;
	background:#fff;
	border:2px dotted #dd4d3a;
	}
.if_con:hover .link_btn:before{
	right:26px;
	background:url(../image/btn_ar_af.png);
	}
#if .if_con .moshimo_img{
	width:656px;
	position:absolute;
	right:20px;
	top:-20px;
	z-index:-1;
	}
	

#if .if_con .moshimo_img:after{
	content:"";
	display:block;
	position:absolute;
	width:154px;
	height:231px;
	right:18px;
	bottom:-26px;
	background:url(../image/moshimo_illust.png);
	background-size:cover;
	-webkit-transition: right 0.4s ease;
    -moz-transition: right 0.4s ease;
    -o-transition: right 0.4s ease;
    transition: right 0.4s ease;
	}
#if .if_con:hover .moshimo_img:after{
	right:50px;
	}
	
	
@media screen and ( max-width: 780px ) {	

#if{
	width:100%;
	padding:80px 0 0;
	}

#if h1{
	width:90%;
	max-width:360px;
	margin:0 auto;
	}
#if h1:after{
	content:"IF THE WRITER SERIES";
	margin:5px 0 15px;
	}

#if p{
	font-size:13px;
	line-height:2.25em;
	width:calc(100% - 30px);
	margin:0 auto;
	}
	

#if .if_wrap{
	margin:20px auto 0;
	padding:30px 0 45px;
	}
	
#if .if_con{
	padding-left:0px;
	}

#if .if_con .moshimo{
	display:block;
	width:195px;
	box-sizing:border-box;
	color:#2eb7cb;
	text-align:center;
	margin:0 auto;
	font-size:14px;
	padding-left:34px;
	}
.Android #if .if_con .moshimo,
.iPhone #if .if_con .moshimo{
	
	width:175px;
	}

#if .if_con .moshimo:before{
	width:21px;
	height:17px;
	}
#if .if_con h2{
	width:240px;
	margin:20px auto 0px;
	}
#if .if_con h3{
	width:100%;
	max-width:350px;
	margin:0 auto 25px;
	}
#if .if_con .link_btn{
	margin:0;
	
	}
	
.if_con:hover .link_btn{
	color:#dd4d3a;
	background:#fff;
	border:2px dotted #dd4d3a;
	}
.if_con:hover .link_btn:before{
	right:26px;
	background:url(../image/btn_ar_af.png);
	}
#if .if_con .moshimo_img{
	width:100%;
	position:relative;
	right:auto;
	top:auto;
	z-index:-1;
	margin-bottom:48px;
	}
	

#if .if_con .moshimo_img:after{
	content:"";
	display:block;
	position:absolute;
	width:113px;
	height:171px;
	right:0;
	bottom:-25px;
	}
#if .if_con:hover .moshimo_img:after{
	right:20px;
	}	

}



/* ==========================================================================
	blog
========================================================================== */
#blog{
	padding:80px 0;
	background:#f6f6f6;
	}
#blog h1{
	width:95px;
	}
#blog h1:after{
	content:"BLOG";
	margin-bottom:20px;
	}

#blog ul{
	width:calc(100% - 30px);
	max-width:1000px;
	margin:60px auto 50px;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
	}

#blog ul li{
	width:22.3%;
	position:relative;
	}
	
#blog ul li a{
	display:block;
	width:100%;
	}

#blog ul li a .new{
	position:absolute;
	top:-6px;
	left:10px;
	width:47px;
	}
#blog ul li a .img_area{
	width:100%;
	position:reltaive;
	-moz-border-radius: 25px;/*角丸指定*/
	-webkit-border-radius: 25px;/*角丸指定*/
	border-radius: 25px;/*角丸指定*/
	background-size:cover;
	background-position:center center;
	box-sizing:border-box;
	margin-bottom:17px;
	}
	
#blog ul li a .img_area:before{
	content:"";
	display:block;
	padding-top:70%;
	}
	
#blog ul li a .day{
	color:#dd4d3a;
	font-size:10px;
	font-weight:bold;
	letter-spacing:0.08em;
	}
	
#blog ul li a h2{
	fotn-size:14px;
	font-weight:bold;
	color:#2b2b2b;
	line-height:1.5em;
	letter-spacing:0.08em;
	margin:9px 0 10px;
	}
	
#blog ul li a p{
	font-size:11px;
	line-height:20px;
	height:50px;
	color:#808080;
	}
	
#blog ul li .textOverflow img{display:none;}
@media screen and ( max-width: 780px ) {
#blog{
	padding:45px 0;
	background:#f6f6f6;
	}
#blog h1{
	width:70px;
	}
#blog h1:after{
	margin-bottom:15px;
	}	



#blog ul{
	max-width:1000px;
	margin:35px auto 15px;
	}

#blog ul li{
	width:47.5%;
	margin-bottom:15px;
}
	
#blog ul li a{
	display:block;
	width:100%;
	}

#blog ul li a .new{
	top:-3px;
	left:5px;
	width:40px;
	}
#blog ul li a .img_area{
	-moz-border-radius: 20px;/*角丸指定*/
	-webkit-border-radius: 20px;/*角丸指定*/
	border-radius: 20px;/*角丸指定*/
	background-size:cover;
	background-position:center center;
	box-sizing:border-box;
	margin-bottom:12px;
	}
	
#blog ul li a .img_area:before{
	padding-top:62.5%;
	}
	
	
#blog ul li a h2{
	fotn-size:13px;
	font-weight:bold;
	color:#2b2b2b;
	line-height:1.5em;
	letter-spacing:0.08em;
	margin:5px 0 8px;
	}
	
#blog ul li a p{
	font-size:11px;
	line-height:20px;
	height:70px;
	color:#808080;
	}
#blog .link_btn{
	width:calc(100% - 30px);
	}


}