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

/* ▼上部ナビゲーションバーと本文が重ならないようにする */
body { padding-top: 70px; }


/* カラム高さ調整 */
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

.jumbotron { background:url(../img/o_db-main.jpg); 
background-position: left center;
no-repeat; background-size: cover;}


.jumbotron h1{
	background: rgba(255,255,255,0.5);
	padding: 0.5rem;
	color: #320000;
	text-align: right;
	font-weight: bold;
}

h2 {
	font-weight: bold;
	position: relative;
	padding: 10px;
	background: #D7C8B5;
	color: #320000;
	margin-bottom: 30px;
}
h2:before{
    content: " ";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent;
    border-right-color: #C6B198;
}
h2:after{
    content: " ";
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: transparent;
    border-top-color: #C6B198;
}


section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.top2 {
	margin-top: 2rem;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-bottom: 3rem;
}



footer{
	background: #9F8139;
	color: #FFF;
}


section a:hover img
{
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
background: #fff;
}






.back
    {
    position: fixed;
    bottom: 16px;
    right: 16px;
    }
 
.back a
    {
    display: block;
    text-decoration: none;
    }
 
.back:hover
{
    opacity: 0.85 ;
}

/*================================================
 *  見出し　 768px未満設定あり
 ================================================*/
 

@media screen and (max-width:768px) {
	
h1,
.h1 {
  font-size: 30px;
}
h2,
.h2 {
  font-size: 24px;
}
h3,
.h3 {
  font-size: 18px;
}
h4,
.h4 {
  font-size: 14px;
}
h5,
.h5 {
  font-size: 12px;
}


}





/*================================================
 *  ヘッダーナビ　 768px未満別設定あり
 ================================================*/
 
.navbar-kato {
  background-color: #9F8139;
  border-color: #FFF;
}

.navbar-kato .navbar-nav > li > a {
  color: #FFF;
}
.navbar-kato .navbar-nav > li > a:hover,
.navbar-kato .navbar-nav > li > a:focus {
  color: #FFF;
background-color:#320000;
}
.navbar-kato .navbar-nav > .active > a,
.navbar-kato .navbar-nav > .active > a:hover,
.navbar-kato .navbar-nav > .active > a:focus {
  color: #FFF;
  background-color: #320000;
}


.navbar-kato .navbar-toggle {
  border-color: #FFF;
}

.navbar-kato .navbar-toggle .icon-bar {
  color: #320000;
  background-color: #FFF;
}

.navbar-kato .navbar-nav > .open > a,
.navbar-kato .navbar-nav > .open > a:hover,
.navbar-kato .navbar-nav > .open > a:focus {
  color: #9F8139;
  background-color: #FFF;
}


.dropdown-menu > li > a {
  color: #9F8139;
  text-decoration: none;
  background-color: #FFF;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #FFF;
  text-decoration: none;
  background-color: #320000;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #320000;
  outline: 0;
}

@media screen and (max-width:768px) {
	
.navbar-kato {
  background-color: #FFF;
  border-color: #9F8139;
}

.navbar-kato .navbar-nav > li > a {
  color: #9F8139;
}

.navbar-kato .navbar-toggle {
  border-color: #9F8139;
}

.navbar-kato .navbar-toggle .icon-bar {
  color: #FFF;
  background-color: #9F8139;
}
	
}


/*================================================
 *  ボタン設定
 ================================================*/

.btn-kato {
	color: #9F8139;
	background-color: #FFF;
	border-color: #9F8139;
	margin-bottom: 0px;
}
.btn-kato:hover,
.btn-kato:focus,
.btn-kato.focus,
.btn-kato:active,
.btn-kato.active,
.open > .dropdown-toggle.btn-kato {
  color: #FFF;
  background-color: #9F8139;
  border-color: #9F8139;
}
.btn-kato:active,
.btn-kato.active,
.open > .dropdown-toggle.btn-kato {
  background-image: none;
}
.btn-kato.disabled,
.btn-kato[disabled],
fieldset[disabled] .btn-kato,
.btn-kato.disabled:hover,
.btn-kato[disabled]:hover,
fieldset[disabled] .btn-kato:hover,
.btn-kato.disabled:focus,
.btn-kato[disabled]:focus,
fieldset[disabled] .btn-kato:focus,
.btn-kato.disabled.focus,
.btn-kato[disabled].focus,
fieldset[disabled] .btn-kato.focus,
.btn-kato.disabled:active,
.btn-kato[disabled]:active,
fieldset[disabled] .btn-kato:active,
.btn-kato.disabled.active,
.btn-kato[disabled].active,
fieldset[disabled] .btn-kato.active {
  background-color: #fff;
  border-color: #ccc;
}
.btn-kato .badge {
  color: #fff;
  background-color: #333;
}


