@charset "utf-8";
/* CSS Document */

/* screenwidth less than 980px
--------------------------------------------------------------------- */
@media only screen and (max-width: 980px) {

/*base */

p.first-read span{
   width:80%;
   margin:0 auto;
   display: block;
}


#header{
	width:100%;
	margin: 0 auto;
}




#header-left{
	width:52%;
}


#header-left h1{
	width:99%;
	margin:10px 0 5px auto;
	padding:0;	
}





#header-left h1 a{
	display:block;
    text-decoration: none;
}

#header-middle{
	width:193px;
	float:left;
	margin:0;
	padding:0;
	
}

#header-middle h2{
	width:168px;
	height:36px;
	margin:53px auto auto 23px;
	padding:0;
	
}

#header-middle h2 a{
	width:168px;
	height:36px;
	display:block;
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
	background:url(../images/header_btn.gif) no-repeat;
}

#navi{
	display: none;
}

#main-container{
	width:100%;
}

#left{
	display: none;

}

#main{
	width:98%;
	float:none;
	margin:0 auto 15px auto;
}
#topic-path{
   /*width:98%;*/
   display: none;
}


#main-container h2{
   margin: 10px auto 15px auto;
   font-family: 'Mochiy Pop One', sans-serif;
   font-size:22px;
   font-weight: normal;
   text-indent:4em;
   background: url(../images/h2_bg.gif) no-repeat left top;
   color: #02b2a5;
   width: 95%;
   padding: 20px 0 10px 0;
   height: auto;
   
}

#main-container h3{
   width: 95%;
   padding: 0px 0 10px 0;   
   margin: 10px auto 15px auto;
}

#main-container h4{
   margin: 10px auto 15px auto;
    width: 90%;
}
#main-container p{
   margin:0 5% 10px 5%;
}

#footer #footer-link{
	width:100%;
}

#footer #footer-link{
	width:auto;
}

#footer #foonter-container #footer-address{
	/*width:630px;*/
	width:98%;
	margin: 0 auto 5px auto;
}
#copyright dl{
   width:98%;
   margin: 0 auto;
}

#copyright dl dt{
	display: none;
}




}


/* screenwidth less than 920px
--------------------------------------------------------------------- */
@media only screen and (max-width: 920px) {

/*base */
#header-left{
    float: none;
	margin: 0 auto;
	width:100%;
	padding-top: 0;

}
#header-left span{
    display: block;
	
}
#header-left h1{
    width:95%;
	margin: 0 auto 5px auto;
}

#header-middle{
   float: none;
   width:100%;
   margin: 0 auto 5px auto;
   /*display: none;*/

}

#header-middle h2{
    display: none;
}

#header-middle h3{
   display: block;
   width:90%;
   margin: 0 auto;
   background: #6fb500;
   text-align: center;
   font-size:20px;
   font-family: "M PLUS Rounded 1c"; 
   padding: 5px 0;
   font-weight: 600;

}

#header-middle h3 span{
   transform:rotate(90deg);
   display: inline-block;
   font-size:18px;
   font-weight: normal;
   margin-left:5px;


}


#header-middle h3 a{
   text-decoration: none;
   display: block;
   color: #FFF;

}

#header-right{
   display: none;
}
}

/* screenwidth less than 700px
--------------------------------------------------------------------- */
@media only screen and (max-width: 700px) {

#main .hug-table_container{
    margin-left:5%;

}
}

/* screenwidth less than 680px
--------------------------------------------------------------------- */
@media only screen and (max-width: 680px) {

dl#sns_index dt img{
    width:50%;
	height: auto;
}


dl#sns_index dd {
    width: 90%;
}

}



/* screenwidth less than 640px
--------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {


#main .hug-table_container{
   width:99%;
   border:1px solid #FFF;
   text-align: left;
}


#directions table.hug-table{
   width:90%;
   margin: 0 auto 20px 0;
   border:1px solid #CCC;
   padding: 2px;
}
#main table.hug-table th{
   display: block;
   width:100%;
   padding: 5px 0;
    border: 0;   
}
#main table.hug-table td{
    display: block;
    width: 98%;
    padding: 5px 5px 5px 5px;
    border: 0;
}

#main table.hug-table th:before{
    content: "■";
}

}

/* screenwidth less than 550px
--------------------------------------------------------------------- */
@media only screen and (max-width: 550px) {

dl#sns_index dd {
    width: 99%;
}

}

/* screenwidth less than 502px
--------------------------------------------------------------------- */
@media only screen and (max-width: 502px) {

dl#sns_index dd ul li{
     width: 95%;
	 margin: 0 auto 20px auto;
}
}

/* screenwidth less than 480px
--------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

p.first-read{
   display: none;
}
#header-left p{
   text-align: center;
}

}

/* screenwidth less than 420px
--------------------------------------------------------------------- */
@media only screen and (max-width: 420px) {

#main-container h2{
    font-size: 20px;
    background-position: center bottom;
    padding: 0px 0 10px 10px;
    text-indent: 0em;
    width: 90%;

}

#main-container h2 img{
    display: inline;
	margin-right: 5px;
    vertical-align: bottom;	
}

}

/* screenwidth less than 380px
--------------------------------------------------------------------- */
@media only screen and (max-width: 380px) {
dl#sns_index dt{ 
    border-top: 2px solid #ed7836;
	padding-top: 5px;
}



dl#sns_index dt img {
    width: 70%;
	display: block;
	margin: 0 auto 2px auto;
}
dl#sns_index dt span{
    width: 100%;
	display: block;
	margin: 0 auto;
	padding: 3px 0;
}



}

/* screenwidth less than 370px
--------------------------------------------------------------------- */
@media only screen and (max-width: 370px) {
#header-left span{
    text-align: center;
}

}

/* screenwidth less than 300px
--------------------------------------------------------------------- */
@media only screen and (max-width: 300px) {

#main-container h2{
    font-size: 18px;
	
	
}
}