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

html{
	font-size: 10px;
}

body{
	background-color: #231717;
	background-size: cover;
	color: #FFF;
	font-size: 1.8rem;
	line-height: 2.5rem;
}

img{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}

p{
	margin: 1rem 3rem 2rem;
}

.color1{
	color: #ffcc01;
}

/*-------mv設定-----------*/
header img {
	z-index: 1;
	position: relative;
}


header{
	background: url("../../img/bg1.png");
	background-size: cover;
}

header::after{
	content: "";
	background-color:rgba(147,0,2,0.44);
	position: absolute;
	left: 0;
  right: 0;
  top: 0;
  bottom: 0;

}

h1{
	z-index: 2;
	position: absolute;
	left:10%;
	top: 8%; 
	width: 50%;

}

/* 拡大 */
.mvImg img{
  animation-name:zoomInAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0);
  }

  to {
      transform: scale(1);
  }
}

.mvImg img{
	z-index: 1;
	position: absolute;
	border-radius: 50%;
	border: solid 1px rgba(255,206,0,1.00);
	width: 50%;
	top: 20%;
	right: 10%;

}

.mvInner{
	height: 35rem;
}

.cv{
	padding: 0 2rem;
}

.cv{
	padding: 3rem 4rem;
	
}



/*---------その他の設定----------------*/

.flex{
	display: flex;
}

article{
	position: relative;
	z-index: 1;
	padding: 3rem 0;
}

.section1{
	background-image: url( "../../img/bg2.png");
    background-size: cover;
	background-position: center;
	padding: 3rem;
}

.bgRed, .bgBK{
	margin: 1rem 2rem;
	padding: 1.5rem 0;
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
 }

.bgRed{
	background: url("../../img/bg3.png");
}

.bgBK{
	background: #231717;
}

.color3{
	background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.innertBox{
	text-align: center;
		font-weight: bold;
	font-size: 3rem;
	margin: 2rem 0 0;
	line-height: 4rem;
}

h2{
	text-align: center;
	font-weight: bold;
	font-size: 3rem;
	line-height: 4rem;
	padding: 5rem 0 0;
}

.section2{
	background: #a60602;
}


a{
	text-decoration: none;
	color: #fff;
	font-size: 1.5rem;
}

ul{
	margin: 1rem 0 4rem;
}

li{
	margin: 1rem ;
}

.menu{
	text-align: center;
	padding: 5rem 0 0;
}
.menu a{
	text-decoration: none;
	font-size: 14px;
}

.flex2{
	display: flex;
	justify-content: center;
}

footer{
	color: #FFF;
	background: url("../../img/bg3.png");
	text-align: center;
	padding: 2rem;
	font-size: 12px;
}

/*跳ねるアニメーション----------------------------*/

.fluffy {
  animation: fluffy1 1.5s ease infinite;
	z-index: 1;
	position: relative;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-5px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-3px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

/*fadeInアニメーション----------------------------*/
.fadein {
  opacity : 0;
  transform: translateY(10px);
  transition: all 1s;
}


/*==================privacypolicy.html======================*/

.privacypolicy{
	margin: 3rem 1.5rem;
    color: #fcf2c2;
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
}

.privacypolicy h1{
	text-align: center;
	font: 1.2rem bolder;
	margin: 2.5rem auto 1rem;
}

th{
	width: 30%;
	color: #fcf2c2;
	border: solid 0.5px #fcf2c2;
	padding: 0.5rem;
}

td{	
	border: solid 0.5px #fcf2c2;
	padding: 0.5rem;
	
}

.privacypolicy a{
		color: #fcf2c2;
}

/*==================size2======================*/

@media screen and (min-width: 390px){
.mvInner{
	height: 40rem;
}
}
/*==================size3======================*/

@media screen and (min-width: 500px){
.mvInner{
	height: 43rem;
}
}

/*==================size4======================*/

@media screen and (max-width: 350px){
.mvInner{
	height: 30rem;
}
}

/*==================tablet,pc======================*/


@media screen and (min-width: 600px){
	body{
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		font-size: 12px;
	}
	
	p{
		font-size: 19px;
	}
	
	h1{
	left:20%;
	top: 8%; 
	width: 35%;
	}
	
	.mvImg img{
	right:20%;
	top: 17%; 
	width: 40%;
	}
	
	
.mvInner{
	height: 55rem;
}
	.mv img{
		width: 100%;
	}
	
	header{
		width: 600px;
	}
	
	h2{
		font-size: 2.5rem;
	}
	
	.cvbtn{
		width: 600px;
	}
	
	footer{
		padding: 3rem 0 20rem;
	}
}


@media screen and (min-width: 900px){
	h1{
	left:30%;
	top: 8%; 
	width:20%;
	}
	
	.mvImg img{
	right:30%;
	top: 17%; 
	width: 30%;
	}
	
	.mvInner{
	height: 45rem;
}

}