@charset "utf-8";
/*
Theme Name: cloudtpl_477
Theme URI: http://c-tpl.com/
Description: cloudtpl_477
Version: 1.0
Author: Cloud template
Author URI: http://c-tpl.com/
Tags: simple

	Cloud template v1.0
	 http://c-tpl.com/

	This theme was designed and built by Cloud template,
	whose blog you will find at http://c-tpl.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

*{margin:0;padding:0;}

body{
font: 14px/1.4 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
color:#252525;
/* background: #ffffff url(images/bg.png) repeat-x top; */
background:#101820;
}
.twdbody {
  background: #ffffff url(images/bg.png) repeat-x top;
}

/* body#toppage {
background: url(images/bg_top.png) repeat-x top;
} */
div#toppage {
background: #ffffff url(images/bg_top.png) repeat-x top;
}

a{color:#288bca;text-decoration:none;}
a:hover{color:#5babde;}
a:active, a:focus {outline: 0;}
img{border:0;}
#main img{max-width:100%;width:auto;height:auto;}
.clear{clear:both;}

#main blockquote {
clear:both;
padding:0 0 0 15px;
margin:10px 0 15px 25px;
border-left:5px solid #ccc;
}
@media screen and (max-width:644px) {
  #main blockquote {
    padding:0 0 0 10px;
    margin:10px 0 15px 20px;
  }
}

/*************
全体
*************/
#wrapper{
margin: 0 auto;
padding: 0 20px;
width: 910px;
}

/*************
/* ヘッダー
*************/
#header{
/* background: url(images/header.png) no-repeat 100% 10px; */
height: 85px;
}

#header h1 {
padding: 12px 7px 0;
font-size: 11px;
font-weight: normal;
height:16px;
}

#header h2 {
float:left;
}

.contact{
float:right;
padding:0 8px 5px;
margin:-19px 0 0;
text-align:center;
color:#fff;
font-size:90%;
line-height:1.3;
background:#101820;
border-radius: 0 0 15px 15px;
}

.contact .tel{
/* margin-bottom:-3px; */
position:relative;
top:4px;
line-height:1.5;
font-weight:bold;
font-size:200%;
font-family:Arial, Helvetica, sans-serif;
}


/* メインメニュー　PC用
------------------------------------------------------------*/
@media only screen and (min-width: 1025px){
nav div.panel{
display:block !important;
float:left;
}

a#menu{display:none;}

nav#mainNav{
position:relative;
top:15px;
height:46px;
margin-bottom:30px;
background:url(images/mainNavBg.png);
margin-right:-1px;
border-right:1px solid #fff;
}

nav#mainNav ul li{
float: left;
position: relative;
list-style: none;
}

nav#mainNav ul li a{
display: block;
text-align: center;
_float:left;
font-weight:bold;
font-size: 90%;
color:#000;
height:36px;
line-height:18px;
padding:10px 0 0;
width:181px;
background:url(images/mainNavBg.png);
border-left:1px solid #fff;
}
/* nav#mainNav ul li:last-child a{
border-right:1px solid #fff;
} */

nav#mainNav ul li a span,nav#mainNav ul li a strong{
display:block;
font-weight:normal;
font-size:90%;
line-height:1.0;
margin-top:8px;
}

nav#mainNav ul li a span{
font-size:10px;
color:#000;
}

nav#mainNav ul li.current-menu-item a, nav#mainNav ul li a:hover, nav#mainNav ul li a:active, nav#mainNav ul li.current-menu-parent a{
background-position:0 -46px;
}
nav#mainNav ul li.current-menu-item a span, nav#mainNav ul li a:hover span, nav#mainNav ul li a:active span, nav#mainNav ul li.current-menu-parent a span{
color:#fff;
}

nav#mainNav ul ul{width:160px;}

nav#mainNav ul li ul{display: none;}

nav#mainNav ul li:hover ul{
display: block;
position: absolute;
top:60px;
left:-2px;
z-index:500;
}

