/* =========================================
   RESET
========================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	font-size: 16px;
    line-height: 1.6;
    color: #333;
    background: #f8f8f8;
}

p + p {
    margin-top: 0.5em;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
a:hover{
    color: var(--accent);
}

img {
    max-width: 100%;
    display: block;
    pointer-events: none;      /* クリックやドラッグのイベントを無効化 */
    user-select: none;         /* テキストや画像の選択を禁止 */
    -webkit-touch-callout: none;
}

strong{
    font-weight: 600;
}

/* =========================================
   base
========================================= */

section{
	margin: auto;
	padding: 0 40px;
	max-width: 980px;
    text-align: center;
}
main.top section:not(.mv):not(.news):not(.about),
main.wide section:not(.mv) {
	padding: 0 30px;
	max-width: 1200px;
}
section + section{
	margin-top: 80px;
}
section.mv + section{
	margin-top: 30px;
}
section > *:not(h2) {
    text-align: left;
}

@media (max-width: 768px) {
    section{
        padding: 0 15px;
    }
	section + section{
		margin-top: 60px;
	}
}
@media (max-width: 480px) {
    section{
        padding: 0 10px;
    }
	section + section{
		margin-top: 40px;
	}
}

/* =========================================
   カラーテーマ
========================================= */
:root {
    --accent: #e6607c;
    --border: #ddd;
    --text: #333;
    --title-text: #221715;
    --sub-text: #3f5c7a;
    --bg: #fff;

    /* ベージュ（デフォルト） */
    --band-color-bg:   #f3ece6;
    --band-color-line: #dcd4cc;
    --band-color-text: #3f362f;
    --stripe-color:    #f7f3ef;
}

/* 色替え用　カラーセット */
.blue {
    --band-color-bg:   #e9eef5;
    --band-color-line: #d5dbe3;
    --band-color-text: #3a4550;
    --stripe-color:    #f3f6fa;
}
.mint {
    --band-color-bg:   #e2f1e2;
    --band-color-line: #cfdccf;
    --band-color-text: #344238;
    --stripe-color:    #edf7ed;
}
.grayge {
    --band-color-bg:   #f1efed;
    --band-color-line: #d8d3cf;
    --band-color-text: #3c3836;
    --stripe-color:    #f7f5f3;
}
.sage {
    --band-color-bg:   #e7eee9;
    --band-color-line: #d2d9d4;
    --band-color-text: #3c443e;
    --stripe-color:    #f3f7f4;
}

/* =========================================
   左メニュー
========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    padding: 20px;
    border-right: 1px solid #ddd;
	z-index: 900;
	font-size: 15px;
}

main {
	position: relative;
    margin-left: 200px;
	z-index: 100;
    overflow: hidden;
}

.header-logo img {
    width: 160px;
    margin: 0 auto 35px;
}

.site-nav {
    margin-bottom: 30px;
}

.nav-item {
    position: relative;
}

.nav-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
	margin: 10px -20px;
}
.nav-summary a {
    flex-grow: 1;
	color: var(--title-text);
    text-indent: 20px;
    font-weight: 500;
    line-height: 40px;
    height: 40px;
    display: flex;
    align-items: center;
}
.nav-summary a:hover {
    background: #fce6eb;
}

.nav-arrow {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #e6607c;
    cursor: pointer;
    border-radius: 4px 0 0 4px;
}
.nav-arrow:hover {
    background: #f7c4d0;
}
.nav-arrow.active {
    background: #f7c4d0;
}

/* 右側展開メニュー（サブメニュー） */
.nav-submenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
/*    background: #fafafa;	*/
    background: #ffffff;
    border-left: 10px solid #f7c4d0;
    padding: 40px 16px;
    z-index: 800;

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-radius: 0 6px 6px 0;

    transform: translateX(-280px);
    opacity: 0;
	pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-submenu.active {
    transform: translateX(0);
    opacity: 1;
	pointer-events: auto;
}

.nav-submenu-title {
    font-size: 24px;
    font-weight: 400;
    color: var(--title-text);
    margin-bottom: 40px;
    padding-bottom: 6px;
    position: relative;
    display: inline-block;
}
.nav-submenu-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 40px;
    height: 2px;
    background-color: #e6607c;
    border-radius: 2px;
}

.nav-submenu li a {
    display: block;
    padding: 8px 4px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid #f2f2f2;
}
.nav-submenu li a:hover {
    color: var(--accent);
    background: #fce6eb;
}

.submenu-close {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    border: none;
    background: #ccc;
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 900; /* nav-submenu 内で最前面 */
}
.submenu-close:hover {
    background: #f7c4d0;
}

/* 補助リンク群 */

.extra-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 12px;
    margin-top: 10px;
    text-align: center;
}
.extra-links a {
    display: block;
    min-width: 150px;
    color: var(--text);
    padding: 8px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.extra-links a:hover {
    background: #fce6eb;
    color: var(--accent);
}

/* 機能系リンク */

.utility-links {
    margin: 20px auto 0;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.utility-links a {
    display: block;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 4px;
}
.utility-links a.contact-link {
    background: #f76c8c;
}
.utility-links a.contact-link:hover {
    background: var(--accent);
}
.utility-links a.line-banner:hover {
    background: #dbfbe8;
}
.utility-links a .titleTxt {
    font-weight: 500;
    color: var(--title-text);
}
.utility-links a.contact-link .titleTxt {
    color: #fff;
}
.utility-links a.contact-link img {
    width: 36px;
    margin: 6px auto;
}
.utility-links a.line-banner img {
    width: 80px;
    margin: 6px auto;
}
.utility-links a.line-banner img:last-of-type {
    display: none;
}
.utility-links a.line-banner p {
    font-size: 11.5px;
    color: var(--text);
	letter-spacing: -0.5px;
}

/* =========================================
   フッター
========================================= */

/* フッター全体 */
footer {
	margin-left: 200px;
	margin-top: 100px;
    padding: 30px 40px 20px;
    background: #f0f0f0;
    border-top: 1px solid #ddd;
	font-size: 13px;
}
.top + footer{
    margin-top: 0;
}

.footer-sitemap-and-banners {
    display: flex;
    justify-content: space-around;
	align-items: flex-start;
    gap: 60px 40px;
    margin: 0 auto 30px;
	max-width: 900px;
}

.footer-sitemap {
	flex-grow: 2;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左1、右1 */
    grid-template-rows: auto auto;  /* 右側は縦に2つ */
    gap: 20px 30px;
    max-width: 400px;
}

.footer-column:nth-child(1) {
    grid-column: 1 / 2; /* 左列 */
    grid-row: 1 / 3;    /* 上下にまたがる（縦長） */
}

.footer-column:nth-child(2),
.footer-column:nth-child(3) {
    grid-column: 2 / 3; /* 右列 */
}

.footer-column h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--title-text);
}

.footer-column ul {
    list-style: none;
    padding-left: 0;
}

/* li に「–」アイコンを付ける */
.footer-column li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 5px;
}

.footer-column li::before {
    content: "";
	display: block;
    position: absolute;
    left: 0;
    top: 0;
	bottom: 0;
	margin: auto 0;
	width: 6px;
	height: 1px;
 	border-top: solid 1px var(--text);
}

.footer-column li a {
    color: var(--text);
    display: block;
    padding: 4px 0;
}

.footer-column li a:hover {
    color: var(--accent);
}

.footer-banners {
    flex-grow: 1;
	align-self: center;
    display: flex;
    flex-direction: column; /* ★ 縦並び */
    gap: 40px;
    max-width: 180px;
}
.footer-banner{
	display: block;
	margin: auto;
	width: 100%;
	max-width: 180px;
	min-width: 140px;
}
.footer-banner img {
    width: 100%;
}

/* 各種手続き（下段に独立） */
.footer-procedures {
    margin: 30px -40px 0;
    padding: 6px 40px;

    width: calc(100% + 80px); /* 左右に40pxずつ広げる */

    background: var(--text); /* ★ 濃い帯の背景色 */
    color: #fff;               /* テキストは白に */
}

/* リスト */
.footer-procedures ul {
    list-style: none;
    padding-left: 0;
	text-align: center;
}
.footer-procedures li{
	display: inline-block;
	margin: 0 20px;
}

/* リンク */
.footer-procedures li a {
    display: block;
    padding: 6px 0;
    color: #fff; /* 白文字に変更 */
}

.footer-procedures li a:hover {
    color: #ffe6ee; /* 少し薄いピンクなどにしても良い */
}


/* コピーライト（最下段） */
.footer-copy {
    text-align: center;
    font-size: 0.8em;
    color: #666;
    margin-top: 20px;
}


/* =========================================
   スマホ版（共通）
========================================= */
.mobile-header {
    display: none;
}

@media (max-width: 768px) {
    .nav-arrow,
    .submenu-close {
        display: none;
    }
    main,
	footer {
        margin-left: 0;
    }
}

