@charset "utf-8";

/*----------------------------------------------------------------
 /category/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 area
-----------------------------------------------------*/
@media (max-width: 991px) {
#mainview{
	background			: url(../images/mainview_image-pc.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;
}
}
#mainview .main-copy{
	margin				: 0 auto;
	text-align			: center;
}
@media (max-width: 991px) {
#mainview .main-copy{
	margin				: 0 auto;
	padding				: 10rem 0 0 0;
	max-width			: 80vw;
	text-align			: center;
}
}
@media (min-width: 992px) {
#mainview .main-copy{ padding: 8rem 0 0 0; }
}

/* view-requirements
-----------------------------------------------------*/
#mainview .view-requirements{
	margin				: 3rem auto 0 auto;
	width				: 27rem;
	text-align			: center;
}
#mainview .view-requirements a{
	display				: block;
	border				: 3px solid #fff;
	padding				: 0.5rem 0;
	background			: rgba(0,0,0,0.4);
	text-decoration		: none;
	font-size			: 2rem;
	font-weight			: bold;
	color				: #FFF;
}
@media (min-width: 992px) {
#mainview .view-requirements{ width: 48rem; }
#mainview .view-requirements a{
	border				: 5px solid #fff;
	padding				: 1rem 0;
	font-size			: 2.4rem;
}
}

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

@media (min-width: 992px) {
#contents table th{ text-align: left; }
}

/* title
-----------------------------------------------------*/
#contents .title{ margin: 0 0 2rem 0; }
@media (min-width: 992px) {
#contents .title{
	height				: 18rem;
	line-height			: 18rem;
}
}
#contents #vision .title		{ background-image: url(../images/vision_title.jpg); }
#contents #belief .title		{ background-image: url(../images/belief_title.jpg); }
#contents #voice .title			{ background-image: url(../images/voice_title.png); }
#contents #requirements .title	{ background-image: url(../images/requirements_title.jpg); }

/*----------------------------------------------------------------
 vision
----------------------------------------------------------------*/
#contents #vision{ border-bottom: 1px solid #eee; }

/*-----------------------------------------------------
 mission
-----------------------------------------------------*/
/* s-block
-----------------------------------------------------*/
#contents #vision .mission .s-block{
	margin				: 0 15px;
	background-image	: url(../../common/images/suisai_blue01.jpg);
}
#contents #vision .mission .s-block .text{
	margin				: 1rem 0 0 0;
	text-align			: center;
	line-height			: 1.5;
	font-weight			: bold;
	font-size			: 1.75rem;
}
#contents #vision .mission .s-block .pop{ color: #00a29a; }
@media (min-width: 992px) {
#contents #vision .mission .s-block{
	margin				: 0 auto;
	width				: 900px;
}
#contents #vision .mission .s-block .text{
	margin				: 2rem 0;
	font-size			: 4rem;
}
}
@media (min-width: 1200px) {
#contents #vision .mission .s-block{ width: 1024px; }
}

/*-----------------------------------------------------
 message
-----------------------------------------------------*/
#contents #vision .message h3{
	margin				: 3.5rem 0 2rem 0;
	line-height			: 1.8;
	font-size			: 1.6rem;
}
#contents #vision .message h3 em{
	background			: linear-gradient(transparent 80%, #4ecfc9 20%);
	font-style			: normal;
}
@media (min-width: 992px) {
#contents #vision .message h3{
	position			: relative;
	left				: -0.5rem;
	margin				: 7rem 0 4rem 0;
	font-size			: 3rem;
}
}
#contents #vision .message p{ margin: 0 0 1.8em 0; }

/*----------------------------------------------------------------
 belief
----------------------------------------------------------------*/
#contents #belief{}

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

/* wide-block
----------------------------------------------------*/
#contents #belief .wide-block.belief01{
	background-color	: #7c6e5d;
	background-image	: url(../images/belief01_bg-sp.jpg);
}
#contents #belief .wide-block.belief02{
	background-color	: #f1e9f2;
	background-image	: url(../images/belief02_bg-sp.jpg);
}
#contents #belief .wide-block.belief03{
	background-color	: #fafafa;
	background-image	: url(../images/belief03_bg-sp.jpg);
}
@media (min-width: 992px) {
#contents #belief .wide-block{
	min-height			: 400px;
	padding				: 6.5rem 0 7rem 0;
}
#contents #belief .wide-block.belief01{ background-image: url(../images/belief01_bg-pc.jpg); }
#contents #belief .wide-block.belief02{ background-image: url(../images/belief02_bg-pc.jpg); }
#contents #belief .wide-block.belief03{ background-image: url(../images/belief03_bg-pc.jpg); }
}

/* inner / s-inner
----------------------------------------------------*/
#contents #belief .wide-block .inner,
#contents #belief .wide-block .s-inner{
	position			: relative;
	margin				: 0 0 2rem 0;
}
#contents #belief .wide-block .inner:last-child,
#contents #belief .wide-block .s-inner:last-child{ margin-bottom: 1rem; }
@media (min-width: 992px) {
#contents #belief .wide-block .inner,
#contents #belief .wide-block .s-inner{
	margin-bottom		: -5rem;
	width				: 53.5%;
	font-size			: 1.8rem;
}
}

