@charset "utf-8";

/* 変数 -----------------------------------------------------------------------------------------*/
:root {
	--family-go: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

	--wrapper: 84%;
	--wrapper-max: 840px;

	--color-black: #2d2d2d;
	--color-white: #fff;
	--color-h2: #b1b1b1;

	--font-h2: 16px;/*18px;*/
	--font-catch: 26px;/*30px;*/
	--font-p: 14px;

	--font-phi-dt: 14px;/*16px;*/
	--font-phi-dt-s: 12px;/*14px;*/
	--font-phi-dd: 16px;/*18px;*/
	--circle-phi: 108px;/*135px;*/

	--weight-m: 400;
	--weight-b: 600;

	--line: 1.4;
	--line-p: 2.28;

	--margin-5: 5px;
	--margin-10: 10px;
	--margin-15: 15px;
	--margin-20: 20px;
	--margin-30: 30px;
	--margin-40: 40px;
	--margin-50: 50px;
	--margin-60: 60px;
	--margin-100: 80px;/*100px;*/
	--margin-150: 120px;/*150px;*/
	--margin-200: 160px;/*200px;*/
	--margin-250: 200px;/*250px;*/
	--margin-300: 240px;/*300px;*/
}
/*-----------------------------------------------------------------------------------------------*/


/* フォント -------------------------------------------------------------------------------------*/
#main {
	color: var(--color-black);
	font-family: var(--family-go);
	font-weight: var(--weight-m);
}
/*-----------------------------------------------------------------------------------------------*/


/* lazy -----------------------------------------------------------------------------------------*/
.slide {
	opacity: 0;
	transition-duration: 0.8s;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
}
.slide.active { opacity: 1; }

.js-lazy {
	opacity: 0;
	transform: translateY(10%) scale(1);
	transition-duration: 0.8s;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ボディー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
#main {
	background-color: var(--color-white);
	line-height: 1;
	/*overflow-x: hidden;*/
	min-width: 320px;
}
#main img {
	height: auto;
	width: 100%;
	max-width: 100%;
}
#main li { list-style: none; }

#main .wrapper {
	margin: 0 auto;
	width: var(--wrapper);
	max-width: var(--wrapper-max);
}

#main br.pc { display: none; }

/* コンテナー */
#main .container {
	margin-top: var(--margin-50);
	padding-bottom: var(--margin-100);
}
#main .container:first-of-type {
	margin-top: var(--margin-100);
	padding-bottom: var(--margin-300);
	position: relative;
}
#main .container:first-of-type:after {
	background-color: var(--color-black);
	content: "";
	height: 1px;
	position: absolute;
	bottom: var(--margin-150);
	left: 50%;
	transform: translateX(-50%);
	width: var(--margin-100);
}
#main .container:last-of-type { padding-bottom: var(--margin-150); }

/* メインイメージ */
#main .topimage {
	margin: 0 auto;
	max-width: var(--wrapper-max);
}

/* 見出し */
#main h2 {
	color: var(--color-h2);
	font-size: var(--font-h2);
	font-weight: var(--weight-m);
	letter-spacing: 0.08em;
	margin-bottom: 0;
}

/* キャッチ */
#main .catch {
	font-size: var(--font-catch);
	font-weight: var(--weight-b);
	line-height: var(--line);
	margin-top: var(--margin-20);
}

/* コメント */
#main .comment {
	font-size: var(--font-p);
	line-height: var(--line-p);
	margin-top: var(--margin-20);
	text-align: justify;
}

/* [ MSR Corporate Philosophy ] */
#main .philosophy { margin-top: 0; }
#main .philosophy > .wrapper {
	background-color: #edf3f5;
	padding-top: var(--margin-50);
	padding-bottom: var(--margin-60);
	width: 100%;
}

#main .philosophy h2 {
	color: var(--color-black);/*#8e8e8e;*/
	letter-spacing: 0.15em;
	text-align: center;
}