/* =========================================
   スマホ版（レイアウト）
========================================= */
@media (max-width: 768px) {

    /* 上部固定ヘッダー */
    .mobile-header {
        position: static;
        width: 100%;
        height: 60px;
        background: #fff;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
    }

    .mobile-header img,
    .mobile-header-link img {
        height: 40px;
        display: block;
    }

    /* ハンバーガー */
    .hamburger {
        position: fixed;
        top: 10px;
        right: 16px;
        width: 40px;
        height: 40px;
        background: var(--accent);
        color: #fff;
        font-size: 22px;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 3000;
    }
    .hamburger::before {
        content: "\2261";
    }
    .hamburger.active::before {
        content: "\00D7";
    }

    /* ハンバーガーで開いたメニュー */
    .site-header {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 0 0 20px;
        opacity: 0;
        transition: top 0.35s ease, opacity 0.35s ease;
        z-index: 2000;
    }
    .site-header.open {
        top: 0;
        opacity: 1;
    }

    /* メニュー内ロゴ */
    .site-header.open .header-logo {
        width: 100%;
        padding: 10px 12px;
        border-bottom: 1px solid #ddd;
    }
    .site-header.open .header-logo img {
        height: 40px;
        margin: 0;
    }

    /* =========================================
       ナビゲーション
    ========================================= */
    .nav-item {
        position: relative;
    }

    .site-nav {
        border-bottom: 1px solid #eee;
    }

    .nav-summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        margin: 0;
        height: 56px;
        cursor: pointer;
        border: 1px solid #eee;
    }

    .nav-summary a {
        text-indent: 15px;
        font-size: 16px;
        line-height: 56px;
        height: 56px;
        padding: 0;
    }

    /* ＋／− アイコン */
    .nav-plus {
        display: block;
        font-size: 26px;
        color: var(--accent);
        width: 50px;
        text-align: center;
    }

    /* =========================================
       サブメニュー
    ========================================= */
    .nav-submenu {
        background: #fff;
        border: none;
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        box-shadow: none;
        border-radius: 0;

        display: none; /* 初期状態 */
        position: relative;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        z-index: auto;
    }

    .nav-submenu.active {
        display: block;
    }

    /* リンク（2列カード） */
    .nav-submenu ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-left: 1px solid #eee;
    }
    .nav-submenu li a {
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        min-height: 50px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        line-height: 1.2em;
        color: var(--text);
        background: #fff;
    }
    .nav-submenu li a:hover {
        background: #fce6eb;
        color: var(--accent);
        border-radius: 0;
    }

    /* =========================================
       extra-links
    ========================================= */

    .extra-links {
        grid-template-columns: repeat(auto-fit, minmax(120px, 2fr));
        gap: 10px 8px;
        margin: 30px auto 0;
        width: calc(100% - 24px);
        max-width: 400px;
    }
    .extra-links a {
        padding: 10px;
        min-width: unset;
        font-size: 14px;
    }

    .utility-links {
        grid-template-columns: repeat(auto-fit, minmax(120px, 2fr));
        justify-content: space-around;
        gap: 10px 24px;
        margin: 30px auto 0;
        width: calc(100% - 34px);
        max-width: 384px;
    }
    .utility-links a.contact-link {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }
    .utility-links a.contact-link img {
        width: 40px;
    }
    
    .utility-links a.line-banner img:first-of-type {
        display: none;
    }
    .utility-links a.line-banner img:last-of-type {
        display: block;
        width: 110px;
    }

	/* =========================================
		フッター
	========================================= */
    footer {
        margin-top: 60px;
        width: 100%;
        padding: 0 16px 20px;
        background: #fff;
        border-top: none;
    }
    .top + footer{
        margin-top: 0;
    }

    .footer-sitemap-and-banners{
        display: none;
    }

	.footer-procedures {
		margin: 0 -16px;
		padding: 5px 16px;
	    width: calc(100% + 32px);
	}
	.footer-procedures li {
		margin: 0 8px;
	}

    .footer-copy {
        text-align: center;
        padding: 0;
        color: var(--text);
    }
}

/* =========================================
********************************************
パーツ
********************************************
========================================= */

/* =========================================
   見出し（h1〜h4）
========================================= */

h1 {
    color: #fff;
	text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 400;
}
main.top h1 {
	position: absolute;
	right: 6%;
	top: 8%;
	text-align: left;
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
}
main.notice.branch h1{
    font-size: clamp(1.4rem, 4vw, 1.6rem);
}

@media (max-width: 768px) {
    main.top h1 {
        right: 5%;
        font-size: clamp(2rem, 6.5vw, 3rem);
    }
}
@media (max-width: 480px) {
	main.top h1 {
		right: 4%;
		bottom: 38%;
		font-size: clamp(1.5rem, 6vw, 2rem);
        font-weight: 500;
	}
}

h2 {
    position: relative;
    display: inline-block;
    margin: 0 0 70px;
	padding: 20px 0;
	line-height: 1.3em;
    color: var(--title-text);
    text-align: left;
	font-size: 2.6rem;
    font-weight: 200;
}
h2::after {
    position: absolute;
    bottom: -16px;
    left: 0;
    display: block;
    width: 30%;
    min-width: 80px;
    border-bottom: 5px solid #f7dec4;
    border-image: linear-gradient(135deg, #e6607c, #dc7c2c) 1;
    content: "";
}
main.top h2 {
    font-size: 2.2rem;
}


h2 span {
    display: inline-block;
}

h2.italic {
	display: inline-block;
    margin: 0 0 30px;
    border-bottom: solid 1px var(--title-text);
	font-style: italic;
}
h2.italic::after {
    display: none;
}

h2.section-heading {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 30px;
    padding-bottom: 20px;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    width: 100%;
}
h2.section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 1px;
    background-color: var(--text);
    border-bottom: none;
}
h2.section-heading::before {
    order: 2;
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    margin-left: 6px;
}

@media (max-width: 768px) {
    h2{
        margin-bottom: 60px;
        font-size: 2.3rem;
    }
    h2::after{
        bottom: -6px;
        width: 26%;
        min-width: 50px;
        border-width: 4px;
    }
    h2.italic {
        font-size: 2rem;
    }
}
@media (max-width:480px) {
    h2{
        margin-bottom: 50px;
        line-height: 1.2em;
        font-size: 2rem;
    }
    h2::after{
        bottom: 0;
        min-width: 40px;
    }
    h2.italic {
        font-size: 1.8rem;
    }
    main.top h2 {
        font-size: 1.8rem;
    }
}

h3 {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 30px 0 16px;
    color: var(--title-text);
}
h3:first-of-type {
    margin-top: 0;
}

h3.text-center{
    margin: 30px 0;
    color: var(--accent);
    text-align: center;
    font-weight: 500;
}

h3.bg-color{
    display: block;
    margin-bottom: 12px;
    padding: 0.7rem 0.1rem;
    line-height: 1.3rem;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 1.1rem;
}
h3.bg-color.pink{ background: #ec9b9b; }
h3.bg-color.green{ background: #a2d04b; }
h3.bg-color.blue{ background: #82a0dd; }


h3 span{
    display: inline-block;
}
@media (max-width: 768px) {
    h3{
        font-size: 1.2rem;
    }
}
@media (max-width:480px) {
    h3{
        font-size: 1.15rem;
    }
}

h4 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 20px 0 12px;
    color: var(--text);
}

@media (max-width:480px) {
    h4{
        font-size: 1.05rem;
    }
}

/* =========================================
   table
========================================= */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.5em;
}
th {
    background: var(--band-color-bg);
    color: var(--band-color-text);
    font-weight: 500;
    padding: 10px 12px;
    border: 1px solid var(--band-color-line);
}
td {
    padding: 10px 12px;
    border: 1px solid var(--band-color-line);
}
tr {
    background: #fff;
}
tr:nth-child(even) {
    background: var(--stripe-color);
}

@media (max-width: 768px) {
    table {
        font-size: 0.9rem;
    }
    th,
    td {
        padding: 10px 8px;
    }

    table.stack-tablet {
        width: 100%;
        display: block;
    }
    table.stack-tablet tbody,
    table.stack-tablet tr {
        display: block;
        background: #fff;
    }
    table.stack-tablet tr + tr:not(:has(th)) td {
        border-top: none;
    }
    table.stack-tablet th,
    table.stack-tablet td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    table.stack-tablet th{
        border-bottom: none;
    }
}

@media (max-width: 480px) {
    table.stack-480 {
        width: 100%;
        display: block;
    }
    table.stack-480 tbody,
    table.stack-480 tr {
        display: block;
        background: #fff;
    }
    table.stack-480 tr + tr:not(:has(th)) td {
        border-top: none;
    }
    table.stack-480 th,
    table.stack-480 td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    table.stack-480 th{
        border-bottom: none;
    }
}


/* =========================================
   form
========================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
    background: #fff;
}

input::placeholder,
textarea::placeholder {
    color: #ccc;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(230, 96, 124, 0.2); /* アクセントの薄い影 */
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--title-text);
}

/* .form-buttons */
.form-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}



/* =========================================
   .btn, .btnTxtBox, .bnrBox, .imgCutBox
========================================= */

div:has(> .btn.more){
    margin-top: 20px;
	text-align: right;
}

a.btn.more {
    padding-bottom: 0.2em;
    text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.25s ease;
}
a.btn.more:hover {
    background-size: 100% 2px;
}

a.btnTxt{
    position: relative;
    display: block;
    margin: 30px auto;
    padding: 12px 15px;
    background: var(--accent);
    width: 210px;
    border-radius: 6px;
    line-height: 1.3em;
    color: #fff;
    text-align: center;
    overflow: hidden;
}
a.btnTxt:hover{
    opacity: .8;
    -webkit-opacity: .8;
}

a.btnTxtSub,
button,
input[type="submit"]{
    display: block;
    padding: 6px 8px;
    background: var(--text);
    min-width: 150px;
    border: none;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    transition: opacity 0.2s ease;
}
a.btnTxtSub:hover,
button:hover,
input[type="submit"]:hover{
    opacity: .8;
    -webkit-opacity: .8;
}

a.btnTxtTriangle{
	position: relative;
	display: block;
	margin: 30px auto;
	padding: 15px 25px;
	background: #fff;
	width: 210px;
    border-radius: 6px;
    border: solid 1px var(--accent);
	line-height: 1.3em;
	color: var(--accent);
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}
a.btnTxtTriangle::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	display: block;
	margin: auto;
	background: var(--accent);
	width: 8px;
	height: 10px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";
}
a.btnTxtTriangle:hover{
    background: var(--accent);
    color: #fff;
}
a.btnTxtTriangle:hover:after{
    background: #fff;
}

.btnTxtBox,
.btnTxtList{
    display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	justify-content: center;
	margin: auto;
	width: 80%;
}
.btnTxtList{
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}
.btnTxtBox > a,
.btnTxtBox > button,
.btnTxtBox > input[type="submit"],
.btnTxtList > a,
.btnTxtList > button,
.btnTxtList > input[type="submit"]{
    margin: 0;
}

@media (max-width: 480px) {
    .btnTxtList{
        justify-content: center;
    }
}

.bnrBox {
	display: flex;
	gap: 20px;
    flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	width: 80%;
}
main > .bnrBox {
    margin: 40px auto;
    width: calc(100% - 80px);
    max-width: 800px;
}
.bnrBox a {
	display: block;
}
.bnrBox a.sp{
    display: none;
}
.bnrBox a img {
	display: block;
	margin: auto;
	max-width: 100%;
}
@media (max-width: 480px) {
    .bnrBox a.pc{
        display: none;
    }
    .bnrBox a.sp{
        display: block;
        max-width: 300px;
    }
}

