@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Lato&display=swap');

/*@import url(//db.onlinewebfonts.com/c/150ed9b2a009a71d2d819b5561167302?family=Segoe+UI+Symbol);
@font-face {
  font-family: "Segoe UI Symbol";
  src: url("//db.onlinewebfonts.com/t/150ed9b2a009a71d2d819b5561167302.eot");
  src: url("//db.onlinewebfonts.com/t/150ed9b2a009a71d2d819b5561167302.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/150ed9b2a009a71d2d819b5561167302.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/150ed9b2a009a71d2d819b5561167302.woff") format("woff"), url("//db.onlinewebfonts.com/t/150ed9b2a009a71d2d819b5561167302.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/150ed9b2a009a71d2d819b5561167302.svg#Segoe UI Symbol") format("svg");
}*/
* {
  margin: 0;
  padding: 0
}
a {
  text-decoration: none;
  transition: all .3s;
}
a:hover {
  color: #951B81;
}
ul, ol {
  list-style: none
}
img {
  width: auto;
  max-width: 100%;
}
html {
  font-family: "Lato", sans-serif;
  font-size: 10px;
  line-height: 1.8;
  color: #232323;
  font-weight: normal;
  display: flex;
}
/*header {
  padding: 0 2.4rem;
    }*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
/***header***/
.fix-header {
  background-color: #fff;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  position: fixed;
  z-index: 1000; /*　他のアイテムに対して最上位のレイヤーになるように */
  box-shadow: 2px 2px 10px #ccc;
  display: flex;
  align-items: center;
}
.fix-header-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
#fix-header-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
#fix-header-icon img {
  width: 33%;
  display: flex;
}
#wrapper nav { /*gnavi is open*/
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  padding-top: 50px;
  box-sizing: border-box;
  z-index: 2;
  background: #fff;
  border-left: thin solid #232323;
  display: flex;
  flex-direction: column;
}
#wrapper nav ul li {
  padding: 16px 28px;
  font-size: 1.7rem;
  /*font-family: "Futura PT", sans-serif;*/
  color: #232323;
  /*font-weight: 100;*/
}
#wrapper nav ul li.header_Work_category {
  padding: 8px 56px 15px;
}
#wrapper nav ul li a {
  color: #232323;
}
.langWrapper {
  display: flex;
  flex-direction: row;
}
.langWrapper .lang {
  display: flex;
  flex-direction: column;
  padding: 48px 0px 5px 0px;
  margin-left: 28px;
  line-height: 1;
}
.currentuk {
  border-bottom: 1px solid #951B81
}
.currentjp {
  border-bottom: 1px solid #951B81
}
#wrapper {
  display: flex;
}
.fix-header-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
#wrapper .btn-gnavi { /*gnavi is closed*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms
}
#wrapper .btn-gnavi span {
  width: 30px;
  height: 2px;
  background: #232323;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms
}
#wrapper .btn-gnavi.open {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}
#wrapper .btn-gnavi.open span {
  background: #232323
}
#wrapper .btn-gnavi.open span:nth-child(1) {
  width: 23px;
  -webkit-transform: translate(-5px, 19px) rotate(45deg);
  transform: translate(-5px, 19px) rotate(45deg)
}
#wrapper .btn-gnavi.open span:nth-child(3) {
  width: 23px;
  -webkit-transform: translate(-5px, -19px) rotate(-45deg);
  transform: translate(-5px, -19px) rotate(-45deg)
}
#wrapper_pc {
  display: none;
}
/***Common styles***/
h1 {
  margin: 240px auto 120px;
}
h2 {
  font-family: hello-my-love-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #951B81;
  font-size: 8.4rem; /* 84px */
  line-height: 1;
  margin-bottom: 28px;
  margin-top: 24px;
}
h3 {
	
  /*font-family: hello-my-love-pro,sans-serif;*/
  font-weight: 400;
  font-style: normal;
  /*color: #951B81;*/
  font-size: 3.4rem; /* 34px */
  line-height: 1;
  /*letter-spacing: .08rem;*/
  margin-bottom: 32px;
  /*margin-left: 16px;*/
}
/*h3::after {
  display: block;
  content: '';
  height: 1px;
  width: 36px;
  background: #666;
  margin: .3em 0;
}*/
h4 {
  font-size: 2.8rem;
  letter-spacing: .1rem;
  font-weight: bold;
  margin-bottom: 24px;
  line-height: 1.5;
}
main {
  font-size: 1.7rem;
  display: flex;
  flex-direction: column;
}
.container {
  width: 90%;
  margin: 0 auto;
}
section {
  padding-top: 78px;
  display: flex;
  flex-direction: column;
  margin-bottom: 64px;
}
.text {
  margin-bottom: 32px;
}
.text a {
  border-bottom: 1px solid #951B81;
  padding-bottom: 3px;
  cursor: pointer;
  color: #232323;
  transition: all .3s;
}
.text a:hover {
  color: #951B81;
}
a.purple-btn {
  background-color: #951B81;
  color: #fff;
  display: inline-block;
  line-height: 1.7;
  padding: 13px 40px 12px;
  border-radius: 5px;
  width: fit-content;
  border: 1px solid #951B81;
}
a.purple-btn:hover {
  background-color: transparent;
  color: #951B81;
  border: 1px solid #951B81;
}
.purple-btn-wrapper {
  margin-top: 24px;
}
/*.currentjp_text{
  font-family: 'Noto Sans JP', sans-serif;
  color: rgba(29,29,29);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
	}*/
