/*
Theme Name: BBクリームランキング
Author: Design Factory CUE
*/


/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
img
{ max-width: 100%; height: auto; vertical-align: top;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Clearfix
---------------------------------------------------------- */
.clearfix
{
	display: block;
	min-height: 1%;
}
.clearfix:after
{
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix
{
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

a {
  text-decoration: none;
  color: #29abe2; /* 水色 */
}

/* ロールオーバー
-------------------------------------------- */
a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	-moz-opacity: 0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;              /* Safari 1.x */
	zoom: 1;
}



/*
======================================================
  body
--------------------------------------------------- */

html { font-size: 62.5%;}

body {
  font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	-webkit-text-size-adjust: none;
	line-height: 1;
	color: #333;
	word-wrap: break-word;
}

@media screen and (min-width:768px){

  body {
  	font-size: 16px;
  	font-size: 1.6rem;
  }

}

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

  body {
  	font-size: 14px;
  	font-size: 1.4rem;
  }

}


/*
======================================================
  header
--------------------------------------------------- */

.site-branding {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background: rgba(255,255,255,.9);
  transition: .3s;
  -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, .15);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .15);
}

@media screen and (min-width:768px){

  .site-branding { height: 80px;}

}

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

  .site-branding { height: 50px;}

}

.header-bar {
	-js-display: flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media screen and (min-width:768px){

  .header-bar {
    width: 1020px;
    height: 80px;
    margin: 0 auto;
  }

}

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

  .header-bar {
    padding: 0 10px;
    height: 50px;
  }

}


/* ロゴ
---------------------------------------------------- */
@media screen and (min-width:768px){

  .header-logo { width: 285px;}

}

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

  .header-logo { width: 214px;}

}



/* ボタン（ホーム・ランキング）
---------------------------------------------------- */
@media screen and (min-width:768px){

  ul.header-navi {
    width: 300px;
    -js-display: flex;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  ul.header-navi li {
    padding: 0;
    margin: 0 0 0 30px;
  }
  
  ul.header-navi li a {
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    color: #555;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 32px;
    padding: 10px 0 10px 38px;
  }
  
  ul.header-navi li.navi-home a { background-image: url(images/header_icon_home.png);}
  
  ul.header-navi li.navi-ranking a { background-image: url(images/header_icon_ranking.png);}

}

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

  ul.header-navi {
    width: 70px;
    height: 50px;
    -js-display: flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  ul.header-navi li {
    width: 32px;
    height: 32px;
  }

  ul.header-navi li a {
    display: block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 32px;
    padding: 0;
    text-indent: -999em;
  }
  
  ul.header-navi li.navi-home a { background-image: url(images/header_icon_home.png);}
  
  ul.header-navi li.navi-ranking a { background-image: url(images/header_icon_ranking.png);}

}


/* 包括ボックス
---------------------------------------------------- */
@media screen and (min-width:768px){

  .container { padding-top : 80px; }

}

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

  .container { padding-top : 50px; }

}

/*
======================================================
  メインビジュアル
--------------------------------------------------- */

@media screen and (min-width:768px){

  .main-visual,
  .main-visual.ranking {
    width: 100%;
    height: 420px;
    background-color: #f79dbe;
    background-image: url(images/header_back.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1280px;
    text-align: center;
    margin-bottom: 30px;
  }
  
  .main-visual.ranking {
    background-image: url(images/header_back_ranking.jpg);
    margin-bottom: 0;
  }

}

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

  .main-visual,
  .main-visual.ranking {
    width: 100%;
    height: 370px;
    background-color: #f79dbe;
    background-image: url(images/header_back_sp.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 640px;
    text-align: center;
  }
  
  .main-visual.ranking {
    background-image: url(images/header_back_ranking_sp.jpg);
    height: 260px;
    margin-bottom: 0;
  }

}


/* タイトル
---------------------------------------------------- */
@media screen and (min-width:768px){

  .site-title {
    width: 773px;
    margin: 0 auto;
    padding: 15px 0 0 0;
  }
  
  .main-visual.ranking .site-title {
    width: 800px;
    padding: 15px 0 0 0;
    margin: 0 auto;
    text-align: left;
  }
  
  .main-visual.ranking .site-title img { width: 758px;}

}

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

  .site-title {
    width: 275px;
    margin: 0 auto;
    padding: 15px 0 0 0;
  }

}


/* ランキングを見る
---------------------------------------------------- */
@media screen and (min-width:768px){

  .btn-ranking {
    width: 320px;
    margin: 0 auto;
    padding: 10px 0 0 0;
  }

}

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

  .btn-ranking {
    width: 280px;
    margin: 0 auto;
    padding: 0 0 0 0;
  }

}


/*
======================================================
  content
--------------------------------------------------- */

/* パンくず
---------------------------------------------------- */

.breadcrumbs { color: #808080;}

.breadcrumbs i { margin-right: 3px;}

.breadcrumbs span span { margin: 0 4px;}

@media screen and (min-width:768px){

  .breadcrumbs {
    width: 1020px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    font-size: 12px;
    font-size: 1.2rem;
  }

}

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

  .breadcrumbs {
    padding: 12px 15px 10px 15px;
    font-size: 1.0rem;
    line-height: 1.3;
  }

}

@media screen and (min-width:768px){

  .site-content {
    width: 1020px;
    margin: 0 auto;
    padding: 30px 0 0 0;
    -js-display: flex;
    display: flex;
    justify-content: space-between;
  }
  
  .content-area { width: 720px;}
  
  .secondary { width: 280px;}
  
  .site-main section {
    /* margin-top : -80px;
    padding-top : 80px; */
  }

}

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

  .site-main section {
    /* margin-top : -50px;
    padding-top : 50px; */
  }

}


/*
======================================================
  side
--------------------------------------------------- */


/*
======================================================
  footer
--------------------------------------------------- */

.foot{
 color: #fff;
}

.site-footer {
  text-align: center;
  padding: 30px 0;
  background-color: #f79dbe;
}

.site-info {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #fff;
}

