@font-face {
  font-family: 'Yosugara';
  src: url('fonts/yosugaraver1_2.ttf') format('truetype');
}
html {
  scrollbar-width: none;       /* Firefox用 */
  -ms-overflow-style: none;    /* IE, Edge古い版用 */
}

html::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Edge(Chromium)用 */
}

body {
  overflow-y: scroll;           /* スクロールは可能にする */
  overflow-x: hidden;           /* 横方向は必要に応じて */
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Yosugara', sans-serif;
}

/* フォントサイズ 150px */
.SIKI {
  font-size: 937.5%;
}

/* フォントサイズ 24px */
.hello, 
.exp2,
.MY1,
.star1,
.POW1, 
.Word1 {
  font-size: 150%;
}

/* フォントサイズ 40px */
.name,
.Both
 {
  font-size: 250%;
}

/* フォントサイズ 32px */
.name2,
.Both2 {
  font-size: 200%;
}


/* フォントサイズ 20px */
.exp3,
.exp4,
.exp7,
.work,
.IT,
.star2,
.star3,
.POW2,
.POW3,
.POW4,
.Word2,
.Word3 {
  font-size: 125%;
}


/* フォントサイズ 15px */
.exp6,
.exp8,
.work1,
.work4,
.work7,
.TR,
.TAR3,
.TAR6,
.ATR9 {
  font-size: 93.75%;
}



header {
  display: flex;
  top: 0;
  left: 0;
  width:  100%;
  height: 120px;
  background-color: rgba(200, 245, 245, 0.9);
  align-items: center;
  position: fixed;
  z-index: 10;
}
.logo {
  position: absolute;
  top: 0.5%;
  left: 3.13%;
  font-size: 312.5%;
}
.lists {
  list-style: none;
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 156.25%;
  display: flex;
}
.TOP_P a,
.SAKUHIN a,
.froom a {
  margin-right: 30px;
  color: #000;
  text-decoration: none;
}
a:hover {
  background-color: rgba(142, 154, 154, 0.1);
  border-radius: 8px;
}
footer {
  position: fixed;
  display: flex;
  height: 40px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(200, 245, 245, 0.7);
  text-align: center;
  padding: 10px 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  gap: 20px;
}
.PP {
  color: black;
  text-decoration: none;
}

.haru {
  position: absolute;
  top: 15.4%;
  left: 14.0%;
}

.natu {
  position: absolute;
  top: 15.4%;
  left: 31.37%;
}

.aki {
  position: absolute;
  top: 15.4%;
  left: 48.74%;
}

.huyu {
  position: absolute;
  left: 66.11%;
  top: 15.4%;
}

.itie1 {
  position: absolute;
  left: 20.8%;
  top: 40.5%;
}

.itie2 {
  position: absolute;
  left: 38.2%;
  top: 40.5%;
}
.itie3 {
  position: absolute;
  left: 55.6%;
  top: 40.5%;
}

.itie4 {
  position: absolute;
  left: 72.9%;
  top: 40.5%;
}

.hello1 {
  position: absolute;
  left: 35%;
  top: 100%;

}
.hello2 {
  position: absolute;
  left: 34%;
  top: 104.03%;

}

.hello3 {
  position: absolute;
  left: 34%;
  top: 110.09%;

}

.hello4{
  position: absolute;
  left: 30%;
  top: 115.19%;

}

.Profile {
  position: absolute;
  left: 44.3%;
  top: 130%;
  font-size: 343.75%;
}

.icon {
  position: absolute;
  left: 7.5%;
  top: 156.3%;
  width: 14.4%;
  height: auto;

}

.name {
  position: absolute;
  left: 28.3%;
  top: 150.8%;
  background-color: rgba(171, 245, 236, 0.2);
  padding: 0.1% 0.5%;
  border-radius: 15%;
}
.name2 {
  position: absolute;
  left: 32.9%;
  top: 162.3%;
  
}

.Both {
  position: absolute;
  left: 28.3%;
  top: 169.9%;
  background-color: rgba(171, 245, 236, 0.2);
  padding: 0.1% 0.5%;
  border-radius: 15%;
}

.Both2 {
  position: absolute;
  left: 32.9%;
  top: 182.4%;
}

