@charset "utf-8";
/* ===============================
   ヘッダー
   =============================== */
.h-b {
    background: #284CA9;
    background: linear-gradient(90deg, rgba(40, 76, 169, 1) 0%, rgba(47, 183, 186, 1) 100%);
    padding: 1rem
}
.h-b h1 {
    margin: 0;
    text-align: center;
    color: white;
    font-family: YuGothic, "游ゴシック体", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 2rem;
}
/* スマホ用（～480px以下で表示） */
@media (max-width: 480px) {
    .h-b h1 {
        font-size: 1.25rem;
    }
}
/* ===============================
   メインビジュアル
   =============================== */
/* デフォルトは非表示にしておく */
.wtev-pc-area, .wtev-tablet-area, .wtev-smt-area {
    display: none;
}
/* PC用（幅1920px以上で表示） */
@media (min-width: 1025px) {
    .wtev-pc-area {
        display: block;
    }
}
/* タブレット用（1024px以上481px未満で表示） */
@media (max-width: 1024px) and (min-width: 481px) {
    .wtev-tablet-area {
        display: block;
    }
}
/* スマホ用（～480px以下で表示） */
@media (max-width: 480px) {
    .wtev-smt-area {
        display: block;
    }
}
/* ===============================
   Sub Menu（4つのイベント）— デザイン忠実版
   =============================== */
