/*-------------------------------------------背景*/
body {
	background-color: #7459A6;
	background-image: url(bg/24.gif);
	background-attachment: fixed;
	background-repeat: repeat-x;
	background-position: center top;
	font-size: 16px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/*-------------------------------------------外枠*/
.table-main {
	background-color: #E6DEED;
	border: 4px double #726896;
	padding: 10px;
	text-align: center;
    width: 100%;
}
input{
    box-sizing: border-box;
}
/*---------------------------------------タイトル*/
/*外枠*/
.table-title {
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #726896;
	width: 100%;
}
/*内部*/
.td-title {
	font-size: 16px;
	font-weight: bold;
	color: #252342;
	text-align: center;
}
/*-----------------------------------メッセージ欄*/
/*外枠*/
.table-message {
	width: 100%;
	border: 1px solid #726896;
}
/*内部*/
.td-message {
	font-size: 12px;
	color: #252342;
	background-color: #E6DEED;
	padding: 3px;
	text-align: center;
}
/*-------------------------------------エラー表示*/
.td-error {
	font-size: 14px;
	font-weight: bold;
	color: #FF0000;
}
/*---------------------------------------フォーム*/
/*外枠*/
.table-item {
	width: 100%;
	border: 1px solid #726896;
}
/*内部（タイトル）*/
.td-item-title {
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #726896;
	text-align: center;
	width: 200px;
	padding: 3px;
}
/*内部（入力欄）*/
.td-item-comment {
	font-size: 12px;
	color: #252342;
	background-color: #E6DEED;
	padding: 3px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #726896;
	text-align: left;
}
/*-----------------------------------テキスト入力*/
/*--（中）名前など--*/
.form-textline01 {
	font-size: 12px;
	color: #333333;
	width: 150px;
}
/*--（小）姓名など--*/
.form-textline02 {
	font-size: 12px;
	color: #333333;
	width: 70px;
}
/*--（大）住所--*/
.form-textline03 {
	font-size: 12px;
	color: #333333;
	width: 100%;
}

/*--郵便番号--*/
.form-textline04 {
	font-size: 12px;
	color: #333333;
	width: 40px;
}
/*--添付ファイル--*/
.form-upfile {
	font-size: 12px;
	color: #333333;
	width: 100%;
}
/*--フリー（ライン）--*/
.form-textline {
	font-size: 12px;
	color: #333333;
}
/*--フリー（ボックス）--*/
.form-textbox {
	font-size: 12px;
	color: #333333;
}
/*-------------------------------------送信ボタン*/
/*外枠*/
.table-submit {
	width: 100%;
	border: 1px solid #726896;
}
/*内部*/
.td-submit {
	background-color: #726896;
	text-align: right;
	padding: 3px;
}
/*ボタン*/
.form-button {
    padding: 3px 5px;
	border: thin solid;
	background-color: #FFFFFF;
	color: #252342;
	width: 100px;
    font-weight: normal;
}
/*-----------------------------------注文フォーム*/
/*-------------------------（有料ユーザーに対応）*/
/*外枠*/
.table-order {
	border: medium double #726896;
	width: 100%;
}
/*メッセージ欄*/
.td-order-message {
	font-size: 12px;
	color: #252342;
	background-color: #E6DEED;
	padding: 3px;
	text-align: center;
}
/*タイトル*/
.td-order-title {
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #726896;
	text-align: center;
	padding: 3px;
}
/*商品名欄*/
.td-order-comment01,
.td-order-comment02,
.td-order-comment03,
.td-order-comment04{
    text-align: left;
}
.td-order-comment01 {
	font-size: 12px;
	color: #252342;
	background-color: #E6DEED;
	padding: 3px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #726896;
}
/*価格欄*/
.td-order-comment02 {
	font-size: 12px;
	color: #252342;
	background-color: #E6DEED;
	padding: 3px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #726896;
	text-align: right;
}
/*注文数欄*/
.td-order-comment03 {
	font-size: 12px;
	color: #252342;
	background-color: #E6DEED;
	padding: 3px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #726896;
	text-align: right;
}
/*単位欄*/
.td-order-comment04 {
	font-size: 12px;
	color: #252342;
	background-color: #E6DEED;
	padding: 3px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #726896;
}
/*フリー選択欄（お支払い方法、お届け時間帯指定）*/
.td-order-comment05 {
	font-size: 12px;
	color: #252342;
	background-color: #E6DEED;
	padding: 3px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #726896;
	text-align: right;
}
/*-----------------------------------------------*/
@media (max-width: 767px){
    * {
        box-sizing: border-box;
    }
    body{
        font-size:14px;
    }

    /* 入力欄設定 */
    input[type="submit"],
    input[type="button"] {
        border-radius: 0;
        -webkit-box-sizing: content-box;
        -webkit-appearance: button;
        appearance: button;
        border: none;
        box-sizing: border-box;
        cursor: pointer;
    }

    button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    textarea {
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    }
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="password"],
    textarea,
    textarea.form-textbox,
    select{
        padding: 5px 5px ;
        border: 1px solid #6a6a6a;
        background-color: #FFF;
        font-size: 16px;
        color: #333333;
        border-radius: 3px;
        -webkit-appearance: none;
        -webkit-appearance: none;
        appearance: none;
    }

    select {
        padding-right: 23px;
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.48%22%20height%3D%226.606%22%20viewBox%3D%220%200%209.48%206.606%22%3E%3Cpolygon%20points%3D%224.74%206.606%202.37%203.303%200%200%204.74%200%209.48%200%207.11%203.303%204.74%206.606%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: center right 8px;
    }
    table select{
        overflow:hidden;
    }
    input[type="radio"],
    input[type="checkbox"] {
        margin: 10px 5px 20px 10px;
    }
    .table-order td {
        white-space: normal;
    }
    .table-main,
    .table-main > tbody,
    .table-main > tbody > tr,
    .table-main > tbody > tr > td{
        display: block;
    }
    select{
        max-width:100%;
    }
     .td-order-comment05 select{
        width:100%;
    }
    
    .td-message,
    .td-item-title,
    .td-item-comment,
    .form-textline01,
    .form-textline02,
    .form-textline03,
    .form-textline04,
    .form-upfile,
    .form-textline,
    .form-textbox,
    .td-order-message,
    .td-order-title,
    .td-order-comment01,
    .td-order-comment02,
    .td-order-comment03,
    .td-order-comment04,
    .td-order-comment05,
    .form-button{
    	font-size: 14px;
    }
    .form-button {
    	font-size: 14px;
    }
    .table-order{
        padding: 0;
    }
    .td-order-comment01 select {
        min-width: 100px;
        width: 100%;
    }
    td.td-order-comment03 {
        padding-right: 0;
    }
    .td-order-comment03 select {
        min-width:100px;
    }

    td.confirmation-notes-headline{
        padding-top:40px;
        padding-bottom:5px;
        background-color: transparent;
        color:#252342;
        text-align: left;
    }
    td.confirmation-notes-td{
        padding-top:5px;
        padding-bottom:5px;
        background-color: transparent;
        border:none;
        text-align: left;
    }
    td.confirmation-notes-td b{
        font-weight: normal;
    }

    .confirmation-table-order br{
        display: none;
    }

    .table-item,
    .table-item tbody,
    .table-item tr,
    .table-item td{
        display: block;
        width: 100%;
    }

    .table-item input,
    .table-item select,
    .table-item textarea {
        margin-bottom: 5px;
    }

    .table-item select {
        width: calc(100% - 55px);
        min-width: 100px;
    }

    .form-textline01 {
        min-width: 200px;
    }

    .form-textline03 {
        width: calc(100% - 55px);
    }

    .form-textline04 {
        width: 100%;
        max-width: 80px;
        margin-right: 5px;
        margin-left: 5px;
    }

    .form-textline {
        width: calc(100% - 55px);
    }

    input[name="gender"]:nth-child(2) {
        margin-left: 50px;
    }

    .form-textbox {
        width: calc(100% - 55px);
    }

    td.td-item-title {
        padding-top:20px;
        padding-bottom:0;
        color: #252342;
        background-color: transparent;
        text-align: left;
        width: 100%;
    }

    .table-item tr:first-child td.td-item-title {
        padding-top:10px;
    }

    .td-item-comment {
    	border:none;
    }
    .td-item-comment .btn {
        padding: 3px 5px;
    	border: thin solid;
    	background-color: #FFFFFF;
    	color: #252342;
        font-size: 14px;
        border-radius: 3px;
    }
    .payment_incomplete,
    .payment_begin {
        display: block;
    }

    #id_beginpayment{
        text-align: center;
    }

    #id_beginpayment input[type="submit"] {
        padding: 3px 5px;
    	border: thin solid;
    	background-color: #FFFFFF;
    	color: #333333;
        font-weight: normal;
        font-size:18px;
    }
}
@media (max-width: 540px){

    .table-order select {
        display: block;
    }

    .td-order-comment01 select {
        margin-top: 5px;
        min-width: 100px;
        width: 100%;
    }

    .table-order,
    .table-order tbody,
    .table-order tr,
    .table-order td,
    .table-order th{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }
    .table-order tr.tr-order-product-list{
        border-top: 1px dotted #726896;
        justify-content: flex-end;
    }
    .table-order tr.order-list-head + .tr-order-product-list{
    	border-top: none;
    }
    .table-order td{
        padding:0 3px;
        border:none;
    }

    .order-list-head .td-order-title{
        font-size:12px;
    }
    .order-list-head .td-order-title:nth-child(1){
        padding-top:5px;
        width: 50%;
    }
    .order-list-head .td-order-title:nth-child(2){
        padding-top:5px;
        width: 50%;
        justify-content: flex-end;
    }

    .order-list-head .td-order-title:nth-child(3),
    .order-list-head .td-order-title:nth-child(4){
        padding-top:5px;
        padding-bottom:5px;
        justify-content: flex-end;
    }
    .order-list-head .td-order-title:nth-child(4){
        padding-top:0;
    }
    td.td-order-comment01{
        padding-top:5px;
        padding-bottom:5px;
        font-weight: bold;
    }
    .td-order-comment02{
        width: 100%;
        justify-content: flex-end;
    }
    td.td-order-comment03,
    td.td-order-comment04{
        padding-top:10px;
        padding-bottom:10px;
        justify-content: flex-end;
        align-items: center;
        width: auto;
    }
    td.td-order-comment04{
        max-width: calc(100% - 106px);
    }
    td.td-order-comment04:empty{
        padding-left: 0;
        padding-right:0;
    }
    td.td-order-comment02.subtotal{
        padding-top:2px;
        padding-bottom:10px;
        justify-content: flex-end;
        font-weight: bold;
    }

    td.td-order-comment05{
        border-top: 1px solid #726896;
        padding-top:10px;
        padding-bottom:10px;
        flex-direction: column;
        text-align: left;
    }
    .td-order-comment05 u {
        width: 100%;
        text-align: right;
    }

    td.td-order-message {
        padding-top: 40px;
    	text-align: left;
    }
    .table-order tr:first-child .td-order-message {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .table-order tr:not(:first-child) .td-order-message {
        padding-bottom: 15px;
    }
    td.confirmation-notes-headline{
        padding-top:40px;
    }
    .confirmation-table-order tr:last-child{
        padding-bottom: 15px;
    }
}