SPIRAL ver.1をご利用の皆さん、「一覧表をもっと見やすくできたら…」と思ったことはありませんか？
今回は、そんなお悩みを解消するために、一覧表を手軽にリッチ化し、スマホでも見やすくデザイン性のある画面を作成する方法をご紹介します。
一覧表のテンプレートを登録
「Web」＞「フォームデザイン管理」をクリック
マルチデバイス用で雛形を作成
デザイン切り替えは初期値のまま、「この設定で雛形を作成する」を設定
デザイン雛形の新規作成
<!DOCTYPE html>
<html id="SMP_STYLE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>〇〇〇〇〇〇〇</title>
<style type="text/css">
/* reset css 20200628
----------------------------*/
html,
body,
header,
nav,
section,
article,
aside,
footer,
address,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
dl,
dt,
dd,
ol,
ul,
li,
table,
caption,
tbody,
thead,
tfoot,
tr,
th,
td,
form,
iframe,
embed,
object {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
ol,
ul {
list-style-type: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
height: 0;
margin: 0;
padding: 0;
border: 0;
}
/* 枠線と縦並べ時の隙間を消去 */
img {
border: 0;
vertical-align: top;
}
/* 引用符を非表示 */
blockquote,
q {
quotes: none;
}
/* html5要素のIE8以下対策 */
header,
nav,
main,
section,
article,
aside,
footer {
display: block;
}
/* 調整用CSS
----------------------------*/
.mb00 {
margin-bottom: 0px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.mt00 {
margin-top: 0px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt40 {
margin-top: 40px !important;
}
.pt00 {
padding-top: 0px !important;
}
.pd00 {
padding-bottom: 0px !important;
}
.fontb {
font-weight: bold !important;
}
.font12 {
font-size: 12px !important;
}
.font14 {
font-size: 14px !important;
}
.font16 {
font-size: 16px !important;
}
.font18 {
font-size: 18px !important;
}
.font20 {
font-size: 20px !important;
}
.ta_r {
text-align: right !important;
}
.ta_l {
text-align: left !important;
}
.ta_c {
text-align: center !important;
}
.red {
color: #dd0000 !important;
}
.pink {
color: #ff4f8d !important;
}
.orange {
color: #ff9900 !important;
}
.blue {
color: #0066cc !important;
}
.green {
color: #218211 !important;
}
.black {
color: #000000 !important;
}
/* 回り込み解除 */
.cl_r {
clear: right;
}
.cl_l {
clear: left;
}
/* display
----------------------------*/
.pc_none {
display: none;
}
.sp_none {
display: inline-block;
}
@media screen and (max-width:639px) {
.pc_none {
display: inline-block;
}
.sp_none {
display: none;
}
}
/* base blueberry 20200831
----------------------------*/
body {
width: 100%;
background: #f6f6f6;
color: #0a2646;
font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", system-ui, sans-serif;
font-size: 16px;
line-height: 160%;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
word-break: break-all;
}
.mincho {
font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "HG明朝E", "ＭＳ 明朝", serif;
}
a {
text-decoration: underline;
color: #ec8484;
}
a:hover {
text-decoration: none;
color: #ec8484;
}
hr {
border-bottom: 1px dashed #dccda7;
margin: 20px auto 10px auto;
}
/* button
----------------------------*/
.btn_wrapper {
text-align: center;
margin: 30px auto;
}
.btn_wrapper a {
display: inline-block;
width: 90%;
max-width: 300px;
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 4px;
box-sizing: border-box;
color: #fff !important;
font-size: 1.125rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
line-height: 140%;
padding: 15px 10px;
margin: 0px 5px 30px 5px;
cursor: pointer;
}
a.btn_black {
background: #444;
border-bottom: 2px solid #000;
}
a.btn_mint {
background: #4aaead;
border-bottom: 2px solid #257b7a;
}
a.btn_pink {
background: #ec8484;
border-bottom: 2px solid #be5252;
}
.btn_wrapper a:last-child {
margin-bottom: 0px;
}
.btn_wrapper a:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* button_mini_size
----------------------------*/
a.btn_mini {
display: inline-block;
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 4px;
box-sizing: border-box;
color: #fff !important;
font-size: 0.875rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
line-height: 140%;
padding: 7px 15px;
margin: 5px 5px 5px 5px;
cursor: pointer;
}
a.btn_mini:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
text-decoration: none;
}
a.btn_mini2 {
display: inline-block;
background: #c0e2fa;
border: 1px solid #8abfe4;
box-sizing: border-box;
color: #123f77 !important;
font-size: 0.875rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
line-height: 140%;
padding: 5px 10px;
margin: 5px 5px 5px 5px;
cursor: pointer;
}
a.btn_mini2:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
text-decoration: none;
}
/* btn_square
----------------------------*/
.btn_square_wrapper {
text-align: center;
margin-bottom: 30px;
}
.btn_square {
position: relative;
display: inline-block;
width: 45%;
max-width: 400px;
background: #fff;
border: 1px solid #478ac7;
border-radius: 4px;
box-sizing: border-box;
text-align: left;
margin: 10px 10px 20px 10px;
padding: 15px 20px;
vertical-align: top;
}
.btn_square a {
display: block;
color: #2e6ea8;
font-size: 20px;
box-sizing: border-box;
font-weight: bold;
text-decoration: none;
}
.btn_square span {
display: block;
font-size: 12px;
font-weight: normal;
line-height: 140%;
margin-top: 5px;
}
.btn_square::after {
content: "";
position: absolute;
bottom: 10px;
right: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent #57bddc transparent;
}
.no_link {
background: none;
border: none;
}
.no_link::after {
content: none;
}
@media screen and (max-width:639px) {
.btn_square {
width: 95%;
max-width: 400px;
margin: 10px auto 20px auto;
}
}
/* footer
----------------------------*/
footer {
color: #999;
font-size: 12px;
padding: 15px 15px;
}
footer p {
text-align: left;
}
/* other
----------------------------*/
/* 郵便番号検索ボタン */
.searchZipcode {
border: none;
cursor: pointer;
outline: none;
padding: 7px 10px;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
appearance: none;
/* reset end */
width: 90%;
max-width: 150px;
min-height: 43px;
border: hidden;
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 4px;
color: #fff;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
margin: 0px 5px 30px 5px;
cursor: pointer;
}
.searchZipcode:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* change color
----------------------------*/
:root {
--maincolor: #0a2646;
--subcolor: #123f77;
--buttoncolor: #2e6ea8;
--darkcolor: #092444;
--mbbg: #e2e8f0;
--h1bottom: #d5e3ec;
--h1top: #d5e3ec;
--h3bottom: #c2fac0;
--listhover: #e4f4ff;
--listtdbg: #edf3f7;
}
/* formPC blueberry 20200911
----------------------------*/
/* ページ全体
----------------------------*/
/* 確認ページ用の追記 */
.attention_box {
display: block;
width: 100%;
max-width: 1000px;
background: #fff;
border: 2px solid #2d65a8;
box-sizing: border-box;
color: #2d65a8;
font-size: 100%;
font-weight: bold;
text-align: left;
padding: 10px 10px;
margin: 10px auto 0 auto;
}
input::placeholder {
color: #ccc;
}
input::-webkit-input-placeholder {
color: #ccc;
}
input:-ms-input-placeholder {
color: #ccc;
}
/* 見出し ※色変え対象
----------------------------*/
#SMP_STYLE h1 {
background: #0a2646;
color: #fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
line-height: 140%;
text-align: center;
margin: 0;
padding: 15px 10px 15px 10px;
}
#SMP_STYLE h2 {
position: relative;
width: 100%;
border-bottom: 2px solid #c0e2fa;
color: #123f77;
font-size: 20px;
font-weight: bold;
text-align: left;
margin: 30px auto 20px auto;
padding: 0px 5px 10px 5px;
}
#SMP_STYLE h2::after {
position: absolute;
bottom: -2px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 2px;
background-color: #2d65a8;
}
#SMP_STYLE h3 {
position: relative;
width: 100%;
border-left: 7px solid #2d65a8;
color: #123f77;
font-size: 18px;
font-weight: bold;
text-align: left;
margin: 30px auto 10px auto;
padding: 5px 5px 5px 5px;
}
/* 外枠
----------------------------*/
#SMP_STYLE .body_tbl {
width: 100%;
margin: 0 auto;
}
/* 見出し画像 ※変更なし
----------------------------*/
#SMP_STYLE .header_img_smartphone {
display: none;
}
#SMP_STYLE .header_img_tablet {
display: none;
}
#SMP_STYLE .header_img_pc {
display: block;
}
/* 見出しの補足説明
----------------------------*/
#SMP_STYLE .header_text {
width: 90%;
max-width: 1000px;
color: #333333;
font-weight: normal;
text-align: left;
margin: 20px auto 0 auto;
padding: 0;
}
/* 入力時の説明
----------------------------*/
#SMP_STYLE .header_rmesg {
width: 90%;
max-width: 1000px;
color: #333333;
font-weight: normal;
text-align: left;
margin: 20px auto 0 auto;
padding: 0;
}
/* 入力エラー時の説明
----------------------------*/
#SMP_STYLE .header_emesg {
width: 90%;
max-width: 1000px;
background: #fff;
border: 2px solid #dd0000;
color: #dd0000;
font-weight: bold;
text-align: left;
margin: 20px auto 0 auto;
padding: 10px 20px 10px 20px;
}
/* 入力項目
----------------------------*/
#SMP_STYLE .smp_tmpl {
width: 95%;
max-width: 1000px;
text-align: left;
margin: 15px auto 0px auto;
padding: 20px 5px 30px 5px;
}
/* フォーム行
----------------------------*/
#SMP_STYLE dl {
position: relative;
width: 100%;
border-bottom: 1px dotted #ddd;
margin: 0;
padding: 5px 0 5px 0;
}
#SMP_STYLE dl:first-child {
border-top: 1px dotted #ddd;
}
#SMP_STYLE dl.top {
border-top: 1px dotted #ddd;
}
/* ソース編集時に使用 */
#SMP_STYLE dl.last {
border-bottom: 0;
}
/* 項目名
----------------------------*/
#SMP_STYLE dt.title {
display: inline-block;
width: 33%;
color: #123f77;
font-weight: bold;
letter-spacing: 1px;
line-height: 140%;
text-align: left;
margin: 0;
padding: 18px 15px 18px 10px;
vertical-align: top;
}
/* 注意事項
----------------------------*/
#SMP_STYLE dt.title .caution {
display: block;
width: 95%;
color: #336699;
font-size: 87.5%;
font-weight: normal;
line-height: 130%;
text-align: left;
padding: 10px 0 0 0;
}
/* 項目入力部
----------------------------*/
#SMP_STYLE dd.data {
display: inline-block;
width: 67%;
color: #333;
font-weight: bold;
text-align: left;
margin: 0;
padding: 18px 0;
}
/* inputタグ
----------------------------*/
#SMP_STYLE .input {
width: 90%;
border: 1px solid #666;
border-radius: 3px 3px 3px 3px;
box-sizing: border-box;
color: #333;
font-size: 108%;
text-align: left;
margin: 0px 5px 8px 5px;
padding: 10px;
}
/* 入力欄を２つ並べる場合 */
.input_line ul li {
box-sizing: border-box;
width: 45%;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
}
.input_line ul li input {
width: calc(90% - 35px) !important;
}
#SMP_STYLE .input:focus,
#SMP_STYLE select:focus,
#SMP_STYLE textarea:focus {
outline: solid #049c84;
/* 色指定 */
}
/* フィールドごとのデザイン
----------------------------*/
#SMP_STYLE .zipcode li.code01 input {
width: 60px;
}
#SMP_STYLE .zipcode li.code02 input {
width: 70px;
}
#SMP_STYLE .phone li.num01 input {
width: 70px;
}
#SMP_STYLE .phone li.num02 input {
width: 70px;
}
#SMP_STYLE .phone li.num03 input {
width: 70px;
}
#SMP_STYLE .price input {
width: 200px;
}
#SMP_STYLE .num input {
width: 120px;
}
#SMP_STYLE .integer input {
width: 170px;
}
#SMP_STYLE .real input {
width: 170px;
}
#SMP_STYLE .pass input {
width: 180px;
}
#SMP_STYLE .epass input {
width: 160px;
}
#SMP_STYLE .time input {
width: 50px;
}
#SMP_STYLE .time .year {
width: 70px;
}
#SMP_STYLE ul,
#SMP_STYLE li {
list-style-type: none;
margin: 0;
padding: 0;
}
#SMP_STYLE .zipcode ul li,
#SMP_STYLE .phone ul li,
#SMP_STYLE .time ul li {
float: left;
width: auto;
margin: 0 3px 0 0;
padding: 0;
}
#SMP_STYLE .multi1 label {
display: block;
float: left;
min-width: 135px;
text-align: left;
margin: 0 0 7px 0;
padding: 0 10px;
}
#SMP_STYLE .multi1 label input {
display: block;
float: left;
width: 1em;
height: 1em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
border-radius: 0 0 0 0;
margin: 0.2em 0 0 0;
padding: 0;
overflow: hidden;
}
#SMP_STYLE .multi1 label span {
display: block;
font-weight: normal;
margin: 0 0 0 30px;
}
#SMP_STYLE .multi2 li {
display: inline;
float: left;
min-width: 135px;
text-align: left;
margin: 0;
padding: 0 5px 2px 10px;
clear: both;
}
#SMP_STYLE .multi2 label input {
display: block;
float: left;
width: 1em;
height: 1em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
border-radius: 0 0 0 0;
margin: 0.2em 0 0 0;
padding: 0;
overflow: hidden;
}
#SMP_STYLE .multi2 label span {
display: block;
font-weight: normal;
margin: 0 0 0 30px;
}
#SMP_STYLE .multi2 .radio input {
border-radius: 1em;
}
#SMP_STYLE select {
width: 90%;
max-width: 500px;
height: 46px;
font-size: 1rem;
margin-bottom: 8px;
padding-left: 10px;
}
#SMP_STYLE textarea {
width: 90%;
border: 1px solid #666;
border-radius: 3px 3px 3px 3px;
box-sizing: border-box;
color: #333;
font-size: 100%;
text-align: left;
margin: 0px 5px 8px 5px;
padding: 10px;
resize: vertical;
}
#SMP_STYLE .image input {
width: auto;
}
#SMP_STYLE .file input {
width: auto;
}
#SMP_STYLE input.clear {
width: 55px;
text-align: center;
}
/* 送信ボタン
----------------------------*/
#SMP_STYLE input.submit {
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
appearance: none;
/* reset end */
width: 90%;
max-width: 300px;
min-height: 60px;
border: hidden;
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 4px;
color: #fff;
font-size: 1.125rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
margin: 0px 5px 30px 5px;
cursor: pointer;
}
#SMP_STYLE input.submit:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
#SMP_STYLE input.image {
width: auto;
border: none;
margin: 40px 0 40px 0;
padding: 0;
vertical-align: middle;
}
/* 確認ページの戻るボタン */
#SMP_STYLE input[name="SMPFORM_BACK"] {
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
appearance: none;
/* reset end */
width: 98%;
max-width: 300px;
min-height: 60px;
border: hidden;
background: #666;
border-bottom: 3px solid #333;
border-radius: 4px;
color: #fff;
font-size: 1.125rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
margin: 0px 5px 30px 5px;
cursor: pointer;
}
#SMP_STYLE input[name="SMPFORM_BACK"]:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* 例文
----------------------------*/
#SMP_STYLE .sample {
display: inline-block;
color: #666;
font-size: 87.5%;
font-weight: normal;
text-align: left;
line-height: 140%;
margin-top: 5px;
}
/* 接頭語・接尾後
----------------------------*/
#SMP_STYLE .suffix {
height: 40px;
color: #333333;
font-weight: normal;
text-align: left;
line-height: 40px;
}
/* 入力必須文字
----------------------------*/
#SMP_STYLE .need {
display: inline-block;
color: #dd0000;
font-size: 14px;
font-weight: normal;
text-align: left;
}
/* エラーメッセージ
(入力チェック時)
----------------------------*/
#SMP_STYLE .msg {
display: block;
color: #dd0000;
font-size: 14px;
font-weight: bold;
line-height: 140%;
text-align: left;
margin: 0px 5px 5px 5px;
}
/* エラーメッセージ
(サンキュー・締め切り・システムエラー)
----------------------------*/
#SMP_STYLE .sub_text {
width: 95%;
max-width: 1000px;
color: #333333;
font-weight: normal;
text-align: center;
padding: 0px;
margin: 0px auto 40px auto;
}
/* 入力エラー時のボックス背景色
----------------------------*/
#SMP_STYLE .error {
background: #FFE4E4;
}
/* スパイラルシール
----------------------------*/
.spiralSeal_wrapper table {
width: 90% !important;
max-width: 1000px !important;
overflow: hidden !important;
background-color: #FFFFFF !important;
border: 1px solid #CCCCCC !important;
margin: 30px 0 30px 0 !important;
}
.spiralSeal_wrapper tr td:first-child {
display: table-cell;
line-height: 140%;
text-align: left;
padding: 10px !important;
overflow: auto;
}
.spiralSeal_wrapper tr td {
display: table-cell;
text-align: center;
padding: 10px !important;
overflow: auto;
}
/* フッタ
----------------------------*/
#SMP_STYLE .footer_text {
width: 90%;
max-width: 1000px;
color: #333333;
font-weight: normal;
text-align: left;
margin: 30px auto 30px auto;
}
.copyright {
text-align: center;
}
/* clearfix
----------------------------*/
#SMP_STYLE .cf:before,
#SMP_STYLE .cf:after {
content: "";
display: table;
}
#SMP_STYLE .cf:after {
clear: both;
}
#SMP_STYLE .cf {
*zoom: 1;
}
/* 回り込み解除 */
.cl {
clear: both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* clearfixのIE-mac対策 */
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* formSP blueberry 20200831
----------------------------*/
@media screen and (max-width:639px) {
/* 見出し画像 ※変更なし
----------------------------*/
#SMP_STYLE .header_img_smartphone {
display: none;
}
#SMP_STYLE .header_img_tablet {
display: none;
}
#SMP_STYLE .header_img_pc {
display: block;
}
/* 入力エラー時の説明
----------------------------*/
#SMP_STYLE .header_emesg {
padding: 15px 15px;
}
/* フォーム行
----------------------------*/
#SMP_STYLE dl {
width: 100%;
margin: 0 auto 10px auto;
}
/* 項目名
----------------------------*/
#SMP_STYLE dt.title {
display: block;
width: 100%;
padding: 15px 5px 0px 5px;
}
/* 項目入力部
----------------------------*/
#SMP_STYLE dd.data {
display: block;
width: 100%;
margin: 0 0 10px 0;
padding: 18px 5px 10px 5px;
}
/* inputタグ
----------------------------*/
#SMP_STYLE .input {
width: 95%;
}
/* 入力欄を２つ並べる場合 */
.input_line ul li {
width: 48%;
display: inline-block;
font-weight: normal;
vertical-align: top;
}
.input_line ul li input {
width: 95% !important;
}
/* フィールドごとのデザイン
----------------------------*/
#SMP_STYLE .multi1 label {
display: block;
width: 100%;
background: #e2e8f0;
border-radius: 4px 4px 4px 4px;
box-sizing: border-box;
text-align: left;
margin: 0 10px 10px 0;
padding: 10px;
}
#SMP_STYLE .multi1 label input {
width: 20px;
border-radius: 3px 3px 3px 3px;
text-align: left;
}
#SMP_STYLE .multi1 label span {
margin: 0 0 0 25px;
}
#SMP_STYLE .multi2 li {
display: block;
float: none;
padding: 0 5px 2px 0px;
}
#SMP_STYLE .multi2 label {
display: block;
width: 100%;
min-width: 250px;
/* background: #e2e8f0; */
border-radius: 4px 4px 4px 4px;
box-sizing: border-box;
text-align: left;
margin: 0 10px 10px 0;
padding: 10px;
}
#SMP_STYLE .multi2 label input {
width: 20px;
border-radius: 3px 3px 3px 3px;
text-align: left;
}
#SMP_STYLE .multi2 label span {
margin: 0 0 0 25px;
}
#SMP_STYLE select {
width: 95%;
min-width: 0px;
}
#SMP_STYLE textarea {
width: 95%;
}
/* 送信ボタン
----------------------------*/
#SMP_STYLE input.submit {
width: 90%;
margin: 20px auto 40px auto;
}
/* 確認ページの戻るボタン */
#SMP_STYLE input[name="SMPFORM_BACK"] {
width: 90%;
margin: 20px auto 20px auto;
}
/* エラーメッセージ
(入力チェック時)
----------------------------*/
#SMP_STYLE .msg {
font-size: 87.5%;
}
/* エラーメッセージ
(サンキュー・締め切り・システムエラー)
----------------------------*/
#SMP_STYLE .sub_text {
width: 95%;
max-width: 1000px;
font-weight: normal;
text-align: left;
padding: 0px;
margin: 0px auto 40px auto;
}
}
/* myarea blueberry 20200831
----------------------------*/
/* header
----------------------------*/
.header_wrapper {
height: 60px;
background: #0a2646;
}
.header_wrapper h1 {
float: left;
width: 300px;
height: 60px;
color: #fff;
font-size: 20px;
font-weight: normal !important;
text-align: left !important;
line-height: 140% !important;
padding: 15px 0px 10px 15px !important;
}
.header_wrapper h1 a {
color: #fff;
text-decoration: none;
}
.header_wrapper .gnavi_wrapper {
float: right;
width: calc(100% - 300px);
/* システム名の長さを除く */
color: #c0e2fa;
}
.header_wrapper .gnavi_wrapper a {
color: #fff;
text-decoration: none;
}
.gnavi_wrapper .login_user {
position: relative;
float: right;
display: inline-block;
background: #123f77;
box-sizing: border-box;
font-size: 20px;
line-height: 140%;
text-align: left;
}
.gnavi_wrapper .login_user a {
display: table-cell;
height: 60px;
padding: 0px 15px;
vertical-align: middle;
cursor: pointer;
}
.user_menu {
background: #2d65a8;
position: absolute;
box-shadow: 0px 2px 4px gray;
font-size: 14px;
text-align: left !important;
top: 60px;
right: 0px;
z-index: 10;
}
.user_menu ul li.user_name {
padding: 10px;
}
.user_menu ul li {
max-width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.user_menu ul li a {
display: block;
border-top: 1px solid #123f77;
padding: 10px;
}
.user_menu ul li i {
margin-right: 5px;
}
.gnavi_wrapper ul.gnavi {
float: right;
display: block;
}
.gnavi_wrapper ul.gnavi li {
float: left;
display: inline-block;
background: #123459;
border-left: 1px solid #0a2646;
box-sizing: border-box;
font-size: 16px;
line-height: 140%;
}
.gnavi_wrapper ul.gnavi li a {
display: table-cell;
height: 60px;
padding: 0px 15px;
vertical-align: middle;
cursor: pointer;
}
.gnavi_wrapper ul.gnavi li.home {
font-size: 20px;
}
.gnavi_wrapper .sp_menu {
display: none;
}
@media screen and (min-width:900px) {
.sp_gnavi {
display: none;
}
}
@media screen and (max-width:899px) {
.header_wrapper h1 {
width: calc(100% - 48px);
}
.header_wrapper .gnavi_wrapper {
width: 48px;
}
.user_menu {
display: none;
}
.gnavi_wrapper .login_user {
display: none;
}
.gnavi_wrapper ul.gnavi {
display: none;
}
.gnavi_wrapper .sp_menu {
position: relative;
float: right;
display: inline-block;
background: #123f77;
box-sizing: border-box;
font-size: 20px;
line-height: 140%;
text-align: left;
}
.gnavi_wrapper .sp_menu a {
display: table-cell;
height: 60px;
padding: 0px 15px;
vertical-align: middle;
cursor: pointer;
}
.sp_gnavi {
background: #2d65a8;
position: absolute;
box-shadow: 0px 2px 4px gray;
font-size: 14px;
text-align: left !important;
top: 60px;
right: 0px;
z-index: 10;
}
.sp_gnavi ul li.user_name {
padding: 10px;
}
.sp_gnavi ul li {
max-width: 250px;
line-height: 140%;
}
.sp_gnavi ul li a {
display: block;
border-top: 1px solid #123f77;
padding: 10px;
}
.sp_gnavi ul li i {
margin-right: 5px;
}
}
/* title
----------------------------*/
.cont_wrapper h2 {
position: relative;
width: 100%;
background: #fff;
border-top: 2px solid #d5e3ec;
border-bottom: 1px solid #cfdde6;
color: #092444;
font-size: 24px;
font-weight: normal;
text-align: left;
margin: 0px auto 0px auto;
padding: 15px 10px;
}
.cont_wrapper h2::after {
position: absolute;
top: -2px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 2px;
background-color: #2d65a8;
}
.cont_wrapper h3 {
position: relative;
width: 100%;
border-bottom: 2px solid #c0e2fa;
color: #123f77;
font-size: 20px;
font-weight: bold;
text-align: left;
margin: 30px auto 20px auto;
padding: 0px 5px 10px 5px;
}
.cont_wrapper h3::after {
position: absolute;
bottom: -2px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 2px;
background-color: #2d65a8;
}
.cont_wrapper h4 {
width: 100%;
border-left: 5px solid #c0e2fa;
color: #123f77;
font-size: 18px;
font-weight: bold;
text-align: left;
margin: 30px auto 10px auto;
padding: 5px 5px 5px 5px;
}
/* layout
----------------------------*/
.cont_wrapper {
width: 98%;
margin: 0px auto 0px auto;
padding: 30px 0px;
}
.cont_box {
background: #fff;
padding: 20px 30px 40px 30px;
text-align: left;
}
@media screen and (max-width:639px) {
.cont_box {
padding: 15px 10px 30px 10px;
}
}
/* content
----------------------------*/
main {
padding: 0px 0px 30px 0px;
}
/* list+card blueberry 20210723
----------------------------*/
.list_wrapper {
display: block;
width: inherit;
margin: 0px auto;
}
/*.list_wrapper tbody:first-of-type {
display: block;
width: inherit;
}*/
.list_wrapper tr.list_wrapper_tr {
display: block;
width: inherit;
}
.list_wrapper td.smp_tmpl {
display: block;
width: inherit;
}
/* 一覧検索フォーム
-------------------------*/
.smp-search-form {
margin-top: 20px;
}
table.smp-search-form-table {
width: 100%;
margin: 0px auto 0px auto;
/* センタリング */
}
/* 基本設定 */
table.smp-search-form-table tr {
width: 100% !important;
}
table.smp-search-form-table td {
background: none !important;
/* 背景を透過 */
border: 0px !important;
/* 罫線を一旦消す */
box-sizing: border-box;
font-size: 0.875rem !important;
padding: 7px 10px !important;
}
/* 項目タイトルtdの基本設定 */
table.smp-search-form-table td.smp-sf-head {
width: 20%;
background: #f4f4f4 !important;
border-left: 1px solid #cfdde6 !important;
border-right: 1px solid #cfdde6 !important;
border-bottom: 1px solid #cfdde6 !important;
color: #123f77 !important;
font-weight: bold !important;
line-height: 140%;
text-align: left;
}
/* 入力欄tdの基本設定 */
table.smp-search-form-table td.smp-sf-body {
background: #fff !important;
border-right: 1px solid #cfdde6 !important;
border-bottom: 1px solid #cfdde6 !important;
line-height: 140%;
padding-right: 20px !important;
}
table.smp-search-form-table td.smp-sf-body .notice {
font-size: 12px !important;
}
/* １行目のtd上部に線を出す */
table.smp-search-form-table tr.smp-sf-row:first-child td {
border-top: 1px solid #cfdde6 !important;
}
/* inputを入力しやすくする */
table.smp-search-form-table td.smp-sf-body input {
font-size: 0.875rem;
box-sizing: border-box;
/* tdをはみ出ない用にする */
border: 1px solid #cfdde6 !important;
/* 線の色 */
border-radius: 3px 3px 3px 3px;
padding: 5px;
/*入力欄を大きく */
margin: 5px;
}
/* チェックボックスを見やすくする */
table.smp-search-form-table td.smp-sf-body label {
display: inline-block;
margin-right: 13px;
}
/* 検索ボタンを大きくする */
table.smp-search-form-table input[type="submit"] {
appearance: none;
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
/* reset */
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
font-size: 1rem;
font-weight: bold;
letter-spacing: 1px;
margin: 10px auto !important;
padding: 8px 40px;
}
table.smp-search-form-table input[type="submit"]:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* 一覧表
-------------------------*/
table.smp-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
margin: 0px auto;
}
/* ソート行の基本設定 */
table.smp-table tr.smp-row-sort {
border-top: 1px solid #cfdde6;
border-bottom: 1px solid #cfdde6;
}
table.smp-table td.smp-cell-sort {
background: #fff !important;
border: solid #cfdde6 !important;
border-width: 0px 0px 1px 0px !important;
box-sizing: border-box;
color: #2e6ea8 !important;
font-size: 0.875rem !important;
line-height: 140% !important;
/* text-align: left; */
/* 必要に応じて使用 */
padding: 20px 10px 15px 10px !important;
}
/* ソート行のリンクデザイン */
table.smp-table td.smp-cell-sort a {
color: #2e6ea8;
font-weight: bold !important;
text-decoration: underline;
}
table.smp-table td.smp-cell-sort a:hover {
color: #2e6ea8;
font-weight: normal !important;
text-decoration: none;
}
/* データ行の基本設定 */
table.smp-table td.smp-cell-data {
background: none !important;
/* trの色を透過 */
border: solid #cfdde6 !important;
/* 線の色 */
border-width: 0px 0px 1px 0px !important;
/* 下線のみ引く */
color: #0a2646 !important;
font-size: 0.875rem !important;
line-height: 140%;
/* データの行間を詰める */
padding: 15px 10px !important;
/* データの上下左右の隙間を広く */
}
table.smp-table td.smp-cell-data a {
color: #e76060;
text-decoration: underline;
}
table.smp-table td.smp-cell-data a:hover {
color: #e76060;
text-decoration: none;
}
table.smp-table tr.smp-row-sort td.smp-cell:last-child,
table.smp-table tr.smp-row-data td.smp-cell:last-child {
border: 0px;
padding: 0px;
}
/* 奇数行目と偶数行目で背景色を変更 */
table.smp-table tr.smp-row-data:nth-child(odd) {
background: #f4f4f4 !important;
/* 奇数番目 */
}
table.smp-table tr.smp-row-data:nth-child(even) {
background: #fff !important;
/* 偶数番目 */
}
/* 変更選択時の色 */
table.smp-table tr.smp-be-operate td.smp-cell-data {
background: #def5ed !important;
}
table.smp-table tr.smp-row-data:hover {
background: #e4f4ff !important;
}
/* 表以外の基本設定 */
table.smp-table tr.smp-row-normal td {
border: 0px !important;
/* 不要な罫線の削除 */
font-size: 0.875rem !important;
}
/* 一覧表の付属ボタン */
table.smp-table input[name="smp-table-submit-button"],
table.smp-table .smp-table-button {
appearance: none;
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
/* reset */
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
margin: 5px auto 5px 10px !important;
padding: 5px 15px 5px 15px;
}
table.smp-table input[name="smp-table-submit-button"]:hover,
table.smp-table .smp-table-button:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* 件数セレクトの調整 */
table.smp-table tr.smp-row-normal select {
width: auto !important;
height: 30px !important;
box-sizing: border-box;
margin: 5px 0px 5px 0px !important;
padding: 0px 5px 0px 0px !important;
}
/* 編集列テキストフィールドの調整 */
table.smp-table td.smp-cell-data input[type=text] {
width: 100% !important;
box-sizing: border-box;
padding: 5px !important;
}
/* 編集列テキストエリアの調整 */
table.smp-table td.smp-cell-data textarea {
width: 100% !important;
min-height: 80px;
box-sizing: border-box;
padding: 5px !important;
}
/* 編集列セレクトの調整 */
table.smp-table td.smp-cell-data select {
width: 100% !important;
height: 30px !important;
box-sizing: border-box;
padding: 0px 5px 0px 0px !important;
}
/* 一覧表ページャー
-------------------------*/
table.smp-table tr.smp-row-normal table.smp-pager {
float: right;
border-collapse: separate;
border-spacing: 5px 10px !important;
/* 左右・上下の順の指定 */
margin: 0px !important;
}
/* ページャー基本設定 */
table.smp-table tr.smp-row-normal table.smp-pager {
/* 除外 td.smp-page */
font-size: 16px;
line-height: 1;
text-align: center;
}
/* リンクエリア拡張 */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a {
display: block;
background: #2e6ea8 !important;
border: 1px solid #2e6ea8 !important;
color: #fff !important;
text-decoration: none;
padding: 5px 10px 7px 10px;
}
/* 現在のページ */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-current-page {
background: #0a2646 !important;
border: 1px solid #0a2646 !important;
color: #fff !important;
padding: 5px 10px 7px 10px;
}
/* 省略記号 */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page-space {
border: 0px !important;
color: #0a2646 !important;
}
/* 表のtdをスマホ用に段組み */
@media only screen and (max-width: 639px) {
colgroup {
display: none !important;
}
table.smp-table td.smp-cell-sort {
display: none !important;
}
/* データ行をレスポンシブに */
table.smp-table td {
width: 100% !important;
display: block !important;
}
/* ページャーのtableへの影響を元に戻す */
table.smp-table tr.smp-row-normal table.smp-pager td {
display: table-cell !important;
width: auto !important;
}
/* データ行の文字揃えを左寄りにして、罫線を消す */
table.smp-table td.smp-cell-data {
border-top: 0px !important;
border-bottom: 0px !important;
font-size: 1rem !important;
text-align: left !important;
padding: 5px 10px !important;
}
table.smp-table td.smp-cell-data:first-child {
border-top: 2px solid #cfdde6 !important;
padding-top: 15px !important;
}
table.smp-table td.smp-cell-data:last-child {
padding-bottom: 15px !important;
border-bottom: 2px solid #cfdde6 !important;
}
}
/* 単票
-------------------------*/
.card_wrapper {
display: block;
width: inherit;
}
table.smp-card-list {
width: 73%;
border-collapse: collapse;
border: solid #cfdde6;
/* 線の色 */
border-width: 1px 1px 1px 1px;
/* 下線のみ引く */
margin: 10px auto 20px auto !important;
}
/* ソート行の基本設定 */
table.smp-card-list tr {
border: solid #cfdde6;
/* 線の色 */
border-width: 0px 0px 1px 0px;
/* 下線のみ引く */
}
table.smp-card-list th {
max-width: 30%;
background: #edf3f7;
border: solid #cfdde6;
/* 線の色 */
border-width: 0px 1px 1px 0px;
/* 下線のみ引く */
color: #123f77;
font-size: 1rem;
font-weight: bold;
line-height: 140%;
/* データの行間を詰める */
text-align: left;
/* テキスト左揃え */
padding: 10px 15px;
/* データの上下左右の隙間を広く */
}
table.smp-card-list td {
background: #fff;
border: solid #cfdde6;
/* 線の色 */
border-width: 0px 1px 0px 0px;
/* 下線のみ引く */
font-size: 15px;
line-height: 140%;
/* データの行間を詰める */
text-align: left;
/* テキスト左揃え */
padding: 10px 15px;
/* データの上下左右の隙間を広く */
}
table.smp-card-list th.bg_green {
background: #d8f3e4 !important;
color: #185841 !important;
}
table.smp-card-list th.bg_blue {
background: #7eb4d3 !important;
color: #333 !important;
}
table.smp-card-list th.bg_pink {
background: #ffece7 !important;
color: #d72e2e !important;
}
@media only screen and (max-width: 639px) {
table.smp-card-list th,
table.smp-card-list td {
padding: 10px 7px 10px 10px !important;
}
/* 一覧項目タイトルのデザイン */
/* list+card blueberry 20230421-----*/
.subtitle {
font-size: 70%;
margin: 5px 0px !important;
padding: 0px 8px;
color: #FFF;
background-color: #2e6ea8;
border-radius: 4px;
width: fit-content;
display: block;
}
table.smp-card-list {
width: 100%;
border-collapse: collapse;
border: solid #cfdde6;
/* 線の色 */
border-width: 1px 0px 0px 1px;
/* 下線のみ引く */
margin: 10px auto 10px auto;
}
}
</style>
</head>
<body class="body">
<center>
<!-- 編集不可 start -->
<div class="body_tbl">
<h1>〇〇〇〇〇〇〇</h1>
<table class="smp_tmpl">
<!-- SMP_TEMPLATE_FORM start -->
<!-- フォームを挿入します。-->
<!-- SMP_TEMPLATE_FORM end -->
</table>
<!-- 編集不可 end -->
<!-- 編集不可 start -->
</div>
<!-- 編集不可 end -->
</center>
<script>
const tables = document.querySelectorAll('table.smp-table');
const itemsArray = [];
let start_row_data = [];
let end_row_data = [];
const items_spanArray = [];
const selectorsArray = [];
for (let i = 0; i < tables.length; i++) {
const row_sort = tables[i].querySelector('tr.smp-row-sort');
const items = [];
let items_span = [];
const selectors = [];
const cols = row_sort.querySelectorAll('.smp-row-sort td');
start_row_data[i] = -1;
end_row_data[i] = -1;
let rows = tables[i].querySelectorAll('tr');
let rows_data = tables[i].querySelectorAll('tr.smp-row-data');
if (rows_data.length !== 0) {
start_row_data[i] = rows_data[0].rowIndex + 1;
end_row_data[i] = rows_data[rows_data.length - 1].rowIndex + 1;
}
for (let j = 0; j < cols.length; j++) {
let item = "";
item = cols[j].textContent.trim().replace(/[▲▼]/g, '');
if (item !== "" || item !== undefined) {items.push(item);}
selectors.push("-" + (j + 1));
}
itemsArray.push(items);
items_span = items.map((item) => {
let tag = document.createElement("span");
tag.classList.add("subtitle");
tag.textContent = item;
return tag;
});
items_spanArray.push(items_span);
selectorsArray.push(selectors);
}
function sp_add_item() {
let w = window.innerWidth;
let x = 639;
document.querySelectorAll('.subtitle').forEach(function (elem) {
elem.remove();
});
if (w <= x) {
for (let i = 0; i < tables.length; i++) {
for (let j = start_row_data[i]; j <= end_row_data[i]; j++) {
for (let k = 0; k <= selectorsArray[i].length; k++) {
let selector = ".smp-cell-" + j + selectorsArray[i][k];
const target = tables[i].querySelector(selector);
if (target !== null) {
target.prepend(items_spanArray[i][k].cloneNode(true));
}
selector = [];
}
}
}
}
}
window.addEventListener('load', sp_add_item);
window.addEventListener('resize', sp_add_item);
</script>
</body>
</html>
一覧表の反映手順
「Web」＞「一覧表・単票」をクリック
対象の一覧の「設定」をクリック
設定にて、最後の列を削除し、「保存」をクリック
対象の一覧の「ページ編集」をクリック
「フォームのデザイン雛形表示」をクリックし、『blueberry一覧表テンプレート』を選択
「〇〇〇〇〇〇〇」になっている箇所にタイトル名を設定
※ windowsなら control+Fキー、macならcommand+Fキーで〇〇〇〇〇〇〇で検索かけるとヒットします。
「プレビュー」で表示を確認
問題なければ、「保存」をクリックして完了
単票のテンプレートを登録
「Web」＞「フォームデザイン管理」をクリック
マルチデバイス用で雛形を作成
デザイン切り替えは初期値のまま、「この設定で雛形を作成する」を設定
デザイン雛形の新規作成
<!DOCTYPE html>
<html id="SMP_STYLE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>〇〇〇〇〇〇〇</title>
<style type="text/css">
<!--
< !-- SMP_TEMPLATE_CSS start
/* reset css 20200628
----------------------------*/
html,
body,
header,
nav,
section,
article,
aside,
footer,
address,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
dl,
dt,
dd,
ol,
ul,
li,
table,
caption,
tbody,
thead,
tfoot,
tr,
th,
td,
form,
iframe,
embed,
object {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
ol,
ul {
list-style-type: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
height: 0;
margin: 0;
padding: 0;
border: 0;
}
/* 枠線と縦並べ時の隙間を消去 */
img {
border: 0;
vertical-align: top;
}
/* 引用符を非表示 */
blockquote,
q {
quotes: none;
}
/* html5要素のIE8以下対策 */
header,
nav,
main,
section,
article,
aside,
footer {
display: block;
}
/* 調整用CSS
----------------------------*/
.mb00 {
margin-bottom: 0px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.mt00 {
margin-top: 0px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt40 {
margin-top: 40px !important;
}
.pt00 {
padding-top: 0px !important;
}
.pd00 {
padding-bottom: 0px !important;
}
.fontb {
font-weight: bold !important;
}
.font12 {
font-size: 12px !important;
}
.font14 {
font-size: 14px !important;
}
.font16 {
font-size: 16px !important;
}
.font18 {
font-size: 18px !important;
}
.font20 {
font-size: 20px !important;
}
.ta_r {
text-align: right !important;
}
.ta_l {
text-align: left !important;
}
.ta_c {
text-align: center !important;
}
.red {
color: #dd0000 !important;
}
.pink {
color: #ff4f8d !important;
}
.orange {
color: #ff9900 !important;
}
.blue {
color: #0066cc !important;
}
.green {
color: #218211 !important;
}
.black {
color: #000000 !important;
}
/* 回り込み解除 */
.cl_r {
clear: right;
}
.cl_l {
clear: left;
}
/* display
----------------------------*/
.pc_none {
display: none;
}
.sp_none {
display: inline-block;
}
@media screen and (max-width:639px) {
.pc_none {
display: inline-block;
}
.sp_none {
display: none;
}
}
/* base blueberry 20200831
----------------------------*/
body {
width: 100%;
background: #f6f6f6;
color: #0a2646;
font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", system-ui, sans-serif;
font-size: 16px;
line-height: 160%;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
word-break: break-all;
}
.mincho {
font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "HG明朝E", "ＭＳ 明朝", serif;
}
a {
text-decoration: underline;
color: #ec8484;
}
a:hover {
text-decoration: none;
color: #ec8484;
}
hr {
border-bottom: 1px dashed #dccda7;
margin: 20px auto 10px auto;
}
/* button
----------------------------*/
.btn_wrapper {
text-align: center;
margin: 30px auto;
}
.btn_wrapper a {
display: inline-block;
width: 90%;
max-width: 300px;
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 4px;
box-sizing: border-box;
color: #fff !important;
font-size: 1.125rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
line-height: 140%;
padding: 15px 10px;
margin: 0px 5px 30px 5px;
cursor: pointer;
}
a.btn_black {
background: #444;
border-bottom: 2px solid #000;
}
a.btn_mint {
background: #4aaead;
border-bottom: 2px solid #257b7a;
}
a.btn_pink {
background: #ec8484;
border-bottom: 2px solid #be5252;
}
.btn_wrapper a:last-child {
margin-bottom: 0px;
}
.btn_wrapper a:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* button_mini_size
----------------------------*/
a.btn_mini {
display: inline-block;
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 4px;
box-sizing: border-box;
color: #fff !important;
font-size: 0.875rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
line-height: 140%;
padding: 7px 15px;
margin: 5px 5px 5px 5px;
cursor: pointer;
}
a.btn_mini:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
text-decoration: none;
}
a.btn_mini2 {
display: inline-block;
background: #c0e2fa;
border: 1px solid #8abfe4;
box-sizing: border-box;
color: #123f77 !important;
font-size: 0.875rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
line-height: 140%;
padding: 5px 10px;
margin: 5px 5px 5px 5px;
cursor: pointer;
}
a.btn_mini2:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
text-decoration: none;
}
/* btn_square
----------------------------*/
.btn_square_wrapper {
text-align: center;
margin-bottom: 30px;
}
.btn_square {
position: relative;
display: inline-block;
width: 45%;
max-width: 400px;
background: #fff;
border: 1px solid #478ac7;
border-radius: 4px;
box-sizing: border-box;
text-align: left;
margin: 10px 10px 20px 10px;
padding: 15px 20px;
vertical-align: top;
}
.btn_square a {
display: block;
color: #2e6ea8;
font-size: 20px;
box-sizing: border-box;
font-weight: bold;
text-decoration: none;
}
.btn_square span {
display: block;
font-size: 12px;
font-weight: normal;
line-height: 140%;
margin-top: 5px;
}
.btn_square::after {
content: "";
position: absolute;
bottom: 10px;
right: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent #57bddc transparent;
}
.no_link {
background: none;
border: none;
}
.no_link::after {
content: none;
}
@media screen and (max-width:639px) {
.btn_square {
width: 95%;
max-width: 400px;
margin: 10px auto 20px auto;
}
}
/* footer
----------------------------*/
footer {
color: #999;
font-size: 12px;
padding: 15px 15px;
}
footer p {
text-align: left;
}
/* other
----------------------------*/
/* 郵便番号検索ボタン */
.searchZipcode {
border: none;
cursor: pointer;
outline: none;
padding: 7px 10px;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
appearance: none;
/* reset end */
width: 90%;
max-width: 150px;
min-height: 43px;
border: hidden;
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 4px;
color: #fff;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
margin: 0px 5px 30px 5px;
cursor: pointer;
}
.searchZipcode:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* change color
----------------------------*/
:root {
--maincolor: #0a2646;
--subcolor: #123f77;
--buttoncolor: #2e6ea8;
--darkcolor: #092444;
--mbbg: #e2e8f0;
--h1bottom: #d5e3ec;
--h1top: #d5e3ec;
--h3bottom: #c2fac0;
--listhover: #e4f4ff;
--listtdbg: #edf3f7;
}
/* formPC blueberry 20200911
----------------------------*/
/* ページ全体
----------------------------*/
/* 確認ページ用の追記 */
.attention_box {
display: block;
width: 100%;
max-width: 1000px;
background: #fff;
border: 2px solid #2d65a8;
box-sizing: border-box;
color: #2d65a8;
font-size: 100%;
font-weight: bold;
text-align: left;
padding: 10px 10px;
margin: 10px auto 0 auto;
}
input::placeholder {
color: #ccc;
}
input::-webkit-input-placeholder {
color: #ccc;
}
input:-ms-input-placeholder {
color: #ccc;
}
/* 見出し ※色変え対象
----------------------------*/
#SMP_STYLE h1 {
background: #0a2646;
color: #fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
line-height: 140%;
text-align: center;
margin: 0;
padding: 15px 10px 15px 10px;
}
#SMP_STYLE h2 {
position: relative;
width: 100%;
border-bottom: 2px solid #c0e2fa;
color: #123f77;
font-size: 20px;
font-weight: bold;
text-align: left;
margin: 30px auto 20px auto;
padding: 0px 5px 10px 5px;
}
#SMP_STYLE h2::after {
position: absolute;
bottom: -2px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 2px;
background-color: #2d65a8;
}
#SMP_STYLE h3 {
position: relative;
width: 100%;
border-left: 7px solid #2d65a8;
color: #123f77;
font-size: 18px;
font-weight: bold;
text-align: left;
margin: 30px auto 10px auto;
padding: 5px 5px 5px 5px;
}
/* 外枠
----------------------------*/
#SMP_STYLE .body_tbl {
width: 100%;
margin: 0 auto;
}
/* 見出し画像 ※変更なし
----------------------------*/
#SMP_STYLE .header_img_smartphone {
display: none;
}
#SMP_STYLE .header_img_tablet {
display: none;
}
#SMP_STYLE .header_img_pc {
display: block;
}
/* 見出しの補足説明
----------------------------*/
#SMP_STYLE .header_text {
width: 90%;
max-width: 1000px;
color: #333333;
font-weight: normal;
text-align: left;
margin: 20px auto 0 auto;
padding: 0;
}
/* 入力時の説明
----------------------------*/
#SMP_STYLE .header_rmesg {
width: 90%;
max-width: 1000px;
color: #333333;
font-weight: normal;
text-align: left;
margin: 20px auto 0 auto;
padding: 0;
}
/* 入力エラー時の説明
----------------------------*/
#SMP_STYLE .header_emesg {
width: 90%;
max-width: 1000px;
background: #fff;
border: 2px solid #dd0000;
color: #dd0000;
font-weight: bold;
text-align: left;
margin: 20px auto 0 auto;
padding: 10px 20px 10px 20px;
}
/* 入力項目
----------------------------*/
#SMP_STYLE .smp_tmpl {
width: 95%;
max-width: 1000px;
text-align: left;
margin: 15px auto 0px auto;
padding: 20px 5px 30px 5px;
}
/* フォーム行
----------------------------*/
#SMP_STYLE dl {
position: relative;
width: 100%;
border-bottom: 1px dotted #ddd;
margin: 0;
padding: 5px 0 5px 0;
}
#SMP_STYLE dl:first-child {
border-top: 1px dotted #ddd;
}
#SMP_STYLE dl.top {
border-top: 1px dotted #ddd;
}
/* ソース編集時に使用 */
#SMP_STYLE dl.last {
border-bottom: 0;
}
/* 項目名
----------------------------*/
#SMP_STYLE dt.title {
display: inline-block;
width: 33%;
color: #123f77;
font-weight: bold;
letter-spacing: 1px;
line-height: 140%;
text-align: left;
margin: 0;
padding: 18px 15px 18px 10px;
vertical-align: top;
}
/* 注意事項
----------------------------*/
#SMP_STYLE dt.title .caution {
display: block;
width: 95%;
color: #336699;
font-size: 87.5%;
font-weight: normal;
line-height: 130%;
text-align: left;
padding: 10px 0 0 0;
}
/* 項目入力部
----------------------------*/
#SMP_STYLE dd.data {
display: inline-block;
width: 67%;
color: #333;
font-weight: bold;
text-align: left;
margin: 0;
padding: 18px 0;
}
/* inputタグ
----------------------------*/
#SMP_STYLE .input {
width: 90%;
border: 1px solid #666;
border-radius: 3px 3px 3px 3px;
box-sizing: border-box;
color: #333;
font-size: 108%;
text-align: left;
margin: 0px 5px 8px 5px;
padding: 10px;
}
/* 入力欄を２つ並べる場合 */
.input_line ul li {
box-sizing: border-box;
width: 45%;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
}
.input_line ul li input {
width: calc(90% - 35px) !important;
}
#SMP_STYLE .input:focus,
#SMP_STYLE select:focus,
#SMP_STYLE textarea:focus {
outline: solid #049c84;
/* 色指定 */
}
/* フィールドごとのデザイン
----------------------------*/
#SMP_STYLE .zipcode li.code01 input {
width: 60px;
}
#SMP_STYLE .zipcode li.code02 input {
width: 70px;
}
#SMP_STYLE .phone li.num01 input {
width: 70px;
}
#SMP_STYLE .phone li.num02 input {
width: 70px;
}
#SMP_STYLE .phone li.num03 input {
width: 70px;
}
#SMP_STYLE .price input {
width: 200px;
}
#SMP_STYLE .num input {
width: 120px;
}
#SMP_STYLE .integer input {
width: 170px;
}
#SMP_STYLE .real input {
width: 170px;
}
#SMP_STYLE .pass input {
width: 180px;
}
#SMP_STYLE .epass input {
width: 160px;
}
#SMP_STYLE .time input {
width: 50px;
}
#SMP_STYLE .time .year {
width: 70px;
}
#SMP_STYLE ul,
#SMP_STYLE li {
list-style-type: none;
margin: 0;
padding: 0;
}
#SMP_STYLE .zipcode ul li,
#SMP_STYLE .phone ul li,
#SMP_STYLE .time ul li {
float: left;
width: auto;
margin: 0 3px 0 0;
padding: 0;
}
#SMP_STYLE .multi1 label {
display: block;
float: left;
min-width: 135px;
text-align: left;
margin: 0 0 7px 0;
padding: 0 10px;
}
#SMP_STYLE .multi1 label input {
display: block;
float: left;
width: 1em;
height: 1em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
border-radius: 0 0 0 0;
margin: 0.2em 0 0 0;
padding: 0;
overflow: hidden;
}
#SMP_STYLE .multi1 label span {
display: block;
font-weight: normal;
margin: 0 0 0 30px;
}
#SMP_STYLE .multi2 li {
display: inline;
float: left;
min-width: 135px;
text-align: left;
margin: 0;
padding: 0 5px 2px 10px;
clear: both;
}
#SMP_STYLE .multi2 label input {
display: block;
float: left;
width: 1em;
height: 1em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
border-radius: 0 0 0 0;
margin: 0.2em 0 0 0;
padding: 0;
overflow: hidden;
}
#SMP_STYLE .multi2 label span {
display: block;
font-weight: normal;
margin: 0 0 0 30px;
}
#SMP_STYLE .multi2 .radio input {
border-radius: 1em;
}
#SMP_STYLE select {
width: 90%;
max-width: 500px;
height: 46px;
font-size: 1rem;
margin-bottom: 8px;
padding-left: 10px;
}
#SMP_STYLE textarea {
width: 90%;
border: 1px solid #666;
border-radius: 3px 3px 3px 3px;
box-sizing: border-box;
color: #333;
font-size: 100%;
text-align: left;
margin: 0px 5px 8px 5px;
padding: 10px;
resize: vertical;
}
#SMP_STYLE .image input {
width: auto;
}
#SMP_STYLE .file input {
width: auto;
}
#SMP_STYLE input.clear {
width: 55px;
text-align: center;
}
/* 送信ボタン
----------------------------*/
#SMP_STYLE input.submit {
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
appearance: none;
/* reset end */
width: 90%;
max-width: 300px;
min-height: 60px;
border: hidden;
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 4px;
color: #fff;
font-size: 1.125rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
margin: 0px 5px 30px 5px;
cursor: pointer;
}
#SMP_STYLE input.submit:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
#SMP_STYLE input.image {
width: auto;
border: none;
margin: 40px 0 40px 0;
padding: 0;
vertical-align: middle;
}
/* 確認ページの戻るボタン */
#SMP_STYLE input[name="SMPFORM_BACK"] {
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
appearance: none;
/* reset end */
width: 98%;
max-width: 300px;
min-height: 60px;
border: hidden;
background: #666;
border-bottom: 3px solid #333;
border-radius: 4px;
color: #fff;
font-size: 1.125rem;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
margin: 0px 5px 30px 5px;
cursor: pointer;
}
#SMP_STYLE input[name="SMPFORM_BACK"]:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* 例文
----------------------------*/
#SMP_STYLE .sample {
display: inline-block;
color: #666;
font-size: 87.5%;
font-weight: normal;
text-align: left;
line-height: 140%;
margin-top: 5px;
}
/* 接頭語・接尾後
----------------------------*/
#SMP_STYLE .suffix {
height: 40px;
color: #333333;
font-weight: normal;
text-align: left;
line-height: 40px;
}
/* 入力必須文字
----------------------------*/
#SMP_STYLE .need {
display: inline-block;
color: #dd0000;
font-size: 14px;
font-weight: normal;
text-align: left;
}
/* エラーメッセージ
(入力チェック時)
----------------------------*/
#SMP_STYLE .msg {
display: block;
color: #dd0000;
font-size: 14px;
font-weight: bold;
line-height: 140%;
text-align: left;
margin: 0px 5px 5px 5px;
}
/* エラーメッセージ
(サンキュー・締め切り・システムエラー)
----------------------------*/
#SMP_STYLE .sub_text {
width: 95%;
max-width: 1000px;
color: #333333;
font-weight: normal;
text-align: center;
padding: 0px;
margin: 0px auto 40px auto;
}
/* 入力エラー時のボックス背景色
----------------------------*/
#SMP_STYLE .error {
background: #FFE4E4;
}
/* スパイラルシール
----------------------------*/
.spiralSeal_wrapper table {
width: 90% !important;
max-width: 1000px !important;
overflow: hidden !important;
background-color: #FFFFFF !important;
border: 1px solid #CCCCCC !important;
margin: 30px 0 30px 0 !important;
}
.spiralSeal_wrapper tr td:first-child {
display: table-cell;
line-height: 140%;
text-align: left;
padding: 10px !important;
overflow: auto;
}
.spiralSeal_wrapper tr td {
display: table-cell;
text-align: center;
padding: 10px !important;
overflow: auto;
}
/* フッタ
----------------------------*/
#SMP_STYLE .footer_text {
width: 90%;
max-width: 1000px;
color: #333333;
font-weight: normal;
text-align: left;
margin: 30px auto 30px auto;
}
.copyright {
text-align: center;
}
/* clearfix
----------------------------*/
#SMP_STYLE .cf:before,
#SMP_STYLE .cf:after {
content: "";
display: table;
}
#SMP_STYLE .cf:after {
clear: both;
}
#SMP_STYLE .cf {
*zoom: 1;
}
/* 回り込み解除 */
.cl {
clear: both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* clearfixのIE-mac対策 */
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* formSP blueberry 20200831
----------------------------*/
@media screen and (max-width:639px) {
/* 見出し画像 ※変更なし
----------------------------*/
#SMP_STYLE .header_img_smartphone {
display: none;
}
#SMP_STYLE .header_img_tablet {
display: none;
}
#SMP_STYLE .header_img_pc {
display: block;
}
/* 入力エラー時の説明
----------------------------*/
#SMP_STYLE .header_emesg {
padding: 15px 15px;
}
/* フォーム行
----------------------------*/
#SMP_STYLE dl {
width: 100%;
margin: 0 auto 10px auto;
}
/* 項目名
----------------------------*/
#SMP_STYLE dt.title {
display: block;
width: 100%;
padding: 15px 5px 0px 5px;
}
/* 項目入力部
----------------------------*/
#SMP_STYLE dd.data {
display: block;
width: 100%;
margin: 0 0 10px 0;
padding: 18px 5px 10px 5px;
}
/* inputタグ
----------------------------*/
#SMP_STYLE .input {
width: 95%;
}
/* 入力欄を２つ並べる場合 */
.input_line ul li {
width: 48%;
display: inline-block;
font-weight: normal;
vertical-align: top;
}
.input_line ul li input {
width: 95% !important;
}
/* フィールドごとのデザイン
----------------------------*/
#SMP_STYLE .multi1 label {
display: block;
width: 100%;
background: #e2e8f0;
border-radius: 4px 4px 4px 4px;
box-sizing: border-box;
text-align: left;
margin: 0 10px 10px 0;
padding: 10px;
}
#SMP_STYLE .multi1 label input {
width: 20px;
border-radius: 3px 3px 3px 3px;
text-align: left;
}
#SMP_STYLE .multi1 label span {
margin: 0 0 0 25px;
}
#SMP_STYLE .multi2 li {
display: block;
float: none;
padding: 0 5px 2px 0px;
}
#SMP_STYLE .multi2 label {
display: block;
width: 100%;
min-width: 250px;
//background: #e2e8f0;
border-radius: 4px 4px 4px 4px;
box-sizing: border-box;
text-align: left;
margin: 0 10px 10px 0;
padding: 10px;
}
#SMP_STYLE .multi2 label input {
width: 20px;
border-radius: 3px 3px 3px 3px;
text-align: left;
}
#SMP_STYLE .multi2 label span {
margin: 0 0 0 25px;
}
#SMP_STYLE select {
width: 95%;
min-width: 0px;
}
#SMP_STYLE textarea {
width: 95%;
}
/* 送信ボタン
----------------------------*/
#SMP_STYLE input.submit {
width: 90%;
margin: 20px auto 40px auto;
}
/* 確認ページの戻るボタン */
#SMP_STYLE input[name="SMPFORM_BACK"] {
width: 90%;
margin: 20px auto 20px auto;
}
/* エラーメッセージ
(入力チェック時)
----------------------------*/
#SMP_STYLE .msg {
font-size: 87.5%;
}
/* エラーメッセージ
(サンキュー・締め切り・システムエラー)
----------------------------*/
#SMP_STYLE .sub_text {
width: 95%;
max-width: 1000px;
font-weight: normal;
text-align: left;
padding: 0px;
margin: 0px auto 40px auto;
}
}
/* myarea blueberry 20200831
----------------------------*/
/* header
----------------------------*/
.header_wrapper {
height: 60px;
background: #0a2646;
}
.header_wrapper h1 {
float: left;
width: 300px;
height: 60px;
color: #fff;
font-size: 20px;
font-weight: normal !important;
text-align: left !important;
line-height: 140% !important;
padding: 15px 0px 10px 15px !important;
}
.header_wrapper h1 a {
color: #fff;
text-decoration: none;
}
.header_wrapper .gnavi_wrapper {
float: right;
width: calc(100% - 300px);
/* システム名の長さを除く */
color: #c0e2fa;
}
.header_wrapper .gnavi_wrapper a {
color: #fff;
text-decoration: none;
}
.gnavi_wrapper .login_user {
position: relative;
float: right;
display: inline-block;
background: #123f77;
box-sizing: border-box;
font-size: 20px;
line-height: 140%;
text-align: left;
}
.gnavi_wrapper .login_user a {
display: table-cell;
height: 60px;
padding: 0px 15px;
vertical-align: middle;
cursor: pointer;
}
.user_menu {
background: #2d65a8;
position: absolute;
box-shadow: 0px 2px 4px gray;
font-size: 14px;
text-align: left !important;
top: 60px;
right: 0px;
z-index: 10;
}
.user_menu ul li.user_name {
padding: 10px;
}
.user_menu ul li {
max-width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.user_menu ul li a {
display: block;
border-top: 1px solid #123f77;
padding: 10px;
}
.user_menu ul li i {
margin-right: 5px;
}
.gnavi_wrapper ul.gnavi {
float: right;
display: block;
}
.gnavi_wrapper ul.gnavi li {
float: left;
display: inline-block;
background: #123459;
border-left: 1px solid #0a2646;
box-sizing: border-box;
font-size: 16px;
line-height: 140%;
}
.gnavi_wrapper ul.gnavi li a {
display: table-cell;
height: 60px;
padding: 0px 15px;
vertical-align: middle;
cursor: pointer;
}
.gnavi_wrapper ul.gnavi li.home {
font-size: 20px;
}
.gnavi_wrapper .sp_menu {
display: none;
}
@media screen and (min-width:900px) {
.sp_gnavi {
display: none;
}
}
@media screen and (max-width:899px) {
.header_wrapper h1 {
width: calc(100% - 48px);
}
.header_wrapper .gnavi_wrapper {
width: 48px;
}
.user_menu {
display: none;
}
.gnavi_wrapper .login_user {
display: none;
}
.gnavi_wrapper ul.gnavi {
display: none;
}
.gnavi_wrapper .sp_menu {
position: relative;
float: right;
display: inline-block;
background: #123f77;
box-sizing: border-box;
font-size: 20px;
line-height: 140%;
text-align: left;
}
.gnavi_wrapper .sp_menu a {
display: table-cell;
height: 60px;
padding: 0px 15px;
vertical-align: middle;
cursor: pointer;
}
.sp_gnavi {
background: #2d65a8;
position: absolute;
box-shadow: 0px 2px 4px gray;
font-size: 14px;
text-align: left !important;
top: 60px;
right: 0px;
z-index: 10;
}
.sp_gnavi ul li.user_name {
padding: 10px;
}
.sp_gnavi ul li {
max-width: 250px;
line-height: 140%;
}
.sp_gnavi ul li a {
display: block;
border-top: 1px solid #123f77;
padding: 10px;
}
.sp_gnavi ul li i {
margin-right: 5px;
}
}
/* title
----------------------------*/
.cont_wrapper h2 {
position: relative;
width: 100%;
background: #fff;
border-top: 2px solid #d5e3ec;
border-bottom: 1px solid #cfdde6;
color: #092444;
font-size: 24px;
font-weight: normal;
text-align: left;
margin: 0px auto 0px auto;
padding: 15px 10px;
}
.cont_wrapper h2::after {
position: absolute;
top: -2px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 2px;
background-color: #2d65a8;
}
.cont_wrapper h3 {
position: relative;
width: 100%;
border-bottom: 2px solid #c0e2fa;
color: #123f77;
font-size: 20px;
font-weight: bold;
text-align: left;
margin: 30px auto 20px auto;
padding: 0px 5px 10px 5px;
}
.cont_wrapper h3::after {
position: absolute;
bottom: -2px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 2px;
background-color: #2d65a8;
}
.cont_wrapper h4 {
width: 100%;
border-left: 5px solid #c0e2fa;
color: #123f77;
font-size: 18px;
font-weight: bold;
text-align: left;
margin: 30px auto 10px auto;
padding: 5px 5px 5px 5px;
}
/* layout
----------------------------*/
.cont_wrapper {
width: 98%;
margin: 0px auto 0px auto;
padding: 30px 0px;
}
.cont_box {
background: #fff;
padding: 20px 30px 40px 30px;
text-align: left;
}
@media screen and (max-width:639px) {
.cont_box {
padding: 15px 10px 30px 10px;
}
}
/* content
----------------------------*/
main {
padding: 0px 0px 30px 0px;
}
/* list+card blueberry 20210723
----------------------------*/
.list_wrapper {
display: block;
width: inherit;
margin: 0px auto;
}
/*.list_wrapper tbody:first-of-type {
display: block;
width: inherit;
}*/
.list_wrapper tr.list_wrapper_tr {
display: block;
width: inherit;
}
.list_wrapper td.smp_tmpl {
display: block;
width: inherit;
}
/* 一覧検索フォーム
-------------------------*/
.smp-search-form {
margin-top: 20px;
}
table.smp-search-form-table {
width: 100%;
margin: 0px auto 0px auto;
/* センタリング */
}
/* 基本設定 */
table.smp-search-form-table tr {
width: 100% !important;
}
table.smp-search-form-table td {
background: none !important;
/* 背景を透過 */
border: 0px !important;
/* 罫線を一旦消す */
box-sizing: border-box;
font-size: 0.875rem !important;
padding: 7px 10px !important;
}
/* 項目タイトルtdの基本設定 */
table.smp-search-form-table td.smp-sf-head {
width: 20%;
background: #f4f4f4 !important;
border-left: 1px solid #cfdde6 !important;
border-right: 1px solid #cfdde6 !important;
border-bottom: 1px solid #cfdde6 !important;
color: #123f77 !important;
font-weight: bold !important;
line-height: 140%;
text-align: left;
}
/* 入力欄tdの基本設定 */
table.smp-search-form-table td.smp-sf-body {
background: #fff !important;
border-right: 1px solid #cfdde6 !important;
border-bottom: 1px solid #cfdde6 !important;
line-height: 140%;
padding-right: 20px !important;
}
table.smp-search-form-table td.smp-sf-body .notice {
font-size: 12px !important;
}
/* １行目のtd上部に線を出す */
table.smp-search-form-table tr.smp-sf-row:first-child td {
border-top: 1px solid #cfdde6 !important;
}
/* inputを入力しやすくする */
table.smp-search-form-table td.smp-sf-body input {
font-size: 0.875rem;
box-sizing: border-box;
/* tdをはみ出ない用にする */
border: 1px solid #cfdde6 !important;
/* 線の色 */
border-radius: 3px 3px 3px 3px;
padding: 5px;
/*入力欄を大きく */
margin: 5px;
}
/* チェックボックスを見やすくする */
table.smp-search-form-table td.smp-sf-body label {
display: inline-block;
margin-right: 13px;
}
/* 検索ボタンを大きくする */
table.smp-search-form-table input[type="submit"] {
appearance: none;
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
/* reset */
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
font-size: 1rem;
font-weight: bold;
letter-spacing: 1px;
margin: 10px auto !important;
padding: 8px 40px;
}
table.smp-search-form-table input[type="submit"]:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* 一覧表
-------------------------*/
table.smp-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
margin: 0px auto;
}
/* ソート行の基本設定 */
table.smp-table tr.smp-row-sort {
border-top: 1px solid #cfdde6;
border-bottom: 1px solid #cfdde6;
}
table.smp-table td.smp-cell-sort {
background: #fff !important;
border: solid #cfdde6 !important;
border-width: 0px 0px 1px 0px !important;
box-sizing: border-box;
color: #2e6ea8 !important;
font-size: 0.875rem !important;
line-height: 140% !important;
/* text-align: left; */
/* 必要に応じて使用 */
padding: 20px 10px 15px 10px !important;
}
/* ソート行のリンクデザイン */
table.smp-table td.smp-cell-sort a {
color: #2e6ea8;
font-weight: bold !important;
text-decoration: underline;
}
table.smp-table td.smp-cell-sort a:hover {
color: #2e6ea8;
font-weight: normal !important;
text-decoration: none;
}
/* データ行の基本設定 */
table.smp-table td.smp-cell-data {
background: none !important;
/* trの色を透過 */
border: solid #cfdde6 !important;
/* 線の色 */
border-width: 0px 0px 1px 0px !important;
/* 下線のみ引く */
color: #0a2646 !important;
font-size: 0.875rem !important;
line-height: 140%;
/* データの行間を詰める */
padding: 15px 10px !important;
/* データの上下左右の隙間を広く */
}
table.smp-table td.smp-cell-data a {
color: #e76060;
text-decoration: underline;
}
table.smp-table td.smp-cell-data a:hover {
color: #e76060;
text-decoration: none;
}
table.smp-table tr.smp-row-sort td.smp-cell:last-child,
table.smp-table tr.smp-row-data td.smp-cell:last-child {
border: 0px;
padding: 0px;
}
/* 奇数行目と偶数行目で背景色を変更 */
table.smp-table tr.smp-row-data:nth-child(odd) {
background: #f4f4f4 !important;
/* 奇数番目 */
}
table.smp-table tr.smp-row-data:nth-child(even) {
background: #fff !important;
/* 偶数番目 */
}
/* 変更選択時の色 */
table.smp-table tr.smp-be-operate td.smp-cell-data {
background: #def5ed !important;
}
table.smp-table tr.smp-row-data:hover {
background: #e4f4ff !important;
}
/* 表以外の基本設定 */
table.smp-table tr.smp-row-normal td {
border: 0px !important;
/* 不要な罫線の削除 */
font-size: 0.875rem !important;
}
/* 一覧表の付属ボタン */
table.smp-table input[name="smp-table-submit-button"],
table.smp-table .smp-table-button {
appearance: none;
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-box-sizing: border-box;
-webkit-appearance: button;
/* reset */
background: #2e6ea8;
border-bottom: 2px solid #0a2646;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
margin: 5px auto 5px 10px !important;
padding: 5px 15px 5px 15px;
}
table.smp-table input[name="smp-table-submit-button"]:hover,
table.smp-table .smp-table-button:hover {
filter: alpha(opacity=90);
-ms-filter: alpha(opacity=90);
opacity: 0.9;
}
/* 件数セレクトの調整 */
table.smp-table tr.smp-row-normal select {
width: auto !important;
height: 30px !important;
box-sizing: border-box;
margin: 5px 0px 5px 0px !important;
padding: 0px 5px 0px 0px !important;
}
/* 編集列テキストフィールドの調整 */
table.smp-table td.smp-cell-data input[type=text] {
width: 100% !important;
box-sizing: border-box;
padding: 5px !important;
}
/* 編集列テキストエリアの調整 */
table.smp-table td.smp-cell-data textarea {
width: 100% !important;
min-height: 80px;
box-sizing: border-box;
padding: 5px !important;
}
/* 編集列セレクトの調整 */
table.smp-table td.smp-cell-data select {
width: 100% !important;
height: 30px !important;
box-sizing: border-box;
padding: 0px 5px 0px 0px !important;
}
/* 一覧表ページャー
-------------------------*/
table.smp-table tr.smp-row-normal table.smp-pager {
float: right;
border-collapse: separate;
border-spacing: 5px 10px !important;
/* 左右・上下の順の指定 */
margin: 0px !important;
}
/* ページャー基本設定 */
table.smp-table tr.smp-row-normal table.smp-pager {
//除外 td.smp-page
font-size: 16px;
line-height: 1;
text-align: center;
}
/* リンクエリア拡張 */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a {
display: block;
background: #2e6ea8 !important;
border: 1px solid #2e6ea8 !important;
color: #fff !important;
text-decoration: none;
padding: 5px 10px 7px 10px;
}
/* 現在のページ */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-current-page {
background: #0a2646 !important;
border: 1px solid #0a2646 !important;
color: #fff !important;
padding: 5px 10px 7px 10px;
}
/* 省略記号 */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page-space {
border: 0px !important;
color: #0a2646 !important;
}
/* 表のtdをスマホ用に段組み */
@media only screen and (max-width: 639px) {
colgroup {
display: none !important;
}
table.smp-table td.smp-cell-sort {
display: none !important;
}
/* データ行をレスポンシブに */
table.smp-table td {
width: 100% !important;
display: block !important;
}
/* ページャーのtableへの影響を元に戻す */
table.smp-table tr.smp-row-normal table.smp-pager td {
display: table-cell !important;
width: auto !important;
}
/* データ行の文字揃えを左寄りにして、罫線を消す */
table.smp-table td.smp-cell-data {
border-top: 0px !important;
border-bottom: 0px !important;
font-size: 1rem !important;
text-align: left !important;
padding: 5px 10px !important;
}
table.smp-table td.smp-cell-data:first-child {
border-top: 2px solid #cfdde6 !important;
padding-top: 15px !important;
}
table.smp-table td.smp-cell-data:last-child {
padding-bottom: 15px !important;
border-bottom: 2px solid #cfdde6 !important;
}
}
/* 単票
-------------------------*/
.card_wrapper {
display: block;
width: inherit;
}
table.smp-card-list {
width: 73%;
border-collapse: collapse;
border: solid #cfdde6;
/* 線の色 */
border-width: 1px 1px 1px 1px;
/* 下線のみ引く */
margin: 10px auto 20px auto !important;
}
/* ソート行の基本設定 */
table.smp-card-list tr {
border: solid #cfdde6;
/* 線の色 */
border-width: 0px 0px 1px 0px;
/* 下線のみ引く */
}
table.smp-card-list th {
max-width: 30%;
background: #edf3f7;
border: solid #cfdde6;
/* 線の色 */
border-width: 0px 1px 1px 0px;
/* 下線のみ引く */
color: #123f77;
font-size: 1rem;
font-weight: bold;
line-height: 140%;
/* データの行間を詰める */
text-align: left;
/* テキスト左揃え */
padding: 10px 15px;
/* データの上下左右の隙間を広く */
}
table.smp-card-list td {
background: #fff;
border: solid #cfdde6;
/* 線の色 */
border-width: 0px 1px 0px 0px;
/* 下線のみ引く */
font-size: 15px;
line-height: 140%;
/* データの行間を詰める */
text-align: left;
/* テキスト左揃え */
padding: 10px 15px;
/* データの上下左右の隙間を広く */
}
table.smp-card-list th.bg_green {
background: #d8f3e4 !important;
color: #185841 !important;
}
table.smp-card-list th.bg_blue {
background: #7eb4d3 !important;
color: #333 !important;
}
table.smp-card-list th.bg_pink {
background: #ffece7 !important;
color: #d72e2e !important;
}
@media only screen and (max-width: 639px) {
table.smp-card-list th,
table.smp-card-list td {
padding: 10px 7px 10px 10px !important;
}
/* 一覧項目タイトルのデザイン */
/* list+card blueberry 20230421-----*/
.subtitle {
font-size: 70%;
margin: 5px 0px !important;
padding: 0px 8px;
color: #FFF;
background-color: #2e6ea8;
border-radius: 4px;
width: fit-content;
display: block;
}
table.smp-card-list {
width: 100%;
border-collapse: collapse;
border: solid #cfdde6;
/* 線の色 */
border-width: 1px 0px 0px 1px;
/* 下線のみ引く */
margin: 10px auto 10px auto;
}
}
< !-- SMP_TEMPLATE_CSS end
-->
-->
</style>
</head>
<body class="body">
<center>
<!-- 編集不可 start -->
<div class="body_tbl">
<h1>〇〇〇〇〇〇〇</h1>
<!-- SMP_TEMPLATE_FORM start -->
<!-- フォームを挿入します。-->
<!-- SMP_TEMPLATE_FORM end -->
<!-- 編集不可 end -->
<!-- 編集不可 start -->
</div>
<!-- 編集不可 end -->
</center>
</body>
</html>
単票の反映手順
「Web」＞「一覧表・単票」をクリック
対象の単票の「設定」をクリック
「フォームのデザイン雛形表示」をクリックし、『blueberry単票テンプレート』を選択
「〇〇〇〇〇〇〇」になっている箇所にタイトル名を設定
※ windowsなら control+Fキー、macならcommand+Fキーで〇〇〇〇〇〇〇で検索かけるとヒットします。
「プレビュー」で表示を確認
問題なければ、「保存」をクリックして完了
ご自身のSPIRAL ver.1環境に貼り付けて動作を確認してみてください。
