header,header #navbar{z-index:1000;width:100%;background-color:#fff}header #navbar{position:fixed;top:0;display:flex;flex-flow:row;justify-content:space-between;height:46px;box-shadow:0 1px 1px rgba(0,0,0,.2)}header #navbar #header-logo{width:auto;height:36px;padding:10px 6px;margin-top:5px;margin-left:12px;border-radius:3px;transition:.3s}header #navbar #header-logo:hover{background-color:#eee}header #navbar .ovice-logo{width:60px}header #navbar .slack-logo{width:80px}header #navbar .menu-item-pc-ovice,header #navbar .menu-item-pc-slack{padding:0 5px}header #navbar .menu-item-border{margin:10px;border:.5px solid #ccc}header #navbar .menu-link{display:block;height:46px;padding:0 10px;line-height:46px;color:#666;cursor:pointer;transition:.3s}header #navbar .menu-link:hover{color:#333;text-decoration:none;background:#eee}header #navbar .menu-link--signup{display:block;height:38px;padding:0 18px;margin:4px 0 4px 2px;line-height:38px;color:#fff;cursor:pointer;background-color:#ee3535;border-radius:3px;transition:.3s}header #navbar .menu-link--signup:hover{text-decoration:none;opacity:.7}header #navbar .menu-list{display:flex;justify-content:flex-end;height:46px;margin:0 10px 0 auto;line-height:46px}@media screen and (min-width:980px){header #navbar .menu-list{margin-right:30px}}header #navbar .menu-list .menu-item-pc,header #navbar .menu-list .menu-item-pc-ovice,header #navbar .menu-list .menu-item-pc-slack{display:none;text-align:center;list-style-type:none}@media screen and (min-width:980px){header #navbar .menu-list .menu-item-pc,header #navbar .menu-list .menu-item-pc-ovice,header #navbar .menu-list .menu-item-pc-slack{display:block}}header #navbar .menu-list .menu-item-pc-ovice .profile-icon,header #navbar .menu-list .menu-item-pc-slack .profile-icon,header #navbar .menu-list .menu-item-pc .profile-icon{padding:7px 8px;line-height:0}header #navbar .menu-list .menu-item-pc-ovice .profile-icon img,header #navbar .menu-list .menu-item-pc-slack .profile-icon img,header #navbar .menu-list .menu-item-pc .profile-icon img{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}header #navbar .menu-list .menu-item-pc-ovice .dropdown-menu,header #navbar .menu-list .menu-item-pc-slack .dropdown-menu,header #navbar .menu-list .menu-item-pc .dropdown-menu{padding:8px;margin-top:5px}header #navbar .menu-list .menu-item-pc-ovice .dropdown-menu a,header #navbar .menu-list .menu-item-pc-slack .dropdown-menu a,header #navbar .menu-list .menu-item-pc .dropdown-menu a{height:36px;padding:7px 12px;line-height:22px;border-radius:3px;transition:.3s}header #navbar .menu-list .menu-item-sp{display:block}@media screen and (min-width:980px){header #navbar .menu-list .menu-item-sp{display:none}}header #navbar .menu-list .menu-item-sp__drawer-menu{position:fixed;top:0;right:0;z-index:1001;box-sizing:border-box;width:280px;height:100%;overflow-y:scroll;background:#fff;box-shadow:-3px 0 0 #eee;opacity:0;transition:.2s;transition-delay:0s;transition-duration:.5s;transition-property:all;transform:perspective(500px) rotateY(-90deg);transform-origin:right center}header #navbar .menu-list .menu-item-sp__drawer-menu ul{margin:20px 0 30px}header #navbar .menu-list .menu-item-sp__drawer-menu ul li{text-align:center}header #navbar .menu-list .menu-item-sp__drawer-menu ul li label{width:100%}header #navbar .menu-list .menu-item-sp__menu-btn{z-index:1002;display:flex;align-items:center;justify-content:space-between;height:46px;line-height:46px;text-align:center;opacity:1}header #navbar .menu-list .menu-item-sp__menu-btn-inner{width:40px;line-height:36px;color:#666;cursor:pointer;border:1px solid #666;border-radius:3px;transition:.2s}header #navbar .menu-list .menu-item-sp__menu-btn-inner:hover{background-color:#eee;opacity:.8}header #navbar .menu-list .menu-item-sp__back-close{position:fixed;top:0;left:0;z-index:1003;width:0;height:100vh;visibility:hidden;background-color:hsla(0,0%,39.2%,.3);opacity:0;transition:.2s}header #navbar .menu-list .menu-item-sp__check{display:none}header #navbar .menu-list .menu-item-sp__check:checked~.menu-item-sp__drawer-menu{opacity:1;transform:none}header #navbar .menu-list .menu-item-sp__check:checked~.menu-item-sp__back-close{z-index:1003;width:calc(100% - 280px);visibility:visible;opacity:1}html{font-family:游ゴシック,YuGothic,ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,sans-serif}nav .active{background:#eee}main{width:100%;margin-top:1px;background-color:#fff}main section{padding:30px 15px;margin:30px 0}main .breadcrumb-list{display:block;margin:5px auto}@media screen and (max-width:767px){main .breadcrumb-list{width:100%}}@media screen and (min-width:768px){main .breadcrumb-list{max-width:980px}}#portfolio .portfolio__header{position:relative;width:100%;margin:0 auto;background-repeat:no-repeat;background-position:50%;background-size:cover}@media screen and (max-width:767px){#portfolio .portfolio__header{height:200px;width:100%}}@media screen and (min-width:768px){#portfolio .portfolio__header{height:360px;max-width:980px}}#portfolio .portfolio__header__contents{position:absolute;bottom:0;left:0;width:100%;height:100px;background-color:rgba(0,0,0,.3)}#portfolio .portfolio__header__contents__img{position:absolute;left:0}@media screen and (max-width:767px){#portfolio .portfolio__header__contents__img{bottom:-40px;width:120px;height:120px}}@media screen and (min-width:768px){#portfolio .portfolio__header__contents__img{bottom:-60px;width:160px;height:160px}}#portfolio .portfolio__header__contents__img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:5px}#portfolio .portfolio__header__contents__info{position:absolute;bottom:0;padding-left:15px}@media screen and (max-width:767px){#portfolio .portfolio__header__contents__info{left:120px;height:80px}}@media screen and (min-width:768px){#portfolio .portfolio__header__contents__info{left:160px;height:100px}}#portfolio .portfolio__header__contents__info i{margin-right:5px;font-size:1.5em;color:#fff}#portfolio .portfolio__header__contents__info h2,#portfolio .portfolio__header__contents__info p{padding:3px 0 6px;line-height:1;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}@media screen and (max-width:767px){#portfolio .portfolio__header__contents__info h2{font-size:20px}}@media screen and (min-width:768px){#portfolio .portfolio__header__contents__info h2{font-size:28px}}#portfolio .portfolio__header__contents__info p{font-size:14px}#portfolio .portfolio__description{padding-left:15px;margin:0 auto;font-size:12px;color:#9da0a4;border-bottom:1px solid #ddd}@media screen and (max-width:767px){#portfolio .portfolio__description{width:100%;height:40px;padding-top:10px;padding-left:130px}}@media screen and (min-width:768px){#portfolio .portfolio__description{max-width:980px;height:60px;padding-top:20px;padding-left:170px}}#portfolio .portfolio__description span{margin-right:10px}#portfolio .portfolio__description span i{margin-right:5px}#portfolio .portfolio__contents{margin:0 auto}@media screen and (max-width:767px){#portfolio .portfolio__contents{width:100%}}@media screen and (min-width:768px){#portfolio .portfolio__contents{max-width:980px}}#portfolio .portfolio__contents h2{margin-bottom:30px;font-size:23px;font-weight:600}#portfolio .portfolio__contents__label{margin-bottom:5px;font-size:1em;font-weight:700}#portfolio .portfolio__contents__description{margin-bottom:5px;font-size:.7em;color:#a9a9a9}#portfolio .portfolio__contents i{margin-right:5px}#portfolio .portfolio__contents__info{margin-bottom:30px}#portfolio .portfolio__contents__info__link{display:inline-block;width:100%;height:100%;color:#333}#portfolio .portfolio__contents__info__link-more{color:#e59f2c}#portfolio .portfolio__contents__info__link-more:hover{color:#ec7273}#portfolio .portfolio__contents__card{display:flex;flex-wrap:wrap;justify-content:space-between;padding:20px 15px;background-color:#fff;border-radius:5px;box-shadow:0 5px 32px 0 rgba(0,0,0,.1);transition:all .3s}#portfolio .portfolio__contents__card:hover{box-shadow:1px 1px 14px 5px rgba(0,0,0,.1)}#portfolio .portfolio__contents__card-img{width:200px;margin-right:15px;margin-bottom:15px}#portfolio .portfolio__contents__card-img img{width:100%;height:auto}#portfolio .portfolio__contents__card-main{flex:6 1;min-width:260px;margin-bottom:15px}#portfolio .portfolio__contents__card-main h3{padding-bottom:15px;border-bottom:1px solid #ddd}#portfolio .portfolio__contents__card-main .external-link{color:#e59f2c}#portfolio .portfolio__contents__card__tag{display:inline-block;padding:5px 10px;margin-right:5px;margin-bottom:5px;color:#fff;background-color:#f18859;border-radius:10px}#portfolio .portfolio__contents__card__date{color:#aaa}#portfolio .portfolio__contents__card__date p{margin-bottom:5px}#portfolio .portfolio__contents__card__content p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#portfolio .portfolio__contents__card__quote{padding:0 10px;margin-bottom:15px;font-size:.9em;color:grey;border-left:3px solid #ccc}#portfolio .portfolio__contents__card-sub{flex:1 1;min-width:150px;margin-left:15px}#portfolio .portfolio__contents__card-sub p{text-align:right}#portfolio .portfolio__contents__card-sub i{margin-right:5px}.breadcrumb-list{padding:0 10px;overflow:hidden;color:#888;text-overflow:ellipsis;white-space:nowrap;list-style-type:none}@media screen and (max-width:767px){.breadcrumb-list{margin:20px 0 40px}}@media screen and (min-width:768px){.breadcrumb-list{margin:30px 0 80px}}.breadcrumb-list li{display:inline-block}.breadcrumb-list li:nth-child(n+2):before{display:inline-block;margin:auto 5px;content:"/"}.breadcrumb-list li a{color:#888;text-decoration:none;transition:.3s}.breadcrumb-list li a:hover{color:#ddd}@media screen and (max-width:767px){#chart-skill-percentage,#js-chart-learned-time{width:320px;margin:0 auto}}