.main{
    width: 100%;
    height: auto;
    max-width: 1200px;
    margin: 0 auto;
}

.mese{
    text-align: center;
    font-family: serif;
    line-height: 1.8em;
    margin: 2em auto;
}
.mese p{
    text-align: center;
}
.mese p span{
    font-size: 1.5em;
    line-height: 2.5em;
}
.fre_im{
    display: flex;
    margin: 2em auto;
    flex-wrap: wrap;
    align-items: center;
}
.fre_im div{
    width: 48%;
    height: auto;
    margin: 1%;
}
.fre_im img{
    width: 100%;
    height: auto;
}
.fre_im div p{
    text-align: left;
    font-size: 16px;
    line-height: 2.1em;
}
.fre_im p span{
    font-weight: bold;
    font-size: 18px;
}
.fre_im p span2{
    font-size: 30px;
    font-weight: bold;
    color: #e77171;
}
.swiper-slide img{
    width: 100%;
    height: auto;
}
.swiper-slide{
    margin: 1em auto;
}
.title h3{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    margin-bottom: 7px;
}
.title {
    margin: 3em auto;
    padding-left: 5px;
}
.setumei{
    text-align: justify;
    margin: 1em auto;
    width: 95%;
    height: auto;
    line-height: 1.7em;
}
.icon_fre{
    display: flex;
    max-width: 350px;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    margin: 1em auto;
}
.icon_fre div{
    width: 31%;
    height: auto;
    margin: 1%;
}
.icon_fre div img{
    width: 100%;
    height: auto;
}
.icon_fre div p{
    font-size: 14px;
    margin: 0.5em auto;
    text-align: center;
}
.icon_fre div a{
    color: black;
}

