/* ====================================================
   Base: 全体共通
==================================================== */
html, body {
    min-height: 100vh;
    margin: 0;
}

body {
    font-family: "Helvetica Neue", sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

img {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    display: block;
    padding: auto 100px;
    border: 1px solid #ccc;
}

.main-title {
    text-align: center;
}

.main-title h1{
    margin:10px;
    font-size: 120px;
    color: #344368;
}
.main-title h2{
    color: #344368;
    font-size: 18px;
}

.main-title h3{
    color: #344368;
}

.


/* ====================================================
   Utility: 汎用クラス
==================================================== */
.text-center {
    text-align: center;
}

.text-center code {
    background-color: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.text-center.mt-20 a {
  text-decoration: none;
}

.mt-20 {
    margin-top: 20px;
    text-align: center;
}

.button {
    background-color: #47c5d8;
    color: #0c1325;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.button:hover{
    color: #eac407;
}

.button_register{
    background-color: #f4e9b4;
    color: #0c1325;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.button_register:hover{
    color: #eac407;
}

.button_start{
    margin: 200px auto 300px;
    text-align: center;
}

.button_start a{
    text-decoration: none; 
    text-align: center;
    padding: 20px 50px;
    background-color: #47c5d8;
    font-size: x-large;
    font-weight: 400;
    color: #111c3f;
    border-radius: 20px;
}

.button_start a:hover{
    color: #fad20a;
}

.wide-button {
    display: inline-block;
    width: 200px;   /* 任意の幅。お好みで調整してください */
    text-align: center;
}

.buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* 共通ボタンデザイン */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
}

/* 削除ボタン */
.btn-danger {
    background-color: #d9534f;
    color: white;
}

.btn-danger:hover {
    background-color: #c9302c;
}

/* キャンセルボタン */
.btn-cancel {
    background-color: #cccccc;
    color: #333333;
}

.btn-cancel:hover {
    background-color: #bbbbbb;
}
.card {
    box-sizing: border-box;
    width: 90%;
    max-width: 800px;
    margin: 30px auto;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px 25px;
}

.card1{
        background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px 25px;
    margin: 30px auto;         /* ← ここを auto 中央寄せに */
    max-width: 800px;          /* ← 画面が広くても最大幅を制限 */
    width: 90%;                /* ← モバイルでも見切れないように */
}

.card h3 {
    margin-bottom: 20px;
    color: #2a3349;
}

.card form input[type="email"],
.card form input[type="password"] {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}


.card-delete {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px 25px;
    margin: 30px auto;         /* ← ここを auto 中央寄せに */
    max-width: 500px;          /* ← 画面が広くても最大幅を制限 */
    width: 90%;                /* ← モバイルでも見切れないように */
}

.card-delete form input[type="email"],
.card-delete form input[type="password"] {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.pagelink{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 30px auto;
}

.linkpre{
    padding-right: 10px;
}

.linkpre a{
    text-decoration: none;
}

.linknext{
    padding-left: 10px;
}

.linknext a{
    text-decoration: none;
}

.space{
    height: 100px;
}

.delete_account{
    padding-bottom: 50px;
    padding-left: 50px;
}

.delete_account a{
    padding: 15px 30px;
    color: #ffffff;
    background-color:#273d75 ;
    border-radius: 15px;
    text-decoration: none;
}

.delete_account a:hover{
    background-color:#0c1325; ;
}


/* ====================================================
   Header / Navbar
==================================================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0c1325;
    color: white;
    padding: 10px 20px;
}

.nav-logo {
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-decoration: none;
}

.nav-logo a{
    color: #f4e9b4;
}

.nav-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-user {
    margin-right: 10px;
    font-size: 14px;
    color: #fff;
}

.userlogout {
    float: right;
}

/* ====================================================
   Footer
==================================================== */
.site-footer {
    margin-top: 80px;
    height: 100px;
    bottom:0;
    padding: 20px 20px;
    color: #ffffff;
    background: #0c1325;
    font-size: 0.9rem;
    position: relative;

    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    border-radius: 0;
    z-index: 1;
}

.site-footer p{
    position: absolute;
    text-align: center;
    left:0;
    bottom: 20px;
    width:100%;
    z-index: 2;
}

.site-footer::before{
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background-image: url("/static/img/ui/footer-bg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    top: -95px;
    left: 0;
    box-sizing: border-box;
    background-size: calc(100% + 4px) 100%;
}

.lesson-footer{
    padding: 5px 20px;
    color: #ffffff;
    background: #0c1325;
}

.lesson-footer p{
    text-align: center;
}


/* ====================================================
   Home Page
==================================================== */
.login-card {
    width: 320px;
    margin: 30px auto 250px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px 25px;
    text-align: center;
}

.login-card h3 {
    margin-bottom: 20px;
    color: #2a3349;
}

.login-card form input[type="email"],
.login-card form input[type="password"] {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.login-card form button {
    width: 95%;
    padding: 10px;
    background-color: #344368;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.login-card form button:hover {
    background-color: #1c2233;
}

.login-register-link {
    margin-top: 15px;
    font-size: 14px;
}

.login-register-link a {
    color: #3498db;
    text-decoration: none;
}

.login-register-link a:hover {
    text-decoration: underline;
}

.login-error {
    color: red;
    margin-top: 10px;
}

.hero {
  margin: 0;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.hero img {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  display: block;
  position: relative;
  z-index: 1;
  border: none;
  padding: 0;
  animation: zoomUp 8s ease-out forwards;
  transform-origin: center center;
}

@keyframes zoomUp {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}
/* 地図画像の「上側」にだけグラデーション */
.hero::before {
  content: "";
  position: absolute;
  margin-bottom: 0;              /* ← 画像エリアの上 */
  left: 0;
  bottom:0;
  width: 100%;
  height: 80%;       /* ← グラデーションの厚み */
  pointer-events: none;
  background: linear-gradient(to top,#0c1325 0%,rgba(249,249,249,0) 100%);
  z-index: 2;
}

.hero-text h1 {
  position: absolute;
  bottom: 15%;
  left: 0;
  width: 100%;
  text-align: center;
  color: rgb(215, 235, 247);
  z-index: 4;
}

.hero-text h2 {
  position: absolute;
  bottom: 12%;
  left: 0;
  width: 100%;
  text-align: center;
  color: rgb(215, 235, 247);
  z-index: 3;
}


.container{
  margin-top: 0;
  margin-bottom: 100px;
  padding: 80px 20px 200px;
background: linear-gradient(
  to bottom,
  #0c1325  0%,
  #0c1325  82%,
  #18274c 90%,
  #28407b 96%,
  #f9f9f9 100%
);
  width:auto;
}

.container h3{
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 60px;
  padding-bottom: 30px;
  animation: fadeIn 5s forwards;
  font-family: "mincho";
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
    to {
    opacity: 1;
  }
}

.container p{
  color: rgb(255, 255, 255);
  text-align: center;
  font-size:large;
  font-family: "mincho";
  line-height: 2rem;
  animation: fadeIn 5s forwards;
}

.container p span{
    padding-top: 50px;
    font-size:xx-large;
    font-weight: 600;
    font-family: "mincho";
    animation: fadeIn 5s forwards;
        background: linear-gradient(
        to bottom,
        #fff6b3 0%,
        #ffd700 35%,
        #cfa300 60%,
        #fff1a8 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    display: inline-block;
    letter-spacing: 0.05em;
    
}


/* ====================================================
   Course Lessons Page
==================================================== */
.course-list {
    box-sizing: border-box;
    width: 90%;
    max-width: 800px;
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;    /* 2段目を左側から並べる */
    gap: 20px;
    padding: 30px 25px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-list li {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 40px) / 3);     /* 3枚＋横方向のgap 2個で、1段の幅に収める */
    min-height: 250px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    list-style: none;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.course-list li img {
    height: 100px;
    margin: 0 auto 10px;
    display: block;
    border: none;
}

.course-list a {
    text-decoration: none;
    color: #000;
    display: block;
    margin-top: auto;
    text-align: center;
}

.course-list a:hover {
    color: #3498db;
}

.course-list li h3 {
    color: #2a3349;
}

.course-list li h4 {
    color: #0162f4;
    text-align: center;
    padding: 10px 20px;
    background-color: #17fb07;
    border-radius: 20px;
}

.course-list li h4:hover {
    color: #f907dd;
}

.course-list li p {
    text-align: left;
}






.course-list-index {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    margin-bottom: 100px;
}

.course-list-index li {
    width: 200px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    padding: 20px;
    list-style: none;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-list-index li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.course-list-index li img {
    height: 100px;
    margin: 0 auto 10px;
    display: block;
    border: none;
}

.course-list-index a {
    text-decoration: none;
    color: #000;
    display: block;
    margin-top: auto;
    text-align: center;
}

.course-list-index a:hover {
    color: #3498db;
}

.course-list-index li h3 {
    color: #2a3349;
}

.course-list-index li h4 {
    color: #0162f4;
    text-align: center;
    padding: 10px 20px;
    background-color: #17fb07;
    border-radius: 20px;
}

.course-list-index li h4:hover {
    color: #f907dd;
}

.course-list-index li p {
    text-align: left;
}















.map-image {
    max-width: 90%;
    height: auto;
    margin: 20px auto;
    display: block;
    border: 1px solid #ccc;
}

.lesson-image {
    max-width: 50%;   /* 画像幅を半分に縮小（お好みで%やpx調整） */
    height: auto;     /* 縦横比は維持 */
    margin: 20px auto;
    display: block;
    border: 1px solid #ccc;
}

.success-box{
  background: #36b5ec;
  color: #fe0e9a;
  padding: 15px;
  margin: 30px auto;
  width: 800px;
  border-radius: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 1.2rem;
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.success-box img{
    width: 300px;
    display: block;
    margin: auto;
}

/* ====================================================
   Commynity page
==================================================== */

.mt-20-award {
    margin: 20px;
    padding-bottom: 50px;
}

.mt-20-award img{
}

/* ====================================================
   Responsive (スマホ・タブレット対応)
==================================================== */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .login-card,
    .card {
        width: 90%;
        padding: 20px;
    }

    .course-list {
        flex-direction: column;
        align-items: center;
    }

    .course-list li {
        width: 90%;
        max-width: 400px;
    }


}