@charset "UTF-8";

/*-----------------------------
common
-----------------------------*/
#page-title {
  padding-top: 120px;
}

.hana-breadcrumb-wrap {
  margin-bottom: 32px;
}

ol.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ol.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "title", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--brown);
}

ol.breadcrumb li:not(:last-child)::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--yellow);
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}

ol.breadcrumb li a,
ol.breadcrumb li.current {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--brown);
  background: var(--color4);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
}

ol.breadcrumb li a {
  color: var(--brown);
  text-decoration: none;
  transition:
    transform .25s cubic-bezier(0.16, 1, 0.3, 1),
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

ol.breadcrumb li a:hover {
  transform: translateY(-3px);
  background: var(--pink);
  color: var(--white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

ol.breadcrumb li.current {
  background: var(--brown);
  color: var(--white);
}

@media (max-width: 768px) {
  .hana-breadcrumb-wrap {
    margin-bottom: 24px;
  }

  ol.breadcrumb {
    gap: 8px;
  }

  ol.breadcrumb li {
    gap: 8px;
    font-size: 12px;
  }

  ol.breadcrumb li a,
  ol.breadcrumb li.current {
    min-height: 32px;
    padding: 6px 12px;
  }

  ol.breadcrumb li:not(:last-child)::after {
    width: 10px;
    height: 10px;
  }
}

/*-----------------------------
SERVICE
-----------------------------*/
#page-service {
  width: 1200px;
  margin: 0 auto;
}
@media (max-width: 959px) {
  #page-service {
    width: auto !important;
    margin: 0 10px;
  }
}
#page-service section#page-menu {
    margin-top: 50px;
}
#page-service section#page-menu div {
  display: flex;
  flex-wrap: wrap; /* 要素を折り返す */
  list-style: none;
  padding: 0;
  margin: 0;
}
#page-service section#page-menu a {
  flex: 1 1 calc(25% - 10px); /* 各要素を25%幅で配置（-10pxはマージン調整用） */
  margin: 2px; /* 要素間に隙間をつける */
  box-sizing: border-box; /* パディングやボーダーを含めた幅計算 */
  width: 297px;
  height: 107px;
  color: #fff;
  font-size: 16px;
  font-family: "title", sans-serif;
  text-align: center;
  display: flex; /* Flexboxを有効化 */
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
  position: relative;
}
#page-service section#page-menu a:hover {
  bottom: -10px;
  transition: all 0.2s;
}
@media (max-width: 959px) {
  #page-service section#page-menu a {
    flex: 1 1 calc(50% - 10px); /* 各要素を25%幅で配置（-10pxはマージン調整用） */
    font-size: 12px;
  }
}
#page-service section#page-menu a:first-child {
  border-top-left-radius: 20px;
}
#page-service section#page-menu a:nth-child(4) {
  border-top-right-radius: 20px;
}
#page-service section#page-menu a:nth-child(5) {
  border-bottom-left-radius: 20px;
}
#page-service section#page-menu a:last-child {
  border-bottom-right-radius: 20px;
}
@media (max-width: 959px) {
  #page-service section#page-menu a:first-child {
    border-top-left-radius: 20px;
  }
  #page-service section#page-menu a:nth-child(2) {
    border-top-right-radius: 20px;
  }
  #page-service section#page-menu a:nth-child(4) {
    border-top-right-radius: 0px;
  }
  #page-service section#page-menu a:nth-child(5) {
    border-bottom-left-radius: 0px;
  }
  #page-service section#page-menu a:nth-child(7) {
    border-bottom-left-radius: 20px;
  }
  #page-service section#page-menu a:last-child {
    border-bottom-right-radius: 20px;
  }
}
#page-service a.menu-drone {
  background: #F46195;
}
#page-service a.menu-drone::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 44px; /* SVGの幅 */
  height: 44px; /* SVGの高さ */
  background-image: url('../images/service/drone.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  top: 15px;
  position: absolute;
}
#page-service a.menu-drone::after {
  content: "ドローン(プログラミング教育/免許)"; /* 挿入する文字 */
  display: block; /* 必要に応じてブロック表示にする */
  margin-top: 50px;
}
#page-service a.menu-event {
  background: #F56B52;
}
#page-service a.menu-event::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 44px; /* SVGの幅 */
  height: 44px; /* SVGの高さ */
  background-image: url('../images/service/event.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  top: 15px;
  position: absolute;
}
#page-service a.menu-event::after {
  content: "イベントディレクション"; /* 挿入する文字 */
  display: block; /* 必要に応じてブロック表示にする */
  margin-top: 50px;
}
#page-service a.menu-web {
  background: #F2B630;
}
#page-service a.menu-web::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 44px; /* SVGの幅 */
  height: 44px; /* SVGの高さ */
  background-image: url('../images/service/web.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  top: 15px;
  position: absolute;
}
#page-service a.menu-web::after {
  content: "WEBコンサルティング、制作"; /* 挿入する文字 */
  display: block; /* 必要に応じてブロック表示にする */
  margin-top: 50px;
}
#page-service a.menu-dx {
  background: #9CC71D;
}
#page-service a.menu-dx::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 44px; /* SVGの幅 */
  height: 44px; /* SVGの高さ */
  background-image: url('../images/service/dx.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  top: 15px;
  position: absolute;
}
#page-service a.menu-dx::after {
  content: "DX戦略設計・運用支援"; /* 挿入する文字 */
  display: block; /* 必要に応じてブロック表示にする */
  margin-top: 50px;
}
#page-service a.menu-ai {
  background: #50BB7A;
}
#page-service a.menu-ai::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 44px; /* SVGの幅 */
  height: 44px; /* SVGの高さ */
  background-image: url('../images/service/ai.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  top: 15px;
  position: absolute;
}
#page-service a.menu-ai::after {
  content: "AIソリューション開発"; /* 挿入する文字 */
  display: block; /* 必要に応じてブロック表示にする */
  margin-top: 50px;
}
#page-service a.menu-sns {
  background: #62B1DD;
}
#page-service a.menu-sns::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 44px; /* SVGの幅 */
  height: 44px; /* SVGの高さ */
  background-image: url('../images/service/sns.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  top: 15px;
  position: absolute;
}
#page-service a.menu-sns::after {
  content: "SNSコンサルティング"; /* 挿入する文字 */
  display: block; /* 必要に応じてブロック表示にする */
  margin-top: 50px;
}
#page-service a.menu-illust {
  background: #5462B1;
}
#page-service a.menu-illust::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 44px; /* SVGの幅 */
  height: 44px; /* SVGの高さ */
  background-image: url('../images/service/illust.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  top: 15px;
  position: absolute;
}
#page-service a.menu-illust::after {
  content: "イラスト、動画、音楽制作"; /* 挿入する文字 */
  display: block; /* 必要に応じてブロック表示にする */
  margin-top: 50px;
}
#page-service a.menu-lca {
  background: #AF4F9C;
}
#page-service a.menu-lca::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 44px; /* SVGの幅 */
  height: 44px; /* SVGの高さ */
  background-image: url('../images/service/lca.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  top: 15px;
  position: absolute;
}
#page-service a.menu-lca::after {
  content: "地域貢献活動"; /* 挿入する文字 */
  display: block; /* 必要に応じてブロック表示にする */
  margin-top: 50px;
}


