/* 土台(STUDIO の描画規則を引き継いだもの)。.site 配下の要素の初期値 */ @font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(/assets/fonts/MaterialIcons-Regular.woff2)format("woff2")} .canvas{height:auto;min-height:100dvh;display:flex} .canvas>.sd{min-height:100dvh;overflow:clip} body,html{margin:0;padding:0} :where(.site),:where(.site) a,:where(.site) abbr,:where(.site) address,:where(.site) article,:where(.site) aside,:where(.site) audio,:where(.site) b,:where(.site) blockquote,:where(.site) button,:where(.site) canvas,:where(.site) caption,:where(.site) cite,:where(.site) code,:where(.site) dd,:where(.site) del,:where(.site) details,:where(.site) dfn,:where(.site) div,:where(.site) dl,:where(.site) dt,:where(.site) em,:where(.site) fieldset,:where(.site) figcaption,:where(.site) figure,:where(.site) footer,:where(.site) form,:where(.site) h1,:where(.site) h2,:where(.site) h3,:where(.site) h4,:where(.site) h5,:where(.site) h6,:where(.site) header,:where(.site) hgroup,:where(.site) i,:where(.site) iframe,:where(.site) img,:where(.site) input,:where(.site) ins,:where(.site) kbd,:where(.site) label,:where(.site) legend,:where(.site) li,:where(.site) loop-box,:where(.site) main,:where(.site) mark,:where(.site) menu,:where(.site) nav,:where(.site) object,:where(.site) ol,:where(.site) p,:where(.site) pre,:where(.site) q,:where(.site) samp,:where(.site) section,:where(.site) select,:where(.site) small,:where(.site) span,:where(.site) strong,:where(.site) sub,:where(.site) summary,:where(.site) sup,:where(.site) table,:where(.site) tbody,:where(.site) td,:where(.site) textarea,:where(.site) tfoot,:where(.site) th,:where(.site) thead,:where(.site) time,:where(.site) tr,:where(.site) ul,:where(.site) var,:where(.site) video{-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;word-spacing:1px;-webkit-backface-visibility:hidden;border:0;margin:0;padding:0;font-family:sans-serif;line-height:1;text-decoration:none;list-style:none;transition:all .3s cubic-bezier(.4,.4,0,1)} :where(.site) a:focus:not(:focus-visible),:where(.site) button:focus:not(:focus-visible),:where(.site) summary:focus:not(:focus-visible){outline:none} :where(.site) nav ul{list-style:none} :where(.site) blockquote,:where(.site) q{quotes:none} :where(.site) blockquote:after,:where(.site) blockquote:before,:where(.site) q:after,:where(.site) q:before{content:none} :where(.site) a,:where(.site) button{vertical-align:baseline;background:0 0;margin:0;padding:0;font-size:100%} :where(.site) ins{color:#000;background-color:#ff9;text-decoration:none} :where(.site) mark{color:#000;background-color:#ff9;font-style:italic;font-weight:700} :where(.site) del{text-decoration:line-through} :where(.site) abbr[title],:where(.site) dfn[title]{cursor:help;border-bottom:1px dotted} :where(.site) table{border-collapse:collapse;border-spacing:0} :where(.site) hr{border:0;border-top:1px solid #ccc;height:1px;margin:1em 0;padding:0;display:block} :where(.site) input,:where(.site) select{vertical-align:middle} :where(.site) textarea{resize:none} :where(.site) .clearfix:after{content:"";clear:both;display:block} :where(.site) [slot=after] button{overflow-anchor:none} :where(.site) .sd{z-index:0;pointer-events:all;-webkit-overflow-scrolling:touch;flex-flow:column;flex:none;align-content:center;align-items:center;max-width:100%;display:flex;position:relative} :where(.site) .sd::-webkit-scrollbar{display:none} :where(.site) .sd,:where(.site) .sd.richText *{transition-property:all,--g-angle,--g-color-0,--g-position-0,--g-color-1,--g-position-1,--g-color-2,--g-position-2,--g-color-3,--g-position-3,--g-color-4,--g-position-4,--g-color-5,--g-position-5,--g-color-6,--g-position-6,--g-color-7,--g-position-7,--g-color-8,--g-position-8,--g-color-9,--g-position-9,--g-color-10,--g-position-10,--g-color-11,--g-position-11} :where(.site) input.sd,:where(.site) textarea.sd{align-content:normal} :where(.site) .sd[tabindex]:focus{outline:none} :where(.site) .sd[tabindex]:focus-visible{outline:1px solid highlight;outline-color:-webkit-focus-ring-color} :where(.site) input[type=email],:where(.site) input[type=tel],:where(.site) input[type=text],:where(.site) select,:where(.site) textarea{-webkit-appearance:none} :where(.site) select{cursor:pointer} :where(.site) .frame{display:block;overflow:hidden} :where(.site) .frame>iframe{width:100%;height:100%} :where(.site) .frame .formrun-embed>iframe:not(:first-child){display:none!important} :where(.site) .image{position:relative} :where(.site) .image:before{content:"";border-radius:inherit;z-index:-2;pointer-events:none;background-position:50%;background-size:cover;width:100%;height:100%;transition:inherit;position:absolute;top:0;left:0} :where(.site) .sd.file{word-break:break-word;overflow-wrap:anywhere;cursor:pointer;outline-offset:-1px;outline:2px solid #0000;flex-direction:row} :where(.site) .sd.file:focus-within{outline-color:highlight;outline-color:-webkit-focus-ring-color} :where(.site) .file>input[type=file]{opacity:0;pointer-events:none;position:absolute} :where(.site) .sd.text,:where(.site) .sd:where(.icon){word-break:break-word;overflow-wrap:anywhere;flex-direction:row;place-content:center;align-items:center;display:flex;overflow:visible} :where(.site) table.sd:where(.studio-table){flex-direction:unset;align-items:unset;align-content:unset;justify-content:unset;flex-wrap:unset;min-width:max-content;max-width:none;display:table} :where(.site) thead.sd{z-index:auto;display:table-header-group} :where(.site) tbody.sd{z-index:auto;display:table-row-group} :where(.site) tr.sd{display:table-row} :where(.site) td.sd,:where(.site) th.sd{text-align:left;vertical-align:middle;height:inherit;display:table-cell} :where(.site) colgroup.sd{display:table-column-group} :where(.site) col.sd{display:table-column} :where(.site) .sd:where(.icon.fa){display:inline-flex} :where(.site) .material-icons{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;direction:ltr;justify-content:center;align-items:center;font-family:Material Icons;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-flex} :where(.site) .sd:where(.icon.material-symbols){font-variation-settings:"FILL" var(--symbol-fill,0),"wght" var(--symbol-weight,400);justify-content:center;align-items:center;min-width:1em;min-height:1em;font-style:normal;display:flex} :where(.site) .sd.material-symbols-outlined{font-family:Material Symbols Outlined} :where(.site) .sd.material-symbols-rounded{font-family:Material Symbols Rounded} :where(.site) .sd.material-symbols-sharp{font-family:Material Symbols Sharp} :where(.site) .sd.material-symbols-weight-100{--symbol-weight:100} :where(.site) .sd.material-symbols-weight-200{--symbol-weight:200} :where(.site) .sd.material-symbols-weight-300{--symbol-weight:300} :where(.site) .sd.material-symbols-weight-400{--symbol-weight:400} :where(.site) .sd.material-symbols-weight-500{--symbol-weight:500} :where(.site) .sd.material-symbols-weight-600{--symbol-weight:600} :where(.site) .sd.material-symbols-weight-700{--symbol-weight:700} :where(.site) .sd.material-symbols-fill{--symbol-fill:1} :where(.site) a,:where(.site) a.icon,:where(.site) a.text{-webkit-tap-highlight-color:#00000026} :where(.site) .fixed{z-index:2} :where(.site) .sticky{z-index:1} :where(.site) .button{cursor:pointer;transition:all .4s cubic-bezier(.4,.4,0,1)} :where(.site) .link{cursor:pointer} :where(.site) .submitLoading{opacity:.5!important;pointer-events:none!important} :where(.site) .richText{word-break:break-word;display:block} :where(.site) .richText [data-thread],:where(.site) .richText a,:where(.site) .richText blockquote,:where(.site) .richText em,:where(.site) .richText h1,:where(.site) .richText h2,:where(.site) .richText h3,:where(.site) .richText h4,:where(.site) .richText li,:where(.site) .richText ol,:where(.site) .richText p,:where(.site) .richText p>code,:where(.site) .richText pre,:where(.site) .richText pre>code,:where(.site) .richText s,:where(.site) .richText strong,:where(.site) .richText table tbody,:where(.site) .richText table tbody tr,:where(.site) .richText table tbody tr>td,:where(.site) .richText table tbody tr>th,:where(.site) .richText u,:where(.site) .richText ul{color:inherit;font-family:inherit;font-size:inherit;text-align:inherit;letter-spacing:inherit;line-height:inherit;font-weight:inherit;font-style:inherit;backface-visibility:visible} :where(.site) .richText p{align-self:stretch;margin:10px 0;display:block} :where(.site) .richText>p{min-height:1em} :where(.site) .richText img,:where(.site) .richText video{vertical-align:bottom;max-width:100%;height:auto} :where(.site) .richText h1{align-self:stretch;margin:20px 0;font-size:3em;font-weight:700;display:block} :where(.site) .richText h2{align-self:stretch;margin:10px 0;font-size:2em;font-weight:700;display:block} :where(.site) .richText h3{align-self:stretch;margin:10px 0;font-size:1em;font-weight:700;display:block} :where(.site) .richText h4,:where(.site) .richText h5{align-self:stretch;margin:10px 0;font-size:1em;font-weight:600;display:block} :where(.site) .richText h6{align-self:stretch;margin:10px 0;font-size:1em;font-weight:500;display:block} :where(.site) .richText [data-type=table]{overflow-x:auto} :where(.site) .richText [data-type=table] p{white-space:pre-line;word-break:break-all} :where(.site) .richText table{table-layout:auto;border-collapse:collapse;border-spacing:unset;color:#1a1a1a;border:1px solid #f2f2f2;margin:10px 0;font-size:14px;line-height:1.4} :where(.site) .richText table tr th{background:#f5f5f580} :where(.site) .richText table tr td,:where(.site) .richText table tr th{border:1px solid #f2f2f2;min-width:100px;max-width:240px;padding:12px} :where(.site) .richText table tr td p,:where(.site) .richText table tr th p{margin:0} :where(.site) .richText blockquote{border-left:3px solid #00000026;margin:10px 0;padding:10px 15px;font-style:italic} :where(.site) .richText [data-type=embed_code]{margin:20px 0;position:relative} :where(.site) .richText [data-type=embed_code]>.height-adjuster>.wrapper{position:relative} :where(.site) .richText [data-type=embed_code]>.height-adjuster>.wrapper[style*=padding-top] iframe{width:100%;height:100%;position:absolute;top:0;left:0} :where(.site) .richText [data-type=embed_code][data-embed-sandbox=true]{display:block;overflow:hidden} :where(.site) .richText [data-type=embed_code][data-embed-code-type=instagram]>.height-adjuster>.wrapper[style*=padding-top]{padding-top:100%} :where(.site) .richText [data-type=embed_code][data-embed-code-type=instagram]>.height-adjuster>.wrapper[style*=padding-top] blockquote{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden} :where(.site) .richText [data-type=embed_code][data-embed-code-type=codepen]>.height-adjuster>.wrapper{padding-top:50%} :where(.site) .richText [data-type=embed_code][data-embed-code-type=codepen]>.height-adjuster>.wrapper iframe{width:100%;height:100%;position:absolute;top:0;left:0} :where(.site) .richText [data-type=embed_code][data-embed-code-type=slideshare]>.height-adjuster>.wrapper{padding-top:56.25%} :where(.site) .richText [data-type=embed_code][data-embed-code-type=slideshare]>.height-adjuster>.wrapper iframe{width:100%;height:100%;position:absolute;top:0;left:0} :where(.site) .richText [data-type=embed_code][data-embed-code-type=speakerdeck]>.height-adjuster>.wrapper{padding-top:56.25%} :where(.site) .richText [data-type=embed_code][data-embed-code-type=speakerdeck]>.height-adjuster>.wrapper iframe{width:100%;height:100%;position:absolute;top:0;left:0} :where(.site) .richText [data-type=embed_code][data-embed-code-type=snapwidget]>.height-adjuster>.wrapper{padding-top:30%} :where(.site) .richText [data-type=embed_code][data-embed-code-type=snapwidget]>.height-adjuster>.wrapper iframe{width:100%;height:100%;position:absolute;top:0;left:0} :where(.site) .richText [data-type=embed_code][data-embed-code-type=firework]>.height-adjuster>.wrapper fw-embed-feed{-webkit-user-select:none;user-select:none} :where(.site) .richText [data-type=embed_code_empty]{display:none} :where(.site) .richText [data-type=pdf_link],:where(.site) .richText [data-type=video_block]{margin:10px 0} :where(.site) .richText ul{margin:0 0 0 20px} :where(.site) .richText ul li{margin:10px 0;list-style:outside} :where(.site) .richText ul li p{margin:0} :where(.site) .richText ol{margin:0 0 0 20px} :where(.site) .richText ol li{margin:10px 0;list-style:decimal} :where(.site) .richText ol li p{margin:0} :where(.site) .richText hr{border-top:1px solid #ccc;margin:10px 0} :where(.site) .richText p>code{background:#eee;border:1px solid #0000001a;border-radius:6px;margin:2px;padding:0 5px;display:inline} :where(.site) .richText pre{white-space:pre-wrap;background:#eee;border-radius:6px;margin:20px 0;padding:25px 35px;font-family:Menlo,Monaco,Courier New,monospace} :where(.site) .richText pre code{border:none;padding:0} :where(.site) .richText strong{color:inherit;font-family:inherit;font-weight:900;display:inline} :where(.site) .richText em{font-style:italic} :where(.site) .richText u{text-decoration:underline} :where(.site) .richText a{color:#007cff;text-decoration:underline;display:inline} :where(.site) .richText s{text-decoration:line-through} :where(.site) .richText [data-type=table_of_contents]{color:#616161;background-color:#f5f5f5;border-radius:2px;margin:0;padding:24px 24px 8px;font-size:16px;text-decoration:underline;list-style:none} :where(.site) .richText [data-type=table_of_contents] .toc_list{margin:0} :where(.site) .richText [data-type=table_of_contents] .toc_item{font-weight:inherit;color:currentColor;list-style:none;font-size:inherit!important} :where(.site) .richText [data-type=table_of_contents] .toc_item>a{font-weight:inherit;color:currentColor;border:none;text-decoration:none;font-size:inherit!important} :where(.site) .richText [data-type=table_of_contents] .toc_item>a:hover{opacity:.7} :where(.site) .richText [data-type=table_of_contents] .toc_item--1{margin:0 0 16px} :where(.site) .richText [data-type=table_of_contents] .toc_item--2{margin:0 0 16px;padding-left:2rem} :where(.site) .richText [data-type=table_of_contents] .toc_item--3{margin:0 0 16px;padding-left:4rem} :where(.site) .sd.section{flex-flow:column!important;align-content:center!important;align-items:center!important;width:100%!important;max-width:100%!important;height:auto!important;padding:0!important} :where(.site) .sd.section-inner{position:static!important} @property --g-angle{syntax:"";inherits:false;initial-value:180deg} @property --g-color-0{syntax:"";inherits:false;initial-value:#0000} @property --g-position-0{syntax:"";inherits:false;initial-value:.01%} @property --g-color-1{syntax:"";inherits:false;initial-value:#0000} @property --g-position-1{syntax:"";inherits:false;initial-value:100%} @property --g-color-2{syntax:"";inherits:false;initial-value:#0000} @property --g-position-2{syntax:"";inherits:false;initial-value:100%} @property --g-color-3{syntax:"";inherits:false;initial-value:#0000} @property --g-position-3{syntax:"";inherits:false;initial-value:100%} @property --g-color-4{syntax:"";inherits:false;initial-value:#0000} @property --g-position-4{syntax:"";inherits:false;initial-value:100%} @property --g-color-5{syntax:"";inherits:false;initial-value:#0000} @property --g-position-5{syntax:"";inherits:false;initial-value:100%} @property --g-color-6{syntax:"";inherits:false;initial-value:#0000} @property --g-position-6{syntax:"";inherits:false;initial-value:100%} @property --g-color-7{syntax:"";inherits:false;initial-value:#0000} @property --g-position-7{syntax:"";inherits:false;initial-value:100%} @property --g-color-8{syntax:"";inherits:false;initial-value:#0000} @property --g-position-8{syntax:"";inherits:false;initial-value:100%} @property --g-color-9{syntax:"";inherits:false;initial-value:#0000} @property --g-position-9{syntax:"";inherits:false;initial-value:100%} @property --g-color-10{syntax:"";inherits:false;initial-value:#0000} @property --g-position-10{syntax:"";inherits:false;initial-value:100%} @property --g-color-11{syntax:"";inherits:false;initial-value:#0000} @property --g-position-11{syntax:"";inherits:false;initial-value:100%} .sd[data-bg]:before{background-image:var(--bg)} /* スマホのメニュー(MENU で開く窓)。STUDIO の窓と同じ: 右から 100px ずらした透明の状態から 0.4 秒で出す */ .modal{pointer-events:none;z-index:2;width:100%;height:100%;transition:none;position:fixed} .modal[hidden]{display:none} .modal:focus{outline:none} .modal .modal-base{pointer-events:auto;z-index:-1;width:100%;height:100%;transition:all .4s cubic-bezier(.4,.4,0,1);position:fixed;top:0;left:0;background:rgba(0,0,0,.16);border:0;padding:0;margin:0;cursor:default} .modal .modal-canvas{pointer-events:none;height:100%;transition:all .4s cubic-bezier(.4,.4,0,1)} .modal .modal-canvas>*{pointer-events:none;background:0 0!important} .modal.is-enter .modal-canvas,.modal.is-leave .modal-canvas{opacity:0;transform:translateX(100px)} .modal.is-enter .modal-base,.modal.is-leave .modal-base{opacity:0} .modal.is-enter .modal-canvas *,.modal.is-leave .modal-canvas *{transition:none!important} /* 「もっと読む」で後から出す記事 */ .sd[hidden]{display:none!important}