@charset "UTF-8"; /* ================================================================== LUS 20261004 杉原杏璃氏 × 菅原和彦氏 Figma: PC_杉原さん_LP v2 (node 4087:945 / 1920 x 6468) ------------------------------------------------------------------ デザイン基準幅 1920px / インナー 1280px・1312px・1440px・882px PC専用（SPデザイン未提供のため min-width で横スクロール） ================================================================== */ :root { --sug-main: #0074af; --sug-main-copy: #0078c1; --sug-head-blue: #258ebe; --sug-light-blue: #63afdb; --sug-gold1: #c9970a; --sug-gold2: #d4ab00; --sug-gold3: #f4d873; --sug-gold4: #b38a3b; --sug-gold-em: #c89742; --sug-text: #333333; --sug-text-blue: #072030; --sug-white: #ffffff; --sug-bg-pale: #f6f9fc; --sug-bg-yellow: #fff8e6; --sug-bg-green: #d0e8ea; --sug-shadow: #bed8e3; --sug-hr: #9ac6da; } /* ============================== Base ============================== */ .sug-page, .sug-page *, .sug-page *::before, .sug-page *::after { box-sizing: border-box; } .sug-page { display: block; width: 100%; min-width: 1200px; overflow: hidden; background: var(--sug-white); color: var(--sug-text); font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* テーマ側の em{font-size:13px} で強調（色付き）文字だけ小さくなるのを打ち消す */ .sug-page em { font-size: inherit; line-height: inherit; font-style: normal; } .sug-page img { display: block; max-width: none; height: auto; } /* -------------------------------------------------------------- デザイン基準幅 1920px を画面幅に比例させる（常に同じ見た目を保つ） --sug-zoom は のスクリプトが (画面幅 / 1920) を設定する。 zoom はレイアウト自体を拡縮するので、.sug-lp の内側は常に ちょうど 1920px 幅として解決される＝Figmaの座標がそのまま使える。 JS が無効な場合は zoom:1（＝1920px 固定）にフォールバック。 -------------------------------------------------------------- */ .sug-lp { zoom: var(--sug-zoom, 1); } /* :where() でリセットの詳細度を 0 にし、下のコンポーネント定義が必ず勝つようにする */ .sug-page :where(h1, h2, h3, p, ul, ol, li, table, figure) { margin: 0; padding: 0; } .sug-page :where(li) { list-style: none; } .sug-page em { font-style: normal; } .sug-page a { color: inherit; } .u-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 共通セクション見出し（ABOUT SEMINAR / SPEAKERS / …） */ .sec-head { text-align: center; } .sec-head__en { display: flex; align-items: center; justify-content: center; gap: 6.5px; font-family: "EB Garamond", Garamond, "Times New Roman", serif; font-weight: 400; font-size: 20px; letter-spacing: 1px; line-height: 1.15; color: var(--sug-main-copy); } .sec-head__en--ja { font-family: "Zen Old Mincho", serif; font-weight: 500; font-size: 18px; letter-spacing: 0.9px; color: var(--sug-white); } .sec-head__line { flex: 0 0 31px; width: 31px; height: 3px; } /* ============================== 表示アニメーション ============================== */ /* FV：読み込み後にゆっくり表示 */ .fv__header-img, .fv__card img, .fv__band-inner img, .fv__sp img, .fv__deco { opacity: 0; transition: opacity 1.4s ease; } .sug-page.is-fv-ready .fv__header-img, .sug-page.is-fv-ready .fv__card img, .sug-page.is-fv-ready .fv__band-inner img, .sug-page.is-fv-ready .fv__sp img, .sug-page.is-fv-ready .fv__deco { opacity: 1; } /* 「会場先着30名」バッジ：FVのあとに下から浮かび上がる */ .sug-page .fv__badge { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease 1s, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1s; } .sug-page.is-fv-ready .fv__badge { opacity: 1; transform: none; } /* スクロール表示（下から上へふわっと） */ .sug-page .js-anim { opacity: 0; transform: translateY(32px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } .sug-page .js-anim.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fv__header-img, .fv__card img, .fv__band-inner img, .fv__sp img, .fv__deco, .sug-page .fv__badge, .sug-page .js-anim { opacity: 1; transform: none; transition: none; } } /* ============================== FV ============================== */ #fv.fv { position: relative; z-index: 2; /* 帯からはみ出す菅原氏の円（Ellipse 83）を ABOUT の上に描く */ width: 100%; height: 867px; background: var(--sug-white); /* overflow は切らない。円が帯の上下（FVインナー / ABOUT）へはみ出して まるごと丸く見えるようにする。横方向は .sug-page 側で clip される。 */ overflow: visible; } .fv__deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .fv__pill { position: absolute; width: 271px; height: 60px; margin: -30px 0 0 -135.5px; border: 3px solid #def2fc; border-radius: 31px; transform: rotate(-45deg); } .fv__pill--l1 { left: calc(50% - 960px + 25.026px); top: 334.026px; } .fv__pill--l2 { left: calc(50% - 960px - 12.974px); top: 467.026px; } .fv__pill--r1 { left: calc(50% - 960px + 1898.026px); top: 415.026px; } .fv__pill--r2 { left: calc(50% - 960px + 1884.026px); top: 527.026px; } .fv__dot { position: absolute; border-radius: 50%; background: #e3f5fd; } .fv__dot--l { left: calc(50% - 960px + 42px); top: 548px; width: 31px; height: 31px; } .fv__dot--r { left: calc(50% - 960px + 1841px); top: 269px; width: 29px; height: 29px; } .fv__header { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 20; line-height: 0; } .fv__header img { width: 1920px; height: 142px; } .fv__card { position: absolute; top: 92px; left: calc(50% - 692px); z-index: 5; line-height: 0; } .fv__card img { width: 1411.5px; height: 769px; } /* SP専用のリボン（PCでは非表示。PC版は .about__ribbon を使用） .sug-page img { display: block } より詳細度を上げる必要がある */ .sug-page .about__ribbon-sp { display: none; } /* SP専用の改行（PCでは無効） */ .u-sp-br { display: none; } /* SP版 FVの画像（PCでは非表示。767px 以下で差し替え） */ .fv__sp { display: none; } .fv__band { position: absolute; top: 719px; left: 0; right: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: center; height: 148px; background: var(--sug-main); } .fv__band-inner { position: relative; width: 1920px; height: 148px; } /* 帯の書き出しは上下に 10px ずつはみ出す（菅原氏の写真）ため -10px 補正 */ .fv__band-inner > img { position: absolute; top: -10px; left: 0; width: 1920px; height: 168px; } .fv__band-cta { position: absolute; top: 14px; left: 1568px; z-index: 2; display: block; width: 120px; height: 120px; border-radius: 50%; transition: background-color 0.25s ease; } .fv__band-cta:hover { background-color: rgba(255, 255, 255, 0.14); } /* ============================== ABOUT SEMINAR ============================== */ .about { position: relative; z-index: 1; /* FV から下へはみ出す円より背面に置く */ background: var(--sug-bg-pale); overflow: hidden; } .about__inner { position: relative; width: 1280px; margin: 0 auto; padding: 112px 0 148px; } .about .sec-head { width: 621px; margin: 0 auto; } .about__title { position: relative; width: 488px; margin: 12px auto 0; font-family: "Zen Old Mincho", serif; font-weight: 600; line-height: 0.786; color: var(--sug-text); white-space: nowrap; } .about__title-wave { position: absolute; left: 200px; top: 62px; width: 124px; height: 12.5px; } .about__title-lg { font-size: 34px; letter-spacing: 1.7px; } .about__title-md { font-size: 28px; letter-spacing: 1.4px; } .about__title-comma { font-size: 34px; letter-spacing: -12.24px; } .about__title-em { font-size: 42px; font-weight: 900; letter-spacing: 2.1px; color: var(--sug-main-copy); } .about__title-em2 { font-size: 42px; font-weight: 900; letter-spacing: -1.68px; color: var(--sug-main-copy); } .about__title-ji { font-size: 34px; letter-spacing: -2.72px; } .about__title-ya { font-size: 34px; letter-spacing: -3.06px; } .about__title-tail { font-size: 34px; letter-spacing: 1.7px; } .about__content { width: 1180px; margin: 60px auto 0; } .about__points { display: flex; align-items: stretch; justify-content: center; gap: 16px; } .about__point { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 28px 4px 18px; background: var(--sug-white); border-radius: 4px; } .about__point-icon { flex: 0 0 64px; width: 64px; height: 64px; } .about__point-icon img { width: 64px; height: 64px; } .about__point-label { font-family: "Zen Old Mincho", serif; font-weight: 500; font-size: 20px; line-height: 40px; color: var(--sug-text); white-space: nowrap; } .about__lead { margin-top: 36px; padding: 48px; background: var(--sug-bg-yellow); border-radius: 16px; box-shadow: 8px 8px 0 0 var(--sug-shadow); } .about__lead p { font-size: 18px; line-height: 1.8; color: var(--sug-text); } .about__lead p:first-child { min-height: 80px; } .about__lead p + p { margin-top: 8px; } .about__lead em { font-weight: 500; color: var(--sug-gold-em); } .about__ribbon { position: absolute; left: calc(50% - 960px + 1236.3px); top: 147.65px; z-index: 3; width: 257.972px; height: 59.413px; transform: rotate(5.7deg); } /* スクロール表示の前後でリボンの角度を維持する */ .sug-page .about__ribbon.js-anim { transform: translateY(32px) rotate(5.7deg); } .sug-page .about__ribbon.js-anim.is-in { transform: translateY(0) rotate(5.7deg); } /* 追従サイドCTA：FV通過後にスライドインし、申し込みフォームが見えたら退避する */ .sug-side-cta { position: fixed; right: 0; top: 50%; z-index: 90; display: block; transform: translate(100%, -50%); transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.3s ease; pointer-events: none; } .sug-side-cta.is-visible { transform: translate(0, -50%); pointer-events: auto; } .sug-side-cta__pc { display: block; width: 90px; height: 273px; } /* SP用のラベル（PCでは非表示） */ .sug-page .sug-side-cta__sp { display: none; } .sug-side-cta:hover { filter: brightness(1.05); } /* ============================== SPEAKERS ============================== */ .speakers { position: relative; background: var(--sug-bg-green); overflow: hidden; } .speakers__inner { position: relative; width: 1312px; margin: 0 auto; padding: 112px 0 140px; } .speakers__deco-pie { position: absolute; left: -183.5px; top: -17px; width: 208.968px; height: 198.579px; } .speakers__deco-stripe { position: absolute; left: 1356px; top: 36px; width: 160px; height: 152px; } .speakers__dot { position: absolute; border-radius: 50%; } .speakers__dot--a { left: 610px; top: 12px; width: 29px; height: 29px; background: #bfdfe2; } .speakers__dot--b { left: -53px; top: -7px; width: 48px; height: 48px; border: 5px solid #e5f2f4; } .speakers__dot--c { left: 579px; top: 64px; width: 16px; height: 16px; background: #e5f2f4; } .speakers__dot--d { left: 1405px; top: 987px; width: 62px; height: 62px; background: #daedf0; } .speakers__dot--e { left: -84px; top: 1161px; width: 39px; height: 39px; background: #bee0e3; } .sec-head--speakers { position: relative; width: 447px; margin: 0 auto; } .speakers__title { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 12px; font-family: "Zen Old Mincho", serif; font-weight: 600; line-height: 0.804; color: var(--sug-text); white-space: nowrap; } .speakers__title-part { display: inline-block; } .speakers__title-ja { font-size: 34px; letter-spacing: 2.3478px; } .speakers__title-num { font-family: "Zen Old Mincho", serif; font-weight: 400; font-size: 46px; letter-spacing: 2.3px; color: var(--sug-gold1); } .speakers__title-cross { flex: 0 0 28px; width: 28px; height: 28px; /* 行ボックス下端ではなく文字の視覚的な中心に合わせる（Figma: 漢字インク中心と同位置） */ margin-bottom: 23px; } .speakers__sub { margin-top: 12px; font-family: "Zen Old Mincho", serif; font-weight: 400; font-size: 16px; letter-spacing: 0.32px; line-height: 1.44; color: var(--sug-text); } .speakers__sub-open { letter-spacing: 2.88px; } .speakers__sub-dot { letter-spacing: -5.76px; } .speakers__cards { position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; margin-top: 60px; } .prof { display: flex; flex-direction: column; gap: 24px; padding: 44px 36px; background: var(--sug-white); border-radius: 16px; box-shadow: 4px 4px 0 0 var(--sug-shadow); } .prof--sugihara { width: 612px; } .prof--sugawara { width: 620px; height: 605px; } .speakers__cross { flex: 0 0 40px; width: 40px; height: 40px; } .prof__top { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--sug-hr); } .prof--sugawara .prof__top { gap: 16px; } .prof__photo { position: relative; flex: 0 0 224px; width: 224px; } .prof--sugawara .prof__photo { flex: 0 0 226px; width: 226px; } .prof__photo-img { width: 224px; height: 316px; object-fit: cover; } .prof--sugawara .prof__photo-img { width: 226px; height: 316px; } .prof__sign { position: absolute; } .prof__sign--anri { left: 130px; top: 283px; width: 41.923px; height: 32.096px; } .prof__sign--sugihara { left: 151.96px; top: 286px; width: 84.034px; height: 43.004px; } .prof__sign--kazuhiko { left: 103px; top: 278px; width: 76.291px; height: 54px; } .prof__sign--sugawara { left: 142px; top: 282px; width: 95.322px; height: 49.661px; } .prof__info { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .prof__label { padding: 4px 16px 6px; background: var(--sug-main); border-radius: 14px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 16px; line-height: 1; color: var(--sug-white); white-space: nowrap; } /* ラベルと名前は「名前部」として gap 12 でまとまる */ .prof__label + .prof__name-wrap { margin-top: -8px; } .prof__name-wrap { display: flex; flex-direction: column; gap: 4px; } .prof__name { font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 32px; line-height: 1; color: var(--sug-text); } .prof__name span { font-size: 24px; } .prof__role { font-size: 15px; line-height: normal; color: var(--sug-text); } .prof__facts { width: 100%; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--sug-shadow); border-radius: 8px; } .prof__facts--tight { gap: 16px; } .prof__fact { position: relative; display: flex; align-items: center; gap: 8px; } .prof__check { flex: 0 0 24px; width: 24px; height: 24px; } .prof__fact-text { position: relative; font-size: 16px; line-height: normal; color: var(--sug-text); white-space: nowrap; } /* 特徴リストの下線：文字に紐づけて引く（折り返しても文字に追従する） */ .prof__u, .prof__u-sp { /* テーマ側の span{line-height:1.8} で行が広がるのを防ぐ */ line-height: inherit; } .prof__u { background: linear-gradient(var(--sug-gold1), var(--sug-gold1)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; } .prof__desc { font-size: 16px; line-height: 1.8; color: var(--sug-text); } .prof__desc em { font-weight: 500; color: var(--sug-head-blue); } .speakers__comment { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 60px; padding-top: 24px; } .speakers__comment-box { position: relative; width: 870px; padding: 32px; background: var(--sug-white); border-radius: 17px; } .speakers__comment-box::before { content: ""; position: absolute; left: 50%; top: -32px; margin-left: -22.5px; width: 0; height: 0; border-left: 22.5px solid transparent; border-right: 22.5px solid transparent; border-bottom: 39px solid var(--sug-white); } .speakers__comment-inner { display: flex; align-items: center; gap: 15px; padding-left: 17px; border-left: 8px solid var(--sug-light-blue); } /* コメント枠の見出し（テキストはSPのみ表示。PCはアイコンのみ） */ .speakers__comment-label { display: contents; } .sug-page .speakers__comment-label span { display: none; } .speakers__comment-icon { flex: 0 0 54px; width: 54px; height: 49px; } .speakers__comment-inner p { font-size: 16px; line-height: 1.8; color: var(--sug-text); white-space: nowrap; } .speakers__comment-inner em { font-weight: 500; color: var(--sug-gold-em); } /* ============================== Divider ============================== */ .lp-divider { width: 100%; background: var(--sug-white); line-height: 0; } .lp-divider img { width: 100%; height: 60px; } /* ============================== BENEFITS ============================== */ .benefits { background: var(--sug-white); } .benefits__inner { width: 1280px; margin: 0 auto; padding: 160px 0; } .benefits__box { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 60px 0 80px; background: var(--sug-bg-yellow); border-radius: 16px; box-shadow: 8px 8px 0 0 var(--sug-shadow); } .benefits__title { margin-top: 12px; font-family: "Zen Old Mincho", serif; font-weight: 600; line-height: 0.79; color: var(--sug-text); white-space: nowrap; } .benefits__title-ja { font-size: 34px; letter-spacing: 1.7px; } .benefits__title-num { font-weight: 500; font-size: 48px; letter-spacing: 2.4px; color: var(--sug-gold1); } .benefits__cards { display: flex; align-items: flex-start; gap: 28px; } .benefit { display: flex; flex-direction: column; gap: 24px; width: 360px; padding: 40px 28px; background: var(--sug-white); border-radius: 16px; } .benefit__head { position: relative; display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--sug-head-blue); } .benefit__no { position: absolute; left: 0; top: -12px; padding-bottom: 5px; font-family: "EB Garamond", Garamond, serif; font-weight: 400; font-size: 48px; line-height: normal; color: var(--sug-main-copy); } .benefit__no::after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -12px; width: 24px; height: 1px; background: var(--sug-main-copy); } .benefit__icon { display: flex; align-items: center; justify-content: center; width: 304px; } .benefit__icon img { width: 124px; height: 127px; } .benefit__lead { font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 24px; letter-spacing: 1.2px; line-height: normal; text-align: center; color: var(--sug-text); } .benefit__text { font-size: 16px; letter-spacing: 0.8px; line-height: 1.6; color: var(--sug-text); } .benefit__text em { font-weight: 500; color: var(--sug-gold-em); } /* ============================== PROGRAM & 申し込み ============================== */ .program { position: relative; width: 100%; background: var(--sug-head-blue); border-radius: 48px; overflow: hidden; } .program__blob { position: absolute; z-index: 0; } .program__blob--lt { left: 0; top: 0; width: 413px; height: 354px; } .program__blob--rb { right: -61px; top: 731px; width: 594px; height: 479px; } .program__inner { position: relative; z-index: 1; width: 1280px; margin: 0 auto; padding: 120px 0 160px; } .program__stripe { position: absolute; left: 1224px; top: 222px; width: 160px; height: 152px; opacity: 0.351; } .program__deco { position: absolute; left: -208px; top: 927px; width: 82px; height: 82px; } .sec-head--program { position: relative; display: flex; flex-direction: column; align-items: center; } .program__dot { position: absolute; left: -36px; top: -11px; width: 21px; height: 21px; border-radius: 50%; background: rgba(255, 255, 255, 0.09); } .program__title { margin-top: 12px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 36px; letter-spacing: 1.8px; line-height: 0.83; color: var(--sug-white); white-space: nowrap; } .program__title-amp { font-size: 34px; } .program__rule { display: block; width: 64px; height: 1.5px; margin-top: 48px; background: var(--sug-gold3); border-radius: 1px; } .program__content { display: flex; align-items: flex-start; justify-content: space-between; width: 1280px; margin-top: 88px; } .program__timeline { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; width: 507.005px; } .program__timeline-head { display: flex; align-items: center; gap: 9px; width: 100%; } .program__clock { flex: 0 0 46px; width: 46px; height: 46px; } .program__timeline-ja { font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 32px; line-height: normal; color: var(--sug-gold3); } .program__timeline-en { margin-right: 8px; font-family: "EB Garamond", Garamond, serif; font-weight: 600; font-size: 22px; line-height: normal; color: var(--sug-white); } .program__timeline-rule { flex: 1 1 0; min-width: 0; height: 1px; background: var(--sug-white); } .program__list { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; } .program__list::before { content: ""; position: absolute; left: 124px; top: 9px; width: 1px; height: 409px; background: var(--sug-white); } .program__item { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; } .program__time { flex: 0 0 84px; width: 84px; font-family: "Zen Old Mincho", serif; font-weight: 500; font-size: 32px; line-height: 1; color: var(--sug-gold3); } .program__item--center .program__time { text-align: center; } .program__item:last-child .program__time { flex: 0 0 auto; width: auto; } .program__marker { flex: 0 0 49.005px; width: 49.005px; height: 49.005px; } .program__body { display: flex; flex-direction: column; gap: 6px; } .program__label { font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: 3.12px; color: var(--sug-white); white-space: nowrap; } .program__label + .program__label { margin-top: -2px; } .program__note { font-size: 20px; line-height: 1; color: var(--sug-white); white-space: nowrap; } .program__caution { font-size: 18px; line-height: normal; color: var(--sug-white); } /* --- お申し込みボックス --- */ .apply { position: relative; display: flex; flex-direction: column; align-items: center; gap: 52px; width: 635px; padding: 64px 48px 48px; background: var(--sug-white); border-radius: 16px; } .apply__ribbon { position: absolute; left: 50%; top: -21px; transform: translateX(-50%); width: 195px; height: 42.995px; } .apply__ribbon img { width: 195px; height: 42.995px; } .apply__ribbon-sp { display: none; } .apply__ribbon span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: 3.84px; text-indent: 3.84px; text-align: center; color: var(--sug-white); } .apply__prices { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 40px; width: 539px; } .apply__price { display: flex; align-items: flex-end; gap: 18px; } .apply__price + .apply__price { gap: 24px; } .apply__price-icon { flex: 0 0 68px; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; background: #ebf6ff; border: 0.895px solid #c2dcf0; border-radius: 50%; overflow: hidden; } .apply__price:first-child .apply__price-icon img { width: 33.906px; height: 46.015px; } .apply__price + .apply__price .apply__price-icon img { width: 38.004px; height: 33.643px; } .apply__price-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; } .apply__tag { display: flex; align-items: stretch; } .apply__tag-text { display: flex; align-items: center; justify-content: center; width: 132px; height: 28px; background: var(--sug-main); font-weight: 500; font-size: 20px; line-height: normal; color: var(--sug-white); white-space: nowrap; } .apply__tag-text--venue { letter-spacing: 6.8px; text-indent: 6.8px; } .apply__tag-text--online { letter-spacing: 1px; text-indent: 1px; } .apply__tag-tail { width: 18px; height: 28px; } .apply__amount { display: flex; align-items: flex-end; gap: 8px; } .apply__yen, .apply__seats { display: flex; align-items: flex-end; gap: 2.63px; line-height: 1; white-space: nowrap; } .apply__dash { flex: 0 0 24px; width: 24px; height: 38px; border-bottom: 2px dashed var(--sug-text); } .apply__yen b { font-family: "Zen Old Mincho", serif; font-weight: 400; font-size: 48px; line-height: 0.79; color: var(--sug-text); } .apply__unit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .apply__unit i { font-style: normal; font-size: 10px; line-height: 1; color: var(--sug-text); } .apply__unit i.apply__unit-big { font-size: 28px; } .apply__seats i { font-style: normal; font-size: 20px; line-height: 1; color: var(--sug-text); } .apply__seats b { font-family: "Zen Old Mincho", serif; font-weight: 400; font-size: 48px; line-height: 0.79; color: var(--sug-gold1); } .apply__cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: -8px; } .apply__micro { position: relative; z-index: 2; padding: 8px 17px; background: #fff6d9; border-radius: 7px; font-weight: 500; font-size: 16px; line-height: 1; color: var(--sug-text); } .apply__micro::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -7.5px; width: 0; height: 0; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-top: 16px solid #fff6d9; } .apply__cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 16px 80px; border-radius: 999px; background: linear-gradient(180deg, #f4d873 0%, #f3d050 58.978%, #f3ca37 100%); box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.1); font-weight: 400; font-size: 28px; letter-spacing: 1.4px; line-height: 1; color: #000; text-decoration: none; white-space: nowrap; transition: filter 0.25s ease, transform 0.25s ease; } .apply__cta img { width: 38px; height: 38px; } .apply__cta:hover { filter: brightness(1.06); transform: translateY(-2px); } .apply__notes { position: relative; width: 100%; padding-top: 24px; border-top: 1px solid #0e0e0e; } .apply__notes-list { padding-left: 22px; } .apply__notes-list li { list-style: disc; font-size: 15px; line-height: 1.8; color: var(--sug-text); } .apply__notes-title { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); display: flex; align-items: stretch; } .apply__notes-title span { display: flex; align-items: center; padding: 4px 20px 6px; background: var(--sug-bg-green); font-family: "Zen Old Mincho", serif; font-weight: 500; font-size: 16px; line-height: 1; color: var(--sug-text); white-space: nowrap; } .apply__notes-tail { width: 7.5px; height: 26px; } .apply__notes-tail:first-child { transform: scaleX(-1); } /* ============================== EVENT INFO（イベント情報） ============================== */ .info { background: var(--sug-white); } .info__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; width: 882px; margin: 0 auto; padding: 112px 0 148px; } .info__title { margin-top: 12px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 34px; letter-spacing: 1.7px; line-height: 0.824; color: var(--sug-text); } .info__content { display: flex; flex-direction: column; gap: 40px; width: 100%; } .info__table { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--sug-main); border-left: 1px solid var(--sug-main); border-right: 1px solid var(--sug-main); } .info__table th, .info__table td { vertical-align: middle; font-size: 16px; } .info__table th { width: 278px; padding: 20px 40px; background: var(--sug-main); border-bottom: 1px solid var(--sug-white); font-weight: 500; line-height: normal; text-align: center; color: var(--sug-white); } .info__table td { padding: 24px 32px; background: var(--sug-white); border-bottom: 1px solid var(--sug-main); line-height: 1.5; color: var(--sug-text); } .info__en { font-family: "EB Garamond", Garamond, serif; font-weight: 600; color: var(--sug-gold1); } /* 住所行（Figma PC: 4123:2918 / SP: 4124:17490） */ .info__address { font-size: 16px; line-height: 1.5; color: var(--sug-text); } .info__access { display: flex; align-items: center; gap: 4px; margin-top: 8px; } .info__access-icon { flex: 0 0 12px; width: 12px; height: 18px; background: url("img/icon_walk.svg") center / 12px 18px no-repeat; } .info__access-text { font-size: 14px; line-height: 1.5; color: var(--sug-text); } .info__access-sep { margin: 0 6px; } .info__map { margin-top: 16px; } .info__map a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .info__map-pin { flex: 0 0 15px; width: 15px; height: 20px; background-color: var(--sug-main); -webkit-mask: url("img/icon_map_pin.svg") center / contain no-repeat; mask: url("img/icon_map_pin.svg") center / contain no-repeat; transition: background-color 0.25s ease; } .info__map-text { padding-bottom: 4px; border-bottom: 1px solid var(--sug-main-copy); font-size: 16px; line-height: 1; color: var(--sug-main-copy); transition: color 0.25s ease, border-color 0.25s ease; } /* マウスオーバー：文字・下線・アイコンをゴールドに */ .info__map a:hover .info__map-text { color: var(--sug-gold2); border-bottom-color: var(--sug-gold2); } .info__map a:hover .info__map-pin, .info__map a:hover .info__map-ext { background-color: var(--sug-gold2); } .info__map-ext { flex: 0 0 12px; width: 12px; height: 12px; margin-left: 4px; background-color: var(--sug-main); -webkit-mask: url("img/icon_external.svg") center / contain no-repeat; mask: url("img/icon_external.svg") center / contain no-repeat; transition: background-color 0.25s ease; } .info__pdf { display: flex; align-items: center; gap: 12px; } /* アイコンは mask で描画し、文字色と一緒に色を変えられるようにする */ .info__pdf-icon { flex: 0 0 16.41px; width: 16.41px; height: 18.935px; background-color: var(--sug-main-copy); -webkit-mask: url("img/icon_pdf.svg") center / contain no-repeat; mask: url("img/icon_pdf.svg") center / contain no-repeat; transition: background-color 0.25s ease; } .info__pdf a { padding-bottom: 4px; border-bottom: 1px solid var(--sug-main-copy); font-size: 16px; line-height: 1; color: var(--sug-main-copy); text-decoration: none; transition: color 0.25s ease, border-color 0.25s ease; } /* マウスオーバー：文字・下線・アイコンをゴールドに（Figma 4124:11605） */ .info__pdf:hover .info__pdf-icon { background-color: var(--sug-gold2); } .info__pdf:hover a { color: var(--sug-gold2); border-bottom-color: var(--sug-gold2); } .info__note { font-size: 16px; line-height: 1.5; } .info__note-sub { margin-top: 8px; font-size: 12px; line-height: 1.5; color: #888; } .info__caution { display: flex; flex-direction: column; align-items: flex-start; } .info__caution-title { display: flex; align-items: stretch; } .info__caution-label { display: flex; align-items: center; gap: 4px; padding: 6px 18px 8px 16px; background: var(--sug-main); font-family: "Zen Old Mincho", serif; font-weight: 400; font-size: 16px; line-height: 1; color: var(--sug-white); white-space: nowrap; } .info__caution-label img { flex: 0 0 18px; width: 18px; height: 15px; } .info__caution-tail { width: 28px; height: 30px; } .info__caution-list { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 20px; background: var(--sug-white); border: 1px solid var(--sug-main); counter-reset: sug-num; } .info__caution-list li { position: relative; padding-left: 20px; font-size: 12px; line-height: 1.55; color: var(--sug-text); } .info__caution-list li::before { counter-increment: sug-num; content: counter(sug-num); position: absolute; left: 0; top: 2px; width: 15.709px; height: 15.709px; border-radius: 50%; background: var(--sug-main); font-family: "EB Garamond", Garamond, serif; font-weight: 400; font-size: 14px; line-height: 15.709px; text-align: center; color: var(--sug-white); } /* ============================== 共通パーツの微調整（venue2 / formArea / lineup） ============================== */ .sug-page #venue2, .sug-page #formArea, .sug-page #seminar-lineup { position: relative; z-index: 1; } .sug-page #formArea { padding-top: 20px; } /* ============================================================================== SP（〜767px） Figma: sp_杉原さん_LP (node 4124:16301 / 375px 基準) PC は 1920px のデザインを zoom で拡縮しているため、SP では zoom を解除して 通常の可変レイアウトに切り替える。 ============================================================================== */ @media screen and (max-width: 767px) { /* ---- 土台 ---- */ .sug-page { min-width: 0; font-size: 14px; } .sug-lp { zoom: 1; } /* ---- FV：PC版の合成（ヘッダー／カード／帯）を隠し、SP用の1枚画像に差し替え ---- */ #fv.fv { height: auto; overflow: hidden; } .fv__deco, .fv__header, .fv__card, .fv__band { display: none; } .fv__sp { display: block; margin: 0; line-height: 0; } .fv__sp img { width: 100%; height: auto; } /* ---- ABOUT SEMINAR ---- */ .about__inner { width: auto; padding: 36px 16px 40px; } .about .sec-head { width: auto; } /* ラベル行の高さをFigmaと同じ16pxに固定（既定の行間1.8だと間延びする） */ .about .sec-head__en, .about .sec-head__en span { line-height: 16px; } .about__ribbon { display: none; /* SPでは本文カードの中に別途表示する */ } .sec-head__en { gap: 4px; font-size: 12px; } /* テーマ側の span{line-height:1.8} でラベル行が伸びるのを防ぐ */ .sec-head__en span { line-height: 16px; } .sec-head__line { flex: 0 0 20px; width: 20px; height: 1px; } .about__title { width: 176px; margin: 6px auto 0; line-height: 22px; white-space: normal; } .u-sp-br { display: inline; } /* 各spanにも行送りを指定しないと既定の1.8が効いて2行目が下がる */ .about__title-lg, .about__title-md, .about__title-comma, .about__title-em, .about__title-em2, .about__title-ji, .about__title-ya, .about__title-tail { line-height: 22px; } .about__title-lg, .about__title-comma, .about__title-ji, .about__title-ya, .about__title-tail { font-size: 20px; letter-spacing: 1px; } .about__title-md { font-size: 17px; letter-spacing: 0.8px; } .about__title-em, .about__title-em2 { font-size: 24px; } .about__title-wave { left: 0; top: 48px; width: 74px; height: 5.81px; } .about__content { width: auto; margin-top: 12px; } /* 3つの特徴：アイコン上・ラベル下の3カラム、間に区切り線 */ .about__points { gap: 0; align-items: flex-start; } .about__point { position: relative; flex: 1; flex-direction: column; gap: 0; padding: 0 6px; background: none; border-radius: 0; } /* 区切り線はFigma同様アイコンと同じ36pxだけ */ .about__point + .about__point::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 36px; margin-top: -18px; background: #cfd8dc; } .about__point-icon, .about__point-icon img { flex: 0 0 36px; width: 36px; height: 36px; } .about__point-label { font-size: 14px; line-height: 16.8px; text-align: center; white-space: normal; } /* Figmaの折り返し位置に合わせて各ラベルの幅を固定 */ .about__point--1 .about__point-label { width: 56px; } .about__point--2 .about__point-label { width: 70px; } .about__point--3 .about__point-label { width: 62px; } /* 本文カード（特別トークセッションのリボン付き） */ .about__content { position: relative; } /* 特別トークセッションのリボン（Figma SP: Group 997 / 199x28） */ .sug-page .about__ribbon-sp { display: flex; align-items: center; justify-content: center; width: 199px; height: 28px; margin: 0 auto 8px; background: url("img/sp_ribbon_talk.svg") center / 199px 28px no-repeat; } /* PC用の min-height がリボンの

に効いて余白が開くのを打ち消す */ .about__lead p:first-child { min-height: 0; } .about__ribbon-sp span { font-family: "Zen Old Mincho", serif; font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: -1.4px; color: var(--sug-white); white-space: nowrap; } .about__lead { margin-top: 20px; padding: 16px; border-radius: 8px; } .about__lead p { font-size: 16px; line-height: 29px; letter-spacing: 0; } .about__lead p + p { margin-top: 8px; } /* ---- SPEAKERS（プロフィール） ---- */ .speakers__inner { width: auto; padding: 36px 16px 40px; } .speakers__deco-pie { left: -33px; top: 44px; width: 65px; height: 62px; } .speakers__deco-stripe { left: auto; right: -17px; top: -9px; width: 64px; height: 60px; } .speakers__dot { display: none; } /* 見出し（Figma: 4124:17133）。ラベル→タイトル→説明文を8pxずつ空けて中央寄せ */ .speakers .sec-head { width: auto; text-align: center; } .speakers .sec-head__en, .speakers .sec-head__en span { line-height: 16px; } .speakers__title { width: auto; justify-content: center; align-items: flex-end; gap: 4px; /* Figmaは text-box-trim で行送りを詰めているため、実装側は上余白を差し引く */ margin-top: 1px; line-height: 1.12; } .speakers__title-part { display: inline-flex; align-items: flex-end; } .speakers__title-ja { font-size: 20px; line-height: 1.12; letter-spacing: 2.35px; } .speakers__title-num { font-size: 28px; line-height: 1.12; letter-spacing: 2.35px; } .speakers__title-cross { flex: 0 0 16px; width: 16px; height: 16px; margin-bottom: 5px; } .speakers__sub { margin-top: 2px; font-size: 14px; line-height: 20px; text-align: center; white-space: normal; } /* Figma SP版では鉤括弧なし */ .speakers__sub-open, .speakers__sub-close { display: none; } .speakers__cards { flex-direction: column; gap: 16px; margin-top: 24px; } .speakers__cross { flex: 0 0 28px; width: 28px; height: 28px; margin: 0 auto; } .prof, .prof--sugihara, .prof--sugawara { width: auto; /* PCは .prof--sugawara に height:605px が入っているため、SPでは解除しないと 説明文がカードからはみ出してコメント枠と重なる */ height: auto; flex-direction: column; gap: 0; padding: 24px 16px 24px; border-radius: 8px; text-align: left; } .prof__top, .prof--sugawara .prof__top { padding-bottom: 20px; } /* Figma SP の並び：肩書ラベル → 氏名 → 役職 → 写真 → 特徴リスト */ .prof__top, .prof--sugawara .prof__top { flex-direction: column; align-items: stretch; gap: 0; } .prof__info { display: contents; } .prof__label { order: 1; align-self: flex-start; } .prof__label + .prof__name-wrap { order: 2; margin-top: 12px; } /* Figma: 名前と肩書の下端から写真まで余白をとる */ .prof__photo, .prof--sugawara .prof__photo { order: 3; } .prof__facts { order: 4; flex: 0 0 auto; margin-top: 20px; } /* Figma SP(4124:17148): ラベル16px / 氏名28px(「氏」18px) / 肩書15px ラベル・肩書はPCの指定と同値なので上書きしない */ .prof__name { font-size: 28px; line-height: 28px; } /* テーマ側の span{line-height:1.8} を打ち消して行送りを28pxに揃える */ .prof__name span { font-size: 18px; line-height: 1; } .prof__role { line-height: 22px; } .prof__check { flex: 0 0 20px; width: 20px; height: 20px; } .prof__fact-text { font-size: 14px; line-height: 20px; white-space: normal; } /* SPはPCの改行位置ではなく自然折り返し（Figma 4124:17174 / 4124:17224） */ .prof__fact-text br { display: none; } /* 菅原①のみ下線の範囲がPC（〜企業オーナー）とSP（〜を中心）で異なる */ .prof__u-sp { background: linear-gradient(var(--sug-gold1), var(--sug-gold1)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; } .prof__facts--tight { gap: 12px; } /* 菅原カードは上部ボックスの間隔が16px */ .sug-page .prof--sugawara .prof__photo { margin-top: 16px; } .sug-page .prof--sugawara .prof__facts { margin-top: 16px; } .prof__photo, .prof--sugawara .prof__photo { flex: 0 0 auto; width: 212px; height: 298.71px; margin: 20px auto 0; } .prof__photo-img, .prof--sugawara .prof__photo-img { width: 212px; height: 298.71px; } /* 筆記体サイン：SPデザインの座標に合わせる */ .prof__sign--anri { left: 117px; top: 261px; } .prof__sign--sugihara { left: 138.96px; top: 264px; } .prof__sign--kazuhiko { left: 89.5px; top: 255.29px; } .prof__sign--sugawara { left: 128.5px; top: 259.29px; } .prof__desc { /* 上部ボックスの下余白は .prof__top の padding-bottom で確保している */ margin-top: 0; font-size: 16px; line-height: 1.8; text-align: left; } .speakers__comment { margin-top: 24px; padding-top: 16px; } .speakers__comment-box { width: auto; padding: 16px; border-radius: 8px; } .speakers__comment-inner { flex-direction: column; gap: 0; /* SPデザインでは左のアクセントバーは無く、見出しを中央に置く */ padding-left: 0; border-left: 0; } .sug-page .speakers__comment-icon { flex: 0 0 39px; width: 39px; height: 35px; } .speakers__comment-inner p { font-size: 16px; line-height: 1.8; text-align: left; white-space: normal; } /* 見出し「本セクションのポイント」はSPのみ表示 */ .speakers__comment-label { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 8px; } .sug-page .speakers__comment-label span { display: inline; font-family: "Zen Old Mincho", serif; font-size: 16px; font-weight: 600; line-height: 1.8; white-space: nowrap; } .speakers__comment-label::before, .speakers__comment-label::after { content: ""; flex: 1 1 0; height: 1px; background: var(--sug-hr); } /* ---- BENEFITS（メリット）Figma: 4124:17296 ---- コンテンツラップ（全幅・クリーム・角丸8px・影）の中に白カード3枚。 */ /* ディバイダー Figma 4124:17292 は SP では高さ24px */ .lp-divider img { height: 24px; } .benefits__inner { width: auto; padding: 36px 0 40px; } .benefits__box { width: auto; gap: 24px; padding: 36px 16px; border-radius: 8px; box-shadow: 4px 4px 0 0 var(--sug-shadow); } .benefits__title { /* Figma はテキストボックスをトリムしているため行送りの余りを差し引く */ margin-top: 1px; line-height: 1.12; white-space: normal; } /* テーマ側の span{line-height:1.8} を打ち消す（Figma は leading 1.12） */ .benefits__title-ja { font-size: 24px; letter-spacing: 1.2px; line-height: 26.88px; } .benefits__title-num { font-size: 36px; letter-spacing: 1.8px; line-height: 40.32px; } .benefits__cards { flex-direction: column; align-items: stretch; width: 100%; gap: 28px; margin-top: 0; } .benefit { width: auto; gap: 18px; padding: 24px 28px; } .benefit__head { gap: 8px; padding-bottom: 18px; } .benefit__icon { width: 100%; } .benefit__icon img { width: 124px; height: 127px; } .benefit__lead { font-size: 18px; letter-spacing: 0.9px; } .benefit__text { letter-spacing: 0.8px; } /* ---- PROGRAM（セミナープログラム）Figma: 4124:17366 ---- SPは全幅の青カード（角丸16px）。padding 36/16/40。 */ .program { border-radius: 16px; } .program__inner { width: auto; padding: 36px 16px 40px; } /* img は .sug-page img{display:block} に負けるので .sug-page を付ける */ .sug-page .program__blob, .sug-page .program__stripe, .sug-page .program__deco, .program__dot, .program__rule, .program__timeline-head { display: none; } /* 見出し：ラベル12px → 12px空けて タイトル24px */ .program .sec-head__en { gap: 8px; } .program .sec-head__en--ja { font-size: 12px; letter-spacing: 0.6px; line-height: 17px; } .program__title { /* Figma はテキストボックスをトリムしているぶん、行送りの余りを差し引く */ margin-top: 7px; font-size: 24px; letter-spacing: 1.2px; line-height: 27px; } .program__title-amp { font-size: 24px; line-height: 27px; } .program__content { flex-direction: column; align-items: stretch; width: auto; margin-top: 27px; gap: 32px; } .program__timeline { align-items: stretch; width: auto; gap: 16px; } .program__list { width: auto; gap: 28px; } /* 縦線は●の中心（左から10px）を通す */ .program__list::before { left: 10px; top: 12px; bottom: 12px; height: auto; } /* ●｜時刻｜内容 のグリッド。補足文は時刻の下から全幅で回り込む */ .program__item { display: grid; grid-template-columns: 20px auto 1fr; align-items: start; column-gap: 4px; row-gap: 0; width: 100%; } .program__item::before { content: ""; grid-column: 1; grid-row: 1; width: 20px; height: 20px; margin: 2px 4px -2px 0; border-radius: 50%; background: var(--sug-white); } .sug-page .program__marker { display: none; } .program__body { display: contents; } .program__time { grid-column: 2; grid-row: 1; flex: 0 0 auto; width: auto; font-size: 20px; line-height: 24px; } .program__item--center .program__time, .program__item:last-child .program__time { width: auto; text-align: left; } .program__label { grid-column: 3; font-size: 20px; letter-spacing: 1px; line-height: 24px; } .program__label + .program__label { margin-top: 0; } .program__note { grid-column: 2 / -1; margin-top: 4px; font-size: 14px; line-height: 14px; } /* 1行目（開場）は補足文があるぶん行送りを詰める */ .program__item:first-child .program__time, .program__item:first-child .program__label { line-height: 20px; } .program__caution { font-size: 14px; line-height: 20px; text-align: center; } /* 料金プランカード：白・角丸8px・padding 20/20/24 */ .apply { align-items: stretch; width: auto; gap: 20px; padding: 20px 20px 24px; border-radius: 8px; } .apply__ribbon { position: relative; left: auto; top: auto; transform: none; width: 158px; height: 32px; margin: 0 auto; } .apply__ribbon img { width: 158px; height: 32px; } .apply__ribbon .apply__ribbon-pc { display: none; } .apply__ribbon .apply__ribbon-sp { display: block; font-size: 18px; letter-spacing: 3.6px; text-indent: 3.6px; line-height: 18px; } .apply__prices { flex-direction: column; align-items: stretch; width: auto; gap: 24px; } .apply__price, .apply__price + .apply__price { align-items: flex-start; gap: 0; margin-left: 0; } /* SPデザインには丸アイコンがない */ .apply__price-icon { display: none; } .apply__price-body { min-width: 0; gap: 8px; } .apply__tag-text { width: 109px; height: 24.21px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-size: 16px; } .apply__tag-text--venue { letter-spacing: 2.56px; text-indent: 2.56px; } .apply__tag-text--online { letter-spacing: 0.8px; text-indent: 0.8px; } .sug-page .apply__tag-tail { width: 18px; height: 24.21px; } .apply__amount { gap: 6px; } .apply__yen, .apply__seats { gap: 2px; } .apply__yen b { font-size: 36px; } .apply__unit { gap: 4.5px; } .apply__unit i { font-size: 8px; line-height: 6px; } .apply__unit i.apply__unit-big { font-size: 20px; line-height: 14px; } .apply__seats i { font-size: 15px; } .apply__seats b { font-size: 36px; } .apply__price + .apply__price .apply__seats b { font-size: 38px; line-height: 28px; } .apply__dash { display: block; flex: 0 0 16px; width: 16px; height: 28.65px; border-bottom-style: dotted; } .apply__cta-wrap { width: 100%; margin-top: 4px; gap: 2px; } .apply__micro { padding: 8px 20px; font-size: 14px; } .apply__micro::after { bottom: -12px; margin-left: -7.5px; border-left-width: 7.5px; border-right-width: 7.5px; border-top-width: 16px; } .apply__cta { width: 100%; max-width: none; margin: 0; gap: 12px; padding: 12px 20px; font-size: 20px; letter-spacing: 1px; } .apply__cta img { width: 27px; height: 27px; } .apply__notes { width: auto; margin-top: 24px; padding-top: 28px; border-top-color: var(--sug-text); } .apply__notes-title { top: -13px; } .apply__notes-title span { padding: 4px 16px 6px; font-size: 16px; } .apply__notes-tail { width: 7.5px; height: 26px; } .apply__notes-list { padding-left: 21px; } .apply__notes-list li { font-size: 14px; line-height: 1.6; white-space: normal; } /* ---- EVENT INFO（開催概要）Figma: 4124:17474 ---- ラベルは104x28の青チップ、その下に罫線付きの内容ボックス（内側12px/8px）。 */ .info__inner { gap: 36px; width: auto; padding: 36px 16px 40px; } .info__title { margin-top: 11px; font-size: 24px; line-height: 1.12; } .info__content { gap: 32px; width: auto; } .info__table, .info__table tbody, .info__table tr, .info__table th, .info__table td { display: block; width: auto; } .info__table { border: 0; } .info__table tr + tr { margin-top: 16px; } .info__table tr:last-child { margin-top: 32px; } .info__table th { width: 104px; padding: 4px 0 8px; border-bottom: 0; font-size: 16px; line-height: 16px; text-align: center; } .info__table td { padding: 12px 8px; border-bottom: 0; border-top: 1px solid var(--sug-main); font-size: 16px; line-height: 24px; } .info__en { line-height: 24px; } .info__note { font-size: 16px; line-height: 24px; } .info__note-sub { margin-top: 4px; font-size: 12px; line-height: 24px; } /* 住所行：徒歩アイコンは丸背景、Googleマップはボタン（Figma 4124:17490） */ .sug-page .info__access-icon { flex: 0 0 24px; width: 24px; height: 24px; background: #ebf6ff url("img/icon_walk_sp.svg") center / 8px 16px no-repeat; border: 0.5px solid #c2dcf0; border-radius: 999px; } .info__access { gap: 8px; } .info__access-sep { display: none; } .info__map { display: flex; justify-content: center; margin-top: 0; padding-top: 12px; } .info__map a { padding: 12px 24px; border: 1px solid var(--sug-main); border-radius: 30px; } .info__map-text { padding-bottom: 0; border-bottom: 0; line-height: 1.5; color: #072030; } /* チラシは枠付きのボタン表示（Figma 4124:17516） */ .info__pdf { justify-content: center; width: 100%; height: 50px; margin: 0 auto; padding: 0 12px; border: 1px solid var(--sug-main); border-radius: 999px; white-space: nowrap; } .info__pdf a { padding-bottom: 0; border-bottom: 0; line-height: 24px; } .info__pdf a::after { content: "↗"; margin-left: 10px; font-size: 14px; } .info__caution { width: auto; padding: 20px 16px; } .info__caution-label { font-size: 13px; } .info__caution-list li { font-size: 11px; line-height: 1.9; } /* ---- 追従CTA：SPでは画面下部中央のボタンにする ---- */ .sug-side-cta { top: auto; right: auto; left: 50%; bottom: 20px; width: min(84vw, 303px); transform: translate(-50%, calc(100% + 20px)); } .sug-side-cta.is-visible { transform: translate(-50%, 0); } /* .sug-page img { display: block } より詳細度を上げる */ .sug-page .sug-side-cta__pc { display: none; } .sug-page .sug-side-cta__sp { display: flex; align-items: center; justify-content: center; gap: 12px; height: 51px; padding: 0 16px; border-radius: 999px; background: linear-gradient(180deg, #f4d873 0%, #f3d050 58.978%, #f3ca37 100%); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 18px; letter-spacing: 0.9px; line-height: 1; color: #000; white-space: nowrap; } .sug-page .sug-side-cta__sp img { width: 26px; height: 26px; } }