#page-service section.service {
  display: flex; /* 子要素を横並びにする */
  justify-content: space-between; /* 子要素間の間隔を均等にする（必要に応じて変更） */
  background: #fff;
  margin-top: 80px;
  border-radius: 20px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
}
#page-service section.service div.service-explanation {
  width: 50%;
}
#page-service section.service div.service-explanation .service-explanation-inner {
  padding: 50px;
}
#page-service section.service div.service-explanation .service-explanation-inner h2 {
  font-size: 32px;
  color: #62B1DD;
  padding: 0 !important;
  margin-bottom: 30px;
}
#page-service section.service div.service-explanation .service-explanation-inner h2::after {
  content: ""; /* 空の要素を生成 */
  display: block;
  background-image: url(../images/line-f.png);
  width: 182px;
  height: 6px;
  margin-top: 30px;
}
#page-service section.service div.service-explanation .service-explanation-inner p {
  font-size: 16px;
  margin-bottom: 30px;
}
#page-service section.service div.service-explanation .service-explanation-inner .service-info {
}
#page-service section.service div.service-explanation .service-explanation-inner .service-info h3 {
  display: flex; /* Flexbox を使用 */
  justify-content: center; /* 横方向に中央揃え */
  align-items: center; /* 縦方向に中央揃え */
  background: #62B1DD;
  width: 140px;
  height: 40px;
  color: #fff;
  border-radius: 0 100px 100px 0;
  margin-bottom: -20px;
  z-index: 999;
  position: relative;
}
#page-service section.service div.service-explanation .service-explanation-inner .service-info ul {
  background: #F9F8F2;
  border-radius: 0 10px 10px 10px;
  padding: 20px;
  display: flex; /* Flexbox を使用 */
  flex-wrap: wrap; /* 折り返しを有効にする */
  gap: 20px; /* 要素間の間隔を設定（任意） */
  list-style: none; /* リストスタイルを削除 */
  margin-bottom: 30px;
}
#page-service section.service div.service-explanation .service-explanation-inner .service-info ul li {
  flex: 1 1 calc(50% - 10px); /* 各要素を50%幅で配置（gapに合わせて調整） */
  color: #62B1DD;
  box-sizing: border-box; /* パディングやボーダーを含めた幅計算 */
}
#page-service section.service div.service-explanation .service-explanation-inner .drone-info ul li:first-child {
  flex: 1 1 calc(100% - 10px); /* 各要素を50%幅で配置（gapに合わせて調整） */
  margin-top: 15px;
}
#page-service section.service div.service-explanation .service-explanation-inner .event-info ul li:first-child,
#page-service section.service div.service-explanation .service-explanation-inner .illust-info ul li:first-child,
#page-service section.service div.service-explanation .service-explanation-inner .lca-info ul li:first-child
{
  flex: 1 1 calc(100% - 10px); /* 各要素を50%幅で配置（gapに合わせて調整） */
  margin-top: 15px;
}
#page-service section.service div.service-explanation .service-explanation-inner .event-info ul li:nth-child(2),
#page-service section.service div.service-explanation .service-explanation-inner .event-info ul li:nth-child(3),
#page-service section.service div.service-explanation .service-explanation-inner .event-info ul li:nth-child(4),
#page-service section.service div.service-explanation .service-explanation-inner .illust-info ul li:nth-child(2) {
  flex: 1 1 calc(100% - 10px); /* 各要素を50%幅で配置（gapに合わせて調整） */
}
#page-service section.service div.service-explanation .service-explanation-inner .web-info ul li:first-child,
#page-service section.service div.service-explanation .service-explanation-inner .web-info ul li:nth-child(2),
#page-service section.service div.service-explanation .service-explanation-inner .dx-info ul li:first-child,
#page-service section.service div.service-explanation .service-explanation-inner .dx-info ul li:nth-child(2),
#page-service section.service div.service-explanation .service-explanation-inner .ai-info ul li:first-child,
#page-service section.service div.service-explanation .service-explanation-inner .ai-info ul li:nth-child(2),
#page-service section.service div.service-explanation .service-explanation-inner .sns-info ul li:first-child,
#page-service section.service div.service-explanation .service-explanation-inner .sns-info ul li:nth-child(2)
{
  flex: 1 1 calc(50% - 10px); /* 各要素を50%幅で配置（gapに合わせて調整） */
  margin-top: 15px;
}
#page-service section.service div.service-explanation .service-explanation-inner .web-info ul li:nth-child(3) {
  flex: 1 1 calc(100% - 10px); /* 各要素を50%幅で配置（gapに合わせて調整） */
}
#page-service section.service div.service-explanation .service-explanation-inner .sns-info ul li:nth-child(5),
#page-service section.service div.service-explanation .service-explanation-inner .sns-info ul li:nth-child(6) {
  flex: 1 1 calc(100% - 10px); /* 各要素を50%幅で配置（gapに合わせて調整） */
}
#page-service section.service div.service-image {
  width: 50%;
  position: relative;
}
#page-service section.service div.service-image img {
  margin-top: 50px;
}
#page-service section.service div.service-image div.mark {
  position: absolute;
  width: 100px;
  height: 110px;
  border-radius: 0 0 100px 100px;
  display: flex;
  justify-content: center;
  z-index: 99;
}
#page-service section.service div.service-image div.drone-mark {
  background: #F46195;
}
#page-service section.service div.service-image div.event-mark {
  background: #F56B52;
}
#page-service section.service div.service-image div.web-mark {
  background: #F2B630;
}
#page-service section.service div.service-image div.dx-mark {
  background: #9CC71D;
}
#page-service section.service div.service-image div.ai-mark {
  background: #50BB7A;
}
#page-service section.service div.service-image div.sns-mark {
  background: #62B1DD;
}
#page-service section.service div.service-image div.illust-mark {
  background: #5462B1;
}
#page-service section.service div.service-image div.lca-mark {
  background: #AF4F9C;
}
#page-service section.service div.service-image div.drone-mark::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 50px; /* SVGの幅 */
  height: 50px; /* SVGの高さ */
  background-image: url('../images/service/drone.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.event-mark::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 50px; /* SVGの幅 */
  height: 50px; /* SVGの高さ */
  background-image: url('../images/service/event.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.web-mark::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 50px; /* SVGの幅 */
  height: 50px; /* SVGの高さ */
  background-image: url('../images/service/web.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.dx-mark::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 50px; /* SVGの幅 */
  height: 50px; /* SVGの高さ */
  background-image: url('../images/service/dx.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.ai-mark::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 50px; /* SVGの幅 */
  height: 50px; /* SVGの高さ */
  background-image: url('../images/service/ai.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.sns-mark::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 50px; /* SVGの幅 */
  height: 50px; /* SVGの高さ */
  background-image: url('../images/service/sns.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.illust-mark::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 50px; /* SVGの幅 */
  height: 50px; /* SVGの高さ */
  background-image: url('../images/service/illust.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.lca-mark::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 50px; /* SVGの幅 */
  height: 50px; /* SVGの高さ */
  background-image: url('../images/service/lca.svg'); /* SVGコード */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.logo {
  background: #fff;
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  margin-top: -70px;
}
#page-service section.service div.service-image div.right {
  right: 30px;
}
#page-service section.service div.service-image div.left {
  left: 30px;
}
#page-service section.service div.service-image div.faraway-logo::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 97px; /* SVGの幅 */
  height: 71px; /* SVGの高さ */
  background-image: url('../images/service/faraway-logo.svg');
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}
#page-service section.service div.service-image div.lca-logo::before {
  content: ""; /* 空の要素を生成 */
  display: inline-block; /* 要素をインラインブロックで表示 */
  width: 129px; /* SVGの幅 */
  height: 49px; /* SVGの高さ */
  background-image: url('../images/service/matahari-marche.png');
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 要素内で中央に配置 */
  vertical-align: middle; /* テキストと揃える */
  position: absolute;
  top: 50%; /* 親要素の縦の中央に配置 */
  left: 50%; /* 必要なら横の中央も設定 */
  transform: translate(-50%, -50%); /* 中央基準に補正 */
}


@media (max-width: 959px) {

  
  #page-service section.service div.service-explanation .service-explanation-inner h2 {
    font-size: 28px;
    color: #62B1DD;
    padding: 0 !important;
    margin-bottom: 30px;
    text-align: center;
  }
  #page-service section.service div.service-explanation .service-explanation-inner h2::after {
    content: ""; /* 空の要素を生成 */
    display: block;
    background-image: url(../images/line-f.png);
    width: 182px;
    height: 6px;
    margin: 30px auto;
  }
  #page-service section.service {
    display: block; /* 子要素を横並びにする */
  }
  #page-service section.service div.service-explanation {
    width: 100%;
  }
  #page-service section.service div.service-image {
    width: 100%;
    position: relative;
  }
  #page-service section.service div.service-explanation .service-explanation-inner {
    padding: 20px !important;
  }
  #page-service section.service div.service-explanation .service-explanation-inner .service-info a {
   margin: 0 auto;
  }
  #page-service section.service div.service-image div.right {
    right: 15px;
  }
  #page-service section.service div.service-image div.left {
    left: 15px;
  }
  #page-service section.service div.service-image div.logo {
    background: #fff;
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    margin-top: -80px;
  }
  #page-service section.service div.service-image div.faraway-logo::before {
    content: ""; /* 空の要素を生成 */
    display: inline-block; /* 要素をインラインブロックで表示 */
    width: 48.5px;
    height: 35.5px;
    background-image: url('../images/service/faraway-logo.svg');
    background-size: contain; /* 画像を要素にフィットさせる */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    background-position: center; /* 要素内で中央に配置 */
    vertical-align: middle; /* テキストと揃える */
    position: absolute;
    top: 50%; /* 親要素の縦の中央に配置 */
    left: 50%; /* 必要なら横の中央も設定 */
    transform: translate(-50%, -50%); /* 中央基準に補正 */
  }
  #page-service section.service div.service-image div.lca-logo::before {
    content: ""; /* 空の要素を生成 */
    display: inline-block; /* 要素をインラインブロックで表示 */
    width: 64.5px; /* SVGの幅 */
    height: 24.5px; /* SVGの高さ */
    background-image: url('../images/service/matahari-marche.png');
    background-size: contain; /* 画像を要素にフィットさせる */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    background-position: center; /* 要素内で中央に配置 */
    vertical-align: middle; /* テキストと揃える */
    position: absolute;
    top: 50%; /* 親要素の縦の中央に配置 */
    left: 50%; /* 必要なら横の中央も設定 */
    transform: translate(-50%, -50%); /* 中央基準に補正 */
  }
  
  #page-service section.service div.service-explanation .service-explanation-inner p {
    font-size: 14px;
    margin-bottom: 30px;
  }
  #page-service section.service div.service-explanation .service-explanation-inner .service-info ul {
    font-size: 12px;
  }
}



/*-----------------------------
COMPANY会社概要
-----------------------------*/

