/* Theme Name:kirariPharmacy */
@charset 'utf-8';
:root{
    --font-size: 2.564vw;
    --contentsWrapper: calc(100% - 4rem);
    --headerH: 6rem;
    --black: #000000;
    --darkGray: #626262;
    --gray: #EEEEEE;
    --white: #FFFFFF;
    --navy: #0C55A5;
    --blue: #54C3F1;
    --lightBlue: #F1FCFF;
    --red: #A60E0C;
    --transition: .7s;
}
html{
    line-height: 1;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--font-size);
    color: var(--black);
}
body{
    padding-top: var(--headerH);
}
a{
    display: block;
}
img{
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}
/* ==============================
    common
============================== */
.pcView{
    display: none;
}
.contentsWrapper{
    width: var(--contentsWrapper);
    margin: 0 auto;
}
.noticeText{
    padding-left: 1em;
    text-indent: -1em;
}
.boldText{
    font-weight: bold;
}
.redText{
    color: var(--red);
}
.topHeadingText{
    padding: .5rem 2rem;
    background-color: var(--gray);
    line-height: 1.25;
    font-size: 1.2rem;
    color: var(--darkGray);
    text-align: center;
}
.commonBtn{
    max-width: 25rem;
    width: fit-content;
    height: 5rem;
    margin: 3rem auto 0;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blue);
    font-weight: bold;
    color: var(--white);
}
.commonBtn:after{
    content: '';
    width: .75em;
    height: 1em;
    margin-left: .5em;
    background-color: var(--white);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}
