@charset "utf-8";
/* CSS Document */

.header{
	background: #ededec;
}
/*↓ハンバーガーメニュー↓*/
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}
.wrapper{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.logo{
	margin: 30px 0;
}
.headerNav a{
		text-decoration: none;
		color: #0d0804;/*文字色*/
}
.headerNav  a:hover{
	background: #96b021;
	color: #fff;
	}
main{
	margin: auto;
	text-align: center;
}
.footer{
	background: #ededec;
	text-align: center;
	height: 200px;
	padding: 30px;
}
.footerNav a{
	text-decoration: none;
	color: #0d0804;/*文字色*/
}
.footerNav a:hover{
	background: #96b021;
	color: #fff;
}
.footerCopy{
	margin-top: 50px;
}
/*:---------------------↑全ページ共通部分↑----------------------*/
.textBox{
	width: 400px;
	height: 200px;
	margin: 40px auto;
	line-height: 2em;
	font-family: 'Cardo', serif;
	font-family: 'Klee One', cursive;
}
	h1{
	width: 70%;
	height: 90px;
	margin: 20px auto;
	border: 2px solid #775023;
	line-height: 90px;
	font-size: 2em;
	color: #775023;
	font-family: 'Zen Kurenaido', sans-serif;
}
h2{
	color: #775023;
	width: 200px;
	height: 50px;
	margin: auto;
	border-bottom: solid 2px #775023;
	font-size: 2em;
	font-family: 'Zen Kurenaido', sans-serif;
}
h3{
	color: #96b021;
	margin: 20px 0;
}
.underlineText{
	text-decoration: underline;
}
.conceptPoint{
	margin-bottom: 80px;
}
.remoteWork p,.meeting p{
	font-family: 'Cardo', serif;
	font-size: 1.5em;
	color: #775023;
	}
	.remoteWorkText{
	background: #96b021;
	color: #fff;
	margin: auto;
	padding: 20px;
	border-radius: 40px;
}
.meetingText{
	background: #96b021;
	color: #fff;
	margin: auto;
	padding: 20px;
	border-radius: 40px;
}

@media(max-width:768px){/*ーーーーーーーーーーーーーーーースマホ版*/
		.headerNav a{
		width: 210px;
		padding: 0px 20px;
		line-height: 1.5em;
	}
	.nav_item{
		text-align: center;
		margin: 40px;
	}
	.nav_content{
		padding-top: 50px;
	}
	/*↓ハンバーガーメニュー↓*/
	/* ↓ハンバーガーアイコンの設置スペース ↓*/
	.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #96b021;
  transition: 0.5s;
  position: absolute;
}
	/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #ededec;
  transition: .5s;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}
/*↑ハンバーガーメニュー↑*/
	.footerNav{
		display: inline-block;
		text-align: left;
	}
	.footerNav a{
		padding-left: 20px;
		padding-right: 40px;
		line-height: 1.5em;
	}
	
/*:---------------------↑全ページ共通部分↑----------------------*/
.remoteWorkText{
	margin-top: 10px;
	width: 200px;
}
	.remoteWork{
		margin: 20px 20px 50px 20px;
	}
.meetingText{
	margin-top: 10px;
	width: 200px;
}
}

@media(min-width:769px){/*ーーーーーーーーーーーーーーーーーーーPC版*/
	.headerNav{
		display: flex;
	}
	.headerNav a{
		padding: 10px 20px;
		margin: 0 10px;
	}
	main{
	width: 960px;
	}
	.footerNav{
		width: 960px;
		display: flex;
		justify-content: space-around;
		margin: 0 auto;
		padding: 20px;
	}
	.footerNav a{
		padding: 10px 20px;
		margin: 0 10px;
	}
	
/*:---------------------↑全ページ共通部分↑----------------------*/
	.conceptPoint{
	margin: 0 auto;
	width: 500px;
	margin-bottom: 80px;
}
	.remoteWork{
	text-align: left;
	display: flex;
	justify-content: center;
	padding: 10px;
}
.remoteWorkText{
	border-radius: 40px;
}
	.remoteWorkImg,.meetingImg{
		text-align: center;
	}
	.meeting{
	text-align: left;
	display: flex;
	justify-content: center;
	padding: 10px;
}
	.meetingText{
	border-radius: 40px;
}
	.remoteWorkText ul,.meetingText ul{
		text-align: center;
		padding: 20px 0;
	}
	.remoteWorkText li,.meetingText li{
		width: 200px;
	}
}