/* ==========================================================
   OMAI UI KIT
   タブコンテンツ

   ・タブをクリックしてパネルを切り替えるブロック
   ・動作は「tabcontents」の js が担当しています
   ・「続きをよむ（.cp_box）」は別コードに分離しました
   ========================================================== */


/* ==========================================================
   1. 全体
   ========================================================== */

.tab-wrap{
    margin-bottom: 40px;
}

.tab-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}


/* ==========================================================
   2. タブ（クリックする部分）
   ========================================================== */

.tabcontents {
    flex-grow: 1;
    border-radius: 10px 10px 0 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin: 0 5px;
    padding: 14px 0 12px;
    text-align: center;
    transition: 1s;
    vertical-align: bottom;
}

/* 選択中のタブ */
.tabcontents.is-active{
    color:#FFF;
    transition: 0.5s;
    padding-bottom: 20px;
}

/* タブの色 */
.tab1{
      background: #ff5672;
}
.tab2{
      background: #ffbb00;
}
.tab3{
      background:  #008997;
}
.tabA1{
      background:  #4E340D;
}
.tabA2{
      background:   #846638;
}
.tabA3{
      background:  #B89F7A;
}


/* ==========================================================
   3. パネル（切り替わる中身）
   ========================================================== */

.panel-group{
    min-height:100px;
}

.panel{
    display:none;
}

/* 表示中のパネル */
.panel.is-show{
    display:block;
    border:solid 1px #CCC;
    padding:10px;
}

.panel a{
  text-decoration: underline;
}

.panel img{
  text-align:center;
  display:block;
  margin:auto;
  width:100%;
  max-width:350px;
  padding:10px;
}

/* テーマの余白を打ち消す */
.content div .panel {
    margin-top: 0;
}
.content div .panel-group {
    margin-top: 0;
}

/* パネル上部の色（タブの色と対にする） */
.panel.is-show.panel1{
  border-top: 15px solid #ff5672;
}
.panel.is-show.panel2{
  border-top: 15px solid  #ffbb00;
}
.panel.is-show.panel3{
  border-top: 15px solid  #008997;
}
.panel.is-show.panelA1{
  border-top: 15px solid  #4E340D;
}
.panel.is-show.panelA2{
  border-top: 15px solid  #846638;
}
.panel.is-show.panelA3{
  border-top: 15px solid  #B89F7A;
}


/* ==========================================================
   4. スマートフォン
   ========================================================== */

@media screen and (max-width:480px) {

.tabcontents{
    padding: 10px 0 7px;
    font-size: 13px;
}

.tabcontents.is-active{
    padding-bottom: 15px;
}

}