@charset "UTF-8";

* {
    margin: 20;
    padding: 0;
    background-color: #efefef;
    background-image: linear-gradient(90deg, #393b3d80 0.5px, transparent 0.5px), linear-gradient(#393b3d80 0.5px, transparent 0.5px);
    background-position: 10px 10px;
    background-size: 21px 21px;
    background-attachment: fixed;
    text-decoration: none;
    color: black;
    font-family: Arial, Helvetica, sans-serif;


}

.header {
    color: black;
    position: sticky;
    top: 0;
    background-color: #ffffff;
    width: 100%;
    z-index: 1000;
    
}



body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}


.images {
    width: 200px;
    height: 200px;
    display: block;
    margin: auto;
}

/* 猫のアイコン */



/* 2. 中身を左右に振り分け、高さを「細く」する */
.header-wrap {
  display: flex;            /* 中身（h3とnav）を横並びにする */
  justify-content: space-between; /* 左端と右端にキッチリ寄せる */
  align-items: center;      /* 上下の中央に配置する */
  
  /* ここでヘッダーの「細さ」をコントロールします */
  padding: 10px 40px;       /* 上下に10px、左右に40pxの余白を作る */
  
  /* もし高さを数値でガチッと決めたい場合は、以下のように指定してもOKです */
  /* height: 60px; */ 
}

/* 3. ナビゲーションのメニュー（ul）も横並びにする */
.header-pc ul {
  display: flex;            /* top, work, aboutを横並びにする */
  list-style: none;         /* ポチ（・）を消す */
  margin: 0;
  padding: 0;
  gap: 20px;                /* メニュー同士の間隔を20pxあける */
}

/* 4. リンクの見た目を整える（下線を消すなど、お好みで） */
.header-wrap a {
  text-decoration: none;
  color: #333333;
}


.text1 {
    font-weight: bolder;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    margin: 10px 10px;
}

#wrap {
    display: inline-block;
    text-align: center;
    margin: 0 15px;

}


nav ul li {
    display: inline-block;
    text-align: center;
    margin: 10px;

    a:visited {
        color: rgb(0, 0, 0);
        /* : 訪問済みのリンク */

    }

}

.Light {
    text-align: center;
    width: 500px;
    height: auto;
    display: block;
    margin: auto;

}


/* 1. 全体の並び方（背景がないので、すき間を少し広めの 40px に調整しています） */
.worksList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center;
    gap: 40px 30px;
    /* 縦のすき間を40px、横のすき間を30pxに */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 2. 各アイテムの設定（白い背景と影を削除しました） */
.worksList .item {
    background: none;
    /* 背景を透明に */
    box-shadow: none;
    /* 影をなしに */
}

/* 3. リンクの設定 */
.worksList .m_linkWork {
    text-decoration: none;
    color: #333333;
    /* 文字色（背景が透明なので、サイト全体の背景色に合わせて調整してください） */
    display: block;
}

/* 4. 画像の「枠」の設定（角の丸みを画像側につけたい場合はここで調整） */
.worksList .thumbArea {
    overflow: hidden;
    /* 拡大した画像が枠からはみ出ないようにする */
    display: block;
    border-radius: 4px;
    /* もし画像の角を少し丸くしたい場合は、ここをお好みの数値に（不要なら削除してOK） */
    /* ⬇️ 黒い影の設定：右に0、下に6pxずらし、16px分ぼかす（透明度12%の黒） */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 5. 画像そのものの設定 */
.worksList .thumbArea img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    /* 画像だけをなめらかに動かす設定 */
}

/* 6. マウスを乗せたとき：画像だけを拡大する */
.worksList .m_linkWork:hover .thumbArea img {
    transform: scale(1.06);
    /* すっきりしたデザインに合わせて、拡大率を少し控えめ（1.06倍）に調整 */
}

/* 7. テキスト部分の設定 */
.worksList .workInfo {
    padding: 12px 0 0 0;
    /* 背景がなくなったので、画像のすぐ下にだけ余白を空ける */
}

.worksList .workTitle {
    margin: 0;
    font-size: 15px;
    /* 少しシャープに見せるために15pxに微調整 */
    line-height: 1.4;
    font-weight: 500;
    /* 太すぎず細すぎない、すっきりした太さに */
}


html {
    scroll-behavior: smooth;
}


.about .portrait{
    display: grid;
    /* 横に3つ並べる設定（1frは等分という意味） */
    grid-template-columns: repeat(1, 2fr); 
    /* 画像の間の隙間 */
    /* コンテナ全体の幅（任意） */
    max-width: 250px;
    margin: 10 auto;

}

.container .back-link {
    display: block;
    width: fit-content;
    margin: 0 0 32px 0;
    font-size: 14px;
    color: #666;
    transition: color 0.2s;
}
.container .back-link:hover {
    color: #000;
}