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

/* CSS変数定義 */
:root {
    /* カラーパレット Blue Busuness */
    /* ベース色 */
    --cp-base-01: rgb(191,211,214);
    /* 基本色 */
    --cp-base-02: rgb(112,162,172);
    --cp-base-03: rgb(239,226,221);
    --cp-base-04: rgb(149,163,172);
    /* 定番色 */
    --cp-stap-01: rgb(199,196,131);
    --cp-stap-02: rgb(254,236,216);
    --cp-stap-03: rgb(149,176,190);
    --cp-stap-04: rgb(0,0,0);
    /* 補色 */
    --cp-comp-01: rgb(242,161,166);
    --cp-comp-02: rgb(246,182,149);
    --cp-comp-03: rgb(250,220,224);
    --cp-comp-04: rgb(255,246,143);
    /* 同系色 */
    --cp-simi-01: rgb(190,178,215);
    --cp-simi-02: rgb(144,205,178);
    --cp-simi-03: rgb(142,203,208);
    --cp-simi-04: rgb(0,0,0);
    /* その他 */
    --cp-etc-01: rgb(51,51,51);
    --cp-etc-02: rgb(102,102,102);
    --cp-etc-03: rgb(109,107,91);
    --cp-etc-04: rgb(221,221,221); /*#e5e5e5*/
    
    --cp-uk-link: #1e87f0;

    /* グラデーション */
    --cp-grad-01: var(--cp-base-01) 0%, rgb(112,154,140) 100%;
    
    /* フォント */
    --fn-jp-01: 'Zen Maru Gothic';
}

html {
    font-family: var(--fn-jp-01), sans-serif;
    background: var(--cp-base-02);
}
.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(--fn-jp-01), sans-serif;
}

/* 汎用書体クラス */
.font-uklink {color: var(--cp-uk-link)!important;}

