@charset "UTF-8";

:root {
    /* メインカラー */
    --c-sub-beige: #fff0d2;   
    --c-sub-yellow: #ead981;
    --c-sub-yellow-d: #8c7414;
    --c-sub-pink: #eec4d9; 
    --c-sub-blue: #2a7e85;
    --c-sub-text: #333333;
    
    /* フォント設定*/
    --f-sub-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    --f-sub-en: "Josefin Sans", sans-serif;
}

body.sub-page {
    background-color: var(--c-sub-beige);
    color: var(--c-sub-text);
    margin: 0;
}

a { transition: all 0.3s ease; }
.breadcrumb a { color: var(--c-sub-blue); text-decoration: underline; }
.breadcrumb a:hover { color: var(--c-sub-yellow-d); }

.anchor-menu a {
    color: #333; text-decoration: none;
    border-bottom: 1.5px solid var(--c-sub-blue);
    display: inline-block;
}
.anchor-menu a:hover { transform: translateY(-2px); color: var(--c-sub-blue); }

/* ==========================================================================
   2. ヘッダー・ロゴ設定
   ========================================================================== */
.sub-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 9999;
    pointer-events: none;
}

.sub-header__logo-container {
    width: 90px;
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 0 0 15px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    pointer-events: auto;
}

.sub-header__logo-container img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   3. メインビジュアル・パンくず
   ========================================================================== */
.sub-visual {
    text-align: center;
    padding: 160px 0 40px;
}

.sub-visual .eng-title { display: block; font-family: var(--f-sub-en); font-size: 3.5rem; color: var(--c-sub-yellow-d); letter-spacing: 0.15em; line-height: 1; }

.sub-visual h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.breadcrumb {
    max-width: 1000px;
    margin: 0 auto 20px;
    padding: 0 20px;
}

.breadcrumb ol {
    display: flex;
    list-style: none;
    padding: 0;
    font-size: 14px;
}

.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin: 0 10px;
    color: #333;
}

.breadcrumb a {
    color: var(--c-sub-blue);
    text-decoration: underline;
}

/* ==========================================================================
   4. コンテンツエリア（白枠・見出し・パーツ）
   ========================================================================== */
.sub-container {
    max-width: 1000px; margin: 0 auto 100px; background: #fff;
    border-radius: 80px; padding: 60px 80px; box-sizing: border-box;
    box-shadow: 0 20px 60px rgba(0,0,0,0.03);
}

/* 中見出し（矢印） */
.heading-arrow {
    font-size: 26px; font-weight: 600; position: relative; padding-left: 35px;
    margin-bottom: 30px; border-bottom: 2px solid var(--c-sub-yellow); padding-bottom: 15px;
}
.heading-arrow::before {
    content: ""; position: absolute; left: 0; top: 12px;
    border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent var(--c-sub-yellow);
}

/* 小見出し（縦線） */
.heading-dot {
    font-size: 20px;
    padding-left: 15px;
    border-left: 6px solid var(--c-sub-pink);
    margin: 40px 0 20px;
}

/* 最小見出し（点線） */
.heading-line {
    font-size: 18px;
    border-bottom: 1px dashed #cccccc;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* アンカーメニュー */
.anchor-menu {
    background: #fdfaf2;
    border: 1px solid var(--c-sub-yellow);
    border-radius: 30px;
    padding: 25px;
    margin-bottom: 50px;
    text-align: center;
}

.anchor-menu__title {
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--c-sub-yellow-d);
    font-size: 14px;
}

.anchor-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 25px;
    list-style: none;
    padding: 0;
}

.anchor-menu a {
    color: var(--c-sub-text);
    text-decoration: none;
    border-bottom: 1px solid var(--c-sub-blue);
    font-size: 15px;
}

.anchor-menu a .dot {
    color: var(--c-sub-yellow);
    margin-right: 6px;
    font-size: 10px;
}

.sub-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.sub-list li {
    display: flex; 
    align-items: center;
    position: relative;
    padding-left: 0; 
    margin-bottom: 12px;
    line-height: 1.6;
}