nav#mainNav ul li li{
padding:0 0 0 10px;
margin:0;
float: none;
height:40px;
line-height:40px;
width:160px;
background:#df7f8c;
border:0;
border-bottom:1px solid #efb1ba;
}

nav#mainNav ul li li:first-child{border-left:0;}

nav#mainNav ul li li a{
width:100%;
height:40px;
padding:0;
line-height:40px;
font-size:95%;
text-align:left;
}

nav#mainNav ul li li a span{padding:0 10px;}

nav#mainNav ul li li a:hover,nav#mainNav ul li li.current-menu-item a{color:#f5d5da;}

nav#mainNav ul li:hover ul li:last-child{border:0;}
}


/*************
メイン（右側）コンテンツ
*************/
#main {
float: right;
width: 618px;
padding: 15px 0;
display: inline;
}

#main .bannerM img{
padding-right: 10px;
padding-bottom: 15px;
}
#main .bannerM img.last{padding-right:0;}

#main h2{
margin-bottom: 10px;
padding: 0 10px 2px 20px;
/* line-height: 38px; */
line-height: 1.2em;
height: 38px;
display:table-cell;
width:904px;
vertical-align:middle;
font-size: 14px;
font-weight: normal;
color: #252525;
background: url(images/heading.png) repeat-y;
border-right:1px solid #ccc;
}

#main h3 {
/* font-size: 14px;
font-weight: normal;
line-height: 30px;
padding-left: 15px;
margin-top: 10px;
letter-spacing: 0.2em;
color: #288bca;
border-bottom: 1px solid #cccccc; */
margin:15px 0 5px;
font-size:16px;
color:#003080;
}

#main p {
padding: 15px 15px 15px 10px;
}

/* 画像を右に回りこみ */
#main p.withImage{
width: 598px;
margin: 20px 0 0 10px;
padding: 5px 0;
}

#main p.withImage img{
float: right;
margin-left: .5em;
}

#date {
text-align: right;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 10px;
font-weight:bold;
color:#288bca;
}

#next {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright, img.alignleft{
/*   padding:0;
  margin:0 0 6px 11px; */
  display:inline;
  margin: 0;
  padding: 4px 4px 4px 11px;
  background-color: #fff;
}

img.alignleft{
/* margin: 0 11px 6px 0; */
  margin: 0;
  padding: 4px 11px 4px 4px;
  background-color: #fff;
}

.alignright{float:right;}
.alignleft{float: left;}

@media only screen and (max-width: 644px){
  img.float-right {
    float: none;
    display: block;
    margin: 5px auto;
    padding: 0;
  }
  img.float-left {
    float: none;
    display: block;
    margin: 5px auto;
    padding: 0;
  }
}

/* フッター共通 */
.box{
float: left;
width: 200px;
margin: 20px 10px 10px 0;
line-height: 1.2;
font-size:13px;
word-break:break-all;
}

.box_img{
padding: 0px 0px 10px 0px;
}

.last{margin-right:-2px;}


/* ボタン */
p.button{
text-align: center;
padding: 10px 0;
}

p.button a{
display:block;
line-height: 32px;
background: #ffffff url(images/button.png) no-repeat;
margin: 0 -10px;
font-size:14px;
}

p.button a{color:#288bca;}
p.button a:hover{color:#ffffff;}

p.button a:hover{
cursor:pointer;
background-position: 0 -32px;
}

/* メインとフッターのリスト位置調節 */
#main ul, #footer ul{margin-left: 20px;}
#main li, #footer li{margin-bottom: 3px;}


/*************
サイド（左側）コンテンツ
*************/
#sidebar {
float: left;
width: 265px;
padding: 15px 0;
}

#sidebar p{margin-bottom: 20px;}

#sidebar h3 {
margin-top: 5px;
padding: 0 10px 0 23px;
/* line-height: 40px; */
line-height: 1.2em;
height: 40px;
display:table-cell;
width:904px;
vertical-align:middle;
font-size: 13px;
font-weight: normal;
color: #252525;
background: url(images/heading2.png) repeat-y;
border-right:1px solid #ccc;
}

