﻿@charset "UTF-8";
/* ======================================================== */
/*  ALL */
/* ======================================================== */
/* ----------------------------------------
   base
---------------------------------------- */

html,body {
    height: 100%;
}

img{
	
	max-width:100%;}
	
	
/** PC版 **/
@media screen and (min-width: 769px) {
body {
	background:url(../../img/left_bg.jpg) 0 0 repeat-y;
}

#wrapper{
    margin: 0 auto;
position:relative;	
	}
	
	

#wrapper #left_area h1{
	width:90%;
	position:relative;
	z-index:100;
}
#wrapper #left_area nav li:nth-child(7){
	background:url(../../img/navi_arrow.png) 0 0 no-repeat;
	background-size:12%;
}

#wrapper #main_area{
	
		
	float:right;
	padding-top:66px;
	padding-bottom:50px;
	background:url(../img/main_bg.jpg) 0 0 repeat-y;
	background-size:contain;
	width:78%;
	/*margin-right:-5%;*/
height:100%;
	position:relative;
	overflow:hidden;
	}
	
#main_area .content{
	max-width:760px;
	width:70%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
	padding-top:65px;
	background:url(../../img/top_bg.gif) 0 0 repeat-x;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:50px;
}


/** インデックス **/
.mainarea_index{
	padding-bottom:300px!important;
}
#index .special{
	padding-bottom:50px;
	
}
#index .special ul{
	margin-top:30px;
}
#index .special li{
	padding-top:30px;
	padding-bottom:30px;
	border-top:1px solid #000;
}
#index .special li:last-child{
	border-bottom:1px solid #000;
}
#index .special li .banner{
	width:33%;
	float:left;
	margin-left:6%;
}
#index .special li .textarea{
	width:50%;
	float:left;
	margin-right:-5%;
}
#index .special li .textarea p{
	color:#000;
	text-decoration:none;
	padding-left:0px!important;
	text-indent:0;
	font-size:18px;
}
#index .special li .textarea .ttl{
	font-size:18px;
	background-color:#892a83;
	color:#FFF;
	padding:0.3em!important;
	line-height:1;
	display:inline-block;
	margin-bottom:15px;
}







#main_area .content h2{
	text-align:center;
	
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .content .leaf{
	position:absolute;
	top:-50px;
	right:70px;
	width:50%;
	z-index:1;
}

#main_area .content h3{
	position:relative;
	margin-top:15px;
}
#main_area .content h3 p{
	position:absolute;
	top:-20px;
	left:0px;
	width:100%;
	text-align:center;
}

#main_area .content .logo{
	width:40%;
	margin: 1% auto;
	}


#main_area .content h3 p img{
	width:auto;
}

#main_area .content .special p{

font-size:15px;
line-height:1.8;
text-indent:-3em;
padding-left:3em!important;
}


#main_area .content .special p span{


}


#main_area .content .special p.intv{

font-size:18px;
color:#018cca;
padding:4% 0;
clear:both;

text-indent:-2.5em;
padding-left:2.5em!important;

}


#main_area .content .special p.ans{
padding:0 0 3% 0;
}

#main_area .content .special .fl{
float:left;
width:48%;
}


#main_area .content .special .fr{

float:right;
}

#main_area .content .special .pic{

width:40%;
text-align:left;
margin-right:-50px;

}

#main_area .content .special .pic_l{

clear:both;

width:100%;
padding-bottom:2%;
}



#main_area .content .special .profile{
width:85%;
background:#298ecb;
margin: 5% auto 2% auto;
padding:3% 3%;
color:#fff;
}


#main_area .content .special .profile p{
text-indent:0;
padding:0!important;
}

#main_area .content .special .profile span{
font-size:16px;
padding-bottom:0.5em;
display:block;
}


#main_area .content .special .profile .suzuki,#main_area .content .special .profile .umehara{
width:46%;
float:left;
padding:0 2%;
}

#main_area .content .special .profile .suzuki{
float:left;

}


#wrapper #main_area .cap{
	float:right;
	font-size:80%;
padding-right:5%;
}




/** vol2 **/
#vol2 .lead{
	font-size:22px;
	color:#018cca;
	font-weight:bold;
	margin-top:25px;
	margin-bottom:40px;
}
#vol2 .lead span{
	color:#892a83;
	
}
#vol2 .detail{
	background-color:#FFF;
	padding:3%;
}
#vol2 .detail li p{
	font-size:18px;
	display:table-cell;
	vertical-align:top;
	line-height:2!important;
}
#vol2 .detail li p:nth-child(1){
	padding-right:1em;
	width:6em;
}
#vol2 .detail .twitter{
	width:65%;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:30px;
}
#vol2 .detail .twitter .ttl{
	font-size:23px;
	color:#00a6ed;
	display:inline-block;
	font-weight:bold;
}
#vol2 .detail .twitter .ttl img{
	margin-right:10px;
	margin-bottom:-8px;
}
#vol2 .detail .twitter .link a{
	font-size:18px;
	color:#018cca;
	text-decoration:underline;
	display:block;
	margin-top:10px;
	margin-bottom:10px;
}
#vol2 .detail .twitter .link a:hover{
	text-decoration:none;
}

#vol2 .detail .twitter ul{
	margin-left:1em;
	
}
#vol2 .detail .twitter li{
	font-size:14px;
	text-indent:-1em;
	margin-bottom:5px;
}
.btn_top a{
	display:block;
	background:url(../img/vol2/btn_arrow.gif) 15px center no-repeat;
	background-color:#000;
	color:#FFF;
	font-size:18px;
	text-align:center;
	width:45%;
	margin:0 auto;
	padding-top:1em;
	padding-bottom:1em;
	margin-top:40px;
	text-decoration:none;
}
.btn_top a:hover{
	opacity:0.7;
}



}

