@charset "UTF-8";
body {
    margin: 0;
    padding: 0;
    height: auto;
    background-color: #0f172a; 
    min-height: 400vh;
    
}
p{
  color: #e0f2fe;
}
h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2em;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
  border-left: 5px solid #38bdf8;
  padding-left: 0.5em;
}

h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6em;
  color: #60a5fa; /* 明るめの青 (Tailwind blue-400) */
  text-shadow: 0 0 6px rgba(96, 165, 250, 0.3);
  border-left: 4px solid #60a5fa;
  padding-left: 0.5em;
  margin-top: 2em;
}
h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2em;
  color: #93c5fd; /* さらに淡い青 (Tailwind blue-300) */
  text-shadow: 0 0 4px rgba(147, 197, 253, 0.2);
  border-left: 3px solid #93c5fd;
  padding-left: 0.5em;
  margin-top: 1.5em;
}


/*ステーション--------------------*/
.wrapper{
    max-width:1120px;
    margin:auto;
    padding:0 1.5rem;
  }
  .grid{
    display:grid;
    gap:2rem 1.5rem;
    grid-template-columns: repeat(4,1fr);
    text-align: center;
  }
  .item{
    width: 200px;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #e0f2fe;
    background: #1e3a8a;
    word-break: break-word;
  }
  .item img{
    width: 100%;
    height: 120px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
  }
  
  .item a{
    color:#234;
    font-size: .875rem;
  }
  .name{
    font-size:18px;
    font-weight: bold;
    text-align: left;
  }
  .title{
    font-size:13px;
    font-weight: bold;
    text-align: left;
  }
  .contents{
    text-align: left;
  }
  .button{
    text-align: right;
  }

  h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2em;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
    border-left: 5px solid #38bdf8;
    padding-left: 0.5em;
  }
  
  /*ヘッダー---------------------*/
  .header-image {
    position: relative;
      width: 100%;
      height: 300px;
      background: url(../image/main.png) center / cover;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .header-text {
    color: white;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
  
  .nav {
    background: linear-gradient(90deg, #1e293b, #0f172a);
      text-align: center;
  }
  ul {
      overflow: hidden;
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: center; 
  }
  ul li {
      display: inline-block;
      padding: 26px 10px 20px 80px;
      margin-left: 20px;
  }
  a {
      color: #fff;
      font-size: 20px; 
      text-decoration: none;
  }
  
  .pro{
    text-align: center;
  }


  .button013 a {
    background: #eee;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    z-index:0;
    border-left: solid 5px #6bb6ff;
}
.button013 a:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #6bb6ff;
    transition: .3s;
    left:0;
}

.button013 a:hover {
    color: #FFF;
}
.button013 a:hover:before {
    width: 100%;
    z-index: -1;
}
/*プロフィール*/
.v-line {
  position: relative;
  width: 2px;              
  height: 80px;           
  background: white;      
  margin: 20px;
}
.dot {
  position: absolute;
  left: 50%;              
  transform: translateX(-50%);
  width: 10px;              
  height: 10px;
  background: white;
  border-radius: 50%;      
}
.main-container {
  margin-left: 15px; 
  margin-top:-10px;
  white-space: nowrap;
  font-size: 1em; 
  line-height: 1.5; 
  color: #e0f2fe;
}
.sub-container{
  margin-left: 35px; 
  white-space: nowrap;
  font-size: 0.9em; 
  line-height: 1.5; 
  color: #e0f2fe;
}
.image-plane{
  width:45px;
}
/**/
.button014 a {
  background: #eee;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 240px;
  padding: 10px 25px;
  color: #313131;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  z-index:0;
  border-left: solid 5px #e66bff;
}
.button014 a:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  background: #e66bff;
  transition: .3s;
  left:0;
}

.button014 a:hover {
  color: #FFF;
}
.button014 a:hover:before {
  width: 100%;
  z-index: -1;
}
/**/
.button-56 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  margin: 0 auto;
  padding: .9em 2em;
  border: none;
  border-radius: 5px;
  background-color: #ea8080;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
}

.button-56:hover {
  background-color: #da7070;
}

.button-56::before {
  width: 1.25em;
  height: 1.25em;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  content: '';
}
@media(max-width:799px){
  .grid{
    display:grid;
    gap:2rem 1.5rem;
    grid-template-columns: repeat(1,1fr);
    text-align: center;
  }
  a {
    color: #fff;
    font-size: 15px; 
    text-decoration: none;
  }
  .nav ul {
    display: flex;  
    flex-direction: column; 
    align-items: center; 
    padding: 0; 
    margin: 0;  
  }

  .nav ul li {
    margin: 10px 0; 
    padding: 10px 0; 
    display: block; 
  }
}