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

/* CSS変数定義 */
:root {
    /* カラーパレット Orange Natural */
    /* ベース色 */
    --cp-base-01: rgb(246,195,117);
    /* 基本色 */
    --cp-base-02: rgb(197,222,202);
    --cp-base-03: rgb(116,125,120);
    --cp-base-04: rgb(252,239,207);
    /* 定番色 */
    --cp-stap-01: rgb(190,155,79);
    --cp-stap-02: rgb(233,223,213);
    --cp-stap-03: rgb(183,182,173);
    --cp-stap-04: rgb(0,0,0);
    /* 補色 */
    --cp-comp-01: rgb(188,209,194);
    --cp-comp-02: rgb(195,229,235);
    --cp-comp-03: rgb(205,181,198);
    --cp-comp-04: rgb(139,165,181);
    /* 同系色 */
    --cp-simi-01: rgb(248,226,139);
    --cp-simi-02: rgb(235,157,123);
    --cp-simi-03: rgb(242,176,74);
    --cp-simi-04: rgb(0,0,0);
    /* その他 */
    --cp-etc-01: rgb(102,102,102);
    --cp-etc-02: rgb(109,107,91);
    --cp-etc-03: rgb(221,221,221);
    --cp-etc-04: rgb(0,0,0);
    
    /* フォント */
    --fn-jp-01: 'Noto Sans JP';
    --fn-jp-02: 'Klee One';
    --fn-en-01: 'Aboreto';
    --fn-en-02: 'Covered By Your Grace';
    --fn-en-03: 'Fugaz One';
    --fn-en-04: 'Pattaya';
    --fn-en-05: 'Poiret One';
    --fn-en-06: 'Splash';
    --fn-en-07: 'Damion';
    --fn-en-08: 'La Belle Aurore';
}

html {
    font-family: var(--fn-jp-01);
}
.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: #1e87f0!important;}
.font-uk-default {color: var(--cp-etc-01);}

.font-jp-01 {font-family: var(--fn-jp-01), sans-serif!important;}
.font-jp-02 {font-family: var(--fn-jp-02), sans-serif!important;}
.font-en-01 {font-family: var(--fn-en-01), sans-serif!important;}
.font-en-02 {font-family: var(--fn-en-02), sans-serif!important;}
.font-en-03 {font-family: var(--fn-en-03), sans-serif!important;}
.font-en-04 {font-family: var(--fn-en-04), sans-serif!important;}
.font-en-05 {font-family: var(--fn-en-05), sans-serif!important;}
.font-en-06 {font-family: var(--fn-en-06), sans-serif!important;}
.font-en-07 {font-family: var(--fn-en-07), sans-serif!important;}
.font-en-08 {font-family: var(--fn-en-08), 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-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;}

/* 汎用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-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-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-stripe {
    background: url("../img/stripebg_03.png");
    background-size: cover!important;
}
.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);}

.bg-paper {
    background-image: url(../img/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}

.bg-history {
    background: linear-gradient(90deg, rgba(255,255,255,1) 35%, rgba(246,195,117,.5)),url(../img/photos/IMG_7249.jpg);
    background-size: cover;
    background-position: 60% 40%;
}

/* 汎用ボックス */
.linedBox {
    border-left: 1px solid var(--cp-etc-03);
    padding-left: 40px;
    margin-left: 40px;
}

/* ローディングアニメーション */
.loading {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: white;
}
.loading.hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s;
}
.loading .circle {
    display: block;
    position: absolute;
    top: calc( 50% - 15vw );
    left: calc( 50% - 15vw );
    width: 30vw;
    height: 30vw;
    margin: 0 auto;
    border: 4px solid var(--cp-base-03);
    border-top: 3px solid var(--cp-base-01);
    border-radius: 15vw;
    animation: loading 1000ms linear 0ms infinite normal both;
}
.loading .logomark {
    display: block;
    position: relative;
    top: calc( 50% - 5vw );
    width: 10vw;
    height: 10vw;
    margin: 0 auto;
}
@keyframes loading {
    0% { transform: rotate( 0deg ); }
    100% { transform: rotate( 360deg ); }
}

/* メインナビゲーション */
#mainnav {
    border-bottom: 1px var(--cp-base-01) solid;
    height: 80px;
}
.logo .uk-flex {
    min-width: 264px;
}
@media (max-width: 639px) {
    .logo .uk-flex {
        min-width: 184px;
    }
}
.logo .logomark {
    width: 40px;
    margin: 0;
}
.logo .logotype {
    width: 184px;
    margin: 0;
}
.logo .uk-text-xsmall {
    display: none;
}
.scroll2view #mainnav {
    height: 160px;
    transition: all 0.3s;
}
.scroll2view .logo .logomark {
    width: 80px;
    transition: all 0.3s;
}
.scroll2view .logo .uk-text-xsmall {
    display: block;
    transition: all 0.3s;
}

.uk-navbar-center ul>li>a {
	position: relative;
}
.uk-navbar-center ul>li>a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #646464;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .3s;
}
.uk-navbar-center ul>li>a:hover::after {
	transform-origin: left top;
	transform: scale(1, 1);
}

.uk-navbar-dropdown {
    border-left: 5px var(--cp-base-01) solid;
}
.tel {
    min-height: 60px;
}
.tel>p.subsc {
    color: var(--cp-etc-01);
    font-size: .72rem;
}

