@charset "utf-8";
/*
Theme Name:
Version: 1.0
Description: 
Author: DROOM
Author URI: 
Tags: 
*/
@media (min-width: 1200px) {}
@media (min-width: 992px) {}
@media (min-width: 768px) {}
@media (min-width: 576px) {}
/*
color:#0665ab;
color:#f0f8ff;
*/
/*
##################################################################
 
	all
 
##################################################################
*/
html{
	font-size:62.5%;
}

body{
	font-size:1.4rem;
	line-height:2;
	font-family: "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	letter-spacing:0.15em;
	font-weight:medium;
	color:#555;
	font-weight:bold;
}
.en{
	font-family: 'Lato', sans-serif;
	font-weight:900;
}
.italic{
	font-style: italic;
}
a{
	text-decoration:none;
	color:#0665ab;
}
a:hover{
	color:#0665ab;
	text-decoration:underline;
}
.sp{
	display:none;
}
@media (min-width: 768px) {
	.sp{
		display:block;
	}
}
/*
##################################################################
 
	header
 
##################################################################
*/
.navbar{
	min-height:60px;
	box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
}
@media (min-width: 992px) {
	.navbar{
		height:60px;
	}
}
.nav-item a{
	font-family: 'Oswald', sans-serif;
	font-size:1.2rem;
	color:#333;
	padding:15px 7px;
	display:block;
	text-align:center;
}
@media (min-width: 992px) {
	.nav-item a{
		display:inline-block;
		font-family: 'Oswald', sans-serif;
		font-size:1.2rem;
		color:#333;
		padding:0 7px;
	}
}
.nav-item a:hover{
	color:#0665ab;
	text-decoration:none;
}

.navbar-brand img{
	width:200px;
	height:auto;
}



/*
##################################################################
 
	jumbotron
 
##################################################################
*/

.jumbotron{
/*
	padding:200px 0;
*/
	height:calc(100vh - 90px);
/*
	position:relative;
*/
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
align-items: center;
-webkit-align-items: center;

}
@media (min-width: 768px) {
	height:calc(100vh - 60px);
}
.jumbotron.sub-jumbotron{
	padding:20px 0;
	background:#0665ab;
	height:auto;
}
@media (min-width: 768px) {
	.jumbotron.sub-jumbotron{
		padding:50px 0;
		background:#0665ab;
	}
}
.jumbotron .container{
}

.jumbotron h1{
	font-size:4rem;
	color:#fff;
	line-height:1.6;
}
@media (min-width: 768px) {
	.jumbotron h1{
		font-size:5rem;
		color:#fff;
	}
}
.sub-jumbotron h1{
	font-size:2.4rem;
	line-height:1.4;
}
@media (min-width: 768px) {
	.sub-jumbotron h1{
		font-size:4rem;
	}
}
.jumbotron p{
	font-size:1.6rem;
	color:#fff;
	font-weight:bold;
}



.sub-jumbotron p{
	font-size:1.4rem;
	line-height:1.4;
}
/*
##################################################################
 
	scroll
 
##################################################################
*/
.scrollBar{
	position:absolute;
	bottom:10px;
	left:50%;
	z-index:999;
}

@media (min-width: 768px) {
	.scrollBar{
		position:absolute;
		bottom:30px;
		left:50%;
		z-index:999;
	}
}
/*Scrollテキストの描写*/
.scrollBar span{
    /*描画位置*/
	position: absolute;
	left:5px;
	bottom:10px;
    /*テキストの形状*/
	color: #fff;
	font-size: 1.4rem;
	letter-spacing: 0.2em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	font-family: 'Lato', sans-serif;
}

/* 丸の描写 */
.scrollBar:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#fff;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:70px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrollBar:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 75px;
	background:#fff;
}



/*
##################################################################
 
	animation(ページ遷移)
 
##################################################################
*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #0665ab;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
	padding-top:60px;
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}


/*
##################################################################
 
	slick
 
##################################################################
*/
.slider{
	margin-top:40px;
}
.slider div{
	text-align:center;
}
.slider img{
	width:100%;
	height:auto;
	margin:0 auto;
}
@media (min-width: 768px) {
	.slider img{
		width:auto;
		height:100px;
	}
}

