@charset "UTF-8";
/* =========================================
   1. 変数定義 & Google Fonts
   ========================================= */
@import url("https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=M+PLUS+Rounded+1c&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Shippori+Mincho:wght@400;600&display=swap");
/* =========================================
   2. リセットCSS & 基本設定
   ========================================= */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

button {
  background: transparent;
  border: none;
}

html {
  scroll-behavior: smooth;
  letter-spacing: 0.12em;
}

/* 基本タグ設定 */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

header, footer, nav, section, article, aside, figure, figcaption {
  display: block;
}

ol, ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

/* Body設定 */
body {
  font-family: "Julius Sans One", "M PLUS Rounded 1c", serif;
  font-weight: 400;
  font-style: normal;
  color: #525557;
  font-size: 16px;
  line-height: 1.6;
  background-color: #F7FAFC;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
a:hover {
  opacity: 0.7;
}

/* 内部コンテナ */
.inner {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
}

/* =========================================
   3. メディアクエリ & ユーティリティ
   ========================================= */
/* 表示切り替えクラス */
.br-sp {
  display: none;
}
@media (max-width: 767px) {
  .br-sp {
    display: block;
  }
}

.br-tab {
  display: none;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .br-tab {
    display: block;
  }
}

.br-pc {
  display: block;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .br-pc {
    display: none;
  }
}
@media (max-width: 767px) {
  .br-pc {
    display: none;
  }
}

.br-tab-sp {
  display: none;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .br-tab-sp {
    display: block;
  }
}
@media (max-width: 767px) {
  .br-tab-sp {
    display: block;
  }
}

/* =========================================
   4. サイドバー (Sidebar) - 修正版
   ========================================= */
.sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1C2249;
  /* Flexboxで中身を中央揃えにする設定 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 横方向の中央揃え */
  padding-top: 20px;
  z-index: 2000;
  color: #F7FAFC;
  /* タブレット用の幅調整 */
  /* ▼▼▼ スマホ用の固定設定 ▼▼▼ */
}
@media (min-width: 768px) and (max-width: 1099px) {
  .sidebar {
    width: 180px;
  }
}
@media (max-width: 767px) {
  .sidebar {
    width: 100%;
    height: 60px; /* 下部メニューの高さ */
    top: auto; /* 上固定を解除 */
    bottom: 0; /* 下に固定 */
    left: 0;
    padding: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; /* 横並び */
    background-color: #fff;
    -webkit-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  }
}

/* ロゴの設定（PC/Tab） */
.side-bar-logo {
  font-size: 14px;
  padding: 60px 0 30px; /* 余白調整 */
  text-align: center; /* ★文字を中央揃えにする */
  line-height: 1.8;
  /* スマホでは非表示 */
}
@media (max-width: 767px) {
  .side-bar-logo {
    display: none;
  }
}

/* メニューエリア（PC/Tab） */
.side-menu {
  width: 100%;
  text-align: center;
  /* スマホでは非表示 */
}
@media (max-width: 767px) {
  .side-menu {
    display: none;
  }
}

.side-menu-lists {
  width: 100%;
}

.side-menu-list {
  padding: 15px 0; /* メニュー間の余白 */
}

/* リンクのデザイン */
.side-menu-list_title {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  letter-spacing: 0.1em;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  /* ホバー時のアニメーション（下線） */
}
.side-menu-list_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.side-menu-list_title:hover {
  color: #EF8457;
}
.side-menu-list_title:hover::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

/* QRコードエリア（PC/Tab） */
.side-links {
  text-align: center;
  margin-top: 40px;
  /* スマホでは非表示 */
}
@media (max-width: 767px) {
  .side-links {
    display: none;
  }
}

.line-QR {
  display: inline-block;
  width: 120px;
}
.line-QR img {
  width: 100%;
  height: auto;
}

/* =========================================
  4.1. スマホ固定フッターメニュー（スマホのみ表示）
   ========================================= */
.side-bottom-menu {
  /* PCでは強制的に非表示 */
  display: none !important;
}

/* スマホ表示時のみ有効 */
@media (max-width: 767px) {
  .side-bottom-menu {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; /* 強制表示 */
    width: 100%;
    height: 100%;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #1C2249;
  }
}
/* スマホメニューの各項目 */
.side-menu-item-sp {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.side-menu-item-sp:last-child {
  border-right: none;
}
.side-menu-item-sp a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}
.side-menu-item-sp i {
  font-size: 18px;
  margin-bottom: 4px;
}

/* お問い合わせ（CONTACT）をオレンジにする */
.side-menu-item-sp.contact-link {
  background-color: #EF8457;
}
.side-menu-item-sp.contact-link a {
  color: #fff;
  font-weight: bold;
}

/* =========================================
   5. メインビジュアル (Hero Section)
   ========================================= */