@media screen and (max-width:767px){
    
  .site-footer { padding: 15px 0;}
  
  .site-info { font-size: 1.0rem;}

  .site-info span { display: block;}

}

/* ページトップへ戻るボタン
---------------------------------------------------- */
#page-top {
    position: fixed;
}

#page-top a {
  background: rgba(0,0,0,.5);
  text-decoration: none;
  color: #fff;
  text-align: center;
  display: block;
}

@media screen and (min-width:768px){

  #page-top {
      bottom: 40px;
      right: 40px;
      font-size: 28px;
  }
  
  #page-top a {
    width: 60px;
    height: 60px;
    padding: 12px 0 0 0;
  	border-radius: 30px; /* CSS3草案 */
  	-webkit-border-radius: 30px; /* Safari,Google Chrome用 */
  	-moz-border-radius: 30px; /* Firefox用 */
  }
  
  #page-top a:hover {
      text-decoration: none;
      background: rgba(0,0,0,.3);
  }

}

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

  #page-top {
      bottom: 15px;
      right: 15px;
      font-size: 28px;
  }

  #page-top a {
    background: rgba(0,0,0,.5);
    text-decoration: none;
    color: #fff;
    width: 60px;
    height: 60px;
    padding: 12px 0 0 0;
  	border-radius: 30px;
  }

}


/*
======================================================
  検索
--------------------------------------------------- */

.search-area,
.search-area2 {
  background-image: url(images/search_back.png);
  background-repeat: repeat;
  border-top: 4px solid #C7B299;
}

@media screen and (min-width:768px){

  .search-area {
    width: 1020px;
    margin: 0 auto;
    padding: 6px 20px 20px 20px;
    text-align: center;
  }
  
  .search-area2 {
    width: 100%;
    padding: 6px 20px 20px 20px;
    margin-bottom: 30px;
  }

}

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

  .search-area,
  .search-area2 {
    padding: 10px 10px 10px 10px;
    margin-bottom: 30px;
  }

}

@media screen and (min-width:768px){

  .search-area h2,
  .search-area2 h2 {
    width: 535px;
    margin: 0 auto;
  }

}

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

  .search-area h2,
  .search-area2 h2 {
    width: 219px;
    margin: 0 auto;
  }

}

.search-form { background-color: #fff;}

@media screen and (min-width:768px){

  .search-form { padding: 20px;}

}

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

  .search-form { padding: 10px;}

}

.search-form table {
  width: 100%;
  margin: 0 0 30px 0;
}

.search-form table th,
.search-form table td {
  border-bottom: 1px dotted #d5c4a9; /* 薄いベージュ */
  padding: 10px 0;
  line-height: 1.8;
}

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

  .search-form table th,
  .search-form table td {
    display: block;
    border-bottom: none;
  }

}

.search-form table th {
  color: #a68349; /* 茶色 */
  font-weight: bold;
  width: 200px;
  text-align: center;
  padding: 10px 0;
}

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

  .search-form table th {
    background-color: #d5c4a9; /* 薄いベージュ */
    width: 100%;
    color: #fff;
    padding: 4px 0;
  }

}

.search-form table td {
  text-align: left;
  padding: 10px 0 10px 20px;
}

@media screen and (min-width:768px){

  .search-form table td label {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
  }

}

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

  .search-form table td label { display: block;}

}

.search-form table td label input { margin: 0 4px 0 0;}

@media screen and (min-width:768px){

  .search-form table td label input {
    margin: 0 4px 0 0;
    vertical-align: 0.1em;
  }

}

.btn-search {
  text-align: center;
  padding: 0 0 15px 0;
}

/* この条件で検索するボタン
---------------------------------------------------- */
.btn-search input {
  display: block;
  width: 340px;
  height: 61px;
  margin: 0 auto;
  background-image: url(images/btn_search.png);
  background-size: 340px;
  text-indent: -999em;
}

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

  .btn-search input {
    display: block;
    width: 280px;
    height: 50px;
    margin: 0 auto;
    background-image: url(images/btn_search.png);
    background-size: 280px;
    text-indent: -999em;
  }

}

p.now {
  color: #808080;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  padding: 0 0 10px 0;
}


/*
======================================================
  検索結果
--------------------------------------------------- */

.feas-result { margin-bottom: 40px;}

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

  .feas-result {
    padding: 0 15px;
    margin-bottom: 20px;
  }

}

.feas-result h2 {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.4;
  margin-bottom: 20px;
  background-color: #d9f2fa;
  padding: 20px;
  border-radius: 4px; /* CSS3草案 */
  -webkit-border-radius: 4px; /* Safari,Google Chrome用 */
  -moz-border-radius: 4px; /* Firefox用 */
}

.feas-result h2 strong {
  color: #E5749D;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
}

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

  .feas-result h2 {
    padding: 10px;
    font-size: 1.6rem;
  }
  
  .feas-result h2 strong { font-size: 2.0rem;}

}

.feas-result p {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.8;
  padding: 0 0 30px 0;
}

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

  .feas-result p {
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 0 0 20px 0;
  }

}

#result-hyo { width: 100%;}

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

  #result-hyo {
    overflow: auto; /*tableをスクロールさせる*/
    white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/
  }

  #result-hyo::-webkit-scrollbar{ /*tableにスクロールバーを追加*/
    height: 5px;
  }
  
  #result-hyo::-webkit-scrollbar-track{ /*tableにスクロールバーを追加*/
    background: #F1F1F1;
  }
  
  #result-hyo::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/
    background: #BCBCBC;
  }
  
  #result-hyo table td.name-box {
    word-wrap: normal;
  }

}

#result-hyo table {
  width: 100%;
  border-left: 1px solid #d5c4a9;
  border-top: 1px solid #d5c4a9;
}

#result-hyo table th,
#result-hyo table td {
  padding: 10px;
  line-height: 1.4;
  border-right: 1px solid #d5c4a9;
  border-bottom: 1px solid #d5c4a9;
}

#result-hyo table th {
  text-align: center;
  white-space: nowrap;
  background-color: #f8f2ec;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.6;
}

#result-hyo table th.name-box,
#result-hyo table td.name-box {
  width: 140px;
  word-wrap: normal;
}

