@charset "utf-8";
/*Common
------------------------------------------------------------ */

#article p{
	font-size:120%;
	line-height:2.0em;
}

#article img{
	width:100%;
}

.pt15{
	padding-top:15px;
	background:#fff;	
}

.pb15{
	padding-bottom:15px;
	background:#fff;	
}

/*Header
------------------------------------------------------------ */

#article .liner{
	color:#993333;
	font-weight:bold;
	font-size:110%;
	background:linear-gradient(transparent 60%, #ff6 60%);
 
}

#article header{
	width:100%;	
	height:100%;
	background-color: #fdfbed;
	
	padding: 0 0 0 0;
	margin:0 0;
}
#article header .inner{
	margin: 0 auto;
	background:url(../img/ikiji/bg_top.png) no-repeat center 0;
	background-size: contain;
	padding: 20px 0 0 0;
}



#article header h1 {
	color: #333333;
   padding:0 0 0 0;
	text-align:center;
line-height:1.5em;

	font-size:180%;
	font-weight:bold;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	
}


#article header p.txt_top{
	text-align:center;
	width:90%;
	margin:0 auto;
	font-size:130%;
	line-height:1.5em;
	padding:15px 0;
	
}

#article header p.txt_date{
	width:95%;
	text-align:right;
	font-size:100%;
	color:#666;
	padding:0 5% 0 0;
	
}



#article header p.image{
	padding:0 0 0 0;
	width:100%;
}




/*Page
------------------------------------------------------------ */

#article #hito_parag02,
#article #hito_parag04,
#article #parag01,
#article #parag03,
#article #parag04,
#article #parag05{
	width:100%;	
	height:100%;
	padding: 50px 0 35px 0;
	margin:0 0;
	
}
#article #hito_parag01,
#article #hito_parag03,
#article #parag02{
	width:100%;	
	height:100%;
	margin:0 0;
	background-color:#fdfbed;
}

#article  #hito_parag01 .inner{
	margin: 0 auto;
	padding:50px 0 35px 0;
}


#article  #hito_parag03 .inner,
#article  #parag02 .inner{
	margin: 0 auto;
	padding:50px 0 35px 0;
	background:url(../img/ikiji/bg_parag.png) no-repeat center 0;
	background-size: contain;
}


#article .offer{
	background-color:#fee0e0;
	margin-bottom:30px;
}

#article .offer .inner {

	background-image: url(../img/ikiji/essence_t_pdimg.jpg);
	
}
#article #hito_parag01 .inner,
#article #hito_parag02 .inner,
#article #hito_parag03 .inner,
#article #hito_parag04 .inner,
#article #parag01 .inner,
#article #parag02 .inner,
#article #parag03 .inner,
#article #parag04 .inner,
#article #parag05 .inner{
	margin: 0 auto;
	
}
#article #hito_parag01 h2,
#article #hito_parag02 h2,
#article #hito_parag03 h2,
#article #hito_parag04 h2,
#article #parag01 h2,
#article #parag02 h2,
#article #parag03 h2,
#article #parag04 h2,
#article #parag05 h2{
	width:100%;
	margin:0 auto 15px;
	padding:0 0 5px 5px;
	color:#000000;
	font-size:150%;
	font-weight:bold;
	text-align:center;
	border-bottom: solid 2px #993333;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

}


#article #parag01 p.image{
	padding:30px 0 0 0;
	width:100%;
}

#article .top_banner{
	text-align:center;
	padding:50px 0;	
}

#article #hito_parag01 p.txt,
#article #hito_parag02 p.txt,
#article #hito_parag03 p.txt,
#article #hito_parag04 p.txt,
#article #parag01 p.txt,
#article #parag02 p.txt,
#article #parag03 p.txt,
#article #parag04 p.txt{
	width:90%;
	margin:15px auto 0;
	color: #333333;
	font-size:110%;
	
}

#article .offer .note{
	font-size:80%;
}

#article .component p{
	font-size:80%;
}

#article .mback p.txt{
	width:90%;
	margin:0 auto;
	color: #333333;
	font-size:80%;
}

.point_box{
	font-size:120%;
	margin:15px auto;
	line-height:2.0em;
	width:90%;
	padding:15px;
	color:#993333;
	font-weight:bold;
	text-align:left;
	 border-radius: 6px;
	  border: 3px solid #993333;  
		
}

.point_box2{
	position:relative;
	font-size:120%;
	margin:50px auto;
	line-height:2.0em;
	width:80%;
	padding:30px 15px 15px 60px;
	color:#993333;
	font-weight:bold;
	text-align:left;
	 border-radius: 6px;
	  border: 3px solid #993333;  
		
}
.balloon_case{
	 position: absolute;
	 top:-60px;
	 left:-5px;
	
}

