/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:1.5em 0 2em 1.5em;padding:0}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}:root{--main-colour:#4086f6;--sub-colour:#44cdd6;--accent-colour:#ffc72c;--download-colour:#ff9323;--darken-colour:#103b80;--lighter-colour:#d8e8ff;--bg-colour:#f2f6ff;--white:#fff;--font-colour:#333}@font-face{src:url("/wp-content/themes/codage/fonts/KaiseiOpti-Regular.woff2") format("woff2"), url("/wp-content/themes/codage/fonts/KaiseiOpti-Regular.woff") format("woff"), url("/wp-content/themes/codage/fonts/KaiseiOpti-Regular.ttf") format("ttf");font-family:"Kaisei Opti";font-style:normal;font-display:swap}html{scroll-behavior:smooth}body{color:var(--font-colour);font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;font-size:14px;line-height:1.7;text-underline-offset:0.2em;background-color:#fbfbfb}img{width:100%;height:auto}a{outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;&:link,&:visited{color:var(--main-colour);text-decoration:underline}&:hover{text-decoration:none}}summary{display:block}summary::-webkit-details-marker{display:none}input,:focus{outline:none}.header{padding:16px;background:transparent;position:absolute;z-index:10;left:50%;translate:-50% 0;.site-title{font-size:20px;color:#fff;text-align:center;width:180px;margin:auto;a{width:100%;display:block}svg{display:block}.d{fill:var(--main-colour)}}}.header__nav{display:none}.page.header,.is-scrolled.header{width:100%;--c-0:hsla(171, 68%, 97%, 1);--x-0:58%;--y-0:44%;--c-1:hsla(136, 72%, 92%, 1);--x-1:21%;--y-1:14%;--c-2:hsla(194, 70%, 62%, 1);--x-2:11%;--y-2:60%;--c-3:hsla(216.9230769230769, 91%, 60%, 1);--x-3:93%;--y-3:18%;--c-4:hsla(170, 78%, 96%, 1);--x-4:97%;--y-4:97%;;background-color:hsla(98, 93%, 79%, 1);background-image:radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));animation:hero-gradient-animation 5s linear infinite alternate;background-blend-mode:normal, normal, normal, normal, normal}.top-image{position:relative;height:65vh;margin:auto;background-color:var(--white);overflow:hidden}.image-wrapper{--c-0:hsla(171, 68%, 97%, 1);--x-0:58%;--y-0:44%;--c-1:hsla(136, 72%, 92%, 1);--x-1:21%;--y-1:14%;--c-2:hsla(194, 70%, 62%, 1);--x-2:11%;--y-2:60%;--c-3:hsla(216.9230769230769, 91%, 60%, 1);--x-3:93%;--y-3:18%;--c-4:hsla(170, 78%, 96%, 1);--x-4:97%;--y-4:97%;;background-color:hsla(98, 93%, 79%, 1);background-image:radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));animation:hero-gradient-animation 5s linear infinite alternate;background-blend-mode:normal, normal, normal, normal, normal}@keyframes hero-gradient-animation{0%{--c-0:hsla(171, 68%, 97%, 1);--x-0:58%;--y-0:44%;--s-start-0:7%;--s-end-0:81%;--c-1:hsla(136, 72%, 92%, 1);--x-1:21%;--y-1:14%;--s-start-1:7%;--s-end-1:81%;--c-2:hsla(194, 70%, 62%, 1);--x-2:11%;--y-2:60%;--s-start-2:7%;--s-end-2:81%;--c-3:hsla(216.9230769230769, 91%, 60%, 1);--x-3:93%;--y-3:18%;--s-start-3:7%;--s-end-3:81%;--c-4:hsla(170, 78%, 96%, 1);--x-4:97%;--y-4:97%;--s-start-4:7%;--s-end-4:81%}100%{--c-0:hsla(216.9230769230769, 91%, 60%, 1);--x-0:91%;--y-0:34%;--s-start-0:7%;--s-end-0:81%;--c-1:hsla(183.6986301369863, 64%, 55%, 1);--x-1:92%;--y-1:53%;--s-start-1:7%;--s-end-1:81%;--c-2:hsla(181, 57%, 76%, 1);--x-2:0%;--y-2:37%;--s-start-2:7%;--s-end-2:81%;--c-3:hsla(107, 100%, 81%, 1);--x-3:64%;--y-3:11%;--s-start-3:7%;--s-end-3:81%;--c-4:hsla(143, 60%, 79%, 1);--x-4:45%;--y-4:41%;--s-start-4:7%;--s-end-4:81%}}@property --c-0{syntax:'<color>';inherits:false;initial-value:hsla(171, 68%, 97%, 1)}@property --x-0{syntax:'<percentage>';inherits:false;initial-value:58%}@property --y-0{syntax:'<percentage>';inherits:false;initial-value:44%}@property --s-start-0{syntax:'<percentage>';inherits:false;initial-value:7%}@property --s-end-0{syntax:'<percentage>';inherits:false;initial-value:81%}@property --c-1{syntax:'<color>';inherits:false;initial-value:hsla(136, 72%, 92%, 1)}@property --x-1{syntax:'<percentage>';inherits:false;initial-value:21%}@property --y-1{syntax:'<percentage>';inherits:false;initial-value:14%}@property --s-start-1{syntax:'<percentage>';inherits:false;initial-value:7%}@property --s-end-1{syntax:'<percentage>';inherits:false;initial-value:81%}@property --c-2{syntax:'<color>';inherits:false;initial-value:hsla(194, 70%, 62%, 1)}@property --x-2{syntax:'<percentage>';inherits:false;initial-value:11%}@property --y-2{syntax:'<percentage>';inherits:false;initial-value:60%}@property --s-start-2{syntax:'<percentage>';inherits:false;initial-value:7%}@property --s-end-2{syntax:'<percentage>';inherits:false;initial-value:81%}@property --c-3{syntax:'<color>';inherits:false;initial-value:hsla(216.9230769230769, 91%, 60%, 1)}@property --x-3{syntax:'<percentage>';inherits:false;initial-value:93%}@property --y-3{syntax:'<percentage>';inherits:false;initial-value:18%}@property --s-start-3{syntax:'<percentage>';inherits:false;initial-value:7%}@property --s-end-3{syntax:'<percentage>';inherits:false;initial-value:81%}@property --c-4{syntax:'<color>';inherits:false;initial-value:hsla(170, 78%, 96%, 1)}@property --x-4{syntax:'<percentage>';inherits:false;initial-value:97%}@property --y-4{syntax:'<percentage>';inherits:false;initial-value:97%}@property --s-start-4{syntax:'<percentage>';inherits:false;initial-value:7%}@property --s-end-4{syntax:'<percentage>';inherits:false;initial-value:81%}.top-image__inner{position:absolute;width:120%;overflow:hidden;margin-left:-10%;border-bottom-right-radius:2000px 200px;border-bottom-left-radius:2000px 200px}.top-image__inner
img{height:65vh;object-fit:cover;object-position:center}.top-image__texts{position:absolute;top:50%;left:10px;width:55%;translate:0 -50%;padding:16px;background-color:rgba(130, 156, 277, 0.4);border-radius:10px;text-shadow:5px 1px 10px rgba(130, 156, 277, 0.8)}.top-image__heading,.top-image__lead{color:#fff;z-index:1;position:relative}.top-image__heading{font-size:20px;font-weight:700;margin-bottom:8px}.top-image__lead{font-size:14px}.main{background-color:var(--white)}.main.page{padding-top:60px}.search-area{position:relative;display:block;width:100%;max-width:450px;border:1px
solid #fff;background-color:rgba(255, 255, 255, 0.5);border-radius:25px;padding:10px;margin:0
auto 10px;z-index:1;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--darken-colour);overflow:hidden}.search-area__text{width:70%}.search-area__button{position:absolute;top:0;right:0;padding:10.5px;width:80px;color:#fff;text-align:center;border-radius:0 25px 25px 0;background:var(--main-colour)}.search-area__button
svg{text-shadow:0 1px 3px var(--main-colour);fill:var(--white);width:24px;height:auto}.search-text{margin-bottom:10px}.search-flash{animation:searchFlash 3s ease-in 0.1s normal}@keyframes
searchFlash{0%{box-shadow:0 0 0 var(--white)}17%{box-shadow:0 0 20px var(--white)}34%{box-shadow:0 0 0 var(--white)}51%{box-shadow:0 0 20px var(--white)}68%{box-shadow:0 0 0 var(--white)}85%{box-shadow:0 0 20px var(--white)}100%{box-shadow:0 0 0 var(--white)}}.content{padding-top:350px}.container-section{padding:40px
0}.container-section .common-section{padding:40px
20px}.container-section .common-section:nth-of-type(2n){background-color:var(--bg-colour)}.container-section .common-section:last-of-type{padding:40px
20px 0}.common-section{background-color:var(--white);padding:40px
20px}.common-section__inner{max-width:1080px;margin-inline:auto}.section-heading{color:var(--main-colour);font-size:32px;font-weight:400;text-align:center;text-transform:uppercase}.section-lead{margin-top:4px;font-size:14px;text-align:center;color:var(--sub-colour)}.coding-materials-level-group{display:flex;flex-direction:column;gap:80px;margin-top:80px}.coding-levels__heading{font-size:24px;padding-bottom:8px;border-bottom:1px solid var(--sub-colour)}.coding-levels__description{margin-top:8px}.coding-levels-list{display:flex;flex-wrap:wrap;gap:32px;margin:40px
0 0 0}.coding-levels-list
li{width:calc(100%);position:relative;list-style:none}.coding-item__image{border-radius:10px}.coding-item__heading{font-size:20px;font-weight:400;margin-top:8px}.coding-item__buttons{margin-top:24px;display:flex;gap:20px}.coding-item__demo-button,.coding-item__detail-button{display:flex;justify-content:space-between;align-items:center;background-color:var(--white);border-radius:5px;padding:6px
10px;width:100px;border:1px
solid var(--main-colour);font-size:16px;&:link{color:var(--main-colour);text-decoration:none}svg{width:20px;stroke:var(--main-colour)}}div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button{display:flex;justify-content:space-between;align-items:center;background-color:var(--main-colour);color:#fff;border-radius:40px;padding:12px
20px;width:160px;margin:auto;border:1px
solid var(--main-colour)}div.wpforms-container-full .wpforms-form input[type=submit]::after,
div.wpforms-container-full .wpforms-form button[type=submit]::after,
div.wpforms-container-full .wpforms-form .wpforms-page-button::after{content:"";width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}.wpforms-confirmation-container-full,div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message){border:1px
solid var(--accent-colour);background-color:var(--accent-colour);border-radius:3px;color:#fff}.feature{background-color:var(--bg-colour)}.feature
.feature__list{justify-content:center}.feature .feature__list li
a{color:var(--white);;z-index:10;position:relative;display:flex;justify-content:center;align-items:center;font-size:16px;aspect-ratio:21/9;background-size:cover}.feature .feature__list li a::after{position:absolute;display:block;content:"";width:100%;height:100%;background:rgba(0, 0, 0, 0.5);top:0;left:0;z-index:-1;border-radius:10px}.page-heading{color:var(--main-colour);font-size:20px;font-weight:400;text-align:center;text-transform:uppercase}.home{.q-and-a{background-color:var(--bg-colour)}.q-and-a-list{margin:80px
auto}}.q-and-a-section{padding:40px
20px}.q-and-a-list{display:grid;gap:24px;margin:40px
auto;max-width:860px;li{border-bottom:1px solid #ccc;list-style:none;position:relative;&::before{content:'';position:absolute;width:100%;height:2px;border-radius:2px;background:linear-gradient(to right, var(--main-colour), var(--sub-colour));bottom:-2px;left:0;transform-origin:right;transform:scaleX(0);transition:transform .5s ease-in-out}&:hover::before{transform-origin:left;transform:scaleX(1)}a{display:flex;flex-wrap:wrap;justify-content:space-between;position:relative;font-weight:400;padding:0
0 4px 32px;&:link,&:visited{text-decoration:none}&::before,&::after{content:"";position:absolute}&::before{z-index:2;left:7px;top:11px;width:4px;height:4px;border-right:1px solid #fff;border-bottom:1px solid #fff;rotate:-45deg}&::after{left:0;top:3px;width:20px;height:20px;background-color:var(--sub-colour);border-radius:50%}}}}.q-and-a__button{margin-inline:auto;display:flex;justify-content:center;gap:10px;align-items:center;background-color:var(--white);border-radius:5px;padding:12px
20px;border:1px
solid var(--main-colour);font-size:16px;width:fit-content;&:link{color:var(--main-colour);text-decoration:none}svg{width:20px;stroke:var(--main-colour)}}.q-and-a-back{display:inline-block}.q-and-a-back--top{margin-bottom:24px}.q-and-a-back--bottom{margin-top:24px}.q-and-a-back__link{position:relative;display:flex;align-items:center;&::before{content:"";width:10px;height:10px;border-top:2px solid var(--main-colour);border-left:2px solid var(--main-colour);rotate:-45deg}}.related-posts{margin-top:3em}.information-list{display:grid;gap:16px;margin:40px
auto;max-width:640px}.information-list
li{padding-bottom:4px;border-bottom:1px dotted #aaa}.information-list li
a{display:flex;flex-wrap:wrap;justify-content:space-between}.information__date{width:25%}.information__title{width:70%}.footer__logo{width:100px;margin-inline:auto;padding:24px
0}.footer-top-list
li{display:flex;border-bottom:1px solid var(--white);align-items:center}.footer-top-list li
a{display:block;position:relative;padding:10px
10px 10px 10px;width:100%}.footer__bottom{background-color:var(--main-colour);color:var(--white);padding:16px;text-align:center}.body-inner:has(input.drawer:checked){position:absolute;inset:0;overflow:auto}.drawer{display:none;&:checked+.drawer-button{background:var(--main-colour);span{transform:scaleX(0)}&::before{transform:rotate(135deg) scaleX(1.2)}&::after{transform:rotate(-135deg) scaleX(1.2)}}&:checked~.drawer-screen{pointer-events:auto;background:rgba(0, 0, 0, 0.5);z-index:10}&:checked~.drawer-menu{transform:none}}.drawer-button{z-index:20;bottom:8px;right:8px;width:48px;height:48px;border-radius:48px;background:var(--sub-colour);transition:background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);box-shadow:0 5px 10px rgba(0,0,0,0.3);cursor:pointer;position:fixed;&::before,&::after{content:""}span,&::before,&::after{content:"";position:absolute;top:calc(50% - 1px);left:30%;width:40%;border-bottom:2px solid white;transition:transform .6s cubic-bezier(0.215, 0.61, 0.355, 1)}&::before{transform:translateY(-8px)}&::after{transform:translateY(8px)}}.drawer-screen{z-index:1;inset:0;pointer-events:none;transition:background .6s;cursor:pointer;position:fixed}.drawer-menu{z-index:15;position:fixed;overflow:auto;bottom:0;width:100%;height:fit-content;margin:0;padding:10px
10px 60px 10px;box-sizing:border-box;background:rgba(0, 0, 0, .8);transform:translateY(100%);transition:transform .6s cubic-bezier(0.215, 0.61, 0.355, 1)}.sp-menu-list{margin:0;.menu-item{line-height:1.4;list-style:none;&:not(:first-child){border-top:1px solid rgba(255, 255, 255, .6)}a{display:block;padding:24px
16px;color:white;text-decoration:inherit;transition:background .6s;font-size:16px;&:hover{background:black}}}}.single-item{background-color:var(--white)}.single-item__heading{text-align:left;font-size:20px;font-weight:400;text-transform:uppercase}.single-item__image{margin-top:24px;border-radius:10px;box-shadow:0 50px 67px -67px rgba(0, 0, 0, 0.38)}.single-item__seasons{display:flex;flex-wrap:wrap;gap:10px;margin:16px
0 32px}.single-item__seasons li
a{display:flex;align-items:center;padding:5px
10px;border-radius:3px;color:var(--white);transition:0.2s}.single-item__seasons li a:hover{background-color:var(--white)}.category-creator{display:flex;justify-content:space-between;margin-top:24px}.overview{margin-top:40px;padding:24px;border-radius:10px;background-color:var(--bg-colour)}.single-item__buttons{display:flex;align-items:center;justify-content:center;margin-top:24px;gap:24px}.download-button{display:flex;justify-content:space-between;align-items:center;background-image:linear-gradient(to right, var(--main-colour) 0%, var(--sub-colour) 51%, var(--main-colour) 100%);background-size:200% auto;border-radius:5px;padding:15px
10px;width:220px;font-size:16px;&:link{color:var(--white);text-decoration:none}svg{width:20px;stroke:var(--white)}}.demo-button{display:flex;justify-content:space-between;align-items:center;background-color:var(--white);border-radius:5px;padding:14px
10px;width:100px;border:1px
solid var(--main-colour);font-size:16px;&:link{color:var(--main-colour);text-decoration:none}svg{width:20px;stroke:var(--main-colour)}}.kiyaku{color:var(--main-colour);margin-top:16px;text-align:center}.kiyaku-link{text-decoration:underline}.kiyaku-link:hover{text-decoration:none}.design-data{display:flex;flex-direction:column;gap:80px;align-items:center}.design-data__title{padding:10px;background-color:var(--sub-colour);color:var(--white);margin-bottom:20px;border-radius:5px 5px 0 0}.design-data__link{display:block;margin-inline:auto;width:fit-content;margin-bottom:16px}.design-data__inner--sp{width:100%;dd{max-width:375px}}.site-details{margin-top:24px}.site-details-item__summary{font-size:16px;cursor:pointer;display:flex;align-items:center;background-color:#FFFFFF00;padding:24px
20px;border-bottom:1px solid #3fc1c9}.summary-inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;line-height:1;&::after{content:"";display:block;border-top:2px solid var(--main-colour);border-right:2px solid var(--main-colour);width:15px;height:15px;rotate:45deg;margin-left:auto;transition:0.2s}}.site-details-item[open] .summary-inner::after{rotate:135deg}.summary-icon{width:20px;svg{fill:var(--sub-colour)}}.site-details-item__content{padding:8px;iframe{width:100%;height:auto;aspect-ratio:16/9}p{margin-bottom:1em}h3{font-size:24px;border-left:5px solid var(--sub-colour);padding-left:8px;margin:32px
0 24px}ul{list-style:disc outside;margin:1.5em 0 1.5em 1.5em}ol{list-style:decimal outside;margin:1.5em 0 1.5em 1.5em}}.code-heading{padding:10px;background-color:var(--sub-colour);color:var(--white);margin-top:40px;margin-bottom:20px;border-radius:5px 5px 0 0}.page-section{max-width:860px;margin:0
auto;h1{font-size:24px;color:var(--font-colour);margin-bottom:40px}h2{font-size:20px;font-weight:bold;border-bottom:1px solid var(--sub-colour);scroll-margin-top:60px;&:not(:first-of-type){margin-top:3em}&::after{content:"";display:block;height:3px;background:linear-gradient(to right, var(--main-colour), var(--sub-colour))}}h3{font-weight:bold;font-size:18px;border-left:5px solid var(--sub-colour);padding-left:8px;margin:2.5em 0 1.5em}.main-image{box-shadow:0 5px 15px rgba(0,0,0,0.1);border-radius:10px;img{border-radius:10px}&+h2{margin-top:3em}}p,table{margin:1.5em 0}.date{text-align:right}a{text-decoration:underline;color:var(--main-colour)}ul{ul,ol{margin:0.5em 0 1.5em 1.5em}ul{list-style:circle outside}li{margin-bottom:0.5em}}ol{list-style:decimal outside;margin:1.5em 0 2em 1.5em;ul,ol{margin:0.5em 0 1.5em 1.5em}ul{list-style:circle outside}li{margin-bottom:0.5em}}code{background-color:var(--lighter-colour);border-radius:3px;padding:3px;color:var(--darken-colour)}}.syntaxhighlighter{border-radius:10px}.post-section{max-width:640px;margin:auto}.post-section
h1{font-size:20px;color:var(--main-colour);font-weight:bold;text-align:center;margin-bottom:40px}.post-section
p{margin:1.5em 0}.post-section
.date{text-align:right}.post-section
a{text-decoration:underline;color:var(--main-colour)}.post-section
ul{list-style:disc outside;margin:1.5em 0 1.5em 1.5em}.post-section
ol{list-style:decimal outside;margin:1.5em 0 1.5em 1.5em}.information-section{max-width:640px;margin:auto}.information-section
h1{font-size:20px;color:var(--main-colour);font-weight:bold;text-align:center;margin-bottom:40px}.in-page-to-top{background-color:var(--bg-colour)}.in-page-to-top__text{text-align:center;margin-bottom:8px}ul.page-numbers{display:flex;justify-content:center;margin-top:30px;flex-wrap:wrap;gap:10px}ul.page-numbers li a,
ul.page-numbers li
span{display:flex;justify-content:center;align-items:center;width:36px;height:36px;border:1px
solid var(--main-colour);border-radius:50%}ul.page-numbers li
a{color:var(--main-colour)}ul.page-numbers li
.current{color:var(--white);background-color:var(--main-colour)}.page-numbers__arrow{fill:var(--main-colour)}@media screen and (768px <= width){.sp-only{display:none}.top-image{height:400px}.top-image__inner{height:400px}.top-image__inner
img{height:400px}.top-image__texts{display:initial;position:absolute;left:50%;top:50%;transform:translate(-50%, 0);z-index:10;width:90%;background-color:transparent;text-shadow:5px 1px 10px rgba(98, 140, 148, 0.5)}.coding-levels__heading{font-size:32px;padding-bottom:16px}.coding-levels-list{gap:48px;margin-top:60px}.coding-levels-list
li{width:calc(100% / 2 - 24px)}.coding-item__buttons{margin-top:24px;display:flex;gap:20px}.coding-item__demo-button,.coding-item__detail-button{display:flex;justify-content:center;gap:10px;align-items:center;background-color:var(--white);border-radius:5px;padding:12px
20px;border:1px
solid var(--main-colour);font-size:16px;&:link{color:var(--main-colour);text-decoration:none}svg{width:20px;stroke:var(--main-colour)}}.coding-item__detail-button{width:60%}.coding-item__demo-button{width:40%}.coding-item.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease-out, transform 0.8s ease-out}.coding-item.fade-in.visible{opacity:1;transform:translateY(0)}.single-item__inner{max-width:800px;height:auto;margin:auto}.page-section
h1{margin-bottom:80px;font-size:40px}.page-section
h2{font-size:24px}.page-section a:hover{text-decoration:none}.post-section
h1{margin-bottom:80px;font-size:32px}.post-section a:hover{text-decoration:none}.information-section
h1{margin-bottom:80px;font-size:32px}.site-details{margin-top:40px}.summary-icon{width:24px}.site-details-item__summary{font-size:20px}.site-details-item__content{padding:24px}.design-data{flex-direction:row;gap:20px;align-items:flex-start}.design-data__inner--pc{width:80%}.design-data__inner--sp{width:20%}.single-item__buttons{margin-top:40px}.download-button{width:300px;font-size:24px;transition:background-position 0.5s cubic-bezier(0.05, 0.96, 1, 1);padding:13px
20px;svg{transition:0.2s;width:30px}&:link,&:visited{color:var(--white)}&:hover{background-position:right center;color:var(--white);svg{stroke:var(--white)}}}.demo-button{width:150px;font-size:24px;transition:0.2s;padding:12px
20px;svg{transition:0.2s;width:30px}&:hover{background-color:var(--bg-colour);color:var(--main-colour);svg{stroke:var(--main-colour)}}}}@media screen and (1024px <= width){body{font-size:16px}.header{position:fixed;z-index:100;width:100%;display:flex;justify-content:space-between;padding:16px
1.2%;align-items:center}.header .site-title{font-size:30px;text-align:left;width:270px;margin:0}.header__nav{display:initial;a{position:relative;&:link,&:visited{color:var(--white);text-decoration:none}&::before{content:'';position:absolute;width:100%;height:2px;border-radius:2px;background-color:var(--white);bottom:-3px;left:0;transform-origin:right;transform:scaleX(0);transition:transform .3s ease-in-out}&:hover::before{transform-origin:left;transform:scaleX(1)}}}.main-menu-list{display:flex;gap:24px;align-items:center;list-style:none;margin:0}.header__icon{font-size:24px;color:var(--main-colour)}main{min-height:calc(100vh - 80px)}.home
.main{min-height:calc(100vh - 90px)}.main.page{padding:80px
0}.top-image{height:75vh}.top-image__inner{height:75vh}.top-image__inner
img{height:75vh}.top-image__heading{font-size:56px;font-weight:700;margin-bottom:24px}.top-image__lead{margin-bottom:32px;font-size:24px}div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button{font-size:24px;width:220px;transition:0.2s}div.wpforms-container-full .wpforms-form input[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover{background-color:var(--white);color:var(--main-colour)}div.wpforms-container-full .wpforms-form input[type=submit]:hover::after,
div.wpforms-container-full .wpforms-form button[type=submit]:hover::after,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover::after{transition:border 0.2s;border-top:2px solid var(--main-colour);border-right:2px solid var(--main-colour)}.page-heading{font-size:40px}.container-section{padding:80px
0}.container-section .common-section{padding:80px
40px}.container-section .common-section:nth-of-type(2n){background-color:var(--bg-colour)}.container-section .common-section:last-of-type{padding:80px
40px 0}.section-heading{font-size:40px}.section-lead{margin-top:8px;font-size:16px}.common-section{padding:80px
20px}.new-items__heading,.related-items__heading{}.coding-levels-list{gap:48px}.coding-levels-list
li{width:calc(100% / 3 - 32px)}.coding-levels-list li
a{transition:box-shadow 0.2s ease-in-out}.coding-item__detail-button:hover,.coding-item__demo-button:hover{box-shadow:0 5px 15px rgba(0, 0, 0, 0.1)}.information-list{margin:80px
auto}.information__date{width:18%}.information__title{width:80%}.information-list li a:hover
.information__title{text-decoration:underline}.footer__logo{padding:40px
0 0}.footer__top{padding:0
0 40px}.footer-top-list{display:flex;justify-content:center;margin:auto;max-width:700px}.footer-top-list
li{border-bottom:none}.footer-top-list li a:hover{text-decoration:underline}.single-item__heading{font-size:36px}.single-item__buttons{display:flex;flex-direction:row;justify-content:center;gap:40px}.page-numbers{gap:20px}.page-numbers li a,
.page-numbers li
span{width:40px;height:40px}.page-numbers li
a{color:var(--main-colour)}.page-numbers li
.current{color:var(--white);background-color:var(--main-colour)}.drawer-button,.drawer-menu{display:none}}:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--pX:1.5em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(/wp-content/plugins/highlighting-code-block/assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}.hcb_wrap.hcb_wrap{display:block;font-size:var(--hcb--fz,14px);margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap>pre{border-radius:var(--hcb--radius,0);box-sizing:border-box;display:block;font-family:var(--hcb--ff);font-size:inherit;letter-spacing:.1px;line-height:1.5;margin:0;overflow:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static;-webkit-overflow-scrolling:touch}.hcb_wrap.hcb_wrap>pre,.hcb_wrap.hcb_wrap>pre>code{color:var(--hcb--c);text-align:left;text-shadow:var(--hcb--tsh);white-space:pre;word-wrap:normal;background:var(--hcb--bgc);border:none;hyphens:none;tab-size:4;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap :is(code,span){box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb--highlight-color);font-size:inherit;left:0;line-height:inherit;margin-top:var(--hcb--pY);padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap>.prism.line-numbers{counter-reset:linenumber;padding-left:calc(var(--hcb--pX) + var(--hcb--linenumW));position:static}.hcb_wrap>.prism.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers-rows{border-right:1px solid var(--hcb--line-numbers--c);font-size:inherit;left:calc(-1px - var(--hcb--linenumW) - var(--hcb--pX)/2);min-width:var(--hcb--linenumW);pointer-events:none;position:absolute;top:-.125em;-webkit-user-select:none;user-select:none}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;letter-spacing:-.25px;pointer-events:none;text-align:center}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb--line-numbers--c);content:counter(linenumber);display:block}.hcb_wrap>pre::-webkit-scrollbar{height:6px}.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0
10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap>pre[data-show-lang="0"]{--hcb--data-label:none}.hcb_wrap>pre[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb_wrap>pre[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0
8px 0 20px}.hcb_wrap{--hcb-clipbtn-opacity:0}.hcb-clipboard:focus-visible,.hcb_wrap:hover{--hcb-clipbtn-opacity:100}.hcb-clipboard{backdrop-filter:blur(2px);background:url(/wp-content/plugins/highlighting-code-block/assets/img/clipboard-to-copy.svg) no-repeat 50%/64% auto;background-color:#fafafacc;border:none;border-radius:3px;box-shadow:0 1px 2px #3d3d3d40;box-sizing:border-box;color:#000;height:2.25em;opacity:var(--hcb-clipbtn-opacity);padding:0;position:absolute;right:8px;text-align:center;top:calc(var(--hcb--btn-offset, 0px) + 8px);transition:opacity .25s;width:2.25em;z-index:2}[data-show-lang="0"]+.hcb-clipboard{--hcb--btn-offset:0px}[data-show-lang="1"]+.hcb-clipboard{--hcb--btn-offset:20px}.hcb-clipboard.-done{background-image:url(/wp-content/plugins/highlighting-code-block/assets/img/clipboard-copied.svg)}.hcb-clipboard.-done:before{background-color:inherit;border-radius:8px;color:inherit;content:"✓Copied";display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;padding:2px
4px 2px 2px;position:absolute;right:calc(4px + 100%);top:50%;translate:0 -50%}:root{--hcb--c:#f9f9f6;--hcb--bgc:#2d2e29;--hcb--data-label--c:#fff;--hcb--data-label--bgc:#20211f;--hcb--line-numbers--c:#a3a3a3;--hcb--highlight-color:#fffaf51a;--hcb--file-icon:url(/wp-content/plugins/highlighting-code-block/assets/img/file-icon-dark.svg);--hcb--scbar-track--bgc:#ffffff1a;--hcb--scbar-thumb--bgc:#fff3}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#a8a897}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#ff2c78}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector{color:#b4ec43}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.string{color:#f3e880}.token.function,.token.keyword.def{color:#5fe6ff}.token.keyword,.token.operator{color:#f92672}.token.keyword.this,.token.regex{color:#fd971f}.token.delimiter:not(.symbol){color:#5294ff}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.language-css .token.property,.language-json .token.property,.language-scss
.token.property{color:#5fe6ff}.language-php
.token.important.delimiter{font-weight:400}.language-ruby
.token.interpolation{color:#f8f8f2}.language-json
.token.operator{color:#f3e880}