@charset "UTF-8";

body{
    overflow-x: hidden;
    background-color: var(--color-body);
}

/* =========================
  スクロールアニメーションJS
========================= */

/* =========================
   共通：初期状態
========================= */
.js-animate{
  opacity:0;
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

/* =========================
   ① その場でふわっと出る
========================= */
.fade-in{
  transform:translateY(0);
}

.fade-in.is-active{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   ② 下からふわっと出る
========================= */
.fade-up{
  transform:translateY(40px);
}

.fade-up.is-active{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   ちょいリッチ（任意）
========================= */
.fade-up{
  transition:
    opacity 1.3s ease,
    transform 1.3s cubic-bezier(.22,1,.36,1);
}


/* =========================
   トップビュー
========================= */
.top-view{
  display:flex;
  flex-direction:column;
    position:relative;
}

/* =========================
   画像（100%幅 + 潰れない）
========================= */
.visual{
  width:100%;

  /* ↓そのまま活かす */
  min-height:420px;
  aspect-ratio: 16 / 7;
  position:relative;
  /* ★これ追加 */
  max-height:60vh;

  overflow:hidden;
}

/* スライド */
.flow-slider{
  width:100%;
  height:100%;
}

.flow-track{
  display:flex;
  height:100%;
  width:max-content; /* ← これ重要 */
  animation: flow 60s linear infinite; /* 少し遅くすると自然 */
}

.flow-track img{
  width:50vw;
  height:100%;
  object-fit:cover;
  opacity:.6;
  flex-shrink:0; /* ← 潰れ防止 */
}

/* ★ここが本質 */
@keyframes flow{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

/* 初期位置（左上） */
.main-logo{
  position:fixed; /* ← 最初からfixedにするのがポイント */
  top:40px;
  left:60px;
  z-index:20000 !important;

  opacity:1;
  transform:translateY(0);
  transition:
     top .6s cubic-bezier(.22,1,.36,1),
    opacity .5s ease,
    transform .5s cubic-bezier(.22,1,.36,1);
}

/* スクロール後（PC） */
.main-logo.is-show-pc{
  top:calc(80% - 220px); /* ← 位置だけ変える */
  opacity:1;
}

/* 非表示状態 */
.main-logo.is-hidden{
  opacity:0;
  transform:translateY(-20px);
}
/* ロゴ画像 */
.main-logo-image img{
  height:150px; /* 好きに調整OK */
  width:auto;
  display:block;
}


/* ===== 左メニュー固定 ===== */
.side{
  position:fixed;
  left:60px;
  top:80%;
  transform:translateY(-50%);
  width:220px;
  z-index:10;
    transition: top 0.2s ease-out;
}

/* メニュー */
.menu{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.menu a{
  text-decoration:none;
  color:#333;
  font-size:14px;
}

/* SNS */
.side-sns{
  margin-top:20px;
  display:flex;
  gap:10px;
}

.instagram{
  -webkit-mask-image: url('../img/icon-instagram-white.webp');
  mask-image: url('../img/icon-instagram-white.webp');
}

.x{
  -webkit-mask-image: url('../img/icon-x-white.webp');
  mask-image: url('../img/icon-x-white.webp');
}

.line{
  -webkit-mask-image: url('../img/icon-line-white.webp');
  mask-image: url('../img/icon-line-white.webp');
}

.tiktok{
  -webkit-mask-image: url('../img/icon-tiktok-white.webp');
  mask-image: url('../img/icon-tiktok-white.webp');
}

.facebook{
  -webkit-mask-image: url('../img/icon-facebook-white.webp');
  mask-image: url('../img/icon-facebook-white.webp');
}

/* =========================
   テキストエリア
========================= */
.text-area{
  /* ← メニュー分ずらす */
  margin-left:260px;

  min-height:300px;

  display:flex;
  justify-content:center;
  align-items: flex-start;
  padding:0px 20px 80px;
  gap: 200px;
}

/* タイトル */
.top-title h1{
  font-size:42px;
  line-height:1.6;
  margin-top: -105px;
  position: relative;
  z-index: 10;
}

/* コンセプト */
.top-concept{
  margin-top:30px;
  max-width:400px;
}

.top-concept h4{
  font-size:14px;
  line-height:1.8;
  color:var(--color-text);
  margin-top: 100px;
}


@media (min-width:769px){
  .main-logo.is-show-pc{
    position:fixed;
    left:60px;
    top:calc(80% - 490px); /* sideの上に来る位置 */
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== PC：sideの上に出す ===== */
@media (min-width:1000px){
  .main-logo.is-show-pc{
    position:fixed;
    left:60px;
    top:calc(80% - 520px); /* sideの上に来る位置 */
    opacity:1;
    transform:translateY(0);
  }
}
/* =========================
   SP
========================= */
@media (max-width:1000px){

  /* =========================
   画像（100%幅 + 潰れない）
========================= */
.visual{
  width:100%;

  /* ↓そのまま活かす */
  min-height:420px;
  aspect-ratio: 16 / 7;
  position:relative;
  /* ★これ追加 */
  max-height:60vh;
  min-height: 50vh;
  overflow:hidden;
}

.text-area{
  /* ← メニュー分ずらす */
  margin-left:260px;

  min-height:300px;

  display:flex;
  justify-content:center;
  align-items: flex-start;
  padding:0px 20px 80px;
  gap: 50px;
}
/* ロゴ */
.main-logo{
  position:absolute;
  top:40px;
  left:40px;
  z-index:5;
}

/* ロゴ画像 */
.main-logo-image img{
  height:120px; /* 好きに調整OK */
  width:auto;
  display:block;
}

/* ===== 左メニュー固定 ===== */
.side{
  position:fixed;
  left:40px;
  top:80%;
  transform:translateY(-50%);

  width:220px;
  padding:20px;

  z-index:10;
}
}
@media (max-width:768px){
  .main-logo.is-show-sp{
    position:fixed;
    top:10px;
    left:20px;
    opacity:1;
    transform:translateY(0);
  }

.visual{
  aspect-ratio: 16 / 12;
}
/* ロゴ */
.main-logo{
  position:absolute;
  top:20px;
  left:20px;
  z-index:5;
}

/* ロゴ画像 */
.main-logo-image img{
  height:70px; /* 好きに調整OK */
  width:auto;
  display:block;
}
.flow-track img{
  width:80vw;
}

/* メニュー固定やめる */
.side{
  position:relative;
  transform:none;
  width:100%;
  padding:20px;
  left: 0;
}

/* 横ズレ戻す */
.text-area{
  flex-direction: column;
  margin-left:0;
  padding:40px 20px;
}

/* 左寄せに戻す（スマホはこっちの方が読みやすい） */
.text-area{
  align-items:flex-start;
  text-align:left;
}

.top-title h1{
  font-size:30px;
}

/* タイトル */
.top-title h1{
  line-height:1.6;
  margin-top: -115px;
  position: relative;
  z-index: 10;
}
.top-concept{
  width:100%;
  text-align:right;
}
.top-concept h4{
  text-align: right;
  font-size:14px;
  line-height:1.8;
  color:var(--color-text);
  margin-top: 0px;
  width: 100%;
}

}



/* =========================
   FEATURE
========================= */
.feature{
    padding:0 20px;
    margin-bottom: -700px;
}

/* PCだけ左に余白（メニュー分） */
@media (min-width:769px){
    .feature{
        padding-left:260px;
    }
}

/* =========================
   header
========================= */
.feature-header{
    max-width:1200px;
    margin:0px auto 0px;
    padding:0 20px;
}

/* =========================
   タイトル本体
========================= */
.title-line{
  font-size:42px;
  letter-spacing:0.15em;
  position:relative;
  display:inline-block;
  color: var(--color-primary);
}

/* =========================
   ライン
========================= */
.title-line::before{
  content:"";
  position:absolute;
  top:-16px;
  left:0;
  width:60px;
  height:2px;
  background:var(--color-secondary);

  /* 初期状態 */
  transform:scaleX(0);
  transform-origin:left;
  opacity:0;

  transition:
    transform .6s cubic-bezier(.22,1,.36,1) .25s,
    opacity .3s ease .25s;
}

/* =========================
   ドット
========================= */
.title-line::after{
  content:"";
  position:absolute;
  top:-19px;
  left:0;
  width:8px;
  height:8px;
  background:var(--color-secondary);
  border-radius:50%;

  /* 初期状態 */
  transform:scale(0);
  opacity:0;

  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    opacity .3s ease;
}

/* =========================
   発火
========================= */
.title-line.is-active::after{
  transform:scale(1);
  opacity:1;
}

.title-line.is-active::before{
  transform:scaleX(1);
  opacity:1;
}


/* =========================
   layout
========================= */
.feature-item{
    max-width:1000px;
    margin:0 auto 0px;
    padding: 50px;
}

.feature-item:last-of-type{
    margin-bottom:0;
}

/* 中身（縦並び） */
.feature-inner{
    display:flex;
    flex-direction:column;
    gap:30px;
    max-width:360px;
}

/* 左寄せ */
.feature-item{
    display:flex;
    justify-content:flex-start;
}

/* 偶数だけ右寄せ */
.feature-item:nth-of-type(even){
    justify-content:flex-end;
}

.feature-item + .feature-item{
    margin-top:-100px; /* ← 重なり量（調整OK） */
    position:relative;
    z-index:2;
}

/* 左右でズラすと自然になる */
.feature-item:nth-of-type(even){
    transform:translateY(40px);
}

.feature-item:nth-of-type(odd){
    transform:translateY(-340px);
}
.feature-item:last-of-type{
    transform:translateY(-540px);
}

/* =========================
   image
========================= */
.feature-image{
    position:relative;
    border-radius:20px;
    overflow:hidden;
}

.feature-image img{
    width:100%;
    display:block;
    filter:brightness(0.75);
    transition:0.5s;
}

/* hover */
.feature-item:hover .feature-image img{
    filter:brightness(0.9);
    transform:scale(1.03);
}

/* =========================
   番号
========================= */
.feature-number.overlay{
    position:absolute;
    top:20px;
    left:20px;
    color:var(--color-text-white);
}

.feature-number .label{
    font-size:12px;
    letter-spacing:0.2em;
}

.feature-number .num{
    font-size:36px;
    font-weight:700;
}

/* =========================
   TEXT DESIGN（格上げ）
========================= */

/* サブタイトル（英語） */
.feature-sub{
    font-size:11px;
    letter-spacing:0.25em;
    color:var(--color-secondary);
    margin-bottom:12px;
    position:relative;
    padding-left:40px;
}

/* 横線アクセント */
.feature-sub::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:28px;
    height:1px;
    background:var(--color-secondary);
    transform:translateY(-50%);
}

/* タイトル */
.feature-title{
    font-size:26px;
    line-height:1.6;
    margin-bottom:18px;
    color:var(--color-primary);
}

/* 本文 */
.feature-desc{
    font-size:14px;
    line-height:2;
    color:var(--color-neutral-surface);
    max-width:320px;
}
/* =========================
   mobile
========================= */
@media (max-width:1100px){

        .feature-item + .feature-item{
        margin-top:0;
    }

    .feature-item:nth-of-type(even),
    .feature-item:nth-of-type(odd){
        transform:none;
    }
    .feature{
    margin-bottom: -100px;
}
}

@media (max-width:768px){

    .feature{
        padding:40px 20px;
    margin-bottom: 0px;
    }

    .feature-header{
        margin:40px auto 40px;
    }

.title-line{
    font-size:32px;
    letter-spacing:0.15em;
    text-align:left;
    position:relative;
    display:inline-block;
}

    .feature-item{
        justify-content:center !important;
        margin-bottom:60px;
        padding: 10px;
    }

    .feature-inner{
        max-width:100%;
    }

.feature-desc{
    font-size:14px;
    line-height:2;
    color:var(--color-neutral-surface);
    max-width:100%;
}
}





/* =========================
   SERVICE 全体
========================= */
.service{
  padding: 200px 0;
}

/* PC：左に260px余白 */
@media (min-width: 768px){
  .service{
    padding-left:320px;
  }
}

/* =========================
   コンテナ
========================= */
.service-inner{
  display:flex;
  flex-direction:column;
  gap:120px;
}
.service-header{
    max-width:1200px;
    margin:0px auto 90px;
    padding:0 20px;
}
/* =========================
   ブロック（画像帯）
========================= */
.service-block{
  position:relative;
  width:80%;
  height:320px;
  overflow:hidden;
  display:flex;
  align-items:center;
}

/* 交互配置 */
.service-block:nth-child(odd){
  margin-right:auto;
}

.service-block:nth-child(even){
  margin-left:auto;
}

/* =========================
   背景画像
========================= */
.service-bg{
  position:absolute;
  inset:0;
  transform:scale(1.05);
}

/* 黒オーバーレイ */
.service-bg::after{
  content:"";
  position:absolute;
  inset:0;

  /* ★ただの黒やめる */
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.55) 40%,
      rgba(0,0,0,0.2) 70%,
      rgba(0,0,0,0.0) 100%
    );
}
.service-block:nth-child(1) .service-bg{
  background:url("../img/service1.webp") center/cover;
}
.service-block:nth-child(2) .service-bg{
  background:url("../img/service2.webp") center/cover;
}
.service-block:nth-child(3) .service-bg{
  background:url("../img/service3.webp") center/cover;
}

/* =========================
   テキスト
========================= */
.service-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding:60px;
  max-width:500px;
}

.service-num{
  font-size:12px;
  letter-spacing:0.3em;
  margin-bottom:20px;
  opacity:0.7;
}

.service-content h3{
  font-size:28px;
  margin-bottom:20px;
}

.service-content p{
  font-size:14px;
  line-height:1.8;
}

/* =========================
   スマホ
========================= */
@media (max-width:768px){

  .service{
    padding:100px 20px;
  }

  .service-block{
    width:100%;
    height:260px;
  }

  .service-content{
    padding:30px;
  }
.service-header{
    max-width:1200px;
    margin:0px auto 40px;
    padding:0 20px;
}
}


/* =========================
   全体
========================= */
.article{
  margin-left:320px;
}

.article-header{
    max-width:1200px;
    margin:0px auto 40px;
}
/* =========================
   画像アニメーション用
========================= */
.article-visual{
  width:100%;
  height:420px;
  overflow:hidden;
  position:relative;
}

/* マスク */
.article-visual::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--color-text-white);
  z-index:2;

  transform:translateX(0);
  transition:transform 1.2s cubic-bezier(.77,0,.18,1);
}

/* 画像 */
.article-visual img{
  width:100%;
  height:100%;
  object-fit:cover;

  transform:scale(1.2);
  opacity:0;
  transition:
    transform 1.5s cubic-bezier(.22,1,.36,1),
    opacity 1s ease;
}

/* 発火後 */
.article-visual.is-active::before{
  transform:translateX(100%);
}

.article-visual.is-active img{
  transform:scale(1);
  opacity:1;
}

/* =========================
   下レイアウト
========================= */
.article-body{
  display:flex;
  justify-content:space-around;

  max-width:1400px;
  margin:0 auto;

  padding:80px 40px;

}

/* =========================
   メイン
========================= */
.article-main{
  max-width:720px;
}

.article-title{
  font-size:32px;
  margin-bottom:10px;
}

.article-sub{
  font-size:13px;
  color: var(--color-text-muted);
  margin-bottom:30px;
}

.article-text p{
  font-size:14px;
  line-height:2;
  margin-bottom:20px;
  color:var(--color-text);
}

/* =========================
   右縦UI
========================= */
.article-right{
  width:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}

/* 縦テキスト */
.vertical-text{
  writing-mode:vertical-rl;
  font-size:11px;
  letter-spacing:0.2em;
  color: var(--color-text);
}

/* シェア */
.share{
  writing-mode:vertical-rl;
  font-size:11px;
  text-align:center;
}

.share ul{
  list-style:none;
  padding:0;
  margin-top:10px;
}

.share li{
  margin-top:10px;
}

/* =========================
   レスポンシブ
========================= */

@media(max-width:768px){
.article{
  margin-left:0px;
}
  .article-body{
    flex-direction:column;
    padding-left:20px;
  }

  .article-right{
    display:none;
  }

  .article-main{
    max-width:100%;
  }
}

/* =========================
   カラムタイプ（調整版）
========================= */

/* ===== 全体 ===== */
.column{
  max-width:1500px; /* 少し広げる */
  margin:60px 20px 140px 260px;

  padding:0 40px;
  text-align:left; /* ★中央揃えやめると一気に見やすくなる */
}


.column-header{
    max-width:1200px;
    margin:0px auto 40px;
}
/* =========================
   画像アニメーション用
========================= */
.article-visual{
  width:100%;
  height:420px;
  overflow:hidden;
  position:relative;
}

/* マスク */
.article-visual::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--color-text-white);
  z-index:2;

  transform:translateX(0);
  transition:transform 1.2s cubic-bezier(.77,0,.18,1);
}

