/* CSS Document */
@media (max-width: 459px) {
.box__contact {
	padding: 100px 0;
	line-height: 1rem;
}


}

@media screen and  (min-width: 460px) and (max-width: 767px) {	
.box__contact {
	padding: 100px 0;
}


}

@media screen and  (min-width: 768px) and (max-width: 991px) {	
	
.box__contact {
	padding: 100px 0;
}

}

@media (min-width: 992px) {	
.box__contact {
	padding: 100px 0;
}



}

@media (max-width: 991px) {
.form_box .box01{
	margin: 20px auto;
}

.form_box .box01 dl{
	margin-bottom: 10px;
	padding-bottom: 5px;
	overflow: hidden;
}

.form_box .box01 dt{
	color: #34478b;
	font-size:1.2rem;
	line-height: 20px;
}

.form_box .box01 dd{
	min-height: 20px;
	line-height: 20px;
	padding-bottom: 10px;
	font-size:1.2rem;


}

.form_box .box01 input{
	height: 30px;
	width: 100%;
	background-color: #EDEDEE;
	border:none;
	padding: 0 0.5em;
}
.form_box .box01 .input--extend{
	height: 15px;
	width: 30px;

}


.form_box .box01 textarea{
	height: 100px;
	width: 100%;
	background-color: #EDEDEE;
	border:none;
	padding: 0 0.5em;
}
	
.form_box .box01 dd.text{
	color: #34478b;
	line-height: 150%;
	font-size: 1rem;
}

.form_box .box01 .bn a{
	background-color:  #34478b;
	color: #fff;
	font-size: 1.4rem;
	width: 200px;
	height: 50px;
	line-height: 50px;
	margin: 10px auto;
	display: block;
	letter-spacing: .2rem;
	text-indent: .2rem;
	text-align: center;}

}
@media (min-width: 992px) {
.form_box{
	margin: 20px auto;
	width: 90%;
}
.form_box .box01{
	margin-bottom: 60px;
}

.form_box .box01 dl{
	overflow: hidden;
}

.form_box .box01 dt{
	color: #34478b;
	float: left;
	font-size:1.4rem;
	min-height: 20px;
	line-height: 20px;
	padding-bottom: 10px;
	width: 20%;
}

.form_box .box01 dd.w40{
	float: left;
	font-size:1.4rem;
	min-height: 20px;
	line-height: 20px;
	padding-bottom:5px;
	width: 40%;
	font-weight: normal;
}

.form_box .box01 dd.w40_lh20{
	float: left;
	font-size:1.4rem;
	min-height: 20px;
	line-height: 20px;
	padding-bottom:5px;
	margin-left: 20%;
	width: 40%;
	font-weight: normal;
}

.form_box .box01 dt.w100{
	color: #34478b;
	float: none;
	font-size:1.4rem;
	min-height: 20px;
	line-height: 20px;
	padding-bottom: 10px;
	width: 100%;
}

.form_box .box01 dd.w80{
	float: none;
	min-height: 20px;
	line-height: 20px;
	padding-bottom: 10px;
	width: 80%;
	margin-left: 20%;
	
}

.form_box .box01 dd.w100{
	float: none;
	min-height: 20px;
	line-height: 20px;
	padding-bottom: 10px;
	width: 80%;
	margin-left: 20%;
	font-size: 1.4rem;
	}

.form_box .box01 dd.text{
	color: #34478b;
	line-height: 150%;
	font-size: 1rem;
	padding: 20px 0;
	clear: both;
}


.form_box .box01 input{
	height: 20px;
	background-color: #EDEDEE;
	border:none;
	padding: 0 0.5em;
}

.form_box .box01 input.w50{
	height: 20px;
	background-color: #EDEDEE;
	border:none;
	padding: 0 0.5em;
	margin-left: 5%;
	width: 45%;
}

.form_box .box01 input.w80{
	height: 20px;
	width: 80%;
	background-color: #EDEDEE;
	border:none;
	padding: 0 0.5em;
}

.form_box .box01 input.w100{
	height: 20px;
	width: 100%;
	background-color: #EDEDEE;
	border:none;
	padding: 0 0.5em;
	font-size: 1.4rem;
	}

.form_box .box01 .input--extend{
	height: 15px;
	width: 30px;
}
	
.form_box .box01 .input--extend span{
	height: 25px;
	line-height: 25px;
}

.form_box .box01 textarea{
	height: 100px;
	width: 100%;
	background-color: #EDEDEE;
	border:none;
	padding: 0 0.5em;
}

.form_box .box01 .bn a{
	background-color:  #34478b;
	color: #fff;
	font-size: 1.4rem;
	width: 200px;
	height: 50px;
	line-height: 50px;
	margin: 10px auto;
	display: block;
	letter-spacing: .2rem;
	text-indent: .2rem;
	text-align: center;
}

}