.point{
    margin: 5em auto;
    width: 95%;
    height: auto;
    max-width: 600px;
    padding-left: 2%;
}
.point h2{
    font-family: serif;
    border-bottom: solid 1.5px #3c3c3c;
    padding-bottom: 9px;
    font-size: 20px;
    text-align: center;
}
.point p{
    font-size: 15px;
    padding-top: 9px;
    line-height: 1.6em;
}
.fre_sa{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.sa_gi{
    width: 43%;
    height: auto;
    border: solid 2px #bf535c;
    padding: 2%;
    margin: 1%;
    text-align: center;
    line-height: 2em;
    text-align: center;
    border-radius: 33px;
}
.sa_gi img{
    width: 60%;
    height: auto;
}
.sa_gi h2{
    margin: 2em auto;
    text-align: center;
    line-height: 2em;
}
.sa_gi h2 span{font-size: 18px;}
.sa_gi h2 span2{font-size: 25px;color: #bf535c;font-weight: bold;}
.sa_gi h2 span3{font-size: 10px;}
.sa_gi h3{
    text-align: center;
    font-size: 20px;
}
.sa_gi h3 span{
    font-size: 25px;color: #bf535c;font-weight: bold;
}
.fot{
    margin-top: 1em;
    border-top: solid 1px #3c3c3c;
    text-align: center;
}
.fot p{
    text-align: center;
    padding-top: 1em;
}
.juhati{
    text-align: center;
    line-height: 1.7em;
    margin-top: 3em;
}
.juhati p{text-align: center;}
.juhati a{
    color: blue;
}
@media screen and (max-width: 760px) {
    .fre_im div{
        width: 100%;
        margin: 1em auto;
    }
    .fre_im div p{
        text-align: center;
    }
    .sa_gi{
        width: 93%;
    }
    .sa_gi h2 span3{font-size: 13px;}
}


/* table01 */
#table01{
    margin: 1em 0;
    width: 95%;
    max-width: 800px;
}
#table01 tr {
    border-bottom: 1px solid #b5b1b1;
  }
  #table01 th,
  #table01 td {
    padding: 24px 0;
    border: none;
  }
  #table01 th {
    width: 30%;
  }

  .work{
    max-width: 800px;
    width: 95%;
    height: auto;
    margin: 3em auto;
    box-shadow: 2px 2px 4px #dbdbdb;
    position: relative;
  }
  .step{
    position: absolute;
    top: 0;
    right: 0;
    background: #bf535c;
    padding: 0.5em 1em;
    color: white;
  }
  .work_in{
    margin: 1em auto;
    width: 94%;
    padding: 1em 0;
    line-height: 1.8em;
  }
  .work_in h3{
    font-size: 25px;
    color: #bf535c;
    font-weight: bold;
    text-align: center;
    margin: 1em auto;
  }
  .work_in p{
    text-align: justify;
  }
  .im_b{
    width: 95%;
    height: auto;
    line-height: 1.8em;
    margin: 4em auto;
  }
  .im_b h2{
    font-size: 22px;
    margin: 1em auto;
    line-height: 2em;
    font-weight: bold;
    color: #478863;
  }
  .im_b img{
    width: 100%;
    height: auto;
  }
  .sala_bo h3{
    margin: 1em auto;
    color: #478863;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.8em;
  }
  /* sp */
  @media only screen and (max-width: 480px) {
    #table01 th,
    #table01 td {
      width: 100%;
      display: block;
    }
    #table01 th {
      width: 100%;
    }
    #table01 td {
      padding-top: 0;
    }
  }
  @media screen and (max-width: 760px) {
    #table01{
        margin: 1em auto;
    }
  }
  .sala_bo{
    width: 95%;
    margin: 3em auto 1em auto;
  }

  /* 通常サイズのブラウザに適用する基本的なテーブルのスタイル */
  .responsive-table{
    border-collapse: collapse; /* セルの境界線を重ね合わせるため、ボーダーを重ねる */
    width: 100%; /* テーブルの幅を100%に設定 */
  }
  .responsive-table th,
  .responsive-table td{
    padding: 15px; /* セル内のコンテンツとセルの境界線の間に余白を設ける */
    border: solid 1px #ccc; /* セルの境界線のスタイルを設定 */
    text-align:center; /* セル内のテキストを中央揃えに設定 */
    box-sizing:border-box; /* ボックスのサイズをコンテンツボックスに設定 */
  }
  .responsive-table th {
    width:30%;
    background: #478863; /* 背景色を設定 */
    color: #fff; /* テキスト色 */
  }
  /* ブラウザサイズが600px以下になったときのスタイル */
  @media screen and (max-width: 600px) {
    .responsive-table {
      width: 100%; /* テーブルの幅を100%に設定 */
    }
  .responsive-table th,
  .responsive-table td {
      display: block; /* ブロック要素として表示 */
      width: 100%; /* 幅を100%に設定 */
      border-bottom:none; /* セルの下部の境界線を削除 */
    }
    .responsive-table tr:last-child{
      border-bottom: solid 1px #ccc; /* 最後の行の下部に境界線を追加 */
    }
  }


  .faq {
    display: grid;
    gap: 1.5em;
    padding-block-start: 2em;
    max-inline-size: 60em;
    margin: auto;
  }
  .faq-title {
    font-size: 2em;
    text-align: center;
  }
  .faq-title:before {
    content: "- FAQ -";
    display: block;
    font-size: 0.5em;
    font-weight: normal;
    color: #666;
  }
  /* FAQ content */
  .faq-content {
    --accent-color: #3388ff;
    --v-rythm: 1.6em;
    --gap: 1em;
    position: relative;
    background: #eee;
    border-radius: 1em;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .faq-content:after {
    content: "";
    position: absolute;
    inset-block-start: 1.25rem;
    inset-inline-end: 0.75rem;
    display: block;
    inline-size: 1rem;
    aspect-ratio: 1;
    background: #666;
    overflow: hidden;
    rotate: 0deg;
    transition: rotate 0.4s 0s ease;
    clip-path: polygon(25% 10%, 25% 90%, 75% 50%);
  }
  .faq-content[open]:after {
    rotate: 90deg;
  }
  .faq-content[open] .faq-q:after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
  }
  /* Q */
  .faq-q {
    font-weight: bold;
    line-height: var(--v-rythm);
    display: flex;
    gap: var(--gap);
    padding: 1rem 2rem 1rem 1.5rem;
  }
  .faq-q::-webkit-details-marker {
    display: none;
  }
  .faq-q:hover {
    color: var(--accent-color);
  }
  .faq-q:before {
    content: "Q.";
    display: block;
    color: var(--accent-color);
    font-size: var(--v-rythm);
  }
  /* A */
  .faq-a {
    margin: 0;
    display: flex;
    gap: var(--gap);
    padding: 0 1.5rem 1rem;
  }
  .faq-a:before {
    content: "A.";
    font-weight: bold;
    color: var(--accent-color);
    font-size: var(--v-rythm);
  }


  .ex{
    margin: 3em auto;
    max-width: 800px;
    width: 95%;
    padding: 2em 0;
    height: auto;
    border: solid 1px #c3c3c3;
  }
  .ex img{
    width: 150px;
    text-align: center;
    margin: 1em auto;
    height: auto;
  }
  .ewi, .ewi p{
    text-align: center;
  }

  .koumo {
    position: relative;
    display: inline-block;
   margin: 2em auto;
    width: 100%;
    text-align: center;
  }

  .koumo :before {
    content: '';
    position: absolute;
    bottom: -43px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: black;
    border-radius: 2px;
    margin: 2em auto;
  }
  .koumo p{
    padding: 0.5em;
    font-size: 20px;
    text-align: center;
  }
  .st{
    margin: 1em auto;
    width: 100%;
    height: auto;
  }
  .st img{
    width: 100%;
    height: auto;
  }
  .one{
    margin: 3em 0;
    background-color: #d297a5;
    color: white;
    padding: 1em;
    max-width: 250px;
    font-weight: bold;
    font-size: 20px;
  }
  .one_im{
    width: 100%;
    height: auto;
    max-width: 350px;
    margin: 1em 0;
  }
  .one_im img{
    width: 100%;
    height: auto;
  }

  .box{
    margin: 1em auto;
    width: 90%;
    padding: 2em 5%;
    height: auto;
    line-height: 1.8em;
    max-width: 1100px;
    text-align: justify;
    color: white;
  }
  .box h2{
    font-size: 30px;
    color: white;
    font-weight: bold;
    margin-bottom: 1em;
  }