@charset "utf-8";

/* ↓共通CSS↓ */
@import url("common.css");


/* ↓猫叉堂↓ */

/* 通常画面用ナビゲーションを表示する */
@media(width >= 768px) {
	body {
		background-image: url(../images/image_pc_background-02.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	/* ヘッダーの設定 */

	.pc-base {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		padding: 0;
		width: 70%;
		height: 80px;
	}

	.pc-logo {
		float: none;
		margin: 0;
		padding: 0;
		width: 80px;
		height: 80px;
	}

	#nav-sp button {
		float: auto;
		display: none;
	}


	#nav-pc ul {
		float: auto;
		list-style-type: none;
		display: flex;
		flex-direction: row;
	}

	#nav-pc li {
		margin: 0;
		padding: 20px 0;
		width: 150px;
		height: 80px;
		text-align: center;
		vertical-align: baseline;
	}

		#nav-pc li:hover { 
			background-color: #4169E1; 
		}

	#nav-pc a {
		color: #000;
		text-decoration: none;
	}

	.pc-menu-main {
		font-size: 20px;
		line-height: 0.8;
	}

	.pc-menu-sub {
		font-size: 10px;
	}

	/* モバイル用ナビゲーションを非表示にする */

	header.nav-sp {
		display: none;
		height: 0;
	}

	nav#nav-sp {
		display: none;
		height: 0;
	}

/* 通常画面用コンテンツ開始 */
	
	.main-pc {
		width: 100%;
		height: 100%;
	}

	section.about {
		margin: 0;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	article.about {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	div.about-pc {
		margin-top: 80px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		width: 70%;
		text-align: center;
	}

	div.about-left {
		float: left;
		width: 640px;
		height: 660px;
		border-radius: 50px 0;
		background-image: url(../images/image_concept.jpg);
	}

	div.about-right {
		float: right;
		width: 640px;
		height: 654px;
		padding-left: 40px;
		text-align: left;
		font-size: 18px;
		line-height: 1.4;
	}

	section.products {
		margin: 0;
		background-color: transparent;
		color: #000;
		text-align: center;
	}

	article.products {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: transparent;
		color: #000;
		text-align: center;
	}

	div.products-pc {
		margin: 80px auto;
		display: flex;
		flex-wrap: wrap;
		gap:40px;
		width: 70%;
	}

	div.product-item {
		padding: 50px auto;
		display: flex;
		flex-direction: column;
		width: 400px;
		height: 300px;
		border-radius: 50px 0;
		background-color: #fff;
		text-align: center;
		vertical-align: middle;
	}

	div.img-pc {
		margin: 50px 0;
	}

	section.works {
		margin: 0;
		background-color: transparent;
		color: #000;
		text-align: center;
	}

	article.works {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: transparent;
		color: #000;
		text-align: center;
	}

	div.works-pc {
		margin: 80px auto;
		display: flex;
		flex-direction: column;
		width: 70%;
		height: auto;
		border: #4169E1 solid 1px;
	}

	summary.work-item {
		padding-top: 20px;
		padding-left: 50px;
		display: flex;
		width: 100%;
		height: 80px;
		background-color: #fff;
		color: #000;
		text-align: left;
		border: #4169E1 solid 1px;
	}

		summary:hover {
			background-color: #4169E1;
		}
		div.work-details {
			padding: 50px;
			text-align: left;
			background-color: #6495ED;
		}

	section.skills {
		margin: 0;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	article.skills {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	div.skills-pc {
		margin: 80px auto;
		display: flex;
		flex-direction: column;
		width: 70%;
		height: auto;
	}

	div.skills-item {
		padding-top: 20px;
		padding-left: 50px;
		display: flex;
		width: 100%;
		height: 80px;
		background-color: #fff;
		color: #000;
		text-align: left;
		border: #4169E1 solid 1px;
	}

	div.skills-list {
		margin-top: 120px;
		padding-top: 20px;
		padding-left: 50px;
		display: flex;
		width: 100%;
		height: auto;
		background-color: #fff;
		color: #000;
		text-align: left;
		border: #4169E1 solid 1px;
	}

	section.contact {
		margin: 0;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	article.contact {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	div.contact-pc {
		margin: 80px auto;
		text-align: left;
		width: 70%;
	}
	
	div.formspree-pc {
		text-align: left;
	}

	/* モバイル用コンテンツ非表示 */
	.main-sp {
		display: none;
	}

}

/* モバイル用ナビゲーションを表示する */
@media(width < 768px) {
	body {
		background-image: url(../images/image_sp_background-02.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	/* ヘッダーの設定 */

	.sp-base {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		padding: 0 20px;
		width: 100%;
		height: 80px;
	}
	
	.sp-logo {
		float: none;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 80px;
	}

	button#open-sp {
		display: block;
	}
	button#close-sp {
		display: none;
	}


	nav#nav-sp {
		display: none;
	}

	#nav-sp ul {
		float: none;
		list-style-type: none;
		display: block;
		flex-direction: row;
		z-index: 10000;
	}

	#nav-sp li {
		margin: 0;
		padding: 20px 40px;
		width: 100%;
		height: 80px;
		text-align: left;
		vertical-align: baseline;
		background-color: #f0f8ff;
		color: #000; 
		border: #4169E1 solid 1px;
		}

		#nav-sp li:hover { 
			background-color: #4169E1;
			color: #daa520; 
		}

	#nav-sp a {
		color: #000;
		text-decoration: none;
	}
		#nav-sp a:hover {
			color: #daa520; 
			text-decoration: none;
		}

	.pc-menu-main {
		font-size: 20px;
		line-height: 0.8;
	}

	.pc-menu-sub {
		font-size: 10px;
	}

	/* 通常画面用ナビゲーションを非表示にする */

	header.nav-pc {
		display: none;
		height: 0;
	}

	nav#nav-pc {
		display: none;
		height: 0;
	}