/*
##################################################################
 
	cont
 
##################################################################
*/
.cont{
	padding:50px 10px;
	box-sizing:border-box;
}

@media (min-width: 768px) {
	.cont{
		padding:50px 10px;
		box-sizing:border-box;
	}
}
.bg--gray{
	background:#f9f9f9;
}
.bg--blue{
	background:#f0f8ff;
}
.cont-head{
	margin:30px 0 ;
	position:relative;
}
.cont-head:after{
	position: absolute;
	bottom: -20px;
	left: calc(50% - 50px);
	width: 100px;
	height: 5px;
	content: '';
	border-radius: 3px;
	background: #0665ab;
}
@media (min-width: 768px) {
	.cont-head:after{
		width: 150px;
		left: calc(50% - 75px);
	}
}
.cont-head.head-left:after{
	position: absolute;
	bottom: -20px;
	left:0;
	width: 100px;
	height: 5px;
	content: '';
	border-radius: 3px;
	background: #0665ab;
}
@media (min-width: 768px) {
	.vision-subTitle:after{
		width: 150px;
	}
}
.contact .cont-head.head-left:after{
	background: #fff;
}




.vision-title,
.cont-title{
	font-size:1.8rem;
	color:#0665ab;
	font-weight:bold;
	line-height:1.8;
}
@media (min-width: 768px) {
	.vision-title,
	.cont-title{
		font-size:2.6rem;
		color:#0665ab;
	}
}
.vision-title.en,
.cont-title.en{
	font-size:3rem;
	color:#0665ab;
	line-height:1.4;
}
@media (min-width: 768px) {
	.vision-title.en,
	.cont-title.en{
		font-size:4rem;
		color:#0665ab;
	}
}

.vision-subTitle,
.cont-subTitle{
	font-size:1.4rem;
	color:#0665ab;
	position:relative;
}

@media (min-width: 768px) {
	.vision-subTitle,
	.cont-subTitle{
		font-size:1.6rem;
		color:#0665ab;
		position:relative;
	}
}
.cont-title span{
	font-size:1.6rem;
}
.vision-txt{
	font-size:1.4rem;
}
@media (min-width: 768px) {
	.vision-txt{
		font-size:1.6rem;
	}
}
.cont-body{
	padding-top:30px;
}
.cont-img img{
	width:100%;
	height:auto;
}
@media (min-width: 768px) {
	.cont-img img{
		width:50%;
		height:auto;
	}
}
.text-lead{
	font-size:1.2rem;
	
}
/*
##################################################################
 
	ニュース
 
##################################################################
*/
.news{
	margin-top:30px;
}

.news .list-group-item{
	padding-left:0;
	padding-right:0;
}
@media (min-width: 768px) {
	.news .list-group-item{
	}
}
.bg--gray  .news .list-group-item{
	background:#f9f9f9;
}

.news .list-group-item a{
	display:block;
	font-size:1.4rem;
	padding:25px 10px;
	color:#333;
	position:relative;
	transition:all 0.5s;
}

.news .list-group-item a:hover{
	color:#999;
	text-decoration:none;
}

.news .list-group-item time{
	margin-right:5px;
	display:block;
}
@media (min-width: 768px) {
	.news .list-group-item time{
		margin-right:10px;
		display:inline-block;
	}
}
.news .list-group-item svg{
	position:absolute;
	right:0px;
	top:50%;
	width:30px;
	height:auto;
	margin-top:-12px;
	transition:all 0.5s;
}
@media (min-width: 768px) {
	.news .list-group-item svg{
		position:absolute;
		right:20px;
		top:50%;
		width:30px;
		height:auto;
		margin-top:-12px;
	}
}
.news .list-group-item a:hover svg{
	transform: translate(10px,0);
}


/*
##################################################################
 
	フッター
 
##################################################################
*/
#footer{
	background:#0665ab;
	padding:30px 0;
}
@media (min-width: 768px) {
	#footer{
		background:#0665ab;
		padding:100px 0;
	}
}
.copyright{
	text-align:center;
	font-size:1rem;
	color:#fff;
}
@media (min-width: 768px) {



}


