@charset "utf-8";

/*----------------------------------------------------------------
 TopPage only
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 area
-----------------------------------------------------*/
@media (max-width: 991px) {
#mainview{
	background			: url(../images/mainview_image-sp.jpg) center top /cover no-repeat;
	height				: 100vh;
}
}
@media (min-width: 992px) {
#mainview{
	background			: url(../images/mainview_image-pc.jpg) left top /cover no-repeat;
	height				: 80rem;
}
}
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 mainview
-----------------------------------------------------*/
#mainview .container{ position: relative; }

@media (min-width: 992px) {
#mainview .container{
	margin-top			: 12rem;
	min-height			: 68rem;
}
}
@media (max-width: 991px) {
#mainview .main-copy{
	margin				: 0 auto;
	padding				: 15rem 0 0 0;
	max-width			: 80vw;
	text-align			: center;
}
}
@media (min-width: 992px) {
#mainview .main-copy{
	position			: absolute;
	right				: 0;
	top					: 50%;
	transform			: translateY(-50%);
}
}
#mainview .scroll-down{
	margin				: 3rem 0 0 0;
	text-align			: center;
	font-size			: 2.5rem;
	font-family			: 'Oswald',sans-serif;
	line-height			: 1.2;
	text-shadow			: 0 0 0.8rem rgba(0,0,0,0.7);
	color				: #FFF;
}
#mainview .scroll-down a{
	text-decoration		: none;
	color				: #FFF;
}
#mainview .scroll-down span{ display: block; }


/*-----------------------------------------------------
 contents
-----------------------------------------------------*/

/* title
-----------------------------------------------------*/

#contents #about .title		{ background-image: url(../images/about_title.jpg); }
#contents #service .title	{ background-image: url(../images/service_title.jpg); }
#contents #company .title	{ background-image: url(../images/company_title.jpg); }
#contents #partnar .title	{ background-image: url(../images/partnar_title.jpg); }
#contents #recruit .title	{ background-image: url(../images/recruit_title.png); }
#contents #contact .title	{ background-image: url(../images/contact_title.jpg); }
#contents #blog .title		{ background-image: url(../images/blog_title.jpg); }

@media (min-width: 992px) {
#contents .title{ background-size: auto; }
}

/*----------------------------------------------------------------
 about
----------------------------------------------------------------*/
#contents #about{ padding-bottom: 0; }

/*----------------------------------------------------
 intro
----------------------------------------------------*/
#contents #about .intro{
	padding				: 12.5rem 0 3rem 0;
	background-image	: url(../images/about_intro_bg-sp.jpg);
	background-repeat	: no-repeat;
	background-position	: center top;
}
@media (max-width: 991px) {
#contents #about .intro{ background-size: 100%; }
}
@media (min-width: 992px) {
#contents #about .intro{
	padding				: 4.5rem 0;
	background-image	: url(../images/about_intro_bg-pc.jpg);
	background-position	: left center;
	background-size		: auto;
}
}

/* container
----------------------------------------------------*/
@media (min-width: 992px) { #contents #about .intro .container { max-width: 900px; } }
@media (min-width: 1200px) { #contents #about .intro .container { max-width: 1024px; } }

/* s-block
----------------------------------------------------*/
#contents #about .intro .s-block{ background-image: url(../../common/images/suisai_green01.jpg); }
#contents #about .intro .s-block h3{
	margin-bottom		: 1rem;
	text-align			: center;
	font-size			: 2rem;
}
@media (min-width: 992px) {
#contents #about .intro .s-block{
	float				: right;
	width				: 53.2%;
}
#contents #about .intro .s-block h3{
	margin-bottom		: 2rem;
	text-align			: left;
	font-size			: 3.5rem;
}
}

/*----------------------------------------------------
 message
----------------------------------------------------*/
#contents #about .message{
	overflow			: visible;
	position			: relative;
	margin				: 8rem 0 0 0;
	padding				: 8rem 0 3rem 0;
	background			: #f3fced;
}
#contents #about .message .container{ overflow: visible; }
@media (min-width: 992px) {
#contents #about .message{
	margin				: 20rem 0 0 0;
	padding				: 13rem 0 4rem 0;
}
#contents #about .message .container { max-width: 900px; }
}

/* s-block
----------------------------------------------------*/
#contents #about .message .s-block{
	background-image	: url(../../common/images/suisai_green02.jpg);
	color				: #FFF;
	font-weight			: bold;
	font-size			: 1.35rem;
}
@media (min-width: 992px) {
#contents #about .message .s-block {
	width				: 700px;
	font-size			: 2.4rem;
}
}

