@charset "utf-8";
/* CSS Document */

/* CSS変数定義 */
:root {
    /* アニメーションディレイ初期値セット（ms） */
    --anim-arg: 0ms;

    /* カラーパレット */
    /* ベース色 */
    --cp-base-01: #3873B7;
    /* 基本色 */
    --cp-base-02: #ABD4EF;
    --cp-base-03: #ECF2F6;
    --cp-base-04: #2B2B2B;
    /* 定番色 */
    --cp-stap-01: rgba(184,191,181,1);
    --cp-stap-02: rgba(184,195,209,1);
    --cp-stap-03: rgba(204,195,131,1);
    --cp-stap-04: #53A5CF;
    /* 補色 */
    --cp-comp-01: rgba(227,98,159,1);
    --cp-comp-02: rgba(222,84,78,1);
    --cp-comp-03: rgba(246,168,38,1);
    --cp-comp-04: rgba(208,208,208,1);
    /* 同系色 */
    --cp-simi-01: rgba(35,153,86,1);
    --cp-simi-02: rgba(9,96,174,1);
    --cp-simi-03: rgba(0,133,194,1);
    --cp-simi-04: rgba(0,128,106,1);
    /* その他 */
    --cp-etc-01: rgba(51,51,51,1);
    --cp-etc-02: rgba(102,102,102,1);
    --cp-etc-03: rgba(109,107,91,1);
    --cp-etc-04: rgba(221,221,221,1);
    
    /* フォント */
    --font-jp01: 'Noto Sans JP', sans-serif;
    --font-jp02: 'Zen Maru Gothic', serif;
    --font-en01: 'Josefin Sans', sans-serif;
    --font-en02: 'Kaisei Decol', serif;
}

html {
    font-family: var(--font-jp01);
    color: var(--cp-base-04);
    scroll-padding-top: 100px;
    line-height: 1.8;
}
@media screen and (max-width: 959px) {
    html {scroll-padding-top: 50px;}
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
    font-family: 'Avenir', 'Arial', var(--font-jp02);
}

