@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: 90%;
	--wrapper-max: 720px;

	--color-black: #2d2d2d;
	--color-white: #fff;
	--color-h1: rgba(35, 124, 171, 0.50);

	--font-h2: 16px;
	--font-h3: 16px;
	--font-p: 14px;

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

	--line: 2;

	--h1: 20px;/*25px;*/
	--midashi: 30px;/*38px;*/

	--margin-5: 5px;
	--margin-10: 10px;
	--margin-15: 15px;
	--margin-20: 20px;
	--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 .slide { position: relative; }
#main h1 {
	background-color: var(--color-h1);
	display: flex;
	align-items: center;
	padding: var(--margin-15) 0;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	text-align: center;
	width: 100%;
	z-index: 10;
}
#main h1 img { height: var(--h1); }

/* コンテナー */
#main .container {
	margin-top: var(--margin-50);
	padding-bottom: var(--margin-300);
	position: relative;
}
#main .container::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.read {
	margin-top: var(--margin-150);
	padding-bottom: var(--margin-100);
}
#main .container.read::after { content: none; }
#main .container.read .image { margin-top: var(--margin-150); }

#main .container.concept {
	margin-top: var(--margin-50);
	padding-bottom: var(--margin-250);
}
#main .container.concept::after { bottom: var(--margin-100); }

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

/* 見出し */
#main h2 {
	font-size: var(--font-h2);
	text-align: center;
}
#main h3 {
	font-size: var(--font-h3);
	margin-top: var(--margin-20);
	padding-bottom: var(--margin-40);
	text-align: center;
}

#main .midashi img { height: var(--midashi); }

/* リード */
#main .comment {
	font-size: var(--font-p);
	line-height: var(--line);
	margin-top: var(--margin-20);
	text-align: justify;
}

/* イメージ */
#main .image {
	margin-top: var(--margin-60);
	/*height: 70vw;
	position: relative;
	overflow: hidden;*/
}
/*#main .image img {
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	max-width: none;
}*/

#main .images {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-5);
	list-style: none;
	margin-top: var(--margin-5);
}
#main .images li { width: calc((100% - var(--margin-5)) / 2); }





@media(min-width: 530px) {
	/* イメージ */
	/*#main .image { height: auto; }
	#main .image img {
		height: auto;
		position: static;
		transform: translateX(0);
		width: 100%;
		max-width: 100%;
	}*/
}



@media(min-width: 768px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--font-h2: 16px;
		--font-h3: 16px;
		--font-p: 14px;

		--h1: 25px;
		--midashi: 38px;

		/*--margin-20: 20px;*/
		/*--margin-40: 40px;*/
		/*--margin-50: 50px;*/
		/*--margin-60: 60px;*/
		--margin-100: 100px;
		--margin-150: 150px;
		--margin-200: 200px;
		--margin-250: 250px;
		--margin-300: 300px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* イメージ */
	#main .images li { width: calc((100% - var(--margin-10)) / 3); }
}

@media(min-width: 769px) {
	#main { padding-bottom: 350px; }
}



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



@media(min-width: 1280px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* イメージ */
	#main .images {
		gap: var(--margin-10);
		margin-top: var(--margin-10);
	}
	#main .images li { width: calc((100% - var(--margin-20)) / 3); }
}



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

		--font-h2: calc(1.6vw * (10 / 1366 * 100));
		--font-h3: calc(1.6vw * (10 / 1366 * 100));
		--font-p: calc(1.4vw * (10 / 1366 * 100));

		--h1: calc(25vw / 13.66);
		--midashi: calc(38vw / 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-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) {
}