@charset "utf-8";

/* CSS Document */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 28px;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

body * {
  box-sizing: border-box;
}

h1 {
  position: absolute;
  left: -9999px;
}

#fv {
  background-image: url(../image/fv_pc_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width:767px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}

/* PCとSPの改行切り替え */
@media screen and (min-width: 768px) {
  .br-pc {
    display: block;
  }

  .br-sp {
    display: none;
  }
}

@media only screen and (max-width:767px) {
  .br-pc {
    display: none;
  }

  .br-sp {
    display: block;
  }
}

h2 {
  text-align: center;
}

.center {
  text-align: center;
}

.color-mazenda {
  color: #d6004a;
}

.marker_yellow_hoso {
  background: linear-gradient(transparent 60%, #fde93c 60%);
}

.marker_blue_hoso {
  background: linear-gradient(transparent 60%, #cbf1fc 60%);
}

.marker_pink_hoso {
  background: linear-gradient(transparent 60%, #f8c1d8 60%);
}

.clear {
  clear: both;
}

.section_space_m {
  height: 15px;
}

.section_space_l {
  height: 30px;
}

figure {
  float: left;
  margin: 15px 25px 10px 0;
  width: 15%;
}

figure img {
  max-width: 100%;
}

.target-men {
  font-size: 13px;
  line-height: 22px;
  padding: 8px 0px;
  background: lightblue;
  margin-bottom: 5px;
}

.target-women {
  font-size: 13px;
  line-height: 22px;
  padding: 8px 0px;
  background: lightpink;
  margin-bottom: 5px;
}

.target-all {
  font-size: 13px;
  line-height: 22px;
  padding: 8px 0px;
  background: lightyellow;
  margin-bottom: 5px;
}

/*****************************************
左サイドコンテンツ
*****************************************/
h2.side {
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

h2.side_red {
  background: #cc0000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

/*サイドのスライドショー*/
.slideshow-container {
  position: relative;
  max-width: 100%;
  margin: auto;
}

.slide {
  display: none;
}

img {
  width: 100%;
  height: auto;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  cursor: pointer;
  color: #db8486;
}

.prev {
  left: 0px;
}

.next {
  right: 0px;
}

/*サイドのアイコンメニュー*/
.icon-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 90%;
  margin: auto;
}

.icon-link {
  text-decoration: none;
  color: #333;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  padding: 10px 0px 10px;
  height: 90px;
  background-color: #fff;
  border: 1px solid #654a1e;
  /*transition: background-color 0.3s, color 0.3s;*/
  transition: transform 0.2s ease;
  /* アニメーションの速度とタイミングを指定 */
}

/* バックフェースを非表示にする */
.icon {
  backface-visibility: hidden;
}

.icon i {
  font-size: 30px;
  margin-bottom: 10px;
  color: #333;
}

.icon:hover i {
  color: #fff;
}

.menu-name {
  font-size: 0.8em;
}

/* 各アイコンの色を指定 */
.icon i.fas {
  color: #654a1e;
  /* 好きな色に変更 */
}

.icon:hover {
  background-color: #c9ae81;
  color: #333;
  /* transform: scale(1.02); */
  /* この行をコメントアウトまたは削除 */
}

/* ホバー時のアイコンの色を白に設定 */
.icon:hover i.fas {
  color: #fff;
}

/* ホバー時のテキスト色を白に設定 */
.icon:hover .menu-name {
  color: #fff;
}

/*pickupリンクボタン*/
.pickup_link {
  text-align: center;
  margin: 5px auto 0px;
}

.pickup_link a {
  text-decoration: none;
}

.pickup_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 250px;
  margin: 0 auto;
  padding: 1em 2em;
  overflow: hidden;
  border: none;
  border-radius: 5px;
  background-color: #d74b6c;
  color: #fff;
  font-size: 1em;
}

.pickup_btn a {
  text-decoration: none;
  /* リンクの下線を非表示にする */
}

.pickup_btn::before {
  display: block;
  position: absolute;
  top: -50%;
  left: -30%;
  transform: rotate(30deg);
  width: 70px;
  height: 100px;
  content: '';
  background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
  animation: animation-button-010 2s infinite linear;
}

@keyframes animation-button-010 {
  17% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

.pickup_btn:hover {
  background-color: #f07e99;
}

.kobetsu {
  font-size: 13px;
  text-align: center;
  color: #d74b6c;
  margin-bottom: 15px;
}

/*****************************************
メインコンテンツ
*****************************************/
@media screen and (min-width:768px) {
  .slider-container-sp {
    display: none;
  }

  /*SECTION-0 業種イメージ（料金ページへのリンク）エリア*/
  .section-0 {
    width: 100%;
    padding: 0px;
    background: #fff;
  }

  .scroll-container {
    position: relative;
    overflow: auto;
    width: 100%;
  }

  .image-wrapper {
    display: flex;
    width: 100%;
    /* 横幅を100%に設定 */
    animation: scrollAnimation 40s linear infinite;
    background-color: #000;
    opacity: 0.8;
  }

  .image-wrapper img {
    max-width: 100%;
    height: auto;
  }

  .centered-link {
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
  }

  @keyframes scrollAnimation {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-100% - 20px));
      /* -20px は画像間の余白を考慮 */
    }
  }

  /*光るボタン*/
  .btn-hikaru {
    width: 500px;
    display: inline-block;
    padding: 10px 20px;
    background-color: rgba(223, 125, 157, 0.9);
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    transition: background-color 0.3s;
  }

  /* ボタンホバーアニメーション */
  .btn-hikaru::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 80%);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .btn-hikaru:hover {
    background-color: #eb6d81;
  }

  .btn-hikaru:hover::before {
    opacity: 1;
  }
}