/*================================================
 *  フローチャート設定
 ================================================*/
 
 .flowchart-box {
	background-image: url(../img/o_db-flowchart-bg.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom: 20px;
	margin-bottom: 50px!important;
}

 
.flowchart-step {
	-webkit-border-radius: 25px 25px 25px 25px;
	-moz-border-radius: 25px 25px 25px 25px;
	border-radius: 25px 25px 25px 25px;
	width: 50px ;
	height: 50px ;
	color: #9F8139;
	background-color: #FFFFFF;
	border: 3px solid #9F8139;
	font-size: 34px;
	text-align: center ;
}

.flowchart-text h4 {
	color: #9F8139;
	font-size: 28px;
}

.flowchart-attention{
	color: #990000;
	border-top: 2px dotted #990000;
}

.flowchart-fix {
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	color: #FFFFFF;
	background-color: #9F8139;
	font-size: 28px;
	text-align: center;
	padding: 20px 50px;
}


/*================================================
 *  QAアコーディオン
 ================================================*/
.accordion dt	{
	border-bottom: 1px solid #ccc;
	background: #fff;
	cursor : pointer;
	padding-top: 10px;
	padding-bottom: 10px;
}

.accordion dt:hover	{
	border-bottom: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
}

.accordion dd	{
	line-height: 1.5em;
	border-bottom: 1px solid #ccc;
	background: #eee;
	padding-top: 10px;
	padding-bottom: 10px;
}

.accordion dt:first-child	{
	border-top: 1px solid #ccc;
}

/*================================================
 *  珈琲豆一覧
 ================================================*/
 
#bean-standard h2 {
	font-weight: bold;
	position: relative;
	padding: 10px;
	background: #A56B27;
	color: #FFF;
	margin-bottom: 30px;
}
#bean-standard h2:before{
    content: " ";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent;
    border-right-color: #7D531E;
}
#bean-standard h2:after{
    content: " ";
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: transparent;
    border-top-color: #7D531E;
}

#bean-premium h2 {
	font-weight: bold;
	position: relative;
	padding: 10px;
	background: #A5A09B;
	color: #FFF;
	margin-bottom: 30px;
}
#bean-premium h2:before{
    content: " ";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent;
    border-right-color: #8B857E;
}
#bean-premium h2:after{
    content: " ";
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: transparent;
    border-top-color: #8B857E;
}

#bean-deluxe h2 {
	font-weight: bold;
	position: relative;
	padding: 10px;
	background: #C6B198;
	color: #FFF;
	margin-bottom: 30px;
}
#bean-deluxe h2:before{
    content: " ";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent;
    border-right-color: #B39775;
}
#bean-deluxe h2:after{
    content: " ";
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: transparent;
    border-top-color: #B39775;
}

#bean-standard h3,
#bean-premium h3,
#bean-deluxe h3{
	color: #320000;
	font-size: 18px;
	font-weight: bold;
}

#bean-standard th,
#bean-premium th,
#bean-deluxe th{
    width: 16%;
}

.roast1{
	background: #F5A81C;
	color: #FFF;
	width: 20%;
}

.roast2{
	background: #C48013;
	color: #FFF;
	width: 20%;
}

.roast3{
	background: #9C5D0E;
	color: #FFF;
	width: 20%;
}

.roast4{
	background: #733B08;
	color: #FFF;
	width: 20%;
}

.roast5{
	background: #431300;
	color: #FFF;
	width: 20%;
}

/*================================================
 *  価格表
 ================================================*/
 
#price th,
#price td{
	vertical-align: middle;
	font-size: 18px;
}

#price .order-bt{
	vertical-align: middle;
	text-align: right;
}

#price .order-price{
	color: #990000;
	text-align: right;
}