:root {
    --bg: #ffffff;
    --text: #111315;
    --sub: #5f6368;
    --accent: #09f;
    --hover: #007acc;
    --hovertxt: #fff;
    --maxw: 1200px;
    --radius: 12px;
    --ease: cubic-bezier(.16, 1, .3, 1);
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box
}

.container {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 16px
}

/* Nav */
.nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 50
}

.nav_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    transition: background .25s var(--ease), border-color .25s var(--ease)
}

.nav.stuck .nav_inner {
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, .06)
}

.logo {
    font-weight: 800;
    letter-spacing: .04em
}

/* btn */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: 10px 16px;
    border-radius: var(--radius);
    text-decoration: none;
    color: #000;
    background: var(--accent);
    font-weight: 700;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
    border: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer
}

.btn:hover {
    transform: translateY(-1px)
}

.btn:hover {
    background: var(--hover);
    color: var(--hovertxt);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Hero */
.hero {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 120px 0 72px;
    position: relative;
    overflow: hidden
}

.hero_wrap {
    max-width: 880px;
    text-align: center;
    position: relative;
    z-index: 1
}

.hero h1 {
    font-weight: 900;
    font-size: clamp(28px, 6vw, 56px);
    line-height: 1.1;
    letter-spacing: .01em;
    margin: 0 0 16px
}

.hero h1 em {
    color: var(--accent);
    font-style: normal
}

.hero p {
    color: var(--sub);
    font-size: clamp(14px, 2.6vw, 18px);
    margin: 0 0 28px
}

.scroll_ind {
    position: absolute;
    bottom: 18px;
    left: 50%;
    translate: -50% 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 1
}

.scroll_ind svg {
    width: 18px;
    height: 18px;
    animation: float 1.6s var(--ease) infinite
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(8px)
    }
}

/* Hero background slideshow */
.hero_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    --count: 2;
    --step: 6s;
    --dur: calc(var(--count)*var(--step))
}

.hero_bg .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.02);
    filter: brightness(.76) contrast(1.06) saturate(1.05);
    animation: slidefade var(--dur) infinite both;
}

/* オーバーラップ付きの時間割（--dur は count*step のままでOK） */
@keyframes slide1 {
  0%   {opacity:1}
  30%  {opacity:1}  /* 1が見えている */
  35%  {opacity:0}  /* 1がフェードアウト（2のINと重ねる） */
  100% {opacity:0}
}
@keyframes slide2 {
  0%   {opacity:0}
  30%  {opacity:0}
  35%  {opacity:1}  /* 2がフェードイン開始（1のOUTと重ねる） */
  65%  {opacity:1}  /* 2が見えている */
  70%  {opacity:0}  /* 2がフェードアウト（3のINと重ねる） */
  100% {opacity:0}
}
@keyframes slide3 {
  0%   {opacity:0}
  65%  {opacity:0}
  70%  {opacity:1}  /* 3がフェードイン開始（2のOUTと重ねる） */
  100% {opacity:1}  /* ループ端で3が1のまま→次サイクル0%で1が1なのでギャップなし */
}

/* 初期状態（FOUC対策） */
.hero_bg .slide{ opacity:0; position:absolute; inset:0; background-size:cover; background-position:center; }
.hero_bg .slide:first-child{ opacity:1 }

/* アニメ割り当て（遅延なし・順序固定） */
.hero_bg .slide:nth-child(1){ animation: slide1 var(--dur) infinite both }
.hero_bg .slide:nth-child(2){ animation: slide2 var(--dur) infinite both }
.hero_bg .slide:nth-child(3){ animation: slide3 var(--dur) infinite both }

@media (max-width: 600px){
  .hero_bg .slide[data-i="0"] { background-position: 60% center; }
  .hero_bg .slide[data-i="1"] { background-position: 35% center; }
  .hero_bg .slide[data-i="2"] { background-position: 60% center; }
}

@keyframes slidefade {
    0% {
        opacity: 1
    }

    28% {
        opacity: 1
    }

    33% {
        opacity: 0
    }

    95% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/* Duotone overlay */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .46) 100%), linear-gradient(0deg, rgba(0, 153, 255, .16), rgba(0, 0, 0, 0));
    mix-blend-mode: multiply
}

/* Pattern switch (on .hero) */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: none;
    display: none
}

