``` */ 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+A2I2AAAHqklEQVR42uxda2xURRidbpdHbXmttBSoUAi1oaHV4B/ACpRXCRrARA1SY0B/WEwMxJBIDGoaDWKCidEY+wuNWkjUqJQQAy2Uh6Ai9AegUFG29LltYSn0Sdtt/U7vrNSybffu3sfce+ckJ1DCdu+cc+fONzPf3C9m4ZazTHBMIKYSZxCTiVOIE4njieOIbuJY/n87iT3EFuIdYjOxgegjVhEribdFbqxbwGuaSpxPzCDOJSaq+GzQmAT+e0KhiXiZ+CexnFgvDbkfKcQc4hPDCKkVEjkX859hyCliGbHGyYbgcbOEuJSYbnKPfI6zgniceII/9hxhyHTieuIy4mjBHpfpnJuJx4g/EmvtagiM2MB7RYzggQRulNXEXOJJ4n6jjDHCEERDebxxscxaiOE3UDbxMLGIR2+WNASNWUF8mRjPrA3cSGu4OXuJJcQ+KxmSRNxGzGT2Am6s13gg8hGxUesvcOlw0QhfP7GhGQORyduYI3IPGUXMJ65izsADxNeJ84iFxG6Resgk4gcOMmMgVvG2e0QxZCbxQ2Iacy7Q9j1cC1MNwSRqN1O33mRXJHIt0s0yBM/O95iykCehIIFrMs9oQ3AXvMPura5K3AM0eTvSnhKJIanEAmnGsIjjGqXqbYiH94x4qXlYk0hoNVkvQzBneVPtFzgc0GqHmvmeGkO2MHP3LawKaPaq1obkOHTSpxVWsjCXWcIxBAuF+VLTqJHPtYzKECyhb2XKuo1EdICG29gIm3OuMLpaltRSM2SO9OgfzhAkIWySGmqOTVxb1YbkDfdBiYiB5ZUX1BqChITVUjvdkMs1DtuQ55n1EhKsBGi7MVxD4NxiqZnuQJZmSjiGPM3Ez5uyA6Dx+pEMGc902LiXGBI5XPMhDRExvdPOgNbLhzMkV2pkOFYNZcicUIOMhO5I4drfZ0i21MY0ZIcyZJHUxTQsGmzIVKb/ySVV+O7drCUv5k6dETfa5XKAIf/pH2zsfNGucNqDY8blr0vJKt796Io3NqamT08cY/ekin4Pgnu9GaJeZfzY2NHrshPTnlo0ec7vV+7U7S/1XaM/b9vQEHhwSHhDgoh1xcQsyJgwHbxW1+H//mSj9+CZJl93T1+fjQzp7yE4B26pTJLZ0+I82zfM9Ly0ZlrHT7/drNxX6qu61dLdbXFD4MEEGJJq1RZ4xo+Ky1uZPPfZpUkPn7rQXF1U4vNeqWprs7Aps2DIDMuvP4xyxS5/zJO6bL4n9ZK3tfHbsoZrR8v9Nyz4MHsIhiTbZVSMiWEsc3ZCEpi/PqXl4Okm77fHG2vbOwMBizQhGWHvFDvGkAibX1mbknVg1yPLd+RZJmxORg/xMBsDYfPaxxPTnlxoibB5UjDKsj0sEjb3R1mOy2QXOGyOdzN9jkbLsDnCjgxD4pjDESpsLj3vv2HCpYx1MYnBMHVQQQ/pcHov6eruDZzEI+tIvbeiut3MR1YnDOl1qhH+O90Y1L1FJfVVza09PQJcUgCGtDkt0voHYe+JRm/x6SZfoFeosLcNhmCSlGR3EyD82cvKxPBchbATw9swxG9nI9o6A12l5/zXvzpSX1l34+5dwS/3FgxpsKMRdTfvthT/3OSlELamo6vXKuNkAwzx2SlepXlEwzdlDd6j5swjokU9DKmWYaswqIYhXhm2CoPKYJSF7m2ZfXWBw9ZoAA+ag1kneA+60Id0LBK2RgN4wIQ3BGErDdDXvzxsibA1GlweaEi5iGGrBffEo8H5gYbUcwqT3/vMWxdOMOcgqP//Nqd+YRJm4UzwLwMNOSV1MQ2nQxnyNxOgoIkDgaoLV0MZAhyR+hiOwwN/GGzIUaxESI0MQxfXfEhDUBujTOpkGMrYoHokoZIcUOanT2qlO6DxgcH/GMqQGhlxGQJoXB2OIcA+YkBqphsCXGMWriG1g0d/Cc0jq1o1hgBfE1uldpqjjWvL1BqCwopfSP00x+dsmKKVI6WSYqJ4UWqoGS6ONPkeyRCEZqhG1i61jBrtXMu+aAwBUBquUOoZNQpZGGX2ws1+x4yyRGoaMUpYmCsgao4jfEb8S2qrGle5dkxrQ3Dk632mZEdIhAdotYupqHHoiuALCngsLTHyfKNA7Q0cyQmqSqaU8umUmg+JTq5RpdoPRnqkrYK7L00JbUYB14gZZQhwibhTPr7ue0zt5Nowow0J9hQUvWqSXvRrsCPSnqGVIcExZTsbsFHv0NB2eyRjhh6GAH5+dzhx8ljC267JSTQt66ljw/5jpiygoQCW3etWYW2qkGmcg6DHiwNwgVujGdgsgEu8jZonhLh1umAck0NVULzXfDOzz7FrRFHYz8ASui6JIG4dLx4XjK1K5AyjnhVe9G/Vqj0B3pYiNihtx0qGBIEGYHGtmCmllHAOxSoFY3BTITsECQm1Rnyh28DGoUF7iPuZUllG5FolCFCOMSVvytB8Z7cJjYUxnzJlo38ZH2dEKZNRw8cHmGHKsTm3iY1Hg3/gTGNKkawFzPhDQzgo8yt/NJk+uXULcmde5dzLDcGL6TM4tT4dfJP4B1POVZZzQ4SBm4kHCHSIE8BLOmcRZzLllbbgRKYU00rgbQi+AhYrrTiv3sqDiWamvDoEvM6UM/lCn+D9V4ABAMsOWCaJncFUAAAAAElFTkSuQmCC) 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; } /* 誘導枠:関連サイト */ .module-relation { margin: 49px 0 55px; } .module-relation-header { display: block; font-size: 1.6rem; font-weight: bold; text-align: center; letter-spacing: .025em; } .module-relation__list { list-style-type: none; margin: 17px 0 0; border-top: 2px solid #797979; } .module-relation__item { position: relative; margin: 24px 0 0; display: -webkit-box; display: flex; } .module-relation__item a { align-items: center; -webkit-box-align: center; } .module-relation__item__image { position: relative; overflow: hidden; width: 80px; min-width: 80px; height: 80px; min-height: 80px; margin: 0 24px 0 0; border: 1px solid #aaa; } .module-relation__item__heading { font-size: 1.4rem; font-weight: bold; line-height: 1.9; } .module-relation__item__cite { display: block; margin: 7px 0 0; color: #797979; font-size: 1.2rem; font-weight: bold; } .module-relation a[target='_blank']:after { content: none; }
  1. HOME
  2. Learning
  3. 日本の英語教育の根本的な誤りは、「使うことを想定していない」ことにある

日本の英語教育の根本的な誤りは、「使うことを想定していない」ことにある

英語が拓く世界
外国語指導助手の授業は、小学校でも長く続いているが……=2007年、北海道(本文とは直接関係ありません)
外国語指導助手の授業は、小学校でも長く続いているが……=2007年、北海道(本文とは直接関係ありません)

「日本人は、なぜここまで英語ができないのでしょうか?」

これはなかなか答えが出ない問いです。「日本で暮らしていると英語は特に必要ないから」という意見をよく聞きます。確かにこれには一理も二理もあります。

ただ、英語ができるというだけで就職が有利になったり、海外出張の機会が増えたり、昇進のチャンスが高まったりと、英語をできることで得られる利益は相当大きいのですから、もっと上手くなってもいいはずだと思うのです。

また、日本人は少なくとも中高6年間英語を勉強しますし、日本全国津々浦々、いたるところに英会話学校もあります。本屋には大量の英語の参考書や問題集が並んでいます。それなのにここまで英語ができないというのも、考えてみれば実に不思議なことです。日本の英語教育は何かが根本的に間違っているのだと考えざるを得ません。

それでは具体的には、何がどう間違っているのでしょうか? 

「使うこと」がまったく想定されていない

もっとも根本的な間違いは、実際に英語を「使う」ことがまったく想定されていないことです。

教科書には長い間 “This is a pen.” という文章が一番最初のレッスンに掲載されていました。

果たしてこの文章を使うことはあるのでしょうか? ちなみに私は英語が話せるようになってもう35年ほどが経ちますが“This is a pen.”という文章を使ったのはおそらく3回もありません。“This is a red car.” でも同じことですが、自明なことをわざわざ口に出して言う機会などほとんどありません。“You are American.”  “I am Japanese.”  などといった文章は今の教科書にも登場します。「be動詞を教えたい」「不可算名詞を教えたい」という単元の意図はわかるのですが、単元で「教えるべき」ことを無理やり詰め込むため、現実には絶対に使わない文章がテンコ盛りです。

水中写真家・中村征夫が語る「海の変化はサンゴ礁からのメッセージ」美しいサンゴ礁の海に、10年後、100年後も潜ることができるのか
SPONSORED CONTENT 三菱商事株式会社

文法の授業も「使うこと」に結びついていない

英語が拓く世界_日本の英語教育_4
外国人と英語で議論する英会話喫茶の会員たち。英語への苦手意識を克服しようと、さまざまな業態が生まれた=1979年9月、大阪市(朝日新聞社撮影)

僕自身が中学生の頃に「be動詞+動詞のing形」は、「現在まさに進行中のこと」を説明するときに使うのだ、という説明をしてもらった覚えがあります。いわゆる現在進行形ですね。

そして、普通の現在形の文章を進行形に書き換える問題などを大量にやらされた覚えがあります。例えば、

現在形: “I play tennis.”

現在進行形: “I am playing tennis.”

 

現在形: “He studies English.”

現在進行形: “He is studying English.”

 

というような具合です。

そしてここでも、「一体どんな状況で “I am playing tennis.”なんて言うんだろう?」と疑問に思った記憶があります。

もちろん実際にこういう表現を使う状況はありうるわけですが、それは物理的にラケットを振り回してテニスをしている最中だけではありません。 “I am working as an engineer.”(僕はエンジニアとして働いている),  “He is studying medicine to be a doctor.” (彼は医者を目指して医学を勉強している)といった具合に、自分が今取り組んでいる課題などを言い表すときに多用されます。

ところがこういった具体的は用法や、実際にどんなときにどんな構文が使われるのか?という一番肝心なところがゴッソリと抜け落ちており、文法のための文法学習としか言いようのない例文や問題がずっと続くのです。

こんな受け身は絶対に使わない

例えば能動態から受動態への書き換え問題なども、メカニカルに書き換えることが目的化しているため、実際に相当おかしな問題が続々と登場します。例えばこれ、実際に問題集から抽出した問題です。

Keiko has finished her homework.

(ケイコは宿題を終えたところです)

    ↓

Her homework has been finished by Keiko.

(宿題はケイコによって終えられたところです)

 

Her homework has been finished… なんて言い方、絶対に遭遇しません。どんなに文法的に正しいにせよ、奇妙な感じしかしません。もう一つ、実際に問題集から抽出した例を見てみましょう。

 They will be holding a party at this time tomorrow.

(彼は明日の今頃、パーティを開いているだろう)

    ↓

A party will be being held at this time tomorrow.

「明日の今頃は、パーティは開催されているだろう。」

 

これも文法のルールを覚えてもらう問題としてはそう悪くないのかもしれませんが、こんな言い回しをすることはまずありません。結局、文法の勉強が、文法のための文法になってしまっているのです。パズルを解くような面白さはありますが、実用性にあまりにも欠けていると言わざるを得ないでしょう。 

英語の精読から得られるものは?

英語が拓く世界_日本の英語教育_3
1872(明治5)年刊行の英語リーダーに準拠した参考書。1語ずつ和訳をつけ、番号順に読むと意味が通じる。日本の英語教育は、漢文読み下しのような形で始まった=刀祢館正明撮影

また、日本で英語学習と言えば「精読」という作業は避けて通れないものとして認識されています。文の構造の把握、構文を見極めなど、単語の品詞を理解するなど、得られるものは確かにたくさんあります。このため精読をしっかりこなしておくと、穴埋め、整序、与えられた和文から英訳する問題などには滅法強くなります。

しかし、これもまた実際に使うことにほとんど結びつかない学習方法です。精読をやりこみ、有名大学の入試を突破し、TOEICで高得点を取った方でも、実際に英作文をしてもらうと冠詞を始めとする限定詞全般の使い方や可算名詞、不可算名詞の使い分けなどもガタガタです。

日本の一流大学を卒業した人が欧米の大学院に進学しても読むのがあまりに遅いため、他の留学生の倍の時間がかかってしまうのが現実です。また、論文を書いて提出しようにも、あまりにも文章が悲惨なため、提出前に別のネイティブにまず赤入れしてもらわないと提出物としてのクオリティに達しないのです。

この精読というやり方は文章の和訳などをしなければならないときにはかなり役立つ読み方ですが、文章を丸ごと読んですんなり理解するには、あまりにも不自然な読み方だと言わざるを得ません。結局これも最終的に「使う」ところに目的が置かれておらず、受験問題を解くことが目的化しているところが問題なのです。

英語を使う練習がない

また、会話練習の機会がほとんど存在しないのも大きな問題です。せっかく各学校に英語学習の補助をするための先生(ALT・Assistant Language Teacher)がいるのに、彼らの役割は極めて限定的で、上手に活用されているとはとても言いがたい状況です。

これも結局、「英語を使う」という視点がゴッソリと抜け落ちているからでしょう。英語は実際のコミュニケーションに「使え」てナンボです。日本全国津々浦々に会話にばかりフォーカスした英語学校が乱立しているのは、この反動なのかもしれません。

英語が拓く世界_日本の英語教育_2
この10年の外国人観光客の増加で、英語は旅館の関係者に欠かせないスキルになってきている=2008年、長野県松本市、田中正一撮影

また、発音を習う機会もありません。そのためほとんどの人が、一体何が正しい発音なのかを知ることもないまま、延々と英語学習を続けてしまうのです。ALTを上手に活用することでもっと目に見えた向上が図れる部分だと思うのですが、残念ながらほとんどの学校では行われていないようです。

なお、日本の学校はまず小学校でローマ字を教えるところから始めていますが、本当は英語圏の幼稚園でやっているように、まずフォニックス(発音と綴りの関係を教えるためのカリキュラム)を教えるところから始めればいいのです。

なぜ日本でフォニックスを教えてこなかったのかはまったくの謎ですが、最近ではこのフォニックスをベースにした英会話教室なども増えていますので、子供の英語教育でお悩みの方は、そういった教室を探してみることを強くオススメします。

動として生まれた英会話学校

こういった文法や和訳に偏った学習方法ではいつになっても喋れるようにならないとソリューションを提供したのが、日本全国津々浦々に建ち並んだ語学学校です。スカイプ英会話なども大流行りですが、これらもまた、学校英語がケアしてくれない英語を「使う」練習をする機会を与えてくれるものだと考えてよいでしょう。

では、こうした英会話教室やスカイプ英会話で喋りまくると、実際に英語が使えるようになるのでしょうか?

結論から言うと、残念ながら大きな成果をあげている学校は少ないようです。確かに話す機会はたくさん得られるのですが、これまで身につけてきた文法知識をどのように使うと自然に聞こえ、どのように使うと不自然なのかといった指摘がないため、なんとなく会話慣れするレベルに留まってしまうのです。もちろん、非常に優れたカリキュラムを有し、大きな向上が期待できる学校がないわけではありませんが、見分けるのが難しいのが難点です。

どうすれば英語を「使える」ようになるのか?

この連載で何度も指摘しましたが、結局は「使う」ことを念頭に置いてカリキュラムを組んでいかないと、実用に耐える英語力を学ぶ機会を学習者に提供することはできません。

そのためには文法は文法、発音は発音、単語の暗記は単語の暗記といったように別々にアプローチしていくのではなく、常に使うところから始まり、使うことで終わるようにカリキュラムを組んでいく必要があります。

このような学習方法は実はもう世の中に存在しています。次回は、一体どのように学習すれば、より短期間に、より自然な表現能力が身につくのか、考えてみたいと思います。