/********************************************************/


*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.scate-img {
  width:75%;
  margin:15px auto 15px;
  padding:0;
  }
.scate-img img {
  border: 1px #4d2f0f solid;
    border-radius: 3px;
  }

/* asa・ボデガの詳細 ALL */

.de-bodega {
     width:100%;
     text-align:left;
     font-size:medium;
     color:#1a1306;
     margin:0;
     padding:0;
}

/* asa・ボデガの詳細・左右対称に見えるように右側を20ｐｘ開ける */

.de-pad20 {
     width:100%;
     padding-right:20px}

/* asa・カテゴリとグループなど、タイトルとボーダーの設定 */

.de-spanishtitle {
    padding: 0 4px;
    margin: 0;
    font-size:x-large;
    color: #331914;
    border-bottom: solid 1px #331914;
}

.ca-egtitle, .ca-egtitle2 {
    padding: 0 0 15px;
    margin: 0;
    text-align: center;
    font-size: xx-large;
    color: #1a1005;
    border-bottom: solid 1px #331914;
}


/* asa・カテゴリとグループなど、タイトルの下のサブタイトルの設定 */

.de-subtitle {
    padding: 0;
    margin: 15px 0 15px;
    text-align:center;
    font-size:large;
    color: #ff1a1a;
}

/* asa・最初のBOX = 幅100％、マージントップ(10ｐｘ)、回り込みの解除 */

.de-firstbox {
    clear:both;
    width:100%;
    margin:10px 0 0;
}

/* asa・写真と文章、または、左右に写真が2枚の場合、写真へのＣＳＳ */

.de-leftphoto1 { float:left;
  width: 49%; margin:0 0 15px auto; padding:0 15px 0 0;}
.de-rightphoto1 { float:right;
  width: 49%; margin:0 auto 15px 0; padding:0 0 0 15px;}

/* asa・その３）　縦長・左に写真、右に文章の場合 */

.de-leftphoto2 { float:left;
  width: 40%; margin:0 0 15px auto; padding:0 15px 0 0;}
.de-rightphoto2 { float:right;
  width: 40%; margin:0 auto 15px 0; padding:0 0 0 15px;}


/* asa・高低差のある写真の場合、スパンに入れて並べる */

.de-inbox{vertical-align:bottom;}

/* asa・高低差のある写真のBOX＝左が横、右が縦の写真へのＣＳＳ */

.de-widphoto3{
  width: 50%; margin:0 auto 15px auto; padding:0 0 0 10px;}
.de-hiphoto3{
  width: 49%; margin:0 auto 15px 0; padding:0 15px 0 60px;}


/* asa・高低差のある写真のBOX＝左が縦、右が横の写真へのＣＳＳ */

.de-hiphoto4{
  width: 50%; margin:0 auto 15px auto; padding:0 50px 0 30px;}
.de-widphoto4{
  width: 49%; margin:0 auto 15px 0; padding:0;}
  
  
/* asa・左右全体に文字がある時、ｐへのＣＳＳ */

.de-mojij100 { clear:both;}

/* asa・2つ目以降のBOX = 幅100％、マージントップ30ｐｘ)、回り込みの解除 */

.de-nextbox {
    clear:both;
    width:100%;
    margin:30px 0 0 0;
}

/* asa・ボデガ商品一覧タイトル設定 */

.de-prolistout {
  clear:both;
  width:100%;
  margin: 0;
  padding: 50px 0 30px;
}

h3.de-prolist {
  font-size:large;
  color:#4d3c08;
}


/* asa・ボデガ一覧の文章 */

.de-ps{
  width:70%;
  font-size:medium;
  text-align:left;
  margin:0;
  padding:15px 0 15px 0;
}

/* asa・ボデガPSと、公式へのリンク */

.de-pssec {
 width:100%;
 margin:0 auto 0;
 text-align:center;
 font-size:medium;
 }

.de-pstitle {
 text-align:center;
 font-size:large;
 color:#ff1a1a;

  margin:15px auto 15px;
 }

.de-psimg {
 text-align:center;
 width:60%;
 }

.de-pslet {
 font-size:medium;
 text-align:left;
 margin:15px auto 15px;
 width:76%;
 }

.de-psimg2 {
   width:48%;
   margin:15px auto 15px;
   }

.de-pslet2 {

   text-align:left;
  width:58%;
   }


 
/* asa・ボデガ詳細・ＰＳ・追伸を中央寄せにする場合 */

.de-psletcen {
 font-size:medium;
 text-align:center;
 margin:15px auto 15px;
 width:76%;
 }

/* asa・ボデガ公式へリンク */

