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

/*--Base------------------------------------------------------------*/
html, body { width: 100%; height: 100%; }
html { height: 100%; overflow-y: scroll; overflow-x: hidden; }

/*--Reset-----------------------------------------------------------*/
* { margin: 0; padding: 0; }
img { border: none; vertical-align: middle; }
ul,ol { list-style: none; }

/*--clearfix-----------------------------------------------------------*/
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*--Text------------------------------------------------------------*/
body {
  font-size: 88%;
  font-weight: normal;
  line-height: 1.5;
  font-family: -apple-system, blinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; 
  color: #000;
}
h1,h2,h3,h4,h5,h6 { font-size: 100%; }

/*--Link------------------------------------------------------------*/
a, a:link { color: #0096ff; text-decoration: none; }
a:visited { color: #0096ff; }
a:hover, a:active { text-decoration: none; }
a:focus { outline: none; }

/*--HTML5-----------------------------------------------------------*/
article,aside,details,footer,header,main,menu,nav,section,summary { display: block; }

/*--style----------------------------------------------------------*/
header, main, footer {
  width: 100%;
}

.alpha a:hover {
  opacity: 0.7;
  filter: alpha(opacity=0);
  -ms-filter: "alpha(opacity=70)";
}

/*-- .contents_inner ----------------------------------------------------------*/
.contents_inner {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

/*--#header----------------------------------------------------------*/
#header {
  border-top: 5px solid #c80050;
  background-color: #f2f2f2;
  background: url("../images/bg_header.png") repeat;
}

#header .contents_inner {
  padding: 10px 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header h1 { display: inline-flex; }

/* #gnav_list */
nav { display: inline-flex; }

#gnav_list {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

#gnav_list li {
  font-size: 16px;
  text-align: center;
  margin-left: 15px;
}

#gnav_list li a {
  display: block;
  color: #000;
  text-align: center;
  text-decoration: none;
  position: relative;
  vertical-align: middle;
}

#gnav_list li a:hover {
  text-decoration: underline;
}

#gnav_list li a::after {
  margin: 0 0 3px 5px;
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: solid 1px #e40073;
  border-right: solid 1px #e40073;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav_toggle { display: none; }

/*--Retina--*/
@media screen and (max-width: 1000px) {
  #header .contents_inner { width: 100%; padding: 5px 0; }
  #header { padding: 0 0 10px 20px; }
  #header h1 img { zoom: 0.8; margin-top: 10px; }
 	nav {
		display: none;
		position: fixed;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.9);
		z-index: 500;
    top: 0;
    left: 0;
	}
  #gnav_list {
    display: block;
    width: 100%;
		position: relative;
		top: 65px;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		box-shadow: none;
		background:  none;
		font-size: 0.7em;
    border-top: 1px solid #fff;
	}
  #gnav_list li { margin-left: 0; }
	#gnav_list li a:before,
  #gnav_list li a:after,
  #gnav_list li a span:before,
  #gnav_list li a span:after{ display: none; }
	#gnav_list li {
    max-width: 100%;
    width: 100%;
		display: block;
    border-bottom: 1px solid #fff;
	}
  #gnav_list li a,
  #gnav_list li a:visited {
    height: auto;
    background: #fff;
    padding: 20px 0;
    border: none;
    color: #fff;
    background-color: transparent;
    font-size: 32px;
    line-height: 1;
  }
  #gnav_list li a:hover { background-color: #e40073; }
  #gnav_list li a:hover:before,
  #gnav_list li a:active:before,
  #top #gnav_list li:first-of-type a:before,
  #company #gnav_list li:nth-of-type(2) a:before,
  #service #gnav_list li:nth-of-type(3) a:before,
  #results #gnav_list li:nth-of-type(4) a:before,
  #contact #gnav_list li:last-of-type a:before { display: none; }  
  
  #nav_toggle {
		display: block;
		width: 25px;
		height: 20px;
		padding: 10px 10px 12px;
		position: fixed;
		top: 18px;
		right: 13px;
		z-index: 1000;
    background-color: #e40073;
	}
  #nav_toggle div { position: relative; }
	#nav_toggle span{
		display: block;
		height: 3px;
		background: #fff;
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){ top: 0; }
	#nav_toggle span:nth-child(2){ top: 10px; }
	#nav_toggle span:nth-child(3){ top: 20px; }	
	.open #nav_toggle span:nth-child(1) {
			top: 10px;
		  -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
			background: #fff;
		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;
			background: #fff;
		}
		.open #nav_toggle span:nth-child(3) {
			top: 10px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
			background: #fff;
		}
}


/*--footer----------------------------------------------------------*/
#footer {
  width: 100%;
  font-size: 1.2em;
  text-align: center;
  background-color: #fff;
}

#footer .social_icon {
  margin: 50px 0;
}

#footer .social_icon li {
  margin: 0 50px;
  display: inline-flex;
  align-items: center;
}

