@charset "UTF-8";
/* CSS Document */
/*---------------------
　共通
-----------------------*/
body {
  color: #383838;
  margin: 0;
}
#header #header-f {
  background: #7bccd0 !important;
}
.title-tate {
  font-size: 5rem;
  letter-spacing: 0.05em;
  font-family: "hl";
  font-weight: 700;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  line-height: 1;
  color: #d2d5d8;
    float: left;
    padding-right: 10px;
}
.catchTxt {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 2;
  margin-bottom: 5rem;
}
.smile-col-2 {
  display: flex;
  justify-content: space-between;
  gap: 5rem;
}
.col_main {
  flex: 1;
}
.col_main .btn_internal {
  margin-top: 5rem;
}
p{
    line-height: 1.4!important;
    text-align: justify;
}
/*---------------------
　MV
-----------------------*/
.top-banner{
    width: 100%;
    margin-top: 70px;
}
.top-banner img{
    width: 100%;
}
/*#mv {
  margin-top: 70px;
 background: url("https://smile-funny.com/wp-content/uploads/2025/02/top.jpg") no-repeat center;
  background-size: 100%;
  height: 74vh;
  width: 100%;
  position: relative;
}*/
#mv .mv-catch {
  color: #fff;
  font-size: 6rem;
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 1.4;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);

}

