html {
  overflow-x: hidden;
}
/* =========================
   LOADING
========================= */
.loading-screen{
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 数字 */
.loading-counter{
  font-size: 3vw;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: 300;
}

/* バーの枠 */
.loading-bar{
  width: 200px;
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin-top: 20px;
  overflow: hidden;
}

/* 伸びるバー */
.loading-bar span{
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
}

/* SP */
@media screen and (max-width: 768px){
  .loading-counter{
    font-size: 6vw;
  }

  .loading-bar{
    width: 140px;
  }
}

body {
  background-color: #252525; /* 初期状態の暗い背景色 */
  font-family: 'Montserrat', sans-serif;
  color: white;
  margin: 0;
  transition: background-color 0.2s ease; /* 背景色がスムーズに変わる */
  overflow: hidden; /* スクロールバーを非表示 */
  overflow-x: hidden;
  overflow-y: auto;
}

.fade-in-down{
  opacity: 0;
  transform: translateY(100px); /* 初期位置を下に設定 */
}

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: hidden; /* 画像がコンテナからはみ出ないようにする */
  overflow-x: hidden;
}

.title-text {
  font-size: 9vw;
  display: flex;
  font-weight: 500;
  align-items: center;
  justify-content: space-around;
  white-space: nowrap;
  position: absolute; /* 初期位置を絶対配置 */
  top: 50%; /* 垂直方向に中央配置 */
  left: 50%; /* 水平方向に中央配置 */
  transform: translate(-50%, -50%); /* 真ん中に位置合わせ */
  z-index: 1000;
}

.title-text.sticky {
  position: fixed; /* スクロールで追従 */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.title-text.exit {
  position: absolute; /* 固定を解除 */
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}

.background-img {
  width: 11vw;
  height: auto;
  margin: 0 1vw;
}


.menu {
    text-transform: uppercase;
display: flex;
justify-content: space-between;

position: fixed;   /* absolute → fixed */

top: 3%;
left: 0;
right: 0;

font-size: 1.5vw;
padding: 0 30px;

font-weight: 500;

z-index: 1000;   /* 他要素の上に出す */

}

.name {
  position: fixed;
  left: 2%;
  bottom: 3%;
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 500;
  color: #ffffff; /* デフォルトは白 */
  transition: color 0.5s ease; /* スムーズに色を変更 */
  
}

.name p {
  margin: 0;
}

/* 左上と右下の画像のスタイル */
.corner-img {
  position: absolute;
  z-index: -1; /* 背景に配置 */
 
}

/* 左上に配置 */
.top-left {
  top: 0;
  left: 0;
  width: 31vw; /* 画像の大きさを調整 */
  max-width: 421px;
  height: auto;
}

/* 右下に配置 */
.bottom-right {
  bottom: 0;
  right: 0;
  width: 34vw; /* 画像の大きさを調整 */
  max-width: 462px;
  height: auto;
}

.menu a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.menu a:hover {
  opacity: .6;
}
/* =========================
   SP最適化（768px以下）
========================= */
@media screen and (max-width: 768px){

  /* 左上に配置 */
.top-left {

  width: 50vw; /* 画像の大きさを調整 */

}

/* 右下に配置 */
.bottom-right {

  width: 50vw; /* 画像の大きさを調整 */

}

 .menu{
    position: fixed;
    inset: 0; /* ←上下左右すべて基準にする（最強） */
    z-index: 1000;
    pointer-events: none;
  }

  .menu a{
    position: absolute;
    font-size: 14px;
    letter-spacing: 0.08em;
    pointer-events: auto;
  }

  /* 左上 */
  .menu a:nth-child(1){
    top: 20px;
    left: 20px;
  }

  /* 右上 */
  .menu a:nth-child(2){
    top: 20px;
    right: 20px;
  }

  /* 左下 */
  .menu a:nth-child(3){
    bottom: 20px;
    left: 20px;
  }

  /* 右下 */
  .menu a:nth-child(4){
    bottom: 20px;
    right: 20px;
  }

  /* =========================
     NAME（中央下）
  ========================= */
  .name{
    position: fixed;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.05em;
    opacity: 0.8;
    z-index: 999;
  }

  /* =========================
     TITLE（3段構成）
  ========================= */
  .title-text{
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;
    justify-content: center;
    font-size: 5vw;
        gap: 4vw;
    text-align: center;
    white-space: normal;
  }

  /* TSURU（前半5文字） */
  .title-text span:nth-child(-n+5){
    display: inline;
  }

  /* ここで改行扱い */
  .title-text span:nth-child(5){
    margin-bottom: 2vw;
  }

  /* ロゴ */
  .background-img{
    width: 25vw;
    height: auto;
  }

  /* KAWAGOE（後半） */
  .title-text span:nth-child(n+6){
    display: inline;
  }

}

/* aboutコンテンツ------------------------------------------------------------------------- */
.scroll-content01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 垂直方向に中央揃え */
  height: 120vh; /* 1画面に収める */
  position: relative;
  padding: 0;
  box-sizing: border-box;
}

