``` */ img.unit-svg { display: none; } .unit-svg { display: inline-block; width: 100%; height: 100%; vertical-align: middle; } .unit-svg svg { max-width: 100%; max-height: 100%; } .unit-svg--round { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; } /* #colors */ /*doc --- title: unit-media * name: unit-media category: Unit --- JavaScriptにより、YouTubeの動画コードに対しては自動的に.unit-media--youtubeが付与される。 ```block ``` */ .unit-media--youtube { display: block; position: relative; height: 0; padding-top: 56.25%; } .unit-media--youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*doc --- title: video-js カスタマイズ name: unit-media-2 category: Unit --- video-jsにより出力された動画に対し、スタイルを上書きで表示対応。 ```block ``` */ .video-js { position: relative; width: 100%; height: 0; padding-top: 56.25%; } .video-js video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* #colors */ /*doc --- title: unit-btn name: unit-btn_1 category: Unit --- ページトップへ戻るボタン ```block ボタンボタン VIEW ALL 会員登録 ``` */ .unit-btn { display: -webkit-inline-box; display: inline-flex; justify-content: center; align-items: center; min-width: 200px; height: 60px; min-height: 60px; padding: 0 42px; border: 3px solid #000; border-radius: 30px; color: #000; font-size: 1.4rem; font-weight: bold; vertical-align: top; -webkit-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; -webkit-box-pack: center; -webkit-box-align: center; } .ie11 .unit-btn { padding: 3px 42px 0; } .unit-btn:hover { background: #000; color: #fff; } .unit-btn__text { position: relative; z-index: 1; } .ie11 .unit-btn__text { padding: 3px 0 0; } .unit-btn--en, .unit-btn--more { font-family: 'Ubuntu'; font-size: 1.6rem; font-weight: 500; } .unit-btn--entry { position: relative; min-width: 360px; border: none; border-radius: 0; background: #3969ca; color: #fff; font-size: 1.6rem; letter-spacing: .05em; } .unit-btn--entry .unit-btn__text { color: #fff; } .unit-btn--entry:hover { background: #000; } .unit-btn--more { position: relative; } .unit-btn--more:before { content: ''; display: inline-block; width: 2px; height: 16px; margin: 0 17px 0 7px; background: #000; vertical-align: middle; } .unit-btn--more:after { content: ''; display: block; position: absolute; top: 50%; left: 42px; width: 16px; height: 2px; margin: -1px 0 0; background: #000; } .unit-btn--more:hover:before, .unit-btn--more:hover:after { background: #fff; } /*doc --- title: unit-btn--scroll-top name: unit-btn_2 category: Unit --- ページトップへ戻るボタン ```block ページトップへ戻る ``` */ .unit-btn--scroll-top { display: inline-block; position: relative; overflow: hidden; width: 160px; height: 160px; border-radius: 50%; background: #000; white-space: nowrap; text-indent: 200%; } .unit-btn--scroll-top:before, .unit-btn--scroll-top:after { content: ''; display: block; position: absolute; background: #fff; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .unit-btn--scroll-top:before { top: 28px; left: 50%; width: 34px; height: 3px; margin: 0 0 0 -17px; } .unit-btn--scroll-top:after { top: 39px; left: 50%; width: 24px; height: 24px; margin: 0 0 0 -12px; border-top: 3px solid #fff; border-left: 3px solid #fff; background: transparent; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .unit-btn--scroll-top:hover:before { -webkit-transform: translateY(-7px); transform: translateY(-7px); } .unit-btn--scroll-top:hover:after { -webkit-transform: translateY(-7px) rotateZ(45deg); transform: translateY(-7px) rotateZ(45deg); } /*doc --- title: unit-divide name: unit-divide category: Unit --- 区切り線 ```block
``` */ .unit-divide { width: 100%; height: 6px; margin: 17px 0; border: none; background: -webkit-linear-gradient(left, #ff6636 10%, #9f3a86 25%, #3969ca 40%, #3969ca 60%, #9f3a86 75%, #ff6636 90%); background: linear-gradient(to right, #ff6636 10%, #9f3a86 25%, #3969ca 40%, #3969ca 60%, #9f3a86 75%, #ff6636 90%); background-size: 200% 200%; -webkit-animation: move-background-position 10s linear infinite; animation: move-background-position 10s linear infinite; } .unit-divide--right { -webkit-animation: move-background-position 10s linear -5s infinite; animation: move-background-position 10s linear -5s infinite; } /* #colors */ /*doc --- title: unit-link * name: unit-link category: Unit --- 外部リンクの自動判定機能を使いたい時に使用。
JavaScriptにより target="_blank" を確認したら、icon_outer.svg が最後尾に挿入される。
.unit-svgの形式で挿入されるので、色変更なども.unit-svg同様に可能。 ```block 公式サイト ``` */ .unit-link .unit-svg--outer { width: 1em; height: 1em; margin: 0 0 0 .5em; } /* #colors */ /*doc --- title: unit-fit * name: unit-fit category: Unit --- 画像をトリミングして表示させる。
JavaScriptにより imgタグの下に span.unit-fit-image が挿入される。 ```block ``` */ .unit-fit a .unit-fit-image { -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .unit-fit a:hover .unit-fit-image { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } /* ===================================================== * Module * ================================================== */ /* #colors */ /*doc --- title: module-nav-feature name: module-nav_1 category: Module --- 共通ヘッダー内で使用される特集ページ用ナビ。 ```block ``` */ .module-nav-feature { display: block; margin: 0 0 0 -33px; letter-spacing: -.5em; } .module-nav-feature > * { letter-spacing: normal; } .module-nav-feature__item { display: inline-block; margin: 0 0 0 33px; font-size: 1.5rem; font-weight: bold; } .module-nav-feature__item a:hover { color: #797979; } /*doc --- title: module-nav-category name: module-nav_2 category: Module --- 共通ヘッダー内で使用される強調カテゴリ用ナビ。 ```block ``` */ .module-nav-category { display: -webkit-box; display: flex; position: relative; justify-content: space-between; width: 726px; -webkit-box-pack: justify; } .module-nav-category__item { display: block; position: relative; padding: 0 0 0 30px; font-family: 'Ubuntu'; font-size: 1.7rem; font-weight: 500; letter-spacing: .04em; } .module-nav-category__item .unit-svg { position: absolute; top: 0; left: 0; width: 21px; height: 21px; margin: 0 9px 0 0; vertical-align: top; } .module-nav-category__item a:hover { color: #3969ca; } .module-nav-category__item.display:before { content: ''; display: block; position: absolute; top: 25px; left: 50%; width: 0; height: 0; margin: 0 0 0 -10px; border-width: 0 10px 13px 10px; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, .9) transparent; } .fixed .module-nav-category__item.display:before { top: 35px; } .module-nav-category__sub { display: none; position: absolute; top: 38px; right: 0; overflow: hidden; min-width: 300px; height: 0; padding: 20px; background: rgba(0, 0, 0, .9); -webkit-transition: height .2s ease-out; transition: height .2s ease-out; } .fixed .module-nav-category__sub { top: 48px; } .module-nav-category__item.display .module-nav-category__sub { display: block; } .module-nav-category__sub__item { margin: 14px 0 0; } .module-nav-category__sub__item:first-child { margin: 0; } .module-nav-category__sub__item a { color: #fff; font-size: 1.4rem; font-weight: bold; white-space: nowrap; text-decoration: underline; } .home .module-nav-category { width: 702px; } .home .module-nav-category:before { content: ''; display: block; position: absolute; top: -17px; left: 0; width: 100%; height: 1px; background: #d3d3d0; } .fixed .module-nav-category:before { display: none; } .module-open-nav { display: inline-block; position: relative; color: #797979 !important; } .module-open-nav:after { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 0 3px; border-right: 2px solid #797979; border-bottom: 2px solid #797979; vertical-align: middle; -webkit-transform: rotateZ(45deg) translateY(-4px); transform: rotateZ(45deg) translateY(-4px); } .module-open-nav:hover { color: #3969ca !important; } .module-open-nav:hover:after { border-color: #3969ca; } .module-nav-category__item.display .module-open-nav { color: #797979; } .module-nav-category__item.display .module-open-nav:after { -webkit-transform: rotateZ(225deg) translateX(-2px) translateY(2px); transform: rotateZ(225deg) translateX(-2px) translateY(2px); } /*doc --- title: module-nav-sns name: module-nav_3 category: Module --- 共通ヘッダー内で使用されるSNS用ナビ。 ```block ``` */ .module-nav-sns { display: block; margin: 8px 0 0; letter-spacing: -.5em; } .module-nav-sns > * { letter-spacing: normal; } .module-nav-sns__item { display: inline-block; margin: 0 0 0 15px; } .module-nav-sns__item a { display: block; position: relative; width: 27px; height: 27px; } .module-nav-sns__item a:after { display: none; } .module-nav-sns__item a .unit-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .module-nav-sns__item a .unit-svg path, .module-nav-sns__item a .unit-svg rect, .module-nav-sns__item a .unit-svg polygon { fill: #aaa; } .module-nav-sns__item a:hover { opacity: .7; } /*doc --- title: module-nav-function name: module-nav_4 category: Module --- 共通ヘッダー内で使用される機能(検索・ログイン)用ナビ。 ```block ``` */ .module-nav-function { display: inline-block; margin: 0 -2px 0 19px; padding: 10px 0 6px; letter-spacing: -.5em; } .module-nav-function > * { letter-spacing: normal; } .module-nav-function__item { display: inline-block; margin: 0 13px; } .module-nav-function__item:last-child { margin-right: 0; } .module-nav-function__item a { display: block; position: relative; width: 24px; height: 24px; } .module-nav-function__item a .unit-svg { position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; } .module-nav-function__item a .unit-svg path, .module-nav-function__item a .unit-svg rect, .module-nav-function__item a .unit-svg polygon { fill: #aaa; } .module-nav-function__item a:hover .unit-svg { opacity: .7; } /*doc --- title: module-nav-list name: module-nav_5 category: Module --- 共通フッター内で使用されるナビ。 ```block ``` */ .module-nav-list { display: block; margin: 0 0 0 -40px; letter-spacing: -.5em; } .module-nav-list > * { letter-spacing: normal; } .module-nav-list + .module-nav-list { margin-top: 14px; } .module-nav-list__item { display: inline-block; position: relative; margin: 0 0 0 40px; font-size: 1.3rem; } .module-nav-list__item:before { content: ''; display: block; position: absolute; top: 50%; left: -20px; width: 1px; height: 12px; margin: -6px 0 0; background: #777; } .module-nav-list__item:first-child:before { display: none; } .module-nav-list__item a:hover { opacity: .7; color: inherit; } /* #colors */ /*doc --- title: module-breadcrumbs name: module-breadcrumbs category: Module --- 第2階層以下で使用されるパンくずリスト。
microdataを用いる。 ```block
  1. ホーム
  2. 突破する力
  3. 大リーグマーリンズ投手 田沢純一が日本飛び越え大リーグへ導いた「マイナス思考」
``` */ .module-breadcrumbs { list-style-type: none; padding: 0; letter-spacing: -.5em; } .module-breadcrumbs > * { letter-spacing: normal; } .module-breadcrumbs__item { display: inline; margin: 0 0 0 4px; font-size: 1.2rem; } .module-breadcrumbs__item:before { content: '>'; display: inline-block; margin: 0 10px 0 0; } .module-breadcrumbs__item:first-child { margin: 0; } .module-breadcrumbs__item:first-child:before { display: none; } .module-breadcrumbs__item a:hover { color: #797979; } /* #colors */ /*doc --- title: module-feature name: module-feature category: Module --- 通常記事コンテンツ上部に配置される特集リンクモジュール。 ```block ``` */ .module-feature { padding: 10px 12px; background: #eee; } .module-feature a { display: -webkit-box; display: flex; flex-grow: 1; align-items: center; color: #3969ca; font-size: 1.6rem; font-weight: bold; line-height: 1.5; letter-spacing: .05em; -webkit-box-align: center; -webkit-box-flex: 1; } .module-feature a:hover { color: #797979; } .module-feature__image { position: relative; overflow: hidden; min-width: 88px; max-width: 88px; height: 66px; margin: 0 24px 0 0; } .module-feature__image img { position: absolute; z-index: 0; top: -5%; right: -5%; bottom: -5%; left: -5%; width: 100%; height: 100%; margin: auto; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } a:hover .module-feature__image img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .ie11 a:hover .module-feature__image img, .edge a:hover .module-feature__image img { width: 110%; height: 110%; -webkit-transform: none; transform: none; } .module-feature__heading { flex-grow: 1; -webkit-box-flex: 1; } /* #colors */ /*doc --- title: module-tags name: module-tags category: Module --- 通常記事コンテンツ上部に配置されるタグリンクリストモジュール。 ```block ``` */ .module-tags { margin: 32px 0 0; padding: 0 0 21px; border-bottom: 1px solid #aaa; } .module-tags__list { display: block; margin: 0 0 0 -16px; letter-spacing: -.5em; } .module-tags__list > * { letter-spacing: normal; } .module-tags__item { display: inline; margin: 0 0 0 16px; } .module-tags__item a { color: #3969ca; font-size: 1.3rem; font-weight: bold; letter-spacing: .05em; } .module-tags__item a:hover { color: #797979; } /* #colors */ /*doc --- title: module-header name: module-header category: Module --- 通常記事コンテンツのヘッダーモジュール。 ```block

大リーグマーリンズ投手 田沢純一が日本飛び越え大リーグへ導いた「マイナス思考」

突破する力 [PR] 講談社
ロイター提供

文:遠田寛生、写真:外山俊樹

``` */ .module-header { display: -webkit-box; display: flex; flex-direction: column; align-items: flex-start; margin: 30px 0 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-align: start; } .module-header__heading { display: block; order: 2; width: 100%; margin: 6px 0 0; font-size: 3.2rem; font-weight: bold; line-height: 1.375; letter-spacing: .025em; -webkit-box-ordinal-group: 3; } .module-header__sup { display: -webkit-box; display: flex; justify-content: space-between; align-items: center; order: 1; width: 100%; -webkit-box-pack: justify; -webkit-box-align: center; -webkit-box-ordinal-group: 2; } .module-header__sup__category { flex-grow: 1; color: #ff6636; font-size: 1.6rem; font-weight: bold; -webkit-box-flex: 1; } .module-header__sup__pr { color: #797979; font-size: 1.2rem; font-weight: bold; } .module-header__sup__time { margin: 0 0 0 20px; color: #797979; font-family: 'Ubuntu'; font-size: 1.3rem; font-weight: 500; } .module-header__image { order: 3; width: 672px; margin: 37px auto 0; text-align: center; -webkit-box-ordinal-group: 4; } .module-header__image img { max-width: 100%; max-height: 504px; } .module-header__image figcaption { width: 672px; margin: 16px auto 0; font-size: 1.2rem; text-align: left; } .module-header__credit { order: 4; width: 672px; margin: 11px auto 0; font-size: 1.2rem; -webkit-box-ordinal-group: 5; } /* #colors */ /*doc --- title: module-point name: module-point category: Module --- 通常記事コンテンツのポイントモジュール。 ```block ``` */ .module-point { margin: 48px 0 0; padding: 30px 42px; background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMsaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MCA3OS4xNjA0NTEsIDIwMTcvMDUvMDYtMDE6MDg6MjEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCREREQ0JFNTA1NjcxMUU4OERENThBNjVFRjM0N0NBQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCREREQ0JFNjA1NjcxMUU4OERENThBNjVFRjM0N0NBQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJERERDQkUzMDU2NzExRTg4REQ1OEE2NUVGMzQ3Q0FCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJERERDQkU0MDU2NzExRTg4REQ1OEE2NUVGMzQ3Q0FCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAHQAdAwERAAIRAQMRAf/EAGUAAQEBAQEAAAAAAAAAAAAAAAMBAgQJAQEAAAAAAAAAAAAAAAAAAAAAEAACAQIDBgUFAAAAAAAAAAABAhEAEiEDEzFBUWGhMvDB0UIj4fEikkMRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APbkAkgASTsFAt2lgh+T3ON3IUEIGYCyiHGLoN/MUBUHUcpssWqVvYfk16jA7hJoB0m4p+6+tBRluCCGQEbDevrQNp4asJcMCt62zx29KAVYMAjmAOx+H0oMMpUkEQRQVEukk2ovc3jfQa1BMW/GMLPOeNAVA4jTGr2/zI7vtQZzJhYwy/ZHWedAVB//2Q==) repeat 50% 0; } .module-point dl { display: block; } .module-point dt { position: relative; padding: 11px 0 9px 22px; font-size: 1.5rem; font-weight: bold; letter-spacing: .025em; } .module-point dt:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: -webkit-linear-gradient(top, #ff6636 20%, #9f3a86 50%, #3969ca 80%); background: linear-gradient(to bottom, #ff6636 20%, #9f3a86 50%, #3969ca 80%); } .module-point dd { margin: 12px 0 0; font-size: 1.4rem; line-height: 1.9; letter-spacing: .025em; } /* #colors */ /*doc --- title: module-series name: module-series category: Module --- 通常記事コンテンツのポイントモジュール。 ```block ``` */ .module-series { margin: 60px 0 0; padding: 24px 30px 30px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } .module-series__body a { display: -webkit-box; display: flex; align-items: center; width: 100%; color: #3969ca; font-size: 1.8rem; font-weight: bold; line-height: 1.77778; letter-spacing: .025em; -webkit-box-align: center; } .module-series__body a:hover { color: #797979; } .module-series__body__image { position: relative; overflow: hidden; min-width: 120px; max-width: 120px; height: 90px; margin: 0 28px 0 0; } .module-series__body__image img { position: absolute; z-index: 0; top: -5%; right: -5%; bottom: -5%; left: -5%; width: 100%; height: 100%; margin: auto; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } a:hover .module-series__body__image img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .ie11 a:hover .module-series__body__image img, .edge a:hover .module-series__body__image img { width: 110%; height: 110%; -webkit-transform: none; transform: none; } .module-series__all { margin: 18px 0 0; text-align: center; } /* #colors */ /*doc --- title: module-profile name: module-profile category: Module --- 通常記事コンテンツのプロフィールモジュール。 ```block ``` */ .module-profile { margin: 58px 0 0; padding: 35px 42px; background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMsaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MCA3OS4xNjA0NTEsIDIwMTcvMDUvMDYtMDE6MDg6MjEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCREREQ0JFNTA1NjcxMUU4OERENThBNjVFRjM0N0NBQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCREREQ0JFNjA1NjcxMUU4OERENThBNjVFRjM0N0NBQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJERERDQkUzMDU2NzExRTg4REQ1OEE2NUVGMzQ3Q0FCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJERERDQkU0MDU2NzExRTg4REQ1OEE2NUVGMzQ3Q0FCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAHQAdAwERAAIRAQMRAf/EAGUAAQEBAQEAAAAAAAAAAAAAAAMBAgQJAQEAAAAAAAAAAAAAAAAAAAAAEAACAQIDBgUFAAAAAAAAAAABAhEAEiEDEzFBUWGhMvDB0UIj4fEikkMRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APbkAkgASTsFAt2lgh+T3ON3IUEIGYCyiHGLoN/MUBUHUcpssWqVvYfk16jA7hJoB0m4p+6+tBRluCCGQEbDevrQNp4asJcMCt62zx29KAVYMAjmAOx+H0oMMpUkEQRQVEukk2ovc3jfQa1BMW/GMLPOeNAVA4jTGr2/zI7vtQZzJhYwy/ZHWedAVB//2Q==) repeat 50% 0; } .module-profile__heading { display: block; position: relative; padding: 9px 0 8px 22px; font-size: 1.8rem; font-weight: bold; letter-spacing: .15em; } .module-profile__heading:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: -webkit-linear-gradient(top, #ff6636 20%, #9f3a86 50%, #3969ca 80%); background: linear-gradient(to bottom, #ff6636 20%, #9f3a86 50%, #3969ca 80%); } .module-profile__inner { overflow: hidden; margin: 17px 0 0; padding: 5px 0 0; border-top: 1px solid #aaa; } .module-profile__heading + .module-profile__inner { margin-top: 0; padding-top: 0; border: none; } .module-profile__inner--media-left .module-profile__media { float: left; clear: both; max-width: 246px; padding-right: 30px; } .module-profile__inner--media-right .module-profile__media { float: right; clear: both; width: 246px; margin: 0 !important; padding-left: 30px; } .module-profile__media { position: relative; padding: 18px 0 0; } .module-profile__media img, .module-profile__media iframe, .module-profile__media .video-js { width: 100%; } .module-profile__media .video-js { height: 0; padding-top: 56.25%; } .module-profile__body { overflow: hidden; padding: 18px 0 0; } .module-profile__body__name { display: block; margin: 0; font-size: 1.6rem; font-weight: bold; letter-spacing: .025em; } .module-profile__body__name a { color: #3969ca; } .module-profile__body__name a .unit-svg { margin-top: -.2em; } .module-profile__body__name a .unit-svg path, .module-profile__body__name a .unit-svg rect, .module-profile__body__name a .unit-svg polygon { fill: #3969ca; } .ie11 .module-profile__body__name a .unit-svg { margin-top: -.25em; } .module-profile__body__name a:hover { color: #797979; } .module-profile__body__name a:hover .unit-svg path, .module-profile__body__name a:hover .unit-svg rect, .module-profile__body__name a:hover .unit-svg polygon { fill: #797979; } .module-profile__body__sup { display: block; margin: 6px 0 0; font-size: 1.2rem; font-weight: bold; letter-spacing: .025em; } .module-profile__body__text { margin: 15px 0 0; font-size: 1.3rem; line-height: 1.9; text-align: justify; } .module-profile__body__text > *:first-child { margin-top: 0; } .module-profile__body__text p { margin: 15px 0 0 !important; font-size: 1.3rem !important; } .module-profile__body__text em, .module-profile__body__text strong { font-weight: bold; font-style: normal; } .module-profile__body__text a { color: #3969ca; font-weight: bold; } .module-profile__body__text a:hover { color: #797979; } .module-profile__body__text:first-child { margin-top: 0; } .module-profile__body__text .unit-link .unit-svg--outer { margin: .05em .25em 0 .4em; vertical-align: top; } .module-profile__body__text .unit-link .unit-svg--outer path, .module-profile__body__text .unit-link .unit-svg--outer rect, .module-profile__body__text .unit-link .unit-svg--outer polygon { fill: #3969ca; } .ie11 .module-profile__body__text .unit-link .unit-svg--outer { margin: .15em .25em 0 .4em; } .module-profile__body__text .unit-link:hover .unit-svg--outer path, .module-profile__body__text .unit-link:hover .unit-svg--outer rect, .module-profile__body__text .unit-link:hover .unit-svg--outer polygon { fill: #797979; } .module-profile__body__link { display: block; margin: 10px 0 0; } .module-profile__body__link a { color: #3969ca; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-profile__body__link a .unit-svg { width: 13px; height: 13px; margin-top: -.2em; vertical-align: middle; } .module-profile__body__link a .unit-svg path, .module-profile__body__link a .unit-svg rect, .module-profile__body__link a .unit-svg polygon { fill: #3969ca; } .ie11 .module-profile__body__link a .unit-svg { margin-top: -.3em; } .module-profile__body__link a:hover { color: #797979; } .module-profile__body__link a:hover .unit-svg path, .module-profile__body__link a:hover .unit-svg rect, .module-profile__body__link a:hover .unit-svg polygon { fill: #797979; } .module-profile__contact { margin: 20px 0 0; } .module-profile__contact > *:first-child { margin-top: 0; } .module-profile__contact__heading, .module-profile__contact__text, .module-profile__contact__tel, .module-profile__contact__link { display: block; font-size: 1.3rem; letter-spacing: .025em; } .module-profile__contact__heading, .module-profile__contact__text, .module-profile__contact__tel { margin: 10px 0 0; } .module-profile__contact__link { margin: 7px 0 0; } .module-profile__contact__link a { color: #3969ca; font-weight: bold; } .module-profile__contact__link a .unit-svg { width: 13px; height: 13px; margin-top: -.1em; vertical-align: middle; } .module-profile__contact__link a .unit-svg path, .module-profile__contact__link a .unit-svg rect, .module-profile__contact__link a .unit-svg polygon { fill: #3969ca; } .module-profile__contact__link a:hover { color: #797979; } .module-profile__contact__link a:hover .unit-svg path, .module-profile__contact__link a:hover .unit-svg rect, .module-profile__contact__link a:hover .unit-svg polygon { fill: #797979; } /* #colors */ /*doc --- title: module-credit name: module-credit category: Module --- 通常記事コンテンツのプロフィールモジュール。 ```block ``` */ .module-credit { margin: 58px 0 0; padding: 35px 42px; background: #eee; } .module-credit a { color: #3969ca; } .module-credit a:after { background-color: #eee !important; } .module-credit a:hover { color: #797979; } .module-credit__heading { display: block; position: relative; padding: 9px 0 8px 22px; font-size: 1.8rem; font-weight: bold; letter-spacing: .15em; } .module-credit__heading:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: -webkit-linear-gradient(top, #ff6636 20%, #9f3a86 50%, #3969ca 80%); background: linear-gradient(to bottom, #ff6636 20%, #9f3a86 50%, #3969ca 80%); } .module-credit__inner { overflow: hidden; margin: 17px 0 0; padding: 5px 0 0; border-top: 1px solid #aaa; } .module-credit__heading + .module-credit__inner { margin-top: 0; padding-top: 0; border: none; } .module-credit__inner--media-left .module-credit__media { float: left; clear: both; max-width: 246px; padding-right: 30px; } .module-credit__inner--media-right .module-credit__media { float: right; clear: both; width: 246px; padding-left: 30px; } .module-credit__media { position: relative; padding: 18px 0 0; } .module-credit__media img, .module-credit__media iframe, .module-credit__media .video-js { width: 100%; } .module-credit__media .video-js { height: 0; padding-top: 56.25%; } .module-credit__body { overflow: hidden; padding: 18px 0 0; } .module-credit__body__name { display: block; margin: 0; font-size: 1.6rem; font-weight: bold; letter-spacing: .025em; } .module-credit__body__sup { display: block; margin: 6px 0 0; font-size: 1.2rem; font-weight: bold; letter-spacing: .025em; } .module-credit__body__text { margin: 15px 0 0; font-size: 1.3rem; line-height: 1.9; text-align: justify; } .module-credit__body__text > *:first-child { margin-top: 0; } .module-credit__body__text p { margin: 15px 0 0; } .module-credit__body__text em, .module-credit__body__text strong { font-weight: bold; font-style: normal; } .module-credit__body__text a { font-weight: bold; } .module-credit__body__text:first-child { margin-top: 0; } .module-credit__body__text .unit-link .unit-svg--outer { margin: .05em .25em 0 .4em; vertical-align: top; } .module-credit__body__text .unit-link .unit-svg--outer path, .module-credit__body__text .unit-link .unit-svg--outer rect, .module-credit__body__text .unit-link .unit-svg--outer polygon { fill: #3969ca; } .ie11 .module-credit__body__text .unit-link .unit-svg--outer { margin: .15em .25em 0 .4em; } .module-credit__body__text .unit-link:hover .unit-svg--outer path, .module-credit__body__text .unit-link:hover .unit-svg--outer rect, .module-credit__body__text .unit-link:hover .unit-svg--outer polygon { fill: #797979; } .module-credit__body__link { display: block; margin: 10px 0 0; } .module-credit__body__link a { color: #3969ca; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-credit__body__link a .unit-svg { width: 13px; height: 13px; margin-top: -.2em; vertical-align: middle; } .module-credit__body__link a .unit-svg path, .module-credit__body__link a .unit-svg rect, .module-credit__body__link a .unit-svg polygon { fill: #3969ca; } .ie11 .module-credit__body__link a .unit-svg { margin-top: -.3em; } .module-credit__body__link a:hover { color: #797979; } .module-credit__body__link a:hover .unit-svg path, .module-credit__body__link a:hover .unit-svg rect, .module-credit__body__link a:hover .unit-svg polygon { fill: #797979; } .module-credit__contact { margin: 20px 0 0; } .module-credit__contact > *:first-child { margin-top: 0; } .module-credit__contact__heading, .module-credit__contact__text, .module-credit__contact__tel, .module-credit__contact__link { display: block; font-size: 1.3rem; letter-spacing: .025em; } .module-credit__contact__heading, .module-credit__contact__text, .module-credit__contact__tel { margin: 10px 0 0; } .module-credit__contact__link { margin: 7px 0 0; } .module-credit__contact__link a { color: #3969ca; font-weight: bold; } .module-credit__contact__link a .unit-svg { width: 13px; height: 13px; margin-top: -.1em; vertical-align: middle; } .module-credit__contact__link a .unit-svg path, .module-credit__contact__link a .unit-svg rect, .module-credit__contact__link a .unit-svg polygon { fill: #3969ca; } .module-credit__contact__link a:hover { color: #797979; } .module-credit__contact__link a:hover .unit-svg path, .module-credit__contact__link a:hover .unit-svg rect, .module-credit__contact__link a:hover .unit-svg polygon { fill: #797979; } /* #colors */ /*doc --- title: module-body name: module-body category: Module --- リッチテキストエディタで作成される記事を囲むモジュール。 ```block

