/******************************************************************************************************************** 【更新履歴】 ********************************************************************************************************************/ @charset "utf-8"; /******************************************************************************************************************************************************************** 　○clearfix ********************************************************************************************************************************************************************/ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /******************************************************************************************************************************************************************** 　○float ********************************************************************************************************************************************************************/ .float_l{ float: left !important; }.float_r{ float: right !important; } /******************************************************************************************************************************************************************** 　○display ********************************************************************************************************************************************************************/ .block{ display: block !important; } .inline{ display: inline !important; } .none{ display: none; } /******************************************************************************************************************************************************************** 　○text-align, vertical-align, text-decoration ********************************************************************************************************************************************************************/ .tx_c{ text-align: center !important; }.tx_l{ text-align: left !important; }.tx_r{ text-align: right !important; } .valign_mdl{ vertical-align: middle !important; }.valign_btm{ vertical-align: bottom !important; } .tx_deco0{ text-decoration: none !important; } /******************************************************************************************************************************************************************** 　○文字設定（サイズ・ボールド・インデント・色） ********************************************************************************************************************/ .tx_08{ font-size: 8px !important; }.tx_09{ font-size: 9px !important; }.tx_10{ font-size: 10px !important; }.tx_11{ font-size: 11px !important; }.tx_12{ font-size: 12px !important; } .tx_13{ font-size: 13px !important; }.tx_14{ font-size: 14px !important; }.tx_15{ font-size: 15px !important; }.tx_16{ font-size: 16px !important; }.tx_17{ font-size: 17px !important; } .tx_18{ font-size: 18px !important; }.tx_19{ font-size: 19px !important; }.tx_20{ font-size: 20px !important; }.tx_21{ font-size: 21px !important; }.tx_22{ font-size: 22px !important; } .tx_23{ font-size: 23px !important; }.tx_24{ font-size: 24px !important; }.tx_25{ font-size: 25px !important; }.tx_26{ font-size: 26px !important; }.tx_27{ font-size: 27px !important; } .tx_28{ font-size: 28px !important; }.tx_29{ font-size: 29px !important; }.tx_30{ font-size: 30px !important; }.tx_31{ font-size: 31px !important; }.tx_32{ font-size: 32px !important; } .tx_33{ font-size: 33px !important; }.tx_34{ font-size: 34px !important; }.tx_35{ font-size: 35px !important; }.tx_36{ font-size: 36px !important; }.tx_37{ font-size: 37px !important; } .tx_000{ color: #000000 !important; }.tx_333{ color: #333333 !important; }.tx_666{ color: #666666 !important; }.tx_777{ color: #777777 !important; }.tx_999{ color: #999999 !important; } .tx_ccc{ color: #cccccc !important; }.tx_ddd{ color: #dddddd !important; }.tx_eee{ color: #eeeeee !important; }.tx_fff{ color: #ffffff !important; } .tx_red{ color: #990000 !important; }.tx_pnk{ color: #f88aa6 !important; }.tx_ora{ color: #ff7701 !important; }.tx_grn{ color: #f9b8c9 !important; }.tx_blu{ color: #336699 !important; } .tx_ind{ text-indent: 14px !important; }.tx-9999{ text-indent: -9999px !important; } .tx_bld{ font-weight: bold !important; } .tx_min{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif !important; } .tx_kak{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important; } /******************************************************************************************************************************************************************** 　○背景色設定 ********************************************************************************************************************/ .bg_fff{ background: #ffffff !important; }.bg_eee{ background: #eeeeee !important; }.bg_ddd{ background: #dddddd !important; }.bg_ccc{ background: #cccccc !important; }.bg_999{ background: #999999 !important; } .bg_777{ background: #777777 !important; }.bg_555{ background: #555555 !important; }.bg_333{ background: #333333 !important; }.bg_111{ background: #111111 !important; }.bg_000{ background: #000000 !important; } .bg_grn{ background: #E0F8E0 !important; }.bg_pnk{ background: #faeef1 !important; }.bg_blu{ background: #006699 !important; }.bg_yel{ background: #fbfec3 !important; }.bg_ora{ background: #faedc7 !important; } .bg_gld{ background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03) !important; } /******************************************************************************************************************************************************************** 　○パディング ********************************************************************************************************************************************************************/ .pad_05{ padding: 5px !important; }.pad_10{ padding: 10px !important; }.pad_15{ padding: 15px !important; }.pad_20{ padding: 20px !important; }.pad_25{ padding: 25px !important; }.pad_30{ padding: 30px !important; } .pad_t_05{ padding-top: 5px !important; }.pad_t_10{ padding-top: 10px !important; }.pad_t_15{ padding-top: 15px !important; }.pad_t_20{ padding-top: 20px !important; }.pad_t_25{ padding-top: 25px !important; } .pad_t_30{ padding-top: 30px !important; }.pad_t_35{ padding-top: 35px !important; }.pad_t_40{ padding-top: 40px !important; }.pad_t_45{ padding-top: 45px !important; }.pad_t_50{ padding-top: 50px !important; } .pad_r_05{ padding-right: 5px !important; }.pad_r_10{ padding-right: 10px !important; }.pad_r_15{ padding-right: 15px !important; }.pad_r_20{ padding-right: 20px !important; }.pad_r_25{ padding-right: 25px !important; } .pad_r_30{ padding-right: 30px !important; }.pad_r_35{ padding-right: 35px !important; }.pad_r_40{ padding-right: 40px !important; }.pad_r_45{ padding-right: 45px !important; }.pad_r_50{ padding-right: 50px !important; } .pad_b_05{ padding-bottom: 5px !important; }.pad_b_10{ padding-bottom: 10px !important; }.pad_b_15{ padding-bottom: 15px !important; }.pad_b_20{ padding-bottom: 20px !important; }.pad_b_25{ padding-bottom: 25px !important; } .pad_b_30{ padding-bottom: 30px !important; }.pad_b_35{ padding-bottom: 35px !important; }.pad_b_40{ padding-bottom: 40px !important; }.pad_b_45{ padding-bottom: 45px !important; }.pad_b_50{ padding-bottom: 50px !important; } .pad_l_05{ padding-left: 5px !important; }.pad_l_10{ padding-left: 10px !important; }.pad_l_15{ padding-left: 15px !important; }.pad_l_20{ padding-left: 20px !important; }.pad_l_25{ padding-left: 25px !important; } .pad_l_30{ padding-left: 30px !important; }.pad_l_35{ padding-left: 35px !important; }.pad_l_40{ padding-left: 40px !important; }.pad_l_45{ padding-left: 45px !important; }.pad_l_50{ padding-left: 50px !important; } /******************************************************************************************************************************************************************** 　○マージン ********************************************************************************************************************************************************************/ .mgn_t_05{ margin-top: 5px !important; }.mgn_t_10{ margin-top: 10px !important; }.mgn_t_15{ margin-top: 15px !important; }.mgn_t_20{ margin-top: 20px !important; }.mgn_t_25{ margin-top: 25px !important; } .mgn_t_30{ margin-top: 30px !important; }.mgn_t_35{ margin-top: 35px !important; }.mgn_t_40{ margin-top: 40px !important; }.mgn_t_45{ margin-top: 45px !important; }.mgn_t_50{ margin-top: 50px !important; } .mgn_r_05{ margin-right: 5px !important; }.mgn_r_10{ margin-right: 10px !important; }.mgn_r_15{ margin-right: 15px !important; }.mgn_r_20{ margin-right: 20px !important; }.mgn_r_25{ margin-right: 25px !important; } .mgn_r_30{ margin-right: 30px !important; }.mgn_r_35{ margin-right: 35px !important; }.mgn_r_40{ margin-right: 40px !important; }.mgn_r_45{ margin-right: 45px !important; }.mgn_r_50{ margin-right: 50px !important; } .mgn_b_05{ margin-bottom: 5px !important; }.mgn_b_10{ margin-bottom: 10px !important; }.mgn_b_15{ margin-bottom: 15px !important; }.mgn_b_20{ margin-bottom: 20px !important; }.mgn_b_25{ margin-bottom: 25px !important; } .mgn_b_30{ margin-bottom: 30px !important; }.mgn_b_35{ margin-bottom: 35px !important; }.mgn_b_40{ margin-bottom: 40px !important; }.mgn_b_45{ margin-bottom: 45px !important; }.mgn_b_50{ margin-bottom: 50px !important; } .mgn_l_05{ margin-left: 5px !important; }.mgn_l_10{ margin-left: 10px !important; }.mgn_l_15{ margin-left: 15px !important; }.mgn_l_20{ margin-left: 20px !important; }.mgn_l_25{ margin-left: 25px !important; } .mgn_l_30{ margin-left: 30px !important; }.mgn_l_35{ margin-left: 35px !important; }.mgn_l_40{ margin-left: 40px !important; }.mgn_l_45{ margin-left: 45px !important; }.mgn_l_50{ margin-left: 50px !important; } /******************************************************************************************************************************************************************** 　○幅設定 ********************************************************************************************************************************************************************/ .wid_10{ width: 10px !important; }.wid_20{ width: 20px !important; }.wid_30{ width: 30px !important; }.wid_40{ width: 40px !important; }.wid_50{ width: 50px !important; } .wid_60{ width: 60px !important; }.wid_70{ width: 70px !important; }.wid_80{ width: 80px !important; }.wid_90{ width: 90px !important; }.wid_100{ width: 100px !important; } .wid_110{ width: 110px !important; }.wid_120{ width: 120px !important; }.wid_130{ width: 130px !important; }.wid_140{ width: 140px !important; }.wid_150{ width: 150px !important; } .wid_160{ width: 160px !important; }.wid_170{ width: 170px !important; }.wid_180{ width: 180px !important; }.wid_190{ width: 190px !important; }.wid_200{ width: 200px !important; } .wid_210{ width: 210px !important; }.wid_220{ width: 220px !important; }.wid_230{ width: 230px !important; }.wid_240{ width: 240px !important; }.wid_250{ width: 250px !important; } .wid_260{ width: 260px !important; }.wid_270{ width: 270px !important; }.wid_280{ width: 280px !important; }.wid_290{ width: 290px !important; }.wid_300{ width: 300px !important; } .wid_310{ width: 310px !important; }.wid_320{ width: 320px !important; }.wid_330{ width: 330px !important; }.wid_340{ width: 340px !important; }.wid_350{ width: 350px !important; } .wid_360{ width: 360px !important; }.wid_370{ width: 370px !important; }.wid_380{ width: 380px !important; }.wid_390{ width: 390px !important; }.wid_400{ width: 400px !important; } .wid_410{ width: 410px !important; }.wid_420{ width: 420px !important; }.wid_430{ width: 430px !important; }.wid_440{ width: 440px !important; }.wid_450{ width: 450px !important; } .wid_460{ width: 460px !important; }.wid_470{ width: 470px !important; }.wid_480{ width: 480px !important; }.wid_490{ width: 490px !important; }.wid_500{ width: 500px !important; } /******************************************************************************************************************************************************************** 　○テーブル設定 ********************************************************************************************************************************************************************/ table{ border-collapse: collapse; } /*★1行おきにTR背景色水色*/ table.tr_color tr:nth-child(2n+1){ background: #fff9f9; } /*★th、td内　imgの下の余計な隙間対策*/ table * img{ vertical-align: middle; } /*○共通編集用テーブル*/ table.tbl_edit{ width: 100%; } table.tbl_edit th, table.tbl_edit td{ padding: 5px 2%; border: 1px solid #ccc; } /*table.tbl_edit th{ width: 30%; padding-left: 20px; background: #eee; text-align: left; }*/ /*table.tbl_edit th{ width: 30%; padding-left: 2%; background: url(/img/common/blue_bg.png); text-align: right; vertical-align: middle; color: #fff; }*/ table.tbl_edit th{ width: 30%; padding-left: 2%; background: #58a7f0; text-align: right; vertical-align: middle; color: #fff; font-weight: bold !important; } table.tbl_edit td{ text-align: left; } /******************************************************************************************************************************************************************** 　○フォーム設定 ********************************************************************************************************************************************************************/ .zenkaku{ ime-mode: active; } /*.hankaku{ ime-mode: inactive; }*/ .hankaku{ ime-mode: disabled; } /*英数字入力モードになります。ユーザーの操作によるモードの変更はできません。*/ /*　内側影付き（20160114） input[type="text"], input[type="password"] , input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime"], textarea, select{ width: 90%; padding: 0px 10px; border: 1px solid #ccc; border-radius: 3px; box-shadow: 2px 2px 3px #eee inset; } */ input[type="text"], input[type="password"] , input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime"], textarea, select{ width: 95%; padding: 3px 2%; border: 1px solid #ccc; border-radius: 3px; } /*selectは、独自仕様なため、別に設定している。また、「Chrome」にて、borderを設定するとなぜか薄い灰色で背景色が付いてしまうため背景色#fffを設定。*/ select{ width: 99.4%; /*　type="text"が95%に対して、99.4%にするとほぼ同じ長さとなる（原因不明　20161203）　*/ background: #fff; -moz-appearance: none; -webkit-appearance: none; } textarea{ line-height: 1.3em; height: 100px; } [name='sei'], [name='mei'], [name='sei_kana'], [name='mei_kana']{ width: 100px !important; } [name='postal']{ width: 130px !important; } [name='postal1'], [name='postal2']{ width: 40px !important; } [name='tdfk'], [name='tdfk_id']{ width: 120px !important; } [name='email'], [name='email2']{ width: 300px !important; } [name='tel'], [name='mob'], [name='fax']{ width: 160px !important; } [name='tel1'], [name='tel2'], [name='tel3'], [name='fax1'], [name='fax2'], [name='fax3']{ width: 40px !important; } [name='price']{ width: 100px !important; } [name='age']{ width: 40px !important; } /*　年月日セレクト共通設定　*/ .select_y{ width: 85px !important; } .select_m{ width: 65px !important; } .select_d{ width: 65px !important; } [name='text']{ height: 200px; !important; } .datetimepicker{ width: 130px !important; } .datepicker{ width: 130px !important; } /*ドラッグ＆アップロードフォーム*/ input.drag{ display: block; width: 350px; height: 40px; margin-bottom: 5px; padding: 10px 20px; border: 5px dashed #999; background: #f3f3f3; line-height: 1em; } /*フォーム右に送信ボタンを設置した時の位置調整*/ .btn_position input{ vertical-align: middle; margin-bottom: 4px; } /*カーソルポインター設定*/ [type='submit'], [type='image'], [type='button'], button{ cursor: pointer; } /*iPhone、iPadなど、ボタン類のリセット（角丸解除・色解除）・再設定*/ /* input[type='submit'], input[type='button']{ -webkit-appearance: none; outline: none; padding: 0 10px; background: #f9f9f9; border: none; border: 1px solid #ccc; border-radius: 7px; font-size: 12px; line-height: 1.5em; } input[type='submit']:hover, input[type='button']:hover{ background: #f3f3ff; } */ /*placeholder*/ input::-webkit-input-placeholder{ color: #ccc; font-weight: 400; } input::-ms-input-placeholder{ color: #ccc; font-weight: 400; } input::-moz-placeholder{ color: #ccc; font-weight: 400; } /*label設定*/ label{ white-space: nowrap; } /******************************************************************************************************************************************************************** 　○CSSボタン設定 ********************************************************************************************************************************************************************/ .css_btn{ display: inline-block; padding: 5px 30px; color: #fff; border: none; border-radius: 5px; background: #333; text-decoration: none; font-size: 21px; text-decoration: none; } .css_btn:hover{ text-decoration: none; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ } /*共通汎用ボタン*/ .smallBtn{ padding: 0 10px; background: #f9f9f9; border: 1px solid #ccc !important; border-radius: 5px; color: #777; font-size: 10px; } /*共通削除ボタン*/ .delBtn{ padding: 0 10px; background: #c00; border-radius: 5px; color: #fff; font-size: 10px; } /******************************************************************************************************************************************************************** 　○一括設定 ********************************************************************************************************************************************************************/ #formWrapper{ width: 100%; max-width: 1000px; margin: 0 auto; } #formWrapper *{ line-height: 1.7em; list-style-type: none; font-size: 14px; font-weight: 400; font-style: normal; word-break: break-all; } #fm_contact img{ border-style: none; vertical-align: bottom; } #fm_contact hr{ border: none; border-bottom: 1px solid #ccc; } a.undo{ color: #000; text-decoration: none; } a.undo:hover{ color: #000; text-decoration: underline; } /******************************************************************************************************************************************************************** 　○その他共通設定 ********************************************************************************************************************************************************************/ /*●アイコン等の位置設定*/ .icon_position{ vertical-align: middle; margin-bottom: 4px; } .icon_position2{ vertical-align: middle; margin-bottom: 2px; } /*●チェックボックス位置調整*/ .checkbox_position{ vertical-align: middle; margin-bottom: 3px; } /*●ライン*/ .line_h_1em{ line-height: 1em; } /*改行禁止（20160528 チェックボックスのレスポンシブ対応で暫定設定）*/ .nowrap{ display: inline-block; white-space: nowrap; } /*上付き文字、下付き文字*/ sup, sub{ font-size: 70%; } /******************************************************************************************************************************************************************** 　○サイト独自設定 ********************************************************************************************************************************************************************/ /*　購入テーブル　*/ #tbl_child{ width: 100%; margin-bottom: 10px; } #tbl_child th, #tbl_child td{ border: none; } #tbl_child th{ padding: 5px 20px 5px 0; background: none; color: #000; text-align: left; white-space: nowrap; } /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 　スマートフォン ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ @media (min-width: 0px) and (max-width: 750px) { /*○SP共通事項*/ .sp_block{ display: block; } /*テーブル設定*/ table.tbl_edit th, table.tbl_edit td{ display: block; border: none !important; } table.tbl_edit th{ width: 91%; padding-left: 5%; text-align: left; } input[type="text"], input[type="password"] , input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime"], textarea{ width: 95%; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF)); background-image: -webkit-linear-gradient(left, #FFFFFF, #FFFFFF); } [name='postal']{ width: 100px !important; } [name='tdfk']{ width: 110px !important; } [name='email'], [name='email2']{ width: 95% !important; } [name='tel'], [name='mob'],[name='fax']{ width: 120px !important; } [name='price']{ width: 100px !important; } [name='password']{ width: 120px !important; } [name='mapdata']{ width: 200px !important; } /*　年月日セレクト共通設定　*/ .select_y{ width: 70px !important; } .select_m{ width: 50px !important; } .select_d{ width: 50px !important; } /*　購入テーブル　*/ #tbl_child{} #tbl_child th, #tbl_child td{} #tbl_child th{ padding-right: 0; white-space: normal; } }