@charset "UTF-8";



body, html{
	margin: 0;
	padding: 0;

}

body{
	font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
}


.fv{
   position: relative;
	width: 100%;
	top: 10%;

	
}

.fv::before{
	content: "";
	position: absolute;
	 top:35%;
    left: 0;
    width: 100%;
	height: 100%;
    background: url('../images/HPrangercopy(1).png') center center no-repeat;
	background-size: contain;
    z-index: -1; /* コンテンツより背面に配置 */
}



.logo{
	margin-top: 3%;
	margin-left: 5%;
	width: 10vw;
}


.image-title01{
	width: 25vw;
	margin-left: 7%;
	margin-top: 7%;
}


h2{
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 1.8vw;
	text-align: center;
	margin-bottom: 15%;
	
}

.image-title02{
	width: 25vw;
	margin-left: 7%;
	margin-bottom: 10%;
}
.profile_sp{
	display: none;
}

.profile{
	 animation: slideIn01 3s 1;
	animation-timeline: view();
	animation-fill-mode: forwards;
}



/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
	animation: slideIn01;
	animation-timeline: view();
animation-delay: 0.3s;
	animation-fill-mode: forwards;
}
@keyframes slideIn01 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}

.delay-time03{
	animation: slideIn02;
	animation-timeline: view();
animation-delay: 0.6s;
	animation-fill-mode: forwards;
}
@keyframes slideIn02 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}

.delay-time04{
	animation: slideIn03;
	animation-timeline: view();
animation-delay: 0.9s;
	animation-fill-mode: forwards;
}
@keyframes slideIn03 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}

.delay-time05{
	animation: slideIn04;
	animation-timeline: view();
animation-delay: 1.2s;
	animation-fill-mode: forwards;
	margin-bottom: 20%;
}

@keyframes slideIn04 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* copyright */
.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #48483A;
  text-align: center;
  background: #FFEB3E;
}

.footer-copyright a {
  text-decoration: none;
  color: #48483A;
}




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

body, html{
	margin: 0;
	padding: 0;

}

body{
	font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
}


.fv{
   position: relative;
	width: 100%;
	top: 10%;

	
}

.fv::before{
	content: "";
	position: absolute;
	 top:35%;
    left: 0;
    width: 100%;
	height: 100%;
    background: url('../images/HPrangercopy(1).png') center center no-repeat;
	background-size: contain;
    z-index: -1; /* コンテンツより背面に配置 */
}



.logo{
	margin-top: 3%;
	margin-left: 5%;
	width: 20vw;
}


.image-title01{
	width: 40vw;
	margin-left: 7%;
	margin-top: 7%;
}


h2{
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 2.5vw;
	text-align: center;
	margin-bottom: 15%;
	
}

.image-title02{
	width: 40vw;
	margin-left: 7%;
	margin-bottom: 10%;
}

.profile{
	 display: none;
}

.profile_sp{
	display: block;
	width: 100%;
}


/* copyright */
.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #48483A;
  text-align: center;
  background: #FFEB3E;
}

.footer-copyright a {
  text-decoration: none;
  color: #48483A;
}


}