/* ===== カラム ===== */
.column-inner{
  display:flex;
  gap:60px; /* ★余白広げる */
  align-items:flex-start;
}

.column-item{
  width:33.333%;
}

.column-img{
  width:100%;
  height:340px;
  overflow:hidden;
  margin-bottom:25px;

  transition:
    border-radius 4.2s cubic-bezier(.22,1,.36,1);
}

/* 最終形 */
.column-img.is-active{
  border-radius:40% 60% 50% 50% / 50% 40% 60% 50%;
}


.column-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.6s;
}

/* hoverでほんのり動かす（花屋っぽさ） */
.column-item:hover img{
  transform:scale(1.05);
}

/* ===== テキスト ===== */
.column-name{
  font-size:22px;
  margin-bottom:12px;
  line-height:1.5;
}

.column-text{
  font-size:14px;
  line-height:2; /* ★ここも効く */
  letter-spacing:0.02em;
}


/* ===== レスポンシブ ===== */
@media(max-width:768px){

  .column{
    margin:80px auto;
    padding:0 25px; /* ★左320px解除 */
  }

  .column-inner{
    flex-direction:column;
    gap:90px;
  }

  .column-item{
    width:100%;
  }

  .column-img{
    height:290px;
  }

  .column-title{
    font-size:26px;
  }
}

