@charset "UTF-8";

/* ---------- root ---------- */
:root {
    /* 色管理用の変数 */
    --black-color: #333333;
    --white-color: #ffffff;
    --gray-color: #efefef;
    --gray-color02: #717171;
    /* 薄いグレーの背景の上に置く小さな文字用(--gray-color02 だとコントラストが足りないため、少し濃いグレー) */
    --gray-color03: #555555;
    /* お問い合わせボタン用の色(ロゴと同じ青) */
    --primary-color: #5f84b1;
    --primary-color-dark: #517096;
    --accent-color: #d9873b;
    --accent-color-dark: #b87332;
}

:root {
    /* コンテンツ幅管理用の変数 */
    --content-width-sm: 755px;
    --content-width: 920px;
    --content-width-lg: 1080px;
}

:root {
    /* レイアウト(サイドバー)管理用の変数 */
    --sidebar-width: 263px;
    --layout-gap: 40px;
    --layout-padding: 16px;
}

:root {
    /* z-index管理用の変数 */
    --z-index-back: -1;
    --z-index-default: 1;
    --z-index-header: 100;
    --z-index-text: 150;
    --z-index-opening: 150;
    --z-index-menu: 150;
    --z-index-modal: 200;
}

/* ---------- base ---------- */

body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.8;
    font-size: 16px;
    letter-spacing: 0.1em;
}

/* クリックした際の青い枠線を削除 */
*:focus {
    outline: none;
}

/* タップした際の青い四角を削除 */
button,
span {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

/* ---------- utility ---------- */

@media screen and (min-width: 375px) {
    .u_sm-dn {
        display: none;
    }
}

@media screen and (min-width: 1080px) {
    .u_lg-dn {
        display: none;
    }
}

/* ---------- layout ---------- */
.l_container-sm,
.l_container,
.l_container-lg {
    width: 100%;
    padding: 0 16px;
    margin: 0 auto;
}

.l_container-sm {
    max-width: calc(var(--content-width-sm) + 32px);
}

.l_container {
    max-width: calc(var(--content-width) + 32px);
}

.l_container-lg {
    max-width: calc(var(--content-width-lg) + 32px);
}

.l_contents {
    padding: 80px 0;
}

@media screen and (min-width: 768px) {
    .l_contents {
        padding: 120px 0;
    }
}

/* ---------- l_layout : 左サイドバー + 右コンテンツ ---------- */
/* 参考サイト(portfolio.satoshi-kaijima.com/service/)に合わせて
   1080px以上でサイドバー幅263px + 右コンテンツの2カラムに切り替え */
.l_layout {
    padding: var(--layout-padding);
    background: var(--gray-color);
}

@media screen and (min-width: 1080px) {
    .l_layout {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        gap: var(--layout-gap);
        align-items: start;
    }
}

/* ---------- サイドバー(ロゴ + ナビ) ---------- */
/* SP: 通常は非表示、ハンバーガークリックで全画面モーダル表示 */
.l_sidebar {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-menu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    background: var(--gray-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.js_body.is-nav-open .l_sidebar {
    opacity: 1;
    pointer-events: auto;
}

/* PC: 左カラムに固定表示するサイドバーへ切り替え */
@media screen and (min-width: 1080px) {
    .l_sidebar {
        position: sticky;
        inset: auto;
        top: var(--layout-padding);
        left: auto;
        width: var(--sidebar-width);
        height: calc(100vh - var(--layout-padding) * 2);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 56px;
        padding: 26px 16px 40px;
        overflow-y: auto;
        opacity: 1;
        pointer-events: auto;
        transition: none;
        /* background: var(--white-color); */
    }
}

.l_sidebar-logo_link {
    display: flex;
    flex-direction: column;
}

.l_sidebar-logo_link img {
    width: 50%;
    height: auto;
    margin: 0 auto;
}

.l_sidebar-logo {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}

.l_sidebar-logo_sub-copy {
    font-size: 12px;
    font-weight: bold;
}

.l_sidebar-logo_name {
    display: block;
    font-weight: normal;
    margin-top: 40px;
    font-size: 20px;
}

.l_sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    padding: 0 24px;
}

@media screen and (min-width: 1080px) {
    .l_sidebar-nav {
        max-width: none;
        padding: 0;
    }
}

/* ---------- サイドバーの背景をロゴの青にする(全ページ共通のデザインとして確定)。
   スマホ・タブレット(1080px未満)は、これまでどおりの表示(グレーの全画面メニュー)のままにし、
   PC版(1080px以上、常時表示のサイドバー)だけをこの見た目にする。
   静的版 portfolio_code/css/style.css の同名ブロックから移植(変数名は共通のためそのまま使用) ---------- */
@media screen and (min-width: 1080px) {
    /* サイドバーとメインの間の40pxの余白はそのまま残す(右方向には広げない)。
       そのかわり、サイドバー自体の幅を固定263pxから可変(画面幅に応じて伸縮)にする。
       グリッドの列幅(トラック)をここで可変にし、.l_sidebar 側は width:auto にして
       そのトラック幅にそのまま追従させる。
       最小値は280px(元の263px + ロゴの左右padding40pxぶんの余裕)にしてあるため、
       1080px付近の画面幅でも「Ayuka Tech Lab」が改行されない。画面が約1555pxを超えたところから
       徐々に広がり、340pxで頭打ちになる */
    .l_layout {
        grid-template-columns: clamp(280px, 18vw, 340px) 1fr;
    }

    .l_sidebar {
        width: auto;
        background: var(--primary-color);
        top: 0;
        height: 100vh;
        margin: calc(var(--layout-padding) * -1) 0 calc(var(--layout-padding) * -1) calc(var(--layout-padding) * -1);
        /* headerであるサイドバー自身のpadding(26px 16px 40px)を消す。
           これが残っていると、ロゴの背景(白)が上・左右で端まで届かない。
           以後の余白は、ロゴ側(padding:24px 20px)とナビ側(padding:0 24px)がそれぞれ持つ */
        padding: 0;
    }

    .l_sidebar-logo {
        /* サイドバーは align-items: flex-start のため、指定しないと文字幅ぶんしか背景が付かない。
           サイドバーの横幅いっぱいに、角丸なしの四角形で背景(白)を伸ばす */
        align-self: stretch;
        box-sizing: border-box;
        background: var(--white-color);
        padding: 24px 20px;
    }

    /* PC版は .l_sidebar-nav の左右paddingが0になっているため、ナビ(PROFILE/WORKS/CONTACT)が
       サイドバーの端に寄ってしまう。モバイル版と同じ左右paddingを付けて余白を持たせる */
    .l_sidebar-nav {
        padding: 0 24px;
    }
}

/* ---------- ナビ項目(カード形式) ---------- */
.l_sidebar-nav_list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.l_sidebar-nav_link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--white-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-family: "Hammersmith One", sans-serif;
    letter-spacing: 0.08em;
    color: var(--black-color);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.l_sidebar-nav_link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.l_sidebar-nav_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gray-color);
    color: var(--black-color);
}