#result-hyo table th.link-box { width: 90px;}

#result-hyo table td { text-align: center;}

#result-hyo table td a {
  font-size: 13px;
  font-size: 1.3rem;
}

.feas-result #result-hyo table td.name-box a {
  display: block;
  line-height: 1.4;
}

#result-hyo table td img.size-medium {
  display: block;
  width: 60px;
  margin: 0 auto 5px auto;
}

#result-hyo table td img.btn-detail { width: 90px;}


/*
======================================================
  比較表
--------------------------------------------------- */

.hikakuhyo { margin-bottom: 30px;}

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

  .hikakuhyo h2 {
    text-align: center;
    padding: 0 15px;
    margin: 0 auto 10px auto;
  }
  
  .hikakuhyo h2 img { max-width: 320px;}
  
  .hikakuhyo-body { padding: 0 10px;}

}

.hikakuhyo-bottom {
  background-image: url(images/hikakuhyo_bottom.png);
  background-repeat: no-repeat;
  background-size: 720px;
  height: 72px;
}

.hikakuhyo-bottom ul {
	display: table;
	table-layout: fixed;
	width: 590px;
	margin: 0 0 0 130px;
	padding: 7px 0 0 0;
}

.hikakuhyo-bottom ul li {
  display: table-cell;
  text-align: center;
}

.hikakuhyo-bottom ul li img { width: 99px;}

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

  .hikakuhyo-body { padding: 0 15px;}
  
  .hikakuhyo-body table {
      border-left: 1px solid #d5c4a9;
      border-top: 1px solid #d5c4a9;
  }
  
  .hikakuhyo-body th,
  .hikakuhyo-body td {
      border-right: 1px solid #d5c4a9;
      border-bottom: 1px solid #d5c4a9;
      text-align: center;
      padding: 10px 5px;
      width: 25%;
  }
  
  .hikakuhyo-body th {
      font-size: 1.2rem;
      line-height: 1.4;
      background-color: #f8f2ec;
  }
  
  .hikakuhyo-body th.product-img {
      font-size: 1.0rem;
      background-color: #fff;
      color: #a68349;
      vertical-align: top;
      padding: 5px;
  }
  
  .hikakuhyo-body th.product-img img {
      display: block;
      margin: 0 auto;
  }
  
  .hikakuhyo-body th.product-img img.ranking-icon {
      width: 40px;
      margin-bottom: 4px;
  }
  
  .hikakuhyo-body td strong { color: #ed1e79; /* ピンク */ }

}


/*
======================================================
  商品紹介
--------------------------------------------------- */

@media screen and (min-width:768px){

  .product-header {
    background-image: url(images/product_header_back.gif);
    background-repeat: no-repeat;
    background-size: 720px;
    height: 114px;
  }

}

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

  .product-header {
    background-image: url(images/product_header_back_sp.gif);
    background-repeat: no-repeat;
    background-size: 720px;
    background-position: right top;
    padding: 10px 10px 8px 10px;
  }

}

.product-header p {
  color: #fff;
  line-height: 1.4;
}

@media screen and (min-width:768px){

  .product-header p {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 20px 0 0 30px;
  }

}

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

  .product-header p {
    position: relative;
    padding: .5em .75em;
    background-color: #E5749D; /* ピンク */
    font-size: 1.2rem;
    font-weight: normal;
    color: #fff;
  }
  
  .product-header p::after {
    position: absolute;
    top: 100%;
    left: 30px;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 10px solid #E5749D; /* ピンク */
  }

}

@media screen and (min-width:768px){
    
  .product-header h3 {
    background-repeat: no-repeat;
    text-indent: -999em;
    height: 39px;
    margin: 20px 0 0 30px;
  }

  .product.teate .product-header h3 {
    background-image: url(images/sante_title.png);
    background-size: 485px;
  }
  
  .product.liquidbar .product-header h3 {
    background-image: url(images/excellent_title.png);
    background-size: 600px;
  }

  .product.placenta .product-header h3 {
    background-image: url(images/pycnoex_title.png);
    background-size: 400px;
  }

  .product.ayanasu .product-header h3 {
    background-image: url(images/dauglas_title.png);
    background-size: 460px;
  }

  .product.enrichlift .product-header h3 {
    background-image: url(images/nocoa_title.png);
    background-size: 447px;
  }

}

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

  .product-header h3 {
    font-size: 2.8rem;
    line-height: 1.3;
    font-weight: bold;
    padding: 20px 0 0 0;
  }

}


@media screen and (min-width:768px){

  .product-body {
    padding: 30px 0 0 0;
    margin: 0 0 30px 0;
    border-top: 4px solid #efe3d6;
    border-left: 1px solid #efe3d6;
    border-right: 1px solid #efe3d6;
    border-bottom: 1px solid #efe3d6;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
  }

}

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

  .product-body {
    padding: 10px 15px;
    border-top: 4px solid #EFE3D6; /* ベージュ */
  }

}

@media screen and (min-width:768px){

  .product-info {
    width: 670px;
    margin: 0 auto;
    -js-display: flex;
    display: flex;
    justify-content: space-between;
    padding: 0 0 30px 0;
  }
  
  .product-photo { width: 190px;}
  
  .product-text { width: 455px;}

}

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

  .product-photo {
    text-align: center;
    padding: 10px 0;
  }
  
  .product-photo img { width: 100px;}

}

.product-text h4 {
  color: #e5749d;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 20px;
}

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

  .product-text h4 {
    margin-bottom: 10px;
    font-size: 1.8rem;
  }

}

.product-text p { line-height: 1.8;}

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

  .product-text p {
    line-height: 1.6;
    padding: 0 0 1.6em 0;
  }

}


/*
======================================================
  公式サイトを見る・体験レポートを見るボタン
--------------------------------------------------- */

@media screen and (min-width:768px){

  ul.product-btn {
    width: 330px;
    margin: 0 auto;
    -js-display: flex;
    display: flex;
    justify-content: space-between;
    padding: 0 0 30px 0;
  }
  
  ul.product-btn li { width: 330px;}

}