.content-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 80%;
  gap: 8vw;
  margin: 0 auto; /* 余白をリセットして中央に配置 */
  flex-shrink: 0;
}

.left-circle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.circle {
  width: 18vw;
  height: 18vw;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.plus {
  font-size: 13vw;
  font-weight: 600;
  color: #252525;
  margin-left: -15px;
}

.circle-text-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 初期回転角度 */
  pointer-events: none;
  transition: transform 0.1s linear; /* スムーズな回転を適用 */
}

.strong-text {
  font-size: 25px;
  font-weight: 600;
}

text {
  font-size: 1vw; /* テキストの大きさを調整 */
  fill: #252525; /* テキストカラー */
}


.right-description {
  width: 70%;
  text-align: left;
  font-weight: 300;
  letter-spacing: 0.05em;
  font-size: 19px;
  font-family: 'Noto Sans JP', sans-serif;
}

.sub-description {
  font-size: 16px;
  margin-top: 5px;
  color: #777777;
}

.bottom-about {
  font-size: 21vw;
  color: rgba(255, 255, 255, 0.1);
  z-index: -1;
  position: absolute;
  bottom: 5%; /* スライドの下部に配置 */
  left: 50%;
  transform: translateX(-50%);
          opacity: 0.1;
}


.skills-section {
  text-align: center;
  padding: 50px 20px;
}

.skills-title {
  font-size: 3rem;
  margin-bottom: 40px;
  font-weight: 300;
}

.skills-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.skill-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.bar {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 30px;
  background: linear-gradient(180deg, #e0e0e0, #cfcfcf);
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #4caf50, #2e7d32);
  transition: height 1.5s ease-out, transform 1.5s ease-out;
}

.skill-name {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 500;
}

.skill-value {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 5px;
}

/* 経験年月のスタイル */
.skill-experience {
  font-size: 1rem;
  margin-top: 3px;
  color: #ababab;
}

/* 注釈スタイル */
.skills-legend {
  margin-top: 30px;
  font-size: 0.8rem;
  color: #555;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.skills-legend p {
  margin: 0;
}

/* =========================
   SCROLL CONTENT SP最適化
========================= */
@media screen and (max-width: 768px){

  .scroll-content01{
    height: auto;
    padding: 100px 20px;
  }

  .content-wrapper{
    flex-direction: column; /* 横→縦 */
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 30px;
  }

  /* =========================
     円（メインビジュアル）
  ========================= */
  .left-circle{
    justify-content: center;
  }

  .circle{
    width: 55vw;
    height: 55vw;
  }

  .plus{
    font-size: 28vw;
    margin-left: -10px;
  }

  text{
    font-size: 3vw;
  }

  /* =========================
     テキスト
  ========================= */
  .right-description{
    width: 100%;
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
  }

  .strong-text{
    font-size: 18px;
  }

  .sub-description{
    font-size: 13px;
  }

  /* =========================
     背景ABOUT
  ========================= */
  .bottom-about {
    font-size: 28vw; /* 少し大きく */
    
    writing-mode: vertical-rl; /* ←縦書き */
    text-orientation: upright; /* アルファベットを1文字ずつ縦に */

    left: 50%;
    bottom: auto;
    top: 50%;
        opacity: 0.1;
    transform: translate(-50%, -50%);
  }


}


/* serviceコンテンツ------------------------------------------------------------- */
.services{
  padding:120px 10%;
  position:relative;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

.service-card{

  background:#000000;
  border-radius:16px;
  padding:40px;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  transition:all .4s;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  text-transform: uppercase;
}

.service-card h3{
  font-weight: 500;
}

.service-card h3{
  font-weight: 500;
  font-size: 22px;
}

.en{
  font-size: 12px;
      color: #cbcbcb;
}

.service-title{
  text-align:center;
}

.service-title .en{

  display:block;

  font-size:12px;
  letter-spacing:.08em;

  color:#9a9a9a;

  margin-bottom:6px;

}
#detail-title{

font-size:32px;
font-weight:500;

}

#detail-title .en{

display:block;

font-size:13px;
letter-spacing:.12em;

color:#8a8a8a;

margin-bottom:6px;

text-transform:uppercase;

}

