@charset "UTF-8";
/* CSS Document */
/* ========================================
    共通クラス
========================================= */
html {font-size: 62.5%;}
body {
  padding: 0;
  margin: 0;
  color: #43474B;
  font-size: 1.4rem;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  box-sizing: border-box;
  /*line-height: 170%;*/
}
*, *:before, *:after {
  -webgit-box-sizing: border-box;
  box-sizing: border-box
}
.maincontents {
  width: 95%;
  max-width: 1290px;
  margin: 0 auto;
  position: relative;
  padding: 8rem 0;
  line-height: 180%;
}
.maincontents .wrap{text-align: center;margin: 0 0 3rem 0;}
.maincontents .subtext_wrap{margin-bottom: 3rem;padding-left: 2rem;}
.maincontents .subtext_wrap h3{font-size: 3rem;font-family: 'Mitr', sans-serif;margin-bottom: 1rem;}
.maincontents .subtext_wrap h3 span {font-size: 1.6rem;padding-left: 2rem;}
.animated {animation-delay: 0.2s;animation-duration: 1s;animation-timing-function: ease;}
h2.commonttl {
  font-family: 'Mitr', sans-serif;
  font-size:3.4rem;
  position: relative;
  display: inline-block;
  padding: 0 55px;
}
h2.commonttl:before, h2.commonttl:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

h2.commonttl:before {left:0;}
h2.commonttl:after {right: 0;}
/* ========================================
header
========================================= */
#header {width: 100%;height: 0;position: relative;z-index: 100;}
#header .nav-pc {
  opacity: 1;
  width: 100%;
  height: auto;
  transition: 0.3s all;
  margin: 0 auto;
  padding-top: 1.5rem;
}
#header .scrolled {
  /*opacity: 1;*/
  position: fixed;
  z-index: 3;
  width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  padding: 3rem 0;
  transition: 0.3s all;
}
.nav-pc ul {display: flex;list-style: none;flex-wrap: wrap;justify-content: center;}
.nav-pc ul li {padding: 0 2rem;}
.nav-pc ul li a {
  text-decoration: none;
  color: #333333;
  position: relative;
  font-size: 2rem;
  font-family: 'Mitr', sans-serif;
}
.nav-pc ul li a:hover::before {width: 100%;}
.nav-pc ul li a::before {
  content: "";
  width: 0;
  height: 1px;
  background: #333333;
  display: block;
  position: absolute;
  top: calc(100% + -3px);
  left: 50%;
  -webgit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: .3s;
}
.nav-sp {max-width: 500px;width: 100%;overflow: hidden; height: 0;}
.nav-sp ul li a{font-family: 'Mitr', sans-serif;}
.hamburger {display: none;}
/* ========================================
mainvisual
========================================= */
.main_visual{
  height: 700px;
  background: url("../images/mainvisual_24img.png")no-repeat right;
  background-size: cover;
  position: relative;
}
.main_visual .mainky {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
    text-align: center;
}
.main_visual .scrolldown {position: absolute;bottom: 10px;right: 50%;animation: mousemove 1.6s ease-in-out infinite;}
/*下からの距離が変化して上から下に動く*/
@keyframes mousemove {
  0% {bottom: 10px;}
  50% {bottom: 5px;}
  100% {bottom: 10px;}}
.scrolldown span {
  /*描画位置*/
  position: absolute;
  left: -15px;
  bottom: 45px;
  /*テキストの形状*/
  color: #333333;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}

/*マウスの中の線描写 */
.scrolldown span::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: 10px;
  left: 17px;
  /*線の形状*/
  width: 1px;
  height: 15px;
  background: #333333;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: mousepathmove 1.4s linear infinite;
  opacity: 0;
}

/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove {
  0% {height: 0;top: 10px;opacity: 0;}
  50% {height: 15px;opacity: 1;}
  100% {height: 0;top: 30px;opacity: 0;}
}

.scrolldown:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -10px;
  /*マウスの形状*/
  width: 25px;
  height: 37px;
  border-radius: 10px;
  border: 2px solid #333333;
}

