/*
Theme Name: 20250616
Author: 株式会社プラセム
Description: 20241023_cocohomeUpdate
Version: 1.0
*/

@charset "UTF-8";

*{
    box-sizing: border-box;
    scroll-behavior: smooth;;
}

a{
    text-decoration: none;
}

p,a,span,dt,dd,label{
    font-family: 'Noto Sans JP', sans-serif;
}

.noto{
    font-family: 'Noto Sans JP', sans-serif;
}

.monst{
    font-family: 'Montserrat', sans-serif;
}

.outfit{
    font-family: 'Outfit', sans-serif;
}

.lato{
    font-family: 'Lato', sans-serif;
}

.orange{
    color:#d76717;
}

.white{
    color:#fff;
}

.inline-b{
    display:inline-block;
}

.max-18{
    max-width:1080px;
    width:90%;
    margin:0 auto;
}

.pb-15{
    padding-bottom:150px;
}

@media screen and (max-width:768px){
    .pb-15{
        padding-bottom:120px;
    } 
}

@media screen and (max-width:480px){
    .pb-15{
        padding-bottom:100px;
    }   
}

.pt-20{
    padding-top:200px;
}

.pb-20{
    padding-bottom:200px;
}

@media screen and (max-width:768px){
    .pt-20{
        padding-top:150px;
    }
    
    .pb-20{
        padding-bottom:150px;
    }
}

@media screen and (max-width:480px){
    .pt-20{
        padding-top:130px;
    }
    
    .pb-20{
        padding-bottom:130px;
    }
}

.pc-none{
    display:none;
}
.only-sp{
    display:none;
}

.sp-none,.only-sp-none{
    display:inherit;
}



@media screen and (max-width:768px){
    .sp-none{
        display:none;
    }

    .pc-none{
        display:inherit;
    }
}

@media screen and (max-width:480px){
    .only-sp-none{
        display:none;
    }

    .only-sp{
        display:inherit;
    }
}

/* フェードインアニメーション */
 /* フェードアップアニメーション */
 .fadeup {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  
  @keyframes fadeUpAnime {
    from {
      opacity: 0;
      transform:translateY(50px);
    }
    to {
      opacity: 1;
      transform:translateY(0px);
    }
  }


  
  .effect {
    opacity: 0;
  }

  .effect.delay1{
    animation-delay:.1s;
  }

  .effect.delay2{
    animation-delay:.2s;
  }
  .effect.delay3{
    animation-delay:.3s;
  }

  @media screen and (max-width:480px){
    .effect.delay1,
    .effect.delay2,
    .effect.delay3{
        animation-delay:0s;
      }

  }

  .effect-right-js{
    opacity: 0;
    transition:.5s;
    margin-left:-50px;
  }

  .fade-right-js{
    animation-fill-mode: forwards;
    opacity: 1;
    margin-left:0;
  }

  .effect-left-js{
    opacity: 0;
    transition:.5s;
    transform: translateX(50px);
  }

  .fade-left-js{
    animation-fill-mode: forwards;
    opacity: 1;
    transform: translateX(0px);
  } 

/* header */
header{
    position:fixed;
    z-index:50;
    background-color:#fff;
    width:100%;
}

.header-content{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:100px;
}

main{
    padding-top:100px;
}

@media screen and (max-width:768px){
    .header-content{
        height:70px;
    }

    main{
        padding-top:70px;
    }
}

@media screen and (max-width:550px){
    .header-content{
        height:50px;
    }

    main{
        padding-top:50px;
    }
}

.header-logo img{
    max-width:200px;
    min-width:170px;
    width:18vw;
}

@media screen and (max-width:550px){
    .header-logo img{
        min-width:0;
        width:110px;
    }
}
.pc-nav{
    display:flex;
    max-width:320px;
    min-width:290px;
    width:30vw;
    justify-content: space-between;
}
.pc-nav-item a{
    font-size:16px;
    color:#000;
    letter-spacing:0.04em;
    display:block;
    width:fit-content;
    height:fit-content;
}

.has-sub{
    position:relative;
}

  
  .nav a {
    display: block;
    line-height: 1;
  }

  .main-nav{
    border-bottom:2px solid rgba(214,103,22,0);
    padding-bottom:8px;
    transition:.3s;
    z-index:100;
    position:relative;
    z-index:50;
  }
  
  .main-nav:hover{
    border-bottom:2px solid rgba(214,103,22,1);
  }
  .sub,
  .page header.scroll .sub {
    overflow: hidden;
    position: absolute;
    top: 5px;
    min-height: 0;
    height: 0;
    left:0;
    z-index: -100;
    opacity:0;
    transition: opacity 0.3s display 0.3s;
    background-color:#fff;
    width:210px;
    height:150px;
    box-sizing: border-box;
    padding:20px;
    padding-top:40px;
    display:none;
    background: linear-gradient(180deg, transparent 0%, transparent 30px, #fff 30px, #fff 100%);
  }


  .sub li a{
    position:relative;
    padding-left:20px;
    display:block;
    width:fit-content;
    font-size:16px;
    letter-spacing:0.04em;
    margin-top:10px;
    transition:.3s;
  }

  .sub li a::before{
    content:"";
    width:8px;
    height:8px;
    background-color:#C7C8C8;
    position:absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
    transition:.3s;
  }

  .sub li a:hover{
    color:#D66716;
  }

  .sub li a:hover::before{
    background-color:#D66716;
  }

  .sub.active,
  .page header.scroll .sub.active {
    opacity:1;
    z-index:20;
    display:inherit;
  }

  @media screen and (max-width:550px){
    .pc-nav{
        display:none;
    }
  }



  /* ハンバーガー */
.sp-nav{
    display:none
  }

  @media screen and (max-width:550px){
    .sp-nav{
        display:inherit;
    }
  }
  
  /* チェックボックスを非表示にする */
  .checkbox-hidden {
  display: none;
  }
  
  /* 設置スペース */
  .hum-open{
    display: flex;
    height: 55px;
    width: 55px;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: pointer;
    border-radius:2px;/*ボタンの背景の角*/
    position:relative;
  }

  /* アイコンの見た目 */
  .hum-open span,
  .hum-open span:before,
  .hum-open span:after {
    content: '';
    display: block;
    height: 1px;
    width: 30px;
    border-radius: 3px;
    background: #D66716; /*三本線の色*/
    transition: 0.5s;
    position: absolute;
  }
  
  /* 上の線の位置 */
  .hum-open span:before {
    bottom: 8px;
  }
  
  /* 下の線の位置 */
  .hum-open span:after {
    top: 8px;
  }
  
  /* メニューが開いた時に真ん中の線を消す */
  #hum-icon:checked ~ .hum-open span {
    background: rgba(255, 255, 255, 0);
  }
  
  /* メニューが開いた時に線が×になる*/
  #hum-icon:checked ~ .hum-open span::before {
    bottom: 0;
    transform: rotate(-45deg);
  }
  
  #hum-icon:checked ~ .hum-open span::after {
    top: 0;
    transform: rotate(45deg);
  }
  
  /* ハンバーガーメニューの中身*/
  .sp-nav-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:100%;
    z-index: 90;
    background-color:#fff;
    transition: .5s;
    display: table;
  }
  
  /* アイコンがクリックされたらメニューを右から入れる */
  #hum-icon:checked ~ .sp-nav-content {
    left:0;
  }
  
  /* メニューのスタイル */
  .sp-nav-list{
    width:fit-content;
    list-style: none;
    display:block;
    width:fit-content;
    margin:0 auto;
    height:fit-content;
    font-size:16px;
    text-align: left;
    position:relative;
    display:table-cell;
    vertical-align: middle;
  }
  
  .sp-nav-list a{
    width:80%;
    display: block;
    margin:0 auto;
  }
  
  .sp-nav-item a{
    text-decoration:none;
    color:#000;
    font-size:18px;
    padding:10px 0px;
    transition:.2s;
    position:relative;
    margin:20px auto; 
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:500;
    padding-left:15px;
    color:#D66716;
    font-weight:600;
  }

  .sp-nav-item a::before{
    content:"";
    width:5px;
    height:20px;
    background-color:#D66716;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
  }

  .sp-sub{
    text-indent: 20px;
  }

  .sp-sub a{
    position:relative;
    margin:10px auto;
    font-size:16px; 
    color:#000;
  }

  .sp-sub a::before{
    content:"";
    height:0; 
  }


  .sp-nav-item a:hover{
    color:#d76717;
  }
  
  .sp-nav-item:first-child{
    padding-top:0;
  }

  .sp-nav-contact a{
    display:block;
    margin:0 auto;
    box-sizing: border-box;
    height:60px;
  }