/*#main .philosophy .contents {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-20);
	margin-top: var(--margin-40);
}

#main .philosophy dl {
	display: flex;
	align-items: center;
	column-gap: var(--margin-20);
}
#main .philosophy dt {
	background-color: #cfdadd;
	border-radius: 50%;
	color: #151515;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: var(--margin-5);
	font-size: var(--font-phi-dt);
	font-weight: 500;
	height: var(--circle-phi);
	letter-spacing: 0.09em;
	text-align: center;
	width: var(--circle-phi);
}
#main .philosophy dt span {
	font-size: var(--font-phi-dt-s);
	font-weight: 300;
}
#main .philosophy dd {
	flex: 1;
	font-size: var(--font-phi-dd);
	font-weight: var(--weight-b);
	line-height: var(--line);
}

#main .philosophy ul {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-5);
}
#main .philosophy li {
	padding-left: 3em;
	text-indent: -3em;
}*/
#main .philosophy .image {
	margin-top: var(--margin-60);
	text-align: center;
}
#main .philosophy .image img { max-width: 512px; }


/* スタッフ */
#main .staff ul {
	display: flex;
	flex-wrap: wrap;
}
#main .staff li {
	aspect-ratio: 1 / 1;
	position: relative;
	width: calc(100% / 4);/*calc(100% / 7);*/
}
#main .staff li:nth-child(21),
#main .staff li:nth-child(22),
#main .staff li:nth-child(23),
#main .staff li:nth-child(24),
#main .staff li:nth-child(25) { display: none; }
#main .staff img {
	position: absolute;
	top: 0;
	left: 0;
}

/* 下が現表示、上が次表示 */
#main .staff li .base { opacity: 1; }
#main .staff li .overlay {
	opacity: 0;
	transition: opacity 1s ease; /* 1秒クロスフェード */
}
#main .staff li.crossfade .overlay { opacity: 1; }





@media(min-width: 530px) {
}



@media(min-width: 768px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--font-h2: 18px;
		--font-catch: 30px;

		--font-phi-dt: 16px;
		--font-phi-dt-s: 14px;
		--font-phi-dd: 18px;
		--circle-phi: 135px;

		--margin-100: 100px;
		--margin-150: 150px;
		--margin-200: 200px;
		--margin-250: 250px;
		--margin-300: 300px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	#main br.sp { display: none; }
	#main br.pc { display: inline; }
	/* [ MSR Corporate Philosophy ] */
	#main .philosophy > .wrapper {
		padding-top: var(--margin-100);
		padding-bottom: var(--margin-100);
	}
	#main .philosophy .contents {
		row-gap: var(--margin-30);
		margin-top: var(--margin-60);
	}
	#main .philosophy dl { column-gap: var(--margin-40); }
	/* スタッフ */
	#main .staff li { width: calc(100% / 5); }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 840px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メインイメージ */
	#main .topimage { margin-top: calc((100vw - 840px) / 2); }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メインイメージ */
	#main .topimage { margin-top: 92px; }
	/* スタッフ */
	#main .staff li { width: calc(100% / 7); }
	#main .staff li:nth-child(21) { display: block; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
}



@media(min-width: 1366px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--wrapper-max: calc(840vw / 13.66);

		--font-h2: calc(1.8vw * (10 / 1366 * 100));
		--font-catch: calc(3.0vw * (10 / 1366 * 100));
		--font-p: calc(1.4vw * (10 / 1366 * 100));

		--font-phi-dt: calc(1.6vw * (10 / 1366 * 100));
		--font-phi-dt-s: calc(1.4vw * (10 / 1366 * 100));
		--font-phi-dd: calc(1.8vw * (10 / 1366 * 100));
		--circle-phi: calc(135vw / 13.66);

		--margin-5: calc(5vw / 13.66);
		--margin-10: calc(10vw / 13.66);
		--margin-15: calc(15vw / 13.66);
		--margin-20: calc(20vw / 13.66);
		--margin-30: calc(30vw / 13.66);
		--margin-40: calc(40vw / 13.66);
		--margin-50: calc(50vw / 13.66);
		--margin-60: calc(60vw / 13.66);
		--margin-100: calc(100vw / 13.66);
		--margin-150: calc(150vw / 13.66);
		--margin-200: calc(200vw / 13.66);
		--margin-250: calc(250vw / 13.66);
		--margin-300: calc(300vw / 13.66);
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1600px) {
}