@charset "UTF-8";
@media screen and (max-width: 1024px) {

    /*works*/
    .webgene-pagination :is(.prev, .next),
    .webgene-pagination .ul .number.selected,
    .webgene-pagination ul .number {
        width: 2em;
        height: 2em;
        margin: 0;
    }
    .webgene-pagination ul {
        width: 100%;
        justify-content: space-between;
    }
    .webgene-pagination .prev {
        margin: 0;
    }
    .webgene-pagination .next {
        margin: 0;
    }





    /*contact*/
    .privacyformError {
        margin-top: -36.5px !important;
    }




    /*index*/
    .index .mainimg {
        height: 46rem;
    }
    .index .mainimg h2 {
        top: auto;
        bottom: 14rem;
        left: 5%;
        width: 90%;
        font-size: 2.4rem;
        line-height: 1.5;
        text-shadow: 0 0 0.5rem rgba(0, 0, 0, 1), 0 0 0.5rem rgba(0, 0, 0, 1), 0 0 0.5rem rgba(0, 0, 0, 1);
    }
    .index .mainimg p {
        top: auto;
        bottom: 4rem;
        left: 5%;
        width: 90%;
        font-size: 1.5rem;
        line-height: 1.7;
        text-shadow: 0 0 0.5rem rgba(0, 0, 0, 1), 0 0 0.5rem rgba(0, 0, 0, 1), 0 0 0.5rem rgba(0, 0, 0, 1);
    }
    .index .mainimg .badge {
        min-width: 12rem;
        top: 3rem;
        right: 5%;
    }
    /*スライダー画像の高さを揃える*/
    .index .mainimg .slider,
    .index .mainimg .slider .slick-list,
    .index .mainimg .slider .slick-track,
    .index .mainimg .slider .slick-slide {
        height: 100% !important;
    }
    .index .mainimg .slider .slick-slide img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .index_cnt1 .inner .col2 {
        width: 100%;
    }
    .index_cnt1 .inner .col2 a::before {
        top: calc(50% - 1.1rem);
    }
    .index_cnt1 .inner .col2 .right a::before {
        width: 3.2rem;
        min-width: 2.2rem;
        height: 3.2rem;
        background-size: 65%;
    }
.index_cnt1 .inner .col2 .left a::before {
        width: 3.2rem;
        min-width: 2.2rem;
        height: 3.2rem;
        background-size: 50%;
    }
    .index_cnt2 .inner .col2 :is(.left, .right) .banner.line p {
        font-size: initial;
    }
    .index_cnt2 .inner .col2 :is(.left, .right) .banner:not(.line) :is(.ride, .strong) {
        font-size: 2.2rem;
    }
    .index_cnt3 .inner>.col2 :is(.left, .right) h4 {
        font-size: 2.2rem;
    }
    .index_cnt4 .inner .grid {
        grid-template-columns: 1fr;
    }
    .index_cnt4 .inner .grid .dt {
        font-size: 2.2rem;
    }
    .index_cnt6 .inner .webgene-blog .webgene-item .dl {
        grid-template-columns: auto 1fr;
        gap: 0.5rem 1.5rem;
    }
    .index_cnt7 .inner .webgene-blog {
        grid-template-columns: repeat(2, 1fr);
    }




    /*reason*/
    [class^="reason_cnt"]:not(.reason_cnt7) .inner h4 {
        gap: 3rem;
        font-size: 2.2rem;
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner .strong {
        font-size: 2rem;
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner .grid {
        grid-template-columns: 1fr;
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner .grid2 {
        grid-template-columns: repeat(2, 1fr);
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner .flex {
        display: block;
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner .flex .dl {
        width: 100%;
        margin: 0 auto 3rem;
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner .flex .dl:not(:last-of-type) {
        margin: 0 0 2rem;
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner .grid .dt {
        font-size: 2rem;
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner h5 {
        width: 100%;
        text-align: center;
    }
    [class^="reason_cnt"]:not(.reason_cnt7) .inner .button {
        width: 100%;
    }



    /*service*/
    .service_cnt1 .inner>h4 {
        font-size: 2.2rem;
    }
    .service_cnt2 .inner .dl {
        display: block;
    }
    .service_cnt1 .inner .col2 :is(.left, .right) h5 {
        font-size: 2.2rem;
    }
    .service_cnt1 .inner .col2 :is(.left, .right) .dt {
        font-size: 2.2rem;
    }
    .service_cnt2 .inner .dt {
        font-size: 2.2rem;
        gap: 3rem;
        margin: 0 0 2rem;
    }
    .service_cnt2 .inner .pic {
        margin: 0 0 2rem;
    }
    .service_cnt3 .inner .col2 :is(.left, .right) .strong {
        font-size: 2.2rem;
    }
    .service_cnt5 .inner .col2 :is(.left, .right) h4 {
        font-size: 2.2rem;
    }


    /*price*/
    .price_cnt1 .inner .col2 .left h3 span {
        font-size: 3rem;
        display: block;
    }
    .price_cnt1 .inner .col2 .left .sub {
        font-size: 1.8rem;
    }
    .price_cnt3 .set {
        padding: 5rem 5%;
    }
    .price_cnt3 .set .col2 .left .dt {
        font-size: 2rem;
    }
    .price_cnt3 .set .col2 .right .time {
        font-size: 2rem;
    }
    .price_cnt3 .flex {
        flex-wrap: wrap;
    }
    .price_cnt3 .cancel .dl {
        display: block;
    }
    .price_cnt3 .cancel .dt,
    .price_cnt3 .cancel .dd {
        width: 100%;
    }




    /*area*/
    .area_cnt1 .inner .sub {
        font-size: 2.2rem;
    }
    .area_cnt1 .inner .time {
        font-size: initial;
    }
    .area_cnt1 .inner .ul {
        flex-wrap: wrap;
    }
    .area_cnt1 .inner .col2 {
        width: 100%;
    }
    .area_cnt1 .inner .col2 a::before {
        top: calc(50% - 1.1rem);
    }
    
  .area_cnt1 .inner .col2 .right a::before {
        width: 3.2rem;
        min-width: 2.2rem;
        height: 3.2rem;
        background-size: 65%;
    }
.area_cnt1 .inner .col2 .left a::before {
        width: 3.2rem;
        min-width: 2.2rem;
        height: 3.2rem;
        background-size: 50%;
    }
    .area_cnt3 .flow .inner .col2 .left h4 {
        font-size: 2.2rem;
    }
    .area_cnt3 .flow .inner .col2 .left .dt {
        font-size: 2rem;
    }
    .area_cnt3 .flow .inner .window p::after {
        display: none;
    }




    /*company*/
    .company_cnt1 {
        /*background: url(/system_panel/uploads/images/company_cnt1_bg.png) center;*/
        background-size: cover;
    }
    .company_cnt1 .inner>p {
        text-shadow: 0 0 0.5rem rgba(255, 255, 255, 1), 0 0 0.5rem rgba(255, 255, 255, 1);
    }
    .company_cnt1 .inner .ceo {
        text-shadow: 0 0 0.5rem rgba(255, 255, 255, 1), 0 0 0.5rem rgba(255, 255, 255, 1);
    }
    .company_cnt2 .inner .dl {
        padding-left: 0;
    }
    .company_cnt2 .inner .dt {
        padding-left: 3em;
        font-size: 2.2rem;
    }
    .company_cnt2 .inner .dt::before {
        left: 0;
    }
    .company_cnt2 .inner .dt::after {
        content: initial;
    }
    .company_cnt3 .inner .dl {
        display: block;
    }
    .company_cnt3 .inner .dt {
        border-bottom: initial;
    }
    .company_cnt3 .inner .dt,
    .company_cnt3 .inner .dd {
        width: 100%;
    }




    /*blog*/
    :is(.blog_cnt1, .blogdetail_cnt1) .inner {
        display: block;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner h3 {
        width: 100%;
        margin: 0 0 1.5rem;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {
        display: block;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item:not(:last-of-type) {
        margin: 0 0 1rem;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item .buttonA {
        width: 100%;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .dt {
        font-size: 2rem;
    }
    .blogdetail_cnt2 .inner .webgene-blog .webgene-item .dt {
        font-size: 2.2rem;
    }





    /*contact*/
    .contact_cnt1 .inner .col2 {
        width: 100%;
    }
    .contact_cnt1 .inner .col2 a::before {
        top: calc(50% - 1.1rem);
    }
    
  .contact_cnt1 .inner .col2 .right a::before {
        width: 3.2rem;
        min-width: 2.2rem;
        height: 3.2rem;
        background-size: 65%;
    }
.contact_cnt1 .inner .col2 .left a::before {
        width: 3.2rem;
        min-width: 2.2rem;
        height: 3.2rem;
        background-size: 50%;
    }
    form .dl {
        display: block;
    }
    form .dl .dt,
    form .dl .dd {
        width: 100%;
    }
    form .col label {
        font-size: 1.4rem;
    }
}


/*--------------*/
/* SP用の複製：SP時だけ画面下に固定表示 */
.fixedInfoSp {
  display: none;
}
.ceo-photo-sp {
  display: none;
}
@media screen and (max-width: 768px) {
      .fixedInfoSp {
        display: grid;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        padding: 10px 0;
        background: linear-gradient(135deg, #1B4935 0%, #0F3829 50%, #082018 100%);
        margin: 0;
        text-align: center;
        gap: 1rem;
    }
      .fixedInfoSp p {
        margin: 0;
        color: #ffffff;
        font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    }
      .fixedInfoSp a {
        display: block;
        font-weight: bold;
        font-size: 2.5rem;
        color: #ffffff;
    }
  body {
    padding-bottom: 70px;
  }

 .nav.globalMenuSp .info {
    display: none;
  }
  .index_cnt1 .inner .col2 .left {
        margin: 0 0 0rem !important;
    }
  .header {
    height: 6rem;
  }
  .inner,.index_cnt5 .inner .col2,.area_cnt4 .inner .col2,.company_cnt4 .inner .window {
    width: 90%;
  }
  .creditcard .inner h3,.index_cnt5 .inner .col2 :is(.left, .right) p,.area_cnt2 .inner .col2 .right h3,.area_cnt4 .inner .col2 :is(.left, .right) p,
  .blogdetail_cnt2 .inner .webgene-blog .webgene-item .dt h3{
    font-size: 2rem;
  }
  .index_cnt5 .inner .col2 :is(.left, .right),.area_cnt4 .inner .col2 :is(.left, .right) {
    padding: clamp(3rem, 1.5625vw, 3rem);
}
      [class^="reason_cnt"]:not(.reason_cnt7) .inner .grid2 {
        grid-template-columns: repeat(1, 1fr);
    }
  .price_cnt3 .cancel .dt {
    min-height: 5rem;
  }
  [class^="faq_cnt"]:not(.faq_cnt1) .dt::before {
    left: 1em;
  }
  .company_cnt1 {
    background: none;      /* 背景画像を解除 */
    padding: 4rem 0;       /* 上部の余白(8rem)も詰める */
  }

  .ceo-photo-sp {
    display: block;
    width: 100%;
    max-width: auto;      /* サイズは適宜調整 */
    height: auto;
    object-fit: contain;
    margin: 0 auto 2rem;   /* 中央寄せ＋下に余白 */
  }
  .company_cnt3 .inner .dd,.company_cnt3 .inner .dt {
    min-height: 3rem;
}
  .company_cnt3 .inner .dd {
    padding: 0rem 2rem 1rem 2rem;
  }
  .company_cnt3 .inner .dt {
    padding: 1rem 2rem 0rem 2rem;
  }
}
@media (min-width:768px) and (max-width:1024px){
  .index_cnt4 .inner .grid,[class^="reason_cnt"]:not(.reason_cnt7) .inner .grid,[class^="reason_cnt"]:not(.reason_cnt7) .inner .grid2 {
    grid-template-columns: repeat(2, 1fr);}
  .index_cnt1 .inner .col2,.index_cnt2 .inner .col2,.reserve .col2,.bottom .inner .col2,.price_cnt3 .cancel .dl,.area_cnt1 .inner .col2,
  .company_cnt3 .inner .dl,.contact_cnt1 .inner .col2,form .dl,.price_cnt1 .inner .col2,.index_cnt5 .inner .col2,.area_cnt4 .inner .col2{
    display: flex !important;}
  .price_cnt3 .cancel .dt {
    width: 30%;}
  .company_cnt3 .inner .dt {
    width: 20%;
    border-bottom: 0.1rem solid #b7ae95;
}
  form .dl .dt {
    width: 35%;
  }
  .index_cnt5 .inner .col2 .left,.area_cnt4 .inner .col2 .left{margin:0 auto !important;}
}
@media screen and (min-width: 1025px){
  .spbr br{display:none;
  }
}
@media (min-width:1025px) and (max-width:1300px){
  .header {
    padding: 0 0 0 8.75vw;
  }
  .header .nav {
    padding: 0 0 0 calc(1.2vw + 2rem);
  }
}
@media (min-width:1025px) and (max-width:1650px){
  .header .logo {
    left: 5.75vw;
}
  .header .nav .ul {
    display: flex;
        padding: 1rem calc(19rem + 6.25vw) 0 0;
        flex-wrap: wrap;
        justify-content: end;
        height: 5rem;
}
  .header .nav .li {
    list-style: none;
    display: flex;
    flex: 0 0 24.33%;
    align-items: center;
}
}