body
{
	margin: 0 ;
	padding: 0 ;
	font-size: 1rem ;
	line-height: 1.618 ;
    font-family: 
        "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
}

.header
{
	border-bottom: 3px solid #888 ;		
	text-align: center ;			
	padding: 1em 0 ;			
	margin-bottom: 2em ;			
	background: #e8e8e8 ;			
	display: flex; 
	justify-content: center; 
	align-items: center; 
}



.logo-wrapper
{
	margin: 0 ;
	padding: 0 ;
	line-height: 1 ;
}

.logo
{
	width: 100px ;
	height: auto ;
}


.footer
{
	border-top: 3px solid #888 ;		
	text-align: center ;			
	margin-top: 2em ;			
	padding: 1em 0 ;		
	background: #e8e8e8 ;
}

.wrapper
{
	width: 1000px ;
	margin: 0 auto ;		
	padding: 0 ;			
}
p
{
    font-size:1rem;
}


h1
{
    font-size: 1.6rem;
}

h2{
    font-size:1.6rem;
    background-color:darkseagreen
}
h3{
    font-size:1.2rem;
    background-color:darkseagreen}

.main
{
	width: 618px ;
	padding: 20px ;					
	border: 1px solid rgba(0,0,0,.1) ;		
}

.side
{
	width: 320px ;
}

.main
{
	float: left ;	
}

.side
{
	float: right ;	
}

.wrapper
{
	overflow: hidden ;
}


/* ƒXƒ}ƒz—p */
@media screen and (max-width:479px)
{
	body
	{
		font-size: 1rem ;
        font-family: "Helvetica Neue",
            Arial,
            "Hiragino Kaku Gothic ProN",
            "Hiragino Sans",
            Meiryo,
            sans-serif;
	}
	.logo
	{
		width: 200px ;
	}
    .wrapper
	{
		width: auto ;
		padding: 0 10px ;
	}
    .main
	{
		width: auto ;
		padding: 0 ;	
		border: none ;	
	}

	.side
	{
		width: auto ;
	}
    .main , .side
	{
		float: none ;
	}
    h1{
        font-size: 1.3rem;
    }
}