@charset 'UTF-8';

#menuBtn {
  position: fixed;
  top: 2em;
  right: 1em;
  cursor: pointer;
  z-index: 30;
}

#menuBtn > div {
  position: relative;
  width: 50px;
  height: 50px;
}

#menuBtn > div:before,
#menuBtn > div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  background-color: #000;
  transition: .6s;
}

#menuBtn > div:before {
  top: 10px;
}

#menuBtn > div:after {
  bottom: 10px;
}

#menuBtn.active > div:before,
#menuBtn.active > div:after {
  background-color: #fff;
}

#menuBtn.active > div:before {
  top: 20px;
  transform: rotate(405deg);
}

#menuBtn.active > div:after {
  bottom: 20px;
  transform: rotate(-405deg);
}

:root {
  --fv_bg_img: url('https://edge.sincar.jp/wp/wp-content/uploads/2015/02/startup-photo01.jpg');
}

* {
	background-color: rgba(255, 255, 255, 0);
  color: inherit;
	/* font-family: 'Overpass', 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif; */
  font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 2;
	letter-spacing: .1em;
	scroll-behavior: smooth;
  transition: inherit;
}

html {
	color: #000;
  font-family: 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif;
  font-size: 16px;
	font-weight: 400;
  z-index: 1;
}

body {
  overflow-x: hidden;
}

h1,
h2 {
  font-family: 'Josefin Sans', 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif;
}

th,
td:first-child {
  padding-right: 1em;
  white-space: nowrap;
}

input[type=submit] {
  transition: .4s;
  cursor: pointer;
}

input[type=submit] + input[type=submit] {
  margin-left: 1em;
}

a {
  text-decoration: none;
  transition: .4s;
}

a:hover img {
  opacity: .5;
}

a:before,
a:after {
  transition: .4s;
}

iframe {
  width: 100%;
  height: 400px;
}

input[type=text],
input[type=email],
textarea {
  padding: .5em 1em;
  width: 100%;
  border: 2px solid #000;
}

label {
  cursor: pointer;
}

button {
  cursor: pointer;
}

/* ロゴ */
.logo_icon_text {
  max-width: 180px;
}

.logo_icon {
  max-width: 100px;
}

/* 見出し：h1 */
.page_title_area {
  /* text-align: right; */
}

.page_title {
  position: relative;
  display: block;
  width: 100vw;
  margin: 0 -100% 0 0;
  padding: 0 -100% 0 0;
  font-family: 'Josefin Sans', 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif;
  font-size: 3em;
  font-weight: 800;
  border-bottom: 2px solid #000;
  letter-spacing: .1em;
}

@media screen and (max-width: 800px) {
  .page_title {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 2.2em;
  }
}

/* ボタン */
.button_area {
  margin-top: 50px;
  text-align: center;
}

.button_black {
  display: inline-block;
  padding: 1em;
  width: 320px;
  max-width: 90%;
  background-color: #000;
  color: #fff;
  border: 2px solid #000;
  font-weight: 800;
  text-decoration: none!important;
}

.button_black:hover {
  background-color: #fff;
  color: #000;
}

.button_solid {
  position: relative;
  display: inline-block;
  padding: 1em;
  width: 320px;
  max-width: 90%;
}

.button_solid:before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}

.button_solid:after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}


/* --------------------------------------------------
  ヘッダー
-------------------------------------------------- */

.global_header {
  padding: 2em 0;
  z-index: 10;
}

.global_nav {
  position: fixed;
  top: 0;
  left: 100vw;
  right: -100vw;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 20, .8);
  color: #fff;
  font-family: 'Josefin Sans', 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif;
  z-index: 20;
  transition: 0;
}

.global_nav.active {
  left: 0;
  right: 0;
}

.global_nav li {
  list-style-type: none;
  list-style-position: outside;
  font-size: 1.4em;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  transition: 1s;
}

.global_nav li + li {
  margin-top: 1em;
}

.global_nav.active li {
  opacity: 1;
}

.global_nav li a:hover {
  color: #aaa;
}

