@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
}

body,
table,
input, textarea, select, option {
	-webkit-text-size-adjust: none;
	font-style:normal;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

ol, ul {
	list-style: none;
}

img{
	border:0;
}

input,select{
	font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;
}

/* reset.css ここまで */

body,
html {
  overflow-x: hidden;
}
.rcrumbs {
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.rcrumbs > ul {
  padding: 0;
  list-style: none;
}
.rcrumbs > ul > li {
  overflow: hidden;
  display: none;
}
.rcrumbs > ul > li.show {
  display: inline-block;
}
.rcrumbs > ul > li.ellipsis {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}

.rcrumbs .divider {
  color: #cccccc;
  padding: 0 5px;
}

/* jquery.rcrumbs.css ここまで */

a{color:#3498d8;text-decoration:none;}
a:link{color:#3498d8;text-decoration:none;}
a:visited{color:#3498d8;text-decoration:none;}
a:active{color:#3498d8;text-decoration:underline;}
a:hover{color:#3498d8;text-decoration:underline;}

body{
	font-size:90%;
	line-height:150%;
	font-family:"メイリオ",Hiragino Kaku Gothic Pro,Osaka,"MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;
}

#header{
	width:940px;
	margin:0 auto;
}

#header #top{
	float:left;
	font-size:11px;
	padding:2px 0;
}

#header #kiyaku{
	float:right;
	padding:3px 0;
}

#header #header_bg{
	clear:both;
	background :  url(/img/header_bg.jpg) center center no-repeat;
	height:190px;
	position:relative;
}

#header h1{
	padding:10px;
	filter: alpha(opacity=90); /* IE */
	-moz-opacity:0.9; /* Firefox(old) */
	-khtml-opacity: 0.9; /* Safari(old) */
	opacity: 0.9;
}

#header #header_bg2{
	clear:both;
	height:150px;
	position:relative;
}

#header #header_bg2 h1 img{
	width:160px;
	height:auto;
	filter: alpha(opacity=90); /* IE */
	-moz-opacity:0.9; /* Firefox(old) */
	-khtml-opacity: 0.9; /* Safari(old) */
	opacity: 0.9;
}

#header #header_bg2 h1{
	padding:5px;
	float:left;
}

#header #header_bg2 #header_bn{
	float:right;
	height:90px;
	width:728px;
}

#search{
	background:#333333;
	position:absolute;
	left:0;
	bottom:0;
	width:auto;
	display:block;
	padding:0;
	width:100%;
	background: rgba(51,51,51,0.5);
}

#search form{
	display:block;
	padding:8px;
}

#s{
	height:36px;
	padding:0 5px;
	margin:0;
	vertical-align:middle;
	font-size:15px;
	-webkit-appearance: none;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-khtml-border-radius: 0px;
	border-radius: 0px;
	width:300px;
	border:0;
}


.btn_search{
	width:36px;
	height:36px;
	vertical-align:middle;
	background : #fdc44f url(/img/ic_search_black_36dp.png) center center;
	border:0;
	padding:0;
	margin:0;
	font-size:0;
	cursor:pointer;
	-webkit-appearance: none;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-khtml-border-radius: 0px;
	border-radius: 0px;
}



nav{
/*
	border-bottom:1px solid #adadad;
*/
	height:32px;
	max-width:940px;
	margin:0 auto;
}

nav ul{
	margin:0 auto;
	width:940px;
}

nav li{
	width:20%;
	float:left;
	background:#eee;
}
nav li a{
	border-left:1px solid #fff;
	display:block;
	text-align:center;
	text-decoration:none;
	padding:5px;
}

nav li a:link{
	color:#333333;
}

nav li a:visited{
	color:#333333;
}


nav li a{
	display:block;
	text-align:center;
	text-decoration:none;
	color:#121212;
	padding:5px;
}

nav li a:hover{text-decoration:underline;}




#contents{
	clear:both;
	width:940px;
	margin:0 auto;
	padding:10px 0;
}

#main{
	width:620px;
	float:left;
}

#side{
	width:300px;
	float:right;
}

#main .box{
	clear:both;
	padding:20px 0 20px 0;
}

#main .box p{
	padding:5px;
}

