@charset "UTF-8";

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


/*  共通  */


/*==================================================
ページトップリンク
===================================*/
/* アイコン形状 */
.topicon{
  width: 90%;
  height: auto;
}



/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 5em;
  bottom: 3em;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 1s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  bottom: -3em;
  animation: DownAnime 1s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(-50px);
  }
  to {
    opacity: 0;
  transform: translateY(100px);
  }
}



/*  ヘッダー */
.header{
}

.logo{
  width: 26%;
  margin: 0 0 5em 8em;
  position: absolute;
}

.FAQ{
  width: 10%;
}

.img_phone {
  width: 2.5%;
  height: auto;
  margin: -1px 5px 0 0; /* 右余白を10pxに設定 */
}

.phonenumber{
  font-size: 38pt;
  /* margin-bottom: 1em; */
  
  margin-bottom: 0.01em;
  display: inline-block;
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.phonenumber a:hover{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);  /*
  cursor: pointer;
	transform: scale(1.5);
  */
}

.head_tel{
  text-align: right;
  height: auto;
  margin: 3em 2em 3em 0;
}

/* ナビゲーション */
/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin: 5em 0 1em 0;
    list-style: none;
}

ul{
  justify-content: center;
}


.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: rgb(75, 74, 74);
    font-size: 18pt;
    font-family: "a-otf-midashi-go-mb31-pr6n","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",sans-serif;
    font-weight: 500;
  }

.gnavi li{
    margin-bottom:20px;
}


/*==================================================
　5-3-5 左から右に背景が伸びる
===================================*/

/*背景の設定*/

.gnavi li a{
    /*背景色の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li a::after {
  content: '';
    /*絶対配置で線の位置を決める*/
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
    /*背景の形状*/
  width: 0;
  height:100%;
  background:#88ce59;
    /*アニメーションの指定*/
  transition:all .5s;
  opacity: 0;/*はじめは透過0*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    /*背景の形状*/
  width: 100%;/*横幅を伸ばす*/
  opacity: 1;/*不透明に*/
}

.gnavi li.current a,
.gnavi li a:hover{
    color: #fff;
}

/* メイン画像 */

.topsasebo{
  margin-bottom: 90px;
}

.topsaseboimg_sp{
  display: none;
}

.topsaseboimg_pc{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 50% 50%;
}

.sp{
  display: none;
}

.toptext{
  position: absolute;
  width: 100%;
  height: auto;
}

.anmtext1{
  margin: 11em 0em 4em 2em;
  width: 65%;
  height: auto;
}

.anmtext2{
  margin: 18em 0em 0em 24em;
  width: 65%;
  height: auto;
}

/* 佐世保にお住いのみなさん！ */