/* スクロールバーを非表示にする */
.scroll-container {
  scrollbar-width: none;
  /* Firefoxに対応 */
  -ms-overflow-style: none;
  /* IEに対応 */
}

/* Firefox用の非表示設定 */
.scroll-container::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
}

/* IE用の非表示設定 */
.scroll-container {
  -ms-overflow-style: none;
}

/* スクロールバーの幅を考慮した余白調整 */
.scroll-container {
  margin-bottom: -17px;
}

/*よくある質問*/
.cp_qa *,
.cp_qa *:after,
.cp_qa *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cp_qa .cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 1em 0;
  color: #333;
  font-size: 1.2em;
}

@media only screen and (max-width: 736px) {
  .cp_qa .cp_actab {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 1em 0;
    color: #333;
    font-size: 1.0em;
  }
}

.cp_qa .cp_actab input {
  position: absolute;
  opacity: 0;
}

/* 質問 */
.cp_qa .cp_actab label {
  font-weight: 500;
  line-height: 1.6em;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 1em 3em 1em 2.5em;
  cursor: pointer;
  text-indent: 1em;
  border-radius: 0.5em;
  background: #f1f4f4;
  font-size: 16px;
}

.cp_qa .cp_actab label::before {
  font-family: serif;
  font-size: 1.2em;
  margin-left: -2em;
  padding-right: 0.5em;
  content: 'Q';
  color: #0761a0;
}

.cp_qa .cp_actab label:hover {
  transition: all 0.3s;
  color: #333;
}

/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
  font-size: 1.7em;
  font-weight: bold;
  line-height: 2em;
  position: absolute;
  top: 0;
  right: 0;
  content: '▼';
  display: inline-block;
  width: 2em;
  height: 2em;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}

/* 答え */
.cp_qa .cp_actab .cp_actab-content {
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0 2.5em;
  -webkit-transition: max-height 0.2s;
  transition: max-height 0.2s;
  border-radius: 0 0 0.5em 0.5em;
  font-size: 16px;
}

.cp_qa .cp_actab .cp_actab-content::before {
  font-family: serif;
  font-size: 1.5em;
  position: absolute;
  margin: 0.6em 0 0 -1em;
  padding: 0;
  content: 'A';
  color: #cc0000;
}

.cp_qa .cp_actab .cp_actab-content p {
  margin: 1em 1em 1em 0;
  font-size: 14px;
  line-height: 24px;
}

/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked~.cp_actab-content {
  max-height: 40em;
  border: 10px solid #b2d3d5;
}

/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked~label {
  color: #333;
  border-radius: 0.5em 0.5em 0 0;
}

/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked+label::after {
  content: '▲';
}

/*流れ*/
.flow-design {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.flow {
  padding-left: 0;
  border-bottom: solid 1px #E1E8ED;
}

.flow>li {
  list-style-type: none;
  display: flex;
  padding: 20px 0;
  border-top: solid 1px #E1E8ED;
}

.flow>li dl dt {
  font-size: 1.2em;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 10px;
}

.flow>li .icon-k {
  line-height: 1;
  font-size: 2em;
  font-weight: bold;
  color: #E26B5D;
  text-align: center;
  width: 60px;
  position: relative;
  margin-top: 0;
}

.flow>li .icon-k::before {
  content: 'STEP';
  font-size: 0.3em;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 1px;
}

.flow>li .icon-k::after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 40px);
  background-color: #858585;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  margin: auto;
}

.flow>li dl dd {
  margin: 0;
  font-size: .9em;
}

