@charset "utf-8";
/* CSS Document */


/* 全体
----------------------------*/
body{
	position: relative;
}

/* ヘッダー
----------------------------*/
.header {
	height: auto;
	background-position: center;
	background-size: cover;
	padding-top: 50px;
}

.header nav ul li{
	margin-left: 0;
}
.header nav ul li a{
	padding: 4px 4px;
}
#pattern-01 .header{
	background-image:  url("/cloud/hybrid/img/pattern/01/bg_main.png") ;
}
#pattern-02 .header{
	background-image:  url("/cloud/hybrid/img/pattern/02/bg_main.png") ;
}
#pattern-03 .header{
	background-image:  url("/cloud/hybrid/img/pattern/03/bg_main.png") ;
}
.header h1{
	text-align: center;
	color: #fff;
}
.header p{
	color: #fff;
	margin-bottom: 0.7em;
}
.header div.col_btn{
	margin-top: 20px;
	margin-bottom: 20px;
}

#pattern-01 .header div.col_btn p.sbutton_white_cv a:hover{
	color: #d0637d;
}
#pattern-02 .header div.col_btn p.sbutton_white_cv a:hover{
	color: #568ac0;
}
#pattern-03 .header div.col_btn p.sbutton_white_cv a:hover{
	color: #4b9760;
}

#pattern-01 .header div.col_btn p.sbutton_white_cv a:hover::before {
	border-top: solid 3px #d0637d;
	border-right: solid 3px #d0637d;
}
#pattern-02 .header div.col_btn p.sbutton_white_cv a:hover::before {
	border-top: solid 3px #568ac0;
	border-right: solid 3px #568ac0;
}
#pattern-03 .header div.col_btn p.sbutton_white_cv a:hover::before {
	border-top: solid 3px #4b9760;
	border-right: solid 3px #4b9760;
}

.header div.arrow {
	clear: both;
	text-align: center;
	height: 24px;
	position: absolute;
	margin: 0 auto;
	top: 630px;
	left: 0;
	right: 0;
	padding-right: 37px;
}
.header div.arrow a{
	position: absolute;
	z-index: 100;
	text-decoration: none;
	margin: 0;
}
.header div.arrow a {
	padding-top: 60px;
	left: 0;
	right: 0;
	color: #333;
}
.header div.arrow a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 30px;
	height: 50px;
	margin-left: -15px;
	border: 2px solid #333;
	border-radius: 50px;
	box-sizing: border-box;
}
.header div.arrow a span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #333;
	border-radius: 100%;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.header p.bottom-decoration{
	width: 100%;
	margin: 0;
}
.header p.bottom-decoration img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:980px) {
	.header nav{
		height: 48px;
		box-sizing: border-box;
	}
}

@media screen and (max-width:757px) {
	.header div.arrow{
		display: none;
	}
}
@media screen and (max-width:739px) {
	.header p{
		text-align: left;
		margin-bottom: 1rem;
	}
	.header div.arrow{
		display: none;
	}
}


/* こんなお悩みありませんか？
----------------------------*/
section.trouble{
	padding-top: 6rem;
}
section.trouble p{
	position: relative;
}
section.trouble p span{
	position: absolute;
	top: 30px;
	padding-right: 50px;
	box-sizing: border-box;
	text-align: center;
	display: block;
	width: 100%;
}
section.trouble p.trouble-01{
	float: left;
}
section.trouble p.trouble-02{
	float: right;
	margin-top: 70px;
}
@media screen and (max-width:955px) {
	section.trouble p.trouble-01{
		float: none;
		margin: 0 auto;
		max-width: 460px;
	}
	section.trouble p.trouble-02{
		float: none;
		margin: 0 auto;
		max-width: 460px;
		margin-top: 20px;
	}
}
@media screen and (max-width:739px) {
	section.trouble{
		padding-bottom: 6rem;
	}
	section.trouble p.trouble-01{
		float: none;
		margin: 0 auto;
		max-width: 460px;
	}
	section.trouble p.trouble-02{
		float: none;
		margin: 0 auto;
		max-width: 460px;
		margin-top: 20px;
	}
	section.trouble p span{
		top: 10px;
		width: auto;
		left: 90px;
	}
	@media screen and (max-width:499px) {
		section.trouble p span{
			width: 100%;
			left: auto;
		}
	}
}

/* メリットを“いいとこどり”
----------------------------*/
section.nicething{
	background-color: #eee;
}
section.nicething p.top-decoration{
	width: 100%;
	margin: 0;
}
section.nicething p.top-decoration img{
	width: 100%;
	height: auto;
}
section.nicething p.description{
	text-align: center;
}

