.rubycodeeditor_container___F0pO{margin-top:40px;position:relative}.rubycodeeditor_editorContainer__cJubO{padding:0 10px 10px;border-radius:15px 15px 15px 15px;border:.2em solid #c90012;background:linear-gradient(90deg,#2f3129 63px,#272822 0);box-shadow:0 3px 10px rgba(0,0,0,.4);z-index:10;position:relative}.rubycodeeditor_titleBar__3xHob{display:flex;justify-content:center;align-items:center;position:relative;margin:0 5px}.rubycodeeditor_title__FFrbL{color:#fff;font-size:20px;margin:0}.rubycodeeditor_executeButton__3_8__{position:absolute;right:0;background-color:#c90012;color:#fff;font-weight:500;border-radius:9px;padding:5px 10px;cursor:pointer;font-size:16px}.rubycodeeditor_resultContainer__BaRmH{height:210px;background-color:#fff;border-radius:0 0 15px 15px;border:.1em solid #d3d3d3;box-shadow:0 3px 10px rgba(0,0,0,.4);margin-top:-15px;z-index:0}.rubycodeeditor_result__yv0yB{margin:10px 0 0 30px;overflow:auto;height:135px;color:#000}.rubycodeeditor_remarks__1_C7_{font-size:12px;text-align:center;margin:20px 0 0}.fold_summary__Yi1YN{font-weight:700;display:inline-flex;align-items:center;cursor:pointer;margin-top:20px}.fold_summary__Yi1YN:before{content:"►";margin-right:10px;cursor:pointer}.fold_details__eJfP2[open] .fold_summary__Yi1YN:before{content:"▼";cursor:pointer}.fold_children__HhdmQ{margin-left:30px}:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,:after,:before{box-sizing:border-box;margin:0;padding:0}a,button{cursor:revert}menu{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}pre{all:revert}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}:root{--course-color:#c90012;--course-color-rgb:199,0,17;--color-text:#0a2540;--blockquote-color-text:#202124;--color-background:#fff;--color-border:#f1f2f2;--navbar-color-background:#f8fafc}@media(prefers-color-scheme:dark){:root{--color-text:#fff;--blockquote-color-text:#fff;--color-background:#000;--color-border:#fff;--navbar-color-background:#1d1d1e}}nav.toc{height:calc(100vh - 45px);display:flex;flex-direction:column;justify-content:space-between}nav.toc .toc-body{overflow-y:scroll;margin-top:20px}nav.toc .toc-body a{text-decoration:none}nav.toc .toc-body a:hover{text-decoration:underline}nav.toc .toc-body h4{font-size:14px;font-weight:700;margin:15px 0}nav.toc .toc-body h4.active{color:var(--course-color)}nav.toc .toc-body .section{margin:0 20px 0 35px}nav.toc .toc-body .section ul{margin-left:10px;border-left:2px solid var(--color-border);padding-left:15px}nav.toc .toc-body .section ul li{margin:15px 0;list-style-type:none;font-size:14px}nav.toc .toc-body .section ul li.active{position:relative}nav.toc .toc-body .section ul li.active a{color:var(--course-color);font-weight:700}nav.toc .toc-body .section ul li.active:before{position:absolute;top:0;display:block;content:"";width:20px;height:20px;margin-left:-26px;border-radius:10px;background-color:var(--course-color)}nav.toc .toc-footer{border-top:2px solid var(--color-border)}nav.toc .toc-footer a{display:flex;align-items:center;padding:5px;margin:10px 0 10px 30px;gap:6px}nav.toc .toc-footer a img{width:13px}nav.toc .toc-footer a span{font-size:14px;font-weight:500}.callout{padding:20px;margin:40px 0;border-radius:8px}.callout.white-note{background-color:#f9f9f9}.callout.white-note .title .callout-icon,.callout.white-note .title strong{color:#626262}.callout.note{background-color:#e3f7df}.callout.note .title .callout-icon,.callout.note .title strong{color:#55c500}.callout.review{background-color:#cfe6fc}.callout.review .title .callout-icon,.callout.review .title strong{color:#0984e3}.callout.caution{background-color:#fdf9e2}.callout.caution .title .callout-icon,.callout.caution .title strong{color:#f7a535}.callout.warning{background-color:#feebee}.callout.warning .title .callout-icon,.callout.warning .title strong{color:#d60a34}.callout .title{display:flex}.callout .title strong{background:none;font-weight:700}.callout .title .callout-icon{flex-basis:28px;font-size:20px}.callout .message{display:flex;flex-direction:column;color:#0a2540}.key-visual{display:flex;width:100%;background:radial-gradient(circle,var(--course-color),50%,#741814 90%);padding:40px 0;position:relative}.key-visual .container{z-index:20}.key-visual span.course{font-size:20px;font-weight:500;color:#c3c3c3;padding:40px auto 45px}.key-visual .title{margin:15px 0;font-size:40px;line-height:58px;color:#fff;font-weight:700}.key-visual .description{margin:0;font-size:20px;line-height:29px;color:#fff}.key-visual .download{margin:30px 0}.key-visual .download a{padding:10px 20px;font-size:17px;line-height:25px;color:#002642;background:#fff;border-radius:22.5px}.key-visual .tags{display:flex;gap:15px;margin-top:30px;color:#fff}.key-visual .tags .tag{font-size:12px;line-height:17px;padding:5px 15px;border:solid #fff;border-radius:22px}.key-visual .thumbnail-img{position:absolute;top:50%;right:120px;transform:translateY(-50%);width:150px;height:150px;object-fit:contain;opacity:.2;z-index:10;background:none}@media screen and (max-width:1024px){.key-visual .thumbnail-img{display:none}}.speech-bubble{margin:15px 0;display:flex;align-items:center;gap:5px}.speech-bubble img{width:130px}.speech-bubble .message{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:80px;margin-left:20px;padding:30px;background-color:#e9edf1;border-radius:15px}.speech-bubble .message:before{content:"";position:absolute;top:30%;left:-22px;border:20px solid transparent;border-right:34.6410161514px solid #e9edf1;border-radius:3px;transform:rotate(104deg)}.speech-bubble .message p{color:#0a2540}.speech-bubble .message p:first-child{margin-top:0}p a.link-button{font-size:14px;line-height:20px;padding:4px 8px;color:#fff;background-color:var(--course-color);border-radius:4px;text-decoration:none}.drawer{position:sticky;top:45px;width:56px;min-width:auto;max-height:calc(100vh - 45px);border-right:1px solid var(--color-border);transition:all .5s cubic-bezier(.33,1,.68,1)}.drawer nav{display:none}@media screen and (max-width:1024px){.drawer{display:none}}.drawer.active{width:345px;min-width:345px}.drawer.active nav{display:flex}.drawer .toggle-button{z-index:40;position:absolute;top:20px;right:0}.drawer .toggle-button svg{display:inline-block;width:16px;height:16px;margin:0 20px;fill:var(--color-text);cursor:pointer}@keyframes scroll-hint-appear{0%{transform:translateX(40px);opacity:0}10%{opacity:1}50%,to{transform:translateX(-40px);opacity:0}}.scroll-hint.is-right-scrollable{background:linear-gradient(270deg,rgba(0,0,0,.15),transparent 16px,transparent)}.scroll-hint.is-right-scrollable.is-left-scrollable{background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 16px,transparent),linear-gradient(270deg,rgba(0,0,0,.15),transparent 16px,transparent)}.scroll-hint.is-left-scrollable{background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 16px,transparent)}.scroll-hint-icon{position:absolute;top:calc(50% - 25px);left:calc(50% - 60px);box-sizing:border-box;width:120px;height:80px;border-radius:5px;transition:opacity .3s;opacity:0;background:rgba(0,0,0,.7);text-align:center;padding:20px 10px 10px}.scroll-hint-icon:before{display:inline-block;width:40px;height:40px;color:#fff;vertical-align:middle;text-align:center;content:"";background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url(/_next/static/media/.21b103f5.svg)}.scroll-hint-icon:after{content:"";width:34px;height:14px;display:block;position:absolute;top:10px;left:50%;margin-left:-20px;background-repeat:no-repeat;background-image:url(/_next/static/media/.4247209a.svg);opacity:0;transition-delay:2.4s}.scroll-hint-icon-wrap{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;pointer-events:none;display:none}.scroll-hint-icon-wrap.is-active{display:block}.scroll-hint-icon-wrap.is-active .scroll-hint-icon{opacity:.8}.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after{opacity:1}.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before{animation:scroll-hint-appear 1.2s linear;animation-iteration-count:2}.scroll-hint-text{font-size:10px;color:#fff;margin-top:5px}.scroll-hint-icon-white{background-color:#fff;box-shadow:0 4px 5px rgba(0,0,0,.4)}.scroll-hint-icon-white:before{background-image:url(/_next/static/media/.2b66efd0.svg)}.scroll-hint-icon-white:after{background-image:url(/_next/static/media/.9d465848.svg)}.scroll-hint-icon-white .scroll-hint-text{color:#000}*,:after,:before{scroll-padding-top:60px}body{font-family:Noto Sans JP,sans-serif;color:var(--color-text);background-color:var(--color-background)}.wrapper{display:flex}.wrapper .right{width:calc(100% - 56px);margin-bottom:45px}.wrapper .active+.right{width:calc(100% - 345px)}@media screen and (max-width:1024px){.wrapper .active+.right{width:100%}}.container{max-width:1080px;margin:0 120px}@media screen and (max-width:1024px){.container{margin:0 30px}}@media screen and (prefers-color-scheme:dark){.icon{filter:invert(1)}}article h1,article h2,article h3{display:flex;align-items:center;gap:6px;cursor:pointer}article h1 a,article h2 a,article h3 a{display:none}article h1:hover a,article h2:hover a,article h3:hover a{display:flex;align-items:center;color:#fff}article h1{font-size:32px;line-height:46px;font-weight:700;margin:45px 0 20px}article h2{font-size:21px;line-height:30px;font-weight:500;margin:30px 0 20px}article h3{font-weight:500;margin:20px 0 15px}article a{color:var(--course-color);text-decoration:underline}article p{font-size:16px;line-height:25px;margin-top:15px}article p:has(img){text-align:center}article p img{width:100%;max-width:750px;background-color:#fff;border-radius:4px}article p code{background-color:#f1f2f2;color:var(--course-color);border-radius:4px;padding:0 5px}article strong{background:linear-gradient(transparent 65%,rgba(var(--course-color-rgb),.3) 65%,rgba(var(--course-color-rgb),.3) 90%,transparent 90%)}@media screen and (prefers-color-scheme:dark){article strong{background:linear-gradient(transparent 65%,rgba(var(--course-color-rgb),.6) 65%,rgba(var(--course-color-rgb),.6) 90%,transparent 90%)}}article ol,article ul{padding-left:30px;margin-top:15px}article ol{list-style-type:decimal}article blockquote{margin-top:15px;padding:10px 0 10px 10px;color:var(--blockquote-color-text);border-left:4px solid var(--color-border)}article blockquote p{margin:0}article table{border-collapse:collapse;margin:15px auto 0;max-width:100%;min-width:fit-content}article table th{color:#0a2540;background-color:#fff;font-weight:700}article table td,article table th{border:1px solid var(--color-border);padding:10px}article div.callout p:first-child{margin-top:0}article .code{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:15px}article .code .syntax-highlighter{width:100%;overflow:scroll;padding:20px 20px 18px;background-color:#23241f;border-radius:8px}article .code .syntax-highlighter pre{min-width:100%;width:fit-content}article .code:has(.filename) .syntax-highlighter{border-radius:0 8px 8px 8px;margin-top:3px}article .code .filename{padding:5px 12px;background-color:#434343;color:#fff;border-radius:8px 8px 0 0;font-size:12px}article .code .syntax-highlighter pre{margin:0;font-size:14px;line-height:20px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace}article .code-playground blockquote{margin:0}article .iframe{margin-top:15px;width:100%;display:flex;justify-content:center}article .iframe iframe.has-max-width{width:100%;max-width:600px}header{position:sticky;top:0;width:100vw;height:45px;display:flex;align-items:center;padding:0 35px;background-color:var(--navbar-color-background);z-index:99}header h4{font-size:14px;font-weight:500;text-align:center}header .logo{display:flex;align-items:center;gap:3px}@media screen and (max-width:1024px){header .logo{display:none}}header .logo img{width:24px;height:24px;background:none}header .title{flex-grow:1;display:flex;justify-content:center;align-items:center}@media screen and (max-width:1024px){header .title{justify-content:start}}.header-toc{position:fixed;z-index:99;display:none;background-color:var(--color-background);width:100vw}.header-toc.active{display:block}@media screen and (min-width:1024px){.header-toc.active{display:none}}.openbtn1{display:none;position:relative;cursor:pointer;width:23px;height:40px;border-radius:5px}@media screen and (max-width:1024px){.openbtn1{display:block}}.openbtn1 span{display:inline-block;transition:all .4s;position:absolute;left:14px;height:2px;border-radius:2px;background:var(--color-text);width:15px}.openbtn1 span:first-of-type{top:14px;left:0}.openbtn1 span:nth-of-type(2){top:19px;left:0}.openbtn1 span:nth-of-type(3){top:24px;left:0}.openbtn1.active span:first-of-type{top:14px;left:0;transform:translateY(6px) rotate(45deg)}.openbtn1.active span:nth-of-type(2){opacity:0}.openbtn1.active span:nth-of-type(3){top:24px;left:0;transform:translateY(-4px) rotate(-45deg)}