/* 全体 */
body {
    min-height: 100vh;
    background: linear-gradient(135deg, #01003f, #333333, #555555);
    color: white;
}

/* リンク色指定 */
a {
  color: white; /* 通常のリンク色 */
  text-decoration: none; /* 下線を消したい場合 */
}

a:visited {
  color: rgb(221, 221, 221); /* 訪問済みリンク */
}

a:hover {
  color: #ccc; /* ホバー時の色 */
}

a:active {
  color: #aaa; /* クリック時の色 */
}

a::after {
  content: "↗";          /* 右上矢印アイコン */
  font-size: 0.9em;       /* 少し小さめに */
  color: inherit;         /* リンクと同じ色にする */
  padding: 20px 0;
}

a.sp-link-btn-con::after {
  content: "↗";          /* 右上矢印アイコン */
  font-size: 0.9em;       /* 少し小さめに */
  color: inherit;         /* リンクと同じ色にする */
  padding: 10px 0;
}

footer {
    background-color: black;
    padding: 10px;
}

/* ======================================== */
/* 宣伝 */
.myadv {
    border: 2px solid #ffffff;
    border-radius: 10px;
    max-width: 75vw;
}

.myadv-img {
    max-width: 25vw;
}

/* リンクボタン */
.link-btn{
    background: #1c303b;
    border: 2px solid #ffffff;
    border-radius: 30px;
    margin: 4px;
    padding: 1px;
    width: 45vw;
    max-height: 20vh;
}
.link-btn:hover{
    box-shadow: 0 16px 20px -8px rgba(0, 0, 0, 0.4);
}

/* リンクボタンアイコン画像 */
.link-icon{
    max-width: 40px;
}

/* ロード要素 */
.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    /* 背景色の設定 */
    background-color: #000000;
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* DIV並列配置 */
.container {
    display: flex;
    justify-content: flex-start; /* 左右に配置 */
    gap: 20px; /* ボックス間の余白（任意） */
    flex-wrap: wrap;
}

/* DIV並列配置 */
.box {
    max-width: 30vw;
    flex: 1;               /* 幅を均等にする */
    padding: 20px;         /* 内側余白 */
}

/* リンクボタン用コンテナ */
.link-btn-con {
    display: flex;
    justify-content: flex-start; /* 左右に配置 */
    gap: 10px; /* ボックス間の余白（任意） */
}

.link-btn-box {
    display: inline-block;
    /* flex: 1;               幅を均等にする */
    padding: 20px;         /* 内側余白 */
}

/* リンク配置用コンテナ */
.link-pos-con {
    display: flex;
    justify-content: flex-start; /* 左右に配置 */
    gap: 10px; /* ボックス間の余白（任意） */
    flex-wrap: wrap;
}

.link-pos-box {
    display: flex;
    justify-content: flex-start; /* 左右に配置 */
}

/* ======================================== */
/* スマホ用CSS */

/* 宣伝 */
.sp-myadv {
    border: 2px solid #ffffff;
    border-radius: 10px;
}

.sp-myadv-img {
    max-width: 80%;
}

/* DIV並列配置 */
.sp-container {
    gap: 20px; /* ボックス間の余白（任意） */
}

/* DIV並列配置 */
.sp-box {
    flex: 1;               /* 幅を均等にする */
    padding: 20px;         /* 内側余白 */
}

.sp-h2 {
    font-size: 25px;
}

/* リンクボタン */
.sp-link-btn{
    background: #1c303b;
    border: 2px solid #ffffff;
    border-radius: 30px;
    margin: 4px;
    padding: 1px;
    width: 90%;
}
.sp-link-btn:hover{
    box-shadow: 0 16px 20px -8px rgba(0, 0, 0, 0.4);
}

.sp-link-btn-box {
    display: inline-block;
    /* flex: 1;               幅を均等にする */
    padding: 10px 0 0 10px;         /* 内側余白 */
}

/* リンクボタンアイコン画像 */
.sp-link-icon{
    max-width: 20px;
}

/* リンクボタン用コンテナ */
.sp-link-btn-con {
    display: flex;
    justify-content: flex-start; /* 左右に配置 */
    gap: 10px; /* ボックス間の余白（任意） */
}