/* --------------------------------------------------
  フッター
-------------------------------------------------- */

.contact_area {
  position: relative;
  padding: 100px 0;
  background-image: url('http://gahag.net/img/201602/16s/gahag-0056802257-1.jpg');
  background-size: cover;
  font-family: 'Josefin Sans', 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif;
  text-align: center;
}

.contact_area .mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .8);
}

.contact_area * {
  position: relative;
  color: #fff;
  z-index: 1;
}

.contact_area .button_solid {
  margin-bottom: 40px;
  font-size: 1.4em;
  letter-spacing: .2em;
}

.contact_area .button_solid:hover {
  background-color: #fff;
  color: #000;
}

.contact_area .button_solid:before,
.contact_area .button_solid:after {
  border-color: #fff;
}

.contact_area .button_solid:hover:before,
.contact_area .button_solid:hover:after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0;
}

.global_footer {
  padding: 100px 0 40px;
}

.global_footer .logo_icon {
  margin-bottom: 1em;
}

.global_footer .footer_navigation {
  margin-top: 1em;
}

.global_footer .footer_navigation li {
  list-style-type: none;
  display: inline-block;
}

.global_footer .footer_navigation li + li {
  margin-left: 1em;
}

.global_footer a {
  font-family: 'Abel', 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif;
}

.global_footer .copyright {
  margin-top: 1em;
  font-family: 'Abel', 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif;
}

.global_footer .sns_icons {
  margin-top: 1em;
}

.global_footer .sns_icons .sns_icon + .sns_icon {
  margin-left: 1em;
}

@media screen and (max-width: 800px) {
  .global_footer .footer_navigation {
    display: none;
  }
}

/* --------------------------------------------------
  page
-------------------------------------------------- */

.breadcrumb {
  margin-bottom: 1em;
  color: #888;
}

.breadcrumb a {
  color: #888;
}

.breadcrumb a:hover {
  color: #00004b;
}

.posts .post {
  display: grid;
  /* grid-template-columns: 30% 1fr 20px; */
  grid-template-columns: 30% 1fr;
  grid-gap: 40px;
  align-items: center;
}

.posts .post .post_thumbnail {
  padding-top: 60%;
  width: 100%;
  background-color: #eee;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.posts .post .post_text_area {
  padding: 1em 0;
}

.posts .post .post_title {
  font-size: 1.2em;
  font-weight: 900;
}

.posts .post .post_date {
  color: #338;
  font-weight: 400;
}

.posts .post:hover .post_thumbnail {
  opacity: .8;
}

.posts .post:hover .post_text_area {
}

@media screen and (max-width: 800px) {
  .posts .post {
    grid-gap: 1em;
    align-items: flex-start;
  }
  .posts .post .post_text_area {
    padding: 0;
  }
  .posts .post .post_title {
    font-size: 14px;
    line-height: 1.4;
  }
}

.page_content_area {
  padding: 40px 0 80px;
}

.page_content .section_title {
  display: block;
  margin: 100px 0 50px;
}

section:first-of-type .section_title {
  margin-top: 0;
}

.page_content .section_title h2 {
  display: inline-block;
  width: 800px;
  max-width: 90%;
  font-family: 'Josefin Sans', 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro W3', sans-serif;
  border-bottom: 2px solid #000;
}

.page_content section:nth-of-type(odd) .section_title {
  text-align: left;
}

.page_content section:nth-of-type(even) .section_title {
  text-align: right;
}

.page_content section:nth-of-type(odd) .section_title h2 {
  text-align: right;
}

.page_content section:nth-of-type(even) .section_title h2 {
  text-align: left;
}

.page_content h2 {
  margin: 2em 0 1em;
  font-size: 1.4em;
  font-weight: 800;
}

.page_content h3 {
  margin-bottom: .5em;
  font-size: 1.4em;
  font-weight: 800;
}

.page_content li {
  margin-left: 1.5em;
  list-style-position: outside;
}

.home .section_fv {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: var(--fv_bg_img);
}

.home .section_fv_inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, .9);
}

