@charset "UTF-8";
/*
 * [ css ] /_css/top.css
 * Date: 02/01/2018
 * Author: (C)Minatoro Works
 *
 * 【Heartner】 top.css
 * Minatoro Works service introsite
 * top style
*/


/* ----------- *
 common
*/
body>header {	background-color: transparent;}
#nav {	display: none;}
#contents>section {	border-top: none;}
#contents>section:nth-child(odd)  {	background-color: #F7F7F7;}
#contents>section:nth-child(even) {	background-color: #fff;}
#container>section>div {	padding-top: 60px;}
#contents>section .lead {	text-align: left;}
#contents>section p {	line-height: 1.6;}

/* #headline */
#container>#headline	{	width: 100%;	height: 100vh;	position: relative;	text-align: left;}
#container>#headline>ul li {	width: 100%;	height: 100vh;	position: absolute;	left: 0 ;	top: 0;	background-position: center top;	background-size: cover;}
#container>#headline>ul li.bg01 {	background-image: url(/_img/top/heartner_headline01.jpg);}
#container>#headline>ul li.bg02 {	background-image: url(/_img/top/heartner_headline02.jpg);}
#container>#headline>ul li.bg03 {	background-image: url(/_img/top/heartner_headline03.jpg);	background-position: center center;}
#container>#headline>ul li.load {	display: none;}
#container>#headline .catch {	width: 40%;	min-height: 25%;	padding: 40px;	position: absolute;	bottom: 80px;	right: 80px;	background-color: rgba(255,255,255,0.8);	box-shadow: 3px 3px 6px #999;}
#container>#headline .catch .ttl {	font-size: 20px;	line-height: 1.6;}
#container>#headline .catch p {	line-height: 1.6;}
#container>#headline .catch p+p {	margin-top: 20px;}
#container>#headline .catch .logo img {	max-width: 100%;	height: 40px;}
#container>#headline .catch ul.service_anc {margin-top: 20px;}
#container>#headline .catch ul.service_anc li {	margin-top: 10px;	font-size: 0.9em;}
#container>#headline .arrow {	width: 98px;	height: 20px;	position: absolute;	bottom: 15px;	left: 50%;	transform: translateX(-50%);	cursor: pointer;}
#container>#headline .arrow::before,
#container>#headline .arrow::after {	display: block;	content: "";	width: 50px;	height: 3px;	position: absolute;background-color: #fff;	transform-origin: right bottom;}
#container>#headline .arrow::before {	transform: rotate(20deg);	bottom: 0;	left: 0;}
#container>#headline .arrow::after {	transform:rotate(-20deg); top: 0;	right: 0;}



/**
  #content
*/
#top-idx	{	}



/* ----------- *
  #topics

#topics {	padding-top: 0;	border-top: none;}
#topics .content {	padding: 10px 30px;	position: relative;}
#topics ul {	padding-right: 13em;}
#topics ul li {	padding: 10px 0;	font-size: 0.9em;}
#topics ul li:after { content: ""; display: block; height: 0;	clear: both;}
#topics ul li span {	display: inline-block;	margin-right: 15px;}
#topics ul li span.date {	color: #666;}
#topics ul li span.icon {	 display: inline-block;	width: 120px;	margin-top: -2px;	padding: 6px 0 4px;	line-height: 1.1;	text-align: center;	color: #fff;	font-size: 0.9em;}
#topics ul li span.icon.press {	background-color: #8659E1;}
#topics ul li span.icon.info {	background-color: #80BD1B;}
#topics ul li span.icon.new {	background-color: #E25952;}
#topics ul li span.icon.case {	background-color: #0792E4;}
#topics ul li a {	display:inline-block;	width:  calc( 100% - 250px );}
#topics .content a.all {	display: inline-block;	padding-left: 10px;	position: absolute;	top: 20px;	right: 0;	font-size: 0.9em;	color: #222;	border-left: 1px solid #666;}
*/



/* ----------- *
  #about
*/
#contents>#about {	height: 62vw;	max-height: 700px;	padding-top: 0; /*	background-color: #F7F7F7;*/}
#contents>#about>div {	height: 100%;	position: relative;}
#contents>#about>div::before {	display: block;	content: ""; width: 62%;	height: 38%;	background: url("/_img/top/about_bg.jpg") center center no-repeat;	background-size: cover;	position: absolute;	bottom: 10%;	right: 50px;}
#contents>#about>div>div {	width: 62%;	padding: 40px;	position: absolute;	top: 10%;	left: 50px;	background-color: rgba(255,255,255,0.8);}