.btn-image {
    position: relative;
    display: inline-block;
    padding: 30px 20px;
    min-width: 200px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}
.btn-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2;
    transition: transform 0.5s ease;
}
.btn-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: -1;
    transition: background-color 0.3s ease;
}
.btn-image:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    color: #fff;
}
.btn-image:hover::before {
    transform: scale(1.1);
}
.btn-image:hover::after {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.btn-image.career-all{
    width: 100%;
}
.btn-image.career-all::before {
    background-image: url("/etc/fubokyo/images/mv12.jpg");
}
.btn-image.career-all span{
    position: relative;
    display: block;
    margin-top: 0.2em;
    padding-top: 0.4em;
    font-size: 0.8em;
    font-weight: 400;
}
.btn-image.career-all span::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}
.btn-image.career-all:hover span::after {
    transform: scaleX(1);
}
.btn-image.career-campus1::before { background-image: url("/etc/fubokyo/images/campus_koshigaya.jpg"); }
.btn-image.career-campus2::before { background-image: url("/etc/fubokyo/images/campus_shonan.jpg"); }
.btn-image.career-campus3::before { background-image: url("/etc/fubokyo/images/campus_tokyo-adachi.jpg"); }

.imgCutBox{
	width: 400px;
	height: 300px;
	overflow: hidden;
	border-radius: 8px;
}
.imgCutBox img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =========================================
   column
========================================= */

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: clamp(20px, 2vw, 24px);
}
.row + .row{
    margin-top: 40px;
}

.column1   { flex: 1 1 100%; min-width: 100%; }
.column2   { flex: 1 1 calc(50% - (clamp(20px, 2vw, 24px) * 1 / 2)); min-width: 220px; }
.column3-1 { flex: 1 1 calc((100% / 3) - (clamp(20px, 2vw, 24px) * 2 / 3)); min-width: 220px; }
.column3-2 { flex: 1 1 calc((100% * 2 / 3) - (clamp(20px, 2vw, 24px) * 1 / 3)); min-width: 220px; }
.column4-1 { flex: 1 1 calc((100% / 4) - (clamp(20px, 2vw, 24px) * 3 / 4)); min-width: 220px; }
.column4-3 { flex: 1 1 calc((100% * 3 / 4) - (clamp(20px, 2vw, 24px) * 1 / 4)); min-width: 220px; }


.column5-1 {
    flex: 1 1 calc((100% / 5) - (clamp(20px, 2vw, 24px) * 4 / 5));
    min-width: 220px;
}
.column5-2 {
    flex: 1 1 calc((100% * 2 / 5) - (clamp(20px, 2vw, 24px) * 3 / 5));
    min-width: 220px;
}
.column5-3 {
    flex: 1 1 calc((100% * 3 / 5) - (clamp(20px, 2vw, 24px) * 2 / 5));
    min-width: 220px;
}

.column5-4 {
    flex: 1 1 calc((100% * 4 / 5) - (clamp(20px, 2vw, 24px) * 1 / 5));
    min-width: 220px;
}

.row img {
    display: block;
    margin: auto;
    width: auto;
    max-width: min(100%, 360px);
}
.row img + img {
    margin-top: 1em;
}

.column-bg {
    background: var(--band-color-bg);
    padding: 16px;
    border-radius: 8px;
    border: solid 1px var(--band-color-line);
}

@media (max-width: 480px) {
    .row {
        gap: 26px 20px;
    }
    .column1,
    .column2,
    .column3-1,
    .column3-2,
    .column4,
    .column5-1,
    .column5-2,
    .column5-3,
    .column5-4 {
        flex: 0 0 100%;
    }

    .row img {
        max-width: min(80%, 360px);
    }
}


/* =========================================
   .mv
========================================= */

section.mv {
	position: relative;
	max-width: unset;
    height: 350px;
	background-image: url(/etc/fubokyo/images/mv.jpg);
    background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
}
main.top section.mv {
	background-image: url(/etc/fubokyo/images/mv.jpg);
    height: 450px;
	max-width: unset;
}
/* TOPICS / NEWS / 支部 詳細 */
main.notice section.mv{
    height: 200px;
}

section.mv .mv-text {
	position: absolute;
	right: 8%;
	bottom: 16%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.6);
	width: 360px;
	height: 90px;
	max-height: 32%;
}

main.top section.mv .bnrBox {
	position: absolute;
	right: 6%;
	bottom: 13%;
	justify-content: flex-end;
    align-items: center;
    margin: 0;
    width: 80%;
    height: 120px;
}
main.top section.mv .bnrBox a {
    max-width: 46%;
}
main.top section.mv .bnrBox a img {
	max-height: 120px;
}

@media (max-width: 768px) {
    main section.mv {
        height: 180px;
    }
    main.top section.mv {
        height: 340px;
    }
    
    section.mv .mv-text {
        width: 48vw;
        min-width: 300px;
        height: 10vw;
        min-height: 64px;
    }

    main.top section.mv .bnrBox {
        right: 5%;
        bottom: 8%;
        width: 90%;
    }
}
@media (max-width: 580px) {
    main.top section.mv .bnrBox {
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        width: 200px;
        max-width: 48%;
        height: auto;
    }
    main.top section.mv .bnrBox a {
        max-width: 100%;
    }
    main.top section.mv .bnrBox a img {
        max-height: 120px;
    }
}
@media (max-width: 480px) {
	main section.mv {
        height: 160px;
	}
	main.top section.mv {
        height: 50vh;
        max-height: 240px;
	}
	
    section.mv .mv-text {
		right: unset;
		left: 8%;
		bottom: 20%;
		width: 280px;
		max-width: 84%;
	}

    main.top section.mv .bnrBox {
        display: none;
    }
}

/* =========================================
   全般
========================================= */

/*  */
.text-small {
    font-size: 0.8em;
    line-height: 1.4;
}
h2 .text-small {
    font-size: 0.6em;
    line-height: 1.4;
}h3 .text-small {
    font-size: 0.74em;
    line-height: 1.4;
}

.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}

