@charset "utf-8";
main {
    font-size: 1.6rem;
    line-height: 1.7;
}

section {
    width: 96%;
    margin: 0 auto 2rem auto;
}

.entry_body {
    width: 100%;
}

.entry_body h1 {
    font-size: 2rem;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
    color: #333;
    margin-bottom: 1rem;
}

.contents-box h2 {
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 1.8rem;
    padding: 0.5em;
    color: #0a0a0a;
    background-color: #E6F7FF;
    border-left: solid 5px var(--main-color);
    border-bottom: none;
}

.contents-box h3 {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 1.8rem;
    color: var(--main-color);
    border-bottom: 3px solid #c21500;
    border-image: linear-gradient(to right, rgb(0, 136, 204), rgb(104, 224, 207));
    border-image-slice: 1;
    padding: 0 0.5rem;
}
.contents-box h4 {
    margin: 5px auto;
    font-weight: bold;
    color: #404040;
    padding: 0 0.5rem;
    border-bottom: 2px dotted #ccc;
}
.contents-box p {
    padding: 0 1rem;
}
.contents-box a {
    display: inline;
    color: var(--main-color);
    font-weight: bold;
}
/*アナウンス*/
.shipping_announce {
    width: 100%;
    background: #f1f1f1;
    text-align: center;
    padding: 0.8rem 0;
    margin: 0 auto 2rem auto;
}

.shipping_announce p {
    margin: 0.5rem 1rem;
    padding: 0px 0px 0px 0px;
    font-size: 1.6rem;
    line-height: 1.3;
}

.shipping_announce p a {
    color: var(--main-color);
    font-weight: bold;
}
/*アナウンス*/

#search2 {
    width: 60%;
    margin: 1rem auto 1rem 0;
}

img.search-penguin {
    width: 17rem;
    height: 100%;
    margin-right: 1rem;
    float: right;
}

.contents-box a {
    display: inline;
    color: var(--main-color);
    font-weight: bold;
}

/*医薬品検索ページのログイン*/
.search-p-form {
    margin-bottom: 2.5rem;
}

.search-p-form table {
    border-collapse: collapse;
    width: 80%;
    margin: 2rem auto 2rem auto;
}

.search-p-form th,
.search-p-form td {
    border: 1px solid #aaa;
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.search-p-form th {
    font-weight: bold;
    background-color: #e2e2e2;
}

.search-p-form td input {
    font-size: 1.8rem;
}

.search-p-form .contact_btn_area {
    text-align: center;
}

.search-p-form .contact_btn_area a {
    padding: 0.5rem 2rem;
    border: 3px solid #aaa;
}

.search-p-form {
    margin-bottom: 2.5rem;
}
.pass_forgot {
    margin-bottom: 4rem;
}

.pass_forgot a{
    color: #0a0a0a;
    background-color: #e2e2e2;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
}

/*医薬品検索ページのログイン*/

/*医薬品検索ページの電話案内*/

.search-tel {
    text-align: center;
    margin-top: 3rem;
    padding: 3rem 1rem 1rem 1rem;
    border: 1px solid #aaa;
    position: relative;
    width: 50%;
    margin: 3rem auto;
}

p.search-tel-title {
    display: inline-block;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    font-size: 1.8rem;
    font-weight: bold;
    background-color: #fefefe;
    width: auto;
    height: 3rem;
    padding: 0 3rem;
}

.search-tel .tell-number {
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--main-color);
    text-decoration: underline;
}

span.tell-number{
    font-weight: bold;
    color: var(--main-color);
    text-decoration: underline;
}

.search-tel table {
    margin: 2rem auto 0 auto;
    border-collapse: collapse;
    width: 50%;
}

.search-tel table th,
.search-tel table td {
    padding: 1rem;
    border: 1px solid #aaa;
    text-align: center;
}

.search-tel table th {
    text-align: center;
    font-weight: bold;
    background-color: #e2e2e2;
}

/*医薬品検索ページの電話案内*/

.affi-btn {
    width: 30%;
    margin: 15px auto 15px auto;
    text-align: center;
    line-height: 35px;
    display: block;
    color: #fff;
    background: #ff6b3a;
    border-radius: 0.5rem;
    border: 2px solid #d66819;
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: bold;
    -webkit-box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
    box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
    transition: 0.3s all;
}

.affi-btnBack {
    margin: 15px auto 15px auto;
    text-align: center;
    line-height: 36px;
    display: block;
    color: rgb(37, 37, 37);
    background: #f1f1f1;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: bold;
    -webkit-box-shadow: 0 3px 3px rgb(0 0 0 / 20%);
    box-shadow: 0 3px 3px rgb(0 0 0 / 20%);
    padding: 0 2rem;
    border: #aaa solid 1px;
}
.search-p-form {
    margin-bottom: 2.5rem;
}
.pass_forgot {
    margin-bottom: 4rem;
}

.pass_forgot a{
    color: #0a0a0a;
    background-color: #e2e2e2;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
}

/* お電話でのお問い合わせ微調整 ここから */
@media screen and (max-width: 1499px) {
    .search-tel{
        width: 70%;
    }
}

@media screen and (min-width:480px) and (max-width:820px) {
    .search-tel {
        width: 80%;
    }
    p.search-tel-title{
        width: 80%;
    }
    .search-tel table{
        width: 70%;
    }
}
/* お電話でのお問い合わせ微調整 ここまで */
@media screen and (max-width: 820px) {
    .search-p-form {
        margin-bottom: 1.5rem;
    }
    .contents-box p.pass_forgot {
        margin-bottom: 2rem;
    }
    .pass_forgot a{
        font-size: 1.2rem;
    }
    .entry_body h1 {
        font-size: 1.8rem;
        border-bottom: 2px solid #ccc;
        margin-bottom: 0.5rem;
    }

    .contents-box h2 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .contents-box h3 {
        font-size: 1.6rem;
    }

    .contents-box p {
        font-size: 1.6rem;
        width: 98%;
        margin: auto;
        padding: 0;
    }
    /*アナウンス*/
    .shipping_announce {
        width: 100%;
        padding: 0.5rem 0;
        margin: 0 auto 0.5rem auto;
    }

    .shipping_announce p a {
        font-size: 1.4rem;
    }
    /*アナウンス*/
}

@media screen and (max-width: 480px) {
    img.search-penguin {
        width: 15rem;
        margin: 0 0.5rem;
    }

    #search2 {
        width: 95%;
        margin: 1rem auto 1rem auto;
    }

    /*医薬品検索ページのログイン*/
    .search-p-form table {
        width: 98%;
    }

    .search-p-form th,
    .search-p-form td {
        font-size: 1.4rem;
        padding: 0.5rem;
        text-align: center;
    }

    .search-p-form th {
        width: 20%;
    }

    .search-p-form td {
        width: 80%;
        vertical-align: middle;
    }

    .search-p-form td input {
        font-size: 1.8rem;
        width: 100%;
    }

    /*医薬品検索ページのログイン*/

    /*医薬品検索ページの電話案内*/

    .search-tel {
        text-align: center;
        margin-top: 2rem;
        width: 100%;
    }

    .search-tel .tell-number {
        font-size: 2.4rem;
    }

    .search-tel table {
        width: 70%;
    }

    p.search-tel-title {
        width: 55%;
        font-size: 1.6rem;
        padding: 0 1rem;
    }

    .search-tel table th,
    .search-tel table td {
        text-align: center;
    }

    /*医薬品検索ページの電話案内*/
    .affi-btn {
        width: 80%;
    }
}