@charset "utf-8";

body{
    margin: 0;
    font-family: sans-serif;
}
#hero{
background-image: url("images/hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  /* ここがポイント！ */
  background-size: cover; 
  height: auto; /* 高さ固定（100vh）だと上下に余白が出るため */
  aspect-ratio: 16 / 9; /* 画像の比率に合わせて調整（例：16:9） */
}
.site-header {
    position: absolute; /* 浮かせる */
    top: 0;             /* 上端ぴったり */
    left: 0;            /* 左端ぴったり */
    width: auto;        /* 幅いっぱいにせず、ロゴのサイズに合わせる */
    padding: 30px 40px; /* ここで左上からの隙間を作る */
    z-index: 1000;      /* 何よりも上に */
}
.logo {
    pointer-events: auto; /* ロゴのクリックだけは有効にする */
}

.logo img {
    height: 100px;
    width: auto;
    display: block;
}
.menu-trigger {
        display: none; /* ボタンを隠す */
}

/* 右側縦固定ナビバー（ボタンのみ） */
.navbar-fixed-right {
    position: fixed;     /* 画面に固定 */
    right: 20px;         /* 右端からの距離 */
    top: 25%;            /* 上下中央 */
    transform: translateY(-50%);
    z-index: 9999;
}

.nav-links {
  display: flex;
    flex-direction: column; /* 縦並び */
    align-items: flex-end; /* ★ここが重要：子要素を右側に寄せる */
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: white; 
  font-size: 1.4rem; 
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.nav-links li {
    margin-left: 30px; /* 画像同士の間隔 */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右揃えを確実に */
}
.nav-links img {
    /* メニュー画像の高さを揃えるのがポイント */
    height: 50px; 
    width: auto;
    /* 画像の「文字」をくっきりさせるおまじない */
    image-rendering: -webkit-optimize-contrast;
}

/* 画像のホバーエフェクト */
.nav-links img:hover {
    opacity: 0.7;
}

#message-section {
  display: flex;
  justify-content: center; /* 左右の中央寄せ */
  align-items: center;     /* 上下の中央寄せ（高さがある場合） */
  text-align: center;      /* 文字自体を中央揃えにする */
  padding: 100px 20px 0 20px;
  font-family: "Noto Serif JP", serif;
  line-height: 3.0;
  font-size: 30px;
}
.section-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 50px;
}
.section-divider img {
  width: 200px;
  height: auto;
}
.footprints {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;
  gap: 20px;            /* 足跡同士の間隔 */
  margin-bottom: 80px;  /* 次のコンテンツとの距離 */
}
.pad img {
    width: 50px; /* 好きなサイズ（小さめが可愛いかも） */
    height: auto;
    display: block;
}
/* 1個目：真ん中より少し左 */
.pad:nth-child(1) {
    transform: translateX(-30px) translateY(20px);
}
.pad:nth-child(1).show {
    transform: translateX(-30px) translateY(0);
}

/* 2個目：真ん中より少し右 */
.pad:nth-child(2) {
    transform: translateX(30px) translateY(20px);
}
.pad:nth-child(2).show {
    transform: translateX(30px) translateY(0);
}

/* 3個目：また少し左 */
.pad:nth-child(3) {
    transform: translateX(-20px) translateY(20px);
}
.pad:nth-child(3).show {
    transform: translateX(-20px) translateY(0);
}
/* 1個目：左向きに傾ける */
.pad:nth-child(1) img {
    transform: rotate(-15deg);
}

/* 2個目：右向きに傾ける */
.pad:nth-child(2) img {
    transform: rotate(15deg);
}

