body {
  margin: 0;
  padding: 0;
  background-color: #FEFDF9;
  color: rgb(2, 2, 2);
  text-align: center;
  /* 背景・ノイズ設定はそのまま維持 */
  background-blend-mode: overlay;
  opacity: 0.8;
  /* ↓ これを追加：横方向のはみ出しをカットする */
  overflow-x: hidden; 
  width: 100%;
}
/* マウスを消す */
body, a, button, .mouse-stalker-hover {
    cursor: none !important;
}

/* 親要素（位置用） */
.mouse-stalker-item {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.2s; /* 消える時のふわっと感 */
}

/* 子要素（本体：通常時の色） */
.mouse-stalker-item-circle {
    display: block;
    width: 35px; 
    height: 35px;
    opacity: 0.7;
    background-color: #a1a1a1; /* ★ここで「通常時の色」を変えられます★ */
    border-radius: 50%;
    transform: translate(-50%, -50%); /* 中心をマウスに合わせる */
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}

/* ホバー時の色と大きさ */
.mouse-stalker-item-circle.active {
    width: 43px;
    height: 43px;
    background-color: #83f187; /* ★ここで「ホバー時の色」を変えられます★ */
}

/* スマホでは非表示 */
@media (hover: none) and (pointer: coarse) {
    .mouse-stalker-item { display: none !important; }
    body { cursor: auto !important; }
}



a{
color: rgb(2, 2, 2);

}

a:hover{
color: brown;

}


h1 {
font-size: 10vw;
line-height: 6vw;
text-align: center;
color: rgb(2, 2, 2);

}

h2{
    font-size: 10vw;
    line-height: 6vw;
    text-align: center;
    font-style: Montserrat Subrayada;
    color: rgb(2, 2, 2);
    
}



.mozi1 {
  margin-top: 6vw;
  /*上方マージン*/
 
  /*左方マージン*/
  margin-bottom: 10vw;
  /*下方マージン*/
  width: 100%;
  
}

.mozi2 {
  margin-top: 6vw;
  margin-bottom: 10vw;
  /* margin-right: 50vw; を削除するか、widthを調整する */
  width: 100%; /* 100%から、marginの分を引いた値にする */
  margin-left: 0; 
}




.about.webfont.neme {
  font-size: 3vw;
  margin-top: 10px;
  
}





.about.webfont {
  margin-top: -20px;     /* 上からの距離 */
  margin-bottom: 100px;    
  /* テキストの揃え（左） */
  text-align: left;
  margin-left: 10.5%; 
  letter-spacing: 1vw;
  
}
@media screen and (max-width: 600px) {
  .about.webfont {
    /* 1. 左端からの距離をしっかり確保 */
    margin-left: 10.5%; 


    /* 2. 文字サイズをvwではなくpxかremにすると安定します */
    font-size: 10.3px; 
    line-height: 1.8;
    
  
  
    
    /* 3. 幅を少し狭めることで、右端にも余白を作ります */
    width: 85%; 
    
    /* 4. letter-spacingがPC版のままだと広すぎるので調整 */
    letter-spacing: 0.7em; 
  }
}








  .icon {    /* 上からの距離 */
    margin-bottom: 100px;    
    /* テキストの揃え（左） */
    text-align: left;
    width: 80%;
  }






p{
    font-size: 1.5vw;
    line-height: 4vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: rgb(2, 2, 2);

}













/* フォント指定 */
.joan-regular {
  font-family: "Joan", serif;
  font-weight: 400;
  font-style: normal;
}

.judson-regular {
  font-family: "Judson", serif;
  font-weight: 400;
  font-style: normal;
}

 .webfont {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
  }
  

.julius-sans-one-regular {
  font-family: "Julius Sans One", sans-serif;
  font-weight: 400;
  font-style: normal;
}



/*top部分のCSS*/
.hero-section {

  isolation: isolate;

  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 4;
  margin-bottom: 13vw;
  
  background-image: url("../img/top img.png");
  background-repeat: no-repeat; /* 繰り返しを防ぐ */

  /* --- ここを修正 --- */
  background-size: contain;     /* 画像が切れないように枠内に収める */
  background-position: right top; /* 左端・上端を基準にする */
  
  /* もし「contain」だと小さすぎる場合は、数値で指定します */
  /* background-size: 50%; */ /* 画面幅の半分くらいに抑える設定 */
}

