/* =======================================
   JL Corporation Website
   style.css
======================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{

  scroll-behavior:smooth;

}

body{

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

  color:#222;

  background:#fff;

  line-height:1.8;

}

/* ========================= */

a{

  text-decoration:none;

  color:inherit;

}

img{

  display:block;

  width:100%;

}

.container{

  width:90%;

  max-width:1300px;

  margin:auto;

}

section{

  padding:100px 0;

}

/* ========================= */

.section-title{

  text-align:center;

  margin-bottom:60px;

}

.section-title span{

  color:#f59e0b;

  font-size:15px;

  letter-spacing:2px;

  font-weight:bold;

}

.section-title h2{

  font-size:42px;

  margin-top:15px;

  font-weight:700;

}

/* ========================= */
/* Header */
/* ========================= */

header{

  position:fixed;

  top:0;

  left:0;

  width:100%;

  z-index:999;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(12px);

  transition:.35s;

  box-shadow:0 1px 12px rgba(0,0,0,.05);

}

header .container{

  display:flex;

  justify-content:space-between;

  align-items:center;

  height:90px;

}

/* Logo */

.logo{

  display:flex;

  align-items:center;

}

.logo img{

  height:122px;

  width:auto;

  transition:.3s;

}

.logo:hover img{

  transform:scale(1.05);

}

/* Navigation */

nav ul{

  display:flex;

  gap:42px;

  list-style:none;

}

nav li{

  position:relative;

}

nav a{

  font-size:15px;

  font-weight:500;

  transition:.3s;

}

nav a:hover{

  color:#f59e0b;

}

nav li::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-10px;

  width:0;

  height:2px;

  background:#f59e0b;

  transition:.35s;

}

nav li:hover::after{

  width:100%;

}
/* ========================= */
/* Header SNS */
/* ========================= */

.header-sns{

  display:flex;

  align-items:center;

  gap:18px;

}

.header-sns a{

  display:flex;

  align-items:center;

  justify-content:center;

}

.header-sns img{

  width:32px;

  height:32px;

  object-fit:contain;

  transition:.3s;

}

.header-sns img:hover{

  transform:scale(1.15);

  opacity:.8;

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

.hero{

  height:100vh;

  background:url("../images/hero.jpg");

  background-size:cover;

  background-position:center;

  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

}

.hero::before{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.35);

}

.hero-overlay{

  position:relative;

  color:#fff;

  text-align:center;

  z-index:10;

}

.hero-overlay h1{

  font-size:110px;

  font-weight:700;

  letter-spacing:8px;

}

.hero-overlay p{

  font-size:24px;

  margin-top:20px;

  margin-bottom:40px;

}

.hero-btn{

  display:inline-block;

  padding:18px 48px;

  border-radius:50px;

  background:#f59e0b;

  color:white;

  transition:.35s;

  font-size:16px;

  font-weight:500;

}

.hero-btn:hover{

  transform:translateY(-5px);

  background:#e78f00;

  box-shadow:0 15px 30px rgba(245,158,11,.35);

}

/* Scroll Down */

.hero::after{

  content:"";

  position:absolute;

  bottom:35px;

  left:50%;

  width:22px;

  height:36px;

  border:2px solid white;

  border-radius:30px;

  transform:translateX(-50%);

}

.hero::before{
  animation:none;
}

/* ========================= */
/* ABOUT */
/* ========================= */

.about{

  background:#fff;

}

.about-content{

  display:grid;

  grid-template-columns:1.2fr 1fr;

  gap:80px;

  align-items:center;

}

.about-text h3{

  font-size:28px;

  margin-bottom:25px;

  color:#f59e0b;

}

.about-text p{

  margin-bottom:25px;

  color:#666;

  font-size:16px;

}

.about-image{

  overflow:hidden;

  border-radius:28px;

  box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.about-image img{

  transition:.5s;

}

.about-image:hover img{

  transform:scale(1.08);

}

/* ========================= */
/* OUR STRENGTH */
/* ========================= */

.strength{

  background:#fafafa;

}

.strength-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:30px;

}

.strength-card{

  background:#fff;

  padding:45px 35px;

  border-radius:28px;

  box-shadow:0 12px 30px rgba(0,0,0,.06);

  transition:.35s;

  text-align:center;

}

.strength-card:hover{

  transform:translateY(-10px);

  box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.number{

  font-size:64px;

  font-weight:700;

  color:#f59e0b;

  margin-bottom:20px;

}

.strength-card h3{

  font-size:22px;

  margin-bottom:15px;

}

.strength-card p{

  color:#666;

  font-size:15px;

  line-height:1.8;

}

/* ========================= */
/* PROPERTY */
/* ========================= */

.property{

  background:#fff;

}

.property-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:30px;

  margin-top:60px;

}

.property-card{

  display:block;

  background:#fff;

  overflow:hidden;

  border-radius:24px;

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

  transition:.35s;

}