/* ===== News ===== */
.news-section{
  padding:120px 20px;
  margin-left: 300px;
}

/* PCレイアウトの土台 */
.news-inner{
  max-width:1200px;
  margin:0 auto;

  display:flex;
  gap:80px;
  position:relative;
}

/* ===== 左：タイトル ===== */
.news-header{
  width:200px;
  flex-shrink:0;

  position:sticky;
  top:120px;
  height:fit-content;
}

/* アクセントライン */
.news-header::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width:60px;
  height:3px;
  background:var(--color-secondary);
}

.news-title{
  font-size:48px;
  font-weight:700;
  margin-bottom:8px;
  color:var(--color-primary);
}

.news-sub{
  font-size:14px;
  color:var(--color-neutral-surface);
}

/* ===== 右：コンテンツ ===== */
.news-content{
  flex:1;
}

/* ===== リスト ===== */
.news-list{
  list-style:none;
  padding:0;
  margin:0;
}

/* 区切り線を薄くして余白広め */
.news-item{
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.news-item:first-child{
  border-top:1px solid rgba(0,0,0,0.08);
}

/* カード感アップ */
.news-item a{
  display:block;
  padding:28px 0;
  text-decoration:none;
  color:inherit;
  transition:0.4s cubic-bezier(.22,1,.36,1);
  position:relative;
}


.news-item a:hover::before{
  width:100%;
}

/* hoverでちょいズレる */
.news-item a:hover{
  transform:translateX(10px);
}

/* 横並び */
.news-row{
  display:flex;
  align-items:center;
  gap:30px;
}

/* 日付 */
.news-date{
  width:120px;
  font-size:13px;
  color:var(--color-neutral-surface);
}

/* カテゴリ */
.news-category{
  font-size:11px;
  padding:5px 12px;
  border-radius:999px;
  background:var(--color-primary);
  color: var(--color-text-white);
  font-weight:600;
}

/* テキスト */
.news-text{
  flex:1;
  font-size:16px;
  letter-spacing:0.04em;
}

/* ===== ボタン ===== */
.news-footer{
  margin-top:50px;
  text-align: right;
}

.news-more{
  display:inline-block;
  padding:10px 36px;
  border-radius:999px;

  background:var(--color-secondary);
  color: var(--color-text-white);

  text-decoration:none;
  font-weight:600;
  transition:0.3s;
  /* ← これ追加 */
  border:2px solid transparent;
}

.news-more:hover{
  background: var(--color-text-white);
  color:var(--color-secondary);
  border:2px solid var(--color-secondary);
}

/* ===== SP ===== */
@media(max-width:1200px){

/* ===== News ===== */
.news-section{
  padding:120px 20px;
  margin-left: 260px;
}
/* ===== 左：タイトル ===== */
.news-header{
  width:150px;
  flex-shrink:0;

  position:sticky;
  top:120px;
  height:fit-content;
}
/* 日付 */
.news-date{
  width:80px;
  font-size:13px;
  color:var(--color-neutral-surface);
}
  .news-inner{
    flex-direction:column;
    gap:40px;
  }
}
/* ===== SP ===== */
@media(max-width:768px){

/* ===== News ===== */
.news-section{
  padding:40px 20px;
  margin-left: 0px;
}

  .news-header{
    position:relative;
    top:auto;
    width:auto;
  }

  .news-content{
    padding-right:0;
  }

  .news-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .news-date{
    width:auto;
  }
}



/* ===== 全体 ===== */
.blog{
  margin:40px 0 120px;
  padding-left: 320px;
}

/* ===== タイトル ===== */
.blog-header{
  max-width:1100px;
    margin: 0 auto 20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

.blog-title{
  font-size:48px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--color-primary);
}

.blog-sub{
  font-size:14px;
  color:var(--color-neutral-surface);
  margin-top:5px;
}

/* ===== ナビ ===== */
.blog-nav{
  display:flex;
  gap:10px;
  margin-right: 30px;
}

.blog-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--color-text-muted);
  background: var(--color-text-white);
  cursor:pointer;
  transition:0.3s;
}

