*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

html {
    min-height:100%;
    position:relative;
    padding-bottom:40px;
}

main {
    background-color: #f0f0f0;
    padding-bottom: 40px;
    padding-top:1px;
}


.sew {
  text-align: center;
  background: #eaebf4;
  box-shadow: 0px 0px 0px 5px#eaebf4;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
}

.ribon {
	background: #27acd9;
	padding: 1rem;
	position: relative;
	color: #fff;
	
}

.ribon:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 20px rgb(20, 86, 110);
}

/* 見出し(青) */
.headline{
    background: #eaf5f9;
    border-left: solid 10px #27acd9;
    padding: 0.7rem 1.5rem;
    margin-bottom:23px;
}

.logo {
  display: flex;               /* フレックスボックスで配置制御 */
  align-items: center;         /* 縦方向の中央寄せ */
  height: 75px;               /* コンテナの高さを指定（お好みで） */
  background-color:white;
  /* background-color:rgba(255, 0, 0, 0.698) */
}

.logo img {
  height: 50px;
  width: auto;  
  padding-left:25px;               /* アスペクト比を保つ */
}


/* ヘッダー */
.wrapper{
    /* max-width:1300px; */
    margin:0 auto;
    padding: 0 16px;
    display: flex;        /* Flexboxを有効にする */
    align-items: center;  /* 子要素（h2など）を垂直方向の中央に揃える */
    flex-wrap: nowrap; /* ナビゲーション項目（li）の改行を防ぐ */
}

header{
    width:100%;
    background-color:white;
}

header a{
    text-decoration:none;
}

.width_line{
    box-shadow:4px 4px 4px;
}

/* header nav の定義を調整 */
header nav{
    white-space: nowrap; /* 改行しない */
    /* 元の赤系背景色を維持 */
    width:100%;
    /* background-color:rgba(255, 0, 0, 0.698); */
    background-color:rgba(0, 166, 255, 0.663);
    
    /* 元の太い左ボーダーを維持 */
    padding-left:15px; /* 元のパディングを維持 */
    /* border-left:20px solid rgb(255, 0, 0); */
    border-left:20px solid rgb(0, 117, 180);
    
    /* 元の影を維持 */
    box-shadow:0px 3px 2px;
    
    position:relative;
    z-index:10;
    
    /* 縦幅を狭くするため、ul li aのパディングに依存し、ここでパディングはゼロに近づける */
    padding: 0; 
}

/* nav a の定義を調整 (色は引き続き白、ホバーエフェクトのためのトランジションを維持) */
nav a{
    color: white;
    transition: color 0.3s ease;
}

/* header nav ul li の定義を調整 (変更なし) */
header nav ul li{
    list-style:none;
    display:inline-block;
    /* 元の余白を維持 (縦幅調整のため、margin-top/bottomは削除) */
    margin-right:30px;
    margin-top:0; /* 縦幅削減のため */
    margin-bottom:0; /* 縦幅削減のため */
}

/* リンク（aタグ）自体にスタイルを定義 */
header nav ul li a {
    display: block;
    /* 【縦幅を狭くするための重要ポイント】パディングを減らす (例: 15px -> 8px) */
    padding: 10px 10px; 
    font-weight: 500;
    font-size: 16px;
    position: relative; 
    color: white; 
}


/* ホバーエフェクト1: 下線が広がるアニメーション (色を赤系に合わせる) */
header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    /* ハイライトカラーを元の赤（ボーダーと同じ色）に合わせる */
    background-color: blue; 
    transition: width 0.3s ease-out;
}

/* ホバー時の下線の変化 (幅の広がりは維持) */
header nav ul li a:hover::after {
    width: 80%; 
}

/* ホバーエフェクト2: テキストカラーの変更 (背景色に馴染むよう、明るい色に変更しない) */
header nav ul li a:hover {
    /* テキストカラーは白を維持するか、わずかに明るい色にすることで、赤の背景に馴染ませる */
    color: blue; /* わずかにクリームがかった白 */
}

/* index記事の見出し */
.feature {
    position:relative;
}