.l_sidebar-nav_icon svg {
    width: 16px;
    height: 16px;
}

/* ---------- お問い合わせ(独立・青で強調) ---------- */
.l_sidebar-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 24px;
    padding: 16px;
    border-radius: 12px;
    background: var(--accent-color);
    color: var(--white-color);
    font-family: "Hammersmith One", sans-serif;
    letter-spacing: 0.08em;
    box-shadow: 0 3px 10px rgba(217, 135, 59, 0.35);
    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.l_sidebar-contact:hover {
    background: var(--accent-color-dark);
    transform: translateY(-1px);
}

.l_sidebar-contact_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white-color);
}

.l_sidebar-contact_icon svg {
    width: 16px;
    height: 16px;
}

/* ---------- SNSリンク ---------- */
.l_sidebar-sns_list {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.l_sidebar-sns_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-family: "Hammersmith One", sans-serif;
    font-weight: bold;
    color: var(--black-color);
}

.l_sidebar-sns_link img {
    width: 18px;
    height: 18px;
}

/* ---------- コピーライト(サイドバー最下部) ---------- */
.l_sidebar-copyright {
    font-size: 12px;
    color: var(--gray-color02);
    text-align: center;
}

@media screen and (min-width: 1080px) {
    .l_sidebar-copyright {
        margin-top: auto;
        padding-top: 24px;
    }
}

/* ---------- ハンバーガーメニュー(SPのみ表示) ---------- */
.m_hamburger {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: var(--z-index-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--black-color);
}

@media screen and (min-width: 1080px) {
    .m_hamburger {
        display: none;
    }
}

.m_hamburger-box {
    position: relative;
    width: 24px;
    height: 16px;
}

.m_hamburger-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--white-color);
    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        top 0.3s ease;
}

.m_hamburger-bar:nth-child(1) {
    top: 0;
}

.m_hamburger-bar:nth-child(2) {
    top: 7px;
}

.m_hamburger-bar:nth-child(3) {
    top: 14px;
}

.js_body.is-nav-open .m_hamburger-bar:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.js_body.is-nav-open .m_hamburger-bar:nth-child(2) {
    opacity: 0;
}

.js_body.is-nav-open .m_hamburger-bar:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

/* ---------- 右側コンテンツ ---------- */
.l_main {
    min-width: 0;
}

