@charset "utf-8";
/* ==========================================================================
   voice.css  ―  お客様の声ページ専用スタイル
   ※既存CSS（reset/common/layout/page）および column.css / staff.css は
   　一切変更していません。voice配下のページからのみ読み込まれます。
   　配色・書体はコラム・相談員紹介とそろえてあります。
   　（メインカラー #e95377／フォントはサイト共通の指定 css/fonts.css に従います）
   ========================================================================== */

/*------------------ teaser --------------------*/
#teaser.voice{
    background: url(../images/voice/teaser.png)no-repeat center center;
    background-size: cover;
}
@media screen and (max-width: 767px) {
    #teaser.voice{
        background: url(../images/voice/teaser_sp.png)no-repeat center center;
        background-size: cover;
    }
}

/*------------------ パンくず --------------------*/
@media screen and (max-width: 767px) {
    #breadcrumb.voice{
        box-sizing: border-box;
        height: auto;
        min-height: 30px;
        padding: 7px 10px;
        line-height: 1.6;
    }
}

/*------------------ 共通 --------------------*/
#voice{
    font-family: var(--font-base);
}
#voice .voice_wrap{
    /* 上の余白 70px → 0（2026年8月14日）
       パンくずと本文の間の空きを、ご相談方法・よくある質問と同じにするためです。
       全ページでそろえてあります（README「パンくずと本文の間」をご覧ください）。 */
    padding: 0 0 100px;
}
#voice .voice_lead{
    margin: 0 auto 50px;
    max-width: 860px;
    font-size: 16px;
    line-height: 2;
    text-align: center;
}
#voice .top_contact{
    background: #fafafa;
}
#voice .top_banner{
    background: #fff;
}
#voice a{
    color: #cc2b5a;
    text-decoration: underline;
}
#voice a:hover{
    text-decoration: none;
}
@media screen and (max-width: 767px) {
    #voice .voice_wrap{
        padding: 0 0 45px;   /* 上 25px → 0（2026年8月14日） */
    }
    #voice .voice_lead{
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 1.9;
        text-align: left;
    }
}

/*------------------ 見出し --------------------*/
/* ★見出しの強弱について（2026年8月14日）

   このページは、見出しも本文も font-weight が 400（標準）のままで、
   **文字の大きさしか違いがありませんでした。**
   丸ゴシック（Zen Maru Gothic）は標準の太さだと線が細く、
   24pxの見出しでも15pxの本文と同じ濃さに見えます。

   そこで、**見出しはすべて太字（700）**にしました。
   使っているのは、すでに読み込んでいる Zen Maru Gothic の700です
   （追加のフォント読み込みはありません）。

   　テーマ見出し（h2）… 25px 太字
   　お声の見出し（h3）… 20px 太字　※このページの主役です
   　集計の小見出し    … 19px 太字
   　カードの見出し    … 18px 太字

   本文は15px・標準のままにして、差がはっきり出るようにしています。 */
#voice h2.voice_hdg{
    position: relative;
    margin: 70px 0 26px;
    padding: 16px 0 16px 22px;
    border-left: 5px solid #e95377;
    background: #fbf3f5;
    color: #1a1a1a;
    font-family: var(--font-head);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.45;
}
#voice h2.voice_hdg:first-child{
    margin-top: 0;
}
#voice h2.voice_hdg .sub{
    display: block;
    margin-top: 6px;
    color: #6e6e6e;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}
#voice h3.voice_hdg3{
    margin: 40px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e6b7c4;
    color: #1a1a1a;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 700;      /* 400 → 700（2026年8月14日） */
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    #voice h2.voice_hdg{
        margin: 40px 0 18px;
        padding: 10px 0 10px 14px;
        border-left-width: 4px;
        font-size: 19px;
    }
    #voice h3.voice_hdg3{
        margin: 28px 0 12px;
        font-size: 16px;
    }
}

/*==========================================================================
  アンケート結果のサマリー（数字）
  ========================================================================== */