.box1 {
  position: absolute; 
  left: 52.1%;
  top: 155.2%;
  width: 42%;
  height: 38.1%;
  background-color: rgba(171, 245, 236, 0.2);
  border-radius: 5%;
  z-index: 1; 
}

.exp2, .exp3, .exp4, .exp5, .exp6, .exp7, .exp8,
.work, .work2, .work3, .work5, .work6, .work8, .work9,
.IT, .TAR1, .TAR2, .TAR4, .TAR5, .TAR7, .TAR8, .TAR9 {
  position: absolute;
  z-index: 2; 
}

.exp2 {
  position: absolute;
  left: 2.5%;
  top: -1.6%;
}

.exp3 {
  position: absolute;
  left: 4.1%;
  top: 15.3%;
}

.exp4 {
  position: absolute;
  left: 12.2%;
  top: 26.7%;
}

.exp5 {
  position: absolute;
  left: 4.1%;
  top: 41.7%;
}

.exp6 {
  position: absolute;
  left: 10.6%;
  top: 53.7%;
}

.exp7 {
  position: absolute;
  left: 4.3%;
  top: 67.2%;
}

.exp8 {
  position: absolute;
  left: 6.1%;
  top: 79.4%;
}

.work {
  position: absolute;
  left: 57.5%;
  top: 5.0%;
}

.work2 {
  position: absolute;
  left: 58.6%;
  top: 17.0%;
}

.work3 {
  position: absolute;
  left: 79.8%;
  top: 18.0%;
}

.work5 {
  position: absolute;
  left: 58.6%;
  top: 26.7%;
}

.work6 {
  position: absolute;
  left: 79.8%;
  top: 27.7%;
}

.work8 {
  position: absolute;
  left: 58.6%;
  top: 36.4%;
}

.work9 {
  position: absolute;
  left: 79.8%;
  top: 37.4%;
}

.IT {
  position: absolute;
  left: 62.8%;
  top: 46.1%;
}

.TAR1 {
  position: absolute;
  left: 58.6%;
  top: 56.3%;
}

.TAR2 {
  position: absolute;
  left: 81.3%;
  top: 57.3%;
}

.TAR4 {
  position: absolute;
  left: 58.6%;
  top: 64.5%;
}

.TAR5 {
  position: absolute;
  left: 81.3%;
  top: 65.5%;
}

.TAR7 {
  position: absolute;
  left: 58.6%;
  top: 72.6%;
}

.TAR8 {
  position: absolute;
  left: 81.3%;
  top: 73.6%;
}

.TAR9 {
  position: absolute;
  left: 69.0%;
  top: 80.8%;
}

.MY1 {
  position: absolute;
  left: 3.95%;
  top: -2.18%;
}

.MY2 {
  position: absolute;
  left: 6.84%;
  top: 9.33%;
}

.MY3 {
  position: absolute;
  left: 6.84%;
  top: 16.38%;
}

.MY4 {
  position: absolute;
  left: 6.38%;
  top: 22.70%;
}

.MY5 {
  position: absolute;
  left: 6.84%;
  top: 34.41%;
}

.MY6 {
  position: absolute;
  left: 6.84%;
  top: 41.48%;
}

.MY7 {
  position: absolute;
  left: 6.84%;
  top: 48.54%;
}

.MY8 {
  position: absolute;
  left: 6.38%;
  top: 55.61%;
}

.MY9 {
  position: absolute;
  left: 6.38%;
  top: 62.48%;
}

.MY10 {
  position: absolute;
  left: 6.38%;
  top: 73.82%;
}

.MY11 {
  position: absolute;
  left: 6.38%;
  top: 80.51%;
}

.MY12 {
  position: absolute;
  left: 6.38%;
  top: 87.39%;
  padding-bottom: 15%;
}

.star1 {
  position: absolute;
  left: 59.5%;
  top: 197.8%;
  background-color: rgba(171, 245, 236, 0.2);
  padding: 0.1% 0.5%;
  border-radius: 15%;
}

.star2 {
  position: absolute;
  left: 64.9%;
  top: 204.2%;
}

.star3 {
  position: absolute;
  left: 88.1%;
  top: 208.0%;
}


