/**
 *  Reset
 ****************************/
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
/**
 *  Edit Ui Kit
 ****************************/
/* text */
.uk-text-white {
    color: white !important;
}
.uk-text-large.item-price {
    line-height: 1.3;
}
/* background */
.uk-background-white {
    background-color: #fff;
}
.uk-background-transparent {
    background-color: transparent !important;
}
/* height */
.uk-height-xlarge {
    height: 550px;
}
/* form */
.uk-search-middle .uk-search-input {
    height: 60px;
    font-size: 1.5rem;
}
/* padding */
.uk-padding-large-left {
    padding-left: 30px;
}
.uk-padding-large-right {
    padding-right: 30px;
}
.uk-padding-large-bottom {
    padding-bottom: 30px;
}
.uk-padding-large-top {
    padding-top: 30px;
}
.uk-padding-small-left {
    padding-left: 15px;
}
.uk-padding-small-right {
    padding-right: 15px;
}
.uk-padding-small-bottom {
    padding-bottom: 15px;
}
.uk-padding-small-top {
    padding-top: 15px;
}
/* button */
.uk-button {
    border-radius: 5px;
}
.uk-button-primary {
    background-color: #1ebcf0;
    border-radius: 5px;
}
.uk-button-primary:not(.uk-button-disabled) {
    background-color: #17a0ce;
    color: #fff;
}
.uk-button-primary:active:not(.uk-button-disabled) {
    background-color: #105d76;
}
.uk-button-primary:hover:not(.uk-button-disabled) {
    background-color: #107a9e;
}
.uk-button-default.uk-button-success {
    border-color: #81a981;
}
.uk-button-default.uk-button-white {
    border-color: #ffffff;
}
.uk-button-default.uk-button-gray {
    border-color: #6f6f6f !important;
    color: #6f6f6f !important;
}
.uk-button-default.uk-button-gray:hover {
    border-color: #333333 !important;
    color: #333333 !important;
    background-color: rgba(0, 0, 0, .2);
}
.uk-button-warning {
    background-color: #f0891e;
    color: #fff;
    border: 1px solid transparent;
}
.uk-button-warning:hover {
    background-color: #e5860f;
    color: #fff;
}
/* table */
.uk-table th {
    vertical-align: top !important;
}
.uk-table tfoot {
    font-size: 16px;
}
/* border */
.uk-border {
    border: 1px solid;    
}
/* button */
.custom-button {
    padding: 15px 0;
    text-align: center;
    width: 100%;
}
.custom-button-primary {
    border-top: 3px solid #1e87f0;
}
.custom-button-primary:hover {
    background-color: #d8eafc;
    border-color: #1e87f0;
}
.custom-button-success {
    border-top: 3px solid #32d296;
}
.custom-button-success:hover {
    background-color: #edfbf6;
    border-color: #32d296;
}
.custom-button-warning {
    border-top: 3px solid #faa05a;
}
.custom-button-warning:hover {
    background-color: #fff6ee;
    border-color: #faa05a;
}
.custom-button-danger {
    border-top: 3px solid #f0506e;
}
.custom-button-danger:hover {
    background-color: #fef4f6;
    border-color: #f0506e;
}
/* alert */
.alert {
    width: 500px;
    max-width: 80%;
    z-index: 9999;
    margin: auto;
    margin-bottom: 15px;
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
}
/* uk-icon */
.uk-button .uk-icon {
    position: relative;
    top: -3px;
    margin-right: 5px;
}
.hr-section {
    border-top: 1px solid #1ebcf0;
}
/**
 *  Common
 ****************************/
html {
    font-family: a-otf-jun-pro, sans-serif, "游明朝体",YuMincho,"游明朝","YuMincho","Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","ＭＳ 明朝", serif;
}
h1, h2, h3, h4, h5, h6, span, p {
    font-family: a-otf-jun-pro, sans-serif, 游明朝体, YuMincho, 游明朝, YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
}
p {
    font-size: 16px;
    line-height: 35px;
}
a.link-border {
    padding: 10px;
    border: 1px solid;
    background-color: white;
    text-decoration: none;
    cursor: pointer;
    transition: .2s background-color linear;
}
a.link-border:hover {
    background-color: #dcefff;
    transition: .2s background-color linear;
}
.about-img {
    width: 500px;
    max-width: 100%;
}
.item-info {
    background-color: rgba(255,255,255,.6);
}
.heading-border {
    width: 70px;
    height: 3px;
    background-color: #ccc;
    display: block;
    margin-bottom: 10px;
}
.company-profile-block {
    background-image: url(../img/cosmo-logo-parts2.png);
    background-size: 95%;
    background-repeat: no-repeat;
}
.section-head {
    margin-bottom: 50px;
}
.section-head h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    margin-bottom: 0;
}
.section-head p {
    margin-top: 0;
}
.gradation-box {
    padding: 15px 0;
}
.gradation1 {
    /* background-image: linear-gradient(90deg, rgba(168, 202, 240, 1), rgba(233, 240, 250, 1)); */
    background-image: linear-gradient(to right, #16cbeb, #9400ab);
}
.sns-block {
    width: 100%;
    border-radius: 15px;
}
/**
 *  Main Content
 ****************************/
#main {

}
.item-box:hover {
    box-shadow: 2px 2px 2px #aaaaaa, -1px -1px 1px #eeeeee;
    transition: .2s box-shadow linear;
    background-color: #fff;
}
.item-box a {
    color: #666;
}
.item-box .item-description {
    max-height: 42px;
    overflow: hidden;
}
/**
 *  Item Detail
 ****************************/