#mv .sm-catch {
  display: block;
  font-size: 3.2rem;
  letter-spacing: 0.1em;
}
#mv .btn_cta_grad {
  position: absolute;
  bottom: 10rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width:1599px) {
  #mv .mv-catch {
    font-size: 5.5rem;
  }
  #mv .sm-catch {
    font-size: 2.9rem;
  }
  #mv .btn_cta_grad {
    bottom: 5rem;
  }
}
@media screen and (max-width:1440px) {
  #mv .mv-catch {
    font-size: 4.5rem;
  }
  #mv .sm-catch {
    font-size: 2.4rem;
  }
  #mv .btn_cta_grad {
    bottom: 5rem;
  }
}
@media screen and (max-width:1280px) {
  #mv .mv-catch {
    font-size: 4rem;
  }
  #mv .sm-catch {
    font-size: 2rem;
  }
  #mv .btn_cta_grad {
    bottom: 5rem;
  }
}
/*---------------------
　ABOUT
-----------------------*/
.about .twoColBox {
  display: flex;
  justify-content: space-between;
}
.about .catchTxt {
  margin-bottom: 9rem;
}
.about .leftBox {
  width: 53%;
    float: right;
    paddin-left: 2%;
}
.about .txt {
  letter-spacing: 0.1em;
  line-height: 3;
}
.about .cardWrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 51rem;
  gap: 3rem;
}
.about .cardBox {
  max-width: 24rem;
}
.about .cardBox .pic {
  position: relative;
  margin-bottom: 8px;
}
.about .cardBox .eng {
  font-size: 2.3rem;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1;
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  max-width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about .cardBox .eng .num {
  font-size: 4rem;
  margin: 1rem 0 0;
}
.about .cardBox p {
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: 0.1em;
}
.about .btn_internal {
  margin-top: 10rem;
}
/*---------------------
　GYM & TRAINERS
-----------------------*/
.gym_trainers .twoColBox {
  display: flex;
  justify-content: space-between;
}
.gym_trainers .colBox {
  display: flex;
  gap: 2rem;
  width: 47%;
}
.gym_trainers .cardBox .pic {
  margin-bottom: 2rem;
}
.gym_trainers .cardBox p {
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 2;
}
.gym_trainers .btn_internal {
  justify-content: flex-end;
  margin-top: 4rem;
}
/*---------------------
　PRICE & VOICE
-----------------------*/
.price_voice .twoColBox {
  display: flex;
  justify-content: space-between;
}
.price_voice .colBox {
  max-width: 52rem;
  aspect-ratio: 52 / 28;
  position: relative;
}
.price_voice .colBox a {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 2rem 2.5rem 3.5rem 5rem;
}
.price_voice .colBox.priceBox a {
  background: url("../images/top/price_pic_pc.jpg") no-repeat;
  background-size: cover;
}
.price_voice .colBox.voiceBox a {
  background: url("../images/top/voice_pic_pc.jpg") no-repeat;
  background-size: cover;
}
.price_voice .title-tate {
  color: #fff;
  position: absolute;
  top: -3px;
  left: -6px;
}
.arr_wh {
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 2;
  position: relative;
  min-height: 5rem;
  display: flex;
  align-items: center;
  padding: 0 8rem 0 0;
}
.arr_wh:before {
  content: "";
  background: #fff url(../images/shared/arr_black02_right.png) no-repeat center;
  background-size: 5px auto;
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
/*---------------------
　CSL
-----------------------*/
.smile-about .smile-aboutArea {
  background: #fff;
  display: flex;
  padding: 2rem;
  gap: 2rem;
}
.smile-about .smile-aboutBox {
  max-width: 32%;
}
.smile-about .smile-aboutBox .pic {
  position: relative;
  margin-bottom: 2rem;
}
.smile-about .smile-aboutBox .pic:before {
  background: #7bccd0;
  width: 3rem;
  height: 3rem;
  color: #fff;
  font-family: "hl";
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 0.05em;
}
.smile-about .smile-aboutBox:nth-child(1) .pic:before {
  content: "1";
}
.smile-about .smile-aboutBox:nth-child(2) .pic:before {
  content: "2";
}
.smile-about .smile-aboutBox:nth-child(3) .pic:before {
  content: "3";
}
.smile-about .smile-aboutBox:nth-child(4) .pic:before {
  content: "4";
}
.smile-about .smile-aboutBox .pic img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.smile-about .smile-aboutBox .pic .tit {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  min-height: 6rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 56, 56, 0.5);
}
.smile-about .smile-aboutBox p {
  font-size: 1.4rem;
  letter-spacing: 0.09em;
  line-height: 2;
}
/*---------------------
　FAQ
-----------------------*/
.faq .faq-box {
  margin-bottom: 3rem;
}
.faq .faq-box:last-child {
  margin-bottom: 0;
}
.faq .faq-box {}
.faq .faq-box dt {
  display: flex;
  background: #fff;
  min-height: 5rem;
  cursor: pointer;
  position: relative;
}
.faq .faq-box dt:before {
  position: absolute;
  content: '';
  top: 50%;
  right: 3rem;
  width: 1rem;
  height: 2px;
  background-color: #be9c0d;
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
}
.faq .faq-box dt:after {
  position: absolute;
  content: '';
  top: 50%;
  right: 3rem;
  width: 1rem;
  height: 2px;
  background-color: #be9c0d;
  transition: all .3s ease-in-out;
}
.faq .faq-box dt.open::before {
  transform: rotate(180deg);
}
.faq .faq-box dt.open::after {
  opacity: 0;
}
.faq .faq-box .q {
  width: 5rem;
  background: #be9c0d;
  font-size: 1.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
}
.faq .faq-box .qTit {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  padding: 1rem 6rem 1rem 3rem;
  flex: 1;
}
.faq .faq-box dd {
  display: none;
  margin-top: 3rem;
  padding: 0 6rem 2rem 8rem;
}
.faq .faq-box dd p {
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.1em;
}
.faq .faq-box dd p + p {
  margin-top: 1.4rem;
}
/*---------------------
　NEWS
-----------------------*/
.news .catchTxt {
  margin-bottom: 2.5rem;
}
.news .newsBox {
  border-bottom: solid 1px #d2d5d8;
}
.news .newsBox a {
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  padding: 2.3rem 0;
  display: block;
  position: relative;
}
.news .newsBox a:before {
  content: "";
  background: #be9c0d url("../images/shared/arr_white02_right.png") no-repeat center;
  background-size: 4px auto;
  width: 15px;
  height: 15px;
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
}
/*---------------------
　COLUMN
-----------------------*/
.column .columnArea {
  display: flex;
  gap: 4.5rem;
}
.column .columnBox {
  width: 30.5rem;
}
.column .columnBox a {
  display: block;
  padding: 3rem 2.5rem 4rem;
  background: #fff;
  position: relative;
  height: 100%;
}
.column .columnBox a:before {
  content: "";
  background: #be9c0d url("../images/shared/arr_white02_right.png") no-repeat center;
  background-size: 4px auto;
  width: 15px;
  height: 15px;
  position: absolute;
  right: 2.5rem;
  bottom: 2rem;
}
.column .columnBox .label {
  background: #d2d5d8;
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  line-height: 1;
  display: inline-block;
  padding: 7px 1.3rem;
  margin-bottom: 1.5rem;
}
.column .columnBox .tit {
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
}
@media screen and (max-width:599px) {
  /*---------------------
　共通
-----------------------*/
  section {
    padding: 4rem 0;
  }
  .store_search a {
    background: url("../images/shared/icon_megane.png") no-repeat top 6px center;
    background-size: 2rem auto;
  }
  #sp-nav {
    background: none;
  }
  #nav-sp-4 {
    background: none;
  }