.hero.pattern_stripe::after {
    display: block;
    background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, rgba(0, 0, 0, 0) 2px 10px);
    mix-blend-mode: multiply
}

.hero.pattern_dot::after {
    display: block;
    background: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px) 0 0/12px 12px;
    mix-blend-mode: multiply
}

.hero.pattern_grid::after {
    display: block;
    background: repeating-linear-gradient(to right, rgba(0, 0, 0, .05) 0 1px, transparent 1px 12px), repeating-linear-gradient(to bottom, rgba(0, 0, 0, .05) 0 1px, transparent 1px 12px);
    mix-blend-mode: multiply
}

.hero .hero_wrap h1 {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .28)
}

.hero .hero_wrap p {
    color: rgba(255, 255, 255, .86);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .24)
}

/* Sections */
.section_pad {
    padding: 72px 0
}

.section_title {
    color: #111315;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase
}

.bar {
    width: 64px;
    height: 2px;
    background: var(--accent)
}

/* Services */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

@media (max-width:900px) {
    .cards {
        grid-template-columns: 1fr
    }
}

.card {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--radius);
    padding: 22px;
    background: rgba(0, 0, 0, .02);
    transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease)
}

.card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, .14);
    background: rgba(0, 0, 0, .03)
}

.card h3 {
    margin: 12px 0 8px;
    font-size: 18px
}

.card p {
    margin: 0;
    color: var(--sub);
    line-height: 1.7
}

.mini_cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none
}

.mini_cta svg {
    transition: transform .2s var(--ease)
}

.mini_cta:hover svg {
    transform: translateX(2px)
}

/* Contact */
.contact .contact_card {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--radius);
    padding: 24px;
    background: rgba(0, 0, 0, .02);
    display: grid;
    gap: 18px
}

.contact .contact_card form {
    display: grid;
    gap: 14px
}

.form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

@media (max-width:720px) {
    .form_row {
        grid-template-columns: 1fr
    }
}

.input {
    width: 100%;
    max-width: 100%;
    display: block;
    background: #fff;
    color: var(--text);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    padding: 12px 14px
}

.input::placeholder {
    color: #70757a
}

/* Contact CTA - arrow animation */
.btn_arrow {
    display: inline-flex;
    align-items: center;
    gap: .5em
}

.btn_label {
    transition: color .2s var(--ease)
}

.btn_arrows {
    display: inline-flex;
    gap: .15em;
    margin-left: .4em
}

/* 初期：2,3本目の矢印は背景色=ボタン色と同化 */
.btn_arrows .a2,
.btn_arrows .a3 {
    color: var(--accent)
}

.btn_arrows .a2:hover,
.btn_arrows .a3:hover {
    color: var(--hover)
}

/* ホバー時：5コマ疑似アニメ（0.2s×5=1s） */
.contact .btn_arrow:hover .btn_arrows .a1 {
    animation: a1_frames 1s steps(1) infinite
}

.contact .btn_arrow:hover .btn_arrows .a2 {
    animation: a2_frames 1s steps(1) infinite
}

.contact .btn_arrow:hover .btn_arrows .a3 {
    animation: a3_frames 1s steps(1) infinite
}



/* a1: 白→白→背→背→背 */
@keyframes a1_frames {

    0%,
    33.3% {
        color: #fff
    }

    33.4%,
    100% {
        color: var(--hover)
    }
}

/* a2: 背→白→白→背→背 */
@keyframes a2_frames {
    0% {
        color: var(--hover)
    }

    16.6%,
    50% {
        color: #fff
    }

    50.1%,
    100% {
        color: var(--hover)
    }
}

/* a3: 背→背→白→白→背 */
@keyframes a3_frames {

    0%,
    33.3% {
        color: var(--hover)
    }

    33.4%,
    83.3% {
        color: #fff
    }

    83.4%,
    100% {
        color: var(--hover)
    }

}

/* Footer */
footer {
    padding: 32px 0;
    color: #b5bac1;
    font-size: 12px
}

/* ===== CSS-only entrance animations (scroll-driven) ===== */
/* Default = visible (fail-safe) */
.reveal,
.io,
.split {
    opacity: 1;
    transform: none
}

