/*
==================================================
## css Information
## Site URL: anythings
## File name: /excludes/css/_shared/mod/tabArea.css
## Summary: tabAreaコンポーネント用CSS
## Created: 2016.09.--
## Last update: 2025.07.16 :DDuet Iwai 
## Author: H.Muroi(ZP)
## comment: 
更新時など、基本的にはネストは3階層まででお願いします。
該当するHTMLとセットで読み込むことによりどのページでも利用できます。
==================================================
*/

/* tabArea */
/*
-usage-:下記HTMLブロックに該当
<article class="tabArea">
  ・
  略
  ・
</article>
*/
.tabArea {
  margin: 30px auto 0;
  width: 980px;
  text-align: left;
  position: relative;
}
.tabBox h3 {
  position: absolute;
  top: -42px;
  left: 0;
  font-size: 16px;
  width: 488px;
  height: 42px;
  border:1px solid #aaa;
  background-color:#eee;
}
.tabBox.tab01 h3{
  border-radius:5px 0 0 0;
  text-align: center;
  line-height: 42px;
}

.tabBox h3.is-active, .tabBox h3:hover {
   background-color:#fff;
  border-bottom:3px solid #e85282;
}
.tabBox .tab_content {
  display: none;
  padding: 0px 5px 10px 20px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 5px;
  margin-top: 70px;
  border-radius: 0 0 5px 5px;
  overflow-y: scroll;
  height: 180px;
}
.tabBox.tab02 h3 {
  left: 490px;
  border-radius:0 5px 0 0;
  text-align: center;
  line-height: 42px;
}
.tabBox.tab02 h3.is-active, .tabBox.tab02 h3:hover {
  background-position: -240px -50px;
}
.tabBox.tab03 h3 {
  background-position: -480px 0;
  left: 480px;
}
.tabBox.tab03 h3.is-active, .tabBox.tab03 h3:hover {
  background-position: -480px -100px;
}