/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 11 2024 | 04:53:06 */
/*タブ切り替え全体のスタイル*/
.tabs_1,.tabs_2,.tabs_3,.tabs_4,.tabs_5,.tabs_6 {
  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_1, .tab_item_2, .tab_item_3, .tab_item_4, .tab_item_5, .tab_item_6 {
  width: calc(100%/4);
  height: 50px;
  border-bottom: 3px solid var(--color_main);
  background-color: #f7efef;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: var(--color_main);
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item_1:hover, .tab_item_2:hover, .tab_item_3:hover, .tab_item_4:hover, .tab_item_5:hover, .tab_item_6:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item_1"], input[name="tab_item_2"], input[name="tab_item_3"], input[name="tab_item_4"], input[name="tab_item_5"] , input[name="tab_item_6"]  {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content_1, .tab_content_2, .tab_content_3, .tab_content_4, .tab_content_5, .tab_content_6 {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#tabu_1_1:checked ~ #tabu_1_1_content,
#tabu_1_2:checked ~ #tabu_1_2_content,
#tabu_1_3:checked ~ #tabu_1_3_content,
#tabu_1_4:checked ~ #tabu_1_4_content{
  display: block;
}

#tabu_2_1:checked ~ #tabu_2_1_content,
#tabu_2_2:checked ~ #tabu_2_2_content,
#tabu_2_3:checked ~ #tabu_2_3_content,
#tabu_2_4:checked ~ #tabu_2_4_content{
  display: block;
}
#tabu_3_1:checked ~ #tabu_3_1_content,
#tabu_3_2:checked ~ #tabu_3_2_content,
#tabu_3_3:checked ~ #tabu_3_3_content,
#tabu_3_4:checked ~ #tabu_3_4_content{
  display: block;
}
#tabu_4_1:checked ~ #tabu_4_1_content,
#tabu_4_2:checked ~ #tabu_4_2_content,
#tabu_4_3:checked ~ #tabu_4_3_content,
#tabu_4_4:checked ~ #tabu_4_4_content{
  display: block;
}
#tabu_5_1:checked ~ #tabu_5_1_content,
#tabu_5_2:checked ~ #tabu_5_2_content,
#tabu_5_3:checked ~ #tabu_5_3_content,
#tabu_5_4:checked ~ #tabu_5_4_content{
  display: block;
}
#tabu_6_1:checked ~ #tabu_6_1_content,
#tabu_6_2:checked ~ #tabu_6_2_content,
#tabu_6_3:checked ~ #tabu_6_3_content,
#tabu_6_4:checked ~ #tabu_6_4_content{
  display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs_1 input:checked + .tab_item_1,.tabs_2 input:checked + .tab_item_2,.tabs_3 input:checked + .tab_item_3,.tabs_4 input:checked + .tab_item_4,.tabs_5 input:checked + .tab_item_5,.tabs_6 input:checked + .tab_item_6{
  background-color: var(--color_main);
  color: #fff;
}

@media only screen and (max-width: 767px) {
/*タブ切り替え全体のスタイル*/
.tabs_1,.tabs_2,.tabs_3,.tabs_4,.tabs_5,.tabs_6 {
  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_1, .tab_item_2, .tab_item_3, .tab_item_4, .tab_item_5, .tab_item_6 {
  width: calc(100%/1);
  height: 50px;
  border-bottom: 3px solid var(--color_main);
  background-color: #f7efef;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: var(--color_main);
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item_1:hover, .tab_item_2:hover, .tab_item_3:hover, .tab_item_4:hover, .tab_item_5:hover, .tab_item_6:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item_1"], input[name="tab_item_2"], input[name="tab_item_3"], input[name="tab_item_4"], input[name="tab_item_5"] , input[name="tab_item_6"]  {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content_1, .tab_content_2, .tab_content_3, .tab_content_4, .tab_content_5, .tab_content_6 {
  display: none;
  padding: 20px 20px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#tabu_1_1:checked ~ #tabu_1_1_content,
#tabu_1_2:checked ~ #tabu_1_2_content,
#tabu_1_3:checked ~ #tabu_1_3_content,
#tabu_1_4:checked ~ #tabu_1_4_content{
  display: block;
}

#tabu_2_1:checked ~ #tabu_2_1_content,
#tabu_2_2:checked ~ #tabu_2_2_content,
#tabu_2_3:checked ~ #tabu_2_3_content,
#tabu_2_4:checked ~ #tabu_2_4_content{
  display: block;
}
#tabu_3_1:checked ~ #tabu_3_1_content,
#tabu_3_2:checked ~ #tabu_3_2_content,
#tabu_3_3:checked ~ #tabu_3_3_content,
#tabu_3_4:checked ~ #tabu_3_4_content{
  display: block;
}
#tabu_4_1:checked ~ #tabu_4_1_content,
#tabu_4_2:checked ~ #tabu_4_2_content,
#tabu_4_3:checked ~ #tabu_4_3_content,
#tabu_4_4:checked ~ #tabu_4_4_content{
  display: block;
}
#tabu_5_1:checked ~ #tabu_5_1_content,
#tabu_5_2:checked ~ #tabu_5_2_content,
#tabu_5_3:checked ~ #tabu_5_3_content,
#tabu_5_4:checked ~ #tabu_5_4_content{
  display: block;
}
#tabu_6_1:checked ~ #tabu_6_1_content,
#tabu_6_2:checked ~ #tabu_6_2_content,
#tabu_6_3:checked ~ #tabu_6_3_content,
#tabu_6_4:checked ~ #tabu_6_4_content{
  display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs_1 input:checked + .tab_item_1,.tabs_2 input:checked + .tab_item_2,.tabs_3 input:checked + .tab_item_3,.tabs_4 input:checked + .tab_item_4,.tabs_5 input:checked + .tab_item_5,.tabs_6 input:checked + .tab_item_6{
  background-color: var(--color_main);
  color: #fff;
}
}