#page-company .content {
  padding-bottom: 100px;
}

#page-company .content h2 {
  color: #fff;
  font-size: 24px;
  position: relative;
  z-index: 2;
}

#page-company .content h2 span {
  display: block;
  font-size: 2.5em;
  line-height: 1.2;
}

#page-company .content h2::before {
  width: 2000px;
  height: 100%;
  background-color: #533D1F;
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
}

#page-company .content .body {
  margin-top: -90px;
  padding: 170px 80px 80px 80px;
  position: relative;
  z-index: 1;
}

#page-company .content .body::before {
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
  width: 2000px;
  height: 100%;
  background-color: #fff;
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
}

#page-company .content .body .text {
  overflow: hidden;
}

#page-company .content .body .text img {
  width: 450px;
  margin: 0 0 40px 40px;
  float: right;
}

#page-company .content .body .text p {
  line-height: 2;
}

#page-company .content .body .ceo,
#page-company .content .body .coo {
  overflow: hidden;
}

#page-company .content .body .ceo img,
#page-company .content .body .coo img {
  width: 300px;
}

#page-company .content .body .ceo p,
#page-company .content .body .coo p {
  line-height: 2;
}

#page-company .content .body .ceo {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid;
}

#page-company .content .body .ceo img {
  margin-left: 40px;
  float: right;
}

#page-company .content .body .coo img {
  margin-right: 40px;
  float: left;
}

#page-company .content .body .link {
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
  margin: 50px 50px 0;
  padding: 50px 0;
  background-color: #eee;
  position: relative;
  text-align: center;
  z-index: 0;
}

#page-company .content .body .link h3 {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: normal;
}

#page-company .content .body .link a {
  width: 360px;
  border: 1px solid;
  line-height: 70px;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

#page-company .content .body .link a::before {
  width: 0;
  height: 100%;
  background-color: #533D1F;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.4s;
  z-index: -1;
}

#page-company .content .body .link a svg {
  -webkit-animation: arrowMove 0.6s infinite alternate;
  animation: arrowMove 0.6s infinite alternate;
  position: absolute;
  top: 50%;
  right: 25px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#page-company .content .body .link a:hover {
  color: #fff;
}

#page-company .content .body .link a:hover::before {
  width: 100%;
}

#page-company .content .body .link a:hover .cls-1 {
  fill: #fff;
}

#page-company .content .body .link a:hover svg {
  -webkit-animation: none;
  animation: none;
}

#page-company .content .body .link a:hover {
  border-color: #212a2f;
}

#page-company section:nth-of-type(even) h2 {
  padding: 35px 0;
}

#page-company section:nth-of-type(even) h2::before {
  right: calc(50% - 220px);
}

#page-company section:nth-of-type(even) .body::before {
  right: 0;
}

#page-company section:nth-of-type(odd) h2 {
  padding: 35px 0 35px 430px;
}

#page-company section:nth-of-type(odd) h2::before {
  left: calc(50% - 220px);
}

#page-company section:nth-of-type(odd) .body::before {
  left: 0;
}

#page-company #sec1 {
  padding-top: 100px;
}


#page-company #sec3 .bg {
display: none;
  height: 200px;
  background: url("../images/img_company.jpg") no-repeat center/cover;
}

#page-company #sec3 .text > ul > li:not(:last-of-type) {
  margin-bottom: 30px;
}

#page-company #sec3 h3 {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #555;
  font-size: 28px;
}

#page-company #sec3 h4 {
  margin-bottom: 10px;
}

#page-company #sec3 .address {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

#page-company #sec3 .address iframe {
  margin-bottom: 10px;
  display: block;
}

#page-company #sec3 .bank li {
  list-style-position: inside;
  list-style-type: disc;
}

#page-company #sec3 .bank li:not(:last-of-type) {
  margin-bottom: 10px;
}

#page-company #sec4 .historyList {
  position: relative;
}

#page-company #sec4 .historyList .year:not(:last-of-type) {
  margin-bottom: 30px;
}

#page-company #sec4 .historyList h3 {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 32px;
}

#page-company #sec4 .historyList h3 span {
  margin-left: 10px;
  display: inline-block;
  font-size: 0.6em;
}

#page-company #sec4 .historyList h3::before {
  width: 24px;
  height: 24px;
  margin-right: 20px;
  background-color: #62B1DD;
  border-radius: 50%;
  content: "";
}

#page-company #sec4 .historyList .monthList {
  padding-left: 55px;
}

#page-company #sec4 .historyList .monthList .month:not(:last-of-type) {
  margin-bottom: 20px;
}

#page-company #sec4 .historyList h4 {
  font-size: 20px;
}
#page-company #sec4 .historyList p {
  margin-left: 10px;
}
#page-company #sec4 .historyList p::before {
  content: "・";
}

#page-company #sec4 .historyList a {
  color: #337ab7;
  display: inline;
}

#page-company #sec4 .historyList::before {
  width: 2px;
  height: 100%;
  background-color: #eee;
  content: "";
  position: absolute;
  top: 14px;
  left: 11px;
  z-index: -1;
}

@media all and (max-width: 896px) {

  #page-company #sec3 h3 {
    font-size: 20px;
  }
  
  #page-company .content {
    padding-bottom: 50px;
  }

  #page-company .content h2 {
    width: calc(100% - 20px);
    padding: 20px !important;
    background-color: #533D1F;
    font-size: 1.6rem;
  }

  #page-company .content h2 span {
    font-size: 1em;
    line-height: 1.6;
  }

  #page-company .content h2::before {
    display: none;
  }

  #page-company .content .body {
    margin-top: -52.5px;
    padding: 72.5px 20px 20px;
    background-color: #fff;
    margin-bottom: 50px;
  }

  #page-company .content .body::before {
    display: none;
  }

  #page-company .content .body .text img {
    margin: 0 auto 20px;
    float: none;
  }

  #page-company .content .body .ceo {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  #page-company .content .body .ceo img {
    margin: 0 auto 20px;
    float: none;
  }

  #page-company .content .body .coo img {
    margin: 0 auto 20px;
    float: none;
  }

  #page-company .content .body .link {
    margin: 20px 0 0;
    padding: 20px;
  }

  #page-company section:nth-of-type(odd) h2::before {
    right: 20px;
  }

  #page-company section:nth-of-type(even) h2 {
    margin-left: 20px;
  }

  #page-company section:nth-of-type(even) h2::before {
    left: 20px;
  }

  #page-company #sec1 {
    padding: 0px;
  }

  #page-company #sec3 .bg {
    height: 300px;
  }

  #page-company #sec3 .address {
    display: block;
  }

  #page-company #sec3 .address > div:first-of-type {
    margin-bottom: 20px;
  }

  #page-company #sec3 .address iframe {
    width: 100%;
  }

  #page-company #sec4 .historyList h3 {
    font-size: 1.6rem;
  }

  #page-company #sec4 .historyList .monthList {
    padding-left: 35px;
  }
}


/*-----------------------------
BLOGブログ共通
-----------------------------*/

.navigation.pagination {
  margin-top: 50px;
}

.archive #blog,
#single-post #blog {
  background: url(../images/bg.jpg) center top / 100% repeat !important;
}

.archive #blog .column {
  margin-top: 60px;
}

#archive #sec1 {
  padding-bottom: 100px;
}
#single-post #sec1 {
  padding: 100px 0;
}



.checkout .inner {
  text-align: center;
  margin: 150px auto 100px auto;
}
.checkout .column {
  display: inline-block;
  vertical-align: top;

}
.checkout .inner h1 {
  font-size: 28px;
  color: #62B1DD;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.checkout .inner h1::after {
  content: ""; /* 擬似要素を生成 */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* h1 の幅いっぱいにラインを引く */
  height: 1px; /* 線の太さ */
  background-color: #62B1DD; /* 線の色 */
}
.checkout .left {
  width: 340px;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  margin-right: 30px;
  text-align: left;
}
.checkout .left .product-title {
  position: relative;
}
.checkout .left .product-title::after,
#page-checkout-confirm .right div.amount-confirm p.text {
  content: ""; /* 擬似要素を生成 */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* h1 の幅いっぱいにラインを引く */
  border-bottom: solid 1px #62B1DD;
}
.checkout .left .product-title p:first-child,
#page-checkout-confirm .right div.amount-confirm p.title  {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
}
.checkout .left .product-title em,
#page-checkout-confirm .right div.amount-confirm em {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  font-style: normal;
  font-weight: bold;
}
#page-checkout-confirm .right div.amount-confirm em {
  vertical-align: bottom !important;
}
.checkout .left .product-title p:last-child,
#page-checkout-confirm .right div.amount-confirm p.text {
  color: #97979B;
  font-size: 13px;
  margin-bottom: 10px;
  padding-bottom: 20px;
  font-weight: bold;
  position: relative;
}
.checkout .left .total-amount {
  display: flex;
  justify-content: space-between; /* 左右のPタグを両端に配置 */
  align-items: flex-end; /* 下揃えにする */
}
.checkout .left .total-amount p,
#page-checkout-confirm .right div.amount-confirm .total-amount p {
  display: inline-block;
  font-weight: bold;
}
.checkout .left .total-amount p:first-child {
}
.checkout .left .total-amount p:last-child,
#page-checkout-confirm .right div.amount-confirm .total-amount p:last-child {
  text-align: right;
  font-size: 26px;
  color: #F46195;
}
.checkout .left .total-amount em,
#page-checkout-confirm .right div.amount-confirm .total-amount em {
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
}
.checkout .right {
  width: 710px;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  text-align: left;
}
.checkout .right p {
  color: #585961;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
}
.checkout .right h2 {
  color: #585961;
  font-size: 24px;
  margin: 25px 0 15px;
}
.checkout .right div {
  display: flex;
  justify-content: space-between; /* 左右のPタグを両端に配置 */
  align-items: center;
}
.checkout .right div img.credit-card {
  width: 75%;
  margin-left: auto; /* 画像を右寄せ */
}
.checkout .right a.button-pink {
  margin: 50px auto;
}
.checkout .right input {
  display: block;
  border: 1px solid #97979B;
  border-radius: 10px;
  margin-bottom: 25px;
}
.checkout .right input::placeholder {
  opacity: 0.4; /* デフォルトで薄く表示されるのを調整 */
}
.checkout .right input:nth-child(1),
.checkout .right input:nth-child(2),
.checkout .right input:nth-child(4), {
  width: 480px;
}