/*.title-tate {
	font-size: 4rem;
    position: relative;
    left: -5px;
}*/
    .title-tate {
	display: none;
}
  .catchTxt {
    font-size: 2.4rem;
    line-height: 1.6;
    margin-bottom: 4rem;
  }
  .smile-col-2 {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
  }
  .col_main {
    flex: inherit;
    width: 80%;
  }
  .col_main .btn_internal {
    margin-top: 2.5rem;
  }
  /*---------------------
　MV
-----------------------*/
    .top-banner{
        margin-top: 50px;
    }
 /* #mv {
    margin-top: 50px;
    height: 54vh;
    width: 100%;
    position: relative;
  }*/
  #mv .mv-catch {
    font-size: 2.7rem;
    width: 100%;
  }
      #mv .sm-catch {
    font-size: 1.5rem;

  }
  #mv .btn_cta_grad {
    bottom: 5rem;
  }
  /*---------------------
　ABOUT
-----------------------*/
  .about .twoColBox {
    display: block;
  }
  .about .catchTxt {
    margin-bottom: 4rem;
  }
  .about .leftBox {
    width: 100%;
  }
  .about .txt {
    letter-spacing: 0.1em;
    line-height: 3;
  }
  .about .cardWrap {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    row-gap: 2rem;
    column-gap: 1rem;
    margin-top: 3rem;
  }
  .about .cardBox {
    max-width: 14.5rem;
  }
  .about .cardBox .pic {
    position: relative;
    margin-bottom: 15px;
  }
  .about .cardBox .eng {
    font-size: 1.4rem;
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    max-width: 6rem;
  }
  .about .cardBox .eng .num {
    font-size: 2.5rem;
    margin: 1rem 0 0;
  }
  .about .cardBox p {
    font-size: 1.4rem;
    line-height: 1.42;
  }
  .about .btn_internal.pc {
    display: none;
  }
  /*---------------------
　GYM & TRAINERS
-----------------------*/
  .gym_trainers .twoColBox {
    flex-direction: column;
    gap: 4rem;
  }
  .gym_trainers .colBox {
    display: flex;
    gap: 1rem;
    width: 100%;
  }
  .gym_trainers .cardBox .pic {
    margin-bottom: 2rem;
  }
  .gym_trainers .cardBox p {
    padding: 0 6% 0 0;
  }
  .gym_trainers .btn_internal {
    margin-top: 2rem;
    padding: 0 6% 0 0;
  }
  /*---------------------
　PRICE & VOICE
-----------------------*/
  .price_voice .width1100 {
    padding: 0 6%;
  }
  .price_voice .twoColBox {
    gap: 4rem;
    flex-direction: column;
    justify-content: inherit;
  }
  .price_voice .colBox {
    aspect-ratio: 65 / 40;
    position: relative;
  }
  .price_voice .colBox a {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 2rem 1.5rem 1.5rem 2.5rem;
    justify-content: flex-end;
  }
  .price_voice .colBox.priceBox a {
    background: url("../images/top/price_pic_sp.jpg") no-repeat;
    background-size: cover;
  }
  .price_voice .colBox.voiceBox a {
    background: url("../images/top/voice_pic_sp.jpg") no-repeat;
    background-size: cover;
  }
  .price_voice .title-tate {
    color: #fff;
    position: absolute;
    top: -3px;
    left: -6px;
  }
  .arr_wh {
    line-height: 1.8;
    min-height: 5rem;
    display: flex;
    align-items: center;
    padding: 0 7rem 0 0;
    width: 100%;
  }
  .arr_wh:before {
    background: #fff url(../images/shared/arr_black02_right.png) no-repeat center;
    background-size: 7px auto;
  }
  /*---------------------
　CSL
-----------------------*/
  .smile-about .smile-aboutArea {
    display: block;
    padding: 0;
    width: calc(100% + 8%);
  }
  .smile-about .smile-aboutBox {
    background: #fff;
    padding: 5rem 4rem 4rem 0;
    max-width: 50rem;
  }
  .smile-about .smile-aboutBox .pic {
    position: relative;
    margin-bottom: 2rem;
  }
  .smile-about .smile-aboutBox .pic .tit {}
  .smile-about .smile-aboutBox p {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
  }
  .smile-about .dots .slick-dots {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
  }
  .smile-about .dots .slick-dots li {
    width: 50%;
    min-height: 30px;
  }
  .smile-about .dots .slick-dots li button {
    font-size: 0;
    background: #fff;
    border: none;
    border-right: solid 1px #d2d5d8;
    border-bottom: solid 1px #d2d5d8;
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
  }
  .smile-about .dots .slick-dots li:nth-child(1) button, .smile-about .dots .slick-dots li:nth-child(2) button {
    border-top: solid 1px #d2d5d8;
  }
  .smile-about .dots .slick-dots li.slick-active button {
    background: #d2d5d8;
  }
  .smile-about .dots .slick-dots li button:before {
    color: #383838;
    font-size: 1.2rem;
    line-height: 1;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #slick-slide-control00:before {
    content: "カウンセリング";
  }
  #slick-slide-control01:before {
    content: "体組成診断";
  }
  #slick-slide-control02:before {
    content: "体験トレーニング";
  }
  #slick-slide-control03:before {
    content: "カウンセリング";
  }
  .smile-about .dots .slick-dots li button:after {
    color: #e8e9ea;
    font-size: 1rem;
    position: absolute;
    top: 50%;
    left: 0.8rem;
    transform: translateY(-50%);
  }
  #slick-slide-control00:after {
    content: "01";
  }
  #slick-slide-control01:after {
    content: "02";
  }
  #slick-slide-control02:after {
    content: "03";
  }
  #slick-slide-control03:after {
    content: "04";
  }
  .smile-about .dots .slick-dots li.slick-active button:after {
    color: #fff;
  }
  .arrows {
    margin: 2.5rem 0 0;
    gap: 1.5rem;
    display: flex;
  }
  .arrows button {
    font-size: 0;
    width: 5rem;
    height: 5rem;
    border: none;
  }
  .arrows .slick-prev {
    background: #fff url("../images/shared/arr_black02_left.png") no-repeat center;
    background-size: 6px auto;
  }
  .arrows .slick-next {
    background: #fff url("../images/shared/arr_black02_right.png") no-repeat center;
    background-size: 6px auto;
  }
  .arrows .slick-disabled {
    background-color: #d2d5d8;
  }
  /*---------------------
　FAQ
-----------------------*/
  .faq .faq-box {
    margin-bottom: 1.5rem;
  }
  .faq .faq-box dt {
    display: flex;
    min-height: 5rem;
  }
  .faq .faq-box dt:before {
    right: 1.5rem;
    width: 1rem;
    height: 2px;
  }
  .faq .faq-box dt:after {
    right: 1.5rem;
    width: 1rem;
    height: 2px;
  }
  .faq .faq-box .q {
    width: 2.5rem;
    font-size: 1.5rem;
  }
  .faq .faq-box .qTit {
    padding: 1rem 4rem 1rem 1.5rem;
    flex: 1;
  }
  .faq .faq-box dd {
    margin-top: 1.5rem;
    padding: 0 0 1rem 4rem;
  }
  .faq .faq-box dd p {
    line-height: 1.8;
  }
  /*---------------------
　NEWS
-----------------------*/
  .news .catchTxt {
    margin-bottom: 2rem;
  }
  .news .newsBox a {
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 1.5rem 3rem 1.5rem 0;
  }
  .news .newsBox a:before {
    background: #be9c0d url("../images/shared/arr_white02_right.png") no-repeat center;
    background-size: 4px auto;
    width: 15px;
    height: 15px;
    right: 0;
  }
  /*---------------------
　COLUMN
-----------------------*/
  .column .columnArea {
    display: block;
    width: calc(100% + 8%);
  }
  .column .slick-track {
    display: flex;
  }
  .column .columnBox {
    width: 22.5rem;
    height: auto;
    float: none;
    margin: 0 2.4rem 0 0;
  }
  .column .columnBox a {
    display: block;
    padding: 2rem 1.5rem 4.5rem;
  }
  .column .columnBox a:before {
    content: "";
    background: #be9c0d url("../images/shared/arr_white02_right.png") no-repeat center;
    background-size: 4px auto;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 2rem;
    bottom: 2rem;
  }
  .column .columnBox .label {
    display: inline-block;
    padding: 7px 1.3rem;
    margin-bottom: 1rem;
  }
  .column .columnBox .tit {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 1.8;
  }
}
.img-left {
  width: 45%;
    float: left;
}
h3.lec{
    font-size: 24px;
}
h4.lec{
    font-size: 20px;
}
@media screen and (max-width:599px) {
  .img-left {
    width: 100%;
      padding-bottom: 15px;
      float: none;
  }
    h3.lec{
    font-size: 22px;
}
    h4.lec{
    font-size: 18px;
}
}
.smileArea {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.6);
  padding: 0;
}

