@charset "utf-8";

body,html {
  font-family: "Noto Sans","Shadows Into Light","Roboto", serif;
  font-size: 16px;
}
html, body, span, div, p, a, li {
  font-family: "Noto Sans", "Shadows Into Light","Roboto", sans-serif;
}
:root {
  --font-main: "Noto Sans", sans-serif;
  --font-en-title: "Shadows Into Light", cursive;
  --font-en: "Roboto", sans-serif;
  --color-white: #fff;
  --color-main: #387b7f;
  --color-navy: #192D5A;
}
img {
  width: 100%;
}
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

/* ===== 基本スタイル (PCファースト) ===== */
.header {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* 影を追加 */
  position: fixed; /* ← ページ上部に固定 */
  top: 0;
  left: 0;
  z-index: 1000;
}

.header__inner {
  margin: 0 auto;
  padding: 16px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo a {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.header__nav {
  display: block;
}

.header__menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__menu-item a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  transition: color 0.3s;
}

.header__menu-item a:hover {
  color: var(--color-main);
}

/* ハンバーガーボタン（PCでは非表示） */
.header__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.header__toggle-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.3s;
}


/* ===== SPスタイル (max-width: 768px) ===== */
@media screen and (max-width: 768px) {
  .sp-only {
  display: block;
}
.pc-only {
  display: none;
}
  .header__logo a {
    max-width: initial;
    width: 70%;
  }
  .header__inner {
    padding: 4vw 6vw;
  }

  .header__menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 60vw;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6vw;
    transition: right 0.3s ease-in-out;
  }

  .header__menu-item a {
    font-size: 4vw;
  }

  .header__toggle {
    display: block;
    position: relative;
    z-index: 3;
  }

  /* メニューが開いた状態 */
  .header__menu--open {
    right: 0;
  }
    /* ✖ 変化アニメーション */
  .header__toggle--active .header__toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .header__toggle--active .header__toggle-line:nth-child(2) {
    opacity: 0;
  }

  .header__toggle--active .header__toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

.mv {
  width: 100%;
  overflow: hidden;
}

.mv__image {
  width: 100%;
}

.mv__image picture,
.mv__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== スマホ用（最大幅768px） ===== */
@media screen and (max-width: 768px) {
  .mv {
    width: 100vw;
    margin-top: 15vw;
  }

  .mv__image img {
    width: 100vw;
    height: auto;
  }
}


.message {
  text-align: center;
  padding: 100px 20px;
  background-color: #fff;
}

.message h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 50px; /* 1行目と2行目の間を少し空ける */
  color: var(--color-main);
}

.message p {
  font-size: 20px;
  line-height: 2;
  color: var(--color-main);
  text-align: center;
}