@media (max-width: 459px) {

/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #e8e8e9;
	margin: 0 auto;
}

/*タブのスタイル*/
.tab_item1 {
  width: calc(33.33% - 2px );
  height: 50px;
  background-color: #fff;
	line-height: 1rem;
	font-size:1rem;

  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
	margin-bottom: 30px;
	margin-right: 2px;
	padding-top:1rem; 
}
.tab_item2 {
  width: calc(33.33% - 2px );
  height: 50px;
  background-color: #fff;
	line-height: 1rem;
	font-size:1rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
	margin-bottom: 30px;
	margin-left: 1px;
	margin-right: 1px;
	padding-top:1rem; 
}
.tab_item3 {
  width: calc(33.33% - 2px );
  height: 50px;
  background-color: #fff;
	line-height: 1rem;
	font-size:1rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
	margin-bottom: 30px;
	margin-left: 2px;
	padding-top:1rem; 
}

.tab_item1:hover, .tab_item2:hover, .tab_item3:hover {
  opacity: 0.75;
}
}
@media (min-width: 460px) {

/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #e8e8e9;
	margin: 0 auto;
}

/*タブのスタイル*/
.tab_item1 {
  width: calc(33.33% - 2px );
  height: 50px;
  background-color: #fff;
  line-height: 50px;
	font-size:1.4rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
	margin-bottom: 30px;
	margin-right: 2px;
}
.tab_item2 {
  width: calc(33.33% - 2px );
  height: 50px;
  background-color: #fff;
  line-height: 50px;
	font-size:1.4rem;

  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
	margin-bottom: 30px;
	margin-left: 1px;
	margin-right: 1px;
}
.tab_item3 {
  width: calc(33.33% - 2px );
  height: 50px;
  background-color: #fff;
  line-height: 50px;
	font-size:1.4rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
	margin-bottom: 30px;
	margin-left: 2px;
}

.tab_item1:hover, .tab_item2:hover, .tab_item3:hover {
  opacity: 0.75;
}
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
  background-color: #fff;
}

@media (max-width: 479px) {
.tab_content {
	font-size: .7rem;
	line-height: .8rem;
}

}

@media screen and (min-width:480px) and ( max-width:767px) {
.tab_content {
	font-size: .8rem;
}

}

@media (min-width: 768px) {
.tab_content {
}
	
p{
	width: 50%;
	float: left;
	}
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item1,.tabs input:checked + .tab_item2,.tabs input:checked + .tab_item3 {
  background-color: #34478b;
  color: #fff;
}

.tabs input:checked + .tab_item1:after{
  content: "";
  position: absolute;
  top:50px;
  left: calc(100%/6.4);
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #34478b transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}
.tabs input:checked + .tab_item2:after{
  content: "";
  position: absolute;
  right: 0;
  top:50px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #34478b transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}
.tabs input:checked + .tab_item3:after{
  content: "";
  position: absolute;
  right: calc(100%/6.4);
  top:50px;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #34478b transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}