#voice .survey_summary{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
#voice .survey_summary .sv_item{
    box-sizing: border-box;
    padding: 24px 14px 22px;
    border: 1px solid #ebebeb;
    border-top: 4px solid #e95377;
    border-radius: 6px;
    background: #fff;
    text-align: center;
}
#voice .survey_summary .sv_item .label{
    color: #333;
    font-size: 13px;
    font-weight: 700;      /* 質問→数字→補足 の順に読めるように太字（2026年8月14日） */
    line-height: 1.7;
}
#voice .survey_summary .sv_item .val{
    margin-top: 10px;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
}
#voice .survey_summary .sv_item .val small{
    margin-left: 3px;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 400;
}
#voice .survey_summary .sv_item .sup{
    margin-top: 8px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.6;
}
#voice .survey_note{
    margin-top: 16px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.85;
}
@media screen and (max-width: 1024px) {
    #voice .survey_summary{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 767px) {
    #voice .survey_summary{
        gap: 10px;
    }
    #voice .survey_summary .sv_item{
        padding: 16px 8px 14px;
    }
    #voice .survey_summary .sv_item .label{
        font-size: 12px;
    }
    #voice .survey_summary .sv_item .val{
        margin-top: 6px;
        font-size: 30px;
    }
    #voice .survey_note{
        font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
    }
}

/*==========================================================================
  ページ内リンク（カテゴリー）
  ========================================================================== */
#voice .voice_index{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 45px;
    padding: 26px 20px;
    border: 1px solid #f0d3db;
    border-radius: 6px;
    background: #fdf7f9;
}
#voice .voice_index .idx_tit{
    width: 100%;
    margin-bottom: 6px;
    color: #cc2b5a;
    font-size: 15px;
    font-weight: 700;      /* 400 → 700（2026年8月14日） */
    text-align: center;
}
#voice .voice_index a{
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #f0d3db;
    border-radius: 40px;
    background: #fff;
    color: #cc2b5a;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: .2s;
}
#voice .voice_index a:hover{
    background: #e95377;
    border-color: #e95377;
    color: #fff;
}
@media screen and (max-width: 767px) {
    #voice .voice_index{
        gap: 8px;
        margin-top: 28px;
        padding: 16px 12px;
    }
    #voice .voice_index .idx_tit{
        font-size: 14px;
    }
    #voice .voice_index a{
        padding: 7px 14px;
        font-size: 13px;
    }
}

/*==========================================================================
  お声のカード
  ========================================================================== */
#voice .voice_list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
#voice .voice_card{
    position: relative;
    box-sizing: border-box;
    padding: 30px 28px 26px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #fff;
    transition: .25s;
}
#voice .voice_card:hover{
    border-color: #f3c4d1;
    box-shadow: 0 8px 24px rgba(233,83,119,.13);
}
#voice .voice_card:before{
    content: '“';
    position: absolute;
    top: 6px;
    right: 20px;
    color: #fbdde5;
    font-family: var(--font-head);
    font-size: 74px;
    line-height: 1;
    pointer-events: none;
}
#voice .voice_card .tag{
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    background: #fdf0f4;
    color: #cc2b5a;
    font-size: 12px;
    line-height: 1.5;
}
/* ★このページの主役です（2026年8月14日に太字化）
   　お声の見出しは、それ自体が本文の要約になっています
   　（READMEの「お客様の声のページについて」をご覧ください）。
   　ここだけ読んでも中身が分かるように、いちばん強くしています。 */