#page-checkout-confirm .right div.credit-card {
  justify-content: left;
  margin-bottom: 10px;
}
#page-checkout-confirm .right div.credit-card img {
  margin-left: unset;
  width: 100%;
}
#page-checkout-confirm .right p {
  margin-bottom: 10px;
  margin-right: 10px;
  font-weight: normal;
}
#page-checkout-confirm .right p:nth-child(2) {
  font-weight: bold;
}
#page-checkout-confirm .right a.link {
    margin-top: 25px;
    color: #62B1DD;
    text-decoration: underline;
    font-size: 14px;
}
#page-checkout-confirm .right div.amount-confirm {
  display: block;
  margin-bottom: 10px;
  background: #F9F8F2;
  padding: 20px;
  margin: 50px 0;
}
#page-checkout-confirm .right div.amount-confirm h1 {
  font-size: 20px;
}

#page-checkout-complete .inner h1 {
  font-size: 50px;
  text-align: center;
}
#page-checkout-complete .right h2 {
  text-align: center;
}



/*-----------------------------
BLOGブログ一覧
-----------------------------*/

.pagination .nav-links {
	text-align: center;
}
.pagination .page-numbers {
	background: var(--pink) 0% 0% no-repeat padding-box;
	border-radius: 25px;
	text-align: center;
	font-family: "title", sans-serif;
  font-size: 16px;
	letter-spacing: 0px;
	color: var(--white);
	opacity: 1;
	width: 50px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
	margin-right: 10px;
}
.pagination .page-numbers.dots {
	background: none;
	border: none;
	border-radius: none;
	text-align: center;
	font-family: "title", sans-serif;
  font-size: 16px;
	letter-spacing: 0px;
	color: var(--brown);
	opacity: 1;
	width: 50px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
}
.pagination .nav-links a {
	background: var(--white) 0% 0% no-repeat padding-box;
	border: 1px solid var(--blue);
	border-radius: 25px;
	text-align: center;
	font-family: "title", sans-serif;
  font-size: 16px;
	letter-spacing: 0px;
	color: var(--blue);
	opacity: 1;
	width: 50px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
}
.pagination .nav-links a:last-of-type {
  margin-right: 0 !important;
}

.pagination .nav-links a:hover {
	background: var(--pink) 0% 0% no-repeat padding-box;
  border: 1px solid var(--pink);
	border-radius: 25px;
	text-align: center;
	font-family: "title", sans-serif;
  font-size: 16px;
	letter-spacing: 0px;
	color: var(--white);
	opacity: 1;
	width: 50px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
	margin-right: 10px;
}

/*-----------------------------
BLOGブログ詳細
-----------------------------*/

#single-post #blog .column .left-cnt {
  background: var(--white);
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
  backdrop-filter: blur(6px);
}

#single-post .left .header {
	width: 100%;
}

#single-post .left .header h1 {
	font-size: 30px;
  margin-bottom: 10px;
}

#single-post .left .header .postMeta {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #62B1DD;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

#single-post .left .header .postMeta .user {
  display: flex;
  align-items: center;
}

#single-post .left .header .postMeta .user img {
  width: 50px;
  margin-right: 10px;
  background-color: orange;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0px 2px 5px #bdbdbd;
}

#single-post .left .header .postMeta > ul {
  display: flex;
}

#single-post .left .header .postMeta > ul .button_name,
#single-post .left .header .postMeta > ul .braces {
  display: none;
}

#single-post .left .header .postMeta > ul > li {
  display: flex;
  align-items: center;
}

#single-post .left .header .postMeta > ul > li::before {
  width: 32px;
  height: 31px;
  margin-right: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
}

#single-post .left .header .postMeta > ul > li:first-of-type {
  margin-right: 15px;
}

#single-post .left .header .postMeta > ul > li:first-of-type::before {
  background-image: url("../images/icon_good.png");
}

/*
#single-post .left .header .postMeta > ul > li:last-of-type::before {
  background-image: url("../images/icon_ex.png");
}
*/

#single-post .left .header .post-categories {
  margin-bottom: 30px;
  display: flex;
}

#single-post .left .header .post-categories li:not(:last-of-type) {
  margin-right: 10px;
}
#blog .left .post-categories a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--white);
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
}
#blog .left .post-categories a:hover {
  background: var(--blue);
}
#single-post .left #toc_container {
	width: 420px !important;
  margin-bottom: 50px;
  padding: 15px;
  background-color: #F9F8F2;
  border: 1px solid #62B1DD;
  display: inline-block;
	border-radius: 10px;
	font-size: 14px;
}

#single-post .left #toc_container a {
	color: #585961;
	display: inline-block;
}
#single-post .left #toc_container a:hover {
	text-decoration: underline;
	color: #62B1DD;
}

#single-post .toc_depth_1 {
	margin-right: 10px;
	font-weight: bold;
}
#single-post .toc_depth_2 {
	display: none !important;
}

#single-post .left #toc_container .toc_title {
	text-align: left;
	font-size: 16px;
	color: #62B1DD;
	border-bottom: 1px solid;
	padding-bottom: 12px;
	font-family: "title", sans-serif;
}

#single-post .left #toc_container .toc_list {
  margin-top: 15px;
}

#single-post .left #toc_container .toc_list > li > ul {
  padding-left: 15px;
}

#single-post .left #toc_container .toc_list > li > ul a {
  font-weight: normal !important;
}

#single-post .left #toc_container .toc_list li {
  list-style: none;
}

#single-post .left #toc_container .toc_list a {
	font-weight: bold;
}

#toc-widget-3 {
	
}
#toc-widget-3 ul {
	
}
#toc-widget-3 ul li {
	
}
#toc-widget-3 ul li ul {
	margin-left:32px;
	
}
#toc-widget-3 ul li a {
	font-size: 12px;
	color: #585961;
	display: inline-block;
}
#toc-widget-3 ul li a:hover {
	text-decoration: underline;
	color: #62B1DD;
}

#single-post .left .footer .favorite {
	margin: 0 50px;
	padding: 30px;
	border: 1px solid #585961;
	text-align: center;
	background: #F9F8F2;
	border-radius: 10px 10px 0 0;
}

#single-post .left .footer .favorite h4 {
  margin-bottom: 20px;
}

#single-post .left .footer .favorite h4::before {
  margin-right: 20px;
  content: "\\";
}

#single-post .left .footer .favorite h4::after {
  margin-left: 20px;
  content: "/";
}
#single-post .left .footer .favorite .count_number {
  color: #fff;
}

#single-post .left .footer .favorite .reaction_button {
  margin: 0 100px 20px;
  padding: 20px 0;
  background-color: #e74b90;
  border-radius: 32px;
  color: #fff;
  cursor: pointer;
}

#single-post .left .footer .favorite .reaction_button > div {
  position: relative;
}

#single-post .left .footer .favorite .reaction_button > div::before {
  width: 24px;
  height: 37px;
  background: url("../images/icon_blog-good.svg") no-repeat center/cover;
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 100px);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#single-post .left .footer .favorite .snsList {
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
}

#single-post .left .footer .favorite .snsList li {
  border-radius: 10px;
  overflow: hidden;
}

#single-post .left .footer .favorite .snsList li a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#single-post .left .footer .favorite .snsList li:not(:last-of-type) {
  margin-right: 20px;
}

#single-post .left .footer .favorite p {
  font-size: 14px;
  letter-spacing: 1px;
}

#single-post .left .footer .tag h4,
#single-post .left .footer .related h4 {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid;
  text-align: center;
  font-size: 28px;
  font-weight: normal;
}

#single-post .left .footer .tag h4 span,
#single-post .left .footer .related h4 span {
  width: calc(100% - 50px);
  display: inline-block;
}

