/* style.css */

/* =========================
   Base Variables
========================= */

:root{

  --main-color:#111827;
  --accent-color:#2563eb;
  --bg-light:#eff6ff;
  --text-color:#374151;

}

/* =========================
   Theme Colors
========================= */

body[data-theme="blue"]{

  --accent-color:#2563eb;
  --main-color:#111827;
  --bg-light:#eff6ff;

}

body[data-theme="green"]{

  --accent-color:#16a34a;
  --main-color:#052e16;
  --bg-light:#f0fdf4;

}

body[data-theme="mono"]{

  --accent-color:#525252;
  --main-color:#111111;
  --bg-light:#f5f5f5;

}

body[data-theme="orange"]{

  --accent-color:#ea580c;
  --main-color:#431407;
  --bg-light:#fff7ed;

}

/* =========================
   Font Themes
========================= */

body[data-font="modern"]{

  font-family:
    'Inter',
    'Noto Sans JP',
    sans-serif;

}

body[data-font="elegant"]{

  font-family:
    'Noto Serif JP',
    serif;

}

body[data-font="classic"]{

  font-family:
    'Yu Mincho',
    'Hiragino Mincho ProN',
    serif;

}

body[data-font="simple"]{

  font-family:
    'Noto Sans JP',
    sans-serif;

}

/* =========================
   Global
========================= */

html{
  scroll-behavior:smooth;
}

body{
  color:var(--text-color);
  line-height:1.8;
}

img{
  max-width:100%;
  display:block;
}

/* =========================
   Navbar
========================= */

.navbar{

  background:rgba(255,255,255,0.9);

  backdrop-filter:blur(12px);

  box-shadow:0 2px 12px rgba(0,0,0,0.05);

  padding:16px 0;

}

.logo{

  font-size:1.4rem;
  font-weight:700;
  text-decoration:none;
  color:var(--main-color);

}

.nav-link{

  color:var(--main-color);
  margin-left:20px;
  font-weight:500;

}

.nav-link:hover{
  color:var(--accent-color);
}

/* =========================
   Hero
========================= */

.hero{

  position:relative;

  min-height:100vh;

  display:flex;

  align-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      rgba(0,0,0,0.45),
      rgba(0,0,0,0.45)
    ),
    var(--hero-image)
    center center / cover no-repeat;

}
.hero::before{

  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      rgba(0,0,0,0.45),
      rgba(0,0,0,0.45)
    ),
    url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1600&auto=format&fit=crop')
    center center / cover no-repeat;

}

.hero-inner{
  position:relative;
  z-index:2;
}


.hero-label{

  letter-spacing:0.14em;
  font-size:0.85rem;
  margin-bottom:20px;

}

.hero-title{

  font-size:clamp(2.5rem,6vw,5rem);

  line-height:1.1;
  font-weight:700;

  margin-bottom:28px;

}

.hero-text{

  font-size:1.1rem;
  opacity:0.92;

  margin-bottom:40px;

}

.hero-btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:14px 34px;

  border-radius:999px;

  background:#fff;

  color:#111827;

  text-decoration:none;
  font-weight:600;

}

.hero-btn:hover{
  background:#f3f4f6;
}


/* =========================
   Hero Align
========================= */

.hero-content{



  color:#fff;

}

/* Left */

.hero-left{

  margin-right:auto;

  text-align:left;
	  max-width:760px;
	

}

/* Center */

.hero-center{

  margin-left:auto;
  margin-right:auto;

  text-align:center;
	 max-width:1200px;

}

/* Right */

.hero-right{

  margin-left:auto;

  text-align:right;
	  max-width:760px;

}


/* =========================
   Sections
========================= */

.section,
.content-section{

  padding:120px 0;

}

.section-head{
  margin-bottom:60px;
}

.section-label{

  color:var(--accent-color);

  letter-spacing:0.12em;

  font-size:0.85rem;
  font-weight:700;

  margin-bottom:16px;

}

.section-title{

  font-size:clamp(2rem,5vw,3rem);

  font-weight:700;

  color:var(--main-color);

}

.bg-light-custom{
  background:var(--bg-light);
}

/* =========================
   Feature
========================= */

.content-image img{

  width:100%;
  height:540px;

  object-fit:cover;

  border-radius:28px;

}

.feature-title{

  font-size:clamp(2rem,4vw,3rem);

  line-height:1.3;
  font-weight:700;

  color:var(--main-color);

  margin-bottom:24px;

}

.feature-text{

  color:#6b7280;

  margin-bottom:36px;

}

.content-btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:14px 32px;

  border-radius:999px;

  background:var(--main-color);

  color:#fff;

  text-decoration:none;
  font-weight:600;

}

.content-btn:hover{

  background:var(--accent-color);
  color:#fff;

}

/* =========================
   News
========================= */

.news-card{

  background:#fff;

  border-radius:28px;

  padding:34px;

  height:100%;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.05);

}

.news-date{

  font-size:0.9rem;

  color:#6b7280;

  margin-bottom:12px;

}

/* =========================
   Services
========================= */

.service-card{

  background:#fff;

  border-radius:28px;

  overflow:hidden;

  height:100%;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.05);

}

.service-image-wrap{

  width:100%;
  height:240px;

  overflow:hidden;

}

.service-image{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:0.4s;

}

.service-card:hover .service-image{

  transform:scale(1.05);

}

.service-number{

  width:72px;
  height:72px;

  margin:
    -36px auto 24px;

  position:relative;
  z-index:2;

  border-radius:20px;

  display:flex;

  align-items:center;
  justify-content:center;

  background:#fff;

  color:var(--accent-color);

  font-size:1.3rem;
  font-weight:700;

  box-shadow:
    0 10px 20px rgba(0,0,0,0.08);

}

.service-title{

  text-align:center;

  font-size:1.4rem;
  font-weight:700;

  color:var(--main-color);

  margin-bottom:18px;

  padding:
    0 24px;

}

.service-text{

  text-align:center;

  color:#6b7280;

  padding:
    0 24px 36px;

}
/* =========================
   Company
========================= */

.company-box{

  background:#fff;

  border-radius:28px;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.05);

}

.company-table th{

  width:30%;

  background:#f3f4f6;

}

.company-table th,
.company-table td{

  padding:22px;

}

/* =========================
   Contact
========================= */

.contact-box{

  background:#fff;

  border-radius:28px;

  padding:50px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.05);

}

.form-control{

  border-radius:14px;

  padding:14px;

}

.btn-submit{

  border:none;

  border-radius:999px;

  padding:14px 40px;

  background:var(--main-color);

  color:#fff;

  font-weight:600;

}

.btn-submit:hover{
  background:var(--accent-color);
}

/* =========================
   Footer
========================= */

.footer{

  background:var(--main-color);

  color:#fff;

  padding:30px 0;

  text-align:center;

}

/* =========================
   Mobile
========================= */

@media(max-width:991px){

  .hero{
    padding:140px 0 80px;
  }

  .content-image img{
    height:360px;
  }

  .contact-box{
    padding:32px;
  }

}