.gazo1 {margin:0 0 0 380px;} /* .gazo2 {text-align:center; margin: 0 0 0 0;} */ .gazo3 {text-align:center; margin: 70px 0 0 0 ;} /*フォーム全体*/ .form1{ position:relative;/*フォームの相対位置*/ Max-width:270px;/*フォームのサイズ*/ margin-bottom:15px;/*フォームの下に余白*/ } /*検索ボックス*/ .sbox{ display: inline-block; /* なくても大丈夫だけど、念の為 */ position: absolute;/* 基準値とする */ left: 660px; top:0; outline:0;/*クリック時の青い枠線消す*/ height:50px;/*検索ボックスの高さ*/ width: 200px; padding:0 10px;/*テキスト位置調整*/ border-radius:2px 0 0 2px;/*検索ボックスの角を丸める*/ background:#eee;/*検索ボックスの背景カラー*/ } .sbox::before { content: ""; /* 疑似要素に必須 */ width: 100px; /* アイコンの横幅 */ height: 16px; /* アイコンの高さ */ background: url(kensaku.png) no-repeat center center / auto 100%; /* 背景にアイコン画像を配置 */ display: inline-block; /* 高さを持たせるためにインラインブロック要素にする */ position: absolute; /* 相対位置に指定 */ top: 40px; /* アイコンの位置。微調整してね */ left: 50px; /* アイコンの位置。微調整してね */ } .sbox input { padding: 3px 0 3px 2em; /* アイコンを設置するため左の余白を多めに指定*/ } /*検索ボタン*/ .sbtn{ width:70px;/*検索ボタンの横幅*/ height:54px;/*検索ボタンの縦幅*/ position:absolute;/*検索ボタンの絶対位置*/ left:885px;/*検索ボタンの位置調整*/ top:0; border-radius:0 2px 2px 0;/*検索ボタンの角を丸める*/ background:#7fbfff;/*検索ボタンの背景カラー*/ border:none;/*検索ボタンの枠線を消す*/ color:#fff;/*検索ボタンのテキストカラー*/ font-weight:bold;/*検索ボタンのテキスト太字*/ font-size:16px;/*検索ボタンのフォントサイズ*/ } /*検索ボタンマウスオーバー時*/ .sbtn:hover{ color:#666;/*検索ボタンマウスオーバー時のフォントカラー*/ } /*リセットボタン*/ .rt{ width:70px;/*検索ボタンの横幅*/ height:54px;/*検索ボタンの縦幅*/ position:absolute;/*検索ボタンの絶対位置*/ left:956px;/*検索ボタンの位置調整*/ top:0; border-radius:0 2px 2px 0;/*検索ボタンの角を丸める*/ background:#9ACD32;/*検索ボタンの背景カラー*/ border:none;/*検索ボタンの枠線を消す*/ color:#fff;/*検索ボタンのテキストカラー*/ font-weight:bold;/*検索ボタンのテキスト太字*/ font-size:16px;/*検索ボタンのフォントサイズ*/ } /*リセットボタンマウスオーバー時*/ .rt:hover{ color:#666;/*検索ボタンマウスオーバー時のフォントカラー*/ }