@charset "UTF-8";

/* CSSリセット */

	html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,img,dl,dt,dd,ol,ul,li,table,tr,th,td,address,hr,br{
		margin:0;
		padding:0;
		border:0;
		outline:0;
		font-size:100%;
		font-weight:normal;
		vertical-align:baseline;
		background:transparent;
}
	body{
		font-size:80%;
		line-height: auto;
		font-family:"Centuly Gothic","Helvetica","Osaka","MS P Gothic","Hiragino Kaku Gothic Pro",YuGothic, 游ゴシック,"Yu Gothic", "Noto Sans Japanese",sans-serif;
}
	table{
		border-collapse:collapse;
		border-spasing:0;
}
	input,select{
		vertical-align:middle;
}
	ul{
		list-style-type:none;
}
	div{
		border:transparent 0px solid;
		overflow:hidden;
}

/* ここまでCSSリセット */


	html {
		font-size: 100%;
		scroll-behavior: smooth;
}
	body {
		color: #333;
		background-color: #fafffd;
		font-family: 'Noto Sans JP', sans-serif;
}
	a {
		color: #333;
		text-decoration: none;
}
	img {
		max-width: 100%;
		vertical-align: bottom;
}
	li {
		list-style: none;
}

/*-------------------------------------------
共通
-------------------------------------------*/
/* ヘッダー（サイドメニュー） */
	.header {
		width: 180px;
		height: 100%;
		background-color: #479;
		background: linear-gradient(to right, #447799 90%, rgba(100,200,270,50%));
		padding: 20px 15px 40px 25px;
		position: fixed;
		top: 0;
		overflow-y: hidden;
}
	.header .nav-menu {
		margin-bottom: 100px;
}
	.header a,p {
		color: #fff;
}

	.header li {
		font-size: 110%;
		padding: 8px 0;
		color: #fff;
		list-style-type: disc;
		list-style-position: inside;
}
	.header li.sector {
		font-size: 140%;
		margin: 35px 0 5px 0;
		padding-left: 15px;
		border-left: solid 6px #fff;
		list-style-type: none;
		width: 100px;
}

	.header nav {
		display: block;
}

	.logo {
		width: 160px;
		height: 90px;
		line-height: 1px;
		margin-bottom: 30px;
    position: relative
}
	.logo a {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%)
}

	.tell {
		display: block;
		border-top: solid 2px #fff;
		border-bottom: solid 2px #fff;
		padding: 3px;
		margin: 10px 0 40px;
		width: 150px;
		font-size: 100%;
		text-align: left;
		line-height: 130%;
}
	.tel{
		display: block;
		font-size: 140%;
		text-align: right;
		margin: 3px 5px 2px 0;
}


/* コンテンツ */
	.container {
		margin-left: 220px;
		margin-top: 0;
}
	.wrapper {
		max-width: 1200px;
		padding: 80px 20px;
		margin: 0 auto;
}


/*-------------------------------------------
トップページ
-------------------------------------------*/
	#toppage {
		text-align: center;
		z-index: -10;
		padding: 10px;
		padding-bottom: 0;
}
	#toppage .wrapper {
		max-width: 1200px;
		height: auto;
		padding: 0;
		margin: auto;
}
	h1 {
		text-align: right;
		color: #678;
}

	.sec-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 200%;
		margin-bottom: 40px;
		text-align: center;
		color: #333;
}
	.sec-title:before,
	.sec-title:after {
		border-top: 1px solid;
		content: "";
		width: 28%;
}

.topmessage {
  text-align:left;
  color: #346;
  display: inline-block;
  background: linear-gradient(90deg, #1F2F54, #64A6F0 30%, #1F2F54);
  background: -webkit-linear-gradient(90deg, #1F2F54, #64A6F0 30%, #1F2F54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size:280%;
  font-weight: bold;
  margin: 0;
}

.topabout{
  text-align:left;
  display: block;
  color: #678;
  font-size:150%;
  margin: 0;
  margin-top: 20px;
}
.topabout2{
  text-align:left;
  display: block;
  color: #678;
  font-size:100%;
  margin: 0;
}


/* 背景グラデーション */
	.project {
		background: linear-gradient(rgba(100,200,270,0),rgba(100,200,270,50%));
		color: #333;
}
	.project .list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
}
	.project .list li {
		width: 47%;
		border: solid 1px #fff;
		margin-bottom: 50px;
		position: relative;
}
/* 下段2つ */
	.project .list li:last-child,
	.project .list li:nth-last-child(2) {
		margin-bottom: 0;
}
	.project .list li a {
		display: block;
}

/* 下テキストの影 */
	.project .list li a:after {
		content: "";
		box-shadow: 0 -30px 15px -1px #2e2e2e inset;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
}
	.project .list .name {
		color: #fff;
		font-size: 100%;
		position: absolute;
		bottom: 4px;
		left: 7px;
		z-index: 5;
}


/*-------------------------------------------
フッター
-------------------------------------------*/
	.footer {
		background-color: #035;
		color: #fff;
		padding: 10px 0;
}
	.footer .menu {
		display: flex;
		justify-content: center;
		margin: 20px 0 50px 0;
}
	.footer .menu li {
		border-right: solid 1px #fff;
		font-size: 100%;
		padding: 0 20px;
}
	.footer .menu li:last-child {
		border-right: none;
}
	.footer .menu li a {
		color: #fff;
}
	.footer .copyright {
		font-size: 75%;
		text-align: center;
}

/*-------------------------------------------
サービス案内とプラン料金
-------------------------------------------*/
	#price {
		background: linear-gradient(rgba(100,200,270,20%),rgba(100,200,270,0));
		color: #333;
}

	.pricetop{
		width: 100%;
		height: 50%;
		margin-bottom: 40px;
}
	.line-grad {
		height: 2px;
	background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#447799), to(transparent));
	background-image: linear-gradient(to right, transparent, #447799, transparent);
	margin-top: 10px;
	margin-bottom: 10px;
}
	.line-dash {
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #447799 0, #447799 1px, transparent 0, transparent 50%);
	background-size: 10px 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

	#price a,
	#price p,
	.course-t,
	.course-m {
		display: block;
		margin: auto;
		padding: auto;
		color: #333;
}
	.course-t {
		font-size: 160%;
		padding-top: 5px;
		padding-bottom: 5px;
}
	.course-m {
		font-size: 130%;
	margin-bottom: 20px;
}
	#price table {
		width: 100%;
}

	#price table th,
	#price table td {
		border: 1px solid #ccc;
		padding: 3px;
		background-color: #fff;
		text-align: left;
}

	#price table th {
		min-width: 90px;
		padding: 5px 10px;
		color: #fff;
		font-weight: bold;
		background-color: #457;
}
	#price table td {
		padding: 15px 10px;
}

	.bikou {
		width: 60%;
}