.POW1 {
  position: absolute;
  left: 59.5%;
  top: 211.4%;
  background-color: rgba(171, 245, 236, 0.2);
  padding: 0.1% 0.5%;
  border-radius: 15%;
}

.POW2 {
  position: absolute;
  left: 62.5%;
  top: 218.5%;
}

.POW3 {
  position: absolute;
  left: 62.5%;
  top: 223.5%;
}

.POW4 {
  position: absolute;
  left: 62.5%;
  top: 227.4%;
}

.Word1 {
  position: absolute;
  left: 59.5%;
  top: 232.7%;
  background-color: rgba(171, 245, 236, 0.2);
  padding: 0.1% 0.5%;
  border-radius: 15%;
}

.Word2 {
  position: absolute;
  left: 61.8%;
  top: 240.3%;
}

.Word3 {
  position: absolute;
  left: 61.8%;
  top: 245.9%;
}

.box2 {
  position: absolute;
  left: 10%;
  top: 200.82%;
  width: 38%;
  height: 52.5%;
  background-color: rgba(171, 245, 236, 0.2);
  border-radius: 5%;
  z-index: 1;  
}

.menu-btn {
  display: none;
}

@media screen and (max-width: 798px) {
  
@font-face {
  font-family: 'Yosugara';
  src: url('fonts/yosugaraver1_2.ttf') format('truetype');
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Yosugara', sans-serif;
}
html {
  scrollbar-width: none;       /* Firefox用 */
  -ms-overflow-style: none;    /* IE, Edge古い版用 */
}

html::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Edge(Chromium)用 */
}

body {
  overflow-y: scroll;           /* スクロールは可能にする */
  overflow-x: hidden;           /* 横方向は必要に応じて */
}


header {
  display: flex;
  width: 100%;
  height: 8%;
  padding-top: -20px;
  background-color: rgb(200, 245, 245, 0.7);
  align-items: center;
  z-index: 5;
}
.logo {
  position: absolute;
  left: 3.13%;
  top: 2%;
  font-size: 156.25%;
}
.lists {
  list-style: none;
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
}
.TOP_P a,
.SAKUHIN a,
.froom a {
  margin-right: 30px;
  color: #000;
  text-decoration: none;
}
a:hover {
  background-color: rgba(142, 154, 154, 0.1);
  border-radius: 8px;
}

.PP {
  color: black;
  text-decoration: none;
}



/* フォントサイズ 24px */
 .logo {
  font-size: 150%;
}

/* フォントサイズ 40px */
.SIKI 
 {
  font-size: 250%;
}
/* フォントサイズ　　10px */
.hello,
.box2,
.POW2,
.POW3,
.POW4,
.star2,
.star3,
.Word1,
.exp6,
.exp8,
.work1,
.work4,
.work7,
.TAR,
.TAR3,
.TAR6,
.TAR9,
.Word2,
.Word3 {
  font-size: 62.5%;
}

/* フォントサイズ　　30px */
.Profile,
.menu-btn {
  font-size: 187.5%;
}

/* フォントサイズ　　20px */
.name,
.Both {
  font-size: 125%;
}

/* フォントサイズ　　18px */
.name2,
.Both2,
.MY1 {
  font-size: 112.5%;

}

/* フォントサイズ　　15px */
  .exp2,
  .star1,
  .POW1,
  .Word1 {
  font-size: 93.75%;
}
  .exp3,
  .exp4,
  .exp5,
  .exp7,
  .work,
  .IT {
    font-size: 75%;
  }

.haru {
  position: absolute;
  left: 55.56%;
  top: 15.80%;
}

.natu {
  position: absolute;
  left: 55.56%;
  top: 28.08%;
}

.aki {
  position: absolute;
  left: 55.56%;
  top: 40.36%;
}

.huyu {
  position: absolute;
  left: 55.56%;
  top: 52.64%;
}

.itie1 {
  position: absolute;
  left: 25.56%;
  top: 40.86%;
}

.itie2 {
  position: absolute;
  left: 25.56%;
  top: 53.14%;
}

.itie3 {
  position: absolute;
  left: 25.56%;
  top: 65.42%;
}

.itie4 {
  position: absolute;
  left: 25.56%;
  top: 77.70%;
}

.hello1 {
  position: absolute;
  left: 28%;
  top: 100%;

}
.hello2 {
  position: absolute;
  left: 20%;
  top: 102.03%;

}