/* ▼ スマホ対応 ▼ */
@media screen and (max-width: 768px) {
  .message {
    padding: 60px 16px;
  }

  .message h2 {
    font-size: 22px;
    margin-bottom: 16px;
    line-height: 1.4;
  }

  .message p {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ===== featuresセクション全体 ===== */
.features {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}

/* ===== セクションタイトル（features内） ===== */
.features__title {
  text-align: center;
  margin-bottom: 80px;
}

.section-title__en {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: var(--font-en-title);
}

.section-title__jp {
  font-size: 20px;
  color: #555;
  text-align: center;
}

/* ===== featuresアイテム ===== */
.features__item {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
  position: relative;
  max-width: 1000px;
  margin: auto;
}

.features__item:nth-child(odd) {
  flex-direction: row;
}

.features__item:nth-child(even) {
  flex-direction: row-reverse;
}
.features__item + .features__item {
  margin-top: 100px;
}

.features__label {
  position: absolute;
  top: -30px;
  left: 0;
  font-size: 18px;
  font-weight: bold;
  color: #ff7f00; /* オレンジ */
  font-family: var(--font-en);
}
.features__label span {
  font-size: 30px;
}
.features__item--2 .features__label {
  left: initial;
  right: 216px;
}
.features__item--3 .features__label {
  top: -20px;
}

.features__content {
  flex: 1;
  padding: 0 0px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.features__item:nth-child(odd) .features__content {
  flex-direction: row-reverse;
}

.features__heading {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 8px;
  display: inline-block;
  border-bottom: 4px solid #ff7f00; /* オレンジ下線 */
  color: var(--color-main);
  line-height: 1.4;
  flex: 0 0 230px;
}
.features__item--2 .features__heading {
  flex: 0 0 300px;
}


.features__text {
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-main);
}

/* ===== SP対応 ===== */
@media screen and (max-width: 768px) {
  .features {
    padding: 0 16px;
  }

  .features__title {
    margin-bottom: 60px;
  }

  .section-title__en {
    font-size: 24px;
  }

  .section-title__jp {
    font-size: 14px;
  }

  .features__item {
    flex-direction: column !important;
    text-align: center;
  }

  .features__label {
    position: static;
    margin-bottom: 8px;
  }

  .features__content {
    padding: 0;
    flex-direction: column;
    gap: 10px;
  }

  .features__heading {
    font-size: 20px;
    flex: initial;
  }

  .features__text {
    font-size: 16px;
  }
  .features__item--2 .features__heading {
    flex: initial;
}
.features__item:nth-child(odd) .features__content {
    flex-direction: column;
}
.features__item + .features__item {
    margin-top: 50px;
}

}

/* ===== serviceセクション ===== */
.service {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}

/* セクションタイトル */
.service__title {
  text-align: center;
  margin-bottom: 60px;
}

/* サービスアイテム */
.service__items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;

}

.service__item {
  flex: 1 1 calc(25% - 18px); /* 4つ横並び */
  text-align: center;
  border: 1px solid #333;
  padding: 50px 20px;
}

.service__icon img {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}
.service__icon i {
  font-size: 60px;
  margin-bottom: 16px;
  color: var(--color-main);
}

.service__text {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  padding-bottom: 4px;
  color: #333;
}
.service__desc {
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.8;
}

/* view moreボタンコンポーネント */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 36px;
  border-radius: 4px;
  transition: all 0.3s;
  color: var(--color-main);
  border-bottom: 2px solid orange;
  font-family: var(--font-en);
}

.btn--orange {

}

.btn--orange:hover {

}

/* service__more */
.service__more {
  text-align: center;
  display: none;
}

/* ===== SP対応 ===== */
@media screen and (max-width: 768px) {
  .service__items {
    flex-direction: column;
    gap: 40px;
  }

  .service__item {
    flex: 1 1 100%;
  }

  .service__icon img {
    width: 60px;
    height: 60px;
  }

  .service__text {
    font-size: 16px;
  }

  .service {
    padding: 60px 16px;
  }
}

/* ===== worksセクション ===== */
.works {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}

/* セクションタイトル */
.works__title {
  text-align: center;
  margin-bottom: 60px;
}


.works__more {
  text-align: center;
  margin-top: 50px;
}
.slide img {
  transform: scale(.8);
  transition: transform .3s;
}
.slide.slick-center img {
  transform: scale(1);
}

.slick-slide {
  height: 400px !important;          /* 好きな高さに固定 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 画像を枠に合わせて切り抜く */
}
@media screen and (max-width: 768px) {
  .slick-slide {
    height: 200px !important;  /* SPは低くする */
  }
    .slick-slide.slick-center {
    transform: scale(1); /* 拡大なし */
  }
  .slide img {
  transform: scale(1);
}
}


@media screen and (max-width: 768px) {
  .works {
    padding: 60px 16px;
  }
}

.greeting {
  padding: 100px 24px;
  background-color: #f9f9f9;
}
.greeting__title {
  text-align: center;
  margin-bottom: 80px;
}
.greeting__inner {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap; /* SPで縦並びに */
}