.marker{
    background: linear-gradient(transparent 60%, #fff3b0 60%);
}

/* ul */

ul.disc{
    list-style: disc none outside;
    padding-left: 1.5em; 
}

ul.caution li {
    position: relative;
    padding-left: 1.4em;
}

ul.caution li::before {
    content: "\203B";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

/* ol */

/* 1桁を想定。ナンバー右にスペースを作る */
ol.number-list {
    list-style-type: decimal;
    padding-left: 1.5em; 
}
ol.number-list {
    list-style: none;
    counter-reset: num;
}
ol.number-list li {
    counter-increment: num;
    position: relative;
    padding-left: 1.5em;
}
ol.number-list li::before {
    content: counter(num) ".";
    position: absolute;
    left: 0;
    width: 1em;
}

ol.number-square{
	counter-reset: number;
}
ol.number-square > li{
	position: relative;
	margin: 0 0 1.4rem 0;
	padding: 0 0 0 2rem;
	font-size: 1.05rem;
}
ol.number-square > li::before{
	position: absolute;
	top: 2px;
	left: 0;
	background: #e8a060;
	width: 22px;
	height: 22px;
	border-radius: 3px;
	line-height: 22px;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	counter-increment: number;
	content: counter(number);
}
ol.number-square > li ul{
    font-size: 1rem;
    padding: 8px 0 0;
}
@media (max-width: 480px) {
    ol.number-square > li ul{
        padding: 5px 0 0;
    }
}

/*  */

a.dashed-line {
    color: var(--text-color);
    border-bottom: 1px dashed var(--accent);
    transition: color 0.25s ease, border-bottom-color 0.25s ease;
}
a.dashed-line:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

a.line {
    color: #097bd9;
    border-bottom: 1px solid #097bd9;
    transition: color 0.25s ease, border-bottom-color 0.25s ease;
}
a.line:hover {
    color: #1ea2d6;
    border-color: #1ea2d6;
}


.sp-br {
    display: none;
}
@media (min-width: 1055px) {
    .sp-br.intro-fee {
        display: inline;
    }
}
@media (max-width: 480px) {
    .sp-br {
      display: inline;
    }
}

/* =========================================
   カード
========================================= */

.cardItem {
    position: relative;
    padding: 16px clamp(18px, 3vw, 30px);
    background: #fff;
    border: 1px solid var(--band-color-line);
    border-radius: 12px;
    overflow: hidden;
}
.cardItem + .cardItem {
    margin-top: 40px;
}
.cardItem + .cardItem.inherit{
    margin-top: 0;
}
.cardItem.lt::before,
.cardItem.rt::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    background: var(--band-color-bg);
}
.cardItem.lt::before {
    left: 0;
}
.cardItem.rt::before {
    right: 0;
}

.cardItem .cardBand {
    padding: 12px 8px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    color: var(--band-color-text);
}
.cardItem .cardBand .role {
    font-size: 0.85rem;
    margin-bottom: 4px;
}
.cardItem .cardBand .name {
    font-size: 1.1rem;
    font-weight: bold;
}

.cardItem .cardPhoto {
    margin-top: 56px;
    width: 100%;
}
.cardItem .cardPhoto img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.cardText {
    flex: 1;
    padding: 30px;
}

/* スマホ時 */
@media (max-width: 480px) {

    .cardItem {
        flex-direction: column !important;
        border-radius: 12px;
    }
    .cardItem.lt::before,
    .cardItem.rt::before {
        width: 16px;
    }

    .cardItem .cardVisual {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        width: 100%;
        position: relative;
        padding: 16px;
        box-sizing: border-box;
    }

    .cardItem .cardPhoto {
        margin-top: 0;
        width: 110px;
    }
    .cardItem .cardPhoto img {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-radius: 6px;
        z-index: 1;
    }

    .cardItem .cardBand {
        position: relative;
        background: #fff;
        padding: 8px 12px;
        margin-left: 12px;
        flex: 1;
        box-sizing: border-box;
        z-index: 1;
    }

    .cardItem .cardVisual::before {
        top: 35px;
        left: 0;
        width: 100%;
    }

    .cardItem .cardText {
        padding: 20px 16px 24px;
        width: 100%;
    }
}

/* =========================================
   swiper
========================================= */

.commonSwiper.swiper {
    width: 100%;
    padding: 0 0 30px;
    z-index: 0;
}
.commonSwiper .swiper-slide {
    text-align: left;
}
.commonSwiper .imgCutBox {
    width: 100%;
    height: 160px;
    margin-bottom: 12px;
}
.commonSwiper .imgCutBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.commonSwiper .titleTxt {
    color: var(--text);
    line-height: 1.6;
}

.commonSwiper .swiper-button-prev,
.commonSwiper .swiper-button-next {
    color: var(--accent);
}
.commonSwiper .swiper-button-prev:hover,
.commonSwiper .swiper-button-next:hover {
    color: #c94a63; /* var(--accent) の濃い版にしてもOK */
}
.commonSwiper .swiper-pagination-bullet-active,
.commonSwiper .swiper-pagination-bullet:hover{
    background-color: var(--accent);
}


/* =========================================
********************************************
ページ
********************************************
========================================= */

/* =========================================
   TOP
========================================= */

.top .about{
    position: relative;
    padding-top: 50px;
    padding-bottom: 100px;
}
.top .about::before{
    position: absolute;
    left: -9999px;
    right: -9999px;
    top: 0;
    bottom: 0;
    display: block;
background: 
  radial-gradient(circle at 15px 15px, #fff4cc 15px, transparent 15.5px) top left / 30px 30px repeat-x,
  linear-gradient(#fff4cc, #fff4cc) 0 15px / 100% calc(100% - 15px) no-repeat;
    content: "";
}

.top .about h3.bg-color.green{
    font-size: clamp(0.9rem, 1.7vw, 0.97rem);
}

.top .about ul li{
    margin-bottom: 0.5em;
}

.top .about ul li a{
    color: inherit;
    border-color: inherit;
}
.top .about ul li a:hover{
    color: var(--accent);
}

@media (max-width: 768px) {
    .top .about{
        padding-bottom: 60px;
    }
}

/* =========================================
   TOPICS
========================================= */

/* 共通部分 */

.topics {
    text-align: center;
}

.topics h2 + div a{
    background: #fff;
    border-radius: 8px;
    border: solid 1px var(--border);
}
.topics h2 + div a:hover{
    opacity: 0.9;
    border-color: var(--accent);
}

.topics .imgCutBox {
    width: 100%;
    height: 160px;
    margin-bottom: 12px;
    overflow: hidden;
}
.topics .imgCutBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.topics .metaBox {
    font-size: 0.9rem;
    color: var(--text);
    margin: 0 12px 8px;
}
.topics .metaBox span:not(.topicsDate) {
    margin-right: 8px;
}
.topics .metaBox span.topicsDate {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-weight: 600;
}

.topics p.titleTxt {
    padding: 0 12px 8px;
    color: var(--text);
    line-height: 1.6;
}

/* Swiper 用（スライドショー） */

.topicsSwiper {
    width: 100%;
    padding: 20px 0;
    text-align: left;
}
.topicsSwiper .swiper-slide a {
    display: block;
    width: 100%; /* Swiperに幅を任せる */
    color: inherit;
}

/* Swiperナビ関連 */

.top .topics{
	position: relative;
}
.top .topics > .swiper{
    margin-top: 20px;
	padding-bottom: 30px;
	width: calc(100% - 50px);
}
.top .topics > .topicsNav {
    position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 50px;
}

.topicsNav .swiper-button-prev,
.topicsNav .swiper-button-next {
    color: var(--text);
    position: absolute;
    transform: translateY(-50%);
    transition: color 0.35s ease;
}
.topicsNav .swiper-button-prev { left: 10px; }
.topicsNav .swiper-button-next { right: 10px; }
.topicsNav .swiper-button-next:after,
.topicsNav .swiper-button-prev:after {
	font-size: 36px;
}
.topicsNav .swiper-button-prev:hover { color: var(--accent); }
.topicsNav .swiper-button-next:hover { color: var(--accent); }

.topicsSwiper p.titleTxt {
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* ← 3行で切る */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 5.1em;
}

.topicsSwiper .swiper-pagination {
    bottom: 0px;
    line-height: 1em;
}
.topicsSwiper .swiper-pagination-bullet:hover{
    background-color: var(--accent);
}
.topicsSwiper .swiper-pagination-bullet-active{
	background-color: var(--accent);
}

/* 一覧ページ用（Swiperなし） */

.topicsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(20px, 4vw, 40px) 3%;
    margin-top: 20px;
    text-align: left;
}
.topicsList > a,
.topicsList > div {
    max-width: 400px;
}
@media (max-width: 480px) {
    .topicsList {
        gap: 40px 4%;
    }
}

/* =========================================
   NEWS
========================================= */

.news {
    text-align: center;
}

.news .newsList {
    list-style: none;
    padding: 0;
}
.news .newsList li {
    border-bottom: 1px solid var(--border);
}
.news .newsList li a,
.news .newsList li div{
    padding: 12px 8px;
    display: flex;
    gap: 8px 12px;
    flex-wrap: wrap;
}
.news .newsList li a:hover{
    background: #fff;
    opacity: 0.8;
}
.news .news-date {
    font-weight: 600;
    font-size: 0.9rem;
}
.news .news-text {
    text-align: left;
}

/* =========================================
   TAG COLORS
========================================= */

/*
.tag {
    display: inline-block;
    height: 1.5rem;
	width: 6em;
    line-height: 1.5rem;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 0.8rem;
}
.member {background: var(--accent); width: 4em; }
.student {background: #6aa3c2;}
.campus {background: #9a7ac2;}
.report {background: #7aa88a;}
.news-info {background: #d28a4a;}
.news-event {background: #8c7ac2;}
.news-branch {background: #5a9bb0;}
*/

.tagMember,
.tag1, .tag2, .tag3,
.tag4, .tag5, .tag6, .tag7,
.tag8, .tag9, .tag10, .tag11, .tag12,
.tag13, .tag14, .tag15{
    display: inline-block;
    padding: 0 7px;
    height: 1.5rem;
	min-width: 5em;
    line-height: 1.5rem;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 0.8rem;
}
.tagMember {background: var(--accent); min-width: 3em; }
.tag1  {background: #6aa3c2;}
.tag2  {background: #9a7ac2;}
.tag3  {background: #7aa88a;}

.tag4  {background: #5c8fb3;}
.tag5  {background: #8bbcd4;}

.tag6  {background: #b08ad1;}
.tag7  {background: #7e6aa8;}

.tag8  {background: #6f9b7c;}
.tag9  {background: #9cc7a8;}

.tag10 {background: #d28a4a;}
.tag11 {background: #c47a5a;}
.tag12 {background: #e6a46c;}

.tag13 {background: #e6607c;}
.tag14 {background: #d46a8c;}
.tag15 {background: #c45a6a;}

/* =========================================
   TOPICS / NEWS / 支部 詳細
========================================= */

/* 記事タイトル */
.article .articleTitle {
    display: block;
    margin: 0 0 10px;
	padding: 20px 0;
    border-bottom: solid 1px var(--title-text);
	line-height: 1.3em;
    color: var(--title-text);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
}
.article .articleTitle::after{
    display: none;
}

/* 日付＋タグ（横並び） */
.article .metaBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.article .articleDate {
    font-size: 0.9rem;
    color: #555;
}

/* 画像1（左上／右上切り替え） */
.article .img1{
    width: auto;
    max-width: 40%;
    min-width: 160px;
    max-height: 300px;
}
.article.left-img .img1 {
    float: left;
    margin: 10px 30px 20px 0;
}
.article.right-img .img1 {
    float: right;
    margin: 10px 0 20px 20px;
}

/* 並び画像（2枚 or 1枚） */
.article .image-box {
    clear: both;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    width: 90%;
    max-width: 900px;
}
.article:not(.editor) .image-box {
    margin-top: 30px;
}

.article.editor .text-box + .image-box {
    margin-top: 30px;
}
.article.editor .image-box + .text-box {
    margin-top: 30px;
}

.article .image-box img {
    flex: 1;
    object-fit: contain;
    width: auto;
    max-height: 300px;
    border-radius: 8px;
}

.article .image-box img:only-child {
    max-width: 60%;
}
.article .image-box img:not(:only-child) {
    max-width: calc(50% - 10px);
}
.article .image-box:has(img:nth-of-type(3)){
    max-width: calc((100% / 3) - 10px);
}

/* .editor用 */
.article.editor .text-box h3,
.article.editor .text-box h4,
.article.editor .text-box h5{
    display: block;
    margin: 30px 0 16px;
    color: var(--title-text);
    font-size: 1.3rem;
    font-weight: 500;
}
.article.editor .text-box h3 {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 6px;
}
.article.editor .text-box h4 {
    padding-left: 12px;
    border-left: 4px solid var(--accent);
}
.article.editor .text-box h5{
    background: #f3ece6;
    padding: 12px 16px;
    border-radius: 6px;
}

.article.editor .photoBox {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 10px 0;
}
.article.editor .photoBox:has(.item:nth-of-type(3)) {
    gap: 15px;
}
.article.editor .photoBox .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 360px;
    text-align: center;
    font-size: 0.9em;
}
.article.editor .photoBox:has(.item:nth-of-type(3)) .item {
    max-width: calc((100% / 3) - 10px);
}
.article.editor .photoBox img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.article.editor .btnTxtList{
    width: 100%;
}
.article.editor .photoBox + .btnTxtList,
.article.editor .photoBox + .photoBox{
    margin-top: 30px;
}

@media (max-width: 480px) {
    .article.left-img .img1,
    .article.right-img .img1 {
        float: none;
        margin: 0 auto 20px;
        max-width: 100%;
        max-height: 60vh;
    }

    .article .image-box {
        flex-wrap: wrap;
        max-height: unset;
    }
    .article.left-img .image-box,
    .article.right-img .image-box{
        margin-top: 20px;
    }
    .article .image-box img:only-child,
    .article .image-box img:not(:only-child) {
        max-width: 80%;
        max-height: 60vh;
    }
}

.article-add {
    position: relative;
    margin-top: clamp(40px, 8.33vw, 80px);
}
main:not(.branch) .article-add{
    padding: 16px clamp(18px, 3vw, 30px);
    background: #fff;
    border: 1px solid var(--band-color-line);
    border-radius: 12px;
    overflow: hidden;
}
main.branch .article-add::before {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    top: calc(-1 * clamp(40px, 8.33vw, 80px) / 2);
    height: 1px;
    background-color: #ccc;
}

.article-add .btnTxtList .btnTxtSub{
	padding: 8px 25px;
    border-radius: 6px;
    font-size: 0.95em;
}

@media (max-width: 480px) {

}

/* =========================================
   ご挨拶
========================================= */

.greetingItem {
    display: flex;
    margin-bottom: 60px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--band-color-line);
    border-radius: 12px;
    overflow: hidden;
}
.greetingItem.imglt {
    flex-direction: row;
}
.greetingItem.imgrt {
    flex-direction: row-reverse;
}

.greetingItem .greetingVisual {
    position: relative;
    background: var(--band-color-bg);
    width: clamp(110px, 18vw, 180px);
}
.greetingItem .greetingVisual::before {
    content: "";
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;
    height: 8px;
    background: #ffffff;
}

.greetingItem .greetingBand {
    padding: 12px 8px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    color: var(--band-color-text);
}
.greetingItem .greetingBand .role {
    font-size: 0.85rem;
    margin-bottom: 4px;
}
.greetingItem .greetingBand .name {
    font-size: 1.1rem;
    font-weight: bold;
}

.greetingItem .greetingPhoto {
    margin-top: 56px;
    width: 100%;
}
.greetingItem .greetingPhoto img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
}

.greetingItem .greetingText {
    flex: 1;
    padding: 30px;
}

/* スマホ時 */
@media (max-width: 480px) {

    .greetingItem {
        flex-direction: column !important;
        border-radius: 12px;
    }

    .greetingItem .greetingVisual {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        width: 100%;
        position: relative;
        padding: 16px;
        box-sizing: border-box;
    }

    .greetingItem .greetingPhoto {
        margin-top: 0;
        width: 110px;
    }
    .greetingItem .greetingPhoto img {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-radius: 6px;
        z-index: 1;
    }

    .greetingItem .greetingBand {
        position: relative;
        background: #fff;
        padding: 8px 12px;
        margin-left: 12px;
        flex: 1;
        box-sizing: border-box;
        z-index: 1;
    }

    .greetingItem .greetingVisual::before {
        top: 35px;
        left: 0;
        width: 100%;
    }

    .greetingItem .greetingText {
        padding: 20px 16px 24px;
        width: 100%;
    }
}

.soshiki h3{
    margin-bottom: 0.2em;
    font-weight: 500;
    font-size: 1.2rem;
}

.soshiki table {
    margin: 5px auto;
}
.soshiki table th,
.soshiki table td {
    padding: 6px 20px;
    vertical-align: top;
}
.soshiki table td:first-of-type {
    white-space: nowrap;
    min-width: 120px;
}
.soshiki table td:last-of-type {
    min-width: 0;
}
.soshiki table + p {
    padding: 0 1em;
    font-size: 0.9rem;
}
@media (max-width: 768px) {
    .soshiki table th,
    .soshiki table td {
        padding: 6px 12px;
    }
}
@media (max-width: 480px) {
    .soshiki table tr:has(th):not(:first-child) {
        margin-top: 1em;
    }
    .soshiki table tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-auto-rows: auto;
        background: #fff;
    }
    .soshiki table th {
        grid-column: 1 / 3;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .soshiki table td {
        display: flex;
        align-items: stretch;
        border-top: none;
    }
    .soshiki table td:nth-of-type(even){
        border-left: none;
    }

    .soshiki table + p {
        margin: 0.8em auto 0;
    }
}

/* =========================================
   趣旨目的
========================================= */

/* 番号付き h3 */
.purpose-heading h2 {
    counter-increment: h2num;
    position: relative;
    display: block;
    padding: 18px 20px 18px 58px;
    margin: 24px 0;
    text-align: left;
    font-size: 1.3rem;
    font-weight: 400;
}
.purpose-heading h2::before {
    content: counter(h2num);
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}
.purpose-heading h2::after {
    display: none;
}

.purpose-heading > p {
    padding: 0 1em;
}

/* 外枠（全体） */
.purpose-wrapper {
    border: 2px solid var(--accent);
    border-radius: 16px;
    padding: 32px;
    background: #fff;
    width: 78%;
    margin: 40px auto;
    counter-reset: purpose; /* 番号リセット（①〜④） */
}
.purpose-wrapper > p{
    margin: 0 auto 1.5em;
    width: 90%;
    text-align: center;
    font-size: 1.1em;
}
.purpose-wrapper > p span{
    display: inline-block;
}

.purpose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    margin: auto;
}
.purpose-item {
    position: relative;
    padding-left: 34px; /* アイコン＋番号丸のスペース */

    counter-increment: purpose; /* 番号を増やす */
}
.purpose-item::before {
    content: counter(purpose);
    position: absolute;
    left: -8px;
    top: 0;
    width: 30px;
    height: 30px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
}
.purpose-title {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
}
.purpose-title::before {
    content: "";
    position: absolute;
    right: 0;
    top: -10px;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
}
.purpose-item:nth-child(1) .purpose-title::before {
    background-image: url("/etc/fubokyo/images/icon_support.png");
}
.purpose-item:nth-child(2) .purpose-title::before {
    background-image: url("/etc/fubokyo/images/icon_exchange.png");
}
.purpose-item:nth-child(3) .purpose-title::before {
    background-image: url("/etc/fubokyo/images/icon_community.png");
}
.purpose-item:nth-child(4) .purpose-title::before {
    background-image: url("/etc/fubokyo/images/icon_learning.png");
}
.purpose-item p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width:480px) {
    .purpose-wrapper {
        padding: 20px 20px 20px 30px;
        width: 86%;
    }
    .purpose-wrapper > p {
        margin-bottom: 1em;
        width: 100%;
        font-size: 1.05em;
    }

    .purpose-grid {
        gap: 26px;
    }

    .purpose-heading h2 {
        margin-bottom: 6px;
        font-size: 1.3rem;
    }
}


/* =========================================
   沿革
========================================= */

.history table.stack-tablet{
    margin: 1em auto;
}
.history table.stack-tablet th{
    white-space: nowrap;
    min-width: 162px;
    text-align: center;
    font-weight: 400;
    font-size: 0.85rem;
}
.history table.stack-tablet th strong{
    display: block;
    padding: 0.5em 0;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
}
.history table.stack-tablet td > ul > li + li{
    margin-top: 0.5em;
}
.history table.stack-tablet td > ul > li ol {
    list-style: none;
    counter-reset: num;
    padding-left: 1em; 
}
.history table.stack-tablet td > ul > li ol li {
    counter-increment: num;
    position: relative;
    padding-left: 1.5em;
}
.history table.stack-tablet td > ul > li ol li::before {
    content: counter(num) ".";
    position: absolute;
    left: 0;
    width: 1em;
}
.history table.stack-tablet td ul.extra{
    display: flex;
    flex-wrap: wrap;
    gap: 0 50px;
    list-style-type: square;
    padding-left: 1.5em;
    margin-top: 0.8em;
}
.history table.stack-tablet td ul.extra li::marker{
    color: #5c5c5c;
}
.history table.stack-tablet td ul.extra li + li{ 
    margin-top: 0;
}

@media (max-width: 768px) {
    .history table.stack-tablet th{
        text-align: left;
    }
    .history table.stack-tablet th br{
        display: none;
    }
    .history table.stack-tablet th strong{
        padding: 0.2em 0;
        font-size: 1.05rem;
    }
    .history table.stack-tablet th strong::after{
        display: block;
        content: "";
        padding-left: 0.2em;
    }
}

/* =========================================
   年会費
========================================= */

.intro{
	margin: 70px auto 30px;
	padding: 40px 30px 30px;
	width: calc(100% - 44px);
    max-width: 790px;
	line-height: 1.8em;
	border: solid 2px var(--accent);
	border-radius: 15px;
	text-align: center;
	font-size: 1.1em;
}
.intro h2{
	position: relative;
    display: block;
	margin: -60px 0 10px;
    padding: 0 0 10px;
    border: none;
    text-align: center;
    font-weight: 300;
	font-size: 1.6em;
	z-index: 1;
}
.intro h2::after{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	margin: auto;
	background: #f8f8f8;
	width: 12em;
	height: 1.3em;
    border: none;
	content: "";
	z-index: -1;
}
.intro p + p{
    margin-top: 0.8em;
}

.fee .choiceBox,
.fee .number-square{
	margin: 0 auto;
	width: 90%;
}
.fee .choiceBox span.caution-title{
	display: inline-block;
	margin: 20px 15px 0;
	padding: 0 15px;
	background: #ff0000;
	height: 1.8em;
	line-height: 1.7em;
	color: #ffffff;
}
.fee .choiceBox span.caution-title + p{
	margin: 15px 15px 0;
}
.fee .choiceBox span.caution-title + p strong{
    color: var(--accent);
}

.fee .caution-text strong{
    color: var(--accent);
}
.fee a.btnTxt.download{
	background-color: #86a447;
}
.fee .download + ul.caution{
    margin: auto;
    max-width: 456px;
    color: #799a40;
}

.fee .number-square{
    max-width: 520px;
}

.fee #choice{
	gap: 20px 50px;
	margin: 0 auto 100px;
}
.fee #choice p{
	width: 100%;
	text-align: center;
}

@media (max-width: 768px) {
    .intro{
    	padding: 30px 20px 20px;
        line-height: 1.6em;
        font-size: 1.05em;
        text-align: left;
    }
    .intro h2{
        margin: -50px 0 10px;
    }
}
@media (max-width: 480px) {
    .intro{
        margin: 50px auto 30px;
        padding: 20px 18px;
        font-size: 1em;
    }
    .intro h2{
        position: relative;
        margin: -35px 0 0;
        font-size: 1.3em;
    }
    .intro h2::after{
        width: 11em;
    }
    .intro p + p{
        margin-top: 0.5em;
    }

    .fee .choiceBox,
    .fee .number-square{
        width: 100%;
    }
}

/* =========================================
   50周年記念事業
========================================= */

main#anniv50 {
    position: relative;
    padding-bottom: 100px;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        #f3f2fa 0%,   /* 青寄りラベンダー */
        #f0f4fa 100%  /* 淡ブルーグレー */
    );
}
main#anniv50 + footer {
    margin-top: 0;
    background-color: #e3e8f2;
}
@media (max-width: 768px) {
    main#anniv50 {
        padding-bottom: 60px;
    }
}

#anniv50 h2{
    margin-bottom: 10px;
    padding-bottom: 0;
    color: var(--text);
    font-family: "Kaisei Opti", serif;
    font-weight: 400;
}
#anniv50 h2:after{
    display: none;
}
#anniv50 h2 + .sub-en {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #6c3a8c; /* 落ち着いた紫 */
    margin-bottom: 70px;
    text-align: center;
    font-weight: 500;
}
@media (max-width: 768px) {
    #anniv50 h2 + .sub-en{
        margin-bottom: 50px;
    }
}

#anniv50 .mv{
    position: relative;
    height: 60vh;
    min-height: 600px;
    z-index: -1;
}
@media (max-width: 968px) {
    #anniv50 .mv{
        height: 400px;
        min-height: unset;
    }
}