.blog-btn:hover{
  background:var(--color-primary);
  color:var(--color-text-white);
}

/* ===== スライダー ===== */
.blog-slider{
  max-width:1100px;
  margin:0 auto;
  overflow:hidden;
  padding: 50px 0 20px;
}

.blog-track{
  display:flex;
  gap:40px;
  transition: 
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease,
    min-width 0.6s ease;
}

/* ===== カード ===== */
.blog-card{
  min-width:260px;
  opacity:0.8;
}
.blog-card.is-active{
  min-width:380px;
  opacity:1;
}

.blog-card{
  transition: 
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
}

/* ふわっと浮く */
.blog-card:hover{
  transform: translateY(-12px) scale(1.02);
}

/* ===== 画像 ===== */
.blog-image{
  position:relative;
  overflow:hidden;
  border-radius:16px 16px 0 0;
}

/* 画像 */
.blog-image img{
  width:100%;
  height:240px;
  object-fit:cover;
  transition:0.6s;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

}

/* hoverズーム */
.blog-card:hover img{
  transform:scale(1.08);
}

/* 斜めアクセント */
.blog-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent 60%,
    rgba(0,0,0,0.15)
  );
  opacity:0;
  transition:0.4s;
}

.blog-card:hover .blog-image::after{
  opacity:1;
}