/* 汎用書体クラス */
.font-uklink {color: #1e87f0!important;}

.font-jp-sans {font-family: var(--font-jp01)!important;}
.font-jp-serif {font-family: var(--font-jp02)!important;}
.font-en-sans {font-family: var(--font-en01)!important;}
.font-en-serif {font-family: var(--font-en02)!important;}

.font-base-01 {color: var(--cp-base-01)!important;}
.font-base-02 {color: var(--cp-base-02)!important;}
.font-base-03 {color: var(--cp-base-03)!important;}
.font-base-04 {color: var(--cp-base-04)!important;}
.font-stap-01 {color: var(--cp-stap-01)!important;}
.font-stap-02 {color: var(--cp-stap-02)!important;}
.font-stap-03 {color: var(--cp-stap-03)!important;}
.font-stap-04 {color: var(--cp-stap-04)!important;}
.font-comp-01 {color: var(--cp-comp-01)!important;}
.font-comp-02 {color: var(--cp-comp-02)!important;}
.font-comp-03 {color: var(--cp-comp-03)!important;}
.font-comp-04 {color: var(--cp-comp-04)!important;}
.font-simi-01 {color: var(--cp-simi-01)!important;}
.font-simi-02 {color: var(--cp-simi-02)!important;}
.font-simi-03 {color: var(--cp-simi-03)!important;}
.font-simi-04 {color: var(--cp-simi-04)!important;}
.font-etc-01 {color: var(--cp-etc-01)!important;}
.font-etc-02 {color: var(--cp-etc-02)!important;}
.font-etc-03 {color: var(--cp-etc-03)!important;}
.font-etc-04 {color: var(--cp-etc-04)!important;}

/* 汎用BGクラス */
.bg-base-01 {background: var(--cp-base-01)!important;}
.bg-base-02 {background: var(--cp-base-02)!important;}
.bg-base-03 {background: var(--cp-base-03)!important;}
.bg-base-04 {background: var(--cp-base-04)!important;}
.bg-stap-01 {background: var(--cp-stap-01)!important;}
.bg-stap-02 {background: var(--cp-stap-02)!important;}
.bg-stap-03 {background: var(--cp-stap-03)!important;}
.bg-stap-04 {background: var(--cp-stap-04)!important;}
.bg-comp-01 {background: var(--cp-comp-01)!important;}
.bg-comp-02 {background: var(--cp-comp-02)!important;}
.bg-comp-03 {background: var(--cp-comp-03)!important;}
.bg-comp-04 {background: var(--cp-comp-04)!important;}
.bg-simi-01 {background: var(--cp-simi-01)!important;}
.bg-simi-02 {background: var(--cp-simi-02)!important;}
.bg-simi-03 {background: var(--cp-simi-03)!important;}
.bg-simi-04 {background: var(--cp-simi-04)!important;}
.bg-etc-01 {background: var(--cp-etc-01)!important;}
.bg-etc-02 {background: var(--cp-etc-02)!important;}
.bg-etc-03 {background: var(--cp-etc-03)!important;}
.bg-etc-04 {background: var(--cp-etc-04)!important;}

.bg-dot-black {
    background: url("../img/bg_dot_black.png")!important;
    background-size: 4px!important;
}
.bg-dot-white {
    background: url("../img/bg_dot_white.png")!important;
    background-size: 4px!important;
}
.bg-lined {
    background-image: url("../img/bg_oblique_T.png")!important;
    background-size: 15px!important;
    background-repeat: repeat;
}
.bg-lined-white {
    background-image: url("../img/bg_oblique_whiteT.png")!important;
    background-size: 15px!important;
    background-repeat: repeat;
}
.bg-transparent {background: rgba(34,34,34,.3);}
.bg-transparent-black {background: rgba(0,0,0,.5);}
.bg-transparent-white {background: rgba(255,255,255,.7);}


.hr-bold-white {
    border-top: 5px solid white!important;
}

    
/* header メインナビゲーション */
.uk-navbar-container {
    height: 100px;
}
.header-logo {
    width: 285px;
    margin-left: 10px;
}
.phone-num {
    text-align: right;
    color: var(--cp-base-01);
    font-weight: bold;
    line-height: 0.8;
}
.uk-navbar-nav>li>a {
    padding-top: 29.195px;
    font-size: 0.9rem;
    font-family: var(--font-jp01);
    font-weight: bold;
    color: var(--cp-base-01);
    position: relative;
    z-index: 1;
    display: inline-block;
}
.uk-navbar-nav>li:hover>a,
.uk-navbar-nav>li>a.uk-open,
.uk-navbar-nav>li>a:focus {
    transition: all .3s ease-out .2s;
}
.uk-navbar-nav>li.sel {background: var(--cp-base-02);}

.uk-navbar-center ul>li>a {position: relative;}
.uk-navbar-center ul>li>a::before {
    position: absolute;
    bottom: 25px;
    left: 15px;
    content: '';
    width: calc(100% - 30px);
    height: 1px;
    background: var(--cp-base-01);
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s ease-out .2s;
}
.uk-navbar-center ul>li>a:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

.uk-navbar-right .btn_recruit {
    padding: 6px 32px;
    background: var(--cp-base-01);
    color: white;
}
.uk-navbar-right .btn_contact {
    padding: 6px 18px;
    background: var(--cp-base-04);
    color: white;
}
@media screen and (max-width: 959px) {
    .uk-navbar-container {height: 50px;}
    .header-logo {width: 215px;}
    .uk-navbar-right .btn_recruit {
        font-size: .75rem;
        padding: 0 21px;
        line-height: 30px;
    }
    .uk-navbar-right .btn_contact {
        font-size: .75rem;
        padding: 0 7px;
        line-height: 30px;
    }
}
@media screen and (max-width: 639px) {
    .header-logo {width: 124px;}
}

/* header SPメニュートグルボタン */
:has(> .btn-trigger) {
    padding: 15px 14.5px 11px;
    cursor: pointer;
}
.btn-trigger {
    position: relative;
    width: 21px;
    height: 18px;
    cursor: pointer;
}
.btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--cp-base-04);
    border-radius: 2px;
}
.btn-trigger, .btn-trigger span {
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {top: 0;}
.btn-trigger span:nth-of-type(2) {top: 8px;}
.btn-trigger span:nth-of-type(3) {bottom: 0;}
#btn-menu.active span:nth-of-type(1) {
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
}
#btn-menu.active span:nth-of-type(2) {
    left: 50%;
    opacity: 0;
    -webkit-animation: active-btn-menu-bar02 .8s forwards;
    animation: active-btn-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-btn-menu-bar02 {
    100% {height: 0;}
}
@keyframes active-btn-menu-bar02 {
    100% {height: 0;}
}
#btn-menu.active span:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
}