.hero-content {
  position: absolute;
  top: 3vw;
  left: 8vw; 
  height: 100%;




  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下方向は中央 */
  align-items: flex-start;  /* ★ここを center から flex-start に変更 */
  
  font-family: "Julius Sans One", sans-serif;
  
  /* letter-spacingは % ではなく em か px で指定するのが一般的です */
  letter-spacing: 45%; /* 文字と文字の間を広げる */
  text-transform: uppercase;
  
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content h1 {
  font-weight: 400;
  margin: 0;
  font-size: clamp(20px, 4vw, 45px);
  line-height: 1.2; /* 行間を少し整える */
  display: inline-block;    /* 文字の幅に合わせて線を引くために必須 */
  border-bottom: 0.1vw solid #0b0b0b; /* 線の太さ、種類、色 */
  padding-bottom: 5px;      /* 文字と線の間の距離 */
}

.hero-content p {
  font-weight: 400;
  font-size: clamp(10px, 2vw, 45px);
  margin-top: 2vw; /* top: 2vw の代わりに margin で間隔をあける */
  margin-left: 0.2vw; /* 視覚的にh1と揃うように微調整 */
}



/* topアニメーション本体（ふわっと出る例） */
/* 1. 1文字ずつに分割されたspanの初期状態 */
.js-hero-appear span {
  display: inline-block; /* 動き（transform）をつけるために必須 */
  opacity: 0;            /* 最初は隠す */
  filter: blur(8px);     /* 隠し味：最初は少しボカしておく */
  transform: translateY(20px) scale(0.9); /* 少し下から、かつ小さめに配置 */
  
  /* 動きの滑らかさ設定（0.8秒かけて優雅に動く） */
  transition: 
    opacity 0.8s ease-out, 
    filter 0.8s ease-out, 
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2. JavaScriptで .is-active がついた後の状態 */
.js-hero-appear.is-active span {
  opacity: 1;
  filter: blur(0);       /* ボカシをなくす */
  transform: translateY(0) scale(1); /* 元のサイズと位置に戻る */
}

/* 3. フォント固有の微調整（以前お伝えしたスタイルの統合） */
.js-hero-appear {
  font-family: "Julius Sans One", sans-serif;
  letter-spacing: 0.2em; /* 字間をあけるとピロピロが綺麗に見えます */
  text-transform: uppercase;
}


.hero-section {
  position: relative; /* 左下の基準点になります */
  width: 100%;
  height: 100vh;
  overflow: hidden; /* 画像がはみ出してもスクロールバーを出さない */
}



.hero-fixed-img {
  z-index: 1 !important;
  /* ページ全体（body）を基準に配置 */
  position: absolute; 
  left: 0;
  
  /* --- ここが修正のポイント --- */
  top: auto;      /* top指定を解除 */
  bottom: calc(100% - 100vh); /* ページの底から「最初の1画面分」を引いた位置 */
  bottom: -7vw; 

  z-index: 10;
  line-height: 0;
}

.hero-fixed-img img {
  display: block;
  width:  280px;      /* 画面幅に比例 */
  height: auto;
 
  
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* 4秒後にふわっと出す */
.hero-fixed-img.is-active img {
  opacity: 1;
  transform: translateY(0);
}



@media screen and (max-width: 470px) {
  .hero-section {
    /* 1. 画像を画面幅の3倍（300%）にして巨大化！ */
    /* 横幅を300%にし、高さは比率を保つ設定 */
    background-size: 170% auto;

    /* 2. 画像の「どの部分」を映すか（超重要） */
    /* center bottom なら画像の中央下部分をドカンと表示 */
    /* left bottom なら画像の左下をドカンと表示 */
    background-position: center bottom;

    /* 3. 巨大化した画像が横に突き出しても、スクロールさせない */
    overflow: hidden;

    /* 4. スマホで背景が途切れないよう、高さを確保 */
    height: 110vh; 
    
    /* 念のため、他の要素との重なりを防止 */
    position: relative;
    
  }
}

@media screen and (max-width: 450px) {
  .hero-fixed-img {
    /* スマホでの位置調整 */
    bottom: -3vw; /* 下に沈みすぎないよう調整（お好みで） */
    left: 0;
  }

  .hero-fixed-img img {
    /* 280pxから、スマホに合わせて小さくする */
    width: 200px;  /* ★ここでサイズを自由に小さく調整してください */
    height: auto;
    
    /* 画像の下の空白を完全に消す魔法 */
    display: block; 
  }
}







  ul {
    list-style-type: none;
}


a {
  text-decoration: none;
  color: rgb(2, 2, 2);
  /*色指定*/
}
  /*メニューの指定*/
.globalMenu {
  position: absolute;
  top: 5vw;           /* margin-topの代わりにtopを使うのが一般的 */
  left: 50%;          /* 左端を画面の50%の位置に */
  transform: translateX(-50%); /* 自分の幅の半分だけ左に戻す */
  z-index: 5;
  background-color: transparent;
}

.globalMenu ul {
  display: flex;
  list-style: none;   /* 点を消す */
  padding: 0;
  margin: 0;
}

.globalMenu ul li {
  font-size: 1vw;
  /* margin-right: 10vw; はそのままでも良いですが、
     最後のリセットが必要かもしれません */
     margin-right: 10vw;
}

.globalMenu ul li:last-child {
  margin-right: 0;    /* 一番右の余白を消すとより正確な中央になります */
}


@media screen and (max-width: 600px) {
  .globalMenu {
    /* 1. 位置の調整 */
    position: absolute;
    left: 0;
    right: 0;           /* left:0 と right:0 を両方書くと幅いっぱいに広がります */
    margin: 20px auto 0; /* 左右をautoに、上を20pxに */
    width: 100%;
    
    /* 以前の指定（27vwなど）を打ち消すために念のため追加 */
    transform: none; 
  }

  .globalMenu ul {
    display: flex;
    justify-content: center; /* これで中の li が中央に寄ります */
    padding: 0;
    margin: 0;               /* ブラウザ標準の余白をリセット */
    list-style: none;
    width: 100%;             /* ul自体も幅いっぱいに */
  }

  .globalMenu ul li {
    font-size: 8px;         /* 8pxはかなり小さいので、12px程度がオススメです */
    margin: 0;               /* marginではなくpaddingで間隔を作るのがズレにくいコツ */
    padding: 0 10px;         /* 左右に均等に余白を作る */
    white-space: nowrap;
  }
}









.mfont{
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
  }
  

 
 






 
 
 
 
 







  



/*ハンバーガーメニュー*/
/* overlay-styles.css */
/*バーガーメニューの３本線の大きさなど*/
.hamburger-overlay {
  position: fixed;
  top: 3vw;
  right: 4vw;
  z-index: 1000;
  width: 5vw;
  height: 5vw;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-overlay__line {
  position: absolute;
  left: 0.5vw;
  width: 4vw;
  height: 1px;
  background-color: #333;
  transition: all .6s;
}

/*バーガーメニューの線と線の間のマージン*/
.hamburger-overlay__line:nth-of-type(1) {
  top: 1vw;
}

.hamburger-overlay__line:nth-of-type(2) {
  top: 1.7vw
}

.hamburger-overlay__line:nth-of-type(3) {
  top: 2.4vw;
}

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #333;
}
.hamburger-overlay:hover {
  opacity: 0.3;
}

/*バーガーメニューのCLOSEボタンの位置など*/
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  transform: translateY(0.8vw) rotate(-45deg);
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-0.6vw) rotate(45deg);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  visibility: hidden;
  opacity: 0;
  transition: all .6s;
  z-index: 900;
}

.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}

