/*全体
--------------------------------------------------------------------------*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width :auto;
}
#con{
width:100%;
}
/*以下、画面の横幅が640pxまでの場合のスタイル記入～*/

html{
	background: none;
    background-color: #f8fafa;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

body {
	margin:0;
	padding:0;
	COLOR: #000;
	FONT-SIZE: 13px;
	font-family:"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";	
	LINE-HEIGHT: 150%;
	text-align: center;
	background: none;
}

#con{
    width:100%;
	height:auto;
	margin:0px auto;
	padding:0;
	position:relative;
}

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

img{
	border:0;
}

strong{
	font-size: 104%;
}

a:link,a:visited{
	outline:0;
	color:#000;
	text-decoration: underline;
}

a:hover{
	outline: 0;
	color: #0078a5;
	text-decoration: underline;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

a:active{
	outline:0;
	color:#18489d;
	text-decoration:none;
}

br.sp{
	display:none;
}
br.spt{
	display:inherit;
}
br.spm{
	display:none;
}
br.sm{
	display:inherit;
}
br.smt{
	display:inherit;
}
br.smm{
	display:none;
}
.nsp{
	display:none;
}
.nsm{
	display:none;
}
@media only screen and (max-width: 480px) {
br.spt{
	display:none;
}
br.spm{
	display:inherit;
}
br.smt{
	display:none;
}
br.smm{
	display:inherit;
}
.nsp{
	display:inline;
}
}

/*メイン
--------------------------------------------------------------------------*/
main{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	margin: 40px 0 0;
	padding: 0 2% 50px;
}
@media only screen and (max-width: 480px) {
main{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	margin: 40px 0 0;
	padding: 0 2% 20px;
}
}

main p{
	margin: 0 0 25px;
	text-align: justify;
	text-justify: inter-ideograph;
}

article{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
}

#photo img{
float: right;
max-width: 53%;
}

#photo h2{
clear: none;
float: left;
width: 45%;
margin: 0 2% 10px 0;
padding: 0;
text-align: left;
line-height: 120%;
font-weight: bold;
font-size: 28px;
}
#photo h2.pno{
margin: 0 2% 0 0;
}

#photo a:link,#photo a:visited{
text-decoration: none;
}
#photo a:hover{
text-decoration: underline;
}

@media only screen and (max-width: 480px) {
#photo img{
float: right;
max-width: 100%;
}
#photo h2{
clear: none;
float: left;
width: 100%;
margin: 10px 0 0;
padding: 0;
text-align: left;
line-height: 120%;
font-weight: bold;
font-size: 20px;
}
#photo h2.pno{
margin: 0 2% 0 0;
}
}

#banner{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 1% 15px;
border-radius: 7px;
box-shadow: 1px 4px 3px #999;
background: #fff;
text-align: center;
}

#banner img{
float: none;
max-width: 100%;
}

#banner h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 10px 0 20px;
padding: 0;
font-weight: bold;
font-size: 30px;
text-align: center;
line-height: 100%;
}

main #banner p{
clear: both;
width: 100%;
text-align: center;
font-size: 13px;
line-height: 150%;
margin: 0;
}

#banner  h3 a:link,#banner h3 a:visited{
text-decoration: none;
color: #000;
}
#banner h3 a:hover{
text-decoration: underline;
}

/*サイドバー
--------------------------------------------------------------------------*/
aside{
display: none;
	float: right;
	width: 20%;
	height: auto;
	margin: 0;
	padding: 0;
	text-align:left;
}

aside p{
	text-align: right;
	font-size: 13px;
	line-height: 120%;
	margin: 0 0 20px;
}

#news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}

#news h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 15px 0 12px;
color: #fff;
font-weight: bold;
font-size: 20px;
line-height: 100%;
background: #0078a5;
text-align: center;
border-radius: 7px;
}

#news ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#news li{
font-size: 13px;
line-height: 150%;
text-align: left;
margin: 0 0 15px 2%;
padding: 0 0 15px;
border-bottom: 1px dashed #0078a5;
list-style-position: inside;
}

#news h3{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-size: 13px;
font-weight: normal;
}

#news li a:link,#news li a:visited{
color: #000;
}
#news li a:hover{
color: #0078a5;
}

#news img{
float: right;
}

#side-access{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}

#side-access h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 15px 0 12px;
color: #fff;
font-weight: bold;
font-size: 20px;
line-height: 100%;
background: #0078a5;
text-align: center;
border-radius: 7px;
}

#side-access p{
font-size: 13px;
line-height: 150%;
margin: 0 0 15px;
text-align: left;
}

/*サブページ
--------------------------------------------------------------------------*/
#sub-page{
text-align: center;
padding: 0 2%;
}

#sub-page article,#blog article{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

.edit-link{
display: none;
}

main #sub-page p{
margin: 0 0 25px;
}

#sub-page img{
padding: 5px;
background: #fff;
border: 1px solid #ccc;
}

#sub-page img.pictright{
float: none;
margin: 0 0 10px;
}

table {
	clear:both;
	width:99%;
	margin:0 0 20px;
    border:1px solid #ccc;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
	font-size: 15px;
}

th,td{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding: 5px;
	}

th{
	background: #eee;
	text-align: center;
	font-size: 1.1em;
	font-weight: normal;
}

input[type="text"],input[type="email"],input[type="tel"],textarea{
	width: 94%;
}

textarea[name="your-message"]{
	width: 94%;
	height: 150px;
}

