@charset "utf-8";
/* CSS Document */

@import url(animate.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 {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

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

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }


*,
*::before,
*::after {
  box-sizing: border-box; }

body {
  background: #f9f9f9;
  font-style: normal;
  color: #000000;
  font-family: 'Montserrat' ,"Yu Gothic", YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: #333; }
  body a {
    color: #000000;
    text-decoration: none; }
    body a:hover {
      color: #333333; }


.main-header {
  width: 100%; }
  .main-header .inner {
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    width: 100%;
    height: 80px;
    margin: 0 auto;
    position: fixed;
    top: 0px;
    z-index: 1000; }
    @media (max-width: 667px) {
      .main-header .inner {
        width: 100%;
        height: 50px;
        left: 0%;
        margin-left: 0%; } }
    .main-header .inner .logo {
      width: 15%;
      height: 80px;
      text-align: center;
      position: relative;
      float: left; }
      @media (max-width: 667px) {
        .main-header .inner .logo {
          width: 100%;
          height: 50px;
          float: none; } }
      .main-header .inner .logo #logo_type-svg {
        fill: #fff; }
      .main-header .inner .logo #logo-svg {
        fill: #fff; }
      .main-header .inner .logo h1 {
        width: 110px;
        height: 56px;
        position: absolute;
        top: 20px;
        left: 30px;
        margin: 0 auto;
        z-index: 999; }
        @media (max-width: 667px) {
          .main-header .inner .logo h1 {
            height: 31px;
            left: 10px;
            top: 10px; } }
        .main-header .inner .logo h1 .top_scroll {
          width: 110px;
          height: auto; }
          @media (max-width: 667px) {
            .main-header .inner .logo h1 .top_scroll {
              display: none; } }
        .main-header .inner .logo h1 .page_scroll {
          display: none;
          opacity: 1; }
          @media (max-width: 667px) {
            .main-header .inner .logo h1 .page_scroll {
              display: block; } }
    .main-header .inner nav.global {
      width: 85%;
      float: right; }
      @media (max-width: 667px) {
        .main-header .inner nav.global {
          width: 100%;
          float: none;
          position: absolute;
          top: 50px;
          display: none; } }
      .main-header .inner nav.global ul.pages {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        z-index: 999;
        position: relative; }
        .main-header .inner nav.global ul.pages li {
          width: 125px;
          height: 85px;
          text-align: center;
          display: table;
          letter-spacing: 2px;
          -moz-transition: all 300ms ease-in-out;
          -o-transition: all 300ms ease-in-out;
          -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out; }
          @media (max-width: 667px) {
            .main-header .inner nav.global ul.pages li {
              background: #161616;
              width: 100%;
              height: auto; } }
          .main-header .inner nav.global ul.pages li a {
            height: 100%;
            position: relative;
            display: table-cell;
            vertical-align: middle;
            margin: 30px 0 0 0;
            padding-bottom: 5px;
            text-decoration: none;
            font-size: 12px;
            color: #FFFFFF; }
            @media (max-width: 667px) {
              .main-header .inner nav.global ul.pages li a {
                margin: 0px;
                padding: 20px;
                font-size: 14px; } }
            .main-header .inner nav.global ul.pages li a:after {
              content: '';
              position: absolute;
			  top: 55px;
              left: 50%;
              width: 30px;
              height: 1px;
              margin-left: -15px;
              -moz-transform: scaleX(0);
              -ms-transform: scaleX(0);
              -webkit-transform: scaleX(0);
              transform: scaleX(0);
              background-color: #FFFFFF;
              -moz-transition: all 0.3s ease;
              -o-transition: all 0.3s ease;
              -webkit-transition: all 0.3s ease;
              transition: all 0.3s ease; }
              @media (max-width: 667px) {
                .main-header .inner nav.global ul.pages li a:after {
                  bottom: 20%; } }
            .main-header .inner nav.global ul.pages li a:hover::after {
              -moz-transform: scaleX(1);
              -ms-transform: scaleX(1);
              -webkit-transform: scaleX(1);
              transform: scaleX(1); }
  .main-header.mini .inner {
    height: 50px;
	background-color: #161616; }
    .main-header.mini .inner nav.global ul.pages li {
      height: 56px; }
      .main-header.mini .inner nav.global ul.pages li a {
        font-size: 11px;
        font-size: 0.78571rem; }
    .main-header.mini .inner .logo {
      width: 36px;
      height: 31px;
      text-align: center;
      position: absolute;
      float: none; }
      .main-header.mini .inner .logo h1 {
        top: 10px;
        left: 10px; }
        .page_scroll {
          height: 31px; }

.menubutton {
  width: 20px;
  height: 43px;
  position: absolute;
  right: 15px; }
  .menubutton .hamburger-container {
    display: none;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    width: 20px;
    height: 43px;
    z-index: 9999;
    -moz-border-radius-topleft: 50%;
    -webkit-border-top-left-radius: 50%;
    border-top-left-radius: 50%;
    -moz-border-radius-topright: 50%;
    -webkit-border-top-right-radius: 50%;
    border-top-right-radius: 50%;
    -moz-border-radius-bottomleft: 50%;
    -webkit-border-bottom-left-radius: 50%;
    border-bottom-left-radius: 50%;
    -moz-border-radius-bottomright: 50%;
    -webkit-border-bottom-right-radius: 50%;
    border-bottom-right-radius: 50%;
    -moz-border-radius-topleft: 50%;
    -webkit-border-top-left-radius: 50%;
    border-top-left-radius: 50%;
    -moz-border-radius-bottomleft: 50%;
    -webkit-border-bottom-left-radius: 50%;
    border-bottom-left-radius: 50%;
    -moz-border-radius-topright: 50%;
    -webkit-border-top-right-radius: 50%;
    border-top-right-radius: 50%;
    -moz-border-radius-bottomright: 50%;
    -webkit-border-bottom-right-radius: 50%;
    border-bottom-right-radius: 50%; }
    @media (max-width: 667px) {
      .menubutton .hamburger-container {
        display: block; } }
    .menubutton .hamburger-container .hamburger-line {
      width: 100%;
      height: 1px;
      top: 25px;
      background-color: #FFF;
      margin-bottom: 2px;
      position: relative;
      -moz-transition: all 600ms ease-in-out;
      -o-transition: all 600ms ease-in-out;
      -webkit-transition: all 600ms ease-in-out;
      transition: all 600ms ease-in-out; }
      .menubutton .hamburger-container .hamburger-line:last-child {
        margin-bottom: 0; }
      .menubutton .hamburger-container .hamburger-line:before, .menubutton .hamburger-container .hamburger-line:after {
        content: "";
        height: 1px;
        width: 20px;
        background: #FFF;
        position: absolute;
        left: 0;
        -moz-transition: all 600ms ease-in-out;
        -o-transition: all 600ms ease-in-out;
        -webkit-transition: all 600ms ease-in-out;
        transition: all 600ms ease-in-out; }
      .menubutton .hamburger-container .hamburger-line:before {
        top: -7px; }
      .menubutton .hamburger-container .hamburger-line:after {
        top: 7px; }
      .menubutton .hamburger-container .hamburger-line.close {
        background: transparent; }
        .menubutton .hamburger-container .hamburger-line.close:before {
          -moz-transform: translateY(7px) rotate(225deg) scale(1);
          -ms-transform: translateY(7px) rotate(225deg) scale(1);
          -webkit-transform: translateY(7px) rotate(225deg) scale(1);
          transform: translateY(7px) rotate(225deg) scale(1); }
        .menubutton .hamburger-container .hamburger-line.close:after {
          -moz-transform: translateY(-7px) rotate(-225deg) scale(1);
          -ms-transform: translateY(-7px) rotate(-225deg) scale(1);
          -webkit-transform: translateY(-7px) rotate(-225deg) scale(1);
          transform: translateY(-7px) rotate(-225deg) scale(1); }


.topimage {
  width: 100%;
  height: 100%;
  position: relative; }
  @media (max-width: 667px) {
    .topimage {
      height: 480px; } }
  .topimage .slider {
    text-align: center; }
    .topimage .slider .slideimages {
      position: relative;
      overflow: hidden;
      height: 660px;
      z-index: 100; }
      .topimage .slider .slideimages img {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0; }
        @media (max-width: 1441px) {
          .topimage .slider .slideimages img {
            width: 1440px;
            left: 50%;
            margin-left: -720px;
            height: auto; } }
        @media (max-width: 667px) {
          .topimage .slider .slideimages img {
            width: 1047px;
            left: 50%;
            margin-left: -523px;
            height: auto; } }
    .topimage .slider .copy {
      position: absolute;
      width: 100%;
      top: 140px;
      text-align: left;
      color: #FFF;
      z-index: 800;
	  padding: 0 30px }
      @media (max-width: 667px) {
        .topimage .slider .copy {
          top: 60px;
		  padding: 0; } }

      .topimage .slider .copy .text {
		max-width: 1160px;
        margin: 0 auto;
        line-height: 140%;
        font-size: 3.57143rem;
        font-weight: bold;
        letter-spacing: 12px; }
		@media screen and (max-width: 1075px) {
		.topimage .slider .copy .text {
			font-size: 46px; }
		}
        @media (max-width: 667px) {
          .topimage .slider .copy .text {
            width: 90%;
            margin: 0 auto;
            letter-spacing: 3px;
            font-size: 1.78571rem; } }
        @media (max-width: 321px) {
          .topimage .slider .copy .text {
            font-size: 1.42857rem; } }
      .topimage .slider .copy .sub_text {
		max-width: 1160px;
        margin: 0 auto;
        opacity: 0;
        font-size: 1.07143rem;
        font-weight: normal;
        padding-top: 28px;
        text-transform: uppercase;
        position: relative;
        line-height: 1.8em;
        letter-spacing: 5px; }
        @media (max-width: 667px) {
          .topimage .slider .copy .sub_text {
            width: 90%;
            margin: 0 auto;
            font-size: 1rem; }
            .topimage .slider .copy .sub_text br {
              display: none; } }
        .topimage .slider .copy .sub_text:before {
          position: absolute;
          content: "";
          top: 10px;
          left: 0px;
          width: 115px;
          height: 1px;
          background-color: #EEEEEE; }

.topimage.page {
  width: 100%;
  height: 445px;
  position: relative; }
  @media screen and (max-width: 667px) {
    .topimage.page {
      height: 300px;
      margin-bottom: 0px; } }
  .topimage.page h2 {
    text-align: center;
    position: absolute;
    top: 40%;
    margin: auto;
    width: 100%;
    height: 50px;
    line-height: 160%;
    color: #FFF;
    font-size: 3.85714rem;
    font-weight: bold;
    letter-spacing: 15px; }
	.topimage.page.privacy h2 {
		top: 50%;
		font-size: 20px;
		padding: 0 10px; }
	
    @media screen and (max-width: 667px) {
      .topimage.page h2 {
        font-size: 1.42857rem; } }
  .topimage.page h3 {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 320px; }
    @media screen and (max-width: 667px) {
      .topimage.page h3 {
        top: 220px; } }
    .topimage.page h3 span {
      color: #FFF;
      border: 1px solid #FFF;
      padding: 12px 40px; }
  /*.topimage.page.bg_philosophy {
    background: url(images/bg_philosophy.jpg) no-repeat;
    background-size: cover; }
  .topimage.page.bg_product {
    background: url(images/bg_product.jpg) no-repeat;
    background-size: cover; }
  .topimage.page.bg_company {
    background: url(images/bg_company.jpg) no-repeat;
    background-size: cover; }
  .topimage.page.bg_recruit {
    background: url(images/bg_recruit.jpg) no-repeat;
    background-size: cover; }*/

header.title {
  text-align: center;
  padding: 120px 0 70px 0;
  color: #000; }
  @media (max-width: 667px) {
    header.title {
      padding: 80px 20px 30px; } }
  header.title h2 {
    text-align: center;
    padding-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1.4em;
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 0;
    margin-bottom: 37px;
    font-weight: bold;
    font-size: 33px; }
    header.title h2:after {
      position: absolute;
      content: "";
      top: 57px;
      left: -8px;
      margin-left: 50%;
      width: 20px;
      height: 1px;
      background-color: #cfcfcf; }
  header.title .sub_title {
    font-size: 0.9rem; }
	
.our-vision {
	padding: 80px 20px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.8em;
}

.contents {
    background: #FFF; }


.page-content {
	max-width: 1000px;
	width: 88%;
	padding: 7% 0;
	margin: 0 auto; }

#main-footer {
  width: 100%; }
  #main-footer .move-page {
    width: 100%;
    text-align: center; }
    #main-footer .move-page a {
      background: #161616;
      width: 100%;
      padding: 35px 0 35px 0;
      display: inline-block;
      font-size: 0.64286rem;
      color: #FFF;
      position: relative; }
      #main-footer .move-page a:before {
        position: absolute;
        margin: auto;
        content: "";
        vertical-align: middle;
        left: -6px;
        top: 13px;
        margin-left: 50%;
        width: 12px;
        height: 12px;
        border-top: 2px solid #FFF;
        border-right: 2px solid #FFF;
        opacity: 0;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease; }
      #main-footer .move-page a:hover::before {
        opacity: 1;
        -moz-transform: translateY(5px) rotate(-45deg);
        -ms-transform: translateY(5px) rotate(-45deg);
        -webkit-transform: translateY(5px) rotate(-45deg);
        transform: translateY(5px) rotate(-45deg); }
  #main-footer .inner {
	max-width: 1160px;
    margin: 0px auto 30px;
	padding: 0 20px;
    overflow: hidden;
    *zoom: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end; }
    @media (max-width: 667px) {
      #main-footer .inner {
        width: 95%;
        margin: 20px auto;
		padding: 0; } }
    #main-footer .inner .leftbox {
      width: 50%; }
      @media (max-width: 667px) {
        #main-footer .inner .leftbox {
          width: 50%; } }
      #main-footer .inner .leftbox ul {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-align-items: flex-end;
        align-items: flex-end; }
        #main-footer .inner .leftbox ul a {
          color: #6e6e6e; }
          #main-footer .inner .leftbox ul a:hover {
            color: #333333; }
        #main-footer .inner .leftbox ul li {
          position: relative;
          padding-right: 10px;
          margin-right: 10px;
          font-size: 0.71429rem; }
          @media (max-width: 667px) {
            #main-footer .inner .leftbox ul li {
              float: none;
              display: block;
              margin-top: 10px; } }
          #main-footer .inner .leftbox ul li:after {
            position: absolute;
            content: "|";
            right: -1px;
            top: 0px; }
            @media (max-width: 667px) {
              #main-footer .inner .leftbox ul li:after {
                display: none; } }
          #main-footer .inner .leftbox ul li:last-child:after {
            display: none; }
    #main-footer .inner .rightbox {
      width: 50%;
      text-align: right; }
      @media (max-width: 667px) {
        #main-footer .inner .rightbox {
          width: 50%; } }
      #main-footer .inner .rightbox .copyrights {
        font-size: 0.57143rem; }