/* 3個目：また少し左向きに */
.pad:nth-child(3) img {
    transform: rotate(-10deg);
}
.about-header {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.about-title-img {
  width: 400px; /* PCでのサイズ */
  height: auto;
}
.about-content {
  text-align: center; 
  max-width: 800px; 
  margin: 0 auto; 
}

.about-profile-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}
.about-content h3 {
      /* ① フォントの種類 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  
  /* ② 文字の大きさ */
  font-size: 20px; 

    /* ④ 字間（少し広げるとおしゃれに） */
  letter-spacing: 0.1em;
}
.about-content p {
  /* ① フォントの種類 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  
  /* ② 文字の大きさ */
  font-size: 18px; 
  
  /* ③ 行間（ゆとりの正体！） */
  line-height: 1.8; /* 標準より少し広めにすると読みやすい */
  
  /* ④ 字間（少し広げるとおしゃれに） */
  letter-spacing: 0.05em;
  
  /* ⑤ 横幅のゆとり */
  max-width: 700px; /* 1行が長すぎないように制限 */
  margin: 0 auto;   /* 中央配置 */
  padding: 20px;    /* 周囲の余白 */
  
  color: #333;      /* 真っ黒より少しグレーにすると目が疲れません */
}
/* スキル全体を包む枠 */
.skills-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;            /* 項目同士の隙間 */
  flex-wrap: wrap;      /* 画面幅に合わせて折り返す */
  margin-top: 30px;
  text-align: left;     /* 文章は左寄せで見やすく */
}

/* カテゴリーごとのカード設定 */
.skill-category {
  background: #fafafa;  /* ほんのりグレーの背景 */
  padding: 30px;
  border-radius: 15px;
  flex: 1;              /* 同じ幅で広がる */
  min-width: 300px;     /* 最低限の幅 */
  max-width: 350px;     /* 広がりすぎないように */
  border: 1px solid #eee;
}

.skill-category h4 {
  font-size: 20px;
  color: #333;
  border-bottom: 2px solid #333; /* カテゴリー名の下線 */
  padding-bottom: 10px;
  margin-bottom: 20px;
  text-align: center;
}

/* 項目と説明文の装飾 */
.skill-category dt {
  font-weight: bold;
  font-size: 16px;
  color: #444;
  margin-top: 15px;
}

.skill-category dd {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-left: 0;       /* デフォルトの余白を消す */
  margin-bottom: 10px;
}
.works-header {
    padding-top: 100px;
    margin-bottom: 80px;
}

.works-title-img {
    width: 500px; 
    height: auto;
    display: block;
    margin: 0 auto; /* 真ん中寄せ */
}
/* Webサイトセクションのグリッド */
.works-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* PC版は2列に分ける */
    gap: 60px 40px;               /* 縦に60px、横に40pxの余白 */
    max-width: 1000px;
    margin: 0 auto;
}

/* 作品ごとの塊 */
.work-item {
    display: flex;
    flex-direction: column;
}

.work-card {
    text-decoration: none;
    color: #333;
}

.work-card img {
    width: 100%;
    aspect-ratio: 16 / 9; /* 全ての画像比率を強制的に揃えると超綺麗に見えます */
    object-fit: cover;    /* 比率を無視して枠いっぱいに埋める */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.work-title {
  font-size: 16px;       /* タイトルの大きさ */
  font-weight: bold;     /* タイトルを太字にする */
  color: #333;           /* タイトルの色 */
}

.url {
  margin-left: 15px;     /* 「みのり農園」との間のスペース */
  font-size: 14px;       /* URLを小さくする */
  font-weight: normal;   /* URLを細く（普通に）する */
  color: #888;           /* 少し薄めの色にすると、よりURLっぽくなります */
}


.work-info {
    margin-top: 10px;
}

.work-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}

.work-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}
.work-category-block h3 {
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

/* 見出しの下に線を引く */
.work-category-block h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 線を中央に置く */
    width: 40px;                 /* 線の長さ */
    height: 2px;                 /* 線の太さ */
    background: #333;            /* 線の色 */
}
.work-card img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.grid-graphic {
    display: grid;
    /* 1列目（バナー）は300px固定、2列目（チラシ）は残りの幅全部 */
    grid-template-columns: 300px 1fr; 
    gap: 40px;
    align-items: start;
}
/* 画像の基本設定 */
.work-card img {
    width: 100%;
    display: block;
    border-radius: 4px; /* 少し角を丸くするとプロっぽくなります */
}


