@charset "utf-8";

/* レイアウト
------------------------------------------------------------*/

/* ヘッダー
------------------------------------------------------------*/
#header {
  padding: 20px 0;
}

#header h1{
margin-bottom:20px;
text-align:center;
color:#000000;
font-size:160%;
font-weight:bold;
}




/* メインメニュー　PC用
------------------------------------------------------------*/

@media only screen and (min-width:1025px){

nav#mainnav{
position:relative;
margin-top:40px;
}

nav#mainnav ul{
display:flex;
justify-content:center;
align-items:center;
}

nav#mainnav ul li{
float:left;
border-right: 1px solid #000;
}

nav#mainnav ul li a{
display:block;
text-align:center;
_float:left;
padding:15px 20px;
font-size:1.6rem;

color:#000000;
}

nav#mainnav ul li a span,nav#mainnav ul li a strong{
display:block;
font-size:90%;
line-height:1.7;
}

nav#mainnav ul li a span{
font-size:70%;
color:#35cc91;
}

nav#mainnav ul li a:hover span, nav#mainnav ul li a:hover{
color:#cdcdcd;
}

nav#mainnav ul ul{
width:160px;
border-top:0;
}

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

nav#mainnav ul li:hover ul{
display: block;
position: absolute;
top:65px;
text-align:center;
z-index:500;
}

nav#mainnav ul li li{
background:#ffffff;
border-bottom:1px dotted #cdcdcd;
float: none;
width:160px;
height:40px;
line-height:40px;
margin:0;
}

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

nav#mainnav ul li li a{
width:100%;
height:40px;
padding:0;
line-height:40px;
font-size:95%;
text-lign:center;
}

nav#mainnav ul li li a:hover{
color:#cdcdcd;
}

nav div.panel{
display:block !important;
}

a#menu{
display:none;
}

}


/* iPadサイズ以下（1024px）からアコーディオンメニュー
------------------------------------------------------------*/

@media only screen and (max-width:1024px){

#header{
position:fixed;
width:100%;
z-index:500;
padding: 0;
}

#headerWrap{
position:relative;
width:100%;
height:70px;
background:#ffffff;
border-bottom:1px solid #cccccc;
}



#header h1{
padding-top:13px;
}

#header h1 img{
max-height:38px;
text-align: left;
width:auto !important;
}

a#menu{
display:inline-block;
position:relative;
width:40px;
height:40px;
margin:10px;
}

#menuBtn{
display:block;
position:absolute;
top:60%;
left:50%;
width:18px;
height:2px;
margin:-1px 0 0 -7px;
background:#000000;
transition:.2s;
}

#menuBtn:before, #menuBtn:after{
display:block;
content:"";
position:absolute;
top:50%;
left:0;
width:18px;
height:2px;
background:#000000;
transition:.3s;
}

#menuBtn:before{
margin-top:-7px;
}

#menuBtn:after{
margin-top:5px;
}

a#menu .close{
background:transparent;
}

a#menu .close:before, a#menu .close:after{
margin-top:0;
}

a#menu .close:before{
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}

a#menu .close:after{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
}

.panel{
width:100%;
display:none;
overflow:hidden;
position:relative;
left:0;
top:0;
z-index:100;
}

#mainnav{
position:absolute;
top:0;
width:100%;
text-align:right;
z-index:500;
}

#mainnav ul{
background:#ffffff;
text-align:left;
}

#mainnav li a{
position:relative;
display:block;
padding:12px 25px;
border-bottom:1px solid #eeeeee;
color: #000000;
font-weight:bold;
}

#mainnav ul li a span{
display:none;
}

#mainnav ul li li{
border:0;
}

#mainnav ul li li a{
padding-left:40px;
}

}


/* iPadサイズ以下（1024px）から 1カラム表示に切り替え
*****************************************************/

@media only screen and (max-width:1024px){

#wrapper{
padding-top:70px;
}

#wrapper, .inner{
width:100%;
}

#header .contact{
display:none;
}

nav#mainNav ul{
margin:0 auto;
}

nav#mainNav ul ul{
padding:0;
}

nav div.panel{
float:none;
}

#mainImg{
z-index:-100;
margin-bottom:30px;
padding-top:70px;
}

#content, #sidebar{
clear:both;
width:95%;
float:none;
margin:0 auto;
padding:10px 0;
}

h2.first{
margin-top:25px;
}

h2.topFirst{
margin-top:-80px;
}

.banner{
width:100%;
margin:0 auto;
text-align:center;
}

p.banner img{
width:100%;
height:auto;
}

section.widget_search{
text-align:center;
}

#footer li{
margin-bottom:10px;
}

}


/* 幅644px以下から ヘッダー等微調節
------------------------------------------------------------*/

@media only screen and (max-width:644px){

#header h2 img{
max-width:90%;
}

#mainImg{
height:350px;
overflow:hidden;
position:relative;
margin-bottom:35px;
}

#mainImg img{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:auto;
height:100%;
}

h2.title{
margin-bottom:35px;
}

ul.post img{
display:block;
margin:5px auto 20px auto;
float:none;
width:100%;
}

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

.alignright,.alignleft{
float:none;
}

}