@charset "utf-8";

/* タブレット対応 (768px以下) */
@media screen and (max-width: 768px) {
    #container {
        width: 100%;
        max-width: 768px;
        padding: 0 10px;
    }
    
    #logo {
        width: 100%;
    }
    
    #logoimg {
        margin-left: 10px;
		width:30vw;
		margin-right:70vw;
    }
    
    #logo h1 {
        margin-left: 0px;
        font-size: 14pt;
		padding-left:2vw;
    }
    
    #spmenu {
		display:block;
        width: 100%;
    }
    
	#spmenu ul{
		margin-left:5px;
		list-style:none;
		overflow:hidden;
	}
	
    #spmenu li{
		float:left;
		color:#fff;
		text-align:center;
		font-size:10pt;
		padding:2px 0px;
	}
	
	#spmenu a{
		display:block;
		color:#fff;
		text-decoration:none;
	}
    
     #sm1 {
		width: 45px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm2 {
		width: 120px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm3 {
		width: 120px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
	#sm4 {
		width: 140px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm5 {
		width: 140px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm6 {
		width: 65px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm7 {
		width: 120px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm8 {
		width: 70px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm9 {
		width: 50px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    
	#topmenu{
		display:none;
	}
	
    #cartlink {
        left: 500px;
        top: -68px;
    }
    
    #slide {
        width: 100%;
        height: 400px;
    }
    
    #slide img {
        width: 100%;
        height: auto;
    }
    
    .sq {
        font-size: 16pt;
        margin: 20px 20px 10px 20px;
    }
    
    #links {
        margin-left: 20px;
        width: calc(100% - 40px);
        flex-direction: column;
        gap: 20px;
    }
    
    #bottom {
        width: 100%;
    }
    
    #bottom1 {
        flex-direction: column;
    }
    
    #bottom_l,
    #bottom_r {
        width: 100%;
    }
    
    #bottom_r #grant {
        width: calc(100% - 30px);
    }
    
    #bottom #copyright {
        width: 100%;
    }
}

/* スマートフォン対応 (480px以下) */
@media screen and (max-width: 480px) {
    #container {
        padding: 0 0px;
    }
    
    #topnavi {
        margin-right: 10px;
        font-size: 10pt;
    }
    
   #logo {
        width: 100%;
    }
    
    #logoimg {
        margin-left: 10px;
		width:30vw;
		margin-right:70vw;
    }
    
    #logo h1 {
        margin-left: 0px;
        font-size: 12pt;
		padding-left:3vw;
    }
    
    #spmenu {
		display:block;
        width: 100%;
    }
    
	#spmenu ul{
		margin-left:5px;
		list-style:none;
		overflow:hidden;
	}
	
	#spmenu li{
		float:left;
		color:#fff;
		text-align:center;
		font-size:10pt;
		padding:2px 0px;
	}
	
	#spmenu a{
		display:block;
		color:#fff;
		text-decoration:none;
	}
    
    #sm1 {
		width: 45px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm2 {
		width: 120px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm3 {
		width: 120px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
	#sm4 {
		width: 140px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm5 {
		width: 140px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm6 {
		width: 65px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm7 {
		width: 120px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm8 {
		width: 70px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    #sm9 {
		width: 50px;
		margin-right:3px;
		background-color:#799FC9;
		margin-bottom:3px;
	}
    
	#top{
		margin-bottom:20px;
	}
	
	#topmenu{
		display:none;
	}
	
    #cartlink {
        left: 300px;
        top: -58px;
        width: 60px;
        height: 25px;
        background-size: contain;
    }
    
    #slide {
        height: 250px;
    }
    
    .sq {
        font-size: 14pt;
        margin: 15px 15px 8px 15px;
    }
    
    #links {
        margin-left: 10px;
        width: calc(100% - 20px);
    }
    
    #bottom_l dl {
        margin-left: 15px;
    }
    
    #bottom_l dt {
        font-size: 11pt;
    }
    
    #bottom_l dd {
        font-size: 10pt;
    }
    
	#bottom_r{
		margin-top:0px;
	}
	
    #bottom_r ul {
        margin-left: 10px;
    }
    
    #bottom_r li {
        font-size: 9pt;
        line-height: 20pt;
        margin-right: 10px;
    }
    
    #bottom_r #grant {
        margin-left: 10px;
        font-size: 9pt;
        line-height: 13pt;
		padding-top:10px;
    }
}

/* 小さなスマートフォン対応 (360px以下) */
@media screen and (max-width: 360px) {
    #logo h1 {
        margin-left: 80px;
        font-size: 11pt;
    }
    
    #topmenu li {
        font-size: 8pt;
    }
    
    #tm1 { width: 30px; }
    #tm2 { width: 70px; }
    #tm3 { width: 80px; }
    #tm4 { width: 80px; }
    #tm5 { width: 40px; }
    #tm6 { width: 70px; }
    #tm7 { width: 45px; }
    #tm8 { width: 35px; }
    
    #cartlink {
        left: 250px;
        width: 50px;
        height: 20px;
    }
    
    #slide {
        height: 200px;
    }
    
    .sq {
        font-size: 13pt;
        margin: 12px 12px 6px 12px;
    }
}