.main-visual {
  position: relative;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  z-index: 120;
  overflow: hidden;
  margin-left: 250px;
  background: url(../img/TOP-image.webp) center center/cover;
  /* 画像の上に黒いフィルターをかける */
  /* コンテンツ */
}
.main-visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .main-visual {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  .main-visual {
    margin-left: 0;
    margin-top: 0;
  }
}
.main-visual .main-visual-content {
  position: relative;
  width: 100%;
  max-width: 1100px;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 50px;
  /* キャッチコピー */
}
.main-visual .main-visual-content .hero-copy {
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
  margin-bottom: 60px;
  /* タイプライター風アニメーション部分 */
}
.main-visual .main-visual-content .hero-copy .sub-message {
  font-size: 22px;
  letter-spacing: 0.15em;
  line-height: 2;
  margin-bottom: 20px;
  font-weight: 400;
}
@media (max-width: 767px) {
  .main-visual .main-visual-content .hero-copy .sub-message {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
  }
}
.main-visual .main-visual-content .hero-copy .main-message {
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid #e27b5d; /* オレンジ色のカーソル */
  width: 0;
  -webkit-animation: typing 3s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
          animation: typing 3s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.main-visual .main-visual-content .hero-copy .main-message .cross {
  font-size: 0.8em;
  opacity: 0.8;
  margin: 0 5px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .main-visual .main-visual-content .hero-copy .main-message {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .main-visual .main-visual-content .hero-copy .main-message {
    font-size: 28px;
    line-height: 1.4;
    border-right: none; /* スマホではカーソル消去 */
    white-space: normal; /* 折り返し許可 */
    width: auto;
    -webkit-animation: none;
            animation: none; /* アニメーション停止 */
  }
}
.main-visual .main-visual-content .portfolio-name {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  opacity: 0.8;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
@media (max-width: 767px) {
  .main-visual .main-visual-content .portfolio-name {
    font-size: 14px;
    margin-bottom: 0;
  }
}

/* スクロールインジケーター（右下配置・横並び） */
.scroll-indicator {
  position: absolute;
  bottom: 10px;
  right: 6%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; /* 横並び */
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  color: #ffffff;
  z-index: 10;
}
@media (max-width: 767px) {
  .scroll-indicator {
    right: 20px;
    bottom: 10px;
  }
}

.arrow {
  position: relative;
  width: 1px;
  height: 165px;
  background-color: #ffffff;
  margin-right: 10px;
  overflow: visible;
}

.circle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: moveCircle 2s infinite;
          animation: moveCircle 2s infinite;
}

.scroll-text {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Julius Sans One", sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #ffffff;
}

/* =========================================
   6. アニメーション定義
   ========================================= */
@-webkit-keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #e27b5d;
  }
}
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #e27b5d;
  }
}
@-webkit-keyframes moveCircle {
  0% {
    top: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes moveCircle {
  0% {
    top: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@-webkit-keyframes rotateText {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotateText {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes slide {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes slide {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes anima-button-30 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(226, 104, 87, 0.5);
            box-shadow: 0 0 0 0 rgba(226, 104, 87, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 1.2em rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 1.2em rgba(0, 0, 0, 0);
  }
}
@keyframes anima-button-30 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(226, 104, 87, 0.5);
            box-shadow: 0 0 0 0 rgba(226, 104, 87, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 1.2em rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 1.2em rgba(0, 0, 0, 0);
  }
}
@-webkit-keyframes btn_animation {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
            transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
@keyframes btn_animation {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
            transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
/* =========================================
   7. 共通パーツ（タイトル・円形テキスト）
   ========================================= */
/* セクションタイトル共通（Sticky設定） */
.about-title, .skills-title, .blog-title, .contact-title {
  width: 200px;
  height: 200px;
  background-color: #3B3C4D;
  color: #F7FAFC;
  text-align: center;
  line-height: 200px;
  font-size: 24px;
  position: sticky;
  top: 0;
  left: 0; /* デフォルトは左 */
  z-index: 1000;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .about-title, .skills-title, .blog-title, .contact-title {
    width: 150px;
    height: 150px;
    line-height: 150px;
  }
}
@media (max-width: 767px) {
  .about-title, .skills-title, .blog-title, .contact-title {
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 12px;
  }
}

/* 右寄せにするタイトル（WORKS, CONTACT） */
.skills-title, .contact-title {
  background-color: #D8D7DF;
  color: #3B3C4D;
  margin-left: auto; /* 右に寄せる */
  right: 0;
  left: auto;
}

/* 円形テキストコンテナ共通 */
.about-circle, .works-circle, .blog-circle, .contact-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid #525557;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: sticky;
  top: 8%;
  margin-bottom: 30px;
  /* 回転テキスト */
}
@media (min-width: 768px) and (max-width: 1099px) {
  .about-circle, .works-circle, .blog-circle, .contact-circle {
    width: 120px;
    height: 120px;
  }
}
@media (max-width: 767px) {
  .about-circle, .works-circle, .blog-circle, .contact-circle {
    width: 100px;
    height: 100px;
  }
}
.about-circle .circle-center, .works-circle .circle-center, .blog-circle .circle-center, .contact-circle .circle-center {
  font-size: 14px;
  font-weight: bold;
}
@media (max-width: 767px) {
  .about-circle .circle-center, .works-circle .circle-center, .blog-circle .circle-center, .contact-circle .circle-center {
    font-size: 12px;
  }
}
.about-circle [class^=circle-text], .works-circle [class^=circle-text], .blog-circle [class^=circle-text], .contact-circle [class^=circle-text] {
  position: absolute;
  width: 200px;
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: rotateText 20s linear infinite;
          animation: rotateText 20s linear infinite;
  overflow: visible;
}
.about-circle [class^=circle-text] span, .works-circle [class^=circle-text] span, .blog-circle [class^=circle-text] span, .contact-circle [class^=circle-text] span {
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  color: black;
  white-space: nowrap;
  -webkit-transform-origin: center 90px;
          transform-origin: center 90px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: upright;
}

/* 右側に配置する円 (About, Blog) */
.about-circle, .blog-circle {
  margin-left: auto;
  margin-right: 5%;
}

/* 左側に配置する円 (Works, Contact) */
.works-circle, .contact-circle {
  margin-left: 5%; /* 左に配置 */
  margin-right: auto; /* 右余白を埋める */
  left: 3%; /* Sticky時の左位置 */
}

/* WORKSの円（色変更） */
.works-circle {
  border-color: #D8D7DF;
  color: #D8D7DF;
}

.works-circle .circle-center, .works-circle [class^=circle-text] span {
  color: #D8D7DF;
}

/* CONTACTの円（色変更） */
.contact-circle {
  border-color: #F7FAFC;
  color: #F7FAFC;
}

.contact-circle .circle-center, .contact-circle [class^=circle-text] span {
  color: #F7FAFC;
}

/* =========================================
   8. ABOUT セクション
   ========================================= */
.about {
  position: relative;
  margin-left: 250px;
  background: #D8D7DF;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .about {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  .about {
    margin-left: 0;
  }
}

.about-image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 350px;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  -webkit-filter: saturate(0);
          filter: saturate(0);
}
.about-image img {
  vertical-align: bottom;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .about-image {
    width: 250px;
  }
}
@media (max-width: 767px) {
  .about-image {
    width: 200px;
  }
}

.about-content {
  padding-bottom: 120px;
  position: relative;
  width: 500px;
  margin: 0 auto;
  z-index: 100;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .about-content {
    font-size: 14px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .about-content {
    width: 100%;
  }
}

.about-lead {
  padding: 30px 0;
}
.about-lead span {
  font-weight: bold;
}
@media (max-width: 767px) {
  .about-lead {
    padding: 30px 20px;
    font-size: 12px;
  }
}

/* ABOUTボタン位置調整用 */
.section-bun {
  width: 500px;
  margin: 0 auto; /* PCで中央寄せ */
  padding-bottom: 60px;
}
@media (max-width: 767px) {
  .section-bun {
    width: 90%;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .about-btn {
    padding-bottom: 200px;
  }
}
@media (max-width: 767px) {
  .about-btn {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .about-btn-link {
    margin-left: auto;
  }
}

/* ボタン共通デザイン */
.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 250px;
  padding: 0.9em 2em;
  border-radius: 5px;
  color: #F7FAFC;
  font-size: 1em;
  background: #EF8457;
  border: 5px solid #EF8457;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .btn {
    width: 200px;
  }
}
@media (max-width: 767px) {
  .btn {
    width: 150px;
    font-size: 12px;
  }
}
.btn:hover {
  -webkit-animation: anima-button-30 1s;
          animation: anima-button-30 1s;
}

/* =========================================
   9. WORKS (SKILLS) セクション
   ========================================= */
#skills {
  position: relative;
  overflow: visible;
  color: #525557;
  margin-left: 250px;
  background-color: #3B3C4D;
  /* 無限スクロール */
}
@media (min-width: 768px) and (max-width: 1099px) {
  #skills {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  #skills {
    margin-left: 0;
  }
}
#skills .skills-scroll-area {
  overflow-x: hidden;
}
#skills .skills-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: slide 20s linear infinite;
          animation: slide 20s linear infinite;
  will-change: transform;
}
#skills .skills-container .skill-card {
  width: 250px;
  padding: 20px;
  margin: 10px;
  background-color: #fff;
  text-align: center;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  -webkit-box-shadow: 0px 0px 15px 3px #525557;
          box-shadow: 0px 0px 15px 3px #525557;
}
@media (min-width: 768px) and (max-width: 1099px) {
  #skills .skills-container .skill-card {
    width: 200px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  #skills .skills-container .skill-card {
    width: 150px;
    font-size: 12px;
    padding: 10px;
  }
}

