@charset "utf-8";
/* CSS Document */
@media screen and (max-width:500px) {
.sp-none02 {display: none;}
.indent_content {padding: 30px 16px;}
.page_thumb {display: none;}
.content {padding: 16px;}
.page_title p {font-size: 5vw; padding-bottom: 10px;}
.indent_content02 {margin-top: 30px;}

/*header*/
	header {padding: 0 16px; height: 60px; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; display: flex; align-items: center; justify-content: flex-start;}
   
    
/*ハンバーガー*/	
	#nav-toggle {
  position: fixed;
  top: 6px;
  right: 3%;
width: 25px;
height: 30px;
  cursor: pointer;
  font-size: 2.5vw;
color: #fff;
}
#nav-toggle > div {
      width: 40%;
	height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#nav-toggle span {
  width: 100%;
  height: 2px;
  left: 0;
  display: block;
  background: #000;
  position: absolute;
  transition: transform 0.3s ease-in-out, top 0.5s ease;
  /* #nav-toggle close */
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 8px;
}
#nav-toggle span:nth-child(3) {
  top: 16px;
}

.open #nav-toggle span:nth-child(1) {
  top: 10px;
  transform: rotate(45deg);
background-color: #000;
}
.open #nav-toggle span:nth-child(2) {
  top: 10px;
  width: 0;
  left: 50%;
background-color: #000;
}
.open #nav-toggle span:nth-child(3) {
  top: 10px;
  transform: rotate(-45deg);
background-color: #000;
}

/* z-index */
#nav-toggle {
  z-index: 1000;
	border: 1px solid #000;
    border-radius: 50%;
    height: 40px; 
	width: 40px;
	margin-top: 3px;
	background: #fff;
}

#container {
  z-index: 900;
}

#gloval-nav nav {
  z-index: 999;
}

#gloval-nav {
  position: fixed;
background: url("img/sp/header/nav_bg.jpg")top left repeat;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 3.5vw;
  padding-left: 0;
  transform: translateX(-100%);
  transition: transform .7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#gloval-nav .nav_logo {margin: 0 auto 20px; width: 20%;} 	

.open #gloval-nav {
  transform: translateX(0);
}
#gloval-nav ul {
  list-style: none;
padding: 0 16px;
letter-spacing: 3px;
}
#gloval-nav ul li {
  position: relative;
  width: 100%;
color: #000;
 box-sizing: border-box;
margin-top: 5%; 
padding-left: 40px; 
font-size: 4vw; 
font-weight: bold;
}
#gloval-nav ul li::before {
	content: ''; 
	width: 15px; 
	height: 1px; 
	background: #fff;
	position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 15px;
	}
	