section.nicething table th{
	background-color: #ccc;
	text-align: center;
}

section.nicething table.view-pc thead tr th:nth-child(1){
	width: 11%;
}
section.nicething table.view-pc thead tr th:not(:nth-child(1)){
	 width: 47%;
 }
section.nicething table td{
	background-color: #fff;
	height: 120px;
}
section.nicething table td span{
	display: block;
	text-align: center;
}
section.nicething table td span.triangle{
	font-weight: bold;
	color: #00cc00;
	font-size: 2.0rem;
}
section.nicething table td span.circle{
	font-weight: bold;
	color: #ff0000;
	font-size: 2.0rem;
}
section.nicething table td span.wcircle{
	font-weight: bold;
	color: #ff0000;
	font-size: 2.8rem;
}
@media screen and (max-width:739px) {
	section.nicething p.top-decoration{
		margin-bottom: 20px;
	}
	section.nicething p.description{
		text-align: left;
	}
	section.nicething table.view-sp{
		display: block;
		margin-bottom: 30px;
	}
	section.nicething table.view-sp thead tr th:nth-child(1) {
		width: 160px;
		max-width: 50%;
	}
	section.nicething table.view-sp thead tr th:nth-child(2){
		width: 550px;
		max-width: 50%;
	}
	section.nicething table td{
		text-align: left;
	}
}

/* ５つのメリット
----------------------------*/
section.merit{
	background-image: url(/cloud/hybrid/img/pattern/bg_line_dgray.png)
}
section.merit *{
	color: #fff;
}
section.merit p.top-decoration{
	width: 100%;
	margin: 0;
}
section.merit p.top-decoration img{
	width: 100%;
	height: auto;
}
section.merit h2{
	color: #fff;
}

section.merit ul.btn-list{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
section.merit ul.btn-list div.slick-list,
section.merit ul.btn-list div.slick-list div.slick-track{
	width: 100%;
}
section.merit ul.btn-list li{
	width: 19.6% !important;
	max-height: 168px;
	box-sizing: border-box;
	margin-right: 0.5%;
	border: 1px solid #fff;
	padding: 3% 1%;
	float: left;
	cursor: pointer;
}
section.merit ul.btn-list li:not(.active):hover{
	background-color: #fff;
	border: 1px solid #7b7b7b;
}
section.merit ul.btn-list li:not(.active):hover p{
	color: #7b7b7b;
}
section.merit ul.btn-list li:not(.active):hover p span{
	color: #7b7b7b;
}

section.merit ul.btn-list li.active{
	background-repeat: no-repeat;
	background-size: cover;
}

#pattern-01 section.merit ul.btn-list li.active{
	background-image: url(/cloud/hybrid/img/pattern/01/bg_merit_btn.png);
}
#pattern-02 section.merit ul.btn-list li.active{
	background-image: url(/cloud/hybrid/img/pattern/02/bg_merit_btn.png);
}
#pattern-03 section.merit ul.btn-list li.active{
	background-image: url(/cloud/hybrid/img/pattern/03/bg_merit_btn.png);
}
section.merit ul.btn-list li:last-child{
	margin-right: 0%;
}
section.merit ul.btn-list p:first-child{
	text-align: center;
}
section.merit ul.description-list{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	position: relative;
}
section.merit ul.description-list img.back{
	position: absolute;
	top: 30%;
	left: 0px;
	width: 5%;
	z-index: 100;
}
section.merit ul.description-list img.next{
	position: absolute;
	top: 30%;
	right: 0px;
	width: 5%;
	z-index: 100;
}
section.merit ul.description-list li{
	width: 96%;
	margin: 0 auto;
}
section.merit ul.description-list div.text{
	text-align: left;
	width: 26%;
	padding: 2%;
	position: absolute;
	right: 50px;
	bottom: 20px;
	background-size: cover;
}
section.merit ul.description-list div.text p:first-child{
	text-align: center;
}

#pattern-01 section.merit ul.description-list div.text{
	background-image: url(/cloud/hybrid/img/pattern/01/bg_merit_info.png);
}
#pattern-02 section.merit ul.description-list div.text{
	background-image: url(/cloud/hybrid/img/pattern/02/bg_merit_info.png);
}
#pattern-03 section.merit ul.description-list div.text{
	background-image: url(/cloud/hybrid/img/pattern/03/bg_merit_info.png);
}
section.merit ul.description-list div.text p:nth-child(3){
	text-align: left;
}
section.merit ul.description-list li img{
	width: 61%;
	margin-left: 50px;
}

section.merit p.bottom-decoration{
	width: 100%;
	margin: 0;
}
section.merit p.bottom-decoration img{
	width: 100%;
	height: auto;
	position: relative;
	bottom: -1px;
}

