/* CSS Document */
/* 
html {
    font-size: 62.5%;
} */


/* font
--------------------------------------------------------------*/

@font-face {
	font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
	src: url("/solution_sites/cloud/font/NotoSansJP-Regular.otf");
}
@font-face {
	font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
	src: url("/solution_sites/cloud/font/NotoSansJP-Medium.otf");
}
@font-face {
	font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 600;
	src: url("/solution_sites/cloud/font/NotoSansJP-Bold.otf");
}



/* フォントをビューの横幅に合わせてremで表示するため。16px = 0.16rem */

dl, dt, dd, ul, ol, li { padding: 0; margin: 0; }
ol, ul, li { list-style: none;}

html {
	font-size: calc(100vw / 14.4);
	}

body {
	margin:0;
	font-size:16px;
	line-height: 175%;
	color: #000000;
	-webkit-font-smoothing: antialiased;
  font-family:'Roboto','Noto Sans JP', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	font-family: "Noto Sans Japanese", sans-serif;
	
	-webkit-font-smoothing: antialiased;
	  font-feature-settings: "palt";
	 -webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	 -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

section{
	width: 1200px;
	margin:0 auto;
}


/* For modern browsers */
.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}
 
.clearfix:after {
 clear: both;
}
 
/* For IE 6/7 only */
.clearfix {
 *zoom: 1;
}


a{
	color: #4cb5fc;
	-webkit-transition-property:color;  
	-webkit-transition-duration:0.2s;  
	-webkit-transition-timing-function:linear; 
    -webkit-backface-visibility: hidden; /* 追加 */
	backface-visibility: hidden; /* 追加 */
	text-decoration: none;
	}
a:hover{
	color: #4cb5fc;
	}


img{
	-webkit-transition-property:opacity;  
    -webkit-transition-duration:0.2s;  
    -webkit-transition-timing-function:linear; 
    -webkit-backface-visibility: hidden; /* 追加 */
    backface-visibility: hidden; /* 追加 */
	border:0;
	vertical-align:bottom;
	max-width:100%;
	max-height:100%;
	height:auto;
}

a img:hover{
	opacity:0.8;
}



p {
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
	padding: 0 0 0 0;
	margin: 0;
	line-height:140%;
}

h1 {
/*	font-size: 40px;
	line-height: 60px;
	font-weight: bold;*/
}
h2 {
	font-size: 32px;
	line-height: 48px;
	font-weight: bold;
}
h3 {
	font-size: 24px;
	line-height: 36px;
	font-weight: bold;
}

h4 {
	font-size: 16px;
	font-weight: bold;
	line-height: 27px;
}

p {
	font-size: 16px;
    line-height: 28px;
    letter-spacing: 2px;
}


header,
footer,
section,
aside,
article,
nav,
div,
ul,
li,
dl,
dt,
dd,
p,
span,
img,
h1,
h2,
h3,
h4,
h5,
a{
	box-sizing: border-box;
}

ul{
	margin-top:0;
	margin-bottom:0;
}

.clear{clear:both;}


.photo_right{
	margin:0 0 25px 25px;
	float:right;
	}
.photo_left{
	margin:0 25px 25px 0;
	float:left;
	}
	


table{border-collapse:collapse;}
th{border-collapse:collapse;}
td{border-collapse:collapse;}


