/*
Theme Name:【森猫堂】制作
Author: 森猫堂
*/

/*全体
--------------------------------------------------------------------------*/
html{
	background: #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: 15px;
	font-family:"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";	
	LINE-HEIGHT: 150%;
	text-align: center;
}

#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:inherit;
}
br.spt{
	display:inherit;
}
br.spm{
	display:inherit;
}
br.sm{
	display:none;
}
br.smt{
	display:none;
}
br.smm{
	display:none;
}
.nsp{
	display:none;
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: 100px;
margin: 0;
padding: 0 15%;
background: #fff;
}
@media only screen and (max-width: 1600px) {
header{
padding: 0 10%;
}
}
@media only screen and (max-width: 1440px) {
header{
padding: 0 5%;
}
}
@media only screen and (max-width: 1280px) {
header{
padding: 0 1%;
}
}
@media only screen and (max-width: 1080px) {
header{
height: auto;
padding: 0 1% 5px;
}
}

header h1{
float: left;
height: auto;
margin: 15px 0 0;
padding: 0;
text-align: left;
line-height: 130%;
color: #111;
font-weight: bold;
font-size: 30px;
}
header h1 .f-title{
font-size: 13px;
font-weight: normal;
line-height: 120%;
}
header h1 a:link,header h1 a:visited{
text-decoration: none;
color: #111;
}
@media only screen and (max-width: 1280px) {
header h1{
font-size:25px;
}
}
@media only screen and (max-width: 1080px) {
header h1{
margin: 5px 0 0;
font-size:20px;
}
}
@media only screen and (max-width: 480px) {
header h1{
margin: 1px 0 0;
font-size:16px;
}
}

#logo{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0;
padding: 5px 0 0;
}
#logo img{
float: left;
margin: 0 2% 0 0;
}
#tel{
float: right;
width: 40%;
height: auto;
margin: 0;
padding: 30px 0 0;
text-align: right;
}
#tel img{
display: inline;
margin: 0 0 0 5%;
}
#tel img.bno{
display: none;
}
@media only screen and (max-width: 1280px) {
#logo{
width: 50%;
}
#tel{
width: 50%;
padding: 15px 0 0;
}
}
@media only screen and (max-width: 1080px) {
#logo{
width: 40%;
}
#logo img{
max-width: 15%;
}
#tel{
width: 60%;
padding: 5px 0 0;
}
}
@media only screen and (max-width: 835px) {
#logo{
width: 70%;
}
#logo img{
max-width: 10%;
}
#tel{
width: 30%;
padding: 5px 0 0;
text-align: center;
}
#tel img{
display: none;
max-width:40%;
max-height: 30px;
}
#tel img.bno{
display:inherit;
}
}
@media only screen and (max-width: 480px) {
#logo img{
max-width: 13%;
}
}
@media only screen and (max-width: 414px) {
#logo{
width: 80%;
}
#tel{
width: 20%;
}
#tel img{
margin: 0 5%;
max-height: 25px;
}
}

/*メニュー
--------------------------------------------------------------------------*/
#toggle{
	display:none;
}

menu{
clear: both;
float: left;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
background: #b4e0f1;
}

menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 0 5px;
border-right:1px dashed #000;
}

menu li{
float: left;
width: 16.6%;
list-style-type: none;
line-height: 120%;
text-align: center;
font-size: 20px;
font-weight: bold;
border-left:1px dashed #000;
}
menu li.m3{
}
menu li.m2{
display: none;
}

menu li .f13{
font-size: 13px;
}

menu li a:link,menu li a:visited,menu li.m1 a:link,menu li.m1 a:visited,menu li.m3 a:link,menu li.m3 a:visited{
display: block;
width: 100%;
height: 70px;
text-align: center;
padding: 7px 0 3px;
text-decoration: none;
}
menu li.m1 a:link,menu li.m1 a:visited,menu li.m3 a:link,menu li.m3 a:visited{
height: 70px;
padding: 22px 0 13px;
}

menu li a:hover,menu li.m1 a:hover,menu li.m2 a:hover,menu li.m3 a:hover{
text-decoration: underline;
}

