@charset "utf-8";
/* CSS Document */



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: リセットCSS                                                                                                                                                                ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

dl,dt,dd,pre,form,fieldset,input,textarea,blockquote,th,td { margin: 0; padding: 0; }
fieldset,img{ border: 0; vertical-align : middle; }
abbr,acronym{ border: 0; }
address,caption,cite,code,dfn,em,strong,th,var{ font-style: normal; font-weight: normal; }
input, select { color: #333; border: 1px solid #cccccc; background-color: #FFF; border-radius : 3px; }
input, select { -moz-appearance: menulist-button; -webkit-appearance: menulist-button; appearance: menulist-button; }

/* iOS Safariの date input はみ出し対策 */
form#mail_form input[type="date"]{ width:100%; max-width:100%; -webkit-appearance:none; appearance:none; }


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: 設定                                                                                                                                                                      ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*:: sectionの背景 ::*/
section.postmail { }
section.postmail.wrapper { min-height: 900px; background: linear-gradient(-225deg, #CCCCFF 0%, #EEE 56%, #99CCFF 100%); padding: 100px 0;}
section.contact { }
section.contact.wrapper { background: #CCCCFF; padding: 10px 0;}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: 各詳細ページ                                                                                                                                                               ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*:: ポストメールの左右枠 ::*/
.page-postmail { display: block; padding: 5% 5%; margin-bottom: 50px; background-color: #FFF; overflow: hidden;/* 高さ認識の為 */ }
.page-postmailTrans { display: block; padding: 5% 5%; margin-bottom: 30px; background-color: rgba(255,255,255,0.70); overflow: hidden;/* 高さ認識の為 */}
.page-postmail-FrameNoSetting { display: block; padding: 5% 0; margin-bottom: 30px; overflow: hidden;/* 高さ認識の為 */ }/* 枠フレームなし */
@media only screen and (max-width : 768px ){ .page-postmail { padding: 10% 5%; } }

/*:: ポストメールの左右枠の中のコンテナ ::*/
.postmail-container { display: block; overflow: hidden;/* 高さ認識の為 */}
.postmail-container { font-family: heisei-maru-gothic-std, sans-serif; font-weight: 400; font-style: normal; }


/*:: リスト化の設定 ::*/
form#mail_form ul.listBox { width: 100%; margin-bottom: 10px; padding: 0 0 0 0; position: relative; }
form#mail_form ul.listBox li { width: 100%; margin: 10px auto; display: block; position: relative; }
form#mail_form ul.listBox li:first-of-type { margin-top: 0px; }
form#mail_form ul.listBox li span.none_line { display: block; padding: 0 0 0 22px;}
form#mail_form ul.listBox li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; }

form#mail_form ul.listBox li span.none_lineBack { display: block; padding: 5px 5px 5px 28px; font-size:1.3rem; background-color: rgba(221,221,221,0.50)}
form#mail_form ul.listBox li span.none_lineBack::before { position: absolute; left: 5px; font-family: FontAwesome; content: "\f00c"; color: #999999; }

form#mail_form ul.listBox li span.onlyBack { display: block; padding: 5px 10px; background-color: rgba(221,221,221,0.50); font-size:1.3rem; color: #004CFF}


/*:: 見出しタイトル ::*/
.subFormTitle { display: block; text-align: center; margin: 30px auto; }
.subFormTitle { font-family: redonda, sans-serif; font-weight: 400; font-style: normal;}
.subFormTitle .f-remarks { margin-top: 0px; display: block; text-align: center; font-size:1.4rem; }


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: フォーム用CSS 初期定義                                                                                                                                                      ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*:: iphoneのズームアップを防ぐための設定 ::*/
input { font-size:16px; font-size:1.6rem;}

/*:: フォーム全体設定 ::*/
input,select,textarea { border-radius : 3px; }
label { cursor: pointer; }

/*:: フォーム全体枠の設定 ::*/
form#mail_form { width : 100%; margin: 0 auto 30px auto; border-radius : 7px; }
form#mail_form { font-size:16px; font-size:1.6rem; }
form#mail_form dl { margin-bottom: 20px; padding: 2.5% 2.5% 2.5% 2.5%; overflow: hidden; border: 0px solid #b0b0b0; border-radius: 7px; }
@media only screen and (max-width : 768px ){ form#mail_form dl { padding: 5% 5%; } }

form#mail_form dl.formTransBox { background-color: rgba(255,255,255,0.80); }
form#mail_form dl.formTransBox1px { background-color: rgba(255,252,238,0.80); border: 1px solid #eee; }
form#mail_form dl.formNoTransBox { margin-bottom: 20px }

form#mail_form textarea { padding: 5px 5px; }

/*:::::::::::::::::::::::::::*/
/*:: ラベルと説明部（dt・dd） ::*/
/*:::::::::::::::::::::::::::*/
/*:: フォーム上 ::*/
form#mail_form dl dt { width: 100%; margin-bottom: 10px; padding: 20px 0 0 0; clear: both; color: #666; font-weight : bold; text-align: left; border-top: 1px solid #ccc; }
form#mail_form dl dt { font-family: heisei-kaku-gothic-std, sans-serif; font-style: normal; font-weight: 700; }
form#mail_form dl dt { font-size: 17px; font-size: 1.7rem; }
form#mail_form dl dt:first-child, form#mail_form dl dt:first-child+dd { padding-top: 0px; border: none; background: none; }
/*:: 必須ラベル赤 ::*/
form#mail_form dl dt span.essential { margin: 2px 10px 0 0; display: block; float: left; background-color: #FF0004; padding: 0 2%; border-radius: 3px; }
form#mail_form dl dt span.essential { font-size: 13px; font-size: 1.3rem; color: #FFF; font-weight: bold; }
/*:: フォーム下 ::*/
form#mail_form dl dd { width: 100%; margin-bottom: 0px;  padding: 0px; float: left; }
/*:: 入力エラーメッセージがJavaScriptによって出現 ::*/
form#mail_form dd div { padding: 5px;  margin-top: 10px; color: #ff0000; font-size: 1.4rem; }
/*:: セレクトクラスの設定::*/
form#mail_form dl select { width: 350px; font-size: 14px; height: 40px; }

@media screen and (max-width : 768px){
form#mail_form dl dt { font-size: 16px!important; font-size: 1,6rem!important; }
form#mail_form dd div { font-size: 1.2rem; }
}

/*:::::::::::::::::::::::::::*/
/*:: 個別項目               ::*/
/*:::::::::::::::::::::::::::*/

form#mail_form input { height: 40px; padding: 5px 5px; border : 1px solid #ccc; border-radius : 3px; background-color: #FDFDFD; }
/*:: インプットの高さを除外するタイプ別 ::*/
form#mail_form input[type="checkbox"], form#mail_form input[type="radio"] { height: auto;}
/*:: インプットのファイルの幅 ::*/
form#mail_form input[type="file"] { width: 100%; }
/*::フォームが選択されている時::*/
form#mail_form input:focus, form#mail_form textarea:focus{ box-shadow : 0px 0px 5px #55ccff; border : 1px solid #55ccff; background : #ffffff; }

/*:: ラジオボタンの基本設定 ::*/
form#mail_form ul.RadioBtn li { display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; padding: 0px 20px 0px 0px; margin: 0px 0; }
form#mail_form ul.RadioBtn li:last-child { margin-right : 0px;}
form#mail_form ul.RadioBtn li input { height: auto; margin-right: 10px; transform: scale(1.2); }

/*:: 例文字の設定 ::*/
form#mail_form input::placeholder { color: #9A9A9A; letter-spacing: 1px; font-size : 13px;}
form#mail_form input:-webkit-input-placeholder { color: #9A9A9A; letter-spacing: 1px; font-size : 13px;}
form#mail_form input::-moz-placeholder { color: #9A9A9A; letter-spacing: 1px; font-size : 13px;}
form#mail_form input:-ms-input-placeholder { color: #9A9A9A; letter-spacing: 1px; font-size : 13px;}

/*:: 素材シートのラジオ設定 ::*/
form#mail_form ul.RadioBtn.MaterialSheet { }
@media screen and (max-width : 568px){
form#mail_form ul.RadioBtn.MaterialSheet { display: block; }
form#mail_form ul.RadioBtn.MaterialSheet li { display: flex; margin: 0 0; }
form#mail_form ul.RadioBtn.MaterialSheet li:last-child { margin-bottom: 0; }
}


/*:: 添付ファイルの設定 ::*/
dd input[type="file"] { display: block; margin-bottom: 10px; }

/*:: 姓と名の入力フォーム設定 ::*/
form#mail_form input#name_1 { margin-bottom: 0px; margin-right: 10px }
form#mail_form input#name_1, form#mail_form input#name_2 { width : 250px; }
@media screen and (max-width : 768px){ form#mail_form input#name_1, form#mail_form input#name_2 { width : 48%; } }
@media screen and (max-width : 568px){ form#mail_form input#name_1, form#mail_form input#name_2{ width : 100%; margin-bottom: 7px; } form#mail_form input#name_1 { margin-right: 0px } }
/*:: フリガナの入力フォーム設定 ::*/
form#mail_form input#read_1 { margin-bottom: 0px; margin-right: 10px }
form#mail_form input#read_1, form#mail_form input#read_2 { width : 250px; }
@media screen and (max-width : 768px){ form#mail_form input#read_1, form#mail_form input#read_2 { width : 48%; } }
@media screen and (max-width : 568px){ form#mail_form input#read_1, form#mail_form input#read_2{ width : 100%; margin-bottom: 7px; } form#mail_form input#read_1 { margin-right: 0px } }

/*:: メールアドレスの入力フォーム設定 ::*/
form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm { width : 500px; }
/*:: 郵便枠の入力フォーム設定 ::*/
form#mail_form input#postal { width : 350px; float: left; }
/*:: 住所の入力フォーム設定 ::*/
form#mail_form input#address_1,
form#mail_form input#address_2{ width : 100%; margin-bottom: 7px; display : block; }
/*:: 電話番号入力の入力フォーム設定 ::*/
form#mail_form input#phone { width : 350px; }
form#mail_form input#phoneFax { width : 350px; }
form#mail_form input#phoneMobile{ width : 350px; }
/*:: HP,SNSの入力フォーム設定 ::*/
form#mail_form input#SnsHpUrl01,
form#mail_form input#SnsHpUrl02,
form#mail_form input#SnsHpUrl03 { width : 100%; margin-bottom: 7px; display : block; }

@media screen and (max-width : 768px){
form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm,
form#mail_form input#postal,
form#mail_form input#address_1,
form#mail_form input#address_2,
form#mail_form input#phone,
form#mail_form input#phoneFax,
form#mail_form input#phoneMobile { width : 100%; }
}
/*:: 性別のラジオボタン ::*/
form#mail_form ul.Gender li label:hover{ cursor : pointer;}

/*:: 年齢のドロップダウン設定 ::*/
form#mail_form dl dd select.ageSize { font-size: 1.5rem; width: 350px; margin-bottom: 10px }
form#mail_form dl dd option.ageChoice { font-size: 1.5rem; }
form#mail_form select#age_select { padding: 5px 0; width : 100px; font-size : 13px;}
@media screen and (max-width : 768px){ form#mail_form dl dd select.ageSize { width: 100% } }
@media screen and (max-width : 568px) { form#mail_form dl dd option.ageChoice { font-size: 1.3rem!important; } }

/*:: 業種の入力フォーム設定 ::*/
form#mail_form input#Industry { width: 350px; }
/*:: 役職の入力フォーム設定 ::*/
form#mail_form input#Managerial { width: 350px; }
/*:: 予算の入力フォーム設定 ::*/
form#mail_form input#Budget { width : 350px; }
/*:: 納品希望日入力のカレンダーフォーム ::*/
form#mail_form input#Delivery { width : 350px; }
/*:: 会社名の入力フォーム設定 ::*/
form#mail_form input#Company { width : 350px; }
/*:: 印刷枚数の入力フォーム設定 ::*/
form#mail_form input#Printing { width : 350px; }
/*:: 希望カラーの入力フォーム設定 ::*/
form#mail_form input#HopeColor { width : 350px; }
/*:: 希望カラーの入力フォーム設定 ::*/
form#mail_form input#StampFrame { width : 350px; }
/*:: イメージテイストの入力フォーム設定 ::*/
form#mail_form input#designTaste { width: 100%; }
/*:: 制作目的の入力フォーム設定 ::*/
form#mail_form input#creationPurpose { width: 100%; }
/*:: 制作目的の入力フォーム設定 ::*/
form#mail_form input#ItemTypeOther { width: 100%; }
/*:: 制作目的の入力フォーム設定 ::*/
form#mail_form input#DesiredItemsOther { width: 100%; }

/*::カッティング枚数の入力フォーム設定 ::*/
form#mail_form input#cuttingNumber { width: 350px; }

@media screen and (max-width : 768px){
form#mail_form input#Industry,
form#mail_form input#Managerial,
form#mail_form input#Budget,
form#mail_form input#Delivery,
form#mail_form input#Company,
form#mail_form input#Printing,
form#mail_form input#HopeColor,
form#mail_form input#cuttingNumber { width : 100%; }
}

/*:: 注文内容のラジオボタン ::*/
#OrderDetails01 { }
#OrderDetails02 { }
/*:: 片面のラジオボタン ::*/
#oneSide01 { }
#oneSide02 { }
/*:: 縦横のラジオボタン ::*/
#crisscrossing01 { }
#crisscrossing02 { }
/*:: 地図作成のラジオボタン ::*/
#mapCreation01 { }
#mapCreation02 { }
/*:: 印刷希望のラジオボタン ::*/
#PrintingRequest01 { }
#PrintingRequest02 { }
/*:: 印刷希望のラジオボタン ::*/
#QrRequest01 { }
#QrRequest02 { }
/*:: ロゴ所持のラジオボタン ::*/
#haveLogo01 { }
#haveLogo02 { }
/*:: ロゴデータのラジオボタン ::*/
#haveLogodata01 { }
#haveLogodata02 { }
/*:: 素材シートのラジオボタン ::*/
#MaterialSheet01 { }
#MaterialSheet02 { }
#MaterialSheet03 { }
#MaterialSheet04 { }
#MaterialSheet05 { }
#MaterialSheet06 { }
#MaterialSheet07 { }
/*:: 入稿方法のラジオボタン ::*/
#SubmissionMethod01 { }
#SubmissionMethod02 { }
/*:: 入稿方法のラジオボタン ::*/
#TraceImage01 { }
#TraceImage02 { }

/*:: シート幅の入力フォーム設定 ::*/
form#mail_form input#StickerSize_1 { margin-bottom: 10px; margin-right: 10px }
form#mail_form input#StickerSize_1, form#mail_form input#StickerSize_2 { width : 250px; }
@media screen and (max-width : 768px){ form#mail_form input#StickerSize_1, form#mail_form input#StickerSize_2 { width : 48%; } }
@media screen and (max-width : 568px){ form#mail_form input#StickerSize_1, form#mail_form input#StickerSize_2{ width : 100%; } form#mail_form input#StickerSize_1 { margin-right: 0px } }
/* 「幅/高の文字＋入力」をひとかたまりに。親ddは触らない */
form#mail_form dd .StickerSizeItem { display: inline-flex; align-items: center; gap: 6px; width: 250px; margin: 0 10px 10px 0; vertical-align: top; }
/* 入力はブロック幅にフィット（既存の width 指定を上書き） */
form#mail_form .StickerSizeItem input#StickerSize_1,form#mail_form .StickerSizeItem input#StickerSize_2 { width: 100%; min-width: 0; margin: 0; }
@media screen and (max-width: 768px){ form#mail_form dd .StickerSizeItem { width: 47%; } }
@media screen and (max-width: 568px){ form#mail_form dd .StickerSizeItem { width: 100%; margin-right: 0; } }




/*:: お問合せ項目のフォーム設定 ::*/
form#mail_form dl dd select.categorySize { font-size: 1.5rem; width: 350px;}
form#mail_form dl dd option.categoryChoice { font-size: 1.5rem; }
@media only screen and (max-width: 768px) { form#mail_form dl dd select.categorySize { width : 100%;} }
@media only screen and (max-width: 568px) { form#mail_form dl dd option.categoryChoice { font-size: 1.3rem!important; } }

/*:: お問合せの内容の設定 ::*/
form#mail_form textarea#mail_contents { width : 100%; height : 200px; resize : vertical; border : 1px solid #cccccc; background : #fafafa;}
/*:: ご意見やご要望棒内容の設定 ::*/
form#mail_form textarea#OpinionsAndRequests { width : 100%; height : 200px; resize : vertical; border : 1px solid #cccccc; background : #fafafa;}

/*:: 郵便検索の設定 ::*/
#yuubin-kensaku a { padding: 3px; margin-left: 5px; display: inline-block; border-radius: 3px; border: 1px solid #B0B0B0; font-size: 13px; text-align: center; }
#yuubin-kensaku a, #yuubin-kensaku a:visited { background-color: #E8E8E8; }
#yuubin-kensaku a:hover, #yuubin-kensaku a:active, #yuubin-kensaku a:focus { background-color: #C9C9C9; }
@media only screen and (max-width : 768px ){ #yuubin-kensaku a { margin: 5px 0 0 0px; } }

/*:: 送信ボタンの設定 ::*/
form#mail_form dt.submit_do { display: none; }
form#mail_form input#mail_submit_button{ width: 100%; height: auto; padding: 10px 5px; vertical-align: middle; background: #eee; border: 1px solid #ccc; }
form#mail_form input#mail_submit_button{ color: #444444; font-weight: bold; }
form#mail_form input#mail_submit_button:hover{ cursor : pointer; color : #106dff; background : #e0e0e0; transition: .3s;}
@media screen and (max-width : 768px){ form#mail_form input#mail_submit_button{ margin-top: 20px; font-size: 18px; } }


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: ヒアリング用フォームCSS 初期定義                                                                                                                                              ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: 印刷枚数非表示時の空間も消す ::*/
#printing_field_block { display: none; /* 初期で非表示にしてもOK */ }


/*:: 印刷サイズ選択設定 ::*/
form#mail_form dl dd select#PrintingSizeSelect { width: 350px; font-size: 1.5rem!important;}
form#mail_form dl dd select#PrintingSizeSelect label { font-size: 1.5rem!important; }
form#mail_form dl dd select#PrintingSizeSelect option { font-size: 1.3rem!important; }
form#mail_form dl dd select#PrintingSizeSelect option optgroup { color: #B2D0FF }
@media only screen and (max-width: 768px) { form#mail_form dl dd select#PrintingSizeSelect { width: 100%; } }
/*:: 印刷サイズのその他フォーム設定 ::*/
#PrintingSizeOther { width: 100%; height: 40px!important; padding: 5px 5px; }


/*:: 依頼内容のチェックボックスの並び方設定 ::*/
.requestContent { display: flex; flex-wrap: wrap; }
.requestContent label { display: flex; align-items: center; white-space: nowrap; min-width: 0; padding: 10px 0px 10px 0px; margin: 0 10px; }
.requestContent label span { margin-left: 0.5em; }
.requestContent input[type="checkbox"] { transform: scale(1.2); margin: 0; }


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: カッティング用フォームCSS 初期定義                                                                                                                                            ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: 印刷枚数非表示時の空間も消す ::*/
#CuttingColor-standard_field_block { display: none; /* 初期で非表示にしてもOK */ }
/*:: 印刷サイズ選択設定 ::*/
form#mail_form dl dd select#CuttingColor-standard { width: 350px; font-size: 1.5rem!important;}
form#mail_form dl dd select#CuttingColor-standard label { font-size: 1.5rem!important; }
form#mail_form dl dd select#CuttingColor-standard option { font-size: 1.3rem!important; }
form#mail_form dl dd select#CuttingColor-standard option optgroup { color: #B2D0FF }
@media only screen and (max-width: 768px) { form#mail_form dl dd select#CuttingColor-standard { width: 100%; } }

/* 共通：素材カラーセレクトの幅・文字サイズ */
form#mail_form dl dd .material-block select[name="カラ選択"] { width: 350px; font-size: 1.5rem !important; }
/* ← optgroupへの色指定はこう書く */
form#mail_form dl dd .material-block optgroup { color: #B2D0FF; }

@media only screen and (max-width: 768px) { form#mail_form dl dd .material-block select[name="カラー選択"] { width: 100%; } }


/* ========== 素材シート（均等タブ 4列） ========== */


/*:::::::::::::::::::::::::::*/
/*:: メタリック              ::*/
/*:::::::::::::::::::::::::::*/
/*:: 印刷枚数非表示時の空間も消す ::*/
#CuttingColor-metallic_field_block { display: none; /* 初期で非表示にしてもOK */ }
/*:: 印刷サイズ選択設定 ::*/
form#mail_form dl dd select#CuttingColor-metallic { width: 350px; font-size: 1.5rem!important;}
form#mail_form dl dd select#CuttingColor-metallic label { font-size: 1.5rem!important; }
form#mail_form dl dd select#CuttingColor-metallic option { font-size: 1.3rem!important; }
form#mail_form dl dd select#CuttingColor-metallic option optgroup { color: #B2D0FF }
@media only screen and (max-width: 768px) { form#mail_form dl dd select#CuttingColor-metallic { width: 100%; } }


/*:::::::::::::::::::::::::::*/
/*:: メタリックラメ           ::*/
/*:::::::::::::::::::::::::::*/
/*:: 印刷枚数非表示時の空間も消す ::*/
#CuttingColor-metallicLame_field_block { display: none; /* 初期で非表示にしてもOK */ }
/*:: 印刷サイズ選択設定 ::*/
form#mail_form dl dd select#CuttingColor-metallicLame { width: 350px; font-size: 1.5rem!important;}
form#mail_form dl dd select#CuttingColor-metallicLame label { font-size: 1.5rem!important; }
form#mail_form dl dd select#CuttingColor-metallicLame option { font-size: 1.3rem!important; }
form#mail_form dl dd select#CuttingColor-metallicLame option optgroup { color: #B2D0FF }
@media only screen and (max-width: 768px) { form#mail_form dl dd select#CuttingColor-metallicLame { width: 100%; } }


/*:::::::::::::::::::::::::::*/
/*:: メタリックミラー         ::*/
/*:::::::::::::::::::::::::::*/
/*:: 印刷枚数非表示時の空間も消す ::*/
#CuttingColor-metallicMirror_field_block { display: none; /* 初期で非表示にしてもOK */ }
/*:: 印刷サイズ選択設定 ::*/
form#mail_form dl dd select#CuttingColor-metallicMirror { width: 350px; font-size: 1.5rem!important;}
form#mail_form dl dd select#CuttingColor-metallicMirror label { font-size: 1.5rem!important; }
form#mail_form dl dd select#CuttingColor-metallicMirror option { font-size: 1.3rem!important; }
form#mail_form dl dd select#CuttingColor-metallicMirror option optgroup { color: #B2D0FF }
@media only screen and (max-width: 768px) { form#mail_form dl dd select#CuttingColor-metallicMirror { width: 100%; } }


/*:::::::::::::::::::::::::::*/
/*:: メタリックヘアライン     ::*/
/*:::::::::::::::::::::::::::*/
/*:: 印刷枚数非表示時の空間も消す ::*/
#CuttingColor-metallicHairline_field_block { display: none; /* 初期で非表示にしてもOK */ }
/*:: 印刷サイズ選択設定 ::*/
form#mail_form dl dd select#CuttingColor-metallicHairline { width: 350px; font-size: 1.5rem!important;}
form#mail_form dl dd select#CuttingColor-metallicHairline label { font-size: 1.5rem!important; }
form#mail_form dl dd select#CuttingColor-metallicHairline option { font-size: 1.3rem!important; }
form#mail_form dl dd select#CuttingColor-metallicHairline option optgroup { color: #B2D0FF }
@media only screen and (max-width: 768px) { form#mail_form dl dd select#CuttingColor-metallicHairline { width: 100%; } }


/*:::::::::::::::::::::::::::*/
/*:: 反射                   ::*/
/*:::::::::::::::::::::::::::*/
/*:: 印刷枚数非表示時の空間も消す ::*/
#CuttingColor-Refrect_field_block { display: none; /* 初期で非表示にしてもOK */ }
/*:: 印刷サイズ選択設定 ::*/
form#mail_form dl dd select#CuttingColor-Refrect { width: 350px; font-size: 1.5rem!important;}
form#mail_form dl dd select#CuttingColor-Refrect label { font-size: 1.5rem!important; }
form#mail_form dl dd select#CuttingColor-Refrect option { font-size: 1.3rem!important; }
form#mail_form dl dd select#CuttingColor-Refrect option optgroup { color: #B2D0FF }
@media only screen and (max-width: 768px) { form#mail_form dl dd select#CuttingColor-Refrect { width: 100%; } }


/*:::::::::::::::::::::::::::*/
/*:: 蛍光反射               ::*/
/*:::::::::::::::::::::::::::*/
/*:: 印刷枚数非表示時の空間も消す ::*/
#CuttingColor-RefrectNeon_field_block { display: none; /* 初期で非表示にしてもOK */ }
/*:: 印刷サイズ選択設定 ::*/
form#mail_form dl dd select#CuttingColor-RefrectNeon { width: 350px; font-size: 1.5rem!important;}
form#mail_form dl dd select#CuttingColor-RefrectNeon label { font-size: 1.5rem!important; }
form#mail_form dl dd select#CuttingColor-RefrectNeon option { font-size: 1.3rem!important; }
form#mail_form dl dd select#CuttingColor-RefrectNeon option optgroup { color: #B2D0FF }
@media only screen and (max-width: 768px) { form#mail_form dl dd select#CuttingColor-RefrectNeon { width: 100%; } }







/*:::::::::::::::::::::::::::*/
/*:: トレース画像            ::*/
/*:::::::::::::::::::::::::::*/
/*:: 非表示時の空間も消す ::*/
#TraceImage_field_block { display: none; /* 初期で非表示にしてもOK */ }







/*:: 非表示時の空間も消す ::*/
#DesignWish_field_block { display: none; /* 初期で非表示にしてもOK */ }




/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: 構成案で増えたコード                                                                                                                                                        ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: カードの種類チェックボックスの並び方設定 ::*/
dd.cardType { display: flex; flex-wrap: wrap; }
dd.cardType label { display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; padding: 0px 20px 0px 0px; margin-right: 10px 0; }
dd.cardType label span { margin-left: 0.5em; }
dd.cardType input[type="checkbox"] { transform: scale(1.2); margin: 0; padding: 0!important; }

form#mail_form dl ul.tagKind { margin-bottom: 10px; }
form#mail_form dl ul.tagKind li { display: inline-block; margin-right: 0px; padding: 1px 10px; color: #EEE; font-size:10px; font-size:1.0rem; border-radius: 3px }
form#mail_form dl ul.tagKind li.noTone { background-color: #666; }
form#mail_form dl ul.tagKind li.tBlue { background-color: #4370FF; }
form#mail_form dl ul.tagKind li.tOrange { background-color: #FF9233; }
form#mail_form dl ul.tagKind li.tGreen { background-color: #33AC50; }

/*:: ロゴ所持非表示時の空間も消す ::*/
#haveLogodata_field_block { display: none; /* 初期で非表示にしてもOK */ }
#designTaste_field_block { display: none; /* 初期で非表示にしてもOK */ }
#creationPurpose_field_block { display: none; /* 初期で非表示にしてもOK */ }


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: サンクス、エラー、confページ                                                                                                                                                 ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.postmail-container li.postmailFormLang { border-bottom: 1px solid #999; margin-bottom: 30px; padding-bottom: 20px }
/*:: thanks ::*/
p.postMsg { display: block; text-align: center; }
p.postMsg { font-family: heisei-maru-gothic-std, sans-serif; font-weight: 400; font-style: normal!important; }
/*:: conf,error,thanksボタン ::*/
p.postBtn { display: block; text-align: center; border-top: 1px solid #999; margin-top: 30px }
.postmail-container p.postBtn input { margin-top: 50px; padding: 10px 10px; }

/*:: confの設定 ::*/
#form-tbl { width: 100%; margin: 0 auto; }
#form { width: 100%; margin: 10px 0; border-collapse: collapse;}
#form tr { }
#form th, #form td { border: 1px solid #666; padding: 2%; border-spacing: 0; }
#form th, #form td { font-family: heisei-maru-gothic-std, sans-serif; font-weight: 400; font-style: normal!important; }
#form th { width: 160px; background: #e8e8e8; color: #666; }
#form td { width: -webkit-calc(100% - 160px); width: calc(100% - 160px); background: #fff; }
p.btn input { width: 160px; height: 32px; }
/* for message */
p.msg { color: #dd0000; margin: 2em; }
span.msg { color: #dd0000; }
/* for back-button */
form.back { margin-top: 2em; }

@media only screen and (max-width: 568px) {
/* 投稿フォーム */
#form-tbl { text-align: center; }
#form { width: 96%; }
#form th, #form td { width: 100%; padding: 10px 5px; display: block; text-align: left; border-top: none; min-height: 50px }
#form tr:first-child th	{ border-top: 1px solid #666; }
p.btn input { width: 10em; }
}




/* カラー見本リンク */
form#mail_form .color-sample-link { display: inline-block; margin: 0 0 10px 0; padding: 4px 10px; font-size: 1.3rem; color: #004CFF; border: 1px solid #004CFF; border-radius: 4px; }
form#mail_form .color-sample-link:hover { background: #004CFF; color: #fff; }










/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: ラジオボタンのタブ化                                                                                                                                                        ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::*/
/*:: 素材シート選択だけのラジオボタンスタイルをタブ風 ::*/
/*::::::::::::::::::::::::::::::::::::::::::::*/
form#mail_form ul.RadioBtn.MaterialSheet { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0;}
form#mail_form ul.RadioBtn.MaterialSheet li { flex: 0 0 calc(25% - 10px);/* ← 4等分 (隙間分を調整) */position: relative; padding: 0 !important; margin: 0 !important; }
form#mail_form ul.RadioBtn.MaterialSheet li input { position: absolute;/* ラジオを隠す */ opacity: 0; pointer-events: none; }
form#mail_form ul.RadioBtn.MaterialSheet li label { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 12px; }
form#mail_form ul.RadioBtn.MaterialSheet li label { border: 1px solid #dcdcdc; border-radius: 8px; background: #fff; transition: .2s ease; }
/* ホバー時 */
form#mail_form ul.RadioBtn.MaterialSheet li label:hover { border-color: #9bbcff; background: #f8faff; }
form#mail_form ul.RadioBtn.MaterialSheet li input:checked + label { border-color: #4d90ff; background: #f6f9ff; font-weight: bold; color: #0044cc; }
form#mail_form ul.RadioBtn.MaterialSheet li input:checked + label { box-shadow: 0 0 0 2px rgba(77,144,255,.30) inset; }
/* スマホ時は列数を減らす */
@media (max-width: 768px) { form#mail_form ul.RadioBtn.MaterialSheet li { flex: 0 0 calc(50% - 10px); /* 2列 */ } }
@media (max-width: 568px) { form#mail_form ul.RadioBtn.MaterialSheet li { flex: 0 0 100%; /* 1列 */ } }

/*::::::::::::::::::::::::::::::::::::::::::::*/
/*:: お問合せ内容だけのラジオボタンスタイルをタブ風 ::*/
/*::::::::::::::::::::::::::::::::::::::::::::*/
form#mail_form ul.RadioBtn.OrderDetails { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
form#mail_form ul.RadioBtn.OrderDetails li { flex: 0 0 calc(50% - 10px); /* 2列均等配置 */ margin: 0 !important; padding: 0 !important; }
/* input を非表示化 */
form#mail_form ul.RadioBtn.OrderDetails li input { position: absolute; opacity: 0; pointer-events: none; }
/* ラベルをタブ風に */
form#mail_form ul.RadioBtn.OrderDetails li label { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 12px; }
form#mail_form ul.RadioBtn.OrderDetails li label { border: 1px solid #dcdcdc; border-radius: 8px; background: #fff; cursor: pointer; }
form#mail_form ul.RadioBtn.OrderDetails li input:checked + label { border-color: #4d90ff; background: #f6f9ff; box-shadow: 0 0 0 2px rgba(77,144,255,.3) inset; }
/* ホバー時 */
form#mail_form ul.RadioBtn.OrderDetails li label:hover { border-color: #9bbcff; background: #f8faff; }
form#mail_form ul.RadioBtn.OrderDetails li input:checked + label { border-color: #4d90ff; background: #f6f9ff; font-weight: bold; color: #0044cc; }
form#mail_form ul.RadioBtn.OrderDetails li input:checked + label { box-shadow: 0 0 0 2px rgba(77,144,255,.30) inset; }

/*:::::::::::::::::::::::::::::::::::::::::*/
/*:: 入稿方法だけのラジオボタンスタイルをタブ風 ::*/
/*:::::::::::::::::::::::::::::::::::::::::*/
form#mail_form ul.RadioBtn.SubmissionMethod { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; }
form#mail_form ul.RadioBtn.SubmissionMethod li { flex:0 0 calc(50% - 10px);/* 2列均等 */ margin:0 !important; padding:0 !important; list-style:none; }
/* input を非表示（アクセシビリティはlabelで担保） */
form#mail_form ul.RadioBtn.SubmissionMethod li input { position:absolute; opacity:0; pointer-events:none; }
/* ラベルをタブ風に */
form#mail_form ul.RadioBtn.SubmissionMethod li label { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:10px 12px; }
form#mail_form ul.RadioBtn.SubmissionMethod li label { border:1px solid #dcdcdc; border-radius:8px; background:#fff; cursor:pointer; }
form#mail_form ul.RadioBtn.SubmissionMethod li label { transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
/* ホバー */
form#mail_form ul.RadioBtn.SubmissionMethod li label:hover { border-color:#9bbcff; background:#f8faff; }
/* 選択時 */
form#mail_form ul.RadioBtn.SubmissionMethod li input:checked + label { border-color:#4d90ff; background:#f6f9ff; color:#0044cc; font-weight:bold; }
form#mail_form ul.RadioBtn.SubmissionMethod li input:checked + label { box-shadow:0 0 0 2px rgba(77,144,255,.30) inset; }
@media (max-width: 768px) { form#mail_form ul.RadioBtn.SubmissionMethod li { flex: 0 0 calc(50% - 10px); /* 2列 */ } }
@media (max-width: 568px) { form#mail_form ul.RadioBtn.SubmissionMethod li { flex: 0 0 100%; /* 1列 */ } }

/*::::::::::::::::::::::::::::::::::::::*/
/*:: 性別だけのラジオボタンスタイルをタブ風 ::*/
/*::::::::::::::::::::::::::::::::::::::*/
form#mail_form ul.RadioBtn.GenderTabs { display: flex; gap: 10px; padding: 0; margin: 0; }
form#mail_form ul.RadioBtn.GenderTabs li { flex: 1;/* 均等幅（2列） */  margin: 0 !important; padding: 0 !important; position: relative; }
/* input を非表示化 */
form#mail_form ul.RadioBtn.GenderTabs li input { position: absolute; opacity: 0; pointer-events: none; }
/* ラベルをタブ風に */
form#mail_form ul.RadioBtn.GenderTabs li label { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 12px; }
form#mail_form ul.RadioBtn.GenderTabs li label { border: 1px solid #dcdcdc; border-radius: 8px; background: #fff; cursor: pointer; transition: all 0.2s ease; }
/* チェック時 */
form#mail_form ul.RadioBtn.GenderTabs li input:checked + label { border-color: #4d90ff; background: #f6f9ff; font-weight: bold; color: #0044cc; }
form#mail_form ul.RadioBtn.GenderTabs li input:checked + label { box-shadow: 0 0 0 2px rgba(77,144,255,.3) inset; }
/* ホバー時 */
form#mail_form ul.RadioBtn.GenderTabs li label:hover { border-color: #9bbcff; background: #f8faff; }

/*::::::::::::::::::::::::::::::::::*/
/*:: トレース画像 有無ラジオをタブ風に ::*/
/*::::::::::::::::::::::::::::::::::*/
form#mail_form ul.RadioBtn.TraceImageTabs { display: flex; gap: 10px; padding: 0; margin: 0; }
form#mail_form ul.RadioBtn.TraceImageTabs li { flex: 1; margin: 0 !important; padding: 0 !important; list-style: none; position: relative; }
/* input を非表示化 */
form#mail_form ul.RadioBtn.TraceImageTabs li input { position: absolute; opacity: 0; pointer-events: none; }

/* ラベルをタブ風に */
form#mail_form ul.RadioBtn.TraceImageTabs li label { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 12px; }
form#mail_form ul.RadioBtn.TraceImageTabs li label { border: 1px solid #dcdcdc; border-radius: 8px; background: #fff; cursor: pointer; transition: all 0.2s ease; }
/* チェック時 */
form#mail_form ul.RadioBtn.TraceImageTabs li input:checked + label { border-color: #4d90ff; background: #f6f9ff; font-weight: bold; color: #0044cc; }
form#mail_form ul.RadioBtn.TraceImageTabs li input:checked + label { box-shadow: 0 0 0 2px rgba(77,144,255,.3) inset; }
/* ホバー時 */
form#mail_form ul.RadioBtn.TraceImageTabs li label:hover { border-color: #9bbcff; background: #f8faff; }




/* :::::::::::::::::::::::::::::::::::::::::::: */
/* :: デザイン希望チェックボックスをタブ風に  :: */
/* :::::::::::::::::::::::::::::::::::::::::::: */
form#mail_form dd.DesignWishTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

form#mail_form dd.DesignWishTabs label {
  flex: 0 0 calc(50% - 10px); /* PC: 2列 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 10px;
  transition: 0.2s;
  text-align: center;
}

/* input を非表示 */
form#mail_form dd.DesignWishTabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 選択時 */
form#mail_form dd.DesignWishTabs input:checked + span {
  font-weight: bold;
  color: #0044cc;
}
form#mail_form dd.DesignWishTabs input:checked + span {
  border-color: #4d90ff;
  background: #f6f9ff;
  box-shadow: 0 0 0 2px rgba(77,144,255,.3) inset;
}

/* ホバー */
form#mail_form dd.DesignWishTabs label:hover {
  border-color: #9bbcff;
  background: #f8faff;
}

/* スマホ（768px以下）は1列 */
@media (max-width: 768px) {
  form#mail_form dd.DesignWishTabs label {
    flex: 0 0 100%;
  }
}