/*

	Theme Name: gravitynote
	Author: gravitymobile

	Description: This is test theme.
	Version: 0.1

*/

/* @mediaここから
*/

@media screen and (min-width: 280px) and (max-width: 359px){
	.mainvisual{
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	
		/*background-image: linear-gradient(
	  to right,
	  #383838 0%,
	  #fff 50%,
	  #fff 100%
	  );*/
	
		background-position:center center;	background:radial-gradient(circle farthest-corner at center center, #afafaf 0%, #171313 100%);
		/*background-position:  cover;*/
		background-repeat: no-repeat;
		clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
	}
	.logo img{
		margin: 0;
		width: calc(50vh / 2);
		position: absolute;
		top: 15vh;
		left: 50vw;
		transform: translate(-50%,-50%);
	}
	.slides img {
		margin: 0;
		height: 100%;
		object-fit:cover;
		opacity:0.6;
		filter: brightness(111%) contrast(87%) saturate(0%) sepia(30%);
	  }

	  .mainvisual .copy p {
		margin: 0;
		position: absolute;
		bottom: 5vh;
		left: 5vw;
		line-height: 1;
		opacity:0.8;
		font-size: calc(100vw / 85);
		color:#fefefe;
	  }

	  .burger{
		  display: none;
	}
}




@media screen and (min-width: 360px) and (max-width: 639px){
	.mainvisual{
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-position:center center;	background:radial-gradient(circle farthest-corner at center center, #afafaf 0%, #171313 100%);
		background-repeat: no-repeat;
		clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
	}
	.logo img{
		margin: 0;
		width: calc(50vh / 2);
		position: absolute;
		top: 15vh;
		left: 50vw;
		transform: translate(-50%,-50%);
	}
	.slides img {
		margin: 0;
		height: 100%;
		object-fit:cover;
		opacity:0.6;
		filter: brightness(111%) contrast(87%) saturate(0%) sepia(30%);
	  }

	  .mainvisual .copy p {
		margin: 0;
		position: absolute;
		bottom: 5vh;
		left: 5vw;
		line-height: 1;
		opacity:0.8;
		font-size: calc(100vw / 85);
		color:#fefefe;
	  }

	  .burger{
		  display: block;
	}
}


@media screen and (min-width: 640px) and (max-width: 1024px){
	.mainvisual{
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-position:center center;	background:radial-gradient(circle farthest-corner at center center, #afafaf 0%, #171313 100%);
		background-repeat: no-repeat;
		clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
	}
	.logo img{
		margin: 0;
		width: calc(50vh / 2);
		position: absolute;
		top: 15vh;
		left: 50vw;
		transform: translate(-50%,-50%);
	}
	.slides img {
		margin: 0;
		height: 100%;
		object-fit:cover;
		opacity:0.6;
		filter: brightness(111%) contrast(87%) saturate(0%) sepia(30%);
	  }

	  .mainvisual .copy p {
		margin: 0;
		position: absolute;
		bottom: 5vh;
		left: 5vw;
		line-height: 1;
		opacity:0.8;
		font-size: calc(100vw / 85);
		color:#fefefe;
	  }

	  .burger{
		  display: none;
	}
}
/* @mediaここまで
*/





html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0;
	margin: 0;
}



*{
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:0px;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
	box-sizing:border-box;
}

body{
	font-family: "'Open Sans', sans-serif;", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
}

p {
	word-wrap:break-word;
	font-size:12px;
	color:#2C2323;
}

h2, h4{
	font-family: serif;
	font-size:14px;
	color:#000;
	padding:10px 0;
	margin-top:0px;
	font-weight: 700;
}

h2 a{
	display:inline-block;
}

h2 a:hover{
	color:#fcb03e;
}

/*
	header
*/

#logo{
    width:300px;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:2em;
}

#logo h2{
    padding:20px 0;
    text-align:left;
    font-family: 'Comfortaa', cursive;
    letter-spacing:0.8em;
    font-size:24px;
    color:#333333;
    text-decoration:none;
}

#logo a{
    font-family: 'Comfortaa', cursive;
    letter-spacing:-0.2px;
    color:#333333;
    text-decoration:none;
}

/* カテゴリーナビ
*/
.wrap{
    color:#464646;
    padding-top:0px;
    padding-right:1em;
    padding-bottom:0px;
    padding-left:2em;
    border:none;
    margin:0px;
}

#navi{
    width:100%;
    margin:0 auto;
    text-align:center;
    font-size:12px;
    border:none;
}

#navi img{
    width:50px;
    border-radius:50%;
}


#navi a{
    text-decoration:none;
    font-weight:normal;
    border:none;
	color: #333333;
}

#navi a:hover{
    text-decoration:none;
    border:0;
	color: rgb(80, 153, 248);
}



.flex-navicontainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
  }
  
  .flex-naviitems:nth-child(n) {
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 0;
	margin-right: 1em;
  }

/* headerここまで
*/

.post-content {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    word-wrap: break-word;
    text-align: left;
}

/* カラムここから
*/

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: stretch;
}

.flex-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(2) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(3) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(4) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(5) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

/* カラムここまで
*/


/* @keyframesここから
*/

@keyframes fudge {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(0px, 5%);
  }
}