.home .section_fv .section_title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;  
  background-image: var(--fv_bg_img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-clip: text;
}

.home .section_fv .section_title h1 {
  margin-left: 40px;
  font-size: 200px;
  font-weight: 900;
  letter-spacing: 40px;
  /* -webkit-text-stroke-width: 1px; */
  -webkit-text-stroke-color: #000;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 1000px) {
  .home .section_fv .section_title h1 {
    margin-left: 20px;
    font-size: 100px;
    letter-spacing: 20px;
  }
}

@media screen and (max-width: 600px) {
  .home .section_fv .section_title h1 {
    margin-left: 10px;
    font-size: 60px;
    letter-spacing: 10px;
  }
}

.home section.service .service_webprodiction {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-gap: 40px;
}

.home section.service .service_salessupport {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-gap: 40px;
}

.service_salessupport .service_image_area {
  order: 2;
}

.service_salessupport .service_text_area {
  order: 1;
}

@media screen and (max-width: 800px) {
  .home section.service .service_webprodiction {
    grid-template-columns: repeat(1, 1fr);
  }
  .home section.service .service_salessupport {
    grid-template-columns: repeat(1, 1fr);
  }
  .service_salessupport .service_image_area {
    order: 1;
  }
  .service_salessupport .service_text_area {
    order: 2;
  }
}

.home section.company .section_content {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-gap: 40px;
}

@media screen and (max-width: 1000px) {
  .home section.company .section_content {
    grid-template-columns: repeat(1, 1fr);
  }
}

.home section.works .posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2em;
}

.home section.works .posts .post {
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1em;
}

.home section.works .posts .post .post_thumbnail {
  background-position: top;
}

@media screen and (max-width: 800px) {
  .home section.works .posts {
    grid-template-columns: repeat(1, 1fr);
  }
  .home section.works .posts .post .post_title {
    font-size: 1em;
  }
}

.home section.news .posts {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2em;
}

.page .page_content a {
  text-decoration: underline;
}

.page .page_content td:first-child {
  vertical-align: top;
  font-weight: 800;
}

.page .page_content td:not(:first-child) {
  padding-left: 1em;
  border-left: 1px solid #000;
}

.page.about .about_message {
  margin-bottom: 40px;
  font-size: 3em;
  font-weight: 800;
  line-height: 1.4;
}

.page.about .img_area {
  margin-bottom: 2em;
}

.page.about table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 20px;
}

.page.about table th {
  vertical-align: top;
}

.page.about table th p {
  padding: .5em 2em;
  background-color: #000;
  color: #fff;
  text-align: center;
  transition: .4s;
}

.page.about table td {
  padding: .5em 2em;
  border-left: 0;
  transition: .4s;
}

.page.about table td:not(:first-child) {
  border-left: 0;
}

@media screen and (max-width: 800px) {
  .page.about .about_message {
    font-size: 2em;
  }
  .page.about table th {
    display: block;
    width: 100%;
  }
  .page.about table th p {
    background-color: #eee;
    color: #000;
  }
  .page.about table td {
    display: block;
    padding-left: 0;
    width: 100%;
  }
}

.page.contact .form_area {
  margin-top: 50px;
}
.page.contact .form_area input[type=text],
.page.contact .form_area input[type=email],
.page.contact .form_area textarea {
  margin-top: 1em;
}

.page.contact .form_area h4 {
  position: relative;
  margin-top: 2em;
  font-weight: 900;
}

.page.contact .form_area .required:after {
  content: '必須';
  position: absolute;
  right: 0;
  display: inline-block;
  padding: .1em 1em;
  border-radius: 3em;
  background-color: #eee;
  font-size: .8em;
  font-weight: 900;
}

.page.contact .form_area .error {
  display: inline-block;
  margin-top: 1em;
  padding: .1em 1em;
  background-color: #fee;
  font-size: .8em;
  font-weight: 900;
  border-radius: 10px;
  letter-spacing: 0;
}

.page.contact .form_area input[type=text].tel,
.page.contact .form_area input[type=text].zip {
  max-width: 80px;
}

.category .posts {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2em;
}