@charset "utf-8";
/* ============================================================
   PotentCompany  共通スタイル
   設計基準：PC 1440px / コンテナ 1200px
   ブレイクポイント：SP 〜767 / TB 768〜1023 / PC 1024〜
   ============================================================ */

/* ---------- トークン ---------- */
:root{
  /* Color ─ 値はすべてデザインカンプ（top.svg / index.png）実測 */
  --c-red:        #FF0901;   /* アップルキャンディ */
  --c-red-half:   #FF8480;   /* 上記の半調（50%） */
  --c-red-pale:   #FFF1F0;   /* フォーム入力欄などの極薄 */
  --c-red-dark:   #D93B36;
  --c-ink:        #333333;
  --c-ink-sub:    #333333;   /* 本文もすべて #333333。グレー文字は使わない */
  --c-ink-mute:   #999999;
  --c-line:       #E0E0E0;
  --c-bg:         #FFFFFF;
  --c-bg-gray:    #DBDBDB;   /* 02 セクション */
  --c-bg-pink:    #FFF7F9;   /* 04 セクション */
  --c-bg-soft:    #F7F7F7;

  /* Font */
  --f-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-num:   "Oswald", var(--f-sans);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 74px;

  /* Easing */
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (max-width:767px){
  :root{ --gutter:20px; --header-h:60px; }
}

/* ---------- ベース ---------- */
html{font-size:62.5%}
body{
  font-family:var(--f-sans);
  font-size:1.6rem;
  font-weight:400;
  line-height:1.8;
  color:var(--c-ink);
  background:var(--c-bg);
  font-feature-settings:"palt" 1;
  overflow-wrap:break-word;
}
::selection{background:var(--c-red);color:#fff}
:focus-visible{outline:3px solid var(--c-red);outline-offset:2px}

/* ---------- 汎用 ---------- */
.l-container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.u-sp{display:none}
@media (max-width:767px){ .u-pc{display:none} .u-sp{display:block} }
.u-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 見出しの通し番号 + ラベル（01 店舗経営、こんなお悩みありませんか？） */
.c-secttl{display:flex;align-items:baseline;gap:16px;margin-bottom:24px}
.c-secttl__num{
  font-family:var(--f-num);font-weight:600;font-size:3.2rem;line-height:1;
  color:var(--c-red);border-bottom:3px solid var(--c-red);padding-bottom:2px;letter-spacing:.02em;
}
.c-secttl__label{font-size:2rem;font-weight:700;letter-spacing:.04em}
.c-lead{font-size:3.2rem;font-weight:700;line-height:1.5;letter-spacing:.02em}
@media (max-width:767px){
  .c-secttl{gap:12px;margin-bottom:16px}
  .c-secttl__num{font-size:2.6rem}
  .c-secttl__label{font-size:1.6rem}
  .c-lead{font-size:2.2rem}
}

/* ---------- ボタン ---------- */
.c-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-width:220px;padding:14px 44px;
  font-size:1.6rem;font-weight:700;letter-spacing:.04em;line-height:1.4;
  color:#fff;background:var(--c-red);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
/* 矢印は右端に絶対配置。テキストはボタンの中央に来る */
.c-btn::after{
  content:"";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-style:solid;border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent currentColor;
}
.c-btn:hover{background:var(--c-ink);color:#fff}
.c-btn--ghost{color:var(--c-red);background:#fff;border:2px solid var(--c-red)}
.c-btn--ghost:hover{color:#fff;background:var(--c-red);border-color:var(--c-red)}
.c-btn--noarrow::after{content:none}
.c-btn--wide{min-width:300px}
.c-btn__icon{width:22px;height:auto;flex:none}
.c-btn__icon path{fill:currentColor}

/* テキストリンク（詳しく見る） */
.c-more{display:inline-block;font-size:1.5rem;font-weight:700;color:var(--c-ink);border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .25s var(--ease)}
.c-more:hover{color:var(--c-red)}

/* ---------- ヘッダー ---------- */
.l-header{position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);background:#fff}
.l-header__inner{display:flex;align-items:center;height:100%;padding-left:88px}
@media (max-width:1439px){ .l-header__inner{padding-left:var(--gutter)} }
.l-header__logo{flex:none}
.l-header__logo img{width:82px;height:auto}
.l-nav{margin-inline:auto}
.l-nav__list{display:flex;gap:38px}
.l-nav__link{
  position:relative;display:block;padding:6px 2px;
  font-size:1.3rem;font-weight:700;letter-spacing:.14em;color:var(--c-ink);
}
.l-nav__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--c-red);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.l-nav__link:hover::after,.l-nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.l-header__cta{
  flex:none;display:flex;align-items:center;justify-content:center;gap:12px;
  width:228px;height:100%;
  font-size:1.35rem;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--c-red);
  transition:background .25s var(--ease);
}
.l-header__cta:hover{background:var(--c-ink)}
.l-header__cta svg{width:22px;height:auto;flex:none}
.l-header__burger{display:none}

@media (max-width:1023px){
  .l-header__cta{width:168px;font-size:1.25rem;gap:8px}
  .l-nav__list{gap:24px}
  .l-nav__link{font-size:1.25rem}
}
@media (max-width:767px){
  .l-header__inner{padding-left:var(--gutter)}
  .l-header__logo img{width:72px}
  .l-header__cta{display:none}
  .l-header__burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    margin-left:auto;width:var(--header-h);height:var(--header-h);background:var(--c-red);align-items:center;
  }
  .l-header__burger span{display:block;width:24px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
  .l-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .l-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .l-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .l-nav{
    position:fixed;inset:var(--header-h) 0 0;margin:0;background:#fff;
    padding:32px var(--gutter);
    transform:translateX(100%);transition:transform .35s var(--ease);
    overflow-y:auto;
  }
  .l-nav[data-open="true"]{transform:none}
  .l-nav__list{flex-direction:column;gap:0}
  .l-nav__link{padding:18px 0;font-size:1.8rem;border-bottom:1px solid var(--c-line)}
  .l-nav__link::after{display:none}
  .l-nav__cta{margin-top:28px}
  .l-nav__cta .c-btn{width:100%}
}

/* 固定ヘッダーぶんの余白 */
.l-main{padding-top:var(--header-h)}

/* ---------- 下層ページ共通MV ---------- */
.p-mv{position:relative;padding:72px 0 96px;overflow:hidden;background:#fff}
.p-mv__wave{position:absolute;inset:0;z-index:0;pointer-events:none}
.p-mv__wave img{width:100%;height:100%;object-fit:cover;object-position:left center}
.p-mv__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 470px;gap:48px;align-items:center}
.p-mv__en{font-family:var(--f-sans);font-size:2.4rem;font-weight:700;letter-spacing:.06em;color:var(--c-red);margin-bottom:20px}
.p-mv__ttl{font-size:4rem;font-weight:700;line-height:1.5;letter-spacing:.02em;margin-bottom:24px}
.p-mv__ttl .is-red{color:var(--c-red)}
.p-mv__txt{font-size:1.5rem;line-height:1.9;max-width:44em}
.p-mv__img{position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden}
.p-mv__img img{width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){
  .p-mv__inner{grid-template-columns:1fr 340px;gap:32px}
  .p-mv__ttl{font-size:3.2rem}
}
@media (max-width:767px){
  .p-mv{padding:40px 0 56px}
  .p-mv__inner{grid-template-columns:1fr;gap:28px}
  .p-mv__en{font-size:1.8rem;margin-bottom:12px}
  .p-mv__ttl{font-size:2.4rem}
  .p-mv__img{max-width:280px;margin-inline:auto}
}

/* 下層ページ見出し（中央・英字＋和文） */
.c-headline{text-align:center;margin-bottom:56px}
.c-headline__en{font-size:1.4rem;font-weight:700;letter-spacing:.12em;color:var(--c-red);margin-bottom:12px}
.c-headline__ja{font-size:3.2rem;font-weight:700;letter-spacing:.04em;line-height:1.5}
.c-headline__txt{margin-top:16px;font-size:1.5rem;color:var(--c-ink)}
@media (max-width:767px){
  .c-headline{margin-bottom:32px}
  .c-headline__ja{font-size:2.2rem}
}

/* ---------- 共通CTA（赤・入力かんたん1分） ---------- */
.c-ribbon{background:var(--c-red);color:#fff;text-align:center;padding:10px 16px}
.c-ribbon__main{
  display:inline-flex;align-items:center;gap:14px;
  font-size:2rem;font-weight:700;letter-spacing:.04em;line-height:1.3;
}
.c-ribbon__main::before,.c-ribbon__main::after{content:"";width:2px;height:22px;background:currentColor}
.c-ribbon__main::before{transform:rotate(-20deg)}
.c-ribbon__main::after{transform:rotate(20deg)}
.c-ribbon__sub{display:block;font-size:1.4rem;line-height:1.4;margin-top:0}
.c-ribbon a{display:block;transition:opacity .25s var(--ease)}
.c-ribbon a:hover{opacity:.82}
@media (max-width:767px){
  .c-ribbon__main{font-size:1.6rem;gap:10px}
  .c-ribbon__sub{font-size:1.2rem}
}

/* ---------- 共通CTA（大・09 Contact 型） ---------- */
.c-contact{background:var(--c-red);color:#fff;padding:44px 0}
.c-contact__inner{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.c-contact__body{flex:1 1 520px}
.c-contact__ttl{font-size:3.2rem;font-weight:700;line-height:1.4;letter-spacing:.02em}
.c-contact__txt{margin-top:10px;font-size:1.5rem;line-height:1.7}
.c-contact .c-btn{background:#fff;color:var(--c-red);min-width:340px;padding:20px 44px;font-size:1.7rem}
.c-contact .c-btn:hover{background:var(--c-ink);color:#fff}
.c-contact .c-btn::after{border-width:0;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg);border-color:currentColor}
@media (max-width:767px){
  .c-contact{padding:36px 0}
  .c-contact__inner{gap:24px}
  .c-contact__ttl{font-size:2.1rem}
  .c-contact .c-btn{width:100%;min-width:0}
}

/* ---------- フッター ---------- */
.l-footer{padding:36px 0 24px;background:#fff;border-top:1px solid var(--c-line)}
.l-footer__top{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.l-footer__name{font-size:1.8rem;font-weight:700;letter-spacing:.02em}
.l-footer__nav{display:flex;align-items:center;gap:24px}
.l-footer__nav a{font-size:1.5rem;font-weight:700;letter-spacing:.06em;transition:color .25s var(--ease)}
.l-footer__nav a:hover{color:var(--c-red)}
.l-footer__sns{display:flex;gap:12px}
.l-footer__sns img{width:24px;height:24px}
.l-footer__info{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:14px;font-size:1.4rem}
.l-footer__info a{transition:color .25s var(--ease)}
.l-footer__info a:hover{color:var(--c-red)}
.l-footer__copy{margin-top:24px;text-align:center;font-size:1.2rem;letter-spacing:.06em;color:#999999}
.l-footer__sep{width:1px;height:18px;background:var(--c-line)}
@media (max-width:767px){
  .l-footer__top{flex-direction:column;gap:14px}
  .l-footer__nav{gap:16px;flex-wrap:wrap;justify-content:center}
  .l-footer__nav a{font-size:1.3rem}
  .l-footer__info{flex-direction:column;gap:6px;font-size:1.3rem}
  .l-footer__sep{display:none}
}

/* ---------- スクロールで出現 ---------- */
.js-fade{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-fade.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js-fade{opacity:1;transform:none} }