/**
 *  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;
}
/**
 *  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: 50px;
    font-size: 1rem;
}
/* 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-primary {
    background-color: #113255;
}
.uk-button-primary:hover {
    background-color: #1e4773;
}
.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;
}
/* border */
.uk-border {
    border: 1px solid;    
}
/* button */
.custom-button {
    padding: 40px 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: 999;
    margin: auto;
    margin-bottom: 15px;
}
/* uk-icon */
.uk-button .uk-icon {
    position: relative;
    top: -3px;
    margin-right: 5px;
}
/* checkbox */
input[type="checkbox"].form-control {
    display: none;
}
.label-button {
    padding: 2px 10px;
    border: 1px solid #e4e7ea;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 0;
}
input.form-control[type="checkbox"]:checked+.label-button {
    border-color: #20a8d8;
    background-color: #20a8d8;
    color: white;
}
/* variation-block */
.variation-block > div {
    margin-bottom: 10px;
}
.variation-block h5 {
    margin-bottom: 10px;
}
.variation-block input[type="radio"] {
    /* display: none; バリデーションが表示されない */
    position: absolute;
    bottom: 0;
    z-index: -1;
}
.variation-block label {
    border: 1px solid;
    border-radius: 5px;
    display: inline-block;
    line-height: 2.5;
    margin-right:10px;
    margin-bottom: 10px;
    min-width:42px;
    height: 42px;
    text-align: center;
    background-color: white;
    position: relative;
    padding: 0 10px;
}
.variation-block .active-label {
    border-color: #8ca7c1;
    background-color: #e8f3fd;
}
/**
 *  Common
 ****************************/
html {
    font-family: "游明朝体",YuMincho,"游明朝","YuMincho","Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","ＭＳ 明朝", serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 游明朝体, 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;
}
/**
 *  Main Content
 ****************************/
.item-box:hover {
    box-shadow: 0 0 30px #efefef;
    transition: .2s box-shadow linear;
}
.item-box a {
    color: #666;
}
.item-box > a:first-child {
    height: 204.67px;
    display: block;
    position: relative;
}
.item-box > a:first-child > img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
/**
 *  Item Detail
 ****************************/
.repair-plans li.checked {
    background-color: rgba(30, 135, 240, 0.1);
    border-color: #8ca7c1;
}
/**
 *  Header
 ****************************/
.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: 60px;
}
.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: auto;
}
.uk-navbar-item,
.uk-navbar-nav>li>a,
.uk-navbar-toggle {
    min-height: initial;
    padding: 0 15px;
    /* line-height: 30px; */
}
.uk-search-navbar .uk-search-input {
    height: 25px;
}
.header .login-button {
    border-color: #fff;
    color: #fff;
}
.header .login-button:hover {
    border-color: #fff;
    background-color: rgba(255,255,255,.1);
}
.header.uk-sticky-fixed .login-button {
    border-color: #6f6f6f;
    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;
}
/**
 *  Body
 ****************************/
.top-block {
    height: 450px;
    margin-top: -60px;
    overflow: hidden;
}
.top-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.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;
}
 /**
 *  Slider
 ****************************/
.uk-slider-items img {
    width: 100%;
}
.uk-slideshow-items > * {
    background-color: #eee;
}
/**
 *  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) {
    .top-block {
        height: 450px;
        margin-top: -60px;
        overflow: hidden;
    }
    .top-bg-video {
        height: 400px;
        max-width: unset;
    }
	.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;
    }
}
/* スマートフォン */
@media screen
	and (max-width:320px) {
	
}