.fadetop{
  animation: SlideIn 1.6s;
  animation-fill-mode:forwards;
  }
  
  @keyframes SlideIn {
    from {
      opacity: 0;
      transform: translateX(-64px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }.anmtext1{
  animation-delay: 1s;
  opacity: 0;
}

.anmtext2{
  animation-delay: 1.5s;
  opacity: 0;
}


/*トップメイン画像下 fadeUp */

.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeUpTrigger{
      opacity: 0;
  }
  
  .time1{
       animation-delay: 1s;/*この数字を指定したい遅延時間に変更*/
  }

  .time2{
    animation-delay: 3s;
}
.time3{
    animation-delay: 1s;
}

.main_top{
  text-align: center;
  margin-bottom: 90px;
}

.fukidashi{
  font-size: 37pt;
  color:rgb(60, 175, 37);
  font-weight: lighter;
}

.box{
  text-align: center;
}


.catchcopy_head{
  display: flex;
  justify-content: center;
  max-width: 100vw;
}

.catchcopy{
  width: 22%;
  height: auto;
}
.cleanup{
  width: 17%;
}



/* メインカテゴリ */
.wrapperpc{
  margin: 0 20em;
}

.space{
  margin-bottom: 50px;
}

.contants_unit{
  width: 100%;
  height: auto;
}

.contants_title{
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.iconimg{
  width: 8%;
  height: auto;
  margin-right: 10px;
}

.text{
  margin-top: 40px;
}

.Text-Span{
  font-size: 39pt;
}

.contants{
  width: 80%;
  height: 100%;
  margin: 0 auto;
}

.ctn_img{
  width: 45%;
  margin: 0 auto;
  padding-left: calc(1em + 2em);
  padding-right: 20px;
  display: flex;
  float: left;
  margin-bottom: 2em;
}

.cts_text{
  margin-top: 1em;
  font-size: 30pt;
  line-height: 62px;
  list-style: inside;
  width: 100%;
}

.cts_text li{
  font-size: calc(30pt - 9pt);
}


.kwsk{
  clear: left;
  text-align: center;
}

.Text-Span {
  position: relative;
  z-index: 1;
  bottom: 10px;
  font-size: 33pt;
}
.Text-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 7px;
  background: #fff;
  z-index: -1;
  transition: all 1s;

}
.Text-Span.isActive:after {
  width: 100%;
}

.kwskimg{
  width: 30%;
  height: auto;
  transition:transform 0.3s;
  }

.kwskimg:hover{
  transform:scale(1.1);
  filter: brightness(140%);
  transition : 0.3s;
}

/*
nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  speace: space-evenly;
}

nav ul li a{
  display: block;
  text-decoration: none;
  color: #666;
  padding:10px;
  transition:all 0.3s;
}

nav ul li.current a,
nav ul li a:hover{
  color:rgb(248, 0, 0); 
}

li{
  margin: 20px;
}

.btn_nav::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #006699;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.btn_nav:hover::after {
  transform: scale(1, 1);
}
*/
main{
  margin-bottom: 16em;
}
/*---- フッター ---*/


#tel{
  font-size: 40pt;
  color: rgb(60, 175, 37);
  font-weight: bold;
  margin: 46px 0 0 10px;
  line-height: 80px;
  
}

.footer_tel_unit{
  display: flex;
  justify-content: center;
  max-width: 100vw;
}

.ft_tel{
  text-align: center;
}

.ft_tel_img{
  width: 60%;
  height: auto;
}

/*
.footer_tel{
  text-align: center;
  width: 100%;
}

.ft_fukidashi{
  width: 22%;
  text-align: center;
  float: left;
  position: absolute;
  left: 22em;
  bottom: 2em;
}
*/

.footer_text{
  font-size: 18pt;
  color: rgb(99, 99, 99);
  margin: 30px 0 10px 0;
}
.footer_text2{
  font-size: 12pt;
  color: rgb(99, 99, 99);
}

/* googlemap 以降 */

.footer_unit{
  background-color: #67b339;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;

}

.sitemap{
  color: #0d9700;
  width: 20%;
  padding: 2em;
}

.sitemap_p{
  color: rgb(32, 114, 0);
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.footnav{
  display: flex;
  justify-content: space-around;
}


.item{
  margin: 15px 0;
}

.item a:link{
  color: #fff;
}

.item a:visited{
  color: #fff;
}

.item a:hover{
  color: rgba(255, 255, 255, 0.486);
  transition : 0.5s;
}

.item a:active{
  color: #fff;
}

.info{
  width: 30%;
  padding: 2em;
  justify-content: flex-start;
}

.company{
  color: #fff;
  font-size: 17pt;
  line-height: 33px;

}

.info_h1{
  font-size: 20pt;
  border-bottom: solid 2px #fff;
  text-align: center;
  margin-bottom: 10px;
}

.copy{
  width: 100%;
  height: auto;
  padding: 40px 0;
  text-align: center;
  font-size: 15pt;
  color: #fff;
  background-color:rgb(8, 39, 3)
}


/*    子ページ　PC版     */

.border_pc{
  border-bottom: solid 4px #85e44a;
  margin-bottom: 3rem;

}

.sub_main{
  margin-bottom: 10px;
  position: relative;
}

.jump {
  text-align: center;
}

/*遺品整理*/
.coment{ 
  position: absolute;
  text-align: center;
  font-size: 22pt;
  color:#646464;
  line-height: 45px;
  top: 18rem;
  left: 21rem;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.63);
}

 /*産業廃棄物、建築解体*/
.coment_dis{
  position: absolute;
  text-align: center;
  font-size: 22pt;
  color:#646464;
  line-height: 45px;
  top: 18rem;
  left: 25rem;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.63);
}

/*草刈*/
.coment_mow{ 
  position: absolute;
  text-align: center;
  font-size: 22pt;
  color:#646464;
  line-height: 45px;
  top: 18rem;
  left: 37rem;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.63);
}

.sub_tell{
  text-align: center;
  font-size: 40pt;
  color: rgb(60, 175, 37);
  margin: 30pxs;
  font-weight: bold;
  line-height: 70px;
}

}





/*================== sp =====================*/


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


/* ----共通---- */
#page-top{
  display: none;
}

.pc{
  display: none;
}

.border_pc{
  display: none;
}


body{
  max-width: 100%
}

/*    ヘッダー   */