.midashi01{
	clear:both;
	background : #333333 url(/img/ico_crown.png) left center no-repeat;
	color:#ffffff;
	padding:10px 0 8px 60px;
	font-size:120%;
}

.midashi02{
	clear:both;
	background : url(/img/midashi02_bg.png) left center no-repeat;
	color:#121212;
	padding:17px 0 13px 60px;
	font-size:120%;
}
.midashi03{
	clear:both;
	background : url(/img/midashi03_bg.png) left center no-repeat;
	color:#121212;
	padding:17px 0 13px 60px;
	font-size:120%;
}

.midashi04{
	clear:both;
	background : url(/img/midashi04_bg.png) left center no-repeat;
	color:#121212;
	padding:17px 0 13px 60px;
	font-size:120%;
}

.midashi05{
	clear:both;
	background : url(/img/midashi05_bg.png) left center no-repeat;
	color:#121212;
	padding:17px 0 13px 60px;
	font-size:120%;
}

.midashi06{
	clear:both;
	background : #333333 url(/img/side_midashi01.png) 10px 8px no-repeat;
	color:#ffffff;
	padding:8px 0 6px 40px;
	font-size:120%;
}

.midashi07{
	clear:both;
	background : url(/img/side_midashi01.png) 10px 8px no-repeat;
	color:#000000;
	padding:8px 0 6px 40px;
	font-size:120%;
	border-bottom:1px solid #b3b3b3;
}


.midashi02 span,
.midashi03 span,
.midashi04 span,
.midashi05 span,
.midashi06 span{
	font-size:80%;
}



/* 基本画像リスト */
.image_list{
	background:#e6e6e6;
}

.ico_color{
	width:25px !important;
	height:25px !important;
	position:absolute;
	bottom:30px;
}

.image_list ul li{
	position:relative;
	width:20%;
	float:left;
}

.image_list ul li p{
	text-align:center;
	font-size:10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.image_list ul li a{
	display:block;
	padding:10px;
	background:#e6e6e6;
}

.image_list ul li img{
	width:100%;
	height:auto;
}

.color_midashi{
	padding:10px;
	font-size:75%;
	text-align:right;
}
.color_midashi img{
	vertical-align:middle;
	margin:0 3px 0 0;
}

.category_list li{
	width:33.3%;
	float:left;
}

.category_list li a{
	display:block;
	padding:3px;
}

.category_list li a img{
	width:100%;
	height:auto;
}


.side_midashi01{
	color:#ffffff;
	padding:8px 5px 6px 35px;
	background : #333333 url(/img/side_midashi01.png) 4px center no-repeat;
}


.tag_keyword{
	padding:10px;
	background:#e6e6e6;
}

#side .areas{
	padding:10px 0;
}

#side .areas ul{
	width:50%;
	float:left;
}

#side .areas ul li a{
	padding:3px;
	display:block;
}

#side .areas ul li a img{
	width:100%;
	height:auto;
}

#side .box{
	clear:both;
	padding:10px 0 0 0;
}

#side .box p.text{
	background:#e6e6e6;
	font-size:85%;
	padding:10px;
}


#footer{
	clear:both;
	/*
	background:#cccccc;
	*/
	padding:20px 0 0 0;
}

#footer .social{
	clear:both;
	padding:10px 0;
	background:#808080;
	text-align:center;
}

#footer #copyright{
	padding:40px 10px 40px 10px;
	background:#000;
	color:#fff;
	text-align:center;
}

/* バナー */
#bn_side_top{
	margin:0 0 10px 0;
}

/* 2nd */
.rcrumbs{
	padding:0 0 10px 0;
}

.midashi_article{
	background : #efebcf url(/img/takefree.png) 4px center no-repeat;
	font-size:20px;
	padding:20px 10px 10px 100px;
	line-height:25px;
}

.midashi_article span{
	font-size:12px;
}

article .info{
	height:20px;
	padding:10px;
}

ul.cat ul{
	float:left;
}

ul.cat li a{
	color:#ffffff;
}

ul.cat li{
	float:left;
	background:#5387aa;
	padding:0 3px;
	border-radius: 10px;
	font-size:11px;
	margin:0 5px 0 0;
}

