<!-- 見出し -->
<div class="sectitle">お客様の声</div>
<!-- 自由記述 -->
<p class="Ltext">テキストテキストテキストテキスト</p>
<div class="voice_box">
  <div class="voice_in">
    <!-- 画像 -->
    <div class="voice_box_left">ここに画像</div>
    <div class="voice_box_right">
      <!-- 名前・地域など -->
      <h3>○○市○○さん</h3>
      <!-- 文章 -->
      <p>アンケート用紙等の文章が入ります。アンケート用紙の画像のみを載せるのではなく、キーワードが増える為、テキスト化された文章を推奨しております。アンケート用紙等の文章が入ります。アンケート用紙の画像のみを載せるのではなく、キーワードが増える為、テキスト化された文章を推奨しております。アンケート用紙等の文章が入ります。アンケート用紙の画像のみを載せるのではなく、キーワードが増える為、テキスト化された文章を推奨しております。</p>
      <span>※効果には個人差があります。</span>
    </div>
  </div>
</div>

<!-- ボタン表示の場合 -->
<p align="center">
  <a class="square_btn" href="voice">
    <span><i class="fas fa-arrow-circle-right"></i>さらにお客様の声を見る</span>
  </a>
</p>
/* style.css 1942-1954行目 */
.sectitle {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 1em;
    margin-top: 1em;
}

@media (max-width: 763px) {
    .sectitle {
        font-size: 24px;
    }
}

/* style.css 648-655行目 */
.inner p {
    margin: 1em 0 1.8em;
    line-height: 1.68;
    padding: 0px 24px;
    word-wrap: break-all;
}

@media (max-width: 763px) {
    .inner p {
        padding: 0px 16px;
        font-size: 14px;
    }
}

/* style.css 87行目 */
.Ltext {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

/*お客様の声 style.css 2458-2557行目
==================================================================================================*/
.voice_box {
    width: 100%;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    padding: 8px 0;
    border-radius: 3px;
}

.voice_in {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.voice_in:after,
.voice_in:before {
    clear: both;
    content: "";
    display: block;
}


.voice_box_right {
    width: 58%;
    float: left;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.voice_box_right h3 {
    padding: 0px 8px;
    margin: 18px 0px 0 7px;
}

.voice_box_right span {
    display: block;
    font-size: 8px;
    text-align: right;
}


.voice_box_left {
    float: left;
    width: 35%;
    margin-right: auto;
    margin-left: auto;
    padding: 16px;
    text-align: center;
}

#main .voice_in p {
    font-size: 16px;
    margin: 8px auto 0;

}

@media (max-width: 763px) {
    .voice_box {
        float: none;
        width: 94%;
        margin-right: auto;
        margin-left: auto;
        padding: 0 0px 24px;
        text-align: left;
    }

    .voice_box_left {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        text-align: center;
        padding: 0;
        float: none;
    }

    .voice_box_right {
        float: left;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 0px;
        text-align: left;
    }

    .voice_in {
        width: 100%;
    }

    #main .voice_in p {
        margin: 0.5em 0 0 0;
        padding: 0px 20px;
        text-align: justify;
        font-size: 14px;
    }
}

/* ボタン style.css 328-353行目
=============================================================================================== */

.square_btn {
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 3px;
    width: 100%;
    max-width: 350px;
    background: #ff9800;
    border-radius: 1.9rem;
    color: #fff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    margin-top: 0.2em;
    font-size: 24px;
}

@media (max-width: 763px) {
    .square_btn {
        font-size: 18px;
        width: 82%;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.