.property-card:hover{

  transform:translateY(-10px);

  box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.property-card img{

  width:100%;

  aspect-ratio:4 / 3;

  object-fit:cover;

  transition:.45s;

}

.property-card:hover img{

  transform:scale(1.08);

}

.property-content{

  padding:22px;

  text-align:center;

}

.property-content h3{

  font-size:20px;

  font-weight:600;

  margin-bottom:12px;

}

.property-content span{

  color:#f59e0b;

  font-size:14px;

  letter-spacing:1px;

  transition:.3s;

}

.property-card:hover span{

  letter-spacing:2px;

}

/* ========================= */
/* PROPERTY TITLE */
/* ========================= */

.property .section-title{

  margin-bottom:20px;

}

/* ========================= */
/* BUTTON */
/* ========================= */

.more-btn{

  display:inline-block;

  margin-top:60px;

  padding:16px 45px;

  border:2px solid #f59e0b;

  border-radius:999px;

  color:#f59e0b;

  transition:.35s;

}

.more-btn:hover{

  background:#f59e0b;

  color:#fff;

}

/* ========================= */
/* IMAGE EFFECT */
/* ========================= */

.property-card img,
.about-image img{

  will-change:transform;

}

/* ========================= */
/* SECTION SPACING */
/* ========================= */

.about,
.strength,
.property{

  position:relative;

}

.about::after,
.strength::after{

  content:"";

  position:absolute;

  bottom:0;

  left:50%;

  width:80px;

  height:2px;

  background:#f59e0b;

  transform:translateX(-50%);

  opacity:.15;

}

/* ========================= */
/* COMPANY */
/* ========================= */

.company{

  background:#fafafa;

}

.company-table{

  max-width:900px;

  margin:60px auto 0;

  background:#fff;

  border-radius:25px;

  overflow:hidden;

  box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.company-item{

  display:grid;

  grid-template-columns:220px 1fr;

  border-bottom:1px solid #eee;

}

.company-item:last-child{

  border-bottom:none;

}

.company-item strong{

  background:#f8f8f8;

  padding:24px;

  font-size:16px;

  color:#333;

}

.company-item span{

  padding:24px;

  color:#666;

  line-height:2;

}

/* ========================= */
/* CONTACT */
/* ========================= */

.contact{

  background:#fff;

}

.contact form{

  max-width:750px;

  margin:50px auto 0;

  display:flex;

  flex-direction:column;

  gap:20px;

}

.contact input,

.contact textarea{

  width:100%;

  padding:18px 22px;

  border:1px solid #ddd;

  border-radius:15px;

  outline:none;

  font-size:15px;

  transition:.3s;

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

}

.contact input:focus,

.contact textarea:focus{

  border-color:#f59e0b;

  box-shadow:0 0 10px rgba(245,158,11,.15);

}

.contact textarea{

  resize:vertical;

  min-height:180px;

}

.contact button{

  width:220px;

  margin:auto;

  padding:18px;

  border:none;

  border-radius:999px;

  background:#f59e0b;

  color:#fff;

  cursor:pointer;

  font-size:16px;

  transition:.35s;

}

.contact button:hover{

  background:#dd8b05;

  transform:translateY(-3px);

}

/* ========================= */
/* FOOTER */
/* ========================= */

footer{

  background:#222;

  color:#fff;

  padding:60px 0 40px;

  text-align:center;

}

footer img{

  height:80px;

  width:auto;

  margin:auto;

  margin-bottom:20px;

}

footer p{

  color:#bbb;

  font-size:14px;

}

/* ========================= */
/* SCROLL ANIMATION */
/* ========================= */

.fade-up{

  opacity:0;

  transform:translateY(40px);

  transition:all .8s;

}

.fade-up.show{

  opacity:1;

  transform:translateY(0);

}

/* ========================= */
/* BACK TO TOP */
/* ========================= */

#topBtn{

  position:fixed;

  right:30px;

  bottom:30px;

  width:55px;

  height:55px;

  border:none;

  border-radius:50%;

  background:#f59e0b;

  color:#fff;

  cursor:pointer;

  display:none;

  font-size:20px;

  box-shadow:0 10px 25px rgba(0,0,0,.18);

  transition:.3s;

  z-index:999;

}

#topBtn:hover{

  transform:translateY(-5px);

}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:1200px){

  .strength-grid{

      grid-template-columns:repeat(2,1fr);

  }

  .property-grid{

      grid-template-columns:repeat(3,1fr);

  }

}

@media(max-width:900px){

  header .container{

      height:80px;

  }

  nav{

      display:none;

  }

  .hero-overlay h1{

      font-size:64px;

  }

  .hero-overlay p{

      font-size:18px;

  }

  .about-content{

      grid-template-columns:1fr;

  }

  .company-item{

      grid-template-columns:1fr;

  }

}

@media(max-width:768px){

  .strength-grid{

      grid-template-columns:1fr;

  }

  .property-grid{

      grid-template-columns:repeat(2,1fr);

  }

  .section-title h2{

      font-size:32px;

  }

}

@media(max-width:520px){

  .property-grid{

      grid-template-columns:1fr;

  }

  .hero-overlay h1{

      font-size:48px;

  }

  .hero-btn{

      padding:14px 35px;

  }

  .logo img{

      height:58px;

  }

}