/* ============================================================
   office7793.com  アプリ関連ページ 共通スタイル  v4
   office7793 デザインガイドライン v1.1（DADS ベース）を適用
   ------------------------------------------------------------
   ・トークン（色・余白・角丸）はガイドライン v1.1 の値そのまま
   ・本文 17px／行間 1.7、補足でも 16px、最小 14px
   ・リンクは青＋下線（訪問済みは紫）、主ボタンはブランドの濃いオレンジ
   ・フォーカス：内側 2px（黒）＋外側 6px（黄）
   ・押せるところは高さ 44px 以上、ボタンは 48px
   ・すべて .o7793 と .wpcf7 の中だけに効きます
   ============================================================ */

/* ---- トークン（ガイドライン v1.1） ------------------------- */
.o7793,.wpcf7{
  --primary:#A84905; --primary-hover:#944105; --primary-active:#7C3604; --on-primary:#FFFFFF;
  --brand:#F8771A; --bg-brand:#FFF6F0; --container:#FEEADC; --on-container:#4A2002;
  --text:#333333; --text-strong:#1A1A1A; --text-sub:#525251;
  --border:#949494; --divider:#CCCCCC; --surface:#F2F2F2; --bg:#FFFFFF; --card:#FFFFFF;
  --link:#1A56C4; --link-visited:#6B3FA0;
  --info:#1A56C4; --info-bg:#EEF3FC;
  --success:#1F7A45; --success-bg:#EAF6EE;
  --error:#CE0000; --error-bg:#FDEEEE;
  --focus-in:#000000; --focus-out:#FFD43D;
  --shadow-1:0 1px 3px rgba(0,0,0,.2);
  --font:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px;
  --r-s:8px; --r-m:12px; --r-l:16px;
}

/* ---- 土台 ------------------------------------------------- */
.o7793{
  box-sizing:border-box;
  max-width:960px;               /* テーマの本文幅（645px）より広く使う */
  margin-inline:auto;
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
.o7793 *,.o7793 *::before,.o7793 *::after{box-sizing:inherit;}
.o7793 [id]{scroll-margin-top:5rem;}
.o7793 p{margin:0 0 var(--s3);}
.o7793 ul,.o7793 ol{margin:0 0 var(--s3);padding-left:1.4em;}
.o7793 li{margin:var(--s1) 0;}
.o7793 strong{font-weight:700;color:var(--text-strong);}
.o7793 code{font-family:var(--mono);font-size:16px;padding:0 var(--s1);border-radius:4px;background:var(--surface);}

.o7793 a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;}
.o7793 a:visited{color:var(--link-visited);}
.o7793 a:hover{text-decoration-thickness:2px;}

.o7793 :focus-visible,.wpcf7 :focus-visible{
  outline:2px solid var(--focus-in);outline-offset:2px;
  box-shadow:0 0 0 6px var(--focus-out);border-radius:4px;
}

/* ---- 見出し ----------------------------------------------- */
.o7793 h2,.o7793 h3,.o7793 h4{color:var(--text-strong);text-wrap:balance;}
.o7793 h2{margin:var(--s6) 0 var(--s4);font-size:26px;line-height:1.5;font-weight:700;}
.o7793 h3{margin:var(--s5) 0 var(--s3);font-size:22px;line-height:1.5;font-weight:700;}
.o7793 h4{margin:var(--s4) 0 var(--s2);font-size:18px;line-height:1.6;}
.o7793 .o7793-section-lead{margin-top:calc(var(--s4) * -1 + var(--s2));margin-bottom:var(--s4);color:var(--text-sub);}