.nav-bg {
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  transition: all 1s ease;
}
.nav-bg.active {
  opacity: 1;
}

	.pan {margin-top: 60px; padding: 30px 16px; font-size: 3vw; margin-bottom: 0; border-bottom: 0;}
    .pan a {font-size: 3vw;}
	.page_title {font-size: 6vw; padding: 0; margin-bottom: 10px;}
	.min_page_title {font-size: 3.5vw;}
	.single_page {padding-bottom: 30px;}
	.front_main_box .btn {height: 60px; width: 100%; bottom: -30px;}
	.front_main_box .btn .recruit {font-size: 5vw; text-align: center; padding: 0 5%; width: 30%;}
	.front_main_box .btn .txt  {font-size: 3.5vw; width: 70%; padding: 0 5%;}
	.front_main_box {margin-top: 60px; height: auto!important; margin-bottom: 60px;}
	.front_main_box .movie_box .txt_box {top: 10%;}
	

	.front_main_box .main .main_txt span {font-size: 8vw; line-height: 1; padding: 0 5px;}
	.front_main_box .movie_box {width: 100%; height: 100%; bottom: 0;}
	.front_main_box .main .main_txt {margin-top: 10px; background: #fff; left: 10%;}
	.front_main_box .main .main_txt01 {margin-top: 0;}
	.front_main_box .main .main_txt::after {height: 100%;}
	.front_main_box .main .main_txt.on::after {height: 100%;}
	.front_main_box .btn:hover .recruit span {color: #fff; }
	.front_main_box .btn:hover .recruit::before {width: 30%; background: #3687d2;}
	.front_main_box .btn:hover .txt::before {width: 70%; background: #fff;}
	.front_main_box .btn:hover .recruit::before {width: 0;}
	.front_main_box .btn:hover .txt::before {width: 0;}
	.front_main_box .btn:hover .txt span {color: #000;}
	.front_main_box .main .main_txt p:nth-child(n + 2) {margin-top: 10px;}
	.front_main_box .unit_box {display: block; width: 100%; bottom: 0; position: relative;}
	
	.slider-thumbnail,.paging_box {display: none;}
	
	
	
	
/*header*/
	header .global_nav {display: none;} 
	header h2 img {margin-top: 0; width: 65%;}
	#hamburger02 {display: none;}
	
/*index*/
	#index .box01 .over {height: auto; padding-bottom: 0; padding-top: 70px;}
	#index .box01 .over h2 {padding: 0 16px; font-size: 16vw;}
	#index .box01 .over h2 p:nth-of-type(2) {font-size: 6vw;}
	#index .box01 .over .txt {margin-top: 50px; background: #fff; padding: 30px 16px; width: 100%; box-sizing: border-box;}
	#index .box01 .over .txt::before {display: none;}
	#index .box01 .over .txt01 {font-size: 5vw; line-height: 2;}
	#index .box01 .over .txt02 {font-size: 3.5vw;}
	#index .box01 .x_btn {margin-top: 30px; width: 100%; height: auto; padding: 5% 0; color: #fff;  background: url("img/sp/index/btn_arrow.svg") center left 5% no-repeat; background-color: #000; font-size: 4vw;}
	#index .box01 .x_btn .arrow {opacity: 0;}
	#index .box01 .bg02 {display: none;}
	#index .title {width: 100%;}
	#index .title .bdr {display: none;}
	#index .title p:nth-of-type(1) {font-size: 8vw; text-align: center;}
	#index .title p:nth-of-type(2) {font-size: 4vw; text-align: center; margin-top: 10px;}
	#index .box02 {padding: 50px 0;}
	#index .box02 .con_box {display: block;}
	#index .box02 .con {width: 100%; padding: 50px 0;}
	#index .box02 .con:before {width: calc(100% - 30px); height: calc(100% - 30px);}
	#index .box02 .con h3 {font-size: 4vw;}
	#index .box02 .con .big {font-size: 7vw; color: #3687d2; margin-top: 20px;}
	#index .box02 .x_btn {margin-top: 30px; width: calc(100% - 60px); font-size: 4vw; height: auto; padding: 5% 0; color: #000; border: 0;  background: url("img/sp/index/btn_arrow02.svg") center left 5% no-repeat;  background-color: #fff;}
	#index .box03 .over .bg01 {display: none;}
	#index .box03 .over h2 {padding: 0; position: relative;}
	#index .box03 .works_list {margin-top: 30px; padding: 30px 16px;}
	#index .box03 .item {width: 48%; padding-bottom: 10px; margin-right: 4%;}
	#index .box03 .item:nth-of-type(2n) {margin-right: 0;}
	#index .box03 .tag {font-size: 4vw;}
	#index .box03 h3 {font-size: 3vw;}
	#index .box03 .img_box {margin-bottom: 10px;}
	#index .box03 .item:nth-of-type(n + 3) {margin-top: 8%;}
	#index .box03 .x_btn {margin-top: 0;  background: url("img/sp/index/btn_arrow.svg") center left 5% no-repeat; background-color: #000; color: #fff; width: calc(100% - 32px); height: auto; padding: 5% 0;}
	#index .box03 {padding-bottom: 30px;}
	#index .box03 .tax_tag {font-size: 4vw;}
	#index .box04 {background: #eeeeee; padding: 30px 16px;}
	#index .box04 .bg01 {display: none;}
	#index .box04 .title {padding: 0; background: none; margin-top: 0; width: 100%;}
	#index .box04 .title p:nth-of-type(2) {padding-left: 0;}
	#index .box04 .inner_bg {height: auto;}
	#index .box04 .inner .img01 {display: none;}
	#index .box04 .inner .txt {width: 100%; margin-top: 30px;}
	#index .box04 .inner .txt .txt01 {font-size: 5vw; text-align: center;}
	#index .box04 .inner .txt .txt02 {font-size: 4vw; text-align: center; margin-top: 20px;}
	#index .box04 .inner .txt .text {font-size: 3.5vw;}
	#index .box04 .txt .bdr {display: none;}
	#index .box04 .x_btn {margin-top: 30px;  background: url("img/sp/index/btn_arrow.svg") center left 5% no-repeat; background-color: #000; color: #fff; width: calc(100%);}
	#index .box05 {padding: 30px 0; background: url(img/index/box05_bg.jpg)center center no-repeat; background-size: cover; background-attachment: fixed;}
	#index .box05 .title {width: 100%;}
	#index .box05 .title p:nth-of-type(2) {padding-left: 0;}
	#index .box05 .box {padding: 30px 16px; margin-top: 30px; border: 2px solid #3687d2; border-left: 0; border-right: 0;}
	#index .box05 .logo {width: 35%;}
	#index .box05 .sp_flex {display: flex; justify-content: left;}
	#index .box05 .txt01 {font-size: 3.5vw; margin-top: 0;}
	#index .box05 .txt02 {font-size: 6vw; margin: 0; margin-top: 10px;}
	#index .box05 .logo {margin: 0; width: 40%; margin-right: 20px;}
	#index .box05 .contact {display: block; margin-top: 20px;}
	#index .box05 .tel {font-size: 6vw;}
	#index .box05 .tel span {font-size: 9vw;}
	#index .box05 .btn {width: 100%; margin: auto; font-size: 4vw; height: auto; padding: 5% 0; margin-top: 20px;}
	#index .box05 .address {margin-top: 10px; font-size: 3.5vw;}
	#index .box05 .address01 {margin-top: 30px;}
	#index .box06 {padding: 30px 16px;}
	#index .box06 .title {margin-bottom: 30px;}
	#index .box06 .item:nth-of-type(1) {padding-top: 0;}
	#index .box06 .time {font-size: 3.5vw; padding-right: 20px; margin-right: 20px;}
	#index .box06 .tag {font-size: 3.5vw;}
	#index .box06 h3 {margin-top: 10px; font-size: 3.5vw; line-height: 1.5;}
	#index .box06 .item {font-size: 4vw; padding: 10px 0; border-bottom: 1px solid #000;}
	#index .box06 .x_btn {margin-top: 30px; width: 100%; color: #fff; background: url("img/sp/index/btn_arrow.svg") center left 5% no-repeat; background-color: #000; }
	#index .box07 .txt_icon {display: none;}
	#index .box07 {padding: 30px 0;}
	#index .box07 .logo {width: 40%; padding-left: 16px;}
	#index .box07 .bdr {width: 60%;}
	#index .box07 .big_txt {justify-content: center; padding: 40px 0; font-size: 8vw;}
	#index .box07 .bdr02 {margin-top: 0;}
	#index .box07 .txt01 {font-size: 6vw; margin-top: 10px; padding-right: 16px;}
	#index .company_box {display: block;}
	#index .company_box .tab {font-size: 4vw; height: auto; padding: 5% 0;}
	#index .company_box iframe {border: 0; height: 250px;}
	#index .company_box table {font-size: 3vw;}
	#index .company_box th, #index .company_box td {padding: 10px;}
	#index .company_box th {width: 25%;}
	#index .company_box td {width: 75%;}
	
	/*about*/
	#about .main01,#about .main02 {margin-top: 30px; padding: 30px 0; height: auto; background-size: cover;}
	#about .main01 .txt01,#about .main02 .txt01 {font-size: 4vw; padding: 6px;}
	#about .main01 .txt02,#about .main02 .txt02 {margin: 20px auto 10px; font-size: 6vw; font-weight: 700;}
	#about .main01 .txt03,#about .main02 .txt03 {font-size: 3.5vw; font-weight: 700;}
	#about .box01 {padding: 30px 0;}
	#about .box01 .min_title,#about .box02 .min_title {margin-bottom: 10px; font-size: 4vw;}
	#about .box01 .title,#about .box02 .title {font-size: 5vw;}
	#about .box01 .title::before,#about .box01 .title::after,#about .box02 .title::before,#about .box02 .title::after {height: 2px; width: 15%;}
	#about .box01 .inner,#about .box02 .inner {display: block; margin-top: 30px; padding: 0 16px; font-size: 3.5vw;}
	#about .box01 .inner .img01,#about .box02 .inner .img01 {margin-right: 0; margin-bottom: 10px;}
	#about .box01 .inner .img02,#about .box02 .inner .img02 {margin-left: 0; margin-bottom: 10px;}
	#about .bnr01 {display: none;}
	#about .box02 {padding: 30px 0;}
	#about .box02 .con_box {margin-top: 30px; padding: 0 16px; flex-wrap: wrap;}
	#about .box02 .con_box a {width: 48%;}
	#about .box02 .con_box a:nth-of-type(n + 3) {margin-top: 4%;}
	#about .box02 .con {margin-top: 30px; padding: 0;}
	#about .box02 .con h3 p {font-size: 5vw; padding: 10px 15%;}
	#about .box02 .con h3 {height: auto; overflow: hidden;}
	#about .end {margin-top: 30px;}
	#about .end .over {padding: 30px 0; background-size: cover;}
	#about .end .over .txt01 {font-size: 4vw; padding: 10px; border-radius: 5px;}
	#about .end .over .txt02 {margin-top: 20px;}
	#about .end .over .txt02 span {font-size: 5vw; font-weight: 700;}
	#about .end .over .txt02::before {background-size: 45%; top: -15px;}
	#about .end .over .txt02::after {background-size: 45%; bottom: -49px; right: -35px;}
	#about .end .over .txt01::after {border-width: 10px 10px 0 10px; bottom: -10px;}
	#about .end .under .txt03 {font-size: 4vw; margin-bottom: 5px;}
	#about .end .under .txt04 {font-size: 5vw;}
	#about .end .under img {margin-right: 10px; width: 30%;}
	#about .end .under {height: auto; padding: 20px 0;}
	#about .end .triangle01 {border-width: 40px 0 0 40px;}
	#about .end .triangle02 {border-width: 0 0 40px 40px;}
	#con01,#con02,#con03,#con04 {margin-top: -60px; padding-top: 60px;}
	
	/*content*/
	#content .main {margin-top: 30px; padding: 30px 0; background-size: cover;}
	#content .main .txt01 p {font-size: 4vw; padding: 0;}
	#content .main .txt01 {width: 280px;; height: 35px;}
	#content .main .txt01::before {border-width: 0 0 35px 30px; left: -14px;}
	#content .main .txt01::after {border-width: 35px 30px 0 0; right: -14px;}
	#content .main .txt02 {padding: 20px; display: table; margin: 20px auto 0;}
	#content .main .txt02 p:nth-of-type(1) {font-size: 5vw;}
	#content .main .txt02 p:nth-of-type(2) {font-size: 6vw; margin-top: 10px;}
	#content .link_box {margin-top: 30px; display: block;}
	#content .link_box .con .txt {width: 100%;}
	#content .link_box .con {width: 100%; padding: 50px 0; height: auto;}
	#content .link_box .con .link {font-size: 4vw;}
	#content .link_box .con .big {font-size: 7vw; color: #3687d2; margin-top: 20px;} 
	#content .link_box .x_btn {width: calc(100% - 60px); font-size: 4vw; height: auto; padding: 5% 0; color: #000; border: 0; background: url(img/sp/index/btn_arrow02.svg) center left 5% no-repeat; background-color: #fff;}
	#content .link_box .con:before {width: calc(100% - 30px); height: calc(100% - 30px);}
	#content .link_box .con:hover::before {width: calc(100% - 30px); height: calc(100% - 30px);}
	#content .link_box .x_btn:hover .arrow {opacity: 0; transform: none;}
	#content .box01 {margin-top: 30px;}
	#content .box01 .title .min {font-size: 3.5vw;}
	#content .box01 .title h2 {font-size: 6vw;}
	#content .title::before,#content .title::after {display: none;}
	#content .box01 .inner {display: block; margin-top: 30px; padding: 0 16px; font-size: 3.5vw;}
	#content .box01 .inner .img01 {margin-right: 0; margin-bottom: 10px;}
	#content .box01 .inner .img02 {margin-left: 0; margin-bottom: 10px;}
	#content .bnr01 .txt01, #content .bnr01 .txt02 {font-size: 4.5vw; padding: 5px;}
	#content .bnr01 .txt03 p {font-size: 4vw;}
	#content .bnr01 .txt03 {padding: 8px 60px 8px 20px;}
	#content .bnr01 {margin-top: 30px; padding: 35px 0 35px 16px; border: 2px solid #3687d2; background-size: cover;}
	#content .bnr01 .txt02 {margin-top: 10px;}
	#content .bnr02 {border: 2px solid #184a78;}
	#content .end {margin-top: 30px; padding: 30px 0; background-size: cover;}
	#content .end .txt01 {font-size: 4vw; padding: 8px 10px;}
	#content .end .txt02 {font-size: 5vw; margin-top: 20px;}
	#content .end .txt03 {font-size: 9vw; margin: 15px 0 10px;}
	#content .end .txt04 {font-size: 3.5vw;}
	#content .end .logo {margin-top: 20px; width: 40%;}

	/*contact*/
	#contact table {border: 0; margin-top: 30px;}
    #contact .txt01 {font-size: 4vw; margin-top: 0;}
    #contact .tel {font-size: 6vw; margin: 10px auto 30px;}
    #contact .tel span {font-size: 8vw;}
    #contact tr th, #contact tr td {display: block; padding: 16px; font-size: 4vw;}
    #contact tr th {width: 100%; padding: 16px; font-size: 4vw;}
    #contact .essential {position: absolute; right: 5%; font-size: 4vw;}
    #contact td input {padding: 10px;}
    #contact textarea {line-height: 1.7;}
    #contact .form_btn {font-size: 4vw; width: calc(100% - 32px); height: auto; margin: 30px auto 0; padding: 16px 0; -webkit-appearance: none;}
    #contact .thanks {font-size: 3.5vw; padding: 0 16px; margin-top: 30px;}
	
	/*blog_news*/
	#blog_news .blog_list {margin-top: 0; padding: 30px 16px;}
	#blog_news .blog_list .time {font-size: 3.5vw; padding-right: 20px; margin-right: 20px;}
	#blog_news .blog_list .tag {font-size: 3.5vw;}
	#blog_news .blog_list h3 {margin-top: 10px;}
	#blog_news .blog_list .item {padding: 10px 0; border-bottom: 1px solid #000;}
	
	.nav_over {margin: 30px 0;}
	.nav_btn {width: 48%;}
	.navigation .next-entries {margin-right: 4%;}
	.nav_archive_btn {width: 48%;}
	.navigation .next-entries, .navigation .previous-entries {font-size: 4vw;}
	.nav_archive_btn {font-size: 4vw;}
	.nav_under {margin-top: 30px;}
	#single_blog .box01 {padding: 30px 16px; border-right: 0; border-left: 0;}
	#single_blog .time {font-size: 4vw;}
	#single_blog .tag {font-size: 4vw;}
	#single_blog h2 {font-size: 4vw; line-height: 1.5;}
	#single_blog .text {font-size: 3.5vw;}
	
	
	/*works*/
	#works .tag_box {margin-top: 30px; padding: 0 16px;}
	#works .tax {width: 48%; margin-right: 4%; font-size: 4vw;}
	#works .tax:nth-of-type(2n) {margin-right: 0;}
	#works .tax:nth-of-type(n + 3) {margin-top: 4%;}
	#works .works_list {margin: 50px auto; padding: 0 16px;}
	#works .item {width: 48%; margin-right: 4%; padding-bottom: 10px; border-bottom: 1px solid #3687d2;}
	#works .item:nth-of-type(2n) {margin-right: 0;}
	#works .item:nth-of-type(n + 3) {margin-top: 8%;}
	#works .tax_tag {font-size: 3.5vw;}
	#works .img_box {margin-bottom: 10px;}
	#works h3 {font-size: 3vw;}
	#works .img_item {width: 100%;}
	#works .img_item .img {height: 120px;}
	#single_works h2 {font-size: 4vw;}
	#single_works .txt01 {font-size: 3.5vw; margin-top: 20px;}
	#single_works .works_box {padding: 0 16px;}
	#single_works .works_box a,#single_works .works_box a:nth-of-type(3n) {width: 48%; margin-right: 4%; height: 120px;}
	#single_works .works_box a:nth-of-type(2n) {margin-right: 0;}
	#single_works .works_box a:nth-of-type(n + 3) {margin-top: 4%;}
	#single_works .case_item .txt {padding: 30px 16px; border: 2px solid #CFCFCE; border-right: 0; border-left: 0;}
	#single_works h3 {font-size: 4vw; line-height: 1.5; padding: 5px 10px;}
	#single_works .p {margin-top: 20px; font-size: 3.5vw;}
	#single_works {padding-bottom: 50px;}
	
	/*archives-works-tax*/
	#archives-works-tax .tag_box {margin-top: 30px; padding: 0 16px;}
	#archives-works-tax .tax {width: 48%; margin-right: 4%; font-size: 4vw;}
	#archives-works-tax .tax:nth-of-type(2n) {margin-right: 0;}
	#archives-works-tax .tax:nth-of-type(n + 3) {margin-top: 4%;}
	#archives-works-tax .works_list {margin: 50px auto; padding: 0 16px;}
	#archives-works-tax .item {width: 48%; margin-right: 4%; padding-bottom: 10px; border-bottom: 1px solid #3687d2;}
	#archives-works-tax .item:nth-of-type(2n) {margin-right: 0;}
	#archives-works-tax .item:nth-of-type(n + 3) {margin-top: 8%;}
	#archives-works-tax .tax_tag {font-size: 3.5vw;}
	#archives-works-tax .img_box {margin-bottom: 10px;}
	#archives-works-tax h3 {font-size: 3vw;}
	#archives-works-tax .img_item {width: 100%;}
	#archives-works-tax .img_item .img_box {height: 120px;}
	

	/*contact_banner*/
	#contact_banner {padding: 50px 0;}
	#contact_banner .sp_flex {display: flex; justify-content: center;}
	#contact_banner .txt01 {font-size: 3.5vw; margin-top: 0;}
	#contact_banner .txt02 {font-size: 6vw; margin: 10px auto 0;}
	#contact_banner .logo {margin: 0; width: 40%; margin-right: 20px;}
	#contact_banner .tel span {font-size: 9vw;}
	#contact_banner .tel {font-size: 6vw;}
	#contact_banner .contact {display: block; margin-top: 20px;}
	#contact_banner .btn {margin: auto; font-size: 4vw; height: auto; padding: 5% 0; margin-top: 20px; width: calc(100% - 32px);}
	#contact_banner .address {margin-top: 10px; font-size: 3.5vw;}
	#contact_banner .address01 {margin-top: 30px;}
	
	/*footer*/
	footer {padding-top: 50px; background: #eee;}
	footer .logo {width: 35%;}
	footer .txt01 {margin: 15px 0 10px; font-size: 4vw;}
	footer .txt02 {font-size: 7vw;}
	footer .list {display: none;}
	footer .copy {margin-top: 50px; font-size: 3vw; padding: 5px 0;}
	.sp_pop_inner {display: flex; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100;}
	.sp_pop_inner a {width: 50%; box-sizing: border-box;}
	.sp_pop_inner a img {width: 100%;}
	
	
	
    #header.DownMove, #st_hamburger.DownMove,#header.UpMove, #st_hamburger.UpMove {animation: none;}
    
}
@media screen and (max-width:350px) {
header h1 {display: none;}
}