body{
    font-size: 14px;
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
    line-height: 1.42857143;
    color: #565656;
}

.pageTitle{
    font-size: 20px;
    font-weight: bold;
    color:#333;
}

.pageTitle:before{
    content: "";
    display: inline-block;
    width: 19px;
    height: 22px;
    margin: 0 7px 0 0;
}
.pageTitle.dismissalTitle:before {
    background: url(img/icon_dismissal_red.png)left 0 top 6px no-repeat;
    background-size:18px;
}

.mainContent{
    padding: 30px;
    width: 100%;
}

/* button */

button{
    color:#fff;
    padding: 8px 30px 8px 55px;
    border:none;
    border-radius:6px;
    cursor: pointer;
    box-shadow: 1px 1px 2px #7b7b7b;
    background:#b90114;
}

button:hover{opacity: .8;}
button:focus{outline: none;}

button.btnBase{padding: 8px;width: 100%;}

/* table */
#sendMail_content table,
#receiveMail_content table,
#review_content table{
    border-collapse: collapse;
    width: 100%;
}

#sendMail_content th,
#receiveMail_content th,
#review_content th{
    background-color:#f9f9f9;
    padding: 10px;
    border:1px solid #b5b5b5;
}
#sendMail_content td,
#receiveMail_content td,
#review_content td{
    padding: 10px;
    border:1px solid #b5b5b5;
    position: relative;
    vertical-align: middle;
}
#sendMail_content td:nth-child(3),
#receiveMail_content td:nth-child(3),
#review_content td:nth-child(3){width: 12%;}

#sendMail_content td:nth-child(4),
#receiveMail_content td:nth-child(4),
#review_content td:nth-child(4){width: 15%;text-align: center;}

/* tab */


.tabs {
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    margin: 20px auto;
    position: relative;
}
.tabs:before{
    content: "";
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #b5b5b5;
    position: absolute;
    top:49px;
    z-index:1;
}


/*タブのスタイル*/
.tab_item {
  width: 250px;
  height: 50px;
  border: 1px solid #b5b5b5;
  background-color: #f9f9f9;
  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;
  box-sizing: border-box;
  z-index:10;
}
.tab_item:hover{cursor: pointer;background-color: #e0e0e0;}


.tab_item.tab01{
    border-radius: 10px 0 0 0;
    border-right:none;
    margin-left:50px;
}
.tab_item.tab01:before{
    content:"";
    display: inline-block;
    width: 13px;
    height: 13px;
    background:url(img/icon_send_gray.png)0 center no-repeat;
    background-size:contain;
    margin-right: 5px;
}
.tab_item.tab02{border-radius: 0;border-right:none;}
.tab_item.tab02:before{
    content:"";
    display: inline-block;
    width: 15px;
    height: 14px;
    background:url(img/icon_receive_gray.png)0 center no-repeat;
    background-size:contain;
    margin-right: 5px;
}
.tab_item.tab03{border-radius: 0 10px 0 0;}
.tab_item.tab03:before{
    content:"";
    display: inline-block;
    width: 15px;
    height: 14px;
    background:url(img/icon_review_gray.png)0 center no-repeat;
    background-size:contain;
    margin-right: 5px;
}

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

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 50px 50px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#sendMail:checked ~ #sendMail_content,
#receiveMail:checked ~ #receiveMail_content,
#review:checked ~ #review_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
    background-color: #fff;
    color: #b90114;
    border-bottom:1px solid #fff;
    z-index: 2;
    position: relative;
}
.tabs input:checked + .tab_item.tab01:before{
    background:url(img/icon_send_red.png)0 center no-repeat;
    background-size:contain;
}
.tabs input:checked + .tab_item.tab02:before {
    background:url(img/icon_receive_red.png)0 center no-repeat;
    background-size:contain;
}
.tabs input:checked + .tab_item.tab03:before {
    background:url(img/icon_review_red.png)0 center no-repeat;
    background-size:contain;
}



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

.tab_content{padding: 50px 20px 0;}
.tab_item{width: 180px;}
.tab_item.tab01{margin-left: 20px;}

}

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

.pageTitle{margin: 0;}
.tab_content{padding: 50px 10px 0;}
.tab_item{width: 33%;font-size: 13px;}
.tab_item.tab01{margin-left: 0;}

.scroll table{width:100%;}
.scroll{
    overflow: auto;
    white-space: nowrap;
}
.scroll::-webkit-scrollbar{height: 5px;}
.scroll::-webkit-scrollbar-track{background: #F1F1F1;}
.scroll::-webkit-scrollbar-thumb {background: #BCBCBC;}

.scroll table thead{display: none;}

}