.font-jp-01 {font-family: var(--fn-jp-01), sans-serif!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-staple-01 {color: var(--cp-stap-01)!important;}
.font-staple-02 {color: var(--cp-stap-02)!important;}
.font-staple-03 {color: var(--cp-stap-03)!important;}
.font-staple-04 {color: var(--cp-stap-04)!important;}
.font-complement-01 {color: var(--cp-comp-01)!important;}
.font-complement-02 {color: var(--cp-comp-02)!important;}
.font-complement-03 {color: var(--cp-comp-03)!important;}
.font-complement-04 {color: var(--cp-comp-04)!important;}
.font-similar-01 {color: var(--cp-simi-01)!important;}
.font-similar-02 {color: var(--cp-simi-02)!important;}
.font-similar-03 {color: var(--cp-simi-03)!important;}
.font-similar-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-staple-01 {background: var(--cp-stap-01)!important;}
.bg-staple-02 {background: var(--cp-stap-02)!important;}
.bg-staple-03 {background: var(--cp-stap-03)!important;}
.bg-staple-04 {background: var(--cp-stap-04)!important;}
.bg-complement-01 {background: var(--cp-comp-01)!important;}
.bg-complement-02 {background: var(--cp-comp-02)!important;}
.bg-complement-03 {background: var(--cp-comp-03)!important;}
.bg-complement-04 {background: var(--cp-comp-04)!important;}
.bg-similar-01 {background: var(--cp-simi-01)!important;}
.bg-similar-02 {background: var(--cp-simi-02)!important;}
.bg-similar-03 {background: var(--cp-simi-03)!important;}
.bg-similar-04 {background: var(--cp-simi-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-dot-green {
    background: url("../img/bg_dot.png")!important;
    background-size: 4px!important;
}
.bg-transparent {background: rgba(34,34,34,.3)!important;}
.bg-transparent-black {background: rgba(0,0,0,.5)!important;}
.bg-transparent-white {background: rgba(255,255,255,.85)!important;}

.bg-base-gradient-h {
    background: linear-gradient(90deg, var(--cp-grad-01))!important;
}
.bg-base-gradient-v {
    background: linear-gradient(180deg, var(--cp-grad-01))!important;
}

.border-b-green {border-bottom: solid var(--cp-base-01) 5px;}

.uk-heading-bullet::before {
    border-left: calc(5px + .1em) solid var(--cp-base-01);
    transition: all .1s ease-out;
}
a:hover .uk-heading-bullet::before {
    border-left: calc(5px + .1em) solid white;
}

/* .font-header {color: white!important;}
.font-change .font-header {color: var(--cp-etc-02)!important;}
.logo-blue {display: none;}
.logo-white {display: block;}
.font-change .logo-blue {display: block;}
.font-change .logo-white {display: none;} */

.font-header {color: var(--cp-etc-02)!important;}
.logo-white {display: none;}

.uk-divider-small::after {
    border-top-color: white!important;
}

/* メインナビゲーション */
header {
    /* box-shadow: 0 0 5px 3px rgba(0,0,0,0.4); */
}
.uk-navbar-nav>li>a {
    padding-top: 29px;
    font-size: 0.9rem;
    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 {
    color: white!important;
    transition: all .3s ease-out;
}

.uk-navbar-center ul>li>a {
	position: relative;
}
.uk-navbar-center ul>li>a::before {
	position: absolute;
    z-index: -1;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--cp-base-01);
	transform: scale(1, 0);
	transform-origin: left bottom;
	transition: transform .3s;
}
.uk-navbar-center ul>li>a:hover::before {
	transform-origin: left bottom;
	transform: scale(1, 1);
}

/* ヒーローヘッダー */
#hero-header {
    z-index: -1;
}

/* サイドナビゲーション */
.uk-offcanvas-bar {
    box-shadow: 0 0 5px 3px rgba(0,0,0,0.4);
    padding: 0;
    color: var(--cp-base-01);
    /* width: 100vw; */
}

.uk-offcanvas-bar .uk-nav-default>li>a {
    color: white;
    font-weight: bold;
}
.uk-offcanvas-bar .uk-nav-default>li:hover>a,
.uk-offcanvas-bar .uk-nav-default>li>a.uk-open,
.uk-accordion-content>ul>li:hover>a {
    padding-left: 5px;
    padding-right: 5px;
    color: var(--cp-base-02);
    font-weight: bold;
    background: white;
    transition: all 0.1s ease-out;
}
.uk-accordion>:nth-child(n+2) {
    margin-top: 15px;
    margin-bottom: 15px;
}
.uk-offcanvas-bar .uk-nav-default>li>a.uk-accordion-title {
    font-size: .875rem;
}

.uk-nav-divider {
    border-top-color: var(--cp-etc-04)!important;
}

/* リンク・ボタンなど */


/* ページトップへ戻るボタン */
.scroll2view .btn-pagetop {
    display: none;
}
.btn-pagetop {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 0;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    margin: 0 10px 10px 0;
}
@media (max-width: 639px) {
    .btn-pagetop {
        margin: 0 10px 55px 0!important;
    }
}
.btn-pagetop i {
    font-size: 150%;
    line-height: 60px;
    -webkit-transition: all .3s;
    transition: all .3s;
    letter-spacing: 0;
}
.btn-pagetop:hover i {
    line-height: 55px;
}

.bottom-banner {
    width: 100%;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 50;
}

#floatnav {
    position: fixed;
    right: 0;
    top: calc(50vh - 126px / 2);
    margin: 0;
}
#floatnav .floaticon {
    font-size: 1.25rem;
    line-height: 1.2;
    color: white;
    font-weight: bold;
    text-align: center;
    margin: 0 5px;
    max-width: 48px;
}
#floatnav .floatnav-btn-wide {
    width: auto;
    margin-left:auto;
    transform: translateX(calc(249.47px - 70px));
    transition: all .3s;
}
#floatnav .floatnav-btn-wide:hover {
    transform: translateX(0);
}
#floatnav .floatnav-btn-wide > span > div {
    background-color: var(--cp-simi-02);
    border-radius: 10px 0 0 10px;
    transition: all .3s;
}
#floatnav .floatnav-btn-wide:hover > span > div {
    background-color: #51a57c;
}
#floatnav .floatnav-btn-wide .floaticon {
    padding-left: 14px;
    padding-right: 2px;
}
#floatnav .floatnav-btn-short {
    width: 70px;
    margin-left:auto
}
#floatnav .floatnav-btn-short > a > div {
    background-color: var(--cp-comp-02);
    border-radius: 10px 0 0 10px;
    transition: all .3s;
}
#floatnav .floatnav-btn-short:hover > a > div {
    background-color: #ed8257;
}

.uk-accordion-title.uk-card-header {
    transition: all .2s;
}

.uk-accordion-title.uk-card-header:hover {
    background-color: var(--cp-comp-04);
}

.breadcrumb {
    text-align: center;
}
.uk-breadcrumb * {
    color: var(--cp-etc-01)!important;
}
.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
    content: ">";
    color: var(--cp-etc-01)!important;
}

/* フッター */
/* footer {
    border-top: 1px var(--cp-base-01) solid;
    margin-top: 40px;
} */
address {
    margin: 0;
    padding: 0;
	font-style: normal;
}
.copyright {
	font-size: 0.8em;
	text-align: center;
}

/* 汎用ボタン */
.btn, a.btn, button.btn {
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: .5rem 2rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
}

/* ページトップへ戻るボタン */
.scroll2view .btn-pagetop {
    display: none;
}
.btn-pagetop {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 0;
    background: white;
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    margin: 0 10px 10px 0;
}
.btn-pagetop i {
    font-size: 40px;
    line-height: 57px;
    -webkit-transition: all .3s;
    transition: all .3s;
    letter-spacing: 0;
    margin-right: 0;
}
.btn-pagetop:hover i {
    line-height: 52px;
}