@charset "UTF-8";
    
/*ーーーーーーー共通ーーーーーーー*/




body{
overflow-x: hidden;
background: #fff;
}


    img{
    width: 100%;
    }
    
    .left3vw{
    padding-left: 3vw;
    }
    
    .right3vw{
    padding-right: 3vw;
    }
    
    
    .right10vw {
    padding-right: 10vw;
    }
    .left10vw{
    padding-left: 10vw;
    }
    
    .Top15vh{
    margin-top:15vh;
    }
    .Bottom20vh{
    padding-bottom:20vh;
    }
    .Bottom5vh{
    margin-bottom: 5vh;
    }
    
    .TopPd15vh{
    padding-top:15vh;
    }
    
    .Top5vh{
    margin-top:5vh;
    }
    
    .TopPd7vh{
    padding-top:7vh;
    }
    
    .bg{
    background: #efefef;
    position: relative;
    top: 12vw;
    }
    
    .main-title{
    padding: 15px 0 40px 0;
    }
    .bg_gr{
    background:#42403f!important;
    border:1px solid #42403f!important;
    opacity: .2;
    }
    div a.bg_gr:hover{
    background:#42403f!important;
    border:1px solid #42403f!important;
    opacity: .2;
     }
    

/*ボタン*/
    .btn-wp,.btn-wp div{
    display: flex;
    align-items: center;
    justify-content: center;
    }
    
    .btn-wp div{
     margin:10px 22px 10px 22px;
    }
    
    
    .btn-wp a{
    width: 19vw;
    padding: 27px 0;
    background: #b28e00;
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
    margin-right: -20px;
    transition: .5s;
    }
    
    .btn-wp a:hover{
    opacity: 0.2;
    transition: .5s;
    }
    
    .arrow{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 1px;
    background-color:#FFFFFF;
    position: relative;
    left:-27px;
    }
    
    .arrow::after,.arrow::before{
    content: "";
	display: block;
	width: 10px;
	height: 1px;
	background-color: #FFFFFF;
	position: absolute;
    }
    
    .arrow:before{
	top: -4px;
    left: 11px;
}
    .arrow:after{
	bottom: -4px;
    left: 11px;
}
    
    
    .arrow::after{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    }
    
    .arrow::before{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    }
    

.scroll_up {
  transition: 0.2s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
    transition-duration: .4s;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}
.timing06 {transition-delay: 1s;}
    

/*ーーーーーーー共通_終了ーーーーーーー*/



/*ーーーーーーーheaderーーーーーーー*/
    #header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: .5s;
    }
    
    #header.m_fixed {
	position: fixed;
	top: 0;
    transition: .5s;
    background: #42403f;
}
    
    .hd_inner{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    }
    
    .logo-wrap h1{
    position: relative;
    width: 340px;
    padding: 20px 0px;
    display: flex;
    align-items:end;
    }
    
    .logo1:hover,.logo2:hover{
    opacity: .2;
    transition: .5s;
    }
    
    .logo1,.logo2{
    transition: .5s;
    }
    
    

    .logo1{
    width:6.175rem;		
    margin-right: 20px;
    }
    .logo2{
    width:4.175rem;
    }
    
    .menu-wrap{
    display: flex;
    align-items: center;
    }
    
    .menu-wrap li a{
    width: 12vw;
    border: 1px solid #b28e00;
    text-align: center;
    padding: 12px;
    justify-content: center;
    display: flex;
    align-items: center;
    transition: .5s;
}
    
    .menu-wrap li a:hover{
    transition: .5s;
    opacity: .2;
    }
    
    
    .menu-wrap li:nth-child(2){
    margin: 20px;
    border: none;
    }
    
    .menu-wrap li:nth-child(3){
    background: #b28e00;
    }
    
    .menu-wrap li:nth-child(3):hover{
    opacity: .2;
    transition: .5s
    }
    
    
/*ーーーーーーーheader_finーーーーーーー*/
    
    
/*ーーーーーーーmainvisualーーーーーーー*/
    
    
    
      .swiper-container {
    position: relative;
  }

