@charset "UTF-8";
/*01, setting*/
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://use.typekit.net/oeb5yxz.css");
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,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, iframe {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 62.5%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*animation*/
@keyframes anm1 {
  0% {
    transform: scaleY(0);
    transform-origin: top center;
  }
  100% {
    transform: scaleY(1);
    transform-origin: top center;
  }
}
@keyframes anm2 {
  0% {
    transform: translate(0, -50%);
    transform-origin: left center;
  }
  100% {
    transform: translate(1.5rem, -50%);
    transform-origin: left center;
  }
}
@keyframes anm3 {
  0% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
  100% {
    transform: scale(1.05);
    transform-origin: 50% 50%;
  }
}
/*Color*/
/*black*/
/*white*/
/*thick blue*/
/*blue grad light*/
/*grey*/
/*grey2*/
/*Font*/
/*Font-E*/
/*Font-J*/
/*Common_space*/ /*Break_point*/
/*02, layout*/
html {
  font-size: 62.5%;
}
html body {
  font-size: 1em;
  font-family: "semplicitapro", sans-serif;
  font-weight: 400;
  overflow-x: hidden; /*画面外の余白削除*/
}
html body .english {
  font-family: "semplicitapro", sans-serif;
  font-weight: 500;
}

h1 {
  font: 600 calc(5rem + (1vw - 7.7px) * 3.9216) "semplicitapro", sans-serif;
}

h2 {
  font: 600 7.2rem "semplicitapro", sans-serif;
}

h3 {
  font: 400 5rem "semplicitapro", sans-serif;
}
@media screen and (max-width: 768px) {
  h3 {
    font-size: 3rem;
  }
}

/*common layout*/
.layout1 {
  padding: 0 4%;
}
@media screen and (max-width: 768px) {
  .layout1 {
    padding: 0;
  }
}

@media screen and (max-width: 768px) {
  .layout1sp {
    padding: 0 3%;
  }
}

/*03, module*/
/*Drawer*/
.drawer--right .drawer-hamburger {
  margin: 2rem 0.8rem 0 0;
  padding: 2rem 1rem;
  width: 4rem;
  display: none;
  background: rgba(255, 255, 255, 0.3);
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .drawer--right .drawer-hamburger {
    display: block;
  }
}
.drawer--right .drawer-hamburger::before {
  content: "MENU";
  font: bold 1.2rem "semplicitapro", sans-serif;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.drawer--right .drawer-hamburger::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px rgba(255, 255, 255, 0.2);
}
.drawer--right .drawer-hamburger-icon {
  background: #000000;
}
.drawer--right .drawer-hamburger-icon::before, .drawer--right .drawer-hamburger-icon::after {
  background: #000000;
}
.drawer--right.drawer-open .drawer-hamburger {
  background: none;
  position: absolute;
  right: 0.8rem;
}
.drawer--right.drawer-open .drawer-hamburger::before {
  content: "";
}
.drawer--right.drawer-open .drawer-hamburger-icon {
  background: transparent;
  position: absolute;
  width: 4rem;
  top: 24%;
}
.drawer--right.drawer-open .drawer-hamburger-icon::before, .drawer--right.drawer-open .drawer-hamburger-icon::after {
  background: #FFFFFF;
}
.drawer--right.drawer-open .drawer-hamburger-icon::before {
  transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
}
.drawer--right.drawer-open .drawer-hamburger-icon::after {
  transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
}
.drawer--right.drawer-open .drawer-hamburger-icon:hover::before, .drawer--right.drawer-open .drawer-hamburger-icon:hover::after {
  background: #FFFFFF;
}
.drawer--right.drawer-open .drawer-nav {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 3;
}
.drawer--right.drawer-open .drawer-nav ul {
  padding: 10rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drawer--right.drawer-open .drawer-nav ul li {
  padding: 0;
  text-decoration: none;
}
.drawer--right.drawer-open .drawer-nav ul li a {
  text-decoration: none;
  font: bold 3.6rem/2 "semplicitapro", sans-serif;
  color: #FFFFFF;
  transition: 0.4s ease-in-out;
}
.drawer--right.drawer-open .drawer-nav ul li a::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  background: #599DC0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: 0.4s ease-in-out;
}
.drawer--right.drawer-open .drawer-nav ul li a:hover {
  color: #599DC0;
}
.drawer--right.drawer-open .drawer-nav ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/*Main log&navi*/
.mainnavi {
  position: relative;
  height: 10rem;
}
.mainnavi-logo {
  position: absolute;
  top: 60%;
  left: 4%;
  transform: translate(0, -50%);
}
@media screen and (max-width: 768px) {
  .mainnavi-logo {
    left: 3%;
    top: 50%;
  }
}
.mainnavi-logo a {
  text-decoration: none;
}
.mainnavi-logo a:hover p {
  color: #599DC0;
}
.mainnavi-logo a:hover p::after {
  background: #599DC0;
}
.mainnavi-list {
  position: absolute;
  top: 50%;
  height: 100%;
  right: 4%;
  transform: translate(0, -50%);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .mainnavi-list {
    margin-right: 6rem;
    justify-content: center;
  }
}
.mainnavi-list-lang {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  .mainnavi-list-lang {
    margin-top: 0rem;
    margin-bottom: 1rem;
  }
}
.mainnavi-list-lang li {
  margin-left: 3rem;
}
@media screen and (max-width: 768px) {
  .mainnavi-list-lang li {
    margin-left: 1.5rem;
  }
}
.mainnavi-list-lang li a {
  text-decoration: none;
  color: #000000;
  font: 400 1.6rem "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 768px) {
  .mainnavi-list-lang li a {
    font-size: 1.4rem;
  }
}
.mainnavi-list-lang li a::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  background: #A4ABB0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: 0.4s ease-in-out;
}
.mainnavi-list-lang li a:hover {
  color: #A4ABB0;
}
.mainnavi-list-lang li a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom right;
}
.mainnavi-list nav {
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  .mainnavi-list nav {
    display: none;
  }
}
.mainnavi-list nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mainnavi-list nav ul li {
  margin-left: 4rem;
}
@media screen and (max-width: 768px) {
  .mainnavi-list nav ul li {
    margin-left: 0.5rem;
  }
}
.mainnavi-list nav ul li a {
  text-decoration: none;
  font: 500 2rem "semplicitapro", sans-serif;
  color: #000000;
  transition: 0.4s cubic-bezier(0.22, 0.57, 0.71, 0.55);
}
.mainnavi-list nav ul li::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  background: #599DC0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.5s ease-in-out;
}
.mainnavi-list nav ul li:hover a {
  text-decoration: none;
  color: #599DC0;
}
.mainnavi-list nav ul li:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
  background: #599DC0;
}