@media screen and (max-width:767px){
    
  ul.product-btn { padding: 0 0 20px 0;}

  ul.product-btn li {
    padding: 0 0 10px 0;
    text-align: center;
  }
  
  ul.product-btn li img { width: 300px;}

}



/*
======================================================
  効果
--------------------------------------------------- */

/* 二重丸
---------------------------------------------------- */
@media screen and (min-width:768px){

  .product-kouka {
    width: 670px;
    margin: 0 auto 20px auto;
  }

}

.kouka-box { background-color: #f8f3e0; /* ベージュ */}

@media screen and (min-width:768px){

  .kouka-box {
  	-js-display: flex;
  	display: flex;
  	align-items: center;
  	margin: 0 0 5px 0;
  	padding: 15px 0;
  }

}

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

  .kouka-box {
    margin: 0 0 10px 0;
    padding: 15px 15px 10px 15px;
  }

}

dl.kouka-1 { text-align: center;}

@media screen and (min-width:768px){

  dl.kouka-1 {
    width: 190px;
    margin: 0 25px 0 0;
  }

}

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

  dl.kouka-1 {
    width: 100%;
    -js-display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 5px 0;
  }

}

dl.kouka-1 dt {
  font-size: 20px;
  font-size: 2.0rem;
  padding: 0 0 10px 0;
}

dl.kouka-1 dd img {
  width: 70px;
}

@media screen and (max-width:767px){
    
  dl.kouka-1 dt { padding: 0;}

  dl.kouka-1 dd img {
    width: 40px;
    margin-left: 10px;
  }

}


/* 詳細表
---------------------------------------------------- */
@media screen and (min-width:768px){

  dl.kouka-2 {
    width: 430px;
    text-align: left;
    line-height: 1.6;
    overflow: hidden;
  }

  dl.kouka-2 dt {
    float: left;
    width: 220px;
    padding: 5px 0;
    color: #a68349;
    font-weight: bold;
  }
  
  dl.kouka-2 dd {
    padding: 5px 0 5px 220px;
    border-bottom: 1px dotted #d5c4a9;
  }

}

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

  dl.kouka-2 {
    width: 100%;
    line-height: 1.6;
    overflow: hidden;
  }
  
  dl.kouka-2 dt {
    float: left;
    width: 160px;
    padding: 5px 0;
    color: #a68349;
  }
  
  dl.kouka-2 dd {
    text-align: right;
    padding: 5px 0 5px 160px;
    border-bottom: 1px dotted #d5c4a9;
  }

}

dl.kouka-2 dd:last-child { border-bottom: none;}

/* イラスト付き
---------------------------------------------------- */

.product-effect dl {
  margin: 0 auto;
  border-bottom: 1px dotted #d5c4a9;
  padding: 15px 0;
}

.product-effect dl:last-child { border-bottom: none;}

@media screen and (min-width:768px){

  .product-effect dl {
    -js-display: flex;
    display: flex;
    justify-content: space-between;
    width: 670px;
  }

  .product-effect dl:last-child { margin: 0 auto 20px auto;}

}

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

  .product-effect dl {
    padding: 5px 0;
    margin-bottom: 10px;
  }

}

@media screen and (min-width:768px){
    
  .product-effect dt {
    width: 190px;
    text-align: center;
  }
  
  .product-effect dt img {
    display: block;
    margin: 0 auto;
  }
  
  .product-effect dt img.star {
    width: 84px;
    margin: 6px 0 0 12px;
  }

}

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

  .product-effect dt {
    width: 100%;
    text-align: center;
    -js-display: flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .product-effect dt img { width: 190px;}

  .product-effect dt img.star { width: 84px;}

}

@media screen and (min-width:768px){

  .product-effect dd {
    width: 455px;
    line-height: 1.8;
  }

}

@media screen and (max-width:767px){
    
  .product-effect dd {
    line-height: 1.6;
    padding: 10px 0 10px 0;
  }

}


/*
======================================================
  写真３点
--------------------------------------------------- */

@media screen and (min-width:768px){

  ul.product-img {
    width: 670px;
    margin: 0 auto 50px auto;
    -js-display: flex;
    display: flex;
    justify-content: space-between;
  }
  
  ul.product-img li { width: 214px;}

}

@media screen and (max-width:767px){
    
  ul.product-img { padding: 0 0 30px 0;}

  ul.product-img li { padding: 0 0 10px 0;}

}



/*
======================================================
  総合評価
--------------------------------------------------- */

.sogo {
  background-image: url(images/sogo_back.png);
  background-repeat: repeat;
  position: relative;
}

@media screen and (min-width:768px){

  .sogo {
    width: 670px;
    margin: 0 auto 30px auto;
  }

}

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

  .sogo { margin: 0 auto 30px auto;}

}

.sogo h4 {
  width: 126px;
  height: 71px;
  position: absolute;
  top: -20px;
  left: 25px;
}

@media screen and (min-width:768px){

  .sogo h4 {
    width: 126px;
    height: 71px;
    position: absolute;
    top: -20px;
    left: 25px;
    background-image: url(images/sogo_title.png);
    background-repeat: no-repeat;
    background-size: 126px;
    text-indent: -999em;
  }

}

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

  .sogo h4 {
    width: 163px;
    height: 71px;
    position: absolute;
    top: -20px;
    left: 70px;
    background-image: url(images/sogo_title_sp.png);
    background-repeat: no-repeat;
    background-size: 163px;
    text-indent: -999em;
  }

}

@media screen and (min-width:768px){

  .sogo-inner {
    margin: 0 30px;
    background-image: url(images/sogo_illust.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 152px;
    padding: 65px 160px 15px 0;
  }

}

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

  .sogo-inner { padding: 60px 15px 15px 15px;}

}

.sogo-inner p {
  line-height: 1.8;
  padding: 0 0 1.8em 0;
}

.sogo-inner p:last-child { padding: 0;}

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

  .sogo-inner p {
    line-height: 1.6;
    padding: 0 0 1.6em 0;
  }

}

/*
======================================================
  サイドバー
--------------------------------------------------- */