@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}
swiper-container{
  position: relative;
}
    .swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: -1;
}

    .swiper-slide-active .swiper-img,
    .swiper-slide-duplicate-active .swiper-img,
    .swiper-slide-prev .swiper-img { /* ８秒かけて拡大させる */
    -webkit-animation: zoomUp 8s linear 0s;
    animation: zoomUp 8s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .swiper-img {
    background-size: cover; 
    background-position: center center; /* 背景画像は中央を軸に表示させる */
    height: 90vh; /* 600pxの高さで表示させる */
    
}

    
    .titletext{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    }

    .titletext_01{
    padding: 10px 0 5px 0;
    margin-top: 10vh; 

    }
    
    .titletext_02{
    padding: 40px 0 30px 0;
    }

    .contact_menu a{
    padding:100px;
    background:#fac200;
    display: flex;
    justify-content: center;
    }
    
    
    .visual-container {
    height: calc(100vh - 180px); /* ビューポートの高さから80pxを引いて高さを設定 */
    overflow: hidden;
    position: relative;
    z-index: -1;
    }


.top-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* .visual-containerと同じ高さにする */
    overflow: hidden;
    z-index: -1;
    }

    .top-img img {
    width: 100%; /* 画像の最小幅を100%に指定する */
    height: 83vh; /* 画像の最小高さを100%に指定する */
    object-fit: cover;
    object-position: center;
    }
    
    .pc-wrap{
    position: relative;
    right: 5vw;
    width: 30%;
    }
    
    .pc-title-flex-wp{
    display: flex;
    align-items: flex-end;
    margin-top: -13vw;
    padding-bottom: 5px;
    
    }
    
    .mainvisual{
    width: 100vw;
    height: 100vh;
    }
    
    .titletext_04{
    width: 70%;
    }
    
    .img-client-wp{
      margin-top: 1vh;
    }

     
     .line-wp1,.line-wp2{
     display: flex;
     align-items: center;
     width: 500%;
     overflow: hidden;

     }

     
     .img-client-wp a{
     width:9.5rem;
     display: block;
     margin: 15px 50px;
     }

/*ーーーーーーーmainvisual_finーーーーーーー*/
    
    
    
    
    
    
    
    
/*ーーーーーーーmainーーーーーーー*/
    
