@charset "utf-8";
/* CSS Document */
/* 目次 
1. リセット
2. 共通（レイアウト・その他・見出し・ボタン・ヘッダー・フッター・ぱんくず・TOP.newsお知らせ一覧共通)
3. TOP
4. 飲食事業
5. 会社概要
6. お知らせ
7. お問い合わせ
8. thanks 404　共通
9. 
10.
.
.
20.黒珍珠
*/

/*=================== TBここから ==================*/
@media screen and (min-width: 700px) {
/**************************************************
2. 共通（レイアウト・その他・見出し・ボタン・ヘッダー・フッター・ぱんくず・TOP.newsお知らせ一覧共通)
**************************************************/
/*------------------------------
レイアウト ※変更不可
------------------------------*/
.wraper {
  min-height: calc(100vh - 451px);
}
/*wrap共通*/
.wrap{
  margin: 0 auto;
  padding: 75px 0 0;
}
.pa-t20{
  padding-top: 50px;
}
/*------------------------------
見出し h1-h6 ※変更不可
------------------------------*/
h2 {
  font-size: 30px;
  font-size: 3.0rem;
}
h3 {
  font-size: 24px;
  font-size: 2.4rem;
}
h3.lead01 {
  display: inline-block;
  margin-bottom: 40px;
  padding: 20px 40px;
  font-size: 24px;
  font-size: 2.4rem;
}
h3.lead02 {
  font-size: 24px;
  font-size: 2.4rem;
}
/*------------------------------
フッター ※変更不可
------------------------------*/
/* sitemap */
#footer .sitemap ul li {
  width: auto;
  margin-right: 30px;
}

/*------------------------------
TOP.news・お知らせ一覧共通 ※変更不可
------------------------------*/
.news .news-box {
  padding: 0 0 40px;
}
.news .news-box dl{
  width: 100%;
  height:auto;
  padding: 20px;
  border-bottom: 1px solid #57b2e2;
}

/**************************************************
3. TOP
***************************************************/
/*------------------------------
catch
------------------------------*/
#top .catch{
  max-width: 500px;
  width: 80%;
  margin: 5% auto;
  padding: 8% 5% 8% 0;
}
/*------------------------------
NEWS
------------------------------*/
#top .news{
  padding-bottom: 70px;
}
#top .news h3.lead01{
  padding: 50px 40px 30px;
}
#top .news .btn-box{
  padding-right: 0;
}

/*------------------------------
content01
------------------------------*/
#top .content01 .inner:nth-of-type(odd) .img{
  width: 100%;
  padding: 0 0 150px 40%;
}
#top .content01 .inner:nth-of-type(odd) .text-box{
  width: 50%;
  min-height: 250px;
  padding: 20px 20px 70px;
  position: absolute;
  top: 25%;
  left: 0;
}
#top .content01 .inner:nth-of-type(even) .img{
  width: 100%;
  padding: 0 40% 150px 0;
}
#top .content01 .inner:nth-of-type(even) .text-box{
  width: 50%;
  min-height: 250px;
  padding: 20px 20px 70px;
  position: absolute;
  top: 25%;
  left: auto;
  right: 0;
}
#top .content01 .inner .text-box.btn-none{
  min-height: 200px;
  padding: 20px;
}
  
#top .content01 .inner .btn-box {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
/**************************************************
4. 飲食事業
***************************************************/
/*------------------------------
shop-box
------------------------------*/
#brand .shop-box .inner{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#brand .shop-box .add,
#brand .shop-box .map {
  width: 50%;
}
#brand .shop-box .add {
  padding-right: 10px;
}
#brand .shop-box .map iframe {
  width: 100%;
  height: 400px;
}
#brand .shop-box .shop-visual{
  max-width: 800px;
  width: 100%;
}

/**************************************************
5. 会社概要
***************************************************/
#company .table01 th {
  display: table-cell;
  width: 25%;
  padding: 20px;
  color: #0b74ac;
  font-weight: bold;
  text-align: right;
}
#company .table01 td {
  display: table-cell;
  width: 75%;
  padding: 20px;
}

/**************************************************
7. お問い合わせ
***************************************************/
/*------------------------------
mailform
------------------------------*/
#mailform .mailform-table{
  width: 100%;
}
#mailform .mailform-table th {
  display: table-cell;
  width: 25%;
  padding: 10px;
  color: #0b74ac;
  font-weight: bold;
  text-align: right;
}
#mailform .mailform-table td {
  display: table-cell;
  width: 75%;
  padding: 10px;
  text-align: left;
}



