/* ----------------------------------------------------------
  レスポンシブ対応
---------------------------------------------------------- */
@media screen and (max-width: 767px){
    .instagram-media {
        position: static !important;
    }
    .sp{
display: block;
    }
    .pc{
        display: none;
    }
    .wpcf7 {
      padding: 10px;
    }
  
    input[type="text"],
    input[type="email"],
    textarea,
    select {
      font-size: 14px;
    }
  
    input[type="submit"] {
      font-size: 1rem;
    }
    #wrapper{
overflow: hidden;
        min-width: unset !important;
        box-sizing: border-box;
        width: 100%;
    }
    .header-nav {
        display: none;
    }
    header{
        height: auto;
        position: fixed;
        min-width: unset;
    }
    .header-logo img{
        height: 25px;
    }
    .top-kv::after{
        height: 100%;
        top: 0;
        display: none;
    }
    img.kv-hito {
        display: none;
        top: -50vh;
        right: 0%;
        z-index: 1;
        width: 100%;
        height: 100vh;
        object-fit: contain;
        opacity: 0.45;
    }
    img.kv-hito03 {
        bottom: 0;
        left: -5vw;
        top: unset;
        width: 15vh;
        position: fixed;
        z-index: 0;
        display: none;
    }
    img.kv-hito02 {
        bottom: 0;
        right: 0;
        left: unset;
        width: 30vh;
        position: fixed;
        z-index: 0;
        display: none;
    }
    .top-kv{
        display: block;
        align-content: start;
        padding: 0 20px;
        box-sizing: border-box;
        overflow: hidden;
        height: 100%;
        margin-bottom: 80px;
        min-height: 100vh;
    }
    .top-kv_in{
        width: 100%;
        display: grid;
        margin: 0;
        justify-content: left;
        gap: 10vw;
}
.card-ttl{
    font-size: 1rem;
    margin: 10px 0;
    font-weight: bold;
    line-height: 1.25;
}
    .top-kv_logo{
        width: 100vh;
        max-width: 85vh;
        height: auto;
        padding: 0;
        box-sizing: border-box;
        left: unset;
        top: 37vh;
        right: -37.55555vh;
        bottom: unset;
        transform: rotate(90deg);
        margin: 0;
    }
    .top-kv_article {
        display: block;
        text-align: left;
        padding-bottom: 0;
    }
    .top-kv_text__video{
        padding: 0;
        margin: 0;
        display: block;
        text-align: center;
        align-content: center;
        width: 80px;
        height: 50px;
        z-index: 10;
    }
    .top-kv_text{
        font-size: 2.25rem;
        padding: 0;
        margin: 0;
        padding-top: 80px;
    }
    .top-kv_text__sub{
        font-size: 15px;
        left: 0;
        text-align: left;
        margin: 0;
    }
    .top-kv_list{
        width: 100%;
        padding: 0 20px;
        gap: 10px;
    }
    .top-kv_list li{
        padding: 30px 7px 15px;
    gap: 10px;
    }
    .top-kv_list li a{
        font-size: 10px;
        padding: 7px 10px;  
    }
    .top-kv_list li a::after{
        width: 7px;
        height: 7px;
        transform: rotate(45deg);
        right: 10px;
        top: 8px;
    }
    .top-kv_list_sub_text{
        display: inline-flex;
        justify-content: center;
        font-size: 12px;
        white-space: nowrap;
        min-width: unset;
        width: 100%;
    }
    .header-nav-list-sub{
        text-align: left;
    }
    .tkl-sub {
        font-size: 11px;
        font-weight: 600;
    }
    .tkl-main{
        font-size: 1rem;
    }
    .top-kv_list_main_text p{
        font-size: 11px;
    }
    .card{
        width: auto;
        height: auto;
        margin: 0;
        margin-right: 30vw;
    }
    .top-kv_list_sub_text::before {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50%;
        margin-left: -12px;
        border: 12px solid transparent;
        border-top: 12px solid #FFF;
        z-index: 2;
    }
    .top-kv_list_sub_text::after {
        content: "";
        position: absolute;
        bottom: -24px;
        left: 50%;
        margin-left: -12px;
        border: 10px solid transparent;
        border-top: 10px solid;
        z-index: 1;
    }
    /* レスポンシブ ハンバーガーメニュー (スマホ専用) */
    .header__nav {
        display: flex !important;
        align-items: center;
        width: 100%;  /* ヘッダー全体を埋めるように */
        justify-content: flex-end; /* ハンバーガーを右端に寄せる */
      }
      
      .header__menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: none; /* デフォルトで非表示 */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 100; /* 他のコンテンツより前面に */
      }
      
      .header__menu li {
        margin: 0 0 6vw;
        width: 100%;
      }
    
      
      .header__menu a {
        text-decoration: none;
        color: #00001e;
        padding: 0;
        font-size: 1.35rem;
        display: block;
        width: auto;
        text-align: center; /* リンクを中央揃え */
        font-weight: bold;
      }
      
      .header__hamburger {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        width: 30px;
        height: 30px;
        position: relative;
        z-index: 10;
        display: block !important;
      }
      
      .header__hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #c80000;
        margin-bottom: 5px;
        transition: transform 0.3s ease, opacity 0.3s ease;
      }
      .header__hamburger span:nth-child(2){
        width: 20px;
        margin: 0px auto 5px;
      }
      .header__hamburger span:last-child {
        margin-bottom: 0;
      }
      
      .header__hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      
      .header__hamburger.active span:nth-child(2) {
        opacity: 0;
      }
      
      .header__hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
      }
      
      .header__menu.active {
        display: flex !important; /* メニュー表示 */
        height: 100vh;
      }
      .header_nav__contact a{
        color: #fff;
        margin: 0 auto;
        width: 70vw;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 100vw;
      }
      h2.top-title{
        width: auto;
        font-size: 2rem;
        line-height: 1.5;
      }
      .top-inner{
        width: 100%;
        padding: 5vh 20px;
        box-sizing: border-box;
      }
      .top-head {
        display: grid;
        gap: 3vh;
    }
    .top-text{
        font-size: 1rem;
    }
    .about-list_bk{
        width: 100%;
    }
    .about-list_bk h3{
        font-size: 1.25rem;
    }
    .about-list{
        display: flex;
            gap: 6px;
    }
    .about-list li{
        width: auto;
        height: auto;
        min-height: auto;
        gap: 10px;
        margin: 0;
    }
    .about-list img{
        width: 100%;
        height: 65px;
        object-fit: contain;
    }
    .about-list p{
        font-size: 14px;
    }
    .prob-num{
        width: 25vw;
        height: calc(tan(60deg)* 20vw / 2);
        font-size: 1.55rem;
        font-weight: bold;
    }
    .problem-list{
        width: 100%;
        max-width: 100%;
        margin: 5vh auto; 
        gap: 30px;
    }
    .problem-list li{
        width: 100%;
        padding: 30px 15px;
        display: block;
    }
    .prob-bk{
        display: grid;
            width: 100%;
            grid-template-columns: 1fr;
            gap:0;
            margin-bottom: 10px;
    }
    .prob-people {
        bottom: 0;
        width: auto;
        height: 150px;
    }
    .prob-people span{
        width: auto;
        position: relative;
        bottom: 5vh;
    }
    .prob-people img{
        width: 100%;
        height: 100%;
    }
    .prob-text{
        width: auto;
        margin: 0 auto;

    }
    .prob-text_1st, .prob-text_2nd{
        font-size: 14px;
        padding: 15px 20px;
    }
    .prob-arrow{
        margin: 20px 0;
    height: auto;
    width: auto;
    align-items: center;
    transform: rotate(90deg);
    display: inline-block;
    }
    .solve p{
        font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.5;
    }
    .solve-txt{
        font-size: 1rem;
    }
    .solve {
        margin-left: 0;
    }
    .solve-attention{
        position: relative;
        bottom: 0;
        right: 0;
        font-size: 12px;
        line-height: 1.5;
        text-align: left; 
    }
    .feature-list{
        gap: 30px;
        max-width: 100%;
    width: 100%;
    margin: 5vh auto;
    grid-template-columns: repeat(1, 1fr);
    }
    .feature-list li span {
        font-size: unset;
    }
    .feature-num span{
        font-size: 1rem !important;
        left:0;
    }
    .feature-list li{
        font-size: 1.25rem;
        padding: 3vh 20px;
    }
    .flow-list{
        max-width: 100%;
        width: 100%;  
        grid-template-columns: repeat(1, 1fr);
        margin: 5vh auto;
    }
    .flow-list li{
        border-right: unset;
        padding: 30px 0; 
    }
    .flow-list li img{
        min-height: 150px;
    object-fit: contain;
    max-height: 150px;
    margin: 3vh 0;
    }
    .flow-list li::before {
        content: "";
        position: absolute;
        background: #fff;
        top: unset;
        bottom: -25px;
        right: 45%;
        width: 50px;
        height: 50px;
    }
    .flow-list li::after{
        bottom: -15px;
        top:unset;
        right: 48%;
        transform: rotate(133deg);
    }
    .flow-title p {
        font-size: 1.25rem;
        line-height: 1;
        font-weight: bold;
    }
    .flow-num{
        font-size: 1rem;   
    }
    .flow-text{
        font-size: 1rem;
    }
    .top-title_en{
        top: -15px;
        left: -12px;
        font-size: 20vw;
        font-weight: bold;
    }
    .flow-list li:last-child{
        border-bottom: 0;
    }
    .price-bk {
        position: relative;
        margin: 5vh 0;
    }
    .price-bk_in{
        max-width: 100%;
        padding: 40px 20px 20px;
        gap: 20px;
        margin: 0;
        margin-bottom: 30px;
    }
    .price-copy{
        position: absolute;
        top: -11px;
        right: 0;
        left: 0;
        margin: 0 auto;
        display: inline-block;
    }
    .price-copy span{
        font-size: 14px;
    }
    .price-body{
        flex-wrap: wrap;
        white-space: no-wrap;
    }
    .price-name {
        font-size: 2rem;
        font-weight: bold;
        letter-spacing: 0.08em;
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    .price-time{
        font-size: 12px;
        padding: 5px 10px;  
        margin-right: 5px;
    }
    .price-fee{
        font-size: 1.75rem;
    }
    .price-plus{
        font-size: 2rem;
        padding-right: 5px;
    }
    .price-en{
        font-size: 12px;
        letter-spacing: 0;
    }
    .price-en::after{
        font-size: 12px;
    }
    .price-researchFee{
        max-width: 100%;
        width: 100%;
    }
    .price-researchFee_in{
        padding: 40px 20px 20px; 
        gap:20px;
    }
    .price-researchFee_fee{
        font-size: 2rem;
    }
    .price-researchFee_en {
        font-size: 14px;
        position: relative;
        padding-left: 5px;
    }
    .price-researchFee_en::after{
        font-size: 14px;

    }
    .case-bk_in{
        max-width: 100%;
        width: 100%;
        margin: 5vh auto; 
        overflow-x: scroll;
    }
    .case-list{
        min-width: 1040px;
    }
    .case-list li{
        font-size: 1rem;
    }
    .ttl-case{
        font-size:1.25rem;
    }
    .case-table tbody td{
        font-size: 1rem;
    }
    .faq-in{
        max-width: 100%; 
        margin: 5vh auto 0; 

    }
    .ttl-faq{
        font-size:1.25rem;
    }
    .faq-list dt span,.faq-list dd span{
        aspect-ratio: 1/1;
    }
    .faq-list dt.active + dd{
        align-items: start;
        text-align: justify;
    }
    .contact-in{
        max-width: 100%;
        margin: 5vh auto 0;
        display: block;
    }
    .contact-line a{
        padding: 10px;
        gap: 15px;
        font-size: 1rem;
    }
    .contact-line img {
        width: 50px;
        height: 50px;
        border-radius: 100vw;
    }
    .contact-main_ttl{
        font-size: 1.25rem;
    }
    .form-group{
        grid-template-columns: 1fr;  
        gap:10px;
        padding: 5px 0 20px;
    }
    input.wpcf7-form-control.wpcf7-tel.wpcf7-text.wpcf7-validates-as-tel.your-tel {
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    details[open] summary::before{
        display:none;
    }
    summary::before{
        display: none;
    }
    .banner-list{
        flex-direction: row;
        width: 100%;
        gap: 20px;
    }
    .button {
        font-size: 12px;
    }
    #sticky-banner{
        width: 100%;
        box-sizing: border-box; 
    }
    .voice-list{
        max-width: 100%;
        width: 100%;
        grid-template-columns: repeat(1,1fr);
    }
    .footer-inner{
        width: 100%;
        padding: 30px 20px;
        display: grid; 
    }
    .page-in{
        width: 100%;
        margin: 0 auto;
        padding: 10vh 20px;
        box-sizing: border-box;  
    }
    .page-title {
        margin-bottom: 30px;
        font-size: 1rem;
    }
    h2.wp-block-heading{
        font-size: 1rem;
    }
    .card-img {
        padding: 0;
    }
    .cards{
        margin-top: 30px;
    }
    .creative-list{
        width: 100%;
        grid-template-columns: repeat(1, 1fr);

    }
    .card span{
        font-size: 9px;
    }
    #pickup{
        padding: 0;
    }
    .pick-up_bk{
        grid-template-columns: 1fr;
        width: 100%;
        padding: 20px 0;

    }
    .pickup-ttl{
        font-size: 1.35rem;
    }
    .monthly-fee{
        font-size: 24px;
        margin-right: 0.5rem;
    }
    .currency {
        font-size: 18px;
    }
    .price {
        font-size: 42px;
        color: #c80000;
      }
}