/********* HTML再定義 ***********************************************/
/* ------------------------------
   max-width 
  数値以下のページで表示
------------------------------ */ 
@media only screen and (max-width: 768px) {



	body {
    background: #512DA8 url(bg-m.png) repeat-x;
    padding: 10px;
    line-height:1.4;
    font-size:16px;
	}

	form textarea {
		width: 95%;
	}

	img {
		max-width : 100%;
		height: auto;
	}
    



div#utility div.utility h3 {
    border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}


	div#container {
    width:100%;
    margin:0 auto;
	padding:0;
    border:0px solid #000;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    background: ;  
	}




    div#header {
        display:none;
    }



    div#footer {
    clear: both;
    text-align: left;
    color: #fff;
    font-size: 12px;
    line-height:1.4;
    letter-spacing: 2px;
    overflow: hidden;   
    height: auto;
    width: 100%;
    border-top: 5px solid #00BCD4;
    padding-bottom:0;
    }


    .foot-menu-box{
    justify-content:flex-start;
    }

    .foot-home{
    padding:10px 5px 10px 10px;
    }



    .main-Container {
    margin: 10px 0 0 0;
	overflow: hidden;
    width: 100%;
    background: #512DA8;
    border-top: 0px solid #dd0000;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    }



	div#content {
		float: none;
		width: 100%;
        padding: 20px 10px;
        margin:0 0 20px 0;
        background:#fff;    
     border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	}

	div#entry div.entry {
		width: 100%;
	}

	div#utility {
		float: none;
		width: 100%;
        margin:0;
        line-height:1.4;
        padding: 20px 10px;
        background:#fff;
     border-radius: 10px 10px 0 0 ;
    -webkit-border-radius: 10px 10px 0 0 ;
    -moz-border-radius: 10px 10px 0 0 ;
	}


    div#utility div.utility div.content {
        font-size: 90%;
	    margin:0;
      }
    div#utility div.utility ul {
	  margin: 0 0 0 1em;
      padding:0;
      font-size:100%;
      }

/* -----max-width end--------- */ 
}




/* ------------------------------
   #menuList スマホ用メニューリスト
------------------------------ */ 
/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */
@media only screen and (max-width: 800px) {
    #menuList ul {
        width: 100%;
    }
 
    #menuList ul li {
        width: 20%;
    }
}
 
/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 768px) {
    #menuList {
        display: none;
    }
 
    #rwdMenuWrap {
       width:100%;
       margin:0 auto;
       border-bottom: 0px solid #114499;  
       border-radius: 5px;
     -webkit-border-radius:5px;
     -moz-border-radius:5px; 
    }
 
    #rwdMenuWrap #switchBtnArea {
        height: 50px;
        position: relative;
        background:#;
    }
    #rwdMenuWrap #switchBtnArea .menulist-site{    
        height:50px;
    }
    #rwdMenuWrap #switchBtnArea img{
       position: absolute;
       top: 5px;
       left: 0px;
    }

   
     #rwdMenuWrap #switchBtnArea #switchBtn {
        top: 5px;
        right: 0px;
        width: 40px;
        height: 40px;
        display: block;
        background: #FFC107;
        position: absolute;
        border-radius: 20px;
     -webkit-border-radius:20px;
     -moz-border-radius:20px;  
    }
 
    #rwdMenuWrap #switchBtnArea #switchBtn span {
        left: 20%;
        width: 60%;
        height: 4px;
        display: block;
        position: absolute;
        background-color: #fff;
        border-radius: 5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;  
        transition: all 0.2s linear;
    }
    #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) {
        top: 10px;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) {
        top: 18px;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) {
        bottom: 10px;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
 
    #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
        top: 18px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
        bottom: 18px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
 
    #rwdMenuWrap ul {
     width: 100%;
     display: none;
       
    }
 
    #rwdMenuWrap li {
     width: 100%;
     border-bottom: #000 0px dotted;
     position: relative;
     font-weight:bold;
    }
 
    #rwdMenuWrap li a {
     display: block; 
     background-color: #fff;
     padding: 5px 0 5px 25px;
     text-decoration: none;
     width: 100%; 
     margin: 0px 0 10px 0;
     font-size: 100%;
     color: #303F9F;
     letter-spacing:2px;
     border-radius: 5px;
     -webkit-border-radius:5px;
     -moz-border-radius:5px;  
    }


      #rwdMenuWrap li a:after {
        content: '';
        top: .7em;
        left: 10px;
        width: 8px;
        height: 8px;
        color: #000;
        display: block;
        position: absolute;
        border-top: 3px solid #303F9F;
        border-right: 3px solid #303F9F;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
 

    #rwdMenuWrap li a:hover{
     background-color:#FFC107;
    
     }

 
}
 

