/* Responsive styles
================================================== */

/* Large Devices, Wide Screens */
@media (min-width : 1200px) {
	.dropdown i{
		display: none;
	}
}


/* Medium Devices, Desktops */
@media (min-width : 992px) {
	.navbar-brand i{
		margin-right: 0px;
		font-size: 16px;
		line-height: 16px;
	}



}

/* Small Devices, Tablets */
@media (min-width : 768px) and (max-width: 991px) {

	p{
		font-size: 14px;
	}
	
	/*	banner slider ===========*/
	
	.crosscover-island{
		padding: 40px 0px;
	}
	
	.crosscover-island p{
		width: 90%;
	}
	.crosscover-item {
		background-position: center right 30%;
	}
.navbar-default .navbar-nav > li > a {
	padding: 23px 10px;
	letter-spacing: 0px;
}
.navbar-brand i{
	margin-right: 0px;
	font-size: 16px;
	line-height: 16px;
}

#section-movie .movie {
		width: 100%;
	}


}

/* Small Devices Potrait */
@media (max-width : 767px){
.crosscover-item {
		background-position: center right 30%;
	}
#section-movie .movie {
		width: 100%;
	}
	
}

/* Extra Small Devices, Phones */ 
@media (min-width : 320px) and (max-width: 478px)  {

	p{
		font-size: 14px;
	}
	
	.section-padding{
		padding: 50px 0px;
	}
  .section-padding:first-of-type{
		padding-top: 80px;
	}
    
/* Main  Slider==============================*/
    
	.crosscover-island{
		padding-top: 100px;
	}
  .crosscover-title{
       font-size: 22px;
      line-height: 30px;
    }
	.crosscover-island p{
		width: 90%;
		font-size: 13px;
	}

.navbar-custom{
	margin-top: 0px;
	background: #333;
	border-right: 0px;
}


/*about =============================*/
	.about-info,.service-box{
		margin-bottom: 30px;
	}


/*testimonial =================================*/


.test-inner {
    width: 100%;
}

/* BloG ==========================================*/
	#section-blog{
		padding-bottom: 20px;
	}
	.blog-box{
		margin-bottom: 40px;
	}
	
	
/* contact ==========================================*/

.contact-info-wrap{
	margin-bottom: 60px;
}


}