H2見出し(中見出し)

``` */ .module-body { margin: 64px 0 0; /*doc --- title: module-body>a name: module-body>a category: Module --- リッチテキストエディタ内のリンク ```block
記事内リンク
``` */ /*doc --- title: module-body>blockquote name: module-body>blockquote category: Article --- リッチテキストエディタ内の引用 ```block
引用文になります。 引用元の名前です
``` */ /*doc --- title: module-body>q name: module-body>q category: Article --- リッチテキストエディタ内の引用(qタグ) ```block
短い引用文になります。
``` */ /*doc --- title: module-body>ul name: module-body>ul category: Article --- リッチテキストエディタ内のリスト表示(ul) ```block
``` */ /*doc --- title: module-body>ol name: module-body>ol category: Article --- リッチテキストエディタ内のリスト表示(ol) ```block
  1. リストの文章になります
  2. リストの文章になります
  3. リストの文章になります
``` */ } .module-body > *:first-child { margin-top: 0; } .module-body > *:last-child { margin-bottom: 0; } .module-body h2 { margin: 48px 0 0; font-size: 1.8rem; font-weight: bold; line-height: 1.55556; letter-spacing: .025em; } .module-body h3 { margin: 24px 0 0; font-size: 1.4rem; font-weight: bold; line-height: 1.9; letter-spacing: .025em; } .module-body p { margin: 12px 0 0; font-size: 1.4rem; line-height: 1.9; text-align: justify; letter-spacing: .025em; } .module-body a { color: #3969ca; font-weight: bold; } .module-body a:hover { color: #797979; } .module-body blockquote { position: relative; width: 590px; margin: 54px auto 66px; padding: 0 30px; border-right: 1px solid #eee; border-left: 1px solid #eee; font-size: 1.6rem; line-height: 1.875; } .module-body blockquote:before, .module-body blockquote:after { content: ''; display: block; position: absolute; width: 22px; height: 30px; background-size: 22px 20px; } .module-body blockquote:before { top: -11px; left: -13px; padding: 0 0 10px; background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9InNpZ24tcXVvdGVzLW9wZW4iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIKCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMjggMTI4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc2lnbi1xdW90ZXMtb3Blbi1zdDB7ZmlsbDojRDNEM0QwO30KPC9zdHlsZT4KPGc+Cgk8cGF0aCBjbGFzcz0ic2lnbi1xdW90ZXMtb3Blbi1zdDAiIGQ9Ik00OS42LDY3LjZIMjguM2MwLjItOC43LDIuMi0xNS43LDYtMjFjMy44LTUuMywxMC4xLTkuNCwxOC45LTEyLjNMNDQuNiwxNmMtOS40LDMuNC0xNy4yLDgtMjMuMiwxMy45CgkJYy02LjEsNS45LTEwLjIsMTIuNi0xMi41LDIwYy0yLjMsNy40LTMuNCwxNy42LTMuNCwzMC40VjExMmg0NC4xVjY3LjZ6IE0xMTguOSw2Ny42SDk3LjVjMC4yLTguNywyLjItMTUuNyw2LTIxCgkJYzMuOC01LjMsMTAuMS05LjQsMTguOS0xMi4zTDExMy45LDE2Yy05LjMsMy40LTE3LDgtMjMuMSwxMy45Yy02LjEsNS45LTEwLjMsMTIuNS0xMi42LDE5LjljLTIuMyw3LjQtMy40LDE3LjUtMy40LDMwLjVWMTEyaDQ0LjEKCQlWNjcuNnoiLz4KPC9nPgo8L3N2Zz4K) no-repeat 0 0; } .module-body blockquote:after { right: -12px; bottom: -14px; padding: 10px 0 0; background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9InN2Zy1zaWduLXF1b3Rlcy1jbG9zZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IgoJIHk9IjBweCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zaWduLXF1b3Rlcy1jbG9zZS1zdDB7ZmlsbDojRDNEM0QwO30KPC9zdHlsZT4KPGc+Cgk8cGF0aCBjbGFzcz0ic2lnbi1xdW90ZXMtY2xvc2Utc3QwIiBkPSJNNzguNCw2MC40aDIxLjNjLTAuMiw4LjctMi4yLDE1LjctNiwyMWMtMy44LDUuMy0xMC4xLDkuNC0xOC45LDEyLjNsOC42LDE4LjNjOS40LTMuNCwxNy4yLTgsMjMuMi0xMy45CgkJYzYuMS01LjksMTAuMi0xMi42LDEyLjUtMjBjMi4zLTcuNCwzLjQtMTcuNiwzLjQtMzAuNFYxNkg3OC40VjYwLjR6IE05LjEsNjAuNGgyMS4zYy0wLjIsOC43LTIuMiwxNS43LTYsMjEKCQljLTMuOCw1LjMtMTAuMSw5LjQtMTguOSwxMi4zbDguNiwxOC4zYzkuMy0zLjQsMTctOCwyMy4xLTEzLjljNi4xLTUuOSwxMC4zLTEyLjUsMTIuNi0xOS45YzIuMy03LjQsMy40LTE3LjUsMy40LTMwLjVWMTZIOS4xVjYwLjQKCQl6Ii8+CjwvZz4KPC9zdmc+Cg==) no-repeat 0 100%; } .module-body cite { display: block; margin: 11px 0 0; font-size: 1.2rem; font-style: normal; line-height: 1.66667; } .module-body cite a { font-weight: bold; } .module-body q { padding: 0 0 4px; border-bottom: 1px dashed #d3d3d0; } .win.chrome .module-body q, .win.firefox .module-body q { padding: 0 0 2px; } .win.ie11 .module-body q, .win.edge .module-body q { padding: 0; } .module-body q:before, .module-body q:after { display: none; } .module-body em, .module-body strong { font-weight: bold; font-style: normal; } .module-body ol, .module-body ul { margin: 25px 0 0; padding: 0 0 0 25px; } .module-body ol > li, .module-body ul > li { position: relative; margin: 10px 0 0; font-size: 1.4rem; line-height: 1.6; letter-spacing: .025em; } .module-body ol > li:first-child, .module-body ul > li:first-child { margin: 0; } .module-body ul > li:before { content: ''; display: block; position: absolute; top: .65em; left: -1em; width: 4px; height: 4px; background: #3969ca; } .module-body ol { counter-reset: editor-counter; list-style-type: none; } .module-body ol > li:before { content: counter(editor-counter); counter-increment: editor-counter; display: -webkit-box; display: flex; position: absolute; top: .125em; left: -1.8em; justify-content: center; align-items: center; width: 18px; height: 18px; background: #3969ca; color: #fff; font-family: 'Ubuntu'; font-size: 1.3rem; font-weight: 700; -webkit-box-pack: center; -webkit-box-align: center; } .module-body figure { position: relative; width: 100%; margin: 46px 0; text-align: center; } .module-body figure img { width: auto; max-width: 100%; height: auto; max-height: 480px; } .module-body figure figcaption { width: 612px; margin: 12px auto 0; font-size: 1.2rem; line-height: 1.75; text-align: center; } /* #colors */ /*doc --- title: module-article-gallery * name: module-article-gallery category: Module --- 記事内に入ってくるギャラリーモジュール。 Slickを使用。 ```block ``` */ .module-gallery { width: 672px; } .module-gallery__for { position: relative; z-index: 0; } .module-gallery__for .slick-counter { position: absolute; right: 62px; bottom: -12px; color: #fff; font-family: 'Ubuntu'; font-size: 2.8rem; font-weight: 500; vertical-align: middle; letter-spacing: -.125em; } .module-gallery__for .slick-counter .current, .module-gallery__for .slick-counter .total { font-weight: bold; } .module-gallery__for .slick-counter .current { color: #ff6636; font-size: 3.2rem; letter-spacing: normal; } .module-gallery__for .slick-counter .slash { display: inline-block; width: 28px; height: 28px; margin: 6px -7px 0; vertical-align: top; } .module-gallery__for .slick-counter .slash path, .module-gallery__for .slick-counter .slash rect, .module-gallery__for .slick-counter .slash polygon { fill: #fff; } .module-gallery__for .slick-counter .total { font-size: 2.6rem; letter-spacing: normal; } .module-gallery.module-gallery--main { margin: 60px auto 0; padding: 40px 0; background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMsaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MCA3OS4xNjA0NTEsIDIwMTcvMDUvMDYtMDE6MDg6MjEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RTdDOTZGMzA2NkMxMUU4OTEwQkMyRTVEQjYyMjZFQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RTdDOTZGNDA2NkMxMUU4OTEwQkMyRTVEQjYyMjZFQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlFN0M5NkYxMDY2QzExRTg5MTBCQzJFNURCNjIyNkVDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlFN0M5NkYyMDY2QzExRTg5MTBCQzJFNURCNjIyNkVDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAHQAdAwERAAIRAQMRAf/EAGUAAQADAQAAAAAAAAAAAAAAAAMAAQIHAQEAAAAAAAAAAAAAAAAAAAAAEAACAQIEBAQHAAAAAAAAAAABAhEAEkFhIgMhMVETcZLSU5HhMlJygiMRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOOKpYgASTQIXs07Z/JxzJyyoIQNwFlEOOLoMcxQFQM/8521/dvu8MqAaCwSCCDBHI0DStves1TFuE9RQYVgwCOYA+h+nyoMMpUkEQRQbVRF78EHxJ6Cgnda6YFsRZhHSguNn3H8g9VAwGz217jOVnRpAMY4nhQZ3Rt3CXa2NEIIjLVQHGz7j+Qeqg//2Q==) repeat 50% 0; } .module-gallery.module-gallery--main .slick-slide { outline: none; } .module-gallery.module-gallery--main .slick-slide.slick-current .module-slide-for__cite { opacity: 1; } .module-gallery.module-gallery--main .module-gallery__for { position: relative; } .module-gallery.module-gallery--main .module-slide-for { cursor: pointer; } .module-gallery.module-gallery--main .module-slide-for__image { display: -webkit-box; display: flex; justify-content: center; align-items: center; height: 411px; padding: 0; -webkit-box-pack: center; -webkit-box-align: center; } .module-gallery.module-gallery--main .module-slide-for__image img { width: auto; max-width: 100%; height: auto; max-height: 100%; } .module-gallery.module-gallery--main .module-slide-for__cite { display: block; margin: 18px 0 0; padding: 0 105px 0 15px; opacity: 0; color: #fff; font-size: 1.2rem; font-weight: bold; font-style: normal; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } .module-gallery.module-gallery--main .module-slide-for__cite a:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Imljb24tb3V0ZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMjggMTI4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMjggMTI4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLmljb24tb3V0ZXItc3Qwe2ZpbGw6ICNmZmY7fQo8L3N0eWxlPgo8cG9seWdvbiBjbGFzcz0iaWNvbi1vdXRlci1zdDAiIHBvaW50cz0iMTE2LjIsMTIxIDYuOSwxMjEgNi45LDExLjcgNTguNywxMS43IDU4LjcsMjMuMiAxOC40LDIzLjIgMTguNCwxMDkuNSAxMDQuNywxMDkuNSAxMDQuNyw2OS4yCgkxMTYuMiw2OS4yICIvPgo8cG9seWdvbiBjbGFzcz0iaWNvbi1vdXRlci1zdDAiIHBvaW50cz0iMTAyLjQsMTcuNCA4MS43LDE3LjQgODEuNyw1LjkgMTIyLDUuOSAxMjIsMTcuNCAxMjIsNDYuMiAxMTAuNSw0Ni4yIDExMC41LDI1LjYgNzQuMyw2MS42IDY2LjEsNTMuNAoJIi8+Cjwvc3ZnPgo=) !important; } .module-gallery.module-gallery--main .module-slide-for__cite a:hover:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Imljb24tb3V0ZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMjggMTI4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMjggMTI4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLmljb24tb3V0ZXItc3Qwe2ZpbGw6IzM5NjljYTt9Cjwvc3R5bGU+Cjxwb2x5Z29uIGNsYXNzPSJpY29uLW91dGVyLXN0MCIgcG9pbnRzPSIxMTYuMiwxMjEgNi45LDEyMSA2LjksMTEuNyA1OC43LDExLjcgNTguNywyMy4yIDE4LjQsMjMuMiAxOC40LDEwOS41IDEwNC43LDEwOS41IDEwNC43LDY5LjIKCTExNi4yLDY5LjIgIi8+Cjxwb2x5Z29uIGNsYXNzPSJpY29uLW91dGVyLXN0MCIgcG9pbnRzPSIxMDIuNCwxNy40IDgxLjcsMTcuNCA4MS43LDUuOSAxMjIsNS45IDEyMiwxNy40IDEyMiw0Ni4yIDExMC41LDQ2LjIgMTEwLjUsMjUuNiA3NC4zLDYxLjYgNjYuMSw1My40CgkiLz4KPC9zdmc+Cg==) !important; } .module-gallery.module-gallery--main .module-slide-for__text { display: none; } .module-gallery.module-gallery--main .module-slide-for__ad { display: none; } .module-gallery.module-gallery--main .module-gallery__nav { position: relative; margin: 37px 0 0; } .module-gallery.module-gallery--main .module-gallery__nav .slick-list { width: 559px; margin: 0 0 0 62px; } .module-gallery.module-gallery--main .module-gallery__nav .slick-slide { position: relative; margin: 0 0 0 14px; } .module-gallery.module-gallery--main .module-gallery__nav .slick-slide figure { cursor: pointer; position: relative; overflow: hidden; } .module-gallery.module-gallery--main .module-gallery__nav .slick-slide .slick-slide-thumb { display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; margin: -50% 0 0 -50%; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .module-gallery.module-gallery--main .module-gallery__nav .slick-slide.slick-current figure:after { content: ''; display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border: 6px solid rgba(57, 105, 202, .8); -webkit-transition: border-width .3s ease; transition: border-width .3s ease; } .module-gallery.module-gallery--main .module-gallery__nav .slick-slide:hover .slick-slide-thumb { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .module-gallery.module-gallery--main .module-gallery__nav .slick-prev, .module-gallery.module-gallery--main .module-gallery__nav .slick-next { outline: none; position: absolute; top: 50%; width: 35px; height: 35px; margin: -18px 0 0; padding: 5px; border: none; background: transparent; } .module-gallery.module-gallery--main .module-gallery__nav .slick-prev svg, .module-gallery.module-gallery--main .module-gallery__nav .slick-next svg { position: absolute; width: 25px; height: 25px; } .module-gallery.module-gallery--main .module-gallery__nav .slick-prev svg path, .module-gallery.module-gallery--main .module-gallery__nav .slick-prev svg rect, .module-gallery.module-gallery--main .module-gallery__nav .slick-prev svg polygon, .module-gallery.module-gallery--main .module-gallery__nav .slick-next svg path, .module-gallery.module-gallery--main .module-gallery__nav .slick-next svg rect, .module-gallery.module-gallery--main .module-gallery__nav .slick-next svg polygon { fill: #fff; } .module-gallery.module-gallery--main .module-gallery__nav .slick-prev { left: 18px; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .module-gallery.module-gallery--main .module-gallery__nav .slick-prev svg { bottom: 5px; left: 5px; } .module-gallery.module-gallery--main .module-gallery__nav .slick-prev:hover { -webkit-transform: translateX(-4px) rotateZ(180deg); transform: translateX(-4px) rotateZ(180deg); } .module-gallery.module-gallery--main .module-gallery__nav .slick-next { right: 18px; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .module-gallery.module-gallery--main .module-gallery__nav .slick-next svg { top: 5px; left: 5px; } .module-gallery.module-gallery--main .module-gallery__nav .slick-next:hover { -webkit-transform: translateX(4px); transform: translateX(4px); } .module-gallery.module-gallery--main .module-slide-nav { outline: none; } .module-gallery.module-gallery--main .module-slide-nav__image { overflow: hidden; height: 80px; } .module-gallery.module-gallery--main .module-slide-nav__image img { height: 100%; } .module-gallery--modal { display: none; position: fixed; z-index: 10; top: 0; left: 0; overflow: auto; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, .95); opacity: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: start; -webkit-box-align: center; } .module-gallery--modal.display { display: -webkit-box; display: flex; -webkit-animation: display-flex-in .5s ease-out forwards; animation: display-flex-in .5s ease-out forwards; } .module-gallery--modal.display.hidden { -webkit-animation: display-flex-out .5s ease-out forwards; animation: display-flex-out .5s ease-out forwards; } .module-gallery--modal__inner { position: relative; width: 1024px; height: 667px; margin: 30px 0; padding: 20px 0; } .module-gallery--modal .slick-slide { outline: none; } .module-gallery--modal__close { outline: none; position: absolute; top: 16px; right: -5px; width: 40px; height: 40px; border: none; background: transparent; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .module-gallery--modal__close:hover { opacity: .7; } .module-gallery--modal__close:before, .module-gallery--modal__close:after { content: ''; display: block; position: absolute; background: #fff; } .module-gallery--modal__close:before { top: 0; left: 50%; width: 2px; height: 40px; margin: 0 0 0 -1px; } .module-gallery--modal__close:after { top: 50%; left: 0; width: 40px; height: 2px; margin: -1px 0 0; } .module-gallery--modal .module-gallery__for .slick-counter { top: 1px; right: auto; bottom: auto; left: 50%; width: 100px; margin: 0 0 0 210px; text-align: left; } .module-gallery--modal .module-gallery__for .slick-counter .current { font-size: 2.6rem; } .module-gallery--modal .module-gallery__for .slick-counter .total { font-size: 2.2rem; } .module-gallery--modal .module-gallery__for .slick-counter .slash { width: 20px; height: 20px; margin: 1px -2px 0; } .module-gallery--modal .module-gallery__for .slick-list { position: relative; z-index: 0; } .module-gallery--modal .module-gallery__for .slick-prev, .module-gallery--modal .module-gallery__for .slick-next { outline: none; position: absolute; z-index: 5; top: 216px; left: 50%; width: 40px; height: 80px; margin: -10px 0 0; padding: 6px; border: none; border-radius: 40px 0 0 40px; background: #000; } .module-gallery--modal .module-gallery__for .slick-prev svg, .module-gallery--modal .module-gallery__for .slick-next svg { position: absolute; top: 50%; left: 9px; width: 24px; height: 24px; margin: -12px 0 0; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .module-gallery--modal .module-gallery__for .slick-prev svg path, .module-gallery--modal .module-gallery__for .slick-prev svg rect, .module-gallery--modal .module-gallery__for .slick-prev svg polygon, .module-gallery--modal .module-gallery__for .slick-next svg path, .module-gallery--modal .module-gallery__for .slick-next svg rect, .module-gallery--modal .module-gallery__for .slick-next svg polygon { fill: #fff; } .module-gallery--modal .module-gallery__for .slick-prev:hover svg, .module-gallery--modal .module-gallery__for .slick-next:hover svg { -webkit-transform: translateX(4px); transform: translateX(4px); } .module-gallery--modal .module-gallery__for .slick-prev { margin: 0 0 0 -512px; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .module-gallery--modal .module-gallery__for .slick-next { margin: 0 0 0 130px; } .module-gallery--modal .module-slide-for { display: -webkit-box; display: flex; align-items: flex-start; -webkit-box-align: start; } .module-gallery--modal .module-slide-for__image { display: -webkit-box; display: flex; float: left; justify-content: center; align-items: center; width: 682px; min-width: 682px; max-width: 682px; height: 511px; min-height: 511px; max-height: 511px; margin: 0 42px 0 0; padding: 0; -webkit-box-pack: center; -webkit-box-align: center; } .module-gallery--modal .module-slide-for__image img { width: auto; max-width: 100%; height: auto; max-height: 100%; } .module-gallery--modal .module-slide-for__body { position: relative; height: 466px; color: #fff; } .module-gallery--modal .module-slide-for__cite { display: block; padding: 55px 0 0 3em; font-size: 1.2rem; font-weight: bold; font-style: normal; line-height: 1.65; text-align: justify; text-indent: -3em; } .module-gallery--modal .module-slide-for__cite a { color: #3969ca; } .module-gallery--modal .module-slide-for__cite a:hover { color: #797979; } .module-gallery--modal .module-slide-for__text { margin: 17px 0 0; padding: 17px 0 0; border-top: 1px solid #fff; font-size: 1.4rem; font-weight: bold; line-height: 1.9; text-align: justify; letter-spacing: .025em; } .module-gallery--modal .module-slide-for__text a { color: #3969ca; } .module-gallery--modal .module-slide-for__text a:hover { color: #797979; } .module-gallery--modal .module-slide-for__ad { position: absolute; z-index: 1; right: 0; bottom: 136px; width: 300px; } .module-gallery--modal .module-gallery__nav { width: 832px; margin: 36px auto 0; } .module-gallery--modal .module-gallery__nav .slick-slide { position: relative; margin: 0 0 0 14px; } .module-gallery--modal .module-gallery__nav .slick-slide figure { cursor: pointer; position: relative; overflow: hidden; } .module-gallery--modal .module-gallery__nav .slick-slide figure:after { content: ''; display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border: 0 solid rgba(57, 105, 202, .8); -webkit-transition: border-width .3s ease; transition: border-width .3s ease; } .module-gallery--modal .module-gallery__nav .slick-slide .slick-slide-thumb { display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; margin: -50% 0 0 -50%; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .module-gallery--modal .module-gallery__nav .slick-slide:hover .slick-slide-thumb { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .module-gallery--modal .module-gallery__nav .slick-slide.slick-current figure:after { border-width: 6px; } .module-gallery--modal .module-gallery__nav .slick-prev, .module-gallery--modal .module-gallery__nav .slick-next { outline: none; position: absolute; top: 50%; width: 35px; height: 35px; margin: -18px 0 0; padding: 5px; border: none; background: transparent; } .module-gallery--modal .module-gallery__nav .slick-prev svg, .module-gallery--modal .module-gallery__nav .slick-next svg { position: absolute; width: 25px; height: 25px; } .module-gallery--modal .module-gallery__nav .slick-prev svg path, .module-gallery--modal .module-gallery__nav .slick-prev svg rect, .module-gallery--modal .module-gallery__nav .slick-prev svg polygon, .module-gallery--modal .module-gallery__nav .slick-next svg path, .module-gallery--modal .module-gallery__nav .slick-next svg rect, .module-gallery--modal .module-gallery__nav .slick-next svg polygon { fill: #fff; } .module-gallery--modal .module-gallery__nav .slick-prev { left: -47px; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .module-gallery--modal .module-gallery__nav .slick-prev svg { bottom: 5px; left: 5px; } .module-gallery--modal .module-gallery__nav .slick-prev:hover { -webkit-transform: translateX(-4px) rotateZ(180deg); transform: translateX(-4px) rotateZ(180deg); } .module-gallery--modal .module-gallery__nav .slick-next { right: -47px; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .module-gallery--modal .module-gallery__nav .slick-next svg { top: 5px; left: 5px; } .module-gallery--modal .module-gallery__nav .slick-next:hover { -webkit-transform: translateX(4px); transform: translateX(4px); } .module-gallery--modal .module-slide-nav { outline: none; } .module-gallery--modal .module-slide-nav__image { overflow: hidden; height: 80px; } .module-gallery--modal .module-slide-nav__image img { height: 100%; } /* #colors */ /*doc --- title: module-related-tags name: module-related-tags category: Module --- 通常記事コンテンツの関連タグモジュール。 ```block ``` */ .module-related-tags { margin: 50px 0 0; } .module-profile + .module-related-tags { margin: 58px 0 0; } .module-related-tags__heading { display: block; text-align: center; } .module-related-tags__heading .unit-svg { width: 163px; height: 25px; } .module-related-tags__heading__sup { display: block; margin: 6px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-related-tags__list { display: block; width: 480px; margin: 10px auto 0; text-align: center; letter-spacing: -.5em; } .module-related-tags__list > * { letter-spacing: normal; } .module-related-tags__item { display: inline-block; margin: 8px 8px 0; } .module-related-tags__item a { color: #3969ca; font-size: 1.6rem; font-weight: bold; line-height: 2; letter-spacing: .025em; } .module-related-tags__item a:hover { color: #797979; } /* #colors */ /*doc --- title: module-trending-tags name: module-trending-tags category: Module --- 通常記事コンテンツの関連タグモジュール。 ```block ``` */ .module-trending-tags { margin: 30px 0 0; } .module-trending-tags__heading { display: block; text-align: center; } .module-trending-tags__heading .unit-svg { width: 175px; height: 25px; } .module-trending-tags__heading__sup { display: block; margin: 6px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-trending-tags__list { display: block; width: 480px; margin: 6px auto 0; text-align: center; letter-spacing: -.5em; } .module-trending-tags__list > * { letter-spacing: normal; } .module-trending-tags__item { display: inline-block; margin: 8px 8px 0; } .module-trending-tags__item a { color: #3969ca; font-size: 1.6rem; font-weight: bold; line-height: 2; letter-spacing: .025em; } .module-trending-tags__item a:hover { color: #797979; } /* #colors */ /*doc --- title: module-article-share name: module-article-share category: Module --- 通常記事コンテンツの記事シェア関連モジュール。 ```block ``` */ .module-article-share { margin: 45px 0 0; padding: 24px 24px 24px 30px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } .module-article-share__inner { display: -webkit-box; display: flex; } .module-article-share__image { width: 138px; min-width: 138px; height: 138px; min-height: 138px; margin: 0 30px 0 0; } .module-article-share__image img { width: 100%; height: 100%; } .module-article-share__body { display: -webkit-box; display: flex; overflow: hidden; flex-grow: 1; flex-direction: column; justify-content: center; padding: 0 0 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: center; -webkit-box-flex: 1; } .module-article-share__heading { font-size: 1.8rem; font-weight: bold; line-height: 1.77778; letter-spacing: .025em; } .module-article-share__list { display: block; margin: 23px 0 0; padding: 0 45px 0 0; text-align: center; letter-spacing: -.5em; } .module-article-share__list > * { letter-spacing: normal; } .module-article-share__title, .module-article-share__item { display: inline-block; vertical-align: middle; } .module-article-share__title { margin: 0 9px 0 0; } .module-article-share__title .unit-svg { width: 65px; height: 21px; } .module-article-share__item { margin: 0 8px; } .module-article-share__item:last-child { margin-right: 0; } .module-article-share__item a { display: block; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } .module-article-share__item a:hover { opacity: .7; } .module-article-share__item a:after { display: none !important; } .module-article-share__item .unit-svg { width: 26px; height: 26px; } .module-article-share__item .unit-svg--facebook path, .module-article-share__item .unit-svg--facebook rect, .module-article-share__item .unit-svg--facebook polygon { fill: #44609c; } .module-article-share__item .unit-svg--twitter path, .module-article-share__item .unit-svg--twitter rect, .module-article-share__item .unit-svg--twitter polygon { fill: #25a0f2; } .module-article-share__item .unit-svg--line path, .module-article-share__item .unit-svg--line rect, .module-article-share__item .unit-svg--line polygon { fill: #00b900; } .module-article-share__item .unit-svg--mailmag path, .module-article-share__item .unit-svg--mailmag rect, .module-article-share__item .unit-svg--mailmag polygon { fill: #75801a; } /* #colors */ /*doc --- title: module-article-pager name: module-article-pager category: Module --- 通常記事コンテンツのページャーモジュール。
前の記事、次の記事、一覧へ遷移できる。 ```block ``` */ .module-article-pager { margin: 70px 0 0; } .module-article-pager__list { display: -webkit-box; display: flex; align-items: center; -webkit-box-align: center; } .module-article-pager__list .unit-svg { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0; } .module-article-pager__prev, .module-article-pager__next { position: relative; width: 50%; } .module-article-pager__prev a, .module-article-pager__next a { display: block; position: relative; width: 100%; height: 100%; font-size: 1.4rem; line-height: 1.71429; } .module-article-pager__prev:before, .module-article-pager__next:before { content: ''; display: block; position: absolute; top: 0; width: 1px; height: 100%; background: #aaa; } .module-article-pager__prev { padding: 0 35px 0 0; } .module-article-pager__prev:before { right: 0; } .module-article-pager__prev a { padding: 0 0 0 68px; } .module-article-pager__prev a .unit-svg { left: 15px; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .module-article-pager__prev a:hover .unit-svg { -webkit-transform: translateX(-4px) rotateZ(180deg); transform: translateX(-4px) rotateZ(180deg); } .module-article-pager__prev a:hover .unit-svg path, .module-article-pager__prev a:hover .unit-svg rect, .module-article-pager__prev a:hover .unit-svg polygon { fill: #3969ca; } .module-article-pager__next { padding: 0 0 0 35px; } .module-article-pager__next:before { left: -1px; } .module-article-pager__next a { padding: 0 68px 0 0; } .module-article-pager__next a .unit-svg { right: 15px; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .module-article-pager__next a:hover .unit-svg { -webkit-transform: translateX(4px); transform: translateX(4px); } .module-article-pager__next a:hover .unit-svg path, .module-article-pager__next a:hover .unit-svg rect, .module-article-pager__next a:hover .unit-svg polygon { fill: #3969ca; } .module-article-pager__more { margin: 40px 0 0; text-align: center; } /* #colors */ /*doc --- title: module-other-stories name: module-other-stories category: Module --- 通常記事コンテンツの特集リンク(「この特集を読む」)モジュール。 ```block ``` */ .module-other-stories { margin: 71px 0 0; } .module-other-stories__heading { display: block; text-align: center; } .module-other-stories__heading .unit-svg { height: 22px; } .module-other-stories__heading__sup { display: block; margin: 12px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-other-stories__body { display: -webkit-box; display: flex; margin: 36px 0 0; } .module-other-stories__body-left { width: 392px; min-width: 392px; margin: 0 36px 0 0; } .module-other-stories__body-right { flex-grow: 1; width: 100%; -webkit-box-flex: 1; } .module-other-stories__feature { cursor: pointer; display: block; } .module-other-stories__feature__header { position: relative; } .module-other-stories__feature__heading { display: block; position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: auto; padding: 6px 24px; background: -webkit-linear-gradient(left, rgba(255, 102, 54, .8) 20%, rgba(159, 58, 134, .8) 50%, rgba(57, 105, 202, .8) 80%); background: linear-gradient(to right, rgba(255, 102, 54, .8) 20%, rgba(159, 58, 134, .8) 50%, rgba(57, 105, 202, .8) 80%); color: #fff; font-size: 1.5rem; font-weight: bold; line-height: 1.6; letter-spacing: .025em; } .module-other-stories__feature__image { position: relative; z-index: 0; overflow: hidden; width: 392px; height: 294px; } .module-other-stories__feature__name { display: block; margin: 6px 0 0; padding: 16px 0 6px 16px; border-left: 1px solid #aaa; font-size: 1.4rem; font-weight: bold; letter-spacing: .025em; } .module-other-stories__feature__text { margin: 12px 0 0; font-size: 1.3rem; line-height: 1.84615; letter-spacing: .025em; } .module-other-stories__feature__pr { display: block; margin: 10px 0 0; color: #797979; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-other-stories__feature:hover .module-other-stories__feature__pr { color: #3969ca; } .module-other-stories__list { display: block; } .module-other-stories__item { display: block; margin: 27px 0 0; } .module-other-stories__item:first-child { margin-top: 0; } .module-other-stories__item a { display: -webkit-box; display: flex; align-items: center; -webkit-box-align: center; } .module-other-stories__item__image { position: relative; overflow: hidden; width: 80px; min-width: 80px; height: 80px; min-height: 80px; margin: 0 18px 0 0; } .module-other-stories__item__image img { position: absolute; z-index: 0; top: -5%; right: -5%; bottom: -5%; left: -5%; width: 100%; height: 100%; margin: auto; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } a:hover .module-other-stories__item__image img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .ie11 a:hover .module-other-stories__item__image img, .edge a:hover .module-other-stories__item__image img { width: 110%; height: 110%; -webkit-transform: none; transform: none; } .module-other-stories__item__heading { font-size: 1.3rem; line-height: 1.76923; letter-spacing: .025em; } .module-other-stories__all { margin: 34px 0 0; text-align: center; } /* #colors */ /*doc --- title: module-link-check name: module-link-check category: Module --- 通常記事コンテンツのリンク(「あわせて読みたい」枠)モジュール。 ```block ``` */ .module-link-check { margin: 59px 0 0; } .module-link-check__heading { display: block; font-size: 1.8rem; font-weight: bold; text-align: center; letter-spacing: .05em; } .module-link-check__list { display: -webkit-box; display: flex; flex-wrap: wrap; align-items: stretch; margin: 27px 0 0; border-bottom: 1px solid #aaa; letter-spacing: -.5em; -webkit-box-align: stretch; } .module-link-check__list > * { letter-spacing: normal; } .module-link-check__item { display: -webkit-box; display: flex; position: relative; width: 50%; } .module-link-check__item a { display: -webkit-box; display: flex; position: relative; flex: 1; align-items: center; padding: 16px 40px 15px 70px; font-size: 1.4rem; line-height: 1.71429; -webkit-box-flex: 1; -webkit-box-align: center; } .module-link-check__item a .unit-svg { position: absolute; top: 50%; left: 25px; width: 20px; height: 20px; margin: -10px 0 0; } .module-link-check__item a:before { content: ''; display: block; position: absolute; top: 20px; width: 1px; height: calc(100% - 40px); background: #aaa; } .module-link-check__item a:hover .unit-svg path, .module-link-check__item a:hover .unit-svg rect, .module-link-check__item a:hover .unit-svg polygon { fill: #3969ca; } .module-link-check__item:nth-child(2n+1) a:before { right: 0; } .module-link-check__item:nth-child(2n+1):after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 200%; height: 1px; border-top: 1px solid #aaa; } .module-link-check__item:nth-child(2n) a:before { left: -1px; } /* #colors */ /*doc --- title: module-related-issues name: module-related-issues category: Module --- 関連するテーマモジュール。 ```block ``` */ .module-related-issues { width: 1024px; margin: 91px auto 0; border-bottom: 1px solid #aaa; } .module-related-issues__heading { display: block; text-align: center; } .module-related-issues__heading .unit-svg { height: 25px; } .module-related-issues__heading__sup { display: block; margin: 9px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-related-issues .unit-divide { position: relative; z-index: 1; margin: 21px 0; } .module-related-issues__body { position: relative; z-index: 0; margin: 34px 0 0; padding: 0 0 36px; } .unit-divide + .module-related-issues__body { margin: 28px 0 0; } .unit-divide + .module-related-issues__body:after { display: none; } .module-related-issues__body:before, .module-related-issues__body:after { content: ''; display: block; position: absolute; } .module-related-issues__body:before { z-index: 0; top: -51px; left: -32px; width: 115px; height: 125px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHMAAAB9CAYAAACRSVyWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA2RjJGNkUyMEYxNzExRThBRjFGQTJGMjFFQzQ0M0NDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA2RjJGNkUzMEYxNzExRThBRjFGQTJGMjFFQzQ0M0NDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDZGMkY2RTAwRjE3MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDZGMkY2RTEwRjE3MTFFOEFGMUZBMkYyMUVDNDQzQ0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FfadtAAAElklEQVR42uzd208bRxjG4TT/eVWpUqVc5KIXpkWBCBFKk7htGpKLVGoSVBpziMGmtikQGzDYrDk5xmfMVlV7wTdqFQ1jj2d2f68E0iskA9I8fOvdneVOGIZ3ovpx/a4Q3uxXbzdF77/Jid55nQ/H+fPuvSiK7/9hoST69s/7oheU/tnfn0g0cjcOv+TV0yWxYntP3one+j4lv56vWF3hzcOm+H7Zb3OipycKoq9MbP3nz4dMZEZTZGN+eawrW1fk8tRuiExkItIVkUuJbWYmMj1KGNS9Ern13c5QRCITmX5EV+TF0/RYV7SuyGruIzMTmREWeT634pXIxcQOMxOZHqX/Mh1rkchEptvRFdnOVa2u5IZydWRYIpGJzGiIPJldG+sK1hW5OFVkZiITkc6I/DWxy8xEpkcZHJx5JTKX3BupSGQi063oiqzOvB/rytUVWUrXmZnIRKQzIl8lisxMZHqU5sIGIpGJTGejK7K+dmR1xV7WulZFIhOZfoksP1wf60rVFfnL9D4zkwxT5g+/iRVxnZTddO+HqcjSdEb0nQdZ0fOTfxjtjzQ9an05URL92TfyXG5y8kD0+Qdl0Wen/jkmQCYyEemSSGYmMv/N8hYiHRK59HudmYlMRDojcvphhZmJTEQ6KxKZsZfZ7CDSIZGTM1VmJjJvzsxNucIGWXm2v5+RK66r9PaGXIHN9OFQRQYrx/L1lgPRj1I1+fpK30udiF5MnYq+q3RTkZlVeRdeelU+s2BtrSH/grxvMDORaTGmIm3HVOSwg0xkDje9SsNI5KA7sLoiM68Cp0QiE5mjjen7SNsxPWpFJnFbZtRFqmd2kEnclhk8/xORyCTOzkxdkeq51lGnXus5LRKZyByvSPV6pO2YXo9EJnFbJiKRSVyS2T669Erk22TFC5HIROZwYnoXne3oisxuXjIziUcyoy7y/+40RyZxU+bBsx1EIpM4OzN1RVbWz6yutOCw46VIZCLTjkh1N5bt6IqcmQ+YmcQjmVEXqe6PRCYZrUx170dX6erVj5bSLwrnRiLr5ZZ8PaWfl9uinyn99FD2mnKUqh61LjyuGoksV+U9QgdK3z/uy/2fSi8FsheVjsy4yzx9UeAZAhoiE7Nyh/bXc3IH9v15uQP73mO54/qrJ/J99JdJ+RdtabvL/zVBJiKdEfnFjxfMTGQi0nuRyIyqTPV9JCLHK/JzZia5i0j/RSIzqjIR6ZbIdj9kZiLzRq6VJ10NPtFP8hdGIq+61/JpmIa9p/ae7I/mjo1Ednty5Xc+1ft6/bYikRl1mbeN6Yy0HV2Rq/m2FysemciMh0j1qBWZxG2ZmbkPiEQmcXZm6orcTtndO1Lc68RCJDKReTuR6rlW2zE914pM4rZMRCKTuCTzstY1Eqle3Rh1Hv10EiuRyIz7zDS9Q8B2dEW+ybaYmcQjmVEXqd6zg0zitszs8yNEIpM4OzN1RW4s2n3fFpxdGYns9ENmJvFIpumd5rZjeqc5MonbMhGJTOKSzPbHvpFI21dHkq/riERmjGam6f5I29EVubDeYmYSj2RGXaTpc3Zcz18CDACqXt4aeS3atgAAAABJRU5ErkJggg==) no-repeat 0 0; } .module-related-issues__body:after { top: -34px; left: 0; width: 100%; height: 1px; background: #aaa; } .module-related-issues__body__heading { display: block; position: relative; z-index: 1; padding: 0 0 0 30px; font-family: 'Ubuntu', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 2.4rem; font-weight: 700; letter-spacing: .075em; } .module-related-issues__body__heading span { margin: 0 9px 0 0; font-style: italic; } .module-related-issues__inner { position: relative; z-index: 1; padding: 0 16px 0 20px; } .module-related-issues__list { display: -webkit-box; display: flex; margin: 19px 0 0; } .module-related-issues__list__item { width: 25%; padding: 0 10px; } .module-related-issues__list__item a { display: -webkit-box; display: flex; align-items: center; width: 100%; -webkit-box-align: center; } .module-related-issues__list__image { position: relative; overflow: hidden; width: 80px; min-width: 80px; height: 80px; min-height: 80px; margin: 0 20px 0 0; } .module-related-issues__list__heading { font-size: 1.3rem; line-height: 1.53846; letter-spacing: .025em; } .module-related-issues__more { position: absolute; z-index: 5; top: -5px; right: 23px; margin: 0; } .module-related-issues__more a { display: block; padding: 5px; font-family: 'Ubuntu'; font-size: 1.4rem; font-weight: 500; letter-spacing: .05em; } .module-related-issues__more a .unit-svg { width: 26px; height: 26px; margin: 0 0 0 12px; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .module-related-issues__more a:hover .unit-svg { -webkit-transform: translateX(3px) translateY(3px); transform: translateX(3px) translateY(3px); } .module-related-issues__more a:hover .unit-svg path, .module-related-issues__more a:hover .unit-svg rect, .module-related-issues__more a:hover .unit-svg polygon { fill: #3969ca; } /* #colors */ /*doc --- title: module-list-articles name: module-list-articles category: Module --- 記事一覧用モジュール。
**PRがグレーになるのはどのような仕様で入れることができるのか、要確認** ```block ``` */ .module-list-articles { display: block; margin: -47px 0 0 -62px; letter-spacing: -.5em; } .module-list-articles > * { letter-spacing: normal; } .module-list-articles__item { display: inline-block; width: calc((100% - 186px) / 3); margin: 47px 0 0 62px; vertical-align: top; } .module-list-articles__item > div { margin: 0 !important; } .module-list-articles__item a { display: block; } .module-list-articles__item a:hover .module-list-articles__category { color: #3969ca; } .module-list-articles__image { position: relative; overflow: hidden; height: 0; padding-top: 75%; } .module-list-articles__image img { position: absolute; z-index: 0; top: -5%; right: -5%; bottom: -5%; left: -5%; width: 100%; height: 100%; margin: auto; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } a:hover .module-list-articles__image img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .ie11 a:hover .module-list-articles__image img, .edge a:hover .module-list-articles__image img { width: 110%; height: 110%; -webkit-transform: none; transform: none; } .module-list-articles__icon { display: block; position: relative; height: 0; } .module-list-articles__icon .unit-svg { position: absolute; top: -22px; left: 50%; margin: 0 0 0 -22px; } .module-list-articles__category { display: block; margin: 26px 0 0; color: #ff6636; font-size: 1.4rem; font-weight: bold; } .module-list-articles__heading { display: block; margin: 6px 0 0; font-size: 1.6rem; font-weight: bold; line-height: 1.75; letter-spacing: .025em; } .module-list-articles__writer { display: block; margin: 11px 0 0; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-list-articles__writer--pr { color: #797979; } a:hover .module-list-articles__writer--pr { color: #3969ca; } .module-list-articles__tags { margin: 11px 0 0; padding: 8px 0 0; border-top: 1px solid #aaa; } .module-list-articles__tags__list { display: block; margin: 0 0 0 -13px; letter-spacing: -.5em; } .module-list-articles__tags__list > * { letter-spacing: normal; } .module-list-articles__tags__item { display: inline-block; margin: 0 0 0 13px; } .module-list-articles__tags__item a { display: block; color: #3969ca; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-list-articles__tags__item a:hover { color: #797979; } .module-list-articles__time { display: block; margin: 8px 0 0; color: #797979; font-family: 'Ubuntu'; font-size: 1.3rem; font-weight: 500; letter-spacing: .075em; } .module-list-articles--col2 { display: block; margin: 0 0 0 -36px; letter-spacing: -.5em; } .module-list-articles--col2 > * { letter-spacing: normal; } .module-list-articles--col2 .module-list-articles__item { width: calc( (100% - 72px) / 2); margin: 10px 0 0 36px; padding: 0 0 36px; } .module-list-articles--col2 .module-list-articles__category { margin: 19px 0 0; } .module-list-articles--col2 .module-list-articles__heading { margin: 8px 0 0; font-size: 1.8rem; text-align: justify; } .module-list-articles--col2 .module-list-articles__writer { margin: 13px 0 0; } .module-list-articles--col2 .module-list-articles__tags { margin: 16px 0 0; padding: 14px 0 0; } .module-list-articles--col2 .module-list-articles__tags__list { margin: 0 0 0 -17px; } .module-list-articles--col2 .module-list-articles__tags__item { margin: 0 0 0 17px; } .module-list-articles--col3 { display: block; margin: -47px 0 0 -24px; letter-spacing: -.5em; } .module-list-articles--col3 > * { letter-spacing: normal; } .module-list-articles--col3 + .module-list-articles--col3 { margin-top: 0; } .module-list-articles--col3 .module-list-articles__item { width: calc( (100% - 72px) / 3); margin: 47px 0 0 24px; } .module-list-articles--col3.hidden { display: none; } .module-list-articles--col3 .module-list-articles__category { margin: 18px 0 0; } .module-list-articles--col3 .module-list-articles__heading { margin: 10px 0 0; font-size: 1.4rem; line-height: 1.8; text-align: justify; } .module-list-articles--col3 .module-list-articles__writer { margin: 10px 0 0; font-size: 1.2rem; } .module-list-articles--col3 .module-list-articles__tags { margin: 13px 0 0; padding: 9px 0 0; } .module-slide-main .module-list-articles { position: relative; margin: 0 0 0 -18px; } .module-slide-main .module-list-articles a:hover { color: #3969ca; } .module-slide-main .module-list-articles a:hover .module-list-articles__category, .module-slide-main .module-list-articles a:hover .module-list-articles__writer { color: #3969ca; } .module-slide-main .module-list-articles__item { width: 600px; margin: 0 0 0 18px; } .module-slide-main .module-list-articles__image { padding-top: 66.67%; } .module-slide-main .module-list-articles__icon { display: inline-block; } .module-slide-main .module-list-articles__icon .unit-svg { position: static; margin: -4px -15px 0 0; padding: 11px; background: transparent; } .module-slide-main .module-list-articles__category { display: inline-block; margin: 14px 0 0; padding: 0 10px; } .module-slide-main .module-list-articles__heading { padding: 0 10px; } .module-slide-main .module-list-articles__writer { margin: 9px 0 0; padding: 0 10px; } .module-slide-main .module-list-articles .slick-track { margin-left: 9px; } .module-slide-main .module-list-articles .slick-slide { outline: none; } .module-slide-main .module-list-articles .slick-slide a:hover .slick-slide-thumb { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .module-slide-main .module-list-articles .slick-slide-thumb { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .module-slide-main .module-list-articles .slick-prev, .module-slide-main .module-list-articles .slick-next { outline: none; position: absolute; z-index: 1; top: 160px; overflow: hidden; width: 80px; height: 80px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, .8); white-space: nowrap; text-indent: 200%; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .module-slide-main .module-list-articles .slick-prev .unit-svg, .module-slide-main .module-list-articles .slick-next .unit-svg { position: absolute; top: 50%; left: 10px; width: 24px; height: 24px; margin: -12px 0 0; text-indent: 0; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .module-slide-main .module-list-articles .slick-prev .unit-svg path, .module-slide-main .module-list-articles .slick-prev .unit-svg rect, .module-slide-main .module-list-articles .slick-prev .unit-svg polygon, .module-slide-main .module-list-articles .slick-next .unit-svg path, .module-slide-main .module-list-articles .slick-next .unit-svg rect, .module-slide-main .module-list-articles .slick-next .unit-svg polygon { fill: #fff; } .module-slide-main .module-list-articles .slick-prev { left: -22px; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .module-slide-main .module-list-articles .slick-prev:hover { -webkit-transform: scale3d(1.25, 1.25, 1) rotateZ(180deg); transform: scale3d(1.25, 1.25, 1) rotateZ(180deg); } .module-slide-main .module-list-articles .slick-prev:hover .unit-svg { -webkit-transform: scale3d(.8, .8, 1) translateX(0); transform: scale3d(.8, .8, 1) translateX(0); } .module-slide-main .module-list-articles .slick-next { right: -40px; } .module-slide-main .module-list-articles .slick-next:hover { -webkit-transform: scale3d(1.25, 1.25, 1); transform: scale3d(1.25, 1.25, 1); } .module-slide-main .module-list-articles .slick-next:hover .unit-svg { -webkit-transform: scale3d(.8, .8, 1) translateX(0); transform: scale3d(.8, .8, 1) translateX(0); } .module-slide-flow .module-list-articles { position: relative; margin: 0; text-align: left; } .module-slide-flow .module-list-articles__item { width: 320px; margin: 0 0 0 18px; } .module-slide-flow .module-list-articles__item__info { display: -webkit-box; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 240px; padding: 50px 0 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: center; -webkit-box-align: center; } .module-slide-flow .module-list-articles__item__info .time { display: block; font-family: 'Ubuntu'; font-size: 4.2rem; font-weight: 700; letter-spacing: .025em; } .module-slide-flow .module-list-articles__item__info .unit-divide { width: 220px; height: 4px; margin: 6px 0 15px; } .module-slide-flow .module-list-articles__item__info .heading { display: block; font-family: 'Ubuntu'; font-size: 2.2rem; font-weight: 700; font-style: italic; } .module-slide-flow .module-list-articles__item__more { margin: 20px 0 0; } .module-slide-flow .module-list-articles__item__more a { display: inline-block; font-family: 'Ubuntu'; font-size: 1.4rem; font-weight: 500; } .module-slide-flow .module-list-articles__item__more a .unit-svg { width: 24px; height: 24px; } .module-slide-flow .module-list-articles__item__more a:hover .unit-svg path, .module-slide-flow .module-list-articles__item__more a:hover .unit-svg rect, .module-slide-flow .module-list-articles__item__more a:hover .unit-svg polygon { fill: #3969ca; } .module-slide-flow .module-list-articles__icon { display: inline-block; } .module-slide-flow .module-list-articles__icon .unit-svg { position: static; margin: -4px -15px 0 0; padding: 11px; background: transparent; } .module-slide-flow .module-list-articles__category { display: inline-block; margin: 14px 0 0; padding: 0 10px; } .module-slide-flow .module-list-articles__heading { padding: 0 10px; } .module-slide-flow .module-list-articles__writer { padding: 0 10px; } /* #colors */ /*doc --- title: module-recommended name: module-recommended category: Module --- 編集部おすすめモジュール。 ```block ``` */ .module-editors-picks { width: 1024px; margin: 91px auto 0; } .module-editors-picks__heading { display: block; text-align: center; } .module-editors-picks__heading .unit-svg { width: 196px; height: 25px; } .module-editors-picks__heading__sup { display: block; margin: 10px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-editors-picks .unit-divide { margin: 20px 0; } .module-editors-picks__body { padding: 14px 0 0; } /* #colors */ /*doc --- title: module-recommended name: module-recommended category: Module --- あなたへのおすすめモジュール。 ```block ``` */ .module-recommended { width: 1024px; margin: 85px auto 0; } .module-recommended__heading { display: block; text-align: center; } .module-recommended__heading .unit-svg { height: 25px; } .module-recommended__heading__sup { display: block; margin: 7px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-recommended .unit-divide { margin: 20px 0; } .module-recommended__body { padding: 14px 0 0; } /* #colors */ /*doc --- title: module-side-ad name: module-side-ad category: Module --- サイドエリア広告モジュール。 ```block
``` */ .module-side-ad { margin: 24px 0 0; } .module-side-ad > div { margin: 0 !important; } .module-side-ad a { display: block; } /* #colors */ /*doc --- title: module-side-notice name: module-side-notice category: Module --- サイドエリア記事一覧モジュール。 ```block ``` */ .module-side-notice { margin: 24px 0 0; padding: 30px 30px; border: 2px solid #3969ca; } .module-side-notice__list { display: block; } .module-side-notice__item { display: block; padding: 31px 0; border-top: 1px solid #aaa; } .module-side-notice__item:first-child { padding-top: 0; border-top: 0; } .module-side-notice__item:last-child { padding-bottom: 0; } .module-side-notice__item > div { margin: 0 !important; } .module-side-notice__item a { display: block; } .module-side-notice__item a:hover .module-side-notice__item__category { color: #3969ca; } .module-side-notice__item__image { position: relative; overflow: hidden; height: 0; padding-top: 75%; } .module-side-notice__item__image img { position: absolute; z-index: 0; top: -5%; right: -5%; bottom: -5%; left: -5%; width: 100%; height: 100%; margin: auto; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } a:hover .module-side-notice__item__image img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .ie11 a:hover .module-side-notice__item__image img, .edge a:hover .module-side-notice__item__image img { width: 110%; height: 110%; -webkit-transform: none; transform: none; } .module-side-notice__item__category { display: block; margin: 17px 0 0; color: #ff6636; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-side-notice__item__heading { display: block; margin: 7px 0 0; font-size: 1.6rem; font-weight: bold; line-height: 1.75; letter-spacing: .025em; } /* #colors */ /*doc --- title: module-pr name: module-pr category: Module --- サイドエリア注目コンテンツ[PR]一覧モジュール。 ```block ``` */ .module-pr { margin: 47px 0 0; } .module-pr__heading { display: block; font-size: 1.6rem; font-weight: bold; text-align: center; letter-spacing: .025em; } .module-pr__list { margin: 16px 0 0; border-top: 2px solid #797979; } .module-pr__item { padding: 12px 0 16px; border-bottom: 1px solid #aaa; } .module-pr__item a { display: block; } .module-pr__item a:hover .module-pr__item__cite { color: #3969ca; } .module-pr__item a:hover:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Imljb24tb3V0ZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMjggMTI4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMjggMTI4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLmljb24tb3V0ZXItc3Qwe2ZpbGw6IzM5NjljYTt9Cjwvc3R5bGU+Cjxwb2x5Z29uIGNsYXNzPSJpY29uLW91dGVyLXN0MCIgcG9pbnRzPSIxMTYuMiwxMjEgNi45LDEyMSA2LjksMTEuNyA1OC43LDExLjcgNTguNywyMy4yIDE4LjQsMjMuMiAxOC40LDEwOS41IDEwNC43LDEwOS41IDEwNC43LDY5LjIKCTExNi4yLDY5LjIgIi8+Cjxwb2x5Z29uIGNsYXNzPSJpY29uLW91dGVyLXN0MCIgcG9pbnRzPSIxMDIuNCwxNy40IDgxLjcsMTcuNCA4MS43LDUuOSAxMjIsNS45IDEyMiwxNy40IDEyMiw0Ni4yIDExMC41LDQ2LjIgMTEwLjUsMjUuNiA3NC4zLDYxLjYgNjYuMSw1My40CgkiLz4KPC9zdmc+Cg==); } .module-pr__item__heading { display: block; font-size: 1.4rem; font-weight: bold; line-height: 1.9; letter-spacing: .025em; } .module-pr__item__cite { display: block; margin: 7px 0 0; color: #797979; font-size: 1.2rem; font-weight: bold; } /* #colors */ /*doc --- title: module-popular name: module-popular category: Module --- サイドエリア広告モジュール。 ```block ``` */ .module-popular { margin: 49px 0 55px; } .module-popular__heading { display: block; text-align: center; } .module-popular__heading .unit-svg { height: 23px; } .module-popular__heading__sup { display: block; margin: 6px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .025em; } .module-popular .unit-divide { margin: 15px 0; } .module-popular__list { list-style-type: none; margin: 30px 0 0; } .module-popular__item { position: relative; margin: 24px 0 0; } .module-popular__item:before { content: ''; display: block; position: absolute; top: 0; right: 0; width: 58px; height: 80px; } .module-popular__item:nth-child(1):before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABQCAYAAABI1GYUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5Mzk0MjM5NS1iOWExLTRlMTAtYWNmNi1jZmUwYzVkMzY0N2QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEJDRTBDOTQwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUEyQUJEQTgwRjE4MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZDIwY2ZmYmUtOTAwNi00YTBiLWIxMjUtNjA2MDBmODJmNTYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkzOTQyMzk1LWI5YTEtNGUxMC1hY2Y2LWNmZTBjNWQzNjQ3ZCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg9mFewAAAFaSURBVHja7NyxSwJhGMdxz38qOMGWqJYgEZyCaAjDrSXCtaHFtSUXgwZna61ZCPwDzM3dRXISXldtKB7v3t894ve33Xj3ue8d3HBJCKG0DyuX9mT+TrR5EP46Xl6nW92CCbdu7C3mQSGJaPS9dTNJzi6OadSH6O1RIZKIqt+LVslJrUGjGtHxKHiURDR2g1klhydNGs1H9KMfdlESUe9NvlfvaTTOU3dHJBH9d+3zQiV7lUcaLaTR35I/z51CJBHNKmv9WmeV7Bw+0Wgc0ZeHjSsUpt8uJRFVzyp5d/pKoy5FVZKIqmeVvKoPaNSlqEoSUfWskmeXnzTqUlQliah6VsnqzZBGXYqqJBFVzyqZtr5o1KWoShJR9aySNOpVVCWJqHpWSRr1KqqSRFQ9qySNehVVSSJKo4jSKKI0SqM0SqOI0iiiNIro+kbjzf8wWI8R9dooJ5rzVgIMAG7lLHQXPE+TAAAAAElFTkSuQmCC) no-repeat 100% 100%; } .module-popular__item:nth-child(2):before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABQCAYAAABI1GYUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5Mzk0MjM5NS1iOWExLTRlMTAtYWNmNi1jZmUwYzVkMzY0N2QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEJDRTBDOTgwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEJDRTBDOTcwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZDIwY2ZmYmUtOTAwNi00YTBiLWIxMjUtNjA2MDBmODJmNTYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkzOTQyMzk1LWI5YTEtNGUxMC1hY2Y2LWNmZTBjNWQzNjQ3ZCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiBqA1gAAAHuSURBVHja7Nu/SwJhGAfw7J8KKiQoKoKgqKaswYYkihBcaiiHIGxxyC3EJTCMCskiapFA6QcoRJIIDUVRQ0hUahDxNjS9ktwd7/P63nt9v9uz3PB8+N5xx3suxljLf0gr+RX3N/jNTbdZmxeHpGzeBVGjZFNicgbz55Sbm8uePgZRKaLEclYl78eGGURJRG0meT3oYRA1JVp9ZzpJZnt9DKKmOqqZ5FFXgEHU1F1XM8nMQpxBVMpztP4txiCikonOZXTUnGgpZ01SMKKS0Y4QOmouKxP8Rvw9UjdEJQlRy7KSY1Uy7F5HR20ZKkmIqk7tuSwkGeyOoqO2DJUkRHWXjIfP0VFHSPoHttBRW4jKloRos7LXv9oUSYjqJlmtfKGjSkSp764nqVt0VIkotWQkdIEzDEpEqSWDgTTOGSkRtZskRJ0mCVHVktFIHud1lYhSv4XIkoSoUdJzMa0kIdooladXLSUhahRRybWljJLNQpRacnbyUOlGIUol6R1J2mKTEK2PqGRih/8Ou5m84+ZY6oF/zh48ks4QpZIcHT/m5n7vKTe7fWfc3D5zSTrnSr//8UB0e35Xa8n6GaJOkURHnSKJjjaK7pLoqFMk0dFGKRZeuE0Ubvgz71dF/utgvvT2Z0dUzR+1b3TUkfkRYACZbl6GNcPn9wAAAABJRU5ErkJggg==) no-repeat 100% 100%; } .module-popular__item:nth-child(3):before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABQCAYAAABI1GYUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5Mzk0MjM5NS1iOWExLTRlMTAtYWNmNi1jZmUwYzVkMzY0N2QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEJDRTBDOUMwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEJDRTBDOUIwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZDIwY2ZmYmUtOTAwNi00YTBiLWIxMjUtNjA2MDBmODJmNTYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkzOTQyMzk1LWI5YTEtNGUxMC1hY2Y2LWNmZTBjNWQzNjQ3ZCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvJO9RgAAAHxSURBVHja7NzNSwJRFAXw7J8KKiQIKqSosCJQiIzIQoiiNoYkhFHQhyEtXZQtMtpILSrIUCiCWkQUSAWiQmGgq5SgxWvVYqTBZt57znU6Z3c3LubHGd+7iBbGWMN/SKOwT8o9KZ/YRBPffJcQKmCBqFoKb2LlqsyfY1bFzMofDKJCRCXLVZMsOjsVc2E7xCCqS5SYZHawXzG/TC8wiFLsqFbJhx6nYs5FjhlE/yS6Pkla8qrDjY6S6KhoyZO2OXRU31lX8K2j8uzKK3nQusggqivePqlPSJQkRKlFq2S4ZRUdNbUkRKlFq+SmNYSOmloSokYnMbzMJRl0RNFREjnv9nFJ+tvD6KgU0Xe/UibtDXDdQnglISpKkvc+KUoSokZvBkRLQlRvav12XRo9Qkdr0lHZkjO2fcXsssfwPSpF9HF+w1DJAccZzrpSOmq0ZJcrifsoiaz0RoRK2mZvGUQppJgvcUla3dfoKMmUS19cks1TN+goyYyMx7kkPcEUgyjFaJVER6lmL5bhkvyZIUoteiXRUbNJBnbT6OivySSfWT1JoqNqqbbjSV1mGGVJiKpF9rZOtKTdd4+OmkISHVV92w7tmEISopWpd0mImk0SopVZ85ySkozG8/idkZQNw0XyVark1mEW/5Viyp2RqHwLMADPiDACv9KLQwAAAABJRU5ErkJggg==) no-repeat 100% 100%; } .module-popular__item:nth-child(4):before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABQCAYAAABI1GYUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5Mzk0MjM5NS1iOWExLTRlMTAtYWNmNi1jZmUwYzVkMzY0N2QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEJEMEY0OTEwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEJEMEY0OTAwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZDIwY2ZmYmUtOTAwNi00YTBiLWIxMjUtNjA2MDBmODJmNTYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkzOTQyMzk1LWI5YTEtNGUxMC1hY2Y2LWNmZTBjNWQzNjQ3ZCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PodO7q4AAAILSURBVHja7NrNSwJBHMbx7M/qhewgEkQQ1UmJ8lDQoZdDp7pVF6GunpQlozCwN4kiKkiICCEsIjEswuwUEVQaXZzOO0jtOC877Dy/2xx3P/vddXb1EUJaTJjWFkPG9QOtTwdsl9R3pMu2fgsHbevyUL9t/bqRdnRJ+nDpai551xdiEoKoNMmFYaGSlWQGjboiSqxFoZKXwTE06oooyWelSj5ah2hUjWjtS6rkcfcMGnWlUdmShcQJGlUiKltyu3MOjSoRVS15Hc+iUSmiqiWT7UtoVIqo6P0kq2QucYFGhYj+RKe4JD9uilySsY4VNCpEtF4ucUkWZpf/3E+ySp5bOTQqpFHR73hYJaP+GBoVIipakt5PskqerubRaFOist+7skrOByw02pSobEl6P8kqebB+i0Ydida2klIl6WGVnOxNodGmGmWVfM+XmM4cvZ9kldxJFdGoI1HZ30LoYZUcHdhDo45EVUvS+0lWyc30AxptKFoZCSuVpIdVcjB0hEYbitarValv0Hl/8fwn2RM5s6394/bncnz/hZjZqNck2ybsd3NzROn/u3pN0txGvSZpbqO83yd1lzS3Ua9Jmtso7/dJ3SXNbdTt4ZXEflQX0bXdJyHPSYjq1ijv3RWiuohamWchz0mI6tYoqyQa1VWUbgyNolE0ikYhqmKu7j8JzxqiuoniQAXNrwADALXdlmi+reCIAAAAAElFTkSuQmCC) no-repeat 100% 100%; } .module-popular__item:nth-child(5):before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABQCAYAAABI1GYUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5Mzk0MjM5NS1iOWExLTRlMTAtYWNmNi1jZmUwYzVkMzY0N2QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEJEMEY0OTUwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEJEMEY0OTQwRjE5MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZDIwY2ZmYmUtOTAwNi00YTBiLWIxMjUtNjA2MDBmODJmNTYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkzOTQyMzk1LWI5YTEtNGUxMC1hY2Y2LWNmZTBjNWQzNjQ3ZCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqdTn6wAAAHaSURBVHja7NnLSwJRGAVw7Z8KrCBsEUEUrSRaFIGIEQZtknYFQgQFEVRCQei6RfSgVUWkEBqGgmGFvQgyalWESHBbubgDY433Md+M5+zOcuY3ZxivXsaYpxXS5mmRNH+hoXamsv8EfVz/HPNz/XW4n+u3Q4GGj6YXj65DJW9mFhlEKWxUVPKybxwbJbFR2ZK56VVs1JaNypY88UewUVs2qloyFdnERrVsVLXkbtcsNqplo0ZJuwJRUVkqkhCVLWl8u0KUjGh635GSELW6UatfPBAlI7oUdqQkRP+KVcmH0CTXv8tPDKIURHX/nqx9VRlEdWxUtWSyI8b1tc5lBlEVonZLLnRvcL2crzCIytio3ZLR3iTXEytZBtFmRKlJhgd2uB5fz+Nc91+itWKBtORI4JDrb+9V/PeiJenYnlLJgdFjbFSrqFkKRyWpkj3BFDZKMqKS0fgdgyjFWJX0TWSwUZLJZipCksYOUSoRlYQo1ViVxEbdKglRKhmcuhCSxEbNUsk9ar0TofkrqZIQref5rNTwjMd4MmD329VMEqLGqD6tky2JjbpdEqLGOF0Som6ThOj5dtZVkhCtJzl3Skpy6+BFSASiZrkufiiVjCXuldx5iOJCHZpfAQYAyoMwSjKm8NEAAAAASUVORK5CYII=) no-repeat 100% 100%; } .module-popular__item a { display: -webkit-box; display: flex; align-items: center; -webkit-box-align: center; } .module-popular__item__image { position: relative; overflow: hidden; width: 80px; min-width: 80px; height: 80px; min-height: 80px; margin: 0 24px 0 0; } .module-popular__item__heading { font-size: 1.4rem; font-weight: bold; line-height: 1.9; } .module-popular__all { margin: 35px 0 0; text-align: center; } .layout-content-col2__inner-left .module-popular { margin: 49px 0 0; } .layout-content-col2__inner-left .module-popular .module-popular__heading { font-size: 1.4rem; } .layout-content-col2__inner-left .module-popular .module-popular__heading .unit-svg { height: 25px; } .layout-content-col2__inner-left .module-popular .unit-divide { margin: 23px 0 15px; } .layout-content-col2__inner-left .module-popular .module-popular__list { padding: 0 102px 0 65px; } .layout-content-col2__inner-left .module-popular .module-popular__item:before { top: 1px; right: -34px; } .layout-content-col2__inner-left .module-popular .module-popular__item__heading { font-size: 1.6rem; } .layout-content-col2__inner-left .module-popular .module-popular__all { margin: 32px 0 0; } /* #colors */ /*doc --- title: module-search-header name: module-search-header category: Module --- サイドエリア広告モジュール。 ```block

