@charset "utf-8";

/**
 * 
 *  BLOCK
 *
 */

.c-red{color: #de0000;}
.c-blue{color: #0064dc;}

.invert{ filter: invert(); }

.opc8{ opacity: 0.8; }
.opc6{ opacity: 0.6; }
.opc4{ opacity: 0.4; }
.opc2{ opacity: 0.2; }

.tal{ text-align: left; }
.tar{ text-align: right; }
.tac{ text-align: center; }


@media print,screen and (min-width : 501px) {

/** 横幅 */
.w500{width: 500px;margin: 0 auto;}
.w800{width: 800px;margin: 0 auto;}
.w1000{width: 1000px;margin: 0 auto;}

/** フォントサイズ */
.f5{font-size:32px;font-size:3.2rem;}
.f4{font-size:28px;font-size:2.8rem;}
.f3{font-size:24px;font-size:2.4rem;}
.f2{font-size:20px;font-size:2.0rem;}
.f1{font-size:18px;font-size:1.8rem;}
.f-1{font-size:14px;font-size:1.4rem;}
.f-2{font-size:12px;font-size:1.2rem;}

/** 比率 */
.ratio5-5 .fb-txt{ width: 49%; }
.ratio5-5 .fb-img{ width: 49%; }
.ratio6-4 .fb-txt{ width: 59%; }
.ratio6-4 .fb-img{ width: 39%; }
.ratio7-3 .fb-txt{ width: 69%; }
.ratio7-3 .fb-img{ width: 29%; }
.ratio8-2 .fb-txt{ width: 79%; }
.ratio8-2 .fb-img{ width: 19%; }

/** 画像を左にしたい場合 */
.img-left{
  -webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;
}

/** gmapの比率 */
.gmap {
  position: relative;
  width: 100%;
  padding-top: 100%;
}
.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gmap.aspect16-9{
  padding-top: 56%;
}
.gmap.aspect4-3{
  padding-top: 75%;
}


/** テキスト+画像
---------------------------------------- */
.blk-txt-img{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap: wrap;flex-wrap: wrap;
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}


/** ギャラリー+説明文
---------------------------------------- */
.blk-gallery{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap: wrap;flex-wrap: wrap;
}
.blk-gallery dt{
  margin-top: 4px;
  margin-bottom: 2px;
    font-weight: bold;
    color: #D71F36;
}
.blk-gallery dd{
  line-height: 1.4;
}

/** 配置 */
.blk-gallery.justify{
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
.blk-gallery.center{
  -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
}

/** 2カラム */
.blk-gallery.justify.col2 li{
  width: 48%;
  margin-bottom: 20px;
}
.blk-gallery.justify.col2::after {
  content: "";
  display: block;
  width: 48%;
  height: 0;
}
/** 3カラム */
.blk-gallery.justify.col3 li{
  width: 32%;
  margin-bottom: 20px;
}
.blk-gallery.justify.col3::after {
  content: "";
  display: block;
  width: 32%;
  height: 0;
}
/** 4カラム */
.blk-gallery.justify.col4 li{
  width: 23%;
  margin-bottom: 20px;
}
.blk-gallery.justify.col4::after,
.blk-gallery.justify.col4::before {
  content: "";
  display: block;
  width: 23%;
  height: 0;
}
.blk-gallery.justify.col4::before {
  order: 1;
}
.blk-gallery.justify.col4 dt{
    text-align: center;
}
/** 5カラム */
.blk-gallery.justify.col5 li{
  width: 19%;
  margin-bottom: 20px;
}
.blk-gallery.justify.col5::after,
.blk-gallery.justify.col5::before {
  content: "";
  display: block;
  width: 19%;
  height: 0;
}
.blk-gallery.justify.col5::before {
  order: 1;
}
.blk-gallery.justify.col5 dt{
    text-align: center;
}


/** 料金
---------------------------------------- */
.blk-menu li{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
  -webkit-box-align: center;-ms-flex-align: center;align-items: center;
  border-bottom:solid 1px #c8c8c8;
  padding: 10px;
}
.blk-menu li .menu-price{
  width: 20%;
  text-align: right;
}
/** 2列表示 */
.col2{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap: wrap;flex-wrap: wrap;
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
.col2 li{
  width: 46%;
}
.col2 li .menu-title{
  width: 30%;
}
.col2 li .menu-description{
  width: 70%;
}
/** 説明付きメニュー */
.col3 li .menu-title{
  width: 30%;
}
.col3 li .menu-description{
  width: 50%;
}
.col3 li .menu-price{
  width: 20%;
}


/** Movie
---------------------------------------- */
.blk-movie{
  margin-top: 20px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap: wrap;flex-wrap: wrap;
  -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
  line-height: 1.4;
}
.blk-movie dt{
  margin-top: 10px;
}
.blk-movie li{
  width: 100%;
  margin: 0 0 20px 0;
}
/** 2カラム */
.blk-movie.col2 li{
  width: 48%;
  margin: 0 auto 20px auto;
  overflow: hidden;
}
/** 3カラム */
.blk-movie.col3 li{
  width: 30%;
  overflow: hidden;
  margin: 0 10px 20px 10px;
}
/** 4カラム */
.blk-movie.col4 li{
  width: 22%;
  margin: 0 10px 20px 10px;
}
.blk-movie.col4::after,
.blk-movie.col4::before {
  content: "";
  display: block;
  width: 22%;
  height: 0;
  margin: 0 10px 20px 10px;
}
.blk-movie.col4::before {
  order: 1;
}


/** 会社(ショップ)情報
---------------------------------------- */

/** テーブル */
.blk-info-table{
  width: 100%;
  border:none;
}
.blk-info-table th{
  border:none;
  padding: 10px;
}
.blk-info-table td{
  border:none;
  padding: 10px;
}

/** テーブル枠線あり */
.borderstyle{
  border:solid 1px #c8c8c8;
}
.borderstyle th{
  border:solid 1px #c8c8c8;
}
.borderstyle td{
  border:solid 1px #c8c8c8;
}

/** テーブルth色付き */
.thcolor th{
  background-color: #e6e6e6;
  border-bottom:solid 1px #fff;
}

/** テーブル下線のみ */
.borderbottom th{
  border-bottom:solid 1px #e6e6e6;
}
.borderbottom td{
  border-bottom:solid 1px #e6e6e6;
}

/** マップとセット */
.blk-info-mapset{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap: wrap;flex-wrap: wrap;
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
.blk-info-mapset dt{
  margin-bottom: 20px;
}
.blk-info-mapset p{
  margin-top: 10px;
}


/** SNS
---------------------------------------- */
.blk-sns{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap: wrap;flex-wrap: wrap;
  -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
}
.blk-sns li{
  margin: 0 10px;
}



}
@media screen and (max-width : 500px) {

/** フォントサイズ */
.f5{font-size:28px;font-size:2.8rem;}
.f4{font-size:24px;font-size:2.4rem;}
.f3{font-size:20px;font-size:2.0rem;}
.f2{font-size:18px;font-size:1.8rem;}
.f1{font-size:16px;font-size:1.6rem;}
.f-1{font-size:12px;font-size:1.2rem;}
.f-2{font-size:11px;font-size:1.1rem;}

/** 画像を左にしたい場合 */
.img-left{
  -webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;
}

/** gmapの比率 */
.gmap {
  position: relative;
  width: 100%;
  padding-top: 100%;
}
.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gmap.aspect16-9{
  padding-top: 56%;
}
.gmap.aspect4-3{
  padding-top: 75%;
}


/** テキスト+画像
---------------------------------------- */
.blk-txt-img .fb-img{
  margin-top: 10px;
}


/** ギャラリー+説明文
---------------------------------------- */
.blk-gallery{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap: wrap;flex-wrap: wrap;
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
  line-height: 1.4;
}
.blk-gallery dt{
  margin-top: 4px;
  margin-bottom: 2px;
    font-weight: bold;
    color: royalblue;
}

/** 配置 */
.blk-gallery.justify{
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
.blk-gallery.center{
  -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
}

/** 2カラム */
.blk-gallery.justify.col2 li{
  width: 48%;
  margin-bottom: 10px;
}
/** 3カラム */
.blk-gallery.justify.col3 li{
  width: 48%;
  margin-bottom: 10px;
}
/** 4カラム */
.blk-gallery.justify.col4 li{
  width: 48%;
  margin-bottom: 10px;
}
.blk-gallery.justify.col5 li{
  width: 48%;
  margin-bottom: 10px;
}

.blk-gallery.justify.col4 dt{
    text-align: center;
}

/** 料金
---------------------------------------- */
.blk-menu li{
  border-bottom:solid 1px #c8c8c8;
  padding: 14px 10px;
}
.blk-menu li .menu-price{
  text-align: right;
  margin-top: 4px;
}

/** 説明付きメニュー */
.col3 li .menu-description{
  margin-top: 10px;
}
.col3 li .menu-price{
  margin-top: 10px;
}


/** Movie
---------------------------------------- */
.blk-movie{
  line-height: 1.4;
}
.blk-movie dt{
  margin-top: 6px;
}
.blk-movie li{
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
}


/** 会社(ショップ)情報
---------------------------------------- */

/** テーブル */
.blk-info-table{
  width: 100%;
  border:none;
}
.blk-info-table th{
  border:none;
  padding: 10px;
}
.blk-info-table td{
  border:none;
  padding: 10px;
}

/** テーブル枠線あり */
.borderstyle{
  border:solid 1px #c8c8c8;
}
.borderstyle th{
  border:solid 1px #c8c8c8;
}
.borderstyle td{
  border:solid 1px #c8c8c8;
}

/** テーブルth色付き */
.thcolor th{
  background-color: #e6e6e6;
  border-bottom:solid 1px #fff;
}

/** テーブル下線のみ */
.borderbottom th{
  border-bottom:solid 1px #e6e6e6;
}
.borderbottom td{
  border-bottom:solid 1px #e6e6e6;
}

/** マップとセット */
.blk-info-mapset dt{
  margin-bottom: 20px;
}
.blk-info-mapset p{
  margin-top: 10px;
}
.blk-info-mapset .fb-img{
  margin-top: 20px;
}


/** SNS
---------------------------------------- */
.blk-sns{
  margin-top: 20px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap: wrap;flex-wrap: wrap;
  -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
}
.blk-sns li{
  margin: 0 4px;
}


}