/* メニュー表示中はスクロールを止める */
.is-scroll-lock {
    overflow: hidden;
}

.l_footer {
    height: 47px;
    background: var(--black-color);
}

/* ---------- メイン最下部のコピーライト ---------- */
.c_main-footer {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--gray-color02);
}

/* 全ページ共通の「無断転載のお願い」の1行(コピーライトの上) */
.c_main-footer_note {
    max-width: 640px;
    margin: 0 auto 6px;
    letter-spacing: 0.05em;
    line-height: 1.7;
    color: var(--gray-color03);
}

/* 〜1079px は、右下にハンバーガーボタン(64px・下から16px)が固定表示される。
   ページの一番下までスクロールしたとき、フッターの文が隠れないよう、下に余白を足す */
@media screen and (max-width: 1079px) {
    .c_main-footer {
        padding-bottom: 80px;
    }
}

.l_footer-copyright_txt {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-family: "Hammersmith One", sans-serif;
    color: var(--white-color);
}

/* ---------- セクション共通見出し ---------- */
.c_section-title {
    margin-bottom: 32px;
    font-family: "Hammersmith One", sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--black-color);
}

/* ---------- キービジュアル ---------- */
.c_kv {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.c_kv-img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center 62%;
    filter: saturate(0.8) brightness(0.92);
}

@media screen and (min-width: 768px) {
    .c_kv-img {
        height: 320px;
    }
}

@media screen and (min-width: 1080px) {
    .c_kv-img {
        height: 380px;
    }
}

.c_kv-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 28px;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.12) 40%,
        rgba(0, 0, 0, 0) 65%
    );
}

.c_kv-label {
    font-family: "Hammersmith One", sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--white-color);
}

.c_kv-title {
    margin-top: 6px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.08em;
    color: var(--white-color);
}

@media screen and (min-width: 768px) {
    .c_kv-title {
        font-size: 30px;
    }
}

/* ---------- カード間の余白 ---------- */
.c_section:not(:first-child) {
    margin-top: 40px;
}
/* ---------- ABOUT ME カード ---------- */

.c_about-card {
    padding: 32px 24px;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 768px) {
    .c_about-card {
        padding: 48px;
    }
}

.c_about-eyebrow {
    font-size: 14px;
    color: var(--gray-color02);
    letter-spacing: 0.05em;
}

.c_about-heading {
    margin-top: 4px;
    font-family: "Hammersmith One", sans-serif;
    font-size: 30px;
    letter-spacing: 0.12em;
    color: var(--black-color);
}

@media screen and (min-width: 768px) {
    .c_about-heading {
        font-size: 38px;
    }
}

.c_about-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

@media screen and (min-width: 1080px) {
    .c_about-body {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }
}

.c_about-photo {
    order: 2;
    width: 100%;
}

@media screen and (min-width: 1080px) {
    .c_about-photo {
        flex: 0 1 40%;
        width: auto;
        min-width: 0;
    }
}

.c_about-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.c_about-text {
    order: 1;
    width: 100%;
}

@media screen and (min-width: 1080px) {
    .c_about-text {
        flex: 0 1 60%;
        width: auto;
    }
}

.c_about-copy {
    font-size: 24px;
    line-height: 1.5;
    color: var(--black-color);
}

@media screen and (min-width: 768px) {
    .c_about-copy {
        font-size: 30px;
    }
}

.c_about-sub {
    margin-top: 16px;
    color: var(--gray-color02);
}

.c_about-message {
    margin-top: 16px;
    color: var(--black-color);
}

.c_about-message:first-of-type {
    margin-top: 28px;
}

/* ---------- CAREER カード ---------- */
.c_career-card {
    padding: 32px 24px;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 768px) {
    .c_career-card {
        padding: 48px;
    }
}

.c_career-eyebrow {
    font-size: 14px;
    color: var(--gray-color02);
    letter-spacing: 0.05em;
}

.c_career-heading {
    margin-top: 4px;
    font-family: "Hammersmith One", sans-serif;
    font-size: 30px;
    letter-spacing: 0.12em;
    color: var(--black-color);
}

@media screen and (min-width: 768px) {
    .c_career-heading {
        font-size: 38px;
    }
}

/* ---------- キャリアの歩み(タイムライン) ---------- */
.c_timeline-list {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.c_timeline-item {
    position: relative;
    padding-bottom: 32px;
    padding-left: 28px;
}

.c_timeline-item:last-child {
    padding-bottom: 0;
}

.c_timeline-item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color);
}

.c_timeline-item::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 4px;
    bottom: -10px;
    width: 2px;
    background: var(--gray-color);
}

.c_timeline-item:last-child::after {
    content: none;
}

