/*文字装飾など*/

.font-bold{
  font-weight: bold;
}

.marker-yel{
  background:linear-gradient(transparent 70%, #FFFF00 0%); 
  font-weight:bold;
}
.marker-red{
  background:linear-gradient(transparent 70%, crimson 0%); 
  font-weight:bold;
}

/*インフォメーションエリアここから*/
/* ---インフォメーションエリア--- */
.info-area{
  width: 100%;
  margin-top: 15px;
  display: inline-block;
  text-align: center;  
  z-index: 0;
}
.info-content-area{
  vertical-align: top;
  display: inline-block; 
  text-align: center;  
  width: 32%;
  z-index: 1;
  margin: 0 2px 25px 2px;
  padding:0 15px 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
  /*インフォメーションエリア--見出し：文字と丸スタイル--*/
.info-title {
  font-weight: bold;
  color:#113382;
  font-size:22px;
  position: relative;
  color: #333;
  display: inline-block;
  margin: 65px 0 0 0;
  text-shadow: 0 0 2px white;
  z-index: 2;
}
.info-title:before {
  content: "";
  position: absolute;
  background: #9accff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}
.info-description{
  text-align: center;
  padding:0 30px 0 30px;
  font-size: 15px;
  padding: 25px 15px 30px 15px;
  border-radius: 8px;
}
  /* インフォメーションエリア--太い下線のスタイル-- */
.bold-01{
  font-weight: bold;
  color: royalblue;
  background: linear-gradient(transparent 80%, #ffff00 20%);
}
.under-line {
  background: linear-gradient(transparent 50%, #ffff00 50%);
}
  /* インフォメーションエリア--リボン見出しのスタイル-- */
.ribbon4 {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 3px;
  vertical-align: top;
  position: relative;
  width:100%;
  height: 40px;/*高さ*/
  line-height: 40px;/*高さ*/
  text-align: left;
  padding: 0 40px 0 18px;/*文字の左右の余白*/
  font-size: 20px;/*文字サイズ*/
  background: #1e78ff;/*背景色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
}
.ribbon4:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
.ribbon4:after {
  top: 0;
  right: 0;
  border-width: 20px 10px 20px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}




/*インフォメーションエリアここまで*/

a.a-orange:hover{
  color : #ff7043;
}

/*　導入事例ブロックのスタイル　*/
.case-study-wrap{
  text-align: center;
    display: inline-block;
    width:100%;
    margin:0 0 15px 0;
}
.case-study-h2{
  color:#fff;
  width:100%;
  font-size: 20px;
  background-color:#267dff;
  padding:5px 0 5px 15px;
  margin: 0 0 8px 0;
}

.case-study-content{
  display: inline-block;
  width: 30%;
  margin:0 15px;
}
.case-study-title{
text-align: center;
font-size: 18px;
font-weight: bold;
display: inline-block;
color:#fff;
width:100%;
padding:5px 0 5px 0;
}
.case-study-text{
background-color: #fff;
background-color: #fdfaf6;
width:100%;
height: 135px;
text-align: left;
margin-bottom: 10px;
padding:12px 20px;
font-size: 14.5px;
font-weight: bold;
}


/*青*/
.case-study-content-bl{
    border: 1px solid #b4d2ff;
}
.case-study-title-bl{
  background-color: #448fff;
}
.case-study-text-bl{
  border-top: 4px solid #267dff;
  border-bottom: 4px solid #267dff;
}
.case-study-textarea-bl{
  background-color: #b4d2ff ;
}

/*黄*/
.case-study-content-yel{
  border: 1px solid #fde1ab;
}
.case-study-title-yel{
background-color: #ffba3a;
color:#fff;
}
.case-study-text-yel{
border-top: 4px solid #ffb223;
border-bottom: 4px solid #ffb223;
}
.case-study-textarea-yel{
  background-color: #fde1ab ;
}


/*赤*/
.case-study-content-red{
  border: 1px solid #ffd7e1;
}
.case-study-title-red{
background-color: #ff6a8f;
}
.case-study-text-red{
border-top: 4px solid #ff6a8f;
border-bottom: 4px solid #ff6a8f;
}
.case-study-textarea-red{
  background-color: #ffd7e1 ;
}


.case-study-imgarea{
  display: inline-block;
  width: 100%;
  text-align: center;
  padding:0;
}
.case-study-img{
  display: inline-block;
  width:100%;
  opacity:0.6;
}
.case-study-textarea{
  text-align: center;
  width: 100%;
  padding-top: 10px;
  
}

.case-study-btn{
  text-align: center;
}

    /* ここから下がボタンのCSS　*/
    .container {
        font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
        text-align: center;
        padding-top: 40px;
      }
    .btn-animation {
      margin-bottom: 10px;
      display: inline-block;
      width: 80%;
      text-align: center;
      background-color: #ff7043;
      border: 2px solid #ff7043;
      font-size: 17px;
      color: #ff7043;
      text-decoration: none;
      font-weight: bold;
      padding: 5px 0;
      border-radius: 30px;
      position: relative;
    }
    .btn-animation span {
      position: relative;
      z-index: 1;
    }
    .btn-animation::before{
        content: "";
        display: block;
        background-color: #FFF;
        border-radius: 30px 0 0 30px ;
        width: 51%;
        height: 100%;
        position: absolute;
        top: 0;
        transition: .2s;
    }
    .btn-animation::after {
      content: "";
      display: block;
      background-color: #FFF;
      border-radius:0 30px 30px 0 ;
      width: 51%;
      height: 100%;
      position: absolute;
      top: 0;
      transition: .2s;
    }
    .btn-animation::before {
      left: 0;
    }
    .btn-animation::after {
      right: 0;
    }
    .btn-animation:hover:before,
    .btn-animation:hover:after {
      width: 0;
      background-color: #FFF;
    }
    .btn-animation:hover {
      color: #FFF;
    }


.shopguide-wrap{
  width: 100%;
  text-align: center;
}
.shopguide-title{
  width: 100%;
  background-color: #1e78ff;
  color: #fff;
  text-align: left;
  font-size: 20px;
  padding:5px 20px;
}
.shopguide-card-area{
  vertical-align: top;
  margin:15px 2px;
  display: inline-block;
  width: 32%;
  height:95%;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 0 0 6px 6px;
}
.shopguide-card-title{
  display: inline-block;
  width: 100%;
  background-color:#51a8ff; ;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom:15px;
  padding:10px 0;

}
.shopguide-card-text{
  display: inline-block;
  width: 90%;
  text-align: left;
}
.shopguide-card-h3{
  font-size: 16px;
  font-weight: bold;
  margin:0 0 5px 5px;
}
.shopguide-card-text p{
  margin:0;
  font-size: 13px;
  margin:0 0 0 25px;
}




/******************************
	Media Query
*******************************/
/* -----------レスポンシブ対応-------------- */
@media screen and (max-width: 767px) {
  .shopguide-wrap{
    width:100%;
  }
  .shopguide-card-area{
    width:100%;
  }
  .info-content-area{
    width:100%;
  }
  .case-study-content{
    width:100%;
    margin:10px 0;
  }

}


/* ----------fujisaki.cssの記述----------- */
/* --------ショッピングガイド-------- */

.guide_title /*ショッピングガイドの項目タイトルに使用。頭が水色の付箋みたいな感じ*/{
	font-size:14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	color: #000;
	background-color: #FFF;
	text-indent: 15px;
	border: 1px solid #000;
	background-image: url("/html/upload/save_image/article_image/grd_icon.jpg");
	background-repeat: no-repeat;
	margin: 10px 0px 14px 0px;
}

.guide_title_big /*ショッピングガイドの項目タイトルに使用。頭が水色の付箋みたいな感じ*/{
	font-size: 20px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000;
	background-color: #E0E0E0;
	text-indent: 22px;
	border: 1px solid #E0E0E0;
	background-image: url("/html/upload/save_image/article_image/grd_icon.jpg");
	background-repeat: no-repeat;
	margin: 10px 0px;
}

.shopping_guide /*外枠を消した状態のテーブル*/ {
	font-size:13px;
	border-collapse: separate; 
	border-spacing: 10px;
}





/* よくあるご質問
------------------------- */

.q_asquare{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 20px;
	/* [disabled]width: 90%; */
	height: auto;
	/* [disabled]background-image: url("http://wleaf.jp/temp2/q_a_red.gif"); */
	/* [disabled]background-repeat: no-repeat; */
	border: 0px solid #000;
	margin: 5px 0px;
	padding: 5px 0px 0px 5px;
		}

.font20/*旧q_a*/ {
	font-size: 20px;
	margin: 5px;
}

.f_red18b/*大きめの赤太文字。旧q_a_red*/ {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #F00;
	font-size:18px;
	font-weight: bold;

}
.in_box {
	width: 90%;
	margin: 5px 0px 0px 35px;
	white-space: normal;
	font-size: 14px;
}

.font10/*小さめの黒い字.旧moji2*/{
	color:#000;
	font-size: 10px;
	}
	 
h2.crear{
	font-weight:normal;
	} 

.mg3-95/*外枠グレー*/{
	width: 95%;
	padding: 8px 0px 8px 8px;
	border: 1px solid #ccc;
	white-space: normal;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}

.mg3-b95/*外枠黒*/{
	width: 95%;
	padding: 8px 0px 8px 8px;
	border: 1px solid #333;
	white-space: normal;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}

.moji_green{
	color: #006600;
	background-color: FFFFFF;
		}

.moji_blue{
	color: #03F;
	background-color: FFFFFF;
		}
		
.moji_red{
	color: #FF0000;
	background-color: FFFFFF;
		}
		
.f-22b{
	font-size:22px;
	font-weight:bold;
	}
	
.f-16b{
	font-size:16px;
	font-weight:bold;
	}




		
/* レスポンシブtest
------------------------- */

.contentsAreaTest {
  position: relative;
}


.contentsAreaTest .rect {
  position: absolute;
}

.contentsAreaTest .rect {
  top: 25.71%;
  left: 80.85%;
}

/* レスポンシブtestおわり
------------------------- */


/* 右寄せtest
------------------------- */

.dg{ 
  float:right;
  margin-right:10px;
  margin-top:10px;
 }

/* 右寄せtestおわり
------------------------- */