/* ---------------------------------------------------- IIFES2025 Movies Page 専用スタイル（Excelデザイン準拠）対象： ---------------------------------------------------- */ .page-movies .container{ width: min(1100px, 92%); margin-inline: auto; } /* Accessibility */ .page-movies .sr-only{ position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* =============== Hero（既存背景を活かす） =============== */ .page-movies .hero--movies{ background: radial-gradient(1200px 420px at 0% 0%, rgba(0,80,180,.28), rgba(0,36,96,.18) 60%, transparent), #0b2a67 url('/assets/images/iifes/iifes-bg.png') right/cover no-repeat; color: #fff; } .page-movies .hero--movies .hero__inner{ display: grid; grid-template-columns: 1fr; gap: 18px; padding: clamp(28px, 6vw, 56px) 0; } .page-movies .hero--movies .hero__title{ font-size: clamp(22px, 4.6vw, 40px); margin: 0 0 8px; font-weight: 800; } .page-movies .hero--movies .hero__lead{ margin: 0; opacity: .95; line-height: 1.8; } /* =============== 共通：見出しバー（Excelのグレー帯） =============== */ .page-movies .section-bar{ display: block; width: fit-content; max-width: 100%; margin: 22px auto 12px; padding: 10px 22px; background: #6b6b6b; color: #fff; font-weight: 800; letter-spacing: .06em; text-align: center; } .page-movies .section-bar--light{ background: #8b8b8b; } /* 大きめ見出しバー（「当日会場の様子」「出展製品・ソリューション」用） */ .page-movies .section-bar--lg{ width: min(560px, 100%); padding: 16px 26px; font-size: 18px; letter-spacing: .08em; } @media (max-width: 420px){ .page-movies .section-bar--lg{ padding: 14px 16px; font-size: 16px; } } /* =============== お礼メッセージ（赤枠） =============== */ .page-movies .thanks{ padding-top: 18px; } .page-movies .thanks__text{ margin: 0; padding: 16px 14px; border: 1px solid #e15656; color: #b52020; background: #fff7f7; text-align: center; line-height: 1.9; font-weight: 700; } /* =============== 動画埋め込み（16:9） =============== */ .page-movies .video-embed{ aspect-ratio: 16 / 9; background: #000; border: 1px solid #cfd6df; overflow: hidden; } .page-movies .video-embed iframe{ width: 100%; height: 100%; border: 0; display: block; } /* 会場動画の枠（大きめ） */ .page-movies .venue{ padding-bottom: 10px; } .page-movies .venue__video{ border: 1px solid #9aa7b6; background: #fff; } /* 会場動画：大きすぎるので幅を制限（フィッシャー枠に近いサイズ） */ .page-movies .video-embed--venue{ max-width: 520px; margin-inline: auto; } @media (min-width: 720px){ .page-movies .video-embed--venue{ max-width: 420px; /* zone-grid右カラム相当 :contentReference[oaicite:4]{index=4} */ } } /* =============== ブロック（出展概要など） =============== */ .page-movies .expo{ padding: 10px 0 6px; } .page-movies .block{ margin: 0 0 18px; border: 1px solid #d7d7d7; background: #fff; } .page-movies .block__head{ margin: 0; padding: 10px 12px; background: #e9e9e9; font-weight: 900; letter-spacing: .04em; font-size: 18px; /* section-bar--lg と同等 */ line-height: 1.3; padding: 14px 16px; } @media (max-width: 420px){ .page-movies .block__head{ font-size: 16px; /* section-bar--lg（SP）と同等 */ padding: 12px 14px; } } .page-movies .block__body{ padding: 12px 14px 14px; } .page-movies .block__text{ margin: 0; line-height: 1.9; color: #222; font-size: 15px; } /* =============== Zone 共通 =============== */ .page-movies .zone{ margin: 0 0 18px; border: 1px solid #d7d7d7; background: #fff; } .page-movies .zone__intro{ padding: 12px 14px 6px; } .page-movies .zone__intro p{ margin: 0; line-height: 1.9; color: #222; font-size: 15px; } .page-movies .zone__logo{ display: flex; justify-content: center; padding: 10px 12px 6px; } .page-movies .zone__logo img{ max-width: min(520px, 100%); height: auto; } /* =============== レイアウト（左説明＋右動画） =============== */ .page-movies .zone-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; padding: 12px 14px 16px; align-items: stretch; /* 高さを揃える */ } /* 左右カラムを“同じ高さ”にし、子要素を伸ばす */ .page-movies .zone-grid__left, .page-movies .zone-grid__right{ display: flex; } .page-movies .point, .page-movies .video-box{ flex: 1; } /* POINT：動画上端に揃える */ .page-movies .point{ margin-top: 0; /* 8px → 0 */ display: flex; flex-direction: column; } /* POINT（既存の見た目は維持） */ .page-movies .point__badge{ display: inline-block; padding: 6px 10px; font-weight: 900; color: #fff; letter-spacing: .08em; } .page-movies .point__list{ margin: 10px 0 0; padding: 0; list-style: none; } .page-movies .point__list li{ margin: 8px 0; padding: 8px 10px; border: 1px solid #d7d7d7; background: #f7f7f7; line-height: 1.7; } /* 見出し＋副文（HTMLをこの構造に変えた場合に効く） */ .page-movies .point__list li p{ margin: 0; } .page-movies .point-item__title{ font-weight: 900; font-size: 15px; line-height: 1.5; } .page-movies .point-item__text{ margin-top: 4px; font-size: 13px; line-height: 1.8; color: #222; } /* 色分け（Excelっぽく） */ .page-movies .point__badge--green{ background: #2f6d2f; } .page-movies .point__badge--blue{ background: #0b5ea8; } .page-movies .point__badge--red{ background: #b02a2a; } .page-movies .point__list--green li{ background: #eef6ee; } .page-movies .point__list--blue li{ background: #eef6ff; } .page-movies .point__list--red li{ background: #fff0f0; } /* 右側：動画＋ボタン */ .page-movies .video-box{ border: 1px solid #9aa7b6; padding: 12px; background: #fff; } .page-movies .video-box__label{ margin: 10px 0 0; text-align: center; font-weight: 900; } /* 右側：動画＋ボタン（かっこよく） */ .page-movies .catalog-btn{ /* 色は modifier（--green/--blue/--red）で入れる */ --btn: #2f6d2f; display: block; width: min(280px, 100%); margin: 12px auto 0; padding: 12px 16px; text-align: center; font-weight: 900; font-size: 16px; letter-spacing: .06em; text-decoration: none; color: #fff; background: var(--btn); border: 1px solid rgba(0,0,0,.08); border-radius: 10px; box-shadow: 0 10px 18px rgba(0,0,0,.14); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } /* 2つ目以降のボタン（PDFの下に製品ページを置く時の間隔） */ .page-movies .video-box .catalog-btn + .catalog-btn{ margin-top: 10px; } /* ホバー/アクティブ */ .page-movies .catalog-btn:hover{ transform: translateY(-1px); filter: brightness(.98); box-shadow: 0 14px 24px rgba(0,0,0,.18); } .page-movies .catalog-btn:active{ transform: translateY(0); box-shadow: 0 10px 18px rgba(0,0,0,.14); } /* キーボード操作の見やすさ */ .page-movies .catalog-btn:focus-visible{ outline: 3px solid rgba(0, 170, 255, .45); outline-offset: 3px; } /* 色（既存と同じ色味） */ .page-movies .catalog-btn--green{ --btn:#2f6d2f; } .page-movies .catalog-btn--blue{ --btn:#0b5ea8; } .page-movies .catalog-btn--red{ --btn:#b02a2a; } /* 製品ページ用：枠線ボタン（PDFの下に置く想定） */ .page-movies .catalog-btn--outline{ background: #fff; color: var(--btn); border: 2px solid var(--btn); box-shadow: none; } .page-movies .catalog-btn--outline:hover{ transform: translateY(-1px); filter: none; box-shadow: 0 10px 18px rgba(0,0,0,.10); } /* =============== 他の適用例（3本） =============== */ .page-movies .usecases{ padding: 0 14px 16px; } .page-movies .usecases__head{ margin: 0 0 10px; display: inline-block; padding: 6px 10px; background: #2f6d2f; color: #fff; font-weight: 900; letter-spacing: .06em; } .page-movies .usecases__grid{ display: grid; grid-template-columns: 1fr; gap: 12px; } .page-movies .usecase{ border: 1px solid #9aa7b6; background: #fff; } .page-movies .usecase__label{ margin: 0; padding: 10px 10px; font-weight: 900; text-align: center; } /* =============== 特設ページへ戻る（フッダー上のロゴボタン） =============== */ .page-movies .backto{ padding: 6px 0 6px; } .page-movies .backto__btn{ display: block; margin: 10px auto 0; border: 1px solid #9aa7b6; background: #fff; padding: 10px 14px; text-decoration: none; width: min(820px, 100%); } .page-movies .backto__btn img{ display: block; width: 100%; height: auto; } /* Contactのロゴリンク（既存を壊さない範囲で） */ .page-movies .contact__logoLink{ display: inline-block; } .page-movies .contact__logoLink:focus-visible{ outline: 3px solid rgba(0, 170, 255, .45); outline-offset: 3px; } /* =============== Responsive =============== */ @media (min-width: 720px){ .page-movies .hero--movies .hero__inner{ grid-template-columns: 1.1fr .9fr; } .page-movies .zone-grid{ grid-template-columns: 1fr 420px; } .page-movies .benefits{ grid-template-columns: repeat(3, 1fr); } .page-movies .usecases__grid{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 420px){ .page-movies .section-bar{ padding: 10px 14px; } } /* お礼（赤枠）と会場バーの間を確実に詰める：thanks/venue の余白を固定 */ .page-movies .thanks{ padding: 12px 0 6px; /* 上下の余白を明示（共通CSSの影響を受けにくく） */ } .page-movies .venue{ padding: 0 0 10px; /* 会場セクションの上余白を0に固定 */ } /* 会場バー自体の上marginを縮める（--lg の有無に依存しない） */ .page-movies .venue .section-bar{ margin: 6px auto 12px; /* 22px → 6px */ } /* 会場動画 → 出展製品バーの間に余白を追加 */ .page-movies .expo{ margin-top: 40px; /* セクション間の空白を確実に作る */ } /* SDAG：他の適用例（3本）を横並びに */ @media (min-width: 720px){ .page-movies .usecases__grid{ grid-template-columns: repeat(3, 1fr); } } /* AIカメラのロゴ画像をSDAGロゴ級に“大きく表示” */ .page-movies .zone--camera .zone__logo img{ width: min(520px, 100%); height: auto; } /* ========================================= おしゃれPOINT札（SDAG / AIカメラ / ソフトPLC）＋「他の適用例」共通 ========================================= */ /* 札本体（POINT / 他の適用例共通） */ .page-movies .point__badge, .page-movies .usecases__head{ --tag-bg: #2f6d2f; --cut: 16px; /* 斜めカット量 */ display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; white-space: nowrap; padding: 10px 40px; font-size: 16px; line-height: 1; font-weight: 900; font-style: italic; letter-spacing: .12em; color: #fff; background: var(--tag-bg); border-radius: 0; /* 左右どっちも斜め */ clip-path: polygon( var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100% ); box-shadow: 0 2px 0 rgba(0,0,0,.20); position: relative; } /* 表面の薄いハイライト */ .page-movies .point__badge::after, .page-movies .usecases__head::after{ content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.08); clip-path: inherit; pointer-events: none; } /* 色バリエーション */ .page-movies .point__badge--green{ --tag-bg:#2f6d2f; } .page-movies .point__badge--blue{ --tag-bg:#0b5ea8; } .page-movies .point__badge--red{ --tag-bg:#b02a2a; } /* 「他の適用例」も同じ札（緑） */ .page-movies .usecases__head{ --tag-bg:#2f6d2f; } /* どこかで width:100% 等が当たってても札が伸びないよう保険 */ .page-movies .point__badge, .page-movies .usecases__head{ min-width: 0 !important; } /* ========================================= フッター直前：特設ページブロックの調整 - バー（株式会社アイ・エル・シー特設ページ）を大きく - IIFESロゴ画像を大きすぎないサイズに ========================================= */ /* 「株式会社アイ・エル・シー　特設ページ」バーを大きく */ .page-movies .backto .section-bar--light{ width: min(560px, 100%); padding: 14px 26px; font-size: 18px; letter-spacing: .08em; } /* =============== 特設ページへ戻る（フッダー上のロゴボタン） =============== */ .page-movies .backto__btn{ display: block; margin: 10px auto 0; border: 1px solid #9aa7b6; background: #fff; padding: 10px 14px; text-decoration: none; /* ボタン自体の最大幅を少し小さく */ width: min(720px, 100%); } .page-movies .backto__btn img{ display: block; /* 画像は“ボタン幅いっぱい”にしない */ width: min(400px, 100%); height: auto; margin: 0 auto; /* 中央寄せ */ } /* 見出し（グレー帯）を枠の上端に密着させる */ .page-movies .block, .page-movies .zone{ padding-top: 10px !important; /* 共通CSSのpaddingを潰す */ } .page-movies .block__head{ margin-top: 0 !important; /* 念のため */ } /* カタログPDFの下の製品ページリンク */ .page-movies .catalog-link{ display: inline-block; margin-top: 10px; font-weight: 700; text-decoration: underline; } /* 出展概要だけ枠線なし・背景なしにする */ .page-movies .block--overview{ border: none; background: transparent; } /* 出展概要：テキスト＋ブース写真の2カラムレイアウト */ .page-movies .overview-layout{ display: grid; gap: 20px; } /* PC幅：テキスト7割 / 画像3割 */ @media (min-width: 960px){ .page-movies .overview-layout{ grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); align-items: flex-start; } } /* テキスト側：段落間の余白を少し詰める */ .page-movies .overview-layout__text .block__text{ margin-bottom: 12px; } /* 画像側：横幅いっぱいに表示しつつカード内に収める */ .page-movies .overview-layout__image{ margin: 0; } .page-movies .overview-layout__image img{ display: block; width: 100%; height: auto; } .page-movies .overview-layout__image figcaption{ margin-top: 4px; font-size: 12px; color: #555; text-align: center; } /* 他の適用例カードだけ、下に余白を作る（枠を下に広げる） */ .page-movies .usecase{ padding-bottom: 16px; } /* 他の適用例カード内のボタンだけ、上マージンを小さくして“近づける” */ .page-movies .usecase .catalog-btn{ margin-top: 6px; /* 12px → 6px */ } /* 他の適用例：右（三菱AI）だけ下に余白を追加 */ .page-movies .usecase--mitsuai{ padding-bottom: 32px; /* 16px→32px など好みで調整 */ } /* 他の適用例：ラベルを必ず2行分確保してボタン位置を揃える */ .page-movies .usecases__grid .usecase__label{ line-height: 1.6; min-height: calc(1.6em * 2); } /* 他の適用例：ラベルの行間を固定して、2行分の高さを確保 */ .page-movies .usecases__grid .usecase__label{ line-height: 1.6; min-height: calc(1.6em * 2); } /* 異常発熱監視（左）のボタンをさらに下げて右と揃える */ .page-movies .usecases__grid .usecase:first-child .catalog-btn{ margin-top: 22px; /* 6px→22px：まだズレるなら 26px / 30px に */ } .page-movies .usecases__grid .usecase:nth-child(2) .catalog-btn{ margin-top: 22px; }