/* header SPメニュー */
.uk-navbar-dropdown {
    left: 0!important;
    padding-top: 0;
}
.uk-navbar-dropdown-nav>li>a {
    color: var(--cp-base-01);
    font-weight: bold;
    justify-content: center;
    position: relative;
}
.uk-navbar-dropdown-nav .uk-nav-divider {
    border-top: 1px solid #ECF2F6;
}
.uk-navbar-dropdown-nav>li>a:hover {
    color: var(--cp-base-02);
}
.uk-navbar-dropdown-nav>li>a.angleL::before {
    position: absolute;
    top: 7.5px;
    right: calc(50% + 120px);
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url(../img/asset/icon_angle-left.png);
    background-size: contain;
    transition: all .2s ease-out .1s;
}
.uk-navbar-dropdown-nav>li>a.angleR::before {
    position: absolute;
    top: 7.5px;
    left: calc(50% + 120px);
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url(../img/asset/icon_angle-right.png);
    background-size: contain;
    transition: all .2s ease-out .1s;
}
.uk-navbar-dropdown-nav>li>a.angleL:hover::before {
    transform: translateX(-10px);
}
.uk-navbar-dropdown-nav>li>a.angleR:hover::before {
    transform: translateX(10px);
}

.btn-nav {
    padding-top: 52px;
    display: block;
    width: 100px;
    height: 80px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    text-decoration: none!important;
    position: relative;
    text-align: center;
}
.btn-nav:hover {color: white;}
.btn-nav::before {
    position: absolute;
    top: 8px;
    left: calc(50% - 20px);
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-size: contain;
    transform: all .3s ease-out .2s;
}
.btn-nav.btn-nav-recruit {background-color: var(--cp-base-01);}
.btn-nav.btn-nav-recruit::before {background-image: url(../img/asset/icon_bn-recruit.png);}
.btn-nav.btn-nav-shop {background-color: var(--cp-stap-04);}
.btn-nav.btn-nav-shop::before {background-image: url(../img/asset/icon_bn-shop.png);}
.btn-nav.btn-nav-contact {background-color: var(--cp-base-04);}
.btn-nav.btn-nav-contact::before {background-image: url(../img/asset/icon_bn-contact.png);}


/* ページナビゲーション */
.uk-subnav.subnav-top {
    margin-left: -70px;
    padding: 20px 0;
    position: relative;
    align-items: start;
}
.uk-subnav.subnav-top::before, 
.uk-subnav.subnav-top::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: calc(100% - 70px);
    height: 1px;
    background-color: #CCCCCC;
}
.uk-subnav.subnav-top::before {
    top: 0;
}
.uk-subnav.subnav-top::after {
    bottom: 0;
}
.uk-subnav.subnav-top>* {
    padding-left: 70px;
}
.uk-subnav.subnav-top>*>:first-child, 
.uk-subnav.subnav-top .uk-dropdown-nav>li>a, 
.uk-subnav.subnav-top .heading-subnav, 
.uk-dropdown-nav.subnav-side {
    color: var(--cp-base-04);
    line-height: 1rem;
}
.uk-subnav.subnav-top .heading-subnav {
    font-size: .875rem;
    padding-left: 50px;
    position: relative;
}
.uk-subnav.subnav-top .heading-subnav::before {
    position: absolute;
    top: -7px;
    left: 0;
    content: "";
    display: block;
    width: 40px;
    height: 27px;
    background-image: url(../img/asset/icon_bldg.png);
    background-size: contain;
}
.uk-checkbox {
    border-radius: 3px;
}
.uk-subnav.subnav-top .uk-checkbox, 
.uk-dropdown-nav.subnav-side .uk-checkbox {
    margin-top: 1px;
}
.uk-subnav.subnav-top .uk-active .uk-checkbox, 
.uk-dropdown-nav.subnav-side .uk-active .uk-checkbox {
    background-color: #1e87f0;
    border-color: transparent;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
}
.uk-subnav.subnav-top .uk-nav>li>a, 
.uk-dropdown-nav.subnav-side .uk-nav>li>a {
    padding: 5px 0 0;
}
.uk-subnav.subnav-top .uk-nav>li:first-child>a, 
.uk-dropdown-nav.subnav-side .uk-nav>li:first-child>a {
    padding: 15px 0 0;
}


