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

*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
	
}
.wrap{
	width:1100px;
	margin: 0 auto;
}
.txt_center{
    text-align: center;
}
header{
	border-bottom: 3px solid #cccccc;
}

header h1{
	float: left;
}
header .wrap div {
    float: right;
    display: flex;
    width: 60%;
    margin-top: 20px;    
}
header .wrap div a{
    flex: 1;
    text-decoration: none;
}
header .wrap div img{
    width: 100%;
}
header .wrap div a:first-child {
	
    display: block;
	text-align: center;
	text-decoration: none;
    border: 2px solid #FF9c06;
    background: #fabf00;
    border-radius: 10px;
    margin: 0 5px;
    height: 96px;
    color: #fff;
}
header .wrap div a:first-child span{
	font-size: 14px;
    display: block;
	text-align: center;
}
header .wrap div a:first-child span:nth-child(2){
	font-size: 42px;
}
header .wrap div a i{display:none;}
a#gnav_menu_btn {display: none;}
header ul{
	clear: both;
	display: flex;
	list-style: none;
}
header li{
	flex: 1;
	text-align: center;
	border: 1px solid #000000; 
	background: #E99213;
	padding: 10px 0;
}
header li a{
    display: block;
    text-decoration: none;
    
}
main{padding: 50px 0;}
section#top img{
    width: 100%;
}
section#topic ul{
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
        
}
section#topic{
    padding: 50px 0;
}
section#topic li{
    width: 30%;
    position: relative;
    padding-bottom: 70px;
}
section#topic li div{
    text-align: center;
    height: 250px;
    border: 2px solid black; 
}

section#topic li img{
    height: 100%;
}
section#topic h3 {font-size: 30px;}
section#topic li span{
	border-bottom: 1px solid black;
	font-size:25px;
}
section#topic .price{
    font-size: 30px;
    text-align: right;
    margin-top: 15px;
    position: absolute;
    bottom: 0;
    right: 23px;
    color: #9c2525;
}
section#topic .price span{
	border: none;
	font-size: 22px;
}
section#recomend{
    padding: 50px 0;
}
section#recomend h2{
    margin-bottom: 30px;
    background: #F1B312;
    text-align: center;
    padding: 5px 10px;
}

section#recomend dl{
    display: flex;
    margin-bottom: 50px;
}
section#recomend dt{
    flex: 1;
}
section#recomend dt img{
    width: 100%;
}
section#recomend dd{
    flex:3;
    padding-left: 30px;
}
section#recomend dd h3{
    background: #FAF920;
    margin-bottom: 10px;
    padding: 5px 10px;
}
section#recomend dd p{
   font-size: 19px;
    line-height: 1.5;
    
}
footer{
	border-top: 3px solid #cccccc;
}

footer h1{
	float: left;
}
footer .wrap div {
    float: right;
    display: flex;
    width: 60%;
    margin-top: 20px;    
}
footer .wrap div a{
    flex: 1;
}
footer .wrap div img{
    width: 100%;
}
footer .wrap div a:first-child {
	font-size: 42px;
    display: block;
	text-align: center;
	text-decoration: none;
    border: 2px solid #FF9c06;
    background: #fabf00;
    border-radius: 10px;
    margin: 0 5px;
    height: 96px;
    color: #fff;
}
footer .wrap div a:first-child span{
	font-size: 14px;
    display: block;
	text-align: center;
	
}
h2{
    margin-bottom: 30px;
    background: #F1B312;
    text-align: center;
    padding: 5px 10px;
}







@media only screen and (max-width: 768px) {
	.wrap {width: 100%;}


	
	header{
		border-bottom: 3px solid #cccccc;
		display: flow-root;
	}

	header h1{
		width: 30%;
	}
	header h1 a img{width: 100%;}
	header .wrap div {
		justify-content: flex-end;
		margin-top: 0;    
	}
	header .wrap div a{
		flex: none;
		margin-left: 18px;
	}
	header .wrap div a i{
		font-size: 2.5em;
		color: #fabf00;
        display: block;
	}
header .wrap div a:first-child {
	font-size: 1em;
    display: inline;
    border: none;
    background: none;
    margin: 0;
    height: auto;
    color: #fabf00;
}
	header .wrap div a:first-child span{display:none;}
	header .wrap div a:nth-child(2) img{display:none;}

header ul{
	display: block;
	 display: none;
}
header li{
	flex: 1;
	text-align: center;
	border: 1px solid #000000; 
	background: #E99213;
	padding: 10px 0;
}
header li a{
    display: block;
    text-decoration: none;
    
}
	
	
	
	
	
	
	
	
	
	a#gnav_menu_btn {
      width: 25%;
      height: 35px;
      display: block;
      position: relative;
    }
	a#gnav_menu_btn:hover{opacity: 1;}
	a#gnav_menu_btn span{
		display: block;
        position: absolute;
        top: 45%;
        right: 50%;
        bottom: auto;
        transform: translate(50%, 0);
        width: 60%;
        height: 6px;
        background: #fabf00;
        transition: .2s;
	}
	a#gnav_menu_btn span:before,
	a#gnav_menu_btn span:after{
		display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 6px;
        background: #fabf00;
        transition: .3s;
	}
	a#gnav_menu_btn span:before{margin-top: -16px;}
	a#gnav_menu_btn span:after {margin-top: 10px;}
	a#gnav_menu_btn .sp_menu_close {
		background: transparent;
	}
	a#gnav_menu_btn .sp_menu_close:before,
	a#gnav_menu_btn .sp_menu_close:after{margin-top: 0;}
	a#gnav_menu_btn .sp_menu_close:before{transform: rotate(-45deg);}
	a#gnav_menu_btn .sp_menu_close:after{transform: rotate(-135deg);}
	
	

    
    
    main {padding: 3% 0;}
 
    section{
        padding: 0 3%; 
    }
    
    section#topic{padding: 0 3%;}
    section#topic ul{display: block;}
    section#topic li div{height: 150px;}
    section#topic li {
        width: 80%;
        padding-bottom: 30px;
        margin: 0 auto;
    }
    section#topic h3 {font-size: 20px;}
    section#topic li span{
        border-bottom: 1px solid black;
        font-size:18px;
    }
    section#topic .price{
        font-size: 20px;
        color: #9c2525;
    }
    section#topic .price span{font-size: 18px;}

    section#recomend{
        padding: 0 3%; 
    }
    section#recomend dl {display: block;}
    section#recomend dt {
      flex: none;
      width: 70%;
      margin: 0 auto;
    }
    section#recomend dd {
      padding-left: 0;
      margin-top: 10px;
    }
    footer h1{
        float: none;
        width:60%;
        margin: 0 auto;
    }
    footer .wrap div {
        float: none;
        display: block;
        width: 80%;
        margin: 20px auto;   
    }
    footer .wrap div a{
        flex: 1;
        display: block;
        margin: 20px 0; 
    }
        footer img {width:100%;}
    footer .wrap div a:first-child {
        font-size: 30px;
        margin: 0;
        height: auto;
    }

}