#anniv50 .mes {
    position: relative;
    z-index: -1;
}
#anniv50 .mes-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -200px auto 0;
    padding: 10px 0 0;
    background: none;
}
#anniv50 .mes-box::before,
#anniv50 .mes-box::after {
    content: "";
    position: absolute;
    width: calc(250vw + 200px);   /* 画面の2倍の幅 → 巨大な円 */
    height: calc(250vw + 200px);  /* 画面の2倍の高さ */
    left: 50%;
    top: 0;         /* 上側を基準に配置 */
    transform: translateX(-50%);
    background: #f3f2fa;
    background: linear-gradient(
        to bottom,
        rgba(243, 242, 250, 1) 0%,    /* 完全に色 */
        rgba(243, 242, 250, 1) 50%,   /* ここまで色を維持 */
        rgba(243, 242, 250, 0) 100%   /* ここから透明へ */
    );
    border-radius: 50%;
    z-index: -1;
}
#anniv50 .mes-box::before{
    border-top: solid 1px #d8c9a3;
}
#anniv50 .mes-box::after {
    top: -15px;
    background:
        /* ① ピンクストライプ帯（上10px） */
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.25) 0,
            rgba(255,255,255,0.25) 3px,
            rgba(255,255,255,0.15) 3px,
            rgba(255,255,255,0.15) 6px
        ),
        linear-gradient(
            to bottom,
            #e88fa0 0,
            #e88fa0 400px,
            transparent 400px
        ),
        /* ② 既存のラベンダー→透明グラデーション */
        linear-gradient(
            to bottom,
            rgba(243, 242, 250, 1) 0%,
            rgba(243, 242, 250, 1) 200px,
            rgba(243, 242, 250, 0) 200px,
            rgba(243, 242, 250, 0) 100%
        );
    border-top: solid 3px #fff;
    z-index: -2;
}
#anniv50 .mes-box img{
    display: block;
    margin: auto;
    width: 20vw;
    max-width: 300px;
    min-width: 180px;
}
#anniv50 .mes-box h1{
    width: 90%;
    color: var(--accent);
    font-size: clamp(1.8rem, 6vw, 2.7rem);
    font-family: "Kaisei Opti", serif;
    font-weight: 500;
}
#anniv50 .mes-box h1 span{
    display: inline-block;
}
#anniv50 .mes-box p{
    margin-top: 1.8em;
    max-width: 756px;
    font-size: 1.2rem;
}
@media (max-width: 768px) {
    #anniv50 .mes-box p{
        margin-top: 1.5em;
        width: 90%;
        font-size: 1.1rem;
    }
}