/* mv */

#mv{
    padding-bottom:250px;
}

@media screen and (max-width:768px){
    #mv{
        padding-bottom:200px;
    }
}
@media screen and (max-width:480px){
    #mv{
        padding-bottom:100px;
    }
}

.mv-content{
    position:relative;
    width:100%;
}

.mv-tree-sp{
    position:absolute;
    bottom:0;
    right:5px;
    z-index:10;
    display:none;
}

.mv-slide{
    position:relative;
    width:80%;
    max-width:1500px;
}

.mv.slider{
    margin-left:10%;
    border-radius:80px 0 80px 0;
    overflow: hidden;
    height:fit-content;
    z-index:1;
}


.slider.sp{
    display:none;
}

.slick-img{
    border-radius:80px 0 80px 0;
}


.slick-img img{
    width:100%;
}


  .thumbnail-img img {
    height: auto;
    max-width: 130px;
    max-height:130px;
    object-fit: cover;
    border:3px solid #fff;
    width:130px;
    height:130px;
  }


  .thumbnail{
    position:absolute;
    top:43vw;
    right:5%;
    max-width:550px;
    z-index:2;
    width:550px;
  }

  @media screen and (max-width:950px){
    .thumbnail-img img {
        width:120px;
        height:120px;
      }

      .thumbnail{
        width:500px;
      }
  }

  @media screen and (max-width:768px){
    .thumbnail-img img {
        max-width:100px;
        max-height:100px;
        width:13vw;
        height:13vw;
      }

      .thumbnail{
        max-width:420px;
        width:54.7vw;
      }
  }

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

    .mv.slider{
        border-radius:0;
        margin:0;
    }

    .mv-slide{
        width:100%;
        z-index:-1;
    }
    .slider.sp{
        display:inherit;
    }

    .slider.pc{
        display:none;
    }
}

  .mv-tree{
    position:absolute;
    bottom:-5vw;
    left:52vw;
    z-index:3;
  }

  .mv-tree img{
    max-width:70px;
    min-width:50px;
    width:4.5vw;
  }

  .thumbnail-img.relative{
    position:relative;
  }

  .chimney-anime{
    position:absolute;
    max-width:200px;
    max-height:300px;
    width:13.3333vw;
    height:20vw;
    z-index:-1;
    right:3%;
    top:24vw;
  }

  .chimney-anime.sp{
    display:none;
  }


  .mv-tree{
    position:absolute;
    bottom:-5vw;
    left:52vw;
    z-index:3;
  }

  .mv-tree img{
    max-width:70px;
    min-width:50px;
    width:4.5vw;
  }

  .thumbnail .slick-track{
    transform:unset!important;
  }


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

    .thumbnail-img{
        margin:0 5px;
    }

      .thumbnail{
        top:41vw;;
      }

      .chimney-anime{
        top:22vw;
      }

      .mv-tree{
        bottom:-10%;
        left:45%;
      }
    
  }

  @media screen and (max-width:1200px){
      .mv-tree{
        bottom:-13%;
        left:35%;
      }
  }

  @media screen and (max-width:1030px){
    .mv-tree{
      bottom:-15%;
      left:30%;
    }
}

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


    .thumbnail{
        position:static;
        width:90%;
        max-width:550px;
        margin:0 auto;
        margin-top:20px;
        z-index:2;
      }

      .thumbnail-img{
        margin:0;
        max-width:200px;
        max-height:200px;
        width:20vw;
        height:20vw;
        margin:0 auto;
        z-index:3;
    }

      .thumbnail-img img {
        width:100%;
        border:0px solid #fff;
        max-width:200px;
        max-height:200px;
        width:20vw;
        height:20vw;
        margin:0 auto;

      }
  

      .chimney-anime{
        top:127vw;
        right:-0.5vw;
        width:140px; 
        height:140px;
        width:19vw;
        height:19vw;
      }
 

      _::-webkit-full-page-media,
      _:future,
      :root .chimney-anime {
      top: 127vw;
    }




    .chimney-anime.pc{
        display:none;
      }

    .chimney-anime.sp{
        display:inherit;
      }

      .mv-tree{
        display:none;
      }

  }

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

    .thumbnail-img{
        margin:0 10px;;
    }

      .thumbnail{
        position:absolute;
        top:41vw;;
      }
    
      .mv-tree{
        position:absolute;
        bottom:-2vw;
        left:56vw;
      }
    
      .mv-tree img{
        width:70px;
      }
    
      .chimney-anime{
        width:200px;
        height:300px;;
        z-index:-1;
        right:3%;
        top:24vw;
      }
  }

  @media screen and (min-width:1745px){
    .chimney-anime{
        top:27vw;
      }
  }

