@charset "utf-8";


/* メインメニュー　PC用
------------------------------------------------------------*/
@media only screen and (min-width: 994px){
    nav#mainNav{
    clear:both;
    position:relative;
    z-index:200;
    background:url(images/mainnavBg.png) repeat-x;
    }
    
    /* 【構文エラー修正】ulへの不適切な content:"" を削除 */
    nav#mainNav ul{
    display: table;
    clear: both;
    zoom:1;
    border-right:1px solid #265b8b;
    border-left:1px solid #265b8b;
    }

    nav#mainNav ul li{
    float: left;
    position: relative;
    border-left:1px solid #265b8b;
    border-right:1px solid #70a7d7;
    }
    
    nav#mainNav ul li:first-child{
    border-left:1px solid #70a7d7;
    }

    /* 【レガシーコード削除】IE6ハック（_float）を完全に排除 */
    nav#mainNav ul li a{
    display: block;
    text-align: center;
    color:#fff;
    height:40px;
    line-height:40px;
    font-size:110%;
    padding:15px 90px 5px;
    }
    
    nav#mainNav ul li a span,nav#mainNav ul li a strong{
    display:block;
    font-size:90%;
    line-height:1.4;
    }
    
    nav#mainNav ul li a span{
    font-size:70%;
    color:#fff;
    }

    nav div.panel{
    display:block !important;
    float:left;
    }
  
    a#menu{display:none;}
  
    nav#mainNav ul li.current-menu-item, nav#mainNav ul li:hover, nav#mainNav ul li.current-menu-parent{
    background:url(images/mainnavBg.png) repeat-x 0 100%;
    }
  
    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:0;
    z-index:500;
    border:0;
    }
    
    nav#mainNav ul li li,nav#mainNav ul li li:first-child{
    padding:0 0 0 10px;
    margin:0;
    float: none;
    height:40px;
    line-height:40px;
    width:160px;
    border:0;
    background:url(images/mainnavBg.png) repeat-x 0 -2px;
    }
    
    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.current-menu-item a{font-weight:bold;}
    
    nav#mainNav ul li li:hover{background:url(images/mainnavBg.png) repeat-x 0 100%;}
  
    nav#mainNav ul li:hover ul li:last-child{border:0;}
}

/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:993px){
    nav#mainNav{
    clear:both;
    width:100%;
    margin:0 auto;
    padding:10px 0;
    }
    
    nav#mainNav .inner{width:98%;}
    
    nav#mainNav a.menu{
    width:100%;
    display:block;
    height:40px;
    line-height:40px;
    font-weight: bold;
    text-align:left;
    color:#fff;
    background: #357dbd url(images/menuOpen.png) no-repeat 5px 10px;
    }
    
    nav#mainNav a#menu span{padding-left:35px;}
    
    nav#mainNav a.menuOpen{
    border-bottom:0;
    background: #56a8e7 url(images/menuOpen.png) no-repeat 5px -32px;
    }
    
    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 solid #56a8e7;
    background:#fff;
    }

    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{
    color:#fff;
    background:#357dbd;
    }
    
    nav#mainNav ul li.current-menu-item li a{color:#777}

    /* 【スマホ表示バグ修正】横並び（float:left）を解除し、スマホの縦並び表示に最適化 */
    nav#mainNav ul li li{
    float:none;
    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:#fff 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:#357dbd url(images/sub1.png) no-repeat 20px -61px;
    }
    
    nav#mainNav ul li li:last-child a{background:#fff 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:#357dbd url(images/subLast.png) no-repeat 20px -65px;}
    
    nav div.panel{float:none;}
    
    #mainImg{margin-bottom:20px;}
}


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

    #header h1, #header p{padding:5px 10px;}
    #header h2{padding:20px 10px 0;}
    #header ul{padding:20px 10px 10px;}

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

    nav div.panel{float:none;}
    
    #mainImg img{width:98%;height:auto;}

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

    #footer{margin:0;border:0;text-align:center;}
    
    #footer ul{  text-align:center;  }
    #footer ul li{margin-right:20px;}
}


/* 幅648px以下から  トップページの３画像調節
------------------------------------------------------------*/
@media only screen and (max-width: 648px){
    .thumbWrap{width:100%;margin:0 auto;text-align:center;}
    .thumbWrap ul.thumb li{width:30%; float:left;margin:0 1% 0 2%;}
    .thumbWrap img{width:100%;height:auto;}
}


/* 幅644px以下から ヘッダー等微調節
------------------------------------------------------------*/
@media only screen and (max-width: 644px){
    #header{text-align:center;}
    #header h2,#header ul{float:none;}
    #headerInfo{width:250px;margin:0 auto;}
    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;}
}