/* ヒーローヘッダー テキスト*/
.txt-slogan {
    text-align: left;
    color: white;
    font-weight: bold;
    letter-spacing: .05em;
    text-shadow: 0 3px 6px rgba(34,34,34,.5);
    margin-top: 0;
    line-height: 1.75;
}
.txt-subslogan {
    display: inline-block;
    text-align: left;
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: .05em;
    text-shadow: 0 3px 6px rgba(34,34,34,.5);
    margin-top: 0;
    background-color: rgba(56,115,183,.7);
    border-radius: 8px;
    padding: 5px 20px;
}
@media (max-width: 639px) {
    .txt-subslogan {
        font-size: .9rem;
        padding: 5px 10px;
    }
}
/* ヒーローヘッダー イメージ画像位置調整 */
@media (max-width: 1199px) {
    .carousel01 {left: 40%;}
}
@media (max-width: 959px) {
    .carousel01 {left: 15%;}
}
@media (max-width: 639px) {
    .carousel01 {left: -10%;}
}
@media (max-width: 479px) {
    .carousel01 {left: -40%;}
}
/* ヒーローヘッダー 採用情報ボタン */
#recruitBnr {
    width: 240px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    background-image: url(../img/asset/bn_recruit.png);
    background-size: contain;
    text-decoration: none;
    line-height: 1.5;
}
@media (max-width: 639px) {
    #recruitBnr {transform: scale(.75);}
}


/* 見出し関係 */
.heading-page>h2, 
.heading-page>p {
    letter-spacing: .05em;
    text-align: center;
}
.heading-page>h2 {
    font-family: var(--font-jp02);
    margin: 0 0 5px;
}
.heading-page>p {
    font-family: var(--font-en02);
    font-size: .875rem;
    line-height: 1.5;
    margin: 5px 0 0;
}

.heading-main>h3, 
.heading-main>p {
    color: var(--cp-base-01);
    letter-spacing: .05em;
    text-align: center;
}
.heading-main>h3 {
    font-family: var(--font-jp02);
    margin: 0 0 5px;
}
.heading-main>p {
    font-family: var(--font-en02);
    font-size: .875rem;
    line-height: 1.5;
    margin: 5px 0 0;
}

.heading-circle {
    padding-left: calc(1em + 10px);
    position: relative;
    font-family: var(--font-jp01);
    font-weight: bold;
}
.heading-circle::before {
    position: absolute;
    top: calc(50% - .5em + 2px);
    left: 0;
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-color: var(--cp-base-03);
    border-radius: 1em;
}


h3.heading-guidance span {
    display: inline-block;
    position: relative;
}
h3.heading-guidance span::before {
    position: absolute;
    top: -15px;
    left: -36px;
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    background-image: url(../img/asset/icon_glitter_blue.png);
    background-size: contain;
}
h3.heading-guidance span::after {
    position: absolute;
    bottom: -6px;
    right: -50px;
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../img/asset/icon_hospital_blue.png);
    background-size: contain;
}

h4.heading-recruit {
    color: var(--cp-base-01);
    letter-spacing: .05em;
    font-family: var(--font-jp02);
    text-align: center;
}
h4.heading-recruit span {
    display: inline-block;
    position: relative;
}
h4.heading-recruit span::after {
    position: absolute;
    content: "";
    display: block;
    background-size: contain;
}
h4.heading-recruit.icon01 {
    padding-right: 60px;
}
h4.heading-recruit.icon01 span::after {
    top: -5px;
    right: -60px;
    width: 52px;
    height: 40px;
    background-image: url(../img/asset/icon_recruit01.png);
    transform: rotate(13deg);
}
h4.heading-recruit.icon02 {
    padding-right: 70px;
}
h4.heading-recruit.icon02 span::after {
    top: -16px;
    right: -70px;
    width: 65px;
    height: 66px;
    background-image: url(../img/asset/icon_recruit02.png);
}

h5.heading-recruit-content {
    position: relative;
    display: block;
    width: 180px;
    text-align: center;
    color: white;
    font-weight: bold;
    background-color: var(--cp-base-01);
    border-radius: 12px;
    margin: -20px auto 0 auto;
    padding: 10px;
    z-index: 2;
}