/* intro */

#intro{
    position:relative;
    overflow: hidden;
    padding-bottom:150px;
}

@media screen and (max-width:800px){
    #intro{
        padding-bottom:230px;
    }
}


#intro h2{
    font-weight:500;
    font-size:20px;
}

.intro-content{
    position:relative;
}

.before-border{
    position:relative;
    padding-left:35px;
}

.before-border::before{
    content:"";
    width:30px;
    height:1px;
    background-color:#d76717;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    left:0;
}

.intro-h2-content{
    margin-top:30px;
}

.intro-h2-content p{
    font-size:28px;
    font-weight:500;
    letter-spacing:0.16em;
    line-height:1.64;
}

@media screen and (max-width:1200px){
    .intro-h2-content p{
        font-size:2.3vw;
        white-space: nowrap;
    }
}

@media screen and (max-width:768px){
    .intro-h2-content p{
        font-size:22px;
        letter-spacing:0.1em;
    }
}

@media screen and (max-width:480px){
    .intro-h2-content p{
        font-size:18px;
        letter-spacing:0.1em;
    } 

    .intro-h2-content{
        margin-top:10px;
    }
}

.intro-flex{
    display:flex;
    justify-content: space-evenly;
    gap:10px;
    position:relative;
    overflow: hidden;
}

@media screen and (max-width:768px){
    .intro-flex{
        display:block;;
    }

}

.intro-flex-left img{
    max-width:500px;
    width:38.46vw;
    width:100%;
}

.intro-flex-left.sp{
    display:none;
}

@media screen and (max-width:768px){
    .intro-flex-left img{
        display:block;
        margin:0 auto;
        max-width:760px;
        width:90%;
        margin-top:50px;
    }

    .intro-flex-left.pc{
        display:none;
    }

    .intro-flex-left.sp{
        display:inherit;
    }
}

.intro-bottom{
    margin-top:50px;
}

.intro-bottom p{
    max-width:800px;
    font-size:20px;
    letter-spacing:0em;
    line-height:1.9;
    width:75%;
}

@media screen and (max-width:768px){
    .intro-bottom p{
        font-size:18px;
    }
}

@media screen and (max-width:480px){
    .intro-bottom p{
        font-size:16px;
        width:100%;
    }
}

.word-roll{
    animation:word-scroll linear 40s;
    animation-iteration-count: infinite;
    display:flex;
    width:100%;
    position:absolute;
    z-index:-1;
}

.word-roll span{
    font-size:150px;
    white-space: nowrap;
    color:#ebebeb;
    font-weight:600;
}

.intro-back{
    top:170px;
}

@media screen and (max-width:768px){
    .word-roll span{
        font-size:100px;
    }
    
    .intro-back{
        top:58vw;;
    }
}

@media screen and (max-width:480px){
    .word-roll span{
        font-size:80px;
    }
    
    .intro-back{
        top:72.5vw;
    }
}



@keyframes word-scroll{
    0%{
        transform: translateX(0%);
    }

    100%{
        transform: translateX(-400%);
    }
}



.view-more{
    font-size:18px;
    font-weight:600;
    color:#000;
    border-bottom:1px solid #d76717;
  position:relative;
}


.view-btn{
    position:relative;
    display:block;
}

#intro .view-btn{
    margin-top:110px;
}

.btn-arrow .color{
  position:absolute;
  content:"";
    background-color:#d76717;
    border-radius:100px;
    display:block;
    width:60px;
  height: 60px;
  padding:50px;
  color:#fff;
  font-weight:600;
  transition:.0s; 
  left:140px; 
  top:49.5%;
  transform:translateY(-50%);
  overflow:hidden;
  transition-duration:.3s;  
  transition-property: padding,left;
}

.view-btn a:hover .btn-arrow .color{
  padding:80px;
  margin-top:0px;
  transition:0s; 
  left:110px; 
}
 
.btn-arrow .color::before{
  content:"VIEW MORE"; 
  position:absolute;
  font-size:18px;
  font-weight:600;
  color:#000;
  border-bottom:1px solid #fff;
  top:49.6%;
  transform:translateY(-50%);
  color:#fff;
  font-family: 'Montserrat', sans-serif;
  left:-150px;
} 

_::-webkit-full-page-media,
_:future,
:root 
.btn-arrow .color::before{
    top:49%;
  } 


.btn-arrow-img{
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:10;
}

#company .btn-arrow .color::before{
    color:#000;
  }

.view-btn a:hover .btn-arrow .color::before{
  opacity:1;
  transition:0s;
  animation:view-btn 0.0s forwards;
}

@keyframes view-btn{
  0%{
    left:-150px;
  }
  
  100%{
    left:-110px; 
  }
}



.view-btn a{
    position:relative;
}

