@charset "UTF-8";

/* ベースのスタイル
------------------------------------------ */
* {
  line-height: 1.3;
  box-sizing: border-box;

}

html {
  font-size: 16px;
}

body {
  font-size: 1.2rem;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.75;
  color: var(--black);
  background-color: var(--white);
  letter-spacing: .01em;
}

p {
  line-height: 1.8;
}

a {
  text-decoration: none;
}

a,
a:hover,
a i {
  transition: all 0.3s;
  color: var(--black);
}

a:hover {
  opacity: .7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul {
  list-style: none;
}

:root {
  --white: #fbfbfb;
  --black: #333333;
  --orange3: #ea7206;
  --lightorange: #fbb03b;
  --blue: #00C1D4;
  --kimidori: #e0ff59;
  --midori: #26AE29;
  --orange: #FA8C29;
}

h1 {
  line-height: 0;
}

.sp {
  display: none;
}


@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }

  .sp {
    display: block;
  }
}

/* フェードイン */
.fade {
  animation: fadeIn 1s ease 0.3s 1 normal;
}

@keyframes fadeIn {

  /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0
  }

  /*アニメーション開始時は不透明度0%*/
  100% {
    opacity: 1
  }

  /*アニメーション終了時は不透明度100%*/
}


/* スクロールでフェードインさせる要素 */
.block {
  opacity: 0;
  /* 最初は非表示にしておく */
  transition: all 1s;
  /* 動きを滑らかに */
}

/* フェードイン用のクラス */
.fadeIn {
  opacity: 1;
}




/********************** ここからヘッダー */
body {
  position: relative;
}


.container {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}



.header-container {
  max-width: 1500px;
  margin: 0 auto;
}

.header-flex {
  display: flex;
  gap: 1px;
}

.header {
  background-color: rgb(224, 255, 89, .53);
}



.header-logo {
  width: 18rem;
  background-color: var(--white);
  padding: 1rem 2rem;
  border-radius: 0 0 2.5rem 2.5rem;
}

.header-menu ul {
  display: flex;
  gap: .2rem;
  justify-content: center;
}

.header-link {
  width: 9rem;
  background-color: rgba(0, 199, 189, .17);
  padding-top: .5rem;
  padding-bottom: .3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0 0 1.3rem 1.3rem;
}



.header-menu ul li a {
  display: block;
  margin: 0 auto;
  text-align: center;

}





@media (max-width: 768px) {
  .header-menu {
    display: none;
  }
}




/********************** ここからtop */
.top {
  margin-top: 1rem;
  padding-bottom: 1rem;
}

.top-img {
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
}

.top-text {
  color: #fff;
  font-size: 2.5vw;
  position: absolute;
  top: 3vw;
  left: 12vw;
}

@media (max-width: 768px) {
  .top-img {
    padding-left: 1rem;
    padding-right: .6rem;
  }

  .top-text {
    color: #fff;
    font-size: 5vw;
    top: 3vw;
    left: 7vw;
  }
}




/********************** ここからハンバーガー */
.hamburger-menu {
  display: none;
}

.header-sp {
  display: none;
}

@media (max-width: 768px) {

  .header-sp {
    display: block;
  }

  .sp-header-logo {
    width: 63vw;
    display: block;
    margin: 0 auto;
    padding: .5rem 1rem;
  }




  .hamburger-menu {
    display: block;
    background-color: var(--white);
    width: 100vw;
    height: 100vh;
    top: 0vw;
    right: 0vw;
    position: fixed;
    z-index: 100;
    transition: all 0.6s;
    transform: translateX(-120%);
    padding-top: 16.5vw;
  }

  .hamburger-btn {
    background: url(../img/open.png);
    width: 16.5vw;
    height: 16.5vw;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
  }

  .hamburger-menu-list-group li a {
    display: block;
    font-weight: 500;
    color: var(--orange);
    padding-top: 6vw;
    padding-bottom: 6vw;
    padding-left: 9vw;
    border-bottom: 1px dotted var(--lightorange);
  }

  /* 
.hamburger-menu-list-group li:nth-child(5) a 
{ border-bottom: none;
}*/

  .close {
    background: url(../img/close.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    margin: 0 0 0 auto;
    position: fixed;
    z-index: 10000;
  }


  .hamburger-menu-active {
    transform: translateX(0);
  }

  .hamburger-menu-logo {
    width: 10rem;
    margin: 0 auto;
    margin-top: 2rem;
  }

}

/********************** about */
.about {
  padding-top: .5rem;
}

.about-flex {
  display: flex;
  gap: 3rem;
  align-items: center;
}

.about-container {
  max-width: 1137px;
}

.title-about {
  display: block;
  width: 100rem;
  margin: 0 auto;
  margin-top: 2rem;
  text-align: center;
}

.title-about img {
  border-bottom: 2px dotted var(--orange2);
}

.about-midashi {
  font-size: 1rem;
}

.about p {
  line-height: 2;
  margin-bottom: .8rem;
}

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

  .title-about {
    width: 12rem;
    margin-bottom: 1rem;
  }

  .about-container {
    padding-top: 0;
    padding-bottom: 1rem;
    margin-top: -1rem;
  }
}