/* 左側画像 */
.greeting__image-wrap {
  flex: 0 0 400px;
  text-align: center;
}

.greeting__image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

.greeting__name {
  font-weight: bold;
  margin-bottom: 4px;
  color: var(--color-main);
}

.greeting__origin {
  color: var(--color-main);
  font-size: 14px;
  margin-top: 10px;
}

/* 右側コンテンツ */
.greeting__content {
  flex: 1;
}

.greeting__text.greeting__text--first {
  font-size: 20px; /* 最初の1行だけ大きく */
  margin-bottom: 16px;
}

.greeting__text {
  font-size: 16px;
  margin-bottom: 16px;
  line-height: 1.8;
  color: var(--color-main);
}

/* 経歴・趣味 */
.greeting__section {
  margin-top: 30px;
  color: var(--color-main);
}

.greeting__section-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.greeting__section-text {
  font-size: 16px;
  line-height: 1.6;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .greeting {
    padding: 60px 16px;
  }
  .greeting__inner {
    flex-direction: column;
    align-items: center;
  }

  .greeting__image-wrap {
    flex: 0 0 auto;
    margin-bottom: 24px;
  }

  .greeting__content {
    text-align: center;
  }
.greeting__text.greeting__text--first{
  font-size: 16px;
}
}


.plan {
  padding: 100px 24px;
}

.plan__inner {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap; /* SP用に縦並びに */
}

/* 各プランカード */
.plan__card {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: scale(0.9);
  border: 1px solid #000;
}

/* 中央プランを少し縦長＆目立たせる */
.plan__card--highlight {
  transform: scale(1.10);
  border: 2px solid #ff7f00; /* オレンジで目立たせる */
  z-index: 2;
}

/* おすすめ文言 */
.plan__recommend {
  color: #ff7f00;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}

/* プラン名 */
.plan__name {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 8px;
  position: relative;
  text-align: center;
}

/* 下線（オレンジ） */
.plan__name::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: #ff7f00;
  margin: 8px auto 0;
}
.plan__price {
  display: flex;
  align-items: end;
  gap: 10px;
  justify-content: center;
}
/* 金額 */
.plan__price-label {
  display: block;
  font-size: 26px;
  color: #666;
}

.plan__price-value {
  font-size: 50px;
  font-weight: bold;
  color: #333;
}
.plan__desc {
  margin-top: 30px;
  line-height: 1.5;
}
/* 箇条書き */
.plan__features {
  list-style: disc;
  padding-left: 0px;
  text-align: left;
  margin: 0;
  flex-grow: 1;
  margin-top: 10px;
}

.plan__features li {
  margin-bottom: 8px;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .plan {
    padding: 60px 16px;
  }
  .plan__inner {
    flex-direction: column;
    align-items: center;
  }

  .plan__card--highlight {
    transform: scale(1);
    border: 2px solid #ff7f00;
    margin-bottom: 24px;
  }

  .plan__card {
    width: 100%;
    max-width: 360px;
  }
}

.flow__title {
  text-align: center;
  margin-bottom: 80px;
}
.flow {
  padding: 100px 24px;
  background-color: #fff;
}

.flow__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.flow__list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 40px;
}

.flow__item {
  flex: 1;
  min-width: 200px;
  position: relative;
  padding: 24px;
  border-radius: 0;
  text-align: center;
  border: 1px solid #000;
}
.flow__item + .flow__item {
  border-left: initial;
}
.flow__item i {
  font-size: 40px;
  margin-bottom: 30px;
  color: var(--color-main);
}

/* 矢印（2個目以降） */
.flow__arrow {
  position: absolute;
  left: -16px; /* カード左端に表示 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #ff7f00;
  display: none; /* 1つ目は非表示 */
}

.flow__item:nth-child(n+2) .flow__arrow {
  display: block;
}