.works-image {
  width: 150px;
  margin: 60px auto;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .works-image {
    width: 100px;
  }
}
@media (max-width: 767px) {
  .works-image {
    width: 80px;
  }
}

.works-image_2 {
  width: 600px;
  margin: 60px auto;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .works-image_2 {
    width: 400px;
  }
}
@media (max-width: 767px) {
  .works-image_2 {
    width: 90%;
  }
}

.works-container {
  color: #D8D7DF;
  padding: 120px 0;
  width: 600px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .works-container {
    width: 450px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .works-container {
    width: 100%;
  }
}

.works-container-title {
  display: inline-block;
  position: relative;
  color: #F7FAFC;
  font-size: 36px;
  text-align: center;
}
.works-container-title::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #F7FAFC;
}
@media (max-width: 767px) {
  .works-container-title::before {
    width: 30px;
    height: 2px;
  }
}
@media (max-width: 767px) {
  .works-container-title {
    font-size: 18px;
  }
}

.works-container-lead {
  font-size: 18px;
  padding: 120px 0;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
  transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition: opacity 1s ease-out, transform 1s ease-out, -webkit-transform 1s ease-out;
}
@media (max-width: 767px) {
  .works-container-lead {
    font-size: 12px;
    padding: 40px 20px;
  }
}

/* フェード用クラス */
.fade-in {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fade-out {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.skills-btn {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* =========================================
   10. BLOG セクション
   ========================================= */
.blog {
  position: relative;
  margin-left: 250px;
  background: #D8D7DF;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .blog {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  .blog {
    margin-left: 0;
  }
}

.news-inner {
  padding-bottom: 120px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .news-inner {
    padding: 0 20px 120px 20px;
  }
}
@media (max-width: 767px) {
  .news-inner {
    padding: 0 20px 120px 20px;
  }
}

.news-container {
  width: 100%;
  margin: 60px auto 0;
  padding: 60px 0;
}

.news-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 20px;
  margin: 0 auto 30px;
  padding-bottom: 35px;
  border-bottom: 1px solid #333;
  width: 60%;
  position: relative;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .news-content {
    width: 90%;
  }
}
@media (max-width: 767px) {
  .news-content {
    width: 90%;
    display: block;
  }
}
.news-content:last-child {
  margin-bottom: 0;
}
.news-content::after {
  position: absolute;
  bottom: 5px;
  right: 0;
  content: "詳しく見る ▶";
}

.news-time {
  font-size: 16px;
}

.news-tab {
  background-color: #3B3C4D;
  color: #F7FAFC;
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  width: 100px;
}

.news-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
@media (max-width: 767px) {
  .news-info {
    display: block;
  }
}

.news-title {
  font-size: 18px;
}
@media (max-width: 767px) {
  .news-title {
    padding-bottom: 15px;
  }
}

.news-btn {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* ブログ一覧の日付要素 */
.blog-item .blog-date { /* .blog-item は記事全体を囲む要素のクラス名と仮定 */
  display: inline-block;
  width: 100px; /* 日付が収まる固定幅を指定（調整してください） */
  text-align: left;
}

/* =========================================
   11. CONTACT セクション
   ========================================= */
#contact {
  position: relative;
  text-align: center;
  overflow: visible;
  color: #525557;
  margin-left: 250px;
  background-color: #3B3C4D;
  padding-bottom: 120px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  #contact {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  #contact {
    margin-left: 0;
  }
}

.contact-text-container {
  margin-top: 60px;
}

.contact-text {
  color: #F7FAFC;
  padding-top: 20px;
}
@media (max-width: 767px) {
  .contact-text {
    font-size: 12px;
    padding: 0 20px;
  }
}

.contact-form-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 80px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 60px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .contact-form-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}
@media (max-width: 767px) {
  .contact-form-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}

.contact-btn {
  display: block;
  position: relative;
  width: 400px;
  height: 200px;
  line-height: 300px;
  font-size: 18px;
  text-decoration: none;
  background-color: #D8D7DF;
  color: #1C2249;
  text-align: center;
  overflow: hidden;
  -webkit-transition: background-color 0.6s ease, color 0.6s ease, opacity 0.8s ease;
  transition: background-color 0.6s ease, color 0.6s ease, opacity 0.8s ease;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .contact-btn {
    width: 90%;
    max-width: 400px;
    margin-inline: auto;
  }
}
@media (max-width: 767px) {
  .contact-btn {
    width: 90vw;
    max-width: 300px;
    margin-inline: auto;
  }
}
.contact-btn:hover {
  color: #F7FAFC;
  background: #EF8457;
  opacity: 1;
}
.contact-btn::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #F7FAFC;
  -webkit-animation: btn_animation 2.5s ease-in-out infinite;
          animation: btn_animation 2.5s ease-in-out infinite;
}

/* コンタクトボタン内テキスト */
[class^=contact-form_link] {
  height: 200px;
  position: relative;
}
@media (max-width: 767px) {
  [class^=contact-form_link] p {
    font-size: 16px;
  }
}
[class^=contact-form_link]::after {
  position: absolute;
  display: block;
  top: -40%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-weight: 900;
  font-size: 60px;
  opacity: 0.3;
  font-family: "Montserrat", sans-serif;
}
@media (max-width: 767px) {
  [class^=contact-form_link]::after {
    font-size: 36px;
  }
}

.contact-form_link::after {
  content: "CONTACT";
}

.contact-form_link_qa::after {
  content: "FAQ/PRICE";
}

/* =========================================
   12. フッター
   ========================================= */
#main-footer {
  background-color: #1C2249;
  color: white;
  text-align: center;
  padding: 20px;
  margin-left: 250px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  #main-footer {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  #main-footer {
    margin-left: 0;
    margin-bottom: 60px;
  }
}

.footer-logo {
  font-size: 24px;
  font-weight: bold;
}

.footer-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 60px 0;
}
@media (max-width: 767px) {
  .footer-lists {
    display: block;
  }
}

@media (max-width: 767px) {
  .footer-list {
    padding-top: 20px;
  }
}

.footer-container {
  border-bottom: 1px solid #F7FAFC;
  width: 80%;
  margin: 0 auto;
  padding-top: 60px;
}

.footer-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  outline: none;
}
.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: currentColor;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
}
.footer-link:hover::after, .footer-link:focus-visible::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.copy-right {
  padding: 20px 0;
}

@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
  }
}
/* =========================================
   ABOUT ページセクション (クラス名変更対応版)
   ========================================= */