/*   TEL  */
header{
  margin: 10px 0 0 0;
  /*
  border-bottom: solid 5px rgb(45, 158, 0);
  */
}


.logo{
  display: block;
  width: 15em;
  height: auto;
  margin-top: 13px;
  
}

.img_phone{
  width: 1.8em;
  height: auto;
  margin: -1px -10px 0 0;
}

/* .phonenumber{
  position: absolute;
  margin-top: 5px;
  left: 6em;
  font-size: 14pt;
} */


/* .head_tel{
  display: flex;
} */

/*========= 2024.1030 山口追加・編集 ===============*/
.phonenumber {
  position: static; /* 絶対配置を解除 */
  margin-top: 5px;
  margin-left: 1em; /* 横幅をずらす */
  font-size: 14pt; /* テキストサイズを調整 */
}

.head_tel {
  display: flex;
  flex-direction: column; /* 2行表示にする */
    gap: 2px; /* 電話番号間にスペースを追加 */
  align-items: flex-start; /* 左寄せに調整 */
}



/*========= ここまで ===============*/


.FAQ{
  width: 5.5em;
  height: 1.6em;
}

.slider{
  width: 100%;
  margin: 10px 0px;

}

.main_img{
  width: 100%;
}

header{
  margin-bottom: 2em;
}

/*========= ナビゲーションのためのCSS ===============*/
/*wrapper{
  width: 90%;
  margin: 0 15px;
  left: 5px;
}
*/

.fadetop{
  animation: SlideIn 1.6s;
  animation-fill-mode:forwards;
  }
  
  @keyframes SlideIn {
    from {
      opacity: 0;
      transform: translateX(-64px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }.anmtext1{
  animation-delay: 1s;
  opacity: 0;
}

.anmtext2{
  animation-delay: 1.5s;
  opacity: 0;
}



/*==================================================
ふわっとあらわれるアニメーション
===================================*/


/* fadeUp */

.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeUpTrigger{
      opacity: 0;
  }
  
  .time1{
       animation-delay: 0.8s;/*この数字を指定したい遅延時間に変更*/
  }

  .time2{
    animation-delay: 3s;
}
.time3{
    animation-delay: 3.5s;
}



#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top:0;
    right: -120%;
    width:68%;
    height: 100%;/*ナビの高さ*/
    background-color: rgb(109, 192, 0);
    /*動き*/
  transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 45vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:70%;
    left:32%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav .nav-item{
  list-style: none;
    text-align: center;
    right: -10%;

}

#g-nav li a{
  color: rgb(255, 255, 255);
  text-decoration: none;
  padding:0.2em;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-size: 16pt;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1 {
    position: fixed;
    z-index: 9999;
    top: 1em;
    right: 1em;
    cursor: pointer;
    width: 4.5em;
    height: 4.5em;
}

.btn_color{
    background-color: rgb(109, 192, 0);
}
  
/*×に変化*/  
.openbtn1 span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 21%;
    height: 7px;
    border-radius: -5px;
    background-color: rgb(255, 255, 255);
    width: 60%;
}

.openbtn1 span:nth-of-type(1) {
  top:1em; 
}

.openbtn1 span:nth-of-type(2) {
  top:2em;
}

.openbtn1 span:nth-of-type(3) {
  top:3em;
}

.openbtn1.active span:nth-of-type(1) {
  top: 1.5em;
  left: 1em;
  transform: translateY(6px) rotate(-45deg);
  width: 2.5em;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
  top: 2.3em;
  left: 1em;
  transform: translateY(-6px) rotate(45deg);
  width: 2.5em;
}


/*---  ヘッダーメイン画像とテキスト  ---*/

p{
  font-size: 20pt;
}

.topsasebo{
  max-width: 100%;
  height: auto;
}

.topsaseboimg_pc{
  display: none;
}

.topsaseboimg_sp{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 150px 150px;
}

.anmtext1{
  width: 92%;
  position: absolute;
  top: 8em;
  margin: 0 10px;
}

.anmtext2{
  width: 90%;
  position: absolute;
  top: 10.5em;
  margin: 0 10px;
}

/* こんなお困りごとございませんか～エコシティにお任せくださいイラストまで */
.sp_wrapper{
  margin: 0 15px;
}

.catch_sp p{
  text-align: center;
}

.cleanup_sp{
  width: 56%;
  margin: -16px 0 0 9rem;
}




/*

.anmtext1{
  animation: fadeup 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;

}

.anmtext2{
  animation: fadeup 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 0.5s;
}
 
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


*/


/*
.anim-box{ 
  font-size:40px;
  opacity:0;
  animation-name: sample01; 
  animation-duration: 5s; 
  animation-iteration-count:1;
  animation-fill-mode: forwards; 
}
@keyframes sample01 {
0% {
  opacity: 0;
  color:#000;
}
90% {
 opacity: 1;
 color:#000;
}
 100% {
  opacity: 1;
  color:#00f;
} 
}
*/


/*---- index main ----*/

/*--- コンテンツタイトルアンダーライン ---*/
.Text-Span {
  position: relative;
  z-index: 1;
  top: 26px;
  font-size: 20pt;
}
.Text-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 7px;
  background: #fff;
  z-index: -1;
  transition: all 1s;

}
.Text-Span.isActive:after {
  width: 100%;
}