.heading-business01, 
.heading-business02 {
    color: var(--cp-base-01);
    padding-left: 60px;
    position: relative;
}
.heading-business01::before, 
.heading-business02::before {
    position: absolute;
    content: "";
    display: block;
    background-size: contain;
    top: calc(50% - 25px);
    left: 0;
    width: 50px;
    height: 50px;
}
.heading-business01::before {
    background-image: url(../img/asset/icon_heading-business01.png);
}
.heading-business02::before {
    background-image: url(../img/asset/icon_heading-business02.png);
}

.heading-qa01, 
.heading-qa02 {
    font-family: var(--font-jp01);
    font-weight: bold;
    margin-bottom: 40px;
}
.heading-qa01::after, 
.heading-qa02::after {
    position: absolute;
    content: "";
    display: block;
    background-size: contain;
}
.heading-qa01::after {
    top: -16px;
    left: 180px;
    width: 81px;
    height: 67px;
    background-image: url(../img/asset/icon_qa01.png);
}
.heading-qa02::after {
    top: -7px;
    left: 180px;
    width: 107px;
    height: 59px;
    background-image: url(../img/asset/icon_qa02.png);
}

.heading-history {
    text-align: center;
}
.heading-history>* {
    position: relative;
    padding-right: 80px;
    display: inline-block;
}
.heading-history>*:last-child::after {
    position: absolute;
    content: "";
    display: block;
    background-size: contain;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 50px;
    background-image: url(../img/asset/icon_bldg.png);
}

/* コンテナ関係 */
.container-features {
    position: relative;
    background-color: var(--cp-base-03);
    border-radius: 28px;
    padding: 50px 20px 30px;
    margin-top: 54px;
}
.icon-heading, 
.icon-heading-alt {
    position: absolute;
    display: block;
    top: -54px;
    width: 80px;
    background-size: contain;
    text-align: center;
    color: white;
}
.icon-heading {
    right: 0;
    height: 83.2px;
    background-image: url(../img/asset/icon_heading.png);
}
.icon-heading>p:first-child {
    margin: 0;
    padding-top: 12px;
    font-size: .8em;
    font-family: var(--font-en02);
}
.icon-heading>p:nth-child(2) {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
    line-height: 1em;
}
.icon-heading-alt {
    left: calc(50% - 40px);
    height: 80px;
    background-color: var(--cp-base-01);
    border-radius: 40px;
}
.icon-heading-alt>p {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
    line-height: 1em;
    padding-top: 22px;
}
h4.heading-features {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--cp-base-01);
    text-align: center;
    margin-top: 20px;
}
h4.heading-features>span {
    display: inline-block;
    transform: rotate(15deg);
}

.width-limit330 {
    max-width: 330px;
}

/* ボタン関係 */
.btn-guidance {
    display: block;
    width: 340px;
    height: 100px;
    border-radius: 16px;
    background-color: var(--cp-base-01);
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
    text-align: center;
    position: relative;
    padding-right: 50px;
    box-sizing: border-box;
    line-height: 1.5;
}
.btn-guidance:hover {
    color: white;
    text-decoration: none;
}
.btn-guidance::before {
    position: absolute;
    right: 30px;
    content: "";
    display: block;
    background-size: contain;
}
.btn-guidance01 {padding-top: 32px;}
.btn-guidance01::before {
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    background-image: url(../img/asset/icon_guidance01.png);
}
.btn-guidance02 {padding-top: 20px;}
.btn-guidance02::before {
    top: calc(50% - 30px);
    width: 60px;
    height: 60px;
    background-image: url(../img/asset/icon_guidance02.png);
}
.btn-guidance03 {padding-top: 32px;}
.btn-guidance03::before {
    top: calc(50% - 27.5px);
    width: 55px;
    height: 55px;
    background-image: url(../img/asset/icon_guidance03.png);
}

.btn-general {
    display: block;
    width: 300px;
    height: 50px;
    border-radius: 8px;
    background-color: var(--cp-base-01);
    color: white;
    font-weight: bold;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    padding-top: 11px;
}
.btn-general:hover {
    color: white;
    text-decoration: none;
}
.btn-general::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 12.5px);
    right: 25px;
    width: 25px;
    height: 25px;
    background-image: url(../img/asset/arrow-right_white.png);
    background-size: contain;
    transition: all .3s ease-out .2s;
}
.btn-general:hover::before {
    transform: translateX(10px);
}
.btn-general.btn-footer {
    width: 350px;
    padding-right: 30px;
}

