@charset "utf-8";

input, button, textarea, select {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

*{
    font-size:18px;
    font-weight:normal;
    background-color:#ffffff;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color:black;
    background-color:#ffffff;
    margin:1em;
    margin-right:2em;
    line-height:18pt;
    line-height:1.429;
}

h1.siteTitle {
    font-size:30px;
    font-weight:bold;
    padding:5px 15px 5px 15px;
    margin-bottom:1px;
    margin-top:1px;
}

h2 {
    font-size:18px;
    margin-left:2%;
    margin-right:30%;
    font-weight:bold;
    border-bottom:solid 2px #ff0099;
}

h3 {
    font-size:20px;
    font-weight: bold;
    margin-left:4%;
    margin-right:30%;
    border-left:#ff0099 8px solid;
    padding-left:8px;
    line-height:1.429;
    position:relative; top:5px;
}

h4 {
    font-size:18px;
    margin-left:4%;
    margin-right:30%;
    border-left:#ff0099 8px solid;
    padding-left:8px;
    line-height:1.429;
    position:relative;
    margin-bottom: 10px;
}

h4.accordion-button {
    font-size: 18px;
    margin-left: 8%;
    background-color: #ccc;
    border: none;
    top: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
}
p.gearchange-desc {
    margin-left: 8%;
    display: none;
}
.input-description {
    font-size: 14px;
}

p.hs-description {
    margin-bottom: 5px;
}

a.title {
    text-decoration: none;
    font-size:30px;
    font-weight:bold;
    padding:5px 15px 5px 15px;
    margin-bottom:1px;
    margin-top:1px;
}

p {
    margin-top:5px;
    margin-bottom:30px;
    margin-left:4%;
    margin-right:8%;
    line-height:15pt;
    line-height:1.429;
}

p.anchor {
    margin-left:4%;
    font-size:17px;
}

p.footer {
    margin-left:1%;
    font-family:sans-serif;
    font-style:oblique;
}

hr {
    margin-left:2%;
    margin-right:30%;
    height:2px;
    border:none;
    background-color:#ff0099;
}

hr.short {
    margin-left:4%;
    margin-right:30%;
    height:1px;
    border:none;
    background-color:#ff0099;
}
strong {
    font-weight:bold;
}
ul, li {
    font-size:15px;
    margin-left:1.2%;
    margin-bottom:8px;
    list-style-type:none;
    line-height:1.429;
    position:relative;bottom:3px;
}

.image-border {
    border: 1px solid;
}

.bold {
    font-weight: bold;
}

.result {
    margin-left: 20px;
}

label {
    margin-right: 10px;
    width: 200px;
    float: left;
}

div.calc {
    margin-top: 10px;
}

div.calc-result,
div.input-number {
    margin-left: 80px;
    font-size: 86%;
}

/* PC用CSS */
@media screen and (min-device-width:480px) {
    .submit-button {
        width: 50px;
        height: 30px;
        padding: 5px 8px;
        border-radius: 4px;
        border-top: none;
        border-left: none;
        border-right: none;
        background-image: none;
        background-color: #408080;
        font-size: 13px;
        color: #fff;
        cursor :pointer;
        margin-top: 10px;
    }
    /* テキストボックスのサイズ */
    input[type="text"],
    input[type="number"],
    textarea {
        outline: none;
        border: 1px solid #408080;
        border-radius: 3px;
        font-size: 16px;
        width: 100px;
        margin-left:7px;
        padding:4px;
    }
    input[type="text"]:focus,
    texture:focus {
        box-shadow: 0 0 7px #3498db;
        border: 1px solid #3498db;
    }
    /* PCでは表示しないSP用の改行に使う */
    .pc-not-disp {
        display: none;
    }
}
/* SP用CSS */
@media screen and (max-device-width:480px) {
    h4 {
        margin-right: 5%;
        font-size: 16px;
    }
    h3 {
        margin-right: 5%;
    }
    div.calc-result,
    div.calc-result div,
    div.input-number {
        margin-left: 30px;
        font-size: 15px;
    }
    .sp-image {
        width: 300px;
    }
    /* スマートフォン用送信ボタンはPC用の2.5倍 */
    .submit-button {
        width: 150px;
        height: 90px;
        padding: 5px 8px;
        border-radius: 4px;
        border-top: none;
        border-left: none;
        border-right: none;
        background-image: none;
        background-color: #408080;
        font-size: 33px;
        color: #fff;
        cursor :pointer;
    }
    /* テキストボックスのサイズ */
    input[type="text"],
    input[type="number"],
    textarea {
        outline: none;
        border: 1px solid #408080;
        border-radius: 3px;
        font-size: 23px;
        width: 100px;
        margin-left:7px;
        padding:10px;
    }
    input[type="text"]:focus,
    texture:focus {
        box-shadow: 0 0 7px #3498db;
        border: 1px solid #3498db;
    }
}