.view-btn a .ring{
    position:absolute;
    width:70px;
    height:70px; 
    border:20px solid #d76717;
    top:-27px;
    left: 155px; 
    border-radius:100px;
    opacity:0.5;
    opacity:0;
    z-index:5;
}

.view-btn a:hover .ring{
    animation:wave 2s infinite;
}

@keyframes wave{

    0%{
        opacity:0.5;
        scale:2.5;
    }

    30%{
        opacity:0;
        scale:3;
    }

    100%{
        opacity:0;
        scale:3;
    }
}

@media screen and (max-width:480px){
    .btn-arrow .color{
        left:120px; 
      }
      
      .view-btn a:hover .btn-arrow .color{
        left:90px; 
      }
       

      @keyframes view-btn{
        0%{
          left:-150px;
        }
        
        100%{
          left:-90px; 
        }
      }

      .view-btn a .ring{
        left: 136px; 
    }

    
}


@media screen and (max-width:480px){
    .view-btn{
        -moz-transform: scale(0.8) translate(-45px, -45px);
        -webkit-transform: scale(0.8) translate(-45px, -45px);
    }
}

.balloon-anime{
    position:absolute;
    width:150px;
    bottom:70px;
    right:0;
}

@media screen and (max-width:800px){
    .balloon-anime{
        position:absolute;
        min-width:100px;
        width:19.5vw;
        bottom:-60px;
        right:0;
    }
}


.intro-illust{
    position:absolute;
    bottom:-30px;
    right:0;
    z-index:-1;
}

@media screen and (max-width:800px){
    .intro-illust{
        bottom:-155px;
    }
}



.intro-illust img{
    max-width:441px;
    width:100%;
}

/* promise */

h2{
    font-size:70px;
    letter-spacing:0.02em;
    line-height:0.7;
    font-family: 'Montserrat', sans-serif;
    color:#d76717;
    font-weight:300;
}

@media screen and (max-width:768px){
    h2{
        font-size:50px;
    }
}

@media screen and (max-width:480px){
    h2{
        font-size:40px;
    }
}

#promise{
    position:relative;
    background-color:#ebebeb;
    padding-top:100px;
    padding-bottom:90px;
}

@media screen and (max-width:480px){
    #promise{
        padding-bottom:50px;
    }
}

.promise-content{
    position:relative;
    padding-top:50px;
}

.clip{
    position:absolute;
    width:100%;
    height:100px;
    clip-path: polygon(100% 0, 0 0, 0 100%);
    top:0;
    left:0;
}

@media screen and (max-width:768px){
    .clip{
        height:70px;
    }
}

.promise-clip{
    background-color:#fff;
}

#promise h2{
    position:absolute;
    z-index:2;
    top:-65px;
    left:0;
}

.h2-jp{
    color:#000;
    font-size:32px;
    font-weight:500;
    letter-spacing:0.04em;
    font-family: 'Noto Sans JP', sans-serif;
    display:block;
    margin-top:30px;
}

@media screen and (max-width:768px){
    .h2-jp{
        font-size:25px;
        margin-top:25px;
    }
}

@media screen and (max-width:480px){
    .h2-jp{
        font-size:18px;
        margin-top:15px;
    }
}

.h2-jp.white{
    color:#fff;
}
.promise-wrap{
    padding-top:100px;
    display:flex;
    justify-content: space-between;
    gap:20px;
}

.a-promise{
    background-color:#fff;
    border-radius: 40px 0 40px 0;
    padding:30px;
    position:relative;
}



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

    .promise-wrap{
        justify-content: flex-start;
        flex-wrap: wrap;
        width:660px;
        margin:0 auto;
        gap:70px 20px; 
    }


    .a-promise{
        width:320px;
        padding:30px 24px;
    }
    

}

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

    .promise-wrap{
        display:block;
        width:100%;
    }

    .a-promise{
        margin:0 auto;
    }

    .a-promise + .a-promise{
        margin-top:70px;

    }
}

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

    .promise-wrap{
        padding-top:0px;
    }


    .a-promise{
        padding:20px;
        width:fit-content;
        max-width:300px;
    }
}


.promise-num{
    width:83px;
    text-align: center;
}

.pr-num-title{
    font-size:15px;
    letter-spacing:0.02em;
    font-weight:300;
}

.pr-num{
    font-size:60px;
    font-weight:300;
    font-style: italic;
    letter-spacing:0.08em;
    display:block;
    width:fit-content;
    padding-bottom:10px;
    line-height:1;
}

.a-pr-img{
    width:100%;
    margin:0 auto;
}

.a-pr-img img{
    width:100%;
    display:block;
    margin:0 auto;

}

.bottom-border{
    position:relative;
}

.bottom-border::after{
    position:absolute;
    content:"";
    width:36px;
    height:1px;
    background-color:#d76717;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
}

.a-promise-head{
    position:absolute;
    top:-38px;
    z-index:5;
    right:3px;
}


.a-promise-content{
    margin-top:20px;
}

.a-promise-title{
    font-size:22px;
    font-weight:600;
    letter-spacing:0.04em;
    text-align: center;
    color:#D66716;
    line-height:1.4;
}

.a-promise-text{
    font-size:16px;
    margin-top:15px;
    line-height:1.6;
}

@media screen and (max-width:1080px){ 
    .promise-num{
        width:80px;
        text-align: center;
    }
    
    .pr-num{
        font-size:55px;
    }

    .a-promise-title{
        font-size:18px;
    }
    
}

@media screen and (max-width:480px){ 
    .promise-num{
        width:60px;
        margin-left:10px;
    }
    
    .pr-num{
        font-size:50px;
    }

    
    .a-promise-title{
        font-size:18px;
    }

    .a-promise-text{
        margin-top:5px;
        font-size:15px;
    }
    
}

/* service */
#service{
    position:relative;
    padding-top:100px;
}

.service-content{
    padding-bottom:200px;
}

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

    #service{
        padding-top:50px;
    }
    .service-content{
        padding-bottom:70px;
    }
}

.a-service{
    width:100%;
    height:fit-content;
    position:relative;
}

.service-clip{
    background-color:#ebebeb;
}