.about-all, .single-works_all, .price-all, .contact-all {
  margin-left: 250px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .about-all, .single-works_all, .price-all, .contact-all {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  .about-all, .single-works_all, .price-all, .contact-all {
    margin-left: 0;
  }
}

.about-page {
  padding: 100px 0;
  background-color: #F7FAFC; /* 薄いグレー/白 */
  position: relative;
  /* セクションヘッダー */
  /* コンテンツレイアウト（横並び） */
  /* 画像エリア */
  /* テキストエリア */
}
@media (max-width: 767px) {
  .about-page {
    padding: 60px 0;
  }
}
.about-page .section-header {
  text-align: center;
  margin-bottom: 60px;
}
.about-page .section-header .section-title {
  font-family: "Julius Sans One", sans-serif;
  font-size: 36px;
  letter-spacing: 0.1em;
  color: #3B3C4D; /* 濃いネイビー */
  margin-bottom: 10px;
}
.about-page .section-header .section-subtitle {
  display: block;
  font-size: 14px;
  color: #EF8457; /* オレンジ */
  font-family: "Shippori Mincho", serif;
  letter-spacing: 0.1em;
}
.about-page .about-page_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 60px;
  padding: 0 20px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .about-page .about-page_content {
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .about-page .about-page_content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* スマホは縦並び */
    gap: 40px;
  }
}
.about-page .about-page_image {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40%;
          flex: 0 0 40%; /* 幅40% */
  position: relative;
  /* アクセントカラーの枠線を少しずらして配置（おしゃれ感アップ） */
}
.about-page .about-page_image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  /* サイトのトーンに合わせた背景色の影 */
  -webkit-box-shadow: 10px 10px 0px #D8D7DF;
          box-shadow: 10px 10px 0px #D8D7DF;
  -o-object-fit: cover;
     object-fit: cover;
  /* アップロードされた写真が縦長なので、比率を保ちつつトリミング */
  aspect-ratio: 3/4;
}
.about-page .about-page_image::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border: 1px solid #EF8457;
  z-index: -1;
}
@media (max-width: 767px) {
  .about-page .about-page_image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 80%; /* スマホでは少し小さめに */
    margin: 0 auto;
  }
}
.about-page .about-page_text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* 残りの幅を使う */
}
.about-page .about-page_text .about-page_lead {
  font-family: "Shippori Mincho", serif;
  font-size: 24px;
  line-height: 1.8;
  margin-bottom: 30px;
  font-weight: 600;
  color: #3B3C4D;
}
@media (max-width: 767px) {
  .about-page .about-page_text .about-page_lead {
    font-size: 18px;
    text-align: center;
  }
}
.about-page .about-page_text .about-page_desc {
  font-size: 15px;
  line-height: 2;
  margin-bottom: 20px;
  color: #525557;
  text-align: justify; /* 両端揃えで文章をきれいに */
}
@media (max-width: 767px) {
  .about-page .about-page_text .about-page_desc {
    font-size: 14px;
  }
}
.about-page .about-page_text .about-page_sign {
  /* 筆記体がない場合は既存のおしゃれフォントを使用 */
  font-family: "Julius Sans One", sans-serif;
  font-size: 30px;
  color: #EF8457;
  text-align: right;
  margin-top: 20px;
  opacity: 0.6;
  font-style: italic; /* 斜体にして署名っぽく */
}

/* =========================================
   Timeline（沿革）セクション
   ========================================= */
.timeline-section {
  margin-top: 100px;
  position: relative;
  overflow: hidden; /* 横スクロール防止 */
  padding: 0 20px 100px;
}

.history-title {
  /* 前回のスタイルを維持 */
  font-family: "Julius Sans One", sans-serif;
  font-size: 28px;
  text-align: center;
  color: #3B3C4D;
  letter-spacing: 0.1em;
}
.history-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #EF8457;
  margin: 10px auto 20px;
}

.history-subtitle {
  text-align: center;
  font-family: "Shippori Mincho", serif;
  margin-bottom: 80px;
  font-size: 16px;
  line-height: 1.8;
}

/* タイムラインの全体枠 */
.timeline-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  /* 中央の縦線 */
}
.timeline-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #D8D7DF; /* 薄いグレー */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media (max-width: 767px) {
  .timeline-container::before {
    left: 20px; /* スマホでは左端に寄せる */
  }
}

/* 各アイテムの箱 */
.timeline-item {
  position: relative;
  width: 50%; /* PCでは画面半分の幅 */
  padding: 20px 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* アニメーション初期状態（透明＆少し下に配置） */
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: all 1s ease;
  transition: all 1s ease; /* ふわっと感の調整 */
  /* 偶数（右側）の配置 */
  /* 奇数（左側）の配置 */
  /* スマホ対応（すべて左寄せリセット） */
}
.timeline-item:nth-child(even) {
  left: 50%;
  /* タイムライン上の点（右側用） */
}
.timeline-item:nth-child(even)::after {
  content: "";
  position: absolute;
  top: 25px;
  left: -6px; /* 線の位置 */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #F7FAFC;
  border: 2px solid #EF8457;
  z-index: 1;
}
.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right; /* テキスト右寄せ */
  /* タイムライン上の点（左側用） */
  /* 左側のコンテンツ内要素も右寄せ対応 */
}
.timeline-item:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 25px;
  right: -6px; /* 線の位置 */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #F7FAFC;
  border: 2px solid #EF8457;
  z-index: 1;
}
.timeline-item:nth-child(odd) .timeline-date {
  display: inline-block;
}
@media (max-width: 767px) {
  .timeline-item {
    width: 100%;
    padding-left: 50px; /* 左線の分あける */
    padding-right: 0;
    text-align: left !important;
    left: 0 !important;
    /* スマホの点（すべて左） */
  }
  .timeline-item::after {
    left: 15px !important; /* 中央線の位置に合わせる */
    right: auto !important;
  }
}

/* スクロールして表示された時のクラス */
.timeline-item.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* 中身のデザイン */
.timeline-content {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 浮いているような影 */
  position: relative;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.timeline-content:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px); /* ホバーで少し浮く */
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.timeline-date {
  display: block;
  font-family: "Julius Sans One", sans-serif;
  color: #EF8457;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.timeline-head {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #3B3C4D;
  font-family: "Shippori Mincho", serif;
}
@media (max-width: 767px) {
  .timeline-head {
    font-size: 18px;
  }
}

.timeline-desc {
  font-size: 14px;
  line-height: 1.8;
  color: #525557;
  text-align: left; /* 文章は常に左揃えで読みやすく */
}

/* リンクテキスト */
.text-link {
  color: #EF8457;
  text-decoration: underline;
  font-weight: bold;
}
.text-link:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* =========================================
   POLICY（3つの約束）セクション
   ========================================= */
.policy-section {
  margin-top: 120px;
  padding: 0 20px 100px;
  background-color: transparent; /* 背景色は親に依存 */
}
@media (max-width: 767px) {
  .policy-section {
    margin-top: 80px;
    padding-bottom: 60px;
  }
}