/* テキスト周りの整理 */
.work-title {
    font-size: 18px;
    margin: 15px 0 5px;
}

.description-flex {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.desc-item {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}
.grid-graphic .work-card img {
    height: auto;          /* 以前の300px固定を解除 */
    object-fit: cover;     /* デフォルトはカバーに */
    background-color: transparent; 
}

/* --- バナーを強制的に正方形にする --- */
.img-banner {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* 強制的に1:1に */
    object-fit: cover !important;
}

/* --- チラシのセットを綺麗に見せる --- */
.flyer-flex {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #f5f5f5;
}

.flyer-flex img {
    width: calc(50% - 5px); /* 隙間を考慮した50% */
    aspect-ratio: 1 / 1.414 !important; /* A4比率を強制 */
    object-fit: contain !important;    /* 縦長を維持して収める */
    background: #fff;
}
/* 動画セクション全体の調整（グリッドを解除） */
.work-category-block .works-grid.video-single {
    display: block !important;    /* グリッドを解除 */
    text-align: center !important; /* 動画と箱全体を中央へ */
}

/* 動画とテキストを包む塊 */
.work-item-centered {
    display: inline-block;        /* 動画の幅に合わせる */
    text-align: left;             /* ★ここが重要：中身のテキストだけを左揃えにする */
}

/* 動画プレイヤーの見た目（幅はHTMLのwidth="700"が優先されます） */
.work-video-player {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: #000;
}

/* タイトルとの余白 */
.work-item-centered .work-title {
    margin-top: 15px;
    font-size: 18px;
}
/* フッター全体のスタイル */
.footer {
    background-color: #f9f9f9; /* サイトに合わせて調整してください */
    padding: 40px 20px 40px;   /* 上にしっかり余白をとる */
    text-align: center;
    margin-top: 100px;
}

.nekoface{
    width: 150px;
}
/* メッセージ文 */
.footer-text {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 40px; /* メールアドレスとの距離 */
}

/* メールアドレスのリンク */
.email-link {
    font-size: 22px;        /* 少し大きめで存在感を出す */
    color: #333;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #ccc; /* 下線をつけてリンクと分かりやすく */
    padding-bottom: 8px;
    transition: all 0.3s ease;
}

.email-link:hover {
    color: #888;
    border-bottom-color: #888;
}

/* コピーライト部分 */
.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
}

.copyright {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.1em;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px; /* ナビバーの高さ分だけ手前で止まる */
}












/* 画面幅が768px以下（スマホ・タブレット）になった時の設定 */
@media (max-width: 768px) {
#hero {
    height: auto;
    min-height: 0;
    padding: 120px 20px; /* 上下に大きな余白を確保して中央に見せる */
    display: block;
  }