/*
##################################################################
 
	サービス
 
##################################################################
*/
.flex-equal > * {
	-ms-flex: 1;
	flex: 1;
}
@media (min-width: 768px) {
	.flex-md-equal > * {
		-ms-flex: 1;
		flex: 1;
	}
}
.overflow-hidden { overflow: hidden; }

.service-box{
	padding:30px 0;
}
@media (min-width: 768px) {
	.service-box{
		padding:70px 0;
	}
}

.service-body{
	padding:10px 0 10px 0;
	box-sizing:border-box;
}
@media (min-width: 768px) {
	.service-body{
		padding:20px 0 20px 30px;
		box-sizing:border-box;
	}
}
.service-img{
	height:200px;
}
@media (min-width: 992px) {
	.service-img{
		height:300px;
		-webkit-box-shadow: 15px 15px 0 rgba(0, 0, 0, 0.06);
		box-shadow: 15px 15px 0 rgba(0, 0, 0, 0.06);
	}
}

.service-title{
	font-size:2.2rem;
	font-weight:bold;
	line-height:1.8;
	margin-bottom:10px;
	color:#333;
}

.service-txt{
	font-size:1.3rem;
}

.read-btn{
	margin-top:10px;
	display:inline-block;
	color:#333;
	border-bottom:#333 2px solid;
	padding:10px 40px;
}
@media (min-width: 768px) {
	.read-btn{
		margin-top:20px;
		padding:10px 30px;
	}
}
.read-btn:hover{
	background:#333;
	color:#fff;
	text-decoration:none;
}


/*
##################################################################
 
	list
 
##################################################################
*/
.list{
	padding:0;
	
}
.list li{
	list-style:none;
	padding:15px;
	box-sizing:border-box;
	margin-bottom:15px;
	border:#999 2px solid;
}
.svg--check{
	fill:#a80000;
	margin-right:10px;
	width:20px;
	height:auto;
}
.svg--blank{
	width:18px;
	height:auto;
	fill:#555;
}
/*
##################################################################
 
	hostingBox
 
##################################################################
*/
.hostingBox,
.productBox{
	list-style:none;
	padding:0;
	margin-top:30px;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:space-between;
	justify-content: space-between;
}
.hostingBox-list{
	width:100%;
	background:#fff;
	padding:20px 10px;
	box-sizing:border-box;
	text-align:center;
	margin-bottom:20px;
}

@media (min-width: 768px) {
	.hostingBox-list{
		width:48%;
	}
}
.hostingBox-svg img{
	width:60px;
	height:auto;
}
.hostingBox-list h3{
	font-size:2rem;
	font-weight:bold;
	color:#0665ab;
}
.hostingBox-list p{
	font-size:1.2rem;
}
/*
##################################################################
 
	product
 
##################################################################
*/
.productBox-list{
	width:100%;
	margin:0 0 20px 0;
/*
	margin-bottom:20px;
*/
}
@media (min-width: 768px) {
	.productBox-list{
		width:30%;
		margin:0 1.5% 20px 1.5%;
	}
}
.productBox-list:nth-of-type(3n-1):nth-last-of-type(1){
	margin-right:auto;
}



.productBox-img img{
	vertical-align:bottom;
}
.productBox-list h3{
	font-weight:bold;
	font-size:1.2rem;
	line-height:2;
}
@media (min-width: 768px) {
	.productBox-list h3{
		font-size:1.4rem;
	}
}
.productBox-list a:hover img{
	opacity:0.8;
}
.thumbnail-img{
	width:80%;
	margin:10px auto 20px;
}
.thumbnail-img img{
	width:100%;
	height:auto;
}
.tags a{
	color:#555;
	border:#555 1px solid;
	display:inline-block;
	padding:5px 15px;
	font-size:1.2rem;
}
/*
##################################################################
 
	ads
 
##################################################################
*/
.logos{
	list-style:none;
	padding:0;
	margin-top:30px;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:space-between;
	justify-content: space-between;
}
.logos li{
	width:48%;
	margin-bottom:2%;
}
@media (min-width: 768px) {
	.logos li{
		width:18%;
		margin-bottom:2%;
	}
}
.logos li img{
	width:100%;
	height:auto;
}




