/* 背景 */
.riceseeding-app {
    padding: 0 25%;
    margin: .5em 1.5em;
}

@media (max-width: 640px) {
    .riceseeding-app {
        padding: 0;
    }
}

/* セレクトボックスのスタイル */
.riceseeding-input select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* デフォルトのスタイルを無効化 */
    padding: 0.5em 3.5em 0.5em 1em;
    margin-bottom: 0.5em;
    border: 1px solid #99CCFF;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
    background-color: #f9f9f9;
    cursor: pointer;
    display: inline-block;
    line-height: 1.5em;
    background-image:
        linear-gradient(45deg, transparent 50%, #f9f9f9 50%),
        linear-gradient(135deg, #f9f9f9 50%, transparent 50%),
        linear-gradient(to right, #99CCFF, #99CCFF);
    background-position:
        calc(100% - 19.5px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        100% 0;
    background-size:
        5px 5px,
        5px 5px,
        2.5em 2.5em;
    background-repeat: no-repeat;
}

/* セレクトボックスのホバー時のスタイル */
.riceseeding-input select:hover {
    box-shadow: 0 0 8px #99CCFF;
}

/* 検索結果 */
.riceseeding-result {
    text-align: center;
}

.riceseeding-result table {
    width: 100%;
    margin: 20px auto;
    border-collapse: collapse;
}

.riceseeding-result table th,
.riceseeding-result table td {
    padding: 10px 20px;
    border: 1px solid #99CCFF;
    background: #fff;
}

.riceseeding-result table th {
    color: #fff;
    background: #367fc8;
}

/* 検索結果見出し */
.riceseeding-result-title {
    font-size: 1.25em;
}

/* 検索結果数値 */
.riceseeding-level {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1.75em;
}

/* 注意事項 */
.riceseeding-note {
    margin: .5em 0;
    font-size: 1.25em;
    height: 5em;
}

ul.riceseeding-note {
    list-style: none;
    padding: 0;
}

ul.riceseeding-note li {
    margin-bottom: 0.5em;
    text-align: left;
}

ul.riceseeding-note li span {
    display: block;
    padding-left: 2em;
    text-indent: -2em;
}

ul.riceseeding-note li:nth-child(1) span:before {
    content: '※1 ';
    margin-right: 2px;
}

ul.riceseeding-note li:nth-child(2) span:before {
    content: '※2 ';
    margin-right: 2px;
}

ul.riceseeding-note li:nth-child(3) span:before {
    content: '※3 ';
    margin-right: 2px;
}