.font_white{color:#fff !important;}
.font_navy{color:#006699 !important;}
.font_darkred{color:#990000 !important;}
.font_red{color:#FF0000 !important;}
.font_green{color:#669900 !important;}
.font_pink{color:#FF6699 !important;}
.font_yellow{color:#FF0 !important;}
.font_lightgray{color:#ccc !important;}
.font_lightblue{color:#3FA9F5 !important;}
.font_lightgreen{color:#009844 !important;}


.font_nomalbold{font-weight:normal;}
.font_bold{font-weight:bold;}
.font_small{font-size:80%;}
.font_middle{font-size:90%;}
.font_big{font-size:110%;}


.line_center{text-align:center;}
.line_right{text-align:right;}
.line_left{text-align:left !important;}
.line_center_sp{text-align:center;}


.mar0px{margin-bottom:0px !important;}
.mar5px{margin-bottom:5px !important;}
.mar10px{margin-bottom:10px !important;}
.mar15px{margin-bottom:15px !important;}
.mar20px{margin-bottom:20px !important;}
.mar25px{margin-bottom:25px !important;}
.mar30px{margin-bottom:30px !important;}
.mar35px{margin-bottom:35px !important;}
.mar40px{margin-bottom:40px !important;}
.mar45px{margin-bottom:45px !important;}
.mar50px{margin-bottom:50px !important;}
.mar60px{margin-bottom:60px !important;}
.mar70px{margin-bottom:70px !important;}
.mar80px{margin-bottom:80px !important;}
.mar90px{margin-bottom:90px !important;}
.mar100px{margin-bottom:100px !important;}
.mar110px{margin-bottom:110px !important;}
.mar120px{margin-bottom:120px !important;}
.mar130px{margin-bottom:130px !important;}
.mar140px{margin-bottom:140px !important;}
.mar150px{margin-bottom:150px !important;}

.pad0px{padding-bottom:0px !important;}

.mar_top0{margin-top:0px !important;}
.mar_top5px{margin-top:5px !important;}
.mar_top10px{margin-top:10px !important;}
.mar_top15px{margin-top:15px !important;}
.mar_top20px{margin-top:20px !important;}
.mar_top25px{margin-top:25px !important;}
.mar_top30px{margin-top:30px !important;}
.mar_top35px{margin-top:35px !important;}
.mar_top40px{margin-top:40px !important;}
.mar_top45px{margin-top:45px !important;}
.mar_top50px{margin-top:50px !important;}
.mar_top60px{margin-top:60px !important;}
.mar_top70px{margin-top:70px !important;}
.mar_top80px{margin-top:80px !important;}
.mar_top90px{margin-top:90px !important;}
.mar_top100px{margin-top:100px !important;}
.mar_top110px{margin-top:110px !important;}
.mar_top120px{margin-top:120px !important;}
.mar_top130px{margin-top:130px !important;}
.mar_top140px{margin-top:140px !important;}
.mar_top150px{margin-top:150px !important;}


.font75{font-size:75% !important;}
.font80{font-size:80% !important;}
.font85{font-size:85% !important;}
.font90{font-size:90% !important;}
.font95{font-size:95% !important;}
.font100{font-size:100% !important;}
.font105{font-size:105% !important;}
.font110{font-size:110% !important;}
.font115{font-size:115% !important;}
.font120{font-size:120% !important;}
.font125{font-size:125% !important;}
.font130{font-size:130% !important;}
.font140{font-size:140% !important;}
.font150{font-size:150% !important;}
.font160{font-size:160% !important;}
.font170{font-size:170% !important;}
.font180{font-size:180% !important;}
.font190{font-size:190% !important;}
.font200{font-size:200% !important;}

a{
	-webkit-transition-property:color;  
    -webkit-transition-duration:0.2s;  
    -webkit-transition-timing-function:linear; 
}

.div98{
	width:98%;
}
.div96{
	width:96%;
}
.div94{
	width:94%;
}
.div92{
	width:92%;
}
.div90{
	width:90%;
}
.div80{
	width:80%;
}
.div70{
	width:70%;
}



.div98,
.div96,
.div94,
.div92,
.div90,
.div80,
.div70{
	margin-left:auto;
	margin-right:auto;
}


.sponly{
	display:none !important;
}


/* 上固定メニューsp */

#headbar {
	background-color: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}


a.acLink:link {	color:#002D76;text-decoration:underline;}
a.acLink:hover { color:#002D76;text-decoration:none;}
a.acLink:visited {	color:#002D76;text-decoration:underline;}


/******************************************************************************************/

/* for TB & SP CSS   */

/******************************************************************************************/



@media only screen and (max-width: 1200px) {
	
.sponly2{
	display:none !important;
}

}



@media only screen and (min-width: 1025px) and (max-width: 1200px) {
	
	section{
		width:100% !important;
		width: 90% !important;
	}
	.serviceMainvisualIn {
		width:100% !important;
		width: 90% !important;
	}
	.contIn1200,
	.breadcrumb {
		width:100% !important;
		width: 90% !important;
	}

}


/******************/
/* for Tablet    */
/* 769px-1024px    */
/******************/
@media only screen and (min-width: 769px) and (max-width: 1024px) {

	.top_logo.pconly{
		display: none;
	}

	section{
		width:90% !important;
	}
	.serviceMainvisualIn {
		width: 90% !important;
	}
	.contIn1200,
	.breadcrumb {
		width: 90% !important;
	}
	h1 {
		font-size: 28px;
		font-weight: bold;
	}
	h2 {
		font-size: 24px;
		font-weight: bold;
	}
	h3 {
		font-size: 20px;
		font-weight: bold;
	}

	#headbar{
		padding: 10px 0;
	}

}



/******************/
/* for SP      */
/* 0-599px    */
/* only Header    */
/******************/
@media only screen and (max-width: 768px) {


#headbar{
	padding: 10px 0;
}

.sponly{
	display:block !important;
}

.header-container .sponly.spmenu {
	position: static;
}

.pconly{
	display:none !important;
}


section{
	width:90% !important;
}
	
.photo_right{
	margin:0 0 20px 0;
	float:none;
	text-align:center;
	}
.photo_left{
	margin:0 0 20px 0;
	float:none;
	text-align:center;
	}


.div98,
.div96,
.div94,
.div92,
.div90,
.div80,
.div70{
	width:100%;
}

.line_center_sp{text-align:left;}

h2.page_lead {
	font-weight: bold;
	font-size: 2.5em;
	line-height: 1.5em;
	margin-bottom: 1em;
}

h1 {
	font-size: 32px;
	font-weight: bold;
}
h2 {
	font-size: 28px;
	font-weight: bold;
}
h3 {
	font-size: 24px;
	font-weight: bold;
}
.pconly{
	display:none !important;
}
}