@charset "UTF-8";

/* PCデザインをもとに設計したスマートフォン表示 */
@media screen and (max-width: 767px) {
    body { margin: 5px; font-size: 1.4rem; letter-spacing: .04em; }
    .pc, .pc_br { display: none; }
    .sp { display: block; }
    .sp_br { display: inline; }
    .w-90 { width: 92%; }
    .w-80, .w-70 { width: 86%; }
    .box-two, .box-three, .box-four { grid-template-columns: 1fr; gap: 30px; }
    .one-two, .one-three { width: 100%; }
    .box-sp { display: flex; }
    .header-inner { min-height: 70px; gap: 12px; }
    .site-logo img { width: 112px; }
    .nav-list { gap: 12px; font-size: 1rem; letter-spacing: .02em; }
    .nav-contact { padding: 5px 6px; }
    .hero { padding: 65px 0 75px; }
    .hero-title { font-size: clamp(2.4rem, 7.4vw, 5.6rem); letter-spacing: .035em; }
    .hero-message { margin-top: 30px; }
    .hero-message h2 { font-size: 1.6rem; }
    .hero-message p { font-size: 1rem; }
    .hero-message .hero-ja { font-size: 1.1rem; line-height: 1.8; }
    .section-title h1, .section-title h2 { font-size: 2rem; }
    .section-title p { font-size: 1.1rem; }
    .section-title { padding-bottom: 14px; }
    .works-grid { margin-top: 35px; row-gap: 38px; }
    .works-photo { border-radius: 18px; }
    .works-card-title { font-size: 1.4rem; }
    .works-role { font-size: 1rem; margin-top: 8px; }
    .button-wrap { margin-top: 40px; }
    .view-more { padding: 9px 14px; }
    .home-works { margin-bottom: 65px; }
    .white-panel { border-radius: 28px; }
    .home-about { padding: 48px 22px; margin-bottom: 65px; }
    .home-about-text { font-size: 1.3rem; margin-top: 30px; text-align: left; }
    .site-footer { padding-top: 45px; }
    .footer-logo img { width: 170px; }
    .site-footer nav a { display: inline-block; padding: 4px 0; }
    .footer-contact { font-size: 1.1rem; }
    .copyright { margin-top: 40px; }
    .page-section { padding-top: 45px; padding-bottom: 65px; }
    .sub-title { margin-bottom: 28px; font-size: 1.2rem; }
    .profile-section { padding: 45px 0; }
    .profile { display: block; }
    .profile > img { width: 190px; margin: 0 auto 30px; }
    .page-about p { font-size: 1.3rem; }
    .panel-inner { width: 86%; }
    .career-section { padding: 40px 0; }
    .career-list > div { grid-template-columns: 1fr; gap: 6px; }
    .career-list h3, .strength-row h3, .values-section h3 { font-size: 1.4rem; }
    .skills-section { padding-top: 50px; }
    .skill-tags { gap: 7px; }
    .skill-tags li { font-size: 1.2rem; }
    .tools-section { padding: 50px 0; }
    .tools-groups { gap: 12px; }
    .tool-list { gap: 12px; }
    .tool-list li, .tool-list img { width: 52px; }
    .tool-list span { font-size: 1rem; }
    .strengths-section { padding-top: 40px; padding-bottom: 10px; }
    .strength-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0 30px; }
    .values-section { padding-top: 50px; }
    .values-section .box-two { gap: 30px; }
    .works-detail-intro { padding-top: 45px; }
    .works-detail-heading { font-size: 1.4rem; }
    .works-detail-eyecatch { width: 100%; margin: 30px auto 40px; border-radius: 18px; }
    .works-detail-outline { padding: 20px; }
    .works-outline-row dd { font-size: 1.3rem; }
    .works-detail-text { margin-top: 35px; font-size: 1.3rem; }
    .works-detail-point { margin-top: 40px; }
    .works-detail-point p { font-size: 1.3rem; }
    .design-samples > div { gap: 15px; }
    .sample-circles { gap: 8px; }
    .sample-circles i { width: clamp(40px, 13vw, 70px); height: auto; aspect-ratio: 1; }
    .back-link { margin-top: 55px; padding-top: 30px; }
}
@media screen and (max-width: 359px) {
    .site-logo img { width: 92px; }
    .nav-list { gap: 8px; font-size: .9rem; }
}