.flow__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}

.flow__item-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
}
.flow__text {
  font-size: 16px;
  line-height: 1.6;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .flow {
    padding: 60px 16px;
  }
  .flow__list {
    flex-direction: column;
  }

  .flow__item {
    text-align: center;
    width: 100%;
    min-width: auto;
  }

  .flow__arrow {
        left: 47%;
        top: 14%;
        transform: rotate(90deg) translateX(-150%);
  }
  .flow__item + .flow__item {
    border-left: 1px solid #000;
    border-top: none;
}
.flow__text {
  text-align: center;
}
}

.news {
  padding: 100px 24px;
  background-color: #f9f9f9;
}

.news__inner {
  max-width: 600px;
  margin: 0 auto;
}
.news__title {
  text-align: center;
}

.news__list {
  list-style: none;
  padding: 0;
  margin: 40px 0;
}

.news__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;
  border-bottom: 1px solid #333;
}

.news__date {
  color: #666;
  font-size: 14px;
  flex-shrink: 0;
}

.news__item-title {
  text-align: left;
}

/* view more ボタン */
.news__more {
  text-align: center;
  margin-top: 32px;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .news {
    padding: 60px 16px;
  }
  .news__item {
    flex-direction: column;
    gap: 8px;
    align-items: initial;
  }

  .news__date {
    font-size: 12px;
  }

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

/* Contactセクション */
.contact {
  position: relative;
  padding: 140px 24px;
  background-image: url('../images/contact_bg.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden; /* 疑似要素がはみ出さないように */
}

/* 疑似要素でオーバーレイ */
.contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50%黒で暗くする */
  z-index: 0;
}
.contact__title .section-title__jp {
  color: #fff;
}
.contact__title .section-title__en {
  color: #fff;
}
.contact__inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.contact__lead {
  font-size: 18px;
  line-height: 1.6;
  margin: 24px 0 40px;
  text-align: center;
  margin-top: 50px;
}

/* ボタン横並び */
.contact__buttons {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 50px;
}

/* LINEボタン */
.contact__btn--line {
  background-color: transparent;
  color: #fff;
  padding: 20px 40px;
  min-width: 400px;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.3s;
  border: 1px solid #fff;
}

.contact__btn--line:hover {
  opacity: 0.8;
}

/* メールフォームボタン */
.contact__btn--mail {
  background-color: transparent;
  color: #fff;
  padding: 20px 40px;
  min-width: 400px;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.3s;
  border: 1px solid #fff;
}

.contact__btn--mail:hover {
  opacity: 0.8;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .contact {
    padding: 60px 16px;
  }
  .contact__lead {
    font-size: 16px;
  }

  .contact__buttons {
    flex-direction: column;
    gap: 32px;
  }
  .contact__btn--line {
    min-width: initial;
  }
  .contact__btn--mail {
    min-width:initial;
  }

}

.footer {
  background-color: #fff;
  color: #fff;
  padding: 100px 24px 30px;
  font-size: 14px;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__logo img {
  width: 300px;
}

.footer__sns {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

.footer__sns-link {
  color: #000;
  text-decoration: none;
  transition: 0.3s;
}

.footer__sns-link:hover {
  color: var(--color-main);
}
.footer__sns-link i {
  font-size: 30px;
}

.footer__right {
  display: flex;
  flex-direction: column;
}

.footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__menu-item a {
  color: #000;
  text-decoration: none;
  transition: 0.3s;
}

.footer__menu-item a:hover {
  color: var(--color-main);
}

.footer__copy {
  text-align: center;
  margin-top: 50px;
  font-size: 12px;
  color: var(--color-main);
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer__menu {
    flex-direction: column;
    gap: 12px;
  }

  .footer__left, .footer__right {
    align-items: center;
  }
}
.contact-main {
  padding: 100px 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}


/* コンテナ */
.contact-container {
  background-color: #fff;
  padding: 40px;
  max-width: 800px;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border-radius: 10px;
}

/* リード文 */
.contact-lead {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: #333;
  text-align: center;
}

/* CF7 フォーム調整 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* フォーカス時 */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--color-main);
  outline: none;
  box-shadow: 0 0 6px rgba(0,123,255,0.3);
}

/* 送信ボタン */
.wpcf7-form input[type="submit"] {
  background-color: var(--color-main);
  color: #fff;
  padding: 12px 25px;
  min-width: 400px;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: var(--color-main);
}
.wpcf7-form p:has(input[type="submit"]) {
  text-align: center;       /* ボタンを中央寄せ */
  margin-top: 30px;         /* 上の余白 */
}
.wpcf7-spinner {
  display: none !important;
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
  .contact-container {
    padding: 30px 20px;
  }
  .contact-lead {
    font-size: 1rem;
    text-align: left;
  }
  .wpcf7-form input[type="submit"] {
    min-width: initial;
    width: 100%;
  }
}


.archive-news {
  padding: 100px 24px;
  background-color: #f9f9f9;
}

.archive-news__inner {
  max-width: 800px;
  margin: 0 auto;
}

.archive-news__list {
  list-style: none;
  padding: 0;
  margin: 40px 0;
}

.archive-news__item {
  border-bottom: 1px solid #ccc;
}
.archive-news__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 20px;
}