/*
##################################################################
 
	btn
 
##################################################################
*/
.btn{
	background:#0665ab;
	display:block;
	padding:20px 0;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:1.6rem;
	position:relative;
}
.btn:hover{
	color:#fff;
	opacity:0.8;
}
.btn--harf{
	width:100%;
}
@media (min-width: 768px) {
	.btn--harf{
		width:50%;
	}
}
.btn img{
	position:absolute;
	top:0;
	bottom:0;
	right:10px;
	margin:auto;
	width:30px;
	height:auto;
}


/*
##################################################################
 
	contact
 
##################################################################
*/
.contact{
	background:url('./commons/images/contact-bg.jpg')no-repeat;
	background-size:cover;
	background-position:center center;
}


/*
##################################################################
 
	table
 
##################################################################
*/
.table th,
.table td{
	font-size:1.4rem;
}
/*
##################################################################
 
	map
 
##################################################################
*/
.map iframe{
	width:100%;
	height:400px;
}

/*
##################################################################
 
	pager
 
##################################################################
*/
.pagination{
    text-align: center;
	margin-top:20px;
}
.pagination ul{
	list-style:none;
	padding:0;
}
.pagination li{
	display:inline-block;
}
a.page-numbers,
.pagination .current{
	display:block;
	background: #fff;
	border: solid 1px #333;
	padding:10px 16px;
	margin:0 2px;
	text-decoration: none;
	color:#333;
	box-sizing:border-box;
}

.pagination .current{
	background: #0665ab;
	border: solid 1px #0665ab;
	color: #fff;
}



/*
##################################################################
 
	form
 
##################################################################
*/
.form-group{
	margin-top:20px;
}
.form-group label{
	font-size:1.4rem;
}

.form-control{
	height:auto;
	padding:15px;
	box-sizing:border-box;
	font-size:1.4rem;

}
.req{
	color:#a80000;
	margin-left:10px;
}

/*
##################################################################
 
	content
 
##################################################################
*/
.date svg{
	fill:#333;
	width:12px;
	height:auto;
	margin-right:5px;
}
.content h2{
	font-size:2.2rem;
	font-weight:bold;
	margin:15px 0;
	padding:10px 0;
	line-height:2;
}
.content h3{
	font-size:1.8rem;
	font-weight:bold;
	margin:10px 0;
	padding:10px 0;
	line-height:2;
}

.content p{
	padding-bottom:20px;
	line-height:2.4;
}
.content ol{
	padding-left:30px;
}





/*
##################################################################
 
	fadeIn
 
##################################################################
*/
.fade{
  opacity:0;
}

.fadeIn--right{
	transform: translate(-100px, 0);
	-webkit-transform: translate(-100px, 0);
	transition: 1.5s;
}
.fadeIn--right.is--active{
	opacity: 1 !important;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}

.fadeIn--left,
.fadeIn--top{
	transform: translate(0, 100px);
	-webkit-transform: translate(0, 100px);
	transition: 1.5s;
}
.fadeIn--left.is--active,
.fadeIn--top.is--active{
	opacity: 1 !important;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}

@media (min-width: 768px) {
/*
	.fadeIn--right{
		transform: translate(-100px, 0);
		-webkit-transform: translate(-100px, 0);
		transition: 1.5s;
	}
	.fadeIn--right.is--active{
		opacity: 1 !important;
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
	}
*/
	.fadeIn--left{
		transform: translate(100px, 0);
		-webkit-transform: translate(100px, 0);
		transition: 1.5s;
	}
	.fadeIn--left.is--active{
		opacity: 1 !important;
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
	}
	.fadeIn--top{
		transform: translate(0, 100px);
		-webkit-transform: translate(0, 100px);
		transition: 1.5s;
	}
	.fadeIn--top.is--active{
		opacity: 1 !important;
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
	}
}