@charset "utf-8";





/* リセット */
html{
  scroll-behavior: smooth;
  /* color-scheme: dark; */
}
*{
  padding: 0;
  margin: 0;
}
body{
  font-family: sans-serif;
  line-height: 1;
  box-sizing: border-box;
  background: #39eefa;
  overflow: scroll;
  /* position: relative; */
}
ul{
  list-style: none;
}
a{
  display: block;
  text-decoration: none;
  color: inherit;
}

.container{
  display: flex;
  justify-content: space-around;
  max-width: 1020px;
  margin-inline: auto;
  padding-inline: 10px;
}

header{
  background: url(../img/keyvisual.png) no-repeat center/cover;
  /* width: 100%; */
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  overflow: hidden;
  position: relative;
  /* animation: animationZoom1 5s ease-in-out forwards; */

  animation: header-fadein 10s ease-in-out 1s forwards,ZoomInout 5s linear 7s forwards;
}
@keyframes header-fadein{

  0%{
    transform: scale(1.3);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ZoomInOut{
  100%{
    transform: scale(1.1);
  }
}
header::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

/* ヘッダー */
#headerTop{
  width: 100%;
  height: 120px;
  /* margin-bottom: 20px; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000000;
  transition: background-color 0.3s ease;
}

#headerTop .container{
  background: transparent;
  /* justify-content: space-around; */
  justify-content: center;
  align-items: center;
  color: #fff;
  padding-block: 10px;
  gap: 20px;
}

#headerTop.about-headerTop {
  background-color: rgb(45, 190, 200, 0.5);
}

#headerTop.works-headerTop {
  background-color: transparent;
}

#headerTop.planning-headerTop {
  background-color: rgb(45, 190, 200, 0.5);
}

#headerTop.message-headerTop {
  background-color: transparent;
}

#headerTop.access-headerTop {
  background-color: rgba(45, 190, 200, 0.5);
}

#headerTop.contact-headerTop {
  background-color: transparent;
}



h1{
  /* font-size: 1em; */
  /* font-family: Arial, Helvetica, sans-serif; */
  animation: h1-spin 5s linear 2s forwards;
}
@keyframes h1-spin{
  100%{rotate: y 1turn;}
}
h1 img{
  width: 250px;
  /* height: 50px; */
}


.pcNav ul{
  display: flex;
  gap: 20px;

  & li{letter-spacing: 1px;}
  & a{
    text-shadow: #000 1px 1px 1px;
    font-weight: bold;
  }
  & a:hover{
    color: #3670db;
    transition: 0.5s;
  }
  & a::after{
    content: "";
    display: block;
    height: 3px;
    background: #3670db;
    margin-top: 2px;
    scale: 0;
    transform-origin: left;
    transition: 0.5s;
  }
  & a:hover::after{scale: 1;}
}

