@charset "UTF-8";

/* CSS Document */

@media screen and (max-width: 1000px) {
    .header .header_content .navgation ul li {
        padding: 0px;
    }
}

@media screen and (max-width: 768px) {
  .voice-box {
    max-height: 380px;
    overflow: auto;
  }
  .voice-box-inner img {
    max-height: 120px;
    object-fit: contain;
  }

    .header .menu_btn {
        display: block;
    }
    .header .navgation {
        display: none;
    }

  /* VOICE セクション専用の文字サイズと行間 */
  .voice .voice-box p {
    font-size: 3.6vw;   /* 例: 4vw → 3.6vw（-10%） */
    line-height: 6vw;   /* 例: 7vw → 6vw（-14%） */
  }

  /* タイトルのサイズも少しだけ小さく */
  .voice .voice-title h5 { font-size: 4.6vw; } /* 5vw → 4.6vw */
  .voice .voice-title h6 { font-size: 3.8vw; } /* 4vw → 3.8vw */

  /* カードの上下余白をやや圧縮（高さ350pxに収めやすく） */
  .voice .voice-box { padding: 20px 20px; } /* 30px → 20px */

  /* SPで表示される画像の背を低くしてテキスト面積を確保 */
  .voice .voice-box > img.sp {
    max-height: 90px;        /* 例: 画像の上限を設ける */
    object-fit: contain;
  }


}

