@charset "utf-8";

/* フォント */
body {
    font-family: "KaiTi", "Helvetica Neue", "Segoe UI", cursive, fangsong, serif;
    font-size: 1.2rem;
}


/* PCで表示 */
@media only screen and (min-width : 768px) {
    /* ページ全体のスタイル */
    .body-style {
        width: 90%;
    }

    p, strong {
        font-size: 1.1em;
    }

    /* ホバー操作でドロップダウンを表示 */
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    /* 縦書き */
    .top-vertical {
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
}

/* TOPページ・ギャラリー縦書き文字 */
.top-gallery-vertical {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: left;
    left: 5%;
    top:15%;
    position: absolute;
    font-size: 1rem;
}
@media only screen and (min-width : 768px) {
    .top-gallery-vertical {
        font-size: 3vw;
    }
}


/* ヘッダー半透明 */
.navbar {
    background-color: rgba(255, 255, 255, 0.9);
}


/* スマホ用メニューボタン */
.rounded-circle {
    padding: 0.5rem;
    background-color: #e84545;
    color: white;
}

/* カテゴリボタン女装 */
.category-button-1 {
    color: #fff;
    background-color: #FB637E;
    border-color: #FB637E;
}
a:hover.category-button-1 {
    color: #fff;
}


/* カテゴリボタン男装 */
.category-button-2 {
    color: #fff;
    background-color: #418FDE;
    border-color: #418FDE;
}
a:hover.category-button-2 {
    color: #fff;
}


/* カテゴリボタン童装 */
.category-button-3 {
    color: #fff;
    background-color: #A1D884;
    border-color: #A1D884;
}
a:hover.category-button-3 {
    color: #fff;
}


/* カテゴリボタン家居 */
.category-button-4 {
    color: #fff;
    background-color: #B8860B;
    border-color: #B8860B;
}
a:hover.category-button-4 {
    color: #fff;
}


/* 商品囲み */
.product-well {
    border-color: #F08080;
    background-color: #F6EBEA;
    border-width: 2px;
    padding: 1rem;
    margin: 1rem;
    border-radius: 20px;
}
.product-well .card-body {
    padding: 1rem;
}


/* 文字囲み */
.rounded {
    border-radius: 1rem !important;
    border-color: #C0C0C0 !important;
    border-width: 2px !important;
}


/* フッターボーダー */
.footer-border {
    width: 70%;
    border: 1px dashed #D3D3D3;
}


/* リンク */
a {
    color: #2d3033;
}
a:hover {
    color: gray;
    text-decoration: none;
}


/* ラインナップテキスト */
.line-up {
    color: #E9967A;
}

/* 戻るボタン */
.back-button {
    background-color: #E9967A;
    color: #fff;
    font-size: 1.3rem;
}
a:hover.back-button {
    color: #fff;
}


/* ドロップダウンメニュー */
.dropdown-menu {
    margin: 0;
    border-radius: 0;
    border: 0;
    opacity: 0.8;
}
a.dropdown-item + a.dropdown-item {
    border-top: 1px dotted #000;
}
div.dropdown + div.dropdown {
    border-left: 1px dotted #000;
}
.btn-link, button:hover.btn-link {
    color: #000 !important;
    font-size: 1rem;
    text-decoration: none;
}
@media only screen and (max-width : 480px) {
    div.dropdown + div.dropdown {
        border-left: hidden;
    }
}
.dropdown-item:active {
    background-color: lightgray;
}

/* ハンバーガーアイコンの色 */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* ギャラリー */
.carousel-indicators{
    list-style: none;
}
.carousel-indicators li, .carousel-indicators li.active{
    background-color: #fff;
    position: relative;
    margin: 10px;
    width: 50px;
}
.carousel-indicators li.active img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
}
.carousel-indicators img{
    position: absolute;
    top: 0;
    left: 0;
}
.image-fit {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

/* 画像遅延読み込み */
.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 400ms;
}