.purple {
  color: #951B81;
}
@media (max-width : 767px) {
  .pc-only {
    display: none;
  }
  h1 {
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
  }
  h2 {
    font-size: 6.4rem; /* 64px */
  }
  h3 {
    /*font-size: 5rem; /* 50px */
    margin-left: 0;
  }
}
@media (min-width : 768px) {
  .mobile-only {
    display: none;
}
  h1{
	padding-left: 20px;
    padding-right: 20px;
	}
}
.fa-external-link-alt:before {
  margin: 0 0 0 10px;
  padding-top: 3px;
  font-size: 1.5rem;
  opacity: .7;
  vertical-align: sub;
}
#Websites {
  margin-bottom: 100px;
}
#Websites img {
  box-shadow: 5px 5px 18px #999;
}
#Websites_imageWrapper {
  margin-bottom: 32px;
}
#Websites_imageWrapper img {
  margin-right: 5%;
}
.Websites {
  background-color: #f1f1f1;
  padding: 32px 0px;
}
.Websites_image {
  margin-top: 1px;
  margin-bottom: 5%;
}
.Websites_image_center a {
  display: flex;
  justify-content: center;
}
.Websites_image a {
  display: flex;
  justify-content: space-between;
}
.Websites_image1 {
  width: 62%;
  height: fit-content;
}
.Websites_image2 {
  width: 34%;
  height: fit-content;
}
#Logos {
  margin-bottom: 100px;
}
.Logos {
  background-color: #f1f1f1;
  padding: 32px 0;
}
#Logos_takeoff_imageWrapper a {
  display: flex;
  margin-bottom: 32px;
  justify-content: space-between;
}
.Logos_takeoff_image {
  display: inline-flex;
  width: 48%;
  margin-bottom: 32px;
}
.Logos_takeoff_image img {
  box-shadow: 5px 5px 18px #999;
}
#Logos_takeoff_imageWrapper div:nth-child(2) img {
  border: 1px solid #f1f0f5;
  box-sizing: border-box;
}
#SocialMedia {
  margin-bottom: 100px;
}
.SocialMedia {
  background-color: #f1f1f1;
  padding: 32px 0;
}
#SocialMedia_PWC_imageWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.SocialMedia_PWC_image {
  margin: 0 0 5%;
}
#Banners {
  margin-bottom: 100px;
}
.Banners {
  background-color: #f1f1f1;
  padding: 32px 0;
}
#Banners_PWC_galleryWrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.Banners_PWC_gallery {
  display: flex;
  width: 100%;
  margin: 0 0 5%;
}
#Banners_kwiktapes_galleryWrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.Banners_kwiktapes_gallery {
  display: flex;
  width: 100%;
  margin: 0 0 5%;
}
#Banners_dmenu_galleryWrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.Banners_dmenu_gallery {
  display: flex;
  width: 48%;
  margin: 0 0 5%;
}
#Banners_PWC img {
  box-shadow: 5px 5px 18px #999;
  width: 100%;
}
#Banners_kwiktapes img {
  box-shadow: 5px 5px 18px #999;
  max-width: 100%;
}
#Banners_dmenu img {
  box-shadow: 5px 5px 18px #999;
  width: 100%;
}
.banners_sub_currentuk {
  font-size: 1.2rem;
  font-weight: 100
}
/*.banners_sub_currentjp {
  font-size: 1.2rem;
  font-weight: 400
}*/
.fadein {
  animation-name: fadein;
  animation-duration: 0.5s;
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(+100px); /* 下から表示 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.block.fadein {
  animation-name: fadein;
  animation-duration: 0.5s;
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(+100px); /* 下から表示 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*modal banners*/
.modal_banners_dmenu {
  font-size: 1.7rem;
  line-height: 1;
  display: flex;
  height: 420px;
  justify-content: center;
  align-items: center;
}
.modal_banners_wrapper {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 0;
  margin-left: 0;
}
.modal_banners_img {
  margin-bottom: 24px;
}
.modal_banners_img img {
  box-shadow: 5px 5px 18px #999;
  width: 100%;
}
.modal_banners_dmenu.currentjp_text {
  font-size: 1.5rem;
  font-weight: 300;
}
.modal_banners_dmenu span { /*For English*/
  color: #666;
  font-size: 1.4rem;
  line-height: 1.8
}
.modal_banners_dmenu.currentjp_text span { /*For Japanese*/
  line-height: 2;
}
/*modal banners end*/
section#Contact {
  margin-bottom: 240px;
}
#Contact a {
  border-bottom: 1px solid #951B81;
  font-weight: bold;
  font-size: 1.8rem;
}
footer {
  font-size: 1.7rem;
  padding: 1.5rem 0;
  background: #ddd;
}
#footercontents {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}
footer ul {
  display: flex;
}
footer ul li {
  margin-right: 1.3rem;
  margin-bottom: 1.3rem;
  font-size: 1.7rem
}
footer ul li a {
  color: #1f1f1f;
}
footer p {
  font-size: 1.5rem;
  color: #777
}
@media (min-width: 768px) {
  main {
    font-size: 1.8rem;
  }
  div.currentjp_text p {
    font-size: 1.5rem;
  }
  div.currentjp_text ul li {
    font-size: 1.5rem;
  }
  h1 img {
    max-width: 100%;
    max-height: 100%;
	  }
  
  /*.Websites:last-child {
    padding-bottom: 100px;
  }*/
  
  
  .SocialMedia_PWC_image {
    width: 48%;
  }
  
  .Banners_dmenu_gallery {
    /*width: 30%;*/
    margin: 0 0 10%;
}
  #Banners span.banners_sub_currentuk {
    font-size: 1.5rem;
    font-weight: 100
  }
  /*modal banners*/
  .modal_banners_dmenu {
    font-size: 1.8rem;
  }
  .modal_banners_wrapper {
    width: 58%;
  }
  .modal_banners_wrapper p span {
    font-size: 1.5rem;
    line-height: 2
  }
  /*modal banners end*/
  footer ul li {
    margin-right: 2rem;
  }
}
@media (min-width : 1024px) {
  #wrapper_pc nav ul li {
    font-size: 1.8rem
  }
  #wrapper {
    display: none;
  }
  #wrapper_pc {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  #wrapper_pc nav {
    display: flex;
  }
  #wrapper_pc ul {
    display: flex;
    align-items: center;
  }
  #wrapper_pc nav ul li {
    padding: 0 0 0 45px;
    display: flex;
    }
  #wrapper_pc a {
    color: #232323;
  }
  #wrapper_pc a:hover {
    color: #951B81;
  }
  #wrapper_pc .langWrapper {
    margin-left: 35px;
  }
  #wrapper_pc .lang {
    display: flex;
    align-items: center;
    padding: 5px 0px;
    margin-left: 11px;
    margin-bottom: 5px;
  }
  #header_pc_Work_category {
    display: none;
  }
  #header_pc_Work_category ul {
    position: absolute;
    margin-left: -85px;
    margin-top: 15px;
    background: #fff;
    padding: 6px 36px 18px 24px;
    opacity: 1;
    box-shadow: 2px 10px 10px #ccc;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all .3s;
    border-radius: 5px;
  }
  #wrapper_pc #header_pc_Work_category ul li {
    padding: 3px 0 3px;
    display: flex;
  }
  #header_pc_Work:hover + #header_pc_Work_category {
    display: flex;
  }
  #header_pc_Work_category:hover {
    display: flex;
  }
  main {
    font-size: 1.8rem;
    line-height: 1.8
  }
  .container {
    width: 93.75%;
    /*max-width: 960px;*/
  }
  /*div.currentjp_text p {
    font-size: 1.5rem;
  }
  div.currentjp_text ul li {
    font-size: 1.5rem;
  }*/
  h1 {
    margin: 250px auto 123px;
    max-width: 960px;
  }
  .left-box {
    width: 45%;
    padding-right: 5%;
    float: left;
  }
  #Websites .left-box h4 {
    /*margin-top: 32px;	*/
  }
  .Websites {
    /*padding: 80px;*/
	  padding: 60px 45px;
	  display: flex;
  }
  .website_text a {
    font-size: 1.7rem;
  }
  .Logos {
    /*padding: 80px 45px;*/
	  padding: 60px 45px;
	  display: flex;
  }
  #Logos_takeoff_imageWrapper {
    padding-bottom: 800px;
  }
  #Logos_takeoff_imageWrapper a {
    justify-content: flex-start;
  }
  .Logos_takeoff_image {
    width: auto;
    margin-right: 6%;
  }
  #Logos_takeoff_imageWrapper a div:nth-child(2) {
    margin-right: 0;
  }
  .SocialMedia {
    /*padding: 80px;*/
	  padding: 60px 45px;
	  display: flex;
  }
  #SocialMedia_PWC_imageWrapper {
    justify-content: space-around;
  }
  .SocialMedia_PWC_image {
    width: 45%;
  }
  .Banners {
    /*padding: 80px;*/
	  padding: 60px 45px;
	  display: flex;
  }
  .Banners_dmenu_gallery {
    /*width: 22%;*/
  }
  footer ul li {
    margin-right: 2rem;
  }
}
@media (min-width : 1825px) {
  .fix-header-contents {
    max-width: 80%;
    margin: 0 auto;
  }
  h1 {
    /*max-width: 60%;*/
    margin: 350px auto 240px;
  }
  .container {
    max-width: 80%;
  }
  .Websites_db_image a {
    justify-content: flex-start;
  }
  .Websites_image1 {
    width: 63%;
    height: fit-content;
    margin-right: 8%;
  }
  .Websites_image2 {
    width: 21%;
    height: fit-content;
    margin-right: 8%;
  }
  .Logos_takeoff_image {
    width: auto;
    margin-right: 3%;
  }
  #Logos_takeoff_imageWrapper {
    padding-bottom: 500px;
  }
  #Logos_takeoff_imageWrapper a div:nth-child(2) {
    margin-right: 0;
  }
  #SocialMedia_PWC_imagewrapper{
	justify-content: space-around;
	}
  .SocialMedia_PWC_image {
    width: 45%;
    margin-right: 5%;
    margin-bottom: 5%;
  }
  #footercontents {
    max-width: 80%;
  }
}
/*about page*/
#about_text img {
  height: 1.8rem;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 21%);
  vertical-align: sub;
}
#about_text {
  display: flex;
  margin-bottom: 48px;
}
#About h3 {
  /*margin-bottom: 24px;*/
}
#Certification {
  flex-direction: column;
  margin-bottom: 16px;
}
#Skills ul {
  display: flex;
  flex-direction: row;
  margin-bottom: 5px;
}
#Skills ul li {
  margin: 0.5rem 0.3rem
}
#Skills_row1 img {
  height: 6.5rem;
  width: 6.5rem;
  padding: 0 0.1rem
}
#Skills_row2 img {
  height: 5rem;
  width: 5rem;
  padding: 0 0.9rem
}
#Skills {
  margin-bottom: 32px;
}
/*cv page*/
#CV {
  display: flex;
}
#wrapper_cv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#cv_text {
  margin-top: 80px;
  font-size: 1.8rem;
}
/*#cv_text a{
	border-bottom: 1px solid #951B81;
}*/
header, footer {
  flex-shrink: 0;
}
main {
  flex: 1 0 auto;
  min-height: 1px; /*IE11 img resizing bug*/
}
@media (min-width : 768px) {}
@media (min-width : 1024px) {}
@media (min-width : 1825px) {}