/* 基本設定（リセットCSS含む） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 共通コンテナ（幅を制限して中央寄せ） */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ヘッダー */
header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky; /* スクロールしても追従 */
    top: 0;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

/* 既存の .logo の記述を見つけて、以下のように修正します */
.logo {
    /* font-size: 24px;  ← 画像になるので不要な記述です。削除またはコメントアウト */
    /* font-weight: bold; ← 同上 */
    
    line-height: 1; /* 画像の上下の隙間をなくすための調整 */
    display: flex; /* リンクタグを内包する際の配置ズレを防ぐ */
    align-items: center;
}

/* 新しく追加：ロゴ画像のサイズ調整 */
.logo img {
    height: 50px;   /* ヘッダーの高さに合わせて適切な高さを指定します */
    width: auto;    /* 横幅は高さに合わせて自動的に縮小させます */
    display: block; /* 画像の下に微妙な隙間ができるのを防ぎます */
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a:hover {
    color: #a1c4fd; /* ホバー時の色 */
}



/* 1. ヒーローセクション（親要素） */
.hero {
    /* ▼ 一つ前の「4色のゆったりグラデーション」に戻す */
    background: linear-gradient(-45deg, #a1c4fd, #c2e9fb, #e0c3fc, #8ec5fc);
    background-size: 200% 100%;
    animation: gradientBG 10s ease infinite;

    position: relative;
    overflow: hidden;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-shadow: 0 2px 5px rgba(255,255,255,0.8); 
}

/* 2. 手前に流れる「W」のレイヤー */
.hero::before {
    content: "";
    position: absolute;
    /* 傾けても画面の四隅に隙間ができないように、領域を大きく取る */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 300%;
    
    /* ▼ ここを追加：全体を20度傾ける */
    transform: rotate(-25deg);
    
    /* ▼ Wの模様（画面全体に広がるように設定） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cpath d='M 0,50 L 150,250 L 300,50 L 450,250 L 600,50' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='100' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 600px 300px; 
    
    /* 一列のみ（repeat-x）を解除し、上下左右に敷き詰める（repeat） */
    background-repeat: repeat;
    
    /* 20秒かけて横にスライド */
    animation: moveW 20s linear infinite;
    z-index: 1; /* 背景と文字の間に配置 */
}

/* 3. 文字が模様に埋もれないように手前に出す */
.hero-text {
    position: relative;
    z-index: 2;
}

/* --- アニメーションの定義 --- */

/* 背景の4色グラデーションがゆったり動く */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 画面全体のWが流れ続ける */
@keyframes moveW {
    0% { background-position: 0 0; }
    100% { background-position: 600px 0; }
}



.btn {
    display: inline-block;
    background-color: #007BFF;
    color: #fff;
    padding: 10px 30px;
    border-radius: 5px;
    margin-top: 20px;
    transition: background 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}


/* 実績リスト */
#works ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

#works li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  color: #555;
}


/* 各セクション共通 */
.section {
    padding: 60px 0;
    scroll-margin-top: 90px;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
}

.bg-gray {
    background-color: #f9f9f9;
}


#cases {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
}

.case-item {
  border: 1px solid #eee;
  background: #fafafa;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.case-title {
  padding: 15px;
  font-size: 1.1rem;
  cursor: pointer;
  background: #f5f8fc;
  color: #444;
  transition: background 0.3s;
}

.case-title:hover {
  background: #e8f0ff;
}

.case-detail {
  display: none;
  padding: 15px;
  color: #555;
  background: #ffffff;
}

.case-detail-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

/* テキストは残りの幅を全部使う */
.case-detail-inner p {
  flex: 1;
  margin: 0;
}

/* 画像は固定サイズで絶対に縮まない */
.case-thumb {
  width: 260px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  background: #ddd;

/*   ▼▼▼ 通常時の設定：斜めカット ＆ 白黒 ▼▼▼ */
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  filter: grayscale(100%); 

  /* 変化にかかる時間（0.4秒かけてふわっと変わる） */
  transition: filter 0.4s ease, clip-path 0.4s ease;

/* 画像のコピー防止（右クリック禁止など） */
  pointer-events: none;
  flex-shrink: 0;
}
/* ▼▼▼ マウスが乗った時の設定：長方形 ＆ カラー ▼▼▼ */
/* .case-item（枠全体）にマウスが乗ったら、画像を変える */
.case-item:hover .case-thumb {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 全体が見える（長方形） */
  filter: grayscale(0%); /* カラーになる */
}