/* ===== コンテンツ ===== */
.blog-content{
  padding:20px 18px 18px;
  background:var(--color-text-white);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  position:relative;
  transition:0.4s;
}



/* タグ（バッジ化） */
.blog-tag{
  font-size:10px;
  letter-spacing:0.12em;
  padding:4px 10px;
  background:var(--color-secondary);
  color: var(--color-text-white);
  border-radius:999px;
  display:inline-block;
  margin-bottom:12px;
  font-weight: bold;
}

/* タイトル */
.blog-content h3{
  font-size:18px;
  line-height:1.7;
  margin-bottom:14px;
  font-weight:500;
  transition:0.3s;
}

/* ホバーで少し強調 */
.blog-card:hover h3{
  letter-spacing:0.04em;
}

/* 日付 */
.blog-date{
  font-size:11px;
  color: var(--color-neutral-light);
  letter-spacing:0.08em;
}

/* dots全体 */
.blog-dots{
  display: flex;
  justify-content: center; /* ← 横中央 */
  align-items: center;
  gap: 10px;

  margin-top: 20px; /* スライダーとの余白 */
}

/* 1つ1つのdot */
.blog-dots span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-light-30);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* アクティブ */
.blog-dots span.active{
  background: var(--color-primary);
  transform: scale(1.3);
}