#single-post .left .footer .tag h4::before,
#single-post .left .footer .related h4::before {
  width: 40px;
  margin-right: 10px;
  content: "";
}

#single-post .left .footer .tag h4::before {
  height: 40px;
  background: url("../images/icon_tag.svg") no-repeat center/cover;
}

#single-post .left .footer .related h4::before {
  height: 28px;
  background: url("../images/icon_related.svg") no-repeat center/cover;
}

#single-post .left .footer .writer {
	margin: 0 50px;
	padding: 30px;
	border: 1px solid #585961;
	border-top: none;
	border-radius: 0px 0px 10px 10px;
	margin-bottom: 100px;
}

#single-post .left .footer .writer h4 {
  margin-bottom: 10px;
}

#single-post .left .footer .writer h5 {
  font-size: 30px;
color: #62B1DD;
}
#single-post .left .footer .writer p {
  font-size: 16px;
}

#single-post .left .footer .writer figure {
  display: flex;
  align-items: flex-start;
}

#single-post .left .footer .writer figure img {
  margin-right: 20px;
	border-radius: 50px;
  width: 30%;
}
#single-post .left .footer .writer figure figcaption {
  width: 70%;
}

#single-post .left .footer .writer figure span {
  display: block;
}

#single-post .left .footer .writer figure .positionname::first-letter {
  font-size: 0;
}

#single-post .left .footer .writer .linkList {
	display: flex;
	align-items: center;
	margin-top: 15px;
}

#single-post .left .footer .writer .linkList li:not(:last-of-type) {
  margin-right: 10px;
}

#single-post .left .footer .writer .linkList .sns a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#single-post .left .footer .writer .linkList .fb {
  background-color: #2f5096;
}

#single-post .left .footer .writer .linkList .tw {
  background-color: #2ba6e0;
}

#single-post .left .footer .writer .linkList .ig {
  background: linear-gradient(to right, #fa712c 0%, #ee1682 50%, #3253f3 100%);
}

#single-post .left .footer .writer .linkList .url {
  background-color: #2ecea3;
}

section.pager {
  margin-top: 50px;
}

#single-post .left .footer .writer .linkList .writerLink a:hover svg {
  -webkit-animation: none;
  animation: none;
}

#single-post .left .footer .writer .linkList li img {
  width: 30px;
}

#single-post .left .footer .writer .linkList .url {
  margin-right: 0 !important;
}

#single-post .left .footer .writer .linkList li:last-of-type {
  margin: auto;
}

#single-post .left .footer .writer .linkList li:hover {
  opacity: 0.7;
}

#single-post .left .footer .tag {
  margin-bottom: 30px;
}

#single-post .left .footer .tag .post-tags {
  display: flex;
  flex-wrap: wrap;
}

#single-post .left .footer .tag .post-tags li {
  margin: 0 10px 10px 0;
}

#single-post .left .footer .tag .post-tags a {
  padding: 5px 15px;
  background-color: #62B1DD;
  color: #fff;
  display: inline-block;
  font-size: 14px;
}

#single-post .left .footer .tag .post-tags a:hover {
  background-color: #212a2f;
}

#single-post .left .footer .related > div {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

#single-post .left .footer .related article {
  width: calc(50% - 20px);
}

#single-post .left .footer .related article a .title {
  background-image: linear-gradient(180deg, transparent 94%, #62B1DD 0);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  display: inline;
}

#single-post .left .footer .related article a .thumb {
  overflow: hidden;
  position: relative;
}

#single-post .left .footer .related article a .thumb::after {
  width: 100%;
  height: 100%;
  background-color: #000;
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

#single-post .left .footer .related article a .wp-post-image {
  width: 100%;
}

#single-post .left .footer .related article a:hover .title {
  background-size: 100% 100%;
  color: #62B1DD;
}

#single-post .left .footer .related article a:hover .thumb::after {
  opacity: 0.25;
}

#single-post .left .footer .related article a:hover .wp-post-image {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

#single-post .left .footer .related article:not(:nth-of-type(3n)) {
}

#single-post .left .footer .related article:not(:nth-last-of-type(-n + 3)) {
}

#single-post .left .footer .related figcaption {
}

#single-post .left .footer .related time {
  display: block;
}


#single-post #blog .right {
  position: relative;
}

#singleright-wid.is-fixed {
  position: fixed;
  top: 100px;
  z-index: 20;
}

#singleright-wid.is-bottom {
  position: absolute;
  z-index: 20;
}


.pager {
  margin-top: 80px;
}

.pager .prev-next {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 40px;
}

.pager .prev,
.pager .next {
  width: calc(50% - 12px);
}

/* カード */

.pager .prev a,
.pager .next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  background: var(--color4);
  border: 2px solid var(--brown);
  border-radius: 28px;

  box-shadow: 0 6px 0 rgba(0,0,0,0.08);

  transition:
    transform .25s cubic-bezier(0.16,1,0.3,1),
    box-shadow .25s ease,
    border-color .25s ease;
}

.pager .prev a:hover,
.pager .next a:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 20px rgba(0,0,0,.12);
  border-color: var(--blue);
}


/* 画像 */

.pager img {
  width: 120px;
  height: 86px;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid var(--brown);
}


/* 前へ / 次へ（ここを大きく） */

.pager .text {
  font-size: 22px;
  font-weight: 800;
  color: var(--brown);
  margin-bottom: 8px;
  font-family: "title", sans-serif;
}


/* 記事タイトル */

.pager .title {
  font-size: 16px;
  line-height: 1.6;
  color: var(--brown);
  font-weight: 700;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* 矢印 */

.pager .arrow {
  width: 52px;
  height: 52px;

  border-radius: 50%;
  background: var(--pink);
  color: var(--white);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;

  flex-shrink: 0;

  box-shadow: 0 4px 0 rgba(0,0,0,.08);

  transition:
    transform .25s cubic-bezier(0.16,1,0.3,1),
    background-color .25s ease;
}

.pager a:hover .arrow {
  background: var(--blue);
  transform: scale(1.1);
}


/* figure */

.pager figure {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  margin: 0 !important;
}


/* 前記事は左右逆 */

.pager .prev figure {
  flex-direction: row-reverse;
}
.pager .prev figure figcaption,
.pager .next figure figcaption {
  flex: 1;
}

/* =====================
responsive
===================== */

@media (max-width: 768px) {

  .pager .prev-next {
    flex-direction: column;
    gap: 16px;
  }

  .pager .prev,
  .pager .next {
    width: 100%;
  }

  .pager .text {
    font-size: 18px;
  }

  .pager .title {
    font-size: 14px;
  }

  .pager img {
    width: 88px;
    height: 66px;
  }

  .pager .arrow {
    width: 44px;
    height: 44px;
  }

}


/*-----------------------------
blog
-----------------------------*/


@media all and (max-width:768px) {
	
	#archive .postWrap article figcaption {
	  width: 100%;
	}
	
	#archive .postWrap article .attachment-post-thumbnail {
		width: 100% !important;
		border-radius: 20px;
	}
	#archive .postWrap article figure {
		display: block;
		align-items: flex-start;
		/* justify-content: space-between; */
		/* margin: 0 !important; */
		position: relative;
	}
	
	#archive .postWrap article .postMeta {
		margin-top: 60px;
        bottom: 0;
        position: relative;
	}
	#archive .postWrap article .postMeta > ul {
		display: flex;
		position: absolute;
		bottom: 10px;
		right: 0;
	}
	#archive .postWrap article .new {
		right: 0 !important;
		left: auto;
	}

	#archive .content .inner,
  #single-post .content .inner {
    display: block !important;
  }

  #archive #sec1,
  #single-post #sec1 {
    padding: 20px 0;
  }

  #archive .column,
  #single-post .column {
		margin-top: 0px;
  }
  #single-post .column {
		margin-top: 30px;
  }

  #archive .right,
  #single-post .right {
	width: 100% !important;
	margin-left: 0 !important;
	padding: 15px 0 !important;
  }
	
	
	#single-post .left .footer .favorite {
    margin: 0;
    padding: 20px;
  }

  #single-post .left .footer .favorite h4 {
    font-size: 15px;
  }

  #single-post .left .footer .favorite h4::before {
    margin-right: 5px;
		content: "";
  }

  #single-post .left .footer .favorite h4::after {
    margin-left: 5px;
		content: "";
  }

  #single-post .left .footer .favorite .reaction_button {
    margin: 0 0 20px;
  }

  #single-post .left .footer .tag h4,
  #single-post .left .footer .related h4 {
    font-size: 20px;
  }

  #single-post .left .footer .writer {
    margin: 0 0 50px 0;
  }

  #single-post .left .footer .writer h5 {
    font-size: 20px;
  }

  #single-post .left .footer .writer figure img {
    width: 100px;
    margin-right: 10px;
  }

  #single-post .left .footer .writer .linkList .sns a {
    width: auto;
  }

  #single-post .left .footer .writer .linkList .writerLink a {
    width: 100%;
  }

  #single-post .left .footer .writer .linkList {
    flex-wrap: wrap;
  }

  #single-post .left .footer .writer .linkList .sns {
    width: calc(25% - 7.5px);
    margin-bottom: 20px;
  }

  #single-post .left .footer .writer .linkList li:last-of-type {
    width: 100%;
  }

  #single-post .left .footer .writer .linkList li:last-of-type a {
    
  }

  #single-post .left .footer .tag .post-tags a {
    padding: 5px 10px;
    font-size: 12px;
  }

  #single-post .left .footer .related article {
    width: calc(50% - 10px);
  }

  #single-post .left .footer .related article:nth-of-type(odd) {
    margin-right: 20px !important;
  }

  #single-post .left .footer .related article:not(:nth-of-type(3n)) {
    margin-right: 0;
  }

  #single-post .left .footer .related article:not(:nth-last-of-type(-n + 2)) {
    margin-bottom: 20px !important;
  }

  #single-post .left .footer .related article:not(:nth-last-of-type(-n + 3)) {
    margin-bottom: 0;
  }

  #single-post .left .footer .related figcaption {
    font-size: 12px;
  }

  #single-post .left .footer .pager .prev-next {
    display: block;
  }

  #single-post .left .footer .pager .prev-next > div {
    width: 100% !important;
  }

  #single-post .left .footer .pager .prev-next > div + div {
    margin-top: 20px !important;
  }
	#blog .left a .wp-post-image {
		height: 200px;
	}

	#single-post #blog .column .left-cnt {
    padding: 20px 15px;
  }
	
	#archive .postWrap article > a, #single-post .left {

	}
	#archive .postWrap article h2 {
		font-size: 16px;
	}
}

