@font-face {
font-family: 'Guardian Headline Full';
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format("truetype");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url(https:@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");font-weight:900;font-style:normal}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");font-weight:900;font-style:italic}@font-face{font-family:Guardian Titlepiece;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@media (min-width: 71.25em){.content__main-column--interactive{margin-left:160px}}@media (min-width: 81.25em){.content__main-column--interactive{margin-left:240px}}.content__main-column--interactive .element-atom{max-width:620px}@media (max-width: 46.24em){.content__main-column--interactive .element-atom{max-width:100%}}.content__main-column--interactive .element-showcase{margin-left:0}@media (min-width: 46.25em){.content__main-column--interactive .element-showcase{max-width:620px}}@media (min-width: 71.25em){.content__main-column--interactive .element-showcase{max-width:860px}}.content__main-column--interactive .element-immersive{max-width:1100px}@media (max-width: 46.24em){.content__main-column--interactive .element-immersive{width:calc(100vw - var(--scrollbar-width, 0px));position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--half-scrollbar-width, 0px))!important;margin-right:calc(-50vw + var(--half-scrollbar-width, 0px))!important}}@media (min-width: 46.25em){.content__main-column--interactive .element-immersive{transform:translate(-20px);width:calc(100% + 60px)}}@media (max-width: 71.24em){.content__main-column--interactive .element-immersive{margin-left:0;margin-right:0}}@media (min-width: 71.25em){.content__main-column--interactive .element-immersive{transform:translate(0);width:auto}}@media (min-width: 81.25em){.content__main-column--interactive .element-immersive{max-width:1260px}}.content__main-column--interactive p,.content__main-column--interactive ul{max-width:620px}.content__main-column--interactive:before{position:absolute;top:0;height:calc(100% + 15px);min-height:100px;content:""}@media (min-width: 71.25em){åãæå³ãæã€CSSããããã¯ãªãŒã³ã§èªç¶ãªã¹ã¿ã€ã«ã§æžãããã®ã以äžã«ç€ºããŸãïŒ
```css
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-top: 12px;
padding-bottom: 12px;
}
.content__main-column--interactive p + .element-atom {
margin-top: 12px;
margin-bottom: 12px;
padding-top: 0;
padding-bottom: 0;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
[data-gu-name="media"]:has(figure.loop) figure.loop figcaption:not(.hidden) {
z-index: 6;
}
[data-gu-name="media"]:has(figure.loop) figure.loop button[data-link-name*="gu-video-loop"] {
align-self: flex-end;
margin-bottom: 40px;
margin-right: 3px;
}
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="unmute-icon"]),
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="mute-icon"]) {
right: 0;
padding-left: 10px;
}
[data-gu-name="media"]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name="media"]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name="media"]:has(figure.cinemagraph) .cinemagraph > div {
max-height: unset;
}
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] {
display: block;
width: 100%;
max-width: 620px;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] figure.loop,
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
[data-article-theme="News"] {
--active-pillar-100: #660505;
--active-pillar-200: #8b0000;
--active-pillar-300: #ab0613;
--active-pillar-400: #c70000;
--active-pillar-500: #ff5943;
--active-pillar-600: #ffbac8;
}
[data-article-theme="Lifestyle"] {
--active-pillar-100: #510043;
--active-pillar-200: #650054;
--active-pillar-300: #7d0068;
--active-pillar-400: #bb3b80;
--active-pillar-500: #ffabdb;
--active-pillar-600: #fec8d3;
}
[data-article-theme="Culture"] {
--active-pillar-100: #3e3323;
--active-pillar-200: #574835;
--active-pillar-300: #6b5840;
--active-pillar-400: #866d50;
--active-pillar-500: #eacca0;
--active-pillar-600: #e7d4b9;
}
[data-article-theme="Sport"] {
--active-pillar-100: #003c60;
--active-pillar-200: #004e7c;
--active-pillar-300: #005689;
--active-pillar-400: #0077b6;
--active-pillar-500: #00b2ff;
--active-pillar-600: #90dcff;
}
[data-article-theme="Opinion"] {
--active-pillar-100: #4b2e2e;
--active-pillar-200: #6b3b3b;
--active-pillar-300: #8b4747;
--active-pillar-400: #ab5454;
--active-pillar-500: #cb6161;
--active-pillar-600: #eb6e6e;
}
:root[data-article-theme="Labs"] {
--active-pillar-100: #09615b;
--active-pillar-200: #0c7a73;
--active-pillar-300: #65a897;
--active-pillar-400: #69d1ca;
--active-pillar-500: #a8e3df;
--active-pillar-600: #dcf4f3;
--active-pillar-700: #f3fbfb;
}
:root[data-article-theme="SpecialReport"] {
--active-pillar-100: #222527;
--active-pillar-200: #303538;
--active-pillar-300: #3f464a;
--active-pillar-400: #595c5f;
--active-pillar-500: #abc2c9;
--active-pillar-700: #e4e5e8;
}
:root[data-article-theme="SpecialReportAlt"] {
--active-pillar-100: #2b2b2a;
--active-pillar-200: #b9300a;
--active-pillar-300: #ff663d;
--active-pillar-700: #ebe6e1;
--active-pillar-800: #f5;
}
```:root{--dateline: #606060;--headerBorder: #dcdcdc;--captionText: #999;--captionBackground: hsla(0, 0%, 7%, .72)}.furniture-wrapper{position:relative;display:grid;grid-template-areas:"portrait" "title" "headline" "standfirst" "mediacaption" "lines" "meta";margin-bottom:26px!important}@media (min-width: 61.25em){.furniture-wrapper{grid-column-gap:20px;grid-row-gap:0px;grid-template-areas:none;grid-template-columns:[title-start headline-start standfirst-start mediacaption-start meta-start] repeat(5,1fr) [title-end headline-end standfirst-end mediacaption-end meta-end portrait-start] repeat(5,1fr) [portrait-end];grid-template-rows:[title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end mediacaption-start] auto [mediacaption-end meta-start] auto [meta-end portrait-end];margin-bottom:0!important}}@media (min-width: 71.25em){.furniture-wrapper{grid-template-columns:[title-start headline-start meta-start] repeat(2,1fr) [meta-end standfirst-start] repeat(5,1fr) [title-end headline-end standfirst-end portrait-start] repeat(7,1fr) [portrait-end];grid-template-rows:[title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end]}}@media (min-width: 81.25em){.furniture-wrapper{grid-template-columns:[title-start headline-start meta-start] repeat(3,1fr) [meta-end standfirst-start] repeat(5,1fr) [title-end headline-end standfirst-end portrait-start] repeat(8,1fr) [portrait-end];grid-template-rows:[title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end]}}.furniture-wrapper .article-header .content__labels>div,.furniture-wrapper [data-gu-name=title] .content__labels>div{padding-top:2px}@media (min-width: 46.25em) and (max-width: 61.24em){.furniture-wrapper .article-header,.furniture-wrapper [data-gu-name=title]{max-width:738px}}@media (min-width: 46.25em) and (max-width: 61.24em){.furniture-wrapper #headline,.furniture-wrapper [data-gu-name=headline],.furniture-wrapper .headline{max-width:738px}}@media (min-width: 61.25em){.furniture-wrapper #headline>div:first-child,.furniture-wrapper [data-gu-name=headline]>div:first-child,.furniture-wrapper .headline>div:first-child{border-top:1px solid var(--headerBorder)}}.furniture-wrapper #headline h1,.furniture-wrapper [data-gu-name=headline] h1,.furniture-wrapper .headline h1{font-weight:600;max-width:620px;font-size:32px}@media (min-width: 71.25em){.furniture-wrapper #headline h1,.furniture-wrapper [data-gu-name=headline] h1,.furniture-wrapper .headline h1{max-width:540px;font-size:50px}}.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{width:100vw;margin-left:-10px;padding-left:10px;position:relative;background-color:#fff;margin-top:-1px;margin-bottom:-1px}@media (min-width: 30em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{margin-left:-20px}.furniture-wrapper .keyline-4>div>div,.furniture-wrapper [data-gu-name=lines]>div>div{padding:0 20px}}@media (min-width: 33.4375em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{padding-left:20px}}@media (min-width: 41.25em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{padding-left:0}}@media (min-width: 46.25em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{max-width:738px}}@media (min-width: 61.25em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{display:none}}.furniture-wrapper .keyline-4 svg,.furniture-wrapper [data-gu-name=lines] svg{stroke:var(--headerBorder)}.furniture-wrapper #meta,.furniture-wrapper [data-gu-name=meta]{width:100vw;margin-left:-10px;padding-left:10px;position:relative;background-color:#fff}@media (min-width: 46.25em){.furniture-wrapper #meta,.furniture-wrapper [data-gu-name=meta]{margin-right:0;width:auto;max-width:738px}}@media (min-width: 61.25em){.furniture-wrapper #meta,.furniture-wrapper [data-gu-name=meta]{margin-left:unset;padding-left:unSet padding-top to 2px. å¹
71.25em以äžã§ã¯ãããããŒå¢çç·ã®è²ã䜿ã£ãŠã¡ã¿ã»ã¯ã·ã§ã³ã®äžã«å¹
540pxãé«ã1pxã®ç·ãè¿œå ããŸããå¹
81.25em以äžã§ã¯ããã®ç·ãå¹
620pxã«ããŸããã¡ã¿ã»ã¯ã·ã§ã³å
ã®ãœãŒã·ã£ã«èŠçŽ ãšã³ã¡ã³ãèŠçŽ ã¯ãå¢çç·ã«ããããŒå¢çç·ã®è²ã䜿çšããå¿
èŠããããŸãã
ã¹ã¿ã³ããã¡ãŒã¹ãã»ã¯ã·ã§ã³ã¯ãå·ŠããŒãžã³-10pxãäžããã£ã³ã°8pxãå·Šå³ããã£ã³ã°10pxãäžããã£ã³ã°16pxãçœãèæ¯ãçžå¯Ÿäœçœ®æå®ã«ããå¿
èŠããããŸãããã®æ®µèœã¯ãéåžžã®ãã©ã³ããŠã§ã€ãã20pxã®ãã©ã³ããµã€ãºã14pxã®äžããã£ã³ã°ã䜿çšããå¿
èŠããããŸãã46.25em以äžã§ã¯ãäžããã£ã³ã°2pxãè¿œå ããå¹
ãæ倧738pxã«å¶éããŸãã61.25em以äžã§ã¯ãæ倧å¹
ãšèæ¯è²ãåé€ããŸããã³ã³ãã³ãã®ã¹ã¿ã³ããã¡ãŒã¹ãã¯ãäžããŒãžã³4pxã«ããå¿
èŠããããŸãããªã¹ãé
ç®ã¯20pxã®ãã©ã³ããµã€ãºã䜿çšããå¿
èŠããããŸããã¹ã¿ã³ããã¡ãŒã¹ãå
ã®ãªã³ã¯ã¯ãäžå¢çç·ãèæ¯ç»åãæãããããããŒå¢çç·ã®è²ïŒãŸãã¯#dcdcdcïŒã䜿ã£ã1pxã®å€ªãã§6pxãªãã»ããã®äžç·ãåŒãå¿
èŠããããŸãããããŒæã«ã¯ãäžç·ã®è²ãæ°ãããã©ãŒã®è²ã«å€ããå¿
èŠããããŸããæåã®æ®µèœã¯ãããããŒå¢çç·ã®è²ã§1pxã®äžå¢çç·ãæã¡ãäžããã£ã³ã°ãæããªãããã«ããå¿
èŠããããŸãã
71.25em以äžã§ã¯ãæåã®æ®µèœãå«ããã¹ãŠã®ã¹ã¿ã³ããã¡ãŒã¹ã段èœããäžå¢çç·ãåé€ããŸããã¹ã¿ã³ããã¡ãŒã¹ãã®å·ŠåŽã«ãããããŒå¢çç·ã®è²ã䜿ã£ãå¹
1pxã®çžŠç·ãè¿œå ããå
šé«ã«ããããå·Šãã0.5pxã®äœçœ®ã«é
眮ããŸãã81.25em以äžã§ã¯ããã®ç·ãå·Šãã-0.5pxã®äœçœ®ã«ç§»åããŸãã
ã¡ã€ã³ã¡ãã£ã¢ã»ã¯ã·ã§ã³ã¯ãçžå¯Ÿäœçœ®æå®ã§ãäžããŒãžã³0ãå³ããŒãžã³0ãäžããŒãžã³2pxãå·ŠããŒãžã³-10pxã«ããå¿
èŠããããŸããããŒãã¬ãŒãã°ãªããé åã«ãŸãããããã¥ãŒããŒãå¹
ããã¹ã¯ããŒã«ããŒå¹
ãåŒããå¹
ã«ããå¿
èŠããããŸããå
éšã®divã¯ãã€ã³ã©ã€ã³ããŒãžã³ãªãã®å
šå¹
ã«ããå€åŽã®divã¯äžããŒãžã³ãæããªãããã«ããå¿
èŠããããŸãã30em以äžã§ã¯ãå·ŠããŒãžã³ã-20pxã«å€æŽããŸãã46.25em以äžã§ã¯ãå·ŠããŒãžã³ã-10pxã«èšå®ããå¹
ãæ倧738pxã«å¶éããŸãã61.25em以äžã§ã¯ã[ããã¹ããéåããŠããŸã]ãããªããæäŸããããã¹ãã¯CSSã³ãŒãã§ãããæ£æã§ã¯ãªããããä¿åãŸãã¯ç°¡ç¥åãã¹ãèªç¶èšèªã®æå³ã¯ãããŸãããå¥ã®æç« ãéãã€ããã ã£ãå Žåã¯ã貌ãä»ããŠãã ãããæµæ¢ãªè±èªã§æžãçŽããŸããã¡ã€ã³ã³ã³ãã³ãåã®ã€ã³ã¿ã©ã¯ãã£ããªæ°Žå¹³çœ«ç·ã®åŸã«åºåã¹ããããç¶ãå Žåãäžéšã®ããã£ã³ã°ãåé€ããŸããã€ã³ã¿ã©ã¯ãã£ãèšäºã®ãã«ã¯ã©ãŒãã¯ãå¹
620ãã¯ã»ã«ã«å¶éããå¿
èŠããããŸããã€ããŒã·ãèŠçŽ ã¯ãã¥ãŒããŒãã®å
šå¹
ã«ãŸããããåãã¬ãŒã¯ãã€ã³ãã§ããŒãžã³ã調æŽããå¿
èŠããããŸãïŒå°ããç»é¢ã§ã¯-10pxã30emãã-20pxããããŠãã倧ããªãã¬ãŒã¯ãã€ã³ãã§åŸã
ã«åºãæ倧å¹
ïŒ46.25emã§738pxã61.25emã§978pxã71.25emã§1098pxã81.25emã§1258pxïŒãæ倧ã®2ã€ã®ãã¬ãŒã¯ãã€ã³ãã§ã¯å·ŠããŒãžã³ã-160pxãš-240pxã«ã·ããããŸããã€ããŒã·ãèŠçŽ å
ã®å³ã®ãã£ãã·ã§ã³ã¯ã30emãã20pxã®ã€ã³ã©ã€ã³ããã£ã³ã°ãååŸãã71.25emã§åé€ãããŸããã·ã§ãŒã±ãŒã¹å³ã¯ã71.25emãš81.25emã§åæ§ã®ããŒãžã³èª¿æŽã«åŸããŸãããããã®ãã£ãã·ã§ã³ã¯éçã§ãæ倧620pxãŸã§å
šå¹
ã§ã71.25emã§æ倧å¹
140pxã81.25emã§220pxã®çµ¶å¯Ÿäœçœ®æå®ã«ãªããŸããã€ã³ã©ã€ã³èŠçŽ ã¯ã61.25emãã630pxã«å¶éãããŸãããwill-fade-inãã¯ã©ã¹ãæã€å³ã¯ãæåã¯é衚瀺ã§50pxäžã«ã·ããããããfade-inãã¯ã©ã¹ãè¿œå ããããšãã§ãŒãã€ã³ããŠéåžžã®äœçœ®ã«ç§»åããŸãããããã¯ã¯ã©ãŒãã®æ®µèœã¯æãããã¹ãè²ã䜿çšããh2èŠåºãã¯å¹
620pxã«å¶éãããŸããã¯ã¬ãžããããã¯ã¹ã®æ®µèœã¯ãæå°éã®åçŽããŒãžã³ãšäžéšããã£ã³ã°ãªãã§ãã71.25emã§ã¯ãã€ã³ã¿ã©ã¯ãã£ããªã¡ã€ã³åã®ç䌌èŠçŽ ã12pxäžã«ã·ãããããé«ãã24pxå¢å ããŸããããŒã¯ã¢ãŒãã§ã¯ããŠãŒã¶ãŒãæ瀺çã«ã©ã€ãã«ã©ãŒã¹ããŒã ãèšå®ããŠããªãéããbodyã®èæ¯ã¯æãèæ¯å€æ°ã䜿çšããŸããããŒã¯ããŒãã¬ãŒãã¬ã€ã¢ãŠãæ©èœã®å Žåãã¢ã€ã©ã³ãå
ã®ãã©ã³ãã£ã³ã°ç»åã¯å転ããªãã§ãã ãããã«ãŒãèŠçŽ ããã«ã©ãŒã¹ããŒã ãã©ã€ãã«èšå®ãããŠããªãéãããã©ã³ãã£ã³ã°ç»åãå転ããªããŸãŸã«ããå¿
èŠããããŸãã
å®å
šã§ãªãåã蟌ã¿ãããã¯ãšã¯ã©ã¹`js-embed__iframe`ãæã€iframeã¯ãé«ããŒãã®ãããã¯ãšããŠè¡šç€ºããå¿
èŠããããŸããèŠçŽ ã¯ããŒãžã³ãæããªãããã«ããå¿
èŠããããŸããã¢ããªã®ã¬ã³ããªã³ã°ã¿ãŒã²ããã§ã¯ãã€ã³ã¿ã©ã¯ãã£ãã³ã³ãã³ãå
ã®ã¡ã¿ã³ã³ããã¯å³ããŒãžã³ãæããªãããã«ããå¿
èŠããããŸãã
å¹
61.24em以äžã®ç»é¢ã§ã¯ããã¡ããã£ãŒã©ãããŒå
ã®ã¡ãã£ã¢èŠçŽ ã¯ãäžããŒãžã³-65pxãäžéšã«åºå®ã#1a1a1aã®èæ¯ã0.5ç§ã®ãã©ã³ãžã·ã§ã³ã§ãã§ãŒãã€ã³ããã³ãã§ãŒãã¢ãŠãããå®å
šã«è¡šç€ºãããç¶æ
ããå§ãŸãå¿
èŠããããŸãã30emãã61.24emã®éã§ã¯ãå·Šå³ã®ããŒãžã³ã-20pxã§ããå¿
èŠããããŸãããã§ãŒãã¢ãŠããããšãäžéæ床ã¯0ã«ãªãå¿
èŠããããŸããã¿ã€ãã«ãšèŠåºãã®èŠçŽ ã¯ãz-index 10ã§ãã®äžã«é
眮ããå·Šã«10pxã·ããããå·Šããã£ã³ã°10pxãä»ããå¿
èŠããããŸãã
30emãã61.24emã®éã§ã¯ãã¿ã€ãã«ãèŠåºããã¹ã¿ã³ããã¡ãŒã¹ããã¡ã¿ã¯ãæ°Žå¹³ããŒãžã³-20pxãæ°Žå¹³ããã£ã³ã°20pxãæã€å¿
èŠããããŸãã
å¹
61.24em以äžã®ç»é¢ã§ã¯ãèŠåºãã¯çžå¯Ÿäœçœ®æå®ã«ããå¿
èŠããããŸãããã®å
éšdivã¯äžããã£ã³ã°32pxãæã€å¿
èŠããããŸãããã®äžã®h1ã¯çœã§ãéåžžã®ãã©ã³ããŠã§ã€ãã䜿çšããå¿
èŠããããŸããã°ã©ããŒã·ã§ã³divã¯ã絶察äœçœ®æå®ã§ãé«ã135%ãz-index -1ã§å
šãŠã®èåŸã«é
眮ããå
šå¹
ã«ããããå·Šäžã«åºå®ããå¿
èŠããããŸãã12pxã®èæ¯ãŒãããšãéæãã#1a1a1aã«ãã§ãŒãããã°ã©ããŒã·ã§ã³èæ¯ãæã¡ãæ»ãããªãã§ãŒããäœæãããã¹ã¯ãä»ããå¿
èŠããããŸãã26.25emãã61.24emã®éã§ã¯ãã°ã©ããŒã·ã§ã³divã¯é«ã140%ã«ããå¿
èŠããããŸãã
ã¿ã€ãã«ã¯z-index 11ãæã¡ãäžéšããã£ã³ã°8pxãäžéšããã£ã³ã°1pxãä»ããå¿
èŠããããŸãããã®äžã®ãªã³ã¯ã¯ãã¢ã¯ãã£ããã©ãŒ400ã®è²ã䜿çšããå¿
èŠããããŸããã¹ã¿ã³ããã¡ãŒã¹ãã¯äžããã£ã³ã°ãæããªãããã«ããŸããããã®æ®µèœã¯äžããã£ã³ã°24pxãæã€å¿
èŠããããŸãã
å³ã®ãã£ãã·ã§ã³ã¯ãã¡ãã£ã¢ãã£ãã·ã§ã³ã°ãªããé åã«é
眮ããçžå¯Ÿäœçœ®æå®ã§ãèæ¯ãªããäžããã£ã³ã°12pxãå·Šããã£ã³ã°10pxãå·ŠããŒãžã³-10pxãæå°é«ããªãããã¥ãŒããŒãå
šå¹
ãçœãèæ¯ã«ããå¿
èŠããããŸããå
éšã®ããã¹ãã¯ããã£ãã·ã§ã³ã¡ã€ã³ã¡ãã£ã¢ããã¹ãè²ã䜿çšããå¿
èŠããããŸãã30emãã61.24emã®éã§ã¯ãå³ã®ãã£ãã·ã§ã³ã¯å·ŠããŒãžã³-20pxãäžããŒãžã³-1pxãå·Šããã£ã³ã°20pxãæã€å¿
èŠããããŸãã46.25em以äžã§ã¯ãæ倧å¹
738pxã«ããå¿
èŠããããŸããé衚瀺ã®å³ã®ãã£ãã·ã§ã³ã¯è¡šç€ºããªãã§ãã ããããããªã¢ã€ã³ã³ã®å³ã®ãã£ãã·ã§ã³ã¯ãããã¹ãã®åã«å°ããªãããªã«ã¡ã©ã¢ã€ã³ã³ã衚瀺ããå¿
èŠããããŸãããããªã³ã³ãããšã·ããã°ã©ãå
ã®å³ã®ãã£ãã·ã§ã³ããã¹ãã¯é衚瀺ã«ããå¿
èŠããããŸããã©ã€ã³ãšã¡ã¿ã®å
éšdivã¯å³ããŒãžã³ãæããªãããã«ããå¿
èŠããããŸãã46.25em以äžã§ã¯ãã¡ã¿ã¯äžããã£ã³ã°8pxãæã€å¿
èŠããããŸããbackground-repeat: no-repeat; background-size: contain; } @media (max-width: 61.24em) { [data-gu-name=body] { background-color: #fff; margin: 0 -10px; padding: 0 10px; } } @media (max-width: 61.24em) and (min-width: 30em) { [data-gu-name=body] { margin: 0 -20px; padding: 0 20px; } } @media (max-width: 61.24em) { [data-gu-name=body] #maincontent { margin-top: 0; } } article.content--interactive.portrait-layout .furniture-wrapper #headline h1, article.content--interactive.portrait-layout .furniture-wrapper [data-gu-name=headline] h1, article.content--interactive.portrait-layout .furniture-wrapper .headline h1 { font-weight: 500; } article.content--interactive.portrait-layout .furniture-wrapper .standfirst div p, article.content--interactive.portrait-layout .furniture-wrapper #standfirst div p, article.content--interactive.portrait-layout .furniture-wrapper [data-gu-name=standfirst] div p { font-weight: 500; } article.content--interactive.portrait-layout-feature .article