/* inner
----------------------------------------------------*/
#contents #belief .wide-block .inner{ font-size: 1.5rem; }
#contents #belief .wide-block .inner p:last-child{ margin-bottom: 0; }
#contents #belief .wide-block .inner h3{
	margin				: 0 0 2rem 0;
	font-size			: 2rem;
	line-height			: 1.33;
}

@media (min-width: 992px) {
#contents #belief .wide-block .inner{ z-index: 10; }
#contents #belief .wide-block:nth-child(even) .inner{ float: right; }
#contents #belief .wide-block .inner h3{ font-size: 2.4rem; }
}


/* s-inner
----------------------------------------------------*/
#contents #belief .wide-block .s-inner{
	padding				: 2.5rem 1.5rem;
	background-position	: center center;
}
#contents #belief .wide-block.belief01 .s-inner{
	background-image	: url(../../common/images/suisai_light01.jpg);
}
#contents #belief .wide-block.belief03 .s-inner.s01{
	background-image	: url(../../common/images/suisai_light02.jpg);
	z-index				: 9;
}
#contents #belief .wide-block.belief03 .s-inner.s02{
	background-image	: url(../../common/images/suisai_light03.jpg);
	z-index				: 8;
}

#contents #belief .wide-block .s-inner ul{
	list-style			: none;
	padding				: 0;
	margin				: 0;
	font-size			: 1.4rem;
}
#contents #belief .wide-block .s-inner ul>li{ margin-bottom: 2rem; }
#contents #belief .wide-block .s-inner ul>li:last-child{ margin-bottom: 0; }
#contents #belief .wide-block .s-inner ul>li>span{
	display				: block;
	padding-left		: 1em;
	text-indent			: -1em;
	font-size			: 1.5rem;
	font-weight			: bold;
}
#contents #belief .wide-block .s-inner ul>li>p{
	margin				: 0;
	padding-left		: 2rem;
}

@media (min-width: 992px) {
#contents #belief .wide-block .s-inner{
	float				: right;
	padding				: 5rem 3rem;
}
#contents #belief .wide-block .s-inner:nth-of-type(odd){ float: left; }
#contents #belief .wide-block .s-inner ul{ font-size: 1.6rem; }
#contents #belief .wide-block .s-inner ul>li>span{ font-size: 2rem; }
}


/*----------------------------------------------------
 freelance
----------------------------------------------------*/
#contents #belief .freelance{ padding: 4rem 0 0 0; }
#contents #belief .freelance h3{
	margin				: 0 0 2.5rem 0;
	text-align			: center;
	font-size			: 2rem;
}
@media (min-width: 992px) {
#contents #belief .freelance{
	padding				: 7rem 0 0 0;
	font-size			: 1.6rem;
}
#contents #belief .freelance h3{
	margin				: 0 0 5rem 0;
	font-size			: 3rem;
}
}

/*----------------------------------------------------------------
 voice
----------------------------------------------------------------*/
#contents #voice{ background: #f1fafe; }

/*-----------------------------------------------------
 headings
-----------------------------------------------------*/
/* heading 3
-----------------------------------------------------*/
#contents #voice h3{
	margin				: 0 1.5rem 2rem 1.5rem;
	text-align			: center;
	font-size			: 2rem;
}

#contents #voice h3 .q-num{
	display				: block;
	position			: relative;
	margin				: 0 auto 1rem auto;
	width				: 5.8rem;
	height				: 5.8rem;
	border-radius		: 3rem;
	background			: #0ba3c2;
	font-family			: 'Oswald',sans-serif;
	color				: #FFF;
}
#contents #voice h3 .q-num>.text{
	display				: block;
	padding				: 1rem 0 0 0;
	font-weight			: 200;
	font-size			: 1rem;
}
#contents #voice h3 .q-num>.number{
	font-size			: 2.5rem;
	font-weight			: 400;
}
@media (min-width: 992px) {
#contents #voice h3{ font-size: 2.4rem; }
#contents #voice h3 .q-num{
	width				: 8rem;
	height				: 8rem;
	border-radius		: 4rem;
	margin				: 0 auto 1.5rem auto;
}
#contents #voice h3 .q-num>.text{
	padding				: 1.2rem 0 0 0;
	font-size			: 1.5rem;
}
#contents #voice h3 .q-num>.number{ font-size: 3.4rem; }
}

/* heading 4
-----------------------------------------------------*/
#contents #voice h4{
	margin				: 2.5rem 0 2.5rem 0;
	border				: 2px solid #0ba3c2;
	padding				: 0.8rem 0;
	background			: #FFF;
	text-align			: center;
	font-size			: 2rem;
	font-weight			: bold;
	color				: #0ba3c2;
}
#contents #voice .voice-list + h4{ margin: 5rem 0 2.5rem 0; }

