/* リセット */

*:focus {
	outline: none;
}

body, h1, h2, h3, h4, h5, h6, p, ul, figure {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

ul {
	list-style: none;
}

/* 変数 */

:root {
	font-size: 100px;
}

:root {
	--f1: 0.3125rem;
	--f2: 0.25rem;
	--f3: 0.20rem;
	--f4: 0.16rem;
	--f5: 0.128rem;
	--f6: 0.1024rem;
	--bgColor: #F3F3F3;
	--ptColor: #FF6400;
}

@media (max-width:768px) {
	:root {
		--f1: 0.24rem;
		--f2: 0.20rem;
		--f3: 0.18rem;
		--f4: 0.16rem;
		--f5: 0.14rem;
		--f6: 0.12rem;
	}
}

body {
	/* position: relative; */
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	color: #141414;
	font-size: var(--f5);
	line-height: 1;
}

/* モーダルウィンドウ */

/*infoエリアをはじめは非表示*/

#info {
	display: none;
}

.modaal-content-container {
	font-size: var(--f3);
	line-height: 1.8;
}

.modaal-content-container h2 {
	font-size: var(--f2);
	font-weight: bold;
	margin-bottom: 0.3rem;
	text-align: center;
}

.modaal-content-container h3 {
	display: inline-block;
	font-size: var(--f2);
	margin-bottom: 0.2rem;
	border-bottom: 1px double;
}

.modal_btn {
	text-align: center;
	margin-bottom: 0.6rem;
}


.modal_btn a {
	font-size: var(--f2);
	color: #fff;
	display: inline-block;
	background-color: var(--ptColor);
	padding: 0.1rem 0.4rem;
	border-bottom: 5px solid #ca5100;
	transition: 0.1s ease-in;
}

.modal_btn a:hover {
	margin-top: 3px;
	border-bottom: 2px solid #FF6400;
}

.modal_btn a:active {
	margin-top: 3px;
	border-bottom: 2px solid #FF6400;
}

.modaal-inner-wrapper {
	padding: 0;
}

/*モーダルの横幅を変更したい場合*/

.modaal-container {
	max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/

.modaal-close:after, .modaal-close:before {
	background: #ccc;
}

.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
	background: #666;
}