.c_timeline-date {
    font-size: 14px;
    line-height: 20px;
    font-family: "Hammersmith One", sans-serif;
    letter-spacing: 0.05em;
    color: var(--primary-color-dark);
}

.c_timeline-desc {
    margin-top: 6px;
    font-size: 15px;
    color: var(--black-color);
}

/* ---------- 強み・大切にしていること ---------- */
.c_strengths-card {
    padding: 32px 24px;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 768px) {
    .c_strengths-card {
        padding: 48px;
    }
}

.c_strengths-eyebrow {
    font-size: 14px;
    color: var(--gray-color02);
    letter-spacing: 0.05em;
}

.c_strengths-heading {
    margin-top: 4px;
    font-family: "Hammersmith One", sans-serif;
    font-size: 30px;
    letter-spacing: 0.12em;
    color: var(--black-color);
}

@media screen and (min-width: 768px) {
    .c_strengths-heading {
        font-size: 38px;
    }
}

.c_strengths-list {
    display: grid;
    gap: 32px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

@media screen and (min-width: 768px) {
    .c_strengths-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

.c_strengths-item {
    padding-left: 16px;
    border-left: 3px solid var(--primary-color);
}

.c_strengths-title {
    font-weight: 700;
    line-height: 1.6;
    color: var(--primary-color-dark);
}

@media screen and (min-width: 768px) {
    .c_strengths-title {
        font-size: 20px;
    }
}

.c_strengths-desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-color02);
}

@media screen and (min-width: 768px) {
    .c_strengths-desc {
        font-size: 16px;
    }
}

/* ---------- これからのビジョン ---------- */
.c_vision-card {
    padding: 32px 24px;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 768px) {
    .c_vision-card {
        padding: 48px;
    }
}

.c_vision-eyebrow {
    font-size: 14px;
    color: var(--gray-color02);
    letter-spacing: 0.05em;
}

.c_vision-heading {
    margin-top: 4px;
    font-family: "Hammersmith One", sans-serif;
    font-size: 30px;
    letter-spacing: 0.12em;
    color: var(--black-color);
}

@media screen and (min-width: 768px) {
    .c_vision-heading {
        font-size: 38px;
    }
}

.c_vision-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.c_vision-tag {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 6px;
    background: var(--primary-color);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--white-color);
}

.c_vision-desc {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--black-color);
}

/* ---------- CONTACT フォーム ---------- */
.c_contact-card {
    padding: 32px 24px;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 768px) {
    .c_contact-card {
        padding: 48px;
    }
}

.c_contact-inner {
    max-width: var(--content-width-sm);
    margin: 0 auto;
}

/* ---------- SERVICES(準備中) ---------- */
.c_services-card {
    padding: 80px 24px;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    text-align: center;
}

@media screen and (min-width: 768px) {
    .c_services-card {
        padding: 140px 24px;
    }
}

.c_services-comingsoon {
    font-family: "Hammersmith One", sans-serif;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: var(--primary-color);
}

@media screen and (min-width: 768px) {
    .c_services-comingsoon {
        font-size: 36px;
    }
}

.c_contact-heading {
    margin-bottom: 16px;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--black-color);
}

@media screen and (min-width: 768px) {
    .c_contact-heading {
        font-size: 28px;
    }
}

.c_contact-lead {
    max-width: 560px;
    margin: 0 auto;
    color: var(--gray-color02);
}

.c_contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 560px;
    margin: 32px auto 0;
}

.c_contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c_contact-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--black-color);
}

.c_contact-required,
.c_contact-optional {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--white-color);
}

.c_contact-required {
    background: #d9534f;
}

.c_contact-optional {
    background: var(--gray-color02);
}

.c_contact-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.c_contact-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--black-color);
}

.c_contact-check input[type="checkbox"] {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1px solid var(--gray-color02);
    border-radius: 4px;
    background: var(--white-color);
    cursor: pointer;
}

.c_contact-check input[type="checkbox"]:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.c_contact-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--white-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.c_contact-input,
.c_contact-textarea {
    padding: 12px 16px;
    border: 1px solid var(--gray-color);
    border-radius: 10px;
    background: var(--white-color);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    color: var(--black-color);
    transition: border-color 0.15s ease;
}

.c_contact-input:focus,
.c_contact-textarea:focus {
    border-color: var(--primary-color);
}

.c_contact-textarea {
    min-height: 140px;
    resize: vertical;
}