#sidebar ul{
margin-left: 5px;
padding: 10px 0;
}

#sidebar li{
margin: 0 10px 10px 0;
list-style: none;
border-bottom: 1px solid #efefef;
}

#sidebar li a{
background: url(images/list.png) no-repeat 0 50%;
display: block;
padding-left:20px;
}

#sidebar li a:hover{background-position: 3px 50%;}




/*************
/* フッター
*************/
#footer{
clear:both;
padding-top:20px;
border-top:1px solid #ccc;
} 

#footerLogo{
float:left;
width:180px;
}

#footerLogo img{
max-width:180px;
height:auto;
}

#footer ul{
float:right;
width:625px;
font-size:95%;
padding-top:10px;
padding-bottom:30px;
}

#footer ul ul{padding-bottom:0;width:auto;}

#footer ul li{
display:inline-block;
vertical-align:text-top;
text-align:left;
padding:5px 0;
margin-left:15px;
background:url(images/arrow.png) no-repeat 0 12px;
}

#footer ul li a{
display:block;
padding:0 0 0 12px;
overflow:hidden;
}

#footer ul li a:hover{text-decoration:underline;}

#footer ul li li{
display:block;
padding:0;
margin-left:5px;
background:url(images/arrow2.png) no-repeat 0 6px;
}

#footer ul li li a{padding:0 0 0 8px;}

*:first-child+html #footer ul li{display:inline;}
*:first-child+html #footer ul ul,*:first-child+html #footer ul li li a,*:first-child+html #footer ul li li{display:none;}

#copyright{
clear:both;
padding:5px;
text-align:center;
font-style:normal;
font-size:80%;
zoom:1;
}


/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:1024px){
  .panel ul{
  list-style-type: none;
  }

	nav#mainNav{
	clear:both;
	width:100%;
	margin:20px auto 10px;
/* 	background:#f5f7f8 url(images/mainnavBg.png) repeat-x 0 -5px;
	border:1px solid #e8e5e0;
	border-radius:6px; */
  background:none;
  border:none;
	}

	nav#mainNav a.menu{
	width:100%;
	display:block;
	height:37px;
	line-height:37px;
	font-weight: bold;
  color: #000;
	text-align:left;
  background: url(images/menuOpen.png) no-repeat 5px 8px;
	}
	
	nav#mainNav a#menu span{padding-left:35px;}
	
	nav#mainNav a.menuOpen{
	border-radius:6px 6px 0 0;
	background: url(images/menuOpen.png) no-repeat 5px -34px;
	}
	
	nav#mainNav a#menu:hover{cursor:pointer;}
	
	nav .panel{
	display: none;
	width:100%;
	position: relative;
	right: 0;
	top:0;
	z-index: 1;
	}

	nav#mainNav ul{margin:0;padding:0;}

	nav#mainNav ul li{
	float: none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dashed #ccc;
	background:#f5f7f8;
  color:#000;
	}
	
	nav#mainNav ul li:last-child a{border:0;border-radius:0 0 6px 6px;}
	nav#mainNav ul li li:last-child a{border:0;border-radius:0;}
	nav#mainNav ul li li:last-child a{border-bottom:1px dashed #ccc;}

 	nav#mainNav ul li a span{display:none;}
 
	nav#mainNav ul li.current-menu-item a,nav#mainNav ul li a:hover,nav#mainNav ul li.current-menu-item a,nav#mainNav ul li a:active, nav#mainNav ul li li.current-menu-item a, nav#mainNav ul li.current-menu-item li a:hover, nav#mainNav ul li.current-menu-item li a:active{
	background:#dce3e6;
	}
	
	nav#mainNav ul li.current-menu-item li a{color:#777}

	nav#mainNav ul li li{
	float:left;
	border:0;
	}

	nav#mainNav ul li li a, nav#mainNav ul li.current-menu-item li a, nav#mainNav ul li li.current-menu-item a{
  padding-left:40px;
	background:#f5f7f8 url(images/sub1.png) no-repeat 20px 18px;}

	nav#mainNav ul li li.current-menu-item a,nav#mainNav ul li li a:hover, nav#mainNav ul li.current-menu-item li a:hover{
		background:#dce3e6 url(images/sub1.png) no-repeat 20px -62px;}
	
	nav#mainNav ul li li:last-child a{background:#f5f7f8 url(images/subLast.png) no-repeat 20px 20px;}
	nav#mainNav ul li li:last-child.current-menu-item a,nav#mainNav ul li li:last-child a:hover,nav#mainNav ul li.current-menu-item li:last-child a:hover{background:#dce3e6 url(images/subLast.png) no-repeat 20px -65px;}
	
	nav div.panel{float:none;}

  #headerInfo{padding-bottom:20px;}
}


