@charset "utf-8";

/************************************************
 tables
************************************************ */
/* デフォルトテーブル
----------------------------------------------- */
table {
    margin: 15px auto 20px auto;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
table th {
    padding: 8px;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    color: #333;
    background-color: #FEEFEF ;
    font-weight: bold;
}
table td {
    padding: 8px;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
}

/* 入力エリア
----------------------------------------------- */
table.table_input,
table.table_detail {
    display: block;
    margin: 0;
    border-top: none;
    border-left: none;
    width: auto;
}

table.table_input{
    max-width: 1000px;
    margin: 20px auto 80px;
}
div#undercolumn_shopping .form_area table.table_input{
    margin: 20px auto 20px;
}
table.table_input tbody,
table.table_detail tbody {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
}

/*table.table_input tr,*/
table.table_detail tr {
    display: block;
    background-color: #E5D9AD;
    margin: -1px 0 0 0;
    padding: 0;
    border: 1px solid #000000;
}

/* 2023/10/04 k-harada START めぐりすらりサイト構築対応 */

table.table_input tr {
    margin-bottom: 10px;
    display: flex;
    background: #FEEFEF;
    padding: 0;
    min-height: 80px;
}

table.table_input th{
    display: block;
    width: 307px !important;
    line-height: 3em;
    float: left;
    box-sizing: border-box;
    padding: 0 22px 0 30px;
    position: relative;
    font-size: 20px;
    color: #F56E6E;
    border-right: none;
    border-bottom: none;
    background-color: transparent;
    text-align: left;
    margin: auto;
}

.entry_confirm_page table tr{
    height: auto;
    /*min-height: 80px;*/
}

.entry_confirm_page table td, div#mycontents_area .delivname_confirm_page table.delivname td{
    padding-top: 25px;
}

table td {
    font-size: 18px;
    padding: 15px;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
}
/* 2023/10/04 k-harada END めぐりすらりサイト構築対応 */

table.table_input tr:after,
table.table_detail tr:after {
    content: "";
    display: block;
    clear: both;
}
/*table.table_input th,*/
table.table_detail th {
    display: block;
    width: 27%;
    line-height: 3em;
    float: left;
    box-sizing: border-box;
    padding: 0 0 0 1em;
    position: relative;
    font-size: 1.1em;
    border-right: none;
    border-bottom: none;
    background-color: transparent;
    text-align: left;
}

/* 2023/10/04 k-harada START めぐりすらりサイト構築対応 */
table.table_input th.arbitrary:after {
    content: '任意';
    /*background: #C7C7C7;
    padding: 0 1em;*/
    font-size: 17px;
    background: #B3B3B3;
    color: #fff;
    width: 48px;
    text-align: center;
    padding: 2px 2px;
    line-height: 1.5em;
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%);
}
table.table_input th.required:after {
    content: '必須';
    /*background: #bb1a1a;*/
    font-size: 17px;
    background: #C7161D;
    color: #fff;
    width: 48px;
    text-align: center;
    padding: 2px 2px;
    line-height: 1.5em;
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%);
}
div#window_area table.table_input th{
    display: block;
    width: 304px !important;
}
.musttag {
    background-color: #bb1a1a;
    color: #fff;
    padding: 2px 0;
    font-weight: bold;
}
div#undercolumn_entry .entry_confirm_page table.table_input td{
  overflow-wrap: break-word;
}
@media screen and (max-width: 768px) {
    table.table_input tr{
        flex-flow: column;
        width: 100%;
        margin: auto;
    }
    
    table.table_input th:after {
        right: 25px;
        letter-spacing: 0;
    }
    
    table.table_input th.required:after {
        right: 25px;
        letter-spacing: 0;
    }
    div#undercolumn_entry .radio_area{
        padding: 10px 0;
    }
    div#window_area table.table_input th {
        display: block;
        width: 100% !important;
    }
}
/* 2023/10/04 k-harada END めぐりすらりサイト構築対応 */