@supports (animation-timeline: view()) {

    .reveal,
    .io {
        opacity: 0;
        transform: translateY(12px);
        animation: fadeUp 1ms both;
        animation-timing-function: var(--ease);
        animation-timeline: view();
        /* element timeline */
        animation-range: entry 20% cover 30%;
    }

    .split {
        opacity: 0;
        transform: translateY(10px);
        animation: fadeUp 1ms both;
        animation-timing-function: var(--ease);
        animation-timeline: view();
        animation-range: entry 0% cover 20%;
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(12px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    /* light stagger for siblings */
    .reveal:nth-of-type(2) {
        animation-delay: .06s
    }

    .reveal:nth-of-type(3) {
        animation-delay: .12s
    }

    .reveal:nth-of-type(4) {
        animation-delay: .18s
    }
}

/* SVG line draw demo */
.draw path {
    stroke: var(--accent);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 240;
    stroke-dashoffset: 240
}

.draw.in path {
    transition: stroke-dashoffset .8s var(--ease);
    stroke-dashoffset: 0
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* Testimonials */
.testimonials {
  grid-template-columns: repeat(3, 1fr);
}
.testimonials .card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonials .card p {
  font-style: italic;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.6;
}
.testimonials .card h3 {
  font-size: 14px;
  color: var(--sub);
  margin: 0;
}
@media (max-width: 900px) {
  .testimonials {
    grid-template-columns: 1fr;
  }
}

/* --- Hero loading handoff --- */
.hero_loading{
  position:absolute; inset:0; z-index:0;
  background:url('../img/hero_loading.svg') center/cover no-repeat;
  opacity:1; transition:opacity .45s var(--ease), visibility .45s var(--ease);
  visibility:visible;
}

/* スライドショーは準備完了まで非表示（フェードイン） */
.hero .hero_bg{ opacity:0; transition:opacity .45s var(--ease) }
.hero.ready .hero_bg{ opacity:1 }

/* 準備完了でローディングを消す */
.hero.ready .hero_loading{ opacity:0; visibility:hidden }

/* スライド開始の初期状態＆負の遅延で常に1枚目から */
.hero_bg .slide{ opacity:0 }
.hero_bg .slide:first-child{ opacity:1 } /* FOUC対策の見かけだけ */
.hero_bg .slide{
  animation: slidefade var(--dur) infinite both;
  animation-delay: calc(var(--i) * -1 * var(--step)); /* ←これで初期から正しいコマ */
}

/* 全ページのアンカー遷移をスムーズに */
html { scroll-behavior: smooth; }

/* アニメ苦手な人の配慮 */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}

/* 固定ヘッダー分のオフセット（数値はヘッダーの高さに合わせて調整） */
html { scroll-padding-top: 70px; }

.anchor { 
  scroll-margin-top: 70px;
  display: block;
}

.company_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .company_grid {
    grid-template-columns: 1fr;
  }
}
.company_info dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  margin: 0;
}
.company_info dt {
  font-weight: 700;
  color: var(--sub);
}
.company_info dd {
  margin: 0;
  color: var(--text);
}

.services_banner .banner_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  justify-items: center;
  align-items: center;
}

/* プレースホルダーBox */
.services_banner .banner_box {
  background: rgba(0,0,0,.05); /* 薄いグレー */
  border-radius: 8px;
  height: 60px;               /* 高さは揃える */
  width: 100%;                /* 幅はレスポンシブ */
  max-width: 160px;           /* 基本サイズ */
}

/* バリエーション（幅や比率を変える） */
.services_banner .banner_box.wide { max-width: 200px; }
.services_banner .banner_box.tall { max-width: 120px; height: 80px; }


/* =========================================================
   追補：當山式HTML（wrap > block > panel > card >= box）
   新しいHTML構造に合わせた定義（弱めの指定）
   ========================================================= */