/* 959px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width: 959px){
  #wrapper, .inner{width:100%;padding: 0;}

	#header{width:96%;padding:0 2%;}
	#main{width:96%;padding:15px 2%;}

/* 	.contact{padding:10px 0 10px;} */

/*   nav#mainNav{width:96%;} */

	nav#mainNav ul{margin:0 auto;}
	nav#mainNav ul ul{padding:0;}

	nav div.panel{float:none;}
	
	#mainimage {text-align: center;}
	#mainimage img{width:96%;height:auto;}

	#content, #sidebar{
	clear:both;
	width:95%;
	float:none;
	margin:0 auto;
	padding:10px 0;
	}
	#sidebar p{
	text-align: center;
	}
	
	.banner{width:100%;margin:0 auto;text-align:center;}
  p.banner img{width:100%;height:auto;}
	
	section.widget_search{text-align:center;}

  #footer{margin:0;border:0;text-align:center;}
  
  #footerLogo, #footer ul{
  float:none;
  width:auto;
  padding-bottom:20px;
  text-align:center;
  }
  
  #footer ul{
  padding-top:20px;
  border-top:1px solid #ccc;
  }
  
  #footer ul ul{padding-top:0;border:0;}  

  #main .bannerM{
    text-align:center;
  }
  #main .bannerM img{
    padding-right:3px;
  }

  .box{
    float: left;
    width: 200px;
    margin: 20px 0 10px 0;
    line-height: 1.2;
    font-size:13px;
    word-break:break-all;
  }
}


/* 幅644px以下から ヘッダー等微調節
------------------------------------------------------------*/
@media only screen and (max-width: 644px){
/*	body{background-position:0 -25px;}
 	#header h1{color:#333;}
	#header h2 img{max-width:90%;}
	#header{text-align:center;}
	#header h2,.contact{float:none;}
	.contact{padding:0 0 20px;}
	.contact p{text-align:center;}
	#headerInfo{width:250px;margin:0 auto;} */

  .twdbody { background: #ffffff url(images/bg_sm.png) repeat-x top; }
  div#toppage { background: #ffffff url(images/bg_top_sm.png) repeat-x top; }

  #header{padding:0;text-align:center;height:150px;}
	#header h2 img{max-width:96%;}
  #header h2{float:none;padding:0;}
  .contact{float:none;margin:0;padding:0;background:none;color:#000;}
  .contact .tel{top:2px;font-size:160%;}
  #footerLogo{float:none;padding:10px;}
/*   #headerInfo{width:240px;margin:10px auto 0;top: 0;} */

	img.alignright, img.alignleft{display: block;	margin:5px auto;}
	.alignright,.alignleft{float:none;}

  #footer ul{text-align:left;padding:15px;}
  #footer ul ul{padding:0;}

  #main .bannerM img{
    max-width:31%;
    height:auto;
/*     display:block;
    padding-right:0;
    margin:0 auto; */
  }

  .box{
    float:none;
  }
}