.balloon{
  position: relative;
  padding: 20px;
  width: 60px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 110%;
  background-color: #993333;
}
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  bottom: 2px;
  border-left: 20px solid #993333;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}



/* 全体 */
.sb-box {
	width:90%;
	margin:0 auto;
  position: relative;
  overflow: hidden;
}
/* アイコン画像 */
.icon-img {
  position: absolute;
  overflow: hidden;
  top: 0px; /* 画像の位置を上から0に */
  width: 80px; /* 画像の幅 */
  height: 80px; /* 画像の高さ */
}
/* アイコン画像（左） */
.icon-img-left {
  left: 0; /* 画像の位置を左から0に */
}
/* アイコン画像（右） */
.icon-img-right {
  right: 0; /* 画像の位置を右から0に */
/* アイコン画像 */
}
.icon-img img {
  border-radius: 50%; /* 画像を丸く表示する */
 
}
/* アイコンネーム */
.icon-name {
  position: absolute;
  width: 80px; /* ネームの最大幅を画像と同じに */
  text-align: center; /* ネームの位置をセンターに */
  top: 83px; /* ネームの位置を上から83に */
  color: #777; /* ネームのカラー */
  font-size: 10px; /* ネームのフォントサイズ */
}
/* アイコンネーム（左） */
.icon-name-left {
  left: 0; /* ネームの位置を左から0に */
}
/* アイコンネーム（右） */
.icon-name-right {
  right: 0; /* ネームの位置を右から0に */
}
/* 吹き出し */
.sb-side {
  position: relative;
  float: left;
  margin: 20px 105px 40px 105px; /* 吹き出しの上下左右の余白 */
}
.sb-side-right {
  float: right;
}
/* 吹き出し内のテキスト */
.sb-txt {
  position: relative;
  font-weight:bold;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 6px; /* 吹き出しを角丸に */
  background: #fff; /* 吹き出しの背景色 */
  color: #333; /* 吹き出し内のテキストのカラー */
  font-size: 100%; /* 吹き出し内のフォントサイズ */
  line-height: 1.7; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 18px; /* 吹き出し内の上下左右の余白 */
  text-align:left;
}
.sb-txt > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}

.sb-liner{
	background:linear-gradient(transparent 60%, #ff6 60%);
}

/* 吹き出しの三角 */
.sb-txt:before {
  content: "";
  position: absolute;
  border-style: solid;
  top: 16px; /* 吹き出し内の三角の位置 */
  z-index: 3;
}
.sb-txt:after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 15px; /* beforeより-1px */
  z-index: 2; /* beforeより-1 */
}
/* 吹き出しの三角（左） */
.sb-txt-left:before {
  left: -7px;
  border-width: 7px 10px 7px 0;
  border-color: transparent #fff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右） */
.sb-txt-right:before {
  right: -7px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent #fff; /* 背景色と同じカラーに */
}
.sb-txt-right:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}

/* 767px（iPad）以下 */

@media (max-width: 767px) {
  /* アイコン画像 */
  .icon-img {
    width: 60px; /* 画像の幅を-20px */
    height: 60px; /* 画像の高さを-20px */
  }
  /* アイコンネーム */
  .icon-name {
    width: 60px; /* 画像の幅に合わせて-20px */
    top: 62px; /* ネームの位置を上から62に */
    font-size: 9px; /* ネームのフォントサイズを-1px */
  }
  /* 吹き出し（左） */
  .sb-side-left {
    margin: 0 0 30px 78px; /* 吹き出し（左）の上下左右の余白を狭く */
  }
  /* 吹き出し（右） */
  .sb-side-right {
    margin: 0 78px 30px 0; /* 吹き出し（右）の上下左右の余白を狭く */
  }
  /* 吹き出し内のテキスト */
  .sb-txt {
    padding: 12px; /* 吹き出し内の上下左右の余白を-6px */
  }
}

.voice_box{
	font-size:100%;
	margin:15px auto;
	line-height:2.0em;
	width:90%;
	padding:15px;
	text-align:left;
	 border-radius: 6px;
	  border: 3px solid #eee;  
	  background-color:#fff;
}

.voice_box .voice_name{
	display: inline-block;
	margin:0 50px 0 0;
}


.voice_box .voice_star{
	display: inline-block;
	font-size:120%;
	color:#FF0;
}

.voice_box p{
	font-weight:bold;
}