#anniv50 .anniv-book-btn {
    display: inline-block;
    margin: 2rem auto;
    padding: 14px 28px;
    background: #ffffff;
    background:
        radial-gradient(#e5dff3 1px, transparent 1px) 0 0 / 16px 16px,
        #ffffff;
    color: #6c3a8c;
    font-family: "Kaisei Opti", serif;
    font-weight: 500;
    font-size: 2.6rem;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    border: 2px solid #d8c9f0; /* ラベンダーライン */
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#anniv50 .anniv-book-btn span{
    display: block;
    line-height: 1.4;
    font-size: clamp(22px, 1.6vw, 28px);
}
#anniv50 .anniv-book-btn::before,
#anniv50 .anniv-book-btn::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: url('/assets/wave-line.svg') repeat-x;
    opacity: 0.35;
}

#anniv50 .anniv-book-btn::before {
    top: 0;
}

#anniv50 .anniv-book-btn::after {
    bottom: 0;
}
#anniv50 .anniv-book-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(108, 58, 140, 0.25);
}

@media (max-width: 768px) {
    #anniv50 .anniv-book-btn span{
        font-size: clamp(14px, 4vw, 22px)
    }
}

/* 対談 */

#anniv50 .talk {
    position: relative;
    margin: 70px auto 120px;
    background: #f9e9ef;
}

#anniv50 .talk::before{
    position: absolute;
    left: -9999px;
    right: -9999px;
    top: -30px;
    bottom: -70px;
    display: block;
    background: #f9e9ef;
    content: "";
    z-index: -1;
}
#anniv50 .talk::after {
    content: "";
    position: absolute;
    top: -42px;
    bottom: -82px;
    left: -9999px;
    right: -9999px;
    background: url('/etc/fubokyo/50th_anniversary/images/wave-line.svg') repeat-x top / auto 12px,
        url('/etc/fubokyo/50th_anniversary/images/wave-line.svg') repeat-x bottom;
    opacity: 0.4; /* ← 控えめで上品に */
    z-index: -1;
}

#anniv50 .talk .lead{
    margin-top: -1.5rem;
    font-size: 1.5em;
    text-align: center;
}
#anniv50 .talk .lead span {
    display: inline-block;
}
#anniv50 .talk .lead span.text-small{
    font-size: 0.7em;
}
#anniv50 .talk .overview{
    margin: 1em auto;
    width: 90%;
    color: #6c3a8c;
}

#anniv50 .talk .imgCutBox{
    margin: 2em auto;
    width: 80%;
    min-width: 300px;
    height: auto;
    aspect-ratio: 240 / 84;
    border: 2px solid #dcd4e8;
}

/* 対談者 */
#anniv50 .talk .dialogue {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    
    gap: clamp(12px, 2vw, 24px);
    margin: 28px auto 36px;
}
#anniv50 .talk .dialogue .talk-person {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 15px 18px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dcd4e8;
}
#anniv50 .talk .dialogue .talk-photo {
    width: clamp(100px, 14vw, 180px);
    flex-shrink: 0;
}
#anniv50 .talk .dialogue .talk-photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
}
#anniv50 .talk .dialogue .talk-profile {
    flex: 1;
}
#anniv50 .talk .dialogue .talk-name-ja {
    font-size: 0.7rem;
}
#anniv50 .talk .dialogue .talk-name {
    margin-bottom: 10px;
    border-bottom: dotted 2px #dcd4e8;
    font-size: 1.2rem;
}
#anniv50 .talk .dialogue .talk-name span.text-small{
    padding-left: 1.5rem;
}
#anniv50 .talk .dialogue .talk-role {
    font-size: 0.9rem;
}
#anniv50 .talk h3{
    margin: 1em 0 1.5em;
}
#anniv50 .talk .story{
    margin: 1em 0;
    font-size: 1.05em;
}
#anniv50 .talk .btnTxtBox{
    width: 100%;
}
#anniv50 .talk .btnTxtSub{
    padding: 10px 12px;
    min-width: 240px;
}
@media (max-width: 768px) {
    #anniv50 .talk .lead{
        font-size: 1.3em;
    }
}

.greeting {
    position: relative;
    z-index: 1;
}
.greeting p.greeting-info{
    margin: -2em auto 1.5em;
    text-align: center;
}

.greeting .greetingItem {
    align-items: center;
    padding: 10px 0;
    margin-bottom: 1.5em;
    background: #8fa9d6;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.25) 0,
            rgba(255,255,255,0.25) 3px,
            rgba(255,255,255,0.15) 3px,
            rgba(255,255,255,0.15) 6px
        ),
        linear-gradient(
            to bottom,
            #8fa9d6 0,
            #8fa9d6 10px,
            #ffffff 10px,
            #ffffff calc(100% - 10px),
            #e88fa0 calc(100% - 10px),
            #e88fa0 100%
        );
    border-color: #d8c9a3;
    outline: solid 1px rgba(255, 255, 255, 0.5);
}
.greeting .swiper .greetingItem {
    margin: 0 20px;
}
.greeting .greetingItem .greetingVisual{
    background: #fff;
    width: clamp(145px, 21vw, 210px);
    text-align: center;
}
.greeting .greetingItem.imglt .greetingVisual{
    padding: 15px 0 0 30px;
}
.greeting .greetingItem.imgrt .greetingVisual{
    padding: 15px 30px 0 0;
}
.greeting .greetingItem .greetingVisual::before{
    display: none;
}
.greeting .greetingItem .greetingBand{
    padding: 5px 0;
}
.greeting .greetingItem .greetingBand .role,
.greeting .greetingItem .greetingBand .name {
    padding: 0 0.2em;
    display: inline-block;
}
.greeting .greetingItem .greetingPhoto {
    margin-top: 0;
}
.greeting .greetingItem .greetingPhoto img {
    aspect-ratio: 1 / 1;
}
.greeting .greetingItem .greetingText {
    background: #fff;
}

.greeting .greeting-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
    gap: 20px;
    justify-content: center; 
    justify-items: center;
}