table.table_input td,
table.table_detail td {
    display: inline-block;
    width: calc( 100% - 307px );
    /*float: right;*/
    background: #fff;
    box-sizing: border-box;
    line-height: 1.5;
    border-right: none;
    border-bottom: none;
    font-size: 20px;
}
table.table_input td span {
    display: inline-block;
}
/* 2023/10/13 k-harada START めぐりすらりサイト構築対応 */
table.card_tb td{
    width: calc( 100% - 307px ) !important;
    text-align: left;
}
.form_area .table_input input[name="name01"], .form_area .table_input input[name="name02"], .form_area .table_input input[name="kana01"], .form_area .table_input input[name="kana02"]{
    width: calc( 45% - 50px );
}
/* 2023/10/13 k-harada END めぐりすらりサイト構築対応 */
@media screen and (max-width:768px) {
    
   /* 2023/10/04 k-harada START めぐりすらりサイト構築対応 */
    table.table_input th,
    table.table_detail th {
        width: 100% !important;
        float: none;
        /*padding: 0 24px 0 30px;*/
        padding-top: 10px;
        height: 80px;
        font-size: 20px;
        /*height: 100px;*/
        letter-spacing: 4px;
    }
    table.table_input {
        margin: 20px auto 40px;
    }
    .form_area .table_input input[name="name01"], .form_area .table_input input[name="name02"], .form_area .table_input input[name="kana01"], .form_area .table_input input[name="kana02"]{
        width: calc(100% - 53px);
    }   
    table.table_input td,
    table.table_detail td {
        width: 100%;
        float: none;
        font-size: 20px;
        min-height: 80px;
        padding: 10px 0;
        vertical-align: middle;
    }
    table.card_tb td {
        padding: 20px 0;
    }
    table.card_tb td {
        width:100% !important;
    }
    .form_area table.card_tb select{
        margin-top: 0;
        margin-bottom: 0;
    }
    /*div#mycontents_area table.delivname td{
        padding-top: 8px;
    }*/
    .entry_confirm_page table.table_input td, div#mycontents_area .delivname_confirm_page table.delivname td {
        padding: 29px 14px 29px 14px;
    }
    div#window_area table.table_input .pass_name{
        margin-bottom: 10px;
    }
    /* 2023/10/04 k-harada END めぐりすらりサイト構築対応 */
    .form_area .table_input input.box60, .form_area .table_input input.box300, .form_area .table_input select, .form_area .table_input input[name="password02"]{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .form_area .table_input input.box60{
        width: 30%;
        max-width: 85px;
    }
    div#payment_form_body input.box60 {
        max-width: 150px;
    }
}

/* 2023/10/05 k-harada START めぐりすらりサイト構築対応 */
@media screen and (min-width:769px){
    .entry_confirm_page table td, div#mycontents_area .delivname_confirm_page table.delivname td{
        border-top: 1px solid #FEEFEF;
        border-bottom: 1px solid  #FEEFEF;
    }
    div#mycontents_area table.delivname td{
        vertical-align: middle;
    }
}
@media (max-width: 414px){
    table.table_input {
        margin: 15px auto 15px;
    }
    table td {
        /*padding: 7px;*/
        border-right: 1px solid #999999;
        border-bottom: 1px solid #999999;
        font-size: 12px;
    }
    table.table_input th, table.table_detail th {
        font-size: 13px;
    }
    .form_area .furigana{
        font-size: 12px;
        width: 30px;
    }
    .form_area .table_input input[type="text"], .form_area .table_input input[type="password"], .form_area .table_input input.box300, .form_area .table_input input.box60, .form_area .table_input select{
        height: 36px !important;
        font-size: 12px !important;
        padding: 5px;
    }
    table.table_input th, table.table_detail th{
        height: 47px;
        padding: 5px 14px 1px 17px;
        letter-spacing: 0.7px;
    }
    .entry_confirm_page table.table_input td {
        padding: 11px 14px 17px 14px;
    }
    div#mycontents_area .delivname_confirm_page table.delivname td{
        padding: 13px 14px 12px 14px;
    }
    .form_area .table_input label{
        font-size: 12px !important;
    }
    table.table_input td, table.table_detail td{
        font-size: 13px;
        padding: 5px 0;
    }
    table.card_tb td{
        padding: 10px 0;
    }
    table.table_input th.required:after {
        content: '必須';
        /* background: #bb1a1a; */
        font-size: 10px;
        background: #C7161D;
        color: #fff;
        width: 33px;
        text-align: center;
        padding: 2px 0;
        line-height: 1.5em;
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
    }
    table.table_input th.arbitrary:after {
        content: '任意';
        font-size: 10px;
        background: #B3B3B3;
        color: #fff;
        width: 33px;
        text-align: center;
        padding: 2px 0;
        line-height: 1.5em;
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
    }
    table.table_input td, table.table_detail td{
        min-height: 47px;
    }
    .form_area .table_input input[name="name01"], .form_area .table_input input[name="name02"], .form_area .table_input input[name="kana01"], .form_area .table_input input[name="kana02"]{
        width: calc(100% - 30px);
    }
    table.regist_card td{
        padding: 5px 10px;
    }
}
/* 2023/10/05 k-harada END めぐりすらりサイト構築対応 */

/* 見出し
----------------------------------------------- */
div#undercolumn_shopping table th[scope=col] {
    text-align: center;
}
div#undercolumn_shopping table.delivname th {
    width: 155px;
}

/* MYページ */
div#mycontents_area table th {
    text-align: left;
}
div#mycontents_area table th.alignR {
    text-align: right;
}
div#mycontents_area table th.alignL {
    text-align: left;
}
div#mycontents_area table th.alignC {
    text-align: center;
}
div#mycontents_area table th.resulttd {
    text-align: right;
}
div#mycontents_area table caption {
    padding: 8px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    color: #000;
    background-color: #f0f0f0;
    text-align: left;
    font-weight: bold;
}


/* その他
----------------------------------------------- */
/*table select {
    margin-bottom: 7px;
    border: solid 1px #ccc;
}*/

/*　送料の表レイアウト　*/
table.postage th {
  text-align: center;
  background-color: #F9F6EB;
}

table.postage td.first {
  text-align: center;
  vertical-align: middle;
}

table.postage td.third {
  text-align: right;
}