@charset "utf-8";

/* ブログ記事一覧 */
.work_case {
	width: 100%;
}


.not_case {
	margin-top: 5em !important;
	margin-bottom: 5em !important;
}

.not_case.show {
	display: block !important;
}

.not_case strong {
	font-size: 2em;
	color: var(--deep-orange);
}

.blog_page .blog_box {
	padding-top: 50px;
	padding-bottom: 50px;
}



.blog_page h2 {
	position: relative;
	z-index: 10;
	height: 100px;
	display: grid;
	place-content: center;
}

.blog_page h2 strong {
	font-size: 2.6rem;
	z-index: 10;
	line-height: 2.6rem;
	position: relative;

}

.blog_page h2 strong span {
	color: var(--deep-blue);
}

.blog_page h2::before {
	position: absolute;
	z-index: 5;
	content: "BLOG";
	font-size: 10rem;
	line-height: 10rem;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #fafafa;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
}

@media screen and (max-width: 480px) {
	.blog_page h2 {
		height: 90px;
		margin-top: 30px;
		margin-bottom: 0;
	}

	.blog_page h2::before {
		font-size: 6.3rem;
		line-height: 6.3rem;
		background-position: center center;
		display: grid;
		place-content: center;
	}

	.blog_page h2 strong {
		font-size: 1.9rem;
		line-height: 1.9rem;
	}
}








/*==================================================
ふわっ
===================================*/


/* fadeUp */

.work_case li.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.work_case li.fadeUpTrigger {
	opacity: 0;
}


.work_case li {
	width: calc(25% - 30px);
	margin: 10px 15px 40px;
	text-align: left;
	/* background: white; */
	border-radius: 21px;
}

.work_case li a {
	color: #333;
	font-feature-settings: "palt";
	letter-spacing: 0.03rem;
	/* padding: 20px 20px 60px; */
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 21px;
	background: white;
	box-shadow: 0px 3px 7px rgba(0, 0, 0, .06);
	transition: all .1s;
	position: relative;
}

.work_case li a:hover {
	text-decoration: none;
	box-shadow: none;
	transform: translateY(3px);
}

.work_case li a:hover .works_img {
	opacity: .7;
	transition: all .2s;
}

.work_case li a:hover h3 {
	transition: all .1s;
	color: var(--orange);
}

.work_case li a .link {
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-weight: 700;
}

.work_case li a .link p {
	margin: 0;
	position: relative;
	padding-right: 25px;
}

.work_case li a:hover .link p {
	color: var(--orange);
}

.work_case li a .link p::after {
	content: "";
	position: absolute;
	background: url(../img/common/link_arrow.png) no-repeat;
	bottom: 5px;
	right: 0;
	margin: auto;
	width: 20px;
	height: 4px;
	background-size: contain;
	background-position: center bottom;
	transition: all .1s;
}

.work_case li a:hover .link p::after {
	right: -5px;
}


.work_case li .works_img {
	transition: all .2s;
	display: block;
	position: relative;
	width: 100%;
	height: auto;
}

.work_case li .works_img::before {
	content: "";
	display: block;
	padding-top: 51%;
}

.work_case li .works_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	border-radius: 15px 15px 0 0;
	border: 1px solid var(--gray);

}

.work_case li .post_date {
	font-size: 12px;
	margin: 15px 0 10px;
	font-family: var(---murecho);
	font-weight: bold;
	padding: 0 20px;
}

.work_case li h3 {
	text-align: left;
	font-size: 1.5rem;
	line-height: 2.6rem;
	margin: 10px 0;
	padding: 0 20px;

}


.work_case li h5 {
	font-size: 1.2rem;
	margin-bottom: 10px;
	font-weight: 500;
	padding: 0 20px;

}

.work_case li p {
	font-size: 12px;
	margin-bottom: 15px;
	padding: 0 20px;

}

.work_case li .post_content {
	padding: 0 20px 60px;
}

.work_case li span {
	display: inline-block;
	margin-bottom: 3px;
	&.tag{
		font-size: 11px;
		font-weight: 600;
		color: white;
		background-color: var(--light-green);
		padding: 2px 5px 3px;
		border-radius: 3px;
		margin-right: 3px;
		@media screen and (max-width: 480px) {
			padding-bottom: 1px;
			font-size: 0.9rem;
			margin-bottom: 1px;
			border-radius: 1px;
		}
	}
}

.fism {
	width: 100%;
	padding: 50px 0;
	background: #55b9f3;
	display: flex;
	justify-content: center;
}

.fism p {
	display: grid;
	place-content: center;
	width: 200px;
	height: 400px;
	margin: 20px auto;
	border-radius: 20px;
	background: linear-gradient(145deg, #4da7db, #5bc6ff);
	box-shadow: 10px 10px 30px #489dcf,
		-10px -10px 30px #62d5ff;
	font-weight: 700;
}


.search .search_box {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 0 0;
	margin-bottom: 1em;
}

.search select {
	width: 28%;
	position: relative;
	display: inline-block;
	border: none;
	padding: 20px 20px;
	font-weight: 400;
	font-size: 1.6rem;
	font-weight: 700;
	border-radius: 6px;
	margin: 0 10px;
	cursor: pointer;
	border: 2px solid white;
	color: #888;
	/* box-shadow: 0px 6px 10px rgba(0, 0, 0, .16); */
	transition: all .1s;
}

.search .search_box.new select {
	width: 23%;
	font-size: 1.4rem;
}

/* .search .search_box.new select#features{
	display: none;
} */


.search select:focus {
	outline: none;
}

.search select:hover {
	color: var(--orange);
}

.search select.on {
	background: var(--deep-blue);
	border: 2px solid white;
	/* box-shadow: none; */
	/* transform: translateY(3px); */
	color: white;
	font-weight: 700;
	cursor: auto;
}

.search select {
	color: var(--black);
}


.search option {
	background: white;
	font-weight: 500;
	color: var(--black);
}

/* .search select.off {
	opacity: .6;
} */




/****************************************
	レスポンシブ

****************************************/
@media screen and (max-width: 1200px) {
	.work_case li {
		width: calc(33% - 30px);
	}
}

@media screen and (max-width: 820px) {
	.work_case li {
		width: calc(50% - 30px);
	}

}



@media screen and (max-width: 480px) {

	/* .work_case li {
		width: 100%;
		margin: 0 0 20px;
	} */
	.work_case {
		width: calc(100% + 10px);
		margin-left: -5px;
	}

	.work_case li {
		width: calc(50% - 10px);
		margin: 0 5px 20px;
	}

	/* .work_case li:nth-child(odd){
		margin-left: 0;
	}
	.work_case li:nth-child(even){
		margin-right: 0;
	} */

	.work_case li .post_date {
		font-size: 1rem;
		padding: 0 10px;
	}

	.work_case li h3 {
		text-align: left;
		font-size: 1.4rem;
		margin: 10px 0;
		padding: 0 10px;
	}

	.work_case li h5 {
		font-size: 1rem;
		padding: 0 10px;
	}

	.work_case li .post_content {
		padding: 0 10px 50px;
	}

	.work_case li p {
		font-size: 1rem;
		padding: 0 10px;
	}

	.search .search_box {
		margin: 0 auto;
		padding: 30px 20px 0;
		margin-bottom: 1em;
	}

	.search select {
		width: 100%;
		margin: 0;
		margin-bottom: 10px;
	}

	.search .search_box.new select {
		width: 100%;
		margin: 0;
		margin-bottom: 10px;
	}

	.year_tab {
		padding-bottom: 30px;
	}
}