.site-header {
        padding: 20px 20px;
    }


    .logo img {
    height: 80px; /* スマホではロゴを少し小さく */
}

    #message-section {
    /* スマホでは文字を少し小さくして、行間も少し詰める */
    font-size: 20px;   /* 30pxから20pxに。これくらいがスマホでは読みやすいです */
    line-height: 2.0;   /* 3.0だとスマホでは隙間が空きすぎるので2.0くらいに */
    padding: 60px 20px 0 20px; /* 上下の余白も少し削ってコンパクトに */
  }
  .section-divider img {
    width: 120px; /* PCが200pxなら、スマホは120px〜150pxくらいがスッキリします */
  }
  /* 足跡全体のエリア調整 */
    .footprints {
        gap: 20px;           /* 縦の間隔を少し詰める */
        margin-bottom: 60px; /* 下の余白をスマホサイズに */
    }

    /* 肉球自体のサイズをスマホ用に少し小さく */
    .pad img {
        width: 35px; 
    }

    /* ジグザグの振り幅をスマホ向けに小さく調整 */
    .pad:nth-child(1) {
        transform: translateX(-20px) translateY(15px); /* -35pxから-20pxへ */
    }
    .pad:nth-child(1).show {
        transform: translateX(-20px) translateY(0);
    }

    .pad:nth-child(2) {
        transform: translateX(20px) translateY(15px);  /* 35pxから20pxへ */
    }
    .pad:nth-child(2).show {
        transform: translateX(20px) translateY(0);
    }

    .pad:nth-child(3) {
        transform: translateX(-15px) translateY(15px); /* -20pxから-15pxへ */
    }
    .pad:nth-child(3).show {
        transform: translateX(-15px) translateY(0);
    }
    .about-header {
    margin-bottom: 20px; /* スマホでは余白を狭くする */
  }

  .about-title-img {
    width: 50%; /* スマホでは画面幅に合わせて可変にする */
  }
  .about-profile-img {
    width: 200px; /* スマホでは顔写真を少し小さく */
    height: 200px;
  }
  
  .about-content p {
    padding: 0 20px; /* スマホで文字が画面端にくっつかないように余白を追加 */
    font-size: 14px; /* 文字を少し小さくして読みやすく */
  }
  .about-content p {
    font-size: 13px; /* スマホでは少しだけ小さく */
    line-height: 1.7;
    width: 90%;      /* スマホ画面の左右に少し隙間を作る */
  }
  .skills-wrapper {
        display: block;      /* 以前のflexを解除 */
        width: 100%;         /* 幅いっぱいを基準にする */
        padding: 0;          /* 親のパディングをリセット */
  }
  .skill-category {
        width: 80%;          /* 画面の約9割の幅にする */
        margin: 0 auto 30px; /* 左右中央寄せ ＋ 下に隙間 */
        padding: 20px;       /* 箱の内側に余白（必要なら） */
        background: #fff;    /* 背景色（デザインに合わせて） */
        box-sizing: border-box; /* パディングを含めた幅計算 */
  }
  .skill-category h4 {
        margin-top: 0;
        text-align: center;  /* タイトルを中央に */
    }
  .skill-category dl {
        margin: 0;
    }
  .work-title {
        max-width: 280px; /* 画像の幅と合わせる */
        margin: 15px auto 5px; /* 上15px、左右autoで中央、下5px */
        text-align: left; /* 文字自体は左揃え（中央が良ければ center） */    }
  .works-title-img {
        width: 50%; 
        max-width: 250px; /* 小さくしすぎたくない場合のストッパー */
    }
.works-wrapper{
        display: block; /* もしくは flex-direction: column; */
        width: 90%;
        margin: 0 auto;
}
    /* Aboutと同じく、セクションの頭にゆとりをもたせる */
    .works-header {
        padding-top: 100px;
        margin-bottom: 30px;
    }
.works-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 60px; /* カード同士の大きな隙間 */
    }
  .work-category-block{
width: 92%;      /* 画面幅の92%にする */
        margin-left: auto;
        margin-right: auto;
        padding: 0 10px;  /* 念のための内側余白 */
        box-sizing: border-box; /* 余白を含めた幅計算にする */
}  
.work-info {
        margin-top: 10px !important; 
        padding-bottom: 30px; /* 次の作品との間隔をしっかり空ける */
        /* 文字が重ならないように高さを自動にする（念のため） */
        height: auto !important;    }
.grid-graphic {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px; /* 画面の端から20pxずつの余白 */
    }
.work-meta {
        margin-bottom: 10px;
        line-height: 1.6;
}
.work-text {
        line-height: 1.6; /* 行間を広げて読みやすくする */
        
}
.works-grid:not(.grid-graphic) .work-info {
        margin-top: -70px !important; /* ここの数字でWebサイト側の隙間を微調整！ */
    }
/* 2. バナーのサイズが大きくなりすぎないように制限 */
    .work-card-group:has(.img-banner) {
        max-width: 280px; /* バナーの最大幅を小さめに制限 */
        margin: 0 auto;  /* 中央に配置 */
    }
 /* Webサイト制作（works-grid）の画像も大きすぎないように調整 */
    .works-grid .work-card img {
        width: 100%;
        height: auto;
        max-width: 320px; /* 画像が巨大化するのを防ぐ */
        margin: 0 auto;   /* 中央寄せ */
        display: block;
    }

    /* Webサイトのタイトルや説明文も中央に寄せる */
    .works-grid .work-card,
    .works-grid .work-info {
        max-width: 320px;
        margin: 0 auto 20px;
    } 
  
