/* ▼ スマホ縦画面向け補正（max-width: 480px） */
@media screen and (max-width: 480px) {
    html {
        overflow-x: hidden;
    }
    
    body {
        min-height: 100%; /* ← height: 100% を避ける */
    }

    #logo {
        text-align: center;
    }

    #logo img {
        width: 140px;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border: none !important;
    }

    .wrapper, #container {
        max-width: 100vw;
        overflow-x: hidden;
        padding: 0.5rem;
    }
}

/* ▼ スマホ縦専用調整（480px以下） */
@media screen and (max-width: 480px) {
    #contents {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin: 0 auto 1.5rem;
        max-width: 100vw;
        box-sizing: border-box;
    }
}

/* ▼ スマホフッターなど省略された残り全CSSを復元 */
@media screen and (max-width: 480px) {
    #footermenu {
        flex-direction: column;
    }
    #footermenu ul {
        flex: unset;
    }
    #footermenu ul li.SSLseal {
        text-align: center;
        display: block;
    }
}
@media screen and (max-width: 480px) {
    .SSLseal-pc {
        display: none;
    }
    .SSLseal-mobile {
        display: block;
    }
}
@media screen and (max-width: 480px) {
    .scroll-table {
        overflow-x: auto;
        display: block;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .price-table .row {
        display: flex;
        min-width: 600px;
    }
}
@media screen and (max-width: 480px) {
    .banner-section3 {
        display: flex;
        flex-direction: row;
    }

    .banner3 {
        width: 100%;
        flex-direction: row !important;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .banner3 img {
        width: 37%;
        max-width: none;
        object-fit: cover;
        display: block;
        border-radius: 2px 0 0 2px;
    }

    .banner3 h3 {
        margin: 5px auto;
    }

    .banner3-text {
        width: 60%;
        font-size: x-small;
        line-height: 1.3em;
        padding: 3px 5px 3px 0;
        border-radius: 3px 0 0 3px;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
        height: calc(1.3em * 4);
    }
}
@media (max-width: 480px) {
    .contentRow {
        flex-direction: column;
        align-items: center;
    }

    .thumbNailWrap {
        flex: none;
        width: 80px;
        height: 80px;
        margin: 0 auto 10px;
    }

    .textContent {
        width: 100%;
        text-align: left;
    }
}
@media (max-width: 481px) {
    .image-text-section {
        flex-direction: column;
    }
    .image-box, .text-box {
        max-width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .footer-links {
        display: block !important;
        text-align: center;
    }
    .footer-links ul {
        width: 95% !important;
        margin-bottom: 30px;
    }
    .footer-links ul li.title {
        font-size: 1.32em;
        font-weight: 600;
        letter-spacing: 0.1em;
        padding-top: 15px;
    }
    .footer-links ul li {
        font-size: 1.32em;
        font-weight: normal;
    }
    .footer-links ul a {
        display: inline-block;
        text-align: right;
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .business-hours th,
    .business-hours td,
    .business-hours tr {
        width: 100%;
        display: block;
        border-collapse: collapse;
    }

    .business-hours tr {
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 768px) {
    .banner {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .banner-section2 {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .banner2 {
        width: 48%;
    }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
    .stone-data {
        display: table;
        overflow-x: visible;
        white-space: normal;
    }
    .stone-data table {
        width: 100%;
    }
    .stone-data th, .stone-data td {
        font-size: 14px;
        padding: 6px;
    }
}
@media (max-width: 768px) {
    table.BDI th,
    table.BDI td {
        text-align: center;
    }
}
@media (max-width: 769px) {
    .image-text-section {
        flex-direction: column;
    }
    .image-box, .text-box {
        max-width: 100%;
    }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .banner-section3 {
        display: flex;
        flex-direction: row;
    }

    .banner3 {
        width: 100%;
        flex-direction: row !important;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .banner3 img {
        width: 37%;
        max-width: none;
        object-fit: cover;
        display: block;
        border-radius: 2px 0 0 2px;
    }

    .banner3 h3 {
        margin: 5px auto;
    }

    .banner3-text {
        width: 60%;
        font-size: medium;
        line-height: 1.3em;
        padding-right: 3px;
        border-radius: 3px 0 0 3px;
        display: -webkit-box !important;
        -webkit-line-clamp: 5 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
        height: calc(1.3em * 5);
    }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .image-text-section {
        flex-direction: column;
    }
    .image-box, .text-box {
        max-width: 100%;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .textContent {
        font-size: medium;
    }
}
@media screen and (min-width:600px) {
    .list-free {
        flex-direction: row;
    }
    .list-free h3 {
        writing-mode: vertical-rl;
        text-orientation: upright;
        padding: 1rem 0.5rem;
    }
    .list-free .w1 {width: 30%;}
    .list-free .w2 {width: 50%;}
    .list-free .order1 {order: 1;}
    .list-free .order2 {order: 2;}
    .list-free .order3 {order: 3;}
    .list-free .mt1 {margin-top: 10vw;}
    .list-free .mt2 {margin-top: 20vw;}
}
@media screen and (min-width:700px) {
    .new {
        display: grid;
        grid-template-columns: auto 1fr;
    }
    .new dt {
        border-bottom: 1px solid #ccc;
    }
    .new dd {
        padding: 1rem;
    }
}
@media screen and (min-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}
@media screen and (min-width: 768px) and (orientation: landscape) {
    .stone-features {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width:800px) {
    .list-grid1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3vw;
    }
    .list-grid1 .list {
        margin-bottom: 0;
    }
}
@media screen and (min-width:900px) {
    html, body {
        font-size: 16px;
    }
}
@media screen and (min-width:900px) {
    body:not(.en).home header {
        display: flex;
        justify-content: space-between;
        text-align: left;
    }
    #logo img {
        width: 300px;
    }
    body:not(.en).home #logo {
        align-self: flex-end;
    }
    body:not(.en) header .message {
        margin: 0;
        font-size: 1.5vw;
        align-self: center;
        writing-mode: vertical-rl;
        text-orientation: upright;
    }
    body:not(.en) #mainimg {
        width: 30vw;
        height: 60vw;
        box-shadow: 5vw -5vw 10px rgba(0,0,0,0.1);
        background: url('/images/mainimg1_tate.jpg') no-repeat center center / cover;
    }
}
@media screen and (min-width:900px) {
    .ta1 th {
        width: 20%;
    }
}
@media screen and (min-width: 900px) {
    .ws {
        width: 48%;
        display: inline-block;
    }
    .sh {
        display: none;
    }
    .pc {
        display: block;
    }
}
@media screen and (min-width:900px) {
    .ws {width: 48%; display: inline;}
    .sh {display: none;}
    .pc {display: block;}
}
/* ========== フッター指定 ========== */
@media screen and (max-width: 768px) {
  #footer-contents {
    display: block;
    padding: 1.5rem 1rem;
  }
  #footer-contents .left,
  #footer-contents .right {
    padding: 1rem;
    margin: 0 0 1.5rem 0;
    text-align: center;
    box-sizing: border-box;
  }
  #footer-contents .right {
    text-align: center;
    margin-right: 0;
  }
}