#contents>#about header h1 {color: #00366C;	font-size: 40px;	font-weight: normal;	line-height: 1.1;}
#contents>#about header h1 sup {	top: -20px;}
#contents>#about .lead {	line-height: 1.8;	text-shadow: 1px 1px 6px #fff;}




/* ----------- *
  #service
*/
#contents>section#service {	width: 100%;/*	min-height: 62vw;	background-color: #fff;*/}
#contents>#service .lead .old  {	margin-top: 10px;	font-size: 0.9em;}

#service>div {}
#service .content {	padding: 0 0 80px;}
#service .content .s_detail {	width: 100%;	margin-top: 40px;	padding: 40px;	background-color: #f7f7f7;}
#service .content .s_detail:first-child {	margin-top: 0;}
#service .content .s_detail header h1 {	font-size: 32px;	font-weight: normal;/*	color: #222;*/}
#service .content .s_detail#ccr header h1 {	color: #7FBD1A;}
#service .content .s_detail .lead {	margin-top:  40px;	text-align: center;}
#service .content .s_detail .lead p {	font-size: 26px;}
#service .content .s_detail>div:not(.lead) {	margin-top: 30px;}
#service .content .s_detail dl dt {	margin-top: 25px;	font-weight: bold;	font-size: 1.125rem;	color: #7FBD1A;}
#service .content .s_detail dl dd {	margin: 5px 0 0 1em;}
#service .content .s_detail .buttons {	margin-top: 40px;}
#service .content .s_detail .buttons .button {	width: 30%;}




/* ----------- *
  #service_image
*/
#contents>section#service_image {}
#service_image>div .detail {	position: relative;	height: 330px;	margin-top: 40px;}
#service_image>div .detail:first-child {	margin-top: 0;}
#service_image>div .detail .image_block {	width: 55%;	height: 330px;	position: absolute;	top:0;	background-size: cover;}
#service_image>div .detail.img02,
#service_image>div .detail.img02  .image_block {	height: 400px;}
#service_image>div .detail:nth-child(odd) .image_block {	right: 0;}
#service_image>div .detail:nth-child(even) .image_block {	left: 0;}
#service_image>div .detail.img01 .image_block {	background-image: url(/_img/top/service_image01.jpg);	background-position: center top;}
#service_image>div .detail.img02 .image_block {	background-image: url(/_img/top/service_image02.jpg);	background-position: left top;}
#service_image>div .detail dl {	display: block;	width: 40%;	position: absolute;	top: 50%;	transform: translateY(-50%);}
#service_image>div .detail:nth-child(odd) dl {	left: 0;}
#service_image>div .detail:nth-child(even) dl {	right: 0;}
#service_image>div .detail dl dt {	margin-top: 30px;	font-size: 1.2em;	font-weight: bold; color: #00366C;}
#service_image>div .detail dl dt:first-child {	margin-top: 0;}
#service_image>div .detail dl dd {	margin-top: 5px;}



/* ----------- *
  #case

#logo_list {	width: 100%;/*	height: 100vh;* /	background-color: #F7F7F7;}
#logo_list header h1 {	line-height: 1;	text-align: center;	font-weight: normal;}
#logo_list .content {	padding: 40px 0 80px;}
#logo_list ul {	-js-display: flex;	display: flex;	flex-wrap: wrap;	justify-content: center;	align-content: space-between;}
/*#logo_list ul {	width: 1000px; 	margin: 0 auto;	text-align: center;}* /
#logo_list ul li {	margin: 15px 5px 0;	overflow: hidden;	border: 1px solid #ccc;	background-color: #fff;	text-align: center;}
#logo_list ul li img {	vertical-align: middle;}
#logo_list ul li.is-empty {	height: 0	!important;	margin-top: 0;	border:  1px solid #EFEFEF;}
*/


/* ----------- *
  #contact
*/
#contents>section#contact {	border-top: 5px solid #3585D6;}

@media (min-width: 1250px) {
	#contents>#about>div::before {	right: 0;}
	#contents>#about>div>div {	left: 0;}
}