footer {
  padding: 3rem 4%;
  margin-top: 20rem;
  background: #2C334B;
}
@media screen and (max-width: 768px) {
  footer {
    margin-top: 10rem;
    padding: 1.5rem 3%;
  }
}
footer ul li {
  text-align: end;
  margin-bottom: 0.8rem;
}
footer ul li a {
  text-decoration: none;
}
footer ul li a p {
  display: inline-block;
  font: 400 1.8rem "Noto Sans JP", sans-serif;
  color: #FFFFFF;
  transition: 0.4s ease-in-out;
}
footer ul li a p::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  background: #599DC0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: 0.4s ease-in-out;
}
footer ul li a:hover p {
  color: #599DC0;
}
footer ul li a:hover p::after {
  transform: scaleX(1);
  transform-origin: bottom right;
}

.contact {
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.contact-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-title p {
  margin-top: 2rem;
  font: 400 1.8rem "Noto Sans JP", sans-serif;
}
.contact-title p br {
  display: none;
}
@media screen and (max-width: 768px) {
  .contact-title p br {
    display: block;
  }
}
.contact-form {
  margin-top: 5rem;
  width: 60%;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .contact-form {
    width: 100%;
  }
}
.contact-form ul li {
  margin-bottom: 2rem;
}
.contact-form ul li input {
  width: 100%;
  border: solid 0.2rem #000000;
  padding: 2rem 1rem;
  font: 400 2rem "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 768px) {
  .contact-form ul li input {
    box-sizing: border-box;
    width: 100%;
    border-width: 0.2rem;
  }
}
.contact-form ul li textarea {
  width: 100%;
  border: solid 0.2rem #000000;
  padding: 2rem 1rem;
  font: 400 2rem "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 768px) {
  .contact-form ul li textarea {
    box-sizing: border-box;
    width: 100%;
    border-width: 0.2rem;
  }
}
.contact-form-list-button {
  display: flex;
  justify-content: center;
}
.contact-form-list-button input {
  width: 40%;
  border: solid 0.2rem #000000;
  padding: 2rem 1rem;
  font: 600 2rem "Noto Sans JP", sans-serif;
  background: rgba(164, 171, 176, 0.1);
}
@media screen and (max-width: 768px) {
  .contact-form-list-button input {
    border-width: 0.2rem;
  }
}
.contact-form-list-button input:hover {
  cursor: pointer;
  animation: anm3 0.4s forwards;
}
.contact-subtext {
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-subtext p {
  font: 400 1.8rem "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 768px) {
  .contact-subtext p {
    font-size: 1.6rem;
  }
}

/*04, page*/
.TOPWIN {
  position: relative;
  height: 100vh;
}
.TOPWIN .Top {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.TOPWIN .Top-container {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.TOPWIN .Top-container-photo {
  overflow: hidden;
  width: 70%;
}
@media screen and (max-width: 768px) {
  .TOPWIN .Top-container-photo {
    width: 100%;
  }
}
.TOPWIN .Top-container-photo .img {
  width: 100%;
  height: 70vh;
  box-shadow: inset 0 0 5px 5px #FFFFFF;
}
@media screen and (max-width: 768px) {
  .TOPWIN .Top-container-photo .img {
    height: calc(100vh - 10rem);
  }
}
.TOPWIN .Top-container-photo-img1 {
  background: url(img/img1.JPG) no-repeat center center/cover;
}
.TOPWIN .Top-container-photo-img2 {
  background: url(img/img2.JPG) no-repeat center center/cover;
}
.TOPWIN .Top-container-photo-img3 {
  background: url(img/img3.JPG) no-repeat center center/cover;
}
.TOPWIN .Top-container-photo-img4 {
  background: url(img/img4.JPG) no-repeat center center/cover;
}
.TOPWIN .Top-container-text {
  position: absolute;
  top: 60%;
  left: 4%;
  color: #FFFFFF;
  -webkit-text-stroke: 1.5px #000000;
  text-stroke: 1.5px #000000;
}
@media screen and (max-width: 768px) {
  .TOPWIN .Top-container-text {
    top: 35%;
    transform: translate(0, -50%);
  }
}
.TOPWIN .Top-container-text h1 br {
  display: none;
}
@media screen and (max-width: 768px) {
  .TOPWIN .Top-container-text h1 br {
    display: block;
  }
}
.TOPWIN .Top-scroll {
  position: absolute;
  writing-mode: vertical-rl;
  bottom: 2%;
  left: 4%;
}
@media screen and (max-width: 768px) {
  .TOPWIN .Top-scroll {
    color: #FFFFFF;
  }
}
.TOPWIN .Top-scroll::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 0.2rem;
  height: 100%;
  background: #000000;
}
@media screen and (max-width: 768px) {
  .TOPWIN .Top-scroll::before {
    background: #FFFFFF;
  }
}
.TOPWIN .Top-scroll::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 0.4rem;
  height: 100%;
  background: #000000;
  animation: anm1 2s infinite;
}
@media screen and (max-width: 768px) {
  .TOPWIN .Top-scroll::after {
    background: #FFFFFF;
  }
}
.TOPWIN .Top-scroll p {
  font: 500 2rem "semplicitapro", sans-serif;
  padding: 2rem 0 2rem 1.5rem;
}

.About {
  margin-top: 15rem;
}
.About-container {
  padding: 0 4%;
}
@media screen and (max-width: 768px) {
  .About-container {
    margin-left: 0;
  }
}
.About-container h2 {
  color: #2C334B;
}
.About-container-box {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .About-container-box {
    flex-direction: column;
  }
}
.About-container-box dl {
  width: 100%;
  font: 500 2.8rem "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 768px) {
  .About-container-box dl {
    width: 100%;
  }
}
.About-container-box dl dt {
  margin-top: 6rem;
  display: inline-block;
  border-bottom: solid 0.1rem #000000;
}
.About-container-box dl dd {
  margin-top: 1rem;
  font-size: 2rem;
}
.About-container-box dl dd a {
  text-decoration: none;
  position: relative;
}
.About-container-box dl dd a span {
  color: #599DC0;
  transition: 0.4s ease-in-out;
}
.About-container-box dl dd a span::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background: #599DC0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: 0.4s ease-in-out;
}
.About-container-box dl dd a span:hover {
  opacity: 0.6;
}
.About-container-box dl dd a span:hover::after {
  transform: scaleX(1);
  transform-origin: bottom right;
}
@media screen and (max-width: 768px) {
  .About-container-box dl dd {
    font-size: 1.6rem;
  }
}
.About-container-box dl dd ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.About-container-box dl dd ul li {
  width: 30%;
  display: flex;
  margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
  .About-container-box dl dd ul li {
    width: 48%;
    flex-direction: column;
  }
}
.About-container-box dl dd ul li .skill-img {
  width: 5rem;
  height: 5rem;
}
.About-container-box dl dd ul li .skill-img img {
  width: 100%;
  height: auto;
}
.About-container-box dl dd ul li .skill-dictionary {
  margin-left: 1rem;
}
.About-container-box dl dd ul li .skill-dictionary dt {
  margin-top: 0;
  font-size: 2rem;
  border-bottom: none;
}
.About-container-box dl dd ul li .skill-dictionary dd {
  margin-top: 0.2rem;
  font: 400 1.6rem "Noto Sans JP", sans-serif;
}
.About-container-box dl dd ul li .skill-dictionary dd .star-rating {
  width: 8rem;
}
.About-container-box dl dd ul li .skill-dictionary dd .star-rating img {
  width: 100%;
  height: auto;
}
.About-container-box dl dd ul::after {
  content: "";
  display: block;
  width: 30%;
}
.About-container-box dl dd ul li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.Works {
  margin-top: 15rem;
  padding: 0 4%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .Works {
    margin-top: 10rem;
  }
}
.Works h2 {
  color: #2C334B;
  align-self: flex-end;
}
@media screen and (max-width: 768px) {
  .Works h2 {
    align-self: flex-start;
  }
}
.Works-coding {
  margin-top: 10rem;
}
.Works-coding-top {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .Works-coding-top {
    flex-direction: column;
  }
}
.Works-coding-top-title {
  width: 35%;
  margin-left: 3rem;
}
@media screen and (max-width: 768px) {
  .Works-coding-top-title {
    margin-left: 0;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .Works-coding-top-title h3 br {
    display: none;
  }
}
.Works-coding-top-title .common-glance a {
  display: inline-block;
  text-decoration: none;
  color: #000000;
}
.Works-coding-top-title .common-glance a p {
  font: 400 2.4rem "Noto Sans JP", sans-serif;
  display: inline-block;
  position: relative;
  transition: 0.3s ease-in-out;
}
.Works-coding-top-title .common-glance a p::after {
  content: "";
  display: inline-block;
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 50%;
  left: 100%;
  background: url(../../img/black-r-vec.svg) no-repeat center center/100%;
  transform: translate(0, -50%);
  transition: 0.3s ease-in-out infinite;
}
.Works-coding-top-title .common-glance a::after {
  content: "";
  display: block;
  width: 120%;
  height: 0.1rem;
  background: #599DC0;
  transform: scaleX(0);
  transform-origin: left bottom;
  transition: 0.3s ease-in-out;
}
.Works-coding-top-title .common-glance a:hover p {
  color: #599DC0;
}
.Works-coding-top-title .common-glance a:hover p::after {
  animation: anm2 0.3s ease-in-out;
  animation-iteration-count: 3;
  animation-delay: 0.3s;
}
.Works-coding-top-title .common-glance a:hover::after {
  transform: scaleX(1);
  transform-origin: right bottom;
}
.Works-coding-top-title .common-glance {
  margin-top: 3rem;
}
.Works-coding-top-ex1 {
  width: 65%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .Works-coding-top-ex1 {
    width: 100%;
    margin-top: 1rem;
  }
}
.Works-coding-top-ex1 a .effect-fade.effect-scroll {
  transition: 0.3s ease-in-out;
  overflow: hidden;
  position: relative;
}
.Works-coding-top-ex1 a .effect-fade.effect-scroll img {
  width: 100%;
  height: auto;
}
.Works-coding-top-ex1 a .effect-fade.effect-scroll:hover {
  opacity: 0.7;
}
.Works-coding-top-ex1 a .effect-fade.effect-scroll:hover img {
  animation: anm3 0.3s forwards;
}
.Works-coding-top-ex1 a .effect-fade.effect-scroll::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px #FFFFFF;
}
.Works-coding-top .effect-fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.5s;
}
.Works-coding-top .effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}
.Works-coding ul {
  margin-top: 5rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .Works-coding ul {
    flex-direction: column;
  }
}
.Works-coding ul li {
  width: 30%;
}
@media screen and (max-width: 768px) {
  .Works-coding ul li {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.Works-coding ul li a .effect-fade.effect-scroll {
  overflow: hidden;
  position: relative;
}
.Works-coding ul li a .effect-fade.effect-scroll img {
  width: 100%;
  height: auto;
}
.Works-coding ul li a .effect-fade.effect-scroll:hover {
  opacity: 0.7;
}
.Works-coding ul li a .effect-fade.effect-scroll:hover img {
  animation: anm3 0.3s forwards;
}
.Works-coding ul li a .effect-fade.effect-scroll::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px #FFFFFF;
}
.Works-coding ul .effect-fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.5s;
}
.Works-coding ul .effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}
.Works-photography, .Works-graphicdesign, .Works-webdesign {
  margin-top: 5rem;
}
.Works-photography-top, .Works-graphicdesign-top, .Works-webdesign-top {
  margin-top: 10rem;
  display: flex;
}
@media screen and (max-width: 768px) {
  .Works-photography-top, .Works-graphicdesign-top, .Works-webdesign-top {
    flex-direction: column;
  }
}
.Works-photography-top-title, .Works-graphicdesign-top-title, .Works-webdesign-top-title {
  width: 60rem;
  margin-left: 3rem;
}
@media screen and (max-width: 768px) {
  .Works-photography-top-title, .Works-graphicdesign-top-title, .Works-webdesign-top-title {
    width: 100%;
    margin-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .Works-photography-top-title h3 br, .Works-graphicdesign-top-title h3 br, .Works-webdesign-top-title h3 br {
    display: none;
  }
}
.Works-photography-top-title .common-glance a, .Works-graphicdesign-top-title .common-glance a, .Works-webdesign-top-title .common-glance a {
  display: inline-block;
  text-decoration: none;
  color: #000000;
}
.Works-photography-top-title .common-glance a p, .Works-graphicdesign-top-title .common-glance a p, .Works-webdesign-top-title .common-glance a p {
  font: 400 2.4rem "Noto Sans JP", sans-serif;
  display: inline-block;
  position: relative;
  transition: 0.3s ease-in-out;
}
.Works-photography-top-title .common-glance a p::after, .Works-graphicdesign-top-title .common-glance a p::after, .Works-webdesign-top-title .common-glance a p::after {
  content: "";
  display: inline-block;
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 50%;
  left: 100%;
  background: url(../../img/black-r-vec.svg) no-repeat center center/100%;
  transform: translate(0, -50%);
  transition: 0.3s ease-in-out infinite;
}
.Works-photography-top-title .common-glance a::after, .Works-graphicdesign-top-title .common-glance a::after, .Works-webdesign-top-title .common-glance a::after {
  content: "";
  display: block;
  width: 120%;
  height: 0.1rem;
  background: #599DC0;
  transform: scaleX(0);
  transform-origin: left bottom;
  transition: 0.3s ease-in-out;
}
.Works-photography-top-title .common-glance a:hover p, .Works-graphicdesign-top-title .common-glance a:hover p, .Works-webdesign-top-title .common-glance a:hover p {
  color: #599DC0;
}
.Works-photography-top-title .common-glance a:hover p::after, .Works-graphicdesign-top-title .common-glance a:hover p::after, .Works-webdesign-top-title .common-glance a:hover p::after {
  animation: anm2 0.3s ease-in-out;
  animation-iteration-count: 3;
  animation-delay: 0.3s;
}
.Works-photography-top-title .common-glance a:hover::after, .Works-graphicdesign-top-title .common-glance a:hover::after, .Works-webdesign-top-title .common-glance a:hover::after {
  transform: scaleX(1);
  transform-origin: right bottom;
}
.Works-photography-top-title .common-glance, .Works-graphicdesign-top-title .common-glance, .Works-webdesign-top-title .common-glance {
  margin-top: 3rem;
}
.Works-photography-top-ex1, .Works-graphicdesign-top-ex1, .Works-webdesign-top-ex1 {
  width: 100%;
  transition: 0.3s ease-in-out;
  position: relative;
}
.Works-photography-top-ex1 img, .Works-graphicdesign-top-ex1 img, .Works-webdesign-top-ex1 img {
  width: 100%;
  height: auto;
}
.Works-photography-top-ex1::after, .Works-graphicdesign-top-ex1::after, .Works-webdesign-top-ex1::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px #FFFFFF;
}
.Works-photography-top .effect-fade, .Works-graphicdesign-top .effect-fade, .Works-webdesign-top .effect-fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.5s;
}
.Works-photography-top .effect-fade.effect-scroll, .Works-graphicdesign-top .effect-fade.effect-scroll, .Works-webdesign-top .effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}
.Works-photography-second, .Works-graphicdesign-second, .Works-webdesign-second {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  background: rgba(164, 171, 176, 0.1);
}
@media screen and (max-width: 768px) {
  .Works-photography-second, .Works-graphicdesign-second, .Works-webdesign-second {
    flex-direction: column;
  }
}
.Works-photography-second li, .Works-graphicdesign-second li, .Works-webdesign-second li {
  width: 30%;
  padding: 2rem 3%;
}
@media screen and (max-width: 768px) {
  .Works-photography-second li, .Works-graphicdesign-second li, .Works-webdesign-second li {
    width: auto;
    margin-bottom: 2rem;
  }
}
.Works-photography-second li .imgcontainer, .Works-graphicdesign-second li .imgcontainer, .Works-webdesign-second li .imgcontainer {
  position: relative;
}
.Works-photography-second li .imgcontainer img, .Works-graphicdesign-second li .imgcontainer img, .Works-webdesign-second li .imgcontainer img {
  width: 100%;
  height: auto;
  position: relative;
}
.Works-photography-second li .imgcontainer::after, .Works-graphicdesign-second li .imgcontainer::after, .Works-webdesign-second li .imgcontainer::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px #FFFFFF;
}
@media screen and (max-width: 768px) {
  .Works-photography-second li:nth-of-type(3), .Works-graphicdesign-second li:nth-of-type(3), .Works-webdesign-second li:nth-of-type(3) {
    display: none;
  }
}
.Works-photography-second .effect-fade, .Works-graphicdesign-second .effect-fade, .Works-webdesign-second .effect-fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.5s;
}
.Works-photography-second .effect-fade.effect-scroll, .Works-graphicdesign-second .effect-fade.effect-scroll, .Works-webdesign-second .effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