.c_contact-submit {
    align-self: center;
    margin-top: 8px;
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    background: var(--accent-color);
    color: var(--white-color);
    font-family: "Hammersmith One", sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    box-shadow: 0 3px 10px rgba(217, 135, 59, 0.35);
    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.c_contact-submit:hover {
    background: var(--accent-color-dark);
    transform: translateY(-1px);
}

/* ---------- WPForms フォーム幅 ---------- */
.wpforms-container {
    max-width: 560px;
    margin: 32px auto 0;
}

/* ---------- WPForms 送信完了メッセージ ---------- */
.wpforms-confirmation-container-full {
    text-align: center;
}

/* ---------- WPForms 必須ラベル(*を「必須」の文字に置き換え) ---------- */
.wpforms-required-label {
    font-size: 0 !important;
    margin-left: 4px;
}

.wpforms-required-label::after {
    content: "必須";
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--white-color);
    background: #d9534f;
}

/* ---------- WPForms 送信ボタン(中央寄せ+サイドバーCONTACTカードに近い幅) ---------- */
.wpforms-submit-container {
    display: flex;
    justify-content: center;
}

.wpforms-submit {
    width: 100% !important;
    max-width: var(--sidebar-width);
}

/* ==========================================================================
   WORKS(サービス一覧のカードグリッド)
   静的版 portfolio_code/css/style.css から移植。LINEスタンプの一覧・「他の作品」でも同じカードを使う
   ========================================================================== */

.c_services-lead {
    max-width: var(--content-width-sm);
    margin: 0 auto 40px;
    color: var(--gray-color02);
    text-align: center;
}

/* PC(1080px〜)は3列固定。3列×400px+gap24px×2=1248pxを上限とし、
   メインがそれより広い場合はグリッド自体を中央寄せする。
   改行時に余った1枚は(grid標準の挙動どおり)1列目=左側に配置される */
.c_services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media screen and (min-width: 768px) {
    .c_services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        max-width: 828px;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1080px) {
    .c_services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1248px;
        margin: 0 auto;
    }
}

.c_service-card {
    height: 100%;
}

.c_service-card_link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    color: var(--black-color);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.c_service-card_link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.c_service-card_thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 3;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--primary-color-dark)
    );
}

.c_service-card_thumb--accent {
    background: linear-gradient(
        135deg,
        var(--accent-color),
        var(--accent-color-dark)
    );
}

.c_service-card_thumb svg {
    width: 38%;
    height: 38%;
    color: var(--white-color);
}

.c_service-card_body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
}

.c_service-card_title {
    font-family: "Hammersmith One", "Noto Sans JP", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--black-color);
}

.c_service-card_desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-color02);
}

/* ==========================================================================
   LINEスタンプ(一覧・個別ページ)
   ========================================================================== */

/* ---------- キーボード操作時の枠(既存の *:focus { outline: none } を、ここの部品だけ打ち消す) ---------- */
.c_bc a:focus-visible,
.c_service-card_link:focus-visible,
.m_btn:focus-visible,
.c_pager-item:focus-visible,
.c_pager-list:focus-visible {
    outline: 3px solid var(--primary-color-dark);
    outline-offset: 3px;
}

/* ---------- KVのタイトル(h1・長い作品名が折り返しても詰まりすぎない行間) ---------- */
.c_kv-title--page {
    line-height: 1.4;
}

/* ---------- パンくず ---------- */
.c_bc {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin: 16px 4px 12px;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: #5c5c5c;
}

.c_bc li + li::before {
    content: ">";
    /* 読み上げでは「>」を読まない(対応していないブラウザでは、上の値のまま表示される) */
    content: ">" / "";
    margin-right: 8px;
    color: #8a8a8a;
}

.c_bc a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 現在のページ(押せない文字)。既存の span { cursor: pointer } を打ち消す */
.c_bc [aria-current="page"] {
    cursor: auto;
}

/* ---------- 一覧: 導入文・AI表記 ---------- */
.c_intro {
    max-width: var(--content-width-sm);
    margin: 0 auto 40px;
    text-align: center;
}

.c_intro-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--black-color);
}

.c_intro-ai {
    margin-top: 20px;
    font-size: 14px;
    color: var(--gray-color03);
}

/* ---------- 作品カード(サービスカードの作りを流用) ---------- */
.c_stamp-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 画像枠の高さを、幅の80%にする(旧: 1 / 1)。2026-09-20 Ayukaさん依頼: カード全体の高さを小さく */
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--gray-color);
}

.c_stamp-thumb_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.c_stamp-meta {
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-color02);
}

/* ---------- 一覧: 作者ページへのリンク ---------- */
.c_author {
    margin-top: 48px;
    text-align: center;
}

.c_author-note {
    margin-top: 2px;
}

/* ---------- LINE STOREボタン ----------
   白文字と#5f84b1のコントラスト比は約3.9:1のため、WCAGの「大きな文字」の基準に合わせて
   19px以上の太字にしている。文字サイズ・太さは下げないこと */
