@charset "UTF-8";

/* ==========================================================================
   イベント詳細ページ専用スタイル (single-event.css)
   ========================================================================== */

/* イベント詳細、イベントレポートのボタン */
.event-toggle-link-wrapper {
    text-align: center;
    margin-top: 2.0rem;
    margin-bottom: 4.0rem;
}
.btn-detail, .btn-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 4.8rem 0.6rem 3.0rem;
    border: 0.2rem solid #8ab4d0;
    border-radius: 5.0rem;
    color: var(--color-linkblue);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.8rem;
    position: relative;
    transition: all 0.3s ease;
}
.btn-detail::after, .btn-report::after {
    content: "";
    position: absolute;
    right: 2rem; 
    top: 50%;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    background-image: url('../assets/icon_18px_arrow_right_linkblue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.btn-detail:hover, .btn-report:hover {
    opacity: 0.8;
}






/* --- テーブル基本設定 --- */
.event-detail-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-mosgreen); 
    background-color: #fff;
	border-collapse: separate;
    border-spacing: 0;
	border-radius: 9px;
	overflow: hidden;
}
.event-detail-table tr:first-child th:first-child {    border-top-left-radius: 8px;}
.event-detail-table tr:first-child td:last-child {    border-top-right-radius: 8px;}
.event-detail-table tr:last-child th:first-child {    border-bottom-left-radius: 8px;}
.event-detail-table tr:last-child td:last-child {    border-bottom-right-radius: 8px;}

.event-detail-table th, 
.event-detail-table td {
    border: 1px solid var(--color-mosgreen); 
    padding: 2.0rem 2.5rem; /* 20px 25px */
    vertical-align: middle;
    line-height: 1.8;
}

.event-detail-table th {
    width: 25%;
    background-color: #F6F7F6; /* 薄いベージュ */
    color: var(--color-mosgreen);
    text-align: center;
    font-weight: bold;
	border-right: none;
}

.event-detail-table td {
    color: #333;
	border-left: none;
}
/* 赤字のお知らせ */
.event-red-note {
    color: #ff0000;
    margin-top: 1.5rem;
    margin-bottom: 1.0rem;
    line-height: 1.6;
}

/* テーブルのセル内で長いURLなどを強制改行させる */
table td, 
table th {
    word-break: break-all;     /* 単語の途中でも改行する */
    overflow-wrap: break-word; /* 長い文字列を折り返す（モダンな指定） */
}

/* --- 共通：TD内の余白リセット（人数・料金・条件用） --- */
.condition-td, .contact-td {
    padding: 0 !important;
}

/* --- 共通：内部の行・分割ルール --- */
.condition-inner {
    display: flex;
    flex-direction: column;
}

.condition-row {
    padding: 1.5rem 2.5rem; /* 15px 25px */
    border-bottom:1px solid var(--color-mosgreen);
}

.condition-row:last-child {
    border-bottom: none;
}

/* 左右2分割の指定（人数・料金・年齢で共通） */
.condition-row.split {
    display: flex;
    padding: 0;
}

.condition-row.split .col {
    flex: 1;
    padding: 1.5rem 2.5rem;
}

.condition-row.split .col:first-child {
    border-right: 1px solid var(--color-mosgreen); /* 真ん中の仕切り線 */
}

/* --- 添付資料・画像・自由入力エリア --- */
.pdf-container {
    margin-bottom: 1.5rem;
}

.pdf-link {
    color: var(--color-linkblue);
    font-weight: bold;
    text-decoration: underline;
}

.detail-image {
    margin: 2.0rem 0; /* 20px */
    max-width: 450px;
}

.detail-image img {
    width: 100%;
	max-width: 200px;
    height: auto;
    border: 1px solid #ccc;
    display: block;
}

.free-text {
    margin-top: 1.5rem;
}

/* --- リッチエディタ（Wysiwyg）内の装飾 --- */
.rich-text-area a,
.contact-rich-row a {
    color: var(--color-linkblue);
    text-decoration: underline;
    font-weight: bold;
    transition: opacity 0.3s;
}

.rich-text-area a:hover,
.contact-rich-row a:hover {
    text-decoration: none;
    opacity: 0.7;
}

.contact-rich-row {
    padding: 1.5rem 2.5rem; /* 15px 25px */
    border-bottom:1px solid var(--color-mosgreen);
}
.contact-rich-row:last-child {
    border-bottom: none;
}

/* --- 一覧へ戻るボタン --- */
.back-btn-wrap {
    text-align: center;
    margin: 6.0rem 0 8.0rem; /* 60px 0 80px */
}

.back-btn {
    display: inline-block;
    background-color: #1a2f63;
    color: #fff;
    padding: 1.8rem 8.0rem; /* 18px 80px */
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.6rem;
    transition: background-color 0.3s ease;
}

.back-btn:hover {
    background-color: #2a4380;
}


/* 関連イベントセクション */
.related-events-section {
    margin-top: 6.0rem;
}

.related-events-title {
    font-size: 2.4rem;
    color: var(--color-mosgreen);
    margin-bottom: 2.0rem;
    font-weight: bold;
}

.related-event-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.related-event-item {
    width: 50%;
    margin-bottom: 1.5rem;
    padding-left: 2.0rem;
    position: relative;
    box-sizing: border-box;
}

.related-event-bullet {
    position: absolute;
    left: 0;
    color: #aa7d49;
}

.related-event-link {
    color: var(--color-linkblue);
    text-decoration: underline;
}





/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
    .event-detail-table th {
        width: 30%;
        padding: 1.5rem;
    }
    
    .condition-row.split {
        flex-direction: column;
    }
    
    .condition-row.split .col:first-child {
        border-right: none;
        border-bottom: 0.1rem solid #1a2f63;
    }
	
	.related-event-item {
        width: 100%;
    }
}

/* --- レポート用PDFリンク --- */
.report-pdf-link-wrap {
    margin-top: 2.0rem;
    border: 1px solid var(--color-mosgreen);
    border-radius: 9px;
    padding: 1.5rem;
    text-align: center;
    background-color: #fff;
    transition: opacity 0.3s ease;
}
.report-pdf-link-wrap:hover {
    opacity: 0.8;
}
.report-pdf-caption {
    font-size: 1.6rem;
    color: #aa7d49;
    margin-bottom: 0.3rem;
    font-weight: bold;
}
.report-pdf-link {
    font-size: 1.8rem;
    color: #aa7d49;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.report-pdf-link::after {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 0.5rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23aa7d49" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}