.a-service1{
    margin-top:50px;
}

.a-top-service-img img{
    max-width:730px;
    min-width:685px;
    width:52.14vw;
    display:block;
}

@media screen and (max-width:1080px){
    .a-top-service-img img{
        width:60vw;
        min-width:0;
    }
}

@media screen and (max-width:768px){
    .a-top-service-img img{
        max-width:780px;
        width:100%;
    }
}

.a-top-service-img.right img{
    margin-left:auto;
}

.a-service-info{
    width:430px;
    background-color:#fafafa;
    padding:40px 50px;
    position:absolute;
}

.a-service-info.fadeup{
    animation-name: sr-down;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: .5s;

}

  @keyframes sr-down {
    0% {
        top:115px;
    }
    100% {
      opacity: 1;
      top:165px;
      padding:40px 50px;
    }
  } 

@media screen and (max-width:1080px){
    .a-service-info{
        width:380px;
        padding:30px;
    }
}

@media screen and (max-width:768px){
    .a-service-info{
        width:100%;
        height:fit-content;
        position:static;
        padding-bottom:70px;
    }

    .a-service-info.fadeup{
        animation-name: sr-down-sp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        opacity: 0;
    
    }
    
      @keyframes sr-down-sp {
        0% {
            margin-top:-20px;
        }
        100% {
          opacity: 1;
          margin-top:0;
        }
      } 
}

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

    .service-wrap{
        margin-top:100px;
    }
    .a-service-info{
        padding-bottom:30px;
    }
}

.a-service + .a-service{
    margin-top:120px;
}

@media screen and (max-width:1300px){
    .a-service + .a-service{
        margin-top:150px;
    }
}

@media screen and (max-width:1080px){
    .a-service + .a-service{
        margin-top:120px;
    }
}

@media screen and (max-width:950px){
    .a-service + .a-service{
        margin-top:160px;
    }
}

@media screen and (max-width:830px){
    .a-service + .a-service{
        margin-top:180px;
    }
}

@media screen and (max-width:480px){
    .a-service + .a-service{
        margin-top:120px;
    }
}

.a-service-info.right{
    right:0;
    top:165px;
}

.a-service-info.left{
    left:0;
    top:165px;
}


@media screen and (max-width:1080px){
    .a-service-info.right{
        top:160px;
    }
    
    .a-service-info.left{
        top:160px;
    }
}


.a-service-info-head{
    text-align: center;
}

.a-sr-num{
    font-size:55px;
    font-weight:300;
    color:#b3b3b4;
    line-height:1;
    line-height:0.76;
}

.a-sr-title{
    font-size:33px;
    font-weight:600;
    letter-spacing:0.06em;
    position:relative;
    padding-bottom:20px;
    display:block;
    margin:0 auto;
    border-bottom:4px solid;
    margin-top:30px;
}

.a-sr1-title{
    width:195px;
}

.a-sr2-title{
    width:146px;
}

.a-sr3-title{
    width:330px;
}

.a-sr-title::after{
    content:"";
    height:4px;
    background-color:#000;
    position:absolute;
    bottom:-4px;
    right:0;
}

.a-sr1-title::after{
    width:115px;
}

.a-sr2-title::after{
    width:73px;
}

.a-sr3-title::after{
    width:113px;
}

@media screen and (max-width:1080px){
    .a-sr-num{
        font-size:48px;
    }
    
    .a-sr-title{
        font-size:28px;
        margin-top:25px;
        padding-bottom:15px;
    }
    
    .a-sr1-title{
        width:170px;
    }
    
    .a-sr2-title{
        width:140px;
    }
    
    .a-sr3-title{
        width:290px;
    }   
}

@media screen and (max-width:480px){
    .a-sr-num{
        font-size:35px;
    }
    
    .a-sr-title{
        font-size:23px;
        margin-top:15px;
    }
    
    .a-sr1-title{
        width:140px;
    }
    
    .a-sr2-title{
        width:120px;
    }
    
    .a-sr3-title{
        width:230px;
    }   

    .a-sr1-title::after{
        width:90px;
    }
    
    .a-sr2-title::after{
        width:60px;
    }
    
    .a-sr3-title::after{
        width:83px;
    }
}

.sr-category{
    display:flex;
    flex-wrap: wrap;
    width:290px;
    margin:0 auto;
    gap:10px;
    margin-top:38px;
}

.a-sr-category{
    background-color:#ECE5E3;
    width:140px;
    height:32px;
    font-size:14px;
    text-align: center;
    padding-top:6px;;
}

.a-sr-text{
    font-size:16px;
    line-height:1.87;
    margin-top:30px;
}

@media screen and (max-width:1080px){
    .sr-category{
        width:270px;
        gap:5px;
        margin-top:25px;
    }
    
    .a-sr-category{
        background-color:#ECE5E3;
        width:130px;
        height:32px;
    }
    
    .a-sr-text{
        font-size:16px;
        line-height:1.6;
        margin-top:15px;
    }
}

@media screen and (max-width:768px){
    .a-sr-text{
        margin-top:30px;
    }
}

#service .view-btn{
    margin-top:80px;
    width:fit-content;
    display:block;
}

#service .view-btn.right{
    margin-left:auto;
    margin-right:7%;
}

.service-view-sp{
    display:none;
}

@media screen and (max-width:768px){
    .service-view-pc{
        display:none;
    }

    .service-view-sp{
        display:inherit;
        display:block;
        width:fit-content;
        margin-left:auto;
        margin-right:10%;
    }
    
}
.a-sr-illust{
    position:absolute;
}

.a-sr1-illust{
    top:-116px;
    right:20px;
}
.a-sr1-illust img{
    width:174px;
}

.a-sr2-illust{
    top:-128px;
    left:50px;
}

.a-sr2-illust img{
    width:203px;
}

.a-sr3-illust{
    top:-103px;
    right:20px;
}
.a-sr3-illust img{
    width:172px;
}