/* ===== ボタン ===== */
.blog-footer{
  margin-top:40px;
  text-align:right;
  margin-right: 30px;
}

.blog-more{
  display:inline-block;
  padding:8px 30px;
  border-radius:999px;
  background:var(--color-primary);
  color: var(--color-text-white);
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.blog-more:hover{
  background:var(--color-text-white);
  color:var(--color-primary);
  border:1px solid var(--color-primary);
}

/* =========================
   PCレイアウト変更
========================= */
@media(min-width:1024px){


  /* ヘッダーも同じラインに */
  .blog-header{
    max-width:none;
    padding-right:40px;
  }

  /* スライダーをフル幅化 */
  .blog-slider{
    max-width:none;
    width:100%;
    padding-right:40px;
  }

  /* ===== カードサイズ調整 ===== */

  /* デフォルト（小さいカード） */
  .blog-card{
    min-width:260px;
    transform:scale(0.9);
    opacity:0.8;
  }

  /* 一番左（メイン） */
  .blog-card.is-active{
    min-width:380px;
    transform:scale(1);
    opacity:1;
  }

  /* 画像サイズも差をつける */
  .blog-card .blog-image img{
    height:180px;
  }

  .blog-card.is-active .blog-image img{
    height:260px;
  }

  /* 文字サイズも差をつける */
  .blog-card h3{
    font-size:16px;
  }

  .blog-card.is-active h3{
    font-size:20px;
  }
}

/* ===== SP ===== */
@media(max-width:768px){

  .blog{
    padding-left:20px;
  }
  .blog-header{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .blog-track{
    gap:20px;
  }

  .blog-card{
    min-width:80%;
  }

  .blog-image img{
    height:180px;
  }

    /* 一番左（メイン） */
  .blog-card.is-active{
    min-width:320px;
    transform:scale(1);
    opacity:1;
  }
}



.svc-slider{
  background:var(--color-accent);
  padding:150px 40px;
  color:var(--color-text-white);
  
}

.svc-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content: center;
  align-items:center;
  gap: 40px;
}

/* ===== 左 ===== */
.svc-left{
  width:40%;
  max-width: 600px;
}

.svc-title{
  font-size:48px;
  font-weight:300;
  margin-bottom:10px;
}

.svc-sub{
  font-size:14px;
  margin-bottom:30px;
}

.svc-desc{
  font-size:14px;
  line-height:2;
  margin-bottom:20px;
  opacity:0.9;
}

.svc-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 14px;
  color: var(--color-text-white);
  text-decoration: none;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

/* 矢印 */
.svc-more::after{
  content: "→";
  transition: transform 0.3s ease;
}

/* hover */
.svc-more:hover{
  background: rgba(255,255,255,0.1);
}

.svc-more:hover::after{
  transform: translateX(6px);
}


/* 円全体 */
.svc-circle-wrap{
  position:relative;
  width:300px;
  height:300px;
}

/* 外側の円 */
.svc-circle-bg{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background: var(--color-accent-light-90);
  transform:scale(1.2);
}

/* スライダー */
.svc-slider-container{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:50%;
  position:relative;
  z-index:2;
}

.svc-track{
  display:flex;
  height:100%;
  transition: transform 0.5s ease;
}

.svc-slide{
  min-width:100%;
  height:100%;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.svc-slide img{
  width:80%;
  height:80%;
  object-fit:cover;
  border-radius:50%;
}

/* ここが今回のメイン */
.svc-slide p{
  position:absolute;
  bottom:25%;
  left:50%;
  transform:translateX(-50%);
  
  background:var(--color-primary-a70);
  color:var(--color-text-white);
  padding:6px 14px;
  border-radius:20px;
  
  font-size:14px;
  margin:0;
}

/* ===== 矢印 ===== */
.svc-prev,
.svc-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--color-text-white);
  background:transparent;
  color:var(--color-text-white);
  cursor:pointer;
  z-index:3;
}

