@font-face {
  font-family: 'Yosugara';
  src: url('fonts/yosugaraver1_2.ttf') format('truetype');
}

@font-face {
  font-family: 'Harenosora';
  src: url('fonts/Harenosora.otf') format('truetype');  
}

.menu-btn {
  display: none;
}

.PP,
.RK {
  font-size: 110%;
}


.section1-title,
.section2-title,
.section3-title,
.section4-title,
.section5-title,
.R1-title,
.R2-title,
.R3-title,
.R4-title,
.tag,
.tag2
 {
  font-size: 130%;
}


.E_word1,
.E_word2 {
  font-size: 140%;
}


.logo {
  font-size: 312.5%;
}

.lists {
  font-size: 156.25%;
}

 body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Harenosora';
}
header, footer {
  font-family: 'Yosugara';
}
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;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-color: rgba(200, 245, 245, 0.7);
  align-items: center;
  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: rgba(200, 245, 245);
  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;
}
.menu-btn {
  display: none;
}

.title {
  position: absolute;
  top: 33%;
  left: 28%;
  font-size: 200%;
}

.intro1 {
  position: absolute;
  top: 54%;
  left: 25%;
  font-size: 120%;
}
.intro2 {
  position: absolute;
  top: 62%;
  left: 24%;
  font-size: 140%;
}

.tag {
  position: absolute;
  top: 80%;
  left: 40%;
}

.section1-title {
  position: absolute;
  top: 90%;
  left: 30%;
}

.section1-desc1 {
  position: absolute;
  top: 97%;
  left: 33%;
}

.List {
  position: absolute;
  top: 104%;
  left: 35%;
}

.section1-desc2 {
  position: absolute;
  top: 128%;
  left: 33%;
}

.section2-title {
  position: absolute;
  top: 133%;
  left: 30%;
}

.section2-desc1 {
  position:  absolute;
  top: 140%;
  left: 33%;
}

.section2-desc2 {
  position: absolute;
  top: 145%;
  left: 33%;
}

.list1 {
  position: absolute;
  top: 150%;
  left: 35%;
}

.section3-title {
  position: absolute;
  top: 161%;
  left: 30%;
}

.section3-desc1 {
  position: absolute;
  top: 168%;
  left: 33%;
}

.section4-title {
  position: absolute;
  top: 174%;
  left: 30%;
}

.section4-desc1 {
  position: absolute;
  top: 181%;
  left: 33%;
}

.section4-desc2 {
  position: absolute;
  top: 186%;
  left: 33%;
}

.section5-title {
  position: absolute;
  top: 192%;
  left: 30%;
}

.section5-desc1 {
  position: absolute;
  top: 199%;
  left: 33%;
}

.section5-desc2 {
  position: absolute;
  top: 204%;
  left: 33%;
}

.tag2 {
  position: absolute;
  top: 220%;
  left: 45%;
}

.intro3 {
  position: absolute;
  top: 230%;
  left: 27%;
}

.R1-title {
  position: absolute;
  top: 240%;
  left: 30%;
}

.R1-desc1 {
  position: absolute;
  top: 247%;
  left: 33%;
}
.R1-desc2 {
  position: absolute;
  top: 252%;
  left: 33%;
}

.R2-title {
  position: absolute;
  top: 257%;
  left: 30%;
}

.R2-desc1 {
  position: absolute;
  top: 264%;
  left: 33%;
}

.R2-item1 {
  position: absolute;
  top: 270%;
  left: 35%;
}
.R2-item2 {
  position: absolute;
  top: 275%;
  left: 35%;
}
.R2-item3 {
  position: absolute;
  top: 280%;
  left: 35%;
}
.R2-item4 {
  position: absolute;
  top: 285%;
  left: 35%;
}

.R3-title {
  position: absolute;
  top: 290%;
  left: 30%;
}
.R3-desc1 {
  position: absolute;
  top: 297%;
  left: 33%;
}
.R3-desc2 {
  position: absolute;
  top: 302%;
  left: 33%;
}
.R3-desc3 {
  position: absolute;
  top: 307%;
  left: 33%;
}

.R4-title {
  position: absolute;
  top: 312%;
  left: 30%;
}

.R4-desc1 {
  position: absolute;
  top: 319%;
  left: 33%;
}

.RK {
  min-height: 360vh; 
}
.E_word1 {
  position: absolute;
  top: 326%;
  left: 28%;
}
.E_word2 {
  position: absolute;
  top: 335%;
  left: 40%;
}


@media screen and (max-width: 798px) {
  
@font-face {
  font-family: 'Yosugara';
  src: url('fonts/yosugaraver1_2.ttf') format('truetype');
}

@font-face {
  font-family: 'Harenosora';
  src: url('fonts/Harenosora.otf') format('truetype');  
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Harenosora';
}
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 {
  font-family: 'Yosugara';
  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;
}
footer {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /* お問い合わせ基準サイズ */
  background-color: rgba(200, 245, 245, 0.7);
  text-align: center;
  padding: 10px 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 100%;
  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;
}
.PP {
  color: black;
  text-decoration: none;
}

  .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;
}