@media screen and (max-width: 640px) {
	/* section-catch ==========================================*/
  #section-catch h2{
    font-size: 26px;
 }
}
/*=====================================================
    FOOTER
==========================================================*/
@media (max-width : 767px) {
	#section-footer-btm {
    padding: 30px 0px 76px;
	}
}
/*=====================================================
    FLOW
==========================================================*/
@media (max-width : 1200px) {
	#section-flow .flowList li {
    padding: 20px 10px;
	}
	#section-flow .flowList li:not(:first-child) {
    padding-left: 50px;
	}
}
@media (min-width : 768px) and (max-width: 991px) {
	#section-flow .flowList li {
    font-size: 14px;
	}
	#section-flow .flowList li:not(:first-child) {
    padding-left: 40px;
	}
	#section-flow .flowList li span {
    width: 80px;
	}
	#section-flow .flowList li:not(:last-child)::before {
    border-width: 58px 0 58px 30px;
	}
}
@media (max-width : 767px) {
	#section-flow h2 {
		font-size: 24px;
	}
	#section-flow h3 {
		font-size: 20px;
		margin-bottom: 16px;
	}
	#section-flow .flow h4 {
		font-size: 18px;
		margin-top: 16px;
	}
	#section-flow .flowList {
    display: block;
	}
	#section-flow .flowList li {
    padding: 10px 0;
	}
	#section-flow .flowList li:not(:first-child) {
    padding-top: 30px;
		padding-left: 0;
	}
	#section-flow .flowList li:not(:last-child)::before {
    border-width: 20px 40px 0 40px;
		border-color: #d60e4c transparent transparent transparent;
		top: auto;
		bottom: -20px;
		left: 0;
		right: 0;
	}
	#section-flow .flowList li:nth-child(2)::before {
		border-color: #ec9e18 transparent transparent transparent;
	}
	#section-flow .flowList li:nth-child(3)::before {
		border-color: #88b92a transparent transparent transparent;
	}
	#section-flow .flowList li:nth-child(4)::before {
		border-color: #2281c5 transparent transparent transparent;
	}
	#section-flow .flow {
		padding-left: 0;
	}
	#section-flow .flow .step {
    width: 120px;
    height: auto;
    line-height: inherit;
    border-radius: 0;
    position: static;
		padding: 5px;
		margin-bottom: 5px;
	}
}
/*=====================================================
    SECTION COMPANY
==========================================================*/
@media (max-width : 767px) {
  #section-company .gmap iframe {
    height: 100vw;
  }
}
/*=====================================================
    CLIENT
==========================================================*/
@media (max-width : 767px) {
	#section-client .flex_box {
		display: block;
	}
	#section-client .flex_box figure {
		margin: 0 auto 20px;
	}
}
/*=====================================================
    ZERO
==========================================================*/
@media (max-width: 991px) {
	#section-zero .zero_main .txt {
		padding: 20px;
	}
	#section-zero .zero_sub {
		font-size: 16px;
	}
	#section-zero .zero_label {
		font-size: 24px;
		padding: 10px 20px;
	}
	#section-zero .zero_copy {
		font-size: 20px;
	}
	#section-zero .zero_main .img {
		min-width: auto;
		flex: auto;
	}
}
@media (max-width : 767px) {
	#section-zero .zero_main {
		display: block;
		margin-bottom: 40px;
	}
	#section-zero .zero_main .txt {
		text-align: center;
		padding: 15px;
	}
	#section-zero .zero_label {
		display: inline-block;
	}
	#section-zero .zero_copy span {
		display: block;
		text-indent: -3em;
	}
	#section-zero .zero_copy span:last-child {
		text-indent: 3em;
	}
	#section-zero .zero_main .img {
		min-width: auto;
		padding-top: 45vw;
	}
	#section-zero .zero_error {
		padding: 20px;
	}
	#section-zero h3 {
		font-size: 24px;
	}
	#section-zero h3 span {
		font-size: 14px;
	}
	#section-zero h4 {
		margin: 40px 0 10px;
	}	
	#section-zero .flex_box {
		display: block;
	}
	#section-zero .flex_box figure {
		margin: 0 auto 20px;
	}
}
/*=====================================================
    CAREERUP
==========================================================*/
@media (max-width : 640px) {
  #section-careerup .movie_list {
    grid-template-columns: auto;
    row-gap: 20px;
  }
  #section-careerup .video_wrap .time {
    font-size: 14px;
  }
}
/*=====================================================
    EXPLANATION
==========================================================*/
@media (max-width : 640px) {
	#section-explanation .explanation_box {
		display: block;
	}
	#section-explanation .point {
  	justify-content: center;
	}
	#section-explanation .point li:not(:last-child) {
  	margin-right: 10px;
	}
	#section-explanation .point li span {
  	font-size: 14px;
	}
	#section-explanation .present {
  	margin-top: 40px;
		margin-bottom: 40px;
	}
	#section-explanation .presentWrap {
  	width: 100%;
    padding: 15px;
	}
	#section-explanation .presentWrap .sub {
  	font-size: 14px;
	}
	#section-explanation .presentWrap .title {
  	font-size: 15px;
	}
	#section-explanation .presentWrap dd{
	  font-size: 18px;
    padding: 0;
    background-position: right bottom;
    background-size: 60px auto;
    line-height: 27px;
	}
	#section-explanation .presentWrap dd span {
  	font-size: 24px;
	}
	#section-explanation .presentBox{
  	width: 100%;
    padding: 20px;
    font-size: 18px;
    display: block;
		margin: 40px 0;
	}
	#section-explanation .presentBox p {
		font-size: 18px;
	}
	#section-explanation .presentBox .text-center {
		margin-bottom: 10px;
	}
	#section-explanation .presentBox img {
		width: 60px;
    height: auto;
	}
	#section-explanation .table01 th, #section-explanation .table01 td {
    width: auto;
    display: block; 
    border-top: none;
		padding: 10px;
  }
	#section-explanation .table01 tr:first-child th {
    border-top: 1px solid #ccc;
  }
	#section-explanation .howTo {
    display: block;
  }
  #section-explanation .howTo div {
    margin: 0 auto;
  }
	#section-explanation .howTo p {
  	text-align: center;
    margin: 10px auto;
	}
}
/*=====================================================
    ENTRY
==========================================================*/
@media (max-width : 640px) {
	#section-entry .table01 th, #section-entry .table01 td {
    width: auto;
    display: block; 
    border-top: none;
		padding: 10px;
  }
	#section-entry .table01 tr:first-child th {
    border-top: 1px solid #ccc;
  }
}

/*=====================================================
    追従バナー
==========================================================*/
@media (max-width : 767px) {
	#fltBnr {
  	width: 100%;
  	bottom: 0;
	}
	#fltBnr ul {
		display: flex;
		background: #fff;
	}
	#fltBnr li {
		flex: 0 0 calc(100% / 3);
		border-radius: 0;
	}
	#fltBnr li:not(:last-child) {
		margin-bottom: 0;
		border-right: 1px solid #fff;
	}
	#fltBnr li a {
		font-size: 12px;
		text-align: center;
		line-height: 1.5;
		padding: 5px;
	}
	#fltBnr li a span {
		display: block;
	}
}

/*=====================================================
    PC・スマホ切り替え
==========================================================*/
@media screen and (max-width: 640px) {
  .pc {
    display: none !important;
  }
  .mb {
    display: initial !important;
  }
  .pcBlock {
    display: initial !important;
  }
  .mbBlock {
    display: block !important;
  }
}