/* ==============================
    header
============================== */
.commonHeader{
    width: 100%;
    height: var(--headerH);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: var(--lightBlue);
}
.commonHeader .siteLogo{
    width: 20rem;
    margin-left: 2rem;
}
.commonHeader .headerBtns{
    margin-left: auto;
    display: flex;
}
.commonHeader .menuBtn{
    width: var(--headerH);
    height: var(--headerH);
    padding: .5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--blue);
}
.commonHeader .menuBtn.mail{
    background-color: initial;
}
.commonHeader .menuBtn .btnText{
    margin-top: .5rem;
    font-size: 1.2rem;
    color: var(--white);
}
.commonHeader .menuBtn.mail .btnText{
    color: var(--blue);
}
.commonHeader .menuWrap{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    right: -100vw;
    z-index: 999;
    background-color: var(--lightBlue);
    overflow-y: auto;
    transition: var(--transition);
}
.commonHeader .menuWrap.active{
    right: 0;
}
.commonHeader .menuWrap .menuBtn#menuClose{
    margin: 0 0 3rem auto;
}
.commonHeader .menuWrap .menuNav li{
    border-bottom: .1rem solid var(--navy);
}
.commonHeader .menuWrap .menuNav li:first-of-type{
    border-top: .1rem solid var(--navy);
}
.commonHeader .menuWrap .menuNav li a{
    padding: 1.5rem;
    line-height: 1.25;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--navy);
    text-align: center;
}
/* ==============================
    main
============================== */
main{
    margin: 5rem auto !important;
    line-height: 1.25;
    font-size: 1.8rem;
}
.breadcrumbs{
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
    font-size: 1.4rem;
}
.breadcrumbs li{
    display: flex;
    align-items: center;
}
.breadcrumbs li:after{
    content: '\03e';
    margin: 0 .5rem;
}
.breadcrumbs li:last-of-type:after{
    content: none;
}
.breadcrumbs li a{
    color: var(--navy);
    text-decoration: underline;
}
.largeHeading{
    margin-bottom: 4rem;
    padding-bottom: .5rem;
    border-bottom: .2rem solid var(--blue);
    font-size: 5rem;
    font-weight: bold;
}
.largeHeading:first-letter{
    font-size: 6rem;
    color: var(--blue);
}
.largeHeading .jpText{
    margin-left: 1.5rem;
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
}
.largeHeading .jpText:before,
.largeHeading .jpText:after{
    content: '';
    width: .5em;
    height: .1rem;
    background-color: var(--black);
}
.middleHeading{
    margin: 4rem auto 3rem;
    padding: .5rem 2rem;
    border-bottom: .1rem solid var(--blue);
    border-left: .8rem solid var(--blue);
    font-size: 2.4rem;
}
.middleHeading .jpText{
    margin-left: 1.5rem;
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
}
.middleHeading .jpText:before,
.middleHeading .jpText:after{
    content: '';
    width: .5em;
    height: .1rem;
    background-color: var(--black);
}
.contentsText{
    line-height: 1.5;
}
.newsList li{
    padding: 2rem;
    border-bottom: .2rem dashed var(--darkGray);
}
.newsList li:nth-of-type(2n - 1){
    background-color: var(--lightBlue);
}
.newsList li .day{
    margin-bottom: 1rem;
    color: var(--navy);
}
.newsList li .text{
    line-height: 1.5;
}
.shopList li{
    margin-bottom: 6rem;
}
.shopList li:last-of-type{
    margin-bottom: initial;
}
.shopList li .shopListTitle{
    margin-bottom: 3rem;
    font-size: 2.4rem;
    text-align: center;
}
.twoColumnDl{
    display: flex;
    flex-wrap: wrap;
    border-top: .1rem solid var(--darkGray);
    border-bottom: .1rem solid var(--darkGray);
}
.twoColumnDl dt,
.twoColumnDl dd{
    padding: 2rem 1rem;
    border-bottom: .2rem dashed var(--darkGray);
}
.twoColumnDl dt:last-of-type,
.twoColumnDl dd:last-of-type{
    border-bottom: none;
}
.twoColumnDl dt{
    width: 25%;
    background-color: var(--lightBlue);
}
.twoColumnDl dd{
    width: 75%;
}
.twoColumnDl dd a{
    display: inline;
    color: var(--navy);
    text-decoration: underline;
}
/* --- pager --- */
ul.page-numbers{
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.page-numbers li{
    margin-right: 1rem;
    line-height: 1;
}
ul.page-numbers li:has(.dots){
    margin-left: -.5rem;
    margin-right: .5rem;
}
ul.page-numbers li:last-of-type{
    margin-right: initial;
}
ul.page-numbers li a{
    width: 3.5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blue);
    color: var(--white);
}
ul.page-numbers li a.prev:before,
ul.page-numbers li a.next:after{
    content: '';
    width: .75em;
    height: 1em;
    background-color: var(--white);
}
ul.page-numbers li a.prev:before{
    clip-path: polygon(0 50%, 100% 100%, 100% 0);
}
ul.page-numbers li a.next:after{
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}
ul.page-numbers li .current{
    width: 3.5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--navy);
    color: var(--white);
}
ul.page-numbers li .dots{
    font-size: 1.2rem;
}
/* ==============================
    post/page
============================== */
#contentsBox .smallHeading{
    margin-bottom: 2rem;
    padding: 2rem;
    border-top: .2rem dashed var(--darkGray);
    border-bottom: .2rem dashed var(--darkGray);
    background-color: var(--lightBlue);
    font-size: 2rem;
    font-weight: bold;
}
#contentsBox p{
    margin-bottom: 2rem;
    line-height: 1.5;
}
#contentsBox p.rightText{
    text-align: right;
}
#contentsBox p.strongText{
    margin-top: 4rem;
    font-size: 3rem;
    font-weight: bold;
}
#contentsBox p a:not(.commonBtn){
    display: inline;
    color: var(--navy);
    text-decoration: underline;
}
#contentsBox .bnrBox{
    width: fit-content;
    margin: 2rem auto;
}
#contentsBox .bnrBox a{
    display: inline;
}
#contentsBox .bnrBox img{
    width: initial;
}
#contentsBox .columnBox.dashed{
    padding: 2rem 0;
    border-top: .2rem dashed var(--darkGray);
    border-bottom: .2rem dashed var(--darkGray);
}
#contentsBox .columnBox.dashed:has(+ .columnBox.dashed){
    border-bottom: none;
}
#contentsBox .columnBox .imgBox{
    margin-bottom: 2rem;
}
#contentsBox .columnBox .textBox p:last-of-type{
    margin-bottom: initial;
}
#contentsBox .checkIconText{
    margin-right: 1em;
    display: inline-flex;
    align-items: center;
}
#contentsBox .checkIconText:before{
    content: '';
    width: 1em;
    height: 1em;
    margin-right: .5em;
    background: url(./img/page/icon_check.svg) no-repeat center / 100% auto;
}
/* --- form --- */
#contentsBox .formDl{
    max-width: 48rem;
    margin: 6rem auto 0;
}
#contentsBox .formDl dt{
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: var(--blue);
}
#contentsBox .formDl dt.required:after{
    content: '必須';
    padding: .5rem .5em;
    border-radius: .3rem;
    background-color: var(--red);
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--white);
}
#contentsBox .formDl dd{
    margin-bottom: 2rem;
}
#contentsBox .formDl dd input:not([type='checkbox']):not([type='radio']),
#contentsBox .formDl dd select,
#contentsBox .formDl dd textarea{
    width: 100%;
    padding: .5em 1em;
    border: .1rem solid var(--darkGray);
}
#contentsBox .formDl dd input:not([type='checkbox']):not([type='radio'])::placeholder,
#contentsBox .formDl dd textarea::placeholder{
    color: var(--darkGray);
}
#contentsBox .agreeText{
    margin: 3rem auto;
    font-size: 1.4rem;
    text-align: center;
}
#contentsBox .agreeText + .commonBtn{
    width: 25rem;
    text-align: center;
}
/* ==============================
    index
============================== */
#index .indexImg{
    margin-bottom: 5rem;
}
#index .newsList{
    height: 50rem;
    padding: 2rem;
    border: .1rem solid var(--blue);
    overflow-y: auto;
}
#index .newsList li{
    background-color: initial;
}
#index .newsList + .commonBtn{
    margin-left: auto;
    margin-right: initial;
}
/* ==============================
    single
============================== */
#single .largeHeading{
    font-size: 2.4rem;
}
#single .largeHeading:first-letter{
    font-size: 3rem;
}
#single #contentsBox{
    min-height: 15rem;
}
/* ==============================
    footer
============================== */
.commonFooter{
    padding: 4rem 0 3rem;
    background-color: var(--lightBlue);
    line-height: 1.25;
    color: var(--darkGray);
}
.commonFooter .siteLogo{
    width: 16rem;
    margin: 0 auto 4rem;
}
.commonFooter .menuWrap .menuNav{
    margin-bottom: 6rem;
}
.commonFooter .menuWrap .menuNav li{
    margin-bottom: 1rem;
}
.commonFooter .menuWrap .menuNav li:last-of-type{
    margin-bottom: initial;
}
.commonFooter .menuWrap .menuNav li a{
    width: fit-content;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
}
.commonFooter .menuWrap .menuNav li a:before{
    content: '';
    width: 1em;
    height: .1rem;
    margin-right: .5em;
    background-color: var(--darkGray);
}
.commonFooter .copy{
    font-size: 1.2rem;
    text-align: center;
}
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
            PC
 =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