/*-----------------------------
特定商取引法に関する表示
-----------------------------*/
.sec11 .post-content .lawContent p {
  margin-bottom: 0 !important;
}
.lawContent li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 20px;
  line-height: 2;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #62B1DD;
}
.lawContent li .lawItem {
  width: 25%;
  font-family: "title";
  color: #62B1DD;
}
.lawContent li .lawText {
  width: 70%;
  font-weight: 500;
}
@media (max-width: 559px) {
.lawContent li {
  display: block;
}
.lawContent li .lawItem {
  width: 100%;
}
.lawContent li .lawText {
  width: 100%;
}
}



/*-----------------------------
sec-plan　固定ページ
-----------------------------*/

.page-id-652 .sec-plan #edit {
  padding-top: 27px;
}
.page-id-652 .sec-plan .entry-content img {
  margin-bottom: 0 !important;
  border-radius: 0;
}
.page-id-652 .sec-plan .top-title {
  background: linear-gradient(to right, #F46195, #62B1DD);
  margin-top: 0px;
  padding: 20px;
  color: #fff;
  font-size: 24px;
  margin: 0 auto;
  margin-bottom: 0 !important;
  font-weight: bold;
  line-height: normal;
}
.page-id-652 .sec-plan .inner {
  border-radius: 0 0 0px 0px !important;
  box-shadow: 0px 0px 0px #00000029;
}
.page-id-652 .sec-plan .inner section.okomari {
  
}
.page-id-652 .sec-plan .inner section.okomari ul {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  justify-content: space-between; /* 均等に配置 */
}
.page-id-652 .sec-plan .inner section.okomari ul li {
  position: relative;
  width: calc(25% - 20px);
  height: 285px;
  margin: 10px;
  list-style: none;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #00000029;
  line-height: 25px;
}
.page-id-652 .sec-plan .inner section.okomari ul li img {
  margin-top: 65px;
  width: 70%;
  padding-bottom: 20px;
}
.page-id-652 .sec-plan .inner section.okomari ul li:nth-child(3) img {
  width: 72%;
}
.page-id-652 .sec-plan .inner section.okomari ul li:last-child img {
  width: 60%;
}
.page-id-652 .sec-plan .inner section.okomari ul li span {
  top: -25px;
  font-size: 24px;
  position: absolute;
  border-radius: 50px;
  background: #62B1DD;
  left: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  transform: translateX(-50%);
  font-family: "title", sans-serif;
  color: #fff;
}
.page-id-652 .sec-plan .inner-triangular {
  width: 0;
  height: 0;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-top: 80px solid #fff;
  margin: 0 auto;
}
.page-id-652 .onayamikaiketsu,
.postid-768 .onayamikaiketsu {
  position: relative;
  width: 850px;
  margin: 50px auto;
}
.page-id-652 .onayamikaiketsu .img-sun,
.postid-768 .onayamikaiketsu .img-sun {
  width: 100px !important;
  position: absolute;
  left: 0;
}
.postid-768 .onayamikaiketsu .img-sun {
  width: 70px !important;
  top: 20px;
}
.page-id-652 .onayamikaiketsu .img-hili,
.postid-768 .onayamikaiketsu .img-hili  {
  width: 100px !important;
  position: absolute;
  right: 0;
  z-index: 0;
}
.postid-768 .onayamikaiketsu .img-hili  {
  width: 70px !important;
  top: 5px;
}
.page-id-652 .onayamikaiketsu h1,
.postid-768 .onayamikaiketsu h1 {
  color: #62B1DD;
  font-size: 35px !important;
  padding-bottom: 5px;
  text-align: center;
}

.page-id-652 .onayamikaiketsu b,
.postid-768 .onayamikaiketsu b {
  color: #F46195;
  font-size: 60px !important;
}
.page-id-652 .onayamikaiketsu p,
.postid-768 .onayamikaiketsu p {
  position: relative;
  background: #fff;
  width: 850px;
  border: 1px solid #62B1DD;
  margin: 0 auto;
  border-radius: 10px;
  padding: 40px 0;
  font-size: 15px;
  z-index: 1;
  margin-bottom: 70px !important;
}
.page-id-652 .onayamikaiketsu em,
.postid-768 .onayamikaiketsu em {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  position: relative;
  display: inline-block;
}
.page-id-652 .onayamikaiketsu em::after,
.postid-768 .onayamikaiketsu em::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: #F46195;
  transition: width 0.3s ease-in-out;
}
.page-id-652 .onayamikaiketsu em.active::after,
.postid-768 .onayamikaiketsu em.active::after {
  width: 100%; /* クラスを付与したときにアニメーション開始 */
}
.page-id-652 .onayamikaiketsu em span {
  font-size: 40px;
}
.page-id-652 .why_hanapana {
  width: 1000px;
  margin: 0 auto;
  padding: 50px 30px;
  background: url("../images/web-subsc1/why_hanapana-bg.png") no-repeat center center;  
  background-size: cover;
}
.page-id-652 .why_hanapana h2,
.page-id-652 .otoiawase h2 {
  color: #fff !important;
}
.page-id-652 .why_hanapana h2::after,
.page-id-652 .otoiawase h2::after {
  background-image: url(../images/web-subsc1/line-f-w.png) !important;
}
.page-id-652 .why_hanapana ul {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  justify-content: space-between; /* 均等に配置 */
}
.page-id-652 .why_hanapana ul li {
  position: relative;
  width: calc(50% - 40px);
  margin: 20px;
  background: #fff;
  list-style: none;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #00000029;
  line-height: 25px;
}
.page-id-652 .why_hanapana ul li div {
}
.page-id-652 .why_hanapana ul li div p {
  width: 60%;
  text-align: left;
  line-height: 30px;
  font-weight: bold;
  font-size: 17px;
}
.page-id-652 .why_hanapana ul li div:first-child {
  display: flex; /* 横並びにする */
  align-items: center; /* 縦方向の中央揃え */
  gap: 15px; /* 画像とテキストの間隔 */
  padding: 10px 0;
}
.page-id-652 .why_hanapana ul li div:first-child span {
  font-size: 14px;
  color:#62B1DD;
}
.page-id-652 .why_hanapana ul li div:last-child {
  background: #F9F8F3;
  border-radius: 0 0 20px 20px;
  padding: 20px 30px;
  text-align: left;
  font-size: 14px;
}
.page-id-652 .why_hanapana ul li img {
  display: inline-block;
  width: 105px !important;
  margin-right: 10px;
}
.page-id-652 .otoiawase {
  width: 1000px;
  margin: 0 auto;
  padding: 50px;
  color: #fff;
  background: #F2B630;
}
.page-id-652 .sec-plan #toc_container {
  display: none;
}
.page-id-652 .entry-content p {
  text-align: center;
}
.page-id-652 .entry-content h1 {
  font-size: 50px;
  text-align: center;
}
.page-id-652 .entry-content h2 {
  font-size: 35px;
  color: #62B1DD;
  border-bottom: 0px solid #F36AA7;
  text-align: center;
  position: relative;
  padding-bottom: 50px;
}
.page-id-652 .entry-content h2::before {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  top: 100%;
}
.page-id-652 .entry-content h2::after {
  content: ""; /* これを追加 */
  background-image: url("../images/line-f.png");
	width: 182px;
  height: 6px;
  position: absolute; /* 位置を指定 */
  top: 70px;
  left: 50%; /* 左端を中央に */
  transform: translateX(-50%); /* 要素の半分を左にずらしてセンター調整 */
}
.page-id-652 .entry-content h3 {
  background: #585962;
  color: #fff;
  text-align: center;
  font-size: 25px;
}

