@charset "UTF-8";

html {
scroll-padding-top:100px;
}

header, h2, h3 {
background:#d93127;
}


article {
padding: 0.5em;
display: block;
}
article a {
display:inline-block;
}
article p {
font-size:1em;
line-height:1.5em;
margin:0;
padding: 0.5em;
}

article p span {
margin-left:-0.5em;
display:block;
color:#d93127;
font-weight:bold;
}

.anchor {
height: 1px;
display: block;
padding-top: 100px;
margin-top: -100px;
}



h2 {
margin:0;
color:#ffffff;
font-size: 1em;
line-height: 1.5em;
text-align: center;
}
h2 em {
display:block;
}

h5 {
margin:1em 0 0.5em;
border-radius:0;
background:#000000;
}



.anchorlink {
margin:0 0 1em;
}

.anchorlink ul {
display:table;
margin:0 auto;
text-align:center;
width:100%;
}
.anchorlink ul li {
width:calc(100%/4);
display:table-cell;
padding: 0 0.3em;
}
.anchorlink ul li a {
position: relative;
text-align: center;
margin:0 auto;
display:block;
font-size:0.8em;
font-weight:bold;
padding: 1.5em 0;
color:#ffffff;
background: #720b0b;
border-radius: 10px;
}
.anchorlink ul li:nth-child(odd) a {
background:#024202;
}

.anchorlink ul li a span {
}



