/* --- 基本スタイル --- */
html,body { margin:0; padding:0; }
body { font-family:sans-serif; background-color:#f0f2f5; display:flex; flex-direction:column; overflow-x: hidden;}
#wrap { max-width:1200px; margin:0 auto; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); overflow:visible; display:flex; flex-direction:column; flex-grow:1; width:100%; }
a { text-decoration:none; color:#007bff; }
a:hover { text-decoration:underline; }
.me-1 { margin-right:1rem; }
.br-sp { display: none; }
.d-none { display: none !important; }
/* --- ヘッダー --- */
.header { background-color:#800000; color:white; position:sticky; top:0; z-index:100; }
.header .inner { max-width:1200px; margin:0 auto; padding:10px 20px; display:flex; justify-content:space-between; align-items:center; }
.header .logo img { height:40px; vertical-align:middle; }
.header .header_nav .navi { display:flex; gap:10px; list-style:none; padding:0; margin:0; }
.header .header_nav .sitekensaku { display:flex; }
.header .header_nav .sitekensaku input[type="text"] { border-radius:3px 0 0 3px; border:1px solid #ccc; padding:8px; background-color:#fff; color:#000; }
.header .header_nav .sitekensaku button { font-family:'Font Awesome 5 Free'; font-weight:900; border:none; background:#007bff; color:white; padding:8px 12px; cursor:pointer; border-radius:0 3px 3px 0; margin-left:-1px; }
.spnav { display:none; }
.spnav .menu-btn { background:transparent; border:none; color:white; cursor:pointer; padding:5px; }
.keylogo { max-height:400px; height:200px; width:100%; overflow:hidden; background-color:#000; display:flex; flex-wrap:wrap; align-content: center; align-items:center; justify-content:center; background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/key_visual-01.jpg); background-position:center ; background-repeat: no-repeat; background-size: cover; backdrop-filter: blur(3px); margin-bottom:10px; }
.keylogo::before { content: ""; position: absolute; inset: 0; background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/key_visual-01.jpg) center/cover no-repeat; filter: blur(2px); /* transform: scale(1.1); */z-index: 0; background-position: center 68%; max-width: 100%; overflow-x: hidden;}
.key-visual-txt { font-size:48px; font-weight:bold; color:#fff; text-shadow:2px 2px 5px rgba(0,0,0,1); padding-bottom: 10px; font-family: serif; z-index: 1; }
#dotcom1 { letter-spacing: -10px; }
#dotcom2 { letter-spacing: -15px; }
#dotcom3 { letter-spacing: -5px; margin-left: 7px; }
/* --- レイアウト --- */
.main-container { display:flex; align-items:flex-start; gap:10px; padding:20px 5px; flex-grow:1; }
.main-content { flex:1; min-width:0; position:relative; }
.sidebar { width:300px; flex-shrink:0; position:sticky; top:80px; }
.ad-section img { width:100%; margin-bottom:15px; cursor:pointer; border-radius:10px; box-shadow:0 2px 4px rgba(0,0,0,0.1); transition:transform 0.2s; }
.ad-section img:hover { transform:scale(1.03); }
.ad-section img:nth-child(4),.ad-section img:nth-child(5),.ad-section img:nth-child(6) { display:none; }
.ad-section img[alt="展示会成果シミュレーター"] { border: 1px solid black; box-sizing: border-box; }
@media (max-width: 768px) {
.main-content { max-width: 100%; }
.main-container { padding:20px 0px;}
}
/* --- セクション --- */
.main-content section { padding:25px; margin-bottom:30px; border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,0.04); border:1px solid #e9e9e9; overflow:visible; }
#tokusyu-section { background-color:#fbf5f2; }
#sokuhou-section { background-color:#f0f8ff; }
.midokoro-section { background-color:#f5fffa; }
.latest-interviews { background-color:#fffaf0; }
.kako-tokusyu { background-color:#fbf5f2; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px 20px; }
.section-title { font-size:1.4rem; font-weight:bold; color:#333; margin-top:0; margin-bottom:10px; padding-left:15px; border-left:5px solid #007bff; }
#tokusyu-section .section-title { border-left-color:#930848; }
#sokuhou-section .section-title { border-left-color:#4a90e2; }
.midokoro-section .section-title { border-left-color:#2e8b57; }
.latest-interviews .section-title { border-left-color:#daa520; }
.kako-tokusyu .section-title { border-left-color:#901fd2a7; }
/* --- 特集展示会 --- */
#tokusyu-section img { width:100%; }
/* --- 展示会速報 --- */
#sokuhou-section { position:relative; }
.sokuhou-event-container { margin-bottom:2rem; }
#sokuhou-section h3 { position:absolute; top:10px; left:10px; background-color:rgba(0,0,0,0.6); font-size:1.4rem; font-weight:bold; color:#fff; border-bottom:2px solid #007bff; padding:4px 10px; margin:0; z-index:1; }
.sokuhou-list-item { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; padding:0 12px; min-height:75px; box-sizing:border-box; border-radius:5px; transition:box-shadow 0.2s; }
.sokuhou-hidden { display:none; }
.sokuhou-list-item:hover { box-shadow:0 4px 8px rgba(0,0,0,0.15); }
.sokuhou-list-item .content { display:flex; align-items:center; gap:15px; overflow:hidden; min-width:0; }
.sokuhou-list-item img { width:98px; height:63px; object-fit:contain; border-radius:4px; flex-shrink:0; }
.sokuhou-list-text { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.sokuhou-list-text h4 { font-size:16px; font-weight:bold; margin:0 0 4px 0; color:#333; display:block; word-break:break-word; line-height:1.4; }
.sokuhou-list-text .booth-number { background-color:#003366; color:white; font-size:0.75rem; padding:2px 6px; border-radius:3px; margin-right:8px; white-space:nowrap; display:inline-block; }
.sokuhou-list-text .desc-preview { font-size:14px; color:#666; margin:0; max-width:650px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sokuhou-arrow { font-size:1.2rem; color:#ccc; }
.more-sokuhou-btn,.view-all-btn { display:block; width:auto; padding:8px 30px; background-color:#555; color:white; border:none; border-radius:5px; cursor:pointer; margin:20px auto 0 auto; font-size:0.9rem; text-align:center; }
.tenjikai-page-btn { display:block; width:auto; max-width:160px; padding:8px 30px; background-color:#cf6c0e; color:white; border:none; border-radius:5px; cursor:pointer; margin:20px auto 0 auto; font-size:1rem; text-align:center; }
.view-all-btn:hover { text-decoration:none; color:white; opacity:0.8; }
.exhibition-banner { margin-bottom:10px; border-radius:8px; overflow:hidden; position:relative; }
.exhibition-banner img { width:100%; height:240px; display:block; object-fit:cover; object-position:0 47%; transform:scale(1.7); }
.exhibition-banner_expage { margin-top: -20px; }
.exhibition-banner_expage img { width:100%; height:120px; display:block; object-fit:cover; object-position:0 50%; transform:scale(1.7); }
/* --- 見どころ紹介 --- */
.accordion-title { background-color:#007bff; color:white; cursor:pointer; padding:18px; width:100%; border:none; text-align:left; outline:none; font-size:18px; transition:0.4s; border-radius:8px; margin-bottom:5px; position:relative; }
.accordion-title.active { margin-bottom:0; border-radius:8px 8px 0 0; }
.accordion-title.active + .accordion-panel { margin-bottom:20px; }
.accordion-title:after { content:'+'; font-size:24px; color:white; position:absolute; right:18px; top:50%; transform:translateY(-50%); }
.accordion-title.active:after { content:"-"; }
.accordion-panel { padding:0 18px; background-color:white; max-height:0; overflow:hidden; transition:max-height 0.4s ease-out,padding 0.4s ease-out,margin-bottom 0.4s ease-out; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:0 0 8px 8px; }
.exhibition-details { margin-bottom:20px; color:#555; padding-top:20px; }
.midokoro-item { display:grid; grid-template-columns:150px 1fr; grid-template-rows:auto auto; gap:0 1rem; width:100%; margin-bottom:30px; }
.midokoro-item:last-child { margin-bottom:0; padding-bottom:10px; }
.midokoro-booth-cell { grid-area:1 / 1 / 2 / 2; }
.midokoro-name-cell { grid-area:1 / 2 / 2 / 3; border-bottom:1px solid #ccc; align-self:end; padding-bottom:5px; word-break: break-all; }
.midokoro-img-cell { grid-area:2 / 1 / 3 / 2; padding-top:10px; }
.midokoro-comment-cell { grid-area:2 / 2 / 3 / 3; padding-top:10px; word-break: break-all; }
.midokoro-booth { background-color:#003366; color:#fff; text-align:center; padding:5px; font-size:0.8rem; }
.midokoro-exname { font-weight:bold; line-height:1.2; font-size:18px; }
.midokoro-img { border:1px solid #ccc; width:150px; height:auto; max-height:150px; object-fit:contain; object-position:center; transition:max-height 0.4s ease; overflow:hidden; }
.midokoro-img.expanded { max-height:none; }
.midokoro-comment-box { position:relative; padding-bottom:25px; min-height:95px; }
.midokoro-comment-content { height:67px; overflow:hidden; line-height:1.5; transition:height 0.3s ease; font-size:14px; }
.midokoro-comment-box.expanded .midokoro-comment-content { height:auto; }
.midokoro-toggle-button { background:none; color:#003366; border:none; font-size:0.9rem; text-decoration:underline; cursor:pointer; position:absolute; right:0; bottom:0; }
.sp-del { display:inline-block; }
.accordion-title2 { background-color:#007bff; color:white; cursor:pointer; padding:18px; width:100%; border:none; text-align:left; outline:none; font-size:18px; transition:0.4s; border-radius:8px; margin-bottom:5px; position:relative; }
.accordion-panel2 { padding:20px 18px; background-color:white; transition:max-height 0.4s ease-out,padding 0.4s ease-out,margin-bottom 0.4s ease-out; border:1px solid #ddd; border-radius:0 8px; }
/* --- 最新の取材展示会 --- */
.latest-event-container { border:1px solid #ddd; border-radius:5px; overflow:hidden; }
.latest-event-row { display:flex; justify-content:space-between; padding:12px 10px; border-bottom:1px solid #ddd; }
.latest-event-row:last-child { border-bottom:none; }
.latest-event-row.odd { background-color:#f9f9f9; }
.latest-event-row span { color:#333; }
/* --- 過去の特集展示会 --- */
.kako-tokusyu img { width:100%; }
/* --- フッター --- */
footer { background-color:#800000; color:white; padding:20px; }
footer .inner { max-width:1200px; margin:0 auto; }
footer .menu { list-style:none; padding:0; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
footer .menu a { color:white; text-decoration:none; }
.copyright { text-align:center; margin-top:10px; font-size:0.7em; color:#eee; }
/* --- その他 --- */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.9); }
.modal-content { background-color:#fefefe; margin:10% auto; padding:30px; border:1px solid #888; width:80%; max-width:900px; border-radius:10px; position:relative; animation:slideDown 0.4s; }
@keyframes slideDown { from{transform:translateY(-50px); opacity:0;} to{transform:translateY(0); opacity:1;} }
.modal-close { color:#aaa; position:absolute; top:0px; right:2px; font-size:35px; font-weight:bold; cursor:pointer; }
.modal-close:hover,.modal-close:focus { color:black; text-decoration:none; }
.modal-main-content { display:block; }
.modal-left { flex:1; }
.modal-right { flex:2; }
.modal-header-info { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px; }
.modal-right h3 { margin-top:0; font-size:20px; font-weight:bold; margin-bottom:0; }
.modal-right strong { display:none; }
.modal-right p { line-height:1.8; }
.modal-right .modal-header-info p { text-align:center; margin-bottom:0; flex-shrink:0; background-color:#003366; color:#fff; width:60px; border-radius:6px; }
#topButton { display:none; position:fixed; bottom:20px; right:10px; z-index:99; font-size:18px; border:none; outline:none; background-color:#555; color:white; cursor:pointer; padding:15px; border-radius:50%; width:50px; height:50px; }
#topButton:hover { background-color:#007bff; }
/* --- SPハンバーガーメニュー --- */
#sp-menu { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.85); z-index:1000; }
#sp-menu ul { list-style:none; padding:80px 0 0 70px; text-align:left; }
#sp-menu li { margin-bottom:10px; }
#sp-menu a { color:white; font-size:1.2rem; text-decoration:none; padding:10px; display:block; }
.menu-close-btn { position:absolute; top:15px; right:20px; font-size:40px; color:white; background:none; border:none; cursor:pointer; }
.menu-divider { border-top:1px solid #555; margin:20px 40px; }
/* --- SPフッター広告 --- */
#footer-ad-rotator { display:none; margin-bottom:0px; overflow:hidden; position:relative; width:100%; max-width:350px; margin-left:auto; margin-right:auto; transition:height 0.6s ease-in-out; }
#footer-ad-rotator > div { transition:transform 0.6s ease-in-out; }
#footer-ad-rotator img { width:100%; height:auto; display:block; }
#footer-ad-rotator img:nth-child(4),#footer-ad-rotator img:nth-child(5),#footer-ad-rotator img:nth-child(6) { display:none; }
/* --- デスクトップ表示用スタイル --- */
@media (min-width: 769px) { .sokuhou-list-text h4 { display:flex; align-items:center; } #sp-menu .sp-only-link { display:none; } }
/* --- レスポンシブ (スマホ表示) --- */
@media (max-width: 768px) {
.br-sp { display: block; }
.main-container { flex-direction:column; }
.sidebar { display: none; }
.keylogo { background-size:140%; gap: 10px; overflow-x: hidden; max-width: 100%;}
.key-visual-txt { font-size:33px; }
#sokuhou-section h3 { position:absolute; top:0px; left:0px; background-color:rgba(0,0,0,0.6); font-size:1.0rem; font-weight:bold; color:#fff; border-bottom:2px solid #007bff; padding:4px 10px; margin:0; z-index:1; }
.exhibition-banner { margin-top: -20px; }
.exhibition-banner img { height:90px; object-position:0 47%; }
.main-content section { padding:10px; margin-bottom:20px; }
.header_nav { display:none; }
.spnav { display:block; }
.accordion-panel { padding:0 10px; }
.section-title { font-size:1.0rem; }
.ad-section { display:flex; overflow-x:auto; gap:15px; padding-bottom:15px; }
.ad-section img { width:60%; flex-shrink:0; }
.sokuhou-list-item { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:0; cursor:pointer; background:transparent; padding:5px 0px; min-height:60px; box-sizing:border-box; border-radius:0; box-shadow:none; border-bottom:1px solid #eee; }
.sokuhou-list-item.sokuhou-hidden { display:none; }
.sokuhou-list-item img { width:60px; height:45px; }
.sokuhou-list-text h4 { font-size:0.9rem; }
.sokuhou-list-text .desc-preview { white-space:normal; max-width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.sokuhou-list-text .desc-preview { white-space:normal; max-width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.latest-event-row { flex-direction:column; align-items:flex-start; gap:5px; }
.latest-event-row span { font-size:0.9em; color:#555; }
.modal-content { width:calc(100% - 20px); margin:85px auto; }
.modal-main-content { flex-direction:column; }
.modal-left { flex:auto; }
.modal-right { flex:auto; }
.modal-extra-imgs { display:flex; gap:10px; justify-content:center; }
.modal-extra-imgs img { max-width:150px; height:auto; }
.midokoro-img { width:100%; max-width:150px; height:auto; }
.midokoro-item { grid-template-columns:90px 1fr; margin-bottom:20px; }
.midokoro-exname { font-size:16px; }
.midokoro-booth-cell { width:auto; }
.midokoro-booth { text-align:center; }
.midokoro-img { width:100%; max-width:90px; height:auto; object-fit:cover; }
.midokoro-img-cell { align-self:start; }
.midokoro-comment-content { font-size: 13px; height: 62px; }
.midokoro-toggle-button { bottom:15px; }
footer { position: fixed; bottom: 0; padding: 5px 20px; left:0; right:0; width: 100%; box-sizing: border-box; }
footer .copyright { font-size: 0.4em; margin-top: 0; }
footer .menu { display:none; }
#footer-ad-rotator { display:block; }
#topButton { bottom:90px; right:10px; }
.main-content { margin-bottom: 110px; }
.sp-del { display:none; }
}
/* ▼▼▼ サブページ用の追加CSS (最終修正版) ▼▼▼ */
.main-content section#event-detail-section .section-title,.main-content section#event-list-section .section-title { border-left-color:#800000; }
.subsection-title { font-size:1.4rem; font-weight:bold; color:#333; border-bottom:2px solid #800000; padding-bottom:8px; margin-top:25px; margin-bottom:15px; width: 100%; }
.subsection-title2 { font-size:1.4rem; font-weight:bold; color:#333; border-bottom:2px solid #800000; padding-bottom:8px; margin-top:25px; margin-bottom:15px; width: 100%; }
.subsection-title2 span { color:#800000; font-weight: 900; margin-right: 10px; font-size: 28px; }
.popout_exhibitor-subsection-title { width:90%; margin:0 auto; font-size:1.4rem; font-weight:bold; color:#333; border-bottom:2px solid #800000; padding-bottom:8px; margin-top:25px; margin-bottom:15px; }
.popout_exhibitor-subsection-title .description { font-size:12px; }
.event-overview-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
.event-overview-table th,.event-overview-table td { border:1px solid #ddd; padding:12px; text-align:left; }
.event-overview-table th { background-color:#f9f9f9; width:25%; font-weight:bold; }
.description { line-height:1.6; color:#555; margin-bottom:5px; font-size: 16px; }
.subsection-block { display: flex; align-items: baseline; gap:20px; }
.exhibitor-grid { display:grid; grid-template-columns:repeat(5,calc(20% - 9.6px)); gap:12px; margin-bottom: 20px; }
.popout_exhibitor-grid { width:90%; margin:10px auto; }
.exhibitor-card { border:1px solid #e0e0e0; border-radius:8px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.05); background-color:#fff; cursor:pointer; position:relative; }
.exhibitor-card:hover { z-index:10; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.exhibitor-card .image-wrapper { width:100%; padding-top:75%; position:relative; background-color:#f5f5f5; overflow:visible; }
.exhibitor-card .image-wrapper img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:8px 8px 0 0; }
.exhibitor-card:hover .image-wrapper img { box-shadow:0 8px 24px rgba(0,0,0,0.3); background-color:#fff; }
.exhibitor-card p { margin:0; padding:10px; font-size:0.9rem; font-weight:bold; color:#333; text-align:left; }
.exhibitor-card p .hidden-info { color:#fff; background-color:#fff; font-size:0.7rem; display:block; user-select:all; cursor:default; }
.exhibitor-card p .hidden-info::selection { color:#000; background-color:#d4d4d4; }
.modal-body-content { display:flex; gap:20px; }
.modal-text-column { flex:1; min-width:0; }
.modal-event-title { font-size:1rem; color:#777; margin-bottom:5px; }
.modal-exhibitor-title { font-size:1.8rem; font-weight:bold; color:#333; margin-bottom:20px; }
.modal-description { line-height:1.7; margin-bottom:25px; }
.modal-description .hashtags { font-size:0.9rem; color:#007bff; word-break:break-all; }
.modal-info-table { width:100%; border-collapse:collapse; font-size:0.9rem; margin-top:15px; }
.modal-info-table th,.modal-info-table td { border:1px solid #ddd; padding:10px; text-align:left; }
.modal-info-table th { background-color:#f9f9f9; width:30%; font-weight:bold; }
.lightbox { display:none; position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.85); align-items:center; justify-content:center; }
.lightbox-content { max-width:95%; max-height:90%; object-fit:contain; }
.lightbox-close { position:absolute; top:15px; right:35px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer; transition:0.3s; }
.lightbox-close:hover { color:#bbb; }
/* ★★★ ここからがモーダル内画像の拡大効果に関する最終修正箇所です ★★★ */
.modal-left { position:relative; cursor:zoom-in; overflow:visible; }
.modal-left img { width:100%; display:block; margin-bottom:10px; border-radius:5px; pointer-events:none; transform:scale(1.0); transition:all 0.3s ease; }
.modal-left:hover img { transform:scale(1.8); box-shadow:0 16px 32px rgba(0,0,0,0.4); z-index:100; position:relative; }
.modal-images-column { flex:0 0 160px; display:flex; flex-direction:column; gap:10px; }
.modal-images-column img { width:100%; border:1px solid #ddd; border-radius:4px; transform:scale(1.0); transition:all 0.3s ease; }
.modal-images-column img:hover { transform:scale(1.8); box-shadow:0 16px 32px rgba(0,0,0,0.4); z-index:100; position:relative; cursor:zoom-in; }
.modal-extra-imgs img { max-width:150px; height:auto; max-height:112.5px; border-radius:5px; transform:scale(1.0); transition:all 0.3s ease; }
.modal-extra-imgs img:hover { transform:scale(1.8); box-shadow:0 16px 32px rgba(0,0,0,0.4); z-index:100; position:relative; cursor:zoom-in; }
.modal-extra-imgs { display:flex; gap:10px; justify-content:center; margin-top:15px; flex-wrap:wrap; font-size: 0; }
@media (max-width: 1200px) { .exhibitor-grid { grid-template-columns:repeat(4,1fr); gap:15px; } }
@media (max-width: 900px) { .exhibitor-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 768px) {
.event-overview-table th { width:auto; }
.event-overview-table tr { display:flex; flex-direction:column; border-bottom:1px solid #ddd; margin-bottom:10px; padding-bottom:10px; }
.event-overview-table td { border:none; padding:4px 0; }
.exhibitor-grid { grid-template-columns:repeat(2,1fr); gap:2px; }
.exhibitor-card:hover .image-wrapper img { box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.modal-body-content { flex-direction:column; }
.modal-images-column { flex-direction:row; flex-wrap:wrap; flex-basis:auto; }
.modal-extra-imgs { display:flex; gap:10px; justify-content:center; }
.modal-extra-imgs img { max-width:120px; height:auto; }
}
/* ★★★ 最終修正されたレイアウトのための追記スタイル ★★★ */
.modal-main-content { display:block; overflow:visible; }
.modal-image-with-text { overflow:visible; display:flex; flex-wrap:wrap; gap:20px; margin-bottom:20px; }
.booth-and-image { width:250px; flex-shrink:0; margin-right:20px; overflow:visible; }
.modal-booth-number { background-color:#003366; color:white; padding:8px 5px; text-align:center; font-weight:bold; border-radius:5px 5px 0 0; }
.booth-and-image img { width:100%; height:auto; border:1px solid #ddd; border-radius:0 0 5px 5px; transform:scale(1.0); transition:all 0.3s ease; }
.booth-and-image img:hover { transform:scale(1.8); box-shadow:0 16px 32px rgba(0,0,0,0.4); z-index:100; position:relative; }
.modal-right { display:block; flex:auto; }
.modal-header-info h3 { display:inline-block; margin-bottom:0; }
.modal-right p { line-height:1.8; }
.modal-info-table { margin-top:15px; }
/* --- レイアウト問題を解決するための確定版スタイル（1行形式） --- */
.modal-image-with-text { display: flex; flex-direction: row; align-items: flex-start; gap: 0px; margin-bottom: 20px; }
.booth-and-image { width: 250px; flex-shrink: 0; }
.modal-right { flex: 1; }
@media (max-width: 768px) {
.modal-image-with-text { display:block; margin-bottom:0; }
.booth-and-image { float:none; width:100%; margin-right:0; margin-bottom:15px; overflow:hidden; }
.booth-and-image img:hover { transform:scale(1.0); box-shadow:none; }
.modal-booth-number { border-radius:5px; }
.modal-right { flex:none; }
.modal-right hr { display:none; }
.modal-info-table { margin-top:0; }
}
/* ★★★ iframeモーダル用のスタイルを追加 ★★★ */
.modal-content.iframe-modal { width: 90vw; height: 90%; max-width: none; padding: 5px; margin: 5vh auto; }
.modal-content.iframe-modal .modal-body { height: calc(100% - 2px); padding: 0; }
.modal-content.iframe-modal .modal-close { top: 8px; right: -50px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); z-index: 1001; font-size: 60px; background-color: #800000; width: 50px; height:50px; display: flex; justify-content: center; align-items: center; border-radius: 10px; }
@media screen and (max-width: 768px) { .modal-content.iframe-modal .modal-close { top: -28px; right: -16px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); z-index: 1001; font-size: 40px; width: 40px; height: 40px; } }
/* keylogoに取材件数のコピーを追加 */
.keylogo_copy_container h1 { text-align: center; color: #fff; font-size: 32px; line-height: 140%; font-family: Meiryo; text-shadow: 2px 2px 5px rgb(0, 0, 0); }
.keylogo_copy_container { width: 100%; z-index: 2; }
.keylogo_copy_2 { font-size: 32px; color: #b40b0b; }
@media screen and (max-width: 768px) {
.keylogo_copy_container h1.keylogo_copy_1 { font-size: 16px; }
.keylogo_copy_container h1.keylogo_copy_2 { font-size: 16px; }
#dotcom1 { letter-spacing: -5px; }
#dotcom2 { letter-spacing: -8px; }
#dotcom3 { letter-spacing: -5px; }
}
/* --- 追加ギャラリーのスタイル (レイアウト方式変更版) --- */
.photo-gallery-section { width: 100%; padding: 0px !important; box-shadow: none !important; border-radius: 0px; border: none !important; background: none; margin-top: 40px; }
#photo-gallery-section .gallery-container { overflow:hidden; position:relative; }
#photo-gallery-section .gallery-wrapper { display:flex; transition:transform 0.5s ease-in-out; height:auto; }
#photo-gallery-section .gallery-item { width:calc(100% / 3); flex-shrink:0; box-sizing:border-box; padding:0 8px; }
#photo-gallery-section .gallery-item img { width:100%; height:200px; object-fit:cover; display:block; border-radius:8px; }
#photo-gallery-section .gallery-controls { text-align:center; margin-top:15px; }
#photo-gallery-section .gallery-nav { background-color:#800000; color:white; border:none; padding:10px 20px; cursor:pointer; font-size:16px; margin:0 5px; border-radius:5px; transition:background-color 0.3s; }
#photo-gallery-section .gallery-nav:hover { background-color:#a04040; }
@media (max-width: 768px) {
#photo-gallery-section .gallery-item { width:100%; padding:0 4px; }
#photo-gallery-section .gallery-item img { height:220px; }
}
/* ▼▼▼【ここからフォーマット修正】▼▼▼ */
.topics-section { width: 100%; padding: 0px !important; box-shadow: none !important; border-radius: 0px; border: none !important; background: none; margin-top: 40px; margin-bottom: 40px;}
.topics-title { font-size: 20px; font-weight: bold; margin: 1rem 0; }
.topics-txt { line-height: 1.8; margin-bottom: 0.5rem; }
.topics-tyu { margin-top: 0.5rem; font-size: 14px; line-height: 1.5; }
.zoomed-clone { z-index: 9999; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); transition: transform 0.3s ease-in-out; transform: scale(1.0); }
.zoomed-clone.is-zoomed { transform: scale(1.7); }
@media screen and (min-width: 769px) { #photo-gallery-section .gallery-item img { } }
.exid-number{color:#f0f8ff;}
@media (max-width: 768px) {
.exid-number{display: none;}
}
*, *::before, *::after {
box-sizing: border-box;
}
@media (max-width: 768px){
#sp-menu .kensaku-container-sp form{margin-bottom: 20px;}
#sp-menu .kensaku-container-sp input[type="text"] ,#sp-menu .kensaku-container-sp button {background: #fff; padding: 8px; font-size: 18px;}
}
/*セミナー情報*/
.schedule-container { max-width: 1200px; margin: 2em auto; }
h1 { text-align: center; color: #0056b3; }
.responsive-table { width: 100%; border: 1px solid #dee2e6; border-radius: 8px; background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.05); overflow: hidden; }
.table-header { display: flex; font-weight: bold; background-color: #f1f3f5; border-bottom: 2px solid #dee2e6; }
.header-cell { padding: 12px 10px; text-align: left; border-right: 1px solid #dee2e6; }
.header-cell:last-child { border-right: none; }
.table-row { display: flex; border-bottom: 1px solid #e9ecef; }
.table-row:last-child { border-bottom: none; }
.table-row:hover { background-color: #f8f9fa; }
.table-cell { display: flex; align-items: center; border-right: 1px solid #e9ecef; font-size: 0.8rem;}
.table-cell:last-child { border-right: none; font-size: 0.7rem; padding: 5px;}
.col-venue { flex: 0 0 8%; }
.col-date { flex: 0 0 10%; }
.col-time { flex: 0 0 10%; }
.col-title { flex: 1 1 32%; font-weight: bold; font-size: 0.9rem; padding: 5px;}
.col-name { flex: 1 1 15%; font-size: 0.9rem; padding: 5px;}
.col-position { flex: 1 1 25%; }
.col-date, .col-time { justify-content: center; }
/* --- スマホ用レスポンシブ設定 (画面幅768px以下で適用) --- */
@media screen and (max-width: 768px) {
.table-header { display: none; }
.responsive-table { border: none; box-shadow: none; background-color: transparent; }
/* ▼▼▼ ここから下が新しいアプローチのコードです ▼▼▼ */
/* 1. table-rowを折り返し可能なフレックスボックスに変更 */
.table-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
border: 1px solid #dee2e6;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
padding: 3px ; /* 内側に余白を追加 */
}
/* 2. すべてのセルの共通スタイル */
.table-cell {
box-sizing: border-box;
display: flex;
justify-content: flex-start; /* 左寄せを基本に */
padding: 5px 0;
border-right: none; /* PC用の縦線を消す */
text-align: left;
}
.table-cell:last-child { border-bottom: none; }
.table-cell::before { display: none; } /* スマホではdata-labelの表示をなくす */
/* 3. 日付と時間のセルは幅を自動にし、横並びにする */
.table-row .col-date, .table-row .col-time {
width: auto;
}
.table-row .col-time {
justify-content: flex-end; /* 時間セルの中身は右寄せ */
}
/* 4. 残りのセルは幅100%にして、次の行に折り返す */
.table-row .col-title, .table-row .col-name, .table-row .col-position {
width: 100%;
flex-basis: 100%;
/*border-top: 1px solid #e9ecef; 上の行との区切り線 */
}
.col-date { flex: 0 0 30%; font-size: 0.9rem;}
.col-time { flex: 0 0 30%; font-size: 0.9rem;}
}
.midokoro-content-wrapper{display: flex;}
.midokoro-content-wrapper{width: 100%;}
.footer-copy{display: flex; justify-content: center; gap:10px; align-items: flex-end;}
.tokusyu-kotira{text-align: center; font-size: 0.8em; margin: 10px auto;}
.tokusyu-kotira a{color: #0056b3; text-decoration: underline;}
@media screen and (max-width: 768px) {
.tokusyu-kotira{font-size: 0.4em; margin-top: 10px;}
}
/* 記事コンテンツがない場合のモーダル調整 */
.modal-image-with-text.no-contents {
display: block;
}
.modal-image-with-text.no-contents .booth-and-image {
width: auto;
display: inline-block;
margin-right: 15px;
margin-bottom: 0px;
vertical-align: middle;
}
.modal-image-with-text.no-contents .modal-booth-number {
border-radius: 5px;
padding: 4px 10px;
}
.modal-image-with-text.no-contents .modal-text-column {
display: inline-block;
vertical-align: middle;
}
.modal-image-with-text.no-contents .modal-exhibitor-title {
margin-bottom: 0px;
font-size: 1.5rem;
}
/* SNS Links & Entry UI */
.modal-sns-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sns-link { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 4px; color: #fff !important; font-size: 14px; font-weight: bold; transition: opacity 0.2s; }
.sns-icon { width: 1.1em; height: 1.1em; fill: currentColor; }
.sns-link:hover { opacity: 0.8; text-decoration: none; }
.x-link { background-color: #000; }
.instagram-link { background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); }
.note-link { background-color: #2cb696; }
.note-icon { font-weight: 900; }
.modal-sns-entry { display: flex; flex-direction: column; gap: 15px; padding: 10px 0; }
.entry-row { display: flex; flex-direction: column; gap: 5px; }
.entry-row label { font-size: 12px; font-weight: bold; color: #666; }
.entry-row input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; font-size: 14px; box-sizing: border-box; }
.save-btn { background-color: #800000; color: #fff; border: none; padding: 12px; border-radius: 4px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; margin-top: 5px; }
.save-btn:hover { background-color: #a00000; }
@media (max-width: 768px) {
.modal-sns-links { justify-content: flex-start; }
.sns-link { font-size: 12px; padding: 4px 8px; }
}