.repair-plans li.checked {
    background-color: rgba(30, 135, 240, 0.1);
    border-color: #8ca7c1;
}
/**
 *  Header
 ****************************/
header {
    position: absolute;
    width: 100%;
}
.header {
    position: relative;
    z-index: 1020;
}
.header.uk-sticky-fixed {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.7);
}
.header.uk-sticky-fixed .uk-text-white {
    color: #666 !important;
}
.header.uk-sticky-fixed .register-button {
    color: #fff !important;
}
.header .uk-navbar {
    min-height: 80px;
}
.header.uk-sticky-fixed .uk-navbar {
    min-height: 50px;
}
.header .header-nav {
    margin-right: 5px;
}
.header .header-nav:last-child {
    margin-right: 0;
}
.uk-navbar .header-link svg {
    width: 25px;
}
.uk-logo img {
    height: 45px;
    width: 100%;
}
.uk-navbar-item,
.uk-navbar-nav>li>a,
.uk-navbar-toggle {
    min-height: initial;
    font-size: 16px;
    color: #333;
    min-height: 40px;
    padding: 0 20px;
}
.uk-search-navbar .uk-search-input {
    height: 25px;
}
.header .login-button {
    border-color: #fff;
    color: #fff;
    margin-left: 15px;
}
a.login-button {
    color: #fff;
    font-size: .875rem !important;
}
.header .login-button:hover,
.header .login-button:active, 
.header .login-button:focus {
    background-color: rgba(255,255,255,.1);
    color: #fff;
}
.header.uk-sticky-fixed .login-button {
    border-color: #6f6f6f;
}
#sticky-header.uk-navbar-sticky {
    margin: 63px 0 !important;
    z-index: 1020;
}
#sticky-header.uk-navbar-sticky .uk-padding-small {
    padding: 5px;
}
#sticky-header.uk-navbar-sticky img {
    height: 25px;
}
#sticky-header.uk-navbar-sticky .uk-scrollspy-inview {
    padding: 0;
}
#sticky-header.uk-navbar-sticky li {
    padding: 0;
}
#sticky-header.uk-navbar-sticky .uk-background-default {
    background-color: rgba(255,255,255,.95);
}
#sticky-header.uk-tab .uk-active>a {
    background-color: rgb(30, 135, 240,.1);
    border-width: 2px;
}
#sticky-header.uk-tab a:hover {
    background-color: rgb(30, 135, 240,.05);
    border-width: 2px;
    border-color: rgb(30, 135, 240,.5);
}
#sticky-header.uk-tab .uk-active>a:hover {
    border-width: 2px;
    border-color: #1e87f0;
}
.circle-button {
    position: relative;
    height: 40px;
    width: 150px;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    line-height: 2.5em;
}
.transparent-button {
    font-family: 'Montserrat', sans-serif;
    background-color: transparent;
    color: white;
    border: 1px solid white;
}
.transparent-button:hover {
    color: white;
    background-color: #ffffff33;
}
/* Login Button */
.login-button {
    position: relative;
    height: 40px;
    width: 150px;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    /* box-shadow: 0 4px 12px 0 rgb(152 160 180); */
}
.login-button:hover {
    color: #fff !important;
}
.fill-one {
    position: absolute;
    background-image: linear-gradient(to right, #16cbeb, #9400ab);
    height: 70px;
    width: 250px;
    border-radius: 5px;
    margin: 0 0 0 -20px;
    z-index: -1;
    transition: all 0.4s ease;
}
.login-button:hover .fill-one {
    -webkit-transform: translateX(50px);
    -moz-transform: translateX(50px);
    transform: translateX(50px);
}
@-webkit-keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
@-moz-keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
.uk-search-navbar .uk-search-input {
    font-size: 20px;
}
/* UK LIST */
.uk-list.uk-divider-top-bottom li:nth-child(1) {
    border-top: 1px solid #e5e5e5;
}
.uk-list.uk-divider-top-bottom li:nth-last-child(1) {
    border-bottom: 1px solid #e5e5e5;
}
/**
 *  Index
 ****************************/
.top-content h4 {
    margin-bottom: 30px;
    font-size: 16px;
    color: #16aae4;
    text-align: center;
}
.top-content h2 {
    filter: drop-shadow(2px 4px 6px skyblue) drop-shadow(2px 4px 6px skyblue);
}
.top-content p {
    color: #327893;
    font-size: 28px;
    margin-top: 50px;
    line-height: 2;
    letter-spacing: 2px;
}
.top-content img {
    height: 70px;
}
.top-circle svg {
    display: block;
    margin: auto;
    width: 200px;
    height: 200px;
    animation: spin 60s linear infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* NEWS */
.news-block {

}
.news-block p {
    display: inline-block;
    width: 25%;
}
.news-block .date {
    font-family: 'Montserrat', sans-serif;
}
.news-block .event {
    font-family: 'Montserrat', sans-serif;
    margin-left: 20px;
}
.news-block .news-title {
    display: inline-block;
    width: 50%;
    font-size: 20px;
}
/* SNS */
.flowbtn2 {
    font-family: 'Courier', sans-serif;
    /* 好きなフォントに変えてね */
    border-radius: 4px;
    display: inline-block;
    width: 66px;
    height: 58px;
    font-size: 30px;
    transition: .5s;
    text-decoration: none;
}

.flowbtn2 i {
    position: relative;
    bottom: 5px;
}

/* ボタンマウスホバー時のテキスト指定 */
.flowbtn2:hover {
    color: #fff !important;
    text-decoration: none;
}

/* Twitter */
.flowbtn2.fl_tw2 {
    border: solid 1px #55acee;
    color: #55acee;
}

/* Twitterマウスホバー時 */
.flowbtn2.fl_tw2:hover {
    border: solid 1px #55acee;
    background: #55acee;
}
/* LINE */
.flowbtn2.fl_li2 {
    border: solid 1px #00c300;
    color: #00c300;
}

/* LINEマウスホバー時 */
.flowbtn2.fl_li2:hover {
    border: solid 1px #00c300;
    background: #00c300;
}

/* Instagram */
.flowbtn2.insta_btn2 {
    border: solid 1px #c6529a;
    color: #c6529a;
}

/* Instagramマウスホバー時 */
.flowbtn2.insta_btn2:hover {
    border: solid 1px #c6529a;
    background: #c6529a;
}
/* ボタン内テキスト調整 */
.flowbtn2 div {
    font-size: 11px;
    letter-spacing: 0;
    font-weight: bold;
    position: relative;
    bottom: 22px;
}

/* ulタグの内側余白を０にする */
ul.snsbtniti {
    padding: 0 !important;
}

/* ボタンの位置 */
.snsbtniti {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

/* ボタン同士の余白 */
.snsbtniti li {
    flex: 0 0 33%;
    text-align: center !important;
}
/**
 *  Body
 ****************************/
.topics-block {
    background-color: rgba(0,0,0,.02);
}
.uk-tab img {
    height: 50px;
    opacity: .5;
    transition: .2s opacity linear;
}
.uk-tab a:hover img {
    opacity: .8;
    transition: .2s opacity linear;
}
.uk-tab .uk-active img {
    opacity: 1;
    transition: .2s opacity linear;
}
.example-block {
    position: relative;
    box-shadow: 0 0 0 white;
    top: 0;
    transition: .2s all linear;
}
.example-block:hover {
    box-shadow: 0 30px 20px -20px #aaa;
    top: -20px;
    transition: .2s all linear;
}
.sample-block img {
    box-shadow: 0px 1px 1px #eee;
}
.sample-block .nav-brand img {
    box-shadow: none;
    height: 100px;
    box-shadow: none;
    border: 2px solid #1e2c5b;
    padding: 0 10px;
    border-radius: 5px;
    background-color: white;
    transition: .2s box-shadow linear;
}
.sample-block .nav-brand:hover img {
    box-shadow: 0 30px 30px -15px #6d6d6daa;
    transition: .2s box-shadow linear;
}

i.arrow-icon {
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
  }
  20% {
    -webkit-transform: translate(0px, 10px);
  }
  40% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0px, 10px);
  }
  40% {
    transform: translate(0, 0);
  }
}
/**
 *  Footer
 ****************************/