.contentslist {
padding: 0.5em;
}
.contentslist ul {
width:100%;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.contentslist ul li {
font-size:1em;
width: 50%;
display: flex;
padding: 0.3em 0.5em;
margin: 0 0 0.5em 0;
position:relative;
}
.contentslist ul li a {
border:solid 1px #ebebeb;
border-radius:5px;
background: #f7f7f7;
}
.contentslist ul li a figure {
width:100%;
border-radius:5px 5px 0 0;
overflow:hidden;
}
.contentslist ul li span {
position:absolute;
top:0;
left:0;
font-size:0.7em;
background:#d93127;
color:#ffffff;
text-align:center;
padding:0.3em;
margin: 0.5em 0 0 0.8em;
border-radius:5px 0 5px 0;
line-height: 1.1em;
font-weight: bold;
width: 20%;
letter-spacing: 0;
}
.contentslist ul li a figure img {
width:100%;
}
.contentslist ul li a em {
font-size:0.9em;
line-height:1.1em;
margin:0;
padding: 0.5em;
color:#000000;
font-weight: bold;
}
.contentslist ul li a p {
font-size:0.8em;
line-height:1.1em;
margin:0;
padding: 0 0.5em 0.5em 0.5em;
color:#000000;
text-align:left;
}

.row3 ul li {
width:calc(100%/3);
padding: 0.1em 0.2em;
margin: 0 0 0.5em 0;
}

.row1 ul li {
width:100%;
}

/* ==========================================================================
   追加：コミティア156 スクリーンショット完全再現レイアウト（グラデなし）
   ========================================================================== */

/* 全体共通のコンテナ枠 */
.comitia-container {
    background: #ffffff;
    border: solid 2px #d93127;
    border-radius: 8px;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}

/* 各セクションのサブタイトル */
.comitia-title-sub {
    color: #d93127;
    font-size: 0.95em;
    font-weight: bold;
    text-align: center;
    line-height: 1.4em;
    margin-bottom: 12px;
}
.comitia-title-sub-red {
    background: #d93127;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    padding: 0.4em;
    margin-bottom: 10px;
}

/* ?? 参加方法：3列横並びフレックスボックス */
.step-flex-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
}
.step-flex-box {
    width: 30%;
    border: solid 1px #d93127;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}
.step-box-header {
    background: #d93127;
    color: #ffffff;
    font-size: 0.75em;
    font-weight: bold;
    text-align: center;
    padding: 4px 2px;
    line-height: 1.2em;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-box-body {
    padding: 4px;
    text-align: center;
}
.step-box-body img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 4px;
}
.step-box-txt {
    font-size: 0.7em;
    line-height: 1.2em;
    color: #000000;
    font-weight: bold;
}
.step-arrow {
    color: #d93127;
    font-size: 0.8em;
    width: 3%;
    text-align: center;
}

/* ==========================================================================
   追加：参加方法 下部pタグのシンプル調整（枠なし・余白重視）
   ========================================================================== */
.step-notes {
    margin-top: 15px; /* 3ステップの画像群との間に心地よい隙間を作る */
    padding: 0 5px;   /* 画面端に文字がくっつかないよう微調整 */
}

.step-notes p {
    font-size: 0.9em;    /* 小さすぎず、既存サイトの標準テキストに近いサイズ */
    line-height: 1.5em;  /* スマホで2行になっても文字が重ならない行間 */
    color: #333333;      /* 目の疲れないハッキリとした濃いグレー */
    margin: 0 0 10px 0;  /* 1項目めと2項目めの間の隙間 */
    padding: 0;          /* 余計なパディングをリセット */
    text-align: left;    /* 左寄せ */
    font-weight: normal; /* 普通の太さ */
}

/* 最後のpタグだけ下のマージンをゼロにする（全体のバランス調整） */
.step-notes p:last-child {
    margin-bottom: 0;
}

/* ?? グッズラインナップ：テーブルリスト構造 */
.goods-table-wrapper {
    width: 100%;
    border-top: solid 1px #ebebeb;
}
.goods-table-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    border-bottom: solid 1px #ebebeb;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.goods-table-th {
    width: 12%;
    background: #f7f7f7;
    color: #333333;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: solid 1px #ebebeb;
}
.goods-table-td {
    width: 88%;
    padding: 8px;
    background: #ffffff;
    box-sizing: border-box;
}
.goods-table-td.flex-td {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.td-img {
    width: 28%;
    margin-right: 10px;
}
.td-img img {
    width: 100%;
    height: auto;
    display: block;
    border: solid 1px #ebebeb;
    border-radius: 4px;
}
.td-txt {
    width: 72%;
}
.td-txt strong {
    display: block;
    font-size: 0.85em;
    color: #000000;
    line-height: 1.3em;
}
.td-txt .sub-desc {
    display: block;
    font-size: 0.75em;
    color: #666666;
    margin-top: 2px;
}
.badge-count {
    display: inline-block;
    background: #fdf2f2;
    border: solid 1px #d93127;
    color: #d93127;
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 5px;
}

/* チラシ用ボックス */
.chirashi-box {
    padding: 10px;
}
.chirashi-box em {
    display: block;
    font-style: normal;
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 6px;
    color: #000000;
}

/* イベント詳細テーブルの微調整 */
.detail-table {
    width: 100%;
    border-collapse: collapse;
}
.detail-table th {
    background: #f7f7f7;
    color: #333333;
    font-size: 0.85em;
    text-align: left;
    padding: 8px;
    border: solid 1px #ebebeb;
    width: 30%;
}
.detail-table td {
    font-size: 0.85em;
    padding: 8px;
    border: solid 1px #ebebeb;
    color: #000000;
    background: #ffffff;
    width: 70%;
}

/* ==========================================================================
   追加：導入文（インフォメーションボックス）のデザイン調整（グラデなし）
   ========================================================================== */
.intro-alert-box {
    background: #fff5f5; /* ごく薄い赤のベタ塗り */
    border: solid 2px #d93127; /* 既存の赤の太枠 */
    border-radius: 6px;
    margin: 15px 10px;
    padding: 12px 10px 10px 10px;
    position: relative;
    box-sizing: border-box;
}

/* ボックス上部にちょこんと載るラベル */
.intro-alert-badge {
    position: absolute;
    top: -12px;
    left: 12px;
    background: #d93127;
    color: #ffffff;
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.2em;
}

/* 中の文章の調整 */
.intro-alert-box p {
    font-size: 0.95em;
    line-height: 1.5em;
    font-weight: bold;
    color: #333333;
    margin: 0;
    padding: 5px 0 0 0;
    text-align: left;
}

/* 導入文ボックス内の特定の文字を目立たせる（グラデなし・太字ディープ赤） */
.intro-alert-box p .highlight-red {
    color: #d93127; /* 既存の赤（#d93127）よりも一段深く濃い、視認性抜群の赤 */
    font-size: 1.05em; /* 周りの文字よりほんの少し大きく */
    font-weight: 900; /* 最も太いウエイトで協調 */
}

/* ==========================================================================
   修正：グッズラインナップ 賞品名赤帯＋画像最大化レイアウト（グラデなし）
   ========================================================================== */
.goods-list-wrapper {
    padding: 5px 0;
}

/* 各グッズのまとまり（ブランド赤の枠線でカードに一体感を出す） */
.goods-card {
    background: #ffffff;
    border: solid 1px #d93127;
    border-radius: 6px;
    margin-bottom: 20px; /* グッズ同士の間隔 */
    overflow: hidden;    /* 赤帯の角丸を綺麗に保つ */
}

.goods-card:last-child {
    margin-bottom: 0;
}

/* ?? 変更：賞品名と当選数をまとめる「赤帯」エリア */
.goods-card-header {
    background: #d93127; /* メインカラーのブランド赤をベタ塗り */
    padding: 10px 12px;
    text-align: left;
}

/* 赤帯の中の賞品名（白文字でハッキリと） */
.goods-card-header strong {
    display: block;
    font-size: 0.95em;
    color: #ffffff;      /* 白文字に変更 */
    line-height: 1.4em;
    font-weight: bold;
    margin-bottom: 6px;
}

/* 当選数と補足を横並びにするフレックス行 */
.goods-meta-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    flex-wrap: wrap;
}