.card-icon{
  width:60px;
  margin-bottom:20px;
}

.service-card:not(.active){
  opacity:.9;
  transform:scale(.9);
}

.service-card.active{
         background: #b35e5e;
  color:white;
  transform:scale(1.05);
}

.service-detail{

  color:#252525;
  margin-top:60px;
  max-width:600px;

  opacity:0;
  transform:translateY(40px);

  transition:opacity 0.8s ease, transform 0.8s ease;
}

.service-detail.active{
  opacity:1;
  transform:translateY(0);
}

.service-image{

  position:absolute;
  right:10%;
  bottom:0px;
}

.service-image img{

      height: 350px;
  border-radius:12px;

  opacity:0;
  transform:translateX(60px);

  transition:opacity 0.8s ease, transform 0.8s ease;
}

.service-image img.active{
  opacity:1;
  transform:translateX(0);
}





/* SERVICEを背景に大きく表示 */
.background-service {
  position: absolute;
  bottom: 5%; /* スライドの下部に配置 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 20vw; /* 大きく表示 */
  color: rgba(37, 37, 37, 0.05); /* SERVICEのカラーを薄くして背景っぽく */
  z-index: -1;
}

@media screen and (max-width: 768px){

  .background-service {
    writing-mode: vertical-rl;
    text-orientation: upright;

    font-size: 28vw; /* 少し大きめに */
    
    left: 50%;
    bottom: auto;
    top: 50%;

    transform: translate(-50%, -50%);
  }
  /* PC用非表示 */
  .service-detail,
  .service-image{
    display: none;
  }

  .services{
    padding: 80px 20px;
  }

  .services-grid{
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .service-card{
    padding: 20px;
    background: #111;
    border-radius: 12px;
    transition: 0.3s;
  }

  .service-card.active{
    background: #1a1a1a;
  }

  .card-icon{
    width: 50px;
    margin-bottom: 10px;
  }

  .service-card .en{
    font-size: 11px;
    opacity: 0.6;
  }

  .service-card h3{
    font-size: 16px;
    margin-top: 5px;
  }

  /* ▼ アコーディオン部分 */
  .service-detail-sp{
    max-height: 0;
    overflow: hidden;
    transition: 0.4s;
  }

  .service-card.active .service-detail-sp{
    max-height: 300px;
    margin-top: 15px;
  }

  .service-detail-sp p{
    font-size: 13px;
    line-height: 1.7;
  }

  .service-detail-sp img{
    width: 100%;
    margin-top: 10px;
  }

}

.work-gallery-section {
  position: relative;
  margin-top:120px;
  width: 100%;
  min-height: 100vh;
  background-color: #252525; /* 背景色を#252525に */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent; /* work-gallery-sectionも透明背景 */
}

.gallery{

max-width:1200px;
width:90%;

margin:0 auto;

display:grid;
grid-template-columns:repeat(auto-fill,300px);

gap:40px;
justify-content:center;

}

.gallery-item{

position:relative;
cursor:pointer;
overflow:hidden;
border-radius:10px;

}

.gallery-item img{

width:100%;
height: 300px;
object-fit:cover;

transition:transform .5s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-overlay{

position:absolute;
bottom:0;
left:0;

width:100%;
padding:20px;
background: linear-gradient(
to top,
rgba(0,0,0,0.95) 0%,
rgba(0,0,0,0.75) 70%,
rgba(0,0,0,0.5) 90%,
transparent 100%
);

color:#fff;
}

.gallery-overlay h3{
  font-weight: 500;
  text-transform: uppercase;
}

.background-work {
  position: absolute;
  bottom: 5%; /* 画面下部に配置 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 20vw; /* 大きく表示 */
  color: rgba(255, 255, 255, 0.1); /* 薄く白で背景として表示 */
    z-index: -1;
}

.work-modal{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.75);

display:flex;
justify-content:center;
align-items:center;

opacity:0;
visibility:hidden;

transition:.4s;

z-index:1000;

}

.work-modal.active{

opacity:1;
visibility:visible;

}

.modal-inner{

background:rgba(255,255,255,.9);
backdrop-filter:blur(10px);
padding:40px;

width:90%;
max-width:1000px;

border-radius:12px;
position:relative;

}

.modal-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;

align-items:start;

}