.greeting .greeting-links a.greetingItem{
    margin-bottom: 0;
    padding: 20px 10px 10px;
    background:
    repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.25) 0,
        rgba(255,255,255,0.25) 3px,
        rgba(255,255,255,0.15) 3px,
        rgba(255,255,255,0.15) 6px
    ),
    linear-gradient(
        to bottom,
        #8fa9d6 0,
        #8fa9d6 10px,
        #ffffff 10px,
        #ffffff 100%
    );
    width: 100%;
    max-width: 270px;
}
.greeting .greeting-links a.greetingItem:nth-child(n+4){
    background:
    repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.25) 0,
        rgba(255,255,255,0.25) 3px,
        rgba(255,255,255,0.15) 3px,
        rgba(255,255,255,0.15) 6px
    ),
    linear-gradient(
        to bottom,
        #e88fa0 0,
        #e88fa0 10px,
        #ffffff 10px,
        #ffffff 100%
    );
}
.greeting .greeting-links a.greetingItem .greetingVisual {
    display: flex;
    padding: 0;
    width: 100%;
    align-items: center;
}
.greeting .greeting-links a.greetingItem:hover{
    opacity: 0.8;
}
.greeting .greeting-links a.greetingItem .greetingPhoto{
    width: clamp(100px, 20vw, 210px);
}
.greeting .greeting-links a.greetingItem .greetingPhoto img{
    border-radius: 6px;
}
.greeting .greeting-links a.greetingItem .greetingBrand {
    margin-left: 0;
    margin-right: ;
}
.greeting .greeting-links a.greetingItem .greetingBand .name{
    display: block;
}

@media (max-width: 480px) {
    .greeting .swiper a.greetingItem{
        display: flex;
        justify-content: center;
        justify-items: center;
        align-items: center;
        width: auto;
    }
    .greeting .swiper .greetingItem .greetingVisual{
        display: flex;
        justify-content: center;
        justify-items: center;
    }
    .greeting .swiper .greetingItem .greetingVisual .greetingPhoto{
        width: 160px;
    }
    .greeting .swiper .greetingItem .greetingVisual .greetingBand{
        margin-left: 0;
        flex: auto;
    }
    .greeting .swiper .greetingItem .greetingVisual .greetingBand .name{
        display: block;
    }
}

/* モーダル */
#greetingModal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
@media (min-width: 769px) {
    #greetingModal {
        left: 200px;        /* メニューの幅 */
        width: calc(100% - 200px);
    }
}
#greetingModal.open {
    opacity: 1;
    pointer-events: auto;
}

#greetingModal .modalOverlay {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.05) 0,
            rgba(255,255,255,0.05) 4px,
            rgba(255,255,255,0.02) 4px,
            rgba(255,255,255,0.02) 8px
        ),
        rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
#greetingModal .modalInner {
    position: relative;
    width: min(900px, 90%);
    max-height: 90vh;
    background: transparent;
}
#greetingModal .modalClose {
    position: absolute;
    top: -1.4em;
    right: 40px;
    background: #fff;
    border: none;
    color: var(--accent);
    font-size: 36px;
    width: 1.2em;
    min-width: unset;
    height: 1.2em;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em;
}
#greetingModal .modalClose:hover {
    background: #fce6eb;
    opacity: 1;
}
.greetingNav .swiper-button-prev,
.greetingNav .swiper-button-next {
    color: var(--accent);
}
.greetingNav .swiper-button-prev:after {
    margin-right: 10px;
}
.greetingNav .swiper-button-next:after {
    margin-left: 10px;
}
.greetingNav .swiper-button-prev:hover,
.greetingNav .swiper-button-next:hover {
    color: #c94a63; /* var(--accent) の濃い版にしてもOK */
}

@media (max-width: 600px) {
    #greetingModal .modalClose {
        position: absolute;
        top: 12px;
        right: 30px;
        font-size: 28px;
        width: 1.2em;
        height: 1.2em;
        line-height: 1em;
    }
}
@media (max-width: 480px) {
    .greeting .greetingItem .greetingVisual{
        align-items: center;
        width: auto;
    }
    .greeting .greetingItem.imglt .greetingVisual,
    .greeting .greetingItem.imgrt .greetingVisual{
        padding: 15px 16px 0;
    }
}

/* =========================================
   50周年記念事業　下層ページ
========================================= */

#anniv50.lower h2{
    margin-bottom: 40px;
    text-align: center;
}
#anniv50.lower h2 span{
    display: block;
    margin-bottom: 10px;
    line-height: 1rem;
    color: #6c3a8c;
    font-size: 1rem;
}

/* 記念アイコン（円形） */
#anniv50.lower .anniv-circle {
    position: absolute;
    right: 5%;
    bottom: -10%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.25) 0,
            rgba(255,255,255,0.25) 3px,
            rgba(255,255,255,0.15) 3px,
            rgba(255,255,255,0.15) 6px
        ),
        #e88fa0;
}
#anniv50.lower .anniv-circle::before {
    content: "";
    position: absolute;
    width: 127px;
    height: 127px;
    background: #f3f2fa;
    border-radius: 50%;
    border: solid 1px #d8c9a3;
    z-index: 1;
}
#anniv50.lower .anniv-circle img {
    position: relative;
    z-index: 2;
    width: 66%;
    height: auto;
}

#anniv50.lower .mv{
    height: 350px;
    min-height: unset;
}
#anniv50.lower .mv::before{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.25) 0,
            rgba(255,255,255,0.25) 3px,
            rgba(255,255,255,0.15) 3px,
            rgba(255,255,255,0.15) 6px
        ),
        #e88fa0;
    content: "";
}
#anniv50.lower .mv::after{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 13px;
    background: #fff;
    border-bottom: solid 1px #d8c9a3;
    content: "";
    z-index: -1;
}
@media (max-width: 768px) {
    #anniv50.lower .anniv-circle {
        bottom: -6%;
        width: 20vw;
        max-width: 150px;
        min-width: 124px;
        height: 20vw;
        max-height: 150px;
        min-height: 124px;
    }
    #anniv50.lower .anniv-circle::before {
        content: "";
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

    #anniv50.lower .mv{
        aspect-ratio: 2 / 1;
        height: auto;
    }


}

/* 対談 */

#anniv50.lower .moderator {
    margin: 0 auto 30px;
    width: calc(100% - 56px);
    max-width: 700px;
    font-size: 0.95rem;
}
@media (max-width: 768px) {
    #anniv50.lower .moderator {
        width: calc(100% - 32px);
    }
}
@media (max-width: 480px) {
    #anniv50.lower .moderator {
        width: calc(100% - 42px);
    }
}

#anniv50.lower .dialogue-block {
    background: #fff;
    padding: 32px 28px;
    border-radius: 12px;
    margin-bottom: 40px;
}
#anniv50.lower .dialogue-block > h3 {
    color: #b84ac2;
    margin-bottom: 24px;
}
#anniv50.lower .dialogue-block .dialogue-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-columns: clamp(80px, 10vw, 96px) 1fr;
    gap: 12px 30px;
    margin-bottom: 12px;
}
#anniv50.lower .dialogue-block .dialogue-item > * {
    padding: 10px 0;
} 
#anniv50.lower .dialogue-block .dialogue-item .mori {
    background: #ffb34733;
    text-align: center;
}
#anniv50.lower .dialogue-block .dialogue-item .era {
    background: #6ec8ff33;
    text-align: center;
}
@media (max-width: 768px) {
    #anniv50.lower .dialogue-block {
        padding: 20px 16px;
        border-radius: 12px;
        margin-bottom: 40px;
    }
    #anniv50.lower .dialogue-block > h3{
        margin-bottom: 16px;
        padding: 0 5px;
    }
    #anniv50.lower .dialogue-block .dialogue-item {
        grid-template-columns: 1fr;
    }
    #anniv50.lower .dialogue-block .dialogue-item > * {
        padding: 0 5px;
    } 
    #anniv50.lower .dialogue-block .dialogue-item .mori,
    #anniv50.lower .dialogue-block .dialogue-item .era {
        width: 20%;
        min-width: 60px;
        padding-bottom: 4px;
        text-align: left;
        background: none; /* 丸背景を消す */
        justify-self: start;
    }
    #anniv50.lower .dialogue-block .dialogue-item .mori {
        border-bottom: 2px solid #ffb347;
        font-weight: 500;
    }

    #anniv50.lower .dialogue-block .dialogue-item .era {
        border-bottom: 2px solid #6ec8ff;
        font-weight: 500;
    }
}

#anniv50.lower .talk{
    margin: 100px auto 80px;
}
#anniv50.lower .talk::before{
    bottom: -50px;
}
#anniv50.lower .talk::after{
    bottom: -62px;
}
#anniv50.lower .talk .btnTxtBox{
    gap: 0 30px;
}
#anniv50.lower .talk h3{
    margin-bottom: 0.5em;
}
#anniv50.lower .talk .btnTxtBox a.btnTxtSub{
    position: relative;
    margin-top: 26px;
}
#anniv50.lower .talk .btnTxtBox a.btnTxtSub.onPage{
    outline: solid 1px var(--accent);
}
#anniv50.lower .talk .btnTxtBox a.btnTxtSub.onPage:before{
    position: absolute;
    top: -21px;
    left: 0;
    display: block;
    width: 150px;
    height: 1em;
    color: var(--accent);
    font-size: 0.8em;
    content: "いま読んでいるテーマ";
    content: "\3044\307e\8aad\3093\3067\3044\308b\30c6\30fc\30de";
    font-family: "Noto Sans JP", sans-serif;
}

#anniv50.lower .imgCutBox{
    margin: 0 auto 40px;
    aspect-ratio: 9 / 5;
    width: 90%;
    max-width: 540px;
    height: auto;
}

/* =========================================
   デジタルガイドブック
========================================= */

.guidebook .gbImg{
    box-shadow: 1px 1px 4px #a7a7a7;
}
.guidebook .btnTxtBox {
    margin: 30px auto 20px;
}
.guidebook .btnTxtBox .btnTxtSub{
    width: 80%;
    max-width: 200px;
    min-width: 120px;
}
.guidebook .archive .row{
    justify-content: space-around;
    margin: auto;
}
.guidebook .archive .row .column3-1 {
    flex-grow: 0;      /* 0に上書きして親要素が必要以上に広がるのを防ぐ */
    width: 100%;       /* スマホなどの1カラム表示時に潰れないよう100%を指定 */
    min-width: 120px;
}
.guidebook .archive .row .column3-1 .gbImg{
    height: 168px;
}