/* ========== Sub Menu ========== */
.sub-menu {
    padding: clamp(18px, 3.2vw, 28px) clamp(16px, 3vw, 24px);
    margin: 0;
    background: linear-gradient(180deg, #fff 0%, #ffe0f1 100%);
}
/* 見出し */
.sub-menu .sub-m-title {
    margin: 0 0 1rem;
    text-align: center;
    color: #111;
    font-size: clamp(1.2rem, 2.2vw, 1.35rem);
    font-weight: 900;
}
.sub-menu .sub-m-title span {
    font-size: 1.4em;
    line-height: 1.1;
}
.sub-menu .sub-m-title .magenta {
    color: #e2007a;
}
/* リスト */
.sub-menu ul {
    max-width: 990px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 3rem;
}
@media (max-width: 768px) {
    .sub-menu ul {
        gap: 1rem;
    }
}
@media (max-width: 550px) {
    .sub-menu ul {
        max-width: 750px;
        grid-template-columns: 1fr;
    }
    .sub-menu ul {
        max-width: 400px;
    }
}
/* カード本体 */
.sub-menu li a {
    position: relative;
    display: flex;
    flex-direction: column; /* ←縦積みにする */
    align-items: flex-start; /* 左揃え */
    justify-content: center; /* 上下中央 */
    max-width: 480px;
    height: 130px;
    padding: 0 1rem 0 5.5rem; /* 左は数字画像ぶん */
    background: #fff;
    border: 3px solid #e3007f;
    border-radius: 10px;
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-weight: 900;
    font-size: 1.75em;
    line-height: 1.15; /* 行間を詰める */
    background-repeat: no-repeat;
    background-position: 10px center;
    transition: transform .16s ease, box-shadow .16s ease;
}
.sub-menu li a:hover {
    transform: translateY(5px);
}
/* サブタイトル（in …） */
.sub-menu li a span {
    display: block;
    font-size: 0.7em; /* 親の相対で統一 */
    line-height: 1.15;
    margin-top: .1em;
}
/* 1枚目だけ上余白が必要なら（任意。不要なら削除） */
.sub-menu li:nth-child(1) a {}
/* 背景画像の振り分け */
.sub-menu li:nth-child(1) a {
    background-image: url(../../../uploads/img-bosyu/c-a1-t.png);
}
.sub-menu li:nth-child(2) a {
    background-image: url(../../../uploads/img-bosyu/c-a2-t.png);
}
.sub-menu li:nth-child(3) a {
    background-image: url(../../../uploads/img-bosyu/c-a3-t.png);
}
.sub-menu li:nth-child(4) a {
    background-image: url(../../../uploads/img-bosyu/c-a4-t.png);
}
/* レスポンシブ調整 */
@media (max-width: 1024px) {
    .sub-menu li a {
        font-size: 1.25em;
        width: 100%;
        height: 100px;
        background-size: 40px auto;
        padding-left: 3.5rem;
    }
}
@media (max-width: 768px) {
    .sub-menu li a {
        font-size: 1.15em;
        height: 80px;
    }
}
@media (max-width: 550px) {
    .sub-menu li a {
        background-size: 30px auto;
        height: auto; /* 高さ固定を解除して詰める */
        min-height: 64px; /* 最低高さだけ確保 */
        padding: .9rem 1rem .9rem 3rem;
    }
    .sub-menu li a span {
        font-size: .8em;
    }
}
/**************************************************/
.cta-haikei {
    background: #CFEAEE;
    background: linear-gradient(90deg, rgba(207, 234, 238, 1) 0%, rgba(89, 196, 241, 1) 50%, rgba(85, 191, 193, 1) 100%);
    padding: 4rem 0;
    border-bottom: 15px solid; /* 下線だけ指定 */
    border-image: linear-gradient(90deg, #284ca9, #2fb7ba) 1;
    border-image-slice: 1; /* 必須 */
}
.cta {
    background-color: white;
    max-width: 1280px;
    margin: 0 auto 2rem;
    padding: 3rem 5rem 5rem 5rem;
    border-radius: 10px;
}
@media (max-width: 1280px) {
    .cta {
        max-width: 96%;
        padding: 2rem;
    }
}
@media (max-width: 768px) {
    .cta {
        max-width: 94%;
        padding: 1.5rem;
    }
}
.cta .cta-t {
    color: #e2007a;
    border-bottom: solid 3px #e2007a;
    font-size: 4rem;
    padding-left: 5rem;
    line-height: 1.2;
    padding-bottom: 0;
    position: relative;
}
.cta .cta-t span {
    font-size: 2.5rem;
}
@media (max-width: 1180px) {
    .cta .cta-t {
        font-size: 2.65rem;
        padding-left: 4rem;
    }
    .cta .cta-t span {
        font-size: 0.5em;
    }
}
@media (max-width: 768px) {
    .cta .cta-t {
        font-size: 2.75rem;
        padding-left: 4rem;
    }
    .cta .cta-t span {
        display: block;
        font-size: 0.45em;
        line-height: 1.15;
        margin-top: .1em;
    }
    .cta-haikei .cta:nth-child(1) .cta-t {}
}
@media (max-width: 550px) {
    .cta .cta-t {
        font-size: 2.25rem;
        padding-left: 4rem;
    }
}
@media (max-width: 480px) {
    .cta .cta-t {
        font-size: 1.95rem;
        padding-left: 3.5rem;
    }
}
@media (max-width: 380px) {
    .cta .cta-t {
        font-size: 1.65rem;
        padding-left: 3.0rem;
    }
}
.cta .cta-t::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px; /* 位置調整 */
    width: 65px; /* 画像サイズに合わせて調整 */
    height: 93px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
@media (max-width: 1180px) {
    .cta .cta-t::before {
        width: 42px; /* 画像サイズに合わせて調整 */
        height: 60px;
    }
}
@media (max-width: 380px) {
    .cta .cta-t::before {
        width: 35px; /* 画像サイズに合わせて調整 */
        height: 50px;
    }
}
/* 各パターンごとに画像を切り替え */
.cta .cta-t.a1::before {
    background-image: url(../../../uploads/img-bosyu/c-a1-t.png);
}
.cta .cta-t.a2::before {
    background-image: url(../../../uploads/img-bosyu/c-a2-t.png);
}
.cta .cta-t.a3::before {
    background-image: url(../../../uploads/img-bosyu/c-a3-t.png);
}
.cta .cta-t.a4::before {
    background-image: url(../../../uploads/img-bosyu/c-a4-t.png);
}
/***********************/
@media (max-width: 880px) {
    .cta-naiyou {
        display: flex;
        flex-direction: column-reverse;
    }
    .cta-naiyou figure {
        text-align: center;
    }
}
/***********************/
/* 開催情報（dt=ラベル / dd=内容） */
.kaisaint {
    display: grid;
    grid-template-columns: max-content 1fr; /* 左はラベル幅、右は可変 */
    column-gap: 16px;
    row-gap: 12px;
    margin: 20px 0;
    padding: 0;
    align-items: center; /* 行内で縦位置を揃える */
}
.kaisaint dt, .kaisaint dd {
    margin: 0;
    padding: 0;
}
/* ラベル（緑のピル型） */
.kaisaint dt {
    padding: 6px 12px;
    background-color: #c3d600; /* ラベル背景 */
    color: #006835; /* ラベル文字色 */
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap; /* ラベルは折り返さない */
}
/* 内容（右側テキスト） */
.kaisaint dd {
    font-weight: 700; /* 画像のニュアンスに寄せて太め */
    font-size: 120%;
    line-height: 1.2;
}
@media (max-width: 768px) {
    .kaisaint {
        row-gap: 5px;
    }
    .kaisaint dt, .kaisaint dd {
        font-size: 100%;
    }
}
@media (max-width: 480px) {
    .kaisaint {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .kaisaint {
        grid-template-columns: 1fr;
    }
    .kaisaint dt {
        justify-self: start;
        margin-bottom: 2px;
        font-size: 90%;
    }
    .kaisaint dd {
        grid-column: 1 / -1; /* 下に回す */
    }
}
/* t-n が付いた場合、dt の高さを dd に揃える */
.kaisaint.t-n {
    display: table;
    width: 100%;
    border-collapse: collapse; /* 余計な隙間をなくす */
}
.kaisaint.t-n dt, .kaisaint.t-n dd {
    display: table-cell;
    vertical-align: middle; /* 中央揃え */
    margin: 0;
    padding: 8px 12px;
}
.kaisaint dd span {
    font-size: 1.15rem;
    font-weight: normal;
}
.sanka-midashi {
    text-align: center;
    padding: 3rem;
}
.sanka-midashi h2 {
    color: red;
    line-height: 1;
    margin-bottom: 0.75rem;
    font-size: 2rem;
}
@media (max-width: 768px) {
    .sanka-midashi {
        text-align: center;
        padding: 1.2rem;
    }
    .sanka-midashi h2 {
        font-size: 150%;
        line-height: 1.4
    }
}
@media (max-width: 480px) {
    .sanka-midashi {
        text-align: center;
        padding: 1rem;
    }
    .sanka-midashi h2 {
        font-size: 130%;
        line-height: 1.4
    }
}
@media (max-width: 380px) {
    .sanka-midashi h2 {
        font-size: 120%;
    }
}
.m-waku-l, .m-waku-r {
    border: solid 5px #ff4500;
    border-radius: 10px;
    height: 100%;
    display: flex; /* 縦方向にflex化 */
    flex-direction: column; /* 上下レイアウト */
}
.m-waku-r {
    border: solid 5px #153db0
}
.m-waku-l h2, .m-waku-r h2 {
    background-color: #ff4500;
    text-align: center;
    color: white;
    font-size: 1.75rem;
    padding: 1.5rem 0;
    margin: 0;
}
@media (max-width: 965px) {
    .m-waku-l h2, .m-waku-r h2 {
        text-align: left;
        font-size: 1.25rem;
        padding: 0.5rem;
    }
}
.m-waku-r h2 {
    background-color: #153db0;
}
.m-waku-l > div, .m-waku-r > div {
    flex: 1; /* コンテンツ部分は余白を伸ばす */
    padding: 2rem;
    display: flex;
    flex-direction: column;
}
@media (max-width: 965px) {
    .m-waku-l > div, .m-waku-r > div {
        padding: 1rem;
    }
}
/* 募集要項：左ラベル／右本文（画像準拠） */
.bsyk {
    display: grid;
    grid-template-columns: 140px 1fr; /* ラベル幅は調整可 */
    column-gap: 16px;
    row-gap: 12px;
    margin: 0 0 1rem 0;
    padding: 0;
    align-items: stretch; /* 各行で高さを揃える */
}
.bsyk dt, .bsyk dd {
    margin: 0;
    padding: 0;
}
/* ラベル（dt）— グレー箱＋中央揃え＋太字 */
.bsyk dt {
    background: #cfcfcf; /* 画像のグレー */
    color: #111;
    font-weight: 800;
    text-align: center;
    padding: 10px 8px; /* 上下の厚みはここで調整 */
    line-height: 1.2;
    display: flex; /* 箱内センタリング */
    align-items: center;
    justify-content: center;
}
@media (max-width: 965px) {
    .bsyk {
        display: block;
        width: 100%;
    }
    .bsyk dt {
        text-align: left;
        display: block;
        padding: 5px;
        font-size: 70%;
    }
    .bsyk dd {
        padding: 10px;
        font-size: 70%;
    }
}
/* 本文（dd）— 複数行の改行を保持して表示 */
.bsyk dd {
    line-height: 1.6;
    word-break: keep-all;
    font-size: 1.1rem;
}
/* ボタン中央寄せ用（親要素に適用） */
.btn-center {
    margin-top: auto; /* 残りスペースを使って一番下に */
    text-align: center;
}
/* 申し込みボタン */
.btn-entry {
    display: inline-block;
    background-color: #e2007a; /* 濃いピンク */
    color: #fff;
    font-weight: bold;
    font-size: 1.25rem;
    text-decoration: none;
    padding: 12px 48px 12px 28px; /* 右側余白を多めにして矢印分確保 */
    border-radius: 50px; /* 角丸 */
    margin: 0.5rem auto 0;
    background-image: url("../../../uploads/img-bosyu/bt-arrow.png");
    background-repeat: no-repeat;
    background-position: right 20px center; /* 矢印位置調整 */
    background-size: 14px auto; /* 矢印イズ調整 */
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-entry:visited {
  color: #fff;
}
/* ホバー時のアクション */
.btn-entry:hover {
    color: yellow;
    background-color: #e4007f;
    transform: translateY(-2px);
}
.bus-sougei {
    border: 5px solid #fff600;
    border-radius: 10px;
    padding: 1rem;
}
.bus-sougei {
    display: flex;
    align-items: flex-start; /* 上端で揃える */
    gap: 16px; /* 画像とテキストの間隔 */
    margin: 20px 0;
}
.bus-sougei img {
    margin: auto 0;
}
.bus-sougei h2 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.4;
    color: red
}
.bus-sougei h2 span {
    font-size: 0.85em;
}
.bus-sougei p {
    margin: 4px 0 0;
    font-size: 0.8em;
    line-height: 1.6;
}
@media (max-width: 480px) {
    .bus-sougei {
        display: block;
        padding: 1.75rem;
    }
    .bus-sougei img {
        display: block;
        margin: 0 auto 1rem;
    }
}
.syucyo-merit-area {
    background-color: #f9d2dc;
    border-radius: 10px;
    padding: 3rem;
    margin: 1rem 0;
}
@media (max-width: 965px) {
    .syucyo-merit-area {
        padding: 1.5rem;
        margin: 1rem 0;
    }
}
.syucyo-merit-area h2 {
    color: #e4007f;
}
@media (max-width: 480px) {
    .syucyo-merit-area h2 {
        font-size: 1.35rem;
    }
}
/* 親 dl を2列のグリッドで */
.sma-list {
    display: grid;
    grid-template-columns: 140px 1fr; /* 左は固定幅、右は可変 */
    column-gap: 16px;
    row-gap: 12px;
    margin: 0;
    padding: 0;
}
/* 各項目の共通設定 */
.sma-list dt, .sma-list dd {
    margin: 0;
    padding: 0;
}
/* 左のラベル部分（dt） */
.sma-list dt {
    background: #fff; /* 白背景 */
    color: #000;
    font-weight: 800;
    text-align: center;
    padding: 20px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
/* 右側の内容（dd） */
.sma-list dd ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sma-list dd li {
    line-height: 1.6;
}
/* スマホ対応 */
@media (max-width: 748px) {
    .sma-list {
        grid-template-columns: 1fr;
    }
    .sma-list dt {
        padding: 5px;
        margin-bottom: 4px;
        font-size: 70%;
    }
}
.jishingr-area {
    border: 4px solid #c3d600;
    border-radius: 10px;
    padding: 3rem;
    margin: 1.5rem 0;
}
@media (max-width: 748px) {
    .jishingr-area {
        padding: 1.5rem;
    }
}
.jishingr-area h2 {
    color: #006835;
}
@media (max-width: 748px) {
    .jishingr-area h2 {
        text-align: center;
    }
}
.flex-area {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 748px) {
    .flex-area {
        display: flex;
        flex-direction: column-reverse;
    }
    .flex-area figure {
        text-align: center;
        margin-bottom: 1rem
    }
}
.j-n-k {
    padding-bottom: 1rem
}
.j-n-k p {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 100%;
}
.j-n-k p span {
    font-size: 1.25rem;
    font-weight: normal;
}
@media (max-width: 748px) {
    .j-n-k p {
        font-size: 1rem;
        line-height: 120%;
    }
    .j-n-k p span {
    font-size: 0.95rem;
    font-weight: normal;
}
}
/* ===============================
   実施までの流れ（黄緑帯＋山形仕切り）
   =============================== */
.jng-f {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5等分 */
    background: #c3d600; /* 帯のベース色は親にだけ付ける */
    border-radius: 10px; /* 外周の角丸 */
    overflow: hidden; /* 角丸を効かせる＆仕切りのはみ出し隠す */
}
.jng-f.t4t {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 5等分 */
}
/* 各セルは透明にしてテキストだけ */
.jng-f > li {
    position: relative;
    background: transparent; /* ← ここが重要：子に背景は付けない */
    padding: 16px 18px 18px;
    font-size: 0.95rem;
    line-height: 1.35;
    line-break: strict;
}
/* タイトル */
.jng-f > li h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    line-height: 1.35;
    font-weight: 900;
    line-break: strict;
}
@media (max-width: 480px) {
    .jng-f > li h3 {
        font-size: 1.2rem;
        line-height: 120%;
    }
}
/* 「＞」型フチのみ */
/* 矢印SVG（白フチのみ、中は透明） */
.jng-f > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -20px; /* 矢印の重なり具合調整 */
    width: 40px;
    height: 100%;
    background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 100'>\
<path d='M0,-15 L25,50 L0,115' fill='none' stroke='white' stroke-width='5' stroke-linejoin='round'/>\
</svg>") no-repeat center / contain;
    pointer-events: none;
    z-index: 2;
}
/* --- レスポンシブ：2〜3列折り返し時に継ぎ目の仕切りを消す --- */
@media (max-width: 1024px) {
    .jng-f, .jng-f.t4t {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        max-width: 350px;
        margin: 0 auto;
    }
    .jng-f > li {
        position: static;
        background: transparent; /* ← ここが重要：子に背景は付けない */
        padding: 10px 10px 0 10px;
        font-size: 0.95rem;
        line-height: 1.0;
        line-break: strict;
        text-align: center;
    }
    .jng-f > li:last-child {
        padding: 10px;
    }
    .jng-f > li:not(:last-child)::after {
        content: "";
        position: static;
        display: block;
        margin: 5px auto 0;
        transform: translateX(0%); /* 中央寄せ */
        width: 100%;
        height: 40px;
        background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 35'>\
<path d='M-15,0 L50,25 L115,0' fill='none' stroke='white' stroke-width='5' stroke-linejoin='round'/>\
</svg>") no-repeat center / contain;
        pointer-events: none;
        z-index: 2;
    }
}