* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; 
}

body, html {
  scroll-behavior: smooth;
  width: 100%;
  height: 100%; 
  font-family: 'Inter', sans-serif;
  color: #291b1b;
background-color: #ffffff;  position: relative; overflow-x: clip;
}

.instagram-icon{
  font-size: clamp(25px, 5vw, 50px);
  margin-right: 30px;
  color: #141414; 
  transition: color 0.3s ease; display: flex; text-align: right; justify-content: flex-end;  align-items: center; 
}
/* ナビゲーションバー本体 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 36px;
  border-radius: 20px;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  position: relative;
   /* ガラス感 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 透明 */
  background: transparent;

  /* 白い枠線 */
  border: 1px solid rgba(255, 255, 255, 0.6);

}

/* メニューリンク */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-links li {
  position: relative;
}

.nav-links li a {
  text-decoration: none;
  color: #ccc;
  font-size: 14px;
  transition: color 0.2s ease;
  display: inline-block;
  padding: 4px 0;
  color: #333;
}

.nav-links li a:hover,
.nav-links li a.active-item {
  color: #fff;
  font-weight: bold;
}

/* ドロップダウンメニュー */
.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  min-width: 130px;
  text-align: center;
  z-index: 100; background: transparent;

  /* 白い枠線 */
  border: 1px solid rgba(255, 255, 255, 0.6);

  /* ガラス感 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

}


.nav-links li a:hover,
.nav-links li a.active-item {
  color: #000;
}
.dropdown-content a {
  display: block;
  color: #ccc;
  text-decoration: none;
  padding: 6px 0;
  font-size: 12px;
}

.dropdown-content a:hover {
  color: #fff;
}

.dropdown:hover .dropdown-content {
  display: flex; flex-direction: column;
}

.header{display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-content: center; height: 80px;}
.hero{background-image: url(pic2.webp); height: 680px; margin-bottom: 140px;}
.banner{text-decoration: underline; font-size: clamp(18px, 2vw, 30px);}
.web{text-decoration: underline; font-size: clamp(18px, 2vw, 30px);}
.koki{font-size: clamp(20px, 2vw, 22px); font-weight: 500; margin-left: 30px; grid-column: 1; display: flex; width: 100%;
   flex-direction: column;  align-items: flex-start;}
.er{font-size: clamp(8px, 1.5vw, 8px); font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;}
.frame{width: 100%; height: 680px; display: grid; grid-template-columns: 1fr 1fr; }
.frame1{width: 100%; display: flex; flex-direction: column; text-align: center; gap: 60px;
   margin-bottom: 140px; position: relative;}
.frame2{width: 100%; height: 680px; margin-bottom: 240px;}
.frame4{width: 100%; display: flex; flex-direction: column; text-align: center; align-items: center; margin-bottom: 50px;}
.title{font-size: clamp(25px, 5vw, 40px); font-family: "Montserrat", sans-serif;   font-weight: 500; text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.08em; display: block;}
.about{margin-bottom: 140px;}
.about-p{font-size: clamp(8px, 1.6vw, 12px); font-family:'Orbitron', sans-serif; margin-bottom: 30px; text-decoration: underline;}
.about-pic{width: 100%; height: 100%; object-fit: cover;}
.about1{display: flex; flex-direction: column; text-align: center; width: 430px; justify-self: center; margin-top: 50px;}
.skills{font-size: clamp(14px, 1.6vw, 16px);}
.about-p1{font-size: clamp(14px, 1.6vw, 16px);}
.about2{font-size: clamp(14px, 1.4vw, 16px);}
.skills1{font-size: clamp(20px, 2vw, 22px); font-weight: 500;}
.fv-texts{display: flex; flex-direction: column; align-items: flex-start; justify-content: center; 
  margin-top: 130px; margin-left: 80px; text-align: center;
}
#lol{margin-bottom: -10px;}
.longline{position: absolute; width: 700px; height: 700px; border: 1px solid
   #7a7171;  border-radius: 9999px; top: 100px; left: -100px;}
.longline1{position: absolute; width: 800px; height: 800px; border: 1px solid
  rgba(124, 105, 105, 0.4); border-radius: 9999px; top: 550px; right: -300px; z-index: -1;}
.longline2{position: absolute; width: 700px; height: 700px; border: 1px solid
   #b6a4a4;  border-radius: 9999px; top: 1100px; left: -300px; opacity: 60%; }
.longline3{position: absolute; width: 800px; height: 800px; border: 1px solid
   #e7d3d3;  border-radius: 9999px; top: 1600px; right: -500px; z-index: -1;}
.longline4{position: absolute; width: 1000px; height: 1000px; border: 1px solid
   #cecbcb;  border-radius: 9999px; top: 2050px; left: -100px; display: none; z-index: -1;}
.longline5{position: absolute; width: 1200px; height: 1200px; border: 1px solid
   #7a7171;  border-radius: 9999px; top: 2500px; right: -700px; z-index: -1;}
.longline6{position: absolute; width: 800px; height: 800px; border: 1px solid
   #7a7171;  border-radius: 9999px; top: 3500px; left: -430px; opacity: 40%; z-index: -1; background-color: #cafd3c; opacity: 20%;}
.longline7{position: absolute; width: 1600px; height: 1600px; border: 1px solid
   #7a7171;  border-radius: 9999px; top: 2000px; left: -700px; z-index: -1;}



   .longline8{position: absolute; width: 200px; height: 200px; border: 1px solid
   #0509fd;  border-radius: 9999px; top: 1700px; right: 300px; z-index: -1; opacity: 20%; background-color: #aef727;}
.longline9{position: absolute; width: 150px; height: 150px; border: 1px solid
   #f79503;  border-radius: 9999px; top: 1580px; right: 180px; z-index: -1; opacity: 20%; background-color: #638ee9;}
.longline10{position: absolute; width: 100px; height: 100px; border: 1px solid
   #dbf300;  border-radius: 9999px; top: 1490px; right: 90px; z-index: -1; opacity: 20%; background-color: rgb(218, 144, 33);}




.fv-text{font-size: clamp(28px, 3vw, 35px);}
.fv-text2{font-size: clamp(14px, 1.4vw, 16px);}
.profile{font-size: clamp(20px, 1.6vw, 22px); font-weight: 500;}
.works2{display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; justify-self: center; align-self: center;}
.service-span{font-size: clamp(20px, 3vw, 35px); letter-spacing: 1.3px;}
.service-p{margin-left: 20px; margin-top: 40px;}
.service-div{border-radius: 40px; padding: 32px 24px; width: 60%; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); margin-bottom: 40px;} 
.workpic{width: 200px; height: 200px; object-fit: cover; border: #000 solid; border-width: 2px; box-shadow: #000;
display: block; cursor: pointer;}
.workpic1{width: 200px; height: 200px; object-fit: cover; border: #000 solid; border-width: 2px; box-shadow: #000;
display: block; cursor: pointer;}
.together{font-size: clamp(18px, 2vw, 30px);}
.contact-p{margin-bottom: 60px;}
.contact{margin-bottom: 0px;}
.works-banner{display: grid; grid-template-columns: repeat(4, 1fr); justify-self: center; align-self: center; gap: 30px;}
footer{display: flex; justify-content: space-between; width: 100%;}
.upline{font-size: clamp(18px, 3vw, 25px); right: 10px;}
.category{font-size: clamp(8px, 1.4vw, 12px); color: #9b9696;}
h2{letter-spacing: 1.8px;}
.work img {
    display: block;}

.image-modal {
    display: none;

    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.8);

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

    z-index: 1000;
}
.image-modal.active {
    display: flex;
}

.big-image {
    max-width: 90%;
    max-height: 90vh;

    object-fit: contain;
}
.image-close {
    position: absolute;

    top: 20px;
    right: 30px;

    border: none;
    background: none;

    color: white;

    font-size: 40px;

    cursor: pointer;
}

/* 紙 */
.work-info {
    position: fixed;

    right: 5%;
    top: 50%;

    width: 400px;
    height: 350px;

    padding: 30px;

    background: #f5f2eb;

    transform: translateY(-50%) translateX(120%);

    transition: transform 0.5s ease;
/* 背景を半透明の白にする（透明度は0.15〜0.3程度） */
  background: rgba(255, 255, 255, 0.25);
  
  /* 背後をぼかすことで「すりガラス感」を出す */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari対策 */
  
  /* 薄い白のボーダーで立体感・輪郭を演出する */
  border: 1px solid rgba(255, 255, 255, 0.4);
  
  /* 角丸の設定 */
  border-radius: 9999px; /* カプセル型にする場合 */
  
  /* 影を薄く落として浮かせる */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

}