.page-id-652 .entry-content table {
  border-collapse: separate;
  border-spacing: 5px;
}
.page-id-652 .entry-content table tr th span:first-child {
  font-family: "title", sans-serif;
  font-size: 35px !important;
}
.page-id-652 .entry-content table tr th:first-child {
  background: #62B1DD;
  color: #fff;
  border-radius: 20px 0 0 0;
}
.page-id-652 .entry-content table tr th:nth-child(2) {
  color: #fff;
  background: #F2B630;
}
.page-id-652 .entry-content table tr th:nth-child(3) {
  background: #F46195;
  color: #fff;
  border-radius: 0 20px 0 0;
}
.page-id-652 .entry-content table tr th, .page-id-652 .entry-content table tr td {
  border: none;
  vertical-align: top;
}
.page-id-652 .entry-content table tr:nth-child(2) td:first-child {
  background: #62B1DD;
  color: #fff;
  border-radius: 0 0 0 20px;
}
.page-id-652 .entry-content table tr:nth-child(2) td:nth-child(2) {
  color: #fff;
  background: #F2B630;
}
.page-id-652 .entry-content table tr:nth-child(2) td:nth-child(3) {
  background: #F46195;
  color: #fff;
  border-radius: 0 0 20px 0;
}




@media (max-width: 959px) {
  .page-id-652 .onayamikaiketsu h1,
  .postid-768 .onayamikaiketsu h1 {
    font-size: 25px !important;
  }
  .postid-768 .onayamikaiketsu .img-hili {
    width: 60px !important;
    top: 70px;
  }
  .postid-768 .onayamikaiketsu .img-sun {
    width: 60px !important;
    top: 80px;
    left: -5px;
  }
}
/*-----------------------------
スマホ表示など
-----------------------------*/

.yespc {
  	display: block !important;
}
.nopc {
  display: none !important;
}
@media (max-width: 959px) {
  .nopc {
  	display: block !important;
  }
  .yespc {
    display: none !important;
  }
}


.postid-768 .website-production {
}
.postid-768 .website-production ul.main-ul {
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin: 0 auto;
  margin-bottom: 50px;
}
.postid-768 .website-production ul.main-ul li.main-li {
  list-style: none;
  margin: 0;
}
.postid-768 .website-production ul.main-ul li.main-li div:first-child {
  background: #F46195;
  border-radius: 16px 16px 0 0;
  text-align: center;
  color: #fff;
  height: 60px;
  line-height: 60px;
  font-weight: bold;
}

.postid-768 .website-production ul.main-ul li.main-li div:last-child {
  margin: 12px;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child em {
  text-decoration: line-through;
  font-weight: bold;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child span {
  color: #F46195;
  font-size: 30px;
  font-weight: bold;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child p {
  text-align: left;
  line-height: normal;
  font-size: 14px;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child p.plan {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #62B1DD;
  margin-bottom: 30px;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child p:last-child {
  color:#97979B;
  margin: 20px 0;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child b {
  color: #F46195;
  text-align: left;
  display: block;
  margin-top: 20px;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child ul {
  display: flex;
  flex-wrap: wrap; /* 折り返しを可能にする */
  gap: 0px;
  font-size: 11px;
  background: #F6F4EA;
  border: 2px solid #B6B6BC;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child ul li {
  list-style: none;
  flex: 1 1 calc(33.333% - 0px);
  text-align: center;
  border: 0.25px solid #B6B6BC;
  margin: 0;
  padding: 6px 2px;
  background: #fff;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child ul li:nth-child(8) {
  background: #F6F4EA;
  border-right: 0;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child ul li:nth-child(9) {
  background: #F6F4EA;
  border-left: 0;
}
.postid-768 .website-production ul.main-ul li.main-li div:last-child ul li img {
  border-radius: 0;
  margin: 0 auto;
  width: 40px;
  height: 40px;
}


/*-----------------------------
プラン
-----------------------------*/
.sec-plan {
  margin: 0 auto 180px;
}
.sec-plan .inner {
  padding: 50px;
  max-width: 1000px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 3px 6px #00000029;
}
.sec-plan .inner .entry-content {
  margin-bottom: 0 !important;
}
.sec-plan #toc_container {
  width: 420px !important;
  margin-bottom: 50px;
  padding: 15px;
  background-color: #F9F8F2;
  border: 1px solid #62B1DD;
  display: inline-block;
  border-radius: 10px;
  font-size: 14px;
}
.sec-plan #toc_container a {
  color: #585961;
  display: inline-block;
}
.sec-plan #toc_container a:hover {
  text-decoration: underline;
  color: #62B1DD;
}
.sec-plan #toc_container .toc_title {
  text-align: left;
  font-size: 16px;
  color: #62B1DD;
  border-bottom: 1px solid;
  padding-bottom: 12px;
  font-family: "title", sans-serif;
}
.module-accordion li {
  margin-bottom: 30px;
  list-style: none !important;
  list-style-type: none !important;
}
.qa-content .accor-title a {
  display: block;
  background: url(../images/q-icon.svg) no-repeat left top 1px;
  padding: 0;
  text-decoration: none;
  font-weight: bold;
}
.qa-content .accor-title a,
.qa-content .accor-title a:visited,
.qa-content .accor-title a:active,
.qa-content .accor-title a:focus,
.qa-content .accor-title a:hover {
  color: #585961;
}
.qa-content .accor-title .accor-title-inner {
  margin-left: 70px;
  padding: 12px 70px 12px 20px;
  font-size: 18px;
  background: #fff;
  border-radius: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  line-height: 1.8;
  position: relative;
  color: #585961;
  font-weight: normal;
  border: 1px solid #62B1DD;
}
.qa-content .accor-title a .accor-title-inner {
  font-weight: bold;
}
.qa-content .accor-title .accor-title-inner::after {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../images/open-icon.svg) no-repeat center center;
  position: absolute;
  right: 25px;
  top: 50%;
  z-index: 1;
  transform: translatey( -50% );
  display: block;
  visibility: visible;
  transition: 0.1s all linear;
}
li .accor-title .active .accor-title-inner::after {
  background: url(../images/close-icon.svg) no-repeat center center;  
}
.qa-content .accor-body {
  margin-top: 20px;
  padding-left: 70px;
  background: url(../images/a-icon.svg) no-repeat left top;
  display: none;
}
.module-accordion li.active .accor-body {
  display: block;
}
.qa-content .accor-body .accor-inner {
  background: #F9F8F2;
  padding: 20px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  font-size: 15px;
}
.qa-content .accor-body .accor-inner a {
	margin-top: 10px;
	color: #F46195;
	text-decoration: underline;
}
.qa-content .accor-body .accor-inner a:hover {
	color: #62B1DD;
}

@media (max-width: 959px) {
  .sec-plan {
	padding: 0 30px;
	margin: 0 auto 120px;
  }
  .sec-plan .inner {
    padding: 30px;
  }
}
@media (max-width: 559px) {
  .sec-plan {
	padding: 0 15px;
  }
  .sec-plan .inner {
    padding: 15px;
  }
  .qa-content .accor-title a,
  .qa-content .accor-body {
	background-size: 40px;
  }
  .qa-content .accor-body {
	padding-left: 55px;
  }
  .qa-content .accor-body .accor-inner {
	padding: 15px;
	font-size: 16px;
  }
  .qa-content .accor-title .accor-title-inner {
    margin-left: 55px;
	padding: 12px 70px 12px 15px;
	font-size: 16px;
  }
}


/*****************************
フォームのカスタマイズ
*****************************/
.wpcf7-response-output {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 185, 0, 0.9);
    color: #fff;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    z-index: 9999;
    transition: opacity 1s ease-in-out;
}
.fade-out {
    opacity: 0;
}
.wpcf7-not-valid {
    background-color: #FFD5E4 !important; /* エラーのある入力欄の背景色を変更 */
    border-color: #ff4d6d !important; /* ボーダーも強調 */
}
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
}
.wpcf7 form.sent .wpcf7-response-output {
    background: #46b450;
    border: 0;
    z-index: 999;
}




.typing-char {
  display: inline-block;
  transition: all 0.3s ease;
}

.typing-char.color1.active {
  color: #F46195;
  transform: scale(1.3);
}

.typing-char.color2.active {
  color: #48B8F5;
  transform: scale(1.3);
}

.typing-char.color3.active {
  color: #F2B630;
  transform: scale(1.3);
}

/* カーソル演出 */
.typing-text::after {
  content: "|";
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}









main#page-contact {
	margin-top: 80px;
}