/* モバイル用コンテンツ開始 */
	.main-sp {
		width: 100%;
		height: 100%;
	}

	section.about {
		margin: 0;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	article.about {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	div.about-sp {
		margin-top: 80px;
		padding: 0 20px;
		width: 100%;
		height: auto;
		text-align: left;
		font-size: 18px;
		line-height: 1.4;
	}
	div.about-left-sp {
		background-image: url(../images/image_concept.jpg);
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: scroll;
		opacity: 0.4;
	}

	section.products {
		margin: 0;
		background-color: transparent;
		color: #000;
		text-align: center;
	}

	article.products {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: transparent;
		color: #000;
		text-align: center;
	}

	div.products-sp {
		margin: 80px auto;
		padding: 0 20px;
		width: 100%;
	}

	div.product-item-sp {
		margin: 20px auto;
		padding: 50px auto;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 500px;
		border-radius: 50px 0;
		background-color: #fff;
		text-align: center;
		vertical-align: middle;
	}

	div.img-sp {
		margin: 50px 0;
	}

	section.works {
		margin: 0;
		background-color: transparent;
		color: #000;
		text-align: center;
	}

	article.works {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: transparent;
		color: #000;
		text-align: center;
	}

	div.works-sp {
		margin: 80px auto;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
	}

	summary.work-item {
		padding-top: 20px;
		padding-left: 50px;
		display: flex;
		width: 100%;
		height: 80px;
		background-color: #fff;
		color: #000;
		text-align: left;
		border: #4169E1 solid 1px;
	}

		summary:hover {
			background-color: #4169E1;
		}
		div.work-details {
			padding: 40px;
			text-align: left;
			background-color: #6495ED;
		}

	section.skills {
		margin: 0;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	article.skills {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	div.skills-sp {
		margin: 80px auto;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
	}

	div.skills-item {
		padding-top: 20px;
		padding-left: 50px;
		display: flex;
		width: 100%;
		height: 80px;
		background-color: #fff;
		color: #000;
		text-align: left;
		border: #4169E1 solid 1px;
	}

	div.skills-list {
		margin-top: 120px;
		padding: 20px;
		display: flex;
		width: 100%;
		height: auto;
		background-color: #fff;
		color: #000;
		text-align: left;
		border: #4169E1 solid 1px;
	}

	section.contact {
		margin: 0;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	article.contact {
		margin: 0;
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	div.contact-sp {
		margin: 80px auto;
		padding: 0 20px;
		text-align: left;
		width: 100%;
	}
	
	div.formspree-sp {
		text-align: left;
	}

	/* 通常画面用コンテンツ非表示 */
	.main-pc {
		display: none;
		height: 0;
	}
}