.policy-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .policy-container {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .policy-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* スマホは縦並び */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 40px;
  }
}

.policy-card {
  background: #fff;
  width: 32%; /* 3カラム */
  padding: 40px 30px;
  border-radius: 8px;
  text-align: center;
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* ほんのり影 */
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  border-top: 4px solid #EF8457; /* 上にアクセントカラーの線 */
}
.policy-card:hover {
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px); /* ホバーで浮く */
}
@media (max-width: 767px) {
  .policy-card {
    width: 100%;
    max-width: 400px;
  }
}

.policy-icon {
  font-size: 50px;
  margin-bottom: 20px;
  display: inline-block;
  /* 背景丸をつける場合 */
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-color: #F7FAFC;
  border-radius: 50%;
  color: #EF8457;
}

.policy-head {
  font-family: "Shippori Mincho", serif;
  font-size: 20px;
  font-weight: bold;
  color: #3B3C4D;
  margin-bottom: 20px;
  line-height: 1.6;
}

.policy-desc {
  font-size: 15px;
  line-height: 1.8;
  color: #525557;
  text-align: left; /* 文章は左揃え */
}
@media (max-width: 767px) {
  .policy-desc {
    font-size: 14px;
  }
}

/* =========================================
   PRIVATE（趣味）セクション
   ========================================= */
.private-section {
  margin-top: 100px;
  padding: 80px 20px 100px;
  background-color: #fff; /* 背景を白にして区切りをつける */
  /* 上の波線や斜めの区切り線を入れるとおしゃれですが、まずはシンプルに */
}
@media (max-width: 767px) {
  .private-section {
    margin-top: 60px;
    padding-bottom: 60px;
  }
}

/* 趣味カード独自のアレンジ */
.private-card {
  border-top: none; /* POLICYのような上の線はなし */
  border-bottom: 4px solid #A78F6C; /* 下にベージュの線 */
  background-color: #F7FAFC; /* 薄いグレー背景 */
  -webkit-box-shadow: none;
          box-shadow: none; /* 影なしでフラットに */
}
.private-card:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.private-card .policy-icon {
  background-color: #fff; /* アイコン背景を白に */
}

/* =========================================
   ABOUT CTA（クロージング）エリア
   ========================================= */
.about-cta-wrapper {
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 60px 20px;
  text-align: center;
  background-color: rgba(167, 143, 108, 0.1); /* 薄いベージュ背景で区切り */
  border-radius: 8px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .about-cta-wrapper {
    padding: 40px 0;
    margin: 60px 20px;
  }
}

.about-cta-message {
  font-family: "Shippori Mincho", serif;
  font-size: 20px;
  line-height: 2;
  color: #3B3C4D;
  font-weight: bold;
  width: 80%;
  margin: 0 auto 40px;
}
.about-cta-message .small-text {
  display: block;
  margin-top: 15px;
  font-size: 15px;
  font-weight: normal;
  color: #525557;
}
@media (max-width: 767px) {
  .about-cta-message {
    font-size: 18px;
    text-align: left; /* スマホは左寄せの方が読みやすいかも */
  }
}

.about-cta-btn {
  /* 既存の .btn クラスを継承しつつ、少し大きく目立たせる */
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.2em 2em; /* 少し太めに */
  background-color: #3B3C4D; /* ここだけネイビーにして引き締める */
  border-color: #3B3C4D;
  color: #fff;
  font-weight: bold;
}
.about-cta-btn:hover {
  background-color: #fff;
  color: #3B3C4D;
}
.about-cta-btn .arrow-icon {
  margin-left: 10px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.about-cta-btn:hover .arrow-icon {
  -webkit-transform: translateX(5px);
          transform: translateX(5px); /* 矢印が右に動く */
}
@media (max-width: 767px) {
  .about-cta-btn {
    width: 250px;
  }
}

/* =========================================
   WORKS（実績）セクション（一覧ページ）
   ========================================= */
#works {
  margin-left: 250px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  #works {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  #works {
    margin-left: 0;
  }
}

.works-inner {
  padding: 0 20px;
}

.works-section {
  padding: 100px 0;
  background-color: #3B3C4D; /* 背景をネイビーにして高級感を */
  color: #fff;
  /* セクションタイトルを白文字に上書き */
}
.works-section .section-title {
  color: #fff;
}
.works-section .section-subtitle {
  color: #EF8457;
}

.works-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; /* 折り返し自体は許可（画面が狭いPCなどのため） */
  gap: 20px; /* PCでの隙間（少し広め） */
  /* ▼ PCの設定：基本は中央揃えで、横に並べる */
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin-bottom: 40px;
  margin-top: 40px;
  /* ▼ スマホ (SP) の設定：左寄せにして、隙間を狭くする */
}
@media (max-width: 767px) {
  .works-tabs {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; /* 左詰め */
    gap: 10px; /* スマホの隙間 */
  }
}

/* タブのボタン（aタグ または buttonタグ） */
.works-tabs a {
  display: block;
  padding: 10px 30px;
  border: 1px solid #333;
  text-decoration: none;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  /* ▼ PCの設定：幅は「auto（文字数なり）」にする */
  width: auto;
  /* ▼ スマホ (SP) の設定：幅を計算して2列にする */
}
@media (max-width: 767px) {
  .works-tabs a {
    padding: 10px 0; /* 左右パディングを減らす */
    font-size: 13px;
    /* (100% - 隙間10px) ÷ 2 */
    width: calc((100% - 10px) / 2);
  }
}

.works-tab {
  cursor: pointer;
  padding: 12px 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  font-family: "Julius Sans One", sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: rgba(255, 255, 255, 0.7);
  /* 選択中のスタイル */
}
@media (max-width: 767px) {
  .works-tab {
    width: 48%; /* スマホでは2つ並び */
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
  }
}
.works-tab:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.works-tab.is-active {
  background-color: #EF8457; /* オレンジ */
  border-color: #EF8457;
  color: #fff;
  font-weight: bold;
  -webkit-box-shadow: 0 0 15px rgba(239, 132, 87, 0.4);
          box-shadow: 0 0 15px rgba(239, 132, 87, 0.4);
}

/* パネル（コンテンツエリア） */
.works-panel {
  display: none; /* 基本は非表示 */
  -webkit-animation: fadeIn 0.6s ease;
          animation: fadeIn 0.6s ease;
}
.works-panel.is-active {
  display: block; /* activeがついたら表示 */
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* グリッドレイアウト */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
  gap: 30px;
  /* スマホは1列 */
}
@media (min-width: 768px) and (max-width: 1099px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .works-grid {
    grid-template-columns: 1fr;
  }
}

/* 実績カード */
.works-card {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
}
.works-card:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  opacity: 1; /* aタグの透過リセット */
}
.works-card:hover .works-card-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1); /* 画像ズーム */
}

.works-card-img {
  width: 100%;
  aspect-ratio: 16/9; /* 画像比率を固定 */
  overflow: hidden;
}
.works-card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.works-card-body {
  padding: 20px;
  color: #525557; /* 文字色はダークグレー */
}