svg#vision-svg {
  stroke: none;
  fill: none; }

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #cfcfcf;
  z-index: 12000;
  top: 0;
  left: 0; }
@keyframes rot {
  from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }
  .overlay .loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 -25px -25px;
    border: 2px solid #fff;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    border-right: 3px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 100%;
    height: 50px;
    width: 50px;
    animation: rot 0.6s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); }

@keyframes spin {
  100% {
    transform: rotate(360deg); } }
::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em; }

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .5); }

::-webkit-scrollbar-track {
  background: #f7f7f7; }

body {
  scrollbar-face-color: rgba(0, 0, 0, .5);
  scrollbar-track-color: #f7f7f7; }

@media screen and (max-width: 667px) {
  ::-webkit-scrollbar {
    width: 0.1em;
    height: 0.1em; }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .5); }

  ::-webkit-scrollbar-track {
    background: #f7f7f7; }

  body {
    scrollbar-face-color: rgba(0, 0, 0, .5);
    scrollbar-track-color: #f7f7f7; } }
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }



.service {
	padding: 5% 2% 1% 6%;
}
.clearfix:after {
  clear: both;
  content: '';
  display: block;
}
.service_item {
	float: left;
	width: 33.3333%;
	padding-right: 6%;
}

.service_item h3 {
	font-size: 25px;
	font-weight: bold;
}
.service_item_subtitle {
	font-size: 13px;
	color: #666;
	padding: 7px 0 20px;
}
.service_item_txt {
	line-height: 1.5;
}

.contents_button {
	text-align: center;
	padding: 40px 0;
}
.button {
	display: inline-block;
	width: 205px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	outline: none;
	background-color: #161616;
	color: #fff;
	-webkit-transition: all .3s;
	transition: all .3s;
	letter-spacing: 0.15em;
}
.button:hover {
  background-color: #fcff45;
}
#gradient {
	width: 100%;
	color: #fff;
	background: linear-gradient(90deg,  rgb(124,241,124), rgb(27,163,221), rgb(161,138,161), rgb(255,128,60));
	background-size: 700% 200%;
	-webkit-animation: Gradient 25s ease infinite;
	-moz-animation: Gradient 25s ease infinite;
	animation: Gradient 25s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

.table {
	width: 100%;
	line-height: 2;
	font-size: 15px;
	margin-bottom: 30px;
}
.table th, table td {
	padding: 20px 0;
}
.table th {
	width: 25%;
	text-align: left;
	vertical-align: top;
}
.table tr {
	border-bottom: 1px solid #888;
}
.table tr:first-child {
	border-top: 1px solid #888;
}
.page_service h3{
	font-size: 25px;
	font-weight: bold;
}	
.page_service {
	padding: 25px 0;
}
.page-privacy {
	line-height: 1.5;
}
.page-privacy h3 {
	font-size: 16px;
	padding-top: 30px;
}
.thanks {
	line-height: 1.8;
}
.thanks h4 {
	font-size: 18px;
	padding-bottom: 10px;
}

@media screen and (max-width: 667px) {
.service_item {
	float: none;
	width: 100%;
	padding: 25px 0;
}	
.service {
    padding: 40px 40px 0;
}

}