.m_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 52px;
    padding: 12px 28px;
    border-radius: 12px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-align: center;
    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.m_btn:hover {
    background: var(--primary-color-dark);
    transform: translateY(-1px);
}

/* 白地・青枠(作者ページへのリンク)。文字色は青(#517096)で、白地とのコントラストは十分 */
.m_btn--outline {
    border: 2px solid var(--primary-color);
    background: var(--white-color);
    color: var(--primary-color-dark);
}

.m_btn--outline:hover {
    background: #f3f7fb;
}

.m_btn-note {
    cursor: auto; /* 既存の span { cursor: pointer } を打ち消す(押せない文字のため) */
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--gray-color03);
}

/* スマホ(〜767px)では、ボタンを幅いっぱいに */
@media screen and (max-width: 767px) {
    .c_work-cta .m_btn {
        width: 100%;
    }

    .c_author .m_btn {
        width: 100%;
        min-width: 0;
    }
}

/* ---------- 個別ページ: 概要カード ---------- */
.c_work-card {
    padding: 32px 24px;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 768px) {
    .c_work-card {
        padding: 48px;
    }
}

.c_work-overview {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* スマホ: メイン画像は最大280px・中央。タブレット以上: 左に240px角 */
.c_work-visual {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: var(--gray-color);
}

.c_work-visual_img {
    display: block;
    width: 100%;
    height: auto;
}

.c_work-info {
    min-width: 0;
}

@media screen and (min-width: 768px) {
    .c_work-overview {
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
    }

    .c_work-visual {
        flex: 0 0 240px;
        width: 240px;
        max-width: none;
        margin: 0;
    }

    .c_work-info {
        flex: 1;
    }
}

.c_work-label {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--gray-color02);
}

.c_work-story {
    margin-top: 4px;
    color: var(--black-color);
}

.c_work-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.7;
}

.c_work-meta dt {
    color: var(--gray-color02);
}

.c_work-meta dd {
    margin: 0;
    color: var(--black-color);
}

.c_work-cta {
    margin-top: 28px;
}

.c_work-cta--end {
    margin-top: 32px;
}

/* ---------- 個別ページ: スタンプ一覧 ---------- */
.c_card-eyebrow {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--gray-color02);
}

.c_card-heading {
    margin-top: 4px;
    font-family: "Hammersmith One", "Noto Sans JP", sans-serif;
    font-size: 30px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    color: var(--black-color);
}

@media screen and (min-width: 768px) {
    .c_card-heading {
        font-size: 38px;
    }
}

/* 「他の作品」の小見出しは、白いカードの外(ページ背景の上)にあるため、濃いほうのグレーにする */
.c_others-eyebrow {
    color: var(--gray-color03);
}

.c_card-count {
    margin-top: 4px;
    font-size: 14px;
    color: var(--gray-color02);
}

/* スマホ2列・タブレット以上4列。1枚ずつ薄いグレーのタイル(比率370:320)に、比率を保って収める(拡大・切り抜きはしない) */
.c_stamp-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}

