@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 font settings
----------------------------------------------------------------*/
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }

/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	font-size			: 1.3rem;
	line-height			: 1.5;
	color				: #252525;
	font-family			:  "Yu Gothic", YuGothic,-apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro', Verdana, Meiryo, "M+ 1p", sans-serif;
}
@media (min-width: 992px) {
body{ font-size: 1.4rem; }
}

/* block element
-----------------------------------------------------*/
p:empty{ display:none; }

/* inline element
-----------------------------------------------------*/

/* embed contents
----------------------------------*/
img {
	border				: 0;
	-ms-interpolation-mode	: bicubic;
	max-width			: 100%;
	height				: auto;
}

/* link
----------------------------------*/
a{
	transition			: all 0.3s ease 0s;
	text-decoration		: underline;
	color				: #252525;
}
a:hover{ text-decoration: none; }


/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
/* br
-----------------------------------------------------*/
@media screen and (min-width: 992px) { .br_sp{ display: none; } }

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 991px) { [data-show=hide_sp]{ display: none; } }
@media screen and (min-width: 992px) { [data-show=hide_pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 991px) { [data-show=show_sp]{ display: block; } }
@media screen and (min-width: 992px) { [data-show=show_pc]{ display: block; } }

/* fixed
-----------------------------------------------------*/
.fixed{
	position			: fixed!important;
	top					: 0px;
	z-index				: 10;
}

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
	overflow			: hidden;
}

#wrap{
	width				: 100%;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	overflow			: hidden;
	clear				: both;
}

#header{
	padding				: 1.2rem 0;
	box-shadow			: 0 0.5rem 1rem rgba(0,0,0,0.1);
	background			: rgba(255,255,255,0.8);
}
@media (min-width: 992px) {
#header{ padding: 2rem 0; }
}

#mainview{ position: relative; }
#contents{ position: relative; }

#footer{
	position			: relative;
	background			: linear-gradient(50deg, #006aa6, #00a199, #2ab880);
	color				: #FFF;
}
/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	overflow			: hidden;
	clear				: both;
}
@media (min-width: 1200px) {
.container { max-width: 1054px; }
}

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header #navigation{ padding: 0; }

@media (max-width: 991px) {
#header .container{ padding: 0; }
}

/* logo
-----------------------------------------------------*/
#header .logo{
	margin				: 0;
	line-height			: 1px;
}
@media (max-width: 991px) {
#header .logo{ padding: 0 0 0 1.5rem; }
#header .logo img{ width: 22rem; }
}

/* navbar-nav
-----------------------------------------------------*/
#header .navbar-nav{
	font-family			: 'Oswald',sans-serif;
	font-size			: 2.5rem;
}

#header .navbar-nav a{
	text-decoration		: none;
	color				: #333;
}
#header .navbar-nav .link-off{ color: #999; }

@media (max-width: 991px) {
#header .navbar-nav{
	margin				: 1.5rem 0 0 0;
	text-align			: center;
}
#header .navbar-nav li{ border-top: 1px solid #dcdcdc; }
}
@media (min-width: 992px) {
#header .navbar-collapse	{ justify-content: flex-end; }
#header .navbar-nav			{ font-size: 2.4rem; }
#header .navbar-nav li		{ margin: 0 -2.5rem 0 0; }
#header .navbar-nav li:last-child{ margin: 0; }
#header .navbar-nav a{
	transition			: none;
	padding				: 1rem 2.5rem;
	color				: #333;
}
#header .navbar-nav a:hover{ color: #fff; }
#header .navbar-nav .active{ color: #00a29a; }
}

/* current
-----------------------------------------------------*/
@media (min-width: 992px) {
#header .navbar-nav .about:hover	{ background: url(../images/about_current.png) center center /contain no-repeat; }
#header .navbar-nav .service:hover	{ background: url(../images/service_current.png) center center /contain no-repeat; }
#header .navbar-nav .company:hover	{ background: url(../images/company_current.png) center center /contain no-repeat; }
#header .navbar-nav .partnar:hover	{ background: url(../images/partnar_current.png) center center /contain no-repeat; }
#header .navbar-nav .recruit:hover	{ background: url(../images/recruit_current.png) center center /contain no-repeat; }
#header .navbar-nav .contact:hover	{ background: url(../images/contact_current.png) center center /contain no-repeat; }
#header .navbar-nav .blog:hover		{ background: url(../images/blog_current.png) center center /contain no-repeat; }
}

