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

    /* リセット */
    * { 
		margin:0; 
		padding:0; 
		box-sizing:border-box; 
}
    body { 
		font-family: 'Noto Sans JP', sans-serif; 
		line-height:1.6; 
		color:#333; 
		scroll-behavior:smooth; 
}

    a { 
		text-decoration:none; 
}

    /* ヒーロー */
    header {
        color:white; 
		text-align:center; 
		display:flex; 
		align-items:center; 
		justify-content:center; 
		position:relative;
		background: linear-gradient(360deg, #0d1b2a, #044acf);
		height: 100vh;
}
    header::after {
        content:""; 
		position:absolute; 
		top:0; 
		left:0; 
		width:100%; 
		height:100%; 
		background:rgba(0,0,0,0.5);
}
    header div { 
		position:relative; 
		z-index:1; 
}
    header h1 { 
		font-size:3rem; 
		margin-bottom:20px; 
}
    header p { 
		font-size:1.5rem; 
		margin-bottom:40px; 
}
    .cta {
        background: linear-gradient(45deg,#007bff,#00d4ff);
        color:white; padding:18px 50px; border-radius:50px; font-weight:bold;
        display:inline-block; transition:0.5s; box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

    .cta:hover { 
		transform: scale(1.05); 
		box-shadow:0 10px 30px rgba(0,0,0,0.4); 
}

    /* 共通セクション */
    section { 
		max-width:1200px; 
		margin:0 auto; 
		padding:40px 20px;
}
    h2 { 
		text-align:center; 
		margin-bottom:60px; 
		font-size:2.5rem; 
		color:#007bff; 
}

    /* 特長 */
    .features { 
		display:grid; 
		gap:40px; 
		grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); 
}
    .features div { 
		background:#f9f9f9; 
		padding:40px 20px; 
		border-radius:15px; 
		text-align:center; 
		transition:0.5s; 
		box-shadow:0 5px 15px rgba(0,0,0,0.1); 
}
    .features div:hover { 
		transform: translateY(-15px); 
		box-shadow:0 15px 30px rgba(0,0,0,0.2); 
}
    .features img { 
		width:50px; 
		margin-bottom:15px; 
}

.detail{
		background:#f9f9f9; 
		padding:20px; 
		border-radius:15px; 
		text-align:center; 
		transition:0.5s; 
		box-shadow:0 5px 15px rgba(0,0,0,0.1); 
	margin-bottom: 20px;
}

#gallery_tab{
	margin-top: 20px;
	margin-bottom: 20px;
}

.category-btn{
color:#000;
	font-size:16px;
}

.category-btn:hover{
	background-color: rgb(0, 120, 215);
	color: #fff;
	transform: scale(1.1);
}

#works-grid div{
		background:#f9f9f9; 
		padding:40px 20px; 
		border-radius:15px; 
		text-align:center; 
		transition:0.5s; 
		box-shadow:0 5px 15px rgba(0,0,0,0.1); 
	margin: 10px;
}

    #works-grid { 
		display:grid; 
		grid-template-columns: repeat(3, 1fr); 
		overflow: hidden;
		transition: max-height 0.5s ease;
}

.work-item{
	transition-duration:0.5s;
}

#works-grid img{
	max-width: 250px;
	width: 100%;
}

.show-more {
  background-color: #0078d7 !important;
  color: white;
  border: none;
  padding: 10px 20px !important;
  margin-top: 10px !important;
  border-radius: 5px !important;
  cursor: pointer;
  font-size: 16px;
}

/* ✅ 選択中（押されたタブ）のスタイル */
.category-btn.active {
  background-color: #464646; /* 好きな色に変更可 */
  color: #fff;
}

@media(min-width:651px){
	#show-more-btn{
		display:none;
	}
	.sp{
		display: none;
	}
}
@media(max-width:650px){

    #works-grid { 
		    grid-template-columns: repeat(2, 1fr); 
}
	  #works-grid.collapsed {
    max-height: 500px; /* ←見せたい高さに調整 */
  }
}