/*-------------------------------------------
会社概要
-------------------------------------------*/
	#company {
		background: linear-gradient(rgba(100,200,270,0),rgba(100,200,270,50%));
		color: #333;
}

	#company table {
		width: 100%;
}

	#company table th,
	#company table td {
		border: 1px solid #ccc;
		padding: 20px;
		background-color: #fff; 
}

	#company table th {
		min-width: 70px;
		color: #fff;
		font-weight: bold;
		background-color: #346; 
}

.gmap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 60%;
  margin-bottom: 10px;
}

.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*-------------------------------------------
プライバシーポリシー
-------------------------------------------*/
.pp h2 {
  margin-bottom: 10px;
  font-size:120%;
  color: #678;
}
.pp p {
  text-align:left;
  display: block;
  color: #678;
  font-size:90%;
  margin: 20px 0;
}


/*-------------------------------------------
welcome
-------------------------------------------*/
.soon {
  font-family: YuGothic, 游ゴシック,"Yu Gothic", "Noto Sans Japanese", sans-serif;
  color: #346;
  display: inline-block;
  background: linear-gradient(90deg, #1F2F54, #64A6F0 30%, #1F2F54);
  background: -webkit-linear-gradient(90deg, #1F2F54, #64A6F0 30%, #1F2F54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size:250%;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

.text-focus-in-1 {
  -webkit-animation: text-focus-in-1 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
          animation: text-focus-in-1 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes text-focus-in-1 {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in-1 {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.text-focus-in-2 {
  -webkit-animation: text-focus-in-2 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
          animation: text-focus-in-2 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation-delay: 2s;
}
@-webkit-keyframes text-focus-in-2 {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in-2 {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.text-focus-in-3 {
  -webkit-animation: text-focus-in-3 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
          animation: text-focus-in-3 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation-delay: 5s;
}
@-webkit-keyframes text-focus-in-3 {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in-3 {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.text-focus-in-4 {
  -webkit-animation: text-focus-in-4 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
          animation: text-focus-in-4 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation-delay: 6s;
}
@-webkit-keyframes text-focus-in-4 {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in-4 {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}









/*-----------------↓可変↓--------------------*/
@media screen and (max-width: 960px) {
/*-----------------↓可変↓--------------------*/

	.container {
		margin-left: 0;
		margin-top: 110px;
}
	.wrapper {
		padding: 60px 20px;
}
	.site-title {
		width: 160px;
		margin-bottom: 0;
		position: relative;
		left: 5px;
		top: 5px;
}
	.sec-title {
		font-size: 200%;
		margin-bottom: 30px;
}
	.sec-title:before,
	.sec-title:after {
		width: 18%;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
	.header {
		width: 100%;
		height: 110px;
		background-color: #479;
		background: linear-gradient(to bottom, #447799 80%, rgba(100,200,270,50%));
		padding: 0;
		z-index: 10;
}

	.header nav {
		display: none;
}

	.logo {
		margin-left: 10px;
}


	.tell {
		display: block;
		display: block;
		border-top: solid 2px #fff;
		border-bottom: solid 2px #fff;
		padding: 3px 0;
		margin: 0;
		width: auto;
		font-size: 130%;
		line-height: 130%;
		position: absolute;
		right: 30px;
		top: 20px;
}
	.tel{
		display: block;
		font-size: 140%;
		text-align: right;
		margin: 2px 5px 2px 0;
}

/*-------------------------------------------
Project
-------------------------------------------*/
	.project .list {
		flex-direction: column;
}
	.project .list li {
		width: 100%;
		margin-bottom: 30px;
}
	.project .list li:nth-last-child(2) {
		margin-bottom: 30px;
}







/*-------------------------------------------
サービスプラン案内
-------------------------------------------*/
	#price table th {
		min-width: 70px;
}





/*-------------------------------------------
フッター
-------------------------------------------*/
	.footer .menu {
		flex-wrap: wrap;
}
	.footer .menu li {
		margin-bottom: 10px;
}









.soon {
  font-size:160%;
}
.topmessage {
  font-size:260%;
}



/*-----------------↑可変↑--------------------*/
}
/*-----------------↑可変↑--------------------*/