.btn-topics {
    display: block;
    width: 150px;
    height: 40px;
    border: 1px solid var(--cp-base-01);
    border-radius: 8px;
    background-color: white;
    color: var(--cp-base-01);
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    padding-top: 9px;
    padding-right: 5px;
}
.btn-topics.btn-topics-wide {
    width: 220px;
}
.btn-topics:hover {
    color: var(--cp-base-01);
    text-decoration: none;
}
.btn-topics::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    right: 12px;
    width: 23px;
    height: 19px;
    background-image: url(../img/asset/arrow-right_blue.png);
    background-size: contain;
    transition: all .3s ease-out .2s;
}
.cardlink:hover .btn-topics::before, 
.btn-topics:hover::before {
    transform: translateX(7px);
}

.btn-contact-sp {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    background-color: var(--cp-base-01);
    color: white;
}


.btn-pharmacy {
    display: block;
    width: 200px;
    height: 40px;
    border-radius: 20px;
    background-color: #01B2D3;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    padding-top: 9px;
    margin-top: 40px;
}
.btn-pharmacy:hover {
    color: white;
    text-decoration: none;
}
.btn-pharmacy::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 6px);
    right: 20px;
    width: 8px;
    height: 12px;
    background-image: url(../img/asset/Icon-ionic-ios-arrow-forward.png);
    background-size: contain;
    transition: all .3s ease-out .2s;
}
.btn-pharmacy:hover::before {
    transform: translateX(10px);
}
.btn-pharmacy.btn-footer {
    width: 350px;
    padding-right: 30px;
}
@media (max-width: 959px) {
    .btn-pharmacy {margin-top: 10px;}
}

/* セクション区切り */
#guidance,
#business01,
#business02 {
    position: relative;
}
#guidance::after,
#business01::after,
#business02::after {
    display: block;
    position: absolute;
    content: '';
}
#guidance::after {
    left: 0;
    bottom: calc(-100vw / 24 + 1px);
    width: 100%;
    aspect-ratio: 24 / 1;
    background-image: url(../img/asset/section_separator_01.png);
    background-position: center;
    background-size: cover;
}
#business01::after,
#business02::after {
    width: calc(1200px + ((100% - 1200px) / 2));
    aspect-ratio: 160 / 7;
    background-image: url(../img/asset/section_separator_02.png);
    background-position: center;
    background-size: contain;
    z-index: 2;
}
#business01::after {
    left: 0;
    bottom: calc((1200px + ((100% - 1200px) / 2)) / 160 * 7 / 2 * -1);
}
#business02::after {
    right: 0;
    bottom: calc((1200px + ((100% - 1200px) / 2)) / 160 * 7 / 2 * -1);
    transform: rotate(180deg);
}
@media (max-width: 959px) {
    #business01::after,
    #business02::after {
        display: none;
    }
}
#newstopic {
    margin-top: calc(100vw / 24 - 1px);;
}

/* パンくずリスト */
/* .breadcrumb {
    padding: 7px 0;
} */
.uk-breadcrumb {
    margin: 4px 0 12px;
}
.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
    content: ">";
}


/* フッター */
address {
    margin: 0;
    padding: 0;
    font-style: normal;
}
.copyright {
    font-size: 0.8em;
    /* text-align: center; */
}


/* ページネーション */
.uk-pagination {
    flex-wrap: nowrap;
}
.uk-pagination>li {
    margin: 0 2px;
}
.uk-pagination>li>a, 
.uk-pagination>li>span {
    box-sizing: border-box;
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 12px 0 14px;
    text-align: center;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    color: var(--cp-base-04);
    transition: all .3s ease-out .2s;
}
.uk-pagination>li:hover>a {
    background-color: #CCCCCC;
}
.uk-pagination>li>span.abbr {
    border: none;
}
.uk-pagination>li.uk-active>span {
    color: white;
    border: 1px solid var(--cp-base-04);
    background-color: var(--cp-base-04);
}
:has(> .uk-pagination-previous) {
    margin-right: 20px;
    padding-top: 9px!important;
}
:has(> .uk-pagination-next) {
    margin-left: 20px;
    padding-top: 9px!important;
}
@media (max-width: 959px) {
    .uk-pagination {transform: scale(.72);}
    :has(> .uk-pagination-previous) {
        margin-right: 10px;
    }
    :has(> .uk-pagination-next) {
        margin-left: 10px;
    }
}