.flyer-flex {
        flex-direction: column;
        align-items: center; /* チラシを中央に寄せる */
        background: transparent;
        padding: 0;
        gap: 30px;
    }
.flyer-flex img {
        width: 100%;
        max-width: 280px; /* チラシもバナーと同じ幅に揃える */
        height: auto;
        aspect-ratio: 1 / 1.414;
        margin: 0 auto;
    }
.work-info {
        max-width: 280px;
        margin: 10px auto 0;
        text-align: left; /* テキストは左揃えが見やすい */
    }
.description-flex {
        flex-direction: column;
        gap: 15px;
    }

/* 1. 動画本体の設定：画面からはみ出さない */
.work-video-player {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 2. 重なりの最大の原因をピンポイントで解除 */
/* .video-singleの中にあるwork-infoだけは、突き上げ(-70px)を絶対にしない */
.works-grid.video-single .work-info {
    margin-top: 20px !important; /* マイナスを上書きして、余白を作る */
    padding-top: 0 !important;
    position: relative;
    clear: both; /* 回り込みなどの干渉を避ける */
}

/* 3. タイトルと情報のサイズ感を他のカードと統一 */
.video-single .work-item-centered {
    max-width: 320px; /* Web制作の画像幅と合わせる */
    margin: 0 auto !important;
    display: block;
}

/* 4. タイトルの重なり防止と見た目 */
.video-single .work-title {
    max-width: 100% !important;
    margin: 15px 0 10px !important; /* タイトル上下にしっかり余白 */
    text-align: left;
    line-height: 1.4;
}

/* 5. 使用ツール部分を左揃えにする */
.video-single .work-meta span {
    display: inline-block;
    text-align: left;
    width: 100%;
}

.footer {
        padding: 60px 15px 30px; /* 余白を少し詰める */
        margin-top: 60px;
    }

    .nekoface {
        width: 100px; /* スマホでは少し小さく */
    }

    .footer-text {
        font-size: 14px; /* 文字を少し小さく */
        line-height: 1.6;
    }

    .email-link {
        font-size: 17px; /* アドレスが1行に収まりやすいサイズ */
        border-bottom-width: 1px;
    }

    .footer-bottom {
        margin-top: 40px;
    }
    
    /* スマホで改行を活かすか、消すかの調整 */
    .footer-text br {
        display: block; /* 改行を有効にする */
    }

/* ハンバーガーメニュー　*/
/* 1. ボタン本体 */
.menu-trigger {
  display: block; 
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 10000; /* 一番手前に */
  cursor: pointer;
}

/* 2. 三本線のデザイン */
.menu-trigger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #333;
  transition: all 0.4s;
}
.menu-trigger span:nth-of-type(1) { top: 10px; }
.menu-trigger span:nth-of-type(2) { top: 20px; }
.menu-trigger span:nth-of-type(3) { top: 30px; }

/* 3. ボタンが「×」になる設定 */
.menu-trigger.is-active span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
.menu-trigger.is-active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.is-active span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg); }

/* 4. メニュー本体 */
.navbar-fixed-right {
  position: fixed;
    top: 0;
    right: -100%; /* 隠す */
    width: 70%;
    height: 100vh;
    background: #fff;
    transition: 0.3s;
    transform: none; /* PC版の中央寄せを解除 */
    display: block;  /* 念のため表示状態にする */
}


/* 5. メニューが開いた時（is-activeがついた時） */
.navbar-fixed-right.is-active {
  right: 0; /* 画面の右端にぴったり合わせる */
}

/* 6. 中のリンク設定 */
.nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  list-style: none; /* 点々を消す */
  padding: 0;
}

.nav-links img {
  height: 40px; /* メニュー内の画像の大きさ調整 */
  width: auto;
  opacity: 0.7;
}





    html {
        scroll-padding-top: 55px; /* スマホのナビの高さに合わせる */
    }

  }