#voice .voice_card h3{
    position: relative;
    margin-top: 14px;
    padding-right: 40px;
    color: #1a1a1a;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;      /* 400 → 700 */
    line-height: 1.55;
}
#voice .voice_card .body{
    margin-top: 14px;
    color: #333;
    font-size: 15px;
    line-height: 1.95;
}
#voice .voice_card .body+.body{
    margin-top: 12px;
}
#voice .voice_card .meta{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed #ebd7de;
}
#voice .voice_card .meta span{
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ececec;
    border-radius: 4px;
    background: #fafafa;
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}
#voice .voice_card .meta span.staff{
    border-color: #f0d3db;
    background: #fdf7f9;
    color: #cc2b5a;
}
#voice .voice_card .meta span.staff a{
    color: #cc2b5a;
    text-decoration: none;
}
#voice .voice_card .meta span.staff a:hover{
    text-decoration: underline;
}
#voice .voice_card .from{
    margin-top: 12px;
    color: #6e6e6e;
    font-size: 13px;
    line-height: 1.7;
    text-align: right;
}
@media screen and (max-width: 767px) {
    #voice .voice_list{
        grid-template-columns: 1fr;
        gap: 14px;
    }
    #voice .voice_card{
        padding: 20px 16px 18px;
    }
    #voice .voice_card:before{
        right: 12px;
        font-size: 56px;
    }
    #voice .voice_card h3{
        margin-top: 10px;
        padding-right: 30px;
        font-size: 17px;
    }
    #voice .voice_card .body{
        font-size: 14px;
        line-height: 1.9;
    }
    #voice .voice_card .meta{
        margin-top: 14px;
        padding-top: 12px;
    }
    #voice .voice_card .meta span{
        font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
    }
    #voice .voice_card .from{
        font-size: 12px;
    }
}

/*==========================================================================
  アンケート集計（横棒）
  ========================================================================== */
#voice .res_list{
    padding: 30px 34px 26px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #fff;
}
#voice .res_item+.res_item{
    margin-top: 20px;
}
#voice .res_item .res_label{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    line-height: 1.6;
}
#voice .res_item .res_label small{
    display: inline-block;
    color: #6e6e6e;
    font-size: 12px;
}
#voice .res_item .res_label .res_val{
    flex: none;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}
#voice .res_item .res_bar{
    margin-top: 8px;
    height: 12px;
    border-radius: 6px;
    background: #f4f4f4;
    overflow: hidden;
}
#voice .res_item .res_bar span{
    display: block;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f3a0b6 0%, #e95377 100%);
}
@media screen and (max-width: 767px) {
    #voice .res_list{
        padding: 18px 16px 16px;
    }
    #voice .res_item+.res_item{
        margin-top: 16px;
    }
    #voice .res_item .res_label{
        font-size: 13px;
    }
    #voice .res_item .res_label{
        display: block;
    }
    #voice .res_item .res_label small{
        display: block;
    }
    #voice .res_item .res_label .res_val{
        display: block;
        margin-top: 2px;
        font-size: 15px;
    }
}

/*==========================================================================
  本文まわり（説明文・注記）
  ========================================================================== */
#voice .voice_txt{
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 2;
}
#voice .voice_txt strong{
    font-weight: 700;
    background: linear-gradient(transparent 62%, #fbdde5 62%);
}
#voice .voice_ul{
    margin-bottom: 24px;
}
#voice .voice_ul li{
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.9;
}
#voice .voice_ul li+li{
    margin-top: 10px;
}
#voice .voice_ul li:before{
    content: '';
    position: absolute;
    left: 2px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e95377;
}
#voice .voice_about{
    box-sizing: border-box;
    margin-top: 30px;
    padding: 30px 36px 26px;
    border: 1px solid #f0d3db;
    border-radius: 6px;
    background: #fdf7f9;
}
#voice .voice_about .about_tit{
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 12px;
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.4;
}
#voice .voice_about .about_tit:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: #e95377;
}
#voice .voice_about p{
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.95;
}
#voice .voice_about p:last-child{
    margin-bottom: 0;
}
#voice .voice_about dl{
    margin-bottom: 16px;
    border-top: 1px solid #f0d3db;
}
#voice .voice_about dt{
    padding: 12px 0 2px;
    color: #cc2b5a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}
#voice .voice_about dd{
    padding: 0 0 12px;
    border-bottom: 1px solid #f0d3db;
    font-size: 14px;
    line-height: 1.85;
}
@media screen and (max-width: 767px) {
    #voice .voice_txt{
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.95;
    }
    #voice .voice_ul li{
        font-size: 15px;
    }
    #voice .voice_about{
        padding: 20px 16px 18px;
    }
    #voice .voice_about .about_tit{
        font-size: 17px;
    }
    #voice .voice_about p,
    #voice .voice_about dd{
        font-size: 14px;
    }
}