.flow>li dl {
  width: calc(100% - 70px);
  margin-top: 0.8em;
}

/*オフィス案内*/
.main_office {
  font-size: 15px;
  line-height: 25px;
}

.office {
  border-collapse: collapse;
  width: 100%;
  color: #ffffff;
}

.office th,
.office td {
  border-bottom: 1px solid #d2c7b7;
  padding: 8px;
}

.office th {
  background: none;
  text-align: left;
  width: 22%;
}

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

  .office tr,
  .office th,
  .office td {
    display: block;
    width: auto;
  }

  .office tr:first-child {
    border-top: 0px solid #d2c7b7;
  }

  .office th,
  .office td {
    border: 0px solid #d2c7b7;
  }

  .office th {
    background: #1e0500;
  }
}

/*========= ページトップのためのCSS ===============*/
#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(249, 90, 142, 0.6);
  padding: 0 20px;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 30px;
  height: 60px;
  line-height: 60px;
}

#back-to-top:hover {
  background-color: rgba(249, 90, 142, 0.8);
}

/*料金案内（アコーディオン設定）*/
.accordion {
  display: block;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.ac-h-yellow {
  background-color: #fcf4e6;
  padding: 20px;
}

.ac-h-blue {
  background-color: #d6eefb;
  padding: 20px;
}

.ac-h-pink {
  background-color: #fadce9;
  padding: 20px;
}

.ac-h-green {
  background-color: #e5f3ef;
  padding: 20px;
}

.ac-h-purple {
  background: #e4dfef;
  padding: 20px;
}

.ac-h-pickup {
  background: #e73821;
  padding: 20px;
}

.accordion-button {
  background-color: #cc0000;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 15px 10px;
  cursor: pointer;
}

.accordion-button-white {
  background-color: #fff57f;
  color: #cc0000;
  border: none;
  border-radius: 3px;
  padding: 15px 10px;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 20px;
}

.accordion-content ul li {
  list-style-type: disc;
  margin-left: -20px;
}

.accordion.active .accordion-content {
  display: block;
}

.yen {
  font-size: 1.2em;
  font-weight: 600;
  color: #0c3397;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

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

  /* 料金案内（アコーディオン設定） */
  .accordion {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
  }

  .accordion-header {
    display: block;
    /* モバイル表示ではブロック要素に変更 */
    background-color: #f2f2f2;
    padding: 10px;
  }

  .accordion-text {
    display: flex;
    flex-direction: column;
  }

  .accordion-button {
    background-color: #cc0000;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 10px;
    cursor: pointer;
    margin: 10px auto 0px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Zen Kaku Gothic New', sans-serif;

    /* アニメーションの設定 */
    animation: yoyo 1s infinite alternate;
  }

  @keyframes yoyo {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-10px);
    }
  }

  .accordion-content {
    max-height: 100vh;
    /* ビューポートの高さの100% */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .ac-h-yellow {
    background-color: #fcf4e6;
    padding: 20px;
  }

  .ac-h-blue {
    background-color: #d6eefb;
    padding: 20px;
  }

  .ac-h-pink {
    background-color: #fadce9;
    padding: 20px;
  }

  .ac-h-green {
    background-color: #e5f3ef;
    padding: 20px;
  }

  .ac-h-purple {
    background: #e4dfef;
    padding: 20px;
  }

  .ac-h-pickup {
    background: #e73821;
    padding: 20px;
    text-align: center;
  }
}

/*詳細内の料金表*/
.page-price-ttl {
  font-weight: 600;
  margin-bottom: 10px;
}

.p-memo {
  font-size: 13px;
  line-height: 23px;
  color: #333;
  margin: 5px 0px;
}

.p-gyousyu {
  font-size: 13px;
  line-height: 23px;
  color: #333;
  margin: 10px 0px;
}

.page-price {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  line-height: 23px;
}

.page-price th,
.page-price td {
  border: 1px solid #dbe1e8;
  padding: 4px 8px;
}

.page-price th {
  background: #f9fafc;
  text-align: left;
  width: 70%;
}

.g-sample {
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 1px #105e95;
  border-radius: 8px;
  color: #333;
}

.g-sample .box-title {
  position: absolute;
  display: inline-block;
  top: -10px;
  left: 10px;
  padding: 0px 9px;
  line-height: 1;
  font-size: 15px;
  background: #FFF;
  color: #105e95;
  font-weight: bold;
}

.g-sample p {
  margin: 0;
  padding: 10px 0 0 0;
  font-size: 90%;
  line-height: 160%;
}

/*フッター*/
#footer {
  height: 150px;
  background: #333;
  padding: 20px;
  color: #fff;
  font-size: 0.8em;
  text-align: center;
}