.smileBox {
  width: calc(33.333% - 10px);
  background: white;
  border: 1px solid #ddd;
  padding: 15px;
  position: relative;
}

/* ナンバリングのデザイン */
.smileBox h4 {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.smileBox h4 span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #7bccd0;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  margin-right: 10px;
}

/* 画像サイズ調整 */
.smileBox .pic img {
  width: 100%;
  height: auto;
  display: block;
}

/* 本文のスタイル */
.smileBox p {
  font-size: 16px;
  margin-top: 10px;
}

/* スマホ時の1カラムレイアウト */
@media (max-width: 599px) {
  .smileBox {
    width: 100%;
  }
}
.bi-care-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* テキストを縦方向中央揃え */
  padding: 0;
}

.bi-care-image {
  width: 50%;
  min-width: 250px;
  flex-shrink: 0;
}

.bi-care-image img {
  width: 100%;
  height: auto;
  display: block;
}

.bi-care-text {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  align-items: center; /* 縦方向中央揃え */
}

.bi-care-text p {
  margin: 0;
}

/* スマホ時 (599px以下) */
@media (max-width: 599px) {
  .bi-care-section {
    flex-direction: column;
    text-align: left;
  }
  
  .bi-care-image,
  .bi-care-text {
    width: 100%;
  }

  .bi-care-text {
    padding: 10px;
    display: block; /* 通常のテキスト表示 */
  }
}
.bi-care-section-reverse {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* テキストを縦方向中央揃え */
  padding: 0;
  flex-direction: row-reverse; /* 画像を右に */
}