@media screen and (min-width: 768px) {
    .c_stamp-tiles {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

.c_stamp-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 370 / 320;
    overflow: hidden;
    border-radius: 12px;
    background: var(--gray-color);
}

.c_stamp-tile_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- 個別ページ: 前後の作品 ---------- */
.c_pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.c_pager--solo {
    grid-template-columns: 1fr;
}

@media screen and (min-width: 768px) {
    .c_pager {
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
    }

    .c_pager--solo {
        grid-template-columns: 1fr;
    }
}

.c_pager-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--white-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.c_pager-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.c_pager-next {
    align-items: flex-end;
    text-align: right;
}

/* 前の作品は左、次の作品は右に固定する(端の作品で片方が無いときも、位置が変わらない) */
.c_pager-prev {
    grid-column: 1;
}

.c_pager-next {
    grid-column: 2;
}

/* 片方だけのとき(作った順の端。前=いちばん古い作品、次=いちばん新しい作品には無い):
   スマホでは、そのボタンを幅いっぱいにする */
.c_pager--no-prev .c_pager-next,
.c_pager--no-next .c_pager-prev {
    grid-column: 1 / -1;
}

.c_pager-label {
    font-size: 12px;
    line-height: 1.6;
    color: var(--gray-color02);
}

.c_pager-title {
    font-weight: 700;
    line-height: 1.6;
}

/* 「LINEスタンプ一覧へ戻る」: スマホでは2段目に、幅いっぱいで置く */
.c_pager-list {
    display: flex;
    grid-column: 1 / -1;
    order: 3;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: var(--primary-color-dark);
}

/* タブレット以上: 左=前の作品、中央=一覧へ戻る、右=次の作品。片方が無いときは、その場所を空けて、
   「一覧へ戻る」は中央のまま */
@media screen and (min-width: 768px) {
    .c_pager-prev,
    .c_pager--no-next .c_pager-prev {
        grid-column: 1;
    }

    .c_pager-list {
        grid-column: 2;
        order: 0;
    }

    .c_pager-next,
    .c_pager--no-prev .c_pager-next {
        grid-column: 3;
    }

    .c_pager--solo .c_pager-list {
        grid-column: 1;
    }
}

/* ---------- 個別ページ: 他の作品(Swiperカルーセル。スマホ1枚/タブレット2枚/PCは400px幅カードを入るだけ) ---------- */
.c_others-heading {
    margin: 4px 0 20px;
    font-family: "Hammersmith One", "Noto Sans JP", sans-serif;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 0.06em;
    color: var(--black-color);
}

.c_others-swiper {
    position: relative;
    /* 矢印ボタン分の左右余白 */
    padding: 0 8px;
}

.c_others {
    margin: 0;
    padding: 0;
    list-style: none;
    /* 高さの違うカードが並んでも下端を揃える */
    align-items: stretch;
}

.c_others .c_service-card_link {
    height: 100%;
}

.c_others-swiper .swiper-button-prev,
.c_others-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background: var(--white-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    color: var(--primary-color-dark);
}

.c_others-swiper .swiper-button-prev::after,
.c_others-swiper .swiper-button-next::after {
    font-size: 13px;
    font-weight: 700;
}

.c_others-swiper .swiper-button-disabled {
    opacity: 0.3;
}

@media screen and (min-width: 1080px) {
    .c_others-swiper .swiper-slide {
        width: 400px;
    }
}

/* 動きを減らす設定の人には、ホバー時の動きを付けない */
@media (prefers-reduced-motion: reduce) {
    .c_service-card_link,
    .c_pager-item,
    .m_btn {
        transition: none;
    }

    .c_service-card_link:hover,
    .c_pager-item:hover,
    .m_btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   ライティング(一覧・1ページ完結。固定ページ page-writing.php / URL: /works/writing/)
   静的版 portfolio_code/css/style.css の同名セクションから移植。
   参照: 03_web_production/01_planner/成果物/portfolio_site/ライティングページ_構成案.md
        03_web_production/01_planner/成果物/portfolio_site/ライティングページ_デザイン案.html
   ※サイドバーの背景を青にするルール(全ページ共通)は、この節ではなく
     「l_layout : 左サイドバー + 右コンテンツ」の節に置いてある
   ========================================================================== */

/* セクション間隔を80pxにする(サイト共通は40pxのため、このページだけ絞って上書き) */
#writing .c_section:not(:first-child) {
    margin-top: 80px;
}

/* ---------- セクション見出し(GENRE/STRENGTH/SAMPLE ARTICLES/RESULTS)は、
   既存の c_card-eyebrow / c_card-heading(LINEスタンプ個別ページのSTAMPS見出しと同じ土台)をそのまま使う。
   左寄せ(既定値)のまま、中央寄せの修飾クラスは付けない ---------- */

/* 見出しのすぐ下に既存の c_services-grid(カードグリッド)を置くときの上余白(このページのみ) */
#writing .c_card-heading + .c_services-grid {
    margin-top: 40px;
}

/* 導入文(自己紹介)の最大幅を、下のGENREカードグリッド(.c_services-grid)の幅に揃える。
   .c_intro 自体はLINEスタンプ一覧でも使う共通クラスのため、このページ(#writing)だけに絞って上書きする */
#writing .c_intro {
    margin-bottom: 0;
    max-width: none;
    text-align: left;
}

@media screen and (min-width: 768px) {
    #writing .c_intro {
        max-width: 828px;
    }
}

@media screen and (min-width: 1080px) {
    #writing .c_intro {
        max-width: 1248px;
    }
}

/* 文章(リード文・注記)も、見出しと同じく左寄せにする。ボタン付きのカード(実績エリア・CTA)は
   独立した箱のデザインとして、中央寄せのまま変更していない */
#writing .c_section-lead,
#writing .c_section-note {
    text-align: left;
}

/* ---------- メイン部分(サイドバーを除く)のうち、KVを除いた部分(パンくず・本文・フッター)に
   最大幅を設け、中央寄せにする。KVはこれまでどおりコンテンツ幅いっぱいに表示する ---------- */
#writing .c_bc-wrap,
#writing .l_contents,
#writing .c_main-footer {
    max-width: 1248px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- セクション補足文(リード文・注記) ---------- */
.c_section-lead {
    max-width: 640px;
    margin: 40px auto 0;
    color: var(--gray-color02);
    text-align: center;
}