/*ーーーーーーーsolutionーーーーーーー*/
 
    .solutions_list{
    display: grid;
    grid-template-columns: 18vw 18vw 18vw;
    grid-gap:3vw;
    margin-top: 6vh;
    justify-content: center;
    }
    
    .solutions_item p:last-of-type{
    background: #fff;
    padding:50px 15px 15px 15px;
    position: relative;
    }
    

    .arrow-flex{
    display: flex;
    flex-direction: column;
    }
    
    .solutions_item  .arrow{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 1px;
    position: relative;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    z-index: 10;
    }
    
    .solutions_item .arrow::after,
    .solutions_item .arrow::before{
    content: "";
	display: block;
	width: 20px;
	height: 1px;
	position: absolute;
    }
    
    .solutions_item .arrow:before{
	top: -7px;
    left: 14px;
   transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    }
     .solutions_item .arrow:after{
	bottom: -7px;
    left: 14px;
      transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
       
  .solu-item1 span.arrow,
  .solu-item1 span.arrow::after,
  .solu-item1 span.arrow::before{
    background: #6793bd;
    }
    
    .solu-item2 span.arrow,
    .solu-item2 span.arrow::after,
    .solu-item2 span.arrow::before{
    background: #66ab79;
    }

    
    .solution-sbtl01{
    background:#6793bd;
    border-radius: 30px;
    padding:1px 10px;
    display: inline-block;
    margin: 0 0 10px 0;
    width: 47%;
    min-width: 105px;
    }
    
      .solution-sbtl02{
    background:#66ab79;
    border-radius: 30px;
    padding:1px 10px;
    display: inline-block;
    margin: 0 0 10px 0;
    width: 40%;
    min-width: 100px;
    }
    
    
   .solutions_item p:first-of-type{
    background: #c9caca;
    padding: 20px;
    }
    
    
    
    @media screen and (max-width:1380px) {

    .br_none_sm01{
    display: none!important;
    }

    }

    @media screen and (max-width:1215px) {
    .br_none_sm02{
    display: none!important;
    }
    }

    @media screen and (max-width:1165px) {
    .br_none__ks02{
    display: none!important;
    }
    .br_none__sm03{
    display: none!important;
    }
    }
    
      @media screen and (max-width:1080px) {
    .br_none_ks02{
    display: none!important;
    }
    }
    
    
    
    @media screen and (max-width:1000px) {

    .br_none_sm02{
    display: none!important;
    }

    }
    
     @media screen and (max-width:950px) {

    .solutions_item p br{
    display: none!important;
    }

    }


    
    
/*ーーーーーーーsolution-finーーーーーーー*/
    
    
    
    
    
/*ーーーーーーーpointーーーーーーー*/

    .point-ico{
    width: 11%;
    }
    
    .point-img{
    width:  40%;
    margin-left: 85px;
    }
     .point-img2{
    width: 40%;
    margin-right: 85px;
    }
    
    point01-container div.point-img:nth-of-type(2){
    margin-left: 0px;
    margin-right: 85px;
    }
    
    .point01-ico-wrap,.point01-container,
    .point02-ico-wrap,.point02-container,
    .point03-ico-wrap,.point03-container{
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
    .point02-container{
    flex-direction: row-reverse;
    }
    
     .point01-ico-wrap,.point02-ico-wrap,.point03-ico-wrap{
    height: 100%;
    width: 60%;
    border-bottom: 1px solid #b28e00;
    display: flex;
     }
     
     
    .point-flex-wp{
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    padding: 10px 0px 10px 50px;
    }
    p.point-Sbtitile{
    padding: 0 0 0 20px;
    }
    
    .point-Sbtitile{
    width: 89%;
    }
    
    .point-flex-wp p:nth-of-type(2){
    padding: 10px 0px;
    }
   
   
   .reason-container,.point-container{
       border-top: 1.5px solid #ffff;
    padding-top: 5vw;
}
   
   
   p.reason-text-color{
   padding-bottom: 15px;
   }
   
   .reason-img{
   width: 75vw;
   margin: 0 auto;
   }
 
    
/*ーーーーーーーpointーーーーーーー*/
     
/*ーーーーーーーlinkーーーーーーー*/
      
      .link-wrap{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    
      }
      
      .link-wrap div{
      background: #fff;
      }
      
      .link-flex-item div{
      width: 25%;
      }
      
         
    div.link-flex-item:nth-of-type(3){
      width: 25%;
      }
      
      .link-flex-item{
        display: flex;
        padding: 10px;
        margin: 15px 0;
        align-items: center;
        justify-content: space-evenly
      }
       .link-flex-item p{
       }
       
       
      
      .movie-wrap,.contact-wrap,.download-wrap{
        padding: 35px 25px 30px 25px;
        margin: 20px 20px 40px;
        width: 33%;
      }
      
      
      .link-wrap .btn-wp a{
      width: 280px;
      padding: 19px 0;
      }
      
    
      
      
      
/*ーーーーーーーlinkーーーーーーー*/
     
     
     
     

    
    
/*ーーーーーーーmain_finーーーーーーー*/
 

/*ーーーーーーーfooterーーーーーーー*/
    
    
    
#footer {
    background: #fff;
    padding: 100px 0 90px;
    text-align: center;
    font-size: 15px;
    font-size: 1.25rem;
    border-bottom: 5px solid #bd991e;
    letter-spacing: 1.5px
}

/*
@media screen and (max-width: 834px) {
    #footer {
        padding:50px 0;
        font-size: 14px;
        font-size: 1.1875rem;
        letter-spacing: 1px;
        border-bottom: 3px solid #bd991e
    }
}

#footer .footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 45px
}
*/
/*

@media screen and (max-width: 834px) {
    #footer .footer-menu {
        margin-bottom:30px
    }
}

@media screen and (max-width: 374px) {
    #footer .footer-menu {
        display:block;
        text-align: center
    }
}

#footer .footer-menu li {
    margin: 0 5px
}

@media screen and (max-width: 374px) {
    #footer .footer-menu li {
        margin:0 0 10px
    }

    #footer .footer-menu li:last-child {
        margin-bottom: 0
    }
}

#footer .footer-menu li:nth-child(1) {
    margin-left: 0
}

#footer .footer-menu li:last-child {
    margin-right: 0
}

#footer .footer-menu li a {
    color: #333
}
#footer .copyright {
    font-size: 11px;
    font-size: 1rem;
    letter-spacing: 1.3px
}

#footer .share {
    width: 100%
}

*/

     /*ーーーーーーーfooter_finーーーーーーー*/
     
     
     
 /*追記：0321 黒田*/
.wdp_body .movie-wrap,
.wdp_body .contact-wrap,
.wdp_body .download-wrap{
    padding: 35px 50px 30px 50px;
    margin: 20px 0 40px 20px;
    width: 50%;
}

.wdp_body .link-flex-item div {
    width: 20%;
}

.wdp_body .link-flex-item p {
    font-size: 1.2rem;
    padding-left: 35px;
}

.wdp_body .link-flex-item{
justify-content:center;
}    

.wdp_body .download-wrap{
margin-left:0px!important;
}   
.wdp_body .link-wrap .btn-wp a{
width: 350px;
}   



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

  .sp_none{
    display: none;
  }
}

  .pc_none{
  display: none;
  }  
     
   /*ーーーーーーースマホーーーーーーー*/   

