@charset "utf-8";
@media (max-width: 1200px) {

    /* ======================================== */
    /* レイアウト */
    /* ======================================== */
    .header-menu-pc {
        display: none;
    }

    .header-menu-sp {
        display: block;
    }

    /* ======================================== */
    /* header */
    /* ======================================== */
    .header-menu-sp {
        display: flex;
        position: fixed;
        z-index: 20;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        background: #000;
        height: 50px;
    }

    .header-logo {
        position: relative;
        z-index: 10;
        color: #fff;
        display: grid;
        align-items: center;
    }

    .header-logo a {
        padding-left: 8px;
        gap: 5px;
    }

    .header-logo img {
        width: 38px;
        height: 38px;
    }

    .company-text .name {
        font-size: clamp(16px, 1.56vw, 30px);
    }

    .sp-nav-area {
        display: flex;
    }

    .bar-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 8px;
        font-size: var(--font-s12);
        color: #fff;
    }

    .bar-btn img {
        width: clamp(25px, 1.8vw, 35px);
        height: clamp(25px, 1.8vw, 35px);
    }

    /* morph-styles */
    .hamburger-morph {
        position: relative;
        z-index: 10;
        width: 50px;
        height: 50px;
        padding: 8px;
        border: none;
        cursor: pointer;
    }

    .hamburger-morph__icon {
        width: 100%;
        height: 100%;
    }

    .hamburger-morph__line {
        fill: none;
        stroke: #fff;
        stroke-width: 6;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
            stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hamburger-morph__line:nth-child(1) {
        stroke-dasharray: 60 207;
    }

    .hamburger-morph__line:nth-child(2) {
        stroke-dasharray: 60 60;
    }

    .hamburger-morph__line:nth-child(3) {
        stroke-dasharray: 60 207;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(1) {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(2) {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(3) {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
    }

    .nav-morph {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000000d8;
        color: #fff;
        clip-path: circle(0% at calc(100% - 44px) 44px);
        transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 5;
        padding-top: 66px;
        /* ヘッダー高さ(50px) + 余白(16px) */
        padding-bottom: 24px;
    }

    .nav-morph.active {
        clip-path: circle(150% at calc(100% - 44px) 44px);
    }

    .nav-morph__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* スクロール用に上寄せ */
        max-height: calc(100dvh - 66px - 24px);
        /* 画面高いっぱい */
        overflow-y: auto;
        /* 溢れたらスクロール */
        -webkit-overflow-scrolling: touch;
        /* iOS慣性スクロール */
        overscroll-behavior: contain;
        /* バウンスで背面を動かさない */
        gap: 20px;
    }

    .nav-morph__wrapper .bottom {
        font-size: var(--font-s14);
        margin-bottom: 20px;
        padding: 0 10px;
        text-align: center;
    }

    .nav-morph__list {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    .nav-morph__item {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .nav-morph.active .nav-morph__item {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-morph.active .nav-morph__item:nth-child(1) {
        transition-delay: 0.3s;
    }

    .nav-morph.active .nav-morph__item:nth-child(2) {
        transition-delay: 0.4s;
    }

    .nav-morph.active .nav-morph__item:nth-child(3) {
        transition-delay: 0.5s;
    }

    .nav-morph.active .nav-morph__item:nth-child(4) {
        transition-delay: 0.6s;
    }

    .nav-morph.active .nav-morph__item:nth-child(5) {
        transition-delay: 0.7s;
    }

    .nav-morph.active .nav-morph__item:nth-child(6) {
        transition-delay: 0.8s;
    }

    .nav-morph__link {
        display: inline-block;
        padding: 16px;
        font-size: 14px;
        transition: .3s;
    }

    .nav-morph__link .en {
        display: block;
        font-size: var(--font-s12);
        font-family: var(--font-en);
    }

    .nav-morph__link:hover {
        opacity: var(--hover-opacity);
        transition: .3s;
    }

    .nav-morph__item.cta-btn {
        display: grid;
        gap: 10px;
        margin-top: 15px;
    }

    .nav-morph__item .cta-red,
    .nav-morph__item .cta-green {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 10px 20px;
    }

    .nav-morph__item.cta-btn img {
        display: grid;
        place-items: center;
        width: 35px;
        height: 35px;
    }

    /* ======================================== */
    /* トップページ */
    /* ======================================== */
    .mv-area .hours {
        top: 52px;
    }

    /* ======================================== */
    /* 買取品目一覧 */
    /* ======================================== */
    .cat-bar {
        position: sticky;
        top: 50px;
        z-index: 2;
    }
}

@media (max-width: 968px) {

    /* ======================================== */
    /* レイアウト */
    /* ======================================== */
    .pc-br {
        display: contents;
    }

    .sp-br {
        display: block;
    }

    /* ======================================== */
    /* 共通 */
    /* ======================================== */
    .sv-heading_01 {
        min-height: 200px;
    }

    .sv-heading_02 {
        min-height: 200px;
    }

    .sv-heading_03 {
        min-height: 200px;
    }

    /* ======================================== */
    /* footer */
    /* ======================================== */
    .footer-head {
        justify-content: center;
    }

    .footer-menu {
        justify-content: center;
    }

    /* ======================================== */
    /* トップページ */
    /* ======================================== */
    /* 買取品目一覧 */
    .top-purchased-item-section .purchased-list {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .top-purchased-item-section .purchased-list .name {
        padding: 5px;
    }

    .top-purchased-item-section .btn-area {
        max-width: 100%;
    }

    /* 事業内容 */
    .top-service-section {
        flex-direction: column;
    }

    .purchased-area {
        border-right: none;
        border-bottom: 1px solid #bbb;
    }

    /* 機械・設備の片付け、買取 */
    .mp-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mp-banner {
        margin: 0 5% 30px 0;
    }

    .cta-item {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    /* CTA-共通 */
    .cta-label {
        padding: 10px 15px;
    }
	
	/* お知らせ */
    .news-section .more-btn {
        width: 100%;
    }

    /* ======================================== */
    /* 買取品目一覧 */
    /* ======================================== */
    .cat-chips {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: inline proximity;
        scrollbar-width: thin;
    }

    .cat-chips::-webkit-scrollbar {
        height: 8px;
    }

    .cat-chips::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 99px;
    }

    .item-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* 買取ヤード-共通 */
    .yard-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "info"
            "image"
            "buttons";
    }

    /* ======================================== */
    /* 買取の流れ */
    /* ======================================== */
    .flow-head {
        padding: 22px 16px;
    }

    .flow-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .flow-label {
        padding: 10px 14px;
    }

    /* ======================================== */
    /* 解体工事事業 */
    /* ======================================== */
    .worries-contents {
        flex-direction: column;
    }

    .case-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ======================================== */
    /* 会社概要 */
    /* ======================================== */
    .about-inner {
        grid-template-columns: 1fr;
    }

    .about-text {
        order: 2;
    }

    .about-image {
        order: 1;
        aspect-ratio: 4/2;
    }

    .strength-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .list_outline {
        grid-template-columns: 1fr;
        border-top: 1px solid transparent;
    }

    .list_outline dt,
    .list_outline dd {
        border-bottom: 1px solid transparent;
        padding: 15px 2vw;
    }
	
	.list_outline dd {
		border-right: 1px solid transparent;
	}
	
	/* ======================================== */
    /* お知らせ(アーカイブ) */
    /* ======================================== */
    .area_post-list {
        grid-template-columns: 1fr;
    }

    .post-image {
        max-width: 100%;
    }

    .list_archive li {
        width: 90%;
    }

    .post-item_inner {
        grid-template-columns: 1fr;
    }

    /* ======================================== */
    /* お知らせ(記事) */
    /* ======================================== */
    .article-box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    /* ======================================== */
    /* 会社概要 */
    /* ======================================== */
    .strength-cards {
        grid-template-columns: 1fr;
    }

    .result-cards {
        grid-template-columns: 1fr;
    }

    .history-list {
        grid-template-columns: 1fr;
        padding-left: 32px;
        position: relative;
        row-gap: 0;
    }

    .history-list::before {
        left: 16px;
        top: 10px;
        bottom: 0;
        width: 1px;
    }

    .history-list dt {
        grid-column: 1;
        padding-right: 0;
    }

    .history-list dd {
        grid-column: 1;
        margin: 0 0 15px;
        line-height: 1.8;
    }

    .history-list dt::before {
        left: -20px;
        top: 10px;
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {

    /* ======================================== */
    /* 買取品目一覧 */
    /* ======================================== */
    /* スクラップの種類-共通 */
    .scrap-list {
        grid-template-columns: 1fr;
    }

    /* ======================================== */
    /* 解体工事事業 */
    /* ======================================== */
    .case-head {
        flex-wrap: wrap;
        gap: 8px;
    }

}