@media (max-width: 480px) {
    .guidebook .btnTxtBox {
        margin-top: 20px;
    }
    .guidebook .info h2.section-heading {
        font-size: 1.5rem
    }
}

/* =========================================
   規則・細則
========================================= */

/* #terms, #rules 内だけに適用 */
#terms, #rules {
  font-size: 0.80rem;
  line-height: 1.15;
  color: #333;
}

/* #terms / #rules 内の h4 は元のサイトのサイズを維持する */
#terms h4,
#rules h4 {
  font-size: 1.05rem !important;
  line-height: 1.7rem !important
}

/* 第○条（見出し） */
#terms .article-title,
#rules .article-title {
  font-size: 1.00rem;
  font-weight: 700;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
  padding-left: 0.35rem;
  border-left: 3px solid #777;
}

/* ──────────────── */
/* 規約：段落番号（1,2,3） */
/* ──────────────── */
#terms .para {
  display: flex;
  align-items: flex-start;
  margin: 0.20rem 0 0.50rem 0;
}

#terms .para-num {
  display: inline-block;
  width: 1.5em;
  flex-shrink: 0;
}

#terms .para p {
  margin: 0;
  padding: 0;
}

/* ──────────────── */
/* 規約：丸括弧番号（（1）など） */
/* ──────────────── */
#terms .item {
  display: flex;
  align-items: flex-start;
  margin: 0.20rem 0 0.50rem 0;
}

#terms .item-num {
  display: inline-block;
  width: 3.0em;   /* 全角括弧＋数字に最適 */
  flex-shrink: 0;
}

#terms .item p {
  margin: 0;
  padding: 0;
}

/* ──────────────── */
/* 細則：番号（1. 2. 3.） */
/* ──────────────── */
#rules .rule {
  display: flex;
  align-items: flex-start;
  margin: 0.20rem 0 0.50rem 0;
}

#rules .rule-num {
  display: inline-block;
  width: 2.0em;   /* 半角数字＋ドットに最適 */
  flex-shrink: 0;
}

#rules .rule p {
  margin: 0;
  padding: 0;
}

/* スマホ最適化 */
@media (max-width: 600px) {
  #terms, #rules {
    font-size: 0.75rem;
    line-height: 1.12;
  }

  #terms .article-title,
  #rules .article-title {
    font-size: 0.90rem;
    margin-top: 1.3rem;
  }

  #terms .item-num {
    width: 3.2em;  /* スマホでは少し広げる */
  }

  #rules .rule-num {
    width: 2.2em;  /* 細則もスマホで少し広げる */
  }
}

/* =========================================
   活動スケジュール
========================================= */

.plan-table th {
    text-align: center;
    vertical-align: top;
}
.plan-table td.koshigaya,
.plan-table td.shonan,
.plan-table td.adachi,
.plan-table td.campus3 {
    padding-left: 66px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}
.plan-table td.koshigaya { background-image: url(/etc/fubokyo/images/icon_koshigaya.png); }
.plan-table td.shonan { background-image: url(/etc/fubokyo/images/icon_shonan.png); }
.plan-table td.adachi { background-image: url(/etc/fubokyo/images/icon_adachi.png); }
.plan-table td.campus3 { background-image: url(/etc/fubokyo/images/icon_campus3.png); height: 90px; }

@media (max-width: 480px) {
    .plan-table tr:has(th):not(:first-child) {
        margin-top: 1.5em;
    }
    .plan-table th{
        font-size: 1rem;
    }
    .plan-table td:first-of-type {
        background-color: var(--stripe-color);
    }
}

/* =========================================
   進路・就職セミナー
========================================= */

.career .schedule{
    margin-bottom: 1.5em;
    color: var(--sub-text);
    text-align: center;
    font-size: 1.2em;
}

/* 期間外（無効化）のスタイル */
.career a.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
    filter: grayscale(80%);
    box-shadow: none;
}

/* 期間外のときはホバー時の拡大演出なども無効化 */
.career a.disabled:hover {
    transform: none;
    border-color: transparent;
}
.career a.disabled:hover img {
    transform: none;
}

.program-btn-card {
    display: block;
    width: 80%;
    max-width: 260px;
    min-width: 200px;
    margin: 20px auto 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: #fff;
}

/* 画像部分（ズームと光の演出） */
.program-btn-card .img-wrapper {
    position: relative;
    overflow: hidden;
}
.program-btn-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* ホバー時に斜めの光がキラリと走る演出 */
.program-btn-card .img-wrapper::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
    transition: none;
}
.program-btn-card:hover .img-wrapper::after {
    left: 130%;
    transition: all 0.8s ease;
}

/* ホバー時の挙動（ズーム ＆ 浮き上がり） */
.program-btn-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(225, 56, 107, 0.25); /* ピンク系の華やかな影 */
    border-color: #e1386b;
}
.program-btn-card:hover img {
    transform: scale(1.04);
}

/* 下部キャプションラベル */
.program-btn-card .btn-caption {
    background: linear-gradient(135deg, #e1386b 0%, #ff6b8b 100%);
    color: #fff;
    text-align: center;
    padding: 12px 6px;
    font-weight: 500;
}

/* =========================================
   支部活動
========================================= */

.branch .block1 { --block-color: #a2d04b; }
.branch .block2 { --block-color: #99c1d6; }
.branch .block3 { --block-color: #82a0dd; }
.branch .block4 { --block-color: #ec9b9b; }
.branch .block5 { --block-color: #fbb855; }
.branch .block6 { --block-color: #c696d5; }
.branch .block7 { --block-color: #8a94d2; }
.branch .block8 { --block-color: #f46d6d; }

/* 一覧 */

.branch .maparea {
    padding: 20px 30px 40px;
    background-color: #fff;
    border: solid 1px var(--border);
    border-radius: 8px;
}
.branch .branch-list h3{
    position: relative;
    margin: 1em 0 0.2em;
    padding-left: 1.5em;
    font-size: 1.1rem;
    font-weight: 500;
    text-shadow:
        1px 1px 0 #fff,
        -1px 1px 0 #fff,
        1px -1px 0 #fff,
        -1px -1px 0 #fff;
}
.branch .branch-list h3:first-of-type{
    margin-top: 0;
}
.branch .branch-list h3::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    background-color: color-mix(in srgb, var(--block-color) 80%, white);
    border-radius: 5px;
    z-index: -1;
}

.branch .branch-list{
    position: relative;
    z-index: 1;
}
.branch .branch-list ul{
    position: relative;
    margin-bottom: 30px;
}
.branch .branch-list ul::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -15px;
    border-bottom: 1px dashed var(--border);
}
.branch .branch-list li {
    position: relative;
    display: inline-block;
    margin-left: 5px;
}
.branch .branch-list li:last-child{
    margin-right: 0;
}
.branch .branch-list li a{
    display: block;
    padding: 0 0.4em;
    line-height: 1.8em;
}
.branch img#branch-maplist{
    display: block;
    margin: 20px auto;
    width: 90%;
    max-width: 603px;
    height: auto;
}

/* news */

.branch-newsList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px clamp(10px, 3%, 24px);
    margin: 20px auto 0;
    text-align: left;
}
.branch-newsList > a,
.branch-newsList > div{
    padding: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.branch-newsList > a:hover {
    border-color: var(--accent);
}
.branch-newsList .shibu{
    display: block;
    height: 1.5rem;
    line-height: 1.5rem;
    background-color: var(--block-color);
    border-radius: 4px;
    color: #fff;
    text-align: center;
}
.branch-newsList .news-date{
    font-size: 0.9em;
}

.branch-newsList .metaBox {
    display: flex;
    margin: 8px 0;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
.branch-newsList .metaBox .news-date {
    line-height: 1.5rem;
    font-size: 0.9rem;
    color: #555;
}
.branch-newsList p{
    line-height: 1.5em;
}

@media (max-width: 768px) {
    .branch-newsList {
        width: 90%;
    }
}
@media (max-width: 480px) {
    .branch .row:has(.branch-list) {
        gap: 0;
    }
    .branch .branch-list:last-of-type  ul:last-of-type{
        margin-bottom: 0;
    }
    .branch .branch-list:last-of-type  ul:last-of-type::after {
        display: none;
    }
    .branch img#branch-maplist{
        display: none;
    }
}

/* =========================================
   支部総会
========================================= */
.meeting table th{
    min-width: 7em;
    font-size: 0.95rem;
}
.meeting table td{
    font-size: 0.9rem;
}
.meeting table td:first-of-type{
    min-width: 8em;
}

.meeting .btnTxtList {
    width: 99%;
}
.meeting .btnTxtList .btnTxtTriangle {
    padding: 10px 15px 10px 25px;
    width: 200px;
}

/* =========================================
   各支部ページ
========================================= */

.notice.branch table.stack-480 th,
.notice.branch table.stack-480 td{
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
}

/* =========================================
   全国支部について
========================================= */

.branch-about p.info {
    margin-bottom: 1.5em;
}

.branch-about h4 {
    margin-bottom: 6px;
    color: var(--sub-text);
    font-size: 1.05rem;
}

/* =========================================
   お問い合わせ
========================================= */

.contact form table tr.captchaCheck{
    display: none;
}
.contact form table th{
    width: 166px;
}
.contact form table th span{
    display: inline-block;
}
.contact form table th span.required{
    padding: 0 0 0 0.3em;
    color: #e51c47;
    font-size: 0.7em;
    vertical-align: super;
}
.contact form table td .error,
.contact form table td .required-text{
    margin-bottom: 0.3em;
    color: #e51c47;
}

.cautionBox{
    margin: 2em auto 0;
    width: 90%;
    font-size: 0.9rem;
    padding: 16px 22px;
}
.cautionBox h3{
    margin: 0 0 0.5em;
    font-weight: 500;
    font-size: 1.2em;
}

@media (max-width: 480px) {
    .contact form table th{
        width: auto;
    }
}

/* サンクスページ */

section:has(.thanksBox) {
    text-align: center;
}
.thanksBox{
    display: inline-block;
    text-align: left;
}
.thanksBox p + p{
    margin-top: 1em;
}
.thanksBox table{
    margin: 2em auto 0;
}