@media screen and (max-width: 768px) {
    .pc {
        display: none!important;
    }
    .sp {
        display: block!important;
    }
    p {
        font-size: 4vw;
        line-height: 7vw!important;
    }
    h3 {
        font-size: 5.5vw;
    }
    h4,
    h5 {
        letter-spacing: 0.2vw;
    }
    h6 {
        font-size: 4.5vw;
        font-weight: normal;
    }
    /* header */
    .header .header_content {
        display: flex;
        padding: 3% 4%;
        justify-content: space-between;
    }
    .overlay-content ul li a {
        color: white;
        font-size: 4vw;
    }
    .logo a img {
        width: 35vw;
    }
    .logo p {
        font-size: 3vw;
        line-height: 3vw!important;
    }
    .header_entry {
        font-size: 3vw;
    }
    .menu_btn .container {
        padding: 0 0 0 20%;
    }
    .overlay {
        width: 100%!important;
    }
    .hamburger-header {
        padding: 0 3% 0 0;
    }
    .hamburger {
        padding: 2% 0 5% 7%;
    }
    .hamburger a {
        align-items: flex-end;
    }
    .hamburger a p {
        font-size: 3vw;
        line-height: 3vw!important;
    }
    .hamburger_entry a {
        font-size: 3vw;
    }
    .overlay-content ul.main-menu li {
        padding: 5% 3%;
    }
    .overlay-content ul.main-menu li a {
        font-size: 3.5vw!important;
    }
    .sub-menu li a {
        font-size: 3vw!important;
    }
    .overlay-content ul.main-menu {
        margin: 5% 7% 5% 7%;
    }
    .overlay-content p {
        font-size: 2vw;
    }
    /* top banner section */
    .top-banner {
        position: relative;
        background: url(/img/usr/freepage/lp/standit-w_special/fv_img_sp.webp) no-repeat;
        background-size: cover;
		margin-top: 30px;
        background-position: top;
        height: auto;
    }
    .top-txt {
        padding: 27% 0 27% 5%;
    }
    .top-txt h1 {
        font-size: 4vw;
        margin-bottom: 3%;
    }
    .top-bottom h1 {
        font-size: 4vw;
        padding: 20% 0 0 65%;
    }
    .top-bottom img {
        width: 94%;
        padding: 1% 3% 9%;
    }
    .scroll {
        position: absolute;
        left: -20px;
        top: 95%;
    }
    .scrollGuide i {
        height: 24vw;
    }
    @keyframes scrollGuide-animation {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(0, 550%, 0);
        }
    }
    /* concept section */
    .concept {
        padding: 15% 5% 15% 10%;
        display: block;
    }
    .concept-txt {
        width: 100%;
    }
    h3.sec-title {
        font-size: 10vw;
    }
    h6.sec-subtitle {
        font-size: 3.5vw;
    }
    .concept-txt h4 {
        position: relative;
        top: 0;
        font-size: 6vw;
        padding-top: 10%;
    }
    .concept-txt h5 {
        font-size: 4vw;
        padding-top: 2%;
        padding-bottom: 8%;
    }
    .concept-img {
        width: 100%;
        margin: 0;
        padding: 5% 0 0;
    }
    /* products section */
    .products {
        padding: 10% 5%;
    }
    .product-box {
        display: block;
        padding-bottom: 15%;
        padding-top: 5%;
    }
    .product-box-img,
    .product-inner {
        width: 100%;
    }
    .product-inner {
        padding-top: 5%;
    }
    .product-title img {
        width: 14%;
        padding-right: 5%;
    }
    .product-title h5 {
        font-size: 4.5vw;
    }
    .product-title h5 span {
        font-size: 6vw;
    }
    .product-inner button {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-inner button a {
        font-size: 4vw;
        padding: 2% 0;
        width: 75vw;
    }
    /* lineup section */
    .lineup {
        padding: 15% 5%;
    }
    .lineup-title {
        display: block;
    }
    .lineup-caption {
        width: 100%;
    }
    .lineup-txt {
        padding: 10% 0 5%;
    }
    .lineup-txt h5 {
        padding-top: 10%;
        font-size: 5vw;
    }
    .lineup-content {
        display: block;
        margin: 5% 0;
        padding: 5%;
    }
    .lineup-content img {
        width: 80%;
        margin: 0 auto;
        display: flex;
    }
    .lineup-select {
        width: 100%;
    }
    .lineup-select select {
        padding: 5% 10%;
        font-size: 4vw;
        margin-bottom: 5%;
    }
    select {
        background: url(/img/usr/freepage/lp/standit-w_special/arr.webp) no-repeat right 8vw center;
        background-size: 2.5vw;
    }
    .lineup-select h6 {
        font-size: 4.5vw;
        padding: 5% 0 0;
    }
    .lineup-select h6.product-price {
        padding: 3% 0 5%;
    }
    .lineup-inner button {
        width: 100%;
        justify-content: center;
    }
    .lineup-inner button a {
        font-size: 4vw;
        padding: 5% 40%;
        width: 100vw;
    }
    /* case section */
    .case {
        padding: 10% 5%;
    }
    .case-box {
        margin: 10% 0 20%;
        padding: 0 5% 10%;
    }
    .case-inner {
        display: block;
    }
    .case-inner img {
        width: 110%;
        margin: -10% 0 0 -12%;
    }
    .case-txt {
        padding: 5% 0;
    }
    .case-txt h4 {
        font-size: 7vw;
    }
    .case-txt h6 {
        font-size: 3.5vw;
        padding: 2% 4%;
        width: fit-content;
        margin: 2% 0 10%;
    }
    .case-txt h5 {
        font-size: 5vw;
        line-height: 1.5;
    }
    .case button {
        align-items: center;
        justify-content: center;
        margin: -10% auto;
    }
    .case button a {
        font-size: 4vw;
        padding: 3% 0;
        width: 70vw;
    }
    /* middle section */
    .middle h5 {
        font-size: 3.5vw;
        padding: 3px 3%;
    }
    .middle-txt-first {
        top: 10%;
        left: 10%;
    }
    .middle-txt-second {
        top: 18%;
        left: 10%;
    }
    .middle-txt-third {
        top: 26%;
        left: 10%;
    }
    /* design section */
    .design {
        padding: 0 5% 10%;
    }
    .design-title {
        display: block;
    }
    .design-title-left {
        width: 100%;
        padding: 0;
    }
    .design-func {
        display: block;
        padding-top: 5%;
    }
    .design-func>img {
        width: 100%;
        padding-right: 0;
        padding-bottom: 10%;
    }
    .design-func-inner {
        width: 100%;
        padding-top: 10%;
    }
    .design-func-title {
        width: 105%;
        font-size: 6vw;
    }
    .design-func-imgs {
        padding: 5% 0;
    }
    /* intro section */
    .intro {
        padding-bottom: 10%;
    }
    .intro-title {
        width: 95%;
        padding: 0% 0 8%;
        font-size: 6vw;
    }
    .intro-imgs {
        display: block;
        padding: 0 5%;
    }
    .intro-imgs img {
        width: 100%;
        padding-bottom: 2%;
    }
    .intro-txt {
        padding: 5%;
    }
    .intro-content {
        padding: 10% 5% 0;
        margin: 10% 5%;
    }
    .intro-content h4 {
        font-size: 5.5vw;
    }
    .intro-diagram {
        display: block;
        padding: 0;
    }
    .intro-diagram h6 {
        width: 100%;
        border-radius: 4vw;
        height: auto;
        font-size: 5vw;
        font-weight: bold;
        padding: 5% 0px;
        margin: 5% 0;
    }
    .intro-content-imgs {
        padding-top: 5%;
        margin: 0 -6.3%;
    }
    /* model section */
    .model {
        padding: 5% 0 10%;
    }
    .model-title {
        font-size: 6vw;
        width: 86%;
        margin-left: 5%;
        padding: 3% 5% 5%;
        margin-right: 9%;
        background-size: auto 88%;
        background-image: linear-gradient(0deg, #C4E8E8 25%, transparent 0);
    }
    .model p.model-txt {
        padding: 5%;
    }
    .model-tables {
        display: block;
        padding: 5%;
    }
    .tb-black,
    .tb-white {
        width: 100%;
    }
    .tb-black h6,
    .tb-white h6 {
        font-size: 4.5vw;
        padding: 3% 0;
        font-weight: bold;
    }
    .tb-black-box,
    .tb-white-box {
        width: calc(35% - 1.5vw);
        padding-bottom: 5%;
    }
    .tb-black-box p,
    .tb-white-box p {
        font-size: 3.5vw;
    }
    .tb-white-boxes {
        max-width: 100%;
    }
    .model-imgs img {
        width: 49%;
    }
    .model-ref {
        display: block;
        padding: 0 5% 10%;
    }
    .model-ref-inner {
        width: 100%;
        padding-right: 0;
    }
    .model-ref-inner h5 {
        font-size: 5vw;
        padding-bottom: 5%;
    }
    .model-ref img {
        width: 80%;
        margin: 0 auto;
        display: flex;
    }
    /* function section */
    .function {
        padding-bottom: 10%;
    }
    .function-title {
        font-size: 6vw;
        width: 90%;
        padding-left: 5%;
        padding-bottom: 9%;
    }
    .function-boxes {
        padding: 0 5%;
    }
    .function-box {
        display: block;
        padding-bottom: 10%;
    }
    .function-box img {
        width: 100%;
        padding: 0 0 5%;
    }
    .function-box-txt {
        width: 100%;
    }
    .function-box-txt h5 {
        font-size: 5vw;
        padding-bottom: 5%;
    }
    /* assem section */
    .assem {
        padding: 15% 5%;
    }
    .assem h4 {
        font-size: 5vw;
        padding: 1% 5%;
        margin-bottom: 2%;
    }
    .assem-imgs {
        display: block;
        padding: 5% 0;
    }
    .assem-imgs img {
        width: 100%;
        padding-bottom: 2%;
    }
    .assem-txt h5 {
        font-size: 5vw;
    }
    .assem-txt h5 span {
        font-size: 7vw;
    }
    .assem-intro {
        padding: 10% 5%;
        margin: 10% 0;
    }
    .assem-intro-inner {
        display: block;
    }
    .assem-intro-txt h6 {
        font-size: 4vw;
        font-weight: bold;
        text-align: center;
        padding: 1%;
    }
    .assem-intro-txt h5 {
        font-size: 4vw;
        padding: 5% 0;
    }
    .assem-intro-txt h4 {
        font-size: 6vw;
        padding: 0 0 10% 0;
        margin: 0;
    }
    .assem-intro img {
        padding-top: 5%;
    }
    /* voice section */
    .voice {
        padding: 15% 0;
    }
    .voice-caption {
        padding: 0 5% 10%;
    }
    .voice .scrollGuide i {
        width: 24vw;
    }
    .voice .scroll {
        left: 50%;
        top: 15%;
    }
    @keyframes voicescrollGuide-animation {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(550%, 0, 0);
        }
    }
    .voice-title {
        width: 100%;
        padding-right: 0;
    }
    .voice-title h6 {
        font-size: 4vw;
        width: 45%;
        text-align: center;
        margin-left: -30px;
    }


    .voice-title h5 {
        font-size: 5vw;
    }
    .voice-box {
        padding: 30px 30px;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .voice-box img {
        padding-top: 5%;
    }
    /* faq section */
    .faq {
        padding: 15% 5%;
    }
    .faq h4 {
        font-size: 7vw;
    }
    .question {
        padding: 3% 0;
    }
    .question h2 {
        font-size: 7vw;
        padding-right: 5%;
    }
    .question p,
    .answer p {
        font-size: 3.5vw;
        width: 85%;
    }
    .question::after {
        right: 2%;
    }
    .faq button {
        justify-content: center;
        margin: 10% auto 5%;
    }
    .faq button a {
        font-size: 3.5vw;
        width: 70vw;
        padding: 3%;
    }
    .answer {
        padding: 5% 0;
    }
    .answer h2 {
        font-size: 7vw;
        padding-right: 5%;
        padding-top: 2%;
    }
    .answer p a {
        font-size: 3.5vw;
    }
    /* icon selection */
    .cart-icon {
        right: 5%;
    }
    .cart-icon img {
        width: 25vw;
    }
    /* footer section */
    .footer {
        padding: 20% 0;
    }
    .footer img {
        width: 60%;
    }
    .copyright {
        font-size: 2.5vw;
        padding: 1% 0;
    }
  
  
/* 20250514追加 */
#cpspbnr {  
    display: block !important;
    position: absolute !important;
    top: 93.4% !important;
    left: 1% !important;
    right: 0 !important;
    width: 100% !important;
    height: auto;
    }
  
  #cpspbnr a:hover {
    opacity: 0.6;
  }

.cpspbnr-image {
    width: 100%;
    max-width: 460px;
    height: auto;
}
  
}

@media screen and (min-width: 768px) and (max-width: 1440px) {}