.work-info1 {
    position: fixed;

    left: 5%;
    top: 50%;

    width: 400px;
    height: 350px;

    padding: 30px;

    background: #f5f2eb;

    transform: translateY(-50%) translateX(-120%);

    transition: transform 0.5s ease;
    
  /* 背景を半透明の白にする（透明度は0.15〜0.3程度） */
  background: rgba(255, 255, 255, 0.25);
  
  /* 背後をぼかすことで「すりガラス感」を出す */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari対策 */
  
  /* 薄い白のボーダーで立体感・輪郭を演出する */
  border: 1px solid rgba(255, 255, 255, 0.4);
  
  /* 角丸の設定 */
  border-radius: 9999px; /* カプセル型にする場合 */
  
  /* 影を薄く落として浮かせる */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

}


.workpic:hover + .work-info {
    transform: translateY(-50%) translateX(0);
}

.work:hover + .work-info {
    transform: translateY(-50%) translateX(0);
}

.work:hover + .work-info1 {
    transform: translateY(-50%) translateX(0);
}

.workpic:hover + .work-info1 {
    transform: translateY(-50%) translateX(0);
}


.contact-form {
    width: 50%;
}

.form-item {
    margin-bottom: 25px;
}

.form-item label {
    display: block;
    font-size: 26px;
    letter-spacing: 0.15em;
    margin-bottom: 55px;
}