@media (min-width:769px) {
	/************************************************
	ヘッダー
*************************************************/
	.pc_view {
		display: block !important;
	}
	.sp_view {
		display: none !important;
	}
	header {
		padding: 73px 0 0 !important;
		position: relative;
	}
	.header {
		position: fixed;
		display: flex;
		align-items: center;
		top: 0;
		width: 100%;
		background: #FFF;
		height: 73px;
		z-index: 20;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
	}
	.header_inner {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.logo {
		text-align: center;
	}
	.logo img{
		height: 41px;
		width: 100%;
	}
	.logo a, .logo a:visited {
		color: #141414;
		display: inline-block;
	}
	.gnav {
		width: 250px;
		height: 100%;
		padding: 0.2rem 0.3rem;
		padding-bottom: 0;
		background-color: rgb(255, 255, 255, 0.8);
		position: fixed;
		top: 70px;
		right: 0;
		z-index: 10;
		transform: translate(250px);
		transition: all .5s;
		box-sizing: border-box;
	}
	.gnav.open {
		transform: translateZ(0);
	}
	.gnav li {
		font-size: var(--f3);
		color: #40220f;
		text-align: center;
	}
	.gnav hr {
		border-top: 1px solid rgba(20, 20, 20, 0.4);
	}
	.gnav li small {
		font-size: 0.7em;
	}
	.gnav li a {
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
		display: block;
		color: inherit;
	}
	/*ホバーエフェクト*/
	.gnav a:hover {
		-webkit-transform: scale(1.25);
		transform: scale(1.25);
	}
	.overlay {
		content: "";
		display: block;
		width: 0;
		height: 0;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 5;
		opacity: 0;
		transition: opacity .5s;
	}
	.overlay.open {
		width: 100%;
		height: 100%;
		opacity: 1;
		overflow: hidden;
	}
	.menu {
		width: auto;
		height: 30px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
	/* .menu p {
		display: inline-block;
		float: left;
		font-size: var(--f3);
		line-height: 30px;
		padding-right: 10px;
	} */
	.menu_btn {
		position: relative;
		width: 35px;
		height: 30px;
		float: right;
	}
	.menu-trigger, .menu-trigger span {
		/* display: inline-block; */
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width: 35px;
		height: 30px;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 5px;
		background-color: #000;
		/*   border-radius: 4px; */
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 13px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger.open span:nth-of-type(1) {
		-webkit-transform: translateY(15px) rotate(-45deg);
		transform: translateY(13px) rotate(-45deg);
	}
	.menu-trigger.open span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.open span:nth-of-type(3) {
		-webkit-transform: translateY(-14px) rotate(45deg);
		transform: translateY(-12px) rotate(45deg);
	}
	/************************************************
 HOME
************************************************/
	.top_content .sns_block {
		display: block;
	}
	.top_content ul.footer_sns {
		width: 205px;
		margin: 23px auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.top_content ul.footer_sns li {
		width: 100px;
		text-align: center;
		font-size: var(--f5);
	}
	.top_content ul.footer_sns li img {
		max-width: 31px;
		margin: 0 0 6px;
	}
	/************************************************
	フッター
*************************************************/
	.footer_btn, .footer {
		padding: 0 6vw;
	}
	.footer {
		background-color: black;
	}
	.footer_btn .container, .footer .container {
		max-width: 1300px;
		margin: 0 auto;
		padding: 0;
	}
	.footer_reception {
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
		padding: 0.8rem 0;
		gap: 15px;
	}
	.footer_reception .reception_btn {
		height: 200px;
		background-color: black;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		background-position: center;
		background-size: cover;
		border-radius: 0.30rem;
		/* margin: 0 0.3rem; */
	}
	.footer_reception .reception_btn.fc {
		background-image: url("../images/works/works_img03.jpg");
	}
	.footer_reception .reception_btn.rec {
		background-image: url("../images/recruit/omo_recruit_top_01.jpg");
	}
	.footer_reception .reception_btn.con {
		background-image: url("../images/company/company_top_pc_01.jpg");
	}
	.footer_reception .reception_btn.fc:hover, .footer_reception .reception_btn.rec:hover, .footer_reception .reception_btn.con:hover {
		opacity: 0.7;
	}
	.footer_reception .reception_btn p {
		font-size: var(--f3);
		background-color: var(--ptColor);
		color: #fff;
		padding: 0.3em 0.5em;
	}
	.footer .container {
		display: flex;
		justify-content: center;
		padding: 0.16rem 0;
	}
	.sns_list ul {
		display: flex;
	}
	.sns_list li {
		width: 0.45rem;
		height: 0.45rem;
		object-fit: cover;
		margin: 0 0.2rem;
	}
	.copyright {
		padding-bottom: 0.1rem;
		color: #ffffff;
		background: black;
		font-size: var(--f5);
		text-align: center;
	}
}

/************************************************
*************************************************
	SP
*************************************************
*************************************************/

@media (max-width:768px) {
	.pc_view {
		display: none !important;
	}
	.sp_view {
		display: block !important;
	}
	/************************************************
		ヘッダー
	*************************************************/
	header {
		padding: 73px 0 0;
	}
	.header {
		position: fixed;
		top: 0;
		width: 100%;
		background: #FFF;
		height: 50px;
		padding: 23px 0 0;
		z-index: 20;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
	}
	.header_inner {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	.logo {
		text-align: left;
	}
	.logo img{
		height: 28px;
	}
	.logo a, .logo a:visited {
		color: #141414;
		display: inline-block;
	}
	.gnav {
		width: 250px;
		height: 100%;
		padding: 0.2rem 0.3rem;
		padding-bottom: 0;
		background-color: rgb(255, 255, 255, 0.8);
		position: fixed;
		top: 70px;
		right: 0;
		z-index: 10;
		transform: translate(250px);
		transition: all .5s;
		box-sizing: border-box;
	}
	.gnav hr {
		border-top: 1px solid rgba(20, 20, 20, 0.4);
		margin: 0.5em 0;
	}
	.gnav.open {
		transform: translateZ(0);
	}
	.gnav li {
		font-size: var(--f3);
		color: #40220f;
		text-align: center;
	}
	.gnav li small {
		font-size: 0.7em;
	}
	.gnav li a {
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
		display: block;
		color: inherit;
	}
	/*ホバーエフェクト*/
	.gnav a:hover {
		/*1.25倍に拡大*/
		-webkit-transform: scale(1.25);
		transform: scale(1.25);
	}
	.overlay {
		content: "";
		display: block;
		width: 0;
		height: 0;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 5;
		opacity: 0;
		will-change: transition;
		transition: opacity .5s;
	}
	.overlay.open {
		width: 100%;
		height: 100%;
		opacity: 1;
		overflow: hidden;
	}
	.menu {
		width: 100px;
		height: 30px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
	.menu p {
		display: inline-block;
		float: left;
		font-size: var(--f3);
		line-height: 30px;
		padding-right: 10px;
	}
	.menu_btn {
		position: relative;
		width: 35px;
		height: 30px;
		float: right;
	}
	.menu-trigger, .menu-trigger span {
		/* display: inline-block; */
		will-change: transition;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		/* position: relative; */
		width: 35px;
		height: 30px;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 5px;
		background-color: #000;
		/*   border-radius: 4px; */
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 13px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger.open span:nth-of-type(1) {
		/* will-change: transform; */
		-webkit-transform: translateY(15px) rotate(-45deg);
		transform: translateY(13px) rotate(-45deg);
	}
	.menu-trigger.open span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.open span:nth-of-type(3) {
		/* will-change: transform; */
		-webkit-transform: translateY(-14px) rotate(45deg);
		transform: translateY(-12px) rotate(45deg);
	}
	/************************************************
 HOME
************************************************/
	.top_content .sns_block {
		display: block;
	}
	.top_content ul.footer_sns {
		width: 205px;
		margin: 23px auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.top_content ul.footer_sns li {
		width: 100px;
		text-align: center;
		font-size: var(--f5);
	}
	.top_content ul.footer_sns li img {
		max-width: 31px;
		margin: 0 0 6px;
	}
	/************************************************
		フッター
	*************************************************/
	.footer_btn .container, .footer .container {
		margin: 0 auto;
		padding: 0;
	}
	.footer {
		background-color: black;
	}
	/* .footer_reception {
		padding: 60px 0;
	}
	.footer_reception .reception_btn {
		text-align: center;
		margin-bottom: 30px;
	}
	.footer_reception .reception_btn p {
		font-size: var(--f4);
		margin-bottom: 0.75em;
	}
	.footer_reception .reception_btn a {
		font-size: var(--f3);
	}
	.reception_btn a {
		display: block;
		width: 100%;
		text-align: center;
		color: var(--ptColor);
		background-color: rgba(255, 255, 255, 1);
		padding: 10px 0;
		letter-spacing: 4px;
		box-shadow: 0px 0px 0px 1px var(--ptColor);
	} */
	.footer_reception {
		display: flex;
		padding: 0.6rem 0;
		flex-wrap: wrap;
	}
	.footer_reception .reception_btn {
		height: 200px;
		width: 100%;
		background-color: black;
		flex: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-position: center;
		background-size: cover;
		border-radius: 0.30rem;
		margin: 0;
	}
	.footer_reception .reception_btn:not(:last-of-type) {
		margin-bottom: 0.3rem;
	}
	.footer_reception .reception_btn.fc {
		background-image: url("../images/works/works_img03.jpg");
	}
	.footer_reception .reception_btn.rec {
		background-image: url("../images/recruit/omo_recruit_top_01.jpg");
	}
	.footer_reception .reception_btn.con {
		background-image: url("../images/company/company_top_pc_01.jpg");
	}
	.footer_reception .reception_btn.fc:hover, .footer_reception .reception_btn.rec:hover, .footer_reception .reception_btn.con:hover {
		opacity: 0.7;
	}
	.footer_reception .reception_btn p {
		font-size: var(--f3);
		background-color: var(--ptColor);
		color: #fff;
		padding: 0.3em 0.5em;
	}
	.footer .container {
		display: flex;
		justify-content: center;
		padding: 0.16rem 0;
	}
	.sns_list ul {
		display: flex;
	}
	.sns_list li {
		width: 0.45rem;
		height: 0.45rem;
		object-fit: cover;
		margin: 0 0.2rem;
	}
	.copyright {
		padding-bottom: 0.1rem;
		color: #ffffff;
		background: black;
		font-size: var(--f5);
		text-align: center;
	}
}