@charset "utf-8";
/* CSS Document */
/***************************************************
テキストサイズ・装飾用
***************************************************/
.color-og{color: #FF8C27}
.color-red{color: #FF0000}
.color-pink{color: #D64C6C}

.fw-b, strong {
  font-weight: bold;
}
.fs18 {
  font-size: clamp(1.6rem, 1.5vw, 1.8rem);
}
.wp-block-column p, .wp-block-group p, .last-text {
  margin-bottom: 5%;
}
/***************************************************
Hタグサイズ・装飾用
***************************************************/
h1, h2, h3, h4, h5 {
  font-family: "小塚明朝 Pr6N", kozuka-mincho-pro, serif;
}
.page-title {
  text-align: center;
  margin: 0 auto 10%;
}
.page-title span {
  display: block;
  line-height: 1.2;
}
.page-title .title-ja {
  font-size: clamp(2.8rem, 3vw, 3rem);
  color: /* #FF6600 */  #194597;
  border-bottom: 2px solid #194597;
  font-weight: bold;
}
.page-title .title-en {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  color: /* #FBA267*/  #7D9CD5;
}
.page-title.news-title .title-ja {
  color: #194597;
  border-bottom: 1px solid #194597;
}
.page-title.news-title .title-en {
  color: #7D9CD5
}
/***************************************************
top スライダ―
***************************************************/
.main-slider {
  height: 60vh;
  overflow: hidden;
}
.main-slider li .slide-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  font-weight: bold;
  line-height: 1.5; /* 適切な行間を設定 */
  white-space: pre-wrap; /* 改行を反映 */
  background: rgba(255, 255, 255, .7);
  padding: 2.5% 5%;
}
.main-slider li .slide-caption span {
  display: inline-block; /* 必須 */
  padding: 0; /* 余白をリセット */
  margin: 0; /* 余白をリセット */
  line-height: normal; /* 行間をリセット */
  box-sizing: border-box; /* ボックスモデルを統一 */
}
.main-slider li .btn {
  width: 10%;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
}
/**********top-text************/
.top-text .inner-block {
  margin-top: -5vh;
}
.top-text p {
  font-weight: bold;
  line-height: 2;
  margin-bottom: 2.5%;
  padding: 0 3%;
}
.top-text p:first-child {
  text-align: center;
}
.top-text .campany-name {
  width: 60%;
  margin: 0 0 0 auto;
}
.top-catch {
  font-size: clamp(2rem, 1.5vw, 2.4rem);
  text-align: center;
}
.top-text .all-link {
  margin-bottom: 5%;
}
/***********top サービス一覧**************/
.service-block {
  overflow: hidden;
}
/* 基本スタイル */
.service-box {
  position: relative; /* 子要素（service-text）の絶対配置を基準にする */
  margin-bottom: 15%; /* 各ボックス間の余白を設定 */
}
.service-box p {
  font-size: 1.4rem;
}
.service-box::after {
  content: "";
  display: block;
  clear: both; /* 親要素の高さを補正 */
}
.service-top {
  width: 85%;
  position: relative;
}
.service-box h3 {
  width: 90%;
  display: flex;
  align-items: center; /* 数字とテキストを中央揃え */
  justify-content: center;
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.number-box {
  background-color: #fff; /* 白背景 */
  border-radius: 50%; /* 円形にする */
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Pacifico", cursive;
  font-weight: bold;
  font-size: clamp(2.4rem, 1.5vw, 2.8rem);
  color: rgba(58, 151, 234, 1);
  line-height: 1;
}
.service02 .number-box {
  color: rgba(242, 155, 118, 1);
}
.service03 .number-box {
  color: rgba(136, 216, 176, 1);
}
.service04 .number-box {
  color: rgba(192, 132, 252, 1);
}
.service05 .number-box {
  color: rgba(242, 140, 177, 1);
}
.service06 .number-box {
  color: rgba(251, 176, 81, 1);
}
.service-name {
  background-color: white; /* 背景を白に */
  padding: 5px 15px 5px 20px; /* テキスト周囲の余白 */
  margin-left: -13px;
  border-radius: 5px; /* テキストの角を少し丸くする */
  font-size: clamp(2rem, 1.5vw, 2.4rem);
  font-weight: bold;
  color: rgba(58, 151, 234, 1);
  width: fit-content;
  line-height: 1;
}
.service02 .service-name {
  color: rgba(242, 155, 118, 1);
}
.service03 .service-name {
  color: rgba(255, 104, 121, 1);
}
.service04 .service-name {
  color: rgba(192, 132, 252, 1);
}
.service05 .service-name {
  color: rgba(242, 140, 177, 1);
}
.service06 .service-name {
  color: rgba(251, 176, 81, 1);
}
.service-image {
  width: 100%;
  margin: 0 auto 0 0;
  height: 250px; /* 画像の高さを設定 */
  object-fit: cover; /* 画像の縦横比を維持して収める */
  position: relative;
}
.service-box h4 {
  font-weight: bold;
  font-size: clamp(1.6rem, 1.4vw, 1.8rem);
  margin-bottom: 2.5px;
}
.service-text {
  position: relative; /* 親要素の高さに影響を与える */
  margin-top: -50px; /* 画像に重ねる */
  left: 10%;
  width: 90%;
  background: rgba(191, 217, 234, 1); /* 背景を透過 */
  padding: 20px;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 影を追加 */
}
.service02 .service-text {
  background: rgba(248, 205, 186, 1);
}
.service03 .service-text {
  background: rgba(245, 185, 178, 1);
}
.service04 .service-text {
  background: rgb(223, 193, 253, 1);
}
.service05 .service-text {
  background: rgb(248, 197, 216, 1);
}
.service06 .service-text {
  background: rgb(255, 233, 205, 1);
}
.service-box:nth-child(even) h3 {
  right: 5%;
  left: inherit;
  transform: none;
}
.service-box:nth-child(even) .service-top {
  margin: 0 0 0 auto;
}
.service-box:nth-child(even) .service-text {
  left: 0;
}
.service-btn {
  background: rgba(191, 217, 234, 1);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
  border-radius: 10px; /* 角丸 */
  width: fit-content; /* 現在の40%を少し広げる */
  padding: 1.5% 5%;
  font-size: clamp(1.2rem, 1.4vw, 1.4rem); /* フォントサイズの調整 */
  position: relative;
  top: 0;
  left: 0;
  margin: 5% 0 0 auto;
  text-align: center;
  overflow: hidden;
}
.service-btn span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 2.5% 5%;
  white-space: nowrap;
}
.service02 .service-btn {
  background: rgba(248, 205, 186, 1)
}
.service03 .service-btn {
  background: rgba(245, 185, 178, 1);
}
.service04 .service-btn {
  background: rgb(223, 193, 253, 1);
}
.service05 .service-btn {
  background: rgb(248, 197, 216, 1);
}
.service06 .service-btn {
  background: rgb(255, 233, 205, 1);
}
.service-btn:before {
  content: "";
  width: 0%;
  height: 100%;
  background: rgba(58, 151, 234, 1);
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s;
}
.service02 .service-btn:before {
  background: rgba(242, 155, 118, 1);
}
.service03 .service-btn:before {
  background: rgba(242, 155, 118, 1);
}
.service04 .service-btn:before {
  background: rgb(192, 132, 252, 1);
}
.service05 .service-btn:before {
  background: rgb(242, 140, 177, 1);
}
.service06 .service-btn:before {
  background: rgb(251, 176, 81, 1);
}
.service-btn:hover:before, .all-link:hover:before {
  width: 100%;
}
.service-btn:active {
  -webkit-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.2), inset -3px -3px 5px rgba(255, 255, 255, 0.2); /* 光と影（内側に） */
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.2), inset -3px -3px 5px rgba(255, 255, 255, 0.2); /* 光と影（内側に） */
  transition: 0.3s ease-in-out;
}
.service-btn:active span {
  color: #FFF; /* テキストの色を変える */
}
/********************aboutページ（sp）***************************/
.worries-section {
  margin: 20px auto 50px;
  padding: 20px;
  background-color: #f5f5f5; /* 背景色を調整 */
  border-radius: 10px;
}
#about h2.worries-title {
  position: relative;
  background-color: #97a689; /* 背景色（例として緑） */
  color: #FFF /*#53412f*/ ; /* 文字色 */
  font-size: clamp(1.6rem, 1.4vw, 1.8rem); /* フォントサイズ */
  padding: 25px 20px; /* 内側の余白 */
  border-radius: 45% / 50%; /* 楕円形にするための角丸 */
  text-align: center;
  width: 90%;
  margin: 0 auto 5%;
}
#about h2.worries-title::before {
  content: none;
}
.worries-title::after {
  content: "";
  position: absolute;
  bottom: -9px; /* 吹き出しのしっぽを下に配置 */
  left: 50%; /* 横位置を中央に */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 20px 0 20px; /* 吹き出しの形を作る */
  border-color: #97a689 transparent transparent transparent; /* 吹き出しの色を設定 */
}
.worries-title strong {
  font-size: clamp(2.2rem, 1.4vw, 2.6rem);
}
.worries-title span::before {
  content: '';
  position: absolute;
  left: 10%;
  top: 40%;
  transform: translateY(-50%);
  width: clamp(30px, 3vw, 50px); /* レスポンシブな幅 */
  height: clamp(34px, 3vw, 56px); /* レスポンシブな高さ */
  background-image: url("../images/ase.png");
  background-size: contain; /* サイズを調整 */
  background-repeat: no-repeat;
  animation: float 2s infinite ease-in-out;
}
.worries-title span::after {
  content: '';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(30px, 4vw, 50px); /* レスポンシブな幅 */
  height: clamp(30px, 4vw, 50px); /* レスポンシブな高さ */
  background-image: url("../images/confusion.png");
  background-size: contain; /* 画像を要素内に収める */
  background-repeat: no-repeat;
  animation: rotate 5s infinite linear;
}
/* 浮き上がるアニメーション */
@keyframes float {
  0%, 100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(-55%);
  }
}
/* 回転アニメーション */
@keyframes rotate {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}
.worries-block li {
  width: 50%;
  margin: 0 auto 0 0;
}
.worries-block li:nth-child(3), .worries-block li:nth-child(5) {
  margin-top: -10%;
}
.worries-block li:nth-child(2n) {
  margin: -10% 0 0 auto;
}
.catchphrase {
  font-size: clamp(2rem, 1.4vw, 2.6rem);
  font-weight: bold; /* 太字にして目立たせる */
  color: #333; /* テキストの色（濃いグレー） */
  text-align: center; /* 中央揃え */
  background-color: #f9f5eb; /* 背景色を柔らかい色に */
  padding: 20px; /* 内側の余白 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影をつけて立体感を演出 */
  margin: 20px auto 50px; /* 上下の余白と中央配置 */
	overflow: hidden;
}
/*目次*/
.table-of-contents {
  width: 90%;
  border: 1px solid #FF8C27;
  border-top: 5px solid #FF8C27;
  background: #FFF8E1;
  padding: 10px;
  margin: 0 auto 50px;
  border-radius: 5px;
}
.table-of-contents summary::marker {
  display: none; /* ▶アイコンを非表示にする */
}
.table-of-contents summary {
  font-size: clamp(2rem, 1.4vw, 2.4rem);
  color: #FF8C27;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2.5% 0 5%;
}
/* 開いているときのsummaryにボーダーを追加 */
.table-of-contents[open] summary {
  border-bottom: 1px solid #FF8C27; /* open時のボーダー */
}
.table-of-contents summary:hover::after {
  transition: transform 1.5s, scale 0.3s ease-in-out;
  transform: rotateY(360deg) scale(1.2);
}
.table-of-contents summary:focus::after {
  transition: transform 1.5s, scale 0.3s ease-in-out;
  transform: rotateY(360deg) scale(1.2);
}
.table-of-contents ol {
  list-style: decimal;
  list-style-position: inside;
  padding: 2.5% 10%;
  margin-top: 10px;
}
.table-of-contents li {
  margin: 5px 0;
  font-weight: bold;
  padding-bottom: 5px;
}
.table-of-contents a:hover {
  text-decoration: underline;
  color: #FF8C27;
}
/***aboutページ　h2****/
#about h2 {
  color: #FF8C27;
  font-size: clamp(2.4rem, 1.4vw, 2.8rem);
  line-height: 1;
  margin-bottom: 5%;
}
/*想い*/
#about h2::before {
  font-family: "Material Icons";
  content: '\e743';
  margin-right: 10px; /* アイコンとテキスト間のスペース */
  color: #FF8C27;
  vertical-align: text-bottom;
  font-size: clamp(2.8rem, 1.4vw, 3.2rem);
}
.hearts {
  display: inline-flex; /* 横並びに配置 */
  vertical-align: middle; /* 見出しと揃える */
}
.hearts figure {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hearts figure img {
  width: 70%; /* 画像の幅を調整 */
  height: auto; /* アスペクト比を保持 */
}
/* 各ハートの異なるアニメーション */
.hearts figure:nth-child(1) img {
  animation: bounce 2s infinite;
}
.hearts figure:nth-child(2) img {
  animation: pulse 1.5s infinite;
}
.hearts figure:nth-child(3) img {
  animation: float 3s infinite ease-in-out;
}
/* アニメーション設定 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
#about h2#heading-2::before {
  content: '\f8d8';
}
#about h2#heading-3::before {
  content: '\f8dc';
}
/***aboutページ　コンテンツ部分****/
.wp-element-caption {
  font-size: 1.2rem;
  color: #7E7E7E;
  margin: 0 auto;
  text-align: center;
}
.wp-block-list.worries00 li {
  background: #e6f6a5;
  line-height: 2;
  margin-bottom: 2.5%;
  padding: 1.5% 2.5%;
  width: fit-content;
}
.about-logo {
  width: 50%;
  margin: 0 0 10% auto;
}
.emphasis-box {
  background: #ffe2c2;
  padding: 2.5% 5%;
  margin-bottom: 15%;
}
.wp-block-list.support-list li {
  background: #ffcccc;
  line-height: 2;
  margin-bottom: 2.5%;
  padding: 1.5% 2.5%;
  width: fit-content;
}
.last-catch {
  font-size: clamp(2rem, 1.4vw, 2.6rem);
  margin: 8% auto;
}
.profile-image {
  text-align: center;
}
/********************お問合せミニボタン*************************/
.reduction {
  display: flex;
  flex-flow: column;
  margin-bottom: 10%;
  color: #FFF !important;
}
.btn-emphasis {
  text-align: center;
}
.point-btn {
  border: 1px solid #48752c;
  background: linear-gradient(#f9fcb5, #FFF, #f9fcb5);
  border-radius: 10px;
  color: #48752c;
  width: 50%;
  line-height: 1;
  padding: 1.5% 5%;
  margin: 0 auto 5%;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
}
.point-btn span {
  font-family: "Material Icons";
  content: '\f0d2';
  margin-right: 10px; /* アイコンとテキスト間のスペース */
  vertical-align: text-bottom;
  font-size: clamp(2.4rem, 1.4vw, 3rem);
}
/********************お知らせ＆コラム（sp）***************************/
.cate-list {
  width: 90%;
  margin: 10% auto 20%;
  display: flex;
  justify-content: center;
  gap: 8%;
}
.cate-list li {
  width: 46%;
  max-width: 230px;
  text-align: center;
  background: #2B5F26;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
}
.cate-list li.news {
  background: #0F328C;
}
.cate-list li a {
  color: #FFF;
  display: inline-block;
  background-color: transparent;
  font-weight: bold;
  width: 100%;
  padding: 8% 0;
}
.cate-list li:hover {
  background-color: #CCC; /* ホバー時の背景色 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
  transform: translateY(-2px); /* 少し浮き上がるようにする */
}
.cate-list li a:hover {
  color: #343434;
}
/* フォーカス時のアクセシビリティ対応 */
.cate-list li:focus {
  background: #CCC;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
  transform: translateY(-2px); /* 少し浮き上がるようにする */
}
/* コラム一覧*/
.news-list li {
  position: relative;
  margin-bottom: 20%;
  border: 1px solid #CCC;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
}
.news-list li .thumb-image {
  text-align: center;
  margin: 0 auto;
}
.news-list li .thumb-image svg.site-name {
  width: 90%;
  margin: 10% auto;
}
.news-list li .con-title {
  border-bottom: 1px solid #333;
  padding-bottom: 2.5%;
  margin-bottom: 5%;
}
.news-list li .text-box {
  padding: 5%;
}
.news-list li .cate-name {
  position: absolute;
  left: 5%;
  top: -1.2em;
  background: #2B5F26;
  padding: 1.5% 5%;
  font-size: 1.4rem;
}
.news-list li .all-link {
  background: #2B5F26;
  margin-right: 0;
}
.news .news-list li .all-link {
  background: #0F328C;
}
.news-list li.news .cate-name, .news-list li.news .all-link {
  background: #0F328C;
}
.news-list li .cate-name a, .news-list li .all-link a {
  color: #FFF;
  display: inline-block;
  background-color: transparent;
}
.news-list li .cate-name:before, .news-list li .all-link:before {
  background: #CCC;
}
.news-list li .cate-name a:hover span, .news-list li .all-link a:hover span {
  color: #343434;
}
/* ページャー */
.pagination {
  text-align: center;
  margin-bottom: 10%;
}
.pagination .page-numbers {
  border: 1px solid #CCC;
  padding: 1% 3%; /* 内側の余白 */
  margin: 0 4px; /* 各数字部分の間隔を調整 */
  display: inline-block; /* 数字部分を横並びに */
  border-radius: 4px; /* 角丸を追加（任意） */
}
.pagination .current {
  border: 1px solid #FF9419;
  background: #FF9419;
  color: #FFF;
}
.pagination a:hover, .pagination a:focus {
  background: #CCC;
  color: #000;
}
/*表示件数選択*/
.pagination-top, .pagination-bottom {
  margin: 0 5% 10% auto;
  width: fit-content;
}
/* カスタムドロップダウンのラッパー */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
}
.custom-select-wrapper select {
  appearance: none; /* デフォルトのスタイルを削除 */
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 5px 30px 5px 10px; /* 右側の余白を広く取る */
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"%3E%3Cpath d="M0 0l5 6 5-6z" fill="%23333"/%3E%3C/svg%3E') no-repeat right 10px center;
  background-size: 10px 6px;
  cursor: pointer;
}
/* フォーカス時のスタイル（任意） */
.custom-select-wrapper select:focus {
  border-color: #666;
  outline: none;
}
/* ▼マークの位置とサイズ */
.custom-select-wrapper select::-ms-expand {
  display: none; /* IE用 */
}
/*************************カテゴリ別一覧******************************/
.sub-title, .single #main-contents .day-box {
  text-align: center;
  background: #2B5F26;
  color: #FFF;
  padding-bottom: 20%;
  padding-top: 3%;
}
.news .sub-title, .single #main-contents.news .day-box {
  background: #0F328C;
}
.inner-block.top-box {
  background: #FFF;
  margin-top: -15%;
  padding: 2.5% 5%;
}
/******サブcate*****/
.sub-cate-list {
  margin: 5% auto 10%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); /* カードの幅を調整 */
  gap: 20px;
}
.sub-cate-list li {
  padding: 5% 1.5% 0;
  margin-bottom: 5%;
  border: 1px solid #447c3f;
  text-align: center;
}
.sub-cate-list li a {
  display: inline-block;
  color: #447c3f;
  line-height: 1;
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.sub-cate-list li a::after {
  font-family: "Material Icons";
  content: '\e313';
  display: block;
}
.news-list li .cate-name.production-tips {
  background: #447c3f;
}
/*カテゴリ別カラー設定*/
.sub-cate-list li.lead-generation-tips {
  border: 1px solid #b2c437;
}
.sub-cate-list li.lead-generation-tips a {
  color: #b2c437;
}
.news-list li .cate-name.lead-generation-tips {
  background: #b2c437;
}
.sub-cate-list li.internet-trends {
  border: 1px solid #319dcb;
}
.sub-cate-list li.internet-trends a {
  color: #319dcb;
}
.news-list li .cate-name.internet-trends {
  background: #319dcb;
}
.sub-cate-list li.marketing {
  border: 1px solid #79b483;
}
.sub-cate-list li.marketing a {
  color: #79b483;
}
.news-list li .cate-name.marketing {
  background: #79b483;
}
.sub-cate-list li.seo {
  border: 1px solid #34d174;
}
.sub-cate-list li.seo a {
  color: #34d174;
}
.news-list li .cate-name.seo {
  background: #34d174;
}
.sub-cate-list li.css-sample {
  border: 1px solid #94ad4d;
}
.sub-cate-list li.css-sample a {
  color: #94ad4d;
}
.news-list li .cate-name.css-sample {
  background: #94ad4d;
}
.sub-cate-list li.script-sample {
  border: 1px solid #93bb57;
}
.sub-cate-list li.script-sample a {
  color: #93bb57;
}
.news-list li .cate-name.script-sample {
  background: #93bb57;
}
.sub-cate-list li.coffee-break {
  border: 1px solid #b29784;
}
.sub-cate-list li.coffee-break a {
  color: #b29784;
}
.news-list li .cate-name.coffee-break {
  background: #b29784;
}
.sub-cate-list li.information {
  border: 1px solid #5A85F3;
}
.sub-cate-list li.information a {
  color: #5A85F3;
}
.news-list li .cate-name.information {
  background: #5A85F3;
}
.sub-cate-list li.event {
  border: 1px solid #55C8DF;
}
.sub-cate-list li.event a {
  color: #55C8DF;
}
.news-list li .cate-name.event {
  background: #55C8DF;
}
/*
 * 両サイドからバーが伸びる
 */
.sub-cate-list li {
  position: relative;
  overflow: hidden;
}
.sub-cate-list li::before, .sub-cate-list li::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 10px; /* 最初はカラーバーの幅を小さく*/
  top: 0;
  background-color: #447c3f; /* カラーバーの色 */
  transition: all 0.4s ease; /* アニメーションの速度*/
}
.sub-cate-list li::before {
  left: 0;
}
.sub-cate-list li::after {
  right: 0;
}
.sub-cate-list li:hover::before, .sub-cate-list li:hover::after {
  width: 100%; /* ホバー時に中央に向かって広がる */
}
.sub-cate-list li.lead-generation-tips::before, .sub-cate-list li.lead-generation-tips::after {
  background-color: #b2c437; /* カラーバーの色 */
}
.sub-cate-list li.internet-trends::before, .sub-cate-list li.internet-trends::after {
  background-color: #319dcb; /* カラーバーの色 */
}
.sub-cate-list li.marketing::before, .sub-cate-list li.marketing::after {
  background-color: #79b483; /* カラーバーの色 */
}
.sub-cate-list li.seo::before, .sub-cate-list li.seo::after {
  background-color: #34d174; /* カラーバーの色 */
}
.sub-cate-list li.css-sample::before, .sub-cate-list li.css-sample::after {
  background-color: #94ad4d; /* カラーバーの色 */
}
.sub-cate-list li.script-sample::before, .sub-cate-list li.script-sample::after {
  background-color: #93bb57; /* カラーバーの色 */
}
.sub-cate-list li.coffee-break::before, .sub-cate-list li.coffee-break::after {
  background-color: #b29784; /* カラーバーの色 */
}
.sub-cate-list li.information::before, .sub-cate-list li.information::after {
  background-color: #5A85F3; /* カラーバーの色 */
}
.sub-cate-list li.event::before, .sub-cate-list li.event::after {
  background-color: #55C8DF; /* カラーバーの色 */
}
.sub-cate-list li a:hover {
  color: #FFF !important;
  opacity: 1;
}
.bottom-sub-cate {
  margin-bottom: 10%;
}
/*************************お知らせ＆コラム　詳細（single　SP）******************************/
.single #main-contents .day-box {
  padding: 5% 5% 20%;
  font-size: 1.4rem;
  text-align: left;
}
.single .cate-name {
  border: 1px solid #FFF;
  border-right: 5px solid #FFF;
  border-left: 5px solid #FFF;
  padding: 1% 2.5%;
  width: fit-content;
  margin-bottom: 1.5%;
}
.single .cate-name a, .single .cate-name a:visited {
  color: #FFF;
}
.single time span {
  display: block;
}
.single .post-date:before {
  font-family: "Material Icons";
  color: #FFF;
  content: "calendar_month";
  vertical-align: bottom;
  padding-right: 0.5rem;
}
.single .update-date:before {
  font-family: "Material Icons";
  color: #FFF;
  content: "update";
  vertical-align: bottom;
  padding-right: 0.5rem;
}
.single .article-block {
  margin-top: -15%;
  margin-bottom: 10%;
  background: #FFF;
  padding: 5% 2.5%;
}
.single .cont-thumb-image {
  margin-bottom: 5%;
}
/*************投稿記事内目次*******************/
.single .table-of-contents {
  width: 100%;
  border: 1px solid #0F328C;
  border-top: 5px solid #0F328C;
  background: #D6DFF8;
}
.single .table-of-contents[open] summary {
  border-bottom: 1px solid #0F328C;
}
.single .table-of-contents summary {
  color: #0F328C
}
.single .column .table-of-contents {
  border: 1px solid #2B5F26;
  border-top: 5px solid #2B5F26;
  background: #DEF5DC;
}
.single .column .table-of-contents[open] summary {
  border-bottom: 1px solid #2B5F26;
}
.single .column .table-of-contents summary {
  color: #2B5F26;
}
.single .main-box p, .single blockquote {
  margin-bottom: 5%;
}
/*************投稿記事内タイトル（h1/h2/h3）*******************/
.single h1.post-title {
  color: #0F328C;
  text-align: center;
  font-size: clamp(2rem, 1vw, 2.4rem);
}
.single .main-box h1 {
  color: #0F328C;
}
.single .main-box h2 {
  color: #0F328C;
  border-left: 5px solid #0F328C;
  padding-left: 3%;
  line-height: 1;
  margin: 8% 0;
}
.single .main-box h3 {
  color: #0F328C;
  border-bottom: 1px solid #0F328C;
  margin-bottom: 8%;
}
.single .main-box h4, .single .main-box h5 {
  color: #0F328C;
  margin-bottom: 8%;
}
.single blockquote {
  background: #D6DFF8;
  padding: 2.5%;
}
/*コラム*/
.single .column h1.post-title {
  color: #2B5F26;
	margin-bottom: 5%;
}
.single .column .main-box h1 {
  color: #2B5F26;
}
.single .column .main-box h2 {
  color: #2B5F26;
  border-left: 5px solid #2B5F26;
}
.single .column .main-box .point-box h2{
	border-left: none;
}
.single .column .main-box .point-box h2 span{
	display: none;
}
.single .column .main-box h3 {
  color: #2B5F26;
  border-bottom: 1px solid #2B5F26;
}
.single .column .main-box h4, .single .column .main-box h5 {
  color: #0F328C;
}
.single .column blockquote {
  background: #f6fbf1;
}
/*****************お問合せボタンブロック******************/
.inq-block {
  background: linear-gradient(180deg, #fb8c00, #ffa726, #ffa726, #fb8c00);
  padding: 5%;
  color: #FFF;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
  margin-bottom: 8%;
}
.single .column .main-box .inq-block h2 {
  border: none;
  text-align: center;
  width: 50%;
  padding: 0;
  margin: 0 auto 5%;
}
.single .column .main-box .inq-block h2 span {
  color: #FFF;
  border: none;
  text-align: center;
  display: block;
  font-size: clamp(2.8rem, 3vw, 3rem);
  font-weight: bold;
  border-bottom: 1px solid #FFF;
  padding: 0 10% 2%;
}
.single .column .main-box .inq-block h2 span.title-en {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  border: none;
  padding: 2% 0 0;
}
.inq-block .mail-inq svg {
  width: 70%;
  margin: 0 auto 5%;
  display: block;
}
.inq-block .line-btn a img {
  width: 70%;
  margin: 0 auto;
}
.inq-block .line-btn a, .inq-block .line-btn a:visited {
  color: #FFF;
  text-align: center;
  display: block;
}
/*****************Point*********************/
.point-box {
  position: relative;
  margin: 20% auto 8%;
  padding: 10% 5%;
  background-image:
    linear-gradient(#fff 0 100%), repeating-linear-gradient(135deg, #2B5F26 0 5px, transparent 5px 10px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(100% - 10px) calc(100% - 10px), 100%;
}
.point-box h2 {
  position: absolute;
  top: -7.5vh;
  left: 5%;
  background: #FFF;
  width: 60%;
  transform: rotate(353deg);
}
.point-box ul{
	margin-top: 5%;
}
.point-box li {
  color: #2B5F26;
  font-weight: bold;
  margin-bottom: 2.5%;
}
.point-box li::before {
  font-family: "Material Icons";
  content: "\e86c";
  vertical-align: bottom;
  padding-right: 1.5%;
}

/****************タグ*********************/
.hashtag{
	background: #2B5F26;
	padding: 5%;
	margin-bottom: 8%;
}
.hashtag ul{
	display: flex;
	flex-wrap: wrap;
	gap:2.5%;
}
.hashtag li{
	background:#FFF;
	border-radius: 8px;
	width: fit-content;
	padding: 1% 2%;
	font-size: 1.4rem;
	margin-bottom: 2.5%;
}
.hashtag li::before{
	content: "#";
}

/****************関連サービス***********************/
.inner-block.related-service{
	margin-bottom: 8%;
}
.related-service h2{
	text-align: center;
	color: #2B5F26;
	margin-bottom: 5%;
}
.related-service-links{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around;
	gap:2.5%;
}
.related-service-links .service-btn{
	margin: 0;
	width:fit-content;
	min-width: 165px;
	margin-bottom: 5%;
    padding: 3.5% 1.5%;
    line-height: 1;
	font-weight: bold;
}
.related-service-links .service-btn.ec{background: rgba(242, 155, 118, 1)}
.related-service-links .service-btn.ec::before{background: rgba(248, 205, 186, 1)}
.related-service-links .service-btn.photo-shooting{background:rgba(251, 176, 81, 1) }
.related-service-links .service-btn.photo-shooting::before{background:rgb(255, 233, 205, 1) }
.related-service-links .service-btn.web{background:rgba(58, 151, 234, 1) }
.related-service-links .service-btn.web::before{background:rgba(191, 217, 234, 1) }
.related-service-links .service-btn.seo-meo-support{background:rgba(192, 132, 252, 1) }
.related-service-links .service-btn.seo-meo-support::before{background:rgb(223, 193, 253, 1) }
.related-service-links .service-btn.print-design{background:rgba(242, 140, 177, 1)}
.related-service-links .service-btn.print-design::before{background:rgb(248, 197, 216, 1) }
.related-service-links .service-btn.operation-support{background:rgba(136, 216, 176, 1) }
.related-service-links .service-btn.operation-support::before{background: rgb(195, 235, 215, 1)}

.related-service-links .service-btn a:hover{
	opacity: 1;
}


/*************関連記事*******************/
.single .related-articles h1 {
  text-align: center;
  border-top: 1px solid #0F328C;
  border-bottom: 1px solid #0F328C;
  padding: 2.5%;
  color: #0F328C;
  background: #D6DFF8;
  margin-bottom: 2.5%;
}
.single .related-articles{
  overflow: hidden;
  position: relative;
}


.single .related-articles li {

  position: relative;
  padding: 0 0 5%;
  margin: 10% auto 20%;
  border: 1px solid #CCC;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(255, 255, 255, 0.2); /* 光と影 */
}
.single .related-articles .thumb-image {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 のアスペクト比を設定 */
  position: relative;
  overflow: hidden;
}
.single .related-articles .thumb-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を切り抜きながら比率を維持 */
  position: absolute;
  top: 0;
  left: 0;
}

.single .related-articles .thumb-image svg.site-name {
  width: 90%;
  margin: 10% auto;
}
.single .related-articles li .con-title {
  border-bottom: 1px solid #333;
  padding-bottom: 2.5%;
  margin-bottom: 5%;
}
.single .related-articles li .text-box {
  padding: 5%;
}
.single .related-articles li .cate-name {
  position: absolute;
  left: 5%;
  top: -1.2em;
  background: #2B5F26;
  padding: 1.5% 5%;
  font-size: 1.4rem;
}
.single .related-articles li .all-link {
	position: absolute;
	bottom: 2.5%;
  background: #2B5F26;
  right:0;
}
.single .news .related-articles li .all-link {
  background: #0F328C;
}
.single .related-articles li .all-link a {
  color: #FFF;
}
.single .related-articles li .all-link::before {
  background: #CCC;
}
.single .related-articles .swiper-button-prev, .single .related-articles .swiper-button-next {
  width: 50px; /* ボタンサイズ */
  height: 50px;
  background-color: white; /* 背景色を白に設定 */
  border-radius: 50%; /* 丸くする */
  border: 2px solid #ccc; /* ボーダーを追加（任意） */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 影を追加（任意） */
  z-index: 10; /* ボタンが他の要素より前に出るように */
  top: 35%;
font-family: "Material Icons";
	position: absolute;
}
.single .related-articles .swiper-button-prev {
  left: 0;
	 content: '\eaa7';
}
.single .related-articles .swiper-button-next {
  right: 0;
 content: '\eaaa';
}
.single .related-articles .swiper-button-prev::after, .single .related-articles .swiper-button-next::after {
  font-size: 18px; /* アイコンサイズを調整 */
  color: #000; /* アイコンの色を黒に変更（必要に応じて変更） */
}
/******************************************************************************************************************************
タブレット横向きおよびPC用デザイン（768px以上）
*******************************************************************************************************************************/
@media (min-width: 768px) {
	/*****topページ*****/
	.top-text .campany-name{
		width:30%; 
	}
  #about h2.worries-title {
    width: 70%;
    padding: 5%;
  }
  .is-layout-flex:nth-child(odd) {
    flex-direction: row-reverse;
  }
  .is-layout-flex.profile-block {
    flex-direction: row;
  }
  .reduction {
    width: 80%;
    margin: 0 auto 5%;
    padding: 3%;
    flex-flow: row;
    justify-content: space-around;
  }
  .btn-text {
    flex: 1;
  }
  .btn-emphasis {
    width: 30%;
  }
  .point-btn {
    width: 80%;
    padding: 2.5% 5%;
  }
  .thumb-image {
    display: flex; /* 子要素をフレックスボックスで配置 */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    height: auto; /* 必要に応じて高さを調整 */
  }
  .news-list li .con-title {
    border-bottom: none;
  }
  .news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* カードの幅を調整 */
    gap: 40px;
  }
  .news-list li {
    margin: 0 auto 15%;
    max-width: none;
  }
  /*************************カテゴリ別一覧******************************/
  .sub-title {
    padding-bottom: 10%;
    padding-top: 1%;
  }
  .inner-block.top-box {
    margin-top: -5%;
  }
  /******サブcate*****/
  .sub-cate-list {
    padding: 0 10%;
    margin: 2.5% auto 5%;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* カードの幅を調整 */
  }