.svc-prev{
  left: -15px;
}

.svc-next{
  right:-15px;
}



@media(min-width:768px){
    .svc-inner{
    align-items:flex-start;
    position:relative;
  }
    .svc-left{
      margin-top:-80px;
    }
    .svc-right{
      margin-top:220px;
  }
  .svc-slider{
    padding:150px 40px 150px 260px;
  }
}
/* ===== SP ===== */
@media(max-width:768px){
  .svc-slider{
  padding:120px 40px;
}

  .svc-inner{
    flex-direction:column;
    gap:90px;
  }

  .svc-left{
    width:100%;
  }

  .svc-circle-wrap{
    width:300px;
    height:300px;
  }

  .svc-title{
    font-size:36px;
  }
  .svc-prev{
  left:-20px;
}

.svc-next{
  right:-20px;
}
}



/* =========================
   全体：左に260px余白
========================= */
.case{
  padding:100px 0;
  padding-left:260px; /* ←これが今回の核 */
  overflow:hidden;
}

/* ヘッダー */
.case-header{
  text-align:left;
  margin-bottom:60px;
  padding-left:40px;
}

.case-title{
  font-size:56px;
  letter-spacing:0.08em;
}

/* =========================
   スライダー全体
========================= */
.case-slider{
  position:relative;
}

/* トラック */
.case-track{
  display:flex;
  gap:60px;
  padding-left:40px;
  transition:0.8s cubic-bezier(.22,1,.36,1); /* ←ぬるっと動く */
}

/* =========================
   カード（完全リデザイン）
========================= */
.case-card{
  flex:0 0 420px;
  display:block;
  padding:0;
  background:none;
  box-shadow:none;

  transform:scale(0.85);
  opacity:0.4;
  transition:0.6s;
}

/* アクティブ */
.case-card.active{
  transform:scale(1);
  opacity:1;
}

/* =========================
   画像メインにする
========================= */
.case-image{
  width:100%;
  height:280px;
  border-radius:20px;
  overflow:hidden;

  clip-path:none; /* ←クセ消す */
}

.case-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.6s;
}

/* hoverでズーム */
.case-card:hover img{
  transform:scale(1.08);
}

/* =========================
   コンテンツ下に
========================= */
.case-content{
  margin-top:18px;
}

.case-tag{
  font-size:11px;
  letter-spacing:0.1em;
  background:none;
  color:var(--color-primary);
  padding:0;
  margin-bottom:6px;
}

.case-content h3{
  font-size:20px;
  margin-bottom:8px;
}

.case-text{
  font-size:13px;
  line-height:1.6;
  color:#666;
  margin-bottom:15px;
}

/* ボタン */
.case-link{
  padding:0;
  border:none;
  font-size:13px;
  color:var(--color-primary);
}

.case-link::after{
  content:" →";
}

/* =========================
   矢印：ベース
========================= */
.case-arrow{
  position:absolute;
  bottom:-70px;

  width:60px;
  height:60px;
  border-radius:999px;

  background:rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border:1px solid rgba(255,255,255,0.3);

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

  cursor:pointer;
  transition:0.4s cubic-bezier(.22,1,.36,1);
}

/* 矢印の中身を線で作る */
.case-arrow::before{
  content:"";
  width:12px;
  height:12px;
  border-top:2px solid var(--color-primary);
  border-right:2px solid var(--color-primary);
  transform:rotate(45deg);
  transition:0.4s;
}

/* 左用 */
.case-arrow.prev::before{
  transform:rotate(-135deg);
}

/* 位置 */
.case-arrow.prev{
  left:40px;
}

.case-arrow.next{
  left:120px;
}

/* =========================
   ホバー演出
========================= */
.case-arrow:hover{
  width:80px; /* ←横に伸びるのがミソ */
  background:var(--color-accent);
}

/* 矢印色反転 */
.case-arrow:hover::before{
  border-color: var(--color-text-white);
}

/* 矢印がスッと動く */
.case-arrow.next:hover::before{
  transform:translateX(4px) rotate(45deg);
}