/* 見出し
---------------------------------------------------- */
@media screen and (min-width:768px){

  .ranking-product h3,
  .ranking-entry h3,
  .new-entry h3 {
    background-repeat: no-repeat;
    background-size: 280px;
    text-indent: -999em;
  }
  
  .ranking-product h3 {
    background-image: url(images/side_ranking_product.gif);
    height: 74px;
  }
  
  .ranking-entry h3 {
    background-image: url(images/side_ranking_entry.gif);
    height: 74px;
  }
  
  .new-entry h3 {
    background-image: url(images/side_new_entry.gif);
    height: 54px;
  }

}

@media screen and (max-width:767px){
    
  .ranking-product h3,
  .ranking-entry h3,
  .new-entry h3 {
    background-repeat: no-repeat;
    font-weight: bold;
    font-size: 1.8rem;
  }
  
  .ranking-product h3 {
    background-color: #a4d9ed; /* 薄い水色 */
    background-image: url(images/side_ranking_product_sp.png);
    background-size: 70px;
    background-position: 10px bottom;
    padding: 12px 0 12px 60px;
  }
  
  .ranking-entry h3 {
    background-color: #c5e7d4; /* 薄いグリーン */
    background-image: url(images/side_ranking_entry_sp.png);
    background-size: 70px;
    background-position: 10px bottom;
    padding: 12px 0 12px 60px;
  }
  
  .new-entry h3 {
    background-image: url(images/side_new_entry_sp.gif);
    background-position: left center;
    background-size: 640px;
    padding: 12px 0 12px 90px;
  }

}


/* 枠
---------------------------------------------------- */
@media screen and (min-width:768px){

  .ranking-product ul,
  .ranking-entry ul,
  .new-entry ul {
  	-webkit-border-top-left-radius: 0px;
  	-webkit-border-top-right-radius: 0px;
  	-webkit-border-bottom-right-radius: 6px;
  	-webkit-border-bottom-left-radius: 6px;
  	-moz-border-radius-topleft: 0px;
  	-moz-border-radius-topright: 0px;
  	-moz-border-radius-bottomright: 6px;
  	-moz-border-radius-bottomleft: 6px;
  	margin-bottom: 20px;
  }
  
  .ranking-product ul { border: 1px solid #FFCAD1; /* 薄いピンク */ }

  .ranking-entry ul { border: 1px solid #c5e7d4; /* 薄いグリーン */ }

  .new-entry ul { border: 1px solid #d5c4a9; /* 薄いベージュ */ }

}

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

  .ranking-product ul,
  .ranking-entry ul,
  .new-entry ul { margin-bottom: 20px; }

}

.ranking-product ul li { border-bottom: 1px dotted #FFCAD1; /* 薄い水色 */ }

.ranking-entry ul li { border-bottom: 1px dotted #c5e7d4; /* 薄いグリーン */ }

.ranking-entry ul li:last-child,
.new-entry ul li:last-child { border: none; }

.new-entry ul li { border-bottom: 1px dotted #d5c4a9; /* 薄いベージュ */ }


/* BBクリーム総合ランキング
---------------------------------------------------- */

@media screen and (min-width:768px){

  .ranking-product ul li.ranking-more {
    border: none;
    padding: 10px 20px 13px 20px;
  }

}

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

  .ranking-product ul li.ranking-more {
    border: none;
    padding: 15px 40px 13px 40px;
  }

}

.ranking-product ul li a {
  display: block;
  padding: 8px 0;
  color: #555;
}

.ranking-product ul li.ranking-more a {
  color: #fff;
  font-weight: bold;
  background-color: #e5749d;
  padding: 15px 15px 13px 15px;
  border-radius: 4px; /* CSS3草案 */
  -webkit-border-radius: 4px; /* Safari,Google Chrome用 */
  -moz-border-radius: 4px; /* Firefox用 */
  box-shadow: 0px 3px 0px #dc437a;
}

.ranking-product ul li.ranking-more a span {
  display: block;
  background-image: url(images/arrow_white.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 18px;
  padding: 4px 0;
}

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

  .ranking-product ul li.ranking-more a {
    font-size: 1.6rem;
    padding: 15px 15px 12px 15px;
  }

}

@media screen and (min-width:768px){

  .ranking-product ul li dl {
    -js-display: flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    background-image: url(images/arrow_blue.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 7px;
  }
  
  .ranking-product ul li dl dt { width: 70px;}
  
  .ranking-product ul li dl dt img { width: 50px;}
  
  .ranking-product ul li dl dd {
    width: 190px;
    text-align: left;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
  }

}

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

  .ranking-product ul li { padding: 0 15px;}
  
  .ranking-product ul li dl {
      display: table;
      width: 100%;
      background-image: url(images/arrow_blue.png);
      background-repeat: no-repeat;
      background-position: right center;
      background-size: 7px;
  }
  
  .ranking-product ul li dl dt {
      display: table-cell;
      vertical-align: middle;
      width: 70px;
  }
  
  .ranking-product ul li dl dt img { width: 50px;}
  
  .ranking-product ul li dl dd {
      display: table-cell;
      vertical-align: middle;
      text-align: left;
      font-size: 1.8rem;
      font-weight: bold;
  }

}


/* 人気記事ランキング・最新記事
---------------------------------------------------- */

.ranking-entry ul li a,
.new-entry ul li a {
  display: block;
  padding: 12px 0;
}

@media screen and (min-width:768px){

  .ranking-entry ul li dl,
  .new-entry ul li dl {
  	-js-display: flex;
  	display: flex;
  	justify-content: space-between;
  	width: 250px;
  	margin: 0 auto;
  }

  .ranking-entry ul li dl dt,
  .new-entry ul li dl dt {
    width: 80px;
    padding-top: 3px;
  }
  
  .ranking-entry ul li dl dd,
  .new-entry ul li dl dd { width: 160px;}

}

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

  .ranking-entry ul li,
  .new-entry ul li { padding: 0 15px;}

  .ranking-entry ul li dl,
  .new-entry ul li dl {
    width: 100%;
    overflow: hidden;
  }

  .ranking-entry ul li dl dt,
  .new-entry ul li dl dt {
    float: left;
    width: 80px;
    padding-top: 3px;
    padding-bottom: 2px;
  }
  
  .ranking-entry ul li dl dd,
  .new-entry ul li dl dd { padding: 0 0 0 95px;}

}


.ranking-entry ul li a dl dd h4,
.new-entry ul li a dl dd h4 {
  color: #a68349; /* 茶色 */
  line-height: 1.3;
  margin-bottom: 4px;
}

.ranking-entry ul li a dl dd h4 span.views {
  font-size: 12px;
  font-size: 1.2rem;
  color: #ed1e79; /* ピンク */
}

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

  .ranking-entry ul li a dl dd h4,
  .new-entry ul li a dl dd h4 {
    font-size: 1.6rem;
    margin-bottom: 6px;
  }

}

.ranking-entry ul li a dl dd p.entry-excerpt,
.new-entry ul li a dl dd p.entry-excerpt {
  font-size: 12px;
  font-size: 1.2rem;
  color: #555;
  line-height: 1.4;
  margin-bottom: 6px;
}

.ranking-entry ul li a dl dd p.entry-more,
.new-entry ul li a dl dd p.entry-more {
  color: #29abe2; /* 水色 */
  font-size: 12px;
  font-size: 1.2rem;
  text-align: right;
  background-image: url(images/arrow_blue.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 7px;
  padding-right: 12px;
}


/*
======================================================
  ランキングページ
--------------------------------------------------- */

/* タイトル
---------------------------------------------------- */
.ranking-title {
  text-align: center;
  padding: 10px 0 10px 0;
}

@media screen and (min-width:768px){

  .ranking-title img { width: 650px;}

}

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

  .ranking-title { padding: 10px;}

}


/* 商品名タイトル
---------------------------------------------------- */

@media screen and (min-width:768px){

  .ranking-header {
    background-image: url(images/product_header_back.gif);
    background-repeat: no-repeat;
    background-size: 720px;
    height: 114px;
  }

}

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

  .ranking-header {
    background-image: url(images/product_header_back_sp.gif);
    background-repeat: no-repeat;
    background-size: 720px;
    background-position: right top;
    padding: 10px 10px 8px 10px;
  }

}

@media screen and (min-width:768px){

  .ranking-header p {
    color: #fff;
    font-size: 14px;
    font-size: 1.4rem;
    padding: 22px 0 20px 130px;
  }

  .product.ayanasu .ranking-header p,
  .product.enrichlift .ranking-header p {
    padding: 22px 0 20px 100px;
  }

}

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

  .ranking-header p {
    position: relative;
    padding: .5em .75em;
    background-color: #E5749D; /* ピンク */
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: normal;
    color: #fff;
    margin: 0;
  }
  
  .ranking-header p::after {
    position: absolute;
    top: 100%;
    left: 30px;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 10px solid #E5749D; /* ピンク */
  }

}