input[type="submit"]{
	padding: 5px 30px;
	border: 1px solid #78b868;
	border-radius: 5px;
	background: linear-gradient(#fff,#ccc);
	font-size: 18px;
}

.hissu{
	font-size: 11px;
	border: 1px solid #db6357;
	background: linear-gradient(#fff,#fba49b);
	padding: 0 5px;
	margin: 0 0 0 5px;
	border-radius: 3px;
	line-height: 100%;
}

#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 5% 10px;
color: #111;
font-weight: normal;
font-size: 20px;
line-height: 100%;
text-align: left;
border-left: 20px solid #c50f43;
text-indent: 0;
}

.entry-content{
clear: both;
float: left;
width: 100%;
margin: 30px 0 0;
}

#sub-page h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 20px;
padding: 0 0 5px;
font-weight: bold;
font-size: 20px;
line-height: 100%;
text-align: left;
border-bottom: 1px solid #000;
}

@media only screen and (max-width: 480px) {
#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 3% 10px;
color: #111;
font-weight: bold;
font-size: 17px;
line-height: 100%;
text-align: left;
border-left: 20px solid #c50f43;
text-indent: 0;
}

.entry-content{
clear: both;
float: left;
width: 100%;
margin: 30px 0 0;
}

#sub-page h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 20px;
padding: 0 0 5px;
font-weight: bold;
font-size: 20px;
line-height: 100%;
text-align: left;
border-bottom: 1px solid #000;
}
}

#sub-page ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
}
@media only screen and (max-width: 480px) {
#sub-page ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 0;
}
}

#sub-page li{
text-align: left;
margin: 0 0 15px 5%;
padding: 0;
font-size: 13px;
line-height: 120%;
}

#design{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

.de-box{
float: left;
width: 46%;
height: auto;
margin: 0 2% 0;
padding: 0;
}
@media only screen and (max-width: 480px) {
.de-box{
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}

#sub-page h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 20px;
padding:15px 3% 10px;
line-height: 100%;
text-align: left;
font-weight: bold;
font-size: 18px;
background: #fff;
text-indent: 0;
border-bottom: 3px solid #0078a5;
}
@media only screen and (max-width: 480px) {
#sub-page h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 20px;
padding:15px 0 10px;
line-height: 100%;
text-align: left;
font-weight: bold;
font-size: 16px;
background: #fff;
text-indent: 1em;
border-bottom: 3px solid #0078a5;
}
}

#sub-page h4{
text-align: left;
}

.f-blue{
color: #3D5BE4;
font-weight: bold;
font-size: 1.1em;
padding: 0 2px;
}

#sub-page dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#sub-page dt{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-weight: bold;
line-height: 150%;
font-size: 13px;
}

#sub-page dd{
float: left;
width: 70%;
height: auto;
margin: 0 0 15px;
padding: 0;
line-height: 150%;
font-size: 13px;
text-align: left;
}

@media only screen and (max-width: 480px) {
#sub-page iframe{
height: 250px;
}
}

#blog{
}

#blog header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: none;
}

#blog header p{
text-align: right;
margin: 0;
}

#blog article h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 10px 0 8px 5%;
text-align: left;
line-height: 120%;
font-weight: normal;
font-size: 15px;
border:1px solid #ccc;
background: #fff;
border-radius: 7px;
}

#mail-page{
}

#mail-page dt{
text-align: right;
width: 30%;
margin: 0 2% 15px 0;
}

#mail-page dd{
width: 68%;
margin: 0 0 15px;
}

.hissu{
	background: rgba(220,20,24,1.00);
	font-size: 11px;
	margin: 0 0 0 5px;
	padding: 0 5px;
	color: #fff;
}

.wpcf7 .wpcf7-response-output{
	clear:both;
	float:left;
	width:96%;
	height:auto;
	margin:0 2% 15px;
	padding:5px 10px;
	background:rgba(211,63,65,1.00);
	color:#fff;
	font-size:15px;
	line-height:200%;
	border:1px solid #666;
	text-align:center;
}

.wpcf7 .wpcf7-mail-sent-ok{
	clear:both;
	float:left;
	width:96%;
	height:auto;
	margin:0 2% 15px;
	padding:5px 10px;
	background:#FF8226;
	color:#fff;
	font-size:15px;
	line-height:200%;
}

.wpcf7 .wpcf7-not-valid-tip{
    position: absolute;
    top: 100%;
    left: 0%;
    z-index: 100;
    background: #fff;
    border: 1px solid #ff0000;
    font-size: 9pt;
    width: auto;
    padding: 2px;
}

.wpcf7c-conf{
	background-color: #FBE4E4;
	color: black;
	border: 1px solid #333333;
}

.wpcf7 .wpcf7-back {
 /* ボタン修正 */
	 background-color: #66A644;
	 color: #fff;
	 padding:5px 20px;
	 border:1px solid #666;
	font-size: 18px;
        border-radius: 7px;
    box-shadow: 3px 3px 1px #ccc;
 }
 .wpcf7 .wpcf7-confirm,form p .wpcf7 .wpcf7-submit {
	 /* ボタン確認、ボタン送信 */ 
	 background-color: #66A644;
	 color: #fff;
	 padding:5px 20px;
	 border:1px solid #666;
	font-size: 18px;
        border-radius: 7px;
    box-shadow: 3px 3px 1px #ccc;
}

form p{
text-align: center;
}

}