.case-arrow.prev:hover::before{
  transform:translateX(-4px) rotate(-135deg);
}

/* 押したとき */
.case-arrow:active{
  transform:scale(0.92);
}
/* =========================
   dots（下に余白感）
========================= */
.case-dots{
  justify-content:flex-start;
  padding-left:40px;
  margin-top:50px;
}

/* =========================
   スマホ
========================= */
@media(max-width:768px){

  .case{
    padding-left:0;
    padding:90px 20px 40px;
  }

  .case-header{
    padding-left:0;
    text-align:center;
  }

  .case-track{
    padding-left:0;
    gap:20px;
  }

  .case-card{
    flex:0 0 80%;
    margin:0 auto;
  }

  .case-arrow.prev{
    left:0;
  }

  .case-arrow.next{
    left:auto;
    right:0;
  }

  .case-dots{
    justify-content:center;
    padding-left:0;
  }
}


/* =========================
   全体：左260px余白
========================= */
.company{
  padding:120px 0;
  padding-left:260px;
  position:relative;
  overflow:hidden;
}

/* =========================
   タイトル
========================= */
.company-header{
  margin-bottom:80px;
  padding-left:60px;
}

.company-title{
  font-size:56px;
  letter-spacing:0.1em;
  position:relative;
}

/* 薄い英字背景 */
.company-title::after{
  content:"COMPANY";
  position:absolute;
  top:-30px;
  left:0;
  font-size:120px;
  color:var(--color-secondary-a30);
  z-index:-1;
}

/* =========================
   レイアウト
========================= */
.company-inner{
  display:flex;
  align-items:flex-start;
  gap:80px;
  position:relative;
}

/* =========================
   マップ：背景っぽくする
========================= */
.company-map{
  position:absolute;
  right:0;
  top:0;
  width:60%;
  height:500px;
  z-index:0;

  border-radius:20px 0 0 20px;
  overflow:hidden;
  filter:grayscale(100%) contrast(0.9) brightness(1.1);
}

.company-map iframe{
  width:100%;
  height:100%;
  border:0;
}

/* =========================
   情報：縦に流す
========================= */
.company-info{
  position:relative;
  z-index:2;
  width:420px;

  display:flex;
  flex-direction:column;
  gap:30px;

  padding-left:60px;
}

/* 各項目 */
.company-item{
  border-bottom:1px solid rgba(0,0,0,0.08);
  padding-bottom:14px;
}

.company-item h4{
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--color-primary);
  margin-bottom:6px;
}

.company-item p{
  font-size:15px;
  line-height:1.8;
}

/* =========================
   ボタン（シンプルに）
========================= */
.company-btn-wrap{
  margin-top:20px;
}

.company-btn{
  font-size:14px;
  color:var(--color-primary);
  text-decoration:none;
  position:relative;
}

.company-btn::after{
  content:" →";
  transition:0.3s;
}

.company-btn:hover::after{
  margin-left:6px;
}

/* =========================
   スマホ
========================= */
@media(max-width:768px){

  .company{
    padding-left:0;
    padding:60px 20px;
  }

  .company-header{
    padding-left:0;
    margin-bottom:40px;
  }

  .company-title{
    font-size:28px;
  }

  .company-title::after{
    display:none;
  }

  .company-inner{
    flex-direction:column;
    gap:30px;
  }

  .company-map{
    position:relative;
    width:100%;
    height:250px;
    border-radius:10px;
    filter:none;
  }

  .company-info{
    width:100%;
    padding-left:0;
  }
}

/* テーマ色変更 */


.theme-demo{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
}

/* キャラ */
.theme-character{
  cursor: pointer;
  position: absolute;
  bottom: -50px;
  right: -50px;
  z-index: 10;
  rotate: -20deg;
}

.theme-character img{
  width: 110px;
}

/* 吹き出し */
.theme-bubble{
  position: absolute;
  bottom: 0px;
  right: 0;
  background: #fff;
  padding: 15px 22px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  color: #333;
  width: 300px;
  font-size: 16px;
  font-weight: bold;
  animation: fadeInUp 0.3s ease;
}

/* しっぽ（キャラ方向に） */
.theme-bubble::after{
  content: '';
  position: absolute;
  bottom: -8px;
  right: 20px;
  border: 8px solid transparent;
  border-top-color: #fff;
}


/* 色ボタン */
.theme-colors{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.theme-colors button{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* 色 */
button[data-theme="default"]{
  background: #fff;
  border: 2px solid #333333;
}
button[data-theme="blue"]{ background:#9482D1; }
button[data-theme="green"]{ background:#e2a2b1; }
button[data-theme="dark"]{ background:#1aa371; }

/* 閉じる */
.theme-close{
  position: absolute;
  top: -10px;
  left: -10px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
}

/* アニメ */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}