/*************************お知らせ＆コラム　詳細（single　タブレット）******************************/
	.single #main-contents .day-box {}	
	
	
}
/*****************************************************************************************************************************
PC用デザイン（1024px以上）
******************************************************************************************************************************/
@media (min-width: 1024px) {
  .page-title {
    max-width: 400px;
    margin-bottom: 2.5%;
  }
  .page-title .title-en {
    text-align: center;
  }
  .wp-block-column p, .wp-block-group p, .last-text {
    margin-bottom: 2.5%;
  }
  /***************************************************
top スライダ―
***************************************************/
  .main-slider {
    height: 40vw;
    overflow: hidden;
  }
  .main-slider li .slide-caption {
    position: absolute;
    width: 75%;
    left: 50%;
    bottom: 30%;
    transform: translate(-50%, -50%);
    font-size: clamp(2.8rem, 3vw, 3rem);
    background: none;
  }
  .main-slider li .slide-caption span:first-child {
    padding-left: 2%;
  }
  .main-slider li .slide-caption span:last-child {
    padding-right: 2%;
  }
  .main-slider li .btn {
    width: 12%;
    background: #FFF;
    border-radius: 10px;
    display: flex;
    bottom: 5%;
    right: 5%;
    padding: .5% 1.5%;
    font-weight: bold;
  }
  .main-slider li .btn .pc-only {
    font-size: clamp(1.6rem, 1.2vw, 2rem);
    color: #FF8C27;
    flex: 1;
  }
  .main-slider li .btn svg {
    width: 18%;
    height: auto;
  }
  /**********top-text************/
  #main-contents svg.box-bg01, #main-contents svg.box-bg02 {
    display: block;
    width: 55%;
  }
  #main-contents svg.box-bg02 {
    margin: 0 0 0 auto;
  }
  .top-text .inner-block {
    margin-top: -15vh;
  }
  .top-text p {
    text-align: center;
  }
  .top-text .all-link {
    margin: 0 auto 5%;
  }
  .campany-name {
    width: 25%;
    margin: -13vh 0 0 auto;
  }
  /***********top サービス一覧**************/
  .service-block {
    overflow-x: inherit;
  }
  .service-inner {
    width: 74%;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
/*	  overflow-x: hidden;*/
  }
  .service-box {
    position: inherit;
    width: calc(90% / 3);
    max-width: 440px;
    min-height: unset;
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;
  }
  .service-box.service01, .service-box.service03 {
    min-height: unset;
  }
  .service-box.service02, .service-box.service05 {
    transform: translateY(50px);
  }
  .service-top {
    width: 100%;
  }
  .service-text {
    position: inherit;
    width: 100%;
    margin-top: 0;
    padding-bottom: 15%;
    flex-grow: 1;
  }
  .service-box .service-btn {
    position: absolute;
    right: 5%;
    bottom: 3%;
    top: auto;
    left: auto;
  }
  /********************aboutページ（PC）***************************/
  #about .title-block.main-title {
    background: -moz-linear-gradient(to bottom, #FF6600, #FFC778 30%, #FFF);
    background: -webkit-linear-gradient(to bottom, #FF6600, #FFC778 30%, #FFF);
    background: linear-gradient(to bottom, #FF6600, #FFC778 30%, #FFF);
    padding: 2.5% 0 10%;
  }
  #about .page-title .title-ja {
    color: #FFF;
    border-bottom: 1px solid #FFF;
  }
  #about .page-title .title-en {
    color: #FFF;
  }
  #about .page-title {
    margin-bottom: 0;
  }
  #about h2 {
    margin-bottom: 3%;
  }
  .worries-block {
    background: #FFF;
    width: 74%;
    max-width: 1420px;
    margin: -7% auto 0;
    padding-top: 3%;
	}
  #about h2.worries-title {
    width: 65%;
    padding: 3%;
    font-size: clamp(2.2rem, 2.5vw, 2.6rem);
  }
  .worries-title strong {
    font-size: clamp(2.6rem, 2.5vw, 3.2rem);
  }
  .worries-title span::before {
    left: 15%;
    top: 30%;
  }
  .worries-title span::after {
    right: 15%;
  }
  .page .worries-block ul {
    width: 90%;
    margin: 0 auto 5%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3%; /* 吹き出し同士の横方向の間隔を調整 */
		  overflow: hidden;
	  padding-top: 3%;
  }
  .worries-block .wp-block-list li {
    width: calc((100% - 10%) / 3); /* 吹き出しを均等配置 */
    margin-bottom: 20px; /* 吹き出し同士の縦方向の間隔 */
  }
  .worries-block .wp-block-list li img {
    object-fit: contain; /* 画像の縦横比を保持 */
  }
  .worries-block .wp-block-list li:nth-child(odd) {
    margin-right: inherit; /* 奇数番目を左寄せ */
  }
  .worries-block .wp-block-list li:nth-child(even) {
    margin-left: inherit; /* 偶数番目を右寄せ */
  }
  .worries-block li:nth-child(3), .worries-block li:nth-child(5) {
    margin-top: inherit;
  }
  .table-of-contents {
    width: 74%;
    max-width: 1420px;
    margin: 0 auto 5%;
  }
  .wp-block-list.worries00 li, .wp-block-list.support-list li {
    margin-bottom: 1.5%;
    padding: 0.5% 1%;
  }
  .emphasis-box {
    width: 80%;
    margin: 2.5% auto 5%;
    padding: 1% 2.8%;
  }
  .last-catch {
    text-align: center;
    margin: 4% auto;
  }
  .about-logo {
    width: 50%;
    margin-bottom: 0;
  }
  .reduction {
    width: 65%;
  }
  /********************お知らせ・コラム一覧（PC）***************************/
  .cate-list {
    width: 74%;
    max-width: 1420px;
    margin: 2.5% auto 5%;
  }
  .pagination-top, .pagination-bottom {
    margin-bottom: 5%
  }
  .news-list li .all-link {
    margin: 5% 0 5% auto;
  }
  .pagination {
    margin-bottom: 5%;
  }
  .pagination .page-numbers {
    padding: .5% 1%;
  }
  /******サブcate*****/
  .sub-cate-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* カードの幅を調整 */
  }
/*************************お知らせ＆コラム　詳細（single　PC）******************************/
	.single #main-contents .day-box{
display: flex;
justify-content:space-between;
padding:2.5% 13% 8%;
	}
	.single .article-block{
		margin-top: -7%;
		padding: 2.5%;
	}
	.single .column h1.post-title{
		margin-bottom: 2.5%;
	}
}