.main_top{
  width: 100%;
  margin-top: 20px;
  text-align: center;

}


.fukidashi{
  text-align: center;
  font-size: 100%;
  color: #15c705;
  margin: 50px 0 5px 0;
}

.img_1{
  width: 100%;
  height: auto;
}

.catch_unit{
  margin: 0 auto;
}

.catchcopy_head{
  width: 100%;
}

.catchcopy{
  width: 80%;
  height: auto;
}

.cleanup{
  width: 100%;
}

body{
  margin: 0;
}

/*---- main container -----*/
.contants_unit{
  width: 100%;
  padding-bottom: 30px;
}

.contants_title{
  display: flex;
  justify-content: center;
  font-size: 20pt;
}

.contants{
  width: 75%;
  text-align: left;
  margin: 0 auto;
  font-size: 20pt;
}
.ctn_img{
  width: 100%;
  border-radius: 30px;
}

.kwskimg{
  width: 100%;
}

/*
.contants{
  width: 70%;
  height: auto;
  margin: 0 auto;
}
*/

.iconimg{
  width: 15%;
  height: 10%;
  margin: 15px;
}
  

.cts_text{
  font-size: 17pt;
  margin: 20px 0 20px 50px;
}

li{
  list-style: disc;
  line-height: 1.5em;
}



  /*   フッター  */

#tel{
  font-size: 20pt;
  text-align: center;
  color: rgb(60, 175, 37);
  margin: 15px 0;
  font-weight: bold;
}

.ft_tel_img{
  width: 90%;
  margin: 0 17px;
}

.footer_tel{
  text-align: center;
  width: 100%;
}

.ft_fukidashi{
  width: 55%;
  text-align: center;
  margin-top: 3rem;
}

.footer_text{
  font-size: 18pt;
  color: rgb(99, 99, 99);
  margin: 30px 0 10px 0;
}
.footer_text2{
  font-size: 12pt;
  color: rgb(99, 99, 99);
}

.footer{
  width: 100%;
}

.footer_unit{
  background-color: #67b339;
}

.sitemap{
  padding: 2em;
}

.list_right li{
  list-style: none;
  margin: 20px 0;
  border-bottom: 1px solid #fff;
}

.list_left li{
  list-style: none;
  margin: 20px 0;
  border-bottom: 1px solid #fff;
}
.item a:link{
  color: #fff;
}

.item a:visited{
  color: #fff;
}


.item a:active{
  color: #fff;
}


.info{
  background-color: #417c1c;
  padding-top: 1em;
}

.company{
  color: #fff;
  font-size: 17pt;
  line-height: 33px;
  padding: 0 20px;

}

.info_h1{
  margin: 0 auto;
  font-size: 17pt;
  border-bottom: solid 2px #fff;
  margin-bottom: 10px;
  width: 80%;
}

.company p{
  font-size: 14pt;
}

.copy{
  width: 100%;
  height: auto;
  padding: 12px 0;
  text-align: center;
  font-size: 15pt;
  color: #fff;
  background-color:rgb(8, 39, 3)
}

/*----子ページ----*/

.sp_sub img{
  max-width: 100vw;
}

.coment {
  position: absolute;
  text-align: center;
  font-size: 11pt;
  color:#646464;
  line-height: 24px;
  top: 12rem;
  left: 1rem;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.63);
}

.coment_dis{
  position: absolute;
  text-align: center;
  font-size: 9pt;
  color:#646464;
  line-height: 16px;
  top: 12rem;
  left: 2rem;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.63);
}

.coment_mow{
  position: absolute;
  text-align: center;
  font-size: 9pt;
  color:#646464;
  line-height: 16px;
  top: 12rem;
  left: 3rem;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.63);
}


.sub_tell{
  text-align: center;
  font-size: 40pt;
  color: rgb(60, 175, 37);
  margin: 30pxs;
  font-weight: bold;
  line-height: 40px;

}
  }