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

    /* リセット */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
		padding-top:80px;
      font-family: 'Noto Sans JP', 'Roboto', sans-serif;
      background-color: #f5f5f5;
      color: #333;
      line-height: 1.6;
    }
    a {
      color: #090000;
      text-decoration: none;
    }
    a:hover {
      text-decoration: none;
    }


	/* main */
main{
	width:100%;
	height:auto;
	float:left;
	
	background: none;

}
    /* コンテナ */
    .container {
      width: 90%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 40px 0;
    }

  

   
    /* アイコンの簡易実装（SVGの代わり） */
    .icon-design::before {
      content: "📝";
      display: block;
      font-size: 48px;
      margin-bottom: 10px;
    }
    .icon-support::before {
      content: "🤝";
      display: block;
      font-size: 48px;
      margin-bottom: 10px;
    }
    .icon-maintenance::before {
      content: "⚙️";
      display: block;
      font-size: 48px;
      margin-bottom: 10px;
    }

/* PC版だけ表示 */
.section-nav {
  display: none;
}




.company-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 60px 20px;
  flex-wrap: wrap; /* スマホ対応 */
}

.company-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.company-content h2 {
  font-size: 2.5rem;
  color: #555;
  margin: 0;
  font-weight: bold;
}

.company-content p {
  font-size: 1.2rem;
  color: #555;
  font-weight: bold;
  margin: 0;
}



/* PC (1020px以上) のとき表示 */

@media (min-width: 1020px) {
	main{
		padding:10px 20px;
		box-sizing: border-box;
		background: none;
	}
	
	
	/* section top*/
	section.top{
		width:100%;
		padding:0;
		background: none;
		float: left;
		
	}
	
	
	div.catchcopy{
		width:60%;
		height: auto;
		padding:100px 10px 10px 10px;
		box-sizing: border-box;
		background: none;
		float: left;
	}
	
	div.header-buttons{
		width:40%;
		height:auto;
		margin-top: 130px;
		line-height: 3em;
		float: left;
		box-sizing: border-box;
		background: none;
		padding:10px;
		display: flex;
		  justify-content: center;
	}
	

	button{
		width: 30%;
		height:auto;
		line-height: 3em;
		padding: 3px;
		background: white;
		float: left;
		margin: 0 5px;
		display: block;
		
	}
	
	/* section top */
	
	
	  /* ヒーローセクション */
    .hero {
      background: none;
      color: white;
		float: left;
      padding: 80px 20px;
      text-align: center;
      border-radius: 12px;
      margin-bottom: 60px;
    }
   
.hero_img{
	
	width:70%;
	display: block;
	margin: 0 auto;	
}
	/* service */
	

.service-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 30px 20px;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-number {
  background: #130b09;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 2px;
  flex-shrink: 0;
}

.service-content {
  flex: 1;
}

.service-content h2 {
  font-size: 1.8rem;
  margin: 0 0 10px;
	line-height:3em;
  color: #333;
}

.service-content p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.service-arrow {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.circle-arrow {
  width: 120px;
  height: 120px;
  border: 1px solid #999;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  font-size: 2rem;
  color: #666;
	text-align: center;
}
	
	
	
	/* section itconsal */
	section.itconsal {
		width: 100%;
		height: 60vh;
		float: left;
		background: none;
		padding-top:100px;
		border-bottom: 30px solid yellow;
		
	}
	section.itconsal h2{
		width:100%;
		height:auto;
		line-height: 3em;
		text-align: center;
	}
	
	
	
	div.card{
		
		width: 100%;
		height:auto;
		float: left;
		background: green;
		padding: 20px;
		box-sizing: border-box;
	}
	
	div.step-title{
		width:100%;
		height:auto;
		float: left;
		background: red;
	}
	
	div.step-description {
		width:100%;
		height:auto;
		float: left;
		background: orange;
		
	}
	
	/*  section IT consal-- */
	
	
	/* section service */
	
	section.service {
		width:100%;
		height: 60vh;
		float: left;
		background: none;
		padding-top:100px;
		border-bottom: 30px solid yellow;
		
	}
	section.service h2{
		width:100%;
		height:auto;
		line-height: 3em;
		text-align: center;
	}
	
	
	
    /* サービス紹介 */
   
    .service-icon {
      font-size: 48px;
      margin-bottom: 18px;
      color: #0057b7;
    }
    .service-title {
      font-size: 1.5rem;
      margin-bottom: 12px;
      font-weight: 700;
    }
    .service-desc {
      font-size: 1rem;
      color: #555;
      line-height: 1.4;
    }

	
	
	/* section service-- */
	
	
	/*. inquiry */
	div.inquiry {
		width:100%;
		height:auto;
		float: left;
		paddin: 0 10px;
		box-sizing: border-box;
	}
	
	
	/* フッダー　スライドバー */
	
  .section-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #333;
    z-index: 1000;
  }

  .section-nav ul {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    margin: 0;
    list-style: none;
  }


  .section-nav a:hover {
    text-decoration: underline;
  }
	
	.section-nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 10px;
  transition: border-top 0.3s ease;
  border-top: 3px solid transparent;
}

.section-nav a.active {
  border-top: 3px solid #ff6600;
}
	
	/* スライドバー --*/
	
	
	
.company-image img {
  max-width: 620px;
  width: 70%;
  height: auto;
  border: 2px solid #0074ff; /* オプションで青い枠線 */
  box-sizing: border-box;
}

	
	
}