/*メニューの位置*/
.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*メニュー初期位置（Y軸方向にずれる量）*/
.nav-overlay__item {
  opacity: 0;
  transform: translateY(2vw);
  transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

/*メニューが上にずれながらフェードインする*/
.nav-overlay.active .nav-overlay__item:nth-child(1) {
  transition-delay: 0.1s;
}

.nav-overlay.active .nav-overlay__item:nth-child(2) {
  transition-delay: 0.2s;
}

.nav-overlay.active .nav-overlay__item:nth-child(3) {
  transition-delay: 0.3s;
}

.nav-overlay.active .nav-overlay__item:nth-child(4) {
  transition-delay: 0.4s;
}

.nav-overlay.active .nav-overlay__item:nth-child(5) {
  transition-delay: 0.5s;
}

/*メニューの整形*/
.nav-overlay__link {
  display: inline-block;
  padding: 1.5vw;
  color: #333;
  font-size: 3vw;
  text-decoration: none;
}



@media screen and (max-width: 600px) {
  /* 1. 三本線ボタン自体の大きさをアップ */
  .hamburger-overlay {
    top: 20px;
    right: 20px;
    width: 40px;  /* 指で押しやすいサイズ */
    height: 40px;
  }

  .hamburger-overlay__line {
    width: 30px;  /* 線の長さ */
    height: 2px;  /* 少し太くして見やすく */
    left: 5px;
  }

  /* 線の間隔を広げる */
  .hamburger-overlay__line:nth-of-type(1) { top: 10px; }
  .hamburger-overlay__line:nth-of-type(2) { top: 19px; }
  .hamburger-overlay__line:nth-of-type(3) { top: 28px; }

  /* CLOSE（×）になった時の位置微調整 */
  .hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
    transform: translateY(9px) rotate(-45deg);
  }
  .hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
    transform: translateY(-9px) rotate(45deg);
  }

  /* 2. 広がった後のメニュー文字を大きく */
  .nav-overlay__link {
    font-size: 24px;      /* 3vwから固定サイズへ */
    padding: 20px 0;     /* 上下の余白を広げてタップしやすく */
    letter-spacing: 0.1em; /* 文字の隙間も確保 */
    display: block;      /* 横いっぱいに反応するように */
  }
  
  /* メニュー項目間の隙間 */
  .nav-overlay__item {
    margin-bottom: 10px;
  }
}