/* 赤帯の中の当選数バッジ（白ベタに赤文字で目立たせる反転デザイン） */
.goods-card-header .badge-count {
    display: inline-block;
    background: #ffffff; /* 背景を白に */
    color: #d93127;      /* 文字を赤に */
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 10px;  /* 右側の補足文字との隙間 */
}

/* 赤帯の中の作家数・枚数の補足（白文字で読みやすく） */
.goods-card-header .sub-desc {
    font-size: 0.8em;
    color: #ffffff;      /* 白文字に変更 */
    font-weight: bold;
    opacity: 0.9;        /* 少しだけ馴染むように微調整 */
}

/* ?? 画像エリア（赤帯の下に配置） */
.goods-card-img {
    width: 100%;
    padding: 10px;       /* 画像のまわりに少しだけ余白を入れる */
    box-sizing: border-box;
    background: #ffffff;
}

.goods-card-img img {
    width: 100%;
    height: auto;
    display: block;
    border: solid 1px #ebebeb; /* 画像自体に薄いグレーの枠線を付けて見やすく */
    border-radius: 4px;
}

/* ==========================================================================
   追加：グッズ下部pタグのシンプル調整（枠なし・余白重視）
   ========================================================================== */
.goods-notes {
    margin-top: 15px;    /* グッズカードとの間のスキマ */
    margin-bottom: 25px; /* 下のチラシエリアとの間のスキマ */
    padding: 0 5px;      /* 画面端に文字がくっつかないように */
}

.goods-notes p {
    font-size: 0.9em;    /* 小さすぎずスッキリ読めるサイズ */
    line-height: 1.5em;  /* 2行になっても重ならない行間 */
    color: #333333;      /* ハッキリ読める濃いグレー */
    margin: 0 0 8px 0;   /* 1行目と2行目の間のスキマ */
    padding: 0;
    text-align: left;    /* 左寄せ */
    font-weight: normal; /* 普通の太さ */
}

/* 最後のpタグだけ下のマージンをゼロにする */
.goods-notes p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   追加：可変アルバム風グリッド（1個なら大、2個なら中、3個以上なら自動3列）
   ========================================================================== */
.creator-list-container {
    padding: 10px;
    box-sizing: border-box;
}

/* 作家親ボックス */
.creator-card {
    background: #ffffff;
    border: solid 1px #ebebeb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    box-sizing: border-box;
}
.creator-card:last-child {
    margin-bottom: 0;
}

.creator-card.recommend-card {
    border: solid 1px #d93127;
}

/* プロフィール */
.creator-profile {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 10px;
}