.feature img{ 
    width:100%;
    height:300px;
    display:block;
    object-fit:cover;
}

.feature span{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    /* background-color: rgba(255, 136, 0, 0.5); */
    /* background-color: rgba(0, 166, 255, 0.5); */
    /* background-color: rgb(0, 255, 217,0.5); */
    width:100%;
    /* width:60%; */
    height:70px;
}


/* 上下の白い線 
.feature span::before,
.feature span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;            
    background-color: rgba(255, 255, 255, 0.78);
}

.feature span::before {
    top: 0;
}

.feature span::after {
    bottom: 0;  
}*/

.feature span h1{
    white-space: nowrap; /* 改行しない */
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    /* padding-top:10px; */
    text-align: center;
    /* color: rgb(82, 1, 1); */
    /* color: black; */
    color: rgb(255, 255, 255);
    /* color: blue; */
    /* color: rgb(0, 204, 255); */
    /* text-shadow: 0 0 10px #e7f30a,0 0 15px #e7f30a; */
    /* text-shadow: 0 0 10px #fff,0 0 15px #fff; */
    /* text-shadow:0px 0px 7px rgb(0, 166, 255); */
    text-shadow:0px 0px 7px rgba(0, 30, 255, 0.268);
    /* text-shadow:1px 1px 1px rgb(0, 0, 0); */
    font-size: 60px;
    letter-spacing: 0.2em;
    /* font-style:italic; */
    font-family: 'Sacramento', cursive;
    /* font-family: 'shouzan', serif; */
    /* font-family: "Monotype Corsiva", serif; */
    /* -webkit-text-sstroke: 1px rgb(195, 252, 255); */
}

/* 基本の構造 */
.maincontent {
    display:flex;
    max-width: 1400px;
    margin: 20px auto; 
    padding:0 15px;
}


/* 主に記事となる部分 */
.mainarticle {
    flex: 2.8;
}

.mainarticle h2{
    max-width: 100%; /* 親要素の幅を超えないように設定 */
    margin-bottom:15px;
    box-sizing: border-box; 
}

.mainarticle p{
    font-size:17px;
    margin-bottom:2px;
    margin-left:10px;
}

.mainarticle,aside{
    /* 以前のパディング設定 (padding-left: 60px; padding-right: 16px;) に合わせる */
    padding: 20px;
    min-width: 0;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius:8px; /* 左側のみ角丸 */
}

/* サイドバー */
aside {
    flex: 1;
    margin-left: 25px; /* 2つのボックスの間に隙間を作る */
}

aside .profile{
    margin-bottom:20px;
}

/* プロフィール */
aside .profile img{
    display: block;
    width:180px;
    margin:0 auto;
    padding-top:20px;
}

aside .profile h4{
    text-align: center;
    font-size:20px;
    margin-bottom:30px;
}

aside .profile p{
    max-width:100%;
    text-align: center;
    word-break: break-all; /* ← 英単語を途中で折り返す */
}

/* フッター */
footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:40px;
    background-color:gray;
}

/* ブログカード */
footer p{
    padding-top:5px;
    color:white;
    text-align: center;
    font-size:15px;
}

.blog-card-container {
    padding-top:10px;
    /* background-color: #f0f0f0; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height: 100vh; */
    margin: 0;
}

.blog-card {
    display: flex;
    width: 600px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.card-img-container {
    flex: 0 0 40%;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.card-content {
    flex: 1;
    padding: 1.5rem;
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 0.5rem;
}

.card-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.delete_line{
    text-decoration: line-through;
}

@font-face {
  font-family: 'ShouzanBrush';
  src: url('/fonts/shouzan.otf') format('truetype');
  font-display: swap;
}

@media screen and (max-width: 768px) {
    .maincontent {
        flex-direction: column;
        padding:0 15px;
    }

    .mainarticle {
        /* 上下は20px（introのpadding）、左右は16px */
        padding: 20px 16px; 
    }

    aside {
        margin-left: 0; 
        margin-top: 10px;
        /* 上下は20px（introのpadding）、左右は16px */
        padding: 20px 16px;
    }
    .toc {
        display: none; /* 非表示にする */
    }
}