.sub-list li::before {
    content: "";
    display: block; 
    width: 8px;
    height: 8px;
    background: var(--c-sub-blue);
    border-radius: 50%;
    margin-right: 12px; 
    flex-shrink: 0; 
}
.img-full {
    width: 100%;
    margin: 0 0 20px;
}

.img-full img {
    width: 100%;
    height: auto;
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: block;
}

/* 50%画像（横並び）の設定 */
.img-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}
.img-half {
    width: calc(50% - 10px);
    margin: 0;
}
.img-half img {
    width: 100%;
    height: auto;
    border-radius: 15px; 
    display: block;
}

.img-quarter{
    width: calc(25% - 10px);
    margin: 0;
}

.img-quarter img {
    width: 100%;
    height: auto;
    border-radius: 15px; 
    display: block;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 30px;
}

.sub-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 15px; 
    overflow: hidden;
    border: 1px solid #d9e3dc;
    font-size: 16px;
}

/* ヘッダー行 */
.sub-table thead th {
    background: #f2f7f7; 
    font-weight: 600;
    color: var(--c-sub-text);
    text-align: left;
}

/* 各セル */
.sub-table th, 
.sub-table td {
    padding: 20px;
    border-bottom: 1px solid #d9e3dc;
    border-right: 1px solid #d9e3dc;
    line-height: 1.6;
}

.sub-table th:last-child, 
.sub-table td:last-child {
    border-right: none;
}

.sub-table tr:last-child th, 
.sub-table tr:last-child td {
    border-bottom: none;
}

.sub-table tbody th {
    background: #fafafa;
    width: 25%;
    font-weight: 600;
    text-align: left;
}

@media screen and (max-width: 1080px) {
    .sub-table th, 
    .sub-table td {
        padding: 15px 10px;
        font-size: 14px;
    }
    .sub-table tbody th {
        width: 30%;
    }
}

/* --- 外部リンクのスタイル --- */
.link-external {
    color: var(--c-sub-blue);
    text-decoration: underline;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    transition: all 0.3s ease;
}

/* 外部リンクのアイコン（SVG） */
.link-external::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-left: 5px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a7e85" stroke-width="2.5"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/></svg>') no-repeat;
    background-size: contain;
    transition: transform 0.3s ease; 
}

.link-external:hover {
    color: var(--c-sub-yellow-d);
    text-decoration: none; 
    transform: translateX(5px); 
    opacity: 0.8;
}

.link-external:hover::after {
    filter: sepia(100%) saturate(500%) hue-rotate(10deg);
}