.c_section-note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--gray-color02);
    text-align: center;
}

/* リード文のすぐ下にボタンを置くとき(RESULTSのnoteリンクなど)の間隔 */
.c_section-lead + .m_btn {
    margin-top: 20px;
}

/* ---------- 実績エリア(note): 見出しの下に、幅いっぱいの白背景カードを1枚敷き、
   その中にリード文+ボタンを収める ---------- */
.c_results-card {
    max-width: 1248px;
    margin: 40px auto 0;
    padding: 40px;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* カードの中では、外側の .c_section-lead の余白(40px auto 0)や中央寄せ・幅制限が不要なのでリセットする */
.c_results-card .c_section-lead {
    max-width: none;
    margin: 0;
    text-align: left;
}

/* 【今だけ】noteを見るボタンだけ中央寄せにする(文章は左寄せのまま) */
.c_results-card .m_btn {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 強み一覧(縦積みのリストではなく、GENREカードと同じ配置の横並びカードにする) ---------- */
.c_strength-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 620px;
    margin: 40px auto 0;
    padding: 0;
    list-style: none;
}

@media screen and (min-width: 768px) {
    .c_strength-list {
        grid-template-columns: repeat(2, 1fr);
        max-width: 828px;
    }
}

@media screen and (min-width: 1080px) {
    .c_strength-list {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1248px;
    }
}

.c_strength-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--white-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.c_strength-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gray-color);
    color: var(--primary-color-dark);
}

.c_strength-icon svg {
    width: 18px;
    height: 18px;
}

.c_strength-text {
    padding-top: 6px;
    color: var(--black-color);
}

/* ---------- サンプル記事カード(暫定: 当面はComing Soon表示のみ。
   サンプル記事が完成しブログに公開され次第、自社ブログへのリンクカードに差し替え予定) ---------- */
/* 3枠を横並びで表示する。カード間の余白は固定のgapではなく、
   3枚とも同じ幅にしたうえでjustify-content: space-betweenで配分する */
.c_sample-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 20px;
    max-width: 1248px;
    margin: 28px auto 0;
    padding: 0;
    list-style: none;
}

.c_sample-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    color: var(--black-color);
    opacity: 0.82;
}

@media screen and (min-width: 768px) {
    .c_sample-card {
        width: 48%;
    }
}

@media screen and (min-width: 1080px) {
    .c_sample-card {
        width: 31%;
    }
}

.c_sample-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 3;
    background: var(--gray-color);
}

.c_sample-thumb svg {
    width: 26%;
    height: 26%;
    color: var(--gray-color02);
}

.c_sample-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--gray-color02);
    color: var(--white-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.c_sample-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
}

.c_sample-genre {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-color-dark);
}

.c_sample-title {
    font-size: 16px;
    line-height: 1.6;
    color: var(--black-color);
}

.c_sample-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-color02);
}

/* ---------- CTAセクション(確定要素。ページ下部に1か所のみ設置。
   メイン部分いっぱいに表示するため、.l_contents の外に置いている(HTML側を参照)) ---------- */
#writing .l_contents {
    /* 下側の余白は、CTAセクション自身のmargin-topが担うため0にする(二重に空かないように) */
    padding-bottom: 0;
}

#writing .c_section--full {
    /* CTAとフッターの間に、元の .l_contents の下余白と同じ量を確保する */
    margin-bottom: 80px;
}

@media screen and (min-width: 768px) {
    #writing .c_section--full {
        margin-bottom: 120px;
    }
}

.c_cta-band {
    /* 高さを100px増やす(上下に50pxずつ) */
    padding: 106px 28px;
    /* 写真が用意されるまでのフォールバック色 */
    background-color: var(--black-color);
    /* 写真(../img/cta-contact.jpg)の上に、白文字が読みやすいよう灰色を半透明で重ねる
       (オレンジだと白文字が見えにくいため、灰色に変更) */
    background-image: linear-gradient(135deg, rgba(51, 51, 51, 0.72), rgba(51, 51, 51, 0.55)), url("../img/cta-contact.jpg");
    background-size: cover;
    /* 画像の上側(パソコンが写っているあたり)が見えるように */
    background-position: center top;
    background-repeat: no-repeat;
    color: var(--white-color);
    text-align: center;
}

.c_cta-heading {
    font-family: "Hammersmith One", "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.08em;
    line-height: 1.5;
}

.c_cta-text {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.92);
}

.c_cta-band .m_btn {
    margin-top: 22px;
    background: var(--accent-color);
    color: var(--white-color);
}

.c_cta-band .m_btn:hover {
    background: var(--accent-color-dark);
}

@media screen and (max-width: 767px) {
    .c_cta-band .m_btn {
        width: 100%;
    }
}