@media screen and (min-width:768px){
    
  .ranking-name {
    width: 720px;
    -js-display: flex;
    display: flex;
    justify-content: space-between;
  }

  .ranking-name .ranking-icon {
    width: 120px;
    text-align: right;
  }

  .product.ayanasu .ranking-name .ranking-icon,
  .product.enrichlift .ranking-name .ranking-icon {
    width: 90px;
    text-align: right;
  }
  
  .ranking-name .ranking-icon img {
    width: 109px;
    margin: -48px 0 0 0;
  }

  .product.ayanasu .ranking-name .ranking-icon img,
  .product.enrichlift .ranking-name .ranking-icon img {
    width: 80px;
    margin: -34px 0 0 0;
  }

  .ranking-name h3 {
    width: 580px;
    background-repeat: no-repeat;
    text-indent: -999em;
    height: 39px;
    margin: 0;
  }
  
  .product.teate .ranking-name h3 {
    background-image: url(images/sante_title.png);
    background-size: 430px;
  }

  .product.liquidbar .ranking-name h3 {
    background-image: url(images/excellent_title.png);
    background-size: 580px;
  }

  .product.placenta .ranking-name h3 {
    background-image: url(images/pycnoex_title.png);
    background-size: 400px;
  }

  .product.ayanasu .ranking-name h3 {
    width: 610px;
    background-image: url(images/dauglas_title.png);
    background-size: 460px;
  }

  .product.enrichlift .ranking-name h3 {
    width: 610px;
    background-image: url(images/nocoa_title.png);
    background-size: 450px;
  }

}

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

  .ranking-name { overflow: hidden;}

  .ranking-name .ranking-icon {
    float: left;
    width: 60px;
    padding: 15px 0 0 0;
    margin: 0;
  }

  .ranking-name h3 {
    font-size: 2.7rem;
    line-height: 1.3;
    font-weight: bold;
    padding: 25px 0 0 70px;
    margin: 0;
  }

}


/*
======================================================
  記事ページ
--------------------------------------------------- */

.entry { padding: 0 0 20px 0;}

/* ヘッダー
---------------------------------------------------- */

@media screen and (min-width:768px){

  .entry-header {
    background-repeat: no-repeat;
    width: 720px;
    height: 220px;
    border-radius: 6px; /* CSS3草案 */
    -webkit-border-radius: 6px; /* Safari,Google Chrome用 */
    -moz-border-radius: 6px; /* Firefox用 */
    position: relative;
    margin: 0 0 30px 0;
    background-color: #E1F2F9;
    background-image: url(images/entry_header_back.png);
    background-position: 30px bottom;
    background-size: 156px;
  }

}

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

  .entry-header {
    background-repeat: no-repeat;
    min-height: 110px;
    margin: 0 0 20px 0;
    background-color: #E1F2F9;
    background-image: url(images/entry_header_back.png);
    background-position: 10px bottom;
    background-size: 80px;
  }

}


/* タイトル
---------------------------------------------------- */

@media screen and (min-width:768px){

  .entry-title {
    font-size: 36px;
    font-size: 3.6rem;
    line-height: 1.3;
    margin: 0 0 0 200px;
    padding: 30px 20px 15px 0;
  }

}

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

  .entry-title {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1.3;
    margin: 0;
    padding: 10px 15px 15px 100px;
  }

}



