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

/*---------------------------------
	index
---------------------------------*/
#faq #ttlBox {
    margin: 0 auto 40px;
    height: 150px;
    background: #f3ba6a;
}
#faq #ttlBox h1 {
    line-height: 150px;
    font-size: 3.4rem;
    color: #fff;
    text-align: center;
}
#faq .faq_content {
    width: 760px;
    margin: 0 auto;
}
@media (max-width: 780px) {
   #faq .faq_content {
        width: 90%;
    } 
}
@media (max-width: 480px) {
   #faq #ttlBox {
        height: 100px;
        margin: 0 auto 20px;
    }
    #faq #ttlBox h1 {
        line-height: 100px;
        font-size: 2.8rem;
        color: #fff;
        text-align: center;
    }
    #faq .faq_content {
        padding-bottom: 40px;
    }
}

#faq .faq_content dt,
#faq .faq_content dd {
    font-family: '游ゴシック',YuGothic,'Yu Gothic','Yu Gothic UI','Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Arial','Helvetica',sans-serif;
}
#faq .faq_content dt {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 20px;
}
#faq .faq_content dd {
    border-bottom: 1px solid #e7969a;
    padding-bottom: 40px;
    margin-bottom: 40px;
    font-size: 1.8rem;
}
#faq .faq_content dd span {
    font-weight: 600;
    font-size: 2.4rem;
}
#faq .faq_content dd a.link {
	margin: 20px 0 0;
    padding: 8px 10px;
    color: #FFFFFF;
    text-align: center;
    background: #e7969a;
    box-sizing: border-box;
    font-size: 1.6rem;
}
@media (max-width: 480px) {
   #faq .faq_content dt {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }
    #faq .faq_content dd {
        padding-bottom: 20px;
        margin-bottom: 20px;
        font-size: 1.4rem;
    }
    #faq .faq_content dd span {
        font-size: 1.8rem;
    }
	#faq .faq_content dd a.link {
		font-size: 1.4rem;
	}
}

/*タブ*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 60px;
  border-bottom: 3px solid #a48971;
  background-color: rgba(202,187,171,0.5);
  line-height: 62px;
  font-size: 2.8rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

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

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


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

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #a48971;
  color: #fff;
}
@media (max-width: 480px) {
.tab_item {
  height: 50px;
  line-height: 52px;
  font-size: 2.0rem;
}

	.tab_content {
		padding: 20px 0 0;
	}
}