.archive-news__link:hover {
  background-color: #f5f5f5; /* ホバーで背景色を変えると分かりやすい */
}

.archive-news__date {
  color: #666;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}
.archive-news__title {
  text-align: center;
}
.archive-news__title a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.archive-news__title a:hover {
  color: #f60;
}

.archive-news__excerpt {
  margin-top: 8px;
  font-size: 14px;
  color: #444;
}

/* ページネーション */
.archive-news__pagination {
  margin-top: 40px;
  text-align: center;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .archive-news {
    padding: 60px 16px;
  }
  .archive-news__item {
    padding: 16px;
  }
  .archive-news__date {
    font-size: 12px;
  }
  .archive-news__excerpt {
    font-size: 13px;
  }
}

.single-news {
  padding: 80px 24px;
  background-color: #f9f9f9;
}

.single-news__article {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-radius: 8px;
}

.single-news__title {
  font-size: 2rem;
  margin-bottom: 16px;
}

.single-news__meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}

.single-news__meta span,
.single-news__meta time {
  margin-right: 16px;
}

.single-news__content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.single-news__content p {
  line-height: 1.5;
}

.single-news__nav {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}

.single-news__nav a {
  text-decoration: none;
  color: #f60;
}

.single-news__back {
  text-align: center;
  margin-top: 32px;
}

.single-news__back .btn {
  padding: 10px 24px;
  font-size: 14px;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .single-news {
    padding: 60px 16px;
  }
  .single-news__article {
    padding: 24px;
  }
  .single-news__title {
    font-size: 1.6rem;
  }
  .single-news__content {
    font-size: 15px;
  }
  .single-news__nav {
    flex-direction: column;
    gap: 16px;
  }
}

.single-news__thumbnail {
  margin: 40px 0;
  text-align: center;
}

.single-news__thumbnail img {
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* スマホ対応 */
@media (max-width: 599px) {
  .single-news__thumbnail {
    margin: 25px 0;
  }
  .single-news__thumbnail img {
    border-radius: 6px;
  }
}



/* =========================
   WORKS アーカイブページ
   ========================= */
/* ===== 実績一覧ページ ===== */
.works-archive {
  padding: 120px 0 80px;
  background: #fafafa;
}

.archive-works__title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title__en {
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
}

.section-title__jp {
  font-size: 1rem;
  color: #999;
  margin-top: 5px;
}

/* 一覧リスト */
.works-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 各アイテム */
.work-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.work-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.work-item a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* サムネイル */
.work-item__thumb img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* タイトル */
.work-item__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 16px 20px 8px;
  color: #333;
  padding: 15px 0;
  text-align: center;
}