@media(max-width:560px){
#works-grid img{
	max-width: 200px;
}
    #works-grid { 
		    grid-template-columns: repeat(1, 1fr); 
}
}



    .suggest { 
		display:grid; 
		gap:30px; 
		    grid-template-columns: repeat(2, 1fr); 
}

    .suggest div { 
		background:#f9f9f9; 
		padding:40px 20px; 
		border-radius:15px; 
		text-align:center; 
		transition:0.5s; 
		box-shadow:0 5px 15px rgba(0,0,0,0.1); 
}
    .suggest div:hover { 
		transform: translateY(-15px); 
		box-shadow:0 15px 30px rgba(0,0,0,0.2); 
}

    /* ギャラリー */
    .gallery { 
		display:grid; 
		gap:30px; 
		    grid-template-columns: repeat(4, 1fr); 
}
    .gallery img { 
		width:100%; 
		border-radius:15px; 
		transition:0.3s; 
		box-shadow:0 5px 15px rgba(0,0,0,0.1); 
}
    .gallery img:hover { 
		transform: scale(1.05); 
}

    /* スクロール */
    .scroll-container {
      width: 100%;
      overflow: hidden;
      background: #fff;
      white-space: nowrap;
		margin-bottom: 20px;
    }

    .scroll-content {
      display: inline-block;
      animation: scroll 40s linear infinite;
    }

    .scroll-content img {
      height: 150px;
      margin: 0 10px;
      vertical-align: middle;
    }

    @keyframes scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }



    /* スペック */
    .specs { 
		background: linear-gradient(180deg,#f0f8ff,#ffffff); 
		border-radius:15px; 
		padding:60px 20px; 
}
    .specs table { 
		width:100%; 
		border-collapse: 
			collapse; margin-top:30px; 
		font-size:1.1rem; 
}
    .specs th, .specs td { 
		border:1px solid #ccc; 
		padding:15px; 
		text-align:left; 
}
    .specs th { 
		background:#e6f2ff; 
}

    /* ワンストップ */
    .one-stop { 
		background:#f4f9ff; 
		text-align:center; 
		padding:80px 20px; 
		border-radius:15px; 
		font-size:1.2rem; 
}

    /* ステップ */
    .steps { 
		display:grid; 
		gap:30px; 
		grid-template-columns: repeat(4, 1fr);
		text-align:center; 
}
    .steps div { 
		background:#fff4e6; 
		padding:40px 20px; 
		border-radius:15px; 
		transition:0.5s; 
		font-size:1.1rem; 
		box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
    .steps div:hover { 
		transform: translateY(-15px); 
}
.center{
	text-align: center;
}

.btn{
	    background:#f26539 ;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px #1018280f;
	font-size:1.5em;
}
    .btn:hover {
		box-shadow:0 10px 30px rgba(0,0,0,0.4); 
}

.circleb{
	    border-radius: 50%;
    background-color: #167ac6;
}
.circleb h2{
	color: #fff;
}
.youtube{
	width:560px;
	height:315px;
}
#contact{
	padding-bottom: 100px;
	background-color: #f6faf9;
	border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}

.icon{
	max-height:100px;
}

.lcol{
	width: 50%;
	float: left;
	padding-bottom: 15px;
}

.lcol img{
	width: 80%;
	margin: 0 auto;
	border-radius: 20px;
}

.rcol{
	width:50%;
	float: right;
	padding-bottom: 15px;
}
    /* お問い合わせフォーム */
    form { display:flex; flex-direction:column; max-width:600px; margin:0 auto; gap:20px; }
    input, textarea { padding:15px; font-size:1rem; border-radius:10px; border:1px solid #ccc; }
    button {color:white; padding:18px; border:none; cursor:pointer; font-size:1.1rem; transition:0.5s; margin:10px 0;}

    /* フッター */
    footer { background:#222; color:white; text-align:center; padding:60px 20px; }
    footer a { color:#00d4ff; text-decoration:none; margin:0 15px; font-weight:bold; }

    /* アニメーション */
    .fade-in { opacity:0; transform:translateY(50px); transition: all 1s ease-out; }
    .fade-in.visible { opacity:1; transform:translateY(0); }

    /* レスポンシブ */
    @media(max-width:768px){
        header h1 { font-size:2rem; }
        header p { font-size:1.2rem; }
        h2 { font-size:2rem; margin-bottom:40px; }
		
		.lcol{
	width: 100%;
	padding-bottom: 15px;
}
		.youtube{
			width: 100%;
		}
.rcol{
	width:100%;
	padding-bottom: 15px;
}
		
		.circleb{
			border-radius: 10%;
}
	.machine_detail{
		margin:0 auto;
	}
    }

@media(max-width:560px){
	
    section {  
		padding:40px 20px;
}
	
	    .gallery { 
		    grid-template-columns: repeat(2, 1fr); 
}
	
    .steps { 
	grid-template-columns: repeat(2, 1fr);

}
	.machine_detail{
		margin:20px 10px;
	}
	.onestop{
		margin-top:20px;
		border-radius:0;
	}
	.contact{
		margin-top:20px;
		border-radius:0;
	}
	#contact{
	border-radius: 0;
}

}
/* ===========================
   高級感＋ラインアニメーション追加
=========================== */

body {
  background: linear-gradient(180deg, #0d1b2a, #1b263b);
}

/* Hero */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}
.logo {
  width: 300px;
  margin-bottom: 30px;
display: inline;

}
header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 70%, rgba(255,255,255,0.05), transparent 70%);
  z-index: 1;
}

/* Title styling */
header h1 {
  background: linear-gradient(90deg, #ffffff, #9eb9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 15px;
}
header p {
  font-size: 1.3rem;
  opacity: 0.9;
}

/* CTA */
.cta {
  background: linear-gradient(90deg, #c0c0c0, #f8f9fa);
  color: #000;
  border-radius: 50px;
  padding: 15px 50px;
  font-weight: bold;
  transition: 0.5s;
  box-shadow: 0 5px 15px rgba(255,255,255,0.15);
}
.cta:hover {
  background: linear-gradient(90deg, #ffffff, #d4d4d4);
  box-shadow: 0 10px 25px rgba(255,255,255,0.25);
  transform: translateY(-4px);
}

/* SVGライン */
.hero-line, .section-line {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
}
.hero-line path, .section-line path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: lineDraw 6s ease forwards infinite alternate;
}
@keyframes lineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* セクション背景 */
section {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 60px 30px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  margin-bottom: 60px;
}
h2 {
  color: #b0c4de;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}


/* お問い合わせボタン */
.contact-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #0078ff;
  color: white;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  z-index: 9999;
}

.contact-button.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.contact-button:hover {
  background-color: #005fcc;
  transform: translateY(-3px);
}
@media (max-width: 600px) {
  .contact-button {
    padding: 10px 16px;
    font-size: 14px;
    bottom: 15px;
    right: 15px;
  }
}