/*
	background:#bfc6c6;
	color:#fff;
	padding:2px 5px 2px 5px;
	margin: 0 5px 0 0;
	font-weight:normal;
	text-align:center;
	font-size:12px;
	line-height:100%;
	display: inline-block;
	vertical-align:1px;
*/

.category_link{
	float:left;
}

.category_link dt{
	float:left;
}

.category_link dd{
	float:left;
}

.entry_date{
	float:right;
	font-size:11px;
}

.illust_image{
	text-align:center;
	padding:15px 0;
}


.illust_comment{
	color:#4d4d4d;
	padding: 10px;
	border: 3px solid #ccc;
	border-radius: 12px;
	position: relative;
}
.illust_comment:before{
	content: "";
	border: 12px solid transparent;
	border-bottom: 12px solid #fff;
	position: absolute;
	left: 48%;
	top: -23px;
	z-index: 2;
}
.illust_comment:after{
	content: "";
	border: 12px solid transparent;
	border-bottom: 12px solid #ccc;
	position: absolute;
	left: 48%;
	top: -27px;
	z-index: 1;
}

.download ul li .thumbnail img{
	width:120px;
	height:120px;
}

.download ul li{
	padding:10px;
	border:1px solid #ccc;
	max-width:400px;
	min-height:130px;
	margin:10px auto 0 auto;
}

.download ul li .thumbnail{
	float:left;
}

.download ul li .color_name{
	padding:20px 0 5px 0;
}


.download p{
	padding:10px;
}

.download{
	text-align:center;
	clear:both;
	padding:5px 0 10px 0;
}

.download img{
	vertical-align:middle;
	margin:0 0 0 10px;
}

.links{
	clear:both;
	padding:30px 0;
}

.midashi10{
	padding:6px 5px 6px 35px;
	background : #ccc url(/img/side_midashi01.png) 4px center no-repeat;
}

.midashi20{
	background:#ccc;
	display:inline-block;
	padding:5px 8px;
	border-radius: 13px;
	margin:12px 0 -18px 20px;
}

.midashi20_box{
	border:3px solid #ccc;
	border-radius: 13px;
	padding:26px 10px 10px 10px;
}


.midashi20_box h3.ok{
	background:#c0e6f6;
	padding:3px 5px;
	display:inline-block;
	border-radius: 8px;
	margin:0 0 10px 0;
}

.midashi20_box p.ok{
	background:#c0e6f6;
	padding:3px;
	margin-bottom:10px;
}


.midashi20_box h3.ng{
	background:#f6a7a1;
	padding:3px 5px;
	display:inline-block;
	border-radius: 8px;
	margin:20px 0 10px 0;
}

.midashi20_box p.ng{
	background:#f6a7a1;
	padding:3px;
	margin-bottom:10px;
}

.midashi20_box h3.other{
	background:#ccc;
	padding:3px 5px;
	display:inline-block;
	border-radius: 8px;
	margin:20px 0 10px 0;
}

.midashi20_box p.ng{
	padding:3px;
	margin-bottom:10px;
}




.contact_form,
.contact_form_conf{
	border:3px solid #ccc;
}

.contact_form .form,
.contact_form_conf .form{
	padding:10px;
}

.contact_form .form dd{
	padding:2px 0 20px 20px;
}

.contact_form h3,
.contact_form_conf h3{
	background:#ccc;
	padding:3px;
	text-align:center;
}

.contact_form h4{
	margin:20px 0 0 0;
}

.contact_form_conf h4{
	margin:20px 0 5px 0;
	padding:3px;
	background:#ccc;
	display:inline-block;
}


.contact_form .fm{
	width:250px;
}

.contact_form .btn{
	padding:20px;
	text-align:center;
}

.contact_form_conf .btn{
	padding:20px;
	text-align:center;
}


.err_msg{
	color:#ff0000;
}

/* ページナビ */

.page_link{
	clear:both;
	padding:10px;
	text-align:right;
}

.page_link a{
	display:inline-block;
	padding:5px;
	border:1px solid #ccc;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}

#pagetop{
	display:none;
	position:fixed;
	right:10px;
	bottom:10px;
	z-index:1000;
	filter: alpha(opacity=90); /* IE */
	-moz-opacity:0.9; /* Firefox(old) */
	-khtml-opacity: 0.9; /* Safari(old) */
	opacity: 0.9;
}

