/* ======================================================================= COMMON */

body { width: 100%; }

/* pc mb switch */
.pc { display: inline-block; }
.mb { display: none; }
.clear { clear: both; }
@media screen and (max-width: 750px) {
	.pc { display: none; }
	.mb { display: inline-block; }
}

/* centering */
.center-ctn { width: 100%; clear: both; }
.center { width: 1120px; margin: 0 auto; overflow: hidden; }
@media screen and (max-width: 1120px) { .center { width: 96%; margin-left: 2%; margin-right: 2%; } }

/* link */
a,a img,label {
	transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out; /* opera */
	-moz-transition: all 0.3s ease-in-out; /* firefox */
	-webkit-transition: all 0.3s ease-in-out; /* chrome, safari */
		-ms-transition: all 0.3s ease-in-out; /* ie */
	text-decoration:none;
}
a { color: black; font-size: 1em; }
a:hover, a:active, a:hover img, a:active img {
		opacity:0.6;
		filter:alpha(opacity=70);
		-ms-filter: "alpha( opacity=70 )";
		}

/* etc */
p { line-height: 1.6em; font-weight: 600; }
dl { font-size: 0.9em; }
.center img { width: 100%; }
@media screen and (max-width: 480px) { p { font-size:13px; line-height: 1.2em; } }

#suppl .center,#case .center,#ability .center,#contact .center,#company .center { padding: 50px 0; }
#chosen .center,#area .center { padding: 50px 0 150px; }
@media screen and (max-width: 750px) {
	#suppl .center,#case .center,#ability .center,#contact .center,#company .center { padding: 30px 0; }
	#chosen .center,#area .center { padding: 30px 0 90px; }
}

/* ----------------------------------------------------------------------- Header */


/* header > logo / nav / tel */