@media screen and (max-width: 768px) {
	html,body {
	height:auto;
}
#wrapper{
	height:auto;
	position:relative;
	background-color:#faf6e9;
}
#wrapper #main_area{
	
		
	padding-top:30px;
	padding-bottom:150px;
	background:url(../img/main_bg.jpg) 0 0 no-repeat;
	background-size:cover;
	width:100%;
	position:relative;
	overflow-x:hidden;
	}
	
#main_area .content{
	width:80%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
	padding-top:40px;
	background:url(../../img/top_bg.gif) 0 0 repeat-x;
	background-size:2em;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:30px;
}
#main_area .content h2{
	text-align:center;
	width:70%;
	margin:0 auto;
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .content .leaf{
	position:absolute;
	top:-20px;
	right:30px;
	width:50%;
	z-index:1;
}

#main_area .content .logo{
	text-align:center;
	width:70%;
	margin:1% auto;
}


/** インデックス **/
#index{
	overflow-x:hidden;
}
#index .special{
	padding-bottom:30px;
	
}
#index .special ul{
	margin-top:30px;
}
#index .special li{
	padding-top:20px;
	padding-bottom:20px;
	border-top:1px solid #000;
}
#index .special li:last-child{
	border-bottom:1px solid #000;
}
#index .special li .banner{
	width:100%;
	margin-bottom:10px;
}
#index .special li .banner img{
	width:100%;
}
#index .special li .textarea{
	width:100%;
}
#index .special a{
	text-decoration:none;
}
#index .special li .textarea p{
	color:#000;
	text-decoration:none;
	padding-left:0px!important;
	text-indent:0;
	font-size:18px;
}
#index .special li .textarea .ttl{
	font-size:18px;
	background-color:#892a83;
	color:#FFF;
	padding:0.3em!important;
	line-height:1;
	display:inline-block;
	margin-bottom:15px;
}






#main_area .content h3{
	position:relative;
	margin-top:15px;
}
#main_area .content h3 p{
	position:absolute;
	top:-15px;
	left:0px;
	width:100%;
	text-align:center;
}
#main_area .content h3 p img{
	width:50%!important;
}


#main_area .content .special p{

font-size:15px;
line-height:1.6;
text-indent:-3em;
padding-left:3em!important;
}


#main_area .content .special p span{


}


#main_area .content .special p.intv{

font-size:16px;
color:#018cca;
padding:4% 0;
clear:both;

text-indent:-2.5em;
padding-left:2.5em!important;

}


#main_area .content .special p.ans{
padding:0 0 4% 0;
}


#main_area .content .special .fr{

float:right;
}

#main_area .content .special .pic{

width:100%;
padding-left:0!important;
text-indent:0;
padding-bottom:3%;

}

#main_area .content .special .pic img{

width:100%;
max-width:none;

}


#main_area .content .special .profile{
width:85%;
background:#298ecb;
margin: 5% auto;
padding:3% 3%;
color:#fff;

}


#main_area .content .special .profile p{
text-indent:0;
padding:0!important;
}

#main_area .content .special .profile span{
font-size:14px;
padding-bottom:0.5em;
display:block;
}


#main_area .content .special .profile .suzuki,#main_area .content .special .profile .umehara{
width:100%;
clear:both;
padding:0;
font-size:13px;
}

#main_area .content .special .profile .suzuki{
padding-bottom:7%;

}


#main_area .content .special .profile .suzuki img{
width:100%;
max-width:none;

}

#main_area .content .special .profile .umehara img{
width:100%;
max-width:none;
}



#main_area .content .special .pic_l{

clear:both;

width:100%;
padding-bottom:2%;
}


#wrapper #main_area .cap{
	font-size:85%;
padding-right:5%;
}



/** vol2 **/
#vol2 .lead{
	font-size:18px;
	color:#018cca;
	font-weight:bold;
	margin-top:20px;
	margin-bottom:30px;
}
#vol2 .lead span{
	color:#892a83;
	
}
#vol2 .detail{
	background-color:#FFF;
	padding:3%;
}
#vol2 .detail li p{
	font-size:14px;
	display:table-cell;
	vertical-align:top;
	line-height:2!important;
}
#vol2 .detail li p:nth-child(1){
	padding-right:1em;
	width:6em;
}
#vol2 .detail .twitter{
	width:100%;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:30px;
}
#vol2 .detail .twitter .ttl{
	font-size:23px;
	color:#00a6ed;
	display:inline-block;
	font-weight:bold;
}
#vol2 .detail .twitter .ttl img{
	margin-right:10px;
	margin-bottom:-8px;
}
#vol2 .detail .twitter .link a{
	font-size:16px;
	color:#018cca;
	text-decoration:underline;
	display:block;
	margin-top:10px;
	margin-bottom:10px;
	word-break:break-all;
}
#vol2 .detail .twitter .link a:hover{
	text-decoration:none;
}

#vol2 .detail .twitter ul{
	margin-left:1em;
	
}
#vol2 .detail .twitter li{
	font-size:14px;
	text-indent:-1em;
	margin-bottom:5px;
}
.btn_top a{
	display:block;
	background:url(../img/vol2/btn_arrow.gif) 15px center no-repeat;
	background-color:#000;
	color:#FFF;
	font-size:16px;
	text-align:center;
	width:80%;
	margin:0 auto;
	padding-top:1em;
	padding-bottom:1em;
	margin-top:40px;
	text-decoration:none;
}
.btn_top a:hover{
	opacity:0.7;
}


}