#pagetop a{
	color:#000;
}


#header_bn{

}


.illust_image img{
	max-width:400px;
	width:100%;
}

/*
.ad01{
	width:300px;
	height:250px;
	margin:0 0 10px 0;
}
*/
.ad01{
	margin:0 0 10px 0;
}

.ad02{
	clear:both;
	padding:10px 0 10px 0;
	text-align:center;
}

.ad03{
	clear:both;
	padding:10px 0 10px 0;
	text-align:center;
	width:300px;
	margin:0 auto;
}

.ad04{
	clear:both;
	padding:0 0 10px 0;
	text-align:center;
	width:300px;
	margin:0 auto;
}



.cat1{
	padding:0;
}

.cat1 a:link{
	color:#333333;
}

.cat1 a:visited{
	color:#333333;
}

.cat1 a:link span{
	color:#3498d8;
}

.cat1 a:visited span{
	color:#3498d8;
}


.cat2{
	padding:0 0 0 30px;
}

.cat3{
	padding:0 0 0 30px;
}

.cat1 a,
.cat2 a,
.cat3 a{
	display:block;
	border-bottom:1px solid #ccc;
	padding:10px 0;
	background : url(/img/ic_chevron_right_grey600_18dp.png) 100% center no-repeat;
}

.bn_season{
	padding:0 0 0px 0;
}

.bn_season img{
	width:100%;
	height:auto;
}


.ad_main_bottom{
	text-align:center;
	padding:20px 0 5px 0;
}

@media screen and (max-width: 940px){



	#header{
		width:auto;
	}

	nav ul{
		width:auto;
	}

	nav li{
		width:50%;
	}
	
	nav li a{
		border-bottom:1px solid #fff;
	}
	
	nav li.nav5{
		width:100%;
	}
	
	nav{
		height:64px;
	}
	
	#header_bg2 #search{
		position:static;
	}
	
	#header #header_bg2{
		height:auto;
		position:static;
	}

	#header #header_bg2 h1{
		padding:5px;
		float:none;
		text-align:center;
	}

	#header #header_bg2 #header_bn{
		float:none;
		padding:10px 0;
		text-align:center;
		clear:both;
		height:auto;
		width:auto;
		text-align:center;
	}

	#contents{
		width:auto;
		padding:10px 5px;
		position:relative;
	}
	
	#main{
		float:none;
		margin: 0 310px 0 0;
		width:auto;
	}

	#side{
		float:none;
		width:300px;
		position:absolute;
		right:5px;
		top:10px;
	}
	
	#header #top{
		padding:2px;
	}

	#header #kiyaku{
		padding:3px;
	}
	

}


@media screen and (max-width: 760px){

	#main{
		float:none;
		margin: 0;
	}

	#side{
		clear:both;
		float:none;
		width:auto;
		position:static;
		padding-top:0;
	}
	
	

	
	.download a{
		display:block;
	
	}


	.ad01{
		padding:10px 0 10px 0;
		text-align:center;
	}

}


@media screen and (max-width: 640px){

	#header #top{
		padding:2px;
		float:none;
	}

	#header #kiyaku{
		padding:3px;
		float:none;
		text-align:center;
	}
}

@media screen and (max-width: 480px){

	#main{
		float:none;
		margin: 0;
	}

	#side{
		width:auto;
		position:static;
		padding-top:0;
	}
	
	.image_list ul li{
		width:33.3%;
		float:left;
	}
	

	#header h1{
		text-align:center;
	}
	
	nav a{
		font-size:12px;
	}
	
	#s{
		width:250px;
	}
}




@media screen and (max-width: 390px){

	.download ul li .thumbnail img{
		width:100px;
		height:100px;
	}
	
	.download ul li .download_right img{
		width:150px;
		height:auto;
	}
	
	.download ul li{
		min-height:100px;
	}
	
	/*
	.download ul li{
		padding:10px;
		border:1px solid #ccc;
		max-width:400px;
		min-height:130px;
		margin:0 auto;
	}

	.download ul li .thumbnail{
		float:left;
	}

	.download ul li .color_name{
		padding:20px 0 5px 0;
	}
	*/

}