@media screen and (min-width: 1024px){
    :root{
        --font-size: 10px;
        --contentsWrapper: 1024px;
    }
    /* ==============================
        common
    ============================== */
    .spView{
        display: none !important;
    }
    .pcView{
        display: block;
    }
    body{
        padding-top: initial;
    }
    a{
        transition: opacity var(--transition);
    }
    a:hover{
        opacity: .7;
    }
    /* ==============================
        header
    ============================== */
    .commonHeader{
        height: initial;
        display: initial;
        position: initial;
        background-color: initial;
    }
    .commonHeader .siteLogo{
        width: 16rem;
        margin: 1rem auto;
    }
    .commonHeader .menuWrap{
        height: initial;
        position: static;
        background-color: var(--blue);
    }
    .commonHeader .menuWrap .menuNav{
        max-width: var(--contentsWrapper);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding: 1rem 0;
    }
    .commonHeader .menuWrap .menuNav li{
        width: calc((100% - .8rem) / 7);
        border-bottom: none;
        border-right: .1rem solid var(--white);
    }
    .commonHeader .menuWrap .menuNav li:first-of-type{
        border-top: none;
        border-left: .1rem solid var(--white);
    }
    .commonHeader .menuWrap .menuNav li a{
        padding: .5rem 1.5rem;
        font-size: 2.4rem;
        color: var(--white);
    }
    /* ==============================
        main
    ============================== */
    .largeHeading{
        font-size: 6rem;
    }
    .largeHeading:first-letter{
        font-size: 7.2rem;
    }
    .largeHeading .jpText{
        font-size: 1.8rem;
    }
    .middleHeading{
        font-size: 3rem;
    }
    .middleHeading .jpText{
        font-size: 1.8rem;
    }
    .newsList li a{
        display: flex;
        justify-content: space-between;
    }
    .newsList li .day{
        width: 10rem;
        margin-bottom: initial;
        margin-right: 5rem;
    }
    .newsList li .text{
        width: calc(100% - 15rem);
    }
    .shopList li .shopListTitle{
        font-size: 3rem;
    }
    .twoColumnDl dt{
        width: 20%;
    }
    .twoColumnDl dd{
        width: 80%;
    }
    /* --- pager --- */
    ul.page-numbers li a.prev,
    ul.page-numbers li a.next{
        width: initial;
        padding: 0 1rem;
    }
    ul.page-numbers li a.prev .pcView{
        margin-left: .5em;
    }
    ul.page-numbers li a.next .pcView{
        margin-right: .5em;
    }
    /* ==============================
        post/page
    ============================== */
    #contentsBox .columnBox{
        display: flex;
        justify-content: space-between;
    }
    #contentsBox .columnBox.dashed{
        padding: 4rem 0;
    }
    #contentsBox .columnBox .imgBox{
        width: 40rem;
        margin-bottom: initial;
    }
    #contentsBox .columnBox .textBox{
        width: calc(100% - 46rem);
    }
    /* ==============================
        index
    ============================== */
    #index .newsList{
        height: 30rem;
    }
    /* ==============================
        single
    ============================== */
    #single .largeHeading{
        font-size: 3rem;
    }
    #single .largeHeading:first-letter{
        font-size: 3.6rem;
    }
    #single #contentsBox{
        min-height: 20rem;
    }    
    /* ==============================
        footer
    ============================== */
    .commonFooter .siteLogo{
        margin: 0 auto 3rem 0;
    }
    .commonFooter .menuWrap .menuNav{
        max-width: 80rem;
        margin-bottom: 4rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 1rem 6rem;
    }
    .commonFooter .menuWrap .menuNav li:nth-of-type(2){
        grid-column: 2;
    }
    .commonFooter .menuWrap .menuNav li:nth-of-type(3){
        grid-column: 2;
        grid-row: 2;
    }
    .commonFooter .menuWrap .menuNav li:nth-of-type(4){
        grid-column: 2;
        grid-row: 3;
    }
    .commonFooter .menuWrap .menuNav li:nth-of-type(5){
        grid-column: 3;
    }
    .commonFooter .menuWrap .menuNav li:nth-of-type(6){
        grid-column: 3;
        grid-row: 2;
    }
    .commonFooter .copy{
        text-align: right;
    }
}