@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Poppins&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,300;1,600&display=swap');

@import url("reset.css");
@import url("header.css?02");
@import url("footer.css");

/* 共通定義
=========================================================================*/
* {
	margin: 0;
	padding: 0;
}

html {
	overflow-x: hidden;
	scroll-behavior: auto;
}

body {
	overflow-x: hidden;
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Poppins', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.75em;
	color: #212121;
	text-align: left;
	background-color: #FFF;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.6em;
}

strong {
	font-weight: 600;
}

main {
	overflow: hidden;
	position: relative;
}

/* 画像サイズ
-----------------------------------------------------------*/
img {
	overflow: hidden;
	width: 100%;
	height: auto;
}

/* デスクトップ・スマホ分岐
-----------------------------------------------------------*/
.pc {
	display: block;
}

.sp {
	display: none;
}

/* Worksページ共通
-----------------------------------------------------------*/
body {
	background-color: #F0EFED;
}

/* title */
body.works .title {
	clip-path: circle(0 at 50% 50%);
	transition: clip-path 3s cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 0s;
}

body.works .title.active {
	clip-path: circle(100% at 50% 50%);
}

body.works .title.fixed {
	position: fixed;
	top: 0;
}

/* description */
body.works article section.description {
	padding: 90px 0;
	font-size: 14px;
	line-height: 1.8em;
	color: #212121;
}

body.works article section.description .inner {
	margin: 0 auto;
	max-width: 890px;
}

body.works article section.description .inner p {
	margin-bottom: 1em;
}

body.works article section.description .inner .tag {
	font-weight: 300;
	font-style: italic;
	color: #AFAFAF;
}

body.works article section {
	position: relative;
	background-color: #F0EFED;
	/*z-index: 2;*/
}

body.works article section:not(.description) {
	padding: 100px 20px;
}

body.works article section:has(.inner h2) {
	padding: 60px 20px 100px;
}

/* article */
body.works article section.bg_gray {
	background-color: #E6E6E6;
}

body.works article section.bg_blue {
	background-color: #D8E3EB;
}

body.works article section .inner {
	margin: 0 auto;
	max-width: 1000px;
}

body.works article section .inner.movie {
	max-width: 960px;
}

body.works article section .inner .movie_container {
	margin-bottom: 1em;
	width: 100%;
	aspect-ratio: 16 / 9;
}

body.works article section .inner .movie_container iframe {
	width: 100%;
	height: 100%;
}

body.works article section img,
body.works article .movie_container {
	clip-path: inset(0 100% -20% 0);
	transition: clip-path 2s cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 1s;
}

body.works article section .active img,
body.works article .active .movie_container {
	clip-path: inset(0 0 -20% 0);
}

body.works article section .inner h2 {
	margin-bottom: 50px;
	font-size: 14px;
	clip-path: inset(0 100% -20% 0);
	transition: clip-path 1s cubic-bezier(.92, -0.01, 1, .26);
	transition-delay: 0s;
}

body.works article section .inner h2.active {
	clip-path: inset(0 0 -20% 0);
}

body.works article section .inner p.note {
	text-align: right;
}

/* 実績追加
=========================================================================
=========================================================================*/

.achiev{
	width: 80%;
	margin: auto;
	padding: 60px 0px;
	color: #444;
	font-size: 0.9em;
}


/*  767px以下
=========================================================================
=========================================================================*/
@media screen and (max-width:767px) {

	/* デスクトップ・スマホ分岐
	-----------------------------------------------------------*/
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	/* Worksページ共通
	-----------------------------------------------------------*/
	/* description */
	body.works article section.description {
		padding: 40px 20px;
		font-size: 13px;
	}

	body.works article section.description .inner p {
		font-size: 14px;
	}

	body.works article section:not(.description) {
		padding: 50px 20px;
	}

	body.works article section:has(.inner h2) {
		padding: 60px 20px 50px;
	}

	body.works article section .inner h2 {
		margin-bottom: 30px;
	}

	/* 実績追加
	-----------------------------------------------------------*/
	.achiev{
		width: 80%;
		margin: auto;
		padding: 60px 0px;
		color: #444444;
	}
}

/*  420px以下
=========================================================================
=========================================================================*/
@media screen and (max-width:420px) {}