body{ background-color:#cccccc; /*<>全体の背景色 (薄いグレー 0%, 0%, 0%, 20%)*/ background:url(./img/bg5_7.gif) center repeat; color:#111111; /*<>全体の文字色 #333333(濃いグレー 0%, 0%, 0%, 80%) → #111111(250503)*/ font-family:"ヒラギノ角ゴシック","メイリオ","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:15pt; /* 230519変更 13pt → 14pt */ font-size-adjust:none; /* 210114追加 フォントの種類により大きさが変わるのを防ぐ */ font-kerning: normal; /* 210114追加 フォントの字詰めをする、主にアルファベット */ line-height: 1.8; /* 210202 行間 15pt → 1.8 */ } /* border-color:#ffcc99;border-style:dotted;border-width:medium; */ .takasa{ text-align:center; min-height:240px; } /* <>--------------------------------------------------------------------------------- */ /* <>---------------------ここから全ページ共通、単純な命令---------------------------- */ .width_30{ /* 240226 表の項目の横幅_豆知識 */ width:30%; padding:15px; } /* <>----------------------ここまで全ページ共通、単純な命令--------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>---------------------ここから全ページ共通の設定---------------------------------- */ .nobr{ /* 250905 */ white-space: nowrap; } .waku{ /* 250501 */ border:5px solid #a63c3c; } .toshi{ /* 2022.02.25 (青色 100%, 100%, 0%, 40%) */ font-weight:bold; font-size:140%; color:#FF9933; } .topsitajiki_index{ background-color:#99cccc; /* index.htmlのみ トップのことり屋の石けん 背景色(やや赤みのある水色 25%, 0%, 0%, 20%) */ background:url(./img/2511_kabe_p_da0375_m_da03752.gif) center repeat; /* ←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←← */ text-align:left; margin-bottom:10px; /* 250509 add 10px */ height:140px; /* 230519 120px → 140px */ min-width:750px; position:static; z-index:0; overflow: hidden; /* 210421 追加 floatを無効にする */ } .topsitajiki{ background-color:#99cccc; /* <>全ページ共通 トップのことり屋の石けん 背景色(やや赤みのある水色 25%, 0%, 0%, 20%) */ background:url(./img/2511_kabe_p_da0375_m_da03752.gif) center repeat; /* ←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←← */ text-align:left; margin:0%; height:140px; /* 230525 120px → 140px */ min-width:750px; position:static; z-index:0; overflow: hidden; /* 210421 追加 floatを無効にする */ } .topkotori{ top:13px; /* 230525 5px → 13px */ left:11px; float:left; position:relative; z-index:2; background-color:#; /* <>全ページ共通 トップのことり石けん印が入る場所 */ padding-right:40px; /* 210423 追加 隣の題字との隙間を空ける */ } .kotori_daiji_index{ padding-left:25px; /* 210402 0px → 25px */ color:#CC0099; /* 210402 <>文字色 (ほぼマゼンダの桃色 0%, 100%, 25%, 20%) */ font-family:"Hiragino Maru Gothic ProN W4","Hiragino Maru Gothic Pro W4","Hiragino Sans","Yu Gothic","Osaka",sans-serif; /* font-family:"MS Serif","Palatino Linotype","Tunga","Shruti",sans-serif; */ font-size: 28pt; font-weight: bold; /* 210402 太文字にする */ font-size-adjust:none; /* 210402 追加 フォントの種類により大きさが変わるのを防ぐ */ } .kotori_daiji{ /* padding-left:50px; /* 210402 0px → 15px 210419 25px → 50px */ */ /* margin-left:50px; /* 210402 0px → 15px 210419 25px → 50px */ */ color:#CC0099; /* 210402 <>文字色 (ほぼマゼンダの桃色 0%, 100%, 25%, 20%) */ font-family:"Hiragino Maru Gothic ProN W4","Hiragino Maru Gothic Pro W4","Hiragino Sans","Yu Gothic","Osaka",sans-serif; /* font-family:"MS Serif","Palatino Linotype","Tunga","Shruti",sans-serif; */ font-size: 23pt; font-size-adjust:none; /* 210402 追加 フォントの種類により大きさが変わるのを防ぐ */ } .topicons_index{ /* 230525 -7px → -35px */ top:-7px; /* 210114 8px → 25px にしたらことりアイコンが下がった, 210423 -25px → -7px */ /* 210404 0px → -35px */ right:5px; /* 210402 5px → 11px */ text-align:right; position:relative; z-index:1; background-color:#; /* <>全ページ共通 トップのアイコンが乗っかるところ */ overflow: hidden; /* 210421 追加 floatを無効にする */ } .topicons{ top:-54px; /* 210404 13px → 10px, -27px(210424) → -34px → -54px(250507) */ right:5px; text-align:right; position:relative; z-index:1; background-color:#; /* <>全ページ共通 トップのアイコンが乗っかるところ */ overflow: hidden; /* 210421 追加 floatを無効にする */ } .topicons_kago{ top:-5px; /* 210404 13px → 10px, 210423 -25px → 3px, 210424 3px → -5px */ right:5px; text-align:right; position:relative; z-index:1; background-color:#; /* <>全ページ共通 トップのアイコンが乗っかるところ */ overflow: hidden; /* 210421 追加 floatを無効にする */ } .icon_l{ width:77px; height:56px; border-style:none; background-color:#; /* <>全ページ共通 ことりアイコン大の場所 */ } .icon_s{ width:66px; height:48px; border-style:none; background-color:#; /* <>全ページ共通 ことりアイコン小の場所 */ } .copyright{ background-color:#99cccc; /* <>全ページ共通 一番下の著作権のところの背景色 (やや赤みのある水色 25%, 0%, 0%, 20%) */ background:url(./img/2511_kabe_p_da0375_m_da03752.gif) center repeat; /* ←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←← */ color:#666699; /* <>全ページ共通 一番下の著作権のところの文字色 (藤色 33%, 33%, 0%, 40%) */ font-weight: bold; text-align:right; margin:15px 0% 0% 0%; } .menu{ background-color:#; /* <>全ページ共通(indexページ除く) ページ下の各ページへ移動のメニュー項目の背景色 */ text-align:center; margin:0% 5%; } hr{ color:#999999; /* <>全ページ共通(indexページ除く) 本文とページ下の各ページへ移動リンクの間の区切り線の色 (灰色 0%, 0%, 0%, 40%) */ margin-top:7px; margin-bottom:11px; width:91%; } h4{ background-color:#ffccff; /* <>全ページ共通 大きめの見出しの背景色(薄い桃色) */ background:url(./img/sim_013.gif) center repeat; color:#660000; /* <>全ページ共通 大きめの見出しの文字色 (濃い赤色 0%, 100%, 100%, 60%) */ text-align:center; margin-top:45px; margin-bottom:-9px; width:500px; } h3{ background:url(./img/sim_011.gif) center repeat; background-color:#99ccff; /* <>全ページ共通 小さめの見出しの背景色(薄い水色) */ color:#000066; /* <>全ページ共通 小さめの見出しの文字色 (濃い青色 100%, 100%, 0%, 60%) */ text-align:center; margin-top:25px; } .bg{ text-align:center; background:url(./img/bg11_4.gif) center repeat; background-color:#99cccc; /* <>全ページ共通 表の項目名(背景青、中央揃え)の背景色 (薄い水色、黄みは全くない 25%, 0%, 0%, 20%) */ border:2px solid #66cccc; /* 210421 変更 1px → 2px */ /* border-color:#66cccc; <>全ページ共通 表の項目名(青、中央揃え)の線の色 (薄い水色黄みは全くない、シアンに近い 50%, 0%, 0%, 20%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ min-height:70px; /* 210202 表の一行の最低高さを設定する */ padding-left:10px; /* 250511 */ padding-right:10px; /* 250511 */ } .bgl{ background:url(./img/bg11_4.gif) center repeat; background-color:#99cccc; /* <>全ページ共通 表の項目名(背景青、左寄せ)の背景色 (薄い水色、黄みは全くない 25%, 0%, 0%, 20%) */ border:2px solid #66cccc; /* 210421 変更 1px → 2px */ /* border-color:#66cccc; <>全ページ共通 表の項目名(青、左寄せ)の線の色 (薄い水色黄みは全くない、シアンに近い 50%, 0%, 0%, 20%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ padding-left:10px; /* 250511 */ padding-right:10px; /* 250511 */ } .gc{ text-align:center; background:url(./img/bg11_3.gif) center repeat; background-color:#99cccc; /* <>全ページ共通 表の項目名(背景緑、中央揃え)の背景色 (薄い水色、黄みは全くない 25%, 0%, 0%, 20%) */ border:2px solid #33cc99; /* 210421 変更 1px → 2px */ /* border-color:#33cc99; <>全ページ共通 表の項目名(緑、中央揃え)の線の色 (青緑色 75%, 0%, 25%, 20%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ } .bb{ text-align:left; background:url(./img/bg11_3.gif) center repeat; background-color:#99cc99; /* <>全ページ共通 表の項目名(背景緑、左寄せ)の背景色 (パステルカラーの黄緑色 25%, 0%, 25%, 20%) */ border:2px solid #33cc99; /* 210421 変更 1px → 2px */ /* border-color:#33cc99; <>全ページ共通 表の項目名(緑、左寄せ)の線の色 (カメレオンの緑色 75%, 0%, 25%, 20%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ padding-left:10px; padding-right:10px; } .bbc{ text-align:center; background:url(./img/bg11_3.gif) center repeat; background-color:#cccccc; /* <>全ページ共通 表のデータ部(背景薄灰色、中央揃え)の背景色 (薄い灰色 0%, 0%, 0%, 20%) */ border:2px solid #999999; /* 210421 変更 1px → 2px */ /* border-color:#999999; <>全ページ共通 表のデータ部(濃いめ灰色、中央揃え)の線の色 (灰色 0%, 0%, 0%, 40%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ } .bbc_110{ /* 210404 追加_表の幅を固定する */ text-align:center; background:url(./img/bg11_7.gif) center repeat; background-color:#cccccc; /* <>全ページ共通 表のデータ部(背景薄灰色、中央揃え)の背景色 (薄い灰色 0%, 0%, 0%, 20%) */ border:2px solid #999999; /* 210421 変更 1px → 2px */ /* border-color:#999999; <>全ページ共通 表のデータ部(濃いめ灰色、中央揃え)の線の色 (灰色 0%, 0%, 0%, 40%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; width:110px; } .bbr{ text-align:right; background:url(./img/bg11_7.gif) center repeat; background-color:#cccccc; /* <>全ページ共通 表のデータ部(背景薄灰色、右寄せ)の背景色 (薄い灰色 0%, 0%, 0%, 20%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ /* border-color:#999999; <>全ページ共通 表のデータ部(濃いめ灰色、右寄せ)の線の色 (灰色 0%, 0%, 0%, 40%) */ border:2px solid #999999; /* 210421 変更 1px → 2px */ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ } .bw{ text-align:center; background-color:#; /* <>全ページ共通 表のデータ部(背景なし、中央揃え)の背景色 */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ } .bww{ text-align:left; background-color:; /* <>全ページ共通 表のデータ部(背景なし、左寄せ)の背景色 */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ } .br{ text-align:center; background:url(./img/bg11_1.gif) center repeat; background-color:#ffcccc; /* 背景色 (薄い赤色 0%, 20%, 20%, 0%) */ border:2px solid #ff9999; /* 210421 変更 1px → 2px */ /* border-color:#ff9999; <>全ページ共通 表の項目名(赤、左寄せ)の線の色 (薄い赤色 0%, 40%, 40%, 0%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ } .brl{ text-align:left; background:url(./img/bg11_1.gif) center repeat; background-color:#ffcccc; /* <>全ページ共通 表のデータ部(背景薄灰色、中央揃え)の背景色 (薄い赤色 0%, 20%, 20%, 0%) */ border:2px solid #ff9999; /* 210421 変更 1px → 2px */ /* border-color:#ff9999; <>全ページ共通 表のデータ部(赤、中央揃え)の線の色 (薄い赤色 0%, 40%, 40%, 0%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 15pt → 1.8 */ } .uee{ color:#; /* <>全ページ共通 ページの途中で上に戻るリンク「上へ」 小見出しの前に置く */ text-align:right; } .mannaka{ color:#; /* <>全ページ共通 ページの途中で上に戻るリンク「上へ」 小見出しの前 */ margin:0px 5%; } li.mokuji{ border:2px solid #cccccc; /* border-color:; <>全ページ共通 リストそれぞれの囲み線の色 (薄い灰色 0%, 0%, 0%, 20%) */ text-align:left; margin:5px 85px 5px 50px; padding:0px 30px; list-style-type:none; } ul.mokuji{ border:3px solid #cccccc; /* border-color:; <>全ページ共通 リスト全体の囲み線の色(発送などで使われている) (薄い灰色 0%, 0%, 0%, 20%) */ text-align:left; margin:5px 85px 5px 50px; padding:5px 30px; } div.mannaka{ margin-top:7px; margin-left:5%; color:#; /* <>全ページ共通(indexページ除く) 画面上、このページまでの軌跡 */ } hr.kugiri{ color:#666666; /* <>全ページ共通(indexページ除く) 本文と、ページ下の各ページへ移動リンク間の区切り線 (灰色 0%, 0%, 0%, 60%) */ margin-top:3px; margin-bottom:3px; width:91%; } .hidari{ font-size:10pt; line-height:1.2; /* 210202 行間 11pt → 1.2 */ text-align:left; color:#; /* <>全ページ共通(indexページ除く) 小文字の文字色 */ } .komojihidari_ligth{ /* 210404 追加_色の薄い小文字 */ font-size:10pt; line-height:1.2; /* 210202 行間 11pt → 1.2 */ text-align:left; color:#999999; /* <>全ページ共通(indexページ除く) 小文字の文字色 (薄い灰色 0%, 0%, 0%, 40%) */ } .komojihidari{ /* 210404 追加_色の薄い小文字 */ font-size:10pt; line-height:1.2; /* 210202 行間 11pt → 1.2 */ text-align:left; color:#5B602A; /* <>全ページ共通(indexページ除く) 小文字の文字色 (薄い灰色 0%, 0%, 0%, 40%) */ } .red{ color:#ff0000; } .red_cc0000{ /* 250812 色指定 赤 #cc0000 */ color:#cc0000; } .aka{ /* <>注文画面の中のエラー文(大)の文字色 (赤色、金赤に近い 0%, 100%, 75%, 20%) */ color:#cc0033; } .gray{ /* <>注文画面の中のエラー文(大)の文字色 (赤色、金赤に近い 0%, 100%, 75%, 20%) */ color:#666666; } .S{ /* 210404 追加_太文字 */ font-weight:bold; display:inline-block; /* 210404 改行させない */ } .SS{ /* 230519 追加_太文字 */ font-weight:bold; } .width_120{ /* 240925 幅を指定する */ width:320px; } .moji_120p{ /* 250812 文字サイズを120%大きくする */ font-size:120%; } .moji_15r{ /* 250905 文字サイズを大きくする */ font-size:1.5rem; } .moji_13r{ /* 250905 文字サイズを変更 */ font-size:1.3rem; } .moji_09r{ /* 250905 文字サイズを変更 */ font-size:.9rem; } .yoko_10{ /* 240925 幅を指定する */ padding:100px; } .center_90p{ /* 250823 表、画像を中央揃え */ display: block; margin-left: auto; margin-right: auto; width: 90%; } .kiseki{ /* <>全ページ共通(indexページ除く) 軌跡の表示 */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"Trebuchet MS Bold","BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size: 62.5%; /* 250905変更 */ font-size: 1.5rem; /* 250905変更 */ font-weight:bold; color:#cc6666; /* 文字色 (薄い赤色 0%, 50%, 50%, 20%) */ margin-top:5px; /* 210207 追加 */ } .hissuuuu{ /* 210202 必須項目 .hissu */ text-shadow:1px 1px 0px #ffffff, 3px 3px 2px #663333; /* 文字の影の色 (白色 0%, 0%, 0%, 0%) */ } .no_br{ /* 210405 追加_改行しない */ display: inline-block; } .moji_Ser{ /* 250812 文字サイズを-1小さくする */ font-size:-1; } /* <>----------------------ここまで全ページ共通の設定--------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>----------------------ここからindexページの設定---------------------------------- */ div.sitajiki_i1{ margin:15px 15% 0% 15%; min-height:158px; min-width:350px; border-color:#ffcc99;　　　　　　　　　　 /* <>indexページの石けん画像と文章全体の一番下の下敷きの線色 (薄い橙色 0%, 20%, 40%, 0%) */ border-style:dotted; border-width:thick; position:static; z-index:0; } div.sitajiki_i2{ background-color:#ffffff; /* <>indexページの石けん画像と文章全体の二番目の下敷きの背景色 (白色 0%, 0%, 0%, 0%) */ top:0px; right:0px; bottom:0px; left:0%; border-color:#ffcc00; /* <>indexページの石けん画像と文章全体の二番目の下敷きの線色 (真っ黄色 0%, 20%, 100%, 0%) */ border-style:dotted; border-width:thick; position:relative; z-index:1; } img.indeximg{ width:175px; height:158px; margin-top:11px; margin-left:11px; background-color:#ffffff; 　　　　　　　　 /* <>indexページの石けん画像の背景色 (白色 0%, 0%, 0%, 0%) */ z-index:2; position:relative; } div.indexwords{ background-color:#; /* <>indexページの石けん画像右隣の文章の背景色 */ text-align:left; margin:-158px 0px 0px 200px; min-height:158px; position:relative; z-index:3; } div.youkoso{ font-family:MS UI Gothic; font-size:21pt; font-weight:bold; color:#990033; /* <>indexページの石けん画像右隣のようこその文字色 (桃色がかった赤色 0%, 100%, 67%, 40%) */ text-align:center; margin-top:11px; } td.youkoso{ background-color:#ffffff; /* <>indexページの石けん画像右隣のようこその囲みの背景色 (白色 0%, 0%, 0%, 0%) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; text-align:center; line-height:1.8; /* 210202 行間 15pt → 1.8 */ } .hidariue{ background-color:#ffffff; 　　　　　　　 /* <>indexページの左上の背景色 (白色 0%, 0%, 0%, 0%) */ width:250px; margin-bottom:5px; padding:5px; text-align:center; } .migi{ background:url(./img/bg46_7.gif) center repeat; background-color:#cccccc; /* <>indexページの右の「お知らせ」などの背景色 (灰色 0%, 0%, 0%, 20%) */ border:1px solid #E1A7CA; /* border-color:#E1A7CA; <>indexページの右の「お知らせ」などの線色 (空色 50%, 25%, 0%, 20%)___250426 6699cc→E1A7CA */ margin-bottom:5px; padding:5px; text-align:left; font-size:13pt; /* 230519 追加_ */ line-height:140%; /* 230519 追加_ */ } .mokuji_1{ background:url(./img/bg46_2.gif) center repeat; background-color:#ffffcc; /* <>indexページ中央の目次の題名の背景色 (薄い黄色、ひよこ色 0%, 0%, 20%, 0%) */ border:1px solid #ffcc66; /* border-color:#ffcc66; <>indexページ中央の目次の題名の囲み線色 (薄い橙色 0%, 20%, 60%, 0%) */ width:105px; padding:30px; /* 7px → 30px(250511) */ margin:0px; /* 0px(250511) */ text-align:center; font-size:13pt; /* 230519 追加_ */ line-height:140%; /* 230519 追加_ */ } .mokuji_2{ background:url(./img/bg46_2.gif) center repeat; background-color:#ffffcc; /* <>indexページ中央の目次の内容説明の背景色 (薄い黄色、ひよこ色 0%, 0%, 20%, 0%) */ border:1px solid #ffcc66; /* border-color:#ffcc66; <>indexページ中央の目次の内容説明の囲み線色 (薄い橙色 0%, 20%, 60%, 0%) */ padding:30px; /* 7px → 30px(250511) */ margin:0px; /* 0px(250511) */ font-size:13pt; /* 230519 追加_ */ line-height:140%; /* 230519 追加_ */ } .mokuji_22{ background:url(./img/bg46_2.gif) center repeat; background-color:#ffffcc; /* <>indexページ中央の目次の内容説明の背景色 (薄い黄色、ひよこ色 0%, 0%, 20%, 0%) */ border:1px solid #ffcc66; /* border-color:#ffcc66; <>indexページ中央の目次の内容説明の囲み線色 (薄い橙色 0%, 20%, 60%, 0%) */ padding:15px; /* 7px → 15px(250511) */ margin:0px; /* 0px(250511) */ font-size:13pt; /* 230519 追加_ */ line-height:140%; /* 230519 追加_ */ } .oshirase{ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:1.8rem; font-weight:bold; color:#000099; /* <>indexページの右の「お知らせ」内の文章の文字色 (青色 100%, 100%, 0%, 40%) */ text-align:center; margin-top:11px; } .hiduke{ /* <>indexページの右の「お知らせ」内の日付の文字色 (青色 100%, 100%, 0%, 40%) */ color:#bd6b9c; /* 250426 000099→bd6b9c */ font-weight:bold; text-align:left; } .nanika{ /* <>indexページの右の「お知らせ」内の項目の文字色 (青色 100%, 100%, 0%, 40%) */ color:#bd6b9c; /* 250426 000099→bd6b9c */ font-weight:bold; text-align:center; } .komojimigi{ font-size:10pt; text-align:right; color:#; /* <>indexページの右の「お知らせ」内の右寄せの小文字の色 */ } .tamani{ background:url(./img/bg46_1.gif) center repeat; /* <>時々表示するお知らせ */ background-color:#ffcccc; /* <>indexページの右の「お知らせ」などの背景色 (桃色桜色 0%, 20%, 20%, 0%) */ border:2px solid #990033; width:94%; text-align:center; font-size:10pt; line-height:97%; margin:5px 2% 5px 2%; padding:5px; } .todokanai{　　　　　　　　　 　 /* <>indexページ　 */ padding:7px; font-size:13pt; font-weight:bold; padding:10px 20px; margin:10px 15%; border:3px solid #fc3b7b; } .todokanai_mojiiro{ color:#b2112c; } .harigami{ /* お知らせ (メールが戻ってくるときとか) */ text-align:left; font-weight:normal; line-height:1.4; padding:7px; width:95%; margin:5px 2px 15px 5px; border-color:#ff0000; /* 囲み線 #ff0000(赤) */ border-width:3px; border-style:inset; } /* <>------------------------ここまでindexページの設定-------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>------------------------ここからきっかけページの設定----------------------------- */ .kikkake_imghidari{ /* 250819 きっかけの写真の位置_左 */ float: left; margin-right: 25px; } .kikkake_imgmigi{ /* 250819 きっかけの写真の位置_右 */ float: right; margin-left: 25px; } /* <>------------------------ここまできっかけページの設定----------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>------------------------ここから豆知識ページの設定------------------------------- */ .chuuigaki{ font-size:91%; padding-left:15%; background-color:#; /* <>豆知識ページの「石けんと洗剤 」の表の下の注意書きの背景色 */ } p.chuuigaki{ font-size:91%; padding-left:170px; margin-top:-1px; background-color:#; /* <>豆知識ページの表の下の「＋」についての注意書き */ } .jpg_moji_mame{ margin-top:-15px; /* 211016 豆知識ページの画像位置 */ margin-bottom:30px; text-align:center; width:550px; } .chuuou_mame{　　　 　 　　　　 /* 211017 中央寄せにする。 */ display:inline-block; width: 600px; margin-left: auto; margin-right: auto; } .font_bigger_mame{　　 　 　　 /* 211031 手順の番号を太字にする */ font-size:150%; font-weight:bold; } /* <>------------------------ここまで豆知識ページの設定------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>------------------------ここから問い合わせページの設定--------------------------- */ p.kakomu{ text-align:center; background-color:#ffffcc; /* <>問い合わせ先、の背景色 (薄い黄色 0%, 0%, 20%, 0%) */ margin-left:25%; margin-right:25%; margin-top:5%; margin-bottom:30px; padding:5%; line-height:1.8; /* 210202 行間 25pt → 1.8 */ } img.shoumen{ background-color:#; /* <>問い合わせ先のメールアドレスを隣の画像の真ん中の高さになるようにする、の背景色 */ vertical-align:middle; } hr.space{ color:#cccccc; /* <>問い合わせ先と特定商取引法に基づく表示を分ける線　間を空ける、の文字色 (灰色 0%, 0%, 0%, 20% ) */ margin-bottom:30px; } div.narabu{ /* 210421 追加 「送信」と「前に戻る」ボタンを横並びにする、外の囲み */ display:flex; flex-wrap:wrap; justify-content:space-evenly; width: 40%; /* margin: 30px 0; */ padding-top: 10px; min-width:100px; /* 210424 追加 最小幅を設定する */ left:-30px; /* 210424 追加 */ border: solid 1px #6091d3; /* 210424 線 (水色っぽい青色 55%, 31%, 0%, 17% ) */ border-radius: 30px; /* 210424 角の丸み*/ } div.botton_narabu{ /* 210421 追加 「送信」と「前に戻る」ボタンを横並びにする、それぞれのボタンにつける */ width: 60px; /* 210421 変更 [calc(100% / 3 - 30px)] → [] */ margin-bottom: 8px; padding: 10px 5px; left:-30px; /* 210424 変更 center → left */ border: solid 3px #ffff00; /* 線 (黄色 0%, 0%, 100%, 0% ) */ border-radius: 30px; /* 角の丸み */ } #btn_toiawase{ /* 210421 追加 「問い合わせ」の「確認画面へ」ボタンの見かけ */ width:180px; background:#ffccff; /* btn_cart_bg<>商品画面のカート順路のボタン背景 (桃色、いちご牛乳色 0%, 80%, 60%, 0% ) */ border-color:#FF3366; /* 210421 ボタンの外枠、左右上の色 (赤色、アメリカンチェリー色 0%, 100%, 50%, 60% ) */ font-weight:bold; font-size:13pt; color:#660033; /* 210421 ボタンの中の文字の色 (赤色、アメリカンチェリー色 0%, 100%, 50%, 60% ) */ display: inline-block; /* 210421 追加ここから 「問い合わせ」の「確認画面へ」ボタンが立体 */ padding: 0.5em 1em; text-decoration: none; border-radius: 4px; background-image: -webkit-linear-gradient(45deg, #FFCCFF 0%, #FF6699 100%); /* 210421 ボタンの中のグラデーションの色 (桃色、いちご牛乳色 0%, 80%, 60%, 0% )(ビビットな桃色 0%, 60%, 40%, 0% ) */ background-image: linear-gradient(45deg, #FFCCFF 0%, #FF6699 100%); /* 210421 ボタンの中のグラデーションの色 (桃色、いちご牛乳色 0%, 80%, 60%, 0% )(ビビットな桃色 0%, 60%, 40%, 0% ) */ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: 3px solid #CC99CC; /* 210421 ボタンの下の影の色 (にごった桃色 0%, 25%, 0%, 20% ) */ } /* 210421 追加ここまで 「問い合わせ」の「確認画面へ」ボタンが立体 */ #btn_tioawase:active { /* 210421 「問い合わせ」の「確認画面へ」ボタンを押すとへこむ */ -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none !important; } /* 210421 追加ここまで 「問い合わせ」の「確認画面へ」ボタンを押すとへこむ */ /* <>---------------------ここまで問い合わせページの設定------------------------------ */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>---------------------ここから注文ページの設定------------------------------------ */ .AKAcc0000{ /* <>注文画面の中の「注文の流れ」の中の「↓」の文字線 */ color:#cc0000; font:120%; } .shitaya{ /* <>注文画面の中の「注文の流れ」の中の「↓」の文字線 */ color:#; margin-left:11%; } div.soapmei{ background:url(./img/2509_kabe_forAutumn_bg11_2.gif) center repeat; /* 250325 画像変更 sim_013.gif → gmy012 */ background-color:#e2d9af; /* <>注文画面の中の石けん名表示の囲み線の色 (桃色 0%, 40%, 20%, 0% ) */ height:43px; /* 210207 30px → 43px */ margin:10px 15px 0px 15px; /* 210201 margin:15px 15px 0px 15px; → margin:10px 15px 0px 15px; */ padding-top:0px; /* 210201 padding-top:10px; → padding-top:0px; */ text-align:center; color:#243b24; /* <>注文画面の中の石けん名表示の文字線 */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"Trebuchet MS Bold","BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:19pt; font-weight:bolder; } h2.soapmei{ width:98%; height:30px; font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"Trebuchet MS Bold","BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ color:#243b24; /* <>注文画面の中の石けん名表示のh2の文字色 (白色 0%, 0%, 0%, 0% ) */ font-weight: bold; font-weight:bold; background-color:#e2d9af; /* <>注文画面の中の石けん名表示のh2の囲み線の色 (水色 40%, 20%, 0%, 0% ) */ padding-top:10px; padding-left:15px; margin:15px 15px 0px 15px; } .jancode{ color:#167646; /* <>注文画面の中の石けん名表示のとなりのJANコードの文字色 */ margin-top:-21px; /* 210207 -11pt → -21px */ text-align:right; font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:10pt; line-height:1.3; /* 210202 行間 10pt → 1.3 */ letter-spacing:1px; } .soapimg{ background-color:#ffffff; /* <>注文画面の中の石けん画像の背景色 (白色 0%, 0%, 0%, 0% ) */ margin:16px 10px 0px 21px; } div.chuumon{ width:100%; background-color:#; /* <>注文画面の中の石けんの説明文全体の背景色 */ margin:15px 0px 9px 15px; font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.5; /* 210202 行間 12pt → 1.5 */ letter-spacing:2px; } div.soapword{ /* <>注文画面の中の石けんの説明文のみの背景色 */ background-color:#; margin-bottom:9px; margin-right:15%; font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; color:#333333; line-height:1.4; /* 210202 行間 12pt → 1.5 */ /* 210205 行間 1.5 → 1.4 */ letter-spacing:2px; } .koumoku{ background-color:#e8edb9; /* <>注文画面の中の「原材料」「重さ」「価格」の項目名の背景色 */ width:70px; /* 横幅 */ color:#3F4A2C; /* フォント */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; font-size:14pt; font-weiht:bold; border-color:#5B602A; /* 背景色 */ border-width: 2px; border-style: solid; padding: 2px 3px 2px 3px; /* 内側の隙間 */ line-height:1.2; /* 行間 1.8 → 1.4 */ } ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// .koumok{ /* <>注文画面の中の「原材料」「重さ」「価格」の項目名の背景色 */ margin-top:10px; /* 5px → 10px(250506) */ margin-bottom:11px; margin-left:20px; background-color:#A9EEFF; /* <>注文画面の中の「原材料」「重さ」「価格」の項目名の背景色 (薄い藤色 20%, 20%, 0%, 0% ) */ width:70; font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:17pt; font-weiht:bold; color:#0067D4; /* <>注文画面の中の「原材料」「重さ」「価格」の項目名の文字色 (青色 100%, 100%, 0%, 40% ) */ line-height:1.4; /* 210202 行間 12pt → 1.8 */ /* 210205 行間 1.8 → 1.4 */ border-color:#7C62C4; /* 背景色 */ border-width: 1px; border-style: solid; padding: 1px 2px 1px 2px; } .aboutsoap{ background-color:#; /* <>注文画面の中の「原材料」「重さ」「価格」の数値の背景色 */ margin:-30px 10% 11px 110px; /* 210207 -27px → -35px → -30px(250506)*/ /*margin-bottom:11px;*/ /*margin-left:65px;*/ /*margin-right:10%;*/ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ line-height:1.4; /* 210202 行間 12pt → 1.8 */ /* 210205 行間 1.8 → 1.4 */ letter-spacing:2px; } .chuumon_tanka{ color:#cc0000; /* chuumon_tanka<>注文画面の値段表示 (赤色、金赤 0%, 100%, 100%, 20% ) */ } .kakaku{ /* <>注文画面の中の注文個数と入力ボタンの位置の背景色 */ background:url(./img/ch08-bg.gif) center repeat; background-color:#; margin-top:10px; margin-left:55px; padding:5px 11px; width:155px; font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:13pt; line-height:1.8; /* 210202 行間 11pt → 1.8 */ clear:right; } .kago_ni_ireru{ margin-left:20px; } .msg{ /* <>注文画面の中のメッセージ文(中央揃え)の文字色 (灰色 0%, 0%, 0%, 60% ) */ color:#666666; text-align:center; font-weight:bold; } .msg_l{ /* <>注文画面の中のメッセージ文(左寄せ)の文字色 (青色 100%, 100%, 0%, 40% ) */ color:#000099; text-align:left; font-weight:bold; } .msg__l{ /* <>注文画面の中のメッセージ文(左寄せ)の文字色 (青色 100%, 100%, 0%, 40% ) */ color:#666633; text-align:left; font-size:-1; } .msg_c{ /* 「表示対象数」の文字色 in 注文画面 */ color:#666633; /* 「表示対象数」の文字色 in 注文画面 (青色 100%, 100%, 0%, 40% ) */ text-align:; font-weight:bold; } .pageCH{ /* 220110追加 注文画面の「検索表示対象数」表示 */ color:#48351B; text-align:; font-weight:bold; } .msg_r{ color:#; /* <>注文画面の中のメッセージ文(右寄せ)の文字色 */ font-size:12pt; text-align:right; margin-top:-16px; /* 210207 -21px → -16px */ } .chuui{ color:#cc0033; /* <>注文画面の中のエラー文(大)の文字色 (赤色やや桃色がかった 0%, 100%, 75%, 20% ) */ font-size:120%; font-weight:bold; text-align:center; } .chuui_normal{ color:#cc0033; /* <>注文画面の中のエラー文(大)の文字色 (赤色やや桃色がかった 0%, 100%, 75%, 20% ) */ font-weight:bold; } .chuui_ko{ color:#cc0033; /* <>注文画面の中のエラー文(小)の文字色 (赤色やや桃色がかった 0%, 100%, 75%, 20% ) */ font-size:10pt; } .komoji{ color:#; /* <>注文画面の中の子文字(中央揃え)の文字色 */ font-size:13pt; text-align:center; } table.deeta{ color:#; /* <>注文画面の中の注文後のデータを表示する表の文字色 */ border-collapse:collapse; } .and_or{ background-color:#; /* <>注文画面の中の、and_or and検索or検索の表示の背景色 */ text-align:center; } .icon_KorZ{ margin-top:7px; margin-left:0px; } .chuumon_tanka{ color:#cc0000; /* chuumon_tanka<>注文画面の値段表示 (赤色 0%, 100%, 100%, 20% ) */ } .memori_red{ /* 250812 [使用感]と[泡立ち]の程度を表す目盛りが赤 */ width:10px; background-color:#cc0000; } .memori_gray{ /* 250812 [使用感]と[泡立ち]の程度を表す目盛りが灰色 */ width:10px; background-color:#999999; } .kagoni_sukima{ /* 250819 個数と[かごに入れる]の間の隙間 */ margin-left:15px; } /* <>--------------------ここまで注文ページの設定------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>-------------------ここから_かごの中確認画面始まり------------------------------- */ .tejun{ text-align:center; font-weight:bold; padding:7px; width:75%; margin-top:11px; border-color:#FFCC00; /* <>かごの中確認画面の中の、手順表示の背景色 (橙色、黄色みの強い 0%, 20%, 100%, 20% ) */ border-width:3px; border-style:inset; } .td_hidari{ /* <>かごの中確認画面の中の、かごの中表示(左寄せ)の背景色| 250811 [td]削除 */ text-align:left; vertical-align:top; font-weight:bold; font-size:14pt; background:url(./img/2509_kago_bg5_3.gif) center repeat; background-color:#99bdb5; border: solid 2px #233E38; padding-top:1rem; padding-left:1.5rem; padding-bottom:1rem; } .td_migi{ /* <>かごの中確認画面の中の、かごの中表示(右寄せ)の背景色| 250811 [td]削除 */ text-align:right; vertical-align:top; font-weight:bold; font-size:14pt; background:url(./img/2509_kago_bg5_3.gif) center repeat; background-color:#99bdb5; border: solid 2px #233E38; padding-right:1.5rem; padding-bottom:1rem; } .goukei{ background-color:#; /* <>かごの中確認画面の中の、合計金額表示の背景色 */ width:85%; text-align:right; font-weight:bold; color:#666666; /* <>かごの中確認画面の中の、合計金額表示の文字色 */ } .font_bigger{ /* <>かごの中確認画面の中の、合計金額数字部分 */ font-size:115%; color:#3b2b47; /* <>かごの中確認画面_金額の小計_文字色 #b2a7bb → #3b2b47 (220213) */ } .botan{ background-color:#; /* <>かごの中確認画面の中の、前ページに戻る等ボタン表示の背景色 */ text-align:right; margin-right:11%; } .sen{ /* <>かごの中確認画面の中の、客情報入力の題の線の背景色 */ background-color:#F5BB5B; /* #b2a7bb(薄紫) → #C9DC87(薄緑/250502) → #A9EEFF(水色/250811) */ color:#3F4A2C; /* <>かごの中確認画面の中の、客情報入力の題の線の文字色 */ font-weight:bold; text-align:left; width:95%; margin-top:15px; margin-bottom:11px; } .kara{ /* <>かごの中確認画面の中の、「かごの中は空」表示の線色 */ width:85%; height:100px; padding-top:55px; padding-bottom:45px; /* 250506 一文追加 */ margin-top:20px; border-color:#999999; border-width:thin; border-style:solid; text-align:center; font-weight:bold; /* 250506 一文追加 */ } h1{ color:#333333; /* h1<>見出しのテキスト */ font-size:14pt; background:#99ccff; /* h1_bg<>見出しの背景 */ padding:3; margin:0; } ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// /* f5f5f5 */ #kago_koumokubg{ /* kago_koumokubg<>表見出しボーダー */ background:#; border-spacing:1; width:95%; } .kago_koumoku{ /* kago_koumoku<>表見出しテキスト */ background:#f7cd7e url(./img/2509_kago_bg5_2.gif) center repeat; /* 表見出しの背景色 #382078 (250926) */ color:#593634; /* 文字色 #3b2b47(濃紫) → #3B5C0A(緑) */ font-size:14pt; font-weight:bold; text-align:center; /* かごの中確認_表見出し背景色 #b2a7bb(薄紫) → #C9DC87(若草/250502) → */ height:18px; border: solid 2px #593634; } .kago_nakami{ /* 251009追加 かごの表の背景 */ background:#eed7c6 url(./img/2509_kago_bg5_3.gif) center repeat; /* 表の背景 */ color:#5B602A; /* 文字色 #3b2b47(濃紫) → #3B5C0A(緑) */ font-size:14pt; font-weight:bold; text-align:center; /* かごの中確認_表見出し背景色 #b2a7bb(薄紫) → #C9DC87(若草/250502) → */ height:18px; border: solid 2px #5B602A; } .item_ta{ 　　　　　　　 /* cart_item_ta<>カート商品表示ボーダー */ background:#cccccc; border-spacing:1; width:95%; } .item_ta{ 　　　　　　　 /* cart_item_ta<>カート商品表示ボーダー */ background:#999999; width:95%; } #item_name{ font-weight:bold; /* item_name<>商品名テキスト */ } .proc_bg{ background:#cccccc; /* cart_proc_bg<>カートの画面遷移表示ボーダー */ margin-top:11px; } .proc{ background:#; /* cart_proc<>カートの画面遷移表示テキスト */ } .tejun_genzai{ /* 210213 kago.php 注文手順、今どこか発送方法の選択肢 */ display : inline-block; color:#CC3366; /* cart_tejun_genzai<>カートの画面遷移の現在の表示テキスト0066cc */ font-weight:bold; letter-spacing : 4px; /* 文字間 */ text-shadow : /* 文字の影 */ 2px 2px 10px #FFCC99, -2px 2px 10px #FFCC99, 2px -2px 10px #FFCC99, -2px -2px 10px #FFCC99, 2px 0px 10px #FFCC99, 0px 2px 10px #FFCC99, -2px 0px 10px #FFCC99, 0px -2px 10px #FFCC99; /* 2px 2px 1px #FFCC99, */ /* -2px 2px 1px #FFCC99, */ /* 2px -2px 1px #FFCC99, */ /* -2px -2px 1px #FFCC99, */ /* 2px 0px 1px #FFCC99, */ /* 0px 2px 1px #FFCC99, */ /* -2px 0px 1px #FFCC99, */ /* 0px -2px 1px #FFCC99; */ /* height:30px; /* 文字を囲む角丸の四角の大きさ 210223 30px → 30px */ */ /* width:120px; /* 210223 40px → 100px */ */ /* background-color:#FF9966; */ /* padding-top:5px; */ /* padding-left:5px; */ /* border-radius:7px; /* 角丸指定 */ */ } /*********************************** 220405 情報入力の表の表示方法 ここから ***************************************************/ /******************************************************************************************************************************/ table.order_data{ /* cart_form_tr<>カートお客様情報入力ボーダー */ border-collapse:separate; border-spacing:5px; margin-right:5%; margin-left:5%; /* width:85%;*/ } table.order_data th{ /* cart_form_tr_bg<>カートお客様情報入力の項目の背景 */ width:200px; /* 220405 表の項目名部分 幅 */ background:#dfd4ff url(./img/2509_kago_bg5_2.gif) center repeat; /* 表の項目名部分 220213 Pink cca3a9 */ color:#531A25; /* cart_form_tr<>カートお客様情報入力の項目のテキスト */ font-size:100%; /* 210205 フォントサイズ 110%拡大 → 100%(250507) */ border:2.5px solid #531A25; /* 210405 枠線をつける */ /* border-color:#9aad57; 210405 枠線の色 #FF99CC(薄桃) → #FFCCFF(もっと薄桃) */ padding-top:5px; /* 210405 枠の内側の隙間(上) */ padding-bottom:3px; /* 210405 枠の内側の隙間(下) */ padding-left:15px; /* 210405 枠の内側の隙間(左) */ min-height:50px; /* 210205 表の最低限の高さを設定 */ } table.order_data td{ /* cart_form_td_bg<>カートお客様情報入力のフォーム部の背景 */ width:800px; /* 220405 表の項目名部分 幅 */ background:#eed7c6 url(./img/2509_kago_bg5_3.gif) center repeat; /* 表の項目名部分 220213 Light Blue 94a9c1 */ color:#5B602A; /* cart_form_td<>カートお客様情報入力のフォーム部のテキスト */ font-size:103%; font-weight:bold; border:2.5px solid; /* 210405 枠線をつける */ border-color:#5B602A; /* 210405 枠線の色 #CC99FF(薄紫) → #CCCCFF(もっと薄紫) */ padding-top:5px; /* 210405 枠の内側の隙間(上) */ padding-bottom:3px; /* 210405 枠の内側の隙間(下) */ padding-left:15px; /* 210405 枠の内側の隙間(左) */ min-height:50px; /* 210205 表の最低限の高さを設定 */ } .form_th_takasa50{ height: 50px; /* 220207 表の高さを固定する */ } .form_th_takasa40{ height: 40px; /* 220207 表の高さを固定する */ } /******************************************************************************************************************************/ /*********************************** 220405 情報入力の表の表示方法 ここまで ***************************************************/ /******************************************************************************************************************************/ /******************************************************************************************************************************/ /******************************************************************************************************************************/ /******************************************************************************************************************************/ /******************************************************************************************************************************/ #show_top{ background:#99ccff url(./img/ch08-bg.gif) center repeat; width:500px; color:#000099;　 /* show.phpの */ } #kosuu_miseru{ /* 210208 注文内容を確認するページの個数表示部 */ width: 75%; /* 親要素に対して */ padding: 5px 7px; /* ボックスを大きくする */ font-size: 18px; font-weight:bold; border-radius: 3px; /* ボックス角の丸み */ border: 2px solid #b2a7bb; /* 枠線 gray #999999 → #b2a7bb (220213) */ box-sizing: border-box; /* 横幅の解釈をpadding, borderまでとする */ } #kosuu_miseru:focus { border: 3px solid #b2a7bb; /* 枠線 3399CC → #b2a7bb(220213) → #b2a7bb (220213) */ z-index: 10; outline: 0; } #cust_info{ /* 210210 お客様情報を入力するページの入力欄 */ /* width: 100%; */ /* 親要素いっぱい広げる */ padding: 10px 15px; /* ボックスを大きくする */ font-size: 18px; border-radius: 3px; /* ボックス角の丸み */ border: 2px solid #b2a7bb; /* 枠線 #999999 → #b2a7bb(220213) */ box-sizing: border-box; /* 横幅の解釈をpadding, borderまでとする */ } #cust_info:focus { border: 4px solid #b2a7bb; /* 枠線 #6666CC → #91849c(220213) → #b2a7bb(220213) */ z-index: 10; outline: 0; } .hissu{ /* 210210 「必須」を強調表示する。赤文字をうす赤で囲む */ display : inline-block; color : #ff0000; /* 文字の色 */ letter-spacing : 4px; /* 文字間 */ text-shadow : /* 文字の影 */ 2px 2px 1px #ffcccc, -2px 2px 1px #ffcccc, 2px -2px 1px #ffcccc, -2px -2px 1px #ffcccc, 2px 0px 1px #ffcccc, 0px 2px 1px #ffcccc, -2px 0px 1px #ffcccc, 0px -2px 1px #ffcccc; height:20px; /* 文字を囲む角丸の四角 */ width:60px; /* 50px _ 60px(250507) */ background-color:#ffcccc; padding-top:-21px; /* 3px _ -17px(250507) _ -21px(250508) */ padding-left:10px; /* 5px _ 10px(250507) */ border-radius:7px; font-size: 85%; /* 250507 サイズ指定 85% */ } /* /////////////////////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////////////////////// */ /* /////////////////////////////////////////////////////////////////////////////// */ /* 210223 追加ここから kago.php 配達方法を選ぶセレクトボックスにデザイン */ /* 210223 参照 https://copypet.jp/797/ */ .erabu_kago { overflow: hidden; width: 180px; /* 210227 90% → 180px */ margin: 2em auto; text-align: left; /* 210227 center → left */ /* float:left /* 210227 追加 */ display:inline-flex; /* 210404 追加_改行しない */ } .erabu_kago select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: none; outline: none; background: transparent; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .erabu_kago select::-ms-expand { display: none; } .erabu_kago.cp_sl01 { /* 210213 数を選ぶ選択枠について */ position: relative; border: 2px solid #b2a7bb; /* 210213 #FF6699 → #6666CC → #b2a7bb (220213) */ border-radius: 4px; /* 210227 追加 ボックス角の丸み */ /* border-radius: 10px 100px / 120px; /* 210213 2px 100px / 120px → 10px 100px / 120px */ */ border-width: 3px; /* 210213 追加 */ background: #dad5de; /* 210213 背景色 #CCCCFF → #dad5de (220213) */ } .erabu_kago.cp_sl01::before { position: absolute; top: 0.8em; right: 0.9em; width: 0; height: 0; padding: 0; content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #b2a7bb; /* 210213 下向きの三角の色 → #b2a7bb (220213) */ pointer-events: none; } .erabu_kago.cp_sl01 select { /* 210213 文字について */ padding: 8px 38px 8px 8px; color: #3b2b47; /* 210213 文字色 #CC0033 → #333399 → #3b2b47 (220213) */ font-size: 17px; /* 210213 追加、15px → 19px → 17px */ font-weight: bold; /* 210213 追加 */ } /* 210223 追加ここまで kago.php 配達方法を選ぶセレクトボックスにデザイン */ /* 220215 追加ここから チェックボックスにデザインをつける */ /* 220215 参照":kodocode.net/design-css-checkbox/"------- */ /* ------------------------------------------------------ */ label input[type="checkbox"] ~ i.fa.fa-square-o{ color: #c8c8c8; display: inline; } label input[type="checkbox"] ~ i.fa.fa-check-square-o{ display: none; } label input[type="checkbox"]:checked ~ i.fa.fa-square-o{ display: none; } label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{ color: #7AA3CC; display: inline; } label:hover input[type="checkbox"] ~ i.fa { color: #b2a7bb;　　　　　　　　　　　　　　　　　　 /* 210215 チェックボックスの色 */ } div[data-toggle="buttons"] label.active{ color: #b2a7bb;　　　　　　　　　　　　　　　　　 /* 210215 チェックボックスの色 */ } div[data-toggle="buttons"] label { display: inline-block; /* padding: 6px 12px; */ /* margin-bottom: 0; */ /* font-size: 14px; */ /* font-weight: normal; */ border-weight: bold; 　　　　　　　　　　　　　　　　　　 /* 210215 一行の高さを決める */ /* line-height: 2em; */　　　　　　　　　　　　　　　　　　 /* 210215 一行の高さを決める */ /* text-align: left; */ /* white-space: nowrap; */　　　　　　　　　　　　　　　　　　 /* 210215 アルファベットのホワイトスペースをどうするか */ /* vertical-align: top; */ /* cursor: pointer; */　　　　　　　　　　　　　　　　　 　/* 210215 カーソルの形状を変える */ /* background-color: none; */ border: 0px solid #b2a7bb;　　　　　　　　　　　　　　　　　　 /* 210215 太さ、種類、色 #c8c8c8 → #b2a7bb (220215) */ border-radius: 3px;　　　　　　　　　　　　　　　　　　 /* 210215 角丸にする */ color: #3a5370;　　　　　　　　　　　　　　　　　　 /* 210215 文字色 #c8c8c8(灰色) → #3a5370 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;　　　　　　　　　　　　　　　　　 　/* 210215 文章の範囲選択を無効にする */ touch-callout: none;　　　　　　　　　　　　　　　　　　 /* 210215 長押しすることで現れるコールアウト表示を無効にする */ } div[data-toggle="buttons"] label:hover { color: #7AA3CC;　　　　　　　　　　　　　　　　　　 /* #7AA3CC → #b2a7bb (210215) */ } div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active { -webkit-box-shadow: none; box-shadow: none; } /* ------------------------------------------------------ */ /* 220215 追加ここまで チェックボックスにデザインをつける */ /* 220215 参照":kodocode.net/design-css-checkbox/"------- */ /* <>-----------------ここまでかごの中確認ページの設定-------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>------------------------ここから「お知らせ」の設定------------------------------- */ .address{ font-weight:bold; padding-left:21%; } .okurenai01{ font-weight:bold; color:#000099; padding:0px 11% 0px 11%; } .okurenai02{ color:#000099; padding:0px 11% 0px 11%; } .chuui_EO{ font-size:14px; padding:0px 11% 0px 11%; } .oshirase_hidari{ padding-left:320px; } .midashi{ font-weight:bold; font-size:140%; text-align:center; } .sukima01{ padding-top:100px; padding-right:10px; padding-left:10px; padding-bottom:10px; } .moji_futo01{ font-weight:bold; /* 2022.02.25 太字 */ } .moji_150p{ font-size:150%; /* 2022.02.25 文字の大きさを150%増し */ } .moji_120p{ font-size:120%; /* 2022.02.25 文字の大きさを120%増し */ } /* <>----------------------------ここまで「お知らせ」の設定--------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>-----------------ここから「季節の石けん」ページの設定---------------------------- */ .kisetu_sen{ border: 2px solid #99CCCC; } .kisetu_daiji{ text-align:center; font-size:20pt; font-weight:bold; color:#b2a7bb; text-decoration:underline; } .kisetu_soapmei{ text-align:center; background:url(./kisetu/img/2509_kabe_forAutumn_bg11_2.gif) center repeat; background-color:#cccccc; font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:16pt; font-weight:bold; color:#1B7F8F; /* #0000cd; */ font-weight:bold; font-weight:bold; line-height:1.8; /* 210202 行間 13pt → 1.8 */ border:1px solid #6699cc; /* border-color:#6699cc; */ /* 210202 線の色 #6699cc(くすんだ水色) */ height:45px; width:55%; } .kisetu_table_L{ background:url(./kisetu/img/bg11_7.gif) center repeat; background-color:#cccccc; border:1px solid #6699cc; /* border-color:#6699cc; 210202 線の色 #6699cc(くすんだ水色) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 13pt → 1.8 */ } .CCC{ background:url(./kisetu/img/bg11_7.gif) center repeat; background-color:#cccccc; /* 210202 背景の色 #cccccc(灰色) */ border:1px solid #6699cc; /* border-color:#6699cc; 210202 線の色 #6699cc(くすんだ水色) */ font-family:"ヒラギノ角ゴシック","メイリオ","游ゴシック","Meiryo","Meiryo UI",sans-serif; /* font-family:"BIZ UDゴシック Regular","BIZ UDGothic Regular","メイリオ","Meiryo","Meiryo UI",sans-serif; */ /*250502 フォント変更*/ font-size:12pt; line-height:1.8; /* 210202 行間 13pt → 1.8 */ } .kisetu_table_C_center{ text-align:center; } .kisetu_table_C_center_img{ text-align:center; margin-top:15px; } .kisetu_tyuui{ font-size:85%; } .kisetu_nedan{ font-size:16pt; font-weight:bold; color:#990000; } .kisetu_rose_iroiro{ overflow: hidden; } .kisetu_rose_narabu{ padding: -155px 80px 0px 250px; margin-left: 50px; float:left; } .zakka_or_kesho{ margin-left: 5px; margin-bottom: 5px; } /* <>-----------------ここまで「季節の石けん」ページの設定-------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>-----------------ここから「石けん教室」ページの設定-------------------------------------- */ .tukuru_kakudai{ font-weight:bold; color:#990000; font-size:110%; } .yajirusi{ margin-top:-12px; margin-bottom:-12px; padding-left:80px; } /* <>-----------------ここまで「石けん教室」ページの設定-------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>-----------------cart.cssからコピーしてきた-------------------------------------- */ /* 210201 追加ここから__________注文画面のボタン_ボタンを押すとへこむ */ #kagonaka_btn{ /* 250819 [かごの中を見る]ボタン */ width:160px; height:40px; background:#ED872D; /* ボタン背景 */ border-color:#EB9328; /* ボタン枠線の色 */ font-weight:bold; font-size:13pt; color:#ffefdb; /* 文字色 */ display: inline-block; /* 250819 追加ここから ボタンが立体 */ padding: 0.5em 1em; text-decoration: none; border-radius: 4px; background-image: -webkit-linear-gradient(180deg, #DD6600 0%, #800020 100%); /* 250819 [#DD6600オレンジ色 0%, #C2964D芥子色 100%] */ background-image: linear-gradient(180deg, #DD6600 0%, #800020 100%); /* 250819 グラデーションの向きと色 */ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: 3px solid #D48655; /* 250819 ボタンの立体影の色 */ } /* 250819 ここまで */ #kagonaka_btn:active { /* 250819 */ /* 210201 追加ここから ボタンを押すとへこむ */ -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none !important; } /* 210201 追加ここまで__________注文画面のボタン_ボタンを押すとへこむ */ /* 210201 追加ここから__________「かごに入れる」のボタン_ボタンを押すとへこむ */ .kagoni_btn{ /* [かごに入れる]ボタン */ width:160px; height:50px; background:#A9EEFF; /* ボタン背景色 */ border-color:#ff7000; /* ボタン枠線の色 */ font-weight:bold; font-size:14pt; color:#ffffff; /* ボタンの文字色 */ display: inline-block; /* ボタンが立体 ここから */ padding: 0.5em 1em; text-decoration: none; border-radius: 4px; background-image: -webkit-linear-gradient(180deg, #ff7408 0%, #ff8d33 100%); /* ボタンの背景色 [#FFC107 0%, #ff8b5fオレンジ色 100%] → [#FFC107 0%, #db818f濁ったピンク 100%] (220213) → [#ECD204ヒマワリ黄色 0%, #E0E2A7うっすら緑味のあるベージュ 100%](250502) */ background-image: linear-gradient(180deg, #ff7408 0%, #ff8d33 100%); /* ボタンの背景色 [#FFC107 0%, #ff8b5fオレンジ色 100%] → [#FFC107 0%, #db818f濁ったピンク 100%] (220213) → [#ECD204ヒマワリ黄色 0%, #E0E2A7うっすら緑味のあるベージュ 100%](250502) */ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: 3px solid #ff7000; /* ボタンの立体影の色 */ } /* ボタンが立体 ここまで */ .kagoni_btn:active { /* 210201 追加ここから ボタンを押すとへこむ */ -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none !important; } /* 210201 追加ここまで__________「かごに入れる」のボタン_ボタンを押すとへこむ */ /* 210204 追加ここから chuumon.php 個数を選ぶセレクトボックスにデザイン */ /* 210204 参照 https://copypet.jp/797/ */ .ko_select { overflow: hidden; width: 90%; margin: 2em auto; text-align: center; } .ko_select select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: none; outline: none; background: transparent; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .ko_select select::-ms-expand { display: none; } .ko_select.cp_sl01 { /* 数を選ぶ選択枠について */ position: relative; border: 2px solid #233E38; /* 枠線の色 */ border-radius: 10px 100px / 120px; /* 210206 2px → 10px 100px / 120px */ border-width: 3px; /* 210206 追加 */ background: #e8edb9; /* 背景色 */ } .ko_select.cp_sl01::before { position: absolute; top: 0.8em; right: 0.9em; width: 0; height: 0; padding: 0; content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #233E38; /* 下向きの三角の色 */ pointer-events: none; } .ko_select.cp_sl01 select { /* 210206 文字について */ padding: 8px 38px 8px 8px; color: #233E38; /* 文字色 */ font-size: 19px; /* フォントサイズ */ font-weight: bold; /* 太字 */ } /* 210204 追加ここまで chuumon.php 個数を選ぶセレクトボックスにデザイン */ /* 250822 追加ここから__________「お届け先の入力」のボタン_ボタンを押すとへこむ */ .kagoni_btn{ /* [お届け先の入力へ]ボタン */ width:160px; height:50px; background:#A9EEFF; /* ボタン背景色 */ border-color:#ff7000; /* ボタン枠線の色 */ font-weight:bold; font-size:14pt; color:#ffffff; /* ボタンの文字色 */ display: inline-block; /* ボタンが立体 ここから */ padding: 0.5em 1em; text-decoration: none; border-radius: 4px; background-image: -webkit-linear-gradient(180deg, #ff7408 0%, #ff8d33 100%); /* ボタンの背景色 [#FFC107 0%, #ff8b5fオレンジ色 100%] → [#FFC107 0%, #db818f濁ったピンク 100%] (220213) → [#ECD204ヒマワリ黄色 0%, #E0E2A7うっすら緑味のあるベージュ 100%](250502) */ background-image: linear-gradient(180deg, #ff7408 0%, #ff8d33 100%); /* ボタンの背景色 [#FFC107 0%, #ff8b5fオレンジ色 100%] → [#FFC107 0%, #db818f濁ったピンク 100%] (220213) → [#ECD204ヒマワリ黄色 0%, #E0E2A7うっすら緑味のあるベージュ 100%](250502) */ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: 3px solid #ff7000; /* ボタンの立体影の色 */ } /* ボタンが立体 ここまで */ .kagoni_btn:active { /* 210201 追加ここから ボタンを押すとへこむ */ -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none !important; } /* 250822 追加ここまで__________「お届け先の入力」のボタン_ボタンを押すとへこむ */ #btn_cart00{ width:100px; background:#3366cc; /* btn_cart_bg<>商品画面のカート順路のボタン背景 */ border-color:#003399; /* btn_cart_bo<>商品画面のカート順路のボタンボーダー3366cc */ color:#cccc99; /* btn_cart<>商品画面のカート順路のボタンテキスト */ font-weight:bold; } /* 210202 「商品の一覧へ戻る」「前の画面へ戻る」のボタン */ #btn{ /* 210202 「商品の一覧へ戻る」「前の画面へ戻る」のボタン */ width:140px; heigth:50px; background:#d9d8df; /* ボタン背景色 #CCCCCC → #d9d8df薄紫 (220213) */ border-color:#d9d8df; /* ボタンの枠線の色 #CCCC00 → #0099FF(210202) → #f6f6f7白紫 (220213)*/ font-weight:bold; font-size:11pt; color:#3a5370; /* ボタンの文字色 #003399 → #3a5370濁った青 (220213) */ text-align:center; margin-right:5px; /* 220405 ボタンの右の隙間を文字色 #003399 → #3a5370濁った青 (220213) */ display: inline-block; /* 210202 追加ここから ボタンが立体 */ padding: 0.5em 1em; text-decoration: none; border-radius: 4px; background-image: -webkit-linear-gradient(45deg, #f6f6f7 0%, #d9d8df 100%); /* 220213 グラデーションを設定 [#CCFFFF 0% ～ #6699FF 100%] → [#f6f6f7白紫 0% ～ #d9d8df薄紫 100%](220213薄紫) */ background-image: linear-gradient(45deg, #f6f6f7 0%, #d9d8df 100%); /* 220213 グラデーションを設定 [#CCFFFF 0% ～ #6699FF 100%] → [#f6f6f7白紫 0% ～ #d9d8df薄紫 100%](220213薄紫) */ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: 3px solid #cccccc; /* 210202 追加ここまで ボタンが立体 */ } #btn:active{ /* 210202 追加ここから ボタンを押すとへこむ */ -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none !important; } /* 210202 追加ここまで ボタンを押すとへこむ */ /* 210202 「削除」「変更」のボタン */ #btn_de_cha{ /* 210202 「削除」「変更」のボタン */ width:60px; heigth:21px; background:#f6f6f7; /* ボタン背景色 #CCCCCC → #d9d8df (220213薄紫) */ border-color:#d9d8df; /* ボタンの枠線の色 #CCCC00 → #0099FF(210202) → #f6f6f7白紫 (220213)*/ font-weight:bold; font-size:12pt; color:#3a5370; /* ボタンの文字色 #003399 → #3a5370濁った青 (220213) */ text-align:center; margin-right:10px; /* 220405 ボタンの右の隙間を文字色 #003399 → #3a5370濁った青 (220213) */ display: inline-block; /* 210202 追加ここから ボタンが立体 */ text-decoration: none; border-radius: 4px; background-image: -webkit-linear-gradient(45deg, #f6f6f7 0%, #d9d8df 100%); /* 220213 グラデーションを設定 [#CCFFFF 0% ～ #6699FF 100%] → [#f6f6f7白紫 0% ～ #d9d8df薄紫 100%](220213) */ background-image: linear-gradient(45deg, #f6f6f7 0%, #d9d8df 100%); /* 220213 グラデーションを設定 [#CCFFFF 0% ～ #6699FF 100%] → [#f6f6f7白紫 0% ～ #d9d8df薄紫 100%](220213) */ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: 3px solid #CCCCCC; /* 210202 追加ここまで ボタンが立体 */ } #btn_de_cha:active{ /* 210202 追加ここから ボタンを押すとへこむ */ -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none !important; } /* 210202 追加ここまで ボタンを押すとへこむ */ #adm .menu{ color:#333333; font-size:14pt; background:#ccffff; width:150; padding:3; margin:0; text-align:center; font-weight:bold; } #adm .md{ color:#0000ff; } #adm .fmth{ background:#ccc; color:#333333; font-weight:400; } #adm .fmtd{ background:#eee; color:#666666; } /* <>------------------cart.cssからコピーしてきた終わり------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>-----------------------ここから「月ごとの豆知識」の設定-------------------------- */ .kakomi0608_01{ border:2px solid #66cc66; margin:5px 15px 0px 15px; padding:5px 0px 0px 5px; } .kakomi0608_02{ border:2px solid #6699cc; margin:5px 15px 0px 15px; padding:5px 0px 0px 5px; } .ulmigi0703{ border:0px solid #6699cc; margin-left:200px; } .width_70{ /* 240226 表の項目の横幅_豆知識 */ width:70px; padding:5px; } /* <>-----------------------ここまで「月ごとの豆知識」の設定-------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>----------------------------ここから管理画面へ入る入力--------------------------- */ .kanri{ margin-left:5%; } /* <>----------------------------ここまで管理画面へ入る入力--------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>----------------------------ここから「動くボタン(Hover Action)」の設定----------- */ .btn-a13 { display: inline-block; padding: 0.5em 1em; text-decoration: none; border-radius: 4px; color: #ffffff; background-image: -webkit-linear-gradient(45deg, #ECD204 0%, #E0E2A7 100%); background-image: linear-gradient(45deg, #ECD204 0%, #E0E2A7 100%); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: 3px solid #c58668; } .btn-a13:active { -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none !important; } .test{ display : inline-block; border-radius : 5%; /* 角丸 */ font-size : 25pt; /* 文字サイズ */ text-align : right; /* 文字位置 */ } /* <>----------------------------ここまで「動くボタン(Hover Action)」の設定----------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------- ここから「画像の大きさ」の設定_すべてのページ ------- */ /* <>------ ここから全ページ共通の指定 ------- */ .all_kotori{ /* 250513 ことり屋マークの大きさを指定 */ width: 114px; height: 110px; } .all_menu{ /* 250513 他のページに行くアイコンの大きさを指定 */ width: 79px; height: 57px; } .all_menu_s{ /* 250513 他のページに行くアイコンの大きさを指定 for chuumon.phpの小さいアイコン */ width: 68px; height: 49px; } /* <>------ ここからindex上の画像の指定 ------- */ .index_daiji{ /* 250513 indexの題字の大きさを指定 */ width: 257px; height: 36px; } .index_kongetsu{ /* 250513 index上の今月の石けんの画像の大きさを指定 */ width: 563px; height: 422px; } /* <>------ ここからkikkake上の画像の指定 ------- */ .kikkake_daiji{ /* 250513 [きっかけ]の題字の大きさを指定 */ width: 377px; height: 36px; } .kikkake_img{ /* 250513 [きっかけ]上の画像の大きさを指定 */ width: 200px; height: 150px; } /* <>------ ここからmamechishiki上の画像の指定 ------- */ .mamechishiki_daiji{ /* 250513 [きっかけ]の題字の大きさを指定 */ width: 437px; height: 36px; } .mamechishiki_img{ /* 250513 [きっかけ]上の画像の大きさを指定 */ width: 200px; height: 150px; } .mamechishiki_2110_img{ /* 250513 [きっかけ]上の画像の大きさを指定 */ width: 550px; height: 413px; } .mamechishiki_0705_01_img{ /* 250513 [きっかけ]上の画像の大きさを指定 */ width: 290px; height: 198px; } /* <>------ ここからchuumon.php上の画像の指定 ------- */ .chuumon_daiji{ /* 250521 [注文]の石けん画像の大きさを指定 */ width: 580px; height: 450px; } .chuumon_nioi{ /* 250521 [注文]の[無香料、香り付き]アイコンの大きさを指定 */ width: 60px; height: 63px; } .chuumon_kesho{ /* 250521 [注文]の[化粧石けん、雑貨]アイコンの大きさを指定 */ width: 58px; height: 59px; } /* <>------ ここからkago.php上の画像の指定 ------- */ .kago_daiji_see{ /* 250522 [かごの中を見る]の題字画像の大きさを指定 */ width: 457px; height: 36px; } .kago_daiji_input{ /* 250522 [お届け先の入力]の題字画像の大きさを指定 */ width: 507px; height: 36px; } .kago_daiji_confirm{ /* 250522 [入力内容の確認]の題字画像の大きさを指定 */ width: 491px; height: 36px; } .kago_daiji_complet{ /* 250522 [ご注文完了]の題字画像の大きさを指定 */ width: 434px; height: 36px; } .kago_hyou_haba10p{ /* 250522 [かごの中を見る]の表の幅を10%で指定 */ width: 10%; } .kago_hyou_haba11p{ /* 250522 [かごの中を見る]の表の幅を11%で指定 */ width: 11%; } .kago_hyou_haba13p{ /* 250522 [かごの中を見る]の表の幅を13%で指定 */ width: 13%; } .kago_hyou_haba15p{ /* 250522 [かごの中を見る]の表の幅を15%で指定 */ width: 15%; } .kago_hyou_haba35p{ /* 250522 [かごの中を見る]の表の幅を35%で指定 */ width: 35%; } .kago_hyou_haba45p{ /* 250522 [かごの中を見る]の表の幅を45%で指定 */ width: 45%; } .kago_hyou_haba55p{ /* 250522 [かごの中を見る]の表の幅を55%で指定 */ width: 55%; } .kago_hyou_haba95p{ /* 250522 [かごの中を見る]の表の幅を95%で指定 */ width: 95%; } .kago_hyou_haba100{ /* 250522 [かごの中を見る]の表の画像の幅を100pxで指定 */ width: 100px; } /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>--------------------------------------------------------------------------------- */ /* <>----------------------使ってない------------------------------------------------- */ #fl{ float:left; background-color:#; /* <>メールアドレスの左に画像を配置する、の背景色 */ } /* 全石けん共通 div.chuumonの中でこめこめ石けん名の両端の小さな画像 */ /*img.imgs{vertical-align:middle;}*/ /* 注文個数と入力ボタンの位置02 */ div.kakaku02{background-color:#f5f5f5;margin:5px 0px 7px 0px;font-family:"MS UI Gothic",monospace;font-size:12pt;line-height:12pt;} /* komo netへのリンク */ /*.komo{font-size:10pt;text-align:right;margin-top:-35px;margin-right:5%;}*/ /* 注文の流れの注文内容の確認 グレー */ /*td.nagare1{color:#cccccc;font-size:13pt;font-weight:bold;text-align:center;border-color:#cccccc;border-style:solid;border-width:thicker;width:150px;}*/ /* 注文の流れの注文内容の確認 オレンジ */ /*td.nagare2{color:#ff9966;font-size:13pt;font-weight:bold;text-align:center;border-color:#ffcc99;border-style:solid;border-width:thicker;width:150px;}*/ /* 発送先入力 */ /*.nyuuryoku{background-color:#f5f5f5;border-color:#999999;border-width:thin;border-style:outset;}*/