.bi-care-text-reverse {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  align-items: center; /* 縦方向中央揃え */
}

.bi-care-text-reverse p {
  margin: 0;
}

/* スマホ時 (599px以下) */
@media (max-width: 599px) {
  .bi-care-section-reverse {
    flex-direction: column; /* 画像が上、テキストが下 */
    text-align: left;
  }

  .bi-care-text-reverse,
  .bi-care-image {
    width: 100%;
  }

  .bi-care-text-reverse {
    padding: 10px;
    display: block; /* 通常のテキスト表示 */
  }
}

.smile-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: stretch;
}

/* PCでは4カラム */
.smile-col {
  width: calc(25% - 10px);
  display: flex;
}

/* カラムデザイン */
.smile-icon-box {
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
  background-color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 画像を適切に配置 */
.smile-icon-box img {
  max-width: 100%;
  height: auto;
}

/* テキストエリアを調整 */
.smile-icon-box p {
  flex-grow: 1;
  display: flex;
  padding-top: 10px;
    font-size: 16px;
}
.smile-icon-box h3 {
  font-size: 19px!important;
    letter-spacing: 1px;
}
/* スマホでは1カラム */
@media (max-width: 599px) {
  .smile-col {
    width: 100%;
  }
}

    .qa-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        width: 100%;
    }
    .qa-box {
        background: #eefbfc;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    }
    .qa-box .question {
        position: relative;
        padding-left: 30px;
    }
    .qa-box .question::before {
        content: "Q";
        position: absolute;
        left: 0;
        top: 0;
        background: #ffdd15;
        color: #fff;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 16px;
        font-weight: bold;
    }
    .qa-box .answer {
        margin-top: 10px;
        position: relative;
        padding-left: 30px;
    }
    .qa-box .answer::before {
        content: "A";
        position: absolute;
        left: 0;
        top: 0;
        background: #7bccd0;
        color: #fff;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 16px;
        font-weight: bold;
    }
@media (max-width: 599px) {
    .qa-container {
        grid-template-columns: 1fr; /* 1カラムに変更 */
    }
}
.contract-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    align-items: flex-start; /* 高さを揃えない */
}