少子化問題一覧


``` */ .module-search-header { width: 1024px; margin: 0 auto; } .module-search-header__heading { font-size: 2rem; font-weight: bold; text-align: center; letter-spacing: .025em; } .module-search-header__heading strong { margin: 0 .25em 0 0; font-size: 2.8rem; } /* #colors */ /*doc --- title: module-search-list name: module-search-list category: Module --- 検索結果一覧用モジュール(ほぼレイアウト情報のみ)。 ```block
記事一覧(2列)
記事一覧(3列)
``` */ .module-search-list--col2 { margin: 43px 0 0; padding: 38px 0 0; border-top: 1px solid #aaa; } .module-search-list--col3 { margin: 22px 0 0; } .module-search-list__more { margin: 48px 0 0; text-align: center; } /* #colors */ /*doc --- title: module-title name: module-title category: Module --- 検索結果一覧、テーマ別一覧ページ内タイトル枠モジュール。
**画像がない場合は、.module-title に .module-title--text を付与する。** ```block

記事タイトル19文字程度記事タイトル記事

キーワードやテーマの説明文。グッと冷え込む日が増え、日が差していても、ぶるっと身震いをしてしまう。寒さの本番を迎える今日この頃、そろそろクリスマスの準備を始める頃だろうか。昨年頃から欧米でブームとなり、日本にもそのブームの波がやってきている「ヒュッゲ」なクリスマスを過ごしてみてはいかがだろうか。

