@charset "UTF-8";
.section-offset{
	padding-top: 8vw;
}
h2{font-size: 5vw;
	position: relative;
	display: inline-block;
	font-family: 'Raleway';
}
.text{
position: relative;
z-index: 9;
}
.text-line-animation{
transform: scaleX(0);
position: absolute;
top: .6875em;
right: -.525em;
bottom: -.1875em;
left: -.125em;
transition: transform .45s cubic-bezier(.4,0,0,1);
transform-origin: center left;
line-height: 1.03333;
z-index: 5;
}
.text-line-animation svg,
.heart-animation svg{
fill: #FF5B46;
width: 100%;
height: 100%;
display: block;
}
.is-show .text-line-animation{
	transform: scaleX(1);
	transition-delay: .3s;
}

.content-box{
	padding-bottom: 10.6vw;
}
h3{
	font-size: 3vw;
}
.col-50{
	width: 50%;
}
.text-box{
	padding: 0 3.5vw 0 1.5vw;
	box-sizing: border-box;
	font-size: 14px;
  line-height: 1.8;
  letter-spacing: .8px;
}
.img-box{
	position: relative;
	box-sizing: border-box;
	padding: 0 3.6vw;
}
.img-box img{
	width: 100%;
	height: 100%;
		box-shadow: 20px 33px 70px 17px #d5d5d5;
}

.heart-animation{
	display: inline-block;
	width: 5vw;
	height: 5vw;
	position: absolute;
	bottom: 0;
	right: -5.6vw;
}

.learn-more{
	display: inline-block;
	background: #FF5B46;
	text-decoration: none;
	color: #fff;
	padding: 20px 40px;
	transition: 0.5s;
	opacity: 1;
}
.learn-more:hover{
	opacity: 0.5;
}
ul.post{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.post li{
	position: relative;
	box-sizing: border-box;
	padding: 5vh 2vw;
	width: calc(100% / 3);
	margin-bottom: 20px;
}
.post li img{
	width: 100%;
	height: auto;
	position: relative;
	top: -2vw;
}
.post li img.non-indent{
	top: 0;
}
.post a{
	color: #0e243d;
	text-decoration: none;
}
.post a figure{
	opacity: 1;
	transition-duration: .5s;
}
.post a:hover figure{
	opacity: .6;
}
.img-post{
	height: 14vw;
	overflow: hidden;
}
.post figcaption {
	padding: .8vw ;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: .8px;
}
.post figure{
box-shadow: 0px 0px 2px 0px #cac2b5;
height: 100%;
}
.list-box:first-of-type{
	margin-bottom: 8vw;
}


h2 path {
	fill: #FF5B46;
	stroke: #FF5B46; /*線の色を指定する*/
	stroke-dasharray: 3000;/*線の間隔を指定する*/
	stroke-dashoffset: 3000;/*線の位置を指定する(IEは効かない属性)*/
	stroke-width: 15;/*線の太さを指定する*/
	animation: hello 1s ease-in forwards;
}
@keyframes hello {
0% {
stroke-dashoffset: 3000;
fill-opacity: 0;
}
80% {
	fill-opacity: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;}
}

/* クリックされたら、ハートのアニメーションを開始 */
.heart-animation{
	animation: heartAnime 3s infinite;
}
/* ハートのアニメーション内容 */
@keyframes heartAnime {
  0% {
    transform: scale(1.0, 1.0);
	}
	20%{
    transform: scale(1, 1);	
	}
  30% {
    transform: scale(1.1, 1.1);
  }
  40% {
    transform: scale(.9, .9);
	}
	50% {
    transform: scale(1.1, 1.1);
	}
	60% {
    transform: scale(.9, .9);
	}
	70% {
    transform: scale(1, 1);
  }
}

/* 1000px以下 */
@media screen and (max-width: 1000px) {
	.post li{
		width: calc(100% / 2);
	}
	.img-post{
		height: 200px;
	}
	.section-offset{
		padding-top: 70px;
	}
	.post li:last-of-type{
		margin-bottom: 0;
		padding: 0;
	}
	.heart-animation{
		width: 45px;
		height: 45px;
		right: -50px;
    top: -1px;
	}
}
/* 600px以下 */
@media screen and (max-width: 600px) {
	.post li{
		width: 100%;
	}
	.img-post{
		height: 70vw;
	}
}

/* 500px以下 */
@media screen and (max-width: 500px) {
	.post li{
		padding: 10px 0 0;
	}
	.post figcaption{
		padding: 5px 10px;
	}
	.list-box{
		margin-bottom: 30px;
	}
}