/********************** feature */
.feature {
  background-color: #fffbe1;
  background-color: #fefefe;
}

.feature-container {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

.feature-photo img {
  width: 64rem;
}

.title img {
  width: 20rem;
  display: block;
  margin: 0 auto;
}

.title-feature {
  margin-bottom: 2.5rem;
}

.feature-flex {
  margin-top: 3rem;
  display: flex;
  gap: 2rem;
}

.feature-text {
  position: relative;
}

.point {
  position: absolute;
  top: -1.5rem;
  left: 0;
  width: 5rem;
}

.feature-text-heading {
  font-size: 1.75rem;
  color: #fff;
  font-weight: 500;
  background-color: var(--orange);
  padding-left: 6rem;
  padding-right: 3rem;
  background: linear-gradient(to right, var(--orange) 80%, transparent);
}


.feature-text-discription {
  margin-top: 1rem;
}

.feature-flex-02 {
  flex-direction: row-reverse;
}

@media (max-width: 768px) {
  .feature-container {
    padding-top: 2rem;
  }

  .title img {
    width: 14rem;
  }

  .feature-flex {
    display: block;
  }

  .feature-text-heading {
    font-size: 1.2rem;
    line-height: 1.4;
    padding-top: .3rem;
    padding-bottom: .3rem;
    padding-left: 4rem;
  }

  .point {
    width: 3.4rem;
    top: -1rem;
  }

  .feature-text-discription {
    margin-bottom: .5rem;
  }
}

/********************** ここからannounce */

.announce {
  background-color: rgb(224, 255, 89, .53);
}


.announce-container {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}


.announce-box p {
  margin-top: 1rem;
}

.pdf-img {
  width: 4.5rem;
  margin-bottom: -1rem;
}

@media (max-width: 768px) {}

/********************** ここからflow */

.flow {
  padding-top: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  background-color: var(--white);
  background-color: #FFFAF6;
  position: relative;
}

.bg-line1 {
  position: absolute;
  top: 3rem;
  width: 19vw;
  left: 10vw;
}

.bg-line2 {
  position: absolute;
  top: 30rem;
  width: 25vw;
  right: 0vw;
}

.bg-line3 {
  position: absolute;
  top: 50rem;
  width: 20vw;
  left: -5vw;
}

.bg-line4 {
  position: absolute;
  top: 80rem;
  width: 20vw;
  right: 5vw;
}

.bg-line5 {
  position: absolute;
  top: 100rem;
  width: 25vw;
  left: 3vw;
}

.flow-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.carot {
  position: absolute;
  top: 0;
  left: -10rem;
  display: block;
  width: 20rem;
}

.title-flow img {
  width: 20rem;
  display: block;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.title {
  width: 20rem;
  display: block;
  margin: 0 auto;
}



.flow-img {
  margin: 0 auto;
  margin-top: 2rem;
}

.flow-box-heading {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--midori);
  padding-left: 2rem;
  padding-right: 2rem;

}

.flow-box-heading-text {
  font-size: 1.4rem;
  font-weight: 500;
}

.flow-box {
  background-color: #f7f7f7;
  background-color: var(--white);
  padding-bottom: 1rem;
  padding-top: 2rem;
  width: 500px;
  margin: 0 auto;
  border-radius: 1.5rem;
  border: 2.3px solid var(--midori);
  position: relative;
  margin-bottom: 1.5rem;
}

.flow-box::before {
  content: "";
  position: absolute;
  background-color: var(--kimidori);
  background-color: rgba(224, 255, 89, .53);
  width: 100%;
  top: 0;
  height: 0;
  z-index: 1;
  height: 25px;
  border-radius: 1.5rem 1.5rem 0 0;
}

.flow-explain {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
}

.flow-item {
  position: relative;
}

.flow-item::before {
  content: "";
  position: absolute;
  background-color: var(--midori);
  height: 100%;
  width: .4rem;
  top: 0;
  left: 50%;

}

.step {
  width: 3rem;
  margin-right: 1rem;
}

.person {
  display: block;
  width: 4rem;
}


.flow .tel {
  justify-content: center;
}

.flow-tel {
  background-color: #63CA73;
  width: 16rem;
  border-radius: 50px;
  text-align: center;
  color: var(--white);
  padding: .3rem;
  margin: 0 auto;
  margin-top: 1rem;

}

.flow-tel-num {
  font-size: 1.5rem;
  line-height: 1;
}

.icon-tel {
  width: 3rem;
  margin-left: 8rem;
}

.person {
  width: 10rem;
  margin-left: 1rem;
}

.person3 {
  width: 7rem;
  margin-left: 8rem;
}

.icon-talk {
  width: 5rem;
  margin-left: 12rem;
  margin-bottom: .5rem;
}

.icon-shinsei {
  width: 3rem;
  margin-left: 9rem;
  margin-bottom: .5rem;
}

@media (max-width: 768px) {
  .flow {
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: 0;
  }

  .flow-box {
    width: 90vw;
    margin: 0 auto;
    margin-bottom: 1rem;
  }

  .icon-tel {
    margin-left: 1rem;
  }

  .person3 {
    margin-left: 1rem;
    width: 5rem;
  }

  .person {

    width: 7rem;
  }

  .icon-talk {
    margin-left: 1rem;
  }

  .icon-shinsei {
    margin-left: 1rem;
  }

  .flow-box-heading-text {
    font-size: 1.1rem;
  }

  .step {
    width: 2.5rem;
  }

  .flow-box-heading {
    padding-left: 1rem;
    padding-right: 1rem;
    justify-content: space-around;
  }

  .flow-explain {
    padding-left: 1rem;
    padding-right: 1rem;
  }

}


/********************** ここからwork */
.title-work {
  margin-bottom: 2rem;
}

.work-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.work-box img {
  width: 15rem;
}

.work-explain {
  width: 90vw;
  margin: 0 auto;
}

.title-time p {
  color: var(--orange);
  margin-top: 1rem;
}

.time-text01 {
  margin-top: .3rem;
}

.work tr {
  text-align: center;
}

.work th {
  color: var(--white);
  background-color: #FA8C29;
  padding: .5rem 2rem;
  text-align: center;
  font-weight: 400;
}

.work td {
  padding: 1rem;
  background-color: #F7f7f7;
}

.work .rest {
  background-color: #FFE4CE;
}


.teiin {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.teiin-text1 {
  color: var(--orange);
}

@media (max-width: 768px) {
  .work-box {
    display: block;
  }

  .work-box img {
    margin: 0 0 0 auto;
    margin-top: 1rem;
    display: block;
  }

  .pc {
    display: none;
  }

 
}

/********************** ここからqa */
.qa {
  background-color: rgba(0, 189, 189, 0.05);
}

.qa-container {
  padding-left: 6rem;
  padding-right: 6rem;
}

.qa-box {
  margin-bottom: 2.5rem;
  background-color: #f7f7f7;
  padding: .5rem 1rem;
  border-radius: 2rem;
}

.title-qa {
  margin-bottom: 2.5rem;
}

.q {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.q p {
  font-weight: 500;
}

.q-icon {
  width: 2.2rem;
}

.a-icon {
  width: 8rem;
  margin-bottom: .5rem;
  margin-top: 1rem;
}

.plus {
  width: 2rem;
  margin-left: 1.5rem;
}

@media (max-width: 768px) {
  .qa-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .qa-box {
    margin-bottom: 1rem;
  }
}

/********************** ここからaccess */

.access {
  background-color: rgb(224, 255, 89, .3);
}

.access-container {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

.title-announce p {
  color: var(--orange);
}

.title-announce {
  display: flex;
  align-items: center;

  gap: 1rem;
}

.title-announce img {
  width: 1.5rem;
  height: 1.5rem;
}

.square2 {
  display: block;
}

.address-text03 {
  margin-top: .5rem;
}

.email {
  margin-top: 1rem;
}

.email span {
  border: 1px solid var(--black);
  padding-left: .5rem;
  padding-right: .5rem;
}

.access-flex {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
}

.tel {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.tel-icon {
  width: 1.3rem;
}

@media (max-width: 768px) {
  .map {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9のアスペクト比 */
    height: 0;
  }

  .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .access-flex {
    display: block;
  }

  .access-container {
    padding-top: 1rem;
  }
}

/********************** ここからfooter */
.footer-container {
  padding-top: 2rem;
  padding-bottom: 3rem;

}

.footer-logo img {
  width: 13rem;
  display: block;
  margin: 0 auto;
}

.to-top img {
  width: 4rem;
  position: fixed;
  bottom: .5rem;
  right: .5rem;
}

.footer-menu ul {
  display: flex;
  font-size: 1rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.footer a {
  color: var(--orange3);
}

.fa-caret-right:before {
  color: var(--orange3);
}

.copy p {
  font-size: 1rem;
  text-align: center;
  color: var(--orange3);
}







/********************** ここからfooter */
@media (max-width: 768px) {
  .title img {
    width: 14rem;
  }
}