/*
Theme Name: Zio2025-Lightning
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

/************************
 サイト全体のカスタマイズ
*************************/

h1 {
	font-size: 1.2rem;
}
.site-footer {
	background-color: #707070; 
	color:#f5f7f2;
}
p {
color:#666;
}
/*アニメーションCSS*/
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/* 点滅1 */
.blink1 {
	animation: blinking 5s ease-in-out infinite alternate;
}
/* 点滅2 */
.blink2 {
	animation: blinking 5s ease-in-out 1s infinite alternate;
}
/*点滅３ チカチカ */
.blink3 {
	animation: blinking 0.8s linear infinite alternate;
}
/*点滅４ チカチカ */
.blink4 {
	animation: blinking 0.8s linear 0.3s infinite alternate;
}
/*回転アニメーションtop2026*/
.top-roll-an {
animation-name: rollAnimation;
animation-duration: 1.2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rollAnimation {
0% {transform:rotate(0) scale(1.0,1.0); }
25% {transform:rotate(20deg) scale(1.05,0.95);}
50% {transform: rotate(0) scale(1.0,1.0);}
	75% {transform: rotate(-20deg) scale(0.95,1.05);}
100% {transform:rotate(0) scale(1.0,1.0); }
	}

/*回転アニメーション2*/
.roll-an {
animation-name: rollAnimation2;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-delay: 0.8s;
animation-iteration-count: infinite;
}
@keyframes rollAnimation2 {
0% {transform: rotate(0);}
20% {transform: rotate(-360deg) ;}
60% {transform: rotate(360deg) ;} 
100% {transform: rotate(0) ;}
	}
/*右からフェードインアニメ繰り返し*/
.fade-in-an {
	animation-name: fadeIN;
	animation-duration: 4s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}
@keyframes fadeIN {
	0% {
		opacity: 0;
		transform: translatex(100px);
	}
	70% {
	opacity: 1;
	transform: translatex(0);
}
	100% {
		opacity: 0;
	}
}
/*上からフェードインアニメ１回top-page*/
.fade-in-an1 {
	animation-name: fadeIN;
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}
@keyframes fadeIN {
	0% {
		opacity: 0;
		transform: translatey(-100px);
	}
	45% {
	opacity: 1;
	transform: translatey(0);
  }
	55% {
		opacity: 0;
	}
	65% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	85% {
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
/*右上から左下へ☆用１回*/
.fade-in-naname-hidari {
	animation-name:fadeINnanameHIDARI;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}
@keyframes fadeINnanameHIDARI {
	0%{
		opacity: 0;
		transform:translate(200px,0);

	}
	70%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translate(0,200px);
	}
}
/*右上から左下へ☆用２*/
.fade-in-naname-hidari2 {
	animation-name:fadeINnanameHIDARI2;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}
@keyframes fadeINnanameHIDARI2 {
	0%{
		opacity: 0;
		transform:translate(200px,0);

	}
	70%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translate(0,200px);
	}
}
/*toppageスクロールアニメーション*/
@keyframes scrollAnimation {
	0%{
		transform: scaley(0);
		transform-origin: top;
	}
	50%{
		transform: scaley(1);
		transform-origin: top;
	}
	50.1%{
		transform: scaley(1);
		transform-origin: bottom;
	}
	100%{
		transform: scaley(0);
		transform-origin: bottom;
	}
}
.toppage-scroll-anime {
animation-name: scrollAnimation;
	animation-duration: 1.8s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}
/*ジャンプアニメーション*/
@keyframes jumpUP {
	0%{
	transform: scale(1.0,1.0) translate(0,0);
	transform-origin: button;
	}
	30%{
		transform: scale(1.1,0.95) translate(0,0);
	}
	40%{
		transform: scale(1.0,1.0) translate(0,10px);
	}
	
	50%{
		transform: scale(0.8,1.2) translate(0,-30px);
	}
	60%{
		transform: scale(1.0,1.0) translate(0,-90px);
	}
	80%{
		transform: scale(1.0,1.0) translate(0,-50px);
	}
	
	100%{
		transform: scale(1.0,1.0) translate(0,0);
	}
}

.jump-up {
	animation-name: jumpUP;
	animation-duration: 1.2s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}
/*ストライプ柄のマーカーグレー*/
.marker-stripe {
	background-image: repeating-linear-gradient(-45deg,
		#DADADA 0, #DADADA 2px,
		transparent 2px,
		transparent 4px);
	background-repeat: no-repeat;
	background-position: left bottom;
  background-size: 100% 0.5em;
}
/**アローボタン*/
.arrow-btn a {
	position: relative;
	color: #666;
	padding: 0,2.5em,5em,5em;
	text-decoration: none;
	}
.arrow-btn a::before{
	border-bottom: 1px solid #666;
	border-right: 1.5px solid #666;
	bottom: -5px;
	content: "";
	height: 15px;
	position: absolute;
	left: -15%;
	transform: skewx(50deg);
	width: 140%;
	transition: all .3s;
}
.arrow-btn a:hover::before {
	left: 12%;
}