/* 各テーブルを囲むコンテナ */
.contract-item {
    flex: 1 1 calc(50% - 10px); /* パソコンでは2カラム */
    min-width: 300px; /* 最小幅を確保 */
}

/* スマホ（幅599px以下）では1カラムに変更 */
@media (max-width: 599px) {
    .contract-item {
        flex: 1 1 100%; /* 1カラム */
    }
}

/* テーブルのスタイル */
.sf-contract-table {
    width: 100%;
    border-collapse: collapse;

}


.contract-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    align-items: flex-start; /* 高さを揃えない */
}

/* 各テーブルを囲むコンテナ */
    .contract-item {
        flex: 1 1 100%; /* 1カラム */
    }



/* テーブルのスタイル */
.sf-contract-table {
    width: 100%;
    border-collapse: collapse;

    border: 1px solid #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.sf-contract-table th, 
.sf-contract-table td {
    border: 1px solid #fff;
    padding: 10px; /* テキストの余白を確保 */
    text-align: left;
    vertical-align: middle;
    line-height: 1.5;

}

.sf-contract-table th {
    background-color: #f9fafb;
    font-weight: bold;
}

.sf-contract-table tr:nth-child(even) {
    background-color: #f3f4f6;
}
th.th-title{
    background-color: #fff;
    color: #167f92;
}
.flow_design07 {
  display: flex;
  justify-content: center;
  align-items: center;

}

.flow07 {
    width: 100%;
  padding-left: 0;
}

.flow07 > li {
  list-style-type: none;
  display: flex;
}

.flow07 > li:not(:last-child) {
  margin: 0 0 50px;
}

.flow07 > li .icon07 {
  width: 90px;
  box-sizing: border-box;
  padding: 20px 10px 10px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  background: #7bccd0;
  border-radius: 5px 5px 0 0;
  position: relative;
  line-height: 125%;
  margin: 0;
}
.flow07 > li .icon07::after {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 20px solid #7bccd0;
  position: absolute;
  bottom: -20px;
  left: 0;
}

.flow07 > li dl {
  padding: 0 0 0 30px;
  width: calc(100% - 115px);
}

.flow07 > li dl dt {
  padding: 0 0 5px;
  margin: 0 0 15px;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 4px solid #CCCCCC;
  position: relative;
}
.flow07 > li dl dt::after {
  content: '';
  width: 15%;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
  background-color: #B058D6;
}

.flow07 > li dl dd {
  margin: 0;
    line-height: 1.4;

}
.flow-no{
    display: block;
    font-size: 3rem;
}
@media (max-width: 599px) {
    .flow07 > li:not(:last-child) {
  margin: 0 0 30px;
}

.flow07 > li .icon07 {
  width: 50px;
  box-sizing: border-box;
  padding: 10px 5px;
  line-height: 110%;
}
.flow07 > li .icon07::after {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 20px solid #7bccd0;
  position: absolute;
  bottom: -20px;
  left: 0;
}

.flow07 > li dl {
  padding: 0 0 0 10px;
  width: calc(100% - 75px);
}

.flow-no{

    font-size: 2rem;
}
}
.map{
    width: 100%;
}
.company-info {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
  border: 1px solid #ddd;
}

.company-info th,
.company-info td {
  padding: 12px;
  border: 1px solid #ddd;
}

.company-info th {
  background-color: #f4f4f4;
  text-align: left;
    font-weight: normal;
  width: 7em;
}

.company-info td {
  background-color: #fff;
}



.company-fax {
  font-weight: bold;
  color: #ff5733;
}
.custom-list {
  list-style: none; /* デフォルトのリストマーカーを削除 */
  padding-left: 0; /* 左の余白を削除 */
  font-size: 16px; /* フォントサイズ14px */
  text-align: left; /* 左寄せ */
    line-height: 1.4;
    padding-top: 10px;
}

.custom-list li {
  position: relative;
  padding-left: .6em; /* 「・」のスペースを確保 */
}

.custom-list li::before {
  content: "・"; /* リストマーカーとして「・」を追加 */
  position: absolute;
  left: -5px;
}
.banner-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            gap: 2px;
            padding: 2px;
        
            margin: auto;
        }

        .banner {
            flex: 1;
    
            text-align: center;
            padding: 5px 2px 2px;
            transition: 0.3s;
            text-decoration: none;
            color: #333;
            border: solid #999 1px;
        }

        .banner:hover {
            background-color: #e0e0e0;
        }

        .banner i {
            font-size: 20px;
            color: #7BCCD0;
            margin-bottom: 2px;
        }

        .banner h3 {
            font-size: 14px;
            margin-top: 0;
        }
.banner-container {
    display: none;
}

/* スマホ（幅599px以下）で表示 */
@media (max-width: 599px) {
    .banner-container {
        display: flex;
        justify-content: space-between;
        overflow-x: auto; /* 横スクロールを可能にする */
    }
    .banner {
        flex: 1;
        min-width: 30%; /* 各バナーを均等に並べる */
    }
}
 /* PCでは非表示 */
        .fixBot {
            display: none;
        }

        /* スマホ（幅599px以下）で表示 */
        @media (max-width: 599px) {
            .fixBot {
                display: block;
                width: 100%;
                text-align: center;
            }

            .btn_cmn {
                display: flex;
                justify-content: space-around;
                gap: 1px;
            }

            .btn_cmn.sp a {
                flex: 1;
                text-decoration: none;
                color: #333;
                background: rgba(255, 255, 255, 0.7);
                padding: 5px 0;
                border: 1px solid #ccc;
                font-size: 14px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .btn_cmn.sp a i {
                font-size: 18px;
                margin-bottom: 1px;
                color: #7BCCD0;
            }
        }