.works-cat {
  display: inline-block;
  font-size: 12px;
  color: #EF8457;
  font-weight: bold;
  margin-bottom: 5px;
  border: 1px solid #EF8457;
  padding: 2px 8px;
  border-radius: 4px;
}

.works-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 5px;
}

/* ====================================
  実績詳細ページ (Single Works)
   ==================================== */
.works-simple-hero {
  /* 背景色を明るい色に変更 */
  background-color: #F7FAFC; /* #F7FAFC (メインの背景色に近い明るい色) */
  color: #525557; /* 文字色を濃い色 (#525557) に変更 */
  padding: 100px 0 50px;
  margin-bottom: 50px;
  text-align: center;
  border-bottom: 1px solid #ddd; /* 視覚的な区切り線を追加 */
}

/* タイトルやラベルの色も修正 */
.works-title_page {
  color: #525557;
  font-size: 24px;
}

.works-single-hero,
.works-hero-img,
.works-hero-content {
  display: none;
}

.works-eyecatch-img {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.works-eyecatch-img img {
  width: 100%;
  height: auto;
  display: block;
}

.works-desc h3:nth-child(1) {
  display: none;
}

/* 本文（Overview）に挿入した画像のデザイン */
.entry-content img {
  width: 100%;
  height: auto;
  margin: 40px 0; /* 上下に余白を追加 */
  border-radius: 8px;
  display: block;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* コンテンツレイアウト */
.works-single-container {
  max-width: 1000px; /* 少し幅広に */
  margin: 0 auto 100px;
}

/* 1. 概要・データエリア（2カラム） */
.works-info-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 80px;
}

.works-desc {
  width: 60%;
}

.works-data {
  width: 35%;
  background: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .works-desc, .works-data {
    width: 100%;
  }
  .works-desc {
    margin-bottom: 40px;
  }
}
/* DataとPOINTの見出し */
.works-data h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
  display: inline-block;
}

.entry-content p {
  line-height: 1.8;
  margin-bottom: 1.5em;
}

/* データリスト */
.works-data dl dt {
  font-weight: bold;
  font-size: 0.9rem;
  color: #888;
  margin-top: 15px;
}

.works-data dl dd {
  font-size: 1rem;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.works-site-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  /* 修正: $color-accent に統一 */
  background: #EF8457;
  color: #fff;
  padding: 15px;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.works-site-btn:hover {
  /* ホバー時の色を少し濃くする */
  background: rgb(163.2, 81.6, 40.8); /* Sass機能が使えない場合は具体的な濃い色コード（例：#cc6633） */
  opacity: 0.9;
}

/* 2. 制作のポイント */
.works-point-section {
  margin-bottom: 80px;
  text-align: center;
}

.sub-section-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.sub-section-desc {
  color: #888;
  margin-bottom: 40px;
}

.works-point-text {
  text-align: left;
  background: #fff;
  border: 1px solid #ddd;
  padding: 40px;
  line-height: 2;
  border-radius: 8px;
}

/* 戻るリンク */
.works-footer-nav {
  text-align: center;
  border-top: 1px solid #ddd;
  padding-top: 40px;
}

.back-link {
  display: inline-block;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.back-link:hover {
  color: #e67e22;
}

/* ====================================
   スマホ・タブレット用レスポンシブ修正
   ==================================== */
@media (max-width: 768px) {
  /* 1. コンテンツの左右に余白を持たせる */
  .works-single-container {
    width: auto; /* 固定幅を解除 */
    margin-left: 20px; /* 左に余白 */
    margin-right: 20px; /* 右に余白 */
    margin-bottom: 60px;
  }
  /* 2. ヒーローエリア（タイトル部分）の上下余白をスマホ用に狭くする */
  .works-simple-hero {
    padding: 60px 0 30px; /* PC版の100pxはスマホには広すぎるため調整 */
  }
  .works-title_page {
    font-size: 20px; /* タイトル文字サイズを少し小さく */
    padding: 0 15px; /* タイトルが改行しても端に張り付かないように */
  }
  /* 3. POINTセクションの枠内余白を調整 */
  .works-point-text {
    padding: 20px; /* PC版の40pxはスマホだと狭くなるため減らす */
    font-size: 0.95rem; /* 文字サイズを読みやすく調整 */
    text-align: left; /* スマホでは左揃えの方が見やすい場合が多い */
  }
  /* 4. メインカラムとサイドデータの隙間調整 */
  .works-desc {
    margin-bottom: 50px; /* DATAエリアとの距離を確保 */
  }
  /* 5. 画像の高さ調整（念のため） */
  .works-eyecatch-img img,
  .entry-content img {
    height: auto; /* 縦横比を維持 */
    max-width: 100%; /* 画面からはみ出さないように */
  }
}
/* =========================================
   FAQ / PRICE ページ専用スタイル (SCSS/CSS)
   ========================================= */
.faq-price-all {
  /* サイドバー分のマージン */
  margin-left: 250px;
  background-color: #F7FAFC;
  min-height: 100vh;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .faq-price-all {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  .faq-price-all {
    margin-left: 0;
  }
}

.price-all {
  margin-left: 250px;
}

/* 1. ヒーローセクション（ABOUT風） */
.faq-price-hero {
  color: #3B3C4D;
  padding: 100px 0 60px;
  margin-bottom: 50px;
  text-align: center;
}

.faq-price-hero .section-subtitle {
  display: block;
  font-size: 14px;
  color: #EF8457;
  font-family: "Shippori Mincho", serif;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.faq-price-title {
  font-family: "Julius Sans One", sans-serif;
  font-size: 3rem;
  letter-spacing: 0.1em;
  font-weight: bold;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .faq-price-title {
    font-size: 2.5rem;
  }
}
@media (max-width: 767px) {
  .faq-price-title {
    font-size: 1.6rem;
  }
}

/* 2. メインコンテナ */
.faq-price-container {
  padding: 0 20px 100px;
}

.price-title-main, .faq-title-main {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 60px;
  margin-bottom: 30px;
  color: #3B3C4D;
  text-align: center;
}

.price-note {
  font-size: 0.9rem;
  color: #525557;
  text-align: right;
  margin-top: 40px;
}

/* 3. 料金表カード（3カラム） */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
  padding: 0 20px;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .price-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .price-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }
}

.price-card-v2 {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  /* ABOUTのポリシーカードと同様の装飾 */
  border-top: 5px solid #EF8457;
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.price-card-v2:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.card-icon {
  font-size: 3rem;
  color: #525557;
  margin-bottom: 15px;
}

.card-head {
  font-size: 1.2rem;
  font-weight: bold;
  color: #3B3C4D;
  margin-bottom: 15px;
}

.card-desc {
  font-size: 1.1rem;
  font-weight: bold;
  color: #525557;
}

/* 4. FAQセクション（アコーディオン） */
.faq-container-v2 {
  margin-top: 50px;
}

.faq-item-v2 {
  background: #D8D7DF;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  border-left: 5px solid #EF8457; /* 強調線 */
}

.faq-question-v2 {
  display: block;
  cursor: pointer;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 1.1rem;
  position: relative;
  color: #3B3C4D;
  background: #fff; /* 質問エリアは白 */
  border-bottom: 1px solid #D8D7DF;
}
.faq-question-v2::after {
  content: "+";
  position: absolute;
  right: 20px;
  color: #EF8457;
  font-size: 1.5rem;
  line-height: 1;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.faq-item-v2[open] .faq-question-v2::after {
  content: "-";
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.faq-answer-v2 {
  padding: 15px 20px;
  line-height: 1.8;
  background: #D8D7DF; /* 回答エリアは明るいグレー */
  font-size: 1rem;
  color: #525557;
}

/* =========================================
   ブログ一覧ページ専用スタイル
   ========================================= */
.blog-all {
  /* WORKSやABOUTページと同様にサイドバー分のマージンを適用 */
  margin-left: 250px;
  background-color: #F7FAFC;
  min-height: 100vh;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .blog-all {
    margin-left: 180px;
  }
}
@media (max-width: 767px) {
  .blog-all {
    margin-left: 0;
  }
}

.blog-container {
  padding: 100px 20px 100px;
  max-width: 900px;
}
@media (max-width: 767px) {
  .blog-container {
    padding: 60px 20px;
  }
}

.blog-page-title {
  font-family: "Julius Sans One", sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  font-weight: bold;
  color: #3B3C4D;
  margin-bottom: 50px;
  border-bottom: 3px solid #EF8457;
  padding-bottom: 10px;
}

/* 投稿リストのレイアウト（グリッド形式） */
.post-list-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC/タブレットは2列 */
  gap: 40px;
}
@media (max-width: 767px) {
  .post-list-area {
    grid-template-columns: 1fr; /* スマホは1列 */
    gap: 30px;
  }
}

/* 個々の記事カード */
.blog-post-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
}
.blog-post-item:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.blog-post-item a {
  display: block; /* aタグ全体をクリック可能に */
}

/* アイキャッチ画像 */
.blog-thumbnail {
  width: 100%;
  aspect-ratio: 16/10; /* 画像の比率を固定 */
  overflow: hidden;
}
.blog-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.blog-post-item:hover .blog-thumbnail img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05); /* ホバーで少し拡大 */
}

/* 記事情報エリア */
.blog-info {
  padding: 20px;
  color: #525557;
}

.blog-date {
  display: inline-block;
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
}

.blog-category {
  display: block;
  font-size: 12px;
  color: #EF8457;
  font-weight: bold;
  margin-bottom: 5px;
}

.blog-title-all {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  color: #3B3C4D;
  margin-top: 5px;
}

/* ページネーションのスタイル */
.pagination-area {
  margin-top: 60px;
  text-align: center;
}

/* ページネーションの具体的なスタイリングは、テーマの既存のCSSに合わせるか、別途定義してください */
/* =========================================
   ブログ個別記事ページ (single.php) 専用スタイル
   ========================================= */
/* .blog-all は archive.php のスタイルで定義済み（マージン 250px） */
.single-post-container {
  padding: 100px 20px;
  max-width: 800px; /* 記事本文は読みやすさのため幅を狭くする */
  margin: 0 auto;
}
@media (max-width: 767px) {
  .single-post-container {
    padding: 60px 20px;
  }
}

/* 記事ヘッダー */
.single-post-header {
  text-align: center;
  margin-bottom: 50px;
}

.single-post-category {
  font-size: 14px;
  color: #EF8457;
  font-weight: bold;
  margin-bottom: 10px;
}

.single-post-title {
  font-family: "Shippori Mincho", serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #3B3C4D;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .single-post-title {
    font-size: 1.8rem;
  }
}