/* toggler
-----------------------------------------------------*/
#header .navbar-toggler{
	position			: relative;
	top					: -10px;
	right				: 0px;
	z-index				: 100;
	cursor				: pointer;
	width				: 78px;
	height				: 4rem;
	border				: none;
	outline				: none;
	padding				: 0 2rem 0 0;
	text-align			: left;
	line-height			: 4.5rem;
	font-size			: 1.3rem;
	font-family			: 'Oswald',sans-serif;
	color				: #434343;
}

#header .navi-opener .opener:after{
	position			: absolute;
	right				: 13px;
	top					: 18px;
	content				: "Menu";
}
#header .navi-opener .bar::before,
#header .navi-opener .bar::after,
#header .navi-opener .bar{
	transition			: all 0.2s ease 0s;
	display				: block;
	position			: absolute;
	top					: 50%;
	width				: 30px;
	height				: 4px;
	background			: #434343;
}

#header .navi-opener .bar{
	right				: 1rem;
	margin				: -1px 0 0 -7px;
}
#header .navi-opener .bar::before,
#header .navi-opener .bar::after{
	content				: " ";
	right				: 0;
}
#header .navi-opener .bar::before	{ margin-top: -10px; }
#header .navi-opener .bar::after	{ margin-top: 6px; }

/* open */
#header .navbar-toggler[aria-expanded="true"] .opener:after{ opacity: 0; }
#header .navbar-toggler[aria-expanded="true"] .bar {
	top					: 55%;
	background			: transparent;
}
#header .navbar-toggler[aria-expanded="true"] .bar::before,
#header .navbar-toggler[aria-expanded="true"] .bar::after	{ margin-top: 0; }
#header .navbar-toggler[aria-expanded="true"] .bar::before	{ transform: rotate(-45deg); }
#header .navbar-toggler[aria-expanded="true"] .bar::after	{ transform: rotate(-135deg); }

#header .navbar-toggler[aria-expanded="false"] .opener:after{ opacity: 1; }

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer .container{ position: relative; }
#footer a{ color: #FFF; }

/* address
-----------------------------------------------------*/
#footer address{ font-size: 1.4rem; }
#footer address p{ margin: 0; }
#footer address .logo{ margin: 0 0 2rem 0; }
#footer address .address{ line-height: 1.5; }

@media (max-width: 991px) {
#footer address{
	margin				: 3rem auto 2.5rem auto;
	width				: 90%;
}
}
@media (min-width: 992px) {
#footer address				{ margin: 7rem 0 5.5rem 0; }
#footer address .logo		{ margin: 0 0 3.5rem 0; }
#footer address .address	{ margin: 0; }
}

/* cloneNavi
-----------------------------------------------------*/
#footer .cloneNavi{
	position			: absolute;
	top					: 8rem;
	right				: 0;
	font-family			: 'Oswald',sans-serif;
	font-size			: 2.5rem;
}
#footer .cloneNavi ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;	justify-content: flex-end;
	flex-direction		: row;
	flex-wrap			: wrap;
}
#footer .cloneNavi li{
	flex				: 1;
	margin				: 0 -2.5rem 0 0;
}
#footer .cloneNavi li a{
	display				: block;
	text-decoration		: none;
	padding				: 1rem 2.5rem;
}

/* copy
-----------------------------------------------------*/
#footer .copy{
	border-top			: 1px solid rgba(255,255,255,0.3);
	text-align			: center;
}
#footer .copy small{ font-size: 1rem; }

@media (max-width: 991px) {
#footer .copy{ margin: 0 1.5rem 0.5rem 1.5rem; }
}
@media (min-width: 992px) {
#footer .copy{ padding: 2rem 0 1rem 0; }
#footer .copy small{ font-size: 1.6rem; }
}