/* ========================================================= UNIQ Member theme / by Center Light LLC ========================================================= */ :root{ --uq-primary:#ea8100; --uq-primary-dark:#c96e00; --uq-gold:#f0a92b; --uq-accent:#34527a; --uq-ink:#2b2b2b; --uq-sub:#6f6f6f; --uq-line:#e7e7e7; --uq-bg:#f4f4f2; --uq-header-h:64px; --uq-max:1180px; --uq-band-h:132px; --uq-serif:"Times New Roman",'Noto Serif JP',"YuMincho","Hiragino Mincho ProN",serif; --uq-sans:'Noto Sans JP',-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0;font-family:var(--uq-sans);color:var(--uq-ink); background:var(--uq-bg);line-height:1.85;font-size:15px;-webkit-font-smoothing:antialiased; word-break:break-word; } img{max-width:100%;height:auto;vertical-align:bottom;} a{color:var(--uq-primary);text-decoration:none;transition:color .2s ease,opacity .2s ease;} a:hover{color:var(--uq-primary-dark);} h1,h2,h3,h4{line-height:1.4;font-weight:700;} .uq-container{max-width:var(--uq-max);margin:0 auto;padding:0 20px;} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;} .skip-link{position:absolute;left:-9999px;} .skip-link:focus{left:8px;top:8px;z-index:1000;background:#fff;padding:8px 14px;border-radius:6px;} /* ---------- 本家調 浮いた角丸ヘッダー ---------- */ /* 浮いたヘッダーの上下に同じ余白を取り、メインビジュアルと密着しないようにします。 */ .site-header{position:sticky;top:0;z-index:100;padding:18px 20px;background:transparent;} .header-shell{ position:relative;width:100%;max-width:var(--uq-max);margin:0 auto;background:#fff; border-radius:46px;box-shadow:0 8px 30px rgba(0,0,0,.09); padding:12px 20px;display:flex;align-items:center;gap:12px; } .header-brand{flex:0 0 auto;} .site-brand{display:flex;align-items:center;gap:11px;text-decoration:none;} .site-brand .brand-mark{width:46px;height:36px;flex:0 0 auto;} .site-brand .brand-text{display:flex;flex-direction:column;line-height:1.05;} .site-brand .brand-name{font-weight:800;font-size:1.3rem;color:var(--uq-ink);letter-spacing:.01em;} .site-brand .brand-name em{font-style:normal;color:var(--uq-sub);font-weight:800;} .site-brand .brand-sub{font-size:.62rem;color:var(--uq-sub);letter-spacing:.16em;} .global-nav{flex:1 1 auto;min-width:0;} .global-nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:flex-end;align-items:center;} .global-nav>ul>li{position:relative;} .global-nav>ul>li>a{ display:block;padding:14px 8px;color:var(--uq-ink);font-weight:700;font-size:.82rem;letter-spacing:0;white-space:nowrap; } .global-nav>ul>li:hover>a, .global-nav>ul>li.current-menu-item>a, .global-nav>ul>li.current_page_item>a{color:var(--uq-primary);} /* standard dropdown */ .global-nav ul ul{ position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--uq-line);border-radius:12px; box-shadow:0 16px 36px rgba(0,0,0,.1);display:block;flex-direction:column;overflow:hidden; opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:70; } .global-nav>ul>li:hover>ul, .global-nav>ul>li:focus-within>ul{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);} .global-nav ul ul li a{display:block;padding:12px 18px;color:var(--uq-ink);font-size:.86rem;border-bottom:1px solid #f1f1f1;} .global-nav ul ul li a:hover{background:#fbf3e7;color:var(--uq-primary);} /* ドロップダウン(サービス)を持つ項目に、下向きの三角を添える */ .global-nav>ul>li.dropdown>a::after, .global-nav>ul>li.menu-item-has-children:not(.mega)>a::after{ content:"";display:inline-block;width:6px;height:6px;margin-left:7px;vertical-align:middle; border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:.2s; } .global-nav>ul>li.dropdown:hover>a::after{transform:rotate(225deg) translateY(0);} /* mega menu (item with .mega) : 浮いたヘッダーの下に全幅で展開 */ .global-nav>ul>li.mega{position:static;} .global-nav>ul>li.mega>.sub-menu{ left:0;right:0;width:100%;top:calc(100% + 14px);margin:0;background:#fff;border:0;border-radius:18px; box-shadow:0 20px 46px rgba(0,0,0,.13); display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:0; padding:26px 26px; } /* ヘッダーとメガメニューの隙間を透明ブリッジでつなぎ、マウス移動中に閉じないようにする */ .global-nav>ul>li.mega>.sub-menu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:22px;background:transparent;} /* プログラム項目にマウスがある間の当たり判定を、隙間の分だけ下へ広げる */ .global-nav>ul>li.mega>a::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:16px;background:transparent;} .global-nav>ul>li.mega>a{position:relative;} .global-nav>ul>li.mega>.sub-menu>li{flex:1 1 0;min-width:0;border:0;padding:0 16px;} .global-nav>ul>li.mega>.sub-menu>li + li{border-left:1px solid #f0f0f0;} .global-nav>ul>li.mega>.sub-menu>li>a{ color:var(--uq-primary);font-weight:700;font-size:.95rem;border-bottom:2px solid #f3e7d5;padding:0 0 10px;margin-bottom:8px; } .global-nav>ul>li.mega>.sub-menu>li>a:hover{background:transparent;} .global-nav>ul>li.mega .sub-menu ul{position:static;opacity:1;visibility:inherit;pointer-events:inherit;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;transition:none;overflow:visible;} .global-nav>ul>li.mega .sub-menu ul li a{padding:7px 0;border:0;font-size:.85rem;color:#444;} .global-nav>ul>li.mega .sub-menu ul li a:hover{color:var(--uq-primary);background:transparent;padding-left:4px;} /* header actions */ .header-actions{flex:0 0 auto;display:flex;align-items:center;gap:10px;} .btn-login{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:#1c1c1c;color:#fff;border-radius:30px;font-weight:700;font-size:.86rem;border:0;} .btn-login::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--uq-gold);display:inline-block;} .btn-login:hover{background:#000;color:#fff;} .header-search-toggle{width:42px;height:42px;border-radius:50%;background:#f3f3f3;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--uq-ink);} .header-search-toggle:hover{background:var(--uq-gold);color:#fff;} .header-search-toggle svg{width:18px;height:18px;} .header-search-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;width:min(420px,90vw);background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.12);padding:14px;z-index:80;} .header-search-panel.is-open{display:block;} .header-search-panel form{display:flex;gap:8px;} .header-search-panel input[type=search]{flex:1;padding:12px 16px;border:1px solid var(--uq-line);border-radius:24px;} .header-search-panel button{padding:12px 22px;background:#1c1c1c;color:#fff;border:0;border-radius:24px;font-weight:700;cursor:pointer;} /* mobile nav toggle */ .nav-toggle{display:none;} /* ---------- Hero ---------- */ .hero{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:#333;} .hero:not(.hero-brand)::before{content:"";position:absolute;inset:0;background:rgba(20,18,16,.32);z-index:1;} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;} .hero-inner{position:relative;z-index:2;max-width:820px;padding:60px 24px;} .hero-title{font-family:var(--uq-serif);font-size:2.6rem;font-weight:400;letter-spacing:.08em;margin:0 0 20px;text-shadow:0 2px 14px rgba(0,0,0,.4);} .hero-desc{font-size:.98rem;line-height:2.1;margin:0 auto 30px;max-width:640px;text-shadow:0 1px 8px rgba(0,0,0,.5);} .hero-btn{display:inline-block;padding:15px 46px;background:var(--uq-primary);color:#fff;font-weight:700;letter-spacing:.14em;border-radius:2px;font-size:.9rem;} .hero-btn:hover{background:var(--uq-primary-dark);color:#fff;} /* page banner (lower pages) */ /* パンくずの帯。下のタイトル帯とくっつけて見せるため、下の余白と境界線は最小限にします。 */ .page-hero{position:relative;background:var(--uq-bg);} .page-hero .uq-container{padding-top:20px;padding-bottom:10px;} .breadcrumb{font-size:.8rem;color:var(--uq-sub);} .breadcrumb a{color:var(--uq-sub);} .breadcrumb a:hover{color:var(--uq-primary);} .breadcrumb .sep{margin:0 8px;color:#bbb;} /* ---------- Layout: content + sidebar ---------- */ .site-main{--uq-main-top:44px;background:var(--uq-bg);padding:var(--uq-main-top) 0 60px;} /* ページの先頭が全幅のタイトル帯のときは、本文領域の上余白を無くしてパンくずに寄せます。 対象の判定はテーマ側(body の uq-has-band クラス)で行うため、確実に適用されます。 */ body.uq-has-band .site-main{--uq-main-top:0px;padding-top:0;} /* ページ側の外枠(.fw-page など)にも上の余白があるため、先頭の枠だけ上余白を無くします。 タイトル帯そのものが先頭に来る画面では、帯の内側の余白を残す必要があるため除外します。 */ body.uq-has-band .site-main > *:first-child:not(.uq-lms-hero){padding-top:0;} .site-main > .uq-lms-hero:first-child, .site-main > * > .uq-lms-hero:first-child{margin-top:calc(var(--uq-main-top) * -1 - 1px);} .main-grid{max-width:var(--uq-max);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;} .content-col{min-width:0;} .sidebar-col{min-width:0;} /* section heading with black icon block (like screenshots) */ .block-heading{display:flex;align-items:center;gap:0;margin:0 0 18px;background:#fff;border:1px solid var(--uq-line);} .block-heading .icon{width:52px;height:52px;background:#1c1c1c;color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .block-heading .icon svg{width:22px;height:22px;} .block-heading .label{padding:0 18px;font-size:1.05rem;font-weight:700;} /* section heading with orange left border (pages) */ .entry-heading{position:relative;font-size:1.3rem;padding:2px 0 2px 16px;border-left:5px solid var(--uq-primary);margin:0 0 22px;} /* ---------- Front: banners ---------- */ .front-banners{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;} .front-banner{display:block;position:relative;height:120px;border-radius:6px;overflow:hidden;background:#d9d9d9;border:1px solid var(--uq-line);} .front-banner .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease;} .front-banner:hover .bg{transform:scale(1.05);} .front-banner .cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 30px;background:linear-gradient(90deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.35) 100%);} .front-banner .cap span{color:#fff;font-weight:800;font-size:1.35rem;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:.03em;} .front-banner.placeholder{display:flex;align-items:center;justify-content:center;color:#888;font-weight:700;} .front-banner-ad{display:flex;align-items:center;justify-content:center;height:auto;min-height:120px;background:#fff;padding:8px;overflow:hidden;} .front-banner-ad img{max-width:100%;height:auto;display:block;} /* ---------- Front: blog cards ---------- */ .blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:14px;} .blog-card{background:#fff;border:1px solid var(--uq-line);border-radius:6px;overflow:hidden;} .blog-card a{color:inherit;display:block;} .blog-card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#ededed url('') center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:.8rem;} .blog-card .thumb img{width:100%;height:100%;object-fit:cover;} .blog-card .body{padding:12px 14px;} .blog-card .ttl{font-size:.92rem;font-weight:700;line-height:1.6;margin:0;} .blog-card:hover .ttl{color:var(--uq-primary);} /* talent band buttons */ .talent-bands{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 44px;} .talent-band{display:flex;align-items:center;justify-content:center;height:74px;background:var(--uq-accent);color:#fff;font-weight:700;border-radius:6px;letter-spacing:.03em;position:relative;overflow:hidden;text-decoration:none;} .talent-band:hover{color:#fff;filter:brightness(1.08);} .talent-band .tb-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease;} .talent-band:hover .tb-bg{transform:scale(1.05);} .talent-band .tb-label{position:relative;z-index:2;padding:0 14px;text-align:center;} .talent-band.has-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32);z-index:1;} .talent-band.has-bg .tb-label{text-shadow:0 2px 8px rgba(0,0,0,.5);} .talent-band.talent-ad{background:#fff;border:1px solid var(--uq-line);height:auto;min-height:74px;padding:8px;overflow:hidden;} .talent-band.talent-ad img{max-width:100%;height:auto;display:block;} /* schedule */ .schedule-embed{background:#fff;border:1px solid var(--uq-line);border-radius:6px;padding:14px;} .schedule-embed .gcal{position:relative;width:100%;padding-top:75%;} .schedule-embed .gcal iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} /* ---------- Article (single/page) ---------- */ .entry{background:#fff;border:1px solid var(--uq-line);border-radius:8px;padding:34px 38px;} .entry-title{font-size:1.5rem;margin:0 0 10px;} .entry-date{font-size:.8rem;color:var(--uq-primary);font-weight:700;letter-spacing:.05em;} .entry-content{margin-top:22px;font-size:.98rem;line-height:2.05;} .entry-content h2{font-size:1.3rem;border-left:5px solid var(--uq-primary);padding-left:14px;margin:2em 0 .8em;} .entry-content h3{font-size:1.12rem;border-bottom:2px solid var(--uq-line);padding-bottom:.3em;margin:1.8em 0 .7em;} .entry-content p{margin:0 0 1.4em;} .entry-content img{border-radius:6px;} .entry-content a{text-decoration:underline;} .entry-thumb{margin:0 0 24px;border-radius:8px;overflow:hidden;} .entry-thumb-locked{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;margin:0 0 24px;} /* posts list (blog index / archive) */ .post-list{display:flex;flex-direction:column;gap:16px;} .post-item{display:flex;gap:18px;background:#fff;border:1px solid var(--uq-line);border-radius:8px;overflow:hidden;} .post-item .thumb{flex:0 0 210px;background:#ededed;position:relative;min-height:140px;} .post-item .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .post-item .thumb .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:.8rem;} .post-item .body{padding:18px 20px;flex:1;min-width:0;} .post-item .date{font-size:.78rem;color:var(--uq-primary);font-weight:700;} .post-item .ttl{font-size:1.08rem;margin:6px 0 8px;} .post-item .ttl a{color:var(--uq-ink);} .post-item:hover .ttl a{color:var(--uq-primary);} .post-item .ex{font-size:.9rem;color:#555;margin:0;} .member-badge{display:inline-block;background:var(--uq-primary);color:#fff;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:3px;margin-right:6px;vertical-align:middle;} /* pagination */ .uq-pagination{display:flex;justify-content:center;gap:6px;margin:34px 0 0;flex-wrap:wrap;} .uq-pagination a,.uq-pagination span{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--uq-line);border-radius:6px;font-weight:700;color:var(--uq-ink);padding:0 8px;} .uq-pagination .current{background:var(--uq-primary);color:#fff;border-color:var(--uq-primary);} .uq-pagination a:hover{border-color:var(--uq-primary);color:var(--uq-primary);} /* ---------- Sidebar ---------- */ .widget{background:#fff;border:1px solid var(--uq-line);border-radius:8px;margin-bottom:20px;overflow:hidden;} .widget .widget-title,.widget h2.widget-title{display:flex;align-items:center;gap:0;margin:0;font-size:.98rem;border-bottom:1px solid var(--uq-line);} .widget .widget-title .wicon{width:44px;height:44px;background:#1c1c1c;color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .widget .widget-title .wtxt{padding:0 16px;} .widget .widget-inner{padding:16px 18px;} .widget ul{list-style:none;margin:0;padding:0;} .widget-categories li a{display:block;padding:11px 18px;border-bottom:1px solid #f1f1f1;color:var(--uq-ink);font-size:.9rem;} .widget-categories li:last-child a{border-bottom:0;} .widget-categories li a:hover{color:var(--uq-primary);padding-left:24px;background:#faf3e9;} .widget-recent .r-item{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid #f1f1f1;align-items:center;} .widget-recent .r-item:last-child{border-bottom:0;} .widget-recent .r-thumb{width:100px;height:68px;flex:0 0 auto;background:#e6e6e6;border-radius:6px;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:#999;overflow:hidden;position:relative;} .widget-recent .r-thumb img{width:100%;height:100%;object-fit:cover;} .widget-recent .r-ttl{font-size:.84rem;line-height:1.55;color:var(--uq-ink);} .widget-recent .r-item:hover .r-ttl{color:var(--uq-primary);} .widget-cta{border:0;} .widget-cta .cta-box{background:#7c7c7c;color:#fff;min-height:200px;display:flex;align-items:center;justify-content:center;font-weight:700;border-radius:8px;text-align:center;padding:20px;} .widget-banner img{display:block;border-radius:6px;} /* ---------- Footer ---------- */ .site-footer{position:relative;color:#eaeaea;background:#1b1b1b;} .footer-cols{position:relative;z-index:2;max-width:var(--uq-max);margin:0 auto;padding:56px 20px 30px;display:grid;grid-template-columns:1.2fr 1.4fr 1.2fr;gap:40px;} .footer-col h3{color:var(--uq-gold);font-size:.95rem;letter-spacing:.06em;margin:0 0 16px;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:10px;} .footer-col ul{list-style:none;margin:0;padding:0;column-gap:20px;} .footer-menu ul,.footer-cats ul{columns:2;} .footer-col li a{display:block;color:#cfcfcf;font-size:.84rem;padding:7px 0;} .footer-col li a:hover{color:var(--uq-primary);} .footer-recent .fr-item{display:flex;gap:10px;align-items:center;padding:8px 0;} .footer-recent .fr-thumb{position:relative;width:56px;height:42px;flex:0 0 auto;background:#333;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.55rem;color:#888;} .footer-recent .fr-thumb img{width:100%;height:100%;object-fit:cover;} .footer-recent .fr-ttl{font-size:.78rem;color:#cfcfcf;line-height:1.5;} /* フッター右カラムにウィジェットを置いた場合の表示(暗い背景に合わせる) */ .footer-recent .footer-widget{margin:0 0 22px;} .footer-recent .footer-widget:last-child{margin-bottom:0;} .footer-recent .footer-widget h3{color:var(--uq-gold);font-size:.95rem;letter-spacing:.06em;margin:0 0 16px;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:10px;} .footer-recent .footer-widget .widget-inner{display:block;} .footer-recent .footer-widget .r-item, .footer-recent .footer-widget .w-item{display:flex;gap:10px;align-items:center;padding:8px 0;text-decoration:none;} .footer-recent .footer-widget .r-thumb, .footer-recent .footer-widget .w-thumb{position:relative;width:56px;height:42px;flex:0 0 auto;background:#333;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:#888;} .footer-recent .footer-widget .r-thumb img, .footer-recent .footer-widget .w-thumb img{width:100%;height:100%;object-fit:cover;} .footer-recent .footer-widget .r-ttl, .footer-recent .footer-widget .w-ttl{font-size:.78rem;color:#cfcfcf;line-height:1.5;} .footer-recent .footer-widget a:hover .r-ttl, .footer-recent .footer-widget a:hover .w-ttl{color:var(--uq-primary);} .footer-recent .footer-widget p{color:#9a9a9a;font-size:.8rem;} .footer-recent .footer-widget .wicon{display:none;} .footer-brandbar{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.12);} .footer-brandbar .inner{max-width:var(--uq-max);margin:0 auto;padding:22px 20px;display:flex;align-items:center;justify-content:center;gap:16px;} .footer-brandbar .brand-name{font-weight:800;font-size:1.15rem;color:#fff;} .footer-brandbar .brand-name em{font-style:normal;color:#bdbdbd;} .footer-brandbar .brand-sub{font-size:.62rem;letter-spacing:.18em;color:#9a9a9a;} .footer-brandbar .tagline{font-size:.72rem;color:#8f8f8f;} .site-copyright{background:#141414;color:#8a8a8a;text-align:center;font-size:.74rem;padding:14px 10px;position:relative;z-index:2;} .site-copyright a{color:#b0b0b0;} .site-copyright a:hover{color:var(--uq-primary);} /* pagetop */ .pagetop{position:fixed;right:16px;bottom:16px;width:46px;height:46px;background:var(--uq-primary);color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.25s;z-index:80;} .pagetop.show{opacity:1;visibility:visible;} .pagetop:hover{background:var(--uq-primary-dark);color:#fff;} /* logo mark (inline svg brand) */ .brand-mark svg{width:100%;height:100%;display:block;} /* ロゴマーク(企業サイトと同じSVG)を画像として表示する場合 */ .brand-mark--logo img{width:100%;height:100%;display:block;object-fit:contain;} /* フッターのブランド帯でのマークの大きさ */ .footer-brandbar .brand-mark{width:120px;height:94px;flex:0 0 auto;} @media(max-width:640px){.footer-brandbar .brand-mark{width:84px;height:66px;}} /* ---------- Responsive ---------- */ @media(max-width:980px){ .main-grid{grid-template-columns:1fr;} .sidebar-col{margin-top:10px;} .footer-cols{grid-template-columns:1fr 1fr;} .footer-recent{grid-column:1 / -1;} } @media(max-width:860px){ .header-shell{flex-wrap:wrap;padding:12px 16px;border-radius:26px;gap:12px;} .header-brand{flex:1 1 auto;} .nav-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:#f3f3f3;border:0;border-radius:12px;cursor:pointer;order:3;} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:22px;height:2px;background:var(--uq-ink);position:relative;transition:.2s;} .nav-toggle span::before{content:"";position:absolute;top:-7px;} .nav-toggle span::after{content:"";position:absolute;top:7px;} .header-actions{order:2;} .global-nav{flex:1 1 100%;order:4;display:none;} .global-nav.is-open{display:block;} .global-nav ul{flex-direction:column;align-items:stretch;} .global-nav>ul>li>a{padding:14px 8px;border-bottom:1px solid var(--uq-line);} .global-nav ul ul,.global-nav>ul>li.mega>.sub-menu{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;box-shadow:none;border:0;border-radius:0;flex-direction:column;display:none;width:auto;padding:0;top:auto;} .global-nav>ul>li.mega .sub-menu ul{visibility:visible;pointer-events:auto;} .global-nav>ul>li.open>ul,.global-nav>ul>li.mega.open>.sub-menu{display:block;} .global-nav>ul>li.mega>.sub-menu>li{padding:0 8px;border-left:0;} .global-nav>ul>li.mega>.sub-menu>li + li{border-left:0;} .header-search-panel{right:8px;} .blog-cards{grid-template-columns:1fr 1fr;} .talent-bands{grid-template-columns:1fr;} } @media(max-width:560px){ .hero-title{font-size:1.9rem;} .blog-cards{grid-template-columns:1fr;} .footer-cols{grid-template-columns:1fr;} .footer-menu ul,.footer-cats ul{columns:2;} .post-item{flex-direction:column;} .post-item .thumb{flex:none;width:100%;min-height:180px;} .entry{padding:24px 18px;} .site-brand .brand-name{font-size:1.05rem;} .btn-login{padding:9px 18px;} } /* ========================================================== 会員プラン(会員について) 画像1.png 再現 ========================================================== */ .uq-plans{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;background:#fff;padding:58px 0 60px;} .uq-plans-inner{max-width:1160px;margin:0 auto;padding:0 30px;} .uq-plans-heading{text-align:center;font-size:1.5rem;line-height:1.6;margin:0 0 6px;} .uq-plans-sub{text-align:center;color:var(--uq-sub);font-size:.95rem;margin:0 0 34px;} .uq-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;} .uq-plan{position:relative;background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:30px 24px 26px;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(0,0,0,.04);} .uq-plan-bar{position:absolute;top:0;left:0;right:0;height:4px;border-radius:12px 12px 0 0;} .uq-plan.is-recommended{border:2px solid var(--plan);box-shadow:0 14px 34px rgba(30,125,90,.14);} .uq-plan-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#c9a227;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:6px 20px;border-radius:22px;white-space:nowrap;box-shadow:0 4px 12px rgba(201,162,39,.4);} .uq-plan-badge::before{content:"\1F451";margin-right:6px;} .uq-plan-head{text-align:center;padding-bottom:16px;border-bottom:1px dashed #e4e4e4;margin-bottom:16px;} .uq-plan-en{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;color:var(--uq-sub);} .uq-plan-name{display:block;font-size:1.05rem;font-weight:700;color:#333;margin:4px 0 12px;} .uq-plan-catch{font-size:1.5rem;font-weight:800;line-height:1.4;color:#1c1c1c;margin:0;letter-spacing:.02em;} .uq-plan-topnote{font-size:.72rem;color:var(--plan);font-weight:700;margin:8px 0 0;} .uq-plan-sublabel{font-size:.82rem;font-weight:700;color:var(--plan);margin:0 0 12px;padding-left:2px;} .uq-plan-features{list-style:none;margin:0;padding:0;} .uq-plan-features li{position:relative;padding:8px 0 8px 22px;font-size:.86rem;line-height:1.65;color:#3a3a3a;} .uq-plan-features li::before{content:"";position:absolute;left:3px;top:15px;width:8px;height:8px;border-radius:2px;background:var(--plan);transform:rotate(45deg);} .uq-plans-note{text-align:center;font-size:.76rem;color:var(--uq-sub);margin:26px 0 0;} @media(max-width:900px){ .uq-plans-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;} .uq-plan.is-recommended{order:-1;} } /* お知らせ一覧(ショートコード) */ .uq-news-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--uq-line);border-radius:8px;} .uq-news-item a{display:flex;gap:16px;align-items:baseline;padding:15px 20px;border-bottom:1px solid #f1f1f1;color:var(--uq-ink);} .uq-news-item:last-child a{border-bottom:0;} .uq-news-item a:hover{background:#faf3e9;} .uq-news-date{font-size:.8rem;color:var(--uq-primary);font-weight:700;flex:0 0 auto;} /* お知らせ・イベントの種類を示すラベル */ .uq-news-cat{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:64px; padding:3px 10px;border-radius:999px;background:var(--uq-primary);color:#fff; font-size:.7rem;font-weight:700;letter-spacing:.04em;line-height:1.5;} .uq-news-cat.is-event{background:#3f8ad8;} .uq-news-title{font-size:.95rem;} @media(max-width:560px){ .uq-news-item a{flex-wrap:wrap;gap:8px 12px;} .uq-news-title{flex:0 0 100%;} } /* メガメニュー: 先頭「カテゴリー」列を少し狭く */ .global-nav>ul>li.mega>.sub-menu>li:first-child{flex:0 0 170px;} .global-nav>ul>li.mega>.sub-menu>li:first-child ul li a{white-space:nowrap;} .global-nav>ul>li.mega>.sub-menu>li:first-child ul li a::after{content:" ›";color:var(--uq-primary);font-weight:700;} /* 固定ページ 1カラム */ .main-single{max-width:1040px;margin:0 auto;padding:0 20px;} .main-single .entry{padding:38px 44px;} @media(max-width:560px){ .main-single .entry{padding:24px 18px;} } /* ========================================================== 本家 UNIQ&UNIQ ブランド適用 ========================================================== */ /* ブランドリボンのヒーロー */ .hero-brand{position:relative;min-height:640px;background:#ffffff;display:flex;align-items:center;overflow:hidden;} /* 本家サイト(uniq-uniq.com)と同じ構図。マークが画面の左5%付近から右端まで広がり、上下は画面外で切れる */ .hero-brand .brand-ribbon{position:absolute;top:0;left:5%;right:0;bottom:0;z-index:0;} /* ロゴのマークを装飾に。マークの形の中を光の帯が流れる(reduced-motion では停止) */ .brand-mark-img{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:1;} .brand-mark-flow{position:absolute;inset:0;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 58%); background-size:260% 100%;background-repeat:no-repeat;mix-blend-mode:screen; animation:uq-mark-flow 3s linear infinite;} @keyframes uq-mark-flow{from{background-position:220% 0;}to{background-position:-60% 0;}} @media (prefers-reduced-motion:reduce){.brand-mark-flow{display:none;}} @media(max-width:1100px){.hero-brand .brand-ribbon{left:0;}} @media(max-width:860px){.hero-brand{min-height:520px;}.hero-brand .brand-ribbon{left:0;opacity:.42;}} .hero-brand-inner{position:relative;z-index:2;max-width:var(--uq-max);width:100%;margin:0 auto;padding:0 40px;text-align:left;} .hero-brand-eyebrow{font-family:var(--uq-sans);font-size:1.25rem;font-weight:500;color:#333;letter-spacing:.02em;margin:0 0 12px;} .hero-brand-eyebrow span{color:#1c1c1c;font-weight:400;} .hero-brand-title{font-size:2.9rem;font-weight:800;line-height:1.35;letter-spacing:.03em;color:#1c1c1c;margin:0 0 32px;} /* 黒ピル + オレンジのドット(本家の「会社概要」ボタン) */ .btn-pill{display:inline-flex;align-items:center;gap:14px;background:#1c1c1c;color:#fff;padding:11px 16px 11px 26px;border-radius:30px;font-size:.9rem;font-weight:700;text-decoration:none;transition:.2s;} .btn-pill:hover{background:#000;color:#fff;transform:translateY(-1px);} .btn-pill .dot{width:22px;height:22px;border-radius:50%;background:var(--uq-primary);display:inline-block;flex:0 0 auto;} @media(max-width:720px){ .hero-brand{min-height:440px;} .hero-brand .brand-ribbon{left:0;opacity:.35;} .hero-brand-title{font-size:1.75rem;} .hero-brand-eyebrow{font-size:1rem;} .hero-brand-inner{padding:0 22px;} } /* 英字アイブロウ見出し(本家のセクション見出し) */ .eyebrow{display:block;font-family:var(--uq-sans);font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--uq-gold);text-transform:uppercase;margin:0 0 6px;} /* 会社概要・特商法などの法定表記テーブル */ .legal-table{width:100%;border-collapse:collapse;background:#fff;margin:8px 0 10px;font-size:.93rem;} .legal-table th,.legal-table td{border-bottom:1px solid #ececec;padding:16px 18px;text-align:left;vertical-align:top;line-height:1.9;} .legal-table th{width:210px;font-weight:700;color:#333;background:#fafafa;white-space:nowrap;} .legal-table tr:first-child th,.legal-table tr:first-child td{border-top:1px solid #ececec;} @media(max-width:600px){ .legal-table th,.legal-table td{display:block;width:auto;border-bottom:0;padding:10px 14px;} .legal-table th{background:#fafafa;} .legal-table td{border-bottom:1px solid #ececec;padding-top:0;} } /* 会社概要の理念ブロック */ .company-block{margin:0 0 34px;} .company-block h2{font-size:1.5rem;margin:0 0 12px;} .company-block p{margin:0 0 1em;line-height:2;} /* 戻るボタン(黒ピル・中央) */ .back-to-top-btn{display:block;width:max-content;margin:34px auto 0;background:#1c1c1c;color:#fff;padding:14px 44px;border-radius:30px;font-weight:700;text-decoration:none;} .back-to-top-btn:hover{background:#000;color:#fff;} /* フッターの法的リンク行 */ /* お問い合わせフォーム(プラグイン [uniq_contact]) は front.css 側で最小定義、テーマ側で余白 */ .uq-contact-wrap{max-width:680px;margin:0 auto;} /* 全幅ページテンプレート */ .fw-page{padding:40px 0 60px;} .fw-inner{max-width:1040px;margin:0 auto;padding:0 20px;} .fw-title{font-size:1.6rem;border-left:5px solid var(--uq-primary);padding-left:16px;margin:0 0 8px;} .fw-content{max-width:1040px;margin:0 auto;padding:0 20px;line-height:2;} .fw-content > p{margin:0 0 1.4em;} /* フル幅要素(プラン等)は fw-content の幅制約を超えて全幅表示 */ .fw-content .uq-plans{margin-top:20px;} /* 横スクロール防止(フルブリード対策) */ html,body{overflow-x:hidden;} /* ========================================================== 動画教材(カスタム投稿 uniq_lesson) 参考サイト風・赤基調 ========================================================== */ .uq-lms{--lms-red:#ea8100;--lms-red-d:#cf7000;} .uq-lms-hero{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw; background:linear-gradient(100deg,#f6a01e 0%,#f4823f 34%,#f26aa0 72%,#ef5ca0 100%);color:#fff;padding:46px 20px;margin-top:-1px;} .uq-lms-hero .inner{max-width:var(--uq-max);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:20px;} .uq-lms-hero h1{font-size:2rem;font-weight:800;letter-spacing:.02em;margin:0;color:#fff;} .uq-lms-hero-mark{width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.16);position:relative;flex:0 0 auto;} .uq-lms-hero-mark::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;} .uq-lms-body{max-width:1060px;margin:0 auto;padding:44px 20px 20px;} /* カテゴリー(親グループ + 子ボタン) */ .uq-lms-cats-title{text-align:center;color:var(--lms-red);font-weight:800;letter-spacing:.12em;margin:0 0 22px;} .uq-lms-catgroups{margin:0 0 44px;} .uq-lms-catgroup{margin:0 0 22px;border:1px solid #f0dfe4;border-radius:10px;overflow:hidden;background:#fff;} .uq-lms-catgroup:last-child{margin-bottom:0;} /* 親カテゴリー: 帯状で大きく、階層の見出しとして目立たせる */ .uq-lms-cat-parent{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px; background:linear-gradient(135deg,#f4823f,#ef5ca0);color:#fff;font-weight:800;font-size:1.12rem;letter-spacing:.06em;text-decoration:none;} .uq-lms-cat-parent:hover{filter:brightness(1.06);color:#fff;} .uq-lms-cat-parent .cp-name{position:relative;padding-left:16px;} .uq-lms-cat-parent .cp-name::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:1.05em;background:#fff;border-radius:2px;} .uq-lms-cat-parent .cp-count{font-size:.72rem;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.24);padding:4px 10px;border-radius:20px;flex:0 0 auto;} .uq-lms-cat-parent.is-current{box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);} /* 子カテゴリー: 小さめの白ボタンで、親の配下と分かるように */ .uq-lms-cat-children{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 22px 20px;background:#fdf7f8;} .uq-lms-cat-child{display:flex;align-items:center;justify-content:center;text-align:center;min-height:40px;padding:8px 12px; background:#fff;color:#a3455f;font-weight:600;font-size:.82rem;border:1px solid #f0c8d4;border-radius:4px;text-decoration:none;transition:background .2s ease,color .2s ease;} .uq-lms-cat-child:hover{background:linear-gradient(135deg,#f6975a,#ef6ea3);color:#fff;border-color:transparent;} .uq-lms-cat-child.is-current{background:linear-gradient(135deg,#f4823f,#ef5ca0);color:#fff;border-color:transparent;} @media(max-width:640px){ .uq-lms-cat-children{grid-template-columns:1fr 1fr;padding:14px;} .uq-lms-cat-parent{padding:14px 16px;font-size:1rem;} } /* 動画カード一覧 */ .uq-lms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;} .uq-lms-card{display:flex;flex-direction:column;} .uq-lms-thumb{position:relative;display:block;aspect-ratio:16/9;background:#f0a56a;border:3px solid #f0863a;border-radius:2px;overflow:hidden;} .uq-lms-thumb img{width:100%;height:100%;object-fit:cover;} .uq-lms-thumb .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;} .uq-lms-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:36px;background:rgba(0,0,0,.55);border-radius:8px;} .uq-lms-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;} .uq-lms-card-cat{align-self:flex-start;margin:10px 0 4px;background:linear-gradient(100deg,#f4823f,#ef5ca0);color:#fff;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:3px;} .uq-lms-card-ttl{font-size:.98rem;font-weight:700;line-height:1.5;margin:2px 0 0;} .uq-lms-card-ttl a{color:var(--uq-ink);} .uq-lms-card-ttl a:hover{color:var(--lms-red);} .uq-lms-no{color:var(--lms-red);} .uq-lms-empty{text-align:center;color:var(--uq-sub);padding:30px 0;} @media(max-width:820px){.uq-lms-cards{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.uq-lms-cards{grid-template-columns:1fr;}} /* 単一ページ */ /* 動画教材の個別ページ。右に講義一覧、左に動画を置く2列構成です。 */ /* 動画は2カラムの外に置き、無料講座のページと同じ幅(1600px)で大きく表示します。 */ .uq-lms-stage{max-width:1600px;margin:0 auto;padding:34px 20px 0;} .uq-lms-single-grid{max-width:1600px;margin:0 auto;padding:22px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start;} .uq-lms-main{background:#fff;border:1px solid #ececec;border-radius:10px;padding:18px;} .uq-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.14);} .uq-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .uq-video-img img,.uq-video-oembed *{max-width:100%;} .uq-lms-desc{margin:22px 0 0;line-height:2;} .uq-lms-desc h2{font-size:1.15rem;background:linear-gradient(100deg,#f4823f,#ef5ca0);color:#fff;padding:10px 16px;border-radius:4px;margin:1.6em 0 .8em;} .uq-lms-actions{margin:26px 0 0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .uq-lms-actions form{margin:0;} .uq-lms-btn{display:inline-block;padding:14px 40px;background:linear-gradient(100deg,#f4823f,#ef5ca0);color:#fff;font-weight:700;border:0;border-radius:6px;cursor:pointer;font-size:.95rem;box-shadow:0 4px 12px rgba(239,92,160,.25);transition:filter .2s ease,transform .2s ease;} .uq-lms-btn:hover{filter:brightness(1.06);color:#fff;transform:translateY(-1px);} .uq-lms-btn.is-done{background:#7a7a7a;} .uq-lms-btn-next{background:#333;} .uq-lms-btn-next:hover{background:#000;} /* サイドバー(進捗・講義一覧) */ .uq-lms-panel{background:#fff;border:1px solid #ececec;border-radius:10px;padding:20px 20px 22px;margin-bottom:22px;} .uq-lms-panel-ttl{font-size:1.05rem;font-weight:800;margin:0 0 16px;padding:0 0 10px;border-bottom:2px solid var(--lms-red);} .uq-lms-uid{font-size:.86rem;color:var(--uq-sub);margin:0 0 12px;} .uq-lms-bar{height:14px;background:#ededed;border-radius:8px;overflow:hidden;margin:0 0 10px;} .uq-lms-bar span{display:block;height:100%;background:var(--lms-red);border-radius:8px;transition:width .4s;} .uq-lms-stat{font-size:.86rem;margin:4px 0;color:#444;} .uq-lms-list{list-style:none;margin:0;padding:0;} .uq-lms-list li{border-bottom:1px solid #f0f0f0;} .uq-lms-list li a{display:flex;gap:8px;align-items:baseline;padding:12px 6px;color:var(--uq-ink);font-size:.9rem;} .uq-lms-list li a:hover{background:#fff4e8;color:var(--lms-red);} .uq-lms-list li .n{color:var(--lms-red);font-weight:700;flex:0 0 auto;} .uq-lms-list li.is-current a{background:#fff4e8;color:var(--lms-red);font-weight:700;} .uq-lms-list li.is-done .t::after{content:" ✓";color:#2e9e5b;font-weight:700;} @media(max-width:900px){ .uq-lms-single-grid{grid-template-columns:1fr;} .uq-lms-main{padding:14px;} } /* 上位会員限定の案内(会員についてページ) */ .umc-lock-notice{max-width:1040px;margin:0 auto 24px;background:#fff8f0;border:1px solid #f6d5ae;border-left:5px solid #ea8100;color:#b5610a;font-weight:700;padding:16px 20px;border-radius:8px;} /* 公式LINE案内ボックス */ .uq-line-box{margin:26px 0 6px;} .uq-line-heading{background:linear-gradient(100deg,#f4823f,#ef5ca0);color:#fff;font-size:1.05rem;font-weight:700;padding:12px 18px;border-radius:4px;margin:0 0 16px;} .uq-line-text{line-height:1.95;margin:0 0 10px;} .uq-line-id{font-size:.92rem;color:#333;margin:0 0 6px;} .uq-line-qr{margin:14px 0;text-align:center;} .uq-line-qr img{max-width:220px;height:auto;display:inline-block;border:1px solid #eee;padding:6px;background:#fff;} .uq-line-btnwrap{text-align:center;margin:10px 0 0;} .uq-line-btn{display:inline-block;background:#06c755;color:#fff;padding:12px 34px;border-radius:8px;font-weight:700;} .uq-line-btn:hover{background:#05a648;color:#fff;} /* UNIQマッチ ロゴ画像(ヘッダー) */ .site-brand-img{display:inline-flex;align-items:center;text-decoration:none;} .site-logo-img{height:40px;width:auto;display:block;} @media(max-width:860px){.site-logo-img{height:32px;}} /* ========================================================== サービス紹介 [uniq_service] ========================================================== */ .uq-svc{margin:0;} .uq-svc-sec{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;background:#fff;padding:64px 0;} .uq-svc-sec.is-gray{background:#f6f6f4;} .uq-svc-inner{max-width:1120px;margin:0 auto;padding:0 30px;} .uq-svc-head{text-align:center;margin:0 0 40px;} .uq-svc-eyebrow{display:block;font-size:.76rem;font-weight:700;letter-spacing:.16em;color:var(--uq-gold);text-transform:uppercase;margin:0 0 8px;} .uq-svc-title{font-size:1.7rem;line-height:1.5;margin:0 0 10px;} .uq-svc-sub{font-size:.95rem;color:var(--uq-sub);line-height:1.9;max-width:780px;margin:0 auto;} .uq-svc-para{font-size:.95rem;line-height:2.05;max-width:820px;margin:0 auto;color:#3a3a3a;text-align:center;} /* 1. フロー図 */ .uq-svc-flow{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap;} .uq-svc-flow-box{flex:1 1 0;min-width:220px;border-radius:16px;padding:24px 22px;background:#fff;border:2px solid #eee;} .uq-svc-flow-box.is-left{background:#fdf3dc;border-color:#f4d98a;} .uq-svc-flow-box.is-center{background:#fff;border-color:#d0d0d0;box-shadow:0 10px 28px rgba(0,0,0,.08);} .uq-svc-flow-box.is-right{background:#fde6cf;border-color:#f3b878;} .uq-svc-flow-ttl{display:block;text-align:center;font-size:1.2rem;font-weight:800;margin:0 0 14px;} .uq-svc-flow-arrow{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--uq-sub);} .uq-svc-flow-arrow span{font-size:.74rem;margin-bottom:6px;text-align:center;} .uq-svc-flow-arrow i{font-style:normal;font-size:1.8rem;color:#888;} .uq-svc-check{list-style:none;margin:0;padding:0;} .uq-svc-check li{position:relative;padding:6px 0 6px 22px;font-size:.9rem;line-height:1.6;} .uq-svc-check li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:5px;border-left:2px solid var(--uq-primary);border-bottom:2px solid var(--uq-primary);transform:rotate(-45deg);} .uq-svc-values{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:40px 0 24px;} .uq-svc-values span{background:#f1f1ef;border-radius:10px;padding:16px 30px;font-size:1.1rem;font-weight:800;color:#333;} .uq-svc-note{text-align:center;color:var(--uq-sub);font-size:.9rem;margin:0;} @media(max-width:820px){ .uq-svc-flow{flex-direction:column;align-items:center;} .uq-svc-flow-box{width:100%;max-width:420px;} .uq-svc-flow-arrow{flex-basis:auto;padding:6px 0;} .uq-svc-flow-arrow i{transform:rotate(90deg);} } /* 2. 12ステップ */ .uq-svc-steps{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .uq-svc-step-group{background:#fff;border:1px solid #e7e7e7;border-radius:14px;padding:20px 22px;} .uq-svc-step-gttl{font-size:.95rem;font-weight:800;color:#1f7a55;margin:0 0 14px;padding:0 0 8px;border-bottom:2px solid #e6efe9;} .uq-svc-step{display:flex;gap:14px;align-items:flex-start;padding:10px 0;} .uq-svc-step + .uq-svc-step{border-top:1px dashed #eee;} .uq-svc-step-no{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--uq-primary);color:#fff;font-weight:800;font-size:.86rem;display:flex;align-items:center;justify-content:center;} .uq-svc-step-ttl{display:block;font-weight:700;font-size:.98rem;} .uq-svc-step-sub{display:block;font-size:.82rem;color:var(--uq-sub);margin-top:2px;} @media(max-width:760px){.uq-svc-steps{grid-template-columns:1fr;}} /* 3. 特典 */ .uq-svc-benefit{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .uq-svc-benefit-card{position:relative;background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:28px 26px;box-shadow:0 8px 22px rgba(0,0,0,.05);} .uq-svc-badge{display:inline-block;background:#1f7a55;color:#fff;font-size:.72rem;font-weight:700;padding:4px 14px;border-radius:16px;margin:0 0 12px;} .uq-svc-benefit-card h3{font-size:1.25rem;margin:0 0 6px;} .uq-svc-lead{color:var(--uq-gold);font-weight:800;margin:0 0 12px;} .uq-svc-benefit-card p{font-size:.92rem;line-height:1.95;color:#3a3a3a;margin:0 0 12px;} @media(max-width:760px){.uq-svc-benefit{grid-template-columns:1fr;}} /* 5/6. カードグリッド */ .uq-svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .uq-svc-cards.is-compact{grid-template-columns:repeat(4,1fr);} .uq-svc-card{background:#fff;border:1px solid #e7e7e7;border-radius:12px;padding:22px 20px;border-top:4px solid var(--uq-gold);} .uq-svc-card-ttl{font-size:1rem;font-weight:700;margin:0 0 8px;} .uq-svc-list{list-style:none;margin:0;padding:0;} .uq-svc-list li{position:relative;padding:5px 0 5px 18px;font-size:.86rem;line-height:1.6;color:#444;} .uq-svc-list li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:2px;background:var(--uq-primary);transform:rotate(45deg);} .uq-svc-cards.is-compact .uq-svc-card{text-align:center;border-top-color:var(--uq-primary);} .uq-svc-cards.is-compact .uq-svc-card-ttl{margin:0;font-size:.95rem;} @media(max-width:820px){.uq-svc-cards{grid-template-columns:1fr 1fr;}.uq-svc-cards.is-compact{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.uq-svc-cards,.uq-svc-cards.is-compact{grid-template-columns:1fr;}} /* ========================================================== リニューアル02 追加分 / by Center Light LLC ========================================================== */ /* ---- 1. PC メガメニュー: 選択範囲(ホバー当たり判定)をヘッダー幅の帯に拡張 ---- */ /* プログラムにマウスが乗ってから、下の全幅パネルまで途切れず移動できるよう、 透明ブリッジをヘッダー全幅に広げ、パネルもヘッダーシェル幅に揃える。 */ @media(min-width:861px){ .global-nav>ul>li.mega>a::after{left:-16px;right:-16px;bottom:-18px;height:20px;} .global-nav>ul>li.mega>.sub-menu::before{left:0;right:0;top:-22px;height:24px;} /* パネル展開中はプログラムの見出しを強調 */ .global-nav>ul>li.mega:hover>a, .global-nav>ul>li.mega:focus-within>a{color:var(--uq-primary);} /* メガパネルはヘッダーシェルの内側幅にきれいに収める */ .global-nav>ul>li.mega>.sub-menu{border-radius:18px;} /* 列見出しにホバーの帯を出して選択範囲を明確化 */ .global-nav>ul>li.mega>.sub-menu>li{border-radius:10px;transition:background .2s ease;} .global-nav>ul>li.mega>.sub-menu>li:hover{background:#fbf6ee;} } /* ---- 3. レスポンシブ: サブメニュー(多段)を確実に開閉 ---- */ @media(max-width:860px){ /* すべての階層のサブメニューを既定で閉じ、open の直下だけ開く(多段対応) */ .global-nav.is-open .sub-menu{display:none;} .global-nav.is-open li.open>.sub-menu{display:block;} /* 入れ子のインデント */ .global-nav.is-open .sub-menu .sub-menu{padding-left:14px;background:#fafafa;} /* 開閉トグルのキャレット */ .global-nav .menu-item-has-children>a{position:relative;padding-right:38px;} .global-nav .menu-item-has-children>a::before{ content:"";position:absolute;right:14px;top:50%;width:9px;height:9px; border-right:2px solid #999;border-bottom:2px solid #999; transform:translateY(-70%) rotate(45deg);transition:transform .2s ease; } .global-nav li.open>a::before{transform:translateY(-30%) rotate(225deg);border-color:var(--uq-primary);} .global-nav .menu-item-has-children.open>a{color:var(--uq-primary);} /* メガの列見出しも見やすく */ .global-nav>ul>li.mega>.sub-menu>li>a{border-bottom:1px solid #eee;padding:12px 8px;} } /* ---- 4. 今風の動き(初めての方へ/会員について ほか)スクロールで浮き上がる ---- */ .uq-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;} .uq-reveal.is-in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ .uq-reveal{opacity:1 !important;transform:none !important;transition:none !important;} } /* プランカードやサービス要素は、順に時間差で出す */ .uq-plan.uq-reveal:nth-child(2){transition-delay:.08s;} .uq-plan.uq-reveal:nth-child(3){transition-delay:.16s;} .uq-svc-flow-box.uq-reveal:nth-child(2){transition-delay:.06s;} .uq-svc-flow-box.uq-reveal:nth-child(3){transition-delay:.12s;} /* ボタンやカードのホバーを今風に(初めての方へ/会員について中心) */ .uq-svc-card,.uq-svc-benefit-card,.uq-svc-step-group,.uq-plan{transition:transform .28s ease,box-shadow .28s ease;} .uq-svc-card:hover,.uq-svc-benefit-card:hover,.uq-svc-step-group:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.09);} .uq-plan:not(.is-recommended):hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.09);} /* ---- 5. テーブルを丸み・今風に ---- */ .uq-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.05);} .entry-content table,.fw-content table,.uq-table-wrap>table{ width:100%;border-collapse:separate;border-spacing:0;background:#fff;overflow:hidden;border-radius:14px; font-size:.92rem;border:1px solid #ececec; } .entry-content table th,.entry-content table td, .fw-content table th,.fw-content table td{ padding:13px 16px;border-bottom:1px solid #eee;text-align:left;line-height:1.8;vertical-align:top; } .entry-content table thead th,.fw-content table thead th{ background:linear-gradient(90deg,var(--uq-primary),var(--uq-gold));color:#fff;font-weight:700;border-bottom:0; } .entry-content table tbody tr:nth-child(even), .fw-content table tbody tr:nth-child(even){background:#fbfaf8;} .entry-content table tbody tr:last-child th, .entry-content table tbody tr:last-child td, .fw-content table tbody tr:last-child th, .fw-content table tbody tr:last-child td{border-bottom:0;} .entry-content table tbody tr:hover,.fw-content table tbody tr:hover{background:#fdf4e8;} /* 法定表記テーブルも角丸に */ .legal-table{border:1px solid #ececec;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.05);} .legal-table tr:first-child th,.legal-table tr:first-child td{border-top:0;} @media(max-width:600px){ .legal-table{box-shadow:none;} } /* ---- 8. 動画教材: 365日24時間閲覧可能 の帯(画像2の色合い)とカード ---- */ .uq-lms-hero--anytime{ background:linear-gradient(100deg,#f6a01e 0%,#f4823f 34%,#f26aa0 72%,#ef5ca0 100%); } .uq-lms-hero .inner{gap:22px;} .uq-lms-hero-txt{text-align:center;} .uq-lms-hero-sub{margin:8px 0 0;color:#fff;font-size:.95rem;font-weight:600;letter-spacing:.06em;opacity:.95;} .uq-lms-hero--anytime h1{letter-spacing:.14em;} /* 全ページ共通のタイトル帯 */ .uq-page-hero{margin-bottom:34px;} .uq-page-hero h1{font-size:1.9rem;letter-spacing:.08em;} @media(max-width:860px){ .uq-page-hero{margin-bottom:24px;} .uq-page-hero h1{font-size:1.3rem;letter-spacing:.04em;} .uq-page-hero .uq-lms-hero-mark{width:44px;height:44px;border-radius:11px;} .uq-page-hero .uq-lms-hero-mark::after{border-width:9px 0 9px 14px;} .uq-page-hero .uq-lms-hero-sub{font-size:.8rem;} .uq-page-hero .inner{gap:14px;padding:0 16px;} } /* カテゴリー見出しを暖色系に */ .uq-lms-cats-title{color:#ef5ca0;} /* カードのサムネイル: 画像2のピンク系グラデーション枠 */ .uq-lms-thumb{background:linear-gradient(135deg,#f7c9dd,#f4a9c6);border:3px solid #f2a9c6;border-radius:8px;} .uq-lms-thumb .noimg{color:#fff;font-weight:700;letter-spacing:.08em;text-shadow:0 1px 4px rgba(0,0,0,.15);} .uq-lms-card-cat{background:#ef5ca0;} .uq-lms-card-ttl a:hover{color:#ef5ca0;} .uq-lms-no{color:#ef5ca0;} .uq-lms-card{background:#fff;border-radius:10px;transition:transform .28s ease,box-shadow .28s ease;} .uq-lms-card:hover{transform:translateY(-4px);} .uq-lms-card:hover .uq-lms-thumb{box-shadow:0 12px 26px rgba(239,92,160,.28);} @media(max-width:1024px){.uq-lms-cards{grid-template-columns:repeat(3,1fr);}} @media(max-width:820px){.uq-lms-cards{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.uq-lms-cards{grid-template-columns:1fr;}} /* ---- 7. 広告ウィジェット ---- */ .widget-ad{background:#fff;border:1px solid var(--uq-line);border-radius:8px;margin-bottom:20px;overflow:hidden;} .widget-ad .widget-ad-inner{padding:14px;} .widget-ad img{display:block;width:100%;height:auto;border-radius:6px;} .widget-ad .widget-ad-code{width:100%;} .widget-ad .widget-ad-code img{width:auto;} .widget-ad::before{content:"PR";display:block;font-size:.62rem;font-weight:700;color:#b0b0b0;letter-spacing:.12em;padding:8px 14px 0;} .widget-ad .widget-title + .widget-ad-inner{padding-top:12px;} /* ---- ヘッダーの会員登録ボタン(オレンジのピル) ---- */ .btn-register{display:inline-flex;align-items:center;padding:11px 22px;background:var(--uq-primary);color:#fff;border-radius:30px;font-weight:700;font-size:.86rem;border:0;} .btn-register:hover{background:var(--uq-primary-dark);color:#fff;} /* ---- トップの お知らせ 一覧 ---- */ .front-news{margin:0 0 34px;} /* ---- レスポンシブ: ヘッダーをフル幅(端まで)に ---- */ @media(max-width:860px){ .site-header{padding:0;} .header-shell{ max-width:none;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,.08); padding:10px 16px;gap:10px; } .header-actions{gap:8px;} .btn-register{padding:9px 16px;} .header-search-panel{right:12px;} } /* ========================================================== 修正: サイドバーウィジェットのスタイル適用 register_sidebar が付与するクラス(widget_uniq_recent 等)にも効くよう、 r-item 構造とカテゴリー一覧のスタイルをウィジェット横断で当てます。 ========================================================== */ .widget .r-item{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid #f1f1f1;align-items:center;color:var(--uq-ink);} .widget .r-item:last-child{border-bottom:0;} .widget .r-thumb{width:100px;height:68px;flex:0 0 auto;background:#e6e6e6;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:#999;overflow:hidden;font-weight:700;position:relative;} .widget .r-thumb img{width:100%;height:100%;object-fit:cover;} .widget .r-ttl{font-size:.84rem;line-height:1.55;color:var(--uq-ink);} .widget .r-item:hover .r-ttl{color:var(--uq-primary);} /* カテゴリーウィジェット(WPコア: .widget_categories) */ .widget_categories ul{list-style:none;margin:0;padding:0;} .widget_categories li{margin:0;} .widget_categories li a{display:block;padding:11px 18px;border-bottom:1px solid #f1f1f1;color:var(--uq-ink);font-size:.9rem;} .widget_categories li:last-child a{border-bottom:0;} .widget_categories li a:hover{color:var(--uq-primary);padding-left:24px;background:#faf3e9;} .widget_categories .children{padding-left:14px;} /* 最近の記事・アーカイブ等、WPコアの一覧ウィジェットも読みやすく */ .widget_recent_entries ul,.widget_archive ul,.widget_pages ul,.widget_meta ul,.widget_nav_menu ul{list-style:none;margin:0;padding:0;} .widget_recent_entries li a,.widget_archive li a,.widget_pages li a,.widget_meta li a,.widget_nav_menu li a{display:block;padding:11px 18px;border-bottom:1px solid #f1f1f1;color:var(--uq-ink);font-size:.9rem;} .widget_recent_entries li:last-child a,.widget_archive li:last-child a{border-bottom:0;} .widget_recent_entries li a:hover,.widget_archive li a:hover,.widget_pages li a:hover{color:var(--uq-primary);background:#faf3e9;padding-left:24px;} /* ========================================================== 修正: メガメニューのちらつき防止(ホバー維持) JS で is-hover を付与し、プログラム → パネル間の隙間を移動しても 一定時間表示を保持します。CSS はその表示状態を定義します。 ========================================================== */ @media(min-width:861px){ .global-nav>ul>li.menu-item-has-children.is-hover>ul, .global-nav>ul>li.mega.is-hover>.sub-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); } .global-nav>ul>li.mega.is-hover>a, .global-nav>ul>li.menu-item-has-children.is-hover>a{color:var(--uq-primary);} /* 隙間を無くして地続きにし、透明ボーダーで見た目の余白だけ残す */ .global-nav>ul>li.mega>.sub-menu{top:100%;border-top:16px solid transparent;background-clip:padding-box;} /* プログラム見出しの下から、全幅の透明ブリッジでパネルへつなぐ */ .global-nav>ul>li.mega>a::after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:22px;background:transparent;} } /* ===== 新トップ体裁 ===== */ /* トップの content-col 直下の各ブロックに、下方向の余白を確保 */ .content-col .uq-news-list, .content-col .blog-cards, .content-col .schedule-embed, .content-col .front-free{margin-bottom:32px;} .content-col .block-heading:first-child{margin-top:0;} /* ブロック見出しの右の「詳しく/一覧」リンク */ .block-heading .block-more{margin-left:auto;margin-right:18px;font-size:.8rem;font-weight:700;color:var(--uq-primary);text-decoration:none;white-space:nowrap;} .block-heading .block-more::after{content:"›";margin-left:5px;font-size:1.1em;line-height:1;} .block-heading .block-more:hover{text-decoration:underline;} /* 無料会員動画コンテンツのカードグリッド */ .uq-free-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 26px;} .uq-free-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--uq-line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--uq-ink);transition:box-shadow .2s,transform .2s;} .uq-free-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.1);transform:translateY(-2px);} .uq-free-thumb{position:relative;aspect-ratio:16/9;background:#f0f0f0;overflow:hidden;} .uq-free-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .uq-free-thumb .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:.8rem;} .uq-free-body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;} .uq-free-badge{align-self:flex-start;background:#e6f4ea;color:#1e7e42;font-size:.66rem;font-weight:700;padding:2px 9px;border-radius:20px;} .uq-free-title{font-size:.88rem;font-weight:700;line-height:1.45;} /* 会員バナー3枚 */ .uq-member-banners{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 26px;} .uq-member-banner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center; padding:26px 16px;border-radius:12px;text-decoration:none;color:#fff;min-height:130px;transition:filter .2s,transform .2s;box-shadow:0 6px 16px rgba(0,0,0,.12);} .uq-member-banner:hover{filter:brightness(1.06);transform:translateY(-2px);color:#fff;} .uq-member-banner.is-entry{background:linear-gradient(135deg,#f6a01e,#ef8f1e);} .uq-member-banner.is-branding{background:linear-gradient(135deg,#f4823f,#ef5ca0);} .uq-member-banner.is-produce{background:linear-gradient(135deg,#7b5cf0,#3b6fd4);} .uq-mb-en{font-size:.78rem;font-weight:700;letter-spacing:.14em;opacity:.92;} .uq-mb-name{font-size:1.12rem;font-weight:800;} .uq-mb-more{font-size:.72rem;font-weight:700;background:rgba(255,255,255,.22);padding:4px 14px;border-radius:20px;margin-top:4px;} /* サービスページのカード4枚 */ .uq-service-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:8px 0;} .uq-service-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--uq-line);border-left:4px solid var(--uq-primary);border-radius:10px;padding:22px 22px;text-decoration:none;color:var(--uq-ink);transition:box-shadow .2s,transform .2s;} .uq-service-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.1);transform:translateY(-2px);} .uq-service-card-title{font-size:1.1rem;font-weight:800;} .uq-service-card-desc{font-size:.85rem;line-height:1.7;color:#555;} .uq-service-card-more{align-self:flex-start;margin-top:2px;font-size:.76rem;font-weight:700;color:var(--uq-primary);} /* サイドバーの広告枠 */ .widget-ad{padding:0;border:0;background:transparent;} .widget-ad img{max-width:100%;height:auto;display:block;border-radius:10px;} /* サイドバー ランキングの番号 */ .r-item.r-ranked{position:relative;} .r-item .r-rank{position:absolute;top:-4px;left:-4px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--uq-primary);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.2);} @media(max-width:860px){ .uq-free-grid{grid-template-columns:repeat(2,1fr);} .uq-member-banners{grid-template-columns:1fr;} .uq-service-cards{grid-template-columns:1fr;} } @media(max-width:560px){ .uq-free-grid{grid-template-columns:1fr 1fr;} } /* ===== 取材オファーの単一ページ ===== */ .uq-offer-detail{max-width:820px;margin:0 auto;} .uq-offer-table{width:100%;border-collapse:collapse;margin:0 0 22px;border:1px solid var(--uq-line);border-radius:8px;overflow:hidden;} .uq-offer-table th,.uq-offer-table td{padding:13px 18px;text-align:left;border-bottom:1px solid #f0f0f0;font-size:.9rem;} .uq-offer-table th{width:140px;background:#fff8f0;color:#b5610a;font-weight:700;white-space:nowrap;} .uq-offer-table tr:last-child th,.uq-offer-table tr:last-child td{border-bottom:0;} .uq-offer-body{line-height:1.9;margin:0 0 24px;} .uq-offer-apply{text-align:center;margin:26px 0 0;} .uq-offer-apply-btn{display:inline-block;padding:15px 44px;background:linear-gradient(100deg,#f4823f,#ef5ca0);color:#fff;font-weight:700;border-radius:8px;text-decoration:none;box-shadow:0 6px 16px rgba(239,92,160,.25);transition:filter .2s,transform .2s;} .uq-offer-apply-btn:hover{filter:brightness(1.06);transform:translateY(-1px);color:#fff;} /* ===== 専門家ジャンル一覧([uniq_genres]) ===== */ /* 無料会員動画コンテンツの補足文 */ .uq-free-lead{font-size:.9rem;line-height:1.9;color:#444;margin:0 0 20px;} .uq-genre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 8px;} .uq-genre-item{display:flex;align-items:center;gap:10px;background:#f7f7f7;border-radius:10px;padding:16px 12px;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s,background .2s;container-type:inline-size;} .uq-genre-item:hover{background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.08);transform:translateY(-2px);} .uq-genre-ic{flex:0 0 auto;width:60px;height:60px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.05);} .uq-genre-ic img{width:42px;height:42px;object-fit:contain;display:block;} .uq-genre-body{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto;} /* タイトルは必ず1行に収める。カード幅に応じてフォントを自動縮小(container query)し、 最長の名称(メンタル・カウンセリング=12文字)でも折り返さないようにします。 container query 非対応の古い環境向けに、下限フォントも小さめに設定します。 */ .uq-genre-name{font-weight:800;color:#222;white-space:nowrap;letter-spacing:-.03em;line-height:1.3; font-size:clamp(.68rem, 3.4cqw, .96rem);} .uq-genre-desc{font-size:.78rem;line-height:1.6;color:#666;} @media(max-width:900px){.uq-genre-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.uq-genre-grid{grid-template-columns:1fr;}} /* ===== トップ カレンダー下の会員案内バナー(8枠) ===== */ .uq-front-banners{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 32px;} /* 1〜6枠: 900×220 の全幅バナー */ .uq-front-banners .uq-fb{flex:0 0 100%;position:relative;display:block;aspect-ratio:900/220;border-radius:10px;overflow:hidden;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.08);} /* 7〜8枠: 半分幅(2列で横並び) */ .uq-front-banners .uq-fb.is-half{flex:1 1 45%;width:calc(50% - 7px);max-width:calc(50% - 7px);aspect-ratio:450/110;} .uq-front-banners .uq-fb.is-half .uq-fb-cap, .uq-front-banners .uq-fb.is-half .uq-fb-ph{font-size:1.15rem;} .uq-front-banners .uq-fb-bg{position:absolute;inset:0;background-size:cover;background-position:center;} /* 画像を設定した会員バナーも、コミュニティバナーと同じ紫からピンクの配色に揃えます。 画像の上に色を重ねることで、5枚の見え方を統一しています。 */ .uq-front-banners .uq-fb.has-img{background:linear-gradient(100deg,#8b5cf0,#ec4899); box-shadow:0 8px 22px rgba(139,92,240,.20);transition:filter .2s,transform .2s;} .uq-front-banners .uq-fb.has-img:hover{filter:brightness(1.05);transform:translateY(-1px);} .uq-front-banners .uq-fb.has-img::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,rgba(139,92,240,.88),rgba(236,72,153,.88));} /* 見出しは、コミュニティバナーと同じく中央に大きく表示します。 */ .uq-front-banners .uq-fb-cap{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center; padding:16px 20px;text-align:center;color:#fff;font-weight:800;font-size:1.4rem;letter-spacing:.04em;line-height:1.5;} /* 画像を設定していない会員バナーは、コミュニティバナーと同じ配色で表示します。 */ .uq-front-banners .uq-fb.is-placeholder{display:flex;align-items:center;justify-content:center;text-align:center; background:linear-gradient(100deg,#8b5cf0,#ec4899);color:#fff; box-shadow:0 8px 22px rgba(139,92,240,.20);transition:filter .2s,transform .2s;} .uq-front-banners .uq-fb.is-placeholder:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff;} .uq-front-banners .uq-fb-ph{font-weight:800;font-size:1.4rem;letter-spacing:.04em;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;} .uq-front-banners .uq-fb-ph .uq-fb-size{font-size:.82rem;font-weight:600;color:#fff;opacity:.95;letter-spacing:0;} .uq-front-banners .uq-fb.has-img:hover .uq-fb-bg{transform:scale(1.03);transition:transform .3s;} .uq-front-banners .uq-fb-ad{flex:0 0 100%;} .uq-front-banners .uq-fb-ad.is-half{flex:1 1 calc(50% - 7px);} .uq-front-banners .uq-fb-ad img{max-width:100%;height:auto;display:block;border-radius:10px;} @media(max-width:560px){ .uq-front-banners .uq-fb.is-half,.uq-front-banners .uq-fb-ad.is-half{flex:0 0 100%;width:100%;max-width:100%;aspect-ratio:900/220;} .uq-front-banners .uq-fb-cap,.uq-front-banners .uq-fb-ph{font-size:1.15rem;} } /* 固定ページのリード文(サービス系ページの導入文) */ .uq-lead{font-size:.98rem;line-height:1.9;color:#333;background:#fff8f0;border-left:4px solid var(--uq-primary);border-radius:6px;padding:14px 18px;margin:0 0 24px;} /* ===== 帯バナー(5枠。先頭はプレスリリース添削会) ===== */ /* 5枠すべて同じ高さ(--uq-band-h)。枠1-3は全幅、枠4-5は半分幅で横並び。 */ .uq-comm-banners{margin:0 0 32px;} .uq-front-banners.uq-comm-banners .uq-fb{ flex:0 0 100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; aspect-ratio:auto;min-height:var(--uq-band-h);padding:20px;box-sizing:border-box;text-align:center; border-radius:12px;overflow:hidden;text-decoration:none;color:#fff; background:linear-gradient(100deg,#8b5cf0,#ec4899);box-shadow:0 8px 22px rgba(139,92,240,.20); transition:filter .2s,transform .2s;} .uq-front-banners.uq-comm-banners .uq-fb.is-half{flex:1 1 calc(50% - 7px);width:calc(50% - 7px);max-width:calc(50% - 7px);aspect-ratio:auto;} .uq-front-banners.uq-comm-banners .uq-fb:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff;} .uq-front-banners.uq-comm-banners .uq-fb.has-img{background:#241a33;} .uq-front-banners.uq-comm-banners .uq-fb-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .3s;} .uq-front-banners.uq-comm-banners .uq-fb.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(38,14,72,.62),rgba(126,22,86,.52));} .uq-front-banners.uq-comm-banners .uq-fb.has-img:hover .uq-fb-bg{transform:scale(1.03);} .uq-front-banners.uq-comm-banners .uq-fb-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;} .uq-front-banners.uq-comm-banners .uq-fb-title{font-size:1.4rem;font-weight:800;letter-spacing:.04em;} .uq-front-banners.uq-comm-banners .uq-fb-sub{font-size:.82rem;font-weight:600;opacity:.95;} .uq-front-banners.uq-comm-banners .uq-fb.is-half .uq-fb-title{font-size:1.15rem;} .uq-front-banners.uq-comm-banners .uq-fb.is-half .uq-fb-sub{font-size:.76rem;} .uq-front-banners.uq-comm-banners .uq-fb-ad{flex:0 0 100%;min-height:var(--uq-band-h);display:flex;align-items:center;justify-content:center;} .uq-front-banners.uq-comm-banners .uq-fb-ad.is-half{flex:1 1 calc(50% - 7px);max-width:calc(50% - 7px);} @media(max-width:560px){ .uq-front-banners.uq-comm-banners .uq-fb.is-half, .uq-front-banners.uq-comm-banners .uq-fb-ad.is-half{flex:0 0 100%;width:100%;max-width:100%;} .uq-front-banners.uq-comm-banners .uq-fb-title, .uq-front-banners.uq-comm-banners .uq-fb.is-half .uq-fb-title{font-size:1.15rem;} } /* ===== ページ内アンカー(固定ヘッダー分の余白を確保) ===== */ /* ヘッダーは position:sticky で上部に残るため、アンカー着地点を下げて見出しが隠れないようにします。 */ #program, [id]:target{scroll-margin-top:calc(var(--uq-header-h) + 40px);} @media(max-width:860px){ #program, [id]:target{scroll-margin-top:calc(var(--uq-header-h) + 12px);} } /* ===== サービスページ(/service/): 本文を全幅で表示 ===== */ /* 他の固定ページは読みやすい1040px幅のままとし、サービスページだけヘッダーと同じ幅まで広げます。 */ body.uq-page-service .fw-content{max-width:1600px;} body.uq-page-service .uq-lms-hero .inner{max-width:1600px;} body.uq-page-service .uq-service-cards{gap:22px;} @media(max-width:860px){ body.uq-page-service .fw-content{max-width:100%;} } /* ===== サイドバー広告: バナーを枠いっぱいに表示 ===== */ /* 広告タグ側の width 指定や余白が原因で、画像の右側に白い帯が出ていたため、 画像を必ず枠の幅いっぱいに伸ばし、内側の余白も無くします。 */ .widget-ad .widget-ad-inner{padding:0;} .widget-ad a{display:block;line-height:0;} .widget-ad img, .widget-ad .widget-ad-code img{display:block;width:100%!important;height:auto!important;max-width:100%;border-radius:0;margin:0;} .widget-ad .widget-ad-code{width:100%;} .widget-ad .widget-ad-code>*{max-width:100%;} .widget-ad iframe, .widget-ad ins{max-width:100%;} /* ===== 専門分野ページ: 動画一覧 ===== */ .uq-genre-videos{display:flex;flex-direction:column;gap:34px;margin:26px 0 34px;} .uq-gv-item{background:#fff;border:1px solid var(--uq-line);border-radius:10px;padding:20px 22px;} .uq-gv-title{font-size:1.05rem;font-weight:700;margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--uq-line);} .uq-gv-desc{margin:14px 0 0;font-size:.9rem;color:#4a4a4a;line-height:1.9;} .uq-gv-lock{background:#faf6f0;border:1px dashed #e0cfb6;border-radius:8px;padding:28px 20px;text-align:center;} .uq-gv-lock-title{margin:0 0 6px;font-weight:700;font-size:1rem;} .uq-gv-lock-note{margin:0 0 14px;font-size:.86rem;color:#6b6b6b;} .uq-gv-lock-btn{display:inline-block;background:var(--uq-primary);color:#fff;font-weight:700;font-size:.88rem; padding:11px 26px;border-radius:999px;text-decoration:none;transition:filter .2s;} .uq-gv-lock-btn:hover{filter:brightness(1.06);color:#fff;} .uq-genre-empty{background:#faf9f7;border:1px solid var(--uq-line);border-radius:10px;padding:24px;text-align:center;color:#6b6b6b;} @media(max-width:560px){ .uq-gv-item{padding:16px;} .uq-gv-lock{padding:22px 14px;} } /* ===== 講座(コース)まわり ===== */ /* 分野ページ・講座ページ・レッスンページは、横幅を広く取って一覧性を高めます。 */ .uq-course-page .fw-content{max-width:1600px;} @media(max-width:860px){ .uq-course-page .fw-content{max-width:100%;} } /* 分野の一覧ページ上部のバナー */ .uq-genre-banner{margin:22px 0 26px;} .uq-genre-banner img{display:block;width:100%;height:auto;border-radius:10px;} /* 講座一覧: 絞り込みと検索 */ .uq-course-board{margin:26px 0 34px;} .uq-course-filter{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:0 0 22px;} .uq-cf-left{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;} .uq-cf-left select{padding:8px 12px;border:1px solid var(--uq-line);border-radius:6px;background:#fff;font-size:.9rem;} .uq-cf-right{display:flex;align-items:stretch;gap:0;} .uq-cf-right input[type="search"]{width:260px;max-width:52vw;padding:9px 14px;border:1px solid var(--uq-line);border-right:0; border-radius:6px 0 0 6px;background:#fff;font-size:.9rem;} .uq-cf-right button{padding:9px 18px;border:0;border-radius:0 6px 6px 0;background:#1c1c1c;color:#fff;font-size:.86rem;font-weight:700;cursor:pointer;} .uq-cf-right button:hover{background:var(--uq-primary);} /* 講座一覧: カード */ .uq-course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .uq-course-card{background:#fff;border:1px solid var(--uq-line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column; transition:transform .2s,box-shadow .2s;} .uq-course-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.10);} .uq-cc-thumb{display:block;aspect-ratio:16/9;background:#eee;overflow:hidden;} .uq-cc-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .uq-cc-noimg{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#9b9b9b;font-size:.8rem;} .uq-cc-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1 1 auto;} .uq-cc-title{font-size:1rem;font-weight:700;line-height:1.6;margin:0;} .uq-cc-title a{color:var(--uq-ink);text-decoration:none;} .uq-cc-title a:hover{color:var(--uq-primary);} .uq-cc-desc{margin:0;font-size:.84rem;color:#6b6b6b;line-height:1.8;} .uq-cc-count{margin:0;font-size:.78rem;font-weight:700;color:var(--uq-primary);letter-spacing:.04em;} .uq-cc-hits{margin:0;padding:10px 12px;background:#fff8f0;border-radius:8px;} .uq-cc-hits-ttl{margin:0 0 6px;font-size:.72rem;font-weight:700;color:#b5610a;letter-spacing:.04em;} .uq-cc-hits ul{list-style:none;margin:0;padding:0;} .uq-cc-hits li{font-size:.8rem;line-height:1.7;} .uq-cc-hits li a{color:var(--uq-ink);text-decoration:none;} .uq-cc-hits li a:hover{color:var(--uq-primary);text-decoration:underline;} .uq-cc-hits-more{color:#8a8a8a;} .uq-cc-action{margin:auto 0 0;} .uq-cc-btn{display:inline-block;background:var(--uq-primary);color:#fff;font-weight:700;font-size:.85rem; padding:9px 22px;border-radius:999px;text-decoration:none;transition:filter .2s;} .uq-cc-btn:hover{filter:brightness(1.06);color:#fff;} .uq-course-empty{background:#faf9f7;border:1px solid var(--uq-line);border-radius:10px;padding:24px;text-align:center;color:#6b6b6b;} /* 講座ページ・レッスンページの2カラム */ .uq-course-crumb{font-size:.82rem;color:#7a7a7a;margin:22px 0 18px;} .uq-course-crumb a{color:var(--uq-primary);text-decoration:none;} .uq-course-crumb a:hover{text-decoration:underline;} .uq-course-crumb .sep{margin:0 8px;color:#c4c4c4;} .uq-course-layout{display:grid;grid-template-columns:290px 1fr;gap:30px;align-items:start;margin:0 0 40px;} .uq-course-layout.is-full{grid-template-columns:1fr;} .uq-course-side{background:#fff;border:1px solid var(--uq-line);border-radius:10px;padding:18px;position:sticky;top:96px;} .uq-cs-title{font-size:.98rem;font-weight:700;line-height:1.6;margin:0 0 14px;} .uq-cs-title a{color:var(--uq-ink);text-decoration:none;} .uq-cs-title a:hover{color:var(--uq-primary);} .uq-cs-thumb{margin:0 0 16px;border-radius:8px;overflow:hidden;} .uq-cs-thumb img{display:block;width:100%;height:auto;} .uq-cs-list{list-style:none;margin:0;padding:0;} .uq-cs-list li{border-top:1px solid #f1f1f1;} .uq-cs-list li:first-child{border-top:0;} .uq-cs-list a{display:block;padding:11px 4px;font-size:.86rem;line-height:1.6;color:var(--uq-ink);text-decoration:none;} .uq-cs-list a:hover{color:var(--uq-primary);} .uq-cs-list li.is-current a{color:var(--uq-primary);font-weight:700;} .uq-course-main{min-width:0;} .uq-course-lead{margin:24px 0;} .uq-course-note{margin:0 0 24px;background:#faf9f7;border-left:3px solid var(--uq-primary);border-radius:0 8px 8px 0;padding:16px 18px;} .uq-course-note p{margin:0;font-size:.9rem;line-height:1.95;color:#4a4a4a;} .uq-course-main>.uq-video{margin:24px 0 0;} .uq-course-main .uq-lesson-texts{margin:24px 0 30px;} .uq-course-panel{background:#fff;border:1px solid var(--uq-line);border-radius:10px;overflow:hidden;} .uq-cp-title{margin:0;padding:16px 22px;font-size:1rem;font-weight:700;border-bottom:1px solid var(--uq-line);background:#faf9f7;letter-spacing:.04em;} .uq-cp-start{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:16px 20px; border-bottom:1px solid #f1f1f1;background:#fffdfa;} .uq-cp-start-btn{display:inline-block;background:var(--uq-primary);color:#fff;font-weight:700;font-size:.88rem; padding:11px 26px;border-radius:999px;text-decoration:none;transition:filter .2s;} .uq-cp-start-btn:hover{filter:brightness(1.06);color:#fff;} .uq-cp-start-note{font-size:.8rem;font-weight:700;color:#8a8a8a;letter-spacing:.04em;} .uq-cp-list{list-style:none;margin:0;padding:0;} .uq-cp-item{display:flex;align-items:center;gap:14px;padding:18px 22px;border-top:1px solid #f1f1f1;transition:background .2s;} .uq-cp-item:hover{background:#fcfbf9;} .uq-cp-item:first-child{border-top:0;} .uq-cp-mark{width:18px;height:18px;border:2px solid #c9c9c9;border-radius:50%;flex:0 0 auto;background:#fff;} .uq-cp-name{flex:1 1 auto;font-size:.95rem;color:var(--uq-ink);text-decoration:none;line-height:1.6;} .uq-cp-name:hover{color:var(--uq-primary);} .uq-cp-btn{flex:0 0 auto;background:var(--uq-primary);color:#fff;font-weight:700;font-size:.8rem; padding:8px 18px;border-radius:999px;text-decoration:none;transition:filter .2s;} .uq-cp-btn:hover{filter:brightness(1.06);color:#fff;} .uq-course-back{margin:22px 0 0;font-size:.88rem;} /* レッスンページ: 本文とテキスト配布 */ .uq-lesson-body{margin:24px 0 0;} .uq-lesson-texts{margin:30px 0 0;text-align:center;background:#faf9f7;border:1px solid var(--uq-line);border-radius:10px;padding:24px 18px;} .uq-lt-label{margin:0;font-weight:700;font-size:.96rem;} .uq-lt-arrow{margin:6px 0;color:#b0b0b0;letter-spacing:.3em;} .uq-lt-url{margin:0 0 18px;word-break:break-all;font-size:.86rem;} .uq-lt-url:last-child{margin-bottom:0;} /* レッスンページ: 前後移動 */ .uq-lesson-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 0;} .uq-lesson-nav a,.uq-lesson-nav span{display:inline-block;font-size:.86rem;font-weight:700;padding:11px 24px;border-radius:999px;text-decoration:none;} .uq-ln-prev,.uq-ln-next{background:var(--uq-primary);color:#fff;} .uq-ln-prev:hover,.uq-ln-next:hover{filter:brightness(1.06);color:#fff;} .uq-ln-prev.is-off,.uq-ln-next.is-off{background:#e6e6e6;color:#9b9b9b;} .uq-ln-index{background:#fff;border:1px solid var(--uq-line);color:var(--uq-ink);} .uq-ln-index:hover{border-color:var(--uq-primary);color:var(--uq-primary);} @media(max-width:1100px){ .uq-course-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:860px){ .uq-course-layout{grid-template-columns:1fr;gap:22px;} .uq-course-side{position:static;} } @media(max-width:560px){ .uq-course-grid{grid-template-columns:1fr;} .uq-course-filter{flex-direction:column;align-items:stretch;} .uq-cf-right input[type="search"]{width:100%;max-width:none;} .uq-cp-item{flex-wrap:wrap;} .uq-cp-start{flex-direction:column;align-items:stretch;text-align:center;} .uq-cp-btn{margin-left:27px;} .uq-lesson-nav{flex-wrap:wrap;justify-content:center;} } /* ===== サイドバーのウィジェットに置いた画像 ===== */ /* 画像ウィジェット・テキスト・カスタムHTMLに置いた画像は、元の画像幅のまま左寄せになり、 右側に白い余白が残っていました。枠の幅いっぱいに広げ、中央に配置します。 */ .sidebar-col .widget_media_image, .sidebar-col .widget_media_gallery, .sidebar-col .widget_block{overflow:hidden;} .sidebar-col .widget_media_image img, .sidebar-col .widget_media_gallery img, .sidebar-col .widget_text img, .sidebar-col .widget_custom_html img, .sidebar-col .widget_block img{display:block;width:100%!important;height:auto!important;max-width:100%;margin-left:auto;margin-right:auto;} .sidebar-col .widget_media_image a, .sidebar-col .widget_media_gallery a, .sidebar-col .widget_custom_html a, .sidebar-col .widget_block > a, .sidebar-col .widget_block figure > a{display:block;line-height:0;} .sidebar-col .widget_media_image figure, .sidebar-col .widget_block figure{margin:0;} .sidebar-col .widget_media_image .wp-caption-text, .sidebar-col .widget_block figcaption{margin:0;padding:8px 14px;font-size:.78rem;color:#6b6b6b;background:#fff;} /* テキスト・カスタムHTMLは、画像だけを置いた場合に余白が出ないようにします。 */ .sidebar-col .widget_custom_html .textwidget{padding:0;} .sidebar-col .widget_text .textwidget > p:only-child{margin:0;} .sidebar-col .widget_text .textwidget > p{margin:0;} /* ===== 動画教材カテゴリー: 2カラムのレッスン一覧 ===== */ .uq-lms-layout{margin:26px 0 0;} .uq-cs-lead{margin:14px 0 0;font-size:.82rem;line-height:1.85;color:#5a5a5a;} .uq-cp-item.is-locked .uq-cp-mark{border-color:#e0cfb6;background:#faf6f0;} .uq-cp-item.is-locked .uq-cp-name{color:#8a8a8a;} .uq-cp-btn.is-locked{background:#c9c9c9;} .uq-cp-btn.is-locked:hover{background:#b5b5b5;} @media(max-width:860px){ .uq-lms-layout{margin-top:20px;} } /* ===== 動画教材の閲覧制限の案内 ===== */ .uq-lesson-gate{margin:34px auto;max-width:720px;} .uq-gv-lock-alt{margin:16px 0 0;font-size:.84rem;} .uq-gv-lock-alt a{color:var(--uq-primary);text-decoration:underline;} /* マイページの無料講座への入口 */ .umc-free-cta p{margin:0 0 14px;} /* ===== 専門分野のパネル一覧([uniq_genres style="button"]) ===== */ /* 動画教材のカテゴリー一覧と同じ構成です。分野ごとのタイトル帯の下に、講座名のボタンが並びます。 */ .uq-lms-cat-empty{display:flex;align-items:center;justify-content:center;text-align:center;min-height:40px; padding:8px 12px;color:#a9a9a9;font-size:.82rem;grid-column:1/-1;} /* トップの動画教材(新着)が空のときの案内 */ .uq-cards-empty{grid-column:1/-1;margin:0;padding:26px 20px;text-align:center;color:#8a8a8a;font-size:.86rem; background:#faf9f7;border:1px solid var(--uq-line);border-radius:8px;} /* ===== 動画教材の個別ページ ===== */ /* 講義一覧の上に置く「365日24時間閲覧可能」への入口 */ .uq-lms-anytime{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; padding:18px 16px;margin:0 0 18px;border-radius:10px;text-align:center;text-decoration:none;color:#fff; background:linear-gradient(100deg,#f6a01e 0%,#f4823f 34%,#f26aa0 72%,#ef5ca0 100%); box-shadow:0 6px 18px rgba(242,106,160,.22);transition:filter .2s,transform .2s;} .uq-lms-anytime:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff;} .uq-lms-anytime-ttl{font-size:.95rem;font-weight:800;letter-spacing:.04em;} .uq-lms-anytime-sub{font-size:.76rem;font-weight:600;opacity:.95;} /* 前へ・視聴完了・次へ */ .uq-lesson-nav .uq-ln-form{margin:0;} .uq-ln-done{display:inline-block;font-size:.86rem;font-weight:700;padding:11px 24px;border-radius:999px; border:1px solid var(--uq-line);background:#fff;color:var(--uq-ink);cursor:pointer;transition:border-color .2s,color .2s;} .uq-ln-done:hover{border-color:var(--uq-primary);color:var(--uq-primary);} .uq-ln-done.is-done{background:var(--uq-primary);border-color:transparent;color:#fff;} .uq-ln-done.is-done:hover{filter:brightness(1.06);color:#fff;} /* ===== 取材オファーの一覧とページ送り ===== */ .uq-offer-board{margin:0 0 40px;} .uq-offer-list{list-style:none;margin:0 0 24px;padding:0;background:#fff;border:1px solid var(--uq-line);border-radius:10px;overflow:hidden;} .uq-offer-item{border-top:1px solid #f1f1f1;} .uq-offer-item:first-child{border-top:0;} .uq-offer-link{display:flex;align-items:baseline;gap:18px;padding:16px 22px;text-decoration:none;transition:background .2s;} .uq-offer-link:hover{background:#fcfbf9;} .uq-offer-date{flex:0 0 auto;font-size:.8rem;font-weight:700;color:var(--uq-primary);letter-spacing:.04em;} .uq-offer-title{flex:1 1 auto;font-size:.92rem;line-height:1.7;color:var(--uq-ink);} /* 中身を閲覧できない取材オファーには、区分の印を付けます。 */ .uq-offer-lock{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:3px 12px;border-radius:999px; background:#faf1e4;color:#a56a12;font-size:.7rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;} .uq-offer-lock::before{content:"\1F512";font-size:.78rem;} .uq-offer-link.is-locked .uq-offer-title{color:#6b6b6b;} .uq-offer-link:hover .uq-offer-title{color:var(--uq-primary);} /* 過去の一覧へ移動するボタン */ .uq-offer-more{margin:0;text-align:center;} .uq-offer-more-btn{display:inline-flex;align-items:center;gap:8px;background:var(--uq-primary);color:#fff; font-weight:700;font-size:.88rem;padding:12px 30px;border-radius:999px;text-decoration:none;transition:filter .2s,transform .2s;} .uq-offer-more-btn::after{content:"›";font-size:1.1rem;line-height:1;} .uq-offer-more-btn:hover{filter:brightness(1.06);transform:translateY(-1px);color:#fff;} .uq-offer-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0;} .uq-offer-pager a,.uq-offer-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px; padding:0 10px;border:1px solid var(--uq-line);border-radius:6px;background:#fff;color:var(--uq-ink); font-size:.86rem;font-weight:700;text-decoration:none;transition:border-color .2s,color .2s,background .2s;} .uq-offer-pager a:hover{border-color:var(--uq-primary);color:var(--uq-primary);} .uq-offer-pager .is-current{background:var(--uq-primary);border-color:transparent;color:#fff;} .uq-offer-pager .is-off{color:#c4c4c4;background:#f7f7f7;} @media(max-width:560px){ .uq-offer-link{flex-direction:column;gap:6px;padding:14px 16px;} } /* 動画教材ページ: 視聴完了ボタンと、前後の動画カード */ .uq-lms-done{display:flex;justify-content:center;margin:28px 0 0;} .uq-lms-main .uq-lesson-texts{margin:24px 0 0;} .uq-lms-done form{margin:0;} .uq-lms-around{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 0;} .uq-around-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 16px 16px; background:#fff;border:1px solid var(--uq-line);border-radius:10px;text-align:center; text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;} .uq-around-card:not(.is-off):hover{border-color:var(--uq-primary);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08);} .uq-around-dir{display:block;font-size:.72rem;font-weight:700;color:var(--uq-primary);letter-spacing:.06em;} /* アイキャッチは通常のブログと同じ小さめのサイズにします。 */ .uq-around-thumb{width:120px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#eee; display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .uq-around-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .uq-around-thumb .noimg{font-size:.6rem;color:#9b9b9b;} .uq-around-ttl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:.84rem;font-weight:600;line-height:1.6;color:var(--uq-ink);} .uq-around-card:not(.is-off):hover .uq-around-ttl{color:var(--uq-primary);} .uq-around-card.is-off{background:#f7f7f7;border-style:dashed;justify-content:center;} .uq-around-card.is-off .uq-around-dir{color:#b5b5b5;} .uq-around-none{display:block;font-size:.82rem;color:#a9a9a9;line-height:1.6;} @media(max-width:560px){ .uq-lms-around{grid-template-columns:1fr;} } /* ===== イベント・お知らせの単一ページ ===== */ .uq-single-post{max-width:800px;margin:0 auto;} .uq-single-date{margin:0 0 18px;font-size:.84rem;font-weight:700;color:var(--uq-primary);letter-spacing:.04em;} .uq-single-thumb{margin:0 0 24px;border-radius:10px;overflow:hidden;} .uq-single-thumb img{display:block;width:100%;height:auto;} .uq-single-body{font-size:.95rem;line-height:1.95;} .uq-single-body p{margin:0 0 1.4em;} .uq-single-back{margin:36px 0 0;text-align:center;} .uq-single-back a{display:inline-block;background:#1c1c1c;color:#fff;font-weight:700;font-size:.88rem; padding:12px 34px;border-radius:999px;text-decoration:none;transition:background .2s;} .uq-single-back a:hover{background:var(--uq-primary);color:#fff;} /* 読み込みに失敗した画像は、壊れたアイコンを出さずに隠します。 */ img[data-uq-broken="1"]{display:none!important;} /* 読み込み元が空の画像も、同様に表示しません。 */ img[src=""],img:not([src]){display:none!important;} /* 動画を全幅にしたため、本文側の枠は上の角丸を控えめにします。 */ @media(max-width:1000px){ .uq-lms-stage{padding:24px 20px 0;} } /* 動画教材の一覧: 視聴できない動画に、必要な会員区分を表示します。 */ .uq-lms-card-lock{display:inline-flex;align-items:center;gap:5px;margin:6px 0 0;padding:3px 12px;border-radius:999px; background:#faf1e4;color:#a56a12;font-size:.7rem;font-weight:700;white-space:nowrap;} .uq-lms-card-lock::before{content:"\1F512";font-size:.78rem;}