.sns{
  display: none;
  text-align: right;
  width: 100%;
  position: fixed;
  top: 80px;
  z-index: 10000;
  & .container{justify-content: flex-end;}
  & a{display: inline; position: relative;}
  & a + a{margin-left: 10px;}
  & i{
  font-size: 50px;
  color: #999;
  transition: 0.5s;
  }
  & a:nth-child(3)::after{
    content: "";
    display: block;
    background: transparent;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 5px;
    left: 2px;
    z-index: -1;
    transition: 0.5s;
  }
  & a:nth-child(3):hover::after{
    background: #fff;
    rotate:1turn;
    scale: 1.5;
    }
  & a:nth-child(4) i{
    font-size: 44px;
    vertical-align: top;
  }
  & a:hover i{
  background: #fff;
  border-radius: 8px;
  line-height: 40px;
  width: 40px;
  scale:1.5;
  rotate:1turn;
  }
  & a:nth-child(1):hover i{color: #2e3192;}
  & a:nth-child(2):hover i{color: #000;}
  & a:nth-child(3):hover i{
  background:
  radial-gradient(circle at 30% 107%,
   #fdf497 0%,
   #fdf497 5%,
   #fd5949 45%,
   #d6249f 60%,
   #285AEB 90%);
  color: transparent;
  line-height: 1;
  width: fit-content;
  /* ベンダープレフィックス */
  -webkit-background-clip:text;
  background-clip:text;
  }
  & a:nth-child(4):hover i{
    color: #06c755;
  }
}

.start{
  display: none;
  text-align: center;
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
  width: 200px;
  line-height: 50px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20vh;

  & a{
    background: #2c09c7;
    border-radius: 5px;
    transition: 0.5s;
  }
  & a:hover{
    background: #0abd5b;
    color: #fdf497;
  }
  & a:hover i{
    animation: plane-Takeoff 2s linear 1s;
  }
}
@keyframes plane-Takeoff{
  50%{
    scale: 2.5;
    rotate: -15deg;
  }
  100%{
    scale: 2.5;
    rotate: -45deg;
    translate: 500px -250px;
  }
}

.arrowDown{
  display: none;
  width: fit-content;
  height: 1em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10vh;
  margin: auto;
  animation: arrow-Translate 2s linear infinite;
}
@keyframes arrow-Translate{
  25%{translate: 0 25px;}
  50%{translate: 0 0;}
  75%{translate: 0 -25px;}
  100%{translate: 0 0;}
}
.arrowDown i{
  font-size: 50px;
  color: #1f428b;
}



.logo{
  text-align: center;
  height: 2.6em;
  margin: auto;
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: logo-anime 3s linear forwards;
}
.logo img{
  width: 300px;
}
@keyframes logo-anime{
  0%{
    opacity: 0;
    translate: 0;
    scale: 0;
  }
  10%{
    opacity: 0.5;
    translate: 0;
    scale: 0 1;
  }
  50%{
    opacity: 0.8;
    translate: 0;
    scale: 1 1;
  }
  60%{
    opacity: 1;
    translate: 0;
    scale: 1;
  }
  80%{
    translate: -28% -640%;
    scale:1;
  }
  100%{
    translate: -28% -700%;
    scale:1;
    opacity: 0;
  }
}
/* アニメーション------------------- */
.opAnim .countTxt{
  font-weight: bold;
  position: absolute;
  top: 470px;
  left: 0;
  right: 0;
  margin: auto;
}
.opAnim .p-bar{
  position: absolute;
  height: 20px;
  width: 100vw;
  bottom: 30%;
  left: 0;
  right: 0;
  margin: auto;
  border: 2px solid #fff;
  animation: bar-fadein 4s linear forwards;
}
@keyframes bar-fadein{
100%{opacity: 0;}
}
.opAnim .p-bar::after{
  display: inline-block;
  content: "";
  height: 20px;
  width: 100vw;
  background: #fff;
  scale: 0 1;
  transform-origin: left;
  animation: progress 2s linear forwards;
}
@keyframes progress{
  25%{
    scale: 1;
    opacity: 1;
  }
  100%{
    scale: 1;
    opacity: 0;
  }
}
.countTxt{
  text-align: center;
  color: #fff;
  animation: progress 2s linear forwards;
}

/* キャッチコピー */
.catchCopy{
  text-align: left;
  /* text-align: center; */
  color: #fff;
  font-size: 6em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  line-height: 1;
  width: fit-content;
  height: 2em;
  margin: auto;
  /* padding-inline: 10px; */
  position: absolute;
  inset: -150px 0 0 0;
  z-index: 10000000;
  opacity: 0;
  animation: copy-fadeIn 2s linear forwards 5s;
}
.catchCopy::after{
  content: "ＦＰと考える\Aすてきな住まい選びを。";
  white-space: pre;
  display: block;
  font-family: "Shippori Mincho B1", serif;
  font-size: 40px;
  line-height: 1.4;
  width: fit-content;
  margin-top: 0.8em;
  }
@keyframes copy-fadeIn{
  50%{
    /* scale: 0.5 0.5; */
    opacity: 1;
  }
  75%{
    scale: 1 1;
    opacity: 1;
  }
  100%{
    /* scale: 2 2; */
    opacity: 1;
  }
}

/* スマホメニュー */
.spNav{
  display: none;
}

/* 各コンテンツ共通 */
.title-bg{
  background:
  url(../img/icon.png) no-repeat;
  background-size: 120px;
  height: 120px;
  /* margin: 0 auto; */
  position: relative;
}

/* 重ねるボックスの設定 */
.layer-in{
  
  /* width: 30vw; */
  /* height: 100px; */
  position: absolute;
  /* top: 950px; */
  right: 0;
  bottom: 0;
  left: 80px;
}

/* 重ねる文字の基本設定 */
/* .layer-txt{
  font-size: 2rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.4rem;
} */


.about,.works,.planning,.message,.access{
  text-align: center;
  height: 100vh;
  height: 100dvh;
  padding-block: 10px;
}
.about h2,.works h2,.planning h2,.message h2,.access h2,.siteMap h2{
  text-align: left;
  color: #39EEFA;
  font-size: 2.5em;
  font-family: Arial, Helvetica, sans-serif;
  width: 30vw;
  /* margin-bottom: 20px; */
  /* padding-left: 10px; */
}
.works h2,.message h2{
  color: #1f428b;
  /* color: #fff; */
  /* -webkit-text-stroke: 1px #eee; */
  /* -webkit-text-stroke: 1px #39EEFA; */
}
.about h2 i,.works h2 i,.planning h2 i,.message h2 i,.access h2 i,.siteMap h2 i{
  font-size: 0.8em;
  margin-right: 10px;
}
.about h2::after,.works h2::after,.planning h2::after,.message h2::after,.access h2::after,.siteMap h2::after{
  display: block;
  font-size: 16px;
  /* margin-top: 10px; */
  padding-left: 120px;
}
.about h2::after{content: "弊社について";}
.works h2::after{content: "事業内容";}
.planning h2::after{content: "プラン作成の流れ";}
.message h2::after{content: "代表よりご挨拶";}
.access h2::after{content: "店舗案内";}
/* .siteMap h2::after{content: "ご希望の項目をクリックして閲覧してください。";} */

/* ABOUT */
.about{
  background: #D7FBFE;
  background: #fff;

  & .container{
    /* justify-content: space-between; */
    max-width: 1300px;
    /* border: 1px solid #2c09c7; */
    /* height: 100vh; */
  }

  & section{
    width: 500px;
    /* height: 100vh; */
    margin-inline: 10px;
  }
  & a{
    padding-right: 15px;
    /* background: #ccc; */
  }
  & a > p:first-of-type{
    overflow: hidden;
  }
  & img{
    object-fit: cover;
    /* position: absolute; */
    /* z-index: 1; */

  }
  /* & a:hover{
    background: #dff;
    box-shadow: 0 0 20px #065ac7;
  } */
  /* & a:hover img{
    opacity: 1;
    scale: 1.2;
  } */
  & .text{

    & h3{
      text-align: left;
      font-family: "Shippori Mincho B1", serif;
      color: #1d3e71;
      /* -webkit-text-stroke: 1px #fff; */
      /* text-decoration: underline; */
      font-size: 2.2em;
      text-shadow: 2px 2px 2px #fff;
      letter-spacing: 6px;
      line-height: 1.7;
      margin-bottom: 50px;
    }
    & p{
      text-align: left;
      color: #333;
      font-size: 16px;
      line-height: 1;
    }
    & .caption{
      color: #555;
      font-size: 14px;
      text-shadow: 1px 1px 1px #fff;
      line-height: 2.5;
    }
    & .poem{
      font-size: 17px;
      font-family: "Shippori Mincho B1", serif;
      line-height: 2.5;
      float: right;
      padding: 20px;
      margin: 0 auto;
  }

    & .i-chara{
      width: fit-content;
      width: 250px;
      position: absolute;
      top: 1250px;
      right: 30px;
    }

    & .more{
      display: none;
      background: #39eefa;
      border-radius: 5px;
      color: #fff;
      padding: 5px;
      transition: 0.2s;
    }
  }
  & .image{
      border-radius: 50% 50% 0 0;
      width: 450px;
      height: 600px;
      /* top: 1200px; */
      /* left: 50%; */
      /* z-index: 100000; */
      /* transform: translate(-50%, -50%); */
  }
  

}

/* WORKS */
.works{
  background: #D7FBFE;
  /* background: #fff; */

  & .container{
    flex-wrap: wrap;
    height: 50vh;
    height: 50dvh;
  }
  & section{
    width: calc(100% / 3);
  }
  & section + section{
    margin-bottom: 10px;
  }
  & h3{
    color: #235596;
    color: #555;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 18px;
    font-weight: normal;
    -webkit-text-stroke-width: 1px;
    /* -webkit-text-stroke-color: #222; */
    /* text-shadow: #999 1px 1px 1px; */
    margin-block: 30px 20px;
  }
  
  & .container i{
    cursor: default;
    display: block;
    color: #555;
    font-size: 50px;
    border: 2px solid #555;
    border-radius: 50%;
    width: 200px;
    line-height: 200px;
    margin: 0 auto 30px;
    transition: 0.5s;
  }
  & .container a:hover i{
    background: #555;
    color: #D7FBFE;
    scale: 1.2;
    rotate: 1turn;
  }
  & p{
    display: inline;
    text-align: left;
    background: #555;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    width: 75%;
    padding: 3px;
    margin-inline: auto;
    transform-origin: left;
    scale: 0;
    opacity: 0;
    transition: 1.5s;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  & .container a:hover p{
    opacity: 1;
    scale: 1;
  }
}

/* PLANNING */
.planning{
  background: #D7FBFE;
  background: #fff;

  & .container{
    display: flex;
    gap: 10px;
    max-width: 1020px;
    height: 70vh;
  }

  & .title{
    /* border: 1px solid #ccc; */
    width: 400px;
    /* margin-top: 10px; */

    & h3{
      text-align: left;
      color: #555;
      /* font-family: "Shippori Mincho B1", serif; */
      font-family: "Zen Kaku Gothic Antique", sans-serif;
      font-size: 20px;
      padding-bottom: 10px;
      cursor: pointer;
      transition: 0.01s;
    }
    & h3 span{
      /* font-family: "Jost", sans-serif; */
      font-family: "Oswald", sans-serif;
      font-size: 24px;
      /* border-right: 2px solid #555; */
      padding-right: 2px;
    }

    & h3:hover{
      color: #a2e3ff;
      /* border-bottom: 1px solid #285AEB; */
    }

  }


  & .IC2{
      width: 250px;
      position: absolute;
      top: 3400px;
      right: 260px;
    }

}

  .main{
    flex: 1;
    width: 300px;
    /* margin: 10px; */
    box-sizing: border-box;
    /* border: 1px solid #ccc; */

    & .content{
    display: none;
    background: #a2e3ff;
    background-image: (url(.../img/plan1_image.jpg));
    text-align: left;
    color: #555;
    font-family: "Shippori Mincho B1", serif;
    font-family: "Yusei Magic", sans-serif;
    /* font-family: "Kaisei Decol", serif; */
    border: 1px solid #ccc;
    border-radius: 10px;
  /* width: 40vw; */
  height: 70vh;
  /* position: absolute; */
  /* top: 2430px; */
  /* right: 220px; */
    transition: 1s;

    & h4{
     font-size: 25px;
     line-height: 2.5;
     margin-bottom: 10px;
     padding-inline: 40px;
    }
    & img{
    width: 100%;
    height: 250px;
    border-radius: 10px 10px 0 0;
    object-fit: cover;
    }
    & p{
    font-size: 20px;
    line-height: 2;
    padding-inline: 40px;
    }
    }

  }


.content.active {
    display: block; /* 選択されたときだけ表示 */
  }

/* MESSAGE */
.message{
  background: #D7FBFE;
  /* background: #fff; */

  & section{
    /* border: 1px solid #2c09c7; */
    /* writing-mode: vertical-lr; */
    width: 500px;
    width: calc(1/2);
    height: 100vh;
    margin-inline: 10px;
  }
  & a{
    padding-right: 15px;
    /* background: #ccc; */
  }
  & a > p:first-of-type{
    overflow: hidden;
  }
  & .profile{
    object-fit: cover;
    width: 80%;
    padding-block: 10px;
    /* margin-bottom: 20px; */
  }
  .pic {
    position: relative;
  }
  
  .pic::before,
  .pic::after {
    content: '';
    background: #D7FBFE;
    position: absolute;
    transform: rotate(-50deg);
    width: 140px;
    height: 80px;

  }
  
  .pic::before {
    top: -10px;
    left: -25px;
    border-bottom: 2px solid #aaa;
  }
  
  .pic::after {
    bottom: -10px;
    right: -25px;
    border-top: 2px solid #aaa;
  }
  /* & a:hover{
    background: #dff;
    box-shadow: 0 0 20px #065ac7;
  } */
  /* & a:hover img{
    opacity: 1;
    scale: 1.2;
  } */
  & .text{
    padding: 20px;

    & h3{
      display: inline;
      /* background: #333; */
      text-align: left;
      font-family: "Shippori Mincho B1", serif;
      color: #fff;
      color: #444;
      color: #2e3192;
      font-size: 2.5em;
      letter-spacing: 4px;
      /* border-bottom: 1px solid #2e3192; */
      line-height: 2;
      margin-bottom: 20px;
      padding: 5px;

      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    & .h31{
      margin-right: 2em;
    }
    & .h32{
      margin-left: 2em;
    }
    & .emphasis {
      background-image: linear-gradient(rgba(0 0 0 / 0) 70%, #e5c046 70%);
      padding-inline: 10px;
    }
    & p:first-of-type{
      text-align: left;
      color: #555;
      font-size: 16px;
      line-height: 1.7;
      height: 11em;
      padding-top: 20px;
    }
    & p:nth-of-type(2){
        text-align: left;
        font-family: "Zen Kaku Gothic Antique", sans-serif;
        font-size: 14px;
        line-height: 1.5;
        margin-top: 120px;

        & .syomei{
          display: block;
          margin-left: 80px;
          width: 80%;
        }
      }
    & .more{
      display: none;
      background: #39eefa;
      border-radius: 5px;
      color: #fff;
      padding: 5px;
      transition: 0.2s;
    }
  }
  /* & a:hover .more{
    background: #0abd5b;
  } */

}

/* ACCESS */
.access{
  background: #D7FBFE;
  background: #fff;

  & .container{
    max-width: 1920px;
    /* max-width: 1500px; */
    gap: 100px;
  }

  & section{
    /* border: 1px solid #2c09c7; */
    /* margin-inline: 10px; */
    margin-bottom: 10px;
  }

  & a > p:first-of-type{
    overflow: hidden;
  }

  /* & a:hover{
    background: #dff;
    box-shadow: 0 0 20px #065ac7;
  } */
  /* & a:hover img{
    opacity: 1;
    scale: 1.2;
  } */
  & .text{
    /* border:  1px solid #2c09c7; */
    display: flex;
    gap: 20px;
    text-align: left;
    color: #555;
    width: 400px;
    height: 50vh;
    padding: 20px 20px 20px 80px;

    & h3{
      color: #235596;
      font-family: "Shippori Mincho B1", serif;
      font-size: 1.5em;
      letter-spacing: 2px;
      margin-bottom: 20px;
    }

    & dl{
      width: 150px;
    }

    & dt{
      font-family: "Zen Kaku Gothic Antique", sans-serif;
      font-size: 1.2em;
      border-bottom: 1px solid #555;
      line-height: 1.5;
      margin-bottom: 10px;
    }
    & dd{
      font-size: 0.8em;
      line-height: 1.5;
      height: 70px;
      margin-bottom: 20px;
    }

  }

  .pic2{
    /* border:  1px solid #2c09c7; */
    width: 600px;
    object-fit: cover;
    position: relative;
    /* margin-block: 20px; */
    /* margin-inline: 100px 100px; */

    & img{
    /* margin: 30px 20px 20px 20px; */
    object-fit: cover;
    }
    & .MainPhoto{
    width: 280px;
    height: 400px;
    position: absolute;
    top: 20px;
    left: -200px;
    }
    & .SmallPhoto1{
    width: 220px;
    height: 240px;
    position: absolute;
    top: 70px;
    left: 180px;
    }
    & .SPhoto2{
    width: 140px;
    height: 140px;
    position: absolute;
    top: 280px;
    left: 340px;
    }
    & .SPhoto3{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 30px;
    left: 370px;
    }

  }

  & iframe{
    width: 100%;
    margin-top: 10px;
    height: 28vh;
  }

}

/* CONTACT */
.contact{
  background: url(../img/contact_cover.jpg) no-repeat center bottom/cover fixed;
  padding-block: 150px;

  & a{
    color: #fff;
    font-size: 2em;
    border: 1px solid #fff;
    border-radius: 5px;
    width: fit-content;
    margin-inline: auto;
    padding: 0.5em 1.5em;
    transition: 0.5s;
  }
  & i{
    transition: 0.5s;
  }
  & .logo-clover{
    width: 30px;
    height: 30px;
    transition: 0.5s;
  }
  & a:hover{
    background: rgba(57, 237, 250, 0.6);
  }
  & a:hover i{
    color: #fdf497;
    rotate: 1turn;
  }
    & a:hover .logo-clover{
    color: #fdf497;
    rotate: 1turn;
  }
}

/* Site Map */
.siteMap{
  background: #2dbec8;
  height: 55vh;
  height: 55dvh;
  /* padding-block: 20px; */
  padding-top: 10px;

  & .container{
    max-width: 1920px;
  }

  & h2{
    color: #f7fed7;
    color: #1f428b;
  }

  & section{
    text-align: left;
    width: 18%;
    z-index: 100;
  }
  & ul{
    margin-inline: auto;
  }
  & h3{
    color: #fdf497;
    /* color: #1d3e71; */
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 12px;
    /* margin-bottom: 20px; */
    margin-left: 15px;
  }
  & li{
    color: #eee;
    line-height: 1.2;
    width: fit-content;
  }
  & li + li{
    margin-top: 10px;
  }
  & .menu{
    font-size: 17px;
    letter-spacing: 5px;
    line-height: 0.4;
    padding: 10px;
    transition: 0.7s;
  }
  & .menu::after{
    content: "";
    display: block;
    background: #065ac7;
    height: 3px;
    margin-top: 3px;
    transform-origin: left;
    scale: 0;
    transition: 0.7s;
  }
  & .menu:hover{scale: 1.2;}
  & .menu:hover::after{scale: 1;}
  & .chara{
    width: 150px;
    /* height: 100px; */
    object-fit: cover;
  }
  & .SM-add{

    & li{
      font-size: 12px;
      line-height: 1.5;
    }
  }

  & .setsu{
    width: 200px;
    position: absolute;
    left: 170px;
    top: 5150px;
    /* z-index: 100000; */
    & .balloon{
      position: relative;
      display: inline-block;
      margin: 1.5em 0 1.5em 15px;
      padding: 0 10px;
      width: 200px;
      height: 200px;
      line-height: 200px;
      color: #fff;
      background: #ffcc75;
      border-radius: 50%;
      box-sizing: border-box;
      opacity: 0;
      transition: 1s;

      & p{
        /* text-align: center; */
        font-size: 11px;
        font-weight: bold;
        color: #666;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
       /* margin: -25px 0 0 -25px; */
        transform: translate(-50%, -50%);

    }
    & .balloon::before{
      content: "";
      position: absolute;
      top: 50%;
      left: -25px;
      margin-top: -15px;
      border: 15px solid transparent;
      border-right: 15px solid #ffcc75;
      z-index: 0;
    }
    }
  }
  & .IC:hover + .setsu .balloon{
    opacity: 1;
  }

  & .link{
    text-align: left;

    & img{
      width: 150px;
      /* margin-bottom: 30px; */
      padding: 20px;
    }
  }
}

/* フッター */
footer{
  padding-block: 10px;
  background: #2DBEC8;
  & p{
    /* text-align: center; */

    color: #eee;
    font-size: 14px;
    /* font-weight: bold; */
    padding-inline: 40px;
    padding-bottom:  40px;
  }
}


/* トップへ戻る */
.to-top{
  width: 20px;
  height: 20px;
  position:fixed;
  bottom: 40px;
  right: 40px;

  & i{
    /* display: block; */
    font-size: 50px;
    -webkit-text-stroke: 1px #019ac6;
    /* border: 1px solid #000; */
    color: #fdf497;

  }
}



@media (width <= 743px){
  /* PCナビ */
  .pcNav{
    display: none;
  }

  /* キャッチコピー */
  .catchCopy{
    font-size: 0.6em;
  }

  /* スマホナビ */
  .spNav{
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    background: rgba(57, 237, 250, 0.7);
    scale: 0;
    transform-origin: left top;
    transition: 0.3s;

    & li{
      text-align: center;
      color: #fff;
      font-size: 1.5em;
      line-height: calc(80vh / 5);
      border-bottom: 1px solid #fff;
    }
  }

  /*touchstart時のcss*/
  .show{scale: 1;}

  /* メニューボタン */
  .btn{
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 5px;
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 10000;
    opacity: 0;
    animation: header-fadein 2s linear 1.5s forwards;
    }
    .btn span,
    .btn span::before,
    .btn span::after{
    content: "";
    display: block;
    background: #fff;
    border-radius: 10px;
    width: 35px;
    height: 3px;
    position: absolute;
    inset: 0;
    margin: auto;
    transition: 300ms;
    }
    .btn span::before{translate: 0 -10px}
    .btn span::after{translate: 0 10px}
    /*touchstart時のcss*/
    .close span{
    background: transparent;
        /* Nesting */
        &::before{
          rotate: 225deg;
          translate: 0;
        }
        &::after{
          rotate: -225deg;
          translate: 0;
        }
    }

  .works,.planning,.siteMap{
    padding-block: 30px;

  }
  .works h2,.planning h2,.siteMap h2{
    margin-bottom: 20px;
  }
  .works{
    padding-top: 100px;

    
    & .container{
      display: block;
    }
    & section{
      background: #39eefa;
      color: #fff;
      border-radius: 10px;
      width: auto;
      padding-block: 20px;
      
      & h3{
        font-size: 10px;
      }
      & + section{
        margin-top: 20px;
      }
    }
     & .container i{
      background: #fff;
     }
     & p{
      max-width: 400px;
      width: auto;
      margin-inline: auto;
      font-size: 10px;
     }
  }
  .planning{
    padding-top: 100px;
  }
}

@media (width < 500px) {
  .sns .container{
    justify-content: center;
  }
}