.scrolldown:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 26px;
  left: 0;
  /*丸の形状*/
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 2px solid #333333;
}
.main_visual div h2{font-size: 10rem;font-family: 'Mitr', sans-serif;}
.main_visual div h2 span{margin: 0 2rem;}
.main_visual div p{font-size:1.6rem;line-height: 180%;}


/* ========================================
works
========================================= */
.works-area .item-box {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 5rem;
  background: #f7f7f7;
  padding: 4% 4% 0 4%;
}
.works-area .item-box::after {content: '';width: calc(100% / 3 - 40px);display: block;}
.works-area .item-box .item {width: 31%;margin-bottom: 6%;position: relative;}
.works-area .item-box .item .wrapimg {
  content: "";
  position: relative;
  overflow: hidden;
  padding-top: 82.5%
}
.works-area .item-box .item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.works-area .item-box .motion {-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
.works-area .item-box .motion:hover {-webkit-transform: rotate(-2deg);transform: rotate(-2deg);}
.works-area .item-box .item .date,.works-area .item-box .item .item-position{color:#8c8c8c;word-break: break-all;}
.item-ttl {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 10px 0;
  line-height: 20px;
  border-top: 1px solid #dcdcdc;
  padding-top: 12px;
}
.item a {
  text-decoration: underline; 
  display: block;
  color:#959393;
  text-align: right;
  margin-top: 8px;
}
.item-ttl .tag{
  font-size: 1.1rem;
  padding: 1px 5px;
  position: absolute;
  top: 0;
  left: 0; 
}
.item-ttl .type1 {background: #7b7b7b;color: #fff;}
.item-ttl .type2 {background: #fff;color: #7b7b7b;border: 1px solid #7b7b7b}
.design-content{background: url(../images/alphabet_bg01.png)no-repeat top left;padding-top: 4rem;}
.illust-content{background: url("../images/alphabet_bg02.png")no-repeat top left;padding-top: 4rem;}
.direction-content{background: url("../images/alphabet_bg03.png")no-repeat top left;padding-top: 4rem;}

/* ========================================
Profile
========================================= */
.profilebox{background: url("../images/alphabet_bg04.png")no-repeat top center;padding-top: 5rem;}
.pr_2column {display: flex;max-width: 920px;margin:0 auto;margin-bottom: 3rem;}
.pr_2column .img{width:45%;}
.pr_2column .img img{max-width: 350px;}
.pr_2column .text{width: 50%;}
.pr_2column .text  p{margin-bottom: 2rem;}
.pr_2column .name{font-size:2.8rem;font-family: 'Mitr', sans-serif;margin-bottom: 2rem;}
.profilebox .textbox{max-width: 1100px;margin: 0 auto;margin-bottom: 4rem;}
.profilebox .textbox span{font-size: 2rem;font-weight: bold;display: block;margin-bottom: 1rem;}
.profilebox .textbox ul{display: flex;flex-wrap: wrap;}
.profilebox .textbox ul li{width: 40%; margin: 0 10rem 3rem 0;}
.profilebox .textbox ul li span{font-size: 1.8rem;}
.profilebox .textbox ul.handling-list {margin-left: 2rem;}
.profilebox .textbox ul.handling-list li {margin: .3rem 1rem;; list-style: disc;} 
.graph{
  max-width: 600px;
  width: 100%;
  margin:1rem 0;
  color: #fff;
  padding: 0.25em;
  animation: bar-animation 1 2s;
  background:#b4b3b3;
}

.bar01{max-width: 80%;}
.bar02{max-width: 70%;}
.bar03{ max-width: 60%;}
.bar04{max-width: 50%;}
.bar05{max-width: 30%;}

@keyframes bar-animation{
  0%{width: 0px; }
  100%{width: 100%;}
}
/* ========================================
   Contact
========================================= */
.contact {background: url("../images/alphabet_bg05.png")no-repeat top center;padding-top: 5rem;}
.contact-box {margin-top: 5rem;}
.contact-box .wraptext {margin: 5rem 0 0;text-align: center;}
/* ========================================
  footer
========================================= */
#footer {background: #D9D9D9; height: auto;padding: 3rem 0;}
#footer span {display: block;text-align: center;font-size: 1.2rem;}

/* ========================================
下層ページテンプレ
========================================= */
.se_maincontents{
    max-width: 980px;
    margin: 0 auto;
    padding: 15rem 0;
    width: 95%;
}
.se_maincontents h2.article_title {
    font-size: 3rem;
    text-align: center;
    padding: 2.5rem;
    background: url(../images/alphabet_bg01.png)no-repeat top center;
    background-size: contain;
}
.se_maincontents h2.direction{background: url(../images/alphabet_bg03.png)no-repeat top center;background-size: contain;}
.se_maincontents h2.article_title span{
    display: block;
    font-weight: normal;
    font-size: 1.5rem;
    color: #43474B;
    margin-bottom: 1rem;
    word-break: break-word;
}
.se_maincontents h2.article_title span.article_url a{font-size: 1.4rem;color: #5F6871;text-decoration: none;
}
.se_maincontents .articleimg_1{margin-bottom: 1rem;}
.se_maincontents img {max-width: 100%;height: auto;}
.article_text{line-height: 1.8;}
.article_text .part{font-size: 1.6rem; font-weight: bold;margin-bottom: 2rem;}
.article_text ul.skill_icon{
    display: flex;
    justify-content: flex-start;
    margin: 3rem 0;
}
.article_text ul.skill_icon li{margin-right: 1rem;}
.article_text ul.skill_icon li:last-child{margin-right: 0;}
.article_text ul.skill_icon li img{width:60px;}
.article_text  .concept {margin-bottom: 3rem;}
.se_maincontents .articleimg_2,.se_maincontents .home_link{margin-top: 7rem ;}
.se_maincontents .articleimg_2 ul{display: flex; justify-content: center;}
.se_maincontents .articleimg_2 ul li{width: 47%;text-align: center;margin-right: 5%;}
.se_maincontents .articleimg_2 ul li:last-child{margin-right: 0;}
.se_maincontents .home_link a{
    color: #43474B;
    font-size: 1.8rem;
    display: block;
    text-align: center;}

/* ========================================
   SP・TB：860pxまで調整用
========================================= */
@media screen and (min-width: 1px) and (max-width:896px) {
    #header .nav-pc{display: none;}
    .main_visual{height: 540px;background: url("../images/mainvisual_24img_sp.png")no-repeat right;background-size: contain;}
    .main_visual .mainky{    
    position: absolute;
    top: 30px;
    left: 2.5rem;
    transform: inherit;
    text-align: left;
    width: 80%;
    }
    .main_visual div h2{font-size: 7rem;line-height: 1.1;margin-bottom: 3rem;}
    .main_visual div h2 span{display: block;}
    .main_visual div p{font-size: 1.4rem;}
    .maincontents{padding: 3rem 0;}
    .maincontents .subtext_wrap h3 span {display: block;padding-left: 0;}
    .works-area .item-box .item{width: 45%;}
    .design-content{background: url(../images/alphabet_bg01_sp.png)no-repeat top center;background-size: contain;}
    .illust-content {background: url(../images/alphabet_bg02_sp.png)no-repeat top center;background-size: contain;}
    .direction-content {background: url(../images/alphabet_bg03_sp.png)no-repeat top center;background-size:contain;}
	#profile-content{padding: 0 3%;}
    .profilebox {background: url(../images/alphabet_bg04_sp.png)no-repeat top center;background-size:contain;padding-top: 3rem;}
    .contact {background: url(../images/alphabet_bg05_sp.png)no-repeat top center;background-size: contain;padding-top: 2rem;padding: 0 3%;}
    .pr_2column{display: block;}
    .pr_2column .img,.pr_2column .text{width: 100%;}
    .pr_2column .img img{max-width: 80%; display: block; margin: 0 auto;}
    .profilebox .textbox ul li{width: 100%; margin: 0 0 3rem 0;}
    /*下層ページテンプレ*/
    .se_maincontents{padding: 7rem 0;}
    .se_maincontents h2.article_title{font-size: 2.4rem;}
    .se_maincontents .articleimg_2 ul li:first-child{margin-bottom: 5rem;}
        
}