@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&family=Zen+Old+Mincho&display=swap");
/*@import url("global.css"); ※当社で一から作ったソースではないため、CSSの競合を避けるために非表示にしています*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

:root {
  --color-bg2: #F7F6F4;
  --color-line: #06C755; }

html {
  scroll-behavior: smooth; }

body {
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  color: #333;
  background: #fff;
  font-weight: 400;
  line-height: 1.8;
  font-size: 16px; }

.pcnone {
  display: none; }

.pctabnone {
  display: none; }

/* ============================================
   ヘッダー
============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.site-header__logo {
  display: flex;
  flex-direction: column;
  text-decoration: none; }

.site-header__logo-mark {
  width: 36px;
  height: 44px;
  border: 1.5px solid #4E4A40;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px; }
  .site-header__logo-mark span {
    font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 20px;
    color: #4E4A40; }

.site-header__logo-name {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #676155;
  line-height: 1.6; }

.site-header__logo-sub {
  font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #8f8f8f; }

.site-header__back {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #676155;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s; }
  .site-header__back::hover {
    color: #4E4A40; }
  .site-header__back svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5; }

/* ============================================
   ヒーロー
============================================ */
.hero {
  background: #4E4A40;
  color: #fff;
  padding: 100px 40px 80px;
  text-align: center;
  position: relative;
  overflow: hidden; }
  .hero::before {
    content: 'AI';
    position: absolute;
    font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 300px;
    color: rgba(255, 255, 255, 0.03);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    line-height: 1; }

.hero__label {
  display: inline-block;
  font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #C8B89A;
  border: 1px solid #C8B89A;
  padding: 5px 16px;
  margin-bottom: 32px; }

.hero__title {
  font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.4;
  margin-bottom: 24px;
  color: #fff; }

.hero__title em {
  font-style: normal;
  color: #C8B89A; }

.hero__catch {
  font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 16px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px; }

.hero__subtitle {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.45); }

/* ============================================
   代表紹介＋イントロ
============================================ */
.intro {
  padding: 80px 40px;
  max-width: 900px;
  margin: 0 auto; }

.intro__inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  /*margin-bottom: 48px;*/ }

/* 代表写真エリア */
.intro__photo {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; }

/* ★ ここに実際の写真を入れる場合は下記のimgタグを使用してください
   <img src="photo-tsuji.jpg" alt="代表 辻将大" style="width:100%;height:100%;object-fit:cover;">
   上の2つの要素（svg・span）は削除してください */