/* 共通ボタン（HTMLで .btn_primary を使用） */
.btn_primary{
  display:inline-flex; align-items:center; gap:.5em;
  padding:10px 16px; border-radius: var(--radius);
  text-decoration:none; color:#000; background:var(--accent);
  font-weight:700; border:none; cursor:pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn_primary:hover{
  transform: translateY(-1px);
  background: var(--hover); color: var(--hovertxt);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* wrap（外枠/背景・縦余白） */
.wrap_common{ padding:72px 0; }
.wrap_hero{ padding:96px 0 72px; background:#f8fafc; }

/* Header */
.block_header{
  max-width: var(--maxw); margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.panel_brand img{ height:48px; width:auto; display:block; }
.panel_nav .box_navlist{
  list-style:none; margin:0; padding:0; display:flex; gap:20px;
}
.panel_nav .box_navlist a{ text-decoration:none; font-weight:700; }

/* Hero（テキストと画像の2カラム） */
.block_hero{
  max-width: var(--maxw); margin:0 auto; padding:0 16px;
  display:grid; gap:24px; grid-template-columns: 1.1fr .9fr; align-items:center;
}
@media (max-width: 900px){ .block_hero{ grid-template-columns: 1fr; } }
.panel_hero .hero_inner h1{ font-size: clamp(28px, 6vw, 48px); margin:0 0 12px; }
.panel_hero .hero_inner p{ color: var(--sub); margin:0 0 18px; }
.panel_hero-img img{ border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* What we do */
.block_service{ max-width: var(--maxw); margin:0 auto; padding:0 16px; }
.panel_service-list{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
@media (max-width:900px){ .panel_service-list{ grid-template-columns: 1fr; } }
.card_service{
  border:1px solid rgba(0,0,0,.08); border-radius: var(--radius);
  padding:22px; background: rgba(0,0,0,.02);
  display:flex; flex-direction:column; text-align:center;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.card_service:hover{ transform: translateY(-2px); border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.03); }
.card_service figure{ margin:0 0 10px; }
.card_service h3{ margin:12px 0 8px; font-size:18px; }
.card_service p{ margin:0; color: var(--sub); line-height:1.7; }
.box_actions{ margin-top:auto; padding-top:12px; }

/* ミニリンク */
.mini_link{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--text); text-decoration:none; font-weight:700;
}
.mini_link::before{ content:"▶"; font-size:.85rem; transition: transform .2s var(--ease); color: var(--accent); }
.mini_link:hover::before{ transform: translateX(2px); }

/* VOICE */
.block_voice{ max-width: var(--maxw); margin:0 auto; padding:0 16px; }
.panel_voice-list{
  display:grid; gap:18px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width:900px){ .panel_voice-list{ grid-template-columns: 1fr; } }
.card_voice{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius: var(--radius); padding:20px;
}
.card_voice .voice_text{ margin:0 0 10px; font-style: italic; }
.card_voice .voice_name{ margin:0; color: var(--sub); font-size:14px; }

/* CONTACT */
.block_contact{ max-width: var(--maxw); margin:0 auto; padding:0 16px; }
.panel_contact-form form{ max-width:720px; margin:0 auto; display:grid; gap:14px; }
.box_form input, .box_form textarea, .box_form select{
  width:100%; display:block; background:#fff; color: var(--text);
  border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:12px 14px;
}
.box_form input::placeholder, .box_form textarea::placeholder{ color:#70757a; }
.box_form input:focus, .box_form textarea:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,153,255,.15);
}
.req { color: red;}

/* COMPANY */
.block_company{ max-width: var(--maxw); margin:0 auto; padding:0 16px; }
.panel_company{
  display:grid; gap:24px; grid-template-columns: 1.2fr .8fr;
}
@media (max-width:900px){ .panel_company{ grid-template-columns: 1fr; } }
.box_map iframe{ width:100%; height:280px; border:0; border-radius: var(--radius); }
.box_info dl{
  display:grid; grid-template-columns:120px 1fr; gap:8px 16px; margin:0;
}
.box_info dt{ font-weight:700; color: var(--sub); }
.box_info dd{ margin:0; color: var(--text); }

/* FOOTER */
.block_footer{ max-width: var(--maxw); margin:0 auto; padding:0 16px; }
.copy{ text-align:center; color:#b5bac1; font-size:12px; }

/* ==== What we do 画像枠（共通） ==== */
/* 枠の比率は調整可：4/3, 16/9, 1/1 など */
:root { --service-aspect: 4 / 3; }

.card_service figure { margin: 0 0 12px; }

.box_img{
  width: 100%;
  aspect-ratio: var(--service-aspect);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0,0,0,.03);
  border-radius: 8px;
}

.box_img img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* 枠内に収める（トリミングしない） */
}

/* モバイルで少し縦を詰めたい場合（任意） */
@media (max-width: 600px){
  :root { --service-aspect: 3 / 2; }
}