/* サイドナビゲーション */
#sidenav {
    position: fixed;
    left: 0;
    top: 0;
    width: 270px;
    height: 100vh;
    transform: translateX(-230px);
    transition: all 0.3s;
    box-shadow: 0 0 5px 3px rgba(0,0,0,0.4);
    color: var(--cp-base-03);
}
#sidenav:hover {
    transform: translateX(0px);
}
.uk-offcanvas-bar {
    box-shadow: 0 0 5px 3px rgba(0,0,0,0.4);
    padding: 0;
    color: var(--cp-base-03);
}
.fnav-head {
    width: 40px; 
    writing-mode: vertical-rl;
}
.fnav-body {
    width: 230px;
    border-right: 2px var(--cp-stap-02) dashed;
}
.fnav-body .uk-nav-default>li a {
    color: var(--cp-base-03);
}
.fnav-body .uk-nav-default>li>a {
    display: inline!important;
}
.fnav-body .uk-nav-default>li:hover>a,
.fnav-body .uk-nav-default>li>a.uk-open,
.uk-accordion-content>ul>li:hover>a {
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    background: var(--cp-comp-04);
    transition: all 0.1s ease-out;
}
.uk-accordion>:nth-child(n+2) {
    margin-top: 15px;
    margin-bottom: 15px;
}
.fnav-body .uk-nav-default>li>a.uk-accordion-title {
    font-size: .875rem;
}
.uk-nav-divider {
    border-top-color: var(--cp-stap-02)!important;
}

/* リンク・ボタンなど */
.cardlink a {
    display: block;
    background: white;
    color: var(--cp-etc-01)!important;
    position: relative;
    text-decoration: none;
    transition: all .3s;
}
.cardlink a:hover {
    opacity: 0.7;
}
.cardlink a::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/bg_line_black.png") repeat;
    background-size: 4px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transition: transform .3s, -webkit-transform .3s;
}
.cardlink a:hover::before {
    transform: translate(5px, 5px);
}

a.seemore {
    display: block;
    background: white;
    position: relative;
    padding: 6px 20px 4px;
    text-decoration: none;
    font-family: var(--fn-en-03), sans-serif;
    color: var(--cp-comp-04);
    border: var(--cp-comp-04) 1px solid;
    transition: all .2s;
}
a.seemore:hover {
    opacity: .95;
    background: var(--cp-comp-04);
    color: white;
}
a.seemore::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/bg_line_black.png") repeat;
    background-size: 4px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transition: all .2s;
}
a.seemore:hover::after {
    transform: translate(5px, 5px);
}

.makercard > .uk-card-media-right {
    background-size: cover!important; 
    background-position: 50% 50%!important;
}
.makercard > .uk-width-2-3 > .uk-card-footer > .uk-text-small {
    display: block;
    min-height: 42px;
}

/* ページトップへ戻るボタン */
.scroll2view #page_top {
    display: none;
}
#page_top {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    margin-bottom: 10px;
}
#page_top a {
    width: 60px;
    height: 60px;
    text-decoration: none;
}
#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f139';
    font-size: 50px;
    color: var(--cp-comp-04);
}
#page_top:hover {
    opacity: 1;
}

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


/* フッター */
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;
}

/* トピックス */
.topicsside {
    width: 320px;
}

.midhead {
    box-sizing: border-box;
    width: 100%;
    padding: 5px 10px;
    color: var(--cp-base-03)!important;
    background: var(--cp-base-04);
}

.inp-date>select {
    text-transform: none;
    border: 0 none;
    padding: 0 10px 3px;
    margin-right: 5px;
    background: #fff;
    color: #666;
    border: 1px solid #e5e5e5;
    transition: .2s ease-in-out;
    transition-property: color,background-color,border;
}
.inp-date>select:not([multiple]):not([size]) {
    height: 40px;
    vertical-align: middle;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 20px;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

.uk-datepicker {
    width: auto;
}
.uk-datepicker-nav {
    margin-bottom: 15px;
    text-align: center;
    line-height: 20px;
}
.uk-datepicker-nav:after,
.uk-datepicker-nav:before {
    content: "";
    display: table;
}
.uk-datepicker-nav:after {
    clear: both;
}
.uk-datepicker-nav a {
    color: var(--cp-etc-01);
    text-decoration: none;
}
.uk-datepicker-nav a:hover {
    color: #1e87f0;
}
.uk-datepicker-previous {
    float: left;
    margin-left: 12px;
}
.uk-datepicker-next {
    float: right;
    margin-right: 12px;
}
.uk-datepicker-table {
    width: 100%;
}
.uk-datepicker-table td,
.uk-datepicker-table th {
    padding: 2px;
}
.uk-datepicker-table th {
    font-size: 12px;
}
.uk-datepicker-table span {
    display: block;
    width: 26px;
    line-height: 24px;
    text-align: center;
    color: var(--cp-etc-01);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background-origin: border-box;
}
.uk-datepicker-table span a {
    color: #1e87f0;
    text-decoration: none;
}
.uk-datepicker-table span:focus,
.uk-datepicker-table span:hover,
.uk-datepicker-table span:active {
    background-color: var(--cp-base-04);
    outline: 0;
    border-color: rgba(0,0,0,.1);
    border-bottom-color: rgba(0,0,0,.2);
    cursor: pointer;
}
.uk-datepicker-table span.uk-active {
    background: var(--cp-comp-02);
    border:1px solid rgba(0,0,0,.1);
    border-bottom-color:rgba(0,0,0,.2);
}
.uk-datepicker-table span.uk-active a,
.uk-datepicker-table span.uk-active strong,
.uk-datepicker-table span.uk-active {
    background: var(--cp-comp-02);
    color: var(--cp-base-03);
}