/* ---- ヒーロー --------------------------------------------- */
.o7793-hero{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;
  margin:0 0 var(--s6);padding:var(--s6) var(--s5);
  border-radius:var(--r-l);background:var(--bg-brand);
}
.o7793-hero>*{position:relative;z-index:1;min-width:0;}
.o7793-hero .o7793-arc{position:absolute;z-index:0;right:-120px;top:-160px;width:520px;height:520px;pointer-events:none;opacity:.35;}
.o7793-hero-copy{display:grid;gap:var(--s3);}
.o7793-hero-copy>*{margin:0;}
.o7793-eyebrow{font-size:16px;font-weight:700;color:var(--primary);letter-spacing:.08em;}
.o7793-display{font-size:clamp(32px,5vw,45px);font-weight:700;line-height:1.4;letter-spacing:.01em;color:var(--text-strong);text-wrap:balance;}
.o7793-lead{max-width:34em;color:var(--text);}
.o7793-stamp{color:var(--text-sub);font-size:16px;}
.o7793-logo-panel{width:min(260px,100%);padding:var(--s4);border:1px solid var(--divider);border-radius:var(--r-l);background:#FFFFFF;}
.o7793-logo-panel img{display:block;width:100%;height:auto;}
.o7793-hero.no-logo{grid-template-columns:1fr;}

/* ---- ボタン ----------------------------------------------- */
.o7793 .o7793-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;min-width:96px;padding:0 var(--s4);
  border:2px solid var(--primary);border-radius:var(--r-s);
  font-size:16px;font-weight:700;line-height:1.2;letter-spacing:.02em;text-decoration:none;text-align:center;
}
.o7793 .o7793-btn-fill,.o7793 .o7793-btn-fill:visited{background:var(--primary);color:var(--on-primary);}
.o7793 .o7793-btn-fill:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary);text-decoration:underline;}
.o7793 .o7793-btn-fill:active{background:var(--primary-active);border-color:var(--primary-active);}
.o7793 .o7793-btn-line,.o7793 .o7793-btn-line:visited{background:transparent;color:var(--primary);}
.o7793 .o7793-btn-line:hover{border-color:var(--primary-hover);color:var(--primary-hover);text-decoration:underline;}
.o7793 .o7793-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0;}

/* ---- アプリカード ------------------------------------------ */
.o7793 .o7793-apps{display:grid;gap:var(--s4);margin:0 0 var(--s4);}
.o7793 .o7793-app{
  display:grid;grid-template-columns:96px 1fr;gap:var(--s3) var(--s4);min-width:0;
  padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-m);background:var(--card);
}
.o7793 .o7793-app-icon{width:96px;height:96px;border-radius:var(--r-l);background:var(--container);color:var(--primary);display:grid;place-items:center;}
.o7793 .o7793-app-icon svg{width:64px;height:64px;}
.o7793 .o7793-app-icon.has-image{background:none;overflow:hidden;box-shadow:var(--shadow-1);}
.o7793 .o7793-app-icon.has-image img{display:block;width:100%;height:100%;object-fit:cover;}
.o7793 .o7793-app-body{display:grid;gap:var(--s3);min-width:0;}
.o7793 .o7793-app-body>*{margin:0;}
.o7793 .o7793-app h3{margin:0;font-size:22px;}
.o7793 .o7793-app-body p{max-width:40em;}
.o7793 .o7793-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none;}
.o7793 .o7793-chip{margin:0;padding:2px 12px;border:1px solid var(--divider);border-radius:999px;background:var(--surface);color:var(--text);font-size:16px;line-height:1.5;}
.o7793 .o7793-chip.free{background:var(--success-bg);color:var(--success);border-color:var(--success);font-weight:700;}
.o7793 .o7793-chip.soon{background:var(--container);color:var(--on-container);border-color:var(--primary);font-weight:700;}
.o7793 .o7793-price{font-size:16px;color:var(--text-sub);}
.o7793 .o7793-sublinks{display:flex;flex-wrap:wrap;gap:0 var(--s3);font-size:16px;margin:0;}
.o7793 .o7793-sublinks a{display:inline-flex;align-items:center;min-height:44px;}

/* ---- お知らせ（情報） --------------------------------------- */
.o7793 .o7793-note{
  display:grid;grid-template-columns:28px 1fr;gap:0 var(--s3);
  margin:var(--s4) 0;padding:var(--s4);
  border:1px solid var(--info);border-radius:var(--r-m);background:var(--info-bg);
}
.o7793 .o7793-note::before{
  content:"";grid-row:1 / span 20;width:28px;height:28px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%231A56C4' stroke-width='2'/%3E%3Crect x='11' y='10' width='2' height='7' fill='%231A56C4'/%3E%3Crect x='11' y='6' width='2' height='2' fill='%231A56C4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.o7793 .o7793-note>*{grid-column:2;}
.o7793 .o7793-note>strong:first-child,.o7793 .o7793-note>h3:first-child{display:block;margin:0 0 var(--s2);font-size:18px;line-height:1.6;color:var(--text-strong);}
.o7793 .o7793-note ul{display:grid;gap:var(--s1);margin-bottom:var(--s2);}
.o7793 .o7793-note>:last-child{margin-bottom:0;}

/* ---- 目次 ------------------------------------------------- */
.o7793 .o7793-toc{margin:0 0 var(--s5);padding:var(--s4);border-radius:var(--r-m);background:var(--surface);}
.o7793 .o7793-toc>p{margin:0 0 var(--s2);font-weight:700;color:var(--text-strong);}
.o7793 .o7793-toc ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:0 var(--s5);margin:0;padding-left:1.6em;}
.o7793 .o7793-toc li{margin:0;}
.o7793 .o7793-toc a{display:inline-flex;align-items:center;min-height:44px;}

