/*
Theme Name: TTSTYLE2
Theme URI: https://example.com/
Author: Yosuke & Taro
Author URI: https://example.com/
Description: Minimal corporate theme inspired by Spiral-style. Elementor-friendly, bilingual-ready (JP/EN), clean animations.
Version: 1.0.0
Text Domain: ttstyle2
*/
html,body{height:100%;}
body{font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111; background:#fff; margin:0; line-height:1.6;}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* layout */
.container{max-width:1100px; margin:0 auto; padding:0 20px;}
.site-header{padding:22px 0; position:sticky; top:0; background:#fff; z-index:99; border-bottom:1px solid #eee;}
.site-logo{font-weight:700; letter-spacing:.08em; font-size:18px}
.main-nav{display:flex; gap:18px; font-size:14px}
.site-footer{border-top:1px solid #eee; color:#666}
.footer-row{display:flex; justify-content:space-between; gap:16px; align-items:center}

/* hero */
.hero{min-height:68vh; display:flex; align-items:center; position:relative; overflow:hidden; background:#f7f7f7;}
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; pointer-events:none;}
.hero__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.9) 70%);}
.hero__inner{position:relative; z-index:2; padding:80px 0;}
.hero__title{font-size:42px; font-weight:700; margin:0 0 10px;}
.hero__subtitle{font-size:16px; color:#444; margin:0 0 18px;}
.hero__cta{display:inline-block; padding:10px 18px; border:1px solid #111; border-radius:999px; font-size:14px}

/* sections */
.section{padding:80px 0;}
.section__hd{margin:0 0 26px}
.en{display:block; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#888;}
.jp{display:block; font-size:22px; font-weight:700; color:#111; margin-top:6px}

/* grids */
.grid{display:grid; gap:24px}
.grid--cards{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));}

/* animations */
.fade-in{opacity:0; transform:translateY(10px); transition:all .7s ease-out}
.fade-in.is-visible{opacity:1; transform:none}

/* responsive */
@media(max-width:768px){
  .main-nav{display:none}
  .hero{min-height:56vh}
  .hero__title{font-size:30px}
  .jp{font-size:20px}
}