@charset "utf-8";

/* ベース設定 */
:root {
    --primary-pink: rgb(232, 175, 248);
    --accent-black: #222;
}

body {
    /* 指定されたフォント + 読みやすいフォントのスタック */
    font-family: 'Space Mono', 'Courier New', Courier, monospace;
    background: linear-gradient(144deg, #f3717b, #f3ce71, #52cbd2, #f3a232);
    background-size: 800% 800%;

    animation: bgani 24s ease infinite;
    color: var(--accent-black);
    overflow-x: hidden; /* 横スクロール防止 */
}
@keyframes bgani {
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}
}

/* タイトルスタイル */
h1.hero-title {
    font-size: clamp(3rem, 10vw, 6rem); /* レスポンシブなサイズ */
    font-weight: 800;
    line-height: 1;
    text-align: center;
    color: #fff;
  text-shadow: -1px 9px 11px #4040406b;
    opacity: 0; /* アニメーション前は非表示 */
    transform: translateY(50px);
        background: linear-gradient(45deg, #ff00d0, #0eacf5, #04d8a3);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

h2.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    background:#2a2a2aed;
    color: #fff;
    padding: 0.2em 0.5em;
    transform: skew(-5deg); 
}


/*--------------------------------------
  カード
--------------------------------------*/
#sec {
  padding: 0;
  background: #fff;
  text-align: center;
  word-wrap: break-word;
}

#sec ul {
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
  border: none;
}
#sec ul li {
    padding: 20px 5px;
    width: 320px;
    background: #000000ba;
    transition: box-shadow 0.3s;
    border: solid 3px;
    margin: 0.5em;
}
#sec ul li:hover {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
#sec ul li:hover span {
  color: #63B7E6;
}
#sec ul li:hover p {
  color: #555;
}
#sec ul li:hover .title01 {
  color: #63B7E6;
}
#sec ul li:hover .title01:after {
  width: 25px;
}
#sec ul li span {
  font-size: 2.6em;
  display: block;
  transition: color 0.3s;
  color: #A2A2A2;
}
#sec ul li span:before, #sec ul li span:after {
  position: static;
}
#sec ul li .title01 {
    color: #b959d6;
    display: inline-block;
    font-size: 1.2em;
    font-weight: 100;
    text-align: center;
    font-weight: bold;
  transition: color 0.3s;
}
/*#sec ul li .title01:after {
  content: "";
  position: relative;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  display: block;
  width: 40px;
  height: 1px;
  background: #6f6f6f;
  transition: width 0.3s;
}*/
#sec ul li p {
  color: #A2A2A2;
  text-align: left;
  text-indent: 1em;
  font-size: 16px;
  line-height: 26px;
  transition: color 0.3s;
}
.sec_li_img{
  margin: 0 auto;
}


/* スクロールインジケーター */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    text-align: center;
    animation: bounce 2s infinite;
}
.scroll-indicator span {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* 共通アニメーション初期状態 */
.content-card, .work-card, .skill-item {
    opacity: 0;
    transform: translateY(30px);
}


/* カスタムカーソル（PCのみ） */
@media (pointer: fine) {
    .cursor-dot,
    .cursor-outline {
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: 9999;
        pointer-events: none;
    }

    .cursor-dot {
        width: 8px;
        height: 8px;
        background-color: rgb(43, 43, 43);
    }

    .cursor-outline {
        width: 40px;
        height: 40px;
        border: 2px solid rgb(58, 58, 58);
        transition: width 0.2s, height 0.2s;
    }
}
.star-particle {
    position: fixed;
    line-height: 1;
    user-select: none;
    /* 星に光彩（グロー）をつけてキラキラ感をアップ */
    text-shadow: 0 0 5px rgba(247, 127, 153, 0.8);
}
/* プレビュー画像のコンテナ（初期は非表示） */
.hover-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px; /* 任意のサイズ */
    height: 200px;
    background-size: cover;
    background-position: center;
    pointer-events: none; /* マウスイベントを邪魔しない */
    z-index: 999;
    opacity: 0;
    transform: scale(0.8);
    border: 4px solid #000000e2; /* サイトのトンマナに合わせる */
    border-radius: 8px;
    display: none; /* JSで制御 */
}