@charset "UTF-8";
#header_wrap_under {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 20; }

.header {
  display: flex;
  justify-content: space-between; }
  .header > #under_logo {
    width: 20%;
    padding: 1.6rem 0; }
    .header > #under_logo > img {
      width: 50%; }

.global-nav {
  width: 80%; 
}

.global-nav__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 77px; }

.global-nav__item {
  width: 15%;
  text-align: right; }

@media (max-width: 765px) {
  .header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    z-index: 999;
    background: #fff; }
    .header > #under_logo {
      padding: 1rem 0; }
      .header > #under_logo > img {
        width: 80% !important; }

  .global-nav {
    position: fixed;
    right: -320px;
    /* これで隠れる */
    top: 0;
    width: 300px;
    /* スマホに収まるくらい */
    height: 100vh;
    padding-top: 40px;
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto;
    /* メニューが多くなったらスクロールできるように */ }

  .hamburger {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    /* クリックしやすいようにちゃんと幅を指定する */
    height: 50px;
    /* クリックしやすいようにちゃんと高さを指定する */
    cursor: pointer;
    z-index: 300; }

  .global-nav__list {
    display: block !important;
    margin: 0;
    padding: 0;
    list-style: none; }

  .global-nav__item {
    width: 100% !important;
    text-align: center !important;
    padding: 0 14px; }
    .global-nav__item a {
      display: block;
      width: 100%;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
      text-decoration: none;
      color: #111; }
      .global-nav__item a:hover {
        background-color: #eee; }

  .hamburger__line {
    position: absolute;
    left: 0;
    width: 28px;
    height: 1px;
    background-color: #111;
    transition: all .6s; }

  .hamburger__line--1 {
    top: 14px; }

  .hamburger__line--2 {
    top: 22px; }

  .hamburger__line--3 {
    top: 30px; }

  .black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer; }

  /* 表示された時用のCSS */
  .nav-open .global-nav {
    right: 0; }
  .nav-open .black-bg {
    opacity: .8;
    visibility: visible; }
  .nav-open .hamburger__line--1 {
    transform: rotate(45deg);
    top: 20px; }
  .nav-open .hamburger__line--2 {
    width: 0;
    left: 50%; }
  .nav-open .hamburger__line--3 {
    transform: rotate(-45deg);
    top: 20px; } }
/*-------header------------*/
#header_wrap {
  background-image: url("../img/header_bk.png");
  background-size: cover;
  background-position: center center;
  height: 100vh;
  width: 100%; }

#top_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90vh; }

.header-box, .header-row {
  height: 100vh; }

@media (max-width: 765px) {
  #header_wrap {
    height: 100vh; }

  #top_logo > img {
    width: 60%; }

  nav {
    text-align: center; }
    nav ul li {
      flex: 1; } }
/*-------nav------------*/
.global-nav.top-nav {
  width: 50%;
  margin-left: auto; }
  .global-nav.top-nav ul {
    display: flex;
    justify-content: space-between;
    width: 100%; }
    .global-nav.top-nav ul li a {
      display: block;
      color: #333;
      font-size: 1.8rem;
      position: relative;
      text-align: center; }
      .global-nav.top-nav ul li a::before {
        content: '';
        position: absolute;
        display: inline-block;
        bottom: -.5rem;
        right: 0;
        left: auto;
        height: .1rem;
        width: 0;
        background: black;
        transition: all .3s ease; }
      .global-nav.top-nav ul li a:hover {
        opacity: 1; }
        .global-nav.top-nav ul li a:hover::before {
          left: 0;
          width: 100%; }

#footer-menu ul li a, .header ul li a {
  color: #333;
  font-size: 1.8rem; }

nav ul li a:hover {
  color: #333;
  text-decoration: none; }

@media (max-width: 765px) {
  .header-nav {
    width: 100%; }

  ul {
    justify-content: center; } }
/*
 Share Style [
----------------------------------------------------------- */
* {
  margin: 0;
  padding: 0; }

body {
  font-family: Arial,"メイリオ";
  line-height: 1.7; }

html {
  overflow-y: scroll; }

p, li, dt, dl {
  line-height: 1.7;
  color: #4d4d4d;
  font-size: 1.6rem; }

p {
  margin: 0 0 1rem 0; }

li {
  list-style-type: none; }

img {
  border: 0; }

.img_100 {
  display: block;
  width: 100%;
  margin-bottom: 3.2em; }

a {
  text-decoration: none; }

section {
  margin: 4.2em 0 7em 0;
  text-align: center; }

.text_l {
  text-align: left; }

.text_c {
  text-align: center; }

.mb_010em {
  margin-bottom: 1em; }

.mb_016em {
  margin-bottom: 1.6em; }

.mb_032em {
  margin-bottom: 3.2em; }

@media (max-width: 765px) {
  section {
    margin: 2.8em 0; }

  #footer_wrap > #copyright {
    text-align: center; } }
main {
  min-height: calc(100vh - 78px - 45px); }

/*-------About------------*/
.limg_rtext {
  display: flex;
  justify-content: space-between; }

.limg {
  width: 40%;
  margin-bottom: 1.6em; }
  .limg > img {
    width: 100%; }

.rtext {
  width: 60%;
  padding: 0 1.6em;
  text-align: left;
  line-height: 1.8;
  font-size: 1.1em; }

@media (max-width: 765px) {
  .limg_rtext {
    display: block; }

  .limg, .rtext {
    width: 100%; } }
/*-------skill------------*/
h2 {
  font-size: 3.2em;
  font-weight: lighter;
  border-bottom: #A7A4A4 solid 1px;
  padding-bottom: 0.6em;
  margin-bottom: 1.6em;
  letter-spacing: 0.6em; }