/*==========================================================================
  Q&A
  ========================================================================== */
#voice .qa_list{
    margin-bottom: 10px;
}
#voice .qa_item{
    padding: 24px 28px 20px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #fff;
}
#voice .qa_item+.qa_item{
    margin-top: 14px;
}
#voice .qa_item .q{
    position: relative;
    padding-left: 36px;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1.6;
}
#voice .qa_item .q:before{
    content: 'Q';
    position: absolute;
    left: 0;
    top: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e95377;
    color: #fff;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 26px;
    text-align: center;
}
#voice .qa_item .a{
    margin-top: 14px;
    padding-left: 36px;
    font-size: 15px;
    line-height: 1.95;
}
@media screen and (max-width: 767px) {
    #voice .qa_item{
        padding: 16px 16px 14px;
    }
    #voice .qa_item .q{
        padding-left: 30px;
        font-size: 16px;
    }
    #voice .qa_item .q:before{
        width: 22px;
        height: 22px;
        font-size: 13px;
        line-height: 22px;
    }
    #voice .qa_item .a{
        margin-top: 10px;
        padding-left: 30px;
        font-size: 14px;
    }
}

/*==========================================================================
  関連ページへの導線
  ========================================================================== */
#voice .voice_links{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 10px;
}
#voice .voice_links a{
    display: block;
    box-sizing: border-box;
    padding: 22px 22px 20px;
    border: 1px solid #ebebeb;
    border-top: 4px solid #e95377;
    border-radius: 6px;
    background: #fff;
    color: #111;
    text-decoration: none;
    transition: .25s;
}
#voice .voice_links a:hover{
    border-color: #f3c4d1;
    border-top-color: #e95377;
    box-shadow: 0 8px 24px rgba(233,83,119,.13);
    transform: translateY(-3px);
}
#voice .voice_links a .tit{
    color: #1a1a1a;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;      /* 400 → 700（2026年8月14日） */
    line-height: 1.5;
}
#voice .voice_links a .txt{
    margin-top: 10px;
    color: #555;
    font-size: 13px;
    line-height: 1.8;
}
#voice .voice_links a .more{
    display: block;
    margin-top: 14px;
    color: #cc2b5a;
    font-size: 13px;
}
#voice .voice_links a .more:after{
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 14px;
    height: 14px;
    background: url(../images/common/ico_arrow02.png)no-repeat center center;
    background-size: 14px;
    vertical-align: -1px;
}
@media screen and (max-width: 1024px) {
    #voice .voice_links{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 767px) {
    #voice .voice_links{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    #voice .voice_links a{
        padding: 16px 16px 14px;
    }
    #voice .voice_links a .tit{
        font-size: 16px;
    }
}

/*==========================================================================
  ページ末尾の注記
  ========================================================================== */
#voice .voice_disclaimer{
    margin-top: 45px;
    padding: 18px 22px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fafafa;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.9;
}
#voice .voice_disclaimer p+p{
    margin-top: 8px;
}
@media screen and (max-width: 767px) {
    #voice .voice_disclaimer{
        margin-top: 30px;
        padding: 14px 14px;
        font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
    }
}

/* ==========================================================================
   お声の本文の折りたたみ（2026年8月13日に追加）

   ------------------------------------------------------------------
   なぜ折りたたむのか
   ------------------------------------------------------------------
   お声は今後さらに増えていきます。20件でも本文をすべて開いたままだと
   ページが長くなり、かえって読まれなくなります。

   このページの強みは、**見出し（h3）がそれ自体で要約になっている**ことです。
   　例：「比較サイトでは分からない細かい点も確認してもらえ、
   　　　　効率的に探すことができました」
   本文を閉じても内容が伝わるので、見出し・タグ・評価点は常に表示したまま、
   本文（.v_body）だけを3行にとどめ、「続きを読む」で開く形にしています。

   ------------------------------------------------------------------
   検索エンジンへの影響はありません
   ------------------------------------------------------------------
   本文はHTMLにそのまま入っており、CSSで見た目を切っているだけです。
   閉じていても全文が読まれます（隠しテキストにはあたりません）。

   ------------------------------------------------------------------
   お声を1件足すときにすること
   ------------------------------------------------------------------
   これまでどおり <article class="voice_card"> を足すだけです。
   本文の <p class="body"> を <div class="v_body"> で囲んでおけば、
   「続きを読む」のボタンは js/voice.js が自動で付けます。
   　※3行に収まる短いお声には、ボタンは付きません（不要なため）。
   ========================================================================== */

