/* Theme Name: Cocoon Child Manga Template: cocoon Description: Modular manga and ebook portal child theme for Cocoon. Author: Site Admin Version: 1.0.2 Text Domain: cocoon-child-manga */ /* Base child overrides. Portal-specific styles are loaded from /css/*.css on front page. */ .single-post.ai-media-os-new-release .article-header .eye-catch-wrap { display: none; } .portal-home { margin-block: 0 2.5rem; } .portal-home * { box-sizing: border-box; } /* Section title baseline accent */ .portal-home .section-title { position: relative; padding-left: 14px; } .portal-home .section-title::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 5px; height: 1.1em; border-radius: 999px; background: #d9d9d9; } /* Highlight the active featured section title */ .portal-home.is-feature-freeworks #featured .section-title::before, .portal-home.is-feature-ranking #ranking .section-title::before, .portal-home.is-feature-newbooks #new-releases .section-title::before, .portal-home.is-feature-salebooks #sales .section-title::before, .portal-home.is-feature-mediaworks #media .section-title::before { width: 8px; height: 1.25em; background: var(--portal-highlight, #ff9900); } .portal-home.is-feature-freeworks #featured .section-title, .portal-home.is-feature-ranking #ranking .section-title, .portal-home.is-feature-newbooks #new-releases .section-title, .portal-home.is-feature-salebooks #sales .section-title, .portal-home.is-feature-mediaworks #media .section-title { color: var(--portal-highlight-strong, #e68700); } /* Optional subtle featured section background */ .portal-home.is-feature-freeworks #featured { background: linear-gradient(180deg, rgba(255, 153, 0, 0.05) 0%, rgba(255, 153, 0, 0) 100%); } .portal-home.is-feature-ranking #ranking { background: linear-gradient(180deg, rgba(34, 34, 34, 0.04) 0%, rgba(34, 34, 34, 0) 100%); } .portal-home.is-feature-newbooks #new-releases { background: linear-gradient(180deg, rgba(42, 125, 225, 0.05) 0%, rgba(42, 125, 225, 0) 100%); } .portal-home.is-feature-salebooks #sales { background: linear-gradient(180deg, rgba(240, 90, 40, 0.05) 0%, rgba(240, 90, 40, 0) 100%); } .portal-home.is-feature-mediaworks #media { background: linear-gradient(180deg, rgba(122, 77, 232, 0.05) 0%, rgba(122, 77, 232, 0) 100%); } /* First-card cover emphasis in the featured section only */ .portal-home.is-feature-freeworks #featured .scroll-row > .book-card:first-child .book-cover, .portal-home.is-feature-ranking #ranking .scroll-row > .book-card:first-child .book-cover, .portal-home.is-feature-newbooks #new-releases .scroll-row > .book-card:first-child .book-cover, .portal-home.is-feature-salebooks #sales .scroll-row > .book-card:first-child .book-cover, .portal-home.is-feature-mediaworks #media .scroll-row > .book-card:first-child .book-cover { box-shadow: inset 0 0 0 2px var(--portal-highlight, #ff9900), 0 10px 24px rgba(0, 0, 0, 0.12); background: color-mix(in srgb, var(--portal-highlight, #ff9900) 12%, #efefef); transform: translateY(-2px); } .portal-home.is-feature-freeworks #featured .scroll-row > .book-card:first-child .book-placeholder, .portal-home.is-feature-ranking #ranking .scroll-row > .book-card:first-child .book-placeholder, .portal-home.is-feature-newbooks #new-releases .scroll-row > .book-card:first-child .book-placeholder, .portal-home.is-feature-salebooks #sales .scroll-row > .book-card:first-child .book-placeholder, .portal-home.is-feature-mediaworks #media .scroll-row > .book-card:first-child .book-placeholder { background: linear-gradient( 135deg, color-mix(in srgb, var(--portal-highlight, #ff9900) 16%, #f3f3f3) 0%, #e8e8e8 100% ); } /* Featured section: subtly emphasize the first card only */ .portal-home.is-feature-freeworks #featured .scroll-row > .book-card:first-child, .portal-home.is-feature-ranking #ranking .scroll-row > .book-card:first-child, .portal-home.is-feature-newbooks #new-releases .scroll-row > .book-card:first-child, .portal-home.is-feature-salebooks #sales .scroll-row > .book-card:first-child, .portal-home.is-feature-mediaworks #media .scroll-row > .book-card:first-child { border-color: rgba(255, 153, 0, 0.28); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); transform: translateY(-2px); min-width: 86%; } @media (min-width: 768px) { .portal-home.is-feature-freeworks #featured .scroll-row > .book-card:first-child, .portal-home.is-feature-ranking #ranking .scroll-row > .book-card:first-child, .portal-home.is-feature-newbooks #new-releases .scroll-row > .book-card:first-child, .portal-home.is-feature-salebooks #sales .scroll-row > .book-card:first-child, .portal-home.is-feature-mediaworks #media .scroll-row > .book-card:first-child { min-width: 54%; } } @media (min-width: 1024px) { .portal-home.is-feature-freeworks #featured .scroll-row > .book-card:first-child, .portal-home.is-feature-ranking #ranking .scroll-row > .book-card:first-child, .portal-home.is-feature-newbooks #new-releases .scroll-row > .book-card:first-child, .portal-home.is-feature-salebooks #sales .scroll-row > .book-card:first-child, .portal-home.is-feature-mediaworks #media .scroll-row > .book-card:first-child { min-width: calc((100% - 32px) / 3 + 40px); } } /* Slightly stronger title and CTA for the first featured card */ .portal-home.is-feature-freeworks #featured .scroll-row > .book-card:first-child .book-title, .portal-home.is-feature-ranking #ranking .scroll-row > .book-card:first-child .book-title, .portal-home.is-feature-newbooks #new-releases .scroll-row > .book-card:first-child .book-title, .portal-home.is-feature-salebooks #sales .scroll-row > .book-card:first-child .book-title, .portal-home.is-feature-mediaworks #media .scroll-row > .book-card:first-child .book-title { font-size: 1.04rem; } .portal-home.is-feature-freeworks #featured .scroll-row > .book-card:first-child::after, .portal-home.is-feature-ranking #ranking .scroll-row > .book-card:first-child::after, .portal-home.is-feature-newbooks #new-releases .scroll-row > .book-card:first-child::after, .portal-home.is-feature-salebooks #sales .scroll-row > .book-card:first-child::after, .portal-home.is-feature-mediaworks #media .scroll-row > .book-card:first-child::after { content: "注目"; position: absolute; top: 10px; right: 10px; min-height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--portal-highlight, #ff9900); color: #fff; font-size: 0.72rem; font-weight: 800; z-index: 2; } /* ========================= 主役セクション別 カラー変数 cards.css の --portal-highlight-soft / dark を上書き ========================= */ .portal-home.is-feature-freeworks { --portal-highlight: #ff9900; --portal-highlight-dark: #d97f00; --portal-highlight-soft: #fff0d9; } .portal-home.is-feature-ranking { --portal-highlight: #222222; --portal-highlight-dark: #000000; --portal-highlight-soft: #ececec; } .portal-home.is-feature-newbooks { --portal-highlight: #2a7de1; --portal-highlight-dark: #1f63b6; --portal-highlight-soft: #dcebff; } .portal-home.is-feature-salebooks { --portal-highlight: #f05a28; --portal-highlight-dark: #d94816; --portal-highlight-soft: #ffe0d4; } .portal-home.is-feature-mediaworks { --portal-highlight: #7a4de8; --portal-highlight-dark: #6038bf; --portal-highlight-soft: #e9deff; } /* ========================================================= LS-DESIGN-LITE-3 Manga / e-book affiliate article design polish Added for initial operation after post_id=185 public launch. Scope: single post pages, Cocoon child theme only. ========================================================= */ /* Page base */ body.single-post { background: #f4f5f7; } /* Main article card */ .single-post .article { max-width: 920px; margin: 28px auto 48px; padding: 34px 38px 42px; background: #ffffff; border-radius: 18px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); } /* Title */ .single-post .entry-title { margin-bottom: 18px; padding: 14px 18px; border-left: 7px solid #ff9f1c; border-radius: 10px; background: linear-gradient(90deg, #fff4df 0%, #ffffff 72%); font-size: 1.55rem; line-height: 1.45; font-weight: 800; } /* Date area */ .single-post .date-tags, .single-post .post-date, .single-post .post-update { color: #666; font-size: 0.86rem; } /* Social buttons: reduce visual pressure */ .single-post .sns-share, .single-post .sns-share-buttons, .single-post .sns-follow, .single-post .sns-follow-buttons { margin-top: 14px; margin-bottom: 22px; } .single-post .sns-share .button-caption, .single-post .sns-follow .button-caption { font-size: 0.78rem; } .single-post .sns-buttons a { border-radius: 9px; min-height: 34px; } /* Lead paragraph */ .single-post .entry-content > p:first-of-type { margin-top: 26px; padding: 18px 20px; border: 1px solid #f0d8ad; border-radius: 14px; background: #fffaf1; font-size: 1.02rem; line-height: 1.9; } /* Work info list */ .single-post .entry-content ul { margin: 22px 0 24px; padding: 20px 24px 20px 42px; border: 1px solid #e7e7e7; border-radius: 14px; background: #fafafa; } .single-post .entry-content li { margin: 8px 0; line-height: 1.75; } /* Amazon link as CTA button */ .single-post .entry-content a[href*="amazon.co.jp"], .single-post .entry-content a[href*="amzn.to"] { display: inline-block; margin: 12px 0 18px; padding: 13px 24px; border-radius: 999px; background: linear-gradient(135deg, #ff9900 0%, #ffb84d 100%); color: #111111 !important; font-weight: 800; text-decoration: none; box-shadow: 0 8px 18px rgba(255, 153, 0, 0.26); } .single-post .entry-content a[href*="amazon.co.jp"]:hover, .single-post .entry-content a[href*="amzn.to"]:hover { transform: translateY(-1px); opacity: 0.92; } /* PR / note */ .single-post .entry-content small { display: block; margin-top: 10px; padding: 12px 14px; border-left: 5px solid #d0d0d0; border-radius: 10px; background: #f7f7f7; color: #555555; line-height: 1.8; } /* Category tag */ .single-post .cat-label, .single-post .cat-link, .single-post .entry-category { border-radius: 999px; } /* Mobile */ @media screen and (max-width: 768px) { .single-post .article { margin: 12px 10px 28px; padding: 22px 16px 30px; border-radius: 14px; } .single-post .entry-title { padding: 12px 14px; font-size: 1.22rem; } .single-post .entry-content > p:first-of-type { padding: 14px 15px; } .single-post .entry-content ul { padding: 16px 16px 16px 34px; } .single-post .entry-content a[href*="amazon.co.jp"], .single-post .entry-content a[href*="amzn.to"] { display: block; text-align: center; width: 100%; box-sizing: border-box; } } /* ========================================================= LS-DESIGN-LITE-4 Hide default SNS share UI / author display. Add book cover and multi-store button layout. ========================================================= */ /* Hide Cocoon default large SNS buttons */ .single-post .sns-share, .single-post .sns-share-buttons, .single-post .sns-follow, .single-post .sns-follow-buttons, .single-post .share-button, .single-post .share-buttons, .single-post .bc-brand-color, .single-post .bc-brand-color-white, .single-post .ss-top, .single-post .ss-bottom, .single-post .sns-buttons { display: none !important; } /* Hide visible author display such as ai_publisher */ .single-post .author-info, .single-post .author-box, .single-post .author-name, .single-post .author-link, .single-post .post-author, .single-post .entry-author, .single-post .byline, .single-post .writer { display: none !important; } /* Optional small monochrome share icons area for future use */ .single-post .ls-mini-share { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin: 14px 0 0; } .single-post .ls-mini-share a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; color: #555 !important; background: transparent; text-decoration: none; font-size: 16px; opacity: 0.75; } .single-post .ls-mini-share a:hover { opacity: 1; background: #f0f0f0; } /* Book cover + store card */ .single-post .ls-store-card { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 24px; align-items: center; margin: 24px 0 28px; padding: 22px; border: 1px solid #e6e6e6; border-radius: 18px; background: #ffffff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04); } .single-post .ls-book-cover { text-align: center; } .single-post .ls-book-cover img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); } .single-post .ls-book-cover-placeholder { display: flex; min-height: 210px; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, #f3f3f3 0%, #ffffff 100%); color: #777; font-size: 0.9rem; border: 1px dashed #d0d0d0; } /* Store buttons */ .single-post .ls-store-buttons { display: grid; grid-template-columns: 1fr; gap: 12px; } .single-post .ls-store-btn { display: block; padding: 13px 18px; border-radius: 999px; text-align: center; text-decoration: none !important; font-weight: 800; line-height: 1.4; box-shadow: 0 7px 16px rgba(0, 0, 0, 0.10); } .single-post .ls-store-amazon { background: linear-gradient(135deg, #ff9900 0%, #ffbd59 100%); color: #111 !important; } .single-post .ls-store-kobo { background: linear-gradient(135deg, #bf0000 0%, #e03a3a 100%); color: #fff !important; } .single-post .ls-store-dmm { background: linear-gradient(135deg, #1c64f2 0%, #4f8df7 100%); color: #fff !important; } .single-post .ls-store-btn:hover { transform: translateY(-1px); opacity: 0.94; } /* Mobile layout */ @media screen and (max-width: 768px) { .single-post .ls-store-card { grid-template-columns: 1fr; padding: 18px; } .single-post .ls-book-cover img { max-width: 180px; } .single-post .ls-mini-share { justify-content: center; } } /* ========================================================= LS-CATEGORY-LITE-1 Hide visible category chip such as "未分類" on single posts. CSS only. No WordPress API / no post update. ========================================================= */ body.single-post .cat-label, body.single-post .cat-link, body.single-post .entry-category, body.single-post .entry-categories, body.single-post .post-category, body.single-post .post-categories, body.single-post .footer-post-meta .cat-link, body.single-post .entry-footer .cat-link, body.single-post .entry-footer .cat-label, body.single-post .article-footer .cat-link, body.single-post .article-footer .cat-label, body.single-post a[href*="/category/uncategorized"], body.single-post a[href*="%e6%9c%aa%e5%88%86%e9%a1%9e"] { display: none !important; } /* HOSHIDORI_NEW_RELEASE_V10_START */ .hoshidori-new-releases .section-box {border:1px solid #d8e6fb;border-top:4px solid #3678e5;border-radius:18px;background:linear-gradient(180deg,#f8fbff 0%,#fff 18%);padding:22px;box-shadow:0 12px 30px rgba(30,64,175,.08)} .hoshidori-new-releases .section-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px} .hoshidori-section-title-wrap {display:flex;align-items:center;gap:10px} .hoshidori-section-symbol {display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:28px;padding:0 10px;border-radius:999px;background:#e9f2ff;color:#225cd1;font-size:.72rem;font-weight:900;letter-spacing:.06em} .hoshidori-new-release-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;overflow:visible} .hoshidori-new-release-card {position:relative;min-width:0;border:1px solid #d8e6fb;border-radius:16px;background:#fff;box-shadow:inset 0 3px 0 #dfeeff,0 8px 20px rgba(37,99,235,.08);overflow:hidden} .hoshidori-new-release-card .book-cover {position:relative} .hoshidori-new-badge {position:absolute;top:9px;left:9px;z-index:2;padding:4px 8px;border-radius:999px;background:#3678e5;color:#fff;font-size:.68rem;font-weight:900} .hoshidori-new-release-card .book-meta {padding:14px} .hoshidori-new-release-card .book-title {margin:0 0 8px;font-size:.96rem;line-height:1.5} .hoshidori-new-release-card .book-sub {margin:0 0 12px;color:#667085;font-size:.78rem} .hoshidori-new-release-card .book-cta {display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:42px;margin-top:8px;border-radius:10px;background:#225cd1;color:#fff;font-weight:800;text-decoration:none} .hoshidori-new-release-card .book-store-link-list {display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px} .hoshidori-new-release-card .book-store-link {display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 8px;border:1px solid #cdddf8;border-radius:9px;background:#eff5ff;color:#285fb7;font-size:.78rem;font-weight:800;text-decoration:none} @media (max-width:1024px){.hoshidori-new-release-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.hoshidori-new-releases .section-box{padding:16px 12px;border-radius:14px}.hoshidori-new-release-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.hoshidori-new-release-card{flex:0 0 76%;scroll-snap-align:start}} /* HOSHIDORI_NEW_RELEASE_V10_END */ /* HOSHIDORI_NEW_RELEASE_LAYOUT_FIX_START */ .hoshidori-new-releases .section-box { min-height: 0 !important; height: auto !important; padding-bottom: 22px !important; } .hoshidori-new-release-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)) !important; justify-content: start !important; align-items: stretch !important; min-height: 0 !important; height: auto !important; gap: 16px !important; } .hoshidori-new-release-card { width: 100% !important; max-width: 260px !important; min-height: 0 !important; height: auto !important; } .hoshidori-new-release-card .book-cta { background: #225cd1 !important; border-color: #225cd1 !important; color: #fff !important; box-shadow: 0 8px 18px rgba(34, 92, 209, .18) !important; } .hoshidori-new-release-card .book-cover, .hoshidori-new-release-card .book-card-cover-link { width: 100% !important; } @media (max-width: 640px) { .hoshidori-new-release-grid { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; } .hoshidori-new-release-card { flex: 0 0 78% !important; max-width: 300px !important; scroll-snap-align: start; } } /* HOSHIDORI_NEW_RELEASE_LAYOUT_FIX_END */ /* HOSHIDORI_NEW_RELEASE_COMPACT_START */ .hoshidori-new-releases, .hoshidori-new-releases .section-box, .hoshidori-new-releases .scroll-row, .hoshidori-new-releases .hoshidori-new-release-grid { min-height: 0 !important; height: auto !important; max-height: none !important; } .hoshidori-new-releases .section-box { padding-bottom: 18px !important; } .hoshidori-new-releases .hoshidori-new-release-grid { align-content: start !important; align-items: start !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .hoshidori-new-releases .book-card, .hoshidori-new-releases .hoshidori-new-release-card { align-self: start !important; margin-bottom: 0 !important; } .hoshidori-new-releases::after, .hoshidori-new-releases .section-box::after, .hoshidori-new-releases .scroll-row::after { display: none !important; content: none !important; } /* HOSHIDORI_NEW_RELEASE_COMPACT_END */ /* HOSHIDORI_STORE_LINKS_START */ .hoshidori-store-links { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; } .hoshidori-store-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 10px; border-radius: 10px; border: 1px solid #cfdcf6; background: #f4f8ff; color: #2455b5; font-size: .78rem; font-weight: 800; text-decoration: none; line-height: 1.2; } .hoshidori-store-link--kindle { background: #eef4ff; } .hoshidori-store-link--kobo { background: #effaf1; color: #1d7a3d; border-color: #cfe9d6; } .hoshidori-store-link--dmm { background: #fff4f4; color: #b23838; border-color: #f0d3d3; } .hoshidori-store-link.is-disabled { background: #f3f4f6; color: #7b8592; border-color: #e0e3e8; cursor: default; } /* HOSHIDORI_STORE_LINKS_END */ /* AI_MEDIA_OS_EQUAL_STORE_BUTTONS_START */ .ai-media-os-new-release .store-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } .ai-media-os-new-release .store-buttons > a { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; margin-left: 0 !important; margin-right: 0 !important; } @media (max-width: 768px) { .ai-media-os-new-release .store-buttons { grid-template-columns: minmax(0, 1fr) !important; } } /* AI_MEDIA_OS_EQUAL_STORE_BUTTONS_END */ /* AI_MEDIA_OS_STORE_BUTTON_FIXED_KINDLE_WIDTH_V2_START */ .entry-content .store-buttons, .post-content .store-buttons, .article .store-buttons, .main .store-buttons { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: flex-start !important; } .entry-content .store-buttons > a, .post-content .store-buttons > a, .article .store-buttons > a, .main .store-buttons > a { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; margin: 0 !important; width: 272px !important; min-width: 272px !important; max-width: 272px !important; flex: 0 0 272px !important; } @media (max-width: 768px) { .entry-content .store-buttons, .post-content .store-buttons, .article .store-buttons, .main .store-buttons { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; } .entry-content .store-buttons > a, .post-content .store-buttons > a, .article .store-buttons > a, .main .store-buttons > a { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; } } /* AI_MEDIA_OS_STORE_BUTTON_FIXED_KINDLE_WIDTH_V2_END */ /* AI_MEDIA_OS_EBOOK_PRODUCT_LAYOUT_CONTRACT_V1_START * * 書影は左、書籍情報は右。 * スマートフォンでも商品部分を1列化しない。 */ .single-post .ebook-new-release-article .ebook-product-layout { display: grid !important; grid-template-columns: minmax(160px, 230px) minmax(0, 1fr) !important; align-items: start !important; gap: 24px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .single-post .ebook-new-release-article .ebook-cover-figure { width: 100% !important; max-width: 230px !important; min-width: 0 !important; margin: 0 !important; } .single-post .ebook-new-release-article .ebook-cover-image { display: block !important; width: 100% !important; max-width: 230px !important; height: auto !important; margin: 0 !important; object-fit: contain !important; } .single-post .ebook-new-release-article .ebook-release-metadata-card, .single-post .ebook-new-release-article .ebook-release-metadata, .single-post .ebook-new-release-article .ebook-release-metadata dd { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .single-post .ebook-new-release-article .ebook-release-metadata dd { overflow-wrap: anywhere !important; } @media screen and (max-width: 768px) { .single-post .ebook-new-release-article .ebook-product-layout { grid-template-columns: minmax(92px, 32vw) minmax(0, 1fr) !important; gap: 12px !important; } .single-post .ebook-new-release-article .ebook-cover-figure, .single-post .ebook-new-release-article .ebook-cover-image { max-width: 140px !important; margin: 0 !important; } .single-post .ebook-new-release-article .ebook-release-metadata { grid-template-columns: 52px minmax(0, 1fr) !important; column-gap: 8px !important; row-gap: 6px !important; font-size: 0.88rem !important; line-height: 1.5 !important; } } @media screen and (max-width: 360px) { .single-post .ebook-new-release-article .ebook-product-layout { grid-template-columns: minmax(84px, 30vw) minmax(0, 1fr) !important; gap: 10px !important; } .single-post .ebook-new-release-article .ebook-release-metadata { grid-template-columns: 46px minmax(0, 1fr) !important; column-gap: 6px !important; font-size: 0.82rem !important; } } /* AI_MEDIA_OS_EBOOK_PRODUCT_LAYOUT_CONTRACT_V1_END */ /* HOSHIDORI_TOP_V10_LAYOUT_START */ .hoshidori-top-v10 { width: 100%; margin: 0; padding: 24px 0 48px; } .hoshidori-top-v10__inner { width: min(1180px, calc(100% - 32px)); margin: 0 auto; } .hoshidori-top-v10 .new-releases { margin-top: 0; } @media (max-width: 768px) { .hoshidori-top-v10 { padding: 16px 0 32px; } .hoshidori-top-v10__inner { width: min(100% - 20px, 1180px); } } /* HOSHIDORI_TOP_V10_LAYOUT_END */ /* BR8D_FIX1_ROUNDUP_PREVIEW_HIDE_SNS */ .page-id-714 .sns-share, .page-id-714 .sns-share-message, .page-id-714 .sns-follow, .page-id-714 .sns-follow-message, .page-id-714 .share-button, .page-id-714 .follow-button, .page-id-714 .footer-sns-buttons, .page-id-714 .entry-content + .sns-share, .page-id-714 .article-footer .sns-share, .page-id-714 .article-footer .sns-follow { display: none !important; } /* BR8D_FIX1_ROUNDUP_PREVIEW_HIDE_SNS_END */ /* UI_R2_FRONT_PAGE_HEADER_REMOVE */ /* * 星ドリコミック+ トップページでは * Cocoon標準ヘッダーを完全にレイアウトから除外。 */ body.home #header-container, body.home .header-container, body.home #header-container-in, body.home #header { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* UI_R2_FRONT_PAGE_HEADER_REMOVE_END */ /* UI_R3O_FRONT_TOP_GAP_FIX_START */ /* * フロントページ限定。 * Cocoonヘッダー非表示後に残る上部余白を詰める。 */ body.home #container, body.home #content, body.home #contents, body.home #contents-in, body.home .content, body.home .content-in, body.home #main, body.home .main { margin-top: 0 !important; padding-top: 0 !important; } /* * Cocoon側ラッパー由来の余白をフロントだけ抑制。 */ body.home .container, body.home .wrap, body.home .main-wrap, body.home .content-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* * ヘッダー削除後の空領域を残さない。 */ body.home #header-container, body.home #header-container-in, body.home #header, body.home #header-in { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: 0 !important; } /* UI_R3O_FRONT_TOP_GAP_FIX_END */ /* UI_R3R2_SAFE_HERO_COPY_HIDE_START */ /* * フロントページの新刊ヒーローのみ。 * HTML構造は触らず、文言だけ非表示。 */ body.home .amos-enr__hero-copy-wrap { display: none !important; } /* * 文字を消した分、ヒーローをコンパクト化。 * ビジュアルは維持。 */ body.home .amos-enr__hero { min-height: 150px !important; padding: 18px 28px !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; } /* * 本ビジュアルを右側に固定。 */ body.home .amos-enr__hero-visual { margin: 0 !important; position: relative !important; } /* UI_R3R2_SAFE_HERO_COPY_HIDE_END */ /* UI_R3U_FIX2_EXACT_CTA_START */ /* * トップカルーセルCTA統一 * 速報 / キャンペーン / セール */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card__link, body.home .amos-feature-carousel .amos-ebook-campaigns .amos-campaign-card__link, body.home .amos-feature-carousel .amos-ebook-sales .amos-sale-card__link { align-items: center !important; background: #0f172a !important; border: 0 !important; border-radius: 10px !important; box-sizing: border-box !important; color: #ffffff !important; display: flex !important; font-size: 14px !important; font-weight: 800 !important; justify-content: center !important; line-height: 1.2 !important; margin: 16px 0 0 !important; min-height: 44px !important; padding: 12px 18px !important; text-align: center !important; text-decoration: none !important; width: 100% !important; } body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card__link:hover, body.home .amos-feature-carousel .amos-ebook-campaigns .amos-campaign-card__link:hover, body.home .amos-feature-carousel .amos-ebook-sales .amos-sale-card__link:hover { opacity: 0.90 !important; text-decoration: none !important; } /* UI_R3U_FIX2_EXACT_CTA_END */ /* UI_R3W_CAROUSEL_INTERNAL_CONTROLS_START */ /* * カルーセル本体を基準位置にする */ body.home .amos-feature-carousel { position: relative !important; padding-bottom: 42px !important; } /* * 操作領域そのものをカルーセル全面へ重ねる。 * controls自身はクリックを奪わない。 */ body.home .amos-feature-carousel__controls { position: absolute !important; inset: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; z-index: 20 !important; } /* * 左右矢印をカルーセル内部中央へ。 */ body.home .amos-feature-carousel__arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.40) !important; border-radius: 50% !important; background: rgba(15,23,42,.88) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 16px rgba(15,23,42,.20) !important; cursor: pointer !important; pointer-events: auto !important; z-index: 22 !important; } body.home .amos-feature-carousel__arrow:first-child { left: 14px !important; } body.home .amos-feature-carousel__arrow:last-child { right: 14px !important; } /* * hover時だけ少し濃くする */ body.home .amos-feature-carousel__arrow:hover { background: rgba(15,23,42,1) !important; } /* * 現在位置ドットもカルーセル内部下中央へ */ body.home .amos-feature-carousel__dots { position: absolute !important; left: 50% !important; bottom: 12px !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 5px 9px !important; border-radius: 999px !important; background: rgba(255,255,255,.88) !important; box-shadow: 0 2px 10px rgba(15,23,42,.10) !important; pointer-events: auto !important; z-index: 22 !important; } /* * ドットサイズ */ body.home .amos-feature-carousel__dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; margin: 0 !important; } /* * スマホでは少し小さくして端へ寄せる */ @media (max-width: 720px) { body.home .amos-feature-carousel { padding-bottom: 38px !important; } body.home .amos-feature-carousel__arrow { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } body.home .amos-feature-carousel__arrow:first-child { left: 8px !important; } body.home .amos-feature-carousel__arrow:last-child { right: 8px !important; } body.home .amos-feature-carousel__dots { bottom: 9px !important; } } /* UI_R3W_CAROUSEL_INTERNAL_CONTROLS_END */ /* UI_R3X_CLICKABLE_CARD_AND_DOTS_START */ /* * カルーセル内だけカード全体クリックを視覚化 */ body.home .amos-feature-carousel [data-ui-r3x-clickable="1"] { cursor: pointer !important; } /* * 旧CTAを万一残してもカルーセル内では非表示 */ body.home .amos-feature-carousel a, body.home .amos-feature-carousel button { -webkit-tap-highlight-color: transparent; } body.home .amos-feature-carousel a[href], body.home .amos-feature-carousel button { transition: opacity .2s ease; } /* * ドットをカルーセル内部へ */ body.home .amos-feature-carousel { position: relative !important; padding-bottom: 0 !important; } body.home .amos-feature-carousel__controls { position: absolute !important; inset: 0 !important; margin: 0 !important; pointer-events: none !important; z-index: 20 !important; } body.home .amos-feature-carousel__prev, body.home .amos-feature-carousel__next { pointer-events: auto !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 22 !important; } body.home .amos-feature-carousel__prev { left: 14px !important; } body.home .amos-feature-carousel__next { right: 14px !important; } body.home .amos-feature-carousel__dots { pointer-events: auto !important; position: absolute !important; left: 50% !important; bottom: 14px !important; transform: translateX(-50%) !important; z-index: 22 !important; background: rgba(255, 255, 255, 0.92) !important; border-radius: 999px !important; padding: 4px 8px !important; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10) !important; } body.home .amos-feature-carousel__dot { margin: 0 3px !important; } /* UI_R3X_CLICKABLE_CARD_AND_DOTS_END */ /* UI_R3X_A_LARGE_TRANSPARENT_ARROWS_START */ /* * 大型・高透過カルーセル矢印 */ body.home .amos-feature-carousel .amos-feature-carousel__arrow { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: rgba(15, 23, 42, 0.22) !important; border: 1px solid rgba(15, 23, 42, 0.14) !important; color: rgba(255, 255, 255, 0.98) !important; font-size: 24px !important; font-weight: 900 !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 1 !important; transition: background .18s ease, box-shadow .18s ease !important; } body.home .amos-feature-carousel .amos-feature-carousel__arrow:first-child { left: 8px !important; } body.home .amos-feature-carousel .amos-feature-carousel__arrow:last-child { right: 8px !important; } body.home .amos-feature-carousel .amos-feature-carousel__arrow:hover { background: rgba(15, 23, 42, 0.52) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16) !important; } body.home .amos-feature-carousel .amos-feature-carousel__arrow:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.45) !important; outline-offset: 2px !important; } @media (max-width: 720px) { body.home .amos-feature-carousel .amos-feature-carousel__arrow { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; font-size: 21px !important; background: rgba(15, 23, 42, 0.20) !important; } body.home .amos-feature-carousel .amos-feature-carousel__arrow:first-child { left: 5px !important; } body.home .amos-feature-carousel .amos-feature-carousel__arrow:last-child { right: 5px !important; } } /* UI_R3X_A_LARGE_TRANSPARENT_ARROWS_END */ /* UI_R3X_C_CENTER_CAROUSEL_CONTENT_START */ /* * トップカルーセル内の本文を中央揃え */ body.home .amos-feature-carousel .amos-ebook-breaking, body.home .amos-feature-carousel .amos-ebook-campaigns, body.home .amos-feature-carousel .amos-ebook-sales { text-align: center !important; } /* * ヘッダー部分 */ body.home .amos-feature-carousel .amos-breaking__head, body.home .amos-feature-carousel .amos-campaigns__head, body.home .amos-feature-carousel .amos-sales__head { justify-content: center !important; text-align: center !important; } /* * カード本体 */ body.home .amos-feature-carousel .amos-breaking-card, body.home .amos-feature-carousel .amos-campaign-card, body.home .amos-feature-carousel .amos-sale-card { text-align: center !important; } /* * 上部バッジ類 */ body.home .amos-feature-carousel .amos-breaking-card__top, body.home .amos-feature-carousel .amos-campaign-card__top, body.home .amos-feature-carousel .amos-sale-card__top { justify-content: center !important; } /* * 期限・割引・特典などの情報群 */ body.home .amos-feature-carousel .amos-breaking-card__facts, body.home .amos-feature-carousel .amos-campaign-card__facts, body.home .amos-feature-carousel .amos-sale-card__facts { justify-content: center !important; text-align: center !important; } /* * タイトル・説明文 */ body.home .amos-feature-carousel .amos-breaking-card__title, body.home .amos-feature-carousel .amos-breaking-card__description, body.home .amos-feature-carousel .amos-campaign-card__title, body.home .amos-feature-carousel .amos-campaign-card__description, body.home .amos-feature-carousel .amos-sale-card__title, body.home .amos-feature-carousel .amos-sale-card__description { text-align: center !important; } /* * 件数表示も中央寄せに近づける */ body.home .amos-feature-carousel .amos-breaking__status, body.home .amos-feature-carousel .amos-campaigns__status, body.home .amos-feature-carousel .amos-sales__status { margin-left: auto !important; margin-right: auto !important; } /* UI_R3X_C_CENTER_CAROUSEL_CONTENT_END */ /* UI_R3X_FIX2_CLICKABLE_CARD_STYLE_START */ body.home .amos-feature-carousel [data-carousel-detail-href] { cursor: pointer !important; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } body.home .amos-feature-carousel [data-carousel-detail-href]:hover { background-color: rgba(248, 250, 252, 0.78) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important; } body.home .amos-feature-carousel [data-carousel-detail-href]:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.40) !important; outline-offset: -3px !important; } /* UI_R3X_FIX2_CLICKABLE_CARD_STYLE_END */ /* UI_R3Z_FIX2_BREAKING_HEIGHT_START */ /* - トップカルーセル内の「速報」だけ高さ不足を補正 - hidden や display には触らない - ドット分の余白も少し確保 */ body.home .amos-feature-carousel .amos-ebook-breaking { min-height: 320px !important; padding-bottom: 44px !important; box-sizing: border-box !important; } /* - 速報カード本文側にも少しだけ余白を追加 */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__list, body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__item, body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__content { box-sizing: border-box !important; } /* - スマホはやや低めで十分 */ @media (max-width: 767px) { body.home .amos-feature-carousel .amos-ebook-breaking { min-height: 280px !important; padding-bottom: 40px !important; } } /* UI_R3Z_FIX2_BREAKING_HEIGHT_END */ /* UI_R3Z_FIX3_BREAKING_CARD_HEIGHT_START */ /* * 速報だけ赤枠カード本体が低いため補正。 * hidden / display / carousel制御には触れない。 */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card { min-height: 230px !important; box-sizing: border-box !important; padding-bottom: 54px !important; } /* * カード内コンテンツは上部を維持。 */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card__facts { margin-bottom: 0 !important; } /* * スマホでは少し低くする。 */ @media (max-width: 767px) { body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card { min-height: 210px !important; padding-bottom: 48px !important; } } /* UI_R3Z_FIX3_BREAKING_CARD_HEIGHT_END */ /* UI_R3Z_FIX4_BREAKING_DOT_FIT_START */ /* - トップカルーセル内の速報だけ対象 - ドットが赤枠カード内に収まるよう、高さと下余白を追加 - hidden / display 制御は壊さない */ body.home .amos-feature-carousel .amos-ebook-breaking { min-height: 360px !important; box-sizing: border-box !important; } /* - 速報の赤枠カード本体 */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card, body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__item { min-height: 280px !important; padding-bottom: 84px !important; box-sizing: border-box !important; } /* - 速報のリスト領域も少し確保 */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__list { min-height: 280px !important; } /* - モバイルでは少しだけ抑える */ @media (max-width: 767px) { body.home .amos-feature-carousel .amos-ebook-breaking { min-height: 320px !important; } body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card, body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__item { min-height: 250px !important; padding-bottom: 72px !important; } body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__list { min-height: 250px !important; } } /* UI_R3Z_FIX4_BREAKING_DOT_FIT_END */ /* UI_R3Z_FIX5_BREAKING_DOT_INSIDE_START */ /* * FIX2 / FIX4 で速報ルート外側に追加された * min-height / padding-bottom を打ち消す。 * * 重要: * hidden / display / carousel制御には触れない。 */ body.home .amos-feature-carousel .amos-ebook-breaking { min-height: 0 !important; padding-bottom: 0 !important; } /* * 赤枠カード自体にはキャンペーン・セール相当の高さを確保。 */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card { min-height: 230px !important; padding-bottom: 56px !important; box-sizing: border-box !important; } /* * リスト側に余計な高さを残さない。 */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__list { min-height: 0 !important; } /* * ドットをカルーセル下端ではなく、 * 赤枠内部に見える位置まで少し上げる。 */ body.home .amos-feature-carousel .amos-feature-carousel__dots { bottom: 18px !important; } /* * スマホ */ @media (max-width: 767px) { body.home .amos-feature-carousel .amos-ebook-breaking { min-height: 0 !important; padding-bottom: 0 !important; } body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card { min-height: 215px !important; padding-bottom: 50px !important; } body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking__list { min-height: 0 !important; } body.home .amos-feature-carousel .amos-feature-carousel__dots { bottom: 15px !important; } } /* UI_R3Z_FIX5_BREAKING_DOT_INSIDE_END */ /* UI_R4A_TOP_SECTION_LEFT_ALIGN_START */ /* * トップカルーセル3区分 * - 電子書籍速報 * - 電子書籍キャンペーン * - 電子書籍セール * * の見出し位置を左端でそろえる。 * カルーセル制御・hidden・display には触れない。 */ /* 各セクションの左右基準を統一 */ body.home .amos-ebook-breaking, body.home .amos-ebook-campaigns, body.home .amos-ebook-sales { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } /* ヘッダーラッパーがある場合の左寄せ */ body.home .amos-ebook-breaking .amos-breaking__header, body.home .amos-ebook-campaigns .amos-campaigns__header, body.home .amos-ebook-sales .amos-sales__header { margin-left: 0 !important; padding-left: 0 !important; } /* 英字ラベル */ body.home .amos-ebook-breaking .amos-breaking__eyebrow, body.home .amos-ebook-campaigns .amos-campaigns__eyebrow, body.home .amos-ebook-sales .amos-sales__eyebrow { margin-left: 0 !important; padding-left: 0 !important; text-align: left !important; } /* 日本語タイトル */ body.home .amos-ebook-breaking .amos-breaking__title, body.home .amos-ebook-campaigns .amos-campaigns__title, body.home .amos-ebook-sales .amos-sales__title { margin-left: 0 !important; padding-left: 0 !important; text-align: left !important; } /* 補足説明文 */ body.home .amos-ebook-breaking .amos-breaking__lead, body.home .amos-ebook-campaigns .amos-campaigns__lead, body.home .amos-ebook-sales .amos-sales__lead, body.home .amos-ebook-breaking .amos-breaking__copy, body.home .amos-ebook-campaigns .amos-campaigns__copy, body.home .amos-ebook-sales .amos-sales__copy { margin-left: 0 !important; padding-left: 0 !important; text-align: left !important; } /* 件数バッジが右側要素なら右へ逃がす */ body.home .amos-ebook-breaking .amos-breaking__status, body.home .amos-ebook-campaigns .amos-campaigns__status, body.home .amos-ebook-sales .amos-sales__status { margin-left: auto !important; } /* 念のためスマホも同じ基準 */ @media (max-width: 767px) { body.home .amos-ebook-breaking, body.home .amos-ebook-campaigns, body.home .amos-ebook-sales { padding-left: 16px !important; padding-right: 16px !important; } } /* UI_R4A_TOP_SECTION_LEFT_ALIGN_END */ /* UI_R4B_HIDE_CAROUSEL_COUNT_BADGES_START */ /* * トップカルーセル各セクションの件数表示を非表示 * - 「1件」 * - 「1件掲載中」 * など * * カルーセル制御・hidden・display の本体ロジックには触れない。 */ /* 想定される件数表示 */ body.home .amos-ebook-breaking .amos-breaking__status, body.home .amos-ebook-campaigns .amos-campaigns__status, body.home .amos-ebook-sales .amos-sales__status { display: none !important; } /* 念のため右上件数バッジ系も隠す */ body.home .amos-ebook-breaking [class*="status"], body.home .amos-ebook-campaigns [class*="status"], body.home .amos-ebook-sales [class*="status"] { display: none !important; } /* UI_R4B_HIDE_CAROUSEL_COUNT_BADGES_END */ /* UI_R4C_FORCE_CAROUSEL_HEADERS_LEFT_START */ /* * 件数バッジ非表示後も * BREAKING / CAMPAIGN / SALE の見出しブロックだけ左寄せに固定。 * カード本文の中央揃えは維持。 */ body.home .amos-feature-carousel .amos-breaking__head, body.home .amos-feature-carousel .amos-campaigns__head, body.home .amos-feature-carousel .amos-sales__head { display: block !important; text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; } /* 英字ラベル */ body.home .amos-feature-carousel .amos-breaking__eyebrow, body.home .amos-feature-carousel .amos-campaigns__eyebrow, body.home .amos-feature-carousel .amos-sales__eyebrow { display: block !important; width: 100% !important; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* 日本語見出し */ body.home .amos-feature-carousel .amos-breaking__title, body.home .amos-feature-carousel .amos-campaigns__title, body.home .amos-feature-carousel .amos-sales__title { display: block !important; width: 100% !important; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* 説明文 */ body.home .amos-feature-carousel .amos-breaking__lead, body.home .amos-feature-carousel .amos-campaigns__lead, body.home .amos-feature-carousel .amos-sales__lead, body.home .amos-feature-carousel .amos-breaking__copy, body.home .amos-feature-carousel .amos-campaigns__copy, body.home .amos-feature-carousel .amos-sales__copy { display: block !important; width: 100% !important; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* * 3カテゴリの左端基準を統一 */ body.home .amos-feature-carousel .amos-ebook-breaking, body.home .amos-feature-carousel .amos-ebook-campaigns, body.home .amos-feature-carousel .amos-ebook-sales { text-align: left !important; } /* * ただしカード本文は従来どおり中央揃えを維持 */ body.home .amos-feature-carousel .amos-breaking-card, body.home .amos-feature-carousel .amos-campaign-card, body.home .amos-feature-carousel .amos-sale-card { text-align: center !important; } /* UI_R4C_FORCE_CAROUSEL_HEADERS_LEFT_END */ /* UI_R4D_UNIFY_CAROUSEL_CARD_HEIGHT_START */ /* * トップカルーセル3種の赤枠カード高さを統一。 * * 対象: * - 速報 * - キャンペーン * - セール * * display / hidden / slide制御には触れない。 */ body.home .amos-feature-carousel .amos-breaking-card, body.home .amos-feature-carousel .amos-campaign-card, body.home .amos-feature-carousel .amos-sale-card { min-height: 230px !important; box-sizing: border-box !important; } /* * 以前速報だけに入れた高さ差分を * 共通値で上書き。 */ body.home .amos-feature-carousel .amos-ebook-breaking .amos-breaking-card { min-height: 230px !important; } /* * ドット領域を確保するため * 3カードの下余白も統一。 */ body.home .amos-feature-carousel .amos-breaking-card, body.home .amos-feature-carousel .amos-campaign-card, body.home .amos-feature-carousel .amos-sale-card { padding-bottom: 56px !important; } /* * スマホも3種類を共通化。 */ @media (max-width: 767px) { body.home .amos-feature-carousel .amos-breaking-card, body.home .amos-feature-carousel .amos-campaign-card, body.home .amos-feature-carousel .amos-sale-card { min-height: 215px !important; padding-bottom: 50px !important; } } /* UI_R4D_UNIFY_CAROUSEL_CARD_HEIGHT_END */ /* X_NR_4_FIX1_ROUNDUP_START */ .ai-nr-roundup { margin: 0 !important; } /* PR */ .ai-nr-roundup__pr { margin: 0 0 24px !important; padding: 16px 18px !important; border: 1px solid #f2c987 !important; border-radius: 14px !important; background: #fff9ef !important; line-height: 1.7 !important; } .ai-nr-roundup__lead { margin: 0 0 28px !important; line-height: 1.8 !important; } /* 作品カード */ .article .ai-nr-roundup__item, .entry-content .ai-nr-roundup__item { margin: 0 0 28px !important; padding: 22px !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: 0 5px 18px rgba(15, 23, 42, .05) !important; } /* Cocoon標準h2装飾をカード用に上書き */ .article .ai-nr-roundup__title, .entry-content .ai-nr-roundup__title { margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; border-left: 0 !important; background: transparent !important; color: #172033 !important; font-size: 1.55rem !important; font-weight: 800 !important; line-height: 1.45 !important; } /* 本文 */ .ai-nr-roundup__main { display: grid !important; grid-template-columns: 170px minmax(0, 1fr) !important; gap: 24px !important; align-items: start !important; } .ai-nr-roundup__cover-wrap { width: 170px !important; } .ai-nr-roundup__cover { display: block !important; width: 170px !important; height: auto !important; margin: 0 !important; border-radius: 12px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .10) !important; } .ai-nr-roundup__info { min-width: 0 !important; } .ai-nr-roundup__author { margin: 0 0 14px !important; color: #475569 !important; font-size: 1rem !important; line-height: 1.6 !important; } .ai-nr-roundup__price { display: inline-block !important; margin: 0 0 20px !important; padding: 6px 12px !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #253b56 !important; font-size: 1.35rem !important; font-weight: 800 !important; line-height: 1.2 !important; } /* ストアボタン */ .ai-nr-roundup__stores { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 520px !important; } .article a.ai-nr-roundup__btn, .entry-content a.ai-nr-roundup__btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 46px !important; margin: 0 !important; padding: 10px 8px !important; border-width: 1px !important; border-style: solid !important; border-radius: 999px !important; text-align: center !important; text-decoration: none !important; font-size: .95rem !important; font-weight: 700 !important; line-height: 1.2 !important; box-sizing: border-box !important; box-shadow: none !important; } /* Kindle */ .article a.ai-nr-roundup__btn--kindle, .entry-content a.ai-nr-roundup__btn--kindle { background: #fff5e6 !important; border-color: #ffbf66 !important; color: #8a4b00 !important; } /* 楽天Kobo */ .article a.ai-nr-roundup__btn--rakuten, .entry-content a.ai-nr-roundup__btn--rakuten { background: #fff1f2 !important; border-color: #f5b5bb !important; color: #c40018 !important; } /* DMM */ .article a.ai-nr-roundup__btn--dmm, .entry-content a.ai-nr-roundup__btn--dmm { background: #eef4ff !important; border-color: #bdd0ff !important; color: #1749b5 !important; } .article a.ai-nr-roundup__btn:hover, .entry-content a.ai-nr-roundup__btn:hover { opacity: .88 !important; } /* スマホ */ @media screen and (max-width: 600px) { .article .ai-nr-roundup__item, .entry-content .ai-nr-roundup__item { padding: 16px !important; border-radius: 14px !important; } .article .ai-nr-roundup__title, .entry-content .ai-nr-roundup__title { font-size: 1.22rem !important; margin-bottom: 16px !important; } .ai-nr-roundup__main { grid-template-columns: 110px minmax(0, 1fr) !important; gap: 15px !important; } .ai-nr-roundup__cover-wrap { width: 110px !important; } .ai-nr-roundup__cover { width: 110px !important; } .ai-nr-roundup__author { font-size: .9rem !important; margin-bottom: 10px !important; } .ai-nr-roundup__price { font-size: 1.15rem !important; margin-bottom: 14px !important; } .ai-nr-roundup__stores { grid-template-columns: 1fr !important; gap: 8px !important; } .article a.ai-nr-roundup__btn, .entry-content a.ai-nr-roundup__btn { min-height: 40px !important; padding: 8px 6px !important; font-size: .86rem !important; } } /* X_NR_4_FIX1_ROUNDUP_END */ /* HOSHIDORI_COMMON_HEADER_CSS_START */ /* * トップ以外のページではCocoon標準サイトヘッダーを非表示。 * 星ドリ共通ヘッダーへ統一する。 */ body:not(.home) #header-container, body:not(.home) .header-container, body:not(.home) #header-container-in, body:not(.home) #header, body:not(.home) #header-in { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Cocoonヘッダー削除後の余白を除去 */ body:not(.home) #container, body:not(.home) #content, body:not(.home) #contents, body:not(.home) #contents-in { margin-top: 0 !important; padding-top: 0 !important; } /* * 星ドリコミック+ 共通ヘッダー */ .hoshidori-common-header { width: 100% !important; padding: 14px 22px !important; background: #f7f9fc !important; border-bottom: 1px solid #e5eaf2 !important; box-sizing: border-box !important; } .hoshidori-common-header__inner { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 22px !important; width: 100% !important; max-width: 1180px !important; min-height: 72px !important; margin: 0 auto !important; padding: 10px 16px !important; background: #ffffff !important; border: 1px solid #dfe6f0 !important; border-radius: 20px !important; box-shadow: 0 5px 18px rgba(15, 23, 42, .04) !important; box-sizing: border-box !important; } /* ブランド */ .hoshidori-common-header__brand { display: flex !important; align-items: center !important; gap: 11px !important; color: #172033 !important; text-decoration: none !important; white-space: nowrap !important; } .hoshidori-common-header__mark { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important; border-radius: 14px !important; background: linear-gradient( 145deg, #ffb129, #ff8a00 ) !important; box-shadow: 0 8px 18px rgba(255, 153, 0, .25) !important; color: #ffffff !important; font-size: 1.15rem !important; } .hoshidori-common-header__brand-copy strong { display: block !important; color: #172033 !important; font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: .02em !important; } .hoshidori-common-header__brand-copy small { display: block !important; margin-top: 2px !important; color: #667085 !important; font-size: .72rem !important; line-height: 1.25 !important; } /* 検索 */ .hoshidori-common-header__search { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 54px !important; margin: 0 !important; padding: 5px 6px 5px 16px !important; background: #ffffff !important; border: 1px solid #dce3ed !important; border-radius: 999px !important; box-sizing: border-box !important; } .hoshidori-common-header__search-icon { color: #75849a !important; font-size: 1.1rem !important; } .hoshidori-common-header__search input { width: 100% !important; margin: 0 !important; padding: 8px 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: #334155 !important; font-size: 1rem !important; line-height: 1.4 !important; } .hoshidori-common-header__search input::placeholder { color: #8b97a8 !important; opacity: 1 !important; } .hoshidori-common-header__search button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 74px !important; min-height: 42px !important; margin: 0 !important; padding: 0 17px !important; border: 0 !important; border-radius: 999px !important; background: #ff9900 !important; color: #ffffff !important; font-size: .95rem !important; font-weight: 800 !important; cursor: pointer !important; box-shadow: none !important; } .hoshidori-common-header__search button:hover { background: #ed8e00 !important; } /* タブレット */ @media screen and (max-width: 800px) { .hoshidori-common-header { padding: 10px 12px !important; } .hoshidori-common-header__inner { gap: 14px !important; padding: 9px 12px !important; } .hoshidori-common-header__brand-copy small { display: none !important; } } /* スマホ */ @media screen and (max-width: 600px) { .hoshidori-common-header { padding: 8px !important; } .hoshidori-common-header__inner { grid-template-columns: 1fr !important; gap: 9px !important; min-height: 0 !important; padding: 10px !important; border-radius: 16px !important; } .hoshidori-common-header__brand { justify-content: flex-start !important; } .hoshidori-common-header__mark { width: 38px !important; height: 38px !important; flex-basis: 38px !important; border-radius: 12px !important; } .hoshidori-common-header__brand-copy strong { font-size: .95rem !important; } .hoshidori-common-header__brand-copy small { display: block !important; font-size: .65rem !important; } .hoshidori-common-header__search { min-height: 46px !important; padding-left: 13px !important; } .hoshidori-common-header__search input { font-size: .9rem !important; } .hoshidori-common-header__search button { min-width: 62px !important; min-height: 36px !important; padding: 0 13px !important; font-size: .86rem !important; } } /* HOSHIDORI_COMMON_HEADER_CSS_END */ /* HOSHIDORI_COMMON_HEADER_TRIM_1_START */ /* 非トップページの上部に残る横長の白帯・境界線・余白を消す */ body:not(.home):not(.front-top-page) #header-container, body:not(.home):not(.front-top-page) #header, body:not(.home):not(.front-top-page) .header-container, body:not(.home):not(.front-top-page) .header-wrap, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header-wrap, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header-area, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header-bg, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header-shell { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } body:not(.home):not(.front-top-page) .hoshidori-common-portal-header-wrap, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header-area, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header-shell { padding-top: 10px !important; padding-bottom: 0 !important; margin: 0 !important; } body:not(.home):not(.front-top-page) .hoshidori-common-portal-header, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header__outer, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header__inner { max-width: 760px !important; margin: 0 auto 8px !important; } body:not(.home):not(.front-top-page) .hoshidori-common-portal-header__box, body:not(.home):not(.front-top-page) .hoshidori-common-portal-header__inner { background: #fff !important; border: 1px solid #dfe7f3 !important; border-radius: 18px !important; box-shadow: none !important; } body:not(.home):not(.front-top-page) .content, body:not(.home):not(.front-top-page) .main, body:not(.home):not(.front-top-page) #main { margin-top: 0 !important; } /* HOSHIDORI_COMMON_HEADER_TRIM_1_END */ /* HOSHIDORI_COMMON_HEADER_TRIM_2_START */ /* * 赤枠になっていた全幅ヘッダー帯を削除。 * 共通ヘッダー本体を記事カラムと同じ幅へ収める。 */ body:not(.home) .hoshidori-common-header { width: min(100%, 800px) !important; max-width: 800px !important; margin: 0 auto !important; padding: 10px 0 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* * 白いヘッダーボックス自体も記事幅いっぱいに。 */ body:not(.home) .hoshidori-common-header__inner { width: 100% !important; max-width: none !important; margin: 0 auto !important; min-height: 0 !important; box-sizing: border-box !important; } /* * Cocoon側に残るヘッダー用上部スペースも消す。 */ body:not(.home) #header-container, body:not(.home) #header-container-in, body:not(.home) #header, body:not(.home) #header-in { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* * 共通ヘッダーと本文の横位置を揃える。 */ body:not(.home) #content, body:not(.home) #content-in, body:not(.home) #contents, body:not(.home) #contents-in { margin-top: 0 !important; padding-top: 0 !important; } /* タブレット */ @media screen and (max-width: 850px) { body:not(.home) .hoshidori-common-header { width: calc(100% - 24px) !important; max-width: none !important; } } /* スマホ */ @media screen and (max-width: 600px) { body:not(.home) .hoshidori-common-header { width: calc(100% - 16px) !important; padding-top: 8px !important; } } /* HOSHIDORI_COMMON_HEADER_TRIM_2_END */ /* HOSHIDORI_COMMON_HEADER_INNER_1_START */ /* * #mainへ移動後は、本文枠の内幅をそのまま使用。 */ body:not(.home) #main > .hoshidori-common-header.is-inside-main { width: 100% !important; max-width: none !important; margin: 0 0 24px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* * 共通ヘッダー本体。 * main内部で左右いっぱいに揃える。 */ body:not(.home) #main > .hoshidori-common-header.is-inside-main .hoshidori-common-header__inner { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* * mainの最上部に自然に収める。 */ body:not(.home) #main { box-sizing: border-box !important; } /* スマホ */ @media screen and (max-width: 600px) { body:not(.home) #main > .hoshidori-common-header.is-inside-main { width: 100% !important; margin-bottom: 18px !important; } } /* HOSHIDORI_COMMON_HEADER_INNER_1_END */ /* HOSHIDORI_COMMON_HEADER_INNER_2_START */ /* * #main の内側ではなく、 * 実際の記事本文幅に合わせる。 */ body:not(.home) #main > .hoshidori-common-header.is-inside-main { width: calc(100% - 72px) !important; max-width: none !important; margin: 0 auto 28px auto !important; padding: 0 !important; } /* * ヘッダー内ボックスも同じ幅で固定。 */ body:not(.home) #main > .hoshidori-common-header.is-inside-main .hoshidori-common-header__inner { width: 100% !important; max-width: none !important; margin: 0 !important; } /* タブレット */ @media screen and (max-width: 1024px) { body:not(.home) #main > .hoshidori-common-header.is-inside-main { width: calc(100% - 48px) !important; } } /* スマホ */ @media screen and (max-width: 600px) { body:not(.home) #main > .hoshidori-common-header.is-inside-main { width: calc(100% - 24px) !important; margin-bottom: 20px !important; } } /* HOSHIDORI_COMMON_HEADER_INNER_2_END */ /* HOSHIDORI_COMMON_HEADER_INNER_3_START */ /* * .article の中へ移動した後は、 * 記事本文と同じ親幅をそのまま使用する。 */ body:not(.home) .article > .hoshidori-common-header.is-inside-article { width: 100% !important; max-width: none !important; margin: 0 0 28px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* * ヘッダー内部も親幅いっぱい。 */ body:not(.home) .article > .hoshidori-common-header.is-inside-article .hoshidori-common-header__inner { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* * 以前の #main 用の幅指定を無効化。 */ body:not(.home) #main > .hoshidori-common-header.is-inside-main { width: auto !important; max-width: none !important; margin: 0 !important; } /* スマホ */ @media screen and (max-width: 600px) { body:not(.home) .article > .hoshidori-common-header.is-inside-article { width: 100% !important; margin-bottom: 20px !important; } } /* HOSHIDORI_COMMON_HEADER_INNER_3_END */ /* HOSHIDORI_COMMENTS_HIDE_START */ /* * 星ドリコミック+ではコメント機能を表示しない。 * 投稿・固定ページ・アーカイブ等すべて対象。 */ #comments, .comments, .comment-area, .comment-list, .comment-form, .comment-respond, #respond, #reply-title, .comment-reply-title, .comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url, .form-submit, .comment-btn, .comment-button, .comment-write, .comment-write-area, .comment-form-wrap, .comment-area-wrap, .comment-title, .comment-count, .comment-meta, .comment-navigation, .comment-page-link, .comment-page-links, .comment-pager, .comment-link, .comment-link-box, .comment-link-area, a[href*="#respond"], a[href*="#comments"] { display: none !important; } /* * Cocoon系コメント周辺の余白も残さない。 */ .article-footer .comments, .article-footer #comments, .entry-content + #comments, .entry-content + .comments, .main .comment-area, .main #comments { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: 0 !important; border: 0 !important; } /* HOSHIDORI_COMMENTS_HIDE_END */ /* HOSHIDORI_FOOTER_TRIM_1_START */ /* * 最下部の白いフッター枠を消す。 * 文字は残し、背景・境界線・影だけ外す。 */ #footer, .footer, #footer-in, .footer-in, #footer-bottom, .footer-bottom { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* フッター内側の余白を少しだけ整理 */ #footer-in, .footer-in { padding-top: 12px !important; padding-bottom: 12px !important; } /* コピーライト行も白帯にしない */ .copyright, .footer-bottom-content { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* HOSHIDORI_FOOTER_TRIM_1_END */ /* HOSHIDORI_ONE_FRAME_EXACT_FIX_1_START */ /* * Cocoon標準 .wrap = 1256px を基準に、 * 本文とfooterを同じ中央白枠として連結する。 * * viewport幅・calc幅・100vwは使用しない。 */ /* 本文中央枠 */ body.home #content-in, body.home .content-in { width: 1256px !important; max-width: calc(100% - 16px) !important; margin-left: auto !important; margin-right: auto !important; background: #ffffff !important; box-sizing: border-box !important; } /* * 本文下端をfooterまで白でつなぐ。 * #mainではなく中央wrap側に余白を持たせる。 */ body.home #content-in, body.home .content-in { padding-bottom: 140px !important; } /* main自身の人工延長はしない */ body.home #main, body.home .main { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* * footerもCocoon標準wrapと同じ1256px。 * これで左右位置を本文と完全一致させる。 */ body.home #footer { width: 1256px !important; max-width: calc(100% - 16px) !important; margin: -1px auto 0 auto !important; background: #ffffff !important; background-image: none !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* footer内側は親幅をそのまま使用 */ body.home #footer-in, body.home .footer-in { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 12px 24px !important; background: transparent !important; box-sizing: border-box !important; } body.home .footer-bottom { width: 100% !important; max-width: none !important; margin: 0 !important; background: transparent !important; box-sizing: border-box !important; } /* * footer周辺の外側は薄い背景のまま。 * 中央白枠だけを1枚につなぐ。 */ body.home #container { background: #f6f7fb !important; } @media screen and (max-width: 600px) { body.home #content-in, body.home .content-in, body.home #footer { max-width: calc(100% - 8px) !important; } body.home #content-in, body.home .content-in { padding-bottom: 80px !important; } body.home #footer-in, body.home .footer-in { padding-left: 12px !important; padding-right: 12px !important; } } /* HOSHIDORI_ONE_FRAME_EXACT_FIX_1_END */ /* HOSHIDORI_ROUNDUP_VISUAL_FIX_1_START */ /* * 本日の新刊まとめ記事専用。 * サイト外枠・content幅・スマホ中央幅には触れない。 */ /* カード自身を親幅から出さない */ body.hoshidori-daily-new-release-roundup .ai-nr-roundup__item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* 長いタイトルをカード内で確実に折り返す */ body.hoshidori-daily-new-release-roundup .ai-nr-roundup__title { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; box-sizing: border-box !important; } /* grid内テキストもはみ出し防止 */ body.hoshidori-daily-new-release-roundup .ai-nr-roundup__info { min-width: 0 !important; max-width: 100% !important; } /* * 新刊まとめ記事ではCocoon関連記事を非表示。 * 他の記事には適用しない。 */ body.hoshidori-daily-new-release-roundup .related-entry-heading, body.hoshidori-daily-new-release-roundup .related-list, body.hoshidori-daily-new-release-roundup .related-entries { display: none !important; } /* HOSHIDORI_ROUNDUP_VISUAL_FIX_1_END */ /* HOSHIDORI_ROUNDUP_VISUAL_FIX_2_START */ /* * 本日の新刊まとめ本文を直接検出。 * preview時に専用body classが無くても適用する。 * * 外側のcontent / wrap / footer幅は変更しない。 */ /* まとめ本体 */ body:has(.ai-nr-roundup) .ai-nr-roundup { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* 各作品カード */ body:has(.ai-nr-roundup) .ai-nr-roundup__item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } /* 長いタイトル */ body:has(.ai-nr-roundup) .ai-nr-roundup__title { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; box-sizing: border-box !important; } /* 書影＋情報のgrid全体 */ body:has(.ai-nr-roundup) .ai-nr-roundup__main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* grid子要素が横幅を押し広げない */ body:has(.ai-nr-roundup) .ai-nr-roundup__main > *, body:has(.ai-nr-roundup) .ai-nr-roundup__info { min-width: 0 !important; max-width: 100% !important; } /* ストアボタン領域 */ body:has(.ai-nr-roundup) .ai-nr-roundup__stores { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; box-sizing: border-box !important; } /* 各ボタン */ body:has(.ai-nr-roundup) .ai-nr-roundup__btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* * Cocoon関連記事。 * daily roundup記事だけ非表示。 */ body:has(.ai-nr-roundup) #related-entries, body:has(.ai-nr-roundup) .related-entries, body:has(.ai-nr-roundup) .related-entry-heading, body:has(.ai-nr-roundup) .related-list { display: none !important; } /* * 狭い画面では既存スマホ幅を維持したまま、 * カード内部だけ1列化。 */ @media screen and (max-width: 600px) { body:has(.ai-nr-roundup) .ai-nr-roundup__stores { grid-template-columns: 1fr !important; } } /* HOSHIDORI_ROUNDUP_VISUAL_FIX_2_END */ /* HOSHIDORI_ROUNDUP_FOOTER_EXACT_FRAME_1_START */ /* * JSが実際の .article 幅を測定し、 * --hoshidori-roundup-frame-width に設定する。 * * article / main / content の幅は変更しない。 */ body:has(.ai-nr-roundup) #footer { width: var(--hoshidori-roundup-frame-width) !important; max-width: 100% !important; margin: -1px auto 0 auto !important; padding-top: 8px !important; padding-bottom: 8px !important; background: #ffffff !important; background-image: none !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* footer内側は親footerの実幅をそのまま使う */ body:has(.ai-nr-roundup) #footer-in, body:has(.ai-nr-roundup) .footer-in { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 12px 24px !important; background: transparent !important; background-image: none !important; box-sizing: border-box !important; } body:has(.ai-nr-roundup) .footer-bottom { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; background: transparent !important; box-sizing: border-box !important; } /* 外側のページ背景は白くしない */ body:has(.ai-nr-roundup) #container { background: #f6f7fb !important; } /* スマホでも幅はJS測定値を使用。左右paddingだけ縮小 */ @media screen and (max-width: 600px) { body:has(.ai-nr-roundup) #footer-in, body:has(.ai-nr-roundup) .footer-in { padding-left: 12px !important; padding-right: 12px !important; } } /* HOSHIDORI_ROUNDUP_FOOTER_EXACT_FRAME_1_END */