@charset "shift-jis";
/* 5. Review / Enquete Layout
---------------------------------------------------------*/
#page-content-review .page-content-title h3 { height: 110px; padding-top: 10px; background-color: #13d1bd; }
#page-content-review .arrow-down { border-top-color: #13d1bd; }

#review-content-data { padding: 40px; background-color: white; }
#review-content-data:after { content: ''; display: block; clear: both; }

.review-data-03 .review-content-data-title { text-indent: 26px; }
.review-data-03 .review-content-data-evaluate { margin-top: 20px; }

.review-data-04 .review-content-data-title { text-indent: 26px; }
.review-data-04 .review-content-data-evaluate { margin-top: 20px; }

.review-data-05 .review-content-data-title { text-indent: 26px; }
.review-data-05 .review-content-data-evaluate { margin-top: 20px; }

.review-content-data-title { float: left; width: 260px; border-right: 2px solid #f2d251; }

.review-content-data-rating { float: left; padding-top: 25px; padding-left: 50px; text-align: center; }
.review-content-data-rating span { width: 68px; height: 68px; margin-left: 1px; margin-right: 1px; }

.review-content-data-score { float: right; padding-top: 55px; padding-right: 10px; }
.review-content-data-score p { font-size: 22px; }
.review-content-data-score .score-number { font-size: 31px; }

#review-content-voice-container { margin-top: 20px; }

.voice-item { padding: 15px; }
.voice-item:after { content: ''; display: block; clear: both; }
.voice-item.white-back { background-color: white; }

.voice-item-photo { float: left; width: 140px; }
.voice-item-photo img { width: 100%; height: auto; }

.voice-item-text { float: left; width: 480px; margin-left: 15px; }

.voice-item-data:after { content: ''; display: block; clear: both; }

.voice-item-data-rating { float: left; }
.voice-item-data-rating span { width: 34px; height: 34px; }

.voice-item-data-score { float: left; padding-top: 11px; padding-left: 20px; line-height: 1em; }
.voice-item-data-score p { font-size: 16px; }
.voice-item-data-score .score-number { font-size: 20px; }

.voice-item-data-name { float: left; padding-top: 15px; padding-left: 15px; line-height: 1em; }
.voice-item-data-name p { font-size: 15px; font-weight: bold; }
.voice-item-data-name span { font-weight: normal; display: inline-block; margin-left: 4px; }

.voice-item-data-comment h5 { font-size: 23px; font-weight: bolder; margin-top: 5px; }
.voice-item-data-comment p { line-height: 1.8em; margin-top: 5px; }

.voice-item-product { float: right; width: 220px; }

.voice-item-product-label { width: 120px; height: 20px; text-align: center; background-color: #13d1bd; }
.voice-item-product-label span { color: white; font-size: 12px; font-weight: bold; line-height: 22px; }

.voice-item-product-name { margin-top: 10px; }
.voice-item-product-name h7 { font-size: 20px; }

.voice-item-product-image { margin-top: 10px; }
.voice-item-product-image img { width: 160px; height: auto; }

.voice-item-product-link a { margin-top: 5px; }

@media only screen and (max-width: 740px) { #page-content-review .page-content-title h3 { height: auto; padding-top: 10px; padding-bottom: 15px; }
  #page-content-review .page-content-title h3 img { width: 90%; height: auto; }
  #review-content-data { padding: 4%; background-color: white; display: box; display: -webkit-box; }
  #review-content-data:after { content: ''; display: block; clear: both; }
  .review-data-03 .review-content-data-title { text-indent: 0px; }
  .review-data-03 .review-content-data-evaluate { margin-top: 5%; }
  .review-data-04 .review-content-data-title { text-indent: 0px; }
  .review-data-04 .review-content-data-evaluate { margin-top: 5%; }
  .review-data-05 .review-content-data-title { text-indent: 0px; }
  .review-data-05 .review-content-data-evaluate { margin-top: 5%; }
  .review-content-data-title { float: none; width: 36%; height: auto; padding-right: 4%; border-right: 1px solid #f2d251; }
  .review-content-data-title img { width: 100%; height: auto; }
  .review-content-data-evaluate { width: 64%; height: 100%; padding-left: 4%; }
  .review-content-data-rating { float: none; width: 100%; padding-top: 2%; padding-left: 0px; text-align: center; }
  .review-content-data-rating span { width: 10%; height: auto; padding: 9%; margin-left: 0px; margin-right: 0px; background-size: 100% 100%; background-repeat: no-repeat; }
  .review-content-data-score { float: none; width: 100%; padding-top: 5px; padding-right: 0px; }
  .review-content-data-score p { font-size: 13px; }
  .review-content-data-score .score-number { font-size: 17px; }
  #review-content-voice-container { margin-top: 10px; }
  .voice-item { padding: 10px; }
  .voice-item:after { content: ''; display: block; clear: both; }
  .voice-item.white-back { background-color: white; }
  .voice-item-photo { float: left; width: 25%; }
  .voice-item-photo img { width: 100%; height: auto; }
  .voice-item-text { float: none; width: 100%; margin-left: 0px; }
  .voice-item-data { padding-left: 28%; }
  .voice-item-data:after { content: ''; display: block; clear: both; }
  .voice-item-data-evaluate { display: box; display: -webkit-box; }
  .voice-item-data-rating { float: none; width: 72%; }
  .voice-item-data-rating span { width: 10%; height: auto; padding: 9%; background-size: 100% 100%; background-repeat: no-repeat; }
  .voice-item-data-score { float: none; width: 25%; padding-top: 4%; padding-left: 4%; line-height: 1em; }
  .voice-item-data-score p { font-size: 12px; }
  .voice-item-data-score .score-number { font-size: 16px; }
  .voice-item-data-name { float: none; padding-top: 5px; padding-left: 0px; line-height: 1em; }
  .voice-item-data-name p { font-size: 14px; font-weight: bold; }
  .voice-item-data-name span { font-weight: normal; display: inline-block; margin-left: 4px; }
  .voice-item-data-comment { margin-bottom: 10px; }
  .voice-item-data-comment h5 { font-size: 16px; font-weight: bolder; margin-top: 5px; }
  .voice-item-data-comment p { line-height: 1.8em; margin-top: 5px; }
  .voice-item-product { float: none; width: 100%; }
  .voice-item-product:after { content: ''; display: block; clear: both; }
  .voice-item-product-label { width: 100px; height: 20px; margin-left: 50%; text-align: center; background-color: #13d1bd; }
  .voice-item-product-label span { color: white; font-size: 12px; font-weight: bold; line-height: 22px; }
  .voice-item-product-name { margin-top: 5px; margin-left: 50%; }
  .voice-item-product-name h7 { font-size: 20px; }
  .voice-item-product-image { margin-top: 0px; float: left; width: 45%; margin-top: -50px; }
  .voice-item-product-image img { width: 100%; height: auto; }
  .voice-item-product-link { margin-top: 15px; margin-left: 50%; }
  .voice-item-product-link a { margin-top: 5px; } }
#page-content-enquete { margin-top: 80px; }
#page-content-enquete .page-content-title h3 { height: 110px; padding-top: 20px; background-color: #f76a4b; }
#page-content-enquete .arrow-down { border-top-color: #f76a4b; }

#enquete-content-data { padding: 10px 50px 10px 30px; background-color: white; }
#enquete-content-data:after { content: ''; display: block; clear: both; }

.enquete-content-data-graph { float: left; width: 320px; height: 300px; background-position: center center; background-repeat: no-repeat; }
.enquete-content-data-graph p { text-align: center; padding-top: 120px; letter-spacing: -0.025em; line-height: 1.4em; color: #ff9908; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; }
.enquete-content-data-graph strong { font-size: 20px; font-weight: bold; }
.enquete-content-data-graph span { color: #3f3f3f; font-size: 13px; }

.data-graph01 { background-image: url(../imgs/review/enquete_graph01.png); }

.data-graph02 { background-image: url(../imgs/review/enquete_graph02.png); }

.data-graph03 { background-image: url(../imgs/review/enquete_graph03.png); }
.data-graph03 p { padding-top: 115px; }

.data-graph04 { background-image: url(../imgs/review/enquete_graph04.png); }
.data-graph04 p { padding-top: 115px; }

.data-graph05 { background-image: url(../imgs/review/enquete_graph05.png); }
.data-graph05 p { padding-top: 120px; }

.enquete-content-data-text { float: right; width: 500px; }

.enquete-content-data-text-title { width: 100%; height: 40px; margin-top: 30px; background-color: #f76a4b; }
.enquete-content-data-text-title h5 { color: white; font-size: 20px; line-height: 42px; text-indent: 15px; }

.enquete-content-data-text-description { padding-top: 20px; }
.enquete-content-data-text-description p { font-weight: bold; line-height: 1.8em; }

.enquete-content-data-text-note { padding-top: 20px; }
.enquete-content-data-text-note p { color: #5b5b5b; font-size: 12px; }

#enquete-content-result { margin-top: 20px; }

#enquete-content-result-container { border-bottom: 2px solid #c7c7c7; }
#enquete-content-result-container:after { content: ''; display: block; clear: both; }

.result-item { float: left; width: 440px; height: 160px; padding-top: 30px; }
.result-item:after { content: ''; display: block; clear: both; }
.result-item.bottom-border { border-bottom: 2px solid #c7c7c7; }
.result-item.item-odd { margin-right: 40px; }
.result-item.item-long { height: 180px; }

.result-item-photo { float: left; width: 100px; background-color: white; }
.result-item-photo img { width: 100%; height: auto; }

.result-item-comment { float: right; width: 320px; }
.result-item-comment p { font-size: 13px; line-height: 1.7em; }

#enquete-content-explanation { margin-top: 40px; }

#enquete-content-explanation-container:after { content: ''; display: block; clear: both; }

.explanation-item { width: 440px; padding-bottom: 25px; border: 1px solid #e5e5e5; background-color: white; }
.explanation-item.left-item { float: left; }
.explanation-item.right-item { float: right; }

.explanation-item-point { text-align: center; margin-bottom: 10px; }
.explanation-item-point h5 { height: 60px; background-color: #f76a4b; color: white; font-size: 20px; line-height: 62px; text-indent: -30px; position: relative; }
.explanation-item-point h5 span { display: block; width: 32px; height: 32px; position: absolute; top: 14px; right: 85px; color: #f76a4b; line-height: 35px; text-indent: 0px; background-image: url(../imgs/review/enquete_explanation_point_bg.png); }
.explanation-item-point .arrow-down { border-left-width: 12px; border-right-width: 12px; border-top-width: 12px; }

.explanation-item-text { padding-left: 30px; padding-right: 30px; }
.explanation-item-text strong { display: block; margin-bottom: 8px; font-size: 16px; font-weight: bold; }
.explanation-item-text p { line-height: 1.7em; }
.explanation-item-text small { display: block; margin-top: 10px; font-size: 11px; line-height: 1.6em; }

.explanation-item-link { margin-top: 25px; padding-left: 30px; padding-right: 30px; }

@media only screen and (max-width: 740px) { #page-content-enquete { margin-top: 80px; }
  #page-content-enquete .page-content-title h3 { height: auto; padding-top: 15px; padding-bottom: 15px; }
  #page-content-enquete .page-content-title h3 img { width: 90%; height: auto; }
  #enquete-content-data { padding: 10px; position: relative; }
  .enquete-content-data-graph { width: 50%; height: auto; padding-top: 18%; padding-bottom: 18%; margin-top: 40px; background-size: contain; }
  .enquete-content-data-graph p { padding-top: 4%; line-height: 1.4em; font-size: 8px; }
  .enquete-content-data-graph strong { font-size: 10px; font-weight: bold; }
  .enquete-content-data-graph span { color: #3f3f3f; font-size: 8px; }
  .data-graph01 { background-image: url(../imgs/review/enquete_graph01.png); }
  .data-graph02 { background-image: url(../imgs/review/enquete_graph02.png); }
  .data-graph03 { background-image: url(../imgs/review/enquete_graph03.png); }
  .data-graph04 { background-image: url(../imgs/review/enquete_graph04.png); }
  .data-graph05 { background-image: url(../imgs/review/enquete_graph05.png); }
  .enquete-content-data-text { float: none; width: 100%; position: relative; }
  .enquete-content-data-text-title { width: 100%; height: 30px; margin-top: 0px; background-color: #f76a4b; position: absolute; top: 0; }
  .enquete-content-data-text-title h5 { color: white; font-size: 15px; font-weight: bold; line-height: 32px; text-indent: 10px; }
  .enquete-content-data-text-description { padding-left: 50%; padding-top: 40px; }
  .enquete-content-data-text-description p { font-size: 12px; line-height: 1.6em; }
  .enquete-content-data-text-note { padding-left: 50%; padding-top: 10px; }
  .enquete-content-data-text-note p { font-size: 10px; }
  #enquete-content-result { margin-top: 0px; }
  #enquete-content-result-container { border-bottom: none; padding-left: 10px; padding-right: 10px; }
  .result-item { float: none; width: 100%; height: auto; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #c7c7c7; }
  .result-item.bottom-border { border-bottom: 1px solid #c7c7c7; }
  .result-item.item-odd { margin-right: 0px; }
  .result-item.item-long { height: auto; }
  .result-item-photo { width: 20%; background-color: white; }
  .result-item-comment { width: 80%; padding-left: 10px; }
  #enquete-content-explanation { margin-top: 30px; }
  .explanation-item { width: 100%; padding-bottom: 15px; margin-bottom: 15px; border: 1px solid #e5e5e5; background-color: white; }
  .explanation-item.left-item { float: none; }
  .explanation-item.right-item { float: none; }
  .explanation-item-point { text-align: center; margin-bottom: 10px; }
  .explanation-item-point h5 { height: 40px; background-color: #f76a4b; color: white; font-size: 16px; font-weight: bold; line-height: 40px; text-indent: -30px; position: relative; }
  .explanation-item-point h5 span { display: block; width: 24px; height: 24px; position: absolute; top: 8px; right: auto; left: 50%; margin-left: 80px; color: #f76a4b; line-height: 26px; text-indent: 0px; background-image: url(../imgs/sp/review_enquete_explanation_point_bg.png); background-size: 24px 24px; }
  .explanation-item-point .arrow-down { border-left-width: 12px; border-right-width: 12px; border-top-width: 12px; }
  .explanation-item-text { padding-left: 10px; padding-right: 10px; }
  .explanation-item-text strong { display: block; margin-bottom: 8px; font-size: 16px; font-weight: bold; }
  .explanation-item-text p { line-height: 1.7em; }
  .explanation-item-text small { display: block; margin-top: 10px; font-size: 11px; line-height: 1.6em; }
  .explanation-item-link { margin-top: 20px; padding-left: 10px; padding-right: 10px; } }