/*   左側を斜めにカット */
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);

  flex-shrink: 0; /* ← これが重要！画像が縮まなくなる */
}
.case-title { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.case-title .arrow {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.18s ease;
  margin-left: 8px;
  font-size: 1.05em;
  line-height: 1;
}

/* ホバー時に下向き（90deg回転） */
.case-title:hover .arrow {
  transform: rotate(90deg);
}

/* 詳細が開いている状態（JSで親に open クラスを付与） */
.case-item.open .case-title .arrow {
  transform: rotate(90deg);
}

/* 詳細部分（最初は非表示） */
.case-detail {
  display: none;
  padding: 15px;
  color: #555;
  background: #ffffff;
}

/* 1. 左側のエリア（文章＋タグ）の設定 */
.text-area {
    flex: 1;          /* 右側の画像の残りスペースを全部使う */
    min-width: 0;     /* レイアウト崩れ防止のおまじない */
    display: flex;    /* 縦並びにする準備 */
    flex-direction: column; /* 文章の下にタグが来るように縦並び指定 */
    justify-content: center; /* 上下中央揃え */
    padding-right: 15px; /* 画像との間に少し隙間を作る */
}

/* 以前の p タグの設定が邪魔をするので、ここでリセット */
.case-detail-inner .text-area p {
    flex: initial;    /* 幅いっぱいに広がるのを解除 */
    margin-bottom: 10px; /* 文章の下（タグとの間）に隙間をあける */
}

/* 2. タグ全体のエリア */
.tag-list {
    display: flex;
    flex-wrap: wrap;  /* タグが多くなったら折り返す */
    gap: 8px;         /* タグ同士の間隔 */
}

/* 3. タグ個別のデザイン */
.tag {
    font-size: 0.8rem;      /* 文字は少し小さめ */
    background-color: #EAF9F8; /* 背景色（薄い青） */
    color: #555;            /* 文字色 */
    padding: 4px 10px;      /* タグの内側の余白 */
    border-radius: 4px;     /* 角を少し丸める */
    border: 1px solid #dbe4ef; /* 薄い枠線 */
}

/* -------------------------------------------
   リンク（aタグ）を含むタグの特別デザイン
------------------------------------------- */

/* リンクが含まれているタグの背景色を変更 */
.tag:has(a) {
    background-color: #fff4ce; /* 背景色：薄い黄色（目立つように変更） */
    border-color: #e6d295;     /* 枠線：少し濃い黄色 */
    transition: background-color 0.2s; /* ホバー時の変化を滑らかに */
}

/* リンク付きタグにマウスを乗せたとき */
.tag:has(a):hover {
    background-color: #ffe69c; /* ホバー時は少し濃くする */
    cursor: pointer;
}

/* リンクの文字色などの調整（お好みで） */
.tag a {
    color: #8a6d3b;        /* 文字色：背景に合わせた濃い茶色など */
    display: inline-block; /* クリック範囲などの挙動を安定させる */
    text-decoration: underline; /* 下線を消す */
}



/* カードレイアウト（サービス紹介など） */
.cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* スマホで折り返す設定 */
    gap: 20px;
    text-align: center;
}

.card {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex: 1;
    min-width: 250px; /* カードの最小幅 */
    text-align: center;
    line-height: 1.8; /* 16px × 1.8 = 28.8px の行高になる */
}


/* --- 地図（Google Map）の調整 --- */

.map-wrapper {
    margin-top: 40px; /* 上のテキストとの隙間 */
    text-align: center; /* 「アクセス」という文字を中央に */
}

.map-wrapper h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
}

/* iframe（地図本体）のサイズ調整 */
.map-wrapper iframe {
    width: 100%;      /* 横幅を親要素（画面）いっぱいに広げる */
    max-width: 1000px; /* ただし、PCで広がりすぎないように最大幅を決める */
    height: 400px;    /* 地図の高さを見やすいサイズに固定 */
    border: none;     /* 枠線を消す（必要に応じて） */
    border-radius: 8px; 
    filter: grayscale(60%);
}

/* フッター */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    font-size: 10px;
    padding: 20px 0;
}

/* スマホ向け調整 (画面幅が600px以下の場合) */
@media (max-width: 600px) {
    .header-container {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
    
    nav ul {
        margin-top: 15px;
    }
    
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .cards {
        flex-direction: column;
    }
}