/* ========================================
   スマホ対応
   ======================================== */
@media screen and (max-width: 768px) {

    /* =========================
       共通
       ========================= */

    .wrapper {
        width: 90%;
        padding: 1.5rem 0;
    }

    body {
        overflow-x: hidden;
    }

    p,
    li {
        font-size: 14px;
        line-height: 1.7;
    }

    /* ページタイトル */
    .contents-title h1 {
        font-size: 26px;
        margin-top: 1.5rem;
    }

    /* 紫の背景 */
    .privacy-content,
    .news-select,
    .news-detail-text,
    .about-company,
    .company,
    .product-detail-text-ol,
    .case-detail-content {
        background-color: #F5F3FF;
        border-radius: 1.25rem;
        padding: 1rem 2rem;
        margin: 4rem 0;
        box-shadow: 0 8px 24px rgba(97, 97, 97, .4);
    }

    /* =========================
       ヒーロー画像
       画像全体を表示
       ========================= */

    .hero-swiper {
        height: auto;
        margin-top: 65px;

    }

    .hero-swiper img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }


    /* =========================
       ヘッダー
       ========================= */
    .header {
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        border-radius: 0;
        z-index: 101;
    }

    .header-inner {
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .header-logo {
        background: rgba(22, 45, 86, .9);
        backdrop-filter: blur(5px);
        border-radius: 999px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
        padding: .4rem .6rem;
    }

    .header-logo img {
        max-width: 130px;
    }

    .header a {
        color: #fff;
    }

    .header-nav {
        display: none;
    }

    /* ハンバーガーボタン */
    .drawer {
        display: none;
        z-index: 102;
    }

    .drawer.is-open {
        display: block;
        position: fixed;
        top: 4rem;
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        background: #162D56;
        border-radius: 1rem;
        padding: 1.5rem;
        z-index: 101;
        animation: drawerOpen .2s ease-out;
    }

    @keyframes drawerOpen {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
    .drawer ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .drawer li {
        margin-bottom: 0;
        border-bottom: 1px solid #fff;
        margin-bottom: 1rem;
    }

    .drawer li:last-child {
        margin-bottom: 0;
        border-bottom: none;
    }

    .drawer a {
        display: block;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-size: 1rem;
        padding: .75rem;
    }

    .drawer-overlay {
        display: none;
    }

    .drawer-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 100;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 24px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        margin-left: auto;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 0 1px #000;
    }

    .hamburger.is-open span:nth-child(1) {
        transform: translateY(10.5px) rotate(45deg);
    }

    .hamburger.is-open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.is-open span:nth-child(3) {
        transform: translateY(-10.5px) rotate(-45deg);
    }

    .hamburger span {
        transition: transform .2s ease, opacity .2s ease;
    }
    /* ドロワーは一旦非表示 */
    .drawer {
        display: none;
    }

    /* =========================
       フッター
       ========================= */
    .footer {
        padding: 2.5rem 1rem 1rem;
    }

    .footer-contents {
        padding: 0 .5rem;
        margin-bottom: .5rem;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 1px solid #fff;
    }

    .footer-contents:last-child {
        border-bottom: none;
    }

    .footer-contentsbox {
        display: block;
        grid-template-columns: 1fr 1fr;
        gap: .5rem 1rem;
        border-right: none;
    }

    .footer-contentsbox a {
        font-size: 12px;
    }

    .footer small {
        padding-right: 10rem;
        font-size: 8px;
    }

    .footer-privacymark {
        right: 1rem;
        bottom: 1rem;
        transform: scale(0.8);
        transform-origin: right bottom;
    }

    /* =========================
       パンくず
       ========================= */
    .breadcrumb {
        margin-top: 65px;
        overflow-x: auto;
    }

    .breadcrumb li {
        font-size: 8px;
    }

    .breadcrumb-list {
        white-space: nowrap;
        font-size: 12px;
        margin: .25rem;
    }


    /* =========================
       CTA
       ========================= */
    .cta {
        display: block;
        margin: 1.5rem 0;
        text-align: center;
    }

    .cta-button {
        width: 80%;
        font-size: 13px;
        margin-bottom: .75rem;
    }
    
    /* =========================
    about-company
    ========================= */

    .about-company h1 {
        font-size: 28px;
    }

    /* =========================
    about
    ========================= */

    .about-text {
        padding: 0 1rem;
    }

    /* Aboutのメイン画像を小さく */
    .about-text img {
        width: 70%;
        max-width: 280px;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .about-text h1 {
        font-size: 28px;
        margin-top: 2rem;
    }

    .about-text::before {
        width: 4rem;
        height: 4rem;
        border-width: 3px;
        top: 1.5rem;
        left: 0;
    }


    /* =========================
    カード
    ========================= */

    .about-products-content .products-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }

    .products-cards {
        margin: 1.5rem 0;
        gap: .75rem;
    }

    .card {
        width: 100%;
        max-width: none;
        height: 150px;
        margin: 0;
    }


    /* =========================
    事例スライダー
    ========================= */

    .about-casestudy-swiper {
        width: 100%;
        padding: .5rem;
        margin: 1.5rem 0;
    }

    .about-casestudy-swiper .swiper-slide {
        width: 50%;
    }

    .about-casestudy-swiper .swiper-slide p {
        font-size: 10px;
        padding: .5rem;
    }


    /* =========================
    お知らせ
    ========================= */
    h2.news-archive-title {
        font-size: 16px;
        margin: 0;
    }

    .about-news {
        padding: 3rem 1rem 4.5rem;
    }

    .about-news-content {
        display: block;
    }

    .news-list {
        width: 100%;
    }

    .news-item {
        width: 100%;
        margin-bottom: 1rem;
    }

    .news-item a {
        display: block;
        width: 100%;
    }

    .news-item time {
        display: block;
        width: auto;
        margin-bottom: .3rem;
        font-size: 12px;
    }

    .news-item p {
        font-size: 13px;
        line-height: 1.6;
    }

    .news-filters {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .news-filter {
        padding: .35rem .6rem;
        font-size: 11px;
    }

    .content-title-news {
        padding-bottom: .4rem;
        margin-bottom: .4rem;
    }

    .content-title-news h1 {
        font-size: 28px;
    }

    .content-title-news .btn-next a {
        width: 2.25rem;
        height: 2.25rem;
    }

    .content-title-news .btn-next p {
        font-size: 12px;
    }

    .news-select {
        max-height: 80px;
        padding: 1rem;
        margin-bottom: .75rem;
    }

    .news-select.open {
        max-height: 400px;
    }

    .news-select::after {
        height: 1rem;
        border-radius: 1rem;
    }

    .news-select-head h2 {
        font-size: 20px;
    }

    button.down-btn {
        width: 40px;
        height: 40px;
        margin-left: 1rem;
    }

    .news-filters {
        margin: .75rem 0 0;
        padding: 0 .5rem;
    }

    .news-archive-list {
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .news-archive-item a {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 1rem;
        padding: .75rem;
        border-width: 3px;
        border-radius: .75rem;
        align-items: center;
    }

    .news-archive-thumb {
        width: 120px;
        aspect-ratio: 4 / 3;
    }

    .news-archive-body {
        width: 100%;
    }

    .news-archive-meta {
        gap: .5rem;
        margin-bottom: .5rem;
    }

    .news-detail-text img {
        width: 100%;
        margin: 1.5rem auto 0;
    }

    .news-badge {
        display: inline-block;
        padding: .15rem .5rem;
        border-radius: 999px;
        background-color: #D93838;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .08em;
    }

    .news-badge {
        display: inline-block;
        padding: .15rem .5rem;
        border-radius: 999px;
        background-color: #D93838;
        color: #fff;
        font-size: 8px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .08em;
    }
  
    span.news-archive-category-mini {
        font-size: 8px;
    }

    time {
        font-size: 14px;
    }

    /* =========================
       製品一覧
       ========================= */
    .product-list {
        grid-template-columns: 1fr;
    }

    .product-item {
        margin: .5rem 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;

    }
    .products-content-card p,
    .product-description h2 {
        font-size: 18px;
    }

    .products-content-card {
        width: 100%;
        height: 180px;
    }
    .card:hover {
        transform: none;
    }

    .card:hover .card-text {
        transform: none;
    }

    .card:hover img {
        transform: none;
    }

    .card:hover::before {
        opacity: 0;
    }

    .card:hover .card-hover-text {
        opacity: 0;
    }

    /* =========================
       製品詳細
       ========================= */
    .product-detail-display h3,
    .product-detail-text h3 {
        width: 70%;
        margin-top: 4rem;
        padding: .75rem;
        font-size: 24px;
    }

    .product-detail-text,
    .product-detail-display {
        width: 94%;
    }

    .product-detail-text-ol li img{
        width: 100px;
    }

    .selforder-features-ul {
        grid-template-columns: 1fr;
    }

    .rendou-detail {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

    .rendou-detail img {
        width: 35%;
        height: auto;
    }

    .rendou-detail p {
        margin: 0;
        flex: 1;
        line-height: 1.25rem;
    }

    .product-detail-display-wrap {
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
    }

    .product-detail-display-tab {
        width: 100%;
        margin-right: 0;
    }

    .display-btn,
    .display-btn.active {
        width: 100%;
        margin-left: 0;
        padding: 1rem;
        font-size: 18px;
    }

    .product-detail-display-img {
        width: 100%;
        margin-top: 1rem;
    }

    .product-detail-display-img-ticket,
    .product-detail-display-img-navi {
        width: 100%;
    }

    .display-btn,
    .display-btn.active {
        padding: .75rem;
        font-size: 13px;
    }

    .display-btn::before {
        display: none;
    }


    /* =========================
       導入事例
       ========================= */

    .case-list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 1.5rem 0;
    }

    .case-btn {
        width: 80%;
        font-size: 13px;
    }

    .case-detail-content {
        display: flex;
        flex-direction: column;
    }

    .case-detail-text {
        width: 100%;
        padding-right: 0;
    }

    .case-detail-content h2 {
        font-size: 22px;
    }

    .case-detail-content p {
        line-height: 1.8;
    }

    .case-detail-content img {
        width: 240px;
        height: 160px;
        object-fit: cover;
        margin-top: 1rem;
        margin: 0 auto;
    }

    /* =========================
       雑誌掲載
       ========================= */
    .magazine-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
        margin: 1.5rem 0;
    }

    .magazine-card img {
        width: 160px;
        height: auto;
        display: block;
        margin: 0 auto 1rem;
    }

    .magazine-link {
        margin-left: 0;
        font-size: 13px;
    }

    .magazine-close {
        font-size: 2rem;
    }

    .magazine-viewer {
        display: block;
        text-align: center;
    }

    .magazine-viewer img{
        margin: 0 auto;
    }

    /* =========================
       会社情報
       ========================= */

    .company-table {
        font-size: 12px;
    }

    .company-table th,
    .company-table td {
        display: block;
        width: 100%;
        padding: 1rem 0;
    }

    .company-table th {
        font-size: 18px;
        padding-bottom: .5rem;
    }

    .company-table td {
        padding-top: .5rem;
    }


    /* =========================
       サポート
       ========================= */
    .support-content {
        margin: 2rem 0;
    }

    .support-section {
        margin-bottom: 3rem;
    }

    .support-section-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0 .5rem;
        margin-top: 1.5rem;
    }

    .oldnews-item h2,
    .support-section h2 {
        font-size: 22px;
        padding: .75rem 1.25rem;
    }

    .support-section h3 {
        font-size: 20px;
        margin-bottom: .5rem;
    }

    .support-section p {
        margin-bottom: 1.5rem;
        line-height: 1.8;
    }

    .support-section-text ol {
        padding-left: 0;
    }

    .support-section-text li {
        margin-bottom: .5rem;
    }

    .support-section-item img {
        width: 70%;
        height: auto;
        margin-top: 1rem;
        margin: 0 auto;
    }

    /* =========================
       プライバシーポリシー
       ========================= */
    .privacy-content p {
        font-size: 14px;
        width: 100%;
    }

    .privacy-content li p {
        font-size: 14px;
    }

    .privacy-content li strong {
        font-size: 16px;
    }

    .privacy-link a {
        font-size: 10px;
    }

    .privacy-link-flex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        column-gap: 0;
    }

    .privacy-link-flex p {
        width: 80%;
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        margin: 0;
        padding: 0;
    }

    .privacy-link-flex a {
        width: 80%;
        grid-column: 2;
        display: block;
        margin: 0 auto;
    }


    /* =========================
       お問い合わせフォーム
       ========================= */
    .info-table-wrap {
        width: 94%;
    }

    .info-table th,
    .info-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 1rem;
    }

    .info-table th {
        text-align: left;
        padding-bottom: .5rem;
    }

    .info-table td {
        padding-top: .5rem;
        overflow-wrap: anywhere;
    }

    .info-table input[type="text"],
    .info-table select,
    .info-table textarea {
        max-width: 100%;
        font-size: 12px;
    }

    .info-table input[type="text"] {
        width: 100%;
    }

    .info-table td input[name="item8"],
    .info-table td input[name="item9"],
    .info-table td input[name="item13"],
    .info-table td input[name="item14"],
    .info-table td input[name="item15"],
    .info-table td input[name="item16"],
    .info-table td input[name="item17"],
    .info-table td input[name="item18"] {
        width: auto;
        max-width: 100%;
    }

    .info-table td input[name="item8"] {
        width: 65px;
    }

    .info-table td input[name="item9"] {
        width: 85px;
    }

    .info-table td input[name^="item1"]:is(
        [name="item13"],
        [name="item14"],
        [name="item15"],
        [name="item16"],
        [name="item17"],
        [name="item18"]
    ) {
        width: 20%;
    }

    .info-table td input:is(
        [name="ritem8"],
        [name="ritem9"],
        [name="ritem10"]
    ) {
        width: 20%;
    }

    .info-table td label {
        display: inline-block;
        margin-bottom: .25rem;
    }

    .info-table {
        border: 1.25px solid #162D56;
    }

    .info-table th,
    .info-table td {
        border: .5px solid #162D56;
    }

    .info-table-wrap .doui {
        text-align: center;
    }

    .info-table-wrap .doui label {
        font-size: 12px;
    }

    .ac {
        display: block;
        width: 94%;
        text-align: center;
    }

    .ac img,
    .ac input[type="image"] {
        max-width: 75px;
        height: auto;
        margin: .5rem;
    }

    .ac a {
        font-size: 10px;
    }

    .thunder-bg {
        width: 94%;
        margin: 2rem auto 18rem;
    }

    /* =========================
       ページトップ・お問い合わせ
       ========================= */

    .contact-btn {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 12px;
    }

    .information-btn .page-top {
        width: 40px;
        height: 40px;
    }


    /* =========================
       管理ページ
       ========================= */

    .edit {
        width: 94%;
        margin-top: 1.5rem;
    }

    .edit-header-flex {
        display: block;
    }

    .content-edit,
    .content-new {
        padding: .75rem;
    }

    .edit-item {
        padding: .4rem;
        font-size: 13px;
    }

    textarea[name="excerpt"] {
        width: 100%;
        box-sizing: border-box;
    }


    /* =========================
       ページネーション
       ========================= */

    .news-page-button,
    .magazine-page-button {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
}