/* 事業内容 */
.heading-marker {
    display: inline; 
    font-family: var(--font-jp-01); 
    color: var(--cp-base-01); 
    line-height: 1.8;
    background: linear-gradient(transparent 50%, var(--cp-base-03) 0%); 
    padding-bottom: .3em; 
}
.clip-svg {
    width: 0; 
    height: 0;
}
.clip-img {
    width: 100%;
    background-size: cover;
}
.clip-shadow {
    filter: drop-shadow(5px 10px 0 var(--cp-base-03));
}

.add-icon-business01,
.add-icon-business02 {
    position: relative;
    padding-right: 50px;
}
.add-icon-business01::before,
.add-icon-business02::before {
    content: '';
    display: block;
    position: absolute;
    background-size: contain;
}
.add-icon-business01::before {
    background-image: url(../img/asset/icon_qa01.png);
    width: 80px;
    height: 67px;
    left: -80px;
    top: 0;
}
.add-icon-business02::before {
    background-image: url(../img/asset/icon_bldg.png);
    width: 80px;
    height: 50px;
    right: -30px;
    bottom: -50px;
}
@media (max-width: 1359px) {
    .add-icon-business01::before {
        left: 0;
    }
}
@media (min-width: 1080px) {
    .add-icon-business01 {
        padding-top: 80px;
    }
}
@media (max-width: 1079px) and (min-width: 960px) {
    .add-icon-business01 {
        padding-top: 20px;
    }
    .add-icon-business01::before {
        top: -60px;
    }
}
@media (max-width: 959px) {
    .add-icon-business01,
    .add-icon-business02 {
        padding-right: 0;
    }
    .add-icon-business01 {
        padding-top: 80px;
    }
    .add-icon-business01::before {
        top: 0;
    }
    .add-icon-business02::before {
        right: 0;
        bottom: -60px;
    }
}


/* 店舗検索 */
.canvas-pharmacy-main, 
.canvas-pharmacy-sub {
    width: 100%;
    aspect-ratio: 3 / 2;
}
.business-hour .uk-table-divider>:not(:first-child)>tr, .uk-table-divider>tr:not(:first-child) {
    border-top: 1px solid var(--cp-base-01);
}
.uk-list-bullet>.list-zaitaku::before {
    left: -30px;
    width: 20px;
    height: 1.5em;
    margin-bottom: -1.5em;
    background-image: url(../img/asset/icon_list-zaitaku.png);
    background-size: contain;
}
.uk-list-bullet>.list-herbtea::before {
    left: -30px;
    width: 25px;
    height: 1.5em;
    margin-bottom: -1.5em;
    background-image: url(../img/asset/icon_list-herbtea.png);
    background-size: contain;
}
.uk-list-bullet>.list-creditcard::before {
    left: -30px;
    width: 25px;
    height: 1.5em;
    margin-bottom: -1.5em;
    background-image: url(../img/asset/icon_list-creditcard.png);
    background-size: contain;
}
.uk-list-bullet>.list-paypay::before {
    left: -30px;
    width: 25px;
    height: 1.5em;
    margin-bottom: -1.5em;
    background-image: url(../img/asset/icon_list-paypay.png);
    background-size: contain;
}
.uk-list-bullet>.list-parking::before {
    left: -30px;
    width: 25px;
    height: 1.5em;
    margin-bottom: -1.5em;
    background-image: url(../img/asset/icon_list-parking.png);
    background-size: contain;
}
.uk-list-bullet>.list-barrierfree::before {
    left: -30px;
    width: 25px;
    height: 1.5em;
    margin-bottom: -1.5em;
    background-image: url(../img/asset/icon_list-barrierfree.png);
    background-size: contain;
}