@media screen and (max-width:1080px){
    .a-sr1-illust{
        top:-107px;
    }
    .a-sr1-illust img{
        width:160px;
    }
    
    .a-sr2-illust{
        top:-100px;
    }
    
    .a-sr2-illust img{
        width:160px;
    }
    
    .a-sr3-illust{
        top:-88px;
    }
    .a-sr3-illust img{
        width:150px;
    }
}

@media screen and (max-width:768px){
    .a-sr1-illust{
        top:-94px;
    }
    .a-sr1-illust img{
        width:140px;
    }
    
    .a-sr2-illust{
        top:-88px;
    }
    
    .a-sr2-illust img{
        width:140px;
    }
    
    .a-sr3-illust{
        top:-77px;
    }
    .a-sr3-illust img{
        width:130px;
    }
}

@media screen and (max-width:480px){
    .a-sr1-illust{
        top:-68px;
        right:10px;
    }
    .a-sr1-illust img{
        width:100px;
    }
    
    .a-sr2-illust{
        top:-63px;
        left:10px;
    }
    
    .a-sr2-illust img{
        width:100px;
    }
    
    .a-sr3-illust{
        top:-60px;
        right:10px;
    }
    .a-sr3-illust img{
        width:100px;
    }
}

/* company */

#company{
    width: 100%;
    background: linear-gradient(90deg,#393C3C 0%, #393C3C 50%, #fff 50%, #fff 100%);
    display: flex;
    justify-content: center;
    align-items: center;   
} 

.company-content{
    display:flex;
}

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

    #company{
        background: linear-gradient(90deg,#393C3C 0%, #393C3C 100%); 
    } 

    .company-content{
        display:block;
    }
}

.company-left{
    background-color:#393C3C;
    padding-right:16.67vw;
    padding-top:80px;
    padding-bottom:112px;
}


.company-text{
    margin-top:50px;
}

.company-text p{
    font-size:16px;
    width:390px;
    line-height:2.1;
    letter-spacing:-0.03em;
}

@media screen and (max-width:1080px){
    .company-left{
        padding-right:0vw;
        padding-top:70px;
        padding-bottom:100px;
        background-color:rgba(0,0,0,0);
    }
    
    
    .company-text{
        margin-top:50px;
    }
    
    .company-text p{
        font-size:16px;
        width:390px;
        width:100%;
        line-height:2.1;
        letter-spacing:-0.03em;
    }
}

@media screen and (max-width:480px){
    .company-left{
        padding-bottom:80px;
    }
}


#company .view-btn{
    margin-top:70px;
}

@media screen and (max-width:768px){
    #company .view-btn{
        margin-top:80px;
    }
}

@media screen and (max-width:480px){
    #company .view-btn{
        margin-top:100px;
    }
}

.view-more.white{
    color:#fff;
}

.company-img{
    position:relative;
}

.company-img .company-img1{
    max-width:950px;
    width:57vw;
    display:block;
    margin-top:160px;
    margin-left:-100px;
}

.company-img2 img{
    width:381px;
    width:24vw;
    max-width:400px;
}

.company-img img.fadeup {
    animation-name: fadedownAnime2;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay:.5s;
  }

  @keyframes fadedownAnime2 {
    0% {
        margin-top:100px;
        padding-bottom:60px;
    }
    100% {
      opacity: 1;
      margin-top:160;
      padding-bottom:0;
    }
  } 

.company-img2{
    position:absolute;
    bottom:-110px;
    bottom:-9vw;
    left:-250px;
    left:-13.8889vw;
}

.company-img-tb{
    display:none;
}

@media screen and (max-width:1080px){
    .company-img-tb{
        display:inherit;
        margin-top:-80px;
    }

    .company-img-pc{
        display:none;
    }

    .company-img .company-img1{
        width:80%;
        display:block;
        margin-left:auto;
    }
    
    .company-img2 img{
        width:32vw;
        min-width:160px;
    }
    
    .company-img2{
        bottom:-10%;
        left:0;
    }   
}

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

    .company-img .company-img1{
        margin-top:150px;
    }
    
    .company-img2{
        bottom:-100px;
    } 

    @keyframes fadedownAnime2 {
        0% {
            margin-top:100px;
            padding-bottom:50px;
        }
        100% {
          opacity: 1;
          margin-top:150;
          padding-bottom:0;
        }
      } 
}



  

/* faq */

#faq{
    padding-top:300px;
    position:relative;
    overflow: hidden;
    scroll-margin-top:-150px;
}

@media screen and (max-width:900px){
    #faq{
        padding-top:100px;
        scroll-margin-top:0; 
    }
}

@media screen and (max-width:480px){
    #faq{
        scroll-margin-top:-30px; 
    }
}


.faq-flex{
    display:flex;
    padding-bottom:440px;
    position:relative;
    gap:70px;
}


@media screen and (max-width:900px){
    .faq-flex{
        display:block;
        padding-bottom:260px;
    }
}

@media screen and (max-width:768px){
    .faq-flex{
        padding-bottom:220px;
    }
}

@media screen and (max-width:480px){
    .faq-flex{
        padding-bottom:150px;
    }
}

.faq-content{
    margin-top:-15px;
}

@media screen and (max-width:900px){
    .faq-content{
        margin-top:50px;
    }
}