.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  font-size: 4vw;
}

.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  text-shadow: 0 0 10px #000;
}











.rogo {
  width: 100%;
}
.section-wrapper {
  position: relative;  /* この親の中で絶対配置 */
  width: 100%;  /* 画面いっぱいの高さにする */   /* 1画面分の高さ */
}

.mozi4 {
  margin-top: 10vw;
  width: 100%;
  /* 余白を正しく適用させる */
}





.rogo2 {
  position:absolute;
  top: -8vw;
  left: 3vw;
  width: calc(225 * 0.08vw);
  z-index: 5;
  
}

@media screen and (max-width: 600px) {
  .rogo2 {
    top: -5vw; /* スマホでの位置微調整 */
    left: 5vw;  /* スマホでの位置微調整 */
    width: 20vw; /* スマホでのサイズ調整 */
  }
}







.sns-wrapper {
 margin-top: 5vw; 


}








/* ライン全体のコンテナ */
.lines {
  position: fixed;
  top: 0;
  right: 5%;    /* 右端から少し内側に寄せる */
  width: 30vw;  /* 右側30%の範囲に収める */
  height: 100vh;
  z-index: -1;  /* 背景に回す */
  pointer-events: none;
}

/* ラインの共通設定 */
.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  background: rgba(144, 144, 144, 0.1); /* 線の色（薄い白） */
  overflow: hidden;
}

/* 落ちる光の演出 */
.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #000000 75%, #000000 100%);
  animation: drop 7s infinite;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

/* 1本目（左寄り） */
.line:nth-child(1) { left: 0%; }
.line:nth-child(1)::after { animation-delay: 2s; }

/* 2本目（真ん中） */
.line:nth-child(2) { left: 50%; }
.line:nth-child(2)::after { animation-delay: 0.5s; }

/* 3本目（右寄り） */
.line:nth-child(3) { left: 100%; }
.line:nth-child(3)::after { animation-delay: 2.5s; }

/* 落ちるアニメーション */
@keyframes drop {
  0% { top: -50%; }
  100% { top: 110%; }
}





/* =============================================
   1. 基本設定と変数
   ============================================= */