.three-box_wrap {
  display: flex;
  justify-content: space-between; }

.three-box {
  flex: 1;
  padding: 1.6em; }

.box-title {
  letter-spacing: 0.3em;
  font-size: 1.6em; }

.box_text {
  text-align: left;
  margin: 1.6em 0;
  font-size: 1.6rem; }

.box_note {
  font-size: 1.2;
  letter-spacing: 0.2em;
  color: #7B7878; }

@media (max-width: 765px) {
  h2 {
    font-size: 2.6em; }

  .three-box_wrap {
    display: block; }

  .box_text {
    height: auto; } }
/*-------work------------*/
.two-box_wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }

.two-box {
  display: block;
  width: 50%;
  height: auto;
  padding: 1.6em;
  margin-bottom: 1.6em;
  color: #333;
  letter-spacing: 0.2em; }
  .two-box:last-child {
    margin-right: auto; }
  .two-box:hover {
    color: #474747;
    text-decoration: none; }

.two-box_img {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: #DBD9D9 1px solid;
  margin-bottom: 1em; }
  .two-box_img > img {
    width: 100%;
    height: auto;
    transition: transform 0.5s linear; }
    .two-box_img > img:hover {
      transform: scale(1.1);
      cursor: pointer; }

a[rel="category tag"] {
  color: #4d4d4d; }

@media (max-width: 765px) {
  .two-box_wrap {
    display: block; }

  .two-box {
    width: 100%; } }
/*-------footer------------*/
#footer_wrap {
  display: flex;
  align-items: center; }

.footer-logo {
  width: 10%;
  margin-right: 1.6em; }
  .footer-logo > img {
    width: 100%; }

#footer-menu ul {
  display: flex;
  justify-content: center;
  width: 100%; }
  #footer-menu ul li {
    flex: 1;
    padding: 0 5vw; }

footer ul li a:hover {
  opacity: 0.7;
  color: #333;
  text-decoration: none; }

#footer-menu {
  width: 50%;
  display: flex;
  align-items: center; }

#copyright {
  width: 40%;
  display: flex;
  justify-content: flex-end;
  align-items: center; }

/* トップに戻るボタン */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 40px;
  display: none;
  width: 30px;
  height: 30px;
  color: #201E1E;
  opacity: 0.6;
  /* 透明度をふわっと変える演出 */
  transition: opacity 2.5s;
  font-size: 1.6rem;
  line-height: 40px;
  text-align: center;
  text-decoration: none; }
  .back-to-top:hover {
    opacity: 1;
    text-decoration: none;
    color: #3D3D3D; }

/* マウスを乗せた時に透明度を変える */
@media (max-width: 765px) {
  .footer-logo {
    display: none; }

  #footer_wrap {
    display: block; }

  #footer-menu {
    width: 100%;
    margin-bottom: 1.6em; }

  #copyright {
    width: 100%;
    margin: 0 auto;
    justify-content: center !important; } }
/*-------下層ページ------------*/
.under {
  width: 90%;
  margin: 5rem auto 0; }
  .under p {
    text-align: left; }

.work_title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 3rem; }

.work_main {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  margin-bottom: 5rem; }
  .work_main img {
    width: 100%;
    height: auto; }

.work_cat {
  font-size: 1.5rem;
  margin-bottom: 3rem; }

.work_link {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 3rem;
  text-align: left; }
  .work_link i {
    margin-left: .5em; }

.work_device_img {
  margin-bottom: 5rem; }
  .work_device_img img {
    width: 100%;
    height: auto; }

.wp-block-image:nth-of-type(2) {
  width: 80%;
  margin: auto; }
  .wp-block-image:nth-of-type(2) img {
    width: 100%;
    height: auto; }
.wp-block-image img {
  width: 100%;
  height: auto;
  margin-bottom: 3rem; }
.wp-block-image figcaption {
  text-align: left;
  font-size: 1.6rem; }
  .wp-block-image figcaption a {
    color: #333333; }
    .wp-block-image figcaption a:hover {
      color: #ABAAAC; }
    .wp-block-image figcaption a::after {
      font-family: "Font Awesome 5 Free";
      content: '\f35d';
      font-weight: 900;
      margin-left: .5rem;
      font-size: 0.8em;
      color: #ABAAAC; }

a.work_title:hover {
  color: #333;
  opacity: 0.7;
  text-decoration: none; }

.has-text-align-left {
  margin-bottom: 6rem; }

.icon_link {
  width: 0.8em;
  margin: 0 0.6em;
  display: block; }

.postLinks {
  display: flex;
  justify-content: space-between; }

.postLink i {
  padding: 0 0.5rem; }
.postLink a {
  text-decoration: none;
  color: #333; }
  .postLink a:hover {
    opacity: 0.7; }

@media (max-width: 765px) {
  .wp-block-image img {
    width: 100%;
    height: auto; }

  .postLinks {
    display: block; }

  .postLink-prev {
    text-align: left; }

  .postLink-next {
    text-align: right; } }
/*-------お問い合わせ------------*/
.mw_wp_form {
  display: flex;
  justify-content: center;
  margin-top: 3rem; }

.form_row {
  display: flex;
  margin-bottom: 1rem; }

.form_label {
  width: 15vw;
  text-align: left; }
  .form_label span {
    font-size: 0.6rem;
    color: #7B7878; }

.form_row-center {
  justify-content: center; }

.btn {
  margin-top: 1.6rem;
  padding: 0.6rem; }

@media (max-width: 765px) {
  form {
    width: 100%; }

  input, textarea {
    width: 100%; }

  .form_row {
    display: block; }

  .form_label {
    display: block;
    width: 100%;
    text-align: left; }
    .form_label span {
      margin-left: 1em; }

  .form_content {
    width: 100%; } }