From 67f5b0b99b59be0ea19e64529cd9ff37ff7d20d9 Mon Sep 17 00:00:00 2001 From: Kite Date: Sat, 12 Aug 2017 05:54:12 +0900 Subject: [PATCH] Improve the footer --- assets/_sass/_footer.scss | 14 ++++++++++++++ assets/css/main.css | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/assets/_sass/_footer.scss b/assets/_sass/_footer.scss index 3c2656d..ae3559d 100644 --- a/assets/_sass/_footer.scss +++ b/assets/_sass/_footer.scss @@ -2,6 +2,11 @@ background: $navy; padding: 5px; + @media (min-width: $desktop) { + display: flex; + padding: 8.75px; + } + .footer-nav { color: $light-gray; font-size: 14px; @@ -9,6 +14,10 @@ opacity: 0.75; text-align: center; + @media (min-width: $desktop) { + margin: auto; + } + a { color: $light-gray; display: block; @@ -56,5 +65,10 @@ margin: 25px auto; opacity: 0.75; text-align: center; + + @media (min-width: $desktop) { + margin: auto; + order: -1; + } } } diff --git a/assets/css/main.css b/assets/css/main.css index 450cc16..55b5efd 100755 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1 +1 @@ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,textarea,input,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:normal;vertical-align:baseline;background:transparent}article,aside,details,figcaption,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}b,strong{font-weight:bold}ol,ul{list-style:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}caption,th{text-align:left}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}blockquote,q{quotes:none}blockquote::before,blockquote::after,q:before,q::after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input{vertical-align:middle}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;clear:both}h1,h2,h3,h4,h5,h6{font-weight:400}img{vertical-align:top}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:100;src:url("../fonts/NotoSansCJKjp-Thin.eot");src:url("../fonts/NotoSansCJKjp-Thin.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Thin.woff") format("woff"),url("../fonts/NotoSansCJKjp-Thin.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:200;src:url("../fonts/NotoSansCJKjp-Light.eot");src:url("../fonts/NotoSansCJKjp-Light.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Light.woff") format("woff"),url("../fonts/NotoSansCJKjp-Light.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:300;src:url("../fonts/NotoSansCJKjp-DemiLight.eot");src:url("../fonts/NotoSansCJKjp-DemiLight.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-DemiLight.woff") format("woff"),url("../fonts/NotoSansCJKjp-DemiLight.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:400;src:url("../fonts/NotoSansCJKjp-Regular.eot");src:url("../fonts/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Regular.woff") format("woff"),url("../fonts/NotoSansCJKjp-Regular.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:500;src:url("../fonts/NotoSansCJKjp-Medium.eot");src:url("../fonts/NotoSansCJKjp-Medium.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Medium.woff") format("woff"),url("../fonts/NotoSansCJKjp-Medium.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:700;src:url("../fonts/NotoSansCJKjp-Bold.eot");src:url("../fonts/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Bold.woff") format("woff"),url("../fonts/NotoSansCJKjp-Bold.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:900;src:url("../fonts/NotoSansCJKjp-Black.eot");src:url("../fonts/NotoSansCJKjp-Black.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Black.woff") format("woff"),url("../fonts/NotoSansCJKjp-Black.otf") format("opentype")}button,.button{background:transparent;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;padding:8px 1em;text-align:center;text-decoration:none}@media (min-width: 1024px){button,.button{font-size:18px;font-weight:300;padding:4px 25px}}.button-close{background:transparent;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;padding:8px 1em;text-align:center;text-decoration:none;border-radius:0;padding:0;font-size:0 !important;height:28px;padding:6px;position:relative;width:28px}@media (min-width: 1024px){.button-close{font-size:18px;font-weight:300;padding:4px 25px}}@media (min-width: 1024px){.button-close{padding:0}}.button-close::before,.button-close::after{position:absolute;top:0;right:0;bottom:0;left:0;background:#34495e;content:"";display:block;height:2.5px;margin:auto;width:22.624px}.button-close::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.button-close::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.button-close:hover::before,.button-close:hover::after{opacity:0.75}.hamburger-box{background-color:transparent;border:0;color:inherit;font:inherit;margin:0;overflow:visible;text-transform:none;background:#34495e;border-radius:0;cursor:pointer;display:block;font-size:0;line-height:0;padding:10px;position:fixed;right:20px;top:20px;z-index:1000;-webkit-transition:all, 0.15s linear;transition:all, 0.15s linear}@media (min-width: 1024px){.hamburger-box{display:none}}.hamburger-box:hover .hamburger{opacity:0.75}.hamburger{display:inline-block;height:16px;position:relative;width:20px}.hamburger-inner{display:block;margin-top:-1px;top:50%}.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{background-color:#fff;height:2px;position:absolute;-webkit-transition:-webkit-transform 0.15s ease;transition:-webkit-transform 0.15s ease;transition:transform 0.15s ease;transition:transform 0.15s ease, -webkit-transform 0.15s ease;width:20px}.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}.hamburger-inner::before{top:-7px}.hamburger-inner::after{bottom:-7px}.hamburger-box .hamburger-inner{-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}.hamburger-box .hamburger-inner::before,.hamburger-box .hamburger-inner::after{-webkit-transition-duration:0s;transition-duration:0s;-webkit-transition-delay:0.1s;transition-delay:0.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.hamburger-box .hamburger-inner::before{-webkit-transition-property:top, opacity;transition-property:top, opacity}.hamburger-box .hamburger-inner::after{-webkit-transition-property:bottom, -webkit-transform;transition-property:bottom, -webkit-transform;transition-property:bottom, transform;transition-property:bottom, transform, -webkit-transform}.hamburger-box.is-active{background:none}.hamburger-box.is-active .hamburger-inner{-webkit-transform:rotate(765deg);transform:rotate(765deg);-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}.hamburger-box.is-active .hamburger-inner::before,.hamburger-box.is-active .hamburger-inner::after{-webkit-transition-delay:0s;transition-delay:0s}.hamburger-box.is-active .hamburger-inner::before{top:0;opacity:0}.hamburger-box.is-active .hamburger-inner::after{bottom:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.sliding-panel-content{position:fixed;top:0;right:0;bottom:0;left:0;height:100%;width:100%;-webkit-overflow-scrolling:touch;overflow-y:auto;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.15s linear;transition:all 0.15s linear;z-index:999}@media (min-width: 1024px){.sliding-panel-content{position:fixed;top:0;right:0;bottom:auto;left:0;height:auto;width:100%;-webkit-transform:none;transform:none}}.sliding-panel-content.is-active{-webkit-transform:translateY(0);transform:translateY(0)}@media screen{.sliding-panel-content.is-active{-webkit-transform:none;transform:none}}html{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}*,*::after,*::before{-webkit-box-sizing:inherit;box-sizing:inherit}body{background:#293b4b;font-family:"Noto Sans CJK JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;height:100%;line-height:1.75}a{color:#eb5256}a:hover{text-decoration:none}button{line-height:1.75}.header{background:rgba(23,32,40,0.9);color:#fff;padding:0 30px}@media (min-width: 1024px){.header{background:#fff;color:#34495e;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:visible;padding:0 30px 0 10px}}.header .menu-title{font-size:16px;font-weight:500;text-align:center;text-transform:uppercase;border-bottom:1px solid #fff;padding:8px 1em}@media (min-width: 1024px){.header .menu-title{font-size:21px}}@media (min-width: 1024px){.header .menu-title{border-bottom-color:#34495e;padding:18px 1em}}.header .global-nav-box{margin:15px auto 20px}@media (min-width: 1024px){.header .global-nav-box{margin:0 auto 0 0}.header .global-nav-box .menu-title{display:none}}.header .global-nav-box .global-nav{font-size:16px;font-weight:500;text-align:center;text-transform:uppercase}@media (min-width: 1024px){.header .global-nav-box .global-nav{font-size:21px}}@media (min-width: 590px){.header .global-nav-box .global-nav .menu{-webkit-column-count:2;column-count:2;-webkit-column-gap:10px;column-gap:10px}}@media (min-width: 1024px){.header .global-nav-box .global-nav .menu{display:-webkit-box;display:-ms-flexbox;display:flex}}.header .global-nav-box .global-nav .menu .menu-item{position:relative}@media (min-width: 1024px){.header .global-nav-box .global-nav .menu .menu-item:hover a{background:#eb5256;color:#fff}.header .global-nav-box .global-nav .menu .menu-item:hover .sub-menu{display:-webkit-box;display:-ms-flexbox;display:flex}}.header .global-nav-box .global-nav a{border-bottom:1px solid #34495e;color:#fff;display:block;padding:6px 1em;text-decoration:none}.header .global-nav-box .global-nav a:hover{color:rgba(255,255,255,0.75)}@media (min-width: 1024px){.header .global-nav-box .global-nav a{border:0;color:#eb5256;padding:6.5px 20px}}@media (min-width: 1024px){.header .global-nav-box .global-nav .sub-menu{background:#eb5256;display:none;position:absolute}}.header .global-nav-box .global-nav .sub-menu .menu-item a{color:#eb5256}.header .global-nav-box .global-nav .sub-menu .menu-item a:hover{color:rgba(235,82,86,0.75)}@media (min-width: 1024px){.header .global-nav-box .global-nav .sub-menu .menu-item a{color:#fff}.header .global-nav-box .global-nav .sub-menu .menu-item a:hover{color:rgba(255,255,255,0.75)}}.header .entry-nav-box{margin:20px auto 40px}@media (min-width: 1024px){.header .entry-nav-box{position:fixed;top:50%;right:auto;bottom:auto;left:50%;background:#fff;border-radius:4px;margin:auto;padding:10px 30px;-webkit-transform:translate(-50%, -75%);transform:translate(-50%, -75%);width:520px;z-index:999;opacity:0;-webkit-transition:all 0.15s linear;transition:all 0.15s linear;visibility:hidden}.header .entry-nav-box.is-active{opacity:1;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);visibility:visible}}.header .entry-nav-box .menu a{background:transparent;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;padding:8px 1em;text-align:center;text-decoration:none;display:block}@media (min-width: 1024px){.header .entry-nav-box .menu a{font-size:18px;font-weight:300;padding:4px 25px}}.header .entry-nav-box .menu .menu-item{margin-bottom:10px}@media (min-width: 1024px){.header .entry-nav-box .menu .menu-item{margin-bottom:20px}}@media (min-width: 590px){.header .entry-nav-box .menu{margin-left:-10px;margin-right:-10px}.header .entry-nav-box .menu::after{clear:both;content:"";display:block}.header .entry-nav-box .menu>.menu-item{width:calc(50% - 15px);float:left;margin-left:10px}}@media (min-width: 590px) and (min-width: 1024px){.header .entry-nav-box .menu>.menu-item{width:calc(100% - 20px);float:left;margin-left:10px}}.header .entry-nav-box .entry-nav{border-bottom:1px solid #34495e;margin-bottom:12px;padding:20px 0 10px}@media (min-width: 1024px){.header .entry-nav-box .entry-nav{margin-bottom:22px;padding-top:30px}}.header .entry-nav-box .entry-nav a{background:#eb5256;color:#fff}.header .entry-nav-box .entry-nav a:hover{background:#df4e52}.header .entry-nav-box .workshop-note{font-size:12px;font-weight:300;margin-bottom:10px;text-align:center}@media (min-width: 1024px){.header .entry-nav-box .workshop-note{font-size:14px;margin-bottom:20px}}.header .entry-nav-box .workshop-nav a{background:#34495e;color:#fff}.header .entry-nav-box .workshop-nav a:hover{background:#314559}.header .entry-nav-box .entry-nav-box-close{display:none}@media (min-width: 1024px){.header .entry-nav-box .entry-nav-box-close{position:absolute;top:32px;right:25px;bottom:auto;left:auto;display:block}}.header .entry-nav-box-toggle{background:transparent;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;padding:8px 1em;text-align:center;text-decoration:none;background:#eb5256;color:#fff;display:none}@media (min-width: 1024px){.header .entry-nav-box-toggle{font-size:18px;font-weight:300;padding:4px 25px}}.header .entry-nav-box-toggle:hover{background:#df4e52}@media (min-width: 1024px){.header .entry-nav-box-toggle{display:block;font-size:21px;font-weight:500;letter-spacing:0.05em;margin:5px 25px;padding-top:2px;padding-bottom:1px;text-transform:uppercase;width:210px}.header .entry-nav-box-toggle::before{content:"▶︎";font-size:14px;margin-right:25px;vertical-align:2px}}.header .entry-nav-fade-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#172028;opacity:0;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;visibility:hidden;z-index:998}@media (min-width: 1024px){.header .entry-nav-fade-screen.is-active{opacity:0.9;visibility:visible}}.header .coderdojo-nav{display:none}@media (min-width: 1024px){.header .coderdojo-nav{display:block;margin:5px 0}.header .coderdojo-nav:hover{opacity:0.75}}.header .coderdojo-nav img{max-height:40px;width:auto}.header .coderdojo-nav img[src$=".svg"]{height:40px}.footer{background:#34495e;padding:5px}.footer .footer-nav{color:#fafafa;font-size:14px;margin:25px auto;opacity:0.75;text-align:center}.footer .footer-nav a{color:#fafafa;display:block;padding:4px 0}.footer .footer-nav img{max-height:32px;width:auto}.footer .footer-nav img[src$=".svg"]{height:32px}.footer .footer-nav .menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.footer .footer-nav .menu .menu-item.code-of-conduct:first-child{margin:0 24px 0 10px}.footer .footer-nav .menu .menu-item.facebook,.footer .footer-nav .menu .menu-item.twitter{margin:0 10px}.footer .footer-nav .menu .menu-item.facebook a,.footer .footer-nav .menu .menu-item.twitter a{padding:0}.footer .footer-nav .menu .menu-item.facebook a:hover,.footer .footer-nav .menu .menu-item.twitter a:hover{opacity:0.75}.footer .copyright{color:#fafafa;font-size:14px;margin:25px auto;opacity:0.75;text-align:center} +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,textarea,input,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:normal;vertical-align:baseline;background:transparent}article,aside,details,figcaption,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}b,strong{font-weight:bold}ol,ul{list-style:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}caption,th{text-align:left}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}blockquote,q{quotes:none}blockquote::before,blockquote::after,q:before,q::after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input{vertical-align:middle}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;clear:both}h1,h2,h3,h4,h5,h6{font-weight:400}img{vertical-align:top}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:100;src:url("../fonts/NotoSansCJKjp-Thin.eot");src:url("../fonts/NotoSansCJKjp-Thin.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Thin.woff") format("woff"),url("../fonts/NotoSansCJKjp-Thin.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:200;src:url("../fonts/NotoSansCJKjp-Light.eot");src:url("../fonts/NotoSansCJKjp-Light.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Light.woff") format("woff"),url("../fonts/NotoSansCJKjp-Light.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:300;src:url("../fonts/NotoSansCJKjp-DemiLight.eot");src:url("../fonts/NotoSansCJKjp-DemiLight.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-DemiLight.woff") format("woff"),url("../fonts/NotoSansCJKjp-DemiLight.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:400;src:url("../fonts/NotoSansCJKjp-Regular.eot");src:url("../fonts/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Regular.woff") format("woff"),url("../fonts/NotoSansCJKjp-Regular.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:500;src:url("../fonts/NotoSansCJKjp-Medium.eot");src:url("../fonts/NotoSansCJKjp-Medium.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Medium.woff") format("woff"),url("../fonts/NotoSansCJKjp-Medium.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:700;src:url("../fonts/NotoSansCJKjp-Bold.eot");src:url("../fonts/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Bold.woff") format("woff"),url("../fonts/NotoSansCJKjp-Bold.otf") format("opentype")}@font-face{font-family:"Noto Sans CJK JP";font-style:normal;font-weight:900;src:url("../fonts/NotoSansCJKjp-Black.eot");src:url("../fonts/NotoSansCJKjp-Black.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Black.woff") format("woff"),url("../fonts/NotoSansCJKjp-Black.otf") format("opentype")}button,.button{background:transparent;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;padding:8px 1em;text-align:center;text-decoration:none}@media (min-width: 1024px){button,.button{font-size:18px;font-weight:300;padding:4px 25px}}.button-close{background:transparent;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;padding:8px 1em;text-align:center;text-decoration:none;border-radius:0;padding:0;font-size:0 !important;height:28px;padding:6px;position:relative;width:28px}@media (min-width: 1024px){.button-close{font-size:18px;font-weight:300;padding:4px 25px}}@media (min-width: 1024px){.button-close{padding:0}}.button-close::before,.button-close::after{position:absolute;top:0;right:0;bottom:0;left:0;background:#34495e;content:"";display:block;height:2.5px;margin:auto;width:22.624px}.button-close::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.button-close::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.button-close:hover::before,.button-close:hover::after{opacity:0.75}.hamburger-box{background-color:transparent;border:0;color:inherit;font:inherit;margin:0;overflow:visible;text-transform:none;background:#34495e;border-radius:0;cursor:pointer;display:block;font-size:0;line-height:0;padding:10px;position:fixed;right:20px;top:20px;z-index:1000;-webkit-transition:all, 0.15s linear;transition:all, 0.15s linear}@media (min-width: 1024px){.hamburger-box{display:none}}.hamburger-box:hover .hamburger{opacity:0.75}.hamburger{display:inline-block;height:16px;position:relative;width:20px}.hamburger-inner{display:block;margin-top:-1px;top:50%}.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{background-color:#fff;height:2px;position:absolute;-webkit-transition:-webkit-transform 0.15s ease;transition:-webkit-transform 0.15s ease;transition:transform 0.15s ease;transition:transform 0.15s ease, -webkit-transform 0.15s ease;width:20px}.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}.hamburger-inner::before{top:-7px}.hamburger-inner::after{bottom:-7px}.hamburger-box .hamburger-inner{-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}.hamburger-box .hamburger-inner::before,.hamburger-box .hamburger-inner::after{-webkit-transition-duration:0s;transition-duration:0s;-webkit-transition-delay:0.1s;transition-delay:0.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.hamburger-box .hamburger-inner::before{-webkit-transition-property:top, opacity;transition-property:top, opacity}.hamburger-box .hamburger-inner::after{-webkit-transition-property:bottom, -webkit-transform;transition-property:bottom, -webkit-transform;transition-property:bottom, transform;transition-property:bottom, transform, -webkit-transform}.hamburger-box.is-active{background:none}.hamburger-box.is-active .hamburger-inner{-webkit-transform:rotate(765deg);transform:rotate(765deg);-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}.hamburger-box.is-active .hamburger-inner::before,.hamburger-box.is-active .hamburger-inner::after{-webkit-transition-delay:0s;transition-delay:0s}.hamburger-box.is-active .hamburger-inner::before{top:0;opacity:0}.hamburger-box.is-active .hamburger-inner::after{bottom:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.sliding-panel-content{position:fixed;top:0;right:0;bottom:0;left:0;height:100%;width:100%;-webkit-overflow-scrolling:touch;overflow-y:auto;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.15s linear;transition:all 0.15s linear;z-index:999}@media (min-width: 1024px){.sliding-panel-content{position:fixed;top:0;right:0;bottom:auto;left:0;height:auto;width:100%;-webkit-transform:none;transform:none}}.sliding-panel-content.is-active{-webkit-transform:translateY(0);transform:translateY(0)}@media screen{.sliding-panel-content.is-active{-webkit-transform:none;transform:none}}html{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}*,*::after,*::before{-webkit-box-sizing:inherit;box-sizing:inherit}body{background:#293b4b;font-family:"Noto Sans CJK JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;height:100%;line-height:1.75}a{color:#eb5256}a:hover{text-decoration:none}button{line-height:1.75}.header{background:rgba(23,32,40,0.9);color:#fff;padding:0 30px}@media (min-width: 1024px){.header{background:#fff;color:#34495e;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:visible;padding:0 30px 0 10px}}.header .menu-title{font-size:16px;font-weight:500;text-align:center;text-transform:uppercase;border-bottom:1px solid #fff;padding:8px 1em}@media (min-width: 1024px){.header .menu-title{font-size:21px}}@media (min-width: 1024px){.header .menu-title{border-bottom-color:#34495e;padding:18px 1em}}.header .global-nav-box{margin:15px auto 20px}@media (min-width: 1024px){.header .global-nav-box{margin:0 auto 0 0}.header .global-nav-box .menu-title{display:none}}.header .global-nav-box .global-nav{font-size:16px;font-weight:500;text-align:center;text-transform:uppercase}@media (min-width: 1024px){.header .global-nav-box .global-nav{font-size:21px}}@media (min-width: 590px){.header .global-nav-box .global-nav .menu{-webkit-column-count:2;column-count:2;-webkit-column-gap:10px;column-gap:10px}}@media (min-width: 1024px){.header .global-nav-box .global-nav .menu{display:-webkit-box;display:-ms-flexbox;display:flex}}.header .global-nav-box .global-nav .menu .menu-item{position:relative}@media (min-width: 1024px){.header .global-nav-box .global-nav .menu .menu-item:hover a{background:#eb5256;color:#fff}.header .global-nav-box .global-nav .menu .menu-item:hover .sub-menu{display:-webkit-box;display:-ms-flexbox;display:flex}}.header .global-nav-box .global-nav a{border-bottom:1px solid #34495e;color:#fff;display:block;padding:6px 1em;text-decoration:none}.header .global-nav-box .global-nav a:hover{color:rgba(255,255,255,0.75)}@media (min-width: 1024px){.header .global-nav-box .global-nav a{border:0;color:#eb5256;padding:6.5px 20px}}@media (min-width: 1024px){.header .global-nav-box .global-nav .sub-menu{background:#eb5256;display:none;position:absolute}}.header .global-nav-box .global-nav .sub-menu .menu-item a{color:#eb5256}.header .global-nav-box .global-nav .sub-menu .menu-item a:hover{color:rgba(235,82,86,0.75)}@media (min-width: 1024px){.header .global-nav-box .global-nav .sub-menu .menu-item a{color:#fff}.header .global-nav-box .global-nav .sub-menu .menu-item a:hover{color:rgba(255,255,255,0.75)}}.header .entry-nav-box{margin:20px auto 40px}@media (min-width: 1024px){.header .entry-nav-box{position:fixed;top:50%;right:auto;bottom:auto;left:50%;background:#fff;border-radius:4px;margin:auto;padding:10px 30px;-webkit-transform:translate(-50%, -75%);transform:translate(-50%, -75%);width:520px;z-index:999;opacity:0;-webkit-transition:all 0.15s linear;transition:all 0.15s linear;visibility:hidden}.header .entry-nav-box.is-active{opacity:1;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);visibility:visible}}.header .entry-nav-box .menu a{background:transparent;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;padding:8px 1em;text-align:center;text-decoration:none;display:block}@media (min-width: 1024px){.header .entry-nav-box .menu a{font-size:18px;font-weight:300;padding:4px 25px}}.header .entry-nav-box .menu .menu-item{margin-bottom:10px}@media (min-width: 1024px){.header .entry-nav-box .menu .menu-item{margin-bottom:20px}}@media (min-width: 590px){.header .entry-nav-box .menu{margin-left:-10px;margin-right:-10px}.header .entry-nav-box .menu::after{clear:both;content:"";display:block}.header .entry-nav-box .menu>.menu-item{width:calc(50% - 15px);float:left;margin-left:10px}}@media (min-width: 590px) and (min-width: 1024px){.header .entry-nav-box .menu>.menu-item{width:calc(100% - 20px);float:left;margin-left:10px}}.header .entry-nav-box .entry-nav{border-bottom:1px solid #34495e;margin-bottom:12px;padding:20px 0 10px}@media (min-width: 1024px){.header .entry-nav-box .entry-nav{margin-bottom:22px;padding-top:30px}}.header .entry-nav-box .entry-nav a{background:#eb5256;color:#fff}.header .entry-nav-box .entry-nav a:hover{background:#df4e52}.header .entry-nav-box .workshop-note{font-size:12px;font-weight:300;margin-bottom:10px;text-align:center}@media (min-width: 1024px){.header .entry-nav-box .workshop-note{font-size:14px;margin-bottom:20px}}.header .entry-nav-box .workshop-nav a{background:#34495e;color:#fff}.header .entry-nav-box .workshop-nav a:hover{background:#314559}.header .entry-nav-box .entry-nav-box-close{display:none}@media (min-width: 1024px){.header .entry-nav-box .entry-nav-box-close{position:absolute;top:32px;right:25px;bottom:auto;left:auto;display:block}}.header .entry-nav-box-toggle{background:transparent;border:0;border-radius:4px;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;padding:8px 1em;text-align:center;text-decoration:none;background:#eb5256;color:#fff;display:none}@media (min-width: 1024px){.header .entry-nav-box-toggle{font-size:18px;font-weight:300;padding:4px 25px}}.header .entry-nav-box-toggle:hover{background:#df4e52}@media (min-width: 1024px){.header .entry-nav-box-toggle{display:block;font-size:21px;font-weight:500;letter-spacing:0.05em;margin:5px 25px;padding-top:2px;padding-bottom:1px;text-transform:uppercase;width:210px}.header .entry-nav-box-toggle::before{content:"▶︎";font-size:14px;margin-right:25px;vertical-align:2px}}.header .entry-nav-fade-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#172028;opacity:0;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;visibility:hidden;z-index:998}@media (min-width: 1024px){.header .entry-nav-fade-screen.is-active{opacity:0.9;visibility:visible}}.header .coderdojo-nav{display:none}@media (min-width: 1024px){.header .coderdojo-nav{display:block;margin:5px 0}.header .coderdojo-nav:hover{opacity:0.75}}.header .coderdojo-nav img{max-height:40px;width:auto}.header .coderdojo-nav img[src$=".svg"]{height:40px}.footer{background:#34495e;padding:5px}@media (min-width: 1024px){.footer{display:-webkit-box;display:-ms-flexbox;display:flex;padding:8.75px}}.footer .footer-nav{color:#fafafa;font-size:14px;margin:25px auto;opacity:0.75;text-align:center}@media (min-width: 1024px){.footer .footer-nav{margin:auto}}.footer .footer-nav a{color:#fafafa;display:block;padding:4px 0}.footer .footer-nav img{max-height:32px;width:auto}.footer .footer-nav img[src$=".svg"]{height:32px}.footer .footer-nav .menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.footer .footer-nav .menu .menu-item.code-of-conduct:first-child{margin:0 24px 0 10px}.footer .footer-nav .menu .menu-item.facebook,.footer .footer-nav .menu .menu-item.twitter{margin:0 10px}.footer .footer-nav .menu .menu-item.facebook a,.footer .footer-nav .menu .menu-item.twitter a{padding:0}.footer .footer-nav .menu .menu-item.facebook a:hover,.footer .footer-nav .menu .menu-item.twitter a:hover{opacity:0.75}.footer .copyright{color:#fafafa;font-size:14px;margin:25px auto;opacity:0.75;text-align:center}@media (min-width: 1024px){.footer .copyright{margin:auto;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}}