.Works-graphicdesign-top {
  flex-direction: row;
}
@media screen and (max-width: 768px) {
  .Works-graphicdesign-top {
    flex-direction: column;
  }
}

.Works-webdesign-top {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .Works-webdesign-top {
    flex-direction: column;
  }
}

.Works-photography-top {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .Works-photography-top {
    flex-direction: column;
  }
}

.contactthanks h1 {
  margin-top: 10rem;
  color: #2C334B;
}
@media screen and (max-width: 768px) {
  .contactthanks h1 {
    font-size: 5.4rem;
  }
}
.contactthanks p {
  margin-top: 3rem;
  font: 400 2rem "Noto Sans JP", sans-serif;
  color: #2C334B;
}
@media screen and (max-width: 768px) {
  .contactthanks p {
    font-size: 1.8rem;
  }
}
.contactthanks .common-glance a {
  display: inline-block;
  text-decoration: none;
  color: #000000;
}
.contactthanks .common-glance a p {
  font: 400 2.4rem "Noto Sans JP", sans-serif;
  display: inline-block;
  position: relative;
  transition: 0.3s ease-in-out;
}
.contactthanks .common-glance a p::after {
  content: "";
  display: inline-block;
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 50%;
  left: 100%;
  background: url(../../img/black-r-vec.svg) no-repeat center center/100%;
  transform: translate(0, -50%);
  transition: 0.3s ease-in-out infinite;
}
.contactthanks .common-glance a::after {
  content: "";
  display: block;
  width: 120%;
  height: 0.1rem;
  background: #599DC0;
  transform: scaleX(0);
  transform-origin: left bottom;
  transition: 0.3s ease-in-out;
}
.contactthanks .common-glance a:hover p {
  color: #599DC0;
}
.contactthanks .common-glance a:hover p::after {
  animation: anm2 0.3s ease-in-out;
  animation-iteration-count: 3;
  animation-delay: 0.3s;
}
.contactthanks .common-glance a:hover::after {
  transform: scaleX(1);
  transform-origin: right bottom;
}
.contactthanks .common-glance {
  margin-top: 5rem;
}

