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

/*タブのスタイル*/
.tab_item {
width            : calc(100%/6.001);
height           : 60px;
border-bottom    : 3px solid crimson;
background-color : #d9d9d9;
line-height      : 60px;
font-size        : 12px;
font-family      : 'Noto Sans JP', sans-serif!important;/*ゴシック*/
font-weight      : 300;
text-align       : center;
color            : #565656;
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;
  clear: both;
  overflow: hidden;
  padding-right: 2%!important;
  padding-left: 2%!important;
}


/*選択されているタブのコンテンツのみを表示*/
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content,
#tab05:checked ~ #tab05_content,
#tab06:checked ~ #tab06_content {
display: block;
padding:0 50px;
font-size:16px!important;
}

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


.tab_bg{
background-repeat:no-repeat;
background-size:contain;
background-position:center center;  
}

.tab_bg01{
background-image:url(https://dl.dropboxusercontent.com/s/9h6582m0vxfc3je/menu-01.png);
}

.tabs input:checked + .tab_bg01 {
background-image:url(https://dl.dropboxusercontent.com/s/168s143mdz4z8lb/menu-01b.png);
}

.tab_bg02{
background-image:url(https://dl.dropboxusercontent.com/s/lt20cuvfqqxu3wv/menu-02.png);
}

.tabs input:checked + .tab_bg02{
background-image:url(https://dl.dropboxusercontent.com/s/fig4j51y1ctmazl/menu-02b.png);
}

.tab_bg03{
background-image:url(https://dl.dropboxusercontent.com/s/3ckrt2so7czouqg/menu-03.png);
}

.tabs input:checked + .tab_bg03{
background-image:url(https://dl.dropboxusercontent.com/s/y0g2393kyfqcr1u/menu-03b.png);
}

.tab_bg04{
background-image:url(https://dl.dropboxusercontent.com/s/4oy64dhq0svxkj1/menu-04.png);
}

.tabs input:checked + .tab_bg04{
background-image:url(https://dl.dropboxusercontent.com/s/qrl42eyo1him0at/menu-04b.png);
}

.tab_bg05{
background-image:url(https://dl.dropboxusercontent.com/s/5krkh4u7138sueh/menu-05.png);
}

.tabs input:checked + .tab_bg05{
background-image:url(https://dl.dropboxusercontent.com/s/fqk6c8kpleqbsco/menu-05b.png);
}

.tab_bg06{
background-image:url(https://dl.dropboxusercontent.com/s/ub8use89655rxaq/menu-06.png);
}

.tabs input:checked + .tab_bg06{
background-image:url(https://dl.dropboxusercontent.com/s/b4v1p4sbmcswh55/menu-06b.png);
}


/*===============================================
●横幅に合わせてタブを段組
===============================================*/

@media screen and (max-width: 1023px){
.tab_item {
width            : calc(100%/3);
}
}
@media screen and (max-width: 768px){
.tab_item {
width            : calc(100%/2);}
/*選択されているタブのコンテンツのみを表示*/
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content,
#tab05:checked ~ #tab05_content,
#tab06:checked ~ #tab06_content {
display: block;
padding:0 5px;
}
}

@media screen and (max-width: 350px){
.tab_item {
width            : calc(100%/1);
}
}

/*タブ｜6タブ ---------------------------------------------------------/*










/*タブ02 ---------------------------------------------------------/*

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

/*タブのスタイル*/
.tab_item02 {
  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;
}
.tab_item02:hover {
  opacity: 0.75;
}

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

/*タブ切り替えの中身のスタイル*/
.tab_content02 {
  display: none;
  padding: 1% 1% 0;
  clear: both;
  overflow: hidden;
  font-size: 90%;
}


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

/*選択されているタブのスタイルを変える*/
.tabs02 input:checked + .tab_item02 {
  background-color: #5ab4bd;
  color: #fff;
}




/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 1024px){
.tab_item02 {
  font-size: 12px;
}

  }


/*タブ02 ---------------------------------------------------------/*