#footer .social_icon li a {
  width: 50px;
  height: 50px;
  display: block;
  border: 3px solid #c80050;
  border-radius: 50%;
}

#footer .social_icon li i {
  margin-top: 10px;
  color: #c80050;
}

.footer_inner {
  padding: 40px 0;
  background-color: #1e1e1e;
  background: url("../images/bg_footer.png") repeat;
}

#footer address {
  margin-top: 20px;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

/*--Retina--*/
@media screen and (max-width: 1000px) {
  #footer h2 img { zoom: 0.8; }
  #footer .social_icon { margin: 20px 0; }
  #footer .social_icon li { margin: 0 20px; }
  .footer_inner { padding: 20px 0; }
  #footer address { margin-top: 15px; font-size: 14px; }
}


/*--main ----------------------------------------------------------*/
.gray_bg {
  background-color: #ebebeb;
  background: url("../images/bg_gray.png") repeat;
}

#contents .contents_inner {
  padding: 80px 0;
}

.sec_ttl {
  text-align: center;
  color: #c80050;
  font-size: 48px;
  font-weight: 800;
}

.sec_ttl span {
  padding: 0 20px;
  border-bottom: 1px solid #3c3c3c;
}

main p {
  font-size: 16px;
  line-height: 1.6;
}

/*--Retina--*/
@media screen and (max-width: 1000px) {
  #contents .contents_inner { padding: 40px 0; }
  .sec_ttl { font-size: 30px; }
  .sec_ttl span { padding: 0 10px; }
}


/*--.list_img ----------------------------------------------------------*/
.list_img {
  margin: 40px 0 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.list_img li {
  max-width: 240px;
  width: 30%;
  margin: 0 1.5% 30px;
}

.list_img li p {
  margin-top: 10px;
  font-size: 24px;
}

.list_img li img {
  width: 100%;
}

/*--Retina--*/
@media screen and (max-width: 1000px) {
  .list_img { margin: 20px 0 10px; }
  .list_img li { width: 30%; margin: 0 1.5% 20px; }
  .list_img li p { font-size: 20px; }
}

/*--.btn_red ----------------------------------------------------------*/
.btn_red {
  text-align: center;
  box-sizing: border-box;
}

.btn_red span {
  width: 470px;
  max-width: 80%;
  margin: 0 auto;
  padding: 4px;
  display: block;
  background-color: #c80050;
  border-radius: 42px;
}

.btn_red a {
  padding: 18px 0;
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  box-sizing: border-box;
  border-radius: 40px;
  border: 1px solid #fff;
  background-color: #c80050;
  background: url("../images/bg_btn.png") repeat;
  position: relative;
}

.btn_red a:before {
  top: 35px;
  right: 20px;
  width: 20px;
  height: 3px;
  background: #fff;
  position: absolute;
  content: " ";
}

.btn_red a:after {
  top: 29px;
  right: 20px;
  width: 13px;
  height: 13px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  content: " ";
}

/*--Retina--*/
@media screen and (max-width: 1000px) {
  .btn_red a { padding: 10px 0; font-size: 20px; }
  .btn_red a:before { top: 25px; right: 15px; width: 15px; height: 3px; }
  .btn_red a:after { top: 20px; right: 15px; width: 10px; height: 10px; }
}



/*--subpage ----------------------------------------------------------*/

/*--#subpage_ttl ----------------------------------------------------------*/
#subpage_ttl {
  padding: 60px 0;
  background: no-repeat center top;
  background-size: cover;
  text-align: center;
}

#subpage_ttl h2 {
  padding: 0 20px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 48px;
  font-weight: normal;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #c80050;
}

/*--Retina--*/
@media screen and (max-width: 1000px) {
  #subpage_ttl { padding: 40px 0; }
  #subpage_ttl h2 { font-size: 38px; padding: 0; }
}


/*--#breadcrumb ----------------------------------------------------------*/
#breadcrumbs {
  padding: 5px 0;
  background-color: #3c3c3c;
}

#breadcrumbs ul {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  display: table;
  font-size: 12px;
  color: #fff;
}

#breadcrumbs ul li {
  margin: 0 10px 0 0;
  font-size: 12px;
  display: inline-block;
}

#breadcrumbs ul li a {
  color: #fff;
  text-decoration: underline;
}

#breadcrumbs ul li:first-child:before { display: none; }

#breadcrumbs ul li:before {
  padding: 0 10px 0 0;
  content: "\f105";
  font-family: FontAwesome;
  font-size: 14px;
}


/*--.sec_ttl02 ----------------------------------------------------------*/
.sec_ttl02 {
  text-align: center;
  font-size: 40px;
  font-weight: normal;
}

@media screen and (max-width: 1000px) {
  .sec_ttl02 { font-size: 36px; }
}


/*--style----------------------------------------------------------*/
.sp { display: none!important; }

/*--Retina--*/
@media screen and (max-width: 1000px) {
  .pc { display: none!important; }
  .sp { display: block!important; }
}
