@charset "utf-8";
@import url("style_qa.css");


li{
		list-style: none;
	}



ul{
	float:left;
	margin-top:30px;
}

.qa {
	text-align: center;
}


.qa h1{
	
	color:black;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	margin:50px;
	border:thin solid #FF83FB;
	padding:100px;
	
}





@media screen and (min-width: 500px) { /*ウィンドウ幅が767px以上の場合に適用*/
	
	
	a{
  padding:2vh 5vw 2vh 0;
  color:#EC7272;
  text-decoration:none;
  font-weight: 1000;
	float:left;
}

a:hover {
	 padding:2vh 5vw 2vh 5vh;
  color:#3F0A0A;
  text-decoration:none;
  font-weight: 1000;
	float:left;
}


body{
	
	width: 100vw;
    text-align: center;
	 
	
}



header {
	height:100vh;
	width:20%;
	position:fixed;
	text-align: left;
	z-index: 2;
	background-color: white;
}

header a {
	text-align: center;
}

header img {
	margin-left:10%;
	height:100%;
	
}

.btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  width:100%;
  text-decoration: none;
  color: #EC7272;
  background: white;
  transition: .4s;
  
  text-align: left;
	padding-left:53px;
	border:thin solid #EC7272;
}

.btn-flat-simple:hover {
  background: #EC7272;
  color: white;
  width:130%;
  
}

.btn-flat-shiryou {
  position: relative;
  display: inline-block;
  font-weight: bold;
  width:100%;
  text-decoration: none;
  color: #2B101F;
  background: #F2E9DF;
  transition: .4s;
  
  text-align: center;
	border:thin solid #EC7272;
}

.btn-flat-shiryou:hover {
  background: #2B101F;
  color: white;
  width:110%;
  
}
	
	.btn-flat-chie {
  position: relative;
  display: inline-block;
  font-weight: bold;
  width:100%;
  text-decoration: none;
  color: white;
  background: #6C1545;
  transition: .4s;
  
  text-align: center;
	border:thin solid #EC7272;
}

.btn-flat-chie:hover {
  background: white;
  color: #2B101F;
  width:110%;
  
}

.menu{
	margin-bottom:20px;
}


a{
  padding:2vh 5vw 2vh 0;
  color:#EC7272;
  text-decoration:none;

}

a:hover{
  color:red;
  text-decoration:none;
	

}

.dammy {
	width:20%;
	height:100vh;
	float:left;
	background-color: white;
}

.main {
	
	width:80%;
	height:100vh;
	background-color: white;
	margin-left:20vw;
	text-align: left;
	
	
}

h1 {
	color:#FB5454;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	
}



img{
	width:100%;
	
}

.main img {
	position: relative;
}

.imgbox {
	position:relative;
}

.imgbox p {
	color:white;
	font-size:60px;
	text-shadow: 3px 3px 3px rgba(0,0,0,0.8);
	position:absolute;
	bottom:0;
	left:5%;
}

.textbox {
	margin: 5%;
	
}

p {
	margin-top:20px;
    font-size:20px;
	
}

.containt {
	background-color: #ABD1D1;
	width:22%;
	height:240px;
	margin:1%;
	float:left;
	text-align: center;
	
}

.containt img {
	width:60%;
	margin:30% 0 0 0;
	
}

.containt p {
	color:white;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4)
}



.container {
	background-color:rgba(160,160,160,0.2);
	width:95%;
	height:270px;
	padding-top:15px;
}
	
	
	.about {
		background-color:#F2E9DF;
		width:90%;
		height:1100px;
		margin-top:300px;
		text-align: center;
		margin:300px auto 150px auto;
	}
	
	
	.about h1 {
		padding-top:50px;
	}
	
	.about img{
		width:60%;
		margin-top:50px;
	}
	
	.btn-flat-about {
  
  display: inline-block;
  font-weight: bold;
  width:100%;
  text-decoration: none;
  color: white;
  background: #6C1545;
  transition: .4s;
  margin:90px auto;
  
	border:thin solid #EC7272;
}

.btn-flat-about:hover {
  background: white;
  color: #2B101F;
  width:100%;
  
}
	
	
	
.m-header{
		position:absolute;
	    top:-9000;
	}
	
	.n-destroy{
		position:absolute;
	    top:-9000;
	}
	li{
		list-style: none;
	}
	
	.list{
	text-align: center;
	margin:2px 20px;
	border:thin solid #EC7272;
	padding:20px 30px;
}
	
	
	.owari{
		text-align: center;
		background-color:#532840;
	}

.owari p{
		padding:100px 0 100px 0;
	color:white;
	font-size:40px;
	}

	
	

}







@media screen and (max-width: 500px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/

body{
	
	width: 100vw;
    text-align: center;
	 position:relative;
	
	
}
	
	header{
		position: absolute;
		z-index: -5;
	}
	
	.m-header{
		z-index: 2;
		background-color:#EC7272;
		width:100vw;
		height:13vh;
		text-align: center;
		box-shadow: 2px 2px 2px rgba(0,0,0,0.6)
	}
	
	.m-header img{
		width:80%;
		margin-top:4vh;
		border-bottom:medium solid #FFFFFF;
		padding-bottom:3vh;
	}
	
	
	.main {
	
	width:100%;
	height:100%;
	background-color: white;
	
	padding:2px;
	text-align: left;
    box-sizing: border-box;
	
	
	
}
	
	h1 {
	color:#FB5454;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	font-size:18px;
		margin:10px 0;
}



img{
	width:100%;
	
}

.main img {
	position: relative;
}

.imgbox {
	position:relative;
}

.imgbox p {
	color:white;
	font-size:40px;
	text-shadow: 3px 3px 3px rgba(0,0,0,0.8);
	position:absolute;
	bottom:0;
	left:5%;
}

.textbox {
	margin: 5%;
	
}

p {
	margin-top:20px;
    font-size:20px;
	
}
	
	.m-destroy{
		display: none;
	}
	
	
	.list{
	text-align: center;
	margin:0;
	border:thin solid #EC7272;
	padding:20px;
}
	
	
	a{
  width:100vw;
  height:8vh;
  color:#EC7272;
  text-decoration:none;
  font-weight: 1000;
	float:left;
}

	
	
	.about {
		background-color:#F2E9DF;
		width:100%;
		height:800px;
		text-align: center;
		margin:300px auto 0 auto;
	}
	
	
	.about h1 {
		padding-top:50px;
		font-size:40px;
	}
	
	.about img{
		width:90%;
		margin-top:50px;
	}
	
		.btn-flat-about {
  
  display: inline-block;
  font-weight: bold;
  width:100%;
  text-decoration: none;
  color: white;
  background: #6C1545;
  transition: .4s;
  margin:90px auto;
  
	border:thin solid #EC7272;
}

.btn-flat-about:hover {
  background: white;
  color: #2B101F;
  width:100%;
  
}
	
	.owari{
		text-align: center;
		background-color:#532840;
	}

.owari p{
		padding:20px 0 50px 0;
	color:white;
	font-size:20px;
	}

	


}