/* mind
----------------------------------------------------*/
#contents #about .message .mind{
	position			: absolute;
	top					: -6rem;
	left				: 50%;
	transform			: translateX(-50%);
	width				: 100%;
}

@media (min-width: 992px) {
#contents #about .message .mind{ top: -12rem; }
#contents #about .message .mind .container { max-width: 700px; }
}

/* text
----------------------------------------------------*/
#contents #about .message .text{
	text-align			: center;
	font-size			: 1.4rem;
}
@media (min-width: 992px) { #contents #about .message .text{ font-size: 2rem; } }

/*----------------------------------------------------------------
 service
----------------------------------------------------------------*/
#contents #service{ padding-bottom: 0; }

@media (min-width: 992px) { #contents #service .container { max-width: 900px; } }
@media (min-width: 1200px) { #contents #service .container { max-width: 1024px; } }

/* wide-block
----------------------------------------------------*/
#contents #service .wide-block.service01{ background-image: url(../images/service01_bg-sp.jpg); }
#contents #service .wide-block.service02{ background-image: url(../images/service02_bg-sp.jpg); }
#contents #service .wide-block.service03{ background-image: url(../images/service03_bg-sp.jpg); }
#contents #service .wide-block.service04{ background-image: url(../images/service04_bg-sp.jpg); }
#contents #service .wide-block.service05{ background-image: url(../images/service05_bg-sp.jpg); }

#contents #service .wide-block h3{
	margin-bottom		: 1rem;
	font-size			: 2rem;
}
#contents #service .wide-block .inner p:last-child{ margin-bottom: 0; }

@media (min-width: 992px) {
#contents #service .wide-block{ min-height: 400px; }

#contents #service .wide-block.service01{ background-image: url(../images/service01_bg-pc.jpg); }
#contents #service .wide-block.service02{ background-image: url(../images/service02_bg-pc.jpg); }
#contents #service .wide-block.service03{ background-image: url(../images/service03_bg-pc.jpg); }
#contents #service .wide-block.service04{ background-image: url(../images/service04_bg-pc.jpg); }
#contents #service .wide-block.service05{ background-image: url(../images/service05_bg-pc.jpg); }

#contents #service .wide-block .inner{ width: 53.2%; }
#contents #service .wide-block:nth-child(odd) .inner{ float: right; }
#contents #service .wide-block h3{
	margin-bottom		: 2rem;
	font-size			: 2.4rem;
}
}

/*----------------------------------------------------------------
 company
----------------------------------------------------------------*/
/*#contents #company{ padding-top: ; }
@media (min-width: 992px) { #contents #company{ padding-top: 4.5rem; } }
*/
/*----------------------------------------------------------------
 partnar
----------------------------------------------------------------*/
#contents #partnar{ padding: 0; }

/* title-container
-----------------------------------------------------*/
#contents #partnar .title-container{
	margin				: 0 0 2.5rem 0;
	padding				: 2rem 0 1rem 0;
	background			: #fff6f8 url(../images/partnar_title-bg.jpg) 20% 100% /120% no-repeat;
}
@media (min-width: 576px) and (max-width: 992px) {
#contents #partnar .title-container{
	padding				: 3rem 0;
	background			: #fff6f8 url(../images/partnar_title-bg.jpg) right bottom /contain no-repeat;
}
}
@media (min-width: 992px) {
#contents #partnar .title-container{
	margin				: 0 0 5rem 0;
	height				: 340px;
	padding				: 9rem 0 0 0;
	background			: #fff6f8 url(../images/partnar_title-bg.jpg) right bottom /contain no-repeat;
}
}

/* s-block
-----------------------------------------------------*/
#contents #partnar .s-block{ margin: 1.5rem 0; }
#contents #partnar .s-block:first-of-type{ margin-top: 2.5rem; }

@media (min-width: 992px) {
#contents #partnar .s-block{
	margin				: 2rem 0;
	font-size			: 1.4rem;
}
#contents #partnar .s-block:first-of-type{ margin-top: 5rem; }
}
#contents #partnar .s-block:nth-child(odd){ background: url(../../common/images/suisai_red01.jpg) right center repeat; }
#contents #partnar .s-block:nth-child(even){ background: url(../../common/images/suisai_red02.jpg) left center repeat; }