.workspage {
  margin-top: 20rem;
}
@media screen and (max-width: 768px) {
  .workspage-title h2 {
    font-size: 5.4rem;
  }
}
.workspage-title p {
  margin-top: 10rem;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .workspage-title p {
    margin-top: 5rem;
  }
}
.workspage-portfolio {
  margin-top: 20rem;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .workspage-portfolio {
    flex-direction: column;
  }
}
.workspage-portfolio-text {
  width: 33%;
}
@media screen and (max-width: 768px) {
  .workspage-portfolio-text {
    width: 100%;
  }
}
.workspage-portfolio-text a {
  text-decoration: none;
}
.workspage-portfolio-text a h3 {
  font: bold calc(3rem + (1vw - 7.7px) * 3.9216) "Noto Sans JP", sans-serif;
  color: #000000;
  transition: 0.4s ease-in-out;
}
@media screen and (max-width: 768px) {
  .workspage-portfolio-text a h3 {
    font-size: 3rem;
  }
}
.workspage-portfolio-text a h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  background: #599DC0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: 0.4s ease-in-out;
}
.workspage-portfolio-text a h3:hover {
  color: #599DC0;
}
.workspage-portfolio-text a h3:hover::after {
  transform: scaleX(1);
  transform-origin: bottom right;
}
.workspage-portfolio-text p {
  margin-top: 3rem;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .workspage-portfolio-text p {
    margin-top: 1rem;
  }
}
.workspage-portfolio-img {
  width: 67%;
  margin-left: 3rem;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .workspage-portfolio-img {
    margin: 2rem 0 0 0;
    width: 100%;
  }
}
.workspage-portfolio-img a {
  position: relative;
}
.workspage-portfolio-img a img {
  width: 100%;
  height: auto;
}
.workspage-portfolio-img a:hover {
  opacity: 0.7;
}
.workspage-portfolio-img a:hover img {
  animation: anm3 0.3s forwards;
}
.workspage-portfolio-img a::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px #FFFFFF;
}
.workspage-graphicdesign, .workspage-webdesign, .workspage-webcoding {
  margin-top: 15rem;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign, .workspage-webdesign, .workspage-webcoding {
    margin-top: 10rem;
  }
}
.workspage-graphicdesign-top, .workspage-webdesign-top, .workspage-webcoding-top {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-top, .workspage-webdesign-top, .workspage-webcoding-top {
    flex-direction: column;
  }
}
.workspage-graphicdesign-top-text, .workspage-webdesign-top-text, .workspage-webcoding-top-text {
  width: 33%;
  margin-left: 3rem;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-top-text, .workspage-webdesign-top-text, .workspage-webcoding-top-text {
    width: 100%;
    margin-left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
.workspage-graphicdesign-top-text a, .workspage-webdesign-top-text a, .workspage-webcoding-top-text a {
  text-decoration: none;
  cursor: auto;
}
.workspage-graphicdesign-top-text a h3, .workspage-webdesign-top-text a h3, .workspage-webcoding-top-text a h3 {
  font: bold calc(3rem + (1vw - 7.7px) * 3.9216) "Noto Sans JP", sans-serif;
  color: #000000;
  transition: 0.4s ease-in-out;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-top-text a h3, .workspage-webdesign-top-text a h3, .workspage-webcoding-top-text a h3 {
    font-size: 3rem;
  }
}
.workspage-graphicdesign-top-text p, .workspage-webdesign-top-text p, .workspage-webcoding-top-text p {
  margin-top: 3rem;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-top-text p, .workspage-webdesign-top-text p, .workspage-webcoding-top-text p {
    margin-left: 2rem;
    margin-top: 1rem;
  }
}
.workspage-graphicdesign-top-img, .workspage-webdesign-top-img, .workspage-webcoding-top-img {
  width: 67%;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-top-img, .workspage-webdesign-top-img, .workspage-webcoding-top-img {
    width: 100%;
    margin-top: 4rem;
  }
}
.workspage-graphicdesign-top-img p, .workspage-webdesign-top-img p, .workspage-webcoding-top-img p {
  font-size: 2.4rem;
}
.workspage-graphicdesign-top-img a .effect-fade.effect-scroll, .workspage-webdesign-top-img a .effect-fade.effect-scroll, .workspage-webcoding-top-img a .effect-fade.effect-scroll {
  overflow: hidden;
  margin-top: 1rem;
}
.workspage-graphicdesign-top-img a .effect-fade.effect-scroll img, .workspage-webdesign-top-img a .effect-fade.effect-scroll img, .workspage-webcoding-top-img a .effect-fade.effect-scroll img {
  width: 100%;
  height: auto;
}
.workspage-graphicdesign-top-img a .effect-fade.effect-scroll:hover, .workspage-webdesign-top-img a .effect-fade.effect-scroll:hover, .workspage-webcoding-top-img a .effect-fade.effect-scroll:hover {
  opacity: 0.7;
}
.workspage-graphicdesign-top-img a .effect-fade.effect-scroll:hover img, .workspage-webdesign-top-img a .effect-fade.effect-scroll:hover img, .workspage-webcoding-top-img a .effect-fade.effect-scroll:hover img {
  animation: anm3 0.3s forwards;
}
.workspage-graphicdesign-top-img a .effect-fade.effect-scroll::after, .workspage-webdesign-top-img a .effect-fade.effect-scroll::after, .workspage-webcoding-top-img a .effect-fade.effect-scroll::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px #FFFFFF;
}
.workspage-graphicdesign-top-img a .effect-fade, .workspage-webdesign-top-img a .effect-fade, .workspage-webcoding-top-img a .effect-fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.5s;
}
.workspage-graphicdesign-top-img a .effect-fade.effect-scroll, .workspage-webdesign-top-img a .effect-fade.effect-scroll, .workspage-webcoding-top-img a .effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}
.workspage-graphicdesign-container, .workspage-webdesign-container, .workspage-webcoding-container {
  margin: 5rem 0 15rem;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-container, .workspage-webdesign-container, .workspage-webcoding-container {
    margin: 3rem 0 8rem;
  }
}
.workspage-graphicdesign-container p, .workspage-webdesign-container p, .workspage-webcoding-container p {
  font-size: 2.4rem;
}
.workspage-graphicdesign-container ul, .workspage-webdesign-container ul, .workspage-webcoding-container ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-container ul, .workspage-webdesign-container ul, .workspage-webcoding-container ul {
    flex-direction: column-reverse;
  }
}
.workspage-graphicdesign-container ul li, .workspage-webdesign-container ul li, .workspage-webcoding-container ul li {
  width: 31%;
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-container ul li, .workspage-webdesign-container ul li, .workspage-webcoding-container ul li {
    width: 100%;
  }
}
.workspage-graphicdesign-container ul li a .effect-fade.effect-scroll, .workspage-webdesign-container ul li a .effect-fade.effect-scroll, .workspage-webcoding-container ul li a .effect-fade.effect-scroll {
  overflow: hidden;
}
.workspage-graphicdesign-container ul li a .effect-fade.effect-scroll img, .workspage-webdesign-container ul li a .effect-fade.effect-scroll img, .workspage-webcoding-container ul li a .effect-fade.effect-scroll img {
  width: 100%;
  height: auto;
}
.workspage-graphicdesign-container ul li a .effect-fade.effect-scroll:hover, .workspage-webdesign-container ul li a .effect-fade.effect-scroll:hover, .workspage-webcoding-container ul li a .effect-fade.effect-scroll:hover {
  opacity: 0.7;
}
.workspage-graphicdesign-container ul li a .effect-fade.effect-scroll:hover img, .workspage-webdesign-container ul li a .effect-fade.effect-scroll:hover img, .workspage-webcoding-container ul li a .effect-fade.effect-scroll:hover img {
  animation: anm3 0.3s forwards;
}
.workspage-graphicdesign-container ul li a .effect-fade.effect-scroll::after, .workspage-webdesign-container ul li a .effect-fade.effect-scroll::after, .workspage-webcoding-container ul li a .effect-fade.effect-scroll::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px #FFFFFF;
}
.workspage-graphicdesign-container ul li a .effect-fade, .workspage-webdesign-container ul li a .effect-fade, .workspage-webcoding-container ul li a .effect-fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.5s;
}
.workspage-graphicdesign-container ul li a .effect-fade.effect-scroll, .workspage-webdesign-container ul li a .effect-fade.effect-scroll, .workspage-webcoding-container ul li a .effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

