/*
Theme Name: Lightning Child PTAinsideout
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/
/******************ストライプ柄のマーカーグレー*/
.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: -10%;
	transform: skewx(50deg);
	width: 130%;
	transition: all .3s;
}
.arrow-btn a:hover::before {
	left: 10%;
}
/*******************方眼のCSS*/
.hougan-grid {
	background-image: linear-gradient(0deg,transparent calc(100%  - 1px),#f0f0f0 calc(100% - 1px)),
		              linear-gradient(90deg, transparent calc(100% - 1px),#f0f0f0 calc(100% - 1px));
	background-size: 16px 16px;
	background-repeat: repeat;
	background-position: center;
}
/***********トップ*スクロールバーが伸び縮みするアニメーション*/
@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: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/***************ホッチキスの芯*/
.staple {
	position: relative;
	margin: 0 auto;
	margin-top: 5px;

	transform: rotate(-12deg);
	width: 40px !important;
	height: 2px !important;

	background: linear-gradient(
    to right,
    #7f8c8d 0%,
    #ecf0f1 5%,
	#ffffff 10%,
    #f1f1f1 50%,
    #bdc3c7 95%,
    #95a5a6 100%
	);

	box-shadow:
    0 0 2px 1px rgba(0,0,0,0.2),
    -2px 0 1.5px rgba(0,0,0,0.5),
    2px 0 1.5px rgba(0,0,0,0.6),
    inset -2px -2px 3px rgba(0,0,0,0.3),

    /* 下方向に伸びる影 */
    0 6px 6px rgba(0,0,0,0.15);

	border-radius: 2px;
}