.intro__photo-frame {
  width: 200px;
  height: 240px;
  background: #efeeeb;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden; }
  .intro__photo-frame svg {
    width: 56px;
    height: 56px;
    stroke: #ddd;
    fill: none;
    stroke-width: 1; }
  .intro__photo-frame span {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #8f8f8f; }

.intro__photo-name {
  text-align: center; }
  .intro__photo-name strong {
    display: block;
    font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #4E4A40; }
  .intro__photo-name span {
    font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: #8f8f8f; }

.intro__photo-role {
  font-size: 11px;
  color: #8f8f8f;
  letter-spacing: 0.1em;
  text-align: center; }

/* テキスト側 */
.intro__text {
  flex: 1; }

.intro__lead {
  font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-align: center;
  line-height: 1.9;
  color: #4E4A40;
  margin-bottom: 40px; }

.intro__body {
  line-height: 2.2;
  color: #676155;
  text-align: center; }
  .intro__body p + p {
    margin-top: 1em; }

/* イントロ直下CTA */
.intro__cta {
  text-align: center;
  margin-top: 60px; }

.intro__cta-note {
  font-size: 14px;
  color: #8f8f8f;
  margin-bottom: 20px;
  letter-spacing: 0.1em; }

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-line);
  color: #fff;
  text-decoration: none;
  padding: 16px 40px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 4px;
  transition: opacity 0.2s, transform 0.2s; }
  .btn-line:hover {
    opacity: 0.88;
    transform: translateY(-2px); }
  .btn-line svg {
    width: 20px;
    height: 20px;
    fill: white; }
  .btn-line i {
    color: #fff;
    font-family: "Font Awesome 6 free", "Font Awesome 6 Brands";
    font-size: 20px; }

.btn-line--ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  padding: 12px 32px; }
  .btn-line--ghost:hover {
    border-color: white;
    color: white; }

.no-sales-note {
  margin-top: 14px;
  font-size: 12px;
  color: #8f8f8f;
  letter-spacing: 0.1em; }
  .no-sales-note::before {
    content: '✓';
    color: var(--color-line); }

/* ============================================
   サービス内容
============================================ */
.service {
  background: #efeeeb;
  padding: 80px 40px; }

.section-title {
  text-align: center;
  margin-bottom: 56px; }

.section-title__en {
  font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8f8f8f;
  display: block;
  margin-bottom: 12px; }

.section-title__ja {
  font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #4E4A40; }

.service__grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px; }

.service__card {
  background: #fff;
  padding: 40px 32px; }

.service__card-num {
  font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 36px;
  color: #ddd;
  display: block;
  margin-bottom: 20px;
  line-height: 1; }

.service__card-title {
  font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #4E4A40;
  margin-bottom: 20px;
  line-height: 1.6; }

.service__card-body {
  font-size: 14px;
  line-height: 2;
  color: #676155; }

/* ============================================
   使い方
============================================ */
.howto {
  padding: 80px 40px;
  max-width: 800px;
  margin: 0 auto; }

.howto__steps {
  display: flex;
  flex-direction: column;
  margin-top: 8px; }

.howto__step {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 32px 0;
  border-bottom: 1px solid #ddd; }
  .howto__step:first-child {
    padding: 0 0 32px; }
  .howto__step:last-child {
    border-bottom: none; }

.howto__step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding-top: 5px;
  border: 1px solid #4E4A40;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 18px;
  color: #4E4A40; }

.howto__step-content h3 {
  font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 10px; }
.howto__step-content p {
  line-height: 2;
  color: #676155; }

/* ============================================
   質問例
============================================ */
.faq {
  background: var(--color-bg2);
  padding: 80px 40px; }

.faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.faq__item {
  background: #fff;
  border: 1px solid #ddd;
  padding: 24px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start; }

.faq__q {
  flex-shrink: 0;
  font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 20px;
  font-style: italic;
  color: #62778E;
  line-height: 1;
  margin-top: 4px; }

.faq__text {
  color: #676155;
  letter-spacing: 0.05em; }

/* ============================================
   注意事項
============================================ */
.notes {
  padding: 60px 40px;
  max-width: 760px;
  margin: 0 auto; }

.notes__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px; }
  .notes__list li {
    font-size: 14px;
    color: v #676155;
    padding-left: 20px;
    position: relative;
    line-height: 1.9; }
    .notes__list li::before {
      content: '―';
      position: absolute;
      left: 0;
      color: #333; }

/* ============================================
   LINE登録CTA
============================================ */
.cta {
  background: #4E4A40;
  padding: 80px 40px;
  text-align: center; }
  .cta .f_inner {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vw; }

.cta__label {
  font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #C8B89A;
  display: block;
  margin-bottom: 20px; }

.cta__title {
  font-family: "Zen Old Mincho", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #fff;
  margin-bottom: 40px; }

.cta__body {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
  margin-bottom: 40px; }

/* 安心ポイント */
.cta__assurance {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  text-align: left; }

.cta__assurance-item {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px; }
  .cta__assurance-item::before {
    content: '✓';
    color: var(--color-line);
    font-weight: 700;
    font-size: 16px; }

.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--color-line);
  color: #fff;
  text-decoration: none;
  padding: 18px 56px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 4px;
  transition: opacity 0.2s, transform 0.2s; }
  .cta__btn:hover {
    opacity: 0.88;
    transform: translateY(-2px); }
  .cta__btn svg {
    width: 22px;
    height: 22px;
    fill: white; }

.cta__note {
  margin-top: 20px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em; }

/* ============================================
   フッター
============================================ */
.site-footer {
  background: #2A2825;
  padding: 40px;
  text-align: center; }

.site-footer__logo {
  font-family: "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase; }

.site-footer__copy {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.05em; }

/* ============================================
   レスポンシブ
============================================ */
@media (max-width: 768px) {
  .site-header {
    padding: 14px 20px; }

  .hero {
    padding: 70px 24px 60px; }

  .intro {
    padding: 60px 24px; }

  .intro__inner {
    flex-direction: column;
    align-items: center;
    gap: 32px; }

  .intro__photo {
    width: 160px; }

  .intro__photo-frame {
    width: 160px;
    height: 200px; }

  .intro__text {
    text-align: center; }

  .service, .faq, .cta {
    padding: 60px 24px; }

  .service__grid {
    grid-template-columns: 1fr;
    gap: 2px; }

  .service__card {
    padding: 32px 24px; }

  .howto {
    padding: 60px 24px; }

  .howto__step {
    gap: 20px; }

  .notes {
    padding: 48px 24px; }

  .cta__assurance {
    text-align: left; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-0 (1600px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1380px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 (1200px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  body {
    font-size: 15px; }

  .pcnone {
    display: block; }

  .pctabnone {
    display: none; }

  .tabnone {
    display: none; }

  .sptabnone {
    display: none; }

  /* ============================================
     サービス内容
  ============================================ */
  .service__card-title {
    font-size: 20px; }

  /* ============================================
     使い方
  ============================================ */
  .howto__step-content h3 {
    font-size: 20px; }

  /* ============================================
     LINE登録CTA
  ============================================ */
  .cta .f_inner {
    display: block; }

  .cta__assurance {
    margin-bottom: 40px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  body {
    font-size: 14px; }

  .pctabnone {
    display: block; }

  .tabnone {
    display: block; }

  .sptabnone {
    display: none; }

  .spnone {
    display: none; }

  .intro__inner {
    /*margin-bottom: 40px;*/ }

  .intro__body {
    font-size: 14px;
    text-align: start; }

  /* イントロ直下CTA */
  .intro__cta {
    font-size: 13px;
    margin-top: 50px; }

  .btn-line {
    padding: 16px 30px;
    font-size: 14px; }

  /* ============================================
     サービス内容
  ============================================ */
  .section-title {
    margin-bottom: 40px; }

  .service__card-title {
    font-size: 18px; }

  /* ============================================
     使い方
  ============================================ */
  .howto__step-content h3 {
    font-size: 18px; }

  .cta__body {
    text-align: start; } }