.work-modal.active .modal-inner{

transform:translateY(0);

}

.modal-text{

display:flex;
flex-direction:column;
gap:12px;

color:#2b2b2b;

}

.modal-text h2{

font-size:28px;
font-weight:500;
margin:0 0 10px 0;

}

.modal-text p{

line-height:1.7;
color:#444;

}

.modal-image img{

width:100%;
max-height:420px;
object-fit:contain;

border-radius:8px;

}

.modal-close{

position:absolute;
right:20px;
top:20px;

border:none;
background:rgba(0,0,0,.05);

width:36px;
height:36px;

border-radius:50%;

font-size:20px;
cursor:pointer;

transition:.2s;

}

.modal-close:hover{

background:rgba(0,0,0,.12);

}

.modal-tag{

display:inline-block;

font-size:12px;
font-weight:500;

padding:6px 12px;

background:#ffffff;
color:#333;

border-radius:20px;

width:fit-content;

box-shadow:0 2px 6px rgba(0,0,0,.1);

}

.modal-link {
  display: inline-block;
  margin-top: 20px;

  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  position: relative;

  transition: color 0.3s ease;
}

.modal-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.4);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.modal-link:hover {
  color: #000;
}

.modal-link:hover::after {
  transform: scaleX(1);
}


.more-item{
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  transition:.4s;
}

.more-inner{
  text-align:center;
}

.more-text{
  font-size:22px;
  letter-spacing:.1em;
  font-weight:500;
}

.more-sub{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#aaa;
  letter-spacing:.08em;
}

/* ホバー */
.more-item:hover{
  background:rgba(255,255,255,0.08);
  transform:translateY(-6px);
}

/* =========================
   WORK GALLERY SP
========================= */
@media screen and (max-width: 768px){

  .work-gallery-section{
    padding: 100px 20px;
  }

  .gallery{
    display: grid;
    grid-template-columns: 1fr; /* 2列 */
    gap: 12px;
  }

  .gallery-item{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
  }

  .gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* 正方形 */
  }

  /* オーバーレイ */
  .gallery-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.7),
      rgba(0,0,0,0.0)
    );
    display: flex;
    align-items: flex-end;
    padding: 10px;
    color: #fff;
    font-size: 12px;
  }

  .gallery-overlay h3{
    font-size: 13px;
    font-weight: 500;
  }

  /* 背景テキスト */
  .background-work{
    font-size: 22vw;
    opacity: 0.05;
    bottom: 0;
  }

  /* クリック時 */