.workspage-graphicdesign-top {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .workspage-graphicdesign-top {
    flex-direction: column;
  }
}

.workspage-webdesign-top {
  flex-direction: row;
}
@media screen and (max-width: 768px) {
  .workspage-webdesign-top {
    flex-direction: column;
  }
}

.workspage-webcoding-top {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .workspage-webcoding-top {
    flex-direction: column;
  }
}

.photopage {
  margin: 20rem 0 15rem;
}
@media screen and (max-width: 768px) {
  .photopage-title h2 {
    font-size: calc(3.6rem + (1vw - 3.75px) * 9.1603);
  }
}
.photopage-title p {
  margin-top: 10rem;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .photopage-title p {
    margin-top: 5rem;
  }
}
.photopage-imgs {
  margin-top: 20rem;
}
@media screen and (max-width: 768px) {
  .photopage-imgs {
    margin-top: 15rem;
  }
}
.photopage-imgs ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.photopage-imgs ul li:nth-of-type(4n+1), .photopage-imgs ul li:nth-of-type(4n+4) {
  width: 67.5%;
}
@media screen and (max-width: 768px) {
  .photopage-imgs ul li:nth-of-type(4n+1), .photopage-imgs ul li:nth-of-type(4n+4) {
    width: 100%;
  }
}
.photopage-imgs ul li:nth-of-type(4n+2), .photopage-imgs ul li:nth-of-type(4n+3) {
  width: 30%;
}
@media screen and (max-width: 768px) {
  .photopage-imgs ul li:nth-of-type(4n+2), .photopage-imgs ul li:nth-of-type(4n+3) {
    width: 100%;
  }
}
.photopage-imgs ul li:nth-of-type(2n+11), .photopage-imgs ul li:nth-of-type(2n+12) {
  width: 48.75%;
}
@media screen and (max-width: 768px) {
  .photopage-imgs ul li:nth-of-type(2n+11), .photopage-imgs ul li:nth-of-type(2n+12) {
    width: 100%;
  }
}
.photopage-imgs ul li:nth-of-type(2n+17) {
  width: 42%;
}
@media screen and (max-width: 768px) {
  .photopage-imgs ul li:nth-of-type(2n+17) {
    width: 100%;
  }
}
.photopage-imgs ul li:nth-of-type(2n+18) {
  width: 55%;
}
@media screen and (max-width: 768px) {
  .photopage-imgs ul li:nth-of-type(2n+18) {
    width: 100%;
  }
}
.photopage-imgs ul li:nth-of-type(19) {
  width: 60%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .photopage-imgs ul li:nth-of-type(19) {
    width: 100%;
  }
}
.photopage-imgs ul li {
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 768px) {
  .photopage-imgs ul li {
    margin-bottom: 1rem;
  }
}
.photopage-imgs ul li .photolist {
  position: relative;
}
.photopage-imgs ul li .photolist img {
  width: 100%;
  height: auto;
}
.photopage-imgs ul li .photolist::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 3px 3px #FFFFFF;
}
.photopage-imgs ul .effect-fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.5s;
}
.photopage-imgs ul .effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

.Privacy h3 {
  margin-top: 5rem;
  font: 500 2rem "Noto Sans JP", sans-serif;
}
.Privacy dl {
  margin-top: 3rem;
  font: 400 1.6rem "Noto Sans JP", sans-serif;
}
.Privacy dl dt {
  display: inline-block;
  font-weight: bold;
  border-bottom: solid 0.1rem #000000;
}
.Privacy dl dt:nth-of-type(n + 2) {
  margin-top: 2rem;
}/*# sourceMappingURL=style.css.map */