.hello3 {
  position: absolute;
  left: 20%;
  top: 104.09%;

}

.hello4{
  position: absolute;
  left: 22%;
  top: 106.19%;

}

.Profile {
  position: absolute;
  left: 37%;
  top: 120%;
}

.icon {
  position: absolute;
  left: 12%;
  top: 137.58%;
  width: auto;
  height: 15.92%;
}

.name {
  position: absolute;
  left: 50.81%;
  top: 134.58%;
}

.name2 {
  position: absolute;
  left: 55.82%;
  top: 140%;
}

.Both {
  position: absolute;
  left: 50.81%;
  top: 144.01%;
}

.Both2 {
  position: absolute;
  left: 55.82%;
  top: 150.49%;
}

.box1 {
  position: absolute; 
  left: 5%;
  top: 160.2%;
  width: 90%;
  height: 30.1%;
  background-color: rgba(171, 245, 236, 0.2);
  border-radius: 5%;
  z-index: 1; 
}

.box2 {
  position: absolute;
  left: 10%;
  top: 210.82%;
  width: 80%;
  height: 42%;
  background-color: rgba(171, 245, 236, 0.2);
  border-radius: 5%;
  z-index: 1;  
}

.MY1 {
  position: absolute;
  left: 4%;
  top: 1%;
}

.POW1 {
  position: absolute;
  left: 14%;
  top: 190.46%;
}

.POW2 {
  position: absolute;
  left: 20%;
  top: 195.71%;
}

.POW3 {
  position: absolute;
  left: 20%;
  top: 198.10%;
}

.POW4 {
  position: absolute;
  left: 20%;
  top: 200.48%;
}

.star1 {
  position: absolute;
  left: 55.81%;
  top: 190.46%;
}

.star2 {
  position: absolute;
  left: 57%;
  top: 195.59%;
}

.star3 {
  position: absolute;
  left: 85%;
  top: 198.10%;
}

.Word1 {
  position: absolute;
  left: 35.5%;
  top: 255.7%;
 background-color: transparent;
}

.Word2 {
  position: absolute;
  left: 25.8%;
  top: 260%;
}

.Word3 {
  position: absolute;
  left: 25.8%;
  top: 262%;
}
.MY12 {
  position: absolute;
  left: 6%;
  top: 87.39%;
  padding-bottom: 50%;
}

  .menu-btn {
    display: block;
    position: fixed;
    top: 1.5vh;
    right: 5vw;
    font-size: 2rem;
    z-index: 1000;
    cursor: pointer;
  }

.lists {
  position: fixed;
  top: 0;
  right: -100%;
  width: 50%;
  height: 40%;
  background: rgba(212, 243, 245, 0.8);
  backdrop-filter: blur(10px);           /* ← 背景ぼかし */
  -webkit-backdrop-filter: blur(10px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: right 0.4s ease;
  border-radius: 20px 0 0 20px;
  z-index: 1500;
}

.lists.is-open {
  right: 0;
}

.lists li {
  margin: 20px 0;
}

/* ===== スマホメニュー開閉用 追加部分 ===== */

/* メニューの基本設定（右からスライドイン） */
.menu {
  position: fixed;
  top: 0;
  right: -100%; /* 初期は画面外 */
  width: 70%;
  height: 100%;
  background-color: rgba(181, 250, 255, 0.2);
  transition: right 0.4s ease;
  z-index: 1500;
}

/* メニューが開いた時 */
.menu.is-open {
  right: 0; /* 画面内にスライドイン */
}

/* 背景の半透明オーバーレイ */
.menu-overlay {
  display: none; /* 初期は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* 半透明黒背景 */
  z-index: 1000;
}

/* メニュー開時にオーバーレイを表示 */
.menu-overlay.is-open {
  display: block;
}
footer {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* お問い合わせ基準サイズ */
  background-color: rgba(200, 245, 245, 0.7);
  text-align: center;
  padding: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 63%;
  line-height: 1.2;
  padding-bottom: env(safe-area-inset-bottom); /* ← スマホ（iPhone/Android）UI干渉防止 */
}

.PP {
  color: black;
  text-decoration: none;
}

.PP:hover {
  text-decoration: underline;
}


}