@charset "UTF-8";
/* BT4クラス・上書きCSS
============================*/
body{
    color: #625B52;
    background-color: #F4F3EF!important;
    font-family: 'Kosugi Maru', sans-serif;
}
a {
    color: #625B52;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
main {
    margin-top: 60px;
    margin-bottom: 45px;
}
.tab-content main {
    margin-top: 0;
}

@media(max-width:420px){
    .h3, h3 {
        font-size: 1.25rem;
    }
    .h5, h5 {
        font-size: .9rem;
    }
    .small, small {
        font-size: 65%;
        font-weight: 400;
    }
}
@media(max-width:320px){
    .h5, h5 {
        font-size: .65rem;
    }
    .small, small {
        font-size: 45%;
        font-weight: 400;
    }
}
.fixed-top {
    min-height: 45px;
}
.bg-light {
    background-color: #F4F3EF!important;
}
.bg-dark {
    background-color: #573D1A!important;
    color: #fff;
}
.text-secondary {
    color: #9B958D !important;
}
.alert-secondary {
    color: #625B52;
    background-color: #fff;
    border-color: #9B958D;
}
input[type="text"]:focus, button[type="submit"]:focus {
  outline: 0;
  border-color: rgba(0,0,0,0);
}

.carousel-indicators {
    bottom: -30px;
}
.carousel-indicators li {
    background-color: #9B958D;
}
.carousel-indicators li.active {
    background-color: #625B52;
}

.card {
    border-top: 1px solid rgba(255,255,255,.7);
    border-right: 1px solid rgba(0,0,0,.05);
    border-bottom: 1px solid rgba(0,0,0,.05);
    border-left: 1px solid rgba(255,255,255,.7);
    background: #573C1A/*(155,149,141,.285)*/;
}
.card:hover,#home .card:focus {
    border: 1px solid rgba(255,255,255,.7);
    background: rgba(149,126,104,1)/*(155,149,141,.285)*/;
}
.card a {
    color: #fff;
}

.page-link {
    position: relative;
    display: block;
    padding: .35rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #9B958D;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,1);
}
.btn-secondary {
    color: #fff !important;
    background-color: #573C1A;
    border-color: #573C1A;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #625B52;
    border-color: #625B52;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #573C1A;
    background-color: rgba(149,126,104,.285);
    border-color: #856404 #856404 #dee2e6 #856404;
}
.nav-tabs {
    border-bottom: 1px solid #856404;
}

@media(min-width: 769px){
    .progress {
        margin-top: 50px;
    }
}

/* 独自CSS
============================*/
#loginsite {
    width: 100vw;
    height: 100vh;
    outline: none;
    border: none;
}

#index-nav .col-4 {
    margin-right: 0;
    margin-left: 0;
    padding-right: 10px;
    padding-left: 10px;
}
#index-nav .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem .1rem .5rem .3rem;
}
#index-nav .card-body p, #index-nav .card-body small {
    line-height: 1.3;
    margin-bottom: 0;
}
#index-nav .card .icon {
    width: 30px;
    height: 30px;
    float: left;
    color: #F4F3EF;
    margin-top: 3px;
}
#index-nav .card h5 {
    min-height: 36px;
    margin-left: 34px;
}
#index-nav .card p {
    margin-top: 8px;
}

.list-area > article > .row {
    margin-right: 0;
    margin-left: 0;
}
.list-area > article > .row .col-3, .list-area > article > .row .col-9,
.list-area > article > .row .col-md-3, .list-area > article > .row .col-md-9 {
    padding-right: 5px;
    padding-left: 5px;
}
.list-area p {
    margin-bottom: .1rem;
}
.list-area .h2, .list-area h2, .list-area-inner .h2, .list-area-inner h2 {
    font-size: 1rem;
    margin-bottom: .2rem;
}
.list-area .item-image-thumbnail img, .list-area-inner .item-image-thumbnail img  {
    max-width: 100%;
    height: 150px;
    object-fit: cover;
}
@media(max-width: 992px){
    .list-area .item-image-thumbnail img, .list-area-inner .item-image-thumbnail img {
        height: 120px;
    }
}
@media(max-width: 440px){
    .list-area .item-image-thumbnail img, .list-area-inner .item-image-thumbnail img {
        height: 70px;
        max-width: 70px;
    }
}
.list-area hr, .list-area-inner hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.list-area > article .btn-sm {
    padding: .15rem .25rem;
    font-size: .675rem;
    line-height: 1.5;
    border-radius: .75rem;
}
.list-area .btn-outline-secondary {
    color: #9B958D !important;
    background-color: transparent;
    background-image: none;
    border-color: #9B958D;
}
.list-area .btn-outline-secondary:hover, .list-area .btn-outline-secondary:active,
.list-area .btn-outline-secondary:focus, .btn-outline-secondary.disabled:focus, .btn-outline-secondary[disabled]:focus {
    color: #fff !important;
    background-color: #9B958D;
    background-image: none;
    border-color: #9B958D;
}

#registration .registration-item-del {
    position: absolute;
    right: 5px;
    margin-top: 22px;
    color: #9B958D;
}
#registration .registration-item-del:hover {
    cursor: pointer;
}

.order-item:after {
    display: block;
    float: right;
    position: relative;
    top: -75px;
    right: 0;
    width: 10px;
    height: 20px;
    content: ">";
    color: #9B958D;
}