@keyframes rotatebtn {
  from {
    transform: rotate(0deg) translate(0px, 0px);
  }
  to {
    transform: rotate(-5deg) translateX(0.2em)  translateY(-0%);
  }
}

@keyframes fadeIn {
    from {
			opacity: 0;
			}/*追加*/

    to {
			 opacity: 1;
			 }/*追加*/
}

@keyframes pulse {
  0% {
    background-color: #555;
    color:#000;
  }

  50% {
    background-color: #999;
    color:#fff;
  }

  100% {
    background-color: #555;
    color:#000;
  }
}


/* @keyframesここまで
*/


/* 走査線ここから
*/

.scanlines {
  overflow: hidden;
  mix-blend-mode: hard-light;
}

.scanlines::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 150%;
	top: -100px;
	left: 0;
	background: repeating-linear-gradient(
		to bottom,
		transparent 0%,
		rgba(200, 245, 235, 0.2) 0.05%,
		transparent 0.5%
	);
	animation: fudge 10s linear normal infinite;
}

/* 走査線ここまで
*/

/* メインビジュアルここから
*/

.mainwrapper{
    margin: 0;
    padding:0;
    width: 100%;
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
	/*background:radial-gradient(circle farthest-corner at center center, #171313 0%, #f7f7f7 100%);*/
	background: #171313;

}



.mainvisual{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;

	/*background-image: linear-gradient(
  to right,
  #383838 0%,
  #fff 50%,
  #fff 100%
  );*/

	background-position:center center;	background:radial-gradient(circle farthest-corner at center center, #afafaf 0%, #171313 100%);
	/*background-position:  cover;*/
	background-repeat: no-repeat;
	clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
}

.mainvisual h2{
	margin: 0;
	position: absolute;
	transform-origin: center;
	line-height: 1;
	opacity:0.6;
}

.mainvisual h4{
	margin: 0;
	position: absolute;
	transform-origin: center;
	top: calc(50vh - 1em);
	left:5vw;
	line-height: 1;
	font-size: 1.8em;
	color:#fff;
	opacity:0.8;
	font-family: 'Comfortaa', cursive;
}
.mainvisual h5{
	margin: 0;
	position: absolute;
	transform-origin: center;
	top: calc(50vh + 1em);
	left:10vw;
	line-height: 1;
	font-size: 1.8em;
	color:#fff;
	opacity:0.8;
	font-family: 'Comfortaa', cursive;
}

.mainvisual .copy p {
  margin: 0;
  position: absolute;
  bottom: 2em;
  left: 5vw;
  line-height: 1;
  opacity:0.8;
  font-size: calc(100vw / 85);
  color:#fefefe;
}

.mainvisual a {
	float: left;
	display: block;
	text-align: center;
	text-decoration: none;
	position: absolute;
	margin: 0;
	padding:1em;
	color:#333;
	line-height: 1;
	font-size: calc(100vw / 50);
}

.mainvisual a::after {
	content: '';
	display: inline-block;
	top: 0;
	left: 0;
	width: 0;
	height: 30%;
	background: #ff003b;
	border-width: 0px 1px 1px 0px;
	transform-origin:50px 50px;
	transform: rotate(-5deg) translateX(0.2em)  translateY(150%);
	clip-path: polygon(8% 43%, 17% 36%, 36% 35%, 54% 36%, 73% 44%, 87% 54%, 69% 50%, 50% 49%, 36% 50%, 26% 52%, 12% 54%, 8% 49%);
	border-color: #fff;
	transition: all 0.2s;
	position: absolute;
	opacity:0.4;
}



/*メインビジュアルここまで
*/


.card-container{
    max-width: 1000px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	padding: 5em 0;
}

.maincontent{
    display: flex;
    justify-content: center;
    align-items: center;
	/*background:radial-gradient(circle farthest-corner at center center, #3B3B3B 0%, #171313 100%);*/
	background: #fff;
}



.card-container .card{
    position: relative;
    width: 250px;
    height: 354px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /*
	transform:perspective(250px) translate3d(0,0,0);
    transition-duration: 0.5s;
	*/
}
/*
.card-container:hover .card{
    
	filter: blur(5px);
	
    transform:perspective(250px) translate3d(0,0,-200px) rotate3d(0,1,0,45deg);
    transition-duration: 0.5s;
	
}

*/
.card-container .card:hover{
    filter: blur(0px);
    z-index: 3;
	/*
    transform:perspective(250px) translate3d(0,0,0px);
    transition-duration: 0.5s;
	*/
}

.card-container .card::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1;
}
.card-container .card:hover::before{
    background: #333;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition-duration: 0.5s;
}



.card-container .card .content{
    text-align: center;
    z-index: 2;
    padding: 0 20px;
}



.card-container .card .content h2{
    font-size: 2em;
}
.card-container .card .content p{
    font-size: 0.9em;
}
.card-container .card .content a{
    display: inline-block;
    margin-top: 15px;
    padding: 5px 10px;
    background: #262626;
    text-decoration: none;
    color: azure;
}

.card-container .card:hover .content p{
    color: #fff;
}

.card-container .card:hover .content h2{
    color: #fff;
}

.card-container .card:hover .content a{
	
    background: rgb(80, 153, 248);

}