#voice .voice_card .v_body{
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    /* .body と同じ文字サイズにしておくことで、下の em が実寸と一致します。
       1.95em（＝1行）× 3 = 3行ぶん。行数を変えたいときはこの「3」を変更。 */
    font-size: 15px;
    max-height: calc(1.95em * 3);
    transition: max-height .3s ease;
}
/* 囲んだぶん、中の1つ目の余白は打ち消します（上の margin-top で足りるため） */
#voice .voice_card .v_body .body:first-child{
    margin-top: 0;
}
/* 閉じているときだけ、下端を白くぼかして「続きがある」ことを示します。
   カードの背景（#fff）と同じ色です。カードの色を変えるときはここも。 */
#voice .voice_card .v_body:after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2.2em;
    background: linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events: none;
}
/* 開いた状態。js/voice.js が .is_open を付け外しします。 */
#voice .voice_card .v_body.is_open{
    max-height: 200em;   /* 十分に大きい値。アニメーションのために none は使いません */
}
#voice .voice_card .v_body.is_open:after{
    opacity: 0;
}

/* ---- 「続きを読む」ボタン ---- */
/* js/voice.js が、3行に収まらないお声にだけ足します。 */
#voice .voice_card .v_more{
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: #c73b5d;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
    transition: color .2s;
}
#voice .voice_card .v_more:hover{
    color: #cc2b5a;
    text-decoration: underline;
}
/* 開閉に合わせて向きが変わる三角。文字ではなく擬似要素なので、
   コピーしても本文に混ざりません。 */
#voice .voice_card .v_more:after{
    content: '▼';
    margin-left: 6px;
    font-size: 10px;
    transition: transform .2s;
}
#voice .voice_card .v_more[aria-expanded="true"]:after{
    transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
    #voice .voice_card .v_body{
        font-size: 14px;
        max-height: calc(1.9em * 3);
    }
    #voice .voice_card .v_more{
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   件数の「もっと見る」（2026年8月13日に追加）

   各テーマは、はじめ2件だけ表示します。残りは js/voice.js が隠し、
   ボタンで開きます。**お声が何件に増えても、ページの長さは変わりません。**

   はじめに見せる件数は、js/voice.js の先頭にある INITIAL で変えられます。
   -------------------------------------------------------------------------- */

/* js/voice.js が付け外しします。グリッドの並びから完全に外すため
   visibility ではなく display を使っています。 */
#voice .voice_card.is_hidden{
    display: none;
}

#voice .v_showmore{
    display: block;
    box-sizing: border-box;
    margin: 22px auto 0;
    padding: 13px 30px;
    min-width: 260px;
    border: 1px solid #e95377;
    border-radius: 30px;
    background: #fff;
    color: #cc2b5a;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
#voice .v_showmore:hover{
    background: #e95377;
    color: #fff;
}
/* 開閉に合わせて向きが変わる三角。文字ではなく擬似要素なので、
   コピーしても本文に混ざりません。 */
#voice .v_showmore:after{
    content: '▼';
    margin-left: 8px;
    font-size: 10px;
    vertical-align: 1px;
    display: inline-block;
    transition: transform .2s;
}
#voice .v_showmore[aria-expanded="true"]:after{
    transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
    #voice .v_showmore{
        margin-top: 16px;
        padding: 12px 20px;
        min-width: 0;
        width: 100%;
        font-size: 14px;
    }
}