@charset "utf-8";

/*PCサイズレスポンシブ*/
@media(min-width:1000px) {


	body {
		background-color: rgb(246, 241, 235);
		color: rgb(57, 30, 9);

		background-size: contain;

		/* background-repeat: unset; */
		/* background-image: url(../img/backimage.svg); */
		min-width: 1000px;
		font-family: "Merriweather", serif;


	}

a{
	color: rgb(57, 30, 9);
}
	.container {
		/* background-color: azure; */
		width: 100%;
	}

	nav {
		display: none;
	}

	.header {
		/* background-color: aqua; */
		width: 100%;
		display: flex;
	}

	.header-logo {
		/* background-color: antiquewhite; */
		width: 15%;
	}

	.header-logo img {
		width: 30%;
	}

	.header-navi {
		/* background-color: khaki; */
		width: 80%;

	}

	.header-navi ul {
		display: flex;
		justify-content: space-around;
		padding-left: 0;


	}

	.header-navi li {
		list-style: none;
	}

	.header-navi a {
		text-decoration: none;
		color: #333;
	}

	/*== 上に移動し影がついて浮き上がる */

	/*ボタンの形状*/
	.header-navi a {
		position: relative;
		top: 0;
		padding: 10px 20px;
		display: inline-block;
		border: 1px solid #ccc;
		color: #333;
		text-decoration: none;
		outline: none;
		/*アニメーションの設定*/
		transition: all .3s;
	}

	/*hoverをしたらボックスに影がつき、上に上がる*/
	.header-navi a:hover {
		top: -3px;
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
	}


	/* ヘッダーを残す方法　https://taekok.com/header-fixed/ */
	.header-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		opacity: 1;
		visibility: visible;
		animation: slide 0.5s ease-in-out;
	}

	@keyframes slide {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0%);
		}

	}

	.main {
		/* background-color: beige; */

		text-align: center;
		padding: 20% 20%;
		background-image: url(../img/home-backimage.PNG);
		background-size: cover;
		font-size: larger;
	}


	.main img {
		/* background-color: lightgoldenrodyellow; */
		width: 50%;

	}



	.title {
		color: rgb(57, 30, 9);
		font-size: xx-large;
		font-weight: bolder;
		margin: 10% 0% 0 3%;

	}

	.londrina-sketch-regular {
		font-family: "Londrina Sketch", sans-serif;
		font-weight: 400;
		font-style: normal;
	}

	/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

	/*スクロールダウン全体の場所*/
	.scrolldown4 {
		/*描画位置※位置は適宜調整してください*/
		position: absolute;
		bottom: 1%;
		right: 10%;
		/*矢印の動き1秒かけて永遠にループ*/
		animation: arrowmove 1s ease-in-out infinite;
	}

	/*下からの距離が変化して全体が下→上→下に動く*/
	@keyframes arrowmove {
		0% {
			bottom: 1%;
		}

		50% {
			bottom: 3%;
		}

		100% {
			bottom: 1%;
		}
	}

	/*Scrollテキストの描写*/
	.scrolldown4 span {
		/*描画位置*/
		position: absolute;
		left: -20px;
		bottom: 10px;
		/*テキストの形状*/
		color: #444141;
		font-size: 0.7rem;
		letter-spacing: 0.05em;
		/*縦書き設定*/
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}

	/* 矢印の描写 */
	.scrolldown4:before {
		content: "";
		/*描画位置*/
		position: absolute;
		bottom: 0;
		right: -6px;
		/*矢印の形状*/
		width: 1px;
		height: 20px;
		background: #444141;
		transform: skewX(-31deg);
	}

	.scrolldown4:after {
		content: "";
		/*描画位置*/
		position: absolute;
		bottom: 0;
		right: 0;
		/*矢印の形状*/
		width: 1px;
		height: 50px;
		background: #444141;
	}

	.about {
		width: 100%;
		position: relative;
		display: flex; /* フレックスボックスを利用してレイアウトを簡単に調整 */
		justify-content: center; /* 子要素を中央揃え */
		align-items: center; /* 垂直方向も中央揃え */
		gap: 20px; /* 子要素の間隔 */
	}
	
	.about1 {
		display: flex;
		flex-direction: row; /* テキストと画像を横並びに */
		justify-content: center;
		align-items: center;
		text-align: center; /* テキストを左揃え */
		width: 100%;
	}
	
	.about2 {
		width: 50%; /* テキスト部分の幅を50%に */
		margin: 0;
		text-align: center; /* テキストを左寄せ */
		padding: 10%; /* テキストボックス内に余白を追加 */
	}
	
	.about2 p {
		color: #7a7676;
	}
	
	.img {
		width: 50%; /* 画像部分の幅を50%に */
		text-align: center;
	}
	
	.img img {
		width: 60%; /* 画像自体のサイズを小さく（親ボックスの80%） */
		max-width: 80%; /* 親要素の幅を超えないように */
		height: auto; /* アスペクト比を維持 */
	}
	
	

	.about-cercle {
		height: 200px;
		margin-inline: auto;
		margin-top: 50px;
		width: 200px;
	}

	.about-cercle img {
		width: 300px;
		position: absolute;
		top: 3900px;
		left: 75%;
		animation: rotation 10s linear infinite;
	}

	/* https://junpei-sugiyama.com/transform-rotate/ */
	/* アニメーション */
	@keyframes rotation {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}

	}



	.works {
		/* background-color: lightpink; */
		width: 100%;
		/* display: flex; */
		justify-content: center;
		position: relative;
		
	}

	.works1 {
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30px;
		gap: 20px;
	}

	.works1-img {
		/* background-color: aquamarine; */
		flex: 1;
		max-width: 50%;
		text-align: center;


	}

	.works1-img img {
		width: 100%;
		/* 親要素の幅に合わせる */
		height: auto;
		/* 縦横比を維持 */
		border-radius: 10px;
		/* 角を丸くする（オプション） */
	}

	.works1-text {
		/* background-color: bisque; */

		flex: 1;
		/* 横幅を均等に割り当てる */
		max-width: 50%;
		/* 幅の上限を50%に設定 */
		padding: 20px;
		/* 内側に余白を追加 */
		border-radius: 10px;
		/* 角を丸くする（オプション） */
		text-align: left;
	}

	.works2 {
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		gap: 20px; /* 要素間の余白を追加 */
	}
	
	.works2-img {
		/* background-color: aquamarine; */
		flex: 1; /* 横幅を均等に割り当てる */
		max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
		text-align: center;
	}
	
	.works2-img img {
		width: 100%; /* 親要素の幅に合わせる */
		height: auto; /* 縦横比を維持 */
		max-height: 400px; /* 画像の最大高さを制限 */
		border-radius: 10px; /* 角を丸くする（オプション） */
		object-fit: cover; /* 画像の切り抜き方を調整 */
	}
	
	.works2-text {
		/* background-color: bisque; */
		flex: 1; /* 横幅を均等に割り当てる */
		max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
		padding: 20px; /* 内側に余白を追加 */
		border-radius: 10px; /* 角を丸くする（オプション） */
		text-align: left;
	}

	.works3 {
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		gap: 20px; /* 要素間の余白を追加 */
	}
	
	.works3-img {
		/* background-color: aquamarine; */
		flex: 1; /* 横幅を均等に割り当てる */
		max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
		text-align: center;
	}
	
	.works3-img img {
		width: 100%; /* 親要素の幅に合わせる */
		height: auto; /* 縦横比を維持 */
		max-height: 400px; /* 画像の最大高さを制限 */
		border-radius: 10px; /* 角を丸くする（オプション） */
		object-fit: cover; /* 画像の切り抜き方を調整 */
	}
	
	.works3-text {
		/* background-color: bisque; */
		flex: 1; /* 横幅を均等に割り当てる */
		max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
		padding: 20px; /* 内側に余白を追加 */
		border-radius: 10px; /* 角を丸くする（オプション） */
		text-align: left;
	}
	.works4 {
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		gap: 20px; /* 要素間の余白を追加 */
	}
	
	.works4-img {
		/* background-color: aquamarine; */
		flex: 1; /* 横幅を均等に割り当てる */
		max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
		text-align: center;
	}
	
	.works4-img img {
		width: 100%; /* 親要素の幅に合わせる */
		height: auto; /* 縦横比を維持 */
		max-height: 400px; /* 画像の最大高さを制限 */
		border-radius: 10px; /* 角を丸くする（オプション） */
		object-fit: contain; /* 画像の切り抜き方を調整 */
	}
	
	.works4-text {
		/* background-color: bisque; */
		flex: 1; /* 横幅を均等に割り当てる */
		max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
		padding: 20px; /* 内側に余白を追加 */
		border-radius: 10px; /* 角を丸くする（オプション） */
		text-align: left;
	}
	.works5 {
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		gap: 20px; /* 要素間の余白を追加 */
	}
	
	.works5-img {
		/* background-color: aquamarine; */
		flex: 1; /* 横幅を均等に割り当てる */
		max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
		text-align: center;
	}
	
	.works5-img img {
		width: 100%; /* 親要素の幅に合わせる */
		height: auto; /* 縦横比を維持 */
		max-height: 400px; /* 画像の最大高さを制限 */
		border-radius: 10px; /* 角を丸くする（オプション） */
		object-fit: contain; /* 画像の切り抜き方を調整 */
	}
	
	.works5-text {
		/* background-color: bisque; */
		flex: 1; /* 横幅を均等に割り当てる */
		max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
		padding: 20px; /* 内側に余白を追加 */
		border-radius: 10px; /* 角を丸くする（オプション） */
		text-align: left;
	}
	.works-title{
		margin: 10% 0 0 3%;
	}
	.contact {
		/* background-color: palegoldenrod; */
		width: 100%;
		position: relative;
		padding: 5% 0 5% 0;
		text-align: center;

	}

	.contact-cercle img {
		width: 200px;
		position: absolute;
		top: 200px;
		left: 0px;
		animation: rotation 10s linear infinite;
	}
}

	
	
	@media (max-width: 768px) {
		.works1 {
			flex-direction: column; /* スマホ画面では縦並びに */
			align-items: center;
		}
		.works1-img,
		.works1-text {
			max-width: 100%; /* 幅を100%に設定 */
		}
	}
	


	

	/* アニメーション */
	@keyframes rotation {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}

	}

	/*========= LoadingのためのCSS ===============*/

	/* Loading背景画面設定　*/
	#splash {
		/*fixedで全面に固定*/
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 9999999;
		background: #333;
		text-align: center;
		color: #fff;
	}

	/* Loading画像中央配置　*/
	#splash_logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* Loading アイコンの大きさ設定　*/
	#splash_logo img {
		width: 260px;
	}

	/* fadeUpをするアイコンの動き */

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

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

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

	/*========= 画面遷移のためのCSS ===============*/

	/*画面遷移アニメーション*/
	.splashbg {
		display: none;
	}

	/*bodyにappearクラスがついたら出現*/
	body.appear .splashbg {
		display: block;
		content: "";
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		transform: scaleX(0);
		background-color: #333;
		/*伸びる背景色の設定*/
		animation-name: PageAnime;
		animation-duration: 1.2s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;

	}

	@keyframes PageAnime {
		0% {
			transform-origin: right;
			transform: scaleX(0);
		}

		50% {
			transform-origin: right;
			transform: scaleX(1);
		}

		50.001% {
			transform-origin: left;
		}

		100% {
			transform-origin: left;
			transform: scaleX(0);
		}
	}

	/*画面遷移の後現れるコンテンツ設定*/

	#container {
		opacity: 0;
		/*はじめは透過0に*/
	}

	/*bodyにappearクラスがついたら出現*/
	body.appear #container {
		animation-name: PageAnimeAppear;
		animation-duration: 1s;
		animation-delay: 0.8s;
		animation-fill-mode: forwards;
		opacity: 0;
	}

	@keyframes PageAnimeAppear {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.contact a {
		position: relative;
		top: 0;
		padding: 10px 20px;
		display: inline-block;
		border: 1px solid #ccc;
		color: #333;
		text-decoration: none;
		outline: none;
		/*アニメーションの設定*/
		transition: all .3s;
	}

	/*hoverをしたらボックスに影がつき、上に上がる*/
	.contact a:hover {
		top: -3px;
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
	}

	.contact p {
		color: #7a7676;
	}


	/* https://naruweb.com/coding/fadein/ */
	.img {
		width: 100%;
		/*横幅いっぱい */
		/* height: 300px;      /* 高さを300pxに指定 */
		/* background: #aaa;   背景色を灰色にする */
		margin: 0 0 50px;
		/* 下方向に適度な余白 */
		opacity: 0;
		/* 初期値は透明にしておく */
		transition: .5s;
		/* 動くスピードを0.5秒に指定 */
		position: relative;
		/*相対位置の設定*/
		top: 50px;
		/* 事前に下に50pxずらしておく */
	}

	.active {
		opacity: 1;
		/* 透明度を元に戻す */
		top: 0;
		/* ずらしていた位置を戻すことで上に上がっているようにみえる */
	}

	/*ipadサイズレスポンシブ*/
	@media(min-width:600px) and (max-width:999px) {
		body {
			min-width: 600px;
			max-width: 999px;
			background-size: contain;
			background-color: rgb(246, 241, 235);
			color: rgb(57, 30, 9);
			font-family: "Merriweather", serif;
		}
		a{
			color: rgb(57, 30, 9);
		}
		.container {
			width: 100%;
		}

		/* PCcss */
	
		nav {
			display: none;
		}
	
		.header {
			/* background-color: aqua; */
			width: 100%;
			display: flex;
		}
	
		.header-logo {
			/* background-color: antiquewhite; */
			width: 15%;
		}
	
		.header-logo img {
			width: 30%;
		}
	
		.header-navi {
			/* background-color: khaki; */
			width: 80%;
	
		}
	
		.header-navi ul {
			display: flex;
			justify-content: space-around;
			padding-left: 0;
	
	
		}
	
		.header-navi li {
			list-style: none;
		}
	
		.header-navi a {
			text-decoration: none;
			color: #333;
		}
	
		/*== 上に移動し影がついて浮き上がる */
	
		/*ボタンの形状*/
		.header-navi a {
			position: relative;
			top: 0;
			padding: 10px 20px;
			display: inline-block;
			border: 1px solid #ccc;
			color: #333;
			text-decoration: none;
			outline: none;
			/*アニメーションの設定*/
			transition: all .3s;
		}
	
		/*hoverをしたらボックスに影がつき、上に上がる*/
		.header-navi a:hover {
			top: -3px;
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
		}
	
	
		/* ヘッダーを残す方法　https://taekok.com/header-fixed/ */
		.header-fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			opacity: 1;
			visibility: visible;
			animation: slide 0.5s ease-in-out;
		}
	
		@keyframes slide {
			0% {
				transform: translateY(-100%);
			}
	
			100% {
				transform: translateY(0%);
			}
	
		}
	
		.main {
			/* background-color: beige; */
	
			text-align: center;
			padding: 20% 20%;
			background-image: url(../img/home-backimage.PNG);
			background-size: cover;
			font-size: larger;
		}
	
	
		.main img {
			/* background-color: lightgoldenrodyellow; */
			width: 50%;
	
		}
	
	
	
		.title {
			color: rgb(57, 30, 9);
			font-size: xx-large;
			font-weight: bolder;
			margin: 10% 0% 0 0;
			padding: 0 0 0 5%;
	
		}
	
		.londrina-sketch-regular {
			font-family: "Londrina Sketch", sans-serif;
			font-weight: 400;
			font-style: normal;
		}
	
		/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/
	
		/*スクロールダウン全体の場所*/
		.scrolldown4 {
			/*描画位置※位置は適宜調整してください*/
			position: absolute;
			bottom: 1%;
			right: 10%;
			/*矢印の動き1秒かけて永遠にループ*/
			animation: arrowmove 1s ease-in-out infinite;
		}
	
		/*下からの距離が変化して全体が下→上→下に動く*/
		@keyframes arrowmove {
			0% {
				bottom: 1%;
			}
	
			50% {
				bottom: 3%;
			}
	
			100% {
				bottom: 1%;
			}
		}
	
		/*Scrollテキストの描写*/
		.scrolldown4 span {
			/*描画位置*/
			position: absolute;
			left: -20px;
			bottom: 10px;
			/*テキストの形状*/
			color: #444141;
			font-size: 0.7rem;
			letter-spacing: 0.05em;
			/*縦書き設定*/
			-ms-writing-mode: tb-rl;
			-webkit-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
		}
	
		/* 矢印の描写 */
		.scrolldown4:before {
			content: "";
			/*描画位置*/
			position: absolute;
			bottom: 0;
			right: -6px;
			/*矢印の形状*/
			width: 1px;
			height: 20px;
			background: #444141;
			transform: skewX(-31deg);
		}
	
		.scrolldown4:after {
			content: "";
			/*描画位置*/
			position: absolute;
			bottom: 0;
			right: 0;
			/*矢印の形状*/
			width: 1px;
			height: 50px;
			background: #444141;
		}
	
		.about {
			width: 100%;
			position: relative;
			display: flex; /* フレックスボックスを利用してレイアウトを簡単に調整 */
			justify-content: center; /* 子要素を中央揃え */
			align-items: center; /* 垂直方向も中央揃え */
			gap: 20px; /* 子要素の間隔 */
		}
		
		.about1 {
			display: flex;
			flex-direction: row; /* テキストと画像を横並びに */
			justify-content: center;
			align-items: center;
			text-align: center; /* テキストを左揃え */
			width: 100%;
		}
		
		.about2 {
			width: 50%; /* テキスト部分の幅を50%に */
			margin: 0;
			text-align: center; /* テキストを左寄せ */
			padding: 10%; /* テキストボックス内に余白を追加 */
		}
		
		.about2 p {
			color: #7a7676;
		}
		
		.img {
			width: 50%; /* 画像部分の幅を50%に */
			text-align: center;
		}
		
		.img img {
			width: 60%; /* 画像自体のサイズを小さく（親ボックスの80%） */
			max-width: 80%; /* 親要素の幅を超えないように */
			height: auto; /* アスペクト比を維持 */
		}
		
		
	
		.about-cercle {
			height: 200px;
			margin-inline: auto;
			margin-top: 50px;
			width: 200px;
		}
	
		.about-cercle img {
			width: 150px;
			position: absolute;
			top: 2850px;
			left: 77%;
			animation: rotation 10s linear infinite;
		}
	
		/* https://junpei-sugiyama.com/transform-rotate/ */
		/* アニメーション */
		@keyframes rotation {
			0% {
				transform: rotate(0deg);
			}
	
			100% {
				transform: rotate(360deg);
			}
	
		}
	
	
	
		.works {
			/* background-color: lightpink; */
			width: 100%;
			/* display: flex; */
			justify-content: center;
			position: relative;
			
		}
	
		.works1 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30px;
			gap: 20px;
		}
	
		.works1-img {
			/* background-color: aquamarine; */
			flex: 1;
			max-width: 50%;
			text-align: center;
	
	
		}
	
		.works1-img img {
			width: 100%;
			/* 親要素の幅に合わせる */
			height: auto;
			/* 縦横比を維持 */
			border-radius: 10px;
			/* 角を丸くする（オプション） */
		}
	
		.works1-text {
			/* background-color: bisque; */
	
			flex: 1;
			/* 横幅を均等に割り当てる */
			max-width: 50%;
			/* 幅の上限を50%に設定 */
			padding: 20px;
			/* 内側に余白を追加 */
			border-radius: 10px;
			/* 角を丸くする（オプション） */
			text-align: left;
		}
	
		.works2 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			gap: 20px; /* 要素間の余白を追加 */
		}
		
		.works2-img {
			/* background-color: aquamarine; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			text-align: center;
		}
		
		.works2-img img {
			width: 100%; /* 親要素の幅に合わせる */
			height: auto; /* 縦横比を維持 */
			max-height: 400px; /* 画像の最大高さを制限 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			object-fit: cover; /* 画像の切り抜き方を調整 */
		}
		
		.works2-text {
			/* background-color: bisque; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			padding: 20px; /* 内側に余白を追加 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			text-align: left;
		}
	
		.works3 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			gap: 20px; /* 要素間の余白を追加 */
		}
		
		.works3-img {
			/* background-color: aquamarine; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			text-align: center;
		}
		
		.works3-img img {
			width: 100%; /* 親要素の幅に合わせる */
			height: auto; /* 縦横比を維持 */
			max-height: 400px; /* 画像の最大高さを制限 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			object-fit: cover; /* 画像の切り抜き方を調整 */
		}
		
		.works3-text {
			/* background-color: bisque; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			padding: 20px; /* 内側に余白を追加 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			text-align: left;
		}
		.works4 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			gap: 20px; /* 要素間の余白を追加 */
		}
		
		.works4-img {
			/* background-color: aquamarine; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			text-align: center;
		}
		
		.works4-img img {
			width: 100%; /* 親要素の幅に合わせる */
			height: auto; /* 縦横比を維持 */
			max-height: 400px; /* 画像の最大高さを制限 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			object-fit: contain; /* 画像の切り抜き方を調整 */
		}
		
		.works4-text {
			/* background-color: bisque; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			padding: 20px; /* 内側に余白を追加 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			text-align: left;
		}
		.works5 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			gap: 20px; /* 要素間の余白を追加 */
		}
		
		.works5-img {
			/* background-color: aquamarine; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			text-align: center;
		}
		
		.works5-img img {
			width: 100%; /* 親要素の幅に合わせる */
			height: auto; /* 縦横比を維持 */
			max-height: 400px; /* 画像の最大高さを制限 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			object-fit: contain; /* 画像の切り抜き方を調整 */
		}
		
		.works5-text {
			/* background-color: bisque; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			padding: 20px; /* 内側に余白を追加 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			text-align: left;
		}
		.works-title{
			margin: 10% 0 0 3%;
		}
	}
	
		
		
		@media (max-width: 768px) {
			.works1 {
				flex-direction: column; /* スマホ画面では縦並びに */
				align-items: center;
			}
			.works1-img,
			.works1-text {
				max-width: 100%; /* 幅を100%に設定 */
			}
		}
		
	
	
		.contact {
			/* background-color: palegoldenrod; */
			width: 100%;
			position: relative;
			padding: 5% 0 5% 0;
			text-align: center;
	
		}
	
		.contact-cercle img {
			width: 200px;
			position: absolute;
			top: 200px;
			left: 0px;
			animation: rotation 10s linear infinite;
		}
	
		/* アニメーション */
		@keyframes rotation {
			0% {
				transform: rotate(0deg);
			}
	
			100% {
				transform: rotate(360deg);
			}
	
		}
	
		/*========= LoadingのためのCSS ===============*/
	
		/* Loading背景画面設定　*/
		#splash {
			/*fixedで全面に固定*/
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 9999999;
			background: #333;
			text-align: center;
			color: #fff;
		}
	
		/* Loading画像中央配置　*/
		#splash_logo {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	
		/* Loading アイコンの大きさ設定　*/
		#splash_logo img {
			width: 260px;
		}
	
		/* fadeUpをするアイコンの動き */
	
		.fadeUp {
			animation-name: fadeUpAnime;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			opacity: 0;
		}
	
		@keyframes fadeUpAnime {
			from {
				opacity: 0;
				transform: translateY(100px);
			}
	
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	
		/*========= 画面遷移のためのCSS ===============*/
	
		/*画面遷移アニメーション*/
		.splashbg {
			display: none;
		}
	
		/*bodyにappearクラスがついたら出現*/
		body.appear .splashbg {
			display: block;
			content: "";
			position: fixed;
			z-index: 999;
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			transform: scaleX(0);
			background-color: #333;
			/*伸びる背景色の設定*/
			animation-name: PageAnime;
			animation-duration: 1.2s;
			animation-timing-function: ease-in-out;
			animation-fill-mode: forwards;
	
		}
	
		@keyframes PageAnime {
			0% {
				transform-origin: right;
				transform: scaleX(0);
			}
	
			50% {
				transform-origin: right;
				transform: scaleX(1);
			}
	
			50.001% {
				transform-origin: left;
			}
	
			100% {
				transform-origin: left;
				transform: scaleX(0);
			}
		}
	
		/*画面遷移の後現れるコンテンツ設定*/
	
		#container {
			opacity: 0;
			/*はじめは透過0に*/
		}
	
		/*bodyにappearクラスがついたら出現*/
		body.appear #container {
			animation-name: PageAnimeAppear;
			animation-duration: 1s;
			animation-delay: 0.8s;
			animation-fill-mode: forwards;
			opacity: 0;
		}
	
		@keyframes PageAnimeAppear {
			0% {
				opacity: 0;
			}
	
			100% {
				opacity: 1;
			}
		}
	
		.contact a {
			position: relative;
			top: 0;
			padding: 10px 20px;
			display: inline-block;
			border: 1px solid #ccc;
			color: #333;
			text-decoration: none;
			outline: none;
			/*アニメーションの設定*/
			transition: all .3s;
		}
	
		/*hoverをしたらボックスに影がつき、上に上がる*/
		.contact a:hover {
			top: -3px;
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
		}
	
		.contact p {
			color: #7a7676;
		}
	
	
		/* https://naruweb.com/coding/fadein/ */
		.img {
			width: 100%;
			/*横幅いっぱい */
			/* height: 300px;      /* 高さを300pxに指定 */
			/* background: #aaa;   背景色を灰色にする */
			margin: 0 0 50px;
			/* 下方向に適度な余白 */
			opacity: 0;
			/* 初期値は透明にしておく */
			transition: .5s;
			/* 動くスピードを0.5秒に指定 */
			position: relative;
			/*相対位置の設定*/
			top: 50px;
			/* 事前に下に50pxずらしておく */
		}
	
		.active {
			opacity: 1;
			/* 透明度を元に戻す */
			top: 0;
			/* ずらしていた位置を戻すことで上に上がっているようにみえる */
		}
		
		
	/*SPサイズレスポンシブ*/
	@media (max-width:599px) {
		
		body {
			max-width: 599px;
			background-size: contain;
			background-color: rgb(246, 241, 235);
			color: rgb(57, 30, 9);
			font-family: "Merriweather", serif;
		}
		a{
			color: rgb(57, 30, 9);
		}
		.container {
			width: 100%;
		}
		/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

		/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
		.openbtn {
			position: relative;
			/*ボタン内側の基点となるためrelativeを指定*/
			background: #a19a9d;
			cursor: pointer;
			width: 50px;
			height: 50px;
			border-radius: 5px;
			top: 50px;
			left: 80%;
		}

		/*ボタン内側*/
		.openbtn span {
			display: inline-block;
			transition: all .4s;
			/*アニメーションの設定*/
			position: absolute;
			left: 14px;
			height: 2px;
			border-radius: 5px;
			background: #fff;
			width: 45%;
		}


		.openbtn span:nth-of-type(1) {
			top: 13px;
		}

		.openbtn span:nth-of-type(2) {
			top: 19px;
		}

		.openbtn span:nth-of-type(3) {
			top: 25px;
		}

		.openbtn span:nth-of-type(3)::after {
			content: "Menu";
			/*3つ目の要素のafterにMenu表示を指定*/
			position: absolute;
			top: 5px;
			left: -2px;
			color: #fff;
			font-size: 0.6rem;
			text-transform: uppercase;
		}

		/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

		.openbtn.active span:nth-of-type(1) {
			top: 14px;
			left: 18px;
			transform: translateY(6px) rotate(-45deg);
			width: 30%;
		}

		.openbtn.active span:nth-of-type(2) {
			opacity: 0;
		}

		.openbtn.active span:nth-of-type(3) {
			top: 26px;
			left: 18px;
			transform: translateY(-6px) rotate(45deg);
			width: 30%;
		}

		.openbtn.active span:nth-of-type(3)::after {
			content: "Close";
			/*3つ目の要素のafterにClose表示を指定*/
			transform: translateY(0) rotate(-45deg);
			top: 5px;
			left: 4px;
		}

		/*========= ナビゲーションのためのCSS ===============*/

		/*アクティブになったエリア*/
		#g-nav.panelactive {
			/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
			position: fixed;
			z-index: 999;
			top: 0;
			width: 100%;
			height: 100vh;
		}

		/*丸の拡大*/
		.circle-bg {
			position: fixed;
			z-index: 3;
			/*丸の形*/
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: #999;
			/*丸のスタート位置と形状*/
			transform: scale(0);
			/*scaleをはじめは0に*/
			right: -50px;
			top: calc(50% - 50px);
			/*50%から円の半径を引いた値*/
			transition: all .6s;
			/*0.6秒かけてアニメーション*/
		}

		.circle-bg.circleactive {
			transform: scale(50);
			/*クラスが付与されたらscaleを拡大*/
		}

		/*ナビゲーションの縦スクロール*/
		#g-nav-list {
			display: none;
			/*はじめは表示なし*/
			/*ナビの数が増えた場合縦スクロール*/
			position: fixed;
			z-index: 999;
			width: 100%;
			height: 100vh;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
		}

		#g-nav.panelactive #g-nav-list {
			display: block;
			/*クラスが付与されたら出現*/
		}

		/*ナビゲーション*/
		#g-nav ul {
			opacity: 0;
			/*はじめは透過0*/
			/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
			position: absolute;
			z-index: 999;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		/*背景が出現後にナビゲーションを表示*/
		#g-nav.panelactive ul {
			opacity: 1;
		}

		/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
		#g-nav.panelactive ul li {
			animation-name: gnaviAnime;
			animation-duration: 1s;
			animation-delay: .2s;
			/*0.2 秒遅らせて出現*/
			animation-fill-mode: forwards;
			opacity: 0;
		}

		@keyframes gnaviAnime {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}


		/*リストのレイアウト設定*/
		#g-nav li {
			text-align: center;
			list-style: none;
		}

		#g-nav li a {
			color: #333;
			text-decoration: none;
			padding: 10px;
			display: block;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			font-weight: bold;
		}


		/*========= ボタンのためのCSS ===============*/
		.openbtn {
			position: fixed;
			top: 10px;
			right: 10px;
			z-index: 9999;
			/*ボタンを最前面に*/
			cursor: pointer;
			width: 50px;
			height: 50px;
		}

		/*×に変化*/
		.openbtn span {
			display: inline-block;
			transition: all .4s;
			position: absolute;
			left: 14px;
			height: 3px;
			border-radius: 2px;
			background-color: #666;
			width: 45%;
		}

		.openbtn span:nth-of-type(1) {
			top: 15px;
		}

		.openbtn span:nth-of-type(2) {
			top: 23px;
		}

		.openbtn span:nth-of-type(3) {
			top: 31px;
		}

		.openbtn.active span:nth-of-type(1) {
			top: 18px;
			left: 18px;
			transform: translateY(6px) rotate(-45deg);
			width: 30%;
		}

		.openbtn.active span:nth-of-type(2) {
			opacity: 0;
		}

		.openbtn.active span:nth-of-type(3) {
			top: 30px;
			left: 18px;
			transform: translateY(-6px) rotate(45deg);
			width: 30%;
		}
		nav {
			display: none;
		}
	
		.header {
			/* background-color: aqua; */
			width: 100%;
			display: flex;
		}
	
		.header-logo {
			/* background-color: antiquewhite; */
			width: 15%;
		}
	
		.header-logo img {
			width: 30%;
		}
	
		.header-navi {
			/* background-color: khaki; */
			width: 80%;
			display: none;
	
		}
	
		.header-navi ul {
			display: flex;
			justify-content: space-around;
			padding-left: 0;
	
	
		}
	
		.header-navi li {
			list-style: none;
		}
	
		.header-navi a {
			text-decoration: none;
			color: #333;
		}
	
		/*== 上に移動し影がついて浮き上がる */
	
		/*ボタンの形状*/
		.header-navi a {
			position: relative;
			top: 0;
			padding: 10px 20px;
			display: inline-block;
			border: 1px solid #ccc;
			color: #333;
			text-decoration: none;
			outline: none;
			/*アニメーションの設定*/
			transition: all .3s;
		}
	
		/*hoverをしたらボックスに影がつき、上に上がる*/
		.header-navi a:hover {
			top: -3px;
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
		}
	
	
		/* ヘッダーを残す方法　https://taekok.com/header-fixed/ */
		.header-fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			opacity: 1;
			visibility: visible;
			animation: slide 0.5s ease-in-out;
		}
	
		@keyframes slide {
			0% {
				transform: translateY(-100%);
			}
	
			100% {
				transform: translateY(0%);
			}
	
		}
	
		.main {
			/* background-color: beige; */
	
			text-align: center;
			padding: 20% 20%;
			background-image: url(../img/home-backimage.PNG);
			background-size: cover;
			font-size: smaller;
		}
	
	
		.main img {
			/* background-color: lightgoldenrodyellow; */
			width: 50%;
	
		}
	
	
	
		.title {
			color: rgb(57, 30, 9);
			font-size: x-large;
			font-weight: bolder;
			margin: 10% 0% 0 3%;
	
		}
	
		.londrina-sketch-regular {
			font-family: "Londrina Sketch", sans-serif;
			font-weight: 400;
			font-style: normal;
		}
	
		/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/
	
		/*スクロールダウン全体の場所*/
		.scrolldown4 {
			/*描画位置※位置は適宜調整してください*/
			position: absolute;
			bottom: 1%;
			right: 10%;
			/*矢印の動き1秒かけて永遠にループ*/
			animation: arrowmove 1s ease-in-out infinite;
		}
	
		/*下からの距離が変化して全体が下→上→下に動く*/
		@keyframes arrowmove {
			0% {
				bottom: 1%;
			}
	
			50% {
				bottom: 3%;
			}
	
			100% {
				bottom: 1%;
			}
		}
	
		/*Scrollテキストの描写*/
		.scrolldown4 span {
			/*描画位置*/
			position: absolute;
			left: -20px;
			bottom: 10px;
			/*テキストの形状*/
			color: #444141;
			font-size: 0.7rem;
			letter-spacing: 0.05em;
			/*縦書き設定*/
			-ms-writing-mode: tb-rl;
			-webkit-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
		}
	
		/* 矢印の描写 */
		.scrolldown4:before {
			content: "";
			/*描画位置*/
			position: absolute;
			bottom: 0;
			right: -6px;
			/*矢印の形状*/
			width: 1px;
			height: 20px;
			background: #444141;
			transform: skewX(-31deg);
		}
	
		.scrolldown4:after {
			content: "";
			/*描画位置*/
			position: absolute;
			bottom: 0;
			right: 0;
			/*矢印の形状*/
			width: 1px;
			height: 50px;
			background: #444141;
		}
	
		.about {
			width: 100%;
			position: relative;
			display: flex; /* フレックスボックスを利用してレイアウトを簡単に調整 */
			flex-direction: column-reverse;
			justify-content: center; /* 子要素を中央揃え */
			align-items: center; /* 垂直方向も中央揃え */
			gap: 20px; /* 子要素の間隔 */
		}
		
		.about1 {
			display: flex;
			flex-direction: row; /* テキストと画像を横並びに */
			justify-content: center;
			align-items: center;
			text-align: center; /* テキストを左揃え */
			width: 100%;
		}
		
		.about2 {
			width: 50%; /* テキスト部分の幅を50%に */
			margin: 0;
			text-align: center; /* テキストを左寄せ */
			padding: 10%; /* テキストボックス内に余白を追加 */
		}
		
		.about2 p {
			color: #7a7676;
		}
		
		.img {
			width: 50%; /* 画像部分の幅を50%に */
			text-align: center;
		}
		
		.img img {
			width: 60%; /* 画像自体のサイズを小さく（親ボックスの80%） */
			max-width: 80%; /* 親要素の幅を超えないように */
			height: auto; /* アスペクト比を維持 */
		}
		
		
	
		.about-cercle {
			height: 50px;
			/* margin-inline: auto;
			margin-top: 50px;
			width: 200px; */
		}
	
		.about-cercle img {
			width: 120px;
			position: absolute;
			top: 2450px;
			left: 60%;
			animation: rotation 10s linear infinite;
		}
	
		/* https://junpei-sugiyama.com/transform-rotate/ */
		/* アニメーション */
		@keyframes rotation {
			0% {
				transform: rotate(0deg);
			}
	
			100% {
				transform: rotate(360deg);
			}
	
		}
	
	
	
		.works {
			/* background-color: lightpink; */
			width: 100%;
			/* display: flex; */
			justify-content: center;
			position: relative;
			
		}
	
		.works1 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30px;
			gap: 20px;
		}
	
		.works1-img {
			/* background-color: aquamarine; */
			flex: 1;
			max-width: 50%;
			text-align: center;
	
	
		}
	
		.works1-img img {
			width: 100%;
			/* 親要素の幅に合わせる */
			height: auto;
			/* 縦横比を維持 */
			border-radius: 10px;
			/* 角を丸くする（オプション） */
		}
	
		.works1-text {
			/* background-color: bisque; */
	
			flex: 1;
			/* 横幅を均等に割り当てる */
			max-width: 50%;
			/* 幅の上限を50%に設定 */
			padding: 20px;
			/* 内側に余白を追加 */
			border-radius: 10px;
			/* 角を丸くする（オプション） */
			text-align: left;
		}
	
		.works2 {
			/* background-color: antiquewhite; */
			display: flex;
			/* flex-direction: column-reverse; */
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			gap: 20px; /* 要素間の余白を追加 */
			
		}
		
		.works2-img {
			/* background-color: aquamarine; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			text-align: center;
		}
		
		.works2-img img {
			width: 100%; /* 親要素の幅に合わせる */
			height: auto; /* 縦横比を維持 */
			/* max-height: 400px; 画像の最大高さを制限 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			/* object-fit: cover; 画像の切り抜き方を調整 */
		}
		
		.works2-text {
			/* background-color: bisque; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			padding: 20px; /* 内側に余白を追加 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			text-align: left;
		}
	
		.works3 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			gap: 20px; /* 要素間の余白を追加 */
		}
		
		.works3-img {
			/* background-color: aquamarine; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			text-align: center;
		}
		
		.works3-img img {
			width: 100%; /* 親要素の幅に合わせる */
			height: auto; /* 縦横比を維持 */
			max-height: 400px; /* 画像の最大高さを制限 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			object-fit: cover; /* 画像の切り抜き方を調整 */
		}
		
		.works3-text {
			/* background-color: bisque; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			padding: 20px; /* 内側に余白を追加 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			text-align: left;
		}
		.works4 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			gap: 20px; /* 要素間の余白を追加 */
		}
		
		.works4-img {
			/* background-color: aquamarine; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			text-align: center;
		}
		
		.works4-img img {
			width: 100%; /* 親要素の幅に合わせる */
			height: auto; /* 縦横比を維持 */
			max-height: 400px; /* 画像の最大高さを制限 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			object-fit: contain; /* 画像の切り抜き方を調整 */
		}
		
		.works4-text {
			/* background-color: bisque; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			padding: 20px; /* 内側に余白を追加 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			text-align: left;
		}
		.works5 {
			/* background-color: antiquewhite; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			gap: 20px; /* 要素間の余白を追加 */
		}
		
		.works5-img {
			/* background-color: aquamarine; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			text-align: center;
		}
		
		.works5-img img {
			width: 100%; /* 親要素の幅に合わせる */
			height: auto; /* 縦横比を維持 */
			max-height: 400px; /* 画像の最大高さを制限 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			object-fit: contain; /* 画像の切り抜き方を調整 */
		}
		
		.works5-text {
			/* background-color: bisque; */
			flex: 1; /* 横幅を均等に割り当てる */
			max-width: 50%; /* 親要素内で幅の最大値を50%に設定 */
			padding: 20px; /* 内側に余白を追加 */
			border-radius: 10px; /* 角を丸くする（オプション） */
			text-align: left;
		}
		.works-title{
			margin: 10% 0 0 3%;
		}
	}
	
		
		
		@media (max-width: 768px) {
			.works1 {
				flex-direction: column; /* スマホ画面では縦並びに */
				align-items: center;
			}
			.works1-img,
			.works1-text {
				max-width: 100%; /* 幅を100%に設定 */
			}
		}
		
	
	
		.contact {
			/* background-color: palegoldenrod; */
			width: 100%;
			position: relative;
			padding: 5% 0 5% 0;
			text-align: center;
	
		}
	
		.contact-cercle img {
			width: 120px;
			position: absolute;
			top: 200px;
			left: 5%;
			animation: rotation 10s linear infinite;
		}
	
		/* アニメーション */
		@keyframes rotation {
			0% {
				transform: rotate(0deg);
			}
	
			100% {
				transform: rotate(360deg);
			}
	
		}
	
		/*========= LoadingのためのCSS ===============*/
	
		/* Loading背景画面設定　*/
		#splash {
			/*fixedで全面に固定*/
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 9999999;
			background: #333;
			text-align: center;
			color: #fff;
		}
	
		/* Loading画像中央配置　*/
		#splash_logo {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	
		/* Loading アイコンの大きさ設定　*/
		#splash_logo img {
			width: 260px;
		}
	
		/* fadeUpをするアイコンの動き */
	
		.fadeUp {
			animation-name: fadeUpAnime;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			opacity: 0;
		}
	
		@keyframes fadeUpAnime {
			from {
				opacity: 0;
				transform: translateY(100px);
			}
	
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	
		/*========= 画面遷移のためのCSS ===============*/
	
		/*画面遷移アニメーション*/
		.splashbg {
			display: none;
		}
	
		/*bodyにappearクラスがついたら出現*/
		body.appear .splashbg {
			display: block;
			content: "";
			position: fixed;
			z-index: 999;
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			transform: scaleX(0);
			background-color: #333;
			/*伸びる背景色の設定*/
			animation-name: PageAnime;
			animation-duration: 1.2s;
			animation-timing-function: ease-in-out;
			animation-fill-mode: forwards;
	
		}
	
		@keyframes PageAnime {
			0% {
				transform-origin: right;
				transform: scaleX(0);
			}
	
			50% {
				transform-origin: right;
				transform: scaleX(1);
			}
	
			50.001% {
				transform-origin: left;
			}
	
			100% {
				transform-origin: left;
				transform: scaleX(0);
			}
		}
	
		/*画面遷移の後現れるコンテンツ設定*/
	
		#container {
			opacity: 0;
			/*はじめは透過0に*/
		}
	
		/*bodyにappearクラスがついたら出現*/
		body.appear #container {
			animation-name: PageAnimeAppear;
			animation-duration: 1s;
			animation-delay: 0.8s;
			animation-fill-mode: forwards;
			opacity: 0;
		}
	
		@keyframes PageAnimeAppear {
			0% {
				opacity: 0;
			}
	
			100% {
				opacity: 1;
			}
		}
	
		.contact a {
			position: relative;
			top: 0;
			padding: 10px 20px;
			display: inline-block;
			border: 1px solid #ccc;
			color: #333;
			text-decoration: none;
			outline: none;
			/*アニメーションの設定*/
			transition: all .3s;
		}
	
		/*hoverをしたらボックスに影がつき、上に上がる*/
		.contact a:hover {
			top: -3px;
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
		}
	
		.contact p {
			color: #7a7676;
		}
	
	
		/* https://naruweb.com/coding/fadein/ */
		.img {
			width: 100%;
			/*横幅いっぱい */
			/* height: 300px;      /* 高さを300pxに指定 */
			/* background: #aaa;   背景色を灰色にする */
			margin: 50px 0 50px;
			/* 下方向に適度な余白 */
			opacity: 0;
			/* 初期値は透明にしておく */
			transition: .5s;
			/* 動くスピードを0.5秒に指定 */
			position: relative;
			/*相対位置の設定*/
			top: 50px;
			/* 事前に下に50pxずらしておく */
		}
	
		.active {
			opacity: 1;
			/* 透明度を元に戻す */
			top: 0;
			/* ずらしていた位置を戻すことで上に上がっているようにみえる */
		}