figcaption {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    text-align: center;
}
.faq-item { border: 1px solid #d9e3dc; border-radius: 20px; overflow: hidden; margin-bottom: 20px; }
.faq-q { padding: 20px; background: #fff8ec; font-weight: 600; display: flex; align-items: center; }
.faq-q span { color: #f7931e; font-size: 28px; margin-right: 15px; font-family: var(--f-sub-en); align-items: center; }
.faq-a { padding: 20px; display: flex; background: #fff;  align-items: center;}
.faq-a span { color: var(--c-sub-blue); font-size: 28px; margin-right: 15px; font-family: var(--f-sub-en);  align-items: center;}

/* ファイルリンク（独立アイコン） */
.file-link { display: flex; align-items: center; text-decoration: none; color: var(--c-sub-text); padding: 10px; transition: 0.3s; }
.file-link:hover { background: #fdfaf2; border-radius: 10px; }
.file-icon { width: 50px; height: 50px; flex-shrink: 0; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10px; margin-right: 15px; font-family: var(--f-sub-en); }
.pdf .file-icon { background: #ff5035; }
.word .file-icon { background: #2b579a; }
.excel .file-icon { background: #217346; }
.file-info { text-decoration: underline; font-weight: 500; }

.info-box {
    margin-top: 20px;
    padding: 20px;
    background-color: #fdfaf2;
    border-left: 4px solid var(--c-sub-yellow-d);
    border-radius: 4px;
}

.info-box__title {
    margin: 0 0 5px 0;
    font-weight: 700;
    color: var(--c-sub-yellow-d);
    font-size: 15px;
}

.info-box__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* 地図 */
.map-container {
    position: relative; width: 100%; padding-top: 56.25%;
    border-radius: 40px; overflow: hidden; border: 1px solid #d9e3dc; margin-bottom: 15px;
}
.map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.content-block {
    margin-bottom: 80px; 
}

.content-block p {
    line-height: 2.0; 
    margin-bottom: 1.5em; 
}

.heading-dot {
    margin: 60px 0 25px; 
}

.link-box {
    margin: 40px 0 10px;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--c-sub-blue);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    padding: 5px 0;
    border-bottom: 2px solid var(--c-sub-yellow); 
}

.link-arrow::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a7e85" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>') no-repeat center;
    background-size: contain;
    transition: transform 0.3s ease;
}

.link-arrow:hover {
    color: var(--c-sub-yellow-d);
    opacity: 0.8;
}

.link-arrow:hover::after {
    transform: translateX(5px); 
}

.event-card-container {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

.event-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.event-body {
    padding: 20px;
}

.event-title {
    font-size: 1.25rem;
    color: var(--c-sub-blue);
    margin-bottom: 10px;
    font-weight: bold;
}

.event-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.event-meta span {
    display: block;
    margin-bottom: 4px;
}

.event-apply-btn {
    display: inline-block;
    background: var(--c-sub-blue);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
}

.event-apply-btn:hover {
    opacity: 0.8;
}

/* ==========================================================================
   5. 🆕 フッター（白背景 ＆ 多角形境界）
   ========================================================================== */
.footer-sub {
    background-color: #ffffff; 
    position: relative;
    padding: 100px 0 60px; 
    margin-top: -50px;
    clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
}
.footer-sub__add {
    font-size: 19px;
    line-height: 1.9;
    margin-bottom: 40px;
    text-align: center;
    color: var(--c-sub-text);
}
.footer-sub__nav {
    display: flex;
    justify-content: center;
    gap: 15px 30px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}
.footer-sub__nav a {
    color: var(--c-sub-text);
    font-size: 18px;
    text-decoration: none;
    font-weight: 500;
}
.footer-sub__nav a:hover { color: var(--c-sub-blue); text-decoration: underline; }

.footer-sub__inner {
    max-width: 1080px;
    margin: 0 auto;
    width: 86%;
    text-align: center;
    position: relative;
}

/* お問い合わせボタン */
.footer-sub__contact a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c-sub-yellow);
    width: 435px; 
    height: 64px;
    font-size: 24px;
    font-weight: 600;
    color: var(--c-sub-text);
    text-decoration: none;
    transition: 0.3s;
    margin: 0 auto 40px;
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
.footer-sub__contact a:hover {
    background-color: #f7d38a;
    transform: scale(1.02); 
}

.footer-sub__contact a::before {
    content: "";
    width: 28px;
    height: 28px;
    margin-right: 15px;
    background: url("https://mashimaro.jp/u-tomiya/images/mail.svg") no-repeat center;
    background-size: contain;
}

/* 住所・ナビ・アイコン */
.footer-sub__add {
    line-height: 1.8;
    margin-bottom: 40px;
    font-size: 16px;
    color: var(--c-sub-text);
}

.footer-sub__nav {
    display: flex;
    justify-content: center;
    gap: 15px 35px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.footer-sub__nav a:hover {
    text-decoration: underline;
    color: var(--c-sub-blue);
}

.footer-sub__icon {
    width: 130px;
    margin: 0 auto;
    opacity: 0.8;
}

.footer-sub { overflow: hidden; }
.footer-deco {
    position: absolute;
    right: 5%;
    bottom: 50px;
    width: 150px;
    height: 150px;
    pointer-events: none;
    z-index: 0;
}
.footer-deco::before, .footer-deco::after {
    content: ""; position: absolute; width: 0; height: 0; border-style: solid;
}
.footer-deco::before {
    border-width: 0 40px 70px 40px; border-color: transparent transparent var(--c-sub-pink) transparent;
    transform: rotate(15deg); right: 20px; bottom: 40px; opacity: 0.6;
}
.footer-deco::after {
    border-width: 0 30px 50px 30px; border-color: transparent transparent var(--c-sub-blue) transparent;
    transform: rotate(-25deg); right: 80px; bottom: 10px; opacity: 0.5;
}

/* ページトップに戻るボタン */
.page-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    background: #ffffff;
    border: 1px solid var(--c-sub-yellow);
    color: var(--c-sub-yellow-d);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 100;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-size: 20px;
    transition: 0.3s;
}

.page-top:hover {
    background: var(--c-sub-yellow);
    color: #ffffff;
}

/* ==========================================================================
   6. スマホ調整
   ========================================================================== */
@media screen and (max-width: 1080px) {
    .sub-header__logo-container { width: 85px; padding: 10px; }
    .sub-visual { padding: 140px 0 30px; }
    .sub-visual .eng-title { font-size: 2.5rem; }
    .anchor-menu ul { flex-direction: column; align-items: center; }
.footer-sub {
        padding: 60px 0 40px;
        clip-path: polygon(0 25px, 100% 0, 100% 100%, 0 100%);
        margin-top: -25px;
    }
    .footer-sub__add {
        font-size: 1.6rem;
    }
        .page-top { width: 50px; height: 50px; right: 15px; bottom: 15px; }
    .sub-container { width: 92%; padding: 40px 20px; border-radius: 40px; }
.footer-sub__contact a {
        width: 90%;
        font-size: 1.8rem;
    }    .footer-deco { transform: scale(0.6); right: -20px; }
    .img-flex {
        flex-direction: column; 
    }
    .img-half {
        width: 100%;
    }
}

.sp-menu-btn, .sp-nav {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .sp-menu-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 9px;
        box-sizing: border-box;
        position: fixed;
        top: 20px; right: 20px;
        width: 65px; height: 65px;
        background: var(--c-sub-blue);
        border: none; border-radius: 50%;
        color: #fff; z-index: 10000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .sp-menu-btn__line {
        display: block; width: 28px; height: 2px;
        background: #fff; position: relative;
        margin: 0 auto 6px; transition: 0.3s;
    }
    .sp-menu-btn__line::before, .sp-menu-btn__line::after {
        content: ""; position: absolute; width: 100%; height: 100%;
        background: #fff; left: 0;
    }
    .sp-menu-btn__line::before { top: -8px; }
    .sp-menu-btn__line::after { top: 8px; }

    .sp-menu-btn__text { font-size: 10px; font-weight: 700; margin-top: 8px; }

    .sp-nav {
        display: flex !important;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(255, 240, 210, 0.98);
        z-index: 10001;
        justify-content: center; align-items: center;
        opacity: 0; visibility: hidden;
        transition: all 0.4s ease;
    }
    .sp-nav.is-active {
        opacity: 1; visibility: visible;
    }
    
.sp-nav__list {
        list-style: none;
        padding: 0;
        margin: 0; 
        text-align: center;
    }
    .sp-nav__list li { margin-bottom: 30px; }
.sp-nav__list a {
        font-size: 20px;
        font-weight: 700;
        color: var(--c-sub-text);
        text-decoration: none;
        display: block;
        letter-spacing: 0.05em; 
    }
.sp-nav__close {
        display: block; 
        margin: 60px auto 0; 
        background-color: var(--c-sub-blue); 
        color: #ffffff; 
        border: none;
        padding: 15px 50px;    
        border-radius: 30px;
        font-size: 16px;
        font-weight: 700;
        font-family: var(--f-sub-en);
        letter-spacing: 0.1em;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
        transition: 0.3s;
    }

    .sub-visual h1{
        margin: 0 8px;
    }

    .sp-nav__close:active {
        background-color: var(--c-sub-yellow-d); 
        transform: translateY(1px);
    }
}
    .sub-container { width: 92%; padding: 40px 20px; border-radius: 40px; }