/**************************************************
20.黒珍珠
**************************************************/
/*------------------------------
blackpearl-header
------------------------------*/
  #blackpearl-header .bp-kv h1{
  font-size: 18px;
  font-size: 1.8rem;
}
/*------------------------------
blackpearl-footer
------------------------------*/
/* sitemap */
#blackpearl-footer .sitemap ul li {
  width: auto;
  margin-right: 30px;
}
/*------------------------------
concept
------------------------------*/
#blackpearl .concept .bp-title{
  position: absolute;
  top: -10%;
  width: 50%;
}
#blackpearl .concept .lead-box{
  width: 100%;
  padding-top: 140px;
  position: relative;
}
#blackpearl .concept .lead-box .img{
  padding: 0 0 140px 20%;
}
#blackpearl .concept .lead-box .img img{
  position: relative;
  z-index: 10;
}
#blackpearl .concept .lead-box .text{
  position: absolute;
  bottom: 0;
  width: 600px;
  padding: 300px 30px 30px 30px;
  background: #ffebe7;
}
/*------------------------------
committed
------------------------------*/
#blackpearl .committed .bp-lead01::after{
  margin: 5px auto 40px;
}
#blackpearl .committed .box01{
  width: 100%;
  height: auto;
  position: relative;
}
#blackpearl .committed .box01 .text01{
  width: 100%;
  height: auto;
  padding: 0 0 42% 40%;
}
#blackpearl .committed .box01 .text02{
  width: 100%;
  height: auto;
  padding: 0 0 40px 45%;
}
#blackpearl .committed .box01 .img01{
  width: 37%;
  height: auto;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}
#blackpearl .committed .box01 .img02{
  max-width: 450px;
  width: 50%;
  height: auto;
  margin: 0;
  position: absolute;
  top: 160px;
  left: 32%;
  z-index: 10;
}
#blackpearl .committed .box01 .img03{
  width: 37%;
  height: auto;
  margin: 0;
  position: absolute;
  bottom: 5%;
  left: 5%;
}
#blackpearl .committed .box02{
  width: 100%;
  height: auto;
  position: relative;
}
#blackpearl .committed .box02 .text03{
  width: 100%;
  height: auto;
  padding: 0 40% 40% 0;
}
#blackpearl .committed .box02 .img04{
  width: 37%;
  height: auto;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
}
#blackpearl .committed .box02 .img05{
  width: 50%;
  height: auto;
  margin: 0;
  position: absolute;
  bottom: 0;
  right: 35%;
}
/*------------------------------
menu
------------------------------*/
#blackpearl .menu .bp-lead02{
  width: 100%;
  height: 160px;
  line-height: 160px;
  font-size: 32px;
  font-size: 3.2rem;
}
/*osusume-box*/
#blackpearl .menu .osusume-box{
  width: 100%;
  height: 300px;
  margin: 200px 0 0;
  padding: 15px;
  background: #ffebe7;
}
#blackpearl .menu .osusume-box .box{
  width: 33.333333%;
  padding: 15px;
  float: left;
}
#blackpearl .menu .osusume-box .box:nth-of-type(1){
  position: relative;
  top: -170px;
}
#blackpearl .menu .osusume-box .box:nth-of-type(2){
  position: relative;
  top: -110px;
}
#blackpearl .menu .osusume-box .box:nth-of-type(3){
  position: relative;
  top: -50px;
}
/*menu-box*/
#blackpearl .menu .menu-box dl:nth-of-type(odd){
  max-width: 450px;
  width: 50%;
  padding: 5px 10px;;
  float: left;
}
#blackpearl .menu .menu-box dl:nth-of-type(even){
  max-width: 450px;
  width: 50%;
  padding: 5px 10px;;
  float: right;
}
/*------------------------------
shop
------------------------------*/
#blackpearl .shop .shop-box{
  height: 300px;
}
#blackpearl .shop .shop-box .bp-lead02{
  line-height: 250px;
  font-size: 34px;
  font-size: 3.4rem;
}
#blackpearl .shop .shop-box .btn-box{
  position: absolute;
  bottom: 30%;
}


}/*=================== TBここまで ==================*/



/*=================== PCここから==================*/
@media screen and (min-width: 1000px) {
/**************************************************
2. 共通（レイアウト・見出し・その他・table・header・footer・ハンバーガー・btn・戻るボタン)
**************************************************/
/*------------------------------
基本スタイル ※変更不可
------------------------------*/
.sp { display: none; }
.pc { display: block; }

/*------------------------------
レイアウト ※変更不可
------------------------------*/
.wraper {
  min-height: calc(100vh - 405px);
}
/*wrap共通*/
.wrap{
  margin: 0 auto;
  padding: 100px 0 0;
}
/*------------------------------
PCヘッダー、Gナビ共通 ※変更不可
------------------------------*/
#pc-header{
  display:block;
}
#pc-header {
  width: 100%;
  height: 70px;
  padding: 5px 0 15px;
  border-bottom: 5px solid #57b2e2;
}
#pc-header .logo {
  width: 180px;
  height: auto;
  float:left;
}
#pc-header .logo-img {
  width: 100%;
  height: auto;
}
#pc-header .logo-text {
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: normal;
  text-align: left;
  margin-left: 45px;
  color: #555;
}
  
