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

/* ============================================================

   reset

============================================================ */
.hiraku-open-btn,
.js-offcanvas {display:none;}

/* ============================================================

   color

============================================================ */

.rgr {color:#666;}
.travel, .travel a {color:#00bef1;}
.daily, .daily a {color:#13c856;}
.bz, .bz a {color:#767384;}
.ds, .ds a {color:#fcad15;}
.ph, .ph a {color:#e4007f;}
.vc, .vc a {color:#8f82bc;}

.bttv {background:#36cbf3;}
.btda {background:#19da61;}
.btbz {background:#5f7394;}
.btds {background:#fcad15;}
.btph {background:#e4007f;}
.btvc {background:#8f82bc;}

.bgtv {background:#c7f3ff;}
.bgda {background:#c8fdca;}
.bgbz {background:#ddd7fa;}
.bgds {background:#f9e8c7;}
.bgph {background:#fbd6ea;}
.bgvc {background:#cdc4ec;}

/*tag*/
.basic:after,
.key-phrase:after,
.travel-phrase:after,
.boading:after,
.airplane:after,
.immigration:after,
.money-exchange:after,
.pay:after,
.hotel:after,
.restaurant:after,
.shopping:after,
.daily-phrase:after,
.introduction:after,
.family:after,
.residence:after,
.habit:after,
.eat:after,
.holiday:after,
.hobby:after,
.business-phrase:after,
.corporate:after,
.job:after
{	width:60px;
	padding-top:3px;
	font-size:10px;
	text-align:center;
	display:block;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;	
}

.basic:after {
	padding:0;
	line-height:1.4rem;
	display:inline-block;
	background:pink;
	color:#FFF;
	content:"KEY";
}

.key-phrase:after {background:pink;color:#FFF;content:"KEY";}

.travel-phrase:after,
.boading:after,
.airplane:after,
.immigration:after,
.money-exchange:after,
.pay:after,
.hotel:after,
.restaurant:after,
.shopping:after,
.travel-phrase-en:after
 {background:#00bef1;color:#FFF;content:"TRAVEL";}

.daily-phrase:after,
.introduction:after,
.family:after,
.residence:after,
.habit:after,
.eat:after,
.holiday:after,
.hobby:after
 {background:#00e406;color:#FFF;content:"DAILY";}

.business-phrase:after,
.corporate:after,
.job:after
 {background:#767384;color:#FFF;content:"BUSINESS";}

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  width: 100%;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor:pointer;
}
.tab_item:hover {
  opacity: 0.75;
}

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

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 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: #5ab4bd;
  color: #fff;
}


@media only screen and (max-width:767px){
	.tab_item h3 span {
		display:none;	
	}
}