.PP,
.RK {
  font-size: 0.95vh;
}

.title {
  position: absolute;
  top: 28%;   /* 33 -5 */
  left: 14%;
  font-size: 200%;
}

.intro1 {
  position: absolute;
  top: 39%;   /* 54 -10 */
  left: 7%;
  font-size: 130%;
}
.intro2 {
  position: absolute;
  top: 42%;   /* 62 -15 */
  left: 6%;
  font-size: 130%;
}

.tag {
  position: absolute;
  top: 55%;   /* 80 -20 */
  left: 33%;
}

.section1-title {
  position: absolute;
  top: 60%;   /* 90 -25 */
  left: 10%;
}

.section1-desc1 {
  position: absolute;
  top: 65%;   /* 97 -25 */
  left: 13%;
}

.List {
  position: absolute;
  top: 69%;   /* 104 -25 */
  left: 15%;
}

.section1-desc2 {
  position: absolute;
  top: 81%;  /* 128 -25 */
  left: 13%;
}

.section2-title {
  position: absolute;
  top: 85%;  /* 133 -25 */
  left: 10%;
}

.section2-desc1 {
  position:  absolute;
  top: 90%;  /* 140 -25 */
  left: 13%;
}

.section2-desc2 {
  position: absolute;
  top: 93%;  /* 145 -25 */
  left: 13%;
}

.list1 {
  position: absolute;
  top: 96%;  /* 150 -25 */
  left: 15%;
}

.section3-title {
  position: absolute;
  top: 101.5%;  /* 161 -25 */
  left: 10%;
}

.section3-desc1 {
  position: absolute;
  top: 106%;   /* 98 +10 */
  left: 13%;
}

.section4-title {
  position: absolute;
  top: 109%;   /* 104 +10 */
  left: 10%;
}

.section4-desc1 {
  position: absolute;
  top: 113%;   /* 111 +10 */
  left: 13%;
}

.section4-desc2 {
  position: absolute;
  top: 116%;   /* 116 +10 */
  left: 13%;
}

.section5-title {
  position: absolute;
  top: 119.5%;   /* 122 +10 */
  left: 10%;
}

.section5-desc1 {
  position: absolute;
  top: 123.5%;   /* 129 +10 */
  left: 13%;
}

.section5-desc2 {
  position: absolute;
  top: 126.5%;   /* 134 +10 */
  left: 13%;
}

.tag2 {
  position: absolute;
  top: 135%;   /* 150 +10 */
  left: 38%;
}

.intro3 {
  position: absolute;
  top: 140%;   /* 160 +10 */
  left: 7%;
}

.R1-title {
  position: absolute;
  top: 143%;   /* 170 +10 */
  left: 10%;
}

.R1-desc1 {
  position: absolute;
  top: 147%;   /* 177 +10 */
  left: 12%;
}
.R1-desc2 {
  position: absolute;
  top: 150%;   /* 182 +10 */
  left: 12%;
}

.R2-title {
  position: absolute;
  top: 153%;   /* 187 +10 */
  left: 10%;
}

.R2-desc1 {
  position: absolute;
  top: 156%;   /* 194 +10 */
  left: 13%;
}

.R2-item1 {
  position: absolute;
  top: 159%;   /* 200 +10 */
  left: 15%;
}
.R2-item2 {
  position: absolute;
  top: 161%;   /* 205 +10 */
  left: 15%;
}
.R2-item3 {
  position: absolute;
  top: 163%;   /* 210 +10 */
  left: 15%;
}
.R2-item4 {
  position: absolute;
  top: 165%;   /* 215 +10 */
  left: 15%;
}

.R3-title {
  position: absolute;
  top: 168%;   /* 220 +10 */
  left: 10%;
}
.R3-desc1 {
  position: absolute;
  top: 172%;   /* 227 +10 */
  left: 11%;
}
.R3-desc2 {
  position: absolute;
  top: 174.5%;   /* 232 +10 */
  left: 11%;
}
.R3-desc3 {
  position: absolute;
  top: 177%;   /* 237 +10 */
  left: 11%;
}

.R4-title {
  position: absolute;
  top: 180%;   /* 242 +10 */
  left: 10%;
}

.R4-desc1 {
  position: absolute;
  top: 183%;   /* 249 +10 */
  left: 13%;
}

.RK {
  min-height: 205vh; 
}

.E_word1 {
  position: absolute;
  top: 187%;   /* 256 +10 */
  left: 8%;
}
.E_word2 {
  position: absolute;
  top: 192%;   /* 265 +10 */
  left: 30%;
}


}