/*ーーーーーーーheaderーーーーーーー*/

/* スマホおよびタブレット用のレスポンシブ調整 */
@media screen and (max-width: 768px) {
    .pc_none{
  display: block;
  } 

    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #42403f;
        z-index: 999;
        transition: .5s;
    }

    .hd_inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }

    .logo-wrap {
        width: 100%;
        text-align: center;
        padding:0px;
    }

    .logo-wrap h1 {
        justify-content: space-around;
        width: 120px;
        padding: 0px;
        margin-left: 2vw;
    }

    .logo1 {
        width: 50%;
        margin-right: 0;
    }

    .logo2 {
        width: 40%;
    }

    /* メニュー部分 */
    .menu-wrap {
        display: none; /* デフォルトでは非表示 */
        flex-direction: column;
        width: 100%;
        background-color: #42403f;
    }

    .menu-wrap li {
        width: 100%;
        margin: 0;
        text-align: center;
        border-bottom: 1px solid #b28e00;
    }

    .menu-wrap li a {
        padding: 15px 0;
        width: 100%;
        text-align: center;
        border: none;
        display: block;
        color: #fff;
    }

    /* ハンバーガーメニュー */
    .hamburger {
        display: block;
        position: absolute;
        top: 15px;
        right: 20px;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px;
        background-color: #fff;
        transition: all 0.3s ease-in-out;
    }

    /* メニューが表示された時のスタイル */
    .menu-wrap.active {
        display: flex;
    }

    /* メニューが開いたときにハンバーガーアイコンのスタイルを変更 */
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

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

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}


/*ーーーーーーーmainvisualーーーーーーー*/
@media screen and (max-width: 768px) {
    .text-center {
        text-align: center;
    }

    .titletext_01 {
        padding: 10px 0 5px 0;
        margin-top:0px;
    }
    
    .titletext_02 {
      
        padding: 10px 0 15px 0;
    }
    
    .titletext_03 {
      
        letter-spacing: .05em;
    }
    
    .titletext_04 {
      width: 90%;
      padding-left: 0px;
      padding-top: 5vw;
      
    }
  
    .titletext {
      position: absolute;
      top: 30%;
      transform: translateY(-30%);
      z-index: 1;}

    .pc-wrap {
        width: 50%;
        margin: 0 auto;
       
    }
    
    .pc-title-flex-wp {
        display: flex;
        text-align: left;
        margin-top: 0;
        position: absolute;
        top: 55vh;
        flex-direction: column-reverse;
      
    }

    .img-client-wp {
        margin-top: 1vh;
    }

    .img-client-wp a {
        width: 7rem;
        display: block;
        margin: 10px 20px;
    }

    .swiper-img {
        background-size: cover;
        background-position: center center;
    }

    .visual-container {
         height: calc(100vh - 180px); /* ビューポートの高さから80pxを引いて高さを設定 */
        overflow: hidden;
        position: relative;
        z-index: -1;
    }

    .top-img img {
        width: 100%;
        height: 70vh;
        object-fit: cover;
        object-position: center;
    }

    .contact_menu a {
        padding: 50px;
        background: #fac200;
        display: flex;
        justify-content: center;
    }
    
    .line-wp1, .line-wp2 {
        display: flex;
        align-items: center;
        width: 100%;
        overflow: hidden;
    }
}


/*ーーーーーーーslickーーーーーーー*/

/* スライダーのスタイル */
.slider-wrap {
    width: 100%; /* 幅を100%に設定 */
    margin: 0 auto; /* 中央寄せ */
}

/* 各スライドのスタイル */
.slick-slide {
    display: flex; /* フレックスボックスで配置 */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 中央揃え */
    margin: 0 10px; /* スライド間のマージン */
}