/* faq-アコーディオン */
/* 全体の幅調整 */
.accordion {
    max-width: 810px;
    width:63vw;
    margin: 0 auto;
    }

    @media screen and (max-width:900px){
        .accordion {
            max-width: 810px;
            width:100%;
            }
    }

    @media screen and (min-width:1300px){
        .accordion {
            width: 810px;
            }
    }
    
    /* アコーディオンの見た目 */
    .accordion__item {
    border: 1px solid rgba(0,0,0,0.5);
    margin-top: 10px;
    cursor: pointer;
    }
    
    
    /* アコーディオンのタイトル文字 */
    .accordion__title {
    position: relative;
    padding: 35px 30px;
    padding-right:100px;
    font-weight: bold;
    cursor: pointer;
    background-color:#EDEDED;
    color:#000;
    font-size:16px;
    padding-left:85px;
    line-height:1.6;
    }

    .accordion__title::before{
    content:"";
    position:absolute;
    width:40px;
    height:40px;
    background-image:url(img/faq-q.png);
    background-size:contain;
    background-repeat: no-repeat;
    top:50%;
    transform: translateY(-50%);
    left:30px;;
    }
    
    
    /* 開くアイコン */
    .accordion__title::after {
    content:"";
    position: absolute;
    width:40px;
    height:40px;
    background-image:url(img/acc-btn.png);
    background-size:contain;
    background-repeat: no-repeat;
    top:50%;
    transform: translateY(-50%) rotate(180deg);
    transition:.3s;
    right:30px;
    }

    
    @media screen and (max-width:850px){
        .accordion__title {
            position: relative;
            padding: 25px 20px;
            padding-right:80px;
            font-weight: bold;
            cursor: pointer;
            background-color:#EDEDED;
            color:#000;
            font-size:16px;
            padding-left:80px;
            line-height:1.6;
            }
        
            .accordion__title::before{
            width:35px;
            height:35px;
            top:25px;;
            transform: translateY(0);
            }
            
            
            /* 開くアイコン */
            .accordion__title::after {
            width:35px;
            height:35px;
            right:30px;
            top:25px;
            transform: translateY(0) rotate(180deg);
            }
    }

    
    .accordion__item.is-active .accordion__title::after {
    transform: translateY(-50%) rotate(0deg);
    transition:.3s;
    }

    @media screen and (max-width:850px){
        .accordion__item.is-active .accordion__title::after {
            transform: translateY(0px) rotate(0deg);
            }
    }
    
    
    /* アコーディオンのコンテンツ（中身） */
    .accordion__content {
    padding: 30px;;
    display: none;
    cursor: pointer;
    padding-left:85px;
    position:relative;
    font-size:16px;
    line-height:1.875;
    }



    .accordion__content::before{
    content:"";
    position:absolute;
    width:40px;
    height:40px;
    background-image:url(img/faq-a.png);
    background-size:contain;
    background-repeat: no-repeat;
    top:20px;
    left:30px;
    }

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

        .accordion__content {
            padding: 20px;
            padding-left:80px;
            }
        .accordion__content::before{
            width:35px;
            height:35px;
            }
    }
    
    .accordion__content.is-open {
    display: block;
    }

    .faq-back{
        bottom:70px;
    }

    @media screen and (max-width:480px){
        .faq-back{
            bottom:40px;
        }
    }

    .faq-illust{
        max-width:664px;
        position:absolute;
        bottom:300px;
        left:-10px;
        z-index:-1;
    }

    .faq-illust img{
        max-width:702px;
        width:100%;
        display:block;
        margin:0 auto;
    }

    @media screen and (max-width:900px){
        .faq-illust{
            max-width:664px;
            width:100%;
            position:static;
            margin:0 auto;
           margin-top:30px;
        }
    }

    /* contact */

    #contact{
        background-image:url(img/contact-back.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        background-position:center;
        padding-bottom:230px;
        position:relative;
    }

    @media screen and (max-width:768px){
        #contact{
            padding-bottom:490px;
        }
    }

    .pt-10{
        padding-top:100px;
    }

    .center{
        text-align: center;
    }

    .a-ct-btn{
        color:#000;
        display:block;
        transition:.3s;
        width:fit-content;
        background-color:rgba(300,300,300,0.75);
        max-width:340px;
        max-height:310px;
        box-sizing: border-box;
        padding:30px;
    }

    .a-ct-btn img{
        width:100%;
    }

    .a-ct-btn:hover{
        box-shadow: 0px 5px 10px 0px #000;
        margin-top:-10px;
        margin-bottom:10px;
    }

    @media screen and (max-width:768px){
        .a-ct-btn:hover{
            margin-top:20px;
        }
    }

    .contact-wrap{
        display:flex;
        justify-content: space-between;
        margin-top:80px;
        gap:10px;
    }

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

        .a-ct-btn{
            margin:0 auto;
            max-width:500px;
            max-height:500px;
            box-sizing: border-box;
            padding:15px 40px;
            margin-top:20px;
            margin-bottom:10px;
        }

        .contact-wrap{
            display:block;
            margin-top:50px;
        }
    }

    @media screen and (max-width:570px){
        .a-ct-btn{
            height:30vw;;
        }
    }

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

        .a-ct-btn{
            padding:20px 30px;
            height:33vw;
        }

        .a-ct-btn + .a-ct-btn{
            margin-top:20px;
        }
        .contact-wrap{
            display:block;
            margin-top:30px;
        }
    }

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

        .a-ct-btn{
            padding:20px 20px; 
            height:35vw;
        }
    }

    .a-ct-bt-btn{
        color:#000;
        transition:.3s; 
    }

    .a-ct-bt-btn:hover{
        opacity:0.6; 
    } 


    .a-ct-bt-img1 img{
        width:38px;
        display:block;
        margin:0 auto;
    }

    .a-ct-bt-img2 img{
        width:49px;
        display:block;
        margin:0 auto;
    }

    .a-ct-bt-img3 img{
        width:48px;
        display:block;
        margin:0 auto;
    }

    .a-ct-bt-title{
        font-size:18px;
        font-weight:600;
        letter-spacing:0.06em;
        margin-top:15px;
    }

    .a-ct-bt-info{
        font-size:30px;
        margin-top:15px;
    }

    .a-ct-bt-info.mail{
        font-size:21px;
        letter-spacing:0.02em;
    }

    .a-ct-bt-detail{
        font-size:14px;
        line-height:1.5;
        margin-top:13px;
    }

    @media screen and (max-width:1080px){
        .a-ct-bt-img1 img{
            width:35px;
        }
    
        .a-ct-bt-img2 img{
            width:44px;
        }
    
        .a-ct-bt-img3 img{
            width:43px;
        }
    
        .a-ct-bt-title{
            font-size:16px;
            letter-spacing:0.04em;
            margin-top:10px;
        }
    
        .a-ct-bt-info{
            font-size:25px;
            margin-top:10px;
        }
    
        .a-ct-bt-info.mail{
            font-size:18px;
        }
    
        .a-ct-bt-detail{
            margin-top:10px;
        }
    }

    @media screen and (max-width:768px){
        .a-ct-bt-title,
        .a-ct-bt-info,
        .a-ct-bt-detail{
            text-align: center
        }

        .a-ct-bt-img{
            width:38px;
            margin:0 auto;
        }

        .a-ct-bt-right{
            width:220px;
            margin:0 auto;
            margin-top:15px;
        }

        .a-ct-bt-title{
            font-size:18px;
        }
    
        .a-ct-bt-info{
            font-size:28px;
        }
    
        .a-ct-bt-info.mail{
            font-size:20px;
        }
    }

    @media screen and (max-width:480px){
        .a-ct-bt-img1 img{
            width:30px;
        }
    
        .a-ct-bt-img2 img{
            width:35px;
        }
    
        .a-ct-bt-img3 img{
            width:35px;
        }

        .a-ct-bt-img{
            width:35px;
        }
    
        .a-ct-bt-info{
            font-size:25px;
            margin-top:10px; 
        }
    
        .a-ct-bt-info.mail{
            font-size:18px;
        }
    
        .a-ct-bt-detail{
            margin-top:14px;
        }
    }
    .contact-bottom{
        background-color:#fff;
        max-width:880px;
        width:90%;
        height:260px;
        position:absolute;
        padding:40px 45px;
        left:50%;
        transform: translateX(-50%);
        bottom:-135px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    }

    .contact-bottom-content{
        display:flex;
        align-items: center;
        justify-content: space-between;
    }

    @media screen and (max-width:768px){
        .contact-bottom-content{
            display:block;
        }
    }

    .a-ct-bt-btn{
        position:relative;
        width:225px;
    }

    .a-ct-bt-btn + .a-ct-bt-btn:before{
        height:180px;
        width:1px;
        background-color:rgba(0,0,0,0.5);
        content:"";
        position:absolute;
        left:-30px;
        top:50%;
        transform: translateY(-50%);
    }

    @media screen and (max-width:1080px){
        .contact-bottom{
            background-color:#fff;
            width:700px;
            height:220px;
            min-width:0;
            padding:30px 20px;
        }
    
        .a-ct-bt-btn{
            width:200px;
        }

        .a-ct-bt-btn + .a-ct-bt-btn:before{
            height:160px;
            left:-14px;
        }
    
    }

    @media screen and (max-width:768px){
        .contact-bottom{
            max-width:380px;
            height:fit-content;
        }
    
        .a-ct-bt-btn{
            width:90%;
            display:block;
            padding:20px;
            margin:0 auto;
        }

        .a-ct-bt-btn + .a-ct-bt-btn:before{
            height:160px;
            left:-14px;
            height:1px;
            width:90%;
            top:0;
            left:50%;
            transform: translate(-50%,0%);
        }

    
    }

    @media screen and (max-width:480px){
        .contact-bottom{
            max-width:380px;
            width:90%;
        }
    
        .a-ct-bt-btn{
            width:90%;
            display:block;
            padding:20px 10px;
        }

        .a-ct-bottom{
            text-align: center;
        }
    
    }

    /* footer */
    footer{
        background-color:#d76717;
        padding-top:215px;
    }

    @media screen and (max-width:768px){
        footer{
            padding-top:170px;
        }
    }

    .footer-content{
        max-width:1080px;
        width:90%;
        margin:0 auto;
        display:flex;
        justify-content: space-between;
        align-items: end;
        padding-bottom:65px;
    }

    @media screen and (max-width:768px){
        .footer-content{
            display:block;
        }
    }

    .footer-logo img{
        width:220px;
    }

    .footer-info{
        margin-top:50px;
    }

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

        .footer-logo{
            margin-top:20px;
        }

        .footer-logo img{
            display:block;
            margin:0 auto;
        }
    
        .footer-info{
            margin:0 auto;
            margin-top:50px;
            width:fit-content;
        }
    }

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


        .footer-logo img{
            width:170px;
        }
    
    }

    .footer-info p{
        color:#fff;
        font-size:16px;
        letter-spacing:0.04em;
        line-height:1.75;
    }

    @media screen and (max-width:480px){
        .footer-info p{
            font-size:14px;
        }
    }

    .footer-info-title{
        padding-right:11px;
        position:relative;
    }

    .footer-info-title::after{
        content:"";
        height:16px;
        width:1px;
        background-color:#fff;
        position:absolute;
        right:0px;
        top:50%;
        transform:translateY(-50%);
    }

    .footer-info-add{
        padding-left:11px;
    }

    .footer-left{
        width:100%;
    }

    .footer-right{
        max-width:353px;
        width:100%;
    }
    
    @media screen and (max-width:1080px){
        .footer-right{
            max-width:310px;
            
        }
    }

    @media screen and (max-width:768px){
        .footer-right{
            width:90%;
            max-width:760px;
            margin:0 auto;
            margin-top:50px;
        }
    }
    .footer-nav ul{
        display:flex;
        width:100%;
        justify-content: space-between;
    }

    .footer-nav-item a{
        color:#fff;
        font-size:18px;
        letter-spacing:0.04em;
        transition:.3s;
    }

    .footer-nav-item a:hover{
        opacity:0.7;
    }

    .footer-nav-item{
        margin-top:15px;
    }

    @media screen and (max-width:768px){
    
        .footer-nav ul{
            gap:10px;
            display:block;
        }

        .a-line{
            display:flex;
            gap:15px;
        }
    
        .footer-nav-item a{
            font-size:16px;
        }
    }

    @media screen and (max-width:550px){
        .footer-right{
            display:none;
        }
    }

    .copyright p{
        text-align: center;
        font-size:16px;
        letter-spacing:0.04em;
        color:#fff;
        position:relative;
        display:table-cell;
        vertical-align: middle;
    }

    .copyright{
        width:100%;
        background-color:#3E3A39;
        height:75px;
        display:table;
        position:relative;
    }

    @media screen and (max-width:480px){
        .copyright p{
            font-size:14px;
        }
    
        .copyright{
            height:50px;
        }
    }