.service-bottom a.uk-button:hover {
    background-color: rgba(255,255,255,.1);
}
.footer {
    background-color: #f5f5f7;
    color: #666;
}
/**
 *  Home Beauty
 ****************************/
.home-beauty img {
    margin-top: 100px;
    width: 600px;
    border-radius: 5px;
    filter: drop-shadow(40px 40px 0px #c6bf64);
}
.home-beauty img:last-child {
    margin-bottom: 100px;
}
.home-beauty>div:nth-child(1) img {
    filter: drop-shadow(40px 40px 0px #c6bf64);
}
.home-beauty>div:nth-child(1) h3 {
    color: #c6bf64;
}
.home-beauty>div:nth-child(2) img {
    filter: drop-shadow(40px 40px 0px #c664c2);
}
.home-beauty>div:nth-child(2) h3 {
    color: #c664c2;
}
.home-beauty>div:nth-child(3) img {
    filter: drop-shadow(40px 40px 0px #64c690);
}
.home-beauty>div:nth-child(3) h3 {
    color: #64c690;
}
.home-beauty h3 {
    font-size: 50px;
}
.home-beauty h3 span {
    color: #dddddd;
    font-weight: bold;
}
 /**
 *  Slider
 ****************************/
.uk-slider-items img {
    width: 100%;
}
.uk-slideshow-items > * {
    border: 1px solid #e5e5e5;
}
/**
 *  Cart
 ****************************/
.cart-table td {
    vertical-align: middle !important;
}
.order-box {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fafafa;
    margin-bottom: 30px;
}
.is-sold {
    background-color: rgba(240, 80, 110,.1) !important;
}

/**
 *  Media Query
 ****************************/
/* 大ディスプレイ */
@media screen 
	and (min-width: 1200px) {
        /* margin */
        .uk-margin-large-right\@m {
            margin-right: 30px !important;
        }
        .uk-margin-large-left\@m {
            margin-left: 30px !important;
        }
        .uk-margin-large-top\@m {
            margin-top: 30px !important;
        }
        .uk-margin-large-bottom\@m {
            margin-bottom: 30px !important;
        }
        /* padding */
        .uk-padding-large-right\@m {
            padding-right: 30px !important;
        }
        .uk-padding-large-left\@m {
            padding-left: 30px !important;
        }
        .uk-padding-large-top\@m {
            padding-top: 30px !important;
        }
        .uk-padding-large-bottom\@m {
            padding-bottom: 30px !important;
        }
}
/* 小ディスプレイ */
@media screen 
	and (max-width: 1024px) {
        
}
/* タブレット（Landscape） */
@media screen 
	and (min-width:769px) 
	and (max-width:1024px) {

}
/* タブレット（Portrait） */
@media screen 
	and (min-width:736px)
	and (max-width:768px) {
	
}
/* タブレット（Portrait） + スマートフォン */
@media screen 
	and (max-width:768px) {
    
    .example-block:hover {
        margin-top: 0;
        box-shadow: 0 0 0 transparent;
        transition: .2s all linear;
    }
}
/* スマートフォン */
@media screen 
	and (max-width:736px) {
	.uk-logo img {
        height: 40px;
        width: auto;
    }
    .text-small\@s {
        font-size: .875rem;
    }
    #sticky-header li .uk-padding-small {
        padding: 5px;
    }
    #sticky-header li {
        padding: 0;
    }
    #sticky-header li:first-child {
        margin-left: 15px;
    }
    #sticky-header li img {
        height: 25px;
    }
    #sticky-header.uk-navbar-sticky {
        margin: 60px 0 !important;
        z-index: 1020;
    }
    #sticky-header.uk-navbar-sticky li:first-child {
        margin-left: 0;
    }
    /* cart */
    .user-nav-block {
        padding-left: 15px;
    }
    .user-nav-block .uk-grid-margin {
        margin-top: 10px;
    }
    .user-nav-block .uk-width-1-2 {
        padding-left: 15px;
    }
    .user-nav-block .custom-button {
        padding: 20px 0;
    }
    .user-nav-block h3 {
        font-size: 1rem;
    }
    .user-nav-block i.uk-icon {
        margin: 0;
    }
    .user-nav-block svg {
        width: 20px;
    }
    /* login button */
    .header-block {
        padding: 0 10px !important;
    }
    .login-button, .register-button {
        font-size: 12px !important;
    }
    /**
     *  Index
     ****************************/
    /* News */
    .news-block .news-title {
        width: 70%;
    }
}
/* スマートフォン */
@media screen
	and (max-width:320px) {
	
}