.de-bohp {
 clear:both;
 display:block;
 text-align:right;
 font-size:medium;
 margin:60px 0 15px 0;
 padding:0;
 }


/********************************************************/



/* asa・写真や文章の幅 */

  .yoko90{
  width:90%;
  }
  .yoko76{
    width:76%; text-align:left; margin-top:10px; margin-bottom:15px;
  }
  .yoko60{
  width:60%; text-align:center; margin-top:10px; margin-bottom:15px;
  }

/* asa・写真を横に2枚並べる場合（左右横向き） */

div.boxg{
  display:inline-block; width: 48.6%; float:left;}
div.boxg2{
  display:inline-block; width: 48.6%; float: right;}
div.boxg200{
  display:inline-block; width: 48.6%; float: right;}
/* asa・写真の左横に文章を置く場合（横向き写真） */

div.boxgm{
  display:inline-block; width: 48.6%; float:left; margin-right:15px; text-align:left;}

/* asa・写真の右横に文章を置く場合（横向き写真） */

div.boxgm2{
  display:inline-block; width: 48.6%; float:right; margin-left:15px; text-align:left;}

/* asa・文章を左、写真を右横に並べる場合（縦の写真） */

div.boxg2h{
  display:inline-block; width:40%; margin-left:10px; margin-right:40px; padding: 0;float: right;}
div.boxg2hm{
  display:inline-block; width:50%; margin-right:10px; padding: 0;float: legt; text-align:left;}

/* asa・横と縦、違う写真を横に並べる場合（左が横向き、右が縦） */

div.dbox{clear:both; width:100%; margin: 0; padding: 0;}
.boxgb{vertical-align:bottom; }
.boxg2w{
  width: 49%; margin:30px 0 15px 15px;}
.boxg2wh{
  width: 40%; margin:30px 0 15px 40px;}


/* asa・ボデガ公式HPへのリンク */

.bohp {
  clear:both;
  display:block;
  padding-top:60px; padding-bottom:10px;
  font-size:medium;
}




@media screen and (max-width: 980px) {
  #base_gmoWrapp,
  #gmo_CMSPbar {
    overflow: hidden;
    min-width: 100% !important;
    width: 100% !important;
  }

/* asa・文章を左、写真を右横に並べる場合（縦の写真） */


div.boxg2h{
  display:inline-block; width:40%;margin:0 0 15px 0%; text-align:center;}  
div.boxg2hm{
  display:inline-block; width:54%; margin: 0;} 

  
}


@media screen and (max-width: 768px) {
  .slider .bx-wrapper .bx-caption span {
    padding: 10px 20px;
    font-size: 1em;
  }


/* asa・写真や文章の幅 */
  .yoko90{
  width:100%;
  }
  .yoko76{
  width:100%;
  }
  .yoko60{
    width:100%;
  }

/* asa・写真や文章を横に並べている時に */
  
  div.boxg {
  display:block; width:100%; margin:0;}
div.boxg2{
  display:block; width:100%; margin:10px 0 0 0;}
div.boxg200{
  display:block; width:100%; margin:10px 0 0 0;}
div.boxg200 img{width:100%;}  
  
div.boxgm{
  display:block; width:100%; margin:10px 0 0 0;}
div.boxgm2{
  display:block; width:100%; margin:10px 0 30px 0;}
div.boxg2h{
  display:block; width:100%;margin:0 0 15px 0; text-align:center;}  
div.boxg2hm{
  display:block; width:100%; margin: 0;} 
.boxg2w{
  display:block; width:100%; margin:10px 0 0 0;}
.boxg2wh{
  display:block; width:100%; margin:10px 0 0 0; text-align:center;}

  

/* asa・カテゴリやグループなどの写真や文章へのＣＳＳ */  

.de-firstbox, .de-pad20,
  .ca-egtitle {
  width:100%; margin:0 0 0 0; padding:0 0 0 0;}
  
.de-subtitle,.scate-img {
  width:100%; margin:10px 0 0; padding:0;}

.ca-egtitle2,
.de-nextbox,.de-leftphoto1,.de-rightphoto1,.de-leftphoto2,.de-rightphoto2,
.de-widphoto3,.de-hiphoto3,.de-hiphoto4,.de-widphoto4,.de-moji100,.de-psimg,.de-pslet,.de-psimg2,.de-pslet2,
.de-psletcen {
  width:100%; margin:10px 0 10px 0; padding:0;}
  
.de-prolistout {
  clear:both;width:100%;
  margin:0;
  padding:30px 0 0 0;
  text-align:center;
  }
  
  
.syurui {
  width:100%; margin:10px 0 10px 0; padding:0;}
  

}