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;
  }

.header-image {
    width: 100%;
    height: 200px;
    background: url(../image/main.png) center / cover;
}

.nav {
    background-color: #191970;
    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;
}

strong{
    color:#e0f2fe;
}

.container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
}
.wrapper, .container {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.wrapper {
    display: flex;       
    gap: 2%;             
    justify-content: space-between; 
    margin: 0 auto;       
}
.post{
	width:70%;
}
.sidebar{
	width:30%;
}
img {
    position:relative;
    max-width:640px;
    height: auto;
    max-height: auto;
    
    display: block; 
    object-fit: cover; 
    background-position: center;
}
/*------ スライダー------*/
.slider {
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .slider img {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    max-width: 100%;
    height: auto;
  }
  
  
  .slider .slick-slide{
      height:auto!important;
  }
/*---------- 矢印 ----------*/
.slider .slick-next{
    right:0!important;
}
.slider .slick-prev{
    left:0!important;
}
.slider .slick-arrow{
    display: block !important;
    opacity: 1 !important;
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
}
  

/*ボタン*/
.btn-flat-dashed-filled {
    display: inline-block;
    padding: 0.1em 1.0em;
    text-decoration: none;
    color: #67c5ff;
    border: dashed 1px #67c5ff;
    background: #f2fcff;
    border-radius: 3px;
    transition: .4s;
    margin-right: 50px;
    margin-left: 50px;
}

.btn-flat-dashed-filled:hover {
background: #cbedff;
color: #FFF;
}



.box17 {
    margin: 2em auto;
    padding: 0.5em 1.5em;
    border-top: solid 2px #e0f2fe;
    border-bottom: solid 2px #e0f2fe;
    width: 90%; /* レスポンシブ対応 */
    max-width: 800px; /* 必要なら */
    position: relative; /* 擬似要素のために */
    box-sizing: border-box;
}

.box17:before,
.box17:after {
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: calc(100% + 20px);
    background-color: #e0f2fe;
}

.box17:before {
    left: 10px;
}

.box17:after {
    right: 10px;
}

.box17 p {
    margin: 0;
    padding: 0;
}


.btn1{
    text-align:center;
}

.tag_area07 ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tag_area07 ul li {
    display: inline-block;
    margin: 0 .3em .3em 0;
    padding: 0;
  }
  .tag_area07 ul li a {
    position: relative;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 1em 0 .75em;
    background-color: #2196F3;
    border-radius: 30px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
  }
  .tag_area07 ul li a:hover {
    background-color: #555;
    color: #fff;
  }
  .tag_area07 ul li a:before {
    content: "#";
    padding-right: 2px;
  }


  @media(max-width:799px){
    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; 
    }
    .wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .post,
    .sidebar {
        width: 100%;
        border-right: none;
    }

    .slider{
        margin-left: 0px;
      }
    
    
  }