/* 日付・編集リンク
---------------------------------------------------- */
.entry-meta {
  font-size: 12px;
  font-size: 1.2rem;
  color: #808080;
  text-align: right;
  padding: 0 20px 0 0;
}

@media screen and (min-width:768px){

  .entry-meta {
    position: absolute;
    width: 720px;
    top: 190px;
  }

}


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

  .entry-meta { padding: 0 15px 10px 15px;}

}

.entry-meta span { margin: 0 0 0 15px;}

.entry-meta span i { margin: 0 4px 0 0;}

/* 本文エリア
---------------------------------------------------- */
.entry-content {
  overflow: hidden;
  padding: 0 0 20px 0;
}

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

  .entry-content {
    overflow: hidden;
    padding: 0 15px;
  }

}

/* 見出し
---------------------------------------------------- */
.entry-content h2 {
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.3;
  padding: 1em 0 0.5em 0;
  margin: 0 0 1em 0;
  border-bottom: 1px solid #d5c4a9; /* 薄いベージュ */
}

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

  .entry-content h2 {
    font-size: 2.2rem;
    padding: 0.5em 0 0.5em 0;
    margin: 0 0 0.8em 0;
  }

}

/* 本文
---------------------------------------------------- */
.entry-content p {
  line-height: 1.8;
  padding: 0 0 1.5em 0;
}

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

  .entry-content p { line-height: 1.6;}

}

img.alignright,
img.alignleft,
img.aligncenter,
img.alignnone {
  display: block;
  margin: 0 auto 20px auto;
}

img.aligncenter { margin: 0 auto 20px auto;}

@media screen and (min-width:768px){

  img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
  }
  
  img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
  }

}


/*
======================================================
  前の記事・次の記事
--------------------------------------------------- */

.nav-single {
  border: 1px solid #e2dcd6; /* 濃いベージュ */
  border-radius: 4px;     /* CSS3草案 */
  -webkit-border-radius: 4px; /* Safari,Google Chrome用 */
  -moz-border-radius: 4px;    /* Firefox用 */
  display: table;
  width: 100%;
  margin-bottom: 30px;
}

.nav-single span.nav-previous,
.nav-single span.nav-next {
  width: 50%;
  display: table-cell;
  vertical-align: top;
  padding: 10px 15px;
  position: relative;
}

.nav-single span.nav-previous { border-right: 1px solid #e2dcd6; /* 濃いベージュ */ }

.nav-single span.nav-next { text-align: right;}

.nav-single span.nav-previous::before,
.nav-single span.nav-next::after {
  position: absolute;
  top: 50%;
  margin-top: -8px;
  font-family: 'FontAwesome';
  font-size: 16px;
  color: #e2dcd6; /* 濃いベージュ */
}

.nav-single span.nav-previous::before {
  left: 10px;
  content: "\f053";
}

.nav-single span.nav-next::after {
  right: 10px;
  content: "\f054";
}

.nav-single span.nav-previous a,
.nav-single span.nav-next a {
  display: block;
  line-height: 1.6;
}

.nav-single span.nav-previous a { padding-left: 20px;}

.nav-single span.nav-next a { padding-right: 20px;}

.nav-single span.nav-previous a span,
.nav-single span.nav-next a span {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #9b9088; /* 茶色 */
}


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

  .nav-single span.nav-previous,
  .nav-single span.nav-next {
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 6px 8px;
  }

  .nav-single span.nav-previous::before {
    left: 5px;
    content: "\f053";
  }
  
  .nav-single span.nav-next::after {
    right: 5px;
    font-family: 'FontAwesome';
    content: "\f054";
  }

  .nav-single span.nav-previous a,
  .nav-single span.nav-next a { line-height: 1.5;}

  .nav-single span.nav-previous a { padding-left: 18px;}
    
  .nav-single span.nav-next a { padding-right: 18px;}

  .nav-single span.nav-previous a span,
  .nav-single span.nav-next a span {
    margin-bottom: 2px;
    font-size: 1.1rem;
  }

}


/*
======================================================
  体験レポート
--------------------------------------------------- */

/* ヘッダー
---------------------------------------------------- */

@media screen and (min-width:768px){

  .report-header {
    background-repeat: no-repeat;
    width: 720px;
    height: 220px;
    border-radius: 6px; /* CSS3草案 */
    -webkit-border-radius: 6px; /* Safari,Google Chrome用 */
    -moz-border-radius: 6px; /* Firefox用 */
    margin: 0 0 30px 0;
    padding: 0;
    background-color: #EAF4EF;
    background-image: url(images/report_header_back.png);
    background-position: 460px bottom;
    background-size: 242px;
  	-js-display: flex;
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  }

}

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

  .report-header {
    background-repeat: no-repeat;
    min-height: 110px;
    margin: 0 0 20px 0;
    background-color: #EAF4EF;
    background-image: url(images/report_header_back.png);
    background-position: right bottom;
    background-size: 120px;
  	-js-display: flex;
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  }

}

/* 商品画像
---------------------------------------------------- */
@media screen and (min-width:768px){

  .report-product {
    width: 140px;
    text-align: center;
  }
  
  .report-product img {
    height: 160px;
    width: auto;
  }

}

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

  .report-product {
    width: 70px;
    text-align: center;
  }
  
  .report-product img {
    height: 80px;
    width: auto;
  }

}


/* タイトル
---------------------------------------------------- */

.report-title {
  font-weight: bold;
  color: #E5749D; /* ピンク */
  line-height: 1.2;
}

@media screen and (min-width:768px){

  .report-title {
    width: 580px;
    font-size: 42px;
    font-size: 4.2rem;
    padding: 0 160px 50px 0;
    background-image: url(images/report_title.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 270px;
  }

}

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

  .report-title {
    font-size: 24px;
    font-size: 2.4rem;
    margin: 0;
    padding: 0 80px 28px 0;
    background-image: url(images/report_title.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 140px;
  }

}

/* プロフィール
---------------------------------------------------- */

@media screen and (min-width:768px){

  .report-profile {
  	-js-display: flex;
  	display: flex;
  	justify-content: space-between;
    width: 720px;
    padding: 20px 30px 15px 30px;
    margin: 0 0 10px 0;
  }

}

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

  .report-profile {
  	overflow: hidden;
  	padding: 0 15px;
  	margin: 0 0 10px 0;
  }

}