:root {
    --bg-color: #f8f9fa;
    --text-main: #333;
    --text-sub: #777;
    /* しっとり動くための加速曲線 */
    --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================
   2. ギャラリーレイアウト
   ============================================= */
.gallery-container {
    display: flex;
    justify-content: center;
    gap: 100px;
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    perspective: 1200px; /* 3D効果の奥行き */
    flex-wrap: wrap;
}

/* --- カードの基本状態（出現前） --- */
.gallery-card {
    flex: 1;
    min-width: 240px;
    max-width: 300px;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 10; /* クリックを確実にする重なり順 */
    
    opacity: 0;
    transform: translateY(60px);
    /* 出現スピードを1.2sで滑らかに */
    transition: opacity 1.2s var(--transition-smooth), 
                transform 1.2s var(--transition-smooth);
}

/* --- 画面内に入った時の状態（JSで付与） --- */
.gallery-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 表示の時間差（パラパラと出てくる効果） */
.gallery-card:nth-child(2) { transition-delay: 0.2s; }
.gallery-card:nth-child(3) { transition-delay: 0.4s; }

/* =============================================
   3. カード内部のデザイン（A4比率）
   ============================================= */
.image-box {
    width: 100%;
    aspect-ratio: 210 / 297; /* A4サイズ固定 */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    background: #fff;
    /* ホバーから戻る時の動きも滑らかに */
    transition: transform 0.6s var(--transition-smooth), 
                box-shadow 0.6s ease;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--transition-smooth);
}

.caption {
    margin-top: 15px;
    text-align: center;
    transition: transform 0.6s var(--transition-smooth);
}

.caption h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-main);
    letter-spacing: 0.05em;
}

.caption p {
    margin: 5px 0 0;
    font-size: 0.85rem;
    color: var(--text-sub);
}

/* =============================================
   4. ホバーアクション（浮き上がるエフェクト）
   ============================================= */
.gallery-card:hover .image-box {
    transform: translateY(-12px) rotateX(4deg);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.gallery-card:hover img {
    transform: scale(1.08); /* 画像のズーム */
}

.gallery-card:hover .caption {
    transform: translateY(-5px);
}

/* =============================================
   5. 拡大画面（ライトボックス）
   ============================================= */
.lightbox-overlay {
    display: none; /* JSでflexに切り替え */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999; /* 何よりも上に表示 */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px); /* 背景をぼかす */
    cursor: default;
}

#lightbox-img {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    /* 出現時のアニメーション */
    animation: zoomIn 0.4s var(--transition-smooth);
}

/* バツボタンのデザイン */
.close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
    cursor: pointer;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.close-btn::before, .close-btn::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #fff;
}
.close-btn::before { transform: rotate(45deg); }
.close-btn::after { transform: rotate(-45deg); }

@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* =============================================
   6. スマホ対応
   ============================================= */
@media (max-width: 600px) {
    .gallery-container {
        padding: 50px 20px;
        gap: 40px;
    }
    .gallery-card {
        max-width: 85%;
        min-width: 280px;
    }
}








/*横向き*/
.pfolio-wrapper {
    width: 100%;
    overflow: hidden;
    --pf-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

.pfolio-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    perspective: 1500px;
    flex-wrap: wrap;
}

.pfolio-card {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
    /* 初期状態 */
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s var(--pf-smooth), transform 1.5s var(--pf-smooth);
}

.pfolio-card.pf-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 時間差 */
.pfolio-card:nth-child(2) { transition-delay: 0.2s; }
.pfolio-card:nth-child(3) { transition-delay: 0.4s; }

.pfolio-image-box {
    width: 100%;
    aspect-ratio: 297 / 210; /* A4横 */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    background: #fff;
    transition: all 0.6s var(--pf-smooth);
}

.pfolio-image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--pf-smooth);
}

/* ホバー */
.pfolio-card:hover .pfolio-image-box {
    transform: translateY(-10px) rotateX(4deg);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}
.pfolio-card:hover img { transform: scale(1.08); }

.pfolio-caption {
    margin-top: 18px;
    text-align: center;
}
.pfolio-caption h3 { margin: 0; font-size: 1rem; color: #333; letter-spacing: 0.05em; }
.pfolio-caption p { margin: 5px 0 0; font-size: 0.8rem; color: #999; }

/* ライトボックス */
.pfolio-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(12px);
    cursor: default;
}

#pfolio-lightbox-img {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    animation: pfZoom 0.8s var(--pf-smooth);
}

