@charset "UTF-8";

/* ===============================================
   1. Modern Reset (Destyle.css ベースの軽量版)
   =============================================== */

img {
  max-width: 100%;
  height: auto;
}

/* ===============================================
   2. Base Settings (基本設定)
   =============================================== */
html {
  /* 【重要】62.5%ハック */
  /* これにより 1rem = 10px として計算されます */
  font-size: 62.5%;
  height: 100%;
}

body {
  /* text16 相当 (16px) を基本サイズにする */
  font-size: 1.6rem;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  background: #fff;
  /* 日本語を美しく見せる魔法の4行 */
  line-height: 1.75;
  font-feature-settings: "palt";/* 文字詰め */
  -webkit-font-smoothing: antialiased;/* 文字を滑らかに */
  overflow-wrap: break-word;/* レイアウト崩れ防止 */
	
}

/* ===============================================
   3. Typography Utility (ご要望の追加分)
   =============================================== */
/* 62.5%ハックが効いているため、
   1.0rem = 10px
   1.6rem = 16px
   と直感的に使えます。
*/
.text10 { font-size: 1.0rem; } /* 10px */
.text11 { font-size: 1.1rem; }
.text12 { font-size: 1.2rem; }
.text13 { font-size: 1.3rem; }
.text14 { font-size: 1.4rem; }
.text15 { font-size: 1.5rem; }
.text16 { font-size: 1.6rem; } /* 16px (標準) */
.text17 { font-size: 1.7rem; }
.text18 { font-size: 1.8rem; }
.text19 { font-size: 1.9rem; }
.text20 { font-size: 2.0rem; }
.text21 { font-size: 2.1rem; }
.text22 { font-size: 2.2rem; }
.text23 { font-size: 2.3rem; }
.text24 { font-size: 2.4rem; }
.text25 { font-size: 2.5rem; }
.text26 { font-size: 2.6rem; }



/* ===============================================
   4. Links & Interactions
   =============================================== */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

a:hover {
  opacity: 0.7;
}

/* ===============================================
   5. Margin Utility (余白クラス)
   =============================================== */
/* これらも 10px単位 などで直感的に作れます */
.u-mt-10 { margin-top: 1.0rem; }
.u-mt-20 { margin-top: 2.0rem; }
.u-mt-30 { margin-top: 3.0rem; }

.u-mb-10 { margin-bottom: 1.0rem; }
.u-mb-20 { margin-bottom: 2.0rem; }
.u-mb-30 { margin-bottom: 3.0rem; }

.u-text-center { text-align: center; }
.u-fw-bold { font-weight: 700; }
.mar_b20 { margin-bottom: 20px;}

/* ===============================================
   6. Loading Screen
   =============================================== */
#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

#splash_logo {
  width: 60%;
  max-width: 300px;
}

.fadeUp {
  animation: fadeUpAnime 1.0s forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}