@media screen and (min-width:768px){

  .report-face {
    width: 120px;
    text-align: right;
  }
  
  .report-face img {
    width: 120px;
    border: 1px solid #e2dcd6; /* 濃いベージュ */
  }

}

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

  .report-face {
    float: left;
    width: 80px;
    margin-right: 10px;
  }
  
  .report-face img {
    width: 80px;
    border: 1px solid #e2dcd6; /* 濃いベージュ */
  }

}

@media screen and (min-width:768px){

  .report-name { width: 500px;}

}

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

  .report-name {
    padding: 0 0 0 90px;
  }

}

.report-name h2 {
  background-image: url(images/search_back.png);
  background-repeat: repeat;
  color: #a68349; /* 茶色 */
  padding: 0.5em 0.75em;
  font-size: 15px;
  font-style: 1.5rem;
  margin-bottom: 15px;
  font-weight: bold;
}

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

  .report-name h2 {
    font-style: 1.2rem;
    margin-bottom: 6px;
    padding: 0.3em 0.75em;
  }

}

@media screen and (min-width:768px){

  .report-profile dl {
    width: 500px;
    overflow: hidden;
  }

  .report-profile dl dt,
  .report-profile dl dd {
    line-height: 1.6;
    color: #a68349; /* 茶色 */
  }
  
  .report-profile dl dt {
    float: left;
    width: 130px;
    padding: 8px 0;
  }
  
  .report-profile dl dd {
    padding: 8px 0 8px 140px;
    border-bottom: 1px dotted #d5c4a9; /* 薄いベージュ */
  }
  
  .report-profile dl dd:last-child { border-bottom: none;}

}

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

  .report-profile dl {
    width: 100%;
    overflow: hidden;
  }

  .report-profile dl dt,
  .report-profile dl dd {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #a68349; /* 茶色 */
  }

  .report-profile dl dt {
    float: left;
    width: 100px;
    padding: 6px 0;
  }

  .report-profile dl dd {
    padding: 6px 0 6px 100px;
    border-bottom: 1px dotted #d5c4a9; /* 薄いベージュ */
  }
  
  .report-profile dl dd:last-child { border-bottom: none;}

}


/* Q&A
---------------------------------------------------- */
.report-qa {
  background-image: url(images/sogo_back.png);
  background-repeat: repeat;
  padding: 20px 30px 10px 30px;
  margin: 0 0 40px 0;
}

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

  .report-qa {
    padding: 15px 15px 10px 15px;
    margin: 0 0 15px 0;
  }

}

.report-qa h2 {
  background-image: url(images/report_qa_title.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 381px;
  height: 41px;
  text-indent: -999em;
  margin-bottom: 20px;
}

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

  .report-qa h2 {
    background-size: 270px;
    height: 30px;
    margin-bottom: 15px;
  }

}

.report-qa dl { margin: 0 0 10px 0;}

.report-qa dt {
  line-height: 1.8;
  background-image: url(images/report_icon_q.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 41px;
  padding: 0.5em 0 0.5em 50px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
}

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

  .report-qa dt {
    background-size: 30px;
    font-size: 1.6rem;
    line-height: 1.6;
    padding: 0.2em 0 0.5em 40px;
  }

}

.report-qa dd {
  line-height: 1.8;
  background-image: url(images/report_icon_a.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 41px;
  padding: 0.5em 0 0.5em 50px;
}

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

  .report-qa dd {
    background-size: 30px;
    line-height: 1.6;
    padding: 0.5em 0 0.5em 40px;
  }

}

/* 詳細日誌
---------------------------------------------------- */
.report-det h2 {
  background-image: url(images/report_det_title.png);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  background-size: 121px;
  line-height: 1.2;
  font-weight: bold;
  background-color: #e5749d; /* ちょっと薄めのピンク */
}

@media screen and (min-width:768px){

  .report-det h2 {
    height: 60px;
    border-radius: 6px;     /* CSS3草案 */
    -webkit-border-radius: 6px; /* Safari,Google Chrome用 */
    -moz-border-radius: 6px;    /* Firefox用 */
    margin: 0 0 20px 0;
    padding: 17px 0 0 60px;
    font-size: 20px;
    font-size: 2.0rem;
  }

}

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

  .report-det h2 {
    padding: 8px 0 8px 50px;
    margin: 0 0 15px 0;
  }

}

.report-det h2 strong {
  color: #fff;
  font-size: 24px;
  font-size: 2.4rem;
}

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

  .report-det h2 strong {
    display: block;
    font-size: 2.0rem;
  }

}

.report-det p {
  line-height: 1.8;
  margin: 0 0 20px 0;
}

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

  .report-det p {
    padding: 0 15px;
    line-height: 1.6;
  }

}

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

  .report-det ul {
    padding: 0 15px;
  }

}

.report-det ul li {
  position: relative;
  padding: 0 0 50px 0;
}

.report-det ul li h3 {
  font-size: 24px;
  font-size: 2.4rem;
  padding: 0 0 6px 0;
  font-weight: bold;
  color: #E5749D; /* ピンク */
  border-bottom: 3px dotted #E5749D; /* ピンク */
  margin: 0 0 15px 0;
}

@media screen and (max-width:767px){
  
  .report-det ul li { padding: 0 0 40px 0;}
  
  .report-det ul li h3 {
    font-size: 1.8rem;
  }

  .report-det ul li p { padding: 0;}

}

.report-det ul li p:last-child {
  margin: 0;
}

.report-det ul li::after {
	font-family: 'FontAwesome';
	content: "\f107";
	color: #d5c4a9; /* 薄いベージュ */
	font-size: 32px;
	position: absolute;
	left: 30px;
	border-bottom: 0px;
}

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

  .report-det ul li::after {
    left: 20px;
  }

}

.report-det ul li:last-child::after {
  content: none;
}