#contents #partnar .s-block .pop{ color: #de5757; }
#contents #partnar .s-block h3{
	margin				: 0 0 1.5rem 0;
	text-align			: center;
	font-size			: 1.5rem;
}
#contents #partnar .s-block small{ font-weight: bold; }

@media (min-width: 992px) {
#contents #partnar .s-block h3{
	margin				: 0 0 1rem 0;
	font-size			: 2.4rem;
}
#contents #partnar .s-block small{ font-size: 2.4rem; }
}

/* contact-block
-----------------------------------------------------*/
#contents #partnar .contact-block{ background: #fff6f8; }


/*----------------------------------------------------------------
 recruit
----------------------------------------------------------------*/
#contents #recruit{
	background: url(../images/recruit_bg.jpg) center center /cover no-repeat;
}

@media (min-width: 992px) {
#contents #recruit{ padding-bottom: 9rem; }
#contents #recruit .title-copy{ margin: 0 0 5.5rem 0; }
}

#contents #recruit .message{
	margin-bottom		: 2.5rem;
	text-align			: center;
	font-weight			: bold;
	font-size			: 2rem;
}
@media (min-width: 992px) {
#contents #recruit .message{
	margin-bottom		: 4rem;
	font-size			: 3rem;
}
}
/* s-block
-----------------------------------------------------*/
#contents #recruit .s-block{
	margin-bottom		: 2rem;
	background-image	: url(../../common/images/suisai_brown01.jpg);
}
#contents #recruit h3{
	margin-bottom		: 1.5rem;
	text-align			: center;
	font-size			: 1.5rem;
}
@media (min-width: 992px) {
#contents #recruit .s-block{ margin-bottom: 4.5rem; }
#contents #recruit h3{ font-size: 2.4rem; }
}

/* feature-list
-------------------------------*/
#contents #recruit .feature-list{
	list-style			: decimal outside;
	margin				: 0;
	padding-left		: 1em;
}
@media (min-width: 992px) {
#contents #recruit .feature-list{
	padding-left		: 8rem;
	list-style			: decimal inside;
	font-size			: 1.6rem;
}
#contents #recruit .feature-list li{ margin-bottom: 1rem; }
#contents #recruit .feature-list li:last-child{ margin-bottom: 0; }
}


/*----------------------------------------------------------------
 contact
----------------------------------------------------------------*/
#contents #contact{}
#contents #contact .contact{ margin-top: 2.5rem; }
@media (min-width: 992px) {
#contents #contact .title-copy{ margin-bottom: 0 0 4rem 0; }
#contents #contact .contact{ margin-top: 4rem; }
}

/*----------------------------------------------------------------
 blog
----------------------------------------------------------------*/
#contents #blog{
	/*padding-top			: 2rem;*/
	background			: #f3f6fa;
}
#contents #blog .title-copy{ margin-bottom: 3rem; }

@media (min-width: 992px) {
#contents #blog{ padding-bottom: 9rem; }
#contents #blog .title-copy{ margin-bottom: 5rem; }
}

/* blog-list
-----------------------------------------------------*/
#contents #blog .blog-list{
	list-style			: none;
	margin				: 0;
	padding				: 0;
}
#contents #blog .blog-list>li{ margin: 0 0 1.5rem 0; }
#contents #blog .blog-list>li .date{
	margin				: 0 0.5rem 0 0;
	font-weight			: bold;
}
#contents #blog .blog-list>li .category em{
	display				: inline-block;
	border-radius		: 3px;
	padding				: 0.2rem 1rem;
	background			: #0068b7;
	text-align			: center;
	line-height			: 1;
	font-style			: normal;
	font-size			: 1rem;
	color				: #FFF;
}
#contents #blog .blog-list>li .entry-title{ display: block; }
#contents #blog .blog-list>li .entry-title a{ color: #333; }

@media (min-width: 992px) {
#contents #blog .blog-list{ font-size: 1.4rem; }
#contents #blog .blog-list>li{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	margin-bottom		: 2rem;
}
#contents #blog .blog-list>li .date{
	flex				: 1;
	margin				: 0 2rem 0 0;
	font-weight			: bold;
}
#contents #blog .blog-list>li .category{
	margin-right		: 2rem;
	max-width			: 13rem;
}
#contents #blog .blog-list>li .category em{
	display				: block;
	padding				: 0.2rem 2.5rem;
	font-size			: 1.4rem;
}
#contents #blog .blog-list>li .entry-title{ flex: 5; }
}