@media (max-width: 1200px) {
	#container>#headline	{}
	/* #topics 
	#topics .content {	padding: 10px 0;}*/
	/* #about */
	#contents>#about {}
	/* #service */
	#service .content {}
	/* #case 
	#case ul {	width: auto;}
	#case ul li {	width: 18%;}
	#case ul li img { width: 100%;	max-width: 202px;}*/
}
@media (max-width: 980px) {
	body>header {background-color: rgba(255,255,255,0.9) !important;}
	/* #headline */
	#container>#headline .catch {	width: 60%;}
	/* #topics 
	#topics ul {	padding: 0;}
	#topics ul li a {	display: block;	width: 100%;	margin-top: 7px;}
	#topics .content a.all {	display: block;	position: static;	text-align: right;	border: none;}*/
	/* #about */
	#contents>#about {	height: auto;	padding-top: 60px;	padding-bottom: 60px;	background: url("/_img/top/about_bg.jpg") center center no-repeat;	background-size: cover;}
	#contents>#about>div::before {	display: none;}
	#contents>#about>div>div {	position: static;	width: 100%;	padding: 0;	background-color: transparent;}
	/* #service_image */
	#service_image>div .detail {	height: 300px;}
	#service_image>div .detail .image_block {	width: 70%;	height: 300px;}
	#service_image>div .detail dl {	width: 60%;	padding: 20px;	box-sizing: border-box;	transform: translateY(0);	top:  auto;	bottom: 40px;	background-color: rgba(0,54,108,0.8);	color: #fff;	font-size: 0.9em;}
	#service_image>div .detail dl dt {	color: #fff;}
	#service_image>div .detail.img02,
	#service_image>div .detail.img02  .image_block {	height: 350px;}
	/* #case */
	

}
@media (max-width: 780px) {
	/* #headline */
	#container>#headline .catch {	width: 80%;	padding: 30px;}
	#container>#headline .arrow {	display: none;}
	/* #about */
	#contents>#about header h1 {	text-shadow: 1px 1px 5px #fff;}
	/* #service */
	#contents>#service .content {	padding:  20px 30px 60px;}
	#service .content .s_detail {	padding: 20px 20px 30px;}
	#service .content .s_detail .buttons .button {	width: 50%;}
	/* #service_image */
	#service_image>div .detail .image_block {	width: 75%;}
	#service_image>div .detail dl {	width: 70%;	bottom: 30px;}
	/* #case 
	#case ul li {	width: 17%;}*/
}
@media (max-width: 680px) {
	/* #headline */
	#container>#headline {	height: auto;	position: static;}
	#container>#headline>ul {	height: 293px;	position: relative;}
	#container>#headline>ul li {	height:  100%;	position: absolute;}
	#container>#headline>ul li.bg01 {	background-image: url(/_img/top/heartner_headline01_s.jpg);	background-position: right top;}
	#container>#headline>ul li.bg02 {	background-image: url(/_img/top/heartner_headline02_s.jpg);}
	#container>#headline>ul li.bg03 {	background-image: url(/_img/top/heartner_headline03_s.jpg);	background-position: 30% center;}
	#container>#headline .catch {	width: 100%;	position: static;	padding: 30px;}
	#container>#headline .catch .logo {	display: none;}
	#container>#headline .catch .ttl {	margin-top: 0;}
}
@media (max-width: 640px) {
	/* #service */
	#service .content .lead p {	font-size: 18px;}
	#contents>#service .content {	padding:  10px 0 60px;}
	#service .content .s_detail header h1 {	font-size: 26px;}
	#service .content .s_detail dl dd {	margin: 5px 0 0;}
	#service .content .s_detail .buttons .button {	width: 80%;}
	/* #service_image */
	#service_image>div .detail.img02,
	#service_image>div .detail {	height: auto;}
	#service_image>div .detail .image_block {	width: 100%;	height: 200px;	position: static;}
	#service_image>div .detail.img02  .image_block {	height: 300px;}
	#service_image>div .detail dl {	width: 100%;	margin-top: 20px;	padding: 0;	position: static;	background-color: transparent;	color: #222;}
	#service_image>div .detail dl dt {	margin-top: 20px;	color: #00366C;}
	/* #case 
	#case ul li {	margin: 15px 3px 0;}*/
}
@media (max-width: 480px) {
	#container>#headline .catch {	padding: 15px;}
	/* #service */
	#service .content .s_detail {	padding: 20px 10px 30px;}
	/* #case 
	#case ul li {	width: 20%;}*/
}



/* [F] */