GIGAZINE more Magin by azalush-x

/* ==UserStyle==
@name         GIGAZINE more Magin
@version      20220127.10.16
@namespace    userstyles.world/user/azalush-x
@description  GIGAZINE のレイアウトマージンを増やして読みやすくする。
その他、本文中の非構造化部分を無理やり構造化など。

※GIGAZINE運営者様の意図の尊重とサイト応援のため、広告の非表示化は行っていません。
@author       align-x
@license      CC-BY SA
==/UserStyle== */

@-moz-document domain("gigazine.net") {
/* GIGAZINE のマージンを増やして読みやすくする */
/* by @align_centre                      */
/* 2021-09-05: プレビュー版                */
/* 2021-09-06: レイアウト微調整            */
/* 2020-09-27: 広告まわり他レイアウト微調整  */

/* body */

body {
    margin: 0;
}
/* フォントをOSデフォルトに */
h1,
h2,
h3,
h4,
a,
p,
span,
blockquote,
li,
th,
td,
dt,
dd,
input,
.yeartime,
.calendarBG {
    font-family: sans-serif;
}


/* フォントカーニング */
h2,
.article b,
.preface b,
.rlcontents-s,
#latest li,
#ranking-entry li,
.cntimage .title {
    font-feature-settings: "palt";
}

/* ヘッダー */
.logo {
    margin: 15px 0 10px 20px;
}
#header-social-button-box {
    margin: auto 20px 9px auto;
}
.sbn {
    margin-bottom: 10px;
}

#main > #section,
#main > #article,
#main > #latest,
#main > #sub,
#subtop {
    padding: 0 20px;
}

/* Google Ads */
#latest .e_ad {
    margin: 0 0 20px 0;
}
#latest .e_ad h2 {
    font-size: 0.72em;
    line-height: 1.3em;
    padding: 0 5px 0 5px;
}
#latest .e_ad .adtag .catab {
    top: 1px;
    left: 0;
}
#latest #LT {
    width: 300px;
    margin-left: -20px;
    max-width: none;
}
.sbn {
    margin: 10px 0;
}
/* Google Ads 左右カラム */
#latest #LB {
    text-align: center;
    margin-left: -20px;
}
#sub #RB {
    text-align: center;
    width: 300px;
    margin-left: -20px;
}

/* トップページ 記事タイル一覧表示 */
.content section .card {
    border-radius: 7px;
    box-shadow: 1px 2px 4px rgb(0 0 0 / 20%);
}

.content section h2,
.contentadleft .e_ad h2 {
    line-height: 1.4em;
}
.content section h2 a,
.contentadleft .e_ad h2 a {
    height: 4.75em;
    padding: 8px 6px;
}

.card .date {
    height: 1.5em;
    border-radius: 0 0 7px 7px;
}
.date time,
.catab,
.contentadleft .e_ad .adtag .catab {
    padding: 4px 6px;
}


/* 最新ニュース */
#main > #latest {
    padding: 0 20px;
    min-width: 300px;
}
#spr1:checked ~ #spv1,
#spr2:checked ~ #spv2,
#spr3:checked ~ #spv3,
#spr3:checked ~ #spv4 {
    margin-left: -20px;
}

/* 記事タイトル */
.cntimage .title {
    padding: 10px 15px;
    font-size: 150%;
    border-radius: 7px;
}

/* 記事本文 */
#main > #section,
#main > #article {
    border: 0px;
}

#article {
    padding: 0 40px;
}
.preface,
.article {
    line-height: 1.85em;
    font-size: 1em;
}

/* 紹介記事URL */
.preface > b + br + b a,
.preface > b > br + a {
    font-style: italic;
    font-weight: 300;
}

/* URLコピーボタン */
.preface:last-of-type {
    margin-bottom: 1.5em;
}
#EndFooter {
    margin-top: 2em;
}


#Google_IL,
.cntimage img,
.yt_iframe {
    margin-top: 1em;
    margin-bottom: 0.7em;
    text-align: center;
    border-radius: 10px;
}

.preface img {
    text-align: center;
}

/* 関連記事, 本文中iframe */
.article {
    margin: 0;
    padding: 19px 4px 30px;
}

.article > b:first-child,
.rlcontents-s .preface b,
.preface big {
    display: block;
    line-height: 2em;
    font-size: 1.25rem;
    background-color: #fef592;
    padding: 0 5px;
    border-radius: 5px;
}
.article > br + br {
    display: none;
}
.article > b:first-child ~ b,
.preface > big ~ b,
.preface > br > b,
.preface > iframe {
    margin-bottom: -0.8em;
    line-height: 1.5em;
    display: block;
    margin-left: 1em;
}
.preface + iframe,
.preface > iframe,
.preface + .loaded {
    margin-top: 1em;
}

/* 最新記事 */
#latest h3,
#ranking-entry h3,
#yt-ranking h3,
#subNav dl dt {
    margin-top: 1em;
    font-size: 120%;
    padding: 5px 10px;
    color: #000;
}

#latest li,
.cntimage .title {
    line-height: 1.5em;
}

/* 関連コンテンツ */
.rlcontents-s > p:first-child {
    font-size: 120%;
}
.rl-list-item {
    border-radius: 0 0 7px 7px;
    margin-bottom: 10px;
}
.rl-list-item-link a {
    padding: 8px;
}

/* 次の記事・前の記事 */
#next-prev .np-bg {
    min-height: 5em;
    padding: 5px 8px;
    border-radius: 0 0 7px 7px;
}

#next-prev p:first-of-type {
    font-size: 1.2em;
}
ul#next-prev li:last-of-type p:first-of-type {
    text-align: right;
}

/* 人気動画 */
#yt-ranking ul {
    flex-direction: row;
    justify-content: left;
}
#yt-ranking li {
    border-radius: 0 0 7px 7px;
    max-width: 300px;
    margin: 5px;
}

.yt-ranking-link {
    display: block;
    padding: 5px 8px;
}

/* 過去記事・サイト内検索 */
#subNav {
    max-width: 900px;
}

#sub #subNav > .list-1,
#sub #subNav > .list-2,
#sub #subNav > .list-3 {
    max-width: 260px;
}
#subNav dl dd#calendar {
    width: 240px;
}
#searchform form {
    width: 260px;
}

/* フッター */
footer {
    padding: 10px;
}

footer .navi-list-2col {
    background: #fd0;
    border-bottom: 0;
}

footer .navi-list-2col dd {
    margin: 5px;
}

footer .navi-list-2col dd a,
footer .navi-list-2col dd a b,
footer .navi-list-2col dd form {
    line-height: 1em;
    left: 0;
    padding: 10px;
    margin-bottom: 0;
}
footer .navi-list-2col dd form i,
footer .navi-list-2col dd form input[type="submit"] {
    line-height: 1em;
    top: 0;
    left: 0;
    padding: 10px;
}
}