/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 11 2024 | 04:55:50 */
/*タブ切り替え全体のスタイル*/
.tabs2_1,.tabs2_2,.tabs2_3,.tabs2_4,.tabs2_5,.tabs2_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;}

/*タブのスタイル*/
.tab2_item_1, .tab2_item_2, .tab2_item_3, .tab2_item_4, .tab2_item_5, .tab2_item_6 {
  width: calc(100%/2);
  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;
}
.tab2_item_1:hover, .tab2_item_2:hover, .tab2_item_3:hover, .tab2_item_4:hover, .tab2_item_5:hover, .tab2_item_6:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab2_item_1"], input[name="tab2_item_2"], input[name="tab2_item_3"], input[name="tab2_item_4"], input[name="tab2_item_5"] , input[name="tab2_item_6"]  {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab2_content_1, .tab2_content_2, .tab2_content_3, .tab2_content_4, .tab2_content_5, .tab2_content_6 {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#tabu2_1_1:checked ~ #tabu2_1_1_content,
#tabu2_1_2:checked ~ #tabu2_1_2_content{
  display: block;
}

#tabu2_2_1:checked ~ #tabu2_2_1_content,
#tabu2_2_2:checked ~ #tabu2_2_2_content{
  display: block;
}
#tabu2_3_1:checked ~ #tabu2_3_1_content,
#tabu2_3_2:checked ~ #tabu2_3_2_content{
  display: block;
}
#tabu2_4_1:checked ~ #tabu2_4_1_content,
#tabu2_4_2:checked ~ #tabu2_4_2_content{
  display: block;
}
#tabu2_5_1:checked ~ #tabu2_5_1_content,
#tabu2_5_2:checked ~ #tabu2_5_2_content{
  display: block;
}
#tabu2_6_1:checked ~ #tabu2_6_1_content,
#tabu2_6_2:checked ~ #tabu2_6_2_content{
  display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs2_1 input:checked + .tab2_item_1,.tabs2_2 input:checked + .tab2_item_2,.tabs2_3 input:checked + .tab2_item_3,.tabs2_4 input:checked + .tab2_item_4,.tabs2_5 input:checked + .tab2_item_5,.tabs2_6 input:checked + .tab2_item_6{
  background-color: var(--color_main);
  color: #fff;
}

@media only screen and (max-width: 767px) {
/*タブ切り替え全体のスタイル*/
.tabs2_1,.tabs2_2,.tabs2_3,.tabs2_4,.tabs2_5,.tabs2_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;}

/*タブのスタイル*/
.tab2_item_1, .tab2_item_2, .tab2_item_3, .tab2_item_4, .tab2_item_5, .tab2_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;
}
.tab2_item_1:hover, .tab2_item_2:hover, .tab2_item_3:hover, .tab2_item_4:hover, .tab2_item_5:hover, .tab2_item_6:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab2_item_1"], input[name="tab2_item_2"], input[name="tab2_item_3"], input[name="tab2_item_4"], input[name="tab2_item_5"] , input[name="tab2_item_6"]  {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab2_content_1, .tab2_content_2, .tab2_content_3, .tab2_content_4, .tab2_content_5, .tab2_content_6 {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#tabu2_1_1:checked ~ #tabu2_1_1_content,
#tabu2_1_2:checked ~ #tabu2_1_2_content{
  display: block;
}

#tabu2_2_1:checked ~ #tabu2_2_1_content,
#tabu2_2_2:checked ~ #tabu2_2_2_content{
  display: block;
}
#tabu2_3_1:checked ~ #tabu2_3_1_content,
#tabu2_3_2:checked ~ #tabu2_3_2_content{
  display: block;
}
#tabu2_4_1:checked ~ #tabu2_4_1_content,
#tabu2_4_2:checked ~ #tabu2_4_2_content{
  display: block;
}
#tabu2_5_1:checked ~ #tabu2_5_1_content,
#tabu2_5_2:checked ~ #tabu2_5_2_content{
  display: block;
}
#tabu2_6_1:checked ~ #tabu2_6_1_content,
#tabu2_6_2:checked ~ #tabu2_6_2_content{
  display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs2_1 input:checked + .tab2_item_1,.tabs2_2 input:checked + .tab2_item_2,.tabs2_3 input:checked + .tab2_item_3,.tabs2_4 input:checked + .tab2_item_4,.tabs2_5 input:checked + .tab2_item_5,.tabs2_6 input:checked + .tab2_item_6{
  background-color: #c891ee;
  color: #fff;
}
}