/* ---- 情報の表（キーと値） ----------------------------------- */
.o7793-table{width:100%;border-collapse:collapse;margin:0 0 var(--s4);border-top:1px solid var(--divider);font-size:16px;}
.o7793-table th,.o7793-table td{padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--divider);text-align:left;vertical-align:top;line-height:1.7;}
.o7793-table tbody th{width:10em;font-weight:700;color:var(--text-strong);}
.o7793-table thead th{font-weight:700;color:var(--text-strong);border-bottom:2px solid var(--border);}
.o7793-table td:last-child{padding-right:0;}

/* 運営者情報の2列 */
.o7793 .o7793-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);}
.o7793 .o7793-info-grid>div{min-width:0;}
.o7793 .o7793-info-grid h3{margin:0 0 var(--s3);}
.o7793 .o7793-info-grid .o7793-table tbody th{width:7.5em;}
.o7793 .o7793-band{margin:var(--s6) 0 0;padding:var(--s5);border-radius:var(--r-l);background:var(--bg-brand);}
.o7793 .o7793-band>h2:first-child{margin-top:0;}

/* ---- よくあるご質問 ---------------------------------------- */
.o7793 .o7793-faq{border-bottom:1px solid var(--divider);}
.o7793 h3+.o7793-faq,.o7793 p+.o7793-faq{border-top:1px solid var(--divider);}
.o7793-faq summary{
  position:relative;display:flex;align-items:center;min-height:56px;
  padding:var(--s3) 48px var(--s3) var(--s2);cursor:pointer;list-style:none;
  font-size:17px;font-weight:700;line-height:1.6;color:var(--text-strong);
}
.o7793-faq summary::-webkit-details-marker{display:none;}
.o7793-faq summary:hover{background:var(--surface);text-decoration:underline;}
.o7793-faq summary::after{
  content:"";position:absolute;right:var(--s3);top:50%;width:10px;height:10px;margin-top:-8px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);
}
.o7793-faq[open] summary::after{margin-top:-2px;transform:rotate(-135deg);}
.o7793-faq-body{padding:0 var(--s2) var(--s4);}
.o7793-faq-body>:last-child{margin-bottom:0;}

/* ---- テンプレート・署名 ------------------------------------- */
.o7793-pre{
  margin:0 0 var(--s4);padding:var(--s3) var(--s4);
  border:1px solid var(--divider);border-radius:var(--r-m);background:var(--surface);
  font-family:var(--mono);font-size:16px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;
}
.o7793-sig{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--divider);color:var(--text-sub);font-size:16px;line-height:1.7;}

/* ---- スマートフォン（767px 以下） ---------------------------- */
@media (max-width:767px){
  .o7793-hero{grid-template-columns:1fr;padding:var(--s5) var(--s3);}
  .o7793-logo-panel{width:180px;padding:var(--s3);}
  .o7793 .o7793-app{grid-template-columns:1fr;padding:var(--s3);}
  .o7793 .o7793-app-icon{width:72px;height:72px;}
  .o7793 .o7793-app-icon svg{width:48px;height:48px;}
  .o7793 .o7793-actions .o7793-btn{flex:1 1 100%;}
  .o7793 .o7793-info-grid{grid-template-columns:1fr;}
  .o7793 .o7793-band{padding:var(--s4) var(--s3);}
  .o7793 h2{margin-top:var(--s5);}
  .o7793 .o7793-note{grid-template-columns:1fr;gap:var(--s2);padding:var(--s3);}
  .o7793 .o7793-note::before{grid-row:auto;}
  .o7793 .o7793-note>*{grid-column:1;}
  /* 表は縦に積む */
  .o7793-table,.o7793-table tbody,.o7793-table tr,.o7793-table th,.o7793-table td{display:block;width:auto !important;}
  .o7793-table thead{display:none;}
  .o7793-table tr{padding:var(--s2) 0;border-bottom:1px solid var(--divider);}
  .o7793-table th,.o7793-table td{padding:0;border:0;}
  .o7793-table td[data-label]::before{content:attr(data-label);display:block;font-weight:700;color:var(--text-strong);}
}
@media (prefers-reduced-motion:reduce){.o7793 *{transition:none !important;}}

