.article-code-example{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;min-width:0;margin:1.8em 0;display:grid}.article-code-example__panels,.article-code-example__result{min-width:0}.article-body .article-standalone-code{min-width:0;margin:0 0 1.8em}.article-body .article-standalone-code pre{color:#39464e;background:#f3f5f6;border:1px solid #d7d7d7;margin:0}.article-standalone-code--labeled{position:relative}.article-standalone-code--labeled>.article-code-example__label{z-index:1;position:absolute;top:0;left:0}.article-body .article-standalone-code--labeled pre{padding-top:30px}.article-code-example__panel{border:1px solid #dadada;border-bottom:0;min-width:0;position:relative}.article-code-example__panel+.article-code-example__panel{border-top:0}.article-code-example__label{color:#fff;letter-spacing:0;background:#668ad8;padding:3px 6px;font:700 12px/1.2 Arial,sans-serif;display:table}.article-code-example__panel>.article-code-example__label{z-index:1;position:absolute;top:0;left:0}.article-code-example__panel--reference>.article-code-example__label{position:static}.article-body .article-code-example__reference{margin:0}.article-body .article-code-example__reference img{width:100%;height:auto;margin:0;display:block}.article-body .article-code-example__reference figcaption{color:gray;margin:0;padding:5px 8px;font-size:12px;line-height:1.5}.article-body .article-syntax-code{color:#f0ebeb;white-space:pre;overflow-wrap:normal;background:gray;min-width:0;max-width:100%;margin:0 0 1.6em;padding:.8em;font:15px/1.5 Menlo,Monaco,Consolas,monospace;overflow-x:auto}.article-body .article-syntax-code>code{color:inherit;font:inherit;background:0 0;padding:0}.article-body .article-syntax-code__text{font-size:1.2em}.article-body .article-syntax-code__highlight{color:#87ceeb}.article-code-example__label[data-language=css]{background:#ffc778}.article-body .article-code-example__panel pre{color:#39464e;white-space:pre;overflow-wrap:normal;background:#f3f5f6;border-bottom:1px solid #dadada;width:100%;margin:0;padding:26px 12px 12px;font:13px/1.8 Menlo,Monaco,Consolas,monospace;overflow-x:auto}.article-body .article-code-example__panel pre code{color:inherit;font:inherit;background:0 0;padding:0}.article-code-example__result{background:#fff;border:4px solid #ccc;border-radius:13px;padding:12px 10px;font-size:.95em;position:relative}.article-code-example__result:before,.article-code-example__result:after{content:"";border-right:23px solid #ccc;border-block:20px solid #0000;position:absolute;top:30%;left:-23px}.article-code-example__result:after{border-right:24px solid #fff;left:-17px}.article-code-example__preview{min-width:0}.article-code-example__label--preview{background:#f89174;margin-bottom:8px}.article-body .article-code-example__preview img{width:100%;height:auto;margin:0;display:block}.article-code-example__preview iframe{background:#fff;border:0;width:100%;min-height:60px;display:block}.article-code-example__explanation>:first-child{margin-top:0}.article-code-example__explanation>:last-child{margin-bottom:0}.article-code-example__preview+.article-code-example__explanation{margin-top:10px}.article-code-example--browser .article-code-example__result{background:#fff url(https://saruwakakun.com/wp-content/uploads/2017/website/browser.png) 0 0/100% no-repeat;border-color:#d7dadd;border-radius:4px;padding-top:30px}.article-code-example--browser .article-code-example__label--preview{display:none}.article-code-example--browser .article-code-example__result:before{border-right-color:#d7dadd}@media (max-width:600px){.article-code-example{grid-template-columns:minmax(0,1fr);gap:7px}.article-code-example__result{border-width:2px;border-radius:6px}.article-code-example__result:before,.article-code-example__result:after{border:30px solid #0000;border-top:0;border-bottom:20px solid #ccc;top:-20px;left:40%}.article-code-example__result:after{border-bottom-color:#fff;top:-17px}.article-code-example--browser .article-code-example__result:before{border-bottom-color:#d7dadd;border-right-color:#0000}}.article-body .article-standalone-code--legacy pre{color:#39464e;white-space:pre;overflow-wrap:normal;tab-size:2;background:#f3f5f6;border:0;border-bottom:1px solid #dadada;padding:20px 5px 10px;font:14px/2.2 Menlo,Monaco,Consolas,Courier New,monospace;overflow-x:auto}.article-body .article-standalone-code--legacy pre>code{color:inherit;font:inherit;white-space:pre;background:0 0;padding:0}.article-standalone-code .article-code-marker{color:inherit;background:linear-gradient(#0000 60%,#ffe1b8 60%);font-weight:400}
.article-expandable-code{min-width:0;margin:1.1em 0 2.8em}.article-expandable-code>summary{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;background:#f7cb83;border-radius:4px;align-items:center;gap:.5em;padding:7px 16px;font-size:13px;font-weight:700;list-style:none;display:inline-flex;box-shadow:0 2px #e4a84c}.article-expandable-code>summary::-webkit-details-marker{display:none}.article-expandable-code>summary:before{content:"";border-bottom:2px solid;border-right:2px solid;width:.48em;height:.48em;transform:translateY(-.13em)rotate(45deg)}.article-expandable-code[open]>summary:before{transform:translateY(.13em)rotate(225deg)}.article-expandable-code>summary:hover{background:#f1bd6c}.article-expandable-code>summary:focus-visible{outline-offset:3px;outline:3px solid #608ac7}.article-expandable-code__body{min-width:0;margin-top:10px}.article-expandable-code__panel{border:1px solid #dadada;min-width:0;position:relative}.article-expandable-code__panel+.article-expandable-code__panel{border-top:0}.article-expandable-code__label{z-index:1;color:#fff;background:#ffc778;padding:3px 7px;font:700 12px/1.2 Arial,sans-serif;position:absolute;top:0;left:0}.article-expandable-code__panel:has(+.article-expandable-code__panel) .article-expandable-code__label{background:#668ad8}.article-body .article-expandable-code__panel pre{color:#39464e;white-space:pre;overflow-wrap:normal;background:#f3f5f6;width:100%;margin:0;padding:30px 13px 13px;font:13px/1.75 Menlo,Monaco,Consolas,monospace;overflow-x:auto}.article-body .article-expandable-code__panel pre code{color:inherit;font:inherit;background:0 0;padding:0}.article-expandable-code__note{border:1px solid #dadada;border-top:0;padding:10px 13px}.article-expandable-code__note>:first-child{margin-top:0}.article-expandable-code__note>:last-child{margin-bottom:0}.article-box-example{min-width:0;margin:2.3em 0}.article-body--design-gallery h3{margin:2.8em 0 1em;padding:0;font-size:20px}.article-body--design-gallery h3:before{display:none}.article-body.article-body--heading-design h2{background:#f5f5f5;border:0;border-radius:10px;margin:3em 0 1.8em 5px;padding:7px 10px 7px 50px;font-size:22px;position:relative}.article-heading-design-icon{color:#fff;background:#f89174;border-bottom:2px solid #9a6969;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;display:flex;position:absolute;top:50%;left:-6px;transform:translateY(-50%);box-shadow:0 2px 1px #0000004a}.article-heading-design-icon svg{width:24px;height:24px}.article-body--design-gallery .figure-callout{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.article-body--heading-design .figure-callout img{border:4px solid #f3f5f6}.article-box-example__preview{background:#fff;width:100%;min-width:0;max-width:100%;line-height:1.75;display:block}.article-box-example__preview>[class^=box]{max-width:400px;margin:1em auto!important}.article-box-example--23 .article-box-example__preview>.box23{max-width:min(400px,100% - 40px);margin-left:40px!important;margin-right:0!important}.article-body--design-gallery .article-box-example>h3{text-align:center;margin:2.8em 0 1em}.article-box-example .article-expandable-code>summary{width:fit-content;box-shadow:none;color:#aaa;background:0 0;margin-inline:auto;padding:4px 10px;font-size:14px;display:flex}.article-box-example .article-expandable-code>summary:hover{color:#777;background:0 0}.article-box-example .article-expandable-code>summary:before{content:"+";border:0;width:.55em;height:.55em;font-size:1.2em;line-height:.6;transform:none}.article-box-example .article-expandable-code[open]>summary:before{content:"−";transform:none}@media (max-width:600px){.article-body--design-gallery .figure-callout{display:block}.article-body.article-body--heading-design h2{font-size:18px}.article-body--heading-design h3{text-align:center}.article-body--heading-design .article-expandable-code>summary{width:fit-content;margin-inline:auto;display:flex}}@media (max-width:450px){.article-body--heading-design .figure-callout-text{border:0;border-radius:0;padding:0 .5em}.article-body--heading-design .figure-callout-text:before,.article-body--heading-design .figure-callout-text:after{display:none}}.article-box-example__note{margin-top:.6em}.article-box-example .article-expandable-code{margin-top:.9em}
.article-inline-icon-module__2CjUTG__icon{vertical-align:-.125em;flex:none;width:1em;height:1em;display:inline-block}.article-inline-icon-module__2CjUTG__fixedWidth{width:1.28571em}
.article-body .article-book-heading,.article-body .legacy-namih3{text-align:center;background:url(https://saruwakakun.com/wp-content/uploads/2017/05/naminami.svg) bottom/50px 10px no-repeat;margin:3em 0 25px;padding:0 0 25px;font-size:21px;line-height:1.7;position:static}.article-body .article-book-heading:before,.article-body .legacy-namih3:before{content:none}.article-body .article-book-cover,.article-body .legacy-book{width:min(170px,100%);margin:0 auto 1em;box-shadow:0 12px 23px -9px #00000091}.article-body .article-book-cover--legacy-left{margin:0 0 1.8em;display:inline-block}.article-book-cover>a,.article-book-cover>span,.article-body .legacy-book{display:block;position:relative}.article-book-cover>a:after,.article-book-cover>span:after,.article-body .legacy-book:before{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 1px 0 1px #00000026,2px 2px 6px -1px #00000042}.article-body .article-book-cover img,.article-body .legacy-book img{width:100%;height:auto;margin:0;display:block}.article-body .article-book-link{color:#fff;letter-spacing:.05em;background:#ff8e8e;border-radius:3px;align-items:center;gap:.35em;padding:12px 20px;font-size:.85em;line-height:1;text-decoration:none;display:inline-flex;box-shadow:0 2px 2px #00000024,0 1px 5px #0000001f,0 3px 1px -2px #0003}.article-book-link>svg{flex:none;width:.8em;height:.8em;transform:rotate(90deg)}.article-body .article-book-link:hover{color:#fff;opacity:1;text-decoration:none;box-shadow:0 4px 6px #0000002b,0 3px 6px #0000001f,0 2px 11px -3px #0003}.article-body .article-thumbnail-link{color:#333;background:#fff;border:2px solid #e5e5e5;align-items:center;width:min(400px,100%);min-height:104px;margin:1em 0;font-size:.95em;font-weight:700;text-decoration:none;display:flex}.article-body .article-thumbnail-link:hover{color:#777;background:#f0ebeb}.article-body .article-thumbnail-link img{object-fit:cover;flex:none;width:100px;height:100px;margin:0}.article-thumbnail-link span{border-left:2px solid #e5e5e5;align-self:stretch;align-items:center;min-width:0;padding:0 1em;font-size:.9em;line-height:1.4;display:flex}.article-body .legacy-biggs{font-size:1.1em}.article-body .legacy-uespe{margin-top:3em}@media (max-width:450px){.article-body .article-thumbnail-link{min-height:84px}.article-body .article-thumbnail-link img{width:80px;height:80px}}
.article-design-example{min-width:0;margin:1.5em 0 2.4em}.article-design-example__preview{background:#fff;border:0;width:100%;min-width:0;display:block}.article-design-example .article-expandable-code{margin:0 0 1.4em}.article-design-example .article-expandable-code>summary{width:fit-content;box-shadow:none;color:#aaa;background:0 0;margin-inline:auto;padding:4px 10px;font-size:14px;display:flex}.article-design-example .article-expandable-code>summary:hover{color:#777;background:0 0}.article-design-example .article-expandable-code>summary:before{content:"+";border:0;width:.55em;height:.55em;font-size:1.2em;line-height:.6;transform:none}.article-design-example .article-expandable-code[open]>summary:before{content:"−";transform:none}.article-design-example__explanation>:first-child{margin-top:0}.article-design-example__explanation>:last-child{margin-bottom:0}@media (max-width:450px){.article-design-example{margin-block:1.2em 2em}}
.article-life-parts-module__NhjwVa__floatRow{align-items:flex-start;gap:12px;margin:0 0 1.8em;display:flex}.article-body .article-life-parts-module__NhjwVa__floatImage{flex:none;width:min(300px,44%);height:auto;margin:0;display:block}.article-body .article-life-parts-module__NhjwVa__legacyFloatImage{float:left;width:min(300px,44%);height:auto;margin:0 12px 12px 0;display:block}.article-life-parts-module__NhjwVa__bordered{border:2px solid silver}.article-life-parts-module__NhjwVa__floatText{flex:1;min-width:0}.article-body .article-life-parts-module__NhjwVa__floatText>:last-child{margin-bottom:0}.article-life-parts-module__NhjwVa__flow{border:2px solid #f1efec;margin:1.5em 0}.article-life-parts-module__NhjwVa__flowTitle{text-align:center;background:#f1efec;padding:.3em;font-size:1.2em;font-weight:700}.article-body .article-life-parts-module__NhjwVa__flowList{text-align:center;background:#fffbf4;margin:0;padding:1.5em 1em;line-height:1.6;list-style:none}.article-body .article-life-parts-module__NhjwVa__flowItem{padding:0}.article-life-parts-module__NhjwVa__flowStep{background:#fff;border:2px solid #e3e3e3;border-radius:5px;max-width:100%;padding:5px 10px;font-weight:700;display:inline-block}.article-life-parts-module__NhjwVa__flowArrow{color:#f89174;width:18px;height:18px;margin:4px auto;display:block;transform:rotate(90deg)}.article-life-parts-module__NhjwVa__sectionLabel{text-align:center;margin:2.5em 0 2em}.article-life-parts-module__NhjwVa__sectionLabelPill{color:#fff;background:#ffc778;border-radius:30px;align-items:center;gap:.35em;padding:10px 18px;font-size:1.25em;font-weight:700;line-height:1.4;display:inline-flex}.article-life-parts-module__NhjwVa__sectionLabelIcon{flex:none;width:1em;height:1em}.article-body .article-life-parts-module__NhjwVa__referenceCard{width:100%;max-width:500px;min-height:47px;color:inherit;margin:0 0 1.6em;text-decoration:none;display:flex}.article-body .article-life-parts-module__NhjwVa__referenceCard[href]:hover{opacity:1;text-decoration:none}.article-life-parts-module__NhjwVa__referenceLabel{color:#807171;text-align:center;background:#f0ebeb;flex-direction:column;flex:0 0 70px;justify-content:center;align-items:center;padding:5px;font-weight:700;display:flex}.article-life-parts-module__NhjwVa__referenceIcon{width:22px;height:22px}.article-life-parts-module__NhjwVa__referenceContent{border:2px solid #f0ebeb;flex:1;min-width:0;padding:.7em .5em;display:block}.article-life-parts-module__NhjwVa__referenceCard[href]:hover .article-life-parts-module__NhjwVa__referenceContent{background:#f7f7f7}.article-life-parts-module__NhjwVa__referenceTitle{color:#f89174;font-weight:700;display:block}.article-life-parts-module__NhjwVa__referenceDescription{color:#545454;padding:10px;font-size:.75em;line-height:1.5;display:block}@media (max-width:767px){.article-life-parts-module__NhjwVa__floatRow{display:block}.article-body .article-life-parts-module__NhjwVa__floatImage{width:min(100%, var(--article-float-width));max-width:100%;margin:0 auto 12px}.article-body .article-life-parts-module__NhjwVa__legacyFloatImage{float:none;width:min(100%, var(--article-float-width));max-width:100%;margin:0 auto 12px}}@media (max-width:1000px){.article-body .article-life-parts-module__NhjwVa__legacyFloatImage.article-life-parts-module__NhjwVa__legacyLeft{float:none;width:min(100%, var(--article-float-width));max-width:100%;margin:0 0 12px}}
.article-image-gallery-module__eqzEMq__gallery{width:100%;min-width:0;max-width:100%;margin:2em auto}.article-image-gallery-module__eqzEMq__stage{min-width:0;position:relative}.article-image-gallery-module__eqzEMq__viewport{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;width:100%;display:flex;overflow-x:auto}.article-image-gallery-module__eqzEMq__slide{scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%;min-width:0}.article-image-gallery-module__eqzEMq__fullImage{aspect-ratio:var(--gallery-aspect-ratio);background:#f7f7f7;display:block}.article-image-gallery-module__eqzEMq__gallery .article-image-gallery-module__eqzEMq__image{object-fit:contain;width:100%;height:100%;max-height:none;margin:0;display:block}.article-image-gallery-module__eqzEMq__thumbnails{overscroll-behavior-x:contain;gap:8px;margin-top:8px;padding:3px;display:flex;position:relative;overflow-x:auto}.article-image-gallery-module__eqzEMq__gallery .article-image-gallery-module__eqzEMq__thumbnail{box-sizing:border-box;flex:0 0 var(--gallery-thumbnail-width);height:var(--gallery-thumbnail-height);border:3px solid #0000;display:block}.article-image-gallery-module__eqzEMq__gallery .article-image-gallery-module__eqzEMq__thumbnail[aria-current=true]{border-color:#c8aa43}.article-image-gallery-module__eqzEMq__gallery .article-image-gallery-module__eqzEMq__thumbnail img{object-fit:contain;width:100%;height:100%;margin:0;display:block}.article-image-gallery-module__eqzEMq__gallery .article-image-gallery-module__eqzEMq__arrow{color:#555;cursor:pointer;background:#ffffffe6;border:0;border-radius:50%;place-items:center;width:44px;height:44px;padding:10px;display:grid;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 4px #0002}.article-image-gallery-module__eqzEMq__arrow:disabled{opacity:.35;cursor:default}.article-image-gallery-module__eqzEMq__arrow svg{width:100%;height:100%;display:block}.article-image-gallery-module__eqzEMq__previous{left:8px}.article-image-gallery-module__eqzEMq__previous svg{transform:rotate(180deg)}.article-image-gallery-module__eqzEMq__next{right:8px}.article-image-gallery-module__eqzEMq__gallery :focus-visible{outline-offset:-3px;outline:3px solid #98760d}.article-image-gallery-module__eqzEMq__feedback{margin-top:8px}.article-image-gallery-module__eqzEMq__dots{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.article-image-gallery-module__eqzEMq__dots span{background:#ddd;border-radius:50%;width:8px;height:8px}.article-image-gallery-module__eqzEMq__dots span[data-active=true]{background:#c8aa43}.article-image-gallery-module__eqzEMq__status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}
.nani-promotion-module__-LVBCW__container{background:#ebf6ff;border-radius:32px;max-width:calc(100vw - 32px);margin:42px auto 30px;position:relative;container-type:inline-size}.nani-promotion-module__-LVBCW__inner{border-radius:32px;align-items:center;display:flex;overflow:hidden}.nani-promotion-module__-LVBCW__text{flex:1;padding:28px 0 28px 30px}.nani-promotion-module__-LVBCW__title{color:#102027;font-size:19px;font-weight:700;line-height:1.35}.nani-promotion-module__-LVBCW__title span{letter-spacing:1px;margin-inline:1px}.nani-promotion-module__-LVBCW__description{color:#555b5d;margin:10px 0 0;font-size:16.5px;line-height:1.68}.nani-promotion-module__-LVBCW__description+.nani-promotion-module__-LVBCW__description{margin-top:6px}.nani-promotion-module__-LVBCW__button{color:#fff;background:#09a5ff;border-radius:16px;gap:8px;width:fit-content;margin-top:14px;padding:12px 20px;font-size:18.5px;font-weight:700;line-height:1.4;text-decoration:none;transition:background-color .2s;display:flex}.nani-promotion-module__-LVBCW__button:hover{background:#08f}.nani-promotion-module__-LVBCW__media{align-items:flex-end;width:324px;padding:16px 16px 0 22px;display:flex;position:relative}.nani-promotion-module__-LVBCW__video{aspect-ratio:1260/1232;background:#fff;border:3px solid #fff;border-radius:20px 20px 0 0;width:100%;box-shadow:0 0 14px #2752811f}.nani-promotion-module__-LVBCW__badge{aspect-ratio:1;object-fit:cover;background:#fff;border-radius:12px;width:40px;position:absolute;top:-10px;left:-10px;rotate:-15deg;box-shadow:0 3px 6px -2px #1124382e}@container (max-width:600px){.nani-promotion-module__-LVBCW__inner{flex-direction:column;align-items:center}.nani-promotion-module__-LVBCW__text{padding:34px 19px}.nani-promotion-module__-LVBCW__title{text-align:center;font-size:22px}.nani-promotion-module__-LVBCW__description{margin-top:14px}.nani-promotion-module__-LVBCW__description+.nani-promotion-module__-LVBCW__description{margin-top:3px}.nani-promotion-module__-LVBCW__media{width:100%;max-width:380px;padding:0 16px}.nani-promotion-module__-LVBCW__button{margin-top:15px;margin-inline:auto}}