@charset "utf-8";
body#home #header {height: 350px;position: relative;background: url("../images/shared/bg_top.jpg") no-repeat bottom center;background-size: cover;}
body#home #header .toplogo {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;padding-top: 50px;}
body#home #header .toplogo img {width: 100%;max-width: 1000px;height: auto;}
.float_btn_shop {position: absolute;bottom: 0;left: 0;z-index: 50;}
.float_btn_shop img {display: block;width: 150px;height: auto;border: solid #fff;border-width: 2px 2px 0 0;box-shadow: 1px 1px 5px 0px rgba(0,0,0,.4);}
.float_btn_shop a {display: block;}
.top_president {background: #444;padding: 30px 20px;}
.top_president .inner {background: url("../images/home/message_bg.png") no-repeat center 0px;background-size: 140px;color: #fff;text-align: center;}
.top_president .ttl {font-size: 20px;font-size: 2rem;line-height: 1;margin: 0 0 20px 0;}
.top_president p {font-size: 14px;font-size: 1.4rem;line-height: 1.7;margin-bottom: 20px;}
.president_ph_sp {text-align: center;margin-bottom: 20px;}
.president_ph_sp img {width: 90%;height: auto;}
.top_president .btn_message {line-height: 1;text-align: center;}
.top_president .btn_message a {border: 1px solid #fff;color: #fff;padding: 10px 20px;display: inline-block;}
.top_service_area {background: #f2f2f2;padding: 60px 0 0 0;}
.top_service_area .ttl {padding: 0;margin: 0 0 40px 0;font-size: 30px;font-weight: bold;text-shadow: 2px 2px 0px #ddd;text-align: center;line-height: 1.3;position: relative;}
.top_service_area .ttl::after {content: "";position: absolute;bottom: -20px;left: 0;right: 0;width: 40px;height: 5px;background: #e30012;margin: auto;}
.top_service_list {list-style: none;margin: 0;padding: 0;position: relative;display: table;width: 100%;}
.top_service_list li {position: relative;overflow: hidden;height: 230px;text-align: center;cursor: pointer;background: #000;background: no-repeat center center;color: #fff;text-transform: uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;background-size: cover;}
.top_service_list li.m01 {background-image: url("../images/shared/gnav_img_service01.jpg");}
.top_service_list li.m02 {background-image: url("../images/shared/gnav_img_service02.jpg");}
.top_service_list li.m03 {background-image: url("../images/shared/gnav_img_service03.jpg");}
.top_service_list li.m04 {background-image: url("../images/shared/gnav_img_service04.jpg");}
.top_service_list li.m05 {background-image: url("../images/shared/gnav_img_service05.jpg");}
.top_service_list li.m06 {background-image: url("../images/shared/gnav_img_company02.png");}
.top_service_list li .caption {background: rgba(0,0,0,.5);transition: .35s;}
.top_service_list li .caption, .top_service_list li a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.top_service_list li a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;display: block;}
.top_service_list li .caption .inner {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;max-width: 100%;height: 110px;}
.top_service_list li .caption::before, .top_service_list li .caption::after {position: absolute;top: 10px;right: 10px;bottom: 10px;left: 10px;content: "";opacity: 1;-webkit-transition: opacity .35s,-webkit-transform .35s;transition: opacity .35s,transform .35s;}
.top_service_list li .caption::before {border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: scale(1);transform: scale(1);}
.top_service_list li .caption::after {border-right: 1px solid #fff;border-left: 1px solid #fff;-webkit-transform: scale(1);transform: scale(1);}
.top_service_list li h3 {font-weight: bold;margin: 0;padding: 0;-webkit-transition: -webkit-transform .35s;transition: transform .35s;}
.top_service_list li h3 span {font-weight: 800;}
.top_service_list li p {margin: 0;padding: 10px 0 0 0;font-size: 12px;font-size: 1.2rem;-webkit-transition: opacity .35s,-webkit-transform .35s;transition: opacity .35s,transform .35s;}
.top_service_list li .more {line-height: 1;display: inline-block;background: #e30012;color: #fff;text-align: center;padding: 10px;font-size: 11px;margin-top: 10px;opacity: 1;transition: .35s;}
@media screen and (min-width: 681px) {body#home #google_translate_element {background: transparent;}
	body#home #header {height: 100%;height: 100vh;}
	body#home #header .toplogo {padding-top: 0;width: 900px;height: 315px;}
	body#home #header .toplogo img {width: 900px;}
	.float_btn_shop {}
	.float_btn_shop img {display: block;width: 300px;border-width: 0;transition: .3s;}
	.float_btn_shop a {}
	.float_btn_shop a:hover img {width: 310px;border-width: 5px;}
	.top_president {padding: 70px 0;background: #444 url("../images/home/president_pc.jpg") no-repeat right top;}
	.top_president .inner {width: 1000px;margin: 0 auto;padding-right: 500px;background: url("../images/home/message_bg.png") no-repeat 160px 20px;background-size: 180px;}
	.top_president .ttl {font-size: 40px;font-size: 4rem;margin-bottom: 30px;}
	.top_president p {font-size: 18px;font-size: 1.8rem;line-height: 1.8;margin-bottom: 30px;}
	.top_president .btn_message {}
	.top_president .btn_message a {font-size: 18px;font-size: 1.8rem;padding: 20px 25px;transition: .3s;}
	.top_president .btn_message a:hover {background: #fff;color: #333;}
	.top_service_area {padding: 90px 0 0 0;}
	.top_service_area .ttl {font-size: 45px;font-size: 4.5rem;margin: 0 0 80px 0;padding: 0 0 5px 0;color: #333;background: none;letter-spacing: .05em;}
	.top_service_list {}
	.top_service_list li {width: 50%;float: left;height: 380px;}
	.top_service_list li .caption .inner {}
	.top_service_list li .caption {background: rgba(0,0,0,.3);transition: .35s;}
	.top_service_list li:hover .caption {background: rgba(0,0,0,.8);}
	.top_service_list li .caption::before, .top_service_list li .caption::after {position: absolute;top: 20px;right: 20px;bottom: 20px;left: 20px;content: "";opacity: 0;-webkit-transition: opacity .35s,-webkit-transform .35s;transition: opacity .35s,transform .35s;}
	.top_service_list li .caption::before {border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: scale(0,1);transform: scale(0,1);}
	.top_service_list li .caption::after {border-right: 1px solid #fff;border-left: 1px solid #fff;-webkit-transform: scale(1,0);transform: scale(1,0);}
	.top_service_list li:hover .caption::before, .top_service_list li:hover .caption::after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
	.top_service_list li .more {opacity: 0;margin-top: 40px;font-size: 15px;font-size: 1.5rem;}
	.top_service_list li:hover .more {opacity: 1;margin-top: 20px;}
	.top_service_list li h3 {font-size: 25px;font-size: 2.5rem;}
	.top_service_list li p {font-size: 14px;font-size: 1.4rem;}}