/* よくある質問と回答 */
.qa li {
    border-bottom: rgba(75,46,28,.2) 1px solid;
}
.qa .accordion-title, 
.qa .uk-accordion-title, 
.qa .uk-accordion-content {
    position: relative;
    padding: 20px 20px 20px 60px;
    transition: all .3s;
}
.qa .uk-accordion-content {
    margin-top: 0;
}
.qa .heading-answer {
    position: relative;
}
.qa .uk-accordion-title:hover {
    background: var(--cp-etc-04);
}
.qa .uk-accordion-title::after,
.qa .uk-accordion-content::after, 
.qa .uk-accordion-content::before {
    content: '';
    display: block;
    position: absolute;
    background-size: contain;
}
.qa .uk-accordion-title::after {
    background-image: url(../img/asset/icon_Q.png);
    width: 19px;
    height: 30px;
    left: 25.5px;
    top: 18px;
}
.qa .uk-accordion-content::after {
    background-image: url(../img/asset/icon_A.png);
    width: 30px;
    height: 35px;
    left: 20px;
    top: 16px;
}
.qa .uk-accordion-content::before {
    width: calc(100% - 40px);
    height: 1px;
    background-color: var(--cp-base-01);
    left: 20px;
    top: 0;
}


/* 汎用 */
@media (max-width: 639px) {
    .auto-scale {transform: scale(.75);}
    .auto-scale-xs {transform: scale(.65);}
}

@media (max-width: 1539px) {
    .uk-navbar-center:not(:only-child) {
        left: calc(((100vw - 295px - 406.25px) / 2) + 295px);
    }
}

@media (max-width: 1279px) {
    .uk-visible\@1280 {display: none!important;}
    .mr0_1280 {margin-right: 0!important;}
}
@media (min-width: 1280px) {
    .uk-hidden\@1280 {display: none!important;}
}

.cardlink {
    position: relative;
}
.cardlink .news-category {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    background-color: white;
    margin: 0;
    padding: 5px;
    border-radius: 0 0 4px 0;
    font-size: .8rem;
}
.topics-category {
    display: inline-block;
    background-color: var(--cp-base-03);
    margin: 10px 0 0;
    padding: 5px 20px;
    border-radius: 4px;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.uk-lightbox {background: rgba(0, 0, 0, .8);}
.uk-lightbox-iframe {background: white;}

/* CSSアニメーション */
.anim-txt-typing {
    width: calc(12em + 5px);    /*文字の長さ*/
    border-right: 5px solid white;    /*点滅バー*/
    overflow: hidden;    /*必須*/
    white-space: nowrap;    /*必須*/
    animation: typing 3s steps(12), blink .4s step-end infinite alternate;    /*アニメーション関連*/
}
@keyframes typing {
    from {width: 0;}
}
@keyframes blink {
    /*点滅風に見せる*/
    50% {border-color: transparent;}
}

.anim-slidein-l2r{
    animation-name: slideInL2R;
    animation-duration: 2s;
    animation-delay: var(--anim-arg);
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes slideInL2R {
    0% {
        opacity: 0;/*初期状態では透明に*/
        transform: translateX(-50vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-slidein-r2l{
    animation-name: slideInR2L;
    animation-duration: 2s;
    animation-delay: var(--anim-arg);
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes slideInR2L {
    0% {
        opacity: 0;/*初期状態では透明に*/
        transform: translateX(50vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-fadeup {
    opacity: 0;
    transform: translateY(20px);
    transition: all .5s ease-out;
}
.anim-fadeup.toggled {
    opacity: 1;
    transform: translateY(0);
}

.anim-fadein{
    /* animation: 3s ease-in 1s infinite reverse both running slidein; */
    animation: 3s cubic-bezier(0.33, 1, 0.68, 1) forwards fadeIn;
    opacity: 0;
    animation-delay: var(--anim-arg);
}
@keyframes fadeIn {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll {
    display: inline-block;
    padding-top: 70px;
    position: relative;
    color: white;
}
.scroll::before {
    animation: scroll 3.5s infinite;
    border: solid white;
    border-width: 0 0 2px 2px;
    content: "";
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: rotate(-45deg);
    width: 20px;
    height: 20px;
}
@keyframes scroll {
    0% {
        transform: rotate(-45deg) translate(0, 0);
    }
    80% {
        transform: rotate(-45deg) translate(-30px, 30px);
    }
    0%, 80%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

.anim-scrollin {
    width: 1px;
    opacity: 0;
    overflow: hidden;
    animation: scrollIn 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--anim-arg);
}
@keyframes scrollIn {
    60% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

.text-container {
    overflow: hidden;
    white-space: nowrap;
}
.text-line {
    color: #fff;
    font-size: 2rem;
    opacity: 0;
    width: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}