.single-post-date {
  display: block;
  font-size: 14px;
  color: #888;
  margin-top: 15px;
}

/* アイキャッチ画像 */
.single-eyecatch-img {
  margin-bottom: 50px;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 記事本文内のスタイリング */
.single-post-content .entry-content {
  background: #fff; /* 本文エリアの背景を白に */
  padding: 40px;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
}
@media (max-width: 767px) {
  .single-post-content .entry-content {
    padding: 20px;
  }
}

/* 本文内の見出し */
.single-post-content h2,
.single-post-content h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  color: #3B3C4D;
  margin: 40px 0 15px;
  line-height: 1.5;
}

.single-post-content h2 {
  font-size: 1.8rem;
  border-left: 5px solid #EF8457;
  padding-left: 15px;
  border-bottom: 1px dashed #D8D7DF;
  padding-bottom: 5px;
}

.single-post-content h3 {
  font-size: 1.4rem;
  border-bottom: 1px solid #D8D7DF;
  padding-bottom: 5px;
}

/* 本文内の段落とリスト */
.single-post-content p,
.single-post-content ul,
.single-post-content ol {
  margin-bottom: 1.5em;
  line-height: 1.8;
}

/* 記事フッター (タグ) */
.single-post-footer {
  margin-top: 50px;
  border-top: 1px solid #D8D7DF;
  padding-top: 20px;
}

.post-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

.post-tags li {
  font-size: 12px;
  background: #D8D7DF;
  color: #525557;
  padding: 5px 10px;
  border-radius: 4px;
}

/* 前後の記事リンク */
.post-nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 50px;
}

.prev-link a, .next-link a {
  color: #3B3C4D;
  text-decoration: none;
  font-weight: bold;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.prev-link a:hover, .next-link a:hover {
  color: #EF8457;
}

/* =========================================
   関連記事エリア (Single Page Related) - 4列修正版
   ========================================= */
.related-area {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid #eee;
}

.related-heading {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  font-family: "Shippori Mincho", serif;
  color: #333;
}

.related-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; /* ★ここを space-between から flex-start に変更（左詰め） */
  gap: 20px; /* カード間の隙間はそのまま維持 */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; /* 念のため、折り返しを許可 */
}

/* 関連記事カード */
.related-item {
  /* ★4列にするための幅調整★ */
  /* 100%から隙間3つ分(20px * 3 = 60px)を引き、それを4で割る */
  width: calc((100% - 60px) / 4);
  display: block;
  text-decoration: none;
  color: #333;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.related-item:hover {
  opacity: 0.7;
}

/* サムネイル画像 */
.related-img {
  width: 100%;
  aspect-ratio: 16/9; /* 画像比率 */
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 10px; /* 余白を少し狭く */
  background-color: #eee;
}

.related-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* タイトルと日付 */
.related-item-title {
  font-size: 13px; /* ★文字サイズを少し小さく */
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 5px;
  /* 2行で省略する設定 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.related-date {
  font-size: 11px; /* ★日付も少し小さく */
  color: #888;
}