.pfolio-close-btn {
    position: absolute;
    top: 30px; right: 30px;
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.pfolio-close-btn::before, .pfolio-close-btn::after {
    content: ''; position: absolute;
    width: 24px; height: 2px; background: #fff;
}
.pfolio-close-btn::before { transform: rotate(45deg); }
.pfolio-close-btn::after { transform: rotate(-45deg); }

@keyframes pfZoom {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}







.gallery-title {
    font-size: 3vw;
    text-align: center;
    margin-top: -5vw;
    margin-bottom: -1vw;
}




.gallery-title2 {
    font-size: 3vw;
    text-align: center;
    margin-top: 7vw;
    margin-bottom: -1vw;
}







.rogo2 {
    position:absolute;
    top: -8vw;
    left: 3vw;
    width: calc(225 * 0.08vw);
}






/* --- ① どんな要素にも使える「ふわっ」の共通設定 --- */
.js-fade {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* JSでクラスがついた時の動き */
.js-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ② アイコンなどを順番に出す設定（nth-of-typeを使うと楽です） --- */
.icon.js-fade:nth-of-type(1) { transition-delay: 0.1s; }
.icon.js-fade:nth-of-type(2) { transition-delay: 0.2s; }
.icon.js-fade:nth-of-type(3) { transition-delay: 0.3s; }
.icon.js-fade:nth-of-type(4) { transition-delay: 0.4s; }

/* --- ③ 元々のギャラリーカード固有のデザイン（そのまま残す） --- */
.gallery-card {
    flex: 1;
    min-width: 240px;
    max-width: 300px;
    /* アニメーション設定は .js-fade に任せるのでここは消してもOK */
}

/* ホバーアクションなどもそのまま活用 */
.gallery-card:hover .image-box {
    transform: translateY(-10px) rotateX(4deg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}









/* ピロピロの設定 */
.js-piro {
    opacity: 1 !important;
}

.js-piro span {
    display: inline-block;
    opacity: 0;
    transform: translateY(5px); /* 少しだけ動かすのがおしゃれ */
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: pre; /* 空白を維持 */
}

.js-piro.is-visible span {
    opacity: 1;
    transform: translateY(0);
}










/* 外側の箱：左寄せかつ上揃えに設定 */
.profile-flex-wrapper {
    display: flex;
    justify-content: flex-start; /* 全体を左に寄せる */
    align-items: flex-start;    /* 上揃えにする（これで右上方向に配置されます） */
    gap: 13vw;                   /* 文字と画像の基本の距離 */
    padding-left: 5vw;
    margin-top: 3vw;            /* 全体的に少し上にスペースが必要な場合 */
}

/* 文字のブロック */
.text-block {
    flex-shrink: 0;
}

/* 文字のスタイル（既存のこだわりを維持） */
.text-block p {
    font-size: 1.5vw;
    line-height: 4vw;
    color: rgb(2, 2, 2);
    text-align: left;
    margin: 0;
    white-space: nowrap;
}

/* 画像の設定：さらに「右上」へ微調整 */
.profile-icon {
    margin-top: -1vw;   /* マイナスの値を入れると、文字よりさらに上に上がります */
    margin-left: 5vw;   /* 数字を大きくすると、さらに右へ離れます */
}

.profile-icon img {
    width: 25vw;        /* 画面拡大に連動するサイズ */
    max-width: 500px;
    height: auto;
    display: block;
}



@media screen and (max-width: 600px) {
    .profile-flex-wrapper {
        flex-direction: column;   /* 縦並び */
        align-items: flex-start;  /* 左揃え */        /* 10.5%から5%に減らして左へ寄せる */
        gap: 30px;
    }

   
    .text-block p {
        font-size: 16px;
        line-height: 1.8;
        text-align: left;
        white-space: normal;      /* 自動改行 */
        width: 88%;
        margin-left: 5% !important;               /* 右側の余白を削って幅を広げる */
    }

    .text-block p br {
        display: none;            /* 手動改行を無効化 */
    }

    .profile-icon {
        align-self: center;       /* 画像は中央 */
       /* padding-left分を打ち消して真ん中に */
       
    }

    .profile-icon img {
        width: 60vw;
        max-width: 300px;
        
    }
}