@charset "utf-8";
@import url("root.css");

/*------------------------------------------------------------
 実績・事例
------------------------------------------------------------*/
main {
	/* *{outline:1px solid #0000FF} */

	&.record_page {

		section{
			&.searchs{
				padding: 45px 0 0;

				background: var(--bg);
				@media screen and (max-width:820px) {
					padding: 0;
					.record_tub{
						padding: 0;
					}
				}
			}
			&.record_box{
				padding: 45px 0 ;
				@media screen and (max-width:820px) {
					padding: 25px 0;
				}
			}
		}

		/* 事例ページリニューアルサンプル */

		.work_case {
			width: 100%;
			justify-content: flex-start;
		}


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

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

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

		.record_page .record_box {
			padding-top: 50px;
			padding-bottom: 50px;
		}



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

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

		}

		.record_page h2 strong span {
			color: var(--orange);
		}

		.record_page h2::before {
			position: absolute;
			z-index: 5;
			content: "RECORD";
			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) {
			.record_page h2 {
				height: 90px;
				margin-top: 30px;
				margin-bottom: 0;
			}

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

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


		/* スクロールをしたら出現する要素にはじめに透過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: 10px;

		}

		.work_case li a {
			color: #333;
			text-decoration: none;
			font-feature-settings: "palt";
			letter-spacing: 0.03rem;
			/* padding: 20px 20px 60px; */
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 10px;

			background: white;
			/* box-shadow: 0px 3px 7px rgba(0, 0, 0, .06); */
			transition: all .1s;
			position: relative;
			border: 1px solid #87b4bd;
			overflow: hidden;

		}

		.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 h4 {
			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: 15px;
			line-height: 1.4rem;
		}

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

		.work_case li a .link p::after {
			font-family: "Font Awesome 6 Free"; /* または使用しているバージョンに応じて */
			font-weight: 700; /* Solid の場合。Regular や Light は重みが違う */
			content: "\f054"; /* 表示したいアイコンの Unicode（これはユーザーアイコン） */
			position: absolute;
			bottom: 0;
			top: 0;
			right: 0;
			margin: auto;
			font-size: 1rem;
			background-size: contain;
			background-position: right center;
			transition: all .1s;
			line-height: 1.4rem;

		}

		.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: 66%;
		}

		.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 h4 {
			text-align: left;
			font-size: 1.4rem;
			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 45px;
		}

		.work_case li span {
			display: inline-block;
			margin-bottom: 3px;
		}

		.work_case li span.scene {
			font-size: 10px;
			font-weight: 600;
			color: white;
			background-color: var(--blue-green);
			padding: 2px 5px 3px;
			border-radius: 3px;
			margin-right: 3px;

		}


		.work_case li span.type {
			font-size: 10px;
			font-weight: 600;
			color: white;
			background-color: var(--orange);
			padding: 2px 5px 3px;
			border-radius: 3px;
			margin-right: 3px;
		}

		.work_case li span.str_features {
			font-size: 10px;
			font-weight: 600;
			color: white;
			background-color: var(--orange);
			padding: 2px 5px 3px;
			border-radius: 3px;
			margin-right: 3px;
		}

		.work_case li span.interview {
			font-size: 12px;
			font-weight: 600;
			color: white;
			background-color: var(--deep-orange);
			padding: 2px 5px 3px;
			border-radius: 3px;
			margin-right: 3px;
		}

		.record_tub>p {
			font-weight: 700;
		}

		.year_tab {
			padding-bottom: 48px;
			margin-top: 25px;
		}

		.year_tab li {
			font-weight: 500;
			margin: 0 5px;
			border-radius: 3px;
			margin-bottom: 5px;
			font-size: 1.4rem;
			padding: 8px 15px;
			overflow: hidden;
			background: white;
			border: 1px solid var(--orange);
			cursor: pointer;
			color: #888;
			border: 2px solid white;
			/* font-family: var(--din); */
			transition: all .1s;
		}

		.year_tab li:hover {
			color: var(--orange);
		}

		.year_tab li.year_tab_btn:nth-last-of-type(-n+13) {
			display: none !important;
		}

		.year_tab li.active {
			background-color: var(--orange);
			border: 2px solid white;
			cursor: auto;
			color: white;

		}

		.year_tab.new li {
			padding: 0;
			color: #888;
			border: 2px solid white;
		}

		.year_tab.new li.active {
			background-color: white;
			border: none;
			cursor: auto;
		}


		.year_tab.new li a {
			display: block;
			color: #888;
			padding: 10px 15px;
			cursor: pointer;
			transition: all .1s;
		}

		.year_tab.new li a:hover {
			color: var(--orange);
			text-decoration: none;
		}


		.year_tab.new li.active_new {
			background-color: var(--orange);
			border: 2px solid white;
			cursor: auto;
			color: white;
			padding: 10px 15px;
		}


		.case_list {
			display: none;
		}

		.case_list.active {
			display: block;
		}


		.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(--orange);
			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 h4 {
				text-align: left;
				font-size: 1.1rem;
				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 span {
				font-size: 10px;
			}

			.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;
			}
		}
	}
}