/* スマホ対応（ここは変更なしでOK） */
@media screen and (max-width: 767px) {
  .related-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* 縦並び */
    gap: 0;
  }
  .related-item {
    width: 100%;
    margin-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .related-img {
    width: 100px;
    aspect-ratio: 1/1;
    margin-bottom: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .related-item-title {
    font-size: 14px;
  }
  .related-date {
    font-size: 12px;
  }
}
/* =========================================
   404セクション
   ========================================= */
.container-404 {
  margin-left: 250px;
  padding: 120px 0;
}

.container-404-title {
  font-size: 60px;
  font-family: "Julius Sans One", "M PLUS Rounded 1c", serif;
  text-align: center;
  color: #EF8457;
  font-weight: bold;
}

.container-404-lead {
  text-align: center;
  padding: 20px 0;
  font-size: 36px;
  font-weight: bold;
}

.container-404-content {
  text-align: center;
}

.container-404-button .btn {
  display: block;
  margin: 60px auto;
  text-align: center;
}

/* =========================================
   Contact Form 7 独自デザイン (New HTML対応)
   ========================================= */
/* --- 共通カラー設定（サイトの雰囲気に合わせて調整） --- */
:root {
  --cf-color-main: #1a237e; /* メインカラー：ネイビー */
  --cf-color-accent: #ff6f00; /* アクセント：オレンジ */
  --cf-color-text: #333333; /* テキスト：黒グレー */
  --cf-color-border: #e0e0e0; /* ボーダー：薄いグレー */
  --cf-color-bg-gray: #f9f9f9; /* 背景：薄いグレー */
}

/* --- フォーム全体枠 --- */
.contact-form-wrapper {
  margin: 60px auto;
  background: #fff;
  padding: 0 20px; /* 内部の余白は各アイテムで調整 */
  font-family: "Shippori Mincho", "Yu Mincho", serif; /* 明朝体で上品に */
  color: var(--cf-color-text);
}

/* --- 各入力項目の行設定 --- */
.form-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 垂直方向中央揃え */
  padding: 30px 0;
  border-bottom: 1px solid var(--cf-color-border);
}

.form-item:first-child {
  border-top: 1px solid var(--cf-color-border);
}

/* --- ラベル（項目名） --- */
.form-label {
  width: 240px; /* ラベル幅固定 */
  font-weight: bold;
  color: var(--cf-color-main);
  margin: 0;
  padding-right: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 必須バッジ */
.required-badge {
  background-color: var(--cf-color-accent);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 10px;
  font-family: sans-serif; /* バッジはゴシックの方が見やすい */
  font-weight: normal;
  white-space: nowrap;
}

/* --- 入力欄エリア --- */
.form-input,
.form-input-radio {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* 残りの幅を全部使う */
  width: 100%; /* スマホ時のため */
}

/* テキスト入力・メール・電話・セレクトボックス */
.input-text,
.select-box,
.textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-family: sans-serif; /* 入力文字は読みやすいゴシックで */
}

/* フォーカス時のデザイン */
.input-text:focus,
.select-box:focus,
.textarea:focus {
  outline: none;
  border-color: var(--cf-color-accent);
  -webkit-box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.1);
          box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.1);
}

/* テキストエリアの高さ */
.textarea {
  height: 200px;
  resize: vertical;
}

/* --- ラジオボタンの並び --- */
.radio-group .wpcf7-list-item {
  display: inline-block;
  margin: 0 20px 10px 0; /* 横並びの余白 */
}

.radio-group input[type=radio] {
  -webkit-transform: scale(1.2);
          transform: scale(1.2); /* 少し大きく */
  margin-right: 5px;
  accent-color: var(--cf-color-accent); /* 選択時の色をオレンジに */
  cursor: pointer;
}

.radio-group label {
  cursor: pointer;
}

/* --- プライバシーポリシー --- */
.privacy-policy-container {
  margin-top: 60px;
  background-color: var(--cf-color-bg-gray);
  padding: 30px;
  border-radius: 8px;
}

.privacy-policy-title {
  text-align: center;
  font-size: 18px;
  color: var(--cf-color-main);
  margin-bottom: 20px;
  font-weight: bold;
}

.privacy-policy-scroll-box {
  height: 180px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 15px;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  font-family: sans-serif; /* 本文はゴシック */
}

/* 同意チェックボックス */
.form-consent {
  text-align: center;
  margin: 40px 0;
  font-size: 16px;
}

.form-consent input[type=checkbox] {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  margin-right: 10px;
  accent-color: var(--cf-color-accent);
}

/* --- 送信ボタン --- */
.form-submit {
  text-align: center;
  margin-bottom: 60px;
}

.submit-button {
  display: inline-block;
  background-color: var(--cf-color-main); /* 通常はメインカラーでもOKですが、目立たせるならオレンジ */
  background: var(--cf-color-accent);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 18px 80px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: sans-serif;
}

.submit-button:hover {
  background-color: #e65100; /* 濃いオレンジ */
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
          box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* --- レスポンシブ対応（スマホ: 768px以下） --- */
@media screen and (max-width: 768px) {
  .contact-form-wrapper {
    margin: 30px auto;
    padding: 0 10px; /* 横幅いっぱいに */
  }
  /* 縦並びに変更 */
  .form-item {
    display: block; /* フレックス解除 */
    padding: 20px 0;
  }
  .form-label {
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
  }
  .required-badge {
    font-size: 11px;
    padding: 2px 5px;
  }
  .form-input,
  .form-input-radio {
    width: 100%;
  }
  .radio-group .wpcf7-list-item {
    display: block; /* ラジオボタンを縦並びに（押しやすくするため） */
    margin-bottom: 10px;
  }
  .submit-button {
    width: 100%; /* ボタンを横幅いっぱいに */
    padding: 15px;
  }
}
.contact-main {
  padding-top: 60px;
}
.contact-main .section-header {
  text-align: center;
  margin-bottom: 60px;
}
.contact-main .section-header .section-title {
  font-family: "Julius Sans One", sans-serif;
  font-size: 36px;
  letter-spacing: 0.1em;
  color: #3B3C4D; /* 濃いネイビー */
  margin-bottom: 10px;
}
.contact-main .section-header .section-subtitle {
  display: block;
  font-size: 14px;
  color: #EF8457; /* オレンジ */
  font-family: "Shippori Mincho", serif;
  letter-spacing: 0.1em;
}

.contact-main_container {
  width: 90%;
  margin: 0 auto;
}

/* ボタンの基本スタイル */
.page-top-btn {
  position: fixed;
  top: 0; /* スマホの固定メニュー（約60px）より上に配置 */
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #333; /* サイトのカラーに合わせて変更してください */
  color: #fff;
  text-align: center;
  border-radius: 50%;
  line-height: 50px;
  z-index: 999999;
  opacity: 0; /* 最初は隠しておく */
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
}

/* 矢印のデザイン */
.arrow-up {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-top: 5px; /* 位置微調整 */
}

/* 表示クラスがついた時の状態 */
.page-top-btn.is-show {
  opacity: 1;
  visibility: visible;
}

/* PC表示時の調整（メニューがないので少し下げる） */
@media screen and (min-width: 768px) {
  .page-top-btn {
    bottom: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
  }
}
/* ホバー時の動き */
.page-top-btn:hover {
  background-color: #555;
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}