@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;


}

.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;
}


.morePege {
  display: inline-block; /* リンクをボタンの四角い形状にする */
  margin: 30px auto 0 auto; /* 画像との間に隙間を作り、真ん中に寄せる */
  
  /*  ボタンのデザイン */
  background-color: #333333; /* ボタンの背景色） */
  color: #ffffff;            /* 文字の色 */
  padding: 12px 30px;        /* ボタンの内側の余白（上下に12px、左右に30px） */
  border-radius: 25px;       /* ボタンの角の丸み（数値を大きくするとカプセル型に） */
  
  /* リンクの下線を消す */
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  
  /* 💡 マウスを乗せたときに滑らかに変化させる設定 */
  transition: all 0.3s ease;
}

/* 🖱️ マウスを乗せたとき（ホバー時）の演出 */
.morePege:hover {
  background-color: #555555; /* 背景色を少し明るくする */
  transform: translateY(-2px); /* ボタンを少しだけ上にふわっと浮かせる */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 薄い影をつけて立体感を出す */
}


.section .morePege の上にあるdivのクラス名 {
  display: flex;
  flex-direction: column; /* 中身を上から下に並べる */
  align-items: center;    /* 💡 これで真ん中（中央）に揃います */
}




.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;

}

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

}

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

}

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

/* 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 img.portrait {
    display: block;
    max-width: 250px;
    width: 100%;
    height: auto;
    margin: 12px auto 0;
    padding: 12px;
    border-radius: 24px;
    box-sizing: border-box;
    background-clip: padding-box;
}

.about-profile {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    width: min(900px, 90%);
    margin: 0 auto;
    text-align: left;
}

.about-profile-text {
    flex: 1;
}

.about-profile-text p {
    margin: 0 0 12px;
    line-height: 1.8;
}

/* 通常のセクション（見た目をわかりやすくするための設定） */
.normal-area {
  padding: 40px;
  text-align: center;
  background-color: #ffffff;
}

/* ★ランダム配置を行う指定のセクション */
.about-mainArea {
  position: relative;    /* 必須：子要素（テキスト）の位置の基準点になる */
  overflow: hidden;     /* 必須：セクション外にはみ出た文字を非表示にする */
  width: 90%;
  height: 180px;        /* ランダムに動かしたいエリアの高さを指定 */
  /* background-color: #e0f2f1; 範囲がわかりやすいように色をつけています
  border: 2px dashed #004d40; */
}

.random-text {
  /* 絶対配置（必須）。これによってJSで自由な位置に動かせるようになります */
  position: absolute; 
  font-weight: bold;
  font-size: 1rem;
  color: #4b4b4b;
  /* テキストが途中で勝手に改行されるのを防ぐ */
    white-space: nowrap;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    filter: blur(6px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        filter 0.8s ease;
    will-change: opacity, transform, filter;
}

.random-text.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.about-profile-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}