@media (min-width: 992px) {
#contents #voice h4{
	margin				: 5rem 0 2.5rem 0;
	font-size			: 2.4rem;
}
#contents #voice .voice-list + h4{ margin: 7.5rem 0 2.5rem 0; }
}

/*-----------------------------------------------------
 question
-----------------------------------------------------*/
#contents #voice .question{ margin: 0 0 10rem 0; }
#contents #voice .question:last-child{ margin: 0; }

/*-----------------------------------------------------
 conclusion
-----------------------------------------------------*/
#contents #voice .conclusion{
	background			: #d8f0fc;
	margin				: 2rem 0 3rem 0;
	padding				: 1rem 2rem;
	font-weight			: bold;
	font-size			: 1.8rem;
	text-align			: center;
}

/*-----------------------------------------------------
 voice-list
-----------------------------------------------------*/
#contents #voice .voice-list{
	margin				: 0;
	padding				: 0;
	list-style			: none;
}

#contents #voice .voice-list>li>dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	flex-wrap			: wrap;
}
#contents #voice .voice-list>li>dl>dt{
	flex				: 1;
	padding				: 0 1rem 0 0;
	text-align			: center;
}
#contents #voice .voice-list>li>dl>dd{ flex: 5; }

#contents #voice .voice-list>li>dl>dd ul{
	margin				: 0;
	padding				: 0;
	list-style			: none;
}
#contents #voice .voice-list>li>dl>dd ul li{ margin: 0 0 0.5rem 0; }
#contents #voice .voice-list>li>dl>dd ul li:last-child{ margin: 0; }

#contents #voice .voice-list>li>dl>dd ul .rate{
	font-size			: 1.4rem;
	font-weight			: bold;
}
#contents #voice .voice-list>li>dl>dd ul .text{ font-size: 1.2rem; }
#contents #voice .voice-list>li>dl>dd ul .data{
	font-size			: 1rem;
	font-weight			: bold;
}
#contents #voice .voice-list>li>dl>dd ul .person{ display: inline-block; }

@media (min-width: 992px) {
#contents #voice .voice-list:first-child{ margin-top: 4rem; }

#contents #voice .voice-list>li>dl>dd{ flex: 4; }

#contents #voice .voice-list>li>dl>dt .job{
	display				: block;
	margin				: 1rem 0 0 0;
	font-size			: 1.4rem;
	font-weight			: bold;
}
#contents #voice .voice-list>li>dl>dd ul .rate{ font-size: 1.6rem; }
#contents #voice .voice-list>li>dl>dd ul .text{ font-size: 1.4rem; }
#contents #voice .voice-list>li>dl>dd ul .data{ font-size: 1.2rem; }
}

/*-----------------------------------------------------
 s-block
-----------------------------------------------------*/
#contents #voice .s-block{
	position			: relative;
	padding				: 0.75rem 0.75rem 0.75rem 1.5rem;
	background			: url(../../common/images/suisai_blue02.jpg) center center;
}
#contents #voice .voice-list li:nth-child(even) .s-block{ background-position : right center; }
#contents #voice .s-block .inner{ overflow: visible; }

@media (min-width: 992px) {
#contents #voice .s-block{ padding: 1.5rem 1.5rem 1.5rem 3rem; }
#contents #voice .s-block .inner{ padding: 1.8rem 2.2rem; }
}

/* arrow */
#contents #voice .s-block:before,
#contents #voice .s-block:after{
	position			: absolute;
	top					: 30px;
	left				: 0px;
	content				: "";
	display				: block;
	border				: 0.75rem solid transparent;
	border-left			: 0.75rem solid #f1fafe;
	width				: 0;
	height				: 0;
}
#contents #voice .s-block:after{ transform: translateY(-100%); }

/* masking */
#contents #voice .s-block .inner:before,
#contents #voice .s-block .inner:after{
	position			: absolute;
	left				: 0;
	content				: "";
	display				: block;
	width				: 0;
	border-left			: 0.75rem solid #f1fafe;
}
#contents #voice .s-block .inner:before{
	top					: 0;
	height				: calc(30px - 0.75rem);
}
#contents #voice .s-block .inner:after{
	bottom				: 0;
	height				: calc(100% - 30px - 0.75rem);
}

@media (min-width: 992px) {
/* arrow */
#contents #voice .s-block:before,
#contents #voice .s-block:after{
	top					: 50%;
	height				: 0;
	border				: 15px solid transparent;
	border-left			: 15px solid #f1fafe;
}

/* masking */
#contents #voice .s-block .inner:before,
#contents #voice .s-block .inner:after{
	height				: calc(50% - 1.5rem);
	border-left			: 15px solid #f1fafe;
}
}

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

@media (min-width: 992px) {
#contents #requirements table td{ letter-spacing: -0.3px; }
}

/* catch
-----------------------------------------------------*/
@media (min-width: 992px) {
#contents #requirements .catch{ margin: 3rem 0 5rem 0; }
}

/* contact-block
-----------------------------------------------------*/
#contents #requirements .contact-block{ background: #fffcf6; }