/* スライド内の画像 */
.slick-slide img {
    max-width: 100%; /* 画像の最大幅を100%に設定 */
    height: auto; /* アスペクト比を保つ */
}

/* レスポンシブデザイン */
@media screen and (max-width: 1024px) {
    .slick-slide {
        margin: 0 5px; /* スライド間のマージンを縮小 */
    }
}

@media screen and (max-width: 768px) {
    .slick-slide {
        margin: 0 2px; /* スライド間のマージンをさらに縮小 */
    }
}

@media screen and (max-width: 480px) {
    .slick-slide {
        margin: 0 1px; /* スライド間のマージンを最小限に */
    }
}





/*ーーーーーーーsolutionーーーーーーー*/
     
 @media screen and (max-width: 768px) {
    /* グリッドを1列にする */
    .solutions_list{
        grid-template-columns: 1fr;
        grid-gap: 5vw;
        margin-top: 4vh;
    }

    /* テキストの余白を調整して、スマホでも見やすくする */
    .solutions_item p:first-of-type{
        padding: 15px;
    }

    .solutions_item p:last-of-type{
        padding: 30px 10px 10px 10px;
    }

    /* タイトルやボタンなどの要素の幅を自動調整 */
    .solution-sbtl01,
    .solution-sbtl02 {
        width: auto;
        padding: 5px 15px;
        margin-bottom: 10px;
        min-width: unset;
    }

    /* 矢印アイコンの位置とサイズを調整 */
    .solutions_item .arrow {
        width: 20px;
        top: 10px;
    }

    .solutions_item .arrow::before {
        left: 9px;
    }

    .solutions_item .arrow::after {
        left: 9px;
    }

    /* フォントサイズを少し小さくする */
    .solutions_item p {
        font-size: 14px;
        line-height: 1.5;
    }

    /* テキスト間の改行を除去 */
    .solutions_item p br {
        display: none;
    }

    /* 不要なbrタグの非表示設定（スマホ用） */
    .br_none_sm01, 
    .br_none_sm02, 
    .br_none__ks02, 
    .br_none__sm03 {
        display: none;
    }

    /* スマホサイズでのレイアウト調整 */
    .arrow-flex {
        align-items: flex-start;
    }
 
     .btn-wp {
        flex-direction: column; /* ボタンを縦に並べる */
        margin: 2.5vh 0; /* 上下の余白を調整 */
    }

    .btn-wp div {
        margin: 10px 0; /* ボタン間の上下余白 */
        width: 100%; /* ボタンを幅100%にする */
        text-align: center;
    }

    .btn-wp a {
        width: 100%; 
        padding: 15px 0; /* ボタンの高さを調整 */
        background: #b28e00;
        text-align: center;
        margin: 0 auto; /* ボタンを中央に配置 */
        display: block;
        border-radius: 4px;
        transition: .5s;
    }

    .arrow {
        display: none; /* スマホでは矢印を非表示にする */
    }
   
   
   
/*ーーーーーーーpointーーーーーーー*/
   .point01-ico-wrap, .point02-ico-wrap, .point03-ico-wrap{
     display:block;
     width:100%;
   }
   
   .point01-ico-wrap, .point01-container, .point02-ico-wrap, .point02-container, .point03-ico-wrap, .point03-container{
     display: block;
   }
   
   .point-flex-wp{
     padding: 0px;
   }
   .point-img {
    width: 100%;
    margin-top: 5vw;
    margin-left: 0px;
}
   .point-img2{
    width: 100%;
    margin-top: 5vw;
    margin-right: 0px;
   }
   
   
   
   
   
   
/* ------------ダウンロードボタン------------*/
   
   
   .link-wrap{
     display: block;
   }
   .wdp_body .movie-wrap, .wdp_body .contact-wrap, .wdp_body .download-wrap{
     width: 100%;
   }
   .wdp_body .link-wrap .btn-wp a {
    width: 100%;
}
   
   .movie-wrap, .contact-wrap, 
   .download-wrap{
     margin:4vw 0 2vw 0!important;
   }
   
   .link-flex-item{
     padding:0px;
     flex-direction: column;
   }
   .link-flex-item img{
     padding-bottom: 5vw;
   }
   .wdp_body .link-flex-item p{
     padding-left: 0px;
   }
   
}