@media only screen and (max-width: 1080px) {
menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #b4e0f1;
}

menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
border-right:1px dashed #000;
}

menu li{
float: left;
width: 33.3%;
list-style-type: none;
line-height: 120%;
text-align: center;
font-size: 14px;
font-weight: bold;
border-left:1px dashed #000;
border-bottom:1px dashed #000;
min-height: 65px;
}
menu li.m3{
display: none;
}
menu li.m2{
display: block;
}

menu li .f13{
font-size: 13px;
}

menu li a:link,menu li a:visited,menu li.m1 a:link,menu li.m1 a:visited,menu li.m2 a:link,menu li.m2 a:visited,menu li.m3 a:link,menu li.m3 a:visited{
display: block;
width: 100%;
height: auto;
text-align: center;
padding: 15px 0 0;
text-decoration: none;
}
menu li.m1 a:link,menu li.m1 a:visited,menu li.m2 a:link,menu li.m2 a:visited,menu li.m3 a:link,menu li.m3 a:visited{
height: auto;
padding:3px 0 0;
line-height: 60px;
}

menu li a:hover,menu li.m1 a:hover,menu li.m2 a:hover,menu li.m3 a:hover{
text-decoration: underline;
}
}

@media only screen and (max-width: 480px) {
menu{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	background:none;
	background-size: 100% 100%;
	background-color: #eee;
}
menu ul{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	text-align:center;
    border-right:none;
}
#hmenu{
	display: none;
}
#hmenu li{
	width: 100%;
}

menu li{
	width:100%;
	font-size:13px;
	padding:0;
	margin: 0;
	line-height:120%;
    border-left:none;
	border-bottom: 1px solid #666;
    min-height: auto;
    font-weight: bold;
}

#toggle{
	display: block;
	position: relative;
	width: 100%;
	background: #b4e0f1;
}
#toggle a{
	display: block;
	position: relative;
	padding: 12px 0 10px;
	border-bottom: 1px solid #3C3322;
	color: #3C3322;
	text-align: center;
	text-decoration: none;
}

#toggle a:hover{
	color:#fff;
}

#toggle a:visited{
	color:#3C3322;
}

a:active{
	outline:0;
	color:#fff;
}
#toggle:before{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #000;
}
#toggle a:before, #toggle a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 4px;
	background: #b4e0f1;
}
#toggle a:before{
	margin-top: -6px;
}
#toggle a:after{
	margin-top: 2px;
}
menu li a:link,menu li a:visited,menu li.m1 a:link,menu li.m1 a:visited,menu li.m2 a:link,menu li.m2 a:visited,menu li.m3 a:link,menu li.m3 a:visited{
display: block;
width: 100%;
height: auto;
text-align: center;
padding: 15px 0;
text-decoration: none;
}
menu li.m1 a:link,menu li.m1 a:visited,menu li.m2 a:link,menu li.m2 a:visited,menu li.m3 a:link,menu li.m3 a:visited{
height: auto;
padding: 15px 0;
line-height: 120%;
}
}
/*メイン
--------------------------------------------------------------------------*/
main{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	margin: 20px 0 0;
	padding: 0 15% 50px;
}
@media only screen and (max-width: 1440px) {
main{
	margin: 30px 0 0;
	padding: 0 10% 50px;
}
}
@media only screen and (max-width: 1280px) {
main{
	margin: 30px 0 0;
	padding: 0 5% 50px;
}
}

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

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

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

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

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

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

#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: left;
max-width: 100%;
}

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

main #banner p{
float: left;
width: 65%;
display: block;
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{
	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: left;
}

iframe{
clear: both;
float: left;
width: 100%;
height: 400px;
margin: 0 0 50px;
padding: 0;
}

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

.edit-link{
display: none;
}

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

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

#sub-page img.pictright{
float: right;
margin: 0 0 0 15px;
}

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 0 50px;
padding: 15px 0 10px;
color: #111;
font-weight: normal;
font-size: 25px;
line-height: 100%;
text-align: left;
border-left: 30px solid #c50f43;
text-indent: 1em;
}
header.entry-header{
padding: 0;
background: none;
}