.creator-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: solid 1px #ebebeb;
    box-sizing: border-box;
    margin-right: 10px;
    display: block;
}

.creator-name {
    font-size: 1.0em;
    font-weight: bold;
    color: #000000;
}

.creator-works-title {
    font-size: 0.75em;
    font-weight: bold;
    color: #d93127;
    background: #fdf2f2;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    margin-bottom: 8px;
}

/* ??? 改良：自動可変グリッドのベース（全員共通） */
.creator-works-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ?? 魔法の自動可変設定：作品の個数に応じて箱のサイズが勝手に最適化されます */
.creator-works-grid li {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;          /* 空白があれば勝手に引き伸ばして大きくする設定 */
    width: 33.333%;       /* 基本は3列（作品が3個以上ある場合） */
    max-width: 100%;      /* 1個だけしかない場合は、横幅100%いっぱいにドカンと広がる */
    padding: 3px;
    box-sizing: border-box;
}

/* 作品数が「ちょうど2個」の先生のときは、最大幅を50%（半分ずつ）にして綺麗に並べる */
.creator-works-grid li:first-child:nth-last-child(2),
.creator-works-grid li:first-child:nth-last-child(2) ~ li {
    width: 50%;
    max-width: 50%;
}

/* 作品数が「ちょうど1個」の先生のときは、最大幅100%でドカンと見せる */
.creator-works-grid li:first-child:nth-last-child(1) {
    width: 100%;
    max-width: 100%;
}

.creator-works-grid li a {
    display: block;
    text-decoration: none;
    background: #f7f7f7;
    border: solid 1px #ebebeb;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
}

.creator-works-grid li a img {
    width: 100%;
    height: auto;
    display: block;
}

/* 作品名：1つの時はしっかり読め、3つの時は縮まるように調整 */
.creator-works-grid li a span {
    display: block;
    font-size: 0.7em;
    line-height: 1.2em;
    color: #333333;
    padding: 5px 3px;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 1個だけ大表示の時は、作品名が途切れないようにフルテキスト表示にする親切設計 */
.creator-works-grid li:first-child:nth-last-child(1) a span {
    white-space: normal;
    overflow: visible;
    font-size: 0.8em;
    padding: 8px 5px;
}


/* ==========================================================================
   さいきたむむ先生専用：作品数が超大量（13作品）のため2列リストで綺麗に見せる
   ========================================================================== */
.creator-works-grid-2col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.creator-works-grid-2col li {
    width: 50%;
    padding: 3px;
    box-sizing: border-box;
}
.creator-works-grid-2col li a {
    display: flex;
    align-items: center;
    background: #f7f7f7;
    border: solid 1px #ebebeb;
    border-radius: 4px;
    text-decoration: none;
    overflow: hidden;
}
.creator-works-grid-2col li a img {
    width: 35%;
    height: auto;
    display: block;
}
.creator-works-grid-2col li a span {
    width: 65%;
    display: block;
    font-size: 0.7em;
    line-height: 1.2em;
    color: #333333;
    padding: 4px;
    font-weight: bold;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* プロフィール */
.creator-profile {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 8px; /* 下の紹介文との隙間 */
}

.creator-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: solid 1px #ebebeb;
    box-sizing: border-box;
    margin-right: 10px;
    display: block;
}

.creator-name {
    font-size: 1.0em;
    font-weight: bold;
    color: #000000;
}

/* ?? 新設：作家紹介文のスタイル調整（スマホでも窮屈にならないフォント・行間） */
.creator-desc {
    font-size: 0.85em;    /* 本文よりほんの少し小さくしてスッキリと */
    line-height: 1.45em;  /* 複数行になっても読みやすい安心の行間 */
    color: #444444;       /* 柔らかく馴染むダークグレー */
    text-align: left;     /* 左寄せ */
    margin: 0 0 12px 0;   /* 下に配置される作品ラベルとの距離 */
    padding: 0 2px;
    font-weight: normal;
}

.creator-works-title {
    font-size: 0.75em;
    font-weight: bold;
    color: #d93127;
    background: #fdf2f2;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    margin-bottom: 8px;
}