/* カスタムフィールド情報 */
.work-item__info {
  margin: 0 20px 20px;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}

.work-item__info p {
  margin: 10px 0;
  line-height: 1.5;
}

.work-item__info strong {
  color: #222;
  font-weight: 600;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .works-archive {
    padding: 100px 0 60px;
  }

  .section-title__en {
    font-size: 2rem;
  }

  .works-list {
    gap: 24px;
  }

  .work-item__thumb img {
    height: 200px;
  }

  .work-item__title {
    font-size: 1.1rem;
    margin: 12px 16px 6px;
  }

  .work-item__info {
    margin: 0 16px 16px;
    font-size: 0.85rem;
  }
}



.single-work__info {
  max-width: 800px;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  padding: 30px 30px;
  line-height: 1.8;
  color: #333;
}

.single-work__info p {
  margin-bottom: 10px;
  line-height: 1.5;
}


.single-work__info strong {
  color: #ff7f32;
  font-weight: 700;
  margin-right: 8px;
}

/* レスポンシブ */
@media (max-width: 768px) {

  .single-work__info {
    padding: 20px;
  }

}

.contact__submit {
  text-align: center;
}


/* =========================================================
  single-news__content 共通スタイル
========================================================= */
.single-news__content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  font-weight: 400;
  word-break: break-word;
}

.single-news__content > *:first-child {
  margin-top: 0;
}
.single-news__content > *:last-child {
  margin-bottom: 0;
}

/* ---------- 見出し ---------- */
.single-news__content h2,
.single-news__content h3,
.single-news__content h4,
.single-news__content h5,
.single-news__content h6 {
  font-weight: 600;
  line-height: 1.4;
  color: #111;
  margin-top: 2.5em;
  margin-bottom: 1em;
}

.single-news__content h2 {
  font-size: 1.6rem;
  border-left: 4px solid #007aff;
  padding-left: 0.6em;
}

.single-news__content h3 {
  font-size: 1.4rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.3em;
}

.single-news__content h4 {
  font-size: 1.2rem;
  color: #444;
}

/* ---------- 段落 ---------- */
.single-news__content p {
  margin: 1.6em 0;
}

/* ---------- リスト ---------- */
.single-news__content ul,
.single-news__content ol {
  margin: 1.6em 0 1.6em 1.5em;
  padding: 0;
}

.single-news__content li {
  margin-bottom: 0.6em;
  line-height: 1.8;
}

.single-news__content ul li {
  list-style: disc;
}

.single-news__content ol li {
  list-style: decimal;
}

/* ---------- 画像 ---------- */
.single-news__content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2em auto;
  border-radius: 8px;
}

/* ---------- 引用 ---------- */
.single-news__content blockquote {
  border-left: 4px solid #007aff;
  background: #f8f8f8;
  padding: 1em 1.2em;
  margin: 2em 0;
  color: #555;
  font-style: italic;
}

/* ---------- テーブル ---------- */
.single-news__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.95rem;
}

.single-news__content th,
.single-news__content td {
  border: 1px solid #ddd;
  padding: 0.8em;
  text-align: left;
}

.single-news__content th {
  background-color: #f3f6fa;
  font-weight: 600;
}

/* ---------- リンク ---------- */
.single-news__content a {
  color: #007aff;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.single-news__content a:hover {
  opacity: 0.7;
}

/* ---------- 強調 ---------- */
.single-news__content strong {
  font-weight: 700;
  color: #000;
}

/* ---------- レスポンシブ調整 ---------- */
@media (max-width: 768px) {
  .single-news__content {
    font-size: 15px;
  }

  .single-news__content h2 {
    font-size: 1.4rem;
  }

  .single-news__content h3 {
    font-size: 1.2rem;
  }
}