.gallery-item.active .gallery-overlay{
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

/* タイトル */
.gallery-item.active h3{
  font-size: 16px;
  margin-bottom: 6px;
}

/* 詳細（data属性表示用） */
.gallery-item.active::after{
  content: attr(data-description);
  color: #ccc;
  font-size: 12px;
  margin-top: 5px;
}

 .modal-inner {
    padding: 24px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto; /* ← これ重要（はみ出し防止） */
  }

  .modal-grid {
    grid-template-columns: 1fr; /* 縦並び */
    gap: 24px;
  }

  .modal-text h2 {
    font-size: 20px;
  }

  .modal-text p {
    font-size: 14px;
    line-height: 1.6;
  }

  .modal-image img {
    max-height: 260px;
  }

  .modal-close {
    width: 32px;
    height: 32px;
    font-size: 18px;
    right: 12px;
    top: 12px;
  }

  .modal-tag {
    font-size: 11px;
    padding: 4px 10px;
  }

  .modal-link {
    margin-top: 16px;
    font-size: 11px;
  }


}

.contact-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #252525; /* 背景色を#252525に */
  overflow: hidden;
  background: transparent; /* work-gallery-sectionも透明背景 */
}

.contact-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15vw;
  text-align: center;
}

.contact-image img {
  width: 22vw; /* 画像の幅を少し小さく調整 */
  height: auto;
  border-radius: 10px; /* 角を少し丸める */
  margin-bottom: 20px;
}

.contact-text {
  color: #fff; /* 文字色を白に */
}

.role {
  font-size: 2.5vw;
  font-weight: bold;
  margin-bottom: 10px;
}

.contact-name {
  font-size: 2vw;
  margin-bottom: 10px;
}

.email {
  font-size: 1.5vw;
  color: #fff; /* メールアドレスも白で */
  text-decoration: none; /* 下線を削除 */
  margin-bottom: 20px;
}

.email:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

/* CONTACTの背景テキスト */
.background-contact {
  position: absolute;
  bottom: 5%; /* 画面下部に配置 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 20vw;
  color: rgba(255, 255, 255, 0.05); /* 背景文字を薄く表示 */
  z-index: -1;
}
.instagram-wrap {
  margin-top: 30px;
}

.instagram {
  display: inline-block;
  transition: transform .3s, opacity .3s;
}

.instagram img {
  width: 48px;   /* ←大きめに */
  height: 48px;
  filter: brightness(0) invert(1);
}

.instagram:hover {
  transform: scale(1.15);
  opacity: .8;
}

@media (max-width: 768px) {

  .background-contact {
    writing-mode: vertical-rl;
    text-orientation: upright;

    font-size: 22vw;
    
    left: 50%;
    bottom: auto;
    top: 50%;

    transform: translate(-50%, -50%);
  }
  .contact-content {
    flex-direction: column;
    gap: 0px;
  }

  .contact-image img {
    width: 60vw;
  }

  .role {
    font-size: 20px;
  }

  .contact-name {
    font-size: 18px;
  }

  .email {
    font-size: 14px;
  }

  .instagram img {
    width: 24px;
    height: 24px;
  }

}

.image-zoom{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.9);

display:flex;
justify-content:center;
align-items:center;

opacity:0;
visibility:hidden;

transition:.3s;

z-index:2000;

}

.image-zoom.active{

opacity:1;
visibility:visible;

}

.image-zoom img{

max-width:90%;
max-height:90%;

object-fit:contain;

cursor:zoom-out;

}

.site-footer {
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  
  z-index: 10; /* 必要最低限（上に出す） */
  pointer-events: none; /* 他の要素のクリックを邪魔しない */

  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.12em;
  font-weight: 300;
}