@charset "utf-8";

/*

	[SITE] 
	[FILE] /common/css/mobile.css

*/

*{box-sizing:border-box;}

@media (max-width: 800px){
	
/*================================================================================
container
================================================================================*/
#container {
	width:100%;
}


/*================================================================================
header
================================================================================*/
header {
	width:100%;
	padding: 20px;
}
header img{
	width:80%;
}


/*================================================================================
main
================================================================================*/
main {
	width:100%;
	border-top: 1px solid #C7E8FA;
}


/*================================================================================
main/article
================================================================================*/
article {
	width:100%;
}
article img {
	width: 100%;
}

/*
ページタイトル
--------------------------------------------------------------------------------*/
article h1 {
	text-align: center !important;
}

/*
パンくず
--------------------------------------------------------------------------------*/
article p#topic-path {
	margin: 0 20px;
}

/*
main/article/section
--------------------------------------------------------------------------------*/
section {
	margin: 20px;
}


/*================================================================================
main/aside
================================================================================*/
aside {
	width:auto;
	border-right: none;
}


/*================================================================================
footer
================================================================================*/
footer {
	width:100%;
}
footer ul {
	display:grid;
}


/*-------------------------------------------------------------------------------------
sp
-------------------------------------------------------------------------------------*/
@media (max-width: 800px){

	body {
		background: #fff;
		/*margin: 0;
		font-family: arial;*/
		width: 100vw;
		height: 100vh;
		animation: bugfix infinite 1s;
		-webkit-animation: bugfix infinite 1s;
	  }
	  
	  @keyframes bugfix {
		from {
		  padding: 0;
		}
		to {
		  padding: 0;
		}
	  }
	  @-webkit-keyframes bugfix {
		from {
		  padding: 0;
		}
		to {
		  padding: 0;
		}
	  }
	  #overlay-button {
		position: absolute;
		right: 1em;
		top: 1em;
		padding: 26px 11px;
		z-index: 5;
		cursor: pointer;
		user-select: none;
	  }
	  #overlay-button span {
		height: 4px;
		width: 35px;
		border-radius: 2px;
		background-color: #C7E8FA;
		position: relative;
		display: block;
		transition: all .2s ease-in-out;
	  }
	  #overlay-button span:before {
		top: -10px;
		visibility: visible;
	  }
	  #overlay-button span:after {
		top: 10px;
	  }
	  #overlay-button span:before, #overlay-button span:after {
		height: 4px;
		width: 35px;
		border-radius: 2px;
		background-color: #C7E8FA;
		position: absolute;
		content: "";
		transition: all .2s ease-in-out;
	  }
	  #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
		background: #C7E8FA;
	  }
	  
	  input[type=checkbox] {
		display: none; 
		
	  }
	  
	  input[type=checkbox]:checked ~ #overlay {
		visibility: visible; 
	  }
	  
	  input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
		background: transparent;
		
		
	  }
	  input[type=checkbox]:checked ~ #overlay-button span:before {
		transform: rotate(45deg) translate(7px, 7px);
	  
	  }
	  input[type=checkbox]:checked ~ #overlay-button span:after {
		transform: rotate(-45deg) translate(7px, -7px);
	  }
	  
	  #overlay {
		height: 80vh;
		width: 100vw;
		background: #fff;
		z-index: 2;
		visibility: hidden;
		position: fixed;
		opacity: 0.95;
	  }
	  #overlay ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		height: 80vh;
		padding-left: 0;
		list-style-type: none;
	  }
	  #overlay ul li {
		/*padding: 1em;*/
		display: grid;
	  }
	  #overlay ul li a {
		/*color: #fff;*/
		text-decoration: none;
		font-size: 1em;
		border-left: none;
	  }
	  #overlay ul li a:hover {
		/*color: #000!important;*/
	  }
	
	}
}