記事タイトル19文字程度記事タイトル記事

キーワードやテーマの説明文。グッと冷え込む日が増え、日が差していても、ぶるっと身震いをしてしまう。寒さの本番を迎える今日この頃、そろそろクリスマスの準備を始める頃だろうか。昨年頃から欧米でブームとなり、日本にもそのブームの波がやってきている「ヒュッゲ」なクリスマスを過ごしてみてはいかがだろうか。

``` */ .module-title { margin: 30px 0 0; } .module-title__header { position: relative; } .module-title__header__heading { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: auto; padding: 24px 30px 22px; background: -webkit-linear-gradient(left, rgba(255, 102, 54, .8) 20%, rgba(159, 58, 134, .8) 50%, rgba(57, 105, 202, .8) 80%); background: linear-gradient(to right, rgba(255, 102, 54, .8) 20%, rgba(159, 58, 134, .8) 50%, rgba(57, 105, 202, .8) 80%); color: #fff; font-size: 3.8rem; font-weight: bold; line-height: 1.31579; text-align: center; letter-spacing: .025em; } .module-title__header__image { position: relative; z-index: 0; width: 100%; height: 504px; } .module-title__header__image img { width: 100%; height: 100%; } .module-title__text { margin: 20px 0 0; font-size: 1.4rem; line-height: 1.9; text-align: justify; letter-spacing: .025em; } .module-title--text .module-title__header__heading { position: relative; bottom: auto; left: auto; padding: 16px 0 16px 28px; background-image: none; color: #000; font-size: 3.2rem; line-height: 1.5625; text-align: left; } .module-title--text .module-title__header__heading:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: -webkit-linear-gradient(top, #ff6636 20%, #9f3a86 50%, #3969ca 80%); background: linear-gradient(to bottom, #ff6636 20%, #9f3a86 50%, #3969ca 80%); } /* #colors */ /*doc --- title: module-latest-stories name: module-latest-stories category: Module --- テーマ別一覧コンテンツの新着記事モジュール。 ```block
Latest Stories新着記事
``` */ .module-latest-stories { margin: 40px auto 18px; padding: 48px 0 0; border-top: 1px solid #aaa; } .module-latest-stories__heading { display: block; text-align: center; } .module-latest-stories__heading .unit-svg { width: 182px; height: 23px; } .module-latest-stories__heading__sup { display: block; margin: 10px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-latest-stories__more { margin: 46px 0 0; text-align: center; } .module-latest-stories .module-list-articles--col3 { padding: 15px 0 0; } /* #colors */ /*doc --- title: module-movies name: module-movies category: Module --- テーマ別一覧コンテンツの動画再生一覧モジュール。 ```block ``` */ .module-movies { margin: 71px 0 0; } .module-movies__player .slick-slide { outline: none; } .module-movies__player__category { display: block; color: #ff6636; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-movies__player__heading { display: block; margin: 11px 0 0; font-size: 1.8rem; font-weight: bold; line-height: 1.66667; letter-spacing: .025em; } .module-movies__player__sup { margin: 6px 0 0; letter-spacing: -.5em; } .module-movies__player__sup > * { letter-spacing: normal; } .module-movies__player__time { margin: 0 30px 0 0; color: #676767; font-family: 'Ubuntu'; font-size: 1.2rem; font-weight: 500; letter-spacing: .075em; } .module-movies__player__writer { font-size: 1.3rem; letter-spacing: .025em; } .module-movies__player__media { margin: 22px 0 0; background: #000; } .module-movies__list { margin: 8px 0 0 -24px; letter-spacing: -.5em; } .module-movies__list > * { letter-spacing: normal; } .module-movies__item { display: inline-block; width: calc( (100% - 96px) / 4); margin: 34px 0 0 24px; } .module-movies__item a { display: block; } .module-movies__item a:hover .module-movies__item__media:before { opacity: .7; } .module-movies__item__media { position: relative; overflow: hidden; height: 0; padding-top: 56.25%; } .module-movies__item__media img { position: absolute; z-index: 0; top: -5%; right: -5%; bottom: -5%; left: -5%; width: 100%; height: 100%; margin: auto; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } a:hover .module-movies__item__media img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .ie11 a:hover .module-movies__item__media img, .edge a:hover .module-movies__item__media img { width: 110%; height: 110%; -webkit-transform: none; transform: none; } .module-movies__item__media:before { content: ''; display: block; position: absolute; z-index: 1; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY2MjMyRjgzMTMwNzExRThBRkM4RTQzODQyMzY5ODRFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY2MjMyRjg0MTMwNzExRThBRkM4RTQzODQyMzY5ODRFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjYyMzJGODExMzA3MTFFOEFGQzhFNDM4NDIzNjk4NEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjYyMzJGODIxMzA3MTFFOEFGQzhFNDM4NDIzNjk4NEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6+A2I2AAAHqklEQVR42uxda2xU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) no-repeat 0 0; background-size: 40px 40px; } .module-movies__item__media:after { content: ''; display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border: 0 solid rgba(57, 105, 202, .8); -webkit-transition: border-width .3s ease; transition: border-width .3s ease; } .module-movies__item__heading { display: block; margin: 9px 0 0; font-size: 1.4rem; font-weight: bold; line-height: 1.78571; letter-spacing: .05em; } .module-movies__item.current .module-movies__item__media:after { border-width: 6px; } /* #colors */ /*doc --- title: module-world-topics name: module-world-topics category: Module --- テーマ別一覧コンテンツの地域で読むモジュール。 ```block ``` */ .module-world-topics--col2 { margin: 78px 0 0; } .module-world-topics--col2 .module-world-topics__body__list { margin-top: -46px; margin-left: -63px; } .module-world-topics--col2 .module-world-topics__body__item { width: calc( (100% - 126px) / 2); margin-left: 63px; } .module-world-topics__heading { display: block; text-align: center; } .module-world-topics__heading .unit-svg { width: 173px; height: 24px; } .module-world-topics__heading__sup { display: block; margin: 11px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-world-topics .unit-divide { position: relative; z-index: 1; } .module-world-topics__body { position: relative; z-index: 0; padding: 0 42px; } .module-world-topics__body__list { letter-spacing: -.5em; } .module-world-topics__body__list > * { letter-spacing: normal; } .module-world-topics__body__item { display: inline-block; position: relative; margin: 60px 0 0; } .module-world-topics__body__item:before { content: ''; display: block; position: absolute; z-index: 0; top: -50px; left: -56px; width: 144px; height: 144px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA2RjJGNkRFMEYxNzExRThBRjFGQTJGMjFFQzQ0M0NDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA2RjJGNkRGMEYxNzExRThBRjFGQTJGMjFFQzQ0M0NDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDZGMkY2REMwRjE3MTFFOEFGMUZBMkYyMUVDNDQzQ0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDZGMkY2REQwRjE3MTFFOEFGMUZBMkYyMUVDNDQzQ0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5MAUNcAAAJyElEQVR42uzd+09b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) no-repeat 0 0; } .module-world-topics__body__heading { display: block; position: relative; z-index: 1; margin: 0 0 0 -14px; font-size: 2.2rem; font-weight: bold; letter-spacing: .075em; } .module-world-topics__area__list { margin: 27px 0 0; } .module-world-topics__area__item { margin: 24px 0 0; } .module-world-topics__area__item a { display: -webkit-box; display: flex; align-items: center; -webkit-box-align: center; } .module-world-topics__area__image { position: relative; overflow: hidden; width: 80px; min-width: 80px; height: 80px; min-height: 80px; margin: 0 18px 0 0; } .module-world-topics__area__heading { font-size: 1.3rem; line-height: 1.76923; letter-spacing: .025em; } .module-world-topics__more { margin: 22px 0 0; font-family: 'Ubuntu'; font-size: 1.4rem; font-weight: 500; text-align: right; } .module-world-topics__more a { display: inline-block; } .module-world-topics__more a .unit-svg { width: 26px; height: 26px; margin: 0 0 0 12px; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .module-world-topics__more a:hover .unit-svg { -webkit-transform: translateX(3px) translateY(3px); transform: translateX(3px) translateY(3px); } .module-world-topics__more a:hover .unit-svg path, .module-world-topics__more a:hover .unit-svg rect, .module-world-topics__more a:hover .unit-svg polygon { fill: #3969ca; } .module-world-topics__footer { margin: 48px 0 0; padding: 0 0 22px; } .module-world-topics__footer__list { text-align: center; letter-spacing: -.5em; } .module-world-topics__footer__list > * { letter-spacing: normal; } .module-world-topics__footer__item { display: inline-block; margin: 0 24px; font-size: 1.8rem; font-weight: bold; } .module-world-topics__footer__item a { display: block; } .module-world-topics__footer__item a:hover .unit-svg--globe path, .module-world-topics__footer__item a:hover .unit-svg--globe rect, .module-world-topics__footer__item a:hover .unit-svg--globe polygon, .module-world-topics__footer__item a:hover .unit-svg--arrow path, .module-world-topics__footer__item a:hover .unit-svg--arrow rect, .module-world-topics__footer__item a:hover .unit-svg--arrow polygon { fill: #3969ca; } .module-world-topics__footer__item a:hover .unit-svg--arrow { -webkit-transform: translateX(3px); transform: translateX(3px); } .module-world-topics__footer .unit-svg--globe { width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: top; } .ie11 .module-world-topics__footer .unit-svg--globe { margin: -.2em 8px 0 0; vertical-align: middle; } .module-world-topics__footer .unit-svg--arrow { width: 16px; height: 16px; margin: -.3em 0 0 2px; vertical-align: middle; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .ie11 .module-world-topics__footer .unit-svg--arrow { margin: -.25em 0 0 2px; } /* #colors */ /*doc --- title: module-information name: module-information category: Module --- お知らせモジュール。 ```block
Informationお知らせ
``` */ .module-information { width: 1024px; margin: 0 auto; padding: 56px 120px 0; } .module-information__heading { display: block; text-align: center; } .module-information__heading .unit-svg { height: 25px; } .module-information__heading__sup { display: block; margin: 7px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-information .unit-divide { margin: 17px 0 8px; } .module-information__body { padding: 0; } .module-information__list { display: block; } .module-information__item { display: -webkit-box; display: flex; align-items: center; padding: 20px 18px; border-bottom: 1px solid #797979; -webkit-box-align: center; } .module-information__item__time { margin: 0 36px 0 0; font-family: 'Ubuntu'; font-size: 1.4rem; font-weight: 700; letter-spacing: .075em; } .module-information__item__heading { flex: 1; font-size: 1.3rem; letter-spacing: .025em; -webkit-box-flex: 1; } .module-information__all { margin: 42px 0 0; text-align: center; } /* #colors */ /*doc --- title: module-tieup name: module-tieup category: Module --- タイアップモジュール。
Slickを使用。 ```blockblack
``` */ .module-tieup { width: 1024px; margin: 70px auto 0; padding: 56px 0; } .module-tieup .module-list-articles { position: relative; letter-spacing: normal; } .module-tieup .module-list-articles__heading { color: #fff; } .module-tieup .module-list-articles__writer { color: #c0c0c0; } .module-tieup a:hover .module-list-articles__category, .module-tieup a:hover .module-list-articles__heading, .module-tieup a:hover .module-list-articles__writer { opacity: .7; } .module-tieup a:hover .module-list-articles__category { color: #ff6636; } .module-tieup a:hover .module-list-articles__writer { color: #aaa; } .module-tieup .slick-prev, .module-tieup .slick-next { outline: none; display: block; position: absolute; z-index: 5; top: 108px; overflow: hidden; width: 45px; height: 34px; border: none; background: none; white-space: nowrap; text-indent: 200%; } .module-tieup .slick-prev path, .module-tieup .slick-prev rect, .module-tieup .slick-prev polygon, .module-tieup .slick-next path, .module-tieup .slick-next rect, .module-tieup .slick-next polygon { fill: #fff; } .module-tieup .slick-prev svg, .module-tieup .slick-next svg { position: absolute; top: 0; left: 0; width: 34px; height: 34px; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .module-tieup .slick-prev:hover svg, .module-tieup .slick-next:hover svg { -webkit-transform: translateX(6px); transform: translateX(6px); } .module-tieup .slick-prev { left: -3px; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .module-tieup .slick-next { right: -60px; } /* #colors */ /*doc --- title: module-slide-main name: module-slide-main category: Module --- トップページ上部に配置されるメインスライダーモジュール。 ```block
``` */ .module-slide-main { visibility: hidden; overflow: hidden; } .module-slide-main.visible { -webkit-animation: visibility-visible .75s ease-out forwards; animation: visibility-visible .75s ease-out forwards; } /* #colors */ /*doc --- title: module-slide-flow name: module-slide-flow category: Module --- トップページ上部に配置されるフロースライダーモジュール。 ```block
``` */ .module-slide-flow { visibility: hidden; overflow: hidden; margin: 41px 0 0; } .module-slide-flow.visible { -webkit-animation: visibility-visible .75s ease-out forwards; animation: visibility-visible .75s ease-out forwards; } /* #colors */ /*doc --- title: module-top-ad name: module-top-ad category: Module --- トップ用広告モジュール。 ```block ``` */ .module-top-ad { display: -webkit-box; display: flex; justify-content: center; margin: 50px 0; -webkit-box-pack: center; } .module-top-ad > div { margin: 0; } .article .layout-main .module-top-ad { margin: 0; } .article .layout-main .module-top-ad > div { margin: 40px 0 26px; } /* #colors */ /*doc --- title: module-top-issues name: module-top-issues category: Module --- トップ用注目のテーマモジュール。 ```block ``` */ .module-top-issues__heading { display: block; text-align: center; } .module-top-issues__heading .unit-svg { height: 25px; } .module-top-issues__heading__sup { display: block; margin: 9px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-top-issues .unit-divide { position: relative; z-index: 1; margin: 15px 0; } .module-top-issues__body { position: relative; z-index: 0; } .module-top-issues__list { display: block; z-index: 0; margin: 34px 0 0; padding: 0 0 32px; border-bottom: 1px solid #ff6636; } .unit-divide + .module-top-issues__list { margin: 28px 0 0; } .unit-divide + .module-top-issues__list:after { display: none; } .module-top-issues__list__heading { display: block; position: relative; z-index: 1; padding: 0 0 0 30px; font-family: 'Ubuntu', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 2.6rem; font-weight: 700; letter-spacing: .075em; } .module-top-issues__list__heading span { margin: 0 9px 0 0; font-style: italic; } .module-top-issues__list__more { position: absolute; z-index: 5; top: -3px; right: 5px; margin: 0; } .module-top-issues__list__more a { display: block; padding: 5px; font-family: 'Ubuntu'; font-size: 1.4rem; font-weight: 500; letter-spacing: .05em; } .module-top-issues__list__more a .unit-svg { width: 26px; height: 26px; margin: 0 0 0 12px; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .module-top-issues__list__more a:hover { color: #ff6636; } .module-top-issues__list__more a:hover .unit-svg { -webkit-transform: translateX(3px) translateY(3px); transform: translateX(3px) translateY(3px); } .module-top-issues__list__more a:hover .unit-svg path, .module-top-issues__list__more a:hover .unit-svg rect, .module-top-issues__list__more a:hover .unit-svg polygon { fill: #ff6636; } .module-top-issues__list__feature { margin: 30px 0 0; } .module-top-issues__list__feature a { display: -webkit-box; display: flex; justify-content: space-between; align-items: center; -webkit-box-pack: justify; -webkit-box-align: center; } .module-top-issues__list__feature a:hover { color: #ff6636; } .module-top-issues__list__feature__heading { padding: 11px 0 14px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; font-size: 1.6rem; font-weight: bold; line-height: 1.75; letter-spacing: .025em; } .module-top-issues__list__feature__image { position: relative; overflow: hidden; width: 280px; min-width: 280px; max-width: 280px; height: 210px; margin: 0 0 0 30px; } .module-top-issues__item { display: block; position: relative; margin: 60px 0 0; } .module-top-issues__item:before, .module-top-issues__item:after { content: ''; display: block; position: absolute; } .module-top-issues__item:before { z-index: 0; top: -52px; left: -26px; width: 128px; height: 139px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACLCAYAAACp+ZEIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFMUM5NkMzMTA2MTExRTg4Qzc4RDkzQURBNTc3REU3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFMUM5NkM0MTA2MTExRTg4Qzc4RDkzQURBNTc3REU3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUUxQzk2QzExMDYxMTFFODhDNzhEOTNBREE1NzdERTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUUxQzk2QzIxMDYxMTFFODhDNzhEOTNBREE1NzdERTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7OCxVMAAAFN0lEQVR42uydXU8bRxhGaX95KqSqUqpW6kUFhiQNJRRo+AhtElUpJSF8O8G1QwkBggE3gM2XqY0pNrtb9abKLCnW+LUzu7znkYL03gQjzTk89swsbUEQtGn75y1vB+/PF+msMdd+3zTmasqcveJp4PL1Hy4dGN9/Z3bPmHMzeWPenjbno2z5v/mTf78QvflU8w9fG5o1Vv/5/TljrgzOG3NpYCFStLzqWjZeTyqxYswvOt8Y81zH6qXXjwEwAORrJB8DEH0G0E6+7wV0AKLQAMFhSUT+yXDKKSX+hS8if6pjnQ5A6ADW5Bd/SEaKjmaSjwGIHgNAPgYgGg1QfZwSkX++ceCUjtzzPRH5a5P7dABCB7Am//Dei0hRYUv+s463dACCARog/6Ua8jEAub4G0E6+VwvoAEShAbydYxH5hcF0pHb9bMkf79igAxA6gDX5+d7FSFHwMcjHAOT6GQDyMQDRaIDyyKKI/NM1t7t+G5N5EfmvJvbpAIQOYE3+u55UpFa/Lfm/dGbpAAQDQD4GICoNoJ382rlPByAKDVDNHojI3/7O7a6fV/NF5D/q3KQDkCgYYO/IWD3ByLR5MmV4xvydJbyfL/2dHyZ/407GmFdvLRnz6+4/zE/cEqH7+Z2yGztS8scS28Y83J0z5sHbfxpz3513PB+AtKADQH68yO/9fjfAAERuAMiPF/k9d3foAKQFHQDy40W+997TwjAABoB8LeTf7tmjA5AmGMD/LQP5MScfAxB5B4D8eJE/tVCiA5AWfA7Q6kjJd53L5G9Zkd/KYAAMAPkayccAJLoGKDx8IyK/MJ93uqo3Myci8p8+3qcDEDqA+H2+69iSH36fjwGITgNAPgYgGg2gnfxKxaMDEIUGOC+cishf6l6J1Coe67Ij/94HbuxgAKKvA9jv57+GfAxAYm8AyMcARKMBcvdXROQX0kdOV+/yQlFE/uSzYzoAoQNYkx8+ves6YfIH6pD/oVu6GIDoMwDkYwCi0QDaya/VAjoAUWiAs3xFRH7q7rrbJ3xeBCLyr7qliwGIng5gS34ydEvXdeqTvxt58jEA+fgGgHwMQDQaYH1gTUT+UbbsdJXOTByKyJ9bLNEBCB3AmvzwM3lcx5b8RG+eDkBiaADpkzmWhW1/tmOtuU/jSoRu7NQ5wydt+2Hyv+0rGPM3/eb9/68Hzb+B9OWPZuf4Ysg8+fT5sHmSqH2kyN8OJk0wwG5/BvKVkI8ByP93gOtO/lBd8ndiRf7U6t90ANIEA0B+vMj/bJQOQJphgLPcX5CvjHwMQC53AMiPF/ntP9EBSDMMYEt+BvKdkn/jAR2AtKIDBJ65GmxnKfl+6P9r+uxfPUvJ9/y2ls4XoTloa6MDkCYaoNFIyXcdKfmV8/hShAEwQOMpbpVF5E90ZZ2uvrMzv6ltHwMQnR1A+j7fdTSSjwGI3ABxJ79TMfkYgDRugFTfpoj8ty+LTlfdk+cnIvJHp0t0AEIHEO/quY50Vw8DEJ0GgHwMQDQaIEz+U2Xkl0N7BxiA6DBA5bgqIv9R95bTVXYResKn9AwfBiA6O4At+Q8TW5FaXZCPAUgjBoB8DEA0GiD9846I/OWk212/6fTpleTfrEN+/3SZDkDoANbkPwjd1XMdW/LDd/UwANFpgLiT/xXkYwDSgAGk5Idv3caN/OOKTwcgCg1QrXgi8odv5SK1mmzJbx8t0gEIHcCa/PAzeSAfA5A4GiD9xDwzt/iruYuWHDfb9fx4tE7Ljs2aN3ZG583P8kfmzb2BoeSp+tX/jwADAOy0r45O4vLFAAAAAElFTkSuQmCC) no-repeat 0 0; } .module-top-issues__item:after { z-index: 1; top: -29px; left: 0; width: 100%; height: 1px; background: #ff6636; } .module-top-issues__item:first-child { margin: 0; } .module-top-issues__item:first-child:after { display: none; } .module-top-issues__item__list { display: -webkit-box; display: flex; margin: 30px 0 0; } .module-top-issues__item__list__heading { order: 2; font-size: 1.3rem; line-height: 1.53846; letter-spacing: .025em; -webkit-box-ordinal-group: 3; } .module-top-issues__item__list__image { overflow: hidden; order: 1; width: 80px; min-width: 80px; max-width: 80px; height: 80px; margin: 0 18px 0 0; -webkit-box-ordinal-group: 2; } .module-top-issues__item__item { display: -webkit-box; display: flex; } .module-top-issues__item__item:last-child { margin: 0 0 0 40px; } .module-top-issues__item__item a { display: -webkit-box; display: flex; align-items: center; -webkit-box-align: center; } .module-top-issues__item__item a:hover { color: #ff6636; } .module-top-issues__item:nth-child(2n) .module-top-issues__list__feature__heading { order: 2; -webkit-box-ordinal-group: 3; } .module-top-issues__item:nth-child(2n) .module-top-issues__list__feature__image { order: 1; margin: 0 30px 0 0; -webkit-box-ordinal-group: 2; } .module-top-issues__more { margin: 26px 0 0; text-align: center; } /* #colors */ /*doc --- title: module-top-topics name: module-top-topics category: Module --- トップ用地域で読むモジュール。 ```block ``` */ .module-top-topics__heading { display: block; text-align: center; } .module-top-topics__heading .unit-svg { height: 25px; } .module-top-topics__heading__sup { display: block; margin: 9px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: .1em; } .module-top-topics .unit-divide { position: relative; z-index: 1; margin: 15px 0; } .module-top-topics__body { position: relative; z-index: 0; } .module-top-topics__list { display: block; z-index: 0; margin: 34px 0 0; padding: 0 0 32px; border-bottom: 1px solid #3969ca; } .unit-divide + .module-top-topics__list { margin: 28px 0 0; } .unit-divide + .module-top-topics__list:after { display: none; } .module-top-topics__list__heading { display: block; position: relative; z-index: 1; padding: 0 0 0 30px; font-family: 'Ubuntu', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 2.6rem; font-weight: 700; letter-spacing: .075em; } .module-top-topics__list__more { position: absolute; z-index: 5; top: -3px; right: 5px; margin: 0; } .module-top-topics__list__more a { display: block; padding: 5px; font-family: 'Ubuntu'; font-size: 1.4rem; font-weight: 500; letter-spacing: .05em; } .module-top-topics__list__more a .unit-svg { width: 26px; height: 26px; margin: 0 0 0 12px; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .module-top-topics__list__more a:hover { color: #3969ca; } .module-top-topics__list__more a:hover .unit-svg { -webkit-transform: translateX(3px) translateY(3px); transform: translateX(3px) translateY(3px); } .module-top-topics__list__more a:hover .unit-svg path, .module-top-topics__list__more a:hover .unit-svg rect, .module-top-topics__list__more a:hover .unit-svg polygon { fill: #3969ca; } .module-top-topics__list__feature { margin: 30px 0 0; } .module-top-topics__list__feature a { display: -webkit-box; display: flex; justify-content: space-between; align-items: center; -webkit-box-pack: justify; -webkit-box-align: center; } .module-top-topics__list__feature a:hover { color: #3969ca; } .module-top-topics__list__feature__heading { padding: 11px 0 14px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; font-size: 1.6rem; font-weight: bold; line-height: 1.75; letter-spacing: .025em; } .module-top-topics__list__feature__image { position: relative; overflow: hidden; width: 280px; min-width: 280px; max-width: 280px; height: 210px; margin: 0 0 0 30px; } .module-top-topics__item { display: block; position: relative; margin: 60px 0 0; } .module-top-topics__item:before, .module-top-topics__item:after { content: ''; display: block; position: absolute; } .module-top-topics__item:before { z-index: 0; top: -50px; left: -17px; width: 151px; height: 151px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAACXCAYAAAAYn8l5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQzNDkyNTZDMTA5ODExRTg4Qzc4RDkzQURBNTc3REU3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQzNDkyNTZEMTA5ODExRTg4Qzc4RDkzQURBNTc3REU3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUUxQzk2QzUxMDYxMTFFODhDNzhEOTNBREE1NzdERTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUUxQzk2QzYxMDYxMTFFODhDNzhEOTNBREE1NzdERTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7W8Q43AAAJaklEQVR42uzdaVMU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) no-repeat 0 0; } .module-top-topics__item:after { z-index: 1; top: -29px; left: 0; width: 100%; height: 1px; background: #3969ca; } .module-top-topics__item:first-child { margin: 0; } .module-top-topics__item:first-child:after { display: none; } .module-top-topics__item__list { display: -webkit-box; display: flex; margin: 30px 0 0; } .module-top-topics__item__list__heading { order: 2; font-size: 1.3rem; line-height: 1.53846; letter-spacing: .025em; -webkit-box-ordinal-group: 3; } .module-top-topics__item__list__image { overflow: hidden; order: 1; width: 80px; min-width: 80px; max-width: 80px; height: 80px; margin: 0 18px 0 0; -webkit-box-ordinal-group: 2; } .module-top-topics__item__item { display: -webkit-box; display: flex; } .module-top-topics__item__item:last-child { margin: 0 0 0 40px; } .module-top-topics__item__item a { display: -webkit-box; display: flex; align-items: center; -webkit-box-align: center; } .module-top-topics__item__item a:hover { color: #3969ca; } .module-top-topics__item:nth-child(2n) .module-top-topics__list__feature__heading { order: 2; -webkit-box-ordinal-group: 3; } .module-top-topics__item:nth-child(2n) .module-top-topics__list__feature__image { order: 1; margin: 0 30px 0 0; -webkit-box-ordinal-group: 2; } .module-top-topics__footer { margin: 0; padding: 23px 0 26px; } .module-top-topics__footer__list { margin: 0; padding: 0 50px; text-align: center; letter-spacing: -.5em; } .module-top-topics__footer__list > * { letter-spacing: normal; } .module-top-topics__footer__item { display: inline-block; margin: 24px 17px 0; font-size: 1.8rem; font-weight: bold; } .module-top-topics__footer__item a { display: block; } .module-top-topics__footer__item a:hover .unit-svg--globe path, .module-top-topics__footer__item a:hover .unit-svg--globe rect, .module-top-topics__footer__item a:hover .unit-svg--globe polygon, .module-top-topics__footer__item a:hover .unit-svg--arrow path, .module-top-topics__footer__item a:hover .unit-svg--arrow rect, .module-top-topics__footer__item a:hover .unit-svg--arrow polygon { fill: #3969ca; } .module-top-topics__footer__item a:hover .unit-svg--arrow { -webkit-transform: translateX(3px); transform: translateX(3px); } .module-top-topics__footer .unit-svg--globe { width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: top; } .ie11 .module-top-topics__footer .unit-svg--globe { margin: -.2em 8px 0 0; vertical-align: middle; } .module-top-topics__footer .unit-svg--arrow { width: 16px; height: 16px; margin: -.3em 0 0 2px; vertical-align: middle; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .ie11 .module-top-topics__footer .unit-svg--arrow { margin: -.25em 0 0 2px; } .module-top-topics__more { margin: 26px 0 0; text-align: center; } /* #colors */ /*doc --- title: module-top-movie name: module-top-movie category: Module --- トップ用地域で読むモジュール。 ```block ``` */ .module-top-movie__sup { display: -webkit-box; display: flex; justify-content: space-between; align-items: flex-end; margin: 6px 0 0; -webkit-box-pack: justify; -webkit-box-align: end; } .module-top-movie__sup > * { display: block; padding: 12px 6px 2px 12px; border-left: 1px solid #aaa; } .module-top-movie__category { color: #ff6636; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-top-movie__writer--sup { margin: 0 0 0 auto; color: #797979; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-top-movie__time { margin: 0 0 0 60px; color: #797979; font-size: 1.2rem; letter-spacing: .075em; } .module-top-movie__body { padding: 0 13px; } .module-top-movie__heading { display: block; margin: 23px 0 0; font-size: 1.8rem; font-weight: bold; letter-spacing: .025em; } .module-top-movie__writer { display: block; margin: 9px 0 0; color: #797979; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-top-movie__tags { margin: 16px 0 0; padding: 0 13px; } .module-top-movie__tags__list { display: block; margin: 0 0 0 -14px; letter-spacing: -.5em; } .module-top-movie__tags__list > * { letter-spacing: normal; } .module-top-movie__tags__item { display: inline-block; margin: 0 0 0 14px; color: #3969ca; font-size: 1.3rem; font-weight: bold; } .module-top-movie__tags__item a:hover { color: #797979; } /* #colors */ /*doc --- title: module-special name: module-special category: Module --- サイドエリア広告モジュール。 ```block ``` */ .module-special { position: relative; margin: 60px 0 28px; padding: 60px 0; } .module-special:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); } .module-special__inner { display: -webkit-box; display: flex; position: relative; align-items: center; width: 1024px; margin: 0 auto; -webkit-box-align: center; } .module-special__body { position: relative; z-index: 0; top: -25px; } .module-special__icon { display: inline-block; } .module-special__icon .unit-svg { position: static; margin: -4px -18px 0 -10px; padding: 11px; background: transparent; } .module-special__category { display: inline-block; margin: 14px 0 0; padding: 0 10px; color: #ff6636; font-size: 1.6rem; font-weight: bold; letter-spacing: .025em; } .module-special__heading { display: block; margin: -6px 0 0; color: #fff; font-size: 2.2rem; font-weight: bold; line-height: 1.5; letter-spacing: .025em; } .module-special__writer { display: block; margin: 27px 0 0; color: #fff; font-size: 1.3rem; font-weight: bold; letter-spacing: .025em; } .module-special__writer--pr { color: #aaa; } .module-special__image { overflow: hidden; width: 560px; min-width: 560px; max-width: 560px; height: 420px; margin: 0 0 0 54px; } .module-special a:hover .module-special__icon, .module-special a:hover .module-special__category, .module-special a:hover .module-special__heading, .module-special a:hover .module-special__writer { opacity: .7; } .module-special__tags { position: absolute; z-index: 1; left: 0; width: 410px; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid #aaa; } .module-special__tags__list { display: block; margin: 0 0 0 -14px; letter-spacing: -.5em; } .module-special__tags__list > * { letter-spacing: normal; } .module-special__tags__item { display: inline-block; margin: 0 0 0 14px; color: #3969ca; font-size: 1.3rem; } .module-special__tags__item a:hover { color: #797979; } /* #colors */ /*doc --- title: module-pr name: module-pr category: Module --- サイドエリア注目コンテンツ[PR]一覧モジュール。 ```block ``` */ .module-pr { margin: 53px 0 0; } .module-pr__heading { display: block; font-size: 1.6rem; font-weight: bold; text-align: center; letter-spacing: .025em; } .module-pr__list { display: -webkit-box; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 17px 0 0; padding: 9px 22px 0; border-top: 2px solid #797979; -webkit-box-pack: justify; } .module-pr__item { width: 300px; padding: 12px 0 16px; border-bottom: 1px solid #aaa; } .module-pr__item a { display: block; } .module-pr__item a:hover .module-pr__item__cite { color: #3969ca; } .module-pr__item__heading { display: block; font-size: 1.4rem; font-weight: bold; line-height: 1.9; letter-spacing: .025em; } .module-pr__item__cite { display: block; margin: 7px 0 0; color: #797979; font-size: 1.2rem; font-weight: bold; } /* #colors */ /*doc --- title: module-notice name: module-notice category: Module --- サイドエリア記事一覧モジュール。 ```block ``` */ .module-notice { display: -webkit-box; display: flex; width: 1024px; margin: 56px auto 0; padding: 12px 24px; border-top: 2px solid #797979; border-bottom: 2px solid #797979; } .module-notice__time { padding: 0 17px 0 0; color: #505050; font-family: 'Ubuntu'; font-size: 1.3rem; font-weight: 500; line-height: 1.76923; letter-spacing: .075em; } .module-notice__heading { padding: 0 0 0 18px; border-left: 1px solid #505050; color: #505050; font-size: 1.3rem; line-height: 1.76923; letter-spacing: .025em; } /* #colors */ /*doc --- title: module-content-footer name: module-content-footer category: Module --- メインエリア内の最下段共通フッターコンテンツ。 ```block ``` */ .module-content-footer { min-width: 1024px; margin: 87px auto 0; padding: 76px 0 115px; } .module-content-footer__message { display: block; text-align: center; } .module-content-footer__message .unit-svg { width: 484px; height: 22px; } .module-content-footer__sns { margin: 58px 0 0; } .module-content-footer__sns__heading { display: -webkit-box; display: flex; justify-content: center; align-items: center; -webkit-box-pack: center; -webkit-box-align: center; } .module-content-footer__sns__heading .unit-svg__follow { width: 106px; height: 36px; margin: 0; padding: 9px 5px 0 0; } .module-content-footer__sns__heading .unit-svg__logo-site { width: 160px; height: 44px; margin: 0 0 0 2px; } .module-content-footer__sns__list { margin: 28px 0 0; text-align: center; letter-spacing: -.5em; } .module-content-footer__sns__list > * { letter-spacing: normal; } .module-content-footer__sns__item { display: inline-block; margin: 0 10px; } .module-content-footer__sns__item a { display: block; position: relative; width: 44px; height: 44px; } .module-content-footer__sns__item a:after { display: none; } .module-content-footer__sns__item a .unit-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .module-content-footer__sns__item a .unit-svg path, .module-content-footer__sns__item a .unit-svg rect, .module-content-footer__sns__item a .unit-svg polygon { fill: #000; } .module-content-footer__sns__item a:hover { opacity: .7; } .module-content-footer__entry { margin: 38px 0 0; } .module-content-footer__entry__lead { font-size: 1.4rem; line-height: 1.9; text-align: center; letter-spacing: .1em; } .module-content-footer__entry__btn { margin: 24px 0 0; text-align: center; } .module-content-footer__entry__about { display: block; margin: 22px 0 0; font-size: 1.6rem; font-weight: bold; text-align: center; } .module-content-footer__entry__about a { color: #3969ca; } .module-content-footer__entry__about a:hover { color: #797979; } .module-content-footer__ad { display: -webkit-box; display: flex; justify-content: center; margin: 93px 0 0; -webkit-box-pack: center; } .module-content-footer__ad__inner { margin: 0 36px; } /* ===================================================== * Layout * ================================================== */ /* #colors */ /*doc --- title: layout-wrapper name: layout-wrapper category: Layout --- ヘッダー、メイン、フッター囲み用レイアウト。
**記事ページの時のみ、.article を付与する。** ```html ``` */ .layout-wrapper { display: -webkit-box; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 119px 0 0; -webkit-box-pack: justify; -webkit-box-orient: vertical; -webkit-box-direction: normal; } .layout-wrapper.home { padding: 193px 0 0; } .layout-main { position: relative; z-index: 0; flex-grow: 1; min-width: 320px; background-color: #fff; -webkit-box-flex: 1; } /* #colors */ /*doc --- title: layout-header * name: layout-1 category: Layout --- 共通ヘッダー用のレイアウト。
JavaScriptにより、.layout-wrapper に .article が付与されていると、記事進捗バー機能(.layout-header__progress)がアクティブとなる。 * width: 1024px * ローンチ時は、.module-nav__more-function は非表示(コードから削除すればOK) ```html
``` */ .layout-header { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; min-width: 1024px; padding: 0; border-bottom: 1px solid #aaa; background: #fff; } .home .layout-header { visibility: hidden; border: none; } .home .layout-header.visible { -webkit-animation: visibility-visible .75s ease-out forwards; animation: visibility-visible .75s ease-out forwards; } .layout-header.fixed { position: fixed; z-index: 9; top: -150px; left: 0; border: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); } .layout-header.trans { -webkit-transition: top .3s ease-in-out; transition: top .3s ease-in-out; } .layout-header.display { top: 0; } .layout-header-inner { position: relative; width: 1024px; height: 119px; margin: 0 auto; } .home .layout-header-inner { height: 193px; } .fixed .layout-header-inner { height: 76px; } .layout-header__logo { display: block; position: absolute; top: 34px; left: -4px; } .layout-header__logo a { display: block; position: relative; overflow: hidden; width: 258px; height: 70px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImxvZ28tc2l0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IgoJIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3MCAxMjgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3MCAxMjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNDcwIiBoZWlnaHQ9IjEyOCI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CgkubG9nby1zaXRlLXN0MHtmaWxsOiMzOTY5Q0E7fQo8L3N0eWxlPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNDguNiw4NC4xYzAtMjMuNS0xNC44LTM5LjYtMzYuNS0zOS42Yy0yMS42LDAtMzYuNCwxNi4xLTM2LjQsMzkuNmMwLDIzLjUsMTQuOCwzOS41LDM2LjQsMzkuNQoJCQlDMjMzLjcsMTIzLjYsMjQ4LjYsMTA3LjYsMjQ4LjYsODQuMSBNMjIxLjksODQuMWMwLDE2LjEtMy4xLDIzLjMtOS44LDIzLjNjLTYuNywwLTkuNy03LjQtOS43LTIzLjNjLTAuMS0xNiwzLTIzLjIsOS44LTIzLjIKCQkJQzIxOC44LDYwLjksMjIxLjksNjguMiwyMjEuOSw4NC4xIi8+CgkJPHBhdGggY2xhc3M9ImxvZ28tc2l0ZS1zdDAiIGQ9Ik05OS4yLDUwLjFINzcuOGMtMS0xNC41LTYuMS0yMS40LTE1LjUtMjEuNGMtMTEuOSwwLTE2LjksMTEtMTYuOSwzNy4zYzAsMjUuMyw0LjIsMzUuNCwxNC42LDM1LjQKCQkJYzcuMywwLDExLTUuMSwxMi4yLTE2LjJoLTExVjYxLjhoNDMuNGMwLjIsNC4yLDAuMyw3LjEsMC4zLDguOWMwLDM1LjItMTYuNiw1My43LTQ3LjYsNTMuN2MtMzIuNiwwLTUyLjYtMjIuMy01Mi42LTU4LjkKCQkJYzAtMzYuNiwxOS41LTYxLjksNDcuOC02MS45YzEwLjEsMCwxNy44LDIuOCwyNS4xLDkuMVY2aDIxLjZWNTAuMXoiLz4KCQk8cG9seWdvbiBwb2ludHM9IjE3Mi4yLDkyLjQgMTcyLjIsMTIyLjEgMTExLjUsMTIyLjEgMTExLjUsMTA1LjggMTE4LDEwNS44IDExOCw2Mi40IDExMS42LDYyLjQgMTExLjYsNDYuMSAxNTAuNSw0Ni4xCgkJCTE1MC41LDYyLjQgMTQyLDYyLjQgMTQyLDEwNS44IDE1NC42LDEwNS44IDE1NC42LDkyLjQgCQkiLz4KCQk8cGF0aCBkPSJNMjU1LjMsMTIyLjFoMzkuNmMxNy40LDAsMjcuMS03LjUsMjcuMS0yMS4yYzAtOS44LTUuNC0xNS4yLTE3LjUtMTcuOGM1LjctMS42LDcuOS0yLjYsMTAuNS01YzMuNC0zLjIsNS41LTguMSw1LjUtMTMuNQoJCQljMC0xMS44LTktMTguNS0yNC4zLTE4LjVoLTQwLjh2MTYuM2g2LjR2NDMuNGgtNi41VjEyMi4xeiBNMjg1LjgsNzVWNjIuNGgyLjljNi4xLDAsOSwyLjEsOSw2LjNjMCw0LjItMyw2LjMtOSw2LjNIMjg1Ljh6CgkJCSBNMjg1LjgsMTA1LjhWOTAuNmgzLjdjNi40LDAsOC45LDIuMyw4LjksNy44YzAsNS4xLTIuNiw3LjQtOC45LDcuNEgyODUuOHoiLz4KCQk8cG9seWdvbiBwb2ludHM9IjM4OC45LDc1IDM3My43LDc1IDM3My43LDYyLjQgMzU4LjYsNjIuNCAzNTguNiw3NSAzNjkuNiw3NSAzNjkuNiw5Mi40IDM1OC42LDkyLjQgMzU4LjYsMTA1LjcgMzczLjcsMTA1LjcKCQkJMzczLjcsOTIuNCAzODguOSw5Mi40IDM4OC45LDEyMi4xIDMyOC4xLDEyMi4xIDMyOC4xLDEwNS44IDMzNC42LDEwNS44IDMzNC42LDYyLjQgMzI4LjIsNjIuNCAzMjguMiw0Ni4xIDM4OC45LDQ2LjEgCQkiLz4KCTwvZz4KCTxwb2x5Z29uIGNsYXNzPSJsb2dvLXNpdGUtc3QwIiBwb2ludHM9IjQyMi44LDQ1LjkgNDIyLjgsNzkuNSAzODkuMiw3OS41IDM4OS4yLDg4LjMgNDIyLjgsODguMyA0MjIuOCwxMjEuOSA0MzEuNywxMjEuOSA0MzEuNyw4OC4zCgkJNDY1LjMsODguMyA0NjUuMyw3OS41IDQzMS43LDc5LjUgNDMxLjcsNDUuOSAJIi8+Cgk8Zz4KCQk8cGF0aCBkPSJNMjA3LjMsMjAuNWMwLTAuOC0xLTIuMy0yLjgtMi4zYy0xLjQtMC4xLTIuNSwwLjMtMy4yLDAuN2MtMS45LDEuMy0zLjYsNC4xLTEuNyw5LjZsMC42LDEuOGMxLjMsMy42LTAuNiw1LjItMiw1LjIKCQkJYy0wLjYsMC0xLTAuMy0xLjMtMWMtMC4zLTAuNi0wLjMtMC43LTAuNS0xYy0wLjgtMS45LTIuOC0xLjQtMi45LDAuMmMtMC4xLDEuNywxLjQsMi44LDMuNywyLjhjMy4xLDAsNS44LTIuNSw1LjgtNS4yCgkJCWMwLTEuNS0wLjUtMy4xLTEtNC44Yy0wLjUtMS43LTEuMS0zLjQtMS4xLTQuOWMwLTEuMSwwLjgtMi4xLDEuNy0yLjFjMC42LDAsMSwwLjMsMS42LDEuM2MwLjUsMC44LDEuMiwxLDEuOCwxCgkJCUMyMDYuNywyMS45LDIwNy4zLDIxLjMsMjA3LjMsMjAuNSIvPgoJCTxwYXRoIGQ9Ik0yMzAuNiwyNi4zbDcuMi0xOS41aC0wLjlsLTQuNiwwLjRsLTAuMSwwLjRjMCwwLDEsMC4yLDEuNSwwLjNjMC43LDAuMiwxLDAuMywwLjYsMS40bC03LjUsMjAuOWwtMS45LDUKCQkJYy0wLjEsMC4yLTAuMSwwLjUtMC4xLDAuNmMwLDAuNSwwLjMsMC44LDAuOSwwLjhjMC42LDAsMC45LTAuMywxLjMtMS4xbDIuNy01LjljMC43LTEuMywxLjMtMi40LDIuOC00LjVjMCwwLDQuMy02LDYuNC02CgkJCWMzLjIsMC0wLjQsOS41LTEuNywxMi4ybC0wLjcsMS41Yy0wLjYsMS41LTEuNSwyLjYtMi4yLDIuNmMtMC42LDAtMC44LTAuNy0xLjEtMWMtMC43LTAuOS0xLjctMC43LTIuMSwwLjEKCQkJYy0wLjQsMC44LDAuMywyLjIsMS44LDIuMmMxLjgsMCwzLjYtMS4zLDUuNy00LjFjMS45LTIuNywzLjYtNy42LDMuNi0xMC42YzAtMi41LTEuMS0zLjgtMi44LTMuOGMtMS43LDAtMy45LDEuMS03LjUsNi4zCgkJCWwtMS4zLDEuOUMyMzAuNiwyNi40LDIzMC41LDI2LjQsMjMwLjYsMjYuMyIvPgoJCTxnPgoJCQk8cGF0aCBkPSJNMjU0LjEsOGMtMS4yLDAtMi4xLDAuOS0yLjEsMmMwLDEsMC45LDEuNywxLjcsMS44YzEuMSwwLDIuMS0wLjYsMi4xLTJDMjU1LjksOC44LDI1NS4yLDgsMjU0LjEsOHoiLz4KCQkJPHBhdGggZD0iTTI1Mi44LDE4LjFjLTAuOSwwLTEuOCwwLjQtMy4xLDEuM2MtMS4zLDAuOS0zLjgsMy41LTQuNSw0LjRsMC45LDBjMS0xLjEsMy4xLTMsMy44LTMuNWMxLjEtMC44LDIuMS0wLjcsMS40LDAuNAoJCQkJYy0wLjcsMS40LTQuMyw4LjMtNC4zLDguM2MtMS44LDMuMy0yLjUsNC45LTIuNSw2LjFjMCwwLjksMC41LDEuNCwxLjMsMS40YzIuMSwwLDQuOC0yLjQsNi44LTUuOWgtMC45Yy0wLjgsMS4zLTMuNCw0LjUtNC41LDQuMQoJCQkJYy0wLjUtMC4yLTAuMi0xLjMsMC4zLTIuMWMwLDAsNi4xLTEwLjYsNi40LTEzLjRDMjU0LjEsMTguNCwyNTMuNiwxOC4xLDI1Mi44LDE4LjF6Ii8+CgkJPC9nPgoJCTxwYXRoIGQ9Ik0yMTUuOCwzNS4zYzAsMC44LDAuNiwxLjQsMS41LDEuM2MyLjEtMC4yLDQuMy0yLjIsNi4xLTUuOWwtMC44LDBjLTAuMiwwLjUtMi44LDQuMy0zLjksNGMtMC41LTAuMi0wLjItMS4xLDAuMy0yLjIKCQkJQzIxOSwzMiwyMjQsMTguNiwyMjQsMTguNWMwLjEtMC4zLTAuMS0wLjUtMC40LTAuNWMtMC4xLDAtMC43LDAtMC44LDBjLTAuNCwwLTAuNiwwLjEtMC43LDAuNGMwLDAuMS0wLjQsMC45LTAuNSwxLjEKCQkJYy0zLjQtMS43LTEwLjMsMi40LTEzLjMsOC40Yy0xLjQsMi44LTEuOCw0LjYtMS43LDZjMC4xLDEuOSwwLjksMy4xLDMuMywyLjVjNC4yLTEsOC4yLTcuMyw4LjMtNy41YzAuMS0wLjEsMC4yLTAuMSwwLjEsMAoJCQljMCwwLjEtMS42LDMuNi0xLjgsNC4yQzIxNi4xLDMzLjgsMjE1LjgsMzQuNCwyMTUuOCwzNS4zIE0yMTksMjYuM2MtMC44LDEuNS0yLDMuMi0zLjYsNC43YzAsMC0yLjUsMi44LTQuNSwzLjQKCQkJYzAsMC0yLjIsMC44LTItMS42YzAuMi0yLjcsNC4zLTExLjcsOS45LTEyLjRjMS0wLjEsMS43LDAuNCwxLjYsMS40QzIyMC4zLDIzLjgsMjE5LDI2LjMsMjE5LDI2LjMiLz4KCQk8cGF0aCBkPSJNMjg0LjYsMjYuM2w3LjItMTkuNUgyOTFsLTQuNiwwLjRsLTAuMSwwLjRjMCwwLDEsMC4yLDEuNSwwLjNjMC43LDAuMiwxLDAuMywwLjYsMS40bC03LjUsMjAuOWwtMS45LDUKCQkJYy0wLjEsMC4yLTAuMSwwLjUtMC4xLDAuNmMwLDAuNSwwLjMsMC44LDAuOSwwLjhjMC42LDAsMC45LTAuMywxLjMtMS4xbDIuNy01LjljMC43LTEuMywxLjMtMi40LDIuOC00LjVjMCwwLDQuMy02LDYuNC02CgkJCWMzLjIsMC0wLjQsOS41LTEuNywxMi4ybC0wLjcsMS41Yy0wLjYsMS41LTEuNSwyLjYtMi4yLDIuNmMtMC42LDAtMC44LTAuNy0xLjEtMWMtMC43LTAuOS0xLjctMC43LTIuMSwwLjEKCQkJYy0wLjQsMC44LDAuMywyLjIsMS44LDIuMmMxLjgsMCwzLjYtMS4zLDUuNy00LjFjMS45LTIuNywzLjYtNy42LDMuNi0xMC42YzAtMi41LTEuMS0zLjgtMi44LTMuOGMtMS43LDAtMy45LDEuMS03LjUsNi4zCgkJCWwtMS4zLDEuOUMyODQuNywyNi40LDI4NC42LDI2LjQsMjg0LjYsMjYuMyIvPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzA4LjMsOGMtMS4yLDAtMi4xLDAuOS0yLjEsMmMwLDEsMC45LDEuNywxLjcsMS44YzEuMSwwLDIuMS0wLjYsMi4xLTJDMzEwLjEsOC44LDMwOS40LDgsMzA4LjMsOHoiLz4KCQkJPHBhdGggZD0iTTMwNywxOC4xYy0wLjksMC0xLjgsMC40LTMuMiwxLjNjLTEuMywwLjktMy44LDMuNS00LjUsNC40bDAuOSwwYzEtMS4xLDMuMS0zLDMuOC0zLjVjMS4xLTAuOCwyLjEtMC43LDEuNCwwLjQKCQkJCWMtMC43LDEuNC00LjMsOC4zLTQuMyw4LjNjLTEuOCwzLjMtMi41LDQuOS0yLjUsNi4xYzAsMC45LDAuNSwxLjQsMS4zLDEuNGMyLjEsMCw0LjgtMi40LDYuOC01LjloLTAuOWMtMC44LDEuMy0zLjQsNC41LTQuNSw0LjEKCQkJCWMtMC41LTAuMi0wLjItMS4zLDAuMy0yLjFjMCwwLDYuMS0xMC42LDYuNC0xMy40QzMwOC4zLDE4LjQsMzA3LjgsMTguMSwzMDcsMTguMXoiLz4KCQk8L2c+CgkJPHBhdGggZD0iTTM0OC41LDkuNGwxLTIuN2gtMC45bC00LjYsMC40TDM0NCw3LjZjMCwwLDEsMC4yLDEuNSwwLjNjMC43LDAuMiwxLjEsMC4zLDAuOSwxLjRjMCwwLTcuMiwyMS4zLTcuNSwyNC4xCgkJCWMtMC4yLDIuNCwxLDMuMywyLjMsMy4zYzEuNywwLDMtMC41LDQuMS0xYzUuNC0yLjQsMTAuMS04LjgsOS45LTE0LjVjLTAuMS0xLjgtMS4xLTMuMS0yLjUtMy4xYy0xLjYsMC00LDEuNS02LjEsNC4xCgkJCWMtMS45LDIuMy0zLjgsNS4zLTMuOCw1LjRjLTAuMSwwLjEtMC4yLDAuMS0wLjEtMC4xQzM0Mi43LDI3LjMsMzQ4LjUsOS40LDM0OC41LDkuNCBNMzUxLjUsMjZjLTIsNC4yLTQuNiw2LjgtNC42LDYuOAoJCQljLTEuNiwxLjgtMy4zLDIuOS00LjUsMi45Yy0wLjgsMC0xLjUtMC43LTEuNS0xLjVjLTAuMS0zLjgsMy43LTguMiwzLjctOC4yYzQuNC01LjksNi02LjEsNi45LTYuMWMwLjksMCwxLjUsMC43LDEuNSwxLjcKCQkJQzM1MywyMi42LDM1Mi41LDIzLjgsMzUxLjUsMjYiLz4KCQk8cGF0aCBkPSJNMzIyLjQsMjcuNGMwLDAtMy40LDYuMi00LjQsOGMtMC4xLDAuMi0wLjMsMC41LDAsMC45YzAuMiwwLjIsMC40LDAuMiwwLjYsMC4yYzAuNSwwLDAuOS0wLjIsMS0wLjQKCQkJYzEuMS0xLjYsNC4zLTUuOSw2LTguMWMzLTMuOSw2LjYtNy4yLDYuNi03LjJjMS0wLjgsMS42LTEuMSwyLjEtMWMyLjQsMC4xLTYuNSwxMi4zLTcuOCwxNS4xYy0wLjQsMC45LTAuMSwxLjcsMS4yLDEuNwoJCQljMi42LDAsNS4zLTIuNCw3LjMtNS45aC0wLjljLTAuOCwxLjMtMy40LDQuNS00LjUsNGMtMC41LTAuMiwwLTEuMSwwLjUtMS45YzAsMCw0LjUtNi44LDYuMS0xMC4xYzAuNy0xLjQsMC45LTIuNCwwLjktMy4xCgkJCWMwLTAuOS0wLjYtMS40LTEuMy0xLjVjLTIuMi0wLjMtNC45LDIuMS03LDQuN2MwLDAtNC40LDUuMi00LjQsNS4yYy0wLjEsMC4xLTAuMiwwLTAuMS0wLjFjMCwwLDEuMS0yLjEsMS4xLTIuMQoJCQljMi43LTUsMy4yLTcuNiwxLjEtNy43Yy0xLjQtMC4xLTIuNiwwLjYtNC41LDIuM2wtMi41LDIuNmMwLDAtMy4zLDMuNy0zLjMsMy43Yy0wLjEsMC4xLTAuMiwwLTAuMS0wLjFjMC4zLTAuOCwxLjktMy4xLDMuMy02LjgKCQkJYzAuNC0xLjEtMC4yLTEuNy0xLTEuN2MtMC45LDAtMS44LDAuNS0yLjksMS40Yy0xLjIsMS0zLjMsMy40LTQsNC4zbDAuOSwwYzEtMS4xLDIuNC0yLjcsMy4xLTMuMmMxLjEtMC44LDEuOC0xLDEuMywwLjIKCQkJYy0wLjgsMS44LTMuMyw2LjctMy4zLDYuN3MtMy4zLDYuMS00LjMsNy45Yy0wLjEsMC4yLTAuMywwLjUsMCwwLjljMC4yLDAuMiwwLjQsMC4yLDAuNiwwLjJjMC41LDAsMC45LTAuMiwxLTAuNAoJCQljMS4xLTEuNiwzLjctNiw1LjQtOC4yYzIuMS0yLjcsNy04LjEsOC41LTguMWMwLjMsMCwwLjcsMC4yLDAuNiwwLjlDMzI1LjQsMjEuMywzMjQuMSwyNC4zLDMyMi40LDI3LjQiLz4KCQk8cGF0aCBkPSJNMzcwLjMsMjQuOWMwLjEtMC4xLDAuMiwwLDAuMSwwLjFjMCwwLTMuMyw3LjUtMy4zLDcuNWMtMS4xLDIuNi0xLjEsMy44LTAuMSw0LjFjMS41LDAuNSw0LjEtMi42LDYuMy01LjloLTAuOQoJCQljLTEuMSwxLjctMi45LDMuNS0zLjIsMy43Yy0wLjMsMC4yLTAuNywwLjItMC41LTAuM2MwLjEtMC41LDUuMi0xMyw1LjktMTQuOWMwLjEtMC4yLDAuMi0wLjYtMC4xLTAuOWMtMC4yLTAuMS0wLjQtMC4yLTAuNy0wLjIKCQkJYy0wLjUsMC0wLjgsMC4zLTEsMC42Yy0wLjYsMS4xLTIuMSwzLjgtMy4yLDUuM2MtNC4yLDUuNy04LjksOS45LTEwLjEsMTAuM2MtMC4zLDAuMS0wLjQtMC4xLTAuNC0wLjNjMC45LTIuNiwzLjEtNi4zLDMuNy03LjYKCQkJYzEuMi0yLjMsMy4xLTYsMy4zLTcuMWMwLjEtMC43LTAuNC0xLjEtMS0xLjFjLTAuNywwLTEuNywwLjItMywxLjVjLTEuMSwxLTMuMywzLjQtNCw0LjNsMC45LDBjMS42LTEuOSwzLjMtMy40LDMuOS0zLjgKCQkJYzAuMy0wLjIsMC42LTAuMSwwLjUsMC4zYy0wLjQsMS41LTcsMTMuMi03LjEsMTUuNGMtMC4xLDEuMSwwLjcsMSwyLDAuNWMyLjMtMC45LDQuOC0yLjksOS03LjlDMzY3LjQsMjguMywzNzAuMiwyNC45LDM3MC4zLDI0LjkKCQkJIi8+CgkJPHBhdGggZD0iTTM4MSwyOC4zYy0wLjEsMC4xLTAuMiwwLTAuMS0wLjFjMCwwLDIuNS02LDIuNS02YzEuMS0yLjYsMS4xLTMuOCwwLjEtNC4xYy0xLjUtMC41LTQuMSwyLjYtNi4yLDUuN2gwLjkKCQkJYzEtMS41LDIuOC0zLjMsMy4xLTMuNWMwLjMtMC4yLDAuNi0wLjIsMC41LDAuM2MtMC4xLDAuNS01LjIsMTMtNS45LDE0LjljLTAuMSwwLjItMC4yLDAuNiwwLjEsMC45YzAuMiwwLjEsMC40LDAuMiwwLjcsMC4yCgkJCWMwLjUsMCwwLjgtMC4zLDEtMC42YzAuNi0xLjEsMi4yLTQuMywzLjItNS45YzMuNy02LDcuNS05LjYsOC42LTEwLjFjMC44LTAuNCwxLjUtMC4xLDEuMiwwLjhjLTAuOCwyLjgtMi42LDYuMi0zLjIsNy42CgkJCWMtMS4xLDIuMy0yLjcsNS44LTMsNi45Yy0wLjEsMC43LDAuMywxLjMsMS4xLDEuM2MwLjcsMCwxLjctMC4yLDMuMS0xLjVjMS4xLTEsMi45LTMuNSwzLjctNC41aC0wLjhjLTEuNiwyLTMsMy40LTQsNAoJCQljLTAuNCwwLjItMC42LDAuMS0wLjUtMC4zYzAuNC0xLjUsNS45LTExLjQsNS45LTE0LjVjMC0yLjMtMi42LTItMy44LTEuMkMzODUuNSwyMS4zLDM4MSwyOC4zLDM4MSwyOC4zIi8+CgkJPHBhdGggZD0iTTI3NS40LDIzLjdjLTAuOC0xLjctMS4xLTIuMy0yLjEtNC4zYy0xLTItMi00LjItMi02LjJjMC0zLjEsMi4yLTUuMyw1LjMtNS4zYzIuNywwLDQsMS41LDQuMiw1LjJsMC43LTAuMQoJCQljMC4zLTEuOCwxLjEtNC41LDEuMS00LjVjLTEuMy0wLjYtMy4xLTEuMS00LjMtMS4yYzAsMC0zLjQtMC42LTYuMiwxYy0yLjYsMS41LTMuNywzLjUtMy43LDYuM2MwLDEuMSwwLjUsMy4yLDEuMiw0LjZsMi41LDUuNQoJCQljMC45LDEuOCwxLjYsNCwxLjUsNS4yYy0wLjQsNC45LTQuNyw2LTYuNyw2Yy0xLjUsMC0yLjQtMC40LTIuNC0wLjRjLTEuNy0wLjctMi42LTIuNS0yLjctNS40bC0wLjctMC4xYy0wLjMsMi4yLTAuNiw1LTAuNyw1LjYKCQkJYzAsMC4xLDMuNSwxLDYuMywxYzIuNywwLDQuNS0wLjUsNi40LTEuNmMyLjUtMS40LDMuNy0zLjYsMy43LTZDMjc2LjcsMjcsMjc2LjIsMjUuNiwyNzUuNCwyMy43Ii8+CgkJPHBhdGggZD0iTTE4NS43LDM0Yy0wLjIsMC43LTAuNCwxLjEtMSwxLjJjLTAuMywwLjEtMi4xLDAuMy00LDAuNmwwLjEsMC42YzAuOC0wLjEsMy41LTAuMSw0LjMtMC4yYzAuOCwwLDIuNSwwLDMuMSwwCgkJCWMwLjYsMCwzLjMsMC4xLDMuMywwLjFsMC4xLTAuNmMtMC45LTAuMS0xLjgtMC41LTItMC42Yy0wLjUtMC4xLTAuOC0wLjMtMC43LTEuMWwxLjgtMjcuM2gtMS4xQzE3OS44LDE2LjksMTYzLDMzLjEsMTYzLDMzLjEKCQkJcy0xLDAuOS0xLjQsMS4yYy0wLjQsMC4zLTEuNCwwLjctMS45LDAuOWMtMC4zLDAuMS0xLDAuMy0yLjksMC42bDAuMSwwLjZjMC44LTAuMSwyLjMtMC4xLDMuMi0wLjJjMC44LDAsMywwLDMuNiwwCgkJCWMwLjYsMCwzLjksMC4xLDMuOSwwLjFsMC4xLTAuNmMtMC45LTAuMS0zLjItMC42LTMuNC0wLjZjLTAuNS0wLjEtMC45LTAuNS0wLjctMWMwLDAsMC4xLTAuMywwLjUtMC43YzAuNC0wLjQsOC42LTguMyw4LjYtOC4zCgkJCWM3LjEtMC4yLDEzLjgsMCwxMy44LDBTMTg1LjksMzMuMiwxODUuNywzNCBNMTg2LjYsMjMuOWMwLDAtMTAuOSwwLjItMTIuOCwwYzAsMCwxMy40LTEyLjUsMTMuOC0xMi43TDE4Ni42LDIzLjl6Ii8+CgkJPHBhdGggZD0iTTE1NC41LDIzLjhjMCwwLTEsMS4yLTIuNCwyYy0xLjYsMS0zLjQsMS4yLTMuNCwxLjJjMC4xLTAuNSwxLjMtMywxLjMtM2MxLjItMi43LDMuMy01LjEsNC41LTUuMWMwLjcsMCwxLjIsMC43LDEuMiwxLjUKCQkJQzE1NS42LDIxLjksMTU1LjIsMjIuOCwxNTQuNSwyMy44IE0xNTQuNSwxOC4yYy0xLjIsMC0yLjgsMC45LTMuNywxLjljMCwwLTIuMSwyLTMuOCw1LjRjLTAuNSwwLjktMS43LDMuNS0xLjcsNi4zCgkJCWMwLDMsMS4xLDQuNywzLjIsNC45YzEuNywwLjEsMy40LTAuOSw0LjgtMi44YzAuOS0xLjIsMS4xLTIsMS42LTMuMkgxNTRjLTAuOSwyLTEuOSwyLjktMS45LDIuOWMtMC43LDAuOS0xLjgsMS42LTIuNiwxLjYKCQkJYy0yLjEsMC0yLjUtMy41LTEuMi03LjFjMCwwLDIuMS0wLjEsNC41LTEuMmMxLjMtMC42LDQuNC0xLjgsNC40LTUuNUMxNTcuMiwxOS42LDE1NiwxOC4yLDE1NC41LDE4LjIiLz4KCQk8cGF0aCBkPSJNMTM4LjksNi4yYzAtMC4xLTAuMS0wLjMtMC4zLTAuMmMtMC4xLDAtMC4zLDAuMi0wLjksMC41Yy0wLjcsMC40LTIuNSwxLjEtMy45LDEuM2MtMS40LDAuMi0zLjQsMC4yLTUsMC4xCgkJCWMtMS43LTAuMS03LjQtMC41LTguOC0wLjVjLTEuNCwwLTQuMiwwLjEtNi4zLDEuMmMtMi4xLDEuMS0zLjYsMi42LTQuNiw1LjJjLTEuMiwzLjEsMC4xLDQuMywwLjYsNC43YzAuNCwwLjQsMS4zLDAuNywyLDAuMgoJCQljMC41LTAuNCwwLjktMS42LTAuNi0yLjVjLTAuOS0wLjUtMS4xLTEtMS0xLjljMC4xLTAuOSwwLTAuMSwwLTAuMWMwLjItMS4zLDAuNS0xLjgsMS0yLjZjMC40LTAuNSwxLjEtMS41LDIuNC0yLjIKCQkJYzAuNy0wLjQsMS42LTAuNiwzLjItMC42YzAuNSwwLDEuNywwLjIsMi4xLDAuMmMwLjUsMC4xLDMuNiwwLjUsNC4yLDAuNmMwLjQsMCwwLjQsMC4yLDAuMywwLjZjLTAuMiwwLjQtNy44LDIzLTgsMjMuNwoJCQljLTAuMiwwLjctMC40LDEtMSwxLjFjLTAuMywwLjEtMi41LDAuMy00LjQsMC42bDAuMSwwLjZjMC44LTAuMSwzLjUtMC4xLDQuMy0wLjJjMC44LDAsMy41LDAsNC4xLDBzNCwwLjEsNCwwLjFsMC4xLTAuNgoJCQljLTAuOS0wLjEtMy41LTAuNi0zLjctMC42Yy0wLjUtMC4xLTEtMC4zLTAuNy0xYzAuMS0wLjQsOC0yMy40LDguMi0yMy44YzAuMS0wLjIsMC4zLTAuMywwLjUtMC4zYzAuMywwLDMuMiwwLDUuMS0wLjUKCQkJYzEuMS0wLjMsMi43LTAuOSwzLjEtMWMwLjMtMC4xLDAuNS0wLjEsMC40LDAuMmMwLDAuMS0wLjEsMC4zLTAuMywwLjdsLTcuNCwyMC44bC0xLjksNWMtMC4xLDAuMi0wLjEsMC40LTAuMSwwLjYKCQkJYzAsMC41LDAuMywwLjgsMC45LDAuOGMwLjYsMCwwLjktMC4zLDEuMy0xLjFsMi43LTUuOWMwLjctMS4zLDEuMy0yLjQsMi44LTQuNWMwLDAsNC4zLTYsNi40LTZjMy4yLDAtMC40LDkuNS0xLjcsMTIuMmwtMC43LDEuNQoJCQljLTAuNiwxLjUtMS41LDIuNi0yLjIsMi42Yy0wLjYsMC0wLjgtMC43LTEuMS0xYy0wLjctMC45LTEuNy0wLjctMi4xLDAuMWMtMC40LDAuOCwwLjMsMi4yLDEuOCwyLjJjMS44LDAsMy42LTEuMyw1LjctNC4xCgkJCWMxLjktMi43LDMuNi03LjYsMy42LTEwLjZjMC0yLjUtMS4xLTMuOC0yLjgtMy44Yy0xLjcsMC0zLjksMS4xLTcuNSw2LjNsLTEuMywxLjl2MGMtMC4xLDAuMS0wLjIsMC4xLTAuMiwwTDEzOC45LDYuMnoiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K) no-repeat 0 0; background-size: contain; white-space: nowrap; text-indent: 200%; } .home .layout-header__logo a { width: 288px; height: 79px; } .fixed .layout-header__logo a { width: 156px; height: 43px; } .layout-header__logo a:hover { opacity: .7; } .home .layout-header__logo { top: 70px; left: -2px; } .fixed .layout-header__logo { top: 17px; left: -2px; } .layout-header__feature { position: absolute; top: 43px; left: 292px; } .home .layout-header__feature { top: 76px; left: 325px; } .fixed .layout-header__feature { display: none; } .layout-header__category { position: absolute; top: 81px; right: 7px; } .home .layout-header__category { top: 125px; right: 0; } .fixed .layout-header__category { top: 28px; } .layout-header__more { display: -webkit-box; display: flex; position: absolute; top: 0; right: 0; } .fixed .layout-header__more { display: none; } .layout-header__progress { display: none; } .article .layout-header__progress { position: absolute; bottom: 0; left: 0; width: 0; height: 6px; background: -webkit-linear-gradient(left, #ff6636 20%, #9f3a86 50%, #3969ca 80%); background: linear-gradient(to right, #ff6636 20%, #9f3a86 50%, #3969ca 80%); -webkit-transition: width .5s ease-out; transition: width .5s ease-out; } .fixed .layout-header__progress { display: block; } /* #colors */ /*doc --- title: layout-breadcrumbs name: layout-breadcrumbs category: Layout --- メインコンテンツ内で使用すパンくず用のレイアウトスタイルです。 * width: 100% * min-width: 1024px ```block ``` */ .layout-breadcrumbs { width: 1024px; margin: 0 auto; padding: 6px 0 0; } /*doc --- title: layout-content-col1 name: layout-content-col1 category: Layout --- メインコンテンツ内で使用する1カラム用のレイアウトスタイルです。 * width: 100% * min-width: 1024px ```block
default
add '.layout-content-col1--bg1'
add '.layout-content-col1--bg2'
add '.layout-content-col1--bg3'
``` */ .layout-content-col1 { min-width: 1024px; } .layout-content-col1:first-child > *:first-child { margin-top: 0; } .layout-content-col1--bg1 { background: #eee; } .layout-content-col1--bg2 { background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMsaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MCA3OS4xNjA0NTEsIDIwMTcvMDUvMDYtMDE6MDg6MjEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCREREQ0JFNTA1NjcxMUU4OERENThBNjVFRjM0N0NBQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCREREQ0JFNjA1NjcxMUU4OERENThBNjVFRjM0N0NBQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJERERDQkUzMDU2NzExRTg4REQ1OEE2NUVGMzQ3Q0FCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJERERDQkU0MDU2NzExRTg4REQ1OEE2NUVGMzQ3Q0FCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAHQAdAwERAAIRAQMRAf/EAGUAAQEBAQEAAAAAAAAAAAAAAAMBAgQJAQEAAAAAAAAAAAAAAAAAAAAAEAACAQIDBgUFAAAAAAAAAAABAhEAEiEDEzFBUWGhMvDB0UIj4fEikkMRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APbkAkgASTsFAt2lgh+T3ON3IUEIGYCyiHGLoN/MUBUHUcpssWqVvYfk16jA7hJoB0m4p+6+tBRluCCGQEbDevrQNp4asJcMCt62zx29KAVYMAjmAOx+H0oMMpUkEQRQVEukk2ovc3jfQa1BMW/GMLPOeNAVA4jTGr2/zI7vtQZzJhYwy/ZHWedAVB//2Q==) repeat 50% 0; } .layout-content-col1--bg3 { background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMsaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MCA3OS4xNjA0NTEsIDIwMTcvMDUvMDYtMDE6MDg6MjEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RTdDOTZGMzA2NkMxMUU4OTEwQkMyRTVEQjYyMjZFQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RTdDOTZGNDA2NkMxMUU4OTEwQkMyRTVEQjYyMjZFQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlFN0M5NkYxMDY2QzExRTg5MTBCQzJFNURCNjIyNkVDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlFN0M5NkYyMDY2QzExRTg5MTBCQzJFNURCNjIyNkVDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAHQAdAwERAAIRAQMRAf/EAGUAAQADAQAAAAAAAAAAAAAAAAMAAQIHAQEAAAAAAAAAAAAAAAAAAAAAEAACAQIEBAQHAAAAAAAAAAABAhEAEkFhIgMhMVETcZLSU5HhMlJygiMRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOOKpYgASTQIXs07Z/JxzJyyoIQNwFlEOOLoMcxQFQM/8521/dvu8MqAaCwSCCDBHI0DStves1TFuE9RQYVgwCOYA+h+nyoMMpUkEQRQbVRF78EHxJ6Cgnda6YFsRZhHSguNn3H8g9VAwGz217jOVnRpAMY4nhQZ3Rt3CXa2NEIIjLVQHGz7j+Qeqg//2Q==) repeat 50% 0; } /*doc --- title: layout-content-col2 name: layout-content-col2 category: Layout --- メインコンテンツ内で使用する2カラム用のレイアウトスタイルです。 * width: 100% * min-width: 1024px ```block
article
side
``` */ .layout-content-col2__inner { display: -webkit-box; display: flex; justify-content: space-between; align-items: flex-start; width: 1024px; margin: 0 auto; padding: 32px 0 0; -webkit-box-pack: justify; -webkit-box-align: start; } .layout-content-col2__inner-left { width: 672px; } .layout-content-col2__inner-left > *:first-child { margin-top: 0; } .layout-content-col2__inner-right { position: relative; align-self: stretch; width: 300px; } .layout-content-col2--eq .layout-content-col2__inner { display: -webkit-box; display: flex; justify-content: space-between; align-items: flex-start; width: 1024px; margin: 0 auto; padding: 56px 0 0; -webkit-box-pack: justify; -webkit-box-align: start; } .layout-content-col2--eq .layout-content-col2__inner-left, .layout-content-col2--eq .layout-content-col2__inner-right { width: 482px; } /* #colors */ /*doc --- title: layout-search-header name: layout-search-header category: Layout --- 検索記事一覧ページタイトル用レイアウト。 ```block ``` */ .layout-search-header { margin: 32px 0 0; } /* #colors */ /*doc --- title: layout-article name: layout-article category: Layout --- 通常記事用のレイアウトスタイルです。 * width: 100% ```block ``` */ .layout-article > *:first-child { margin-top: 0 !important; } aside + .layout-article { margin: 30px 0 0; } /* #colors */ /*doc --- title: layout-side name: layout-side category: Layout --- サイドバー用レイアウト。 ```block ``` */ .layout-side > *:first-child { margin-top: 0; } .layout-side.fixed { position: fixed; width: 300px; } .layout-side.comp { position: absolute; } /* #colors */ /*doc --- title: layout-footer name: layout-2 category: Layout --- 共通ヘッダーのレイアウト情報を記述します * width: 100% * min-width: 1024px * 共通コードを使用(ただし、クラス名は変更可。また、トップページへ戻るボタンも任意。) ```html ``` */ .layout-footer { position: relative; min-width: 1024px; padding: 37px 48px 40px 77px; background: #000; color: #fff; } .layout-footer-inner { position: relative; padding: 0 156px 0 0; } .layout-footer__nav { display: block; position: relative; z-index: 2; } .layout-footer__copyright { display: block; margin: 38px 0 0; font-family: 'Ubuntu'; font-size: 1.2rem; font-weight: 500; } .layout-footer__logo { display: -webkit-box; display: flex; position: absolute; top: 0; right: 0; justify-content: flex-end; align-items: center; width: 156px; height: 100%; -webkit-box-pack: end; -webkit-box-align: center; } .layout-footer__logo .unit-svg { width: 120px; height: 20px; } .layout-footer__logo .unit-svg path, .layout-footer__logo .unit-svg rect, .layout-footer__logo .unit-svg polygon { fill: #fff; } .layout-footer__scroll-top { display: block; position: absolute; z-index: 1; top: -65px; left: 0; width: 100%; text-align: center; }
  1. HOME
  2. World Now
  3. 芝園団地に住んでいます 記者が住民として見た、「静かな分断」と共生

芝園団地に住んでいます 記者が住民として見た、「静かな分断」と共生

Re:search 歩く・考える
1号棟から15号棟までに約5,000人が住む。広場では祭りや餅つきなど様々な催しが開かれる Photo: Ikenaga Makiko, Oshima Takashi
1号棟から15号棟までに約5,000人が住む。広場では祭りや餅つきなど様々な催しが開かれる Photo: Ikenaga Makiko, Oshima Takashi

日本の課題が詰まった団地

風が強いときはドアを閉めましょう!
风大时请将门关上!
私が住む棟の入り口にある貼り紙だ。団地住民向けの掲示は、どれも日中2カ国語で書いてある。

Re:search_芝園団地_10
団地の入り口に貼られた貼り紙。日本語と中国語で書かれている Photo: Oshima Takashi

芝園団地は1978年に日本住宅公団(現在のUR都市機構)が建てた賃貸住宅で、約5000人が住む。1990年代から増えた外国人約2500人の大半が、中国人だ。201511月、芝園団地がほぼ全域を占める川口市芝園町の人口は、初めて外国人住民が日本人を上回った。
90年代は外国人は入居不可という賃貸物件も多かったが、公団の賃貸住宅は中長期の在留資格を持つ外国人も借りられるため、増えたとみられる。

都心から1時間足らずと通勤の便がよく、78年の完成当時は先進的な住環境が人気で抽選になったほどだ。だが日本人は高齢化が進んで減少。古くから住む住民の多く70代以上だ。現在は超高齢化と外国人住民との共生という、「課題先進地」となっている。

アメリカの移民問題、他人事と思えず

この団地のことを初めて耳にしたのは、2015年のことだった。当時から、芝園団地は一部では知られた団地だった。

Re:search_芝園団地_6
団地群の中を歩く子供たち Photo: Ikenaga Makiko

外国人住民が増え、ごみや騒音などのトラブルが絶えない「荒れた」団地。ネット上には、こんなイメージで語られる書き込みがいくつも見つかった。
その団地に引っ越したのは171月。家賃を節約するため、都内からの引っ越しを考えていた時期だった。ただ、この団地を選んだのは、ほかの理由もあった。

16年の秋、私は前年まで10年近く暮らした米国を再訪し、大統領選挙を取材した。
「(メキシコ国境に)壁をつくれ!」。オハイオ州の小さな町で叫ぶトランプと、熱狂する支持者たち。トランプ勝利に茫然自失となっているニューヨーク市民。それぞれの姿は、この国が根底から揺さぶられているのを痛感させた。

『あしたの地球に』誰もが安心して暮らせる社会をつくる、世界各地の注目の活動を紹介します。:GLOBE+
Latest from PR

なかでも衝撃を受けたのは、パンドラの箱を開けたかのように、移民やマイノリティーへの嫌がらせや暴力事件が多発したことだ。
2人の子供が、アジア系の米国市民として現地で暮らす私にとっては、米国の移民問題は家族の問題でもあった。

米国取材から戻った後、芝園団地のことを思い出し、物件を見に行った。
頭の片隅には、ネットの書き込みが残っていた。たとえば、こんな匿名のつぶやきだ。
「移民入れろーとか言ってる連中も自分らが率先して芝園団地に住めってんだよ!っていつも思う」

共存しているけど交わらない

家賃77200円の1LDKでの暮らしが始まった。
団地内の小さな商店街には、中国人が経営する飲食店や雑貨店が並ぶ。行き交う人々の言葉も、日本語よりも中国語のほうが多く耳に入ってくる。

Re:search_芝園団地_14
筆者の自室。畳の2DKを1LDKに改装した物件 Photo: Oshima Takashi

実際に住んでみると、建物こそ古さを感じさせるものの、敷地内はきれいに保たれている。少なくとも自分が住んでいる棟では、騒音が気になることもなかった。あまりに何も起きないので、拍子抜けしたくらいだ。
古参の住民に聞くと、ごみや騒音をめぐるトラブルは、この5年ほど徐々に減っているという。管理するUR都市機構や自治会が、住民向けの掲示を日中2カ国語にするなど取り組みを続けてきた。自治会長の韮澤勝司(73)は話す。

「中国人はこう、日本人はこうと両方つっぱっていてもしょうがない。両者が歩み寄ってきたということだよね」
その意味では、ネット上に飛び交う「トラブルが絶えない団地」という姿は、少なくともいまの芝園団地の実像ではない。

Re:search_芝園団地_1
自治会長の韮澤勝司さん。「いろいろあるけど、昔と比べれば多少は落ち着いたんじゃないかな」 Photo: Oshima Takashi

ただ、日本人住民と外国人住民は、一つの団地に住みながらも、互いに交わることのない二つの世界で暮らしているようだった。
たとえば、団地に古くからある喫茶店は、客のほとんどが日本人だ。逆に、同じ商店街に並ぶ中国人経営の中華料理店には、日本人住民はほとんど訪れない。
国籍や文化の違いだけではない。若い中国人住民と高齢の日本人住民は、生活や家族構成も全く違う。

同じ空間に住むという意味では、日本人と中国人は、大きなトラブルもなく「共存」はしている。
しかし、互いに協力しながら生きることを「共生」と呼ぶなら、日本人と中国人は、共存はしても「共生」はしていなかった。

静かな分断。それが、住み始めたころに浮かんだ言葉だった。

この「もやもや感」の正体は

Re:search_芝園団地_12
団地の中心部にある通称「たまご広場」。休日には多くの中国人の親子でにぎわう Photo: Oshima Takashi

日本人住民はどのような思いを抱きながら、ここで暮らしているのか。それが垣間見えたのが、夏に開かれた「ふるさと祭り」だった。
ふるさと祭りは、住民が手づくりで続けてきた団地最大の催しだ。2階建ての大きなやぐらを囲んで盆踊りをし、地元の住民や商店が出す露店が並ぶ。

2017年夏の暑い盛りに、広場で祭りの準備をしていた日のことだった。手伝っていた私に、自治会役員の一人が話した。
「祭りの準備に参加する住民の皆さんには、何のためにやっているんだろうという『もやもや感』があるんですよね」
日本人住民は高齢化が進み、祭りを楽しむ若い親子の多くは、自分たちの子や孫ではなく、中国人住民になっている。しかし祭りの準備や運営はいまも日本人住民だけが担っている。

日本人住民の「もやもや感」とは、中国人も祭りを楽しむのに、準備などの負担は日本人だけが負うことへの、割り切れない思いだった。似たような日本人住民の感情は、たとえば外国人住民の多くが自治会に加入していないことを巡っても、垣間見えた。

後日、思わぬ形でその言葉を思い出す場面があった。祭り最終日の夜、住民が広場のテーブルや椅子を片づけ始めたときのことだ。
広場では、ビニールシートを敷いて宴会をしている何組かが残っていた。私は椅子を運びながら、そのうちの一組の中国人に、「ちょっと動いてもらっていいですか」と声をかけた。片付ける動線に近く、よろけるとぶつかりそうだったので、1メートルほど下がってもらえないかと思ったのだ。

だが、倉庫から戻ってきてもグループは同じ場所にいた。
それを見た瞬間、自分の心の中にも、「少しぐらい後片付けに協力してくれてもいいのに……」という気持ちが芽生えたのだ。

Re:search_芝園団地_7
芝園団地内の商店街には、中国系の飲食店が並ぶ Photo: Oshima Takashi

立ち止まったとき、米大統領選挙のときに取材した、アンディ・サリバンという工事現場監督を思い出した。
ブルックリンの下町育ちでトランプ支持者のサリバンは、「移民が増えてこのあたりも変わってしまった」と嘆き、「俺たちの税金」で成り立つ福祉に、不適正なやり方でただ乗りする移民がいると訴えた。米国での福祉サービスの不適正受給は移民に限った問題ではないが、彼の怒りは特に移民に向けられていた。

団地住民の「もやもや感」が大きくなっていけば、いずれサリバンが抱くような外国人への反感につながるのではないか? こう考えたとき心の中に動揺が広がり、自問した。
米大統領選挙で起きたことを目の当たりにした自分は、少なくとも「トランプ的な世界」とは別の世界を望んでいたはずだ。

しかしいま、私は自分の心の奥底に、トランプの影を見てしまったのではないか。

郷に入れば郷に従え?

地域活動への参加や自治会の加入を巡るいざこざは、日本人と外国人に限らない。日本人同士でも、古くから住む住民と「新住民」との間でこうした問題は起こりがちだ。
ただ外国人との場合は、より「我々(日本人)対彼ら(外国人)」という対立的な構図になりがちだ。

日本人住民の「もやもや感」は、ほかにもあった。
たとえば、団地の商店の多くが中国系の店になったことに、複雑な思いを抱く古参住民は少なくない。この場合の「もやもや感」は、「自分たちの団地」が急速に変わっていくことへの、戸惑いや不安だろう。
この「もやもや感」は、目に見えないが静かに充満するガスのように、危険なものに思えた。
誰かが煽って火をつければ、外国人への反感は一気に広がりかねない。それは実際に、トランプのアメリカや、反移民を掲げる政党が勢力を伸ばす欧州で起きていることだ。

Re:search_芝園団地_13
2017年夏に開かれた「ふるさと祭り」の様子。太鼓の演奏を聞きに、多くの住民が集まった Photo: Oshima Takashi

一方で、団地に古くから住む住民には、中国人に地域の活動への参加を呼び掛けることへの、ちゅうちょも見えた。
祭りの準備で一番の力仕事は、やぐらの組み立てだ。高齢化が進み、昨年の参加者は往時の半分ほどに減り、「やぐらもあと何年組めるかなあ」という声が漏れた。
ときおり、広場を通る中国人住民が立ち止まって作業を見つめる。だが、日本人住民が彼らに「手伝って」と声をかけることはない。

このような場面に何度か接するうちに、私は「郷に入れば郷に従え」という言葉について考えるようになった。
これは、外国人住民について語るとき、日本人がしばしば口にする言葉だ。だが、私たちはそもそも、外国人住民を郷に「入れて」いるのだろうか。
「地域の活動に参加するべきだ」「ルールを守るべきだ」と思っていても、私たちは同じ住民として彼らを受け入れ、思いを伝えあっているのだろうか。

それは、祭りの夜に「もやもや感」を抱いた、自分自身にもあてはまった。
「一緒に片付けに協力してほしい」という気持ちを伝えないまま、「もやもや感」を私が抱いていたことなど、あの中国人のグループは知る由もなかっただろう。

洗濯機の落書き

一方の中国人住民たちは、どのような思いで団地に住んでいるのだろうか。

団地に住む中国人は、20代後半から40代前半までの、比較的若い世代が多い。

Re:search_芝園団地_2
中国人の王麗朋さん(33)。妻と去年生まれたばかりの子供の3人で暮らすIT技術者。「中国の店があるので便利です」と流暢な日本語で話した Photo: Oshima Takashi

特に多いのが、IT技術者だ。数カ月から長ければ数年単位で、派遣先の企業で働く。専門技術を持つ人材として日本政府が受け入れ、IT業界の労働力不足を補う存在だ。
団地の広場は、休日ともなればこうした中国人の親子でにぎわう。
妻と4歳の男の子の3人で昨年越してきたIT技術者の佟海軍(40)は、「妻はまだ日本語があまり話せないので、中国人が多いここなら安心するだろうと思って決めました」と話す。

佟のように、多くの中国人にとっては中国人コミュニティーがあることが、この団地の魅力となっている。
芝園団地は賃貸なので、数年住んで、子供が小学生になるといった節目で引っ越す中国人住民が多い。日本人住民との交流が生まれにくい、構造的な要因があるのだ。
地域の活動や自治会への参加についても、「中国には自治会のような組織がないので、なぜ会費を払って入らないといけないかがわからない」と習慣の違いを口にする中国人住民もいる。

お互いが交じり合わない中で、緊張が生まれるときもある。

団地でいまも問題になっているのが、粗大ごみの処理だ。処理費用の納付券が貼られていない家具や電化製品が放置されていることがある。
昨年5月のある日、放置されていた洗濯機の上に、こんな落書きがされていた。

不法投キ 支那人

数日後、「支那人」の上に線が引かれ、「日本人」と上書きされていた。
日本人住民の中には「中国人がルールを守らない」という声がある。ただ、外部から粗大ごみを持ち込む車も夜中に目撃されており、中国人住民だけとは断定はできない。

「日本人」という上書きは、すべて自分たちのせいにされることへの、中国人住民の反発かもしれなかった。

橋をかける

団地では、こうした「静かな分断」を乗り越えようとする取り組みが続けられている。
その一つが、大学生のグループ「芝園かけはしプロジェクト」だ。

Re:search_芝園団地_8
団地の住民と、どのようなイベントをするかアイデアを出し合う「芝園かけはしプロジェクト」の学生たち Photo: Oshima Takashi

15年に発足し、最初のイベントでは、差別的な落書きがあった団地のベンチを、日中住民で塗り替えた。現在は定期的に、交流のイベントを開いている。
今年4月、団地の集会所で開いたのは、住民自身が次にどんなイベントをやるか、意見を出し合うという会だった。

Re:search_芝園団地_11
差別的な落書きが書かれていたベンチを、「かけはしプロジェクト」の学生と住民が塗り替え、アート作品に変えた Photo: Oshima Takashi

「まずは自由に、やりたいことをどんどん書き出していきましょうか」
食べ歩き、語学教室、卓球大会……。学生に促され、集まった10人ほどの住民が付せん紙に書き出していった。
「交流のイベントそのものだけじゃなくて、どういうイベントをやるか一緒に考えるというプロセスが大事だと思います」と代表の圓山王国(25)は語る。

団地の自治会も、学生たちと二人三脚で取り組む。学生との協力や、外国人住民との交流で中心になっているのが、事務局長の岡﨑広樹(36)だ。
岡﨑は、三井物産を辞めて松下政経塾で学んでいた14年、日本人と外国人の関係のあり方を考えるため団地に引っ越し、以来住み続けている。

「一人でも知り合いとか話をしたことがある人ができると、『中国人が……』という言い方をあまりしなくなる。つながりをつくることによって民族とか国家間の問題になりにくくなるし、そういう関係性をつくっていくのが交流の意味だと思います」と語る。

Re:search_芝園団地_12
2017年夏のふるさと祭りで「かけはしプロジェクト」が企画した風鈴。日本語と中国語で書かれた、団地の住民たちのメッセージがつるされた Photo: Oshima Takashi

団地はいま、学生が懸け橋となって日中住民が多文化共生に取り組む場として、新聞や雑誌、テレビに頻繁に取り上げられるようになっている。自治会は今年、埼玉県や国際交流基金から表彰された。
ただ、「自分たちと関係のない所で一部の人たちがやっているだけ」と冷めた目で見ている住民がいるのもまた、現実だ。

異なる集団同士で接触が増えると相手への偏見が減るという考え方は、社会心理学で「接触仮説」と呼ばれる。ただし、接触することで対立が激しくなる場合もあり、接触仮説が成り立つには、ともに活動することが双方の利益になるような関係にあるなど、いくつかの前提条件が必要とされる。

団地での生活が5年目に入った岡﨑自身は、こう語る。

「いまの課題は、外国人との交流に関心がない人たちにも、いかにつながりの輪を広げていくか。いろいろやってきて分かったことの一つは、頭で理解してもらおうとして言うだけではだめだということです。感じてもらわないと」
その言葉は、岡﨑自身にも言えることだった。外から頭で考えて発信する人間とは違う説得力が、岡﨑の言葉にはある。

変化への適応は時間もかかるし、ときに痛みも伴う。しかし日本人住民だけでは、祭りなどの催しも、団地そのものも存続は難しいかもしれない。
一方、外国人と共に取り組めば、時代とともに形を変えて、祭りは続く可能性がある。

芝園団地に、今年もふるさと祭りの夏がやってくる。
今年は、「一緒にやぐらを組み立てよう」と、団地で知り合った外国の隣人たちを誘ってみよう。

     ◇

この記事の感想や外国人との共生についてのご意見を、お名前、年齢、お住まいの都道府県を明記のうえ、globeasahi.comにお寄せ下さい。いただいたご意見はウェブサイトGLOBE+、朝日新聞フォーラム面で紹介させていただく場合があります。

この記事は、中国語ニュースサイト「朝日新聞中文網」でも近く配信します。