/* ============================================================
   Contact Form 7（お問い合わせフォーム）
   ============================================================ */
.wpcf7{box-sizing:border-box;margin:0;color:var(--text);font-family:var(--font);font-size:17px;line-height:1.7;letter-spacing:.02em;}
.wpcf7 *,.wpcf7 *::before,.wpcf7 *::after{box-sizing:inherit;}
.wpcf7 p{margin:0;}
.wpcf7 p:empty{display:none;}
.wpcf7 .wpcf7-form-control-wrap{display:block;}

.o7793-field{display:block;margin:0 0 var(--s4);}
.o7793-flabel{display:block;margin:0 0 var(--s2);font-size:17px;font-weight:700;color:var(--text-strong);}
.o7793-req,.o7793-opt{display:inline-block;margin-left:var(--s2);padding:0 var(--s2);border-radius:4px;font-size:14px;font-weight:700;line-height:1.7;vertical-align:.1em;}
.o7793-req{background:var(--error);color:#fff;}
.o7793-opt{background:var(--surface);color:var(--text-sub);border:1px solid var(--divider);}
.o7793-hint{display:block;margin:var(--s2) 0 0;color:var(--text-sub);font-size:16px;}
.o7793-fieldrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0 var(--s4);}

.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=url],.wpcf7 input[type=number],.wpcf7 input[type=date],
.wpcf7 select,.wpcf7 textarea{
  width:100%;min-height:56px;padding:12px var(--s3);
  border:1px solid var(--border);border-radius:var(--r-s);background:#fff;
  color:var(--text-strong);font-family:inherit;font-size:17px;line-height:1.7;
}
.wpcf7 input:hover,.wpcf7 select:hover,.wpcf7 textarea:hover{border-color:var(--text-strong);}
.wpcf7 textarea{min-height:12rem;resize:vertical;}
.wpcf7 select{
  appearance:none;-webkit-appearance:none;padding-right:48px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A84905' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s3) center;background-size:12px;
}
.wpcf7 ::placeholder{color:var(--text-sub);}

.o7793-consent{margin-top:var(--s4);padding:var(--s3);border-radius:var(--r-s);background:var(--surface);}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0;}
.wpcf7 .wpcf7-acceptance label{display:flex;align-items:flex-start;gap:var(--s2);min-height:44px;cursor:pointer;}
.wpcf7 .wpcf7-acceptance input[type=checkbox]{flex:none;width:24px;height:24px;margin:2px 0 0;accent-color:var(--primary);}

.o7793-submit{margin-top:var(--s4);text-align:center;}
.wpcf7 input[type=submit],.wpcf7 button[type=submit]{
  display:inline-block;min-height:48px;min-width:240px;padding:0 var(--s5);
  border:2px solid var(--primary);border-radius:var(--r-s);background:var(--primary);color:var(--on-primary);
  font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;
}
.wpcf7 input[type=submit]:hover,.wpcf7 button[type=submit]:hover{background:var(--primary-hover);border-color:var(--primary-hover);text-decoration:underline;}
.wpcf7 input[type=submit]:active{background:var(--primary-active);border-color:var(--primary-active);}
.wpcf7 input[type=submit]:disabled{background:var(--border);border-color:var(--border);cursor:not-allowed;text-decoration:none;}
.wpcf7 .wpcf7-spinner{margin:0 0 0 var(--s3);vertical-align:middle;}

.wpcf7 .wpcf7-not-valid{border:2px solid var(--error) !important;}
.wpcf7 .wpcf7-not-valid-tip{display:block;margin-top:var(--s2);color:var(--error);font-size:16px;font-weight:700;}
.wpcf7 .wpcf7-response-output{
  margin:var(--s4) 0 0 !important;padding:var(--s3) var(--s4) !important;
  border:1px solid var(--info) !important;border-radius:var(--r-m);background:var(--info-bg);
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--success) !important;background:var(--success-bg);}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:var(--error) !important;background:var(--error-bg);}

.o7793-formcard{margin:0 0 var(--s4);padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-m);background:var(--card);}
@media (max-width:767px){
  .o7793-formcard{padding:var(--s4) var(--s3);}
  .wpcf7 input[type=submit],.wpcf7 button[type=submit]{width:100%;min-width:0;}
}