.contact-wire {
	position: relative;
  background-size: cover;
	height: 420px;
}
.contact-wire .contact-ch {
	position: absolute;
	bottom: 0;
	left: 7%;
	
}
.contact-wire .contact-catch {
	position: relative;
  left: 30%;
}
.contact-wire div h4 {
  font-size: 42px;
  font-weight: bold;
  font-weight: inherit;
  font-family: "title", sans-serif;
  color: #4F6479;
  border: none;
  margin-bottom: 20px;
}
.contact-wire div p {
  font-size: 20px;
  color: #4F6479;
  margin-bottom: 30px;
  text-align: left;
}
.contact-wire div ul {
  display: flex;
  align-items: center;
	position: absolute;
  left: 39%;
	bottom: 13%;
}
.contact-wire div ul li {
  position: relative;
}
.contact-wire div ul li a {
  width: 320px;
  background: #F46195;
  color: #fff;
  font-size: 22px;
  font-family: "title", sans-serif;
  text-decoration: none;
  text-align: center;
  padding: 28px 0;
  border-radius: 50px;
  border: 3px solid #FFf;
	text-indent: 30px;
}
.contact-wire div ul li a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 22px;
	width: 36px;
	height: 26px;
	background-image: url('../images/page-campaign-2504/form-icon.svg'); /* 荳句髄縺阪?遏｢蜊ｰ逕ｻ蜒? */
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-50%) rotate(0deg);
	transition: transform 0.3s ease;
}
.contact-wire div ul li:last-child a {
  background: #43D884;
  margin-left: 20px;
}
.contact-wire div ul li:last-child a::before {
	width: 36px;
	height: 34px;
  left: 40px;
	background-image: url('../images/page-campaign-2504/line-icon.svg'); /* 荳句髄縺阪?遏｢蜊ｰ逕ｻ蜒? */
}

.contact-wire {
  background: url(../images/web-subsc1/otoiawase-bg.png) no-repeat center;
  background-size: cover;
}
.contact-wire .inner {
	padding: 80px 50px;
	max-width: 1200px;
	width: 100%;
}
.contact-wire div h4 {
  font-size: 42px;
  font-weight: bold;
  font-weight: inherit;
  font-family: "title", sans-serif;
  color: #4F6479;
  border: none;
  margin-bottom: 20px;
}
.contact-wire div p {
  font-size: 20px;
  color: #4F6479;
  margin-bottom: 30px;
  text-align: left;
}
.contact-wire div ul {
  display: flex;
  align-items: center;
}
.contact-wire div ul li a {
  width: 320px;
  background: #F46195;
  color: #fff;
  font-size: 20px;
  font-family: "title", sans-serif;
  text-decoration: none;
  text-align: center;
  padding: 20px 0;
  border-radius: 50px;
  border: 3px solid #FFf;
}
.contact-wire div ul li:last-child a {
  width: 320px;
  background: #43D884;
  margin-left: 20px;
}
.contact-wire div ul li a:hover {
  color: #fff;
  opacity: 0.7;
  transition: .3s;
}


.contact {
  padding: 0px 0 160px;
}
.contact h2 {
  font-size: 50px;
  color: #62B1DD;
  border-bottom: 0px solid var(--pink);
  text-align: center;
  position: relative;
  padding-bottom: 60px;
}
.contact .inner {
  max-width: 1000px;
  padding: 80px 50px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #00000029;
  overflow: hidden;
}
.contact .inner iframe {
  min-height: 3242px;
  height: auto;
  margin: 0 auto;
}

.achievement {
  width: 1956px;
  overflow: hidden !important;
  white-space: nowrap;
  position: relative;
  background: #fff;
  padding-bottom: 30px;
  max-width: none!important;
}
.achievement .scroll-content {
  display: flex;
  gap: 0;
  will-change: transform;
}
.achievement .scroll-content img {
  width: 1956px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/*------------------------------
お問い合わせフォーム
------------------------------*/
.contact .contact-text {
  padding-bottom: 30px;
  margin-bottom: 50px;
  border-bottom: 1px solid #4F6479;
}
.contact .contactBox p {
  text-align: left;
  font-size: 16px;
	width: 70%;
}
.contact .contactBox li {
	margin-bottom: 60px;
  display: flex;
  align-items: center;
}
.contact .contactBox li:last-of-type {
  margin-bottom: 80px;
}
.contact .contactBox li.aria-title h3 {
  background: #4F6479;
  color: #fff;
  text-align: center;
  font-size: 20px;
  padding: 12px 0;
  margin-top: 100px;
  margin-bottom: 20px;
}
.contact .contactBox li.aria-title p {
  padding-bottom: 30px;
  margin-bottom: -20px;
  border-bottom: 1px solid #4F6479;
}
.contact .contactBox li>h4 {
  font-size: 18px;
  font-family: "number", "Noto Sans JP", sans-serif;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.4;
	width: 30%;
  margin-right: 20px;
	margin-right: 7%;
}
.contact .contactBox li>h4::before {
  margin-right: 10px;
  padding: 6px 10px;
  line-height: 1;
  background-color: #9799A5;
  border-radius: 20px;
  color: #fff;
  content: "任意";
  font-size: 14px;
  display: inline-block;
}
.contact .contactBox li>h4.req::before {
  background-color: #FF5E5E;
  content: "必須";
}
.contact .contactBox .wpcf7-list-item {
  margin: 0 0 20px;
}
.contact .contactBox .wpcf7-list-item label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 20px;
}
.contact .contactBox .wpcf7-list-item input {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.contact .contactBox .other-text {
  width: calc(100% - 44px);
  display: block;
  margin-left: 44px;
}
.contact .contactBox .wpcf7-form-control-wrap .wpcf7-text,
.contact .contactBox .wpcf7-form-control-wrap .wpcf7-select{
  border-radius: 5px;
  border: 1px solid #97979B;
  width: 100%;
}
.contact .contactBox .wpcf7-form-control-wrap .wpcf7-textarea {
  border-radius: 5px;
  border: 1px solid #97979B;
  width: 100%;
  height: 200px;
}
.contact .contactBox li .accept {
  border-top: 1px solid #4F6479;
  border-bottom: 1px solid #4F6479;
  max-width: 500px;
  width: 100%;
  margin: 20px auto 0;
  padding: 30px 0;
}
.contact .contactBox li .accept p {
  text-align: center;
  width: 100%;
}
.contact .contactBox li .accept p a {
  color: var(--blue);
  text-decoration: underline;
  display: inline-block;
}
.contact .contactBox li .accept p a:hover {
  color: var(--pink);
}
.contact .contactBox li .accept .wpcf7-list-item {
  margin: 0 !important;
}
.contact .contactBox li .accept .wpcf7-list-item>label {
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #97979B;
  margin: 20px auto 0;
  width: 150px;
}
.contact .contactBox li .contact-note {
  margin-bottom: 20px;
}
.contact .contactBox li.aria-line {
  border: 1px solid #4F6479;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  margin: 0 auto 80px;
}
.contact .contactBox li.aria-line h3 {
  background: #4F6479;
  color: #fff;
  text-align: center;
  font-size: 18px;
  padding: 10px 0;
  margin-bottom: 20px;
  border-radius: 8px 8px 0 0;
}
.contact .contactBox li.aria-line p {
  margin-bottom: 20px;
  padding: 0 20px;
  text-align: center;
  line-height: 1.7;
}
.contact .contactBox li.aria-line a {
  display: none;
  max-width: 240px;
  width: 100%;
  background: #43D884;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  padding: 15px 0;
  border-radius: 50px;
  margin: 0 auto 30px;
}
.contact .contactBox li .qr img {
  margin: 0 auto 20px;
}
.contact .contactBox li span.wpcf7-list-item-label {
  flex: 1;
}
.contact .button {
  padding: 10px 45px;
  background-color: #F46195 !important;
  color: #fff;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 300px;
  margin: 50px auto 0;
  border-radius: 100px;
  transition: all 0.2s;
}
.contact .button:hover {
  background-color: #62B1DD !important;
}
.contact .wpcf7-form-control-wrap input::placeholder,
.contact .wpcf7-form-control-wrap textarea::placeholder {
    opacity: 0.5; /* 一部ブラウザで色が薄くなるのを防ぐ */
}

@media (max-width: 768px) {
	.contact h2 {
		font-size: 30px;
	}
	
	.contact-wire {
    height: auto;
	}
	.contact-wire div h4 {
        font-size: 28px;
        text-align: center;
        margin-left: 0;
    }
	.contact-wire div p {
        text-align: center;
        margin-left: 0;
    }
	.contact-wire div ul {
    display: block;
    position: static;
    margin-top: 10%;
	}
	.contact-wire div ul li {
    width: 100%;
		margin-bottom: 20px;
    }
	.contact-wire div ul li:last-of-type {
		margin-bottom: 0;
	}
  .contact-wire .contact-catch {
    left: 0%;
}
	.contact {
        padding: 0px 3% 120px;
    }
	.contact .inner {
    padding: 50px 3%;
	}
	.contact-wire .inner {
    padding: 50px 3%;
	}
	.achievement {
	  width: 1400px;
	}
	.achievement .scroll-content img {
	  width: 1400px;
	}
	.contact .contactBox li>h4::before {
	  padding: 4px 6px;
	  font-size: 12px;
	}
  .contact .contactBox li {
    display: block;
  }
  .contact .contactBox li>h4 {
    width: 100%;
  }
  .contact .contactBox p {
    width: 100%;
  }
	.contact-wire div ul li a {
		width: 100% !important;
		font-size: 18px;
		padding: 20px 0;
		border: 3px solid #FFf;
		margin-left: 0 !important;
	}
  .contact-wire div ul li:last-child a::before {
    left: 22px;
  }
}