/* gnav */
#pc-header .gnav{
  float: right;
  padding-top: 5px;
}
#pc-header .gnav li {
  width: auto;
  height: 46px;
  line-height: 46px;
  margin-left: 40px;
  float: left;
  position: relative;
}
#pc-header .gnav li:first-child{
  margin-left: 0px;
}
#pc-header .gnav li.line:after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 1px;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  background: #aaa;
  top: 0;
  bottom: 0;
  right: -29px;
  margin: auto;
}
#pc-header .gnav li a{
  color: #222;
  font-size: 15px;
  font-size: 1.5rem;
  text-decoration: none;
}
#pc-header .gnav li a:hover{
  color: #c79f62;
}
#pc-header .gnav li a img{
  vertical-align: middle;
}
/*------------------------------
フッター ※変更不可
------------------------------*/
/* logo */
#footer .logo{
  float: left;
}
#footer .logo-text {
  font-size: 11px;
  font-size: 1.1rem;
}
/* sitemap */
#footer .sitemap {
  float: right;
}
#footer .sitemap ul li {
  width: auto;
  margin: 0 0 0 30px;
}
/* bp-btn */
#footer .bp-btn {
  float: right;
}

/**************************************************
3. TOP
***************************************************/
/*------------------------------
catch
------------------------------*/
#top .catch{
  max-width: 800px;
  width: 80%;
  margin: 3% auto;
  padding: 8% 2% 8% 0;
}
/*------------------------------
content01
------------------------------*/
#top .content01 .inner:nth-of-type(odd) .img{
  width: 100%;
  padding: 0 0 160px 40%;
}
#top .content01 .inner:nth-of-type(odd) .text-box{
  width: 45%;
  min-height: 300px;
  padding: 40px 40px 100px;
  position: absolute;
  top: 30%;
  left: 0;
}
#top .content01 .inner:nth-of-type(even) .img{
  width: 100%;
  padding: 0 40% 160px 0;
}
#top .content01 .inner:nth-of-type(even) .text-box{
  width: 45%;
  min-height: 300px;
  padding: 40px 40px 100px;
  position: absolute;
  top: 30%;
  left: auto;
  right: 0;
}
#top .content01 .inner .text-box.btn-none{
  min-height: 200px;
  padding: 40px;
}
  
#top .content01 .inner .btn-box {
  position: absolute;
  bottom: 40px;
  right: 40px;
}
/**************************************************
4. 飲食事業
***************************************************/
/*------------------------------
shop-box
------------------------------*/
#brand .shop-box .add {
  width: 40%;
}
#brand .shop-box .map {
  width: 60%;
}
#brand .shop-box .slide-arrow{
  position: absolute;
  top: calc(50% - 20px);
  z-index: 10;
}
#brand .shop-box .prev-arrow{
  left: -50px;
  width: 40px;
  height:auto;
}
#brand .shop-box .next-arrow{
  right: -50px;
  width: 40px;
  height:auto;
}


/**************************************************
20.黒珍珠
**************************************************/
/*------------------------------
blackpearl-header
------------------------------*/
  #blackpearl-header .bp-kv h1{
  position: absolute;
  top: 5%;
  left: 28%;
}
/*------------------------------
blackpearl-footer
------------------------------*/
/* logo */
#blackpearl-footer .logo{
  float: left;
}
#blackpearl-footer .logo-text {
  font-size: 11px;
  font-size: 1.1rem;
}
/* sitemap */
#blackpearl-footer .sitemap {
  float: right;
}
#blackpearl-footer .sitemap ul li {
  width: auto;
  margin: 0 0 0 30px;
}
/* bp-btn */
#blackpearl-footer .bp-btn {
  float: right;
}
/*------------------------------
concept
------------------------------*/
#blackpearl .concept .bp-title{
  position: absolute;
  top: -7%;
  width: 35%;
}
#blackpearl .concept .lead-box .img{
  padding: 0 0 140px 25%;
}
#blackpearl .concept .lead-box .img img{
  position: relative;
  z-index: 10;
}
#blackpearl .concept .lead-box .text{
  position: absolute;
  bottom: 0;
  width: 650px;
  padding: 300px 40px 40px 40px;
  background: #ffebe7;
}
/*------------------------------
menu
------------------------------*/
/*osusume-box*/
#blackpearl .menu .osusume-box{
  margin: 260px 0 0;
  padding: 25px;
}
#blackpearl .menu .osusume-box .box{
  padding: 25px;
}

#blackpearl .menu .osusume-box .box:nth-of-type(1){
  position: relative;
  top: -240px;
}
#blackpearl .menu .osusume-box .box:nth-of-type(2){
  position: relative;
  top: -160px;
}

#blackpearl .menu .osusume-box .box:nth-of-type(3){
  position: relative;
  top: -80px;
}


}/*================== PC(min-width: 1000px)ここまで ==================*/

@media screen and (min-width: 1400px){
/**************************************************
20.黒珍珠
**************************************************/
#blackpearl .wraper{
  background: url(/images/blackpearl/bp-bgl.png) left top repeat-y,
    url(/images/blackpearl/bp-bgr.png) right top repeat-y;
}
}/*================== PC(min-width: 1400px)ここまで ==================*/