/* header */
header {
	background-color: #386365;
	width: 95%;
	padding: 0 2.5%;
	height: 70px;
	position:fixed;
	clear: both;
	border-bottom: 10px solid #FFF000;
}
@media screen and (max-width: 1600px) { header { height: 100px; } }
@media screen and (max-width: 750px) { header { height: 50px; padding-top: 10px; border-bottom: 3px  solid #FFF000; } }
/* アンカーリンクのズレ解消 */
html { scroll-padding-top: 80px; }
@media screen and (max-width: 1600px) { html { scroll-padding-top: 100px; } }
@media screen and (max-width: 750px) { html { scroll-padding-top: 63px; } }

/* logo */
header h1 {
	display: block;
	float: left;
	width: 330px;
	margin: 20px 0 0 0;
	line-height: 0;
	}
header h1 img { width: 100%; }
@media screen and (max-width: 1000px) { header h1 { width: 280px; } }
@media screen and (max-width: 750px) { header h1 { margin: 8px 0 0 0; } }

/* nav */
nav {
	margin: 20px 3em 0 0;
	padding: 0;
	float: right;
	font-size: 18px;
	font-weight: 600;
	width: 36em;
	}
	@media screen and (max-width: 1700px) { nav { margin: 20px 2em 0 0; width: 32em; } }
	@media screen and (max-width: 1600px) { nav { float: none; clear: both; margin: 0 auto; padding-top: 10px; width: 36em; } }
	@media screen and (max-width: 750px) { nav { padding-top: 25px; } }

.menu ul { margin: 0; padding: 0; overflow: auto; border-radius:10px; }
.menu ul li { list-style: none; margin:0 0 0 3em; float: left; }
.menu ul li:first-child { margin-left: 0; }
.menu ul li a { display: block; text-decoration: none; text-align: center; transition: .5s; }
.menu ul li a:link,.menu ul li a:visited { color: white; }
.menu ul li a img { margin-top: -7px; }
	@media screen and (max-width: 1700px) { .menu ul li { margin:0 0 0 2em; } }
	@media screen and (max-width: 1600px) { .menu ul li { margin:0 0 0 3em; } }
	@media screen and (max-width: 750px) {
		nav { width: 100%; }
		.menu { display: none; overflow: hidden; }
		.menu ul { background-color:#386365; }
		.menu ul li { float:none; margin: 0; border-bottom: 1px solid #4E7674; }
		.menu ul li a { margin: 0; padding: 1em 2em; font-size: 14px; text-align: left; }
	}
.no-link { cursor: default; }
.nav_insta { float: right; margin: 0 50px 0 0; }

/*OPEN時*/
.menu.open { display: block; transition: .3s; }
/*トグルボタン*/
.nav-toggle {
  display: block;
  position: absolute;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 3;
  top: 10px;
  right: 5px;
}
.nav-toggle span {
  display: block;
  position: absolute;
  width: 30px;
  border-bottom: solid 4px white;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
.nav-toggle span:nth-child(1) { top: 5px; }
.nav-toggle span:nth-child(2) { top: 16px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.active span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.nav-toggle.active span:nth-child(2),
.nav-toggle.active span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (min-width: 751px) {
header::after{ display:none; }
nav{ display: block; }
.nav-toggle{ display: none; }
.menu{ display: block; }
}

/* tel */
#header_tel { width: 500px; float: right; margin: 20px 0 0 0; line-height: 0; }
#header_tel img { width: 100%; }
@media screen and (max-width: 1000px) { #header_tel { width: 400px; } }

/* ----------------------------------------------------------------------- Main */

#main_img { background: url(../img/weeds_illust.png) repeat-x center bottom #EDF5E2; background-size:1000px; padding: 100px 0 0 0; }
#main_img figure {  }
#main_img figure img { width: 100%; }
@media screen and (max-width: 1600px) { #main_img { padding: 130px 0 0 0; } }
@media screen and (max-width: 1120px) { #main_img { background-size:100vw; } }
@media screen and (max-width: 750px) { #main_img { padding: 63px 0 0 0; background-image: none; } #main_img .center { width: 100%; paddin: 0; margin: 0; } }

#suppl ul { text-align: center; width: 70%; margin: 0 auto; overflow: auto; }
#suppl li { display: inline-block; background-color: #386365; border-radius: 10px; color: white; text-align: center; font-size: 3vw; font-weight: bold; width: 24.25%; margin:0 1% 2% 0; }
#suppl li:nth-child(1),
#suppl li:nth-child(2),
#suppl li:nth-child(3),
#suppl li:nth-child(7) { letter-spacing: 1em; text-indent:1em; }
#suppl li:nth-child(4),
#suppl li:nth-child(5),
#suppl li:nth-child(6) { }
#suppl li:nth-child(4) { margin-right: 0; }
@media screen and (min-width: 1120px) { #suppl li { font-size: 32px; } }
@media screen and (max-width: 750px) { #suppl ul { width: 90%; } #suppl li { border-radius: 5px; font-size: 4vw; } }

#chosen { background: url(../img/weeds_illust.png) repeat-x center bottom #FFFBD3; background-size:1000px; clear: both; overflow: auto; }
#chosen h1 { width: 90%; text-align:center; }
#chosen figure { float:left; width:18%; }
#chosen #chosen_info { float:right; width: 67%; margin-left: 3%; margin-right: 10%; }
#chosen h2:nth-child(2) { font-size: 28px; color: #E7413C; }
#chosen h2:nth-child(2) span { font-size: 30px; }
#chosen p { font-size: 23px; line-height:1.3em; margin: 0.3em 0 }
#chosen h2:nth-child(4) { font-size: 40px; text-align:center; }
#chosen h2:nth-child(5) { display:inline-block; background-color: #FFE100; width: 100%; text-align: center; font-size: 23px; padding: 0.5em 0; }
@media screen and (max-width: 1120px) {
	#chosen { background-size:100vw; }
	#chosen h2:nth-child(2) { font-size: 2.3vw; }
	#chosen h2:nth-child(2) span { font-size: 2.6vw; }
	#chosen p { font-size: 2vw; }
	#chosen h2:nth-child(4) { font-size: 3.7vw; }
	#chosen h2:nth-child(5) { font-size: 2vw; }
}
@media screen and (max-width: 750px) {
	#chosen h1 { width: 100%; text-align:center; }
	#chosen #chosen_info { float: none; width: 90%; margin: 0 auto; }
	#chosen figure { overflow: hidden; width: 22%; margin-top: -10px; margin-left: 5%; }
	#chosen figure img { margin-top: -31%; }
	#chosen h2:nth-child(2) { font-size: 5vw; line-height:1.1em; text-align:center; width: 90%; margin-right: 10%; }
	#chosen h2:nth-child(2) span { font-size: 6vw; }
	#chosen p { font-size: 3vw; clear: both; text-align: center; }
	#chosen h2:nth-child(4) { font-size: 6vw; }
	#chosen h2:nth-child(5) { font-size: 3vw; }
}

#case h1 { width: 28%; text-align: center; margin: 0 auto; }
#case p { text-align: center; width: 100%; font-size: 3vw; line-height: 1.3em; }
#case dl dt { width: 20%; }
#case dl dd { overflow: auto; margin-bottom: 1em; }
#case dl dd figure img { width: 49%; }
#case dl dd figure:nth-child(1) img { float: left; }
#case dl dd figure:nth-child(2) img { float: right; }
#case dl dd figure.pc { display: block; }
@media screen and (max-width: 750px) {
	#case h1 { width: 35%; }
	#case dl dt { width: 28%; }
	#case dl dd figure.pc { display: none; }
}

#ability { background-color: #FFFBD3; }
#ability h1 { width: 45%; text-align: center; margin: 0 auto; }
#ability ul {
	background-image: url(../img/ability_illust.png), url(../img/ability_back01.jpg), url(../img/ability_back03.jpg), url(../img/ability_back02.jpg);
	background-repeat: no-repeat, no-repeat, no-repeat, repeat-y;
	background-position: top 25% right 10%, top center, bottom center, 0 100px;
	background-size: 15%, 100%, 100%, 100%;
	padding: 17% 10% 8% 13%;
}
#ability ul li { font-size: 25px; font-weight: bold; list-style: number; margin-bottom: 0.4em; }
@media screen and (max-width: 750px) {
	#ability h1 { width: 70%; }
	#ability ul { padding: 16vw 8vw 8vw 14vw; background-position: top 15% right 10%, top center, bottom center, 0 100px; }
	#ability ul li { font-size: 4vw;  margin-bottom: 0; }
}

#area { background: url(../img/weeds_illust.png) repeat-x center bottom; background-size:1000px; }
#area h1 { width: 31%; text-align: center; margin: 0 auto; }
#area p { text-align: center; font-size: 28px; }
#area figure { width: 70%; margin: 3em auto 0; }
@media screen and (max-width: 1120px) { #area { background-size:100vw; } }
@media screen and (max-width: 750px) {
	#area h1 { width: 45%; }
	#area p { font-size: 4vw; }
	#area figure { width: 70%; margin-top: 1em; }
}

#contact { background-color: #EDF5E2; }
#contact .center { width: 70%; max-width: 1120px; padding: auto 15%; }
#contact h1 { margin: 0 auto; }
#contact .c-tel { text-align: center; }
#contact .c-tel p { font-size: 26px; margin: 0.5em 0 0.5em; }
#contact p { clear:both; text-align:center; font-size: 16px; }
#contact figure { width:15%; float:left; }
#contact .c-tel { width: 85%; float: right; margin-bottom: 1em; }
#contact .c-tel img { width: 90%; text-align:right; display:inline-block; }
@media screen and (max-width: 1120px) {
	#contact .center { width: auto; }
	#contact h1 { text-align:center; }
	#contact h1 img { width: 90%; }
	#contact .c-tel p { font-size: 3vw; }
}
@media screen and (max-width: 750px) {
	#contact p { font-size: 3vw; display:block; margin: 0.5em 0; }
	#contact figure { margin: 0 0 0 5%; }
	#contact .c-tel { text-align:left; width: 69%; margin:3vw 6% 0 5%; }
	#contact .c-tel a.tel { font-size: 6vw; font-weight: bold; }
	#contact .c-tel a.tel img { width: 100%; }
}


/* ----------------------------------------------------------------------- FOOTER */

footer { background-color: #386365; color: white; padding: 1.5em 0; }
footer address { font-style: normal; text-align:center; margin-bottom: 1.5em; }
footer address h1 { color: #FFF000; font-size: 30px; }
footer p#copy {
	font-weight: 300;
	margin:0.5em 0;
	text-align: center;
}
footer p#copy.pc { display: block; }
@media screen and (max-width: 750px) {
	footer { margin-bottom: 80px; }
	footer p#copy { letter-spacing: 0; padding-top: 5px; }
	footer p#copy.pc { display: none; }
	footer p#copy.mb { display: block; }
}

#mb_tel { height: 80px; width: 100%; position:fixed; bottom: 0; background-color: #386365; }
#mb_tel a { display: block; background-image: linear-gradient(0deg, #FFE100 70%, #FFF99A); border-radius: 5px; margin: 12.5px; padding: 5px; line-height: 0; text-align: center; font-size: 25px; font-weight: bold; }
#mb_tel a img { height: 45px; vertical-align: -13px; margin-right: 0.5em; }