﻿html,body{font-family:"Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;font-size:14px;line-height:1.8;letter-spacing:.8px;color:#333}@media screen and (max-width: 767px){html,body{font-size:13px;line-height:1.7}}a{transition:opacity .3s;text-decoration:none;color:#1ca9e3}img{max-width:100%;height:auto;vertical-align:bottom;border-style:none}ul,li{list-style:none}.pc-only{display:block}@media screen and (max-width: 767px){.pc-only{display:none}}.sp-only{display:none}@media screen and (max-width: 767px){.sp-only{display:block}}.wrapper{padding-top:45px}@media screen and (max-width: 767px){.wrapper{padding-top:20px}}.section{padding:90px 0}@media screen and (max-width: 767px){.section{padding:60px 0}}.section:nth-of-type(2n){background-color:#f7f7f7}.inner{max-width:1200px;margin:0 auto 0;padding:0 40px}@media screen and (max-width: 767px){.inner{max-width:90%;padding:0 20px}}.title{font-size:34px;font-weight:bold;line-height:1;margin-bottom:40px;text-align:center;letter-spacing:.05em;color:#333;opacity:0;transform:translateX(-20%);transition-timing-function:cubic-bezier(1, 0, 0, 1)}@media screen and (max-width: 767px){.title{font-size:26px;margin-bottom:20px}}.lead{margin-bottom:30px}.title.is-active{display:block;position:relative;opacity:1;transition:all 1.2s ease-out 0s;transform:translateX(0%);transition-timing-function:cubic-bezier(1, 0, 0, 1);width:100%;text-align:center;z-index:2}#header{position:fixed;width:100%;top:0;background-color:#222;z-index:99;line-height:2.5}@media screen and (max-width: 767px){#header{line-height:3}}#header .inner{display:flex;align-items:center;justify-content:space-between;padding:20px 40px}@media screen and (max-width: 767px){#header .inner{padding:15px}}#header #g-nav{position:relative;display:block;left:0;top:0;padding-top:0;width:auto;text-align:center;-webkit-transition:all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 200ms cubic-bezier(0.215, 0.61, 0.355, 1)}@media screen and (max-width: 767px){#header #g-nav{position:absolute;left:auto;right:-100%;top:60px;padding-top:0;width:100%;height:100vh;background-color:#383838;-webkit-transition:all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 500ms cubic-bezier(0.215, 0.61, 0.355, 1)}#header #g-nav.visible{right:0}}#header #g-nav ul{margin:0;padding:0}#header #g-nav li{position:relative;display:inline-block;margin-right:20px}@media screen and (max-width: 767px){#header #g-nav li{display:block;text-align:left;border-bottom:1px solid #fff;margin:0}}#header #g-nav li:last-child{margin-right:0}@media screen and (max-width: 767px){#header #g-nav li:last-child{margin:auto}}#header #g-nav li a{display:block}@media screen and (max-width: 767px){#header #g-nav li a{font-size:16px;margin:0 auto;width:90%}}.header-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 40px;height:60px}@media screen and (max-width: 767px){.header-inner{max-width:90%;padding:0px}}.header-inner a{color:#fff}.header-inner .logo{font-size:20px;font-weight:bold;line-height:1}@media screen and (max-width: 767px){.header-inner .logo{font-size:15px}}.header-inner .hamburger-button{display:none;position:absolute;top:18px;right:34px;width:25px;height:20px;cursor:pointer}@media screen and (max-width: 767px){.header-inner .hamburger-button{display:block;right:6.6%}}.header-inner .hamburger-button .bar{display:block;position:absolute;top:50%;left:0;width:25px;height:2px;background:#fff;-webkit-transition:.2s;transition:.2s}.header-inner .hamburger-button .bar::before,.header-inner .hamburger-button .bar::after{display:block;content:"";position:absolute;top:50%;left:0;width:25px;height:2px;background:#fff;-webkit-transition:.3s;transition:.3s}.header-inner .hamburger-button .bar::before{margin-top:-10px}.header-inner .hamburger-button .bar::after{margin-top:8px}.header-inner .hamburger-button.opened .bar{background-color:transparent}.header-inner .hamburger-button.opened .bar::before,.header-inner .hamburger-button.opened .bar::after{margin-top:-1px}.header-inner .hamburger-button.opened .bar::before{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.header-inner .hamburger-button.opened .bar::after{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.main-visual{display:flex;align-items:center;justify-content:center;height:85vh;text-align:center}@media screen and (max-width: 767px){.main-visual{height:75vh}}.main-visual-inner{padding:0 40px}@media screen and (max-width: 767px){.main-visual-inner{padding:0 20px}}.main-visual-title{font-size:60px;font-weight:bold;line-height:1.2;margin-bottom:5px;letter-spacing:.1em;opacity:0;transform:translateX(-30%);transition-timing-function:cubic-bezier(1, 0, 0, 1)}@media screen and (max-width: 767px){.main-visual-title{font-size:30px}}.main-visual-title.is-active{opacity:1;transition:all 1.2s ease-out 0s;transform:translateX(0%);transition-timing-function:cubic-bezier(1, 0, 0, 1);z-index:2}.main-visual-subtitle{font-size:20px;font-weight:bold;line-height:1;margin-bottom:40px;letter-spacing:.08em;opacity:0;transform:translateX(-30%);transition-timing-function:cubic-bezier(1, 0, 0, 1)}@media screen and (max-width: 767px){.main-visual-subtitle{font-size:16px;padding-bottom:20px}}.main-visual-subtitle.is-active{opacity:1;transition:all 1.8s ease-out 0s;transform:translateX(0%);transition-timing-function:cubic-bezier(1, 0, 0, 1);z-index:2}.main-visual-text{opacity:0;transform:translateY(30%);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.main-visual-text.is-active{opacity:1;transition:all 2.0s ease-out 0.5s;transform:translateY(0%);transition-timing-function:cubic-bezier(1, 0, 0, 1);z-index:2}.works-list{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:-40px}.works-item{width:30%;margin-bottom:40px;color:#333;opacity:0;transform:translateY(30%);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.works-item:hover{opacity:.9}@media screen and (max-width: 767px){.works-item{flex:0 0 48%;margin-right:0;margin-bottom:30px}}.works-item.is-active{opacity:1;transition:all 1.2s ease-out 0s;transform:translateY(0%);transition-timing-function:cubic-bezier(1, 0, 0, 1);z-index:2}.works-img{overflow:hidden;border:1px solid #e6e6e6}.works-img img{transform:scale(1, 1);transition:1s all}.works-img img:hover{transform:scale(1.2, 1.2);transition:1s all}.works-name{font-size:16px;font-weight:bold;margin:0}@media screen and (max-width: 767px){.works-name{font-size:10px;margin:0}}.works-info{font-size:14px;margin:0}.skill-list{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:-50px}@media screen and (max-width: 767px){.skill-list{display:block;margin-bottom:0}}.skill-item{display:flex;align-items:flex-start;justify-content:space-between;width:48%;margin-bottom:50px;opacity:0;transform:translateY(30%);transition-timing-function:cubic-bezier(1, 0, 0, 1)}@media screen and (max-width: 767px){.skill-item{width:100%;margin-bottom:35px}.skill-item:last-child{margin-bottom:0}}.skill-item.is-active{opacity:1;transition:all 1.2s ease-out 0s;transform:translateY(0%);transition-timing-function:cubic-bezier(1, 0, 0, 1);z-index:2}.skill-img{width:100px;height:auto;margin-right:20px}.skill-body{flex:1}.skill-name{margin-bottom:3px}.profile{display:flex;flex-wrap:wrap;max-width:800px;margin:0 auto;align-items:center}@media screen and (max-width: 767px){.profile{display:block}}.profile-img{width:20%;margin-right:30px;border-radius:50%}@media screen and (max-width: 767px){.profile-img{width:150px;margin:0 auto;margin-bottom:25px}}.profile-img img{border-radius:50%}.profile-body{flex:1}.profile-body p:not(:last-child){margin-bottom:30px}@media screen and (max-width: 767px){.profile-body p:not(:last-child){margin-bottom:20px}}.contact{text-align:center}.contact-item:not(:last-child){margin-right:10px}.contact-text{margin-top:10px}.pagetop{position:fixed;width:40px;right:3%;bottom:34px}#footer{padding:15px 0;background-color:#222}@media screen and (max-width: 767px){#footer{padding:20px 0}}.copyright{font-size:12px;text-align:center;color:#fff;margin:0}@media screen and (max-width: 767px){.copyright{font-size:14px}}.article{padding:80px 0}@media screen and (max-width: 767px){.article{padding:60px 0}}.article-inner{max-width:1040px;margin:0 auto;padding:0 20px}.article-title{margin-bottom:30px;text-align:center}.article-img{margin-bottom:20px}.article-img img{border:1px solid #000;display:block;margin:0 auto}.article-body{max-width:720px;margin:0 auto;margin-bottom:80px}.article-info-title{font-size:15px}.article-body img{margin-bottom:30px}.article-body p{margin-bottom:30px}.home-link{text-align:center}.home-link a{display:block;width:200px;margin:auto;color:#000;border:1px solid #000;padding:10px 0 15px}