.form-item input,
.form-item textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #222;
    background: transparent;
    padding: 10px 0;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.form-item textarea {
    height: 80px;
    resize: none;
}

.form-item input::placeholder,
.form-item textarea::placeholder {
    color: #9b9696;
}

.form-item input:focus,
.form-item textarea:focus {
    border-bottom: 1px solid #000;
}

.contact-submit {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    margin-top: 35px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 22px;
    letter-spacing: 0.15em;
    cursor: pointer;
    margin-left: 420px;
}

.contact-submit span {
    font-size: 20px;
    transition: transform 0.3s ease; 
}

.contact-submit:hover span {
    transform: translateX(8px);
}



body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, picture, video, canvas, svg{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

button {
  cursor: pointer;
}




















.notes{display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0px; width: 80%;
  max-width: 700px; margin: 100px auto 60px; padding: 30px; border: 1px solid #222; border-radius: 12px;}

.notes-title{font-weight: 500;}



.nav{display: none;}
.hamburger{display: none;}

footer p{margin-top: 10px;}


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







    .hamburger {
        display: flex;
        position: relative;
        z-index: 1001;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;

        background-color: #111;

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

        transition: right 0.4s ease;

        z-index: 1000;
    }

    /* 開いた状態 */
    .nav.active {
        right: 0;
    }

    .nav a {
        color: white;
        text-decoration: none;
        font-size: 20px;
    }

.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.navbar{display: none;}

.header{display: flex; align-items: center; justify-content: space-between; height: 40px; }
.hero{background-image: url(pic2.webp); height: 700px; margin-bottom: 40px; background-size: cover; background-position: 45% center;}
.banner{text-decoration: underline;}
.web{text-decoration: underline;}
.koki{font-weight: 500; margin-left: 10px; grid-column: 1; display: flex; width: 100%;
   flex-direction: column;  align-items: flex-start;}
.er{font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;}
.frame{width: 100%; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.frame1{width: 100%; display: flex; flex-direction: column; text-align: center; gap: 60px; 
   margin-bottom: 140px; position: relative; margin-bottom: 300px;}
.frame2{width: 100%; height: 680px; margin-bottom: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.frame4{width: 100%; display: flex; flex-direction: column; text-align: center; align-items: center; margin-bottom: 50px;}
.title{font-family: "Montserrat", sans-serif;   font-weight: 500; text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.08em; display: block;}
.about{margin-bottom: 140px;}
.about-p{font-family:'Orbitron', sans-serif; margin-bottom: 30px; text-decoration: underline;}
.about-pic{display: none;}
.about1{display: flex; flex-direction: column; text-align: center; width: 230px; justify-self: center; margin-top: 50px;}
.skills1{font-weight: 500;}
.fv-texts{display: flex; flex-direction: column; justify-content: center; 
  margin-top: 300px; margin-left: 10px; text-align: left; width: 100%; gap: 30px;
}
#lol{margin-bottom: -10px;}


.instagram-icon{
  margin-right: 15px;
  transition: color 0.3s ease; display: flex; text-align: right; justify-content: flex-end;  align-items: center; 
}



.fv-text{width: 80%;}
.fv-text2{ width: 95%;}


.profile{font-weight: 500;}
.works2{   display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 30px;
        width: 100%; padding: 40px;}
.service-span{letter-spacing: 1.3px;}
.service-p{margin-left: 20px; margin-top: 40px;}
.service-div{border-radius: 40px; padding: 32px 24px; width: 60%; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); margin-bottom: 40px;} 
.workpic{width: 300px; height: 300px; object-fit: cover; border: #000 solid; border-width: 1px; box-shadow: #000;
display: block;}
.workpic1{width: 300px; height: 300px; object-fit: cover; border: #000 solid; border-width: 2px; box-shadow: #000;
display: block; cursor: pointer;}
.contact-p{margin-bottom: 60px;}
.contact{margin-bottom: 0px;}
.works-banner{        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 30px;
        width: 100%; padding: 20px;}
.category{color: #9b9696;}
h2{letter-spacing: 1.8px;}



    .works2 .works {
        flex: 0 0 80%;
    }



    .works-banner .works {
        flex: 0 0 80%;
    }






.longline{position: absolute; width: 500px; height: 500px; border: 1px solid
   #7a7171;  border-radius: 9999px; top: 250px; left: -180px;}
.longline1{position: absolute; width: 400px; height: 400px; border: 1px solid
  rgba(124, 105, 105, 0.4); border-radius: 9999px; top: 750px; right: -100px; z-index: -1;}
.longline2{position: absolute; width: 400px; height: 400px; border: 1px solid
   #b6a4a4;  border-radius: 9999px; top: 1380px; left: -100px; opacity: 90%; display: none;}
.longline3{position: absolute; width: 500px; height: 500px; border: 1px solid
   #685e5e;  border-radius: 9999px; top: 1600px; right: -500px; z-index: -1; display: none;}
.longline4{position: absolute; width: 700px; height: 700px; border: 1px solid
   #3a3737;  border-radius: 9999px; top: 2250px; left: -500px; z-index: -1; display: none;}
.longline5{position: absolute; width: 1000px; height: 1000px; border: 1px solid
   #7a7171;  border-radius: 9999px; top: 2500px; right: -630px; z-index: -1;}
.longline6{position: absolute; width: 500px; height: 500px; border: 1px solid
   #7a7171;  border-radius: 9999px; top: 3740px; left: -130px; z-index: -1; background-color: #cafd3c; opacity: 10%;}
.longline7{position: absolute; width: 600px; height: 600px; border: 1px solid
   #7a7171;  border-radius: 9999px; top: 2000px; left: -400px; z-index: -1;}



   .longline8{position: absolute; width: 200px; height: 200px; border: 1px solid
   #0509fd;  border-radius: 9999px; top: 1500px; right: 180px; z-index: -1; opacity: 20%; background-color: #aef727;}
.longline9{position: absolute; width: 150px; height: 150px; border: 1px solid
   #f79503;  border-radius: 9999px; top: 1350px; right: 100px; z-index: -1; opacity: 20%; background-color: #638ee9;}
.longline10{position: absolute; width: 100px; height: 100px; border: 1px solid
   #dbf300;  border-radius: 9999px; top: 1250px; right: 40px; z-index: -1; opacity: 20%; background-color: rgb(218, 144, 33);}








.workpic:hover + .work-info {
display: none;
}

.work:hover + .work-info {
display: none;
}

.work:hover + .work-info1 {
  display: none;
}

.workpic:hover + .work-info1 {
  display: none;}








.contact-submit {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 35px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 22px;
    letter-spacing: 0.15em;
    cursor: pointer;
    margin-left: 0px;
}












   .works2 .works,
    .works-banner .works {
        position: relative;
    }

    .work-info,
    .work-info1 {
        position: static;
        width: 100%;
        height: auto;
        padding: 20px;
        margin-top: 10px;
border-radius: 0;
        transform: translateX(100%);
        opacity: 0;
background-color: rgb(255, 234, 234);
        transition: transform 0.5s ease, opacity 0.5s ease;
    }

    .work-info.mobile-show,
    .work-info1.mobile-show {
        transform: translateX(0);
        opacity: 1;
    }



  }