@media (max-width: 1020px) and (min-width: 768px) {
	
	main{
		padding:0px 20px;
		box-sizing: border-box;
		background: none;
	}
	
	
		div.catchcopy{
		width:60%;
		height: auto;
		padding:10px 10px 10px 10px;
		box-sizing: border-box;
		background: none;
		float: left;
	}
	div.header-buttons{
		width:40%;
		height:auto;
		margin-top: 30px;
		line-height: 3em;
		float: left;
		box-sizing: border-box;
		background: none;
		padding: 5px;
		display: flex;
		  justify-content: center;
	}
	

	button{
		width: 30%;
		height:auto;
		line-height: 3em;
		padding: 3px;
		background: white;
		float: left;
		margin: 0 5px;
		display: block;
		
	}
	
	section.top{
		padding-top: 20px;
	}
	
	
	.header-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

		.btn a {
  color: inherit;
  text-decoration: none;
  display: block;
}

		
		
.btn {
  padding: 10px 20px;
  border: none;
  margin: 5px;
  font-weight: bold;
  cursor: pointer;
}

.btn.white {
  background: #fff;
  border: 1px solid #ccc;
}

.btn.orange {
  background: orange;
  color: #fff;
}
		
	
	
	  /* ヒーローセクション */
    .hero {
      background: whitesmoke;
      color: white;
      padding: 80px 20px;
      text-align: center;
      border-radius: 12px;
      margin-bottom: 60px;
    }

.hero_img{
	
	width:80%;
	display: block;
	margin: 0 auto;
	
}
	/* service */
	

.service-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 30px 20px;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-number {
  background: #130b09;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 2px;
  flex-shrink: 0;
}

.service-content {
  flex: 1;
}

.service-content h2 {
  font-size: 1.8rem;
  margin: 0 0 10px;
  color: #333;
}

.service-content p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.service-arrow {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.circle-arrow {
  width: 120px;
  height: 120px;
  border: 1px solid #999;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  font-size: 2rem;
  color: #666;
	float: right;
}
	
	
	
    /* サービス紹介 */
    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
      gap: 30px;
      margin-bottom: 80px;
    }
    .service-icon {
      font-size: 48px;
      margin-bottom: 18px;
      color: #0057b7;
    }
    .service-title {
      font-size: 1.5rem;
      margin-bottom: 12px;
      font-weight: 700;
    }
    .service-desc {
      font-size: 1rem;
      color: #555;
      line-height: 1.4;
    }
	
	
	
	.company-image {
		width:100%;
		height:auto;
		box-sizing: border-box;
		
	}
	
	
	.company_img{
		width:80%;
		height:auto;
		display: block;
		margin: 0 auto;
	}
	
	
	
}
	
	

/* ========= スマホ用スタイル ========= */
@media screen and (max-width: 768px) {
	
	main{
		width:100%;
		height: auto;
		padding:0 20px;
		box-sizing: border-box;
	}
	
	
	.header-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

		.btn a {
  color: inherit;
  text-decoration: none;
  display: block;
}

		
		
.btn {
  padding: 10px 20px;
  border: none;
  margin: 5px;
  font-weight: bold;
  cursor: pointer;
}

.btn.white {
  background: #fff;
  border: 1px solid #ccc;
}

.btn.orange {
  background: orange;
  color: #fff;
}
		
	
	
	section.top{
		padding-top: 20px;
	}
	  /* ヒーローセクション */
    .hero {
      background:none;/* linear-gradient(135deg, #0057b7, #003f8a)*/
      color: white;
      padding: 80px 20px;
      text-align: center;
      border-radius: 12px;
      margin-bottom: 60px;
    }
  
	
	
      .hero h1 {
        font-size: 2.2rem;
      }
      .hero p {
        font-size: 1rem;
      }
	
	
    .hero .btn {
      display: inline-block;
      background-color: #ff6600;
      color: white;
      padding: 14px 36px;
      border-radius: 30px;
      font-weight: bold;
      font-size: 1.1rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
      border: none;
    }
    .hero .btn:hover {
      background-color: #e65c00;
    }
.hero_img{
	width:90%;
	display: block;
	margin: 0 auto;
}
	/* service */
	

.service-box {
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 30px 20px;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-number {
  background: #130b09;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  width: 50px;
  height: 50px;
	margin:0 auto;
	box-sizing: border-box;
	display: block;
  text-align: center;
  line-height: 50px;
  border-radius: 2px;
  flex-shrink: 0;
}

.service-content {
	width: 100%;
	height: auto;
  flex: 1;
}

.service-content h2 {
  font-size: 1.8rem;
  margin: 0 0 10px;
  color: #333;
}

.service-content p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}
	
	

.service-arrow {
  width: 50px;
  height: 50px;
  border: 1px solid #aaa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
	margin-top:10px;
}

	
.arrow {
  font-size: 2rem;
  color: #666;
	text-align: center;
	margin:10px 0px;
}
	
	

.circle-arrow {
  width: 100px;
  height: 100px;
  border: 1px solid #999;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
	margin-top:10px;
}

	
	
    /* サービス紹介 */
    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
      gap: 30px;
      margin-bottom: 80px;
    }
    .service-icon {
      font-size: 48px;
      margin-bottom: 18px;
      color: #0057b7;
    }
    .service-title {
      font-size: 1.5rem;
      margin-bottom: 12px;
      font-weight: 700;
    }
    .service-desc {
      font-size: 1rem;
      color: #555;
      line-height: 1.4;
    }
	
	
.company-image img {
  max-width: 320px;
  width: 70%;
  height: auto;
  border: 2px solid #0074ff; /* オプションで青い枠線 */
  box-sizing: border-box;
	display: block;
	margin: 0 auto;
}

	
	
	
}