* {
  box-sizing: border-box; /* padding と border を幅（width）と高さ（height）に含める */
  overflow-wrap: break-word;/* 行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割される */
  margin: 0;
  padding: 0;
}

html {
  background-color: rgb(30, 30, 30); /* egde で見える外側を装飾 */
  color: white;
}

/* body {}: 設定なし */

body h2 {
  background-color: rgba(40, 40, 40, 0.8);
  margin: 1.5%; /* margin: 要素の外側の余白、重なると大きい方に吸収*/
  padding: 1% 5%; /* padding: 要素の外側の余白*/
}

body h3 {
  background-color: rgba(65, 65, 65, 0.8);
  margin: 1.5%;
  padding: 1% 5%;
}

.loading--wrap {
  width:100%;
  height:100%;
  position:fixed;
  z-index:9998;
  background-image: url('StarryNightSky.jpg');
  background-size: 100%;
  opacity:1;
  transition:opacity 3s linear;
}
 
.loaded {
  opacity:0 !important;
}
 
.loading--wrap::after {
  content:'';
  border:5px solid rgb(248, 255, 198);
  border-right-color: #f2f5b090;
  border-top-color: #f8fdeb5d;
  border-radius:50%;
  width:70px;
  height:70px;
  position:absolute;
  z-index:9999;
  left:46%;
  top:46%;
  transform:translate(-50%,-50%);
  animation: loader 0.8s linear infinite;
  background-image: url('20240319_ConeNogCloud_Circle.ico');
  background-size: 70%;
}
 
@keyframes loader {
  0% {
    transform: rotate(0);
  }
 
  100% {
    transform: rotate(360deg);
  }
}

a {
  color: white;
}

a:hover {
  color: rgb(200, 110, 26);
}

.header {
  display: flex;
  justify-content: center; /* 子要素を中央揃え */
  position: relative;
  background-color: rgba(184, 213, 255, 1);
  padding: 1% 0;
}

.header a {
  color: rgb(17, 42, 79);
}

.header a:hover {
  color: rgb(200, 110, 26);
}

.header img {
  width: 40px;
  position: absolute;
  left: 1.5%;
}

.main {
  margin: 0;
  padding: 1% 0;
  /* background-color: rgb(27, 65, 122); */
  background-image: url('StarryNightSky.jpg');
  background-size: 100%;
}

.content_box {
  background-color: rgba(174, 194, 235, 0.8);
  color: black;
  margin: 1.5%;
  padding: 1% 2%;
}

.content_box h4 {
  background-color: rgb(97, 140, 234);
  margin: 1.5% 0;
  padding: 1% 5%;
}

.footer {
  text-align: center; /* 全ての要素を中央に */
  background-color: rgb(30, 30, 30);
  padding: 3% 0;
}

.footer a {
  color: white;
}

.footer a:hover {
  color: rgb(200, 110, 26);
}