@charset "UTF-8";

@media screen and (max-width: 768px) {
    /* 共通 */
    .container {
        padding: 0px 15px;
    }
    /* ヘッダー */
    .header .header_button {
        display: none;
    }
    .header {
        transition: .3s;
    }
    .header .container {
        padding: 10px 0px 10px 10px;
    }
    .header.scrolled {
        background-color: transparent;
        transition: .3s;
        backdrop-filter: none;
    }
    .header.scrolled .header_button {
        display: block;
        top: 7px;
    }
    .header_logo h1 {
        font-size: 11px;
    }
    .header_logo h1 img {
        max-width: 120px;
    }
    .header.scrolled .header_logo h1 {
        display: none;
    }
    .header_button a {
        width:170px;
    }
    /* ハンバーガーメニュー */
    :root{
        --fab-size: 48px;
        --fab-radius: 12px;
        --fab-bg: #000;
        --fab-fg: #fff;
        --sheet-bg: #000;
        --sheet-fg: #fff;
        --cta-bg: #fff;
        --cta-fg: #000;
        --easing: cubic-bezier(.2,.9,.2,1);
        --shadow: 0 10px 24px rgba(0,0,0,.24);
    }
    .fab-menu{
        display: block;
        position: fixed;
        left: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 999;
    }
    .fab-toggle{
        width: var(--fab-size);
        height: var(--fab-size);
        border: 0;
        border-radius: var(--fab-radius);
        background: var(--fab-bg);
        color: var(--fab-fg);
        box-shadow: var(--shadow);
        display: grid;
        place-items: center;
        cursor: pointer;
        position: relative;
        z-index: 99;
    }
    .fab-toggle .bars{
        position: relative; width: 20px; height: 2px; background: currentColor;
    }
    .fab-toggle .bars::before,
    .fab-toggle .bars::after{
        content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor;
        transition: transform .25s var(--easing), opacity .2s var(--easing);
    }
    .fab-toggle .bars::before{ transform: translateY(-6px); }
    .fab-toggle .bars::after { transform: translateY(6px); }
    .fab-menu.open .bars{ background: transparent; }
    .fab-menu.open .bars::before{ transform: rotate(45deg); }
    .fab-menu.open .bars::after { transform: rotate(-45deg); }
    .sheet-backdrop{
        position: fixed; inset: 0;
        background: rgba(0,0,0,.35);
        opacity: 0; transition: opacity .25s var(--easing);
    }
    .fab-menu.open .sheet-backdrop{
        opacity: 1;
    }
    .fab-menu:not(.open) .sheet-backdrop{ pointer-events: none; }
    .sheet{
        position: fixed;
        left: 12px; right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: #000;
        color: var(--sheet-fg);
        border-radius: 0px;
        padding: 16px;
        box-shadow: var(--shadow);
        transform: translateY(120%);  /* 初期は画面外 */
        transition: transform .35s var(--easing), opacity .35s var(--easing);
        opacity: .98;
    }
    .fab-menu.open .sheet{
        transform: translateY(0);
    }
    .sheet-cta-inner {
        padding-left: 62px;
    }
    .menu-flex{
        list-style: none;
        margin: 0 0 12px;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 3px 15px;
    }
    .menu-flex a{
        display: flex;
        justify-content: space-between;
        padding: 0px 15px 0px 0px;
        color: var(--sheet-fg);
        text-decoration: none;
        border-right: 1px solid rgba(255,255,255,.7);
    }
    .menu-flex a:active{ opacity: .7; }
    .sheet-cta{
        display: block;
        margin-top: 6px;
        text-align: center;
        padding: 5px 10px;
        border-radius: 999px;
        background: var(--cta-bg);
        color: var(--cta-fg);
        text-decoration: none;
        font-weight: 700;
    }

    /* ファーストビュー */
    .hero_container, .hero_container02 {
        padding: 0px 15px;
    }
    .hero {
        height: 1400px;
    }
    .hero_line_vertical {
        left: -3%;
        max-height:700px;
    }
    .hero_line_beside {
        top: 33%;
    }
    .hearo_menu .nav ul {
        display: none;
    }
    .hero_text {
        top: 5%;
        left: 15%;
    }
    .hero_text .lead {
        font-size: 54px;
        line-height: 1.3;
    }
    .hero_text .sub {
        font-size: 14px;
        padding: 0px 20px 0px 0px;
    }
    .hero_scroll{
        --w: 1070px;
        top: 29%;
    }
    .hero_supplement {
        top: 51%;
        left: 10px;
        max-width: 100%;
    }
    .hero_supplement h3 {
        font-size: 30px;
    }
    .hero_supplement p {
        font-size: 16px;
    }
    .hero_supplement ol {
        font-size: 20px;
    }
    .step-1 {
        max-width: 175px;
        left: auto;
        right: 27%;
        top: auto;
        bottom: 28%;
    }
    .step-2 {
        max-width: 188px;
        left: auto;
        right: 45%;
        top: auto;
        bottom: 10%;
    }
    .step-3 {
        max-width: 230px;
        left: auto;
        right: -4%;
        bottom: -10%;
        top: auto;
    }
    /* セクション共通 */
    .section_title {
        font-size: 46px;
    }
    .section_text {
        top: 7%;
        left: 12%;
        padding: 0px 40px 0px 0px;
    }
    .section_text h2 {
        font-size: 46px;
    }
    .section_text p {
        font-size: 16px;
    }
    .section_line_vertical {
        left: -2%;
    }
    .section_line_beside {
        top: 85%;
    }
    .section_line_text_base {
        top: 82%;
        left: 10%;
    }
    .section_line_text_img{
        max-height: 150px;
        width:1450px;
    }
    /* サービス */
    .service_section {
        padding: 40px 0 50px;
    }
    .service_list {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 30px;
    }
    .service_list_text,
    .service_list_image {
        width: 100%;
    }
    .num,
    .service_title {
        text-align: center;
    }
    .service_text {
        line-height:1.8;
    }
    .service_list_image {
        text-align: center;
    }
    .service_list_image img {
        max-height: 100px;
    }
    .service_section .footstep_gray .footstep_gray01 {
        top: 23%;
        right: -10%;
        max-width: 100px;
    }
    .service_section .footstep_gray .footstep_gray02 {
        top: 20%;
        right: -14%;
        max-width: 135px;
    }
    .service_section .footstep_gray .footstep_gray03 {
        top: 19%;
        right: 13%;
        max-width: 160px;
    }
    .service_section .footstep_gray.footstep_gray_revert .footstep_gray01 {
        top: auto;
        bottom: 28%;
        left: -6%;
    }
    .service_section .footstep_gray.footstep_gray_revert .footstep_gray02 {
        top: auto;
        bottom: 25%;
        left: -8%;
    }
    .service_section .footstep_gray.footstep_gray_revert .footstep_gray03 {
        top: auto;
        bottom: 24%;
        left: 16%;
    }
    /* 特徴 */
    .feature_list {
        flex-direction: column;
        margin-bottom: 30px;
    }
    .feature_content {
        padding: 0px 15px;
    }
    .feature_list_image,
    .feature_list_text {
        width: 100%;
    }
    .feature_list_text h3 {
        font-size: 26px;
    }
    /* 制作実績 */
    .works_section {
        padding: 50px 0px;
    }
    .works_section .works_box {
        flex-direction: column;
        padding: 0px 0px;
    }
    .works_box_text,
    .works_box_contents {
        width: 100%;
    }
    .section_sub_text {
        font-size: 16px;
    }
    .works_list {
        width: calc(100% - 0px);
    }
    .works_section .footstep_gray.footstep_gray_revert {
        display: none;
    }
    /* メンバー紹介 */
    .member_section {
        padding: 0px 0px 30px;
    }
    .member_content {
        padding: 0px 15px;
    }
    .member_section .section_beginning {
        height: 390px;
    }
    .member_section .section_line_beside {
        top: 85%;
    }
    .section_inner_line {
        margin: 0px 0px 40px;
    }
    .member_list {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 40px;
    }
    .member_list_text,
    .memberlist_image {
        width: 100%;
    }
    .member_list_text {
        order: 2;
    }
    .memberlist_image {
        order: 1;
    }
    /* 会社案内 */
    .company_content {
        flex-direction: column;
    }
    .company_content_map,
    .company_content_text {
        width: 100%;
    }
    .company_content_map iframe {
        height: 240px !important;
    }
    /* よくあるご質問 */
    .faq_title_container .section_beginning {
        height:380px;
    }
    .faq_container {
        padding: 0px 15px;
    }
    .faq_tabs {
        flex-direction: column;
    }
    .faq_tabs li.active {
        transform: rotate(-4deg);
        margin-bottom: 6px;
    }
    /* フッター */
    .contact_section {
        padding: 0px 0 50px;
    }
    .footer_container {
        flex-direction: column;
    }
    .footer {
        padding: 30px 0px;
        margin-top: -2px;
    }
    .footer_logo {
        font-size: 11px;
    }
    .footer_logo img {
        max-width: 150px;
    }
    .footer_copyrights p {
        margin-top: 6px;
    }
}