@media screen and (max-width:739px) {
	section.merit p.top-decoration{
		margin-bottom: 20px;
	}

	section.merit ul.btn-list li p {
		margin-bottom: 0;
	}
	section.merit ul.btn-list li p.textf_m {
		display: none;
	}

	section.merit ul.description-list img.back,
	section.merit ul.description-list img.next{
		top: 20%;
		width: 10%;
	}
	section.merit ul.description-list li img{
		width: 95%;
		margin: 0 auto;
	}
	section.merit ul.description-list div.text{
		width: 95%;
		box-sizing: border-box;
		margin: 10px auto 20px auto;
		position: static;
		text-align: left;
	}

}

/* お問い合わせバナー
----------------------------*/
section.inquiry-banner {
	background: #eee;
	padding-top: 30px;
}
section.inquiry-banner p{
	text-align: center;
}
@media screen and (max-width:739px) {
	section.inquiry-banner{
		/* margin: 20px auto; */
	}
	section.inquiry-banner p{
		text-align: left;
	}
}
/* 導入企業
----------------------------*/
section.use{
	position: relative;
	width: 100%;
	background: #eee;
	margin-top: -1px;
	/* padding-bottom: 60px; */
}

section.use .use_top {
	width: 100%;
	min-height: 200px;
	background-image: url(/cloud/hybrid/img/pattern/bg_comp_top.png);
	background-position: center;
	background-size: cover;
}

/* section.use .use_inner {
	background: #fff;
} */

section.use p.top-decoration{
	width: 100%;
	margin: 0;
}
section.use p.top-decoration img{
	width: 100%;
	height: auto;
}
section.use ul{
	margin: 0 auto;
	overflow: hidden;
}
section.use ul li{
	box-sizing: border-box;
	width: 23.5%;
	float: left;
	margin-right: 2%;
	margin-bottom: 12px;
	text-align: center;
	padding-top: 11px;
	padding: 1%;
	background-color: #fff;
}
section.use ul li:nth-child(4n){
	margin-right: 0;
}
section.use img.bottom-diagonal{
	width: 100%;
}
section.use div.introduction{
	padding: 40px;
	background-color: #f7f7f7;
	overflow: hidden;
	border: 1px solid #eee;
}
section.use div.introduction h3 img{
	margin-right: 20px;
}
section.use div.introduction div.description{
	float: left;
	width: calc(55% - 30px);
	margin-right: 30px;
}
section.use div.introduction p.image{
	float: right;
	width: 45%;
}
section.use ul.center {
	text-align: center;
}
section.use ul.center li {
	float: none;
	display: inline-block;
}
section.use ul.nthc3n {
	text-align: center;
}
section.use ul.nthc3n li {
	float: none;
	display: inline-block;
}
section.use ul.nthc3n li:nth-child(3n){
	margin-right: 0;
}
section.use ul.nthc3n li:nth-child(4n){
	margin-right: 2%;
}
section.use ul.link-list {
	clear: both;
}
section.use ul.link-list li {
		box-sizing: border-box;
		width: auto;
		float: none;
		margin-right: 0;
		margin-bottom: 0;
		text-align: left;
		padding-top: 0;
		padding: 0;
		background-color: #f7f7f7;
		border: none;
		padding-left: 15px;
		margin-bottom: 5px;
		background: url(/sevice_shared/img/cloud/ico_arrow_list.png) no-repeat left 50%;
}

.text_25 {
	font-size: 25px;
}

@media screen and (max-width:739px) {

	section.use .use_top {
		min-height: 100px;
	}

	section.use p.top-decoration{
		margin-bottom: 20px;
	}
	section.use ul li:nth-child(4n){
		margin-right: 2%;
	}
	section.use ul li:nth-child(3n){
		margin-right: 0%;
	}
	section.use ul li{
		width: 32%;
	}
	section.use ul.center {
	text-align: left;
	}
	section.use ul.center li {
		float: left;
		display: block;
	}
	section.use ul.nthc3n {
		text-align: left;
	}
	section.use ul.nthc3n li {
		float: left;
		display: block;
	}
	section.use div.introduction{
		padding: 10px;
	}
	section.use div.introduction h3 img{
		width: auto;
		height: 1.5em;
		margin-right: 5px;
	}
	section.use div.introduction h3 img.onpre{
		width: auto;
		height: auto!important;
		margin-right: 5px;
	}
	section.use div.introduction div.description{
		float: none;
		width: 100%;
		margin-right: 0;
	}
	section.use div.introduction p.image{
		float: none;
		width: 100%;
		text-align: center;
	}
	.text_25 {
		font-size: 16px;
	}
}