/* --------------------------------
　タイトル
---------------------------------*/
.lp_page .title {
	line-height:1.2em;
	font-size: 22px;
	background:#907423;
	color:#fff;
	padding:8px 20px;
	margin-bottom:2px;
}

/* --------------------------------
　画像
---------------------------------*/
.lp_page .image01 {
	margin-bottom:30px;
}

image-vw {
  width : 50vw ; 
}
/* --------------------------------
　コンテンツエリア
---------------------------------*/
.lp_page .content01 {
	margin-bottom:30px;
}



/* --------------------------------
　YouTube
---------------------------------*/
.lp_page .youtube {
	margin-bottom:30px;
}
.lp_page .youtube .embed-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	width: 100%;
	margin-bottom:10px;
}
.lp_page .youtube .embed-container iframe,
.lp_page .youtube .embed-container object,
.lp_page .youtube .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* --------------------------------
　商品一覧タイトル
---------------------------------*/
.lp_page .product_title {
	line-height:2em;
	font-size: 22px;
	background:#eee;
	color:#333;
	padding:0 20px;
	margin-top:20px;
	margin-bottom:30px;
}

/* --------------------------------
　商品一覧
---------------------------------*/
.lp_page .product_list .sphone_clear {
	clear:both;
}
.lp_page .product_list a {
	display:block;
	width:100%;
	margin-bottom:20px;
	text-decoration:none;
	color:#333;
}
.lp_page .product_list a:hover {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.lp_page .product_list a img {
	margin-bottom:10px;
}
.lp_page .product_list a .left {
	float:left;
	width:40%;
}
.lp_page .product_list a .right {
	float:right;
	width:58%;
}

@media only screen and (min-width: 480px){
/* --------------------------------
　商品一覧
---------------------------------*/
.lp_page .product_list .clear {
	clear:both;
}
.lp_page .product_list .sphone_clear {
	clear:none;
}
.lp_page .product_list a {
	width:18%;
	margin-right:2.5%;
	float:left;
}
.lp_page .product_list a.last {
	margin-right:0;
}
.lp_page .product_list a .left {
	float:none;
	width:100%;
}
.lp_page .product_list a .right {
	float:none;
	width:100%;
}
}

/* ================================
　TinyMCE 
================================ */
/*
特集ページ　.lp_page .content0
--------------------- */

.lp_page .content01 img {
	max-width:100%;
	height:auto;
}

.lp_page .content01 ul {
	margin:0 0 0 -20px;
}

.lp_page .content01 ol {
	margin:0 0 0 -15px;
}

.module.commit_greeting .article-content {
    padding: 0 220px 40px 0;
}
.module-article .article-content {
    overflow: hidden;
    word-break: break-all;
}

.box-img,
.box-text{
  display: inline-block;
}

.example {/*親div*/
  position: relative;
  }

.example p {
  position: absolute;
  color: #696969;/*文字は白に*/
  line-height: 1.5;
  font-size: 14px;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 20px;
  left: 0;
  right: 310px;
  }

.example img {
  width: 100%;
  }
/* ----------------------------------------------------------------------
 font-size - フォントサイズ
---------------------------------------------------------------------- */
.text50{font-size:50%}   
.text60{font-size:60%}   
.text70{font-size:70%}      /* フォントサイズ70% */
.text80{font-size:80%}
.text90{font-size:90%}
.text91{font-size:91%}
.text92{font-size:92%}
.text93{font-size:93%}
.text94{font-size:94%}
.text95{font-size:95%}
.text96{font-size:96%}
.text97{font-size:97%}
.text98{font-size:98%}
.text99{font-size:99%}
.text100{font-size:100%}
.text110{font-size:110%}
.text120{font-size:120%}
.text130{font-size:130%}
.text140{font-size:140%}
.text150{font-size:150%}
.text160{font-size:160%}
.text170{font-size:170%}
.text180{font-size:180%}
.text190{font-size:190%}
.text200{font-size:200%}
.text210{font-size:210%}
.text220{font-size:220%}
.b{font-weight:700}     /* 太字 */
.u{text-decoration:underline}     /* 下線 */
.del{text-decoration:line-throug} /* 打ち消し線 */


/* ----------------------------------------------------------------------
 font-color - フォントカラー
---------------------------------------------------------------------- */
.red{color:red}     /* 赤色 */
.blue{color:#2ca9e1}    /* 青色 */
.green{color:#82ae46}   /* 緑色 */
.orange{color:#ff7d00}    /* 橙色 */
.yellow{color:#fff000}    /* 黄色 */
.pink{color:#ff0084}    /* ピンク */
.gray{color:#999999}    /* グレー */
.white{color:#ffffff}    /* グレー */
.gold{color:#907423} /* ゴールド */

/* ----------------------------------------------------------------------
 background-color - 背景色
---------------------------------------------------------------------- */
.bg-yellow{padding:2px;background-color:#ff0} /* 黄色の文字背景 */
.bg-blue{padding:2px;background-color:#4ab0f5}  /* 青色の文字背景 */
.bg-red{padding:2px;background-color:red} /* 赤色の文字背景 */


/* ----------------------------------------------------------------------
 text-align - 配置
---------------------------------------------------------------------- */
.al-c{text-align:center !important} /* 中央寄せ */
.al-r{text-align:right !important}  /* 右寄せ */
.al-l{text-align:left !important} /* 左寄せ */


/* ----------------------------------------------------------------------
 float - 回り込み
---------------------------------------------------------------------- */
.r-flo{float:right;margin:10px} /* 右に回り込み */
.l-flo{float:left;margin:10px}  /* 左に回り込み */
.f-clear{clear:both}      /* 回り込みの解除 */

.fl-r{float:right;margin:10px 0 0 100px} /* 右に回り込み */
.fl-l{float:left;margin:10px}  /* 左に回り込み */
/* ----------------------------------------------------------------------
 hover - 画像リンクマウスオーバー時の不透明度
---------------------------------------------------------------------- */
a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}


/* ----------------------------------------------------------------------
 text-style - テキストスタイル
---------------------------------------------------------------------- */
.att {padding-left:1em;text-indent:-1em;} /* 注意書き等で二行目以降を字下げ */
.att_box { margin:2em 0 2.5em; padding:1em 1.2em; line-height:2.0; border:1px dotted #cccccc; background:#fcfcfc; box-shadow:0px 4px 0px 0px #f7f7f7; } /* テキストボックス */


/* ----------------------------------------------------------------------
 margin - 要素の外側の余白
---------------------------------------------------------------------- */
.m0{margin:0 !important}    /* margin 0px を指定するクラス */
.mt0{margin-top:0 !important}   /* margin-top0px を指定するクラス */
.mr0{margin-right:0 !important}   /* margin-right0px を指定するクラス*/
.mb0{margin-bottom:0 !important}  /* margin-bottom0px を指定するクラス*/
.ml0{margin-left:0 !important}    /* margin-left0px を指定するクラス*/

.m5{margin:5px !important}
.mt5{margin-top:5px !important}
.mr5{margin-right:5px !important}
.mb5{margin-bottom:5px !important}
.ml5{margin-left:5px !important}

.m10{margin:10px !important}
.mt10{margin-top:10px !important}
.mr10{margin-right:10px !important}
.mb10{margin-bottom:10px !important}
.ml10{margin-left:10px !important}

.m15{margin:15px !important}
.mt15{margin-top:15px !important}
.mr15{margin-right:15px !important}
.mb15{margin-bottom:15px !important}
.ml15{margin-left:15px !important}

.m20{margin:20px !important}
.mt20{margin-top:20px !important}
.mr20{margin-right:20px !important}
.mb20{margin-bottom:20px !important}
.ml20{margin-left:20px !important}

.m25{margin:25px !important}
.mt25{margin-top:25px !important}
.mr25{margin-right:25px !important}
.mb25{margin-bottom:25px !important}
.ml25{margin-left:25px !important}

.m30{margin:30px !important}
.mt30{margin-top:30px !important}
.mr30{margin-right:30px !important}
.mb30{margin-bottom:30px !important}
.ml30{margin-left:30px !important}

.m35{margin:35px !important}
.mt35{margin-top:35px !important}
.mr35{margin-right:35px !important}
.mb35{margin-bottom:35px !important}
.ml35{margin-left:35px !important}

.m40{margin:40px !important}
.mt40{margin-top:40px !important}
.mr40{margin-right:40px !important}
.mb40{margin-bottom:40px !important}
.ml40{margin-left:40px !important}

.m45{margin:45px !important}
.mt45{margin-top:45px !important}
.mr45{margin-right:45px !important}
.mb45{margin-bottom:45px !important}
.ml45{margin-left:45px !important}

.m50{margin:50px !important}
.mt50{margin-top:50px !important}
.mr50{margin-right:50px !important}
.mb50{margin-bottom:50px !important}
.ml50{margin-left:50px !important}

.m55{margin:55px !important}
.mt55{margin-top:55px !important}
.mr55{margin-right:55px !important}
.mb55{margin-bottom:55px !important}

.ml55{margin-left:55px !important}
.m60{margin:60px !important}
.mt60{margin-top:60px !important}
.mr60{margin-right:60px !important}
.mb60{margin-bottom:60px !important}
.ml60{margin-left:60px !important}

.m65{margin:65px !important}
.mt65{margin-top:65px !important}
.mr65{margin-right:65px !important}
.mb65{margin-bottom:65px !important}
.ml65{margin-left:65px !important}

.m70{margin:70px !important}
.mr70{margin-right:70px !important}
.mb70{margin-bottom:70px !important}
.ml70{margin-left:70px !important}

.m75{margin:75px !important}
.mt75{margin-top:75px !important}
.mr75{margin-right:75px !important}
.mb75{margin-bottom:75px !important}
.ml75{margin-left:75px !important}

.m80{margin:80px !important}
.mt80{margin-top:80px !important}
.mr80{margin-right:80px !important}
.mb80{margin-bottom:80px !important}
.ml80{margin-left:80px !important}


/* ----------------------------------------------------------------------
 padding - 要素の内側の余白
---------------------------------------------------------------------- */
.p0{padding:0 !important}   /* padding-0px を指定するクラス */
.pt0{padding-top:0 !important}    /* padding-top0px を指定するクラス */
.pr0{padding-right:0 !important}  /* padding-right0px を指定するクラス */
.pb0{padding-bottom:0 !important} /* padding-bottom0px を指定するクラス */
.pl0{padding-left:0 !important}   /* padding-left0px を指定するクラス */

.p5{padding:5px !important}
.pt5{padding-top:5px !important}
.pr5{padding-right:5px !important}
.pb5{padding-bottom:5px !important}
.pl5{padding-left:5px !important}

.p10{padding:10px !important}
.pt10{padding-top:10px !important}
.pr10{padding-right:10px !important}
.pb10{padding-bottom:10px !important}
.pl10{padding-left:10px !important}

.under {
  border-bottom: solid 3px #990e2a;
}


hr.style2 {
	border-top: 3px double #8c8b8b;
}

hr.style3 {
	border-top: 1px dashed #8c8b8b;
}

hr.style4 {
	border-top: 1px dotted #8c8b8b;
}

hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}


hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

hr.style7 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}


hr.style8 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style9 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}

hr.style10 {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}


hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/images/hr-11.png) repeat-x 0 0;
    border: 0;
}


hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}


hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

hr.style16 { 
  border-top: 1px dashed #8c8b8b; 
} 
hr.style16:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #f0f0f0; 
  color: #8c8b8b; 
  font-size: 18px; 
}


hr.style17 {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr.style17:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}


hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}



/* シンプル角丸 枠 1 */
.kakomi-maru1 {
 margin: 1em auto;  
 padding: 1em;
 width: 100%; /*幅の調節*/
 color: #666666; /*文字色*/
 background-color: #f7f7f7; /*背景色*/
 border: 2px solid #907423; /*線の太さ・色*/
 border-radius: 8px; /*角の丸み*/ 
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

table{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 0 auto;
  text-align: left;
  width: 100%;
}
table th,
table td{
  border: 1px solid #999;
  padding: .5em 1em;
}
table th{
  background: #eee;
}
@media (max-width: 650px) {
    table th,
    table td{
      display: block;
    }
}