#sub-page h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 20px;
padding: 0 0 5px;
font-weight: bold;
font-size: 25px;
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 30px;
padding: 0;
}

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

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

.de-box{
float: left;
width: 45%;
height: auto;
margin: 0 5% 0 0;
padding: 0;
}

#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: 20px;
background: #fff;
text-indent: 1em;
border-bottom: 3px solid #0078a5;
}

.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: 15%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-weight: bold;
line-height: 150%;
font-size: 15px;
}

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

#blog{
}

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

#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: 25px;
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;
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#3b3b3b;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
 
#page-top p:hover{
	background:#8b8b8b;
}
 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 15% 5px;
}
@media only screen and (max-width: 1440px) {
footer{
padding: 0 5% 5px;
}
}
@media only screen and (max-width: 1280px) {
footer{
padding: 0 1% 5px;
}
}

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

footer li{
float: left;
list-style-type: none;
font-size: 15px;
margin: 0 2% 0 0;
padding: 0;
line-height: 100%;
}
footer li.bno{
}
@media only screen and (max-width: 1080px) {
footer li{
margin: 0 2% 10px 0;
}
}
@media only screen and (max-width: 835px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0px;
}

footer ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #fff;
border-top:1px dashed #000;
border-left:1px dashed #000;
}

footer li{
float: left;
display: block;
width: 50%;
list-style-type: none;
font-size: 13px;
margin: 0;
padding: 0;
line-height: 100%;
border-right:1px dashed #000;
border-bottom:1px dashed #000;
}
footer li.bno{
display: none;
}

footer li a:link,footer li a:visited{
display: block;
padding: 15px 0 10px;
text-decoration: none;
}
footer li a:hover{
text-decoration: underline;
}
}
@media only screen and (max-width: 480px) {
footer ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #fff;
border-top:1px dashed #000;
border-left:none;
}
footer li{
float: left;
display: block;
width: 100%;
list-style-type: none;
font-size: 13px;
margin: 0;
padding: 0;
line-height: 100%;
border-right:none;
border-bottom:1px dashed #000;
}

footer li a:link,footer li a:visited{
display: block;
padding: 15px 0 10px;
text-decoration: none;
}
footer li a:hover{
text-decoration: underline;
}
}

footer h6{
float: left;
height: auto;
margin: 15px 0 0;
padding: 0;
text-align: left;
line-height: 130%;
color: #111;
font-weight: bold;
font-size: 30px;
}
footer h6 .f-title{
font-size: 13px;
font-weight: normal;
line-height: 120%;
}
footer h6 a:link,footer h6 a:visited{
text-decoration: none;
color: #111;
}
@media only screen and (max-width: 1080px) {
footer h6{
margin: 5px 0 0;
font-size: 25px;
}
}
@media only screen and (max-width: 835px) {
footer h6{
margin: 0px 0 0;
font-size: 20px;
}
}
@media only screen and (max-width: 480px) {
footer h6{
margin: 0px 0 0;
font-size:17px;
}
}

#footer-logo{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0;
padding: 5px 0 0;
}
#footer-logo img{
float: left;
margin: 0 2% 0 0;
}
@media only screen and (max-width: 1080px) {
#footer-logo{
width: 50%;
}
#footer-logo img{
max-width: 10%;
}
}
@media only screen and (max-width: 835px) {
#footer-logo{
width: 80%;
padding: 10px 1% 0;
}
}

#footer-tel{
float: right;
width: 40%;
height: auto;
margin: 0;
padding: 30px 0 0;
text-align: right;
}
#footer-tel img{
display: inline;
margin: 0 0 0 5%;
}
#footer-tel img.bno{
display: none;
}
@media only screen and (max-width: 1080px) {
#footer-tel{
width: 50%;
padding: 0px 0 0;
}
#footer-tel img{
max-width: 45%;
}
}
@media only screen and (max-width: 835px) {
#footer-tel{
width: 20%;
padding:5px 0 0;
}
#footer-tel img{
display: none;
}
#footer-tel img.bno{
display: inherit;
max-height: 40px;
}
}
@media only screen and (max-width: 480px) {
#footer-tel img.bno{
max-height: 35px;
margin: 0 10% 0 0;
}
}