label p {
    margin-bottom: 0;
}

#frame {
    outline: none;
    border: none;
    padding-top: 30px;
    background: #fff;
    height: calc(100vh - 50px);
}

figure.col-4 {
    padding-right: 5px;
    padding-left: 5px;
}

.list-area-image img {
    width: 100%;
    height: 85px;
    object-fit: cover;
}
@media(min-width: 992px){
    .list-area-image img {
        height: 185px;
    }
}

/* ヘッダ・フッタメニュー
============================*/
#top-menu .zdo_drawer_menu svg.feather {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	margin-top: -3px;
}
#top-menu button, #btm-menu a, #btm-menu input {
	color: #625B52;
}
#top-menu.bg-dark button, #btm-menu.bg-dark a, #btm-menu input {
    color: #fff;
}
#btm-menu {
	padding-left: 1rem;
	padding-right: 1rem;
}
#btm-menu .navbar {
    padding: 0 0;
}
#btm-menu button {
    border-color: rgba(216, 216, 216,0) rgba(209, 209, 209,0) rgba(186, 186, 186,0);
    border-style: solid;
    border-width: 0px;
    padding: 0 0 0;
    background: rgba(0,0,0,0);
    color: #625B52;
}
#btm-menu ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: .5rem 0;
}
#btm-menu #btm-item-area {
	display: block;
    width: 40vw;
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
#btm-menu #btm-item-area.hidden {
    display: none;
    width: 0;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
#btm-menu #btm-item-area-open {
	display: block;
    width: 10vw;
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
#btm-menu #btm-item-area-open.hidden {
    display: none;
    width: 0;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
#btm-menu #input-message-area {
    min-width: 50vw;
}
#btm-menu #btm_input_massage {
	border-top: 0 solid rgba(0,0,0,0);
	border-right: 0 solid rgba(0,0,0,0);
	border-bottom: 1px solid rgba(0,0,0,.3);
	border-left: 0 solid rgba(0,0,0,0);
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    width: 30vw;
    background: rgba(255,255,255,0);
    border-radius: 0;
}
#btm-menu #btm-message-window {
	width: 100%;
	max-height: 130px;
	overflow-y: scroll;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: .5rem;
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
#btm-menu #btm-message-window.row {
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}
#btm-menu #btm-message-window p {
    display: inline-block;
}
#btm-menu #btm-message-window p.small {
	font-size: 8px;
	line-height: 1.2 !important;
}
#btm-menu #btm-message-window .alert {
    position: relative;
    padding: .25rem .75rem;
    margin-bottom: .5rem;
    border: 1px solid transparent;
    border-radius: 1rem;
}
#btm-menu #btm-message-window .col-1, #btm-menu #btm-message-window .col-11 {
	padding-right: 2px;
	padding-left: 2px;
}
@media(max-width:320px){
    #btm-menu #btm-item-area {
        width: 50vw;
    }
    #btm-menu #btm-item-area-open {
        width: 5vw;
    }
    #btm-menu #btm_input_massage {
        width: 27vw;
    }
}
#btm-menu #btm_input_massage.vw60 {
    margin-right: 40px;
}
#btm-menu #btm-send-massage.abs-bl {
    position: absolute;
    right: 5px;
    bottom: 5px;
}


/* 強制系
============================*/
.hidden {
    display: none;
}
.vw50 { width: 50vw !important; }.vw60 { width: 60vw !important; }.vw70 { width: 70vw !important; }.vw80 { width: 80vw !important; }.vw90 { width: 90vw !important; }.vw100 { width: 100vw !important; }

@media(max-width: 767px){
    .pc {
        display: none;
    }
}
@media(min-width: 768px){
    .sp {
        display: none;
    }
}

/* 強制マージン
==============================*/
.mt10{ margin-top: 10px; }.mt20{ margin-top: 20px; }.mt30{ margin-top: 30px; }.mt40{ margin-top: 40px; }.mt50{ margin-top: 50px; }
.mb10{ margin-bottom: 10px; }.mb20{ margin-bottom: 20px; }.mb30{ margin-bottom: 30px; }.mb40{ margin-bottom: 40px; }.mb50{ margin-bottom: 50px; }
.ml10{ margin-left: 10px; }.ml20{ margin-left: 20px; }.ml30{ margin-left: 30px; }.ml40{ margin-left: 40px; }.ml50{ margin-left: 50px; }
.mr10{ margin-right: 10px; }.mr20{ margin-right: 20px; }.mr30{ margin-right: 30px; }.mr40{ margin-right: 40px; }.mr50{ margin-right: 50px; }
.pt10{ padding-top: 10px; }.pt20{ padding-top: 20px; }.pt30{ padding-top: 30px; }.pt40{ padding-top: 40px; }.pt50{ padding-top: 50px; }
.pb10{ padding-bottom: 10px; }.pb20{ padding-bottom: 20px; }.pb30{ padding-bottom: 30px; }.pb40{ padding-bottom: 40px; }.pb50{ padding-bottom: 50px; }
.pl10{ padding-left: 10px; }.pl20{ padding-left: 20px; }.pl30{ padding-left: 30px; }.pl40{ padding-left: 40px; }.pl50{ padding-left: 50px; }
.pr10{ padding-right: 10px; }.pr20{ padding-right: 20px; }.pr30{ padding-right: 30px; }.pr40{ padding-right: 40px; }.pr50{ padding-right: 50px; }