@charset "utf-8";

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

    /* 共通 */
    /* SP は 390px を基準幅とし、それ未満だけ相似縮小する（390〜768 は可変レイアウト）。
       375（iPhone SE）や 360 ではヘッダー右側がバーからはみ出していた。
       JS が --page-zoom に正確な値を入れる。CSS だけの近似も併記しておく。 */
    body {
        zoom: 1;
        zoom: min(1, calc(100vw / 390px));
        zoom: var(--page-zoom, min(1, calc(100vw / 390px)));
    }
    .inner {
        padding: 0 16px;
    }
    .sec_ttl {
        font-size: 24px;
        line-height: 1.4;
    }
    .sec_lead {
        margin-top: 14px;
        font-size: var(--fs-mini);
        text-align: left;
    }
    .ttl_slash {
                gap: 30px;
    }
    .ttl_slash .ttl_txt br{
        display: block;
    }
    .ttl_slash:before,
    .ttl_slash:after {
        height: 24px;
    }
    .btn_cta {
        min-width: 0;
        width: 100%;
        max-width: 400px;
        font-size: 16px;
    }
    .btn_cta.btn_lg {
        min-width: 0;
        padding: 16px 20px;
        font-size: 18px;
        position: absolute;
        bottom: -45px;
        z-index: 1;
        left: 10px;
        width: calc(100% - 20px);
    }
    .note {
        font-size: 12px;
    }

    /* ヘッダー */
    .site_head {
        top: 8px;
        padding: 0 10px;
    }
    .head_bar {
        padding: 10px 12px;
        gap: 8px;
    }
    .is-scrolled .head_bar{
        padding: 10px
    }
    .head_bar .logo {
        opacity: 1;
        width: auto;
        pointer-events: auto;
        transition: .3s;
    }
    .head_bar .logo img {
        width: 110px;
        opacity: 1;
        transition: .3s;
    }
    .is-scrolled .head_bar .logo,
    .is-scrolled .head_bar .logo img{
        opacity: 0;
        width: 0;
        pointer-events: none;
    }
    .head_util {
        align-items: center;
        gap: 10px;
        width: auto;
        transition: .3s;
    }
    .is-scrolled .head_util{
        justify-content: space-between;
        width: 100%;
    }
    .u_tel_num {
        font-size: 15px;
        white-space: nowrap;
    }
    .u_tel_time {
        display: none;
    }
    .head_cta {
        min-width: 0;
        width: auto;
        padding: 8px 12px 8px 20px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* MV */
    .mv {
        height: auto;
        min-height: 0;
        padding: 100px 0 0;
        margin-bottom: 70px;
    }
    .mv_deco{
        width: 100%;
        transform: translateX(-50%);
        margin-left: 0;
        background-position-x: center;
        background-size: cover;
    }
    .mv_inner {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .mv_text {
        position: static;
        padding-top: 0;
        max-width: none;
        width: 100%;
        z-index: auto;
    }
    .mv_sub {
        font-size: 16px;
    }
    .mv_catch {
        font-size: 30px;
        margin-top: 10px;
    }
    .mv_pills {
        max-width: none;
        gap: 8px;
        margin-top: 18px;
    }
    .mv_pills li {
        padding: 4px 14px;
        font-size: 13px;
    }
    .mv_cta {
        margin-top: 24px;
        font-size: 20px;
        max-width: none;
    }
    .mv_visual {
        position: relative;
        left: auto;
        right: auto;
        width: 100%;
        min-height: 0;
        height: 60vw;
        bottom: 0;
        text-align: center;
        margin-top: 20px;
    }
    .mv_visual .mv_img{
        height: 60vw;
        width: auto;
    }
    .mv_phone {
        position: absolute;
        left: 0;
        right: auto;
        top: 0;
        width: 150px;
    }
    .mv_card {
        position: absolute;
        left: auto;
        right: 0;
        top: 90px;
        width: 200px;
    }

    /* メリット */
    .merit {
        padding: 50px 0;
    }
    .merit_grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 26px;
    }
    .merit_item {
        padding: 24px 20px 30px;
    }
    .merit_ttl {
        font-size: 20px;
        height: auto;
    }
    .merit_txt,
    .list_dot li {
        font-size: var(--fs-mini);
    }
    .list_dot li {
        line-height: 1.6;
    }
    .list_dot li:before {
        top: 8px;
    }


    /* 配布方法 */
    .dist {
        padding: 60px 0 50px;
    }
    .dist_grid {
        grid-template-columns: 1fr;
        gap: 60px;
        width: auto;
        margin: 60px 0 0;
    }
    .dist_badge {
        width: 92px;
        height: 92px;
        top: -40px;
        font-size: 14px;
        line-height: 1.45;
    }
    .dist_badge:after {
        width: 10.4px;
        height: 9.7px;
    }
    .dist_badge em {
        line-height: 21.9px;   /* PC は 31.24px（20px 基準）。SP は 14px 基準 */
    }
    .dist_bar {
        padding: 12px 10px 12px 116px;  /* 吹き出しバッジ（幅 92px）の右端 + 余白から始める */
        text-align: left;
        font-size: 16px;
        line-height: 1.4;
    }
    .dist_body {
        padding: 20px 16px;
    }
    .dist_body figure{
        height: auto;
    }
    .dist_body figure img{
        position: relative;
        transform: none;
        width: 100%;
        height: auto;
        transform: none !important;
    }

    /* 使い方 */
    .howto {
        margin-top: 20px;
        padding: 0 0 40px;
    }
    .howto_bracket {
        font-size: 18px;
        padding-bottom: 16px;
    }
    .howto_bracket:after {
        width: 100%;
        margin-left: -50%;
        height: 12px;
    }
    .howto_pills {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
    }
    .howto_pills li {
        width: auto;              /* PC は Figma 実寸 153×58。SP は内容に合わせる */
        height: auto;
        padding: 4px 14px;
        font-size: 16px;
        line-height: 1.4;
    }
    .howto_pills li + li:before {
        content: none;
    }
    .howto_ttl {
        font-size: 24px;
        margin-top: 14px;
    }
    /* ステップは PC の絶対配置（328×334）をそのまま縮小して使う */
    .howto_steps {
        display: block;
        margin-top: 30px;
    }
    .howto_step {
        zoom: 0.88;
        margin: 0 auto;
    }
    .howto_step + .howto_step {
        margin-top: 30px;
    }
    .howto_note {
        margin-top: 24px;
    }
    .shop_bnr {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        height: auto;
        margin-top: 36px;
        padding: 26px 20px;
        border-radius: 5px;
    }
    .shop_bnr:before{
        content: "";
        position: absolute;
        left: -269px;
        top: -282px;
        width: 60vw;
        height: 60vw;
        border-radius: 50%;
        background: #397FEE;
        top: -28vw;
        left: -32vw;
        z-index: 0;
    }
    .shop_bnr_txt {
        padding: 0;
    }
    .shop_bnr h3 {
        font-size: 20px;
        line-height: 1.4;
    }
    .shop_bnr p {
        margin-top: 12px;
        font-size: var(--fs-mini);
        line-height: 1.6;
    }
    .shop_bnr .btn_outline {
        position: relative;
        width: 100%;
        height: auto;
        padding: 12px 20px;
        inset: auto;
        z-index: 1;
    }

    /* 会員登録不要 */
    .noreg {
        padding: 50px 0;
    }
    .noreg_ttl {
        width: 100%;
        padding: 10px 16px;
        font-size: 22px;
    }
    /* PC は列ごとの絶対配置。SP は列の箱ごと縮小して 2 列に並べる */
    .noreg_list {
        display: grid;
        grid-template-columns: repeat(2, -moz-max-content);
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
        align-items: start;
        gap: 10px 12px;
        width: auto;
        height: auto;
        margin: 30px 0 0;
    }
    .noreg_list li:nth-child(1),
    .noreg_list li:nth-child(2),
    .noreg_list li:nth-child(3),
    .noreg_list li:nth-child(4) {
        position: relative;
        left: auto;
        top: auto;
        zoom: 0.62;
    }
    .noreg_note {
        left: 0;
        margin-top: 30px;
    }
    .noreg_note p {
        font-size: var(--fs-mini);
    }

    /* 活用シーン */
    .scene {
        padding: 50px 0;
    }
    .scene_grid {
        grid-template-columns: 1fr;
        gap: 16px;
        width: auto;
        margin: 26px 0 0;
    }
    .scene_item h3 {
        margin: 16px 16px 0;
        font-size: 16px;
    }
    .scene_item > p {
        margin: 10px 16px 0;
        font-size: var(--fs-mini);
    }
    .scene_item .tags {
        margin: auto 16px 0;
        padding-top: 14px;
    }

    /* 業界・グッズ */
    .industry {
        padding: 50px 0;
    }
    .industry_tags {
        margin-top: 20px;
        gap: 6px;
    }
    .goods {
        flex-direction: column;
        gap: 10px;
        padding-left: 0;
        margin-top: 30px;
    }
    /* うちわ・クリアファイル・QR は % 配置なので、PC の比率
       （558.206 : 470.563）を保ったまま相似縮小させる。
       height を px で固定すると縦だけ潰れて配置が崩れる */
    .goods_visual {
        flex: 0 0 auto;   /* 縦積みなので flex-basis 558.206px が「高さ」になってしまう */
        width: 100%;
        height: auto;
        max-width: none;
    }
    .goods_ttl {
        font-size: 20px;
        line-height: 1.5;      /* PC は Figma 実測の 51px 固定 */
    }
    .goods_ttl .box {
        font-size: 22px;
        padding: 0 10px;
        line-height: 1.5;
        vertical-align: baseline;
    }
    /* PC は横並びで flex-basis 618px。SP は縦積みなので basis が「高さ」に効いて
       本文の下に 400px 以上の空白ができる */
    .goods_txt {
        flex: 0 0 auto;
        max-width: none;
        margin-top: 20px;
    }
    .goods_txt > p {
        margin-top: 16px;
        font-size: var(--fs-mini);
    }

    /* CTAバナー */
    .cv {
        padding: 30px 0;
    }
    .cv .inner {
        left: 0;
    }
    .cv_box {
        max-width: none;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 26px 20px;
        gap: 10px;
    }
    .cv_box:before,
    .cv_box:after {
        display: none;
    }
    .cv_txt {
        max-width: none;
    }
    .cv_sub {
        font-size: 14px;
    }
    .cv_ttl {
        font-size: 22px;
        line-height: 1;
    }
    .cv_lead {
        font-size: var(--fs-mini);
    }
    /* PC は width:598px 固定。詳細度 (0,2,0) なので SP の .btn_cta{width:100%} では
       解除できず、カード幅 318px に対して 400px（max-width）まではみ出す */
    .cv_txt .btn_cta {
        width: 100%;
        max-width: none;
        margin-top: 34vw;
        font-size: 18px;
        padding: 14px;
        position: static;
    }
    .cv_visual {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        align-items: flex-end;
        gap: 10px;
    }
    .cv_bubble {
        width: 40%;
        height: auto;
        padding: 2px;
        font-size: 13px;
        white-space: normal;
        position: absolute;
        top: auto;
        left: 20px;
        bottom: 170px;
    }
    .cv_bubble:after {
        content: "";
        display: block;
        top: auto;
        right: 12px;
        left: auto;
        bottom: -14px;
    }
    .cv_visual figure {
        flex: 1 1 auto;   /* 吹き出しを実寸で確保し、残りを画像に渡す */
        width: auto;
        min-width: 0;
        position: absolute;
        bottom: 120px;
        right: 20px;
        width: 50%;
        z-index: -1;
    }

    /* 価格表 */
    .price {
        padding: 50px 0;
    }
    .price_note{
        display: flex;
        gap: 0 10px;
        flex-wrap: wrap;
    }
    .price_card {
        padding: 26px 16px;
    }
    .price_table {
        min-width: 620px;
        font-size: var(--fs-mini);
    }
    .price_table th,
    .price_table td,
    .price_table tbody th,
    .price_table tbody td,
    .price_table thead tr:nth-child(2) th {
        padding: 6px 10px;
    }
    .price_table thead .th_qty {
        width: 110px;
    }
    .price_table tbody td .num {
        font-size: 15px;
    }
    .spec_box {
        margin-top: 26px;
        padding: 20px 16px 26px;
    }
    .spec_ttl {
        font-size: 15px;
        padding: 8px 16px;
        line-height: 1.5;
    }
    .spec_body {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .spec_imgs {
        gap: 10px;
    }
    .spec_front img,
    .spec_back_sheet {
        width: 100%;
        aspect-ratio: 230 / 146;
        height: auto;
    }
    .spec_imgs figure {
        width: 50%;
    }
    .spec_imgs figcaption {
        margin-bottom: 6px;
        font-size: var(--fs-mini);
        line-height: 1.6;
    }
    .spec_list {
        grid-column: 1;
        grid-row: auto;
        max-width: none;
        margin-top: 20px;   /* PC は Figma 実測の 9px */
    }
    .spec_list li {
        gap: 8px;
        font-size: var(--fs-mini);
        line-height: 1.6;
    }
    .spec_list li + li,
    .spec_list li:nth-child(2) {
        margin-top: 12px;
    }
    .spec_list img {
        width: 22px;
    }
    .spec_list small {
        line-height: 1.6;
    }
    /* PC は Figma の等幅 4 列を作るため fixed。SP は横スクロール前提なので
       内容に合わせて詰める auto に戻す */
    .price_table {
        table-layout: auto;
    }
    .price_tip {
        font-size: var(--fs-mini);
        padding: 14px 16px;
    }

    /* 納品までの流れ */
    .flow {
        padding: 50px 0;
    }
    .flow_list {
        grid-template-columns: repeat(2,1fr);
        gap: 30px 20px;
        margin-top: 30px;
    }
    .flow_box h3 {
        font-size: 20px;
    }
    .flow_box p {
        font-size: var(--fs-mini);
    }
    .flow_box p br{
        display: none;
    }
    .flow_item{
        gap: 20px;
    }
    .flow_item figure {
        padding: 10px 10px 0;
    }
    .flow_item figure img {
        width: auto;
        max-width: 70%;
        height: auto;
    }
    .flow_box {
        height: 100%;
        min-height: 0;
        padding: 20px 16px;
    }
    /* デザインシミュレーター */
    .design {
        padding: 50px 0;
    }
    .design_bracket:after {
        width: 100%;
        margin-left: -50%;
        height: 20px;
    }
    .design_ttl {
        width: min(70%, 405px);
        margin-inline: auto;
    }
    .design_lead {
        width: auto;
        margin: 16px 0 0;
        font-size: var(--fs-mini);
        text-align: left;
    }
    .design_panels {
        flex-direction: column;
        gap: 30px;
        margin-top: 40px;
    }
    .design_panel {
        width: 100%;
        min-height: 0;
        padding: 34px 20px 30px;
    }
    .design_panel_note {
        position: static;
        margin-top: 10px;
        align-self: flex-start;
    }
    .design_plus {
        width: 40px;
    }
    .design_easy {
        padding: 30px 16px;
    }
    .design_easy h3 {
        font-size: 20px;
    }
    .design_easy_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 20px;
    }
    /* 番号バッジは absolute（8,10 の 30x30）。SP はカードが狭く本文が中央寄せなので
       上を空けないとバッジと文字が重なる */
    .design_easy_list li {
        padding: 48px 12px 20px;
        gap: 12px;
    }
    .design_easy_list li:after{
        left: 30px;
        top: 34px;
    }
    .design_easy_list li p {
        font-size: 13px;
    }
    .design_num {
        width: 30px;
        height: 30px;
        font-size: 14px;
        left: 8px;
        top: 10px;
    }
    .design_btns {
        flex-direction: column;
        gap: 14px;
    }
    .btn_link {
        padding: 14px 16px;
        font-size: 15px;
        gap: 10px;
    }
    .btn_link_body {
        gap: 12px;
    }
    .btn_link_body img {
        width: 36px;
    }
    .btn_link_arrow {
        width: 28px;
    }

    /* お問い合わせ */
    .contact_head {
        padding: 40px 16px;
    }
    .contact_head:before {
        left: 20px;
        width: 160px;
        height: 160px;
    }
    .contact_head:after {
        bottom: -30px;
        width: 60px;
        height: 31px;
        margin-left: -30px;
    }
    .contact_ttl {
        font-size: 24px;
    }
    .contact_lead {
        margin-top: 14px;
        font-size: var(--fs-mini);
    }
    .contact_body {
        padding: 50px 0;
    }
    .contact_body .inner {
        left: 0;
    }
    .contact_bloc {
        max-width: none;
        padding: 24px 16px;
    }
    .contact_bloc dl,
    .contact_bloc dl.dl_area {
        display: block;
    }
    .contact_bloc dl + dl {
        margin-top: 20px;
    }
    .contact_bloc dt {
        margin-bottom: 8px;
        font-size: 15px;
    }
    .contact_bloc dd {
        width: 100%;
        max-width: none;
    }
    .contact_bloc .fmctr {
        padding: 12px 14px;
    }
    .contact_bloc textarea.fmctr {
        min-height: 180px;
    }
    .btn_bloc {
        margin-top: 30px;
    }
    .btn_submit {
        font-size: 20px;
        padding: 16px 20px;
    }
    .contact_notes {
        margin-top: 30px;
        padding: 20px 16px;
    }
    .contact_notes p {
        font-size: 12px;
    }

    /* FAQ */
    .faq {
        padding: 50px 0;
    }
    .faq_ttl {
        font-size: 24px;
    }
    .faq_bloc {
        margin-top: 26px;
    }
    .faq_item + .faq_item {
        margin-top: 16px;
    }
    .faq_item dt {
        padding: 16px;
        gap: 10px;
    }
    .faq_q {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    .faq_txt {
        font-size: 15px;
    }
    .faq_item dd {
        padding: 0 16px 16px 50px;
    }
    .faq_item dd p {
        font-size: 13px;
        line-height: 1.7;
        word-break: break-all;
    }

    /* フッター */
    .footer_content {
        padding: 40px 0;
    }
    .footer_inner {
        flex-direction: column;
        gap: 24px;
    }
    .footer_data {
        max-width: none;
        width: 100%;
        font-size: var(--fs-mini);
    }
    .footer_data dt {
        width: 70px;
        line-height: 1.6;    /* PC は Figma 実測の 23px 固定 */
    }
    .footer_data dd {
        width: calc(100% - 70px);
        line-height: 1.6;
    }
    /* 縦積みなので PC の flex-basis 546px が「高さ」になり、
       220px の iframe の下に 300px 以上の空白ができる */
    .footer_gmap {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }
    .footer_gmap iframe {
        height: 220px;
    }
    .footer_bar_inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .footer_nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 18px;
    }
    .footer_nav a {
        font-size: 12px;
    }
    .copy {
        font-size: 10px;
    }
    .thanks {
        padding: 120px 0 60px;
    }
    .thanks_box {
        padding: 30px 20px;
    }
    .thanks_box h1 {
        font-size: 20px;
    }
    .thanks_box p {
        margin-top: 18px;
        font-size: var(--fs-mini);
    }
    /* ---- design5 対応の追記（後勝ち） ---- */
    .merit:before,
    .scene:before {
        left: 0;
        right: 0;
        border-radius: 0;
    }
    .merit_circle,
    .scene_circle {
        display: none;
    }
    /* PC はカードごとに px 実寸を入れているので、SP では一括で解除する。
       PC 側が .merit_item:nth-child(n) .xxx（詳細度 0,3,0）なので、
       ここも 3 クラスにして後勝ちさせる（.merit_item だけだと効かない）*/
    .merit_grid .merit_item .merit_ex_fig {
        position: static;
        width: auto;
        height: auto;
        margin-top: 10px;
        text-align: center;
    }
    .merit_grid .merit_item .merit_ex_fig img {
        width: auto;
        height: auto;
        max-height: 80px;
    }
    .merit_grid .merit_item .merit_ex_body {
        min-height: 0;            /* PC の図の高さ確保は SP では不要（図が static になるため） */
        display: flex;
        align-items: center;
        gap: 30px;
    }
    .merit_grid .merit_item .merit_ex_body ul {
        width: auto;              /* PC は 169.363px などの実寸。SP はカード幅いっぱい */
    }
    .merit_item .merit_fig {
        margin-top: 14px;
    }
    .merit_item .merit_fig img {
        width: auto !important;
        height: auto;
        max-width: 100%;
        max-height: 100px;
    }
    .merit_txt {
        margin-top: 16px;
    }
    .merit_ex ul {
        font-size: 12px;
        line-height: 1.6;
    }
    .scene_item {
        height: auto;
        padding-bottom: 16px;
    }
    /* PC は 300x157 の枠。SP でカード幅だけ広がると縦につぶれるので比率で持たせる */
    .scene_item figure {
        height: auto;
        aspect-ratio: 300 / 157;
    }
    .design_panel {
        min-height: 0;
    }
    .mv {
        height: auto;
    }
    .mv_phone {
        width: 150px;
        height: 308px;      /* 150 x 586.668/285.951 */
        transform: rotate(-2.5deg);
    }
    .mv_card {
        width: 200px;
        height: 133px;      /* 200 x 218.744/328.116 */
        transform: rotate(1deg);
    }
    .merit {
        margin-top: 40px;
    }
    .dist {
        padding: 40px 0 0;
    }
    .dist_col:nth-child(1) .dist_badge,
    .dist_col:nth-child(2) .dist_badge {
        left: 16px;
        right: auto;
        top: -53px;
    }
    .dist_col:nth-child(2) .dist_badge:after{
        left: 77.419%;
        top: 81.452%;
        clip-path: polygon(100% 100%, 78.571% 0, 0 50%);
    }
    /* オリジナルデザイン */
    .original {
        padding: 50px 0 0;
    }
    .original_inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: none;
        height: auto;
        padding: 0 16px;
    }
    .original_txt {
        position: static;
        width: auto;
    }
    .original_txt {
        max-width: none;
    }
    .original_ttl {
        font-size: 26px;
    }
    .original_ttl .wave:after {
        bottom: -10px;
        height: 8px;
    }
    .original_visual {
        position: relative;
        top: -30px;
        left: 0;
        width: 100%;
        height: auto;
    }
    .original_txt .original_lead {
        margin-top: 24px;
    }
    .original_txt .original_lead p {
        font-size: var(--fs-mini);
    }


    .howto {
        margin-top: 20px;
        padding: 0 0 40px;
    }
    .howto .inner {
        max-width: none;
        padding-top: 30px;
    }
    .noreg {
        padding: 40px 0 0;
    }
    .scene {
        margin-top: 40px;
    }
    .industry {
        padding: 40px 0 0;
    }
    .cv {
        margin-top: 30px;
    }
    .cv:after {
        height: 160px;
    }
    .cv_bubble p {
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.6;
        white-space: nowrap;   /* <br> の位置で 2 行。折り返すと「サポー／ト！」になる */
    }
    .design {
        padding: 50px 0 0;
    }
    .design_head {
        left: 0;
        max-width: none;
    }
    .design_panel {
        height: auto;
    }
    .design_panel > figure:not(.design_panel_phone) img {
        width: 100%;
        max-width: 100%;
    }
    .design_panel_phone {
        width: 231.777px;
        max-width: 100%;
        height: 300.999px;
    }
    .design_phone_card {
        left: 14.5%;
        top: 39.8%;
        width: 72.1%;
        height: 37.4%;
    }
    .contact_head:after {
        left: auto;
        right: -40px;
        top: 60px;
        bottom: auto;
        width: 120px;
        height: 120px;
        margin-left: 0;
    }
    .contact_body {
        padding: 50px 0 40px;
    }
    .contact_body:before {
        top: -24px;
        width: 60px;
        height: 31px;
        margin-left: -30px;
    }
    .contact_notes {
        margin: 20px auto 0;
    }
    .faq {
        padding: 50px 0 0;
    }
    .faq_item dt {
        padding: 16px;
    }
    .faq_item dd {
        padding: 10px 16px 16px 50px;
    }
    .footer_content {
        margin-top: 40px;
    }
}